header{position:fixed;z-index: 999;}

.about{
    background:url('/images/about-bg.jpg') no-repeat left center;
    width:100%;
    height: 760px;
    padding-top: 160px;
    background-attachment: fixed;
    }
    .about-left{width: 500px;float: left;height: 600px;color: #fff;}
    .about-left img{
        width: 360px;
        margin-bottom: 30px;
    }
    .about-left p{
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 15px;
    }
    .about-left a{transition:0.5s all;position:absolute;width: 140px;height: 36px;border: 1px solid #fff !important;display: block;right: 0;text-align: left;line-height: 36px;font-size: 12px;padding-left: 36px;margin-top: 40px;background-color: transparent !important;color: #fff !important;}
    
    .about-left a::before{content:"";position:absolute;width: 26px;height: 1px;background-color: #fff !important;right: 18px;top: 18px;}
    .about-left a::after{content:"";position:absolute;width: 10px;height: 1px;transform: rotate(45deg);background-color: #fff !important;top: 15px;right: 16px;}
    
    .about-left a:hover{background-color:#008cd6;border-color:#fff;box-shadow:0 0 3px #666;}
    .about-left a:hover{color:#fff;}
    .about-left a:hover::before{background-color:#fff;}
    .about-left a:hover::after{background-color:#fff;}

.about-right{width:500px;float: right;}
.about-right img{width:100%;}

    .product11-in{
        width: 840px;
        margin-bottom: 50px;
        float: right;
        height: auto;
        margin-right: 100px;
    }

    .product12-in{/* width: 1000px; */text-align: left;height: 600px;color: #fff;position: absolute;top: 160px;}

    .product12-in h4{font-size:20px;}
    .product12-in h2{font-size:20px;line-height:30px;}
    .product12-in h5{font-size:14px;margin-bottom: 30px;}


    .product12-in p{
        font-size: 14px;
        line-height: 26px;
    }
    .product2-in a{transition:0.5s all;position:absolute;width: 140px;height: 36px;border: 1px solid #0b8bcf;background-color: #008cd6;display: block;left: 0;text-align: left;line-height: 36px;font-size: 12px;padding-left: 36px;margin-top: 40px;
    color:#fff;}



    
    .product21-in{
        width: 466px;
        margin-bottom: 50px;
        margin-left: 200px;
    }

    .product22-in{width:800px;text-align: right;height: 600px;color:#fff;position: absolute;right: 0;top: 300px;}

    .product22-in h4{font-size:20px;line-height: 40px;}
    .product22-in h2{font-size: 18px;line-height:30px;}
    .product22-in h5{font-size:14px;margin-bottom:36px;}


    .product22-in p{
        font-size: 14px;
        line-height: 26px;
        color: #fff;
    }




    .product31-in{
        width: 853px;
        margin-bottom: 50px;
        float: right;
        margin-right: 200px;
    }
    
    
    .product32-in{width:800px;float: left;text-align: left;height: 600px;color: #fff;position: absolute;top: 260px;}

    .product32-in h4{font-size:20px;line-height: 50px;}
    .product32-in h2{font-size:20px;line-height:30px;}
    .product32-in h5{font-size:14px;margin-bottom: 26px;}


    .product32-in p{
        font-size: 14px;
        line-height: 26px;
        margin-bottom: 30px;
    }
    
    .product12-in a::before{content:"";position:absolute;width: 26px;height: 1px;background-color: #fff;right: 18px;top: 18px;}
    .product12-in a::after{content:"";position:absolute;width: 10px;height: 1px;transform: rotate(45deg);background-color: #fff;top: 15px;right: 16px;}
    
    .product32-in a:hover{background-color:#008cd6;border-color:#fff;box-shadow:0 0 3px #666;}
    .product32-in a:hover{color:#fff;}
    .product32-in a:hover::before{background-color:#fff;}
    .product32-in a:hover::after{background-color:#fff;}





    .product1{background:url("/images/pro1-bg.jpg") no-repeat right center;width:100%;height: 700px;padding: 140px 0 80px;background-attachment: fixed;}
    .product2{background: url("/images/pro2-bg.jpg") no-repeat left center;width:100%;height: 800px;padding: 100px 0 80px;background-attachment: fixed;}
    .product3{background:url("/images/pro3-bg.jpg") no-repeat right center;width:100%;height: 800px;padding: 120px 0 80px;background-attachment: fixed;}
    

.advantage{width: 100%;height: 900px;padding:80px;background:url('/images/advantage-bg.jpg') no-repeat center center;background-attachment: fixed;}
.advantage-title{text-align: center;color: #fff;height: 100px;width: 100%;}
.advantage-title h1{font-size:30px;line-height: 60px;text-align: center;}
.advantage-title h3{font-size:14px;}
.hex{width:600px;margin:0 auto;height: 490px;position:relative;margin-top: 120px;}
.hex>div{width:161px;height:185px;background:url('/images/hex-bg.png') no-repeat center center;position: absolute;
cursor: pointer;}
.hex>div>img{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin:auto;transition: 1s all;}
.hex>div:hover{filter: drop-shadow(0 0 5px #666);}
.hex>div:hover>img{transform: rotate(360deg);}
.hex1{top:0px;left:0px;}
.hex2{top:0px;left: 220px;}
.hex3{top:0px;right:0px;}
.hex4{top:200px;left:100px;}
.hex5{top:200px;right:100px;}

.hex>p{position: absolute;color: #fff;text-align:center;}
.hex>p::before{content:"";position: absolute;height:1px;background-color: #fff;}
.hex>p::after{content:"";position: absolute;height:1px;background-color: #fff;}
.hex .des1{top: -30px;left: -240px;}
.hex .des1::before{width: 100px;top: 10px;left: 186px;}
.hex .des1::after{width: 40px;transform: rotate(30deg);top: 20px;left: 283px;}
.hex .des2{top: -100px;left: 200px;}
.hex .des2::before{}
.hex .des2::after{width: 60px;transform: rotate(90deg);top: 70px;left: 70px;}
.hex .des3{top: -30px;right: -230px;}
.hex .des3::before{width: 100px;top: 10px;right: 176px;}
.hex .des3::after{width: 40px;transform: rotate(-30deg);top: 20px;right: 273px;}
.hex .des4{top: 393px;left: -160px;}
.hex .des4::before{width: 100px;top: 10px;left: 206px;}
.hex .des4::after{width: 40px;transform: rotate(-30deg);top: 0px;left: 303px;}
.hex .des5{top: 393px;right: -179px;}
.hex .des5::before{width: 100px;top: 10px;right: 226px;}
.hex .des5::after{width: 40px;transform: rotate(30deg);top: 0px;right: 323px;}

.advantage-more{position: relative;width: 150px;height: 40px;line-height: 40px;background-color: #fff;padding-left: 30px;color:#0498e6;margin:0 auto;display: block;}
.advantage-more:hover{box-shadow: 0 0 6px #666;}
.advantage-more:hover::before{left:106px;}
.advantage-more:hover::after{left: 126px;}
.advantage-more::before{transition: 1s all; position: absolute;content:"";width: 30px;height:1px;background-color: #0496e3;top: 20px;left: 100px;}
.advantage-more::after{transition: 1s all;position: absolute;content:"";width: 10px;height:1px;background-color: #0496e3;transform: rotate(45deg);top: 16px;left: 120px;}


.college{width:100%;height: 500px;background: url('/images/college-bg.jpg');padding:120px 0 120px 0;color:#fff;text-align:center;background-attachment: fixed;}
.college1{text-align:center;}
.college h1{
    font-size: 22px;
    letter-spacing: 2px;
}
.college h3{
    line-height: 40px;
    font-size: 14px;
}
.college p{margin-bottom: 120px;}


    a.more{
    transition:0.5s all;
    position: relative;
    width: 140px;
    height: 42px;
    border: 1px solid #0b8bcf;
    background-color: #ffffff;
    display: inline-block;
    text-align: left;
    line-height: 42px;
    font-size: 12px;
    padding-left: 36px;
    color: #0b8bcf;
    margin-top: 30px;
    }
    
    a.more::before{content:"";position:absolute;width: 26px;height: 1px;background-color: #0b8bcf;right: 18px;top: 20px;}
    a.more::after{content:"";position:absolute;width: 10px;height: 1px;transform: rotate(45deg);background-color: #0b8bcf;top: 17px;right: 16px;}
    a.more:hover{background-color:#008cd6;border-color:#fff;box-shadow:0 0 3px #666;}
    a.more:hover{color:#fff;}
    a.more:hover::before{background-color:#fff;}
    a.more:hover::after{background-color:#fff;}

    .college a{margin:0 auto; }