@charset "utf-8";

/****************************************************

	fullpage / root /변경금지/

****************************************************/
:root {
	/* 개별적용 css */
	/*************************************
	--theme-color: {{bisic_color}};
	--dark-color: {{bisic_color2}};
	--main-color: {{bisic_color2}};
	--second-color: {{bisic_color3}};
	--accent-color: {{bisic_color3}};
	--footer-color: {{footer_background}};
	--footer-font: {{footer_text}};
	*************************************/	
	--header-height: 12vh;
	--logo-height: 12vh;
	--logo-width: 23rem;
	--nega-header-height: -12vh;
	--menu-margin: 3rem;
	--menu-item-width: 13rem;		
	--menu-width: 50vw;
	--util-width: 30rem;
	--footer-height: auto; 
	--max-width: 90vw !important;
	--common-width: 90vw !important;
	--min-width: 320px;
	--common-padding: 5vw; 
	--hero-wide: 80vw;	
}

@media all and (max-width:1470px){

}
@media all and (max-width:1280px){
	:root{
	--header-height: 8vh;	
	--logo-height: 8vh;	
	--logo-width: 25rem;
	--util-width: 10rem;
	}	
}
@media all and (max-width:1024px){
	
}
@media all and (max-width:800px){
	
}
@media all and (max-width:640px){
}
@media all and (max-width:480px){
`		 
}

/****************************************************

	fullpage

****************************************************/
/* #fp-nav ul, .fp-slidesNav ul */
#fp-nav ul, .fp-slidesNav ul {display: flex ; flex-direction: column; gap: .4rem;}

/************** common **************/

/************** header **************/
/* 헤더공통 */
.header {width: 100%; height: var(--header-height); background: transparent; transition: var(--transition); position: fixed; left: 0; top: 0; z-index: 50; }
.header:hover {background: var(--theme-color);}
/* sub header */
.header.header_sub {background-color: var(--theme-color);}
/*.header .inner {height: var(--header-height);}*/
/* .header_sub .inner 서브페이지 메뉴 */
/*.header.header_sub .inner {max-width: var(--common-width);}
.header.header_sub .inner .menu {display: flex; justify-content: center; align-items: center; gap: 0; width: 40vw;}
.header.header_sub .sub-menu {width: 40vw; display: flex; justify-content: center; align-items: flex-start; margin-right: 4rem; gap: 0;}
.header.header_sub .header_util .item.item01 {font-size: 2.85rem; font-weight: 700; letter-spacing: -0.065em; color: var(--white);}*/
/* logo */
.header .inner .logo {display: flex; width: var(--logo-width); /*flex: 0 0 var(--logo-width);*/ max-width: var(--logo-width); height: var(--logo-height); line-height: var(--logo-height); letter-spacing: -0.05em; align-items: start; justify-content: center; flex-direction: column; gap: 0; margin-right: var(--menu-margin); margin-left: 0;}
.header .inner .logo a {display: flex; flex-direction: column; /* align-items: flex-start;  */justify-content: flex-start; width: 100%;}
.header .inner .logo a img {position: absolute; transform: translateY(-50%); transition: var(--transition); opacity: 1; max-width: var(--logo-width);}
.header .inner .logo a img.logo_color {opacity: 0;}
.header .inner .logo a img.logo_white {opacity: 1;}
.header .inner .logo .logo-txt {font-size: 2.65rem; font-weight: 700; line-height: 1.1; color: var(--white);}
.header .inner .logo .logo-txt em {display: block; font-size: 2rem; font-weight: 200;}
/* menu 메인페이지 메뉴 */
.header .inner .menu {/*display: flex; justify-content: center; align-items: center; width: var(--menu-width);*/}
.header .inner .menu li {/*justify-content: center; align-items: center; flex: 1; width: calc(100% / 5);*/}
.header .inner .menu li a {display: block; width: 100%; text-align: center; justify-content: center; font-size: 2rem; font-weight:500; height: var(--header-height); line-height: var(--header-height); transition: var(--transition); color: var(--white); /*text-shadow: var(--box-shadow7);*/ opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: var(--outline);}
.header .inner .menu li:hover a {color: var(--main-color);}
/* header_util */
.header_util {display: flex; width: var(--util-width); justify-content: flex-end; align-items: center; gap: 2rem; margin-right: 0; }
.header_util .bt-mn {display: none;}
.header_util .item {font-size: 3.2rem; font-weight: 800; letter-spacing: -0.05em; color: var(--white);}
.header_util .item.item01 {}
.header_util .item.item02 {display:none;}
.header_util .item:not(.item01) {}
[class*=header_util] [class*=item]::after {font-size: 2.6rem; line-height: 1.2;}
.header_util .item.item02::after {content: "\f2a0"; display: none;} /*문의전화*/
.header_util .item.item03::after {content: "\e500"; color:var(--accent-color); transition: var(--transition);} /*관심고객등록*/
.header_util .item.item04::after {content: "\f550"; display: none;} /*메뉴리스트*/
/* 서브메뉴 나오기 영역 */
.s_menu_cont {padding: var(--header-height) 0 3rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: var(--theme-color); position: relative; z-index: -1; transition: var(--transition); transform: translateY(-100rem); opacity: 0; visibility: hidden; /*transition: opacity 0s, visibility 0s;*/transition: var(--transition); outline: var(--outline);}
.s_menu_cont.on {transform: translateY(var(--nega-header-height)); opacity: 1; visibility: visible; /*transition: opacity 0.5s, visibility 0.5s;*/}/* 서브메뉴조정시변경 */
.s_menu_cont .inner {height: auto !important;}
.s_menu_cont .inner:before {content:""; display:block; margin-left: var(--logo-width); margin-right: var(--menu-margin);}
.s_menu_cont .inner:after {content:""; display:block; margin-right: var(--util-width); margin-left:0;}
/*.s_menu_cont .inner .left {width: var(--logo-width);}
.s_menu_cont .inner .right {width: var(--util-width);}*/
/* 메인적용 */
.sub-menu { /*display: flex; justify-content: center; align-items: flex-start; width: var(--menu-width);*/ outline: var(--outline);}
.sub-menu >li {/*flex:1; width: calc(100% / 5);  margin: 0; text-align: center;*/ padding: 0 !important;}
.sub-menu >li >a {flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; display: block; padding: 1rem 0;}
.sub-menu >li .bot_menu {display: flex; flex-direction: column; flex: 1; width:100%;}
.sub-menu >li .bot_menu li { }
.sub-menu >li .bot_menu li a {padding: .6rem 0; /*flex: 1;*/ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; display: block; font-size: 1.65rem; color: var(--white); opacity: .8; outline: var(--outline);}
.sub-menu >li .bot_menu li a:hover {color:var(--main-color);}

/* inner */
.header .inner {max-width: var(--max-width); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;}
.menu-inner {width: var(--menu-width); display: flex; flex-direction: row;}
.menu-inner >li {display: flex; flex: 1; width: var(--menu-item-width); /*width: 10rem; margin-right:1rem;*/}

/************** 메뉴바 섹션 컬러변경적용 **************/
/* ******** header on ********/
/* 로고 */
/* 투명유지 */
/* .header[class*=_on]:not(:where(.sec01_on)) .logo a img.logo_color {opacity: 1;}
.header[class*=_on]:not(:where(.sec01_on)) .logo a img.logo_white {opacity: 0;} */
/*.header[class*=_on]:not(:where(.sec01_on)) .logo .logo-txt {color: var(--theme-color);}*/

/* 메뉴 */
/* .header[class*=_on]:not(:where(.sec01_on)) .inner .menu li a {color: {{munu_1_text}}; text-shadow: none;} */ /*개별적용*/

/* 유틸아이템-전번,아이콘 */
.header[class*=_on]:not(:where(.sec01_on)) .header_util .item[class*=item]:not(:where(.item01, .item02)) {color: var(--theme-color);}
.header[class*=_on]:not(:where(.sec01_on)) .header_util .item[class*=item] {color: var(--main-color);}

/* ******** on:hover 모두 --white 적용 ********/
.header[class*=_on]:hover .logo a img.logo_color {opacity: 0;}
.header[class*=_on]:hover .logo a img.logo_white {opacity: 1;}
.header[class*=_on]:hover .logo .logo-txt {color: var(--white);}
.header[class*=_on]:hover .menu li a {color: var(--white);} /* 헤더온시 항상 화이트 */
/* .header[class*=_on]:hover .menu li:hover a {color: {{munu_1_text}};} */ /* 헤더온 오버시 항상 */ /*개별적용*/
.header[class*=_on]:hover .header_util .item[class*=item] {color: var(--white);} /* 유틸아이템-전번 */
.header[class*=_on]:hover .header_util .item[class*=item]::after {color: var(--white);} /* 유틸아이템-아이콘 */
/* 스크롤시해뎌투명유지 */
/* .header[class*=_on]:not(.sec01_on) {background: inherit;}
.header[class*=_on]:hover:not(.sec01_on) {background: var(--theme-color);} */
/*.header[class*=_on]:not(:where(.sec01_on)) .inner .menu li a {color: {{munu_1_text}};}*/ /*개별적용*/
.header[class*=_on]:hover:not(:where(.sec01_on)) .inner .menu li a {color: var(--white); text-shadow: none;}
.header[class*=_on]:not(.sec01_on) .inner .logo a img.logo_color {opacity: 0;}
.header[class*=_on]:not(.sec01_on) .inner .logo a img.logo_white {opacity: 1;}
/* 투명유지 */
/* .header[class*=_on]:hover:not(.sec01_on) .inner .logo a img.logo_color {opacity: 0;}
.header[class*=_on]:hover:not(.sec01_on) .inner .logo a img.logo_white {opacity: 1;} */



/**/
.moview {display:none;}
/************** mobileMenu **************/
/* mobileMenu 모바일 햄버거버튼 */
.mbg {display:none; position:fixed; left:0; top:0; width:100vw; height:100vh; background:#000; z-index:11111; opacity: .9; transition-property: opacity;}
/* #mobileMenu {position: fixed; display: block; top: -100vh; opacity: 0; right: 0; height: 100vh; width: 100%; transition:var(--transition2); background: var(--theme-color); z-index: 99999;} */ /* 기존노말 */
#mobileMenu {position: fixed; display: block; opacity: 1; top: 0; left: -120%; transform: translate(0,0); border-radius: 0rem 0rem 0 0; height: 100%; width: 100%; transition:var(--transition2); background: var(--theme-color); z-index: 99999;} /* start */
#mobileMenu.open {left: 0; transform: translateX(0); opacity: 1;}
#mobileMenu .inner {display: flex; flex-direction: column; align-items: flex-end; justify-content: center; height: calc(100vh - 1vh); padding: 13rem 5rem 5rem; gap: 3rem; box-sizing: border-box;}
#mobileMenu .bt {position: absolute; top: 3rem; left: 50%; transform: translateX(-50%); width: 6rem; height: 6rem; border-radius: 10rem; background: var(--main-color); display: flex; align-items: center; justify-content: center;}
#mobileMenu .mo-bt-close {width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; }
#mobileMenu .mo-bt-close::after {content: "\f00d"; display:block; font-size: 4rem; color: var(--basic-color);}
/* #mobileMenu .bt-close span {position: absolute; top: -9999px; left: -9999px;}
#mobileMenu .bt-close i{ position: absolute; top: 50%; left: 50%; margin: -.1px 0 0 -25px; width: 50px; height: 2px; background-color: var(--white); display: block; transform: rotate(45deg);}
#mobileMenu .bt-close i:nth-child(2){ transform: rotate(-45deg);} */
#mobileMenu .utill {padding: 0 1.8rem; display: flex;}
#mobileMenu .utill .bt-cs {height: 4rem; padding: 0; font-size: 1.4rem; color: var(--white); width: 12.8rem;}
#mobileMenu .utill .bt-tel {flex: 1; height: 4rem; font-size: 1.4rem;}
#mobileMenu .btn-tell {color: var(--main-color); margin-top: auto; letter-spacing: -0.05em; display: flex; align-items: flex-end; justify-content: center; gap: 1rem; flex-direction: column;}
#mobileMenu .btn-tell p {font-size: 2.25rem; display: flex; align-items: center; justify-content: center; gap: 1rem;}
#mobileMenu .btn-tell p::before {content: "\f7b6"; font-size: 2.25rem;}
#mobileMenu .btn-tell .tel-number {font-size: 4.25rem; font-weight: 800; line-height: 1; text-align: center;}
/* 모바일메뉴-리스트 */
/* .mo-menu {display: grid; grid-template-columns: 1fr; grid-auto-columns: 1fr; gap: 0rem 2rem; width: 100%;}
.mo-menu > li {display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.mo-menu > li {border-top: 1px solid var(--white-a2);}
.mo-menu > li:last-of-type {border-bottom: 1px solid var(--white-a2);}
.mo-menu > li > a {font-size: 2.25rem; color: var(--white-a); padding: 1.5rem 0rem; display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: flex-start;}
.mo-menu > li > a::before {content: "\f107"; font-size: 2rem; margin:0 1rem; color: var(--white-a);} */
/* 2depth */
/* .mo-menu .depth2.visible {display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; margin-bottom: 3rem; opacity: 1;}
.mo-menu .depth2 {display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; margin-bottom: 0; display: none; opacity: 1;}
.mo-menu .depth2 li a {display: flex; font-size: 2rem; line-height: 6rem; height: 6rem; padding: 0rem 4rem; font-weight: 200; color: var(--white-a); border-bottom: 1px dotted var(--white-a1); background: rgba(0,0,0,.2); align-items: center; justify-content: flex-start;}
.mo-menu .depth2 li a:hover {color: var(--basic-color);}
.mo-menu .depth2 li:first-of-type a {border-top: 1px solid var(--white-a1);}
.mo-menu .depth2 li a::before {content: "\f111"; font-size: 0.35rem; margin: 0 1rem; color: var(--white-a3); display: none;} */

/****************************************************
	언론보도
****************************************************/
.main-news .news-slide .swiper-slide {border: 0!important;}
.main-news .news-slide .copy {width: 100%!important;}






/****************************************************
	메인사업개요 심플타입
****************************************************/
.sub-summary {padding-top:10vh;}
.summary-desc .summary .summary-list {font-size: 1.8rem;}
.summary-desc.col-type .summary.block-type .summary-list .dt {font-size: 2rem;}


/****************************************************
	오시는길 메인서브공통
****************************************************/
/* 오시는길 */
[class*=section].loc:before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background: var(--theme-color);
    z-index: -1;
}
.sub-page [class*=section] .main-loc.simple .title {display:none;}
.sub-page [class*=section] .main-loc.simple .desc {padding: 7rem 0 5rem;}

[class*=section].loc .title {display:none;}
.main-loc.loc-type-01 .desc .text .caution,
.main-loc.loc-type-02 .desc .text .caution {display: none;}
.main-loc.loc-type-01 .desc .text {display:none;}
.main-loc.loc-type-02 .desc .text .tel span {display: none;}
.main-loc > a {display:none;}
.main-loc .desc {width: 80vw; border:0 !important;}
/*.main-loc .desc .loc-add-txt li:first-child {display: flex;}*/
.main-loc.loc-type-01 .desc .map .map-img-wrap .map-title-ab,
.main-loc.loc-type-01 .map_model_frame_div .map-title-ab {display:block;}
.main-loc.loc-type-01 .map_model_frame_div {height: 45vw; max-height: min(50rem, 45vw);}
.main-loc.loc-type-01 .desc .map .map-title {}
@media screen and (max-width: 1470px) {
	.main-loc .desc {width: 100%; gap: 2rem;}
	.main-loc .desc .text {gap: 1rem;}
	.main-loc .desc .loc-add-txt {font-size: 2rem;}
	.main-loc.loc-type-01 .desc {width: 90vw;}	
}

/************** footer **************/
footer #btTop {margin-bottom: auto; z-index: 4; border: 1px solid var(--white-a3); border-radius: 50%; width: 8rem; height: 8rem;}
footer #btTop::after {content: "\f077"; font-size: 4rem;}


/********* 하단 메인-관심고객등록  *****************/
[class*=section].customer .common-customer {height:100%;}


/************** 공통섹션-customer 관심고객등록팝업모달 **************/
#pop-zzim-modal {display: none; position: fixed; width: 100%; height: 100vh; z-index: 99; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .7); -webkit-transform: translateZ(0); transform: translateZ(0);}
#pop-zzim-modal .customer {background: var(--simple-color)!important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 35vw; max-width: min(60rem, 35vw); border-radius: 3rem; overflow: visible;}
#pop-zzim-modal .common-customer {display: flex ; align-items: center; justify-content: space-between; gap: 0rem; max-width: 100% !important;}
#pop-zzim-modal .common-customer .space {width:20vw; height: 40vw; border-radius: 3rem 0 0 3rem; overflow: hidden; display:none;}
#pop-zzim-modal .common-customer .customer-box {width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 5rem 5rem; margin: 0 auto;}
#pop-zzim-modal .common-customer .frm-customer .desc label {flex: 2; margin-right: 0; width:10rem;}
#pop-zzim-modal .common-customer .frm-customer .desc input {flex: 8; margin-left: 0; line-height: 4rem; font-size: 2rem; width:10rem;}
#pop-zzim-modal .pop-close {position: absolute; top: -4%; left: 50%; transform: translate(-50%, 4%); z-index: 11;}
#pop-zzim-modal .pop-btn-close {display: flex; align-items: center; justify-content: center; width: 10rem; height: 5rem; border-radius: 5rem; background: var(--accent-color);}
#pop-zzim-modal .pop-btn-close::after {content: "\f00d"; font-size: 2.85rem; color: var(--white); transform:rotate(0); transition: var(--transition);}
#pop-zzim-modal .pop-btn-close:hover::after {transform:rotate(90deg);}
@media screen and (max-width: 1280px){
	#pop-zzim-modal .customer {width: 80vw; max-width: min(50rem, 80vw);}
}



@media screen and (max-width: 1740px) {
	@media screen and (max-width: 1470px){    
	}
	@media all and (max-width:1280px){
	/* 전화번호 잠시숨김-아이콘으로 표시 */	
	.header_util .item {font-size: 3rem}
	.header_util .item.item01 {display: none;}
	.header_util .item.item02 {display: block;}
	.header_util .item.item02:after {display: block;}
	}
	@media screen and (max-width: 1024px){	/* breakpoint non-fullpage */	
    /* 메뉴 상단으로 사라짐 */
    /*.header[class*=_on]:not(.sec01_on) {top: -15rem; transition-delay: 0.5s;}*/	
	/* 헤더메뉴숨김 아이콘보이기 */
	.menu-inner {display: none;}
	.header_util .item.item01 {font-size: 2.85rem;}
	.header_util .item.item04::after {display: block;}
	.header_util .bt-mn {display: block;}
	/* 스크롤시 헤더배경노츌 */
	.header[class*=_on]:not(:where(.sec01_on)) {background: var(--theme-color);}
	.header[class*=_on]:not(.sec01_on) {background: var(--theme-color);}

	}	
	@media screen and (max-width: 800px){
	}
	@media screen and (max-width: 640px){
	[class*=mobile] [class*=section].loc {padding: 3rem var(--common-padding);}
    /* .header .inner .logo,
    .header .inner .logo a img {max-width: 16rem;} */
    /* 상단전번숨김 */
    /* .header_util .item.item01 {display: none;}  
    .header_util {gap: 2rem;}   
    .footer address, .footer .item {flex-direction: column; line-height: 1.3;}
    .footer address p+p, .footer .item p+p {margin-left:0;}    
    .footer .logo-img {width: 20rem; height: 6rem;}
    .tel-fix {display: block; opacity: 1;}  */
	}
	@media screen and (max-width: 480px){    
    /* [class*=header_util] [class*=item]::after {font-size: 3.4rem; line-height: 1.2;} */
	}
}