@charset "utf-8";

/*-----기본-----*/
.mob{display:none;}
.tablet{display:none;}
.web{display: block;}
#wrap{position:relative; line-height:1.5;/*overflow:hidden;*/}
#wrap img { border:none; }
#wrap i{vertical-align:middle;}
.inner {width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 0 var(--side-padding);}
.ff_tway {font-family: var(--ff-heading);}
.upper {text-transform: uppercase;}

/* -----아이콘----- */
[class*='ico_'] {display: block; 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_link_arr {mask-image: url('/images/default/main/ico_link_arr.svg'); -webkit-mask-image: url('/images/default/main/ico_link_arr.svg');}
.ico_arrow_r {mask-image: url('/images/default/content/ico_arrow_r.svg'); -webkit-mask-image: url('/images/default/content/ico_arrow_r.svg');}
.ico_angle_left_light {mask-image: url('/images/default/main/ico_angle_left_light.svg'); -webkit-mask-image: url('/images/default/main/ico_angle_left_light.svg');}
.ico_angle_right_light {mask-image: url('/images/default/main/ico_angle_right_light.svg'); -webkit-mask-image: url('/images/default/main/ico_angle_right_light.svg');}
.ico_angle_up_light {mask-image: url('/images/default/main/ico_angle_up_light.svg'); -webkit-mask-image: url('/images/default/main/ico_angle_up_light.svg');}
.ico_angle_down_light {mask-image: url('/images/default/main/ico_angle_down_light.svg'); -webkit-mask-image: url('/images/default/main/ico_angle_down_light.svg');}
.ico_sitemap {mask-image: url('/images/default/main/ico_sitemap.svg'); -webkit-mask-image: url('/images/default/main/ico_sitemap.svg');}
.ico_home {mask-image: url('/images/default/content/ico_home.svg'); -webkit-mask-image: url('/images/default/content/ico_home.svg');}
.ico_angle_up {mask-image: url('/images/default/main/ico_angle_up.svg'); -webkit-mask-image: url('/images/default/main/ico_angle_up.svg');}
.ico_check {mask-image: url('/images/default/content/ico_check.svg'); -webkit-mask-image: url('/images/default/content/ico_check.svg');}
.ico_pin {mask-image: url('/images/default/content/ico_pin.svg'); -webkit-mask-image: url('/images/default/content/ico_pin.svg');}
.ico_tel {mask-image: url('/images/default/content/ico_tel.svg'); -webkit-mask-image: url('/images/default/content/ico_tel.svg');}
.ico_fax {mask-image: url('/images/default/content/ico_fax.svg'); -webkit-mask-image: url('/images/default/content/ico_fax.svg');}
.ico_mail {mask-image: url('/images/default/content/ico_mail.svg'); -webkit-mask-image: url('/images/default/content/ico_mail.svg');}
.ico_naver {mask-image: url('/images/default/content/ico_naver.svg'); -webkit-mask-image: url('/images/default/content/ico_naver.svg');}
.ico_kakao_pin {mask-image: url('/images/default/content/ico_kakao_pin.svg'); -webkit-mask-image: url('/images/default/content/ico_kakao_pin.svg');}
.ico_mail {mask-image: url('/images/default/content/ico_mail.svg'); -webkit-mask-image: url('/images/default/content/ico_mail.svg');}


/*세팅*/
:root{
	--main: #40060b;
}
@media (max-width:1030px){
	.web{display:none;} /*태블릿*/
	.tablet{display:block;} /*태블릿 부터 바뀜*/
}

@media (max-width:767px){
	html,body,#wrap{height:auto;}
    body{position:relative;}	
	.tablet {display:none;}
	.mob{display:block;}
}


/* 헤더 */
#header{color: #fff; position: absolute; top:0; left: 0; width:100%;  z-index:100;-webkit-transition:all .3s;transition:all .3s; backdrop-filter: blur(0.375rem);}
#header.headerOver {background-color: rgba(0, 0, 0, 0.9);}
#header h1{position: relative; z-index: 1000;}
#header h1 a{display: block; width: clamp(5rem, 4.375rem + 3.125vw, 8.125rem); height: auto; aspect-ratio: 130/64; background: url('/images/default/main/logo.svg') no-repeat center/100% auto;}
#header .header_inner{display: flex;justify-content: space-between; align-items: center; gap: 0 clamp(6.25rem, 5.125rem + 5.63vw, 11.875rem); position:relative; width: 100%; max-width: calc((var(--side-padding) * 2) + 109.375rem); /* (양 옆 패딩 20px) + 1750px */ margin:0 auto; padding: 0 var(--side-padding);}
#header a {color: inherit;}
#header .bg_box .inner {max-width:calc((var(--side-padding) * 2) + 109.375rem)}
#header.headerOver .bg_box {border-top: 1px solid rgba(221, 221, 221, 0.2);}
#header .goToConsult {display:none; flex-direction: column; align-items: flex-start; margin-top:clamp(2rem, 1.663rem + 1.688vw, 3.688rem); border-radius:var(--radius20); border-bottom-right-radius:0; box-shadow: 0 0 0 3px transparent; overflow:hidden; position:relative; transition: box-shadow 0.3s;}
#header .goToConsult > img {width:clamp(11.25rem, 10rem + 6.25vw, 17.5rem); aspect-ratio:280/187;}
#header .goToConsult:hover {box-shadow: 0 0 0 3px var(--Brand-Color-main);}
#header.headerOver .goToConsult {display: inline-flex;}
#header .goToConsult > span {display: inline-flex; justify-content: space-between; align-items: center; padding: 0 clamp(1rem, 0.95rem + 0.25vw, 1.25rem); width:100%; height: clamp(2rem, 1.775rem + 1.125vw, 3.125rem); font-size:var(--font-size-20); color: var(--Text-Color-White); background: linear-gradient(90deg, rgba(0, 166, 219, 0.80) 0%, rgba(0, 66, 153, 0.80) 100%); position:absolute; bottom:0; left:0;}
#header .goToConsult .ico_arrow_r {width:clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem); height: auto; aspect-ratio: 1; background:#fff; mask-position: right center;}


/*-----네비게이션-----*/
#header .header_inner #nav {display: flex; flex-direction: row; justify-content: center; align-items: center;}
#header .header_inner #nav{}
#header .header_inner #nav ul {clear:both;  position:relative; box-sizing:border-box;height:100%;}
#header .header_inner #nav ul li { display:inline-block;width: auto; float:none; vertical-align:top;position:relative;}
#header .header_inner #nav ul li {position:relative; }
#header .header_inner #nav ul li a{text-align:center; display:inline-block; height:var(--header-height); line-height:var(--header-height); text-transform: uppercase; position:relative;padding:0 1.85rem; font-size: var(--font-size-19); font-weight: var(--font-weight-semibold); transition: all .2s; -webkit-transition: all .2s; }
#header.headerOver .header_inner #nav ul li a {padding:0 calc(clamp(5rem, 3.75rem + 6.25vw, 11.25rem) / 2)}

#header .header_inner #nav ul li ul {padding-top: clamp(2rem, 1.663rem + 1.688vw, 3.688rem); z-index: 10;display:none; position: absolute; width: auto; min-width:10rem;  left:50%; top: var(--header-height); transform: translateX(-50%);box-sizing:border-box; text-align:center; height:auto; animation-name: slide_down; animation-duration:0.5s; animation-duration: linear; animation-direction: alternate; animation-fill-mode: forwards;}
/*#header .header_inner #nav ul li ul:before {display: block; content: '';  position: absolute; z-index:0; top:-20px;  left: 50%;  transform:translateX(-50%);  width: 10px;  height: 10px; background: #083C6B; border-radius: 100%; z-index: -1;}*/
#header .header_inner #nav ul li ul li {display:block;margin:0; line-height:1.5;}
#header .header_inner #nav ul li ul li:not(:first-child) {margin-top:clamp(1rem, 0.894rem + 0.531vw, 1.531rem);}
#header .header_inner #nav ul li ul li a{display:block; color: var(--Text-Color-White); font-size: var(--font-size-19); padding:0 1rem; height:auto; font-weight: 400; line-height:1.5; transition: all .2s; -webkit-transition: all .2s; white-space: nowrap;}
#header .header_inner #nav ul li ul li a:before{content:""; display:block; clear:both;}
#header .header_inner #nav ul li ul li a:hover{text-decoration: underline; text-underline-position: under;}
#header .header_inner #nav ul li.active > div > a{}
#header .header_inner #nav ul li.active ul li:after{display:none;}

/*-----햄버거 버튼-----*/
#header .btn_gnb {appearance: none; border: none; background: none; position: relative; z-index: 10000;}
#header .ham {display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: clamp(0.375rem, 0.325rem + 0.25vw, 0.625rem); width: clamp(1.875rem, 1.625rem + 1.25vw, 3.125rem); aspect-ratio: 1; position: relative;}
#header .ham .bar {display: block; height: 0.25rem; background-color: #FFF; transition: width 0.3s, transform 0.3s;}
#header .ham .bar1 {width: 100%;}
#header .ham .bar2 {width: 66.666%;}
#header.open .ham .bar {position: absolute; top: 50%; left: 50%;}
#header.open .ham .bar1 {transform: translate(-50%, -50%) rotate(-45deg);}
#header.open .ham .bar2 {width: 100%; transform: translate(-50%, -50%) rotate(45deg);}

/*-----전체메뉴-----*/
#header .all_menu_wrap {width: 100%; height: 100vh; padding: var(--header-height) 0 5rem; background-color: rgba(0, 0, 0, 0.9); position: fixed; top: 0; left: 0; transform: translateY(-100%); opacity: 0; z-index: 100; transition: opacity 0.5s, transform 0.7s;}
#header .all_menu {display: flex; justify-content: center; align-items: center; height: 100%; overflow-y: auto; transform: translateY(-100%); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: 0.2s;}
#header .all_menu > ul {display: flex; gap: 0 clamp(1.25rem, 0.9rem + 1.75vw, 3rem); width: 100%; max-width: calc((var(--side-padding) * 2) + 109.375rem); /* (양 옆 패딩 20px) + 1750px */ margin:0 auto; padding: 0 var(--side-padding); text-align: center;}
#header .all_menu > ul > li {flex: 1;}
#header .all_menu > ul > li > div:first-of-type a {font-size: clamp(2rem, 1.775rem + 1.13vw, 3.125rem); font-weight: var(--font-weight-bold);}
#header .all_menu > ul > li > ul > li {margin-top: 1rem; font-size: clamp(1.063rem, 0.975rem + 0.44vw, 1.5rem);}
#header .all_menu > ul > li > ul > li > a {opacity: 0.7; transition: opacity 0.3s;}
#header .all_menu > ul > li > ul > li > a:has(strong) {opacity: 1;}
#header .all_menu > ul > li > ul > li > a strong {display: inline-flex; justify-content: center; align-items: center; gap: 1rem;position: relative;}
#header .all_menu > ul > li > ul > li > a strong::before {content: ''; display: block; width: var(--num-10); height: var(--num-10); border-radius: 50%; background-color: var(--Brand-Color-main);}
#header .all_menu > ul > li > ul > li > a:hover {opacity: 1;}
#header.open .all_menu_wrap {transform: translateY(0); opacity: 1;}
#header.open .all_menu_wrap .all_menu {transform: translateY(0); opacity: 1;}
#header .mob_all_menu {display: none;}


/*-----회원서비스-----*/
.log_menu{position:absolute;right:8rem;top:50%;transform:translateY(-50%); color:#fff; font-size:0.75rem;}
.log_menu li{display:inline-block; margin-right:10px;}
.log_menu li a{color:#fff;}

/*-----언어별-----*/
.select_btn{position:absolute;right:4.5rem;top:50%;transform:translateY(-50%); color:#fff;}
.option_list { display:none; position: absolute;  top: 4.3rem;  right:4.3rem; z-index:1000; background: #fff;  border: solid 1px #d9d9d9;  padding: 15px 25px;}
.option_list li { margin-top: 5px;}
.option_list li a { display: block;  font-size: 15px;  color: #353535;}
.option_list li a:hover { text-decoration: underline !important;}
.option_list li:first-child { margin-top: 0;}


/*-----사이트맵 버튼-----*/
#header .btn-gnb-menu{position:absolute; right:0; top:0; width:5rem; height:4.3rem; cursor:pointer; z-index:9999;text-align:center; -webkit-transition: all 0.25s; transition: all 0.25s;}
#header .btnAll {position:relative; display:block; width:1.6rem; height:1.15rem; margin:0 auto; top:50%;  transform:translateY(-50%);outline: none; z-index:9999;}
#header .btnAll span { display: inline-block; width: 100%; height: 2px; position: absolute; background-color: #fff; -webkit-transition: all 0.25s; transition: all 0.25s; }
#header .btnAll > span:nth-child(1) { top: 0; right:0;}
#header .btnAll > span:nth-child(2) { top: 0.5rem; right:0; width:80%;}
#header .btnAll > span:nth-child(3) { top: 1rem; right:0;}
#header.open .btnAll > span{}
#header.open .btnAll > span:nth-child(1) { top: 0.5rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 1.5rem;}
#header.open .btnAll > span:nth-child(2) { top: 0; opacity: 0; width: 1.5rem;}
#header.open .btnAll > span:nth-child(3) { top: 0.5rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 1.5rem;}
@keyframes slide_down {
  from {
    transform: translateX(-50%) translateY(-30px);
	opacity:0;
  }
  to {
    transform: translateX(-50%) translateY(0px);
	opacity:1;
  }
}

/* 헤더 오버스크롤 */
#header.over,
#header.scroll{background:#fff; box-shadow: 1.2px 3.8px 22.8px 1.2px rgb(0 0 0 / 4%);}
#header.over .header_inner #nav ul li a,
#header.scroll .header_inner #nav ul li a,
#header.over a,
#header.scroll a{color:#444;}
#header.over .btn-gnb-menu ,
#header.scroll .btn-gnb-menu{background-color: #083C6B;}
#header.over .select_btn{color:#444;}

/*사이트맵*/
#header #navi{background:#fff; position:fixed; top:-100%; left:0; width:100%; height:100%; padding-top:0; overflow:hidden;  z-index:20; transition:top 0.45s;}
#header.open #navi{transition:top 0.45s; top:0px;}
#header #navi:after{content : ""; display : block; position : absolute; left:65%; top:0;  width :750px; height : 100%; background:url('/images/default/main/sitemap1.jpg') no-repeat center top; background-size:cover;}

#menuAll .top_menu{display:none;}
#menuAll h3{font-size:1.5rem; }
#menuAll .mobile_top{width:100%; height:100%; position:relative; background: #fff url('/images/default/main/sitemap2.jpg') no-repeat 0 0; display: flex; flex-direction: column;}
#menuAll .mobile_top .mbtop{width: 65%; height:100%; display: flex; flex-wrap: wrap; padding-left:0%;}
#menuAll .mobile_top .mbtop > li{width: calc(100%/4); position:relative;}
#menuAll .mobile_top .mbtop > li:before{content : ""; display : block; position : absolute; left : 0; top:-180px;  width :1px; height : 1100px; background : #ddd;}
#menuAll .mobile_top .mbtop > li > a{position:relative; color:#d35466; font-size:25px; line-height:1; font-weight: 600; padding-left:1rem; }
#menuAll .mobile_top .mbtop > li > a:before{content : ""; display : block; position : absolute; left : 0; top:20%;  width :5px; height : 60%; background : #d35466;}
#menuAll .mobile_top .mbtop > li{ margin:17% 0 0;}

#menuAll .mobile_top ul li > a{display:block; padding:0.5rem 0; font-size:1.1rem; width:100%; position:relative; transition: all .5s; -webkit-transition: all .5s;}
#menuAll .mobile_top ul li ul{margin-top:1rem; margin-left: 1rem;}
#menuAll .mobile_top ul li ul li{float:none; width:100%; position:relative; margin-top:0.5rem;}
#menuAll .mobile_top ul li ul li:first-child{margin-top:0;}
#menuAll .mobile_top ul li ul li a{ display:block; background:none;font-size:1rem; text-align: left; padding:0; color:#666;}
#menuAll .mobile_top ul li ul li ul{margin:.5rem 0 1rem;}
#menuAll .mobile_top ul li ul li ul li{}
#menuAll .mobile_top ul li ul li ul li:before{content : ""; display : block; position : absolute; left :0px;  top:10px; background:#666; width: .2rem; height:.2rem; border-radius:50%; }
#menuAll .mobile_top ul li ul li ul li a{color:#777; font-weight:300; padding-left: .5rem; font-weight: 400;}
#menuAll .mobile_top ul li ul li a strong{position: relative; color: #d35466; font-weight: 600;}

/*푸터*/
#footer {padding: clamp(3rem, 2.8rem + 1vw, 4rem) 0; font-size: clamp(0.875rem, 0.838rem + 0.19vw, 1.063rem); color: var(--Text-Color-White); width: 100%; background: #091D2E; z-index: 1;}
.footer_inner {padding: 0 var(--side-padding); margin: 0 auto; max-width:calc(103.75rem + (var(--side-padding) * 2));  position: relative;}
.footer_inner .ft_logo {width:clamp(5rem, 4.513rem + 2.438vw, 7.438rem);}
.footer_body {display:flex; align-items: flex-end; justify-content: space-between; margin-top: clamp(2rem, 1.725rem + 1.375vw, 3.375rem);}

.ft_l .info_list {display:flex; flex-wrap:wrap; gap:clamp(0.25rem, 0.16rem + 0.45vw, 0.7rem) 0; max-width: 31.5rem; font-size:var(--font-size-16);}
.ft_l .info_list > li {display:flex; gap:0.5rem;}
.ft_l .info_list > li:not(.address, :nth-child(2)) {padding-left:clamp(0.5rem, 0.4rem + 0.5vw, 1rem); margin-left:clamp(0.5rem, 0.4rem + 0.5vw, 1rem); position:relative;}
.ft_l .info_list > li:not(.address, :nth-child(2)):after {content:''; display:block; width:1px; height:1em; background:#fff; position:absolute; top: 0.26em; left:0; opacity: 0.5;}
.ft_l .info_list > li.address {flex-basis:100%; margin-bottom:clamp(0.75rem, 0.713rem + 0.188vw, 0.938rem);}
.ft_l .info_list > li.w100 {flex-basis:100%  !important; padding-left:0  !important; margin-left:0  !important;}
.ft_l .info_list > li.w100 + li {padding-left:0  !important; margin-left:0  !important;}
.ft_l .info_list > li.w100:after {display:none !important;}
.ft_l .info_list > li.w100 + li:after {display:none !important;}
.ft_r {display: flex; flex-direction: column; align-items: flex-end; gap:clamp(1rem, 0.7rem + 1.5vw, 2.5rem); margin-bottom:clamp(0rem, -0.05rem + 0.25vw, 0.25rem);}
.ft_r .go_sitemap {display: inline-flex; flex-direction:row-reverse; align-items: center; gap: var(--gap-10); padding: clamp(0.375rem, 0.313rem + 0.313vw, 0.688rem) clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem); font-size: var(--font-size-16); font-family: var(--ff-heading); font-weight:200; background-color: #0099CA; border-radius: 10rem; border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.3s;}
.ft_r .go_sitemap .ico_sitemap {width: var(--font-size-16); height: var(--font-size-16); background-color: var(--Text-Color-White);}
.ft_r .ft_nav ul {display:flex; gap: clamp(1rem, 0.7rem + 1.5vw, 2.5rem);}
.ft_r .ft_nav a {font-size:var(--font-size-24);}
.ft_btm {padding-top:clamp(1rem, 0.95rem + 0.25vw, 1.25rem); margin-top: clamp(2rem, 1.75rem + 1.25vw, 3.25rem); border-top:1px solid rgba(255, 255, 255, 0.16);}
.ft_btm .copy {font-size:var(--font-size-15); font-weight:200; letter-spacing: 0;}

/*탑버튼*/
.btn_to_top {display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 0.25rem; width: clamp(3rem, 2.8rem + 1vw, 4rem); height: auto; aspect-ratio: 1; font: inherit; font-size: var(--font-size-16); color: inherit; background-color: #2F45BA; box-shadow: inset 0 0 0 1px #fff; transition: background-color 0.3s; position:absolute; top:calc(-1 * (clamp(3rem, 2.8rem + 1vw, 4rem) + (clamp(3rem, 2.8rem + 1vw, 4rem) / 2))); right:var(--side-padding); z-index: 1;}
.btn_to_top img {transform:translateY(-1px);}

/*팝업 롤링 추가*/
.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:1720px){
	#footer .info_list li.w_flex {padding-right: 0; width: 100%;}
}
@media (max-width:1300px){
	/*헤더*/
	#header .header_inner{width: 100%; justify-content: space-between;}
	#header .header_inner #nav ul{}
	#header.headerOver .header_inner #nav ul li a {padding:0 calc(clamp(5rem, 3.75rem + 6.25vw, 11.25rem) / 2.5)}
	
	#footer .info_list {padding-right: 0;}
	#footer .info_list li.w_flex {padding-right: 0;}
}



/********************************************************
태블릿
********************************************************/
@media (max-width:1030px){
	.web{display: none;}
	.tablet{display:block;}

	/*헤더*/
	#header h1 img,
	#footer h3 img{width: 6rem; vertical-align:middle; }
	#header .header_inner {height: var(--header-height);}
	#header .header_inner #nav {display: none;}

	/*언어*/
	.option_list{top:4rem;right:4rem;}

	/*-----사이트맵 버튼-----*/
	#header .ham {}
	#header .ham .bar {height: 0.188rem;}

	/*-----회원서비스-----*/
	#wrap .log_menu{display:none;}
	#menuAll h3{text-align:center; padding:15px 0 10px; font-weight:normal; font-size:1.2rem; color:#fff;}
	#menuAll .log{display:block; width: 100%; position:absolute; left:0; top:0; padding-left:1.5rem; box-sizing:border-box; z-index:10;}
	#menuAll .log li{display:inline-block; height:4rem; line-height:4rem; color: #fff; position:relative;}
	#menuAll .log li a{padding: 0 1rem;}
	#menuAll .log li:after{right: .75rem; background: #000; width: 2px;}
	#menuAll .log li b{font-size:1.1rem;}
	#menuAll .log li.log_join a{padding-left:0;}
	#menuAll .log li.log_join:after{content : ""; display : block; position : absolute; right:0; top: 35%; width :1px; height : 30%; background:rgba(255, 255, 255, .3);}

	/*-----마이페이지-----*/
	#menuAll .membership{display: block; background: #DC4976; margin-top:4rem;}
	#menuAll .membership {clear:both;overflow:hidden;  }
	#menuAll .membership li {position: relative; float:left;width: 50%; border-bottom:1px solid rgba(255, 255, 255, .3); text-align:center; line-height:1;padding:1.3rem 0;}
	#menuAll .membership li:after{content : ""; display : block; position : absolute; right:0; top: 0; width :1px; height : 100%; background:rgba(255, 255, 255, .3);}
	#menuAll .membership li:nth-of-type(2n):after{display: none;}
	#menuAll .membership li a{color:#fff;}
	#menuAll .membership li i{vertical-align:middle; margin-right:5px; font-size:1.1rem;}

	/*전체메뉴*/
	#header #navi{ background : #fff; overflow-y:scroll;}
	#header #navi:after{content:'';display : block; position : absolute; left :0; top:0; width :100%; height : 4rem;background:#fff;}  


	#menuAll .mobile_top{width:100%;height:auto; background:transparent; margin-top:4rem;border-top:1px solid #ddd;}
	#menuAll .mobile_top:before,
	#menuAll .mobile_top:after{display: none;}
	


    /*1차*/
	#menuAll .mobile_top .mbtop{border: 0; width: 100%; padding:0; }
	#menuAll .mobile_top .mbtop > li{width: 100%; margin:0 !important;}
	#menuAll .mobile_top .mbtop > li:before{display:none;}
	#menuAll .mobile_top .mbtop > li > a{border:0; border-radius: 0; font-size:1.1rem; padding: 20px 1.5rem 14px; color:#333; }
	#menuAll .mobile_top .mbtop > li > a:before{display:none;}
    #navi ul.mbtop {width:100%; margin:0; padding:0;}
    #navi ul.mbtop li{margin:0; float:none; width:100%; border-bottom:1px solid rgba(0, 0, 0, .1); position:relative;}
	#navi ul.mbtop li:after{ content :"\e913"; display : block; position : absolute; right:1.5rem;  top:1rem; font-size:1.15rem; font-family:'xeicon'; font-weight:500; color:#333; }
	#navi ul.mbtop li.nosub:after{display:none;}


	#navi ul.mbtop > li > a {padding:0; background: none; text-align:left; display:block; width:100%; padding: 1rem;box-sizing:border-box; font-size:1.15rem;  font-weight: 700;  color:#262626;}
    #navi ul.mbtop li.open_li{position:relative;}
	#navi ul.mbtop > li.open_li > a{}
    #navi ul.mbtop li.open_li:after{ content :"\e91a";}

    /*2차*/
    #navi ul.mbtop li ul {display:none; float:none; background-color:#efefef; position:relative; left:0; top:0; width:auto; height:auto; visibility:visible; padding: 2rem 1.5rem; margin-top:0; margin-left: 0;}
    #navi ul.mbtop li ul.on{display:block;}
	#navi ul.mbtop li ul li {float:none;border:none; box-sizing:border-box;  background: none; padding-left:0;}
    #navi ul.mbtop li ul li a {background:url(none);  height:auto; padding-left:0;  font-size:1rem; color:#333;}	
    #navi ul.mbtop li ul li:after,
	#navi ul.mbtop li ul li:before{display:none;}
    /*3차*/
    #navi ul.mbtop li ul li ul{display:none;border:none; height:0;background:none; margin:0; padding:0;}
    #navi ul.mbtop li ul li ul li {display:none;}
	

	/*팝업 롤링 추가*/
	.layerPopup {left:50% !important;  transform:translateX(-50%);}

	/*푸터*/
	#footer .footer_inner {flex-direction: column;}
	.footer_body {flex-direction: column; gap: clamp(2rem, 1.75rem + 1.25vw, 3.25rem); align-items: flex-start;}
	.ft_l .ft_info {padding-bottom: 6rem;}
	.ft_l .info_list li.w_flex {padding-right: 0;}
	.ft_l .ft_info .info_top {position: absolute; bottom: 0; left: 0; margin-bottom: 0;}
	.ft_r {flex-direction: row-reverse; align-items: center; justify-content: space-between; margin-bottom:0; width: 100%;}
	.ft_r .ft_nav ul {flex-direction: row; flex-wrap: wrap; gap: 0.5rem 2rem;}
	
	.btn_to_top {line-height: 1;}
}
@media (width > 768px){
	#footer .ft_nav ul li:hover {opacity: 0.8;}
	#footer .go_sitemap:hover {background-color: #087196;}
	#footer .btn_to_top:hover {background-color: #2a377e;}
}
@media (max-width:390px){
	.ft_l .info_list > li {width:100%;}
	.ft_l .info_list > li:not(.address, :nth-child(2)) {padding-left:0; margin-left:0;}
	.ft_l .info_list > li:not(.address, :nth-child(2))::after {display:none;}
}

/********************************************************
■ 모바일
********************************************************/
@media (max-width:767px){
	html,body,#wrap{height:auto;}
    body{position:relative;}
	.tablet{display: none;}
	.mob{display:block;}


	/*탑메뉴*/
	#header h1{}
	#header h1 img,
	#footer .f_add_bx img{max-width: 7rem;}
	#header .header_inner{height:var(--header-height);}
	#header #navi:after{height:var(--header-height);}
	#menuAll .mobile_top{margin-top:var(--header-height);}
	#header .btn-gnb-menu{width:3.6rem; height:3.6rem;}
	.select_btn{right:3.6rem;}
	.option_list { right:3rem;}

	/* 모바일 전체메뉴 */
	#header .all_menu_wrap {padding-bottom: 0; background-color: #000;}
	#header .all_menu {display: none;}
	#header .mob_all_menu {display: block; height: 100%; padding: 0 var(--side-padding) var(--side-padding); overflow-y: auto;}
	#header .mob_all_menu > ul {border-top: 1px solid rgba(255, 255, 255, 0.2);}
	#header .mob_all_menu > ul > li {border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
	#header .mob_all_menu > ul > li:has(ul) > div > a {}
	#header .mob_all_menu > ul > li > div > a {display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; font-size: 1.5rem; font-weight: var(--font-weight-semibold); line-height: 5rem;}
	#header .mob_all_menu > ul > li > div > a::after {content: ''; display: block; width: 1.5rem; height: 1.5rem; background: url('/images/default/main/ico_angle_down_w.svg') no-repeat center/cover;}
	#header .mob_all_menu > ul > li > ul {display: none; padding-bottom: 1.5rem;}
	#header .mob_all_menu > ul > li > ul > li {padding-left: 1.25rem; position: relative;}
	#header .mob_all_menu > ul > li > ul > li::before {content: ''; display: block; width: 0.25rem; height: 0.25rem; background-color: var(--Brand-Color-main); border-radius: 50%; position: absolute; top: calc(50% - 0.125rem); left: 0.25rem;}
	#header .mob_all_menu > ul > li > ul > li + li {margin-top: 1rem;}
	#header .mob_all_menu > ul > li > ul > li > ul {display:none;}
	#header .mob_all_menu > ul > li > ul > li > a {font-size: 1.063rem; opacity: 0.8;}
	#header .mob_all_menu > ul > li.open > div > a::after {transform: rotate(180deg);}

	#footer {background-position: 75% center;}
	.ft_r {justify-content: flex-end;}
	.ft_r .ft_nav {display:none;}
	.btn_to_top img {transform: unset;}

	/*팝업 롤링 추가*/
	.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;}
}



/********************************************************
팝업
********************************************************/
/*로딩팝업*/
#loading {background: rgba(0, 0, 0, .4); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000;}
#loading .popin{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);  width:15rem; padding:2rem 0; text-align:center; background:#fff; z-index: 100; border-radius: 1rem; overflow:hidden;}
#loading .popin p{font-size:0.8rem; font-weight:600;}
#loading .loading_spinner{width: 70px; height: 70px;  display: block; margin:0 auto 0.5rem;}


/********************************************************
접근성 바로가기
********************************************************/
.top-quick-menu { width: 100%; position: fixed; top: 0; left: 0; z-index: 1000;}
.top-quick-menu ul { width: 100%; margin: 0 auto; text-align: center; position: relative; }
.top-quick-menu ul li { width: 100%; position: absolute; top: 0; left: 0; transform: translateY(-100%); }
.top-quick-menu ul li a { display: block; padding: 1rem; background-color: var(--Brand-Color-main); color: #fff; }
.top-quick-menu ul li:has(a:focus),
.top-quick-menu ul li:has(a:hover),
.top-quick-menu ul li:has(a:active) { transform: translateY(0); }


/* ==================== 포트폴리오용 사이트 알림 팝업 ==================== */
#portfolio_pop {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 20px; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 10000;}
#portfolio_pop .pop_box {width: 90%; max-width: 500px; padding: 50px 20px; text-align: center; background: #fff; border-radius: 10px;}
#portfolio_pop .pop_box p {word-break: keep-all;}
#portfolio_pop .pop_btn_wrap {display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 50px;}
#portfolio_pop .pop_btn {display: block; width: 150px; height: 40px; padding: 10px; font-size: 0.7em; color: #fff; border: none; border-radius: 10px; background-color: var(--Brand-Color-navy);}