/* reset */
@import"keyframes.css";
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:24px/1.65 Arial,sans-serif;  color:#FFF;outline:0;}
body{background:#000; overflow-x:hidden; text-align:center;min-height: 300vh }
a,a:hover{color:#333;}
.p-fix{position: fixed;}
.clear{clear:both;}
svg * {fill: none;stroke: currentColor;}
.rotateY{transform: rotateY(180deg);}
#main{width:750px; overflow-x:hidden; margin:0 auto; background:url(../images/bigbg.jpg) top center; background-size: 100%;}
/*阿里iconfont*/
@font-face {
  font-family: 'iconfont';  /* Project id 569108 */
  src: url('//at.alicdn.com/t/c/font_569108_36d6nagzcvt.woff2?t=1706068174532') format('woff2'),
       url('//at.alicdn.com/t/c/font_569108_36d6nagzcvt.woff?t=1706068174532') format('woff'),
       url('//at.alicdn.com/t/c/font_569108_36d6nagzcvt.ttf?t=1706068174532') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
/*SVG线框动画*/
.illustration {
	position: absolute;
	top: 50%;
	left: 50%;
	max-height: 100%;
	max-width: 100%;
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}


svg {
	pointer-events: none;
}

.drawings {
	position: relative; font-size: 0;
}

.show {
	opacity: 1;
	animation: Transformfiltercontrast 1s ease-in-out;
}

.hide {
	opacity: 0;
}

.line-drawing,
.illustration {
	/*-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;*/
}

.line-drawing path {
	fill: none;
	stroke: white;
	stroke-width: 2;
}

path.line-round {
	stroke-linecap: round;
}

path.stroke-medium {
	stroke-width: 2;
}

path.stroke-thin {
	stroke-width: 1;
}


/*head*/
#header{height:100px; background:#F6E500; position:relative; z-index:101; text-align:center;  margin:0 auto;}
#header .logo{margin:0 auto; padding:10px 0 10px 0; height:75px;  display:inline-block; }
#header .logo img{height:75px;}
#header .head-bar{ max-width:90%; height:5px; background:#000; margin:0 auto; animation: headbar 2s ease-in-out;}
@keyframes headbar
{
0%   {width: 0; opacity:0}
100% {width: 90%; opacity:1}
}
	#header .menu_icon{width:100px; height:100px;position:absolute; right:0; top:0; z-index:5; }
	#header .menu_icon span{width:45px; height:4px; background:#000; display:block; position:absolute; left:25px;-webkit-transition: all linear 0.3s; transition: all linear 0.3s;}
	#header .menu_icon span.line1{top:35px; width:21px; left:49px;}
	#header .menu_icon span.line2{top:50px;  width:16px; left:54px;}
	#header .menu_icon span.line3{top:65px;}
	#header .menu_icon.on span.line2{-webkit-transform:rotateY(90deg); transform:rotateY(90deg); left:40px; opacity:0;}
	#header .menu_icon.on span.line1{-webkit-transform:rotate(45deg); transform:rotate(45deg); top:50px; width:45px; left:25px;}
	#header .menu_icon.on span.line3{-webkit-transform:rotate(135deg); transform:rotate(135deg);top:50px; }
	#header .menu_icon img{width:25px; height:25px; position:absolute; left:25px; top:35px; -webkit-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s;}
	#header .menu_icon.on img{-webkit-transform:rotate(275deg); transform:rotate(275deg); left:-100px; opacity:0; width:35px; height:35px;}
	#header .menu_back{width:100px; height:100px; background:url(/m/static/img/menu_back.svg) center center no-repeat; background-size:48px; position:absolute; left:0; top:0; cursor:pointer; display:none;}
	#header .menu_back2{width:100px; height:100px; background:url(/m/static/img/menu_back.svg) center center no-repeat; background-size:48px; position:absolute; left:0; top:0; cursor:pointer; display:none;}

#menu{width:750px;  height: calc(100vh - 100px); position:absolute; top:100px; background:#FFF; display:none; overflow:hidden;}
#menu .title{height:60px; width:750px; color: #000; line-height:36px; font-weight:300; background:#F6E500; font-size:36px;   letter-spacing:5px;}
#menu .title span{width:750px; display:block;}
#menu .list{width:750px; position:absolute; top:60px;}
#menu .list_2{left:750px;}
#menu .list li{height:88px; border-bottom:1px solid #dedede; text-align:left;}
#menu .list li.more{background:url(/m/static/img/right-arr.svg) 95% center no-repeat; background-size:32px;}
#menu .list li a{line-height:88px; display:block; padding:0 20px; font-size:24px; letter-spacing:3px;}

/*KV CSS
 background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
 animation-name: TransformScalebigtosmltext,fadeInDownBigImg; animation-iteration-count:1, infinite; animation-delay:2, 4s; animation-duration:5s,5s;
*/

#homekv{position: relative; height: 1108px;}
#homekv .kv-big-bg{position: absolute; left: 0; top: -100px; animation: homekvbigtosml 1s ease-in-out; z-index: 0}
#homekv .kv-light{position: absolute;left:0; bottom: 80px; animation: lightBGmove 100s linear infinite; width: 1500px; height: 378px; z-index: 2; font-size:-1px;letter-spacing:-800px;}
#homekv .kv-light img{display：block; float: left;}
#homekv .slogan{position: absolute; top: 40px; left: 50%; width: 500px; transform: translate(-50%, 0); z-index: 10; font-size: 76px; font-weight: 600; letter-spacing: -10px;}
#homekv .slogan em{font-weight: 100; display:inline-block; animation: TransformScalebigtosmltext 0.5s ease-in-out 1 forwards; opacity: 0;}
#homekv .slogan strong{font-weight: 400; display: inline-block; animation: Hometext 0.85s ease-in-out 1 forwards; opacity: 0;}
#homekv .kv-bar{position: absolute; top: 670px; left: 50%; margin-left:-215px;  width: 430px; height: 38px; background:url(../images/kv-bar.svg); background-size: cover; z-index: 10; animation: fadeInDown 1s ease-in-out 1 forwards; animation-delay: 0.75s; opacity: 0;}
#homekv .kv-bar h2{text-align: left; line-height: 38px; font-size: 22px; font-weight: 400; text-indent: 12px;animation: fadeInUpRich 1s ease-in-out 1 forwards; animation-delay: 1s; opacity: 0;}
#homekv .pt5logo{position: absolute; top: 740px; left: 50%; margin-left:-375px; height: 150px; z-index: 10;  animation: ptlogofadeIn 10s ease-in-out infinite alternate forwards; animation-delay: 1.5s; opacity: 0;}
#homekv .pt5logo-n{position: absolute; top: 740px; left: 50%; margin-left:-375px; height: 150px; z-index: 20; animation: fadeInUpRich 1.5s ease-in-out 1 alternate forwards; }
#homekv .new{position: absolute; top: 300px; right: 75px; z-index: 20; animation: TransformScalebigtosmltext 0.5s ease-in-out 1 forwards; animation-delay: 2s; opacity: 0;}
#homekv .maidian{position: absolute; bottom: 130px; left: 50%; width: 492px; margin-left: -246px; z-index: 20;  }
#homekv .maidian .ani-move{animation: TransformScalesmltobig 0.5s ease-in-out 1 forwards; animation-delay: 1.5s;}
#homekv .maidiantext{position: absolute; bottom: 30px; left: 50%; width: 480px; margin-left: -240px; z-index: 20; font-size: 32px;text-align: justify;text-align-last: justify;}
#homekv .maidiantext span:after {content:'';width: 100%;display: inline-block;overflow: hidden;}
#homekv .maidiantext .ani-move{animation: fadeInUpRich 1s ease-in-out 1 forwards; animation-delay: 1.5s;}
#maidian,#maidiantext{opacity: 0}

/* 舞台move */
#wt-move{display: none;}
.hi-icon-wrap-1{position: absolute; bottom: -30px; width: 750px;transform:scale(1.25) rotateX(98deg); z-index: 2;}
.hi-icon-wrap-2{position: absolute; bottom: -25px; width: 750px;transform:scale(1.75) rotateX(98deg); z-index: 1; opacity: 0.85}
.hi-icon-wrap-3{position: absolute; bottom: -20px; width: 750px;transform:scale(2.5) rotateX(98deg); z-index: 0; opacity: 0.5}
.hi-icon {display:inline-block; font-size:0; margin:15px 30px; width:150px; height:150px; border-radius:50%; text-align:center;position:relative;z-index:1;color:#fff; background:rgba(255,255,255,0.1); -webkit-transition:-webkit-transform ease-out .1s,background .2s; -moz-transition:-moz-transform ease-out .1s,background .2s; transition:transform ease-out .1s,background .2s; animation:sonarEffect 1.3s ease-out 75ms infinite;}

/* 按钮特效 */
#startbtn{position:absolute;  width: 750px; height: 75px; left: 0; bottom: 110px; z-index: 21; animation: TransformScalesmltobig 0.5s ease-in-out 1 forwards; display: none;}
#startbtn .button{ padding:15px 40px;  border-radius:20px; background: none; letter-spacing: 3px; font-size: 28px; border:2px solid rgba(255,255,255,0.85); outline: none; color: #FFF }
#startbtn .button .btnicon{font-size: 32px; margin-right: 10px; animation:fadeInUpicon 2s ease-in-out infinite forwards; display: inline-block;}
.particles-canvas{position:absolute;pointer-events:none;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
.particles-wrapper{position:relative;display:inline-block;overflow:hidden}

/*content*/
.tBox1{background: url(../images/t-bg-1.png) no-repeat; height: 254px; width: 750px; overflow: hidden;}
.tBox1 article{text-align: left; padding: 35px 70px 0 90px; font-size: 22px; line-height: 30px; display: block; text-align:justify; text-justify:inter-ideograph; font-weight: 300; opacity: 0.85;}

.vBox1 {height: 482px;background: url(../images/video1bg.png) no-repeat; margin-top: 5px; width: 750px;position: relative;}
.vBox1 .vConten,.vBox2 .vConten{width: 650px; height: 366px; overflow: hidden; background: #000; position: absolute; top: 25px; left: 50px; }
.vBox2 {height: 416px;background: url(../images/video2bg.png) no-repeat; margin-top: 5px; width: 750px;position: relative;}
.videotitle{position: absolute; top: -35px; width: 100%; text-align: center; font-size: 24px; font-weight: 400;}

.proinfo1{width: 750px; height: 1270px; position: relative; background: url(../images/proinfo-long.png) no-repeat;}
.proinfo1 h3,.proinfo2 h3{position: absolute; top: 30px; width: 100%; display: block; font-weight: 400; color: #FFE100; font-size: 40px; line-height: 40px;}
.proinfo1 h4,.proinfo2 h4{position: absolute; top: 150px; width: 100%; display: block; font-weight: 300;font-size: 32px}
.proinfo1 .listtext{position: absolute; left: 60px; top: 280px; width: 350px; text-align: left;}
.proinfo1 .listtext li{margin-bottom: 15px; font-size: 22px;}
.proinfo1 .listtext i{padding-right: 12px;}
.proinfo1 .tire{position: absolute; right: 100px; top: 215px; width: 160px;}
.proinfo1 .testing{position: absolute; top: 520px; width: 100%;}
.proinfo1 .testing p{font-size: 24px; padding-bottom: 30px; }
.proinfo1 .testing .shuoming{font-size: 18px; border:2px solid #AFFFFF; color: #AFFFFF; width: 50%; margin: 0 auto; line-height: 50px; border-radius: 10px;}
.promore{position: absolute; bottom: 4px; width: 60px; left: 50%; margin-left: -30px;background: url(../images/more-1.png) no-repeat;}
.promore a{display: block; width: 60px; height: 60px; animation:Transquan 2s linear infinite forwards;}

.shuoming-mask{width: 100vw; height: 100vh; position: fixed;  left: 0; top: 0; z-index: 9999; background:rgba(0,0,0,0.9);display: none;}
.testshuoming{width: 750px; position:absolute; top: 50%;   left: 50%;   transform: translate(-50%, -50%);}
.testshuoming h6{font-size: 36px; line-height: 100px;}
.testshuoming .tslist{display: flex; font-size: 20px; flex-wrap:wrap; text-align: left; padding: 0 20px;}
.testshuoming .tslist li{width: 50%;opacity: 0.85 }
.testshuoming p{font-size: 20px; text-align: left; display: flex; opacity: 0.85; padding: 20px;}
.testshuoming-back{font-size: 24px; border:2px solid #FFF; color: #FFF; width: 50%; margin: 100px auto; line-height: 80px; border-radius: 10px;}

.proinfo2{width: 750px; height: 662px; position: relative; background: url(../images/proinfo-short.png) no-repeat;}
.proinfo2 h3{top:35px;}
.proinfo2 h4{top:130px;}
.proinfo2 .listtext{width: 640px; top: 440px;}
.proinfo2 .promore{bottom: 11px;}


.proinfo3 .listtext{width: 640px; top: 1100px;}
.proinfo3 .proinfo3img{position: absolute; top: 220px; left: 50%; width: 750px; margin-left: -375px;}

/*尺寸*/
.glowtext{position: absolute; top: 35px; width: 100%; display: block; font-weight: 600;  text-shadow: 2px 2px 15px rgba(138,0,225,1); font-size: 36px; line-height: 40px; }
.tiresize{width: 750px; height: 450px; position: relative; background: url(../images/sizebg.png) no-repeat;}
.tiresize .listtext{position: absolute;top: 130px; width: 150px;text-align: left;}
.tiresize .listtext li{margin-bottom: 5px; font-size: 22px;}
.tiresize .listtext li:first-child{font-size: 40px; font-weight: 600;}
.tiresize .listtext sup{font-size: 20px; font-weight: 300; padding-left: 5px;}
.tiresize .list1{left: 65px;}
.tiresize .list2{left: 230px;}
.tiresize .list3{left: 395px;}
.tiresize .list4{left: 560px;}

/*适配车型*/
.car{width: 750px; height: 400px; position: relative; background: url(../images/carbg.png) no-repeat;}
.car .listtext{position: absolute;top: 140px; width: 120px;text-align: left;}
.car .listtext li{margin-bottom: 5px; font-size: 22px; font-weight: 400; text-align: center;}
.car a{color: #FFF; display: block;}
.car .listtext p{font-size: 18px;  opacity: 0.45 }
.car .list1{left: 60px;}
.car .list2{left: 183px;}
.car .list3{left: 309px;}
.car .list4{left: 437px;}
.car .list5{left: 567px;}
.car .link{width: 430px; height: 130px; position: absolute; top: 250px; left: 161px; }
.car .link p{font-size: 28px; line-height: 28px; letter-spacing: 2px;}
.car .link p:first-child{color: #FFE100;font-size: 20px; padding-right: 10px; line-height: 20px; margin-bottom: 20px;}
.car .btnicon{font-size: 32px; margin-right: 10px; animation:fadeInUpicon 2s ease-in-out infinite forwards; display: inline-block;}

/*店铺*/
.shopbox{width: 750px; height: 860px; overflow: hidden; position: relative; background: url(../images/shopbg.png) no-repeat;}
.shopbox .glowtext{top: 26px; width: 730px;}
.shopbox .glowtext .text1{ font-size: 28px; display: block; }
.shopbox .shoplist{width: 620px; height: 625px; position: absolute; left: 65px; top: 155px; text-align: left;overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }
.shopbox .item{width: 550px; margin-left: 30px; margin-bottom: 20px; padding-top: 20PX; border-top: 1px solid rgba(255,255,255,0.2); position: relative; background: url(../images/right.svg) center right no-repeat;}
.shopbox .item:first-child{border:none;}
.shopbox .item a,.shopbox .item a:hover{color: #FFF; display: block;}
.shopbox .item h5{margin-bottom: 5px; font-size: 24px;}
.shopbox .item p{max-width:400px; font-size: 20px; line-height: 26px; margin-bottom: 5px; opacity: 0.75;}
.shopbox .item p .iconfont{margin-right: 12px;}
.shopbox .item .shopadd{display: block;  padding-left: 32px;}
.shopbox .item .icon{width: 100px; height: 100px; position: absolute; right: 40px; bottom:-10px; text-align: center;  }
.shopbox .item .icon i{color: #FFE100; font-size: 40px; line-height: 70px;}
.shopbox .item .icon span{display: block; font-size: 20px; font-weight: 200; opacity: 0.75}
.shopbox .more{color: #FFF; font-size: 24PX; border: 2PX solid #FFF; width:526px; display: block; margin:40px 0 40px 30px; padding: 10px; text-align: center; border-radius: 10px; letter-spacing: 3px; font-weight: 600;}

/*链接*/
.linkbox{width: 750px; height: 1000px; overflow: hidden; position: relative; background: url(../images/linkbg.png) no-repeat;}
.linkbox .aboutdunlop{position: absolute; width: 100%; height: 190px; top: 170px; font-size: 36px; color: #FFE100 }
.linkbox .aboutdunlop em{font-size: 18px; display: block; font-weight: 300;}
.linkbox .link{position: absolute; width: 270px; height:190px; color: #FFE100 }
.linkbox .link i.iconfont{font-size: 90px; color: #fff; line-height: 120px; margin-top: 10px; display: block;}
.linkbox .link p{ color: #FFE100; font-size: 24px; }
.linkbox .link1{left: 100px; top: 328px;}
.linkbox .link2{left: 378px; top: 328px;}
.linkbox .link3{left: 100px; top: 528px}
.linkbox .link4{left: 378px; top: 528px}
.linkbox .link5{left: 100px; top: 728px}
.linkbox .link6{left: 378px; top: 728px}
.linkbox  a{display: block; color: #FFE100}
.linkbox .jt{position: absolute; width: 80px; height: 80px; top: 170px; right: 170px; animation:fadeInRighticon 2s ease-in-out infinite forwards;}
#wechat_mask {width: 100%;height: 100%;position: fixed;top: 0;left: 0; background: rgba(0,0,0,0.95);display: -webkit-box;-webkit-box-align: center;-webkit-box-pack: center;display: box;box-align: center;box-pack: center;z-index: 1001;}
#wechat_mask img{width:750px;}

footer{background: #FFE100; color: #000; font-size: 20px; padding: 30px 0; margin-top: 50px; border:none;}