@charset "UTF-8";



@media(max-width:768px) {

    .img_pc {
        display: none !important;
    }

    .img_mo {
        display: block !important;
    }

    br.p_br {
        display: none;
    }

    br.t_br {
        display: none;
    }

    br.m_br {
        display: inline-block;
    }

    .inner_tab {
        padding: 0 30px;
    }

    .inner_mb {
        padding: 0 30px;
    }

    .wrap .sec_tit h2 {
        font-size: 24px;
        margin-bottom: 30px;
    }





    /* 드롭헤더 */
    .wrap .drop_header .inner a.logo img {
        max-width: 24px;
    }

    .wrap .drop_header .inner ul.header_main_menu li a {
        padding: 0 1.2vw;
        font-size: 2vw;
    }





    /* 사이드 메뉴 nav */
    .wrap nav.side_nav {
        display: none;
    }





    /* 메인비주얼 */
    .wrap .main_visual .main_visual_swiper .swiper-wrapper .swiper-slide .visual_title {
        bottom: 10%;
        left: 30px;
    }

    .wrap .main_visual .main_visual_swiper .swiper-wrapper .swiper-slide .visual_title h1 {
        font-size: clamp(34px, 5.7vw, 44px);
        /* 44px */
        text-align: left;
    }

    .wrap .main_visual .main_visual_swiper .swiper-wrapper .swiper-slide .visual_title p {
        margin-top: 20px;
        font-size: clamp(14px, 2vw, 16px);
        text-align: left;
    }





    /* 플로팅 lang */
    .wrap .floating {
        bottom: 10px;
        right: 20px;
    }

    .wrap .floating>div {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }





    /* magazine */
    .wrap .magazine .sec_tit h2 {
        font-size: 24px;
    }

    .wrap .magazine .sec_tit .thumb_click {
        gap: 10px;
        padding: 10px 20px;
    }

    .wrap .magazine .sec_tit .thumb_click p {
        font-size: 14px;
    }

    .wrap .magazine .sec_tit .thumb_click span img {
        width: 30px;
    }







    /* sec01 Cheongdam Circle's Specialty */
    .wrap .sec {
        padding: 150px 0;
    }

    .wrap .sec.specialty .sec_con .specialty_1>p {
        font-size: 16px;
    }

    .wrap .sec.specialty .sec_con .specialty_1 p.doc_suh {
        top: 7%;
        left: 6%;
    }

    .wrap .sec.specialty .sec_con .specialty_1 p.doc_ahn {
        top: 7%;
        right: 6%;
    }

    .wrap .sec.specialty .sec_con .specialty_1 .doc_con {
        top: 50%;
        left: 50%;
        transform: translatex(-50%);
        min-width: 400px;
        max-height: 250px;
    }

    .wrap .sec.specialty .sec_con .specialty_1 .doc_ahn_con {
        margin-left: 0;
    }

    .wrap .sec.specialty .sec_con .specialty_1 .doc_con .scroll_inner>ul>li {
        font-size: 14px;
    }

    .wrap .sec.specialty .sec_con .specialty_1 .doc_con .scroll_inner>ul>li>p {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .wrap .sec.specialty .sec_con .specialty_1 .doc_con .scroll_inner>ul>li ul li p.tiny_circle span {
        width: 4px;
        height: 4px;
        border-radius: 3px;
    }

    .wrap .sec.specialty .sec_con .specialty_prev,
    .wrap .sec.specialty .sec_con .specialty_next {
        width: auto;
        top: auto;
        bottom: -10%;
        transform: translateY(0);
    }

    .wrap .sec.specialty .sec_con .specialty_prev img,
    .wrap .sec.specialty .sec_con .specialty_next img {
        max-width: 20vw;
    }

    .wrap .sec.specialty .sec_con .specialty_prev {
        left: 0;
        text-align: right;
    }

    .wrap .sec.specialty .sec_con .specialty_next {
        right: 0;
        text-align: left;
    }





    /* sec02 Signature Treatments */
    .wrap .sec.signature .sec_con .signature_prev,
    .wrap .sec.signature .sec_con .signature_next {
        display: none;
    }

    .wrap .sec.signature .sec_con .signature_tabnav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        width: 100%;
        margin-bottom: 30px;
        padding-bottom: 0;
    }

    .wrap .sec.signature .sec_con .signature_tabnav li {
        height: 50px;
        font-size: 12px;
        line-height: 1;
        border: 1px solid rgba(170, 136, 99, .3);
        border-radius: 23px;
    }

    .wrap .sec.signature .sec_con .signature_tabnav li.active {
        font-size: 14px;
        /* 20px */
        font-weight: 500;
        line-height: 1;
        border: 1px solid rgba(170, 136, 99, 1);
    }

    .wrap .sec.signature .sec_con .signature_tabnav li:nth-child(1),
    .wrap .sec.signature .sec_con .signature_tabnav li:nth-child(2),
    .wrap .sec.signature .sec_con .signature_tabnav li:nth-child(6),
    .wrap .sec.signature .sec_con .signature_tabnav li:nth-child(7) {
        flex: 0 0 calc((100% - 150px) / 2);
    }

    .wrap .sec.signature .sec_con .signature_tabnav li:nth-child(3),
    .wrap .sec.signature .sec_con .signature_tabnav li:nth-child(4),
    .wrap .sec.signature .sec_con .signature_tabnav li:nth-child(5) {
        flex: 0 0 calc((100% - 20px) / 3);
    }

    .wrap .sec.signature .sec_con .signature_tabnav li.active::after {
        display: none;
    }

    .wrap .sec.signature .sec_con .signature_swiper .swiper-wrapper .swiper-slide {
        flex-direction: column;
        gap: 40px;
    }

    .wrap .sec.signature .sec_con .signature_swiper .swiper-wrapper .swiper-slide .thumbnail {
        width: 100%;
        height: 300px;
    }

    .wrap .sec.signature .sec_con .signature_swiper .swiper-wrapper .swiper-slide .thumbnail::after {
        top: 10px;
        left: 50%;
        transform: translateY(0) translateX(-50%);
        width: 95%;
        height: 100%;
    }

    .wrap .sec.signature .sec_con .signature_swiper .swiper-wrapper .swiper-slide .thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .wrap .sec.signature .sec_con .signature_swiper .swiper-wrapper .swiper-slide .txt {
        width: 100%;
    }

    .wrap .sec.signature .sec_con .signature_swiper .swiper-wrapper .swiper-slide .txt p.little_wide {
        font-size: 12px;
    }

    .wrap .sec.signature .sec_con .signature_swiper .swiper-wrapper .swiper-slide .txt p.main_title {
        margin: 20px 0;
        font-size: 34px;
        line-height: 1;
    }

    .wrap .sec.signature .sec_con .signature_swiper .swiper-wrapper .swiper-slide .txt p.sub_title {
        font-size: 20px;
    }

    .wrap .sec.signature .sec_con .signature_swiper .swiper-wrapper .swiper-slide .txt p.disc {
        margin-top: 20px;
        font-size: 16px;
    }





    /* sec03 ban */
    .wrap .sec.bna .inner {
        margin: 0 auto;
        flex-direction: column;
    }

    .wrap .sec.bna .bna_left {
        position: relative;
        display: flex;
        justify-content: space-between;
        max-width: calc(100% - 60px);
        width: 100%;
        padding-right: 0;
        /* padding-top: 60px; */
    }

    .wrap .sec.bna .bna_left .bna_notice {
        display: none;
    }

    .wrap .sec.bna .bna_left .sec_tit p {
        display: none;
    }

    .wrap .sec.bna .bna_left ul.bna_tab {
        position: absolute;
        top: 30%;
        right: 0;
        width: 40%;
        max-width: 200px;
        border-bottom: 2px solid #222;
        background: #fff;
        z-index: 10;
    }

    .wrap .sec.bna .bna_left ul.bna_tab::after {
        content: "";
        position: absolute;
        top: 22px;
        right: -10px;
        border-top: 7px solid rgba(34, 34, 34, .5);
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        pointer-events: none;
    }

    .wrap .sec.bna .bna_left ul.bna_tab.open::after {
        border-top: none;
        border-bottom: 7px solid rgba(34, 34, 34, .5);
    }

    .wrap .sec.bna .bna_left ul.bna_tab li {
        display: none;
        height: 50px;
        font-size: 12px;
        color: #222;
    }

    .wrap .sec.bna .bna_left ul.bna_tab.open li {
        display: flex;
    }

    .wrap .sec.bna .bna_left ul.bna_tab li.active {
        display: flex;
        font-size: 14px;
        font-weight: 500;
        color: #222;
        border-bottom: 1px solid rgba(34, 34, 34, .3);
        background: #fff;
    }

    .wrap .sec.bna .bna_left ul.bna_tab.open li.active {
        background: #f7f7f7;
    }

    .wrap .sec.bna .bna_right {
        width: 100%;
        margin-left: 30px;
        margin-right: 0 !important;
        margin-top: 30px;
    }

    .wrap .sec.bna .bna_right .bna_swiper .swiper-wrapper {
        width: 150%;
    }

    .wrap .sec.bna .bna_right .bna_swiper .swiper-wrapper .swiper-slide>div {
        /* max-width: 350px; */
    }

    .wrap .sec.bna .bna_right .bna_swiper .swiper-wrapper .swiper-slide>div p {
        font-size: 16px;
    }






    /* sec04 Instagram */
    .wrap .sec.instagram .sec_tit h2 {
        margin-bottom: 30px;
    }

    .wrap .sec.instagram .sec_con h5 {
        font-size: 18px;
        margin-bottom: 0;
    }

    .wrap .sec.instagram .sec_con div.insta_content .blank {
        display: none;
    }

    .wrap .sec.instagram .sec_con div.insta_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
    }

    .wrap .sec.instagram .sec_con div.insta_content .main_img a img {
        width: 100%;
    }

    .wrap .sec.instagram .sec_con div.insta_content .instagram_links {
        width: auto;
    }

    .wrap .sec.instagram .sec_con div.insta_content .instagram_links ul {
        margin-bottom: 15px;
    }

    .wrap .sec.instagram .sec_con div.insta_content .instagram_links ul li a {
        font-size: 14px;
    }

    .wrap .sec.instagram .sec_con div.insta_content .instagram_links ul li a img {
        max-width: 20px;
    }





    /* sec05 About Circle */
    .wrap .sec.about_circle .sec_tit h2 {
        margin-bottom: 0;
    }

    .wrap .sec.about_circle .sec_con p {
        padding: 0 30px;
        font-size: 16px;
    }

    .wrap .sec.about_circle .sec_con .about_circle_swiper .swiper-wrapper .swiper-slide {
        transform: scale(.8);
    }

    .wrap .sec.about_circle .sec_con .about_circle_swiper .swiper-wrapper .swiper-slide-active {
        transform: scale(.9);
    }

    .wrap .sec.about_circle .sec_con .about_circle_swiper .swiper-wrapper .swiper-slide img {
        width: 100%;
    }





    /* sec06 Branding */
    .wrap .sec.branding .inner_tab {
        padding: 0;
    }

    .wrap .sec.branding::before,
    .wrap .sec.branding::after {
        position: absolute;
        font-size: 104px;
        line-height: 1;
        color: rgba(34, 34, 34, .04);
    }

    .wrap .sec.branding p {
        font-size: 20px;
    }




    /* sec07 Location */
    .wrap .sec.location .sec_con {
        flex-direction: column;
        gap: 30px;
    }

    .wrap .sec.location .sec_con>div {
        width: 100%;
    }

    .wrap .sec.location .sec_con .map {
        width: 80%;
        height: 100%;
    }

    .wrap .sec.location .sec_con .map_txt>ul.map_tab li {
        padding: 10px 0;
        font-size: 16px;
    }

    .wrap .sec.location .sec_con .map_txt div.map_content {
        padding: 0 8vw;
    }

    .wrap .sec.location .sec_con .map_txt div.map_content ul li {
        padding: 30px 0;
    }

    .wrap .sec.location .sec_con .map_txt div.map_content ul li h5 {
        font-size: 16px;
    }

    .wrap .sec.location .sec_con .map_txt div.map_content ul li>p {
        font-size: 14px;
    }

    .wrap .sec.location .sec_con .map_txt div.map_content ul li .chart table {
        font-size: 12px;
    }

    .wrap .sec.location .sec_con .map_txt div.map_content ul li .chart table tr td {
        padding: 15px 0;
    }

    .wrap .sec.location .sec_con .map_txt div.map_content ul li .chart p {
        font-size: 12px;
    }





    /* sec08 reservation */
    .wrap .sec.reservation .sec_con ul.sns_list {
        flex-wrap: wrap;
        gap: 50px 0;
    }

    .wrap .sec.reservation .sec_con ul.sns_list li {
        width: 50%;
        gap: 20px;
    }

    .wrap .sec.reservation .sec_con ul.sns_list li div {
        gap: 10px;
    }

    .wrap .sec.reservation .sec_con ul.sns_list li div.sns_logo {
        max-width: 40px;
    }

    .wrap .sec.reservation .sec_con ul.sns_list li div.sns_logo img {
        width: 100%;
    }

    .wrap .sec.reservation .sec_con ul.sns_list li div.sns_logo p {
        font-size: 14px;
    }

    .wrap .sec.reservation .sec_con ul.sns_list li div.qr_img {
        max-width: 120px;
    }

    .wrap .sec.reservation .sec_con ul.sns_list li div.qr_img img {
        width: 100%;
    }

    .wrap .sec.reservation .sec_con ul.sns_list li div.qr_img p {
        font-size: 14px;
    }

    .wrap .sec.reservation .bg_logo {
        bottom: -100px;
        left: -50px;
        max-width: 350px;
        opacity: .2;
    }





    /* footer */
    .wrap .footer .inner {
        flex-direction: column;
        gap: 35px;
        padding: 55px 0;
    }

    .wrap .footer .logo {
        max-width: 120px;
    }

    .wrap .footer .logo img {
        width: 100%;
    }

    .wrap .footer .txt p {
        font-size: 12px;
        text-align: center;
    }
















}