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


.section{position:relative;width:100%;height:100vh;box-sizing:border-box;overflow:hidden;}
.section .fp-tableCell{overflow:hidden;box-sizing:border-box;height:100% !important;}
.section *{box-sizing:border-box;}


body #fp-nav{right:calc(2.5% + 0px) !important;}
body #fp-nav ul li{
    display: block;
    width:7px;height:7px;
    margin:20px 0px;
    position: relative;
}
body #fp-nav ul li.on{margin-bottom:53px;}
body #fp-nav ul li:after{
	display:block;content:"";
	width:1px;height:33px;
	background:#fff;
	margin:10px auto 50px;
	transform:scaleY(0);
	transition:all 0.24s;
}
body #fp-nav ul li.on:after{transform:scaleY(1);}
body #fp-nav ul li a{}
body #fp-nav ul li a span,
body #fp-nav ul li:hover a span{
	position:static;display:block;width:100%;height:100%;margin:6px 0;border-radius:1px;
	background:0;border:1px solid rgba(255,255,255,0.5);
	transform-origin:center;
	border-radius:50%;
	transition:all 0s;
}
body #fp-nav ul li a.active span,
body #fp-nav ul li:hover a.active span{
	width:7px;height:7px;margin:0 auto;border-radius:50%;background:#fff;border:0;
	transition:all 0s;
}
body #fp-nav ul li:last-child{display:none;}
body #fp-nav ul li.on:nth-child(6):after{display:none;}


body.bl #fp-nav ul li a span,
body.bl #fp-nav ul li:hover a span{border:1px solid #000;}
body.bl #fp-nav ul li a.active span,
body.bl #fp-nav ul li:hover a.active span{background:#000;}
body.bl #fp-nav ul li.on:after{background:#000;}





/* sec1 */
.sec1{}
.sec1 .visual{width:100%;height:100%;}
.sec1 .visual .swiper-slide{overflow:hidden;position:relative;width:100%;height:100%;}
.sec1 .visual .swiper-slide .slide-inner{
	width:100%;height:100%;
    position: absolute;left:0;top:0;z-index: 100;
    background-size: cover;
    background-position: center;
    display:flex;justify-content:center;align-items:center;
    text-align: left;	
}
.sec1 .visual .swiper-slide .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	transform:scale(1.02);
	transition:all 1.2s;
}
.sec1 .visual .swiper-slide .bg>div{width:100%;height:100%;}
.sec1 .visual .swiper-slide .bg>div video{width:100%;height:100%;object-fit:cover;}
.sec1 .visual .swiper-slide.v1 .bg>div{background:url(/images/main/visual1.jpg) no-repeat center;background-size:cover}

.sec1 .visual .fix1{
	position:absolute;left:5%;bottom:90px;z-index:100;
	width:90%;
}
.sec1 .visual .fix1 .txtWrap{position:relative;width:100%;}
.sec1 .visual .fix1 .txtWrap>div{
	visibility:hidden;position:absolute;left:0;bottom:0;
	width:100%;
	clip-path: inset(0 0 0 100%);
}
.sec1 .visual .fix1 .txtWrap>div.off{
	visibility:visible;
	opacity:0;
	clip-path: inset(0% 100% 0% 0%);
	transition:all 1.2s 0.5s;
}
.sec1 .visual .fix1 .txtWrap>div.on{
	visibility:visible;
	opacity:1;
	clip-path: inset(0% 0% 0% 0%);
	transition:all 1.2s 0.5s;
}
.sec1 .visual .fix1 .txtWrap>div .slg{
	position:relative;
	padding-bottom:20px;
	font-size:28px;color:#fff;font-weight:400;line-height:1.3em;
}
.sec1 .visual .fix1 .txtWrap>div .slg:after{
	display:block;content:"";
	width:100%;height:2px;
	background:#fff;
	position:absolute;left:0;bottom:0;
	opacity:0.5;
}
.sec1 .visual .fix1 .txtWrap>div .slg + p{
	margin-top:20px;
	font-size:16px;color:#fff;line-height:1.5em;font-weight:500;
}
.sec1 .visual .fix1 .ctr{display:flex;align-items:center;margin-top:55px;}
.sec1 .visual .fix1 .ctr .vprev{display:none;margin-right:42px;}
.sec1 .visual .fix1 .ctr .vnext{display:none;margin-left:42px;}
.sec1 .visual .fix1 .ctr .swiper-pagination{position:static;}
.sec1 .visual .fix1 .ctr .swiper-pagination span{
	box-sizing:border-box;
	width:9px;height:9px;
	margin:0 20px 0 0;
	border:1px solid #fff;
	background:0;
	border-radius:50%;
	opacity:1;
}
.sec1 .visual .fix1 .ctr .swiper-pagination span.swiper-pagination-bullet-active{background:#fff;}





/* sec2 */
.sec2{}
.sec2 .conwrap{
	width:100%;height:100%;
	padding-top: 90px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sec2 .conwrap>div{
	box-sizing:border-box;
	display:flex;align-items:center;
	width:100%;
	padding:0 4%;
}
.sec2 .conwrap>div.txtarea{
	position:relative;
	border-right:1px solid #ccc;
}
.sec2 .conwrap>div.txtarea .bg{
	position: absolute;
	left: 0;
	top: 98%;
	width: 100%;
	aspect-ratio: 720 / 310;
	background: url(/images/main/sec2_bg.png) no-repeat;
	background-size: contain;
	z-index: -1;
}
.sec2 .conwrap>div.txtarea h3{font-size:18px;color:#000;font-weight:600;}
.sec2 .conwrap>div.txtarea h4{margin:15px 0 20px;font-size:30px;color:#222;font-weight:600;}
.sec2 .conwrap>div.txtarea p{font-size:16px;color:rgba(0,0,0,0.7);font-weight:400;line-height:1.6em;}
.sec2 .conwrap>div.txtarea a{margin-top:10px;}
.sec2 .conwrap>div.imgarea{justify-content:center;justify-content: space-between;margin-top: 90px;}
.sec2 .conwrap>div.imgarea>div{
	overflow:hidden;
	border-radius:12px;
	width: 49%;
	height: 160px;
}
.sec2 .conwrap>div.imgarea>div img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}





/* sec3 */
.sec3{}
.sec3 .conwrap{
	display:flex;flex-wrap:wrap;
	flex-direction: column;
	width:100%;height:100%;
}
.sec3 .conwrap>div{
	overflow:hidden;
	position:relative;
	box-sizing:border-box;
	display:flex;align-items:center;justify-content:center;
	width:100%;height:50%;
	padding:0 4%;
}
.sec3 .conwrap>div .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
}
.sec3 .conwrap>div:nth-child(1) .bg{
	background:url(/images/main/sec3_bg1.jpg) no-repeat center;
	background-size:cover;
}
.sec3 .conwrap>div:nth-child(2) .bg{
	background:url(/images/main/sec3_bg2.jpg) no-repeat center;
	background-size:cover;
}
.sec3 .conwrap>div .con{
	position:relative;z-index:100;
	text-align:center;
	transform: translateY(28px);
}
.sec3 .conwrap>div .con h2{font-size:15px;color:#fff;font-weight:600;}
.sec3 .conwrap>div .con .icon{display:flex;align-items:center;justify-content:center;width: 45px; margin: 15px auto;}
.sec3 .conwrap>div .con h3{font-size:24px;color:#fff;font-weight:600;}
.sec3 .conwrap>div .con p{
	margin: 10px 0;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.7em;
}
.sec3 .conwrap>div .con a{}





/* sec4 */
.sec4{box-sizing:border-box;padding:90px 4% 4% 4%;}
.sec4 .conwrap{
	overflow:hidden;
	position:relative;
	width:100%;height:100%;
	border-radius:20px;
}
.sec4 .conwrap .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	background:url(/images/main/sec4_bg.jpg) no-repeat center;
	background-size:cover;
}
.sec4 .conwrap .con{
	display:flex;align-items:center;justify-content:center;
	position:relative;z-index:100;
	width:100%;height:100%;
	text-align:center;
}
.sec4 .conwrap .con>div{box-sizing:border-box;width:100%;padding:0 5%;}
.sec4 .conwrap .con h3{font-family:"Wix Madefor Display";font-size:18px;color:#fff;font-weight:600;}
.sec4 .conwrap .con h4{margin-top:15px;font-size:20px;color:#fff;font-weight:600;}
.sec4 .conwrap .con ul{display:flex;flex-wrap:nowrap;overflow-x: scroll;gap:20px;margin-top:30px; padding-bottom: 20px;
 -webkit-overflow-scrolling: touch;  /* iOS 부드러운 스크롤 */
  scroll-behavior: smooth;            /* 키보드/휠 스크롤 부드럽게 */
  cursor: grab;                       /* 드래그 가능 느낌 */
  user-select: none;                  /* 드래그 중 텍스트 선택 방지 */
  -webkit-user-select: none;
  touch-action: pan-y;                /* 수직 스크롤은 네이티브 유지 */
}
.sec4 .conwrap .con ul.dragging{
  cursor: grabbing;
  scroll-behavior: auto;              /* 드래그 중엔 즉시 이동 */
}
.sec4 .conwrap .con ul.active {
  cursor: grabbing;
}
.sec4 .conwrap .con ul li{
	width: 250px;
	height: 250px;
	overflow:hidden;
	padding:30px 5%;
	background:rgba(255,255,255,0.8);
	border-radius:12px;
	        flex-shrink: 0;
}
.sec4 .conwrap .con ul li .icon{display:flex;align-items:center;justify-content:center;width: 40px;margin: 0 auto;}
.sec4 .conwrap .con ul li .title{margin:15px 0 15px;}
.sec4 .conwrap .con ul li .title .en{font-size:20px;color:#000;font-weight:600;}
.sec4 .conwrap .con ul li .title .kr{margin-top:15px;font-size:19px;color:#000;font-weight:600;}
.sec4 .conwrap .con ul li .txt{font-size:16px;color:rgba(0,0,0,0.8);line-height:1.7em;}





/* sec5 */
.sec5{
	box-sizing:border-box;
	position:relative;
	background:url(/images/main/sec5_bg.gif) repeat;
}
.sec5 .bg1{
	position:absolute;left:30%;bottom:0;
	transform:translateX(-100%);
	animation:ani1 5s infinite alternate linear;
	width: 120px;
}
.sec5 .bg2{
	position:absolute;left:37.5%;bottom:15%;
	animation:ani2 5s infinite alternate linear;
	width: 160px;
	display: none;
}
.sec5 .conwrap{
	position:relative;z-index:100;
	display:flex;flex-direction: column;justify-content: flex-end;
	padding:0 5%;
	width: 100%;
	height: 100%;
	padding-top: 90px;padding-bottom: 40px;
}
@keyframes ani1{
	0{transform:translateX(-100%);}
	30%{transform:translate(-90%, -10px);}
	60%{transform:translate(-95%, 20px);}
	100%{transform:translate(-100%, 40px);}
}
@keyframes ani2{
	0{transform:translateY(0);}
	100%{transform:translateY(-10%);}
}
.sec5 .conwrap .txtarea{width: 100%;}
.sec5 .conwrap .txtarea h3{font-size:21px;color:#000;font-weight:500;}
.sec5 .conwrap .txtarea h4{margin:15px 0;font-size:24px;color:#1e1e1e;font-weight:bold;}
.sec5 .conwrap .txtarea p{font-size:15px;color:rgba(0,0,0,0.8);line-height:1.6em;}
.sec5 .conwrap .txtarea .btns{display:flex;align-items:center;gap:5px;margin-top:45px;}
.sec5 .conwrap .txtarea .btns a{
	display:flex;align-items:center;justify-content:center;
	width:130px;height:50px;
	background:#468a5b;
	border-radius:50px;
	font-size:15px;color:#fff;text-align:center;
}
.sec5 .conwrap .txtarea .btns a i{
	margin-left:25px;
	color:#fff;
	font-style:normal;
}
.sec5 .conwrap .imgarea{
	width: 100%;
	height: 165px;
	text-align: right;
	margin-top: 30px;
}
.sec5 .conwrap .imgarea img{
	width: 140px;
	height: 100%;
	object-fit: cover;
	border-radius:12px;
}