@charset "utf-8";
@import url("../../assets/reset.css");
body{ background:#efefef;}
body, html{ height:100%;}
#sb-site{ height:100%;}
.full-width, img .full-width { width:100% !important; height:auto !important; box-sizing:border-box !important; -moz-box-sizing:border-box !important;}
#back-top {position: fixed;bottom: 30px;right: 20px;}
#back-top a {width: 40px;display: block;text-align: center;font: 11px/100% Arial, Helvetica, sans-serif;text-transform: uppercase;text-decoration: none;color: #bbb;-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}
#back-top a:hover {color: #000;}
#back-top span {width: 40px;height: 40px;display: block;margin-bottom: 7px;background: #ddd url(https://topic.cheers.com.tw/yleader/img/up-arrow.png) no-repeat center center;-webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px;-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}
#back-top a:hover span {background-color: #1d2089;}
h2{ line-height: 25px;}
p{ font-size:15px; color:#454545; line-height:30px; margin:0 auto; font-weight:900;}
.slide1{ width: 100%; height: auto; margin: 0; padding: 40px 0 30px 0; background: #efefef; border-bottom:1px solid #c7c7c7;}
.slide2{width:100%; height: auto; margin: 0; padding: 40px 0 30px 0; background: url(../img/confectionary.png); border-bottom:1px solid #c7c7c7;}
.story{ margin: 0 auto; width: 960px; padding: 130px 0 0 0;}
.story2{ margin: 0 auto; width: 960px; padding: 20px 0 0 0;}
.story3{ width: 100%; background:#efefef; padding:20px 0;}
.pg_img{ margin:0 auto 10px auto; width:900px; height:auto;}
.story h2{ font-size:36px; line-height:40px; color:#e5007f; font-weight:bold;}
.story h3{ font-size:18px; line-height:30px; color:#1d2089; font-weight:bold;}
.story h4{ font-size:13px; line-height:25px; color:#999; font-weight: normal; margin: 5px 0 10px 0;}
.story h5{ font-size:15px; line-height:25px; color:#1d2089; font-weight: 900; margin: 5px 0 10px 0;}
.story h6{ font-size:35px; line-height:30px; font-weight: 900; margin: 20px 0 10px 0; color:#e5007f;}
.story h6 span{ font-size:25px; line-height:30px; color:#e5007f; font-weight: 900;}
.story p{ font-size:16px; line-height:32px; color:#454545; margin:0 0 20px 0; font-weight:900;}
.story p a{ color:#0066cc; text-decoration:underline;}
.story p a:visited{ color:#0066cc; text-decoration:underline;}
.story p a:hover{ color: #2D96FF; text-decoration: underline;}
.story .pic{ float:right; width:50%; height:auto; margin:0 0 10px 10px; z-index:99;}
.story .YT{ height:250px; width:100%;}
.story2 h2{ font-size:36px; line-height:40px; color:#e5007f; font-weight:bold;}
.story2 h3{ font-size:18px; line-height:30px; color:#1d2089; font-weight:bold;}
.story2 h4{ font-size:13px; line-height:25px; color:#999; font-weight: normal; margin: 5px 0 10px 0;}
.story2 p{ font-size:16px; line-height:32px; color:#454545; margin:0 0 20px 0; font-weight:900;}
.story2 p a{ color:#0066cc; text-decoration:underline;}
.story2 p a:visited{ color:#0066cc; text-decoration:underline;}
.story2 p a:hover{ color: #2D96FF; text-decoration: underline;}
.story2 .pic{ float:right; width:50%; height:auto; margin:0 0 10px 10px; z-index:99;}
.story2 .YT{ height:250px; width:100%;}

/* Navigation */
.menu { float: left; width: 100%; height: 150px; position: fixed; left: 0; top: 0; z-index: 9999; background: #192d6a url(../img/pg_bg.png) left top repeat;}
.menu h1{ display:none;}
.menu_r{ width: 960px; height:150px; margin:0 auto; position: relative;}
.menu_bg{ position: absolute; top: 0; left: 0; width: 960px; height:150px; background: url(../img/pg_bg2.png) repeat; filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8;}
.logo { position: absolute; top: 20px; left: 20px; height: auto; width: 100px; z-index: 99;}
.pg_cover{ position: absolute; top: 16px; left: 125px; z-index: 99; width: 128px; height: auto;}
.share{ position: absolute; top: 25px; left: 270px; z-index: 99; width: 100px; }
.share2{ display:none;}
.home a{ position: absolute; top: 22px; left: 400px; width: 100px; height: 25px; font-size: 15px; color: #FFF; background-position: left center; line-height: 30px; font-weight: bold;}
.home a:visited{ color: #FFF;}
.home a:hover{ color: #f8bf30;}
#nav { position: absolute; float: left; top: 85px; left: 260px; width: 700px;}
.navigation{ width:100%; float: left; margin: 0;}
.navigation li{float: left; list-style-type: none; padding: 0 10px; height: 39px;}
.navigation li p { font-weight: bold; color: #FFF; font-size: 13px; line-height:20px;}
.navigation li p:hover { color: #f8bf30;}
.nav_tit{ font-size: 18px; color: #f8bf30; line-height:23px; font-weight:bold;}
.navigation li a:link{ display: block; height: 39px; font-weight: bold; color: #FFF; font-size: 13px; text-decoration: none; cursor: pointer; padding: 0 8px 5px 8px;}
.navigation li a:visited{ color: #FFF;}
.navigation li a:hover{ height: 39px; color: #f8bf30; border-bottom-width: medium; border-bottom-style: solid; border-bottom-color: #f8bf30;}

/* foot */
.foot{ width:960px; margin:0 auto;}
.foot_td{ float:left; width:100%;}
.foot_logo a{ float:left; background-image: url(img/logo.png); height: 39px; width: 90px; float:left; margin:0 20px 20px 0; *margin:25px 20px 20px 0;}
.foot_w{color:#666; font-size:13px; line-height:20px;}
.m_foot_w{ display:none;}

/* read */
.slide3{width:100%; height: 350px; margin:0; padding:20px 0 0 0;}
.s_3_td{ width:100%; float:left;}
.read h2{ font-size:16px; color:#e5007f; width:100%; float:left; font-weight: bold; line-height:25px;}
.read p{ font-size:13px; line-height:26px;}
.w6{ font-size:20px; color:#7b7b7b; line-height:30px; float:left; width:100%; font-weight: bold; margin:0 0 5px 0;}
.w7{ font-size:13px; color:#454545; line-height:25px; float:left; width:100%;}
.read{ width:170px; float:left; margin:0 18px 0 0; *margin:10px 10px 0 11px;}
.read a{ display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; filter:alpha(opacity=100); -moz-opacity:1; opacity:1; -o-transition: opacity .20s linear; -webkit-transition: opacity .20s linear; -moz-transition: opacity .20s linear; transition:  opacity .20s linear;}
.read a:visited { text-decoration: none;}
.read a:hover { text-decoration: none;	filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; -o-transition: opacity .20s linear; -webkit-transition: opacity .20s linear; -moz-transition: opacity .20s linear; transition:  opacity .20s linear;}
.read img{ float:left; margin:0 0 5px 0;}

.qr{ display: block; float:left; margin:0 40px 0 0; width:100%;}
.qr2{padding: 60px 0 400px 0; width:100%; margin:0 0 20px 0;}
.qr3{ display:none;}

@media screen and (max-width: 1025px) {
.read{ width:170px; float:left; margin:0 11px 30px 11px;}
}

@media screen and (max-width: 800px) {
.menu { height: 130px;}
.menu_r{ width: 100%; margin:0; height:130px}
.story{ width: 95%; margin:0 2.5%;}
.story2{ width: 95%; margin:0 2.5%;}
.menu_bg{ width: 100%; height:130px;}
.logo { width: 80px; left:20px}
.pg_cover{ width: 100px; left:107px; top:18px;}
.share{ left: 220px;}
.home a{ left: 360px;}
#nav { top: 83px; left: 210px; width: 590px;}
.navigation{ float: left;}
.navigation li{padding: 0 6px;}
.navigation li p { display:none;}
.navigation li a:hover{ height: 20px;}
.story h3{ line-height:28px; margin:0 0 5px 0;}
.story2 h3{ line-height:28px; margin:0 0 5px 0;}
.pg_img{ width:95%; height:auto; margin:0 auto 5px auto;}
.story .YT{ height:200px;}
.story2 .YT{ height:200px;}
.foot{ width:95%; padding:0 2.5%;}
.s_3_td{ width:100%; margin:0;}
.w7{ line-height:23px;}
.slide3{height:600px;}
.read{ width:216px; margin:0 10px 20px 10px; height:260px;}

.qr{margin:0 12px 0 0;}
.qr2{padding: 20px 0 400px 0;}
}

@media screen and (max-width: 751px) {
.read{ width:216px; margin:0 8px 20px 8px; height:260px;}
.qr{ display: none;}
.qr2{ display: none;}
.qr3{ display:block;}
}

@media screen and (max-width: 641px) {
.story{ padding:20px 0 0 0;}
.story2{ padding:0;}
.story3{ padding:20px 0 0 0;}
.menu{ display:none;}
p{ font-weight: normal;}
.story h2{ font-weight: normal;}
.story h5{ font-weight: normal;}
.story h6{ font-weight:normal; font-size:25px; line-height:36px; }
.story h6 span{ font-weight:normal;}
.story p{ font-weight: normal;}
.story2 h2{ font-weight: normal;}
.story2 p{ font-weight: normal;}
.foot_td{ display:none;}
.foot p{ line-height:none;}
.m_foot_w{ display:block; color:#666; font-size:13px; line-height:18px; text-align:center; width:100%; padding:0 0 30px 0; margin:0;}
.share{ display:none;}
.share2{ display:block; width: 100%; height:30px;}
.read{ width:180px; margin:0 5px 20px 10px;}
.w4{ font-weight: normal; margin-bottom:5px;}
.w6{ font-weight: normal;}
.nav_tit{ font-weight:normal;}

}

@media screen and (max-width: 601px) {
.slide1{ padding: 40px 0 20px 0;}
.slide2{padding:40px 0 20px 0;}
.story h2{ font-size:30px; line-height:36px;}
.slide3{height:850px;}
.read{ width:265px; margin:0 10px 0 10px; height:260px;}
}

@media screen and (max-width: 568px) {
.read{ width:240px; margin:0 0 0 20px; height:260px;}
}

@media screen and (max-width: 481px) {
.slide1{padding:40px 0 20px 0;}
.slide2{padding:40px 0 20px 0;}
.story{ width: 90%; margin:0 5%; padding:20px 0 0 0;}
.story2{ width: 90%; margin:0 5%; padding:20px 0 0 0;}
.pg_img{ width:100%; margin:0 0 5px 0;}
.foot{ width:90%; padding:0 5%;}
.story .pic{ float:left; width:100%; margin:0 0 20px 0;}
.story .YT{ width:100%;}
.story2 .pic{ float:left; width:100%; margin:0 0 20px 0;}
.story2 .YT{ width:100%;}
.read{ width:100%; margin:0; padding:0; height:320px;}
.slide3{height:1650px;}
.story h3{ line-height:25px;}
.story h4{ line-height:20px;}
.story2 h3{ line-height:25px;}
.story2 h4{ line-height:20px;}

}

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

}

@media screen and (max-width: 321px) {
.read{ width:100%; margin:0; padding:0; height:250px;}
.slide3{height:1350px;}
}