@charset "UTF-8";     
@font-face {
    font-family: 'aptos';
    src: url('/common/font/aptos-bold.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
.scroll{position: fixed;left: 50%;transform: translateX(-50%);bottom: 50px;z-index: 999;transition: 0.7s}
.scroll.on{opacity: 0}
.scroll span{display: block;width: 90px; line-height: 32px;border: 1px solid #FFFFFF;border-radius: 60px;overflow: hidden}
.scroll span i{color: #fff;white-space: nowrap;font-family: "poppins";animation: scr 5s infinite linear;display: block}
.scroll em{display: block;text-align: center;margin-top: 10px;}
@keyframes scr{
	0%{transform: translateX(0)}
	100%{transform: translateX(-100%)}
}
.main_visual{position: relative;z-index: -1;}
.main_visual .main_wrap{position: relative;height: 100vh}
.main_visual .main_video{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
.main_visual .main_video > div.main_video_w{position: relative;height: 100vh;overflow: hidden}
 
.main_visual .main_video > div.main_video_w video{position: relative;z-index: -1}
.main_visual .main_video > div.main_video_w .left{width: 29.427%;height: 102%;position: absolute;top: -1%;left: -1px;transform-origin: left top;transform : scaleX(0)}
.main_visual .main_video > div.main_video_w .left i{position: absolute;position: absolute;top: 0%;left: 0px;background : #fff;transform-origin: left top;display: block;width: 100%;height: 100%}
.main_visual .main_video > div.main_video_w .right i{position: absolute;position: absolute;top: 0%;left: 0px;background : #fff;transform-origin: right top;display: block;width: 100%;height: 100%}
.main_visual .main_video > div.main_video_w .right{width: 29.427%;height: 102%;position: absolute;top: -1%;right: -1px;;transform-origin: right top;transform : scaleX(0)}
.main_txt{position: fixed;top: 50%;width: 100%;z-index: 3;text-align: center;transform: translateY(-50%);pointer-events: none; }
.main_txt p{color: #FFFFFF;font-size: 24px;margin-top: 40px;}



/*
.main_txt i{overflow: hidden;display: block;}
.main_txt .info{overflow: hidden;display: block;}
.main_txt .info > div{transform: translateY(100%);display: block;animation: 1s on_txt ;animation-fill-mode: forwards;animation-delay: 0.3s}
*/
/*
.main_txt i a{transform: translateY(100%);display: block;animation: 1s on_txt ;animation-fill-mode: forwards}
.main_txt i {animation: 1s on_txt2 ;animation-fill-mode: forwards;animation-delay: 1.3s}
@keyframes on_txt {
	0%{transform: translateY(100%)}
	100%{transform: translateY(0%)}
}

@keyframes on_txt2 {
	0%{overflow: hidden}
	100%{overflow: visible}
}
*/

.main_txt i svg path{opacity: 0;animation: on_txt2 2s ;animation-fill-mode: forwards}
.main_txt i svg path.titlist01{animation-delay: 0.0s}
.main_txt i svg path.titlist02{animation-delay: 0.1s}
.main_txt i svg path.titlist03{animation-delay: 0.2s}
.main_txt i svg path.titlist04{animation-delay: 0.3s}
.main_txt i svg path.titlist05{animation-delay: 0.4s}
.main_txt i svg path.titlist06{animation-delay: 0.5s}
.main_txt i svg path.titlist07{animation-delay: 0.6s}
.main_txt i svg path.titlist08{animation-delay: 0.7s}
.main_txt i svg path.titlist09{animation-delay: 0.8s}
.main_txt i svg path.titlist10{animation-delay: 0.9s}
.main_txt i svg path.titlist11{animation-delay:1s}
.main_txt .info{opacity: 0;animation: on_txt2 2s ;animation-fill-mode: forwards;animation-delay: 1.2s}
@keyframes on_txt2 {
	0%{opacity: 0}
	100%{opacity: 1}
}
.main_con01{height: 150vh;padding-top:89vh}
.main_con01 .title_w{width: 100%;text-align: center}
.main_con01 .title_w .tit_w{display: flex;align-items: center;justify-content: center}
.main_con01 .title_w .tit_w strong{display: block;color: #000000;font-size: 100px;}
.main_con01 .title_w p{color: #333333;font-size: 22px;margin-top: 7px;transform: translateY(70px);opacity: 0}
.main_con01 .title_w .tit_w > div{opacity: 0}
.main_con01 .title_w .tit_w .tit01{transform: translateX(-400%) scale(3)}
.main_con01 .title_w .tit_w .tit03{transform: translateX(400%) scale(3)}
.main_con01 .deco_txt{transform: translateX(100%);margin-top: 30px;}
.main_con01 .deco_txt strong{font-size: 240px;color: #F3F3F3;font-weight: 900;white-space: nowrap;font-family: 'aptos';}


.main_con02 .title{position: absolute;width: 100%;top: 50%;transform: translateY(-50%);width: 100%;text-align: center;position: relative;z-index: 5}
.main_con02 .title strong{display: block;color: #FFFFFF;font-size: 48px;font-weight: 500;margin-bottom: 30px;z-index: 4}
.main_con02 .title p{font-size: 24px;color: #FFFFFF;line-height: 32px;}
.main_con02{height: 100vh;position: relative}
.main_con02 .txtbox_w ul li{position: absolute;top: 50%;left: 50%;}
.main_con02 .txtbox_w ul li p{color: #FFFFFF;font-size: 18px;line-height: 30px;padding: 25px;border-radius: 12px;    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);position: relative;z-index: 2}
.main_con02 .txtbox_w ul li.w p{background: rgba(255, 255, 255, 1);color: #000}
.main_con02 .txtbox_w ul li:nth-child(1){transform: translate(-442px,-329px)}
.main_con02 .txtbox_w ul li:nth-child(2){transform: translate(414px,-206px)}
.main_con02 .txtbox_w ul li:nth-child(3){transform: translate(298px,160px)}
.main_con02 .txtbox_w ul li:nth-child(4){transform: translate(-347px,280px)}
.main_con02 .txtbox_w ul li:nth-child(5){transform: translate(-772px,-65px)}
.main_con02 .txtbox{position: relative}
.main_con02 .txtbox .line{position: absolute}
.main_con02 .txtbox .line01{top: 100%;left: 50%;margin-top: -6px;margin-left: -6px}
.main_con02 .txtbox .line02{top: 50%;right: 100%;margin-right: -6px;margin-top: -6px}
.main_con02 .txtbox .line03{bottom: 50%;right: 100%;margin-right: -6px;margin-bottom: -6px}
.main_con02 .txtbox .line04{bottom: 100%;left: 50%;margin-left: -6px;margin-bottom: -6px}
.main_con02 .txtbox .line05{top: 50%;left: 100%;margin-left: -6px;margin-top: -6px}
.main_visual .main_video{transition: 2s}
.main_visual .main_video.on{transform: translateX(-50%) translateY(37.5%) scale(1.625)}

.main_con02 .title ul{margin-top: 55px;}
.main_con02 .title ul{display: flex;align-items: center;justify-content: center}
.main_con02 .title ul li:nth-child(1){margin-right: 20px;}
.main_con02 .title ul li a{display: block;border: 1px solid #FFFFFF;border-radius: 31px;line-height: 60px;padding: 0 53px;position: relative;position: relative;overflow: hidden}
.main_con02 .title ul li a:before{content: '';display: block;width: 100%;height: 100%;background: #fff;position: absolute;top: 0;left: 0;transition: 0.7s;transform-origin: left top;transform: scaleX(0)}
.main_con02 .title ul li:hover a:before{transform: scaleX(1)}
.main_con02 .title ul li{position: relative}
.main_con02 .title ul li i{position: absolute;left: -14px;top:-25px; z-index: 3}
.main_con02 .title ul li a span{color: #FFFFFF;font-size: 20px;transition: 0.7s;;position: relative;z-index: 3;display: block;}
.main_con02 .title ul li:hover a span{transform: translateX(-13px);color: #002060}
.main_con02 .title ul li a:after{content: '';display: block;width: 8px;height: 13px;background: url(/img/main/case.png);position: absolute;top: 50%;transform: translateY(-50%);right: 40px;opacity: 0;transition: 0.7s}
.main_con02 .title ul li:hover a:after{opacity: 1}
.main_visual .main_video > div.main_video_w:before{content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #000;mix-blend-mode: overlay;opacity: 0.1}
.main_visual .main_video > div.main_video_w .left i{transition: 1.2s}
.main_visual .main_video.on > div.main_video_w .left i{transform: scaleX(0)}
.main_visual .main_video > div.main_video_w .right i{transition: 1.2s}
.main_visual .main_video.on > div.main_video_w .right i{transform: scaleX(0)}
.main_con02 .txtbox_w ul li:nth-child(1) .txtbox{transform: translate(90px,90px);opacity: 0}
.main_con02 .txtbox_w ul li:nth-child(2) .txtbox{transform: translate(-90px,90px);opacity: 0}
.main_con02 .txtbox_w ul li:nth-child(3) .txtbox{transform: translate(-90px,-90px);opacity: 0}
.main_con02 .txtbox_w ul li:nth-child(4) .txtbox{transform: translate(90px,-90px);opacity: 0}
.main_con02 .txtbox_w ul li:nth-child(5) .txtbox{transform: translate(90px,0px);opacity: 0}

.main_con02 .title > div{transform: translateY(112px);transition: 1.5s}
.main_con02.on .title > div{transform: translateY(0px);transition-delay: 3.2s}
.main_con02 .title ul{opacity: 0;transition: 1.5s}
.main_con02.on .title ul{opacity: 1;transition-delay: 3.2s}


.main_con02 .title strong{transform: translateY(90px);opacity: 0;transition: 1.5s}
.main_con02.on .title strong{transform: translateY(00px);opacity: 1;}

.main_con02 .title p{transform: translateY(90px);opacity: 0;transition: 1.5s}
.main_con02.on .title p{transform: translateY(00px);opacity: 1;transition-delay: 0.3s}


.main_con02 .txtbox_w ul li .txtbox{transition: 1.2s}
.main_con02.on .txtbox_w ul li .txtbox{transform: translate(0,0);opacity: 1;}
.main_con02.on .txtbox_w ul li:nth-child(1) .txtbox{transition-delay: 0.5s}
.main_con02.on .txtbox_w ul li:nth-child(2) .txtbox{transition-delay: 0.7s}
.main_con02.on .txtbox_w ul li:nth-child(3) .txtbox{transition-delay: 0.9s}
.main_con02.on .txtbox_w ul li:nth-child(4) .txtbox{transition-delay: 1.1s}
.main_con02.on .txtbox_w ul li:nth-child(5) .txtbox{transition-delay: 1.3s}


.main_con02 .txtbox_w ul li{transition: 1.2s;transition-delay: 3.2s}
.main_con02.on .txtbox_w ul li{transform: translate(-50%,-50%);opacity: 0}

@media (max-width: 1700px) {
	.main_con02 .txtbox_w ul li:nth-child(2) {transform: translate(284px, -206px);}
	.main_con02 .txtbox_w ul li:nth-child(3) {transform: translate(188px, 160px);}
	.main_con02 .txtbox_w ul li:nth-child(4) {transform: translate(-347px, 220px);}
	.main_con02 .txtbox_w ul li:nth-child(5) {transform: translate(-712px, -65px);}
}

@media (max-width: 950px) {
	.main_con01 .title_w .tit_w strong{font-size: 60px;}
	.main_con01 .title_w p{font-size: 15px;}
	.main_con01 .deco_txt strong{font-size: 110px;}
	.main_con02 .txtbox_w{position: absolute;top: 50%;transform: translateY(-50%);width: 100%;overflow: hidden}
	.main_con02 .txtbox_w ul{display: flex;flex-wrap: nowrap;width: auto;width: 1200px;}
	.main_con02 .txtbox_w ul li{width: 20%;padding: 0 5px}
	.main_con02 .txtbox_w ul li:nth-child(1),
	.main_con02 .txtbox_w ul li:nth-child(2),
	.main_con02 .txtbox_w ul li:nth-child(3),
	.main_con02 .txtbox_w ul li:nth-child(4),
	.main_con02 .txtbox_w ul li:nth-child(5){position: static;transform: none}
	.main_con02 .txtbox_w ul li p br{display: none}
	.main_con02 .txtbox_w ul li p{word-break: keep-all;font-size:  13px;line-height: 1.7;padding: 12px;border-radius: 8px;}
	.main_con02 .txtbox .line{display: none}
	.main_con02.on .txtbox_w ul li .txtbox{transform: translate(0,0);opacity: 1;}
	.main_con02 .txtbox_w ul li .txtbox{transform: translate(0,0);opacity: 1;}
	.main_con02.on .txtbox_w ul li{transform: translate(-00%,-00%);opacity: 1}
	.main_con02 .txtbox_w ul li{transform: translate(-00%,-00%);opacity: 1}
/*
	.main_con02 .txtbox_w ul{transform: translateX(100%);transition: 3s linear;transition-delay: 0.3s}
	.main_con02.on .txtbox_w ul{transform: translateX(-100%)}
*/
	.main_con02 .title strong{font-size: 26px;margin-bottom: 10px;}
	.main_con02 .title p{font-size: 14px;line-height: 1.7}
	.main_con02.on .title strong{transition-delay: 3s}
	.main_con02.on .title p{transition-delay: 3.3s}
	#header #gnb {display: none}
	.main_txt i svg{width: 258px;}
	.main_txt p{font-size: 15px;line-height: 1.5}
	.main_txt p{margin-top: 15px;}
	.main_con01{height: 120vh;padding-top: 74vh}
	.main_con02{height: 70vh}
	.main_visual .main_video.on {transform: translateX(-50%) translateY(-20%) scale(1.75);}
	.main_con02 .title ul li a span{font-size: 14px;}
	.main_con02 .title ul li a{padding: 0 20px;line-height: 40px;}
	.main_con02 .title ul li i img{width: 60px;height: auto}
	.main_con02 .title ul li i{top: -16px;}
	.main_con02 .title ul{margin-top: 25px;}
	.scroll span i{font-size: 11px;}
	.scroll span{width: 60px;line-height: 22px;}
	.scroll{bottom: 20px;}
	.scroll svg{width: 9px;height: auto}
	#header #btn_area .mo_menu button img{width: 16px;}
	.main_con02.on .title ul{transition-delay: 3.5s}
	.main_con02 .txtbox_w ul{width: auto;flex-wrap: wrap}
	.main_con02 .txtbox_w ul li{width: 50%;padding: 10px;}
	.main_con02 .txtbox_w ul li:nth-child(3n){display: none}
	.main_con02 .txtbox_w ul li:nth-child(1) .txtbox{transform: translate(0,60px)}
	.main_con02 .txtbox_w ul li:nth-child(2) .txtbox{transform: translate(0,60px)}
	.main_con02 .txtbox_w ul li:nth-child(3) .txtbox{transform: translate(0,60px)}
	.main_con02 .txtbox_w ul li:nth-child(4) .txtbox{transform: translate(0,60px)}
	.main_con02 .txtbox_w ul li:nth-child(5) .txtbox{transform: translate(0,60px)}
	.main_con02.on .txtbox_w ul li:nth-child(1) .txtbox{transform: translate(0,0)}
	.main_con02.on .txtbox_w ul li:nth-child(2) .txtbox{transform: translate(0,0)}
	.main_con02.on .txtbox_w ul li:nth-child(3) .txtbox{transform: translate(0,0)}
	.main_con02.on .txtbox_w ul li:nth-child(4) .txtbox{transform: translate(0,0)}
	.main_con02.on .txtbox_w ul li:nth-child(5) .txtbox{transform: translate(0,0)}
	.main_con02 .txtbox_w{overflow: visible;top: 50%;transform: translate(-50%, -50%);left: 50%}
	.main_con02.on .txtbox_w ul li{opacity: 0}
	.main_con02.on .txtbox_w ul li:nth-child(1){transform: translate(50%,50%)}
	.main_con02.on .txtbox_w ul li:nth-child(2){transform: translate(-50%,50%)}
	.main_con02.on .txtbox_w ul li:nth-child(3){transform: translate(50%,-50%)}
	.main_con02.on .txtbox_w ul li:nth-child(5){transform: translate(-50%,-50%)}
}

@media (max-width: 660px) {
	.main_con01 .title_w .tit_w strong{font-size: 50px}
	.main_con01 .title_w p{font-size: 14px;line-height: 1.7;word-break: keep-all;padding: 0 20px}
}