html,body,.index-container{ height: 100%;}
body{ min-width: 1200px; background: url("../images/bg.jpg") repeat;}
.index-container{ width: 100%; height: 100vh; overflow: hidden;
    transition-timing-function: cubic-bezier(.26,.71,.21,.96);
}
.index-container .swiper-wrapper{ height: 100%;}
.index-container .swiper-slide{ width: 100%; height: 100%; position: relative;}

.p2-page{ overflow: hidden;}
.p2-container{ width: 100%; height: 100%; position: relative;}
.index-container .swiper-slide,.p2-container{ height: 100vh; background-repeat: no-repeat; background-size: cover; background-position: center center;}
.index-container .bg1{ background-image: url('../images/banner/img1.png');}
/* .index-container .bg2{ background-image: url('../images/banner/img2.jpg');}
.index-container .bg3{ background-image: url('../images/banner/img3.jpg');}
.index-container .bg4{ background-image: url('../images/banner/img4.jpg');}
.index-container .bg5{ background-image: url('../images/banner/img5.jpg');}
.index-container .bg6{ background-image: url('../images/banner/img6.jpg');} */
.index-container .footer{ height: 70px; font-size: 14px; color: #7f7f80; text-align: center;}
.index-container .footer span{ margin-top: 26px; display: inline-block;}

.p1-content{ position: absolute; left: 40.3%; top:50%; bottom: 0; margin-top: -208px;}
/* .p1-content .code-frame{ width: 340px; height: 190px; margin: 6.8vw 0 0 10px; position: relative; background: url('../images/bg1.png') repeat-x; display: flex; justify-content: space-between;} */
.p1-content .code-frame{ width: 154px; height: 190px; margin: 1.8vw 0 0 228px; position: relative; }
.p1-content .code img{ width: 140px;}
.p1-content .code span{ display: block; font-size: 16px; color: #fff; text-align: center; margin-top: 10px;margin-right: 10px;}
.p1-content .code-move{ animation: move 0.8s linear;}
@keyframes move {
    0%,40%,80%,100%{ transform: scale(1);}
    20%,60%{ transform: scale(1.1);}
}

.bg-circle{ width: 90vmin; height: 90vmin; position: absolute; left: 10%; top: 5vmin; }
.bg-circle div{ width: 100%; height: 100%;  position: absolute; top: 0; left: 0; background-color: #fff; border-radius: 50%; opacity: 0;}
.bg-circle div:first-child{animation: bgCircle 6s linear 0s infinite;}
.bg-circle div:nth-child(2){animation: bgCircle 6s linear 1.5s infinite;}
.bg-circle div:nth-child(3){animation: bgCircle 6s linear 3s infinite;}
.bg-circle div:nth-child(4){animation: bgCircle 6s linear 4.5s infinite;}
@keyframes bgCircle {
    0%{ transform: scale(0.1); opacity: 0.04;}
    90%{ transform: scale(1); opacity: 0.02;}
    100%{ transform: scale(1); opacity: 0;}
}

.icon-arrow{ width: 14px; height: 9px; display: inline-block; background: url('../images/arrow.png') no-repeat;}

header{ min-width: 1200px; position: fixed; top: 20px; left: 30px; right: 30px; z-index: 1100; }
/* header .logo{ position: absolute; top: 0; left: 0; font-size: 26px; letter-spacing: 1px; color: #FFFFFF; display: flex; align-items: center; } */
header .logo {position: absolute; top: 0; left: 0;}
header .logo img { width: 170px; margin-right: 10px; }
header .phoneNumber{ position: absolute; top: 0; right: 0;}
.dropdown {position: relative;user-select: none;top: -10px;color: white;font-size: 20px;}
.arrowdropdown {top: 2px;position: relative;left: -6px;}
.dropdown-button {color: white;}
.expand-button {top: -25px;color: white;transform: translate(0, 2px) rotate(180deg);transform-origin: center;transition: all 0.3s;}
.dropdown-content {
  display: none;
  position: absolute;
  left: -36%;
  top: 100%;
  background-color: white;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
  width: 221px;
  height: 138px;
  border-radius: 10px; /* 设置圆角的大小 */
}
.dropdown-content-phone {
  margin:5px 18px
}
.dropdown-content::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-width: 10px; /* 三角形的大小 */
    border-style: solid;
    border-color: transparent transparent transparent white;; /* 左上角透明，右上和下为背景色 */
}
.dropdown-content li {
    list-style: none;
    padding: 8px;
    cursor: pointer;
}
.dropdown-content li:hover {
    background-color: #eee;
}
header nav{
    transition: all 0.3s cubic-bezier(.53,.09,.58,.98);
    -webkit-transition: all 0.3s cubic-bezier(.53,.09,.58,.98);
    -moz-transition: all 0.3s cubic-bezier(.53,.09,.58,.98);
    -o-transition: all 0.3s cubic-bezier(.53,.09,.58,.98);
}
.header-up nav{ margin-top: -160px;}
header nav ul{ width: 390px; margin: 18px auto 0 auto;}
header nav ul li{ float: left; margin: 0 20px;}
header nav ul li a{ font-size: 16px; color: #fff; padding-bottom: 14px; position: relative;}
header nav ul li a:after{ content: ''; width: 0; height: 8px; background-color: #fff; position: absolute; bottom: 0; left: 0; border-radius: 5px; transition: all 0.3s cubic-bezier(.53,.09,.58,.98);}
header nav ul li:hover a:after{ width: 100%;}
header nav ul li:hover .car-list{ height: 640px;}
header nav ul li a i{ margin-left: 3px;}

.car-list{height:0; position: absolute; top: 72px; left: -30px; right: -30px; background-color: #fff; z-index: 200; overflow: hidden;
    transition: height 0.3s cubic-bezier(.53,.09,.58,.98);
}
.car-list ul{ width: 1250px; display: flex; margin: 30px auto 10px auto; flex-wrap: wrap;}
.car-list ul li{ width:250px; height: 140px; text-align: center; margin: 0 0 10px 0;}
.car-list ul li img{transition: all 0.2s cubic-bezier(.53,.09,.58,.98);}
.car-list ul li img:hover{ transform: scale(1.1);}
.car-list ul li p{ font-size: 14px;}

.phone{ position: fixed; left: 16.5%; top: 15%; bottom: 10%; z-index: 100; transform-origin:0 50%; transition: all 1s cubic-bezier(.26,.71,.21,.96); }
.phone-small{ transform:translate(0,75px) scale(0.75);}
.phone-right{ left: 65.7%; transform:translate(0,0) scale(0.75) rotateZ(0deg);}
.phone-right2{ left: 65.7%; transform:translate(0,0) scale(0.75) rotateZ(0deg);transition-duration: 0.4s;  }

.phone-left{ left: 24%; transform:translate(0,0) scale(0.75);}

.phone-bottom{ left: 61%; transform:translate(0,-70px) scale(0.75);transition-duration: 0.4s;}
.phone img{ width: auto; height: 100%;}
.phone img.cover{ width: auto; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; opacity: 1;}
.phone .frame{ width: 88%; height: 92.7%; position: absolute; top: 2.57%; left: 6%; background-color: #fff; overflow: hidden; border-radius: 30px;}
.phone .frame ul{ width: 600%; overflow: hidden; transition:all 0.5s cubic-bezier(.2,.69,.17,.94);}
.phone .frame ul li{ width: 16.667%; float: left;}
.phone .frame ul li img{ width: 100%; height: 100%;}

.title{ width: 100%; height: 90px; font-size: 0; text-align: center;}
.title img{ margin-top: 20px;}
.intro{
   width: 100%;
   text-align: center;
   position: absolute; top: 50%; left: 0;
    transition:all 0.5s cubic-bezier(.2,.69,.17,.94);
    transform: translate(200px, -50%);
   opacity: 0;
}
.intro img { width: 12.3vw;}
.intro p { font-size: 1.67vw; color: #ffffff; margin-top: 20px;}
/*.intro2{ transform: translate(200px,0); opacity: 0;}*/
/*.intro3{ transform: translate(200px,0); opacity: 0;}*/
/*.intro4{ transform: translate(200px,0); opacity: 0;}*/
/*.intro5{ transform: translate(200px,0); opacity: 0;}*/
.introReset{ transform: translate(0, -50%); opacity: 1;}

.arrow-down{ position: absolute; bottom: 20px; left: 50%; margin-left: -20px; cursor: pointer;}
.arrow-down .rect{ animation: rect 3s linear infinite; transform-origin: 20px 11px;}
@keyframes rect {
    0%{ transform: rotateZ(0deg);}
    100%{ transform: rotateZ(360deg);}
}
.arrow-down .arrow{ position: absolute; top: 0; left: 0; animation: arrow 1.5s linear infinite;}
@keyframes arrow {
    0%{ transform: translate(0,0); opacity: 1;}
    50%{ transform: translate(0,6px); opacity: 1;}
    80%{ transform: translate(0,6px); opacity: 0;}
    100%{ transform: translate(0,6px); opacity: 0;}
}

.nav-dot{ position: fixed; top: 50%; right: 30px; z-index: 1000; margin-top: -49px;}
.nav-dot span{ width: 10px; height: 10px; display: block; border-radius: 50%; background-color: #ffd376; margin: 8px 0; opacity: 0.5; filter:Alpha(opacity=50); transform: scale(0.8); transition: all 1s cubic-bezier(.26,.71,.21,.96);}
.nav-dot span.active{ opacity: 1;filter:Alpha(opacity=100); transform: scale(1);}