@charset "utf-8";

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, select, th, td { margin:0px; padding:0px; }
body { background:#ffffff; -webkit-text-size-adjust:none; font-size:medium; line-height:1.5; font-family:Helvetica, sans-serif; -webkit-user-select:none; -webkit-touch-callout:none; }
button, input, textarea, select { font-size:100%; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance:none;
}
input::-webkit-input-placeholder { color:#999999; }
h1, h2, h3, h4, h5, h6, strong, b { font-weight:normal; }
*{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0.3); }
ul, ol { list-style:none; }
img { border:none; }
a { color:#444444; text-decoration:none; -webkit-tap-highlight-color:rgba(0 ,0 ,0 , 0.3); /*-webkit-user-select:none;*/ }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { display:block; margin:0px; padding:0px; }

.article_title h1{text-align: center}

.article_title,
.article_content .diagram,
.nav_article,
.index_article .diagram {
    background-color:#ffffff;
    /*-webkit-box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    -o-box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    -o-border-radius:8px;
    border-radius:8px;*/
}
.clear {height: 0; clear: both;}

.star {width: 112px; height: 22px; display: block; float: left;}
.star-50 {background: url("../../images/meila/star.png") 0px 0px no-repeat; }
.star-45 {background: url("../../images/meila/star.png") 0px -23px no-repeat; }
.star-40 {background: url("../../images/meila/star.png") 0px -45px no-repeat; }
.star-35 {background: url("../../images/meila/star.png") 0px -68px no-repeat; }
.star-30 {background: url("../../images/meila/star.png") 0px -90px no-repeat; }
.star-25 {background: url("../../images/meila/star.png") 0px -112px no-repeat; }
.star-20 {background: url("../../images/meila/star.png") 0px -135px no-repeat; }
.star-15 {background: url("../../images/meila/star.png") 0px -157px no-repeat; }
.star-10 {background: url("../../images/meila/star.png") 0px -180px no-repeat; }
.star-0 {background: url("../../images/meila/star.png") 0px -202px no-repeat; }

.star-s {width: 80px; height: 15px; display: block; float: left;}
.star-50-s {background: url("../../images/meila/star-small.png") 0px 0px no-repeat; }
.star-45-s {background: url("../../images/meila/star-small.png") 0px -16px no-repeat; }
.star-40-s {background: url("../../images/meila/star-small.png") 0px -32px no-repeat; }
.star-35-s {background: url("../../images/meila/star-small.png") 0px -48px no-repeat; }
.star-30-s {background: url("../../images/meila/star-small.png") 0px -64px no-repeat; }
.star-25-s {background: url("../../images/meila/star-small.png") 0px -79px no-repeat; }
.star-20-s {background: url("../../images/meila/star-small.png") 0px -95px no-repeat; }
.star-15-s {background: url("../../images/meila/star-small.png") 0px -111px no-repeat; }
.star-10-s {background: url("../../images/meila/star-small.png") 0px -126px no-repeat; }
.star-0-s {background: url("../../images/meila/star-small.png") 0px -141px no-repeat; }

.android-qrcode, .ios-qrcode {width: 160px; height: 320px;  background: #fff; margin-top: 182px; position: fixed;
    -webkit-box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    -o-box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    -webkit-border-radius:8px;
    -moz-border-radius:12px;
    -o-border-radius:12px;
    border-radius:12px;
}
.android-qrcode img, .ios-qrcode img{width: 140px; height: auto;}
.android-qrcode {left: 100px;}
.ios-qrcode {right: 100px;}
.android-qrcode h3, .ios-qrcode h3 { font-size: 32px; text-align: center; color: #2CC5A3;}
.android-qrcode p, .ios-qrcode p {font-size: 14px; text-align: center; color: #2CC5A3;}
.barcode-img { text-align: center; margin-top: 10px;}
.qrcode-header .dot {text-align: center; margin-top: 10px;}
.qrcode-header .dot img {width: 20px; height: 20px;}
.qrcode-header .hr { border-top: 1px dashed #cccccc; height: 1px; overflow: hidden; margin-top: 24px; margin-bottom: 21px;}