@charset "utf-8";
/* layout.css는 전체적인 스타일 정의 */
@font-face {
    font-family: 'Aggravo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Aggravo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Aggravo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'YeogiOttaeJalnanGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KccEunyeong';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/KCC-eunyoung-Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

#wrapper {position:relative; overflow:hidden;}

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

/* header */
#header {position:fixed; top:0; left:0; width:100%; height:110px; z-index:90; transition:all 0.6s;}
#header.scrolled {background: rgba(0,0,0,0.2);}
#header.active {transform:translateY(0);}
#header.hide {transform:translateY(-100%);}
#header .sitelogo a {display:block; position:absolute; top:50%; left:15px; margin-top:-35px;}

.sitemap-btn {position:absolute; top:50%; right:15px; width:69px; height:33px; margin-top:-17px;}
.sitemap-btn span {position:absolute; width:69px; background:#fff; height:5px; right:0; top:50%; margin-top:-2px; border-radius: 3px;}
.sitemap-btn span:before,
.sitemap-btn span:after {content:''; width:46px; height:5px; position:absolute; right:0; background:#fff; border-radius: 3px; transition: all 0.5s;}
.sitemap-btn span:before {top:-14px;}
.sitemap-btn span:after {bottom:-14px;}
.sitemap-btn:hover span:before,
.sitemap-btn:hover span:after {width: 69px;}

/* footer */
#footer {padding:39px 0; background: #222; text-align: center; color: #D8D8D8; font-size: 20px; line-height: 1.8em; letter-spacing: -0.4px;}

#footer .btn-news {position: relative; display: inline-block; padding: 3px 30px; border: 1px solid #D8D8D8; border-radius: 10px; margin-bottom:20px; transition:all 0.4s; overflow: hidden;}
#footer .btn-news:before {transition: 0.5s all ease; position: absolute; top: 0; left: 50%; right: 50%; bottom: 0; opacity: 0; content: ''; background-color: #fff;}
#footer .btn-news:hover, #footer .btn-news:focus {color: #222;}
#footer .btn-news:hover:before, #footer .btn-news:focus:before {transition: 0.5s all ease; left: 0; right: 0; opacity: 1;}
#footer .btn-news span {position: relative; z-index: 5; transition: all 0.5s;}
#footer .btn-news:hover span, #footer .btn-news:focus span {color: #222;}

/* #footer a:hover {background: #fff; color: #222; border: 1px solid #fff;} */

/* siteMap : S */
.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;}
html.sitemap-opened .sitemap {width:100%; height:100%; visibility:visible;}
.sitemap:before {content:''; position:fixed; z-index:-1; top:0; left:0; width:100vw; height:100vh; background: #fff; /* background:url('../img/layout/sitemap_bg.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 { width:100%; margin:0 auto; height:100vh; position:relative;}
.site-wrap .head {position:absolute; top:0; left:50%; transform: translateX(-50%); max-width:1750px; width:100%; height:110px; display:flex; align-items:center; z-index:11; padding:0 15px;}

.sitemap .sitemap-close {position:absolute; top:50%; margin-top:-18px; right:15px; width:36px; height:36px; z-index:12; transition:all 0.6s;}
.sitemap .sitemap-close:hover {opacity:0.6;}
.sitemap .sitemap-close:before,
.sitemap .sitemap-close:after {content:''; width:36px; height:2px; background:#fff; position:absolute; left:0; 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;}

.sitemap .wrap {height: 100vh;}
.sitemap .wrap ul {display: flex; width: 100%; height: 100%;}
.sitemap .wrap ul li {transition: all 0.5s;}
.sitemap .wrap ul li.inactive {filter: brightness(0.6);}

.sitemap .wrap ul li:nth-child(1) {clip-path: polygon(0% 0%, 100% 0%, 65% 100%, 0% 100%); margin-left:0; flex:28%;}
.sitemap .wrap ul li:nth-child(2) {clip-path: polygon(32.7% 0%, 100% 0%, 65% 100%, 0% 100%); margin-left: -11.1%; flex:30%}
.sitemap .wrap ul li:nth-child(3) {clip-path: polygon(35% 0%, 100% 0%, 65% 100%, 0% 100%); margin-left: -11.9%; flex:30%}
.sitemap .wrap ul li:nth-child(4) {clip-path: polygon(35% 0%, 100% 0%, 100% 100%, 0% 100%); margin-left: -11.9%; flex:30%}

.sitemap .wrap ul:has( li:nth-child(1):hover) > li:nth-child(1){flex:30%; clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%); flex:45%;}
.sitemap .wrap ul:has( li:nth-child(1):hover) > li:nth-child(2){clip-path: polygon(32.6% 0%, 100% 0%, 69% 100%, 0% 100%); margin-left: -10.2%; flex:34.5%;}
.sitemap .wrap ul:has( li:nth-child(1):hover) > li:nth-child(3){clip-path: polygon(31% 0%, 100% 0%, 69% 100%, 0% 100%); margin-left: -9.7%; flex:34.5%;}
.sitemap .wrap ul:has( li:nth-child(1):hover) > li:nth-child(4){clip-path: polygon(38.5% 0%, 100% 0%, 100% 100%, 0% 100%); margin-left: -9.6%; flex:27.5%;}

.sitemap .wrap ul:has( li:nth-child(2):hover) > li:nth-child(1){clip-path: polygon(0% 0%, 100% 0%, 57.5% 100%, 0% 100%); margin-left: -5%; flex:27.5%;}
.sitemap .wrap ul:has( li:nth-child(2):hover) > li:nth-child(2){clip-path: polygon(23.2% 0%, 100% 0%, 78.8% 100%, 0% 100%);margin-left: -11.3%;flex: 50%;}
.sitemap .wrap ul:has( li:nth-child(2):hover) > li:nth-child(3){clip-path: polygon(30.7% 0%, 100% 0%, 70% 100%, 0% 100%); margin-left: -10.3%; flex:34.5%;}
.sitemap .wrap ul:has( li:nth-child(2):hover) > li:nth-child(4){clip-path: polygon(37.6% 0%, 100% 0%, 100% 100%, 0% 100%); margin-left: -9.95%; flex:27.5%;}

.sitemap .wrap ul:has( li:nth-child(3):hover) > li:nth-child(1){clip-path: polygon(0% 0%, 100% 0%, 57.5% 100%, 0% 100%); margin-left: -5%; flex:27.5%;}
.sitemap .wrap ul:has( li:nth-child(3):hover) > li:nth-child(2){clip-path: polygon(33.9% 0%, 100% 0%, 66.2% 100%, 0% 100%); margin-left: -11.5%; flex:34.5%;}
.sitemap .wrap ul:has( li:nth-child(3):hover) > li:nth-child(3){clip-path: polygon(23.3% 0%, 100% 0%, 78.9% 100%, 0% 100%); margin-left: -11.5%; flex:50%}
.sitemap .wrap ul:has( li:nth-child(3):hover) > li:nth-child(4){clip-path: polygon(38.5% 0%, 100% 0%, 100% 100%, 0% 100%); margin-left: -10.4%; flex:27.5%;}

.sitemap .wrap ul:has( li:nth-child(4):hover) > li:nth-child(1){clip-path: polygon(0% 0%, 100% 0%, 57.2% 100%, 0% 100%); margin-left: -5%; flex:27.5%;}
.sitemap .wrap ul:has( li:nth-child(4):hover) > li:nth-child(2){clip-path: polygon(34.2% 0%, 100% 0%, 64.4% 100%, 0% 100%); margin-left: -11.8%; flex:34.5%;}
.sitemap .wrap ul:has( li:nth-child(4):hover) > li:nth-child(3){clip-path: polygon(42.7% 0%, 100% 0%, 66.7% 100%, 7% 100%); margin-left: -14.8%;  flex:34.5%;}
.sitemap .wrap ul:has( li:nth-child(4):hover) > li:nth-child(4){clip-path: polygon(25.7% 0%, 100% 0%, 100% 100%, 0% 100%);margin-left: -11.55%;flex: 45%;}

.sitemap .wrap ul li a {position: relative; height: 100%;}
.sitemap .wrap ul li .bg {width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.sitemap .wrap ul li:nth-child(1) .bg {background-image: url('../img/main/section04_bg01.jpg');}
.sitemap .wrap ul li:nth-child(2) .bg {background-image: url('../img/main/section04_bg02.jpg');}
.sitemap .wrap ul li:nth-child(3) .bg {background-image: url('../img/main/section04_bg03.jpg');}
.sitemap .wrap ul li:nth-child(4) .bg {background-image: url('../img/main/section04_bg04.jpg');}
.sitemap .wrap ul li .text-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; align-content: center; z-index: 5; transition: all 0.5s;}
.sitemap .wrap ul li .text {transition: all 0.6s;}
.sitemap .wrap ul li:nth-child(1) .text {padding-right: 120px;}
.sitemap .wrap ul li:nth-child(2) .text {padding-right: 20px;}
.sitemap .wrap ul li:nth-child(3) .text {padding-right: 20px;}
.sitemap .wrap ul li:nth-child(4) .text {padding-left: 110px;}
.sitemap .wrap ul li .text-box .cate {display: inline-block; font-size: 24px; font-weight: 700; line-height: 1.75em; letter-spacing: -0.48px; color: #fff; margin-bottom: 40px; border-bottom: 1px solid #fff;}
.sitemap .wrap ul li .text-box h2 {font-family: 'Aggravo'; font-size: 43px; font-weight: 400; line-height: 1.61em; color: #fff; margin-bottom: 5px;}
.sitemap .wrap ul li .text-box .sub-title {font-size: 24px; font-weight: 700; line-height: 1.75em; letter-spacing: -0.48px; color: #fff;}


/* siteMap : E */
/* siteMap : responsive */

@media (max-width: 1400px) {
	.sitemap .wrap ul li:nth-child(1) .text {padding-right: 90px;}
	.sitemap .wrap ul li:nth-child(4) .text {padding-left: 90px;}
	.sitemap .wrap ul li .text-box .cate {font-size: 20px; margin-bottom: 40px;}
	.sitemap .wrap ul li .text-box h2 {font-size: 35px; margin-bottom: 5px;}
	.sitemap .wrap ul li .text-box .sub-title {font-size: 20px;}
}
@media (max-width:1024px){
	.site-wrap .head {height:80px;}
	.site-wrap .head .logo img {width: 180px;}

	.sitemap .wrap ul li:nth-child(1).active {clip-path: polygon(0% 0%, 100% 0%, 65% 100%, 0% 100%); flex: 27.5%;}
	.sitemap .wrap ul li:nth-child(2).active {clip-path: polygon(30% 0%, 100% 0%, 70% 100%, 0% 100%); margin-left: -11.5%; flex: 34.5%}
	.sitemap .wrap ul li:nth-child(3).active {clip-path: polygon(30% 0%, 100% 0%, 70% 100%, 0% 100%); margin-left: -11.5%; flex: 34.5%}
	.sitemap .wrap ul li:nth-child(4).active {clip-path: polygon(37% 0%, 100% 0%, 100% 100%, 0% 100%); margin-left: -11.4%; flex: 27.5%;}
	.sitemap .wrap ul li:nth-child(1) .text {padding-right: 70px;}
	.sitemap .wrap ul li:nth-child(2) .text {padding-right: 10px;}
	.sitemap .wrap ul li:nth-child(3) .text {padding-right: 10px;}
	.sitemap .wrap ul li:nth-child(4) .text {padding-left: 60px;}
	.sitemap .wrap ul li .text-box .cate {font-size: 16px; margin-bottom: 35px;}
	.sitemap .wrap ul li .text-box h2 {font-size: 26px; margin-bottom: 5px;}
	.sitemap .wrap ul li .text-box .sub-title {font-size: 16px;}

}
@media (max-width:768px){
	.site-wrap .head {height:60px;}
	.site-wrap .head .logo img {width: 140px;}

	.main .section04 {height: auto;}
	.sitemap .wrap ul {flex-wrap: wrap;}
	.sitemap .wrap ul li {height: 25%;}
	.sitemap .wrap ul li:nth-child(1) {width: 100%; clip-path: none !Important; margin-left: 0!Important; flex: none !Important;}
	.sitemap .wrap ul li:nth-child(2) {width: 100%; clip-path: none !Important; margin-left: 0!Important; flex: none !Important;}
	.sitemap .wrap ul li:nth-child(3) {width: 100%; clip-path: none !Important; margin-left: 0!Important; flex: none !Important;}
	.sitemap .wrap ul li:nth-child(4) {width: 100%; clip-path: none !Important; margin-left: 0!Important; flex: none !Important;}
	.sitemap .wrap ul li:nth-child(1).active {width: 100%; clip-path: none !Important; margin-left: 0!Important; flex: none !Important;}
	.sitemap .wrap ul li:nth-child(2).active {width: 100%; clip-path: none !Important; margin-left: 0!Important; flex: none !Important;}
	.sitemap .wrap ul li:nth-child(3).active {width: 100%; clip-path: none !Important; margin-left: 0!Important; flex: none !Important;}
	.sitemap .wrap ul li:nth-child(4).active {width: 100%; clip-path: none !Important; margin-left: 0!Important; flex: none !Important;}
	.sitemap .wrap ul li:nth-child(1) .text {padding-right: 0;}
	.sitemap .wrap ul li:nth-child(2) .text {padding-right: 0;}
	.sitemap .wrap ul li:nth-child(3) .text {padding-right: 0;}
	.sitemap .wrap ul li:nth-child(4) .text {padding-left: 0;}
	.sitemap .wrap ul li .text-box .cate {font-size: 16px; margin-bottom: 15px;}
	.sitemap .wrap ul li .text-box h2 {font-size: 26px; margin-bottom: 5px;}
	.sitemap .wrap ul li .text-box .sub-title {font-size: 16px;}
}