main {height: var(--100vh); overflow: hidden; position: relative;}
/* .main_video { width: 100%; height: 100%; position: absolute; left: 0; top: 0;background-color: #071a2f;overflow: hidden;} */
.main_video { width: 100%; height: 100%; position: absolute; left: 0; top: 0;overflow: hidden;}
/* .main_video img , .main_video video  { width: 100%; height: 100%; object-fit: cover; transform:translateY(calc(0% + 250px)) ;} */
/* .main_video::before {content: ""; position: absolute; left: 0 ; top: 0 ; background-image:url('/images/visual_cover.png') ; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%;z-index: 1;} */
.main_video img , .main_video video  { width: 100%; height: 100%; object-fit: cover; transform:scale(1.6); transform-origin: 50% 0%; }

.main_contents { position: relative; z-index: 2 ; color: #fff; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;text-align: center;  padding-left: 50px; padding-right: 50px;}
.main_contents svg {margin-bottom: 1.3889rem;}
.main_contents svg path {clip-path: inset(0 0% 0 100%); animation: clip_path_width02 1.2s ease 1 forwards;}
.main_contents svg path:nth-child(5) ,
.main_contents svg path:nth-child(6) ,
.main_contents svg path:nth-child(7) ,
.main_contents svg path:nth-child(8) ,
.main_contents svg path:nth-child(9){clip-path: inset(0 100% 0 0%);}
.main_contents svg path:nth-child(4),.main_contents svg path:nth-child(5) {animation-delay: 0s;}
.main_contents svg path:nth-child(3),.main_contents svg path:nth-child(6) {animation-delay: 0.12s;}
.main_contents svg path:nth-child(2),.main_contents svg path:nth-child(7) {animation-delay: 0.24s;}
.main_contents svg path:nth-child(1),.main_contents svg path:nth-child(8),.main_contents svg path:nth-child(9) {animation-delay: 0.3s;}


.main_contents strong {display: block; margin-bottom: 1.3889rem;color:#9AB1DA; font-weight: 500; font-size: 1.6667rem; line-height: 1.2; transform: translateY(40px); opacity: 0; animation: reset3 1.5s ease 1 forwards 0.15s;}
.main_contents p { line-height: 1.8; color: #E1E1E1; margin-bottom: 1.6667rem; transform: translateY(40px); opacity: 0; animation: reset3 1.5s ease 1 forwards 0.3s;}
.main_contents .text_top  {animation: reset3 1.5s ease 1 forwards 0s; font-size:1.4rem ; font-weight:500}
.main_contents .buttons { display: flex; align-items: center; justify-content: center; gap: 10px; transform: translateY(40px); opacity: 0; animation: reset3 1.5s ease 1 forwards 0.4s;}
.buttons a { border-radius: 100px;  height: 52px; display: flex; align-items: center; justify-content: center; gap: 7px;font-size: 0.95rem; font-weight: 600;} 
.buttons .btn1 {background-color: var(--point01) ; width: 230px; position: relative;}
@keyframes buttons_btn_line {0%{filter: hue-rotate(0deg);}100%{filter: hue-rotate(360deg);}}
.buttons .btn1::before { content: ""; position: absolute; left:50%; top: 50%; transform: translate(-50%,-50%); border-radius: 100px; border: 1px solid #fff; width: calc(100% - 15px); height: calc(100% - 13px); box-shadow: inset 0px 0px 17px #ffffff; transform-origin: 0% 0%; scale: 1.08; opacity: 0 ; pointer-events: none; transition: all 0.5s ease;}

.buttons .btn2 {background-color: #FFFFFF1A;  width: 180px;border: 1px solid transparent;background-image:linear-gradient(#1e2a38, #1e2a38), linear-gradient(90deg, #E66B00 0%, #00B3FF 100%);background-origin: border-box;background-clip: content-box, border-box;}


section { overflow: hidden; opacity: 1 !important;}
section h3 { color: var(--point01); font-size: 0.9rem; font-weight: 500; margin-bottom: 8px; position: relative; padding-left: 10px; display: block; overflow: hidden; font-family: 'Pretendard';}  
section h3::before {content: ""; border-radius: 30px; background-color: var(--point01); width: 105px; height: 6px; left: 0; position: absolute; top: 0; transition: all 1s ease-out;}
section h3 .ix { transform: translateY(20px); transition: all 1s ease;}
section h4 { font-size: 3.1111rem;font-weight: 700; line-height: 1.2; transform: translateX(40px); opacity: 0;}
section.aos-animate h4 {animation: reset3 1.3s ease-out 1 forwards;}
section.aos-animate h3::before { width: 6px;}
section.aos-animate h3 .ix {animation: downmove_noopa 1s ease-out 1 forwards;}

/* ============================ section 02=============================== */

.section02 {margin: 0; transform: translate(0,0); transition: all 1.2s ease-out !important;}
.section02.aos-animate { margin: 30px 50px;}
.section02_wrap { border-radius: 0; overflow: hidden; position: relative; width: 100%; transition: all 1s ease;}
.section02.aos-animate .section02_wrap{border-radius: 15px;}
.section02_wrap .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.section02_content.width_1580 {z-index: 1; position: relative; color: #fff; padding-top: 90px; padding-bottom: 130px;}
.section02 h4 {margin-bottom: 1.83333rem;}
.section02 .bold1 {color: #9AB1DA; font-size: 1.5556rem; font-weight: 500; display: block; margin-bottom: 1.1111rem; line-height: 1.35;  transform: translateX(40px); opacity: 0;}
.section02 .bold2 {color: #E1E1E1; line-height: 1.7; margin-bottom: 3.3333rem;  transform: translateX(40px); opacity: 0;}
.section02.aos-animate .bold1 {animation: reset3 1.3s ease-out 1 forwards;}
.section02.aos-animate .bold2 {animation: reset3 1.3s ease-out 1 forwards 0.2s;}
.section02 ul {display: flex; gap: 20px;}


.section02 li{flex-basis:calc(33.33%);background:linear-gradient(180deg,rgba(255,255,255,0.16) 0%,rgba(0,15,24,0.16) 50%,rgba(255,255,255,0.16) 100%);padding:24px 40px;display:flex;flex-direction:column;align-items:flex-start;height:280px;position:relative;overflow:hidden;border-radius:4px; opacity: 0;}
.section02 li .line{position:absolute;inset:0;pointer-events:none;}
.section02 li:nth-child(2) {transform: translateX(calc(-100% - 20px));}
.section02 li:nth-child(3) {transform: translateX(calc(-200% - 40px))}
.section02.aos-animate li {animation: reset3 1.5s ease 1 forwards;}
.section02.aos-animate li:nth-child(3) {animation-delay: 0.3s;}

@keyframes section02_line_ani{0%{offset-distance:0%;opacity:0;}5%{opacity:1;}90%{opacity:1;}100%{offset-distance:100%;opacity:0;}}
@keyframes section02_line_ani2{0%{offset-distance:0%;opacity:0;}5%{opacity:1;}90%{opacity:1;}100%{offset-distance:100%;opacity:0;}}
.section02 li::before,.section02 li::after,.section02 li .line::before,.section02 li .line::after{content:"";position:absolute;width:120px;height:2px;offset-path:border-box;offset-rotate:auto;background:linear-gradient(90deg,transparent,#cacaca,transparent);z-index:1;}
.section02 li::before{animation:section02_line_ani 8s linear infinite;}
.section02 li::after{animation:section02_line_ani 8s linear infinite;animation-delay:-4s;}
.section02 li .line::before{animation:section02_line_ani 8s linear infinite;animation-delay:-0.3s;}
.section02 li .line::after{animation:section02_line_ani 8s linear infinite;animation-delay:-4.3s;}



.section02 .tag { background-color: var(--point01);display: flex;justify-content: center;align-items: center; border-radius: 8px; font-size: 14px; padding: 8px 10px; gap: 3px; margin-bottom: 1.611rem;}
.section02 .text1 {margin-bottom: 16px; font-size: 1.7778rem; font-weight: 700; }
.section02 .text2 {font-size: 0.9rem;}
.section02 li svg { position: absolute; right: 40px; bottom: 30px;}

.section02 li:nth-child(1).active svg path:nth-child(2) {transform-origin: 50% 100%;   animation: to_rotateY360 2.3s ease-out 1 forwards;}
.section02 li:nth-child(1).active svg path:nth-child(1) {animation: to_scale01_100 2.3s ease 1 forwards; transform-origin: 50% 50%;}
.section02 li:nth-child(2).active svg g path:nth-child(3) ,
.section02 li:nth-child(2).active svg g path:nth-child(4) ,
.section02 li:nth-child(2).active svg g path:nth-child(5), 
.section02 li:nth-child(2).active svg g path:nth-child(2) ,
.section02 li:nth-child(2).active svg g path:nth-child(6) ,
.section02 li:nth-child(2).active svg g path:nth-child(7) {transform-origin: 29% 100%; animation: to_rotateY360 2s ease-out 1 forwards; }
.section02 li:nth-child(3).active svg > path:nth-child(2) {animation: to_scale01_100 2s ease 1 forwards; transform-origin: 50% 50%;}
.section02 li:nth-child(3).active svg > path:nth-child(1) {animation: to_scale01_100 2s ease 1 forwards 0.1s; transform-origin: 50% 50%;}
.section02 li:nth-child(3).active svg .g01 {animation: to_downleft_small 2.3s ease 1 forwards 0.2s; transform-origin: 50% 50%;}

/* ============================ section 03=============================== */

.section03 {padding-top: 70px; transform: translate(0,0);} 
.section03 h4 {margin-bottom: 3.3333rem;}
.sec03_slide {overflow: hidden; position: relative; margin-bottom: 120px; transform: translateY(50px); opacity: 0;}
.section03.aos-animate .sec03_slide { animation: reset3 1.3s ease 1 forwards;}
.sec03_slide::before, .sec03_slide::after { content: "";  position: absolute ; left: -1px; top: 0; width: 130px; height: 100%; background:linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%); z-index: 3;}
.sec03_slide::after { left: auto; right: -1px;background:linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fffffffa 100%);}
.sec03_slide img {width: 100%; height: 100%; object-fit: cover; border-radius: 15px 15px 0 0;}
.sec03_slide .img {width: 100%; aspect-ratio: 376/370;}
.sec03_slide .text { background-color: #102948; padding: 30px 30px; color: #fff; position: relative; border-radius: 0 0 15px 15px; height: 150px;}
.sec03_slide .text .left { font-size: 1.1rem; font-weight: 700; line-height: 1.2;}
.sec03_slide .text .left p { margin-bottom: 5px;}
.sec03_slide .text .left span {display: inline-block; }
.sec03_slide .text .arrow { position: absolute; right: 0; bottom: 0; width: 160px; aspect-ratio: 1/1; border-radius: 100%; background-color: #fff; transform: translate(50% ,50%); display: flex; align-items: center; justify-content: center;}
.sec03_slide li { border-radius: 15px; }
.sec03_slide .text .arrow i {  transform: translate(-100%,-100%) rotate(90deg)  ; font-size: 1.6667rem; color: var(--black); transition: all 0.35s ease-out;}
.sec03_slide .swiper-slide-active .text .arrow i {color: var(--point01);transform: translate(-100%,-100%) rotate(45deg);}
.sec03_slide .swiper-wrapper {margin-bottom: 2.7778rem;}
.sec03_slide .swiper-playpause { display: flex; gap: 5px; align-items: center;}
.sec03_slide .swiper-playpause i { display: flex; align-items: center; justify-content: center; cursor: pointer;}
.sec03_slide .swiper-buttons {display: flex; align-items: center; justify-content: center;gap: 20px;z-index: 5; position: relative;}
.sec03_slide .swiper-paging {font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 2px;}
.sec03_slide .swiper-paging .now { color: var(--black);}
.sec03_slide .swiper-paging p { color: #C9C9C9;}
.sec03_slide .swiper-pagination-progressbar-fill { background: #1C1C1C !important;}

.sec03_slide .swiper-pagination.swiper-pagination-progressbar { position: relative; top: auto; left: auto; width: 200px; height: 4px;background: #EEEEEE; border-radius: 50px;}

/* ============================ section 04=============================== */

.section04 {position: relative; overflow: hidden; transform: translate(0,0); margin: 80px; transition: all 1.6s ease !important; border-radius: 100px;}
.section04.aos-animate { margin: 0; border-radius: 0;}

.section04_wrap.width_1580 { padding-top: 180px; padding-bottom: 160px; z-index: 1; position: relative; color: #fff; text-align: center;}
.section04 .bg { position: absolute ; left: 0; top: 0px; width: 100%; height: 100%;   background-image: url("/images/sec04_bg.jpg");background-position: 70% 50%;background-repeat: no-repeat;background-size: cover; transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.section04 .bg::before { position: absolute ; left: 0; top: 0; width: 100%; height: 100%; background-color: #00000066; content: "";}
.section04 .buttons {display: flex; align-items: center; justify-content: center;}
.section04 .bg img { width: 100%; height: 100%; object-fit: cover; }
.section04 h4 {margin-bottom: 30px; transform: translateY(40px); opacity: 0;}
.section04.aos-animate h4 {animation: reset3 1.3s ease 1 forwards;}
.section04 strong {margin-bottom: 40px; display: block; font-weight: 400; line-height: 1.4;transform: translateY(40px); opacity: 0;}
.section04.aos-animate strong {animation: reset3 1.3s ease 1 forwards 0.2s;}
.section04 .content_box {display: flex ;flex-direction: column; align-items: center;}
.section04 .buttons { transform: translateY(40px); opacity: 0;}
.section04.aos-animate .buttons {animation: reset3 1.3s ease 1 forwards 0.4s;}
.section04 .content_box .btn2 {width:230px; font-size:17px}

/* .section04.aos-animate .bg { scale: 1;} */

/* --------------------- -- 반응형  ---------------------------- */

@media screen and (min-width:1025px) {
    .sec03_slide .swiper-slide:hover .text .arrow i {color: var(--point01); transform: translate(-100%,-100%) rotate(45deg);}
    .buttons .btn2:hover { animation: buttons_btn_line 2s linear infinite forwards;}
    .buttons .btn2:hover i { animation: rotateMove3_4 1s ease infinite; display: inline-block;}
    .buttons .btn1:hover i { animation: scale_only 1s ease infinite; display: inline-block;}
    .buttons .btn1:hover:before { scale: 1; opacity: 1;}
}

@media screen and (max-width:1600px) {
    .sec03_slide .text .left{font-size: 1.2444rem;}

    /* 1600 end */
} 
@media screen and (max-width:1400px) {
    .sec03_slide .text .arrow {width: 140px;}
    .sec03_slide .text .arrow i{font-size: 1.3667rem;}
    .sec03_slide .text{padding: 20px;}
    /* 1400 end */
} 
@media screen and (max-width:1280px) {
    .main_contents {padding-bottom: 0;}

    /* 1280 end */
} 
@media screen and (max-width:1024px) {
    .section02.aos-animate {margin: 20px 25px;}
    .section02 .bold1 {font-size: 1.5556rem;}
    .section02 li{padding: 20px; height: 250px;}
    .section02 .tag {font-size: 13px; margin-bottom: 1.2111rem;}
    .section02 .text1 {font-size: 1.5778rem;}
    .section02 li svg {right: 20px; bottom: 20px;}
    .section02 li svg {max-height: 56px; width: auto;}
    .sec03_slide .text .left {font-size: 1.1444rem;}
    .sec03_slide .text {height: 130px;}
    .sec03_slide .text .arrow {width: 130px;}
    /* 1024 end */
} 

@media screen and (max-width:850px) {
    .section02 .text1 {font-size: 1.3778rem;}
    .section02 .tag {font-size: 11px; padding: 6px 8px; border-radius: 5px; margin-bottom: 1.2111rem;}

}
@media screen and (max-width:767px) {
    .main_contents svg {max-width: 90vw;}
    .main_contents strong br , .main_contents p br {display: none;}
    .buttons .btn1 {width: 190px;}
    .buttons .btn2 {width: 140px;}
    .section02 .bold1 {font-size: 1.2556rem;}
    .section02 li svg{max-height: 48px;}
    .section02_content.width_1580{padding-top: 70px; padding-bottom: 100px;}
    section h4 {font-size: 2.7111rem;}
    .section02 ul{flex-wrap: wrap;}
    .section02 li {flex-basis: 100%; height: 170px;}
    .section04 {margin: 40px; border-radius: 50px;}
    /* 767 end */
} 
@media screen and (max-width:640px) {

    .section02 li svg {max-height: 60px;}
    .section02 .text1 {font-size:1.7778rem;}
    .section02 .text2 {font-size: 1.1rem;}
    .section02.aos-animate {margin: 15px;}
    .section03 {padding-top: 50px;}
    .sec03_slide {margin-bottom: 90px;}
    .main_video video {transform: scale(1.8);}

    /* 640 end */
} 
@media screen and (max-width:550px) {
    .section02 .bold1 br , .section02 .bold2 br {display: none;}
    .sec03_slide::before, .sec03_slide::after {width: 70px;}

    /* 550 end */
} 
@media screen and (max-width:480px) {
    .main_contents svg {max-width: 85vw; margin-bottom: 0.6889rem;}
    .main_contents strong {font-size: 1.3667rem;}
    .buttons .btn1 {width: 170px;}
    .buttons .btn2 {width: 130px;}
    .main_contents .buttons {gap: 5px;}
    .sec03_slide .swiper-pagination.swiper-pagination-progressbar {width: 170px;}
    .sec03_slide .swiper-buttons{gap: 15px;}
    .sec03_slide .text {height: 110px;}
    .sec03_slide::before, .sec03_slide::after {width: 30px;}
    section h4 {font-size: 2.5111rem;}
    .section02 li svg {max-height: 50px; right: 12px; bottom: 15px}
    .section02 .tag {padding: 6px; border-radius: 5px;}
    .main_contents {padding-top: 30px; padding-left: 20px; padding-right: 20px;}
    .section04 {margin: 30px; border-radius: 30px;}

    /* 480 end */
} 
@media screen and (max-width:400px) {
    .sec03_slide .swiper-paging{font-size: 13px;}
    .sec03_slide .swiper-pagination.swiper-pagination-progressbar{width: 150px;}
    .sec03_slide .text{padding: 15px;}
    .sec03_slide .text .arrow{width: 110px;}

    /* 400 end */
}