@charset "utf-8";
@import url("reset.css");
@import url(https://fonts.googleapis.com/css?family=Roboto);

/* ========== 區塊 =========== */
body{
	font-size: 17px;
	background-image:url("../images/bg.png");
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-family: Microsoft JhengHei;
	-webkit-text-size-adjust:none;
}

a{ 
	color: #000000;
    outline: none; /* for Firefox */
}

a:hover{ 
	color:#333333;
}

article{ position: relative; display: block\9; width: 100%; overflow: visible; max-width: 1200px; margin: 0 auto; clear: both;}

/*
.top{ width:100%; position:relative; z-index:999; background:#66b4cc; }
footer{ width:100%; position:relative; z-index:999; background-color:#66b4cc;}*/

hr.section-divider{padding:0;border:none;border-top:medium double rgba(255,255,255,1);color:#FFFFFF;text-align:center;width:100%;}


.kv_pc{background: url(../images/kv.png); background-position: center; min-height: 714px; cursor: pointer;}
.kv_m{ display: none;}



.t1{margin-top:2% ; margin-left: 37.5%; width: 22%; position: relative;}
.t2{margin-top:7.9% ; margin-left: 1%; width: 14%; position:absolute;}

.leftbox{width: 50%; float: left; background:url(../images/leftbg.png); padding: 3% 0% 2% 0%; min-height: 400px; }
.leftbox_po{max-width: 580px; float: right;}
.leftbox_ul{float: right; width:48%; padding: 3% 5% 3% 5%;}

.leftbox_ul li:nth-child(1){font-size: 1.5em; font-weight: bold; color:#003f4f; line-height: 1.6em;}
.leftbox_ul li:nth-child(2){clear: both; padding: 5% 0% 5% 0%;}

.leftbox_ul li:nth-child(2) hr{width: 80%; border:0;background-color:#ffffff;height:1px; margin-top: 6%; float: right;}
.leftbox_ul li:nth-child(2) img{width: 13%;}

.leftbox_ul li:nth-child(3){color:#ffffff; font-size: 1.2em; line-height: 1.6em;}

.leftbox_ul li:nth-child(4){clear: both; padding: 5% 0% 5% 0%;}
.leftbox_ul li:nth-child(4) hr{width: 80%; border:0;background-color:#ffffff;height:1px; margin-top: 6%; float: left;}
.leftbox_ul li:nth-child(4) img{width: 13%; float: right;}

.leftimg{background-image: url(../images/frame.png); background-size: contain; background-repeat: no-repeat; width: 51%; float: left;}
.leftimg img{ padding: 3%; width: 100%; max-height: 390px;}

/*rightbox*/ 
.rightbox{width: 50%; float: right; background:url(../images/rightbg.png); padding: 3% 0% 2% 0%; min-height: 400px; }
.rightbox_po{max-width: 580px; float: left;}
.rightbox_ul{float: left; width:48%; padding: 3% 5% 3% 5%;}

.rightbox_ul li:nth-child(1){font-size: 1.5em; font-weight: bold; color:#003f4f; line-height: 1.6em;}
.rightbox_ul li:nth-child(2){clear: both; padding: 5% 0% 5% 0%;}

.rightbox_ul li:nth-child(2) hr{width: 80%; border:0;background-color:#ffffff;height:1px; margin-top: 6%; float: right;}
.rightbox_ul li:nth-child(2) img{width: 13%;}

.rightbox_ul li:nth-child(3){color:#ffffff; font-size: 1.2em; line-height: 1.6em;}

.rightbox_ul li:nth-child(4){clear: both; padding: 5% 0% 5% 0%;}
.rightbox_ul li:nth-child(4) hr{width: 80%; border:0;background-color:#ffffff;height:1px; margin-top: 6%; float: left;}
.rightbox_ul li:nth-child(4) img{width: 13%; float: right;}

.rightimg{background-image: url(../images/frame.png); background-size: contain; background-repeat: no-repeat; width: 51%; float: right;}
.rightimg img{ padding: 3%;  width: 100%; max-height: 390px;}



.threeblock{width: 100%; background:url(../images/threebg.png); padding: 2% 0% 1% 0%; margin-bottom: 2%;}
.threeblock1200{max-width: 1160px; margin: auto;}

.threediv{width: 32.8%; padding: 0; margin: 0; display: inline-block;}
.threeimg{background: url(../images/bookbg.png); background-repeat: no-repeat; background-size: 100%; width: 56%; float: left;}
.threeimg img{width: 100%; padding: 6.5% 5.2% 12% 5.2%; height:300px;}
.threediv ul{float: right; width: 43%; padding: 3% 4% 3% 1%;}
.threediv ul li:nth-child(2){font-size: 1.1em; line-height: 1.4em; color: #003f4f; padding: 1% 0% 1% 0%; font-weight: bold;}
.threediv ul li:nth-child(4){font-size: 1em; color: #ffffff; line-height: 1.6em;}

/*----第三區 開運百寶袋------------------------------------------------------------------------------------------------------------*/
 

.cap{font-size: 1.7em; font-weight: bold; border-left: 2px soild; padding-left: 11px; color: #003f4f;}

.title{font-size: 2.1em; font-weight: bold; border-left: 2px soild; color: #003f4f;}


.five ul{
	background-image: url(../images/pc_ul_bg.png) ;
	background-repeat: no-repeat; background-size: 100%;
	text-align: center;
	padding-bottom: 4%;
}

.five ul li{
    display: inline-block;
    width: 20%;
    height: auto;
    margin: 2.3% 1.2% 0.5% 1.2%;
    min-width: 180px;
	vertical-align: top;
}


.five ul li a img{ 
    width: 100%;
	height: 310px;
}

.five ul li a p.style1{ 
	font-size: 1.2em;
	text-align: center;
	font-weight: bold;
	margin-top: 1%;
	color: #000000;
}

.five ul li a p.style2{ 
	font-size: 1em;
	text-align: center;
	font-weight: bold;
	margin-top: 1%;
	color: #333333;
}

.des {float: left;}
.line {float: left; width: 71%;}
.line hr {width: 100%; float: left; margin-top: 3.5%; border-top: 1px solid #8c8b8b; color: #eeeeee; }
.more {float: right; margin-top:1.6%;}


.banner {margin: auto; max-width: 1160px; text-align: center; background-image: url(../images/mobile_ul_bg.png); padding: 1.8% 0% 0.2% 0%;}
.banner li{display: inline-block; width: 47%; margin: 0% 0.7% 1.4% 0.7%; }
.banner li img{width: 100%; }


.block{max-width: 1160px; margin: 2% auto;}


@media screen and ( max-width: 1200px ){	
.five ul{
	background-image: url(../images/mobile_ul_bg.png) ;
	background-repeat: repeat;
	background-size:auto;
}		
}


@media screen and (min-width: 768px) and (max-width: 1366px){
.kv{}
.t1{margin-top:3% ; margin-left: 33%; width: 30%; position: relative;}
.t2{margin-top:10.8% ; margin-left:2%; width: 19.5%; position:absolute;}

}
/****************************************************************
	MOBILE
****************************************************************/
@media screen and ( max-width: 768px ){

    /* ========== 共用區塊 =========== */
    html, body{ 
    	min-width: 320px;
    	overflow: auto;
    	overflow-x: hidden;
    	width: 100%;
    	
    	font-size: 85%;
    }
    article{ position: relative; display: block\9; width: 100%; min-width: 320px; }
    article{overflow: hidden;}
	
.five ul{margin-bottom:4%;}	
.five ul li {
    display: inline-block;
    width: 42%;
    margin: 3% 3% 0% 3%;
    padding: 0;
    min-width: auto; 
}
.five ul li a{ padding:0;}
.five ul li a p.style1{ font-size: 1.5em; text-align: center; font-weight: bold;}
.five ul li a p.style2{ font-size: 1.4em; text-align: center;}


	
	
.leftbox_ul{width:94%; padding: 3% 5% 3% 5%; margin-right: 4%;}
.leftbox_ul li:nth-child(1){font-size: 1.7em; text-align: center;}
.leftbox_ul li:nth-child(2){padding: 1% 0% 3% 0%;}
.leftbox_ul li:nth-child(2) img{width: 10%;}
.leftbox_ul li:nth-child(3){font-size: 1.5em; text-align: center;}
.leftbox_ul li:nth-child(4){padding: 5% 0% 3% 0%;}
.leftbox_ul li:nth-child(4) img{width: 10%;}
.leftimg{width: 88%; margin-left: 5%; min-height: 240px;}
.leftimg img{ padding: 3%;  width: 100%; min-height: 200px;}
	
.rightbox_ul{width:94%; padding: 3% 5% 3% 5%; margin-left: 4%;}
.rightbox_ul li:nth-child(1){font-size: 1.7em; text-align: center;}
.rightbox_ul li:nth-child(2){padding: 1% 0% 3% 0%;}
.rightbox_ul li:nth-child(2) img{width: 10%;}
.rightbox_ul li:nth-child(3){font-size: 1.5em; text-align: center;}
.rightbox_ul li:nth-child(4){padding: 5% 0% 3% 0%;}
.rightbox_ul li:nth-child(4) img{width: 10%;}
.rightimg{width: 88%; margin-right: 5%; min-height:240px;}
.rightimg img{ padding: 3%;  width: 100%; min-height: 200px;}

	
.threediv{width: 30.5%; padding: 0% 0.5% 3% 1.5%; margin: 0; display: inline-block; vertical-align: top;}
	
.threeimg{background: url(../images/bookbg.png); background-repeat: no-repeat;  background-size: 100%; width: 100%; vertical-align: top;}
.threeimg img{width: 100%; padding: 8% 6% 6% 6%; min-height: 130px; max-height: 140px; position: relative;}
.threediv ul{float: right; width: 100%; }
.threediv ul li:nth-child(2){font-size: 1.5em; line-height: 1.4em; color: #ffffff; font-weight: bold;text-align: center;}
.threediv ul li:nth-child(4){font-size: 1.4em; color: #ffffff; line-height: 1.6em;text-align: center;}	
	
	
.des {float: left;}
.line {float: left; width: 30%;}
.line hr {width: 100%; float: left; margin-top: 3.5%; border-top: 0px solid #8c8b8b; color: #eeeeee; }
.more {float: right; margin-top:2%; margin-right: 20px; width: 67px;}
	
.kv_pc{ display: none; }
.kv_m{ display: block; margin-bottom: -3px;
	
.five ul li a p.style2{ 
	font-weight:normal;

}
.five ul li a img{ 
    width: 100%;
	min-height: 180px;
	max-height: 190px;
}

	
.banner {margin: auto; text-align: center; background-image: url(../images/mobile_ul_bg.png); padding: 4% 0% 0.2% 0%;}
.banner li{display: inline-block; width: 91%; margin: 0% 2% 3% 2%; }
.banner li img{width: 100%; }	

	
	
}

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

}