@charset "utf-8";
@import url("reset.css");
/* CSS Document */
*{
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
}
html{ 
	font-family: "微軟正黑體",Arial,sans-serif;
	-webkit-text-size-adjust: none;
}
body{
	background-color: #ffffff;
}
.text-canter {
	text-align: center;
	}
0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
}

/* header */
#header{
	width: 100%;
	display : inline;
}
#header .contact {
	padding: 10px 0 15px;
	border-bottom: 5px solid #003F44;
	background: rgba(18, 60, 61, .5); 
	}
#header .contact img {
	width: 20px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: -4px;
	}
.contactA, .contactT{display : inline;}

@media (max-width:480px){
	#header{width: 100%;}
	#header .contact {padding: 10px 0 5px;}
	.contactA, .contactT{display : block;text-align: center; margin-bottom: 5px; font-size:10px;}
}
/* wrapper */
.wrapper {
	width: 98%;
	margin: 0 auto ;
	}
@media (max-width:1280px){
	.wrapper {width: 100%;}
	}
/* logoWrap */
.logoWrap {
	padding: 30px 5px;
	text-align: center;
	margin: auto 0;
	}
.logoWrap img {
	max-width: 500px;
	width: 100%;
		}
@media (max-width:720px){
	.logoWrap img {width: 80%;}
	.logoWrap h2 {font-size:12pt;}
}
/* topWrap */
.topWrap {
	text-align:center;
	padding: 20px 0 50px;
	}
.topWrap h3{
	color: #FFD700;
	font-size: 40px;
	}
.topWrap h3 small{
	color: #80FFFF;
	font-size: 25px;
	}
.topWrap h4{
	color:  #EFEFEF;
	font-size: 19px;
	line-height: 1.5;
	margin: 20px;
	text-shadow: 2px 2px 3px #232323;
	}
/* bannerWrap */
.bannerWrap {
    width: 100%;
    background:url(../images/ibg.png) no-repeat bottom;
	padding: 1em 0;
    box-sizing: border-box;
    position: relative;
}

.bannerWrap .block{
	padding: 10px;
	}
.bannerWrap h3{
	color: #D1E0E0;
	font-size: 25px;
	line-height: 2;
	padding-left:20px;
	text-align: center;
	}
.bannerWrap h3 img{width: 20%;}
.bannerWrap a{
	text-decoration:none;
	}

.bannerWrap p{
	text-align:left;
	width:70%;
	padding-left:30px;
	color: #FFF8E7;
	font-size: 19px;
	line-height: 1.8;
	font-weight: bold;
	}
.bannerWrap a span.date{
	text-align:left;
	padding-right:20px;
	color: #EFEFEF;
	font-size: 19px;
	line-height: 1.8;
	}
.bannerWrap .moreBtn{
	color:#D1E0E0;
	font-size:21px;
	text-align:right;
	width:80%;
	padding-right:5px;
	}
.moreBtn a{	
		text-decoration:none;
		color:#EFE8D8;
			}
.moreBtn a:hover{
	color:#FB885C;
	}
@media (max-width:480px){
.bannerWrap p{
	text-align:left;
	width:100%;
	padding-left:30px;
	
	font-size: 19px;
	line-height: 1.8;
	}
.bannerWrap .moreBtn{
	
	font-size:21px;
	text-align:right;
	width:100%;
	padding-right:5px;
	}
.bannerWrap a span.date{
	text-align:left;
	padding-right:20px;
	color: #FFFFE0;
	font-size: 13px;
	line-height: 1.8;
	}
}




@media (max-width:850px){
	.bannerWrap {background: none;}
	.bannerWrap img{display:block;width: 100%;}
	.bannerWrap h3{text-align:center; padding: 0;}
	.bannerWrap p{font-size: 11pt;}
	.bannerWrap h3 img{width: 80%; margin:0 auto;}
	
	}


/* processWrap */
.processWrap {
	width: 100%;
	margin: 50px 0;
	}
.processWrap .block {
	float: right;
	width: 43%;
	box-sizing: border-box;
    padding: 4em 0;
	}
.processWrap h3 {
	color: #80FFFF;
	font-size: 25px;
	text-align:center;
	margin-bottom: 20px;
	}

.processWrap h5 {
	color: #FFFFFF;
	text-align:center;
	font-size: 19px;
	line-height: 1.5;
	}
.processWrap .moreBtn{
	color:#EFEFEF;
	font-size:17px;
	text-align:right;
	padding-right:5px;
	}
.processWrap .moreBtn a{	
		text-decoration:none;
		color:#80FFFF;
			}
.processWrap .moreBtn a:hover{
	color:#FB885C;
	}	
	
	
/*==banner3==*/
.bannerWrap3{ float: left;width:55%; box-sizing:border-box; position:relative;padding:10px 10px;background-color: #D1E0E0;}
.bannerWrap3:after{ position:absolute; left:0; bottom:-20px; width:100%; background:url(../images/banner_hide.png) no-repeat; z-index:10; background-size:cover;}
.bannerWrap3 ul{ position:relative; z-index:5;}
.bannerWrap3 img{ width:100%;}
@media (max-width:1920px){
	.processWrap { height:550px;}
	}
@media (max-width:1323px){
	.processWrap {}
	}
@media (max-width:1280px){
	.processWrap {}
	}
@media (max-width:1030px){
	.processWrap {margin: 30px 0 30px 0;}
	.processWrap .block {float: none;width: 100%;padding: 50px 25px;}
	.processWrap h3 {font-size: 16pt;}
	.processWrap h4 {margin-bottom: 10px}
	.processWrap h5 {font-size: 15pt; padding-bottom: 30px;}
	.bannerWrap3{ float: none;width:100%;padding:10px 10px;}
	}
@media (max-width:980px){
	.processWrap {}
	}
@media (max-width:800px){
	.processWrap {}
	}
@media (max-width:728px){
	.processWrap {height: 750px;}
	
	}
@media (max-width:480px){
	.processWrap {}
	}	
@media (max-width:360px){
	.processWrap {}
	}
@media (max-width:320px){
	.processWrap {}
	}



/* comming */
.comming {
	width: 100%;
	clear:both;
	padding: 5em 5px;
	}
.comming h4{
	color: red;
	text-align:center;
	font-size: 18pt;
	}
@media (max-width:580px){
	.comming {padding: 50px 10px;}
	.comming h4{font-size: 13pt;line-height:1.8;}
	}
/* infoWrap */
.infoWrap{
	padding: 20px 0 100px;;
	position: relative;
	}
.map {
	width: 100%;
	float: left;
	padding: 10px 20px 10px 10px;
	line-height: 1.5;
	margin-bottom: 30px;
	}
.map h3{
	color: #80FFFF;
	text-align:center;
	padding-top: 23px;
	}
.map h4{
	color: #FFF8E7;
	text-align:center;
	padding-bottom:17px;
	font-size: 23px;
	}
.map h3 img{width: 20%;}
.map img{
	width: 100%;
	margin-top: -5px;
	z-index: -1;
	}
.fb-block{
	/*margin: 10px 0;
	float: right;
    margin: 0 auto;
    width: 35%;
    box-sizing: border-box;*/
	}
.fb-page{
	/*width: 50%;
	float: right;
	padding-left: 100px;*/
	}
@media (max-width:1920px){
.infoWrap{ height:550px;
	}
	}
@media (max-width:1323px){
.infoWrap{
	}
	}
@media (max-width:1280px){
.infoWrap{
	}
	}
@media (max-width:1024px){
	.map {width: 100%;padding: 10px 10px 10px 10px;margin: 0 auto 30px;}
	.fb-block {
		/*float: none;
		margin: 0 auto;
		width: 50%;
		box-sizing: border-box;
	}
	.fb-page{/*width: 100%;padding-left:auto;margin: 30px auto;*/}
.infoWrap{
	}
	}
@media (max-width:980px){
.map h4{font-size: 21px;}
.infoWrap{height: 850px;}
	}
@media (max-width:800px){
.infoWrap{
	}
	}
@media (max-width:728px){
.map h3 img{width: 80%;}
	}
@media (max-width:480px){
	/*.fb-block {
		width: 100%;
		box-sizing: border-box;
		}*/
.infoWrap{margin-top: 70px;
	}

	}
@media (max-width:360px){
.infoWrap{
	}
	}
@media (max-width:320px){
.infoWrap{
	}
	}

/* footer */
#footer{
	clear:both;
	color:#FFFFFF;
	text-align:center;
	background-color: #2a6d93;
	padding:5em 0;
	line-height: 2;
	
	}
#footer h2{
	font-size: 16pt;
	margin: 30px 0;
	}
@media (max-width:650px){
	#footer{ padding: 2em 5px 1em;margin-top: 0px;}
	#footer h2{	font-size: 13pt;}
	}
	
/*==banner2==*/
.bannerWrap2{ width:100%; box-sizing:border-box; position:relative;margin-top: 50px;}
.bannerWrap2:after{ position:absolute; left:0; bottom:-20px; width:100%; height:125px; background:url(../images/banner_hide.png) no-repeat; z-index:10; background-size:cover;}
.bannerWrap2 ul{ position:relative; z-index:5;}
.bannerWrap2 img{ width:100%;}

.bannerWrap2 .text {
	position: absolute;
	width:100%;
	bottom: 0;
	padding:20px;
	z-index:10;}
.bannerWrap2 .text h3{
	color:#FFFFFF;
	font-size: 16pt;
	text-align:center;
	text-shadow: 2px 2px 3px #232323;
	}
@media (max-width:580px){
	.bannerWrap2 .text {padding:10px;}
	.bannerWrap2 .text h3{font-size: 12pt;}
	}

/*==Specialty==*/
.specWrap{ width:100%; position:relative;} 
.specWrap:after{ content:""; position:absolute; right:80px; bottom:0; width:170px; height:110px; background:url(../images/img_bg01.png) no-repeat;}
.specWrap .wrap{ padding:30px 0 80px 0; text-align:center;}
.specWrap .specBox{ margin-top:45px;}
.specWrap .specBox ul{ margin:0; overflow:hidden;}
.specWrap .specBox ul li{ display:inline-block; float:left; width:25%; box-sizing:border-box; padding:0 18px;}
.specWrap .specBox ul li .itemBox0{ width:100%; box-sizing:border-box;  background:#72C1D2;}
.specWrap .specBox ul li .itemBox0 .imgBox img{ width:100%; padding-bottom:60px;}
.specWrap .specBox ul li .itemBox0 .iconBox{ width:50px; height:50px; margin:0 auto; border-radius:50%; position:relative;}
.specWrap .specBox ul li .itemBox0 .iconBox .icon{position:absolute; left:50%; top:50%; -moz-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); transition:all 0.2s ease;}
.specWrap .specBox ul li .itemBox0 .iconBox .icon h3{ font-size:17px; color:#FFF; font-family:微軟正黑體; width:95px;}
.specWrap .specBox ul li .itemBox0 .iconBox:hover .icon{ top:45%;}
.specWrap .specBox ul li .itemBox0 .txtBox{ margin-top:60px; padding:0 5px;}
.specWrap .specBox ul li .itemBox0 .txtBox p{ font-size:14px; color:#666; margin-top:10px; text-align:justify;}

.specWrap .specBox ul li .itemBox1{ width:100%; box-sizing:border-box; background:#FB885C;}
.specWrap .specBox ul li .itemBox1 .iconBox1{ width:200px; height:200px; margin:0 auto; border-radius:50%; position:relative;}
.specWrap .specBox ul li .itemBox1 .iconBox1 .icon{position:absolute; left:50%; top:50%; -moz-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); transition:all 0.2s ease;}
.specWrap .specBox ul li .itemBox1 .iconBox1 .icon h3{ font-size:17px; color:#FFF; font-family:微軟正黑體;}
.specWrap .specBox ul li .itemBox1 .iconBox1:hover .icon{ top:45%;}
.specWrap .specBox ul li .itemBox1 .txtBox1{ margin-bottom:60px; padding:0 5px;}
.specWrap .specBox ul li .itemBox1 .txtBox1 p{ font-size:14px; color:#666; margin-top:10px; text-align:justify;}
.specWrap .specBox ul li .imgBox1{ vertical-align:baseline;}
.specWrap .specBox ul li .imgBox1 img{ width:100%;}

.specWrap .specBox ul li .itemBox2{ width:100%; box-sizing:border-box;  background:#1CC7A3;}
.specWrap .specBox ul li .itemBox2 .imgBox img{ width:100%; padding-bottom:60px;}
.specWrap .specBox ul li .itemBox2 .iconBox{ width:50px; height:50px; margin:0 auto; border-radius:50%; position:relative;}
.specWrap .specBox ul li .itemBox2 .iconBox .icon{position:absolute; left:50%; top:50%; -moz-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); transition:all 0.2s ease;}
.specWrap .specBox ul li .itemBox2 .iconBox .icon h3{ font-size:17px; color:#FFF; font-family:微軟正黑體; width:95px;}
.specWrap .specBox ul li .itemBox2 .iconBox:hover .icon{ top:45%;}
.specWrap .specBox ul li .itemBox2 .txtBox{ margin-top:60px; padding:0 5px;}
.specWrap .specBox ul li .itemBox2 .txtBox p{ font-size:14px; color:#666; margin-top:10px; text-align:justify;}

.specWrap .specBox ul li .itemBox3{ width:100%; box-sizing:border-box;  background:#EFD252;}
.specWrap .specBox ul li .itemBox3 .iconBox1{ width:200px; height:200px; margin:0 auto; border-radius:50%; position:relative;}
.specWrap .specBox ul li .itemBox3 .iconBox1 .icon{position:absolute; left:50%; top:50%; -moz-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); transition:all 0.2s ease;}
.specWrap .specBox ul li .itemBox3 .iconBox1 .icon h3{ font-size:17px; color:#FFF; font-family:微軟正黑體;}
.specWrap .specBox ul li .itemBox3 .iconBox1:hover .icon{ top:45%;}
.specWrap .specBox ul li .itemBox3 .txtBox1{ margin-bottom:60px; padding:0 5px;}
.specWrap .specBox ul li .itemBox3 .txtBox1 p{ font-size:14px; color:#666; margin-top:10px; text-align:justify;}
.specWrap .specBox ul li .imgBox1 img{ width:100%;vertical-align:sub;}

@media (max-width:1280px){
.specWrap:after{ right:0;}
}

@media (max-width:1200px){
.specWrap .specBox ul li .itemBox .iconBox{ width:200px; height:200px;}	
}

@media (max-width:1034px){
.specWrap .specBox ul li .itemBox .iconBox{ width:200px; height:200px;}
.specWrap .wrap{ padding:30px 30px 80px;}
.specWrap .specBox ul{ margin:0;}

}


@media (max-width:980px){

}
@media (max-width:800px){
.specWrap .specBox ul li{  width:50%; margin-bottom:30px;}
.bannerWrap .moreBtn{ width:100%;}
}

@media (max-width:768px){
.specWrap .specBox ul li{ width:50%; padding:0 25px 35px;}
.specWrap .specBox ul li .itemBox .iconBox{ margin:0 auto;}
.specWrap .specBox ul li .itemBox .txtBox p{ height:60px; overflow:hidden; text-overflow:ellipsis;}

}


@media (max-width:640px){
}

@media (max-width:480px){
.specWrap .wrap{ padding:30px 10px 80px;}
.specWrap .specBox{ margin-top:20px;}
.specWrap .specBox ul li{ padding:0 10px 20px; width:100%;}


}

@media (max-width:420px){
.specWrap .specBox ul li .itemBox .iconBox{ width:180px; height:180px;}

}

@media (max-width:375px){

.specWrap .specBox ul li{ padding:0 5px 20px;}
.specWrap .specBox ul li .itemBox .iconBox{ width:150px; height:150px;}
.specWrap .specBox ul li .itemBox .iconBox .icon img{}
.specWrap .specBox ul li .itemBox .txtBox{ margin-top:10px;}
.specWrap .specBox ul li .itemBox .txtBox h3{ font-size:20px;}
.specWrap .specBox ul li .itemBox .txtBox p{ margin-top:5px; font-size:13px; line-height:1.4; height:55px;}

}

@media (max-width:320px){
.specWrap .wrap{ padding:30px 10px 50px;}
.specWrap .specBox ul li .itemBox .iconBox{ width:130px; height:130px;}
.specWrap:after{ width:85px; height:55px; background-size:cover;}


}

/*dataWrap*/
.dataWrap .leftBox{
	background-color:#72C1D2;
	width:31.5%;
	float:left;
	margin-left:12px;
	margin-right:15px;
	height:500px;
	}

.dataWrap .midBox{
	background-color:#FB885C;
	width:31.5%;
	margin-right:15px;
	/*display:inline-block;
	clear:both;*/
        float:left;
	height:500px;
	}

.dataWrap .rightBox{
	background-color:#EFD252;
	width:31.5%;
	display:inline-block;
	clear:both;
	height:500px;

	}
.imgWrap{
	text-align:center;
	margin:0 auto;
	padding-top:20px;
}
.textWrap p{
	text-align:center;
	font-size:17px;
	color:#FFF;
	padding:5px 0;
	}
.readmoreBtn{ text-align:center; margin-bottom:20px;}
.readmoreBtn a{ display: inline-block; font-size:15px; color:#fff; background:#1CC7A3; padding:5px 20px;border-radius:6px; transition:all 0.4s ease;}
.readmoreBtn a:hover{ background:#fff; text-decoration:none; border:2px #1CC7A3 solid; color:#1CC7A3;}
@media (max-width: 1920px) {
.dataWrap {
	margin-bottom:20px;
	}

}
@media (max-width: 1323px) {
.dataWrap .leftBox{
	}

.dataWrap .midBox{
	}

.dataWrap .rightBox{
	}

}
@media (max-width: 900px) {
.dataWrap .leftBox{
	}

.dataWrap .midBox{
	}

.dataWrap .rightBox{
	}

}

@media (max-width: 800px) {
.dataWrap .leftBox{
	width:31%;
	}

.dataWrap .midBox{
	width:31%;
	}

.dataWrap .rightBox{
	width:31%;
	}
}
@media (max-width: 768px) {
}	
@media (max-width:480px){
.dataWrap .leftBox{
	width:90%;
	margin-left:20px;
	}
.dataWrap .midBox{
	width:90%;
	margin-left:20px;
	margin-top:20px;
	}
.dataWrap .rightBox{
	width:90%;
	margin-left:20px;
	margin-top:20px;
	margin-bottom:30px;
	}
}

@media (max-width: 360px) {
.dataWrap .leftBox{
	width:90%;
	}

.dataWrap .midBox{
	width:90%;
	}

.dataWrap .rightBox{
	width:90%;
	}
}