@charset "utf-8";

:root {
	--font-size:18px;
	--sub-font-size: 16px;
}

.m_gnb .sub_menu {display:none !important;}
.web_dis {display:block;}
.mb_dis {display:none;}
.pc_view {display:block}
.mb_view {display:none}
.mont {font-family:'Montserrat', sans-serif; }




/* header */
#header {width:100%; position: absolute; left:0px; top:0px; z-index:9999; padding: 0px 10px; box-sizing:border-box; transition:all 0.3s 0s ease-in-out;}
#header h1 {opacity: 0 !important;}
#header .inner {display: flex; height: 115px; justify-content: space-between; align-items:center; gap:10px;}
.close-btn {order:2; height:49px; display: flex; align-items: center; padding:0px 30px; gap:0px 60px; background: rgba(0, 0, 0, 40%); border-radius:25px;}

.close-btn a {color: #fff; flex:1; font-size:13px; line-height: 1.4em; text-align: center;}
.close-btn a + a {position:relative;}
.close-btn a + a::before {content:""; width: 1px; height: 14px; background: #fff; opacity: 0.5; position: absolute; left:-30px; top: 50%; transform: translateY(-50%)}


/* wrap */
#wrap {width:100%; overflow:hidden; word-break:keep-all; transition:all 0.3s 0s ease-in-out;}
.inner {max-width:var(--inner); margin:0 auto;}


.section {padding:min(50px, 5vw) 10px; font-size: var(--font-size); line-height:1.5em}

#section1 {padding-top:0px; padding-bottom: 0px; overflow:hidden}
#section1 {background: url(../img/bg_sky.jpg) no-repeat left top/cover; position: relative;}
#section1::before {content:""; width:100%; height: 100%; max-width:1920px; background: url(../img/bg_seoul2.png) no-repeat left bottom; position: absolute; top:60px; left:0px; /*left: 50%; transform: translateX(-50%);*/ z-index: 2;}
#section1::after {content:""; width:100%; height: 100%; max-width:1920px; background: url(../img/logo.png) no-repeat 100px 30px; position: absolute; top: 0px; left:0px; z-index: 2;}

.banner_slide {position: absolute; left: 0px; bottom: 0px; height:544px; width: 100%; overflow: hidden; border-radius:0px 250px 0px 0px;}
.banner_slide .swiper {height: 100%;}
.banner_slide .bg_img {width:100%; height: 100%; object-fit:cover;}

.intro_banner {position: relative; max-width: var(--inner); margin: 0 auto; min-height:1020px;z-index: 3; padding-top:155px;}
.intro_banner > h2 {position:fixed; left:234px; top:130px; display:none}
.intro_banner .close-btn {display:none;}
.intro_banner .main_quick {display:none;} 

.banner_box {max-width:802px; width:100%; display:flex; gap:16px; margin-left: auto ;}
.banner_box .box {background: #fff; border-radius:10px; padding:20px 25px; transition:all 0.3s 0s ease-in-out; flex:1; position: relative;}
.banner_box .box:after {display: block; content:""; width:60px; aspect-ratio: 73 / 112; box-sizing: border-box; background: url(../img/icon_recruiting.png) no-repeat left top/cover; position: absolute; right:10px; top: 0px;}

.banner_box .box .type {display: flex; width:5.555em; height:1.888em; border-radius:30px; justify-content: center; align-items: center; color: #fff; background:#0c3644;}
.banner_box .box h3 {font-size:1.444em; font-weight:700; line-height:1.3em; padding:0.4em 0px 0.2em 0px ;}
.banner_box .box .dec {color: #ff0000; min-height: 2.8em;}
.banner_box .box .btn {display:flex; gap:3px;}
.banner_box .box .btn > a {display:flex; flex:1; height:4.815em; font-size: var(--sub-font-size); line-height: 1.4em; text-align: center; justify-content: center; align-items: center; color: #fff; border-radius:8px; background: #359eba; font-weight:500;}
.banner_box .box:nth-child(2) .type {background: #359eba;}
.banner_box .box:nth-child(2) .btn > a {background: #244a56;}

.key_visual {max-width:722px; margin-left: auto ; display: flex; flex-direction: column; justify-content: center; min-height: 544px; padding: 10px 0px; margin-top:36px; color: #fff;}
.key_visual .txt_a {font-size:2em; line-height: 1.4em; text-shadow:1px 2px 2px rgba(0, 0, 0, 70%); font-weight:400;}
.key_visual .txt_b {font-size:4em; line-height: 1.4em; text-shadow:1px 2px 2px rgba(0, 0, 0, 70%); font-weight:700;}
.quick {display:flex; gap:12px; margin-top:1em;}
.quick > li {width:20.55%}
.quick > li:nth-child(1) {flex:1.64;}
.quick > li > a {display: block; height: 100%; border:1px solid rgba(255, 255, 255, 50%); border-radius:10px; overflow: hidden; transition:all 0.3s 0s ease-in-out; padding:18px;  position:relative;}
.quick > li > a .txt {text-align: center; line-height: 1.4em; min-height:2em; color: #fff; font-weight:700; margin-top:15px;}
.quick > li > a .txt:after {position: absolute; right:10px; bottom:10px; display: block; content: ""; width: 14px; height: 14px; background: url(../img/m_arrow.png) no-repeat right bottom;}
.quick > li:nth-child(1) > a {background: rgba(200, 137, 208, 0.6);  font-size: 1.1em;}
.quick > li:nth-child(2) > a {background: rgba(21, 166, 211, 0.6);}
.quick > li:nth-child(3) > a {background: rgba(44, 189, 168, 0.6);}
.quick > li:nth-child(4) > a {background: rgba(17, 189, 207, 0.6);}


#section2 {padding-bottom: 0px;}
#section2 .quick {display:none;}
#section2 .close-btn {display:none}
.main_quick {display: flex; justify-content:space-between; gap:10px; max-width: 956px; margin: 0 auto;}
.main_quick > li {max-width: 95px; flex:1; text-align: center; font-size: var(--sub-font-size); }
.main_quick > li > a {display: block; font-size: 0.95em; font-weight:500; line-height: 1.3em; transition:all 0.3s 0s ease-in-out;}
.main_quick .ico {display: flex; margin-bottom: 10px; height: 95px; width: 100%; border-radius:10px; overflow: hidden; justify-content: center; align-items: center; padding: 10px; position: relative; transition:all 0.3s 0s ease-in-out;}
.main_quick .ico::before {content: ""; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; opacity: 0.8; z-index:-1; transition:all 0.3s 0s ease-in-out;}
.main_quick > li:nth-child(1) .ico::before {background:#e6ab68;}
.main_quick > li:nth-child(2) .ico::before {background:#dd8385;}
.main_quick > li:nth-child(3) .ico::before {background:#bb86c8;}
.main_quick > li:nth-child(4) .ico::before {background:#87a3dd;}
.main_quick > li:nth-child(5) .ico::before {background:#3bc0ae;}
.main_quick > li:nth-child(6) .ico::before {background:#73c5d0;}
.main_quick > li:nth-child(7) .ico::before {background:#87c268;}

@media (hover: hover) and (pointer: fine) {
	.banner_box .box:hover {box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); transform: translateY(-1em);}
	.quick > li > a:hover {transform: translateY(-1em);}
	.quick > li:nth-child(1) > a:hover {border-color:#c889d0;}
	.quick > li:nth-child(2) > a:hover {border-color: #15a6d3;}
	.quick > li:nth-child(3) > a:hover {border-color: #2cbda8;}
	.quick > li:nth-child(4) > a:hover {border-color: #11bdcf;}

	.main_quick > li > a:hover {transform: translateY(-1em);}
	.main_quick > li > a:hover .ico::before {opacity: 1;}

}



.fnb-wrap {width: 100%; display:flex; justify-content: space-between; gap:10px 7px; padding-top:min(50px, 5vw);}
/* .fnb-wrap dl.music {width: } */
.fnb-wrap dl {padding:7px; padding-bottom: 15px; flex:1; background: #efefef; border-radius:5px;}
.fnb-wrap dl > * {width:100%; color:#41454A; white-space: nowrap}
.fnb-wrap dl dt {font-size:16px; font-weight:700; height:2.625em; margin-bottom:12px; display:flex; justify-content: center; text-align: center; color: #fff; font-weight:500; background: #333333; align-items:center; border-radius:5px;}
.fnb-wrap dl dt:focus-within {outline: auto;}
.fnb-wrap dl dt a {font-size: inherit; color: inherit; font-weight: inherit;}

.fnb-wrap dl dd a {font-size:14px; display:block; padding: 0 6px; line-height: 1.4em;}
.fnb-wrap dl dd + dd a{margin-top: 10px;}
.fnb-wrap dl.music dd:nth-of-type(1){padding-right: 36px;}
.fnb-wrap dl dd a:focus {outline: auto;}
.fnb-wrap dl dd span {display: flex; flex-wrap: wrap; align-items: center; gap: 2px;}
.fnb-wrap dl dd span span {gap:0px; justify-content: center; align-items: center; width: 16px; height: 16px; font-size:1px; text-indent: -9999em; overflow: hidden; vertical-align: middle; background:#f15a40;  clip: rect(0, 0, 0, 0); border-radius:100%; text-align: center; line-height:17px;}
.fnb-wrap dl dd span span:after {content: "N"; font-size:11px; font-weight:600; color: #fff; text-indent: 0px;}

#footer {font-size: var(--sub-font-size);}
#footer address {display: flex; justify-content: center; flex-wrap: wrap; gap:5px 1em; align-items: center; font-size:0.95em; color: #666666; text-align: center;}
#footer address .line {background:#ccc; width: 1px; height: 10px; opacity: 0.5;}
#footer .copy {text-align: center; color: #666; font-size: 0.85em; margin-top: 0.5em;}


@media screen and (max-width: 1680px){
	.fnb-wrap dl > *{white-space: normal;}
	.fnb-wrap dl.music dd:nth-of-type(1){padding-right: 20px;}
	.fnb-wrap{flex-wrap: wrap; justify-content: flex-start; gap: 20px 10px;}
	.fnb-wrap dl {width: calc((100% / 5) - 8px); flex:none}

}
/* 1440px 이하 */
@media screen and (max-width:1439px) {
	
	#section1::before {background-size:134vw auto !important;}
	
}

/* 1200px 이하 */
@media screen and (max-width:1200px) {
	#header h1 {opacity: 1 !important;}
	#section1::before {background: url(../img/bg_seoul.png) no-repeat left bottom;}
	#section1::after {display:none;}
	.intro_banner {padding-top: 125px;}
	.intro_banner > h2 {position: relative; left: auto; top: auto; text-align:center; display: block;}
	
	.banner_box {margin: 0 auto; margin-top: 2em;}
	.key_visual {margin: 0 auto; margin-top: 2em;}

}

/* 980px 이하 */
@media screen and (max-width:979px) {
	:root {
		--font-size:17px;
		--sub-font-size:15px;
	}

	.fnb-wrap dl {width: calc((100% / 3) - 7px);}
	

	
}

/* 768 이하 */
@media screen and (max-width:767px) {
	:root {
		--font-size:15px;
		--sub-font-size:14px;
	}


	.pc_view {display:none}
	.mb_view {display:block}

	
	.intro_banner > h2 img {max-width:45vw}

	



	.quick > li:nth-child(1) {flex:1}
	.quick > li .img img {width: 100%; height:85px; object-fit: cover ;}
	.quick > li > a .txt {word-break: break-all;}
	.key_visual .txt_a {font-size: min(2em, 5vw);}
	.key_visual .txt_b {font-size: min(4em, 9vw);}
	.key_visual {justify-content:flex-start; padding-top:2em}
	.banner_slide .bg_img {object-position: 8% center;}
	.main_quick {flex-wrap: wrap; gap:20px 10px; justify-content: center;}
	.main_quick > li {width: calc((100% / 4) - 8px); flex: none; max-width:none;}
	.main_quick > li > a {max-width: 95px; margin: 0 auto;}
	
	.fnb-wrap dl dt {font-size:17px;}
	.fnb-wrap dl dt a {font-size:17px;}
	.fnb-wrap dl dd a {font-size:15px;}
	.close-btn {display:none}
	#section2 .quick {display:flex; margin:0px;}
	#section2 .close-btn {display:flex; margin:20px auto;}
	.key_visual .quick {display:none;}
	.quick > li > a {box-shadow: 2px 3px 4px rgba(0, 0, 0, 16%);}
	.quick > li:nth-child(1) > a {background: rgba(200, 137, 208, 1);}
	.quick > li:nth-child(2) > a {background: rgba(21, 166, 211, 1);}
	.quick > li:nth-child(3) > a {background: rgba(44, 189, 168, 1);}
	.quick > li:nth-child(4) > a {background: rgba(17, 189, 207, 1);}
	.quick > li .img img {height:min(85px, 14vw)}
	.banner_slide {border-top-right-radius: min(250px, 20vw); height:min(544px, 55vw)}
	.key_visual {min-height:min(544px, 55vw); text-align:center}
	#section1 {background:url(../img/m_sky.jpg) no-repeat center top/cover}
	#section1::before {display:none;}
	.intro_banner {min-height:auto;}
	.close-btn {max-width:300px; margin: 0 auto;}
	
}






/* 480px 이하 */
@media screen and (max-width:479px) {
	:root {
		--font-size:14px;
		--sub-font-size:13px;
	}

	#header .inner {height: 70px; justify-content: center;}
	#header h1 img {height: 30px;}
	#header .close-btn {display: none;}
	#header .close-btn {height:35px; padding: 0px 10px;}

	.banner_box .box .btn > a {height: 3.9em;}
	.banner_box .box {padding: 15px 20px;}

	.intro_banner {padding-top:85px;}
	.intro_banner .close-btn {display:flex; max-width: max-content; margin-left: auto; height: 35px;}
	.intro_banner .close-btn {gap:30px}
	.intro_banner .close-btn a + a::before {left: -15px;}
	.intro_banner .main_quick {display: flex; margin-top:50px}


	.banner_box {flex-direction: column;}

	.quick {margin-top: 1em; gap:5px}
	.quick > li > a {padding:5px; padding-bottom: 15px;}
	.quick > li > a .txt {font-size:12px; padding-bottom:0.8em; }
	.quick > li > a .txt:after {width:12px; height:12px; background-size:cover}

	.main_quick .ico {height: 85px;}
	.main_quick > li > a {font-size: 1em;}


	.fnb-wrap dl {width: calc((100% / 2) - 5px);}
	.fnb-wrap dl dt {font-size:16px; height:50px;}
	.fnb-wrap dl dt a {font-size:16px;}
	.fnb-wrap dl dd a {font-size:14px;}
	.fnb-wrap dl dd + dd a{margin-top: 8px;}
	

	

}