@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: #69A813;}
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; border-bottom: 1px solid #c7c7c7; background: url(../img/bg2.png) repeat;;}
.story{ margin: 0 auto; width: 960px; padding: 130px 0 0 0; overflow:hidden;}
.story2{ margin: 0 auto; width: 960px; padding: 0;}
.story3{ width: 100%; background:#efefef; padding:20px 0;}
.pg_img{ margin:0 auto 10px auto; width:900px; height:auto;}
.story h5{ font-size:24px; margin:0 0 20px 0; color:#222;}
.story h2{ font-size: 36px; line-height: 40px; color: #69A813; font-weight: bold;}
.story h3{ font-size: 18px; line-height: 30px; color: #FF6600; font-weight: bold;}
.story h4{ font-size:13px; line-height:25px; color:#999; font-weight: normal; margin: 5px 0 10px 0;}
.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 span{ font-size:15px; line-height:25px; float:right;}
.story span a{color:#0066cc; text-decoration: underline;}
.story span a:visited{ color:#0066cc; text-decoration: underline;}
.story span a:hover{ color: #2D96FF; text-decoration: underline;}
.be{ font-size: 13px; line-height: 28px; color: #FF6600; margin: 0 0 20px 0;}
.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: #69A813; font-weight:bold;}
.story2 h3{ font-size:18px; line-height:30px; color: #FF6600; 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 span{ font-size:15px; line-height:25px; float:right;}
.story2 span a{color:#0066cc; text-decoration: underline;}
.story2 span a:visited{ color:#0066cc; text-decoration: underline;}
.story2 span 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%;}

.story4{ width:100%; float:left; margin:10px 0 40px 0;}
.story4 h3{ font-size: 18px; line-height: 30px; color: #FF6600; font-weight: bold;}
.story4 h3 a{ color: #FF6600;}
.story4 h3 a:visited{ color: #FF6600;}
.story4 h3 a:hover{ color: #FFB380;}
.story4 p{ font-size:16px; line-height:32px; color:#454545; margin:0 0 20px 0; font-weight:900;}
.story4 p a{ color:#0066cc; text-decoration:underline;}
.story4 p a:visited{ color:#0066cc; text-decoration:underline;}
.story4 p a:hover{ color: #2D96FF; text-decoration: underline;}
.story4 span a{ line-height:30px; text-decoration: none;}
.story4 span a:hover{ text-decoration: none;}
.s4_pic{ width:30%; height:auto; margin:7px 2% 0 0; float:left;}
.s4_w{ width:68%; float:left;}
.s4_btn { width: 100px; height: 30px; background-color: #FFCC62; float: right; text-align:center; -webkit-border-radius: 50px;
-moz-border-radius: 50px; border-radius: 50px;}
.s4_btn a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; -webkit-border-radius: 50px;
-moz-border-radius: 50px; border-radius: 50px; color:#222;}
.s4_btn a:hover { text-decoration: none; background-color: #FFE0A2; -webkit-border-radius: 50px;
-moz-border-radius: 50px; border-radius: 50px; color:#}

.s_tit{ background-color: #F5EA5C; color:#0066cc; padding:5px 0; float:left; margin:0 10px 20px 0; font-size:15px; font-weight:bold;}
.s_tit a{ color:#0066cc;  padding:5px 20px; -o-transition: all .3s linear; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition:  all .3s linear;}
.s_tit a:hover{ color: #359AFF; background-color: #F0DF11; padding:10px 20px; -o-transition: all .3s linear; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition:  all .3s linear;}

/* Navigation */
.menu { float: left; width: 100%; height: 150px; position: fixed; left: 0; top: 0; z-index: 9999; background: #009933 url(../img/pg_bg.jpg) center center repeat;}
.menu h1 { display:none;}
.menu h2 { display:none;}
.menu_r{ width: 960px; height:150px; margin:0 auto; position: relative;}
.menu_bg{ position: absolute; top: 0; left: 0; width: 100%; height:150px; background:#222; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}
.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: #88C615;}
#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: #88C615;}
.nav_tit{ font-size: 18px; color: #88C615; 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: #88C615; border-bottom-width: medium; border-bottom-style: solid; border-bottom-color: #88C615;}

/* foot */
.foot{ width:960px; margin:0 auto; padding:0 0 20px 0;}
.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;}

.f_logo{ float:left; width:100%; color:#454545; font-size:13px;}
.f_logo span{ float:left; width:13%; height:auto; margin: 0 10px 10px 0;}

/* 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 10px 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;}

/* td */
.icon{ margin:10px 0; float:left; width:100%;}
.sign_td0{ border:1px solid #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin: 10px 20px 20px 0; float:left; border-spacing:5px;}
.sign_td0 p{ color:#222; font-size:15px; line-height:20px; font-weight: bold; padding:5px; margin:0;}
.sign_td0 p.w1{ font-weight:normal;}
.sign_td1{ text-align:center; background-color: #E1E1E1;}
.sign_td2{ text-align:center; background-color: #FDEA9B;}

/* QA */
#qaContent {width: 100%;}
#qaContent ul.accordionPart { margin:0 0 40px 0;}
#qaContent ul.accordionPart li { padding-bottom: 12px; margin-top: 12px;}
.qa_title { background: url(../img/icon_q_a1.png) no-repeat 0px 5px; padding-left: 28px; cursor: pointer;}
.qa_title h2 { color: #1186ec; font-size:16px; line-height:28px; font-weight:900;}
.qa_title2 { background: url(../img/icon_q_a2.png) no-repeat 0px 5px; padding-left: 28px; cursor: pointer;}
.qa_title2 h2 { color: #ff6600; font-size:16px; line-height:28px; font-weight:900;}
.qa_title_on { text-decoration: none; background: #ccc url(../img/icon_q_a1.png) no-repeat 0px 5px;}
.qa_content { margin: 6px 0 0; background: url(../img/icon_q_a.png) no-repeat 0px -18px; padding-left: 28px; color: #454545; font-size:16px; line-height:28px; font-weight:900;}

@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:640px; margin:0 0 20px 0;}
.read{ width:216px; margin:0 10px 20px 10px; height:280px;}

.f_logo span{ width:15%;}
.sign_td0{ margin: 10px 15px 20px 0;}
}

@media screen and (max-width: 751px) {
.read{ width:216px; margin:0 8px 20px 8px; height:280px;}
}

@media screen and (max-width: 641px) {
.story{ padding:20px 0 0 0;}
.story3{ padding:20px 0 0 0;}
.menu{ display:none;}
p{ font-weight: normal;}
.story h2{ font-weight: normal;}
.story h3{ font-weight: normal;}
.story h4{ font-weight: normal;}
.story p{ font-weight: normal;}
.story2 h2{ font-weight: normal;}
.story2 h3{ font-weight: normal;}
.story2 h4{ 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:20px; 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;}
.read h2{ font-weight: normal;}
.w4{ font-weight: normal; margin-bottom:5px;}
.w6{ font-weight: normal;}
.nav_tit{ font-weight:normal;}

.s_tit{padding:5px 10px; margin:0 10px 20px 0; font-weight:normal;}
.s_tit a{ padding:0;}
.s_tit a:hover{ padding:0;}
.story h5{ font-weight: normal;}

.qa_title h2 { font-weight: normal;}
.qa_title2 h2 { font-weight: normal;}
.qa_content{ font-weight: normal;}

.story4 p{ margin:0 0 10px 0;}
}

@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:35px;}
.story2 h2{ font-size:30px; line-height:35px;}
.slide3{height:900px;}
.read{ width:265px; margin:0 10px 0 10px; height:300px;}
.read h2{ font-size:16px;  line-height:25px;}
}

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

@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%;}
.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%;}
.story h2{ font-size: 24px; line-height: 30px;}
.story h3{ font-size:16px; line-height:25px;}
.story h4{ line-height:20px;}
.story p{ font-size:15px; line-height:25px;}
.story2 h2{ font-size: 24px; line-height: 30px;}
.story2 h3{ font-size:16px; line-height:25px;}
.story2 h4{ line-height:20px;}
.story2 p{ font-size:15px; line-height:25px;}

.s_tit{padding:5px 6px;}
.s4_pic{ width:90%; margin:0 5%;}
.s4_w{ width:100%; padding:5px 0 0 0;}
.s4_btn { width: 100px; height: 30px; background-color: #FFCC62; float: right; text-align:center; line-height:30px; -webkit-border-radius: 50px;
-moz-border-radius: 50px; border-radius: 50px;}

.story span{ float:left;}

.slide3{height:1850px;}
.read{ width:90%; margin:0 5%; padding:0; height:365px;}
.read h2{ font-size:16px;  line-height:25px;}
}

@media screen and (max-width: 361px) {
.read{ width:100%; margin:0; padding:0; height:330px;}
.slide3{height:1700px;}
}

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