html {position: relative;}
html.on:after {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); content: ""; z-index: 10;}

#header{position:fixed;left:0;top:0;width:100%;padding:1.5rem 0;z-index: 11;transition: 0.45s;height:6rem;}
#header a.logo img {filter: brightness(0) invert(0); transition: 0.45s;}
/* #header a.logo img.img-responsive {max-width: 65%;} */
#header .list{gap:4rem;font-weight: 600;}
#header li a {color: #393939; position: relative;}
#header .logo{color: #393939;}
#header li a:after {position: absolute; left: 0; bottom: -5px; width: 0%; height: 3px; background: #fff; content: ""; transition: 0.45s;}
#header li:hover a:after {width: 100%;}
/* #header.on {background: #fff; box-shadow: 2px 2px 46px rgb(0 75 160 / 7%);} */
#header {background: #fff; box-shadow: 2px 2px 46px rgb(0 75 160 / 7%);}
/* #header.on a.logo img {filter: brightness(100%) invert(1);} */
#header.on .lnb li a:after {background: var(--pointcolor);}
@media(max-width:768px) {
    #header{padding:1.1rem 0;}
}
/* Slide */
.mainSlide{overflow: hidden;height: 47rem;}
.mainSlide .swiper{height: 47rem;}
.mainSlide .bg-img { position: absolute;left: 0;right: 0;top: 0;bottom: 0;min-width: 100%;min-height: 100%;background-size: cover;object-fit: cover;height: 47rem; /* aspect-ratio: 16 / 9; */}
.mainSlide:after {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.2); content: "";}
.mainSlide .txt01,.mainSlide .txt02,.mainSlide .txt03 {position: absolute;left: 15%;top: 70%;transform: translateY(100%);width: 100%;z-index: 1;}
/* .mainSlide .txt02 {position: absolute;left: 15%;transform: translateY(200%);width: 100%;z-index: 1;}
.mainSlide .txt03 {position: absolute;left: 15%;transform: translateY(200%) translatex(50%);width: 100%;z-index: 1;} */
.mainSlide .txt h2{margin: 20px 0;}
.main-btn {display: inline-block;padding: 1rem 1.5rem;border-radius: 15px;background: rgba(0, 0, 0, 0.5);border: 1px solid #fff;    transition: 0.45s;}
/* Slide */
.mainSlide .swiper-pagination-bullet-active { background-color: #fff;}

/* carousel */
#naver-carousel{position: absolute;width: 100%;top:300px;padding:40px 0;z-index: 1;}
#naver-carousel h2{font-size:28px;font-weight:700;margin-bottom:24px;line-height:1.3;}
#naver-carousel .gallery{display:flex;gap:5px;padding:0;margin:0;list-style:none;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
#naver-carousel .gallery::-webkit-scrollbar{display:none;}
#naver-carousel .item{min-width: 140px;}
#naver-carousel .item a{display:block;text-decoration:none;color:#111;}
#naver-carousel .item img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;display:block;}
#naver-carousel .item strong{display:block;margin-top:14px;font-size:18px;font-weight:700;line-height:1.4;word-break:keep-all;}
@media (max-width:768px){
    #naver-carousel{padding:30px 0;}
    #naver-carousel h2{font-size:22px;margin-bottom:18px;}
    #naver-carousel .item{min-width:220px;}
    #naver-carousel .item strong{font-size:16px;}
}

/* mainTop */
.mainTop{overflow: hidden;height: 15rem;margin-top: 6rem;display:flex;align-items: center;justify-content: center;}
.mainTop:after {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgb(255, 255, 255); content: "";}
.mainTop .contents {display:flex;flex-direction: column;justify-content: center;align-items: center;line-height:1.5;text-align: center;}
.mainTop .textTitle {margin-top:6rem;font-size:3.5rem;z-index: 1;}
.mainTop .textContent {font-size:1.7rem;z-index: 1;}
@media(max-width:604px) {
.mainTop .textTitle {font-size:6rem;}
.mainTop .textContent {font-size:1.5rem;}
}
/* subTop */
.subTop{overflow: hidden;height: 25rem;margin-top: 3rem;padding:1rem; display:flex;align-items: center;justify-content: center;}
.subTop:after {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgb(255, 255, 255); content: "";}
.subTop .contents {display:flex;flex-direction: column;justify-content: center;align-items: center;line-height:1.5;text-align: center;}
.subTop .textTitle {margin-top:6rem;font-size:3.5rem;z-index: 1;}
.subTop .textContent {font-size:1.7rem;z-index: 1;}
@media(max-width:604px) {
.subTop .textTitle {font-size:6rem;}
.subTop .textContent {font-size:1.5rem;}
}

@media(max-width:1240px) {
    .mainTop .textTitle {margin-top:6rem;}
    .subTop .textTitle {margin-top:6rem;}
    #header .list {gap: 2.5rem;}
}

@media(min-width:991px) {
    #header.on li a {color: #393939;}
    #header.on .logo {color: #393939;}
    /* #header.on .list li a.point {color: var(--pointcolor); transition: 0.2s;} */
}

@media(max-width:990px) {
    #header .font-20 {font-size: 3.4375rem;}
    #header .lnb-wrap {position: fixed; flex-direction: column; top: 69px; left: 0; transform: translateX(130%); transition: 0.45s; height: calc(100vh - 69px); overflow-y: auto; width: 100%; padding: 5rem 0; background-color: #fff; opacity: 0;}
    #header .lnb-wrap.active {transform: translateX(0); opacity: 1;}
    #header .list {flex-direction: column; background: #fff; width: 100%;  justify-content: center; width: 100%;}
    #header .list li {padding: 0 10%;}
    #header .list li a {color: #393939;} 
    #header .list li:last-child a {color: var(--pointcolor); transition: 0.2s;}
    #header .wrap {justify-content: space-between !important;}
    #header .hamburger-menu {width: 42px; position: relative; z-index: 11; height: 100%; cursor: pointer;}
    #header .hamburger-menu span {display: block; background: #393939;; width: 42px; height: 4px;  transition: 0.25s margin 0.25s, 0.25s transform;}
    #header .hamburger-menu span:nth-child(1) {margin-bottom: 8px;}
    #header .hamburger-menu span:nth-child(3) {margin-top: 8px;}
    #header .hamburger-menu.active span {transition: 0.25s margin, 0.25s transform 0.25s;}
    #header .hamburger-menu.active span:nth-child(1) {margin-top: 8px; margin-bottom: -4px; transform: rotate(45deg);}
    #header .hamburger-menu.active span:nth-child(2) {transform: rotate(45deg);}
    #header .hamburger-menu.active span:nth-child(3) {margin-top: -4px; transform: rotate(135deg);}
    #header a.logo img.img-responsive {max-width: 70%;margin-top:5px;}
    #header.on .hamburger-menu span {background: #000;}
}

