@charset "utf-8";

/*-----AOS 딜레이-----*/

/* 모바일 */
@media screen and (max-width: 768px) {
  [data-aos][style*="--tab-delay"] {transition-delay: var(--tab-delay) !important;}
}
@media screen and (max-width: 540px) {
  [data-aos][style*="--mo-delay"] {transition-delay: var(--mo-delay) !important;}
}



/*서브 헤더*/
#header {background-color: rgba(0, 0, 0, 0.2);}

/*서브 비주얼*/
#wrap #sepration {background-color: #000; clear:both; height: clamp(18.75rem, 10.75rem + 40vw, 58.75rem); position:relative; z-index: 2;}
@keyframes sub-visual {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
#wrap #sepration .sep_img_wrap {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; overflow: hidden;}
#wrap #sepration .sep_img{background:url('/images/default/content/sub_visual01.jpg') no-repeat center top;height: 100%;animation: sub-visual 5s 0s ease-in-out forwards; width:100%;position:absolute;background-size:cover; transform: scale(1.1);}
#wrap #sepration .sep_txt_wrap {display: flex; align-items: flex-start; gap: 1.25rem; overflow: hidden;}
#wrap #sepration .sep_sml {display: flex; justify-content: flex-end; align-items: flex-start; gap: 1rem; font-size: clamp(1.125rem, 0.85rem + 1.38vw, 2.5rem); color: var(--Text-Color-White); text-align: right; line-height: 1.2;}
#wrap #sepration .sep_sml .anim {transform: translateX(4rem); opacity: 0; animation: 2s subVisualFadeRight 1s forwards;}
#wrap #sepration .sep_line {display: block; flex: 1; height: 1px; margin-top: calc(clamp(1.125rem, 0.85rem + 1.38vw, 2.5rem)* 1.2 / 2); position: relative;}
#wrap #sepration .sep_line::before {content: ''; display: block; width: 0; height: 100%; background-color: #fff; animation: subVisualLineFill 2s forwards;}
#wrap #sepration .section{width:var(--content-width); margin:0 auto; padding: 0 var(--side-padding); transform: translateY(0);animation-delay: 1s;height:100%;display:flex;flex-direction:column;justify-content:center;}
#wrap #sepration .sep_tit {font-weight: var(--font-weight-bold); font-size: clamp(1.75rem, 0.85rem + 4.5vw, 6.25rem); letter-spacing: -0.04rem; color:#fff; line-height: 0.8; text-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.18); transform: translateX(4rem); opacity: 0; animation: 2s subVisualFadeLeft 1s forwards;}
#wrap #sepration p{color:#fff;text-shadow:1px 2px 2px rgba(0, 0, 0, 0.1);letter-spacing: 0; line-height:1.5;margin:1.5rem 0;}
@keyframes subVisualFadeLeft {
	0% {transform: translateX(4rem); opacity: 0;}
	100% {transform: translateX(0); opacity: 1;}
}
@keyframes subVisualFadeRight {
	0% {transform: translateX(-4rem); opacity: 0;}
	100% {transform: translateX(0); opacity: 1;}
}
@keyframes subVisualLineFill {
	0% {width: 0;}
	100% {width: 100%;}
}

/* 서브메뉴 */
.tab_view{display:none;}


.snbWrap #lnb>li>div>ul>li{height:auto;padding:0.25rem 0;font-size:0.9rem;}
/* LNB */
.lm_bg {margin-top: clamp(2rem, 1.775rem + 1.13vw, 3.125rem); z-index: 10;}
.lm_bg .snb {display: flex; width:var(--content-width); padding: 0 var(--side-padding); height:clamp(3.5rem, 3.325rem + 0.88vw, 4.375rem);margin:0 auto;}
/*.lm_bg .snb ul li:last-child{width: calc( (100% - 4.5rem + 0.4px) / 6);}*/
.lm_bg .snb .home{display:inline-flex; justify-content: center; align-items: center; width:clamp(3.5rem, 3.325rem + 0.88vw, 4.375rem); aspect-ratio: 1; border-radius: 50%; background-color: var(--Brand-Color-main);}
.lm_bg .snb .home i {width: 2rem; height: 2rem; background-color: #FFF;}
.lm_bg .snb > div{width:100%;}
.lm_bg .snb ul li{float:left;width:calc( (100% - 70px ) / 6);height:90px;line-height:90px;text-align:center;}
.lm_bg .snb ul li a{display:block;width:100%;height:100%;position:relative;font-size:0.9rem;}
.lm_bg .snb ul li a:after{content: "";display: block;position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 8px;height: 8px;border-radius: 9999px; background: #fff;opacity: 0;-webkit-transition: all 0.35s;-o-transition: all 0.35s; transition: all 0.35s;}
.lm_bg .snb ul li.on {background:#083C6B;}
.lm_bg .snb ul li.on a{color:#fff;}
.lm_bg .snb ul li.on a:after{top:20px;opacity:1;}
.lm_bg .snb ul li:hover {background:#083C6B;transition-duration: 0.5s;}
.lm_bg .snb ul li:hover a{color:#fff;}
.lm_bg .snb ul li:hover a:after{top:20px;opacity:1;}
.lm_bg .snb #home_list li i{color:#fff;font-size:1.2rem;line-height:4.5rem;}

#lnb{display: flex; justify-content: center; align-items: center; gap: 0.625rem; position:relative;}
#lnb>li{position:relative;float:left;text-align: left;  z-index:1; box-sizing:border-box;}
#lnb>li a{display:inline-block; font-size: var(--font-size-18); font-weight:600; color:#FFF; width:100%;}
#lnb>li a br{display: none;}
#lnb>li.home{display: flex; align-items: center;}
#lnb>li.home a{display:inline-flex; justify-content: center; align-items: center; width:clamp(3.5rem, 3.325rem + 0.88vw, 4.375rem); aspect-ratio: 1; border-radius: 50%; background-color: var(--Brand-Color-main); transition: background-color 0.3s;}
#lnb>li.home a i {width: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem); aspect-ratio: 1; background-color: #FFF;}
#lnb>li.home a:hover,
#lnb>li.home a:focus,
#lnb>li.home a:active {background-color: var(--Brand-Color-navy);}
#lnb>li.noDepth:after{content:''; display:block; position:absolute; width:1px; height:15px; background:#fff; top:50%;transform:translateY(-50%); right:0;}
#lnb>li.open{z-index:2;}
#lnb>li.depth0{width:auto; min-width:15rem;}
#lnb>li.depth1{width:auto; min-width:15rem;}
#lnb>li.depth2{width:auto; min-width:15rem; box-sizing:border-box; padding-right:20px; }
#lnb>li:not(.home)>a {display: block; width: 100%; line-height: clamp(3.5rem, 3.325rem + 0.88vw, 4.375rem); padding: 0 clamp(3.25rem, 3.1rem + 0.75vw, 4rem) 0 clamp(1rem, 0.9rem + 0.5vw, 1.5rem); border: 1px solid #FFF; border-radius: 10rem; overflow: hidden; backdrop-filter: blur(0.375rem); position: relative; transition: background-color 0.3s;}
#lnb>li:not(.home)>a:hover,
#lnb>li:not(.home)>a:focus,
#lnb>li:not(.home)>a:active {background-color: rgba(255, 255, 255, 0.05);}
#lnb>li > div {display: none;}
#lnb>li.depth1 > div > ul > li > a {padding: var(--num-16);}
#lnb>li>a .loc_home,
#lnb>li>a .unfd{content:''; display:block; width: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem); aspect-ratio: 1; line-height: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem); background: url('/images/default/content/ico_angle_up.svg') no-repeat center/cover; position: absolute; top: 50%; right: clamp(1rem, 0.9rem + 0.5vw, 1.5rem); transform: translateY(-50%) rotate(180deg); text-indent: -999em; overflow: hidden;}
#lnb>li>a .unfd.on{transform: translateY(-50%) rotate(0);}

#lnb>li>div{z-index:90; position:absolute; top:calc(100% + 1rem); left:0; width:100%; background:#fff; box-sizing:border-box; border-radius: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);}
#lnb>li.open>div{border:1px solid #ddd; }
#lnb>li>div>ul>li{height:auto;}
#lnb>li>div>ul>li:first-child{margin-top:0} 
#lnb>li>div>ul>li>a{position:relative; padding: 0.625rem clamp(1rem, 0.9rem + 0.5vw, 1.5rem); font-size: var(--font-size-16); color:#999;}
#lnb>li>div>ul>li>a.on, #lnb>li>div>ul>li>a:hover{color: var(--Brand-Color-navy);}

.tab_ul{display:none;}

/* 서브 비주얼 탭 메뉴 스타일 수정 */
@media (width >= 1130px){
	#wrap #sepration {overflow: hidden;}
	.lm_bg {width: calc(100% - (var(--side-padding) * 2)); position: absolute; bottom: 6.25rem; left: 50%; transform: translateX(-50%);}
	#lnb>li.home,
	#lnb>li.depth0 {display: none;}
	:has(.business) #lnb>li.depth1 {width: 100%; max-width: 1500px;} /* 사업소개에서 너비 100% 가져가게 */
	#lnb>li.depth1 > a {display: none;}
	#lnb>li.depth1 > div {display: block !important; position: static; padding: 0.5rem 1.5rem; border-radius: 10rem; background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(0.625rem);}
	#lnb>li.depth1 > div > ul {display: flex; justify-content: center; align-items: center;}
	#lnb>li.depth1 > div > ul > li {flex: 1; min-width: clamp(10rem, 9.6rem + 2vw, 12rem);}
	#lnb>li.depth1 > div > ul > li > a {display: flex; justify-content: center; align-items: center; width: 100%; font-size: var(--font-size-20); font-weight: var(--font-weight-semibold); color: var(--Text-Color-White); text-align: center; line-height: 1.2; border-radius: 10rem; transition: color 0.5s;}
	#lnb>li.depth1 > div > ul > li > a.on {background-color: var(--Brand-Color-main);}
	#lnb>li.depth1 > div > ul > li > a:not(.on):hover {color: rgba(255, 255, 255, 0.5);}
}

/*서브 타이틀*/
#container .page_main_title{width:var(--content-width);margin:0 auto;text-align:center; font-size:1.3rem;   margin-bottom: 2rem;color:#000;margin-top:1rem;}




/* 탭메뉴 */
.tab_menu{width: var(--content-width); padding: 0 var(--side-padding); margin:0 auto; margin-top: calc(-1 * clamp(0rem, -0.32rem + 1.6vw, 1.6rem)); margin-bottom:clamp(5rem, 4.04rem + 4.8vw, 9.8rem); position:relative; z-index:0;}
.tab_menu ul{display: flex; text-align:center; overflow:hidden;}
.tab_menu ul li{flex:1; width:100%;}
.tab_menu ul li a{display:inline-block; padding:1rem 0 1.25rem; width:100%; border-bottom: 2px solid transparent; box-sizing:border-box; text-align:center; color:var(--Text-Color-Basic-4); font-weight: 700;  position:relative;}
.tab_menu ul li a strong {font-weight: 700;}
.tab_menu ul li a::before {content:''; display:block; width:0; height:2px; background:var(--Brand-Color-main); position:absolute; bottom:0; left:0; transition: width 0.3s;     z-index: 1;}
.tab_menu ul li a::after {content:''; display:block; width:100%; height:2px; background:var(--Border-Color); position:absolute; bottom:0; left:0;}
.tab_menu ul li.on a{color:#0043c7;}
.tab_menu ul li.on a::before {width:100%;}

/*컨텐츠*/
#container .content_body{padding: clamp(3.125rem, 2.5rem + 3.13vw, 6.25rem) 0 clamp(5rem, 4.125rem + 4.38vw, 9.375rem);}
#container .content_body:has(.has_full_bg) {padding: 0;}
#container .content_body .has_full_bg {padding: clamp(3.125rem, 2.5rem + 3.13vw, 6.25rem) 0 clamp(5rem, 4.125rem + 4.38vw, 9.375rem);}
.content_message {padding: 5rem var(--side-padding); font-size: var(--font-size-24); text-align: center;}



/********************************************************
■ 레이아웃 변경
********************************************************/
@media (max-width:1660px){
	.section_lnb>.inr{width:100%;z-index:9;}
}


@media (max-width:1300px){
	/* 탭메뉴 */
	.tab_menu{width:100%;}
	.tab_menu ul li a{font-size:1rem;}
	

	/*비주얼*/
	#visual .bxslider li .ptext,
	#visual .bx-wrapper .bx-pager{width: 100%; padding: 0 1rem;}
	#visual .bx-wrapper .bx-pager{width: 100%; left:0; margin-left:0;}


	/*왼쪽메뉴*/
	.lm_bg .left_menu ul{width:100%;}
	.lm_bg .snb{width:100%;}

	/*페이지 타이틀*/
	#container .page_main_title{width: 100%; padding: 0 1rem;}

}




/********************************************************
■ 태블릿
********************************************************/
@media (max-width:1130px){
	/* 서브비주얼 */
	#wrap #sepration {padding-top: var(--header-height); height: 22rem;}
	#wrap #sepration:not(:has(#lnb .depth0)) {height: calc(22rem - clamp(3.5rem, 3.325rem + 0.88vw, 4.375rem));}
	#wrap #sepration .section {margin-bottom: 0; padding-bottom: clamp(3.5rem, 3.325rem + 0.88vw, 4.375rem);}
	#wrap #sepration:not(:has(#lnb .depth0)) .section {padding-bottom: 0;}
	#wrap #sepration .sep_img {opacity: 0.7;}
	#wrap #sepration .sep_sml {opacity: 0.8; text-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.5)}

	/* 서브메뉴 */	
	.snbWrap{display:none;}
	.tab_view{display:block; cursor:pointer;background:#083C6B; background-size:12px auto; font-size:1.05rem; box-sizing:border-box; color:#fff; box-sizing:border-box; padding-left:1rem; font-weight:normal; position:relative; text-align: left;height:3rem;line-height:3rem;}
	.tab_view i{position:absolute; top:50%; right:1rem; margin-top:-9px; display:block; }
	.tab_view.on{cursor:pointer; }
	.tab_view.on i{transform:rotateX(180deg);}
	.left_menu {position:relative;box-sizing:border-box; height:0; width:100%;}
	.left_menu ul{display:none; z-index:100;position:absolute;width:100%;left:0;  margin:0 auto; line-height:0; background:#fff; box-shadow:3px 2px 15px 1px rgb(0 0 0 / 15%);}
	
	.lm_bg{width: 100%; margin-top: 0; background-color: #FFF; position: absolute; bottom: -1px; left: 0;}
	.lm_bg .snb{width:100%;transform: translateY(0);height:0;z-index:1;}
	.lm_bg .snb .home{display:none;}
	.lm_bg .left_menu ul:after{display:none;}
	.lm_bg .left_menu ul li {width:100% !important; border-top:1px solid #EAECF1; height:3rem; line-height:3rem; margin-left:0; vertical-align:middle; box-sizing:border-box; text-align:left;padding:1rem; }
	.lm_bg .left_menu ul li a {display:block; line-height: 1.0; height: auto;  font-weight:500; font-size:1rem; color:#888;text-transform:capitalize;}
	.lm_bg .left_menu ul li a:before{display:none;}
	.lm_bg .left_menu ul li strong{ font-weight:500;} 
	.lm_bg .left_menu ul li.on a:before{display:none;}
	.lm_bg .left_menu ul li.on a{background:none; color:#083C6B;}
	.lm_bg .left_menu ul li.on a:after{display:none;}
	.lm_bg .snb ul li.on{background:#fff;}
	.lm_bg .snb ul li:hover{background:#EAECF1;}
	.lm_bg .snb ul li:hover a{color:#083C6B;}
	.lm_bg .snb ul li a:after{display:none;}

	#lnb {gap: 0; border-bottom: 1px solid #DDD;}
	#lnb>li {}
	#lnb>li a {font-size: var(--font-size-16); color: var(--Text-Color-Black);}
	#lnb>li:not(:first-of-type) {flex: 1; border-left: 1px solid #DDD;}
	#lnb>li:last-of-type {border-right: 1px solid #DDD;}
	#lnb>li.home a {width: clamp(3.625rem, 3.45rem + 0.88vw, 4.5rem); border-radius: 0;}
	#lnb>li:not(.home)>a {border-radius: 0; backdrop-filter: none;}
	#lnb>li:not(.home)>a:hover,
	#lnb>li:not(.home)>a:focus,
	#lnb>li:not(.home)>a:active {background: #FFF;}
	#lnb>li>a .unfd {background-image: url('/images/default/content/ico_angle_up_b.svg');}
	#lnb>li>div {width: calc(100% + 2px); top: calc(100% + 1px); left: -1px; border-radius: 0;}
	#lnb>li:last-of-type>div {width: calc(100% + 1px);}
	#lnb>li.open>div{border-top: none;}

	.left_menu_mob{display:none;}

	/* 탭메뉴 */	
	.tab_menu ul{display:flex; align-items: center; flex-flow: row wrap; justify-content: space-evenly; }


	/*컨텐츠*/
	#container #section .right_content .content_body{padding-top:3rem;}
}


/********************************************************
■ 모바일
********************************************************/
@media (max-width:767px){
	/* 서브 비주얼 */
	#wrap #sepration .sep_txt_wrap {flex-direction: column; align-items: flex-start;}
	#wrap #sepration .sep_tit {line-height: 1;}
	#wrap #sepration .sep_line {flex: none; width: 100%;}
	#wrap #sepration .sep_sml {width: 100%; font-size: var(--font-size-20);}

	/* 왼쪽메뉴 */
	#lnb>li:not(.home) {flex: 1;}
	#lnb>li:not(.home)>a {width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
	#lnb>li.depth0,
	#lnb>li.depth1,
	#lnb>li.depth2{flex: 1; min-width: 0; padding-right: 0;}
	#lnb>li:last-of-type {border-right: none;}

	/*탭메뉴*/
	.tab_menu ul {gap: 1rem;}
	.tab_menu ul li a{display:block; padding:0.6rem 1rem; text-transform:capitalize; display: -webkit-box; display: -ms-flexbox;	display: -webkit-flex; display: flex;	-webkit-box-pack: center;	-ms-flex-pack: center;	-webkit-justify-content: center;	justify-content: center;	-webkit-box-align: center;	-ms-flex-align: center;	-webkit-align-items: center; align-items: center; border-bottom:none; background:#DDDDDD;}
	.tab_menu ul li a::before,
	.tab_menu ul li a::after {display:none;}
	.tab_menu ul li.on a {background:#0043c7; color: #fff;}

	/*컨텐츠*/
	#container #section .right_content .page_main_title h3{margin-bottom:2rem;font-size:1.4rem;}
}