@charset "UTF-8";
* { box-sizing: border-box; }

html, body { 
	-webkit-text-size-adjust: none; 
	background: #6dc3c1; 
 	font-family: "微軟正黑體","Heiti TC","Microsoft JhengHei", sans-serif, !important;
	-webkit-font-smoothing：antialiased;
    -moz-osx-font-smoothing：antialiased;
}

#WRAPPER  div a:link, #WRAPPER  div a:visited, #WRAPPER  div a:hover {
 display:inline-block;
}/*解決文字斷行問題*/

.key-banner { text-align: center; background: url(img/main-title-bg.jpg) center top no-repeat; background-size: cover; background-color: #6dc3c1; max-height: 680px; }
.key-banner img { max-width: 1200px; min-width: 320px; width: 100%; margin: 0 auto; }
.key-banner img.d { display: block; }
.key-banner img.m { display: none; }

.key-banner2 { text-align: center; background: url(img/slice_07-bg.jpg) center top no-repeat; background-size: cover; max-height: 545px; }
.key-banner2 img { max-width: 768px; min-width: 320px; width: 100%; margin: 0 auto; }
.key-banner2 img.d { display: block; }
.key-banner2 img.m { display: none; }

.key-banner3 { text-align: center; background: url(img/slice_07-bg.jpg) center top no-repeat; background-size: cover; max-height: 835px; }
.key-banner3 img { max-width: 768px; min-width: 320px; width: 100%; margin: 0 auto; }
.key-banner3 img.d { display: block; }
.key-banner3 img.m { display: none; }

.key-banner4 { text-align: center; background: url(img/slice_07-bg.jpg) center top no-repeat; background-size: cover; }

.key-banner5 { text-align: center;}
.key-banner5 img { max-width: 768px; min-width: 320px; width: 100%; margin: 0 auto; }
.key-banner5 img.d { display: block; }
.key-banner5 img.m { display: none; }

.key-banner6 { text-align: center; background: url(img/slice_21-bg.jpg) center top no-repeat; background-size: cover; max-height: 590px; }
.key-banner6 img { max-width: 768px; min-width: 320px; width: 100%; margin: 0 auto; }
.key-banner6 img.d { display: block; }
.key-banner6 img.m { display: none; }

.key-banner7 { text-align: center; background: url(img/slice_22-bg.jpg) center top no-repeat; background-size: cover; max-height: 2908px; }
.key-banner7 img { max-width: 768px; min-width: 320px; width: 100%; margin: 0 auto; }
.key-banner7 img.d { display: block; }
.key-banner7 img.m { display: none; }

.key-banner8 { text-align: center; background: url(img/slice_23-bg.jpg) center top no-repeat; background-size: cover; max-height: 1917px; }
.key-banner8 img { max-width: 768px; min-width: 320px; width: 100%; margin: 0 auto; }
.key-banner8 img.d { display: block; }
.key-banner8 img.m { display: none; }

.key-banner9 { text-align: center; background: url(img/slice_24-bg.jpg) center top no-repeat; background-size: cover; max-height: 2910px; }
.key-banner9 img { max-width: 768px; min-width: 320px; width: 100%; margin: 0 auto; }
.key-banner9 img.d { display: block; }
.key-banner9 img.m { display: none; }


.key-banner10 { text-align: center; background: url(img/m/slice_32.jpg) center top no-repeat; background-size: cover; max-height: 150px; }
.key-banner10 img { max-width: 768px; min-width: 320px; width: 100%; margin: 0 auto; }
.key-banner10 img.d { display: block; }
.key-banner10 img.m { display: none; }


.content-text {
	margin: 0 auto;
	width: 800px;
	color: #2c2c2c;
	font-size: 16px;
	font-weight: bold;
	padding-left: 50px;
	padding-right: 50px;
}

.content-text li{
	line-height: 30px;
}

.content-text .m{
	display: block;
	list-style:disc;
	margin: 0 auto;
	width: 100%;
	font-size: 14px;
	padding-left: 30px;
}

.content-text .s{
	list-style:disc;
	display: block;
	margin: 0 auto;
	width: 100%;
	font-size: 15px;
	padding-left: 20px;
}

.content-text .ss{
	display: block;
	margin: 0 auto;
	width: 100%;
	font-size: 15px;
	padding-left: 35px;
}

.wrap { display: block; text-align: center; margin: 0 auto; max-width: 768px; width: 100%; }
.wrap:after { content: ""; display: table; clear: both; }
.wrap .box { float: left; background: #c6c6c6; }
.wrap .box:link, .wrap .box:visited { border: none; text-decoration: none; display: block; }
.wrap .box img { width: 100%; vertical-align: top; }
.wrap .box img.d { display: block; }
.wrap .box img.m { display: none; }


.wrap2 { display: block; text-align: center; margin: 0 auto; max-width: 768px; width: 100%; }
.wrap2:after { content: ""; display: table; clear: both; }
.wrap2 .box { float: left; }
.wrap2 .box:link, .wrap .box:visited { border: none; text-decoration: none; display: block; }
.wrap2 .box img { width: 100%; vertical-align: top; }
.wrap2 .box img.d { display: block; }
.wrap2 .box img.m { display: none; }

#key-banner1 { text-align: center; background: url(img/slice_06-bg.jpg) center top no-repeat; background-size: cover; background-color: #6dc3c1; max-height: 530px; }
#key-banner1 img { max-width: 1200px; min-width: 320px; width: 100%; margin: 0 auto; }


#WRAPPER{
	font-size: 14px;
	font-weight: bold;
	width: 768px;
	height: 490px;
	margin: 0 auto;
	overflow: hidden;
}

#AAA{
	width: 25%;
	height:140px;
	float: left;
	padding-top: 330px;
}


#BBB{
	width: 22%;
	height: 140px;
	float: left;
	padding-top: 330px;
}

#CCC{
	width: 25%;
	height: 140px;
	float: left;
	padding-top: 330px;
	padding-right: 20px;
}

#DDD{
	width: 28%;
	height: 140px;
	float: left;
	padding-top: 330px;
}


.anchorA {
	padding-top: 330px;
}







@media screen and (max-width: 767px) { 
  .wrap { max-width: inherit; width: auto; }
  .wrap .box { float: none; }
  .wrap .box.b4, .wrap .box.b5, .wrap .box.b6 { float: left !important; width: calc(100%/3); }
  .wrap .box img.d { display: none; }
  .wrap .box img.m { display: block; }
	
  .wrap2 { max-width: inherit; width: auto; }
  .wrap2 .box { float: none; }
  .wrap2 .box.f3 { float: left !important; width: 200%; }
  .wrap2 .box img.d { display: none; }
  .wrap2 .box img.m { float: left; display: block; width: 50%; }
  
  .content-text {
	display: block;
	margin: 0 auto;
	width: 100%;
	font-size: 16px;
	line-height: 16px;
	padding-left: 50px;
	padding-right: 45px;}
	
	#WRAPPER{
	width: 100%;
	height: 600px;
	margin: 0 auto;
	overflow: hidden;
	font-size: 16px;
	line-height: 18px;
	}
	
	
	#AAA{
	width: 100%;
	height:30px;
	float: none;
	padding-top: 180px;
}

	

#BBB{
	width: 100%;
	height: 30px;
	float: none;
	padding-top: 90px;
}

#CCC{
	width: 100%;
	height: 30px;
	float: none;
	padding-top: 100px;
}

#DDD{
	width: 100%;
	height: 140px;
	float: none;
	padding-top: 90px;
}
	
	#key-banner1 { text-align: center; background: url(img/slice_06-bg2.jpg) center top no-repeat; background-size: cover; background-color: #6dc3c1; max-height: 600px; }
	
}


@media screen and (max-width: 766px) { 
  .key-banner img.d { display: none; }
  .key-banner img.m { display: block; } 
  .key-banner2 img.d { display: none; }
  .key-banner2 img.m { display: block; } 
  .key-banner3 img.d { display: none; }
  .key-banner3 img.m { display: block; } 
  .key-banner6 img.d { display: none; }
  .key-banner6 img.m { display: block; }
  .key-banner7 img.d { display: none; }
  .key-banner7 img.m { display: block; }
  .key-banner8 img.d { display: none; }
  .key-banner8 img.m { display: block; }
  .key-banner9 img.d { display: none; }
  .key-banner9 img.m { display: block; }
  
  .content-text {	
	width: 100%;
	padding-top: 7px;
	padding-left: 1em;
	padding-right: 1em;
	font-size: 1.3em;
	line-height: 1.3em;
	-webkit-text-size-adjust:none; }	
	
   .content-text-s {
	margin: 0 auto;
	width: 90%; 
	padding-bottom: 10px;}
	
#WRAPPER{
	width: 100%;
}
	
 #AAA{
	width: 100%;
	height:100px;
	float: none;
}


#BBB{
	width: 100%;
	height: 100px;
	float: none;
}

#CCC{
	width: 100%;
	height: 100px;
	float: none;
}

#DDD{
	width: 100%;
	height: 100px;
	}
}