@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */

.only-desktop {display:block;}
.only-tablet {display:none;}
.only-mobile {display:none;}
.only-desktop-tablet {display:block;}

#wrapper {position:relative; overflow:hidden; padding-top:var(--btn-size);}
#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.contain {position:relative; width:100%; max-width:1260px; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto;}
.contain:after {content:" "; display:block; clear:both;}

/* header */
#header  {position:fixed; z-index:90; left:0; top:0; width:100%; transition:0.8s all ease;}
#header .contain {max-width:100%;}
html.up #header {top:calc(0px - var(--btn-size));}

.head-top-wrap {background:#2c2c2c;}
.head-top-wrap .contain {display:flex; height:var(--btn-size); padding-right:0;}
.head-top-wrap .logos {display:flex; align-items:center; flex:1 1 auto; min-width:0; width:1%;}
.head-top-wrap .logo {display:block; position:relative; padding:0 var(--size20);}
.head-top-wrap .logo:before {content:''; position:absolute; top:50%; right:-2px; margin-top:-2px; width:4px; height:4px; background:#ccc; border-radius:100%;}
.head-top-wrap .logo:last-child:before {display:none;}

.top-quick-menu {display:flex; gap:var(--size30);}
.top-quick-menu ul {display:flex; align-items:center; height:100%;}

.util ul {gap:var(--size20);}
.util ul li a {display:flex; align-items:center; justify-content:center; font-size:var(--font-size-15); font-weight:500; line-height:1.2em; color:#fff;}
.util ul li a img {display:inline-block; margin-right:var(--size10);}

.head-menu {width:360px;}
.head-menu ul li {flex:1; height:100%;}
.head-menu ul li a {display:flex; height:100%; align-items:center; justify-content:center; font-size:var(--font-size-18); font-weight:700; line-height:1.2em; color:#fff; background:#59ac40;}
.head-menu ul li a img {display:inline-block; margin-right:var(--size10); opacity:0.7; transition:0.2s all ease;}
.head-menu ul li a:hover {background:#f6821f;}
.head-menu ul li a:hover img {opacity:1;}

.sitelogo {position:absolute; left:var(--size50); top:50%; margin-top:-15.5px;}
.sitelogo a {display:block;}

#gnb > ul {display:flex; justify-content:flex-end; padding-right:190px;}
#gnb > ul > li {position:relative; width:auto; transition:0.2s all ease;}
#gnb > ul > li > a {display:flex; position:relative; align-items:center; justify-content:center; padding:0 var(--size50); font-family:var(--font-hak); font-size:clamp(16px, calc(20/ var(--inner) * 100vw ),20px); font-weight:400; height:var(--header-height); color:#121212;}
#gnb > ul > li > a:before {content:''; position:absolute; top:50%; right:-1px; margin-top:-7.5px; width:2px; height:15px; background:#ccc; transform:rotate(15deg);}
#gnb > ul > li.active > a {color:var(--color-primary);}

#gnb .submenu {height:0; position:absolute; left:0; width:100%; z-index:102; overflow:hidden; text-align:center; transition:0.2s all ease;}
#gnb .submenu > ul {padding:var(--size30) 0;}
#gnb .submenu > ul > li {margin-bottom:var(--size20);}
#gnb .submenu > ul > li:last-child {margin-bottom:0;}
#gnb .submenu > ul > li > a {display:block; vertical-align:middle; position:relative; font-size:var(--font-size-17); line-height:1.2; color:#676767; transition:all 0.2s ease-in;}
#gnb .submenu > ul > li > a:hover {color:var(--color-primary); text-decoration:underline; font-weight:500;}

#header .submenu-bg {display:none; position:absolute; left:0; width:100%; background:#fff;}

.header-white {background:#fff; border-bottom:1px solid #ddd;}
.header-fixed #header {background:#fff; border-bottom:1px solid #ddd;}
.header-hover {border-bottom:1px solid #ddd;}

/* for all menu */
.btn-all-menu {position:absolute; top:50%; right:var(--size50); transform:translateY(-50%); border-radius:100%; box-shadow:4px 4px 28px rgba(0, 0, 0, 0.08);}

.all-navigation {position:absolute; z-index:101; display:flex; align-items:center; justify-content:center; top:var(--btn-size); left:0; width:100vw; background:rgba(255,255,255,0.94); transform:translateX(-100%); transition:0.5s all ease-in-out;}
.all-navigation:before {content:''; position:absolute; left:var(--size50); top:0; width:1px; height:calc(100% - var(--btn-size)); background:#eee; opacity:0.94;}
.all-navigation:after {content:''; position:absolute; right:var(--size50); top:0; width:1px; height:calc(100% - var(--btn-size)); background:#eee; opacity:0.94;}
.all-navigation .inner {display:flex; align-items:center; justify-content:center; position:relative; width:100%; padding:0 var(----size50); min-height:calc(var(--vh, 1vh) * 100 - var(--btn-size));}
.all-navigation .line {position:absolute; top:0; width:1px; height:100%; background:#eee; opacity:0.94;}
.all-navigation .line1 {left:calc(calc(100% - var(--size50) * 2) * 0.25 + var(--size50));}
.all-navigation .line2 {left:calc(calc(100% - var(--size50) * 2) * 0.50 + var(--size50));}
.all-navigation .line3 {left:calc(calc(100% - var(--size50) * 2) * 0.75 + var(--size50));}
.all-navigation .close {position:absolute; width:24px; height:24px; top:38px; right:calc(var(--size50) + 10px); background:url('/images/common/icon-close.png') no-repeat 50% 50%/contain; text-indent:-999em; overflow:hidden;}

.all-nav-menu {width:100%; padding:0 var(--size50);}
.all-nav-menu>ul {display:flex; justify-content:flex-end; flex-wrap:wrap; width:100%; height:100%;}
.all-nav-menu>ul>li {width:25%; padding:var(--size40) var(--size50);}
.all-nav-menu>ul>li>a {display:block; position:relative; margin-bottom:var(--size40); font-family:var(--font-hak); font-size:clamp(16px, calc(32/ var(--inner) * 100vw ),32px); font-weight:700; line-height:1.2em; color:#121212;}
.all-nav-menu>ul>li>a:before {content:''; position:absolute; top:0.1em; left:calc(0px - var(--size50) - 1px); width:0.09em; height:0.97em; background:var(--color-primary); z-index:1; opacity:0; transition:0.2s all ease;}
.all-nav-menu>ul>li:hover>a {color:var(--color-primary);}
.all-nav-menu>ul>li:hover>a:before {opacity:1;}

.all-nav-menu .submenu>ul>li {margin-bottom:var(--size20); font-size:var(--font-size-17); color:#505050; line-height:1.4;}
.all-nav-menu .submenu>ul>li:last-child {margin-bottom:0;}
.all-nav-menu .submenu>ul>li:hover {font-weight:600; color:var(--color-primary);}

.all-nav-menu .depth {margin-top:10px; padding-left:10px;}
.all-nav-menu .depth>ul>li {margin-bottom:0.8em; font-size:var(--font-size-16); color:#a8a8a8; font-weight:500; line-height:1.4;}
.all-nav-menu .depth>ul>li:last-child {margin-bottom:0;}
.all-nav-menu .depth>ul>li:hover {font-weight:600; color:var(--color-primary);}

html.menu-all-opened {overflow:auto !important;}
html.menu-all-opened .all-navigation {transform:translateX(0);}


/* for mobile */
.btn-m-menu {display:none; position:absolute; top:50%; right:var(--container-space); text-align:center; z-index:92; transition: all 0.5s ease-in-out; transform:translateY(-50%); border-radius:100%; box-shadow:4px 4px 28px rgba(0, 0, 0, 0.08);}

.mobile-navigation {position:fixed; top:0; right:0; padding:20px 0; width:300px; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#ffffff; z-index:101;}
.mobile-navigation .home {padding-left:15px; padding-bottom:20px;}
.mobile-navigation .home img {height:var(--size50);}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:14px 15px; display:block; color:#242424; font-size:1.3em; font-weight:500; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li.active>a {color:var(--color-primary) ;}
.mobile-navigation .nav-menu>ul>li:has(.submenu)>a:after {content:""; position:absolute; top:50%; right:15px; transform:translateY(-75%) rotate(45deg); width:10px; height:10px; border-right:2px solid #2c2c2c; border-bottom:2px solid #2c2c2c;}
.mobile-navigation .nav-menu>ul>li.active>a:after{transform: translateY(-35%) rotate(-135deg); border-color: var(--color-primary);}
.mobile-navigation .nav-menu .submenu {display:none; position:static; transform: translateX(0); margin:-1px 0 0 0; width:100%;  padding:10px 0;background:var(--color-primary) ; padding-bottom:10px;}
.mobile-navigation .nav-menu .submenu>ul {display:block; width:100%;}
.mobile-navigation .nav-menu .submenu>ul>li {text-align:left; padding:0;}
.mobile-navigation .nav-menu .submenu>ul>li>a {display:block; position:relative; padding:5px 0 5px 25px; color:#fff; font-size:16px; font-weight:400; line-height:1.3em;}
.mobile-navigation .nav-menu .submenu>ul>li>a:after {content:"";position:absolute; top:14px; left:15px; width:4px; height:4px; border-radius:100%; background:#fff; transition:.2s ease-in-out;}
.mobile-navigation .nav-menu .submenu>ul>li>a:hover {color:#fff}
.mobile-navigation .nav-menu .submenu>ul>li>a:hover:after {background:#fff}
.mobile-navigation .nav-menu .submenu .tit {display:none;}
.mobile-navigation .close {position:absolute; top:20px; right:18px; width:24px; height:24px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:2px; background:#242424;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.76; z-index:98;} 

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}

/* main */
#main #container {background:url('/images/main/main-bg.jpg') no-repeat top center/cover;}
.main-sec {padding:var(--size80) 0;}
.main-sec .contain {max-width:1460px;}

.main-top-cont {padding-top:clamp(80px, calc(160/ var(--inner) * 100vw ),160px);}
.main-top-cont .contain {display:flex; align-items:flex-end;}
.main-top-cont .cnt {flex:1 1 auto; min-width:0; width:1%; max-width:730px; padding-right:30px;}
.main-top-cont .cnt .tit {font-family:var(--font-hak); font-size:clamp(24px, calc(60/ var(--inner) * 100vw ),60px); font-weight:700; line-height:1.2em; color:#2c2c2c;}
.main-top-cont .cnt .txt {margin-top:1.5em; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); font-weight:500; line-height:1.4; color:#2c2c2c;}
.main-top-cont .cnt .btn {margin-top:var(--size50);}
.main-top-cont .cnt .btn a {display:inline-flex; align-items:center; justify-content:center; padding:var(--size20) var(--size30); background:#fff; border-radius:100vh; font-family:var(--font-hak); font-size:var(--font-size-20); font-weight:400; line-height:1.2em; color:#505050;}
.main-top-cont .cnt .btn a img {display:inline-block; margin-left:var(--size10);}

.sns-banner {margin-top:clamp(40px, calc(110/ var(--inner) * 100vw ),110px);}
.sns-banner .items {display:flex; gap:var(--size10);}
.sns-banner .item {flex:1;}
.sns-banner .item a {display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--size30) 20px; background:#48a05b; border-radius:1em; box-shadow:6px 6px 48px rgba(0,0,0,0.12);}
.sns-banner .item a:hover {transform:translateY(calc(0px - var(--size20))); background:#f6821f;}
.sns-banner .item .tt {margin-top:var(--size20); font-size:var(--font-size-14); font-weight:600; line-height:1.2em; color:#a4e3b1;}
.sns-banner .item .tx {font-family:var(--font-hak); font-size:clamp(16px, calc(28/ var(--inner) * 100vw ),28px); font-weight:700; line-height:1.2; color:#fff;}
.sns-banner .item a:hover .tt {color:#f1d9c5;}

.main-visual {position:relative; width:460px; margin:0 0 0 auto;}
.main-visual .items {border-radius:1.5em; box-shadow:6px 6px 48px rgba(0,0,0,0.12); overflow:hidden;}
.main-visual .inner {display:block;}
.main-visual .control {display:flex; position:relative; align-items:center; justify-content:center; margin-top:10px; padding:1em; backdrop-filter:blur(10px); background:rgba(255,255,255,0.1); border-radius:100vh; box-shadow:6px 6px 48px rgba(0,0,0,0.12);}
.main-visual .control .slide-btn {display:block; width:24px; height:24px; background-color:transparent; border:none; background-position:50% 50%; background-repeat:no-repeat; background-size:contain;}
.main-visual .control .slide-prev {background-image:url('/images/main/sld-prev.png');}
.main-visual .control .slide-next {background-image:url('/images/main/sld-next.png');}
.main-visual .control .pager {margin-left:15px; font-size:var(--font-size-14); font-weight:600; line-height:1.2em; color:#2c2c2c;}
.main-visual .control .pagerCurrent {margin-right:15px; font-size:var(--font-size-14); font-weight:600; line-height:1.2em; color:#2c2c2c;}
.main-visual .control .dots {width:clamp(120px, calc(200/ var(--inner) * 100vw ),200px); margin:0 10px;}
.main-visual .control .dots ul {display:flex;}
.main-visual .control .dots ul li {flex:1;}
.main-visual .control .dots ul li button {display:block; width:100%; height:2px; background:#eff9ee; border:0; text-indent:-999em; overflow:hidden; transition:0.2s all ease;}
.main-visual .control .dots ul li.slick-active button {background:var(--color-primary);}

.main-program .tit-wrap {margin-bottom:var(--size60); text-align:center;}
.main-program .tit-wrap .tit {display:inline-block; position:relative; z-index:1; font-family:var(--font-hak); font-size:clamp(24px, calc(48/ var(--inner) * 100vw ),48px); font-weight:700; line-height:1.2em; color:#064514;}
.main-program .tit-wrap .tit .bullet {display:block; position:absolute; z-index:-1; left:-0.3em; top:-0.3em; width:0.9em; height:0.9em; background:url('/images/main/bullet01.png') no-repeat 50% 50%/contain; animation:move_rotate 5s linear infinite;}
.main-program .tit-wrap .txt {margin-top:1em; font-family:var(--font-hak); font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); font-weight:400; line-height:1.4; color:#126e26;}

@keyframes move_rotate {
	0%{
	  transform:rotate(0);
	}
	100% {
	  transform:rotate(360deg);
	}
  }

.program-list .items {display:flex; flex-wrap:wrap; margin:-10px;}
.program-list .item {width:25%; padding:10px;}
.program-list .item .inner {height:100%; background:#fff; border-radius:1.5em; overflow:hidden; box-shadow:6px 6px 48px rgba(0,0,0,0.12); text-align:center;}
.program-list .cnt {padding:var(--size40) 20px;}
.program-list .tit {margin-bottom:var(--size20); font-family:var(--font-hak); font-size:clamp(16px, calc(28/ var(--inner) * 100vw ),28px); font-weight:700; line-height:1.4; color:#48a05b;}
.program-list .txt {font-size:var(--font-size-18); line-height:1.5;}
.program-list .btn {margin-top:var(--size35);}
.program-list .btn a {display:inline-block; padding:1em 2em; border:1px solid #f6821f; border-radius:100vh; font-family:var(--font-hak); font-size:var(--font-size-18); font-weight:400; line-height:1; color:#f6821f;}
.program-list .btn a:hover {background:#f6821f; color:#fff;}

.main-partners {padding-bottom:clamp(50px, calc(180/ var(--inner) * 100vw ),180px);}
.main-partners .tit {margin-bottom:1em; font-family:var(--font-hak); font-size:clamp(18px, calc(38/ var(--inner) * 100vw ),38px); font-weight:700; line-height:1.4; color:#2c2c2c;}
.main-partners .slick-list {margin:0 -5px;}
.main-partners .slick-slide {margin:0 5px;}

/* sub */
.sub-visual {position:relative; width:100%; height:clamp(200px, calc(820/ var(--inner) * 100vw ),820px); margin-bottom:clamp(40px, calc(150/ var(--inner) * 100vw ),150px); display:flex; align-items:center; overflow:hidden; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; text-align:center;}
.sub-visual .content {position:relative; z-index:1; max-width:1260px; padding:0 var(--container-space); width:100%; margin:0 auto; color:#fff;}
.sub-visual .content h2 {font-size:clamp(28px, calc(80/ var(--inner) * 100vw ),80px); font-weight:700; line-height:1.2em; opacity:0; transform:translateY(20px); transition:0.8s all 0.3s ease;}
.sub-visual .content p {position:relative; padding-top:1em; margin-top:1em; font-size:clamp(14px, calc(32/ var(--inner) * 100vw ),32px); font-weight:500; line-height:1.4; opacity:0; transform:translateY(20px); transition:0.8s all 0.5s ease;}
.sub-visual .content p:before {content:''; position:absolute; left:50%; top:0; margin-left:-1.25em; width:2.5em; height:0.22em; background:var(--color-primary);}
.sub-visual.load .content h2 {opacity:1; transform:translateY(0);}
.sub-visual.load .content p {opacity:1; transform:translateY(0);}
 
.sub-visual .background {
	position:absolute; 
	top:0; 
	left:0;
	width:100%; height:100%;	
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	transform:scale(1.09);
    -ms-transform:scale(1.09); /* IE 9 */
    -moz-transform:scale(1.09); /* Firefox */
    -webkit-transform:scale(1.09); /* Safari and Chrome */
    -o-transform:scale(1.09); /* Opera */
	transition: all 2s ease-out 0s;
	transition-delay: 0.1s;
	z-index:0;
}
.sub-visual.load .background {
	transform:scale(1);
    -ms-transform:scale(1); /* IE 9 */
    -moz-transform:scale(1); /* Firefox */
    -webkit-transform:scale(1); /* Safari and Chrome */
    -o-transform:scale(1); /* Opera */
}

#sub #wrapper { background:url('/images/common/sub-bg.jpg') no-repeat top center/contain; padding-top:calc(var(--btn-size) + var(--header-height) + var(--size30));}
#sub #container {display:flex; width:100%; max-width:1660px; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto;}
#sub #contArea {flex:1 1 auto; min-width:0; width:1%;}

#lnb {width:320px; margin-right:var(--size80); margin-bottom:50px;}
.lnb .title {margin-bottom:16px; padding:var(--size45) var(--size25) var(--size25); background:url('/images/common/lnb-bg.jpg') no-repeat right bottom/cover; border-radius:1em; text-align:right;}
.lnb .title p {margin-bottom:0.8em; font-size:var(--font-size-17); font-weight:700; line-height:1.2; color:#fff; opacity:0.5}
.lnb .title h2 {font-family:var(--font-hak); font-size:clamp(28px, calc(34/ var(--inner) * 100vw ),34px); font-weight:700; line-height:1.2; color:#fff;}

.lnb > ul {padding:6px 0; border-radius:1em; overflow:hidden; border:1px solid #eee; background:#fafafa;}
.lnb > ul > li {margin-bottom:6px;}
.lnb > ul > li:last-child {margin-bottom:0;}
.lnb > ul > li > a {display:flex; position:relative; justify-content:space-between; align-items:center; min-height:62px; padding:10px var(--size30); background:#fff; color:#2c2c2c; font-size:var(--font-size-20); font-weight:700; line-height:1.2em;}
.lnb > ul > li > a:before {content:''; position:absolute; left:0.35em; top:16.5%; width:0.35em; height:67%; background:#59ac40; border-radius:100vh; opacity:0; transform:translateX(-10px); transition:0.2s all ease;}
.lnb > ul > li:has(.submenu) > a:after {content:""; width:10px; height:6px; margin-left:20px; background:url("../images/common/lnb_off.png") 50% 50% no-repeat; background-size:contain; transition:.2s;}
.lnb > ul > li > a:hover {color:#59ac40;}
.lnb > ul > li.on > a {color:#59ac40;}
.lnb > ul > li.active > a:after {background-image:url("../images/common/lnb_on.png");}
.lnb > ul > li.on > a:before {opacity:1; transform:translateX(0);}

.lnb .submenu {display:none; padding:10px 10px 10px 30px;}
.lnb .submenu ul li {padding:8px 0;}
.lnb .submenu ul li a {position:relative; display:block; padding:0 0 0 7px; color:#505050; line-height:1.2em;}
.lnb .submenu ul li a:before {content:""; position:absolute; top:8px; left:0; width:2px; height:2px; background:#6f6f6f;}
.lnb .submenu ul li a:hover,
.lnb .on .submenu ul li.active a {color:#59ac40;}

.lnb-m {display:none;}
.lnb-m .depth1 ul {display:flex;}
.lnb-m .depth1 ul li {flex:1; text-align:center; border:1px solid #ddd; border-left:0;}
.lnb-m .depth1 ul li:last-child {border-right:0;}
.lnb-m .depth1 ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:var(--btn-size); padding:0 15px; color:#242424; font-weight:500; line-height:1.2em;}
.lnb-m .depth1 ul li.active {background:var(--color-primary); border-color:var(--color-primary);}
.lnb-m .depth1 ul li.active a {color:#fff;}
.lnb-m .depth2 {padding:15px 5px; background:#fafafa; border-bottom:1px solid #ddd;}
.lnb-m .depth2 ul {display:flex;}
.lnb-m .depth2 ul li {width:auto; padding:0 15px;}
.lnb-m .depth2 ul li a {position:relative; display:block; padding:0 0 0 12px; color:#505050; font-size:var(--font-size-14); line-height:1.33em;}
.lnb-m .depth2 ul li a:before {content:""; position:absolute; top:6px; left:0; width:4px; height:4px; background:#ccc;}
.lnb-m .depth2 ul li.active a {color:var(--color-secondary);}

.sub-title {padding:clamp(40px, calc(50/ var(--inner) * 100vw ),50px) 0 var(--size80);}
.sub-title h1 {font-family:var(--font-hak); font-size:clamp(24px, calc(34/ var(--inner) * 100vw ),34px); line-height:1; font-weight:700; color:#242424;}

.page-title {position:absolute; right:0; top:clamp(45px, calc(60/ var(--inner) * 100vw ),60px); display:flex; align-items:center; justify-content:flex-end; margin:0 -1em;}
.page-title span {display:inline-block; position:relative; padding:0 1em; font-family:var(--font-hak); font-weight:400; line-height:1.2em; color:#676767;}
.page-title span:before {content:''; position:absolute; right:-0.125em; top:50%; margin-top:-0.125em; width:0.25em; height:0.25em; background:#dfdfdf; border-radius:100%;}
.page-title span:last-child:before {display:none;}
.page-title span:last-child {color:#59ac40;}

#contArea {position:relative ;max-width:1260px; margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}

.real-cont {padding-bottom:clamp(50px, calc(170/ var(--inner) * 100vw ),170px);}
.real-cont.none {padding-bottom:0;}

/* member */
#memberH #wrapper { background:url('/images/common/sub-bg.jpg') no-repeat top center/contain; padding-top:clamp(100px, calc(350/ var(--inner) * 100vw ),350px);}
#memberH .sub-title {max-width:1260px; padding:clamp(40px, calc(50/ var(--inner) * 100vw ),50px) var(--container-space); margin:0 auto; text-align:center;}
#memberH .sub-title p {margin-top:1.5em; line-height:1.4; color:#a8a8a8;}


/* familysite */
.familysite-box {width:196px;}
.familysite-box .familysite {position:relative;}
.familysite>a {display:block; text-decoration:none; padding-left:20px; font-size:var(--font-size-16); font-weight:600; line-height:48px; color:#fff; font-weight:600; overflow:hidden; white-space:nowrap; cursor:pointer; z-index:2; position:relative; background:#1f1f1f; border-radius:10px;}
.familysite>a:before {content:""; position:absolute; width:9px; height:9px; border-right:2px solid #fff; border-top:2px solid #fff; transform:rotate(-45deg); right:20px; top:50%; margin-top:-4px; transition:0.2s all ease;}
.familysite.active>a:before {transform:rotate(135deg); margin-top:-8px;}
.familysite ul {display:none; background:#2c2c2c; position:absolute; left:0; padding:14px 20px; bottom:58px; width:100%; z-index:10; border-radius:10px; max-height:129px; overflow:auto !important; background:#2c2c2c;}
.familysite ul li a {display:block; text-decoration:none; padding:7px 0; font-size:var(--font-size-15); color:#a8a8a8; line-height:1.4;}
.familysite ul li a:hover {color:#fff;}


/* footer */
#footer {display:flex; position:relative; background:#121212; color:#fff;}
#footer .contain {max-width:100%; padding-left:var(--size50); padding-right:var(--size50);}

.f-logo {display:flex; align-items:center; justify-content:center; padding:var(--size50); background:#f1f1f1;}
.f-logo img {mix-blend-mode:darken;}
.foot-wrap {padding:clamp(20px, calc(70/ var(--inner) * 100vw ),70px) 0; flex:1 1 auto; min-width:0; width:1%;}

.f-menu {margin-bottom:var(--size40); padding-bottom:var(--size40); border-bottom:1px solid #2c2c2c;}
.f-menu ul {display:flex;}
.f-menu ul li {position:relative; margin-right:var(--size45); font-family:var(--font-hak); font-size:var(--font-size-18); line-height:1.2em;}
.f-menu ul li:last-child {margin-right:0;}
.f-menu ul li:hover {color:var(--color-primary);}

.f-cnt {display:flex; align-items:flex-end;}
#footer address {flex:1 1 auto; min-width:0; width:1%; font-style:normal;}
#footer address span {display:inline-block;}
#footer address .bar {margin:0 10px; color:#505050;}

#footer .copyright {display:block; margin-top:var(--size30); color:#a8a8a8;}
#footer .copyright a {color:#2c2c2c;}

.main-top-btn {position:absolute; top:var(--size70); right:var(--size40);}

/* quick */
.quick {position:fixed; bottom:30px; right:20px; z-index:90;}
.quick .goto {display:block; position:relative; width:clamp(35px, calc(60/ var(--inner) * 100vw ),60px);}