:root{
    --maincolor: #fdd000;
    --mainBgcolor: #046469;
}


.header { width: 100%; display: block; font-size: 0; position: absolute; left: 0; top: 0; z-index: 2;}
.header .logo { display: inline-block; position: absolute; left: 50%; top: .34rem; transform: translateX(-50%);}
.header .logo img { max-height: 100%;}
.header .nav { width: 100%; display: block; position: relative;}
.header .nav .l,
.header .nav .r{ width: 50%; display: inline-block; box-sizing: border-box;}
.header .nav .l{ text-align: right; padding-right: 1.5rem;}
.header .nav .r{ padding-left: 1.5rem;}
.header .nav li { display: inline-block; margin: .58rem .07rem 0; vertical-align: top; position: relative;}
.header .nav li a { font-size: .18rem; font-weight: bold; line-height: .7rem; padding: 0 .17rem; text-align: center; color: #fff; display: inline-block; position: relative;}
.header .nav li a:hover,
.header .nav li a.cur,
.header .nav li.cur a{ color:var(--maincolor);}
.header .nav li a::after{ content: ""; width: 0; height: 0;  border-style: solid; border-width: .06rem 0 .06rem .1rem; border-color: transparent transparent transparent #fdcf00; position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0;}
.header .nav li.cur a::after,
.header .nav li a.cur::after{ opacity: 1;}
.header .nav li.search span{ font-size: .42rem; font-weight: bold; line-height: .7rem; padding: 0 .17rem; font-family: "iconfont"; text-align: center; color: #fff; display: inline-block; position: relative; }
.header .nav li .child {
    position: absolute; top: .6rem; min-width: 1.7rem; left: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: all 0.6s ease-in-out;
}
.header .nav li .child li {
    padding: 0; margin: 0;  display: block;
}
.header .nav li .child li:not(:last-of-type) {
    border-bottom: 1px solid #333;
}
.header .nav li .child li a {
    font-size: .14rem; margin: 0; padding: 0 .1rem; display: block; line-height: .48rem; text-align: left; font-weight: normal;
}
.header .nav li .child li a::after {
    display: none;
}

.header .nav li.cur .child li a{ color:#fff;}


.header .nav li:hover .child{
    opacity: 1; pointer-events: auto;
}
.header form{ display: inline-block; vertical-align: top; width: 260px; border: 1px solid #ccc; box-sizing: border-box; height: 33px; border-radius: 33px; margin: 19px 48px 0 0; display: none;}
.header form .input{ margin-left: 18px; width: 201px; height: 31px; line-height: 31px; border: none; background: none; outline: none; display: inline-block; vertical-align: top;}
.header form button{ margin-right: 10px; width: 24px; height: 31px; border: none; outline: none; display: inline-block; vertical-align: top; cursor: pointer;}



.banner{ font-size: 0; overflow: hidden; position: relative; width: 100%; z-index: 1;}
.banner::after{ content: ""; width: 100%; height: 30vh; position: absolute; left: 0; bottom: -1px; z-index: 9; background: url(../images/banner-bottom.png) no-repeat left bottom / 100% auto; pointer-events: none;}
.banner .banner01 { width: 100%; position: relative;}

.banner .banner01 .text { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; text-align: center; opacity: 0; transition: all 0.5s ease-in-out .1s}
.banner .banner01 .text .cn{ font-size: .28rem; color: #fff; display: block; line-height: 2; font-family: "ITC-Avant-Garde";}
.banner .banner01 .text .cn span{ color: #fdd000;}
.banner .banner01 .text .en{ font-size: .18rem; color: #fff; display: block; font-family: "ITC-Avant-Garde"; line-height: 1.75;}
.banner .banner01 .text p{ font-size: 16px; color: #fff; display: block; line-height: 23px; margin-top: 12px;}
.banner .banner01 .text p span{ font-size: 14px; color: #fff; display: block; font-family: "Arial Narrow"; line-height: 21px;}
.banner .banner01 .img { width: 100%; position: relative;}
.banner img{ max-width: 100%;}
/* banner01 */

/* 延时动画 */
.banner li.banner01.ani-slide .text { opacity: 1; transition: all 0.5s ease-in-out .6s}
/* banner01 END */

/* 切换按钮设置 */
.banner-prev,.banner-next{ position: absolute; top: 50%; transform: translateY(-50%); width: 76px; height: 72px; color: #fff; background: #007db8; font-family: "宋体"; font-size: 36px; text-align: center; line-height: 72px; z-index: 2; transition: all 0.3s ease-in-out; text-transform: uppercase; opacity: 0; cursor: pointer; left: 50px;}
.banner-next{ right: 50px; left: auto; line-height: 76px;}
.banner:hover .banner-prev,
.banner:hover .banner-next{ opacity: .3; }
.banner-prev:hover,
.banner-next:hover{ opacity: .8 !important; }
/* 首页 - 切换图 END */

@media screen and ( max-width:768px){
    .header{ top: 0; position: fixed; z-index: 99; left: 0;}
    .header .logo{ top: .2rem; left: .2rem; height: .6rem; transform: translate(0,0);}

    header .menu{ display: block; position: fixed; box-sizing: border-box; padding: 0 .07rem; top: .2rem; right: .2rem; width: .4rem; height: .4rem; z-index: 100;}
    header .menu span{ width: 100%; height: 3px; background: var(--maincolor); position: relative; margin-top: .19rem; display: block; position: relative; transition: all 0.2s ease-in-out;}
    header .menu span::before,
    header .menu span::after{ content: ""; position: absolute; bottom: -.08rem; left: 0; width: 100%; height: 3px; background: var(--maincolor); display: block; transition: all 0.4s ease-in-out .1s;}
    header .menu span::before{ top: -.08rem;}
    header .menu.open span{ background: none;}
    header .menu.open span::before{ transform: rotate(-45deg); top: 0; background: #fff;}
    header .menu.open span::after{ transform: rotate(45deg); bottom: 0; background: #fff;}
    .header .nav{ position: fixed; height: 100vh; width: 50%; top: 0; right: -50%; background: var(--maincolor); display: flex; flex-direction: column; justify-content:flex-start; align-items: flex-start; box-sizing: border-box; padding-top: .5rem;}
    .header .nav.open{ right: 0; }

    .header .nav .l{ padding-right: 0;}
    .header .nav ul{ margin-top: .16rem;  height: 100%; width: 100%;}
    .header .nav li{ width: 100%; margin: 0;}

    .header .nav ul li a{ margin: 0; box-sizing: border-box; padding: 0 .2rem; color: #000; text-align: right; padding-bottom: .1rem;  width: 100%; transition: all 0.3s ease-in-out;}
    .header .nav ul li a.cur,
    .header .nav ul li a:hover{ font-weight: bold; color: #000;}
    .header .nav ul li a.cur::after{ height: 3px; width: 0; background: #0061ae; transition: all 0.6s ease-in-out .6s;}
    .header .nav.open ul li a.cur::after{ width: 100%;}
    .header .nav li a:hover, .header .nav li a.cur, .header .nav li.cur a{
        color: #fff;
    }
    .header.active{
        background: #fff;
        height: .6rem;
        box-shadow: 0 0 3px #ccc;
    }
    .header.active .logo{
        left: .1rem;
        top: .1rem;
        height: .4rem;
    }
    .header.active .logo img{
        max-width: 100%;
    }
    .header.active .menu{ top: .1rem; right: .1rem;}

    /*  banner   */
    .banner .banner01 .text{
        width: 100%;
        transform: translate(-50%,-.3rem);
    }
    .banner .banner01 .text .cn{ 
        font-size: .16rem;
        line-height: 1.5;
    }
    .banner .banner01 .text .en{
        font-size: .12rem;
    }
    .banner .banner01 .list img{
        max-width: 2rem;
    }

}