@charset "utf-8";
/* layout.css는 전체적인 스타일 정의 */
@import url('https://fonts.cdnfonts.com/css/accidental-presidency');
@import url('https://fonts.cdnfonts.com/css/helvetica-neue-55');
@import url('https://fonts.cdnfonts.com/css/im-fell-french-canon-sc');

#wrapper {position:relative; min-height: calc(100vh - 50px);  /* overflow:hidden; */}

.container {position:relative; padding-left:15px; padding-right:15px; margin:0 auto; height:inherit;}
#header .container {max-width:1630px !important;}
#footer .container {max-width:1750px !important;}
#main .container {max-width:1430px;}
#sub .container {max-width:1850px;}

/* header */
#main .sub-header {display: none;}
#sub .main-header {display: none;}
.main-header {position: absolute; top: 50%; left: 100px; transform: translateY(-50%); z-index: 9999;} 
.main-header .logo {margin-bottom: 20px;}
.main-header #gnb ul li:not(:last-child) {margin-bottom: 5px;}
.main-header #gnb ul li a {font-family: 'Accidental Presidency', sans-serif; font-size: 18px; font-weight: 400; line-height: 1em; color: #fff; transition: all 0.5s;}
.main-header #gnb ul li a:hover {color: rgba(255,255,255,0.6 );}

.sub-header {position: fixed; top: 30px; left: 50%; transform: translateX(-50%); z-index: 50;}
.sub-header .inner {display: flex; align-items: center; padding: 3px 25px 3px 29px; border-radius: 20px; border: 0.2px solid #000; background: #FFF; box-shadow: 0 0 7.1px 0 rgba(0, 0, 0, 0.25);}
.sub-header .logo {margin-right: 25px;}
.sub-header .logo img {display: block;}
.sub-header #gnb ul {display: flex;}
.sub-header #gnb ul li:not(:last-child) {margin-right: 8px;}
.sub-header #gnb ul li a {padding: 5px 18px; font-family: 'Accidental Presidency', sans-serif; font-size: 18px; font-weight: 400; line-height: 1em; color: #000; text-align: center;}
.sub-header #gnb ul li.active a {border-radius: 6px; background: #000; color: #fff;}

/* footer */
#footer {padding: 11px 0; background: #000;}
#footer .container {display: flex; justify-content: space-between; align-items: center;}
#footer p {font-size: 12px; line-height: normal; color: #fff; text-align: center;}  
#footer .sns-link ul {display: flex; align-items: center;}
#footer .sns-link ul li {margin-left: 14px;}
#footer .sns-link ul li img {transition: all 0.5s;}
#footer .sns-link ul li a:hover img {filter: brightness(0.5);}

/* quick-menu */
.quick-menu {position: fixed; top: 50%; right: 27px; transform: translateY(-50%); margin-top: -50px; display: flex; align-items: center; z-index: 50;}
.quick-menu .popup-contact {z-index: 60; position: absolute; top: -58px; right: 0; opacity: 0; visibility: hidden; width: 330px; padding: 23px 19px; background: #fff; border-radius: 15px; border: 0.5px solid #7D7D7D; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15); margin-right: 10px; transition: all 0.5s;}
.quick-menu.form-active .popup-contact {right: 50px; opacity: 1; visibility: visible;}
.quick-menu .popup-contact .item:not(:last-child) {margin-bottom: 5px;}
.quick-menu .popup-contact input,
.quick-menu .popup-contact textarea {width: 100%; border: 0.2px solid #000; font-size: 11px; font-weight: 600; line-height: normal; padding: 7px 10px;}
.quick-menu .popup-contact textarea {display: block; height: 85px; resize: none;}
.quick-menu .popup-contact input:focus,
.quick-menu .popup-contact textarea:focus {outline: none;}
.quick-menu .form-agree {margin-bottom: 22px;}
.quick-menu .btn-submit {display: block; width: 200px; font-size: 11px; font-weight: 600; line-height: 40px; color: #fff; text-align: center; background: #000; border: 0; margin: 0 auto;}

.quick-menu .btn-wrap {position: absolute; top: -36px; right: 0; margin-right: 11px; opacity: 0; visibility: hidden; transition: all 0.5s;}
.quick-menu.active .btn-wrap {right: 50px; opacity: 1; visibility: visible; }
.quick-menu.form-active .btn-wrap {opacity: 0; visibility: hidden;}
.quick-menu > ul > li:not(:last-child) {margin-bottom: 7px;}
.quick-menu > ul > li > a {width: 155px; font-size: 14px; font-weight: 700; line-height: 1em; color: #303030; background: #fff; text-align: center; padding: 10px 5px; border: 0.5px solid #7D7D7D; border-radius: 18px; transition: all 0.5s;}
.quick-menu > ul > li > a:hover {background: #000; color: #fff;}
.quick-menu > ul > li > a.active {background: #000; color: #fff;}
.quick-menu .btn-quick-menu {display: block; width: 50px; height: 50px; background: #fff url('../img/layout/quick_logo_b.png') no-repeat center center/32px auto; filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.15)); border: 0.5px solid #7d7d7d; border-radius: 50%; transition: all 0.5s;}
.quick-menu.active .btn-quick-menu {background: #000 url('../img/layout/quick_logo_w.png') no-repeat center center/32px auto;}
.popup-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 30;}
.popup-overlay.active {display: block;}

/* siteMap : S */
#main .mo-header {display: none;}
.mo-header {display: none; position:fixed; top:0; left:0; width:100%; height: 50px; z-index: 100; transition: all 0.5s;}
.mo-header.active {transform:translateY(0);}
.mo-header.hide {transform:translateY(-100%);}
.mo-header.scrolled {background: #fff; border-bottom: 1px solid #000;}
.mo-header .container {display: flex; justify-content: space-between; align-items: center;}
.mo-header .logo img {display: block;}

.sitemap-btn {position: relative; width:24px; height:16px; z-index: 20;}
.sitemap-btn span {position:absolute; width:24px; background:#000; height:2px; right:0; top:50%; margin-top:-1px; border-radius: 1px; transition: all 0.6s;}
.sitemap-btn span:before,
.sitemap-btn span:after {content:''; width:19px; height:2px; border-radius: 1px; position:absolute; transition: all 0.6s;}
.sitemap-btn span:before {top:-7px; right: 0; background: #000;}
.sitemap-btn span:after {bottom:-7px; right: 0; background: #000;}
.sitemap-btn:hover span:before,
.sitemap-btn:hover span:after {width: 100%;}

#main .sitemap {display: none;}
.sitemap {position:fixed; max-width:100vw; max-height:100vh; width:0; height:0; z-index:1111;  display:block; top:0; right:0; overflow:hidden; letter-spacing:0;  pointer-events: none;}
html.sitemap-opened .sitemap {width:100%; height:100%; visibility:visible; pointer-events: auto;}
.sitemap:before {content:''; position:fixed; z-index:-1; top:0; left:0; width:100vw; height:100vh; background:url('../img/layout/sitemap-black.jpg') center center no-repeat; background-size:cover; transition:all 0.6s ease 0.2s; display:none;}
html.sitemap-opened .sitemap:before {display:block;}

.site-wrap {max-width:1830px; width:100%; padding:0 15px; margin:0 auto; height:100vh; position:relative;}
.site-wrap .head {position:absolute; top:0; left:0; width:100%; height:50px; display:flex; align-items:center; z-index:11; padding:0 15px;}
.site-wrap .head .logo img {display: block; width: 110px;}
.sitemap .sitemap-close {position:absolute; top:50%; margin-top:-12px; right:15px; width:24px; height:24px; z-index:12; transition:all 0.6s;}
.sitemap .sitemap-close:before,
.sitemap .sitemap-close:after {content:''; width:24px; height:2px; background:#fff; position:absolute; left:0; border-radius: 1px; transition:all 0.6s;}
.sitemap .sitemap-close:before {top:10px;}
.sitemap .sitemap-close:after {bottom:10px;}
html.sitemap-opened .sitemap .sitemap-close:before {transform:rotate(45deg); top:50%; margin-top:-1px;}
html.sitemap-opened .sitemap .sitemap-close:after {transform:rotate(-45deg); bottom:50%; margin-bottom:-1px;}

.site-wrap .wrap {padding:100px 0 60px;  height:100vh;display:flex; position:relative;}
.site-wrap .wrap:after {content:''; width:1px; height:100vh; background:rgba(255,255,255,0.2); position:absolute; top:0; left:700px;}
.site-wrap .wrap .info-wrap {width:100%; max-width:700px; display:flex; flex-direction:column; justify-content:space-between; padding-right:60px;}
.site-wrap .info .box {margin-bottom:50px; position:relative; left:100px; opacity:0; transition:all 0.6s;}
html.sitemap-opened .site-wrap .info .box {transition-delay:0.1s; left:0; opacity:1;}
html.sitemap-opened .site-wrap .info .box:nth-child(2) {transition-delay:0.2s;}

.nav-menu > ul > li {margin-bottom:20px;}
.nav-menu > ul > li > span {display:block; position:relative; transition:all 0.6s; overflow:hidden;}
.nav-menu > ul > li > span a {display:inline-block; font-size:44px; line-height:0.8em; transition:all 0.6s ease 0s; position:relative; transform:translateY(110%); font-weight:500; padding:0 5px; color:#fff;}

html.sitemap-opened .nav-menu > ul > li > span a {transform:translateY(0); transition-delay:0.5s; transition-property:transform;}
.nav-menu > ul > li > span a:after {content:''; background:#fff; width:0; height:20px; position:absolute; bottom:5px; left:0; z-index:-1; opacity:0.2; transition:all 0.6s;}
.nav-menu > ul > li.active > span a:after {width:100%;}
.nav-menu > ul > li > span a:hover:after {width:100%;}

/* sitemap-white */
.sitemap-white:before {background: #fff;}
.sitemap-white .sitemap-close:before,
.sitemap-white .sitemap-close:after {background:#000;}
.sitemap-white {color:#000;}
.sitemap-white .head ul li:after {background:#ddd;}
.sitemap-white .head ul li a {font-size:14px; color:#666;}
.sitemap-white .head ul li.active a {color:#000;}
.sitemap-white .nav-menu > ul > li > span a {font-family: 'Accidental Presidency', sans-serif; color:#000; transition: all 0.5s;}
.sitemap-white .nav-menu > ul > li > span a:hover {opacity: 0.6;}
.sitemap-white .nav-menu .submenu ul li a {color:#666;}
.sitemap-white .nav-menu .submenu ul li a:hover {color:#000;}

.sitemap-white .btn-wrap ul li a img {filter:invert(1);}