/*공통*/
@import url("reset.css");
@import url("board.css");


:root {

	--max-w : 1580px;
	--wid-w : 1850px;
	--conts-w : 1360px;
	--vh : 100vh;
	--nvh : calc(var(--vh, 1vh) * 100);

	--main-color : #0BA29A;
	--sub-color : #FF5624;
	--black : #222;
	--gray : #C0BDB9;
	--font-gray : #777776;
	--font-gray-2 : #5E5E5E;

	--Poppins : 'Poppins', sans-serif;
	--Roboto : 'Roboto', sans-serif;
	--Montserrat : 'Montserrat', sans-serif;
	--NanumSquare : 'NanumSquare', sans-serif;
	--Archivo : 'Archivo', sans-serif;
	--KoPubWorld : 'KoPubWorld';
	--Sanchez : "Sanchez", serif;
	--NotoKR : "Noto Sans KR", sans-serif;

	--font-13 : 13px;
	--font-14 : 14px;
	--font-16 : 16px;
	--font-18 : 18px;
	--font-20 : 20px;
	--font-22 : 22px;
	--font-24 : 24px;
	--font-26 : 26px;
	--font-28 : 28px;
	--font-30 : 30px;
	--font-32 : 32px;
	--font-36 : 36px;
	--font-40 : 40px;
	--font-50 : 50px;
	--font-54 : 54px;
	--font-60 : 60px;
	--font-72 : 72px;

	--gap-8 : 8px;
	--gap-16 : 16px;
	--gap-20 : 20px;
	--gap-24 : 24px;
	--gap-32 : 32px;
	--gap-40 : 40px;
	--gap-50 : 50px;
	--gap-60 : 60px;
	--gap-80 : 80px;
	--gap-100 : 100px;
	--gap-120 : 120px;
	--gap-140 : 140px;
	--gap-160 : 160px;
	--gap-200 : 200px;

	--radius-8 : 8px;
	--radius-16 : 16px;
	--radius-20 : 20px;
	--radius-24 : 24px;
	--radius-32 : 32px;

}

@media screen and (max-width: 1280px) {
	:root {
		--gap-100 : 80px;
		--gap-120 : 80px;
		--gap-140 : 100px;
		--gap-160 : 140px;
		--gap-200 : 160px;
	}
}

@media screen and (max-width: 1024px) {
	:root {
		--font-18 : 16px;
		--font-20 : 18px;
		--font-22 : 20px;
		--font-26 : 24px;
		--font-28 : 26px;
		--font-30 : 28px;
		--font-32 : 28px;
		--font-36 : 34px;
		--font-40 : 36px;
		--font-50 : 42px;
		--font-54 : 48px;
		--font-60 : 52px;
		--font-72 : 62px;

		--gap-32 : 28px;
		--gap-40 : 36px;
		--gap-50 : 42px;
		--gap-60 : 54px;
		--gap-80 : 70px;
		--gap-140 : 80px;
		--gap-160 : 120px;
		--gap-200 : 140px;
	}
}

@media screen and (max-width: 768px) {
	:root {
		--font-13 : 12px;
		--font-14 : 12px;
		--font-16 : 14px;
		--font-18 : 15px;
		--font-20 : 18px;
		--font-22 : 18px;
		--font-24 : 20px;
		--font-26 : 22px;
		--font-28 : 22px;
		--font-30 : 24px;
		--font-32 : 24px;
		--font-36 : 28px;
		--font-40 : 32px;
		--font-50 : 36px;
		--font-54 : 40px;
		--font-60 : 42px;
		--font-72 : 50px;

		--gap-16 : 14px;
		--gap-20 : 18px;
		--gap-24 : 22px;
		--gap-32 : 26px;
		--gap-40 : 32px;
		--gap-50 : 36px;
		--gap-60 : 48px;
		--gap-80 : 60px;
		--gap-100 : 60px;
		--gap-120 : 60px;
		--gap-140 : 60px;
		--gap-160 : 100px;
		--gap-200 : 120px;

		--radius-16 : 12px;
		--radius-20 : 15px;
		--radius-24 : 18px;
		--radius-32 : 26px;
	}
}

@media screen and (max-width: 480px) {
	:root {
		--font-13 : 11px;
		--font-14 : 11px;
		--font-16 : 13px;
		--font-18 : 14px;
		--font-20 : 16px;
		--font-22 : 16px;
		--font-24 : 17px;
		--font-26 : 18px;
		--font-28 : 18px;
		--font-30 : 20px;
		--font-32 : 20px;
		--font-36 : 22px;
		--font-40 : 24px;
		--font-50 : 32px;
		--font-54 : 32px;
		--font-60 : 36px;
		--font-72 : 42px;

		--gap-8 : 5px;	
		--gap-16 : 10px;
		--gap-20 : 14px;
		--gap-24 : 18px;
		--gap-32 : 22px;
		--gap-40 : 24px;
		--gap-50 : 28px;
		--gap-60 : 32px;
		--gap-80 : 40px;
		--gap-100 : 40px;
		--gap-120 : 40px;
		--gap-140 : 40px;
		--gap-160 : 80px;
		--gap-200 : 100px;

		--radius-8 : 4px;
		--radius-16 : 6px;
		--radius-20 : 10px;
		--radius-24 : 12px;
		--radius-32 : 16px;
	}
}

body {width:100%;}

#wrap {min-width:320px;}


.backdrop {width: 100%; height: 100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(5px); position: fixed; left: 0; top: 0px; z-index: 900; }

header {width:100%; height:80px; position:fixed; left:0; top:0; z-index:1000; }
header::before {content:""; transition: 0.3s; width: 100%; z-index: -1; height: 100%; position: absolute; left: 0; top: 0; background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); opacity: 0;}
header::after {content:""; width: 100%; height: 514px; transition: 0.3s; position: absolute; top: 0px; left: 0; background: #fff;  z-index: -1; transform: translateY(-30px); opacity: 0; pointer-events: none;}
header > .inner {width:92%; max-width:var(--max-w); height:100%; margin:0 auto;}
header .header-wrap {width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative;}
header .header-wrap .logo {width: 206px; height: 30px; background-image:url(/img/com/logo_wh.svg); background-size:cover; position:absolute; left:0; top:50%; transform:translateY(-50%); display:block; font-size:0; background-position: center; background-size: cover; background-repeat: no-repeat;}
header .header-wrap .gnb-wrap {}
header .header-wrap .gnb-wrap .gnb-box {display:flex; align-items:center; gap:var(--gap-80);}
header .header-wrap .gnb-wrap .gnb-box li.gnb {position: relative;}
header .header-wrap .gnb-wrap .gnb-box li.gnb a {font-size:var(--font-18); color:#fff; line-height: 80px;}
/* header .header-wrap .gnb-wrap .gnb-box li.gnb .snb-wrap { position: absolute; top: 80px; left: 50%; transform: translate(-50%,-30px); background-color: rgba(255,255,255,0.8); box-shadow: 0 0 30px rgba(0,0,0,0.10); backdrop-filter: blur(10px); width: 190px; padding: 10px 0; opacity: 0; pointer-events: none; transition: 0.4s;} */
header .header-wrap .gnb-wrap .gnb-box li.snb a {font-size: 16px; color: #5E5E5E; display: block; width: 100%; text-align: center; line-height: 50px; font-weight: normal; white-space: nowrap;}
header .header-wrap .header-menu {position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:flex-end; gap:var(--gap-32);}
header .header-wrap .header-menu button {width:32px; height:32px; font-size:0; position:relative; cursor:pointer; background-size:cover; background-position:center; background-repeat:no-repeat;}
header .header-wrap .header-menu button.btn-search {background-image:url(/img/com/icon_search.svg);}
header .header-wrap .header-menu button.btn-sitemap:before,
header .header-wrap .header-menu button.btn-sitemap:after {content:""; width:20px; height:2px; background:#fff; position:absolute; left:50%; transform:translate(-50%,-50%);}
header .header-wrap .header-menu button.btn-sitemap:before {top:calc(50% - 7px);}
header .header-wrap .header-menu button.btn-sitemap:after {top:calc(50% + 7px);}
header .header-wrap .header-menu button.btn-sitemap span {display:block; width:20px; height:2px; background:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}


header .header-wrap .gnb-wrap .gnb-box li.snb a:hover {color: #FF5624;}

/* header.gnbAll {background-color: #fff;} */
header.gnbAll::before {opacity: 1;}
header.gnbAll .header-wrap .logo {background-image: url(/img/com/logo_color.svg)}
header.gnbAll .header-wrap .header-menu button.btn-search {background-image: url(/img/com/icon_search_b.svg);}
header.gnbAll .header-wrap .header-menu button.btn-sitemap span {opacity: 0;}
header.gnbAll .header-wrap .header-menu button.btn-sitemap:before {top: 50%; transform: translate(-50%,-50%) rotate(45deg); background-color: #222;}
header.gnbAll .header-wrap .header-menu button.btn-sitemap:after {top: 50%; transform: translate(-50%,-50%) rotate(-45deg); background-color: #222;}

header.scroll::before {opacity: 1;  }
header.scroll .header-wrap .logo { background-image: url(/img/com/logo_color.svg); }
header.scroll .header-wrap .gnb-wrap .gnb-box li.gnb > a {color: #222;}
header.scroll .header-wrap .header-menu button.btn-search {background-image: url(/img/com/icon_search_b.svg);}
header.scroll .header-wrap .header-menu button.btn-sitemap span {background-color: #222;}
header.scroll .header-wrap .header-menu button.btn-sitemap:before, 
header.scroll .header-wrap .header-menu button.btn-sitemap:after {background-color: #222; }

header.on .header-wrap .logo { background-image: url(/img/com/logo_color.svg); }
header.on .header-wrap .gnb-wrap .gnb-box li.gnb > a {color: #222;}
header.on .header-wrap .header-menu button.btn-search {background-image: url(/img/com/icon_search_b.svg);}
header.on .header-wrap .header-menu button.btn-sitemap span {background-color: #222;}
header.on .header-wrap .header-menu button.btn-sitemap:before, 
header.on .header-wrap .header-menu button.btn-sitemap:after {background-color: #222; }

/* search */
header .search-wrap {position: absolute; left: 0; top: 00px; background-color: #fff; width: 100%; opacity: 0; pointer-events: none; transform: translateY(-10%); transition: 0.4s;}
header .search-wrap .search-box {width: 92%; max-width: var(--max-w); margin: auto; position: relative;}
header .search-wrap .search-box .btn-close-search {width: 32px; height: 32px; position: absolute; right: 0; top: 24px;}
header .search-wrap .search-box .btn-close-search::before ,
header .search-wrap .search-box .btn-close-search::after {content:""; width: 20px; height: 2px; background-color: #222; position: absolute; left: 50%; top: 50%; }
header .search-wrap .search-box .btn-close-search::before {transform: translate(-50%,-50%) rotate(45deg);}
header .search-wrap .search-box .btn-close-search::after {transform: translate(-50%,-50%) rotate(-45deg);}
header .search-wrap .search-box .box-wrap { width: 90%; max-width: 896px; margin: auto; padding-top: 225px; padding-bottom: 140px;}
header .search-wrap .search-box .search-input-box {border-bottom: 2px solid #222; padding: 0 20px; position: relative; display: flex; align-items: center;}
header .search-wrap .search-box .search-input-box input {height: 56px; width: 100%; font-size: var(--font-20); border: none;}
header .search-wrap .search-box .search-input-box .btn-search {width: 32px; height: 32px; background: url(/img/com/icon_search_b.svg); font-size: 1px; color: transparent; flex-shrink: 0; background-size: cover;}
header .search-wrap .search-box .keyword-box {display: flex; flex-wrap:wrap; margin-top: 24px; gap: 8px; }
header .search-wrap .search-box .keyword-box span {white-space: nowrap; color: #777776;  padding: 0 16px; line-height: 40px; font-size: var(--font-18); border: 1px solid #777776; border-radius: 100px; box-sizing: border-box;}
header .search-wrap .search-box .keyword-box span::before {content:"#"; display: inline-block;margin-right: 4px;}
header .search-wrap .search-box .keyword-box span a {white-space: nowrap; line-height: 1; font-size: inherit; color: inherit; }

header .search-wrap.active {opacity: 1; pointer-events: auto; transform: translateY(0);}
header:has(.search-wrap.active) .header-wrap .logo {z-index: 5; background-image: url(/img/com/logo_color.svg);}

header::before {content:""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; background: rgba(255,255,255,0.85); backdrop-filter: blur(10px);}
/*header .header-wrap .logo { background-image: url(/img/com/logo_color.svg);}
header .header-wrap .gnb-wrap .gnb-box li.gnb a {color: #222;}
header .header-wrap .header-menu button.btn-search {background-image: url(/img/com/icon_search_b.svg);}
header .header-wrap .header-menu button.btn-sitemap span {background-color: #222;}
header .header-wrap .header-menu button.btn-sitemap:before, 
header .header-wrap .header-menu button.btn-sitemap:after {background-color: #222; }*/

header.gnbAll::before {background:#fff;}


@media screen and (max-width: 1280px) {
	header .header-wrap {justify-content:space-between;}
	header .header-wrap .logo {position:relative; left:auto; top:auto; transform:none;}
	header .header-wrap .gnb-wrap .gnb-box {gap:var(--gap-40);}
	header .header-wrap .gnb-wrap .gnb-box li.gnb .snb-wrap {width: 140px;}
	header .header-wrap .header-menu {position:relative; right:auto; top:auto; transform:none;}
}

@media screen and (min-width: 1025px){
	header .header-wrap .gnb-wrap .gnb-box li.gnb .snb-wrap { position: absolute; top: 80px; left: 50%; transform: translate(-50%,-30px); background-color: rgba(255,255,255,0.8); box-shadow: 0 0 30px rgba(0,0,0,0.10); backdrop-filter: blur(10px); width: 190px; padding: 10px 0; opacity: 0; pointer-events: none; transition: 0.4s;}

	header .header-wrap .gnb-wrap .gnb-box li.gnb:hover .snb-wrap {opacity: 1; transform: translate(-50%,0); pointer-events: auto; }

	header.gnbAll::after {opacity: 1; transform: translateY(0); pointer-events: auto;}
	header.gnbAll .header-wrap .gnb-wrap .gnb-box li.gnb > a {color: #222;}
	header.gnbAll .header-wrap .gnb-wrap .gnb-box li.gnb .snb-wrap { box-shadow:none;opacity: 1; transform: translate(-50%,0); pointer-events: auto; background-color: transparent; transition: all 0.4s, background-color 0s; width: fit-content;}
	header.gnbAll .header-wrap .gnb-wrap .gnb-box li.snb a {line-height: 46px;}
}

@media screen and (max-width: 1024px) {
	/* header .header-wrap .gnb-wrap {display:none;} */

	
	header .header-wrap .gnb-wrap {position: fixed; right: 0; top: 80px;  width: 100%; height: calc(100% - 80px); max-width: 500px; border-top: 1px solid rgba(192,189,185,0.4); transition: 0s; transform: translateX(100%); }
	header .header-wrap .gnb-wrap .gnb-box {flex-direction: column; padding-top: 10px; gap: 0; width: 100%; background-color: #fff; height: 100%; overflow-y: auto;}
	header .header-wrap .gnb-wrap .gnb-box li.gnb {width: 100%; text-align: left;}
	header .header-wrap .gnb-wrap .gnb-box li.gnb > a {color: #222; padding: 0 28px; line-height: 54px; display: block; font-weight: bold;}
	header .header-wrap .gnb-wrap .gnb-box li.gnb > a::before {content:""; width: 10px; height: 10px; border: solid #777776; position: absolute; right: 40px; top: 20px; transform: rotate(45deg); border-width: 0px 1px 1px 0; transition: 0.3s;}
	header .header-wrap .gnb-wrap .gnb-box li.gnb > a[data-id="consulting"]:before {display:none;}
	header .header-wrap .gnb-wrap .gnb-box li.gnb .snb-wrap {width: 100%; background: rgba(192,189,185,0.2); backdrop-filter: none; box-shadow: none; transition: unset; opacity: 1; display: none; position: static; text-align: left;}
	header .header-wrap .gnb-wrap .gnb-box li.snb a {font-size: 14px; color: #222; text-align: left; line-height: 54px; padding: 0 28px;}

	header.gnbAll::before {background-color: #fff; backdrop-filter: none;}
	header.gnbAll .header-wrap .gnb-wrap {transform: translateX(0);  width: 100%; transition: 0.4s;}
	header .header-wrap .gnb-wrap .gnb-box li.gnb.on > a::before {transform: rotate(-135deg);}
}

@media screen and (max-width: 768px) {
	header .header-wrap .logo {width:150px; height:22px;}
	header .header-wrap .header-menu button {width: 28px; height: 28px;}

	header .header-wrap .gnb-wrap {height: calc(100% - 70px); top: 70px; }

	header .search-wrap .search-box .box-wrap {padding: 180px 0 100px;}
	header .search-wrap .search-box .keyword-box span {line-height: 36px;}
}

@media screen and (max-width: 480px) {
	header {height:70px;}
	header .header-wrap .logo {width:136px; height:20px;}


	header .search-wrap .search-box .box-wrap {padding: 130px 0 60px;}
	header .search-wrap .search-box .search-input-box {padding: 0 12px;}
	header .search-wrap .search-box .search-input-box input {height: 42px;}
	header .search-wrap .search-box .search-input-box .btn-search {width: 28px; height: 28px;}
	header .search-wrap .search-box .keyword-box span {line-height: 32px; padding: 0 12px;}
}



.com-banner {width:100%; padding:var(--gap-32) 0; background:rgba(192,189,185,0.1);}
.com-banner > .wrap {width:92%; max-width:var(--max-w); margin:0 auto; display:flex; align-items:center; justify-content:space-between;}
.com-banner .tlt {font-size:var(--font-32); font-weight:700;}
.com-banner .button-wrap {display:flex; align-items:center; justify-content:flex-end; gap:var(--gap-20);}
.com-banner .button-wrap .btn-banner {width:436px; background:#fff; padding:calc(var(--gap-40) * 0.7) calc(var(--gap-40) * 0.75); box-shadow:0 0 6px rgba(0,0,0,0.05); display:flex; align-items:center; gap:var(--gap-20); position:relative;}
.com-banner .button-wrap .btn-banner .icon {width:var(--gap-80); height:var(--gap-80); border-radius:50%; background-color:rgba(255,86,36,0.2); background-size:cover; background-position:center; background-repeat:no-repeat;}
.com-banner .button-wrap .btn-banner .conts {flex:1;}
.com-banner .button-wrap .btn-banner .conts em {display:block; font-size:var(--font-28); font-weight:400;}
.com-banner .button-wrap .btn-banner .conts span {display:block; font-size:var(--font-16); color:var(--font-gray);}
.com-banner .button-wrap .btn-banner a {display:block; position:absolute; left:0; top:0; width:100%; height:100%;}
.com-banner .button-wrap .btn-banner.inquiry .icon {background-image:url(/img/com/icon_com_inquiry.svg);}
.com-banner .button-wrap .btn-banner.newsletter .icon {background-image:url(/img/com/icon_com_newsletter.svg);}

@media screen and (max-width: 1280px) {
	.com-banner > .wrap {flex-wrap:wrap; gap:var(--gap-32);}
	.com-banner .tlt {width:100%; text-align:center;}
	.com-banner .button-wrap {width:100%; justify-content:center;}
	.com-banner .button-wrap .btn-banner {width:calc((100% - var(--gap-20)) / 2); max-width:430px;}
	.com-banner .button-wrap .btn-banner .icon {width:var(--gap-60); height:var(--gap-60);}
}

@media screen and (max-width: 1024px) {
	.com-banner .button-wrap .btn-banner {max-width:350px;}
	.com-banner .button-wrap .btn-banner .conts span i {display:block;}
}

@media screen and (max-width: 648px) {
	.com-banner .button-wrap {flex-wrap:wrap;}
	.com-banner .button-wrap .btn-banner {max-width:240px; flex-wrap:wrap;}
	.com-banner .button-wrap .btn-banner .icon {width:var(--gap-80); height:var(--gap-80); margin:0 auto;}
	.com-banner .button-wrap .btn-banner .conts {width:100%; flex:auto; text-align:center;}
	.com-banner .button-wrap .btn-banner .conts em {font-size:var(--font-24);}
	.com-banner .button-wrap .btn-banner .conts span {display:none;}
	.com-banner .button-wrap .btn-banner .conts span i {display:inline-block;}
}

@media screen and (max-width: 480px) {
	.com-banner .button-wrap {flex-wrap:wrap;}
	.com-banner .button-wrap .btn-banner {padding:10px;}
	.com-banner .button-wrap .btn-banner .conts em {font-size:var(--font-18);}
}



footer {width:100%; height:300px; background:#5E5E5E; padding:var(--gap-24) 0;}
footer > .wrap {width:92%; max-width:var(--max-w); margin:0 auto; height:100%;}
footer .footer-wrap {width:100%; height:100%; display:flex; align-items:center; justify-content:space-between; color:#fff;}
footer .footer-wrap .lf-box .logo {width:257px; height:38px; font-size:0; background:url(/img/com/logo_well.png) center no-repeat; background-size:cover;}
/* s : 240819 수정 */
footer .footer-wrap .lf-box .logo a {font-size:0; display:block; width:100%; height:100%;}
/* e : 240819 수정 */
footer .footer-wrap .lf-box .company-info {margin-top:var(--gap-32);}
footer .footer-wrap .lf-box .company-info li {display:flex; align-items:center; gap:var(--gap-8) var(--gap-20); margin-top:var(--gap-8);}
footer .footer-wrap .lf-box .company-info li:first-child {margin-top:0;}
footer .footer-wrap .lf-box .company-info li span {display:block; font-size:var(--font-16); position:relative;}
footer .footer-wrap .lf-box .company-info li span:before {content:""; width:1px; height:var(--font-16); box-sizing:border-box; border-left:1px solid #fff; position:absolute; left:calc((var(--gap-20) / 2) * -1); top:50%; transform:translateY(-50%);}
footer .footer-wrap .lf-box .company-info li span:first-child:before {display:none;}
footer .footer-wrap .rt-box .sns-wrap {display:flex; align-items:center; gap:var(--gap-16);}
footer .footer-wrap .rt-box .sns-wrap a {width:36px; height:36px; border-radius:50%; font-size:0; display:block; background-size:cover; background-repeat:no-repeat; background-position:center;}
footer .footer-wrap .rt-box .sns-wrap a.youtube {background-image:url(/img/com/icon_youtube.svg);}
footer .footer-wrap .rt-box .sns-wrap a.instagram {background-image:url(/img/com/icon_instagram.svg);}
footer .footer-wrap .rt-box .sns-wrap a.facebook {background-image:url(/img/com/icon_facebook.svg);}
footer .footer-wrap .rt-box .copyright {margin-top:var(--gap-32); font-size:var(--font-16);}
footer .footer-wrap .rt-box .fnb {margin-top:var(--gap-8); display:flex; align-items:center; gap:var(--gap-32);}
footer .footer-wrap .rt-box .fnb a {color:#fff; font-size:var(--font-16); position:relative;}
footer .footer-wrap .rt-box .fnb a:before {content:""; width:2px; height:var(--font-16); background:#fff; position:absolute; left:calc(((var(--gap-32) / 2) + 1px) * -1); top:50%; transform:translateY(-50%);}
footer .footer-wrap .rt-box .fnb a:first-child:before {display:none;}
footer .footer-wrap .rt-box .fnb-list {width:100%; position:relative; display:none;}
footer .footer-wrap .rt-box .fnb-list .selected-option,
footer .footer-wrap .rt-box .fnb-list .btn-fnb {width:100%; height:48px; display:flex; align-items:center; padding:0 var(--gap-16); position:relative; color:#fff; font-size:var(--font-16);}
footer .footer-wrap .rt-box .fnb-list .selected-option {display:none;}
footer .footer-wrap .rt-box .fnb-list .selected-option:after,
footer .footer-wrap .rt-box .fnb-list .btn-fnb:after {content:""; width:0; height:0; border:solid transparent; border-width:0 4px; border-bottom:4px solid #fff; position:absolute; right:var(--gap-16); top:50%; transform:translateY(-50%);}
footer .footer-wrap .rt-box .fnb-list .fnb-wrap {width:100%; position:absolute; left:50%; top:-97px; transform:translateX(-50%); display:none;}
footer .footer-wrap .rt-box .fnb-list .fnb-wrap ul li a {width:100%; height:48px; display:flex; align-items:center; padding:0 var(--gap-16); font-size:var(--font-16); color:#fff;}
footer .footer-wrap .rt-box .fnb-list.active .selected-option {display:flex;}
footer .footer-wrap .rt-box .fnb-list.active .btn-fnb {display:none;}
footer .footer-wrap .rt-box .fnb-list.active .selected-option,
footer .footer-wrap .rt-box .fnb-list.active .btn-fnb {background:#424241; border-radius:0 0 10px 10px;}
footer .footer-wrap .rt-box .fnb-list.active .selected-option:after,
footer .footer-wrap .rt-box .fnb-list.active .btn-fnb:after {transform:translateY(-50%) scaleY(-1);}
footer .footer-wrap .rt-box .fnb-list.active .fnb-wrap {background:#424241; border-radius:10px 10px 0 0; display:block;}

@media screen and (max-width: 1280px) {
	footer {padding:var(--gap-60) 0;}
	footer .footer-wrap {flex-wrap:wrap; gap:var(--gap-40);}
	footer .footer-wrap .lf-box, footer .footer-wrap .rt-box {width:100%;}
}

@media screen and (max-width: 1024px) {
	footer .footer-wrap .lf-box .logo {width:216px; height:32px;}
}

@media screen and (max-width: 648px) {
	footer .footer-wrap .lf-box .company-info li {flex-wrap:wrap;}
	footer .footer-wrap .lf-box .company-info li span {width:100%;}
	footer .footer-wrap .lf-box .company-info li span:before {display:none;}
}

@media screen and (max-width: 480px) {
	footer .footer-wrap .lf-box .logo {width:169px; height:25px;}
	footer .footer-wrap .rt-box .sns-wrap a {width:32px; height:32px;}
	footer .footer-wrap .rt-box .copyright,
	footer .footer-wrap .rt-box .fnb a {font-size:var(--font-14);}
	footer .footer-wrap .rt-box .fnb a:before {height:var(--font-14);}
	footer .footer-wrap .rt-box .copyright {margin-top:0; padding-top:10px; border-top:1px solid rgba(255,255,255,0.1);}
	footer .footer-wrap .rt-box .fnb {display:none;}
	footer .footer-wrap .rt-box .fnb-list {display:block;}
}


/* s : 240819 수정 */
.com-button-wrap {width:100%; margin-top:calc(var(--gap-80) * 1.1);}
.button-box {display:flex; align-items:center; justify-content:center; gap:var(--gap-16); flex-wrap:wrap; width:max-content; margin:0 auto;}

.button {flex:1; display:flex; align-items:center; justify-content:center; position:relative; padding:0 var(--gap-32); border:solid; border-width:1px;}
.button span {position:relative;}

.button.bold {font-weight:700;}
.button.basic {font-size:var(--font-22); height:64px; width:max-content; min-width:300px;}
.button.large {font-size:var(--font-24); height:68px;}
.button.short {min-width:227px;}
.button.mini {width:max-content; height:42px; font-size:var(--font-16); padding:0 var(--gap-32);}

.button.line {border-color:var(--sub-color); background:#fff; color:var(--sub-color);}
.button.fill {border-color:var(--sub-color); background:var(--sub-color); color:#fff;}
.button.disabled {border-color:#9E9D9B; background:#9E9D9B; color:#fff; pointer-events:none;}

.button.dir span:after {content:""; background:url(/img/com/icon_dir.svg) center no-repeat; background-size:cover; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.button.basic.dir span {padding-right:calc(var(--gap-32) + var(--gap-8));}
.button.basic.dir span:after {width:var(--gap-32); height:var(--gap-32);}
.button.large.dir span {padding-right:calc(var(--gap-32) + var(--gap-8));}
.button.large.dir span:after {width:var(--gap-32); height:var(--gap-32);}

.button.round {border-radius:100px;}

.btn-more {font-size:var(--font-20); color:var(--font-gray); position:relative; padding-top:calc(var(--gap-8) + var(--font-16));}
.btn-more:before {content:""; width:var(--font-16); height:2px; background:var(--font-gray); position:absolute; left:50%; top:calc((var(--font-16) - 2px) / 2); transform:translateX(-50%);}
.btn-more:after {content:""; width:2px; height:var(--font-16); background:var(--font-gray); position:absolute; left:50%; top:0; transform:translateX(-50%);}


@media screen and (max-width: 768px) {
	.button.basic {height:56px; min-width:260px;}
	.button.large {height:60px;}
	.button.short {min-width:180px;}
	.button.mini {height:40px;}
}

@media screen and (max-width: 480px) {
	.button.basic {height:52px; min-width:200px;}
	.button.large {height:56px;}
	.button.short {min-width:140px;}
	.button.mini {height:36px;}
}

.float {position: fixed; right: 0; bottom:0; transform:translateY(0); z-index: 900;}
.float .inwrap {max-width: 1920px; position: relative;}
.float .float-btn {position: absolute; right: 30px; bottom: 50px; background-color: #fff; padding: 16px 10px; text-align: center; box-shadow: 0 0 10px rgba(0,0,0,0.10); width: 80px; border-radius: 40px; transform-origin: 50% 100%; transform: scale(0.6); transition: 0.4s; opacity: 0; pointer-events: none;}
.float .float-btn .icon {width: 32px; height: 32px; display: inline-block; background-position: center; background-repeat: no-repeat; background-size: cover;}
.float .float-btn .inquiry .icon {background-image: url(/img/com/icon_inquiry.svg);}
.float .float-btn .newsletter .icon {background-image: url(/img/com/icon_newsletter.svg);}
.float .float-btn .test .icon {background-image: url(/img/com/icon_test.svg);}
.float .float-btn .txt { width: 100%; color: #777776; font-size: 12px; display: block; font-weight: normal; }

.float .float-btn .inquiry {margin-top: 8px; margin-bottom: 22px;}
.float .float-btn .newsletter {margin-bottom: 22px;}
.float .float-btn .test {margin-bottom: 12px;}
/* e : 240819 수정 */

.float .float-btn .float-close {font-size: 1px; color: transparent; border-radius: 50px; width: 54px; height: 54px; border: 1px solid rgba(192,189,185,0.6); opacity: 0.9; display: block; margin: auto; position: relative;}
.float .float-btn .float-close::before,
.float .float-btn .float-close::after {content:""; width: 17px; height: 2px; position: absolute; left: 50%; top: 50%; background-color: #777776;}
.float .float-btn .float-close::before {transform: translate(-50%,-50%) rotate(45deg);}
.float .float-btn .float-close::after {transform: translate(-50%,-50%) rotate(-45deg);}

.float .float-trg {width: 54px; height: 54px; right: 43px; bottom: 63px; border-radius: 50px; background-color: rgba(255,86,36,0.8); background-image: url(/img/com/icon_floating.svg); background-position: center; background-size: cover; background-repeat: no-repeat; font-size: 1px; color: transparent; position: absolute; cursor: pointer; transition: 0.4s;}

.float.active .float-btn {transform: scale(1); opacity: 1; pointer-events: auto; }
.float.active .float-trg {transform: scale(0.5); opacity: 0; pointer-events: none;}

@media screen and (max-width:767px){
  .float .float-btn {right: 20px; bottom: 30px; padding: 12px 6px; width: 62px;}
  .float .float-btn .inquiry {margin-top: 6px; margin-bottom: 16px;}
  .float .float-btn .newsletter {margin-bottom: 16px;}
  .float .float-btn .test {margin-bottom: 10px;}
  .float .float-btn .float-close {width: 46px; height: 46px;}
  .float .float-trg {right: 26px; bottom: 42px; width: 48px; height: 48px;}
}


.layer-popup {width:90%; background:#fff; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1000; box-shadow:0 0 10px rgba(0,0,0,0.1); display:none;}
.layer-popup.active {display:block;}
.layer-popup > .inner {width:100%; padding:var(--gap-32); padding-bottom:calc(var(--gap-80) * 0.7);}
.layer-popup .btn-layer-close {width:var(--gap-32); height:var(--gap-32); font-size:0; background:url(/img/com/icon_close_2.svg) center no-repeat; background-size:cover; cursor:pointer; display:block;}
.layer-popup .popup-conts {width:100%; max-height:calc(var(--nvh) * 0.8); overflow-y:auto;}
.layer-popup .popup-conts .conts-wrap {width:100%; height:100%;}

.test-popup {max-width:624px;}
.test-popup .test-popup-close {margin-left:auto}
.test-popup .popup-conts .title-box {width:100%; text-align:center;}
.test-popup .popup-conts .title-box .title {font-size:var(--font-32); font-weight:700;}
.test-popup .popup-conts .title-box .txt {width:100%; margin-top:var(--gap-8); font-size:var(--font-18); color:var(--font-gray);}
.test-popup .popup-conts .img-box {width:60%; max-width:220px; margin:var(--gap-32) auto; margin-bottom:0;}
.test-popup .popup-conts .img-box img {max-width:100%; display:block; margin:0 auto;}
.test-popup .popup-conts .button-wrap {width:95%; max-width:460px; margin:0 auto; padding:5px 0;}
.test-popup .popup-conts .button-wrap .btn-box {width:100%; border-radius:var(--gap-8); border:1px solid #fff; background:#fff; padding:var(--gap-24) calc(var(--gap-40) + var(--gap-24)) var(--gap-24) var(--gap-40); position:relative; box-shadow:0 0 10px rgba(0,0,0,0.1); margin-top:var(--gap-16);}
.test-popup .popup-conts .button-wrap .btn-box > .wrap {width:100%; position:relative; z-index:10;}
.test-popup .popup-conts .button-wrap .btn-box:after {content:""; width:var(--font-24); height:var(--font-24); background:url(/img/com/arrow_right.svg) center no-repeat; background-size:cover; position:absolute; right:var(--gap-40); top:50%; transform:translateY(-50%); z-index:0;}
.test-popup .popup-conts .button-wrap .btn-box:first-child {margin-top:0;}
.test-popup .popup-conts .button-wrap .btn-box em {display:block; width:100%; font-size:var(--font-20); font-weight:700; color:#424241; margin-bottom:5px;}
.test-popup .popup-conts .button-wrap .btn-box span {display:block; width:100%; font-size:var(--font-16); color:var(--font-gray);}
.test-popup .popup-conts .button-wrap .btn-box a {width:100%; height:100%; border-radius:var(--gap-8); position:absolute; left:0; top:0; z-index:20;}
.test-popup .popup-conts .button-wrap .btn-box:hover {border-color:var(--sub-color);}
.test-popup .popup-conts .button-wrap .btn-box:hover:before {content:""; width:100%; height:100%; border-radius:var(--gap-8); background:rgba(255,86,36,0.05); position:absolute; left:0; top:0; z-index:0;}

.email-popup {max-width:624px;}
.email-popup .popup-conts .title-box {width:100%; display:flex; justify-content:space-between; gap:var(--gap-16); padding-bottom:var(--gap-16); border-bottom:1px solid var(--sub-color);}
.email-popup .popup-conts .title-box .title {font-size:var(--font-20);}
.email-popup .popup-conts .title-box .btn-layer-close {width:var(--gap-24); height:var(--gap-24);}
.email-popup .popup-conts .conts-box {width:100%; margin-top:var(--gap-32); font-size:var(--font-14); font-weight:300; line-height:1.57;}
.email-popup .popup-conts .conts-box span {display:block; font-size:calc(var(--font-14) - 2px); color:var(--font-gray); margin-top:var(--gap-24);}

/* s : 240819 수정 */
.line-popup {border-top:10px solid var(--sub-color); max-width:700px;}
.line-popup .popup-conts .title-box {width:100%; display:flex; justify-content:space-between; gap:var(--gap-16); margin-bottom:calc(var(--gap-80) * 0.8);}
.line-popup .popup-conts .title-box .title {font-size:var(--font-26); font-weight:700;}
.line-popup .popup-conts .button-wrap {width:100%; display:flex; align-items:center; justify-content:center; gap:var(--gap-16); margin-top:calc(var(--gap-80) * 0.8);}

.privacy-popup .popup-conts .conts-box {font-size:var(--font-16); line-height:1.625; font-weight:400;}
.privacy-popup .popup-conts .conts-box > * {width:100%; margin-top:var(--gap-32);}
.privacy-popup .popup-conts .conts-box > *:first-child {margin-top:0;}
.privacy-popup .popup-conts .conts-box ul {counter-reset:number;}
.privacy-popup .popup-conts .conts-box ul li {width:100%; margin-top:var(--gap-8); padding-left:calc(var(--font-16) + 2px); text-indent:calc((var(--font-16) + 2px) * -1);}
.privacy-popup .popup-conts .conts-box ul li:first-child {margin-top:0;}
.privacy-popup .popup-conts .conts-box ul li.point {color:var(--sub-color);}
.privacy-popup .popup-conts .conts-box ul li:before {counter-increment:number 1; content:counter(number)". ";}

.ad-popup .popup-conts .conts-box {font-size:var(--font-16); line-height:1.625; font-weight:400;}
.ad-popup .popup-conts .conts-box ul li {width:100%; margin-top:var(--gap-16); padding-left:calc(var(--font-16) - 4px); text-indent:calc((var(--font-16) - 4px) * -1);}
.ad-popup .popup-conts .conts-box ul li:first-child {margin-top:0;}
.ad-popup .popup-conts .conts-box ul li:before {content:"· ";}

/* e : 240819 수정 */

/***************************popup**************************
.modal-popup {display:none;}
.modal-popup .modal-bg {position:fixed;z-index:999;top:0;left:0;width:100%; height:100vh;background:rgba(0,0,0,0.5);cursor: pointer;}
.modal-popup .modal-bg .modal-cont {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius: 4px;overflow:hidden;width: 100%;}*/
.modal-popup {display:none;position:fixed;z-index:999;top:0;left:0;width:100%; height:100vh;}
.modal-popup .modal-bg .modal-cont {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius: 4px;width: 100%;}
.modal-popup .back-bg {background: rgba(0,0,0,0.5);position: absolute;width: 100%;height: 100%;z-index: -1;}



.modal-popup .modal-bg .modal-cont .modal-box {max-width:1280px;width:100%;margin: 0 auto;}
.index.modal-popup .modal-bg .modal-cont .modal-box {overflow: hidden;}
.modal-popup .modal-bg .modal-cont .modal-box .inner {position: relative;}
.modal-popup .modal-bg .modal-cont .modal-box .inner .img-box.mb {display:none;}
.modal-popup .modal-bg .modal-cont .modal-box .inner .img-box.pc {width:100%;height:0;padding-bottom: calc((720 / 1280) * 100%) ;}
.modal-popup .modal-bg .modal-cont .modal-box .inner .img-box img {width:100%;}
.modal-popup .modal-bg .modal-cont .modal-box .inner .pop-cont {position: relative;}



.modal-popup .pop-close {background:rgba(0,0,0,0.3);padding: 20px 60px;margin-top: -5px;}
.modal-popup .pop-close .inner {display: flex;justify-content: end;}
.modal-popup .pop-close .inner p:first-child {padding-right: 25px;margin-right: 25px; position:relative;}
.modal-popup .pop-close .inner p:first-child::after {content:"";background:#fff;width:1px; height:16px;display:block;position:absolute;right:0;top: 50%;transform: translateY(-50%);}
.modal-popup .pop-close .inner p {color:#fff;font-size: 17px;cursor: pointer;}

.index.modal-popup .modal-bg .modal-cont .modal-box .inner .pop-cont .btn-cont {position:absolute;bottom:50px; left:50%;transform:translateX(-50%) ;}
.index.modal-popup {display:block;}



.modal-popup .swiper-pagination {bottom:70px !important;}
.modal-popup .swiper-button-next:after, .modal-popup .swiper-button-prev:after {display: none !important;}
.modal-popup .swiper-pagination-bullet {opacity: 1; background-color: #D5D5D5;}
.modal-popup .swiper-pagination-bullet-active {width:20px;border-radius:4px;height: 8px;opacity: 1;background-color: #0077C0 !important;}
.modal-popup .swiper-button-prev , .modal-popup .swiper-button-next {background:#fff;width: 55px;height: 55px;border-radius: 50%;background-image: none;transform: translateY(-50%);}
.modal-popup .swiper-button-prev {left:5%;box-shadow:-5px 10px 10px rgba(0 0 0 / 10%);}
.modal-popup .swiper-button-prev::before {content:"";background: url('/img/common/blue-arrow.svg')no-repeat 50% / cover;width:20px;height:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(90deg);}
.modal-popup .swiper-button-next {right:5%;box-shadow:5px 10px 10px rgba(0 0 0 / 10%);}
.modal-popup .swiper-button-next::before {content:"";background: url('/img/common/blue-arrow.svg')no-repeat 50% / cover;width:20px;height:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(270deg);}



.guide-pop {background:#fff;width:700px; height: fit-content; max-height:70vh;overflow-y:auto;position:relative;margin: 0 auto;    box-shadow: 0 0 10px 3px #0000001c;}
.guide-pop.content {height: auto;overflow: hidden;}
.guide-pop::-webkit-scrollbar {width:5px; border-radius:10px; background:#FF5624;}
.guide-pop::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.5);}
.guide-pop::before {content:"";display:block;width:100%;height:10px;background:#FF5624;}
.guide-pop .wrap {max-width: 90%;margin:0 auto;    overflow-y: auto;}
.guide-pop .top-box {margin-bottom: 40px;margin-top: 40px; position: relative;}
.guide-pop .close-btn { position: absolute; display: block; cursor: pointer; width: 30px; height: 30px; top: 0; right: 0;}
.guide-pop .close-btn:before, .close-btn:after { position: absolute; content: ""; height: 30px; width: 2px; background-color: #000; top: 50%; right: 50%; transform: translate(-50%, -50%);}
.guide-pop .close-btn:before {transform: translate(-50%, -50%) rotate(45deg) ;}
.guide-pop .close-btn:after {transform: translate(-50%, -50%) rotate(-45deg) ;}
.guide-pop .txt-cont h2 {margin-bottom: 40px;}
.guide-pop .bg-gray {padding :30px 0 0;}
.guide-pop .txt-box {margin-bottom: 40px;}
.guide-pop .txt-box > p {margin-bottom: 20px;}
.guide-pop .txt-box li {display:flex;margin-bottom: 15px;}
.guide-pop .txt-box li p:first-child {min-width:100px;}
.guide-pop .txt-box li .list p {margin-bottom: 10px;}
.guide-pop .btn-container {margin: 30px auto; text-align: center;display:none;}
.guide-pop.content .txt-cont h2 {margin-bottom: 0;}

@media (max-width:1440px) {
	.modal-popup .modal-bg .modal-cont .modal-box {width:70%;margin: 0 auto;}
}

@media screen and (max-width: 1024px) {}

@media screen and(max-width: 900px) {
	.modal-popup .pop-close {padding: 15px 30px;}
	.modal-popup .pop-close .inner p {font-size: 15px;}
	.modal-popup .swiper-button-prev, .modal-popup .swiper-button-next {width:35px;height:35px;}
	.modal-popup .swiper-button-prev::before {width:15px;height:15px;}
	.modal-popup .swiper-button-next::before {width:15px;height:15px;}

	.guide-pop {width:100%;}
}

@media screen and (max-width: 768px) {
	.modal-popup .modal-bg .modal-cont .modal-box .inner .pop-cont .btn-cont {bottom:25px;}
	.modal-popup .btn-cont .btn {min-width:140px;}
	.modal-popup .modal-bg .modal-cont .modal-box {min-width:340px;}
	.modal-popup .modal-bg .modal-cont .modal-box .inner .img-box.pc {display: none;}
	.modal-popup .modal-bg .modal-cont .modal-box .inner .img-box.mb {display: block;width:100%;height:calc((380/285) * 100%);}
	.modal-popup .pop-close {background: rgba(0,0,0,0.7);}
	.modal-popup .pop-close .inner {justify-content: space-between;}
	.modal-popup .pop-close .inner p {font-size: 13px;}
	.modal-popup .pop-close .inner p:first-child::after {display: none;}
	.modal-popup .swiper-button-prev, .modal-popup .swiper-button-next {display:none;}
	.modal-popup .modal-bg .modal-cont .modal-box {padding-bottom:40px}
	.index.modal-popup .modal-bg .modal-cont .modal-box .inner .pop-cont .btn-cont {bottom:30px;}

	.modal-popup .swiper-pagination {bottom:-40px !important;}

	.guide-pop .close-btn:before, .close-btn:after {height:25px}
	.guide-pop .btn-container {display:block;}
}

@media screen and (max-width: 600px) {
	.guide-modal .modal-bg .modal-cont .modal-box {width:95%}
	.guide-pop {width:100%;}
}


@media (max-width:480px) {
	.guide-pop .txt-cont h2 {    font-size: 4.2vw;}
}

@media screen and (max-width: 400px) {
	.guide-pop .top-box {    margin: 20px auto;}
	.guide-pop.content .txt-box li p:nth-child(2) {white-space: nowrap;text-overflow: ellipsis;width: 200px;overflow: hidden;}
}