@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-tablet {display:block;}
.only-desktop {display:block;}
.only-tablet {display:none;}
.only-mobile {display:none;}

.contain {width:100%; max-width:1460px; padding-left:var(--padding-contain); padding-right:var(--padding-contain); margin:0 auto;}

/* header */
#header {position:fixed; top:0; left:0; width:100%; height:var(--header-height); padding:0 4.5%; transition:.3s; z-index:100;}
#header.header-fixed {background:#fff; box-shadow:0 0 3px rgba(0,0,0,.15);}
#header.header-up {transform:translateY(-110%);}

.header {position:relative; display:flex; justify-content:space-between; align-items:center; width:100%; height:100%;}

.sitelogo img {height:41px;}

#gnb {text-align:center; flex:1 1 auto; min-width:0; width:1%; margin:0 50px;}
#gnb>ul {display:flex; justify-content:center;} 
#gnb>ul>li {position:relative; height:var(--header-height); padding:0 40px;}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; flex-direction:column; justify-content:center; height:100%; color:#2c2c2c; font-size:18px; font-weight:700; letter-spacing:-.04em; line-height:1.3em;}
#gnb>ul>li.active>a {color:var(--color-primary);}
#gnb .submenu {display:none; position:absolute; top:var(--header-height); left:50%; min-width:160px; padding-top:10px; margin-top:-10px; transform:translateX(-50%); text-align:center;}
#gnb .submenu>ul {position:relative; padding:20px 10px; background:var(--color-primary); border-radius:16px;}
#gnb .submenu>ul:before {content:''; position:absolute; top:0; left:50%; width:14px; height:14px; background:var(--color-primary); border:4px solid #fff; border-radius:100%; transform:translate(-50%,-50%);}
#gnb .submenu>ul>li>a {display:block; padding:8px 0; color:#fff; font-weight:500; line-height:1.33em; white-space:nowrap;}
#gnb .submenu>ul>li>a:hover {text-decoration:underline;}

.top-links {display:flex; align-items:center;}
.top-links .btn {display:inline-block; padding:10px 25px; background:var(--color-primary); border-radius:50px; color:#fff; font-size:15px; line-height:1.33em; text-align:center;}
.top-links .my {display:flex;}
.top-links .my a {display:block; position:relative; margin-left:18px; line-height:0;}
.top-links .my img {width:24px;}
.top-links .my span {position:absolute; top:calc(100% + 5px); left:50%; padding:0 10px; transform:translateX(-50%); opacity:0; background:#505050; border-radius:30px; color:#fff; font-size:12px; line-height:22px; text-align:center; white-space:nowrap; transition:.2s;}
.top-links .my a:hover span {opacity:1;}

.language {position:relative; margin-left:18px; text-align:center;}
.language button {display:block; border:0; background:transparent;}
.language .list {display:none; position:absolute; left:50%; width:45px; transform:translateX(-50%);}
.language ul {margin-top:10px; padding:9px 0; background:#fff; border:1px solid #ddd; border-radius:8px;}
.language ul li a {margin:0 !important; color:#5f5f5f; font-size:15px; line-height:22px !important;}
.language ul li a:hover {color:#244b8a;}

/* for mobile */
.btn-m-menu {display:none; position:relative; width:24px; height:24px; overflow:hidden; text-indent:-9999em; line-height:0; font-size:0; margin-left:15px;}
.btn-m-menu span {position:absolute; left:8px; right:0; top:50%; margin-top:-1px; height:2px; background:#505050;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; left:-8px; right:0; height:2px; background:#505050;}
.btn-m-menu span:before {top:-9px;}
.btn-m-menu span:after {bottom:-9px;}

.mobile-navigation {position:fixed; top:0; right:0; width:300px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .home {display:flex; align-items:center; height:70px; padding:10px 20px;}
.mobile-navigation .links {display:flex; border-top:1px solid #ddd; background:#f4f4f4;}
.mobile-navigation .links a {width:50%; height:44px; display:flex; align-items:center; justify-content:center; border-left:1px solid #ddd;}
.mobile-navigation .links a:first-child {border-left:0;}
.mobile-navigation .links img {width:20px; margin-right:6px;}
.mobile-navigation .language {display:none;}
.mobile-navigation .nav-menu>ul {border-top:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:11px 48px 11px 20px; display:block; color:#2c2c2c; font-size:17px; font-weight:700; line-height:1.5em;}
.mobile-navigation .nav-menu>ul>li.active>a {color:#fff; background:var(--color-primary);}
.mobile-navigation .nav-menu .submenu {display:none; padding:10px 20px; background:#f4f4f4; color:#2c2c2c; font-size:15px; font-weight:500; line-height:1.5em;}
.mobile-navigation .nav-menu .submenu > ul > li > a {display:block; position:relative; padding:6px 0;}
.mobile-navigation .lang {padding:20px; display:flex; gap:20px; font-weight:600; color:#767676;}
.mobile-navigation .lang .on {color:var(--color-primary);}
.mobile-navigation .close {position:absolute; top:20px; right:18px; 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:3px; background:#2c2c2c; 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-visual {position:relative; overflow:hidden; background:#f5f7ff;}
.main-visual .item {display:none; height:100vh; max-height:1080px;}
.main-visual .item:first-child {display:block;}
.main-visual .contain {height:100%; max-width:1560px;}
.main-visual .wrap {display:flex; justify-content:space-between; align-items:center; width:100%; height:100%; padding:0 50px;}
.main-visual .text-area {margin-right:30px;}
.main-visual .text-area .tit {font-size:var(--font-size-48); font-weight:700; line-height:1.42em; letter-spacing:-.04em; overflow:hidden;}
.main-visual .text-area .tit .letter {display:inline-block;}
.main-visual .text-area .txt {margin-top:20px; transition:.7s; transform:translate(0,50px); opacity:0; font-size:var(--font-size-20); font-weight:500; line-height:1.7em; letter-spacing:-.04em; color:#505050;}
.main-visual .img-area {text-align:right; transition:.7s; transform:translate(60px,0); opacity:0;}
.main-visual .wave {position:absolute; bottom:0; left:0; width:100%; transform:translateY(36%); z-index:50;}
.main-visual .wave svg {display:block; width:100%; height:auto;}
.main-visual .slick-arrow {position:absolute; top:50%; z-index:50; overflow:hidden; width:var(--slide-arrow); height:var(--slide-arrow); margin-top:calc(0px - (var(--slide-arrow) / 2)); background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; border:0; font-size:0; text-indent:-9999em; opacity:.6;}
.main-visual .slick-arrow:hover {opacity:1;}
.main-visual .slick-prev {left:4%; background-image:url("../images/main/slide-prev.svg");}
.main-visual .slick-next {right:4%; background-image:url("../images/main/slide-next.svg");}
.main-visual .active .text-area .txt {transition-delay:1.2s; transform:translate(0,0); opacity:1;}
.main-visual .active .img-area {transition-delay:.8s; transform:translate(0,0); opacity:1;}

.m-head {margin-bottom:90px;}
.m-head h2 {font-size:var(--font-size-38); font-weight:700; line-height:1.42em; letter-spacing:-.04em;}
.m-head .dot {display:inline-block; position:relative; top:4px; width:6px; height:6px; border-radius:100%; background:var(--color-primary); vertical-align:top;}

.m-btn {text-align:center; margin-top:95px;}

.btn-view-more {display:inline-flex; align-items:center; padding:18px 30px; border:2px solid var(--color-primary); border-radius:50px; color:var(--color-primary); font-size:var(--font-size-18); font-weight:700; line-height:1.33em;}
.btn-view-more svg {transition:.4s; margin-left:20px;}
.btn-view-more:hover {background:var(--color-primary); color:#fff;}
.btn-view-more:hover svg {transform:rotate(180deg);}
.btn-view-more:hover path {fill:#fff;}

.main-reason {position:relative; overflow:hidden; padding:100px 0;}
.main-reason:before {content:"WHY?"; position:absolute; top:0; right:0; font-size:220px; font-weight:800; line-height:1em; letter-spacing:-.04em; color:#f9f9fa; z-index:-1;}
.main-reason .items {display:flex; justify-content:space-between;}
.main-reason .item {text-align:center; width:30%; max-width:400px;}
.main-reason .item .ico {margin-bottom:40px;}
.main-reason .item .tit {margin-bottom:17px; color:var(--color-primary); font-size:var(--font-size-24); letter-spacing:-.04em;}
.main-reason .item .txt {color:#505050; font-size:var(--font-size-18); line-height:1.67em; letter-spacing:-.04em;}

.wave2 {overflow:hidden; background:#fff;}
.wave2 svg {display:block; width:100%; height:auto;}

.main-members {position:relative; padding:0 0 140px; background:#f5f7ff; overflow:hidden;}
.main-members .contain {position:relative;}
.main-members .swiper-container {overflow:inherit;}
.main-members .swiper-slide {height:auto !important; transition:.2s;}
.main-members .swiper-slide:nth-child(odd) {transform:translateY(20px);}
.main-members .arrows {position:absolute; top:0; right:30px; display:flex;}
.main-members .arrows .slide-btn {display:flex; align-items:center; justify-content:center; width:54px; height:54px; margin-left:9px; overflow:hidden; background-color:transparent; border:2px solid var(--color-primary); border-radius:100%; color:var(--color-primary); font-size:var(--font-size-24); font-weight:700; transition:.2s;}
.main-members .arrows .slide-btn:hover {background:var(--color-primary); color:#fff;}
.main-members .dev-item {outline-color:#a8a8a8;}

/* sub */
.sub-visual {position:relative; overflow:hidden; height:90vh; max-height:800px; margin-bottom:160px; background:#f5f7ff;}
.sub-visual .contain {height:100%;}
.sub-visual .wrap {display:flex; justify-content:space-between; align-items:center; width:100%; height:100%;}
.sub-visual .text-area {padding-bottom:10%; margin-right:30px;}
.sub-visual .text-area .tit {color:#121212; font-size:var(--font-size-48); font-weight:700; line-height:1.42em; letter-spacing:-.04em; overflow:hidden;}
.sub-visual .text-area .tit .letter {display:inline-block;}
.sub-visual .text-area .txt {margin-top:20px; transition:.7s; transform:translate(0,50px); opacity:0; font-size:var(--font-size-20); font-weight:500; line-height:1.7em; letter-spacing:-.04em; color:#505050;}
.sub-visual .img-area {text-align:right; transition:.7s; transform:translate(60px,0); opacity:0;}
.sub-visual .img-area.st1 img {transform:translateY(25%);}
.sub-visual .wave {position:absolute; bottom:0; left:0; width:100%; transform:translateY(36%); z-index:50;}
.sub-visual .wave svg {display:block; width:100%; height:auto;}
.loaded .sub-visual .text-area .txt {transition-delay:.4s; transform:translate(0,0); opacity:1;}
.loaded .sub-visual .img-area {transition-delay:.4s; transform:translate(0,0); opacity:1;}

#contArea {max-width:1460px; padding-left:var(--padding-contain); padding-right:var(--padding-contain); margin:0 auto;}

.sub-title {padding:210px 0 55px;}
.sub-title h1 {color:#121212; font-size:var(--font-size-48); line-height:1.33em; letter-spacing:-.03em;}

.lnb {margin-top:-15px; margin-bottom:80px;}
.lnb > ul {display:flex; gap:37px;}
.lnb > ul > li > a {display:block; position:relative; padding:8px 0; color:#878787; font-size:var(--font-size-20); font-weight:600; line-height:1.33em; letter-spacing:-.03em;}
.lnb > ul > li > a:after {content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--color-primary); transition:.2s;}
.lnb > ul > li > a:hover,
.lnb > ul > li.active > a {color:#2c2c2c;}
.lnb > ul > li > a:hover::after,
.lnb > ul > li.active > a:after {width:100%;}

.real-cont {min-height:400px; padding-bottom:140px;}

/* footer */
#sub #footer {border-top:1px solid #ddd;}
#footer {padding:80px 4.5%; color:#505050; line-height:1.5em; letter-spacing:-.02em;}
#footer address {font-style:normal;}
#footer a:hover {text-decoration:underline;}
#footer span {display:inline-block;}

.footer {position:relative;}

.footer .comp {margin-bottom:30px; color:var(--color-primary); font-size:var(--font-size-20); font-weight:700; line-height:1.33em;}
.footer address span {margin:0 30px 2px 0;}
.footer .copyright {color:#878787; font-size:0.88em;}

.foot-links {margin-top:30px;}
.foot-links ul {display:flex;}
.foot-links ul li {margin-right:20px;}
.foot-links .ico-doc {width:16px; height:16px; background:url("../images/common/icon-doc.svg") 50% 50% no-repeat; background-size:contain; margin-right:5px;}
.foot-links .link {display:flex; align-items:center;}

.foot-logo {position:absolute; bottom:0; right:0;}

.scroll-top {display:flex; align-items:center; justify-content:center; position:fixed; bottom:140px; right:30px; z-index:90; width:74px; height:74px; opacity:0; background:var(--color-primary); border-radius:16px; color:#fff; font-size:14px; font-weight:700; line-height:1em;}
.scroll-top span:before {content:''; display:block; width:0; height:0; margin:0 auto 6px; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:8px solid #fff;}
.scroll-top.active {opacity:1;}