@charset "utf-8";
.pcbr{display:none;}
.ptbr{display:none;}
.tbbr{display:none;}
.mbbr{display:block;}
.dn{display:none;}


/* 크롬, 사파리, 엣지 */
::-webkit-scrollbar {
  display: none;
}

/* 파이어폭스 */
html {
  scrollbar-width: none;
}

#container{overflow: hidden;}

#intro{
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: #fff;
	z-index: 500;
}
#intro h2{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	font-size: 5.8vw;
	font-weight: 600;
	color: #BB355E;
}
#intro h2 span{
	white-space: nowrap;
	display: inline-block;
	transform: translateY(0;);
}
body.on #intro h2 span{
	transform: translateY(-100%);
	transition: all 1s 1.2s;
}
body.off #intro{
	transform: translateY(-100%);
	transition: all 1.5s cubic-bezier(0, 0.55, 0.45, 1);
}

.head{transform: translateY(-100%);}
body.off .head{transform: translateY(0);transition: all 1.2s 0.1s;}



.innerwrap{
	width: 92%;
	max-width: 1560px;
	margin: 0 auto;
}

.sec_titwrap{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 50px;
}
.sec_tit{
	flex-shrink: 1;
	text-align: center;
}
.sec_tit .tit{
	display: inline-block;
	padding: 7px;
	border-radius: 5px;
	background: #BB355E;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}
.sec_tit .slg{
	margin-top: 15px;
	font-size: 28px;
	font-weight: 600;
}
.sec_titwrap .more_btn{
	flex-shrink: 0;
	font-size: 12px;
	color: #666;
	margin-top: 15px;
}
.sec_titwrap .more_btn i{
	display: inline-block;
	width: 12px;
	height: 10px;
	background: url(/images/main/more_btn_arr.png) no-repeat center / contain;
	margin: 0 0 0 5px;
}






.sec1{
	padding-top: 70px;
	height: calc(100vh - 20px);
}
.sec1 .videowrap{
	position: relative;
	width: 94%;
	height: 100%;
	border-radius: 24px;
	margin: 0 auto;
	overflow: hidden;
	background: #000;
	display: flex;
}
/* .sec1 .videowrap video{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
} */
.sec1 .videowrap .slgwrap{
	width: 100%;
	display: flex;
	align-items: center;
	padding: 20px;
}
.sec1 .videowrap .slgwrap .txt{
	font-size: 9vw;
	font-weight: 700;
	color: #fff;
	overflow: hidden;
}
.sec1 .videowrap .slgwrap .txt > span{
	display: inline-block;
}


.sec1 .videowrap .scrollwrap{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 400px;
	text-align: center;
	padding: 50px;
	display: none;
}
.sec1 .videowrap .scrollwrap:after{
	content: "";
	position: absolute;
	left: 0;
	top: 50px;
	width: 1px;
	height: calc(100% - 100px);
	background: #aaa;
}
.sec1 .videowrap .scrollwrap .txt{
	font-size: 20px;
	color: rgba(255,255,255,0.5);
}

.sec2{
	position: relative;
	width: 100%;
	height: 100vh;
}
.sec2 .txtwrap{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 92%;
	text-align: center;
}
.sec2 .txtwrap .slogan{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
.sec2 .txtwrap .slogan > *{
	margin-right: 10px;
}
.sec2 .txtwrap .slogan > span{
	display: inline-flex;
	overflow: hidden;
}
.sec2 .txtwrap .slogan > span > span{
	display: inline-block;
	font-size: 30px;
	font-weight: 700;
}
.sec2 .txtwrap .slogan > .img{
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 80px;
	height: 40px;
	vertical-align: bottom;
}
.sec2 .txtwrap .slogan > .img > div{
	position: absolute;
	left: 50%;
	top: 0;
	width: 80px;
	height: 40px;
	border-radius: 80px;
	transform: translateX(-50%);
}
.sec2 .txtwrap .slogan > .img1 > div{
	background: url(/images/main/sec2_img1.png) no-repeat center / cover;
}
.sec2 .txtwrap .slogan > .img2 > div{
	background: url(/images/main/sec2_img2.png) no-repeat center / cover;
}


/* 모션 */
.sec2 .txtwrap .slogan > span > span{
	transform: translateY(100%);
}
.sec2 .txtwrap .slogan.on > span > span{
	transform: translateY(0);
	transition: all 1s;
}

.sec2 .txtwrap .slogan > .img > div {
	width: 0;
}
.sec2 .txtwrap .slogan.on > .img > div{
	width: 80px;
	transition: all 1s 0.4s;
}

.sec2 .videowrap{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: #f2f2f2;
	text-align: center;
}
.sec2 .videowrap img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}



.sec3{
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
}
.sec3 .txtwrap{
	position: relative;
	width: 100%;
	height: 60%;
}
.sec3 .txtwrap .con{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 92%;
	text-align: center;
	visibility: hidden;
	pointer-events: none;
}
.sec3 .txtwrap .con.on{
	visibility: visible;
	pointer-events: auto;
}
.sec3 .txtwrap .con .txts{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.sec3 .txtwrap .con .txts{
	opacity: 0;
	transform: translateY(40px);
}
.sec3 .txtwrap .con.on .txts{
	opacity: 1;
	transform: translateY(0);
	transition: all 1.2s 0.2s;
}
.sec3 .txtwrap .con .txts .tit1{
	display: inline-block;
	padding: 7px;
	border-radius: 5px;
	background: #BB355E;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}
.sec3 .txtwrap .con .txts .tit2{
	font-size: 30px;
	font-weight: 600;
	margin-top: 8px;
}
.sec3 .txtwrap .con .txts .line{
	display: block;
	width: 100%;
	height: 1px;
	margin: 15px 0;
	background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(199, 199, 199, 1) 50%, rgba(255, 255, 255, 1) 100%);
}
.sec3 .txtwrap .con .txts b{
	display: inline-block;
	font-size: 20px;
	font-weight: 600;
}
.sec3 .txtwrap .con .txts p{
	font-size: 13px;
	line-height: 1.5em;
	color: #666;
	margin: 20px 0;
}
.sec3 .txtwrap .con .txts .more_btn{
	font-size: 12px;
	color: #666;
}
.sec3 .txtwrap .con .txts .more_btn i{
	display: inline-block;
	width: 12px;
	height: 10px;
	background: url(/images/main/more_btn_arr.png) no-repeat center / contain;
	margin: 0 0 0 5px;
}

.sec3 .imgwrap{
	position: relative;
	width: 100%;
	height: 40%;
}
.sec3 .imgwrap .img{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	clip-path: inset(0 0 0 0);
	transition: clip-path 1.6s ease;
	will-change: clip-path;
	z-index: 1;
}
.sec3 .imgwrap .img.img1{
	z-index: 3;
}
.sec3 .imgwrap img{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: all 1s;
}
.sec3 .imgwrap .img.reveal-up img,
.sec3 .imgwrap .img.reveal-down img{
	transform: scale(1.15);
}


/* 아래에서 위로 올라오는 모션 */
.sec3 .imgwrap .img.reveal-up {
	clip-path: inset(100% 0 0 0);
	animation: clipUp 1.6s forwards;
	z-index: 2;
}

/* 위에서 아래로 내려오는 모션 */
.sec3 .imgwrap .img.reveal-down {
	clip-path: inset(0 0 100% 0);
	animation: clipDown 1.6s forwards;
	z-index: 2;
}

@keyframes clipUp {
	from {
		clip-path: inset(100% 0 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}
@keyframes clipDown {
	from {
		clip-path: inset(0 0 100% 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}


.sec3 .countwrap{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 240px;
	height: 240px;
	border-radius: 20px;
	padding: 70px;
	background: #f4f4f4;
	z-index: 10;
	display: none;
}

.sec3 .countwrap .inner{
	position: relative;
	width: 100%;
	height: 100%;
}
.sec3 .countwrap .inner:before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 141.42%;
	height: 1px;
	background: rgba(0,0,0,0.15);
	transform: rotate(-45deg);
	transform-origin: top right;
}
.sec3 .countwrap .inner .num{
	position: absolute;
	left: 0;
	top: 0;
}
.sec3 .countwrap .inner .num > span{
	font-size: 16px;
	display: none;
}
.sec3 .countwrap .inner .num > span.on{
	display: block;
}
.sec3 .countwrap .inner .totalNum{
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 16px;
	color: #bebebe;
}


.sec4{
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.sec4 .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(/images/main/sec4_bg.jpg) no-repeat center / cover;
	transform: scale(1.2);
}
.sec4.in-view .bg{
	transform: scale(1);
	transition: all 3s 0.2s;
}
.sec4 .conwrap{
	position: relative;
	width: 100%;
}
.sec4 .conwrap .con_tit{
	position: absolute;
	left: 50%;
	bottom: calc(100% + 70px);
	transform: translateX(-50%);
	font-size: 32px;
	font-weight: 600;
	color: #fff;
	text-align: center;
}
.sec4 .conwrap .boxwrap{
	position: relative;
	width: 100%;
	height: 250px;
	display: flex;
	justify-content: center; /* 박스를 가로 중앙 정렬 */
	align-items: center; /* 박스를 세로 중앙 정렬 */
}
.sec4 .conwrap .boxwrap:before{
	content: "";
	position: absolute;
	left: 50%;
	top: 139px;
	transform: translateX(-50%);
	width: 4000px;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.6);
}
.sec4 .conwrap .boxwrap .box{
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	width: 250px;
	height: 340px;
	border-radius: 20px;
	padding: 0 20px;
	background: #fff;
}
.sec4 .conwrap .boxwrap .box .img{
	width: 100%;
	height: 160px;
	padding: 20px 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.sec4 .conwrap .boxwrap .box .img img{
	max-height: 100%;
}
.sec4 .conwrap .boxwrap .txts{
	position: relative;
	width: 100%;
	padding: 20px 10px 0;
	text-align: center;
}
.sec4 .conwrap .boxwrap .txts:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 25px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 1px solid #ccc;
	border-bottom: none;
}
.sec4 .conwrap .boxwrap .txts .name{
	font-size: 26px;
	font-weight: 600;
}
.sec4 .conwrap .boxwrap .txts p{
	font-size: 13px;
	line-height: 1.5em;
	color: #666;
	margin-top: 10px;
}



.sec5{
	position: relative;
	width: 100%;
	height: 995px;
	background: #000;
}
.sec5 .tabwrap{
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	top: 60px;
	width: 92%;
	max-width: 1560px;
	display: flex;
	gap: 10px;
	z-index: 100;
}
.sec5 .tabwrap li{}
.sec5 .tabwrap li a{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 120px;
	height: 40px;
	border: 1px solid rgba(255,255,255,0.5);
	border-radius: 60px;
}
.sec5 .tabwrap li a span{
	position: relative;
	padding-left: 12px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
}
.sec5 .tabwrap li a span:after{
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	border: 1.5px solid #fff;
	box-sizing: border-box;
}
.sec5 .tabwrap li.on a{
	background: #fff;
	border: 1px solid rgba(255,255,255,1);
}
.sec5 .tabwrap li.on a span{
	color: #000;
}
.sec5 .tabwrap li.on a span:after{
	border: 1.5px solid #BB355E;
	background: #BB355E;
}


.sec5 .con{
	position: relative;
	width: 100%;
	height: 100%;
}

.sec5 .con.global .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.sec5 .con.global .bg video{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(250%, 1100px);
	height: 100%;
	object-fit: contain;
}

.sec5 .con .txtwrap{
	position: relative;
	z-index: 1;
	width: 92%;
	max-width: 1560px;
	height: 100%;
	padding: 120px 0 50px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.sec5 .con .txtwrap .titwrap{}
.sec5 .con .txtwrap .titwrap .tit{
	font-size: 30px;
	font-weight: 600;
	color: #fff;
}
.sec5 .con .txtwrap .titwrap p{
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	margin-top: 15px;
}
.sec5 .con .txtwrap .numwrap{
	width: 350px;
}
.sec5 .con .txtwrap .numwrap dl{
	position: relative;
	width: 100%;
}
.sec5 .con .txtwrap .numwrap dl:first-child{
	padding-bottom: 30px;
}
.sec5 .con .txtwrap .numwrap dl:after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg,rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
}
.sec5 .con .txtwrap .numwrap dl dt{
	font-size: 16px;
	font-weight: 600;
	color: #BB355E;
	padding: 15px 0 5px;
}
.sec5 .con .txtwrap .numwrap dl dd{
	font-size: 42px;
	font-weight: 500;
	color: #fff;
}
.sec5 .con .txtwrap .numwrap dl dd > span{
	line-height: 1.3em;
	vertical-align: middle;
}


.sec5 .con.korea{
	background: #000;
}
.sec5 .con.korea .map{
	position: absolute;
	z-index: 15;
	left: 50%;
	top: 46%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 1920px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.sec5 .con.korea .map .pc_view{display: none;}
.sec5 .con.korea .bg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sec5 .con.korea .map .ppwrap{display: none;}
.sec5 .con.korea .map .ppwrap li{
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #d9d9d9;
}
.sec5 .con.korea .map .ppwrap li:nth-child(1){ left: 43%; top: 24%;}
.sec5 .con.korea .map .ppwrap li:nth-child(2){ left: 40.5%; top: 26%;}
.sec5 .con.korea .map .ppwrap li:nth-child(3){ left: 44.5%; top: 31%;}
.sec5 .con.korea .map .ppwrap li:nth-child(4){ left: 41.5%; top: 40%;}
.sec5 .con.korea .map .ppwrap li:nth-child(5){ left: 45.5%; top: 45%;}
.sec5 .con.korea .map .ppwrap li:nth-child(6){ left: 43.5%; top: 57%;}
.sec5 .con.korea .map .ppwrap li:nth-child(7){ left: 41.5%; top: 70%;}
.sec5 .con.korea .map .ppwrap li:nth-child(8){ left: 41.5%; top: 80%;}
.sec5 .con.korea .map .ppwrap li:nth-child(9){ left: 42.5%; top: 91%;}
.sec5 .con.korea .map .ppwrap li:nth-child(10){left: 53.5%;top: 18%;}
.sec5 .con.korea .map .ppwrap li:nth-child(11){left: 50.5%;top: 42%;}
.sec5 .con.korea .map .ppwrap li:nth-child(12){left: 60.5%;top: 47%;}
.sec5 .con.korea .map .ppwrap li:nth-child(13){left: 57.5%;top: 57%;}
.sec5 .con.korea .map .ppwrap li:nth-child(14){left: 53.5%;top: 67%;}
.sec5 .con.korea .map .ppwrap li:nth-child(15){left: 60.5%;top: 68%;}
.sec5 .con.korea .map .ppwrap li a{
	position: absolute;
	padding: 10px 13px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 600;
	color: rgba(255,255,255,0.9);
	background: #000;
	border: 1px solid rgba(255,255,255,0.7);
	white-space: nowrap;
}
.sec5 .con.korea .map .ppwrap li a.up{
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translateX(-50%);
}
.sec5 .con.korea .map .ppwrap li a.left{
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
}
.sec5 .con.korea .map .ppwrap li a.right{
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
}
.sec5 .con.korea .map .ppwrap li.on a{
	background: #BB355E;
	border: 1px solid #BB355E;
}
.sec5 .con.korea .listwrap{
	position: absolute;
	z-index: 10;
	left: 50%;
	transform: translateX(-50%);
	width: 92%;
	max-width: 1560px;
	bottom: 130px;
	display: flex;
	justify-content: flex-end;
	display: none;
}
.sec5 .con.korea .listwrap .inner{
	width: 270px;
	padding: 40px 25px;
	border-radius: 20px;
	border: 1px solid rgba(255,255,255,0.4);
}
.sec5 .con.korea .listwrap .inner .list{
	display: none;
}
.sec5 .con.korea .listwrap .inner .list.on{
	display: block;
}
.sec5 .con.korea .listwrap .inner .location{
	font-size: 18px;
	font-weight: 700;
	color: #fff;
}
.sec5 .con.korea .listwrap .inner .location .bar{
	display: inline-block;
	width: 1px;
	height: 14px;
	background: rgba(255,255,255,0.3);
	margin: 0 10px;
}
.sec5 .con.korea .listwrap .inner .location .high{
	position: relative;
	padding-right: 12px;
}
.sec5 .con.korea .listwrap .inner .location .high:after{
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #BB355E;
}
.sec5 .con.korea .listwrap .inner ul{
	display: flex;
	flex-direction: column;
	gap:8px;
	margin-top: 20px;
}
.sec5 .con.korea .listwrap .inner li{
	width: fit-content;
	font-size: 16px;
	color: #fff;
}
.sec5 .con.korea .listwrap .inner li.high{
	position: relative;
	padding-right: 12px;
}
.sec5 .con.korea .listwrap .inner li.high:after{
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #BB355E;
}


.sec5 .con{
	display: none;
}
.sec5 .con.on{
	display: block;
}



.sec6{
	padding: 80px 0;
}
.sec6 .innerwrap{
	display: flex;
	flex-direction: column;
}
.sec6 .innerwrap .stock{
	width: 100%;
}
.sec6 .innerwrap .stock .infowrap{
	position: relative;
	width: 100%;
	padding: 20px;
	border-radius: 20px;
	background: #f4f4f4;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}
.sec6 .innerwrap .stock .infowrap dl{
	display: flex;
	padding: 35px 0;
	border-bottom: 1px solid #ccc;
}
.sec6 .innerwrap .stock .infowrap dl:last-child{
	border: none;
}
.sec6 .innerwrap .stock .infowrap dl dt{
	position: relative;
	width: 155px;
	padding-left: 55px;
	font-size: 20px;
	font-weight: 500;
}
.sec6 .innerwrap .stock .infowrap dl dt img{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.sec6 .innerwrap .stock .infowrap dl dt:after{
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 20px;
	background: rgba(0,0,0,0.15);
}
.sec6 .innerwrap .stock .infowrap dl dd{
	width: calc(100% - 155px);
	text-align: right;
	font-size: 20px;
	font-weight: 500;
}
.sec6 .innerwrap .stock .infowrap dl dd.today{
	font-size: 30px;
	font-weight: 500;
}
.sec6 .innerwrap .stock .infowrap dl dd.today.up{
	color: #bb355e;
}
.sec6 .innerwrap .stock .infowrap dl dd.today.down{
	color: #1575bb;
}
.sec6 .innerwrap .stock .infowrap dl dd.today span{
	font-size: 20px;
	margin-right: 5px;
}

.sec6 .innerwrap .video{
	width: 100%;
	margin-top: 80px;
}
.sec6 .innerwrap .video .videowrap{
	width: 100%;
	as
}
.sec6 .innerwrap .video .videowrap a{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 20px;
}
.sec6 .innerwrap .video .videowrap a .thumb{
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 20px;
}
.sec6 .innerwrap .video .videowrap a .thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sec6 .innerwrap .video .videowrap a .titwrap{
	margin-top: 15px;
}
.sec6 .innerwrap .video .videowrap a .titwrap .tit{
	font-size: 20px;
	font-weight: 500;
}
.sec6 .innerwrap .video .videowrap a .titwrap .date{
	font-size: 14px;
	color: #666;
	margin-top: 10px;
}


.sec7{
	padding: 0 0 50px;
}

.sec7 .swiper-slide{
	width: 350px;
}
.sec7 .swiper-slide > a{
	display: block;
}
.sec7 .swiper-slide .thumb{
	width: 100%;
	aspect-ratio: 500 / 320;
	border-radius: 20px;
	overflow: hidden;
}
.sec7 .swiper-slide .thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sec7 .swiper-slide .txtwrap{
	margin-top: 25px;
}
.sec7 .swiper-slide .txtwrap .info{}
.sec7 .swiper-slide .txtwrap .info .cate{
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: #bb355e;
}
.sec7 .swiper-slide .txtwrap .info .bar{
	display: inline-block;
	width: 1px;
	height: 14px;
	background: #c4c4c4;
	margin: 0 10px;
}
.sec7 .swiper-slide .txtwrap .info .date{
	display: inline-block;
	font-size: 14px;
	color: #666;
}
.sec7 .swiper-slide .txtwrap .tit{
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4em;
	margin: 15px 0 10px;
}
.sec7 .swiper-slide .txtwrap .con{
	font-size: 15px;
	color: #666;
	line-height: 1.5em;
	height: 3em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.sec7 .swiper-slide .tag{
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.sec7 .swiper-slide .tag li{
	display: inline-block;
	padding: 6px 9px;
	border: 1px solid #ddd;
	border-radius: 30px;
}
.sec7 .swiper-slide .tag li a{
	font-size: 14px;
	color: #666;
}
.sec7 .swiper-slide .tag li:hover{
	border: 1px solid #000;
	background: #000;
}
.sec7 .swiper-slide .tag li:hover a{
	color: #fff;
}



.sec8{
	position: relative;
	padding: 120px 0 240px;
	overflow: hidden;
}
.sec8 .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.sec8 .bg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sec8 .innerwrap{
	position: relative;
	z-index: 2;
}
.sec8 .cate{
	display: inline-block;
	padding: 7px;
	border-radius: 5px;
	background: #BB355E;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}
.sec8 .slg{
	margin: 20px 0 40px;
}
.sec8 .slg span{
	display: inline-block;
	font-size: min(13vw, 60px);
	color: #fff;
	line-height: 1.1em;
}
.sec8 p{
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 20px;
}
.sec8 .more_btn{
	font-size: 12px;
	color: #fff;
}
.sec8 .more_btn i{
	display: inline-block;
	width: 12px;
	height: 10px;
	background: url(/images/main/more_btn_arr.png) no-repeat center / contain;
	margin: 0 0 0 5px;
}
.sec8 .imgbox{
	position: absolute;
	right: 4%;
	top: 100%;
	transform: translateY(-50%);
	width: 130px;
	height: 180px;
	border-radius: 10px;
	overflow: hidden;
}
.sec8 .imgbox img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}




.video_pop{
	position: fixed;
	display: none;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: 1100px;
	width: 92%;
	margin: 0 auto;
	z-index: 10000;
	border-radius: 24px;
}
.video_pop .btn_x {
	position: absolute;
	right: 0;
	bottom: calc(100% + 30px);
	width: 58px;
	height: 58px;
	background: url(/images/page/btn_x.png) no-repeat center / contain;
}
.video_pop .conwrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
	border-radius: 30px;
}
.video_pop .conwrap iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}





@-webkit-keyframes showImg{
0%{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); }
animation-delay: 1s;
}
@-webkit-keyframes showImg2{
0%{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
0%{ clip-path: polygon(0 0, 28% 0, 58% 100%, 0 100%);}
100%{clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); }
}
@-webkit-keyframes showImg3{
0%{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); }
animation-delay: 1s;
}
@-webkit-keyframes opacityAni{
0%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes scaleAni{
0%{opacity:0;transform:scale(1.3);}
100%{opacity:1;transform:scale(1);}
}
@-webkit-keyframes scaleAni2{
0%{opacity:0.5;transform:scale(1.3);}
100%{opacity:1;transform:scale(1);}
}
@-webkit-keyframes fadeUpAni{
0%{opacity:0; transform:translateY(30px);}
100%{opacity:1;transform:translateY(0);}
}
@-webkit-keyframes fadeLeftAni{
0%{opacity:0; transform:translateX(-50px);}
100%{opacity:1;transform:translateX(0);}
}
@-webkit-keyframes fadeRightAni{
0%{opacity:0; transform:translateX(50px);}
100%{opacity:1;transform:translateX(0);}
}

.fadeUp{opacity: 0;}
.fadeLeft{opacity: 0;}
.fadeRight{opacity: 0;}
.showImg{opacity: 0;}

.showImg.in-view{animation-name: showImg;animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 2s; opacity: 1;}
.showImg2.in-view{animation-name: showImg2;animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 2s; opacity: 1;}
.showImg3.in-view{animation-name: showImg3;animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 1s; opacity: 1;}
.opacity.in-view{animation-name: opacityAni;animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 2s;}
.fadeUp.in-view{animation-name: fadeUpAni; animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);animation-duration: 1s; opacity: 1;}
.fadeLeft.in-view{animation-name: fadeLeftAni; animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);animation-duration: 1.4s; opacity: 1;}
.fadeRight.in-view{animation-name: fadeRightAni; animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);animation-duration: 1.4s; opacity: 1;}
.scaleAni.in-view{animation-name: scaleAni; animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 2s; }
.scaleAni2.in-view{animation-name: scaleAni2; animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 1.5s; }



.sec1 .videowrap .slgwrap .txt > span {transform: translateY(100%);}
body.off .sec1 .videowrap .slgwrap .txt1 > span{transform: translateY(0); transition: all 1.2s 0.1s;}
body.off .sec1 .videowrap .slgwrap .txt2 > span{transform: translateY(0); transition: all 1.2s 0.2s;}
body.off .sec1 .videowrap .slgwrap .txt3 > span{transform: translateY(0); transition: all 1.2s 0.3s;}