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


.top_btn{
	position: fixed;
	right: 20px;
	bottom: 20px;
	cursor: pointer;
	z-index: 10;
}

.innerwrap{
	width: 92%;
	max-width: 1570px;
	margin: 0 auto;
}
.section{
	position: relative;
	z-index: 1;
}
.section_tit{
	width: 92%;
	max-width: 1380px;
	display: flex;
	flex-direction: column;
	margin: 0 auto 70px;
}
.section_tit .titwrap .tit_en{
	display: flex;
	font-family: "Nunito Sans";
	font-size: 100px;
	font-weight: 500;
	line-height: 1.2em;
}
.section_tit .titwrap .tit_kr{
	font-size: 18px;
}
.section_tit .linkwrap{
	display: flex;
	align-items: center;
	margin-top: 20px;
}
.section_tit .linkwrap span{
	font-family: "Nunito Sans";
	font-size: 14px;
	font-weight: 600;
	margin-right: 13px;
}
.section_tit .linkwrap .circle{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 60px;
	height: 60px;
	border: 1px solid #222;
	border-radius: 50%;
	overflow: hidden;
}
.section_tit .linkwrap .circle:after{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0);
	width: 110%;
	height: 110%;
	border-radius: 50%;
	background: #222;
	transition: all 0.3s;
}
.section_tit .linkwrap:hover .circle:after{
	transform: translate(-50%, -50%) scale(1);
}
.section_tit .linkwrap .circle i{
	position: relative;
	z-index: 1;
	display: block;
	width: 13px;
	height: 11px;
	background: url(/images/main/link_arr.png) no-repeat center / contain;
	transition: all 0.3s;
}
.section_tit .linkwrap:hover .circle i{
	background: url(/images/main/link_arr_wh.png) no-repeat center / contain;
}


/* visual */
.visual{
	overflow:hidden;
	position:relative;
	width:100%; height: calc(100vh - 28px);
	border-radius: 10px 10px 100px 10px;
}
.visual .swiper-wrapper{width:100%;height:100%;}
.visual .swiper-slide{
	position:relative;
	width:100%;height:100%;
}
.visual .swiper-slide .bg{
	position:absolute;left:0%;top:0%;z-index:-1;
	width:100%;height:100%;	
	transform:scale(1.1);
	transition:all 4s;
	        /* position: relative;
	                width: 100%;
	                height: 100%; */
}
/* .visual .swiper-slide video{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
} */
.visual .swiper-slide-active .bg{transform:scale(1);}
.visual .swiper-slide.v1 .bg{background:url(/images/main/main_visual1.jpg) no-repeat center;background-size:cover;}
.visual .swiper-slide.v2 .bg{background:url(/images/main/main_visual2.jpg) no-repeat center;background-size:cover;}
.visual .swiper-slide.v3 .bg{background:url(/images/main/main_visual3.jpg) no-repeat center;background-size:cover;}


.visual .txtwrap{
	position:absolute;left:50%;top:50%;z-index:10;
	transform:translate(-50%, -50%);
	width:92%;
	max-width: 1570px;
}
.visual .txtwrap .line{
	display: block;
	width: 100px;
	height: 1px;
	background: rgba(255,255,255,0.8);
	margin-bottom: 30px;
}
.visual .txtwrap .tit h2, .visual .txtwrap .tit h3{
	overflow: hidden;
}
.visual .txtwrap .tit h2 span, .visual .txtwrap .tit h3 span{
	font-family: "Nunito Sans";
	display: inline-block;
	font-size: 58px;
	font-weight: 700;
	color: #fff;
}
.visual .txtwrap .txt{
	margin-top: 10px;
	font-size: 30px;
	font-weight: 300;
	color: #fff;
}
.visual .ctr{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 150px;
	display:flex;align-items:center;justify-content:center;
	z-index:10;
	box-sizing:border-box;width:100%;
}

.visual .ctr .vprev {
	width: 27px;
	height: 15px;
	background: url(/images/main/vprev.png) no-repeat;
	cursor: pointer;
}
.visual .ctr .vnext {
	width: 27px;
	height: 15px;
	background: url(/images/main/vnext.png) no-repeat;
	cursor: pointer;
}

.visual .vpaging {
	position: static;
	z-index: 100;
	margin: 0 55px;
	display: flex;
	align-items: center;
}
.visual .ctr .vpaging span{
	opacity:1;
	display: inline-block;
	position:relative;
	width:8px;height:8px;
	border-radius: 50%;
	margin:0 5px;
	background:0;border:1px solid #fff;
	border-radius: 50%;
}
.visual .ctr .vpaging span.swiper-pagination-bullet-active{
	width:22px;height:6px; border-radius: 5px;
	background:#fff;
}

.visual .scrollWrap{
	position: absolute;
	right: 8%;
	bottom: 0;
	z-index: 1;
}
.visual .scrollWrap .scroll{
	display: inline-block;
	position: relative;
	overflow: hidden;
	width: 1px;
	height: 150px;
	background: rgba(255, 255, 255, 0.3);
}
.visual .scrollWrap .scroll:after{
	display: block;
	content: "";
	width: 1px;
	height: 60px;
	background: #fff;
	position: absolute;
	left: 0;
	top: 0;
	animation: scroll 1.4s infinite ease;
}
@keyframes scroll{
	0%{transform:translateY(0);}
	100%{transform:translateY(150%);}
}


.sec2{position: relative;padding: 200px 0 0;background: linear-gradient(180deg, rgba(248,248,248,1) 0%, rgba(252,252,252,1) 100%);}
.sec2 .inner{
	width: 92%;
	max-width: 1480px;
	margin: 0px auto 0;
}
.sec2 .slogan{
	text-align: center;
}
.sec2 .slogan .txt{
	font-size: 46px;
	font-weight: 600;
	overflow: hidden;
}
.sec2 .slogan .txt span{
	display: inline-block;
}
.sec2 .conwrap{
	display: flex;
	flex-wrap: wrap;
	margin-top: 90px;
}
.sec2 .conwrap .titwrap{
	display: flex;
	flex-direction: column;
	order: 1;
}
.sec2 .conwrap .titwrap p{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.7em;
	color: #000;
	margin-bottom: 10px;
}
.sec2 .conwrap .titwrap a{
	font-family: "Nunito Sans";
	font-size: 15px;
	color: #444;
	font-weight: 700;
}
.sec2 .conwrap .titwrap a i{
	display: inline-block;
	width: 13px;
	height: 11px;
	background: url(/images/main/sec2_arrow_icon.png) no-repeat center / contain;
	margin: 0 0 0 5px;
	transition: all 0.3s;
}
.sec2 .conwrap .titwrap a:hover i{
	transform: translateX(4px);
}
.sec2 .conwrap .txt{
	text-align: justify;
	word-break: break-all;
	font-size: 18px;
	line-height: 1.5em;
	margin-top: 30px;
	order: 3;
}
.sec2 .conwrap .img{
	position: relative;
	display: block;
	width: 340px;
	height: 140px;
	border-radius: 88px;
	background: url(/images/main/sec2_img.jpg) no-repeat center / cover;
	overflow: hidden;
	margin-left: 55px;
	order: 2;
}
.sec2 .conwrap .img:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000;
	transition: 1s 0.3s;
}

.sec3{padding: 220px 0 20px;background: linear-gradient(180deg, rgba(252,252,252,1) 0%, rgba(255,255,255,1) 100%);}
.sec3 .vdarea{
margin-bottom: 45px;
}
.sec3 .vdarea .vwrap{
position:relative;height:0;width:100%;padding-bottom:56.25%;
border-radius:100px 10px 100px 10px;
overflow:hidden;
}
.sec3 .vdarea .vwrap iframe{
position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;height:100%;
}
.sec3 ul li{
	display: flex;
	align-items: center;
	padding:50px 0;
	border-top: 1px solid #cacaca;;
}
.sec3 ul li:last-child{
	border-bottom: 1px solid #cacaca;;
}
.sec3 ul li .imgwrap{
	width: 50%;
	height: 420px;
	border-radius: 100px 10px 100px 10px;
	opacity: 0;
	overflow: hidden;
}
.sec3 ul li .imgwrap img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sec3 ul li .txtwrap{
	margin-left: 8%;
	width: 42%;
}
.sec3 ul li .txtwrap .tit{
	font-family: "Nunito Sans";
	font-size: 17px;
	font-weight: 600;
}
.sec3 ul li .txtwrap .slg{
	font-size: 32px;
	font-weight: 600;
	margin: 30px 0;
}
.sec3 ul li .txtwrap .con{
	text-align: justify;
	word-break: break-all;
	font-size: 17px;
	line-height: 1.6em;
}
.sec3 ul li .txtwrap .linkwrap{
	display: inline-block;
	margin-top: 30px;
}
.sec3 ul li .txtwrap .linkwrap .circle{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 60px;
	height: 60px;
	border: 1px solid #222;
	border-radius: 50%;
	overflow: hidden;
}
.sec3 ul li .txtwrap .linkwrap .circle:after{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0);
	width: 110%;
	height: 110%;
	border-radius: 50%;
	background: #222;
	transition: all 0.3s;
}
.sec3 ul li .txtwrap .linkwrap:hover .circle:after{
	transform: translate(-50%, -50%) scale(1);
}
.sec3 ul li .txtwrap .linkwrap .circle i{
	position: relative;
	z-index: 1;
	display: block;
	width: 13px;
	height: 11px;
	background: url(/images/main/link_arr.png) no-repeat center / contain;
	transition: all 0.3s;
}
.sec3 ul li .txtwrap .linkwrap:hover .circle i{
	background: url(/images/main/link_arr_wh.png) no-repeat center / contain;
}

.sec4{margin: 220px 0;}
.sec4 .boxwrap{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.sec4 .boxwrap .box{
	position: relative;
	width: calc((100% - 40px) / 3);
}
.sec4 .boxwrap .box:after{
	content: "";
	display: block;
	padding-bottom: 100%;
}
.sec4 .boxwrap .box .con{
	position: relative;
	display: flex;
	align-items: flex-end;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;
}
.sec4 .boxwrap .box:nth-child(1) .con{
	justify-content: center;
	align-items: center;
}
.sec4 .boxwrap .box:nth-child(2) .con{
	border-radius: 90px 10px 10px 10px;
}
.sec4 .boxwrap .box:nth-child(3) .con{
	border-radius: 10px 10px 10px 10px;
}
.sec4 .boxwrap .box:nth-child(4) .con{
	border-radius: 10px 10px 10px 10px;
}
.sec4 .boxwrap .box:nth-child(5) .con{
	border-radius: 10px 10px 90px 10px;
}
.sec4 .boxwrap .box .con p{
	position: relative;
	z-index: 1;
	font-size: 20px;
	font-weight: 600;
	color: #fff;
}
.sec4 .boxwrap .box:nth-child(1) .con p{
	font-size: 22px;
	color: #000;
}
.sec4 .boxwrap .box .con img{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.sec5{margin: 220px 0;}
.sec5 .press{
	padding-bottom: 40px;
}
.sec5 .press .swiper-slide{
	width: 362px;
}
.sec5 .press .swiper-slide a{
	display: block;
	border-radius: 10px;
	overflow: hidden;
}
.sec5 .press .swiper-slide a .thumb{
	position: relative;
	width: 100%;
	height: 225px;
	border-radius: 10px;
	overflow: hidden;
}
.sec5 .press .swiper-slide a .thumb img{
	width: 100%;
	height: 100%;
	transform-origin: center center;
	transition: all 0.5s;
	object-fit: contain;
}
.sec5 .press .swiper-slide a:hover .thumb img{
	transform: scale(1.03);
}
.sec5 .press .swiper-slide a .txtwrap{
	width: 100%;
	padding: 35px;
	box-sizing: border-box;
	background: #f9f9f9;
}
.sec5 .press .swiper-slide a .txtwrap .tit{
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4em;
	height: 2.8em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.sec5 .press .swiper-slide a .txtwrap .con{
	font-size: 16px;
	line-height: 1.4em;
	height: 2.8em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 10px 0 15px;
}
.sec5 .press .swiper-slide a .txtwrap .date{
	font-size: 17px;
}
.sec5 .press .swiper-scrollbar{
	display:block !important;
	width:100%;height:1px;
	left:0;
	background:#c4c4c4;
}
.sec5 .press .swiper-scrollbar .swiper-scrollbar-drag{
	height:2px;
	background:#000;
}




@-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(50px);}
100%{opacity:1;transform:translateY(0);}
}

.fadeUp{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: 2s; 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; }


.visual .txtwrap .tit h2 span{opacity: 0; transform: translateY(100%);}
.visual .txtwrap .tit h3 span{opacity: 0; transform: translateY(100%);}
.visual.in-view .txtwrap .tit h2 span{opacity: 1; transform: translateY(0); transition: all 1.2s 0.2s;}
.visual.in-view .txtwrap .tit h3 span{opacity: 1; transform: translateY(0); transition: all 1.2s 0.4s;}

.visual .txtwrap .txt{opacity: 0; transform: translateY(40px);}
.visual.in-view .txtwrap .txt{opacity: 1; transform: translateY(0); transition: all 1.2s 1.2s;}


.section_tit .titwrap .tit_en span{display: inline-block; opacity: 0; transform: translateY(30px);}
.section_tit .titwrap .tit_en span:nth-child(1){transition: all 1s 0.1s;}
.section_tit .titwrap .tit_en span:nth-child(2){transition: all 1s 0.15s;}
.section_tit .titwrap .tit_en span:nth-child(3){transition: all 1s 0.2s;}
.section_tit .titwrap .tit_en span:nth-child(4){transition: all 1s 0.25s;}
.section_tit .titwrap .tit_en span:nth-child(5){transition: all 1s 0.3s;}
.section_tit .titwrap .tit_en span:nth-child(6){transition: all 1s 0.35s;}
.section_tit .titwrap .tit_en span:nth-child(7){transition: all 1s 0.4s;}
.section_tit .titwrap .tit_en span:nth-child(8){transition: all 1s 0.45s;}
.section_tit .titwrap .tit_en span:nth-child(9){transition: all 1s 0.5s;}
.section_tit .titwrap .tit_en span:nth-child(10){transition: all 1s 0.55s;}
.section_tit .titwrap .tit_en span:nth-child(11){transition: all 1s 0.6s;}
.section_tit .titwrap .tit_en span:nth-child(12){transition: all 1s 0.65s;}
.section_tit.in-view .titwrap .tit_en span{opacity: 1; transform: translateY(0);}

.section_tit .titwrap .tit_kr{opacity: 0; transform: translateY(30px); transition: all 1s 0.2s;}
.section_tit.in-view .titwrap .tit_kr{opacity: 1; transform: translateY(0);}

.section_tit .linkwrap{opacity: 0; transform: translateY(30px); transition: all 1s 0.1s;}
.section_tit.in-view .linkwrap{opacity: 1; transform: translateY(0);}



.sec2 .slogan .txt span{transform: translateY(100%);}
.sec2 .slogan .txt.txt1 span{transition: all 1.2s 0.1s;}
.sec2 .slogan .txt.txt2 span{transition: all 1.2s 0.4s;}
.sec2 .slogan .txt.txt3 span{transition: all 1.2s 0.7s;}
.sec2 .slogan.in-view .txt span{transform: translateY(0);}


.sec2 .conwrap{opacity: 0; transform: translateY(30px); transition: all 1s;}
.sec2 .conwrap.in-view{opacity: 1; transform: translateY(0);}

.sec2 .conwrap .img.in-view:after{left: 100%;}


.sec3 ul li .imgwrap.in-view {
	animation-name: imgMotion;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
	animation-delay: 0.3s;
	opacity: 0;
}
@keyframes imgMotion{
	0% { clip-path: inset(50%);opacity:0; }
	100% {clip-path: inset(0);opacity:1;}
}

.sec3 ul li .txtwrap{opacity: 0; transform: translateX(-100px); transition: all 1.2s 0.3s;}
.sec3 ul li .txtwrap.in-view{opacity: 1; transform: translateX(0);}



.sec4 .boxwrap .box:nth-child(1){opacity:0;}
.sec4 .boxwrap .box:nth-child(2),
.sec4 .boxwrap .box:nth-child(3){transform: translateX(calc(-100% - 20px)); opacity: 0;}
.sec4 .boxwrap .box:nth-child(4),
.sec4 .boxwrap .box:nth-child(5){transform: translateX(calc(100% + 20px));opacity: 0;}
.sec4 .boxwrap .box.in-view{transform: translateX(0); opacity: 1; transition: all 1.4s 0.3s;}
.sec4 .boxwrap .box:nth-child(1).in-view{opacity: 1; transition: all 1.2s 0.8s;}

.sec4 .boxwrap .box .con img{transform: scale(1.2);}
.sec4 .boxwrap .box.in-view .con img{transform: scale(1); transition: all 1.4s 0.3s;}


.sec5 .press .swiper-slide{opacity: 0; transform: translateY(40px);}
.sec5 .press .swiper-slide:nth-child(1){transition: all 1.2s 0.1s;}
.sec5 .press .swiper-slide:nth-child(2){transition: all 1.2s 0.2s;}
.sec5 .press .swiper-slide:nth-child(3){transition: all 1.2s 0.3s;}
.sec5 .press .swiper-slide:nth-child(4){transition: all 1.2s 0.4s;}
.sec5 .press.in-view .swiper-slide{opacity: 1; transform: translateY(0);}