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

#skipToContent a {z-index:100000;position:absolute;overflow:hidden;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;}
#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 {max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto;}

/* header */
#header {position: absolute; z-index:100; width:100%; top: 0;}
#header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; max-width: 1780px; height:100px; z-index:10;}

#header.active {position: fixed; background: #fff;}

#header form {flex: 1;}
.header-search { display: flex; justify-content: center;}
.header-search .inner {position: relative;}
.header-search .input {width: 260px; height: 52px; padding: 10px 30px; padding-right: 50px; border-radius: 26px; border: none; background: rgba(255,255,255,.14);}
.header-search .input::placeholder {font-size: 15px; color: rgba(255,255,255,.7);}
.header-search .submit {position: absolute; top: 0; right: 0; width: 50px; height: 100%; background: url('../images/bbs/icon-search-white.png') no-repeat center left 10px; border: none;}

.header-search .input::-webkit-search-cancel-button {-webkit-appearance: none;height: 1em;width: 1em; border-radius: 50em;background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;background-size: contain;opacity: 0;pointer-events: none;filter: invert(1);}
.header-search .input:focus::-webkit-search-cancel-button {opacity: .3;pointer-events: all; }
#sub .header-search .input {background: #f1f1f1; padding-right: 50px;}
#sub .header-search .input::placeholder {color: #a8a8a8;}
#sub .header-search .submit {background: url('../images/bbs/icon-search.png') no-repeat center left 10px; }

/* for mobile */
.btn-m-menu {display:block; position:relative; width:52px; height:52px; border: 1px solid #fff;}
.btn-m-menu span {position:absolute; left:50%; top:20px; width:24px; height:2px; margin-left: -12px; background:#fff;}
.btn-m-menu span:before {content:" "; position:absolute; right:0; bottom: -8px; width: 50%; height:2px; background:#fff;}

#sub .btn-m-menu {border: 1px solid #121212;}
#sub .btn-m-menu span,
#sub .btn-m-menu span:before {background: #121212;}

.mobile-navigation {display:block; z-index:102; position:fixed; top:0; left:0; width: 50%; height:100%; transition:.2s linear; -ms-transform:translateX(-100%); transform:translateX(-100%);}
.mobile-navigation .inner {width: fit-content; padding: 170px 100px 0; z-index: 1;}
.mobile-navigation .home {display:flex; align-items:center; height:80px; padding:0 20px; color:#242424; font-size:19px; font-weight:700; line-height:1.5em;}
.mobile-navigation .nav-menu>ul>li {position: relative; width: fit-content;}
.mobile-navigation .nav-menu>ul>li>a {display:block; position:relative; min-width: 260px; padding:20px 48px 20px 0; color:#878787; font-size:30px; font-weight:600; line-height:1.5em;}
.mobile-navigation .nav-menu>ul>li.active>a {color:#fff;}
.mobile-navigation .nav-menu .submenu {display:none; position: absolute; top: 20px; right: 0; transform: translateX(100%);  padding-right: 20px; color:#fff; font-size:20px; font-weight:700; line-height:1.5em;}
.mobile-navigation .nav-menu .list-scroll .submenu { overflow: auto;max-height: 400px;}
.mobile-navigation .nav-menu .list-scroll .submenu::-webkit-scrollbar {width: 4px; background-color :#000}
.mobile-navigation .nav-menu .list-scroll .submenu::-webkit-scrollbar-thumb {background-color: #fff;}
.mobile-navigation .nav-menu .submenu ul li {position: relative;}
.mobile-navigation .nav-menu .submenu ul li a {position: relative; display:block; width: fit-content; padding:7px 25px 7px 10px;}
.mobile-navigation .nav-menu .submenu ul li a:before {position: absolute; content: ''; right: 0; top: 0; width: 8px; height: 100%; background: url('../images/main/arrow-right.png') no-repeat right center; background-size: contain; opacity: .5;}
.mobile-navigation .nav-menu .submenu ul li:hover a:before {opacity: 1;}
.mobile-navigation .shortcut {margin-top: 36px;}
.mobile-navigation .shortcut li {position: relative; width: fit-content; padding: 7px 0; padding-right: 15px; font-weight: 500; font-size: 15px; color: #878787;}
.mobile-navigation .shortcut li:hover {color: #fff;}
.mobile-navigation .shortcut li:before {position: absolute; content: ''; right: 0; top: 0; width: 7px; height: 100%; background: url('../images/main/arrow-right.png') no-repeat center center; background-size: contain; opacity: .5;}
.mobile-navigation .shortcut li:hover:before {opacity: 1;}
.mobile-navigation .close {position:absolute; top:30px; left:100px; width:52px; height:52px; text-indent:-9999em; overflow:hidden; background: url('../images/common/btn-close.png') no-repeat center center; background-size: contain;}
.mobile-overlay {display:none; z-index:100; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6;}

.thirdmenu {display: none; position: absolute; top: 0; right: 0; transform: translateX(100%); font-size: 18px;}
.mobile-navigation .nav-menu .submenu > ul > li:hover .thirdmenu {display: block;}
.thirdmenu li {padding-left: 20px; opacity: .3;}
.thirdmenu li:hover {opacity: 1;}
.mobile-navigation .nav-menu .submenu ul li .thirdmenu li {width: max-content;}
.mobile-navigation .nav-menu .submenu ul li .thirdmenu a {padding-right: 15px;}
.mobile-navigation .nav-menu .submenu ul li .thirdmenu a:before {content: none;}

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

/* intro */
.intro {position: relative; height: 100vh;}
.intro-video {position: absolute; overflow: hidden; z-index: -1; width: 100%; height: 100%;}
.intro-video:before {position: absolute; content: ''; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.24);}
.intro-video video {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.intro-cnt {display: flex; height: 100%; color: #fff;}
.intro-cnt .left {width: 30%;}
.intro-cnt .right {flex: 1; display: flex; align-items: flex-end;}
.intro-cnt .right .intro-item {position: relative; flex: 1; align-items: flex-end; height: 100%; transition: .3s;}
.intro-cnt .right .intro-item:before {position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: 0; background: rgba(0,0,0,.3); transition: .2s;}
.intro-cnt .right .intro-item:hover {height: 100%;}
.intro-cnt .right .intro-item:hover:before {height: 100%;}
.intro-item {display: flex; align-items: center; justify-content: center; opacity: .6}
.intro-item:hover {opacity: 1;}
.intro-item .txt {display: flex; align-items: center; position: relative; padding: 90px 15px; font-weight: 600; font-size: 28px;}
.intro-cnt .right .intro-item:hover .txt {height: 100%;}
.intro-item .txt .icon {margin-left: 25px;}
.left .intro-item .txt .icon {margin-left: 15px;}
.intro-cnt .left .intro-item {flex-direction: column; gap: 15px; height: 100%;}
.left .intro-item .txt {padding: 0; font-weight: 500; font-size: 16px;}

/* main */
.main-visual {position: relative; overflow: hidden;}
.main-visual .item {display: flex !important; align-items: center; position:relative; overflow:hidden; height:calc(100vh - 70px);}
.main-visual .mv-bg {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;  opacity:1 !important; animation-duration:3s; transition:all 1s ease;}
.main-visual .mv-bg.posiright {background-position: right center;}
.main-visual .item-wrapper {display: flex; flex-direction: column; align-items: center; gap: 100px; width: 100%; max-width: 1780px; height: 100%; max-height: 910px; padding: 170px 30px 0; margin: 0 auto; text-align: center;}
.main-visual .item-wrapper.text-left {align-items: flex-start; text-align: left;}
.main-visual .caption {letter-spacing: -.04em; color: #ffc72c; font-weight: 800; font-size: 100px; width: 100%; line-height: 1em;}
.main-visual [data-animation-in] {opacity:0; animation-duration:1.5s; transition:opacity 0.5s ease 0.3s; transition:1s;}

@keyframes zoomOutImage {
  from {transform:scale3d(1, 1, 1); transition:1s;}
  to {transform:scale3d(1.05, 1.05, 1.05); transition:1s;}
}
.zoomOutImage {animation-name:zoomOutImage;transition:1s;}

.mv-control {position: absolute; left: 100px; bottom: 60px; font-weight: 700; font-size: 20px; color: rgba(255,255,255,.5)}
.mv-control .current {color: #ffc72c; font-weight: 800;}
.mv-control .divider {padding: 12px 0; writing-mode: vertical-lr;}
.mv-arrows {display: flex; flex-direction: column; gap: 6px; position: absolute; right: 100px; bottom: 60px;}
.mv-arrows button {overflow: hidden; width: 60px; height: 60px; border: none; text-indent: -9999em;}
.mv-arrows .slick-prev {background: url('../images/main/mv-prev.png') no-repeat center center; background-size: contain;}
.mv-arrows .slick-next {background: url('../images/main/mv-next.png') no-repeat center center; background-size: contain;}

/* sub */
.sub-visual {position:relative; overflow:hidden; height:576px; background:#333; color:#fff; text-align:center;}
.sub-visual .bg {position:absolute; top:0; left:0; overflow:hidden; width:100%; height:100%; background-repeat:no-repeat; background-position:50% 0; background-size:cover; transition:2s; opacity:0; transform:scale(1.1);}
.sub-visual .inner {position:absolute; top:58%; left:0; width:100%; transform:translateY(-50%);}
.sub-visual h2 {font-size:52px; font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.sub-visual .bg1 {background-image:url("../images/common/sv1.jpg");}
.sub-visual .bg2 {background-image:url("../images/common/sv2.jpg");}
.sub-visual .bg3 {background-image:url("../images/common/sv3.jpg");}
.sub-visual .bg4 {background-image:url("../images/common/sv4.jpg");}
.sub-visual .bg5 {background-image:url("../images/common/sv5.jpg");}
.sub-visual.none-lnb .inner {padding:0;}
.loaded .sub-visual .bg {transform:scale(1); opacity:1;}

.lnb-wrap {position:relative; padding: 30px 0; margin-bottom: 90px; border-bottom:1px solid #2c2c2c;}
.lnb {margin:0 auto;}
.lnb ul {display:flex; justify-content: center; gap: 6px;}
.lnb ul li {width: fit-content}
.lnb ul li a {display:flex; justify-content:center; align-items:center; width:211px; height:74px; padding:0 15px; border: 1px solid #a8a8a8; border-radius: 37px; color:#a8a8a8; font-size:18px; font-weight:500; line-height:1.2em; letter-spacing:-.03em;}
.lnb ul li.active a {border-color: #2c2c2c; color:#2c2c2c;}

.list-menu {position: relative; background: #f4f4f4; overflow: hidden;}
.list-menu .swiper-container {padding: 0 14px; display: flex; justify-content: center;}
.list-menu ul {max-width: 1760px; width: max-content; flex-wrap: wrap; width: 100%; justify-content: flex-start;}
.list-menu li {width: auto; padding: 0 16px; width: 250px;}
.list-menu li a {display: flex; align-items: center; height: 60px; font-weight: 500; color: #878787;}
.list-menu li.active a {border-bottom: 2px solid #2c2c2c; color: #2c2c2c;}

.sub-title {display: flex; align-items: center; justify-content: center; position: relative; height: 356px; max-width:1260px; margin:100px auto 0;}
.sub-title.blind {height: 0; margin: 0;}
.sub-title h1 {font-size:132px; font-weight: 100; line-height:1em; color:#2c2c2c;}
.sub-title .caption {position: absolute; bottom: 65px; font-size: 24px; letter-spacing: .8em; color: #ccc;}
.sub-title .doc-tit {margin-bottom:22px;}

.left-menu {min-width: 260px;font-weight: 600; font-size: 18px; color: #a8a8a8;}
.left-menu .current-page {display: none; position: relative; }
.left-menu .current-page:before {position: absolute; left: 0; top: 0; content: ''; height: 100%; width: 100%; background: url('../images/bbs/select.png') no-repeat center right 30px;}
.left-menu li.active {color: #2c2c2c;}
.left-menu li:not(:last-child) {margin-bottom: 12px;}
.left-menu li a {display: flex; align-items: center; gap: 5px;}
.left-menu .tag {display: flex; align-items: center; justify-content: center; width: 36px; height: 17px; border-radius: 9px; background: #ffc72c; font-weight: 700; font-size: 12px; color: #2c2c2c;}
.left-tit {margin-bottom: 25px; font-weight: 700; font-size: 28px; color: #2c2c2c;}

.path-wrap {max-width: 1780px; padding: 0 30px; margin: 45px auto 0;}
.path-wrap .inner {display: flex; margin: 0 -20px;}
.path-wrap .part {position: relative; padding: 0 20px;font-weight: 500; font-size: 15px; color: #a8a8a8;}
.path-wrap .part:before {position: absolute; right: 0; margin-right: -3px; content: ''; width: 7px; height: 100%; background: url('../images/bbs/path-right.png') no-repeat center center; background-size: contain;}
.path-wrap .third-part:before {content: none;}
.path-wrap .third-part {font-weight: 500; color: #2c2c2c;}

#contArea {max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto;}
#contArea.wide {max-width:100%; padding:0;}

.real-cont {padding-bottom:140px;}
.icon img {vertical-align: middle; margin-top: -.03em;}
.root_daum_roughmap .wrap_controllers {display: none;}

/* footer */
.menu-right {position: relative; z-index: 105; position: fixed; right: 30px; top: 50%; transform: translateY(-50%);}
.menu-right .item {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 70px; height: 70px; margin-bottom: 8px; background: rgba(0,0,0,.6); font-weight: 600; font-size: 12px; color: #fff; letter-spacing: -.02em; line-height: 1em;}
.menu-right .item:last-child {margin-bottom: 0;}
.menu-right .item.differ {background: #ffc72c; color: #121212;}
.btn-menu-right {display: none; position: absolute; left: 1px; top: 0; transform: translateX(-100%); padding: 5px 15px; background: #ffc72c; border-radius: 5px 0 0 5px; color: #fff;}

#main #footer {background: #000; border-top: none; font-size: 11px; color: #878787; letter-spacing: -.08em;}
#main #footer .contain {display: flex; justify-content: space-between; align-items: center; height: 70px; max-width: 1780px;}
#main .f-logo {margin-right: 20px; color: #fff; font-weight: 700; font-size: 18px; letter-spacing: -.04em;}
#main .f-info {display: flex;}
#main .f-info address {display: flex; gap: 20px; font-style: normal; font-size: 13px;}
.copyright span {position: relative; padding-left: 10px; margin-left: 6px;}
.copyright span:before {position: absolute; content: 'l'; left: 0; width: 1px; height: 10px;}

#sub #footer {padding: 30px 0; background:#fff; font-size: 12px; color: #2c2c2c; border-top: 1px solid #2c2c2c;}
#sub #footer .contain {display: flex; justify-content: space-between; max-width: 1780px;}
#sub .f-info {display: flex; flex-direction: column; justify-content: space-between;}
#sub address {display: flex; gap: 25px; font-style: normal; font-size: 13px;}
#sub address.loca {font-size: 16px;}
.f-right {display: flex; flex-direction: column; justify-content: space-between; gap: 90px; text-align: right;}
#sub .f-logo {font-weight: 700; font-size: 18px;}
#sub .f-link {display: flex; justify-content: flex-end; gap: 30px;}