body { word-break: keep-all; font-weight: 400; }
.wrap.main { padding-top: 11rem; }
button { border:none; }
.inner { position: relative; width: 92%; max-width: 1280px; margin: 0 auto; }
.mb-view { display: none; }
.iframe_wrap { position: relative; width: 100%; height: 100%; }
.iframe_wrap :where(iframe, video, img) { max-width: none; width: 100%; height: 100%; object-fit: cover; }


.ico_plus { position: relative; display: inline-block; width: 15px; }
.ico_plus::before { content: ''; display: block; width: 1px; height: 15px; position: absolute; right:50%; top:50%; transform: translateY(-50%); background: var(--key-blue-deep-color); }
.ico_plus::after { content: ''; display: block; width: 1px; height: 15px; position: absolute; right:50%; top:50%; transform: translateY(-50%) rotate(90deg); background: var(--key-blue-deep-color); }

.ico_link { width: 2rem; aspect-ratio: 1/1; background: url('/resources/img/common/open_in_new.svg') no-repeat center/contain; }
.ico_link_w { width: 2rem; aspect-ratio: 1/1; background: url('/resources/img/common/open_in_new_w.svg') no-repeat center/contain; }

.ico_arw { display: inline-block; width: 2.6rem; aspect-ratio: 26/5; background: url('/resources/img/main/main_arw.svg') no-repeat center/contain; }
.ico_arw_w { display: inline-block; width: 2.6rem; aspect-ratio: 26/5; background: url('/resources/img/main/main_arw_w.svg') no-repeat center/contain; }
.ico_arw_up { display: inline-block; width: 1.6rem; aspect-ratio: 1/1; background: url('/resources/img/main/main_arw_up.svg') no-repeat center/contain; }


/* Header */
header { z-index: 100; position: fixed; left: 0; top:0; width: 100%; background: white; }
header .header_inner { z-index: 5; position: relative; max-width: 1760px; width: 92%; height: 11rem; display: flex; align-items: center; justify-content: space-between; gap:7rem; padding-top: 1.8rem; margin:0 auto; }
header .header_div { position: relative; flex: 1; display: flex; align-items: center; justify-content: space-between; margin-left: 7rem; }
header .logo { display: block; width: 30rem; aspect-ratio: 310/35; overflow: hidden; background: url("/resources/img/logo.png") no-repeat center/contain; text-indent: -999px; transition: .3s; }
header .logo a { display: block; }

header .link_green { display: flex; align-items: center; gap:1rem; height: 4.2rem; padding: .6rem 2.2rem; background: var(--key-green-light-color); color:white; font-size: var(--font-size-18); font-weight: 500; border-radius: 5rem; }
header .header_util { display: flex; align-items: center; gap:2.4rem; }
header .language a { display: block; padding: 0px 6px; font-weight: 800; font-size: var(--font-size-15); }
header .btn_hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 4.8rem; padding: 1.5rem 1.3rem; background: var(--key-blue-deep-color); border-radius: 50%; aspect-ratio: 1/1; cursor: pointer; }
header .btn_hamburger span { width: 100%; height: 2px; background: white; border-radius: 2px; }

/* Depth 1 */
header .header_inner nav > ul { display: flex; }
header .header_inner nav > ul > li > a { display: block; height: 4.2rem; padding: 0 4rem; font-weight: 600; font-size: var(--font-size-18); }
header .header_inner nav > ul > li:first-child > a { padding-left: 0; }
header .header_inner nav > ul > li > a span { position: relative; line-height: 4.2rem; }
header .header_inner nav > ul > li > a span::before { content: ''; position: absolute; left:0; bottom:-2.4rem; display: block; width: 100%; height: 4px; background: var(--key-green-light-color); transform: scale(0,1); transition: .3s; }

/* Depth 2 */
header .header_inner .depth_2 { width: 100%; position: absolute; left:0; bottom:0; transform: translateY(100%); transition: .3s; opacity: 0; visibility: hidden; }
header .header_inner .depth_2 > ul { display: flex; gap:2.4rem; padding-top: 4.2rem; }
header .header_inner .depth_2 > ul > li { width: calc((100% - 9.6rem)/5); }
header .header_inner .depth_2 > ul > li:has(.col_2) { width: calc(((100% - 9.6rem)/5)*2); }
header .header_inner .depth_2 > ul > li:has(.col_2) .depth_3 ul { display: flex; flex-wrap:wrap; gap: 0 1.6rem; }
header .header_inner .depth_2 > ul > li:has(.col_2) .depth_3 li { width: calc((100% - 1.6rem)/2); }
header .header_inner .depth_2 > ul > li > a { display: block; padding: 1.2rem 0; border-bottom: 1px solid #DDDDDD; transition: .3s; font-weight: 600; color:var(--sub-black); font-size: var(--font-size-18); }

/* Depth 3 */
header .header_inner .depth_3 { padding-top: 1.6rem; }
header .header_inner .depth_3 a { display: block; padding:.8rem 1.3rem; font-size: var(--font-size-16); transition: .3s; border-radius: 1rem; opacity: 0.8; }

/* Hover */
.header_hover { position: absolute; left:50%; top:0; transform: translateX(-50%); display: flex; width: 98%; max-width: 1860px; height: 396px; background: white; border-radius: 0 0 4.5rem 4.5rem; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; transition: .3s; overflow: hidden; }
.header_hover .header_desc { position: relative; width: 40rem; padding: 5rem; padding-top: 13.4rem; background: var(--key-blue-deep-color); color:white; text-align: right; overflow: hidden; }
.header_hover .header_desc::before { content: ''; position: absolute; right:-8%; bottom:-3%; width: 33rem; aspect-ratio: 329/224; background: url('/resources/img/common/header_simbol.svg') no-repeat center/contain; }
.header_hover .header_desc #header_desc_title { font-size: var(--font-size-28); font-weight: 700; }
.header_hover .header_desc #header_desc_text { display: inline-block; max-width: 206px; margin-top: .8rem; font-size: var(--font-size-16); }

header:has(.header_gnb nav > ul > li:hover) .header_hover { opacity: 1; visibility: visible; }
header:has(.header_gnb nav > ul > li:hover) .logo { background: url("/resources/img/logo_w.png") no-repeat center/contain; }
header .header_inner .header_gnb nav > ul > li:hover a span::before { transform: scale(1); }
header .header_inner .header_gnb nav > ul > li:hover .depth_2 { opacity: 1; visibility: visible; }
header .header_inner .depth_2 > ul > li:hover > a { border-bottom: 1px solid #888888; color:var(--main-black); }
header .header_inner .depth_2 > ul > li:hover .depth_3 a { opacity: 1; }
header .header_inner .depth_3 a:hover { background: #F9F9F9; }

/* Mobile Menu */
header .mobile_menu { visibility: hidden; z-index: 110; position: fixed; inset: 0; opacity: 0; }
header .mobile_menu::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.75); }
header .mobile_gnb { position: absolute; right:0; top:0; height: 100%; width: 100%; background: white; transition: .3s; }
header .mobile_gnb::before { content: ''; position: absolute; right:2%; bottom:4%; width: 30%; aspect-ratio: 329/224; background: url('/resources/img/common/header_simbol.svg') no-repeat center/contain; filter:invert(1); opacity: 0.6; }
header .mobile_gnb_top { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; padding-right: 112px; gap:10px; height: 133px; border-bottom: 1px solid #DDDDDD; }
header .mobile_gnb_top > div { display: flex; justify-content: space-between; align-items: center; gap:7rem; }
header .btn_mobile_close { position: absolute; right:40px; top:50%; width: 4.8rem; height: auto; background: var(--key-blue-deep-color); transform: translateY(-50%); border-radius: 50%; aspect-ratio: 1/1; cursor: pointer; }
header .btn_mobile_close span { position: absolute; left:50%; top:50%; width: 50%; height: 2px; background: white; border-radius: 2px; transform: translate(-50%,-50%) rotate(45deg); }
header .btn_mobile_close span:nth-child(2) { transform: translate(-50%,-50%) rotate(135deg); }

header .mobile_menu.active { visibility: visible; opacity: 1; }

/* Mobile Depth 1 */
header .mobile_gnb nav { position: relative; height: calc(100dvh - 133px); }
header .mobile_gnb nav > ul { display: flex; flex-direction: column; gap:30px; width: 24%; height: 100%; padding: 30px 40px; border-right: 1px solid #DDDDDD; }
header .mobile_gnb nav > ul > li > a { position: relative; display: block; width: 100%; font-size: 20px; font-weight: 600; line-height: 1.3; transition: .3s; }
header .mobile_gnb nav > ul > li > a span { line-height: 1.3; }
header .mobile_gnb nav > ul > li > a.active { color:var(--key-blue-light-color); }

/* Mobile Depth 2 */
header .mobile_gnb .depth_2 { display: none; position: absolute; top:0; right:0; width: 76%; height: calc(100dvh - 133px); padding: 30px 40px; padding-bottom: 70px !important; overflow-y: auto; }
header .mobile_gnb .depth_2 > ul { display: flex; gap:80px 20px; flex-wrap: wrap; }
header .mobile_gnb .depth_2 > ul > li { width: 40%; }
header .mobile_gnb .depth_2 > ul > li > a { display: block; width: 100%; margin-bottom: 15px; font-size: 20px; font-weight: 600; line-height: 1.3; }

/* Mobile Depth 3 */
header .mobile_gnb .depth_3 ul { display: flex; flex-direction: column; gap:20px; margin-top:20px; color:var(--sub-black); font-size: 18px; }
header .mobile_gnb .depth_3 ul a { display: block; width: 100%; }


/* Footer */
footer .footer_inner { max-width: 1440px; width: 92%; margin:0 auto; display: flex; align-items: center; justify-content: space-between; gap:4rem; }
footer .footer_top { padding: 2.6rem 0; background: var(--key-blue-deep-color); color:white; }
footer .footer_top a { color:white; }
footer .footer_top .footer_popups { display: flex; align-items: center; gap:2rem 4rem; font-weight: 500; }
footer .footer_top .link_green { gap:1.2rem; font-size: var(--font-size-20); font-weight: 500; }

/* Logo ~ 분원 */
footer .footer_bottom { padding: 6rem 0; background: #EAEAEA; color:var(--sub-black); }
footer .footer_bottom .footer_inner { display: grid; grid-template-columns: 1fr 400px; }
footer .footer_bottom a { color:var(--sub-black) }
footer .footer_bottom .footer_logo p { margin-top: .8rem; font-weight: 300; }
footer .footer_bottom .footer_chains { margin-top: 3.2rem; }
footer .footer_bottom .footer_chains ul { display: flex; gap:1.8rem; }
footer .footer_bottom .footer_chains li { flex:1; padding: 2.6rem 2.4rem; border-radius: 2rem; background: white; }
footer .footer_bottom .footer_chains li b { display: flex; align-items: center; gap:.8rem; font-weight: 600; font-size: var(--font-size-20); color:var(--key-blue-deep-color) }
footer .footer_bottom .footer_chains li p { margin-top: 1rem; margin-bottom: 1.6rem; }
footer .footer_bottom .footer_chains li a { display: flex; gap:.8rem; font-size: var(--font-size-17); }

/* 사업자등록번호 ~ Copyright */
footer .footer_bottom .footer_info_detail > div { display: flex; align-items: center; font-size: var(--font-size-15); }
footer .footer_bottom .footer_info_detail dl { position: relative; display: flex; gap:.8rem; margin-right: 1.6rem; padding-right: 1.6rem; }
footer .footer_bottom .footer_info_detail dl:not(:last-child)::after { content: ''; display: block; position: absolute; right: 0; top:50%; transform: translateY(-50%); width: 1px; height: 14px; background: var(--sub-black); }
footer .footer_bottom .footer_info_detail dt { font-weight: 600; }
footer .footer_bottom .footer_copy { font-size: var(--font-size-14); margin-top: .8rem; }

/* 상담 전화번호 안내 */
footer .footer_infos { max-width: 738px; }
footer .footer_tels { max-width: 404px; width: 100%; grid-row: 1/3; grid-column: 2/3; }
footer .footer_tels .footer_tels_title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
footer .footer_tels .footer_tels_title p { font-weight: 600; font-size: var(--font-size-24); color:var(--main-black); }
footer .footer_tels .more_btn { display: flex; align-items: center; gap: .8rem; }
footer .footer_tels ul { display: flex; flex-direction: column; gap:.8rem; }
footer .footer_tels li { display: flex; align-items: center; justify-content: space-between; }
footer .footer_tels li span { font-weight: 600; }
footer .footer_tels li a { color:var(--key-blue-deep-color) }


/* 개인정보처리방침 */
.popup { z-index: 120; display: none; max-width: 900px; width: 95%; position: fixed; top: 120px; height: calc(100vh - 235px); background-color: #fff; border: 1px solid var(--key-green-deep-color); left: 50%; transform: translateX(-50%); border-radius: 1rem; overflow: hidden; }
.popup .tit {font-size: var(--font-size-24); font-weight: 600; padding:0 0 20px; text-align: center; color: var(--key-green-deep-color);}
.popup .cont {padding: 5rem; line-height: 140%; height: calc(100vh - 282px); overflow: auto; border-top: 1px solid #eee;}
.popup .cont p {margin-top: 30px;}
.popup .cont p:first-child {margin-top: 0;}
.pop_dim_layer { z-index:110; display: none; position: fixed; background: rgba(0,0,0,.75); inset:0; }

.popup .close {width: 100%; padding: 10px; text-align: right; background-color: var(--key-green-deep-color); color: #fff; }
.popup .close span {display: inline-block; width: 20px; height: 20px; text-align: center; vertical-align: middle; border: 1px solid #eee; line-height: 20px; margin-right: 3px;}
.popup .close a {color: #fff;}


@media screen and (max-width:1840px){
	header .header_inner nav > ul > li > a { padding: 0 2rem; }
	header .header_inner .depth_3 a { padding: .8rem 1rem; }
	.header_hover .header_desc { width: 36rem; }
}

@media screen and (max-width:1640px){
	header .header_inner { gap:5rem; }
	header .logo { width: 25rem; }
	.header_hover .header_desc { width: 36rem; }

	.footer_logo img { width: 25rem; }
}
@media screen and (max-width:1440px){
	header .header_inner .language { display: none; }
	header .header_inner .link_green { display: none; }
	header .header_inner .depth_2 > ul { padding-top: 3rem; gap:1.2rem; }
	header .header_inner .depth_2 > ul > li { width: calc((100% - 4.8rem)/5); }
	header .header_inner .depth_2 > ul > li:has(.col_2) .depth_3 ul { gap:0 1rem; }
	header .header_inner .depth_3 a { padding: .6rem .8rem; }
	header .header_div { margin-left: 4rem; }
	.header_hover .header_desc { width: 34.5rem; padding-top: 12.4rem; }
	.header_hover { height: 346px; }
}
@media screen and (max-width:1200px){
	header .header_div { display: none; }
	.header_hover { display: none; }
	header .header_inner { height: 8rem; padding-top: 1rem; }

	.wrap.main { padding-top: 8rem; }

	footer .footer_infos { width: 620px; flex-shrink: 0; }
	footer .footer_bottom .footer_inner { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width:1024px){
	header .mobile_gnb_top { padding: 0 20px; padding-right: 70px; }
	header .btn_mobile_close { right: 20px; }
	header .mobile_gnb nav > ul { width: 200px; padding: 20px; }
	header .mobile_gnb nav > ul > li > a { font-size: 18px; }
	header .mobile_gnb .depth_2 { width: calc(100% - 200px); padding: 20px; }
	header .mobile_gnb .depth_2 > ul { gap:60px 20px; }
	header .mobile_gnb .depth_2 > ul > li > a { font-size: 18px; }
	header .mobile_gnb .depth_3 ul { font-size: 16px; }
	header .mobile_gnb_top > div { gap:4rem; }

	footer .footer_infos { width: 100%; }
	footer .footer_bottom .footer_inner { grid-template-columns: 1fr; justify-content: start; align-items: start; }
	footer .footer_tels { grid-row: auto; grid-column: auto; max-width: none; }
}

@media screen and (max-width:768px){
	header .mobile_gnb_top { flex-direction: column; justify-content: center; padding-right: 20px; height: 110px; }
	header .mobile_gnb_top > div { width: 100%; justify-content: start; gap:2rem; }
	header .btn_mobile_close { top:33%; }
	
	header .mobile_gnb nav { height: calc(100vh - 110px); }
	header .mobile_gnb nav > ul { width: 120px; }
	header .mobile_gnb nav > ul > li > a { font-size: 16px; }
	header .mobile_gnb .depth_2 { width: calc(100% - 120px); height: calc(100vh - 110px); }
	header .mobile_gnb .depth_2 > ul > li { width: 100%; }
	header .mobile_gnb .depth_2 > ul { gap: 40px 0; }
	header .mobile_gnb .depth_2 > ul > li > a { font-size: 16px; }
	header .mobile_gnb .depth_3 ul { gap:8px; margin-top: 10px; }

	footer .footer_bottom .footer_info_detail > div { flex-wrap:wrap; gap:1rem 0; }

	footer .footer_top { padding: 2rem 0; }
	footer .footer_top .footer_inner { flex-direction: column; align-items: start; gap:1rem 0; }
}

@media screen and (max-width:480px){
	footer .footer_bottom .footer_chains ul { flex-direction: column; }
	footer .footer_bottom .footer_info_detail > div { flex-direction: column; align-items: start; }
	footer .footer_bottom .footer_info_detail dl:not(:last-child)::after { display: none; }
}