header { text-align: center; overflow: hidden; }

header h1 { position: absolute; padding: 10px 0 0 0; width: 100%;text-align: center;   z-index: 3 }
header h1 img { width: auto; }
header h1 .pcUse { display: inline-block; }
header h1 .mobileUse { display: none; }

header .layerContent { width:100%;}
header .layerContent img{width:100%;}
header .layerContent .bgCity {position: absolute; z-index: 2;bottom:-150px;top:auto!important; margin-left:-10%;}
header .layerContent .bgCloud {position: absolute; margin-top: -2%; margin-left: -5%;  z-index: 1; background: rgba(0,0,0,0.5)}

nav { position: -webkit-sticky; position:sticky;top:0; text-align: center; background: #065093;box-shadow: 0 4px 2px 0px rgba(0,0,0,0.1); z-index: 99 }
nav>ul { text-align:center; }
nav>ul li { display: inline-block; padding: 0 1%;}
nav>ul li a,
nav>ul li a:link,
nav>ul li a:visited { font: 20px/55px "arial","微軟正黑體"; color: #fff }

nav ul li.now { background: #fff; color: #545454 }
nav ul li.now a,
nav ul li.now a:link,
nav ul li.now a:visited { color: #545454 }

nav .archBase { padding: 5px 0; background: #fff }
nav .archBase a { padding: 0 10px;  font: 16px/24px "arial","微軟正黑體"; color: #545454 ; cursor: pointer;}
nav>ul>li.mobileUse { display: none; }


.bn{width: 70%;margin: 20px auto;text-align: center;background:#fcd55c;border-radius: 20px;text-align: center;padding: 30px 20px;overflow:hidden;position: relative;}
.bn img{max-width: 968px;width: 100%;z-index: 5;position: relative;}
.bn img.m{display: none;}
.information{width: 80%;margin: 20px auto;background: rgba(0,0,0,0.8);padding: 20px;border-radius: 30px;z-index: 5;position: relative;}
.informationTitle{text-align: center; font: bold 30px/1.4 "arial","微軟正黑體"; color:#fcd55c;/*border-bottom: 1px solid #FFF;*/;cursor: pointer;}
.informationTitle span{background: #FFF;color:#000;font: 20px/2 "arial","微軟正黑體";border-radius: 20px;padding: 5px 10px;margin-left: 3px;text-align: center;}
.informationText{text-align: left; color:#FFF;font:16px/1.4 "arial","微軟正黑體";margin: 10px auto;display: none; word-break: break-all;}
.moreBtn{z-index: 5;position: relative;}
.moreBtn a {color:#da1f54;font: bold 28px/1.4 "arial","微軟正黑體";}
.moreBtn a span{background: #da1f54;color:#FFF;width: 40px;height: 40px;display: inline-block;border-radius: 99em; font: bold 24px/1.6 "arial","微軟正黑體";}
.bn::before{content: "";position: absolute;left: -20px;top:0;background: url(../images/01.png) center top no-repeat;width:206px;height: 308px;z-index: 0;}
.bn::after{content: "";position: absolute;right: -20px;bottom: 0;background: url(../images/02.png) center top no-repeat;width:190px;height: 218px;z-index: 0;}



.repeatBg { padding:20px 0; background: url(../images/repearBg2.jpg) center top repeat; }
.contentBase { margin:0 auto 0 auto; padding: 20px; width: 1200px; background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.5) }

/*C23 use*/
.contentBase .carrier {  width:100%; margin: 0; padding: 0 0 20px 0; height: auto;}
.contentBase .carrier .box-head ,
.intro-anchors { display: none; }
.contentBase .carrier ul {margin: 40px auto 40px auto; width: 100%;  }
.contentBase .carrier ul li { position: relative; width: 100%; margin: 20px 0 0px 0; text-align: left; letter-spacing: 0 ;  border-bottom: 1px dashed #aaa}
.contentBase .carrier ul li a {font:16px/28px "arial","微軟正黑體";color: #545454;}
.contentBase .carrier ul li a strong {font: bold 22px/28px "arial","微軟正黑體"; display: block; color: #dc3a39 }
.contentBase .carrier ul li em { position: absolute;bottom: 0; right: 0;font: bold 16px/28px "arial","微軟正黑體"; color: #dc3a39; }
.contentBase .carrier ul li em span {font: bold 22px/28px "arial","微軟正黑體";}
.contentBase .carrier h4 {  margin: 0; padding: 0 ;font: bold 22px/40px "arial","微軟正黑體"; color: #fff; text-align: center; background: #4fabed}
.contentBase .carrier ul li::after {content: "立即訂購"; display: block; position: absolute; bottom: -20px; right: 0; padding: 2px 10px 2px 10px; border-radius: 0 0 10px 10px; border-bottom:1px dashed #555; border-left:1px dashed #555; border-right:1px dashed #555;}



@media only screen and (max-width: 1300px) {
.bn{width: 90%;

}

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

header h1 img { width: 95% }
.contentBase {  width: 90%; }

}


@media only screen and (max-width: 768px){
	header { height: auto; }
	header h1 { position: static; padding: 0; }
	header h1 img { display: none }
	header h1 .mobileUse { display: block; width: 100% }
	header .layerContent { display: none }
	.mobileUse a {  }
 	nav { background:  #426fee }
	nav>ul li { display: block; }
	nav>ul> .mobileUse { display:block;    }
	nav>ul> .mobileUse > div { display: none }
	nav>ul> .mobileUse >  a { display: block; font: 20px/55px "arial","微軟正黑體"; color: #fff;background: #426fee }

	

	nav .archBase { width: 100%; overflow:hidden; background: #efefef}
	nav .archArea { width: auto;overflow-y:auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;}
	nav .archArea  a {white-space:nowrap;}


	.repeatBg { padding:0px 0; }
	.contentBase {  width: 100%; }
	.contentBase .carrier ul li { padding-bottom: 10%; }

	.bn{width: 90%;padding: 30px;text-align: center;}
	.bn img {max-width: 604px;width: 80%;margin: 0 auto;}
	.bn img.pc{display: none;}
	.bn img.m{display: block;}




}

@media only screen and (max-width: 500px){
.information {width:100%;padding: 10px;margin: 20px auto;}
.bn img {max-width: 604px;width: 100%;margin: 0 auto;}

.moreBtn a {color:#da1f54;font: bold 24px/1.4 "arial","微軟正黑體";}
.moreBtn a span{background: #da1f54;color:#FFF;width: 35px;height: 35px;display: inline-block;border-radius: 99em; font: bold 20px/1.6 "arial","微軟正黑體";}


}

h5{text-align: center;  font-size: 28px; font-weight: bold; letter-spacing: 0.2em; padding: 10px 0; }

hr{border-top: solid 2px; margin: 20px 0;}