@charset "UTF-8";

@import "all.css";


/*图标*/
@font-face {font-family: 'entypo-fontello'; font-weight: normal; font-style: normal;
    src: url('/static/fonts/entypo-fontello.eot?v=3');
    src: url('/static/fonts/entypo-fontello.eot?v=3#iefix') format('embedded-opentype'),
    url('/static/fonts/entypo-fontello.woff?v=3') format('woff'),
    url('/static/fonts/entypo-fontello.ttf?v=3') format('truetype'),
    url('/static/fonts/entypo-fontello.svg?v=3#entypo-fontello') format('svg');
}

.iconfont {
    font-family: "entypo-fontello" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/*图标end*/

/*一级公共区，禁止以下命名方式*/
.main{width: 100%;margin: 0 auto}
.bg_white{background-color: white}
header{height: 40px;    box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);position: fixed;width: 100%;top: 0;background-color: white;z-index: 5}
.head{display: flex;max-width: 1310px;margin: 0 auto;position: relative}
.head .logo img{max-height: 30px;margin-top: 5px;}
.head .search{display: flex;align-items: center}
.head .icon-search:hover{color: #00a9e0}
.head .search_f{display: none}
.head .icon-search{padding-left: 15px;cursor: pointer}
.head form{position: absolute;right: -15px;top: 40px;display: flex;background-color: white;padding: 20px;box-shadow: 0px 3px 13px 0px rgb(0 0 0 / 20%); z-index: 555;}
.head form::after{content: '';position: absolute;top:-10px;right:10px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid rgba(107, 107, 107, 0.2);}
.head form::before{content: '';position: absolute;top:-9px;right:11px;border-left: 9px solid transparent;border-right: 9px solid transparent;border-bottom: 9px solid #ffffff;z-index: 55;}
.head form input{border: none;outline: none;background-color: #e1e1e1;padding: 0 10px;box-sizing: border-box}
.head form button{width: 40px;height: 40px;background-color: #00a9e0;display: flex;justify-content: center;align-items: center;border: none;color: white}
nav{margin-left: auto;}
nav ul{display: flex;}
nav ul li{padding: 0 13px}
nav ul li a{font-size: 13px;color: #141413;font-weight: bold;line-height: 40px;}
nav ul li a:hover{color: #00a9e0}
footer{background-color: #5b646b;}
footer .container{display: flex;align-items: center;height: 54px;}
footer p{font-size: 12px;color: white}
.container{margin: 0 auto;padding: 0 50px}
.to_top{width: 50px;height: 50px;background-color: rgba(0, 0, 0, 0.2);position: fixed;right: 50px;bottom: 54px;display:none;z-index: 999}
.to_top a{color: white;display: flex;width: 100%;height: 100%;justify-content: center;align-items: center}
.lightgallery_dom{display: none}

/*首页*/
main.index{margin-top: 30px;}
.index_swiper{position: relative;width: 100%;overflow: hidden}
.index_swiper1,.index_swiper2{position: relative;height: 803px;}
.index_swiper1 .img{width: 100%;height: 100%;}
.index_swiper1 .img img{height: 100%;}
.index_swiper1 .text{position: absolute;top: 50%;right: 10%;}
.index_swiper1 .text h2{font-size: 83px;color: #00a9e0;font-weight:normal;text-align: right}
.index_swiper1 .text h3{font-size: 41px;color: black;white-space:nowrap}
.index_swiper2{display: flex;justify-content: center;align-items: center}
.index_swiper2 .img img{margin: 0 auto}
.index_swiper2 .text{position: absolute;left: 70%;top: 50%;transform: translate(-30%,-50%)}
.index_swiper2 .text h2{font-size: 142px;color: #00a9e0;font-weight: normal;}
.index_swiper2 .text h3{font-size:52px;color: #000000;margin-left: -110px;white-space: nowrap}
.index_ad{background-color: #00a9e0;position: relative;height: auto;background-image: url("/static/img/ad_bg.png");background-size: cover;background-position: -100px}
.index_ad .text{display: flex;min-height: 166px;align-items: center;position: relative;z-index: 2;}
.index_ad .text p{font-size: 30px;color: white;margin-right: 5%;flex: 1;width: 0;}
.index_ad .text a{display: flex;width: 153px;height: 49px;border: 4px solid #ffffff;border-radius:100px;align-items: center;justify-content: center;font-size: 13px;color: white;transition: all 0.3s}
.index_ad .text a:hover{border-color: rgba(255, 255, 255, 0.5)}
.ad_bg{background-size: cover;position: absolute;top: 0;left: 0;width: 100%;}
.ad_bg_img{background-image: url("/static/img/ad_bg.png");background-attachment:scroll;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1}
.index3{position: relative;z-index: 2;padding: 80px 0}
.index_tit{display: flex;justify-content: center;font-size: 28px;font-family: mp;position: relative;padding-bottom: 15px;}
.index_tit::after{content: '';display: block;width:60px;height: 2px;background-color: #00a9e0;position: absolute;bottom: 0;left: 50%;transform: translate(-50%)}
.index3 ul{display: flex;justify-content: space-between;margin-top: 50px;flex-wrap: wrap}
.index3 ul li{width: 32.5%;border:1px solid rgba(0, 0, 0, 0.2)}
.index3 ul li .img{position: relative;padding-bottom: 100%;overflow: hidden}
.index3 ul li img{position: absolute;width: 100%;height: 100%;object-fit: cover}
.index3 ul li:hover img{transform: scale(1.05);transition: all 0.5s}
.index3 ul li .nr .body{padding: 30px 15px 15px;box-sizing: border-box;position: relative;border-top: 1px solid #9c9c9c}
.index3 ul li .nr .body::before{content: '';display: block;border-right: 10px transparent solid;border-left: 10px solid transparent;border-bottom: 10px solid #9c9c9c;position: absolute;top: -10px;left: 50%;transform:translate(-50%)}
.index3 ul li .nr .body::after{content: '';display: block;border-right: 10px transparent solid;border-left: 10px solid transparent;border-bottom: 10px solid #ffffff;position: absolute;top: -9px;left: 50%;transform:translate(-50%)}
.index3 ul li .nr .body p{font-size: 15px;color: #2c353d;}
.index3 ul li .nr .body span{font-size: 15px;color: #00a9e0;font-weight: bold;}
.index3 ul li .button{height: 42px;display: flex;align-items: center;background-color: #e1e1e1;justify-content: space-evenly;opacity: .2;transition: all 0.5s}
.index3 ul li .button p{font-size: 12px;color: #9c9c9c;}
.index3 ul li .button .l,.index3 ul li .button .r{display: flex;}
.index3 ul li .button .l p,.index3 ul li .button .r p{margin-left: 8px;}
.ico_buy_car,.ico_buy_tc{color: #9c9c9c}
.index3 ul li:hover .button{background-color: #e1e1e1;opacity: unset}
.index4{background-image: url("/static/img/index4_bg.png");background-color: #2c353d;background-size: cover;padding: 80px 0}
.index4 .index_tit h2{color: white}
.index4 ul{display:flex;flex-wrap:wrap;justify-content: space-between;margin-top: 50px;}
.index4 ul li{width: 33%;color: white;display: flex}
.index4 ul li .ico{width: 74px;height: 74px;    border: 1px solid #ffffff24;border-radius:50%;display: flex;justify-content: center;align-items: center}
/*.index4 ul li i{font-size: 30px;}*/
.index4 ul li i{width: 100%;display: flex;justify-content: center;align-items: center}
.index4 ul li i img{width:28.8px;height:28.8px}
.index4 ul li .text{width: 0;flex: 1;margin-left: 15px;}
.index4 ul li .text h2{font-size: 18px;}
.index4 ul li .text p{font-size: 15px;margin-top: 10px;}
.index4 ul li:nth-of-type(n+4){margin-top: 100px;}
.prev_home .prev_home_n,.next_home .next_home_n{width: 60px;height: 60px;background-color: rgba(0,0,0,.2);display: flex;justify-content: center;align-items: center;position: absolute;top: 50%;z-index: 2;cursor: pointer;border-radius: 2px}
.prev_home .prev_home_n:hover,.next_home .next_home_n:hover{background-color: rgba(0,0,0,.3)}
.prev_home .prev_home_n{transform: translate(0,-50%);left: 50px;}
.next_home .next_home_n{transform: translate(0,-50%);right: 50px;}
.prev_home .index_slide_p:before{content: '\E87c';font-size: 20px;color: white;}
.next_home .index_slide_n:before{content: '\E87d';font-size: 20px;color: white}

/*about*/
.index4.about{background-image: unset;background-color: white;padding-top: 80px;}
.index4.about *{color: #000000}
.index4.about ul li .ico{border-color: rgba(0, 0, 0, 0.3)}
.index4.about .index_tit h2{color: #000000;font-size: 28px;text-align: center}
.about{font-size: 15px;color: #9c9c9c;border: 1px solid rgba(0, 0, 0, 0.3);padding: 30px;margin-top: 30px;}
.index4.about .about p{font-size: 15px;color: #9c9c9c;margin-top: 10px;font-family:Metrophobic;line-height: 25px}
.index4.about ul li .text p{color: #9c9c9c;}
.body_bg{background-color: #5b646b}

/*prolist*/
.pro_list{background-color: white;margin-top: 40px;padding: 100px 0}
.pro_list .top_list{display: flex;justify-content: space-between;flex-wrap:wrap;}
.pro_list .top_list li{width: 48%;}
.pro_list .top_list li .img{width: 100%;position: relative;display: flex;height: 300px;align-items: center}
.pro_list .top_list li .img img{max-width: 100%;max-height: 100%;object-fit: cover;margin: 0 auto}
.pro_list .top_list .text{margin-top: 50px;}
.pro_list .top_list .text h3{font-size: 20px;color: #2c353d;position: relative;padding-bottom: 30px;}
.pro_list .top_list .text h3::after{content: '';display: block;position: absolute;width: 80px;height: 2px;background-color: #00a9e0;bottom: 0;left: 0;}
.pro_list .top_list .text p{color: #9c9c9c;font-size: 15px;margin-top: 20px;line-height: 25px;}
.pro_list .top_list .text a{font-size: 15px;color: #00a9e0;font-weight: bold;display: block;margin-top: 15px;}
.pro_nav{display: flex;margin-top: 70px;}
.pro_nav .order{display: flex;background-color: #e1e1e1;align-items: center;padding: 5px 10px;position: relative;height: 33px;box-sizing: border-box}
.pro_nav .order span,.pro_nav .pagesize span{font-size: 12px;color: #9c9c9c}
.pro_nav .order p,.pro_nav .pagesize p{font-size: 12px;color:#2c353d;margin-left: 8px;font-weight: bold;}
.pro_nav .order em,.pro_nav .pagesize em{background-image:url("/static/img/arrow_down.png");width: 33px;height: 33px;}
.pro_nav .order_list{position: absolute;left: 0;top: 33px;box-shadow: 0px 6px 14px 0 rgb(0 0 0 / 10%);background-color:#e1e1e1;padding: 10px 15px;width: 100%;box-sizing: border-box;display: none;z-index: 2}
.pro_nav .order_list a{font-size: 12px;color: #919191;position: relative;display:block;line-height: 30px}
.pro_nav .order_list a::before{content: '';display: inline-block;border-top: 3px solid transparent;border-bottom:3px solid transparent;border-left: 3px solid #919191;top: 50%;transform: translate(0,-50%);margin-right: 10px;}
.pro_nav .order_list a:hover{color: #00a9e0}
.pro_nav .order_list a:hover:before{border-left:3px solid #00a9e0}
.pro_nav .order:hover .order_list{display: block}
.pro_nav .pagesize:hover .order_list{display: block}
.pro_nav .pagesize{display: flex;background-color: #e1e1e1;align-items: center;padding: 5px 10px;position: relative;height: 33px;box-sizing: border-box}
.pro_nav .rise{width: 33px;height: 33px;background-image: url("/static/img/arrow_up_down.png");background-position: center -1px;background-repeat: no-repeat;background-color: #e1e1e1;margin: 0 5px}
.pro_list ul.list_img{display: flex;justify-content: space-between;margin-top: 50px;flex-wrap: wrap}
.pro_list ul.list_img li{width: 32.5%;border:1px solid rgba(0, 0, 0, 0.2)}
.pro_list ul.list_img li .img{position: relative;padding-bottom: 100%;overflow: hidden}
.pro_list ul.list_img li img{position: absolute;width: 100%;height: 100%;object-fit: cover}
.pro_list ul.list_img li:hover img{transform: scale(1.05);transition: all 0.5s}
.pro_list ul.list_img li .nr .body{padding: 30px 15px 15px;box-sizing: border-box;position: relative;border-top: 1px solid #9c9c9c}
.pro_list ul.list_img li .nr .body::before{content: '';display: block;border-right: 10px transparent solid;border-left: 10px solid transparent;border-bottom: 10px solid #9c9c9c;position: absolute;top: -10px;left: 50%;transform:translate(-50%)}
.pro_list ul.list_img li .nr .body::after{content: '';display: block;border-right: 10px transparent solid;border-left: 10px solid transparent;border-bottom: 10px solid #ffffff;position: absolute;top: -9px;left: 50%;transform:translate(-50%)}
.pro_list ul.list_img.list_img li .nr .body p{font-size: 15px;color: #2c353d;}
.pro_list ul.list_img li .nr .body span{font-size: 15px;color: #00a9e0;font-weight: bold;}
.pro_list ul.list_img li .button{height: 42px;display: flex;align-items: center;background-color: #e1e1e1;justify-content: space-evenly;opacity: .2;transition: all 0.5s}
.pro_list ul.list_img li .button p{font-size: 12px;color: #9c9c9c;}
.pro_list ul.list_img li .button .l,.pro_list ul.list_img li .button .r{display: flex;}
.pro_list ul.list_img li .button .l p,.pro_list ul.list_img li .button .r p{margin-left: 8px;}
.ico_buy_car,.ico_buy_tc{color: #9c9c9c}
.pro_list ul.list_img li:hover .button{background-color: #e1e1e1;opacity: unset}


/*proview*/
.pro_view{margin-top: 40px;padding: 100px 0;background-color: white}
.pro_view .container{display: flex;justify-content: space-between;flex-wrap: wrap}
.pro_view .left{width:29%}
.pro_view .left ul{display: flex;flex-wrap:wrap;margin-top: 30px;width: calc(100% + 3px);}
.pro_view .left ul li{width: 25%;box-sizing: border-box;border: 1px solid #e1e1e1;margin:  0 -1px -1px 0;cursor: pointer;padding: 5px;}
.pro_view .left ul li .img{width: 100%;position: relative;padding-bottom: 100%;overflow: hidden}
.pro_view .left ul li img{width: 100%;object-fit: cover;position: absolute;height: 100%}
.pro_view .left .show_img{width: 100%;border: 1px solid #e1e1e1;box-sizing: border-box;cursor: pointer;position: relative;padding-bottom: 100%;}
.pro_view .left .show_img img{width: 100%;height: 100%;object-fit: cover;position: absolute}
.pro_view .left .show_img .magnify{position: absolute;top:15px;left: 15px;z-index: 9999;width: 40px;height: 40px;background-color: #FFFFFF;border-radius: 50%;display: flex;justify-content: center;align-items: center}
.pro_view .left .show_img .magnify .icon-magnify{color: #b0b0b0;font-size: 20px;}
.pro_view .right{width: 0;flex: 1;margin-left: 50px;}
.pro_view .right .tit{width: 50%;height: 80px;background-color: #ffffff;margin-top: 50px;border: 1px solid #e1e1e1;display: flex;justify-content: center;align-items: center;font-size: 16px;color: #9c9c9c;border-bottom: unset;cursor: pointer}
.pro_view .right h2{font-size: 34px;color: #2c353d;}
.pro_view .right p.price{font-size: 15px;color: #00a9e0;margin-top: 15px;}
.pro_view .right p.description {font-size: 15px;color: #9c9c9c;margin-top: 15px;}
.pro_view .right .body_text {background-color: #e1e1e1;padding: 15px;}
.pro_view .right .body_text{font-size: 15px;color:#9c9c9c;line-height: 30px;}
.pro_view .right .body_text img{max-width: 80%;margin: 0 auto}


/*order form*/
.order_form{margin-top: 40px;background-color: white;padding: 100px 0}
.order_form .container{display: flex}
.order_form .left{width: 55%;position: relative}
.order_form .left .top{position: relative;display: flex;align-items: center}
.order_form .left .top h1{position: relative}
.order_form .left .top span{display: flex;height: 1px;background-color: #9c9c9c;top: 50%;flex: 1;width: 0;position: relative;margin-left: 15px;}
.order_form .left label{display: flex;}
.order_form .left label span{font-size: 14px;color: #9c9c9c;font-weight: bold;}
.order_form .left label i{font-style: normal;font-size: 14px;}
.order_form .left form{width: 100%;}
.order_form .left form>div{margin-top: 15px;}
.order_form .left input{width: 100%;padding: 10px 6px;background-color: rgba(145, 145, 145, 0.5);border: none;color: white;outline: none;margin-top: 8px;box-sizing: border-box}
.order_form .left textarea{width:100%;height: 300px;box-sizing: border-box;background-color: rgba(145, 145, 145, 0.5);outline: none;padding: 10px 6px;color: white}
.order_form .left select{width: 100%;padding: 10px 6px;background-color: rgba(145, 145, 145, 0.5);border: none;color: white;outline: none;margin-top: 8px;background-image: url("/static/img/select_ico.png");background-repeat: no-repeat;background-position: center right;appearance: none;cursor: pointer}
.order_form .left select option{background-color: rgba(44, 53, 61, 0.3)}
.order_form .left select option:hover{background-color: rgba(44, 53, 61, 0.5)}
.order_form .right{flex: 1;width: 0;margin-left: 60px;}
.order_form .right p{font-size: 15px;color: #9c9c9c;margin-top: 15px;}
.order_form .right p.color{color: #00a9e0;font-weight: bold;}
@media all and (min-width: 1201px) {
    .container{max-width: 1310px;}

}

@media only screen and (min-width: 768px) and (max-width: 989px){
    .container{max-width:95%;}
    .index_swiper2 .text h2{font-size: 57px;}
    .index_swiper2 .text h3{font-size: 21px;}
    .index_swiper1 .text h2{font-size: 50px;}
    .index_swiper1 .text h3{font-size:21px;}
    .index4 ul li{width: 48%;}
    .index4 ul li:nth-of-type(n+3){margin-top:100px;}
    .index3 ul li,.pro_list ul.list_img li{width:100%;margin-top: 10px;}
    .index3 ul li:nth-of-type(n+3),.pro_list ul.list_img li:nth-of-type(n+3){margin-top: 10px;}
}
@media all and (max-width: 767px)  {
    .container{width: 85%;padding: unset}
    .index3 ul li,.pro_list ul.list_img li{width:100%;margin-top: 10px;}
    .index_ad .text{flex-direction: column;padding: 20px 0;height: 100%;}
    .index_ad .text p{width:90%;font-size: 24px;}
    .index_ad .text a{margin-left: auto;margin-right: 20px;}
    .index4 ul li{width:100%;}
    .index4 ul li:nth-of-type(n+2){margin-top:30px;}
    .index_tit h2{font-size: 28px;}
    .pro_list .top_list li{width: 100%;}
    .pro_view .left{width: 100%;}
    .pro_view .right{width: 100%;margin-top: 30px;margin-left: unset;}
    .pro_view .right h2{font-size: 20px;}
    .pro_view{padding: 50px 0}
    .order_form .left{width: 100%;}
    .order_form .right{width: 100%;margin-left: unset;margin-top: 30px;}
    .order_form .container{flex-wrap: wrap}

}

@media all and (max-width: 1200px) {
    nav{position: fixed;top: 40px;right: 0;background-color: white;height: 100vh;width: 0;transition: all 0.3s;overflow: hidden}
    nav.active{display: block;width: 350px;}
    nav ul{display: flex;flex-direction: column;width: 100%;}
    nav ul li{display: flex;justify-content: center;align-items: center;height: 50px;border-bottom: 1px solid rgba(0, 0, 0, 0.1)}
    nav ul li a{font-size: 15px;font-family: mp;}
    header .search{margin-left: auto;}
    header .iconfont{font-size: 25px;}
    .head form{right: 20px}

    .m_nav_f{display: flex;align-items: center;height: 40px;margin-left: 10px;cursor: pointer}
    .m_nav{display: block;height:auto;}
    .m_nav span{position: relative;background: #00a9e0;display: block;width:21px;height: 2px;transition: all ease 0.35s;}
    .m_nav span:nth-of-type(1){top:0}
    .m_nav span:nth-of-type(2){top:-10px}
    .m_nav span:nth-of-type(3){top:5px}


    .m_nav_f.active .m_nav span:nth-of-type(2){top:0px;transform:rotate(45deg);background: #000000}
    .m_nav_f.active .m_nav span:nth-of-type(1){width:0;color: #4A90E2}
    .m_nav_f.active .m_nav span:nth-of-type(3){top:-2px;transform:rotate(-45deg);background: #000000}
    .to_top{display: none;}

}