/* main responsive */
@media screen and (max-width:768px) {
    h1 {
        max-width: 3.5rem;
    }

    .menu-btn {
        display: block;
    }

    .gnb {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        min-height: 100vh;
        height: auto;
        background: #fff;
        padding-top: 100px;
        transition: 0.4s ease;
    }

    .gnb .call {
        display: block;
    }

    .gnb>ul {
        width: 100%;
        flex-direction: column;
        gap: 0;
    }

    .gnb>ul>li {
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .gnb>ul>li a {
        position: relative;
        display: flex;
        padding: 20px;
        color: #111;
        border-bottom: 1px solid #eee;
    }

    .gnb>ul>li:has(.depth2)>a::after {
        content: '+';
        position: absolute;
        right: 5%;
        line-height: 0;
        top: 50%;
        transform: translate(0, -50%);
        font-size: 2rem;
        font-weight: 100;
        color: #707070;
        display: block;
        transition: 0.5s;
    }

    .gnb>ul>li.active:has(.depth2)>a::after {
        rotate: 45deg;
        transform-origin: top;
    }

    .gnb.active {
        right: 0;
    }

    /* 모바일 2차메뉴 */

    .depth2 {
        position: static;
        border: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        background: #f8f8f8;
    }

    .depth2 li a {
        padding: 16px 30px;
        border-top: 1px solid #eaeaea;
    }

    /* 열렸을 때 */
    .gnb>ul>li.active .depth2 {
        display: block;
    }

    header {
        padding-block: 0.5rem;
        background: #fff;
    }

    .header-wrap {
        height: auto;
    }

    header .logo a {
        gap: 4px;
    }

    /* 섹션 */
    .m1 .hero {
        width: 100%;
        border-radius: 0;
    }

    .m1 .hero::before {
        background: rgba(0, 0, 0, 0.3);
        opacity: 1;
    }

    .m1 .hero .title {
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .m1 .title h3 {
        margin-bottom: 1.25rem;
    }

    .hero .title .imgbox {
        margin: 0 auto;
        max-width: 42vw;
        padding-bottom: 3rem;
    }

    .m2 {
        padding-block: 5rem;
    }

    .m2 .wrap {
        flex-direction: column;
        align-items: center;
    }

    .m2 .desc p {
        padding-top: 2rem;
        text-align: center;
    }

    .m3 {
        padding-bottom: 5rem;
    }

    .m3::before {
        display: none;
    }

    .m3 .wrap {
        flex-direction: column-reverse;
        text-align: center;
    }

    .m3 .wrap .title {
        padding-top: 0;
    }

    .m3 .wrap .title h3 {
        margin-bottom: 0.25rem;
    }

    .m3 .wrap .title p {
        text-wrap-style: pretty;
    }

    .ear .flex-wrap {
        text-align: center;
        gap: 1rem;
    }

    .medic {
        padding-bottom: 7rem;
    }

    .medic .title h3 {
        margin-bottom: 2rem;
    }

    .medic .flex-wrap {
        gap: 2.5rem;
    }

    .medic .desc ul {
        margin-top: 4rem;
    }

    .medic-banner {
        padding-block: 6rem 3rem;
        padding-inline: 2rem;
    }

    .medic .desc ul::after,
    .medic .desc ul li h4::after {
        display: none;
    }

    .m4 {
        gap: 1rem;
        padding-bottom: 7rem;
    }

    .m4 ul {
        padding-top: 1rem;
    }

    .m4 ul li a {
        padding-bottom: 3rem;
    }

    .m4 ul li a>p {
        font-size: 14px;
        margin-top: 1rem;
    }

    .m4 ul li:hover {
        transform: translateY(-12px);
    }

    .m4 ul li a .desc h5 {
        margin-bottom: 1.25rem;
    }

    .m5 .swiper-slide .wrap {
        gap: 1rem;
        justify-content: center;
        align-items: center;
        padding-block: 5rem 0;
        flex-direction: column-reverse;
    }

    .m5 .swiper-slide .wrap .title * {
        text-align: center;
    }

    .m5 .swiper-slide .wrap .title {
        align-items: center;
    }

    .m5 .swiper-slide .eq img {
        max-height: 380px;
        max-width: 80%;
        margin: 0 auto;
    }

    .m5 .swiper-slide .wrap .title p {
        line-height: 1.6;
        max-width: 86%;
        text-wrap-style: balance;
        height: 100px;
    }

    .m5 .swiper-slide .wrap .title .border {
        display: none;
    }

    .btn-wrap div {
        height: 2rem;
    }

    footer * {
        font-size: 12px;
    }

    footer .f-logo {
        padding-block: 1rem 2rem;
    }

    footer .f-logo img {
        max-width: 3rem;
    }

    .footer-wrap>ul {
        margin-top: 1rem;
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 1fr;
        justify-content: center;
    }

    footer ul li a {
        border: none;
        font-size: 13px;
    }

    footer .footer-wrap>span {
        letter-spacing: -0.01vw;
    }

    footer .footer-wrap>p {
        font-size: 13px;
    }
}

@keyframes fadein {
    to {
        opacity: 1;
    }
}

/* sub responsive */
@media screen and (max-width:768px) {
    .sp-hero:not(.sp1-hero) .title {
        left: 5%;
        right: 8%;
    }

    section>.title {
        padding-inline: 1rem;
    }

    .flex-wrap {
        flex-direction: column;
    }

    .flex-reverse {
        flex-direction: column;
    }

    .flex-wrap>div {
        flex-basis: 100% !important;
    }

    .sp1-2 {
        padding-inline: 1rem;
    }

    .sp-banner {
        padding-block: 4rem;
    }

    .sp-banner-cont {
        padding-top: 3rem;
    }

    .sp-banner-cont .flex-wrap {
        gap: 5rem;
    }

    .sp-banner-cont ul li>span {
        padding: 0.425rem 1rem;
    }

    .sp1-2 .circle img {
        display: none;
    }

    .sp1-3 .flex-wrap {
        gap: 2.5rem;
    }

    .spl_box_add .desc {
        padding: 0 10%;
    }

    .sp1-3 ul {
        gap: 1.25rem;
        margin-top: 2rem;
    }

    .sp1-3 .doctor2 {
        padding-right: 2rem;
    }

    .sp1-3 ul li {
        margin-bottom: 0.2rem;
    }

    .sp1-4 {
        padding-bottom: 5rem;
    }

    .sp1-4 ul {
        padding-inline: 1rem;
        padding-block: 3rem;
        gap: 2.5rem;
        grid-template-columns: 1fr;
    }

    .sp1-4 ul li:first-child {
        text-align: center;
        flex-direction: column;
        grid-area: auto;
    }

    .sp1-5 .flex-wrap {
        flex-direction: column-reverse;
    }

    .root_daum_roughmap .wrap_map {
        min-height: 400px;
    }

    .sp1-5 .info {
        padding-block: 5rem;
        border-top: 1px solid #dfdbdb;
    }

    .sp1-5 .info .links {
        display: grid;
        max-width: 100%;
        grid-template-columns: 1fr 1fr;
        gap: 0.25rem;
    }

    .sp1-5 .info .links a {
        padding: 0.75rem;
    }

    .sp2-hero .imgbox {
        display: none;
    }

    .sp2-2 .flex-wrap {
        flex-direction: column-reverse;
        gap: 3rem;
    }

    .sp2-2 .imgbox {
        padding-inline: 2rem;
    }

    .sp2-2 {
        padding-block: 7rem;
        background: #eeeeee;
    }

    .sp2-2-2 {
        padding-top: 8rem;
    }

    .sp2-2-2 .flex-wrap {
        text-align: center;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        gap: 3rem;
    }

    .sp2-2-2 .desc {
        display: flex;
        justify-content: center;
        margin-top: 5rem;
    }

    .sp2-3 {
        padding-block: 7rem;
    }

    .sp2-3 .tablist {
        margin-top: 3.5rem;
    }

    .sp2-3 .tablist li {
        text-align: center;
        padding-inline: 1rem;
    }

    .sp2-swiper .swiper-slide {
        flex-direction: column;
    }

    .sp2-swiper .swiper-slide .desc {
        padding: 2rem;
        padding-bottom: 3rem;
    }

    .sp2-4 ul {
        padding-top: 5rem;
        gap: 1.375rem;
        flex-direction: column;
    }

    .sp2-4 ul li {
        transform: none;
    }

    .sp2-4 .desc {
        flex-direction: column;
    }

    .sp2-4 .desc dt {
        width: 100%;
    }

    .sub-swiper .swiper-slide {
        flex-direction: column-reverse;
    }

    .sub-swiper .swiper-slide>* {
        flex-basis: 100%;
    }

    .sub-swiper .swiper-slide .desc {
        padding: 5rem 2rem 3rem;
    }

    .sub-swiper .next-btn img {
        max-width: 2rem;
    }

    .sp3-swiper .swiper-slide ul li {
        padding: 0;
        margin-block: 2rem;
    }

    .sp3-swiper .swiper-slide ul li img {
        max-width: 3rem;
    }

    .vidbox {
        overflow: hidden;
        border-radius: 0;
    }

    .sp3-5 ul {
        flex-direction: column;
    }

    .sp3-5 ul li {
        padding-top: 0;
        align-content: center;
    }

    .sp4-2 .desc {
        padding-block: 5rem;
    }

    .sub-swiper .next-btn {
        right: 0;
    }

    .sub-swiper .next-btn img {
        max-width: 2rem;
    }

    .sp4-2 .cards {
        padding-block: 1rem 4rem;
    }

    .sp4-2 .card {
        padding-block: 4rem 2rem;
        flex-direction: column;
        padding-left: 0;
        gap: 2rem;
    }

    .sp4-2 .card:nth-of-type(2) {
        flex-direction: column;
    }

    .sp4-2 .card .sub-title p.point {
        margin-block: 0 0.75rem;
    }

    .sp4-2 .card .imgbox {
        overflow: hidden;
        max-height: 20rem;
    }

    .ear-sp2 ul {
        flex-direction: column;
    }

    .ear-sp3 {
        align-content: center;
    }

    .ear-sp3 .title {
        position: static;
        transform: none;
    }

    .category .flex-wrap>.title {
        position: static;
    }

    .category ul {
        grid-template-columns: 1fr;
    }

    .category ul li:nth-of-type(even) {
        transform: none;
    }

    .effect {
        padding-inline: 2rem;
    }

    .effect ul li {
        flex-direction: column;
        gap: 2rem;
    }

    .effect ul li .title span {
        padding: 0.625rem;
    }
}