
@media only screen and (min-width: 1400px){

.banner{ height:800px; overflow:hidden}
.banner ul li a{display:block;position:relative;width:100%;height:800px;overflow: hidden;}
.banner ul li a>img, .banner ul li a>video{ display: block; position: relative; width: 100%; height: 800px; object-fit:cover; }
.banner ul li a .top{ position:absolute; top:0; right:0; bottom:0; left:0}

@media only screen and (min-width: 1400px){
.banner ul li a .top .w1200{ height:100%; display:flex; flex-direction:column; justify-content:center;width: 1500px; margin:0 auto;}
}

@media screen and (max-width: 1410px){
.banner ul li a .top .w1200{ height:100%; display:flex; flex-direction:column; justify-content:center;width: 1100px; margin:0 auto;}
}

.banner ul li a .top{ transform: translateY(90px); opacity: 0;}
.banner ul li a .top h5{font-size:36px;color:#fff;line-height:1.25;font-weight:bold;  text-shadow: 2px 2px #000; margin-top: 70px;}
.banner ul li a .top h3{font-size:42px;color:#fff;line-height:1.25;margin:0.75rem 0 1.875rem;font-weight: 600;}
.banner ul li a .top h2{font-size:18px;color:#fff;line-height:1.25;margin:2.75rem 0 1.875rem;}
.more001{ text-align:center;}
.more001 .a{width: 50px;
    margin: 0px 0px 0px;
    height: 2px;
    background: #fff;

   }
.more001 .a img, .more001 .a svg{ margin:0 0 0 .5rem; transition:.5s; width:1.25rem; height:1.25rem; fill:rgba(255,255,255,.8)}


.banner ul li.miso-current a .top{ opacity: 1; transform: translateY(30px); transition-delay:.6s; -moz-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1); -webkit-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);}
.banner ul li.miso-current{ z-index:999;}

.banner ul li.miso-current a>img{ animation: scaleUpDown 4s linear forwards; -webkit-animation: scaleUpDown 4s linear forwards; }
.banner.on ul li:nth-child(1).miso-current a>img{ animation: scaleUpDown 4s linear forwards; -webkit-animation: scaleUpDown 4s linear forwards; }

@-webkit-keyframes scaleUpDown {
    from { -webkit-transform: scale(1.1); transform: scale(1.1); }
    to { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes scaleUpDown {
    from {transform: scale(1.1); transform: scale(1.1); }
    to { transform: scale(1); transform: scale(1); }
}

.banner ul .miso-dots_box{position:absolute;bottom: 4.375rem;width: auto;padding: 0 2rem;text-align: center;left: 50%;transform: translateX(-50%);}
.banner ul .miso-dots{height: 1.125rem;text-align:center;position: relative;padding: 0;width: auto;display:flex; align-items:center; white-space: nowrap;}
.banner ul .miso-dots_box .miso-prev, .banner ul .miso-dots_box .miso-next{ width:1.75rem; height:1.75rem}
.banner ul .miso-dots_box svg{width:1.75rem;height:1.75rem;fill:rgba(255,255,255,.25);float: left; transition:.5s}


.banner ul .miso-dots li{width: 4.5rem;height: 3px; background: transparent; transition:.5s;border-radius:50%;padding: 0; position:relative}
.banner ul .miso-dots li:before{content: "";display: block;width: 100%;height: 3px;position: absolute;left: 0;top: 0;transition: .3s;-webkit-transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;background:rgba(255,255,255,.25);}
.banner ul .miso-dots li:after{content: "";display: block;width: 0;height: 3px;left: 0;margin-left: 0;position: absolute;top: 0;background: #fff;}
.banner ul .miso-dots li.miso-active:before{width: 100%;}
.banner ul .miso-dots li.miso-active:after{ animation: anim-h 4s linear forwards; -webkit-animation: anim-h 4s linear forwards; }
.banner.on ul .miso-dots li:nth-child(1).miso-active:after{ animation: anim-h 4s linear forwards; -webkit-animation: anim-h 4s linear forwards; }
/*.banner ul .miso-dots li.on.miso-active:after, .banner.on ul .miso-dots li.on.miso-active:after{ animation: anim-h 10s linear forwards; -webkit-animation: anim-h 10s linear forwards; }*/

@-webkit-keyframes anim-h {
    0% { width: 0; }
    100% { width: 100%; }
}
@keyframes anim-h {
    0% { width: 0; }
    100% { width: 100%; }

}


}

@media screen and (max-width: 1410px){

.banner{ height:570; overflow:hidden}
.banner ul li a{display:block;position:relative;width:100%;height:570;overflow: hidden;}
.banner ul li a>img, .banner ul li a>video{ display: block; position: relative; width: 100%; height: 570; object-fit:cover; }
.banner ul li a .top{ position:absolute; top:0; right:0; bottom:0; left:0}

@media only screen and (min-width: 1400px){
.banner ul li a .top .w1200{ height:100%; display:flex; flex-direction:column; justify-content:center;width: 1500px; margin:0 auto;}
}

@media screen and (max-width: 1410px){
.banner ul li a .top .w1200{ height:100%; display:flex; flex-direction:column; justify-content:center;width: 1100px; margin:0 auto;}
}

.banner ul li a .top{ transform: translateY(90px); opacity: 0;}
.banner ul li a .top h5{font-size:36px;color:#fff;line-height:1.25;font-weight:bold;  text-shadow: 2px 2px #000; margin-top: 70px;}
.banner ul li a .top h3{font-size:42px;color:#fff;line-height:1.25;margin:0.75rem 0 1.875rem;font-weight: 600;}
.banner ul li a .top h2{font-size:18px;color:#fff;line-height:1.25;margin:2.75rem 0 1.875rem;}
.more001{ text-align:center;}
.more001 .a{width: 50px;
    margin: 0px 0px 0px;
    height: 2px;
    background: #fff;

   }
.more001 .a img, .more001 .a svg{ margin:0 0 0 .5rem; transition:.5s; width:1.25rem; height:1.25rem; fill:rgba(255,255,255,.8)}


.banner ul li.miso-current a .top{ opacity: 1; transform: translateY(30px); transition-delay:.6s; -moz-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1); -webkit-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);}
.banner ul li.miso-current{ z-index:999;}

.banner ul li.miso-current a>img{ animation: scaleUpDown 4s linear forwards; -webkit-animation: scaleUpDown 4s linear forwards; }
.banner.on ul li:nth-child(1).miso-current a>img{ animation: scaleUpDown 4s linear forwards; -webkit-animation: scaleUpDown 4s linear forwards; }

@-webkit-keyframes scaleUpDown {
    from { -webkit-transform: scale(1.2); transform: scale(1.2); }
    to { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes scaleUpDown {
    from {transform: scale(1.2); transform: scale(1.2); }
    to { transform: scale(1); transform: scale(1); }
}

.banner ul .miso-dots_box{position:absolute;bottom: 4.375rem;width: auto;padding: 0 2rem;text-align: center;left: 50%;transform: translateX(-50%);}
.banner ul .miso-dots{height: 1.125rem;text-align:center;position: relative;padding: 0;width: auto;display:flex; align-items:center; white-space: nowrap;}
.banner ul .miso-dots_box .miso-prev, .banner ul .miso-dots_box .miso-next{ width:1.75rem; height:1.75rem}
.banner ul .miso-dots_box svg{width:1.75rem;height:1.75rem;fill:rgba(255,255,255,.25);float: left; transition:.5s}


.banner ul .miso-dots li{width: 4.5rem;height: 3px; background: transparent; transition:.5s;border-radius:50%;padding: 0; position:relative}
.banner ul .miso-dots li:before{content: "";display: block;width: 100%;height: 3px;position: absolute;left: 0;top: 0;transition: .3s;-webkit-transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;background:rgba(255,255,255,.25);}
.banner ul .miso-dots li:after{content: "";display: block;width: 0;height: 3px;left: 0;margin-left: 0;position: absolute;top: 0;background: #fff;}
.banner ul .miso-dots li.miso-active:before{width: 100%;}
.banner ul .miso-dots li.miso-active:after{ animation: anim-h 4s linear forwards; -webkit-animation: anim-h 4s linear forwards; }
.banner.on ul .miso-dots li:nth-child(1).miso-active:after{ animation: anim-h 4s linear forwards; -webkit-animation: anim-h 4s linear forwards; }
/*.banner ul .miso-dots li.on.miso-active:after, .banner.on ul .miso-dots li.on.miso-active:after{ animation: anim-h 10s linear forwards; -webkit-animation: anim-h 10s linear forwards; }*/

@-webkit-keyframes anim-h {
    0% { width: 0; }
    100% { width: 100%; }
}
@keyframes anim-h {
    0% { width: 0; }
    100% { width: 100%; }

}


}

