.main {margin-top: 7.75rem; position: relative; z-index: 1; background: #101010;}

@media(max-width:768px) {
    .main {margin-top: 73px;}
    .main .container {width: 85%;}
    .main .section-right {padding-right: 7.5%;}
    .main .section-left {padding-left: 7.5%;}
    .main.font-20 {font-size: 1.750rem;}
    .main .font-32 {font-size: 2.50rem;}

}

@media(max-width:500px) {
    .main {margin-top: 66px;}
    .main.font-20 {font-size: 1.5rem;}
    .main .font-60 {font-size: 3.250rem;}
    .main .font-48 {font-size: 2.50rem;}
}

/* 타이틀 글자 포인트 */
h2.dot {position: relative;}
h2.dot.text-center {width: fit-content; margin: auto;}
h2.dot:after {position: absolute; left: -15px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--pointcolor); content: "";}

@media(max-width:768px) {
    h2.dot {margin-left: 1rem;}
    h2.dot:after {width: 8px; height: 8px; top: 5px;}
}

/* 더보기 버튼 */
.moreBtn {display: flex; align-items: center; gap: 1.5rem; width: fit-content; padding: 1rem 2rem; border-radius: 100px; background: var(--pointcolor); color: #fff;}
.moreBtn img {transition: 0.3s; width: 0.875rem;}
.moreBtn:hover img {transform: rotate(90deg);}

@media(max-width:768px) {
    .moreBtn {padding: 1rem 3rem;}
    .moreBtn img {width: 1.125rem;}
}

/* 스와이퍼 관련 */
.pgWrap {display: flex; align-items: center; gap: 3rem;}
.pgWrap .swiper-pagination {z-index: 1;}
.pgWrap .swiper-pagination-progressbar {position: initial; background: #d1d1d1; height: 3px;} 
.pgWrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: var(--pointcolor);}

.pgWrap .swiper-scrollbar {position: initial; background: #999999; width: 100%; height: 3px;}
.pgWrap .swiper-scrollbar-drag {background: var(--pointcolor);}

.pgWrap .nav {display: flex; gap: 2.5rem;}
.pgWrap .nav div {position: initial; height: auto; margin: 0; width: auto;}
.pgWrap .swiper-button-next:after, 
.pgWrap .swiper-button-prev:after {display: none;}

/* 로그인 */
.loginbox {position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.7);}
.loginbox:after {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 90%; height: 90%; backdrop-filter: blur(5px); content: "";}
.loginbox p {color: #fff; position: relative;  z-index: 1;}
.loginbox .btns {color: var(--pointcolor); margin-top: 1rem; display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--pointcolor); font-family: var(--pointfont), serif; letter-spacing: 0; position: relative; z-index: 1;}

@media(max-width: 500px) {
    .loginbox {font-size: 1.25rem;}
    .loginbox img {width: 5px;}
    .loginbox .btns {margin-top: .5rem;}
}

/* 메인슬라이드 */
#mainSlide .wrap {width: 97.5%; margin: auto; border-radius: 1.875rem; overflow: hidden;}
#mainSlide .swiper-slide {position: relative; overflow:hidden;-webkit-backface-visibility:hidden; backface-visibility:hidden; width: 100%;}
#mainSlide .slide01 {z-index: 4;}
#mainSlide .slide02 {z-index: 3;}
#mainSlide .slide03 {z-index: 2;}
#mainSlide .slide04 {z-index: 1;}
#mainSlide .txt {width: 50%; position: absolute; left: 60%; top: 50%; transform: translateY(-50%); z-index: 1; padding-right: 5%;} 
#mainSlide .txt p span {background: #000; color: var(--pointcolor); font-weight: 700; padding: 0.05rem 0.125rem;}
#mainSlide .bg {width: 100%;}

#mainSlide .swiper-pagination {bottom: 6rem; transition: none; z-index: 1;}
#mainSlide .swiper-pagination-bullet {background: #fff; opacity: 1; margin: 0 6px !important; transition: width 0.3s ease, background-color 0.3s ease; height: 6px !important; width: 6px; border-radius: 6px;}
#mainSlide .swiper-pagination-bullet-active {background: var(--pointcolor); width: 24px; border-radius: 1.875rem;}

@media(max-width:1440px) {
    #mainSlide .txt .font-65 {font-size: 3.5rem;}
}

@media(max-width:1240px) {
    #mainSlide .txt {left: 55%;}
    #mainSlide .swiper-pagination {bottom: 4.5rem;}
}

@media(max-width:768px) {
    #mainSlide .wrap {width: 93.5%;}
    #mainSlide .txt {width: 90%; left: 50%; transform: translateX(-50%); padding-right: 0;}
    #mainSlide .txt .font-65 {font-size: 4.0625rem;}
    #mainSlide .txt .font-32 {font-size: 2.500rem;}
    #mainSlide .slide01 .txt {top: auto; bottom: 17%;}
    #mainSlide .slide02 .txt {top: 50%;}
    #mainSlide .slide03 .txt {top: 60%;}
    #mainSlide .slide04 .txt {top: 50%;}

}

@media(max-width:500px) {
    #mainSlide .txt .font-65 {font-size: 3.5rem;}
    #mainSlide .txt .font-32 {font-size: 2.2500rem;}
    #mainSlide .slide02 .txt p br {display: none !important;}

    #mainSlide .swiper-pagination-bullet {margin: 0 4px !important;}
    #mainSlide .swiper-pagination-bullet {width: 5px; height: 5px !important;}
    #mainSlide .swiper-pagination-bullet-active {width: 20px;}
}

@media(max-width:420px) {
    #mainSlide .slide04 .txt h2 br {display: none !important;}
}

@media(max-width:365px) {
    #mainSlide .txt .font-65 {font-size: 3rem;}
    #mainSlide .swiper-pagination {display: none;}
}

/* 인트로 */
.main #intro {background-image: url("/img/main/intro_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top; margin-top: -10rem; padding-top: calc(200px + 10rem); position: relative;  overflow: hidden;}
.main #intro::before {position: absolute; left: 0; bottom: 0; width: 100%; height: 20rem; background: linear-gradient(to bottom, transparent 10%, #101010 100%); content: ""; }
.main #intro .container {position: relative; z-index: 1;}
.main #intro .bg_cir {position: absolute; left: 50%; top: -20rem; transform: translateX(-50%);}
.main #intro .bg_cir img {animation: rotate 30s linear infinite;}
.main #intro .imgbox {padding: 0 5%;}
.main #intro .imgbox img {border-radius: 1.875rem; overflow: hidden; z-index: 1; position: relative;}
.main #intro h2 {font-family: 'SBAggro';}
.main #intro h2 span.line {position: relative; }
.main #intro h2 span.line:after {position: absolute; left: 0; bottom: -12px; width: 0%; height: 1rem; background: var(--pointcolor); content: ""; transition: 1.2s; background: url("/img/main/underline.png"); background-repeat: no-repeat; background-size: contain; background-position: center;}
.main #intro h2.aos-animate span:after {width: 100%;}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media(max-width: 1550px) {
    .main #intro {padding-top: calc(130px + 8rem); margin-top: -8rem;}
    .main #intro .bg_cir {width: 80%;}
}

@media(max-width: 990px) {
    .main #intro {padding-top: calc(100px + 6rem); margin-top: -6rem;}
    .main #intro .bg_cir {width: 120%; margin-top: -30rem;}
}

@media(max-width: 768px) {
    .main #intro {padding-top: calc(80px + 4rem); margin-top: -4rem;}
    .main #intro .bg_cir {margin-top: -15rem;}
}

@media(max-width:580px) {
    .main #intro .bg_cir {margin-top: 0;}
}

@media(max-width:500px) {
    .main #intro .bg_cir {margin-top: 5rem;}
}

/* 스페셜 */
.main #special .swiper-slide {opacity: 0.5; transition: opacity 0.3s;}
.main #special .swiper-slide-active {opacity: 1;}
.main #special .swiper-slide > div {max-width: 77.5rem; width: 90%; margin: 0 auto 4.375rem; display: flex; align-items: center; justify-content: flex-end;}
.main #special .txtbox {position: absolute; left: -5%; top: 50%; transform: translateY(-50%); z-index: 1; background: #fff; padding: 1.5rem 4rem; border-radius: 3.75rem 1.875rem 3.75rem 1.875rem; border: 1px solid var(--pointcolor); max-width: 30rem; width: 100%; height: 22rem; display: flex; align-items: center; justify-content: center;}
.main #special .txtbox > div {width: 100%;}
.main #special .imgbox {max-width: 58.5rem; width: 90%; border-radius: 1.875rem; overflow: hidden; float: right;}

.main #special .swiper-pagination {position: initial;}
.main #special .swiper-pagination > .swiper-pagination-bullet {width: fit-content; height: auto; background: transparent; border-radius: 0; transition: 0.3s;  color: #999999; opacity: 1; margin: 0 3.5rem; position: relative;}
.main #special .swiper-pagination > .swiper-pagination-bullet:after {position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--pointcolor); content: ""; transition: 0.3s;} 
.main #special .swiper-pagination > .swiper-pagination-bullet-active {color: var(--pointcolor); font-weight: 700;}
.main #special .swiper-pagination > .swiper-pagination-bullet-active:after {width: 100%;}

@media(max-width:1440px) {
    .main #special .txtbox  {height: 19rem;}
}

@media(max-width: 1240px) {
    .main #special .txtbox  {left: 0;}
}

@media(max-width:990px) {
    .main #special .imgbox {width: 80%;}
}

@media(max-width:768px) {
    .main #special .swiper-slide > div {display: block; width: 80%; margin: 0 auto 0;}
    .main #special .txtbox {position: relative; top: 0; transform: translateY(-5rem); max-width: 100%; width: 80%; height: 26.25rem;}
    .main #special .imgbox {width: 80%;}
}

@media(max-width:500px) {
    .main #special h2.dot.text-center {width: min-content;}
    .main #special h2.dot:after {left: 2px;}
    .main #special .swiper-pagination > .swiper-pagination-bullet {margin: 0 2.5rem;}
    .main #special .txtbox {width: 85%; height: 24rem;}
    .main #special .txtbox img {width: 35px;}
    .main #special .imgbox {width: 85%;}
}

@media(max-width:420px) {
    .main #special .swiper-pagination > .swiper-pagination-bullet {margin: 0 1.5rem;}
    .main #special .txtbox br {display: none !important;}
}

/* 전후사진 */
.main #beforeAfter {border-radius: 3.75rem; background-image: url("/img/main/bg_logo.png"); background-repeat: no-repeat; background-position: 0 2.5rem; background-size: 30.75rem;}

.main #beforeAfter .tabbox {display: flex; gap: 5rem;}
.main #beforeAfter ul li {display: flex; gap: .5rem; color: var(--gray); margin-top: 2.5rem; cursor: pointer;}
.main #beforeAfter ul li.current {color: var(--pointcolor); font-weight: 700;}
.main #beforeAfter ul li.current p {position: relative;}
.main #beforeAfter ul li p:after {position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--pointcolor); content: ""; transition: 0.8s;}
.main #beforeAfter ul li.current p:after {width: 100%;}

.main #beforeAfter .tab-content {display: none;}
.main #beforeAfter .tab-content.current {display: block;}
.main #beforeAfter .swiper-slide {cursor: pointer;}

.main #beforeAfter .box .txt {width: 100%; text-align: center; padding: 1rem; color: #fff; font-weight: 700;}
.main #beforeAfter .box.bf .txt {background: #000;}
.main #beforeAfter .box.af .txt {background: var(--pointcolor);}

.main #beforeAfter .pgWrap {padding-right: 15%; overflow: hidden;} 

@media(max-width:1580px) {
    .main #beforeAfter .pgWrap {padding-right: 5%;}   
}

@media(max-width:1440px) {
    .main #beforeAfter .cont_box {margin-top: 5rem;}
    .main #beforeAfter .cont_box > .flex {flex-direction: column; gap: 6.25rem;}
    .main #beforeAfter .cont_box > .flex ::-webkit-scrollbar {display: none;}
    .main #beforeAfter .tabbox {width: 100%; overflow-x: scroll; gap: 2rem;}
    .main #beforeAfter .tabbox ul {display: flex; gap: 2rem;}
    .main #beforeAfter .tabbox ul li {width: max-content; margin-top: 0;}
    .main #beforeAfter .tabbox ul li br {display: none;}
    .main #beforeAfter .slidebox {width: 100%;}
    .main #beforeAfter .moreBtn {margin: 5rem auto 0;}
}

/* 리뷰 */
.main #review {background-image: url("/img/main/review_bg.jpg"); background-size: cover; background-position: center;}
.main #review .swiper-wrapper {padding-top: 5rem;}
.main #review .swiper-slide {width: 20.5rem; transition: transform 0.3s;  box-sizing: border-box; border-radius: 1.875rem; overflow: hidden; border: 2px solid #101010; cursor: pointer;}
.main #review .swiper-slide-active {border: 2px solid var(--pointcolor); transform: translateY(-5rem);}

.main #review .pgWrap .swiper-button-next {filter: brightness(0) invert(1);}

@media(max-width:768px) {
    .main #review .swiper-slide {width: 22.5rem;}
}

@media(max-width:500px) {
    .main #review h2.dot:after {left: 8px;}
}


/* 오시는길 */
.root_daum_roughmap .cont .section.lst,
.root_daum_roughmap .wrap_controllers {display: none;}
#contact .mapbox .root_daum_roughmap {width: 100%; height: 100%;}
#contact .root_daum_roughmap .wrap_map {height: 100%;}

#contact .flexList {--y-gap: 5rem;}

#contact .mapbox {position: relative; z-index: 1;}

#contact .txtbox {padding-left: 8rem;}
#contact .snsBtn {display: flex; gap: 2rem;}
#contact .snsBtn a {display: flex; align-items: center; gap: 1rem; padding: 1rem 2rem; border: 1px solid #999999; border-radius: 10px; color: #fff; width: fit-content; transition: 0.3s;}
#contact .snsBtn a:hover {color: var(--pointcolor); border-color: var(--pointcolor);}
#contact p.point {padding: 0.25rem 1rem; border-radius: 100px; background: var(--pointcolor); color: #fff; width: fit-content;}
#contact .timetable ul {color: #999999;}
#contact .timetable li {display: flex; align-items: baseline; gap: 1.5rem; margin-top: 1.125rem;}
#contact .timetable li:first-child {margin-top: 1.5rem;}
#contact .timetable p.day {width: 4.2rem; text-align: justify; height: 1.5625rem;}
#contact .timetable p.day:after {content: ''; display: inline-block; width: 100%;}
#contact .timetable span img {display: inline;}

@media(max-width:990px) {
    #contact .mapbox .root_daum_roughmap {height: 30rem;}
    #contact .txtbox  {padding-left: 0;}
}

@media(max-width: 768px) {
    #contact .timetable p.day {width: 6rem;}
}

@media(max-width:500px) {
    #contact .timetable p.day {margin-bottom: 1.125rem; width: 4.9rem;}
}

/* -----------하단공통----------- */

@media(max-width:768px) {
    .common .container {width: 85%;}
    .common .section-right {padding-right: 7.5%;}
    .common .section-left {padding-left: 7.5%;}
    .common.font-20 {font-size: 1.750rem;}
    .common .font-32 {font-size: 2.50rem;}

}

@media(max-width:500px) {
    .common {margin-top: 66px;}
    .common.font-20 {font-size: 1.5rem;}
    .common .font-60 {font-size: 3.250rem;}
    .common .font-48 {font-size: 2.50rem;}
}


/* 하단 게시판모음 */
#notice {width: 95%; margin: auto; background-image: url("/img/main/notice_bg.jpg"); background-repeat: no-repeat; background-size: cover; border-radius: 3.75rem;} 
#notice .flexList {--y-gap: 3.5rem;}
#notice .tit span {opacity: 0.3;}
#notice .tit div {display: flex; justify-content: space-between; align-items: center;}
#notice .tit div a {margin-right: 1rem; transition: 0.3s;}
#notice .tit div a:hover {transform: rotate(90deg);}

#notice .cont li {background: #fff; padding: 1rem 3rem; width: 100%; border-radius: 1rem; display: flex; align-items: baseline; transition: 0.3s; box-sizing: border-box; border: 2px solid #fff; cursor: pointer; margin-top: 1.5rem;}
#notice .cont li:first-child {margin-top: 0;}
#notice .cont li:hover {border: 2px solid var(--pointcolor);}
#notice .cont li .day {color: #101010; font-weight: 700; width: 7rem;}
#notice .cont li .subj {color: var(--gray); width: calc(100% - 7rem); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

@media(max-width:1680px) {
    #notice .container {width: 93.5%;}
}

@media(max-width:990px) {
    #notice {background-image: url("/img/main/notice_bgm.jpg");}
    #notice .cont {margin-top: 2rem;}
    #notice .cont li {margin-top: 2rem;}
}

@media(max-width:768px) {
    #notice {width: 92.5%;}
    #notice .container {width: 90%;}
    #notice .cont li .day {width: 10rem;}
    #notice .cont li .subj {width: calc(100% - 10rem);}
}

@media(max-width:500px) {
    #notice .cont li .day {width: 8rem;}
    #notice .cont li .subj {width: calc(100% - 8rem);}
}

/* 하단 롤링 */
#partnership {padding: 90px 0; background: #101010;}
#partnership .swiper-wrapper {align-items: center; transition-timing-function: linear !important;}
#partnership .swiper-slide {width: 139px;}
#partnership .section-left {padding-left : 3.5%;}

@media(min-width:1981px) {
    #partnership .swiper-slide {width: 200px;}
}

@media(max-width: 1680px) {
    #partnership .section-left {padding-left : 6.5%;}
}

@media(max-width:1550px) {
    #partnership {padding: 70px 0;}
}

@media(max-width:990px) {
    #partnership {padding: 50px 0;}
}

@media(max-width:768px) {
    #partnership {padding: 30px 0;}
}

/* -------특별함----------- */
.sub #philosophy .bg {position: absolute; left: 0; top: 0; width: 100%; mix-blend-mode: color-dodge;}