.wow{animation:fadeIn 1.5s both;-webkit-animation:fadeIn 1.5s both;animation-duration:1s;-webkit-animation-duration:1s}
#articleInfo16 .itemBox{width:1280px;margin:auto;padding:0px 0 0px;overflow:hidden;position:relative}
#articleInfo16 .item{overflow:hidden;position:relative;margin:90px 0 40px;background-color: #f4f4f4;display:flex;align-items:center}
#articleInfo16 .item > div{float:left;width:50%;animation-name:fadeInLeft;-webkit-animation-name:fadeInLeft}
#articleInfo16 .sstitle{text-align:center;font-size:21px;color:#426f35;font-weight:600;letter-spacing:0.5px}
#articleInfo16 .item .photo{overflow:hidden}
#articleInfo16 .item .photo{position:relative;padding-bottom:34.25%;padding-top:90px;height:0;overflow:hidden}
#articleInfo16 .item .photo iframe,#articleInfo16 .item .photo object,#articleInfo16 .item .photo embed{position:absolute;top:0;left:0;width:100%;height:100%}
#articleInfo16 .item .photo img{width:100%}
#articleInfo16 .item:first-child .info{}
#articleInfo16 .item .info{width:44%;animation-name:fadeInRight;-webkit-animation-name:fadeInRight;float:none;position:absolute;right:10px;padding:20px}
#articleInfo16 .ssicon{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:20px 0 50px}
#articleInfo16 .ssicon a{width:32%;text-align:center;padding:10px 0;margin:6px;color:#333333;background-color:#f1f1f1;margin-bottom:10px;font-weight:600}
#articleInfo16 .item .info h5{padding:10px 15px;border-top:2px #000 solid;border-bottom:1px #000 solid;font-size:14px;color:#444}
#articleInfo16 .pagetitle{position:relative;margin-bottom:12px;font-family:'Marcellus',serif;color:#f0b7a4;font-size:40px;font-weight:500;letter-spacing:0px;line-height:150%;text-align:inherit}
#articleInfo16 .item .info h3{padding:0px 0 5px;font-size:22px;color: #0e0e0e;font-weight:300;letter-spacing:3px}
#articleInfo16 .item .info article{text-align:left;line-height:170%;margin:0 20px;padding:0px 0px 0 40px;border-left:1px solid #ffffffad}
ol.txxxtBox{padding:0 0 0 30px}
ol.txxxtBox li{width:100%;line-height:1.8;display:list-item;padding-left:9px;margin:0;list-style:decimal;font-family:'Playfair Display','Noto Sans SC',serif}
.btnWrap .btn{display:inline-block;padding: 10px;line-height:38px;font-size:14px;color:#3a3a3a;text-align:center;background-color:#ffffff;margin-right:5px;margin-bottom:10px;border-radius:45px;font-family:'Marcellus',serif}
#articleInfo16 .item .info article span a,#articleInfo16 .item .info article span{font-weight:300;font-size:15px;display:block;color:#646464}
#articleInfo16 .item .info article img{width: 40px;}
.btnWrap a.btn:hover{color:#fff;background-color:#f0b7a4}
.btnWrap a.btn:hover img{    -webkit-filter: contrast(0) brightness(150%);
    filter: contrast(0) brightness(200%);}
.btnWrap{display:flex;flex-wrap:wrap}
#articleInfo16 .item .info article span{
    display: flex;
    flex-direction: column;
}
.comlist{padding:10px 0 20px;display:flex;flex-direction:column}
.comlist li{display:inline-flex;align-items: baseline;margin-bottom:5px}
.comlist li b{margin-right:10px;vertical-align:baseline;display:flex;align-items:center}
.comlist li b i{width:20px;text-align:center;margin-right:0px;color:#c3c3c3}
.comlist li span{vertical-align:baseline}



.mapContainer,.mapContainer::before,.descriptionBox,.getHereBox,.trafficList>li,.serviceBox .Txt{box-sizing:border-box}
.morningBg .trafficBox .titleBox,.morningBg .serviceBox .Txt{background-color:#f4f4f4}
.morningBg .mapContainer::before,.morningBg .trafficBox::before,.morningBg .serviceBox .Img::before{background-color:#f29901}
.morningBg .trafficList>li::before{box-shadow:inset 0 0 0 2px #f29901,inset 0 0 0 10px #f4f4f4,inset 0 0 0 12px #f29901,inset 0 0 0 15px #f4f4f4}
.morningBg .mainArea::before{background-image:linear-gradient(to right,#f29700 0,#f0d126 100%)}
.morningBg .getHereBox,.morningBg .serviceBox .titleBox{background-image:linear-gradient(to top,#f29700 0,#f0d126 100%)}
.morningBg .trafficList .title{border-bottom-color:#e3e3e3}
.nightBg .trafficBox .titleBox,.nightBg .serviceBox .Txt{background-color:#e8e8e8}
.nightBg .mapContainer::before,.nightBg .trafficBox::before,.nightBg .serviceBox .Img::before{background-color:#594b81}
.nightBg .trafficList>li::before{box-shadow:inset 0 0 0 2px #594b81,inset 0 0 0 10px #e8e8e8,inset 0 0 0 12px #594b81,inset 0 0 0 15px #e8e8e8}
.nightBg .mainArea::before{background-image:linear-gradient(to right,#163760 0,#594b81 100%)}
.nightBg .getHereBox,.nightBg .serviceBox .titleBox{background-image:linear-gradient(to top,#163760 0,#594b81 100%)}
.nightBg .trafficList .title{border-bottom-color:#d6d6d6}
.mainArea{padding-bottom:150px}
.bannerIntro{max-width:220px;margin-top:20px}
.topBox{position:relative;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end;padding-top:110px}
.topBox .mapContainer::before{left:-15px;bottom:-20px;transition-delay:.7s}
.mapContainer{position:relative;z-index:1}
.mapContainer::before{content:'';position:absolute;left:0;bottom:0;z-index:-1;width:calc(100% - 15px);height:100%}
#mapBox{width:700px;height:440px}
.descriptionBox{position:relative;z-index:2;padding-top:230px;padding-left:75px;padding-bottom:60px;letter-spacing:1px;line-height:1.6}
.descriptionBox h1{margin-bottom:15px;font:400 17px "Noto Serif TC",serif;color:#333}
.getHereBox{position:absolute;top:0;left:-60px;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:180px;height:180px;padding-left:20px;font:400 24px/1.4 "Noto Serif TC",serif;color:#f4f4f4;text-transform:uppercase;background-position:50%;background-repeat:no-repeat;pointer-events:none}
.trafficBox{position:relative;z-index:1;margin-top: 20px;margin-bottom:65px;padding-top:65px;padding-bottom:100px}
.trafficBox::before{height:100%;transition-delay:.7s}
.trafficBox::before{content:'';position:absolute;top:0;left:50%;z-index:-1;width:2px;height:0;margin-left:-1px;transition:2s ease-out;height:100%;transition-delay:.7s;background-color: #f0b7a4;}
.trafficBox .titleBox{padding-top:20px;padding-bottom:20px;text-align:center;background-color: #ffffff;width:200px;margin:auto}
.trafficBox .titleBox h2{text-align:center;font-size: 20px;color: #666;font-weight: 300;line-height: 1.4;letter-spacing: 8px;}
.serviceBox .titleBox em,.trafficBox .titleBox em{font-style:initial;position: relative;margin-bottom: 12px;font-family: 'Marcellus', serif;color: #f0b7a4;font-size: 40px;font-weight: 500;letter-spacing: 3px;line-height: 150%;text-align: inherit;}
.trafficList{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;max-width:920px;margin-left:auto;margin-right:auto}
.trafficList.trafficList,.trafficList.trafficList ul{list-style:none}
.trafficList.trafficList{padding-left:0}
.trafficList.trafficList ul{padding-left:1em;}
.trafficList.trafficList ul li{width:88%;font-size:16px;opacity:0.7}
.trafficList.trafficList ul li::before{content:'';position:absolute;top:10px;left:-14px;z-index:1;width:6px;height:6px;background-color:#d5d5d5;border-radius:50%}
.trafficList.trafficList ul li+li{margin-top: 3px;}
.trafficList>li::before{content:'';position:absolute;top:0;left:5px;z-index:1;width:30px;height:30px;border-radius:50%;box-shadow: inset 0 0 0 2px #f0b7a4, inset 0 0 0 10px #ffffff, inset 0 0 0 12px #f0b7a4, inset 0 0 0 15px #ffffff;}
.trafficList li{position:relative;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
.trafficList .title{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-bottom:20px;padding-bottom:10px;font-weight:400;font-size: 20px;color: #f0b7a4;border-bottom:1px solid #dadada;letter-spacing:1px}
.trafficList .csTitle{font-size:18px;font-weight:400;margin-bottom:10px;letter-spacing: 1.5px;color: #666;}
.trafficList .title img{margin-right:10px}
.serviceBox{position:relative;max-width:1280px;margin-left:auto;margin-right:auto;margin-bottom:20px;margin-top:20px}
.serviceBox::before{top:-20px;right:-15px;transition-delay:1s}
.serviceBox .Img{position:relative;z-index:1;animation-name:fadeInRight;-webkit-animation-name:fadeInRight}
.serviceBox .Img::before{content:'';position:absolute;top:0;right:0;z-index:-1;width:calc(100% - 15px);height:100%}
.serviceBox img{display:block;max-width:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.serviceBox .Txt{padding:40px 30px;line-height:1.6;letter-spacing:1px;animation-name:fadeInLeft;-webkit-animation-name:fadeInLeft}
.serviceBox .Txt a{font-family:"Noto Serif TC",serif}
.serviceBox .titleBox{position:absolute;top:-100px;right:0;z-index:11;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:160px;height:160px;margin-bottom:0;color:#fff}
.serviceBox .titleBox{background-image:linear-gradient(to top,#ee7500 0,#ee7500 100%)}
.serviceBox .titleBox svg{width:15px;height:26px;margin-bottom:10px;fill:#fff}
.serviceBox .titleBox h2{font-size:19px;font-weight:400;letter-spacing:2px}





@media screen and (max-width:1360px){
	#articleInfo16 .item .info{margin:30px 0 0 3%;width:40%;animation-name:fadeInRight;-webkit-animation-name:fadeInRight;position:absolute;top:calc(50% - 150px);right:32px}
	#articleInfo16 .item > div{width:53%}
	#articleInfo16 .pagetitle{font-size:36px;margin:20px}
	#articleInfo16 .item .info article{margin:0 20px;padding:0px 0px 0 20px}
	#articleInfo16 .item{margin:0px 0 50px;padding:0 0 0px}
}
@media screen and (max-width:1280px){
	#articleInfo16 .itemBox{width:100%;padding:28px 0 0px}
	#articleInfo16 .item > div{width:100%}
	#articleInfo16 .item:last-child .info{width:calc(100% - 40px);position:relative}
	#articleInfo16 .item{display:flex;flex-direction:column;align-items:center}
}
@media screen and (max-width:1024px){
	#articleInfo16 .item .info{width:100%;position:initial;margin:0px 0 0 0%}
	#articleInfo16 .item > div{width:100%}
	#articleInfo16 .item .photo{}
	#articleInfo16 .item:last-child .info{top:0;padding:20px 20px 20px}
	#articleInfo16 .item .photo{width:100%;float:none}
	#articleInfo16 .item .photo::before{display:none}
	#articleInfo16 .item > div{width:53%}
}
@media screen and (max-width:960px){
	#articleInfo16 .ssicon a{width:48%}
	.btnWrap .btn{}
	.serviceBox .titleBox em,.trafficBox .titleBox em{font-size:30px}
	.trafficBox .titleBox h2{font-size:18px}
}
@media screen and (max-width:768px){
	#articleInfo16 .item:nth-child(2n) .photo{right:0}
	#articleInfo16 .item .info{margin:0;width:auto;position:relative;top:0;right:0}
	#articleInfo16 .item .info h3{font-size:20px;padding:5px 0 5px}
	.comlist{padding:5px 0px 15px}
	#articleInfo16 .item .info article{margin:10px 0px 0}
	#articleInfo16 .pagetitle{margin-bottom:0px;font-size:30px;margin:0 0px}
	#articleInfo16 .item:nth-child(2n) .info h5,#articleInfo16 .item:nth-child(2n) .info h3{margin:0 auto 0 0}
	#articleInfo16 .item > div{width:53%;margin:0 0 0px 0}
}
@media (min-width:1141px) and (max-width:1024px){
	.mapContainer{width:60%}
}
@media (min-width:1141px){
	.bannerArea .titleBox{min-width:255px}
	.serviceBox .Img{float:right}
	.serviceBox .Txt{position:absolute;left:0;bottom:0;z-index:2;width:520px;padding-top:90px;background-color:#ffffff}
}
@media (max-width:1140px){
	.mapContainer{width:100%}
	.bannerIntro{display:none}
	.topBox{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
	.descriptionBox{width:100%;padding-top:30px;padding-bottom:30px}
	.getHereBox{display:none}
	.trafficBox{margin-top:0}
	.trafficBox .titleBox{}
	.serviceBox .titleBox{top:-20px;left:0px;width:180px;height:100px;position:relative}
	.serviceBox .Txt{padding:50px 70px 20px}
	.serviceBox .Img{display:flex;justify-content:center}
	.serviceBox .titleBox h2{font-size:17px}
	.serviceBox .titleBox em{font-size:13px}
}
@media (max-width:1180px){
	.mainArea{padding-bottom:50px}
	.descriptionBox{padding-left:20px}
}
@media (max-width:1024px){
	.topBox{padding-top:30px}
	#mapBox{width:100%;height:300px}
	.descriptionBox{padding-top:200px}
}
@media (max-width:768px){
	.mainArea::before{content:'';position:absolute;left:0;top:0;z-index:1;width:100%;height:5px}
	.classBox{display:none}
	.trafficBox{padding-top:0px;padding-bottom: 0px;margin-bottom:30px}
}
@media (max-width:800px){
	.trafficBox::before{left:20px}
	.trafficBox .titleBox{width:200px;margin:auto}
	.trafficList>li{padding-bottom:30px;padding-left:47px}
}
@media (min-width:801px){
	.trafficList>li{width:50%;padding-bottom:75px}
	.trafficList>li:nth-child(even){padding-left:75px}
	.trafficList>li:nth-child(odd)::before{top:33px;left:auto;right:-15px}
	.trafficList>li:nth-child(even)::before{display:none}
}
@media (min-width:1181px){
	.serviceBox .Txt{left:170px}
}
@media screen and (max-width:640px){
	#articleInfo16 .ssicon a{width:100%}
}
@media (max-width:560px){
	.serviceBox .Txt{padding:40px 20px 20px}
}
@media screen and (max-width:480px){
	#articleInfo16 .item .info{padding:10px}
	#articleInfo16 .item > div,#articleInfo16 .item:nth-child(2n) > div{float:none}
	#articleInfo16 .item .photo{position:relative;margin:0px auto 0px;display:block}
	#articleInfo16 .item{margin-bottom:50px;background-position:80% 0%;background-size:auto}
	#articleInfo16 .item .info h5,#articleInfo16 .item .info h3,#articleInfo16 .item:nth-child(2n) .info h5,#articleInfo16 .item:nth-child(2n) .info h3{margin:0;padding:0;width:100%}
	#articleInfo16 .item .info .ssicon a{width:100%}
}