body{
	margin:0px;
	padding:0px;
	background: #000 url(images/bg.png) center top;
	
	font-size: 14pt;
	font-family:"微軟正黑體","Microsoft JhengHei","儷黑 Pro","LiHei Pro Medium",Verdana, Arial, Helvetica,sans-serif;
}

a{
	text-decoration: none;
}

/***************/

.wrapper{
	width: 100%;
}
.container{
	width: 100%;
	max-width: 1200px;
	min-width: 1000px;
	margin: 0 auto;
}


/***************/

header{
	padding-bottom: 20px;
}
header .container{
	
}
header .mobile-head{
	display: none;
}

/***************/

ul.unit-row{
	width: 90%;
	list-style: none;
	padding: 0px;
	margin: 0 auto;
	margin-bottom: 10px;
	text-align: center;
}

li.unit{
	display: inline-block;
	position: relative;
	width: 4.5%;
	margin-left: 0.15%;
	margin-right: 0.15%;	
	/*background: #ccc;*/
}

.half-mode li.unit{
	width: 8.5%;
}

li.unit:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content{position: absolute;width: 100%;height: 100%;background: #fff;}
.content img{width: 100%;height: 100%;cursor: pointer;}
.content-ex{position: absolute;width: 92%;height: 92%;background: #fff;border: 2px solid #fff;}
.content-ex img{width: 100%;height: 100%;cursor: pointer;}

.unit-up1{background: #8db890;}.unit-up1h{background: #80c341;}
.unit-up2{background: #a2adc4;}.unit-up2h{background: #7590c9;}
.unit-up3{background: #d07e81;}.unit-up3h{background: #e71b22;}
.unit-up4{background: #d5a780;}.unit-up4h{background: #f5821f;}
.unit-up5{background: #a6c18d;}.unit-up5h{background: #40ac49;}
.unit-up6{background: #d4c075;}.unit-up6h{background: #f2c005;}
.unit-up7{background: #bf9eb7;}.unit-up7h{background: #bd6aaa;}
.unit-up8{background: #73b8d2;}.unit-up8h{background: #00adee;}
.unit-up9{background: #73a0be;}.unit-up9h{background: #006fba;}
.unit-up10{background: #ac94b4;}.unit-up10h{background: #8f52a1;}
.unit-up11{background: #d273ab;}.unit-up11h{background: #ec008c;}

.half-mode{
	display: none;
}
.half-mode .unit-page2{
	display: none;
}

.half-mode .page-menu{
	width: 30%;
	margin: 0 auto;
	margin-top: 30px;
}

.half-mode .page-menu .item{
	width: 40%;
	margin-left: 2.4%;
	margin-right: 2.4%;
	height: 30px;
	line-height: 30px;
	color: #cecece;
	float: left;
	text-align: center;
	background: #666;
	border-radius: 8px;
	font-size: 11pt;
	cursor: pointer;
}
.half-mode .page-menu .item-now{
	background: #999;
	color: #000;
}

h4{
	display: block;
	color: #fff;
	font-size: 14pt;
	line-height: 30px;
	margin-top: 50px;
	margin-bottom: 50px;
	text-align: center;
}
h4 img{
	height: 30px;
	margin-bottom: -8px;
	margin-right: 12px;
}

.popwin{
	background: rgba(255,255,255,0.95);
	height: 160px;
	padding-top: 40px;
	position: fixed;
	border-top:6px solid #e5007f;
	bottom: -200px;
	cursor: pointer;
	transition: all .3s ease-in-out;
}
.popwin-show{
	bottom:0px;
}

.popwin div.unit-title{
	width: 20%;
	padding-left: 15%;
	display: inline-block;
	vertical-align: top;
}
.popwin div.unit-title span.tt{
	font-size: 1.4em;
	font-weight: 600;
}
.popwin div.unit-title span.tt:before{
	content: "";
	width: 30px;
	height: 30px;
	display: inline-block;
	margin-bottom: -5px;
	margin-right: 12px;
}
#up1 span.tt:before{background: #80c341;}#up2 span.tt:before{background: #7590c9;}
#up3 span.tt:before{background: #e71b22;}#up4 span.tt:before{background: #f5821f;}
#up5 span.tt:before{background: #7fc341;}#up6 span.tt:before{background: #f2c005;}
#up7 span.tt:before{background: #bd6aaa;}#up8 span.tt:before{background: #00adee;}
#up9 span.tt:before{background: #006fba;}#up10 span.tt:before{background: #8f52a1;}
#up11 span.tt:before{background: #ec008c;}

.popwin div.unit-txt{
	width: 49%;
	padding-right: 15%;
	display: inline-block;
	vertical-align: top;
}

.ups{display: none;}

.popwin .close-btn{
	position: absolute;
	left: 0px;
	right: 0px;
	margin: 0 auto;
	width: 100px;
	bottom: 20px;
	font-size: 11pt;
	font-weight: 600;
	text-align: center;
	height: 22px;
	line-height: 22px;
	border-radius: 8px;
	border: 2px solid #e5007f;
	color: #fff;
	background: #e5007f;
}

.menu{
	width: 90%;
	margin: 0 auto;
}
.menu .item{
	width: 23%;
	margin-left: 0.5%;
	margin-right: 0.5%;
	background: #e5007f;
	height: 30px;
	line-height: 30px;
	color: #fff;
	float: left;
	text-align: center;
}
.menu .item1{
	width: 21%;
	border-radius: 8px 0 0 8px;
}
.menu .item2{
	width: 21%;
	background: #4689d1;
}
.menu .item3{
	width: 24%;
}
.menu .item4{
	width: 30%;
	background: #4689d1;
	border-radius: 0 8px 8px 0;
}

/***************/

img.p1-pic{
	display: block;
	margin: 0 auto;
}
.page1-content{
	font-size: 14pt;
	color: #fff;
	line-height: 1.8em;
	width: 80%;
	margin: 0 auto;
	margin-top: 40px;
	margin-bottom: 60px;
}
.page1-content>.page1-content-title{
	font-weight: 600;
	font-size: 1.4em;
	width: 20%;
	display: inline-block;
	vertical-align: top;
}
.page1-content>.page1-content-main{
	width: 79%;
	display: inline-block;
	vertical-align: top;
}

/***************/

.page2-content{
	font-size: 14pt;
	color: #fff;
	line-height: 1.8em;
	width: 80%;
	margin: 0 auto;
	margin-top: 40px;
	margin-bottom: 60px;
}
.page2-content>.page2-content-pic{
	width: 40%;
	display: inline-block;
	vertical-align: top;
	text-align: center;
	font-size: 0.8em;
}
.page2-content>.page2-content-main{
	width: 59%;
	display: inline-block;
	vertical-align: top;
}
.page2-content>.page2-content-main .box{
	font-size: 0.8em;
	line-height: 1.4em;
	color: #000;
	padding: 6px 12px 8px 16px;
}
.page2-content>.page2-content-main .box h3{margin-bottom: 4px;margin-top: 2px;}
.page2-content>.page2-content-main .box1{
	border-radius: 8px 8px 0 0;
	background: #6ed876;
}
.page2-content>.page2-content-main .box2{background: #fff799;}
.page2-content>.page2-content-main .box3{background: #f8b7de;}
.page2-content>.page2-content-main .box4{
	border-radius: 0 0 8px 8px;
	background: #ffe0f3;
}

/***************/

.page3-content{
	font-size: 14pt;
	color: #fff;
	line-height: 1.8em;
	width: 80%;
	margin: 0 auto;
	margin-bottom: 60px;
}
.page3-content>.page3-content-main1{
	width: 50%;
	display: inline-block;
	vertical-align: top;
}
.page3-content>.page3-content-main2{
	width: 44%;
	margin-left: 5%;
	display: inline-block;
	vertical-align: top;
	padding-top: 3em;
	line-height: 1.6em;
	font-size: 12pt;
}
.page3-content>.page3-content-main2 h5{
	margin-bottom: 0px;
	font-size: 12pt;
}

/***************/

footer{
	padding: 40px 0 40px 0;
	text-align: center;
}

/***************/

@media (max-width: 999px) {
	.container{
		min-width: 481px;
		margin: 0 auto;
	}
	.menu .item4{
		font-size: 0.7em;
	}
	
}
@media (max-width: 880px) {
	li.unit{
		width: 4.2%;
		margin-left: 0.15%;
		margin-right: 0.15%;	
		/*background: #ccc;*/
	}
}
@media (max-width: 780px) {
	.menu{
		font-size: 12pt;
		overflow: hidden;
	}
	.page1-content>.page1-content-title{
		width: 90%;
		margin-left: 5%;
	}
	.page1-content>.page1-content-main{
		width: 90%;
		margin-left: 5%;
	}
	.page2-content>.page2-content-pic{
		width: 90%;
		margin-left: 5%;
		margin-bottom: 40px;
	}
	.page2-content>.page2-content-main{
		width: 90%;
		margin-left: 5%;
	}
	.page3-content>.page3-content-main1{
		width: 90%;
		margin-left: 5%;
	}
	.page3-content>.page3-content-main2{
		width: 90%;
		margin-left: 5%;
		padding-top: 1em;
	}
}
@media (max-width: 640px) {
	
	header .normal-head{
		display: none;
	}
	
	header .mobile-head{
		display: block;
	}

	.normal-mode{
		display: none;
	}
	.half-mode{
		display: block;
	}
	
	.popwin{
		height: 240px;
		bottom:-280px;
	}
	.popwin-show{
		bottom:0px;
	}
	
	.popwin div.unit-title{
		width: 80%;
		padding-left: 10%;
		margin-bottom: 1em;
	}
	.popwin div.unit-txt{
		width: 80%;
		padding-left: 10%;
	}
	
	.menu .item{
		width: 90%;
		margin-left: 5%;
		margin-bottom: 8px;
		height: 40px;
		line-height: 40px;
		font-size: 14pt;
		float: none;
		border-radius: 8px 8px 8px 8px;
	}
	.menu .item4{
		font-size: 1em;
	}
}
@media (max-width: 480px) {

}


/***************/

.btcf:after {
    content:"";
    display:table;
    clear:both;
}