@charset "utf-8";

@media all and (max-width: 767px) {

    .only-pc {
        display: none;
    }

    .only-s-mobile {
        display: block;
    }

    .only-over-tablet {
        display: none !important;
    }

    .only-to-tablet {
        display: block;
    }

    #footer .f1 {
        margin-bottom: 20px;
        gap: 12px 0;
        /*width: 270px;*/
    }

    /*#footer .f1 a:nth-of-type(3n):after {*/
    /*  display: none;*/
    /*}*/
    #body_home.mobile .grid-home-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: 32px 0 32px;
        gap: 40px 16px;
    }

    #body_home.mobile .grid-home-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    #body_home.mobile .grid-home-1 > li:nth-of-type(3)::before {
        display: none;
    }

    #body_home.mobile .grid-home-1:not(.row4) li:not(:first-of-type) {
        border-top: 1px solid #E9EBEE;
    }

    #body_home.mobile .grid-home-1 .wr {
        display: none;
    }

    #body_home.mobile .grid-home-1 .tt {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--Text-Tertiary, #8E8E8E);
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        letter-spacing: 0.2px;
        margin-bottom: 12px;
    }

    #body_home.mobile .grid-home-1 .gb > div.ab {
        position: absolute;
        right: 0;
        top: 0;
        color: var(--Text-Tertiary, #8E8E8E);
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: 0.2px;
    }

    #body_home.mobile .grid-home-2 {
        margin: 20px 0;
        gap: 40px 16px;
    }

    #body_home.mobile .wrapper_main .swiper.sec_banner_1 .swiper-slide {
        width: 100%;
        aspect-ratio: 360 / 240;
        border: 0;
        overflow: hidden;
        border-radius: 0;
    }

    #body_home.mobile .wrapper_main .swiper.sec_banner_2 .swiper-slide {
        aspect-ratio: 360 / 120;
        border: 0;
        overflow: hidden;
        border-radius: 0;
    }

    .m-elli-2 {
        -webkit-line-clamp: 2 !important;
    }

    #body_home.mobile .grid-home-1.row4 {
        grid-template-columns: repeat(2, 1fr);
    }

    #body_home.mobile .grid-home-1 .ellipsis2 {
        height: initial;
    }

    #wrapper_search .bd .boxcon.event {
        display: flex;
        justify-content: left;
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    #wrapper_search .bd .item .boxlimg {
        width: 100%;
        aspect-ratio: 320 / 178;
        flex: 0 0 100%;
        overflow: hidden;
        border-radius: 12px;
    }

    #wrapper_search .bd .item .boxlimg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #body_mypage .grid-board {
        gap: 32px 20px;
        grid-template-columns: repeat(2, 1fr);
    }

    .form-wrapper .e_area {
        display: flex;
        justify-content: space-between;
        align-items: end;
        color: var(--Text-Secondary, #5B5B5B);
        font-weight: 400;
        gap: 12px;
        flex-wrap: wrap;
    }

    .form-wrapper .e_area > div:last-of-type {
        flex: 0 0 100%;
    }

    .form-wrapper .textbox > li {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 0 30px;
        flex-direction: column;
    }

    .form-wrapper .textbox .inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 18px;
        width: 100%;
    }

    .wrap-gridboard-cs1 .slist {
        display: grid;
        gap: 32px 16px;
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 28px;
        position: relative;
    }

    /* TODO -> DESIGN : 가운데 수평선 */
    /*.wrap-gridboard-cs1 .slist::after {*/
    /*    content: "";*/
    /*    position: absolute;*/
    /*    top: 50%; !* 그리드 높이의 중간 *!*/
    /*    left: 0;*/
    /*    width: 100%;*/
    /*    height: 1px;*/
    /*    background-color: #E9EBEE; !* 선 색상 *!*/
    /*    transform: translateY(-16px); !* gap 고려해서 살짝 조정 가능 *!*/
    /*}*/
    #body_egd .wrap-gridboard-cs1 .slist {
        display: grid;
        gap: 32px 16px;
        grid-template-columns: repeat(1, 1fr);
        margin-bottom: 28px;
        position: relative;
    }

    /* TODO -> DESIGN : 가운데 수평선 */
    /*#body_egd .wrap-gridboard-cs1 .slist::after {
        content: "";
        position: absolute;
        top: 50%; !* 그리드 높이의 중간 *!
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #E9EBEE; !* 선 색상 *!
        transform: translateY(-16px); !* gap 고려해서 살짝 조정 가능 *!
    }
    */
    .swiper.mypage_bottom_banner .swiper-slide {
        aspect-ratio: 360 / 120;
    }

    .grid-board,
    .product-grid {
        margin-top: 24px;
        display: grid;
        gap: 32px 16px;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .table-calendar tbody td .item:nth-of-type(4),
    .table-calendar tbody td .item:nth-of-type(5) {
        display: none;
    }

    .table-calendar tbody tr {
        height: 131px;
        border-top: 1px solid #E9EBEE;
    }

    .shop-kv.swiper .swiper-slide {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    #modal_view_order_detail .step-detail .tinfo {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 32px;
        padding: 20px 0;
        border-bottom: 1px solid #D5D7DB;
        flex-direction: column;
    }

    #modal_view_order_detail .step-detail .tinfo .imgbox {
        flex: 0 0 100%;
        width: 100%;
    }

    #modal_view_order_detail .step-detail .tinfo .imgbox img {
        max-width: 100%;
        width: 100%;
        object-fit: cover;
        aspect-ratio: 1 / 1;
        border-radius: none;
        border: none;
        background: #fff;
    }

    #modal_view_order_detail .step-detail .tinfo .pinfo {
        display: flex;
        gap: 12px;
        align-items: start;
        justify-content: space-between;
        flex-direction: row;
        width: 100%;
    }

    #modal_view_order_detail .step-detail .tinfo .right {
        padding: 0 20px;
        width: 100%;
    }

    #modal_view_order_detail .step-detail .tinfo .w-total {
        margin: 16px 0 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--Line-Cool-Gray, #E9EBEE);
    }

    .wrap-gridboard-egd3 .slist {
        display: grid;
        gap: 16px 16px;
        grid-template-columns: repeat(1, 1fr);
    }

    #body_esti .form-egd textarea,
    #body_egd .form-egd textarea {
        height: 216px;
        padding: 12px 16px;
        border-radius: 8px;
        border: 1px solid #D5D7DB;
        background: #FFF;
    }

    #body_egd .wrap-dp .w1 .cardbox {
        display: flex;
        gap: 40px;
        justify-content: space-between;
        align-items: stretch;
        width: 100%;
        flex-wrap: wrap;
    }

    #body_egd .wrap-dp .w2 .w2-cont .exp {
        display: flex;
        justify-content: space-between;
        gap: 88px;
        align-items: center;
        margin-top: 160px;
        flex-direction: column !important;
    }

    #body_egd .wrap-dp .w2 .w2-cont .exp .imgbox,
    #body_egd .wrap-dp .w2 .w2-cont .exp .txtbox {
        flex: 1 1 100%;
        width: 100%;
    }

    #body_egd .wrap-dp .w2 .w2-cont .exp:nth-of-type(even) .txtbox * {
        text-align: left;
    }

    #body_egd .wrap-dp .w3 .cardbox .card {
        display: flex;
        flex-direction: column;
        gap: 24px;
        justify-content: space-between;
        align-items: start;
        padding: 20px;
        border-radius: 12px;
        background: #FFF;
        box-shadow: 0px 8px 24px 0px #E8E8E8;
    }

    #body_egd .board-survey .box-exp {
        width: 100%;
        padding: 20px;
        border-radius: 12px;
        background: #F7F7F7;
        color: #171717;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        margin-top: 30px;
        letter-spacing: 0.2px;
    }

    #body_egd.body_survey .container-board {
        padding-top: 16px;
    }

    .board-survey-list {
        display: grid;
        flex-direction: initial;
        gap: 24px 20pxx;
        grid-template-columns: repeat(1, 1fr);
    }

    .board-survey-list .item {
        display: flex;
        width: 100%;
        padding: 16px 0;
        justify-content: space-between;
        align-items: stretch;
        gap: 16px;
        background: #fff;
        color: var(--Text-Secondary, #5B5B5B);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0.2px;
        flex-direction: column;
    }

    .wrap-board-contents .wrap-contents2 .topbox .right,
    .wrap-board-contents .wrap-contents2 .botbox .right {
        flex: 1 1 100%;
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 20px;
        width: 100%;
        flex-direction: column;
    }

    .wrap-board-contents .wrap-contents2 .topbox .right > ul,
    .wrap-board-contents .wrap-contents2 .botbox .right > ul {
        width: 100%;
    }

    .shop-kv.swiper {
        width: 100%;
        max-width: 1920px;
        overflow: hidden;
        position: relative;
        padding: 68px 0 68px;
    }

    .wrap-board-contents .wrap-contents2 .botbox .right > ul > li {
        display: flex;
        justify-content: space-between;
        align-items: start;
        flex-direction: column;
    }

    .wrap-board-contents .wrap-contents2 .botbox .right .dt {
        flex: initial;
        color: var(--Text-Tertiary, #8E8E8E);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: 0.2px;
    }

    .grid-dpt {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        margin: 0 0;
        gap: 10px;
    }

    #body_loginform .box-login {
        margin: 0;
        padding: 24px 0 32px;
        display: flex;
        flex-direction: column;
        border-radius: 0;
        border: 0;
    }

    .wrap-gridboard-cs1.land .slist {
        grid-template-columns: repeat(1, 1fr);
    }

    #body_cnc.board-view.land .grid-box-con {
        grid-template-columns: repeat(1, 1fr);
    }

    #body_cnc.board-view.land .grid-text-con {
        grid-template-columns: repeat(1, 1fr);
    }

    .toobar_contenteditable {
        border-bottom: 1px solid #E9EBEE;
        background-color: #fff;

        padding: 0 0;
        display: flex;
        align-items: center;
        gap: 0;
        flex-wrap: wrap;
    }

    .toobar_contenteditable > div:first-of-type {
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: left;
        gap: 8px;
        width: 100%;
        flex: 1 1 100%;
        border-bottom: 1px solid #E9EBEE;
    }

    .toobar_contenteditable > div:last-of-type {
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: right;
        gap: 8px;
        width: 100%;
        flex: 1 1 100%;
    }

    .btn-commtop-white {
        padding: 0 12px;
        height: 32px;
        font-size: 14px;
    }

    #modal_view_order_detail .step-detail .tinfo button.btn-order {
        position: initial;
        bottom: initial;
        left: initial;
    }

    #body_cs .list-board.cs1 li:nth-of-type(1), #body_cs .list-board.cs1 li:nth-of-type(2) {
        display: none;
    }

    .swiper.cs_top_banner img {
        min-height: 80px !important;
    }

    #body_egd .container-board {
        padding-top: 0 !important;
    }

    #body_egd .only-mobile, #body_esti .only-mobile, #body_product .only-mobile {
        display: none;
    }

    #body_egd.body_survey .container-board {
        padding-top: 60px;
    }

    #wrapper_search {
        padding-top: 0 !important;
    }

    #wrapper_search ul li a {
        font-weight: bold !important;
        color: #fff !important;
    }

    #wrapper_mypage .list-board.m2 ul li .title, .list-board.m1 ul li .title {
        min-height: revert;
    }

    #wrapper_mypage #checkEmailBtn {
        margin-left: 0 !important;
    }

    #body_home.mobile .wrapper_main .swiper.sec_banner_1 .swiper-slide {
        width: 100% !important;
        height: auto !important;
        min-height: revert !important;
        max-height: revert !important;
        aspect-ratio: revert !important;
    }

    .container-board .wrap-btn-list {
        display: flex;
        flex-wrap: wrap; /* 너비 초과 시 줄바꿈 */
        justify-content: space-between; /* left와 right를 양끝으로 */
        gap: 10px; /* 아이템 간 간격 */
        row-gap: 7px; /* 줄 간 간격 */
    }

    .container-board .wrap-btn-list .left {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .container-board .wrap-btn-list .left.left {
        display: flex;
        flex-wrap: unset;
        gap: 5px;
    }

    .container-board .wrap-btn-list .right {
        margin-left: auto; /* 오른쪽 정렬 유지 */
    }

    .footer_new .left {
        width: 100% !important;
    }

    #wrapper_cs .wrapper-comm-contents {
        margin-top: 20px !important;
    }

    #body_cs.body_community .container-board {
        padding-top: 0 !important;
    }

    #body_cs.body_community #wrap .wrap-comm .cont_menu ul {
        padding: 48px 0 16px;
    }

    /* 리사이즈 시 transition 비활성화 (모바일) */
    .no-transition,
    .no-transition *,
    body.no-transition,
    body.no-transition * {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    .swiper.mypage_bottom_banner .swiper-slide {
        aspect-ratio: revert !important;
    }

    .swiper.mypage_bottom_banner img {
        height: auto !important;
        min-height: 80px !important;
    }
}

/* end 767px */