@charset "utf-8";
/* *******************************************************
 * filename : content_responsive.css
 * description : 서브페이지 컨텐츠 반응형 CSS
 * date : 2022-03-14
******************************************************** */

/* ******************  서브공통 ********************** */
@media all and (max-width: 1220px) {
    /* -------- 공통 스크롤바  -------- */
    .custom-scrollbar-wrapper .scroll-object {
        max-width: 100%;
    }
    /* -------- 공통 :: 탭 -------- */
    .sub-tab-list-style .area {
        padding: 0;
    }
}
@media all and (max-width: 1024px) {
    /* -------- 공통 :: 탭 -------- */
    /* Tab Fixed Move*/
    .sub-tab-list-style.top-fixed {
        top: 80px;
    }
}
@media all and (max-width: 800px) {
    .cm-content-tit {
        font-size: 3rem;
    }
    /* -------- 공통 :: 모달 폼 -------- */
    #cmContentModal {
        margin: 50px var(--area-padding);
        max-width: none;
    }
    #cmContentModal .modal-close-btn {
        top: -45px;
        right: 0;
    }
    .cm-content-modal-inner {
        padding: var(--area-padding);
    }
    .cm-content-modal-inner .cm-content-tit {
        text-align: center;
        font-size: 2.4rem;
    }
    .cm-content-modal-inner .bbs-write-tbl-tit {
        font-size: 1.8rem;
    }
    /* -------- 공통 스크롤바  -------- */
    .custom-scrollbar-wrapper {
        position: relative;
        margin-right: calc(-1 * var(--area-padding));
        cursor: move;
    }
    .custom-scrollbar-wrapper .scroll-object {
        max-width: none;
        width: 800px;
    }
    .cm-scroll-drag-guide {
        display: flex;
        justify-content: flex-end;
        margin-right: var(--area-padding);
    }
    .cm-scroll-drag-guide .cm-scroll-drag-inner {
        position: relative;
        width: 50px;
        height: 50px;
    }
    .cm-scroll-drag-guide .cm-scroll-drag-inner:before {
        position: absolute;
        top: 4px;
        right: 0;
        width: 100%;
        height: 3px;
        background-color: #ccc;
        content: "";
        border-radius: 5px;
    }
    .cm-scroll-drag-guide .drag-tail {
        position: absolute;
        z-index: 1;
        left: 0px;
        top: 3px;
        animation: moveScrollAni 3s both infinite;
    }
    .cm-scroll-drag-guide .drag-tail .tail {
        display: block;
        width: 25px;
        height: 5px;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 5px;
        opacity: 1;
    }
    .cm-scroll-drag-guide .drag-tail .hand-icon {
        font-size: 30px;
        color: #aaa;
    }
    @keyframes moveScrollAni {
        0%,
        10% {
            left: 0;
            margin-left: 0px;
        }
        50% {
            left: 100%;
            margin-left: -25px;
        }
        100% {
            left: 0;
            margin-left: 0px;
        }
    }
    .scroll-object-box .mCSB_scrollTools.mCSB_scrollTools_horizontal {
        right: var(--area-padding);
    }
    .scroll-object-box .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
        height: 8px;
        margin: 5px auto;
        background-color: var(--sub-color1);
    }
    .scroll-object-box .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
        height: 4px;
    }
    /* -------- 공통 :: 탭 -------- */
    /* Tab 공통 스타일 */
    .sub-tab-wrapper-style,
    .sub-tab-list-style.top-fixed,
    .sub-tab-list-style ul li a {
        height: 40px;
    }
    .sub-tab-list-style ul li a em {
        font-size: 13px;
    }
    /* Tab Fixed Move*/
    /* Mobile Tab Drop Menu */
    .sub-drop-menu-style {
        position: relative;
    }
    .sub-drop-open-btn-style {
        display: block;
        position: relative;
        padding: 0 15px;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        background-color: #333;
        box-sizing: border-box;
    }
    .sub-drop-open-btn-style span {
        color: #fff;
    }
    .sub-drop-open-btn-style .arrow {
        color: #fff;
        position: absolute;
        top: 50%;
        right: 15px;
        margin-top: -7px;
    }
    .sub-drop-open-btn-style.open .arrow {
        transform: rotate(180deg);
    }
    .sub-drop-menu-style ul {
        display: none;
        margin: 0;
        height: auto;
        position: absolute;
        top: 100%;
        left: 0px;
        right: 0px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-top: 0;
        z-index: 11;
        box-sizing: border-box;
    }
    .sub-drop-menu-style ul li {
        position: static;
        display: block;
        float: none;
        border: 0;
        border-top: 1px solid #eee;
        width: auto;
        background-color: transparent;
    }
    .sub-drop-menu-style ul li:first-child {
        border-top: 0;
        border-left: 0;
    }
    .sub-drop-menu-style ul li a {
        display: block;
        width: auto;
        height: auto;
        padding: 10px 15px;
        border: 0;
    }
    .sub-drop-menu-style ul li a em {
        font-size: 13px;
    }
    .sub-drop-menu-style ul li.selected a {
        background-color: transparent;
    }
    .sub-drop-menu-style ul li.selected a em {
        color: #f57f20;
        font-weight: 600;
    }
}
@media all and (max-width: 480px) {
    /* -------- 공통 :: 탭 -------- */
    /* Tab Fixed Move*/
    .sub-tab-list-style.top-fixed {
        top: 60px;
    }
}

/* ========================================================
======================================================== */
/* ******************  브랜드 소개 ********************** */
@media all and (max-width: 1820px) {
    /* con02 */
    .brand-rnd-item {
        padding: 22rem 5.5rem 20rem;
    }
    .brand-rnd-item .con-box .square-item {
        padding: 3rem 1rem;
    }
}
@media all and (max-width: 1280px) {
    /* con02 */
    .brand-rnd-item-wrap {
        flex-wrap: wrap;
    }
    .brand-rnd-item {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid rgba(246, 246, 246, 0.1);
    }
    .brand-rnd-item {
        padding: 3rem;
    }
    .brand-rnd-item .txt-box {
        min-height: auto;
    }
}
@media (min-width: 801px) and (max-width: 1280px) {
    /* con02 */
    .brand-rnd-item .con-box.square-con-box {
        justify-content: center;
    }
    .brand-rnd-item .con-box .square-item {
        width: 15%;
        margin: 0 1rem;
    }
}
@media all and (max-width: 800px) {
    #brandContent {
        margin-bottom: 7em;
    }
    .cm-tit-box {
        margin-bottom: 2.17em;
    }
    /* con02 */
    .brand-rnd-item .txt-box .tit {
        font-size: 2.8rem;
        margin-bottom: 0;
    }
    .brand-rnd-item .con-box {
        margin-top: 2rem;
    }
    .brand-rnd-item .con-box .circle-item {
        width: 10rem;
        height: 10rem;
    }
    .brand-rnd-item .con-box .circle-item dl dd {
        font-size: 3rem;
    }
    .brand-rnd-item .con-box .circle-item p.txt {
        font-size: 2rem;
    }
    /* con03 */
    .award-logo-list {
        margin-bottom: 3em;
        flex-wrap: wrap;
    }
    .award-logo-list .list-item {
        width: 50%;
        margin-bottom: 1em;
    }
    .brand-certifi-con .certifi-tit {
        margin-bottom: 2rem;
    }
    .brand-certifi-con .certifi-list-con {
        flex-wrap: wrap;
    }
    .brand-certifi-con .certifi-list-con .list-item {
        width: 100%;
        padding: 3rem 1.5rem 2rem;
        margin-bottom: 1.5rem;
    }
    .brand-certifi-con .certifi-list-con .list-item .tit {
        padding-bottom: 2rem;
        margin-bottom: 1.5rem;
    }
    .brand-certifi-con .certifi-list-con .list-item .date-txt {
        margin-top: 2rem;
    }
    .certifi-table-box {
        width: 100%;
        margin-bottom: 4rem;
    }
    .certifi-table-box .certifi-table tbody tr td {
        font-size: 1.4rem;
    }
    /* con04 */
    .brand-partner-item {
        flex-wrap: wrap;
    }
    .brand-partner-item dt {
        width: 100%;
        border-bottom: 1px solid #eee;
        margin-bottom: 1rem;
    }
    .brand-partner-item dt:before {
        background-size: 70% auto;
    }
    /* .brand-partner-item dt .partner-tit{padding-left:6.5rem;} */
    .brand-partner-item dd {
        display: flex;
        flex-wrap: wrap;
        width: auto;
        margin: 0 -1rem;
    }
    .brand-partner-item dd span {
        display: flex;
        align-items: center;
        margin: 1rem;
        width: calc(25% - 2rem);
    }
    .brand-partner-item dd span img {
        max-width: 100%;
    }
}

/* ****************** 브랜드 소개 :: CI,BI ********************** */

@media all and (max-width: 1280px) {
    .ci-color-content .tit-box span svg {
        height: 1.5rem;
    }
}
@media all and (max-width: 800px) {
    .brand-ci-content.con01 {
        margin-bottom: 7rem;
    }
    /* 로고이미지 */
    .brand-ci-con .img-box span {
        padding-top: 220px;
    }
    .brand-ci-con .btn-box {
        padding: 3rem 0;
    }
    .brand-ci-con .btn-box a {
        width: 40%;
        height: 5rem;
        line-height: 5rem;
        padding: 0 1.5rem;
    }
    .brand-ci-con .btn-box a i {
        line-height: 5rem;
    }
    /* 전용색상 */
    .brand-ci-color-con {
        flex-wrap: wrap;
    }
    .ci-color-content {
        padding: 3rem;
    }
    .ci-color-content.con-01,
    .ci-color-content.con-02 {
        width: 100%;
    }
    .ci-color-content.con-01 .color-info {
        display: block;
        text-align: right;
        margin-top: 0;
    }
    .ci-color-content.con-01 .color-info .info-item {
        margin-bottom: 1.4rem;
        margin-right: 0;
    }
    .ci-color-content.con-01 .color-info .info-item:last-child {
        margin-bottom: 0;
    }
    .ci-color-content .tit-box span svg {
        height: 2.6rem;
    }
}

/* ******************  요금제 ********************** */
@media all and (max-width: 1280px) {
    #brandPriceContent {
        padding-bottom: 7rem;
    }
    .price-banner-wrap {
        padding: 13rem 0 18rem;
    }
    .price-list-wrap {
        margin-top: -7.3em;
    }
    .price-list-item {
        padding: 4rem 2rem;
    }
    .price-caution-box {
        margin-top: 6em;
    }
}
@media all and (max-width: 800px) {
    .price-banner-wrap {
        padding: 8rem 0;
    }
    .price-banner-wrap .cm-content-tit {
        line-height: 1.4;
    }
    .price-list-wrap {
        margin-top: 2em;
        flex-wrap: wrap;
    }
    .price-list-item {
        width: 100%;
        margin-bottom: 2rem;
    }
    .price-list-item:last-child {
        margin-bottom: 0;
    }
    .price-list-item .tit {
        margin-bottom: 0.7em;
        padding-bottom: 0.7em;
    }
    .price-list-item .inner-price {
        margin-bottom: 1.2em;
        padding-bottom: 1.2em;
    }
    .price-plus-txt-box {
        margin-top: 3em;
    }
    .price-caution-box {
        padding: 3rem 1.5rem;
        flex-wrap: wrap;
    }
    .price-caution-box .caution-tit {
        width: 100%;
        margin-bottom: 2rem;
    }
    .price-caution-box .caution-list {
        margin-left: 0;
        padding-left: 0;
    }
    .price-caution-box .caution-list:before {
        display: none;
    }
}

/* ******************  APP ********************** */
@media all and (max-width: 1280px) {
    /* App :: Logo */
    .app-logo-con img {
        max-width: 100%;
    }
}
@media all and (max-width: 800px) {
    /* App :: 타이틀 */
    .app-tit-box .app-downlod-btns {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .app-tit-box .app-downlod-btns .app-download-btn {
        width: calc(50% - 1rem);
        height: 5rem;
        font-size: 1.5rem;
        margin: 0;
    }
    /* App :: Rollin */
    .center-active-list-con {
        padding: 5rem 0;
        transform: scale(0.8);
    }
}

/* ========================================================
 * MEMBER
======================================================== */
/* ******************  회원가입 :: 선택 ********************** */
@media all and (max-width: 800px) {
    .join-select-list {
        display: block;
        margin: 0;
    }
    .join-select-list > li {
        width: auto;
        margin: 0 0 10px 0;
    }
}
/* ******************  회원가입 :: 주의문구 ********************** */
@media all and (max-width: 800px) {
    .join-cuation-box dl {
        display: block;
    }
    .join-cuation-box dl dt {
        width: auto;
        border-bottom: 1px solid #bbb;
        padding-bottom: 10px;
    }
    .join-cuation-box dl dt br {
        display: none;
    }
    .join-cuation-box dl dt:after {
        display: none;
    }
    .join-cuation-box dl dd {
        width: auto;
        padding-left: 0;
        padding-top: 10px;
    }
}

/* ========================================================
 * MYPAGE
======================================================== */
/* ******************  MYPAGE :: 간편결제 등록 ********************** */
@media all and (max-width: 800px) {
    .member-out-txt {
        text-align: center;
        margin-top: 3rem;
    }
    .simple-pay-agree-con {
        display: block;
    }
    .simple-pay-agree-con .pay-agree-item {
        width: auto;
        height: auto;
        flex-wrap: wrap;
        margin-bottom: 5px;
    }
    .bbs-write-tbl td .write-sub-txt.inline {
        display: inline-block;
    }
    .business-num-check {
        display: block;
        padding-left: 0;
        margin-top: 10px;
    }
    .pay-agree-privacy-box {
        position: static;
        padding: 2rem 0;
    }
}
/* ******************  MYPAGE :: 회원카드 ********************** */
@media all and (max-width: 800px) {
    .card-list-tbl .bbs-list-row {
        text-align: left;
    }
    .card-list-tbl .bbs-list-row .column {
        color: #333;
    }
    .card-list-tbl .card-name {
        font-size: 1.3em;
        font-weight: 600;
        color: #444;
    }
    .card-list-tbl .card-number {
        display: block;
        font-weight: 500;
        margin-bottom: 10px;
        font-size: 1.1em;
    }
    .card-list-tbl .card-number.inline {
        display: inline-block;
    }
    .card-list-tbl .bbs-list-row .column.bbs-inline {
        margin-top: 10px;
    }
    .bbs-list-card-apply-list {
        padding-top: 35px !important;
    }
    .bbs-list-card-apply-list .bbs-card-num {
        position: absolute;
        top: 10px;
        left: 0px;
    }
    /* 신청취소버튼 */
    .card-list-tbl .card-cancel {
        font-size: 0.8rem;
        padding: 0.3rem 0.5rem;
    }
}
/* ******************  MYPAGE :: 카드등록 ********************** */
@media all and (max-width: 800px) {
    .card-img-con img {
        display: inline-block;
        margin-bottom: 10px;
        width: 100%;
        max-width: 366px;
    }
}

/* ******************  APP 수정 (2023-04-05)  ********************** */
/* QR코드 이미지 추가 */
@media all and (max-width: 800px) {
    .app-download-wrap {
        display: block;
    }
    .app-download-wrap .app-qr-img {
        margin-top: 3rem;
    }
    .app-download-wrap .app-qr-img span {
        margin: auto;
    }
}