/* ========== Responsive ========== */
@media (max-width: 1440px) {
    .center {
        padding: 0px 40px;
    }
    .hd_wrap {
        padding: 0px 40px;
    }
    .banner_title {
        left: 80px;
    }
    .banner_txt {
        padding: 0px 40px;
    }
    .main_banner .main_banner_nav {
        left: 80px;
    }
    .main_doctor_con {
        padding: 111px 80px 0px;
    }
    .ft_info {
        padding: 104px 80px 231px;
    }
}

@media (max-width: 1200px) {
    /* font-system */
    .main01 {
        font-size: 42px;
    }
    .main02b {
        font-size: 26px;
    }
    .point {
        font-size: 34px;
    }
    .sub700 {
        font-size: 22px;
    }
    .sub400 {
        font-size: 22px;
    }

    /* header */
    .hd_wrap {
        padding: 0px 30px;
        height: 72px;
    }
    .hd_menu > li > a {
        font-size: 16px;
        padding: 0px 6px;
    }
    .hd_menu {
        gap: 10px;
    }

    /* banner */
    .main_banner {
        border-radius: 0px 0px 60px 60px;
    }
    .banner_title {
        left: 40px;
        top: 140px;
    }
    .banner_txt {
        top: 400px;
    }
    .banner_txt h2 {
        font-size: 44px;
    }
    .banner_swiper {
        right: 40px;
        bottom: 120px;
    }
    .banner_swiper > div {
        max-width: 320px;
        height: 300px;
    }
    .banner_swiper h4 {
        font-size: 20px;
    }
    .banner_swiper p {
        font-size: 18px;
    }
    .main_banner .main_banner_nav {
        left: 40px;
        bottom: 40px;
        gap: 25px;
    }

    /* intro */
    .main_intro {
        padding: 120px 0px 80px;
        border-radius: 0px 0px 60px 60px;
    }
    .main_intro_txt h2 {
        font-size: 44px;
    }

    /* list */
    .main_list {
        border-radius: 0px 0px 60px 60px;
    }
    .main_list > ul {
        gap: 16px;
    }
    .main_list li {
        height: 200px;
    }
    .main_list h3 {
        font-size: 24px;
    }
    .main_list p {
        font-size: 18px;
    }

    /* doctor */
    .main_doctor_title h2 {
        font-size: 42px;
    }
    .main_doctor_con {
        padding: 80px 60px 0px;
    }
    .main_profile {
        gap: 60px;
    }
    .sub_profile {
        gap: 50px;
    }
    .main_doctor_txt h3 span {
        font-size: 34px;
    }
    .main_doctor_btn > span {
        padding: 0px 24px;
        font-size: 18px;
        line-height: 64px;
    }
    .main_doctor_btn > span:last-child {
        gap: 80px;
    }
    .main_doctor_modal {
        left: 40px;
        padding: 40px 60px;
    }

    /* orthodontic */
    .main_orthodontic {
        padding: 140px 0px 100px;
    }
    .main_orthodontic_txt {
        margin: 80px auto 140px;
        gap: 60px;
    }
    .main_orthodontic_type {
        gap: 40px;
    }

    /* ratio */
    .main_ratio_con {
        gap: 40px;
    }

    /* bna */
    .main_bna_list > div {
        max-width: 580px;
    }
    .main_bna_list h4 {
        font-size: 24px;
        gap: 24px;
    }

    /* child */
    .main_child_wrap h2 {
        font-size: 42px;
    }
    .double_board {
        border-radius: 60px;
        padding: 80px 0px 70px;
    }
    .double_board h3 {
        font-size: 42px;
    }
    .double_board_con {
        gap: 24px;
    }

    /* care */
    .main_care {
        padding: 120px 0px 140px;
    }
    .main_care_swiper .swiper-slide {
        padding: 80px 60px 0px 60px;
        gap: 40px;
    }

    /* equipment */
    .main_equipment {
        padding: 140px 0px 160px;
    }
    .main_equipment h2 {
        margin: 20px auto 140px;
    }

    /* interior */
    .main_interior {
        padding-bottom: 140px;
    }

    /* footer */
    .footer {
        padding: 0px 30px 60px;
    }
    .ft_wrap {
        border-radius: 40px;
    }
    .ft_info {
        padding: 80px 60px 180px;
    }
    .ft_address a:last-child {
        font-size: 20px;
        padding: 0px 40px;
    }

    /* quick menu */
    .quick_menu {
        right: 30px;
        bottom: 30px;
    }
}

@media (max-width: 1024px) {
    /* font-system */
    .main01 {
        font-size: 36px;
    }
    .main02 {
        font-size: 24px;
    }
    .main02b {
        font-size: 24px;
    }
    .point {
        font-size: 30px;
    }
    .sub700 {
        font-size: 20px;
    }
    .sub400 {
        font-size: 20px;
    }

    /* header */
    .hd_wrap {
        height: 64px;
    }
    .hd_menu > li > a {
        font-size: 15px;
        padding: 0px 4px;
    }
    .hd_menu {
        gap: 6px;
    }

    /* banner */
    .main_banner {
        border-radius: 0px 0px 40px 40px;
    }
    .banner_title {
        top: 110px;
        left: 30px;
    }
    .banner_txt {
        top: 340px;
        padding: 0px 30px;
    }
    .banner_txt h2 {
        font-size: 36px;
        margin-top: 20px;
    }
    .banner_swiper {
        right: 30px;
        bottom: 100px;
    }
    .banner_swiper > div {
        max-width: 280px;
        height: 260px;
    }
    .banner_swiper .swiper-slide {
        padding: 20px 22px 0px;
    }
    .banner_swiper h4 {
        font-size: 18px;
        margin: 14px 0px 10px;
    }
    .banner_swiper p {
        font-size: 16px;
    }
    .main_banner .main_banner_nav {
        left: 30px;
        bottom: 30px;
        gap: 16px;
    }
    .main_banner .main_banner_nav .swiper-pagination-bullet {
        width: 36px;
        height: 36px;
        font-size: 16px;
        line-height: 36px;
    }
    .main_banner .main_banner_nav .autoplay-progress {
        width: 100px;
    }

    /* intro */
    .main_intro {
        padding: 100px 0px 60px;
        border-radius: 0px 0px 40px 40px;
    }
    .main_intro_con {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .main_intro_txt h2 {
        font-size: 36px;
        margin-bottom: 40px;
    }
    .main_intro_txt h3 {
        margin: 30px 0px 8px;
    }

    /* list */
    .main_list {
        border-radius: 0px 0px 40px 40px;
        padding: 60px 0px 50px;
    }
    .main_list > ul {
        flex-direction: column;
        gap: 16px;
    }
    .main_list li {
        max-width: 100%;
        height: 180px;
    }
    .main_list h3 {
        font-size: 22px;
    }

    /* doctor */
    .main_doctor {
        padding: 80px 0px 80px;
    }
    .main_doctor_wrap {
        padding: 0px 30px;
    }
    .main_doctor_title h2 {
        font-size: 36px;
        margin: 16px auto 50px;
    }
    .main_doctor_con {
        flex-direction: column;
        align-items: center;
        padding: 60px 40px 0px;
        border-radius: 260px 260px 80px 80px;
    }
    .main_doctor_con.rounded {
        border-radius: 60px;
    }
    .main_profile {
        gap: 40px;
        margin: 40px 0px 30px;
    }
    .sub_profile {
        gap: 30px;
        margin-bottom: 40px;
        flex-wrap: wrap;
    }
    .sub_profile li {
        font-size: 18px;
    }
    .main_doctor_txt h3 {
        font-size: 20px;
    }
    .main_doctor_txt h3 span {
        font-size: 28px;
        letter-spacing: 6px;
    }
    .doctor_experience span {
        font-size: 32px;
    }
    .doctor_experience p {
        font-size: 22px;
    }
    .main_doctor_btn {
        gap: 16px;
        flex-wrap: wrap;
    }
    .main_doctor_btn > span {
        padding: 0px 20px;
        font-size: 16px;
        line-height: 56px;
        gap: 12px;
    }
    .main_doctor_btn > span:last-child {
        gap: 40px;
    }
    .main_doctor_modal {
        left: 20px;
        padding: 30px 40px;
        max-width: calc(100% - 40px);
        height: auto;
        max-height: 80%;
        overflow-y: auto;
    }

    /* orthodontic */
    .main_orthodontic {
        padding: 100px 0px 80px;
    }
    .main_orthodontic_title h2 {
        margin: 16px 0px 60px;
    }
    .main_orthodontic_txt {
        margin: 60px auto 100px;
        gap: 40px;
        flex-direction: column;
        align-items: center;
    }
    .main_orthodontic_type {
        flex-direction: column;
        gap: 40px;
    }
    .type_list {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ratio */
    .main_ratio {
        padding: 60px 0px 120px;
    }
    .main_ratio_con {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .main_ratio_card01,
    .main_ratio_card02 {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* bna */
    .main_bna {
        padding: 60px 0px 120px;
    }
    .main_bna_list {
        flex-direction: column;
        gap: 60px;
        align-items: center;
    }
    .main_bna_list > div {
        max-width: 100%;
    }

    /* child */
    .main_child {
        padding: 70px 0px 100px;
    }
    .main_child_wrap {
        padding: 0px 30px;
    }
    .main_child_wrap h2 {
        font-size: 36px;
        margin: 16px auto 50px;
    }
    .double_board {
        border-radius: 40px;
        padding: 60px 20px 50px;
    }
    .double_board h3 {
        font-size: 36px;
        margin: 16px auto 40px;
    }
    .double_board_con {
        flex-wrap: wrap;
        justify-content: center;
    }
    .child_swiper_con {
        border-radius: 40px;
        height: auto;
        min-height: 400px;
    }
    .child_swiper_page {
        padding: 14px 20px;
    }

    /* care */
    .main_care {
        padding: 80px 0px 100px;
    }
    .main_care_con {
        margin-top: 90px;
    }
    .main_care .main_care_page {
        flex-wrap: wrap;
        max-width: 100%;
        padding: 14px 20px;
    }
    .main_care .main_care_page > span {
        font-size: 18px;
        padding: 0px 14px;
        line-height: 42px;
    }
    .main_care_swiper {
        height: auto;
        min-height: 480px;
        border-radius: 40px;
    }
    .main_care_swiper .swiper-slide {
        flex-direction: column;
        padding: 80px 30px 40px;
        gap: 30px;
    }
    .main_care_swiper .swiper-slide h4 {
        font-size: 26px;
    }

    /* orthodontic_bna */
    .orthodontic_bna {
        padding: 20px 0px 140px;
    }
    .orthodontic_bna .orthodontic_bna_page {
        flex-wrap: wrap;
    }
    .orthodontic_bna .orthodontic_bna_page > span {
        font-size: 18px;
    }

    /* care_bna */
    .care_bna .care_bna_page {
        flex-wrap: wrap;
    }
    .care_bna .care_bna_page > span {
        font-size: 18px;
    }

    /* equipment */
    .main_equipment {
        padding: 100px 0px 120px;
    }
    .main_equipment h2 {
        margin: 16px auto 100px;
    }

    /* interior */
    .main_interior {
        padding-bottom: 100px;
    }
    .main_interior h2 {
        margin: 16px auto 50px;
    }
    .main_interior .main_interior_page span {
        width: 120px;
        height: 80px;
        border-radius: 14px;
    }

    /* footer */
    .footer {
        padding: 0px 20px 40px;
    }
    .ft_wrap {
        border-radius: 30px;
    }
    .ft_info {
        padding: 60px 40px 120px;
    }
    .ft_info h2 {
        font-size: 36px;
    }
    .come_box {
        flex-direction: column;
        gap: 60px;
        margin-top: 60px;
    }
    .ft_address > div {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    .ft_address a:last-child {
        font-size: 18px;
        padding: 0px 30px;
        line-height: 50px;
    }

    /* quick menu */
    .quick_menu {
        right: 20px;
        bottom: 20px;
        gap: 12px;
    }
}