/*Created by lk on 2020/06/05.*/

html, body{max-width: 1920px; margin: 0 auto; padding: 0; font-size: 12px; background: #fff; font-family: "Microsoft YaHei", arial}

html{scroll-behavior: smooth;}

ul{list-style: none}

ul, li ,ol{margin: 0; padding: 0}

h1,h2,h3,h4,h5,h6{margin: 0; font-weight: normal}

p{margin: 0;}

a{text-decoration: none; display: block; color: #333; outline: none}

img{border: 0; float: left}

div{box-sizing: border-box}

.clearfix:after{content: ""; display: block; height: 0; clear: both; visibility: hidden; font-size: 0}

ul:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}

.w1440{width: 1440px; margin: 0 auto; position: relative;}
.w1200{width: 1200px; margin: 0 auto; position: relative;}
.left{float: left}
.right{float: right}

.radius{border-radius: 10px; margin-bottom: 15px; overflow: hidden;}


/* ::-webkit-scrollbar
{
    width: 6px;
    background-color: rgba(255,255,255,.1);
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(0,0,0,.4);
} */


@font-face {
    font-family: 'Poppins-Medium';
    src: url('../font/Poppins-Medium.ttf');
    font-weight: normal;
    font-style: normal;
}

/* ----header---- */
/* .nav{max-width: 800px; overflow: hidden;} */

/* 滚动指示器 */
/* .scroll-indicator {
    position: absolute;
    top: 0;
    height: 100%;
    width: 32px;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
} */

/* .scroll-gradient-left {
    left: 0;
    background: linear-gradient(to right, white, transparent);
}

.scroll-gradient-right {
    right: 0;
    background: linear-gradient(to left, white, transparent);
} */

/* .nav .nav-bar{
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 8px 4px;
    scroll-snap-type: x mandatory;
    cursor: grab;
} */

/* .nav-bar::-webkit-scrollbar {
    display: none;
}
.nav-bar:active {
    cursor: grabbing;
} */

/* .nav .nav-bar li{scroll-snap-align: start; margin: 0 10px;} */

/* .nav .nav-bar li a{display: inline-block;  white-space: nowrap; padding: 8px 16px; } */


/*----header----*/
.header{width: 100%; height: 75px; padding: 0 33px; position:relative; background: #fff; border-bottom: 1px solid #f0f0f0; z-index: 998; transition: all .4s; -webkit-transition: all .4s}
.header .logo{float: left; width: 200px; height: 40px; margin: 17.5px 70px 17.5px 10px; background: url("../image/logo.png") no-repeat; background-size: cover; position: relative; z-index: 9;}

.nav{position: relative; z-index: 4; float: left;}
.nav .nav-bar li{float: left; padding: 0 20px; position: relative;}
.nav .nav-bar li a{font-size: 15px; color: #000; line-height: 75px; box-sizing: border-box; position: relative;}
.nav .nav-bar li a:after{content: ""; display: block; width: 0; height: 2px; background-image: linear-gradient(to right, #0387c9, #71c2a8); position: absolute; bottom: 0; left: 0; transition: all .4s; -webkit-transition: all .4s}
.nav .nav-bar li.on a:after{width: 100%;}
.nav .nav-bar li:hover a:after{width: 100%;}

.nav .nav-bar li .nav-son{width: 100%; height: 0; padding-top: 2px; position: absolute; top: 75px; left: 0; overflow: hidden; transition: all ease .4s; -webkit-transition: all ease .4s;}
.nav .nav-bar li .nav-son a{font-size: 14px; color: #cdcdcd; background: #333333; line-height: 44px; text-align: center; border-bottom: 1px solid #777;}
.nav .nav-bar li .nav-son a:hover{color: #fff;}
.nav .nav-bar li .nav-son a:after{display: none;}
.nav .nav-bar li.active .nav-son{height: 225px;}


.search-ico{float: right; display: block; width: 30px; height: 30px; margin: 22.5px 20px 0 0; cursor: pointer; background: url("../image/icon01.png") no-repeat; transition: all .4s; -webkit-transition: all .4s; z-index: 2}
.search-ico.on{background: url("../image/icon01-1.png") no-repeat;}
.search-con{width: 100%; height: 0; background: #f4f4f4; position: fixed; top: 0; left: 0; margin-top: 75px; overflow: hidden; transition: all ease .4s; -webkit-transition: all ease .4s;}
.search-con.on{height: 100px;}
.search-con .search{width: 40%; margin: 0 auto; padding-top: 29px; z-index: 99}
.search-con .search form{width: 100%; height: 42px; background: transparent; border: none; border-radius: 2px; transition: all .4s; -webkit-transition: all .4s;}
.search-con .search .key{width: 87%; height: 42px; position: relative; padding: 0; font-size: 14px; color: #999; border: 1px solid #dedede; background: transparent; outline: none}
.search-con .search .ss{width: 12%; height: 44px; padding: 0; outline: none; border: none; background: #DE3106; cursor: pointer; position: relative; top: 1px; margin-left: -4px;}
.search-con .search .ss span{font-size: 14px; color: #fff;}
.search-con .search-logo{display: none; width: 30px; height: 30px; margin: 5px 5px 5px 10px; background: #fff url(../image/logoi.png) no-repeat; background-size: cover; }
.search-con .search-shop{display: none; height: 30px; line-height: 30px; padding: 0 12px; margin-right: 10px; background-image: linear-gradient(to right, #0387c9, #71c2a8); font-size: 13px; color: #fff; border-radius: 6px;}

.header .shop-logo{float: right; width: 110px; height: 30px; margin-top: 22.5px; background: url(../image/logo-shop.png) no-repeat; background-size: cover;}

/* 适配导航 */
.nav-down{width: 100%; height: 0; background: #f4f4f4; position: fixed; top: 0; left: 0; margin-top: 75px; overflow: hidden; transition: all ease .4s; -webkit-transition: all ease .4s; display: none;}
.nav-down.down{height: 280px;}
.nav-down .nav-bar{width: 80%; margin: 0 auto; padding: 10px 0 30px 0;}
.nav-down .nav-bar li{float: left; width: 10%; position: relative; text-align: center;}
.nav-down .nav-bar li a{font-size: 15px; color: #000; font-weight: bold; line-height: 60px; box-sizing: border-box; position: relative;}
.nav-down .nav-bar li.on a{background: linear-gradient(to right, #0387c9, #71c2a8); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent}

.nav-down .nav-bar li .nav-son{width: 100%; position: relative; transition: all ease .4s; -webkit-transition: all ease .4s;}
.nav-down .nav-bar li .nav-son a{font-size: 14px; color: #333; font-weight: normal; line-height: 36px; text-align: center; background: linear-gradient(to right, #333, #333); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent}

.nav-down .nav-down-close{display: none; width: 30px; height: 30px; background: url(../image/icon01-1.png) no-repeat; position: absolute; top: 0; right: 0; margin: 10px 10px 0 0;}


.header .button{position: absolute; right: 0; top: 0; width: 40px; height: 40px; padding: 5px; margin: 17.5px 210px 0 0; background: none; border: none; cursor: pointer; display: none}
.header button{outline: none}
.header .button span{width: 26px; height: 2px; position: absolute; top: 0; right: 5px; display: block; background: #666; transition: all .5s; -webkit-transition: all .5s}

.header .button span:nth-child(1){top: 10px}
.header .button span:nth-child(2){top: 20px}
.header .button span:nth-child(3){top: 30px}

#button .span1{top: 20px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg)}
#button .span2{opacity: 0}
#button .span3{top: 20px; transform: rotate(45deg); -webkit-transform: rotate(45deg)}

/*----footer----*/
.footer{position: relative; background: #f6f6f6; padding: 40px 10% 0 10%; overflow: hidden; z-index: 9}
.footer:after{content: ""; display: block; width: 100%; height: 7px; background-image: linear-gradient(to right, #0387c9, #71c2a8); position: absolute; bottom: 0; left: 0;}
.footer .footer-con{display: flex; justify-content: space-between;}
.footer .footer-con .footer-left{width: 10%; margin-right: 7%;}
.footer .footer-con .footer-left img{width: 200px;}
.footer .footer-con .footer-right{width: 83%; margin-bottom: 40px;}
.footer .footer-con .footer-right .nav-bar li{width: 10%; float: left; text-align: right;}
.footer .footer-con .footer-right .nav-bar li a{font-size: 15px; color: #000; font-weight: bold;}
.footer .footer-con .footer-right .nav-bar li .nav-son{margin-top: 18px;}
.footer .footer-con .footer-right .nav-bar li .nav-son a{font-size: 14px; color: #555; font-weight: normal; margin-bottom: 14px;}
.footer .footer-con .footer-right .nav-bar li .nav-son a:hover{color: #122e67;}

.footer .footer-link{display: flex; align-items: center; padding: 30px 0 20px 0; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede;}
.footer .footer-link span{font-size: 12px; color: #000; font-weight: bold; margin-bottom: 10px;}
.footer .footer-link a{font-size: 12px; color: #666; margin-bottom: 10px; margin-left: 10px;}

.footer .footer-bottom{padding: 20px 0 30px 0; display: flex; justify-content: space-between; align-items: center;}
.footer .footer-bottom a{display: inline-block; font-size: 12px; color: #666; margin-right: 20px;}

/* 左侧导航栏 */
.content-left{width: 8.6%; position: sticky; top: 15px; padding-right: 25px; margin-bottom: 80px; z-index: 99;  transition: all ease .4s; -webkit-transition: all ease .4s;}
.content-left span{position: relative; display: block; font-size: 17px; color: #333; font-weight: bold; padding: 6px 0 20px 0; background: url(../image/icon02.png) no-repeat left 4px; background-image: linear-gradient(to right, #0387c9, #71c2a8); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; border-bottom: 1px solid #f0f0f0; cursor: pointer;}
.content-left span img{position: relative; top: -2px; margin-right: 4px;}
.content-left span.span-off{display: none;}

.content-left .left-bar{margin-top: 20px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;}
.content-left .left-bar a{position: relative; font-size: 15px; color: #666; line-height: 2; margin-bottom: 16px; padding-left: 14px;}
.content-left .left-bar a:after{content: ""; display: block; width: 2px; height: 16px; background: #f0f0f0; position: absolute; top: 0; left: 0; margin-top: 8px;}
/* .content-left .left-bar a.active{color: #122e67;} */
.content-left .left-bar a:hover{color: #122e67;}

.content-left .shop-ewm{position: relative; width: 110px; height: 30px; margin-top: 20px; background: url(../image/logo-shop.png) no-repeat; background-size: cover; cursor: pointer;}
.content-left .shop-ewm img{width: 135px; height: 135px; position: absolute; top: 0; right: 0; margin: -50px -145px 0 0; opacity: 0; transition: all ease .4s; -webkit-transition: all ease .4s;}
.content-left .shop-ewm img.on{opacity: 1;}

/* 广告位 */
.ads01{_height: 100px; position: relative; transition: all ease .4s; -webkit-transition: all ease .4s;}
.ads01 img{width: 100%; display: block; float: none;}
.ads01 .close{width: 64px; height: 26px; line-height: 26px; padding-left: 10px; background: #fff url(../image/icon03.png) no-repeat 38px 2px; position: absolute; top: 10px; right: 10px; font-size: 13px; color: #333; border-radius: 4px; cursor: pointer;}
.ads01.none{height: 0; margin-bottom: 0;}
/* .ads{height: 136px;}
.ads02{height: 98px;} */


/* 商城轮播 */
.shop-swipe{width: 100%; padding: 14px 30px; border: 1px solid #f0f0f0;}
.shop-swipe .shop-list .item .img{width: 56px; margin: 0 auto 5px auto;}
.shop-swipe .shop-list .item .img img{display: block; float: none;}
.shop-swipe .shop-list .item .text{text-align: center;}
.shop-swipe .shop-list .item .text h3{font-size: 14px; color: #122e67;}

.shop-swipe .shop-list .slick-prev, 
.shop-swipe .shop-list .slick-next{
    width: 26px;
    height: 26px;
    background: #000;
    border-radius: 8px;
    margin-top: 0;
}
.shop-swipe .shop-list .slick-prev{margin-left: -20px;}
.shop-swipe .shop-list .slick-next{margin-right: -20px;}
.shop-swipe .shop-list .slick-prev:before, 
.shop-swipe .shop-list .slick-next:before{
   width: 26px;
   height: 26px;
}

.go-shop{display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100px; padding: 0 40px; background: url(../image/right-shop-bg.jpg) no-repeat; background-size: cover;}
.go-shop span{font-size: 22px; color: #0a8bc6; font-weight: bold; padding-right: 10px;}
.go-shop img{display: block; float: none; width: 70px;}