/* CSS Document */
/* 重設
--------------------------------------------------- */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;background: transparent;/*vertical-align: baseline;*/}
ol, ul, li{list-style: none;}

/*以下為針對HTML5,暫時不開放----------------*/  
/* HTML5 display-role reset for older browsers */
/*
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
*/
fieldset,img { border: none; }

/* ======================== 基本 ======================== */
a{ font-size:15px; text-decoration:none;outline:none; /* for Firefox */
 hlbr:expression(this.onFocus=this.blur()); color:#000 /* for IE */;}
a:hover{ font-size:15px; text-decoration:none;color:#000;outline:none; /* for Firefox */hlbr:expression(this.onFocus=this.blur());}
a:focus{outline: none;hlbr:expression(this.onFocus=this.blur());text-decoration:none;}
/* ======================== 新增修改 ======================== */
html{ height: 100%;}
body{
    width:100%;
    height:100%;
    outline: none; /* for Firefox */
    hlbr:expression(this.onFocus=this.blur()); /* for IE */
    line-height:0;
    background: #003c91;
}
img{border:0;}
/* ======================== 故事開始 ======================== */
/* ======================== 範圍 ======================== */
.m1{
    width:100%;
    height:617px;
    margin:0 auto;
    padding-top:45px;
    /*background:#003c91;*/
    background: url('../images/mWM_bg.jpg?123') 50% 0 no-repeat;
    opacity:1;
    z-index:1;
}
.m1 .mm1{ width:320px; height:550px;margin: 0 auto; position:relative;}

/* ======================== Logo ======================== */
.m1 .mm1 .logo1 { 
    width:140px; 
    height:140px; 
    margin: 0px auto; 
    text-align: center; 
    z-index:2;
}
.m1 .mm1 .logo1 img { 
    width:125px; 
    height:125px;
    border-radius: 20px;
}

.m1 .mm1 .ctBox{z-index:555;}

/* ======================== 大標題 ======================== */
.m1 .mm1 .tx1{
    width: 260px;
    height: auto;
    padding-bottom: 0.7rem;
    margin: 0 auto;
    font: bold 17px/20px Verdana, "微軟正黑體";
    color: #4d5a67;
    margin-bottom:10px;
    overflow: hidden;
    text-align: center;
    letter-spacing: -1px;
    border-bottom: 2px solid #bdc5ca;
}
/* ======================== 副標題 ======================== */
.m1 .mm1 .ttx1{ 
    width: 100%;
    height: 160px;
    font: bold 17px/20px Verdana, "微軟正黑體";
    color: #333;
    overflow: hidden;
    text-align: center;
    letter-spacing: 1px;
}
/* ======================== 下載按鈕範圍 ======================== */
.m1 .mm1 .bt1{ width:100%; margin: 0 auto;}

/* ======================== 按鈕(套按鈕) ======================== */

/* ======================== 按前樣式 ======================== */
.m1 .mm1 .bt1 .btn1 a{ width:100%; height:142px; font: 23px/23px "微軟正黑體";color:#fff; display:inline-block; text-align:center; background:#ff8800; border-radius:2px; display:none}

/* ======================== 按後樣式 ======================== */
.m1 .mm1 .bt1 .btn1 a:hover{ background:#ffaa00; display:none}

/* ======================== 按鈕1 ======================== */
.m1 .mm1 .btt1{
    width:260px;
    height:115px;
    /*background-color:#000;*/
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 10px;
    margin: 0 auto;
    margin-bottom:10px;
    /*background: #d1e2f2;*/
    border: 2px solid #efefef;
    box-shadow: 0px 0px 10px #cecece;
    position: relative;
}
.m1 .mm1 .btt1.android{}

/* ======================== IOS ======================== */
.m1 .mm1 .btt1 .icon1{
    width: 272px;
    height: 122px;
    margin-left: auto;
    margin-right: auto;
    padding-top:10px;
    background: url('../images/ios-logo_s.png?123') 71% 4px no-repeat;
}
.m1 .mm1 .btt1 .icon1.android{ background: url('../images/android-logo_s.png?123') 75% 4px no-repeat;}
.m1 .mm1 .btt1 .icon1 img{
    width: 95px;
    height: 95px;
    float: left;
    padding-left:15px;
}
/* ======================== IOS文字 ======================== */
.m1 .mm1 .btt1 .icon1 .ttx2 { 
    width:130px; 
    height:25px; 
    color:#fff; 
    text-align: center; 
    font: bold 16px/30px Verdana, 微軟正黑體; 
    line-height: 100px;
    float: left;
}
/* ======================== ANDROID ======================== */
.m1 .mm1 .btt1 .icon2{ width:45px; height:55px; left: 163px; margin-top: 20px;}

.m1 .copyrightT{ width:100%; text-align:center; margin-top:2px; font:13px/13px "微軟正黑體"; color:#fff; letter-spacing:2px;}
a.downloadBTN{
    position: absolute;
    right: 15px;
    bottom: 9px;
    width: 105px;
    height: 20px;
    text-align:center;
    padding: 0 6px;
    border: transparent;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background-color: #547b8c;
    color: #fff;
    font:bold 13px/20px Verdana, 微軟正黑體;
 }
 a.downloadBTN:hover,
 a.downloadBTN:active{ background:#0e42a8; }

/* ======================== 安卓微信指导 ======================== */
.m2{ 
    background: url('../images/teach.png');
    background-size: cover;
    height: 100vh;
}

@media screen and (min-width: 320px) and (max-width: 359px) {
    .m1{ height:800px;}
}
@media screen and (min-width: 360px) and (max-width: 374px) {
    .m1{ height:800px;}
}
@media screen and (min-width: 375px) and (max-width: 413px) {
    .m1{ height:800px;}
}
@media screen and (min-width: 411px) and (max-width: 413px) {
    .m1{ height:800px;}
}
@media screen and (min-width: 414px) and (max-width: 767px) {
    .m1{ height:800px;}
}
@media screen and (min-width: 768px) and (max-width: 799px) {
    .m1{ height:964px;}
}
@media screen and (min-width: 800px) and (max-width: 1023px) {
    .m1{ height:1220px;}
}
@media screen and (min-width: 1024px) and (max-width: 1920px) {
    .m1{ height:890px;}
}