@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; width:100%; background:#fff; z-index:100;}
#header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; max-width: 1780px; height:100px; z-index:10;}

#sub #header {position: relative;}

#gnb {text-align:center; flex:1 1 auto; min-width:0; width:1%;}
#gnb>ul {display:flex; justify-content:center;}
#gnb>ul>li {position:relative; padding:0 24px;}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; flex-direction: column; justify-content:center; height:100px; color:#2c2c2c; font-size:18px; font-weight:500; letter-spacing:-.04em; line-height:1.3em;}
#gnb>ul>li>a:after {content:""; position:absolute; bottom:-1px; left:50%; width:0; height:3px; background:#e8b11a; transition:.2s;}
#gnb>ul>li.active>a:after {width:100%; left:0;}
#gnb>ul>li:first-child .submenu {left:8px; transform:none;}
#gnb>ul>li:last-child .submenu {left:auto; right:8px; transform:none;}
#gnb .submenu {display:none; position:absolute; left:50%; text-align:center; transform:translateX(-50%);}
#gnb .submenu>ul {display:flex;}
#gnb .submenu>ul>li>a {display:block; padding:21px 18px; color:#505050; font-size:16px; font-weight: 500; line-height:1.33em; white-space:nowrap;}
.submenu-bg {display:none; position:absolute; width:100%; left:0; background:#fafafa; border-top:1px solid #ddd;}

#header.header-trans {background: none;}
#header.header-trans #gnb>ul>li>a {color: #fff;}
#header.header-trans .sitelogo img {display: none;}
#header.header-trans .sitelogo a {display: block; height: 38px; width: 180px; background: url('../images/common/logo-w.png') no-repeat center left; background-size: contain;}

/* for mobile */
.btn-m-menu {display:none; position:relative; width:26px; height:26px;}
.btn-m-menu span {position:absolute; right:0; top:50%; width:18px; height:2px; margin-top:-1px; background:#242424;}
.btn-m-menu:before,
.btn-m-menu:after {content:" "; position:absolute; left:0; right:0; height:2px; background:#242424;}
.btn-m-menu:before {top:0;}
.btn-m-menu:after {bottom:0;}

#header.header-trans .btn-m-menu span,
#header.header-trans .btn-m-menu:before,
#header.header-trans .btn-m-menu:after {background: #fff;}

.mobile-navigation {display:none; z-index:102; position:fixed; top:0; right:0; overflow:auto; width:300px; height:100%; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff;}
.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 {border-top:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li>a {display:block; position:relative; padding:10px 48px 10px 20px; color:#242424; font-size:19px; font-weight:700; line-height:1.5em;}
.mobile-navigation .nav-menu>ul>li>a:after {position:absolute; content:""; top:50%; right:20px; transform:translateY(-75%) rotate(45deg); width:11px; height:11px; border-right:2px solid #505050; border-bottom:2px solid #505050;}
.mobile-navigation .nav-menu>ul>li.active>a {color:#fff; background:#e9b21a}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#fff;}
.mobile-navigation .nav-menu .submenu {display:none; background:#f8f8f8; color:#454545; font-size:16px; font-weight:400; line-height:1.5em;}
.mobile-navigation .nav-menu .submenu ul li {border-top:1px solid #e5e5e5;}
.mobile-navigation .nav-menu .submenu ul li a {display:block; padding:12px 20px;}
.mobile-navigation .nav-menu .submenu ul li a:hover {color:#e9b21a;}
.mobile-navigation .close {position:absolute; top:25px; right:15px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {position:absolute; content:""; top:12px; left:0; width:100%; height:3px; background:#242424; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; z-index:100; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6;}

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; height:100vh; background:#fff; overflow:hidden;}
.main-visual .item {position:relative; height:100vh; overflow:hidden;}
.main-visual .image,
.main-visual .video {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; transition:5s linear; transform:scale(1.15);}
.main-visual .image img,
.main-visual .video video {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;}
.main-visual .video video {object-fit: contain; padding-top: 100px;}
.main-visual .caption {position:absolute; top: 50%; transform: translateY(-50%); left:0; width: 100%; padding:0 50px; color:#000; text-shadow: 0 0 5px #fff; z-index:40; text-align: center;}
.main-visual .caption img {margin:0 auto;}
.main-visual .caption p {transition:1.2s; transform:translate(0,50px); opacity:0;}
.main-visual .caption .txt1 {font-size:52px; font-weight:700; line-height:1.17em; letter-spacing:-.03em;}
.main-visual .caption .txt2 {font-size:24px; font-weight:400; line-height:1.58333em; letter-spacing:-.03em; margin-top:30px;}
.main-visual .controls {position:absolute; bottom: 75px; left:0; width: 100%; display:flex; align-items:center; justify-content: center; gap: 15px; padding:0 50px; color:#fff; z-index:40; font-size: 20px; font-weight: 500;}
.main-visual .pager .current {display:inline-block; width:.6em;}
.main-visual .progress {position:relative; margin:0 10px; width:100px; height:2px; background:rgba(255,255,255,.5);}
.main-visual .progress-bar {position:absolute; top:0; left:0; height:100%; background:#fff;}
.main-visual .active .image {transform:scale(1);}
.main-visual .active .caption p {transform:translate(0,0); opacity:1;}
.main-visual .active .caption .txt1 {transition-delay:.2s;}
.main-visual .active .caption .txt2 {transition-delay:.5s;}
.main-visual .scroll {position:absolute; bottom:75px; left:100px; text-align: center; z-index:40; color: #fff; font-weight: 500; font-size: 15px; text-shadow: 0 0 3px #000;}
.main-visual .scroll .img {display: block; animation:scrollDown .7s linear infinite alternate;}

.progress-bar.animated {animation:progressBar 1 linear;}
.progress-bar.paused {animation-play-state:paused !important;}
.progress-bar.play {animation-play-state:running !important;}

@keyframes progressBar {
	0%{width:0;}
	100%{width:100%;}
}
@keyframes scrollDown{
	0%{transform:translateY(-5px);}
	100%{transform:translateY(10px);}
}

.right-menu {display: flex; flex-direction: column; align-items: flex-end; gap: 10px; position: fixed; right: 100px; top: 50%; z-index: 100;}
.right-menu a {display: flex; align-items: center; width: fit-content; font-size: 14px; font-weight: 500; color: #fff; background: #454545; border-radius: 30px;}
.right-menu .icon {display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 100%;}
.right-menu .icon img {filter: brightness(10);}
.right-menu .txt {width: 0; overflow: hidden; transition: .2s;}
.right-menu .txt span { opacity: 0; transition: .8s;}
.right-menu a:hover .icon {background: #fff;}
.right-menu a:hover .icon img {filter: none;}
.right-menu a:hover .txt {width: auto;padding: 0 25px 0 20px;}
.right-menu a:hover .txt span {opacity: 1;}
#fp-nav ul li:last-child {display: none;}

.main-section .inner {padding-top: 100px; padding-left: 30px; padding-right: 30px; max-width: 1780px; margin: 0 auto;}
.main-tit {margin-bottom: 60px;}
.main-tit h2 {font-size: 46px; font-weight: 700; color: #333; line-height: 1em;}
.main-tit p {font-size: 16px; line-height: 1.875em; margin-top: 35px;}
.btn-more {display: flex; width: fit-content; padding: 11px 32px; margin-top: 60px; border: 1px solid #a8a8a8; gap: 20px; font-size: 16px;}

.main-performance {position: relative;}
.main-performance:before {position: absolute; content: ''; z-index: -1; height: 100%; width: 42.7%; background: #f4f4f4;}
.main-performance .inner {display: flex; max-width: calc(50% + 700px); margin-right: 0; padding-right: 0;}
.main-performance .main-tit {min-width: 360px; margin-bottom: 0;}
.m-performance-swiper {flex:1;}
.m-performance-swiper .swiper-slide {width: fit-content;}
.m-performance-swiper .item {position: relative; display: block; width: fit-content; padding: 16px 0;}
.m-performance-swiper .img {position: relative; z-index: -1; width: 560px; padding-bottom: 75%; overflow: hidden;}
.m-performance-swiper .item:hover .img{box-shadow: 0 0 16px rgba(0,0,0,.55);}
.m-performance-swiper .img:before {position: absolute; content: ''; z-index:1; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.5); opacity: 0;}
.m-performance-swiper .item:hover .img:before {opacity: 1;}
.m-performance-swiper .img img {position: absolute; width: 100%; height: auto; max-width: 100%; min-height: 100%; left: 0; top: 50%; transform: translateY(-50%); object-fit: cover;}
.m-performance-swiper .item .txt {position: absolute; opacity: 0; bottom: 50px; width: 100%; padding-left: 50px; padding-right: 100px; color: #fff; font-size: 16px; transition: .2s;}
.m-performance-swiper .item .txt:before {position: absolute; content: ''; right: 40px; bottom: 0; width: 40px; height: 40px; background: url('../images/main/view-more.png') no-repeat center center; background-size: contain;}
.m-performance-swiper .item:hover .txt {opacity: 1;}
.m-performance-swiper .item-tit {margin-bottom: 13px;font-size: 24px; font-weight: 700;}
.m-performance-swiper {position: relative; overflow:hidden; margin-top: -166px; margin-left: -16px; padding-top: 150px;}
.m-performance-swiper:before {position: absolute; top: 0; content: 'OUR BUSINESS'; width: 1180px; text-align: right; color :#fff; -webkit-text-stroke: 1px #ddd; font-weight: 900; font-size: 130px; line-height: .8em; }
.m-performance-swiper .swiper-container {padding-left: 16px;}
.performance-arrow {display: flex; gap: 40px; position: relative; margin-top: 60px;}
.performance-arrow > div {display: block; color: #505050; transition: .2s; position: relative; margin: 0; top: auto; left: auto; right: auto;}
.performance-arrow > div:hover {color: #e8b11a;}

.main-partners {background: url('../images/main/bg-partners.jpg') no-repeat center center; background-size: cover; text-align: center; overflow: hidden;}
.main-partners .inner {padding-bottom: 0 !important;}

.main-gallery .inner {max-width: 1460px;}
.main-gallery .main-tit {display: flex; gap: 32px; align-items: flex-end;}
.main-gallery .lnb ul {margin: 0 -13px;}
.main-gallery .lnb ul li a {padding: 0 13px;font-size: 16px;}
.gallery-list ul {display: flex; flex-wrap: wrap; gap: 35px 0; margin: 0 -20px;}
.gallery-list li {width: 25%; padding: 0 20px;}
.gallery-list .thumb {position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden; margin-bottom: 15px; transition: .2s;}
.gallery-list li:hover .thumb {box-shadow: 0 0 16px rgba(0,0,0,.35);}
.gallery-list .thumb:before,
.gallery-list .thumb:after {position: absolute; content: ''; opacity: 0; transition: .2s;}
.gallery-list .thumb:before { z-index:1; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.5);}
.gallery-list .thumb:after {z-index: 2; top: 0; left: 0; bottom: 0; right: 0; background: url('../images/main/view-more.png') no-repeat center center;}
.gallery-list li:hover .thumb:before,
.gallery-list li:hover .thumb:after  {opacity:1;}
.gallery-list .thumb img {position: absolute; width: 100%; height: auto; max-width: 100%; min-height: 100%; left: 0; top: 50%; transform: translateY(-50%); object-fit: cover;}
.gallery-list .tit {font-size: 16px; text-align: center;}

.main-bnr {position:relative; width:100%; padding-bottom: 50px;}
.main-bnr .wrap {position:relative;}
.main-bnr .wrap .rolling {position:relative; overflow:hidden;}
.main-bnr .wrap .rolling ul {width:9999px;}
.main-bnr .wrap .rolling ul li {float:left; line-height:0; margin-right: 40px;}
.main-bnr .wrap .item {position: relative; width: 320px; padding-bottom: 44.375%; overflow: hidden;}
.main-bnr .wrap .item img {position: absolute; width: 100%; height: auto; max-width: 100%; min-height: 100%; left: 0; top: 50%; transform: translateY(-50%); object-fit: contain;}

/* sub */
.lnb-wrap {position:relative; margin-top: 40px;}
.lnb {max-width:1200px;}
.lnb ul {display:flex; margin: 0 -20px;}
.lnb ul li {width: fit-content;}
.lnb ul li a {padding:0 20px; color:#878787;}
.lnb ul li.active a {color:#2c2c2c; font-weight: 600;}

.tabmenu {margin-bottom: 100px;}
.tabmenu ul {display: flex; margin: 0 -5px;}
.tabmenu ul li {width: fit-content; }
.tabmenu ul li a {display: block; padding: 13px 31px; margin: 0 5px; border: 1px solid #ddd; font-size: 16px; color: #878787;}
.tabmenu ul li.active a {border-color: #e8b11a; background: #e8b11a; color: #2c2c2c; font-weight: 700;}

.sub-title {padding-top:120px;}
#contArea.wide .sub-title {padding-left:30px; padding-right:30px;}
.sub-title h1 {position: relative; width: fit-content; font-size:48px; line-height:1.3em; color:#2c2c2c;}
.sub-title h1:before {position: absolute; content: ''; width: 10px; height: 10px; background: #e9b21a; right: -17px; top: 0;}

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

.real-cont {padding-top: 100px; padding-bottom:100px;}
.icon img {vertical-align: middle; margin-top: -.02em;}
.c1 {color: #e8b11a}
.c2 {color: #333;}
.b1 {background: #e8b11a;}

/* footer */
#footer {background:#333; padding: 50px 0 80px; font-size: 16px; color: #fff; line-height: 1.625em;}
#footer .contain {display: flex; justify-content: space-between; align-items: flex-end; max-width: 1780px;}
.sitetitle {margin-bottom: 35px; font-weight: 700; font-size: 20px;}
.f-info address span {margin-right: 30px; font-style: normal;}
.copyright {margin-top: 30px; color: #ddd; font-size: 14px;}
.f-link a {display: flex; align-items: center; gap: 8px; margin-bottom: 5px;}