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

.introWrap { width: 100%; height: 100%; background: #EAEAEA; position: fixed; top: 0; left: 0; z-index: 10001;}
.introWrap video { width: 100%; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: block;}
.introWrap .nth1 { position: absolute; top: 50px; left: 70px; z-index: 2; display: block;}
.introWrap .nth2 { position: absolute; top: 50px; right: 70px; z-index: 2; display: block;}
.introWrap .skip { position: absolute; bottom: 50px; right: 70px; z-index: 2; display: block;}


.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%; max-width: 1920px; margin: 0 auto; box-sizing: border-box; height: 980px;    overflow: hidden;}
.visualWrap .bgWrap {    width: 100%;    height: 100%; position: relative; overflow: hidden;}
.visualWrap .swiper-slide { width: 100%; overflow: hidden; position: relative; background: #fff;}
.visualWrap .swiper-slide .imgWrap img {    transform: scale(1.2); transition: all 5s;	max-width: inherit; position: relative; left: 50%; margin-left: -960px;}
.visualWrap .swiper-slide-active .imgWrap img {   transform: scale(1); }
.visualWrap .sl1 .textWrap {    position:absolute;   top: 290px;    left: 90px;;    width: 100%;    display: flex;    flex-flow: column;    align-items: flex-start;    z-index: 10;}
.visualWrap .sl2 .textWrap {    position:absolute;   top: 450px;    right: 50px;   width: 600px;	 display: flex;    flex-flow: column;    align-items: flex-start;    z-index: 10;}
.visualWrap .textWrap .text1 {position: relative; left: 100px;  opacity: 0;}
.visualWrap .textWrap .text2 {position: relative; left: 100px;  opacity: 0; margin: 25px 0;}
.visualWrap .textWrap .text3 {position: relative; left: 100px;  opacity: 0;}

.visualWrap .swiper-slide-active .textWrap  .text1{    opacity: 1;	left: 0px; transition: all 1s ease 0s;}
.visualWrap .swiper-slide-active .textWrap  .text2{    opacity: 1;	left: 0px; transition: all 1s ease .3s;}
.visualWrap .swiper-slide-active .textWrap  .text3{    opacity: 1;	left: 0px; transition: all 1s ease .6s;}


.visualWrap .snsWrap { width: 300px; position: absolute; bottom: 100px; left: 35px; z-index: 1;}
.visualWrap .snsWrap a { position: relative; margin-right: 7px; display: inline-block;}
.visualWrap .barWrap { width: 200px; height: 30px; position: absolute; bottom: 110px; left: 320px;  z-index: 2;}
.visualWrap .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;}
.visualWrap .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);}
.visualWrap .barWrap .bar { width: 140px; height: 2px; background: rgba(255,255,255,.5); display: block; margin: 12px auto 0; position: relative;}
.visualWrap .barWrap .bar::after { width: 100%; height: 100%; background: #fff; display: block; position: absolute; top: 0; left: 0; content: '';}
.visualWrap .barWrap .bar.on::after {animation: barani 5.2s ;}
.visualWrap .btnWrap { width: 80px; height: 30px; position: absolute; bottom: 107px; left: 540px; z-index: 2;}
.visualWrap .btnWrap a { display: block; float: left;margin-right: 10px;}

@keyframes barani {
    0% {
        width: 0
    }

    100% {
        width: 100%;
    }
}


.visualWrap .sc { width: 150px; height: 150px;  position:absolute;  right: 100px; bottom: 100px; display: flex; align-items: center; justify-content: center; z-index: 10;}
.visualWrap .sc .b2 {    position:absolute;}
.visualWrap .sc .b1 {    animation:rotateLoop 5s infinite linear;}
.visualWrap .open { width: 176px; height: 176px;  position:absolute;  right: 35px; top: 160px; display: flex; align-items: center; justify-content: center; z-index: 10;}
.visualWrap .open .b2 {    position:absolute;}
.visualWrap .open .b1 {    animation:rotateLoop 5s infinite linear;}


.sec1Wrap {
    background: #fff ;
	overflow: hidden;
    height: 980px;
	width: 100%;
	max-width: 1920px; margin: 0 auto;
}

.sec1Wrap .tit1 {    position:absolute;    top: 240px;    left: 160px; z-index: 2;}
.sec1Wrap .tit2 {    position:absolute;    top: 310px;    left: 160px; z-index: 2}

.sec1Wrap .contWrap {width: 100%; position: relative; height: 100%; }
.sec1Wrap .contWrap .swiper-container {    width: 100%;    height: 100%; position: relative;}
.sec1Wrap .contWrap .swiper-wrapper {width: 100%; position: relative;}
.sec1Wrap .contWrap .swiper-wrapper { width: 100%; position: relative}
.sec1Wrap .contWrap .swiper-slide .imgWrap { width: 100%; position: relative; overflow: hidden;}
.sec1Wrap .contWrap .swiper-slide .imgWrap img { position: relative; left: 50%; margin-left: -50%; max-width: inherit;}
.sec1Wrap .contWrap .swiper-slide .textWrap { width: 100%; height: 200px; position: absolute; left: 0px; top: 730px; box-sizing: border-box; padding-left: 160px; text-align: left; z-index: 1;}
.sec1Wrap .contWrap .swiper-slide .textWrap .text1 { display: inline-block; margin-right: 20px;  position: relative; opacity: 0; right: -50px;}
.sec1Wrap .contWrap .swiper-slide .textWrap .text2 { display: inline-block; margin-right: 20px; position: relative; opacity: 0; right: -100px;}
.sec1Wrap .contWrap .swiper-slide .textWrap .text3 { display: block; position: absolute; top: -160px; right: 160px;  opacity: 0;}
.sec1Wrap .contWrap .swiper-slide-active .textWrap .text1 { opacity: 1; transition: all 1s ease 0s; right: 0;}
.sec1Wrap .contWrap .swiper-slide-active .textWrap .text2 { opacity: 1; transition: all 1s ease .3s; right: 0;}
.sec1Wrap .contWrap .swiper-slide-active .textWrap .text3 { opacity: 1; transition: all 1s ease 0s; top: -80px;}

.sec1Wrap .barWrap { width: 200px; height: 30px; position: absolute; bottom: 260px; left: 160px;  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: 140px; 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: 80px; height: 30px; position: absolute; bottom: 257px; left: 380px; z-index: 2;}
.sec1Wrap .btnWrap a { display: block; float: left;margin-right: 10px;}



.sec2Wrap { width: 100%; max-width: 1920px; margin: 0 auto; position: relative; background: #fff; padding-top: 220px; height: 980px; overflow: hidden;}

.sec2Wrap .leftWrap  { width: 39.4%; height: 100%; background: #c8c6c6; position: absolute; top: 0; left: 0; display: flex; z-index: 1; overflow: hidden;}
.sec2Wrap .leftWrap img { max-width: inherit;}
.sec2Wrap .rightWrap { width: 100%; position: relative; box-sizing: border-box; padding-left: 44%; }
.sec2Wrap .rightWrap .swiper-container { width: 1290px; padding-bottom: 100px;  position: relative; overflow: hidden;}
.sec2Wrap .rightWrap .swiper-slide { transition: all 1s;}
.sec2Wrap .rightWrap .swiper-slide-next { padding-top: 100px;}
.sec2Wrap .rightWrap .swiper-slide img:nth-child(2) { position: absolute; top: 130px; right: 0;}

.sec2Wrap .listWrap li {    flex:1;    display: flex;    position:relative;	height: 100%;}
.sec2Wrap .listWrap li::before { width: 1px; height: 100%; background: rgba(255,255,255,.4); content: ''; position: absolute; top: 0; right: 0;}
.sec2Wrap .listWrap li:last-child::before { display: none;}
.sec2Wrap .listWrap li a { display: flex; width: 100%; height: 100%; position: relative;     align-items: center;    justify-content: flex-start;flex-direction: column; padding-top: 280px; box-sizing: border-box; transition: all .3s;}
.sec2Wrap .listWrap li a:hover {  background: url("../images/main/img_sec2_pt.png") repeat-x top center; padding-top: 200px;}
.sec2Wrap .listWrap li img { display: flex;}
.sec2Wrap .listWrap li img.nth1 { margin-bottom: 50px;}
.sec2Wrap .listWrap li img.nth2 { display: none;}
.sec2Wrap .listWrap li a:hover img.nth2 { display: flex; margin-bottom: 50px;}
.sec2Wrap .bgWrap { width: 100%; height: 100%; position: relative; overflow: hidden; background: #000;}
.sec2Wrap .bgWrap img { position: absolute; top:0; left: 50%; margin-left: -960px; width: 1920px; opacity: 0; transition: all .5s; max-width: inherit;}
.sec2Wrap .bgWrap img.on { opacity: 1;}

.sec3Wrap { height: 980px; width: 100%; padding-top: 210px; box-sizing: border-box; max-width: 1920px; margin: 0 auto; background: url("../images/main/sec3_bg.png") no-repeat top center #063a36;}
.sec3Wrap .imgWrap img { margin: 0 auto;}
.sec3Wrap .textWrap { width: 100%; text-align: center; margin-top: -22px; position: relative; z-index: 1;}
.sec3Wrap .textWrap img { display: block; margin:0 auto 40px; position: relative; opacity: 0; top: 50px;}
.sec3Wrap .swiper-slide-active .textWrap img.text1 { opacity: 1; top: 0; transition: all 1s ease 0s;}
.sec3Wrap .swiper-slide-active .textWrap img.text2 { opacity: 1; top: 0; transition: all 1s ease .3s;}
.sec3Wrap .btnWrap { width: 1100px; height: 31px; position: absolute; top: 400px; left: 50%; margin-left: -550px; z-index: 2;}
.sec3Wrap .btnWrap a { display: block; float: left;}
.sec3Wrap .btnWrap a.next { position: absolute; top: 0; right: 0;}

.sec3Wrap .sc { width: 202px; height: 202px;  position:absolute;  left: 50%; margin-left: 310px; top: 520px;  display: flex; align-items: center; justify-content: center; z-index: 10;}
.sec3Wrap .sc .b2 {    position:absolute;}
.sec3Wrap .sc .b1 {    animation:rotateLoop 5s infinite linear;}

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

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

.sec4Wrap { height: 840px; width: 100%; max-width: 1920px; margin: 0 auto;  box-sizing: border-box; background: url("../images/main/sec4_bg.png") no-repeat top right #eae6e1;}
.sec4Wrap .tit1 { position: absolute; top: 175px; left: 100px; z-index: 2;}
.sec4Wrap .tit2 { position: absolute; top: 535px; left: 100px; z-index: 2;}
.sec4Wrap .tit3 { position: absolute; top: 665px; left: 100px; z-index: 2;}
.sec4Wrap .nth1 {width: 38.5%; height: 50%; position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(255,255,255,.4);border-bottom: 1px solid rgba(255,255,255,.4);}
.sec4Wrap .nth2{width: 38.5%; height: 50%;  position: absolute; bottom: 0px; right: 0; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(255,255,255,.4);}
.sec4Wrap .sc { width: 186px; height: 186px;  position:absolute;  right: 48%; bottom: 130px;  display: flex; align-items: center; justify-content: center; z-index: 10;}
.sec4Wrap .sc .b2 {    position:absolute;}
.sec4Wrap .sc .b1 {    animation:rotateLoop 5s infinite linear;}


.sec5Wrap {
    background: url("../images/main/sec5_r_bg.png") no-repeat bottom right #e7e4e2 ;
	overflow: hidden;
    height: 980px;
	width: 100%;
	max-width: 1920px; margin: 0 auto;
}

.sec5Wrap .leftWrap { width: 50%; height: 100%; float: left; 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; left: 50%; margin-left: -50%; max-width: inherit;}
.sec5Wrap .leftWrap .swiper-slide .textWrap {position: absolute; left: 95px; top: 185px; text-align: left; z-index: 1;}
.sec5Wrap .leftWrap .swiper-slide .textWrap img { position: relative; opacity: 0; top: 100px; transition: all 1.3s;}
.sec5Wrap .leftWrap .swiper-slide-active .textWrap img { top: 0; opacity: 1;}
.sec5Wrap .leftWrap .barWrap { width: 200px; height: 30px; position: absolute; top: 400px; left: 100px;  z-index: 2;}
.sec5Wrap .leftWrap .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;}
.sec5Wrap .leftWrap .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);}
.sec5Wrap .leftWrap .barWrap .bar { width: 140px; height: 2px; background: rgba(255,255,255,.5); display: block; margin: 12px auto 0; position: relative;}
.sec5Wrap .leftWrap .barWrap .bar::after { width: 100%; height: 100%; background: #fff; display: block; position: absolute; top: 0; left: 0; content: '';}
.sec5Wrap .leftWrap .barWrap .bar.on::after {animation: barani 5.2s ;}
.sec5Wrap .leftWrap .btnWrap { width: 80px; height: 30px; position: absolute; top: 400px; left: 320px; z-index: 2;}
.sec5Wrap .leftWrap .btnWrap a { display: block; float: left;margin-right: 10px;}

.sec5Wrap .rightWrap { width: 50%; height: 100%; float: left; position: relative;}
.sec5Wrap .rightWrap > div { width: 600px; margin: 0 auto;}
.sec5Wrap .rightWrap .swiper-container {    width: 100%; margin: 185px auto 60px; position: relative; 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: relative; 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: 745px; left: 400px; z-index: 2;}
.sec5Wrap .rightWrap .btnWrap a { display: block; float: left;margin-right: 10px;}

.sec6Wrap {
    background: #efedeb ;
	overflow: hidden;
    height: 980px;
	padding-top: 180px;
	width: 100%;
	max-width: 1920px; margin: 0 auto;
}
.sec6Wrap::after { width: 676px; height: 100%; position: absolute; top: 0; left: 50%; margin-left: 284px; background: #897d76; content: '';}

.sec6Wrap .leftWrap { width: 50%;; float: left; position: relative;}
.sec6Wrap .leftWrap > div { width: 570px; margin: 0 auto;}
.sec6Wrap .leftWrap .tit {margin-bottom: 63px;}
.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; left: 50%; margin-left: -50%; max-width: inherit;}
.sec6Wrap .leftWrap .swiper-slide .textWrap {position: absolute; left: 95px; top: 185px; text-align: left; z-index: 1;}
.sec6Wrap .leftWrap .swiper-slide .textWrap img { position: relative; opacity: 0; top: 100px; transition: all 1.3s;}
.sec6Wrap .leftWrap .swiper-slide-active .textWrap img { top: 0; opacity: 1;}

.sec6Wrap .rightWrap { width: 50%;  float: left; position: relative;}
.sec6Wrap .rightWrap .swiper-container {    width: 840px;  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: 140px; height: 30px; position: absolute; top: 760px; left: 50%; margin-left: -61px; z-index: 2;}
.sec6Wrap .btnWrap a { display: block; float: left;margin-right: 1px;}