/* ----- reset ----- */
body,dl,dt,dd,ul,ol,li,th,td,form,input,textarea,p {margin:0; padding:0;}
img {display:block; border:0;}
li {list-style:none}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
article,aside,canvas,figure,figure img,figcaption,footer,header,hgroup,menu,nav,section,audio,video {display:block; margin:0; padding:0;}

/* ----- common ----- */
html {overflow-y:scroll;}
body {text-align:center; font-size:16px; line-height:1.5; 
font-family:"source-han-sans-traditional","微軟正黑體", "Microsoft JhengHei", sans-serif; color:#333;
}
h1,h2,h3,h4,h5,h6 {margin:0;}
p {text-align:justify; text-justify:distribute;}
table {border-collapse:collapse; border-spacing:0; border:none;}
th {border:none;}
td {border:none;}
a {outline:none; text-decoration:none;}
input {vertical-align:middle;}

/* ----- Typekit ----- */
/* 
"source-han-sans-traditional" 400,700
"prenton" 400,700 / normal & italic

font-family:"source-han-sans-traditional","微軟正黑體", "Microsoft JhengHei", sans-serif;
font-family:"prenton","微軟正黑體", "Microsoft JhengHei", sans-serif;
*/

/* ----- main wrapper ----- */
.outerwpr {min-height:100vh; position:relative;
background-color:#ee294a;    
background-image:url("../images/texture.png"); background-size:1000px auto;
/* background-attachment:fixed; */
}
/* .outerwpr:before {content:""; display:block; width:100%; height:100vh;
position:absolute; left:0; top:0;    
background-image:url("../images/bg-roofcover.png"); background-repeat:no-repeat;
background-size:100% auto; background-position:center top;
} */

.centerwpr {max-width:970px; padding:0 15px; margin:0 auto;
position:relative;
}

section {position:relative;}

/* ----- opening background ----- */
.openingbg {width:100%; height:100vh; position:fixed; left:0; top:0;
background-image:url("../images/opening-band.png"); background-repeat:no-repeat;
background-size:cover; background-position:center center;
}
.openingbg:before {content:""; display:block; width:100%; height:100vh;
position:absolute; left:0; top:0;    
background-image:url("../images/bg-roofcover.png"); background-repeat:no-repeat;
background-size:100% auto; background-position:center top;
}
.openingbg:after {content:""; display:block; width:100%; height:100vh;
position:absolute; left:0; top:0;    
background-image:url("../images/opening-man.png"); background-repeat:no-repeat;
background-size:cover; background-position:center center;
}


/* -------------------- top nav -------------------- */
.nav {position:fixed; left:0; top:0; width:100%; z-index:9998;}

.nav--btn {display:block; width:42px; height:42px; cursor:pointer;
position:absolute; 
font-size:0; line-height:0;
border-radius:50%; 
/* box-shadow:0 1px 4px rgba(0,0,0,0.1); */
background-image:url("../images/navbtn.png"); background-size:auto 100%;
background-repeat:no-repeat;
}
.nav--btn.mirrormedia {left:10px; top:10px;
background-color:#2d4262; background-position:0 0px;
}

/* ----- top nav: share button ----- */
#shareBtn {position:absolute; left:10px; top:62px;}

.nav--btn.share {left:0; top:0; z-index:100;
background-color:#2d4262; background-position:-58px 0;
}

.nav--btn.social {
background-image:url("../images/btn-social.png"); 
background-size:100% auto;
top:0; visibility:hidden; pointer-events:none;
transition-duration:250ms; transition-property:top,visibility;
}
.social.facebook {
background-color:#3b5998; background-position:0 0px;
}
.social.line {
background-color:#00b900; background-position:0 -67px;
}
.social.gplus {
background-color:#df4f3f; background-position:0 -134px;
}

.expand .nav--btn.social {visibility:visible; pointer-events:auto;}
.expand .social.facebook {top:52px;}
.expand .social.line {top:104px;}
.expand .social.gplus {top:156px;}

/* -------------------- roof button style -------------------- */
.roofbtn {width:300px; height:70px; margin:0 12px;
display:flex; justify-content:center; align-items:center;    
position:relative; flex-shrink:0;
cursor:pointer; line-height:1.3; color:#2d4262; font-size:20px;
background-color:#dcdcdc; border-radius:20px;
}
.roofbtn .text {padding:0 25px;}

.roofbtn:hover {background-color:#ffd64d;}
.roofbtn:active {background-color:#ffd64d;}

.roofbtn:before,
.roofbtn:after {
content:""; display:block; width:0; height:0;
position:absolute; top:50%; margin-top:-24px;
border-style:solid;
}

.roofbtn:before {
left:-13px;     
border-width:24px 15px 24px 0;
border-color:transparent #dcdcdc transparent transparent;
}
.roofbtn:after {
right:-13px;    
border-width:24px 0 24px 15px;
border-color:transparent transparent transparent #dcdcdc;
}

.roofbtn:hover:before {border-color:transparent #ffd64d transparent transparent;}
.roofbtn:hover:after {border-color:transparent transparent transparent #ffd64d;}

.roofbtn:active:before {border-color:transparent #ffd64d transparent transparent;}
.roofbtn:active:after {border-color:transparent transparent transparent #ffd64d;}

/* ----- roof button: thin ----- */
.roofbtn.thin {height:60px; border-radius:16px;}
.roofbtn.thin:before {left:-11px; margin-top:-20px; border-width:20px 12px 20px 0;}
.roofbtn.thin:after {right:-11px; margin-top:-20px; border-width:20px 0 20px 12px;}


/* ---------- 裝飾線標題 h1 ----------*/
.main-title {position:relative; display:inline-block;
margin-bottom:40px;    
}

/* .opening .main-title {margin-top:-50px;} */
.newswpr .main-title {margin:160px auto 50px auto; z-index:200;}

.main-title h1 {line-height:1; letter-spacing:2px;}
.main-title h1.eng {margin-bottom:4px;
font-size:94px; font-weight:700; color:#fff;
font-family:"prenton","微軟正黑體", "Microsoft JhengHei", sans-serif;
}
.main-title h1.eng .cht {font-size:74px;
font-family:"source-han-sans-traditional","微軟正黑體", "Microsoft JhengHei", sans-serif; 
position:relative; top:-3px;
}

.main-title h1.cht {margin-bottom:20px;
font-size:74px; font-weight:700; color:#fff;
}


/* ---------- 裝飾線標題 h2 ----------*/
h2.deco {margin-bottom:30px;
font-size:40px; color:#fff; font-weight:700; line-height:1.3;
border-top:4px solid #fff; letter-spacing:2px;
}
.deco--line {display:flex; justify-content:space-between; align-items:center;
width:100%; height:33px; position:relative; top:-10px;
}
.deco--text {display:block; padding:5px 10px;}

.deco--pin {width:62px; height:33px;
background-image:url("../images/line-deco.png"); background-repeat:no-repeat;
background-size:62px auto; background-position:0 0;
}

.deco--line:before,
.deco--line:after {content:""; display:block; width:calc(50% - 38px);
height:4px; background-color:#fff;
}

/* ---------- 裝飾線標題 h3 ----------*/
h3.deco {height:33px; margin-bottom:40px;
display:flex; align-items:center;    
font-size:32px; color:#fff; font-weight:700; 
font-style:italic;
}
h3.deco:before,
h3.deco:after {content:""; display:block; width:43px; height:33px;
background-image:url("../images/line-deco.png"); background-repeat:no-repeat;
background-size:62px auto;
position:relative; top:1px; flex-shrink:0;
}
h3.deco:before {margin-right:10px; background-position:0 -67px;}
h3.deco:after {margin-left:14px; background-position:right -67px;}

h3.deco.white:before {background-position:0 0;}
h3.deco.white:after {background-position:right 0;}

/* -------------------- Link -------------------- */
.linkwpr {position:fixed; right:0; top:20px; z-index:9998;}

.topLink {height:44px;
background-color:#2d4262; border-radius:22px 0 0 22px;
display:flex; align-items:center;
position:absolute; top:0; right:-10px;
transition-duration:300ms; transition-property:right;
box-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.topLink:hover {right:0;}
.topLink:before {content:""; display:block;
background-repeat:no-repeat;
background-size:100% auto;
flex-shrink:0; position:relative;
margin-left:18px; margin-right:9px;
}
.topLink .text {flex-shrink:0; position:relative;
font-size:22px; color:#ffd64d; font-style:italic; letter-spacing:1px;
}

.topLink.news {width:190px;}
.topLink.news:before {width:40px; height:33px;
background-image:url("../images/icon-horn.png");
top:-1px;
}

.topLink.quiz {width:260px;}
.topLink.quiz .text {font-size:20px; letter-spacing:0; top:-1px;}
.topLink.quiz:before {width:32px; height:28px;
background-image:url("../images/icon-heart.png");
}




.modlogo {display:block; width:180px; height:60px;
position:fixed; right:0; top:80px;
background-image:url("../images/icon-mod.png"); background-repeat:no-repeat;
background-size:166px auto; background-position:10px 6px;
flex-shrink:0;
}

.hamilogo {display:block; width:180px; height:72px;
position:fixed; right:0; top:154px;
background-image:url("../images/icon-hami.png"); background-repeat:no-repeat;
background-size:150px auto; background-position:15px 2px;
flex-shrink:0;
}
.hamilogo:after {content:"場場直播"; display:block;
color:#ffe338; font-size:15px; font-weight:700;
position:absolute; right:16px; bottom:-20px;
}


/* -------------------- home -------------------- */
.opening {height:100vh; display:flex; justify-content:center; align-items:center;
flex-direction:column; box-sizing:border-box;
}

/* .opening--title {width:466px; height:320px; margin-bottom:70px;
background-image:url("../images/opening-title.png"); background-repeat:no-repeat;
} */

.start-quiz {background-color:#ffd64d; margin-bottom:15px;
font-size:26px; font-weight:700;
}
.start-quiz:before {border-color:transparent #ffd64d transparent transparent;}
.start-quiz:after {border-color:transparent transparent transparent #ffd64d;}

.start-quiz:hover {background-color:#ffe338;}
.start-quiz:hover:before {border-color:transparent #ffe338 transparent transparent;}
.start-quiz:hover:after {border-color:transparent transparent transparent #ffe338;}

.start-quiz:active {background-color:#ffd64d;}
.start-quiz:active:before {border-color:transparent #ffd64d transparent transparent;}
.start-quiz:active:after {border-color:transparent transparent transparent #ffd64d;}

/* -------------------- Hami Video 與廣告 -------------------- */
.hamivideo {width:300px; height:136px; border-radius:20px;
overflow:hidden; margin:0 auto 40px auto; cursor:pointer;
display:flex; justify-content:center; align-items:center;
background-color:#597cb1;
}
.hamivideo:hover {background-color:#6286b9;}
.hamivideo:after {content:""; display:block;
width:162px; height:80px;    
background-image:url("../images/icon-hami.png"); background-repeat:no-repeat;
background-size:100% auto; background-position:0 3px;
position:relative; top:-2px;
}
.hamivideo p {margin-right:26px;
color:#2d4262; font-size:26px; font-style:italic;
font-weight:700; line-height:1.2; letter-spacing:2px;
}

.advDesktop.portrait {width:300px; height:600px;}
.advDesktop.landscape {width:970px; height:250px;}

.advMobile {width:300px; height:250px; display:none;
margin:0 auto;
}


/* -------------------- RWD -------------------- */
@media screen and (max-width: 990px) {

    .outerwpr {background-size:800px auto;}
    
    .opening {height:auto; min-height:100vh; padding-top:20px;}
    .opening .main-title {margin-bottom:0;}

    .main-title h1.eng {font-size:64px;}
    .main-title h1.eng .cht {font-size:50px;}
    .main-title h1.cht {font-size:50px;}

    .opening h2.deco {margin-bottom:0;}

    h2.deco {font-size:31px;}
    h3.deco {justify-content:center;}
    
    .logowpr {position:relative; margin-bottom:50px;
        display:flex; align-items:flex-end;
    }

    .modlogo {position:relative; right:auto; top:auto;
        width:155px; height:74px; margin-right:10px;
        background-size:100% auto; background-position:0 bottom;
    }
    .hamilogo {position:relative; right:auto; top:auto;
        width:155px; height:74px;
        background-size:100% auto; background-position:0 bottom;
    }

    .roofbtn {width:266px; max-width:266px;}

    .hamivideo {width:100%; max-width:300px;}

    .advDesktop {display:none;}
    .advMobile {display:block;}

    /* ----- top link ----- */
    .topLink {height:36px;}
    .topLink:before {transform:scale(0.8); margin-left:10px; margin-right:5px;}

    .topLink.news {width:155px;}
    .topLink.quiz {width:200px; height:32px;}
    /* .topLink.quiz {right:-182px;} */
    .topLink.quiz:hover {right:0;}

    .topLink .text {font-size:18px;}
    .topLink.quiz .text {font-size:16px;}

    .topLink:before {transform:scale(0.65); margin-left:5px; margin-right:-2px;}

    /* ----- roof button ----- */
    .roofbtn {height:60px; border-radius:16px;}
    .roofbtn:before {left:-11px; margin-top:-20px; border-width:20px 12px 20px 0;}
    .roofbtn:after {right:-11px; margin-top:-20px; border-width:20px 0 20px 12px;}

}

@media screen and (max-width: 350px) {

    .main-title h1.eng {font-size:58px;}
    .main-title h1.eng .cht {font-size:45px; top:-2px;}
    .main-title h1.cht {font-size:45px;}

    h2.deco {font-size:28px;}

}