@keyframes visualAni1 {
    0% {
        transform: scale(.75);
    }

    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(.75);
    }
}
@keyframes visualAni2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@keyframes visualAni {
    0% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}


@keyframes viScroll {
    0% {
        bottom: 40px;
    }
    50% {
        bottom: 20px;
    }
    100% {
        bottom: 40px;
    }
}
.visualWrap {  width: 100%; height: auto; overflow: hidden; position: relative;}
.visualWrap .bgWrap { width: 100%; position: relative;}
.visualWrap .bgWrap img { width: 100%; display: block; transform: scale(1.2); transition: all 1.5s ease 0s;}
.visualWrap .swiper-slide-active .bgWrap img {transform: scale(1.0); transition: all 5s ease 0s;}
.visualWrap .textWrap { width: 28.125%; position: absolute; top: 25%; left: 14%; z-index: 2;}
.visualWrap .ss2 .textWrap { left: 63.5%;}
.visualWrap .ss3 .textWrap { left: 8.3%; top: 29.5%; width: 19.27%;}
.visualWrap .textWrap img { display: block; width: 100%; margin-bottom: 15px; opacity: 0; position: relative; top: 20px;}
.visualWrap .swiper-slide-active .textWrap img:nth-child(1) { opacity: 1; top: 0; transition: all 1s ease .3s;}
.visualWrap .swiper-slide-active .textWrap img:nth-child(2) { opacity: 1; top: 0; transition: all 1s ease .6s;}
.visualWrap .swiper-slide-active .textWrap img:nth-child(3) { opacity: 1; top: 0; transition: all 1s ease .9s;}
.visualWrap .pageWrap { width: 100%; text-align: center; position: absolute; bottom: 40px; left: 0; z-index: 5;}
.visualWrap .pageWrap .pagition { display: inline-block; width: auto;}
.visualWrap .pageWrap .swiper-pagination-bullet { width: 14px; height: 14px; opacity: 1; background: none; border: 1px solid #fff; position: relative;}
.visualWrap .pageWrap .swiper-pagination-bullet-active { background: none;}
.visualWrap .pageWrap .swiper-pagination-bullet-active::after { width: 8px; height: 8px; display: block; position: absolute; top: 50%; left: 50%; background: #fff; transform: translate(-50%,-50%); content: ""; border-radius: 50%;}
.visualWrap .pageWrap .bar { width: 100px; height: 4px; background: rgba(0,0,0,.5); position: relative; display: inline-block; vertical-align: super;}
.visualWrap .pageWrap .bar span { width: 0px; height: 100%; background: #fff; position: absolute; top: 0; left: 0;}
.visualWrap .pageWrap .bar span.on { width: 100%; transition: all 5.8s linear 0s;}

.sec1 { width: 100%; background: #004e4f; position: relative;}
.sec1::after { width: 1px; height: 0; display: block; content: ""; clear: both;}
.sec1 .bg { display: block; width: 59.375%; float: right;}
.sec1 .textWrap { width: 30%; position: absolute; top: 50%; left: 5.5%; transform: translateY(-50%);}
.sec1 .textWrap img { width: 100%; display: block;}

.sec2 { width: 100%; position: relative; padding: 110px 0 90px; background: #f3f3f3;}
.sec2 h3 { width: 100%; text-align: center; margin-bottom: 80px;}
.sec2 h3 img { margin: 0px auto;}
.sec2 .listWrap { width: 83.4%; max-width: 1600px; margin: 0px auto; position: relative; overflow: hidden;}
.sec2 .listWrap a { width: 100%; display: block; position: relative;}
.sec2 .listWrap .imgWrap { width: 86.3%; height: 340px; background: #fff; display: flex; justify-content: center; align-items: center; margin: 0px auto 45px; border-radius: 20px 0 20px 0; box-shadow: 20px 20px 20px rgba(0,0,0,.05); overflow: hidden;}
.sec2 .listWrap .imgWrap img { transform: scale(1); transition: all .5s;}
.sec2 .listWrap a:hover .imgWrap img { transform: scale(1.02);}
.sec2 .listWrap .txt { margin: 0px auto 35px;}
.sec2 .listWrap .view {width: 100%; display: block; position: relative;}
.sec2 .listWrap .view img { margin: 0px auto; position: relative; z-index: 2;}
.sec2 .listWrap .view::after { width: 100%; height: 1px; background: #cdc8c1; content: ""; position: absolute; top: 14px; left: 0; z-index: 1;}
.sec2 .prev { position: absolute; top: 450px; left: 40px; cursor: pointer;}
.sec2 .next { position: absolute; top: 450px; right: 40px; cursor: pointer;}

.sec3 { width: 100%; padding: 80px 0; position: relative; background: #fff;}
.sec3 .slideWrap { width: 100%; position: relative; max-width: 1720px; margin: 0px auto;}
.sec3 .slideBox { width: 84.4%; max-width: 1454px; margin: 0px auto; position: absolute; top: 200%; background: #fff;}
.sec3 .slideBox.active { top: 0; position: relative;  z-index: 3;}
.sec3 .slideBox::after { width: 1px; height: 0; display: block; clear: both; content: "";}
.sec3 .slideBox h4 { width: 31%; max-width: 455px; position: absolute; left: 0; opacity: 0; top: 11%;}
.sec3 .slideBox .bWrap { width: 64.6%; max-width: 939px; float: right; position: relative; overflow: hidden; opacity: 0; left: 50px;}
.sec3 .slideBox .sWrap { width: 42.5%; position: absolute; top: 60.8%; z-index: 2; overflow: hidden ; opacity: 0; left: -50px;}
.sec3 .slideBox.active h4 { opacity: 1; top: 9%; transition: all 1s ease 0s}
.sec3 .slideBox.active .bWrap { opacity: 1; left: 0; transition: all 1s linear .3s}
.sec3 .slideBox.active .sWrap { opacity: 1; left: 0; transition: all 1s linear .6s}
.sec3 .prev { position: absolute; top: 340px; left: 10px; cursor: pointer;}
.sec3 .next { position: absolute; top: 340px; right: 10px; cursor: pointer;}
.sec3 .paging { width: 100%; padding-top: 60px; text-align: center; position: relative;}
.sec3 .paging span { width: 20px; height: 20px; display: inline-block; border-radius: 50%; background: #e5e5e5; margin: 0 10px; transition: all .3s;}
.sec3 .paging span.on {background: #887e71;}

.sec4 { width: 100%; height: 935px; box-sizing: border-box; background: url("../images/main/sec4_bg.jpg") no-repeat top center; padding-top: 180px;}
.sec4 img { margin: 0px auto;}
.sec4 img.txt2 { margin: 50px auto 75px;}
.sec4 a { display: block; width: 220px; margin: 0px auto;}

.sec {
    overflow: hidden;
}