@charset "utf-8";
body{font-family:"Microsoft Yahei","SimSun";font-size:14px;color:#000;}
a{color:#000;}
a:hover{text-decoration: none;color: #ed1b23 !important;}
img{display:block;}
#all{position: relative;width: 100%;height: 100%;}
#logo{position: fixed;width: 159px;height: 22px;background: url(images/scroll/logo.png;vpn_img);left: 55px;top: 40px;z-index: 999;}

#menu-btn{position: fixed;height: 38px;width: 38px;background: url(images/scroll/top-menu.png;vpn_img);right: 55px;top: 32px;cursor: pointer;transition: background 0.2s;z-index: 999;}
#menu-btn:hover{background: url(images/scroll/top-menu2.png;vpn_img);}
#music-btn{position: fixed;height: 38px;width: 38px;right: 106px;top: 32px;cursor: pointer;transition: background 0.2s;z-index: 999;}
#music-btn.on{background: url(images/scroll/top-music-on.png;vpn_img);}
#music-btn.on:hover{background: url(images/scroll/top-music-on2.png;vpn_img);}
#music-btn.off{background: url(images/scroll/top-music-off.png;vpn_img);}
#music-btn.off:hover{background: url(images/scroll/top-music-off2.png;vpn_img);}
#menu-drop{position: fixed;right: 55px;top: 86px;background: #fff2d7;width: 170px;border-radius: 5px;border: 1px solid #c7b37e;box-shadow: 0px 0px 16px rgba(0,0,0,0.3);overflow: hidden;text-align: center;font-weight: bold;font-size: 15px;color: #907426;display: none;z-index: 999;}
#menu-drop a{color: #907426;}
#menu-drop .row{line-height: 30px;padding: 7px 0px;	border-top: 1px solid #c7b37e;}
#menu-drop ul{background: url(images/scroll/top-menu-line.png;vpn_img) no-repeat center top;margin-top: 7px;padding: 7px 20px 0px 20px;}
#menu-drop ul li{float: left;width: 50%;}

#wrapper{position: relative;width: 100%;height: 100%;overflow: hidden;z-index: 1;}
#wrapper img{float: left;height: 100%;}
#container{position: relative;margin: 0;padding: 0; height: 100%;}
#topic{position: absolute;width:5%;height:65%;left:1%;top:10%;background: url() no-repeat center center;background-size: contain;}
.city{position: absolute;}
.city .drop{display: none;}
.city .abs{position: absolute;background-repeat: no-repeat;background-position: center center;background-size: contain;}

.city .drop,.city .drop1{display: none;width: 539px;height: 234px;padding: 30px 50px 0px 70px;border: 2px solid #f6b665;background: #fffcf4;border-radius: 10px;margin-top: -67px;z-index: 88;}
.city .drop .close,.city .drop1 .close{position: absolute;top: -14px;right: -20px;width: 46px;height: 46px;background: url(images/scroll/drop-close1.png;vpn_img);transition: background 0.2s;}
.city .drop .close:hover,.city .drop1 .close:hover{background: url(images/scroll/drop-close2.png;vpn_img);}
.city .drop h3,.city .drop1 h3{font-size: 30px;line-height: 40px;}
.city .drop p,.city .drop1 p{line-height: 36px;font-size: 22px;margin-top: 15px;}
.city .video a,.city .video1 a,.city .video2 a{display: block;width: 100%;height: 100%;}
.city .video .photo,.city .video1 .photo,.city .video2 .photo{height: 75.5%;left: 0px;top: 0px;border: 1px solid #fddc8f;	border-radius: 5px;	overflow: hidden;box-shadow: 0px 5px 5px rgba(0,0,0,0.3);}
.city .video .photo img,.city .video1 .photo img,.city .video2 .photo img{width: 100%;height: 100%;}
.city .video .photo .play,.city .video1 .photo .play,.city .video2 .photo .play{position: absolute;width: 18.4%;height: 33%;left: 40.8%;top: 33.5%;background-image: url(images/scroll/play.png;vpn_img);transition: background 0.2s;}
.city .video p,.city .video1 p,.city .video2 p{left: 0px;bottom: 0px;width: 100%;height: 13.2%;}
.city .video:hover .photo .play,.city .video1:hover .photo .play,.city .video2:hover .photo .play{background-image: url(images/scroll/play2.png;vpn_img);}
.city .name,.city .name1{z-index: 99;}
.city .name-shadow,.city .name-shadow1{background-image: url(images/scroll/name0.png;vpn_img);z-index: 98;}

@-ms-keyframes name{
	from{ }
	10%{ filter:alpha(opacity=100); opacity:1; }
	50%{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6); }
	to{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6);  }
}
@-moz-keyframes name{
	from{ }
	10%{ filter:alpha(opacity=100); opacity:1; }
	50%{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6); }
	to{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6);  }
}
@-o-keyframes name{
	from{ }
	10%{ filter:alpha(opacity=100); opacity:1; }
	50%{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6); }
	to{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6);  }
}
@-webkit-keyframes name{
	from{ }
	10%{ filter:alpha(opacity=100); opacity:1; }
	50%{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6); }
	to{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6);  }
}
@keyframes name{
	from{ }
	10%{ filter:alpha(opacity=100); opacity:1; }
	50%{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6); }
	to{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6);  }
}

@-ms-keyframes name1{
	from{ }
	10%{ filter:alpha(opacity=100); opacity:1; }
	50%{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6); }
	to{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6);  }
}
@-moz-keyframes name1{
	from{ }
	10%{ filter:alpha(opacity=100); opacity:1; }
	50%{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6); }
	to{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6);  }
}
@-o-keyframes name1{
	from{ }
	10%{ filter:alpha(opacity=100); opacity:1; }
	50%{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6); }
	to{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6);  }
}
@-webkit-keyframes name1{
	from{ }
	10%{ filter:alpha(opacity=100); opacity:1; }
	50%{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6); }
	to{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6);  }
}
@keyframes name1{
	from{ }
	10%{ filter:alpha(opacity=100); opacity:1; }
	50%{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6); }
	to{ filter:alpha(opacity=0); opacity:0; transform: scale(1.6,1.6);  }
}

.city .name-shadow,.city .name-shadow1{
	animation:'name' 3.0s ease-in-out 0s infinite;
	-ms-animation:name 3.0s ease-in-out 0s infinite;
	-moz-animation:name 3.0s ease-in-out 0s infinite;
	-o-animation:'name' 3.0s ease-in-out 0s infinite;
	-webkit-animation:'name' 3.0s ease-in-out 0s infinite;
}

.city .text1,.city .text2,.city .text3,.city .text4,.city .text5,.city .text6,.city .text7,.city .text8,.city .text9,.city .text10,.city .text11,.city .text12{transition: transform 0.3s;}
.city .text1:hover,.city .text2:hover,.city .text3:hover,.city .text4:hover,.city .text5:hover,.city .text6:hover,.city .text7:hover,.city .text8:hover,.city .text9:hover,.city .text10:hover,.city .text11:hover,.city .text12:hover{transform: scale(1.05,1.05);}
.city .link1,.city .link2,.city .link3,.city .link4,.city .link5,.city .link6,.city .link7,.city .link8,.city .link9,.city .link10,.city .link11,.city .link12{transition: background 0.2s;}

#city1{left:10%;top:0%;width:12%;height:100%;}
#city1 .name,#city1 .name-shadow{left:78%;top:35%;width:10%;height:12%;}
#city1 .name{background-image: url(images/scroll/c1-name.png;vpn_img);}
#city1 .drop{left:83%;top:32%;}
#city1 .line{width:25%;height:40%;left:35%;top:50%;background-image: url(images/scroll/c1-line.png;vpn_img);}
#city1 .video{width:8%;height:15%;top:76%;left:20%;}
#city1 .video p{background-image: url(images/scroll/c1-video.png;vpn_img);}
#city1 .video:hover p{background-image: url(images/scroll/c1-video-2.png;vpn_img);}
#city1 .text1{width: 10%;height:10%;left:30%;top:48%;background-image: url(images/scroll/lmd01.png;vpn_img);}
#city1 .text2{width: 10%;height:10%;left:65%;top:45%;background-image: url(images/scroll/lmd02.png;vpn_img);}
#city1 .text3{width: 10%;height:10%;left:5%;top:35%;background-image: url(images/scroll/msd_17.png;vpn_img);}
#city1 .text4{width: 10%;height:10%;left:30%;top:25%;background-image: url(images/scroll/msd_10.png;vpn_img);}
#city1 .text5{width: 10%;height:10%;left:20%;top:60%;background-image: url(images/scroll/msd_12.png;vpn_img);}
#city1 .text6{width: 10%;height:10%;left:75%;top:90%;background-image: url(images/scroll/msd_14.png;vpn_img);}
#city1 .link1{width: 8%;height:5%;left:29%;top:70%;	background-image: url(images/scroll/c1-link2.gif;vpn_img);}
#city1 .link1:hover{background-image: url(images/scroll/c1-link2.gif;vpn_img);}
#city1 .link2{width: 12%;height:8%;left:42%;top:62%;	background-image: url(images/scroll/c1-text1.png;vpn_img);}
#city1 .link3{width: 12%;height:8%;left:42%;top:68%;	background-image: url(images/scroll/c1-text2.png;vpn_img);}
#city1 .link4{width: 12%;height:8%;left:42%;top:74%;background-image: url(images/scroll/c1-link1.png;vpn_img);}
#city1 .link4:hover{background-image: url(images/scroll/c1-link1-1.png;vpn_img);}
#city1 .link5{width:30%;height:20%;left:18%;top:10%;	background-image: url(images/scroll/c1-link3.gif;vpn_img);}



#city2{left: 22%;top:0%;width:14%;height:100%;}
#city2 .name,#city2 .name-shadow{left:16%;top:31%;width: 10%;height:12%;}
#city2 .name{background-image: url(images/scroll/c2-name.png;vpn_img);}
#city2 .drop{left:21%;top:30%;}
#city2 .name1,#city2 .name-shadow1{left:32%;top:80%;width: 10%;height:12%;}
#city2 .name1{background-image: url(images/scroll/c2-name1.png;vpn_img);}
#city2 .drop1{left:37%;top:65%;}
#city2 .line{width:25%;height:40%;left:24%;top:50%;background-image: url(images/scroll/c2-line.png;vpn_img);}
#city2 .video{width:8%;height:15%;top:1%;left:21%;}
#city2 .video p{background-image: url(images/scroll/c2-video.png;vpn_img);}
#city2 .video:hover p{background-image: url(images/scroll/c2-video-2.png;vpn_img);}
#city2 .video1{width:8%;height:15%;top:6%;left:55%;}
#city2 .video1 p{background-image: url(images/scroll/c2-video1.png;vpn_img);}
#city2 .video1:hover p{background-image: url(images/scroll/c2-video1-2.png;vpn_img);}
#city2 .text1{width:10%;height:10%;left:69%;top:65%;background-image: url(images/scroll/lmd03.png;vpn_img);}
#city2 .text2{width:10%;height:10%;left:74%;top:54%;background-image: url(images/scroll/lmd31.png;vpn_img);}
#city2 .text3{width:10%;height:10%;left:78%;top:67%;background-image: url(images/scroll/lmd05.png;vpn_img);}
#city2 .text4{width:10%;height:10%;left:90%;top:65%;background-image: url(images/scroll/lmd06.png;vpn_img);}
#city2 .text5{width:10%;height:10%;left:65%;top:52%;background-image: url(images/scroll/lmd11.png;vpn_img);}
#city2 .text6{width:10%;height:10%;left:80%;top:52%;background-image: url(images/scroll/msd_11.png;vpn_img);}
#city2 .text7{width:10%;height:10%;left:55%;top:65%;background-image: url(images/scroll/msd_16.png;vpn_img);}
#city2 .text8{width:10%;height:10%;left:90%;top:8%;background-image: url(images/scroll/msd_13.png;vpn_img);}
#city2 .text9{width:10%;height:10%;left:24%;top:45%;background-image: url(images/scroll/msd_15.png;vpn_img);}
#city2 .link1{width: 8%;height:5%;left:25%;top:80%;background-image: url(images/scroll/c2-link2.gif;vpn_img);}
#city2 .link1:hover{background-image: url(images/scroll/c2-link2.gif;vpn_img);}
#city2 .link2{width: 12%;height:8%;left:32%;top:68%;background-image: url(images/scroll/c2-link1.png;vpn_img);}
#city2 .link2:hover{background-image: url(images/scroll/c2-link1-1.png;vpn_img);}
#city2 .link3{width: 12%;height:8%;left:32%;top:50%;background-image: url(images/scroll/c2-text3.png;vpn_img);}
#city2 .link4{width: 12%;height:8%;left:32%;top:56%;background-image: url(images/scroll/c2-text1.png;vpn_img);}
#city2 .link5{width: 12%;height:8%;left:32%;top:62%;background-image: url(images/scroll/c2-text2.png;vpn_img);}




#city3{left:36%;top:0%;	width:12%;height:100%;}
#city3 .name,#city3 .name-shadow{left:17%;top:80%;width:10%;height:12%;}
#city3 .name{background-image: url(images/scroll/c3-name.png;vpn_img);}
#city3 .drop{left:22%;top:65%;}
#city3 .name1,#city3 .name-shadow1{left:60%;top:8%;width:10%;height:12%;}
#city3 .name1{background-image: url(images/scroll/c3-name1.png;vpn_img);}
#city3 .drop1{left:65%;top:18%;}
#city3 .line{width:25%;height:40%;left:65%;top:26%;background-image: url(images/scroll/c3-line.png;vpn_img);}
#city3 .video{width:8%;height:15%;top:5%;left:50%;}
#city3 .video p{background-image: url(images/scroll/c3-video.png;vpn_img);}
#city3 .video:hover p{background-image: url(images/scroll/c3-video-2.png;vpn_img);}
#city3 .video1{width:8%;height:15%;top:70%;left:60%;}
#city3 .video1 p{background-image: url(images/scroll/c3-video.png;vpn_img);}
#city3 .video1:hover p{background-image: url(images/scroll/c3-video-2.png;vpn_img);}
#city3 .text1{width:10%;height:10%;left:21%;top:2%;background-image: url(images/scroll/lmd04.png;vpn_img);}
#city3 .text2{width:10%;height:10%;left:39%;top:8%;background-image: url(images/scroll/lmd10.png;vpn_img);}
#city3 .text3{width:10%;height:10%;left:35%;top:52%;background-image: url(images/scroll/lmd07.png;vpn_img);}
#city3 .text4{width:10%;height:10%;left:37%;top:66%;background-image: url(images/scroll/lmd08.png;vpn_img);}
#city3 .text5{width:10%;height:10%;left:90%;top:86%;background-image: url(images/scroll/lmd12.png;vpn_img);}
#city3 .link1{width:15%;height:5%;left:75%;top:36%;background-image: url(images/scroll/c3-text1.png;vpn_img);}
#city3 .link2{width:15%;height:5%;left:75%;top:42%;background-image: url(images/scroll/c3-text2.png;vpn_img);}
#city3 .link3{width:15%;height:5%;left:75%;top:48%;background-image: url(images/scroll/c3-text3.png;vpn_img);}
#city3 .link4{width:15%;height:5%;left:75%;top:54%;background-image: url(images/scroll/c3-text4.png;vpn_img);}

#city4{left:48%;top:0%;width:8%;height:100%;}
#city4 .name,#city4 .name-shadow{left:8%;top:40%;width:10%;height:12%;}
#city4 .name{background-image: url(images/scroll/c4-name.png;vpn_img);}
#city4 .drop{left:13%;top:40%;}
#city4 .line{width: 28%;height: 93.1%;left: 5.2%;top: 6.9%;	background-image: url(images/scroll/c4-line.png;vpn_img);}
#city4 .video{width:12%;height:15%;top:5%;left:15%;}
#city4 .video p{background-image: url(images/scroll/c4-video.png;vpn_img);}
#city4 .video:hover p{background-image: url(images/scroll/c4-video-2.png;vpn_img);}
#city4 .text1{width:10%;height:10%;left:1%;top:63%;background-image: url(images/scroll/lmd13.png;vpn_img);}
#city4 .text2{width:10%;height:10%;left:12%;top:58%;background-image: url(images/scroll/lmd14.png;vpn_img);}
#city4 .text3{width:10%;height:10%;left:33%;top:70%;background-image: url(images/scroll/lmd15.png;vpn_img);}
#city4 .text4{width:10%;height:10%;left:56%;top:42%;background-image: url(images/scroll/lmd16.png;vpn_img);}
#city4 .text5{width:10%;height:10%;left:67%;top:30%;background-image: url(images/scroll/lmd17.png;vpn_img);}
#city4 .text6{width:10%;height:10%;left:86%;top:84%;background-image: url(images/scroll/lmd18.png;vpn_img);}
#city4 .text7{width:10%;height:10%;left:0%;top:81%;background-image: url(images/scroll/msd_4.png;vpn_img);}
#city4 .link1{width: 16.7%;height: 8.2%;left: 33.3%;top: 3.8%;background-image: url(images/scroll/c4-link1.png;vpn_img);}
#city4 .link1:hover{background-image: url(images/scroll/c4-link1-2.png;vpn_img);}
#city4 .link2{width: 14%;height:8%;left:68%;top:45%;background-image: url(images/scroll/c4-link2.gif;vpn_img);}
#city4 .link2:hover{background-image: url(images/scroll/c4-link2.gif;vpn_img);}
#city4 .link3{width: 14%;height:8%;left:80%;top:72%;background-image: url(images/scroll/c4-link3.gif;vpn_img);}
#city4 .link3:hover{background-image: url(images/scroll/c4-link3.gif;vpn_img);}



#city5{left:56%;top:0%;width:8%;height:100%;}
#city5 .name,#city5 .name-shadow{left:60%;top:30%;width:10%;height:12%;}
#city5 .name{background-image: url(images/scroll/c5-name.png;vpn_img);}
#city5 .drop{left:65%;top:35%;}
#city5 .line{width: 28%;height: 93.1%;left: 5.2%;top: 6.9%;background-image: url(images/scroll/c5-line.png;vpn_img);}
#city5 .video{width:12%;height:15%;top:85%;left:8%;}
#city5 .video p{background-image: url(images/scroll/c5-video.png;vpn_img);}
#city5 .video:hover p{background-image: url(images/scroll/c5-video-2.png;vpn_img);}
#city5 .line{width: 75.4%;height: 33%;left: 9.9%;top: 53.1%;background-image: url(images/scroll/c5-line.png;vpn_img);}
#city5 .text1{width:10%;height:10%;left:23%;top:75%;background-image: url(images/scroll/lmd19.png;vpn_img);}
#city5 .text2{width:10%;height:10%;left:25%;top:40%;background-image: url(images/scroll/lmd20.png;vpn_img);}
#city5 .text3{width:10%;height:10%;left:75%;top:70%;background-image: url(images/scroll/lmd21.png;vpn_img);}
#city5 .text4{width:10%;height:10%;left:34%;top:73%;background-image: url(images/scroll/msd_3.png;vpn_img);}
#city5 .text5{width:10%;height:10%;left:50%;top:21%;background-image: url(images/scroll/msd_2.png;vpn_img);}
#city5 .text6{width:10%;height:10%;left:65%;top:86%;background-image: url(images/scroll/msd_8.png;vpn_img);}
#city5 .text7{width:10%;height:10%;left:10%;top:22%;background-image: url(images/scroll/msd_9.png;vpn_img);}
#city5 .text8{width:10%;height:10%;left:6%;top:36%;background-image: url(images/scroll/msd_5.png;vpn_img);}

#city5 .link1{width: 9.6%;height: 5.7%;left: 50.2%;top: 0%;background-image: url(images/scroll/c5-link1.png;vpn_img);}
#city5 .link1:hover{background-image: url(images/scroll/c5-link1-2.png;vpn_img);}
#city5 .link2{width: 14%;height: 8%;left:16%;top:65%;background-image: url(images/scroll/c5-link2.gif;vpn_img);}
#city5 .link2:hover{background-image: url(images/scroll/c5-link2.gif;vpn_img);}
#city5 .link3{width: 25.7%;height: 9%;left: 47.2%;top: 9.9%;background-image: url(images/scroll/c5-link3.png;vpn_img);}
#city5 .link3:hover{background-image: url(images/scroll/c5-link3-2.png;vpn_img);}
#city5 .link4{width: 26.7%;height: 6.7%;left: 55.2%;top: 19.4%;	background-image: url(images/scroll/c5-link4.png;vpn_img);}
#city5 .link4:hover{background-image: url(images/scroll/c5-link4-2.png;vpn_img);}
#city5 .link5{width: 8.6%;height: 5.7%;left: 80.2%;top: 0%;background-image: url(images/scroll/c5-link5.png;vpn_img);}
#city5 .link5:hover{background-image: url(images/scroll/c5-link5-2.png;vpn_img);}

#city6{left:64%;top:0%;width:8%;height:100%;}
#city6 .name,#city6 .name-shadow{left:32%;top:70%;width:10%;height:12%;}
#city6 .name{background-image: url(images/scroll/c6-name.png;vpn_img);}
#city6 .drop{left:37%;top:70%;}
#city6 .video{width: 12%;height:15%;top: 40%;left: 65%;}
#city6 .video p{background-image: url(images/scroll/c6-video.png;vpn_img);}
#city6 .video:hover p{background-image: url(images/scroll/c6-video-2.png;vpn_img);}
#city6 .line{width:25%;height:40%;left:2%;top:13%;background-image: url(images/scroll/c6-line.png;vpn_img);}
#city6 .text1{width:10%;height:10%;left:56%;top:2%;background-image: url(images/scroll/lmd22.png;vpn_img);}
#city6 .text2{width:10%;height:10%;left:60%;top:75%;background-image: url(images/scroll/lmd23.png;vpn_img);}
#city6 .text3{width:10%;height:10%;left:90%;top:24%;background-image: url(images/scroll/lmd24.png;vpn_img);}
#city6 .text4{width:10%;height:10%;left:62%;top:15%;background-image: url(images/scroll/msd_7.png;vpn_img);}
#city6 .link1{width:18%;height:6%;left:12%;top:20%;background-image: url(images/scroll/c6-text1.png;vpn_img);}
#city6 .link2{width:18%;height:6%;left:12%;top:26%;background-image: url(images/scroll/c6-text2.png;vpn_img);}
#city6 .link3{width:18%;height:6%;left:12%;top:32%;background-image: url(images/scroll/c6-text4.png;vpn_img);}
#city6 .link4{width:18%;height:6%;left:12%;top:38%;background-image: url(images/scroll/c6-text3.png;vpn_img);}



#city7{left:72%;top:0%;width:8%;height:100%;}
#city7 .name,#city7 .name-shadow{left:38%;top:55%;width:10%;height:12%;}
#city7 .name{background-image: url(images/scroll/c7-name.png;vpn_img);}
#city7 .drop{left:43%;top:55%;}
#city7 .line{width: 50%;height: 77%;left: 33.1%;top: 8.7%;background-image: url(images/scroll/c1-line.png;vpn_img);}
#city7 .video{width: 12%;height:15%;top:50%;left:12%;}
#city7 .video p{background-image: url(images/scroll/c7-video.png;vpn_img);}
#city7 .video:hover p{background-image: url(images/scroll/c7-video-2.png;vpn_img);}
#city7 .video1{width: 12%;height:15%;top:20%;left:40%;}
#city7 .video1 p{background-image: url(images/scroll/c7-video1.png;vpn_img);}
#city7 .video1:hover p{background-image: url(images/scroll/c7-video1-2.png;vpn_img);}
#city7 .video2{width: 12%;height:15%;top:65%;left:80%;}
#city7 .video2 p{background-image: url(images/scroll/c7-video2.png;vpn_img);}
#city7 .video2:hover p{background-image: url(images/scroll/c7-video2-2.png;vpn_img);}
#city7 .text1{width:10%;height:10%;left:81%;top:82%;background-image: url(images/scroll/lmd27.png;vpn_img);}
#city7 .text2{width:10%;height:10%;left:50%;top:85%;background-image: url(images/scroll/msd_19.png;vpn_img);}
#city7 .link1{width: 16.4%;height: 11%;left: 74.8%;top: 0%;background-image: url(images/scroll/c1-link1.png;vpn_img);}
#city7 .link1:hover{background-image: url(images/scroll/c1-link1-2.png;vpn_img);}
#city7 .link2{width: 16.4%;height: 9.4%;left: 74.8%;top: 15.5%;	background-image: url(images/scroll/c1-link2.png;vpn_img);}
#city7 .link2:hover{background-image: url(images/scroll/c1-link2-2.png;vpn_img);}
#city7 .link3{width: 19%;height: 9.4%;left: 74.8%;top: 30.1%;background-image: url(images/scroll/c1-link3.png;vpn_img);}
#city7 .link3:hover{background-image: url(images/scroll/c1-link3-2.png;vpn_img);}
#city7 .link4{width: 27.6%;height:23.9%;left:71.8%;top:-20.6%;background-image: url(images/scroll/c7-link3.png;vpn_img);}
#city7 .link4:hover{background-image: url(images/scroll/c7-link3-2.png;vpn_img);}


#city8{left:80%;top:0%;width:8%;height:100%;}
#city8 .name,#city8 .name-shadow{left: 0.5%;top: 0%;width:10%;height:12%;}
#city8 .name{background-image: url(images/scroll/c8-name.png;vpn_img);}
#city8 .drop{left: 5%;top: 0%;}
#city8 .line{width: 60.9%;height: 45.7%;left:8%;top: 30.6%;	background-image: url(images/scroll/c6-line.png;vpn_img);}
#city8 .video{width:12%;height:15%;top:30%;left:65%;}
#city8 .video p{background-image: url(images/scroll/c8-video.png;vpn_img);}
#city8 .video:hover p{background-image: url(images/scroll/c8-video-2.png;vpn_img);}
#city8 .text1{width:10%;height:10%;left:6%;top:48%;background-image: url(images/scroll/lmd25.png;vpn_img);}
#city8 .text2{width:10%;height:10%;left:10%;top:65%;background-image: url(images/scroll/lmd26.png;vpn_img);}
#city8 .text3{width:10%;height:10%;left:82%;top:12%;background-image: url(images/scroll/lmd28.png;vpn_img);}
#city8 .text4{width:10%;height:10%;left:95%;top:9%;background-image: url(images/scroll/msd_1.png;vpn_img);}




#city9{left:88%;top:0%;width:8%;height:100%;}
#city9 .name,#city9 .name-shadow{left: 15%;top: 0%;width:10%;height:12%;}
#city9 .name{background-image: url(images/scroll/c9-name.png;vpn_img);}
#city9 .drop{left: 19.3%;top: 0px;}
#city9 .line{width: 50%;height: 77%;left: 33.1%;top: 8.7%;background-image: url(images/scroll/c1-line.png;vpn_img);}
#city9 .video{width:12%;height:15%;top: 0.6%;left: 40%;}
#city9 .video p{background-image: url(images/scroll/c9-video.png;vpn_img);}
#city9 .video:hover p{background-image: url(images/scroll/c9-video-2.png;vpn_img);}
#city9 .text1{width:10%;height:10%;left:45%;top:68%;background-image: url(images/scroll/lmd29.png;vpn_img);}
#city9 .text2{width:10%;height:10%;left:82%;top:78%;background-image: url(images/scroll/lmd30.png;vpn_img);}
#city9 .text3{width:10%;height:10%;left:30%;top:65%;background-image: url(images/scroll/msd_18.png;vpn_img);}
#city9 .link1{width:28%;height:14%;left:80%;top:25%;background-image: url(images/scroll/c9-link1.png;vpn_img);}
#city9 .link2{width:28%;height:14%;left:80%;top:40%;background-image: url(images/scroll/c9-link3.png;vpn_img);}
#city9 .link3{width:28%;height:14%;left:80%;top:55%;background-image: url(images/scroll/c9-link2.png;vpn_img);}
#city9 .link4{width:15%;height:10%;left:80%;top:17%;background-image: url(images/scroll/c9-text1.png;vpn_img);}

#city10{left:96%;top:0%;width:4%;height:100%;}
#city10 .name,#city10 .name-shadow{left: 0%;top: 52.7%;width: 10%;height:12%;}
#city10 .name{background-image: url(images/scroll/c10-name.png;vpn_img);}
#city10 .drop{left: 5%;top: 52.7%;}
#city10 .line{width: 67.8%;height: 96.2%;left: 9.8%;top: 4.5%;background-image: url(images/scroll/c10-line.png;vpn_img);}
#city10 .video{width:24%;height:15%;top: 55%;left: 55%;}
#city10 .video p{background-image: url(images/scroll/c10-video.png;vpn_img);}
#city10 .video:hover p{background-image: url(images/scroll/c10-video-2.png;vpn_img);}
#city10 .text1{width: 40.4%;height: 7.4%;left: 20.8%;top: 6%;background-image: url(images/scroll/c10-text1.png;vpn_img);}
#city10 .text2{width: 40.4%;height: 7.4%;left: 20.8%;top: 20.6%;background-image: url(images/scroll/c10-text2.png;vpn_img);}
#city10 .text3{width: 40.4%;height: 7.4%;left: 20.8%;top: 31.8%;background-image: url(images/scroll/c10-text3.png;vpn_img);}
#city10 .link1{width: 22.7%;height: 5.5%;left: 78.6%;top: 5.9%;background-image: url(images/scroll/c2-link1.png;vpn_img);}
#city10 .link1:hover{background-image: url(images/scroll/c2-link1-2.png;vpn_img);}
#city10 .link2{width: 22.7%;height: 4.7%;left: 78.6%;top: 15%;background-image: url(images/scroll/c2-link2.png;vpn_img);}
#city10 .link2:hover{background-image: url(images/scroll/c2-link2-2.png;vpn_img);}
#city10 .link3{width: 22.7%;height: 3.8%;left: 78.6%;top: 23.2%;background-image: url(images/scroll/c2-link3.png;vpn_img);}
#city10 .link3:hover{background-image: url(images/scroll/c2-link3-2.png;vpn_img);}
#city10 .link4{width: 27.7%;height:16%;left: 78.6%;top: 26%;background-image: url(images/scroll/c10-link3.png;vpn_img);}
#city10 .link4:hover{background-image: url(images/scroll/c10-link3-2.png;vpn_img);}





.drop-audio,.drop-vr,.drop-video,.drop-photo{position: fixed;width: 100%;height: 100%;left: 0px;top: 0px;background-color:rgba(0,0,0,0.8);z-index: 6666;display: none;}
.drop-audio{background: none;}
.drop-audio .shadow{position: absolute;width: 2069px;height: 151px;background: url(images/scroll/drop-audio-shadow.png;vpn_img);left: 50%;top: 50%;	margin: 165px 0px 0px -1035px;}
.drop-audio .show{position: absolute;width: 1139px;height: 506px;left: 50%;top: 50%;margin: -253px 0px 0px -569px;background: url(images/scroll/drop-audio-bg.png;vpn_img);}
.drop-audio .close{	position: absolute;width: 46px;	height: 46px;background: url(images/scroll/drop-close3.png;vpn_img);right: -22px;top: -28px;transition: background 0.2s;}
.drop-audio .close:hover{background: url(images/scroll/drop-close2.png;vpn_img);}
.drop-audio .decorate{position: absolute;left: 100px;top: 116px;width: 66px;height: 55px;}
.drop-audio .decorate i{position: absolute;bottom: 0px;width: 6px;background: #f44326;height: 100%;	-webkit-animation: is-playing .5s ease infinite alternate;animation: is-playing .5s ease infinite alternate;-webkit-transform-origin: bottom;-ms-transform-origin: bottom;transform-origin: bottom;}
.drop-audio .decorate .line1{ left: 0px; }
.drop-audio .decorate .line2{ left: 20px; }
.drop-audio .decorate .line3{ left: 40px; }
.drop-audio .decorate .line4{ left: 60px; }
.drop-audio .decorate .line1{-webkit-animation-delay: .15s;animation-delay: .15s}
.drop-audio .decorate .line2{-webkit-animation-delay: .3s;animation-delay: .3s}
.drop-audio .decorate .line3{-webkit-animation-delay: .45s;animation-delay: .45s}
.drop-audio .decorate .line4{-webkit-animation-delay: .6s;animation-delay: .6s}

@-webkit-keyframes is-playing{
	0% {-webkit-transform:scaleY(.2);transform:scaleY(.2)}
	100% {-webkit-transform:scaleY(1);transform:scaleY(1)}
}
@keyframes is-playing {
	0% {-webkit-transform:scaleY(.2);transform:scaleY(.2)}
	100% {-webkit-transform:scaleY(1);transform:scaleY(1)}
}

.drop-audio .text{position: absolute;left: 202px;top: 110px;font-size: 30px;line-height: 35px;color: #4a3620;}
.drop-audio .control{position: absolute;height: 64px;width: 969px;padding-left: 170px;left: 0px;bottom: 10px;}
.drop-audio .control .btn1{float: left;width: 25px;height: 22px;margin-top: 21px;background: url(images/scroll/drop-audio-btn1.png;vpn_img);transition: background 0.2s;}
.drop-audio .control .btn2{float: left;width: 25px;height: 22px;margin-top: 21px;margin-left: 45px;background: url(images/scroll/drop-audio-btn2.png;vpn_img);transition: background 0.2s;}
.drop-audio .control .btn3{float: left;width: 33px;height: 38px;margin-top: 13px;margin-left: 45px;transition: opacity 0.2s;}
.drop-audio .control .btn3.play{background: url(images/scroll/drop-audio-btn3.png;vpn_img);}
.drop-audio .control .btn3.pause{background: url(images/scroll/drop-audio-btn4.png;vpn_img);}
.drop-audio .control .btn1:hover,.drop-audio .control .btn2:hover,.drop-audio .control .btn3:hover{filter:alpha(opacity=80);opacity:0.8;}
.drop-audio .control .line{float: left;width: 305px;height: 3px;background: #fff;border-radius: 1px;	margin-top: 31px;margin-left: 45px;	position: relative;}
.drop-audio .control .line span{position: absolute;left: 0px;top: 0px;height: 100%;border-radius: 1px;background: #f64f60;}
.drop-audio .control .line span i{position: absolute;cursor: pointer;right: -5px;top: -4px;width: 11px;	height: 11px;border-radius: 50%;background: #f64f60;}
.drop-audio .control .time{float: left;margin-left: 45px;height: 64px;line-height: 64px;color: #a9a9a9;}
.drop-audio .control .time label{color: #fff;}
.drop-logo{position: absolute;width: 234px;height: 32px;background: url(images/scroll/drop-logo.png;vpn_img);left: 4.2%;top: 3%;z-index: 99;}
.drop-vr .close,.drop-photo .close{position: absolute;width: 46px;height: 46px;right: 4.2%;top: 2.8%;background: url(images/scroll/drop-close3.png;vpn_img);transition: opacity 0.2s;z-index: 99;}
.drop-vr .close:hover,.drop-photo .close:hover{background: url(images/scroll/drop-close2.png;vpn_img);}
.drop-vr .close{right: 2.2%;top: 6%;}
.drop-vr .vr-show{position: absolute;width: 100%;height: 100%;left: 0px;top: 0px;}
.drop-vr .bottom{position: absolute;width: 100%;bottom: 3.6%;left: 0px;	height: 74px;text-align: center;z-index: 99;}
.drop-vr .bottom a{	display: inline-block;vertical-align: top;width: 149px;height: 70px;line-height: 70px;padding-top: 4px;background: url(images/scroll/drop-vr-btn1.png;vpn_img);font-size: 20px;font-weight: bold;margin: 0px 20px;	color: #fff;transition: background 0.2s;}
.drop-vr .bottom a:hover{color: #fff !important;}
.drop-vr .bottom .current,.drop-vr .bottom a:hover{background: url(images/scroll/drop-vr-btn2.png;vpn_img);}
.drop-video .show{position: absolute;width: 890px;height: 625px;left: 50%;top: 50%;margin: -313px 0px 0px -445px;background: #191b1f;overflow: hidden;border-radius: 5px;}
.drop-video .close{position: absolute;	right: 0px;	top: 0px;background: url(images/scroll/drop-close4.png;vpn_img);	width: 46px;height: 46px;transition: background 0.2s;}
.drop-video .close:hover{background: url(images/scroll/drop-close5.png;vpn_img);}
.drop-video .show .play{height: 540px;background: #000;overflow: hidden;}
.drop-video .show .play img{width: 100%;height: 100%;}
.drop-video .show p{height: 85px;line-height: 85px;text-align: center;font-size: 28px;color: #7c7c7c;}
.drop-photo{background: #fff;}
.drop-photo .show{position: absolute;width: 100%;height: 100%;left: 0px;top: 0px;text-align: center;}
.drop-photo img{float: none !important;display: inline-block;vertical-align: top;height: 100%;width: auto;margin:0 -100%;}
.drop-photo .shadow{position: absolute;width: 880px;height: 160px;left: 50%;margin-left: -440px;bottom: 5.8%;background-color:rgba(0,0,0,0.5);border-radius: 75px;z-index: 9;}
.drop-photo table{	position: absolute;	left: 50%;margin-left: -300px;height: 160px;bottom: 5.8%;width: 445px;font-size: 28px;line-height: 34px;text-align: left;z-index: 10;}
.drop-photo table,.drop-photo table a{color: #fff;}
.drop-photo table a:hover{color: #dfdfdf !important;}
.drop-photo .num{position: absolute;left: 50%;margin-left: 142px;	height: 160px;line-height: 160px;	bottom: 5.8%;width: 170px;text-align: center;font-size: 38px;z-index: 10;color: #fff;}
.drop-photo .num span{font-size: 68px;font-weight: bold;}
.drop-photo .arrow1,.drop-photo .arrow2{position: absolute;width: 58px;height: 58px;bottom: 5.8%;margin-bottom: 51px;cursor: pointer;transition: background 0.2s;z-index: 11;}
.drop-photo .arrow1{background: url(images/scroll/drop-photo-arrow1.png;vpn_img);left: 50%;margin-left: -390px;}
.drop-photo .arrow2{background: url(images/scroll/drop-photo-arrow2.png;vpn_img);right: 50%;	margin-right: -390px;}
.drop-photo .arrow1:hover{background: url(images/scroll/drop-photo-arrow1b.png;vpn_img);}
.drop-photo .arrow2:hover{background: url(images/scroll/drop-photo-arrow2b.png;vpn_img);}


#loading{position: fixed;width: 100%;height: 100%;left: 0px;top: 0px;background: #ead6a8;z-index: 9999;background: url(images/scroll/bg.jpg;vpn_img) no-repeat center center;}
#loading .logo{position: absolute;	width: 9%;height: 3%;left: 3.2%;top: 4%;background: url(images/scroll/logo.png;vpn_img) no-repeat center center;background-size: contain;}
#loading .topic{position: absolute;	width:46%;height:60%;top:5%;left:25%;background: url(images/scroll/loading-topic.png;vpn_img) no-repeat center center;background-size: contain;}
#loading .num{position: absolute;color: #fff;font-weight: bold;text-align: center;border: 2px solid #00c3a2;padding: 3px;top:68%;left: 50%;width: 210px;height:50px;margin-left: -120px;}
#loading .num table{width: 100%;height: 100%;font-size:32px;text-align: center;background: #00c3a2;}
#loading .bottom{position: absolute;width: 100%;height:22%;left: 0px;bottom: 0px;background: url(images/scroll/loading-bottom.png;vpn_img) no-repeat center bottom;background-size: 100% 100%;}

.drop-xilan{display: none;}