@charset "utf-8";
@import url(font.css);


.header { position: absolute;left: 0;top: 0;z-index: 10000;width: 80%;}
.head-conts { padding: 85px 0 0 0px;display: flex;}
.h1-logo { width: 260px;height: 60px; background: url(../img/top-logo.png) center no-repeat;background-size: contain;text-indent: -99999px;float: left;}
.topmenu { padding-top: 25px;padding-left: 50px; width: 100%;}
.topmenu ul { padding-left: 10%;}
.topmenu ul li { float: left;}
.topmenu ul li a { color: #fff;font-size: 20px;font-family: 'NanumHuman';padding: 0 50px 0 0;float: left;}
.topmenu ul li a:hover { color: #cc0000;}
.topmenu ul li a span { color: #cc0000;font-size: 20px;font-weight: 600;}


/* Main */
#main { background: #000;height: 100%;}
#main .sectionZone {max-width: 1900px;margin: 0 auto;}
.main-V {position: relative; width: 100vw; height: 950px; background:transparent;z-index: 1000;}
.main-V1 {position: relative; width: 100vw; height: 100%; background:url('../img/viausl-1.png') right bottom no-repeat; background-size: cover;z-index: 10;}
.main-V2 {position: relative; width: 100vw; height: 100%; background:url('../img/viausl-2.png') right bottom no-repeat; background-size: cover;z-index: 10;}
.main-V3 {position: relative; width: 100vw; height: 100%; background:url('../img/viausl-3.png') right bottom no-repeat; background-size: cover;z-index: 10;}
.main-V .swiper-container { height: 100%;}
.left-barline { position: absolute; left: 0; top: 0; width: 4px; height: 140px;background: #cc0000; opacity: 0; transform-origin: bottom; transform: scaleY(0);animation-fill-mode: forwards;z-index: 10;
}

/*메인슬라이드 애니*/
.main-V .swiper-slide:not(.swiper-slide-active) [data-aos] { opacity: 0 !important; transform: translate3d(0,100px,0) !important; }
.main-V .swiper-slide.swiper-slide-active [data-aos].aos-animate { opacity: 1 !important; transform: translateZ(0) !important; }

.main-V .swiper-button-prev { background:url('../img/mv-left-arrow.png') right bottom no-repeat;  width: 20px;height: 40px;background-size: cover;}
.main-V .swiper-button-next { background:url('../img/mv-right-arrow.png') right bottom no-repeat;  width: 20px;height: 40px;background-size: cover;right: 25px;}

@keyframes leftBarlineUp {
  from {
    opacity: 0;
    transform: scaleY(0); /* 스케일Y를 0에서 시작 */
  }
  to {
    opacity: 1;
    transform: scaleY(1); /* 스케일Y를 1로 (원래 높이) */
  }
}

.top-barline {position: absolute;top: 0; left: 4px;width: calc(100% - 4px);height: 8px;display: flex; overflow: hidden;}
.top-left {position: relative; z-index: 2; width: calc(100% - 300px); background: linear-gradient(to right, #cc0000, #6b0203); transform-origin: left center; transform: scaleX(0);
animation-fill-mode: forwards; animation-timing-function: linear;}
.top-right { position: relative; z-index: 1; margin-left: -50px; width: 350px; background: linear-gradient(to right, #6b0203, #430000); transform-origin: left center; transform: scaleX(0); animation-fill-mode: forwards; animation-timing-function: linear;}
@keyframes topLeftExpand {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes topRightExpand {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.right-bar-container { position: absolute; top: 0; right: 0; width: 300px; height: 100px;z-index: 10;}
.right-bar-container a { display: block;width: 100%; height: 100%;}
.right-line-down { position: absolute; top: 0; right: 0; width: 6px; height: 100px; background: #430000; border-radius: 3px; transform-origin: top center; transform: scaleY(0); animation-fill-mode: forwards; animation-timing-function: ease;}
@keyframes rightLineDownAnim {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.right-line-left { position: absolute; top: 100px; right: 0; width: 300px; height: 6px; background: #430000; border-radius: 3px; transform-origin: right center; transform: scaleX(0); animation-fill-mode: forwards; animation-timing-function: ease;z-index: 100;}
@keyframes rightLineLeftAnim {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.right-line-up { position: absolute; top: 50px; right: 294px; width: 6px; height: 50px; background:linear-gradient(#FF0F0F, #430000); transform-origin: bottom center; transform: scaleY(0); animation-fill-mode: forwards; animation-timing-function: ease;border-radius: 7px;z-index: 101;}
@keyframes rightLineUpAnim {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.right-line-right {position: absolute; top: 50px; left: 0; width: 0; height: 6px; background-color: transparent; transform-origin: left center; animation-fill-mode: forwards;border-radius: 7px;z-index: 100;}
@keyframes extendRightAndColor {
  0% {
    width: 0;
    background-color: transparent;
  }
  100% {
    width: 50px;
    background-color: #FF0F0F;
  }
}

.contact-text { position: absolute; top: 50px; right: -150px; font-size: 1.5em;font-weight: bold; background: rgba(255,11,11,0.3); border-radius: 50px 0 0 0; opacity: 0; z-index: 1; animation-fill-mode: forwards; white-space: nowrap;width: 300px;height: 100px;display: flex; backdrop-filter: blur(5px);z-index: 1;}
.contact-text a { text-decoration: none; color: inherit; width: 100%;height: 100%;color: #fff;text-align: center;display: flex; justify-content: center; align-items:center;}

@keyframes blinkAndStay {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  80%  { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
}


.mainTxt-wrap { position: relative;padding: 25% 0 0 0;}
.mainTxt-wrap .mainTxt-ttl { color: #fff;font-size: 70px;font-weight: 700;}
.mainTxt-wrap .mainTxt-ttl p { display: inline-block;line-height: 100%;}
.mainTxt-wrap .mainTxt-ttl p span { color: #CC0000;}
.mainTxt-wrap .mainTxt-txt { color: #fff;margin-top: 15px;}
.mainTxt-wrap .mainTxt-txt p sup { font-size: 12px;}
.mainTxt-wrap .mainTxt-txt span { color: #fff;font-size: 24px;}
.mainTxt-wrap .mainTxt-txt span.eng { color: #fff;font-size: 24px;font-weight: 200;margin-left: 0px;}

.main-V2 .mv-txt:nth-child(1), .main-V2 .mv-txt:nth-child(2), .main-V2 .mv-txt:nth-child(4),
.main-V3 .mv-txt:nth-child(1), .main-V3 .mv-txt:nth-child(2) { float: left;}
.mv-txt { font-size: 24px;}
.mv-txt span { font-weight: 700;}
.txt-blank { padding: 15px 0;}

.video video { width: 100%;}



/* section */
.sectionZone { /*background: #000;*/ padding-top: 200px;}
.sectionZone::before { content: '';position: fixed; left: 0; top: 0; width: 100%; height: 0%; background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
  opacity: 0; transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out, background 0.5s ease-in-out; pointer-events: none; z-index: 99;}
.sectionZone::after { content: '';position: fixed; left: 0; bottom: 0; width: 100%; height: 0%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
  opacity: 0; transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out, background 0.5s ease-in-out; pointer-events: none; z-index: 99;}

/* === 스크롤 및 섹션 활성화 상태에 따라 ::before/::after의 스타일을 변경하는 규칙 === */
/* body에 scrolled 클래스가 추가되면 오버레이가 기본적으로 나타나게 합니다 (sec-one, sec-two에 해당) */
body.scrolled .sectionZone::before,
body.scrolled .sectionZone::after {height: 35%; opacity: 1;}

/* sec-one이 활성화될 때 (body에 sec-one-active 클래스가 있을 경우) */
body.scrolled.sec-one-active .sectionZone::before,
body.scrolled.sec-one-active .sectionZone::after { height: 35%; opacity: 1;}

/* sec-two가 활성화될 때 (body에 sec-two-active 클래스가 있을 경우) */
body.scrolled.sec-two-active .sectionZone::before,
body.scrolled.sec-two-active .sectionZone::after { height: 35%; opacity: 1;}

/* sec-three가 활성화될 때 (body에 sec-three-active 클래스가 있을 경우) */
/* 이 규칙이 위에 정의된 body.scrolled 규칙보다 구체적이고 순서상 뒤에 오면 우선 적용됩니다. */
body.scrolled.sec-three-active .sectionZone::before,
body.scrolled.sec-five-active .sectionZone::before,
body.scrolled.sec-data-active .sectionZone::before
{ height: 15%; opacity: 1; background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)); }
body.scrolled.sec-three-active .sectionZone::after,
body.scrolled.sec-five-active .sectionZone::after { height: 25%; opacity: 1; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));}

body.scrolled.sec-ten-active .sectionZone::before { content: ''; height: 0% !important; opacity: 0; background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));}
body.scrolled.sec-ten-active .sectionZone::after { content: ''; height: 0% !important; opacity: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));}

.display-flex { display: flex; align-items: center; justify-content: space-between;}
.Hightflex { min-height: 950px; width: 100%; height: 100%;}

/* sec-one */
.sec-one { width: 100%; position: relative;}
.section-container { width: 1300px; margin: 0 auto;}
.section-container.small-container { width: 1300px; margin: 0 auto;}
.sec-one .left { width: 50%; }
.sec-one .left span { font-size: 40px; color: #fff; font-weight: 700; display: block; }
.sec-one .left .sec-onetxt { font-size: 24px;margin-top: 15px;font-weight: 300;}
.sec-one .right { width: 50%; }
.sec-one .right.video { position: relative;}
.secone-shadowlf::before { content: '';position: absolute;left: 0;bottom: 0;width: 30%;height: 100%;background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));}
.secone-shadowlf::after { content: '';position: absolute;right: 0;bottom: 0;width: 30%;height: 100%;background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));}
.secone-shadowtb::before { content: '';position: absolute;left: 0;top: 0;width: 100%;height: 20%;background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));}
.secone-shadowtb::after { content: '';position: absolute;right: 0;bottom: 0;width: 100%;height: 20%;background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));}
.sec-one .right.video::before { content: '';position: absolute; left: 0;top: 0;width: 100%;height: 100%; background: radial-gradient(circle,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);}

/*.sec-one .right.video::after { content: '';position: absolute;left: 0;bottom: 0;width: 100%;height: 30%;background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));}

/* sec-two */
.sec-two { width: 100%; position: relative;}
.sec-two .left { width: 40%; }
.sec-two .left img { width: 100%;}
.sec-two .right { width: 60%; }
.sec-two .right p { font-size: 40px; color: #fff; font-weight: 700; display: block; letter-spacing: -1px;}

/* sec-three */
.sec-three { width:90%; margin: 0 auto; background: url(../img/sec-4-img-back.png) center no-repeat; height: 100%; background-size: cover; position: relative;opacity: 1; /* 초기 투명도 0% */
  transition: opacity 0.5s ease-in-out; /* 0.5초 동안 서서히 투명도 증가 */}
.sec-three .img img { width: 100%; }
.secthree-txtwrap { position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%); width: 100%;}
.secthree-txtwrap .secthree-ttl { color: #fff;text-align: center;font-size: 40px;font-weight: 800;}
.secthree-txtwrap .secthree-ttl p { display: block;}
.secthree-txtwrap .secthree-txt { color: #fff;text-align: center;font-size: 20px;font-weight: 300;padding-top: 10px;}
.secthree-txtwrap .secthree-txt span { display: block;}
.secthree-starwrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;max-height: 800px; height: 100%;}
.secthree-starwrap .center { position: absolute;left: 50%;top: 0;width: 150px;margin-left: -80px;text-align: center;}
.star-conts {display: flex;height: 100%;}
.star-conts .left { position: relative;width: 40%;height: 100%;margin-left: 10%;}
/*.star-conts .left span { color: #fff !important; font-weight: 300;letter-spacing: 0;padding-right: 12px;font-family: 'NanumHuman';}
.star-conts .left span::after { content: ''; background: #cc0000;width: 6px;height: 6px;border-radius: 100%;position: absolute;right: 0; top: 50%;margin-top: -3px;}
.star-conts .left span::before { content: ''; background: none;} */
.star-conts .right { position: relative;width: 50%; height: 100%;}
.star-conts p { color: #fff !important;position: relative;font-weight: 300;letter-spacing: 0;padding-left: 12px;font-family: 'NanumHuman';}
.star-conts p span { content: ''; background: #cc0000;width: 6px;height: 6px;border-radius: 6px;position: absolute;left: 0; top: 50%;margin-top: -3px;display: inline-block;}
.star-conts p::before { /*content: ''; background: #cc0000;width: 6px;height: 6px;border-radius: 100%;position: absolute;left: 0; top: 50%;margin-top: -3px;*/}
.secthree-starwrap .center .star-C1 { top: 50px;color: #fff !important;position: relative;font-weight: 300;letter-spacing: 0;padding-left: 12px;font-family: 'NanumHuman'; }
.secthree-starwrap .center .star-C1::before { content: ''; background: #cc0000;width: 6px;height: 6px;border-radius: 100%;position: absolute;left: 0; top: 50%;margin-top: -3px;}
.star-conts .star-L1 { position: absolute; left: 0%; top: 40%; }
.star-conts .star-L2 { position: absolute; left: 23%; top: 25%; }
.star-conts .star-L3 { position: absolute; left: 10%; top: 75%; }
.star-conts .star-L4 { position: absolute; left: 58%; top: 28%; }
.star-conts .star-L5 { position: absolute; left: 40%; top: 60%; }
.star-conts .star-L6 { position: absolute; left: 65%; top: 80%; opacity: 1 !important;}
.star-conts .star-R1 { position: absolute; left: 30%; top: 15%; }
.star-conts .star-R2 { position: absolute; left: 35%; top: 75%; }
.star-conts .star-R3 { position: absolute; left: 65%; top: 35%; }
.star-conts .star-R4 { position: absolute; left: 55%; top: 60%; opacity: 1 !important;}
.star-conts .star-L5 .star-2p,
.star-conts .star-L2 .star-2p,
.star-conts .star-L6 .star-1p,
.star-conts .star-L4 .star-1p,
.star-conts .star-L1 .star-3p,
.star-conts .star-L3 .star-1p { right: 0; left: auto; margin-right: -12px;}

@keyframes star {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.5;
    scale: 1.1;
    background: red;
  }
  100% {
    opacity: 1;
background: red;
  }
}

@keyframes star-shadow {
  0% {
    opacity: 0.2;
    box-shadow: 0 0 0 1rem rgba(204, 0, 0, 0.3),
                0 0 0 1rem rgba(204, 0, 0, 0.2),
                0 0 0 0.5rem rgba(204, 0, 0, 0.1);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.7;
  }
}

@keyframes star-txt {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
    scale: 1.1;
  }
  100% {
    opacity: 1;
  }
}
.star-1p { animation: star 1s infinite; /* 1초 간격으로 무한 반복 */}
.star-2p { animation: star 1.5s infinite; /* 1초 간격으로 무한 반복 */}
.star-3p { animation: star 2s infinite; /* 1초 간격으로 무한 반복 */}
.star-4p { animation: star 2.5s infinite; /* 1초 간격으로 무한 반복 */}
.star-txt { animation: star-txt 3s infinite; /* 1초 간격으로 무한 반복 */}
.star-shadow { animation: star-shadow 1.5s infinite; /* 1초 간격으로 무한 반복 */ border-radius: 100%;}

/* sec-four */
.sec-four { width: 100%; position: relative;}
.sec-four .left { width: 50%; }
.sec-four .left span { font-size: 40px; color: #fff; font-weight: 700; display: block; letter-spacing: -1px;}
.sec-four .right { width: 50%;position: relative;}
.sec-four .right img { padding-left: 15%;}
.sec-four .right::after { content: ''; position: absolute;left: 0;bottom: 0;background: url(../img/sec-4-line.png) left bottom no-repeat;width: 100%;min-height: 300px;}

/* sec-five */
.sec-five { width: 100%;height: 100vh; overflow: hidden; position: relative;background: url(../img/visual-5back.png) center top no-repeat; height: 100%; background-size: cover;}
.sec-five::before { content: ''; position: absolute;left: 0;top: 0; width: 100%;height: 20%;background:linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.0));z-index: 1;}
.sec-five::after { content: ''; position: absolute;left: 0;bottom: 0; width: 100%;height: 20%;background:linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0.0));z-index: 1;}
.sec-five .left { width: 100%; }
.sec-five .left .five-ttl { font-size: 40px; color: #fff; font-weight: 700; display: block;padding-bottom: 10px;}
.sec-five .left .five-txt { font-size: 24px;font-weight: 300;color: #fff; padding-top: 20px;line-height: 130%;}
span.redtxt { color: #CC0000 !important;font-size: 24px;font-weight: 700;color: #fff;}
.sec-five .secfive-black { position: relative;}
.sec-five .secfive-black::before { content: ''; position: absolute;left: 0;top: 0; width: 100%; height: 100%;background: rgba(0, 0, 0, 0.2);}
.secfive-blackLeft { position: absolute;left: 0;top: 0;width: 60%; height: 100%;background:linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.0));z-index: 0;max-width: 1900px;}


/* sec-six */
.sec-six { width: 100%; position: relative;padding: 15% 0;}
.sec-six .display-flex { display: table;width: 100%;text-align: center;}
.sec-six .display-flex .Hightflex { display: table-cell;vertical-align: middle;height: 850px;}
.sec-six .left { width: 100%;text-align: center;}
.sec-six .left .six-ttl { font-size: 50px; color: #fff; font-weight: 600; display: block;padding-bottom: 0;}
.sec-six .left .six-txt { font-size: 24px; color: #fff; font-weight: 500; display: block;}
.sec-six .right { width: 100%; text-align: center;position: relative;padding-top: 300px;/* min-height: 500px;*/}
.sec-six .right ul li span { color: #fff;font-size: 18px;text-align: center;}
.sec-ic-s1 { position: absolute;  left: 50%;  top: 60%;  transform: translate(-50%, -50%); margin-top: -150px;z-index: 40;}
.sec-ic-s2 { position: absolute;  left: 50%;  top: 60%;  transform: translate(-50%, -50%); margin-top: -100px;z-index: 30;}
.sec-ic-s3 { position: absolute;  left: 50%;  top: 60%;  transform: translate(-50%, -50%); margin-top: -50px;z-index: 20;}
.sec-ic-s4 { position: absolute;  left: 50%;  top: 60%;  transform: translate(-50%, -50%); margin-top: 0px;z-index: 10;}
.sec-ic-s1 .txt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-top: 0px;z-index: 30;}
.sec-ic-s2 .txt, .sec-ic-s3 .txt, .sec-ic-s4 .txt {position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); margin-top: 0px;z-index: 30;}
.sec-ic-left {position: absolute; right: 55%; top: 38%;}
.sec-ic-right {position: absolute; left: 90%; top: 40%;}

.process-wrap { position: relative;width: 1000px;margin: 0 auto;}
.process-conts { display: flex;flex-wrap: wrap;position: relative;z-index: 10;padding: 0 70px 0 25px;}
.process-conts .process-step { width: 16.66%;position: relative;}

.process-conts .process-step:nth-child(even) .process-img { position: absolute; left: 50%; bottom: -60px; transform: translate(-50%, 0%);} /* 짝수 번째 */
.process-conts .process-step:nth-child(odd) .process-img { position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 0%);} /* 홀수 번째 */

.process-conts .process-step .process-img { display: inline-block;width: 100%;}
.process-conts .process-step .process-img img { width: 95%;}
.process-conts .process-step .process-txt { color: #fff;position: absolute; left: 50%; top: 32px; transform: translate(-50%, -50%);width: 60px; margin-left: 0px;}
.process-bar { position: absolute;left: 120px; bottom: 0;z-index: 1;}


/* sec-seven */
.sec-seven { width: 100%; position: relative;background: url(../img/sec-7-img.png) center top no-repeat; height: 100%; background-size: cover;}
.sec-seven::before { content: ''; position: absolute;left: 0;top: 0; width: 100%;height: 30%;background:linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.0));z-index: 1;}
.sec-seven-wrap { padding: 0 0;}
.sec-seven .left { width: 100%;height: 100%; }
.sec-seven .left .seven-ttl { font-size: 2.8rem; color: #CC0000; font-weight: 800; display: block;padding-bottom: 0;padding-top: 100px;}
.sec-seven .left .seven-txt { font-size: 2.6rem; color: #fff; font-weight: 600; display: block;}
.sec-seven .right .seven-txt { font-size: 1.3rem; color: #fff; font-weight: 400; display: block;line-height: 150%;}
.sec-seven .right { /*width: 50%;*/height: 100%; text-align: left;}
.true-center {text-align: center;color: #fff;font-size: 30px;}
.sec-seven .display-flex { min-height:550px;}
.true-center-eng {text-align: center;color: rgba(255,255,255,0.5);font-size: 1.4rem;padding-top: 5%;}

/*생애주기*/
.sec-eight { width: 100%; position: relative;background: url(../img/plus-back.png) center top no-repeat; height: 100%; background-size: cover;z-index: 1;margin: 10% 0 0 0;}
body.scrolled.sec-eight-active .sectionZone::after { height: 15%; opacity: 1; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));}
.sec-eight::before { content: ''; position: absolute;left: 0;top: -50px;width: 0;height: 0;border-left: 0px solid transparent; border-right: 65px solid transparent; border-bottom: 50px solid #AB0E0E;}
.sec-eight::after { content: ''; position: absolute;right: 0;bottom: -50px;width: 0;height: 0;border-left: 59px solid transparent; border-right: 0px solid transparent; border-top: 50px solid #9f0b0b;}
.sec-eight .display-flex { min-height: 570px;}
.eight-txt { color: #fff;position: relative;z-index: 100;text-align: center;width: 100%;}
.eight-txt p span { font-size: 40px;line-height: 130%;font-weight: 600;}

/*생애주기*/
.sec-nine { position: relative;background: #fdfdfc;padding: 15% 0;}
body.scrolled.sec-nine-active .sectionZone::before { height: 25%; opacity: 1; background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));}
body.scrolled.sec-nine-active .sectionZone::after { height: 25%; opacity: 1; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));}
.sec-nine .left { width: 50%;}
.sec-nine .left .nine-ttl { font-size: 40px;color: #000;font-weight: 800;}
.sec-nine .left .nine-txt { font-size: 24px;color: #000;font-weight: 500;padding-top: 20px;}
.sec-nine .right { width: 50%;}
.sec-nine .right video { width: 100%;float: right;}

/*Wrok*/
.sec-ten { position: relative;background: linear-gradient(to right, #210A0A, #710404, #2F0101, #000); padding: 0 0;}
.sec-ten::before { content: ''; position: absolute;left: 0;top: -50px;width: 0;height: 0;border-left: 0px solid transparent; border-right: 65px solid transparent; border-bottom: 50px solid #250a0a;}
.sec-ten::after { content: ''; position: absolute;right: 0;bottom: -50px;width: 0;height: 0;border-left: 59px solid transparent; border-right: 0px solid transparent; border-top: 50px solid #020000;}
.secten-top { padding: 0 50px;}
.secten-wrap { position: relative; padding: 0 50px;}
.secten-wrap > ul {display: flex;flex-wrap: wrap;gap: 50px;}
.secten-wrap > ul > li { padding: 10px 0 10px;box-sizing: border-box; flex: 0 0 calc((100% - 2 * 50px) / 3);}
.secten-wrap .secten-cont { position: relative;box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);}
.secten-wrap .secten-cont .box { position: absolute; left: 50%;  top: 30px; transform: translate(-50%, -0%); z-index: 100;width: 100%;}
.secten-wrap .secten-cont .box .ttl { color: #fff;text-align: center;font-size: 20px;font-weight: 400;}
.secten-wrap .secten-cont .box .txt { color: #fff;text-align: center;font-size: 16px;padding-top: 5px;font-weight: 300;}
.secten-wrap .secten-cont .img img { width: 100%;position: relative;}
.secten-wrap .secten-cont .img.img-ten4::before { content: ''; position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(98, 30, 75, 0.6);z-index: 10;}
.secten-wrap .secten-cont .img::before { content: ''; position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 10;}
.secten-wrap .secten-cont .img:hover { background: rgba(0, 0, 0, 0.8);width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 1000;}

.secten-wrap .secten-cont .tag { position: absolute;left: 10px;bottom: 30px;width: calc(100% - 20px);height: 50px;background: rgba(0, 0, 0, 0.2);border: 1px solid rgba(0, 0, 0, 0.25);border-radius: 50px;text-align: center;display: table;z-index: 10;padding: 0 5px;}
.secten-wrap .secten-cont .tag p { font-size: 15px;color: rgba(255, 255, 255, 0.6);display: table-cell;vertical-align: middle;font-weight: 200;}
.secten-wrap .secten-cont .tag p span { display: inline-block !important;}
.secten-ttl { color: #fff;font-size: 40px;font-weight: 600; padding-top: 10%;}
.secten-ttl span { color: #fff;font-size: 20px;font-weight: 300; }
.secten-worktxt { background: #000;border: 1px solid #fff;border-radius: 5px;width: 125px;height: 50px;line-height: 50px;font-size: 20px;text-align: center;color: #fff;margin: 15px 0 10px;}
/*hover*/
.imgdown { position: relative; width: 100%; height: 100%;cursor: pointer;}
.imgdown img { width: 100%;height: 100%;position: relative;}
.imgD-3step::before { content: ''; position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.2) !important;z-index: 10;}
.imgD-4step::before { content: ''; position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(98, 30, 75, 0.6) !important;z-index: 10;}
.imgdown::before { content: ''; position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 10;}
.image { display: block; width: 100%; height: 100%;}
.imgover { position: absolute; bottom: 0; left: 0; right: 0; background:rgba(0,0,0,0.7); overflow: hidden; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0);
transform: scale(0); -webkit-transition: .3s ease; transition: .3s ease;}
.imgD-1step .imgover { position: absolute; bottom: 0; left: 0; right: 0; background:rgba(81,95,111,0.8); overflow: hidden; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0);transform: scale(0); -webkit-transition: .3s ease; transition: .3s ease;}
.imgD-2step .imgover { position: absolute; bottom: 0; left: 0; right: 0; background:rgba(164,88,0,0.8); overflow: hidden; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0);transform: scale(0); -webkit-transition: .3s ease; transition: .3s ease;}
.imgD-3step .imgover { position: absolute; bottom: 0; left: 0; right: 0; background:rgba(0,0,0,0.6); overflow: hidden; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0);transform: scale(0); -webkit-transition: .3s ease; transition: .3s ease;}
.imgD-4step .imgover { position: absolute; bottom: 0; left: 0; right: 0; background:rgba(0,0,0,0.8); overflow: hidden; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0);transform: scale(0); -webkit-transition: .3s ease; transition: .3s ease;}
.imgD-5step .imgover { position: absolute; bottom: 0; left: 0; right: 0; background:rgba(39,123,202,0.8); overflow: hidden; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0);transform: scale(0); -webkit-transition: .3s ease; transition: .3s ease;}
.imgD-6step .imgover { position: absolute; bottom: 0; left: 0; right: 0; background:rgba(10,94,32,0.8); overflow: hidden; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0);transform: scale(0); -webkit-transition: .3s ease; transition: .3s ease;}
.imgdown:hover .imgover { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
.imgdown:hover .tag { background: rgba(0, 0, 0, 0.9); -webkit-transform: scale(1); -ms-transform: scale(1);transform: scale(1); -webkit-transition: .3s ease; transition: .3s ease;}
.imgdown:hover .tag span { color: rgba(255, 255, 255, 0.9);}





/* 파트너사 */
.parnter { text-align: center;padding: 300px 7% 10%;}
.parnter-ttl { text-align: center;color: #fff;font-size: 40px;}
.parnter-logos { display: flex;justify-content: space-between; align-items: center;padding-top: 100px;}
.parnter-logos span img { width: 85%;}
.sec-whatsnews .tac { color: #fff;}
.sec-whatsnews .whatsnews-link { display: table;width: 220px;height: 85px;margin: 50px auto;}
.sec-whatsnews .whatsnews-link a { color: #fff;border-radius: 20px;background:linear-gradient(to right, #FF0B0B, #9E0606, #6C0303, #430000);margin: 0 auto;display: table-cell;vertical-align: middle;font-size: 26px;}
.sec-whatsnews .whatsnews-link a:hover {background:linear-gradient(to left, #FF0B0B, #9E0606, #6C0303, #430000); }
.whatsnews-title { font-size: 60px;font-weight: 800;}
.whatsnews-txt { font-size: 24px;font-weight: 500;padding: 5% 0 6%;}

.footer { clear: both;background: rgba(11, 11, 11, 0.5);padding-top: 50px;}
.footerlogo-img { margin-bottom: 5px;}
.footerlogo-img img { width: 150px;}
.footer .display-flex {justify-content: flex-start; }
.footer .display-flex li:first-child { padding-right: 30px;}
.footer .section-container { display: flex;position: relative;}
.footer .section-container .left { width: 50%;}
.footer .section-container .left .left-txt span { display: block;}
.footer .section-container .left p:nth-child(1), .footer .section-container .right p:nth-child(1) { font-size: 17px;color: #cc0000;font-weight: 700;line-height: 150%;}
.footer .section-container .left p:nth-child(2) { color: #fff;color: rgba(255, 255, 255, 0.7);font-size: 15px;}
.footer .section-container .right { width: 50%;padding-left: 15%;}
.footer .section-container .right ul li { color: rgba(255, 255, 255, 0.7);font-size: 15px;line-height: 130%;font-weight: 200;position: relative;}
.footer .section-container .right .add-info { clear: both;}
.footer .section-container .right .address {color: rgba(255, 255, 255, 0.7);font-size: 15px;line-height: 130%;position: relative;padding-left: 25px;}
.footer .section-container .right .address::before { content: ''; position: absolute;left: 0;top: 0;background: url(../img/map-ic.png) center no-repeat;width: 20px;height: 20px;}
.tel-ic, .fax-ic, .cell-ic, .mail-ic { padding-left: 25px;}
.tel-ic::before { content: ''; position: absolute;left: 0;top: 0;background: url(../img/tel-ic.png) center no-repeat;width: 20px;height: 20px;}
.fax-ic::before { content: ''; position: absolute;left: 0;top: 0;background: url(../img/fax-ic.png) center no-repeat;width: 20px;height: 20px;}
.cell-ic::before { content: ''; position: absolute;left: 0;top: 0;background: url(../img/phone-ic.png) center no-repeat;width: 20px;height: 20px;}
.mail-ic::before { content: ''; position: absolute;left: 0;top: 0;background: url(../img/mail-ic.png) center no-repeat;width: 20px;height: 20px;}
.footer-add { height: 50px;text-align: center;width: 100%;clear: both;border-top: 1px solid rgba(255,255,255,0.1);display: table;margin-top: 60px;}
.footer-add span { color: rgba(255, 255, 255, 0.5);display: table-cell;vertical-align: middle;font-weight: 200;}
body.scrolled.footer-active .sectionZone::after { height: 25%; opacity: 1; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.0));}



.sec-data { clear: both;position: relative;}
.sec-data::before { content: '';position: absolute;  left: 50%;  top: 45%;  transform: translate(-50%, -50%); width: 56px;height: 56px;background: url(../img/plus-icon.png) center no-repeat; display: inline-block; /* 인라인 이미지를 블록 레벨처럼 */  transform-origin: 50% 50%; /* 회전 중심을 이미지 정중앙으로 설정 */
  animation: spin 3s linear infinite; /* 4초 동안 선형으로 무한 회전 */margin-left: -27px;}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.sec-data .secdata-mainttl { font-size: 40px; text-align: center;color: #fff; font-weight: 600;padding: 160px 0 100px;}
.sec-data .left { text-align: center;color: #fff;width: 50%;padding-right: 8%;}
.sec-data .right { text-align: center;color: #fff;width: 50%;padding-left: 8%;}
.sec-data .left ul li { float: left;font-size: 16px;font-weight: 300;line-height: 150%;padding: 0 15px;font-family: 'NanumHuman';}
.sec-data .right ul li { float: left;font-size: 16px;font-weight: 300;line-height: 150%;padding: 0 8px;font-family: 'NanumHuman';}
.secdata-top { padding-bottom: 50px;}
.secdata-ttl { font-size: 34px;font-weight: 700;line-height: 150%;padding: 0 15px 5px;font-family: 'NanumHuman';}
.secdata-txt { font-size: 34px;font-weight: 700;line-height: 150%;padding: 0 15px 40px;font-family: 'NanumHuman';}
.secdata-kor { font-size: 20px;font-weight: 200;}
.secdata-top.secdata-ic1::before { content: '';display: inline-block;width: 75px;height: 75px;background: url(../img/plus-icon-1.png) center no-repeat;background-size: contain;}
.secdata-top.secdata-ic2::before { content: '';display: inline-block;width: 75px;height: 75px;background: url(../img/plus-icon-2.png) center no-repeat;background-size: contain;}
.secdata-conts { clear: both; padding-top: 30px;}
.secdata-conts ul { border-top: 1px solid rgba(255, 255, 255, 0.5); padding-top: 15px;overflow: hidden;display: flex; align-items: center; justify-content: center;flex-wrap: wrap;}
.sec-data .left .secdata-top, .sec-data .left .secdata-conts p, .sec-data .left .secdata-conts ul { padding-left: 20%;}
.sec-data .right .secdata-top, .sec-data .right .secdata-conts p, .sec-data .right .secdata-conts ul { padding-right: 20%;}



/*로그인*/
.sub-wrap { height: 100%; position: relative;background: #000;}
.sub-head { position: relative;height: 140px;}
.login-wrap { position: absolute;width: 400px;height: calc(100% - 400px);left: 50%;margin-left: -200px; top: 140px; display: table;}
.login-conts { width: 100%;margin: 0 auto; display: table-cell;vertical-align: middle;}
.ic { background: url(../img/login-ic.png) center no-repeat;width: 95px;height: 120px;margin: 0 auto 15px;position: relative;}
.ic span { background: rgba(255,0,0,0.45);color: #fff;font-size: 20px;width: 180px;height: 37px;line-height: 35px;display: inline-block; border-radius: 30px;border:1px solid rgba(255,0,0,0.70);text-align: center;font-weight: 600;font-family: 'NanumHuman';position: absolute; left: 50%; bottom: 7px;}
.sub-wrap .footer { position: absolute;left: 0;bottom: 0;width: 100%;}
.input-conts { clear: both;}
.input-conts li { margin: 7px 0;}
.input { width: 100%; height: 45px !important;background: rgba(255,0,0,0.2);border:1px solid rgba(255,0,0,8);display: inline-block;border-radius: 30px !important;color: #fff;}
.input::-webkit-input-placeholder { color: rgba(255,255,255,0.3);font-size: 20px;font-weight: 200;}
.input:-moz-placeholder { color: rgba(255,255,255,0.3);font-size: 20px;font-weight: 200;}
.input::-moz-placeholder { color: rgba(255,255,255,0.3);font-size: 20px;font-weight: 200;}
.input:-ms-input-placeholder { color: rgba(255,255,255,0.3);font-size: 20px;font-weight: 200;}
.input::placeholder { color: rgba(255,255,255,0.3);font-size: 20px;font-weight: 200;}

.input-login { clear: both;margin-top: 15px;}
.input-login a { background: linear-gradient(to right, #FF0B0B, #9E0606, #6C0303, #430000);width: 100%;height: 60px;line-height:60px; display: block;text-align: center;color: #fff;font-size: 26px;font-weight: 600;font-family: 'NanumHuman';border-radius: 30px !important;}


/*대시보드*/
.dashboard-wrap { width: 100%;height: 100%;}
.dashboard-wrap .header { left: 0;}
.dashboard-wrap .section-container { width: 100%;}
.dash-member { color: #fff;background: #6C0303;border-radius: 30px;padding: 3px 5px;margin-left: 15px; min-width: 150px;height: 40px; margin-top: 20px;text-align: center;font-size: 17px;font-weight: 300;}
.dash-member span { font-size: 17px;font-weight: 600;padding-right: 5px;position: relative;line-height: 35px;}
.dash-member span::before { content: '';display: inline-block;background: url(../img/member-ic.png) left center no-repeat;width: 25px;height: 25px;background-size: cover;vertical-align: middle;}
.dashboard-wrap .h1-logo { width: 180px;}
.h1-logo a { display: block;height: 100%;}
.dashboard-wrap .h1-txt { color: #fff;padding: 30px 0 0 20px;}
.dashboard-conts { position: relative;height: calc(100% - 110px);padding: 0 15px 10px;}
.dashboard-wrap .footer {padding-top: 0;}
.dashboard-wrap .footer-add { margin-top: 0;height: 40px;}
.dashboard-ttl { font-size: 20px;color: #fff;position: relative; padding: 0 0 0 45px;height: 40px;line-height: 40px;}
.dashboard-ttl::before { content: ''; position: absolute;left: 10px;top: 4px;background: url(../img/dashboard-bullet.png) left center no-repeat;width: 30px;height: 30px;background-size: contain;}
.dashboard-layout { width: 100%;height: calc(100% - 40px);}
.dashboard-main { display: flex;height: 70%;}
.dashboard-layout .left { width: 25%; height: 100%; background: #fff;}
.dashboard-layout .left.dashboard-box { margin-right: 10px;}
.dashboard-layout .right { width: 75%; height: 100%;}
.dashboard-layout .right-3col { flex: 1 1 calc(100% / 3);gap: 0px; margin-right: 10px; height: 100%;}
.right-3col:last-child { margin-right: 0;}
.dashboard-box { background: #fff;border-radius: 10px;padding: 10px;}
.dashboard-wrap .sub-head { height: 80px;}
.dashboard-wrap .sub-head .head-conts { padding-top: 13px;padding-left: 33px;}

.dashboard-bottom { height: calc(30% - 10px);display: flex;margin-top: 10px;}

/* dashboard-main */
.dashboard-view { width: 100%;height: 100%;}
.dashboard-view .dashboard-box { height: 100%;text-align: center;}
.dashboard-view .dashboard-box .img { height: 100%;}
.dashboard-view .dashboard-box .img img { width: auto;height: 100%;}

/* TopBtn */
.TopBtn { position: fixed;right: 80px;bottom: 125px;z-index: 100000;}
.TopBtn a { width: 55px;height: 55px;border-radius: 100%;background: rgba(210, 6, 6, 0.6) url(../img/footer-arrow.png) center 10px no-repeat;color: #fff;display: block;text-align: center;}
.TopBtn a span { display: inline-block;padding-top: 27px;}



/* 애니메이션 키프레임은 기존과 동일 */
@keyframes fadeInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 기본 상태 (애니메이션 비활성) - 화면 밖으로 나갔을 때 원래대로 되돌리는 용도 */
.mainTxt-wrap .mainTxt-ttl,
.mainTxt-wrap .mainTxt-txt {
    opacity: 0;
    transform: translateY(20px); /* 초기 위치로 리셋 */
    /* 애니메이션이 빠르게 다시 재생되도록 transition을 0으로 설정하거나 제거 */
    transition: none;
}


/* 'animate-visible' 클래스가 요소에 추가되었을 때 애니메이션 실행 */
.mainTxt-wrap .mainTxt-ttl.animate-visible {
    animation: fadeInFromBottom 0.7s ease-out forwards;
    animation-delay: 0s; /* 첫 번째 텍스트 애니메이션 딜레이 */
}

.mainTxt-wrap .mainTxt-txt.animate-visible {
    animation: fadeInFromBottom 0.7s ease-out forwards;
    animation-delay: 1.2s; /* 두 번째 텍스트 애니메이션 딜레이 */
}





/****************************************************************************************/
/****************************************************************************************/
/*Media Query*/
/****************************************************************************************/
/****************************************************************************************/


@media (min-width:1921px) {	

  .secfive-imgback::before { content: ''; position: absolute;left: 0;top: 0; width: 20%; height: 100%;background:linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0.0));}
  .secfive-imgback::after { content: ''; position: absolute;right: 0;top: 0; width: 15%; height: 100%;background:linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0.0));}

}


@media (max-width:1400px) {	

  .header { left: 100px;}
  .mainTxt-wrap { padding-left: 90px;}
  .sec-data .right .secdata-top, .sec-data .right .secdata-conts p, .sec-data .right .secdata-conts ul { padding-right: 5%;}
  .sec-data .left .secdata-conts ul { padding-left: 50px;}
  .sec-data .right .secdata-conts ul { padding-right: 50px;}
  .sec-data .left ul li, .sec-data .right ul li { font-size: 14px;}
  .secdata-kor { font-size: 17px;}


  .main-V .swiper-button-next { right: 10px !important;}

}


@media (max-width:1301px) {	

  .section-container { width: 100%; margin: 0 auto;padding: 0 10px;}
  .section-container.small-container { width: 100%; margin: 0 auto;padding: 0 10px;}

  .sec-four .left span,
  .sec-two .right p,
  .secthree-txtwrap .secthree-ttl,
  .sec-one .left span { font-size: 30px;}

  .sec-one .left .sec-onetxt { font-size: 22px;}

}


@media (max-width:1200px) {	

  .secten-top { padding-left: 20px;padding-right: 20px;}
  .secten-wrap .secten-cont .box .ttl { font-size: 18px;}
  .secten-wrap .secten-cont .box .ttl span { display: block;}
  .secten-wrap .secten-cont .box .txt { font-size: 15px;}

  .secten-wrap { padding: 0 20px;}

  .eight-txt p span { font-size: 30px;}

  .sec-data .left ul li { padding: 0 10px;}
  .sec-data::before { content: '';top: 60%;}

}


@media (max-width:1024px) {	
	
  .dashboard-wrap { min-width: 1024px;}
  .dashboard-wrap .display-flex {flex-wrap: nowrap;}

  .right-bar-container { width: 200px;height: 55px;}
  .right-line-left { width: 200px;}
  .contact-text { width: 200px; right: -100px;}
  .right-line-down { height: 55px;}
  .right-line-up { height: 30px;right: 195px;}
  .contact-text a {padding-left: 15px;}

  .header { left: 20px;}
  .topmenu ul li a { padding: 0 20px 0 0;}
  .h1-logo { width: 220px;}


  .mainTxt-wrap { padding-left: 50px;}
  .mainTxt-wrap .mainTxt-ttl { font-size: 40px;}
  .mainTxt-wrap .mainTxt-txt span,
  .mainTxt-wrap .mainTxt-txt span.eng { font-size: 17px;}

  .main-V { height: 700px;}
  .mainTxt-wrap  { padding-top: 0;position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%); width: 100%; margin-top: -10px;}

  .sectionZone { padding-top: 50px;}
  .Hightflex { min-height: 500px;}

  .sec-one .left span,
  .sec-two .right p,
  .sec-four .left span,
  .sec-five .left .five-ttl,
  .sec-six .left .six-ttl,
  .sec-seven .left .seven-ttl,
  .sec-seven .left .seven-txt,
  .sec-data .secdata-mainttl,
  .eight-txt span,
  .sec-nine .left .nine-ttl,
  .secten-ttl,
  .parnter-ttl { font-size: 24px;padding-bottom: 0;}

  .parnter { padding: 150px 20px;}

  .sec-five .left .five-txt { padding-top: 10px;}

  .sec-one .left .sec-onetxt,
  .secthree-txtwrap .secthree-txt,
  .sec-five .left .five-txt,
  .secdata-kor,
  .sec-nine .left .nine-txt { font-size: 17px;}

  .true-center { font-size: 20px;}
  .secdata-ttl { font-size: 20px;}

  .section-container { padding: 0 !important;}

  .sec-one .left,
  .sec-four .left,
  .sec-five .left,
  .sec-nine .left { padding-left: 50px;}
  .sec-nine .right { padding-right: 50px;}

  .sec-three { width: 100%;}
  .secthree-txtwrap .secthree-ttl { font-size: 24px;}
  .star-conts .left { margin-left: 0px; width: 50%;}
  .star-conts p,
  .secthree-starwrap .center .star-C1 { font-size: 13px;}

  .sec-data .left ul li { font-size: 14px;}

  .sec-four .right::after {min-height: 250px;background-size: contain;}

  .sec-six .right img { width: 70%;}

  .sec-data .left .secdata-top, .sec-data .left .secdata-conts p, .sec-data .left .secdata-conts ul { padding-left: 20px; display: block;}
  .sec-data .right .secdata-top, .sec-data .right .secdata-conts p, .sec-data .right .secdata-conts ul { padding-right: 20px; display: block;}
  .sec-data .right ul li { font-size: 13px;}

  .sec-eight { height: 500px; background: #a81010 url(../img/plus-back.png) center bottom / contain no-repeat !important; width: 100%;}

  .sec-ten .secten-wrap { padding: 20px;}
  .secten-wrap > ul > li { flex: 0 0 calc((100% - 2 * 20px) / 3);padding: 0;}
  .secten-wrap > ul { gap: 20px;}
  .secten-wrap .secten-cont .box .ttl span { display: inline-block;}

  .secten-wrap .secten-cont .box .ttl { font-size: 17px;}
  .secten-wrap .secten-cont .box .txt { font-size: 14px;}


  .whatsnews-title { font-size: 40px;}
  .sec-whatsnews { padding: 200px 20px;}
  .whatsnews-txt { font-size: 20px;}

  .sec-whatsnews .whatsnews-link { height: 65px;margin: 20px auto;}
  .whatsnews-txt { padding: 50px 0;}
  .sec-whatsnews .whatsnews-link a { font-size: 20px;}

  .footer { padding: 30px 30px;}
  .footer .section-container .right { padding-left: 0;}
  
  .footer .section-container .left { width: 45%;}
  .footer .section-container .right { width: 55%;}
  .secten-wrap .secten-cont .tag { bottom: 15px;}
  .secten-wrap .secten-cont .box { top: 20px;}

  .sec-eight .display-flex { align-items: flex-start;}
  .sec-eight .display-flex .eight-txt { padding-top: 15%;}

  .sec-data { padding: 10% 0 15%;}
  .secdata-kor span { display: block;}

  .login-wrap { top: 155px;}
  .input-login a { font-size: 20px;height: 45px;line-height: 45px;}
  .input-conts .input { height: 40px !important;}
  .input-login { margin-top: 5px;}

  .process-wrap { width: 100%;}
  .sec-six .right img { width: 100%;}
  .process-conts .process-step .process-img img { width: 110%;}
  .process-bar { left: 50px;}
  .process-conts .process-step:nth-child(even) .process-img { bottom: -50px;}
  .process-conts .process-step .process-txt { top: 25px;margin-left: 3px;}
  .process-conts .process-step:nth-child(odd) .process-img { bottom: -5px;}

  /* TopBtn */
.TopBtn { position: fixed;right: 20px;bottom: 25px;z-index: 100000;}
.TopBtn a { width: 40px;height: 40px;border-radius: 100%;background: rgba(210, 6, 6, 0.6) url(../img/footer-arrow.png) center 5px no-repeat;color: #fff;display: block;text-align: center;font-size: 13px;background-size: 10px 10px;}
.TopBtn a span { padding-top: 17px;}

.footer-add { margin-top: 10px;height: 40px;}

.topmenu { padding-left:0;}
  
	
}



@media (max-width:768px) {	


  .sec-one .left,
  .sec-one .right,
  .sec-two .left,
  .sec-two .right,
  .sec-four .left,
  .sec-four .right,
  .sec-data .left,
  .sec-data .right,
  .sec-nine .left,
  .sec-nine .right { width: 100%;text-align: center;padding: 0 20px;}
  .sec-one .left, .sec-four .left, .sec-five .left, .sec-nine .left { padding: 0 20px 50px;}

  .secfive-blackLeft {width: 0;}


  .main-V { height: 750px;}
  .Hightflex { min-height: 750px;align-content: center; flex-wrap: wrap;}
  .display-flex { justify-content: space-between; align-content: center; flex-wrap: wrap;}

  
  .sec-one .left .sec-onetxt,
  .secthree-txtwrap .secthree-txt,
  .sec-five .left .five-txt,
  .secdata-kor,
  .sec-nine .left .nine-txt { font-size: 15px;}


  .sec-two .right { position: absolute;left: auto;top: 150px;height: 150px;}
  .sec-two .left { position: absolute;left: auto; padding-top: 0px;top: 250px;}

  .sec-three .img img { display: none;}
  .sec-three .img { background: url(../img/sec-4-img.png) center no-repeat;width: 100%;height: 600px;  background-size: cover;}
  .star-conts .left { width: 100%;left: 10%;}
  .star-conts .right { width: 100%;}
 .sec-four .right::after { min-height: 350px;}
  .star-conts .star-L1 { position: relative; left: 0; top: 10%; }
  .star-conts .star-L2 { position: relative; left: 0; top: 10%; }
  .star-conts .star-L3 { position: relative; left: 0; top: 10%; }
  .star-conts .star-L4 { position: relative; left: 0; top: 10%; }
  .star-conts .star-L5 { position: relative; left: 0; top: 10%; }
  .star-conts .star-L6 { position: relative; left: 0; top: 10%; opacity: 1 !important;}
  .star-conts .star-R1 { position: relative; left: 0; top: 10%; }
  .star-conts .star-R2 { position: relative; left: 0; top: 10%; }
  .star-conts .star-R3 { position: relative; left: 0; top: 10%; }
  .star-conts .star-R4 { position: relative; left: 0; top: 10%; opacity: 1 !important;}
  .star-conts .star-L5 .star-2p,
  .star-conts .star-L2 .star-2p,
  .star-conts .star-L6 .star-1p,
  .star-conts .star-L4 .star-1p,
  .star-conts .star-L1 .star-3p,
  .star-conts .star-L3 .star-1p { right: auto; left: 0; margin-right: 0px;}
  span.redtxt { font-size: 17px;}
  .secthree-starwrap .center { left: 10%; margin-left: 0;}
  .sec-seven .display-flex { min-height: 300px;}
  .true-center { font-size: 17px;}
  .true-center span { display: block;}

  .sec-data::before { content: '';top: 39%;width: 40px;height: 40px;margin-left: -20px;}
  .sec-data .right .secdata-top, .sec-data .right .secdata-conts p, .sec-data .right .secdata-conts ul { padding-right: 0;}

  .eight-txt { padding: 0 20px;}
  .eight-txt p span { display: block; font-size: 24px;}

  .sec-ten .secten-wrap { padding: 0 20px;}
  .sec-ten { padding: 100px 0;}

  .footer { padding: 10px 20px;}
  .footer .section-container { flex-wrap: wrap;}
  .footer .section-container .left { width: 100%;}
  .footer .section-container .right { width: 100%; padding-top: 10px;}
  .footer .section-container .right .display-flex { flex-wrap: wrap;}
  .secten-wrap .secten-cont .box { top: 15px;}
  .secten-wrap .secten-cont .box .ttl {font-size: 15px;}
  .secten-wrap .secten-cont .box .txt { color: rgba(255, 255, 255, 0.7);font-size: 13px;}
  .secten-wrap .secten-cont .box .txt span { display: block;}
  .secten-wrap .secten-cont .tag { bottom: 10px;}
  .secten-wrap .secten-cont .box .ttl span { display: inline-block;}
  .secten-wrap > ul > li { flex: 0 0 calc((100% - 1 * 15px) / 2);padding: 0;}
  .secten-wrap > ul { gap: 15px;}
  .secten-wrap .secten-cont .tag { height: 40px;}
  .secten-wrap .secten-cont .tag p span { display: block; font-size: 13px;line-height: 110%;}

  .secten-ttl span { display: block;}

  .sec-data .left .secdata-conts ul,
  .sec-data .right .secdata-conts ul { display: flex;}
  .sec-data .left { padding-bottom: 120px;position: relative;}
  .sec-data .left::before { content: ''; position: absolute; left: 50%;bottom: 40px; background: url(../img/plus-icon.png) center no-repeat;width: 40px; height: 40px; margin-left: -20px;transform-origin: 50% 50%;
    animation: spin 3s linear infinite;}
  .sec-data::before { content: '';background: none;}
  .secdata-conts { padding-top: 0;}
  .secdata-top { padding-bottom: 20px;}
  .sec-data .left .secdata-top, .sec-data .left .secdata-conts p, .sec-data .left .secdata-conts ul {padding-left: 0;}
  .secdata-txt { padding: 0 0 10px 0;}
  .secdata-mainttl { padding-bottom: 30px !important;}
  .sec-data { padding-bottom: 150px;}

  .sec-eight .display-flex .eight-txt { padding-top: 0;margin-top: -20%;}

  .sec-two .left img { width: 80%;}

  .head-conts {padding: 20px 0 0 0px;flex-wrap: wrap;}
  .topmenu ul { padding-left: 2px;}
  .topmenu { padding-top: 5px;}


  .right-bar-container { width: 137px;}
  .contact-text { width: 125px;right: -60px;border-radius: 25px 0 0 0;font-size: 17px;}
  .right-line-left { width: 125px;}
  .right-line-up { right: 121px;}

  .h1-logo { width: 180px;}
  
  .secthree-txtwrap .secthree-ttl { width: 98%;font-size: 22px;}

  .star-L1.star-txt,
  .star-R2.star-txt,
  .star-R3.star-txt { scale: 1 !important; opacity: 1 !important;}
  .secthree-starwrap .center .star-C1 { padding-left: 0;}

  .star-conts .star-L6 { left: 80%;top: 54px;}

  .secdata-txt { font-size: 26px;}

  .process-conts .process-step:nth-child(odd) .process-img { position: relative;width: 120px; height: 175px;z-index: 10;}
  .process-conts .process-step:nth-child(even) .process-img { position: relative;width: 120px; height: 175px;bottom: -60px;}
  .process-conts .process-step .process-img img { width: 95%;}
  .process-conts .process-step:nth-child(2),
  .process-conts .process-step:nth-child(4),
  .process-conts .process-step:nth-child(6) { z-index: 1000;}

  .mainTxt-wrap .mainTxt-ttl { font-size: 30px;}
  .mv-txt { font-size: 17px;}
  .main-V2 { background: url(../img/viausl-2.png) center bottom no-repeat; background-size: cover;}
  .main-V3 { background: url(../img/viausl-3.png) center bottom no-repeat; background-size: cover;}


  .footer .section-container .right .address,
  .footer .section-container .left p:nth-child(2) { font-size: 13px;}
  .ic { margin-bottom: 0;}
  .input-conts li { margin: 3px 0;}

  .footer .section-container .right .address,
  .tel-ic, .fax-ic, .cell-ic, .mail-ic { padding-left: 22px;}
  .footer .section-container .right .address::before,
  .tel-ic::before,
  .fax-ic::before,
  .cell-ic::before,
  .mail-ic::before { width: 20px; height: 15px; background-size: cover;}
  .right-line-right { left: 10px;}


  p.mv-txt,
  .mainTxt-wrap .mainTxt-txt span, .mainTxt-wrap .mainTxt-txt span.eng { font-size: 15px;letter-spacing: -0.5px;}
  .txt-blank { padding-top: 0;}
  .mainTxt-wrap .mainTxt-txt { margin-top: 10px;}
  
  .secthree-txtwrap .secthree-ttl p span { display: block;}

  p.six-txt span { display: block;}

  .main-V .swiper-button-prev { background:url('../img/mv-left-arrow.png') right bottom no-repeat;  width: 20px;height: 30px;background-size: contain;display: none;}
  .main-V .swiper-button-next { background:url('../img/mv-right-arrow.png') right bottom no-repeat;  width: 20px;height: 30px;background-size: contain;display: none;}


  
}



@media (max-width:480px) {	

  .mainTxt-wrap { padding-left: 45px; padding-right: 30px;}

  .topmenu ul li a span,
  .topmenu ul li a { font-size: 18px;}


  .right-line-up { width: 4px;right: 123px;}
  .right-line-right { height: 4px;}
  .right-line-left { height: 4px;}

  .sec-one .left span,
  .sec-two .right p,
  .sec-four .left span,
  .sec-five .left .five-ttl,
  .sec-six .left .six-ttl,
  .sec-seven .left .seven-ttl,
  .sec-seven .left .seven-txt,
  .sec-data .secdata-mainttl,
  .eight-txt span,
  .sec-nine .left .nine-ttl,
  .secten-ttl,
  .parnter-ttl { font-size: 20px;padding-bottom: 0;line-height: 150%;}
    .sec-two .right p span {font-size: 18px;}


  .mainTxt-wrap .mainTxt-txt span { display: block;margin-left: 0;}
  .mainTxt-wrap .mainTxt-txt span.eng { margin-left: 0;}

  .secten-wrap > ul > li { flex: 0 0 calc((100% - 0 * 50px) / 1);padding: 0;}
  .secten-wrap > ul { gap: 50px;}
  .secten-wrap .secten-cont .box .ttl { font-size: 20px;}
  .secten-wrap .secten-cont .box .txt { font-size: 17px;}

  .secten-wrap .secten-cont .box { top: 40px;}
  .secten-wrap .secten-cont .tag { bottom: 40px;}

  .eight-txt p span { font-size: 20px;}
  .sec-six .left .six-txt { font-size: 20px;}

  .header { width: 100%;}
  .contact-text { height: 60px;top: 38px;}
  .right-line-up { top: 30px;}
  .right-line-left { top: 60px;}
  .right-line-right { top: 30px;}

.secthree-txtwrap .secthree-ttl { font-size: 18px;}
  .secdata-txt { font-size: 20px;}
  .whatsnews-txt { font-size: 17px;}

  /* login */
  .login-wrap { width: 94%; margin: 0 auto;left: 3%;}
  .login-wrap .ic { height: 70px;background-size: contain;}
  .ic span { width: 140px;font-size: inherit;}

  p.mv-txt { display: block;}
  .mainTxt-wrap .mainTxt-txt span { display: inline;}
  .main-V2 .mv-txt:nth-child(1), .main-V2 .mv-txt:nth-child(2), .main-V2 .mv-txt:nth-child(4),
  .main-V3 .mv-txt:nth-child(1), .main-V3 .mv-txt:nth-child(2), .main-V3 .mv-txt:nth-child(4) { float: none;}
  .main-V1 .mainTxt-wrap .mainTxt-txt span.eng { display: block;}


}



@media (max-width:360px) {	

  .eight-txt p span { font-size: 18px;}
  .sec-four .left span { display: inline-block;}

  .h1-logo { width: 150px;}

    .sec-one .left span,
  .sec-two .right p,
  .sec-four .left span,
  .sec-five .left .five-ttl,
  .sec-six .left .six-ttl,
  .sec-seven .left .seven-ttl,
  .sec-seven .left .seven-txt,
  .sec-data .secdata-mainttl,
  .eight-txt span,
  .sec-nine .left .nine-ttl,
  .secten-ttl,
  .parnter-ttl { font-size: 15px;padding-bottom: 0;line-height: 150%;}

    .process-conts .process-step .process-img img { width: 85%;}

}




@media (max-width:1024px) {	

  @keyframes extendRightAndColor {
    0% {
      width: 0;
      background-color: transparent;
    }
    100% {
      width: 30px;
      background-color: #FF0F0F;
    }
  }
}



@media (max-width:768px) {	

  @keyframes extendRightAndColor {
    0% {
      width: 0;
      background-color: transparent;
    }
    100% {
      width: 20px;
      background-color: #FF0F0F;
    }
  }
}