.introWrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000000000;
}

.introWrap .text1 {
    position: absolute;
    /* left: 30px; */
    max-width: unset;
    /* height: 100%; */
    transform: scale(1.5);
}

.introWrap .text1.active {
    animation: introText1 6s linear forwards;
}

@keyframes introText1 {
    0% {
        transform: scale(1.5);
    }

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

.introWrap .textWrap {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 66px 0;
    position: relative;
}

.introWrap .textWrap .circle {
    position: absolute;
    bottom: -127px;
    right: -20px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #005151;
}

.introWrap .textWrap .circle.active {
    animation: introCircle 5s linear forwards;
}

@keyframes introCircle {
    0% {
        width: 10px;
        height: 10px;
    }

    33% {
        width: 20px;
        height: 20px;
    }

    66% {
        width: 10px;
        height: 10px;
    }

    100% {
        width: 20px;
        height: 20px;
    }
}

.introWrap .cursor {
    position:absolute;
    bottom: -250px;
    right: -50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
}

.introWrap .cursor img {
    position:relative;
    z-index: 1;
}

.introWrap .cursor .eff {
    position:absolute;
    width: 100%;
    border-radius: 100%;
    height: 100%;
    background-color: #005151;
}

.introWrap .cursor .eff.active {
    animation: introcursor 2s ease infinite;
}

@keyframes introcursor {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .6;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

.introWrap * {
    display: none;
}

.sec {
    position:relative;
    overflow: hidden;
}

.visualWrap {
    height: 1138px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visualWrap .bgWrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.visualWrap .bgWrap .swiper-slide img {
    transform: scale(1.2);
}

.visualWrap .bgWrap .swiper-slide img.scl {
    transition: all 5s;
    transform: scale(1);
}

.visualWrap .textWrap {
    position: absolute;
    top: 200px;
    left: 0;
    width: 100%;
    z-index: 10;
}

.visualWrap .textWrap .swiper-container {
    margin-bottom: 50px;
}

.visualWrap .textWrap .swiper-slide {
    opacity: 0 !important;
    transition: all 1s;
    display: flex;
    justify-content: center;
}

.visualWrap .textWrap .swiper-slide-active {
    opacity: 1 !important;
}

.visualWrap .ctrWrap {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 60px;
    left: 40px;
    width: calc(100% - 80px);
    z-index: 10;
}

.visualWrap .ctrWrap .proWrap {
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    position: relative;
}

.visualWrap .ctrWrap .proWrap .pro {
    position: absolute;
    top: 0;
    left: 0;
    width: 33%;
    height: 100%;
    background-color: #fff;
    transition: all .5s;
}

.visualWrap .ctrWrap .arrowsWrap {
    display: flex;
    align-items: center;
    gap: 0 40px;
}

.visualWrap .scroll {
    position: absolute;
    bottom: 170px;
    right: 180px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.visualWrap .scroll .s1 {
    animation: rotateLoop 4s infinite linear;
}

.visualWrap .scroll .s2 {
    position: absolute;
}

.ssec1Wrap {
    height: 1270px;
    background: url(../images/main/231018/bg_sec1.png) no-repeat center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:0 36px;
}

.ssec1Wrap .contWrap {
    display: flex;
    width: 100%;
    flex-flow: column;
    align-items: center;
    gap: 70px 0;
}

.ssec1Wrap .contWrap .cntWrap {
    display: flex;
    flex-flow: row wrap;
    position: relative;
}
.ssec1Wrap .contWrap .cntWrap::after { width: 1px; height: 0; display: block; clear: both; content: ""}
.ssec1Wrap .contWrap .cntWrap>div {    position: relative; margin-bottom: 10px; float: left;}
.ssec1Wrap .contWrap .cntWrap>div img {
    transition: all .5s;
}

.ssec1Wrap .contWrap .cntWrap>div img:last-child {
    position: absolute;
	top: 0;
}

.ssec1Wrap .contWrap .cntWrap>div:not(:hover) img:last-child,
.ssec1Wrap .contWrap .cntWrap>div:hover img:first-child {
    opacity: 0;
}

.ssec2Wrap {
    height: 1339px;
}

.ssec2Wrap .contWrap {
    display: flex;
    height: 100%;
}

.ssec2Wrap .contWrap .leftWrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.ssec2Wrap .contWrap .leftWrap .bgWrap,
.ssec2Wrap .contWrap .leftWrap .bgWrap .swiper-container {
    width: 100%;
    height: 100%;
}

.ssec2Wrap .contWrap .leftWrap .textWrap {
    position: absolute;
    top: 142px;
    left: 36px;
    display: flex;
    width: calc(100% - 72px);
    flex-flow: column;
    align-items: flex-start;
    gap: 85px 0;
    z-index: 10;
}

.ssec2Wrap .contWrap .leftWrap .textWrap .text1 {
    position: relative;
    display: flex;
    align-items: center;
}

.ssec2Wrap .contWrap .leftWrap .textWrap .text1 hr {
    display: block;
    width: 125px;
    height: 3px;
    background-color: #fff;
    position: absolute;
    left: calc(100% + 25px);
}

.ssec2Wrap .contWrap .leftWrap .textWrap .swiper-slide {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 44px 0;
    opacity: 0 !important;
    transition: all 1s;
}

.ssec2Wrap .contWrap .leftWrap .textWrap .swiper-slide-active {
    opacity: 1 !important;
}

.ssec2Wrap .contWrap .rightWrap {
    position: absolute;
    top:0;
    right:0;
    padding-top: 142px;
    z-index: 10;
    width: 107px;
    height: 100%;
    display: flex;
    justify-content: center;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.ssec2Wrap .contWrap .rightWrap .posWrap {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 107px 0;
}

.ssec2Wrap .contWrap .rightWrap .posWrap a {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
}

.ssec2Wrap .contWrap .rightWrap .posWrap a:before {
    content: '';
    width: 1px;
    height: 0%;
    /* height: 100%; */
    position: absolute;
    transition: all .5s;
    top: 0;
    background-color: #fff;
}

.ssec2Wrap .contWrap .rightWrap .posWrap a.active:before {
    height: 100%;
}

.ssec2Wrap .contWrap .rightWrap .posWrap a img {
    transition: all .5s;
}

.ssec2Wrap .contWrap .rightWrap .posWrap a img:last-child {
    position: absolute;
}

.ssec2Wrap .contWrap .rightWrap .posWrap a:not(.active) img:last-child,
.ssec2Wrap .contWrap .rightWrap .posWrap a.active img:first-child {
    opacity: 0;
}

.ssec3Wrap {
    height: 1138px;
    background: url(../images/main/231018/bg_sec3.png) no-repeat left center/auto 100%;
    display: flex;
    align-items: flex-start;
    padding-top: 160px;
}

.ssec3Wrap .contWrap {
    width: 100%;
    padding-left: 111px;
    display: flex;
    flex-flow: column;
    align-items: flex-end;
}

.ssec3Wrap .contWrap .topWrap {
    width: 100%;
    overflow: hidden;
}

.ssec3Wrap .contWrap .bottomWrap .ctrWrap {
    display: flex;
    align-items: center;
    gap: 0 30px;
    z-index: 10;
    margin-right: 160px;
}

.ssec3Wrap .contWrap .bottomWrap .ctrWrap .proWrap {
    width: 380px;
    height: 4px;
    background-color: #ccdbda;
    position: relative;
}

.ssec3Wrap .contWrap .bottomWrap .ctrWrap .proWrap .pro {
    position: absolute;
    top: 0;
    left: 0;
    width: 33%;
    height: 100%;
    background-color: #004b45;
    transition: all 1s;
}

.ssec3Wrap .contWrap .bottomWrap .ctrWrap .arrowsWrap {
    display: flex;
    align-items: center;
    gap: 0 40px;
}

.sec1Wrap {
    background: url(../images/main/bg_sec1.png) no-repeat -20px center/auto 100%;
    display: flex;
    justify-content: flex-start;
    height: 1192px;
    padding-top: 115px;
}

.sec1Wrap .contWrap {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 100%;
}

.sec1Wrap .contWrap .leftWrap {
    position:relative;
    width: 100%;
    z-index: 10;
    margin-bottom: 60px;
    padding-right: 50px;
}

.sec1Wrap .contWrap .leftWrap .bgWrap {
    width: 100%;
}

.sec1Wrap .contWrap .leftWrap .bgWrap .bgSlide {
    width: 100%;
    height: 440px;
    border-radius:300px;
    transition:all 1s;
    background-color: #cfd7d3;
    overflow: hidden;
}

.sec1Wrap .contWrap .leftWrap .bgWrap .bgSlide img {
    opacity: 0;
    transition: all 1s;
}

.sec1Wrap .contWrap .leftWrap .bgWrap .swiper-slide-active .bgSlide {
    border-radius:0 300px 300px 0;
}

.sec1Wrap .contWrap .leftWrap .bgWrap .swiper-slide-active .bgSlide img {
    opacity: 1;
}

.sec1Wrap .contWrap .leftWrap .viewBtn {
    position: absolute;
    top: -20px;
    right: 30px;
    display: flex;
    align-items: center;
    z-index: 100;
    justify-content: center;
}

.sec1Wrap .contWrap .leftWrap .viewBtn:before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    background-color: #877d76;
}

.sec1Wrap .contWrap .leftWrap .viewBtn img:first-child {
    animation: rotateLoop 4s infinite linear;
}

.sec1Wrap .contWrap .leftWrap .viewBtn img:last-child {
    position: absolute;
}

.sec1Wrap .contWrap .rightWrap {
    width: 100%;
    position:relative;
    display: flex;
    align-items: flex-start;
    padding-left: 60px;
    gap:0 85px;
}

.sec1Wrap .contWrap .rightWrap .textWrap {
    margin-bottom: 80px;
}

.sec1Wrap .contWrap .rightWrap .textWrap .swiper-slide {
    opacity: 0 !important;
    transition:all 1s;
}

.sec1Wrap .contWrap .rightWrap .textWrap .swiper-slide-active {
    opacity: 1 !important;
}

.sec1Wrap .contWrap .rightWrap .arrowsWrap {
    display: flex;
    align-items: center;
    gap:0 40px;
    padding-left: 10px;
}

.sec2Wrap {
    background: url(../images/main/bg_sec2.png) no-repeat center/cover;
    padding: 150px 0;
    display: flex;
    justify-content: flex-start;
}

.sec2Wrap .contWrap {
    display: flex;
    flex-flow: column;
    width: 100%;
	
}

.sec2Wrap .swiper-wrapper { display: block;}
.sec2Wrap .swiper-wrapper::after { width: 1px; height: 0; display: block; clear: both; content: "";}
.sec2Wrap .swiper-slide { width: 46%; margin-left: 2%; margin-right: 2%; float: left; position: relative; margin-bottom: 40px;}


.sec2Wrap .contWrap .topWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    width: 100%;
}

.sec2Wrap .contWrap .topWrap .topLeftWrap {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 100%;
    /*gap:18px 0;
    padding-right: 33px;*/
	padding: 0 2%;
	
}

.sec2Wrap .contWrap .topWrap .topLeftWrap .ctrWrap {
    display: flex;
    align-items: center;
	margin-top: 20px;
}

.sec2Wrap .contWrap .topWrap .topLeftWrap .ctrWrap .text2 {
    margin-right: 48px;
}

.sec2Wrap .contWrap .topWrap .topLeftWrap .ctrWrap .proWrap {
    width: 400px;
    flex:1;
    height: 4px;
    background-color: rgba(24, 75, 68, 0.2);
    position: relative;
    margin-right: 30px;
}

.sec2Wrap .contWrap .topWrap .topLeftWrap .ctrWrap .proWrap .pro {
    position: absolute;
    top: 0;
    left: 0;
    width: 33%;
    height: 100%;
    background-color: rgba(24, 75, 68, 1);
    transition: all 1s;
}

.sec2Wrap .contWrap .topWrap .topLeftWrap .ctrWrap .arrowsWrap {
    display: flex;
    align-items: center;
    gap: 0 40px;
}

.sec2Wrap .contWrap .topWrap .topRightWrap .viewBtn {
    display: flex;
    align-items: center;
    z-index: 100;
    justify-content: center;
}

.sec2Wrap .contWrap .topWrap .topRightWrap .viewBtn:before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    background-color: #184b44;
}

.sec2Wrap .contWrap .topWrap .topRightWrap .viewBtn img:first-child {
    animation: rotateLoop 4s infinite linear;
}

.sec2Wrap .contWrap .topWrap .topRightWrap .viewBtn img:last-child {
    position: absolute;
}

.sec2Wrap .contWrap .bottomWrap {
    width: 100%;
    overflow: hidden;
    padding-bottom: 163px;
}

.sec2Wrap .contWrap .bottomWrap .simageWrap {
    position:relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:all .5s;
    border-radius:300px;
}

.sec2Wrap .contWrap .bottomWrap .simageWrap img {
    transition:all .5s;
}

.sec2Wrap .contWrap .bottomWrap .simageWrap img:last-child {
    position:absolute;
}

.sec2Wrap .contWrap .bottomWrap .swiper-slide:hover .simageWrap {
    box-shadow: 19.077px 30.53px 21px 0px rgba(0, 0, 0, 0.22);
}

.sec2Wrap .contWrap .bottomWrap .swiper-slide:hover .simageWrap img:first-child,
.sec2Wrap .contWrap .bottomWrap .swiper-slide:not(:hover) .simageWrap img:last-child {
    opacity: 0;
}

.sec3Wrap {width: 100%; position: relative; max-width: 720px; margin: 0 auto;}
.sec3Wrap img { position: relative; z-index: 1;}
.sec3Wrap img.bg { width: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 0;}

.sec3Wrap .contWrap {
    display: flex;
    flex-flow: column;
    align-items: center;
}

.sec3Wrap .contWrap .text1 {
    margin-bottom: 56px;
}

.sec3Wrap .contWrap .listWrap {
    display: flex;
    flex-flow: column;
    gap:12px 0;
    margin-bottom: 34px;
}

.sec4Wrap {
    background: url(../images/main/bg_sec4.png) no-repeat center/cover;
    display: flex;
    padding-top: 167px;
    height: 1327px;
    justify-content: center;
}

.sec4Wrap .contWrap {
    display: flex;
    flex-flow: column;
    align-items: center;
}

.sec4Wrap .contWrap .text1 {
    margin-bottom: 46px;
}

.sec4Wrap .contWrap .imageWrap {
    display: flex;
    flex-flow: column;
    gap: 19px 0;
    margin-bottom: 10px;
}