.sec {
    position:relative;
    overflow: hidden;
}
.introWrap { width: 100%; height: 100vh; background: #EAEAEA; position: fixed; top: 0; left: 0; z-index: 10000;}
.introWrap::after { width: 100%; height: 100%; display: block; content: ''; position: absolute; top: 0; left: 0; background: #EAEAEA; z-index: 2;}
body.load .introWrap::after { display: none;}
.introWrap video { width: 100%; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.introWrap .nth1 { position: absolute; top: 30px; left: 35%; width: 30%; z-index: 3}
.introWrap .skip { position: absolute; bottom: 20px; right: 30px; z-index: 3; width: 30%;}
.sec .titleWrap {
    position:absolute;
    right:40px;
    bottom: 0;
    display: flex;
    flex-flow: column;
    align-items: center;
    z-index: 10;
}

.sec .titleWrap>* {
    position:relative;
}

.sec .titleWrap .circle {
    position:absolute;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-color: #d2584b;
    top:-30px;
    transition: all .5s;
}

.sec .titleWrap:hover .circle {
    height: calc(100% - 135px + 30px);
    border-radius: 300px;
}

.sec .titleWrap .t {
    margin-bottom: 25px;
}

.sec .titleWrap hr {
    display: flex;
    width: 1px;
    height: 135px;
    background-color: #d2584b;
}

.sec .titleWrap.white hr {
    background-color: #fff;
}

.visualWrap {
	width: 100%; position: relative; overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.visualWrap .bar { position: absolute; bottom: 0; left: 0; z-index: 2;}
.visualWrap video { width: 120%; height: 100%; position: absolute;left: 50%; top: 50%; transform: translate(-50%, -50%);}
.visualWrap .bgWrap {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.visualWrap .swiper-slide .imgWrap img {
    transform: scale(1.2);transition: all 5s;
}

.visualWrap .swiper-slide-active .imgWrap img {
    
    transform: scale(1);
}


.visualWrap .open {
    position:absolute;
    bottom: 0;
    z-index: 10;
}

.visualWrap .textWrap {
    position:absolute;
    top: 20%;
    left: 0%;
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    z-index: 10;transition: all 1s; 
}
.visualWrap .textWrap .text1 { opacity: 0; top: 50px;}
.visualWrap .textWrap .text2 { opacity: 0; top: 50px;}
.visualWrap .textWrap .text3 { opacity: 0; top: 50px;}

.visualWrap .swiper-slide-active .textWrap .text1{	opacity: 1;    top:0%; transition: all 1.32s ease 0s;}
.visualWrap .swiper-slide-active .textWrap .text2{	opacity: 1;    top:0%; transition: all 1.32s ease .4s;}
.visualWrap .swiper-slide-active .textWrap .text3{	opacity: 1;    top:0%; transition: all 1.32s ease .8s;}

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

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

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

.visualWrap .posWrap {
    margin-top: 30px;
    z-index: 100;
    display: flex;
    gap:0 30px;
}

.visualWrap .posWrap a {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    transition:all .5s;
    border:1px solid #897d76;
}

.visualWrap .posWrap a.active {
    background-color: #897d76;
}

.visualWrap .swiper-pagination { bottom: 80px; z-index: 10;}
.visualWrap .swiper-pagination-bullet { width: 13px; height: 13px; opacity: 1; border: 1px solid #fff; background: none; margin: 0 10px !important;}
.visualWrap .swiper-pagination-bullet-active { background: #fff; border-color:#fff;}
.visualWrap .scroll {	width: 25%;	bottom: 2%;	right: 5%;	    position:absolute;    display: flex;    align-items: center;    justify-content: center;	z-index: 5}
.visualWrap .scroll .s1 {    animation:rotateLoop 5s infinite linear;}
.visualWrap .scroll .s2 {    position:absolute;}

.sec1Wrap {width: 100%; position: relative;}
.sec1Wrap .titWrap { width: 100%; position: absolute; top: 0; left: 0; z-index: 2;}
.sec1Wrap .swiper-container {    width:  100%; position: relative;}
.sec1Wrap .textWrap { width: 100%; position: absolute; top: 65%; left: 0; z-index: 1;}
.sec1Wrap .textWrap .text1 { opacity: 0; left: 100px; }
.sec1Wrap .textWrap .text2 { opacity: 0; left: 100px; }
.sec1Wrap .textWrap .text3 { opacity: 0; left: 100px; }
.sec1Wrap .swiper-slide-active .textWrap .text1 { opacity: 1; left: 0px; transition: all 1s ease .3s; }
.sec1Wrap .swiper-slide-active .textWrap .text2 { opacity: 1; left: 0px; transition: all 1s ease .6s; }
.sec1Wrap .swiper-slide-active .textWrap .text3 { opacity: 1; left: 0px; transition: all 1s ease .9s; }
.sec1Wrap .barWrap { width: 30%; height: 30px; position: absolute; top: 90%; left: 9%;  z-index: 2;}
.sec1Wrap .barWrap .num1 { width: 20px; height: 30px; display: block; position: absolute; top: 0; left: 0; text-align: left; font-size: 16px; font-weight: bold; line-height: 28px; color: #fff;}
.sec1Wrap .barWrap .num2 { width: 20px; height: 30px; display: block; position: absolute; top: 0; right: 0; text-align: right; font-size: 16px; font-weight: bold; line-height: 28px; color: rgba(255,255,255,.6);}
.sec1Wrap .barWrap .bar { width: calc(100% - 50px); height: 2px; background: rgba(255,255,255,.5); display: block; margin: 12px auto 0; position: relative;}
.sec1Wrap .barWrap .bar::after { width: 100%; height: 100%; background: #fff; display: block; position: absolute; top: 0; left: 0; content: '';}
.sec1Wrap .barWrap .bar.on::after {animation: barani 5.2s ;}

.sec1Wrap .btnWrap { width: 30%; position: absolute; top: 90%; left: 40%; z-index: 3}
.sec1Wrap .btnWrap a { wiidth: 50%; display: block; position: relative; float:  left;}

@keyframes barani {
    0% {
        width: 0
    }

    100% {
        width: 100%;
    }
}
@keyframes rotateLoop {
	0% {
		transform: rotate(0deg);
	}

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

.sec2Wrap { width: 100%; box-sizing: border-box; position: relative; overflow: hidden;}
.sec2Wrap .bg { width: 100%; display: block;}
.sec2Wrap .rightWrap .swiper-container {    width: 100%; position: absolute; top: 50%; left: 9%; overflow: hidden; padding-bottom: 10%;}
.sec2Wrap .rightWrap .swiper-slide {  padding-top: 10%;transition: all 1s;}
.sec2Wrap .rightWrap .swiper-slide-active { padding-top: 0%; }
.sec2Wrap .swiper-horizontal > .swiper-pagination-progressbar, .sec2Wrap .swiper-pagination-progressbar.swiper-pagination-horizontal, .sec2Wrap .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .sec2Wrap .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {	top: 90%; left: 9%; width: 82%;}
.sec2Wrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #436850 }
.sec2Wrap .scroll {	width: 20%;	top: 20%;	right: 3%;    position:absolute;    display: flex;    align-items: center;    justify-content: center;	z-index: 5}
.sec2Wrap .scroll .s1 {    animation:rotateLoop 5s infinite linear; z-index: 1}
.sec2Wrap .scroll .s2 {    position:absolute;}
.sec2Wrap .btnWrap { width: 50%; margin: 0 auto;position: relative; display: flex; justify-content: space-between;}
.sec2Wrap .btnWrap a { wiidth: 50%;}


.sec3Wrap {width: 100%; position: relative; background: #153d2e;}
.sec3Wrap .swiper-container {    width: 100%; position: absolute; top: 12%; left: 0%; overflow: hidden; padding-bottom: 10%;}
.sec3Wrap .textWrap { margin-top: calc(4% * -1);}
.sec3Wrap .swiper-horizontal > .swiper-pagination-progressbar, .sec3Wrap .swiper-pagination-progressbar.swiper-pagination-horizontal, .sec3Wrap .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .sec3Wrap .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {	top: 88%; left: 9%; width: 82%}
.sec3Wrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #bca37f }

.sec3Wrap .sc {	width: 20%;	top: 6%;	left: 79%;	 position:absolute;    display: flex;    align-items: center;    justify-content: center;	z-index: 5}
.sec3Wrap .sc .b1 {    animation:rotateLoop 5s infinite linear;}
.sec3Wrap .sc .b2 {    position:absolute;}


.sec4Wrap {    position:relative;}
.sec4Wrap .bg { width: 100%; display: block;}

.sec4Wrap .wrap {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
}

.sec4Wrap .wrap .linkWrap { width: 100%; position: relative;}
.sec4Wrap .wrap .linkWrap a { width: 50%; height: 100%; display: block; position: absolute; top: 0; left: 0}
.sec4Wrap .wrap .linkWrap a.nth2 { left: 50%;}

.sec5Wrap .leftWrap { width: 100%; position: relative;}
.sec5Wrap .leftWrap .swiper-container {    width: 100%;    height: 100%; position: relative; overflow: hidden;}
.sec5Wrap .leftWrap .swiper-wrapper {width: 100%; position: relative;}
.sec5Wrap .leftWrap .swiper-slide .imgWrap { width: 100%; position: relative; overflow: hidden;}
.sec5Wrap .leftWrap .swiper-slide .imgWrap img { position: relative; width: 100%; max-width: inherit;}
.sec5Wrap .leftWrap .swiper-slide .textWrap {position: absolute; left: 0px; top: 0px; text-align: left; z-index: 1;}
.sec5Wrap .leftWrap .swiper-slide .textWrap img { position: relative; opacity: 0; left: 100px; transition: all 1.3s;}
.sec5Wrap .leftWrap .swiper-slide-active .textWrap img { left: 0; opacity: 1;}
.sec5Wrap .leftWrap .btnWrap { width: 20%; height: 30px; position: absolute; top: 35%; left: 12%; z-index: 2;}
.sec5Wrap .leftWrap .btnWrap a { display: block; float: left;margin-right: 10px;}

.sec5Wrap .rightWrap { width: 100%; position: relative;}
.sec5Wrap .rightWrap > div { width: 100%; margin: 0 auto;}
.sec5Wrap .rightWrap .swiper-container {    width: 100%; position: absolute; top: 0; left: 0; overflow: hidden;}
.sec5Wrap .rightWrap .swiper-wrapper {width: 100%; position: relative;}
.sec5Wrap .rightWrap .swiper-slide .imgWrap { width: 100%; position: relative; overflow: hidden;}
.sec5Wrap .rightWrap .swiper-slide .imgWrap img { position: relative;}
.sec5Wrap .rightWrap .barWrap { width: 200px; height: 30px;  position: absolute; top: 75%; left: 10%; z-index: 2; }
.sec5Wrap .rightWrap .barWrap .num1 { width: 20px; height: 30px; display: block; position: absolute; top: 0; left: 0; text-align: left; font-size: 16px; font-weight: bold; line-height: 28px; color: #606060;}
.sec5Wrap .rightWrap .barWrap .num2 { width: 20px; height: 30px; display: block; position: absolute; top: 0; left: 180px; text-align: right; font-size: 16px; font-weight: bold; line-height: 28px; color: rgba(0,0,0,.3);}
.sec5Wrap .rightWrap .barWrap .bar { width: 140px; height: 2px; background: rgba(0,0,0,.2); display: block; margin: 0px auto 0; position: relative; top: 12px;}
.sec5Wrap .rightWrap .barWrap .bar::after { width: 100%; height: 100%; background: #606060; display: block; position: absolute; top: 0; left: 0; content: '';}
.sec5Wrap .rightWrap .barWrap .bar.on::after {animation: barani 5.2s ;}
.sec5Wrap .rightWrap .btnWrap { width: 80px; height: 30px; position: absolute; top: 75%; left: 260px; z-index: 2;}
.sec5Wrap .rightWrap .btnWrap a { display: block; float: left;margin-right: 10px;}

.sec6Wrap {
    background: #efedeb ;
	overflow: hidden;
	padding-bottom: 40px;
	width: 100%;
}

.sec6Wrap .leftWrap { width: 100%; float: left; position: relative;}
.sec6Wrap .leftWrap > div { width: 100%; margin: 0 auto;}
.sec6Wrap .leftWrap .swiper-container {    width: 100%;   position: relative; overflow: hidden;}
.sec6Wrap .leftWrap .swiper-wrapper {width: 100%; position: relative;}
.sec6Wrap .leftWrap .swiper-slide .imgWrap { width: 100%; position: relative; overflow: hidden;}
.sec6Wrap .leftWrap .swiper-slide .imgWrap img { position: relative;  }

.sec6Wrap .rightWrap { width: 100%;  float: left; position: relative;}
.sec6Wrap .rightWrap .swiper-container {    width: 100%;  position: relative; overflow: hidden;}
.sec6Wrap .rightWrap .swiper-wrapper {width: 100%; position: relative;}
.sec6Wrap .rightWrap .swiper-slide .imgWrap { width: 100%; position: relative; overflow: hidden;}
.sec6Wrap .rightWrap .swiper-slide .imgWrap img { position: relative;}

.sec6Wrap .btnWrap { width: 25%;  position: absolute; top: 60.1%; right: 0%; z-index: 2;}
.sec6Wrap .btnWrap::after { width: 1px; height: 100%; position: absolute; top: 0; left: 50%; background: #fff; content: ''; z-index: 1;}
.sec6Wrap .btnWrap a { display: block; float: left; width: 50%;}