@charset "utf-8";
/* CSS Document */
body {background: url("../images/bg-1.jpg")no-repeat top / 100%;z-index: -1;}
img {max-width:100%;height: auto;}
.section-1 {padding: 0 4%;background-image: linear-gradient(to bottom,transparent 0, #0f1011 80%);margin-top: 100px;}
.section-1 .banner{padding: 50px;background: #fff;}
.section-1 .banner h1{font-size: 48px;font-weight: 600;}
.section-1 .banner .banner-bottom{padding: 10px 0; display: flex;flex-wrap: wrap; justify-content: space-between;align-items: center;position: relative;}
.section-1 .banner .banner-bottom h1{font-weight: 600;}
.section-1 .banner .banner-bottom h1::before{content: "";width: 130px;height: 40px;background: url("../images/icon-01.png")no-repeat top / 100%;position: absolute;top: 20%;left: -140px;}
.section-1 .banner .banner-bottom p{font-weight: 600;}
.section-1 .banner .banner-bottom .button a{padding: 15px 25px;background: #d60413;color: #fff;font-weight: 600;border-radius: 10px;}
.section-1 .banner .banner-bottom .button a:hover{background: #FFF000;color:#d60413; }


.section-2 {background-image: linear-gradient(to top,transparent 5%, #0f1011 72%);display: flex;flex-wrap: wrap; align-items: center;justify-content: space-between; padding: 0 8%;}
.section-2 > div{width: 45%;padding: 6% 0;}
.section-2 > div:nth-child(1){padding: 6% 5%;}
.section-2 > div p{color: #fff; line-height: 30px}

.section-3 {padding: 0 4% 5%;}
.section-3 .title{font-weight: 600;position: relative;}
.section-3 .title::before{content: "";width: 60px;height: 40px;background: url("../images/icon-01.png")no-repeat top / 100% 100%;position: absolute;top: 12px;left: -70px;}
.section-3 .section-3-content{display: flex;padding-top: 50px;flex-wrap: wrap;}
.section-3 .section-3-content > div{width: 50%;}
.section-3 .section-3-content .video{padding: 0 15px 0 0;position: relative;}
.section-3 .section-3-content .video a::after{content: "";width: 100px;height: 100px;background: url("../images/icon-play.png")no-repeat center/ cover;position: absolute;top: calc(50% - 50px);left: calc(50% - 50px);}
.section-3 .section-3-content .video:hover a::after{content: "";width: 100px;height: 100px;background: url("../images/icon-play-v.png")no-repeat center/ cover;position: absolute;top: calc(50% - 50px);left: calc(50% - 50px);}
.section-3 .section-3-content .video-text{padding: 0 0 0 15px;text-align: left;}
.section-3 .section-3-content .video-text div{padding-bottom: 10px;}
.section-3 .section-3-content .video-text p{line-height: 30px;}

.icon-set{padding: 50px 0;}
.icon-set img{display: inline-block;width: 48%;}
.icon-set img:nth-child(1){margin-right: 3%;}

.section-4 {padding: 0 4%; overflow: visible;}
.section-4 .top{display: flex;flex-wrap: wrap; align-items: flex-end;padding-bottom: 5%;position: relative;}
.section-4 .top::after{content: "";width: 3000px;height: 500px;background:#efefef;position: absolute;bottom: 0;left: -10%;z-index: -1;}
.section-4 .top .pic{width: 67%;}
.section-4 .top .pic img{display: inline-block;margin-right: 15px;width: 45%;}
.section-4 .top .text{width: 30%;color: #676767;line-height: 1.5;}
.section-4 .top .text span{font-weight: 600;color: #000;}

.bottom{max-width: 1300px;padding: 5% 0 0;margin: 0 auto;text-align: center;}
.bottom div{ width: 30%; display: inline-block; padding: 0 0 30px; margin: 0 10px;}

.section-5 {padding: 50px 4% 8%; overflow: visible;}
.section-5 .top{display: flex;flex-wrap: wrap; align-items: flex-end;padding-bottom: 5%;position: relative;justify-content: space-between;}
.section-5 .top::after{content: "";width: 3000px;height: 500px;background:#efefef;position: absolute;bottom: 0;left: -10%;z-index: -1;}
.section-5 .top .pic{width: 67%;order: 2;text-align: right; }
.section-5 .top .text{width: 30%;}
.section-5 .bottom div{ width: 23%; display: inline-block; padding: 0 0 30px; margin: 0 10px;}

@media only screen and (max-width:1250px){
    .section-1 {margin-top: 70px;}
    .section-3 .section-3-content{justify-content: center;text-align: center;}
    .section-3 .section-3-content > div{width: 80%;}
    .section-3 .section-3-content .video{padding: 20px;}
    
    .section-4 .top::after{height: 250px;}
    .section-4 .bottom div{ width: 25%; }
    .section-5 .top::after{height: 250px;}
    .section-5 .bottom div{ width: 20%; }
}
@media only screen and (max-width:992px){
    .section-2 {justify-content: center; margin-bottom: 40px;}
    .section-2 > div{width: 80%;padding: 6% 0;}
    .section-2 > div:nth-child(1){padding: 40px 0 0;}
    .section-2 > div p{color: #fff; line-height: 30px}
    .icon-set{padding: 10px 0;}
}
@media only screen and (max-width:768px){
    .section-1 .banner h1{font-size: 40px;}
    .section-1 {background-image: linear-gradient(to bottom,transparent 0, #0f1011 30%);}
    .section-1 .banner {padding: 10px;}
    .section-1 .banner .banner-bottom > div{padding: 15px 0; width: 100%;}
    .section-1 .banner .banner-bottom h1::before{left: -200px;}
    .section-2 > div{width: 100%;padding: 30px 0;}
    .section-3 .section-3-content > div{width: 100%;}  
    .section-3 .section-3-content .video::after{content: "";width: 50px;height: 50px;top: calc(50% - 25px);left: calc(50% - 25px);}
    .section-3 .section-3-content .video:hover::after{content: "";width: 50px;height: 50px;top: calc(50% - 25px);left: calc(50% - 25px);}
    .section-4 .top .text{width: 100%;margin-top: 20px;}
    .section-4 .top .pic{width: 100%;text-align: center;}
    .section-5 .top .pic{width: 80%;order: 1;}
    .section-5 .top .text{width: 100%;margin-top: 20px;order: 2;}
    .section-5 .top .pic{width: 100%;order: 1;}
    .bottom div{ padding: 0 0 10px; margin: 0 3px;}
    .section-5 .bottom div{ padding: 0 0 10px; margin: 0 3px;}
    .section-4 .bottom div{ width: 45%; }
    .section-5 .bottom div{ width: 45%; }
}

@media only screen and (max-width:450px){
    .section-1 .banner h1{font-size: 24px;}
    .section-1 .banner .banner-bottom{padding: 0 0 10px;}
    .section-1 .banner .banner-bottom > div{padding: 10px 0; }
    .section-2 { padding: 0 4%;}
    .section-2 > div{padding:  0;}
    .section-3 .section-3-content{padding-top: 10px;}
    .section-3 {padding: 0 4% 40px;}
    .section-3 .section-3-content .video{padding: 20px 0;}
    .section-3 .section-3-content .video-text{padding: 0;}
    .section-3 .title::before{left: -80px;}
    .section-4 .top .pic{width: 100%;}
    .section-4 .top .pic img{display: inline-block;margin-right: 5px;width: 48%;}
    .icon-set{padding: 20px 0 0;}
    .icon-set img{display: inline-block;width: 100%;margin-bottom: 10px;}
    
}

.html5-image{padding: 0!important;}
.html5-elem-data-box{display: none!important;}
#html5box-html5-lightbox-nav{display: none!important;}