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

/* ========== 區塊 =========== */
body{
	font-size: 17px;
	background-image:url("../images/bg.jpg");
	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; width: 100%; overflow: visible; max-width: 1200px; margin: 0 auto; clear: both;}

header{ width:100%; position:relative; z-index:999; display:block; background:url(../images/kv_01.jpg) top center no-repeat;}	
.header_m{ display:none;}
	@media screen and ( max-width: 768px ){
		header .top{ display:none;}
		.header_m{ display:block; width:100%; height:auto; position:relative; top:0; padding:5px 0; background-color:#21d1fe;}
		.header_m img{ width:120%; height:auto; display:block; }
		#tob{ width:50%; font-size:70%}
	}
	
footer{ width:100%; position:relative; z-index:999;background:url(../images/bg.jpg) top center repeat;}

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

hr.section-divider{padding:3% 0% 3% 0%; border:none; border-top:1px solid; color:#fff; text-align:center; width:100%;}


.kv_pc{background: url(../images/kv.jpg); background-position: center; min-height: 556px; min-width:1200px;position:relative; width:100%;}
.kv_ani{width:1200px; position:relative; display:block; min-width:1200px; height:auto; margin:0 auto;}
.tit1{ position:absolute; top:33px; left:375px;}
.tit2{ position:absolute; top:33px; left:612px;}
.tit3{ position:absolute; top:40px; left:866px;}
.tit4{ position:absolute; top:246px; left:738px;}
.tit5{ position:absolute; top:370px; left:730px;}

.container{ width:100%; margin:0 auto; position:relative; min-width:1200px; overflow:hidden; }
	@media screen and ( max-width: 768px ){
		.container{ min-width:320px;  width:100%;}
			}
.kv_m{ display: none;}

.twoblock{ /*background:url(../images/twobg.jpg) center top;*/ display: flex; height: 480px; margin-top: 30px;}
	@media screen and ( max-width: 768px ){
		.twoblock{ background:none; height: auto; margin-top: -3px; background: none; display:block;}
	}

.leftbox{width: 50%; float: left; padding: 0% 0% 0% 0%; min-height: 400px; }
.leftbox_po{max-width: 580px; float: right; padding: 2% 0% 2% 5%;background:url(../images/paper.png) center top no-repeat; margin:8px; border-radius:8px;}
	@media screen and ( max-width: 768px ){
.leftbox_po{max-width: 580px; float: right; padding: 5% 0% 5% 0%;background:none;filter:none;margin:0px;}
	}

.leftbox_ul{float: right; width:48%; padding: 3% 8% 3% 2%;}

.leftbox_ul li:nth-child(1){font-size: 1.5em; font-weight: bold; color:#3b0d51; 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:#3b0d51;height:1.5px; margin-top: 6%; float: right;}
.leftbox_ul li:nth-child(2) img{width: 13%;}

.leftbox_ul li:nth-child(3){color:#3b0d51; 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:#3b0d51;height:2px; margin-top: 6%; float: left;}
.leftbox_ul li:nth-child(4) img{width: 13%; float: right;}

.leftimg{ background-size: contain; background-repeat: no-repeat; width: 51%; float: left;}
.leftimg img{ padding: 3%; width: 100%; height: 390px;}

/*rightbox*/ 
.rightbox{width: 50%; float: right;padding: 0% 0% 0% 0%; min-height: 400px; }
.rightbox_po{max-width: 580px; float: left; padding: 2% 3% 2% 0%;background:url(../images/paper.png
) center top no-repeat;margin:8px; border-radius:8px;}
	@media screen and ( max-width: 768px ){
.rightbox_po{max-width: 580px; float: right; padding: 5% 0% 5% 0%;background:none; filter: none;margin:0px;}
}
.rightbox_ul{float: left; width:48%; padding: 3% 2% 3% 8%;}

.rightbox_ul li:nth-child(1){font-size: 1.5em; font-weight: bold; color:#3b0d51; 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:#3b0d51;height:1.5px; margin-top: 6%; float: right;}
.rightbox_ul li:nth-child(2) img{width: 13%;}

.rightbox_ul li:nth-child(3){color:#3b0d51; 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:#3b0d51;height:2px; margin-top: 6%; float: left;}
.rightbox_ul li:nth-child(4) img{width: 13%; float: right;}

.rightimg{background-size: contain; background-repeat: no-repeat; width: 51%; float: right;}
.rightimg img{ padding: 3%;  width: 100%; height: 390px;}



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

.threediv{width: 32.8%; padding: 0; margin: 0; display: inline-block; vertical-align:top;}
.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: #fff; padding: 3% 0% 10% 0%; font-weight: bold;}
.threediv ul li:nth-child(4){font-size: 1em; color: #fff; line-height: 1.6em;}
.threediv ul li:nth-child(5){font-size: 1.3em; color: #fcd432; line-height: 1.6em; text-align:left;}



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

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

.title{font-size: 2.1em; font-weight: bold; border-left: 2px soild; color: #fff;}
.five{background-image: url(../images/S4.jpg) ; margin:0 auto; padding-top:20px;}
.ad-block{background-image: url(../images/S4.jpg) ; margin:0 auto; padding-bottom:20px;}
.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.1em;
	text-align: center;
	font-weight: bold;
	margin-top: 1%;
	color: #333;
}

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

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


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


.banner {margin: auto; max-width: 1160px; text-align: center; background-image: url(../images/mobile_ul_bg2.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%;border:#3b0d51 1px solid; }


.block{max-width: 1160px; margin: 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: 1199px){
.five ul li a img{  height:auto; max-height:380px;}
.leftimg img{ max-height: 440px;}
.rightimg img{ max-height: 440px;}
			}
@media screen and ( max-width: 768px){
.five ul li a img{ height:auto; max-height:360px;}
.leftimg img{ max-height: 400px;}
.rightimg img{ max-height: 400px;}
			}
@media screen and ( max-width: 550px){
.five ul li a img{ height:auto; max-height:220px;}
.leftimg img{ max-height: 250px;}
.rightimg img{ max-height: 250px;}
			}

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


.five{background-image: url(../images/S4.jpg) ; margin:0 auto; padding-top:0px; padding-bottom:2%;}
.ad-block{background-image: url(../images/S4.jpg) ; margin:0 auto; padding-bottom:0px;}

    /* ========== 共用區塊 =========== */
    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:0%;}	
.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: 60px;}
.leftimg img{ padding: 3%;  width: 100%;height:auto;}
	
.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:60px;}
.rightimg img{ padding: 3%;  width: 100%; height:auto;}

	
.threediv{width: 30.5%; padding: 0% 0.5% 3% 1.5%; margin: 0; display: inline-block;}
	
.threeimg{background: url(../images/bookbg.png); background-repeat: no-repeat;  background-size: 100%; width: 100%;}
.threeimg img{width: 100%; padding: 8% 6% 6% 6%; height:auto;}
.threediv ul{float: right; width: 100%; }
.threediv ul li:nth-child(2){font-size: 1.5em; line-height: 1.4em; color: #fcd432; font-weight: bold;text-align: center;}
.threediv ul li:nth-child(4){font-size: 1.4em; color: #fff; line-height: 1.6em;text-align: center;}	
.threediv ul li:nth-child(5){font-size: 1.5em; color: #fcd432; line-height: 1.6em; text-align: center;}
	
.des {float: left; width: 70%; padding:5px 0;}
.line {float: left; width: 30%;}
.line hr {width: 100%; float: left; margin-top: 3.5%; border-top: 0px solid #ffffff; color: #ffffff; }
.more {float: right; margin-top:4%; margin-right: 30px; width: 67px;}
	
.kv_pc{ display: none; }
.kv_m{ display: block;}
	
.five ul li a p.style1{ 

	color: #3b0d51;
}

.five ul li a p.style2{ 
	font-weight:normal;	color: #3b0d51;

}
.five ul li a span.style3{ 
	font-size: 1.5em;
	text-align: center;
	font-weight: bold;
	margin-top: 1%;
	color: #b90c5e;
}

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

	.block{ width:96%; margin:0 auto;}
	
}

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

}