@media (max-width: 1920px) {
    .main-mid-banner .mid-banner-area {
        padding: 305px 0 75px 15%;
    }
    .main-mid-banner.bt .mid-banner-area {
        padding: 305px 0 200px 15%;
    }
    .main-mid-banner .mid-banner-area .text-area {
        width: 60%;
    }
    
    .mid-slide-button-prev {
        left: 15%;
    }
    .mid-slide-button-next {
        left: 19.3%;
    }
}

@media (max-width: 1800px) {
    .mid-slide-button-next {
        left: 20.3%;
    }
}

@media (max-width: 1400px) {
    .container {
        max-width: 900px;
    }
    header .nav-area .logo {
        width: 180px;
    }
    .nav-tab-l {
        width: 60%;
    }
    .nav-tab-r {
        width: 12%;
    }
    .main-banner-slide ul li .banner-cont,
    .pagination-area,
    .main-sub-nav {
        max-width: 900px;
    }
    .main-banner-slide ul li .banner-cont .text-area {
        width: 55%;
    }
    .main-banner-slide .top-text {
        font-size: 24px;
    }
    .main-banner-slide .main-text {
        padding: 20px 0;
        font-size: 40px;
    }
    .main-banner-slide .bt-text {
        font-size: 22px;
    }
    .main-banner-slide ul li .banner-cont .video-area {
        width: 45%;
    }
    .main-mid-banner .mid-banner-area .text-area .mid-text, 
    .main-doc-area .doc-top-text .mid-text {
        padding: 20px 0 30px;
        font-size: 42px;
    }
    .mid-slide-button-next,
    .mid-slide-button-prev {
        width: 50px;
        top: 66%;
    }
    .main-mid-banner .mid-banner-area .mid-slide-area .text-area .cont-top-text {
        font-size: 24px;
    }
    .main-mid-banner .mid-banner-area .mid-slide-area .text-area .cont-main-text {
        font-size: 52px;
    }
    .main-mid-banner .mid-banner-area .mid-slide-area .img-area .icon-img {
        width: 120px;
        left: 20px;
        bottom: 20px;
    }
    .main-mid-banner .mid-banner-area .mid-slide-area .img-area .icon-img img {
        width: 100%;
        display: block;
    }
    .main-doc-area .doc-top-text {
        width: 100%;
    }
    .main-doc-bt .img-area .text-wrap .left-text-wrap .sub-text {
        margin: 20px 0 30px;
        font-size: 22px;
    }
    .main-doc-bt .img-area .text-wrap .left-text-wrap h1 {
        font-size: 40px;
    }
    .main-doc-bt .img-area .insta-area p {
        font-size: 18px;
        line-height: 2.7;
    }
    .main-mid-banner.bt .mid-slide-area .img-area i {
        font-size: 30px;
        top: 20px;
        right: 20px;
    }
    .main-mid-banner.bt .mid-slide-area .img-area .text-area {
        top: 40px;
    }
    .main-mid-banner.bt .mid-slide-area .img-area .text-area .cont-top-text {
        font-size: 24px;
    }
    .main-mid-banner.bt .mid-slide-area .img-area .text-area .cont-main-text {
        font-size: 40px;
    }
    .main-review-area .review-area .text-area h1 {
        padding: 20px 0 30px;
        font-size: 40px;
    }
    .main-review-area .review-area .text-area .sub-text,
    .main-info-area .top-right-area .info-sns-area p {
        font-size: 18px;
    }
    .main-info-area {
        padding: 60px 0 45px;
    }
    .main-info-area .top-left-area h1,
    .main-info-area .top-mid-area a {
        font-size: 40px;
    }
    .main-info-area .top-mid-area .mid-day-area {
        padding: 25px 0 10px;
        font-size: 18px;
    }
    .main-info-area .mid-bt-area {
        padding-top: 20px;
    }
    .main-info-area .mid-bt-area p {
        font-size: 14px;
    }
    .main-info-area .top-right-area .info-sns-area p.small {
        padding: 10px 0 28px;
        font-size: 12px;
    }
    .main-info-area .top-right-area .info-sns-area .sns-img-area>div {
        width: 28px;
        height: 28px;
        margin-right: 15px;
    }
    .main-info-area .info-bt-area .info-main-img .text-area {
        top: 40px;
    }
    .main-info-area .info-bt-area .info-main-img .text-area h1 {
        font-size: 40px;
    }
}

@media (max-width: 1024px) {
    header.active .main-top-banner {
        opacity: 1;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        transition: none;
    }
    .nav-area {
        padding: 25px 15px;
    }
    header.active .nav-area {
        padding: 10px 15px;
        top: 45px;
        box-shadow: 0px 4px 5px 1px rgba(0, 0, 0, 5%);
    }
    .nav-tab-l {
        display: none;
    }
    .nav-tab-r li:nth-child(1),
    .nav-tab-r li:nth-child(2),
    .nav-tab-r li:nth-child(3) {
        opacity: 0;
    } 
    .menu .ham li {
        opacity: 1;
    }
    .ham-list .list-menu {
        width: 60vw;
        padding: 120px 80px 80px 80px;
    }
    .menu .ham {
        width: 40px;
        height: 27px;
    }
    .menu .ham li {
        width: 40px;
    }
    .q-wrap {
        right: 15px;
    }
    .q-db-area {
        display: none;
    }
    .main-banner-slide ul li .banner-cont, 
    .pagination-area, 
    .main-sub-nav,
    .footer-wrap {
        max-width: 700px;
    }
    .main-banner-slide ul li .banner-cont {
        flex-wrap: wrap;
        justify-content: center;
    }
    .main-banner-slide ul li .banner-cont .text-area {
        width: 100%;
        text-align: center;
        padding-bottom: 40px;
    }
    .main-banner-slide ul li .banner-cont .video-area {
        width: 100%;
    }
    .main-banner-slide ul li .banner-cont .video-area img {
        width: 80%;
        display: block;
    }
    .scroll-side-img {
        top: -140%;
    }
    .pagination-area {
        top: 74%;
    }
    .main-mid-banner .mid-banner-area {
        flex-wrap: wrap;
        text-align: center;
    }
    .main-mid-banner .mid-banner-area {
        padding: 305px 15px 75px;
    }
    .main-mid-banner.bt .mid-banner-area {
        padding: 170px 15px 75px;
    }
    .main-mid-banner .mid-banner-area .text-area {
        width: 100%;
    }
    .main-mid-banner .mid-banner-area .text-area .bt-text {
        padding-bottom: 40px;
    }
    .mid-slide-button-next, 
    .mid-slide-button-prev {
        display: none;
    }
    .main-doc-area {
        padding-top: 80px;
    }
    .main-doc-area .doc-top-text {
        text-align: center;
    }
    .main-doc-area .doc-bt-area a {
        margin: 40px auto 0;
    }
    .main-doc-bt .img-area {
        height: 500px;
    }
    .main-doc-bt .img-area img {
        height: 100%;
        object-fit: cover;
        border-radius: 30px;
        box-shadow: 0px 2px 5px 3px rgba(0, 0, 0, 15%);
    }
    .main-doc-bt .img-area .text-wrap {
        padding: 45px 40px;
    }
    .main-doc-bt .img-area .text-wrap .left-text-wrap .top-text {
        font-size: 16px;
    }
    .main-doc-bt .img-area .text-wrap .left-text-wrap .sub-text {
        margin: 10px 0 20px;
        font-size: 18px;
    }
    .main-doc-bt .img-area .text-wrap .left-text-wrap h1 {
        font-size: 28px;
    }
    .main-doc-bt .img-area .insta-area {
        margin: 40px 0 50px;
    }
    .main-doc-bt .img-area .insta-area p {
        line-height: 3;
    }
    .main-doc-bt .img-area .text-wrap .btn-area a {
        width: 200px;
        height: 40px;
        font-size: 14px;
    }
    .main-doc-bt .img-area .text-wrap .right-text-wrap .doc-name-text {
        font-size: 18px;
    }
    .main-doc-bt .img-area .text-wrap .right-text-wrap .doc-name-text p.name span {
        font-size: 40px;
    }
    .main-doc-bt .img-area .text-wrap .right-text-wrap .arrow {
        padding: 82px 12px;
    }
    .main-mid-banner.bt .mid-slide-area .img-area .text-area {
        top: 40px;
        text-align: left;
    }
    .main-mid-banner.bt .mid-slide-area .img-area .text-area .cont-top-text {
        font-size: 20px;
    }
    .main-mid-banner.bt .mid-slide-area .img-area .text-area .cont-main-text {
        font-size: 28px;
    }
    .main-info-area .info-top-area {
        padding: 0 15px 40px;
    }
    .main-info-area .top-left-area .top-text {
        font-size: 24px;
    }
    .main-info-area .info-top-area>div:nth-child(1) {
        width: 28%;
    }
    .main-info-area .info-top-area>div:nth-child(2),
    .main-info-area .info-top-area>div:nth-child(3) {
        width: 34%;
    }
    .main-info-area .info-bt-area .info-main-img .text-area .top-text {
        font-size: 24px;
    }
    .main-info-area .info-bt-area .info-main-img .text-area h1 {
        font-size: 32px;
    }
    .footer-logo {
        width: 100px;
    }
    .footer-gnb {
        width: 60%;
    }
    .footer-gnb .top-area {
        font-size: 14px;
    }
    .footer-gnb .top-area li::after {
        height: 10px;
        margin-left: 7px;
        top: 4px;
    }
    .footer-gnb .bt-area, 
    .footer-gnb .bt-area a {
        font-size: 12px;
    }
    .footer-gnb .bt-area li p {
        margin-right: 10px;
    }
    .footer-gnb .bt-area li p::after {
        height: 10px;
        margin-left: 5px;
        top: 2px;
    }
    .footer-sns {
        width: 15%;
    }
}

@media (max-width: 768px) {
    .none-768 {
        display: none;
    }
    .block-768 {
        display: block;
    }
    .banner-area .left-b {
        height: 20px;
        width: 50px;
        margin-right: 10px;
        font-size: 12px;
    }
    .banner-area .right-b {
        font-size: 14px;
    }
    .banner-area .right-b p {
        display: flex;
        align-items: center;
    }
    .ham-list .list-menu {
        width: 80vw;
        padding: 100px 20px;
    }
    .ham-menu-area .ham-menu-list {
        padding-bottom: 15px;
        font-size: 20px;
    }
    .ham-time-area .mid-day-area p {
        font-size: 16px;
    }
    .ham-time-area .mid-bt-area {
        font-size: 14px;
    }
    .ham-num-area {
        font-size: 30px;
    }
    .main-banner-slide .top-text {
        font-size: 22px;
    }
    .main-banner-slide .main-text {
        padding: 10px 0;
    }
    .main-banner-slide .bt-text {
        font-size: 18px;
    }
    .main-banner-slide ul li .banner-cont .video-area img {
        margin: 0 auto;
    }
    .main-slide-pagination {
        justify-content: center;
    }
    .scroll-side-img {
        top: -86%;
    }
    .main-sub-nav .logo-text,
    .sub-nav-area {
        display: none;
    }
    .main-mid-banner .mid-banner-area {
        padding: 130px 15px 130px;
    }
    .main-mid-banner .mid-banner-area .text-area .top-text, 
    .main-doc-area .doc-top-text .top-text {
        font-size: 18px;
    }
    .main-mid-banner .mid-banner-area .text-area .mid-text, 
    .main-doc-area .doc-top-text .mid-text {
        font-size: 30px;
    }
    .main-mid-banner .mid-banner-area .text-area .bt-text, 
    .main-doc-area .doc-top-text .bt-text {
        font-size: 12px;
        line-height: 1.3;
    }
    .main-mid-banner .mid-banner-area .mid-slide-area .text-area {
        padding: 0 40px;
        text-align: left;
    }
    .main-mid-banner .mid-banner-area .mid-slide-area .text-area .cont-top-text,
    .main-mid-banner .mid-banner-area .mid-slide-area .text-area .cont-main-text span {
        font-size: 18px;
    }
    .main-mid-banner .mid-banner-area .mid-slide-area .text-area .cont-main-text {
        font-size: 38px;
    }
    .main-mid-banner.bt .mid-slide-area .img-area .text-area {
        padding: 0;
        top: 20px;
        left: 20px;
    }
    .main-mid-banner.bt .mid-slide-area .img-area i {
        font-size: 20px;
    }
    .main-mid-banner.bt .mid-slide-area .img-area .text-area .cont-top-text {
        font-size: 14px;
    }
    .main-mid-banner.bt .mid-slide-area .img-area .text-area .cont-main-text {
        font-size: 22px;
        line-height: 1.6;
    }
    .main-mid-banner.bt .mid-banner-area {
        padding: 130px 15px 75px;
    }
    .main-mid-banner.notice .mid-slide-area .img-area p {
        width: 80px;
        height: 26px;
        font-size: 12px;
        top: 10px;
        right: 10px;
    }
    .pagination-area {
        top: 80%;
    }
    .main-info-area .info-top-area {
        flex-wrap: wrap;
    }
    .main-info-area .info-top-area>div {
        width: 100%!important;
    }
    .main-info-area .top-left-area .top-text {
        font-size: 18px;
        padding-bottom: 20px;
    }
    .main-info-area .top-left-area h1 {
        padding-bottom: 10px;
    }
    .main-info-area .top-left-area h1, 
    .main-info-area .top-mid-area a {
        font-size: 28px;
    }
    .main-info-area .top-mid-area>p {
        padding-bottom: 10px;
        font-size: 16px;
    }
    .main-info-area .top-mid-area .mid-day-area {
        padding: 15px 0 10px;
        font-size: 14px;
    }
    .main-info-area .top-mid-area .day {
        margin-bottom: 5px;
    }
    .main-info-area .mid-bt-area {
        padding-bottom: 20px;
    }
    .main-info-area .mid-bt-area p {
        font-size: 12px;
    }
    .main-info-area .top-right-area .q-area li {
        width: 30%;
    }
    .main-info-area .top-right-area .info-sns-area p.small {
        padding: 10px 0;
    }
    .main-review-area .review-area .text-area,
    .main-info-area .info-bt-area .info-main-img .text-area {
        top: 20px;
        left: 20px;
    }
    .main-review-area .review-area .text-area .top-text,
    .main-info-area .info-bt-area .info-main-img .text-area .top-text {
        font-size: 14px;
    }
    .main-review-area .review-area .text-area h1,
    .main-info-area .info-bt-area .info-main-img .text-area h1 {
        padding: 10px 0 15px;
        font-size: 20px;
    }
    .main-review-area .review-area .text-area .sub-text, 
    .main-info-area .top-right-area .info-sns-area p {
        font-size: 12px;
    }
    .main-review-area .review-area .btn-area,
    .main-info-area .info-bt-area .info-main-img .btn-area {
        bottom: 20px;
        left: 20px;
    }
    .main-review-area .review-area .btn-area a,
    .main-info-area .info-bt-area .info-main-img .btn-area a {
        width: 150px;
        height: 30px;
        padding: 0 15px;
        font-size: 12px;
    }
    .main-info-area .info-bt-area .info-main-img .text-area .top-text  {
        padding-bottom: 0;
    }
    .footer-wrap {
        height: 300px;
        padding: 50px 15px;
        flex-wrap: wrap;
    }
    .footer-logo {
        height: 25px;
    }
    .footer-gnb {
        width: 100%;
        height: 70%;
        padding-top: 25px;
    }
    .footer-gnb .top-area {
        margin-bottom: 10px;
        font-size: 12px;
    }
    .footer-gnb .bt-area li {
        flex-wrap: wrap;
    }
    .footer-gnb .bt-area li:first-child p::after {
        display: none;
    }
    .footer-sns {
        width: 30%;
    }
    .main-doc-area .doc-bt-area a {
        width: 150px;
        height: 30px;
        margin: 20px auto 0;
        padding: 0 10px;
        font-size: 12px;
    }
    .main-doc-area .doc-img-area {
        height: 220px;
    }
    .main-doc-area .doc-text-img {
        height: 50px;
    }
    .main-doc-bt .img-area .text-wrap {
        height: 100%;
        padding: 15px 23px 130px;
        flex-wrap: wrap;
    }
    .main-doc-bt .img-area .text-wrap .left-text-wrap .sub-text {
        margin: 5px 0 15px;
        font-size: 14px;
    }
    .main-doc-bt .img-area .text-wrap .left-text-wrap h1 {
        font-size: 20px;
    }
    .main-doc-bt .img-area .insta-area p {
        font-size: 12px;
    }
    .main-doc-bt .img-area .insta-area p span {
        padding: 5px 10px;
    }
    .main-doc-bt .img-area .text-wrap .btn-area {
        display: none;
    }
    .main-doc-bt .img-area .text-wrap .btn-area a {
        width: 150px;
        height: 30px;
        padding: 0 15px;
        font-size: 12px;
    }
    .main-doc-bt .img-area .text-wrap .right-text-wrap {
        position: absolute;
        right: 10px;
        bottom: 40px;
    }
    .main-doc-bt .img-area .text-wrap .right-text-wrap .arrow {
        padding: 40px 10px;
    }
    .main-doc-bt .img-area .text-wrap .right-text-wrap .doc-name-text {
        padding: 20px 30px;
        font-size: 14px;
    }
    .main-doc-bt .img-area .text-wrap .right-text-wrap .doc-name-text p.name span {
        font-size: 20px;
    }
}