@charset "utf-8";

.wrapper {max-width: 1420px; width: 100%; padding: 0 1.25rem; margin: 0 auto;}
body {padding-top: calc(100px + 36px);}

@media (max-width: 1023px) {
    html, body {font-size: 92%;}
}


@media (max-width: 767px) {
    body {padding-top: 60px;}
    html, body {font-size: 90%;}
}


/* 헤더 */
header {width: 100%; position: absolute; top: 0; left: 0; background: #fff;}
header .tnb {width: 100%; background: #E94E1B;}
header .tnb .wrapper {display: flex; align-items: center; justify-content: space-between;}
header .tnb ul {height: 36px; display: flex; align-items: center; gap: 1.25rem;}
header .tnb ul li {height: 100%; display: flex; align-items: center;}
header .tnb .lf_link li a {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #E94E1B; font-size: .875rem; font-weight: 500; padding: .625rem 1.25rem; background: #fff; position: relative;}
header .tnb .lf_link li a[target="_blank"]::after {content: ""; background: url(/resources/images/icon/ico_arrow_right_up.svg) center no-repeat; background-size: cover; width: 8px; height: 8px; margin-left: 10px;}
header .tnb .rt_link li a {font-size: .875rem; font-weight: 500; color: #fff; padding: .625rem; position: relative;}
header .tnb .rt_link li + li a::before {content: ""; width: 2px; height: 2px; border-radius: 50%; background: #fff; position: absolute; left: calc(-.625rem + 1px); top: 50%; transform: translateY(-50%);}
header .gnb {width: 100%; height: 100px; position: relative; border-bottom: 1px solid #ebebeb; z-index: 9;}
header .gnb > .wrapper {width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between;}
header .gnb .hd_logo a {display: flex; align-items: center; gap: 10px;}
header .gnb .hd_logo a span {font-size: 1.3125rem;}
header .gnb nav {width: 40%; height: 100%; transition: .3s;}
header nav.pc .depth1 {width: 100%; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; transition: max-width .3s;}
header nav.pc .depth1 > li {width: 100%; height: 100%;}
header nav.pc .depth1 > li > a {display: flex; align-items: center; justify-content: center; width :100%; height: 100%; position: relative;}
header nav.pc .depth1 > li > a span {font-size: 1.1875rem; font-weight: 500;}
header .gnb .util {display: flex; align-items: center; gap: 1.25rem;}
header .gnb .util li {display: flex; align-items: center; justify-content: center;}
header .gnb nav a {word-break: break-word;}
header .gnb nav a[target="_blank"]::after {content: ""; display: inline-block; background: url(/resources/images/icon/ico_link_b.svg) center no-repeat; background-size: cover; width: 10px; height: 10px; margin-left: 5px;}
header.open .depth1 > li:hover > a[target="_blank"]::after,
header .gnb nav a[target="_blank"]:hover::after,
header .gnb .mgnb nav .depth1 > li.on > a[target="_blank"]::after {background: url(/resources/images/icon/ico_link.svg) center no-repeat; background-size: cover;}

header .gnb .mgnb {display: none;}

header.open {background: #fff; transition: .3s;}
header.open nav.pc .depth1 > li > a span::before {content: ""; width: 0; height: 4px; background: #E94E1B; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: .3s; z-index: -1; opacity: 0;}
header.open nav.pc .depth1 > li:hover > a span::before {width: calc(100% + 20px); opacity: 1;}
header.open nav.pc .depth2 {position: absolute; top: 100px; left: 0; width: 100%; height: auto; background: #fff; overflow: hidden; box-shadow: 4px 44px 44px rgba(0, 0, 0, .15); transition: height .3s;}
header.open nav.pc .depth2 .wrapper {display: flex;}
header.open nav.pc .depth2 .tit {width: 20%; padding: 40px 0; position: relative; border-right: 1px solid #ebebeb;}
header.open nav.pc .depth2 .tit h2 {font-size: 1.5rem; position: relative; margin-top: 10px;}
header.open nav.pc .depth2 .menuadd {display: flex; width: 100%;}
header.open nav.pc .depth2 .menuadd > li {padding: 2.5rem 1rem; width: 25%;}
header.open nav.pc .depth2 .menuadd > li > a {display: block; font-size: 17px; padding: 13px 40px 13px 22px; background: #fafafa; border: 1px solid #ebebeb; border-radius: 5px; position: relative; transition: .3s;}
header.open nav.pc .depth2 .menuadd > li > a::after {content: ""; background: url(/resources/images/icon/ico_arrow_b.svg) center no-repeat; background-size: 10px; width: 12px; height: 8px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); opacity: .7;}
header.open nav.pc .depth2 .menuadd > li:hover > a,
header.open nav.pc .depth2 .menuadd > li > a:focus-visible {border: 1px solid #E94E1B; background: #E94E1B; color: #fff; box-shadow: 4px 4px 14px rgba(0, 0, 0, .15);}
header.open nav.pc .depth2 .menuadd > li:hover > a::after,
header.open nav.pc .depth2 .menuadd > li > a:focus-visible:after {background: url(/resources/images/icon/ico_arrow_w.svg) center no-repeat; opacity: 1;}
header.open nav.pc .depth3 {display: flex; flex-direction: column; gap: 15px; padding: 30px 0 0 10px;}
header.open nav.pc .depth3 li a {display: block; font-size: 16px; padding-left: 12px; color: #444; position: relative;}
header.open nav.pc .depth3 li a:hover,
header.open nav.pc .depth3 li a:focus-visible {color: #E94E1B; text-decoration: underline; text-underline-position: under; text-underline-color: #E94E1B;}
header.open nav.pc .depth3 li a::before {content: ""; width: 3px; height: 3px; background: #E94E1B; border-radius: 50%; position: absolute; left: 0; top: 8px;}
header.open nav.pc .depth2 .menuadd > li > a[target=_blank]::after {content: ""; background: url(/resources/images/icon/ico_link_b.svg) center center no-repeat; width: 10px; height: 10px; background-size: cover; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); opacity: .7;}
header.open nav.pc .depth2 .menuadd > li:hover > a[target=_blank]::after,
header.open nav.pc .depth2 .menuadd > li > a[target=_blank]:focus-visible::after {background: url(/resources/images/icon/ico_link_w.svg) center center no-repeat; background-size: cover; opacity: 1;}
header.open nav.pc .depth3 li a[target=_blank]::after {content: ""; background: url(/resources/images/icon/ico_link_b.svg) center center no-repeat; width: 10px; height: 10px; background-size: cover; opacity: .7;}
header.open nav.pc .depth3 li a[target=_blank]:hover::after,
header.open nav.pc .depth3 li a[target=_blank]:focus-visible::after {content: ""; background: url(/resources/images/icon/ico_link.svg) center center no-repeat; background-size: cover; opacity: 1;}

@media (max-width: 1023px) {
    header .gnb nav,
    header .gnb .util {display: none;}
    header .gnb .mgnb {display: block; width: 20%; height: 100%;}
    header .gnb .mgnb .mham {width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end;}
    header .gnb .mgnb .mham button {display: block;}
    header .gnb .mgnb nav {position: fixed; top: 0; right: 0; max-width: 340px; width: 80%; height: 100%; background: #fff; box-shadow: -4px 4px 30px rgba(0, 0, 0, .15); z-index: 99;}
    header .gnb .mgnb nav .mutil {width: 100%; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 5%; border-bottom: 1px solid rgba(0, 0, 0, .15);}
    header .gnb .mgnb nav .mutil li {display: flex; gap: 20px;}
    header .gnb .mgnb nav .mutil li > * {position: relative; font-size: .9375rem; font-weight: 500;}
    header .gnb .mgnb nav .mutil li > * + *::before {content: ""; width: 2px; height: 2px; background: #555; border-radius: 50%; position: absolute; left: -11px; top: 50%; transform: translateY(-50%);}
    header .gnb .mgnb nav .mutil .cls button {width: 14px; height: 14px; background: url(/resources/images/icon/ico_close_b.svg) center no-repeat; background-size: cover; border-radius: 0; border: none; padding: 0;}
    header .gnb .mgnb nav .depth1 {overflow-y: scroll; width: 100%; height: calc(100% - 70px);}
    header .gnb .mgnb nav .depth1 > li {padding: 1rem 2rem; border-bottom: 1px solid #ebebeb;}
    header .gnb .mgnb nav .depth1 > li > a {display: flex; align-items: center; width: 100%; height: 40px; font-size: 1.125rem; font-weight: 700; position: relative;}
    header .gnb .mgnb nav .depth1 > li > a::before {content: ""; background: url(/resources/images/icon/ico_lnb_arrow_b.svg) center no-repeat; background-size: cover; width: 18px; height: 18px; position: absolute; right: 0; top: 10px;}
    header .gnb .mgnb nav .depth1 > li.on > a::before {transform: rotate(180deg);}
    header .gnb .mgnb nav .depth1 > li .depth2 {display: none; background: #f9f9f9; padding: .875rem; margin-top: 1rem;}
    header .gnb .mgnb nav .depth1 > li .depth2 li a {display: block; padding: 1rem 0; font-size: 1rem; font-weight: 500; position: relative;}
    header .gnb .mgnb nav .depth1 > li.on > a,
    header .gnb .mgnb nav .depth1 > li:hover > a,
    header .gnb .mgnb nav .depth1 > li .depth2 li:hover > a,
    header .gnb .mgnb nav .depth1 > li .depth3 li a:hover {color: #E94E1B;}
    header .gnb .mgnb nav .depth1 > li .depth3 {padding: 0 1rem; background: #fff; border-radius: 5px;}
    header .gnb .mgnb nav .depth1 > li .depth3 li a {font-weight: 400; padding: .5rem 0;}
    header .gnb .mgnb nav .depth1 > li .depth3 li a::before {content: ""; display: inline-block; width: 2px; height: 2px; border-radius: 50%; background: #E94E1B; margin-right: 5px; vertical-align: middle;}
}

@media (max-width: 767px) {
    header .tnb {display: none;}
    header .gnb {height: 60px;}
    header .gnb .hd_logo a img {width: 120px;}
    header .gnb .hd_logo a span {font-size: 1.125rem;}
}


/* 툴팁 */
.tooltip {position: relative; border: none; cursor: pointer;}
.tooltip::after {content: attr(data-tooltip); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, .8); color: #fff; font-size: .875rem; padding: .25rem .5rem; border-radius: 0.25rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .3s;}
.tooltip:hover::after {opacity: 1;}


/* 팝업존 */
.popup_area {position: fixed; background: rgba(0,0,0,.8); z-index: 99999999; width: 100%; height: 0; opacity: 0; overflow: hidden; transition: opacity .3s ease; display: none;}
.popup_area.show {top:0; height: 100%; opacity: 1; display: flex; align-items: center; justify-content: center;}
.popup_wrap {width: 710px; position: relative; transform: translateY(-35px);}
.popup_list { overflow: hidden;}
.popup_list .popup_slide .swiper-slide {height: auto!important;}
.popup_list .popup_slide .swiper-slide * {width: 100%; max-width: 340px; height: 100%; margin: 0 auto;}
.popup_list .popup img {width: 100%; max-width: 340px;}
.popup_control {display: flex; justify-content: space-between; margin-top: 20px;}
.popup_control button {color: #fff; display: inline-block; padding-left: 20px; font-size: 1rem;}
.popup_control .close {background: url(/resources/images/icon/ico_close_w.svg) left center no-repeat;}
.popup_control .today_close {background: url(/resources/images/icon/ico_check_w.svg) left center no-repeat;}
.popup_wrap .indicator { display: flex; align-items: center; justify-content: end; padding-bottom: 20px; }
.popup_wrap .indicator > div {position:absolute; top:45%; width: 80px; height: 80px; cursor: pointer; display: block;border-radius: 50px;border: 1px solid #fff; }
.popup_wrap .indicator .swiper-button-disabled {opacity: .5; }
.popup_wrap .indicator .popup_prev{left:-100px; background: url(/resources/images/icon/ico_prev_w.svg) center no-repeat;}
.popup_wrap .indicator .popup_next{right:-100px; background: url(/resources/images/icon/ico_next_w.svg) center no-repeat; margin-left: 5px;}
.empty_popup {min-height: 340px; display: flex; align-items: center; justify-content: center; width: 100%;}
.empty_popup p {color: #fff; font-size: 1rem; text-align: center; width: 100%;}

@media (max-width: 1279px) {
    .popup_wrap {width: 80%; padding: 0 20px;}
    .popup_wrap .indicator { display: flex; align-items: center; justify-content: end; padding-bottom: 20px; }
    .popup_wrap .indicator > div {position:relative; top:auto; width: 50px; height: 50px; }
    .popup_wrap .indicator .popup_prev{left:auto; }
    .popup_wrap .indicator .popup_next{right:auto;}
}

@media (max-width: 767px) {
    .popup_wrap {width:100%;}
    .popup_list .popup_slide {justify-content: flex-start;}
    .popup_list .popup {max-width: 100%!important; text-align: center;}
    .popup_list .popup img {max-width: 340px;}
}


/* 상단으로 이동 */
.scrollTop {position: fixed; right: 40px; bottom: 20px; z-index: 99; opacity: 0; transition: .3s;}
.scrollTop button {width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; border-radius: 50%; background: #222; cursor: pointer;}
.scrollTop.is-visible {opacity: 1;}
.scrollTop.fixed {position: absolute;}

@media (max-width: 767px) {
    .scrollTop {display: none!important;}
}


/* 푸터 */
footer {background: #212121; padding: 3.125rem 0;}
footer .wrapper {display: flex; flex-direction: column; gap: 1.875rem;}
footer .ft_logo {display: flex; align-items: center; gap: 10px;}
footer .ft_logo span {color: #bbb; font-size: 1.125rem; font-weight: 600;}
footer .ft_link {display: flex; align-items: center; gap: 10px;}
footer .ft_link li a {color: #FCBF00; font-size: 1rem; font-weight: 500;}
footer .ft_info {display: flex; flex-direction: column; gap: 10px; color: #bbb; font-size: 1rem;}
footer .ft_info ul {display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;}
footer .ft_copy {font-size: 12px; color: #bbb;}

@media (max-width: 767px) {
    footer .ft_logo img {width: 120px;}
}