/**************** public *******************/


/*
:root{
    --primary-color: #3CCBDB;
    --red-100-color: #FE6F61;
    --red-200-color: #FF8B8B;
    --accent-color: #F7E948;
    --standard-radius: 15px;
    --border-round-S: 5px;
    --border-round-L: 10px;
    --border-color: #EDEDED;
    --theme-color: #3CCBDB;
    --theme-bg-color: #F8F8FA;
    --theme-font-color: #444C67;
    --disabled-font-color: #C4C4C4;
    --disabled-gray-color:#D2D2DF;
    --gray-font-color:#454D56;
    --box-shadow: 10px 10px 10px rgba(212, 212, 223, 0.2);
    --box-shadow_black: 3px 3px 4px rgba(0, 0, 0, 0.25);
    --bg-gray: #F4F5F9;
    --bg-gray-color: #F8F8FA;
    --navy-color:#454D56;
    --gradient-color: linear-gradient(98deg, #3CCBDB 32.37%, #F7E847 114.35%);
    --gradient-hover-color: linear-gradient(98deg, #2E97A3 32.37%, #F7E847 114.35%);
    --placeholder-color: #B7BECD;
    --line-color: #E4E8EE;
}
*/


    @font-face {
        font-family: 'Noto Sans KR';
        src: url('../fonts/NotoSansKR-Black.woff2') format('font-woff2'),
             url('../fonts/NotoSans-Black.woff') format('woff');
        font-weight: 900;
        font-style: normal;
    }
    @font-face {
        font-family: 'Noto Sans KR';
        src: url('../fonts/NotoSansKR-Bold.woff2') format('font-woff2'),
             url('../fonts/NotoSans-Bold.woff') format('woff');
        font-weight: 700;
        font-style: normal;
    }

    @font-face {
        font-family: 'Noto Sans KR';
        src: url('../fonts/NotoSansKR-Medium.woff2') format('font-woff2'),
             url('../fonts/NotoSans-Medium.woff') format('woff');
        font-weight: 500;
        font-style: normal;
    }

    @font-face {
        font-family: 'Noto Sans KR';
        src: url('../fonts/NotoSansKR-Regular.woff2') format('font-woff2'),
             url('../fonts/NotoSans-Regular.woff') format('woff');
        font-weight: 400;
        font-style: normal;
    }

    @font-face {
        font-family: 'Noto Sans KR';
        src: url('../fonts/NotoSansKR-Light.woff2') format('font-woff2'),
             url('../fonts/NotoSans-Light.woff') format('woff');
        font-weight: 300;
        font-style: normal;
    }

    * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: 'Noto Sans KR', -apple-system,Arial, sans-serif; 
        -webkit-tap-highlight-color: transparent;
    }
    html, body, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
    abbr, address, big, cite, code, del, dfn, em, font, img, ins, q, s, samp, small, 
    strike, strong, sub, sup, tt, var, b, u, i, ul, ol, li, dl, dt, dd, table, caption,
    tbody, tfoot, thead, tr, th, td, fieldset, fo7m, label, legend, input, button, textarea, select 
    {margin:0; padding: 0; }
    html, body { margin: 0; padding: 0; height: 100%;}

    body { background-color: #fff; margin: 0; height: auto; font-size: 16px; min-height: 100vh; letter-spacing: -0.4px; color: #222; }
    input, select, textarea { border: 1px solid #ccc; height: 40px; padding: 5px 15px; /*font-family:"Droid Sans";*/ outline: none; font-size: 1em; }
    textarea { resize: none; }
    input:focus, select:focus, textarea:focus { border-color: #333; }
    input::placeholder, select::placeholder, textarea::placeholder { color: var(--placeholder-color); }
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url(../img/icon/tool/select_down.svg);
        background-position: right 10px center;
        background-repeat: no-repeat;
        padding-right: 40px;
        background-size: 13px;
   }
    select::-ms-expand {
        display: none;
    }
    select option[hidden] {
        color: red;
    }
    input::placeholder,
    input:disabled {
        color: var(--placeholder-color);
        
    }
    input:disabled {
        cursor: default !important;
        background: #F5F5FA;
        border: none;
    }
    input[type="text"] { width:100%; }
    input[name="title"] { font-size: 21px; font-weight: 800; text-align: center; }
    input[type="password" i] { }
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
input{
    border: 1px solid var(--line-color);
    border-radius: var(--border-round-S);
    
    
}

    button { cursor: pointer; border: 1px solid #eee; }
/*    button:focus { outline: none; box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);  border: none;}*/
    button:focus { outline: none; border: none;}
    ul { list-style: none; }
    a { color: currentColor; text-decoration: none; }
    h1,h2,h3,h4,h5 { font-size: 1em; }

textarea{
    border-color: var(--line-color,#E4E8EE);
    padding: 10px 5px;
    border-radius: 5px;
/*    min-height: 108px;*/
}
textarea::placeholder{
    color: #888;
}



/* scroll bar */

*::-webkit-scrollbar {
    width: 15px;
    background-color: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #9499B4;
    border: 5px solid #fff;
    border-radius: 15px;
    cursor: pointer;
    opacity: 0;
}

*::-webkit-scrollbar-track {
    background-color: transparent;
    opacity: 0;
}



    /*체커 */
.checkbox_ {
    position: relative;
    height: 100%;
}
.checkbox_ input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}
.checkbox_ input + label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.checkbox_ input + label:before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 0;
    margin-right: 5px;
    background-image: url(../img/icon/tool/check_2px.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.checkbox_ input:checked + label:before {
    background-image: url(../img/icon/tool/checked_2px.svg);
/*
    box-shadow: 0px 3px 6px #3CCBDB;
    -webkit-box-shadow: 0px 2px 3px #3CCBDB;
*/
}

.checkbox_.round input + label:before {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 5px;
    margin-right: 10px;
/*        background-image: url(../img/icon/tool/check_R.svg);*/
    background-repeat: no-repeat;
    background-size: cover;
}
.checkbox_.round input:checked + label:before {
/*        background-image: url(../img/icon/tool/checked_R.svg);*/
/*
    box-shadow: 0px 3px 6px #3CCBDB;
    -webkit-box-shadow: 0px 3px 6px #3CCBDB;
*/
}


/* button */

.small_button_fill{
    
}
.medium_button_fill{
    
}
.large_button_fill{
    
}
.full_button_fill{
    width: 100%;
    border-radius: var(--border-round-S);
    background-color: var(--primary-color);
    color: #fff;
    line-height: 1;
    padding: 12px 0;
    min-height: 48px;
}


.small_button_border{
    
}
.medium_button_border{
    
}
.large_button_border{
    
}

.full_button_border{
    border: 1px solid var(--primary-color);
    border-radius: var(--border-round-S);
    color: var(--primary-color);
    background: #fff;
    width: 100%;
    padding: 12px 0 ;
    font-size: 14px;
}
/* color */




/* modal */

.modal-dialog .ui-modal-content {
        position: relative;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }
.modal-dialog .ui-modal-content .modal-layer{
    max-width: 650px;
    height: 90vh;
    padding: 25px;
}
.modal-dialog .ui-modal-content .ui-modal-layer{
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap:20px;
    max-width: 650px;
    max-height: 90dvh;
}


.modal-dialog .ui-modal-content .ui-modal-layer .head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 22px;
    font-weight: 600;
    color: #333;
}

.modal-dialog .ui-modal-content .ui-modal-layer .head .closer{
    cursor: pointer;
    max-width: 20px;
}
.modal-dialog .ui-modal-content .ui-modal-layer .content{
    overflow-y: auto;
}


    


.field_area .field_col{
    gap:10px;
}
.field_area .field_col h3{
    color: #222;
    font-weight: 500;
    font-size: 16px;
}

@media (max-width:800px){
    .modal-dialog .ui-modal-content .ui-modal-layer{
        width: calc(100% - 20px);
    }
    .modal-dialog .ui-modal-content .ui-modal-layer .head{
        font-size: 16px;
    }
    .modal-dialog .ui-modal-content .ui-modal-layer .head .closer{
        max-width: 15px;
    }
}

/* layout */
.flex_col{
    display: flex;
    flex-direction: column;
}


.bg_gray{
    background: var(--bg-gray);
    border-radius: 10px;
}







 
    /* color */

.fill_btn{
    background: var(--primary-color);
    color: #fff;
    display: inline-block;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid var(--primary-color);
}

.fill_btn:hover{
    background: #fff;
    color: var(--primary-color);
}

    .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #eee;
        border-radius: 5px;
        font-size: 1em;
    }

    .btn_border{
        display: inline-block;
        border-radius: 5px;
        color: #3CCBDB;
        border: 1px solid #3CCBDB;
        background:#FFF;
        line-height: 1;
        max-width: 220px;
        width: 100%;
        text-align: center;
        cursor: pointer;
    }
    .btn_border:hover{
        background: var(--primary-color);
        color: #fff;
    }
    
    .btn-disabled { background-color: #eee; color: #666; border-color: #ccc; }

    .btn_ {
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 5px 12px;
        color: #888;
    }
    .submitBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 220px;
        height: 60px;
        background-color: #3CCBDB;
        border-radius: 10px;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        border: none;
/*
        box-shadow: 0px 10px 20px rgba(60,203,219,0.3);
        -webkit-box-shadow: 0px 10px 20px rgba(60,203,219,0.3);
*/
        position: relative;
    }
    .submitBtn.disabled{
        background-color: #B1B1B1;
        box-shadow: none;
        -webkit-box-shadow: none;
    }
    .submitBtn:not(.disabled):hover{
        background-color: #fff;
        color: #3CCBDB;
        border: 1px solid #3ccbdb;
        box-shadow: none;
    }
    .subBtn {
        width: 220px;
        height: 60px;
        background-color: #EEEEEE;
        border-radius: 10px;
        color: #999;
        font-size: 18px;
        font-weight: 700;
        border: none;
    }
    .moreBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        width: 220px;
        height: 60px;
        font-size: 18px;
        font-weight: 700;
        color: #9499B4;
        background-color: #F5F5FA;
    }
    .moreBtn img {
        margin-left: 10px;
    }

.line_btn{
    color: #999;
    border: none;
    background: transparent;
    border-bottom: 1px solid #999;
    margin-left: auto;
}

.whiteBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 10px;
        color: #3CCBDB;
        font-size: 16px;
        font-weight: 700;
        border: 1px solid #3CCBDB;
    
/*        padding: 13px 40px;*/
    }
@media(max-width:800px){
    .whiteBtn{
        border-radius: 4px;
    }
}

    .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  }
    .ellipsis2 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.2em;
        height: 2.4em;
    }
    
    .inner {
        position: relative;
        margin: 0 auto;
        width: 1440px;
    }


.accent_color{
    color: var(--primary-color);
}
.accent_bold{
    color: var(--primary-color);
    font-weight: 700;
}

.text-red{
    color: var(--red-100-color);
}

.option_ .opt_info{
    padding: 4px 10px;
    border-radius: 50px;
    border: 1px solid #904AAC;
    font-size: 12px;
    color: #904AAC;
    display: inline-block;
}
.campaign_slide .inner{
    width: 1460px;
}

.campaign_slide .slide_inner{
    overflow: hidden;
    padding: 0 10px;
    padding-bottom: 5px;
}

    .mobile_line {
        display: none;
        margin: 0;
        width: 100%;
        border: 0;
        border-top: 4px solid #eee;
        background-color: transparent;
    }

    .mt70 {
        margin-top: 70px;
    }
    .mt50 {
        margin-top: 50px;
    }

.displaynone{
    display: none !important;
}

.visibility {
  visibility: hidden !important; 
}

.loading_wait{
    display: none;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.loading_wait img{
    max-height: 32px;
}

.loading {
/*
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
*/
}

.loading span:not(.loader) {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: var(--accent-color);
  border-radius: 50%;
  animation: loading 1s linear infinite;
}

.loading span:nth-child(1) {
  animation-delay: 0s;
}

.loading span:nth-child(2) {
  animation-delay: 0.2s;
  margin: 0px 10px
}

.loading span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes loading {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.loader {
    width: 38px;
    height: 38px;
    border: 4px solid var(--primary-color);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    position: absolute;
    left: calc(50% - 20px);
    top: 50%;
    transform: translate(-50%, -50%);
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    }

.spinner{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 80px);
    z-index: 9999;
}

.spinner img{
    width: 100px;
}
.toastify{
    max-width: calc(70% - 20px);
}

.tooltip{
    cursor: pointer;
}


.send_message_btn{
    display: flex;
    gap:8px;
    padding: 12px;
    border-radius: 8px;
    line-height: 1;
    font-size: 16px;
    font-weight: 400;
} 
.send_message_btn img{
    max-width: 16px;
}

[data-btn-type="floating"]{
    position: fixed;
    right: 34px;
    bottom: 184px;
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 50px;
/*    box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px 4px 6px, rgba(0, 0, 0, 0.15) 0px 8px 30px;*/
    cursor: pointer;
    z-index: 999;
}
[data-btn-type="floating"] span{
    font-size: 12px;
    font-weight: 400;
}

[data-btn-type="floating"] .message_count{
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background: var(--red-100-color);
    color: #fff;
    text-align: center;
}

[data-btn-type="floating"] .message_read_tooltip{
    position: absolute;
    top: -55px;
    right: 0;
    width: 254px;
    padding: 10px;
    background: var(--accent-color);
    border-radius: 10px;
    color: #222;
    font-size: 13px;
    display: flex;
    align-items: center;
}
[data-btn-type="floating"] .message_read_tooltip::before{
    content: "";
    position: absolute;
    display: inline-block;
    border-top: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 18px solid var(--accent-color);
    z-index: 1;
    bottom: -12px;
    right: 20px;
    transform: rotate(180deg);
    
}

[data-btn-type="floating"] .message_read_tooltip img{
    max-width: 12px;
    margin-left: 8px;
    cursor: pointer;
}

html body iframe[src*='about:blank'][title='chat widget']:first-child{
    outline: none !important;
    visibility: visible !important;
    resize: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    background: none !important;
    opacity: 1 !important;
    filter: alpha(opacity = 100) !important;
    -mz-opacity: 1 !important;
    -khtml-opacity: 1 !important;
    top: auto !important;
    right: 30px !important;
    bottom: 110px !important;
    left: auto !important;
    position: fixed !important;
    border: 0 !important;
    min-height: 60px !important;
    min-width: 64px !important;
    max-height: 60px !important;
    max-width: 64px !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-transition-property: none !important;
    -webkit-transition-property: none !important;
    -o-transition-property: none !important;
    transition-property: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    width: 64px !important;
    height: 60px !important;
    display: block !important;
    z-index: 1000001 !important;
    background-color: transparent !important;
    cursor: none !important;
    float: none !important;
    border-radius: unset !important;
    pointer-events: auto !important;
    clip: auto !important;
    color-scheme: light !important;
}

html body iframe[src*='about:blank'][title='chat widget']:nth-child(2){
    display: none !important;
}
html body iframe[src*='about:blank'][title='chat widget']:nth-child(3){
    display: none !important;
}
html body iframe[src*='about:blank'][title='chat widget'].open:nth-child(2){
     outline: none !important;
    visibility: visible !important;
    resize: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    background: none !important;
    opacity: 1 !important;
    filter: alpha(opacity = 100) !important;
    top: auto !important;
    right: 10px !important;
    bottom: 180px !important;
    left: auto !important;
    position: fixed !important;
    border: 0 !important;
    min-height: 500px !important;
    min-width: 350px !important;
    max-height: 650px !important;
    max-width: 450px !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-transition-property: none !important;
    -webkit-transition-property: none !important;
    -o-transition-property: none !important;
    transition-property: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    width: 100% !important;
    height: 650px !important;
    display: block !important;
    z-index: 1000002 !important;
    background-color: transparent !important;
    cursor: none !important;
    float: none !important;
    border-radius: 5px !important;
    pointer-events: auto !important;
    clip: auto !important;
    color-scheme: light !important;
}

html body iframe[src*='about:blank'][title='chat widget']:nth-child(4){
    outline: none !important;
    visibility: visible !important;
    resize: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    background: none !important;
    opacity: 1 !important;
    filter: alpha(opacity = 100) !important;
    -mz-opacity: 1 !important;
    -khtml-opacity: 1 !important;
    top: auto !important;
    right: 45px !important;
    bottom: 95px !important;
    left: auto !important;
    position: fixed !important;
    border: 0 !important;
    min-height: 44px !important;
    min-width: 37px !important;
    max-height: 44px !important;
    max-width: 37px !important;
    padding: 0 !important;
    margin: 0px 0 0 0 !important;
    -moz-transition-property: none !important;
    -webkit-transition-property: none !important;
    -o-transition-property: none !important;
    transition-property: none !important;
    transform: rotate(0deg) translateZ(0);
    -webkit-transform: rotate(0deg) translateZ(0);
    -ms-transform: rotate(0deg) translateZ(0);
    width: 37px !important;
    height: 44px !important;
    display: none !important;
    z-index: 1000002 !important;
    background-color: transparent !important;
    cursor: none !important;
    float: none !important;
    border-radius: unset !important;
    pointer-events: auto !important;
    clip: auto !important;
    color-scheme: light !important;
    -moz-transform: rotate(0deg) translateZ(0);
    -o-transform: rotate(0deg) translateZ(0);
    transform-origin: 0;
    -moz-transform-origin: 0;
    -webkit-transform-origin: 0;
    -o-transform-origin: 0;
    -ms-transform-origin: 0;
}


html body iframe[src*='about:blank'][title='chat widget']:nth-child(5){
    outline: none !important;
  visibility: visible !important;
  resize: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  background: none !important;
  opacity: 1 !important;
  filter: alpha(opacity = 100) !important;
  -mz-opacity: 1 !important;
  -khtml-opacity: 1 !important;
  top: auto !important;
  right: 45px !important;
  bottom: 105px !important;
  left: auto !important;
  position: fixed !important;
  border: 0 !important;
  min-height: 44px !important;
  min-width: 37px !important;
  max-height: 44px !important;
  max-width: 37px !important;
  padding: 0 !important;
  margin: 0px 0 0 0 !important;
  -moz-transition-property: none !important;
  -webkit-transition-property: none !important;
  -o-transition-property: none !important;
  transition-property: none !important;
  transform: rotate(0deg) translateZ(0);
  -webkit-transform: rotate(0deg) translateZ(0);
  -ms-transform: rotate(0deg) translateZ(0);
  width: 37px !important;
  height: 44px !important;
  display: none !important;
  z-index: 1000002 !important;
  background-color: transparent !important;
  cursor: none !important;
  float: none !important;
  border-radius: unset !important;
  pointer-events: auto !important;
  clip: auto !important;
  color-scheme: light !important;
  -moz-transform: rotate(0deg) translateZ(0);
  -o-transform: rotate(0deg) translateZ(0);
  transform-origin: 0;
  -moz-transform-origin: 0;
  -webkit-transform-origin: 0;
  -o-transform-origin: 0;
  -ms-transform-origin: 0;
}
  

@media (max-width: 800px) {
    body.tawk-mobile, html.tawk-mobile {
        font-size: 18px !important;
    }
    
    html body iframe[src*='about:blank'][title='chat widget']:first-child{
        right: 6px !important;
        bottom: 80px !important;
        min-width: auto !important;
        min-height: auto !important;
        transform: scale(0.85) !important;
    }
    
    html body iframe[src*='about:blank'][title='chat widget'].open:nth-child(2){
        top: 0 !important;
        left: 0 !important;
        height: 100dvh !important;
        width:  100dvw !important;
        max-height: none !important;
        max-width: none !important;
    }
    
    html body iframe[src*='about:blank'][title='chat widget']:nth-child(4){
        right: 20px !important;
        bottom: 70px !important;
    }
    html body .tawk-min-container .tawk-button-circle.tawk-button-large{
        width: 50px;
        height: 50px;
    }
}


.empty_list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    padding: 180px 0;
    gap: 20px;
}

/* tool */
    /* 셀럭터 */
    .select__wrap {
        flex-grow: 1;
    }
    .selectBox__ .box__ {
        position: relative;
    }
    .selectBox__ .select__ {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-image: url(../img/icon/tool/select_down.svg);
        background-position: right 20px center;
        background-repeat: no-repeat;
        padding-right: 40px;
        white-space: nowrap;
        border-radius: 8px;
        padding-left: 15px;
    }
    .selectBox__ .select__ .holder {
        color: #888;
    }
    .selectBox__ .list__ {
        position: absolute;
        left: 0;
        top: 120%;
        width: 100%;
        background-color: #fff;
        display: none;
        border-radius: 10px;
        box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
        overflow: hidden;
        z-index: 9;
        border: 1px solid var(--primary-color);
    }
    .selectBox__ .list__ li {
        display: flex;
        justify-content: flex-start;
        align-content: center;
        padding: 15px;
    }
    .selectBox__ .list__ li:hover {
        background-color: #ECF9FB;
    }
    .selectBox__ .list__ li.selected {
        background-color: #ECF9FB;
        color: #16B9CB;
        font-weight: 500;
    }

    .selectBox__ .select__, 
    .selectBox__ .list__ li {
        cursor: pointer;
    }
    .selectBox__.on .list__ {
        display: block;
    }

.selectBox__.cp_detail_select{
    width: 100%;
/*    background-color: #fff;*/
    color: #666;
    font-size: 14px;
/*    border: 1px solid #CAEFF3;*/
}
.selectBox__.cp_detail_select .box__{
    padding: 10px 16px;
    
}

.selectBox__ .list__ li .option{
        border: 1px solid var(--primary-color);
        padding: 5px 5px;
        font-size: 12px;
        border-radius: 5px;
/*        min-width: 57px;*/
        text-align: center;
}
.selectBox__ .list__ li .option span{
    display: inline-block;
    width: max-content;
}
.selectBox__ .list__ li .text{
    text-wrap: pretty;
}
.selectBox__ .list__ li.sold{
    pointer-events: none;
}
    .selectBox__ .list__ li.sold .option{
        border-color: #666;
        color: #666;
    }
    .selectBox__ .list__ li.sold .option span{
        color: #666;
    }
    .selectBox__ .list__ li.sold .text{
        text-decoration: line-through;
    }

.selectBox__.cp_detail_select .list__{
    width: 100%;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    top: 120%;
    position: static;
    display: block;
    box-shadow: none;
    max-height: 40dvh;
    overflow-y: auto;
}

.selectBox__.cp_detail_select .list__::-webkit-scrollbar {
    width: 15px;
    background-color: transparent;
 }
.selectBox__.cp_detail_select .list__::-webkit-scrollbar-thumb {
    background-color: #9499B4;
    border: 5px solid #F5F5FA;
    border-radius: 15px;
    cursor: pointer;
    opacity: 0;
 }
.selectBox__.cp_detail_select .list__::-webkit-scrollbar-track {
    background-color: transparent;
    opacity: 0;
 }

.cp_detail_select.selectBox__ .list__ li{
    align-items: center;
    gap:10px;
}
.cp_detail_select.selectBox__ .list__ li.select{
    background: #DDF0F2;
}

.cp_detail_select.selectBox__ .select__{
    background-image: url(../img/icon/tool/select_down.svg);
    background-position: right;
}
.cp_detail_select.selectBox__ .select__::before{
    background-image: none;
    display: none;
}

.cp_detail_select.selectBox__ .select__ .text{
    text-overflow: ellipsis;
    overflow: hidden;
}

.PC_content{
        display: block;
}
.MO_content{
    display: none;
}



.chip_cont.check_area .checkbox_.icon label{
    background: none;    
    color: #666;
    padding: 0;
    flex-direction: column;
}



    .checkbox_.tab input + label:before {
        display: none;
    }
    .checkbox_.tab input + label {
        font-size: 14px;
        font-weight: 500;
        color: #666;
        border-radius: 10px;
        padding: 10px;
        background: #eee;
        justify-content: center;
    }
    .checkbox_.tab input + label .icon {
        margin-right: 10px;
    }
    .checkbox_.tab input:checked + label {
        color: #fff;
        background-color: var(--primary-color);
    }
/*

    .checkbox_.tab input:checked + label i.camera {
        background-image: url(../img/icon/fe/camera_a.svg);
    }
    .checkbox_.tab input:checked + label i.hood {
        background-image: url(../img/icon/fe/hood_a.svg);
    }
    .checkbox_.tab input:checked + label i.back {
        background-image: url(../img/icon/fe/back_a.svg);
    }
    .checkbox_.tab input:checked + label i.shirt {
        width: 18px;
        background-image: url(../img/icon/fe/shirt_a.svg);
    }
    .checkbox_.tab input:checked + label i.beauty {
        width: 18px;
        background-image: url(../img/icon/fe/beauty_a.svg);
    }
    .checkbox_.tab input:checked + label i.pacifier {
        width: 18px;
        background-image: url(../img/icon/fe/pacifier_a.svg);
    }
    .checkbox_.tab input:checked + label i.dumbbell {
        width: 14px;
        background-image: url(../img/icon/fe/dumbbell_a.svg);
    }
    .checkbox_.tab input:checked + label i.phone {
        width: 14px;
        background-image: url(../img/icon/fe/phone_a.svg);
    }
    .checkbox_.tab input:checked + label i.stamp {
        background-image: url(../img/icon/fe/stamp_a.svg);
    }
*/


.fixed_head{
    display: none;
}

@media (max-width:800px){
    .fixed_head{
        display: block;
        position: fixed;
        top: 0;
        width: 100%;
        background: #fff;
        display: flex;
        gap: 15px;
        align-items: center;
        padding: 15px 15px 15px;
        font-size: 16px;
        z-index: 999;
        line-height: 1;
        font-weight: 600;
    }   
    .fixed_head a{
        line-height: 1;
    }
    .fixed_head .head{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        line-height: 1.4;    
    }
    .fixed_head .message_btn{
        background: var(--accent-color);
        padding: 11.5px 20px;
        line-height: 1;
        border-radius: 5px;
        cursor: pointer;
        margin-left: auto;
        font-size: 14px;
    }
}

#missionModal .check_area{
    gap:15px 20px;
}

.chip_cont.check_area{
    gap:20px;
}


    .check_area {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        row-gap:15px;
    }
    .check_area .checkbox_ {
        margin: 0;
/*        margin-right: 5px;*/
/*        margin-bottom: 5px;*/
    }
    .check_area .checkbox_:last-child {
        margin-right: 0;
    }


    /* 검색 */
    .search_area {
        position: relative;
        width: 420px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 46px;
        border-bottom: 1px solid #222;
    }
    .search_area input {
        width: 100%;
        height: 100%;
        border: none;
        padding: 8px;
        padding-right: 45px;
    }
    .search_area button {
        position: absolute;
        right: 0;
        top: 0;
        width: 46px;
        height: 100%;
        background-color: transparent;
        background-image: url(../img/icon/tool/fas.svg);
        background-repeat: no-repeat;
        background-position: center;
        border: none;
    }
    .search_area button:focus {
        box-shadow: none;
    }

    /*프로필 카드*/
    .profile {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .profile .profile_img {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #EFEFEF;
        border-radius: 50%;
        overflow: hidden;
    }
    .profile .profile_img img {
        max-width: 100%;
        max-height: 100%;
    }

    /* 페이지 텝*/
.area_tab{
    font-weight: 500;
}
.area_tab > div{
    font-weight: 500;
    font-size: 24px;
    cursor: pointer;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
}
.area_tab > div span{
    font-weight: 700;
    cursor: pointer;
    color: var(--primary-color);
}

.area_tab .area_list_box{
    position: absolute;
    padding: 20px;
    border: 1px solid #ccc;
    max-width: 700px;
    display: none;
    background: #fff;
    z-index: 99;
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba(100,100,100,0.3);
}
.area_tab .area_list_box.active{
    display: block;
}
.area_tab .area_list_box::before{
    content: "";
    position: absolute;
    left: 80px;
    top: -9px;
    display: inline-block;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    width: 16px;
    height: 16px;
    background: #fff;
    transform: rotate(45deg);
}

.area_tab .location{
    display: flex;
    border-top: 1px dashed #ccc;
    padding: 16px 0;
    font-size: 14px;
}
.area_tab .location:last-child{
    padding-bottom: 0;
}
.area_tab .all_location{
    font-size: 18px;
    padding-bottom: 20px;
}



.area_tab .location .left{
    flex:1;
    cursor: auto;
}
.area_tab .location .right{
    flex:5;
}

.area_tab .location_detail{
    display: flex;
    gap:14px;
    flex-wrap: wrap;
}

.area_tab .location_detail li{
    list-style: none;
    font-weight: 400;
    color: #666;
    width: 20%;
    word-break: keep-all;
}
.area_tab .location_detail li a:hover{
    color: var(--primary-color);
    font-weight: 700;
}
.area_tab .location_detail li.active{
    color: var(--primary-color);
    font-weight: 700;
}

    .listTab_area {
        width: 100%;
        height: 50px;
        margin-bottom: 40px;
        padding: 0 10px;
        border-bottom: 1px solid #EEEEEE;
    }
   .listTab_area ul {
        display: flex;
/*        justify-content: stretch;*/
        align-items: center;
        height: 100%;
        flex-wrap: nowrap;
    }
    .listTab_area ul li {
        width: auto;
        height: 100%;
        border-bottom: 4px solid transparent;
        margin: 0;
    }
    .listTab_area ul li + li {
        margin-left: 15px;
    }
    .listTab_area ul li a {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #666;
        min-width: 50px;
        height: 100%;
        flex-direction: column;
    }
    .listTab_area ul li a img{
        display: none;
    }
    .listTab_area ul li.active {
        border-color: #3CCBDB;
    }


    /* 베너*/
    .text_banner_area {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        border-radius: 15px;
        overflow: hidden;
        margin-bottom: 40px;

        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .text_banner_area .wrap {
        text-align: center;
    }
    .text_banner_area .tit {
        font-size: 26px;
        margin-bottom: 2px;
    }
    .text_banner_area .desc {
        white-space: pre-line;
    }

.text_banner_area.custom{
    flex-direction: column;
    height: auto;
    gap:30px;
    padding: 20px;
}

    .text_banner_area.custom .wrap{
        display: flex;
        gap:30px;
    }

    .text_banner_area.custom .wrap .desc{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px 0;
        text-align: left;
    }

.text_banner_area.custom .wrap .desc span:first-child{
    font-size: 20px;
    font-weight: 400;
}

.text_banner_area.custom .wrap .desc span:last-child{
    font-size: 15px;
    font-weight: 400;
}

.text_banner_area.custom .custom_cont{
    display: flex;
    align-items: center;
    gap:90px;
}

.text_banner_area.custom .custom_cont .btn_cont{
    padding-top: 0;
    display: block;
}

.text_banner_area.custom .custom_set_area{
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    gap:20px;
}

.text_banner_area.custom .custom_set_area .subject{
    display: flex;
    gap:40px;
    align-items: center;
}

.text_banner_area.custom .custom_set_area .subject div:first-child{
    font-size: 17px;
    font-weight: 700;
    flex: 1;
    min-width: 70px;
    max-width: 70px;
}

.text_banner_area.custom .custom_set_area .subject div:last-child{
    display: flex;
    gap:20px;
    flex-wrap: wrap;
    flex:10;
    font-size: 14px;
}

.text_banner_area.custom .custom_set_area .subject div span{
/*    border-radius: 3px;*/
/*    border: 1px solid var(--primary-color);*/
/*    background: rgba(60, 203, 219, 0.08);*/
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
/*    padding: 14px 20px;*/
    color: var(--primary-color);
}

.campaign__ .custom_cont .btn_cont a{
    min-width: 204px;
}

.swiper-slide[data-item='1']{
    background: var(--primary-color);
}
.swiper-slide[data-item='2']{
    background: #eee;
}

.banner[data-banner="assaview_time"]{
    background: var(--primary-color);
    color: #fff;
    max-width: 1440px;
    margin: 0 auto;
    border-radius: var(--border-round-L);
    display: flex;
    gap:157px;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    overflow: hidden;
}
[data-item='2'] .banner[data-banner="assaview_time"]{
    background: #eee;
    color: #222;
}
.banner[data-banner="assaview_time"] br{
        display: none;
}
.banner[data-banner="assaview_time"] .hard_working br{
        display: block;
}
.banner[data-banner="assaview_time"] h2{
    font-size: 34px;
}
.banner[data-banner="assaview_time"] h2 br{
    display: none;
}
.banner[data-banner="assaview_time"] p{
    font-size: 22px;
}
.banner[data-banner="assaview_time"] img{
    max-width: 195px;
    transform: translateY(27px);
}

.banner[data-banner="row_align"]{
/*    background: var(--primary-color);*/
    color: #fff;
    max-width: 1440px;
    margin: 0 auto;
    border-radius: var(--border-round-L);
    display: flex;
    gap:10px;
    justify-content: center;
    padding: 20px 40px;
    overflow: hidden;
}
.banner[data-banner="column_align"]{
    background: var(--primary-color);
    color: #fff;
    max-width: 1440px;
    margin: 0 auto;
    border-radius: var(--border-round-L);
    display: flex;
    flex-direction: column;
    gap:10px;
    justify-content: center;
    padding: 20px 40px;
    overflow: hidden;
}
.banner[data-banner="column_align"] .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.banner[data-banner="column_align"] .top h2{
    font-size: 18px;
}
.banner[data-banner="column_align"] .top > div {
    background: #fff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:5px;
    padding: 5px 10px;
}

.banner[data-banner="column_align"] .bottom{
    
}
.banner[data-banner="column_align"] .bottom span{
    font-size: 14px;
    display: block;
}
[data-item='2'] .banner[data-banner="column_align"]{
    background: #eee;
    color: #222;
    height: 152px;
}

.swiper-slide[data-item='3']{
    background: #ECF9FB;
}
[data-item='3'] .banner[data-banner="row_align"]{
    color: #222;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: 700;
    height: 152px;
    cursor: pointer;
    gap:70px;
}

[data-item='3'] .banner[data-banner="row_align"] .right{
    display: flex;
/*    flex-direction: column;*/
    align-items: center;
    gap:15px;
}

[data-item='3'] .banner[data-banner="row_align"] .right img{
    max-width: 180px;
}

@media (max-width : 800px){
    .banner[data-banner="assaview_time"]{
        border-radius: 0;
        gap:5px;
        padding: 0px ;
        justify-content: space-between;
        height: 100%;
    }
    .banner[data-banner="assaview_time"] br{
        display: block;
    }
    .banner[data-banner="assaview_time"] h2{
        font-size: 20px;
        text-wrap:nowrap;
    }
    
    .banner[data-banner="assaview_time"] p{
        font-size: 12px;
        word-break: keep-all;
    }
    .banner[data-banner="assaview_time"] img{
        max-width: 130px;
        transform: translateY(10px);
        transform: none;
    }
    .banner[data-banner="assaview_time"] .hard_working br{
        display: none;
    }
    .banner[data-banner]{
        border-radius: 0;
        height: 100%;
    }
    
    .banner[data-banner="column_align"]{
        padding: 0;
        gap:0;
    }
    
    .banner[data-banner="column_align"] .top h2{
        font-size: 12px;
    }
.banner[data-banner="column_align"] .top > div {
    font-size: 10px;
}
    
    .banner[data-banner="column_align"] .bottom{
        font-size: 10px;
    }
    .banner[data-banner="column_align"] .bottom span{
        font-size: 8px;
    }
    
    .visula_slide.sub{
        height: auto;
        box-shadow: none;
        
    }
    
    [data-item='3'] .banner[data-banner="row_align"]{
        font-size: 16px;
        height:auto;
        padding: 0;
        justify-content: space-between;
        gap:0;
    }
    
    [data-item='3'] .banner[data-banner="row_align"] .right{
        flex-direction: column;
        gap:0;
    }
    [data-item='3'] .banner[data-banner="row_align"] .right img{
        max-width: 130px;
    }
    
    [data-item='2'] .banner[data-banner="column_align"]{
        height: 100%;
    }

}


/* 입력 필드 */
    .field_wrap {
        padding-top: 45px;
        border-top: 1px solid #E7E7E7;
    }
.signup_area .field_wrap{
    border: none;
    padding-top: 0;
}
    .field_wrap + .field_wrap {
        margin-top: 30px;
        padding-top:30px;
        border-top: 1px solid var(--line-color);
    }
    
    .field_wrap > h5 {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 15px;
        color: #3CCBDB;
    }
    .field_wrap:first-of-type > h5{
        font-size: 20px;
    }
    .field_area {}
    .field_area + .field_area {
        margin-top: 20px;
    }
.field_area + .field_area.interest_area{
    margin-top: 50px;
}
    .field_area .field {
        display: flex;
        justify-content: flex-start;
        align-items: center;
/*        background-color: #F5F5FA;*/
        border-radius: 10px;
/*        height: 60px;*/
/*        padding: 0 20px;*/
    }
.field_area .field_col{
    display: flex;
    flex-direction: column;
    
}
.field_area .field.col{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
    .field_area .field.top_ {
        align-items: flex-start;
    }
    .field_area .field > label {
        width: 130px;
        flex-shrink: 0;
        /* color: #9191AE; */
        color: #222;
        font-size: 14px;
        font-weight: 400;
    }
    .field_area .field > input,
    .field_area .field > select {
        flex-grow: 1;
        padding: 12px 12px;
        background-color: transparent;
/*        border: none;*/
        /* padding-left: 15px; */
/*        color: #9191AE;*/
        border-radius: 8px;
        border-color: var(--line-color);
        height: auto;
    }
    #apply .field_area .field > input{
        border: 1px solid var(--line-color);
        border-radius: var(--border-round-S);
        padding: 10px 5px;
    }
    .field_area .field > input::placeholder {
        color: var(--placeholder-color);
    }
    .field_area .field > .item {
        flex-grow: 1;
    }
    .field_area .field > .item > input {
        width: 100%;
        border: none;
    }
    .field_area .field .checkbox_ input {
        height: 100%;
    }
    .field_area .field_alert {
        font-size: 13px;
        color: #3CCBDB;
        margin-top: 10px;
    }
    .field_area .verify_ {
        display: flex;
        justify-content: stretch;
        align-items: center;
        flex-grow: 1;
    }
    .field_area .verify_ .field {
        flex-grow: 1;
    }
    .field_area .verify_ .btn {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 115px;
        color: #3CCBDB;
        background-color: transparent;
        border-color: currentColor;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        margin-left: 10px;
        padding: 17px 0;
        line-height: 1;
    }
    .field_area .verify_ .btn:focus {
        background-color: #3CCBDB;
        border-color: #3CCBDB;
        color: #fff;
        box-shadow: none;
    }

    .field_area .field .item {
        flex-grow: 1;
    }
    .field_area .field .verfiy_ {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .field_area .field .item input,
    .field_area .field .verify_ input {
        flex-grow: 1;
        background-color: #F5F5FA;
        border-radius: 10px;
        border: none;
        padding: 0 20px;
/*        min-height: 60px;*/
    }
    .field_area .field .verify_ + input {
        margin-top: 10px;
    }
    .field_area .field .verify_ button {
        width: 90px;
        height: 60px;
        margin-left: 10px;
        color: #3CCBDB;
        border: 1px solid currentColor;
        border-radius: 5px;
        background-color: #fff;
        font-weight: 500;
    }
    .field_area .field .verify_ button:active {
        background-color: #3CCBDB;
        color: #fff;
    }

    .field_area .field .SNS_ li {
        background-color: #F5F5FA;
        border-radius: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 60px;
    }
    .field_area .field .SNS_ li + li {
        margin-top: 10px;
    }
    .field_area .field .SNS_ .icon {
        display: flex;
        width: 60px;
        height: 100%;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border: 1px solid #E4E4E4;
        border-radius: 10px 0 0 10px;
        margin-right: 20px;
    }
    .field_area .field .SNS_ input {
        padding: 0;
        border: none;
        background-color: transparent;
    }
    .field_area .field .SNS_ input::placeholder {
        color: var(--placeholder-color);
    }
    .field_area .field .SNS_ div:nth-child(3) {
        margin-left: 10px;
    }
    .field_area .field .SNS_ div:last-child{
        flex: 1;
    }
    .field_area .field .item .alert {
        padding-left: 60px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 13px;
        color: #3CCBDB;
        margin-top: 10px;
    }
    .field_area .field .item .alert img {
        margin: 3px 5px;
        margin-bottom: 0;
    }

    #join_path_div label,#join_path_div select{
        width: 100%;
    }

/* 페이징 */
    .pagenate {
        margin: 70px 0;
    }
    .pagenate ul {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .pagenate ul li.first_ {
        margin-right: 17px;
    }
    .pagenate ul li.last_ {
        margin-left: 17px;
    }
    .pagenate ul a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }
    .pagenate .active a {
        background-color: #3CCBDB;
        color: #fff;
    }

.pagenate ul.new a{
    border-radius: 5px;
}


/* 수정 필드 */
    .max700  {
        max-width: 700px;
    }
    .mofidy_area {  
        padding-top: 30px;
/*        padding-bottom: 70px;*/
    }
.mofidy_area #mb_name{
    background-color: #EDEDED;
}

.mofidy_area #mb_introduce{
    min-height: 140px;
    color: #888;
}
.mofidy_area  label{
    font-size: 20px;
    font-weight: 600;
}
.mofidy_area input{
    padding: 12.5px 10px;
    font-weight: 500;
}
.mofidy_area .flex_col{
    gap:10px;
}
.mofidy_area .field_area.flex_col{
    gap:30px;
}
.mofidy_area .field_area .SNS_{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.mofidy_area .field_area .SNS_ li{
    border: 1px solid var(--line-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
}
.mofidy_area .field_area .SNS_ li .icon{
    padding: 12px;
    border-right: 1px solid var(--line-color);
}
.mofidy_area .field_area .SNS_ li .fixed_text{
    padding: 10px;
    background-color: #EDEDED;
    color: #888;
}
.mofidy_area .field_area .SNS_ li div:has(input){
    flex: 1;
}
.mofidy_area .field_area .SNS_ li input{
    border: none;
}
.mofidy_area .field_area .SNS_ li input::placeholder{
    color: #888;
    font-weight: 400;
}
.mofidy_area .sns_area label{
    padding-bottom: 15px;
}

.mofidy_area .interest_area{}
.mofidy_area .interest_area .flex_col{
    align-items: flex-start;
    width: 100%;
}
.interest_area .check_area{
    gap:10px;
}
.interest_area .check_area.chip_cont {
    gap:50px;
}
.mofidy_area .interest_area label{
    width: auto;
    min-width: initial;
}
.mofidy_area .interest_area label.head{
    font-size: 24px;
}
.mofidy_area .field_area .interest_area .field{
    margin-top: 20px;
}
.interest_area .mission_cont .check_area{
    width: 100%;
}
.interest_area .mission_cont .check_area .checkbox_{
    max-width: 245px;
    width: 100%;
    flex: 1;
}

.interest_area .area_cont .check_area:not(.chip_cont) .checkbox_{
    min-width: 108px;
}

.interest_area .notice_check{
    margin: 0;
    margin-top: 20px;
}
.interest_area .notice_check label{
    font-size: 16px;
    font-weight: 400;
}

    .mofidy_area + .mofidy_area {
        padding-top: 50px;
        padding-bottom: 50px;
        border-top: 1px solid #E7E7E7;
    }
    .mofidy_area > .title {
        margin-bottom: 15px;
        font-size: 16px;
        font-weight: 500;
        color: #3CCBDB;
    }
    .mofidy_area .field_area .field {
        background-color: #fff;
        min-height: 60px;
        padding: 0;
        height: auto;
    }
    .mofidy_area .field_area .field + .field {
        margin-top: 20px;
    }
    .mofidy_area.pwd .field_area .field + .field {
        margin-top: 10px;
    }
    .mofidy_area .field_area .field > label {
        font-size: 20px;
        font-weight: 500;
        color: #222;
    }
    .mofidy_area .field_area .field > input,
    .mofidy_area .field_area .field > textarea,
    .mofidy_area .field_area .field .select__ {
        flex-grow: 1;
        background-color: #F5F5FA;
        border-radius: 10px;
        border: none;
        padding: 0 20px;
        min-height: 60px;
    }
    .mofidy_area .field_area .field .selectBox__.on .select__ {
        border-radius: 10px 10px 0 0;
    }
    .mofidy_area .field_area .field .check_wrap {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-grow: 1;
    }
    .mofidy_area .field_area .field .check_wrap .checkbox_ + .checkbox_ {
        margin-left: 50px;
    }
    .mofidy_area .field_area .field > textarea {
        padding: 17px 20px;
        resize: none;
        min-height: 120px;
    }
    .mofidy_area .field_area .field > .item {
        flex-grow: 1;
        min-height: 60px;
        display: flex;
        gap:20px;
        align-items: flex-start;
    }
    .mofidy_area .btn_area {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mofidy_area .btn_area.between {
        justify-content: space-between;
    }
    .mofidy_area .btn_area .btn {
        width: 220px;
        height: 60px;
    }

    .notice_check {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-left: 150px;
        margin-top: 40px;
        color: #444;
    }


    /* 아이콘 */
    i.icon {
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 20px;
        height: 20px;
    }
    i.camera {
        background-image: url(../img/icon/fe/camera.svg);
    }
    i.hood {
        background-image: url(../img/icon/fe/hood.svg);
    }
    i.back {
        background-image: url(../img/icon/fe/back.svg);
    }
    i.shirt {
        width: 18px;
        background-image: url(../img/icon/fe/shirt.svg);
    }
    i.beauty {
        width: 18px;
        background-image: url(../img/icon/fe/beauty.svg);
    }
    i.pacifier {
        width: 18px;
        background-image: url(../img/icon/fe/pacifier.svg);
    }
    i.dumbbell {
        width: 14px;
        background-image: url(../img/icon/fe/dumbbell.svg);
    }
    i.phone {
        width: 14px;
        background-image: url(../img/icon/fe/phone.svg);
    }
    i.stamp {
        background-image: url(../img/icon/fe/stamp.svg);
    }

    i.exmark {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-image: url(../img/icon/fe/exmark.png);
        background-repeat: no-repeat;
        background-position: center;
        background-color: #fff;
        box-shadow: 0px 3px 6px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.1);
    }

    i.contact {
        width: 25px;
        height: 25px;
        border-radius: 20%;
        background-image: url(../img/icon/fe/contact.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-color: #fff;
        box-shadow: 0px 3px 6px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.1);
    }
/* modal */
    .modal-dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        display: none;
    }
    .modal-dialog .dim {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        background-color: rgba(0,0,0,0.3);
    }
    .modal-dialog .modal-content {
        position: relative;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .modal-layer {
        position: relative;
        background-color: #fff;
        border-radius: 20px;
        width: 100%;
        max-width: 900px;
        color: #444;
    }
    .modal-layer .closer {
        position: absolute;
        right: 0;
        top: 0;
        width: 60px;
        height: 80px;
        background-image: url(../img/icon/tool/modal_close.svg);
        background-repeat: no-repeat;
        background-position: center; 
        margin-top: -20px;
        margin-right: -20px;
        cursor: pointer;
    }
    .modal-layer .closer:has(img){
        background-image: none;
    }

    .modal-layer .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #E7E7E7;
        height: 70px;
        padding: 0 30px;
    }
    .modal-layer .head h1 {
        font-size: 24px;
        font-weight: 700;
    }
    .modal-layer .content {
        padding: 40px 30px;
        padding-bottom: 30px;
    }
    .modal-layer .field {
        background-color: transparent;
        height: auto;
        padding: 0;
    }
    .modal-layer .field + .field {
        margin-top: 15px;
    }
    .modal-layer .field label {
        width: 127px;
        font-size: 16px;
        font-weight: 500;
        color: #222222;
    }

    .modal-layer .field input,
    .modal-layer .field .selectBox__ .select__ {
        background-color: #F5F5FA;
        height: 60px;
        border-radius: 10px;
        padding: 0 15px;
    }

    .modal-layer .field .notice {
        background-color: #F5F5FA;
        border-radius: 10px;
        padding: 20px;
        width: 100%;
    }

    .modal-layer .field .selectBox__.on .select__ {
        border-radius: 10px 10px 0px 0px;
    }
    .modal-layer .check_wrap {
        display: flex;
        justify-content: flex-start;
        align-items: center;
/*        margin-bottom: 10px;*/
    }
    .modal-layer .check_wrap .checkbox_ label {
        width: auto;
        font-size: 16px;
        font-weight: 400;
        color: #444;
    }
    .modal-layer .check_wrap .checkbox_ + .checkbox_ {
        margin-left: 45px;
    }


.modal-layer .check_wrap._col{
    display: flex;
    flex-direction: column;
    gap:5px;
    align-items: flex-start;
    padding-top: 20px;
}
.modal-layer .check_wrap._col .checkbox_{
    margin: 0;    
}

    .modal-layer .notice_ {
        background-color: #F5F5FA;
        border-radius: 10px;
        padding: 20px;
    }
    .modal-layer .notice_ h1 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-weight: 500;
        margin-bottom: 10px;
        position: relative;
        font-size: 16px;
    }
    .modal-layer .notice_#edit_wrap h1{
        gap: 10px;
    }
    .modal-layer .notice_ i {
        margin-right: 10px;
    }
.modal-layer .notice_ p{
    font-size: 14px;
}
.modal-layer .notice_ h1 .biz_tooltip{
        top: -60px;
        left: 0;
        width: 290px;
    }

    
    .modal-layer .notice_ h1 .biz_tooltip::before{
        top: 38px;
        left: 40px;
        transform: rotate(180deg);
    }


.modal-layer .notice_ h1 .biz_tooltip span.head{
    padding: 0;
    height: auto;
    border-bottom: none;
}
    .modal-layer .contact_notice {
        background-color: #F5F5FA;
        border-radius: 10px;
        padding: 20px;
    }
    .modal-layer .contact_notice h1{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-weight: 500;
        margin-bottom: 10px;
    }
    .modal-layer .contact_notice i{
        margin-right: 10px;
    }
    .modal-layer .btn_area {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
        padding-bottom: 40px;
}
.modal-layer .btn_area.submit_cont{
    gap:15px;
    padding: 0 20px 30px;
}
.modal-layer .btn_area.submit_cont.test{
/*    flex-direction: column;*/
}
.modal-layer .btn_area.submit_cont.test button{
    height: 60px;
/*    flex:none;*/
    border-radius: 5px;
    border: 1px solid var(--primary-color);
    max-width: none;
}
.modal-layer .btn_area.submit_cont button{
    flex: 1;
    font-size: 16px;
    height: 60px;
    font-weight: 700;
    width: 100%;
    height: 60px;
}
.modal-layer .btn_area.submit_cont .btn_border{
/*
    padding: 20px 0 ;
    font-size: 14px;
    font-weight: 700;
*/
}

.my_campaign_detail .modal-layer .red_btn{
    background: #FE6F61;
    color: #fff;
    height: 60px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}
.my_campaign_detail .modal-layer .test .red_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #FE6F61;
    cursor: pointer;
}

.my_campaign_detail .modal-layer .toggle_btn_cont{
    padding: 0 20px 20px 20px;
    margin-top: -20px;
    position: relative;
}

@media (max-width:800px){
    .my_campaign_detail .modal-layer .toggle_btn_cont{
        padding: 0;
    }
}
.my_campaign_detail .modal-layer .toggle_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #FE6F61;
    border:1px solid #E7E7E7;
    justify-content: space-between;
    padding: 0 10px;
}

.my_campaign_detail .modal-layer .toggle_btn input[type="checkbox"]{
    display: block;
}
.modal-layer .btn_area.submit_cont .red_btn:hover{
    border: 1px solid #FE6F61;
    color: #FE6F61;
    background: #fff;
}

.modal-layer .field_area .field .SNS_ li{
    height: 35px;
    font-size: 14px;
}


.cancel_modal{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    left: 0;
    top: 0;
    z-index: 9999;
}

.cancel_modal .modal{
    position: fixed;
    left: 50%;
    top: 50%;
/*    border: 1px solid var(--primary-color);*/
    border-radius: 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    background: #fff;
    z-index: 999;
    transform: translate(-50%, -50%);
    max-width: 420px;
    width: 100%;
}
.cancel_modal .dimmed{
    position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        
}
.cancel_modal .title{
    font-size: 20px;
    font-weight: 700;
    padding-top: 10px;
    padding-bottom: 30px;
}

.cancel_modal .btn_wrap{
    display: flex;
    gap:20px;
    width: 100%;
}

.cancel_modal .btn_wrap button{
    padding:  16px 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    border-radius: 5px;
    flex: 1;
    background: #fff;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

/* header */
    #header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 8000;
        background-color: #fff;
    }
    #header .inner {
    }
    #header a:hover,
    #header li.active  {
        color: #3CCBDB;
        font-weight: 500;
    }

    #header .logo {
        margin-left: 15px;
    }

    #header .tool_area,
    #header .catagory_area {
        border-bottom: 1px solid #E7E7E7;
    }
    #header .tool_area .inner{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 90px;
    }

    #header .catagory_area .inner {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 50px;
    }
    #header .catagory_area .menu a {
        display: inline-block;
        line-height: 3;
/*        width: 70px;*/
        text-align: center;
        padding: 0 8px;
/*        border-top: 4px solid #fff;*/
/*        border-bottom: 4px solid #fff;*/
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
    }
#header .catagory_area .menu a svg{
    vertical-align: text-top;
}
#header .catagory_area .menu a img{
    vertical-align: text-bottom;
}

    #header .catagory_area .menu a.dot::before{
        content: "";
        position: absolute;
        right: 0;
        width: 4px;
        height: 4px;
        border-radius: 50px;
        background: #FF0202;
    }

    #header .catagory_area .menu .active a {
        border-bottom-color: #3CCBDB;
    }

    #header .search_area {
        margin-left: 214px;
    }

    #header .gnb {
        position: relative;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 100%;
        padding-left: 20px;
    }
    #header .gnb ul {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 100%;
        white-space: nowrap;
    }
    #header .gnb ul li + li {
        margin-left: 30px;
    }
    #header .gnb a {
        font-size: 14px;
        font-weight: 500;
    }
    #header .gnb .notice {
        position: relative;
    }  
    #header .gnb .notice.active:after {
        content: "";
        position: absolute;
        top: 4px;
        right: -7px;
        width: 4px;
        height: 4px;
        border-radius: 2px;
        background-color: #FF4848;
    }

    #header .catagory_area .inner > div {
        height: 100%;
    }
    #header .menu_all {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 150px;
        height: 100%;
        text-align: center;
        border-left: 1px solid #E7E7E7;
        border-right: 1px solid #E7E7E7;
        cursor: pointer;
    }
    #header .menu_all:before {
        content: "";
        width: 12px;
        height: 12px;
        margin-right: 14px;
        background-image: url(../img/icon/tool/bugger_b.svg);
        background-repeat: no-repeat;
        background-position: center;
    }
    #header .menu ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        padding-left: 35px;
    }
    #header .menu li {
        width: fit-content;
        min-width: 135px;
        height: 100%;
        text-align: center;
    }
    #header .menu li.on {
        color: #3CCBDB;
        font-weight: 500;
        border-bottom: 3px solid #3CCBDB;
    }
    #header .menu li.contents_tab{
        position: absolute;
        right: 0;
    }
    .menu_all_area {
        display: none;
    }
    .menu_all_area.active {
        display: block;
    }
    .menu_all_area .wrap {
        position: absolute;
        left: 0;
        top: 51px;
/*        height: 255px;*/
        display: flex;
        justify-content: stretch;
        align-items: flex-start;
        background-color: #fff;
        box-shadow: 0px 10px 10px rgba(0,0,0,0.05);
        -webkit-box-shadow: 0px 10px 10px rgba(0,0,0,0.05);
        border-radius: 0 0 10px 10px;
        font-size: 14px;
        z-index: 10;
    }
    .menu_all_area .wrap > article {
        width: 190px;
        height: 100%;
        margin-bottom: 0;
        padding: 30px;
    }
    .menu_all_area .wrap > article + article {
        border-left: 1px solid #EEEEEE;
    }
    .menu_all_area .title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-weight: 700;
    }
    .menu_all_area .title img {
        margin-right: 8px;
    }
    .menu_all_area a {
        color: #888888;
    }
    .menu_all_area li {
        margin-top: 15px;
    }

    /* login header */
    #header .catagory_area .campBtn_area {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 100%;
        padding-right: 20px;
    }
    #header .catagory_area .campBtn_area a {
        padding: 6px 23px;
        padding-bottom: 8px;
        border-radius: 5px;
        color: #044951 !important;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 700;
    }
    #header .catagory_area .campBtn_area a:hover {
        opacity: 0.8;
    }

    #header .gnb .use-info {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-right: 30px;
        height: 100%;
        font-size: 13px;
        color: #888;
        white-space: nowrap;
    }
    #header .gnb .use-info b {
        font-size: 16px;
        color: #222;
    }
    #header .gnb .use-info .btn_ {
        margin-left: 10px;
        padding: 2px 6px;
        font-size: 12px;
        font-weight: 400;
    }
    #header .gnb .use-info a {
        color: #888;
    }
    #header .gnb .use-info a:hover {
        color: inherit;
        font-weight: inherit;
    }
    #header .gnb .use-info .profile .profile_img {
        width: 34px;
        height: 34px;
        margin-right: 10px;
    }
#header .gnb .use-info .profile .profile_area.nav .profile_img{
    margin: 0 auto;
    width: 30px;
    height: 30px;
    background-size: contain;
}
    #header .gnb .use-info b {
        padding-right: 5px;
        color: #222;
    }

/* header bubble */
    #header .gnb .overBtn {
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        z-index: 10;
    }
    #header .gnb .overBtn:hover .over_layer {
        display: block;
    }
    #header .gnb .over_layer {
        display: none;
        position: absolute;
        top: 100%;
        z-index: 10;
        background-color: #fff;
        box-shadow: 0px 4px 5px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0px 4px 5px rgba(0,0,0,0.1);
        border: 1px solid #E7E7E7;
        border-radius: 6px;
    }
    #header .gnb .over_layer ul {
        padding: 15px;
        font-size: 14px;
        flex-flow: column;
        align-items: flex-start;
    }
    #header .gnb .over_layer ul li {
        width: 100%;
    }
    #header .gnb .over_layer ul li + li {
        margin-left: 0;
        margin-top: 8px;
    }
    #header .gnb .over_layer ul li a {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
/*        width: fit-content;*/
    }
#header .gnb .over_layer ul.profile li a{
    justify-content: center;
}
    #header .gnb .profile_area.nav .over_layer ul li a{
        justify-content: center;
    
    }
    #header .gnb .over_layer ul li a.dot::before{
        content: "";
        position: absolute;
        right: -10px;
        width: 4px;
        height: 4px;
        border-radius: 50px;
        background: #FF0202;
    }

    #header .gnb .over_layer ul li a .count {
        padding: 3px 5px;
        min-width: 24px;
        border-radius: 20px;
        background-color: #F3FDFF;
        color: #16B9CB;
        font-size: 12px;
        text-align: center;
    }
    #header .gnb .over_layer ul li a p {
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
#header .gnb .over_layer ul li a.coupon{
    flex-direction: row;
    align-items: center;
    gap:4px;
    
}
#header .gnb .over_layer ul li a.coupon .badge{
    background: #EFEFEF;
    border-radius: 50%;
    color: #222;
    padding: 0 6px;
    font-size: 12px;
}
#header .gnb .over_layer ul li a.coupon .badge.on{
    background: #FF0202;
    color: #fff;
}
    #header .gnb .over_layer ul + ul {
        border-top: 1px solid #E7E7E7;
    }
    #header .gnb .over_layer:before,
    #header .gnb .over_layer:after {
        position: absolute;
        content: "";
        top: -15px;
    }
    #header .gnb .over_layer:before {
        border-top: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 18px solid #fff;
        z-index: 1;
    }
    #header .gnb .over_layer:after {
        margin-top: -1px;
        left: -1px;
        border-top: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 16px solid #E7E7E7;
    }

    #header .gnb #OVUSE {
        left: 7px;
/*        width: 164px;*/
        max-width: 164px;
        width: 100%;
    }
#header .gnb .new_menu#OVUSE{
    max-width: 240px;
}
    #header .gnb #OVUSE:before,
    #header .gnb #OVUSE:after {
        left: 17px;
    }

    #header .gnb #OVMT{
      right: 92px;
      width: 145px;
    }

    #header .gnb #OVMT:before,
    #header .gnb #OVMT:after {
        left: 60px;
    }

    #header .gnb .admin #OVMT,
    #header .gnb .admin #OVMT {
        right: 40px;
    }

    #header .gnb .admin #OVMT:before,
    #header .gnb .admin #OVMT:after {
        left: 60px;
    }

    #header .gnb #OVNT {
        right: 0;
        width: 280px;
    }
    #header .gnb #OVNT:before,
    #header .gnb #OVNT:after {
        right: 80px;
    }
    #header .gnb #OVNT:after {
        left: auto;
        right: 80px;
    }
    #header .gnb #OVNT .top {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 38px;
        padding: 0 15px;
        font-weight: 500;
        border-bottom: 1px solid #e7e7e7;
    }
    #header .gnb #OVNT .top b {
        font-weight: 500;
        padding-left: 5px;
        color: #FF4848;
    }
    #header .gnb #OVNT a {
        display: block;
    }
    #header .gnb #OVNT a p:first-child {
        color: #888;
    }
    #header .gnb #OVNT a:hover {
        color: inherit;
        font-weight: inherit;
        text-decoration: underline;
    }
    #header .gnb #OVNT .all {
        width: 100%;
        background-color: #F9F9F9;
        color: #444;
        text-align: center;
        padding: 9px;
        border-radius: 0px 0px 6px 6px;
    }



    #header .gnb #OVCT {
        right: 0px;
        width: 145px;
    }
    #header .gnb #OVCT:before,
    #header .gnb #OVCT:after {
        left: auto;
        right: 15px;
    }


#header .ad_banner.pc{
        display: flex;
    }
#header .ad_banner.mo{
    display: none;
}
#header .ad_banner{
    background: var(--primary-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
#header .ad_banner > div{
    display: flex;
    justify-content: center;
    align-items: center;
}
#header .ad_banner > div .text{
    font-size: 22px;
    font-weight: 700;
}
#header .ad_banner > div .link_text{
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    border-left: 1px solid #fff;
    margin: 0 15px;
    display: flex;
    cursor: pointer;
}
#header .ad_banner > div .link_text a{
    padding: 0 15px;
    line-height: 1;
}
#header .ad_banner div a:hover{
    color: #fff;
}

#header .ad_banner .close_text{
    cursor: pointer;
    position: relative;
    left: 100px;
}
#header .ad_banner .close_text span{
    padding-right: 15px;
    font-size: 14px;
    font-weight: 500;
    
}

/* footer */
    #footer {
        margin-top: 70px;
        border-top: 1px solid #E7E7E7;
    }
    #footer a:hover {
        font-weight: 600;
    }
    #footer .footer_top .inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 50px;
        padding-bottom: 70px;
    }
    #footer .gnb_ {
        display: flex;
        justify-content: stretch;
        align-items: flex-start;
        flex-grow: 1;
        font-size: 14px;
    }
    #footer .gnb_ .title {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 14px;
    }
    #footer .gnb_ .title a {
        padding-right: 20px;
        background-repeat: no-repeat;
        background-position: right bottom 7px;
        background-image: url(../img/icon/tool/arrow_right_b.svg);
    }
    #footer .gnb_ ul li {
        margin-top: 14px;
    }
    #footer .gnb_ ul li a {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    #footer .gnb_ ul li a:before {
        content: "·";
        font-size: 1.4em;
        font-weight: 600;
        margin-right: 8px;
        line-height: 0.6em;
    }
    #footer .gnb_ > article {
        flex-grow: 1;
        margin-bottom: 0;
    } 

    #footer .ch_link {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 260px;
        height: 42px;
        border: 1px solid #E7E7E7;
        border-radius: 5px;
        margin-bottom: 6px;
        padding: 9px;

        background-image: url(../img/icon/tool/arrow_right_g.svg);
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 6px;
    }
    #footer .ch_link:hover {
        background-image: url(../img/icon/tool/arrow_right_b.svg);
    }
    #footer .ch_link img {
        margin-right: 10px;
    }


    #footer .socials_ {
        flex-shrink: 0;
        display: flex;
/*        justify-content: flex-start;*/
/*        align-items: center;*/
    }
    #footer .socials_ a {
        color: #888888;
        font-size: 14px;
        text-align: center;
    }
#footer .socials_ a span{
    font-size: 12px;
}
    #footer .socials_ a + a{
        margin-left: 30px;
        text-align: center;
    }
    #footer .socials_ .imgBox {
        width: 80px;
        height: 80px;
        background-color: #F1F2FB;
        border-radius: 50%;
        margin-bottom: 20px;
        background-repeat: no-repeat;
        background-position: center;
    }
    #footer .socials_ .about {
        background-image: url(../img/icon/asset/about.svg);
    }
    #footer .socials_ .blog {
        background-image: url(../img/icon/asset/blog.svg);
    }
    #footer .socials_ .instar {
        background-image: url(../img/icon/asset/instar.svg);
    }
    #footer .socials_ a:hover  {
        font-weight: 600;
    }
    #footer .socials_ a:hover .about {
        background-image: url(../img/icon/asset/about_a.svg);
    }
    #footer .socials_ a:hover .blog {
        background-image: url(../img/icon/asset/blog_a.svg);
    }
    #footer .socials_ a:hover .instar {
        background-image: url(../img/icon/asset/instar_a.svg);
    }

    #footer .company_  {
        background-color: #FAFAFA;
    }
    #footer .company_ .inner {
        padding-top: 40px;
        padding-bottom: 60px;
    }
    #footer .company_ .info {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        font-size: 14px;
        max-width: 1130px;
    }
    #footer .company_ .info span {
        margin-left: 15px;
        padding-left: 15px;
        border-left: 1px solid #ddd;
        margin-bottom: 15px;
        color: #666666;
    }
    #footer .company_ .info span:nth-child(7) {
        margin-left: 0;
        padding-left: 0;
        border: 0;
    }
    #footer .company_ .copy_ {
        margin-top: 13px;
        font-size: 14px;
        font-weight: 500;
    }
#footer .accordion{
    display: none;
}

@media (max-width:800px){
    #footer .info h1{
        display: none;
    }
    #footer .accordion{
        display: flex;
        text-align: center;
        font-weight: bold;
        align-items: center;
        gap: 10px;
        font-size: 13px;
    }
    #footer .company_ .accordion img{
        transform: rotate(0deg);
        transition: transform .5s;
    }
    #footer .company_.on .accordion img{
        transform: rotate(180deg);
    }
    #footer .company_ .info{
        height: 0;
        overflow: hidden;
    }
    
    #footer .company_.on .info{
        height: 100%;
    }
}


/* mobile top & bottom */
    .mobile_area {
        position: relative;
        display: none;
        width: 100%;
    }
    .mobile_area .head {
        display: flex;
        justify-content: center;
        align-items: center;
/*        height: 60px;*/
        border-bottom: 1px solid #eee;
    }
    .mobile_area .head img {
        height: 21px;
    }
    .mobile_area .head .title {
        font-size: 16px;
        font-weight: 500;
        line-height: 1;
    }
.mobile_area .head .title a{
    display: inline-block;
}

    .mobile_area .search_area {
        position: absolute;
        left: 100%;
        top: 0;
        width: 100%;
        height: 100%;
        margin-left: 0 !important;
        border-color: #eee;
        z-index: 10;
        background-color: var(--primary-color);
        background-image: url(../img/icon/tool/search_ico_white.svg);
        background-repeat: no-repeat;
        background-position: right 20px center;
    }
    .mobile_area .search_area.active {
        left: 0;
    }
    .mobile_area .search_area input {
        margin: 0 60px;
        padding: 10px 15px;
        font-size: 16px;
        background-color: var(--primary-color);
        color: #fff;
        height: auto;
        border: 1px solid #fff;
        border-radius: 50px;
    }
    .mobile_area .search_area input::placeholder{
        color: #2D929E;
    }
    .mobile_area .close {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 60px;
        height: 60px;
        background-image: url(../img/icon/tool/arrow_left_w.svg);
        background-repeat: no-repeat;
        background-position: center;
    }
.mobile_area .close {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 60px;
        height: 60px;
        background-image: url(../img/icon/tool/arrow_left_w.svg);
        background-repeat: no-repeat;
        background-position: center;
    }

    .mobile_area .m_trigger,
    .mobile_area .his_back {
        position: absolute;
        left: 0;
        top: 0;
        width: 60px;
        height: 60px;
        background-repeat: no-repeat;
        background-position: center;
    }
    .mobile_area .his_back {
        background-image: url(../img/icon/tool/his_back.svg);
    }
    .mobile_area .m_trigger {
        background-image: url(../img/icon/tool/m_bugger.svg);
    }
    .mobile_area .searchBtn, .mobile_area .search {
        position: absolute;
        right: 0;
        top: 50%;
        width: 60px;
        height: 60px;
        background-image: url(../img/icon/tool/search_ico_white.svg);
        background-repeat: no-repeat;
        background-position: center;
        transform: translateY(-50%);
        background-color: var(--primary-color,#3ccbdb);
        
    }
.mobile_area .mileage_text{
    position: absolute;
    right: 15px;
    display: flex;
    align-items: center;
    gap:5px;
    font-size: 16px;
    color: #fff;
    z-index: 9;
}
.mobile_area .mileage_text span{
    font-weight: 500;
}
.mobile_area .mileage_text img{
    height: 16px;
}
.mobile_area .mileage_text .tooltip_text{
    font-size: 12px;
    position: absolute;
    background: var(--primary-color);
    padding: 10px;
    border-radius: 8px;
    top: 56px;
    right: 0;
    display: none;
    width: 70dvw;
    color: #fff;
    box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.25);
    font-weight: 500;
    
}

.mobile_area .mileage_text.on .tooltip_text{
    display: inline-block;
}
.mobile_area .mileage_text.on .tooltip_text::before{
    content: "";
    background: var(--primary-color);
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    position: absolute;
    right: 40px;
    top: -9px;
    box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.25);
    z-index: -1;

}
        
    .mobile_area .bizBtn {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        font-size: 14px;
    }

.mobile_area .bizBtn img{
    height: 16px;
    padding-right: 5px;
}
    .mobile_area .side_area {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        z-index: 9999;
    }
    .mobile_area .side_area:before {
        content: "";
        position: absolute;
        left: -100vw;
        top: 0;
        width: 100vw;
        height: 100%;
        background-color: #000;
        opacity: 0.8;
        z-index: 0;
    }
    .mobile_area .side_area .wrap {
        position: absolute;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-flow: column;
        left: -100vw;
        top: 0;
        width: 80vw;
        min-width: 320px;
        height: 100%;
        background-color: #fff;
        z-index: 1;
    }

    .mobile_area .side_area.active:before,
    .mobile_area .side_area.active .wrap {
        left: 0;
    }

    .mobile_area .side_area .wrap .use_area {
        width: 100%;
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 20px;
        padding-right: 70px;
        height: 60px;
        border-bottom: 1px solid #eee;
    }
    .mobile_area .side_area .wrap .use_area .user {
        font-size: 16px;
        font-weight: 300;
        padding-right: 25px;
        background-image: url(../img/icon/tool/gear.svg);
        background-repeat: no-repeat;
        background-position: right center;
    }
    .mobile_area .side_area .wrap .use_area .user b {
        font-weight: 700;
    }

    .mobile_area .side_area .wrap .use_area .user.signout {
        padding-right: 0;
        background-image: none;
    }
    .mobile_area .side_area .wrap .use_area .user.signout b {
        text-decoration: underline;
        text-underline-position: under;
        padding-right: 5px;
    }
    .mobile_area .side_area .wrap .use_area .btn_ {
        font-size: 14px;
        border: 1px solid #ddd;
        border-radius: 2px;
    }

    .mobile_area .side_area .wrap,
    .mobile_area .search_area {
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
    }

    .mobile_area .menu_area {
        flex-grow: 1;
        width: 100%;
        padding: 0 20px;
        padding-bottom: 20px;
        overflow-y: scroll;
    }
    .mobile_area .menu_area .title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 60px;
        font-size: 16px;
        font-weight: 700;
        border-bottom: 1px solid #eee;
        background-image: url(../img/icon/tool/arrow_right_f.svg);
        background-repeat: no-repeat;
        background-position: right  center;
        background-size: 9px;
        position: relative;
    }
.mobile_area .menu_area .title.dot::before{
    content: "";
    position: absolute;
    left: 110px;
    width: 4px;
    height: 4px;
    border-radius: 50px;
    background: #FF0202;
    
}
    .mobile_area .menu_area .active .title {
        background-image: url(../img/icon/tool/arrow_down_f.svg);
        background-repeat: no-repeat;
        background-position: right center;   
        background-size: 14px;
    }
    .mobile_area .menu_area .title img {
        margin-right: 8px;
    }
    .mobile_area .menu_area .title img.custom{
        width: 18px;
    }
    .mobile_area .menu_area .depth {
        display: none;
    }
    .mobile_area .menu_area ul {
        background-color: #F9F9F9;
        padding: 14px 28px;
        font-size: 14px;
    }
    .mobile_area .menu_area ul li {
        color: #888;
    }
    .mobile_area .menu_area ul li + li {
        margin-top: 10px;
    }
    .mobile_area .side_area .btn_area {
        flex-shrink: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 45px;
        padding: 0;
    }
    .mobile_area .side_area .btn_area a {
        flex: 0 1 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        font-size: 15px;
        font-weight: 700;
    }
    .mobile_area .side_area .btn_area a:first-child,
    #header .catagory_area .campBtn_area a:first-child {
        background-color: #3CCBDB;
    }
    .mobile_area .side_area .btn_area a:last-child,
    #header .catagory_area .campBtn_area a:last-child {
        background-color: #F7E948;
    }


/* bottom */
    .icon {
        background-repeat: no-repeat;
        background-position: top center;
    }
    #mobile_bottom {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 7900;
        display: none;
    }
    #mobile_bottom .menu {
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        background-color: #fff;
        height: 60px;
        border-top: 1px solid #ddd;
    }
    #mobile_bottom .menu li {
        flex: 1;
        font-size: 12px;
        color: #9499B4;
    }
    #mobile_bottom .menu li .icon {
        display: inline-block;
        width: 24px;
        height: 20px;
        margin-bottom: 2px;
    }
    #mobile_bottom .menu li .home {
        background-image: url(../img/icon/fe/m_home.svg);
    }
    #mobile_bottom .menu li .campaign {
        background-image: url(../img/icon/fe/m_campaign.svg);
    }
    #mobile_bottom .menu li .campaign2 {
        background-image: url(../img/icon/fe/m_campaign2.svg);
    }
    #mobile_bottom .menu li .mycampaign {
        background-image: url(../img/icon/fe/m_mycampaign.svg);
    }
    #mobile_bottom .menu li .advert {
        background-image: url(../img/icon/fe/m_advertiser.svg);
    }
    #mobile_bottom .menu li .customer {
        background-image: url(../img/icon/fe/m_customer.svg);
    }
    #mobile_bottom .menu li .mypage {
        background-image: url(../img/icon/fe/m_mypage.svg);
    }



    #mobile_bottom .menu li.active {
        color: #16B9CB;
    }
    #mobile_bottom .menu li.active .home {
        background-image: url(../img/icon/fe/m_home_a.svg);
    }
    #mobile_bottom .menu li.active .campaign {
        background-image: url(../img/icon/fe/m_campaign_a.svg);
    }
    #mobile_bottom .menu li.active .campaign2 {
        background-image: url(../img/icon/fe/m_campaign2_a.svg);
    }
    #mobile_bottom .menu li.active .mycampaign {
        background-image: url(../img/icon/fe/m_mycampaign_a.svg);
    }
    #mobile_bottom .menu li.active .advert {
        background-image: url(../img/icon/fe/m_advertiser_a.svg);
    }
    #mobile_bottom .menu li.active .customer {
        background-image: url(../img/icon/fe/m_customer_a.svg);
    }
    #mobile_bottom .menu li.active .mypage {
        background-image: url(../img/icon/fe/m_mypage_a.svg);
    }


/* container */
    #header + #container {
        padding-top: 142px ;
/*        min-height: 695px;*/
    }
#header + #container.real_time_contents{
    padding-top: 91px;
}

    #container {
padding-top: 142px;
    }

/* visual slide */
    .visula_slide {
        margin-bottom: 10px;
    }
    .visula_slide .swiper {
        position: relative;
/*        padding: 40px 0;*/
        overflow: hidden;
        z-index: 0;
    }
    .visula_slide .swiper-slide {
        width: 460px;
/*        margin-right: 30px;*/
        box-shadow: 0px 10px 10px rgba(0,0,0,0.05);
        border-radius: 20px;
    } 

@media (max-width:800px){
    .visula_slide .swiper-slide{
        margin-right: 30px;
    }
}
    .visula_slide .swiper-slide img {
        vertical-align: top;
        width: 100%;
    }

.visula_slide.sub .swiper-slide{
    box-shadow: none;
    border-radius: 8px;
}
.visula_slide .sub_banner_swiper .swiper-slide[data-item='2'] img {
    max-width: 110px;
    transform: translateY(0);
}


    .visula_slide button[class*=swiper-button] {
        width: 60px;
        height: 60px;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 70px;
        border: none;
        outline: none;
        margin-top: -30px;
    }
    .visula_slide button[class*=swiper-button]:after {
        display: none;
    }
    .visula_slide button:focus {
        box-shadow: none;
    }
    .visula_slide .swiper-button-prev {
        left: -30px;
        background-image: url(../img/icon/tool/swiper_prev.svg);
    }
    .visula_slide .swiper-button-next {
        right: -30px;
        background-image: url(../img/icon/tool/swiper_next.svg);
    }
    .visula_slide .pagenation-inner {
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0;
        bottom: 0;
    }
    .visula_slide .pagenation-inner .swiper-pagination {
        position: relative;
        bottom: 0;
    }
    .visula_slide .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0 5px;
    }
    .visula_slide .swiper-pagination-bullet-active {
        background-color: #444444;
    }








/* 매인 슬라이드 재작업 */

.visula_slide .main_banner_swiper .swiper-pagination{
    bottom: 24px;
    font-size: 10px;
    width: fit-content;
    position: absolute;
    left: calc(100% - 74px);
    background: #ccc;
    padding:4px 10px;
    border-radius: 9999px;
    backdrop-filter: blur(2px);
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    display: none;
}

@media (max-width: 800px){
    .visula_slide .main_banner_swiper .swiper-pagination{
        display: block;
    }    
}

.visula_slide .main_banner_swiper .swiper-pagination span{
    padding: 0 1.8px;
}
.visula_slide .main_banner_swiper .main_banner_swiper_wrapper{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 22px;
    padding-top: 37px;
}

@media (max-width: 800px){
    .visula_slide .main_banner_swiper .main_banner_swiper_wrapper{
        padding-top: 0;
        gap:0;
    }    
}


.visula_slide .main_banner_swiper .main_banner_swiper_wrapper .swiper-slide{
        flex: 1;
    position: relative;
    z-index: 1;
    border-radius: 30px;
    aspect-ratio: 21 / 10;
    max-height: 320px;
}

@media (max-width: 800px){
    .visula_slide .main_banner_swiper .main_banner_swiper_wrapper .swiper-slide{
        flex: none;
        height: auto;
        aspect-ratio: initial;
        margin: 0;
        border-radius: 10px;
    }
}




.visula_slide .main_banner_swiper .main_banner_swiper_wrapper a{
    display: inline-block;
    width: 100%;
    padding: 60px;
}
@media (max-width: 1440px){
    .visula_slide .main_banner_swiper .main_banner_swiper_wrapper a{
        padding: 40px;
    }    
}

@media (max-width: 800px){
    .visula_slide .main_banner_swiper .main_banner_swiper_wrapper a{
        padding: 0;
        height: 100%;
    }    
    .visula_slide .main_banner_swiper .main_banner_swiper_wrapper a .item_box{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.visula_slide .main_banner_swiper .main_banner_swiper_wrapper [data-item]{

}
.visula_slide .main_banner_swiper .main_banner_swiper_wrapper [data-item='1']{
    background: var(--primary-color);
    padding-bottom: 0;
    color: #fff;
}


.visula_slide .main_banner_swiper .main_banner_swiper_wrapper [data-item='1'] img{
    position: absolute;
    right: 18px;
    bottom: 0;
    z-index: -9;
    max-width: 420px;
    
}
@media (max-width: 1440px){
    .visula_slide .main_banner_swiper .main_banner_swiper_wrapper [data-item='1'] img{
        max-width: 320px;
    }    
}

@media (max-width: 800px){
    .visula_slide .main_banner_swiper .main_banner_swiper_wrapper [data-item='1'] img{
        max-width: 142px;
        position: static;
    }    
}

.visula_slide .main_banner_swiper .main_banner_swiper_wrapper [data-item='2']{
    background: #FFDB60;
}
.visula_slide .main_banner_swiper .main_banner_swiper_wrapper [data-item='2'] .wrap{
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
}

.visula_slide .main_banner_swiper .main_banner_swiper_wrapper [data-item='2'] .wrap .megaphone{
    max-width: 101px;
}

@media (max-width:800px){
    
    .visula_slide .main_banner_swiper .main_banner_swiper_wrapper [data-item='2'] .wrap{
        padding-bottom: 0;
        height: 100%;
    }
   
    .visula_slide .main_banner_swiper .main_banner_swiper_wrapper [data-item='2'] .wrap .megaphone{
        max-width: 78px;
    }    
}


.visula_slide .main_banner_swiper .main_banner_swiper_wrapper [data-item='2'] .kakao_btn{
    display: flex;
    background: #fff;
    align-items: center;
    border-radius: 20px;
    width: fit-content;
    font-size: 18px;
    font-weight: bold;
    gap:10px;
    padding: 10px 16px;
    margin: 0 0 0 auto;
}

@media (max-width: 1440px){
    .visula_slide .main_banner_swiper .main_banner_swiper_wrapper [data-item='2'] .kakao_btn{
        font-size: 16px;
    }
    
}

@media (max-width: 800px){
    .visula_slide .main_banner_swiper .main_banner_swiper_wrapper [data-item='2'] .kakao_btn{
        font-size: 12px;
        padding: 7px; 12px;
        display: none;
    }
    
    
}


.visula_slide .main_banner_swiper .main_banner_swiper_wrapper [data-item='2'] .kakao_btn img{width: auto;}
.visula_slide .main_banner_swiper .main_banner_swiper_wrapper [data-item='2'] .kakao_btn span{
    
}

.visula_slide .main_banner_swiper .main_banner_swiper_wrapper .body{
}


.visula_slide .main_banner_swiper .main_banner_swiper_wrapper .body h1{
    font-size: 36px;
    font-weight: 700;
    padding-bottom: 10px;
}

.visula_slide .main_banner_swiper .main_banner_swiper_wrapper .body p{
            font-size: 20px;
    font-weight: 500;
    word-break: keep-all;
}

@media (max-width: 1440px){
    .visula_slide .main_banner_swiper .main_banner_swiper_wrapper .body h1{
        font-size: 28px;
    }
    .visula_slide .main_banner_swiper .main_banner_swiper_wrapper .body p{
        font-size: 16px;
    }
}

@media (max-width: 800px){
    .visula_slide .main_banner_swiper .main_banner_swiper_wrapper .body h1{
        font-size: 16px;
        padding-bottom: 5px;
        font-weight: 700;
    }
    .visula_slide .main_banner_swiper .main_banner_swiper_wrapper .body p{
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
    }
}

















.visula_slide .guide_banner{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap:22px;
    padding-top: 37px;
}
.visula_slide .guide_banner a{
    display: block;
}
.visula_slide .guide_banner br{
    display: none;
}


.visula_slide .guide_banner > a{
    flex: 1;
    position: relative;
    z-index: 1;
    padding: 60px;
    border-radius: 20px;
    aspect-ratio: 21 / 10;
    max-height: 320px;
}


.visula_slide .guide_banner > a h1{
    font-size: 40px;
    font-weight: 700;
    padding-bottom: 10px;
}

.visula_slide .guide_banner > a p{
    font-size: 20px;
    font-weight: 500;
    word-break: keep-all;
}
.visula_slide .guide_banner > a > a{
    display: inline-block;
    padding: 0;
    margin: 0;
}
.visula_slide .guide_banner > a img{
    position: absolute;
    right: 18px;
    bottom: 0;
/*    z-index: -9;*/
}

.visula_slide .guide_banner > div{
    flex: 1;
    position: relative;
    z-index: 1;
    padding: 60px;
    padding-bottom: 0;
    border-radius: 20px;
    aspect-ratio: 21 / 10;
    max-height: 320px;
}


.visula_slide .guide_banner > div h1{
    font-size: 36px;
    font-weight: 700;
    padding-bottom: 10px;
}

.visula_slide .guide_banner > div p{
    font-size: 20px;
    font-weight: 500;
    word-break: keep-all;
}
.visula_slide .guide_banner > div > a{
    display: inline-block;
    padding: 0;
    margin: 0;
}
.visula_slide .guide_banner > div img{
    position: absolute;
    right: 18px;
    bottom: 0;
    z-index: -9;
}



.visula_slide .guide_banner .influencer{
    background: var(--primary-color);
    color: #fff;
    
}
.visula_slide .guide_banner .biz{
    background: var(--accent-color);
    
}

.visula_slide .guide_banner .open_talk{
    background: var(--accent-color);
    
}
.visula_slide .guide_banner .open_talk > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.visula_slide .guide_banner .open_talk > div > div{
    display: flex;
}
.visula_slide .guide_banner .open_talk img{
    position: static
}
.visula_slide .guide_banner .open_talk .megaphone{
    max-width: 101px;
    height: 117px;
    object-fit: cover;
}
.visula_slide .guide_banner .open_talk .kakao_btn{
    background: #fff;
    align-items: center;
    border-radius: 20px;
    width: fit-content;
    font-size: 18px;
    font-weight: bold;
    gap:10px;
    padding: 10px;
    margin: 20px 0 0 auto;
}

/* 캠페인 섹션 */
    .campaign__ {
        padding: 40px 0;
        position: relative;
    }
    .campaign__  .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 31px;
    }

    .campaign__ .title .tool{
        display: flex;
        gap:20px;
    }
    
    .campaign__ .title .tool .customBtn_p{
        align-items: center;
    }
    
    .campaign__ .title h1 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 34px;
        font-weight: 700;
        line-height: 1.5em;
        
    }
    .campaign__ .title h1:after {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 25px;
        font-size: 13px;
        margin-left: 10px;
        background-color: #eee;
        color: #fff;
        border-radius: 30px;
    }
/*
    .campaign__ .title.Custom h1:after {
        content: "";
        background:url(../img/icon/asset/custom_label_text.png);
        background-size: cover;
        width: 36px;
        height: 36px;
        border-radius: 0;
    }
*/
    .campaign__ .title.HOT h1:after {
        content: "HOT";
        background-color: #FF5151;
    }
    .campaign__ .title.PICK h1:after {
        content: "PICK";
        background-color: #40A436;
    }
    .campaign__ .title.NEW h1:after {
        content: "NEW";
        background-color: #3CCBDB;
    }
    .campaign__ .title h1.mileage:after {
        content: "12PM";
        background-color: #3CCBDB;
    }
    .campaign__ .title .more {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 97px;
        height: 40px;
        border-radius: 5px;
        border: 1px solid #ddd;
        padding-left: 20px;
        padding-bottom: 2px;
        background-image:url(../img/icon/tool/arrow_right_b.svg);
        background-repeat: no-repeat;
        background-position: right 20px center;
    }
    .campaign__ .imgBannerIndex {
        position: absolute;
        bottom : 50px;
        left : -220px;
        /* background: tomato; */
    }
    .campaign__ .imgBannerList {
        position: absolute;
        Top : 400px;
        left : -220px;
        /* background: tomato; */
    }

.campaign__ .btn_cont{
    padding-top: 30px;
    display: flex;
    justify-content: center;
}

.campaign__ .btn_cont div{
    display: flex;
    gap:10px;
}

.campaign__ .title .btn_cont{
    padding-top: 0;
}

.campaign__ .title .mileage_cont{
    font-size:22px;
    font-weight: bold;
}
.campaign__ .title .mileage_cont .my_mileage{
    display: flex;
    align-items: center;
    gap:5px;
}
.campaign__ .title .mileage_cont .my_mileage .tooltip_text{
    font-size: 14px;
    display: none;
}
.campaign__ .title .mileage_cont .my_mileage.on .tooltip_text{
    display: inline-block;
    position: absolute;
    background: var(--primary-color);
    right: 0;
    padding: 14px;
    border-radius: 10px;
    top: 60px;
    color: #fff;
    font-weight: 500;
}
.campaign__ .title .mileage_cont .my_mileage.on .tooltip_text::before{
    content: "";
    background: var(--primary-color);
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    position: absolute;
    right: 40px;
    top: -9px;
}


.nonLogin{
    text-align: center;
}

.nonLogin .inner{
    padding: 50px 20px;
    background: #F5F5FA;
    border-radius: 10px;
}

.nonLogin div{
    
}

.nonLogin div .customBtn_p{
/*    margin-top: 15px;*/
    
}

/* 캠페인 리스트 */

  .campaign_slide button[class*=swiper-button] {
        width: 60px;
        height: 60px;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 70px;
        border: none;
        outline: none;
        margin-top: -30px;
    }
    .campaign_slide button[class*=swiper-button]:after {
        display: none;
    }
    .campaign_slide button:focus {
        box-shadow: none;
    }
    .campaign_slide .swiper-button-prev {
        left: -30px;
        background-image: url(../img/icon/tool/swiper_prev.svg);
    }
    .campaign_slide .swiper-button-next {
        right: -30px;
        background-image: url(../img/icon/tool/swiper_next.svg);
    }




.list_area .campaign_card{
    max-width: 256px;
    margin-right: 40px;
/*    box-shadow: 1px 1px 5px rgba(100,100,100,0.3);*/
    border-radius: 10px;    
}
    .list_area ul {
        display: flex;
/*        justify-content: stretch;*/
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .list_area ul li:not(.pagenate ul li) {
        flex-shrink: 0;
        margin-top: 50px;
        width: 256px;
/*        box-shadow: 1px 1px 5px rgba(100,100,100,0.3);*/
        border-radius: 10px;
    }
    .list_area ul li:nth-child(1):not(.pagenate ul li),
    .list_area ul li:nth-child(2):not(.pagenate ul li),
    .list_area ul li:nth-child(3):not(.pagenate ul li),
    .list_area ul li:nth-child(4):not(.pagenate ul li),
    .list_area ul li:nth-child(5):not(.pagenate ul li) {
        margin-top: 0;
    }
    .list_area ul li:nth-child(5n+1):not(.pagenate ul li) {
        margin-left: 0;
    }
    .list_area ul li + li:not(.pagenate ul li) {
        margin-left: 40px;
    }


    .list_area .imgBox {
        border-radius: 8px;
        overflow: hidden;
        display: inline-block;
    }

.list_area .imgBox .custom_label{
    position: absolute;
    left: 4px;
    top: 4px;
    width: 41px;
    z-index: 1;
}
.list_area .imgBox .custom_label span{
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}
.list_area .imgBox .recommend_label{
    position: absolute;
    right: 10px;
    top: 0px;
    width: 33px;
    z-index: 1;
}
.list_area .imgBox .recommend_label span{
    position: absolute;
    top: 50%;
    right: 25%;
    display: inline-block;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    transform: translateY(-50%);
    z-index: 1;
}

.list_area .imgBox .recommend_label img,.list_area .imgBox .custom_label img{
    opacity: .8;
    filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.25));
}

/*
    .list_area .imgBox.wait::before{
        content: "선정 대기 중";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(217,217,217);
        opacity: .5;
        z-index: 1;
        font-size: 22px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }
*/
    
.list_area .imgBox.recruit_closed::before{
    content: "모집 완료";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent url(/skin/demo/img/campaign/sold_out_bg.png) left top repeat;
    z-index: 1;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#fff;
}


    .list_area .imgBox.complete::before{
        content: "미션 제출 완료";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(217,217,217);
        opacity: .5;
        z-index: 1;
        font-size: 22px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .list_area .imgBox .sold_out {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: transparent url(/skin/demo/img/campaign/sold_out_bg.png) left top repeat;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        z-index: 4;
    }
    .list_area .imgBox .sold_out::before{
        content: "내일 12시 재오픈";
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 700;
        color: #fff;
    }
    .list_area .imgBox .sold_out.not_re_open::before{
        content: "모집 마감";
    }

    .list_area .imgBox .open_yejung {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: transparent url(/skin/demo/img/campaign/sold_out_bg.png) left top repeat;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        z-index: 4;
        box-sizing: border-box;
        padding: 0 10px;
        text-align: center;
        word-break: keep-all;
    }
    .list_area .imgBox .open_yejung::before{
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 700;
        color: #fff;
    }
    .list_area .imgBox .open_yejung span{
        color: #fff;
        font-size: 22px;
        font-weight: 700;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        display: inline-block;
        width: 100%;
        text-align: center;
        
    }

    .list_area .imgBox .first_come_open_yejung {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: transparent url(/skin/demo/img/campaign/sold_out_bg.png) left top repeat;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            z-index: 4;
    }
    .list_area .imgBox .first_come_open_yejung::before{
        content: "12:35 선착순 오픈 예정";
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 700;
        color: #fff;
        box-sizing: border-box;
        padding: 0 10px;
        text-align: center;
        word-break: keep-all;
        
    }

    .list_area .imgBox .check {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: transparent url(/skin/demo/img/campaign/sold_out_bg.png) left top repeat;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        z-index: 4;
    }
    .list_area .imgBox .check::before{
        content: "참여 불가";
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 700;
        color: #fff;
    }


    .list_area .imgBox img {
        width: 100%;
        vertical-align: top;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
    }

    .list_area ul li:hover .imgBox > img {
        will-change: transform;
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
    }

    .list_area .details {
        padding: 14px 0;
        color: #666666;
    }
    .list_area .item{
        background: #fff;
        border-radius: 10px;
    }
    .list_area .tag_area {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 8px;
    }
    .list_area .tag_area img {
        margin-right: 5px;
    }
    .list_area .tag_area span {
        margin-left: 2px;
        font-size: 15px;
        font-weight: 700;
    }
.list_area .tag_area span.black{
    color: #222;
    font-weight: 500;
}
    .real_time_contents .listTab_area{
        height: auto;
        padding: 0;
        border-top: 1px solid #EEEEEE;
        margin-bottom: 0;
    }
.real_time_contents .listTab_area li a{
    padding: 27px 0;
}
    .real_time_contents .list_area .tag_area span{
        margin-left: 0px;
        font-weight: 400;
        color: #222;
    }
    .list_area .tag_area .cp_type{
        display: flex;
    }
    .list_area .aside .tag_area{
        justify-content: flex-start;
        gap:10px;
    }
    .list_area .aside .tag_area p{
        display: flex;
    }

    .list_area .details .col-06 {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .list_area .details .price_ {
        text-align: right;
        font-size: 14px;
    }
    .list_area .details .price_ b {
        color: #16B9CB;
    }

    .list_area .details .timer{
        color: var(--primary-color);
        font-weight: 700;
        font-size: 15px;
    }
    .list_area .details .timer.d-day{
        color: #FF5151;
    }
    .list_area .details .timer.text-red{
        color: #FF5151;
    }

#campaign_list_wrap .details .timer{
    color: #222;
}
.swiper.list_area .details .timer{
    color: #222;
}
.list_area .details .count{
    color: #222;
    font-weight: 500;
}
.list_area .details .status_cont{
    display: flex;
    justify-content: space-between;
    gap:10px;
}
.list_area .details .status_cont .status{
    display: flex;
    align-items: center;
    gap:10px;
    
}
.list_area .details .status_cont .date{
    
}
.list_area .details .status div{
    display: flex;
    align-items: center;
    gap:10px;
}

    .list_area .appli_area {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    .list_area .appli_area b {
        color: #16B9CB;
    }
    

    .list_area .appli_area .timer {
        color: var(--primary-color);
        font-weight: 700;
    }
    .list_area .appli_area .timer.d-day {
        color: #FF5151;
    }
    .list_area .appli_area .dday {
        color: #222;
    }

    .list_area .subject {
        margin-bottom: 2px;
        color: #222;
        word-break: keep-all;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        display: block;
    }
.list_area .subject .brand{
    font-weight: 700;
}

    .list_area .my_opt_name{
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: keep-all;
        white-space: normal;
    }
    .list_area .desc {
        display: flex;
        font-size: 12px;
        color: #000;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .list_area .aside .desc{
        padding-bottom: 4px;
    }

    .list_area .desc > div{
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .list_area .desc div b{
        color: #3CCBDB;
    }

    .list_area .desc .opt_name {
/*        width: 360px;*/
        text-overflow: ellipsis;
        overflow: hidden;
        /* white-space: nowrap; */
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        flex:1.67;
        white-space: normal;
        color:#888;
    }
.list_area .desc .cp_limit{
    border: 1px solid #ff3131;
    color: #ff3131;
    padding: 5px;
    border-radius: 5px;
    font-weight: 700;
    line-height: 1;
}
    .list_area .desc .point_desc {
        width: 360px;
        text-overflow: ellipsis;
        overflow: hidden;
        /* white-space: nowrap; */
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }
    .list_area .opt_desc {
        display: flex;
        margin-bottom: 20px;
        font-size: 14px;
    }
    .list_area .opt_desc .opt_name {
        width: 220px;
        height: 40px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .list_area .point_tag {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        background-color: transparent;
        height: auto;
        margin-bottom: 0;
        font-size: 12px;
    }

.list_area .imgBox .point_tag{
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: var(--primary-color);
    color: #fff;
    z-index: 999;
    padding: 0;
    margin: 0;
    border-radius: 5px;
}
.list_area .imgBox .point_tag span{
    color: #fff;
    margin: 0;
    border: none;
}
.list_area .reporter .point_tag{
    padding-top: 0;
}
.compain_detials .list_area .point_tag{
    padding-top: 0;
}
    .list_area .point_tag .point {
        padding: 4px 8px;
        padding-bottom: 6px;
        color: #444;
        border: 1px solid currentColor;
        border-radius: 5px;
        margin-right: 4px;
        margin-bottom: 4px;
    }

.list_area .point_tag .point{
    margin-bottom: 0;
    padding-bottom: 4px;
    color: var(--primary-color);
}

.list_area .point_tag.reporter .point{
    color: var(--primary-color);
}
    .list_area .point_tag .point.bonus {
        color: #16B9CB;
    }

    .list_area .pagenate ul {
        display: flex;
        justify-content: center;
        align-items: center;
    }


.empty_cp{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    padding-bottom: 30px;
    font-size: 20px;
    font-weight: 400;
    justify-content: center;
    align-items: center;
    padding: 50px 0 ;
    gap: 10px;
}
.empty_cp img{
    max-height: 150px;
}
.empty_cp > div{
    color: #B4B4B4;
    font-size: 16px;
}
#campaign_list_wrap .empty_cp_btn{
    margin: 0 auto;
}

#campaign_list_wrap .empty_cp_btn div{
    display: flex;
    gap: 10px;
}

.content_tab{
    position: sticky;
    top: 91px;
    display: flex;
    flex-direction: column;
    z-index: 99;
    background: #fff;
}
.content_tab .content_line li{
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    
    display: inline-block;
    cursor: pointer;
}
.content_tab .content_line li a{
    padding: 27px 20px;
    display: inline-block;
}
.content_tab .content_line li.active{
    color: var(--primary-color);
}

/* 로그인 가입 */    
    .log_wrap {
        padding-top: 75px;
    }
    .log_wrap .title {
        text-align: center;
        margin-bottom: 36px;
        width: fit-content;
        margin: 0 auto 36px;
    }
    .log_wrap .form_area {
        background-color: #fff;
        border: 1px solid #F1F2FB;
        border-radius: 20px;
        box-shadow: 0px 10px 20px #F1F2FB;
        margin: 0 auto;
        margin-bottom: 150px;
    }
    .form_area .btn_area {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 50px;
     }
     .form_area .btn_area button,
     .form_area .btn_area .btn {
        flex-grow: 1;
        height: 60px;
        border-radius: 10px;
        font-size: 18px;
        font-weight: 700;
     }
     .form_area .btn_area .submit {
        background-color: #3CCBDB;
        color: #fff;
     }


    .signup_area {
        max-width: 700px;
        margin: 0 auto;
        padding: 60px;
    }
    .useType_ {}
    .useType_ h5 {
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        padding-bottom: 30px;
    }
    .useType_ .check_wrap {
        position: relative;
    /* max-width: 440px; */
    height: 60px;
    /* background-color: #F9F9F9; */
    margin: 0 auto;
    /* border-radius: 30px; */
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
    }
    .useType_ .check_wrap .check_ {
            /* position: absolute; */
    top: 0;
    /* width: 220px; */
    height: 100%;
    /* border-radius: 40px; */
    /* overflow: hidden; */
    max-width: 220px;
    width: 100%;
    }
    .useType_ .check_wrap .check_ + .check_ {
        right: 0;
        cursor: pointer;
    }
.userTypeCheck_wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:20px;

}

.userTypeCheck_wrap a{
    padding: 20px;
    text-align: center;
    
}
    .check_ input {
        left: 0;
        top: 0;
        z-index: 1;
        cursor: pointer;
        display: none;
    }
    .check_ input + label {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        color: #3CCBDB;
        border-radius: 10px;
        max-width: 220px;
        border: 1px solid #3CCBDB;
        cursor: pointer;
    }
    .check_ input + label img {
        display: none;
        vertical-align: top;
        margin-right: 10px;
    }
    .check_ input:checked + label {
        background-color: #3CCBDB;
        color: #fff;
        font-weight: 700;
    }
    .check_ input:checked + label img {
        display: block;
    }

    .sng_sign {
        max-width: 460px;
        margin: 0 auto;
        margin-bottom: 50px;
    }
    .sng_sign .tit {
        position: relative;
        text-align: center;
        margin-bottom: 20px;
    }
    .sng_sign .tit:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        border-top: 1px solid #EEE;
    }
    .sng_sign .tit span {
        position: relative;
        font-size: 14px;
        font-weight: 500;
        background-color: #fff;
        padding: 0 25px;
        z-index: 1;
    }
    .sng_sign ul {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .sng_sign ul li + li {
        margin-left: 20px;
    }
    .sng_sign ul li img {
        width: 100%;
        vertical-align: top;
    }


    .term_wrap > ul li {

    }
    .term_wrap > ul li + li {
        margin-top: 10px;
        margin-left:28px;
    }
    .term_wrap .term {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 24px;
    }
    .term_wrap .term.allCehck {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 40px;
    }
    .term_wrap .term .drop_btn {
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        width: 90px;
        padding: 2px 13px;
        border-radius: 5px;
        background-image: url(../img/icon/tool/arrow_down_m.svg);
        background-repeat: no-repeat;
        background-position: right 14px center;
        color: #3CCBDB;
    }
    .term_wrap .term .drop_btn.active {
        background-color: #F1FCFE;
        background-image: url(../img/icon/tool/arrow_up_m.svg);
    }

    .term_wrap .dorp_wrap {
        display: none;
        margin-top: 18px;
    }
    .term_wrap .dorp_wrap .text {
        background-color: #F5F5FA;
        border-radius: 5px;
        padding: 25px 17px;
        max-height: 190px;
        overflow-y: scroll;
        white-space: pre-line;
        font-size: 13px;
        line-height: 1.5em;
    }

    .term_wrap .dorp_wrap .text::-webkit-scrollbar {
        width: 15px;
        background-color: transparent;
     }
    .term_wrap .dorp_wrap .text::-webkit-scrollbar-thumb {
        background-color: #9499B4;
        border: 5px solid #F5F5FA;
        border-radius: 15px;
        cursor: pointer;
        opacity: 0;
     }
    .term_wrap .dorp_wrap .text::-webkit-scrollbar-track {
        background-color: transparent;
        opacity: 0;
     }


/* 로그인 */
    .signin_area {
        max-width: 650px;
        padding: 70px 60px;
    }
    .signin_area .btn_area {
        margin-top: 30px;
    }
    .signin_area .field_wrap {
        padding: 0;
        border: none;
    }
    .signin_area .field_area .field {
        background-color: #F5F5FA;
        height: 60px;
        border-radius: 10px;
        padding: 0 20px;
    }
    .signin_area .field_area .field input {
        border: none;
    }
    .signin_area .field_area .field > label {
        font-size: 16px;
        color: #222;
    }
    .signin_area .field_area + .field_area {
        margin-top: 10px;
    }

    .signin_area .auto_ {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }
    .signin_area .auto_ a {
        font-size: 14px;
        color: #444;
        position: relative;
        display: inline-block;
        line-height: 1;
    }
    .signin_area .auto_ a:first-child{
        padding-right: 10px;
    }
    .signin_area .auto_ a:last-child{
        padding-left: 5px;
    }
    .signin_area .auto_ a:first-child::before{
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        width: 1px;
        height: 12px;
        background: #E4E8EE;
        
    }

    .quick_signup {
        margin-bottom: 50px;
    }
    .quick_signup li + li {
        margin-top: 10px;
    }
    .quick_signup li:first-child a{
        background: #40A436;
        color: #fff;
    }
    .quick_signup li:nth-child(2) a{
        background: #FFDF00;
    }
    .quick_signup li:nth-child(3) a{
        background: #000000;
        color: #fff;
    }
    .quick_signup li:last-child a.btn{
        border: 1px solid var(--primary-color);
        color: var(--primary-color);
    }
    .quick_signup a {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        border-radius: 10px;
    }
    .quick_signup a:hover {
        font-weight: 500;
    }
    .quick_signup a img {
        margin-right: 20px;
        max-width: 28px;
        object-fit: cover;
    }


    .signin_area .induce_ {
        text-align: center;
        margin-top: 50px;
    }
    .signin_area .induce_ h5 {
        font-size: 16px;
        font-weight: 400;
    }
    .signin_area .induce_ .btn_area {
        margin-top: 20px;
    }
    .signin_area .induce_ .btn {
        width: 100%;
        border-radius: 10px;
        color: #3CCBDB;
        border-color: #3CCBDB;
    }

.signin_area .naver_help{
    text-align: right;
    padding-top: 60px;
}

.signin_area .naver_help .under_line span{
    cursor: pointer;
    border-bottom: 1px solid #444;
    color: #444;
}



/* 프로필 카드 */
    .profile_area {}
.profile_area.nav{
    padding: 15px 15px 0 15px;
}
    .profile_area .profile_img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 0 auto;
        background-color: #EFEFEF;
        background-image: url(../img/profile/dump.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 28.5px;
        overflow: hidden;
    }
    .profile_area .profile_img > img {
        width: 100%;
        height: 100%;
    }
    .profile_area .profile_info {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
    }
    .profile_area .profile_info .lv {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        padding-right: 15px;
        margin-right: 15px;
        border-right: 1px solid #ddd;
    }
    .profile_area .profile_info .lv img {
        margin-right: 5px;
    }
    .profile_area .profile_info .name {
        font-size: 20px;
        font-weight: 700;
    }
    .profile_area.nav .profile_info .name{
        font-size: 14px;
    }
    .profile_area .email {
        font-size: 13px;
        color: #999;
        margin-top: 5px;
        text-align: center;
    }
    .profile_area.nav .email{
        font-size: 12px;
    }
.profile_area.nav .tier{
    height: auto;
    padding: 5px 0;
    
}
.profile_area.nav .tier div{
/*    padding: 0px 20px;*/
    font-size: 12px;
}
#header .profile_area.nav .tier div b{
    font-size: 12px;
    color: #999;
}
.profile_area.nav .tier span{
    font-size: 12px; 
    max-width: 62px;
}
.profile_area.nav .tier span img{
    max-width: 20px;
    gap:0;
}
#header .gnb .profile_area.nav .tier span b{
    font-size: 12px;
    color: #999;
    padding-right: 0;
}
.profile_area.nav .tier div:first-child span{
    max-width: 60px;
}
    .profile_area .tier {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .profile_area .tier img {
        vertical-align: top;
    }
    .profile_area .tier > div {
        color: #999;
        font-size: 14px;
        border-right: 1px solid #ddd;
        flex: 1;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 5px;
        justify-content: center;
    }
    .profile_area .tier > div:last-child {
        border: 0;
    }

.profile_area .tier div:first-child span{
    max-width: 66px;
    width: 100%;
}
.profile_area .tier div span{
    max-width: 78px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
}


    .profile_area .email + .tier {
        margin-top: 15px;
        margin-bottom: 5px;
    }

/* aside menu */
    .aside_section .inner {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        padding-top: 40px;
    }
    .aside_section .inner > .content {
        flex-grow: 1;
        width: 1120px;
    }

    .aside_section .inner > .content > .account_title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
        gap: 24px;
    }

    .aside_section .inner .account_title button {
        background: #fff;
        border: 1px solid #999;
        padding: 10px;
        margin-bottom: 21px;
        border-radius: 5px;
        font-weight: 300;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap:5px;
    }

    .ct_title {
        font-size: 30px;
        font-weight: 500;
        margin-bottom: 20px;
    }
div.ct_title{
    font-size: 24px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
div.ct_title .ui-button{
    padding: 11px 32px;
    font-size: 16px;
}
    .ct_title .name {
        position: relative;
        font-weight: 700;
    }
    .ct_title .name:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 10px;
        left: 0;
        bottom: 0;
        background-color: #3CCBDB;
        opacity: 0.5;
        z-index: -1;

    }
    .side_menu {
        flex-shrink: 0;
        position: relative;
        width: 260px;
        margin-bottom: 0;
        margin-right: 60px;
    } 
    .side_menu > .sticky {
        position: sticky;
        top: 180px;
        left: 0;
    }
    .side_menu > .sticky > .title_ {
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 21px;
    }
    .side_menu .profile_area {
        margin-bottom: 33px;
    }
    .side_menu .menu {}
    .side_menu .menu li + li {
        margin-top: 10px;
    }
    .side_menu .menu a {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 55px;
        padding: 0 20px;
        color: #666;
        border-radius: 10px;
        background-color: #F9F9F9;
        background-image: url(../img/icon/tool/aside_right.svg);
        background-repeat: no-repeat;
        background-position: right 20px center;
    }
    .side_menu .menu .active a {
        color: #fff;
        background-color: #3CCBDB;
        background-image: url(../img/icon/tool/aside_right_w.svg);
    }

    .content + .side_menu {
        width: 360px;
        margin-left: 70px;
    }

/* 서브 페이지 텝 */
    .sub_page_tab ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid #CBCFE8;
    }
    .sub_page_tab ul li {
        margin-bottom: -1px;
    }
    .sub_page_tab ul li + li {
        margin-left: 5px;
    }
    .sub_page_tab a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 220px;
        height: 60px;
        text-align: center;
        color: #666;
        border: 1px solid #F5F5FA;
        border-bottom: 0;
        border-radius: 10px 10px 0 0;
        background-color: #F5F5FA;
    }
    .sub_page_tab .active a {
        font-weight: 500;
        color: #3CCBDB;
        border-color: #CBCFE8;
        border-bottom-color: #fff;
        background-color: #fff;
    }

/* div tabel */
    .divTable dl {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
    }
    .divTable .thead_ {
        border-bottom: 1px solid #EEEEEE;
    }
    .divTable .tr_ {
        border-bottom: 1px solid #EEEEEE;
    }
    .divTable .empty {
        width: 100%;
        text-align: center;
        margin-top: 120px;
        color: #aaa;
    }

    .divTable dl dt,
    .divTable dl dd {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0 17px;
        height: 60px;
    }

    .divTable .subject {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-grow: 1;
    }
    .divTable .subject p,
    .divTable .subject a {
        max-width: 500px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .divTable .subject a:hover {
        text-decoration: underline;
    }
    .divTable .subject.new:after {
        content: "NEW";
        color: #16B9CB;
        background-color: #F7E948;
        font-size: 10px;
        font-weight: 700;
        padding: 3px 6px;
        border-radius: 20px;
        margin-left: 10px;
    }


/* 찜 목록 */
    .favorite_list {
        padding: 30px 0;
    }
    .favorite_list ul {
        display: flex;
        justify-content: stretch;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .favorite_list ul li {
        padding: 30px 0;
        margin-bottom: 0;
        flex: 0 1 250px;
    }
    .favorite_list ul li + li {
        margin-left: 40px;
    }
    .favorite_list ul li:nth-child(4n+1) {
        margin-left: 0;
    }

    .meno_area {
        margin-top: 15px;
        padding: 10px;
        padding-top: 20px;
        border: 1px solid #E7E7E7;
        border-radius: 15px;
    }
    .meno_area .field {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-left: 10px;
    }
    .meno_area .field + .field {
        margin-top: 10px;
    }
    .meno_area textarea {
        margin-top: 20px;
        background-color: #F5F5FA;
        border-radius: 10px;
        border: none;
        width: 100%;
        height: 100px;
        resize: none;
        padding: 9px 19px;
        font-size: 14px;
    }


/* 프로필 수정 */
    .myprofile_ {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .myprofile_ .btn_ {
        color: #444;
        border-color: #444;
        padding: 15px 20px;
        font-size: 14px;
    }
    .myprofile_ .btn_:hover {
        background-color: #3CCBDB;
        border-color: #3CCBDB;
        color: #fff;
    }
    .myprofile_ .profile_card  {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    } 
    .profile_card .profile_img {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #EFEFEF;
        background-image: url(../img/profile/dump.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 38px;
        margin-right: 36px;
    }
    .profile_card .profile_img img {
        width: 100%;
        height: 100%;
        border-right: 50%;
    }
    .profile_card .profile_img .modifyBtn {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 3px 3px 6px rgba(174,174,174,0.16);
        -webkit-box-shadow: 3px 3px 6px rgba(174,174,174,0.16);
        background-image: url(../img/icon/tool/modify.svg);
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }
    .profile_card .profile_img .modifyBtn input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        opacity: 0;
    }
    .profile_card .profile_img .modifyBtn input + label {
        position: absolute;
        left: 0;
        top : 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        cursor: pointer;
    }

    .profile_card .info_ > div {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .profile_card .info_ > div + div {
        margin-top: 5px;
    }
    .profile_card .info_ > div h5 {
        font-size: 20px;
        font-weight: 700;
        margin: 0 10px;
    }
    .profile_card .info_ p {
        color: #3CCBDB;
        font-size: 13px;
    }
    .profile_card .info_ a:hover {
        text-decoration: underline;
    }
    .profile_card .info_ .email {
        color: #999;
        font-size: 13px;
    }

    .profile_modify{
        padding: 30px;   
    }

    .profile_modify .myprofile_ {
        margin-bottom: 20px;
    }
    .profile_modify .mofidy_area .field_area .field + .field  {
/*        margin-top: 50px;*/
    }
    .profile_modify .check_area .checkbox_:not(.icon){
        margin-right: 15px;
    }
.profile_modify .check_area .checkbox_:not(.icon):last-child{
    margin-right: 0;
}
.profile_modify .check_area .checkbox_:not(.icon) label{
    padding: 10px 20px;
}
.profile_modify .flex_col{
    display: flex;
    flex-direction: column;
    gap:15px;
}



/* 포인트 출금 */
    .point_area {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 140px;
        background-color: #F2FDFF;
        border-radius: 15px;
        padding: 0 49px;
        margin-bottom: 50px;
    }
    .point_area > div {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .point_area > div:first-child {
        font-size: 20px;
    }
    .point_area > div:first-child img {
        margin-right: 28px;
    }
    .point_area > div:first-child b:nth-child(3) {
        color: #3CCBDB;
        margin-left: 5px;
    }

    .point_area .btn_ {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 180px;
        height: 50px;
        border-right: 5px;
        border: none;
        color: #fff;
        background-color: #3CCBDB;
        font-size: 16px;
        font-weight: 500;
    }
    .point_area .btn_  img {
        margin-right: 10px;
    }
    .point_area .point_ {
        margin-right: 48px;
        font-size: 14px;
    }
    .point_area .point_ p:last-child {
        font-size: 40px;
        font-weight: 700;
        font-family: 'Roboto';
        letter-spacing: -0.3px;
        line-height: 1em;
        color: #3CCBDB;
    }

    .withdraw_history {}
    .withdraw_history .tool {
        margin-bottom: 20px;
    }
    .withdraw_history .tool h1 {
        font-size: 20px;
        font-weight: 700;
    }
    .withdraw_history ul li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 90px;
        border-radius: 15px;
        border: 1px solid #E7E7E7;
        letter-spacing: -0.3px;
        padding: 0 40px;
    }
    .withdraw_history ul li + li {
        margin-top: 10px;
    }

    .withdraw_history .details_ {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #888;
    }
    .withdraw_history .details_ span {
        font-size: 16px;
        padding: 5px 10px;
        border-radius: 30px;
        color: #ddd;
        border: 1px solid currentColor;
        margin-right: 15px;
    }
    .withdraw_history .details_ div:last-child {
        font-size: 18px;
        font-weight: 700;
        color: #444;
        margin-left: 53px;
    }

    .withdraw_history .point_ {
        text-align: right;
        font-size: 14px;
    }
    .withdraw_history .point_ p:first-child {
        font-size: 18px;
        font-weight: 700;
    }
    .withdraw_history .plus .details_ span,
    .withdraw_history .plus .point_ {
        color: #3CCBDB;
    }

    .withdraw_history .minus .details_ span,
    .withdraw_history .minus .point_ {
        color: #FF7474;
    }
    .withdraw_history + .btn_area {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 70px 0;
    }
    .withdraw_history .empty {
        text-align: center;
        margin-top: 120px;
        color: #aaa;
    }


/* modal */
    /* 출금 */
    #widthdraw .modal-layer {
        max-width: 600px;
        height: 90vh;
    }
    #widthdraw .modal-layer .content {
        flex-grow: 1;
        overflow-y: scroll;
        height: calc(100% - 70px);
    }
    #widthdraw .modal-layer .content::-webkit-scrollbar {
        width: 15px;
        background-color: transparent;
    }
    #widthdraw .modal-layer .content::-webkit-scrollbar-thumb {
        background-color: #9499B4;
        border: 5px solid #fff;
        border-radius: 15px;
        cursor: pointer;
        opacity: 0;
    }
    #widthdraw .modal-layer .content::-webkit-scrollbar-track {
        background-color: transparent;
        opacity: 0;
    }
    #widthdraw .field_area .field.top_ {
        margin-top: 30px;
    }
    #widthdraw .field_area input + .check_wrap {
        margin: 20px 0;
    }
    #widthdraw .point_ {
        padding-left: 127px;
        margin-top: 5px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    #widthdraw .point_ b {
        color: #16B9CB;
        font-family: 'Roboto';
        margin-left: 12px;
    }
    #widthdraw .notice_ {
        margin-top: 20px;
    }
    #widthdraw .notice_ .desc {
        color: #666;
    }

    /* 회원 탈퇴 */
    #quit .modal-layer {
        max-width: 600px;
        height: 90vh;
    }
    #quit .modal-layer .content {
        flex-grow: 1;
        overflow-y: scroll;
        height: calc(100% - 70px);
    }
    #quit .modal-layer .content::-webkit-scrollbar {
        width: 15px;
        background-color: transparent;
    }
    #quit .modal-layer .content::-webkit-scrollbar-thumb {
        background-color: #9499B4;
        border: 5px solid #fff;
        border-radius: 15px;
        cursor: pointer;
        opacity: 0;
    }
    #quit .modal-layer .content::-webkit-scrollbar-track {
        background-color: transparent;
        opacity: 0;
    }
    #quit .field_area .field.top_ {
        margin-top: 30px;
    }
    #quit .field_area input + .check_wrap {
        margin: 20px 0;
    }
    #quit .point_ {
        padding-left: 127px;
        margin-top: 5px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    #quit .point_ b {
        color: #16B9CB;
        font-family: 'Roboto';
        margin-left: 12px;
    }
    #quit .notice_ {
        margin-top: 20px;
    }
    #quit .notice_ .desc {
        color: #666;
    }

    /* 캠페인 신청 */
    #apply .modal-layer {
        max-width: 600px;
        height: 90vh;
    }

    #apply .modal-layer .content {
        flex-grow: 1;
        overflow-y: scroll;
        height: calc(100% - 70px);
    }
    #apply .modal-layer .content::-webkit-scrollbar {
        width: 15px;
        background-color: transparent;
    }
    #apply .modal-layer .content::-webkit-scrollbar-thumb {
        background-color: #9499B4;
        border: 5px solid #fff;
        border-radius: 15px;
        cursor: pointer;
        opacity: 0;
    }
    #apply .modal-layer .content::-webkit-scrollbar-track {
        background-color: transparent;
        opacity: 0;
    }
    #apply #rv_msg{
        min-height: 108px;
    }

    #apply .field_area .field.top_ {
        margin-top: 30px;
    }
    #apply .field_area input + .check_wrap {
        margin: 20px 0;
    }
    #apply .point_ {
        padding-left: 127px;
        margin-top: 5px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    #apply .point_ b {
        color: #16B9CB;
        font-family: 'Roboto';
        margin-left: 12px;
    }
    #apply .notice_ {
        padding: 25px 20px;
        margin-top: 10px;
    }
    #apply .notice_ h2{
        padding-bottom: 15px;
        font-size: 16px;
        color: #444;
        line-height: 1;
        font-weight: 500;
        
    }
    #apply .notice_ .desc {
        color: #666;
    }

    #apply .notice_ .desc_cont{
        display: flex;
        flex-direction: column;
        gap: 10px;
        color: #666;
        font-size: 14px;
    }
    #apply .notice_ .desc_cont .item{}
    #apply .notice_ .desc_cont .item .item_title{
/*        font-weight: 700;*/
    }
#apply .notice_ .desc_cont .item .item_title .sub_desc{
    background: #fff;
    border-radius: 10px;
    font-weight: 400;
    margin-bottom: 10px;
    height: 0;
    max-height: 200px;
    overflow: hidden;
    margin-top: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0;
    padding-bottom: 0;
    color: #444;
    transition: all .3s;
}
#apply .notice_ .desc_cont .item .item_title .sub_desc.open{
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    overflow:auto;
}
#apply .notice_ .desc_cont .item .item_title .sub_desc.open.sub_1{
    height: 140px;
}
#apply .notice_ .desc_cont .item .item_title .sub_desc.open.sub_2{
    height: 100px;
}
#apply .notice_ .desc_cont .item .item_desc .red_color .sub_desc .circle{
    background: #444;
}
#apply .notice_ .desc_cont .item .item_title .sub_desc.open::-webkit-scrollbar {
    display: none;
}
#apply .notice_ .desc_cont .item .item_title .sub_desc p{
    position: relative;
    padding-left: 20px;
}
    #apply .notice_ .desc_cont .item .item_desc{
        display: flex;
        flex-direction: column;
        gap:5px;
        font-weight: 400;
        font-size: 14px;
}

#apply .notice_ .desc_cont .item .item_desc p{
    padding-left: 20px;
    position: relative;
}
#apply .notice_ .desc_cont .item .circle{
    border-radius: 50%;
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #666;
    position: absolute;
    top: 8px;
    left: 10px;
}
#apply .notice_ .desc_cont .red_color{
    color: var(--red-200-color);
}
#apply .notice_ .desc_cont .item .item_desc .red_color .circle{
    background: var(--red-200-color);
}


#apply .notice_ .desc_cont .accordion{
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: inherit;
}


#apply .notice_ .desc_cont .item .lawfirm_logo_cont{
    display: flex;
    gap:10px;
    padding: 8.5px 10px;
    align-items: center;
    background: #fff;
    border-radius: 10px;
}
#apply .notice_ .desc_cont .item .lawfirm_logo_cont img{
    max-width: 150px;
}

@media (max-width:800px){
    #apply .notice_ .desc_cont .item .lawfirm_logo_cont img{
        max-width: 70px;
    }
    #apply .notice_ .desc_cont .item .lawfirm_logo_cont div{
        font-size: 8px;
    }
}



    #find .modal-layer {
        max-width: 600px;
    }
    #find .modal-layer .notice_ {
        margin-top: 20px;
    }


/* 네이버 로그인 관련 모달 */
#naver_help .modal-layer{
    max-width: 580px;
}
#naver_help .modal-layer .notice{
    padding-top: 20px;
}
#naver_help .modal-layer .btn_area{
    display: flex;
    gap:31px;
    padding-bottom: 0;
    margin-top: 50px;
}
#naver_help .modal-layer .btn_area a{
    width: 100%;
    height: auto;
    padding: 13px 0;
    max-width: 134px;
    border-radius: 5px;
}
#naver_help .modal-layer .head{
    padding: 30px;
    height: auto;
    border-bottom: 0;
    padding-bottom: 0;
}
#naver_help .modal-layer .content{
    padding: 25px 30px;
}
#naver_help .modal-layer .closer{
    background-image: url(../img/icon/tool/close.svg);
    right: 30px;
    top: 30px;
    margin: 0;
    width: 20px;
    height: 20px;
/*    transform: translateY(50%);*/
}
@media(max-width:800px){
    #naver_help .modal-layer .closer{
        top: 27px;
        width: 14px;
        height: 14px;
    }
    #naver_help .modal-layer .btn_area{
        margin-top: 30px;
    }
}

/* 알림함 */
    .notice_lsit {}
    .notice_lsit .tool {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 15px;
    }
    .notice_lsit .tool .btn_ {
        padding: 7px 10px;
    }
    .notice_lsit .tool .btn_:hover {
        background-color: #3CCBDB;
        border-color: #3CCBDB;
        color: #fff;
    }
    .notice_lsit .list li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 76px;
        padding: 20px 40px;
        padding-left: 100px;
        border-radius: 15px;
        border: 1px solid #E7E7E7;
        background-image: url(../img/icon/fe/letter.svg);
        background-repeat: no-repeat;
        background-position: left 40px center;
    }
    .notice_lsit .list li + li {
        margin-top: 15px;
    }
    .notice_lsit .list .msg {
        position: relative;
        flex-grow: 1;
        padding-right: 20px;
        white-space: pre-wrap;
    }
    .notice_lsit .list .msg:before {
        content: "";
        position: absolute;
        left: -8px;
        top: 0;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #FF7474;
    }
    .notice_lsit .list .date {
        flex-shrink: 0;
        color: #888;
    }
    .notice_lsit .list li.open {
        background-image: url(../img/icon/fe/letter_a.svg);
    }
    .notice_lsit .list li.open .msg:before {
        display: none;
    }

    .notice_lsit .empty {
        text-align: center;
        margin-top: 120px;
        color: #aaa;
    }


/* 간편 로그인 */
    .auto_chain ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .auto_chain ul li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border: 1px solid #E4E4E4;
        border-radius: 10px;
    }
    .auto_chain ul li + li {
        margin-left: 30px;
    }
    .auto_chain ul li > div {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
        height: 60px;
        font-weight: 500;
    }
    .auto_chain ul li .icon {
        width: 60px;
        padding: 0;
        border-right: 1px solid #e4e4e4;
    }
    .auto_chain ul li .state {
        border-right: 1px solid #e4e4e4;
        display: none;
        background-color: #F9F9F9;
        color: #999;
    }
    .auto_chain ul li .chainBtn {
        cursor: pointer;
    }
    .auto_chain ul li .chainBtn:before {
        content: "연결하기";
    }

    .auto_chain ul li.active .state {
        display: flex;
    }
    .auto_chain ul li.active .chainBtn:before {
        content: "연결해제";
    }


/* 고객센터 */
    .customer_tool {
        background-color: #F9F9F9;
        border-radius: 15px;
        margin-bottom: 20px;
    }
    .customer_tool .search_ {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 640px;
        height: 110px;
        margin: 0 auto;
    }
    .customer_tool .search_ > div:first-child {
        flex-shrink: 0;
        margin-right: 30px;
        font-size: 18px;
        font-weight: 700;
        flex: 1;
    }
    .customer_tool .search_ input {
        flex-grow: 1;
        border: none;
        height: 50px;
        padding: 0 20px;
        border-radius: 5px;
    }
    .customer_tool .search_ .submitBtn {
        flex-shrink: 0;
        box-shadow: none;
        width: 148px;
        height: 50px;
        font-size: 16px;
        font-weight: 500;
        border-radius: 5px;
        margin-left: 10px;
    }

    /* faq */
    .faq_tab_area {
        margin: 30px 0;
    }
    .faq_tab_area ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: 50px;
        background-color: #F9F9F9;
    }
    .faq_tab_area ul li {
        flex: 1;
        cursor: pointer;
    }
    .faq_tab_area ul li a {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        text-align: center;
        background-color: #F9F9F9;
        border-radius: 50px;
        color: #888;
    }
    .faq_tab_area ul li.active a {
        color: #fff;
        font-weight: 700;
        background-color: #3CCBDB;
        box-shadow: 0px 3px 10px rgb(60 203 219 / 30%);
        -webkit-box-shadow: 0px 3px 10px rgb(60 203 219 / 30%);
    }

    .faq_his_area ul {
        border-top: 1px solid #222222;
    }
    .faq_his_area li {
        cursor: pointer;
        border-bottom: 1px solid #eee;
    }
.faq_his_area li.non_result{
    padding: 80px 0 ;
    text-align: center;
    cursor: auto;
}
    .faq_his_area .subject_ {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 80px;
    }
    .faq_his_area .subject_ span:first-child {
        flex-shrink: 0;
        font-size: 14px;
        color: #16B9CB;
        width: 130px;
        padding: 0 20px;
    }
    .faq_his_area .subject_ .Q,
    .faq_his_area .drop_ .A {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #F5F5FA;
        color: #16B9CB;
        margin-right: 20px;
    }
    .faq_his_area .subject_ .Q:before {
        content: "Q";
        font-weight: 700;
        padding-bottom: 5px;
    }
    .faq_his_area .drop_ .A {
        background-color: #16B9CB;
        color: #fff;
    }
    .faq_his_area .drop_ .A:before {
        content: "A";
        font-weight: 700;
        padding-bottom: 5px;
    }
    .faq_his_area .subject_ .conetnet {
        flex-grow: 1;
        padding-right: 50px;
        font-size: 18px;
        color: #222;
    }
    .faq_his_area .subject_ .conetnet > p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  }

    .faq_his_area .subject_ .dropBtn {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        background-image: url(../img/icon/tool/drop_down.svg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        margin-right: 20px;
    }
    .faq_his_area .active .subject_ .dropBtn {
        background-image: url(../img/icon/tool/drop_up.svg);
    }
    .faq_his_area .drop_ {
        display: none;
        margin-bottom: 30px;
    }
    .faq_his_area .drop_  > div {
        background-color: #F9FDFF;
        border-radius: 15px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 20px;
        padding-left: 130px;
    }
    .faq_his_area .drop_ .content {
        font-size: 14px;
        color: #666;
    }

    /* 문의하기 */
    .customer_tool .Inquire_ {
        display: flex;
        padding: 15px 30px;
        flex-direction: column;
        gap:15px;
    }

.customer_tool .Inquire_ div:last-child{
    display: flex;
    gap:20px;
}
    .customer_tool .Inquire_ .submitBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 148px;
        height: 50px;
        box-shadow: none;
        font-size: 16px;
    }

    .divTable {
        margin-top: 30px;
        border-top: 1px solid #222;
    }

    .Inquire_his_area dl dt:nth-child(1),
    .Inquire_his_area dl dd:nth-child(1) {
        width: 80px;
    }
    .Inquire_his_area dl dt:nth-child(2),
    .Inquire_his_area dl dd:nth-child(2) {
        width: 150px;
    }
    .Inquire_his_area dl dd:nth-child(2) {
        color: #9499B4;
    }
    .Inquire_his_area dl dt:nth-child(3),
    .Inquire_his_area dl dd:nth-child(3) {
        flex-grow: 1;
    }
    .Inquire_his_area dl dd:nth-child(3) {
        justify-content: flex-start;
    }
    .Inquire_his_area dl dt:nth-child(4),
    .Inquire_his_area dl dd:nth-child(4) {
        width: 110px;
    } 
    .Inquire_his_area dl dd:nth-child(4) {
        color: #999;
    }
    .Inquire_his_area dl dt:nth-child(5),
    .Inquire_his_area dl dd:nth-child(5) {
        width: 130px;
    }
    .Inquire_his_area dl dt:nth-child(6),
    .Inquire_his_area dl dd:nth-child(6) {
        width: 80px;
    } 

    .Inquire_his_area .state_ {
        padding: 5px 14px;
        border-radius: 22px;
        color: #3CCBDB;
        border: 1px solid currentColor;
    }

    .Inquire_his_area .com {
        cursor: pointer;
    }
    .Inquire_his_area .com .state_ {
        color: #9499B4;
    }
    .Inquire_his_area .drop_ {
        display: none;
    }

    .answer_area {
        padding-top: 10px;
        padding-bottom: 20px;
        border-top: 1px solid #EEEEEE;
    }
    .answer_area .request_,
    .answer_area .response_ {
        padding: 20px;
        padding-bottom: 30px;
        border-radius: 10px;
    } 
    .answer_area .response_ {
        background-color: #F9F9F9;
    }
    .answer_area .writer_ {
        display: flex;
        justify-content : flex-start;
        align-items: center;
    }
    .answer_area .writer_ .profile_ {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        margin-right: 10px;
        background-color: #EFEFEF;
        background-image: url(../img/profile/dump.svg);
        background-repeat: no-repeat;
        background-position: center;
    }
    .answer_area .writer_ .profile_ > img {
        width: 100%;
        height: 100%;
    }
    .answer_area .writer_ .name {
        font-weight: 500;
        margin-right: 20px;
    } 
    .answer_area .writer_ .date {
        font-size: 13px;
        color: #888;
    }
    .answer_area .comment_ {
/*        white-space: pre-line;*/
        padding-left: 44px;
        margin-top: 12px;
    }
    .answer_area .file_{
        padding-left: 44px;
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        background-color: #f4f5f999;
        padding: 20px;
        margin: 20px 44px;
        border-radius: var(--border-round-L);
        gap:5px;
    }


    /* 문의하기 */
    .Inquire_area {
        padding-top: 20px;
        border-top: 1px solid #222;
    }
    .Inquire_area .btn_area {
        margin-top: 20px;
        padding-top: 50px;
        border-top: 1px solid #ddd;
    }
    .Inquire_area .btn_area .btn {
        border-color: #ddd;
        margin-left: 15px;
        font-weight: 700;
        color: #9499B4;
        background-color: #F5F5FA;
        box-shadow: 0px 10px 20px rgb(186 186 186 / 20%);
        -webkit-box-shadow: 0px 10px 20px rgb(186 186 186 / 20%);
    }
    .Inquire_area .select__wrap {
        max-width: 256px;
    }
    .Inquire_area .editor_ {
        align-items: flex-start;
    }
    .Inquire_area .editor_ > label,
    .Inquire_area .top_ > label {
/*        padding-top: 18px;*/
/*        padding-top: 18px;*/
    }
    .Inquire_area .editor_ textarea {
        min-height: 315px !important;
    }
    .uploader {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .uploader .inp_ {
        position: relative;
        background-color: #F5F5FA;
        border-radius: 10px;
        border: none;
        padding: 0 20px;
        width: 410px;
        min-height: 60px;   
    }
    .uploader .inp_ input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    .uploader .uploadBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90px;
        height: 30px;
        margin-left: 10px;
        color: #222;
        border: 1px solid var(--line-color);
        border-radius: 5px;
        background-color: #fff;
        cursor: pointer;
    }
    .uploader + .files {
        font-size: 14px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap:10px;
    }
    .uploader + .files .item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 10px;
    }
.uploader + .files .item:first-child{
    margin-top: 0;
}
    .uploader + .files .item .close {
        max-width: 26px;
        height: 26px;
        padding: 0;
        margin-left: 10px;
        min-height: inherit;
        flex-grow: inherit;
        background-color: transparent;
        background-image: url(../img/icon/tool/xBtn.svg);
        background-repeat: no-repeat;
        cursor: pointer;
    }
.uploader + .files .file-item{
    display: flex;
    gap:10px;
    align-items: center;
}
    .uploader + .files .file-item .delete-file {
        width: 15px;
        height: 15px;
        padding: 0;
        min-height: inherit;
        flex-grow: inherit;
        background-color: transparent;
        background-image: url(../img/icon/tool/xBtn.svg);
        background-repeat: no-repeat;
        background-size: cover;
        border: none;
        cursor: pointer;
    }


/* 공지사항 */
    .customer_his_area {}
    .customer_his_area dl dt:nth-child(1),
    .customer_his_area dl dd:nth-child(1) {
        width: 80px;
    }
    .customer_his_area dl dt:nth-child(2),
    .customer_his_area dl dd:nth-child(2) {
        width: 150px;
    }
    .customer_his_area dl dd:nth-child(2) {
        color: #9499B4;
    }
    .customer_his_area dl dt:nth-child(3),
    .customer_his_area dl dd:nth-child(3) {
        flex-grow: 1;
    }
    .customer_his_area dl dd:nth-child(3) {
        justify-content: flex-start;
    }
    .customer_his_area dl dt:nth-child(4),
    .customer_his_area dl dd:nth-child(4) {
        width: 110px;
    } 
    .customer_his_area dl dt:nth-child(5),
    .customer_his_area dl dd:nth-child(5) {
        width: 130px;
    }
    .customer_his_area dl dd:nth-child(4),
    .customer_his_area dl dd:nth-child(5) {
        color: #999;
    }

    /* 공지 상세 */
    .customer_details .head {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80px;
        padding: 0 30px;
        border-top: 1px solid #222;
    }

    .customer_details .subject,
    .customer_details .tool {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .customer_details .subject {
        flex-grow: 1;
    }
    .customer_details .subject span {
        flex-shrink: 0;
        font-size: 14px;
        color: #9499B4;
        margin-right: 28px;
    }
    .customer_details .subject h1 {
        font-size: 24px;
        font-weight: 400;
        max-width: 800px;
    }
    .customer_details .tool {
        flex-shrink: 0;
    }
    .customer_details .tool .date,
    .customer_details .tool .views {
        background-repeat: no-repeat;
        background-position: left center;
        color: #999;
        padding-left: 34px;
    }
    .customer_details .tool .date {
        background-image: url(../img/icon/fe/calendar.svg);
    }
    .customer_details .tool .views {
        background-image: url(../img/icon/fe/eye.svg);
        margin-left: 30px;
    }


    .customer_details .conetent{
        padding: 50px 0;
        color: #666;
        min-height: 420px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    .customer_details .btn_area {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 35px;
        margin-bottom: 70px;
    }
    .customer_details .btn_area .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 160px;
        height: 60px;
        border-radius: 10px;
        border: 1px solid #222;
        color: #222;
    }
    .customer_details .btn_area .btn img {
        margin-right: 15px;
    }


/* 캠페인 상세 */
    .smartstore {
        padding: 2px 10px;
        color: #40A436;
        border: 1px solid currentColor;
        border-radius: 4px;
    }
    .coupang {
        padding: 2px 10px;
        color: #F7552F;
        border: 1px solid currentColor;
        border-radius: 4px;
    }
    .coupang_wow {
        padding: 2px 10px;
        color: var(--primary-color);
        border: 1px solid currentColor;
        display: inline-block;
        border-radius: 4px;
        font-size: 12px;
        position: absolute;
        left: 10px;
        top: 10px;
        background: #fff;
        font-weight: 500;
        z-index: 4;
    }
    .gmarket {
        padding: 2px 10px;
        color: #00C01E;
        border: 1px solid currentColor;
        border-radius: 4px;
    }
    .auction {
        padding: 2px 10px;
        color: #E40718;
        border: 1px solid currentColor;
        border-radius: 4px;
    }
    .elevenst {
        padding: 2px 10px;
        color: #E1002A;
        border: 1px solid currentColor;
        border-radius: 4px;
    }
    .musinsa {
        padding: 2px 10px;
        color: #000000;
        border: 1px solid currentColor;
        border-radius: 4px;
    }
    .idus {
        padding: 2px 10px;
        color: #F7772E;
        border: 1px solid currentColor;
        border-radius: 4px;
    }
    .delivery {
      padding: 2px 10px;
      color: #db3cdbc7;
      border: 1px solid currentColor;
        border-radius: 4px;
    }
    .mapNaver {
      padding: 2px 10px;
      color: #40A436;
      border: 1px solid currentColor;
        border-radius: 4px;
    }
    .mapKakao {
      padding: 2px 10px;
      color: #fdf918;
      border: 1px solid currentColor;
        border-radius: 4px;
    }
    .mapGoogle {
      padding: 2px 10px;
      color: #E40718;
      border: 1px solid currentColor;
        border-radius: 4px;
    }
    .apply_area {
        background-color: #ECF9FB;
        border-radius: 15px;
        padding: 26px 30px;
        margin-top: 15px;
    }
    .apply_area dl {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 14px;
        margin-bottom: 20px;
    }
.apply_area dl.bet_option{
}
.apply_area .mileage{
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    display: block;
    background: #fff;
    padding: 19px 10px;
    text-align: center;
    line-height: 1;
}
.apply_area .mileage input{
    width: auto;
    padding: 0;
    height: auto;
    line-height: 1;
    display: inline-block;
    width: fit-content;
    max-width: 30px;
    text-align: right;
    border: none;
}
.apply_area .bet_select_cont{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    padding-top: 10px;
}
.apply_area .bet_select_cont button{
    background: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    padding: 11px;
    padding: 10px 0;
}
.apply_area .bet_select_cont button.reset{
    background: #fff;
    color: var(--primary-color);
}
.apply_area .bet_select_cont button.reset img{
    max-width: 15px;
}

.apply_area .has_mileage_cont{
    font-size: 12px;
    color: #666;
    font-weight: 500;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    line-height: 1;
}
.apply_area .has_mileage_cont .has_mileage{
    padding: 0 3px;
}
    .apply_area dl dd:first-child {
        flex-shrink: 0;
        width: 120px;
        color: #16B9CB;
    }
    .apply_area .option_ {
        padding-top: 20px;
        border-top: 1px solid #CAEFF3;
    }
.apply_area .option_.bet{
    margin-top: 30px;
}

.apply_area .tip_cont{
    background: #fff;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    padding: 15px;
    font-size: 12px;
    display: flex;
    gap: 8px;
    margin-top: 20px;
    color: #444;
}
    .apply_area .option_ > label {
        display: block;
        margin-bottom: 10px;
        font-size: 14px;
        color: #16B9CB;
    }
    .apply_area .option_ select {
        width: 100%;
        height: 40px;
        padding: 0 15px;
        border-color: #CAEFF3;
        background-color: #fff;
        color: #666;
        font-size: 14px;
    }
    .apply_area .option_ select option[disabled] {
        color: #c9c9c9;
      }
    .apply_area .btn_area {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 20px;
    }
    .apply_area .btn_area .submitBtn {
        flex-grow: 1;
        margin-right: 10px;
    }
    .favBtn {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        border-radius: 10px;
        color: #3CCBDB;
        border: 1px solid #3CCBDB;
        background-color: #fff;
        background-image: url(../img/icon/tool/fav.svg);
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    } 
    .favBtn.active {
        color: #3CCBDB;
        background-image: url(../img/icon/tool/fav_a.svg);
    }
    .zzimBtn {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        border-radius: 10px;
        color: #3CCBDB;
        border: 1px solid #3CCBDB;
        background-color: #fff;
        background-image: url(../img/icon/tool/fav.svg);
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    } 
    .zzimBtn.active {
        color: #3CCBDB;
        background-image: url(../img/icon/tool/fav_a.svg);
    }

    .shareBtn img {
        margin-right: 10px;
    }
    .toggle_item {
        display: none;
        position: absolute;
        right: 0;
        top: 100%;
        background-color: #FFFFFF;
        border-radius: 6px;
        border: 1px solid #eee;
        box-shadow: 0px 5px 10px rgba(0,0,0,0.05);
        -webkit-box-shadow: 0px 5px 10px rgba(0,0,0,0.05);
        padding: 13px 10px;
        padding-bottom: 25px;
        z-index: 9;
    }
    .toggle_item .tit {
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }
    .toggle_item .close {
        position: absolute;
        right: 0;
        top: 0;
        width: 46px;
        height: 46px;
        background-image: url(../img/icon/tool/close_s.svg);
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }

    .share_list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 8px;
    }
    .share_list li + li {
        margin-left: 20px;
    }

    .linkCopy {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        height: 35px;
        font-size: 12px;
    }
    .linkCopy input {
        flex-grow: 1;
        width: 100%;
        height: 100%;
        padding: 0 10px;
        border-radius: 3px 0 0 3px;
    }
    .linkCopy button {
        flex-shrink: 0;
        background-color: #16B9CB;
        border-color: #16B9CB;
        color: #fff;
        padding: 0 12px;
        border-radius: 0 3px 3px 0;
    }
    



    .compain_detials {
        position: relative;
        padding-right: 430px;
        min-height: 800px;
    }
    .compain_detials .side_area {
        position: absolute;
        right: 0;
        top: 0;
        width: 360px;
        height: 100%;
    }
    .compain_detials .side_area .sticky {
        position: relative;
        top: 0px;
        left: 0;
    }
   


    .compain_detials .head {
        position: relative;
        z-index: 0;
    }
    .compain_detials .head .tool {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 44px;
    }
    .compain_detials .head .tool a {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .compain_detials .head h1 {
        font-size: 30px;
        font-weight: 700;
        margin-bottom: 9px;
        padding-right: 90px;
    }
    .compain_detials .head .comment {
        color: #666;
        font-size: 16px;
    }
    .compain_detials .head .tag_area {
        margin-top: 27px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #666;
    }
    .compain_detials .head .tag_area .smartstore,
    .compain_detials .head .tag_area .coupang,
    .compain_detials .head .tag_area .gmarket,
    .compain_detials .head .tag_area .auction,
    .compain_detials .head .tag_area .elevenst,
    .compain_detials .head .tag_area .musinsa,
    .compain_detials .head .tag_area .idus,
    .compain_detials .head .tag_area span {
        margin-right: 10px;
    }
    .compain_detials .share_area {
        position: relative;
        padding: 10px 0;
    }

    .compain_detials .content {
        padding-top: 40px;
/*        margin-bottom: 70px;*/
    }
    
    .compain_detials .hide_area .wrap {
        height: 100%;
        overflow: hidden;
    }
    .compain_detials .hide_area .wrap img {
        width: 100%;
    }
    .compain_detials .hide_area .moreBtn {
        width: 100%;
        margin-top: 40px;
        background-color: #fff;
        font-size: 16px;
        font-weight: 400;
        border: 1px solid #9499B4;
        border-radius: 5px;
        cursor: pointer;
    }
    .compain_detials .hide_area .wrap.active {
        height: auto;
    }
    .compain_detials .hide_area .wrap.active + .moreBtn {
        display: none;
    }
.compain_detials .hide_area .wrap .empty_img{
    text-align: center;
    padding: 50px 0;
}

    .compain_detials .btn_area {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

.side_area .apply_area .btn_area_MO{
    display: none;
}
.compain_detials .side_area .sheet_head{
    display: none;
}


    .compain_detials .btn_area .submitBtn img {
        margin-right: 10px;
    }

    .compain_detials .guide_area {
        margin-top: 75px;
    }
    .compain_detials .guide_area > .title {
        text-align: center;
    }

    .compain_detials .head .details{
        display: flex;
        align-items: center;
        padding-top: 14px;
    }
.compain_detials .head .details > div {
    margin-top: 0;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}
.compain_detials .head .details > div:not(.tag_area){
    gap: 20px;
    display: flex;
    padding-left: 0;
}
.compain_detials .head .details > div::before{
    content: "";
    display: none;
    width: 1px;
    height: 18px;
    background: #222;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    
}
.compain_detials .head .details > div:first-child{
    padding-left: 0;
}
.compain_detials .head .details > div:first-child::before{
    background: transparent;
}
.compain_detials .head .details .tag_area p{
    display: flex;
    gap:5px;
    padding-right: 15px;
}
.compain_detials .head .details .tag_area p:last-child{
    padding-right: 0;
}
.compain_detials .head .details .tag_area p span{
    margin-right: 0;
}
.compain_detials .head .details .count{
    color: #222;
}

@media (max-width:800px){
    .compain_detials .head .details > div{
        font-size: 12px;
        padding: 0;
/*
        border-right: 1px solid #222;
        padding-right: 2dvw;
*/
    }
    .compain_detials .head .details > div:last-child{
/*        border-right: none;*/
        gap:15px;
    }
    .compain_detials .head .details > div.PC_content{
        display: none;
    }
    .compain_detials .head .details > div::before{
        display: none;
    }
}

    .guide_area .guide_list {
/*
        margin-top: 17px;
        border-top: 1px solid #222;
*/
        margin-bottom: 20px;
    }
     .guide_area .guide_list li {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 40px 0;
        border-bottom: 1px solid #ddd;
    }
    .guide_area .guide_list li h5 {
        flex-shrink: 0;
        width: 210px;
        display: flex;
        gap:5px;
    }
    .guide_area .guide_list li .text_ {
        color: #666;
        max-width: 766px;
        word-break: break-all;
        width: 100%;
    }

    .guide_area .guide_notice {
        background-color: #F5F5FA;
        border-radius: 15px;
        padding: 55px 67px;
    }
    .guide_area .guide_notice > h1 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 20px;
        margin-bottom: 10px;
    }
    .guide_area .guide_notice > h1 .exmark {
        margin-right: 15px;
    }
    .guide_area .guide_notice .desc {
        white-space: pre-line;
        color: #454D56;
        background: #fff;
        padding: 15px;
        border-radius: 10px;
    }


.guide_area .mission_icon{
    max-width: 35px;
    min-height: 35px;
    max-height: 35px;
}
.icon_box img.mission_icon[title]{
    border-radius: 10px;
    padding: 5px;
}
.icon_box img.mission_icon[title='글자수']{
    background: #EEEEEE;
}
.icon_box img.mission_icon[title='사진']{
    background: #FFF4E2;
}
.icon_box img.mission_icon[title='동영상']{
    background: #FFE2FD;
}
.icon_box img.mission_icon[title='구매 링크']{
    background: #E2EDFF;
}
.icon_box img.mission_icon[title='링크 삽입']{
    background: #E2FFF2;
}
.icon_box img.mission_icon[title='지도 링크']{
    background: #E2FFF2;
}
.icon_box img.mission_icon[title='인스타브랜드계정']{
    background: #F6E2FF;
}

.guide_area .icon_box{
    display: flex;
    gap:20px;
    padding-bottom: 20px;
}

.guide_background{
    padding: 25px 20px;
    border-radius: 10px;
    background: #ECF9FB;
}

.guide_desc .modal_shop_url{
    border-radius: 5px;
    color: #3CCBDB;
    border: 1px solid #3CCBDB;
    background:#FFF;
    line-height: 1;
    width: 100%;
    text-align: center;
    cursor: pointer;
    display: flex;
    padding: 14px;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}
.guide_desc .modal_shop_url.customBtn_p{
    width: auto;
    display: inline-block;
}

.guide_area .icon_box .icon_item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:10px;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}
.guide_area .guide_cont{
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap:20px;
    padding-bottom: 25px;
}
.guide_area .guide_cont:last-child{
    padding-bottom: 0;
}
.guide_area .guide_cont:nth-of-type(2){
    margin-top: 0;
}

.guide_area .info_box{
    color: #666;
    display: flex;
    gap:10px;
    flex-direction: column;
    padding-top: 25px;
}
.guide_area .info_box:first-child{
    padding-top: 0;
}
.guide_area .info_box div img{
    max-width: 22px;
    min-height: 22px;
}


.guide_area .info_box div:first-child{
/*    max-width: 70px;*/
/*    min-width: 70px;*/
    flex: 1;
    color: #454D56;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
}
.guide_area .info_box div:last-child{
    font-size: 16px;
    font-weight: 400;
    color: #454D56;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    background: #fff;
    padding: 15px;
}

.guide_area .info_box .desc{
    margin-top: -5px;
}

.guide_area .tag_desc{
    padding-top: 5px;
}

.guide_area .copy_box{
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 15px 0 20px;
}

.guide_area .tag_desc p{
/*    padding-left: 20px;*/
    position: relative;
    font-size: 12px;
}
/*
.guide_area .tag_desc p::before{
    content:"";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 7px;
    background: #666;
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    transform: translateY(-50%);
}
*/




    .toggle_item {
/*        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        -webkit-transform: translate3d(-50%, -50%, 0);*/
        width: 320px;
        margin-top: 15px;
    }


/*  인플루언서 프로필 */
    .review_details {
        padding: 40px 0;
    }

    .profile_details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #FAFAFA;
        border-radius: 15px;
        padding: 30px 40px;
        margin-bottom: 50px;
    }
    .profile_details .profile_area {
        flex-grow: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 90px;
    }
    .profile_details .profile_area .profile_ {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .profile_details .profile_area .profile_img {
        margin-right: 25px;
    }
    .profile_details .profile_area .profile_info {
        flex-flow: column;
        align-items: flex-start;
        margin-top: 0;
    }  
    .profile_details .profile_area .profile_info h1 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 20px;
    }
    .profile_details .profile_area .profile_info img {
        vertical-align: bottom;
        margin-right: 10px;
    }
    .profile_details .profile_area .profile_info .email {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #999;
        margin-top: 5px;
    }
    .icon_naver,
    .icon_kakao {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: center;
        margin-right: 5px;
    }
    .icon_naver {
        background-image: url(../img/sign/naver.svg);
        background-size: 8px;
    }
    .icon_kakao {
        background-image: url(../img/sign/kakao.svg);   
        background-size: 12px;
    }
    .profile_details .profile_area .favBtn {
        width: 120px;
        height: 50px;
        border-radius: 10px;
        padding-left: 54px;
        justify-content: flex-start;
        background-position: left 18px center;
    }
    .profile_details .profile_area .zzimBtn {
        width: 120px;
        height: 50px;
        border-radius: 10px;
        padding-left: 54px;
        justify-content: flex-start;
        background-position: left 18px center;
    }
    .profile_details .follower_ {
        flex-shrink: 0;
    }
    .profile_details .follower_ ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .profile_details .follower_ ul li {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .profile_details .follower_ ul li + li {
        margin-left: 50px;
    }
    .profile_details .follower_ .sns_icon {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: 1px solid #E4E4E4;
        background-color: #fff;
        margin-right: 20px;
    }
    .profile_details .follower_ a {
        padding-right: 20px;
        background-image: url(../img/icon/tool/blank_.svg);
        background-repeat: no-repeat;
        background-position: right bottom 5px;
        margin-bottom: 5px;
    }
    .profile_details .follower_ span {
        color: #888;
    }
    .profile_details .follower_ .value {
        color: #222;
    }

    .about_area {
        padding-top: 40px;
    }
    .about_area > .title {
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 20px;
    }

    .about_profile {}
    .about_profile dl {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .about_profile dl dl {
        flex: 0 1 50%;
    }
    .about_profile > dl {
        border-bottom: 1px solid #eee;
    }
    .about_profile > dl + dl {
        padding-top: 30px;
    }
    .about_profile dl dd {
        flex-grow: 1;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding-bottom: 30px;
    }
    .about_profile dl dd .tit {
        flex-shrink: 0;
        width: 135px;
    }
    .about_profile dl dd .desc {
        white-space: pre-line;
        color: #888;
    }

    .flex_center {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    /* 포트폴리오 */
    .about_area .btn_area {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 60px;
    }

    .list_area > .tool,
    .withdraw_history .tool {
        display: flex;
        justify-content: space-between;
        align-items: center;
        word-break: keep-all;
    }
    .list_area > .tool {
        margin-bottom: 30px;
    }
.list_area > .tool .left{
    flex-direction: column;
    align-items: flex-start;
}
    .list_area > .tool > div,
    .withdraw_history > .tool > div {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .list_area > .tool .count {
        color: #3CCBDB;
    }
    .list_area > .tool .selectBox__ .list__,
    .withdraw_history > .tool .selectBox__ .list__ {
        margin-top: 5px;
        border: 1px solid #3CCBDB;
        border-radius: 8px;
        overflow: visible;
    }
    .list_area > .tool .selectBox__ .list__ li,
    .withdraw_history > .tool .selectBox__ .list__ li {
        width: 100%;
        margin: 0;
        border-radius: 0;
        border: none;
        min-height: auto;
        box-shadow: none;
        align-items: center;
        gap: 8px;
        line-height: 1;
    }
    .list_area > .tool .selectBox__ .list__ li:first-child{
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
    .list_area > .tool .selectBox__ .list__ li:last-child{
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }


    .list_area > .tool .selectBox__ .select__,
    .withdraw_history > .tool .selectBox__ .select__ {
        height: 50px;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding-left: 15px;
    }
    .list_area > .tool .select__wrap { 
        margin-left: 10px;
    }
    .list_area > .tool .selectSort2,
    .withdraw_history > .tool .selectSort2 {
        width: 160px;
    }
    .list_area > .tool .selectFilter .list__ {
        left: auto;
        right: 0;
        width: 160px;
    }
    .list_area > .tool .selectFilter .list__ li:before {
        content: "";
        width: 18px;
        height: 18px;
        background-image: url(../../../img/icon/check_2px.svg);
        background-repeat: no-repeat;
        background-position: center;
        margin: 0;
        background-size: cover;
    }
    .list_area > .tool .selectFilter .list__ li.selected {
        font-weight: 400;
        color: #222;
    }
    .list_area > .tool .selectFilter .list__ li.selected:before {
        background-image: url(../../../img/icon/checked_2px.svg);
    }
    .list_area .empty {
        text-align: center;
        margin-top: 120px;
        background: #fff;
        color: #aaa;
    }
    .selectFilter .select__ {
        padding-right: 20px;
        background-image: none;
    }
    .selectFilter .select__:before {
        content: "";
        width: 16px;
        height: 18px;
        background-image: url(../img/icon/tool/filter.svg);
        background-repeat: no-repeat;
        margin-right: 10px;
        margin-top: 2px;
    }
    .selectFilter .list__ {
        width: 160px;
        right: 0;
        left: auto;
    }


/* 나의 캠페인 */
    .cmpState_ {
        background-color: #F9F9F9;
        padding: 22px;
        border-radius: 15px;
    }
    .cmpState_ ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .cmpState_ ul li {
        text-align: center;
    }
    .cmpState_ ul li b {
        color: #888;
        font-size: 30px;
        padding-top: 3px;
    }
    .cmpState_ ul li b.active {
        color: #3CCBDB;
    }
    .cmpState_ + .list_area.col-03 {
        margin-top: 60px;
    }

.list_area .btnCont{
/*    padding: 0 15px 15px;*/
}
.list_area .btnCont > .btn{
    margin-bottom: 10px;
    transition: all .2s;
}
.list_area .btnCont > .btn:last-child{
    margin-bottom: 0;
}
.list_area .btnCont > .btn:hover{
    background: #3CCBDB;
    color: #fff;
}
.list_area .btnCont .ui-button{
     padding: 14.5px 8px;   
}
.list_area .btnCont .ui-button .text{
    display: flex;
    justify-content: center;
    gap:3px;
}
    .list_area.col-03 {
        width: 1120px;
    }

    .list_area.col-03 ul li:not(.pagenate ul li) {
        position: relative;
        width: 250px;
    }
    .list_area.col-03  ul li:nth-child(5):not(.pagenate ul li) {
        margin-top: 50px;
    }
    .list_area.col-03 ul li:nth-child(5n+1):not(.pagenate ul li) {
        margin-left: 40px;
    }
    .list_area.col-03 ul li:nth-child(4n+1):not(.pagenate ul li) {
        margin-left: 0;
    }
    .list_area.col-03 .details {
        min-height: 110px;
    }
    .list_area.col-03 li .btn {
        width: 100%;
        height: 45px;
        color: #16B9CB;
        border: 1px solid #16B9CB;
        font-size: 15px;
        font-weight: 500;
    }
    .list_area.col-03 li .btn:disabled{
        background: #F5F5F5;
        border-color: var(--line-color);
        color: #999;
    }
    .list_area.col-03 li .btn img {
        margin-right: 5px;
    }
    .list_area.col-03 li .btn.compelte {
        background-color: #F5F5F5;
        border-color: #E7E7E7;
        color: #999999;
        word-break: keep-all;
    }

.list_area.col-03 li .message_btn{
    margin-top: 5px;
    border-color: var(--line-color);
    color: #222;
    display: flex;
    gap: 5px;
    align-items: center;
    cursor: pointer;
}
.list_area.col-03 li .message_btn:hover{
    /* color: white;
    background: var(--navy-color); */
}
.list_area.col-03 li .message_btn svg{
    fill: var(--navy-color);
}


/*
    .list_area.col-03 .timer {
        position: absolute;
        left: 0;
        top: 0;
        margin: 10px;
        padding: 3px 10px;
        padding-left: 26px;
        color: #fff;
        font-size: 13px;
        border-radius: 8px;
        background-color: rgba(0,0,0,0.5);
        background-image: url(../img/icon/tool/clock.svg);
        background-repeat: no-repeat;
        background-position: left 10px center;
        z-index: 100;
        line-height: 20px;
    }
*/

    .list_area.col-03 .cancel,.list_area.col-03 .review_cancel {
        position: absolute;
        right: 0;
        top: 0;
/*        margin: 8px;*/
        margin: 0px;
        padding: 6px 13px;
        color: var(--red-100-color);
        font-size: 12px;
        border-radius: 8px;
        border-color: var(--red-100-color);
        background-color: rgba( 255, 255, 255, 0.5 );
        background-repeat: no-repeat;
        z-index: 100;
        line-height: 13px;
    }


/* 찜목록 캠페인 */
    .sub_page_tab + .list_area {
        margin-top: 38px;
    }
    .list_area .imgBox {
        position: relative;
    }
    .list_area .imgBox .over_ {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: transparent;
        padding: 10px 12px;
        z-index: 10;
    }
    .list_area .closed .imgBox .over_ {
        background-color: rgba(0,0,0,0.5);
    }
    .list_area .imgBox .over_ .tool {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #fff;
    }
    .list_area .imgBox .over_ .tool .removeBtn {
        width: 30px;
        height: 30px;
        cursor: pointer;
        margin-left: 5px;
    }
    .list_area .imgBox .over_ .tool .state_ {
        padding: 4px 10px;
        border: 1px solid #fff;
        border-radius: 5px;
        font-size: 14px;
        font-size: 700;
    }

/* 포트폴리오 */
    .ct_title + .about_area {
        padding-top: 0;
    }
    .about_area .list_area.col-03 .details {
        min-height: 0;
    }
    .about_area .list_area.col-03 ul li + li:not(.pagenate ul li) {
        margin-top: 35px;
    }
    .about_area .list_area.col-03 ul li:nth-child(1):not(.pagenate ul li),
    .about_area .list_area.col-03 ul li:nth-child(2):not(.pagenate ul li),
    .about_area .list_area.col-03 ul li:nth-child(3):not(.pagenate ul li),
    .about_area .list_area.col-03 ul li:nth-child(4):not(.pagenate ul li) {
        margin-top: 0;
    }



#missionModal .field_area .field{
    flex-direction: column;
    align-items: flex-start;
    gap:15px;
}


/* 맞춤 캠페인 설정 창 */

/*
#customModal{
    height: calc(100dvh - 67px);
}

#customModal .closer {
    position: static;
    left: 0;
    top: 0;
    transform: none;
    width: 13px;
    height: 26px;
    background-image: none;
    margin: 0;
}
#customModal .check_area{
    gap:15px 20px;
}
#customModal .modal-layer{
    margin: 0;
    height: calc(100dvh - 67px);
    max-width: none;
    max-height: none;
    border-radius: 0;
}
#customModal .modal-layer .content{
    height: calc(100% - 85px - 72px); 
}

#customModal .modal-layer .head{
    background: var(--primary-color);
    color: #fff;
    padding: 30px 15px;
    height: initial;
    font-size: 18px;
    
    justify-content: flex-start;
    gap: 30px;
}

#customModal .modal-layer .field_area .field{
    flex-direction: column;
    align-items: flex-start;
}
#customModal .modal-layer .field + .field{
    margin-top: 30px;
}

#customModal .modal-layer .btn_area{
    position: fixed;
    bottom: 82px;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 15px;
    padding-bottom: 0;
    background: #fff;
}
#customModal .modal-layer .btn_area .submitBtn{
    line-height: 1;
    padding: 18px 0 ;
    border-radius: 10px;
    font-size: 16px;
    height: auto;
}
*/

/* 로그아웃 모달 창 */
#logout .modal-layer .btn_area{
    padding: 0;    
}


/* 미션 중지 모달창 */
#mission_error{
    max-width: 660px;
    margin: 0 auto;
}
#mission_error .modal-layer .field{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#mission_error .modal-layer .field .checkbox_{
    
}
#mission_error .modal-layer .field label{
    width: auto;
    padding-bottom: 10px;
    color: #444;
    align-self: flex-start;
}
#mission_error .modal-layer .content{
    display: flex;
    flex-direction: column;
    gap:20px;
    padding: 20px 30px;
}
#mission_error .modal-layer .content .info_cont{
    background: #F8F8FA;
    padding: 10px 20px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#mission_error .checkbox_ input + label:before{
    align-self: flex-start;
    margin-top: 3px;
}

#mission_error .modal-layer .field label span{
    font-weight: 300;
    display: inline-block;
}

#mission_error .modal-layer .btn_area{
    margin-top: 0;
}


#mission_error_modal{
    max-width: 660px;
    margin: 0 auto;
}
#mission_error_modal .modal-layer .field{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#mission_error_modal .modal-layer .field .checkbox_{
    
}
#mission_error_modal .modal-layer .field label{
    width: auto;
    padding-bottom: 10px;
    color: #444;
    align-self: flex-start;
}
#mission_error_modal .modal-layer .content{
    display: flex;
    flex-direction: column;
    gap:20px;
    padding: 20px 30px;
}
#mission_error_modal .modal-layer .content .info_cont{
    background: #F8F8FA;
    padding: 10px 20px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#mission_error_modal .checkbox_ input + label:before{
    align-self: flex-start;
    margin-top: 3px;
}

#mission_error_modal .modal-layer .field label span{
    font-weight: 300;
    display: inline-block;
}

#mission_error_modal .modal-layer .btn_area{
    margin-top: 0;
}

/* SNS 정보 연결 모달창 */
#SNSConnectModal .modal-layer {
    max-width: 600px;
    
}
#SNSConnectModal .modal-layer .content {
    padding: 0;
    padding-bottom: 40px;
    max-height: calc(100vh - 150px);
    overflow-y: scroll;
    border-radius: 0 0 20px 20px;
}
#SNSConnectModal .modal-layer .content::-webkit-scrollbar {
    width: 15px;
    background-color: transparent;
}
#SNSConnectModal .modal-layer .content::-webkit-scrollbar-thumb {
    background-color: #9499B4;
    border: 5px solid #fff;
    border-radius: 15px;
    cursor: pointer;
    opacity: 0;
}
#SNSConnectModal .modal-layer .content::-webkit-scrollbar-track {
    background-color: transparent;
    opacity: 0;
}

#SNSConnectModal .text{
    padding: 10px 30px;
    font-weight: 700;
}
#SNSConnectModal .alert{
    justify-content: center;
    padding-left: 0;
}
#SNSConnectModal .modal-layer .btn_area{
    gap: 10px;
    margin-top: 40px;
}
#SNSConnectModal button.closer{
    position: static;
    background-image: none;
    width: 220px;
    height: 60px;
    border-radius: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    background: #B5B5B5;
    color: white;
}
#SNSConnectModal .modal-layer .btn_area #sns_close_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 60px;
    background-color: #B5B5B5;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

#customModal .modal-layer{
    max-width: 600px;
}
#customModal .modal-layer .content{
    padding: 20px 30px;
    max-height: 680px;
    overflow: auto;
}
#customModal .modal-layer .field{
    flex-direction: column;
    align-items: flex-start;
    gap:20px;
}
#customModal .check_area{
    gap:15px 20px;
    border: none;
}
#customModal .check_area label{
    width: fit-content;
}
/* NOTE: 맞춤 캠페인 모달도 적용시 SNS ID값을 빼고 적용한다. */

@media (max-width: 800px){
/* 리뉴얼 디자인 사용 전까지만 사용    */
#SNSConnectModal .modal-layer .btn_area{
    gap: 10px;
    margin-top: 40px;
}
    #SNSConnectModal .modal-layer .btn_area button{
        height: 60px;
        flex:1;
        border-radius: 10px;   
    }
    
    #SNSConnectModal .modal-layer .btn_area #sns_close_btn{
        width: 100%;
    }
    
    
    #SNSConnectModal .modal-layer .content{
        padding: 15px 0 40px;
        overflow-y: auto;
    }
    
    #SNSConnectModal .modal-layer{
        max-width: initial;
        border-radius: 0;
        margin: 0;
        height: 100%;
    }
    #SNSConnectModal .modal-layer > .closer{
        display: none;
    }
    #SNSConnectModal .modal-layer .head h1{
        font-size: 18px;
        height: 88px;
        display: flex;
        align-items: center;
        position: relative;
    }
    
    #SNSConnectModal .modal-layer .head{
        height: auto;
        background: var(--primary-color);
        color: #fff;
        position: relative;
    }
    #SNSConnectModal .modal-layer .head h1::before{
        content: '';
        display: block;
        background: #fff;
        width: 20px;
        height: 20px;
        transform: translate(-50%, 50%) rotate(45deg);
        position: absolute;
        left: 50%;
        bottom: 0;
        
    }
    #SNSConnectModal .text{
        font-size: 18px;
    }
    #SNSConnectModal .modal-layer .content{
        text-align: center;
        height: calc(100% - 85px);
        padding: 0;
        max-height: initial;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow-y: initial;
    }
    #SNSConnectModal .modal-layer .field label{
        display: none;
    }
    #SNSConnectModal .modal-layer .field_area .field .SNS_ li{
        height: auto;
        gap:20px;
    }
    #SNSConnectModal .field_area .field .SNS_ .icon{
        width: 60px;
        padding: 15px 0;
        margin: 0;
    }
    #SNSConnectModal .field_area .field .SNS_ div:nth-child(3){
        margin: 0;
    }
    #SNSConnectModal .modal-layer .btn_area{
        flex-direction: column;
        
    }
    #SNSConnectModal .modal-layer .btn_area button{
        width: 100%;
        padding: 18.5px 0;
        height: auto;
        font-size: 16px;
        border-radius: 10px;
    }
    #SNSConnectModal .alert{
        font-size: 13px;
    }
}



/* 미션 제출하기 */
    #missionModal .modal-layer {
        max-width: 600px;
    }
    #missionModal .modal-layer .content {
        padding: 0;
/*        padding-bottom: 40px;*/
        max-height: calc(100vh - 150px);
        overflow-y: scroll;
        border-radius: 0 0 20px 20px;
    }
    #missionModal .modal-layer .content::-webkit-scrollbar {
        width: 15px;
        background-color: transparent;
    }
    #missionModal .modal-layer .content::-webkit-scrollbar-thumb {
        background-color: #9499B4;
        border: 5px solid #fff;
        border-radius: 15px;
        cursor: pointer;
        opacity: 0;
    }
    #missionModal .modal-layer .content::-webkit-scrollbar-track {
        background-color: transparent;
        opacity: 0;
    }


    .missionBlock {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 40px 30px;
        padding-bottom: 0;
        margin-bottom: 15px;
    }
    .missionBlock .imgBox {
        flex-shrink: 0;
        width: 200px;
        height: 200px;
        border-radius: 8px;
        margin-right: 30px;
        overflow: hidden;
    }
    .missionBlock .imgBox img {
        width: 100%;
        height: 100%;
    }
    .missionBlock .details {
        font-size: 14px;
    }
    .missionBlock .tag_area {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 7px;
        color: #666;
    }
    .missionBlock .tag_area img {
        width: 22px;
        margin-right: 5px;
    }
    .missionBlock .company_ {
        color: #888;
    }
    .missionBlock .subject {
        font-size: 16px;
        margin-bottom: 9px;
    }
    .missionBlock .option {
        color: #888;
        margin-bottom: 10px;
    }
    .missionBlock .point_tag {
        display: flex;
        justify-content: flex-start;
/*        align-content: */
    }
    .missionBlock .point_tag .point {
        font-size: 14px;
        padding: 5px 7px;
        border-radius: 5px;
        border: 1px solid currentColor;
        margin-right: 5px;
    }
    .missionBlock .point_tag .point.bonus {
        color: #16B9CB;
    }
    .missionBlock .btn {
        margin-top: 20px;
        width: 160px;
        height: 35px;
        font-weight: 500;
        border-radius: 5px;
        background-color: #3CCBDB;
        color: #fff;
    }

    .BuyMission {
        padding: 30px;
    }
    .BuyMission .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
    }
    .BuyMission .title h1 {
        font-size: 18px;
        font-weight: 700;
    }
    .BuyMission .state {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90px;
        height: 29px;
        border-radius: 5px;
        border: 1px solid #E7E7E7;
        background-color: #F5F5F5;
        color: #999;
        font-size: 14px;
    }
    .BuyMission .state img {
        margin-right: 5px;
    }

    .mission_guide {
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: #fff;
    }
    .mission_guide .head {
        height: 46px;
        padding: 0 15px;
        cursor: pointer;
        border: none;
        background-image: url(../img/icon/tool/select_down.svg);
        background-repeat: no-repeat;
        background-position: right 15px center;
    }
    .mission_guide .head.active {
        background-image: url(../img/icon/tool/select_up.svg);
    }
    .mission_guide .body {
        display: none;
        padding: 15px;
        font-size: 14px;
        color: #666;
        border-top: 1px solid #eee;
    }
    .mission_guide li {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 4px;
    }
    .mission_guide li:before {
        content: "";
        width: 4px;
        height: 4px;
        background-color: #ccc;
        margin-right: 6px;
        margin-top: 8px;
    }

    .mission_detial {
        margin-top: 20px;
    }
    .mission_photo {
        display: flex;
        justify-content: space-around;
        margin-bottom: 20px;
    }
    .mission_photo > div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
    }
    .mission_photo .subject {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 10px;
    }
    .mission_detial .uploader_area {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-flow: column;
        flex-shrink: 0;
    }
    .mission_detial .uploadList {
        flex-flow: column;
    }

    .mission_detial .uploadList .item {
        margin-right: 0;
        margin-bottom: 0;
        padding: 0;
    }

    #missionModal .uploader {
        position: relative;
        width: 73px;
        height: 73px;
        flex-shrink: 0;
        overflow: hidden;
    }
    #missionModal .uploader input {
        opacity: 0;
    }
    #missionModal .uploader input + label {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url(../img/icon/tool/uploader.svg);
        background-repeat: no-repeat;
        cursor: pointer;
        z-index: 1;
    }
    #missionModal .uploader_area {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .mission_detial .field {
        flex-grow: 1;
    }
    .mission_detial .field dl {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        gap:8px;
    }
    .mission_detial .field dl dd {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .mission_detial .field dl dd:first-child {
        flex-shrink: 0;
        font-size: 14px;
        width: 115px;
        color: #707070;
    }
    .mission_detial .field dl dd:last-child {
        flex-grow: 1;
    }
    .mission_detial .field dl + dl {
        margin-top: 10px;
    }
    .mission_detial .field dl input {
        flex-grow: 1;
        border-color: #ddd;
        border-radius: 5px;
        background-color: #fff;
        font-size: 14px;
        padding: 0 8px;
        height: 35px;
    }
    .mission_detial .field dl input + label {
        width: auto;
        flex-shrink: 0;
        font-size: 14px;
        padding: 0 9px;
    }

    .mission_item {
        padding: 30px;
    }
    .mission_item .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
/*        margin-bottom: 15px;*/
    }
    .mission_item .title h1 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 16px;
    }
    .mission_item .title h1 img {
        width: 25px;
        vertical-align: top;
        margin-right: 12px;
    }
    .mission_item .timer,
    .mission_item .dday {
        font-size: 14px;
        font-weight: 500;
    }
    .mission_item .timer img,
    .mission_item .dday img {
        margin-right: 5px;
    }
    .mission_item .timer {
        color: #FF7474;
    }
    .mission_item select {
        width: 100%;
        height: 47px;
        border-radius: 8px;
        border: 1px solid #ddd;
        background-color: #fff;
        font-size: 16px;
    }
    .sns_mission {
        background-color: #F9F9F9;
    }
    .mission_item > input {
        margin-top: 10px;
        width: 100%;
        height: 35px;
        border-radius: 8px;
        border: 1px solid #ddd;
        background-color: #fff;
        font-size: 14px;
    }
    .mission_item > input::placeholder {
        color: var(--placeholder-color);
    }
    .mission_item .uploader_area {
        margin-top: 21px;
    }
    .mission_item .uploader {
        margin-right: 0;
        border: 1px solid #ddd;
        border-radius: 10px;
        overflow: hidden;
    }
    .mission_item .uploadList .item {
        margin-bottom: 0;
        padding: 0;
    }

.mission_detial .field div.notice_cont{
    font-size: 12px;
    color: #666;
    padding-top: 5px;
}
.mission_detial .field div.notice_cont .paynack_notice{
    padding-top: 3px;
}
.mission_detial .field div.notice_cont .mission_error{
    text-align: right;
}
.mission_detial .field div.notice_cont .mission_error span{
    padding-bottom: 2px;
    border-bottom: 1px solid #666;
    cursor: pointer;
}
    .uploadList {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .uploadList .item {
        position: relative;
        width: 73px;
        height: 73px;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 10px;
        margin-right: 10px;
    }
    .uploadList .item img {
        width: 100%;
        height: 100%;
    }
    .uploadList .item .close {
        position: absolute;
        margin: 5px;
        right: 0;
        bottom: 0;
        width: 30px;
        height: 19px;
        background-image: url(../img/icon/tool/delete.svg);
        background-repeat: no-repeat;
        background-color: transparent;
        border: none;
        cursor: pointer;
    }




/* 포트폴리오 상세 */
    #detailsModal .modal-layer {
        max-width: 790px;
    }
    #detailsModal .modal-layer .content {
        padding: 30px;
    }
    #detailsModal .details {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
    }
    #detailsModal .details > article {} 
    #detailsModal .profile_area {
        width: 430px;
        padding-right: 30px;
        margin-right: 30px;
        border-right: 1px solid #E7E7E7;
    }
    #detailsModal .checkbox_.tab {
        margin-top: 0;
    }
    #detailsModal .checkbox_.tab input + label {
        height: 38px;
    }
    #detailsModal .profile_area .item {
        padding-top: 20px;
    }
    #detailsModal .profile_area .item > h1 {
        font-size: 16px;
        margin-bottom: 10px;
    }
    #detailsModal .profile_area .comment {
        background-color: #F9F9F9;
        border-radius: 5px;
        padding: 9px 20px;
        white-space: pre-line;
        font-size: 14px;
        line-height: 1.5em;
        min-height: 240px;
    }
    #detailsModal .list_area .col-06 {
        width: 100%;
    }
    #detailsModal .list_area .desc {
        white-space: pre-line;
        line-height: 1.5em;
    }
    #detailsModal .list_area .btn {
        margin-top: 30px;
        height: 40px;
        color: #16B9CB;
        font-size: 14px;
        font-weight: 500;
        border-radius: 5px;
        border-color: #16B9CB;
    }

.popup_notice{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    z-index: 999;
    
}

.popup_notice .close{
    position: absolute;
    right: 15px;
    top: 10px;
}

.popup_notice .body{
    width: calc(100% - 80px);
    background: #fff;
    padding: 30px 30px;
    border: 1px solid var(--primary-color);
    border-radius: 15px;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.popup_notice h1{
    font-size: 20px;
    text-align: center;
    padding-bottom: 16px;
    color: var(--primary-color);
    word-break: keep-all;
}

.popup_notice .desc{
    padding-bottom: 20px;
    word-break: keep-all;
}

.popup_notice .btn_wrap{
    display: flex;
    justify-content: center;
    align-items: center;    
}

.popup_notice .customBtn_p{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:10px;
    word-break: keep-all;
}

.ch_link {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 260px;
        height: 42px;
        border: 1px solid #E7E7E7;
        border-radius: 5px;
        margin-bottom: 6px;
        padding: 9px;
        background-color: #fff;
        background-image: url(../img/icon/tool/arrow_right_g.svg);
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 6px;
    }
    .ch_link:hover {
        background-image: url(../img/icon/tool/arrow_right_b.svg);
    }
    .ch_link img {
        margin-right: 10px;
    }



.real_time_contents .banner_cont{
    background: url(../img/banner/content_banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 50px 0 ;
}
.real_time_contents .banner_cont .contents{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
/*    aspect-ratio: 16 / 4;*/
}
.real_time_contents .banner_cont .contents .text{
    text-align: center;
}
.real_time_contents .banner_cont .contents .text h1{
    color: #fff;
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    padding-bottom: 10px;
}
.real_time_contents .banner_cont .contents .text h1 span{
    font-weight: 700;
}

.real_time_contents .banner_cont .contents .text p{
    font-size: 38px;
    font-weight: 700;
    color: #fff;
    padding-bottom: 15px;
    line-height: 1;
}

.real_time_contents .best_rank_inner{
    max-width: 1031px;
}
.real_time_contents .best_rank_swiper{
    max-width: 868px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.real_time_contents .best_rank_swiper .best_rank_cont{
    
}
.real_time_contents .best_rank_swiper .best_rank_cont .item{
    overflow: hidden;
}
.real_time_contents .best_rank_swiper .best_rank_cont .item .img_box{
    max-width: 100%;
    max-height: 256px;
    width: 100%;
    height: 256px;
}
.real_time_contents .best_rank_swiper .best_rank_cont .item .img_box img{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 256px;
    object-fit: cover;
}
.real_time_contents .best_rank_swiper .best_rank_cont .item .details{
    padding: 10px 15px;
}
.real_time_contents .best_rank_swiper .best_rank_cont .item .details .profile_img{
    max-width:30px;
    max-height: 30px;
    border-radius: 50%;
    overflow: hidden;
}
.real_time_contents .best_rank_swiper .best_rank_cont .item .details .profile_img img{
    width: 100%;
    height: 30px;
    display: block;
}

.real_time_contents #more{
    max-width: 940px;
    display: block;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #E4E4E4;
    text-align: center;
    margin: 0 auto;
    font-size: 28px;
    font-weight: 500;
    padding: 16px 0;
    background: #fff;
    line-height: 1;
    font-family: Pretendard;
    color: #666;
}
/*
.real_time_contents .best_rank_slide{
    display: flex;
    gap:50px;
}
*/
.real_time_contents .best_rank_slide .item{
    max-width: 255px;
}

.real_time_contents .rank_list:not(.best_rank_slide){
    display: flex;
    flex-wrap: wrap;
    gap:40px 60px;
    padding-bottom: 58px;
    padding-top: 40px;
}
.real_time_contents .rank_list .item .details{
    padding: 0;
}
.real_time_contents .keyword_cont{
    display: flex;
    gap:20px;
}
.real_time_contents .keyword_cont .img_box{
    max-width: 150px;
    max-height: 150px;
}
.real_time_contents .keyword_cont .img_box img{
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
}
.real_time_contents .keyword_cont > div{
}
.real_time_contents .keyword_cont .keyword_info{
    padding: 10px 0 ;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(100% - 150px - 20px);
}
.real_time_contents .keyword_cont .keyword_info > div{
    display: flex;
/*    gap:20px;*/
/*    padding-bottom: 20px;*/
    line-height: 1;
    align-items: center;
}
.real_time_contents .keyword_cont .keyword_info div > div{
    font-weight: 700;
    flex: 1;
    word-break: keep-all;
    line-height: 1.3;
}
.real_time_contents .keyword_cont .keyword_info div > div#rank{
    color: var(--primary-color);
    font-size: 24px;
}
.real_time_contents .keyword_cont .keyword_info div > div.serch{
    font-size: 24px;
}
.real_time_contents .keyword_cont .keyword_info h2{
    font-weight: 500;
    flex: .6;
    min-width: fit-content;
    padding-right: 5px;
}
.rank_list .details .subject{
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      white-space: initial;
      font-weight: 700;
}
.real_time_contents .rank_list.best_rank_slide{
    max-width: 1031px;
    gap:50px;
    margin: 0 auto;
    justify-content: center;
    padding-bottom: 0;
}

.real_time_contents .rank_list.best_rank_slide .item{
    padding: 0;
    border: 0;
    gap:5px;
    max-width: 256px;
}
.real_time_contents .rank_list.best_rank_slide .item .details{
    padding: 0 10px 10px 10px;
}
.real_time_contents .rank_list:not(.best_rank_slide) .item{
    border-radius: 10px;
    border: 1px solid #E7E7E7;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 0 calc((100% / 3) - 60px);
    max-width: calc(100% / 3 - 40px);
}
.real_time_contents .rank_list .item .img_box{
    max-width: 100%;
}
.real_time_contents .rank_list .item .img_box img{
    max-width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.real_time_contents .rank_list.best_rank_slide .item .img_box img{
    border-radius: 10px 10px 0 0;
}

.real_time_contents .rank_list .item .profile_img{
    max-width:30px;
    max-height: 30px;
    border-radius: 50%;
    overflow: hidden;
}
.real_time_contents .rank_list .item .profile_img img{
    width: 100%;
    height: 30px;
    display: block;
}

.best_rank.swiper-button-next, .swiper-container-rtl .best_rank.swiper-button-next{
    background-image: url(../img/icon/tool/slide_next_btn.svg) !important;
}
.best_rank.swiper-button-prev, .swiper-container-rtl .best_rank.swiper-button-prev{
    background-image: url(../img/icon/tool/slide_prev_btn.svg) !important;
}
.best_rank.swiper-button-next,.best_rank.swiper-button-prev{
    background: none;
    border: 0;
    background-size: cover;
    background-repeat: no-repeat;
}
/*
.best_rank.swiper-button-prev, .best_rank.swiper-button-next{
    background: none;
    border: 0;
    background-size: cover;
    background-repeat: no-repeat;
}
*/

.best_rank.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after{
    content: '';
}
.best_rank.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after{
    content: '';
}

/* 나의 등급 페이지 */
.my_grade .tooltip{
    position: relative;
    background: #fff;
    display: inline-block;
    cursor: pointer;
}

.my_grade .tooltip .tooltip_text{
    display: none;
    border-radius: 5px;
    border: 1px solid #C5C3C3;
    padding: 12px;
    position: absolute;
    font-size: 14px;
    font-weight: 700;
    left: -24px;
    top: 40px;
    background: #fff;
    line-height: 1.7;
    width: max-content;
}
.my_grade .tooltip:hover .tooltip_text{
    display: inline-block;
}
.my_grade .tooltip .tooltip_text::before{
    content: "";
    display: inline-block;
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    left: 22px;
    top: -8px;
    transform: rotate(45deg);
    z-index: 1;
    border-left: 1px solid #c5c3c3;
    border-top: 1px solid #c5c3c3;
}
.my_grade .tooltip .tooltip_text p{

}
.my_grade .tooltip .tooltip_text p span{}
.my_grade .tooltip .tooltip_text p span:nth-child(1){
    color: #FF0202;
}
.my_grade .tooltip .tooltip_text p span:nth-child(2){
    color: #6DD14A;
}
.my_grade .tooltip .tooltip_text p span:nth-child(3){
    color: #DDCB2C;
}

@keyframes tooltip{
    0%{
        opacity: 0;
        transform: scale(0.2)
    }
    70%{
        transform: scale(1.1)
    }
    100%{
        opacity: 1;
        transform: scale(1)
    }
}

.biz_tooltip{
    position: absolute;
    padding: 11px 16px;
    background: var(--primary-color);
    border-radius: 8px;
    top: 85px;
    left: 60px;
    z-index: 1;
    animation: tooltip .3s ease-in-out;
    color: #fff;
    font-size: 14px;
    width: 170px;
}

.biz_tooltip::before{
    content: "";
    display: inline-block;
    position: absolute;
    border-top: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 18px solid var(--primary-color);
    z-index: 1;
    top: -12px;
    left: 126px;
    
}
.biz_tooltip span.head{
    font-size: 14px;
    font-weight: 500;
}
.biz_tooltip span{
    display: block;
    font-weight: 300;
}
.biz_tooltip span img{
    width: 10px;
    height: 10px;
    position: absolute;
    right: 12px;
    top: 17px;
    cursor: pointer;
}

.blog_tooltip{
    position: absolute;
    padding: 10px;
    background: var(--primary-color);
    border-radius: 10px;
    top: 77px;
    left: -100px;
    z-index: 1;
    animation: tooltip .3s ease-in-out;
}

.blog_tooltip::before{
    content: "";
    display: inline-block;
    position: absolute;
    border-top: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 18px solid var(--primary-color);
    z-index: 1;
    top: -12px;
    left: 126px;
    
}

.mobile_area .blog_tooltip{
    top: 57px;
    left: 20px;
    padding: 8px;
}
.mobile_area .blog_tooltip::before{
    border-left: 3px solid transparent;
    border-right: 22px solid transparent;
    border-bottom: 16px solid var(--primary-color);
    z-index: 1;
    top: -14px;
    left: 18px;
}

.mobile_area .blog_tooltip span{
    font-size: 14px;
    display: flex;
    align-items: center;
}


.blog_tooltip span{
    color:#fff;   
    display: flex;
}
.blog_tooltip img{
    max-width: 12px;
    margin-left: 8px;
    cursor: pointer;
}
.guide_detail img{
    display: none;
}
/* // 나의 등급 페이지 */

.pause_tooltip{
    position: absolute;
    padding: 10px;
    background: var(--accent-color);
    border-radius: 10px;
    top: 67px;
    right: 20px;
    z-index: 1;
    animation: tooltip .3s ease-in-out;
}

.pause_tooltip::before{
    content: "";
    display: inline-block;
    position: absolute;
    border-top: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 18px solid var(--accent-color);
    z-index: 1;
    top: -12px;
    right: 56px;
}
.pause_tooltip span{
    color:#222;
    font-size: 13px;
}
.pause_tooltip img{
    max-width: 12px;
    margin-left: 8px;
    cursor: pointer;
}
    

@media(max-width: 1440px) {
/* */
    .inner {
        width: 1200px;
    }
    
    .campaign_slide .inner {
        width: 1200px;
    }
    .visula_slide .inner,
    .campaign__ .inner,
    #footer .inner {
        padding: 0 20px;
    }
    #header .tool_area .inner {
        padding-right: 20px;
    }
    
    .search_area{
        width: 350px;
    }
    
    #header .gnb ul li + li{
        margin-left: 20px;
    }
    
    .list_area .campaign_card{
        width: 19%;
        margin-right: 1.2%;
    }


    /* visual slide */
    .visula_slide .swiper-slide {
        width: 32%;
        margin-right: 2%;
    }
    .visula_slide .swiper-button-prev {
        left: 0;
    }
    .visula_slide .swiper-button-next {
        right: 0;
    }
    .visula_slide button[class*=swiper-button] {
        display: none;
    }
    .campaign_slide button[class*=swiper-button] {
        display: none;
    }
    .visula_slide .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 3px;
        vertical-align: top;
    }
    .visula_slide .pagenation-inner .swiper-pagination {
        height: 20px;
    }
    
    .visula_slide .guide_banner > div{
        padding: 44px;
    }
    
    .visula_slide .guide_banner > div h1{
        font-size: 30px;
    }
    
    .visula_slide .guide_banner > div p{
        font-size: 18px;
    }
    .visula_slide .guide_banner > div img{
         max-width: 360px;   
    }

    /* campain list */
    .list_area ul li:not(.pagenate ul li) {
        width: 19%;
    }
    .list_area ul li + li:not(.pagenate ul li) {
        margin-left: 1.2%;
    }
    

    
    .list_area.col-03 ul li:not(.pagenate ul li){
        margin-left: 40px;
    }



    .point_area {
        padding: 25px;
    }
    .point_area > div:first-child img {
        width: 34px;
        margin-right: 14px;
    }
    .point_area .point_ p:last-child {
        font-size: 34px;
    }
    
    .real_time_contents .rank_list:not(.best_rank_slide){
        gap:30px;
    }
    .real_time_contents .rank_list:not(.best_rank_slide) .item{
        flex: 1 0 calc((100% / 3) - 40px);
        max-width: calc(100% / 3 - 20px);
    }
    
/*
    .list_area .reporter .point_tag{
        flex: 2;
    }
*/

}


.mobile_campaign_list_cont{
    display: none;
}

.my_page .sns{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 400;
    font-size: 20px;
    color: #222;
}

.my_page .sns .item_wrap{
    display: flex;
    flex-direction: column;
    gap:15px;
    font-size: 16px;
}
    .my_page .sns .item_wrap a{
        display: flex;
        gap:5px;
        align-items: center;
        font-weight: 500;
        font-size: 16px;
        color: #666;
    }


@media(max-width: 800px) {
    .inner {
        width: 100%;
    }
    .mobile_line {
        display: block;
    }
    .visula_slide .inner, 
    #footer .inner {
        padding: 0 15px;
    }

    .side_menu {
        display: none;
    }

    .btn_area {
/*        padding: 0 15px;*/
    }
    .moreBtn {
        width: 100%;
        height: 44px;
        border-radius: 4px;
        font-size: 14px;
    }
    .moreBtn img {
        width: 16px;
    }
    i.exmark {
        width: 22px;
        height: 22px;
    }

    .submitBtn {
        border-radius: 4px;
        height: 44px;
        font-size: 14px;
        box-shadow: 0px 3px 8px rgb(60 203 219 / 30%);
        -webkit-box-shadow: 0px 3px 8px rgb(60 203 219 / 30%);
    }

    .subBtn {
        border-radius: 4px;
        height: 44px;
        font-size: 14px;
    }

    .favBtn {
        height: 44px;
        width: 44px;
        background-size: 16px;
        border-radius: 4px;
    }

    .zzimBtn {
        height: 44px;
        width: 44px;
        background-size: 16px;
        border-radius: 4px;
    }

    /* select */
    .selectBox__ .list__ {
        border-radius: 4px;
    }
    .selectBox__ .list__ li {
        padding: 15px;
        font-size: 12px;
        white-space: nowrap;
    }
    .selectFilter .select__ {
        padding-right: 12px !important;
    }
    .selectFilter .select__:before {
        width: 15px;
        height: 15px;
        background-size: contain;
        margin-right: 3px;
    }
    .selectFilter .list__ {
        width: 120px;
    }

    .list_area > .tool .selectFilter .list__ li:before {
        width: 15px;
        height: 15px;
        background-size: contain;
        margin: 0;
    }


    /* header */
    #header + #container {
        padding-top: 0px;
    }
    #header + #container:has(.fixed_head){
/*        padding-top: 75px;*/
        padding-top: 58px;
    }
    #header + #container.real_time_contents{
        padding-top: 60px;
    }
    #header .tool_area,
    #header .catagory_area {
        display: none;
    }
    #header .tool_area .inner {
        height: 60px;
    }
    #header .logo {
        margin: 0;
    }
    #header .ad_banner.pc{
        display: none;
    }
    #header .ad_banner.mo{
        display: flex;
    }
#header .ad_banner > div .text{
    font-size: 16px;
    font-weight: 700;
    display: flex;
    gap:15px;
}
#header .ad_banner.mo > div{
    gap:5px;
}
#header .ad_banner > div .link_text{
    display: none;
}

#header .ad_banner .close_text{
    display: none;
}

/* footer */
    #footer {
        margin-top: 30px;
    }
    #footer .footer_top .inner {
        flex-flow: column;
        align-items: flex-start;
        padding: 30px 15px;
    }
    #footer .gnb_ {
        width: 100%;
        flex-flow: column;
    }
    #footer .gnb_ > article {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    #footer .gnb_ > article + article {
        margin-top: 20px;
    }
    #footer .gnb_ ul li {
        margin-top: 0;
        margin-bottom: 5px;
    }
    #footer .gnb_ .title {
        width: 90px;
        margin-right: 35px;
        font-size: 16px;
        flex-shrink: 0;
    }
    #footer .gnb_ .title + div,
    #footer .gnb_ .title + ul {
        flex-grow: 1;
    }

    #footer .ch_link {
        width: 100%;
    }

    #footer .company_ .inner {
        padding-top: 20px;
        padding-bottom: 85px;
    }
    #footer .company_ .info {
        flex-flow: column;
        font-size: 13px;
    }
    #footer .company_ .info span {
        margin-left: 0;
        padding-left: 0;
        border: 0;
        margin-bottom: 0;
        margin-top: 5px;
    }
    #footer .company_ .copy_ {
        font-weight: 400;
    }


    #footer .socials_ {
        width: 100%;
        justify-content: space-around;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
    #footer .socials_ a {
        font-size: 12px;
    }
    #footer .socials_ a + a {
        margin-left: 20px;
    }
    #footer .socials_ .imgBox {
        width: 50px;
        height: 50px;
        background-size: contain;
        margin: 0 auto;
        margin-bottom: 8px;
    }

/* mobile top & bottom */
    .mobile_area {
        display: block;
        overflow: hidden;
    }
    .mobile_area.bet{
        overflow: visible;
    }
    
    .campaign__ .mobile_area.active{   
    }
    
    .mobile_head_cont{
        position: sticky;
        top: -172px;
        z-index: 9;
        transition: top .3s;
    }
    .mobile_head_cont.sticky_fix{
        top: 0;
    }
/*
    .campaign__ .mobile_area.active .head{
        transition: all .5s;
        left: -100%;
    }
*/
/*
    .campaign__ .mobile_area .search_area.active{
        left: 100%;
    }
*/
    #mobile_bottom {
        display: none;
    }


/* slide */
    .visula_slide {
        margin-bottom: 0px;
    }
    .visula_slide .inner {
        padding-right: 0;
        padding-left: 0;
    }
    .visula_slide .swiper {
        padding: 15px;
    }
    .visula_slide .swiper.sub_banner_swiper{
        padding: 0;
        height: 105px;
/*        background: var(--primary-color);*/
    }
    .visula_slide .swiper-slide {
        width: 100%;
        margin-right: 15px;
        padding: 10px 20px;
    }
    .visula_slide button[class*=swiper-button] {
        display: block;
        width: 40px;
        height: 40px;
        background-size: contain;
    }
    
    .visula_slide .guide_banner{
        padding: 16px;
        gap:16px;
    }
    .visula_slide .guide_banner br{
        display: block;
    }
    
    .visula_slide .guide_banner > a{
        padding: 24px 16px 0 ;
        aspect-ratio:initial;
        display: flex;
        justify-content: space-between;
    }
    
    .visula_slide .guide_banner > div > a{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .visula_slide .guide_banner > div h1{
        font-size: 20px;
        padding-bottom: 5px;
    }
    
    .visula_slide .guide_banner > a h1{
        font-size: 20px;
        padding-bottom: 5px;
    }
    
    .visula_slide .guide_banner > a{
        padding: 24px 16px 0;
        aspect-ratio: initial;
    }
    
    .visula_slide .guide_banner > a p{
        font-size: 14px;
    }
    .visula_slide .guide_banner .open_talk .megaphone{
        max-width: 61px;
        height: 67px;
    }
    .visula_slide .guide_banner .open_talk .kakao_btn{
        font-size: 14px;
    }
    
    .visula_slide .guide_banner > div p{
        font-size: 14px;
    }
    
    .visula_slide .guide_banner > div img{
        position: static;
        width: 100%;
    }
    
    .campaign__{
        padding: 15px 0;
    }
    
    .visula_slide .sub_banner_swiper .swiper-slide[data-item='2'] img{
        max-width: 104px;
    }
    
    .visula_slide.sub .swiper-slide[data-item='1']{
        background: var(--primary-color);
    }
    
    .visula_slide.sub .swiper-slide[data-item='2']{
        background: #eee;
    }

/* campaign list */
    .campaign__:not(.campaign_slide) {
        padding: 0;
    }
    .campaign__ .head{
        background: var(--primary-color);
        color: #2D929E;
        padding: 20px 60px 20px 15px;
        display: flex;
        font-weight: 500;
        font-size: 16px;
        gap:20px;
        overflow-y: hidden;
        overflow-x: scroll;
        justify-content: flex-start;
    }
    .campaign__ .head .on{
        color: #fff;
        font-weight: 700;
    }
    .campaign__ .head a{
        position: relative;
        text-wrap: nowrap;
    }
    .campaign__ .head  a.on::before{
        content: "";
        display: block;
        background: #fff;
        width: 13px;
        height: 13px;
        transform: translate(-50%, 50%) rotate(45deg);
        position: absolute;
        left: 50%;
        bottom: -20px;
    }

    div.chip_cont, ul.chip_cont {
        padding: 15px;
        display: flex;
        gap: 10px;
        overflow-x: auto;
/*        border-bottom: 1px solid #EEEEEE;*/
        background: #fff;
    }
    
    .chip_cont .chip{
        background: #eee;
        color: #666;
        padding: 8px 15px;
        border-radius: 50px;
        text-wrap:nowrap;
        font-size: 12px;
    }
    .chip_cont .chip.flex_col{
        display: flex;
        flex-direction: column;
        align-items: center;
        background: none;
        padding: 0;
        font-size: 12px;
    }
    .chip_cont .chip.on{
        background: #585858;
        color: #fff;
    }
    .chip_cont .chip a{
        display: flex;
        align-items: center;
        gap:3px;
        color: inherit;
        min-width: auto;
        font-size: 12px;
    }
    .chip_cont .chip a img{
        max-width: 18px;
    }
    .chip_cont .icon_chip{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .campaign__ .inner {
        padding: 0;
    }
    .campaign_slide .inner{
        width: 100%;
    }
    .campaign__ .title {
        padding: 0 0 15px 15px;
    }
    .campaign_list__ .title{
        display: none;
    }
    .campaign__ .title h1 {
        font-size: 18px;
        margin-bottom: 0;
    }
    .campaign__ .title h1:after {
        width: auto;
        font-size: 10px;
        font-weight: 500;
        margin-top: 3px;
        line-height: 1em;
        padding: 4px 8px;
        height: auto;
    }
    .campaign__ .title .more {
        font-size: 12px;
        height: 24px;
        width: 60px;
        padding-left: 7px;
        background-position: right 5px center;
    }

    .list_area {
        flex-wrap: wrap;
        padding-left: 15px;
        padding-right: 15px;
    }
    .list_area.grid-slide{
        overflow-x: scroll;
        padding-bottom: 22px;
        padding-right: 15px;
    }
    .list_area > .tool {
        margin-bottom: 15px;
        font-size: 14px;
        margin-top: 15px;
    }
    .list_area ul{
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .list_area .pagenate ul{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .list_area ul li:not(.pagenate ul li) {
        width: 48%;
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 3%;
    }
    .list_area .campaign_card{
        width: 48%;
        margin-right: 3.5%;
    }
    
    .campaign_slide .slide_inner{
        padding: 0;
        padding-right: 15px;
    }
    .grid-container {
        display: grid;
        grid-template-rows: repeat(2, auto);
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        grid-gap:3%;
        grid-template-columns: repeat(16, minmax(48%, auto));
    }
    .grid-container .grid-item{
        box-shadow: 1px 1px 5px rgba(100,100,100,0.3);
        border-radius: 10px;
    }

    .list_area.scroll {
/*        overflow-x: scroll;*/
/*        padding-bottom: 5px;*/
    }
    .list_area.scroll ul {
        
    }
    .list_area.scroll ul li {
        flex-shrink: 0;
        margin-top: 0;
        width: 48%;
    }
    .list_area.scroll ul li:nth-child(2n+1) {
        margin-left: 0;
    }
    .list_area.scroll ul li + li {
        margin-left: 1.2%;
    }
    .list_area .imgBox {
        border-radius: 8px ;
    }
    .list_area .imgBox .sold_out {
        border-radius: 8px ;
    }
    
    .list_area .details {
        padding: 0;
        padding-top: 5px;
        padding-bottom: 0;
    }
    .list_area .tag_area {
        margin: 7px 0;
        align-items: flex-start;
        align-items: center;
        gap:2px;
    }
    .list_area .tag_area img {
/*        margin-bottom: 3px;*/
        width: 18px;
        height: 18px;
    }
    .list_area .details .timer{
        font-size: 12px;
    }
    .list_area .tag_area span {
        margin-left: 0px;
        font-size: 12px;
        color: #222;
    }
    
    .list_area .appli_area {
        margin-bottom: 8px;
        flex-wrap: wrap;
        font-size: 12px;
    }
    .list_area .appli_area > div {
        flex-shrink: 0;
    }
    .list_area .subject {
        font-size: 14px;
        
    }
    .list_area .desc {
        font-size: 12px;
        margin-bottom: 8px;
    }
    .list_area .desc > div{
        align-items: center;
        gap:5px;
    }
    .list_area .reporter .point_tag .point{
/*        display: none;*/
    }
    .list_area .point_tag {
        padding-top: 0;
    }
    .list_area .point_tag .point {
        font-size: 12px;
        padding: 2px 5px;
        padding-bottom: 4px;
    }
    .list_area .details .col-06 {
        flex-flow: column;
        padding: 4px;
    }
    .list_area .details .col-06 .tag_area {
  
    }
    .list_area .details .price_ {
        text-align: left;
        width: 100%;
        font-size: 12px;
    }
    .list_area .details .price_ > div {
        display: flex;
        justify-content: space-between;
    }

    .listTab_area {
        overflow-x: scroll;
        margin-bottom: 15px;
        height: auto;
/*        padding: 15px 10px;*/
        padding:0;
    }

    .listTab_area::-webkit-scrollbar {
        height: 0;
        background-color: transparent;
     }
    .listTab_area::-webkit-scrollbar-thumb {
        background-color: transparent;
        opacity: 0;
     }
    .listTab_area::-webkit-scrollbar-track {
        background-color: transparent;
        opacity: 0;
     }

    .listTab_area ul {
        padding-right: 15px;
    }
    .listTab_area ul li a {
        font-size: 12px;
        min-width: 60px;
        flex-direction: column;
    }
    .listTab_area ul li a img{
        display: inline-block;
    }
    .listTab_area ul li + li {
        margin-left: 0;
    }
    
    .listTab_area:not(.wait) ul li.active{
        border: none;
    }
    /*.listTab_area ul:after {
        content: "";
        min-width: 120px;
        height: 100%;
    }*/  
    
    .list_area ul li + li:not(.pagenate ul li){
        margin-left: 0;
    }


    .text_banner_area {
        margin: 15px;
        margin-top: 0;
        padding: 20px;
        height: 120px;
        background-size: cover;
        border-radius: 5px;
    }
    .text_banner_area .tit {
        font-size: 12px;
    }
    .text_banner_area .desc {
        font-size: 10px;
        white-space: nowrap;
        word-break: keep-all;
    }
    

/* 체크박스 */
    .checkbox_ label {
        font-size: 14px;
        line-height: 20px;
    }
    .checkbox_ input + label {
        align-items: flex-start;
        word-break: keep-all;
        font-size: 12px;
    }
    .checkbox_ input + label:before {
        width: 20px;
        height: 20px;
        background-size: contain;
        flex-shrink: 0;
    }
    .checkbox_ input:checked + label:before {
/*
        box-shadow: 0px 1px 3px #3ccbdb;
        -webkit-box-shadow: 0px 1px 3px #3ccbdb;
*/
    }

    .checkbox_.round input + label:before {
        width: 20px;
        height: 20px;
    }

    .field_wrap:first-of-type > h5{
        font-size: 16px;
    }

/* 입력 */
    .field_wrap {
        padding-top: 30px;
    }
    .field_wrap + .field_wrap {
        margin-top: 35px;
    }
    .field_area + .field_area  {
        margin-top: 14px;
    }
    .field_area .field {
        padding: 0;
        height: auto;
        border-radius: 5px;
        background-color: transparent;
        flex-wrap: wrap;
    }
    .field_area .field > label {
        flex-grow: 1;
        font-size: 14px;
        width: 100%;
    }
    .signin_area .field_area .field > label{
        width: 80px;
        font-weight: 400;
    }
    .field_area .field > input,
    .field_area .field > select {
        font-size: 14px;
        /* background-color: #F5F5FA; */
        /* border-radius: 5px; */
        margin-top: 5px;
        padding: 8px;
        height: 50px;
    }
    .field_area .verify_ {
        flex-wrap: nowrap;
    }
    .field_area .verify_ .btn {
        margin-top: 25px;
        height: 50px;
        width: 90px;
    }
    .field_area .field_alert {
        margin-top: 4px;
        font-size: 12px;
    }
    .form_area .btn_area {
        height: 45px;
        font-size: 16px;
        border-radius: 8px;
        margin-top: 30px;
        padding: 0;
    }
    .form_area .btn_area .btn,
    .form_area .btn_area button {
        font-size: 16px;
        border-radius: 8px;
    }

/* select */
    .selectBox__ .select__ {
        padding-right: 26px;
        background-position: right 10px center;
        width: 130px;
    }
    .selectSort2 .selectBox__ .select__{
        min-width: 130px;
    }
    .list_area > .tool .selectFilter .list__{
        width: 130px;
    }
    .selectBox__ .list__ li .text{
        display: flex;
        align-items: center;
        gap:5px;
    }

/* icon */
    i.icon {
        width: 16px;
        height: 16px;
    }


/* checkbox */
    .check_area .checkbox_ {
        margin: 0;
    }

    .checkbox_.tab {

    }
    .checkbox_.tab input + label {
        border-radius: 4px;
        align-items: center;
        font-size: 12px;
    }
     .checkbox_.tab input + label .icon {
        margin-right: 4px;
    }
    .checkbox_.tab input:checked + label {
        color: #fff;
        background-color: var(--primary-color);
    }
/*
    .checkbox_.tab input:checked + label i.camera {
        background-image: url(../img/icon/fe/camera_a.svg);
    }
    .checkbox_.tab input:checked + label i.hood {
        background-image: url(../img/icon/fe/hood_a.svg);
    }
    .checkbox_.tab input:checked + label i.back {
        background-image: url(../img/icon/fe/back_a.svg);
    }
    .checkbox_.tab input:checked + label i.shirt {
        width: 18px;
        background-image: url(../img/icon/fe/shirt_a.svg);
    }
    .checkbox_.tab input:checked + label i.beauty {
        width: 18px;
        background-image: url(../img/icon/fe/beauty_a.svg);
    }
    .checkbox_.tab input:checked + label i.pacifier {
        width: 18px;
        background-image: url(../img/icon/fe/pacifier_a.svg);
    }
    .checkbox_.tab input:checked + label i.dumbbell {
        width: 14px;
        background-image: url(../img/icon/fe/dumbbell_a.svg);
    }
    .checkbox_.tab input:checked + label i.phone {
        width: 14px;
        background-image: url(../img/icon/fe/phone_a.svg);
    }
    .checkbox_.tab input:checked + label i.stamp {
        background-image: url(../img/icon/fe/stamp_a.svg);
    }
*/
    
    .chip_cont.check_area{
        padding: 0;
        gap: 15px 20px;
    }
    .chip_cont.check_area .checkbox_ label{
        height: auto;
        display: flex;
        flex-direction: column;
        border: none;
        padding: 0;
        width: auto;   
    }


/* 로그인 가입*/
    .log_wrap {
        padding-top: 50px;
    }
/*
    .log_wrap .title {
        display: none;
    }
*/
    
    .log_wrap .form_area{
        padding: 20px;
        border: none;
        box-shadow: none;
        margin-bottom: 0;
    }
/*
    .log_wrap > .form_area {
        padding: 20px;
        border: none;
        box-shadow: none;
        margin-bottom: 0;
    }
*/

    .sng_sign {
        margin-bottom: 40px;
    }
    .sng_sign ul li {
        width: 50px;
        height: 50px;
    }
    .sng_sign ul li + li {
        margin-left: 10px;
    }

    .useType_ .check_wrap {
        height: 45px;
    }
    .useType_ .check_wrap .check_ {
        width: 52%;
        font-size: 14px;
    }
    .check_ input:checked + label img {
        margin-right: 5px;
        width: 14px;
    }

    .term_wrap .term {
        font-size: 14px;
        height: auto;
    }
    .term_wrap .term.allCehck {
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 20px;
    }
    .term_wrap > ul li + li {
        margin-top: 10px;
    }
    .term_wrap .term .drop_btn {
        font-size: 12px;
        width: 84px;
    }
    .term_wrap .dorp_wrap .text {
        font-size: 12px;
        font-weight: 300;
    }

/* 로그인 */
    
    
    
    .log_wrap .title{
        margin-bottom: 0;
        padding-bottom: 20px;
    }
    .signin_area .field_area + .field_area {
        margin-top: 14px;
    }
    .signin_area .field_area .field {
        flex-flow: row;
        align-items: flex-start;
        border: none;
        align-items: center;
        padding: 0 20px;
    }
    .signin_area .field_area .field input {
        width: 100%;
        margin-top: 0px;
    }

    .quick_signup {
        margin: 0 0;
        margin-bottom: 30px;
    }
    .quick_signup li:first-child img {
        height: 16px;
    }
    .quick_signup a {
        height: 60px;
        font-size: 16px;
    }
    .quick_signup a img {
        height: 22px;
        margin-right: 10px;
    }


/* 포인트 */
    .ct_title {
/*        display: none;*/
        font-size: 18px;
        padding: 15px;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .aside_section .inner {
        padding-top: 0;
    }
    .aside_section .inner > .content {
        width: 100%;
    }
    .aside_section .inner > .content > .account_title {
        margin-bottom: 0;
        padding-top: 20px;
    }
    
    .aside_section .inner > .content > .account_title.PC_content{
        display: none;
    }
    .aside_section .inner > .content > .account_title button{
        margin-bottom: 0;
        padding: 8px;
    }
    .aside_section .inner .account_title button{
        margin-bottom: 0;
        padding: 8px;
        position: absolute;
        right: 15px;
        color: #222;
    }
    .aside_section .inner > .content > .account_title .ct_title{
        padding-top: 0;
        padding-right: 0;
    }
    .point_area {
        flex-flow: column;
        height: auto;
        padding: 20px 10px;
        border-radius: 0;
        margin-bottom: 0;
        border-bottom: 4px solid #eee;
    }
    .point_area > div {
        flex-wrap: wrap;
    }
    .point_area > div:first-child {
        font-size: 14px;
        margin-bottom: 20px;
    }
    .point_area > div:first-child img {
        width: 24px;
        margin-right: 6px;
    }
    .point_area > div:last-child {
        flex-wrap: nowrap;
        width: 100%;
        justify-content: center;
        max-width: 330px;
    }
    .point_area .point_ {
        margin-right: 25px;
        font-size: 14px;
    }
    .point_area .point_ p:last-child {
        font-size: 24px;
    }
    .point_area .btn_ {
        font-size: 14px;
        width: 150px;
        height: 40px;
    }
    .point_area .btn_ img {
        width: 14px;
    }

    .withdraw_history {
        padding: 15px;
    }
    .withdraw_history .tool {

    }
    .withdraw_history .tool h1 {
        font-size: 16px;
    }
    .withdraw_history .details_ {
        flex-flow: column;
        align-items: flex-start;
    }
    .withdraw_history .details_ span {
        font-size: 12px;
        padding: 0px 6px;
        padding-bottom: 2px;
    }
    .withdraw_history .details_ p {
        font-size: 12px;
    }
    .withdraw_history .details_ div:last-child {
        margin-left: 0;
        font-size: 14px;
    }

    .withdraw_history ul {
        border-top: 1px solid #e7e7e7;
    }
    .withdraw_history ul li {
        padding: 10px;
        border: 0;
        border-bottom: 1px solid #e7e7e7;
        border-radius: 0;
    }
    .withdraw_history ul li + li {
        margin-top: 0;
    }
    .withdraw_history + .btn_area {
        margin-top: 10px;
        margin-bottom: 100px;
    }


    .list_area > .tool .selectSort2, 
    .withdraw_history > .tool .selectSort2 {
        width: 100%;
    }
    .list_area > .tool .selectBox__ .select__, 
    .withdraw_history > .tool .selectBox__ .select__ {
        height: 34px;
        font-size: 12px;
        padding-left: 12px;
        border-radius: 4px;
    }


/* 캼페인 상세 */
    .compain_detials {
        padding-right: 0;
        min-height: auto;
    }
    .compain_detials .side_area {
        position: fixed;
        width: 100%;
        padding-top: 20px;
        z-index: 10;
        top: calc(100dvh - 160px);
    }
    .compain_detials .side_area.on{
        top: calc(100dvh - 160px);
    }
    .compain_detials .side_area .apply_area {
        border-radius: 0;
        padding: 15px;
        border-top: 1px solid #eee;
        border-bottom: 4px solid #eee;
    }
    .apply_area dl {
/*        justify-content: space-between;*/
        margin-bottom: 8px;
    }
    .apply_area .option_ {
        padding-top: 15px;
    }
    .compain_detials .btn_area {
        padding: 0;
        margin-top: 15px;
    }

   .apply_area .btn_area {
        position: fixed;
        left: 0;
        bottom: 66px;
        width: 100%;
        background-color: #fff;
        box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
        -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
        z-index: 8000;
        border: 5px solid #fff;
    }
    .apply_area .btn_area .submitBtn {
        margin-right: 0px;
        border-radius: 0;
        height: 50px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        order: 2;
    }
    .apply_area .btn_area .favBtn {
        border-radius: 0;
        width: 50px;
        height: 50px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .side_area.on .apply_area .btn_area_MO{
        display: none;
    }
    .side_area .apply_area .btn_area_MO{
        display: flex;
    }
    .compain_detials .head .tool {
        top: auto;
        height: 24px;
        bottom: 20px;
    }
    .compain_detials .head .tool.PC_content{
        display: none;
    }
    .compain_detials .head .tool.MO_content{
        bottom: initial;
    }
    .compain_detials .head .details{
/*        justify-content: space-between;*/
        flex-wrap: wrap;
        row-gap:10px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .compain_detials .head {
        padding: 15px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
/*        margin-top: 66px;*/
        display: flex;
        gap:10px;
    }
    .compain_detials .head .imgBox{
        max-width: 100px;
        max-height: 100px;
        
    }
    .compain_detials .head .imgBox img{
        width: 100%;
        border-radius: 8px;
        object-fit: cover;
    }
    .compain_detials .head h1 {
        font-size: 18px;
        display: none;
    }
    .compain_detials .head .comment {
        font-size: 14px;
    }
    .compain_detials .head .tag_area {
        margin-top: 10px;
        font-size: 12px;
    }
    
    .compain_detials .head .tag_area .smartstore,
    .compain_detials .head .tag_area .coupang,
    .compain_detials .head .tag_area .gmarket,
    .compain_detials .head .tag_area .auction,
    .compain_detials .head .tag_area .elevenst,
    .compain_detials .head .tag_area .musinsa,
    .compain_detials .head .tag_area .idus,
    .compain_detials .head .tag_area span {
        margin-right: 6px;
    }
    .compain_detials .head .desc.MO_content{
        font-size: 12px;
        padding-top: 10px;
    }
    .compain_detials .content {
        padding-top: 0;
    }
    .compain_detials .hide_area .wrap {
/*        height: 400px;*/
    }
    .compain_detials .hide_area .moreBtn {
        border-radius: 4px;
        width: auto;
        margin: 15px;
        font-size: 14px;
    }
    .compain_detials .hide_area .moreBtn img {
        width: 10px;
    }
    .compain_detials .hide_area .btn_area {
        padding: 10px 15px;
        margin-top: 0px;
    }
    .compain_detials .hide_area .btn_area .submitBtn {
        width: 100%;
    }
    .compain_detials .guide_area {
        padding: 20px 15px;
        margin-top: 20px;
        border-top: 4px solid #eee;
    }
    .compain_detials .guide_area > .title {
        display: none;
    }
    .compain_detials .guide_area > .title img {
        height: 24px;
    }
    
    .guide_area .icon_box{
        padding-top: 10px;
    }
    
    .guide_area .guide_list {
        margin-top: 0px;
        border-top: 0;
        margin-bottom: 15px;
    }
    
    .guide_area .guide_list li {
        flex-flow: column;
        padding: 20px 0;
    }
    .guide_area .guide_list li .text_ {
        font-size: 14px;
        margin-top: 10px;
    }
    .guide_area .guide_notice {
        border-radius: 8px;
        padding: 18px;
    }
    .guide_area .guide_notice > h1 {
        font-size: 16px;
    }
    .guide_area .guide_notice > h1 .exmark {
        margin-right: 8px;
    }
    .guide_area .guide_notice .desc {
        font-size: 12px;
    }

    .smartstore, .coupang, .gmarket, .auction, .elevenst, .musinsa, .idus {
        padding: 2px 5px;
    }
    .compain_detials .share_area {
        padding: 0;
        font-size: 12px;
        margin-right: 15px;
    }
    .shareBtn img {
        width: 12px;
        margin-right: 5px;
        margin-top: 2px;
    }

    .compain_detials .side_area .list_area .appli_area,
    .compain_detials .side_area .list_area .desc {
        margin-bottom: 14px;
    }
    .compain_detials .side_area .apply_area {
        margin-top: 15px;
        
    }
    .compain_detials .side_area.on .apply_area{
        bottom: 126px;
        position: fixed;
        width: 100%;
        border-radius: 15px 15px 0 0;
        box-shadow: -2px -2px 4px 0px rgba(0, 0, 0, 0.25);
        padding-bottom: 30px;
    }
    .compain_detials .side_area.on .sheet_head{
        display: block;
        text-align: center;
        line-height: 1;
        padding-bottom: 20px;
        width: fit-content;
        margin: 0 auto;
    }
    .submitBtn:not(.disabled):hover{
        background-color: var(--primary-color);
        color: #fff;
    }

    .compain_detials .side_area .list_area {
        display: none;
    }
    .compain_detials .side_area .list_area .details {
        padding-bottom: 0;
        margin-left: 15px;
        width: 170px;
    }
    .compain_detials .side_area .list_area .imgBox {
        flex-shrink: 0;
        width: 100px;
        height: 100px;
    }
    .compain_detials .side_area .list_area .tag_area {
        margin: 0;
    }
    .compain_detials .side_area .list_area .appli_area {
        margin-bottom: 0;
        margin: 4px 0;
    }
    .list_area .desc span.opt_name {
/*        width: 260px;*/
        flex: 1;
    }
    .list_area .desc .point_desc {
        width: 300px;
    }
    .compain_detials .side_area .list_area .desc{
        margin-bottom: 8px;
    }
    .compain_detials .side_area .list_area .point_tag .point {
        margin-bottom: 0;
    }

/* 등급 페이지 */
    .aside_section.my_grade .inner > .content{
        padding: 20px;
    }
    .my_grade .ct_title{
        padding: 0;
        font-weight: 700;
    }
    .aside_section.my_grade .inner > .content h2{
        font-size: 16px !important;
        margin: 20px 0 !important;
    }
    .aside_section.my_grade .inner > .content h2 span.desc{
        display: inline-block;
        font-size: 12px !important;
    }
    .aside_section.my_grade .inner > .content h2 span.desc ~ p{
        font-size: 12px !important;
    }
    
    .aside_section.my_grade .current_situation{
        gap:10px;
    }
    .aside_section.my_grade .current_situation > div > div {
        padding: 10px !important;
/*        width: 140px !important;*/
    }
    .aside_section.my_grade .current_situation .left_box{
        gap:10px;
    }
    
    .aside_section.my_grade .current_situation .left_box div{
        height: auto !important;
        flex: 1;
        margin: 0 !important;
        justify-content: center;
    }
    .aside_section.my_grade .current_situation .left_box > div{
        width: 140px !important;
    }
    .aside_section.my_grade .current_situation .left_box div span{
        font-size: 14px !important;
    }
    .aside_section.my_grade .current_situation .left_box div span:last-child{
        font-size: 16px !important;
    }
    .aside_section.my_grade .current_situation .right_box{
        width: 100% !important;
        height: auto !important;
        padding: 10px !important;
    }
    .aside_section.my_grade .current_situation .right_box > div{
        width: 100% !important; 
        padding: 0 !important;
        font-size: 12px;
        text-align: left;
        word-break: keep-all;
        gap:5px;
    }
    .aside_section.my_grade .current_situation .right_box div span{
        flex-basis: initial !important;
        font-size: 12px;
    }
    .aside_section.my_grade .current_situation .right_box div span:first-child{
        min-width: 60px;
        max-width: 95px;
        width: 100% !important;
    }
    .aside_section.my_grade .current_situation .right_box .progressbar{
        width: 60% !important;
    }
    .aside_section.my_grade .current_situation .right_box div span:last-child{min-width: 32px;}
    .aside_section.my_grade .current_situation .right_box div span div{}
    
    .aside_section.my_grade .grade_guide{
        display: none;
    }
    .aside_section.my_grade .ul_grade_guide{
        display: none;
    }
    .aside_section.my_grade .blog_gread_text{
        display: block;
    }
    .my_grade .tooltip .tooltip_text{
        left:-135px;
        top: 30px;
    }
    .my_grade .tooltip .tooltip_text::before{
        left: 134px;
    }
    .guide_detail{
        display: flex;
        gap:10px;
        align-items: center;
    }
    .guide_detail img{
        display: inline-block;
    }



/* 프로필편집 */
    .myprofile_{
        flex-direction: column;
    }
    .profile_modify .myprofile_ {
        flex-flow: column;
/*        padding: 15px;*/
/*        padding-bottom: 20px;*/
        margin-bottom: 0px;
/*        border-bottom: 4px solid #eee;*/
    }
    .myprofile_ > div {
        width: 100%;
    }
    .myprofile_ .profile_card {
        width: 100%;
        flex-direction: row;
        gap:20px;
    }
    .myprofile_ .btn_ {
        display: block;
        width: 100%;
        text-align: center;
        padding: 11px;
    }
    .profile_card .profile_img {
        margin-right: 0;
        margin-bottom: 10px;
        width: 70px;
        height: 70px;
    }
    .profile_edit .profile_card .profile_img{
        margin: 0 auto;
    }
    .profile_edit .mofidy_area {
        padding: 15px;
        padding-top: 10px;
    }
    .field_area .field .SNS_ .icon {
        flex-shrink: 0;
        width: 44px;
        margin-right: 8px;
        border-radius: 6px 0 0 6px;
    }
    .field_area .field .SNS_ li {
        height: 44px;
        font-size: 12px;
        border-radius: 0 6px 6px 0;
    }
    .field_area .field .SNS_ li > div:nth-child(3) {
        flex-grow: 1;
    } 
    .field_area .field .SNS_ li input {
        width: 100%;
    }
    .field_area .field .item .alert {
        padding-left: 0;
        word-break: break-all;
        flex-wrap: wrap;
        font-size: 12px;
        margin-top: 5px;
    }
    .field_area .field .item input, 
    .field_area .field .verify_ input {
/*        min-height: 44px;*/
        border-radius: 5px;
        padding: 8px;
        font-size: 14px;
    }
    .field_area .field .verify_ button {
        height: 44px;
        width: 70px;
    }
    .field_area .field .verify_ + input {
        margin-top: 5px;
    }



    .mofidy_area {
/*        padding: 15px;*/
        padding-top: 10px;
    }
    .mofidy_area + .mofidy_area {
        border-top: 1px solid #E7E7E7;
        padding: 20px 15px;
        margin-top: 10px;
    }
    .mofidy_area .field_area .field + .field,
    .profile_modify .mofidy_area .field_area .field + .field {
        margin-top: 10px;
        padding: 10px;
        border-radius: 10px;
    }
    .profile_modify .mofidy_area .field_area .field + .field.sns_area{
        padding: 0;
        border: none;
    }
    .mofidy_area .field_area .field > label {
        margin-bottom: 5px;
        font-size: 14px;
    }
    .mofidy_area .field_area .field > input,
    .mofidy_area .field_area .field > textarea, 
    .mofidy_area .field_area .field .select__ {
        font-size: 14px;
        border-radius: 6px;
        padding: 8px;
        min-height: 44px;
        margin-top: 0px;
    }
    .mofidy_area .field_area .field > textarea {
        min-height: 160px;
    }
    .mofidy_area .btn_area {
        margin-top: 20px;
        margin-bottom: 0px;
        padding: 0;
    }
    .mofidy_area .btn_area .submitBtn {
        width: 100%;
    }
    .mofidy_area .btn_area.between .subBtn {
        margin-left: 10px;
    }
    .notice_check {
        margin-left: 0;
        margin-top: 15px;
    }



/* modal */
    .modal-layer {
        border-radius: 8px;
        margin: 0 12px;
    }
    .modal-layer .head {
        flex-shrink: 0;
        height: 60px;
        font-size: 14px;
        padding: 0 15px;
    }
    .modal-layer .head h1 {
        font-size: 16px;
    }
    .modal-layer .content {
        flex-grow: 1;  
        height: calc(100% - 60px);      
        overflow-y: scroll;
        padding: 15px;
    }
    .modal-layer .field label {
        width: 105px;
    }
    .modal-layer .field .selectBox__,
    .modal-layer .check_wrap {
        margin-top: 5px;
    }
    .modal-layer .check_wrap .checkbox_ label {
        font-size: 14px;
    }
    .modal-layer .check_wrap .checkbox_ input {
        min-height: 100%;
    }

    .modal-layer .field input, 
    .modal-layer .field .selectBox__ .select__ {
        height: 45px;
        padding-left: 8px;
        border-radius: 5px;
        font-size: 14px;
    }
    .modal-layer .btn_area {
/*        padding: 0;*/
    }
    .modal-layer .submitBtn {
        width: 100%;
    }
    .modal-layer .closer {
        width: 40px;
        margin-right: -10px;
        background-size: cover;
    }
    .modal-layer .notice_ i {
        margin-right: 8px;
    }

    .modal-layer .check_area {
        margin-top: 15px;
    }



    #widthdraw .modal-layer {
        width: 90vw;
        height: 90vh;
    }
    #widthdraw .modal-layer .content::-webkit-scrollbar {
        width: 0px;
        background-color: transparent;
    }
    #widthdraw .modal-layer .content::-webkit-scrollbar-thumb {
        background-color: transparent;
        border: 0px solid transparent;
        border-radius: 0px;
        cursor: pointer;
        opacity: 0;
    }
    #widthdraw .modal-layer .content::-webkit-scrollbar-track {
        background-color: transparent;
        opacity: 0;
    }
    #widthdraw .field_area input + .check_wrap {
        margin-top: 10px;
    }
    #widthdraw .point_ {
        font-size: 14px;
        padding-left: 0;
    }
    #widthdraw .notice_ {
        border-right: 8px;
        padding: 15px;
    }
    .modal-layer .notice_ h1 {
        font-size: 14px;
        position: relative;
    }
    #widthdraw .notice_ .desc {
        font-size: 12px;
    }
    .withdraw_history + .btn_area {
        margin-bottom: 15px;
    }
    .list_area > .tool .selectBox__ .list__, 
    .withdraw_history > .tool .selectBox__ .list__ {
        border-radius: 4px;
    }


/* 알림함 */
    .notice_lsit .list {
        padding: 15px;
    }
    .notice_lsit .tool {
        padding: 15px;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .notice_lsit .tool .btn_ {
        width: 100%;
        text-align: center;
    }
    .notice_lsit .list li {
        border-radius: 5px;
        padding: 12px;
        padding-left: 45px;
        min-height: 50px;
        background-position: left 15px center;
        background-size: 15px;
        font-size: 14px;
    }
    .notice_lsit .list li + li {
        margin-top: 5px;
    }
    .notice_lsit .list .msg:before {
        width: 4px;
        height: 4px;
        left: -4px;
        top: 0;
    }

/* page */
    .pagenate {
        margin: 15px 0;
    }
    .pagenate ul a {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    .pagenate ul a img {
        width: 100%;
        vertical-align: top;
    }
    .my_campaign .pagenate{
        background: #fff;
        padding: 15px 0;
        margin: 0;
    }

/* 계정 설정 */
    .auto_chain ul {
        flex-flow: column;
        align-items: flex-start;
    }
    .auto_chain ul li {
        border-radius: 4px;
        font-size: 12px;
    }
    .auto_chain ul li + li {
        margin-left: 0;
        margin-top: 10px;
    }
    .auto_chain ul li > div {
        padding: 8px;
        height: 45px;
    }
    .auto_chain ul li .icon {
        width: 45px;
    }
    .auto_chain ul li:first-child .icon img {
        width: 16px;
    }
    .auto_chain ul li:last-child .icon img {
        width: 20px;
    }

/* 자주묻는 질문 */
    .customer_tool {
        padding: 20px 15px;
        border-radius: 0;
        border-bottom: 4px solid #eee;
    }
    .customer_tool .search_ {
        flex-wrap: wrap;
        height: auto;
        gap:15px;
        
    }
    .customer_tool .search_ > div:first-child {
        width: fit-content;
        margin-right: 0;
        margin-bottom: 5px;
        font-size: 14px;
        flex: initial;
    }
    .customer_tool .search_ input,
    .customer_tool .search_ .submitBtn {
        height: 44px;
        font-size: 12px;
        padding: 0 12px;
        width: auto;
        flex: 1;
    }
    .customer_tool .search_ .submitBtn {
        width: 80px;
        margin: 0;
    }

    .faq_tab_area {
        margin: 0;
        overflow-x: scroll;
        width: 100%;
    }
/*    .faq_tab_area ul:before,
    .faq_tab_area ul:after {
        content: "";
        width: 15px;
        height: 41px;
        flex-shrink: 0;
    }*/
    .faq_tab_area ul {
        flex-wrap: wrap;
        justify-content: flex-start;
        border-radius: 0;
        background-color: #fff;
    }
    .faq_tab_area ul li {
        flex: 0 1 19%;
        white-space: nowrap;
        flex-shrink: 0;
        margin: 0;
    }
    .faq_tab_area ul li a {
        height: 40px;
        font-size: 12px;
        padding: 0 10px;
        border-radius: 0;
        background-color: #fff;
        border-bottom: 3px solid #fff;
        opacity: 0.8;
    }
    .faq_tab_area ul li.active a {
        color: #3CCBDB;
        border-bottom: 3px solid #3CCBDB;
        background-color: #fff;
        box-shadow: none;
        opacity: 1;
    }
    .faq_his_area ul {
        border-top: 1px solid #eee;
    }
    .faq_his_area .subject_ {
        flex-wrap: wrap;
        height: auto;
        padding: 15px;
    }
    .faq_his_area .subject_ span:first-child {
        width: 100%;
        padding: 0;
        font-size: 12px;
        margin-bottom: 8px;
    }
    .faq_his_area .subject_ .Q, 
    .faq_his_area .drop_ .A {
        width: 24px;
        height: 24px;
        font-size: 12px;
        margin-right: 8px;
    }
    .faq_his_area .subject_ .conetnet {
        flex-basis: 0;
        flex-grow: 1;
        font-size: 14px;
    }
    .faq_his_area .subject_ .dropBtn {
        width: 24px;
        height: 24px;
        margin-right: 0;
    }
    .faq_his_area .drop_ {
        margin-bottom: 0;
    }
    .faq_his_area .drop_ > div {
        padding: 15px;
    }


/* divtable */
    .divTable .thead_ {
        display: none;
    }
    .divTable dl {
        position: relative;
        width: 100%;
    }
    .divTable dl dd {
        justify-content: flex-start;
        height: auto;
        padding: 0;
    }
    .divTable .subject {
        width: 100%;
    }
    .divTable .subject p, 
    .divTable .subject a {
        white-space: normal;
        line-height: 1.4em;
        max-height: 2.8em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: left;
    }
    

    
.modal-dialog.customModal{
    height: calc(100dvh - 67px);
}

#customModal .closer {
    position: static;
    left: 0;
    top: 0;
    transform: none;
    width: 13px;
    height: 26px;
    background-image: none;
    margin: 0;
}
#customModal .check_area{
    gap:15px 20px;
}
#customModal .modal-layer{
    margin: 0;
    height: calc(100dvh - 67px);
    max-width: none;
    max-height: none;
    border-radius: 0;
}
#customModal .modal-layer .content{
    height: calc(100% - 85px - 72px); 
    padding: 20px;
}

#customModal .modal-layer .head{
    background: var(--primary-color);
    color: #fff;
    padding: 19px 15px;
    height: initial;
    font-size: 18px;
    
    justify-content: flex-start;
    gap: 30px;
}

#customModal .modal-layer .field_area .field{
    flex-direction: column;
    align-items: flex-start;
}
#customModal .modal-layer .field + .field{
    margin-top: 30px;
}

#customModal .modal-layer .btn_area{
    position: fixed;
    bottom: 82px;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 15px;
    padding-bottom: 0;
    background: #fff;
}
#customModal .modal-layer .btn_area .submitBtn{
    line-height: 1;
    padding: 18px 0 ;
    border-radius: 10px;
    font-size: 16px;
    height: auto;
}

/* 문의내역 */
    .Inquire_his_area .divTable {
        margin-top: 0;
        border-top: 0;
    }
    .Inquire_his_area .divTable .empty {
        margin-top: 50%;
    }
    .Inquire_his_area dl {
        flex-flow: wrap;
        justify-content: flex-start;
        padding: 15px;
    }
    .divTable dl dt, 
    .Inquire_his_area dl dd:nth-child(1),
    .Inquire_his_area dl dd:nth-child(2),
    .Inquire_his_area dl dd:nth-child(4),
    .Inquire_his_area dl dd:nth-child(5) {
        width: auto;
    }
    .Inquire_his_area dl dd:nth-child(1) {
        display: none;
    }
    .Inquire_his_area dl dd:nth-child(2) {
        font-size: 12px;
        margin-bottom: 10px;
        line-height: 20px;
    }
    .Inquire_his_area dl dd:nth-child(3) {
        width: 100%;
        margin-bottom: 5px;
        font-size: 14px;
    }
    .Inquire_his_area dl dd:nth-child(4) {
        width: 100%;
        font-size: 12px;
        margin-bottom: 5px;
    }
    .Inquire_his_area dl dd:nth-child(5) {
        position: absolute;
        right: 0;
        bottom: 0;
        margin: 15px;
        font-size: 10px;
    }
    .Inquire_his_area .state_ {
        padding: 2px 6px;
    }

    .Inquire_his_area dl dd:nth-child(6) {
        position: absolute;
        top: 0;
        right: 0;
        margin: 15px;
        width: auto;
    }
    .Inquire_his_area .removeBtn {
        width: 20px;
        height: 20px;
    }
    .Inquire_his_area .removeBtn img {
        width: 100%;
    }

    .answer_area {
        padding: 0;
    }
    .answer_area .request_, 
    .answer_area .response_ {
        padding: 15px;
    }
    .answer_area .writer_ .profile_ {
        width: 24px;
        height: 24px;
        background-size: 10px;
        margin-right: 8px;
    }
    .answer_area .writer_ .name {
        font-size: 14px;
        margin-right: 10px;
    }
    .answer_area .writer_ .date {
        font-size: 11px;
        margin-top: 0px;
    }
    .answer_area .comment_ {
        padding-left: 0;
        font-size: 14px;
    }
    
    .customer_tool .search_ input{
        flex-grow: initial;
        flex: 4;
    }

    .customer_tool .Inquire_ {
        padding: 0;
        height: auto;
        flex-flow: column;
        align-items: flex-start;
        word-break: keep-all;
        font-size: 14px;
    }
    .customer_tool .Inquire_ .submitBtn {
        width: 100%;
        height: 44px;
        font-size: 14px;
        margin-top: 15px;
    }
    .faq_his_area li.non_result{
        font-size: 14px;
        padding: 60px 0;
    }

/* 1:1 문의 */
    .Inquire_area {
        padding: 0;
        border-top: 0;
    }
    .Inquire_area .select__wrap {
        max-width: 100%;
    }
    .Inquire_area .editor_ > label, 
    .Inquire_area .top_ > label {
        padding-top: 0;
    }
    .uploader {
        width: 100%;
    }
    .uploader .inp_ {
        flex-grow: 1;
        width: 100%;
        min-height: 44px;
        border-radius: 8px;
    }
    .uploader .uploadBtn {
        flex-shrink: 0;
        height: 44px;
        font-size: 14px;
        margin-left: 5px;
    }
    .uploader + .files {
        margin-bottom: 15px;
    }
    .uploader + .files .item {
        font-size: 12px;
    }
    .uploader + .files .item .close {
        width: 20px;
        height: 20px;
        background-size: contain;
        margin-left: 5px;
        margin-top: 2px;
    }
    .Inquire_area .btn_area {
        margin-top: 0;
        flex-wrap: wrap;
    }
    .Inquire_area .btn_area .btn {
        width: 100%;
        height: 44px;
        border-radius: 4px;
        font-size: 14px;
        margin-left: 0;
        margin-top: 10px;
    }

/* 공지사항 */
    .customer_his_area .divTable {
        margin-top: 0;
        border-top: 0;
    }
    .customer_his_area dl {
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 15px;
    }
    .customer_his_area dl dd:nth-child(1) {
        display: none;
    }
    .customer_his_area dl dd:nth-child(2) {
        width: 100%;
        font-size: 12px;
        margin-bottom: 3px;
    }
    .customer_his_area dl dd:nth-child(3) {
        width: 100%;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 10px;
    }
    .customer_his_area dl dd:nth-child(4),
    .customer_his_area dl dd:nth-child(5) {
        font-size: 12px;
        width: auto;
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 20px;
        margin-right: 8px;
        background-size: 14px;
        color: #999;
    }
    .customer_his_area dl dd:nth-child(4) {
        background-image: url(../img/icon/fe/calendar.svg);
    }
    .customer_his_area dl dd:nth-child(5) {
        background-image: url(../img/icon/fe/eye.svg);
    }


/* 공지사항 상세 */
    .customer_details .head {
        border-top: 0;
        height: auto;
        padding: 15px;
        flex-flow: column;
        align-items: flex-start;
    }
    .customer_details .subject {
        flex-flow: column;
        align-items: flex-start;
    }
    .customer_details .subject span {
        font-size: 12px;
    }
    .customer_details .subject h1 {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .customer_details .tool .date,
    .customer_details .tool .views {
        font-size: 12px;
        width: auto;
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 20px;
        margin-right: 8px;
        background-size: 14px;
        color: #999;
    }
    .customer_details .tool .views {
        margin-left: 0px;
    }
    .customer_details .conetent {
        border-color: #eee;
        padding: 25px 15px;
        font-size: 14px;
        min-height: 200px;
    }
    .customer_details .btn_area {
        margin: 20px 0;
    }
    .customer_details .btn_area .btn {
        width: 100%;
        height: 44px;
        border-radius: 4px;
        font-size: 14px;
    }
    .customer_details .btn_area .btn img {
        margin-right: 8px;
    }


/* 프로필 보기 */
    .review_details {
        padding: 0;
        padding-bottom: 40px;
    }
    .review_details .profile_details {
        position: relative;
        margin-bottom: 10px;
    }
    .review_details .profile_details:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 37%;
        background-color: #fff;
        z-index: 0;
    }
    .profile_details {
        flex-flow: column;
        background-color: #3CCBDB;
        border-radius: 0;
        color: #fff;
        padding: 20px 15px;
    }
    .profile_details .profile_area {
        width: 100%;
        justify-content: space-between;
        margin-right: 0;
    }
    .profile_details .profile_area .profile_img {
        width: 50px;
        height: 50px;
        margin-right: 13px;
        background-size: 22px;
    }
    .profile_details .profile_area .profile_info .email {
        color: #fff;
        font-size: 13px;
        margin-top: 0;
    }
    .profile_details .profile_area .favBtn {
        color: transparent;
        font-size: 0;
        width: 45px;
        height: 45px;
        padding-left: 45px;
        background-position: center;
        overflow: hidden;
    }
    .profile_details .profile_area .zzimBtn {
        color: transparent;
        font-size: 0;
        width: 45px;
        height: 45px;
        padding-left: 45px;
        background-position: center;
        overflow: hidden;
    }

    .profile_details .notice_ {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        width: 100%;
        height: 40px;
        border-radius: 5px;
        margin-top: 20px;
        padding: 0 17px;
        font-size: 14px;
        color: #222;
    }
    .profile_details .notice_ > div:first-child {
        color: #9499B4;
        padding-left: 26px;
        background-image: url(../img/icon/fe/ball.svg);
        background-repeat: no-repeat;
        background-position: left center;
    }
    .profile_details .notice_ .count {
        color: #16B9CB;
        padding-right: 4px;
    }


    .profile_details .follower_ {
        position: relative;
        margin-top: 10px;
        background-color: #fff;
        border-radius: 5px;
        padding: 20px 15px;
        width: 100%;
        z-index: 10;
/*
        box-shadow: 0px 10px 20px rgba(60,203,219,0.3);
        -webkit-box-shadow: 0px 10px 20px rgba(60,203,219,0.3);
*/
    }
    .profile_details .follower_ ul {
        flex-flow: column;
    }
    .profile_details .follower_ ul li {
        width: 100%;
        justify-content: flex-start;
        align-items: center;
    }
    .profile_details .follower_ ul li + li {
        margin-left: 0;
        margin-top: 15px;
    }
    .profile_details .follower_ .sns_icon {
        width: 30px;
        height: 30px;
        border-radius: 4px;
        padding: 6px;
        margin-right: 8px;
        flex-shrink: 0;
    }
    .profile_details .follower_ .sns_icon img {
        max-width: 100%;
    }
    .profile_details .follower_ .sns_info {
        flex-grow: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        color: #222;
    }
    .profile_details .follower_ .sns_info div:last-child {
        display: flex;
        flex-flow: column;
    }
    .profile_details .follower_ span {
        font-size: 12px;
    }
    .profile_details .follower_ .value {
        font-size: 14px;
    }

    .sub_page_tab {
        overflow-x: scroll;
    }
    .sub_page_tab ul {
        flex-wrap: nowrap;
    }
    .sub_page_tab ul:before,
    .sub_page_tab ul:after {
        content: "";
        width: 15px;
        height: 40px;
        flex-shrink: 0;
    }
    .sub_page_tab ul li {
        margin-bottom: 0;
    }
    .sub_page_tab ul li + li {
        margin-left: 4px;
    }
    .sub_page_tab a {
        width: auto;
        height: 40px;
        font-size: 14px;
        border-radius: 0;
        border: 0;
        background-color: #fff;
        padding: 0 8px;
        border-bottom: 3px solid #fff;
    }
    .sub_page_tab .active a {
        border-bottom: 3px solid #3CCBDB
    }

    .about_area {
        padding-top: 10px;
    }
    .about_area > .title {
        padding: 0 15px;
        font-size: 20px;
        margin-bottom: 0px;
        display: none;
    }

    .about_profile {
        
    }
    .about_profile dl,
    .about_profile dl dl {
        flex-wrap: wrap;
        flex: 0 1 100%;
        width: 100%;
        border: none;
    }
    .about_profile > dl + dl {
        padding: 0;
    }
    .about_profile dl dd,
    .flex_center {
        width: 100%;
        flex-flow: column;
        align-items: flex-start;
    }
    .about_profile dl dd {
        padding: 15px;
        border-bottom: 1px solid #eee;
    }
    .about_profile dl dd .tit {
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 500;
    }
    .about_profile dl dd .desc {
        font-size: 14px;
    }


/* 찜 리스트 */
    .favorite_list {
        padding: 0;
    }
    .favorite_list ul li,
    .favorite_list ul li + li {
        margin: 0;
    }
    .favorite_list ul li {
        flex: 0 1 100%;
        padding: 20px 15px;
        border-bottom: 1px solid #ddd;
    }
    .favorite_list .profile_area {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .favorite_list .profile_area .profile_img {
        margin: 0;
        width: 50px;
        height: 50px;
        background-size: 22px;
    }
    .favorite_list .profile_area .profile_info {
        margin-top: 0;
        margin-left: 10px;
        flex-flow: column;
    }
    .profile_area .profile_info .lv {
        margin-right: 0;
        padding-right: 0;
        border: none;
        font-size: 12px;
    }
    .profile_area .profile_info .name {
        font-size: 16px;
    }
    .meno_area {
        border-radius: 0;
        border: none;
        border-top: 1px solid #eee;
        margin-top: 10px;
        padding: 0;
        padding-top: 10px
    }
    .meno_area .field {
        font-size: 14px;
    }
    .meno_area textarea {
        margin-top: 10px;
    }



/* 모바일 마이페이지 */
    .profile_details .follower_ + :after {
        height: 180px;
    }
    .follower_ .review_ {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        color: #222;
        font-size: 14px;
        line-height: 1.2em;
    }
    .follower_ .review_ > div + div {
        margin-left: 20px;
        padding-left: 18px;
        border-left: 1px solid #eee;
    }
    .follower_ .review_ .icon {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        text-align: center;
        margin-top: 2px;
    }
    .follower_ .review_ .icon img {
        vertical-align: top;
    }
    .follower_ .review_ a {
        padding-right: 0;
        background-image: none;
    }
    .follower_ .review_ > div:first-child {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-flow: column;
    }
    .follower_ .review_ .tit {
        font-size: 12px;
        color: #9499B4;
    }
    .follower_ .review_ > div:first-child a{
        color: #16B9CB;
        text-decoration: underline;
        font-size: 12px;
    }
    .follower_ .review_ .type {
        font-size: 14px;
        padding-right: 7px;
        color: #222;
    }
    .follower_ .review_ + .btn_area {
        padding: 0;
        margin-top: 20px;
    }
    .follower_ .review_ + .btn_area .submitBtn {
        width: 100%;
    }



/* 모바일 마이페이지 */
    .review_details .account_ {
        padding: 0 15px;
    }
    .review_details .account_ > article {
        padding-bottom: 30px;
    }
    .review_details .account_ > article + article {
        padding-top: 30px;
        border-top: 1px solid #eee;
    }
    .review_details .account_ .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }
    .review_details .account_ .title h1 {
        font-size: 20px;
        font-weight: 700;
    }
    .review_details .account_ .golink_ {
        color: #9499B4;
        font-size: 14px;
        padding-right: 12px;
        background-image: url(../img/icon/tool/arrow_right_c.svg);
        background-repeat: no-repeat;
        background-position: right bottom 5px;
    }
    .campaign_state {
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        padding: 15px;
        font-size: 14px;
        color: #9499B4;
    }
    .campaign_state b {
        font-size: 20px;
        font-weight: 900;
        color: #16B9CB;
        padding-bottom: 6px;
    }

    .review_details .mypoint_ {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        text-align: right;
    }
    .review_details .mypoint_ .point {
        font-size: 20px;
        font-weight: 900;
        color: #16B9CB;
    }
    .title + .mobile_link {
        margin-top: 15px;
    }
    .mobile_link {}
    .mobile_link li + li {
        margin-top: 10px;
    }
    .mobile_link a {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        border-radius: 5px;
        border: 1px solid #E7E7E7;
        color: #666;
        font-size: 14px;
    }
    .review_details .account_ .btn_area {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }
    .review_details .account_ .btn_area .btn {
        height: 50px;
        color: #3CCBDB;
        border-color: #3CCBDB;
        font-size: 14px;
    }

    .follower_ .setting_ {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
    }
    .follower_ .setting_ > div {
        flex: 0 1 50%;
        text-align: center;
    }
    .follower_ .setting_ a {
        display: block;
        padding: 0;
        background-image: none;
        color: #444;
        font-size: 14px;
    }
    .follower_ .setting_ img {
        vertical-align: top;
        margin-bottom: 15px;
    }



    .list_area.col-03 {
        width: 100%;
    }
    .list_area.col-03 ul li:not(.pagenate ul li) {
        width: 48%;
        margin-left: 0 !important;
    }
    .list_area.col-03 .details {
        min-height: 120px;
    }
    .list_area.col-03 li .btn {
        font-size: 12px;
        height: 34px;
        margin-bottom: 10px;
        border-radius: 4px;
    }
    .list_area.col-03 ul li + li:not(.pagenate ul li) {
        margin-top: 0 !important;
    }
    .list_area.col-03 .timer {
        font-size: 12px;
        font-weight: 400;
        border-radius: 4px;
    }
    .list_area.col-03 .cancel {
        font-size: 12px;
        font-weight: 400;
        border-radius: 8px;
        background-color: #fff;
    }

    .mB {
        display: block !important;
    }
    .about_area .btn_area {
        padding: 0;
        margin-top: 25px;
    }
    .aside_section .about_area .list_area {
        padding: 15px;
    }
    .sub_page_tab + .list_area,
    .cmpState_ + .list_area.col-03 {
        margin-top: 25px;
        padding-top: 25px;
        background: #fff;
    }

    .cmpState_ {
        padding: 15px;
        border-radius: 0;
/*        border-bottom: 4px solid #eee;*/
        background-color: #fff;
    }
    .cmpState_ ul li {
        font-size: 12px;
    }
    .cmpState_ ul li b {
        font-size: 20px;
        font-weight: 900;
    }


/* 미션제출하기 */
    #missionModal .modal-layer {
        max-width: 90vw;
    }
     #missionModal .modal-layer .content {
        max-height: calc(100vh - 180px);
        padding-bottom: 20px;
    }
     #missionModal .modal-layer .content::-webkit-scrollbar {
        width: 0px;
        background-color: transparent;
    }
    #missionModal .modal-layer .content::-webkit-scrollbar-thumb {
        background-color: transparent;
        border: 0px solid transparent;
        opacity: 0;
    }
    #missionModal .modal-layer .content::-webkit-scrollbar-track {
        background-color: transparent;
        opacity: 0;
    }
    .missionBlock {
        padding: 15px;
        flex-flow: column;
    }
    .missionBlock > div {
        width: 100%;
    }
    .missionBlock .imgBox {
        width: 100%;
        height: auto;
        margin-right: 0;
        margin-bottom: 10px;
        border-radius: 8px;
    }
    .missionBlock .btn {
        width: 100%;
        height: 44px;
        border: none;
    }
    .BuyMission {
        padding: 15px;
    }
    .BuyMission .title h1 {
        font-size: 16px;
    }
    .BuyMission .state {
        font-size: 12px;
        width: 84px;
    }
    .mission_guide .head {
        height: 40px;
    }
    .mission_detial {
        flex-flow: column;
    }

    .mission_detial .uploader_area {
        flex-flow: wrap;
        margin-bottom: 10px;
    }
    .mission_detial .uploadList {
        flex-flow: wrap;
    }
    .mission_detial .uploadList .item {
        margin-right: 0;
        margin-bottom: 0;
    }

    #missionModal .uploader {

    }
    #missionModal .uploader input + label {
        background-position: center;
        background-color: #F5F5F5;
        border-radius: 5px;
    }

    .mission_detial .field {
        width: 100%;
    }
    .mission_detial .field dl {
        flex-flow: column;
        align-items: flex-start;
        width: 100%;
    }
    .mission_detial .field dl dd {
        width: 100%;
    }
    .mission_detial .field dl dd:first-child {
        margin-bottom: 4px;
    }
    .mission_detial .field dl + dl {
        margin-top: 8px;
    }

    .mission_item {
        padding: 15px;
    }
    .mission_item .title {
        font-size: 14px;
    }
    .mission_item .title h1 {
        font-size: 14px;   
    }
    .mission_item .timer, 
    .mission_item .dday {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 12px;
    }
    .mission_item .timer img, 
    .mission_item .dday img {
        margin-right: 4px;
        margin-top: 2px;
        vertical-align: top;
    }
    .mission_item select {
        height: 40px;
        border-radius: 5px;
        font-size: 14px;
    }
    .mission_item select + input {
        border-radius: 5px;
    }
    .mission_item + .btn_area {
        padding: 15px;
        margin-top: 20px;
    }
    .mission_item .uploader {
        border-radius: 5px;
    }
    #missionModal .uploadList .item {
        border-radius: 5px;
        margin-top: 0px;
    }


/* 포트폴리오 상세 */
    #detailsModal .modal-layer {
        max-width: 90vw;
    }
    #detailsModal .modal-layer .content {
        max-height: calc(100vh - 100px);
        padding: 15px;
    }
    #detailsModal .details {
        flex-flow: column;
    }
    #detailsModal .profile_area {
        width: 100%;
        margin-right: 0;
        padding-right: 0;
        border-right: 0;
        margin-bottom: 25px;
    }
    #detailsModal .profile_area .comment {
        padding: 12px;
    }
    #detailsModal .profile_area .profile_info .lv {
        margin-right: 8px;
        padding-right: 8px;
        border-right: 1px solid #ddd;
    }

    #detailsModal .list_area {
        padding: 0;
    }
    #detailsModal .list_area > div {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    #detailsModal .list_area .imgBox {
        width: 90px;
        height: 90px;
        flex-shrink: 0;
    }
    #detailsModal .list_area .details {
        flex-grow: 1;
        width: 100%;
        max-width: 150px;
        padding: 5px 0;
    }
    #detailsModal .list_area .col-06 {
        align-items: flex-end;
    }
    #detailsModal .list_area .desc,
    #detailsModal .list_area .btn {
        width: 100%;
        flex-shrink: 0;
    }
    #detailsModal .list_area .desc {
        margin-top: 10px;
        padding-top: 10px;
        border-top:  1px solid #eee;
        font-size: 14px;
    }
    
    #campaign_list_wrap .empty_cp{
        padding-top: 40px;
        font-size: 16px;   
    }
    
    .text_banner_area.custom{
        gap:14px;
    }
    .text_banner_area.custom .wrap img{
        display: none;
    }
    .text_banner_area.custom .wrap .desc{
        text-align: center;
    }
    .text_banner_area.custom .wrap .desc span:first-child{
        font-size: 14px;
        padding-bottom: 17px;
    }
    .text_banner_area.custom .wrap .desc span:last-child{
        font-size: 10px;
    }
    .text_banner_area.custom .custom_set_area .subject{
        gap:10px;
    }
    
    .text_banner_area.custom .custom_set_area .subject div:first-child{
        font-size: 14px;
    }
    .text_banner_area.custom .custom_set_area .subject div:last-child{
        font-size: 12px;
        gap:8px;
    }
    .text_banner_area.custom .custom_cont .btn_cont{
        display: none;
    }
    .text_banner_area.custom .custom_set_area .subject div span{
        padding: 5px;
    }
    
    .campaign__ .title.Custom h1:after{
        width: 5px;
        height: 13px;
    }
    .campaign__ .btn_cont{
        padding-top: 0;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .nonLogin{
        padding: 0 15px;
    }
    
    .nonLogin .inner{
        padding: 30px;
    }
    
    
    .real_time_contents .rank_list:not(.best_rank_slide) .item{
         flex: 1 0 calc((100% / 2) - 10px);
         max-width: calc(100% / 2 - 0px);
        gap:10px;
        padding: 10px;
    }
    .real_time_contents .rank_list:not(.best_rank_slide){
        gap:10px;
    }
    .real_time_contents .keyword_cont .keyword_info div > div.serch{
        font-size: 16px;
    }
    .real_time_contents .keyword_cont .keyword_info div > div#rank{
        font-size: 18px;
    }
    .real_time_contents .keyword_cont .keyword_info h2{
/*        flex: 1;*/
        font-size: 12px;
    }
    .real_time_contents .rank_list:not(.best_rank_slide) .tag_area{
        align-items: center;
    }
    .list_area .details .status_cont .date{
        font-size: 12px;
    }
    .list_area .details .status div{
        font-size: 12px;
    }
    .rank_list:not(.best_rank_slide) .details .subject{
        margin-bottom: 14px;
    }
    .list_area .details .status_cont .status img{
        max-width: 18px;
    }
    .list_area .details .status div{
        gap:5px;
    }
    .real_time_contents .keyword_cont .keyword_info div > div{
        word-break: keep-all;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .real_time_contents .keyword_cont .img_box img{
        width: 120px;
        height: 120px;
    }
    .real_time_contents .keyword_cont .keyword_info{
        width: calc(100% - 120px - 20px);    
    }
    .real_time_contents .keyword_cont .keyword_info > div{
        gap:10px;
    }
    .real_time_contents .rank_list.best_rank_slide{
        gap:30px;
    }
    
    .real_time_contents #more{
        font-size: 14px;
        max-width: calc(100% - 20px);
    }
    .real_time_contents .banner_cont .contents .text h1{
        font-size: 20px;
    }
    .real_time_contents .banner_cont .contents .text p{
        font-size: 28px;
    }
    .real_time_contents .best_rank_swiper .best_rank_cont{
        flex-wrap: nowrap;
        padding: 0;
    }
    
    .real_time_contents .best_rank_inner{
        max-width: calc(100% - 130px);
    }
    .real_time_contents .best_rank_swiper .best_rank_cont .item .img_box img{
        max-height: 180px;
    }
    .real_time_contents .best_rank_swiper .best_rank_cont .item .img_box{
        max-height: 180px;
    }
    .best_rank.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
        left: -30px;
    }
    .best_rank.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
        right: -30px;
    }
    
/*
    .real_time_contents .best_rank_swiper .best_rank_cont .item{
        max-width: 180px;
    }
*/
    .content_tab{
        top: 60px;
    }
    
    .area_tab{
        padding: 15px 15px 0;
        background: #fff;
    }
    .area_tab > div{
        font-size: 16px;
        padding-bottom: 0;
    }
    .area_tab .area_list_box{
        width: calc(100% - 30px);
        height: calc(100dvh - 200px);
        overflow-y: auto;
    }
    
    .area_tab .location{
        flex-direction: column;
    }
    .area_tab .location_detail li{
        width: 30%;
    }
    .area_tab .location .left{
        padding-bottom: 14px;
    }
    
    
/* 모바일 메인 맞춤 캠페인 리스트 */
    .customize_campaignSwiper{
        display: none;
    }
    .mobile_campaign_list_cont{
        padding: 0 15px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .mobile_campaign_list_cont .campaign_item{
        display: flex;
        gap:10px;
    }
    .mobile_campaign_list_cont .campaign_item .img_box{
        max-width: 70px;
        height: 70px;
        border-radius: 8px;
        overflow: hidden;
    }
    .mobile_campaign_list_cont .campaign_item .img_box img{
        max-width: 100%;
    }
    .mobile_campaign_list_cont .campaign_item .info{
        display: flex;
        justify-content: space-between;
        flex: 1;
    }
    .mobile_campaign_list_cont .campaign_item .info .left{
        flex: 1;
            height: 100%;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
    }
    .mobile_campaign_list_cont .campaign_item .info .left .cp_type{
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 5px;
        justify-content: space-between;
    }
    .mobile_campaign_list_cont .campaign_item .info .left .cp_type > div{
        display: flex;
        align-items: center;
        gap:5px;
    }
    .mobile_campaign_list_cont .campaign_item .info .left .cp_type img{
        max-width: 18px;
    }
    .mobile_campaign_list_cont .campaign_item .info .left .subject{
        font-size: 14px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }
    .mobile_campaign_list_cont .campaign_item .info .left .opt{
        font-size: 12px;
        display: flex;
        justify-content: space-between;
    }
    .mobile_campaign_list_cont .campaign_item .info .left .opt .opt_text {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        flex: 1;
    }
    
    
    .mobile_campaign_list_cont .campaign_item .info .top{
        display: flex;
        gap: 14px;
        justify-content: end;
        align-items: baseline;
    }
    .mobile_campaign_list_cont .campaign_item .info .point_tag{
        padding: 2px 4px;
        border: 1px solid var(--primary-color);
        border-radius: 5px;
    }
    
    
    
/* 마이 페이지  리뉴얼 */
    
    .floating_box{
        margin: 15px 0;
        padding: 15px;
        box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25);
        border-radius: 10px;
        background-color: #fff;
    }
    .floating_box h2{
        font-size: 14px;
        font-weight: 500;
        padding-bottom: 15px;
    }
.my_page {
    padding: 0;
}
    
    .my_page .text{
        font-size: 14px;
        font-weight: 500;
    }
    .my_page .bold_text{
        font-size: 18px;
        font-weight: 700;
    }

.my_page .page_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    background-color: #fff;
    border-bottom: 1px solid #E4E4E4;
}

.my_page .page_title .btn_cont {
    display: flex;
    gap: 12px;
    align-items: center;
    line-height: 1;
}
    .my_page .page_title .btn_cont > a{
        position: relative;
        padding: 0 4px;
    }
    .my_page .page_title .btn_cont img{
        width: 22px;
        height: 22px;
    }
.my_page .point_cont{
    background: var(--primary-color);
    color: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
}
    .my_page .point_cont .info{
        display: flex;
        flex-direction: column;
        gap:5px;
        font-size: 14px;
        font-weight: 500;
    }
    .my_page .point_cont .info .text{
        font-size: 14px;
    }
    .my_page .point_cont .point{
        font-weight: 700;
        font-size: 16px;
    }
    
    .my_campaign_step_cont{
        display: flex;
        gap:15px;
        flex-direction: column;
    }
    .my_campaign_step_cont > div{
        display: flex;
        gap:30px;
    }
    .my_campaign_step_cont > div a{
        width: 100%;
        height: 100%;
        text-align: center;
        z-index: 1;
    }
    
    .my_campaign_step_cont .box{
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap:5px;
        flex: 1;
        background: #F8F8F8;
        border-radius: 10px;
        color: #222;
        aspect-ratio:1/1;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        border: 1px solid #E4E4E4;
        font-size: 20px;
    }
    .my_campaign_step_cont .box::before{
        content: "";
        display: inline-block;
        width: 30%;
        height: 1px;
        background-color: #E4E4E4;
        position: absolute;
        z-index: -1;
    }
    .my_campaign_step_cont .box.active{
        border: 3px solid var(--primary-color);
        color: var(--primary-color);
        background-color: #E2FCFF;
    }
    .my_campaign_step_cont a .text{
        font-size: 12px;
        font-weight: 600;
    }
    .my_campaign_step_cont a:has(.active) .text{
        color: var(--primary-color);
    }
    .my_campaign_step_cont a:last-child .box::before{
        display: none;
    }
    
    .my_page .my_campaign_step_cont .blue .box{
        background: #E2FCFF;
        color: #3CCBDB;
    }
    .my_page .my_campaign_step_cont .blue .box + span{
        color: #3CCBDB;
    }
    .my_page .my_campaign_step_cont .red .box{
        background: #FFEAEA;
        color: #FF3131;
    }
    .my_page .my_campaign_step_cont .red .box + span{
        color: #FF3131;
    }
    
    .my_page .grade_cont{
        display: flex;
        gap:15px;
    }
    .my_page .grade_cont .floating_box{
        flex: 1;
        display: flex;
        justify-content: space-between;
    }
    
    .my_page .grade_cont .floating_box > div{
        display: flex;
        flex-direction: column;
        gap: 5px;
        justify-content: center;
    }
    
    .floating_box .head{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .floating_box > .head{
        padding-bottom: 15px;
    }
    .floating_box .head h2{
        padding-bottom: 0;
        font-weight: 500;
    }
    .floating_box .head a {
        font-size: 14px;
        font-weight: 500;
    }
    .floating_box .head .text{
        font-size: 12px;
    }
    
    .my_page .sns{
/*        margin-top: 15px;*/
        width: 100%;
        display: flex;
        flex-direction: column;
        gap:10px;
        border: 1px solid var(--line-color);
        padding: 10px;
        border-radius: var(--border-round-S);
        font-weight: 400;
        font-size: 14px;
        color: #222;
    }
    
    .my_page .field_area .sns{
        border-radius: 10px;
    }
    .my_page .sns > a{
        padding: 10px;
        border: 1px solid #E4E4E4;
        display: flex;
        flex-direction: column;
        gap:10px;
        border-radius: 10px;
        flex: 1;
        color: #666;
    }
    .my_page .sns > a .text{
        display: flex;
        align-items: center;
        gap:5px;

    }
    .my_page .sns > a .small_text{
        font-size: 12px;
    }
    .my_page .banner_section{
        margin-top: 15px;
        
    }
    .my_page .sns .item_wrap{
        display: flex;
        flex-direction: column;
        gap:10px;
        font-size: 12px;
        font-weight: 400;
    }
    .my_page .sns .item_wrap a{
        display: flex;
        gap:5px;
        align-items: center;
        font-weight: 400;
        font-size: 12px;
    }
    .my_page .sns .item_wrap a svg{
        max-width: 12px;
    }
    
    .my_page .more_chip_cont{
        display: grid;
        font-size: 12px;
        color: #666;
        grid-template-columns: repeat(3,1fr);
        grid-row-gap: 25px;
    }
    .my_page .more_chip_cont .icon{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        text-align: center;
        word-break: keep-all;
    }
    
    .my_page .icon.red_dot::before{
        content: "";
        position: absolute;
        display: inline-block;
        right: 0;
        top: 0;
        width: 4px;
        height: 4px;
        background: var(--red-100-color);
        border-radius: 50%;
    }
    
    .profile_card .info_ > div{
    }
    
    .PC_content{
        display: none;
    }
    .back_title .ct_title.PC_content{
        display: none;
    }
    .MO_content{
        display: block;
    }
    
}


/*마이페이지 나의 등급*/
.grade_guide {
    border: 1px solid rgb(228, 229, 237);
    height: 400px;
    margin-bottom: 8px;
    border-collapse: collapse;
    border-spacing: 0px;
}
.grade_guide thead {
    height: 72px;
    background-color: rgb(250, 250, 252);
}
.grade_guide tr th:first-child {
    width: 124px;
    font-size: 15px;
    font-weight: bold;
}
.grade_guide tr th {
    text-align: center;
    height: 72px;
    width: 179px;
    padding-top: 24px;
    padding-bottom: 24px;
    background-color: rgb(250, 250, 252);
    border-right: 1px solid rgb(228, 229, 237);
    border-bottom: 1px solid rgb(228, 229, 237);
    font-size: 14px;
    font-weight: normal;
    color: rgb(48, 52, 65);
}
.grade_guide tbody tr th:first-child {
    width: 124px;
    font-size: 15px;
    font-weight: bold;
}
.grade_guide tbody tr td {
    text-align: center;
    height: 72px;
    padding-top: 24px;
    padding-bottom: 24px;
    min-width: 96px;
    border-right: 1px solid #e4e5ed;
    border-bottom: 1px solid #e4e5ed;
    font-size: 14px;
    font-weight: 400;
}

.expected_grade_noti{
    width: 100%;
    text-align: right;
}
.expected_grade_noti div{
    font-size: 14px;
    color: #727585;
}


.mobile_none {
    /*display: none;*/
}

/* 마이 캠페인 디테일 페이지*/



.heading_line01{
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    color: #000;
}

.my_campaign_detail .heading_line01{
    display: flex;
    align-items: center;
    gap:10px;
}
.my_campaign_detail .heading_line01 img{
    max-width: 13px;
}

.heading_line02{
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #000;
}

.customBtn_p{
    cursor: pointer;
    background: #3CCBDB !important;
    color: #fff !important;
    
    border: 1px solid #3CCBDB !important;
    border-radius: 5px;   
    padding: 13.5px 20px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    display: inline-block;
}
.customBtn_p img{
    max-width: 20px;
}
.customBtn_p:hover{
    background: #fff !important;
    color: #3CCBDB !important;
}

.customBtn_p .arrow_p{display:  none;}
.customBtn_p .arrow_w{display:inline-block;}
.customBtn_p:hover .arrow_p{display: inline-block;}
.customBtn_p:hover .arrow_w{display: none;}

.my_campaign_detail .top_area{
    display: flex;
    justify-content: space-between;
    padding-top: 60px;
    padding-bottom: 18px;
}

.my_campaign_detail .item{
    padding: 20px 0;
    display: flex;
    gap:15px;
    border-top: 1px solid #E7E7E7;
    border-radius: 0;
}

.my_campaign_detail .item:last-child{
    border-bottom: 1px solid #E7E7E7;
}
.my_campaign_detail .item .title{
    max-width: 150px;
    width: 100%;
}
.my_campaign_detail .item .title .heading_line02{
    display: flex;
    gap:5px;
    align-items: center;
}

.my_campaign_detail .item .title .heading_line02 img.q_mark{
    display: none;
}

.my_campaign_detail .item.sponsor .guide_desc{
    display: flex;
    flex-direction: column;
    text-align: center;
    gap:12px;
}

.my_campaign_detail .item.sponsor .guide_desc button{
    align-self: center;
}

.my_campaign_detail .item.sponsor .img_bg{
    background: #E7E7E7;
    padding: 20px;
    text-align: center;
}

.my_campaign_detail .item.sponsor .img_bg img{
    max-width: 100%;
}

.my_campaign_detail .item .guide_cont{
    flex: 1;
    gap: 10px;
    display: flex;
    flex-direction: column;
}
.my_campaign_detail .item .guide_cont .mission_error{
     align-self: flex-end;   
    width: auto;
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
    padding-right: 0;
    margin-right: 40px;
}

.my_campaign_detail .item.visit_info .guide_desc{
    display: flex;
    align-items: center;
    gap:20px;
    width: 100%;
}
.my_campaign_detail .item.visit_info .guide_desc .btn_border{
    max-width: initial;
    width: auto;
    padding: 5px 10px;
    font-size: 14px;
}

.my_campaign_detail .top_area .btn_cont{
    display: flex;
    align-items: center;
    gap:10px;
}
.my_campaign_detail .top_area .btn_cont .message_btn{
    background: var(--accent-color);
    padding: 13.5px 20px;
    line-height: 1;
    border-radius: 5px;
    cursor: pointer;
}

.my_campaign_detail .top_area a{
    display: flex;
    align-items: center;
    gap:10px;
}

.my_campaign_detail .flexBox{
    display: flex;
}

.my_campaign_detail .campaign_guide{
    flex:1;
}

.my_campaign_detail .campaign_guide._MO{
    display: none;
    padding-bottom: 20px;
}

.my_campaign_detail .guide_desc{
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #222;
    padding-right: 50px;
    flex:1;
    width: calc(100% - 165px);
    word-break: break-all;
}

.my_campaign_detail .guide_desc .guide_list{
    padding-bottom: 5px;
} 

.my_campaign_detail .guide_desc .btn_wrap{
    display: flex;
    gap:10px;
}
/*
.my_campaign_detail .guide_desc .guide_list::before{
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 4px;
    height: 4px;
    background: #222;
    border-radius: 50px;
}
*/

.my_campaign_detail .guide_desc ol{
    padding-left: 18px;
    padding-bottom: 20px;
}

.my_campaign_detail .guide_desc .mission_icon{
    max-width: 35px;
    min-height: 35px;
    max-height: 35px;
}
.my_campaign_detail .guide_desc .info_box img{
    max-width: 22px;
    min-height: 22px;
}
.my_campaign_detail .guide_desc .info_box.sponsor_banner img#sponsor_banner_link{
    max-width: 100%;
    width: 100%;
    max-height: 100%;
    height: 100%;
}
.my_campaign_detail .guide_desc .icon_box{
    display: flex;
    gap:20px;
    padding-bottom: 20px;
}

.my_campaign_detail .guide_desc .icon_box .icon_item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:10px;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    color: #666;
}

.my_campaign_detail .guide_desc .info_box{
    display: flex;
    gap:10px;
    flex-direction: column;
    width: 100%;
    font-size: 13px;
    color: #454D56;
    padding-top: 25px;
}
.my_campaign_detail .guide_desc .info_box:first-child{
    padding-top: 0;
}

.my_campaign_detail .guide_desc .info_box:first-child .opt_name{
/*    padding-top: 10px;*/
}
.my_campaign_detail .guide_desc .info_box div:first-child{
/*    max-width: 140px;*/
/*    min-width: 100px;*/
    flex: 1;
    color: #454D56;
    display: flex;
    align-items: center;
    gap:10px;
}
.my_campaign_detail .guide_desc .info_box div:first-child button{
 font-size: 14px;
    padding: 7px 10px;
    font-weight: 500;
}
.my_campaign_detail .guide_desc .info_box > div:last-child{
    font-size: 16px;
    font-weight: 500;
    color: #454D56;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    background: #fff;
    padding: 15px;
}

.my_campaign_detail .guide_desc .info_box div:last-child button{
    font-size: 14px;
    padding: 7px 10px;
    align-self: flex-start;
}
.my_campaign_detail .guide_desc .info_box div:last-child span{
    flex:1;
    margin-bottom: 10px;
}
.my_campaign_detail .guide_desc .info_box div:last-child #cp_blog_link{
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.my_campaign_detail .guide_desc .info_box.brand_tag_box{
    border-top: 1px solid #E4E8EE;
/*    padding-top: 20px;*/
}

.my_campaign_detail .guide_desc .info_box .desc{
    margin-top: -5px;
    font-size: 13px;
}
.my_campaign_detail .guide_desc .guide_cont{
    border-radius: 5px;
    display: flex;
    flex-direction: column;
/*    gap: 20px;*/
/*    margin-top: 15px;*/
}
.my_campaign_detail .guide_desc .guide_cont:nth-of-type(2){
    margin-top: 0;
}

.my_campaign_detail .guide_desc .tag_desc{
    padding-top: 5px;
}

.my_campaign_detail .guide_desc .copy_box{
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 15px 0 20px;
}

.my_campaign_detail .guide_desc .tag_desc p{
/*    padding-left: 20px;*/
    position: relative;
    font-size: 12px;
}
/*
.my_campaign_detail .guide_desc .tag_desc p::before{
    content:"";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 7px;
    background: #666;
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    transform: translateY(-50%);
}
*/

.my_campaign_detail .guide_desc .product_detail_img_box{
    text-align: center;
}

.my_campaign_detail .guide_desc .product_detail_img_box img{
    object-fit: cover;
    width: 100%;
}
.my_campaign_detail .guide_desc .product_detail_img_box .product_detail_img{
    height: 0;
    overflow: hidden;
}
.my_campaign_detail .guide_desc .product_detail_img_box .product_detail_img.active{
    height: auto;
}
.my_campaign_detail .guide_desc .opt_info{
    text-align: left;
    padding-bottom: 5px;
}
.my_campaign_detail .guide_desc .opt_info span{
    padding: 4px 10px;
    border-radius: 50px;
    border: 1px solid #222;
    font-size: 12px;
    color: #222;
    display: inline-block;
}
.my_campaign_detail .guide_desc .opt_info span.on{
    border: 1px solid #904AAC;
    color: #904AAC;
}


.my_campaign_detail .floating_section{
    background: #FFFFFF;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    max-width: 420px;
    width: 100%;
    align-self: flex-start;
}
.my_campaign_detail .floating_section .modal-layer .notice_{
    margin: 0 auto 20px;
}

.my_campaign_detail .floating_section .modal-layer .notice_ #edit_desc{
    border: 1px solid var(--primary-color);
    border-radius: var(--border-round-L);
    background: #fff;
    padding: 15px;
    font-size: 14px;
    color: #454D56;
}

.my_campaign_detail .mission_detial .field dl input{
    height: 45px;
}
.my_campaign_detail .mission_detial .field dl input#rv_4_copy{
    text-align: right;
}

.my_campaign_detail .mission_detial .field dl dd:first-child{
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    width: 115px;
    color: #000;
}
.my_campaign_detail .mission_item{
    padding: 20px;
    padding-top: 0;
}

.my_campaign_detail .mission_item input{
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    padding: 20px;
    height: auto;
    padding: 15px 10px;
    color: #666;
}
.my_campaign_detail .mission_item input#rv_blog_url{
    
}
.my_campaign_detail .mission_item textarea#rv_blog_url{
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    padding: 10px;
    height: auto;
    color: #666;
    border-radius: 8px;
    margin-top: 10px;
    width: 100%;
    min-height: 100px;
    outline: none;
}
.my_campaign_detail .mission_item textarea#rv_blog_url:focus{
    border: 1px solid #666;
    outline: none;
}

.my_campaign_detail .missionBlock{
    padding: 20px;
    margin: 0;
    gap:10px;
}
.my_campaign_detail .missionBlock .imgBox{
    width: 150px;
    height: 150px;
    margin-right: 0;
}

.my_campaign_detail .mission_detial{
    margin: 0;
}


.my_campaign_detail .sns_mission{
    background:#fff;
}
.my_campaign_detail .missionBlock .details{
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.my_campaign_detail .feedback_area{
    padding: 0 20px;
}
.my_campaign_detail .feedback_area .subject{
    display: flex;
    justify-content: space-between;
}
.my_campaign_detail .feedback_area .subject h4{
    font-weight: 700;
}
.my_campaign_detail .feedback_area .subject span{
    font-weight: 700;
}

.my_campaign_detail .feedback_area .item{
    padding-top: 0px;
    padding-bottom: 10px;
    border-top: none;
    font-size: 14px;
    color: #666;
    display: flex;
    flex-direction: column;
    gap:5px;
    height: 100%;
}
.my_campaign_detail .feedback_area .item:last-child{
    border-bottom: none;
    padding-bottom: 0;
}

.my_campaign_detail .feedback_area .item .feedback_desc{
    height: 70px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 10px;
    width: 100%;
}
.my_campaign_detail .feedback_area .item .count_area{
    text-align: right;
}

.my_campaign_detail .feedback_area .save_btn{
    text-align: center;
    padding: 10px 0 30px;
}

.my_campaign_detail .BuyMission{
    padding: 0 20px;
}

.my_campaign_detail .noti{
    padding: 0 20px;
}

.my_campaign_detail .noti ol{
    padding-left: 18px;
    padding-bottom: 15px;
    font-size: 15px;
    color: #666;
}

.my_campaign_detail .point_tag{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding-top: 0;
    gap:3px;
    
}
.my_campaign_detail .point_tag .point{
    padding: 0;
    margin: 0;
    border: none;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: var(--primary-color);
}

.my_campaign_detail .point_tag .text{
    font-size: 15px;
}
.my_campaign_detail .point_tag .best_feedback .text{
    font-size: 12px; 
    font-weight: 400;
}
.my_campaign_detail .point_tag .best_feedback .point{
    font-size: 16px;
}
.my_campaign_detail .subject{
    margin-bottom: 10px;
    white-space: normal;
    word-break: break-word;
}
.my_campaign_detail .option{
    margin-bottom: 0;
}



.my_campaign_detail #missionModal .modal-layer .content{
    max-height: initial;
    overflow-y: initial;
}

.my_campaign_detail input[type="checkbox"]{
    display: none;
}
.my_campaign_detail input[type="checkbox"] + label{
    display: inline-block;
    position: relative;
    left: 0;
    top: 0;
    padding-left: 35px;
    color: #000;
}
.my_campaign_detail input[type="checkbox"] + label::after{
    content: '';
    display: inline-block;
    position: absolute;
    background-image: url(../img/icon/tool/check.svg);
    background-repeat: no-repeat;
    background-size: cover;
    left: 0;
    width: 25px;
    height: 25px;
    top: 50%;
    transform: translateY(-50%);
}

.my_campaign_detail input[type="checkbox"]:checked + label::after{
        background-image: url(../img/icon/tool/checked.svg);
  }

.calendar_cont{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
}

#calendar {
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    
}

#calendar-month{
    text-align: center;
    padding: 5px 0 ;
    border-bottom: 1px solid #D9D9D9;
    display: flex;
    align-items: center;
    gap:10px;
    justify-content: center;
}

#calendar-month span{
    display: inline-block;
    background-color: #16B9CB;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    padding: 4.5px 8px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.6px;
}

#calendar-header,
.week {
    display: flex;
    gap:10px;
}

.yoil{
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.day {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.day.disable{
    color:#B3B3B3;
}

.sunday{
    color:#FF9A19;
}

.saturday{
    color: #17A1FA;
}

/*
.day.disable.sunday{
    color: #1270B0;
}

.day.disable.saturday{
    color: #1270B0;
}
*/

#calendar-header{
    padding: 0 5px;
}
#calendar-body{
    padding: 0 5px;
}

.day:hover {
    background-color: #EFEFEF;
    border-radius: 4px;
}
.day.disable:hover {
    background-color: #fff;
    cursor: no-drop;
}
.day.active{
      background-color: #16B9CB;
    border-radius: 4px;
    color: #fff;
}

.schedule{
    display: flex;
    align-items: center;
}
.schedule span{
    max-width: 90px;
    width: 100%;
}
.schedule_date{
    padding-bottom: 10px;
}

.schedule_date span{
    max-width: 90px;
    width: 100%;
}

.schedule_date #selected-date{
    border-radius: 5px;
    border: 1px solid #D9D9D9;
    padding: 12.5px;
}


.schedule_time span{
    display: flex;
}

.schedule_time .time_box{
    display: flex;
    gap:10px;
    align-items: center;
    width: 100%;
}
.schedule_time .time_box select{
    width: 100%;
    height: auto;
    padding: 10.5px;
    line-height: 1;
    border-radius: 5px;
}

.app_bar{
    display: none;
}


@media (max-width: 800px) {
    
    .ch_link {
        height: auto;
        padding: 9px 24px 9px 9px;
        flex: 1;
        margin-bottom: 0;
        width: auto;
    }
    .customer_tool .Inquire_ div:last-child{
        width: 100%;
        flex-direction: column;
        gap: 5px;
    }
    
.app_bar {
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 95;
    background-color: #fff;
    border-top: 1px solid #eee;
    box-sizing: border-box;
    padding:10px 0;
}

.app_bar_menu {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.app_bar_menu img {
    display: block;
    margin: auto;
    max-width: 22px;

}
    .app_bar6 img{
        border-radius: 50px;
        background-color: #EFEFEF;
        width: 22px;
        height: 22px;
    }
    .app_bar_menu svg {
        display: block;
        margin: auto;
/*        max-width: 22px;*/
    
    }
    
    .app_bar_menu li.app_bar5 svg{
        fill: #F55F71;
    }
    .app_bar_menu li.active svg{
        fill: var(--primary-color);
    }
    
    
    .app_bar_menu li.red_dot::before{
        content: "";
        position: absolute;
        display: inline-block;
        right: 30%;
        top: 0;
        width: 4px;
        height: 4px;
        background: var(--red-100-color);
        border-radius: 50%;
    }

.app_bar_menu li {
    position: relative;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.48px;
    text-align: center;
    color: #666;
    flex: 1;
}
    .app_bar_menu li.app_bar5 img{
        max-width: none;
        height: 21px;
    }

.app_bar_menu li.active{
    color: var(--primary-color);
    font-weight: 500;
}

.app_bar_menu li a {
    display: flex;
    flex-direction: column;
    gap:10px;
    line-height: 1;
    height: 46px;
}
    #header .app_bar_menu li a:hover{
        color: inherit;
        font-weight: inherit;
    }
    
    
    .app_bar.ad {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 95;
    background-color: #fff;
    border-top: 1px solid #eee;
    box-sizing: border-box;
    padding:10px 0;
}

.ad .app_bar_menu {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.ad .app_bar_menu img {
    display: block;
    margin: auto;
    max-width: 20px;
}

.ad .app_bar_menu li {
    position: relative;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.48px;
    text-align: center;
    color: #666;
    align-self: flex-end;
}

.ad .app_bar_menu li.active{
    color: var(--primary-color);
    font-weight: 500;
}

.ad .app_bar_menu li a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.ad .app_bar_menu li img{
    max-width: 22px;
}

.ad .app_bar1 img {
    padding-bottom: 6.2px;
}

.ad .app_bar2 img {
    padding-bottom: 5.6px;
}

.ad .app_bar3 img {
    padding-bottom: 5.3px;
}

.ad .app_bar4 img {
    padding-bottom: 14px;
}
    
    .field_area .field .item{
/*        padding-top: 15px;*/
    }
    
    .my_campaign_detail .heading_line01{
        font-size: 20px;
    }
    
    .my_campaign_detail .customBtn_p{
        font-size: 14px;
/*        width: 100%;*/
        padding: 11px ;
        background: var(--primary-color, #3ccbdb);
        text-align: center;
    }
    
    .my_campaign_detail .modal-layer .submitBtn{
        max-width: 220px;
        font-size: 15px;
    }
    .my_campaign_detail .modal-layer .submit_cont .submitBtn{
        flex: 1;
        max-width: none;
        height: 44px;
    }
    
    .my_campaign_detail .modal-layer .red_btn{
        height: 44px;
        border-radius: 5px;
    }
    .modal-layer .btn_area.submit_cont{
        padding-left: 0;
        padding-right: 0;
    }
    .my_campaign_detail .modal-layer .toggle_btn{
        
        font-size: 15px;
        border-radius: 4px;
/*        height: 44px;*/
        flex: 1;
        border-radius: 10px;
        padding: 15px 10px;
    }
    
    
    .my_campaign_detail .flexBox{
        flex-direction: column;
    }
    
    .my_campaign_detail .campaign_guide{
        order: 2;
    }
    
    .my_campaign_detail .top_area a{
        display: none;
    }   
    
    .my_campaign_detail .item{
        display: block;
        height: 62px;
        overflow: hidden;
        border-radius: 0;
    }
    
    .my_campaign_detail .item.show{
        height: auto;
    }
    .reservation:not(.item){
     padding-bottom: 20px;       
    }
    
    .my_campaign_detail .item .title{
        max-width: none;
        position: relative;
        margin-bottom: 10px;
    }
    
    .my_campaign_detail .item .title::before{
        content: "";
        display: inline-block;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%) rotate(180deg);
        width: 15px;
        height: 8px;
        background: url(../img/icon/tool/arrow_L.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    .my_campaign_detail .item.show .title::before{
        transform: translateY(-50%) rotate(0);
    }
    
    .my_campaign_detail .guide_desc .icon_box{
        justify-content: center;
    }
    
    .my_campaign_detail .guide_desc{
        padding-right: 0;
        font-size: 14px;
        width: 100%;
    }
    
    .my_campaign_detail .guide_desc .icon_box .icon_item{
        text-align: center;
        word-break: keep-all;
    }
    .my_campaign_detail .guide_desc .icon_box .icon_item p{
        line-height: 1.2;
        font-size: 14px;
        
    }
    
    .my_campaign_detail .top_area{
        padding: 20px 15px;
        display: none;
    }
    
    .my_campaign_detail .floating_section{
        box-shadow: none;
        max-width: none;
    }
    .my_campaign_detail .missionBlock{
        padding: 0;
        flex-direction: row;
    }
    
    .my_campaign_detail .sns_mission{
        padding: 0;
        padding-bottom: 20px;
    }
    .my_campaign_detail .mission_item{
        padding: 0;
        padding-bottom: 20px;
    }
    .my_campaign_detail .mission_item .title h1{
        font-size: 16px;
    }
    
    .my_campaign_detail .noti{
        padding: 0;
    }
    
    .my_campaign_detail #missionModal .modal-layer{
        margin: 0;
        max-width: none;
    }
    
    .my_campaign_detail .campaign_guide._MO{
        display: block;
    }
    
/*
    .my_campaign_detail .campaign_guide._MO .item{
        height: auto;
    }
    
    .my_campaign_detail .campaign_guide._MO .item.buy_link{
        display: block;
        text-align: center;
    }
    .my_campaign_detail .campaign_guide._MO .item.select_opt{
        display: block;
    }
    
    .my_campaign_detail .campaign_guide._MO .item .title::before{
        display: none;
    }
*/
    
    .my_campaign_detail .campaign_guide .buy_link{
        text-align: center;
/*        display: none;*/
    }
    .my_campaign_detail .campaign_guide .select_opt{
/*        display: none;*/
    }
    .my_campaign_detail .campaign_guide ._PC{
        display: none;   
    }
    
    .my_campaign_detail .item .title .heading_line02 img.q_mark{
        display: inline-block;
        width: 17px;
        height: 17px;
    }
    
    .my_campaign_detail .item .title .heading_line02{
        margin-bottom: 20px;
        font-size: 16px;
    }
    
    
    .my_campaign_detail .campaign_guide .tel{
        display: none;
    }
    .my_campaign_detail .campaign_guide .location{
        display: none;
    }
    .my_campaign_detail .campaign_guide .store_info{
        display: none;
    }
    
    .my_campaign_detail .campaign_guide._MO .tel{
        display: block;
        text-align: center;
    }
    .my_campaign_detail .campaign_guide._MO .location{
        display: block;
        text-align: center;
    }
    .my_campaign_detail .campaign_guide._MO .store_info{
        display: block;
    }
    
    .my_campaign_detail .campaign_guide._MO .buy{
        padding-bottom: 20px;
    }
    
    .my_campaign_detail .campaign_guide._PC{
        display: none;
    }
    
    .my_campaign_detail .floating_section .modal-layer .notice_{
        width: 100% !important
    }
    
    .customBtn_p{
        padding: 5px 15px;
        font-weight: 700;
        font-size: 12px;   
    }
    
    #campaign_list_wrap .empty_cp_btn div{
        min-width: auto;
    }
    
    .campaign__ .title .tool{
        align-items: center;
        gap:10px;
    }
    
    .my_campaign_detail .feedback_area{
        padding: 0;
    }
    
    .my_campaign_detail .guide_desc .product_detail_img_box .product_detail_img{
        height: auto;
    }
    .my_campaign_detail .guide_desc .product_detail_img_box button{
        display: none;
    }
    
    .profile_area.nav{
        padding: 15px;
    }
    
    .my_campaign_detail .item .guide_cont{
        align-items: flex-start;
    }
    .my_campaign_detail .item .guide_cont .mission_error{
        margin-right: 10px;
    }
    
}


@media (max-width:600px){
    .real_time_contents .rank_list:not(.best_rank_slide){
        
    }    
    .real_time_contents .rank_list:not(.best_rank_slide) .item{
        flex: initial;
        max-width: initial;
        width: 100%;
    }
    .real_time_contents .keyword_cont .keyword_info h2{
        max-width: 50px;
    }
    .real_time_contents .best_rank_swiper{
        max-width: 180px;
    }
}




.modal-dialog.message{
    overflow: hidden;
    z-index: 9999;
}
#modal-message{
    max-width: 1200px;
    width: 100%;
    padding: 0;
    overflow: hidden;
    max-height: 80dvh;
    height: 100%;
    background: var(--bg-gray-color);
    color: #666;
    display: block;
    border-radius: 15px;
    position: relative;
    font-size: 14px;
}
#modal-message.modal-content .closer{
    position: static;
    cursor: pointer;
    line-height: 1;
}
#modal-message .flex_box{
    display: flex;
    height: 100%;
}

#modal-message .flex_box > .left{
    flex: 1;
    border-right: 1px solid #E4E8EE;
    width: 380px;
}
#modal-message .flex_box .left .head{
    background: var(--primary-color);
    padding: 0 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
#modal-message .flex_box .left .head > div{
    cursor: pointer;
    position: relative;
    z-index: 999;
}
#modal-message .flex_box .left .tab{
    
}
#modal-message .flex_box .left .tab span{
    padding: 23px 22px;
    display: inline-block;
    line-height: 1;
}
#modal-message .flex_box .left .tab > span.on{
    background: #fff;
}
#modal-message .flex_box .left .selectBox{
    padding: 14px 20px;
    background: #fff;
}

#modal-message .flex_box .left .search_cont{
    padding: 14px 20px;
    background: #fff;
    
}
#modal-message .flex_box .left .search_cont input{
    padding-left: 50px;
    background-image: url(/skin/demo/img/icon/search_icon_black.svg);
    background-size: 20px 20px;
    background-position: 20px center;
    background-repeat: no-repeat;
    border-radius: 8px;
    border: 1px solid #EDEDED;
    font-size: 16px;
    height: 50px;
}

#modal-message .flex_box .left .selectBox .brand_select .select__{
    background-image: url(/skin/demo/img/icon/tool/select_down.svg);
    border: 1px solid #EDEDED;
    height: 50px;
}
#modal-message .flex_box .left .selectBox .brand_select .list__{
    width: 100%;    
    max-height:330px;
    overflow:auto;
}

#modal-message .flex_box .left .list{
    padding: 20px;
    border-top: 1px solid #E4E8EE;
    overflow-y: scroll;
    height: calc(100% - 70px - 78px);
    position: relative;
}
#modal-message .flex_box .empty_list{
    height: 100%;
    padding: 0;
    
}
#modal-message .flex_box .right .empty_list{
    padding-top: 61px;
}
#modal-message .flex_box .empty_list img{
    max-width: 87px;
}


#modal-message .flex_box .left .list .item{
    padding: 20px;
    border-bottom: 1px solid #E4E8EE;
    cursor: pointer;
}
#modal-message .flex_box .left .list .item.on{
    background: #fff;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    box-shadow: 0px 5px 8px 0px #20ABC61A;

}
#modal-message .flex_box .left .list .item .memo{
    display: flex;
    align-items: center;
    gap:5px;
    padding-bottom: 8px;
    font-size: 13px;
}
#modal-message .flex_box .left .list .item .user{
    display: flex;
    gap:20px;
}
#modal-message .flex_box .left .list .item .user .left{
    max-width: 60px;
    width: 100%;
    height: 60px;
}

#modal-message .flex_box .left .list .item .user img{
    max-width: 60px;
    max-height: 60px;
    border-radius: 50px;
    width: 100%;
    object-fit: cover;
}
#modal-message .flex_box .left .list .item .user .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#modal-message .flex_box .left .list .item .user .name{
    font-weight: 500;
    font-size: 16px;
    color: #222;
}
#modal-message .flex_box .left .list .item .user .text{
    font-weight: 400;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
}
#modal-message .flex_box .left .list .item .user .right{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

#modal-message .flex_box .left .list .item .user .right .bottom{
    display: flex;
    gap:5px;
    justify-content: space-between;
}
#modal-message .flex_box .left .list .item .user .right .bottom .noti{
    border-radius: 50px;
    color: #fff;
    background: var(--red-100-color);
    font-size: 12px;
    padding: 0 5px 0 5px;
    align-self: flex-start;
    text-align: center;
}


#modal-message .flex_box > .right{
    flex: 2;
    position: relative;
    background: var(--bg-gray-color);
}
#modal-message .flex_box .right .head {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    min-height: 69px;
    
}
#modal-message .flex_box .right .title{
    font-size: 24px;
    color: #222;
    font-weight: 500;
}
#modal-message .flex_box .right .receiver::before{
    content: "";
    position: absolute;
    border-top: 1px solid #E4E8EE;
    top: 0;
    left: 50%;
    width: calc(100% - 40px);
    transform: translateX(-50%);
}
#modal-message .flex_box .right .sender,#modal-message .flex_box .right .receiver{
    position: relative;
    background: #fff;
    display: flex;
    gap: 30px;
    padding: 20px ;
    align-items: center;
    line-height: 1;
}
#modal-message .flex_box .right .sender h3,#modal-message .flex_box .right .receiver h3{
    color: #222;
    font-size: 14px;
    min-width: 70px;
}
#modal-message .flex_box .right .receiver h3{
    align-self: flex-start;
}
#modal-message .flex_box .right .receiver .item{
    display: inline-flex;
    flex-direction: column;
    position: relative;
    gap: 5px;
/*    width: 60px;*/
}
#modal-message .flex_box .right .receiver .receiver_list{
    display: flex;
    gap: 15px;
    align-items: center;
    max-width: 660px;
    display: inline-flex;
    white-space: nowrap;
    overflow-x: auto;
    min-width: 200px;
}
#modal-message .flex_box .right .receiver .item .delete{
    position: absolute;
    right: 0;
    top: 0;
}
#modal-message .flex_box .right .receiver .item span{
    font-size: 14px;
    overflow: hidden;
/*    max-width: 60px;*/
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
#modal-message .flex_box .right .receiver .item img{
    max-width: 50px;
    max-height: 50px;
    border-radius: 50px;
}
#modal-message .flex_box .right .head .user_info{
    width: 60%
}
#modal-message .flex_box .right .head .user_info img{
    max-width: 50px;
    max-height: 50px;
    border-radius: 50px;
}
#modal-message .flex_box .right .head .user_info .user{
    display: flex;
    align-items: center;
    gap: 15px;
    line-height: 1;
}
#modal-message .flex_box .right .head .user_info .user .right{
    display: flex;
    flex-direction: column;
    gap:5px;
}

#modal-message .flex_box .right .head .user_info .user .name{
    font-size: 18px;
    color: #222;
    font-weight: 500;
}

#modal-message .flex_box .right .head .user_info .user .memo_cont{
    display: flex;
    align-items: center;
    gap:5px;
}
#modal-message .flex_box .right .head .user_info .user .memo_cont span.icon{
    line-height: 1;
    display: flex;
    align-items: center;
    cursor: pointer;
}
#modal-message .flex_box .right .img_noti{
    display: none;
}
#modal-message .flex_box .right .img_noti .close{
    align-self: flex-start;
    width: 10px;
    padding-top: 3px;
}

#modal-message .flex_box .right .cp_list_cont{
    background: #fff;
    padding: 0 20px;
    position: relative;
/*    box-shadow: 2px 9px 10px -8px #20ABC61A;*/
/*    border-radius: 0 0 10px 10px;*/
    border-bottom: 1px solid #E4E8EE;
}
#modal-message .flex_box .right .cp_list_cont .item{
    padding: 20px 0 ;
    border-top: 1px solid #E4E8EE;
    display: flex;
    gap:10px;
    align-items: center;
    position: relative;
}
#modal-message .flex_box .right .cp_list_cont .item > span{
    min-width: 82px;
}
#modal-message .flex_box .right .cp_list_cont .item .cp_info{
    display: flex;
    align-items: center;
    gap:25px;
}
#modal-message .flex_box .right .cp_list_cont .item .cp_info .status{
    display: flex;
    align-items: center;
    gap:10px;
}
#modal-message .flex_box .right .cp_list_cont .item .cp_info .label{
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 0 10px;
    border-radius: 15px;
}
#modal-message .flex_box .right .cp_list_cont .item .cp_info .date{
    color: var(--primary-color);
}
#modal-message .flex_box .right .cp_list_cont .item .cp_info .link{
    display: flex;
    align-items: center;
    cursor: pointer;
}

#modal-message .flex_box .right .cp_list_cont .more_item{
    height: 0;
    max-height: 230px;
    overflow: hidden;
}
#modal-message .flex_box .right .cp_list_cont .more_item .item{
    padding: 0;
    border-top: 0;
}
#modal-message .flex_box .right .cp_list_cont .more_item .item .cp_info .cp_name{
    flex:1;
}
#modal-message .flex_box .right .cp_list_cont .more_item .item .cp_info{
    padding: 10px 0;
    border-top: 1px solid #E4E8EE;
    width: 100%;
}
#modal-message .flex_box .right .cp_list_cont .more_item .item:first-child .cp_info{
    border-top: 0;
}
#modal-message .flex_box .right .cp_list_cont .more_item.on{
    height: 100%;
    overflow: auto;
    border-top: 1px solid #E4E8EE;
}
#modal-message .flex_box .right .cp_list_cont .open{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    padding: 10px 0 10px 10px;
    
}
#modal-message .flex_box .right .cp_list_cont .open img{
    transition: all .2s;
}

#modal-message .flex_box .right .cp_list_cont .open.on img{
    transform: rotate(-180deg);
}

#modal-message .flex_box .right .message_cont{
    height: calc(100% - 80px - 84px);
    padding: 20px;
    overflow-y: auto;
    background: var(--bg-gray-color);
    position: relative;
}
#modal-message .flex_box .right .message_cont.small{
    height: calc(100% - 61px - 80px - 84px);
}
#modal-message .error_msg{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#modal-message .flex_box .right .message_cont .receive_message{
    display: flex;
    gap: 10px;
    padding-bottom: 25px;
    justify-content: flex-start;
    align-items: center;
}
#modal-message .flex_box .right .message_cont .receive_message:last-child{
    padding-bottom: 0;
}
#modal-message .flex_box .right .message_cont .receive_message img{
    max-width: 40px;
    border-radius: 50px;
}
#modal-message .flex_box .right .message_cont .receive_message .text{
    background: #fff;
    padding: 15px;
    border-radius: 0 10px 10px 10px;
    white-space: pre-wrap;
    word-break: break-all;
}

#modal-message .flex_box .right .message_cont .receive_message .text.file{
    white-space: inherit;
    display: flex;
    align-items: center;
    gap: 10px;
    word-break: break-all;
}

#modal-message .flex_box .right .message_cont .receive_message .text.file > a{
    line-height: 1;
    padding: 8px;
    border-radius: 50px;
    background: #F8F8FA;
    width: 41px;
    border: none;
}
#modal-message .flex_box .right .message_cont .receive_message .text span{
    word-break: break-all;
}

#modal-message .flex_box .right .message_cont .receive_message .text svg{
    stroke: #666;
}
#modal-message .flex_box .right .message_cont .time{
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #888;
}

#modal-message .flex_box .right .message_cont .send_message.loading{
    height: 35px;
}
#modal-message .flex_box .right .message_cont .send_message.loading .loader{
    width: 25px;
    height: 25px;
    right: 0;
    left: initial;
    top: 0;
}
#modal-message .flex_box .right .message_cont .send_message{
    display: flex;
    gap:10px;
    justify-content: flex-end;
    padding-bottom: 25px;
    position: relative;
}
#modal-message .flex_box .right .message_cont .send_message:last-child{
    padding-bottom: 0;
}
#modal-message .flex_box .right .message_cont .send_message .time{
    text-align: right;
}
#modal-message .flex_box .right .message_cont .send_message .text{
    background: var(--primary-color);
    border-radius: 10px 0 10px 10px;
    padding: 15px;
    color: #fff;
    white-space: pre-wrap;
    word-break: break-all;
}

#modal-message .flex_box .right .message_cont .send_message .text.file{
    white-space: initial;
    display: flex;
    align-items: center;
    gap: 10px;
    word-break: break-all;
}

#modal-message .flex_box .right .message_cont .send_message .text.file a{
    line-height: 1;
    padding: 8px;
    border-radius: 50px;
    background: #F8F8FA;
    width: 41px;
    border: none;
}

#modal-message .flex_box .right .message_cont .send_message .text svg{
    stroke: var(--primary-color);
}


#modal-message .flex_box .right .message_cont .receive_message{
    display: flex;
    gap: 10px;
    padding-bottom: 25px;
}
#modal-message .flex_box .right .message_cont .receive_message:last-child{
    padding-bottom: 0;
}
#modal-message .flex_box .right .message_cont .receive_message img{
    width: 40px;
    height: 40px;
    border-radius: 50px;
    object-fit: cover;
}
#modal-message .flex_box .right .message_cont .receive_message .text{
    background: #fff;
    padding: 15px;
    border-radius: 0 10px 10px 10px;
    white-space: pre-wrap;
}

#modal-message .flex_box .right .message_cont .receive_message .text.file{
    white-space: initial;
    display: flex;
    align-items: center;
    gap: 10px;
    word-break: break-all;
}

#modal-message .flex_box .right .message_cont .receive_message .text.file > a{
    line-height: 1;
    padding: 8px;
    border-radius: 50px;
    background: #F8F8FA;
    width: 41px;
}

#modal-message .flex_box .right .message_cont .receive_message .text svg{
    stroke: #666;
}

#modal-message .flex_box .right .message_cont .send_message{
    display: flex;
    gap:5px;
    justify-content: flex-end;
    padding-bottom: 25px;
    position: relative;
    flex-direction: column;
    align-items: flex-end;
}

#modal-message .flex_box .right .message_cont .send_message .brand_name{
    font-weight: bold;
    font-size: 12px;
    color: #888;
}
#modal-message .flex_box .right .message_cont .send_message .bottom_box{
    display: flex;
    gap:10px;
    align-items: flex-end;
}

#modal-message .flex_box .right .message_cont .send_message:last-child{
    padding-bottom: 0;
}
#modal-message .flex_box .right .message_cont .send_message .time{
    text-align: right;
}
#modal-message .flex_box .right .message_cont .send_message .text{
    background: var(--primary-color);
    border-radius: 10px 0 10px 10px;
    padding: 15px;
    color: #fff;
    white-space: pre-wrap;
    word-break: break-all;
}
#modal-message .flex_box .right .message_cont .send_message .text img{
    max-height: 30px;
}
#modal-message .flex_box .right .message_cont .send_message .text.file{
    white-space: initial;
    display: flex;
    align-items: center;
    gap: 10px;
    word-break: break-all;
}

#modal-message .flex_box .right .message_cont .send_message .text.file a{
    line-height: 1;
    padding: 8px;
    border-radius: 50px;
    background: #F8F8FA;
    width: 41px;
}

#modal-message .flex_box .right .message_cont .send_message .text svg{
    stroke: var(--primary-color);
}



#modal-message .flex_box .right .message_cont .send_message .text.function_text{
    background: #fff;
    color: #222;
    white-space: normal;
    display: flex;
    flex-direction: column;
    gap:20px;
    max-width: 400px;
    width: 100%;
}
#modal-message .flex_box .right .message_cont .send_message .text.function_text .title{
    font-size: 14px;
}

#modal-message .flex_box .right .message_cont .send_message .text.function_text .person_type{
    display:flex;
    align-items: center;
    gap:30px;
}
#modal-message .flex_box .right .message_cont .send_message .text.function_text .person_type .checkbox_{
}
#modal-message .flex_box .right .message_cont .send_message .text.function_text .reason_text{
    border: 1px solid #E4E8EE;
    border-radius: 5px;
    padding: 8px;
    min-height: 70px;
}

#modal-message .flex_box .right .message_cont .send_message .text.function_text .request_datetime{
    display: flex;
    justify-content: space-evenly;
    gap:30px;
    border: 1px solid #E4E8EE;
    border-radius: 5px;
    padding: 8px 20px;
}

#modal-message .flex_box .right .message_cont .send_message .text.function_text .noti{
    border-radius: 5px;
    padding: 8px;
    background: #F4F5F9;
    color: #666;
}

#modal-message .flex_box .right .message_cont .send_message .text.function_text .btn_wrap{
    display: flex;
    gap:20px;
}
#modal-message .flex_box .right .message_cont .send_message .text.function_text .btn_wrap button{
    flex: 1;
    padding: 10px;
    line-height: 1;
}

#modal-message .flex_box .right .message_cont .receive_message .text.function_text{
    background: #fff;
    color: #222;
    white-space: normal;
    display: flex;
    flex-direction: column;
    gap:20px;
    max-width: 400px;
    width: 100%;
}
#modal-message .flex_box .right .message_cont .receive_message .text.function_text .title{
    font-size: 14px;
}

#modal-message .flex_box .right .message_cont .receive_message .text.function_text .person_type{
    display:flex;
    align-items: center;
    gap:30px;
}
#modal-message .flex_box .right .message_cont .receive_message .text.function_text .person_type .checkbox_{
}
#modal-message .flex_box .right .message_cont .receive_message .text.function_text .reason_text{
    border: 1px solid #E4E8EE;
    border-radius: 5px;
    padding: 8px;
    min-height: 70px;
}

#modal-message .flex_box .right .message_cont .receive_message .text.function_text .request_datetime{
    display: flex;
    justify-content: space-evenly;
    gap:30px;
    border: 1px solid #E4E8EE;
    border-radius: 5px;
    padding: 8px 20px;
}

#modal-message .flex_box .right .message_cont .receive_message .text.function_text .noti{
    border-radius: 5px;
    padding: 8px;
    background: #F4F5F9;
    color: #666;
}

#modal-message .flex_box .right .message_cont .receive_message .text.function_text .btn_wrap{
    display: flex;
    gap:20px;
}
#modal-message .flex_box .right .message_cont .receive_message .text.function_text .btn_wrap button{
    flex: 1;
    padding: 10px;
    line-height: 1;
    font-size: 14px;
}


#modal-message .flex_box .right .message_cont .date_chip{
    background: #D2D2DF;
    max-width: fit-content;
    padding: 6px 20px;
    border-radius: 50px;
    color: #fff;  
    margin: 0 auto 30px;
    max-width: fit-content;
}


#modal-message .flex_box .right .typing_cont{
    position: absolute;
    bottom: 0;
    background: #fff;
    padding: 15px 20px;
    width: 100%;
    display: flex;
    gap:10px;
    align-items: center;
    z-index: 99999999;
    max-height: 250px;
}
#modal-message .flex_box .right .typing_cont textarea{
    flex: 1;
    padding: 0;
    line-height: 1.5;
    border: none;
    height: 26px;
    font-size: 15px;
    max-height: 230px;
    overflow-y: auto;
}
#modal-message .flex_box .right .typing_cont .file{
    padding: 15px;
    line-height: 1;
    align-self: flex-start;
    background: #fff;
    border: none;
}
#modal-message .flex_box .right .typing_cont .send_btn{
    background: var(--primary-color);
    color: #fff;
    border-radius: 4px;
    padding: 16px 20px;
    align-self: flex-start;
    font-size: 14px;
    font-weight: 500;
}


#modal-message.modal-content .memo_cont input{
     height: auto;
    font-size: 14px;
    padding: 5px 10px;
}

    #modal-message .add_message_btn{
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    background: #E4E8EE;
    margin-bottom: 20px;
    cursor: pointer;
}






#modal-message .flex_box .left .list::-webkit-scrollbar,
#modal-message .flex_box .right .receiver .receiver_list::-webkit-scrollbar,
#modal-message .flex_box .message_cont::-webkit-scrollbar,
#modal-message .flex_box .right .cp_list_cont .more_item::-webkit-scrollbar,
#modal-message .flex_box .left .selectBox .brand_select .list__::-webkit-scrollbar{
        width: 15px;
        background-color: transparent;
    }
#modal-message .flex_box .left .list::-webkit-scrollbar-thumb,
#modal-message .flex_box .right .receiver .receiver_list::-webkit-scrollbar-thumb,
#modal-message .flex_box .message_cont::-webkit-scrollbar-thumb,
#modal-message .flex_box .right .cp_list_cont .more_item::-webkit-scrollbar-thumb,
#modal-message .flex_box .left .selectBox .brand_select .list__::-webkit-scrollbar-thumb{
        background-color: #D0D2D7;
        border: 5px solid #fff;
        border-radius: 15px;
        cursor: pointer;
        opacity: 0;
    }
#modal-message .flex_box .left .list::-webkit-scrollbar-track,
#modal-message .flex_box .right .receiver .receiver_list::-webkit-scrollbar-track,
#modal-message .flex_box .message_cont::-webkit-scrollbar-track,
#modal-message .flex_box .right .cp_list_cont .more_item::-webkit-scrollbar-track,
#modal-message .flex_box .left .selectBox .brand_select .list__::-webkit-scrollbar-track{
        background-color: transparent;
        opacity: 0;
    }

#modal-message .mobile_head{
    display: none;
}


@media(max-width:800px){
    #modal-message{
        max-height: none;
        border-radius: 0;
    }
    #modal-message .mo_title{
        display: block;
    }
    #modal-message.on .mo_title{
        display: none;
    }
    #modal-message .back{
        display: none;
    }
    #modal-message.on .back{
        display: block;
    }
    
    #modal-message .mobile_head{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        font-size: 18px;
        padding: 12px 20px;
        color: #222;
        font-weight: 500;
        border-bottom: 1px solid #E4E8EE;
    }
    #modal-message .mobile_head .closer img{
        max-height: 18px;
        width: 18px;
    }
    #modal-message .flex_box{
        height: calc(100dvh - 72px);    
    }
    
    #modal-message .flex_box > .left{
        flex: none;
        width: 100dvw;
        transition: width .2s;
    }
    #modal-message .flex_box .left .list{
        padding: 0 20px;
        height :calc(100% - 105px)
    }
    
    #modal-message .flex_box .left .list .item{
        padding: 20px 0 ;
    }
    #modal-message .flex_box .left .list .item.on{
    background: none;
     border: none;
     border-radius: 0px; 
     box-shadow: none;
        
    }
    
    
  #modal-message .flex_box > .right{
        flex: none;
        width: 0dvw;
        display: none;
        height: calc(100dvh - 52px);
    }
    #modal-message.on .flex_box > .right{
        display: block;
        width: 100dvw;
    }
    #modal-message.on .flex_box > .left{
        width: 0;
        opacity: 0;
    }   
    #modal-message.on .flex_box > .right .closer{
        display: none;
    }
    
    #modal-message .flex_box .right .typing_cont{
    padding: 11px 15px;
    
}

#modal-message .flex_box .right .typing_cont .file{
    padding: 10px;
}
#modal-message .flex_box .right .typing_cont .send_btn{
    padding: 11px 15px;
}
    
    #modal-message .flex_box .right .message_cont{
        height: calc(100% - 80px - 62px) ;
        padding-right: 0;
    }
    #modal-message .flex_box .right .message_cont.small{
        height: calc(100% - 61px - 80px - 62px);
    }
    
    #modal-message .flex_box .left .tab span{
        padding: 15px;
        
    }
    #modal-message .flex_box .left .tab span img{
        max-width: 25px;
    }
    #modal-message .flex_box .left .head > div img{
        max-height: 30px;
    }
    
    #modal-message .flex_box .left .selectBox{
        padding: 12px 20px;   
    }
    
    #modal-message .flex_box .left .selectBox .brand_select .select__{
        height: 40px;
    }
    #modal-message .flex_box .left .search_cont input{
        height: 40px;
    }
    #modal-message .flex_box .left .search_cont{
        padding: 12px 20px;
    }
    #modal-message .flex_box .left .search_cont input{
        background-size: 15px;
        padding-left: 40px;
        background-position: 14px center;
    }
    
    #modal-message .flex_box .right .head{
        padding: 10px 20px;
    }
    
    #modal-message .flex_box .right .message_cont .date_chip{
        margin-bottom: 20px;
    }
    
    #modal-message .flex_box .right .img_noti{
        display: none;
        background: #B8EDF4;
        padding: 10px 20px;
        display: none;
        gap: 10px;
        align-items: center;
    }
    
    #modal-message .flex_box .right .message_cont .send_message .text.function_text .person_type{
        gap:10px;
    }


    #modal-message .flex_box .right .head .user_info{
        width: 100%;
    }

    
}


/* 로딩 스피너 
.loading_wait{
    display: none;
    justify-content: center;
    align-items: center;
    gap:20px;
}
/* // 로딩 스피너 */
@media (max-width: 800px) {
    .mobile_none {
        display: none !important;
    }
    
    [data-btn-type="floating"]{
        right: 14px;
        bottom: 150px;
        width: 50px;
        height: 50px;
        padding: 6px;
    }
    [data-btn-type="floating"] span{
        font-size: 12px;
        font-weight: 400;
        line-height: 1.3;
    }
    [data-btn-type="floating"] span svg{
        width: 14px;
        height: 14px;
    }
    
    [data-btn-type="floating"] .message_count{
        width: 16px;
        height: 16px;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
}



/* 알림 설정 페이지 */

.notice_set{}
.notice_set .kakao_cont{
    padding:0 ;
}
.notice_set .kakao_cont h4{
    display: flex;
    align-items: center;
    gap:5px;
    padding-bottom: 20px;
}
.notice_set .kakao_cont .desc{
    font-size: 16px;
    color: #777;
}
.notice_set .kakao_cont .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--primary-color);
    padding: 20px;
    border-radius: 20px;
    gap:20px;
}
.notice_set .kakao_cont .item_cont{
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.notice_set .kakao_cont .item .title{
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 5px;
}
.notice_set .kakao_cont .item .desc{
    font-size: 16px;
    color: #777;
}

.notice_set .term{
    display: flex;
    align-items: center;
    gap:20px;
}
.notice_set .term a{
    color: var(--primary-color);
    font-size: 14px;
    border-bottom: 1px solid var(--primary-color);
}

label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

[role="switch"] {
    appearance: none;
    position: relative;
    border-radius: 30px;
    width: 53px;
    height: 30px;;
    cursor: pointer;
    background: #B0B0B0;
    border: none;
}

[role="switch"]::before {
  content: "";
  position: absolute;
  left: 4px;
    top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  transition: left 250ms linear;
    transform: translate(0, -50%);
}

[role="switch"]:checked {
  background-color: var(--primary-color);
/*  border-color: tomato;*/
}
[role="switch"]:checked:disabled:before{
    background-color: #fff;
}

[role="switch"]:checked::before {
  background-color: white;
  left: calc(100% - 23px);
}

[role="switch"]:disabled {
  border-color: lightgray;
  opacity: 0.7;
  cursor: not-allowed;
}
[role="switch"]:checked:disabled{
    cursor: pointer;
}

[role="switch"]:disabled:before {
  background-color: lightgray;
}

[role="switch"]:disabled + span {
  opacity: 0.7;
  cursor: not-allowed;
}

[role="switch"]:focus {
  border-color: var(--primary-color);
}

@media(max-width:800px){
    .notice_set .kakao_cont{
        padding: 0;
    }
    .notice_set .kakao_cont .item .title{
        font-size: 16px;
    }
    .notice_set .kakao_cont .desc{
        font-size: 14px;
    }
    .notice_set .kakao_cont .item .desc{
        font-size: 14px;
    }
    .notice_set .term{
        gap:10px;
        flex-direction: column;
        align-items: flex-start;
    }
    .notice_set .term a{
        margin-left: auto;
    }
}



/* 알림 설정  */




/* 블로그 리뷰 검수 모달 창 */

/*
#mission_guide_check_modal{
        width: 90dvw;
        max-width: 600px;
        padding: 30px;
        box-shadow: none;
        border: 1px solid #E4E8EE;
        border-radius: 30px;
    }
*/
#mission_guide_check_modal .modal-layer {
    width: 90dvw;
    max-width: 582px;
    max-height: 90dvh;
    height: 100%;
    overflow-y: hidden;
}

#mission_guide_check_modal .content::-webkit-scrollbar {
    width: 15px;
    background-color: transparent;
}

#mission_guide_check_modal .content::-webkit-scrollbar-thumb {
    background-color: #9499B4;
    border: 5px solid #fff;
    border-radius: 15px;
    cursor: pointer;
    opacity: 0;
}

#mission_guide_check_modal .content::-webkit-scrollbar-track {
    background-color: transparent;
    opacity: 0;
}

    #mission_guide_check_modal h1{
        font-size: 25px;
        font-weight: 700;
        margin: 0;
        line-height: 1;
    }
    #mission_guide_check_modal .head{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 20px 30px;
        border-bottom: 1px solid #888;
        position: relative;
        gap:20px;
    }
    #mission_guide_check_modal .head .check_noti {
        color: var(--primary-color);
        border: 1px solid var(--primary-color);
        padding: 5px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
        margin-top: 1px;
        cursor: pointer;
    }
    #mission_guide_check_modal .head .closer{
        cursor: pointer;
        background-image: none;
        width: auto;
        height: auto;
        top: 0;
        right: 0;
        margin: 0;
        top: 50%;
        right: 30px;
        transform: translateY(-50%);
    }
    #mission_guide_check_modal .content{
        padding-top: 30px;
        height: calc(100% - 70px);
        overflow-y: auto;
    }
    #mission_guide_check_modal .content .table_head{
        display: flex;
        border-bottom: 1px solid #888;
        
    }
    #mission_guide_check_modal .content .table_head div{
        font-size: 20px;
        font-weight: 500;
        padding: 15px 0;
        flex: 1;
        text-align: center;
    }
    #mission_guide_check_modal .content .table_head div:first-child{
         border-right: 1px solid #222;   
    }
    #mission_guide_check_modal .content .table_body{}
    #mission_guide_check_modal .content .table_body .item{
        display: flex;
        border-bottom: 1px solid #888;
    }
    #mission_guide_check_modal .content .table_body .item div:first-child{
        border-right: 1px solid #888;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #mission_guide_check_modal .content .table_body .item div:first-child img{
        margin-right: 5px;        
    }
    #mission_guide_check_modal .content .table_body .item div{
        font-weight: 500;
        padding: 15px 0;
        flex: 1;
        text-align: center;
        font-size: 16px;
    }
    #mission_guide_check_modal .content .table_body .item .guide,
    #mission_guide_check_modal .content .table_body .item .result{
        font-weight: bold;
        padding-left: 3px;
    }

#mission_guide_check_modal .content .sponsor_cont{
    padding: 30px 10px;
}
#mission_guide_check_modal .content .sponsor_cont p{
    padding-bottom: 15px;
}

#mission_guide_check_modal .content .text_cont{}
#mission_guide_check_modal .content .text_cont textarea{
    border-color: #3ccbdb;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    height: 130px;
}
#mission_guide_check_modal .content .text_cont textarea::placeholder{
    color: var(--placeholder-color);
}
#mission_guide_check_modal .content .text_cont .noti{}


#mission_guide_check_modal .content .btn_area{
    padding-top: 50px;
    margin: 0;
    gap:30px;
}
#mission_guide_check_modal .content .btn_area button{
    max-width: 133px;
    padding: 13px 0 ;
    width: 100%;
    line-height: 1;
    border-radius: 5px;
    font-weight: 500;
    font-size: 14px;
}
#mission_guide_check_modal .content .btn_area .whiteBtn{
    position: static;
    background-image: none;
    margin: 0;
    height: auto;
}
#mission_guide_check_modal .content .btn_area .customBtn_p{}
    
    .btn_area{
        text-align: center;
        padding-top: 20px;
    }
    .result_tag{
        border-radius: 5px;
        border: 1px solid;
        font-size: 14px;
        font-weight: 500;
        padding: 3px;
        width: fit-content;
        margin: 5px auto 0;
    }
    td .result_tag{
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }
    .result_tag.error{
        border-color: #FF8B8B;
        color: #FF8B8B;
    }
    .result_tag.success{
        border-color: #3ccbdb;
        color: #3ccbdb;
    }

#mission_guide_check_modal input[type="checkbox"]{
        display: none;
      }
#mission_guide_check_modal input[type="checkbox"] + label{
    display: inline-block;
    position: relative;
    left: 0;
    top: 0;
    padding-left: 35px;
    color: #000;
}
#mission_guide_check_modal input[type="checkbox"] + label::after{
    content: '';
    display: inline-block;
    position: absolute;
    background-image: url(../img/icon/tool/check.svg);
    background-repeat: no-repeat;
    background-size: cover;
    left: 0;
    width: 25px;
    height: 25px;
    top: 50%;
    transform: translateY(-50%);
}

#mission_guide_check_modal input[type="checkbox"]:checked + label::after{
        background-image: url(../img/icon/tool/checked.svg);
  }



@media(max-width:800px){
    #mission_guide_check_modal h1{
        font-size: 20px;
    }
    #mission_guide_check_modal .head .check_noti{
        font-size: 16px;
        padding: 3px;
    }
    
    #mission_guide_check_modal .content .table_head div{
        font-size: 16px;
    }
    #mission_guide_check_modal .content .table_body .item div{
        font-size: 14px;
    }
    .result_tag{
        font-size: 12px;
    }
    
    #mission_guide_check_modal .content .sponsor_cont{
        font-size: 14px;
    }
    #mission_guide_check_modal .content .text_cont textarea{
        font-size: 14px;
    }
    #mission_guide_check_modal .content .text_cont .noti{
        font-size: 14px;
    }
    #mission_guide_check_modal .content .table_body .item div:first-child{
        font-weight: 400;
    }
    
    #mission_guide_check_modal .content .text_cont textarea{
        height: 107px;
    }
    #mission_guide_check_modal .content .table_body .item .guide, #mission_guide_check_modal .content .table_body .item .result{
        font-weight: 500;
    }
}

/* 검수 기준 팝업 */
#mission_inspection_standards_modal .modal-layer{
    max-width: 390px;
}

#mission_inspection_standards_modal .head .closer{
        cursor: pointer;
        background-image: none;
        width: auto;
        height: auto;
        top: 0;
        right: 0;
        margin: 0;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

#mission_inspection_standards_modal .head{
    position: relative;
    border-bottom: 1px solid #222;
    padding: 0;
    margin: 0 20px;
    padding: 30px 0 20px;
}
#mission_inspection_standards_modal .content{
    display: flex;
    flex-direction: column;
    gap:30px;
    padding: 30px;
}
#mission_inspection_standards_modal .item{
    font-size: 14px;
    
}
#mission_inspection_standards_modal .item h2{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 0 10px 0;
    line-height: 1;
    font-weight: 500;
}
#mission_inspection_standards_modal .item .desc{
    display: flex;
    gap:8px;
    padding-bottom: 5px;
}
#mission_inspection_standards_modal .item .desc:last-child{
    padding-bottom: 0;
}
#mission_inspection_standards_modal .item .depth{
    position: relative;
    padding-left: 20px;
    display: inline-block;
    
}
#mission_inspection_standards_modal .item .depth::after{
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #222;
    position: absolute;
    top: 7px;
    left: 10px;
    font-size: 12px;
    
}
#mission_inspection_standards_modal .btn_area{
    margin: 0;
    padding: 0;
    gap:10px;
}
#mission_inspection_standards_modal .btn_area button{
    font-size: 16px;
    flex: 1;
}

#mission_inspection_standards_modal .btn_area .mission_submit_btn{
    border: none;
}
#mission_inspection_standards_modal .btn_area .closer{
    position: static;
    background: none;
    width: 131px;
    height: auto;
    padding: 13px;
    line-height: 1;
    border-radius: 5px;
    margin: 0;
}


@media(max-width:800px){
    .guide_background{
        padding: 20px 15px;
    }
    .guide_area .info_box div:first-child{
        font-size: 14px;
    }
    .guide_area .info_box div:last-child{
        padding: 10px;
        font-size: 14px;
    }
    .guide_area .info_box .desc{
        font-size: 12px;
    }
    .guide_area .icon_box .icon_item{
        font-size: 14px;
    }
    .my_campaign_detail .guide_desc .info_box div:last-child{
        font-size: 14px;
    }
    
    #mission_inspection_standards_modal .btn_area button{
        font-size: 14px;
        padding: 13px;
    }
    
}


.mission_item .air-datepicker-cell.-year-.-other-decade-, .mission_item .air-datepicker-cell.-day-.-other-month-{
    color: #222;
}


#noticeModal .modal-layer{
    max-width: 400px;
    padding: 30px 25px;
}
#noticeModal .modal-layer .content{
    padding: 0;
}
#noticeModal .modal-layer .btn_wrap{
    width: 100%;
    padding-top: 30px;
}
#noticeModal .modal-layer .btn_wrap button{
    width: 100%;
    padding: 10px;
    text-align: center;
    border: none;
    
}

/* 연장 요청 모달 */


.request_modal .modal-layer{
    max-width: 600px;
}

.request_modal .modal-layer .head{
    position: relative;
}

.request_modal .modal-layer .head h2{
    font-size: 20px;
}
.request_modal .modal-layer .head .closer{
    top: 50%;
    transform: translateY(-50%);
    background-image: url(../img/icon/tool/close.svg);
    margin: 0;
    width: 20px;
    height: 20px;
    right: 30px;
}

.request_modal .modal-layer .content{
    padding: 30px;
}

.request_modal .modal-layer .field label{
    width: auto;    
    gap:0;
    color: #666;
    font-weight: 400;
}
.request_modal .field_area{
    display: flex;
    gap:20px;
    flex-direction: column;
    justify-items: center;
}
.request_modal .field_area .field{
    gap:40px;
}

.request_modal textarea{
    border: 1px solid var(--primary-color);
    padding: 10px;
    width: 100%;
    overflow-y: auto;
    min-height: 100px;
    border-radius: 5px;
}
#visit_date_edit_modal.request_modal .date_area{
    display: block;
    width: 100%;
    border: none;
}
.request_modal .date_area{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    position: relative;
}

.request_modal .desc{
    
}
.request_modal .desc > div.text{
    padding-bottom: 20px;
    padding-top: 30px;
}
.request_modal .desc .noti{
    background: #F4F5F9;
    padding: 10px;
    color: #666;
    display: flex;
    flex-direction: column;
    gap: 20px;
    line-height: 1;
    border-radius: 5px;
}
#review_cancel_modal.request_modal .desc .noti{
    margin-top: 20px;
}

.request_modal .desc .noti h3{
    font-weight: 500;
    font-size: 16px;
}

.request_modal .desc .noti p{
    font-weight: 400;
    font-size: 14px;
     line-height: 1.2;   
}

.request_modal .modal-layer .btn_area{
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:20px;
    padding: 0 30px;
    padding-bottom: 30px;
}
.request_modal .modal-layer .btn_area button{
    flex: 1;
    height: auto;
    width: auto;
    line-height: 1;
    padding: 10px 0;
    border-radius: 5px;
    font-size: 16px;
}
.request_modal .modal-layer .btn_area .closer{
    position: static;
    background-image: none;
    margin: 0;
}

.request_modal #req_datetime{
    width: auto;
    border: none;
    text-align: center;
    padding: 0;
    cursor: pointer;
}

#deadline_extension_modal.request_modal #req_datetime{
    width: 100%;
    position: absolute;
    border: 1px solid #3ccbdb;
    border-radius: 5px;
    text-indent: 30px;
}
#deadline_extension_modal.request_modal .date_area{
    border: none;
}

#deadline_extension_modal.request_modal .date_area > div{
    position: absolute;
    z-index: 2;
    left: calc(50% - 90px);
    transform: translateX(-50%);  
}

#deadline_extension_modal.request_modal .date_area > svg{
    position: absolute;
    z-index: 2;
    right: calc(50% - 100px);
    transform: translateX(50%);
}

body .air-datepicker:not(.-custom-position-){
    
    transform: translate(50%, 0);
}

body .air-datepicker.-active-:not(.-custom-position-){
    transform: translate(50%, 0);
}

body #visit_date_edit_modal .air-datepicker:not(.-custom-position-){
    width: 100%;
    transform: translate(0, 0);
}

body #visit_date_edit_modal .air-datepicker.-active-:not(.-custom-position-){
    transform: translate(0, 0);
}

body .mission_item .air-datepicker:not(.-custom-position-){
    transform: translate(0, 0);
}

@media (max-width:460px){
    
     body .air-datepicker:not(.-custom-position-){
         
        transform: translate(10%, 0);
    }
    
    body .air-datepicker.-active-:not(.-custom-position-){
        transform: translate(10%, 0);
    } 
    
    

}



#mission_confirm_modal .modal-layer{
    max-width: 520px;
}

#mission_confirm_modal .modal-layer .head{
    position: relative;
}

#mission_confirm_modal .modal-layer .closer{
    background-image: url(../img/icon/tool/close.svg);
    right: 30px;
    top: 50%;
    margin: 0;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
}

#mission_confirm_modal .modal-layer .content{
    padding: 30px;
}

#mission_confirm_modal .modal-layer .btn_wrap{
    padding: 0 30px;
    padding-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:20px;
}



#mission_confirm_modal .modal-layer .btn_wrap button{
    flex: 1;
    padding: 10px ;
    border-radius: 5px;
    line-height: 1;
}

#mission_confirm_modal .modal-layer .btn_wrap button.fill_btn{
}


@media(max-width:800px){
    #mission_confirm_modal .modal-layer .closer{
        top: 27px;
        width: 14px;
        height: 14px;
    }
    #mission_confirm_modal .modal-layer .btn_area{
        margin-top: 30px;
    }
    
    .request_modal .modal-layer .btn_area button{
        font-size: 14px;
    }
    .request_modal .modal-layer .content{
        padding: 20px;
        font-size: 14px;
        max-height: 70dvh;
        overflow-y: auto;
    }
    
    .request_modal .modal-layer .field label{
        font-size: 14px;
    }
    .modal-layer .btn_area.submit_cont.test button{
        height: 40px;
        font-size: 14px;
    }
    .my_campaign_detail input[type="checkbox"] + label{
        font-size: 14px;
    }
    
    .request_modal .modal-layer .head h2{
        font-size: 18px;
    }
    
    
}


.custom-time-select {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    border-top: 1px solid #eee;
}

.custom-time-select select {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}


.xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th{
    background: none;
}

#mission_guide .modal-layer{
    max-width: 600px;
}

#mission_guide .content{
    padding: 30px 30px 20px 30px;
    overflow: auto;
}

#mission_guide .content .img_cont{
    background-color: #ECFCFF;
    border-radius: 25px;
    padding: 35px 24.5px;
    text-align: center;
}
#mission_guide .content > .img_cont img{
    width: 100%;
/*    max-width: 360px;*/
    max-height: 550px;
    height: 100%;
    object-fit: contain;
    
}

#mission_guide .btn_wrap{
    display: flex;
    justify-content: space-between;
    gap:10px;
    padding: 0 30px;
    padding-bottom: 30px;
}

#mission_guide .btn_wrap button{
    flex:1;
    padding: 10px 0 ;
    max-width: initial;
}


#option_check_modal .info_box > div:last-child{
    font-size: 16px;
    font-weight: 500;
    color: #454D56;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    background: #fff;
    padding: 15px;
}

#option_check_modal .info_box div:first-child{
    margin-bottom: 10px;
    flex: 1;
    color: #454D56;
    display: flex;
    align-items: center;
    gap: 10px;
}


#option_check_modal .noti{
    margin-top: 15px;
}
#option_check_modal .desc > .header{
    padding-bottom: 15px;
}



#option_check_modal .opt_info span{
    padding: 4px 10px;
    border-radius: 50px;
    border: 1px solid #222;
    font-size: 12px;
    color: #222;
    display: inline-block;
    margin-bottom: 10px;
}
#option_check_modal .opt_info span.on{
    border: 1px solid #904AAC;
    color: #904AAC;
}



#visit_check_modal .content{
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

#visit_check_modal .desc:nth-child(2){
    padding: 10px 0 ;
}


#apply_submit_btn{
    width: 100%;
    line-height: 1;
    padding: 12px 0;
    border-radius: 5px;
    height: auto;
    font-weight: 500;
}

#apply .checkbox_ input + label:before{
/*    width: 30px;*/
/*    margin-top: 4px;*/
}


#apply .modal-layer .check_wrap .checkbox_ label{
    
}

.field.agree_cont{
    margin-top: 20px;
    align-items: flex-start;
    background: transparent;
    padding: 0;
    gap:10px;
}
.field.agree_cont label{
    padding-bottom: 10px;
    color: #222;
    font-size: 16px;
}
.field.agree_cont .checkbox_ label{
    font-size: 14px;
}
#rv_agree{
    min-height: auto;
}

#apply .modal-layer .check_wrap .checkbox_ label{
    align-items: flex-start;
}










.qualified{
    font-size: 12px;
    display: flex;
    gap:5px;
    align-items: center;
    position: relative;
    padding-top: 8px;
}



.qualified .qualified_title{
    color: var(--primary-color);
}
.qualified > .desc{
    flex: 1;
    overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
    margin: 0;
}

.qualified_tooltip{
    display: none;
    position: absolute;
    left: 0;
    bottom: 20px;
    padding: 15px;
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--box-shadow_black);
    width: 450px;
    z-index: 1;
}
.qualified .qualified_tooltip .desc{
    flex: 1;
    margin: 0;
    
}
.qualified:hover .qualified_tooltip{
    display: flex;
    gap:5px;
}


.qualified_box{
    padding-bottom: 20px;
}


@media (max-width:800px){
    .qualified{
        padding-top: 0;
    }
    .qualified_tooltip{
        width: calc(100vw - 30px);
    }
    li:nth-child(even) .qualified_tooltip{
        left: initial;
        right: 0;
        
    }
}



.ui-modal-layer .tip_section{
    padding-top: 5px;
    font-size: 14px;
    color: #888;
}
.ui-modal-layer .tip_section .title{
    color: #DA2872;
}

@media (max-width:800px){
    .ui-modal-layer .tip_section{
        font-size: 10px;
    }
    .visit_info_section{
        font-size: 12px;
    }
}




.delivery_section{
    display: flex;
    flex-direction: column;
    gap: 10px;    
    padding-top: 10px;
}
.delivery_section h3{
    font-weight: 500;
    color: #222;
    padding-left: 5px;
}

.delivery_save{
    padding-top: 10px;
}


.visit_info_section{
    padding-top: 10px;
    
}

.closed_campaign_cancel_btn_wrap{
    text-align: right;
    padding-bottom: 20px;
}



.listTab_area.wait{
    margin-top: 50px;
    margin-bottom: 20px;
    padding: 0;
    border-radius: 10px;
    box-shadow: 0px 10px 10px rgba(212, 212, 223, 0.2);
    
}
.listTab_area.wait ul li + li{
    margin-left: 0;
}
.listTab_area.wait a{
    min-width: 150px;
}

.list_area .imgBox button{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    border-radius: 8px;
}
.listTab_area.wait ul li a{
    color: #888;
    font-weight: 500;
}
.listTab_area.wait ul li.active a{
    color: #222;
    font-weight: 600;
}

.infl_grade .item .result{
    font-size: 16px;
    font-weight: 400;
}
.infl_grade .item .value{
    font-size: 20px;
    font-weight: 500;
}

@media (max-width:800px){
    .aside_section .inner > .content.my_campaign{
        background-color: #f4f5f9;
    }
    .listTab_area.wait{
        margin-top: 0;
        box-shadow: none;
        border-bottom: none;
        border-radius: 0;
        margin-bottom: 14px;
    }
    .listTab_area.wait a{
        min-width: auto;
        font-size: 16px;
        padding: 10px;
        font-weight: 300;
    }
    .listTab_area.wait .tab_cont{
        font-size: 12px;
        background: #fff;
    }
    .listTab_area.wait ul li a{
        font-size: 16px;
        font-weight: 300;
    }
    .listTab_area.wait ul li.active a {
        font-weight: 500;
    }
    
    .listTab_area.wait ~ .list_area.col-03{
        background: #fff;
        padding: 15px;
    }
    .listTab_area.wait ~ .list_area.col-03 .empty{
        margin: 0;
        padding: 60px 0 40px;
    }
    .closed_campaign_cancel_btn_wrap{
        padding-bottom: 14px;
        padding-right: 15px;
    }
    .closed_campaign_cancel_btn_wrap button{
        font-size: 12px;
        background-color: #fff;
    }
    
    
    body:has(.my_page){
        background-color: var(--bg-gray);
    }
    
    .profile_card .info_ > div h5{
        margin: 0;
        font-size: 12px;
        font-weight: 400;
    }
    .profile_card .info_ .email{
        font-size: 12px;
        font-weight: 400;
        color: #222;
    }
    

    .infl_grade_wrap{
        display: flex;
        flex-direction: column;
        gap:10px;
    }
    
    .infl_grade{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
        background-color: #ECF9FB;
        border-radius: var(--border-round-S);
        padding: 5px;
        grid-row-gap: 10px;
    }
    .repeat-3 .infl_grade{
        grid-template-columns: repeat(3, 1fr);
    }
    .infl_grade .item{
        display: flex;
        flex-direction: column;
        gap:5px;
        align-items: center;
    }

    .infl_grade .item .result{
        font-size: 16px;
        letter-spacing: -0.5px;
        color: #888;
        position: relative;
        display: flex;
        align-items: center;
    }
    .infl_grade .item .result .tooltip{
        padding-left: 3px;
        line-height: 1;
        height: 12px;
    }

    .infl_grade .item .value{
        font-size: 13px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap:5px;
        line-height: 20px;
    }


    .infl_grade .rating img{
        max-width: 16px;
    }
    
    .receive_review{
        padding: 10px 0;
    }
    .receive_review .ui-button{
        padding: 13px 0 ;
    }
    
    .list_area .btnCont .ui-button{
        font-size: 12px;
        padding: 10px 0;
    }
    
}




.tooltip {
    position: relative;
    display: flex;
    cursor: pointer;
    overflow: visible; 
    height: 12px;
    align-items: center;
}
.result:has(.tooltip):hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    z-index: 10;
}

.tooltiptext {
    visibility: hidden;
    background-color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transition: opacity 0.3s;
    transform: translate(-50%, 0);
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #000 !important;
    text-align: left;
    word-break: keep-all;
    width: calc(100dvw - 40px);
    max-width: 450px;
}
.tooltiptext.left{
    left: initial;
    right: 30px;
}
.tooltiptext .head{
    font-weight: 600;
    font-size: 16px;
}
.tooltiptext .desc{
    font-size: 14px;
}

/* 말풍선 위에 삼각형 추가 */
.tooltiptext::after {
/*
    content: "";
    position: absolute;
    top: 50%;
    left: -28px;
    border-width: 14px;
    border-style: solid;
    border-color: #ddd transparent transparent transparent;
    transform: rotate(90deg) translateX(-50%);
    z-index: 1;
*/
}

/* 말풍선 위에 삼각형 추가 */
.tooltiptext::before {
/*
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    border-width: 12px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    transform: rotate(90deg) translateX(-50%);
    z-index: 2;
*/
}

.tooltiptext.left::after {
    left: initial;
    right: -28px;
    transform: rotate(-90deg) translateX(50%);

}

/* 말풍선 위에 삼각형 추가 */
.tooltiptext.left::before {
/*
    left: initial;
    right: -24px;
    transform: rotate(-90deg) translateX(50%);
*/
}
.blog_grade .tooltiptext{
    max-width: 450px;
    
}



._tab{
    background-color: #fff;
    padding: 25px 30px 0;
    margin-bottom: 30px;
    border-radius: 15px;
    box-shadow: 10px 10px 10px rgba(212,212,223,0.2);
    position: sticky;
    top: 142px;
    z-index: 1;
}
._tab .status_label{
    display: flex;
    align-items: center;
    gap:15px;
}
._tab a span{
    font-size: 20px;
    padding: 10px 20px 15px 20px;
}

.status_label a{
    min-width: fit-content;
    display: inline-block;
    text-align: center;
    
}

.status_label a + a {
/*    margin-left: 32px;*/
}

.status_label span {
    display: inline-block;
    letter-spacing: -0.28px;
    color: #888;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    padding: 10px 56px 20px;
    
}

.status_label span.badge{
    position: relative;
}
.status_label span.badge::before{
    content: "";
    display: inline-block;
    position: absolute;
    right: calc(46px);
    top: 7px;
    width: 5px;
    height: 5px;
    background: #ff6262;
    border-radius: 50%;
}

.status_label span.on {
    color: #222;
    font-weight: 600;
    border-bottom: 5px solid #3ccbdb;
}

.mofidy_area .field_area .field.self_introduce{
    border: 1px solid var(--line-color);
    padding: 20px;
    gap:20px;
}
.mofidy_area .field_area .field.self_introduce label{
    width: 100%;
    line-height: 1;
    color: #222;
    font-size: 20px;
    font-weight: 400;
    cursor: initial;
}
.mofidy_area .field_area .field.self_introduce .comment{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    max-height: 7.5em; /* line-height * 5줄 */
}

.mofidy_area .field_area .field.self_introduce .comment.expanded {
    display: block;
    max-height: none;
    -webkit-line-clamp: unset;
}
.mofidy_area .field_area .field.self_introduce .more-btn{
    color: var(--primary-color);
    border: none;
    align-self: flex-start;
    line-height: 1;
}

.mofidy_area .field_area .field.sns_area{
    border: 1px solid var(--line-color);
    padding: 20px;
    margin-top: 20px;
}


.infl_grade{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    background-color: #ECF9FB;
    border-radius: var(--border-round-S);
    padding: 20px 0;
    grid-row-gap: 10px;
}
.infl_grade + .infl_grade{
    margin-top: 20px;
}
.repeat-3 .infl_grade{
    grid-template-columns: repeat(3, 1fr);
}
.infl_grade .item{
    display: flex;
    flex-direction: column;
    gap:5px;
    align-items: center;
}


.infl_grade .item .result .tooltip{
/*    position: absolute;*/
    padding-left: 3px;
    line-height: 20px;
}
.infl_grade .item .result:has(.tooltip){
    padding-right: 12px;
    display: flex;
    align-items: center;
}


.infl_grade .rating img{
    max-width: 16px;
}

.hidden_infl_grade{
    justify-content: flex-start;
    gap:10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}


.grade_area{
    padding: 30px;
}

.rating_area{
    padding: 30px;
}

@media (max-width:800px){
    .rating_area{
        padding: 0 15px;
    }
}




color: #222;}
.body{
    overflow-y: auto;
}
.body::-webkit-scrollbar {
    width: 15px;
    background-color: transparent;
 }
.body::-webkit-scrollbar-thumb {
    background-color: #9499B4;
    border: 5px solid #F5F5FA;
    border-radius: 15px;
    cursor: pointer;
    opacity: 0;
 }
.body::-webkit-scrollbar-track {
    background-color: transparent;
    opacity: 0;
}
/*
.profile{
    border-radius: 9999px;
    max-width: 60px;
    max-height: 60px;
    overflow: hidden;
    width: 100%;
}
*/
/*
.profile img{
    width: 100%;
    height: 60px;
    object-fit: cover;
}
*/
.mb_section{}
.mb_section .mb_info{
    display: flex;
    gap:10px;
    align-items: center;
    padding-bottom: 20px;
    color: #222;
    font-weight: 400;
}
.mb_section .mb_info .name{
    display: flex;
    align-items: center;
    gap: 5px;
}
.mb_section .mb_info .name img{
    max-width: 23px;
    width: 23px;
    height: 23px;
}

.mb_rating{
    padding-bottom: 20px;
    color: #222;
    font-size: 24px;
    display: flex;
    align-items: center;
    line-height: 1;
}
.mb_rating span{
    font-size: 20px;
    color: #888;
    font-weight: 400;
    display: flex;
}
.mb_rating span + span{
    padding-left: 20px;
}
.mb_rating .avg_rating{
    font-size: 20px;
    font-weight: 500;
    color: #222;
}
.mb_rating .total_ratings{
    font-size: 16px;
    font-weight: 400;
    padding-left: 10px;
}
.total_count{
    color: #222;
    padding-bottom: 20px;
    font-size: 20px;
}

@media (max-width:800px){
    .total_count{
        font-size: 14px;
        font-weight: 500;
        padding-bottom: 15px;
    }
    
}

.rating_list{
    display: flex;
    flex-direction: column;
    gap:45px;
}

.infomation{
    background-color:#FFF8E7;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: var(--border-round-L);
    color: #222;
    font-weight: 400;
}
.rating_list .item .profile_area{
    display: flex;
    gap:10px;
    line-height: 1;
    align-items: center;
}
.rating_list .item .profile_area .rating{
    font-size: 20px;
    color: #222;
    display: flex;
    align-items: center;
    gap:10px;
}
.rating_list .item .profile_area .rating .star_wrap{
    display: flex;
    gap:3px;
    align-items: center;
}
.rating_list .item .profile_area .rating .star_wrap img{
    max-width: 16px;
}
.rating_list .item .profile_area .rating .star_wrap svg{
    width: 20px;
    height: 20px;
}
.rating_list .item .profile_area .rating .rate{
    font-size: 20px;
    font-weight: 500;
}
.rating_list .item .profile_area .rate{
    font-weight: 400;
    font-size: 16px;
}
.rating_list .item .profile img{
    max-width: 26px;
    max-height: 26px;
    width: 100%;
    border-radius: 50%;
    width: 26px;
}

.rating_list .item .type{
    font-size: 16px;
    font-weight: 400;
    color: #888;
    display: flex;
    align-items: center;
    line-height: 1;
    padding: 17px 0 ;
}
.rating_list .item .type span + span{
    border-left: 1px solid #888;
    padding-left: 8px;
    margin-left: 8px;
}
.rating_list .item .comment{
    color: #222;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    max-height: 7.5em; /* line-height * 5줄 */
}
.rating_list .item .comment.expanded {
    display: block;
    max-height: none;
    -webkit-line-clamp: unset;
}
.rating_list .item .comment + button{
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    padding-top: 20px;
    border: none;
}
.rating_list .item .reply_comment .reply-more-btn{
    color: #222;
}

.rating_list .item .date{
    border-left: 1px solid #888;
    padding-left: 8px;
    font-weight: 400;
    color: #888;
    
}

.rating_list .item .reply_btn{
    margin-left: auto;
    cursor: pointer;
}
.rating_list .item .reply_area{
    margin-left: auto;
    background-color: var(--bg-gray);
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}

.rating_list .item .reply_area .top_area{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rating_list .item .reply_area .date_area{
    display: flex;
    align-items: center;
    color:#888;
    padding-bottom: 10px;
}
.rating_list .item .reply_area .date_area .date{
    margin-left: 10px;
    line-height: 1;
}
.rating_list .item .reply_area .edit_area{
    display: flex;
    align-items: center;
    gap:10px;
}
.rating_list .item .reply_area .edit_area > div{
    cursor: pointer;
}
.more_btn_wrap{
    padding: 20px 0;
}
.more_btn_wrap button{
    padding: 14px 0;
    font-size: 18px;
    font-weight: 500;
}



.back_title .ct_title{
    display: flex;
    gap:20px;
    align-items: center;
}
.back_title .ct_title .back_btn{
    cursor: pointer;
}


#modal-create-reply .body{}
#modal-create-reply .body textarea{
    width: 100%;
    height: 250px;
    font-weight: 400;
}
#modal-create-reply .body textarea:focus{
    border-color: var(--line-color);
}



@media (max-width:800px){
    .rating_list .item .profile img{
        max-width: 18px;
        max-height: 18px;
    }
    .rating_list .item .profile_area .rating .star_wrap svg{
        width: 13px;
        height: 13px;
    }
    .rating_list .item .profile_area .rating .rate{
        font-size: 16px;
    }
    .rating_list .item .date{
        font-size: 12px;
    }
    .rating_list{
        gap:35px;
    }
    .rating_list .item .comment{
        font-size: 12px;
    }
    .rating_list .item .comment + button{
        font-size: 12px;
        padding-top: 7px;
        line-height: 1;
    }
    
    .rating_list .item .type{
        font-size: 12px;
        padding: 12px 0;
    }
    .more_btn_wrap button{
        padding: 12px 0;
    }
    
    #header + #container:has(.fixed_head).my_profile{
        padding-top: 46px;
    }
    
    ._tab{
        padding: 0;
        top: 46px;
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 0;
    }
    ._tab a span{
        font-size: 14px;
        font-weight: 300;
        padding: 10px;
    }
    ._tab a span.on{
        font-weight: 500;
        border-bottom: 3px solid var(--primary-color);
    }
    ._tab .status_label{
        gap:10px;
    }
    .my_profile div.ct_title.PC_content{
        display: none;
    }
    .profile_modify{
        padding: 15px;
        background: #fff;
        border-radius: 10px;
    }
    
    .mofidy_area .field_area .field.self_introduce{
        border-radius: 10px;
        padding: 10px;
        gap:10px;
    }
    .mofidy_area .field_area .field.self_introduce label{
        margin: 0;
        font-size: 14px;
        color: #222;
    }
    .mofidy_area .field_area .field.self_introduce .comment{
        font-size: 12px;
        font-weight: 400;
    }
    .mofidy_area .field_area .field.self_introduce .more-btn{
        font-size: 12px;
    }
    
    .grade_area,.rating_area{
        margin-top: 10px;
        padding: 15px;
        background-color: #fff;
        border-radius: 10px;
    }
    .grade_area .ct_title,.rating_area .ct_title{
        padding: 0;
        font-size: 14px;
        margin-bottom: 15px;
    }
    .grade_area div.ct_title .ui-button{
        padding: 8px;
    }
    .infl_grade{
        padding: 10px;
        grid-template-columns: repeat(3, 1fr);
    }
    .infl_grade + .infl_grade{
        margin-top: 5px;
        
    }
    .my_page .text{
        font-size: 12px;
    }
    .infl_grade .item .result{
        font-size: 11px;
        font-weight: 400;
    }

    .mb_rating span svg{
        width: 16px;
    }
    .mb_rating .total_ratings{
        font-size: 14px;
    }
    .mb_rating span + span{
        padding-left: 10px;
    }
    .rating_area .infomation{
        font-size: 12px;
        margin-bottom: 15px;
    }
    
    .profile_card .profile_img .modifyBtn{
        width: 20px;
        height: 20px;
    }
    
    .rating_list .item .reply_btn{
        font-size: 11px;
    }
    .total_count{
        padding-left: 5px;
        padding-right: 5px;
    }
    .rating_list{
        padding-left: 8px;
        padding-right: 8px;
    }
    .rating_list .item .reply_area .date_area{
        font-size: 12px;
    }
    .rating_list .item .reply_area .edit_area > div svg{
        max-width: 13px;
        height: 100%;
    }
    .rating_list .item .reply_area .reply_comment{
        font-size: 12px;
    }
    
    
    .mofidy_area label{
        font-size: 14px;
    }
    
    .mofidy_area input{
        font-size: 12px;
    }
    .mofidy_area .field_area.flex_col{
        gap:20px;
    }
    .mofidy_area .flex_col{
        gap:5px;
    }
    .mofidy_area #mb_introduce{
        font-size: 12px;
        padding: 10px;
    }
    .mofidy_area .field_area .SNS_ li .fixed_text{
        font-size: 12px;
        padding: 11px;
    }
    .mofidy_area .field_area .SNS_ li .icon{
        padding: 10px;
    }
    .mofidy_area .field_area .SNS_ li .icon img{
        max-width: 20px;
        max-height: 20px;
        width: 20px;
    }
    
    .interest_area .check_area.chip_cont{
        gap:15px;
    }
    
    .chip_cont.check_area .checkbox_.icon label img{
        max-width: 35px;
        gap:5px;
    }
    
    .interest_area .area_cont .check_area:not(.chip_cont){
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px 10px;
        width: 100%;
    }
    
    
    .tooltip {
        position: relative;
        display: inline-block;
        cursor: pointer;
        overflow: visible; 
        /* height: 18px; */
    }
    .result:has(.tooltip):hover .tooltiptext {
        visibility: visible;
        opacity: 1;
        z-index: 1;
    }

    .tooltiptext {
        visibility: hidden;
        background-color: #fff;
        padding: 10px 16px;
        border-radius: 10px;
        position: fixed;
        bottom: 50%;
        left: 50%;
        opacity: 0;
        transition: opacity 0.3s;
        transform: translate(-50%, 50%);
        border: 2px solid var(--primary-color);
        border-radius: 10px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #000 !important;
        text-align: left;
        word-break: keep-all;
        width: calc(100dvw - 40px);
        max-width: 800px;
    }
    .tooltiptext.left{
        left: initial;
        right: 40px;
    }
    .tooltiptext .head{
        font-weight: 600;
        font-size: 12px;
    }
    .tooltiptext .desc{
        font-size: 12px;
    }


    .tooltiptext.left::after {
        left: initial;
        right: -28px;
        transform: rotate(-90deg) translateX(50%);
    }

    .interest_area .area_cont .check_area:not(.chip_cont) .checkbox_{
        min-width: initial;
    }
    
    .interest_area .notice_check label{
        font-size: 12px;
    }
    
    .mofidy_area .interest_area label.head{
        font-size: 14px;    
    }
}






/* 툴팁 CSS */


.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    overflow: visible; 
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    z-index: 1;
}
.result:has(.tooltip):hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    z-index: 1;
}

.tooltiptext {
    visibility: hidden;
    background-color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    position: absolute;
    bottom: 50%;
    left: 20px;
    opacity: 0;
    transition: opacity 0.3s;
    transform: translateY(50%);
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    word-break: keep-all;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #000 !important;
    text-align: left;
    width: max-content;
    max-width: 450px;
    word-break: keep-all;
}
.tooltiptext.left{
    left: initial;
    right: 30px;
}
.tooltiptext.top{
    left: 0;
    bottom: 25px;
    transform: translateY(0);
}
.tooltiptext .head{
    font-weight: 600;
    font-size: 16px;
}
.tooltiptext .desc{
    font-size: 14px;
}




@media (max-width:800px){
    
    .tooltip {
        position: relative;
        display: inline-block;
        cursor: pointer;
        overflow: visible; 
    }
    .result:has(.tooltip):hover .tooltiptext {
        visibility: visible;
        opacity: 1;
        z-index: 1;
    }

    .tooltip:hover .tooltiptext {
        visibility: hidden;
        opacity: 0;
        z-index: 1;
        right: initial;
        left: 50%;
    }

    .tooltip.on .tooltiptext {
        visibility: visible;
        opacity: 1;
        z-index: 1;
        right: initial;
        left: 50%;
    }


    .tooltiptext {
        visibility: hidden;
        background-color: #fff;
        padding: 10px 16px;
        border-radius: 10px;
        position: fixed;
        bottom: 50%;
        left: 50%;
        opacity: 0;
        transition: opacity 0.3s;
        transform: translate(-50%, 50%);
        border: 2px solid var(--primary-color);
        border-radius: 10px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #000 !important;
        text-align: left;
        word-break: keep-all;
        width: calc(100dvw - 40px);
        max-width: 800px;
    }

    .tooltiptext .head{
        font-weight: 600;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: transparent;
        padding: 0;
        color: #222;
        overflow-x: auto;
    }

    .tooltiptext .head .close img{
        max-width: 12px;
    }

    .tooltiptext .desc{
        font-size: 12px;
        white-space: initial;
    }
}




.edit_complete_btn_wrap{
    position: relative;
    padding-top: 10px;
}
.edit_complete_btn_wrap button{
    width: 100%;
    font-weight: 500;
    font-size: 14px;
    height: auto;
    padding:12px 0 ;
    line-height: 1;
    border-radius: var(--border-round-S);
    border: 1px solid var(--primary-color);
}

.edit_complete_btn_wrap .biz_tooltip{
    top:55px;
    background-color:var(--accent-color);
    color:#222;
    width: fit-content;
    right: 11px;
    left: initial;
}
.edit_complete_btn_wrap .biz_tooltip::before{
    border-bottom: 18px solid var(--accent-color);
}
.edit_complete_btn_wrap .biz_tooltip .head{
    border-bottom: none;
    padding: 0;
    height: auto;
    justify-content: flex-start;
    gap: 10px;
}

.edit_complete_btn_wrap .biz_tooltip span img{
    position: static;
}

@media (max-width:800px){
    .my_campaign_detail .modal-layer .edit_complete_btn_wrap .submitBtn{
        width: 100%;
        max-width: initial;
        font-size: 14px;
    }
    .my_campaign_detail .floating_section .modal-layer .notice_ #edit_desc{
        font-size: 12px;
    }
    .edit_complete_btn_wrap .biz_tooltip .head{
        font-size: 12px;
        font-weight: 400;
    }
}