@charset "utf-8";

input {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

body{font-size: 16px; font-family: "Pretendard-Regular" !important;}

.hidden {
    width: 0; height: 0; overflow: hidden;
    position: absolute; left: -9999px; top: -9999px;
    font-size: 0; line-height: 0; text-indent: -9999px;
    opacity: 0;
}

#btn_top {display: none}

.skipnav{position: absolute; left: 0; top: -100px; width: 100px; z-index: 5000;}
.skipnav li{position: absolute; left: 0; top: 0;}
.skipnav:active li{top: 100px;}

.inner{max-width: 1460px; width: 100%; padding: 0 30px}

#header{position: fixed; left: 0; top:0; z-index: 1000; width: 100%;}

.inner{
    max-width: 1460px;
    width: 100%;
    padding: 0 30px; margin: 0 auto;
}

#header {
    width: 100%;
    position: fixed;
    left: 0; top: 0; z-index: 1000;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    transition: all 0.3s;
}

#header.active{background-color: white}

#header .inner{display: flex; align-items: center;}
.logo{display: block;
    max-width: 369px; width: 100%; height: 30px;
    margin-right: 30px;
}
.logo a{display: block; height: 30px;
    text-indent: -9999px;
    background: url("./images/logo.svg") no-repeat center center/contain;
}

nav{flex: 1; display: flex;}
.nav-pc{justify-content: end}
.nav-pc .header-pageTab {
    display: flex;
    justify-content: end;
}

.nav-pc .header-pageTab-item{
    position: relative;
}
.nav-pc .header-pageTab-item::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    display: block;
    width: 76px;
    height: 0;
    background-color: #0C7771;
    transition: all 0.1s ease-in-out;
}
.nav-pc .header-pageTab-item:hover::after{height: 4px;}
.nav-pc .header-pageTab-item:hover h2 > a{color: #0C7771;}
.nav-pc .header-pageTab-item h2 > a {display: block;
    padding: 36px 2.5rem 0 2.5rem;
    font-size: 24px;
    height: 100px;
    font-weight: 600;
}

.nav-pc .header-pageTab-sub{
    position: absolute; left: 0; top: 100%;
    width: 100%; height: 0; z-index: 500;
    margin-top: 1rem;
    text-align: center;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}

.nav-pc .header-pageTab-sub.active{}
.nav-pc .header-pageTab-sub > li:hover{}

.nav-pc .header-pageTab-sub a{display: block; padding: 10px 0;
    font-size: 18px;
    transition: all 0.3s;
}
.nav-pc .header-pageTab-sub a:hover{color: #0C7771;}
.nav-pc.none{display: none}

.nav-mobile{display: none;
    position: fixed; left: 0; top: 0; z-index: 100000;
    width: 40%; height: 100vh;
    padding: 50px 0;
    background-color: white;
    transform: translateX(-100%);
    transition: all 0.3s;
}
.nav-mobile.active{display: block}
.nav-mobile.view{
    transform: translateX(0);
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
}
.nav-mobile .header-pageTab{}
.nav-mobile .header-pageTab-item{}

.nav-mobile .header-pageTab-item h2 a {
    display: block;
    font-size: 24px; font-weight: 600;
    padding: 20px 30px;
    position: relative;
    transition: all 0.2s;
}
.nav-mobile .header-pageTab-item h2 a::after{
    content: "";
    width: 0; height: 2px;
    background-color: #0C7771;
    position: absolute; left: 20px; bottom: 0;

}
.nav-mobile .header-pageTab-item.active h2 a::after{
    width: calc(100% - 20px);
}
.nav-mobile .header-pageTab-sub {
    overflow: hidden;
    padding: 0 0;
    height: 0;
    transition: all 0.3s;
}

.nav-mobile .header-pageTab-item.active .header-pageTab-sub {
    padding: 15px 0;
}
.nav-mobile .header-pageTab-sub > li {

}
.nav-mobile .header-pageTab-sub a{
    display: block;
    padding: 10px 0;
    text-indent: 50px;
    font-size: 20px;
}

.mobile-menu-bg {
    display: none;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 500;
}

.menu-bg {
    position: absolute;
    left: 0; top: calc(100% + 1px);
    width: 100%; height: 0;
    background-color: white;
    transition: all 0.2s ease-in-out;
}
.menu-bg.active{height: 270px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
.menu-bg.none {display: none; height: 0}

.mobileMenuBtn{display: none;
    width: 24px; height: 24px;
}
.mobileMenuBtn.active{display: block}

#Ftr {padding: 50px 0}
.ftrQckSite, .ftrQckSite-btnDepth {border-top: 0; border-width: 0}
#Ftr .ftrInfoArea {padding-bottom: 0}
#Ftr{background: #0C7771; font-size:18px; font-weight:normal; margin: 0}
#Ftr .ftrAddress{display: block}
#Ftr .flexWrapper{display: flex; align-items: center; justify-content: space-between; gap: 30px}
#Ftr .footerInfo{color:#ccc; display: block}
#Ftr .footerInfo address{font-style: normal; color: inherit}
#Ftr .footerInfo span {color: inherit}
#Ftr .footerInfo span:nth-of-type(0) {margin-right: 11px}
#Ftr .ftrQckSite{margin-bottom: 0}
#Ftr .copyright{color: #fff;}
#Ftr .selectWrapper{display: block; width: 100%; max-width: 316px}
#Ftr .selectWrapperM{display: none;}
#Ftr .selectWrapper select{display: block; width: 316px; height: 44px; margin-bottom: 3px; appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none; border-radius: 10px; padding: 0px 20px}
#Ftr select {
    font-family: 'Pretendard-Regular';
    font-size: 18px;
}
#Ftr select option{padding: 10px 0}
#Ftr .skinContainerM{display: none}
.ftrInfoArea .skinContainer .mobile {display: none}
.customSelect {
    position: relative;
    display: inline-block;
    /*margin-right: 20px; !* 선택 요소 사이 간격 조정 *!*/
}

.arrowIcon {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    pointer-events: none; /* 마우스 이벤트를 select 요소로 전달 */
}

/* 화살표 아이콘 스타일링 */
.arrowIcon svg {
    fill: #000; /* 아이콘 색상 지정 */
}

/* 노트북 */
@media screen and (max-width: 1430px) and (min-width: 1025px) {
}

/* 패드-pro */
@media screen and (max-width: 1024px) and (min-width: 821px) {

}

/* 태블릿 */
@media screen and (max-width: 820px) and (min-width: 481px) {
    .nav-mobile{width: 320px}
}

/* 모바일 */
@media screen and (max-width: 480px) {
    #header{height: 56px !important;}
    .logo a{max-width: 237px; height: 30px;}
    .nav-mobile{width: 230px}
    .nav-mobile .header-pageTab-item h2 a {font-size: 18px}
    .nav-mobile .header-pageTab-sub a{font-size: 15px}
    #Ftr .selectWrapper{margin: 0 auto}
    #Ftr .footerInfo {display: flex; flex-direction: column; row-gap: 7px}
    #Ftr .footerInfo address {word-break: keep-all}
    #Ftr .footerInfo span:nth-of-type(0) {margin-right: 0}
}

@media screen and (max-width: 350px) and (min-width: 280px) {
    #Ftr .selectWrapper {max-width: 260px}
    #Ftr .selectWrapper select{width: 260px; font-size: 16px;}
}

/* 노트북 ~ 모바일 */
@media screen and (max-width: 1430px) {
    #header{height: 100px;
        display: flex;
        align-items: center;
    }
    #header .inner{justify-content: space-between}
    .nav-pc {
        display: none;
    }
}

/* 태블릿 ~ 모바일 */
@media screen and (max-width: 820px) {
    .inner {padding: 0 15px}
    #Ftr{font-size: 16px;}
    #Ftr .flexWrapper{display: block; padding-top:0px;}
    #Ftr .skinContainerM{display: block; width: 100%; margin-top: 0 !important}
    #Ftr .skinContainer{display: none;}
    #Ftr .ftrInfoArea {padding: 40px 0 0 0}
    #Ftr .ftrAddress {text-align: left;}
    #Ftr .footerLogo>svg {width: auto; height: 23.63px}
}