.age18{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; transition: 1.8s all; z-index: 1000;}
.age18 .box{ position: relative; width: 100vw; height: 100vh; z-index: 2; justify-content: center; }
.age18 .box p a{ display: inline-block; padding: 0.1em 1.2em; border-radius: 100px; background: rgba(0,0,0,0.5); color: #fff; transition: 0.3s all;}
.age18 .box p a:hover{ padding: 0.1em 2em; background: #e8400b;}
.age18 .box p{ text-align: center; margin-top: 40px;}
.age18 .bg{ width: 100%; height: 100%; position: absolute; left: 0; z-index: 1; top: 0; animation: outfangda 5s linear infinite alternate; }
.age18 .bg img{ width: 100%; height: 100%; object-fit: cover;}
body{ min-height: 100vh;}
.bgcover{ background-position: center center; background-repeat: no-repeat; background-size: cover;}

@-webkit-keyframes outfangda {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  
    100% {
      -webkit-transform:scale(1.2);
      transform: scale(1.2);
    }
  }
@keyframes outfangda {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    
      100% {
        -webkit-transform:scale(1.2);
        transform: scale(1.2);
      }
  }
  
.end18 .age18{ opacity: 0; visibility: hidden; pointer-events: none; }

.wrap{ margin: 0 6.25%;}
.header{ position: absolute; left: 0; top: 0; z-index: 10; width: 100%; padding-top:3% ;}
.header .box{ justify-content: space-between;}
.header .box li{ margin-left: 30px; position: relative;}
.header .box li .a{ padding:7px 1em; display: block;}
.header .box li.cur .a{ font-weight: bold; color: #e8400b;}
.header .box li .child{ position: absolute; left: 50%; top: 100%; background: rgba(255,255,255,0.8); min-width: 100%; white-space: nowrap; padding: 10px; border-radius: 5px; text-align: center; transform: translateX(-50%) translateY(20px); opacity: 0; visibility: hidden; transition: 0.4s all; box-shadow: 0 0 5px rgba(0,0,0,0.1);}
.header .box li:hover  .a{ color: #fff; background: #e8400b; border-radius: 2px;}
.header .box li:hover .child{ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0px);}
.header .box li .child a{ padding: 5px ; display: block;}
.header .box li .child::after{ content: ''; position: absolute; left: 50%;  top: -10px; width: 0; height: 0; border: 5px solid rgba(0,0,0,0); border-bottom-color: rgba(255,255,255,0.8); transform: translateX(-50%);}
.header .last img{ width: 27px; height: 29px;}
.header .last .i2{ display: none;}
.header .last a:hover .i2{ display: block;}
.header .last a:hover .i1{ display: none;}

.footer{ position: absolute; z-index: 10; bottom: 0; padding-bottom: 3%; right: 6.25%;  }

.footer .box{ text-align: right;}
.footer .share{ justify-content: flex-end; margin-bottom: 10px;}
.footer .share .playa{ border-radius: 5px; overflow: hidden;}
.footer .share .playa img{ position: relative; transition: 0.3s all;}
.footer .share .playa:hover img{ opacity: 0.8; transform: scale(1.2);}
.footer .share dl{ display: block; position: relative; margin-left: 10px; cursor: pointer;}
.footer .share dt{ border-radius: 2px; background: rgba(0,0,0,0.5); width:30px ; height: 30px; justify-content: center;}
.footer .share dd{ position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 5px; text-align: center; padding: 10px; margin-bottom: 20px;  opacity: 0; transition: 0.4s all; visibility: hidden;}
.footer .share dd img{ width: 100px; height: 100px; margin-bottom: 2px;}
.footer .share dd::after{ content: ''; position: absolute; left: 50%;  bottom: -10px; width: 0; height: 0; border: 5px solid rgba(0,0,0,0); border-top-color: #fff; transform: translateX(-50%);}
.footer .share dl:hover dd{  margin-bottom:5px ; opacity: 1; visibility:visible;}
.footer .share dl:hover dt{ background: rgba(0,0,0,0.6);}

.home_bg{ position: relative; width: 100vw; height: 100vh; overflow: hidden; }
.home_bg video{ position: absolute; width: 100%; height: 100%; object-fit: cover;}
body{ overflow: hidden;}

.home_gg{ position: absolute; z-index: 100; background: rgba(0,0,0,0.7); left: 0; top: 0; width: 100%; height: 100%; display: none;}
.home_gg .box .close{ position: absolute; right: 0px; top: -40px; cursor: pointer;}
.home_gg .box .close img{ width: 30px; height: 30px; transition: 0.3s all;}
.home_gg .box .close:hover img{ transform: rotate(180deg);}
.home_gg .box{ position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; transform: translate(-50%,-50%);}
.home_gg video{ position: absolute; width: 100%; height: 100%; object-fit: cover; background: #000;}

.sucaiimg{ position: relative; width: 100%; height: 100vh;}
.sucaiimg img{ position: absolute; width: 100%; height: 100vh; object-fit: cover; object-position: center 30%;}

.video-bottom{ position: absolute; z-index: 100; left: 5%; bottom: 20px; z-index: 100;}
.video-bottom a{ display: inline-block; margin: 0 2em 0 0;}
.video-bottom a img{ width: auto; height: 120px; transition:0.5s all;}
.video-bottom a:hover img{ transform: scale(1.1);}

.com-title{ position: absolute; left: 10%; top: 40%; margin-top: -6em; z-index: 100;}


.history-item{ position: absolute; width: 100%; top: 38%; height: 70%; left: 0%; z-index: 10;  overflow:auto;}
.history-item .mCSB_scrollTools.mCSB_scrollTools_horizontal{ width: 200px; left: 10%; bottom: auto; top: 0;}
.history-item .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.history-item .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{ background:#e8400b !important;}
.history-item .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background: rgba(0,0,0,0.7) !important;}
.history-item ul{ white-space: nowrap; padding-left:20vw;}
.history-item li{ display: inline-block; vertical-align: top; padding-top: 2em; width: 30vw;  }

.history-item li dl{ white-space:normal; width: 70%; padding-right: 30%; padding-top: 200px; cursor: pointer; transition: 0.5s all; opacity: 0.8;}
.history-item li dl dt h3{ font-weight: bold;}
.history-item li dl dt h4{}
.history-item li dl article{ height: 0; overflow: hidden; transition: 0.5s all; margin: 2em 0 0;}
.history-item li dl:hover{ margin-top: -2em; opacity: 1;}
.history-item li dl:hover article{ height: 6em;}
.history-item li dl:hover dt{ color: #f00019;}
.history-item li dl:hover .more{ opacity: 1; visibility: visible;}
.history-item li:nth-child(2n) dl{ padding-top: 0px;}
.history-item li .more{ opacity: 0; visibility: hidden; transition: 0.6s all;}
.history-item li .more img{ width: 25px; height: 25px;}
.history-video{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.history-video video{ position: absolute; width: 100%; height: 101%; left: 0; top: 0; object-fit:cover;}

.history-swiper{ position: absolute; width: 90%;  left: 10%; top: 40%; height: 70%; z-index: 10;  overflow:auto;}
.history-swiper dl{ white-space:normal; width: 70%; padding-right: 10%;  padding-left: 20%; cursor: pointer; transition: 0.5s all; opacity: 0.8;  padding-top: 20vh; transition: 0.5s all;}
.history-swiper dl dt h3{ font-weight: bold;}
.history-swiper dl article{ height: 0; overflow: hidden; transition: 0.5s all; margin: 2em 0 0;}
.history-swiper .swiper-slide-next dl{ opacity: 1;  padding-top: 0px;}
.history-swiper .swiper-slide-next dl article{ height: 6em;}
.history-swiper .swiper-slide-next dl dt{ color: #f00019;}
.history-swiper .swiper-slide-next dl .more{ opacity: 1; visibility: visible;}
.history-swiper .swiper-slide-active dl{ padding-top: 30vh;}
.history-swiper .more{ opacity: 0; visibility: hidden; transition: 0.6s all;}
.history-swiper .more img{ width: 25px; height: 25px;}

.history-swiper .swiper-pagination{ left: 0; top: 20px; display: flex; width: 150px; background: rgba(0,0,0,0.1);}
.history-swiper .swiper-pagination .swiper-pagination-bullet{ border-radius: 0; flex: 1; height: 3px;}
.history-swiper .swiper-pagination .swiper-pagination-bullet-active{ background: rgba(0,0,0,0.7); border-radius: 3px;}


.product-swiper{ position: relative;}
.product-swiper img{ width: 100vw; height: 100vh; object-fit: cover; position: relative; opacity: 0; }
.product-swiper .swiper-slide{ overflow: hidden;}
.product-swiper .swiper-slide .c1{ transition: 1s all; transform: translate(-200px,0);}
.product-swiper .swiper-slide .text{ position: absolute;right:0;padding-left:50%;display:flex;    flex-direction: column;
    justify-content: center; left: 0; top: 0;bottom:0; transform: translate(100px,0) scale(0.8); transition: 1.5s all; transition-delay: 0.5s;}
.product-swiper .swiper-slide  .t-img{
    margin: 2vh 0 5vh;
}
.product-swiper .swiper-slide .t-img img{
    max-width: 100%;
    width: auto;
    height: auto;
}
.product-swiper .swiper-slide  h4{
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 24px;
}
.product-swiper .swiper-slide .text span{
    color: #f00019;
}
.product-swiper .swiper-slide .c2{ position: absolute; left: 0; top: 0; transform: translate(100px,0) scale(0.8); transition: 1.5s all; transition-delay: 0.5s;}
.product-swiper .swiper-slide.swiper-slide-active img{ opacity: 1; transform: translate(0,0) scale(1);}
.product-swiper .swiper-container-horizontal>.swiper-pagination-bullets{ width: 50%; bottom: 5%; text-align: center; z-index: 100;}
.product-swiper .swiper-pagination-bullet{ width: 12px; height: 12px; opacity: 0.6; background: #fff; margin: 0 10px !important;}
.product-swiper .swiper-pagination-bullet-active{ transform: scale(1.5); opacity: 0.9;}

.brand-box{ height: 100vh; justify-content: center; }
.brand-warp{ flex: 1; margin: 0 18%; padding-top: 8%; }
.brand-box .title{ align-items: flex-end; margin-bottom: 2em;}
.brand-box .title .left{ flex: 1;}
.brand-box .title .right{ padding-bottom: 1em;}
.brand-box .title .right i{ margin: 0 10px; display: inline-block;}
.brand-box .title .right a:last-child i{ display: none;}
.brand-box .title .right a.cur span{ color: #f00019; font-weight: bold;}

.brand-list ul{ margin: 0 -10px;}
.brand-list li{ float: left; width: 33.33%;}
.brand-list li .w{ margin: 0 10px; position: relative;}
.brand-list li .img_ratio{ padding-top: 61%;}
.brand-list li .w .img{ margin-bottom: 2em;}
.brand-list li .w h2{ margin: 0.5em 0;}
.brand-list li .w h2 a{ height: auto; max-height: 3em;}
.brand-list li .w article{ opacity: 0.5;}
.brand-list li:first-child .img_ratio{ padding-top: 120%;}
.brand-list li:first-child .txt{padding: 1em; position: absolute; left: 0; right: 0; bottom: 0; background-image: linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,0.8)); z-index: 100; color: #fff;}
.brand-list li:first-child .txt a{ color: #fff;}
.brand-list li:first-child .txt article{ display: none;}

.pages{ text-align: center; margin: 2em 0 2em;}
.pages a{ display: inline-block; margin: 0 5px; padding: 8px;}
.pages a.cur{ color: #f00019;}

.about-box{ margin: 0 10%; height: 100vh; color: #fff; }
.about-box .box{ padding-top: 20vh; padding-left: 20px;}
.about-box .w{ width: 750px; margin: 3em 0 0; }
.about-box .content{ height: 30vh; margin: 2em 0; margin-left: -30px;}
.about-box .content article{color: #fff; opacity: 0.8;}
.about-box .more img{ width: 25px; height: 25px;}
.about-box .mCustomScrollBox{ padding-left: 30px;}
.about-box .mCSB_scrollTools{ right: auto; left: 0;}
.about-box .mCSB_scrollTools .mCSB_draggerRail{ background-color: rgba(255,255,255,0.8);}

.party-box{ height: 100vh; justify-content: center; }
.party-warp{ flex: 1; margin: 0 18%; padding-top: 8%; }
.party-box .title{ align-items: flex-end; margin-bottom: 2em;}
.party-box .title .left{ flex: 1;}
.party-list ul{ margin: 0 -10px;}
.party-list li{ float: left; width: 34%;}
.party-list li .w{ margin: 0 10px 20px; position: relative;}
.party-list li .w h2{ margin: 0.2em 0; }
.party-list li .w h2 a{ height: auto; max-height: 3em;}
.party-list li .w article{ opacity: 0.5;}
.party-list li .txt{ padding: 1em 0 0;}
.party-list li:nth-child(1){ width: 32%;}
.party-list li:nth-child(2){ width: 68%;}
.party-list li .img_ratio{ padding-top: 71%;}
.party-list li:nth-child(2) .img_ratio{ padding-top: 20%;}
.party-list li:nth-child(3) .img_ratio{ padding-top: 71%;}
.party-list li:nth-child(4) .img_ratio{ padding-top: 23%;}
.party-list li:nth-child(2) h2 a{ display: block; text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.party-list li:nth-child(2) .txt,
.party-list li:nth-child(3) .txt{padding:0 1em 1em; position: absolute; left: 0; right: 0; bottom: 0; background-image: linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,0.8)); z-index: 100; color: #fff;}
.party-list li:nth-child(2) .txt a,
.party-list li:nth-child(3) .txt a{ color: #fff;}

.details-box{ height: 100vh; justify-content: center; }
.details-warp{ flex: 1; margin: 0 10%; padding-top: 19rem; }
.details-box .title{ align-items: flex-end; margin-bottom: 2em;}
.details-box .title .left{ flex: 1;}
.details-box .title .right img{ width: 21px; height: 21px;}
.details-box .title .right a{ background:#e8400b; color: #fff; border-radius: 20px; padding: 0.5em 1.5em;}
.details .tt2{ opacity: 0.8; margin: 20px 0;}
.details .tt2 span{ margin: 0 1em 0 0; }
.details .tt2 a{ display: inline-block; width: 20px; height: 20px; margin: 0 4px;}
.details .tt2 a.wb{ background: url(../images/f1.png) no-repeat center ; background-size: 100%; }
.details .tt2 a.wx{ background: url(../images/f2.png) no-repeat center; background-size: 100%;}

.wx-box{ z-index: 1000; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.5);}
.wx-box .box{ width: 180px;  background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 10px; padding:20px 10px; text-align: center;}
.wx-box .box .wxclose{ position: absolute; right: 10px; top: 10px; cursor: pointer;}
.scrolls{ height: 50vh; overflow: hidden;}

.details-box .more img{ width: 25px; height: 25px;}

.scrolls .mCustomScrollBox{ padding-right: 30px;}
.scrolls .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.scrolls .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.scrolls .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.scrolls .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color: #e8400b;}


.inv-box{ height: 100vh; justify-content: center; width: 100%; }
.inv-wrap{ flex: 1; margin: 0 5% 0 5%; padding-top: 4%; position: relative; }

.inv-left{ position: absolute; left: 0%; top: 50%; transform: translateY(-50%); text-align: center;}
.inv-left p{ margin-bottom: 1em;}
.inv-left p a{  display: inline-block; padding: 5px 1.5em; border-radius: 100px;}
.inv-left p.cur a{ background: #e8400b; color: #fff;}

.inv-right{ padding-left: 20%;}
.inv-index{ align-items: flex-start;}
.inv-index .left{ width: 35%; margin-right: 5%;}
.inv-index .left article{ margin-top: 2em;}
.inv-right  .more img{ width: 25px; height: 25px;}
.inv-index .right li{ border-bottom: 1px solid #ddd; padding: 1em 1em; position: relative;}
.inv-index .right li dt i{ position: absolute; left: 0; top: 0;}
.inv-index .right li dt{ padding-left: 4em; position: relative;}
.inv-index .right li .i2{ display: none;}
.inv-index .right li .p1{ margin-bottom: 0px;}
.inv-index .right li .p1 span{ display: block; margin-left: 1em;}
.inv-index .right li .p2 em{ padding-right: 1em;}
.inv-index .right li:hover { color: #fff; background: url(../images/s1.jpg) no-repeat; background-size: cover;}
.inv-index .right li:hover .i1{ display: none;}
.inv-index .right li:hover .i2{display: block;}
.inv-right  .scrolls .mCustomScrollBox{ padding: 0;}


.top10-t2 table{ width: 100%; border: 1px solid #ddd; background: #fff;}
.top10-t2 table td{ border: 1px solid #ddd; text-align: center; padding: 1em;}
.top10-t2 table .t1{ width: 20%;}
.top10-t2 table .t2{ width: 10%;}
.top10-t2 table .t3{ width: 12%;}
.top10-t2 table .t4{ width: 12%;}
.top10-t2 table .t6{ width: 10%;}
.top10-t2 table .t7{ width: 10%;}
.top10-t2 .table-1{ padding-right: 30px;}
.top10-t2 .table-1 table{ background: #f00019; color: #fff;}
.top10-t2 .table-1 table td{ padding: 5px 1em;}
.top10-t2 .table-2 table{ border-top: 0;}
.top10-t2 .table-2  table tr:first-child td{ border-top: 0;}

a.ly-bon{ background: #e8400b; color: #fff; border-radius: 100px; padding: 5px 1.2em;  color: #fff;}
.message-box{ margin-top: 2em;}
.message-box li{  width: 70%;}
.message-box dt{ float: left;}
.message-box dt img{ width: 56px; height: 56px; border-radius: 100%; margin-right: 20px;}
.message-box dd{ overflow: hidden; }
.message-box li{ border-bottom: 1px solid #aaa; padding: 1em 0;}
.message-box .mCSB_scrollTools{ top: 20%; bottom: 20%;}


.notice-box{ min-height: 40vh; padding-top: 2em; width: 80%;}
.notice-box ul{ margin-bottom: 4em;}
.notice-box li{ border-bottom: 1px solid #aaa; padding: 1.5em 0;}
.notice-box li h2{ margin-bottom: 10px;}
.notice-box li .right {  padding: 5px 1.3em; border-radius: 100px;}
.notice-box li .right .i2{ display: none;}
.notice-box li .right img{ margin-right: 0.5em;}
.notice-box li:hover .right{ background: #e8400b; color: #fff;}
.notice-box li:hover .right .i1{ display: none;}
.notice-box li:hover .right .i2{ display: block;}


@media only screen and (max-width:1500px) {
  .header{  padding-top: 2%;}
  .wrap{ margin: 0 3%;}
  .footer{  padding-bottom: 1%;}

  .brand-list li .w .img{ margin-bottom: 10px;}
  .brand-box .title{ margin-bottom: 1em;}
  .pages{ margin: 1em 0;}
  
}