/* .toper {
	position:fixed;
	left:0;
	top:0;
    z-index: 11;
} */
body, html {
	height:100%;
}
.main {
	margin-bottom: 0;
}
.footer {
	position: relative;
	height: 225px;
	overflow: hidden;
}
.mapContainer {
	position:relative;
	width: 100%;
	height:100%;
	overflow:hidden;
	background:#000 url(../images/banner51.jpg) no-repeat center 0;
	background-size:cover;
    z-index: 10;
}
.mapContainer:before {
	position:absolute;
	left:0;
	top:0;
	width: 100%;
	height:100%;
	content:'';
	background:rgba(0,0,0,.7) url(../images/pattern_stripe.png);
    z-index:1;
}

.xsmap {
	height:100%;
	background: url(../images/xsmap.png) no-repeat 0 110px;
	z-index:22;
}
.metail {
	position:absolute;
	top:0;
	right:0;
	width:500px;
	min-height:250px;
	border-radius:10px 10px 20px 20px;
	margin:140px 0 0 0;
	font-size:1.4rem;
	color:#333;
	opacity:1;
	transition: all 0.2s ease-in-out;
	text-align: justify;
	background:rgba(245,240,229,1) url(../images/xsbg.png) no-repeat right 30px;
}
.show {
	animation: showIn .6s;
}
.hide {
	animation: showOut .6s;
}
@keyframes showIn {
from {
	opacity:0;
    transform: scale(0);
}
to {
	opacity:1;
    transform: scale(1);
}
}
@keyframes showOut {
from {
	opacity:1;
    transform: scale(1);
}
to {
	opacity:0;
    transform: scale(0);
}
}
.metail h1 {
	font-size:1.8rem;
	margin:0 0 1em 0;
	color:#222;
}
.metail div {
	padding:20px 20px 10px 20px;
}
.metail p {
	margin:0 0 1em 0;
}
.metail p.btn {
	text-align:center;
	margin:1em 0 2em 0;
}
.metail p.btn button{
	display:none;
}
.metail .c {
    color:#666;
}
.metail p.btn button:last-child {
	margin:0 0 0 10px;
	background:#bea95b;
	color:#fff;
	display:inline-block;
}
.tripList {
	position:relative;
	left:-240px;
	top:80px;
}
/*定位*/
.cir span {
	color: #fff;
	font-size:12px;
}
.cir cite {
	background: #F90;
}
.c1 .cir cite{
	background: #F66;
}
.c1 .cir {
	left: 465px;
	top: 360px;
	transform: scale(1.15);
}
.c2 .cir {
	left: 435px;
	top: 380px;
}
.c3 .cir {
	left: 410px;
	top: 293px;
}
.c4 .cir {
	left: 410px;
	top: 330px;
}
.c5 .cir {
	left: 500px;
	top: 325px;
}
.c6 .cir {
	left: 636px;
	top: 295px;
}
.c7 .cir {
	left: 495px;
	top: 430px;
}
.c8 .cir {
	left: 630px;
	top: 510px;
}
.c9 .cir {
	left: 615px;
	top: 545px;
}
.c10 .cir {
	left: 465px;
	top: 258px;
}
.c11 .cir {
	left: 475px;
	top: 710px;
}
.c12 .cir {
	left: 630px;
	top: 490px;
}
.c13 .cir {
	left: 705px;
	top: 595px;
}
.c14 .cir {
	left: 410px;
	top: 265px;
}
.c15 .cir {
	left: 914px;
	top: 952px;
}
.main {
	padding: 50px 0 60px 0;
}
/*down*/
.down {
	position:absolute;
	bottom:140px;
	left:50%;
	margin:0 0 0 -14px;
	opacity:.8;
}
.chevron {
    position: absolute;
    width: 28px;
    height: 2px;
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5);
    animation: move 3s ease-out infinite;
}
.chevron:first-child {
    animation: move 3s ease-out 1s infinite;
}
.chevron:nth-child(2) {
    animation: move 3s ease-out 2s infinite;
}
.chevron:before,
.chevron:after {
    content: ' ';
    position: absolute;
    top: 0;
    height: 100%;
    width: 51%;
    background: #fff;
}
.chevron:before {
    left: 0;
    transform: skew(0deg, 30deg);
}
.chevron:after {
    right: 0;
    width: 50%;
    transform: skew(0deg, -30deg);
}
@keyframes move {
    25% {
        opacity: 1;
    }
    33% {
        opacity: 1;
        transform: translateY(30px);
    }
    67% {
        opacity: 1;
        transform: translateY(40px);
    }
    100% {
        opacity: 0;
        transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
    }
}
@media (max-width:900px) {
	.main .container {
		margin-top: 80px;
	}

.mapContainer,.txt li span code{
	display:none;
}
.txt ul{
	padding:0 15px;
}
.txt li{
	margin-right:0;
}
.txt li span {
	text-align:center;
}
.txt li img {
	width:100%;
}
}