body { background:#0C0C0C;line-height: 1.5;font-size: 1.8rem;}
p{font-size: 1.8rem;}
/*預設*/
h2{text-align: center; font-weight: 600;padding: 20px 0;}
.bigtxt{font-size: 1.6em; text-align: center;color: #F4B81C; font-weight: 600;}


.container{
	background-color:#FFF;
	box-shadow: 0 30px 35px 0 rgba(0, 0, 0, 0.2);
}

/*image*/
#header{ 
    margin:0;
	height:760px;
	background: -webkit-linear-gradient(top,rgba(0,0,0,0.8),rgba(0,0,0,0.7),rgba(0,0,0,0.9)), url(../img/180718_chfi-image-bg.jpg) no-repeat ; background: -ms-linear-gradient(top,rgba(0,0,0,0.8),rgba(0,0,0,0.7),rgba(0,0,0,0.9)), url(../img/180718_chfi-image-bg.jpg) no-repeat ; background-size: cover;
	position:relative; background-position: bottom;
}
.header-image img{width:800px; margin-top: 118px;}
.header-content{position:absolute;right:0;top:150px;margin-right: 180px;}
.header-content img{width:100%; min-width: 250px;}
.header-content h2{ color: #F1B516;}
.header-content h2 span{background-color: #000000; padding: 5px 20px;}
.header-content p{color: #FFFFFF;}

.verticle02:before{
	position: absolute;
	top:120px;
	left: 750px;
    content: "";
    width: 100px;
    height:8px;
    background-color: #2D3742;
    z-index: 800;
}

/*page02-main*/
.page02-main{height: 250px; width: 1000px; margin:0 auto 20px auto; z-index: 2000;}
.page02-main-img{float: left;width:220px; height: 220px;border-radius: 50%; border: 5px #F4B81C solid; overflow: hidden;background-color:#000000;position: absolute;}
.page02-main-txt{float: left;background-color:#000000; margin-top: 40px; margin-left: 80px; padding: 10px; color: #FFFFFF; border-radius: 10px;border: 5px #F4B81C solid;}
.page02-main-title{font-size: 1.8em; padding-left: 140px; padding-top: 5px; font-weight: 600; color: #F4B81C; }
.page02-main-title-p{padding-left: 140px;}

/*page02*/
.page02{overflow: hidden; margin:auto;padding: 6% 2%;background: -webkit-linear-gradient(top,rgba(0,0,0,0.8),rgba(0,0,0,0.7),rgba(0,0,0,0.9)), url(../img/Monthly.png) no-repeat fixed; background: -ms-linear-gradient(top,rgba(0,0,0,0.8),rgba(0,0,0,0.7),rgba(0,0,0,0.9)), url(../img/Monthly.png) no-repeat fixed;background-size: cover; }
.pagebg{background: -webkit-linear-gradient(top,rgba(0,0,0,0.8),rgba(0,0,0,0.7),rgba(0,0,0,0.9)), url(../img/Monthly.png) no-repeat fixed;  background-size: cover;}
.left-img{position: absolute; top:-5px; left: 340px;}
.left,.right,.buttom{ background-color: #2D3742; width: 350px; height: auto; padding-bottom: 10px; padding-right: 20px; padding-top: 20px; margin-left: 70px; border-radius: 10px;z-index: 1000;position: relative;}
.buttom{width: 460px;clear: both; padding-top: 40px; margin-left: 200px;position: relative;}
.page02 ul{ margin-left: -15px;}
.page02 li{ background-color: #FFFFFF; margin-bottom: 10px; padding: 5px; border-radius: 5px;z-index: 1000;}
.first-box{ position: relative;}
.chfi{display: none;}

/*page04*/
.page04{overflow: hidden; margin:auto;padding: 5% 3%;background: -webkit-linear-gradient(top,rgba(0,0,0,0.8),rgba(0,0,0,0.7),rgba(0,0,0,0.9)), url(../img/180718_chfi-image-bg.jpg) no-repeat fixed;background: -ms-linear-gradient(top,rgba(0,0,0,0.8),rgba(0,0,0,0.7),rgba(0,0,0,0.9)), url(../img/180718_chfi-image-bg.jpg) no-repeat fixed;background-size: cover;}
.page04-wrap{ padding: 40px 45px; height: auto; min-height:230px; background-color: #2D3742; border-radius: 10px;box-shadow: 0 0 45px 0 rgba(0, 0, 0, 1);}
.page04 a{color:#000000;}
.page04-wrap:hover{ box-shadow: 0 0 45px 0 rgba(0, 0, 0, 0.1);transition: 0.20s linear; background-color: #333f4b;}
.page04-txt{width: 90%; color: #FFFFFF; margin: auto; padding: 5px; border-radius: 5px; line-height: 1.7; }
.main-btn{ display: block; background-color: chocolate; color: #FFF; font-size: 1.2em; padding: 10px; width: 470px; margin:7px auto;border-radius: 5px;}
.main-btn span{background-color:#fff; color: chocolate; padding: 0 6px; border-radius: 5px;}
.main-btn:hover{ color: #35547E;transition: 0.20s linear;}
#page04 li{color: #FFFFFF;}
#page04 ul{margin-left: 20px;}
.page04-wrap span{padding: 2px 5px;border-radius: 5px;}
/* CPT 內容設定*/
div#CPT { width: 1200px; margin:50px auto; clear: both; padding:5% 0 0 0;}
div#CPT div.BTN-A { width: 330px; }
div#CPT div.BTN { margin: 35px; float: left; background:#35547E; color: #FFF; text-align: center; font-size: 1.3em; padding: 15px 10px; border-radius: 5px; transition: 0.20s linear; border:1px #35547E solid;}
div#CPT div.BTN:hover { background-color: transparent; color: #35547E; transition: 0.20s linear; border-color: #35547E;}

@media(min-width:1350px){	
.container{width:100%; max-width:1350px !important;}	
}

@media (min-width: 769px) and (max-width: 1235px) {
.container{width:100%; max-width:750px !important;}
/*image*/
#header{ 
    margin:0;
	height:760px;
	background: -webkit-linear-gradient(top,rgba(0,0,0,0.8),rgba(0,0,0,0.7),rgba(0,0,0,0.9)), url(../img/180718_chfi-image-bg.jpg) no-repeat ; background: -ms-linear-gradient(top,rgba(0,0,0,0.8),rgba(0,0,0,0.7),rgba(0,0,0,0.9)), url(../img/180718_chfi-image-bg.jpg) no-repeat ; background-size: cover;
	position:relative; background-position: bottom;
}
.header-image img{width:500px; margin-top: 340px; margin-left: 350px;}
.header-content{position:absolute;right:0;top:150px;margin-right: 220px;}
.header-content img{width:100%; min-width: 250px;}
.header-content h2{ color: #F1B516;}
.header-content h2 span{background-color: #000000; padding: 5px 20px;}
.header-content p{color: #FFFFFF; font-size: 1.5em;}
/*page02-main*/
.page02-main{height: auto; width: auto;}
.page02-main-img{float:none;margin-top: -150px;margin-left: 30%;}
.page02-main-txt{float:none;margin-left: 0px;margin-top: 160px;}
.page02-main-title{text-align: center;padding-left: 0px;padding-top: 70px;}
.page02-main-title-p{padding-left:0px;}
/*page02*/
.page02{padding: 6% 2%;}
.pagebg{display: none;}
.left-img{display: none;}
.left,.right,.buttom{ background-color: #2D3742; width: 350px; height: auto; padding-bottom: 10px; padding-right: 20px; padding-top: 20px; margin-left: 180px; margin-bottom: 10px; border-radius: 10px;z-index: 1000;position: relative;}
.center{ display: none;}
.buttom{margin-left: 180px; font-size: 0.9em;}
.buttom img{ display: none;}
.chfi{display: block;width: 260px; height: 245px; background-color:#2D3742; padding: 10px; border-radius: 10px; margin: 5% 32%;}
/*page04*/
.page04{padding: 5% 0 5% 0;}
.page04-wrap{ margin-bottom: 20px;}
	
div#CPT { width: 760px;padding:0; }
div#CPT div.BTN-A { width: 230px;margin:10px;}
div#CPT div.BTN {font-size: 1.2em;}
}

@media(max-width:768px) {
.container{width:100%; max-width:420px !important;}	
/*image*/
#header{ margin:0;height:760px;background-position: left bottom;}
.header-image img{width:100%; margin-top: 415px;}
.header-content{position:absolute;right:0;top:50px;margin-right: 20px;}
.header-content img{width:100%; min-width: 250px;}
.header-content h2{ color: #F1B516; font-size: 1.6em;}
.header-content h2 span{background-color: #000000; padding: 5px 20px;}
.header-content p{color: #FFFFFF; font-size: 1em; text-align: center;}
/*page02-main*/
.page02-main{height: auto; width: auto;}
.page02-main-img{float:none;margin-top: -150px;margin-left: 20%; }
.page02-main-txt{float:none;margin-left: 0px;margin-top: 160px;}
.page02-main-title{text-align: center;padding-left: 0px;padding-top: 70px;}
.page02-main-title-p{padding-left:0px;}
.chfi{display: block;width: 260px; height: 245px; background-color:#2D3742; padding: 10px; border-radius: 10px; margin: 10px 15%;}
/*page02*/
.page02{padding: 6% 2%;}
.pagebg{background: -webkit-linear-gradient(top,rgba(0,0,0,0.8),rgba(0,0,0,0.7),rgba(0,0,0,0.9)), url(../img/Monthly.png) no-repeat fixed;  background-size: cover;}
.left,.right,.buttom{ background-color: #2D3742; width: 350px; height: auto; padding-bottom: 10px; padding-right: 20px; padding-top: 20px; margin-left: 20px; margin-bottom: 10px; border-radius: 10px;z-index: 1000;position: relative;}
.center{ display: none;}
.buttom{margin-left: 20px; font-size: 0.9em;}
.buttom img{ display: none; }
/*page04*/
.page04{padding: 5% 0 5% 0;}
.page04-wrap{ margin-bottom: 20px;}
.main-btn{ font-size: 1em; padding: 20px 10px; width: 320px; margin:15px auto;}
	
div#CPT {width: 320px;padding:0;}
div#CPT div.BTN-A { width: 320px;margin:20px 0;}
div#CPT div.BTN {float:none;}
}