@charset "big5";
@import "https://fonts.googleapis.com/earlyaccess/notosanstc.css";

body {
    box-sizing: border-box;
    font-family: "Noto Sans TC",微軟正黑體,Arial,Helvetica,heiti tc,SimHei,Microsoft JhengHei,serif;
    margin: 0;
    padding: 0;
    text-align: left;
	background-color: #fdc5bf;
}
table {border: 0 none;border-collapse: collapse;margin: 0;padding: 0;}  
img {border: 0 none;}
h1, h2, h3, h4, h5, h6, ul, ol, li, p, div, blockquote, cite, em, tt, dfn { font-family:"Noto Sans TC",微軟正黑體,Arial,Helvetica,heiti tc,SimHei,Microsoft JhengHei,serif; font-weight: normal;margin: 0;padding: 0;}
dfn, strong, em {font-style: normal;}
li {list-style: outside none none;}
section a { cursor: pointer; outline: medium none; font-family: "Noto Sans TC","微軟正黑體",Arial,Helvetica,heiti tc,SimHei,Microsoft JhengHei,serif; display: block; color: black;}
p{ text-align: justify;font-size: 1.6rem; line-height: 2rem;}

section{ width:100%; overflow: hidden; position: relative; margin:0 auto;}
.centerBox{ width:100%; max-width:1200px; overflow: hidden; position: relative; margin:0 auto; }
.fb-like{position:absolute; right: 20px; top:60px; z-index:9999;}
.mbOnly{ display:none;} .mbHide{ display:inline-block;}
h2{ width: 100%; text-align: center;}

/*TOP*/
.top{ position: relative; width: 100%; height: 0; padding-bottom: 52.18%; background: url(../images/top_bg.jpg) center top no-repeat; background-size: cover;}
.top h1{ position: absolute; width: 34.94vw; height: 19.58vw; top: 7.291vw; left: 52.604vw;}
.top h1 img { width:100%;}
.snsBox{ position: absolute; right: 18.75vw; top: 10px; text-align: right;}
.snsBox a { display: inline-block; margin: 0 5px;}
/*VIDEO*/
.video{ background-color: #212224; padding: 15px 0 70px;}
.vdFrame{ width: 90%; max-width: 1440px; position: relative; margin: 0 auto;}
.video-container { position: relative; width: 100%; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin: 0 auto;}
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0;left: 0; width: 100%; height: 100%;}
/*question*/
.question{ padding: 5vw 0; background: url(../images/bg_fish.png) center 160px no-repeat;}
.question article{ width: 80%; margin: 0 auto; text-align: center;}
.question article h3{ margin-bottom: 40px;}
.question article p{ font-size: 2.2rem; line-height: 3rem; text-align: center; font-weight: 500;margin-bottom: 40px;}
a.btn_start{ color: white; font-weight: 500; border: 3px solid black; background-color: #a12a92; font-size: 55px; border-radius: 30px; display: inline-block; overflow: hidden; -webkit-box-shadow: 5px 5px 0px 0px #000000; box-shadow: 5px 5px 0px 0px #000000; padding: 22px 30px;}
a.btn_start:hover{ transform: translateY(5px);}
/*play*/
.play{ background-color: #211a1b; padding: 80px 0;}
.mark{ position: relative; float: left; margin-left: 2vw;}
.masks{ position: absolute; width: 258px; height: 210px; left: 170px; top: 165px; }
.masks.white{background: url(../images/mask-w.png) left top no-repeat;}
.masks li{ position: absolute; top: 0; width: 0; display: none;}
.select{ display: block; float: right; width: 50%; position: absolute; right: 2vw; top: 7.3vw;}
.color{ text-align: center; position: relative;}
.color li{ width: 125px; height: 125px; border-radius: 50%; display: inline-block; overflow: hidden; cursor: pointer; margin: 0 6px 35px;}
.color li:hover{ transform: scale(.9);}
.color li:first-child{background-color: var(--red);} .color li:nth-child(2){background-color: var(--orange);} .color li:nth-child(3){background-color: var(--yellow);} .color li:nth-child(4){background-color: var(--green);} .color li:nth-child(5){background-color: var(--blue);} .color li:nth-child(6){background-color: var(--purple);} .color li:nth-child(7){background-color: var(--grey);}
.resultBtn{ position: relative; text-align: center; margin: 20px auto;}
.resultBtn li{ position: relative;  display: none;}
.resultBtn li a{ color: white; font-weight: 500; border: 3px solid white; font-size: 55px; border-radius: 30px; display: inline-block; overflow: hidden; -webkit-box-shadow: 5px 5px 0px 0px #FFFFFF; box-shadow: 5px 5px 0px 0px #FFFFFF; padding: 22px 30px;}
.resultBtn li:first-child a{background-color: var(--red);} .resultBtn li:nth-child(2) a{background-color: var(--orange);} .resultBtn li:nth-child(3) a{background-color: var(--yellow); color: black;} .resultBtn li:nth-child(4) a{background-color: var(--green);} .resultBtn li:nth-child(5) a{background-color: var(--blue);} .resultBtn li:nth-child(6) a{background-color: var(--purple);} .resultBtn li:nth-child(7) a{background-color: var(--grey);}
.inline{ width: 100%; max-width: 960px; border: 5px solid black; background-color: white; padding-top: 35px; padding-bottom: 110px; overflow: hidden; border-radius: 30px; position: relative;}
.markPic{ position: relative; float: left; margin-left: 3.5%; width: 32%;}
.markPic img{ width: 100%; max-width: 324px;}
.inline article{ position: relative; float: right; margin-right: 3.5%; width: 57%;}
.inline article h4{ font-size: 50px; font-weight: 500; margin-top: 0px; }
.inline article p{ font-size: 30px; line-height: 40px; margin-top: 15px; margin-bottom: 20px;}
.inline article a{ display: inline-block; margin-bottom: 35px;}
.btn2{ position: absolute; width: 100%; bottom: 0; left: 0; padding: 25px 0; text-align: center; background-color: #fdc5bf; height: 120px;}
.btn2 a{ display: inline-block; margin: 0 10px; cursor: pointer;}
.inline a:hover{ transform: translateY(3px);}
.inline.red{ border-color: var(--red);} .inline.red article h4{ color: var(--red);}
.inline.orange{ border-color: var(--orange);} .inline.orange article h4{ color: var(--orange);}
.inline.yellow{ border-color: var(--yellow);} .inline.yellow article h4{ color: var(--yellow);}
.inline.green{ border-color: var(--green);} .inline.green article h4{ color: var(--green);}
.inline.blue{ border-color: var(--blue);} .inline.blue article h4{ color: var(--blue);}
.inline.purple{ border-color: var(--purple);} .inline.purple article h4{ color: var(--purple);}
.inline.grey{ border-color: var(--grey);} .inline.grey article h4{ color: var(--grey);}


#copyright{font-weight: normal; color:#fdc5bf; display: block; background-color: #211a1b; font-family: Verdana,Geneva,sans-serif; font-size: 20px; height: 50px; line-height: 50px; overflow: hidden; text-align: center; width: 100%; position: relative;}
.scrollup { display: none; position: fixed; right: 35px; bottom: 35px; border-radius: 50%; width: 55px; height: 55px; color: white; border: 1px solid white; font-size: 20px; line-height: 50px; text-align: center;}
.scrollup:hover{}
@media screen and (max-width: 768px) {
body {
	box-sizing: border-box;
	margin: 0;
	overflow-x: hidden;
	padding: 0;
	text-align: left;
}
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 {
	box-sizing: border-box;
}
#header{ overflow:hidden;}
p{ font-size: 2rem; line-height: 2.4rem; }
a:hover{ margin-top:0px; transform: scale(1);}
.mbOnly{ display:block;} .mbHide{ display:none;}

section{ width: 100%; max-width:768px;}
.centerBox{width: 100%; max-width:768px;}
/*TOP*/
.top{ width: 100%; height: 0; padding-bottom: 121.74%; background: url(../images/bg_topM.png) center top no-repeat; background-size: cover;}
.top h1{ display: none;}
.snsBox{ position: absolute; right: 2vw; top: 20px; text-align: right;}
.snsBox a { margin: 0 3px;}
/*question*/
.question{ padding:65px 0;}
.question article{ width: 100%;}
.question article p{font-size: 2.4rem; line-height: 3.3rem; margin-bottom: 60px;}
a.btn_start{font-size: 65px; padding: 25px 30px;}
.mark{ text-align: center; width: 100%; margin: 0 auto; float: none; position: relative;}
.mark img{ max-width: 550px;}
.masks{ left: 241px; top: 132px;}
.masks.white { background-size: 240px auto;}
.masks img{ max-width: 240px;}
.select{ width: 90%; margin: 50px auto 20px; float: none; position: relative; right: auto; top: auto;}
.inline{ width: 90%; margin: 0 auto; padding-bottom: 0;}
.markPic{ width: 80%; float: none; text-align: center; margin: 0 auto;}
.inline article{ width: 85%; float: none; margin: 20px auto; text-align: center;}
.inline article h4{ text-align: center; font-size: 53px;}
.inline article p{ font-size: 35px; line-height: 46px; margin-top: 20px; margin-bottom: 25px;}
.btn2{ height: auto; position: relative;}
.btn2 a{ margin: 5px 30px;}




#copyright { line-height:20px; height:auto; font-size:11px; margin:0 auto; padding: 15px 0;}
.scrollup {bottom: 25px;display: none;opacity: 1; position: fixed; right: 5px; text-align:center; z-index: 999;}
}