@charset "UTF-8";

body{margin:0;padding:0;overflow-x: hidden;}
body.modal-opened{overflow:hidden;}

/* skip-nav */
.skip-nav{position:relative;z-index:2000;}
.skip-nav a{position: absolute;top: -2rem;left: 0;width:50%;height:2rem;background: #333;color:var(--white);text-align: center;}
.skip-nav a:active,
.skip-nav a:focus{top: 0;text-decoration:none;z-index: 1000;}

/* layout */
#wrap{width:inherit; height: inherit;}
#content{width:100%; min-height:100%; padding-bottom: 160px;}
.w-inner {}
.section {margin: 0 auto;}
.section {margin: 0 auto;}
#header + #container.gap {padding-top: 120px;}

.header .header-inner {border-bottom: 1px solid transparent; padding-left: 80px; padding-right: 80px; }
.header:not(.nav-hover) .header-inner {border-bottom : 1px solid rgba(0, 0, 0, 0.1);}
.header .header-inner,
.footer .footer-inner {position: relative; width: 100%; height: 100%; margin: 0 auto;}
@media all and (min-width: 1541px) {
	.w-inner,
	.footer .footer-inner {padding-left: 15.625vw; padding-right: 15.625vw;}

	.gutter-166 {padding-left: 8.646vw; padding-right: 8.646vw;}
	.gutter-80 {padding-left: 4.167vw; padding-right: 4.167vw;}
}
@media all and (min-width: 769px) and (max-width: 1080px) {
	.w-inner,
	.footer .footer-inner {padding-left: 50px; padding-right: 50px;}
}
@media all and (min-width: 961px) and (max-width: 1540px) {
	.w-inner,
	.footer .footer-inner {padding-left: 10.625vw; padding-right: 10.625vw;}
	.gutter-166 {padding-left: 6.646vw; padding-right: 6.646vw;}
	.gutter-80 {padding-left: 4.167vw; padding-right: 4.167vw;}
}
@media all and (min-width: 769px) and (max-width: 960px) {
	.w-inner {padding-left: 50px; padding-right: 50px;}
	.gutter-166 {padding-left: 40px; padding-right: 40px;}
	.gutter-80 {padding-left: 30px; padding-right: 30px;}
}
@media all and (max-width:960px) {
	#header + #container.gap{padding-top: 64px;}
}
@media all and (max-width: 768px) {
	#content{padding-bottom: 90px;}
	.w-inner,
	.gutter-166 {padding-left: 16px; padding-right: 16px;}
}

#header {position:fixed; top:0; left:0; right:0; z-index:10;
	display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
	-webkit-align-items: center; -ms-flex-align: center; align-items: center;
	transition: top 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.1s ease;
}
#header:not(.under-fixed) {background-color: var(--white-opc-1);}
#header.under-fixed,
body.opened-nav #header ,
body.scroll-down #header {background-color: var(--white);}
.header .fc-point {color: var(--coral);}
.header .logo {width: 106px; height: 100%; z-index: 1;}
.header .logo > a {display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; background-image: url('../images/common/logo.png'); background-repeat: no-repeat; background-position: center center; background-size: 106px 60px;}

.header .nav {position: relative; width: 100%;}
.header .user-util {display: -ms-flexbox; display: -webkit-flex; display: flex;}
.header .nav > ul > li > a {position: relative; font-size: 20px; letter-spacing: -0.48px;}
.header .nav > ul > li > a ,
.header .gnb-list > li > ul a {display: block; font-weight: 700; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease;}

.header .gnb-list > li.introduce:hover > a,
.header .gnb-list > li.introduce > a:focus,
.header .gnb-list > li.introduce > ul a:hover,
.header .gnb-list > li.introduce > ul a:focus,
.header .gnb-list > li.introduce.current > a,
.header .gnb-list > li.introduce.current li.current a {color: var(--orange);}
.header .gnb-list > li.experience:hover > a,
.header .gnb-list > li.experience > a:focus,
.header .gnb-list > li.experience > ul a:hover,
.header .gnb-list > li.experience > ul a:focus,
.header .gnb-list > li.experience.current > a,
.header .gnb-list > li.experience.current li.current a {color: var(--coral);}
.header .gnb-list > li.community:hover > a,
.header .gnb-list > li.community > a:focus,
.header .gnb-list > li.community > ul a:hover,
.header .gnb-list > li.community > ul a:focus,
.header .gnb-list > li.community.current > a,
.header .gnb-list > li.community.current li.current a {color: var(--kelly-green);}
.header .gnb-list > li.contact:hover > a,
.header .gnb-list > li.contact > a:focus,
.header .gnb-list > li.contact > ul a:hover,
.header .gnb-list > li.contact > ul a:focus,
.header .gnb-list > li.contact.current > a,
.header .gnb-list > li.contact.current li.current a {color: var(--lightish-purple);}
.header .nav::before {content: ''; display: block; position: absolute; top: -100%; left: -100px; width: calc(100% + 200px); height: 100%; background-color: var(--white);  z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: 0.25s ease-out; -o-transition: 0.25s ease-out; transition: 0.25s ease-out;}

.header .gnb-list {position: relative;}
.header .gnb-list > li > a {padding-left: 40px; padding-right: 40px;}
.header .gnb-list > li > a::before {content: ''; display: block; position: absolute;}
.header .gnb-list ul > li + li {margin-top: 5px;}
.header .gnb-list > li > ul a {font-size: 18px; letter-spacing: -0.36px; color: var(--brownish-grey); padding-left: 5px; padding-right: 5px;}

.header .gnb-list ul {padding-top: 108px; padding-bottom: 40px;}
/* .header .user-util li.inquiry {display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
.header .user-util li.inquiry a {color: var(--coral); padding-left: 0; padding-right: 0;}
.header .user-util li.inquiry .ico.close-w.small {width: 20px; height: 20px; background-image: url('../images/common/ico_close-point.svg'); margin-left: 0.260vw;}
.header .user-util li.inquiry.hide {opacity: 0; visibility: hidden; z-index: -1;} */
.header .user-util li a {padding-left: 5px; padding-right: 5px;}
.header .user-util li.purchase a{width: 132px; height: 55px; border-radius: 28px;}


.header .user-util li.logout span,
.header .mo-user-util li.logout span {color: var(--black-opa-25);}

.header .has-depth::after {content: ''; display: block; position: absolute; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0}

.header li.introduce .has-depth::after {bottom: -76px; width: 90px; height: 70px; background-image: url('../images/common/character_buyo.png');background-size: contain;}
.header li.experience .has-depth::after {bottom: -76px; width: 90px; height: 70px; background-image: url('../images/common/character_koyo.png');background-size: contain;}

.header li.community .has-depth::after {bottom: -76px; width: 90px; height: 70px; background-image: url('../images/common/character_mogu.png');background-size: contain;}
.header li.contact .has-depth::after {bottom: -76px; width: 90px; height: 70px; background-image: url('../images/common/character_nadi.png');background-size: contain;}
.header .gnb-list > li > a + ul {display: none;}
.header.nav-hover .nav::before {top: 0; opacity: 1; visibility: visible; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.04);}

.header.nav-hover .has-depth::after {opacity: 1;}
.header.nav-hover .gnb-list > li > a + ul {display: block;}
.header.nav-hover .gnb-list > li > a + ul {animation: depthShow 0.5s ease;}
@keyframes depthShow {
	0% {opacity: 0; visibility: hidden;}
	100% {opacity: 1; visibility: visible;}
}

.header .btns-area {display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-align-items: center; -ms-flex-align: center; align-items: center;
	z-index: 11;
}
.header .btn.login,
.header .btn.menu,
.header .btn.close-nav {width: 30px; height: 30px; background-repeat: no-repeat; background-position: center center; background-size: 28px 28px; padding: 0;}
.header .btn.login {background-image: url('../images/common/btn_user.svg');}
.header .btn.menu {background-image: url('../images/common/btn_menu.svg');}
.header .btn.close-nav {background-image: url('../images/common/btn_close.svg');}
body.opened-nav .header .btn.menu,
body:not(.opened-nav) .header .btn.close-nav {display: none;}

@media all and (min-width: 1921px) {
	.header .logo {left: 80px;}
	.header .user-util > li + li {margin-left: 32px;}
}
@media all and (min-width: 1421px) and (max-width: 1920px) {
	.header .user-util > li + li {margin-left: 1.563vw;}
}
@media all and (min-width: 961px) and (max-width: 1920px) {
	.header .header-inner {padding-left: 4.167vw; padding-right: 4.167vw;}
}
@media all and (min-width: 1541px) {
	.header .logo {left: 4.167vw;}
}
@media all and (min-width: 1421px) and (max-width: 1540px) {
	.header .gnb-list > li > a {padding-left: 2.778vw; padding-right: 2.778vw;}
}
@media all and (min-width: 961px) and (max-width: 1540px) {
	.header .logo {left: 2.778vw;}
}
@media all and (min-width: 1121px) and (max-width: 1420px) {
	.header .gnb-list > li > a {padding-left: 1.778vw; padding-right: 1.778vw;}
	.header .user-util > li + li {margin-left: 6px;}
}
@media all and (min-width: 961px) and (max-width: 1420px) {
}
@media all and (min-width: 961px) and (max-width: 1120px) {
	.header .gnb-list > li > a {padding-left: 18px; padding-right: 18px;}
	.header .nav > ul > li > a {font-size: 18px; letter-spacing: -0.36px;}
	.header .user-util > li + li {margin-left: 5px;}

	/* .header .user-util li.inquiry .ico.close-w.small {width: 18px; height: 18px;} */
	.header .user-util li.purchase a{width: 94px; height: 48px; border-radius: 24px;}
	.header li.introduce .has-depth::after {width: 72px; height: 58px;}
	.header li.experience .has-depth::after {width: 72px; height: 58px;}

	.header li.community .has-depth::after {width: 66px; height: 54px;}
	.header li.contact .has-depth::after {width: 78px; height: 61px;}
}
@media all and (max-width: 1120px) {
	.header .gnb-list > li > ul a {font-size: 16px; letter-spacing: -0.32px;}
}
@media all and (min-width: 961px) {
	.header .header-inner {transition: padding-left 0.5s cubic-bezier(0.7, 0.24, 0.17, 0.68), padding-right 0.5s cubic-bezier(0.7, 0.24, 0.17, 0.68) , border-bottom 0.3s ease 0.1s;}
	.scroll-down #header.under-fixed {top: -120px;}
	.header {height: 120px;}
	.header .gnb-list > li > a,
	.header .user-util {height: 120px;}
	.header .logo {transition: left 0.5s cubic-bezier(0.7, 0.24, 0.17, 0.68);}
	.header .logo ,
	.header .user-util {display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
		-webkit-align-items: center; -ms-flex-align: center; align-items: center;
		position: absolute; top: 0; right: -5px;}
	.header .nav {display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;}
	.header .nav > ul > li > a > span {display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}

	.header .gnb-list {display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 820px;}
	.header .gnb-list > li > ul a {text-align: center;}

	.header .nav > ul > li > a {display: -ms-flexbox; display: -webkit-flex; display: flex; 
		-webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
		-webkit-align-items: center; -ms-flex-align: center; align-items: center;
	}
	.header .nav > ul > li > a ,
	.header .gnb-list > li > ul a {transition: 0.3s ease-out;}
	.header .has-depth::after {display: none;}
	.header .has-depth::after {left: 50%; transform: translateX(-50%); transition: opacity 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);}
	.header.nav-hover .has-depth::after {display: block; animation: depthShow 0.4s both ease-in-out 0.1s;}
	body:not(.opened-nav) .header .btn.close-nav,
	.header .btns-area {display: none;}
	.header .gnb-list > li > a + ul {opacity: 0;}
	.header.nav-hover .gnb-list > li > a + ul {opacity: 1; animation: depthShow 0.4s both ease-in-out 0.1s;}
	.header .gnb-list > li > a::before {bottom: -20px; left: 50%; width: 8px; height: 8px; border-radius: 50%; opacity: 0; animation: bounceHide 0.4s both ease-in-out; transition: opacity 0.3s ease-in-out;}
	.header .gnb-list > li.introduce > a::before {background-color: var(--orange);}
	.header .gnb-list > li.experience > a::before {background-color: var(--coral);}
	.header .gnb-list > li.community > a::before {background-color: var(--kelly-green);}
	.header .gnb-list > li.contact > a::before {background-color: var(--lightish-purple);}
	.header .gnb-list > li.current > a::before,
	.header.nav-hover .gnb-list > li:hover > a::before,
	.header.nav-hover .gnb-list > li:focus > a::before {opacity: 1; animation: bounceShow 0.4s both ease-in-out;}
	.header.nav-hover .gnb-list > li:hover > a::before,
	.header.nav-hover .gnb-list > li:focus > a::before {animation: bounceShow 0.4s both ease-in-out;}
	@keyframes bounceShow {
		0% {bottom: -20px;}
		50% {bottom: 25px;}
		70% {bottom: 10px;}
		100% {bottom: 25px;}
	}
	@keyframes bounceHide {
		0% {bottom: 25px;}
		100% {bottom: 0px;}
	}
	
	@keyframes characterShow {
		0%{opacity: 0;}
		100%{opacity: 1;}
	}
	
	.header .mo-user-util,
	.header .user-util li.my span.only-mo {display: none;}
	.header .user-util li.my span.only-pc {display: block;}
	.header .user-util li.my span::before {content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--black);}

}
@media all and (max-width: 960px) {
	.header .header-inner {display: -ms-flexbox; display: -webkit-flex; display: flex;
		-webkit-align-items: center; -ms-flex-align: center; align-items: center;
		-webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;
		padding-left: 16px; padding-right: 16px;
	}
	.header,
	.header .logo {height: 64px;}
	.header .logo {width: 64px;}
	.header .logo > a {background-size: 64px auto;}
	/* .header .gnb-list {height: calc(100% - 80px);} */

	/* .header .gnb-list + .user-util {margin-top: 60px;} */
	.header .gnb-list{-webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;}
	.header .user-util {display: -ms-flexbox; display: -webkit-flex; display: flex;
		/* -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; */
		-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;
		-webkit-align-items: center; -ms-flex-align: center; align-items: center;
		-ms-flex-wrap: wrap; flex-wrap: wrap;
		-webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;
		width: calc(100% - 32px); margin: 0 auto 40px; padding-bottom: 40px; border-bottom: 1px solid var(--black-opa-1); }
	.header .user-util li {display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;}
	.header .user-util li a {display: block; font-size: 16px !important; letter-spacing: -0.32px; color: var(--brownish-grey); text-align: left;}
	.header .user-util li.join::before{content: "/"; vertical-align: middle; color: var(--brownish-grey); font-weight: bold;
		display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; 
		-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	}
	.header .user-util li.purchase{-webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; 
		width: 100%; margin-top: 10px;
	}
	.header .user-util li.purchase a{width: auto; height: auto; border-radius: 0; background-color: transparent; color: var(--coral);}
	.header .user-util li.my span.only-pc {display: none;}
	.header .user-util li.my span.only-mo {display: block;}
	.header .user-util li.logout{display: none;}
	.header .mo-user-util {-webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; margin-top: 150px;}
	.header .mo-user-util li.logout a{display: block; font-size: 16px; letter-spacing: -0.32px; color: var(--brownish-grey); text-align: center; margin: 0 auto;}
	.header .mo-user-util li.logout span {font-family: 'Pretendard' !important;}

	.header .btns-area {margin-right: -3px;}
	.header .btns-area .btn + .nav-btns,
	.header .btns-area .purchase-btn + .login-btns,
	.header .btns-area .login-btns + .nav-btns{margin-left: 12px;}

	.header .btns-area .btn.purchase{width: 84px; height: 34px; line-height: 34px; border-radius: 17px; font-size: 15px; font-weight: bold; letter-spacing: -0.03px;}
	.header .nav {display: none; position: fixed; top: 0; left: 0; width: 100%; height: calc(100vh - 64px); background-color: var(--white); margin-top: 64px; padding-top: 48px; padding-bottom: 40px; box-sizing: border-box; z-index: 10;}
	
	.header .gnb-list > li {position: relative;}
	.header .gnb-list > li.active > ul  {display: block;}
	.header .gnb-list > li + li {margin-top: 5px;}
	.header .gnb-list > li > a {padding: 12px 0; margin-left: 16px; margin-right: 16px;}
	.header .gnb-list > li > ul > li a {padding-left: 16px; padding-right: 16px;}
	.header .gnb-list > li > a.has-depth::before {top: 50%; right: 0; width: 12px; height: 12px; background-color: transparent; background: url('../images/common/ico_nav-arrow.svg') no-repeat center center / cover; transition: 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transform: rotate(0deg) translateY(-50%); transform-origin: center center ;}
	.header .gnb-list > li.active > a::before {transform: rotate(180deg) translateY(50%);}
	.header .gnb-list ul {position: relative; background-color: var(--white); padding-bottom: 24px;}
	.header .gnb-list > li.active ul {padding-top: 10px;}
	.header li.active > .has-depth {border-bottom: 1px solid var(--black);}
	.header li.active .has-depth::after {left: auto; right: 40px; animation: showCharacter 0.4s both cubic-bezier(0.18, 0.89, 0.32, 1.28); opacity: 1;}
	.header li.introduce .has-depth::after {bottom: -30px; width: 80px; height: 80px; background-image: url('../images/common/character_buyo_mo.png');}
	.header li.experience .has-depth::after {bottom: -25px; width: 80px; height: 80px; background-image: url('../images/common/character_koyo_mo.png');}
	.header li.community .has-depth::after {bottom: -30px; width: 80px; height: 80px; background-image: url('../images/common/character_mogu_mo.png');}
	.header li.contact .has-depth::after {bottom: -30px; width: 80px; height: 80px; background-image: url('../images/common/character_nadi_mo.png'); }

	@keyframes showCharacter {
		0% {transform: translateY(60px);}
		100% {transform: translateY(0px);}
	}

	.header .gnb-list > li::before {content: ''; display: inline-block; position: absolute; right: 56px; width: 80px; height: 80px; background-repeat: no-repeat; background-position: 0 0; background-size: cover; opacity: 0; z-index: 0;}
	.header .gnb-list > li.active::before {animation: showCharacter 0.4s both cubic-bezier(0.18, 0.89, 0.32, 1.28); opacity: 1; z-index: 1; transition: 0.1s ease 0.1s;}
	.header li.experience::before {top: -1px; background-image: url('../images/common/character_koyo_mo-arm.png');}
	.header li.community::before {top: 4px; background-image: url('../images/common/character_mogu_mo-arm.png');}
	.header li.contact::before {top: 4px; background-image: url('../images/common/character_nadi_mo-arm.png');}
	@keyframes showCharacter2 {
		0% {z-index: 1; transform: translateY(60px);}
		100% {z-index: 1; transform: translateY(0);}
	}

	body.opened-nav #header {z-index: 100;}
	body.opened-nav .header .nav {display: -ms-flexbox; display: -webkit-flex; display: flex; /* -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; */ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow: hidden auto;}
	body.opened-nav .header .btn.login,
	body.opened-nav .header .btns-area .login-btns,
	body.opened-nav .header .nav .coupon-tooltip,
	body.opened-nav .header .btns-area .purchase-btn{display: none;}
}

.header .user-util li.join,
.header .login-btns {position: relative;}
.header .coupon-tooltip {top: 45px; right: -10px;
	width: 196px; height: 88px; background-image: url('../images/common/coupon_speech-bubble-b.svg'); background-repeat: no-repeat; background-size: cover; transition: 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);}
.header .coupon-tooltip .text {margin-left: -5px; padding-top: 8px; color: var(--white);}
@media all and (min-width: 961px) {
	body.scroll-down #header .coupon-tooltip {opacity: 0; visibility: hidden;}
}
@media all and (max-width: 960px) {
	.header .coupon-tooltip {top: 29px; right: -45px; width: 127px; height: 49px; background-image: url('../images/common/coupon_speech-bubble-b_mo.svg');}
	.header .coupon-tooltip .text span{font-size: 13px;}
	.header .coupon-tooltip .text{font-size: 12px; margin-left: 0; padding-top: 4px;}
}

.footer {background-color: var(--black-1);}
.footer * {font-family: 'Pretendard';}
.footer .footer-inner {padding-top: 80px; padding-bottom: 70px;}
.footer .footer-top + .footer-bottom {border-top: 1px solid #292929; margin-top: 64px; padding-top: 48px;}
.footer ul.sns-list > li {margin: 0;}
.footer .app-list > li + li {margin-left: 8px;}
.footer .app-list > li {width: 160px;}
.footer .app-list .btn {width: 100%; height: 44px; border-color: var(--white); border-radius: 8px;color: var(--white); font-size: 14px; letter-spacing: -0.28px;}
.footer .app-list .ico.app {width: 32px; height: 32px; margin-right: 2px;}
.footer .policy {width: calc(100% + 10px); font-size: 20px; letter-spacing: -0.4px; margin-left: -5px;}
.footer .policy > li + li {margin-top: 5px;}
.footer .policy a{font-weight: 500;}
.footer .policy a:not(.fc-point) {color: var(--white);}
.footer .policy a {padding-left: 5px; padding-right: 5px;}
.footer .policy + .address-wrap {margin-top: 40px;}
.footer .address-wrap { overflow: hidden;}
.footer address {display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
	-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
	line-height: 1.8; font-size: 14px; letter-spacing: -0.28px; color: var(--white-opc-7); margin-left: -20px;
}
.footer address > span {position: relative;}
.footer address > span::before {content: ''; display: inline-block; position: relative; top: 2px; width: 1px; height: 13px; background-color: var(--white-opc-7); margin: 0 10px;}
.footer .copyright {color: var(--white-opc-3 ); font-size: 14px; letter-spacing: -0.28px;}
@media all and (min-width: 1921px) {
	.footer .info-area {max-width: 750px;}
}
@media all and (min-width: 1541px) {
	.footer .app-list {width: 350px;}
	.footer .info-area {width: calc(100% - 350px);}
}
@media all and (min-width: 961px) and (max-width: 1540px) {
	.footer .app-list {width: 300px;}
	.footer .info-area {width: calc(100% - 300px);}
	.footer .app-list > li {width: 140px;}
}
@media all and (min-width: 961px) and (max-width: 1920px) {
	.footer .info-area {padding-right: 4.167vw;}
}
@media all and (min-width: 769px) and (max-width: 1080px) {

}
@media all and (min-width: 961px) {
	.footer .footer-top,
	.footer .footer-bottom {display: -ms-flexbox; display: -webkit-flex; display: flex;
		-webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;}
	.footer .footer-bottom {-webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;}
	.footer .app-list {-webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;}
	.footer .app-list,
	.footer .sns-list {-webkit-box-ordinal-group: 3; -ms-flex-order: 2;  order: 2;}
	.footer .sns-list {-webkit-align-items: center; -ms-flex-align: center; align-items: center;}
	.footer .info-area,
	.footer .copyright {-webkit-box-ordinal-group: 2; -ms-flex-order: 1;  order: 1; padding-bottom: 8px;}
}
@media all and (max-width: 960px) {
	.footer .footer-inner {}
	.footer .app-list + .info-area {margin-top: 48px;}
	.footer .footer-top + .footer-bottom {margin-top: 48px;}
	.footer .sns-list {-webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;}
	.footer .sns-list + .copyright {margin-top: 20px;}
	.footer .copyright {text-align: center;}
}
@media all and (max-width: 768px) {
	.footer .footer-inner {padding: 40px 16px;}
	.footer .app-list {-webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;}
	.footer .app-list > li {width: calc(50% - 6px);}
	.footer .app-list .ico {width: 28px; height: 28px; margin-right: 6px;}
	.footer .policy {font-size: 16px; letter-spacing: -0.32px;}
}


/* opened-nav*/
body.opened-nav{overflow: hidden;}


/* fixed-con */
.fixed-con{position:fixed;}

/* popup */
.overlay {position:fixed;top:0;bottom:0;left:0;right:0;background: rgba(0, 0, 0, 0.5);visibility:hidden;opacity: 0;z-index:-1;
	display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
	-webkit-align-items: center; -ms-flex-align: center; align-items: center;
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-ms-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
}
.overlay.active{visibility: visible;opacity: 1;overflow-y: auto;z-index: 99;}
.popup{position:relative; /*width:80%;max-width:600px;height:80%;max-height:580px;*/ min-width: 420px; background-color: var(--white); margin: 0 auto; padding: 40px 30px;}

.popup-header{position: relative; display:block; text-align: center;}
.popup-header .btn-close{position:absolute; top: -3px; right: 0; width: 36px; height: 36px; background-color: transparent; padding: 0;}
.popup-header .btn-close .ico {width: 100%; height: 100%;}
.popup-header .title {font-weight: 600; font-size: 22px; letter-spacing: -0.44px;}
.popup-body{overflow:hidden auto; margin-top: 40px;}
button{-webkit-appearance:none;display:inline-block;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;border: 0 none;padding:0;outline: none;}
.popup-body .text-wrap {text-align: center;}
.popup-body .title{font-size: 22px; font-weight: 600; letter-spacing: -0.44px; color: #231d1b;}
.popup-body .text {font-size: 18px; letter-spacing: -0.36px;}
.popup-body .box-wrap:not(.search){padding-top:0;}
.popup-body .btn-area {margin-top: 36px;}
.popup-body .btn-area .btn.x-medium{min-width: 260px; margin: 0 auto;}

@media all and (max-width:768px) {
	.popup{ padding: 30px 40px;}

	.popup-header .title{font-size: 20px; letter-spacing: -0.4px;}

	.popup-body{margin-top: 36px;}
	.popup-body .text{font-size: 16px; letter-spacing: -0.32px;}
	.popup-body .btn-area{margin-top: 30px;}
	.popup-body .btn-area .btn.x-medium{min-width: auto; width: 100%;}
}
@media all and (max-width:540px) {
	.popup {min-width: auto; width: 100%;  margin-left: 16px; margin-right: 16px;}
}


.layer-pop {position:absolute;visibility:hidden;opacity: 0;
	display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
	z-index:-1; display: none;
}
.layer-pop.active{visibility: visible;opacity: 1;z-index: 99; display: block;}
.layer-pop-inner {position: relative; background-color: var(--white); padding: 24px 26px;}
.layer-pop .btn-close {position: absolute; top: 23px; right: 19px; width: 34px; height: 34px; padding: 0;}
.layer-pop .btn-close .ico {width: 24px; height: 24px;}
@media all and (min-width: 769px) {
	.layer-pop { width: max-content; -webkit-filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.12)); filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.12)); }
}
@media all and (max-width:768px) {
	.layer-pop {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--black-opa-5);}
	.layer-pop-inner {margin: 170px 16px 0; padding: 28px 24px;}
}

.loading {
	display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
	-webkit-align-items: center; -ms-flex-align: center; align-items: center;
	position:fixed;top:0;bottom:0;left:0;right:0;background: rgba(0, 0, 0, 0.6);z-index:99;}
.loading .loader .img-wrap {width: 200px; height: 200px;}
@media all and (max-width:768px) {
	.loading .loader .img-wrap {width: 32vw; height: 32vw;}
}