@charset "utf-8";
* {font-family:"Segoe UI",Arial, Helvetica, "Microsoft JhengHei Correct", 'Microsoft JhengHei',PMingLiU,sans-serif;}
body{line-height:1.5;font-size:16px;}
#header{position: relative;overflow: hidden;}
#header h1{position: absolute;bottom:130px;left:9%;font-size:4em;}
#header p{position: absolute;bottom:50px;left: 9%;margin:0 0 0 3px;line-height: 1.8;}
#header .slogan{position:relative;color:#FFF;width:1180px;max-width:95%;margin: auto;}
#header .link{position: absolute;top: 0;left: 0;height: 100%;width: 100%;}
#header img{position: relative;left: 50%;transform:translateX(-50%);max-height:48vw;}

#menu{background:#9ed7d4;margin:4px 0 2px 0;font-size:1.125em}
#menu .item{width:1180px;max-width:95%;margin: auto;}
#menu .item ul{display: flex;margin:0 0 0 -10px;position: relative;}
#menu .item li{display: block;flex:auto;margin:0 0 0 10px;}
#menu .item a{display: block;position:relative;text-align:center;color:#333;transition:color 0.5s;padding:0 0}
#menu .item a::before,
#menu .item a::after{content:"";display: block;background:#3fa8a2;transition:opacity 0.5s,margin 0.5s,height 0.5s;opacity: 0; height:0;}
#menu .item a::before{margin:0 0 10px 0}
#menu .item a::after{margin:10px 0 0 0}
.default #menu .in1 a,
.wonders #menu .in2 a,
.guanwu #menu .in3 a,
.yemagan #menu .in4 a,
.tour #menu .in6 a,
.location #menu .in7 a,
#menu .item a:hover{color:#000;}
#menu .item a:hover:before,
#menu .item a:hover:after{opacity:0.5;height:8px;}
#menu .item a:hover:before{margin:0 0 2px 0}
#menu .item a:hover:after{margin:2px 0 0 0}
#menu .item .in8 a{background:#3fa8a2;color:#FFF;padding:10px 0;}
#menu .item .in8 a::before{display:none}
#menu .item .in8 a::after{content:"";position:absolute;width:70px;height:70px;top:-55px;right:-10px;background:url(../images/hotel.png);opacity: 1;margin: 0}
.default #menu .in1 a::before,
.default #menu .in1 a::after,
.wonders #menu .in2 a::before,
.wonders #menu .in2 a::after,
.guanwu #menu .in3 a::before,
.guanwu #menu .in3 a::after,
.yemagan #menu .in4 a::before,
.yemagan #menu .in4 a::after,
.tour #menu .in6 a::before,
.tour #menu .in6 a::after,
.location #menu .in7 a::before,
.location #menu .in7 a::after{opacity: 1;height:9px;}
.default #menu .in1 a::before,
.wonders #menu .in2 a::before,
.guanwu #menu .in3 a::before,
.yemagan #menu .in4 a::before,
.tour #menu .in6 a::before,
.location #menu .in7 a::before{margin:-2px 0 3px 0}
.default #menu .in1 a::after,
.wonders #menu .in2 a::after,
.guanwu #menu .in3 a::after,
.yemagan #menu .in4 a::after,
.tour #menu .in6 a::after,
.location #menu .in7 a::after{margin:3px 0 -2px 0}

#content{overflow: hidden}

.nav_news{width:1180px;max-width:100%;margin: auto;display: flex;overflow: auto;
	background: -moz-linear-gradient(left,  rgba(63,168,162,1) 0%, rgba(63,168,162,1) 600px, rgba(63,168,162,0) 950px, rgba(63,168,162,0) 100%);
background: -webkit-linear-gradient(left,  rgba(63,168,162,1) 0%,rgba(63,168,162,1) 600px,rgba(63,168,162,0) 950px,rgba(63,168,162,0) 100%);
background: linear-gradient(to right,  rgba(63,168,162,1) 0%,rgba(63,168,162,1) 600px,rgba(63,168,162,0) 950px,rgba(63,168,162,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3fa8a2', endColorstr='#003fa8a2',GradientType=1 );
}
.nav_news li{}
.nav_news a{transition:background 0.5s;display:block;padding:10px 0;text-align:center;width:6em;color:#FFF;}
.yemagan .nav_news a{width:11em;}
.nav_news a:hover{background: rgba(0,100,100,0.3)}
.nav_news li.v a{background: rgba(0,100,100,0.5)}


#txt{width:1180px;max-width:95%;position: relative;/* overflow: hidden; */ margin: auto;}
#txt .swiper-slide{background:#FFF;height: initial;}
#txt h3{font-size:2.5em;color:#066;border-bottom:5px solid #9ed7d4;padding:20px 10px 5px 10px}
#txt p{padding:10px 10px 20px 10px}
#txt > h5{padding: 10px 0 0 0}


#pic{margin: 0 0 50px 0}
#pic .swiper-slide{width:700px;max-width:100%; opacity:0.5;transition:opacity 0.5s;}
#pic .swiper-slide:hover{opacity:1;}
#pic .swiper-slide.swiper-slide-active{opacity:1;}
#pic .swiper-slide img{width:100%;}
#pic .swiper-slide span{display: block;background:rgba(0,0,0,0.7);color:#fff;position:absolute;right:0;bottom:0;padding:5px 10px}
#pic .swiper-pagination{display: none}
#pic .swiper-button-next,
#pic .swiper-button-prev{top: 0;background:none;height:100%;width: 50%;margin: 0;right:0;left: auto}
#pic .swiper-button-prev{left:0}

#pic .swiper-button-prev:hover ~ .swiper-wrapper .swiper-slide{opacity:1}
#pic .swiper-button-prev:hover ~ .swiper-wrapper .swiper-slide-active ~ .swiper-slide{opacity:0.5}
#pic .swiper-button-next:hover ~ .swiper-wrapper .swiper-slide-active + .swiper-slide{opacity:1}

.look{color:#390;}

.map{float: right;background:#fff;transition:right 0.5s,box-shadow 0.5s;margin: 10px 0 0 20px; border: 1px solid #999;padding: 10px;}
.map h5{position: relative;transition:margin 0.5s,left 0.5s;width:24em; text-align: center; background:#666;color:#fff;}
.map img{margin: 0;max-width: 100%;}

@media screen and (max-width:990px){
	.map{position: absolute;z-index: 3; margin:10px 0 0 0;right: -530px;top: 90px;background:#fff;box-shadow:0 5px 10px rgba(0,0,0,0.5);}
	.map h5{margin: -10px 0 0 -169px;left:-2.5%;cursor: pointer; width: 9em;}
	.map.map_on{right: 0px;box-shadow:0 5px 10px rgba(0,0,0,0.5);}
	.map.map_on h5{margin: 0 0 0 0em;left:0%;}
	
}

@media screen and (max-width:660px){
	#header h1{left:0;right:0;text-align: center;bottom: 24vw;margin-bottom: -0.75em}
	#header p{display: none;}
}
@media screen and (max-width:500px){
	#header h1{font-size:12vw;}
}