.m { display:none; }

#menu-btn,
#mobile-menu { display:none; }
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    MEDIA QUERY
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media (min-width: 1921px)  {}
@media (min-width: 1081px) and (max-width: 1600px) {
    .inner { width:100%; }
}
/* mobile */
@media screen and (max-width: 1080px) {
    body { font-size:3.5vw }
    .pc { display:none !important; }
    #jt_popup_container.pc { display:block !important; }
    #jt_popup_playground {
        display: grid;
        grid-template-columns: 1fr;
        height: 90vh;
        top: 5vh;
    }
    #jt_popup_container.pc .jt_popup_item {
        position: absolute;
    }

    .m { display:block; }
    section,
    .inner { max-width: 100vw; overflow:hidden; }



    /* ------ 헤더 */
    header.header { height: 60px; position: fixed; top: 0 }
    header.header .inner {  padding:15px  }
    header.header.on .inner a.home,
    header.header .inner a.home { width:120px; margin:0 }
    header.header .inner nav ul.menu { display: none;}

    #menu-btn {
        justify-content: center;
        align-items: center;
        transition: all ease 0.5s;
    }
    #menu-btn > div {
        display: flex;
        width: 26px;
        height: 17px;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between;
        transition: all ease 0.5s;
    }
    #menu-btn span {
        display: inline-block;
        width: 100%;
        height: 2px;
        border-radius: 3px;
        background-color: #444;
        transition: all ease 0.5s;
    }
    #menu-btn span:nth-child(2) { width:70% }
    header.header .inner nav #menu-btn { display:block; }

    #quickmenu { display:none; }

    #mobile-menu {
        position: fixed;
        top: 0;
        max-width: 100vw;
        width: 100%;
        height: 100vh;
        z-index: 9997;
        display: flex;
        flex-direction: column;
        overscroll-behavior:none;
        transition: all ease 0.4s;
        background-color: rgba(0,0,0, .7);
        backdrop-filter: blur(10px);
        opacity: 0;
        visibility: hidden;
        z-index: -5;

        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
    }
    #mobile-menu.on {
        display: flex;
        visibility: visible;
        opacity: 1; z-index: 99999;
    }
    /* 닫기버튼 */
    #mobile-menu > .close-area {
        width: 100%;
        height: 60px;
        padding: 2.0em 5vw;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        cursor: pointer;
        z-index: 99999;
    }
    #mobile-menu > .close-area strong {}
    #mobile-menu > .close-area .letter-x {
        width: 25px; height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #mobile-menu > .close-area .letter-x span {
        display: block;
        width: 25px; height: 2px;
        background-color: #fff;
        transform-origin: center;
        position: absolute;
    }
    #mobile-menu > .close-area .letter-x span:nth-child(1) { transform:rotate(45deg); }
    #mobile-menu > .close-area .letter-x span:nth-child(2) { transform:rotate(-45deg); }

    /**/
    #mobile-menu > .inner-wrap {
        max-width: 100vw;
        height: auto;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 5vw;

        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
    }
    #mobile-menu > .inner-wrap nav {
        display: flex;
        flex-direction: column;
        width: 80%;
    }
    #mobile-menu > .inner-wrap nav > a {
        text-align: center;
        padding: 0.5em 0.5em;
        font-size: 6vw;
        letter-spacing: -0.05em;
        color: #fff;
        font-weight: 300;
    }

    #mobile-menu div.info-link {
        width: 60vw;
        margin: 50px auto 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 0.5em;
    }
    #mobile-menu div.info-link a.btn {
        padding: 1em;
        display: flex;
        justify-content: flex-start;
        margin-right: 0;
        font-size: 4vw;
        margin-bottom: 5px;
        padding-left: 16vw;
    }
    #mobile-menu div.info-link a.btn i {
        display: inline-block;
        width: 1.5em;
        aspect-ratio: 1 / 1;
        background-repeat: no-repeat;
        background-size: auto 80%;
        background-position: center;
    }
    #mobile-menu div.info-link a.btn.map span {
        font-size:3.3vw;
        letter-spacing: 0.01em;
    }




    /* footer */
    footer.footer { position:relative; }
    footer.footer img.logo { width: 120px; }
    footer.footer * { font-size: 3.3vw; }

    footer.footer .inner { padding: 50px 0 50px; }
    footer.footer .inner > .floor {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 10vw;
    }
    footer.footer a.top:hover,
    footer.footer a.top {
        position: absolute;
        bottom : 0;
        left : 0;
        font-size: 2vw;
        background-color: transparent;
        width: 100vw;
        height: 50px;
        border-radius: 0;
        padding-top: 1.5em;

        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        grid-gap: 1em;
    }
    footer.footer a.top img { width:3vw }
    footer.footer a.top::after {
        content: '상단으로';
        font-size: 3vw;
    }
    footer.footer .inner > .floor.info {
        margin: 30px 0 1.5em;
        align-items: center;
    }
    footer.footer .info-p-wrap {
        flex-direction: column;
        width: 86%;
        align-items: center;
    }
    footer.footer .info-p-wrap p {
        grid-gap: 0;
        text-align: center;
    }
    footer.footer .info-p-wrap p b { margin-right:0.5em; text-align:right; }

    footer.footer .footer-menu ul.menu { margin-top: 2em; }
    footer.footer .footer-menu ul.menu li + li { border-left: 1px solid #666; }

    footer.footer .copyright {
        border-top: 1px solid #444;
    }
    footer.footer .copyright p { font-size: 3vw; }


    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        MAINPAGE
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*    section:not(.main-visual) { min-height:100vh }*/
    section > .inner { padding: 60px 0; }
    section div.title-zone h3.title { font-size:5.5vw }
    section div.title-zone h3.title.eng { font-size: 2em; }
    section div.title-zone p.desc { font-size: 1em; padding: 0 2em; }

    /* 유닛 */
    section .inner > .unit { margin: 40px auto 0; }

    /* - - - - - 01. 메인비주얼  */
    section.main-visual {
        margin-top: 60px;
        aspect-ratio: unset;
        height: fit-content;
        position: relative;
    }
    section.main-visual .swiper-slide {
        aspect-ratio: 3 / 4;
/*        background-position: top center;*/
        background-position: top left;
        background-size: cover;
    }
    section.main-visual .swiper-slide > .inner {
        width: 90vw;
        margin: 0 auto;
        align-items: center;
        height: 60%;
    }
    @keyframes welcomeTitle {
        0% { transform: translateY(100%); filter:opacity(0); }
        100% { transform: translateY(0); filter:opacity(1); }
    }
    section.main-visual .swiper-slide div.text p { text-align:center; }
    section.main-visual .swiper-slide.swiper-slide-active div.text p.mv-txt img { transform: translateY(100%); }

    section.main-visual .swiper-slide div.text p.eng { font-size: 2.5vw; }
    section.main-visual .swiper-slide div.text p.mv-txt { margin: 1.5em 0; }
    section.main-visual .swiper-slide div.text p.mv-txt img { height: 7.5vw; margin: 0 auto; }
    section.main-visual .swiper-slide div.text p.mv-desc { font-size: 3.8vw; line-height:1.5 }
    section.main-visual .swiper-pagination {
        width: 50vw;
        left: 50vw;
        bottom: 10vw;
        transform: translateX(-50%);
    }
    section.main-visual .swiper-pagination .swiper-pagination-bullet { width: 40px; }

    section.main-visual .swiper-slide.mv1 { background-image:url(./img/mv1-bg-m.jpg) }
    section.main-visual .swiper-slide.mv2 { background-image:url(./img/mv2-bg-m.jpg) }
    section.main-visual .swiper-slide.mv3 { background-image:url(./img/mv3-bg-m.jpg) }

    /* - - - - - 02. 예담의원  */
    section.main-about .unit {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 2px;
    }

    /* - - - - - 03. 의료진소개(Doctor)  */
    section.main-doctor .unit {
        width: 70%;
        flex-direction: column;
        grid-gap: 20px;
        margin: 50px auto 0;
    }
    section.main-doctor .unit img { width: 80%; }
    section.main-doctor .unit div.txt div.name { font-size:1.8em }
    section.main-doctor .unit div.txt div.name p { text-align: center; }
    section.main-doctor .unit div.txt div.name p span { font-size: 0.6em; }

    section.main-doctor .unit div.txt ul.dot { padding: 1em 2em 0 1em; }



    /* - - - - - 04. 시술솔루션(Solution)  */
    #promise-txt { top: 20px;
        left: 72vw;
    }
    #promise-txt .rounded-text {
        border: 3px solid var(--tertiary);
        width: 19vw;
        height: 19vw;
    }
    section.main-solution div.equipment-slide { width: 100vw; }
    section.main-solution div.equipment-slide div.swiper-slide { background-position: top 30px center; }
    section.main-solution .button-prev,
    section.main-solution .button-next {
        width: 60px;
        bottom: 150px;
        background-size: 60%;
        display: none;
    }


    /* - - - - - 05. 중점진료(Signature)  */
    section.main-signature .unit {
        width: 75%;
        grid-template-columns: 1fr;
        grid-gap: 30px;
    }
    section.main-signature .unit > div img { border-radius:5px }
    section.main-signature .unit > div p.bg-secondary {
        font-size: 4vw;
        padding: 0.3em;
    }
    section.main-signature .unit > div p.txt-tertiary {
        color: #bf815c;
        font-size: 3.5vw;
    }


    /* - - - - - 06. 둘러보기(Space)  */
    section.main-space .inner {
        padding: 50px 0 150px;
    }
    section.main-space div.space-slide {
        width: 100vw;
        max-width: 100vw;
        margin: 40px auto 0;
        padding-bottom: 30px;
    }
    section.main-space div.space-slide div.swiper-slide { border-radius: 5px; }
    section.main-space .button-prev,
    section.main-space .button-next { display: none;}





    /* - - - - - 07. 오시는길  */
    section.main-locate {
        grid-template-columns: 1fr;
    }
    section.main-locate #map {
        aspect-ratio: 3 / 2;
        border-right: 1px solid #eee;
        background-color: #f1f1f1;
    }
    section.main-locate > .wrap {
        background-position: right 8vw top 50px;
        background-size: 30%;
    }
    section.main-locate > .wrap div.locate-info {
        width: 80%;
        margin: 60px auto;
    }
    section.main-locate img.logo { width:150px }
    section.main-locate div.info-grid {
        margin: 40px 0 30px;
        grid-gap: 0.3em 0;
    }
    section.main-locate div.info-link {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        grid-gap: 0.5em;
    }
    section.main-locate div.info-link a.btn { margin-right: 0; }
    section.main-locate div.info-link a.btn.map span { font-size:3.3vw; }

    section.main-locate #map img[src$="building.png"] {
        transform-origin: bottom right;
        transform: scale(0.6) translate(-20%,-10%);
    }




    section.sub-intro {
        margin-top: 90px;
    }
    section.sub-intro h4.page-title { font-size: 1.5em; }




}