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:2.1rem 0;z-index: 11;transition: 0.45s;}
#header a.logo img {filter: brightness(0) invert(0); transition: 0.45s;}
#header a.logo img.img-responsive {max-width: 65%;}
#footer .logo img.img-responsive {max-width: 50%;}
#header .list{gap:4rem;font-weight: 600;}
#header li a {position: relative;}
#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.on a.logo img {filter: brightness(100%) invert(1);}
#header.on .lnb li a:after {background: var(--pointcolor);}

/* 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;}

@media(max-width:1240px) {
    #header .list {gap: 2.5rem;}
}

@media(min-width:991px) {
    #header.on li a {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: #000; 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: 45%;}
    #header.on .hamburger-menu span {background: #000;}
}