/* head */
.cyl_head {
    width: 100%;
}
.cyl_top {
    background: #f2f2f2;
    width: 100%;
    position: relative;
    height: .4rem;
}
.cyl_top .top_wrap {
    width: 12rem;
    margin: 0 auto;
    height: .4rem;
    position: relative;
}
.cyl_top .top_left {
    float: left;
    line-height: .4rem;
    height: .4rem;
}
.cyl_top .top_left em {
    color: #474747;
    font-size: .14rem;
    font-style: inherit;
}
.cyl_top .top_right {
    float: right;
    line-height: .4rem;
    height: .4rem;
    position: relative;
}
.cyl_top .top_right .tel_href {
    color: #E24535;
    font-size: .24rem;
    font-family: DINOffcPro;
    font-weight: 700;
    margin-right: .15rem;
}
.cyl_top .top_right .tel_href img {
    width: .16rem;
    vertical-align: middle;
    margin-right: .05rem;
    position: relative;
    top: -.02rem;
}
.cyl_top .top_right em {
    font-size: .16rem;
    color: #444444;
    display: inline-block;
    height: .4rem;
    line-height: .4rem;
    vertical-align: top;
    font-style: inherit;
}
.cyl_top .top_right em img {
    width: .19rem;
    vertical-align: middle;
    margin-right: .05rem;
}
.cyl_top .top_right .wx_img {
    position: absolute;
    right: 0px;
    top: .4rem;
    z-index: 10;
    display: none;
}
.cyl_top .top_right .wx_img.on{
    display:block;
}
.cyl_top .top_right .wx_img img {
    width: .9rem;
    height: .9rem;
}

.cyl_nav {
    width: 100%;
    height: 1rem;
    position: relative;
    box-shadow: 0 .03rem .15rem rgb(0 0 0 / 10%);
}
.cyl_nav .nav_wrap {
    width: 12rem;
    margin: 0 auto;
    height: 100%;
}
.cyl_nav .logo {
    height: 100%;
    line-height: 1rem;
    margin-right: .2rem;
    float: left;
}
.cyl_nav .logo a {
    height: 1rem;
    line-height: 1rem;
    display: block;
}
.cyl_nav .logo img {
    height: .62rem;
    max-width: 1.9rem;
    object-fit: contain;
    margin-top: .19rem;
    /* vertical-align: middle; */
}
.cyl_nav .nav_list {
    height: 100%;
    float: left;
}
.cyl_nav .nav_list li {
    height: 1rem;
    float: left;
    box-sizing: border-box;
}
.cyl_nav .nav_list li .nav_i{
    font-size: .16rem;
    color: #000000;
    padding:0 .12rem;
    box-sizing: border-box;
    border-right: 1px solid #d7d7d7;
    transition: all .3s;
    position: relative;
    display: block;
    height: .24rem;
    margin-top: .38rem;
}
.cyl_nav .nav_list li .nav_i:hover,.cyl_nav .nav_list li.attr .nav_i{
    color: #E24535;
}
.search {
    float: right;
    position: relative;
}
.search .search_box{
    height: 1rem;
    line-height: 1rem;
}
.search .search_box img{
    width: .19rem;
    vertical-align: middle;
    margin:0 .04rem;
}
.search .search_box a{
    width: .67rem;
    height: .28rem;
    display: inline-block;
    /* vertical-align: middle; */
    font-size: .18rem;
    line-height: .28rem;
    color: #fff;
    background-color: #E24535;
    border-radius: .05rem;
    position: relative;
    margin-top: .36rem;
}
.search .form_box{
    position: absolute;
    width: 7.5rem;
    height: .5rem;
    border:2px solid #E24535;
    background: #fff;
    top: .25rem;
    right: 1rem;
    border-radius: .05rem;
    display: none;
    transition: all .3s;
    opacity: 0;
}
.search .form_box input{
    width: 100%;
    height: .5rem;
    font-size: .18rem;
    color: #444444;
    border:none;
    outline: none;
    line-height: .5rem;
    box-sizing: border-box;
    padding:0 .15rem;
}
.search .form_box.act{
    display: block;
    opacity: 1;
}
.search .cyl_topform{
    position: absolute;
    right: 2.5rem;
    bottom: -.75rem;
    opacity: 0;
    transition: all .3s;
}
.search .cyl_topform.act{
    bottom: .25rem;
    opacity: 1;
}
.search .dx-search-input{ 
    width:5.2rem;
    height:.5rem; 
    box-sizing: border-box;
    border:1px solid #E24535;
    border-radius: .25rem;
    overflow: hidden;
}
.search .dx-search-input input{
    width:100%; 
    height:.49rem;
    border:0;
    outline: 0; 
    font-size: .16rem; 
    color:#000;
    box-sizing: border-box;
    padding-left: .2rem;
    padding-right: 1.1rem;
}
.search .dx-search-input a{
    width: 1.03rem; 
    height: .49rem;
    line-height:.49rem;  
    font-size: .16rem; 
    color: #fff; 
    background: #3B9BFF;
    border-radius:0 .24rem .24rem 0px; 
    text-align: center;  
    display: block; 
    text-decoration: none; 
    position:absolute; 
    right:0; 
    top:1px;
}
.search .dx-search-input a img{
    margin-right: .08rem;
}

@media (min-width: 800px) and (max-width: 1200px) {
    .cyl_top .top_wrap,.cyl_nav .nav_wrap{
        width: 100%;
    }
    .cyl_nav .nav_list li .nav_i{
        padding: 0 .1rem;
    }
}
@media (min-width: 750px) and (max-width: 800px) {
    .cyl_top .top_wrap,.cyl_nav .nav_wrap{
        width: 100%;
    }
    .cyl_nav .nav_list li .nav_i{
        padding: 0 0.07rem;
    }
}
@media (max-width: 750px){
    .cyl_top{
        display: none;
    }
    .cyl_nav .nav_wrap{
        width: 100%;
    }
    .cyl_nav{
        position: relative;
    }
    .cyl_nav .logo{
        margin-left: .24rem;
    }
    .search{
        display: none;
    }
    .nav_list_btn{
        float: right;
        width: .4rem;
        height: .4rem;
        background: url(../images/nav_more.png)no-repeat center/.4rem;
        padding: .3rem .2rem;
    }
    .cyl_head{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 5;
        background: #fff;
    }
    .fix-box-zz{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.8);
        z-index: 3;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease;
    }
    .fix-box-zz.active{
        opacity: 1;
        visibility: visible;
        transition: all 0.5s ease;
    }
    .cyl_head_box_zw{
        height: 1rem;
    }
    .cyl_nav .nav_list{
        position: fixed;
        width: 45%;
        right: 2%;
        top: 1.2rem;
        background: white;
        z-index: 4;
        border-radius: .04rem;
        height: auto;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease;
    }
    .cyl_nav .nav_list.active{
        opacity: 1;
        visibility: visible;
        transition: all 0.5s ease;
    }
    .cyl_nav .nav_list li{
        float: initial;
        margin: 0 .2rem;
        height: auto;
    }
    .cyl_nav .nav_list li .nav_i{
        width: 100%;
        display: block;
        font-size: .3rem;
        height: .86rem;
        border-bottom: 1px solid #E0E0E0;
        line-height: .88rem;
        padding: 0;
        margin: 0;
        border-right: none;
        padding: 0 .2rem;
    }
}