@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}

.contain {position: relative; max-width:1720px; margin:0 auto; padding-right:var(--space-container); padding-left:var(--space-container);}

/* header */
#header {position:fixed; top:0; left:0; width:100%; transition:transform .7s; -webkit-transform:translateY(-100%); transform:translateY(-100%); z-index:100; color:#7e7e7e;}
html.loaded #header {-webkit-transform:translateY(0); transform:translateY(0);}

#header-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: clamp(30px, calc(50 / var(--inner) * 100vw), 50px);
    padding-left:var(--space-container); 
    padding-right:var(--space-container); 
    background-color: var(--color-primary);
}
#header-top ul {
    display: flex;
}
#header-top li {
    position: relative;
    margin-left: var(--space-20);
    padding-left: var(--space-20);
}
#header-top li:first-of-type {
    margin-left: 0;
    padding-left: 0;
}
#header-top li::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    content: "";
    display: block;
    width: 1px;
    height: 13px;
    background-color: #ffffff;
}
#header-top li:first-of-type::before {
    display: none;
}
#header-top li a {
    color: #ffffff;
    font-size: var(--font-size-16);
    font-weight: 500;
    letter-spacing: -0.02em;
}
#header-top li select {
    -webkit-appearance:none; /* 크롬 화살표 없애기 */
    -moz-appearance:none; /* 파이어폭스 화살표 없애기 */
    appearance:none; /* 화살표 없애기 */
    padding-right: var(--space-25);
    color: #ffffff;
    font-size: var(--font-size-16);
    font-weight: 500;
    letter-spacing: -0.02em;
    background: transparent url("/images/sub/icon-lang.svg") no-repeat right 0px center / 16px auto;
    border: 0;
}
#header-top li select:focus {
    outline: 0;
}
#header-top li select option {
    color: #2a2a2a;
}
#header-bot {
    display:flex; align-items:center; justify-content:space-between; height:var(--header-height); padding-left:var(--space-container); padding-right:var(--space-container); 
}
.sitelogo a {display:block; line-height:0;}
.sitelogo svg {width:auto; height:36px;}
.sitelogo .fill {fill:currentColor;}

.gnb > ul {display:flex; gap:var(--space-100);}
.gnb > ul > li > a {display:block; color:inherit; font-size:var(--font-size-24); font-weight:500; line-height:1.5em; letter-spacing:-.03em;}

#header.header-blue {color:#0052a3;}
#header.header-blue .btn-m-menu span {background:#0052a3;}
#header.header-white {color:#fff;}
#header.header-white .btn-m-menu span {background:#fff;}

/* for mobile */
.btn-m-menu {display:none; width:24px; height:24px;}
.btn-m-menu div {display:flex; flex-direction:column; justify-content:center; gap:6px; width:100%; height:100%;}
.btn-m-menu span {display:block; width:100%; height:2px; background:#c5c6c6;}

.mobile-navigation {display:none;position:fixed; top:0; right:0; width:280px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:rgba(0, 0, 0, 0.8); z-index:102;}
.mobile-navigation .nav-menu {
    display:flex; 
    align-items:center;  
    flex-direction: column; 
    width:100%;
    margin-top: 60px;
}

.mobile-navigation .nav-menu>ul>li>a {display:block; padding:16px 10px; color:#fff; font-size:22px; font-weight:600; line-height:1.3em; text-align:center;}
.mobile-navigation .mobile-utill {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--space-20);
    gap: var(--space-20) 0;
}
.mobile-navigation .mobile-utill li {
    color: var(--color-white);
    font-size: var(--font-size-20);
}
.mobile-navigation .mobile-utill li select {
    -webkit-appearance:none; /* 크롬 화살표 없애기 */
    -moz-appearance:none; /* 파이어폭스 화살표 없애기 */
    appearance:none; /* 화살표 없애기 */
    padding-right: var(--space-30);
    background: transparent url("/images/sub/icon-lang.svg") no-repeat right center / 12px auto;
    border: 0;
    color: var(--color-white);
    font-size: var(--font-size-20);
    font-weight: 500;
    letter-spacing: -0.02em;
}
.mobile-navigation .mobile-utill li select:focus {
    outline: 0;
}
.mobile-navigation .mobile-utill li select option {
    color: #2a2a2a;
}
.mobile-navigation .close {position:absolute; top:15px; right:15px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:2px; background:#fff; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}

.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}


/* main */
#main .section {overflow:hidden;}

.main-visual {position:relative; height:100dvh; overflow:hidden; background:#abacad;}
.main-visual video {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.main-visual .image {position:absolute; inset:0; width:100%; height:100%; overflow:hidden;}
.main-visual .image img {width:100%; height:100%; object-fit:cover;}
.main-visual .caption {position:absolute; bottom:0; left:0; width:100%; padding-left:var(--space-container); padding-right:var(--space-container); padding-bottom:var(--space-100); color:var(--color-primary);}
.main-visual .caption .txt1 {margin:0 0 .8em .5em; font-size:clamp(20px, calc(48 / var(--inner) * 100vw), 48px); line-height:1.3em; letter-spacing:-.03em;}
.main-visual .caption .txt2 {line-height:0;}
.main-visual .caption .txt2 img {width:clamp(220px, calc(700 / var(--inner) * 100vw), 700px);}

.main-product {position:relative; height:100dvh; overflow:hidden; background:url("/images/main/sec2.jpg") no-repeat center center / cover;}
.main-product .caption {position:absolute; bottom:0; left:0; width:100%; padding-left:var(--space-container); padding-right:var(--space-container); padding-bottom:var(--space-100); color:var(--color-white); display:flex; justify-content:flex-end;}
.main-product .caption .txt1 {margin-bottom:var(--space-20); font-size:var(--font-size-50); font-weight:700; line-height:1.3em; letter-spacing:-.03em; text-shadow: 0px 30px 24px rgba(5, 0, 1, 0.1);} 
.main-product .caption .txt2 {margin-bottom:var(--space-30); font-size:var(--font-size-33); font-weight:600; line-height:1.3em; letter-spacing:-.03em; text-shadow: 0px 30px 24px rgba(5, 0, 1, 0.1);}
.main-product .caption .btn {display:inline-block; padding:0px 20px 7px; border:3px solid var(--color-white); border-radius:60px; font-family:var(--futura); font-size:var(--font-size-35); font-weight:400; line-height:1em;}

.main-event {position:relative; height:100dvh; overflow:hidden; background:url("/images/main/sec-event.jpg?v=20260601") no-repeat center center / cover;}
.main-event .caption {position:absolute; bottom:0; left:0; width:100%; padding-left:var(--space-container); padding-right:var(--space-container); padding-bottom:var(--space-100); display:flex; justify-content:flex-end; color: #fff;}
.main-event .caption .txt1 {margin-bottom:var(--space-20); font-size:var(--font-size-50); font-weight:700; line-height:1.3em; letter-spacing:-.03em; text-shadow: 0px 30px 24px rgba(5, 0, 1, 0.1);} 
.main-event .caption .txt2 {margin-bottom:var(--space-30); font-size:var(--font-size-33); font-weight:600; line-height:1.3em; letter-spacing:-.03em; text-shadow: 0px 30px 24px rgba(5, 0, 1, 0.1);}
.main-event .caption .m-btn {background: transparent; color: #fff; font-size: var(--font-size-24); font-weight: 600; border: 2px solid #fff; aspect-ratio: 173 / 48; gap: 6px; font-family: inherit; padding-right: 23px;}
.main-event .caption .m-btn::after {background: url('/images/main/arrow.svg') no-repeat center / contain; aspect-ratio: 38 / 16;}
.main-event .caption .m-btn span {top: 0; letter-spacing: -1.5px;}

.m-btn {display:inline-flex; align-items:center; gap:8px; padding:6px 25px; background:rgba(255, 255, 255, 0.25); border-radius:60px; font-family:var(--futura); font-size:var(--font-size-35); font-weight:400; line-height:1em; color:#fff;}
.m-btn span {position:relative; top:-.1em;}
.m-btn:after {content:""; width:40px; aspect-ratio:38/15; background:url("/images/main/arrow.svg") no-repeat center center / contain; transition:.4s;}
.m-btn:hover::after {transform:translateX(10px);}

.main-technology {height:100dvh; text-align:center; color:#fff;}
.main-technology .inner {height:100dvh; transition:1s;}
.main-technology .wrap {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; padding:var(--space-50); background:url("/images/main/sec3.jpg") no-repeat center center / cover; transition:1s;}
.main-technology .wrap .txt {margin-bottom:var(--space-50); font-size:clamp(24px, calc(78 / var(--inner) * 100vw), 78px); font-weight:800; line-height:1.3em; letter-spacing:-.03em; text-shadow: 0px 30px 24px rgba(5, 0, 1, 0.1);}
.main-technology.active .inner {padding:175px var(--space-container) var(--space-100);}
.main-technology.active .wrap {border-radius:86px;}

.main-faq {position:relative; height:100dvh; overflow:hidden;  background:url("/images/main/sec4.jpg") no-repeat center center / cover; color:var(--color-primary);}
.main-faq .caption {position:absolute; bottom:0; left:0; width:100%; padding-bottom:var(--space-100);}
.main-faq .caption .txt1 {margin-bottom:var(--space-20); font-size:var(--font-size-40); line-height:1.3em; letter-spacing:-.03em;} 
.main-faq .caption .txt2 {margin-bottom:var(--space-30); font-size:clamp(24px, calc(108 / var(--inner) * 100vw), 108px); font-weight:500; line-height:1em; letter-spacing:-.03em;}
.main-faq .caption .m-btn {background:var(--color-primary);}

.main-media {position:relative; height:100dvh; overflow:hidden; background-image:linear-gradient( to bottom, transparent 50%, #cfd0d0 100%); text-align:center;}
.main-media .contain {padding-top:var(--space-80);}
.main-media h2 {margin-bottom:var(--space-60); font-size:clamp(24px, calc(60 / var(--inner) * 100vw), 60px); font-weight:300; line-height:1.3em; letter-spacing:-.03em; color:#d3d3d4;}
.main-media .link-item {display:block; background:#fff; border-radius:clamp(24px, calc(78 / var(--inner) * 100vw), 78px); overflow:hidden;}
.main-media .link-item .thumb {width:100%; aspect-ratio:4/3; overflow:hidden;}
.main-media .link-item .thumb img {width:100%; height:100%; object-fit:cover; transition:.4s;}
.main-media .link-item .cnt {padding:20px 30px 40px; text-align:left;}
.main-media .link-item .cnt .date {margin-bottom:4px; font-size:var(--font-size-14); line-height:1.5em; letter-spacing:-.03em; color:#878787;}
.main-media .link-item .cnt .tit {font-size:var(--font-size-18); font-weight:600; line-height:1.6em; letter-spacing:-.03em; color:#121212; max-height:calc(1.6em * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.main-media .link-item:hover .thumb img {transform:scale(1.1);}
.main-media .m-btn {margin-top:var(--space-60);}

/* sub */
#contArea {max-width:1460px; padding:var(--space-70) var(--space-container) var(--space-100); margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}

.sub-title {margin-bottom:var(--space-40);}
.sub-title h1 {font-family:"VITRO-INSPIRE",sans-serif; font-size:var(--font-size-32); font-weight:400; line-height:1.3em; letter-spacing:0;}

.real-cont {min-height:200px;}
  
/* footer */
#footer {position:relative; padding:var(--space-80) 0 var(--space-100); color:#ffffff;line-height:1.3em; letter-spacing:-.04em;}
.foot-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-45);
}
.foot-top .foot-logo svg {
    height: 66px;
}
.foot-top .foot-logo .fill {
    fill: var(--color-primary);
}
.foot-top ul {
    display: flex;
    align-items: center;
}
.foot-top li {
    position: relative;
    margin-left: var(--space-15);
    padding-left: var(--space-15);
}
.foot-top li:first-of-type {
    margin-left: 0;
    padding-left: 0;
}
.foot-top li::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    content: "";
    display: block;
    width: 1px;
    height: 19px;
    background-color: #2a2a2a;
}
.foot-top li:first-of-type::before {
    display: none;
}
.foot-top li a {
    color:#2a2a2a;font-size: var(--font-size-24);line-height:1.3em; letter-spacing:-.04em;font-weight: 600;
}
.foot-mid {
    margin-bottom: var(--space-40);
}
.foot-mid p {
    color:#7d7d7d;font-size: var(--font-size-20);line-height:1.3em; letter-spacing:-.04em;font-weight: 300;
}
.foot-mid p span {
    font-weight: 500;
}
.foot-bot {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.foot-bot .foot-info {
    display: flex;
    align-items: flex-start;
}
.foot-bot .foot-info p {
    color:#7d7d7d;font-size: var(--font-size-20);line-height:1.3em; letter-spacing:-.04em;font-weight: 300;
}
.foot-bot .foot-info p span {
    font-weight: 600;
}
.foot-bot .foot-info p i {
    margin: 0 0.2em;
    font-size: var(--space-);
    font-style: normal;
}
.foot-bot .foot-info .left-cont {
    margin-right: var(--space-50);
}
.foot-bot .foot-info .left-cont p:first-of-type {
    font-size: var(--font-size-22);
}
.foot-bot .foot-info .left-cont p:first-of-type span {
    font-weight: 900;
}
.foot-bot .foot-num {
    text-align: right;
}
.foot-bot .foot-num p {
    color:#7d7d7d;font-size: var(--font-size-24);line-height:1.3em; letter-spacing:-.04em;font-weight: 300;
}
.foot-bot .foot-num p span {
    font-weight: 600;
}