@charset "utf-8";

/****************************************************
	root /변경금지/
****************************************************/
:root{
	--theme-color: #008689;
	--dark-color: #072841;
	--main-color: #072841;
	--second-color: #008689;
	--accent-color: #008689;	
	--footer-color: #414141;
	--footer-font: #bbbbbb;
	/* 우측퀵레이어 .pop-quick-layer */
	--item-count: {{sidebar_count}}; /* 아이템갯수 */
	--item-height: calc(var(--pop-height) / var(--item-count));
}
/***********************************************************
	이동하면 안되는것들 - 개별적용 항목 /변경금지/
***********************************************************/
/* 메인 비주얼 슬라이드 넘버 */
.main-visual .pag.act1 .bar:after {width: calc(100% / 01 * 1) !important;}
.main-visual .pag.act2 .bar:after {width: calc(100% / 01 * 2) !important;}
.main-visual .pag.act3 .bar:after {width: calc(100% / 01 * 3) !important;}
.main-visual .pag.act4 .bar:after {width: calc(100% / 01 * 4) !important;}
.main-visual .pag.act5 .bar:after {width: calc(100% / 01 * 5) !important;}
/* 건드리지말것들 yun */
#header .logo a.logo-img {background: url(/admin/upimg/2025/09/16/1757987864_1.로고.png) no-repeat left center / contain;}
#gnb.depth1-list >li .depth1 {color: #333333;}
#gnb.depth1-list >li:hover .depth1 {color: #072841;}
#gnb.depth1-list .depth2 li a {color: #333333;}
#gnb.depth1-list .depth2 li a:hover {color: #072841;}
#gnb.depth1-list >li .depth1:after {background: #072841;}
.main-loc.simple .desc .text b:after {content:""; display:block; background: url(/admin/upimg/0000/00/00/)no-repeat center center /contain; width: var(--logo-width); height: var(--logo-height);}
/* .header[class*=_on] 투명헤더적용 */ /* 개별적용 */
.header[class*=_on] .inner .menu li a {color: #333333;}
.header[class*=_on]:hover .menu li:hover a {color: #072841;}
.header[class*=_on] .sub-menu >li .bot_menu li a:hover {color: #072841;}
.header[class*=_on] .header_util .item {color: #333333;}
/* .header[class*=_on] 투명헤더적용 서브적용 */  /* 개별적용 */
/*.header[class*=_on].header_sub .header_util .item {color: #072841;}
.header[class*=sec01_on].header_sub .inner .menu li a {color: #072841;}*/
.header[class*=sec01_on].header_sub .inner .menu li:hover a {color: #072841;}
/* 우측퀵레이어 .pop-quick-layer */
.pop-quick-layer .quick {display: grid; grid-auto-rows: minmax(var(--item-height), auto); /* 그리드 아이템갯수 조절 100/8=12.5 */margin-top: auto; margin-bottom: 0;}
 /****************************************************
	1. asset 이동완료 2025-07-25
	2. 개별사이트 스타일 작업시 아래에 추가하여 사용하세요!
****************************************************/
/* add */


/************ 사이드 퀵버튼 *************/
/* 공통 - 소셜바로가기 */
.footer-quick-menu {position:fixed; right: 2rem; bottom: 20rem; z-index:11; transition:var(--transition);}
.footer-quick-menu.active{bottom: 20rem;}
.footer-quick-menu.active01{bottom: 20rem;}
.footer-quick-menu .menu-list {display: flex; align-items: flex-end; justify-content: center; gap: 1rem; flex-direction: column;}
.footer-quick-menu .menu-list .list-item {transition:var(--transition); transition-delay:0.2s; display: flex;	align-items: center; justify-content: center; gap: 1rem; flex-direction: row;}
.footer-quick-menu .menu-list .list-item .bottom-fixed { display: none!important; }
.footer-quick-menu .menu-list .list-item a {display: flex; align-items:center; width: 6rem; height: 6rem; border-radius: 6rem; overflow:hidden; transition: var(--transition); /* background: rgba(0,0,0,.2); */ border: 1px solid rgba(255,255,255,.03); /* -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); */ overflow:hidden; transition-property: width background-color;}
.footer-quick-menu .menu-list .list-item a:hover {/* width: 13rem; gap: 1rem; */}
.footer-quick-menu .menu-list .list-item a.active {display: flex; align-items: center; width: 13rem; height: inherit; border-radius: inherit; transition: var(--transition); background: var(--theme-color); overflow: hidden; justify-content: space-evenly;}
.footer-quick-menu .menu-list .list-item a i {width: 6rem; color: var(--white); display: flex; align-items: center; justify-content: center;}
.footer-quick-menu .menu-list .list-item a i.active {display:none;}
.footer-quick-menu .menu-list .list-item a .txt {position: absolute;font-size: 1.65rem;letter-spacing: -0.045em;color:var(--white);font-weight:500; opacity:1!important; transition: .2s; right: 1.6rem; pointer-events: none;} 
.footer-quick-menu .menu-list .list-item a:hover .txt {opacity:1; transition:var(--transition); transition-delay:0.2s;}
.footer-quick-menu .menu-list .list-item a .txt.active{font-size:1.5rem; letter-spacing:-0.045em; color:var(--white); font-weight:500; transition:all 0.2s; transition-delay:0s; pointer-events: none;}

:root {
  --kakaotalk: #f8a407;
  --kakaotalk-opa: #f8a407c2;
  --instagram: #b137a5;
  --instagram-opa: #b137a5c2;
  --youtube: #c71c1c;
  --youtube-opa: #c71c1cc2;
  --tel: #9a908e;
  --tel-opa: #9a908ec2;
  --msg: #686896;
  --msg-opa: #686896c2;
  --topcolor: #f6f6f6;
}

.footer-quick-menu .menu-list .list-item.kakaotalk_back a {width: 12rem; background: var(--kakaotalk-opa); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); color:#fff;}
.footer-quick-menu .menu-list .list-item.instagram_back a {width: 12rem; background: var(--instagram-opa); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);color:#fff;}
.footer-quick-menu .menu-list .list-item.youtube_back a {width: 12rem; background: var(--youtube-opa); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);color:#fff;}
.footer-quick-menu .menu-list .list-item.tel_back a {width: 12rem; background: var(--tel-opa); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);color:#fff;}
.footer-quick-menu .menu-list .list-item.msg_back a {width: 12rem; background: var(--msg-opa); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);color:#fff; }
.footer-quick-menu .menu-list .list-item a:not(.to-top-btn):hover .txt {opacity:1; transition:var(--transition); transition-delay:0.2s;}





/* media */
@media screen and (max-width: 1880px) {
	@media screen and (max-width: 1640px){
	}
	@media screen and (max-width: 1560px){
	}
	@media screen and (max-width: 1500px){
	}
	@media screen and (max-width: 1470px){		
	}
	@media screen and (max-width:1280px){
	}
	@media screen and (max-width: 1024px){
	}
	@media screen and (max-width: 800px){ /* breakpoint 모바일 */
	}
	@media screen and (max-width: 640px){		
	}
	@media screen and (max-width: 480px){
	}
	@media screen and (max-width: 360px){	
	}
}