body,p,b,dl,dd,table,td,th,input,button,textarea,xmp,pre,img,form,div,ul,ol,li,h1,h2,h3,h4,h5,h6,header,section,nav,footer{margin:0;padding:0;}
img,iframe,acronym{border:0;}
ol,ul,li{list-style:none;}
img,input,label,button,textarea,div{-vertical-align:middle;-webkit-tap-highlight-color: rgba(200,200,200,0);-webkit-appearance: none;}
a {star:expression(this.onFocus=this.blur()); text-decoration:none; } 

*{
	margin:0;
	 padding:0;
	box-sizing:border-box;
}

html, body { -font-family:'黑体';background: #000; font-family: PingFangSC-Regular , 'Microsoft YaHei';-webkit-appearance: none;-webkit-tap-highlight-color: rgba(200,200,200,0);}
.overflow-hidden { overflow:hidden;}
.full { width:100%;}
#box{ width:640px; overflow:hidden;height:100%; position:absolute; left:50%; margin-left:-320px; top:0;-background: url('../images/bg.jpg') no-repeat center top #0080e7; transition: opacity .25s ease; -webkit-transition: opacity .25s ease;  }
.page { width:100%; height:100%; position:absolute; left:0; top:0;  background-size:100% 100%; perspective:1000px; -webkit-perspective:1000px; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; display:none;;}
.warp { width:100%; height:100%; position:relative; overflow:hidden;}
.abs { position:absolute;}

.piao { animation:piao 1s ease alternate infinite; -webkit-animation:piao 1s ease alternate infinite;}
@keyframes piao{
	0% { transform:translateY(0px);}
	100% {transform:translateY(7px);}	
}
@-webkit-keyframes piao{
	0% { -webkit-transform:translateY(0px);transform:translateY(0px);}
	100% {-webkit-transform:translateY(7px);transform:translateY(7px);}	
}

.arrow_down { animation:arrow_down 1s ease none infinite; -webkit-animation:arrow_down 1s ease none infinite;}

@keyframes arrow_down {
	from { transform:translateY(0px);opacity:1} to {transform:translateY(8px); opacity:0}	
}
@-webkit-keyframes arrow_down {
	from {  -webkit-transform:translateY(0px);opacity:1}to {-webkit-transform:translateY(8px); opacity:0}	
}

.zhuan { animation:zhuan 1.5s linear none infinite; -webkit-animation:zhuan 1.5s linear none infinite;}
@keyframes zhuan {
	from { } to {transform:rotate(360deg);}	
}
@-webkit-keyframes zhuan {
	from { } to {-webkit-transform:rotate(360deg);}	
}


/*
@ CSS 区
*/

.guidee { 
	width: 100%; height: 100%; position: fixed; left: 0; top: 0; overflow: hidden; overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: none; background: rgba(0,0,0,0.7);
}



.page1 {
	
}


.p2-an6.move { animation:cloud 8s linear none infinite; -webkit-animation:cloud 8s linear none infinite;}
.p2-an7.move { animation:cloud 9.5s 1.7s linear none infinite; -webkit-animation:cloud 9.5s  1.7s linear none infinite;}

@keyframes cloud {
	0% { transform:translateX(-0px);}
	100% {
		 transform:translateX(1100px);
	} 	
}
@-webkit-keyframes cloud {
	0% { -webkit-transform:translateX(-0px);}
	100% {
		 -webkit-transform:translateX(1100px);
	} 	
}


.pop { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 9199; background: rgba(0,0,0,1); display: none;}
.pop-main { width:606px;  position: relative; margin-left:17px; top:50%; transform:translateY(-55%); -webkit-transform:translateY(-55%); color:#fff; text-align:center;}
.pop-title{ font-size:32px;}
.pop-box { width:100%; overflow:hidden; height:401px; margin-top:40px; position:relative;}
.pop-box img { width: 606px; transition: all ease .04s; -webkit-transition: all ease .04s; }
.pop-info { width:85%; margin:25px auto 0; line-height: 26px; min-height: 26px; font-size: 20px;}
.pop-box-slide { width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.pop-close { width:100px; height: 100px; background: url(../images/close.png) no-repeat center center; margin:20px auto; cursor:pointer;}
.dots { margin:20px auto; width:100%;}
.dots span { width:16px; height:16px; background:#fff; border:3px solid #000; border-radius:50%; display:inline-block; margin:0 5px;}
.dots span.active { background:#000; border:3px solid #fff;}
.pop-beizhu { width: 100%; text-align: right; height: 20px; line-height: 20px; color: #c8c8c8; font-size: 16px; padding-right: 15px; margin: 15px 0 0;}

.peizhi-dots { margin:20px auto; width:100%; text-align: center;}
.peizhi-dots  span { width:16px; height:16px; background:#fff; border:3px solid #000; border-radius:50%; display:inline-block; margin:0 5px;}
.peizhi-dots  span.active { background:#000; border:3px solid #fff;}

.arrow-left { background:url(../images/arrow-left.png) no-repeat; width:63px; height:62px; position:absolute; left:1%; top:50%; margin-top:-31px; z-index: 20; transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);}
.arrow-right { background:url(../images/arrow-right.png) no-repeat; width:63px; height:62px; position:absolute; right:1%; top:50%; margin-top:-31px; z-index: 20;}

.swipe-ts-layer {  width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 9199; display: none; }
.swipe-ts-warp {  width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.6);}
.swipe-ts{ -background:url(../images/swipe-2.png) no-repeat; width:304px; height:506px; position:absolute; left:50%; margin-left:-152px; top:57%; margin-top:-253px;}
.swipe-ts img{ position:absolute; left:0; top:0;}



.logo { background: url(../images/logo.png) no-repeat; width: 446px; height: 49px; position: absolute; left:50%; margin-left:-223px; top:70%; }

.q-footer.done .arrow { animation:amove .6s ease none infinite; -webkit-animation:amove .6s ease none infinite; }
.q-footer.done .gray{ opacity: 0;}

@keyframes amove { from { transform: translate(-3px,0) ; opacity: 1;} to { transform: translate(10px,0); opacity: 0;}}
@-webkit-keyframes amove { from { -webkit-transform: translate(-3px,0) ; opacity: 1;} to { -webkit-transform: translate(10px,0); opacity: 0;}}

.page1 {-background: url(../images/kv.jpg) no-repeat center bottom;}
.stage{ position:absolute; left:0; top:50%;width:640px; height: 1136px; transform: translateY(-50%); -webkit-transform: translateY(-50%); }

.stage.x { width: 100%; height: 100%; top: 0; transform: translateY(0); -webkit-transform: translateY(0); } 
.kv.x { width: 100%; height: 100%;}

.drag-layer { position: absolute; left: 0; bottom: 0; width: 640px; height: 640px; z-index: 10; transform-style:preserve-3d; -webkit-transform-style:preserve-3d;}
#earth { position: absolute; left: 0; bottom: 0;}
.local { width: 90px; height: 90px; background: #fff; border-radius: 50%; position: absolute; transform-origin: left bottom; -webkit-transform-origin: left bottom; transition: all ease .5s; -webkit-transition: all ease .5s; transform: scale(0); -webkit-transform: scale(0); }
.local-adreess { z-index: 5; position: absolute; left: 21px; top: -80px;}


.adly { left: 295px; bottom: 270px;}
.qzgy { left: 330px; bottom: 280px;}
.sbdb { left: 310px; bottom: 280px;}
.meiguo { left: 310px; bottom: 280px;}

.p1-1 { position:absolute; left:50%; margin-left:-270px; top:15%;}
.p1-btn { background:url(../images/button.png) no-repeat; width:492px; height:126px; position:absolute; left:50%; margin-left:-246px; bottom:5%;}
.p1-btn-box { width:240px; height:119px; position:absolute; left:50%; margin-left:-120px; top:5px; -background:red; overflow:hidden;}
.line-top { width:60px; height:2px; background:#fff; position:absolute; left:0; top:0; animation: line_ltr 1.5s linear none infinite; -webkit-animation: line_ltr 1.5s linear none infinite;}
.line-bottom { width:60px; height:2px; background:#fff; position:absolute; right:0; bottom:0;animation: line_rtl 1.8s linear none infinite; -webkit-animation: line_rtl 1.8s linear none infinite;}

@keyframes line_rtl { from { transform: translateX(60px)} to { transform: translateX(-300px) }}
@-webkit-keyframes line_rtl { from { -webkit-transform: translateX(60px)} to { -webkit-transform: translateX(-300px) }}

@keyframes line_ltr { from { transform: translateX(-60px)} to { transform: translateX(300px) }}
@-webkit-keyframes line_ltr { from { -webkit-transform: translateX(-60px)} to { -webkit-transform: translateX(300px) }}



.p2-1 { position:absolute; left:50%; margin-left:-270px; top:15%;}
.test-drive { background:url(../images/menu-left.png) no-repeat; width:64px; height:65px; position:absolute; left:3%; top:20px; z-index:5;}
.menu-btn   { background:url(../images/menu.png) no-repeat center center; width:62px; height:65px; position:absolute; right:2%; top:20px; z-index:5;}
.loading-layer { position:absolute; left:0; top:0; z-index:999909; width:100%; height:100%; display:none;}

@keyframes css33 { from{ transform:scale(1); opacity:.5} to{ transform:scale(2); opacity:0}}
@-webkit-keyframes css33 { from{ -webkit-transform:scale(1); opacity:.5} to{ -webkit-transform:scale(2); opacity:0}}

.yuan { width:100%; height:100%;  background:#fff; border-radius:50%; -webkit-border-radius:50%; position:absolute; left:0; top:0;}
.yuan_anima {animation:css34 1.5s ease 0s  none infinite; -moz-animation:css34 1.5s ease 0s  none infinite;-webkit-animation:css34 1.5s ease 0s  none infinite;  }

.yuan_anima2 {animation:css34 1.5s ease 1s  none infinite; -moz-animation:css34 1.5s ease 1s  none infinite;-webkit-animation:css34 1.5s ease 1s  none infinite;  }

.yuan_anima3 {animation:css34 1.5s ease 0.5s  none infinite; -moz-animation:css34 1.5s ease 0.5s  none infinite;-webkit-animation:css34 1.5s ease 0.5s  none infinite;  }

@keyframes css34 { from{ transform:scale(1); opacity:.8} to{ transform:scale(2.2); opacity:0}}
@-webkit-keyframes css34 { from{ -webkit-transform:scale(1); opacity:.8} to{ -webkit-transform:scale(2.2); opacity:0}}

.btn-box { width:45px; height:45px; background:#fff; border-radius:50%; text-align:center; line-height:40px; font-size:30px; color:#a02323; opacity:.8; position:absolute;}
.btn-box::before {
	content:'+'
}
.text-box { text-align:center; width:100%; position:absolute; left:0; top:15%;}
.text-box-1 { width:95%; position:absolute; left:2%; top:14%; text-align: right;}
.btn-warp { text-align:center; width:100%; position:absolute; left:0; bottom:3%; text-align:center; z-index: 30; display: none;}
.page-btn { background:url(../images/button-bg.png) no-repeat; width:311px; height:109px; line-height:109px; text-align:center; color:#a02323; display:inline-block; font-weight:bold; letter-spacing:2px; cursor:pointer; font-size: 24px;}
 
.hot-warp {  width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 919; display: none; }


.swipeUp { animation: swipeUp .7s ease none infinite; -webkit-animation: swipeUp .7s ease none infinite;  }
@keyframes swipeUp { from { transform: translateY(0); opacity: 1;} to { transform: translateY(-30px); opacity: 0; } }
@-webkit-keyframes swipeUp { from { -webkit-transform: translateY(0); opacity: 1;} to { -webkit-transform: translateY(-30px); opacity: 0; } }

.swipeDown { animation: swipeDown .7s ease none infinite; -webkit-animation: swipeDown .7s ease none infinite;  }
@keyframes swipeDown { from { transform: translateY(0); opacity: 1;} to { transform: translateY(30px); opacity: 0; } }
@-webkit-keyframes swipeDown { from { -webkit-transform: translateY(0); opacity: 1;} to { -webkit-transform: translateY(30px); opacity: 0; } }

.swipeLeft { animation: swipeLeft .7s ease none infinite; -webkit-animation: swipeLeft .7s ease none infinite;  }
@keyframes swipeLeft { from { transform: translateX(0); opacity: 1;} to { transform: translateX(-30px); opacity: 0; } }
@-webkit-keyframes swipeLeft { from { -webkit-transform: translateX(0); opacity: 1;} to { -webkit-transform: translateX(-30px); opacity: 0; } }

.swipeRight { animation: swipeRight .7s ease none infinite; -webkit-animation: swipeRight .7s ease none infinite;  }
@keyframes swipeRight { from { transform: translateX(0); opacity: 1;} to { transform: translateX(30px); opacity: 0; } }
@-webkit-keyframes swipeRight { from { -webkit-transform: translateX(0); opacity: 1;} to { -webkit-transform: translateX(30px); opacity: 0; } }

@keyframes phone { from { transform: translateX(-20px); } to { transform: translateX(20px); } }
@-webkit-keyframes phone { from { -webkit-transform: translateX(-20px);} to { -webkit-transform: translateX(20px); } }


.phone { animation: phone  .8s linear alternate infinite; ; -webkit-animation: phone .8s linear alternate infinite;  }
.handmove { animation: handmove .8s linear .2s alternate infinite; -webkit-animation: handmove  .8s linear .2s alternate infinite;  }
@keyframes handmove { from { transform: translateY(0);} to { transform: translateY(-30px);  } }
@-webkit-keyframes handmove { from { -webkit-transform: translateY(0);} to { -webkit-transform: translateY(-30px); } }



.nav-warp { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 9299; background: rgba(0,0,0,1); display: none;}
.nav-warp ul { position: relative; top: 50%; transform: translateY(-60%); -webkit-transform: translateY(-60%); }
.nav-warp ul li { width: 228px; height: 60px; line-height: 60px; color: #fff; margin: 80px auto; font-size: 30px; text-align: center; font-weight: 100;}
.nav-warp ul li a{ color: #fff;}
.nav-warp ul li.active{ border: 1px solid #fff;}
.nav-close   { background:url(../images/x.png) no-repeat center center; width:62px; height:65px; position:absolute; right:2%; top:20px; z-index:5;}

.tvc-btn { background: url(../images/tvc.png) no-repeat center center; width: 102px; height: 115px; position: absolute; right: 20px; top:38%; z-index:11; }

.drag-ts { width:482px; height:704px; background:url(../images/swipe-bg.png) no-repeat; position:absolute; left:0; bottom:-115px;}
.swiper-arrow1 { position:absolute; left:192px; top:70px; animation:drag_ts1 .7s linear none infinite; -webkit-animation:drag_ts1 .7s linear none infinite;}
.swiper-arrow2 { position:absolute; right:25px; bottom:184px;animation:drag_ts2 .7s linear none infinite; -webkit-animation:drag_ts2 .7s linear none infinite;}

@keyframes drag_ts1 { from { transform: translate(0,0); opacity: 1;} to { transform: translate(-20px,-25px); opacity: 0; } }
@-webkit-keyframes drag_ts1 { from { -webkit-transform: translate(0,0); opacity: 1;} to { -webkit-transform: translate(-20px,-25px); opacity: 0; } }

@keyframes drag_ts2 { from { transform: translate(0,0); opacity: 1;} to { transform: translate(15px,25px); opacity: 0; } }
@-webkit-keyframes drag_ts2 { from { -webkit-transform: translate(0,0); opacity: 1;} to { -webkit-transform: translate(15px,25px); opacity: 0; } }
.earth-yuan { position:absolute; left:-263px; bottom:-455px; transform-style:preserve-3d; -webkit-transform-style:preserve-3d;}

.kv { position:absolute; left:0; bottom:0; width:100%;}


.test-drive-pop ,.peizhi-pop {width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 9299; background: rgba(0,0,0,1); display: none;}
.make{ width:97%; height:auto; margin: 0 auto; margin-left: 2%; font-size: 21px; }
.make h2 { color: #fff; text-align: center; margin: 30px auto 40px;}
.make .forms{ width:95%; height:auto; margin: 0 auto;}
.make .forms div:not(.tsetSelect){ height:62px; width:100%; margin-bottom: 20px; line-height: 62px; overflow: hidden; }
.make .forms div b:before{ content:"*"; color: #e40c2a; float: left;}
.make .forms div input{ width:70%; height:100%; border:1px solid #9d9d9d; float: left; text-indent: 10px; line-height:62px; background: none; color: #fff; font-size: 22px; }
.make .forms div b{ font-weight: normal; float: left; width:25%; text-align: left; color: #c8c8c8; }
.make .forms div .tsetSelect{ display: inline-block; width: 34%; height:100%; border:1px solid #9d9d9d; margin-right: 15px; position: relative; float: left; text-align: left; text-indent:10px; }
.make .forms div .tsetSelect:after{ content:""; display: block; width:15px; height:15px; border: 1px solid #9d9d9d; position: absolute; right:10px; top:15px; transform: rotate(45deg); -webkit-transform: rotate(45deg); border-top-color: transparent; border-left-color: transparent; }
.make .forms div .tsetSelect span{ float: left; width:80%; border-right: 1px solid #9d9d9d; height:100%; color: #fff; }
.make .forms div .tsetSelect select{ width:100%; opacity: 0; height:100%; position: absolute; top:0; left:0; }
.make .agree{  margin: 30px auto 15px; width:95%; line-height: 30px;     padding-left: 30px;position: relative;text-align: left; color: #c8c8c8;}
.make .agree em { font-style:normal;}
.make .agree span{ margin-right: 10px; display: inline-block; width:25px; height:25px; background: #e40c2a; float: left; margin-top: 5px;position: absolute;left: 0;}
.make .agree span .check{ background: url("../images/check.png") no-repeat center center; display: block; width:100%; height:100%; -background-size: 90%; }
.make .sure{ width:93.5%; height:69px; background: #e40c2a; color: #fff; line-height: 69px; margin: 25px auto 30px; text-align: center; font-size: 26px; letter-spacing: 3px;font-style:normal; }
.address22 {
    float: right;
    width: 75%;
    padding: 0 10px 0 0;
    text-align: left;
    line-height: 35px;
    margin-top: 16px; color: #c8c8c8;
}
.test-drive-close,.peizhi-close { width:100px; height: 100px; background: url(../images/close.png) no-repeat center center; margin:20px auto; cursor:pointer;}
.peizhi-btn { background:url(../images/peizhi-btn.png) no-repeat; width:61px; height:63px; position:absolute; left:16.5%; top:22px; z-index:5;}

.peizhi-main { width: 606px; margin-left: 17px; -margin-top: 60px; -background: #181818; -height:800px; position: relative; top: 50%; transform: translateY(-49%); -webkit-transform: translateY(-49%); overflow: hidden; }
.peizhi-slide { width: 100%; height: 700px; position: relative; letter-spacing: 0; -top: 100px; }
.peizhi-slide .swiper-slide { text-align: center;}
.peizhi-slide .swiper-slide img { margin-top: 25px;} 
.peizhi-slide .swiper-slide a { width: 170px; height: 55px; line-height: 55px; text-align: center; color: #fff; font-size: 20px; letter-spacing: 2px; background: #e7001d; display: block; position: absolute; right: 2%; bottom: 2%;}
.price-box { color: #fff; font-size: 17px; position: absolute; right:8.5%; bottom: 12%; text-align: left;}
.price-box span { font-size: 28px;}

.peizhi-arrow1 { width: 60px; height: 60px;background:url(../images/arrow-left-2.png) no-repeat; position: absolute; z-index: 4; left: 0; top: 40%; }
.peizhi-arrow2 { width: 60px; height: 60px;background:url(../images/arrow-right-2.png) no-repeat; position: absolute; z-index: 4; right: 0; top: 40%; }

.zhongli-ts {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 9299; background: rgba(0,0,0,.6); display: none; z-index: 99;}
.zhongli-ts-main { width: 479px; height: 304px; background:url(../images/zhongli-2.png) no-repeat; position: absolute; left:50%; margin-left: -239px; top: 50%; margin-top: -152px;}
.zhongli-ts-main img { position: absolute; letter-spacing: 0; top: 0;}

.swiper-slide{ overflow:hidden; overflow-x:scroll; -webkit-overflow-scrolling:touch;}
.zhongli-ts .phone { top:-110px; left:40px;}
.peizhi-close { margin-top: 0;}


.bai_tan{ position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.4); z-index: 10000000; 
    width: 100%; height: 100%; display: none; font-size:20px; }
.bai_tan .v1{ width: 100%; height: 80%; position: fixed; top: 10%; left: 0; background: #fff; font-style: normal;
 position: relative; }
.bai_tan .v1 .v1_1{  background: #333; box-shadow: 2px 2px 5px #333; height: 60px; line-height: 60px;
 position: relative;  border-bottom: 1px solid #444; padding: 0px 15px;  position: relative;
 font-size: 24px; color: #fff;}
 .bai_guan{ position: absolute; top: 0; right: 0; height: 60px; z-index: 100; }

.v1_2{ height: 80%; overflow-y: auto; width: 90%; margin-left: 5%; -webkit-overflow-scrolling:touch; }
.bai_tan .p1{ font-size: 22px; font-weight: bold; padding-top:30px; line-height:35px;}
.bai_tan .p2{ font-size: 19px; line-height: 30px; margin-top: 15px; }
.bai_tan .p3 .b1{ font-size:22px; margin-bottom: 10px; }
.bai_tan .p3{ font-size: 18px; line-height: 30px; margin-top:20px; }
.bai_tan .p3 .b2{ margin-bottom: .2rem; }
.bai_tan .p3 b{ display: block; }
.bai_tan .p3 .b1_1{ margin-top: .15rem; }

.bai_shi{ display: none;}
.bai_shi video{ position: fixed; top: 50%; left: 0; width: 100%; margin-top: -120px; z-index: 100000001; }
.bai-bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100% ; z-index: 10000000;background: rgba(0,0,0,0.4);
 }
 .peizhi-title { width: 100%; height: 70px; background: url(../images/new3-5.png) no-repeat center center; margin: 10px auto 0;}


/* loading */

	

.ajaxloading { -background:url(../images/loading.gif) center no-repeat rgb(0,0,0); width:100%; height:100%; position:fixed; left:0; top:0; z-index:999999; opacity:0.6; display:none;}
#loadwarp { width:640px; height:100%; position:fixed; left:50%; margin-left:-320px; top:0; z-index:59999999;overflow:hidden; background: url(../images/loadingbg.jpg) no-repeat center -30px #000; -background:#fff; -background-size:100% auto;}
#loadwarp p {color: #fff; text-align:center; position:absolute; top:62%; line-height:60px; font-size:28px; width:100%; }
#loadwarp2 { width:640px;  height:100%; position:fixed; left:50%; margin-left:-320px;top:0; z-index:59999999; background:rgba(0,0,0,0.75);  display:none;}
.loading-canvas {width:100px;height:100px; position:absolute;left:50%;top:50%;margin:-55px 0 0 -55px;}
.loadingwarp {width:80px;height:80px;-border:5px solid rgb(158,136,112);border-radius:50%; -webkit-border-radius:50%;}
