@charset "utf-8";
@import url("animate.css");
/***全部的字體設定***/
body { font-size:15px;}
.footer {line-height:1.4;}
.wrapper .block {font-size: 40px;}
.wrapper .block .content { font-size:17px; line-height:25px;}
.wrapper .content strong { font-size:30px;}
.kv_wording {font-size:16px; line-height:1.75;}


/**內頁共用**/
.header.page .menu {font-size:17px;}
.kv_page .why, .kv_page .where, .kv_page .when {font-size: 21px;}
.kv_page .information {line-height:1.3;}
.kv_page .information strong { font-size:41px;}
.wrapper_pg { line-height:1.5;}
.wrapper_pg .wording { font-size:17px;}
h1 { font-size:34px; }
h2 { font-size:29px; font-weight:bold; }
h3 { font-size:21px; font-weight:bold; }
.ampm tr th, .ampm tr td { line-height:1.3;}
.checkbtn, .btn a {font-size: 19px;line-height: 1;}
.sponsor_note { font-size:67%; opacity:0.6; margin-right:2px;}

/*TKS*/
.notice {font-size:90%;}

/*QA*/

.box_q { font-size:19px;}

.box_a, .turnbox .box_normal {font-size:16px; line-height:1.5;}
.box_a .q { font-size:18px; line-height:1.3;}
.box_a strong { font-weight:bold;}
.box_a .check { font-size:23px;}

/*prevention+celebrity*/
.mutibox .article_box .article_title { font-size:19px;}
.mutibox .article_box .article:after { font-size:85%;}

/*prevention*/
.pbox { font-size:21px; line-height:1.2;}





/*---------------------------------------------------*/

/*COMMON*/
body { background-color:#f9f9f9;}
a, a:link, a:hover, a:visited , a:active {color:#0a9c4b;}
a:hover { text-decoration:underline;}
.mobile {display:none;}
.alink { width:100%; height:100%; top:0; left: 0; position:absolute;}
.alink:hover {background-color:rgba(249,249,249,0.3);}
.block.red .content a:hover { color:#FF9; text-decoration:none;}
.ieonly {display:none;}

/*HEADER*/
.header {width:100%; height:48px; max-width:1130px; margin:0 auto; position:relative;}
.logos { width:330px;}
.logos:after { content:""; display:block; float:none; clear:both;}
.CHlogo, .CHFlogo { float:left;}
.CHlogo img, .CHFlogo img { height: 30px; width:auto; padding:10px 10px 0 0;}
.header.index .CHlogo img, .header.index .CHFlogo img { height: 35px;}
.header .social_shares { position:absolute; right:0; top:0; width:250px; padding:0 5px; text-align:right;}
.header.index .social_shares { top:15px;}

.social_shares span { width:2px; display:inline-block;}

/*INDEX-色塊們設定*/
.wrapper {width:100%; max-width:1130px; margin:0 auto; position:relative;}
.wrapper:after {content:""; display:block; float:none; clear:both;}
.wrapper .block,.wrapper .kv {margin: 3px; padding:10px; float:left; text-align: right; position:relative;}
.wrapper .kv { height: 552px; width: 898px; text-align: left; padding:0px;}
.wrapper .block { height: 160px; width: 200px; vertical-align: top; position:relative;}
.wrapper .block.imgonly { height: 180px; width: 220px; padding: 0px;}
.wrapper .block.imgonly img {width:100%; height:100%;}
.wrapper .block .content { text-align:left; position: absolute; bottom:5px; }

.icon_map { width:13px; height:auto; margin-right:3px; vertical-align:text-bottom;}
.yellow { background-color: #fce058; color:#5c5452;}
.red { background-color: #dc311c; color:#FFF;}
.blue { background-color: #00a0d1; color:#FFF;}
.green { background-color: #009944; color:#FFF;}
.purple { background-color: #89548c; color:#FFF;}
.gray { background-color: #cdcdcd; color:#5c5452;}
.orange{ background-color: #ffb54b; color:#5c5452;}
.red a, .blue a, .green a, .purple a {color:#FFF;}
.yellow a, .gray a, .orange a {color:#5c5452;}

/*INDEX-PC的主視覺設定*/
.kv_canvas { width: 831px; height: 343px; margin:40px auto 30px auto; position:relative;}
.kv_canvas div { position:absolute;}
.kv_canvas div img { width:100%; height:auto;}
.kv_canvas .heart_yellow { width:295px; top:80px; left:60px;}
.kv_canvas .heart_blue { width:228px; left:360px;}
.kv_canvas .heart_red { width:229px; top:70px; left:208px;}
.kv_canvas .slogan { width:281px; bottom:0;}
.kv_canvas .subslogan { width:379px; bottom:9px; right:0;}
.kv_wording { width: 831px; margin: auto; position:relative; color:#7a7a7a; text-align:right;}

/*FOOTER*/
.footer { background-color:#FFF; color:#656565;  width:100%; padding:10px 0; margin-top:20px; }
.footer .content { width:95%; max-width:1130px; margin:0 auto; text-align:center;}
.sponsor { margin-bottom:10px;}
.sponsor img { display:inline-block; height:50px; width:auto; vertical-align:middle; margin:5px; position:relative; top:-3px;}
.sponsor .ch  { margin-right:10px;}
.sponsor .ch img { height:30px; width:auto; }

#gotop {display:none;}
#gotop img { cursor:pointer; width:35px; height:auto; position:fixed; right:50px; bottom:50px; z-index:10000;}


/***內頁ONLY設定***/
/**內頁共用**/
.header.page .content, .kv_page .content, .wrapper_pg {width:1130px; margin:auto; position:relative;}
.btn a {display: block;text-align:center;width:50%;padding:15px;margin:20px auto;color:#FFF;background:#009944;}
.btn a:hover, .btn a:focus {text-decoration: none;background:#dc311c;}
.block_left, .block_right { float:left;}
.block_left { width:800px; margin-right:10px;}
.block_right {width:300px; padding:10px; background-color:#FFF; margin-bottom:20px;}
.block_right .banner img {width:100%; height:auto; margin-bottom:10px;}


/*HEADER*/
.header.page { background-color:#e8e8e8; max-width:100%; position:fixed; top:0; z-index:9999;}

.header.page .menu { position:absolute;/* right:260px*/; top:1px; right:0;}
.header.page .menu a {color:#858585; text-decoration:none; display:block;padding:15px 20px;}
.header.page .menu a:hover {color:#009944; background-color:#FFF;position:relative;}
.header.page .menu a:hover:after{ content:""; width: 0;height: 0;border-style: solid; border-width: 8px 8px 0 8px; border-color: #009944 transparent transparent transparent; position:absolute; top:0; left:43%;}
.header.page .menu .spot a {color:#009944;}
.header.page .menu:after { content:""; display:block; float:none; clear:both;}
.header.page .menu li { float:left;}
.header.page .menu ul {display:inline-block;}
.header.page .social_shares {position:relative; display:inline-block; width:auto; top:-14px;}

/*KV BANNER*/
.kv_page {width:100%; background-color:#FFF; position:relative; margin-top:48px;}
.kv_page:after { content:""; display:block; float:none; clear:both;}
.kv_page .home, .kv_page .why, .kv_page .where, .kv_page .when { float:left; margin-bottom:30px;}
.kv_page .home { height:262px; overflow:hidden;}
.kv_page .home img {margin-top:-10px;}
.kv_page .why, .kv_page .where, .kv_page .when { margin-top:30px; margin-left:10px; text-align:right; padding:10px; width:210px; height:210px; position:relative;}
.kv_page .information { text-align:left; position:absolute; bottom:2px; left:10px;}
.kv_page .why .information { bottom:0px;}
.icon_map_gray { margin-left:15px; position:absolute; bottom:30px;}
.kv_page .alink:hover {background-color:rgba(255,255,255,0.3);}

/*內頁主內容區*/
.wrapper_pg { padding-top:30px; color:#3d3837; position:relative;}
.wrapper_pg .wording, .wrapper_bg .content { margin:0 20px; padding-bottom:10px;}
.wrapper_pg .wording strong { color:#e84125;}
h1 { padding:0 0 10px 0;position:relative; color:#231815;}
h1:before {content:""; background-image:url(../images/grayheart.png); background-size:contain; background-repeat:no-repeat; width:16px; height:19px; display:inline-block; margin-bottom:3px; margin-right:2px;}
h2 { padding:20px 0; position:relative; color:#231815;}
h2:before { content:""; width:20px; display:inline-block;}
h2:after { content:""; background:url(../images/h2_after.gif); height:5px; width:100%; display:block; }
h3 { color:#139a54; position:relative; padding-left:32px;}
h3:before { content:""; background:url(../images/h3_before.png); width:27px; height: 27px; display:inline-block; position:absolute; top:2px; left:0; }
.wrapper_pg:after, .wrapper_pg .content:after { content:""; display:block; float:none; clear:both;}

/**內頁不共用**/
/*論壇資訊頁*/
.table_schedule { float:left; width:46%; margin:0 2% 20px 2%;}

.ampm {	width: 100%; margin-top: 10px; border:1px solid #E3E3E3;}
.ampm tr td { padding: 8px; background-color: #F0F0F0; border-top:1px solid #E3E3E3; border-right:1px solid #E3E3E3;}
.ampm tr td:first-child {border-left:1px solid #E3E3E3;}
.ampm tr th { background-color: #fde15b; font-weight: normal; border-left-style: none; text-align:center; color: #009944; padding: 10px;}
.ampm tr td.secondbg2 { background-color: #FBECD2; }
.ampm tr td.secondword { background-color: #F9F9F9; }

.onlineform { border:1px solid #E3E3E3; margin:0 20px 40px 20px;}
.onlineform iframe { width:100%;}

/*speaker*/
h1 .checkbtn, h2 .checkbtn { position:relative; left:10px; top:-6px; background:#0a9c4b; color:#FFF; padding:5px 10px; font-size:19px; font-weight:normal; }
h1 .checkbtn:hover, h2 .checkbtn:hover { opacity:0.7; text-decoration:none;}

.content.speaker { padding:0 20px;}
.turnbox_speaker { float:left; margin:5px; width:330px; height:260px;}
.box_speaker { text-align:center; color:#FFF; cursor:pointer; height:260px; position:relative;font-size:16px;}
.box_normal .box_speaker { cursor:default;}
.box_speaker p { position:absolute; width:100%; left:0; bottom:0; padding:5px 0; background-color:rgba(0,0,0,0.7); line-height:1.2;}
.box_speaker p .sname,.box_speaker p .stitle { display:block; width:100%;}
.box_speaker p .stitle { font-size:15px;}
.box_speaker p .stitle:after { content:""; display:block; background:url(../images/speaker_go.png) no-repeat center center; background-size:15px; height:15px; width:100%;}

.box_speaker_info { position:relative; height:260px; background:#f0f0f0; cursor:pointer;}
.box_speaker_info p { margin:10px;}
.box_speaker_info span { display:block; margin-bottom:5px;}
.box_speaker_info .sname { color:#000; font-weight:bold; margin-bottom:0px;}
.box_speaker_info img { width:110px; height:auto; position:relative; float:right; vertical-align:text-top; padding:0 0 5px 5px;}


.s01 { background:url(../images/speaker01bg_ie.jpg) no-repeat center top;}
.s02 { background:url(../images/speaker02bg_ie.jpg) no-repeat center top;}
.s03 { background:url(../images/speaker03bg_ie.jpg) no-repeat center top;}
.s04 { background:url(../images/speaker04bg_ie.jpg) no-repeat center top;}
.s05 { background:url(../images/speaker05bg_ie.jpg) no-repeat center top;}
.s06 { background:url(../images/speaker06bg_ie.jpg) no-repeat center top;}
.s07 { background:url(../images/speaker07bg_ie.jpg) no-repeat center top;}
.s08 { background:url(../images/speaker08bg_ie.jpg) no-repeat center top;}
.s09 { background:url(../images/speaker09bg_ie.jpg) no-repeat center top;}
.s10 { background:url(../images/speaker10bg_ie.jpg) no-repeat center top;}
.s11 { background:url(../images/speaker11bg_ie.jpg) no-repeat center top;}
.s12 { background:url(../images/speaker12bg_ie.jpg) no-repeat center top;}
.s13 { background:url(../images/speaker13bg_ie.jpg) no-repeat center top;}
.s14 { background:url(../images/speaker14bg_ie.jpg) no-repeat center top;}
.ss { background:url(../images/speakerss_ie.gif) no-repeat center center #FFF;}

.content .clear { float:none; clear:both; display:block; padding:20px 10px;}

/*TKS*/
.notice {margin-top:20px; border-top:1px dotted #bbb; border-bottom:1px dotted #bbb; padding:10px;}
.notice ul, .notice ol { padding:10px 20px;}
.notice ol li {list-style-type: decimal;list-style-position: inside;}


/*QA*/
.turns { width:740px; margin:auto;}
.turns:after { content:""; float:none; clear:both; display:block; }
.turnbox { float:left; margin:10px; width:350px; height:320px;}

.box_q { background-image:url(../images/box_q_bg.png); background-position:center center; background-repeat:no-repeat; background-size:auto;text-align:center; color:#FFF; cursor:pointer;}
.box_q p { padding:30% 15% 0 15%;}

.box_a, .turnbox .box_normal { position:relative;}
.box_a p { padding:10px;}
.box_a .q { display:block; margin-bottom:10px;}
.box_a .yn { display:block; color:#dc311c; font-weight:bold;}
.box_a .check { cursor:pointer; color:#FFF; text-align:center; width:90%; padding:8px 0; letter-spacing:0.5em; position:absolute; bottom:5%; left:5%; display:block;}
.box_a .check:hover { opacity:0.5;}
.box_a .checkbtn { color:#FFF; text-align:center; width:95%; padding:12px 0; position:relative; top:0; left:2.5%; display:block; letter-spacing:0.1em;}
.box_a .checkbtn:hover { opacity:0.8; text-decoration:none;}

.red_light { background-color:#ffe5e2;}
.red_light .check {background-color:#dc311c;}
.blue_light { background-color:#ddf7ff;}
.blue_light .check {background-color:#00a0d1;}
.dorange { background-color:#f4781d;}
.dorange_light { background-color:#ffe4d1;}
.dorange_light .check {background-color:#f4781d;}
.bpurple { background-color:#644a9f;}
.bpurple_light { background-color:#e0d6f7;}
.bpurple_light .check {background-color:#644a9f;}
.ygreen { background-color:#84bb1b;}
.ygreen_light { background-color:#f4ffde;}
.ygreen_light .check {background-color:#84bb1b;}
.rpuple { background-color:#864d9b;}
.rpuple_light { background-color:#f5e3fc;}
.rpuple_light .check {background-color:#864d9b;}
.pink { background-color:#d34a6b;}
.pink_light { background-color:#f9e8ec;}
.pink_light .check {background-color:#d34a6b;}
.sblue { background-color:#4553a8;}
.sblue_light { background-color:#dce1ff;}
.sblue_light .check,.sblue_light .checkbtn {background-color:#4553a8;}

/*prevention+celebrity*/
.mutibox:after { content:""; float:none; clear:both; display:block; position:relative; background-image:url(../images/h2_after.gif); height:2px; width:100%; top:40px; left:0;}
.mutibox:last-child:after {height:0px;}
.mutibox .img_box img {width:100%; height:auto;}
.mutibox .article_box .article_title { margin-bottom:10px; color:#139a54;}
.mutibox .article_box .article:after { content:"...more"; color:#999;}

/*prevention*/
.pbox { cursor:pointer; text-align:center; position:relative; padding:40px 0 0 0; float:left; width:19%; height:80px; margin:0 5px 5px 0;}
.pbox:hover, .pbox:focus { opacity:0.7;}
.prevention_boxes { margin-bottom:20px;}

.prevention_wording { position:relative;}
.prevention_wording .mutibox { position:relative; margin:80px 0;}
.prevention_wording .mutibox .img_box { float:left; width:28.5%; margin-right:1.5%;}
.prevention_wording .mutibox .article_box { float:left; position:relative; width:70%;}


/*celebrity*/
.celebrity { position:relative;}
.celebrity .mutibox { position:relative; display:inline-block; width:31%; margin:1% auto; text-align:center; vertical-align:top;}
.celebrity .mutibox:after {height:0px;}
.celebrity .mutibox .img_box img {width:90%; margin:auto;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
.celebrity .mutibox .article_box {position:relative; margin:10px auto 20px auto;}
.celebrity .mutibox .article_box .article_title { margin-bottom:0px;}



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

/* 視窗寬度小於1280時的 CSS。(FOR-1024*768)*/ 
/***全部的字體設定***/
.wrapper .block {font-size: 36px;}

/**內頁**/
.header.page .menu {font-size:15px;}
.kv_page .why, .kv_page .where, .kv_page .when {font-size: 19px;}
.kv_page .information strong { font-size:36px;}
.wrapper_pg .wording { font-size:16px;}
h1 { font-size:29px;}
h2 { font-size:25px;}
h3 { font-size:19px;}
/*QA*/

.box_q { font-size:19px;}
.box_a, .turnbox .box_normal { font-size:15px; line-height:1.4;}
.box_a .q { font-size:17px; line-height:1.3;}
.box_a .check { font-size:19px;}
.box_a .checkbtn { font-size:17px; width:96.4%; left:1.8%; letter-spacing:0;}

/*prevention+celebrity*/
.mutibox .article_box .article_title { font-size:17px;}

/*prevention*/
.pbox {font-size:19px; }


/*---------------------------------------------------*/

/*HEADER*/
.header { max-width:911px;}
.CHFlogo img { height:23px; margin:2px 0;}

/*INDEX-色塊們設定*/
.wrapper {max-width:911px;} 
.wrapper .kv { height: 470px;}

/*INDEX-PC的主視覺設定*/
.kv_canvas { margin:10px auto;}

/***內頁ONLY設定***/
/**內頁共用**/
.header.page .content, .kv_page .content, .wrapper_pg {width:911px;}
.block_left { width:581px; margin-right:10px;}
/*HEADER*/
.header.page { max-width:100%;}
.header.page .menu a {padding:16px 10px;}
.header.page .menu a:hover:after{ content:""; width: 0;height: 0;border-style: solid; border-width: 6px 6px 0 6px; border-color: #009944 transparent transparent transparent; position:absolute; top:0; left:44%;}

/*KV BANNER*/
.kv_page .home, .kv_page .why, .kv_page .where, .kv_page .when { margin-bottom:10px;}
.kv_page .home { height:222px; overflow:hidden;}
.kv_page .home img { height:100%; width:auto; margin-top:-10px;}
.kv_page .why, .kv_page .where, .kv_page .when { margin-top:20px; margin-left:4px;  padding:5px 5px; width:180px; height:180px;}
.kv_page .information { bottom:0px; left:5px;}
.kv_page .why .information { bottom:-2px;}
.icon_map_gray { margin-left:15px; position:absolute; bottom:26px; width:45px; height:auto;}

/*內頁主內容區*/
h1:before {content:""; background-image:url(../images/grayheart.png); background-size:contain; width:16px; height:19px; display:inline-block; margin-bottom:1px; margin-right:2px;}
h2:after { content:""; background:url(../images/h2_after.gif); height:3px; width:100%; display:block; }
h3:before { content:""; background:url(../images/h3_before.png); width:27px; height: 27px; display:inline-block; position:absolute; top:0px; left:0; }
/**內頁不共用**/
/*論壇資訊頁*/
.table_schedule { width:44%; margin:0 3% 20px 2%;}

/*QA*/
.turns { width:580px;}
.turnbox { width:270px;}
.box_q { background-image:url(../images/box_q_bg.png); background-position:center center; background-repeat:no-repeat; background-size:256px;text-align:center; color:#FFF; cursor:pointer;}
.box_q p { padding:45% 14% 0 14%;}

.box_a, .turnbox .box_normal { position:relative;}
.box_a p { padding:10px;}
.box_a .q { display:block; margin-bottom:10px;}

/*prevention+celebrity*/
.mutibox:after { top:20px;}

/*prevention*/
.pbox {padding:20px 0 0 0; width:19%; height:60px;}

.prevention_wording .mutibox { position:relative; margin:40px 0;}
.prevention_wording .mutibox .img_box {width:32.5%; margin-right:1.5%;}
.prevention_wording .mutibox .article_box {width:66%;}

/*speaker*/
.nodata { display:none;}
h1 .checkbtn, h2 .checkbtn { top:-5px; padding:6px 10px 4px 10px; font-size:17px; font-weight:normal; }

.content.speaker { padding:0 15px;}

}
@media screen and (max-width: 911px) {
/* 視窗寬度小於1024時的 CSS。(FOR-800*600)*/ 
/***全部的字體設定**/
.header.page .menu {font-size:13px;}
.kv_page .why, .kv_page .where, .kv_page .when {font-size: 17px;}
.kv_page .information strong { font-size:32px;}
.wrapper_pg .wording {font-size:15px}
h3 { font-size:19px; font-weight:normal; }
.btn a {font-size: 17px;}

/**內頁**/
/*QA*/
.box_q { font-size:17px;}
.box_a, .turnbox .box_normal {font-size:15px; line-height:1.5;}
.box_a .q { font-size:17px; line-height:1.3;}
.box_a .check { font-size:17px;}

/*prevention+celebrity*/
.mutibox .article_box .article_title { font-size:17px;}
.mutibox .article_box .article { font-size:15px; line-height:1.3;}

/*prevention*/
.pbox { font-size:17px; line-height:1.2;}

/*---------------------------------------------------*/

/*HEADER*/
.header {max-width:738px;}
.CHlogo img,.CHFlogo img { height:18px; margin:5px 0; padding-right:3px;}

/*INDEX-色塊們設定*/
.wrapper {max-width:738px;}
.wrapper .kv { height: 540px; width: 712px;}
.wrapper .block { height: 150px; width: 220px;} 
.wrapper .block.imgonly { height: 170px; width: 240px;}

/*INDEX-PC的主視覺設定*/
.kv_canvas { width: 712px; height: 423px; margin:18px auto 10px auto;}
.kv_canvas .slogan { bottom:80px;}
.kv_canvas .subslogan { bottom:0px;}
.kv_wording { width: 712px;}
.hide {display:none;}

/***內頁ONLY設定***/
/**內頁共用**/
.header.page .content, .kv_page .content, .wrapper_pg {width:738px;}
.header.page .menu a {padding:17px 6px;}
h3 { color:#139a54; position:relative; padding-left:26px;}
h3:before { content:""; background-image:url(../images/h3_before.png); background-size:contain; width:22px; height: 22px; display:inline-block; position:absolute; top:2px; left:0; }
.block_left { width:458px; margin-right:10px;}
.block_right {width:250px;}
/*KV BANNER*/
.kv_page .home, .kv_page .why, .kv_page .where, .kv_page .when { margin-bottom:10px;}
.kv_page .home { height:168px; margin-top:10px;}
.kv_page .home img { margin-top:0px;}
.kv_page .why, .kv_page .where, .kv_page .when { margin-top:10px; margin-left:4px;  padding:5px 5px; width:140px; height:156px;}
.kv_page .information { bottom:0px; left:5px;}
.kv_page .why .information { bottom:-2px;}
.icon_map_gray { margin-left:10px; position:absolute; bottom:26px; width:35px; height:auto;}


/**內頁不共用**/
/*論壇資訊頁*/
.table_schedule { width:92%;  margin:0 4% 20px 4%;}

/*QA*/
.turns { width:95%;}
.turnbox { width:410px; float:none;}
.box_q { background-image:url(../images/box_q_bg.png); background-position:center center; background-repeat:no-repeat; text-align:center; color:#FFF; cursor:pointer;}
.box_q p { padding:30% 25% 0 25%;}

.box_a, .turnbox .box_normal { position:relative;}
.box_a p { padding:14px;}
.box_a .q { display:block; margin-bottom:10px;}

/*prevention+celebrity*/
.mutibox:after { top:20px;}
.mutibox .article_box .article_title { margin-bottom:2px;}

/*prevention*/

.pbox { padding:20px 0 0 0; float:left; width:18.7%; height:55px; margin:0 5px 5px 0;}

.prevention_wording .mutibox { position:relative; margin:40px 0;}
.prevention_wording .mutibox .img_box {width:38.5%; margin-right:1.5%;}
.prevention_wording .mutibox .article_box {width:60%;}


}