#main{overflow: hidden;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{display: none;}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{display: none;}
/* header */
.header{position: fixed; top: 0; left: 0; z-index: 97; width: 100%; border-bottom: 1px solid #bfb4a2;}
.header .logo{width: 15%; text-align: center; display: flex; align-items: center; justify-content: start;}
.header .menu{width: 85%;}
.header .menu .depth01{padding: 30px 0; display: block; color: #000; text-align: center; transition: all 0.3s;}
.header .menu .depth01:hover{font-weight: bold;}
.header .menu_btn .on{display: none;}

.header .menu ul li{width: calc(100% / 7);}
#header.on .header{background-color: #fff; transition: all 0.5s; border-bottom: 0; box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);}
#header.on .header .menu .depth01{color: #000;}
#header.on .header .menu .depth01:hover{font-weight: bold;}
#header.on .header .logo .on{display: block;}
#header.on .header .logo .off{display: none;}
#header.on .header .menu_btn .on{display: block;}
#header.on .header .menu_btn .off{display: none;}
#header .header .menu_close{display: none;}
#header .header .menu_btn{display: none;}

.tit h2{position: relative; display: inline-block;}
.tit h2:after{display: block; content: ''; width: 12px; height: 12px; position: absolute; top: -5px; left: -5px; background-color: #ffba00; border-radius: 50%;}

#special{background-image: url(/img/main_new/sepcial_logo.png); background-repeat: no-repeat; background-position: 5% bottom;}
#special .specialSwiper{margin-left: 5%;}
#special .specialSwiper .txt span{display: inline-block; width: 20px; height: 3px; background-color: #ffba00; margin-bottom: 8px;}
#special .tit .arrow_btn{position: relative; margin-top: 200px;}
#special .swiper-pagination{text-align: left; left: 30px; bottom: -22px; font-size: 18px; font-weight: 600; color: #dfdfdf; z-index: -1;}
#special .swiper-pagination-current{color: #ffba00; padding-right: 10px;}
#special .swiper-pagination-total{padding-left: 10px;}
#special .tit .swiper-button-prev, .swiper-rtl .swiper-button-next{background-image: url(/img/main_new/special_L.png); width: 13px; height: 21px; left: 0;  top: 0; margin-top: 0; z-index: 1;}
#special .tit .swiper-button-next, .swiper-rtl .swiper-button-prev{background-image: url(/img/main_new/special_R.png); width: 13px; height: 21px; left: 90px; right: auto; top: 0; margin-top: 0; z-index: 1;}
#special .swiper-pagination-progressbar{width: 72%; right: 0; left: auto;}
#special .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: #ffba00;}

.point{background: linear-gradient(#fff2d0 15%, 40%, #fff 90%);}
#point .p_txt span{ box-shadow: inset 0 -18px 0 #fff2d0;}
#point .point-box{--x-gap: 0rem;--y-gap: 0rem;}
#point .point-box .txt span{display: inline-block; width: 20px; height: 3px; background-color: #ffba00; margin-right: 5px; margin-bottom: 5px;}

#doctor .dp-box{background-color: #fff4d6; padding: 10px 30px; border-radius: 100px;}

#subject{background-image: url(/img/main_new/subject_bg.jpg); background-repeat: no-repeat; background-size: cover;}
#subject .box{position: relative;}
#subject .box .txt{position: absolute; bottom: 20px; padding: 0 30px;}

#equipment .box .box-b{position: relative; transition: all 0.3s;}
#equipment .box:hover .box-b{border-radius: 50px; overflow: hidden;}
#equipment .box:hover .box-b:after{visibility: visible; content:""; width: 100%; height: 100%; background-color: rgba(0,0,0,0.75); position: absolute; top: 0; left: 0; z-index: 1;}
#equipment .box .txt{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; visibility: hidden;}
#equipment .box:hover .txt{visibility: visible;}
#equipment .flexList{--x-gap: 0rem; --y-gap: 0rem;}
#equipment .box{margin-top: -70px;}
#equipment .box:nth-child(1){margin-top: 0;}
#equipment .box .t_tit{padding-left: 30px;}
#equipment .box .t_tit span{display: inline-block; width: 20px; height: 3px; background-color: #ffba00; margin-right: 5px; margin-bottom: 8px;}
#equipment .box .box-b .txt{width: 100%;}

#interior .swiper-slide{position: relative;}
#interior .swiper-slide:after{display: block; content:""; width: 100%; height: 100%; background-color: rgba(255,255,255,0.8); position: absolute; top: 0; left: 0; z-index: 2;}
#interior .swiper-slide-active:after{display: none;}
#interior .txt{position: absolute; right: 0; bottom: 0; background-color: rgba(0,0,0,0.8);  height: 55px; line-height: 55px; width: 280px; padding: 0 20px;} 
#interior .txt p.color-white{padding-left: 20px;}
#interior .txt .swiper-button-prev, .swiper-rtl .swiper-button-next{background-image: url(/img/main_new/interior_L.jpg); width: 55px; height: 55px; left: auto; right: 55px;  top: 0; margin-top: 0; z-index: 1;}
#interior .txt .swiper-button-next, .swiper-rtl .swiper-button-prev{background-image: url(/img/main_new/interior_R.jpg); width: 55px; height: 55px; right: 0; top: 0; margin-top: 0; z-index: 1;}


.root_daum_roughmap .wrap_controllers{display: none;}
#directions .flexList{--x-gap: 6rem}
#directions .map{width: 100%; height: 1000px;}
#directions .border-top{border-top: 1px solid #f3f3f3; width: 70%;}

.tel a{color: #ff8e71}
footer a{color: #fff}
footer ul li a{cursor: pointer;}

.non_b_box{background-color: #fff; border-radius: 30px; width: 80%; height: 80vh; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow-y: scroll; z-index: 99; display: none;} 
.non_b_box .non_close{position: fixed; top: 2%; right: 2%; cursor: pointer;}
.sp_bg{opacity: 1;
    -moz-opacity: 1;
    background-color: #000c;
    height: 100%;
    left: 0;
    position: fixed;
    text-align: left;
    top: 0;
    width: 100%;
    z-index: 98;
    display: none;}
@media(max-width: 1400px){
    #directions .map{height: 900px;}
    .tb_wrap{width: 90%; margin: auto; overflow-x: scroll;}
    .tb_wrap table{width: 100%;}
}
@media(max-width: 1240px){
    #directions .map{height: 800px;}

    #subject .flex-between{flex-direction: column;}
    #subject .width20{width: 100%}
    #subject .width75{width: 100%; margin-top: 50px;}

  
}
@media(max-width: 990px){
    .font-16 {font-size: 1.125rem;}
    .font-18 {font-size: 1.375rem;}
    .font-30 {font-size: 2.250rem;;}

    #header.h_on .header{height: 100%; background-image: url(/img/main_new/m_header_bg.jpg); background-repeat: no-repeat; background-size: cover; overflow-y: scroll; background-position: bottom;}
    .header .logo{padding: 20px 0; width: 25%;}
    .header .menu{display: none;}
    .header .menu.on{display: block;}

    #header .header .menu_btn{display: block;}
    #header.h_on .header .menu_btn{display: none;}
    #header.h_on .header .menu_close{display: block;}

    #header.h_on .menu{width: 100%;}
    #header .header .flex-between{flex-wrap: wrap;}
    .header .menu ul li{width: 100%;}
    .header .menu .depth01{text-align: left; font-size: 3.125rem; font-weight: bold; padding: 20px 0;}
    #header.h_on.on .header .logo .on{display: none;}
    #header.h_on.on .header .logo .off{display: block;}

    .header .menu .depth01 span{ position: relative; transition: all 0.3s;}
    .header .menu .depth01 span:after{display:block;content: "";clear: both;width: 30px;height: 30px;background-color: #fff;transition: .5s all ease; position: absolute; top: -15px; right: -10px; border-radius: 100%; opacity: 0;}
    .header .menu .depth01:hover span:after{width: 30px;height: 30px;  opacity: 0.2;}
    .header .menu b.visible-sm{display: inline-block !important;}
    .header .menu ul li{border-bottom: 2px solid #ffbeac;}

    #special{background-image: none;}
    #special .tit{width: 95%; display: flex; justify-content: space-between;}
    #special .flex-between{flex-direction: column;}
    #special .s_box{margin-top: 50px; width: 100%;}
    #special .specialSwiper{margin-left: 0;}
    #special .tit .arrow_btn{margin-top: 0; width: 20%;}
    #special .swiper-pagination-progressbar{width: 100%}
    #special .swiper-pagination{bottom: 0; left: auto; text-align: right; right: 28px;}
    #special .tit .swiper-button-prev, .swiper-rtl .swiper-button-next{top: auto; bottom: 0; left: auto; right: 90px;}
    #special .tit .swiper-button-next, .swiper-rtl .swiper-button-prev{top: auto; bottom: 0; left: auto; right: 0;}

    #point .tit h2:after{left: 22px;}
    #point #doctor .txt{padding-left: 5%;}
    #point #doctor .box img{padding: 0 5%;}
    #doctor .tit h2:after{left: -5px;}

    #subject .width75{width: 80%; margin-left: auto; margin-right: auto;}

  

    #equipment .flex-between{flex-direction: column;}
    #equipment .width20{width: 100%;}
    #equipment .width65{width: 100%; margin-top: 50px;}
    #equipment .box:hover .box-b{border-radius: 0; overflow: hidden;}
    #equipment .box:hover .box-b:after{visibility: hidden;}
    #equipment .box:hover .txt{visibility: visible; color: #000;}
    #equipment .box .txt{position: relative; top: auto; left: auto; transform: none; z-index: 2; visibility: visible; color: #000; background-color: #fff4d6;; padding: 20px 10px;}
    #equipment .t_tit p{display: flex;}
    #equipment .t_tit span{margin-top: 10px;}

    #directions .border-top{width: 100%;}
    #directions .map{height: 400px;}
    #directions .info{width: 90%; margin-left: auto; margin-right: auto; margin-bottom: 80px; margin-top: 50px;}
    
    footer .flex-between{flex-direction: column; text-align: center;}
   
    footer .f_info{order: 2; margin-top: 50px;}
    footer .f_info .a_box{display: inline-block;}
    footer .f_logo{order: 1;}
    footer .f_logo img{max-width: 80%;}

    #point.container .point-box .txt {
        padding-left: 5%;
    }
   
}
@media(max-width: 768px){
    #point.container{width: 100%;}
    #point.container .point-box .box:nth-child(1){order: 2; margin-top: 30px;}
    #point.container .point-box .box:nth-child(2){order: 1; padding-left: 5%;}
    #point.container .point-box .box:nth-child(3){order: 3; padding-right: 5%; margin-top: 50px;}
    #point.container .point-box .box:nth-child(4){order: 4; margin-top: 30px;} 
    #point.container .point-box .box:nth-child(5){order: 6; margin-top: 30px;}
    #point.container .point-box .box:nth-child(6){order: 5; padding-left: 5%; margin-top: 50px;}

    #subject .box .txt{position: absolute; left: 40%; bottom: auto; top: 50%; transform: translateY(-50%); padding-right: 20px;}
    #subject .width75{width: 100%}

    #equipment .box .t_tit {
        padding-left: 10px;
    }
}

@media(max-width: 500px){
    #interior .txt{width: 250px;}

    .tb_wrap table{width: 600px;}

    #subject .box .txt{ left: 30%;}
}

@media(max-width: 400px){
    #subject .box .txt{ left: 25%;}
}