/**************************************************
* 버전관리
* version : v=1
* Last Update : 
**************************************************/

/********************************************************
■ 공통
********************************************************/
#wrap{position:relative; line-height:1.5; overflow:hidden; --head-height:clamp(3.5rem, 2.95rem + 2.75vw, 6.25rem);}
.mob, .tablet{display:none;}
h2{font-size:var(--font-size-50); font-weight:var(--font-weight-extrabold); color:var(--Text-Color-Black); letter-spacing: -0.02em;}
h3{font-size:var(--font-size-37); font-weight:var(--font-weight-bold);  color:var(--Text-Color-Black); letter-spacing: -0.02em;}
h4{font-size:var(--font-size-28); font-weight:var(--font-weight-semibold);  color:var(--Text-Color-Black); letter-spacing: -0.02em;}
h5{font-size:var(--font-size-21); font-weight:var(--font-weight-medium);  color:var(--Text-Color-Black); letter-spacing: -0.02em;}
h6{font-size:var(--font-size-20); font-weight:var(--font-weight-bold);  color:var(--Text-Color-Black); letter-spacing: -0.02em;}

h4{margin-top:var(--num-64); margin-bottom:var(--num-20);}
h5{margin-top:var(--num-32); margin-bottom:var(--num-12);}
h6{margin-top:var(--margin-20);}

.content-width{width:var(--content-width-sm); margin:0 auto; padding-left: var(--side-padding); padding-right: var(--side-padding);}


@media (max-width:1024px){	
	.tablet{display:block;}
}
@media (max-width:767px){	
	.mob{display:block;}
	.web{display:none;}
}


/*-----아이콘-----*/
[class*='ico_'] {display:block; flex-shrink:0; forced-color-adjust: none; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain;}
.ico_arrow {-webkit-mask-image: url('/images/default/main/ico_arrow.svg'); mask-image: url('/images/default/main/ico_arrow.svg');}
.ico_add {-webkit-mask-image: url('/images/default/content/ico_add.svg'); mask-image: url('/images/default/content/ico_add.svg');}
.ico_top {-webkit-mask-image: url('/images/default/main/icon_top.svg'); mask-image: url('/images/default/main/icon_top.svg');}



/********************************************************
■ 본문 바로가기 메뉴
********************************************************/
#skipNavi{position: fixed; top: 0; left: 0; z-index: 10000; width: 100%; text-align: center; background-color: var(--Gray-Color-900);}
#skipNavi a:not(:focus){position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;}
#skipNavi a:focus{display: flex; align-items: center; justify-content: center; flex-direction: row; box-shadow: inset 0 0 0 0.125rem var(--BG-Color-KDS-Blue); outline: 0.125rem solid var(--Text-Color-White); outline-offset: -0.25rem; font-size: var(--font-size-15); color: var(--Text-Color-White); width: 100%; height: var(--num-40); margin: 0 auto; text-align: center;}



/********************************************************
■ 헤더
********************************************************/
#header{position: fixed; top:0; left: 0; width:100%; height:var(--head-height);  --head-color:var(--Text-Color-White); border-bottom:1px solid transparent; z-index:100;    -webkit-transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease; transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;}
#header .header_inner{display:flex; align-items: center; width:var(--content-width); height:100%;   margin:0 auto; padding:0 var(--side-padding); position: relative; top:0; }
.logo{width:clamp(5.6rem, 3.751rem + 4.93vw, 8.188rem); aspect-ratio: 131 / 50;   z-index: 1300;}
.logo a{width:100%; height:100%; display: block; width: 100%; height: 100%; background-image: url('/images/default/main/logo_w.svg'); background-position: center; background-size: contain; background-repeat: no-repeat; transition: all 0.3s ease;}

/*gnb 메뉴들*/
.gnb{flex:1; display:flex; justify-content: flex-end; align-items: center; gap:clamp(1rem, 0.575rem + 2.125vw, 3.125rem); font-size:var(--font-size-17); color:var(--head-color);}
.outer_link_wrap {display:flex; gap:0.5rem;}
.storeBtn{display: inline-flex; align-items: center; gap: 0.437rem; line-height: 1.2; padding: clamp(0.375rem, 0.35rem + 0.125vw, 0.5rem) clamp(0.8rem, 0.657rem + 0.381vw, 1rem); font-size:var(--font-size-16); border-radius: 3.125rem; background:var(--Brand-Color-main); border: 1px solid rgba(255,255,255,0.3); color:#fff; font-weight: 600; font-family:var(--ff-outfit); -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; }
.storeBtn [class^="icon_"]{background:#fff;}
.storeBtn:is(:hover, :focus){background:var(--Brand-Color-main); border-color:var(--Brand-Color-main);}

/* 햄버튼 */
.btn-gnb-menu{width:2rem; height:auto; aspect-ratio:1; cursor:pointer; z-index:9999; }
.btnAll {position:relative; display:block; width:var(--num-32); height:var(--num-32); outline-offset: 0.25rem; z-index:9999;}
.btnAll span {position: absolute; right:0; display: inline-block; width: 100%;  height: 0.188rem; border-radius:0.2rem;  background-color: var(--Text-Color-White); -webkit-transition: all 0.25s; transition: all 0.25s; }
.btnAll > span:nth-child(1) { top: 0.3125rem; }
.btnAll > span:nth-child(2) { top: 0.875rem; width:80%;}
.btnAll > span:nth-child(3) { top: 1.4375rem;}
.headerOpen .btnAll > span{}
.headerOpen .btnAll > span:nth-child(1) { top: 0.7rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 1.7rem;}
.headerOpen .btnAll > span:nth-child(2) { top: 0; opacity: 0; width: 1.7rem;}
.headerOpen .btnAll > span:nth-child(3) { top: 0.7rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 1.7rem;}

/* 헤더 오버 & 스크롤 */
:is(.headerScroll)#header {top:-100%; -webkit-transition:top 1.5s cubic-bezier(0.4, 0, 0.2, 1); transition: top 1.5s cubic-bezier(0.4, 0, 0.2, 1);}
:is(.headerOpen) #nav {display:none;}

:is(.headerOver, .headerSearch, .headerScroll, .searchHead, .no-menu-active)#header {background:#fff; --head-color:var(--Text-Color-Basic-1); }
:is(.headerOver, .headerSearch, .headerScroll, .searchHead, .no-menu-active) .logo a { background-image: url(/images/default/main/logo_b.svg); }
:is(.headerOver, .headerSearch, .headerScroll, .searchHead, .no-menu-active) .btn-gnb-menu .btnAll span{background-color: var(--Gray-Color-800);}

/*레프트메뉴 없을때*/
#wrap:has(#header.no-menu-active){padding-top:var(--head-height);}
#wrap:has(#header.no-menu-active) .page_main_title .h-tit{text-align:center;}

/* 전체메뉴 */
#navi{position:fixed;right:0;top:0;z-index:1200; width:100%; height:100vh; overflow:hidden; background:#fff; opacity:0; transform:translateX(100%); transition:all 0.5s cubic-bezier(.38,.37,.12,.98); visibility: hidden; }
.navi_inn{ display: flex; height: 100%;}
.navi_inn .areaL{width: 25%; overflow: hidden; position: relative;}
.navi_inn .areaL .img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('/images/default/content/sitemap1.webp?v=2') no-repeat center / cover; opacity: 0; transform: scale(1.3); transition: 1.5s;}
.navi_inn .areaR{ width: 75%; display: flex; align-items: center;}
.navi_inn .menu_ul{width: 100%; overflow: hidden; padding: 0 3.6458vw 0 6.25vw; position: relative; }
.navi_inn .menu_ul > li{display: flex; align-items: flex-start; padding: var(--num-40) 0; }
.navi_inn .menu_ul > li:first-child {padding-top:0;}
.navi_inn .menu_ul > li:last-child {padding-bottom:0;}
.navi_inn .menu_ul > li ~ li{border-top:1px solid #ebebeb; }
.navi_inn .menu_ul > li .menu_link{display: flex; margin-top: calc(-1 * clamp(0rem, -0.088rem + 0.438vw, 0.438rem)); width: 25%; color: #000; font-weight: 700; font-size: 1.875vw; line-height: 1; position: relative; }
.navi_inn .menu_ul > li.over4  .menu_link {}
.navi_inn .menu_ul > li > ul{align-self: center; width: 75%; overflow: hidden; display: flex; flex-wrap:wrap; gap:1rem 0;}
.navi_inn .menu_ul > li > ul > li{width: 25%; display: flex;}
.navi_inn .menu_ul > li > ul > li a{display: flex; gap: 0 0.5rem; align-items: center; color: #000; font-size: var(--font-size-18); letter-spacing: -0.05em; transition: 0.3s;}
.navi_inn .menu_ul > li > ul > li a:after{content: "\e940"; font-family: 'xeicon';  width: 0.4167vw; opacity: 0; color:var(--Brand-Color-main); transform: translate(-100%, 0); transition: 0.3s;}
.navi_inn .menu_ul > li > ul > li a.newBlank:after{content: "\e980";}
.navi_inn .menu_ul > li > ul > li.tit{display:none;}
.navi_inn .menu_ul > li > ul > li strong{color:var(--Brand-Color-main);}

.headerOpen #navi{opacity:1;transform:translateX(0); visibility: visible}
.headerOpen .btnAll span {background-color: var(--Text-Color-Black);}

@media (max-width:1280px){	
	/* 전체메뉴 */
	.navi_inn .menu_ul > li > ul > li {width: 33%;}
}

@media (min-width:1025px){
	.navi_inn .menu_ul > li{opacity: 0; transform: translate(0, 10%); transition: 0.8s;}
	.navi_inn .menu_ul > li .menu_link{margin-top:0; transition: 0.3s;}
	.navi_inn .menu_ul > li > ul{ transition: 0.4s;}
	.navi_inn .menu_ul > li:is(:hover, :focus) .menu_link,
	.navi_inn .menu_ul > li > ul > li:is(:hover, :focus) a{color:var(--Brand-Color-main);}
	.navi_inn .menu_ul > li > ul > li:is(:hover, :focus) a:after{opacity: 1; transform: none;}
	.navi_inn .menu_ul > li > ul > li ul{display:none;}

	.headerOpen .navi_inn .areaL .img{ opacity: 1; transform: none; transition-delay: 0.3s;}
	.headerOpen .navi_inn .menu_ul > li{opacity: 1; transform: none;}
	.headerOpen .navi_inn .menu_ul > li::before{transform: none;}
	.headerOpen .navi_inn .menu_ul > li:nth-child(1){ transition-delay: 0.6s;}
	.headerOpen .navi_inn .menu_ul > li:nth-child(2){ transition-delay: 0.7s;}
	.headerOpen .navi_inn .menu_ul > li:nth-child(3){ transition-delay: 0.8s;}
	.headerOpen .navi_inn .menu_ul > li:nth-child(4){ transition-delay: 0.9s;}
	.headerOpen .navi_inn .menu_ul > li:nth-child(5){ transition-delay: 1.0s;}
	.headerOpen .navi_inn .menu_ul > li:nth-child(6){ transition-delay: 1.1s;}
	.headerOpen .navi_inn .menu_ul > li:nth-child(7){ transition-delay: 1.2s;}
}

@media (max-width:1024px){	
	.logo{z-index:100;}
	.gnb .storeBtn {display:none;}

	#navi{max-width:24rem;}
	#menuAll:before{display: none; content: ""; position: fixed; top: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); transition: opacity 0.5s 0.1s; z-index: 1000;}
	.navi_inn{flex-direction: column;}
	.navi_inn .areaL{ display: flex; align-items: center; width:100%;  padding:0.8rem var(--side-padding); border-bottom:1px solid var(--border-Color); height: var(--head-height);}
	.navi_inn .areaL .img{display:none;}
	.mob_log_util {display:flex; gap:0.5rem;}

	/*모바일메뉴*/
	.navi_inn .areaR{width:100%; flex:1; overflow-y:auto; display:block; position:relative;}
	.navi_inn .areaR:before{content:""; position:absolute; left:0px; top:0px; width: 25% ; height:100%; background:var(--Brand-Color-main); }
	.navi_inn .menu_ul{padding:0; overflow: visible;}
	.navi_inn .menu_ul > li{display:block; padding:0;}
	.navi_inn .menu_ul > li ~ li{border:none}
	.navi_inn .menu_ul > li .menu_link{ font-size:var(--font-size-18); justify-content: space-between; color:var(--Text-Color-White); padding:var(--side-padding); }
	.navi_inn .menu_ul > li > ul{ display:none; flex-direction: column; position: absolute; left: 25%; top: 0; padding:var(--side-padding); overflow: visible;}
	.navi_inn .menu_ul > li > ul > li{width:100%; flex-direction: column;}
	.navi_inn .menu_ul > li > ul > li.tit{display:block; border-bottom:1px solid var(--border-Color); font-size:var(--font-size-22); font-weight:700; padding-left:var(--num-14); padding-bottom:var(--num-14); margin-bottom:var(--num-14); text-align: left;}
	.navi_inn .menu_ul > li > ul > li a{font-size:var(--font-size-18); padding:var(--num-14); width:100%; border-radius:var(--radius-md);}
	.navi_inn .menu_ul > li > ul > li a:after{content: "\e943"; margin-left:auto; opacity: 1; width:auto;  transform: translate(0, 0)  rotate(0deg );}
	.navi_inn .menu_ul > li > ul li.nosub a:after{opacity: 0;}
	.navi_inn .menu_ul > li > ul > li a.newBlank:after{content: "\e980"; opacity: 1;}
	.navi_inn .menu_ul > li > ul > li a:is(:hover, :focus){background:rgba(var(--Brand-Color-main-rgb),0.1);}
	.navi_inn .menu_ul > li > ul > li.open_li a:after{transform: translate(0, 0) rotate(180deg );}
	.navi_inn .menu_ul > li > ul > li ul {display:none; }
	.navi_inn .menu_ul > li > ul > li ul .tit{display:none;}
	.navi_inn .menu_ul > li > ul > li ul a{padding-left: var(--num-24);}
	.navi_inn .menu_ul > li > ul > li ul a:before{content:"•"; color:var(--Brand-Color-main);}
	
	.headerOpen #menuAll:before{display: block; opacity: 1;}
	.headerOpen .navi_inn .menu_ul > li{opacity: 1; line-height: 1.2;}
	.headerOpen .navi_inn .menu_ul > li.open_li .menu_link{background:#fff; color:var(--Brand-Color-main); }
	.headerOpen .navi_inn .menu_ul > li.open_li ul.on{opacity: 1;  display: block; }

	
}
@media (max-width:768px){ 
	.navi_inn .areaR:before, 
	.navi_inn .menu_ul > li .menu_link{width:30%;}
	.navi_inn .menu_ul > li > ul{left:30%; width:70%;}
}



/********************************************************
■ 푸터
********************************************************/
#footer{padding:clamp(4rem, 3.913rem + 0.438vw, 4.438rem) 0 clamp(5rem, 3.588rem + 7.062vw, 12.063rem); color:#fff; font-size: var(--font-size-20); background:#000 url('/images/default/main/foot_bg.webp')no-repeat 50% 50%/cover;}
#footer .inn{max-width:var(--content-width); padding:0 var(--side-padding); margin:0 auto;}
.topBtn {position: fixed; right: clamp(1rem, 0.6rem + 2vw, 3rem); bottom:clamp(1rem, 0.6rem + 2vw, 3rem);  z-index: 200;}
.topBtn button {width: clamp(3rem, 2.6rem + 2vw, 5rem); height:auto; aspect-ratio:1; color:#fff; font-size: var(--font-size-15); border-radius:100%; background: #333; border-radius: 50%;  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; opacity:0; transform:translateY(50%);}
.topBtn button .inn {display: flex; flex-direction: column; align-items: center; justify-content: center;  transition: transform 0.3s;}
.topBtn .ico_top {display:block; width: clamp(1.063rem, 0.955rem + 0.538vw, 1.6rem); height:clamp(1.063rem, 0.955rem + 0.538vw, 1.6rem); background-color:#fff;}
.topBtn button:hover .inn{transform:translateY(-10%);}

.topBtn.scrollUp button {opacity:0; transform:translateY(50%);}
.topBtn.scrollDown button {opacity:1; transform:translateY(0);}

/*-----푸터 상단 영역-----*/
#footer .logo{display:block; width:clamp(8.75rem, 8.563rem + 0.938vw, 9.688rem); background:url('/images/default/main/logo_w.svg')no-repeat 0 0/100%; z-index: 0;}
#footer .ft_top{display:flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: clamp(3rem, 2.888rem + 0.563vw, 3.563rem);}
#footer .ft_utill{display:flex; gap:0 clamp(1rem, -0.25rem + 3.333vw, 2.75rem); align-items: center; margin-top:calc(-1 * clamp(0rem, -0.138rem + 0.688vw, 0.688rem))}

/* 상점 바로가기 버튼 */
#footer .ft_utill .storeBtn{padding-top:clamp(0.375rem, 0.369rem + 0.031vw, 0.406rem); padding-bottom:clamp(0.375rem, 0.369rem + 0.031vw, 0.406rem); font-size: var(--font-size-20); font-family: var(--ff-notoSans);  font-weight: 500; border: 1px solid #FFF; background:none;}
#footer .ft_utill .storeBtn:is(:hover, :focus){background:var(--Brand-Color-main); border-color:var(--Brand-Color-main);}

/* 패밀리 사이트 */
#footer .family-site{position: relative;}
#footer .family-site button{display: flex; justify-content: space-between; width: 10.3125rem; padding: 0.5625rem 0; color:#fff; border-bottom: 1px solid #FFF; font-size: var(--font-size-18); font-weight: 600;}
#footer .family-site button [class^="icon_"]{background:#fff; -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s;}
#footer .family-site button.active [class^="icon_"]{transform: rotate(180deg );}
#footer .family-site .select-listbox{position: absolute; left: 0; top: calc(100% + 0.1rem);  display:none;overflow-y: auto; z-index: 10; width: 100%; color: var(--Text-Color-Basic-1); background-color: var(--Gray-Color-0); border-radius: 0 0 0.4rem 0.4rem; padding:0.5rem; box-shadow:0 0 0.5rem rgba(0,0,0,0.3);}
#footer .family-site .select-listbox li{font-size:var(--font-size-14);}
#footer .family-site .select-listbox li:not(:first-child){margin-top:0.5rem;}
#footer .family-site .select-listbox li a:hover{color:var(--Brand-Color-main); text-decoration:underline; text-underline-position: under; }


/*-----푸터 하단 영역-----*/
#footer .ft_cont{display:flex; justify-content: space-between; flex-wrap:wrap;}

/* 주소 */
#footer .ft_cont .ft_add{display:flex; flex-wrap:wrap; gap:clamp(0.75rem, 0.7rem + 0.25vw, 1rem) 1.5rem; align-content: flex-start; width: 80%; font-weight: 300;}
#footer .ft_cont .ft_add li{display:inline-flex; gap:0.5rem; align-items: center; line-height: 1;}
#footer .ft_cont .ft_add li.addr{width:100%; align-items: flex-start; line-height:1.2;}
#footer .ft_cont .ft_add li b{font-weight: 700; color: #7F7F7F;}
#footer .ft_cont .ft_add li strong {font-weight: 700;}

/* CS센터 안내 */
#footer .ft_cont .ft_time{text-align:right; font-size: var(--font-size-18); width: 20%;}
#footer .ft_cont .ft_time .time{display: flex; align-items: center; justify-content: flex-end; font-size: clamp(1.602rem, 1.472rem + 0.648vw, 2.25rem); font-weight: 700; margin-bottom:1rem;}
#footer .ft_cont .ft_time .time [class^="icon_"]{background:#fff; width:2rem; margin-bottom: 0.5rem; margin-right:0.5rem;}

/* 카피라이트 */
#footer .copy{margin-top:clamp(4rem, 3.9rem + 0.5vw, 4.5rem); font-size: var(--font-size-18); font-weight: 300; text-transform: uppercase; color:#CCCCCC;}


/*-----퀵메뉴-----*/
.quick {display: flex; justify-content: flex-end; align-items: center; position:fixed; top:0; left:0; right:0; bottom:0; padding-right:clamp(1rem, 0.9rem + 0.5vw, 1.5rem); width:100%; height:100%; pointer-events:none; z-index: 5;}
.quick.sticky-end {position: absolute; top: auto; left: auto; height: auto; bottom:clamp(6rem, 3.586rem + 6.438vw, 9.38rem);}
.quick button {display:none; width: clamp(3rem, 2.6rem + 2vw, 5rem); height:auto; aspect-ratio:1; color:#fff; font-size: var(--font-size-15); border-radius:100%; background: #fff; border:0.8px solid rgba(1, 116, 229, 0.25); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; opacity:1} 
.quick button .icon_quick_more {width: 42%; background-color:var(--Brand-Color-point)}
.quick ul {border: 0.8px solid rgba(1, 116, 229, 0.25); border-radius:clamp(0.75rem, 0.613rem + 0.688vw, 1.438rem) 3px clamp(0.75rem, 0.613rem + 0.688vw, 1.438rem) 3px;  box-shadow: 3.45px 3.45px 5.75px 0 rgba(0, 0, 0, 0.06);}
.quick ul > li a {display: flex; flex-direction: column; justify-content: center; align-items: center; padding:0.875rem 0.743rem; min-height: clamp(5rem, 4.525rem + 2.375vw, 7.375rem); color: #262626; font-size: clamp(0.889rem, 0.867rem + 0.111vw, 1rem); text-align:center; line-height: 1.2; background:#fff; pointer-events:auto; transition: all 0.3s;}
.quick ul > li a:hover {color:var(--Text-Color-White); background:var(--Brand-Color-point);}
.quick ul > li.active a {color:var(--Text-Color-White); background:var(--Brand-Color-point);}
.quick ul > li:first-child a {border-radius:clamp(0.75rem, 0.613rem + 0.688vw, 1.438rem) 3px 0 0;}
.quick ul > li:last-child a {border-radius:0 0 clamp(0.75rem, 0.613rem + 0.688vw, 1.438rem) 3px;}
.quick_icon_wrap {display:inline-flex; justify-content: center; align-items: center; margin-bottom: 0.5rem; width: clamp(1.5rem, 1.45rem + 0.25vw, 1.75rem); position:relative;}
.quick_icon_wrap img { transition:opacity 0.3s;}
.quick_icon_wrap img:not(.on_icon) {opacity:1;}
.quick_icon_wrap .on_icon {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); opacity:0; z-index:1;}

.quick ul > li.active a .quick_icon_wrap img:not(.on_icon),
.quick ul > li a:hover .quick_icon_wrap img:not(.on_icon) {opacity:0;}
.quick ul > li.active .quick_icon_wrap .on_icon,
.quick ul > li a:hover .quick_icon_wrap .on_icon  {opacity:1;}

@media (max-width:1440px){	
	#footer .ft_cont .ft_add{width:100%;}
	#footer .ft_cont .ft_time{ text-align:left; width:100%; margin-top:2rem;}
	#footer .ft_cont .ft_time .time {justify-content: flex-start;}
}
@media (max-width:1200px){	
	.quick {align-items: flex-end; padding-right:clamp(1rem, 0.6rem + 2vw, 3rem); padding-bottom: calc(clamp(1rem, 0.6rem + 2vw, 3rem) + clamp(4rem, 3.8rem + 1vw, 5rem)); height: auto; top: auto; left: 0; right: auto; bottom: 0; }
	.quick.sticky-end {position:fixed; top:auto; left:auto; bottom: 0; right:0; height:auto;}
	.quick button {display:block; cursor:pointer; pointer-events: auto; opacity: 0; transform: translateY(50%); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; will-change: transform, opacity; -webkit-backface-visibility: hidden;  backface-visibility: hidden;}
	.quick ul {display:none; position:absolute; bottom:calc(clamp(3rem, 2.6rem + 2vw, 5rem) + clamp(6.25rem, 5.9rem + 1.75vw, 8rem)); right:calc(clamp(1rem, 0.6rem + 2vw, 3rem)/2);}

	.quick.scrollUp :is(button) {opacity:0; transform:translateY(50%);}
	.quick.scrollDown :is(button) {opacity:1; transform:translateY(0);}
}
@media (max-width:768px){	
	#footer{font-size: var(--font-size-16); }
	#footer .ft_utill .storeBtn{display:none;}
	#footer .family-site button,
	#footer .ft_cont .ft_time{font-size: var(--font-size-15);}
	#footer .copy{font-size: var(--font-size-14);}

	.topBtn button:hover .inn{transform:translateY(0);}
}

/********************************************************
■ 아이콘
********************************************************/
[class^="icon_"] {display: inline-flex; width: 1.125rem; aspect-ratio: 1; background-color: var(--Text-Color-Black); vertical-align: middle; forced-color-adjust: none; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain;}
[class^="icon_"].pure{background-color: transparent !important;  forced-color-adjust: none;}/*컬러 아이콘에 사용*/

.icon_link{-webkit-mask-image: url(/images/default/main/icon_lick.svg); mask-image: url(/images/default/main/icon_lick.svg); }
.icon_drop{-webkit-mask-image: url(/images/default/main/icon_drop.svg); mask-image: url(/images/default/main/icon_drop.svg); }
.icon_talk{-webkit-mask-image: url(/images/default/main/icon_talk.svg); mask-image: url(/images/default/main/icon_talk.svg); }
.icon_home{-webkit-mask-image: url(/images/default/main/icon_home.svg); mask-image: url(/images/default/main/icon_home.svg); }
.icon_quick_more {-webkit-mask-image: url(/images/default/main/icon_more.svg); mask-image: url(/images/default/main/icon_more.svg); }

/********************************************************
■ 팝업 롤링
********************************************************/
.layerPopup {position:absolute;top:230px;left:10rem; width:450px; background:#fff;line-height:auto;z-index:99999;border:10px solid #15334F;box-shadow:0 0 4px rgba(0,0,0,0.2); padding-bottom:40px;}
.layerPopWrap{position:relative; width:100%; height:100%;}
.layerPopup ul li img{width:100%;}

@media (max-width:1030px){
	.layerPopup {left:50% !important;  transform:translateX(-50%);}
}
@media (max-width:767px){
	.mobile_dim{width: 100%; height:100%; position: absolute; top: 0; left: 0; margin: 0; z-index: 1039; display: inline-block; background: rgba(0,0,0,0.5);}
	.layerPopup img{width:100% !important;}
	.layerPopup {left:5% !important;  transform:translateX(0%); width:90% !important; height:auto !important; top:130px;}
	.chkvsb{font-size:0.7rem !important;}
}


/********************************************************
■ 팝업 - (메인 로그인관련팝업)
********************************************************/
.con_pop{background: rgba(0, 0, 0, .6); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000;}
.con_pop .popin{width: 600px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);  text-align: center; z-index: 100; border-radius: 1rem; overflow:hidden;}
.con_pop .popin h3{color: #fff; background: #3B4481;  padding:0 1rem; font-size: 1.2rem; font-weight: 500; height: 2.5rem; line-height: 2.6rem; }
.con_pop .popin .txt{padding: 1.5rem 2rem; font-size: 0.9rem; line-height: 1.5;background: #fff; }
.con_pop .popin table{border-top: 2px solid #333; margin-top: 0.75rem;}
.con_pop .popin table th{background-color: #f9f9f9; border-bottom: 1px solid #e9e9e9; vertical-align: middle; text-align: center;}
.con_pop .popin table td{color: #666;  padding: 10px 15px; vertical-align: middle; border-bottom: 1px solid #e9e9e9;}

.con_pop .bottom_button{display: flex; width:100%; position:relative; z-index:10;}
.con_pop .bottom_button a{flex-basis: 50%; display: block; height: 3rem; line-height: 3rem; font-size: 0.9rem;  background: #eee; color: #111;}
.con_pop .bottom_button a.confirm{background: linear-gradient(45deg, #6d5bf2, #5c309d 30%, #5c309d 70%, #6d5bf2); color: #fff;}
.con_pop .bottom_button a.w100{flex-basis: 100%;}

.con_pop .close{position: absolute; right: 1rem; top: 12px;}
.con_pop .close a{color: #fff; font-size: 1.2rem;}
.con_pop .close span{font-size: 0;}

.con_pop .popin h4{font-size:1.4rem;  color:#333; border-bottom:1px solid #ddd; padding-bottom:1rem; margin-bottom:1rem;}
.con_pop .popin h4 b{font-weight:bold; color:var(--sub);}
.con_pop .popin h4 img{margin-bottom:10px;}
.con_pop .popin .bg span{position:relative; color:#3b4481; font-weight:bold;}
.con_pop .popin .bg span:before{content: ''; display: block; position: absolute; width: 100%; height: 50%; background: rgba(59,68,129,0.1); left: 0; bottom:0;}
.con_pop .popin .logo img{width:10rem; margin-top:0.5rem;}
.con_pop .popin b{font-weight:bold;}
.con_pop .alert img{margin-bottom:10px; width:10rem;}
.con_pop .alert h4{color:#212121;}
.con_pop small{ z-index: 1;  position: relative; margin-top:0.5rem; display:block;}

.con_pop .popin h5{font-size:1.2rem;  color:#333;margin-top:1rem;}
.con_pop .popin .bg{margin-top:1.5rem; padding:1.5rem 0 0; position:relative; color:#333; z-index:0;}
.con_pop .popin .bg:before{ content : ""; display : block; position : absolute; left :-50%; top:0; width : 200%; height : 20rem; background : #f0f2ff; z-index:-1;}
.con_pop .popin .cen_button{margin-bottom:1.5rem;position:relative; z-index:10;}
.con_pop .popin .cen_button a{display:block; width:8rem; margin:0 auto; height:2.3rem; line-height:2.3rem; background:#38387f; color:#fff; border-radius:0.5rem;}

ul.dot li{margin-bottom:5px; position: relative; padding-left:15px;  text-align:left;}
ul.dot li:before{ content : ""; display : block; position : absolute; left :0; top:0.5em; width : 6px; height : 6px; background : #666; border-radius:50%; }

/*비밀변경팝업*/
#editPass p span{color:var(--sub);}
#editPass ul li{display:flex; align-items: center}
#editPass ul li:not(:first-child){margin-top:0.5rem;}
#editPass ul li label{width:7rem; flex-shrink: 0; text-align: left;  font-weight: 600;}
#editPass ul li input{ height: 2.2rem; background: #fff url('https://dgsmidc.negagea.kr/hive/images/default/main/icon_pw.svg') no-repeat right 0.75rem top 50%; background-size: 1.2rem 1.2rem;}

@media (max-width: 767px){
	.con_pop .popin{width: 90%; margin: 0 auto;}
	.con_pop .popin .txt{padding:1.5rem 1rem;}
}