/**************** public *******************/
/*     #B6E7F1 */

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; width: 100%; height: 100%;}

body { background-color: var(--primary-color); margin: 0; height: auto; font-size: 14px; min-height: 100%; height: 100%; color: #444C67; }
input, select, textarea { 
    border: 1px solid #EDEDED;
    height: 68px; 
    padding: 5px 15px; /*font-family:"Droid Sans";*/ 
    outline: none; 
    font-size: 16px;
    border-radius: 8px;
 }
textarea { resize: none; }
input:focus, select:focus, textarea:focus { /*border-color: #333;*/ }
input::placeholder, textarea::placeholder {
    color: #888;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../img/icon/select_down.png);
    background-position: right 20px center;
    background-repeat: no-repeat;
    padding-right: 50px;
}
select::-ms-expand {
    display: none;
}
input[type="text"] {width:100%;}
input[name="title"] {font-size: 21px; font-weight: 800; text-align: center;}
input[type="password" i] { font-family:"Droid Sans"; }
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='button']{
cursor: pointer;
}


.red_dot{
position: relative;
padding-right: 10px;
}
.red_dot::before{
content: '';
position: absolute;
top: 0;
right: 0;
width: 6px;
height: 6px;
background: var(--red-100-color);
border-radius: 9999px;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

em { font-style: inherit; }
ul { list-style: none; }
a { text-decoration: none; color: currentColor; }
i { font-style: inherit; }
button { font-weight: 500; font-size: 1.1em; border: none; outline: none; cursor: pointer; background-color: transparent; }
button:focus { outline: none; box-shadow: none; }
h3 { font-size: 24px; font-weight: 700; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1em;
}
th, td {
    vertical-align: middle;
}
th { background-color: #F4F5F9; font-weight: 500; }
th:focus { outline: none; }
th:last-child, td:last-child { border-right: 0; }
th.tx-left, td.tx-left { text-align: left; padding-left: 20px; }
td > a:hover { text-decoration: underline; }

table .btn { display: inline-block; }
table select,
table input { width: 100%; }
table em { margin: 0px 5px; }

/* color */
h2,h3,h4,h5 { font-weight: 500; line-height: 1em; }
h3 { font-size: 2.2em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.3em; }
img {
    vertical-align: top;
}
b {
    font-weight: 500;
}
.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;
}

.wrap { position: relative; }

html,body {
    min-width: 1024px;
}
body {
    padding-top: 90px;
/*        background-color: #3CCBDB;*/
}
.mg0 {
    margin: 0 !important;
}
.mt10 {
    margin-top: 10px !important;
}
.mb10 {
    margin-bottom: 10px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb25 {
    margin-bottom: 25px;
}
.mb30 {
    margin-bottom: 30px !important;
}
.mb40 {
    margin-bottom: 40px !important;
}

hr {
    margin: 30px 0;
    width: 100%;
    height: 1px;
    border: none;
    background-color: #EDEDED;
}

svg.noti_ico{
margin-right: 5px;
}
.displaynone{
display: none !important;
}
.visibility {
visibility: hidden !important; 
}

.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;
}

.red_border{
background: #fff;
border: 1px solid var(--red-100-color);
color: var(--red-100-color);
}

.spinner img{
width: 100px;
}




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









/* 페이징 */
.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;
}
.pagenate ul.new a.dot{
padding: 10px 5px;
 width: auto;
}

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

.accent_color{
color: var(--primary-color);
}

.btn-Gray{
display: flex;
align-items: center;
background: var(--gray-font-color);
color: #fff;
cursor: pointer;
}
.light_gray_btn{
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-gray);
color: #888;
cursor: pointer;
}

.red_btn{
background: var(--red-100-color);
color: #fff;
cursor: pointer;
text-align: center;
}

.btn-primary{
display: flex;
align-items: center;
background: var(--primary-color);
color: #fff;
cursor: pointer;
}
.send_message_btn{
display: flex;
gap:8px;
padding: 12px;
border-radius: var(--border-round-S);
line-height: 1;
font-size: 16px;
font-weight: 400;
border: 1px solid var(--line-color);
background: #fff;
color: #222;
} 
.send_message_btn img{
max-width: 16px;
}

[data-btn-type="floating"]{
position: fixed;
right: 34px;
bottom: 188px;
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: 50%;
/*    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: 9999;
}
[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(--yellow-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(--yellow-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;
}

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


.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);
}
.submitBtn:hover{
    background-color: #fff;
    color: #3CCBDB;
    border: 1px solid #3ccbdb;
    box-shadow: none;
}

.customBtn_p{
cursor: pointer;
background: #3CCBDB !important;
color: #fff !important;
border: 1px solid #3CCBDB !important;
border-radius: 5px;   
padding: 12px 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;
}


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

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


.btn_border{
display: inline-block;
border-radius: 5px;
color: #3CCBDB;
border: 1px solid #3CCBDB;
background:#FFF;
line-height: 1;
width: 100%;
text-align: center;
cursor: pointer;
font-weight: 500;
}
.btn_border:hover{
background: var(--primary-color);
color: #fff;
}

#add_cp_opt{
display: flex;
justify-content: center;
align-items: center;
padding: 15px 22.5px;
background-color: #3CCBDB;
border-radius: 5px;
color: #fff;
font-size: 14px;
border: none;
cursor: pointer;
line-height: 1;
}

.remove_cp_opt{
display: flex;
justify-content: center;
align-items: center;
padding: 14px 22.5px;
background-color: #fff;
border-radius: 5px;
color: #000;
font-size: 14px;
border: 1px solid #000;
margin-right: 20px;
cursor: pointer;
line-height: 1;
}

div.user_feedback{
top: 35%;
padding-bottom: 20px;
}

div.user_feedback > div{
background: #FF6262;
color: #fff;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
padding: 8px 15px;
border-radius: 5px 5px 0px 0px;
cursor: pointer;
}

div.user_feedback > div > div{
display: flex;
gap: 14px;
}
div.user_feedback img{
transform: rotate(90deg);
max-width: 20px;
}

.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;*/
cursor: pointer;
}

.border_white_btn{
border-radius: 8px;
color: #3CCBDB !important;
border: 1px solid #3CCBDB !important;
display: inline-block;
background: #fff !important;
padding: 10px 30px;
cursor: pointer;
}

.border_btn_w{
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 5px;
color: var(--theme-font-color);
font-size: 16px;
font-weight: 700;
border: 1px solid #E4E8EE;
cursor: pointer;
}

.border_btn.on{
border-color: (--primary-color, #3CCBDB);
}

.border_btn_p{
border-radius: var(--border-round-S) !important;
background: #fff !important;
color: var(--primary-color) !important;
display: inline-block;
border: 1px solid var(--primary-color);
text-align: center;
cursor: pointer;
}
/*
.border_btn_p:hover{
background: var(--primary-color, #3CCBDB) !important;
color: #fff !important;
}
*/
.fill_primary_btn{
background-color: var(--primary-color) !important;
color: #fff;
font-size: 16px;
font-weight: 500;
padding: 7px 35px;
line-height: 24px;
padding: 10px;
border: none;
border-radius: var(--border-round-S) !important;
cursor: pointer;
}
.fill_accent_btn{
background-color: var(--accent-color) !important;
color: #fff;
font-size: 16px;
font-weight: 500;
padding: 7px 35px;
line-height: 24px;
padding: 13px;
border: none;
border-radius: var(--border-round-S) !important;
}
.fill_gradient_btn{
background: var(--gradient-color) !important;
color: #fff;
font-size: 16px;
font-weight: 500;
padding: 7px 35px;
line-height: 24px;
padding: 13px;
border: none;
border-radius: var(--border-round-S) !important;
}
.fill_gray_btn{
background-color: var(--bg-gray);
color: var(--gray-font-color);
font-size: 16px;
font-weight: 500;
padding: 7px 35px;
line-height: 24px;
padding: 13px;
border-radius: 5px;
}

.gray_btn{
background: var(--bg-gray) !important;
color: var(--navy-color) !important;
border: none;
border-radius: var(--border-round-S) !important;
}
.gray_btn:hover {
background: #d2d2d2 !important;
}
.navy_btn{
padding: 12px 15px;
font-size: 14px;    
font-weight: 500;
letter-spacing: -0.48px;
color: #fff;
border-radius: 5px;
background-color: var(--navy-color) !important;
box-sizing: border-box;
display: inline-block;
/*    max-width: fit-content;*/
width: 100%;
word-break: keep-all;
}

/* 툴팁 CSS */


.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
overflow: visible; 
height: 18px;
}

.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;
}

/* 말풍선 위에 삼각형 추가 */
.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;

}

.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%);
}

.small_loade {
width: 25px;
height: 25px;
border: 2px 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;
}
.white_loader {
width: 22px;
height: 22px;
border: 3px solid #fff;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}

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


/*헤더 */
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 1024px;
    background-color: #fff;
    z-index: 9000;
}
/**************** public *******************/
/*     #B6E7F1 */

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; width: 100%; height: 100%;}

body { background-color: var(--primary-color); margin: 0; height: auto; font-size: 14px; min-height: 100%; height: 100%; color: #444C67; }
input, select, textarea { 
    border: 1px solid #EDEDED;
    height: 68px; 
    padding: 5px 15px; /*font-family:"Droid Sans";*/ 
    outline: none; 
    font-size: 16px;
    border-radius: 8px;
 }
textarea { resize: none; }
input:focus, select:focus, textarea:focus { /*border-color: #333;*/ }
input::placeholder, textarea::placeholder {
    color: #888;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../img/icon/select_down.png);
    background-position: right 20px center;
    background-repeat: no-repeat;
    padding-right: 50px;
}
select::-ms-expand {
    display: none;
}
input[type="text"] {width:100%;}
input[name="title"] {font-size: 21px; font-weight: 800; text-align: center;}
input[type="password" i] { font-family:"Droid Sans"; }
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='button']{
cursor: pointer;
}


.red_dot{
position: relative;
padding-right: 10px;
}
.red_dot::before{
content: '';
position: absolute;
top: 0;
right: 0;
width: 6px;
height: 6px;
background: var(--red-100-color);
border-radius: 9999px;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

em { font-style: inherit; }
ul { list-style: none; }
a { text-decoration: none; color: currentColor; }
i { font-style: inherit; }
button { font-weight: 500; font-size: 1.1em; border: none; outline: none; cursor: pointer; background-color: transparent; }
button:focus { outline: none; box-shadow: none; }
h3 { font-size: 24px; font-weight: 700; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1em;
}
th, td {
    vertical-align: middle;
}
th { background-color: #F4F5F9; font-weight: 500; }
th:focus { outline: none; }
th:last-child, td:last-child { border-right: 0; }
th.tx-left, td.tx-left { text-align: left; padding-left: 20px; }
td > a:hover { text-decoration: underline; }

table .btn { display: inline-block; }
table select,
table input { width: 100%; }
table em { margin: 0px 5px; }

/* color */
h2,h3,h4,h5 { font-weight: 500; line-height: 1em; }
h3 { font-size: 2.2em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.3em; }
img {
    vertical-align: top;
}
b {
    font-weight: 500;
}
.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;
}

.wrap { position: relative; }

html,body {
    min-width: 1024px;
}
body {
    padding-top: 90px;
/*        background-color: #3CCBDB;*/
}
.mg0 {
    margin: 0 !important;
}
.mt10 {
    margin-top: 10px !important;
}
.mb10 {
    margin-bottom: 10px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb25 {
    margin-bottom: 25px;
}
.mb30 {
    margin-bottom: 30px !important;
}
.mb40 {
    margin-bottom: 40px !important;
}

hr {
    margin: 30px 0;
    width: 100%;
    height: 1px;
    border: none;
    background-color: #EDEDED;
}

svg.noti_ico{
margin-right: 5px;
}
.displaynone{
display: none !important;
}
.visibility {
visibility: hidden !important; 
}

.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;
}

.red_border{
background: #fff;
border: 1px solid var(--red-100-color);
color: var(--red-100-color);
}

.spinner img{
width: 100px;
}




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









/* 페이징 */
.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;
}
.pagenate ul.new a.dot{
padding: 10px 5px;
 width: auto;
}

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

.accent_color{
color: var(--primary-color);
}

.btn-Gray{
display: flex;
align-items: center;
background: var(--gray-font-color);
color: #fff;
cursor: pointer;
}
.light_gray_btn{
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-gray);
color: #888;
cursor: pointer;
}

.red_btn{
background: var(--red-100-color);
color: #fff;
cursor: pointer;
text-align: center;
}

.btn-primary{
display: flex;
align-items: center;
background: var(--primary-color);
color: #fff;
cursor: pointer;
}
.send_message_btn{
display: flex;
gap:8px;
padding: 12px;
border-radius: var(--border-round-S);
line-height: 1;
font-size: 16px;
font-weight: 400;
border: 1px solid var(--line-color);
background: #fff;
color: #222;
} 
.send_message_btn img{
max-width: 16px;
}

[data-btn-type="floating"]{
position: fixed;
right: 34px;
bottom: 188px;
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: 50%;
/*    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: 9999;
}
[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(--yellow-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(--yellow-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;
}

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


.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);
}
.submitBtn:hover{
    background-color: #fff;
    color: #3CCBDB;
    border: 1px solid #3ccbdb;
    box-shadow: none;
}

.customBtn_p{
cursor: pointer;
background: #3CCBDB !important;
color: #fff !important;
border: 1px solid #3CCBDB !important;
border-radius: 5px;   
padding: 12px 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;
}


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

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


.btn_border{
display: inline-block;
border-radius: 5px;
color: #3CCBDB;
border: 1px solid #3CCBDB;
background:#FFF;
line-height: 1;
width: 100%;
text-align: center;
cursor: pointer;
font-weight: 500;
}
.btn_border:hover{
background: var(--primary-color);
color: #fff;
}

#add_cp_opt{
display: flex;
justify-content: center;
align-items: center;
padding: 15px 22.5px;
background-color: #3CCBDB;
border-radius: 5px;
color: #fff;
font-size: 14px;
border: none;
cursor: pointer;
line-height: 1;
}

.remove_cp_opt{
display: flex;
justify-content: center;
align-items: center;
padding: 14px 22.5px;
background-color: #fff;
border-radius: 5px;
color: #000;
font-size: 14px;
border: 1px solid #000;
margin-right: 20px;
cursor: pointer;
line-height: 1;
}

div.user_feedback{
top: 35%;
padding-bottom: 20px;
}

div.user_feedback > div{
background: #FF6262;
color: #fff;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
padding: 8px 15px;
border-radius: 5px 5px 0px 0px;
cursor: pointer;
}

div.user_feedback > div > div{
display: flex;
gap: 14px;
}
div.user_feedback img{
transform: rotate(90deg);
max-width: 20px;
}

.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;*/
cursor: pointer;
}

.border_white_btn{
border-radius: 8px;
color: #3CCBDB !important;
border: 1px solid #3CCBDB !important;
display: inline-block;
background: #fff !important;
padding: 10px 30px;
cursor: pointer;
}

.border_btn_w{
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 5px;
color: var(--theme-font-color);
font-size: 16px;
font-weight: 700;
border: 1px solid #E4E8EE;
cursor: pointer;
}

.border_btn.on{
border-color: (--primary-color, #3CCBDB);
}

.border_btn_p{
border-radius: var(--border-round-S) !important;
background: #fff !important;
color: var(--primary-color) !important;
display: inline-block;
border: 1px solid var(--primary-color);
text-align: center;
cursor: pointer;
}
/*
.border_btn_p:hover{
background: var(--primary-color, #3CCBDB) !important;
color: #fff !important;
}
*/
.fill_primary_btn{
background-color: var(--primary-color) !important;
color: #fff;
font-size: 16px;
font-weight: 500;
padding: 7px 35px;
line-height: 24px;
padding: 10px;
border: none;
border-radius: var(--border-round-S) !important;
cursor: pointer;
}
.fill_accent_btn{
background-color: var(--accent-color) !important;
color: #fff;
font-size: 16px;
font-weight: 500;
padding: 7px 35px;
line-height: 24px;
padding: 13px;
border: none;
border-radius: var(--border-round-S) !important;
}
.fill_gradient_btn{
background: var(--gradient-color) !important;
color: #fff;
font-size: 16px;
font-weight: 500;
padding: 7px 35px;
line-height: 24px;
padding: 13px;
border: none;
border-radius: var(--border-round-S) !important;
}
.fill_gray_btn{
background-color: var(--bg-gray);
color: var(--gray-font-color);
font-size: 16px;
font-weight: 500;
padding: 7px 35px;
line-height: 24px;
padding: 13px;
border-radius: 5px;
}

.gray_btn{
background: var(--bg-gray) !important;
color: var(--navy-color) !important;
border: none;
border-radius: var(--border-round-S) !important;
}
.gray_btn:hover {
background: #d2d2d2 !important;
}
.navy_btn{
padding: 12px 15px;
font-size: 14px;    
font-weight: 500;
letter-spacing: -0.48px;
color: #fff;
border-radius: 5px;
background-color: var(--navy-color) !important;
box-sizing: border-box;
display: inline-block;
/*    max-width: fit-content;*/
width: 100%;
word-break: keep-all;
}

/* 툴팁 CSS */


.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
overflow: visible; 
height: 18px;
}

.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;
}

/* 말풍선 위에 삼각형 추가 */
.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;

}

.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%);
}

.small_loade {
width: 25px;
height: 25px;
border: 2px 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;
}
.white_loader {
width: 22px;
height: 22px;
border: 3px solid #fff;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}

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


/*헤더 */
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 1024px;
    background-color: #fff;
    z-index: 9000;
}
header .inner {
    padding: 0 40px;
}
header .login-area {
    display: flex;
    height: 40px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #EDEDED;
    font-weight: 500;
}
header .login-area img {
    margin-right: 10px;
}
header .login-area ul li {
    display: inline-block;
    padding-left: 20px;
    background-image: url(../img/icon/dot_g.png);
    background-repeat: no-repeat;
    background-position: left 8px center;
}
header .login-area ul li:first-child {
    background-image: none;
}

header .haeder-wrap {
    display: flex;
    height: 90px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #EDEDED;
}
header .haeder-wrap .gnb {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
header .haeder-wrap .gnb ul {
    margin-left: 30px;
}
header .haeder-wrap .gnb ul li {
    display: inline-block;
    vertical-align: top;
    padding: 0 15px;
    font-size: 18px;
    line-height: 36px;
}

header .haeder-wrap .gnb a{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

header .haeder-wrap .gnb a span{
color: #666;
font-size: 18px;
font-weight: 500;
}
header .haeder-wrap .link_btn{
font-size: 16px;
}

#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;
}

#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: 25px;
}
#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: 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;
    background: #EFEFEF;
    border-radius: 50%;
}
#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;
}
#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 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;
}
#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;
gap:100px;
}
#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;
}
#header .ad_banner .close_text span{
font-size: 14px;
font-weight: 500;
}
#header .logo_wrap a{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

}
#header .logo_wrap a span{
color: #666;
font-size: 18px;
font-weight: 500;
}


#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;
gap:20px;
}
#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;
}



/* // 헤더 */



.fontBold{
font-weight: 700;
}

.fill_primary_btn{
background-color: var(--primary-color);
color: #fff;
font-size: 16px;
font-weight: 500;
padding: 7px 35px;
line-height: 24px;
padding: 13px;
border-radius: 5px;
}
.fill_gray_btn{
background-color: var(--bg-gray);
color: var(--gray-font-color);
font-size: 16px;
font-weight: 500;
padding: 7px 35px;
line-height: 24px;
padding: 13px;
border-radius: 5px;
}
.customBtn{
background-color: var(--theme-color);
color: #fff;
font-size: 14px;
font-weight: 300;
padding: 7px 35px;
border-radius: 50px;
}
.customBtnDisable{
background-color: var(--disabled-gray-color);
color: #fff;
font-size: 14px;
font-weight: 300;
padding: 7px 35px;
border-radius: 50px;
}
.customBtnDisable_black{
background-color: var(--gray-font-color);
color: #fff;
font-size: 14px;
font-weight: 300;
padding: 7px 35px;
border-radius: 50px;
}

.project-link {
    display: inline-block;
    vertical-align: top;
    background-color: #3CCBDB;
    color: #fff;
    padding: 0px 20px;
    border-radius: 5px;
    font-size: 16px;
    margin-right: 5px;
}
.reviewer-link {
    display: inline-block;
    vertical-align: top;
    background-color: #707070;
    color: #fff;
    padding: 0px 20px;
    border-radius: 5px;
    font-size: 16px;
    margin-right: 5px;
}

.notice-n {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    font-family: 'roboto';
    background-color: #ddd;
    color: #fff;
    background-color: #EB6161;
    padding: 0px 7px 0px  6px;
    border-radius: 10px;
}

.search-area {
    position: relative;
}
.search-area input {
    width: 313px;
    height: 48px;
    border: none;
    border-radius: 25px;
    background-color: #F4F5F9;
    font-size: 16px;
    padding: 0px 50px 0 20px;
}
.search-area .btn-search {
    position: absolute;
    top: 0;
    right: 20px;
    width: 25px;
    height: 100%;
    background-image: url(../img/icon/search.png);
    background-repeat: no-repeat;
    background-position: center;
}

/*아이콘 */
i.icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
}
.icon-add {
    background-image: url(../img/icon/pen.png);         
}
.active .icon-add, .seleced .icon-add {
    background-image: url(../img/icon/pen_a.png);           
}
.icon-home-new {
    background-image: url(../img/icon/home_new.png);         
}
.active .icon-home-new, .seleced .icon-home-new {
    background-image: url(../img/icon/home_new_a.png);           
}
.icon-gear {
    background-image: url(../img/icon/gear.png);         
}
.active .icon-gear,.seleced .icon-gear {
    background-image: url(../img/icon/gear_a.png);           
}
 .icon-his {
    background-image: url(../img/icon/note.png);         
}
.active .icon-his, .seleced .icon-his {
    background-image: url(../img/icon/note_a.png);           
}
 .icon-user {
    background-image: url(../img/icon/user.png);         
}
.active .icon-user, .seleced .icon-user {
    background-image: url(../img/icon/user_a.png);           
}
.icon-payment {
    background-image: url(../img/icon/payment.png);
}
.active .icon-payment, .seleced .icon-payment {
    background-image: url(../img/icon/payment_a.png);           
}
.icon-setting {
    background-image: url(../img/icon/gear_icon.svg);
}
.active .icon-setting, .seleced .icon-setting {
    background-image: url(../img/icon/gear_icon_on.svg);
}

/* 광고주 전용 가입 인덱스 페이지 */
.sign-up-bg {
    width: 1100px;
    height: auto;
    padding: 0;
    background: rgb(196,239,236); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(196,239,236,1) 5%, rgba(196,239,236,1) 5%, rgba(255,201,252,1) 76%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(196,239,236,1) 5%,rgba(196,239,236,1) 5%,rgba(255,201,252,1) 76%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(196,239,236,1) 5%,rgba(196,239,236,1) 5%,rgba(255,201,252,1) 76%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4efec', endColorstr='#ffc9fc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    border-radius: 50px;
    margin: 50px auto;
    display: flex;
}
.sign-up-left {
    flex-basis: 500px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.sign-up-left h1 {
    font-size: 24px;
    color: #3CCBDB;
    text-align: center;
}
.assaview-phone {
    width: 250px;
    height: auto;
    filter: drop-shadow(5px 5px 5px rgb(133, 133, 133));
}
.sign-up-right {
    height: 800px;
    background-color: #ffffff;
    border-radius: 50px;
    flex-grow: 1;
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: center;
    align-items: center;
}
.sign-up-right h1 {
    font-size: 30px;
    text-align: center;
    font-weight: 700;
}
.join-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.sign-up-right button {
    width: 400px;
    height: 60px;
    border-radius: 50px;
    font-size: 24px;
}
.sign-up-right .biz-kakao-join {
    background-color: #FFEE00;
    color: #2B1718;
}
.sign-up-right .biz-kakao-join:hover {
    background-color: #ffffff;
    border: 2px solid #FFEE00;
}
.sign-up-right .biz-naver-join {
    background-color: #50AA34;
    color: #ffffff;
}
.sign-up-right .biz-naver-join:hover {
    background-color: #ffffff;
    border: 2px solid #50AA34;
    color: #2B1718;
}
.sign-up-right .biz-site-join {
    background-color: #3CCBDB;
    color: #ffffff;
}
.sign-up-right .biz-site-join:hover {
    background-color: #ffffff;
    border: 2px solid #3CCBDB;
    color: #2B1718;
}
.sign-up-right .biz-login {
    border: 2px solid #3CCBDB;
    color: #3CCBDB;
}
.sign-up-right .biz-login:hover {
    background-color: #3CCBDB;
    color: #ffffff;
}
.sign-to-login {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}
.biz-login-cs {
    width: 400px;
    display: flex;
    justify-content: space-between;
}
.biz-login-cs a {
    display: inline-block;
    text-decoration: underline;
}
.biz-login-cs a:hover {
    font-weight: 700;
}

/* 광고주 전용 로그인 페이지 */
.sign-up-right form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.sign-up-right form>input {
    border-radius: 50px;
    padding-left: 50px;
    width: 400px;
    height: 60px;
}
.auto_login {
    display: flex;
    align-items: center;
}
.sign-up-right input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    margin-right: 10px;
}
.sign-up-right input[type="checkbox"]:checked {
    content: "\2713";
    font-size: 16px;
    color: #ffffff;

    accent-color: #3ccbdb;
    background-color: #ffffff;
}
.reviewer_chk {
    width: 400px;
    display: flex;
    justify-content: flex-start;
    text-decoration: underline;
}
.reviewer_chk:hover {
    font-weight: 700;
}
.sng_sign {
    max-width: 400px;
}
.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;
    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;
}
/* 광고주 전용 가입 페이지 */
.join-right {
    padding: 50px 0;
    background-color: #ffffff;
    border-radius: 50px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;
}
.join-right h1 {
    font-size: 30px;
    text-align: center;
    font-weight: 700;
}
.join-right form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.join-right form .field_wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
}
.join-right form .field {
    border-radius: 5px;
    border: 1px solid #3ccbdb;
    padding: 0 0 0 20px;
    width: 450px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.join-right form .field>label {
    flex-shrink: 0;
    width: 100px;
}
.join-right form .field>input {
    flex-grow: 1;
    padding: 0;
    height: 100%;
    background-color: transparent;
    border: none;
}
.join-right .field_alert {
    color: #dc3545
}
.join-right .field .btn {
    padding: 0 10px;
    border-radius: 5px;
    border: 1px solid #3ccbdb;
    color: #3ccbdb;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 120px;
    height: 30px;
    font-size: 13px;
    margin-right: 20px;
}
.join-right .field .btn:hover {
    background-color: #3ccbdb;
    color: #ffffff;
}
.join-right .term_wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 450px;

}

.term_wrap > ul li + li {
    margin-top: 20px;
}
.term_wrap .term {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.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 .term.drop_btn{
justify-content: space-between;
cursor: pointer;
font-size: 14px;
}
.term_wrap .term.drop_btn.active img{
transform: rotate(180deg);
}

.term_wrap .dorp_wrap {
    display: none;
    margin-top: 18px;
}
.term_wrap .dorp_wrap .text {
    background-color: #F5F5FA;
    border-radius: 5px;
    padding: 15px 10px;
    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;
}
.join-right .biz-join {
    display: flex;
    justify-content: center;
}
.join-right .biz-join button {
    width: 400px;
    height: 60px;
    border-radius: 50px;
    font-size: 24px;
    border: 2px solid #3CCBDB;
    color: #3CCBDB;
}
.join-right .biz-join button:hover {
    background-color: #3CCBDB;
    color: #ffffff;
}
/* 사이드 메뉴 */
#side-menu {
    color: #fff;
}
#side-menu > .sticky {
    /*position: sticky;*/
    top: 0;
    max-height: 100%;
    /*overflow: scroll;*/
}

#side-menu .title {
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    padding: 50px 0 46px 0;
}
#side-menu .gnb {
    padding-left: 30px;
    color: #f6f6f6;
}
#side-menu .gnb li {
    position: relative;
    margin-bottom: 14px;
}
#side-menu .gnb li .icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 60px;
    z-index: 10;
}
#side-menu .gnb .link {
    position: relative;
    font-size: 18px;
    font-weight: 500;
    z-index: 1;
}
#side-menu .gnb .active {
    color: #444C67
}
#side-menu .gnb .link:before {
    content: "";
    position: absolute;
    top: 0;
    left: -15px;
    width: 0%;
    height: 100%;
    background-color: #F8F8FA;;
    border-radius: 30px;
    z-index: -1;
}

#side-menu .gnb .link .round {
    position: absolute;
    right: 0;
    width: 44px;
    height: 44px;
    background-color: #F8F8FA;;
    opacity: 0;
    overflow: hidden
    border-bottom: 1px solid #3CCBDB;
}
#side-menu .gnb .link .round:before {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 100%;
    background-color: #3CCBDB;
    background-color: #3CCBDB;;
}
#side-menu .gnb .link .round:first-child {
    top: -44px;
}
#side-menu .gnb .link .round:first-child:before {
    border-radius: 0px;
}
#side-menu .gnb .link .round:last-child {
    top: 100%;
}
#side-menu .gnb .link .round:last-child:before {
    border-radius: 0px;
}

#side-menu .gnb .active .link:before,#side-menu .gnb .seleced .link:before {
    width: 100%;
}
#side-menu .gnb .active .link .round,#side-menu .gnb .seleced .link .round {
    opacity: 0;
}
#side-menu .gnb .active .link .round:first-child:before,#side-menu .gnb .seleced .link .round:first-child:before {
    border-radius: 0px 0px 44px 0px;
}
#side-menu .gnb .active .link .round:last-child:before,#side-menu .gnb .seleced .link .round:last-child:before {
    border-radius: 0px 100% 0px 0px;
}
#side-menu .gnb .active .link:before,
#side-menu .gnb .active .link .round:first-child:before,
#side-menu .gnb .active .link .round:last-child:before,
#side-menu .gnb .seleced .link:before,
#side-menu .gnb .seleced .link .round:first-child:before,
#side-menu .gnb .seleced .link .round:last-child:before {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
#side-menu .gnb .link a {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 60px;
    padding-left: 50px;
    line-height: 60px;
}

#side-menu .gnb .active .link a,#side-menu .gnb .seleced .link a {
    color: #444C67;
}


#side-menu .gnb .drop-mueu {
    display: none;
    position: relative;
    margin: 20px 30px 0 0;
    z-index: 100;
}
#side-menu .gnb .active .drop-mueu {
    display: block;
}
#side-menu .gnb .seleced .drop-mueu{
    display: block;
}
#side-menu .gnb .drop-mueu .box {
    padding: 18px;
    border-radius: 20px;
    background-color: rgba(255,255,255,0.2);
}
#side-menu .gnb .drop-mueu .box a {
    display: block;
    padding: 5px 12px;
    border-radius: 18px;
    font-size: 16px;
    color: #fff;
}
#side-menu .gnb .drop-mueu .box a.active {
    background-color: #fff;
    color: #444;
    font-weight: 500;
}

#side-menu .gnb .drop-mueu .drops {
    font-size: 16px;
}
#side-menu .gnb .drop-mueu .drops + .drops {
    margin-top: 15px;
}
#side-menu .gnb .drop-mueu .drops .tit {
    display: block;
    padding: 5px 14px;
    border-radius: 18px;
    font-size: 16px;
    color: #f6f6f6;
    cursor: pointer;
    background-image: url(../img/icon/go_link.png);
    background-repeat: no-repeat;
    background-position: right 18px center;
}
#side-menu .gnb .drop-mueu .drops .tit .badge{
    background:#f6f6f6;
    color: #3CCBDB;
    border-radius: 10px;
    padding: 0 6px;
    font-size: 12px;
    margin-left: 5px;
    font-weight: 300;
}
#side-menu .gnb .drop-mueu .drops .tit.on{
background: #fff;
color: var(--primary-color);
background-image: url(../img/icon/go_link_on.svg);
background-repeat: no-repeat;
background-position: right 18px center;
border-radius: 15px;
padding: 10px 14px;
font-weight: 700;
}
#side-menu .gnb .drop-mueu .drops ul {
    margin-top: 10px;
    display: none;
}
#side-menu .gnb .drop-mueu .drops li {
    font-size: 15px;
    margin-bottom: 0px;
    padding: 0 10px;
}
#side-menu .gnb .drop-mueu .drops li a {
    padding: 0 !important;
    overflow: hidden; 
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 0 !important;
}
#side-menu .gnb .drop-mueu .drops li a:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    width: 3px;
    height: 3px;
    background-color: #f6f6f6;
}

#side-menu .gnb .drop-mueu .drops.active .tit {
    background-color: #fff;
    color: #444;
    font-weight: 500;
    background-image: url(../img/icon/arrow_down.png);
}
#side-menu .gnb .drop-mueu .drops.active ul {
    display: block;
}

/* 레이아웃 */
#container {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    /*height: 100%;*/
/*        background-color: #3CCBDB;*/
/*        background-color: #3CCBDB;*/
    margin-bottom: 180px;
    min-width: 1024px;
}

#container #side-menu {
    width: 290px;
    height: 100%;
    flex-shrink: 0;
    background-color: #3CCBDB;
    background-color: #3CCBDB;;
    background-image: url(../img/visual/wave_bg.png);
    background-repeat: no-repeat;
    background-position: left top;
    z-index: 100;
    min-width: 0;
}

#container #wrap {
    padding: 30px 40px;
    width: 100%;
    min-height: 100%;
    background-color: #F8F8FA;
    border-radius: 50px 0 0 50px;
    min-width: 0;
}
#container #wrap.mh700 {
    min-height: 700px;
}



.section-area {
    position: relative;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 10px 10px 10px rgba(212,212,223,0.2);
    -webkit-box-shadow: 10px 10px 10px rgba(212,212,223,0.2);
    padding: 25px 30px;
    margin-bottom: 25px;
}
.section-area:last-child {
    margin-bottom: 0;
}
.section-area.mh650 {
    min-height: 650px;
}

.section-area.projectAll{
background: #F8F8FA;
padding: 0;
min-height: initial;
box-shadow: none;
-webkit-box-shadow: none;
}


.section-area > article {
    position: relative;
    font-size: 16px;
}
.section-area .pagenate{
    display: inline-block;
}

.section-area > article .number {
    position: absolute;
    left: 0;
    top: 0;
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 23px;
    background-color: #3CCBDB;
    background-color: #3CCBDB;;
    color: #fff;
    font-family: 'roboto';
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-area > article > .title, .section-area > article > .head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    margin: 10px 0;
}
.section-area > article > .title .guideTxt {
    display: inline-block;
    padding-left: 10px;
}
.section-area > article > .title .unlimited_pass_date{
font-size: 14px;
border: 1px solid var(--primary-color);
border-radius: 15px;
padding: 3px 10px;
color: var(--primary-color);
font-weight: 500;
}
.section-area > article > .title .subscribe_btn{
display: flex;
flex: 1;
justify-content: center;
align-items: center;
gap: 15px;
}

.section-area.productDetail .status_cont{
display: flex;
justify-content: space-between;
align-items: center;
}


.section-area.productDetail .title_area{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0 20px 0;
}
.section-area.productDetail .title_area > div:first-child{
display: flex;
flex-direction: column;
gap:10px;
}
.section-area.productDetail .title_area a {
background-color: #3CCBDB;
color: #ffffff;
font-weight: 500;    
padding: 10px;
border-radius: 5px;
min-width: 100px;
min-width: 100px;
display: inline-block;
text-align: center;
}
.section-area.productDetail .title_area .right{
display: flex;
align-items: center;
justify-content: center;
gap:10px;
}
.section-area.productDetail .title_area .right a{
width: auto;
margin-top: 0;
}
.section-area.productDetail .cp_info{
display: flex;
flex-direction: column;
gap:10px;
}
.section-area.productDetail .cp_info .tag_area{
display: flex;
align-items: center;
justify-content: space-between;
max-width: 310px;

}
.section-area.productDetail .cp_info .tag_area > .cp_media_cont{
display: flex;
gap:10px;
}
.section-area.productDetail .cp_info .tag_area > .cp_media_cont > p{
display: flex;
gap:5px;
}
.section-area.productDetail .cp_info .tag_area .cp_recruit span{
display: flex;
gap:10px;
}

.section-area.productDetail .date{
padding: 10px 25px;
border: 1px solid #3ccbdb;
border-radius: 5px;
line-height: 1;
cursor: pointer;
}
.section-area.productDetail .date span{
font-weight: 700;
padding-left: 25px;
}

form .section-area {
    padding: 30px 20px;
}
form .section-area.required{
border: 1px solid var(--primary-color);
}

form .section-area > article {
    padding: 0 0px;
}
form .section-area > article > .title {
    font-size: 20px;
    font-weight: 500;
    line-height: 45px;
    margin-bottom: 15px;
}
form .section-area > article > .number + .title{
margin-left: 55px;
}

.guideTxt {
    font-size: 14px;
    color: #888;
    display: inline-block;
    padding-top: 10px;
}

.maxContent {
    height: 100% !important;
}

table.sticky th {
    position: sticky;
    top: 0;
    z-index: 1;
}




/* custom scrollbar */
.scroll-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.scroll-wrap::-webkit-scrollbar-thumb {
    background-color: #D2D2DF;
    border-radius: 10px;
}
.scroll-wrap::-webkit-scrollbar-track {
    background-color: #F4F5F9;
    box-shadow: inset 0px 0px 1px white;
}

/* 스텝 */
.step-area {
    position: relative;
    width: 650px;
    margin: 20px auto;
    padding: 9px 0 24px 0 !important;
    padding-top: 9px;
    padding-bottom: 24px;
}
.step-area .line {
    width: 100%;
    height: 2px;
    background-color: #D2D2DF;
    margin-bottom: 15px;
}
.step-area .line .step-line {
    width: 50%;
    float: left;
    width: 50%;
    height: 2px;
    background-color: transparent;
}
.step-area .line .step-line.on {
    background-color: #444C67
}
.step-area .stepBox {
    position: absolute;
    text-align: center;
    top: 0;
    color: #C4C4C4;;
    z-index: 1;
}
.step-area .stepBox:before {
    content: "";
    display: block;
    margin: 0 auto;
    margin-bottom: 7px;
    width: 11px;
    height: 11px;
    border: 4px solid #fff;
    border-radius: 9px;
    background-color: #D2D2DF;
}
.step-area .stepBox.on {
    color: #444C67
}
.step-area .stepBox.on:before {
    background-color: #3CCBDB;
    background-color: #3CCBDB;;               
}

.step-area .stepBox:nth-child(1) {
    transform: translateX(-50%);
}
.step-area .stepBox:nth-child(2) {
    left: 50%;
    transform: translateX(-50%);    
}
.step-area .stepBox:nth-child(3) {
    right: 0;
    transform: translateX(50%); 
}

.stiky-area {
    position: relative;
    height: 90px;
    overflow: hidden;
}
.stiky-area > article {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.stiky-area.fixed > article {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 90px;
    border-radius: 15px;
    z-index: 100;
    width: 1550px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 10px 10px 10px rgb(212 212 223 / 20%);
    -webkit-box-shadow: 10px 10px 10px rgb(212 212 223 / 20%);
    z-index: 8000;
}




/* 입력 필드 */
.field-group {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.field-group .field  {
    width: 50%;
    margin-right: 20px;
}
/*
#cp_opt_list {
    margin-top: 30px;
}
*/
#cp_opt_list .field-group {
    padding-right: 100px;
}
.field {
    position: relative;
    display: flex;
    min-height: 50px;
    justify-content: flex-start;
    align-items: center;
}
/*
.field.subject_area{
padding-bottom: 30px;
margin-bottom: 30px;
border-bottom: 1px solid #EDEDED;
}
*/
.field input,
.field select {
    height: 40px;
    width: 100%;
/*        border:none;*/
}
.field input[name='cp_opt_name[]']{
flex:1;
}

.field select#mb_join_path_biz{
padding-left: 0;
border:none
}
.field .field-tit {
    width: 170px;
    flex-shrink: 0;
    font-size: 16px;
}
.field .top {
    align-self: flex-start;
}

.field .field-tit.tit20 {
    padding-top: 12px;
    font-size: 20px;
    font-weight: 500;
    width: 190px;
}

.field + .field,
.field + .field-group,
.field-group + .field {
    margin-top: 30px;
} 

.field-group .field + .field {
    margin-top: 0;
    padding-left: 20px;
}

.field .auto-size {
    width: auto;
    margin-right: 38px;
}
.field .col2{
    width: 200px;
}
.field .col3 {
    width: 250px;
}
.field .col6 {
    width: 100%;
    max-width: 540px;
}

.field .phone-area {}
.field .phone-area select,
.field .phone-area input {
    width: 100px;
}
.field .phone-area span {
    padding: 5px;
}

.btn-add {
    display: inline-block;
    padding-left: 35px;
    line-height: 25px;
    background-image: url(../img/icon/btn-add.png);
    background-repeat: no-repeat;
    background-position: left center;
    cursor: pointer;
    white-space: nowrap;
}
.btn-add + .btn-add {
    margin-left: 40px;
}

.btn-remove {
    position: absolute;
    right: 0;
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
    padding-left: 35px;
    line-height: 25px;
    background-image: url(../img/icon/btn-remove.png);
    background-repeat: no-repeat;
    background-position: left center;
    cursor: pointer;
    white-space: nowrap;
}

.gray {
    color: #888;
}
.field-col-6 {
    display: flex;
    flex-grow: 1;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
}
.field-col-6 .option-tit {
    width: 80px;
    flex-shrink: 0;
    font-size: 16px;
    color: #888;
}
.field-col-6 input {
    flex-grow: 1;
}

.field-col-6 + .field-col-6 {
    margin-left: 20px;
    padding-left: 20px;
}

/*수정 필드*/
.field .verify_ {
    display: flex;
    justify-content: stretch;
    align-items: center;
    flex-grow: 1;
}
.field .verify_ .field {
    flex-grow: 1;
}
.field .verify_ .btn {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 115px;
    height: 60px;
    color: #3CCBDB;
    background-color: transparent;
    border-color: currentColor;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    margin-left: 10px;
}
.field .verify_ .btn:focus {
    background-color: #3CCBDB;
    border-color: #3CCBDB;
    color: #fff;
    box-shadow: none;
}
.field .check_wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-grow: 1;
}
.field .check_wrap .checkbox_ + .checkbox_ {
    margin-left: 100px;
} 

.field.cp_manuscript_fee span{
font-size: 18px;
font-weight: 600;
padding-left: 10px;
}
.field.cp_manuscript_fee .btn-group{
padding-left: 20px;
}

.field.cp_manuscript_fee .btn-group .btn{
min-width: initial;
font-size: 18px;
font-weight: bold;
height: auto;
line-height: normal;
padding: 10px 15px;
display: flex;
align-items: center;
gap:10px;
margin-right: 10px;
}

.field.cp_manuscript_fee .btn-group .btn.btn-white{
color: var(--primary-color);
}

.field.thumbnail{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.field.thumbnail .field-tit.tit20{
width: auto;
}

.field.thumbnail .tip{
padding-top: 10px;
padding-bottom: 2px;
font-size: 16px;
color: var(--primary-color);
border-bottom: 1px solid var(--primary-color);
width: fit-content;
cursor: pointer;
}

.field.sub_opt_price{
padding-bottom: 20px;
}
.field.sub_opt_price .div_sub_opt_price{
padding-right: 20px;
}
.field.sub_opt_price .tip{
position: absolute;
top: 50px;
left: 170px;
font-size: 16px;
color: var(--primary-color);
border-bottom: 1px solid var(--primary-color);
width: fit-content;
cursor: pointer;
}
.field .noti_box{
padding-top: 10px;   
}
.field .noti_box b{
color: #757575;
}
.field .noti_box > div{
display: flex;
align-items: center;
gap:5px;
}
.field .noti_box > div ~ div{
padding-left: 24px;
color: #757575;

}

/*체크*/
.checkBox {
    position: relative;
    display: inline-block;
    line-height: 30px;
    white-space: nowrap;
}
.checkBox input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
}
.checkBox input + label {
    padding-left: 30px;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: url(../img/icon/check_2px.svg);
    background-size: 22px;
    /* width: 22px; */
    /* height: 22px; */
}
.checkBox input.gray + label{
background-image: url(../img/icon/check_box_gray.svg);
}

.checkBox input:checked + label {
    background-image: url(../img/icon/checked_2px.svg);
}

.checkBox input.gray:checked + label {
    background-image: url(../img/icon/checked_box_gray.svg);
}


.checkBox3 {
    position: relative;
}
.checkBox3 input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    z-index: 10;
}
.checkBox3 input + label {
    display: inline-block;
    line-height: 50px;
    padding: 0 20px;
    color: #999999;
    background-color: #F8F8FA;
    border: 1px solid #EDEDED;
    border-right: 1px solid #F8F8FA;
    cursor: pointer;
}
.checkBox3 input:checked + label {
    background-color: #fff;
    color: #3CCBDB;
    border-color: #3CCBDB;
    border-right: 1px solid #3CCBDB !important;
    font-weight: 500;
}
.checkBox3 input.readonly:checked + label{
background-color: #F8F8FA;
}
input.readonly{
background-color: #f8f8fa;
}


/* input[type="checkbox"].chk{
display: none;
}
input[type="checkbox"].chk + label{
left: 0;
top: 0;
}
input[type="checkbox"].chk + label:before {
content: "";
cursor: pointer;
display: inline-block;
background-image: url('../img/icon/check_2px.svg');
width: 22px; 
height: 22px; 
background-size: cover;
}

input[type="checkbox"].chk:checked + label:before {
background-image: url('../img/icon/checked_2px.svg'); 
} */


/* 미션 선택*/
.check-area {
    display: flex;
    justify-content: flex-start;
}
.check-area li {
    position: relative;
}
.check-area li:first-child .checkBox3 input + label {
    border-radius: 5px 0px 0px 5px;
}
.check-area li:last-child .checkBox3 input + label {
    border-radius: 0px 5px 5px 0px;
    border-right: 1px solid #EDEDED;
}

.checkBox3 .mission + label {
    padding-left: 50px;
    background-repeat: no-repeat;
    background-position: left 15px center;
}

#cp_media_shop + label {
    background-image: url(../img/icon/shop.png);
}
#cp_media_shop:checked + label {
    background-image: url(../img/icon/shop_a.png);
}
#cp_media_place + label {
    background-image: url(../img/icon/place.png);
}
#cp_media_place:checked + label {
    background-image: url(../img/icon/place_a.png);
}
#cp_media_blog + label {
    background-image: url(../img/icon/blog.png);
}
#cp_media_blog:checked + label {
    background-image: url(../img/icon/blog_a.png);
}
#cp_media_instagram + label {
    background-image: url(../img/icon/instar.png);
}
#cp_media_instagram:checked + label {
    background-image: url(../img/icon/instar_a.png);
}
#cp_media_cafe + label {
    background-image: url(../img/icon/cafe.png);
}
#cp_media_cafe:checked + label {
    background-image: url(../img/icon/cafe_a.png);
}
#cp_media_youtube + label {
    background-image: url(../img/icon/youtube.png);
}
#cp_media_youtube:checked + label {
    background-image: url(../img/icon/youtube_a.png);
}

.mission-price-area {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 724px;
    height: 50px;
/*        border: 1px solid #EDEDED;*/
    border-radius: 5px;
}

.mission-price-area .mission-total {
    min-width: 147px;
    line-height: 50px;
    text-align: right;
    padding: 0px 20px;
    border-right: 1px solid #EDEDED;
}
.mission-price-area .mission-total span {
    padding-right: 5px;
    font-size: 18px;
    font-weight: 500;
}
.mission-price-area .mission-total.free{
font-size: 18px;
font-weight: 500;
color: #222;
}
.mission-price-area .mission-total.free #per_price{
color: #EF5D1A;
text-decoration-line: line-through;
}
.mission-detail {
    color: #888888;
    padding: 0 15px;
}
.mission-detail span + span:before {
    content: " + ";
}

/* 진행요일 */
.week-area {
    display: flex;
    justify-content: flex-start;
    position: relative;
}
.week-area li {
    text-align: center;
    margin-right: 20px;
}
.week-area li .checkBox input + label {
    padding-left: 24px;
    display: initial;
}

/* 툴팁 */

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

[data-tootip='noti']{
position: absolute;
padding: 16px 34px 16px 24px;
background: var(--red-100-color);
border-radius: 8px;
top: 74px;
right: -180px;
z-index: 1;
animation: tooltip .7s ease-in-out;
color: #fff;
font-size: 14px;
width: max-content;
}

[data-tootip='noti']::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(--red-100-color);
z-index: 1;
top: -12px;
left: 25px;
}

[data-tootip='noti'] img{
width: 10px;
height: 10px;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}

/* input date */
.dateTime {
    position: relative;
}
.dateTime input[type="date"] {
    position: relative;
    padding-left: 47px;
    background-image: url(../img/icon/calendar.png);
    background-repeat: no-repeat;
    background-position: left 16px top 15px;
}
.dateTime input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: -10px;
    top: 0;
    color: transparent;
    border: none;
    opacity: 0;
    cursor: pointer;
}

.dateTime input[type="text"] {
    position: relative;
    padding-left: 47px;
    background-image: url(../img/icon/calendar.png);
    background-repeat: no-repeat;
    background-position: left 16px top 50%;
}

.field .campaign {
    width: 600px;
    margin-right: 20px;
}

.temp-bot {
    margin-top: 60px;
    margin-bottom: 40px;
}
.btn-group {
    display: flex;
    justify-content: center;
}
.btn-group .btn {
    display: inline-block;
    min-width: 200px;
    height: 60px;
    line-height: 58px;
    border-radius: var(--border-round-L);
    border: 1px solid #3CCBDB;
    text-align: center;
    font-size: 20px;
    margin-right: 20px;
    padding: 0 25px;
}
.btn-group .btn:last-child {
    margin-right: 0;
}
.btn-group .btn-white {
    color: #3CCBDB;
    background-color: #fff;
}
.btn-group .btn-blue {
    color: #fff;
    background-color: #3CCBDB;
    box-shadow: 0px 10px 20px rgba(60,203,219,0.2);
    -webkit-box-shadow: 0px 10px 20px rgba(60,203,219,0.2);
}
.btn-group .btn-gray {
    color: #fff;
    border-color: #D2D2DF;
    background-color: #D2D2DF;
}
.floating_btn_cont{
display: flex;
gap:30px;
max-width: 950px;
width: 100%;
}
.floating_btn_cont button{
display: none;
}

.btn-group.floating{
position: sticky;
z-index: 1;
width: 100%;
left: 0;
bottom: 20px;
margin-top: 50px;
width: 100%;
max-width: 950px;
/*    background: var(--gradient-color) !important;*/
border-radius: 10px;
margin: 30px auto 0;
gap:20px;
display: flex;
flex-direction: column;
}

.btn-group.floating.error{
background: var(--red-100-color) !important;
}
.btn-group.floating input{
border-radius: var(--border-round-L);
background: none;
border: none;
color: #fff;
font-size: 20px;
font-weight: 500;
background: var(--gradient-color) !important;
width: 100%;
}
.btn-group.floating button{
width: 100%;
font-size: 20px;
padding: 22px 0;
border: 2px solid !important;
border-radius: 10px;
}

.Textcount {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 50px;
    color: #888888;
    padding: 0 20px;
}


/* upload */
.btn-upload {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
}
.btn-upload input {
    position: absolute;
    opacity: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.btn-upload input + label {
    display: inline-block;
    line-height: 1em;
    width: 100%;
    height: 100%;
}
.promo-img-cont{
display: flex;
}

.promo-img-area {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}
.promo-img-area + .promo-img-area {
    margin-left: 20px;
}
.promo-img-area .item {
    width: 100px;
    height: 100px;
/*        line-height: 100px;*/
    border: 1px solid #EDEDED;
    background-image: url(../img/icon/upload.png);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}
.promo-img-area .item .btn-upload {
    width: 100%;
    height: 100%;
}
.promo-img-area .item img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}
.promo-img-area .item:nth-child(3n) {
    margin-right: 0;
}

.promo-img-area .item .remove_img_thumbnail{
position: absolute;
z-index: 99;
top: 0;
right: 0;
background: rgba(0,0,0,0.3);
height: 23px;
}

.promo-img-area .item .remove_img_thumbnail img{
vertical-align: baseline;
}

.promo-img-area .item .remove_img{
position: absolute;
z-index: 99;
top: 0;
right: 0;
background: rgba(0,0,0,0.3);
height: 23px;
}

.promo-img-area .item .remove_img img{
vertical-align: baseline;
}


.field-bg {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 60px;
    flex-grow: 1;
    background-color: #F4F5F9;
    border-radius: 5px;
    padding: 0 22px;
}
.field-bg .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 460px;
}
.field-bg .item + .item {
    padding-left: 13px;
}

.photo-inner  {
    margin-left: 45px;
}
.photo-inner input {
    width: 100px;
    height: 40px;
    text-align: right;
    margin: 0 9px;
}


/* 미션 가이드 */
.temp-select {
    display: inline-block;
    margin-top: 20px;
}
.temp-select li {
    margin-bottom: 5px;
    font-style: 16px;
    padding: 8px 16px;
    border: 1px solid #EDEDED;
    background-color: #F8F8FA;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: #999;
    cursor: pointer;
}
.temp-select li.active {
    background-color: #fff;
    border-color: #3CCBDB;
    color: #3CCBDB;
}

.fxg {
    flex-grow: 1;
}
.borderBox {
    display: flex;
    justify-content: flex-start;
    border-radius: 5px;
}
.borderBox + .borderBox {
    margin-top: 10px;
    background-color: #F8F8FA;
    padding: 20px;
}
.borderBox textarea {
    flex-grow: 1;
    min-height: 154px;
    color: #222;
    resize: none;
}

.borderBox .guideText {
    font-size: 14px;
    white-space: pre-line;
    margin-left: 34px;
    color: #666666;
}
textarea {
    padding: 5px;
    padding-bottom: 15px;
    color: #222;
}

.paymentInfo img {
    vertical-align: middle;
    margin-right: 5px;
}
.paymentInfo td {
    height: 64px;
    font-size: 16px;
    border-bottom: 1px solid #EDEDED;
    color: #444444;
}
.paymentInfo td:first-child {
    font-weight: 500;
    color: #222222;
}

.paymentInfo .price {
    color: #3CCBDB;
}

.paymentInfo .price.cancel {
    text-decoration: line-through;
    color: #444;
    font-size: 16px;
}
.paymentInfo .price b {
    font-size: 22px;
    font-weight: 700;
}
.paymentInfo .price.cancel b {
    font-size: 16px;
    font-weight: 500;
}
.paymentInfo .newPrice {
    color: #3CCBDB;
    font-size: 22px;
    font-weight: 700;
    padding-left: 8px;
}

.paymentInfo .couponBtn{
    border: 1px solid #ccc;
    background: #fff;
    padding: 5px 10px;
    cursor: pointer;
}
.paymentInfo .method_list .checkBox{
margin-right: 10px;
}
.paymentInfo .method_list .checkBox:last-child{
margin-right: 0;
}
.guide-inner  {
    /* margin-left: 45px; */
}
.guide-inner input {
    width: 100px;
    height: 40px;
    text-align: right;
    margin: 0 9px;
}

/* 프로젝트 관리 */
.projectAdd {
    padding: 0;
    height: 90px;
    color: #888888;
    overflow: hidden;
}
.projectAdd > article {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
}
.projectAdd .link-area {
    margin-right: 20px;
}
.projectAdd .link-area a {
    display: block;
    width: 350px;
    line-height: 90px;
    padding: 0 30px;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    background-color: #454D56;
    border-radius: 0px 45px 45px 0;
    background-image: url(../img/icon/arrow_right.png);
    background-repeat: no-repeat;
    background-position: right 30px center;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.projectAdd .link-area a:hover {
    width: 380px;
}

.section-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
.section-group .section-area,
.section-group .section-inner {
    width: 50%;
    flex-grow: 1;
    margin-bottom: 0;
}

.section-group .section-area:last-child,
.section-group .section-area + .section-inner {
    margin-left: 30px;
}

.notice-b {
    position: relative;
    display: inline-block;
    padding-right: 13px;
}
.notice-b:after {
    position: absolute;
    right: 0;
    top: 0;
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #EB6161;
    margin-left: 5px;
}

.notice-his-area li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 54px;
    border-bottom: 1px solid #EDEDED;
    padding: 15px 0;
}

.notice-his-area li:last-child {
    border: none;
}
.notice-his-area li a:hover {
    text-decoration: underline;
}
.notice-his-area li .subject {
    flex-grow: 1;
    overflow: hidden; 
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 15px;
    color: #666666;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.notice-his-area li div:last-child,
.notice-his-area li .date {
    flex-shrink: 0;
    color: #888888;
}
.notice-his-area li .state {
    display: inline-block;
    width: 80px;
    line-height: 35px;
    text-align: center;
    border-radius: 18px;
    margin-right: 10px;
    color: #fff;
    background-color: #D2D2DF;
    flex-shrink: 0;
}
.notice-his-area li .state.on {
    background-color: #3CCBDB;
}

.tit-alt {
    padding-left: 20px;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
}
.tit-alt b {
    font-weight: 700;
    color: #3CCBDB;
}


/* 프로젝트 현황 */
.project-step-area {
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-step-area > img {
    margin: 0 90px;
}

.project-step-area .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap:30px;
}
.project-step-area .imgBox {
    display: flex;
    flex-shrink: 0;
    width: 122px;
    height: 122px;
    justify-content: center;
    align-items: center;
    border-radius: 66px;
    background-color: #F4F5F9;
/*        margin-right: 30px;*/
}
.project-step-area .textBox {
    flex-shrink: 0;
}
.project-step-area .imgBox img {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.project-status-area{
    display: flex;
    gap:20px;
    padding-top: 10px;
}
.project-status-area .box{
    flex: 1;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 15px;
}
.project-status-area .box:nth-child(1){
    background:#EDF8CF;
}
.project-status-area .box:nth-child(2){
    background:#D7F4FA;
}
.project-status-area .box:nth-child(3){
    background:#FFEBEB;
}

.project-status-area .box .left{
    display: flex;
    flex-direction: column;
    gap:20px;
}
.project-status-area .box .left .count{
    font-weight: 700;
    font-size: 60px;
    line-height: 1;
}
.project-status-area .box .left .text{
    font-weight: 500;
    font-size: 18px;
}
.project-status-area .box .right{
    
}

.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;
}


@media (max-width: 1440px) {
.project-step-area{
    padding-top: 20px; 
    gap:60px;
}
.project-step-area .imgBox{
    width: 80px;
    height: 80px;
    padding: 20px;
}

.project-step-area .imgBox img{
    width: 100%;
}

.project-step-area > img {
    margin: 0;
}

}

.project-step-area a:hover .imgBox > img {
    will-change: transform;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}
.project-step-area .textBox p {
    color: #888888;
    margin-bottom: 5px;
}  
.project-step-area .textBox h5 {
    font-style: 24px;
    font-weight: 400;
}
.project-step-area .textBox h5 b {
    font-weight: 700;
    color: #3CCBDB;
}

.project-his-table {
    font-size: 14px;
}
.project-his-table th {
    padding: 15px;
    text-align: center;
}
.project-his-table td { 
    text-align: center;
    padding: 22px;
    border-bottom: 1px solid #EDEDED;
}

.project-his-table .btn-fasDel,
.project-his-table .btn-fasAdd {
    display: inline-block;
    padding: 10px 29px;
    margin-top: 10px;
    border: 1px solid currentColor;
    border-radius: 25px;
}

.project-his-table .btn-fasDel {
    color: #EB6161;
}
.project-his-table .btn-fasAdd {
    color: #3CCBDB;
}

.project-his-table .person-area {
    display: inline-block;
    text-align: left;
}
.project-his-table.fixed {
    table-layout: fixed;
}
.project-his-table .count {
    font-size: 18px;
}
.project-his-table .state,
.project-his-table .link {
    display: inline-block;
    padding: 10px 30px;
    color: #3CCBDB;
    border: 1px solid currentColor;
    border-radius: 30px;
}
.project-his-table .state.end {
    color: #D2D2DF;
    background-color: #fff;
    border-color: #D2D2DF;
}
.project-his-table .state.on {
    color: #fff;
    background-color: #3CCBDB;
}
.project-his-table .state.noti {
    color: var(--red-100-color);
    border: 1px solid var(--red-100-color);
}

.project-his-table .date {
    display: inline-block;
    text-align: left;
}

.project-his-table .btn-link {
    padding: 10px 13px;
    color: #fff;
    background-color: #3CCBDB;
    border-radius: 8px;
    display: inline-block;
    margin-right: 10px;
    max-width: 110px;
    width: 100%;
    text-align: center;
}
.project-his-table .btn-link:last-child{
margin-right: 0;
}
.project-his-table .btn-link.edit{
    background-color: var(--red-100-color);
}
.project-his-table .btn-link.red_border{
background: #fff;
color: var(--red-100-color);
}


.project-his-table .btn-modify{
    padding: 10px 30px;
    color: #fff;
    background-color: #454D56;
    border-radius: 30px;   
}

.project-his-table .btn-date {
    padding: 10px 20px;
    color: #fff;
    background-color: #454D56;
    border-radius: 30px;   
}

.project-his-table + .btn-group {
    margin: 40px;
    margin-bottom: 10px;
}
.project-his-table + .btn-group .btn {
    width: 270px;
    font-size: 18px;
    color: #444444;
    border-color: #F4F5F9;
    background-color: #F4F5F9;
}

.project-his-table.list02 td {
    padding-left: 0;
    padding-right: 40px;
    text-align: right;
} 
.project-his-table.list02 td:last-child {
/*        padding-right: 0;*/
}
.project-his-table.list02 .state {
    font-size: 14px;
    padding: 6.25px 11.25px;
    width: 100px;
    text-align: center;
    display: inline-block;
    line-height: 1;
}

.prev-data-area {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.prev-data-area img {
    width: 100px;
    height: auto;
    max-height: 100%;
    border-radius: 5px;
}
.prev-data-area .info {
    flex-grow: 1;
    padding-left: 30px;
    text-align: left;
}
.prev-data-area .btn_wrap{
display: flex;
flex-direction: column;
gap:5px;
}
.prev-data-area .info .subscribe_date{
color:#888;
font-size: 12px;
}

.prev-data-area .info .pay_info{
background: #ECF9FB;
padding: 10px;
border-radius: 10px;
margin-top: 10px;
max-width: 50dvw;
}

/* 담당자 */
.section-group .section-inner {
    display: flex;
    justify-content: space-between;
    flex-flow: column;
}
.section-group .section-inner .section-area {
    width: 100%;
    margin-left: 0;
}

.section-group .section-inner .manager-area {
/*        max-height: 260px;*/
    flex-shrink: 0;
    flex-grow: inherit;
    background-image: url(../img/visual/manager_wave.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-color: #454D56;
    color: #fff;
}

.section-group .section-inner .manager-area article > div{
display: flex;
gap:55px;

}
.section-group .section-inner .manager-area article > div.title{
margin: 0;
padding-bottom: 15px;
}
.section-group .section-inner .manager-area article > div.title > div{
min-width: 128px;
}

.manager-area .info-area {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.manager-area .imgBox {
    width: 128px;
    height: 128px;
    border-radius: 69px;
    background-color: #fff;
    text-align: center;
    line-height: 128px;
/*        margin-right: 56px;*/
}
.manager-area .imgBox  img {
    vertical-align: middle;
}

.manager-area .textBox {
    flex-grow: 1;
}
.manager-area .textBox > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 500;
    margin: 10px 0;
}
.manager-area .textBox > div .ctg {
    width: 88px;
    flex-shrink: 1;
    color: #92979C;
}
.manager-area .textBox .btn {
    flex-grow: 1;
    margin-top: 10px;
    text-align: center;
    background-color: #fff;
    padding: 10px;
    border-radius: 25px;
    font-weight: 400;
    color: #454D56;
    max-width: 235px;
}
.manager-area .textBox .btn + .btn {
    margin-left: 9px;
}

.Qna li .subject a {
    padding: 10px;
    display: block;
}
.Qna li .subject a p:first-child {
    font-size: 18px;
}

.moreView {
    position: absolute;
    right: 30px;
    top: 30px;
    z-index: 1;
    width: 45px;
    height: 45px;
    border-radius: 23px;
    background-color: #F4F5F9;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/icon/more.png);
}

/* 알림 내역 */
.scroll-wrap {
    position: relative;
    padding-right: 30px;
    overflow-y: scroll;
    flex-grow: 1;
    flex-shrink: 1;
}
.scroll-wrap.inshdow {
    box-shadow: inset -15px -15px 30px #eee;
}
.scroll-wrap.pd0 {
    padding-right: 0;
}

.section-notice .scroll-wrap {
    position: relative;
    padding-right: 30px;
    overflow-y: scroll;
    flex-grow: 1;
    flex-shrink: 1;
}
.section-notice  .scroll-wrap.inshdow {
    box-shadow: inset -15px -15px 30px #eee;
}
.section-notice .scroll-wrap.pd0 {
    padding-right: 0;
}


.section-notice {
    display: flex;
    justify-content: space-between;
    flex-flow: column;
}
.section-notice > article {
    width: 100%;
    flex-shrink: 0;
    background: #fff;
}
.section-notice.projectAll > article{
padding: 40px 20px 0;
margin: 0;
border-radius: 12px;
box-shadow: 10px 10px 10px rgba(212,212,223,0.2);
}
.section-notice.projectAll > .pagenate{
border-radius: 0 0 12px 12px;
padding: 0;
margin: 0;
}
.section-notice.projectAll > .pagenate nav{
padding: 40px 20px;
}

.section-notice .btn-group {
    margin-top: 40px;
    margin-bottom: 10px;
}
.section-notice .btn-group .btn {
    width: 270px;
}
.section-notice .notice-his-area li {
    padding: 10px 0;
}
.section-notice .notice-his-area li:last-child {
    border-bottom: 1px solid #EDEDED;
}
.section-notice .notice-his-area li div {
    margin-right: 30px;
}
.section-notice .notice-his-area li div:last-child {
    margin-right: 0;
}
.section-notice .notice-his-area .btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 25px;
    border: 1px solid #454D56;
}

.section-noticeDetail .content {
    flex-grow: 1;
    width: 100%;
    margin-top: 25px;
}

.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 {
    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 .subject, .customer_details .tool {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.customer_details .tool {
    flex-shrink: 0;
}

.customer_details .tool .date {
    background-image: url(../img/icon/calendar.svg);
}

.customer_details .tool .views {
    background-image: url(../img/icon/eye.svg);
    margin-left: 30px;
}

.customer_details .tool .date, .customer_details .tool .views {
    background-repeat: no-repeat;
    background-position: left center;
    color: #999;
    padding-left: 34px;
}

.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;
}




/* 프로젝트 상세 */
.section-area .search-area {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #454D56;
    color : #fff;
    padding: 30px;
}
.section-area .search-area h3 {
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
    padding-right: 60px;
}
.section-area .search-area div {
    position: relative;
    flex-grow: 1;
}
.section-area .search-area input {
    width: 100%;
    background-color: transparent;
    border-bottom: 3px solid #fff;
    border-radius: 0;
    color: #fff;
    font-size: 18px;
}
.section-area .search-area .btn-search {
    right: 0;
    background-image: url(../img/icon/search_w.png);
}

.project-detail-area {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.project-detail-area .img-area {
    flex-shrink: 0;
    width: 200px;
    margin-right: 40px;
}
.project-detail-area .img-area .imgBox {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}
.project-detail-area .img-area .imgBox img {
    width: 100%;
    height: auto;
    max-height: 100%;
    border-radius: 5px;
}
.project-detail-area .img-area a {
    display: flex;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    background: var(--bg-gray);
    width: 100%;
    justify-content: center;
    align-items: center;
    gap:10px;
    line-height: 1;
}
.project-detail-area .table-area {
    flex-grow: 1;
}
.project-detail-area .table-area table {
    width: 100%;
    border-top: 1px solid #E4E8EE;
}
.project-detail-area .table-area table td {
    height: 50px;
    padding: 0 25px;
    color: #666666;
    border-bottom: 1px solid #E4E8EE;
}
.project-detail-area .table-area table td:first-child {
    text-align: center;
    background-color: #F4F5F9;
    color: #222222;
}

.project-detail-area .table-area .state{
    display: inline-block;
    padding: 10px 30px;
    color: #3CCBDB;
    border: 1px solid currentColor;
    border-radius: 30px;
}
.project-detail-area .table-area .state.end {
    color: #fff;
    background-color: #D2D2DF;
    border-color: #D2D2DF;
}

/* 리뷰어 현황 */
.reviewer-state-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.reviewer-state-area .item {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.reviewer-state-area .imgBox {
    display: flex;
    width: 70px;
    height: 70px;
    justify-content: center;
    align-items: center;
    border-radius: 66px;
    background-color: #F4F5F9;
    margin-right: 30px;
    min-width: 70px;
}
.reviewer-state-area .imgBox img {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.reviewer-state-area a:hover .imgBox > img {
    will-change: transform;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}
.reviewer-state-area .textBox p {
    color: #444444;
    margin-bottom: 5px;
}  
.reviewer-state-area .textBox h5 {
    font-size: 16px;
    font-weight: 400;
}
.reviewer-state-area .textBox h5 b {
    font-weight: 700;
    color: #3CCBDB;
    font-size: 18px;
}





/* 선정 내역 */
.tool-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    flex-direction: column;
}
.tool-area .btn {
    display: inline-block;
    line-height: 40px;
    border-radius: 5px;
    background-color: #ddd;
    background-repeat: no-repeat;
    background-position: left 14px center;
}
.tool-area .btn-back {
    width: 120px;
    background-color: #454D56;
    color: #fff;
    background-image: url(../img/icon/back.png);
    padding-left: 40px;
}
.tool-area .state {
    width: 140px;
    background-color: #ffffff;
    text-align: center;
    border: 1px solid #3CCBDB;
}

.tool-area .state.on {
    background-color: #3CCBDB;
    color: #ffffff;
    font-weight: 500;
}

.tool-area .btn-excel {
/*        background-color: #1E7145;*/
    background: #fff;
    color: #222;
/*        background-image: url(../img/icon/excel.png);*/
    padding: 8px;
    display: flex;
    align-items: center;
    gap:10px;
    line-height: 1;
    border: 1px solid var(--line-color);
}
.tool-area .btn-blue { /*알림 버튼 사용*/
    width: 120px;
    color: #fff;
    background-color: #3CCBDB;
    text-align: center;
}

.tool-area .right_box{
    display: flex;
    align-items: center;
    gap: 5px;   
}

.misstin-hist-table {
    table-layout: fixed;
/*        width: auto;*/
    font-size: 12px;
    margin-bottom: 10px;
}
.misstin-hist-table th {
    height: 60px;
/*        white-space: nowrap;*/
    word-break: keep-all;
    padding: 0 5px;
    position: sticky; 
    top: 0;
    z-index: 1;
}
.misstin-hist-table td {
    height: 80px;
    text-align: center;
    padding: 0px 5px;
    border-bottom: 1px solid #EDEDED;
    word-break: keep-all;
}
.misstin-hist-table .checkBox {
    line-height: 1;
}
.misstin-hist-table .checkBox input + label {
    padding-left: 20px;
    background-size: cover;
    width: 20px;
    height: 20px;
    display: inline-block;
}
.misstin-hist-table p {
    display: inline-block;
    text-align: left;
    padding: 2px 0;
}

.misstin-hist-table a:hover {
    text-decoration: none;
}
.misstin-hist-table em {
    color: #3CCBDB;
}

.misstin-hist-table .rv_advertiser_memo {
    max-width: 60%;
}
.misstin-hist-table .memo input {
    width: 213px;
    height: 55px;
}
.misstin-hist-table .memo textarea {
    width: auto;
    height: 55px;
    overflow: hidden;
    padding: 5px 10px;
    font-size: 14px;
    max-width: 60%;
    min-width: 100px;
}
.misstin-hist-table .memo button {
    vertical-align: top;
    font-weight: 400;
    width: 55px;
    height: 55px;
    border-radius: 5px;
    color: #3CCBDB;
    border: 1px solid #3CCBDB;
    margin-left: 5px;
}

@media (max-width:1440px) {
    .misstin-hist-table .memo{
        display: flex;
        align-items: center;
        
    }
    .misstin-hist-table .memo textarea{
        max-width: none;
        min-width: initial;
        flex:2;
    }
    .misstin-hist-table .memo button{
        font-size: 12px;
        width: 100%;
        height: 40px;
        max-width: 40px;
        flex: 1;
    }
}

.misstin-hist-table .tag,
.misstin-hist-table .link,
.misstin-hist-table .btn {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 20px;
    color: #454D56;
    border: 1px solid #454D56;
}
.misstin-hist-table .tag + .tag {
    margin-left: 3px;
}
.misstin-hist-table .tag.type01 {
    background-color: #3CCBDB;
    border-color: #3CCBDB;
    color: #fff;
}   
.misstin-hist-table .tag.type02 {
    border-color: #3CCBDB;
    color: #3CCBDB;
}

.misstin-hist-table .link {
    padding-left: 26px;
    background-image: url(../img/icon/clip.png);
    background-repeat: no-repeat;
    background-position: left 10px center;
}

.misstin-hist-table .btn-request {
    display: inline-block;
    width: 70px;
    padding: 7px;
    border-radius: 5px;
    background-color: #3CCBDB;
    color: #fff;
    cursor: pointer;
}

.misstin-hist-table .btn-editing {
    display: inline-block;
    width: 70px;
    padding: 7px;
    border-radius: 5px;
    background-color: #AAAAAA;
    color: #fff;
}

.misstin-hist-table .btn-check {
    padding-left: 25px;
    background-image: url(../img/icon/check_b.png);
    background-repeat: no-repeat;
    background-position: left 10px center;
}

.misstin-hist-table.type01 {
    position: absolute;
    left: 0;
    top: 0;
    width: 925px;
    z-index: 1;
    border-right: 1px solid #EDEDED;
}

.misstin-hist-table.type02 {
    width: 735px;
}

.misstin-hist-table.type03 {
    width: 825px;
}

.misstin-hist-table.type04 {
    width: 925px;
}

.misstin-hist-table.type05 {
    width: 1116px;
}

.scroll-wrap.table-scroll {
    padding-left: 925px;
    max-height: 970px;
    padding-right: 0;
}
.scroll-wrap.table-scroll.store_table {
    padding-left: 0;
    max-height: 970px;
    padding-right: 0;
}
/*  table 하나로 통합하면서 변경하는 CSS  
.scroll-wrap.table-scroll.store_table .misstin-hist-table {
    table-layout: fixed;
    width: 100%;
}

.scroll-wrap.table-scroll.store_table .misstin-hist-table th{
    white-space: initial;
    word-break: keep-all;
}

.scroll-wrap.table-scroll.store_table .misstin-hist-table td{
}

.scroll-wrap.table-scroll.store_table .misstin-hist-table td p{
    display: block;
    text-align: center;
}

.scroll-wrap.table-scroll.store_table .edit{
color: #3CCBDB;
font-weight: 700;
}

.scroll-wrap.table-scroll.store_table .scheduleEditBtn{
    font-weight: 400;
    border-radius: 5px;
    color: #3CCBDB;
    border: 1px solid #3CCBDB;
    max-width: fit-content;
    padding: 4px 6px;
    margin: 0 auto;
    cursor: pointer;
    font-size: 12px;
    display: inline-block;
}

.custombtn_p{
    background :#3CCBDB;
    color:#fff;
    border-radius: 5px;
    padding: 8px;
    font-weight: 400;
    line-height: 1.4;
}

/*  // table 하나로 통합하면서 변경하는 CSS  */

.scroll-wrap.table-scroll.store_table .edit{
color: #3CCBDB;
font-weight: 700;
}

.scroll-wrap.table-scroll.store_table .time{
text-align: center;
}

.scroll-wrap.table-scroll.store_table .scheduleEditBtn{
    font-weight: 400;
    border-radius: 5px;
    color: #3CCBDB;
    border: 1px solid #3CCBDB;
    max-width: fit-content;
    padding: 4px 6px;
    margin: 0 auto;
    cursor: pointer;
    font-size: 12px;
    display: inline-block;
}

input[type=datetime-local] {
    width: 105px;
    height: 30px;
    font-size: 12px;
    padding: 5px;
}
input[type=datetime-local] {
    position: relative;
    padding-right: 30px;
    background-image: url(../img/icon/select_down.png);
    background-repeat: no-repeat;
    background-position: right 8px center;
}
input[type=datetime-local]::-webkit-calendar-picker-indicator {
    position: absolute;
    display: block;
    right: -30px;
    top: 0;
    color: red;
    width: 100%;
    height: 100%;
    border: none;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 23px;
    opacity: 0;
    cursor: pointer;
}

.post-area {
    white-space: nowrap;
    font-size: 14px;
}
.post-area select,
.post-area input {
    height: 30px;
    padding: 5px;
    font-size: 14px;
}
.post-area select {
    width: 122px;
    background-position: right 10px center;
}
.post-area input {
    width: 172px;
}
.post-area button {
    width: 40px;
    height: 30px;
    border: 1px solid #454D56;
    border-radius: 5px;
    font-weight: 400;
}
.post-area  .btn-cancle {
    background-color: #454D56;
    color: #fff;
}




/* model pop */

.modal.on .btn-gorup{
display: flex;
gap: 20px;
padding: 0;
justify-content: center;
margin-top: 30px;
}

.modal.on .btn-gorup .close{
position: static;
border: 1px solid var(--primary-color,#3ccbdb);
color: var(--primary-color,#3ccbdb);
/*    max-width: 134px;*/
width: 100%;
border-radius: 5px;
text-align: center;
line-height: 50px;
font-size: 16px;
cursor: pointer;
}

.modal.on .dim{
display: block !important;
}
/* 선정 알림 모달 */
.modal.notice{
display: none;
}

.modal.notice.on{
position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    font-style: 16px;
}

.modal.notice.on .modal-content{
display: block;
max-width: 700px;
width: 100%;
border: 2px solid #3CCBDB;
}
.modal.notice.on .btn-gorup{
gap: 20px;
padding: 0px 40px;
}


.modal.notice.on .btn-gorup .btn{
flex: 1;
}

.modal.notice.on .btn-gorup button{
color: #3CCBDB;
}

.modal.notice.on .title h1{
background: red;
color: #fff;
text-align: center;
max-width: fit-content;
padding: 0 40px;
margin: 0 auto;
}


.modal.notice.on .notice {
border-radius: 10px;
border: 1px solid red;
padding: 14px;
margin-bottom: 20px;
}

.modal.notice.on .notice p{
font-size: 16px;
font-weight: 400;
 word-break: keep-all;
line-height: 2;
}
.modal.notice.on .notice .textBold{
font-weight: 700;
}
.modal.notice.on .notice .textBold .accent_color_red{
color: red;
}

.modal.notice.on .reviewerList{
max-height: 240px;
overflow-y: auto;
padding-right: 0;
}

.modal.notice.on .reviewerList table{
text-align: center;
table-layout: fixed;
}

.modal.notice.on .reviewerList table th, modal.notice.on .reviewerList table td{
padding: 14px 0 ;
}
.modal.notice.on .reviewerList table tbody td{
background: #fff;
}
.modal.notice.on .reviewerList table thead th{
background: #f4f5f9;
}


.modal.notice.on .reviewerList thead {
position: sticky;
top: 0;
}

.modal.notice.on .reviewerList td{
padding: 10px;
}

/* // 선정 알림 모달 */

/* 방문 일정 수정 요청 모달 */
.modal.visit{
display: none;
}

.modal.visit.on{
position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    font-style: 16px;
}

.modal.visit.on .modal-content{
display: block;
max-width: 600px;
width: 100%;
border: 2px solid #E4E8EE;
}

.modal.visit.on .btn-gorup .btn{
/*    max-width: 134px;*/
cursor: pointer;
border-radius: 5px;
min-width: auto;
width: 100%;
}


.modal.visit.on .campaignInfo{
font-size: 15px;
padding-bottom: 30px;
}
.modal.visit.on .campaignInfo div{
padding-bottom: 15px;

}
.modal.visit.on .campaignInfo div:last-child{
padding-bottom: 0;
}

.modal.visit.on  .campaignInfo div span:first-child{

}
.modal.visit.on form{}

.modal.visit.on textarea{
width: 100%;
min-height: 150px;
padding: 10px;
}

.modal.visit.on .textAreaCont > div{
font-weight: 700;
padding-bottom: 10px;
font-size: 16px;
}

/* // 방문 일정 수정 요청 모달 */


/* 방문 일정 확인 모달 */
.modal.visitConfirm{
display: none;
}

.modal.visitConfirm.on{
position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    font-style: 16px;
}

.modal.visitConfirm.on .modal-content{
display: block;
max-width: 500px;
width: 100%;
border: 2px solid #3CCBDB;
text-align: center;
}
.modal.visitConfirm.on .btn-gorup{
padding: 0 50px;
}

.modal.visitConfirm.on .btn-gorup .btn{
flex: 1;
cursor: pointer;
}
.modal.visitConfirm.on .btn-gorup input{
background: #fff;
color: #3CCBDB;
}

.modal.visitConfirm.on .campaignInfo{
font-size: 15px;
padding-bottom: 10px;
line-height: 2;
text-align: center;
}
.modal.visitConfirm.on .campaignInfo .accent{
color: #005E72;
}

.modal.visitConfirm.on  .campaignInfo div{
color: #3CCBDB;
}

.modal.visitConfirm.on  .campaignInfo div span:first-child{
font-weight: 700;

}

.modal.visitConfirm.on .desc{
text-align: center;
font-size: 18px;
color: #3CCBDB;
font-weight: 700;
padding: 14px 0 ;
}




.modal.visitConfirmList{
display: none;
}

.modal.visitConfirmList.on{
position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    font-style: 16px;
}

.modal.visitConfirmList.on .modal-content{
display: block;
max-width: 500px;
width: 100%;
border: 2px solid #3CCBDB;
text-align: center;
}
.modal.visitConfirmList.on .btn-gorup{
padding: 0 50px;
}

.modal.visitConfirmList.on .btn-gorup .btn{
flex: 1;
}
.modal.visitConfirmList.on .btn-gorup input{
background: #fff;
color: #3CCBDB;
}

.modal.visitConfirmList.on .campaignInfo{
font-size: 15px;
padding-bottom: 10px;
line-height: 2;
text-align: center;
}

.modal .visitConfirmList.on  .campaignInfo div{
color: #3CCBDB;
}



/* // 방문 일정 확인 모달 */

/* 썸네일 가이드 모달 */

.modal-content .pop_cont .head{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #E4E8EE;
padding-bottom: 15px;
}
.modal-content .pop_cont .head h2{
margin: 0;
}
.modal-content .pop_cont .head img{
max-width: 15px;
width: 100%;
}

.modal-content .pop_cont .body{
display: flex;
gap: 30px;
padding-top: 20px;
justify-content: space-evenly;
}

.modal-dialog .modal-content .pop_cont .closer{
position: static;
}
.modal-content .pop_cont .closer.btn{
background: var(--primary-color);
color: #fff;
position: static;
width: 100%;
border-radius: var(--border-round-S);
margin-top: 15px;
height: 40px;
line-height: 38px;
}
.modal-content .pop_cont .item{
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
max-width: 200px;
}
.modal-content .pop_cont .item:first-of-type .mark{
color: var(--primary-color);
font-weight: bold;
}
.modal-content .pop_cont .item:last-of-type .mark{
color: #F40000;
font-weight: bold;
}
.modal-content .pop_cont .item .text{
text-align: center;
line-height: 1.5;
font-size: 16px;
}
.modal-content .pop_cont .item .img_cont{

}
.modal-content .pop_cont .item .img_cont img{
width: 100%;
}

/* // 썸네일 가이드 모달 */

/* 회원가입 안내 모달 */
.modal-content#modal-join_event .body{
justify-content: center;   
}

.modal-content#modal-join_event .pop_cont .closer.btn{
margin-top: 25px;
}

/* //회원가입 안내 모달 */

.modal {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    font-style: 16px;
}
.modal .dim {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    z-index: 0;
}
.modal .modal-content {
    display: none;
    position: relative;
    min-width: 340px;
    border-radius: 15px;
    background-color: #fff;
    padding: 30px 30px;
    z-index: 1;
}

.modal .modal-content .closer {
    position: absolute;
/*        right: -19px;*/
    right: 0;
    top: 0;
    cursor: pointer;
}

.modal .modal-content .btn-group .btn {
    flex-grow: 1;
    margin-right: 6px;
}
.modal .modal-content .btn-group .btn:last-child {
    margin-right: 0;
}


.modal .modal-content .title {
    position: relative;
}
.modal .modal-content h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
}
.modal .modal-content h2 {
    font-weight: 700;
    margin-bottom: 10px;
}
.modal .modal-content input {
    width: 100%;
    height: 50px;
}
.modal .modal-content .body {
    position: relative;
}

 .modal .btn {
    display: inline-block;
    min-width: 200px;
    height: 50px;
    line-height: 48px;
    border-radius: 5px;
    border: 1px solid #3CCBDB;
    text-align: center;
    padding: 0 25px;
    font-size: 16px;
    font-weight: 400;
}

.modal .btn-blue {
    color: #fff;
    background-color: #3CCBDB;
    box-shadow: 0px 10px 20px rgba(60,203,219,0.2);
    -webkit-box-shadow: 0px 10px 20px rgba(60,203,219,0.2);
}


.modal-dialog {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    font-style: 16px;
}
.modal-dialog .dim {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    z-index: 0;
}
.modal-dialog .modal-content {
    display: none;
    position: relative;
    min-width: 582px;
    border-radius: 30px;
    background-color: #fff;
/*        padding: 30px 40px;*/
    padding: 30px;
    z-index: 1;
}

.modal-dialog .modal-content .closer {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    z-index: 9999;
}



.modal-dialog .modal-content .btn-group .btn {
    flex-grow: 1;
    margin-right: 6px;
}
.modal-dialog .modal-content .btn-group .btn:last-child {
    margin-right: 0;
}


.modal-dialog .modal-content .title {
    position: relative;
}
.modal-dialog .modal-content h1 {
    font-size: 24px;
    font-weight: 700;
/*        margin-bottom: 20px;*/
    text-align: center;
    line-height: 1;
}
.modal-dialog .modal-content h2 {
    font-weight: 700;
    margin-bottom: 10px;
}
.modal-dialog .modal-content input {
    width: 100%;
    height: 50px;
}
.modal-dialog .modal-content .body {
    position: relative;
}

 .modal-dialog .btn {
    display: inline-block;
    min-width: 200px;
    height: 50px;
    line-height: 48px;
    border-radius: 8px;
    border: 1px solid #3CCBDB;
    text-align: center;
    padding: 0 25px;
    font-size: 16px;
    font-weight: 400;
}

.modal-dialog .btn-blue {
    color: #fff;
    background-color: #3CCBDB;
    box-shadow: 0px 10px 20px rgba(60,203,219,0.2);
    -webkit-box-shadow: 0px 10px 20px rgba(60,203,219,0.2);
}

.modal-dialog.bottom_sheet{
align-items: flex-end;
}
.modal-dialog.bottom_sheet .modal-content{
bottom: 0;
width: 100%;
padding: 70px 20px;
border-radius: 8px 8px 0 0;
font-size: 16px;
font-weight: 500;
}
.modal-dialog.bottom_sheet .modal-content .closer{
top: 20px;
right: 20px;
}



#modal-brand {
    width: 500px;
}

#modal-brand .brandAdd button {
    display: block;
    width: 267px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 30px;
}

#modal-brand .brandList ul {
    background-color: #F8F8FA;
    border: 1px solid #EDEDED;
    border-radius: 5px;
    padding: 0 20px;
    font-size: 16px;
    height: 280px;
    overflow-y: scroll;
}
#modal-brand .brandList ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}
#modal-brand .brandList ul li .modal-brandName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 300px;
}
#modal-brand .brandList ul li + li {
    border-top: 1px solid #EDEDED;
}

#modal-brand .brandList ul li + li > div:last-child{
display: flex;
gap: 5px;
align-items: center;
}

#modal-brand .brandList .select {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    border-radius: 15px;
    overflow-y: hidden;
}
#modal-brand .brandList .select input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}
#modal-brand .brandList .select input + label:before {
    display: inline-block;
    vertical-align: middle;
    content: "선택";
    width: 70px;
    line-height: 30px;
    text-align: center;
    background-color: #D2D2DF;
}
#modal-brand .brandList .select input:checked + label:before {
    content: "선택 됨";
    background-color: #3CCBDB;
}

#modal-brand .brandList .delete {
     position: relative;
     display: inline-block;
     vertical-align: middle;
     color: #fff;
     border-radius: 15px;
     overflow-y: hidden;
}
#modal-brand .brandList .delete input {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     cursor: pointer;
     opacity: 0;
}
#modal-brand .brandList .delete input + label:before {
     display: inline-block;
     vertical-align: middle;
     content: "삭제";
     width: 70px;
     line-height: 30px;
     text-align: center;
     background-color: #dc3545;
}

#modal-details {
    width: 500px;
}
#modal-details .desc {
    font-size: 14px;
    color: #888888;
}
#modal-details .details {
    margin-top: 15px;
}
#modal-details .details h5 {
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 10px;
}
#modal-details .details table {
    table-layout: fixed;
}
#modal-details .details table th {
    text-align: center;
    padding: 5px 0;
}
#modal-details .details table td:nth-child(1) {
    width: 30%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#modal-details .details table td {
    text-align: center;
    padding: 10px 0;
}
#modal-details .payments {
    margin-top: 15px;
}
#modal-details .payments h5 {
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 10px;
}
#modal-details .payments input {

}

#modal-modify {
    width: 500px;
    font-size: 16px;
}
#modal-modify .reviewer-info {}
#modal-modify .reviewer-info li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
}
#modal-modify .reviewer-info li div:first-child {
    width: 140px;
    padding-left: 13px;
    background-image: url(STATIC/img/icon/list.png);
    background-repeat: no-repeat;
    background-position: left center;
}

#modal-modify .msgBox {
    width: 100%;
    padding: 15px 20px;
    min-height: 120px;
    background-color: #F8F8FA;
    border-radius: 5px;
    margin-top: 20px;
}

#modal-modify .btn {
    color : #3CCBDB;
}
#modal-modify .btn-blue {
    width: 160px;
    color: #fff;
}

#modal-find {
    width: 500px;
    font-size: 16px;
}

#modal-find .field {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 10px;
    background-color: transparent;
    height: auto;
    padding: 0;
}

#modal-find .field label {
    width: 120px;
    font-weight: 500;
    color: #222222;
}

#modal-find .btn_area {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}


#modal-user_feedback{
max-width: 390px;
width: 100%;
padding: 40px;
}

#modal-user_feedback p{
font-size: 16px;
padding-bottom: 30px;
}
#modal-user_feedback textarea{
border-radius: 5px;
border: 1px solid #EDEDED;
background: #FFF;
width: 100%;
height: 165px;
padding: 20px 25px;
}

#modal-user_feedback .btn_wrap{
max-width: 230px;
font-size: 16px;
margin: 0 auto;
padding-top: 40px;
}
#modal-user_feedback .feedback_send{
padding: 13px 20px;
border-radius: var(--border-round-S);
width: 100%;
display: inline-block;
text-align: center;
}









}
#modal-user_feedback.new{
max-width: 490px;
min-width: auto;
width: 100%;
padding: 40px;
}

#modal-user_feedback.new h1{
text-align: left;
padding-bottom: 20px;
border-bottom: 1px solid #EDEDED;
}
#modal-user_feedback.new p{
font-size: 16px;
padding-bottom: 10px;
}
#modal-user_feedback.new textarea{
border-radius: 10px;
border: 1px solid var(--primary-color);
background: #FFF;
width: 100%;
height: 165px;
padding: 10px;
}

#modal-user_feedback.new .btn_wrap{
max-width: 230px;
font-size: 16px;
margin: 0 auto;
padding-top: 40px;
}
#modal-user_feedback.new .feedback_send{
padding: 13px 20px;
border-radius: var(--border-round-S);
width: 100%;
display: inline-block;
text-align: center;
}




.star_rating {
display: flex;
gap: 5px;
padding: 20px;
border: 1px solid var(--primary-color);
border-radius: 10px;
justify-content: space-between;
margin-bottom: 30px;
}

.star {
cursor: pointer;
font-size: 24px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
font-weight: 700;
gap: 10px;
}





.modal-dialog .btn-gorup {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.modal-dialog .btn-gorup .btn {
    min-width: auto;
    text-align: center;
    padding: 0 10px;
    flex-grow: 1;
    cursor: pointer;
}
.modal-dialog .btn-gorup .btn + .btn {
    margin-left: 10px;
}

.term_wrap {
    width: 580px;
}
.term_wrap > ul li {

}
.term_wrap > ul li + li {
    margin-top: 20px;
}
.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/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/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: 15px 10px;
    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;
}

.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;
    cursor: pointer;
}
.checkbox_ input + label:before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 0px;
    margin-right: 5px;
    background-image: url(../img/icon/check.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.checkbox_ input:checked + label:before {
    background-image: url(../img/icon/checked.png);
/*
    box-shadow: 0px 3px 6px #3ccbdb;
    -webkit-box-shadow: 0px 2px 3px #3ccbdb;
*/
}



#new_service_price{
display: none;
}

.service_price_td.new{}

.service_price_td.new #service_price{
text-decoration: line-through;
}

.service_price_td.new #new_service_price{
display: inline-block;
color: var(--theme-color);
font-weight: 700;
padding-left: 5px;
}



/* 쿠폰 페이지 */



.coupon .section-area{
display: flex;
gap: 20px;
flex-direction: column;
}
.coupon .container{
display: flex;
gap:30px;
}

.coupon .container .item{
padding: 20px;
border-radius: 20px;
box-shadow: 0px 4px 5px rgba(100,100,100,0.3);
}
.coupon .container .item.banner{
padding:0;
}

.coupon .container .item h2{
font-weight: 900;
font-size: 35px;
color: var(--primary-color);
padding-bottom: 20px;
}

.coupon .container .item form{
display: flex;
gap:16px;
}

.coupon .container .item input{
width: auto;
height: auto;
border-radius: 50px;
background: var(--theme-bg-color);
border: none;
font-size: 14px;    
}

.coupon .filter{
display: flex;
justify-content: flex-end;

}

.coupon .filter select{
border-radius: 15px;
border-color: #DDDDDD;
height: auto;
padding-top: 15px;
padding-bottom: 15px;
}

.coupon .list{
height: 500px;
max-height: 500px;
overflow-y: scroll;
}

.coupon .list .item{
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
}



.coupon .list .item .status{
padding-left: 25px;
padding-right: 25px;
}

.coupon .list .item .coupon_box{
padding: 20px;
border-radius: 20px;
box-shadow: 0px 4px 5px rgba(100,100,100,0.3);
width: 100%;
max-width: 370px;
background: url(../../STATIC/img/visual/coupon.png);
background-size: cover;
background-repeat: no-repeat;
aspect-ratio: 20 / 9;
}
.coupon .list .item .leftBox{
display: flex;
gap: 60px;
align-items: center;
flex: 1;
}

.coupon .list .item .rightBox{
padding-right: 20px;
}
.coupon .list .item .coupon_box h2{
color: var(--accent-color);
font-weight: bold;
font-size: 34px;
padding-bottom: 10px;
}

.coupon .list .item .coupon_box .coupon_name{
font-weight: bold;
padding-bottom: 10px;
}

.coupon .list .item .coupon_box .minPrice, .coupon .list .item .coupon_box .expiration{
font-size: 12px;
color: #727272;
}

.coupon .nonCoupon{
display: flex;
justify-content: center;
}

#coupon_modal{
position: fixed;
left: 0;
top: 0;
z-index: 9999;
width: 100%;
height: 100%;
display: none;
justify-content: center;
align-items: center;
}
#coupon_modal.show{
display: flex;
}

#coupon_modal .dimmed{
position: absolute;
left: 0;
top: 0;
background: #AEAEAE;
width: 100vw;
height: 100vh;
opacity: .5;
z-index: 9998;
}

#coupon_modal .modal{
max-width: 440px;
width: 100%;
padding: 25px 20px;
background: #fff;
border-radius: 30px;
z-index: 9999;
position: initial;
height: auto;
display: block;
}

#coupon_modal .modal .head{
display: flex;
justify-content: space-between;
padding-bottom: 20px;
align-items: center;
border-bottom: 1px solid #E4E8EE;
}

#coupon_modal .modal .th{
display: flex;
justify-content: space-between;
padding-bottom: 10px;
padding-right: 20px;
font-weight: 500;
border-bottom: 1px solid #000;
}

#coupon_modal .modal .coupon_list{
display: flex;
flex-direction: column;
gap:20px;
padding: 14px 0;
max-height: 440px;
min-height: 150px;
overflow-x: auto;
overflow-y: auto;
}
#coupon_modal .modal .coupon_list:has(.empty){
    justify-content: center;
}
#coupon_modal .modal .coupon_list .empty{
text-align: center;
}

#coupon_modal .modal .coupon_list .item{
display: flex;
gap:10px;
width: 100%;
height: auto;
flex-direction: column;
border-radius: 10px;
padding: 15px 10px;    
border: 1px solid #E4E8EE;
}
#coupon_modal .modal .coupon_list .item:has(input:checked){
background-color:#ECF9FB; 
border: 1px solid var(--primary-color);
}
#coupon_modal .modal .coupon_list .item label{
font-size: 16px;
font-weight: 500;
}

#coupon_modal .modal .coupon_list .item.nocoupon{
justify-content: center;
}
#coupon_modal .modal .coupon_list .item .discount{
color: var(--theme-color);
font-size: 14px;

}
#coupon_modal .modal .coupon_list .item .discount span{
font-size: 16px;
font-weight: 900;
}



#coupon_modal .modal .coupon_list .item .coupon_info{
border-top: 1px solid #E4E8EE;
padding-top: 10px;
}
#coupon_modal .modal .coupon_list .item .coupon_info .co_name{
font-size: 16px;
font-weight: 500;
}
#coupon_modal .modal .coupon_list .item .coupon_info .d-day{
color: var(--red-100-color);
font-weight: 700;
}


#coupon_modal .modal .customBtn{
border-radius: 10px;
padding: 10px 15px;
}

#coupon_modal .modal .confirm{
padding-top: 20px;
text-align: center;
}
#coupon_modal .modal .confirm button{
width: 100%;
}

#coupon_modal .close_btn{
cursor: pointer;
}


/* // 쿠폰 페이지 */


/* 메세지 모달 */
#modal-message{
max-width: 1200px;
width: 100%;
padding: 0;
overflow: hidden;
max-height: 80dvh;
height: 100%;
background: var(--bg-gray-color);
color: #666;
}
#modal-message.modal-content .closer{
position: static;
}
#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: 15px 20px 14px 0;
display: flex;
justify-content: space-between;
align-items: center;

}
#modal-message .flex_box .left .head > div{
cursor: pointer;
}
#modal-message .flex_box .left .tab{

}
#modal-message .flex_box .left .tab span{
padding: 25px 22px;
}
#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;
}

#modal-message .flex_box .left .selectBox .brand_select .select__{
background-image: url(/skin/demo/img/icon/tool/select_down.svg);
border: 1px solid #EDEDED;
}
#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{
width: 60px;
height: 60px;
border-radius: 50px;
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;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
#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: #000;
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;
align-items: center;
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 .receiver .item > img{
width: 50px;
height: 50px;
border-radius: 50px;
object-fit: cover;
}
#modal-message .flex_box .right .head .user_info{
width: 60%
}
#modal-message .flex_box .right .head .user_info img{
width: 50px;
height: 50px;
border-radius: 50px;
object-fit: cover;
}
#modal-message .flex_box .right .head .user_info .user{
display: flex;
align-items: center;
gap: 15px;
}
#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 .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;
justify-content: space-between;
}

#modal-message .flex_box .right .cp_list_cont > .item{
cursor: pointer;
}
#modal-message .flex_box .right .cp_list_cont .item > span{
min-width: 80px;
}
#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{
padding: 10px 0;
/*    border-top: 1px solid #E4E8EE;*/
width: 100%;
justify-content: flex-end;

}
#modal-message .flex_box .right .cp_list_cont .more_item .item:first-child .cp_info{
border-top: 0;
padding-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.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;*/

}
#modal-message .flex_box .right .cp_list_cont .open img{
transition: all .2s;
}

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

#modal-message .flex_box .right .message_cont{
height: calc(100%  - 80px - 82px);
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 - 80px);
}
#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;
}
#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 .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: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 .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;
}
#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;
width: 360px;
}

#modal-message .add_message_btn{
padding: 5px;
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,
#modal-message .flex_box .right .typing_cont textarea::-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,
#modal-message .flex_box .right .typing_cont textarea::-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,
#modal-message .flex_box .right .typing_cont textarea::-webkit-scrollbar-track{
    background-color: transparent;
    opacity: 0;
}

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




#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;
}


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


#mission_confirm_modal .modal-layer .btn_wrap{
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){
#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: 22px;
    color: #222;
    font-weight: 500;
    border-bottom: 1px solid #E4E8EE;
}
#modal-message .mobile_head .closer img{
    max-height: 18px;
}
#modal-message .flex_box{
    height: calc(100dvh - 80px);    
}

#modal-message .flex_box > .left{
    flex: none;
    width: 100dvw;
    transition: width .2s;
}

#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: 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 .message_cont{
        height: calc(100% - 61px - 80px - 80px - 72px);
}

}

/*
#modal-message .flex_box .message_cont::-webkit-scrollbar {
    width: 15px;
    background-color: transparent;
}
#modal-message .flex_box .message_cont::-webkit-scrollbar-thumb {
    background-color: #D0D2D7;
    border: 5px solid #fff;
    border-radius: 15px;
    cursor: pointer;
    opacity: 0;
}
#modal-message .flex_box .message_cont::-webkit-scrollbar-track {
    background-color: transparent;
    opacity: 0;
}




/* 보고서 페이지 */
/* TODO: css 적용시 .manager-area관련 css 제거후 아래 내용 적용하기. - 적용후 충돌나는 부분 없는지 확인하기 */

.report{
display: flex;
flex-direction: column;
gap:30px;
}
.report section[data-section]{
box-shadow: none;
background: none;
margin: 0;
padding: 0;
}

.report section[data-section] h2{
font-weight: 700;
font-size: 24px;
line-height: 36px;
color: #222;
} 


/*
.report section[data-section] .swiper-wrapper .item{
max-width: 253px;
}

*/




.report section[data-section] .swiper-button-next,
.report section[data-section] .swiper-button-prev{
max-width: 48px;
max-height: 48px;
width: 100%;
height: 100%;
transition: opacity .5s;
}
.report section[data-section] .swiper-button-next{
background: url(../../STATIC/img/icon/swiper_arrow_right.svg);
}
.report section[data-section] .swiper-blur-right{
position: absolute;
right:0;
top: 0;
max-width: 120px;
width: 100%;
height: 100%;
z-index: 1;
}

.report section[data-section] .swiper-blur-left{
position: absolute;
left:0;
top: 0;
max-width: 120px;
width: 100%;
height: 100%;
z-index: 1;
}

.report section[data-section] .swiper-button-prev{
background: url(../../STATIC/img/icon/swiper_arrow_left.svg);
}

.report section[data-section] .swiper-button-next::after,
.report section[data-section] .swiper-button-prev::after{
display: none;
}

.report section[data-section] .swiper-button-disabled{
opacity: 0;
}


.report [data-section='1'] .flex_box{
display: flex;
gap:30px;
}

.report [data-section='1'] .table.grid-table {
display: grid;
grid-template-columns: 1fr 2fr;
grid-auto-rows: minmax(32px, auto);
font-size: 14px;
padding-bottom: 0px;
column-gap: 10px;
color: #fff;
}

.report [data-section='1'] .header-cell{
align-items: center;
color: #fff;
}

.report [data-section='1'] .body-cell{
flex-direction: column;
border: none;
color: #fff;
padding: 0;
white-space: normal;
word-break: break-word;
}

.report [data-section='1'] .body-cell img{
max-width: 28px;
}

.report [data-section='1'] .body-cell.cp_subject{
padding-bottom: 9px;
}

.report [data-section='1'] .body-cell .media_cont{
display: flex;
align-items: center;
gap:12px;
flex-wrap: wrap;
}

.report [data-section='1'] .body-cell .media{
display: flex;
align-items: center;
gap:12px;
}
.report [data-section='1'] .body-cell span{
word-break: keep-all;
}


.report [data-section='1'] .header-cell, .body-cell {
display: flex;
text-align: left;
font-size: 16px;
}

.report [data-section='1'] .header-cell:nth-child(odd) {
word-break: keep-all;
align-items: flex-start;

}

.report section[data-section='1'] .item[data-item='1'] .th span {
position: relative;
padding-left: 10px;
font-weight: 700;
}
.report section[data-section='1'] .item[data-item='1'] .th span::before{
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
margin-right: 6px;
width: 6px;
height: 6px;
background: var(--theme-color);
border-radius: 50%;
}


.report section[data-section='1'] .white{
color: #fff;
}

.report section[data-section='1']{
padding: 0;
display: flex;
gap:30px;
background: transparent;
box-shadow: none;
}

.report section[data-section='1'] .item{
flex:1;
padding: 25px 30px 34px;
border-radius: var(--standard-radius);
box-shadow: var(--box-shadow);
}

.report section[data-section='1'] .item[data-item='1'] h2{
padding-bottom: 24px;
}

.report section[data-section='1'] .item[data-item='1']{
background-image: url(../img/visual/Intersect.png);
background-repeat: no-repeat;
background-position: right;
background-color: #454D56;
color: #fff;
}

.report section[data-section='1'] .item[data-item='1'] .info-area{
display: flex;
align-items: center;
gap:28px;
}

.report section[data-section='1'] .item[data-item='1'] .imgBox{
max-width: 120px;
max-height: 120px;
width: 100%;
height: 100%;
margin: 0;
line-height: 120px;
}


/*
.report section[data-section='1'] .item[data-item='1'] .textBox{
display: flex;
gap:36px;
}

.report section[data-section='1'] .item[data-item='1'] .textBox > .info{
display: flex;
flex-direction: column;
text-align: left;
align-items: flex-start;
gap:6px;
}

.report section[data-section='1'] .item[data-item='1'] .th{
font-weight: 700;
word-break: keep-all;
}
*/
/*
.report section[data-section='1'] .item[data-item='1'] .th::before{
content: "";
display: inline-block;
position: relative;
left: 0;
transform: translateY(-50%);
margin-right: 6px;
width: 6px;
height: 6px;
background: var(--theme-color);
border-radius: 50%;
}
*/
/*
.report section[data-section='1'] .item[data-item='1'] .td{
font-weight: 400;
word-break: keep-all;
}
.report section[data-section='1'] .item[data-item='1'] .td.mission{
display: flex;
gap:20px;
}

.report section[data-section='1'] .item[data-item='1'] .td.mission span{
display: flex;
gap:10px;
}
*/

.report section[data-section='1'] .item[data-item='2']{
background: #fff;
}



.report section[data-section='1'] .item[data-item='2']{
display: flex;
flex-direction: column;
gap:20px;
}

.report section[data-section='1'] .item[data-item='2'] .info{
display: flex;
gap:15px;
flex-direction: column;
}

.report section[data-section='1'] .item[data-item='2'] .info .th{
display: flex;
justify-content: space-between;
padding: 15px 0;
background: var(--bg-gray);
}
.report section[data-section='1'] .item[data-item='2'] .info .th p{
flex: 1;
text-align: center;
word-break: keep-all;
}

.report section[data-section='1'] .item[data-item='2'] .info .td{
display: flex;
justify-content: space-between;
padding-bottom: 15px;
border-bottom: 1px solid #E4E8EE;
}

.report section[data-section='1'] .item[data-item='2'] .info .td > div{
flex: 1;
text-align: center;

}



.report section[data-section='2']{
display: flex;
flex-direction: column;
gap:20px;

}

.report section[data-section='2'] .board{
display: flex;
gap: 30px;
flex-wrap: wrap;
}

.report section[data-section='2'] .item{
background: #fff;
box-shadow: var(--box-shadow);
border-radius: var(--standard-radius);
display: flex;
align-items: center;
/*    flex-shrink:0;*/
flex: 1;
}

@media (max-width:1620px){
.report section[data-section='2'] .item{
    flex: initial;
    width: calc(50% - 30px);
}
}

.report section[data-section='2'] .item .graph{
/*    width: 100%;*/
/*    height: 100%;*/
}

.report section[data-section='2'] .item .info{
display: flex;
flex-direction: column;
color: #666;
flex:1;
flex-shrink: 0;
padding-right: 30px;
}

.report section[data-section='2'] .item .info .ctg{
font-weight: 500;
font-size: 20px;
line-height: 30px;
padding-bottom: 12px;
color: #222;
word-break: keep-all;
}
.report section[data-section='2'] .item .info div span{
font-weight: 500;
font-size: 16px;
line-height: 24px;
}

.report section[data-section='2'] .item .info div .num{
font-weight: 700;
font-size: 20px;
line-height: 23px;
}

.report section[data-section='2'] .item .info .accent{
font-weight: 700;
font-size: 20px;
line-height: 23px;    
}

.report section[data-section='2'] .item .info .accent_color_01{
color:#3CCBDB;
}
.report section[data-section='2'] .item .info .accent_color_02{
color:#FF8B8B;
}
.report section[data-section='2'] .item .info .accent_color_03{
color:#809DEE;
}
.report section[data-section='2'] .item .info .accent_color_04{
color:#FFBF40;
}


.report section[data-section='3']{
background: #fff;
padding: 25px 0 ;
border-radius: var(--standard-radius);
}

.report section[data-section='3'] .board{
background: #fff;
padding: 0 30px ;
border-radius: var(--standard-radius);
}
.report section[data-section='3'] .board h2{
 display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 20px;
}

.report section[data-section='3'] .board .nonKeyword{
display: flex;
justify-content: center;
width: 100%;
}

.report section[data-section='3'] .board h2 .addKeyword{

border-radius: 5px;
padding: 8px 14px;
font-weight: 500;
font-size: 16px;
line-height: 24px;
gap:8px;
}

.report section[data-section='3'] .swiper{
padding-bottom: 35px;
}

.report section[data-section='3'] .board .item{
border: 1px solid #E4E8EE;
border-radius: var(--standard-radius);
padding: 30px;
transform:initial;
cursor: pointer;
}

.report section[data-section='3'] .board .item.active{
border: 2px solid var(--primary-color);
box-shadow: 0px 10px 20px rgba(32, 171, 198, 0.1);
}




.report section[data-section='3'] .board .item .keyword{
font-weight: 500;
font-size: 20px;
line-height: 24px;
padding-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}

.report section[data-section='3'] .board .item .keyword span:first-child{
white-space: nowrap;
overflow: hidden; 
text-overflow: ellipsis;
}

.report section[data-section='3'] .board .item .keyword .edit{
display: none;
padding: 9px;
background: #E4E8EE;
border-radius: 5px;
line-height: .8;
}

.report section[data-section='3'] .board .item .keyword .edit.on{
display: inline-block;
}

.report section[data-section='3'] .board .item .searchCount{
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #888;
padding-bottom: 10px;
display: inline-block;
}

.report section[data-section='3'] .board .item .info{
font-weight: 400;
font-size: 16px;
line-height: 30px;
color: #222;
}



.report section[data-section='3'] .board .item .info p{
display: flex;
justify-content: space-between
}
.report section[data-section='3'] .board .item .info .ctg{
display: flex;
gap: 5px;
align-items: center;
}

.report section[data-section='3'] .board .item .info .ctg span{
line-height: 18px;
}

.report section[data-section='3'] .board .item .info p .accent{
color: var(--primary-color);
}

.report section[data-section='3'] .mission_list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(340px, 1fr);
  gap: 50px;
}


.report section[data-section='3'] .mission_list .item{
flex: 0 0 calc(20% - 50px); 
padding: 0;
border: none;

}

.report section[data-section='3'] .mission_list .item .imgBox{
padding-bottom: 30px;
border-radius: var(--standard-radius);
max-height: 252px;
height: 100%;
}
.report section[data-section='3'] .mission_list .item .imgBox img{
max-width: 100%;
border-radius: var(--standard-radius);
width: 100%;
height: 100%;
object-fit: cover;
}

.report section[data-section='3'] .mission_list .item .tag_area{
display: flex;
gap:10px;
padding-bottom: 10px;
font-weight: 400;
font-size: 15px;
line-height: 22px;
letter-spacing: -0.05em;    
color: #666;
justify-content: space-between;
}

.report section[data-section='3'] .mission_list .item .appli_area .keyword{
display: flex;
padding-bottom: 10px;
font-weight: 500;
font-size: 16px;
line-height: 27px;
color: #222;
}

.report section[data-section='3'] .mission_list .item .appli_area .keyword .highRank{
min-width: 74px;
text-align: right;
}



.report section[data-section='3'] .mission_list .item .appli_area .desc{
display: flex;
justify-content: flex-end;
align-items: center;
font-weight: 400;
font-size: 15px;
line-height: 15px;
color: #666;
}

.report section[data-section='3'] .mission_list .item .appli_area .desc .rightBox{
display: flex;
gap:15px;
align-items: center;
}
.report section[data-section='3'] .mission_list .item .appli_area .desc .rightBox span{
display: flex;
gap:10px;
align-items: center;
}

.report section[data-section='3'] .mission_list .item .appli_area .desc .rightBox .bar{
border-left:1px solid #E4E8EE;
height: 15px;
}


/* 고객 피드백 탭 */
.report section[data-section='3'] .feedback_list{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-auto-rows: minmax(340px, 1fr);
gap: 50px;
overflow: hidden;
}


.report section[data-section='3'] .feedback_list .item{
flex: 0 0 calc(20% - 50px); 
padding: 30px;
border: 1px solid #E4E8EE;
position: relative;

}
.report section[data-section='3'] .feedback_list .item .best_label{
position: absolute;
left: 20px;
top: 0;
}

.report section[data-section='3'] .feedback_list .profile_cont{
text-align: center;
}

.report section[data-section='3'] .feedback_list .avg_cont{
text-align: left;
padding: 20px 0 14px;
border-bottom: 1px solid #e4e8ee;
margin-bottom: 14px;
}
.report section[data-section='3'] .feedback_list .avg_cont div{
display: flex;
justify-content: space-between;
line-height: 30px;
color: #222;
font-size: 16px;
}



.report section[data-section='3'] .feedback_list .item .name{
padding-bottom: 10px;
font-size: 20px;
color: #000;
}
.report section[data-section='3'] .feedback_list .item .sns_name{
display: flex;
justify-content: center;
gap:5px;
}

.report section[data-section='3'] .feedback_list .item .profile_img{
/*    padding-bottom: 20px;*/
border-radius: 50%;
/*    max-height: 252px;*/
height:130px;
max-width: 130px;
width: 100%;
margin: 0 auto;
margin-bottom: 20px;
position: relative;
}
.report section[data-section='3'] .feedback_list .item .profile_img img{
max-width: 100%;
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}
.report section[data-section='3'] .feedback_list .item .profile_img .level_ico{
position: absolute;
right: 0;
bottom: 0;
height: 100%;
border-radius: 0;
max-width: 38px;
max-height: 33px;
}

.report section[data-section='3'] .feedback_list .feedback_cont{
padding-top: 15px;
}

.report section[data-section='3'] .feedback_list .feedback_cont .feedback{
padding-bottom: 15px;
}

.report section[data-section='3'] .feedback_list .feedback_cont .feedback p{
font-size: 16px;
color: #222;
padding-bottom: 10px;
line-height: 1.3;
word-break: keep-all;
}


.report section[data-section='3'] .feedback_list textarea{
width: 100%;
padding: 10px;
color: #666;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 24px;
height: 90px;
border-color: #E4E8EE;
}
.report section[data-section='3'] .feedback_list .feedback_cont .btn_cont{
display: flex;
flex-direction: column;
gap:10px;
}

.report section[data-section='3'] .feedback_list .feedback_cont .btn_cont .best_pick{
width: 100%;    
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}

.report section[data-section='3'] .feedback_list .feedback_cont .btn_cont div:last-child{
display: flex;
gap:10px;
justify-content: space-between;
}
.report section[data-section='3'] .feedback_list .feedback_cont .btn_cont div:last-child button{
flex: 1;
}
/*

.report section[data-section='3'] .feedback_list .item .tag_area{
display: flex;
gap:10px;
padding-bottom: 10px;
font-weight: 400;
font-size: 15px;
line-height: 22px;
letter-spacing: -0.05em;    
color: #666;
justify-content: space-between;
}

.report section[data-section='3'] .feedback_list .item .appli_area .keyword{
display: flex;
padding-bottom: 10px;
font-weight: 500;
font-size: 16px;
line-height: 27px;
color: #222;
}

.report section[data-section='3'] .feedback_list .item .appli_area .keyword .highRank{
min-width: 74px;
text-align: right;
}



.report section[data-section='3'] .feedback_list .item .appli_area .desc{
display: flex;
justify-content: flex-end;
align-items: center;
font-weight: 400;
font-size: 15px;
line-height: 15px;
color: #666;
}

.report section[data-section='3'] .feedback_list .item .appli_area .desc .rightBox{
display: flex;
gap:15px;
align-items: center;
}
.report section[data-section='3'] .feedback_list .item .appli_area .desc .rightBox span{
display: flex;
gap:10px;
align-items: center;
}

.report section[data-section='3'] .feedback_list .item .appli_area .desc .rightBox .bar{
border-left:1px solid #E4E8EE;
height: 15px;
}
*/


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

.report .sub_page_tab .setting_status{
position: absolute;
top: 50%;
right: 30px;
transform: translateY(calc(-50% - 20px));
display: none;
align-items: center;
gap:5px;
border-radius: 5px;
border:1px solid #454D56;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
padding: 7px 14px;
cursor: pointer;
}
.report .sub_page_tab .setting_status.on{
display: flex;
}


.report section[data-section='4']{
background: #fff;
border-radius: var(--standard-radius);
padding: 30px;
}

.report section[data-section='4'] h2{
display: flex;
align-items: center;
padding-bottom: 20px;
justify-content: space-between;
}

.report section[data-section='4'] h2 .navigate{
border-radius: 5px;
padding: 8px 14px;
font-weight: 500;
font-size: 16px;
line-height: 24px;
display: flex;
align-items: stretch;
gap:6px;
}

.report section[data-section='4'] .keywordDetail{
padding-bottom: 27px;
}

.report section[data-section='4'] .keywordDetail .info{
display: flex;
gap:145px;
}

.report section[data-section='4'] .keywordDetail .info p{
display: flex;
gap:60px;
align-items: center;
font-weight: 400;
font-size: 18px;
line-height: 24px;
}

.report section[data-section='4'] .keywordDetail .info p span:first-child{
color: #999;
display: flex;
align-items: center;
gap:10px;
}
.report section[data-section='4'] .keywordDetail .info p span:last-child{
color: #000;
}



.report section[data-section='4'] .proposal{
border: 1px solid #E4E8EE;
border-radius: var(--standard-radius);
padding: 20px;
color: #666;
font-weight: 400;
font-size: 16px;
line-height: 24px;
display: flex;
align-items: center;
min-height: 100px;
max-height: 200px;
width: 100%;
}

.report section[data-section='4'] .table-container{padding-right: 0}

.report section[data-section='4'] .optional{
display: flex;
flex-direction: row-reverse;
column-gap: 5px;
padding: 20px 0 0 0;
margin-bottom: 10px;
}

.report section[data-section='4'] .optional .btn{
display: flex;
align-items: center;
gap:10px;
background: #fff;
border: 1px solid #E4E8EE;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}

.report section[data-section='4'] .optional .btn.editMode{
border: 1px solid var(--primary-color);
}

.report section[data-section] .table {
display: flex;
flex-direction: column;
border-radius: 4px;
text-align: center;
padding-bottom: 25px;
}

.report section[data-section] input{
height: auto;
}

.report section[data-section] .row-index{
display: none;
}
.report section[data-section] .keywordTable.on .row-index{
display: inline-block;
opacity: 1;
position: static;
max-width: 40px;
padding: 0;
width: 100%;
padding: 0 5px;
cursor: initial;
}

.report section[data-section] .row {
display: flex;
border-bottom: 1px solid #E4E8EE;
max-height: 50px;
transition: max-height .5s;
}
.report section[data-section] .row.open{
max-height: unset;
}

.report section[data-section] .header {
font-weight: bold;
background: var(--bg-gray);
}
.report section[data-section] .header.editMode .cell:not(.fixed-header){
    cursor: move;
}

.report section[data-section] .header .th_rank {
display: flex;
align-items: center;
}

.report section[data-section]  .cell {
flex: 1;
padding: 13px 15px;
display: flex;
gap:10px;
justify-content: center;
/*    align-items: center;*/
overflow: hidden;
font-weight: 400;
font-size: 14px;
line-height: 21px;
color: #666;
}

.report section[data-section] .keywordTable .cell.keyword{
align-items: center;
}

.report section[data-section] .keywordTable .cell .delete_btn{
display: none;
}
.report section[data-section] .keywordTable.on .cell .delete_btn{
display: inline-block;
cursor: pointer;
}

.report section[data-section] .cell .delete_btn

.report section[data-section='4'] .table-container{
overflow-x: auto;
overflow-y: inherit;
width: 100%;
padding-right: 0;
padding-top: 20px;
}

.report section[data-section='4'] .table {
display: flex;
flex-direction: column;
width: 120%;
padding-bottom: 0px;
}

.report section[data-section='4'] .cell {
flex: inherit;
flex-basis: 120px;
}

.report section[data-section='4'] .cell+.report_nick {
flex-basis: 170px;
}



/*
.report section[data-section='4'] .cell:nth-child(1) {
flex-basis: 180px;
}
.report section[data-section='4'] .cell:nth-child(2) {
flex-basis: 180px;
}
.report section[data-section='4'] .cell:nth-child(3) {
flex-basis: 180px;
}
.report section[data-section='4'] .cell:nth-child(4) {
flex-basis: 180px;
}
.report section[data-section='4'] .cell:nth-child(5) {
flex-basis: 180px;
}
.report section[data-section='4'] .cell:nth-child(6) {
flex-basis: 180px;
}
*/

.report section[data-section='4'] .cell.date {
justify-content: flex-start;
}

.report section[data-section='4'] .cell.title {
flex:1;
/*    white-space: nowrap;*/
text-overflow: ellipsis;
}

.report section[data-section='4'] .cell.title span{
word-break: keep-all;
text-align: left;
}


.report section[data-section='3'] .keywordTable .cell:nth-child(1) {
flex-basis: 50px;
flex: none;
}

.report section[data-section='3'] .keywordTable.on .cell:nth-child(1) {
max-width: 114px;
width: 100%;
}


.report section[data-section='3'] .row  {
display: flex;
}

.report section[data-section] .header .cell {
align-items: center;
font-weight: 400;
font-size: 14px;
line-height: 21px;
color: #222;
overflow: visible;
}

.report section[data-section] .row .cell .showBtn {
cursor: pointer;
}

.report section[data-section] .row .cell .showBtn img{
transform: rotate(0);
}
.report section[data-section] .row.open .cell .showBtn img{
transform: rotate(-180deg);
}


.report section[data-section] .row .cell.rank {
display: flex;
gap:5px;
}


.report section[data-section] .row .cell.rank .increase{
position: relative;
color: #0DBACD;
}

.report section[data-section] .row .cell.rank .decrease{
position: relative;
color: #EB6161;
}

.report section[data-section] .row .cell.rank .increase::before{
content: "";
display: inline-block;
position: absolute;
top: 50%;
left: 0;
background: url(../../STATIC/img/icon/increase.png);
width: 13px;
height: 10px;
transform: translateY(-50%);
}

.report section[data-section] .row .cell.rank .decrease::before{
content: "";
display: inline-block;
position: absolute;
top: 50%;
left: 0;
background: url(../../STATIC/img/icon/decrease.png);
width: 13px;
height: 10px;
transform: translateY(-50%);

}

.report section[data-section] .row .cell div{
display: flex;
flex-direction: column;
align-items: center;
gap:12px;
overflow:hidden;
}

.report section[data-section] .row .cell p{
display: flex;
flex-direction: row;
justify-content: flex-end;
gap:18px;
text-align: right;
}

.report section[data-section] .row .cell p span{
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

}
.report section[data-section] .row.open .cell p span{
/*
overflow: initial;
display: initial;
-webkit-line-clamp: initial;
-webkit-box-orient: initial;
*/
}

.report section[data-section] .row .cell.rank p{
width: 74px;
}

.report section[data-section] .row .cell.rank p span{
flex: 1;
}

.report section[data-section] .cell.difficulty{
font-weight: 500;
font-size: 14px;
line-height: 21px;
display: flex;
align-items: center;
}

.report section[data-section] .cell.easy span{
border: 2px solid #40A436;
border-radius: 30px;
color: #40A436;
padding: 4px 15px;
}
.report section[data-section] .cell.hard span{
border: 2px solid #EB6161;
border-radius: 30px;
color: #EB6161;
padding: 4px 15px;
}
.report section[data-section] .cell.middle span{
border: 2px solid #00353E;
border-radius: 30px;
color: #00353E;
padding: 4px 15px;
}

.report section[data-section] .more{
display: flex;
justify-content: center;
padding-top: 25px;
}
.report section[data-section] .more span{
background: var(--bg-gray);
border-radius: 30px;    
padding: 21px 0;
max-width: 178px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
font-weight: 400;
font-size: 18px;
line-height: 18px;
cursor: pointer;
}
.report section[data-section] .btn_wrap{
 display: flex;
justify-content: center;
padding-top: 25px;
gap:20px;
}

.report section[data-section] .btn_wrap > span{
background: var(--primary-color);
border-radius: var(--border-round-L);
max-width: 178px;
padding: 15px 45px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 500;
font-size: 20px;
line-height: 30px;
cursor: pointer;
box-shadow: 0px 10px 20px rgba(60, 203, 219, 0.2);
color: #fff;
max-width: 300px;
}

.report section[data-section] .btn_wrap .border_primary_btn{
display: none;
box-shadow: none;
}

.report section[data-section] .btn_wrap.on .border_primary_btn{
display: flex;
}

.report section[data-section] .btn_wrap .border_black_btn{
display: none;
box-shadow: none;
}

.report section[data-section] .btn_wrap.on .border_black_btn{
display: inline-block;
}


.border_black_btn{
background: #fff !important;
border: 1px solid #454D56 !important;
color: #454D56 !important;
}
.border_primary_btn{
background: #fff !important;
border: 1px solid var(--primary-color) !important;
color: var(--primary-color) !important;
}

/*.report section[data-section] .btn_wrap */


.report .selectBox__ .list__{
width: 150%;    
right: 0;
left: inherit;
}


.report .selectFilter .list__ li:before {
    content: "";
    width: 20px;
    height: 20px;
    background-image: url(../img/icon/check.svg);
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
    margin-top: 2px;
}
.report .selectFilter .list__ li.selected {
font-weight: 400;
color: #222;
}
.report .selectFilter .list__ li.selected:before {
background-image: url(../img/icon/checked.svg);
}

.report input[type="checkbox"] {
display: none;
}

.report input[type="checkbox"]:before {
content: "";
cursor: pointer;
display: inline-block;
background-image: url('../img/icon/check.svg'); /* 체크되지 않은 이미지 */
width: 20px; /* 이미지의 너비 */
height: 20px; /* 이미지의 높이 */
}

.report input[type="checkbox"]:checked:before {
background-image: url('../img/icon/checked.svg'); /* 체크된 이미지 */
}

.report section[data-section='5']{
background: #fff;
border-radius: var(--standard-radius);
padding: 30px;

}

.report section[data-section='5'] h2{
padding-bottom: 10px;
}

.report section[data-section='5'] p{
font-weight: 400;
font-size: 15px;
padding-bottom: 20px;
}

.report section[data-section='5'] textarea{
width: 100%;
padding: 14px;
border-radius: 15px;
border: 1px solid var(--line, #E4E8EE);
background: var(--white, #FFF);
min-height: 100px;
}

.report section[data-section='5'] .btn-primary{
min-width: 300px;
}

/* 알림 설정 페이지 */

.notice_set{}
.notice_set .kakao_cont{
padding:0 25px;
}
.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;

}
.notice_set .kakao_cont .item .left{
line-height: 1;
}
.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: 10px;
}
.notice_set .kakao_cont .item .desc{
font-size: 16px;
color: #777;
}

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

[role="switch"] {
appearance: none;
position: relative;
border: max(2px, 0.1em) solid var(--primary-color);
border-radius: 30px;
width: 53px;
height: 30px;;
cursor: pointer;
}

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

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

[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"]:disabled:before {
background-color: lightgray;
}

[role="switch"]:disabled + span {
opacity: 0.7;
cursor: not-allowed;
}
[role="switch"]:focus {
/*  border-color: var(--primary-color);*/
}

/*
[role="switch"]:focus-visible {
outline-offset: max(2px, 0.1em);
outline: max(2px, 0.1em) solid var(--primary-color);
}
*/

/*
[role="switch"]:enabled:hover {
box-shadow: 0 0 0 max(4px, 0.2em) lightgray;
}
*/


/* // 보고서 페이지 */



/* 알림 설정 페이지 */




/*footer*/
/*    #footer{background-color:#f0f2f3;padding: 0px 0px 50px 0px;   position:relative; margin-top:40px;}*/
/*    #footer .doc_block{position: relative; height: 70px; margin-bottom: 0px; border-bottom: 1px solid #eaebeb;border-top: 1px solid #eaebeb; z-index: 10; background-color:#eaebeb;}*/
/*    #footer .doc_block .btn{line-height: 70px;padding: 0 2px; margin: 0 10px;  display: inline-block; position: relative; font-size:14px; color: #aaaaaa; cursor: pointer; font-weight:normal; letter-spacing:-1px;}*/
/*    #footer .doc_block .btn strong {color: #000; font-weight:normal;}*/
/*    #footer .doc_block .btn:hover{color:#666;}*/
/*    #footer .doc_block .line {  display: inline-block;width:1px; height:12px; margin-top:3px; background:#ccc; }*/
/*    #footer .doc_wrap{ padding:10px 0px 0px; background-color:#f0f2f3}*/
/*    #footer .doc_wrap .fm{position: relative; width:60%; display:block;  margin-top:15px; line-height:18px;font-size:12px; color:#a0a0a0; ;}*/
/*    #footer .doc_wrap .fm + .fm{width:20%; }*/
/*    #footer .doc_wrap .fm .cpbtn{ background-color:#000; padding:2px 5px; border-radius:3px; font-size:10px; color:#ffffff; margin-left:10px;}*/
/*    #footer .doc_wrap .fm .bar{display:inline-block; margin:0px 10px;font-size:11px;}*/
/*    #footer .doc_wrap .fl_right{position: absolute;  top:35px; right:30px; text-align:right; font-size:12px; color:#a0a0a0;}*/
/*    #footer .doc_wrap .fl_right span{display:block; margin-top:5px;}*/
/*    #footer .doc_wrap .fm .copyright {line-height:24px; font-size:12px; color:#aaaaaa; }*/
/*    #footer .doc_wrap .f2 ul{overflow:hidden;float:right; margin-top:10px; display:none;}*/
/*    #footer .doc_wrap .f2 ul li {position:relative; float:left; text-align:left; width:180px; height:45px; padding-left:10px;  line-height:45px;  border: solid 1px #eaebeb;}*/
/*    #footer .doc_wrap .f2 ul li span{ color:#666; margin:10px 0px; font-size:18px;}*/
/*    #footer .doc_wrap .f2 ul li + li{border-left:solid #000 0px;}*/
/*    #footer .doc_wrap .f2 ul li b{position:absolute; right:10px; top:0px; color:#22ACC7; font-size:20px; font-weight:100px;}*/
/*레이아웃*/
/*    .container_cus { width:100%;min-width:1100px; position:relative; margin:30px auto 50px;  overflow:hidden;   -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/*.layout_inner{position:relative;width:1444px; margin:0px auto; }*/

/*    #footer .doc_wrap .f2{ position: absolute;  top:-30px; right:30px; text-align:right;}*/
/*    #footer .doc_wrap .f2 .f2_1{overflow:hidden;}*/

/*    #footer .doc_wrap .f2 .pat{margin-top:60px;display:block;color:#9b9b9b; overflow:hidden;}*/
/*    #footer .doc_wrap .f2 .pat a{display:inline-block; background-color:#22ACC7; color:#fff; padding:5px 15px; width:200px; height:70px;font-size:18px; border-radius:100px; letter-spacing:-1px; text-align:center; line-height:70px;}*/
/*    #footer .doc_wrap .f2 .pat a:hover{display:inline-block; background-color:#1fcbc7; color:#FFF; }*/
/*    #footer .doc_wrap .f2 .pat .tel{font-size:34px; font-weight:200;}*/
/*    #footer .doc_wrap .f2 .pat .tel_txt{font-size:11px;} */
/*    #footer .doc_wrap .f2 .pat li{float:left; text-align:left; width:250px;}*/
/*    #footer .bottom_sns{position: absolute; bottom:20px; right:30px;}*/
/*    #footer .bottom_sns .sns{display:inline-block; width:30px; height:30px; margin-right:3px;}*/
/*    #footer .bottom_sns .blog{background: url('/skin/demo/img/blog_tr.png') center no-repeat; background-size:50px;}*/
/*    #footer .bottom_sns .facebook{background: url('/skin/demo/img/face_tr.png') center no-repeat; background-size:50px;}*/
/*    #footer .bottom_sns .instagram{background: url('/skin/demo/img/instgram_tr.png') center no-repeat; background-size:50px;}*/
/*    #footer .bottom_sns .youtube{background: url('/skin/demo/img/youtube_tr.png') center no-repeat; background-size:50px;}*/

/*반응형*/







@media (max-width:1444px) {
    #footer .doc_wrap{overflow:hidden;width:1100px;margin:0px auto; padding:30px 0px 0px 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

    .layout_inner {
    width: 1100px;
    min-width: 1100px;
    margin: 0px auto;
    position: relative;
    }
}

@media (min-width:1444px) {
    #footer .doc_wrap{overflow:hidden;width:1444px;margin:0px auto; padding:30px 0px;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
    #footer .doc_wrap .f2 ul{overflow:hidden;float:right; margin-top:10px;}
    #footer .doc_wrap .f2 ul li {position:relative; float:left; text-align:left; width:180px; height:45px; padding-left:10px;  line-height:45px;  border: solid 1px #454545;}
    #footer .doc_wrap .f2 ul li span{ color:#666; margin:10px 0px; font-size:18px;}
    #footer .doc_wrap .f2 ul li + li{border-left:solid #000 0px;}
    #footer .doc_wrap .f2 ul li b{position:absolute; right:10px; top:0px; color:#22ACC7; font-size:20px; font-weight:100px;}

    .layout_inner {
        width: 1444px;
        margin: 0px auto;
        position: relative;
    }
}

td .redDot {
    position: relative;
}
td .redDot:after {
    content: "";
    position: absolute;
    top: 22px;
    left: -5px;
    width: 5px;
    height: 5px;
    border-radius: 2px;
    background-color: #FF4848;
}

/* footer */
#footer {
    margin-top: 70px;
    border-top: 1px solid #E7E7E7;
}
#footer a:hover {
    font-weight: 600;
}
#footer .footer_top {
    background-color: #fff;
}
#footer .footer_top .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 70px;
    padding-left: 20px;
    padding-right: 20px;
/*        width: 1200px;*/
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
#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-end;
    align-items: center;
}
#footer .socials_ a {
    color: #888888;
    font-size: 14px;
    text-align: center;
}
#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(/skin/demo/img/icon/asset/about.svg);
}
#footer .socials_ .blog {
    background-image: url(/skin/demo/img/icon/asset/blog.svg);
}
#footer .socials_ .instar {
    background-image: url(/skin/demo/img/icon/asset/instar.svg);
}
#footer .socials_ a:hover  {
    font-weight: 600;
}
#footer .socials_ a:hover .about {
    background-image: url(/skin/demo/img/icon/asset/about_a.svg);
}
#footer .socials_ a:hover .blog {
    background-image: url(/skin/demo/img/icon/asset/blog_a.svg);
}
#footer .socials_ a:hover .instar {
    background-image: url(/skin/demo/img/icon/asset/instar_a.svg);
}
#footer .company_  {
    background-color: #FAFAFA;
}
#footer .company_ .inner {
    padding-top: 40px;
    padding-bottom: 60px;
    padding-left: 20px;
    padding-right: 20px;
/*        width: 1200px;*/
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
#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 h1 {
    font-size: 1em;
}
#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;
}

/* 셀럭터 */
.select__wrap {
    /* flex-grow: 1; */
}
.selectBox__ {
    /* width: 130px; */
}
.selectBox__ .box__ {
    position: relative;
}
.selectBox__ .select__ {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-image: url(/skin/demo/img/icon/tool/select_down.svg);
    background-position: right 20px center;
    background-repeat: no-repeat;
    padding-right: 40px;
    white-space: nowrap;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding-left: 15px;
}
.selectBox__.selectFilter .select__{
padding-right: 20px;
background-image: none;
}
.selectBox__.option_select .select__{
height: 42px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 17px;
background-color: #fff;
}
.selectBox__ .select__ .text{
    
}
.selectBox__ .select__ .holder {
    color: #888;
}
.selectBox__ .list__ {
    position: absolute;
    left: 0;
    top: 120%;
    width: 100%;
    background-color: #fff;
    display: none;
    border-radius: 5px;
    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__.selectFilter .list__{
    width: max-content;
    right: 0;
    left: unset;
    max-width: 600px;
}
.selectBox__ .list__ li {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    gap: 10px;
    padding: 15px;
}
.selectBox__ .list__ li:hover {
    background-color: #ECF9FB;
}
.selectBox__ .list__ li:last-child:hover {
    background-color: #ECF9FB;
    border-radius: 0 0 10px 10px ;
}
.selectBox__ .list__ li:first-child:hover {
    background-color: #ECF9FB;
    border-radius: 10px 10px 0 0 ;
}
.selectBox__ .list__ li.selected {
    background-color: #ECF9FB;
    color: var(--primary-color);
    font-weight: 500;
}

.selectBox__ .select__, 
.selectBox__ .list__ li {
    cursor: pointer;
}
.selectBox__.on .list__ {
    display: block;
}
.selectBox__ .list__ li .option{
    border: 1px solid var(--primary-color);
    padding: 8px 5px;
    font-size: 12px;
    border-radius: 5px;
    text-align: center;
}

.selectBox__ .list__ li.sold .option{
    border-color: #666;
}
.selectBox__ .list__ li.sold .option span{
    color: #666;
}
.selectBox__ .list__ li .text{
    flex: 1;
}
.selectBox__ .list__ li.sold .text{
    text-decoration: line-through;
}

/* 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: #3CCBDB;
    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: #3CCBDB;
    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;
}


.modal_cont{
position: fixed;
left: 0;
top: 0;
z-index: 9999;
width: 100%;
height: 100%;
display: none;
justify-content: center;
align-items: center;
}

.modal_cont.show{
display: flex;
}

.modal_cont .dimmed{
position: absolute;
left: 0;
top: 0;
background: #AEAEAE;
width: 100vw;
height: 100vh;
opacity: .5;
z-index: 9998;
}

.modal_cont .modal{
max-width: 490px;
min-height: 390px;
width: 100%;
padding: 40px;
background: #fff;
border-radius: 10px;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
position: static;
height: auto;
}

.modal_cont .modal .upBox{
width: 100%;
}
.modal_cont .modal .downBox{
display: flex;
justify-content: center;
width: 100%;
}

.modal_cont .modal .head{
display: flex;
justify-content: center;
padding-bottom: 32px;
align-items: center;
position: relative;
width: 100%;

}
.modal_cont .modal .head h2{
font-weight: 700;
font-size: 24px;
line-height: 24px;
}

.modal_cont .modal .head span{
position: absolute;
right: 0;
}

.modal_cont .modal input{
height: auto;
min-height: 50px;
border: 1px solid #EDEDED;
border-radius: 5px;    
margin-bottom: 10px;
}

.modal_cont .modal .keyword_list{
min-height: 200px;
height: 200px;
overflow-y: auto;
padding-right:0;
padding-bottom: 10px;
}


.modal_cont .modal .add{
display: flex;
justify-content: center;
cursor: pointer;
}


.modal_cont .modal .add span{
display: flex;
justify-content: center;
background: var(--gray-font-color);
border-radius: 50px;
line-height: 1;
padding:15px;
}

.modal_cont .modal .register{
background: #3CCBDB;
box-shadow: 0px 3px 20px rgba(60, 203, 219, 0.3);
border-radius: 25px;
padding: 13px 0;
max-width: 260px;
width: 100%;
color: #fff;
}

#best_pick_modal.modal_cont .modal{
min-height: 300px;
}

#best_pick_modal.modal_cont .modal .head{
padding: 0;
}

#best_pick_modal.modal_cont .modal .body_cont{
color: #222;
text-align: center;
font-size: 20px;
font-weight: 400;
line-height: 30px;
}

#best_pick_modal.modal_cont .modal .btn_cont{
display: flex;
justify-content: center;
gap:20px;
width: 100%;
}

#best_pick_modal.modal_cont .modal .btn_cont button{
max-width: 134px;
width: 100%;
}


#best_pick_modal.modal_cont .close_btn{
cursor: pointer;
}



/*@media (max-width: 1440px){*/
#container #side-menu.productDetail:hover{
    width: 290px;
    background-image: url(../img/visual/wave_bg.png);
}
#container #side-menu.productDetail{
    transition: all .3s;
    width:45px;
    background-image: none;
}

#container #side-menu.productDetail .title{
    visibility: hidden;
    max-height: 125px;
}

#container #side-menu.productDetail .gnb{
    padding-left: 0;
    transition: all .3s;
}
#container #side-menu.productDetail .gnb li .icon{
    width: 40px;
}

#container #side-menu.productDetail .gnb .link a{
    visibility: hidden;
    white-space: nowrap;
}

#container #side-menu.productDetail .gnb .link .round {
    width: 24px;
}

#side-menu.productDetail .gnb .link .round:before{
}


#container #side-menu.productDetail:hover .title{
    visibility: initial;
}

#container #side-menu.productDetail:hover .gnb{
    padding-left: 30px;
}

#container #side-menu.productDetail:hover .gnb .link a{
    visibility: initial;
}

#container #side-menu.productDetail .gnb .active .drop-mueu{
    display: none;
}

#container #side-menu.productDetail:hover .gnb .active .drop-mueu{
    display: block;
}
#container #side-menu.productDetail .gnb .drop-mueu .drops .tit{
    visibility: hidden;
    white-space: nowrap;
}

#container #side-menu.productDetail:hover .gnb .drop-mueu .drops .tit{
    visibility: initial;
    white-space: nowrap;
}
/*}*/



.field-group.feedback_div{
flex-direction: column;
align-items: flex-start;
width: 100%;
}

.feedback_use_area{
align-items: flex-start;
}
.feedback_use_area .guideTxt{
padding-top: 0;
padding-bottom: 5px;
}
.feedback_use_area .field-tit button{
color: var(--primary-color);
border-color: var(--primary-color);
border: 1px solid var(--primary-color);
padding: 5px 10px;
margin-top: 10px;
font-size: 14px;
font-weight: 500;
line-height: 1;

}


.feedback_use_area .select2-container{
width: 100% !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field{
background: #fff !important;
 font-size: 14px;
}
.feedback_use_area .feedback_option{
width: 100%;
}
.select2-search--dropdown .select2-search__field{
height: 44px;
}
.feedback_use_area .select2-container--default .select2-selection--single .select2-selection__arrow{
height: 44px;
right: 10px;
}

.feedback_use_area .select2-container--default .select2-selection--single .select2-selection__arrow b{
margin-left: -6px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 10px;
height: 100%;
background: url(https://assaview.co.kr/biz/mob/img/select_arrow.svg);
background-repeat: no-repeat;
border: none;
}

.feedback_use_area .select2-container--default .select2-selection--single{
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
width: 100%;
height: 44px;
border-radius: 8px;
font-size: 14px;
border: solid 1px #e9e9e9;
}

.feedback_use_area .select2-container--default .select2-selection--single .select2-selection__rendered{
line-height: 44px;
}

.modal-dialog .modal-content#modal-feedback_example{
max-width: 860px;
}

.modal-dialog .modal-content#modal-feedback_example .closer{
    position: static;
border: 1px solid #E4E8EE;
text-align: center;
display: block;
padding: 14px 0;
line-height: 1;
font-size: 16px;
border-radius: 8px;
}

.modal-dialog .modal-content#modal-feedback_example .ex_img{
max-width: 100%;
}

.modal-dialog .modal-content#modal-feedback_example p:last-of-type{
padding-bottom: 10px;
}

.modal-dialog .modal-content#modal-feedback_event .close_btn_Cont{
display: flex;
flex-direction: column;
gap:10px;
}

.modal-dialog .modal-content#modal-feedback_event .close_btn_Cont .closer{
    position: static;
border: 1px solid #E4E8EE;
text-align: center;
display: block;
padding: 14px 0;
line-height: 1;
font-size: 16px;
border-radius: 8px;
}

.modal-dialog .modal-content#modal-feedback_event{
padding: 24px 20px;
max-width: 540px;
}

.modal-dialog .modal-content#modal-feedback_event h1{
text-align: left;
margin-bottom: 10px;
}

.modal-dialog .modal-content#modal-feedback_event p:last-of-type{
padding-bottom: 10px;
}
.modal-dialog .modal-content#modal-feedback_event .body .desc{
display: inline-block;
padding-bottom: 20px;
}
.modal-dialog .modal-content#modal-feedback_event .body .details{
padding-bottom: 20px;
font-size: 20px;
}

.modal-dialog .modal-content#modal-feedback_event .body .details span{
display: inline-block;
padding-bottom: 10px;
word-break: keep-all;
}

.modal-dialog .modal-content#modal-feedback_event .checkBox input{
height: 100%;
}

.modal-dialog .modal-content#modal-feedback_event .checkBox input + label{
background-size: 20px;
padding-left: 30px;
}

.modal-dialog .modal-content#modal-sponsor_guide{
max-width: 371px;
width: 100%;
}

.modal-dialog .modal-content#modal-sponsor_guide .item{
max-width: none;
align-items: flex-start;
gap:20px;
}
.modal-dialog .modal-content#modal-sponsor_guide .item .text{
text-align: left;
font-size: 14px;

}

.modal-dialog .modal-content#modal-sponsor_guide .item h5{
color: var(--primary-color);
font-size: 14px;
line-height: inherit;
}

.floating_btn{
position: fixed;
right: -57px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
z-index: 9999;
}

.floating_btn .receipt{
background: #7A58FF;
color: #fff;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
padding: 8px 15px;
border-radius: 5px 5px 0px 0px;
cursor: pointer;
}
.floating_btn .receipt div{
display: flex;
gap:14px;

}
.floating_btn .receipt div span{
letter-spacing: 1.6px !important;
}
.floating_btn .receipt img{
transform: rotate(90deg)
}

#modal-payments{
min-width: 600px;
padding: 40px 35px;
}
#modal-payments .closer{
right: 0;
}

#modal-payments .expectation_total_price{
font-size: 28px;
font-weight: 700;
line-height: 30px;
padding: 0 5px;
}
#modal-payments .unit{
font-size: 24px;
font-weight: 500;
line-height: 30px;
}
#modal-payments .body .price_noti{
color: #222;
font-size: 18px;
font-weight: 400;
line-height: 30px;

}
#modal-payments .body span.price{
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 30px;
}

#modal-payments .details{
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 30px;
padding: 15px 0 15px;
}

#modal-payments thead{
font-size: 16px;
font-weight: 400;
line-height: 1;
}
#modal-payments thead th{
padding: 13px 0 ;
 color: #222;   
font-weight: 400;
}

#modal-payments .details tbody tr{
font-size: 16px;
font-weight: 400;
line-height: 1;
border-bottom:1px solid #E4E8EE;
}
#modal-payments .details tbody tr td{
padding: 12px 0;
}
#modal-payments .details tbody tr td.expectation_price.free span:first-child{
color: #EF5D1A;
text-decoration-line: line-through;
}
#modal-payments .details tbody tr td.expectation_price.free span{
font-weight: 500;
}

#modal-payments .noti p{
position: relative;
padding-left: 15px;
font-size: 16px;
font-weight: 400;
margin-bottom: 4px;
}
#modal-payments .noti p::before{
content: "";
position: absolute;
display: inline-block;
width: 6px;
height: 6px;
background: #222;
border-radius: 50%;
top: 50%;
left: 0;
transform: translateY(-50%);
}

#modal-payments .btn_cont{
padding-top: 20px;
text-align: center;

}
#modal-payments .btn_cont button{
max-width: 134px;
width: 100%;
position: static;
}


/* modal */
.modal-dialog #quit {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}
.modal-dialog #quit .dim {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: rgba(0,0,0,0.3);
}
.modal-dialog #quit .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: 30px;
    width: 20px;
    height: 20px;
    background-image: url(../img/icon/ico-close.svg);
    background-repeat: no-repeat;
    background-position: center; 
/*        margin-top: -20px;*/
/*        margin-right: -20px;*/
    cursor: pointer;
}
.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: 20px 0;
/*        padding-bottom: 30px;*/
    font-size: 16px;
    color: #222;
}
.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 .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;
}
.modal-layer .notice_ i {
    margin-right: 10px;
}
.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: 20px;*/
    gap:30px;
}
.modal-layer .btn_area button{
flex: 1;
height: auto;
border-radius: 5px;
width: auto;
font-weight: 500;
/*    max-width: 134px;*/
padding: 13px 0;
}
.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: 50px;
flex: 1;
}
.modal-dialog #quit.modal-content{
background-color: transparent;
}
.modal-dialog #quit.modal-content h1{
margin-bottom: 0;
}
.modal-dialog #quit.modal-content .closer{
right: 0;
}

#quit .modal-layer {
    max-width: 600px;
    height: 90vh;
  margin: 0 auto;
}

#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;
}





.reviewer_list:has(.empty_list){
display: flex;
justify-content: center;
align-items: center;
}
.empty_list{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
flex-direction: column;
padding: 180px 0;
gap: 20px;
}
.empty_list img{
max-height: 150px;
}
.empty_list p{
color: #B4B4B4;
}



.reviewer_list .selection_item {
border: 1px solid #E4E8EE;
border-radius: var(--standard-radius);
padding: 30px;
height: 100%;
flex-basis: calc(25% - 15px)
}

@media (min-width: 1500px) {
.reviewer_list .selection_item {
    flex-basis: calc(20% - 16px);
    max-width: calc(20% - 16px);
}    
}

.reviewer_list .selection_item:last-child{
/*    padding-bottom: 0;*/
}
.reviewer_list .selection_item .container{
background-color: #fff;
border-radius: 10px;
padding: 30px;
}

.reviewer_list .review_photo .sns_review{
display: inline-block;
width: 100%;
}
.reviewer_list .review_photo .sns_review .thumbnail{

border-radius: 10px;
overflow: hidden;
}
.reviewer_list .review_photo .sns_review .thumbnail img{
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.reviewer_list .review_photo .sns_review .sns_info{
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
}
.reviewer_list .review_photo .sns_review .sns_info .btn_go_blog{
margin: 0;
width: auto;
height: auto;
}
.reviewer_list .review_photo .sns_review .sns_info .btn_go_blog img{
max-width: 22px;

}



.sel_profile_box {
position: relative;
/*    padding-bottom: 9px;*/
display: flex;
gap:20px;
flex-direction: column;
justify-content: center;
align-items: center;
}
.sel_profile_box .zzim_btn{
position: absolute;
top: 0;
right: 0;
z-index: 1;
cursor: pointer;
}
.sel_profile_box .profile{
width: 130px;
height: 130px;
position: relative;
border-radius: 50%;
}

.sel_profile_box .profile .level {
position: absolute;
right: -7px;
bottom: -4px;
display: block;
right: 0;
bottom: 0;
width: 38px;
height: 34px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

.sel_profile_box .desc{
text-align: center;
}
.sel_profile_box .desc .blog_area{
display: flex;
justify-content: center;
align-items: center;
gap:5px;
}
.sel_profile_box .desc .blog_area a{
word-break: break-word;
word-wrap: break-word;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
display: flex;
align-items: center;
gap:5px;

}
.sel_profile_box .desc .blog_area a img{
max-width: 12px;    
}
.sel_profile_box .desc .blog_area span{
color: #666;
}
.sel_profile_box .desc .img_cont{
max-width: 22px;
min-width: 22px;
max-height: 22px;
}
.sel_profile_box .desc .img_cont img{
width: 100%;
} 
.sel_profile_box .blog_grade{
width: 100%;
background: #F4F5F9;
text-align: center;
border-radius: var(--border-round-S);
padding: 15px 0 ;
color: #222;
}
.blog_grade .result{
display: flex;
gap:5px;
justify-content: center;
align-items: center;
}

.sel_profile_box .blog_grade .grade{
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
font-weight: 700;
color: #454D56;
}
.sel_profile_box .blog_grade .grade.grade_color_9{
color: #888;
}
.sel_profile_box .blog_grade .grade.grade_color_0{
color: #DF0000;
}
.sel_profile_box .blog_grade .grade.grade_color_1{
color: #222;
}
.sel_profile_box .blog_grade .grade.grade_color_2{
color: #6F86FF;
}
.sel_profile_box .blog_grade .grade.grade_color_3{
color: #00B3D6;
}
.sel_profile_box .blog_grade .grade.grade_color_4{
color: #E79E00;
}
.grade_color_9{
color: #888;
}
.grade_color_0{
color: #DF0000;
}
.grade_color_1{
color: #222;
}
.grade_color_2{
color: #6F86FF;
}
.grade_color_3{
color: #00B3D6;
}
.grade_color_4{
color: #E79E00;
}

.sel_profile_box h2 {
padding-top: 8px;
color: #222;
font-size: 18px;
font-weight: 500;
padding: 0 0 10px 0 ;
}

.sel_profile_box h2 span {
padding-left: 2px;
font-size: 16px;
font-weight: 400;
letter-spacing: -0.48px;
color: #222;
}
.sel_profile_box h2 span.mb_name{
font-size: 18px;
font-weight: 500;
}
.sel_profile_box h2 p.blackconsumer{
color: #DF0000;
font-size: 12px;
padding-top: 0;
}

.sel_profile_box p {
padding-top: 8px;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.48px;
color: #666;
}

.sel_profile_box .today {
position: static;
align-items: start;
width: 100%;
gap:5px;
color: #666;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}

.sel_profile_box .today div{
display: flex;
justify-content: space-between;
width: 100%;
}
.sel_profile_box .today div span{
font-size: 16px; 
color: #222;
}
.sel_profile_box .reviewer_info{
width: 100%;
}
.sel_profile_box .reviewer_info textarea{
border-radius: 5px;
border: 1px solid #E4E8EE;
background: #fff;
padding: 10px;
font-size: 15px;
color: #666;
display: block;
margin-bottom: 20px;
height: 90px;
box-sizing: border-box;
width: 100%;
}
.sel_profile_box .reviewer_info button{
width: 100%;
font-size: 16px;
font-weight: 500;
/*    padding: 13px 0 ;*/
}
.sel_profile_box .reviewer_info button.mission_detail_btn{
padding: 13px 0;
margin-top: 10px;
}
.selection_item button.mission_detail_btn{
color: var(--primary-color);
justify-content: center;
}
.selection_item > button{
padding: 13px 0;
color: #444C67;
border: 1px solid var(--primary-color,#3CCBDB);
margin-top: 10px;
border-radius: var(--border-round-S);
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 25px;
padding-right: 25px;
font-size: 16px;
width: 100%;
font-weight: 400;
}
.selection_item > button.date_edit_btn:first-of-type{
/*    margin-top: 0;*/
}
.selection_item > button span.btn{
font-weight: 700;
}
.selection_item > button.date_edit_btn span.btn{
color: var(--primary-color,#3CCBDB);
min-width: fit-content;
cursor: pointer;
}
.selection_item > button.scheduleEditBtn{
padding: 1px 25px;
/*    margin-top: 0;*/
}
.selection_item > button.scheduleEditBtn .date{
max-width: 66px;
text-align: right;
}

.sel_profile_box .reviewer_info button .checkBox{
line-height: 1;
width: 100%;
}
.sel_profile_box .reviewer_info button label{
width: 100%;
display: block;
padding-left: 35px;
/*    background-image: none;*/
border: 1px solid #E4E8EE;
padding: 13px 0;
border-radius: var(--border-round-S);
color: var(--navy-color);
background-position-x: calc(50% - 35px);
text-indent: 25px;
}
.sel_profile_box .reviewer_info button input:checked + label{
background-image: url(../img/icon/checked.svg);
border: 1px solid var(--primary-color);
color: var(--primary-color);

}
/*
.sel_profile_box .reviewer_info button input:checked + label{
background: var(--primary-color);
color: #fff;
}
*/
.selection_item .detail_box_wrap .checkBox{
width: 100%;
text-align: center;
margin-top: 10px;
}
.selection_item .detail_box_wrap label{
width: 100%;
display: block;
padding-left: 35px;
/*    background-image: none;*/
border: 1px solid #E4E8EE;
padding: 13px 0;
border-radius: var(--border-round-S);
color: var(--navy-color);
background-position-x: calc(50% - 35px);
text-indent: 25px;
}
.selection_item .detail_box_wrap input:checked + label{
background-image: url(../img/icon/checked.svg);
border: 1px solid var(--primary-color);
color: var(--primary-color);
}


.sel_profile_box .reviewer_info .btn_cont{
display: flex;
gap:10px;
padding-top: 10px;
/*    padding-bottom: 10px;*/
}
.sel_profile_box .reviewer_info .btn_cont button{
flex: 1;
display: inline-block;
text-align: center;
padding: 13px 0;
 line-height: 1;
}
.sel_profile_box .reviewer_info .btn_cont button.portfolio{
cursor: no-drop;
}

.reviewer_list .selection_item .sel_profile_box .asignBtn{
width: 80px;
height: 80px;
background-color: transparent;
margin: 0;
position: relative;
right: -5px;
}

.reviewer_list .selection_item .sel_profile_box .confirmBtn{
width: 80px;
height: 80px;
margin: 0;
position: relative;
right: -5px;
position: static;
background-color: var(--primary-color);
width: 100%;
height: auto;
border-radius: var(--border-round-S);
}

.btn_go_blog,
.btn_go_instar {
/*    position: absolute;*/
border-radius: 4px;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.56px;
color: #666;
border: solid 1px #E4E8EE;
background-color: #fff;
padding: 9px 12px;
display: flex;
gap: 8px;
align-items: center;

}

.selection_item .with_cp_btn{
padding: 13px;
display: flex;
align-items: center;
gap:10px;
margin-top: 10px;
font-weight: 500;
position: relative;
height: 44px;
}
.selection_item .with_cp_btn div{
line-height: 1;
}
.selection_item .with_cp_btn img{
width: 18px;
height: auto;
transform: translateY(2px);
}
.selection_item .with_cp_btn .loader{
width: 20px;
height: 20px;
border: 2px solid var(--primary-color);
border-bottom-color: transparent;
left: initial;
top: initial;
}

/*
.btn_go_blog img,
.btn_go_instar img {
display: inline-block;
vertical-align: middle;
margin: -3px 6px 0 0;
}
*/

.btn_go_instar {
/*    background: url("../img/instar_bg.svg") center no-repeat;*/
}

.btn_go_instar img {
margin-right: 2px;
}

.btn_green {
display: block;
height: 30px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.56px;
color: #fff;
background-color: #3ccbdb;
}

.reviewer_list .selection_item .btn_green,
.reviewer_list .selection_item .btn_sky {
display: block;
/*    width: 99px;*/
width: 100%;
margin: 0 auto 0;
font-size: 16px;
}

.reviewer_list .selection_item .btn_sky {
height: 30px;
line-height: 28px;
font-size: 14px;
}

.btn_toggle_detail {
border-radius: 4px;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.56px;
color: #fff;
background-color: var(--navy-color);
padding: 9px 12px;
display: flex;
gap:8px;
}

.btn_toggle_detail.schedule{
background: #3ccbdb;
color: #fff;
border: none;
}

.detail_box_wrap {
display: none;
}
.detail_box_wrap {
display: block;   
/*    padding: 13px 8px;*/
border: 1px solid var(--primary-color);
border-radius: 5px;
margin-top: 10px;
}
.detail_box{
display: none;
}
.selection_item .btn_wrap.detail{
padding-top: 25px;
}

.detail_box.on{
display: block;
 padding-top: 10px;
}
.detail_box_wrap .fill_primary_btn{
width: 100%;
/*    margin-top: 10px;*/
line-height: normal;
padding: 13px 0;
text-align: center;
}

.detail_box_wrap .btn_cont{
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 8px;
}
.detail_box_wrap .btn_cont .empty_box{
width: 15px;
}
.detail_box_wrap .btn_cont button{
color: var(--primary-color);
width: 100%;
font-size: 16px;
line-height: 1;
}
.detail_box_wrap .btn_cont.on img{
transform: rotate(180deg);
}
.detail_box_wrap .btn_cont img{
max-width: 15px;
}
.checkBox.fill_primary_btn input + label{
padding-left: 30px;
}

.reviewer_list .detail_box_wrap > button {
margin-top: 9px !important;
}


.reviewer_list .selection_item.on {
/*    padding-bottom: 15px;*/
}

/*
.reviewer_list .selection_item.on .detail_box_wrap {
border-top: 1px solid #E4E8EE;
display: block;
padding-top: 20px;
}
*/
.reviewer_list .selection_item.mission .review_cont{
display: block;
}
.reviewer_list .review_cont{
display: none;
}
.reviewer_list .review_cont.on{
display: block;
}
.reviewer_list .review_cont .btn_wrap #review_edit_btn{
width: 100%;
height: auto;
padding: 13px 0 ;
text-align: center;
}

.reviewer_list .detail_box li {
/*
position: relative;
padding-left: 102px;
*/
font-size: 14px;
letter-spacing: -0.56px;

/*    gap:8px;*/

}
.reviewer_list .detail_box li{
font-size: 16px;
color: #666;
display: flex;
font-weight: 400;
line-height: 30px;
flex-direction: column;
 padding-bottom: 5px;
}
.reviewer_list .detail_box li span{
display: inline-block;
width: 100%;
text-align: left;
word-break: keep-all;
font-size: 14px;
 line-height: 1.6;
}

.reviewer_list .detail_box li.list_col{
flex-direction: column;
}
.reviewer_list .detail_box li.list_col{
margin-top: 10px;
}
.reviewer_list .detail_box li.list_col textarea{
border-radius: 5px;
border: 1px solid #E4E8EE;
background: #fff;
padding: 10px;
font-size: 13px;
color: #222;
margin: 0;
}

.reviewer_list .detail_box li + li {
}

.reviewer_list .detail_box li h3 {

font-size: 14px;
letter-spacing: -0.56px;
color: #666;
max-width: 92px;
width: 100%;
}
.reviewer_list .detail_box li h3{
font-size: 16px;
color: #222;
font-weight: 400;
line-height: 30px;
}

.reviewer_list .detail_box textarea {
width: 100%;
height: 64px;
padding: 8px 10px 5px;
border-radius: 4px;
border: solid 1px #E4E8EE;
-webkit-appearance: none;
background-color: #fff !important; 
font-size: 10px;
letter-spacing: -0.4px;
color: #222;
box-sizing: border-box;
opacity:1;
}

.reviewer_list .memo_box {
position: relative;
display: flex;
gap:10px;
}
.reviewer_list .memo_box{
/*    padding-top: 20px;*/
}

.reviewer_list .memo_box textarea {
width: calc(100% - 64px);
}

.reviewer_list .memo_box button {
/*
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
*/
/*    display: block;*/
width: 60px;
/*    height: 64px;*/
border-radius: 5px;
/*    border: solid 1px #E4E8EE;*/
background-color: #fff;
font-size: 13px;
font-weight: 400;
letter-spacing: -0.48px;
color: #222;
box-sizing: border-box;
}

.reviewer_list .visitScheduledDate > .scheduleInfo{
display: flex;
font-size: 12px;
flex-direction: column;
height: 60px;
justify-content: center;
}
.reviewer_list .visitScheduledDate > .scheduleInfo.edit p{
color: var(--primary-color);
font-weight: 700;
}

.reviewer_list .visitConfirm{
/*    padding-top: 15px;*/
display: flex;
flex-direction: column;
gap: 10px;
text-align: center;


}

.reviewer_list .visitConfirm span{
background: #3ccbdb;
padding: 13px;
color: #fff;
border-radius: 10px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
margin-bottom: 10px;
}

.reviewer_list .review_photo {
padding: 10px;
display: flex;
gap: 5px;
background: var(--bg-gray);
}

.reviewer_list .review_photo li {
position: relative;
text-align: center;
flex: 1;
word-break: keep-all;
display: flex;
flex-direction: column;
justify-content: space-between;

}

.reviewer_list .review_photo li.visitScheduledDate{
/*    max-width: 90px;*/
}

.reviewer_list .review_photo .thum {
max-width: 70px;
width: 100%;
height: 70px;
margin: 0 auto;
border-radius: 5px;
border: solid 1px #ededed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
box-sizing: border-box;
}

.reviewer_list .review_photo .btn_go_blog,
.reviewer_list .review_photo .btn_go_instar {
position: static;
margin: 0;
padding: 0;
border: none;    
max-width: 70px;
width: 100%;
/*    height: 100%;*/
height: 70px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
background-color: transparent;
}

.reviewer_list .review_photo .btn_go_blog img,
.reviewer_list .review_photo .btn_go_instar img{
max-width: 44px;
width: 100%;
}


/* 광고주 센터 리뉴얼 CSS */



.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: 400;
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: 500;
border-bottom: 5px solid #3ccbdb;
}


.projectAll .item_box{
margin-top: 20px;
border-radius: 12px 12px 0 0;
/*    overflow: hidden;*/
}

.projectAll .chips{
display: flex;   
padding: 10px 20px;
gap:10px;
}
.projectAll .chips ~ .item_box{
margin-top: 0;
}

.projectAll .chip{
border: 1px solid #904AAC ;
border-radius: 15px;
padding: 0 10px;
line-height: 23px;
cursor: pointer;
color: #904AAC ;
}
.projectAll .chip:hover{
background: #904AAC ;
color: #fff;
}

.projectAll .chip.label.ing:hover{
border: 1px solid #ACD92C;
background: #ACD92C;
color: #fff;
}
.projectAll .chip.label.submit:hover{
border: 1px solid #3ccbdb;
background: #3ccbdb;
color: #fff;
}
.projectAll .chip.label.expires:hover{
border: 1px solid #E79E00;
background: #E79E00;
color: #fff;
}

.projectAll .chip.on{
background: #904AAC ;
color: #fff;
}

.projectAll .chip.label.ing.on{
border: 1px solid #ACD92C;
background: #ACD92C;
color: #fff;
}
.projectAll .chip.label.submit.on{
border: 1px solid #3ccbdb;
background: #3ccbdb;
color: #fff;
}
.projectAll .chip.label.expires.on{
border: 1px solid #E79E00;
background: #E79E00;
color: #fff;
}


.status_item {
/*    padding: 20px 20px 0;*/
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
transition-property: background-color;
transition-duration: .1s;
cursor: pointer;
}
.status_item:hover{
background: #E4E8EE;
}
.status_item:hover .container{
background: #E4E8EE;

}


.status_item:hover .container .status_box.bottom{
border-top-color: #fff;
}
.status_item:last-child{
/*    padding-bottom: 20px;*/
}



.status_item .container{
background-color: #fff;
display: inline-block;
width: calc(100% - 40px);
padding: 20px;
border-bottom: 1px solid #E4E8EE;
transition-property: background-color;
transition-duration: .1s;
}

.status_item .arrow_box{
display: inline-block;
line-height: 1;
padding: 10px;
border-radius: var(--border-round-S);
cursor: pointer;
}
.status_item .arrow_box:hover{
background: #F4F5F9;
}

.status_box {
display: flex;
gap: 20px;
padding-bottom: 16px;
}

.status_box .desc{
display: flex;
flex-direction: column;
flex: 1;
/*    overflow: hidden;*/
}

.status_box .desc .label_container{
padding-bottom: 10px;
justify-content: space-between;
}
.status_box .thum {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 10px;
/*    min-width: 100px;*/
aspect-ratio: 1 / 1;
/*    max-width: 100px;*/
transition: .3s;
cursor: pointer;
border: 1px solid #E4E8EE;
width: 150px;
}
.status_box .thum:hover{
/*    background-size: 110px;*/
}

.status_box .desc .cp_info{
display: flex;
gap:10px;
align-items: center;
line-height: 1;
}
.status_box:not(.bottom) .desc .cp_info span{
cursor: pointer;
}
.status_box .desc .cp_info span:nth-child(1){
color: #666;
/*    max-width: 54px;*/
font-size: 16px;

}
.status_box .desc .cp_info span:nth-child(2){
color: #222;
display: flex;
gap: 5px;
align-items: center;
font-size: 18px;
font-weight: 400;
}

.status_box .desc .cp_info.cp_id span{
font-size: 16px;
font-weight: 300;
color: #444C67;
padding-bottom: 10px;
}
.status_box .desc .cp_info.cp_subject span{
color: #444C67;
font-weight: 500;
font-size: 20px;
padding-bottom: 10px;
line-height: 1.2;
}
.status_box .desc .cp_info.contents span{
display: flex;
gap:5px;
align-items: center;
font-size: 18px;
color: #666;
}
.status_box .desc .cp_info.contents span img{
max-width: 18px;
}


.status_box.bottom .desc .cp_info span:nth-child(2){
display: inline-block;
/*    width: 80px;*/
text-align: left;
}




.status_box.bottom{
padding-top:16px;
gap:16px;
padding-bottom: 0;
border-top: 1px solid #E4E8EE;
}

.status_box.bottom .desc{
display: flex;
flex-direction: row;
}

.status_box.bottom .desc .top,.status_box.bottom .desc .bottom{
display: flex;
flex-direction: column;
gap:10px;
}
.status_box.bottom .desc .cp_info:nth-child(1){
grid-column:  1 / 2;
grid-row: 1 / 2;
}
.status_box.bottom .desc .cp_info:nth-child(2){
grid-column:  2 / 2;
grid-row: 1 / 2;
}
.status_box.bottom .desc .cp_info:nth-child(3){
grid-column:  1 / 2;
grid-row: 2 / 4;
}
.status_box.bottom .desc .cp_info:nth-child(4){
grid-column:  2 / 4;
grid-row: 2 / 4;
}
.status_box.bottom .desc .cp_info{
line-height: 1;
width: 250px;
}


.status_box.bottom .desc .cp_info b{
color: #3CCBDB;
font-weight: 700;
}

.status_box.bottom > div .btn{
background: #f4f5f9;
color: #222;
font-size: 16px;
font-weight: 500;
padding: 12.5px 0;
border-radius: 5px;
line-height: 24px;
height: 100%;
cursor: pointer;
}

.status_box.bottom > div .btn.active{
background: var(--gradient-color);
color: #fff;
}
.status_box.bottom > div .btn.active:hover{
background:var(--gradient-hover-color);
}
.status_box.bottom > div .btn.disabled:hover{
background: #E7E7E7;
}

.status_box.bottom > div.btn_wrap{
/*    flex: 3;*/
/*    flex-direction: row;*/
width: calc(100% - 526px);
}
.status_box.bottom > div.btn_wrap div{
text-align: center;
flex: 1;
display: block;
font-size: 18px;
}

.label_container {
display: flex;
gap:5px;
/*    justify-content: space-between;*/
align-items: center;
}
.label_container .label:not(.non){
border-radius: 9999px;
padding: 5px 10px;
display: inline-block;
line-height: 1;
font-size: 14px;
}
.label_container .copy_btn{
border: 1px solid #3ccbdb;
border-radius: 30px;
padding: 5px 10px;
}
.status_box .copy_btn {
height:20px;
font-size: 14px;
text-align: center;
line-height: 20px;
border-radius: 10px;
padding: 0 5px;
border: 1px solid #3ccbdb;
}

.status_box .btn_wrap{
display: flex;
flex-direction: row;
align-items: flex-start;
}
.status_box .btn_wrap > div{
display: flex;
flex-direction: row;
gap:10px;
padding: 10px 12.5px;
/*    background: #F4F5F9;*/
color: #222;
border-radius: 5px;
cursor: pointer;
border: 1px solid var(--line-color);
}
.status_item:hover .status_box .btn_wrap.top > div{
background-color: #F4F5F9;
}

.status_box .btn_wrap .cp_status_wrap{
border: none;
padding: 0;
color: #555;
position: relative;
min-width: 138px;

}
.status_box .btn_wrap .cp_status_wrap label{
padding: 10px;
min-width: 168px;
text-align: center;
display: block;
border: 1px solid #555;
border-radius: var(--border-round-S);
padding-left: 70px;
display: flex;
align-items: center;
line-height: 21px;
}
.status_box .btn_wrap .cp_status_wrap .tooltip{
/*    position: absolute;*/
/*    right: 20px;*/
}
.status_box .btn_wrap .cp_status_wrap [role="switch"]{
background: #555;
border:1px solid #555;
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
}
.status_box .btn_wrap .cp_status_wrap [role="switch"]::before{
border:1px solid #555;
background: #fff;
}

.status_box .btn_wrap .cp_status_wrap:has(input:checked) [role="switch"]{
background: var(--primary-color);
border:1px solid var(--primary-color);
}
.status_box .btn_wrap .cp_status_wrap:has(input:checked) [role="switch"]::before{
border:1px solid var(--primary-color);
background: #fff;
}

.status_box .btn_wrap .cp_status_wrap input:checked + label{
border-color: var(--primary-color);
color: var(--primary-color);
}



.cp_status_wrap{
border: none;
padding: 0;
color: #555;
position: relative;
min-width: 138px;

}
.cp_status_wrap label{
padding: 10px;
min-width: 168px;
text-align: right;
display: block;
border: 1px solid #555;
border-radius: var(--border-round-S);
padding-left: 70px;
display: flex;
align-items: center;
line-height: 21px;
font-size: 14px;
}
.cp_status_wrap [role="switch"]{
background: #555;
border:1px solid #555;
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
}
.cp_status_wrap [role="switch"]::before{
border:1px solid #555;
background: #fff;
}

.cp_status_wrap:has(input:checked) [role="switch"]{
background: var(--primary-color);
border:1px solid var(--primary-color);
}
.cp_status_wrap:has(input:checked) [role="switch"]::before{
border:1px solid var(--primary-color);
background: #fff;
}

.cp_status_wrap input:checked + label{
border-color: var(--primary-color);
color: var(--primary-color);
}




.btn_wrap{
gap:16px;
}
.btn_wrap a{
flex: 1;
}
.btn_wrap .btn_sky{
box-shadow: 0px 10px 15px 0px rgba(13, 186, 205, 0.20);    
}

.status_box .label{
text-align: center;
line-height: 1;
border-radius: 20px;
font-size: 14px;
letter-spacing: -0.28px;
color: #fff;
box-sizing: border-box;
max-width: fit-content;
width: 100%;

}

.status_box .label.non{
display: none;
}

.label.ing{
border: 1px solid #ACD92C;
background: #fff;
color: #ACD92C;
}

.label.ing2{
border: 1px solid #ffa53e;
background: #fff;
color: #ffa53e;
}

.label.submit{
border: 1px solid #3ccbdb;
background: #fff;
color: #3ccbdb;
}

.label.end{
border: 1px solid #999;
background: #fff;
color: #999;
}

.label.cancel{
border: 1px solid #ff5757;
background: #fff;
color: #ff5757;
}

.label.influencer_asign{
border: 1px solid #FF6262;
background: #fff;
color: #FF6262;
}
.label.review_asign{
border: 1px solid #FF6262;
background: #fff;
color: #FF6262;
}

.label.expires{
border: 1px solid #E79E00;
background: #fff;
color: #E79E00;
}





.status_box .desc {
display: flex;
flex-direction: column;
/*    justify-content: space-between;*/
}

.status_box li {
font-size: 14px;
letter-spacing: -0.56px;
color: #666;
text-align: left;
line-height: 1.5;
display: flex;
}
.status_box li .subject{
min-width: 67px;
display: inline-block;
color: #666;
}

.status_box li .description{
color: #222;
display: inline-block;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}

.progress {
width: 100%;
height: 15px;
margin: 0 auto;
border-radius: 30px;
background-color: #F4F5F9;
box-sizing: border-box;
}

.progress .inner {
display: block;
border-radius: 7.5px;
padding-right: 14px;
font-size: 10px;
letter-spacing: -0.4px;
text-align: right;
color: #fff;
}

.status_item.ing .progress .inner {
background-color: #ACD92C;
}

.status_item.submit .progress .inner {
background-color: #3ccbdb;
}

.status_item.end .progress .inner {
background-color: #bcbcbc;

}

.progress_info {
padding-bottom: 10px;
}

.progress_info li {
font-size: 14px;
line-height: 1.4;
letter-spacing: -0.56px;
color: #666;
}

.status_item .btn_sky {
display: block;
margin: auto;
width: 90px;
}


.main_quick{
display: none;
}

.app_bar{
display: none;
}

.main_user_cont{
display: none;
}


[data-device="MO"]{
display: none ;
}
[data-device="PC"]{
display: inherit;
}


#modal-campaign_sheet .item{
display: flex;
flex-direction: column;
gap:10px;

}
#modal-campaign_sheet .item > div{
background: #F4F5F9;
display: flex;
flex-direction: row;
gap:10px;
padding: 20px;
border-radius: 8px;
align-items: center;

}
#modal-campaign_sheet .item > div img{
max-width: 20px;
width: 100%;
}

/* 모바일 반응형 CSS */

@media (max-width:768px){
[data-device="MO"]{
    display: inherit;
}
[data-device="PC"]{
    display: none !important;
}

html,body {
    min-width: initial;
}
body{
    padding-top: 70px;
    background: #fff !important;
}
header{
    min-width: initial;
}

#footer{
    display: none;
}


.moreBtn{
    margin: 30px auto 110px;
    text-align: center;
    display: inline-block;
    width: 100%;
    
}
.moreBtn div{
    margin: 0 auto;
    max-width: 184px;
    padding: 8px 9.5px;
    border-radius: 5px;
    background: #fff;
}

.app_bar{
    display: block;
}

#container{
    min-width: initial;
    margin-bottom: 0;
}

#container #side-menu{
    display: none;
}
.projectAdd{
    display: none;
}

#container #wrap{
    padding: 0px;
    
}

/*     header CSS  */
#header .logo_wrap > a{
    max-width: 70px;
    
}
#header .logo_wrap a span{
    font-size: 14px;
    font-weight: 400;
}
#header .logo_wrap a img{
    width: 100%;
}

#header .tool_area .inner{
    height: auto;
    padding: 15px 20px;
}
#header .tool_area .inner .use-info{
    display: none;
}
#header .tool_area .inner li:not(.marketing){
    display: none;
}
#header .tool_area, #header .catagory_area{
    border-bottom: 0;
}
    #header .ad_banner.pc{
    display: none;
}
#header .ad_banner.mo{
    display: flex;
}
#header .ad_banner > div .text{
font-size: 14px;
font-weight: 500;
display: flex;
gap:30px;
}
#header .ad_banner.mo > div{
gap:30px;
}
#header .ad_banner > div .link_text{
display: none;
}

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

.section-area{
    padding: 0;
    margin-bottom: 0;
    background: #f4f5f9;
    min-width: initial;
}
.section-area > article{
    padding: 20px 20px 30px ;
    background: #fff;
}
.section-area > article.tab{
    padding-bottom: 0;
    padding-top: 0;
}
.section-area > article > .title{
    font-size: 20px;
}

.section-area .item_box{
    padding: 0 20px;
    background: #f4f5f9;
}
.project-status-area{
    gap:8px;
    padding-top: 20px;
}

.project-status-area .box{
    flex-direction: column;
    padding: 20px 7.5px;
    gap:10px;
}
.project-status-area .box .left{
    order: 2;
    align-items: center;
    gap:10px;
}
.project-status-area .box .right{
    order: 1;
}
.project-status-area .box .right img{
    max-width: 38px;
}
.project-status-area .box .left .count{
    font-size: 40px;
}
.project-status-area .box .left .text{
    font-size: 16px;
    font-weight: 400;
    word-break: keep-all;
}



.main_quick{
display: flex;
gap:8px;
padding: 20px 20px;
}

.main_quick a{
border-radius: 20px;
background: #FFF;
padding: 20px;
display: flex;
flex: 1;
justify-content: space-between;
word-break: keep-all;
/*    min-height: 124px;*/
/*    min-width: 124px;*/
aspect-ratio: 1/1;
box-sizing: border-box;
flex-direction: column;
justify-content: space-between;
}
.main_quick a p{
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 125% */
}



.main_quick a p:last-child{
align-self: flex-end;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
}



.main_quick a p span{
font-weight: inherit;
color: var(--primary-color);
font-weight: 700;
}

.section-group{
display: none;
}
.section-group.manager-area{
display: block;
}


.main_user_cont{
display: block;
padding: 32px 20px;
background: #fff;
}
.main_user {
display: flex;
padding: 20px 15px;
background: #454D56;
margin-top: 10px;
gap:20px;
border-radius: 10px;
}

.main_user.more_user{
background: #fff;
padding: 25px 20px;
align-items: center;
margin-bottom: 12px;
margin-top: 0;
}

.main_user.more_user .profile_info h3{
font-size: 14px;
font-weight: 500;
min-width: 50px;
}

.main_user.more_user .profile_info p{
color: #222;
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}

.main_user.more_user .borderBtn{
border: 1px solid #E4E8EE;
background: #F9F9F9;
border-radius: 4px;
color: #666;
font-size: 14px;
padding: 10px 15px;
line-height: 1;
}

.new .main_user{
margin-bottom: 0;
align-items: center;
}

.profile {
position: relative;
/*    border: solid 1px #707070;*/
/*    background-color: #e9e9e9;*/
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
box-sizing: border-box;
}

.main_user .profile {
width: 80px;
height: 80px;
}

.profile .edit {
position: absolute;
right: -10px;
bottom: -2px;
display: block;
width: 33px;
height: 33px;
cursor: pointer;
border: solid 1px #707070;
background-color: #F4F5F9;
border-radius: 50%;
text-align: center;
box-sizing: border-box;
} 

.profile .modifyBtn {
position: absolute;
right: -4px;
bottom: -7px;
width: 25px;
height: 25px;
border-radius: 50%;
border: solid 1px #707070;
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/profile_edit.svg);
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.profile .modifyBtn input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0;
}
.profile .modifyBtn input + label {
position: absolute;
left: 0;
top : 0;
width: 100%;
height: 100%;
z-index: 1;
cursor: pointer;
}

.profile .edit img {
position: relative;
top: 50%;
transform: translateY(-50%);
}

.profile_info {
padding-top: 5px;
width: calc(100% - 80px - 20px);
display: flex;
flex-direction: column;
gap: 7px;
}

.profile_info li {
position: relative;
font-size: 18px;
letter-spacing: -0.72px;
color: #fff;
display: flex;
gap: 16px;
align-items: center;
width: 100%;
}

.profile_info li + li {
}

.profile_info h3 {
font-size: 16px;
font-weight: 500;
letter-spacing: -0.48px;
color: #92979c;
min-width: 60px;
}
.profile_info strong{
flex: 2;
font-size: 16px;
color: #fff;
}



.status_item{
    margin-bottom: 20px;
    border-radius: 10px;
}
.status_item:last-child{
    margin-bottom: 0;
}
.status_item .container{
    width: 100%;
/*        padding:20px 20px; */
    border-bottom: 0;
}
.status_item .arrow_box{
    display: none;
}
.status_label{
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.status_label span{
    padding: 10px 22px;
}

.status_label span.badge::before{
    right: 14px;   
}

.label_container[data-device='MO']{
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
}
.label_container[data-device='MO'] .label{
    line-height: 1;
    margin-right: 3px;
}
.label_container[data-device='MO'] .label:last-child{
    margin-right: 0;
}
.label_container[data-device='MO'] .dot_menu{
    display: flex;
    align-items: center;
}
.status_box .desc{
    gap:5px;
}

.status_box .thum{
    max-width: 80px;
    max-height: 80px;
    min-width: initial;
    width: 100%;
}


.status_box .desc .cp_info{
    align-items: flex-start;    
}
.status_box .desc .cp_info span:nth-child(1){
    max-width: 60px;
    width: 100%;
}



.status_box.bottom{
    flex-direction: column;
    
}
.status_box.bottom .desc{
    padding-right: 0;
    justify-content: normal;
    gap:10px;
}

.status_box.bottom > div.btn_wrap div{
    padding: 8px 0;
}


.status_box.bottom .desc .cp_info:nth-child(1){
    grid-column:  1 / 2;
    grid-row: 1 / 2;
}
.status_box.bottom .desc .cp_info:nth-child(2){
    grid-column:  2 / 3;
    grid-row: 1 / 2;
}
.status_box.bottom .desc .cp_info:nth-child(3){
    grid-column:  1 / 2;
    grid-row: 2 / 3;
}


.status_box.bottom .desc .arrow_box{
    display: initial;
    grid-column:  3 / 4;
    grid-row: 1 / 3;
    justify-self: flex-end;
    align-self: center; 
}


















/*    navbar */
.app_bar {
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;
transition: all .5s;
}
.app_bar.off{
bottom:-81px;
}

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

.app_bar_menu img {
display: block;
margin: auto;
}

.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;
}

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

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

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

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

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

.app_bar4 img {
padding-bottom: 14px;
}



}



/* 일정 수정 관련 모달 */
.date-modify .modal-content{
padding: 0;
min-width: 582px;
}

.date-modify .modal-layer{
max-width: 580px;
}
.date-modify .modal-layer .notice{
padding-top: 20px;
}
.date-modify .modal-layer .btn_area{
display: flex;
gap:31px;
padding-bottom: 0;
margin-top: 50px;
}
.date-modify .modal-layer .btn_area button{
width: 100%;
height: auto;
padding: 13px 0;
max-width: 134px;
border-radius: 5px;
}
.date-modify .modal-layer .head{
padding: 30px;
height: auto;
border-bottom: 0;
padding-bottom: 0;
}
.date-modify .modal-layer .head h1{
margin: 0;
}
.date-modify .modal-layer .content{
padding: 25px 30px;
}
.date-modify .modal-layer .content .date_cont{
display: flex;

justify-content: center;
width: fit-content;
margin: 0 auto;
}
.date-modify .modal-layer .content input{
width: 180px;
height: auto;
border: none;
padding: 10px 30px;
cursor: pointer;
border: 1px solid #3ccbdb;
border-radius: 5px;
background-image: url('../img/icon/date_icon.svg');
background-size: 23px;
background-repeat: no-repeat;
background-position-x: calc(100% - 20px);
background-position-y: center;
}
.date-modify .modal-layer .notice{
color: #222;
}
.date-modify .modal-layer .closer{
background-image: url(https://assaview.co.kr/skin/demo/img/icon/tool/close.svg);
right: 30px;
top: 23px;
margin: 0;
width: 20px;
height: 20px;
transform: translateY(50%);
}


#modal-asign-noti-modal .notice{
padding-top: 10px;
}
#modal-asign-noti-modal .notice:first-child{
padding-top: 0;
}




.reviewer_list .selection_item.black .sel_profile_box .profile{
background: #E4E6EF;
}

.reviewer_list .selection_item.black .sel_profile_box .blog_area{
background: #E4E6EF; 
border-radius: 5px;
height: 24px;
}

.reviewer_list .selection_item.black .sel_profile_box .blog_grade{
background: #E4E6EF; 
border-radius: 5px;
height: 78px;
}

.reviewer_list .selection_item.black .sel_profile_box .today div span:last-child{
background: #E4E6EF; 
border-radius: 5px;
width: 50px;
}

.reviewer_list .selection_item.black .sel_profile_box textarea{
background: #E4E6EF; 
border-radius: 5px;
color: #222;
}

.reviewer_list .selection_item.black .sel_profile_box .reviewer_info button{
background: #E4E6EF; 
border-radius: 5px;
}

.reviewer_list .selection_item.black .sel_profile_box .reviewer_info .btn_cont button{
background: #E4E6EF !important; 
border-radius: 5px;
}
.reviewer_list .selection_item.black .sel_profile_box .reviewer_info button label{
background-image: url(../img/icon/check_icon_gray.svg);
}




#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 h1{
    font-size: 25px;
    font-weight: 700;
    margin: 0;
}
#mission_guide_check_modal .head{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #888;
    gap: 10px;
}
#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;
}
#mission_guide_check_modal .content{
    padding-top: 30px;
}
#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:last-child{
gap: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 .text_cont{
    padding-bottom: 30px;
}
#mission_guide_check_modal .content .text_cont textarea{
border-color: #3ccbdb;
border-radius: 5px;
padding: 10px;
width: 100%;
height: 130px;
outline: none;
}
#mission_guide_check_modal .content .text_cont > div{
padding-bottom: 10px;
font-weight: 500;
}

#mission_guide_check_modal .btn_area .closer{
position: static;
}

.btn_area{
    text-align: center;
    padding-top: 20px;
}
.result_tag{
    border-radius: 5px;
    border: 2px solid;
    font-weight: 500;
    padding: 3px;
    width: fit-content;
    margin: 5px auto 0;
}

.result_tag.error{
    color: #FF8B8B;
}
.result_tag.success{
    color: #3ccbdb;
}





/* 검수 기준 팝업 */
#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: calc(50% + 5px);
    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 .head h1{
margin: 0;
}

#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;
}
#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;
}
#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;
}


.modal-dialog .modal-content#temp_check{
min-width: 390px;
}
.modal-dialog .modal-content#temp_check .content{
padding: 0;
}
#temp_check .btn_area{
padding-top: 0;
gap:10px;
}
#temp_check .btn_area button{
max-width: initial;
font-size: 16px;
padding: 10px 0;
}


.cart .head_cont{
padding: 40px 0 0 20px;
border-radius: 12px;
box-shadow: 10px 10px 10px rgba(212,212,223,0.2);
}
.cart .tab{
padding-top: 20px;
}

.cart .scroll-wrap{
margin-top: 20px;
background: none;
padding: 0;
overflow: auto;
}

.cart .section-area{
background: none;
}

.cart .section-area .item_cont{
display: flex;
flex-direction: column;
gap: 10px;
}

.cart .section-area .item_cont .item{
background: #fff;
border-radius: 15px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}

.cart .section-area .item_cont .item .top{
display: flex;
align-items: center;
justify-content: space-between;
}
.cart .section-area .item_cont .item .top .date_cont .text{
padding-right: 10px;
font-weight: 300;
}
.cart .section-area .item_cont .item .top .date_cont .date{
color: #222;
}
.cart .section-area .item_cont .item .bottom{}
.cart .section-area .item_cont .item .bottom .red_btn{
border-radius: 5px;
padding: 10px;
font-weight: 300;
min-width: 110px;
text-align: center;
}
.cart .section-area .item_cont .item .bottom .cp_id{
color: #888;
}
/*
.cart .section-area .item_cont .item .bottom .subject{
font-size: 16px;
}
*/
.cart .pagenate{
background: #fff;
width: 100%;
margin-top: 20px;
padding: 40px 0;
border-radius: 12px;
}





#modal-with-campaign{
max-width: 800px;
width: 100%;
}
#modal-with-campaign .modal-layer .content{
padding: 0 0 20px 0 ;
}
#modal-with-campaign .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-with-campaign .cp_list_cont .item{
padding: 20px 0px ;
/*    border-top: 1px solid #E4E8EE;*/
display: flex;
gap:10px;
align-items: center;
position: relative;
justify-content: space-between;
padding-right: 40px;
}
#modal-with-campaign .cp_list_cont > .item{
cursor: pointer;    
}
/*
#modal-with-campaign .cp_list_cont .item > span{
min-width: 82px;
}
*/
#modal-with-campaign .cp_list_cont .item .cp_info{
display: flex;
align-items: center;
gap:10px;
}
#modal-with-campaign .cp_list_cont .item .cp_info .status{
display: flex;
align-items: center;
gap:10px;
}
#modal-with-campaign .cp_list_cont .item .cp_info .label{
color: var(--primary-color);
border: 1px solid var(--primary-color);
padding: 0 10px;
border-radius: 15px;
}
#modal-with-campaign .cp_list_cont .item .cp_info .date{
color: var(--primary-color);
}
#modal-with-campaign .cp_list_cont .item .cp_info .link{
display: flex;
align-items: center;
cursor: pointer;
}

#modal-with-campaign .cp_list_cont .more_item{
height: 0;
max-height: 230px;
overflow: hidden;
}
#modal-with-campaign .cp_list_cont .more_item .item{
padding: 0;
border-top: 0;
}

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

#modal-with-campaign .cp_list_cont .open.on img{
transform: rotate(-180deg);
}
#modal-with-campaign .btn_wrap{
text-align: center;
}
#modal-with-campaign .btn_wrap div{
text-align: center;
width: 100%;
margin: 0 auto;
}




.mb_filter_btn{
display: flex;
align-items: center;
gap:10px;
font-weight: 400;
padding: 11px;
border-radius: var(--border-round-S);
line-height: 1;
}
.mb_filter_btn img{
max-width: 18px;
width: 100%;
}



.duplication_section .selectBox__.duplication_filter .select__{
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 10px;
height: auto;
max-width: 540px;
width: 100%;
background-image: none;
}

.duplication_section .selectBox__ .list__ li{
padding: 10px;
white-space: normal;
}

.duplication_section .selectBox__.on .list__{
width: 100%;
max-height: 330px;
overflow-y: auto;
}

.duplication_section .selectBox__.duplication_filter .list__ li label{
line-height: 1.5;
}






#modal-edit-impossible{
min-width: initial;
}

#modal-edit-impossible .pop_cont{
max-width: 400px;
}
#modal-edit-impossible .pop_cont{
width: 100%;
}
#modal-edit-impossible .pop_cont .item{
max-width: initial; 
}
#modal-edit-impossible .pop_cont .item .text{
text-align: left;
font-size: 14px;
}

#modal-edit-impossible .pop_cont .btn_wrap{
display: flex;
justify-content: center;
align-items: center;
padding-top: 30px;
}
#modal-edit-impossible .pop_cont .btn_wrap a {
padding: 10px 0;
flex: 1;
line-height: 1;
font-size: 14px;
text-align: center;
}

#modal-edit-impossible .pop_cont .btn_wrap button {
padding: 10px 0;
flex: 1;
font-weight: 500;
line-height: 1;
font-size: 14px;
}



#modal-edit-impossible{
min-width: initial;
max-width: 400px;
width: 100%;
}
#modal-edit-impossible .body{
padding-top: 30px;
}

#modal-edit-impossible .item{
max-width: initial; 
}
#modal-edit-impossible .item .text{
text-align: left;
font-size: 14px;
}

#modal-edit-impossible .btn_wrap{
display: flex;
justify-content: center;
align-items: center;
padding-top: 30px;
}
#modal-edit-impossible .btn_wrap a {
padding: 10px 0;
flex: 1;
line-height: 1;
font-size: 14px;
text-align: center;
}

#modal-edit-impossible .btn_wrap button {
padding: 10px 0;
flex: 1;
font-weight: 500;
line-height: 1;
font-size: 14px;
}







#modal-edit-info{
min-width: initial;
}

#modal-edit-info .pop_cont{
max-width: 400px;
}
#modal-edit-info .pop_cont{
width: 100%;
}
#modal-edit-info .pop_cont .item{
max-width: initial;
align-items: flex-start;
}
#modal-edit-info .pop_cont .item .text{
text-align: left;
font-size: 14px;
}

#modal-edit-info .pop_cont .btn_wrap{
display: flex;
justify-content: center;
align-items: center;
padding-top: 30px;
}
#modal-edit-info .pop_cont .btn_wrap a {
padding: 10px 0;
flex: 1;
line-height: 1;
}

#modal-edit-info .pop_cont .btn_wrap button {
padding: 10px 0;
flex: 1;
font-weight: 500;
line-height: 1;
font-size: 14px;
}






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: 700px !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: block !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']:nth-child(2){
    bottom: 150px !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;
}
}




.section_cont{
background: #fff;
border-radius: 12px;
box-shadow: 10px 10px 10px rgba(212, 212, 223, 0.2);
-webkit-box-shadow: 10px 10px 10px rgba(212, 212, 223, 0.2);
}


.ticket_info{
background: #ECF9FB;
padding: 20px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap:20px;
border-radius: 10px;
}

.ticket_info .title{
border: 2px solid var(--primary-color);
background: #fff;
color: var(--primary-color);
width: fit-content;
border-radius: 5px;
padding: 10px 20px;
font-weight: 500;
line-height: 1;
}

.ticket_info .ticket_name{
font-size: 20px;
font-weight: 500;
}
.ticket_info .ticket_date{
font-size: 14px;
border: 1px solid #444C67;
padding: 5px 20px;
border-radius: 15px;
}


.ticket_select_cont{

}

.ticket_select_cont .title{
font-size: 18px;
font-weight: 500;
text-align: center;
padding-bottom: 20px;
}
.ticket_select_cont .info{
font-size: 16px;
padding-bottom: 20px;
}

.ticket_select_cont .item_cont{
display: flex;
flex-direction: column;
row-gap: 10px;
}

.ticket_select_cont .item_cont .item{
border: 1px solid #E4E8EE;
border-radius: 10px;
padding: 15px 10px;
display: flex;
gap:10px;
}
.ticket_select_cont .item_cont .item:has(input[type='radio']:checked){
border-color: var(--primary-color);
background: #ECF9FB;
}
.ticket_select_cont .item_cont .item .sale{
border: 1px solid var(--red-100-color);
border-radius: 5px;
color: var(--red-100-color);
padding: 5px;
font-size: 12px;
line-height: 1;
width: fit-content;
}
.ticket_select_cont .item_cont .item input{
width: 100%;
height: 100%;
}
.ticket_select_cont .item_cont .item.checkBox input + label{
padding-left: 20px;
}

.ticket_select_cont .item_cont .item > div{
display: flex;
flex-direction: column;
gap:10px;
line-height: 24px;
}
.ticket_select_cont .item_cont .item > div .name{
display: flex;
gap:20px;
}
.ticket_select_cont .item_cont .item > div .name strong{
font-size: 16px;
font-weight: 500;
}
.ticket_select_cont .item_cont .item > div .price strong{
font-size: 16px;

}

.ex_date{
background: #ECF9FB;
padding: 13px;
text-align: center;
font-size: 16px;
margin-top: 10px;
border-radius: 5px;
}

.ex_date .date{
color: var(--primary-color);
}
.ex_date b{
font-weight: 700;
}

.pay_btn_cont{
display: flex;
gap:10px;
margin-top: 10px;
}

.pay_btn_cont button{
color: #fff;
border-radius: 5px;
flex: 1;
padding: 13px;
font-size: 18px;
}
.pay_btn_cont button small{
font-size: 14px;
font-weight: 500;
}

.pay_btn_cont .smart_store{
background: #03C75A;
}

.pay_btn_cont .assaview_pay{
background: var(--primary-color);

}

.provision{
background: #F4F5F9;
padding: 30px 15px;
display: flex;
flex-direction: column;
gap:15px;
color: #888;
font-size: 14px;
border-radius: 12px;
}
.provision h3{
color: #666;
font-size: 16px;
padding-bottom: 10px;
}
.provision .item {

}
.provision .item div{
display: flex;
flex-direction: column;
gap:5px;
padding-left: 5px;
}



#store_pay .head{
position: relative;
padding-bottom: 20px;
}
#store_pay .head h2{
margin-bottom: 0;
}
#store_pay .head .closer{
width: 20px;
height: 20px;
}

#store_pay .body{
padding: 30px 0;
}
#store_pay .body .phone{
padding-left: 20px;
color: #3969EF;
font-weight: 700;
}

#store_pay .body .noti{
background: #ECF9FB;
padding: 13px;
margin-top: 15px;
}

#store_pay .btn_area{
padding: 0;
margin: 0;
}
#store_pay .btn_area a{
width: 100%;
height: auto;
box-shadow: none;
padding: 10px 0;
border-radius: 5px;
font-size: 14px;
box-sizing: border-box;
border: 1px solid var(--primary-color);
}


.section-area.title{

}
.section-area.title h3{
font-size: 24px;
display: flex;
align-items: center;
gap:20px;
font-weight: 700;
}

.section_cont.section_wrap{
background: none;
box-shadow: none;
}
.section_wrap{
display: flex;
gap:30px;
}

.section_wrap .left_section{
flex-grow: 1;
}
.section_wrap .right_section{
flex-grow: 1;
position: sticky;
top: 115px;
height: 100%;
max-width: 400px;
width: 100%;
}


form .section_wrap .section-area > article > .title{
margin: 0;
font-weight: 700;
line-height: 1;
padding-bottom: 20px;
}
.section_wrap .title{
margin: 0;

}

.payment_info{
display: flex;
flex-direction: column;
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}

.payment_info .item{
display: flex;
justify-content: space-between;
align-items: center;
}
.payment_info .item .item_price{
font-weight: 700;
font-size: 18px;
}
.payment_info .item.sale{
color: #3969EF;
}

.payment_area .btn_cont{
padding: 20px 0 ;
display: flex;
/*    flex-direction: column;*/
gap:10px;
}

.payment_area .btn_cont button{
padding: 10px;
width: 100%;
border-color: #888;
font-weight: 400;
}


.final_price{
background: #ECF9FB;
padding: 20px 10px;
border-radius: 10px;
display: flex;
justify-content: space-between;
}
.final_price .text{
font-weight: 700;
font-size: 18px;
}
.final_price .text small{
font-weight: 400;
font-size: 14px;
}

.total_price strong{
font-size: 18px;
color: var(--primary-color);
}

.field-flex-col-bg{
display: flex;
flex-direction: column;
gap:15px;
}

.field-flex-col-bg .field-bg{    
padding: 15px;
width: 100%;
}


.field-flex-col-bg .paymentInfo{

}

.field-flex-col-bg .paymentInfo table{
/*    border-bottom: 1px solid #E4E8EE;*/
}

.field-flex-col-bg .paymentInfo td:first-child{
max-width: 200px;
font-weight: 400;
}
.field-flex-col-bg .paymentInfo td,.field-flex-col-bg .tax_info td{
border: none;
height: auto;
padding: 10px 0 ;
}
.field-flex-col-bg .paymentInfo #deposit_price{
font-size: 18px;
font-weight: 700;
color: var(--primary-color);
}
.field-flex-col-bg .paymentInfo td input,.field-flex-col-bg .tax_info td input{
/*    max-width: 300px;*/
}

.field-flex-col-bg .paymentInfo label{
font-weight: 400;
}

.field-flex-col-bg .tax_info td input[name="tax_save"]{
max-width: none;
}

.field-flex-col-bg .paymentInfo .guideTxt{
padding-top: 15px;
border-top: 1px solid #E4E8EE;
width: 100%;
}


.field-flex-col-bg .first_td{
font-weight: 700;

}
.field-flex-col-bg .first_td:has(input:checked){
border-bottom: 1px solid #E4E8EE;
}

.field-flex-col-bg .tax_info > div{
display: flex;
/*    flex-direction: column;*/
width: 100%;
align-items: center;
}
.field-flex-col-bg .tax_info > div.first_td{
padding: 10px 0 ;
}
.field-flex-col-bg .tax_info .first_td > div:last-child{
flex:1;
}
.field-flex-col-bg .tax_info > .tr_cash div:last-child{
flex: 1;
}
.field-flex-col-bg .tax_info div.tr_tax,.field-flex-col-bg .tax_info div.tr_cash_personal,.field-flex-col-bg .tax_info div.tr_cash_business,.field-flex-col-bg .tax_info div.tr_cash{
display: flex;
align-items: center;
gap:10px;
}
.field-flex-col-bg .tax_info div.tr_tax div:last-child,.field-flex-col-bg .tax_info div.tr_cash_personal div:last-child,.field-flex-col-bg .tax_info div.tr_cash_business div:last-child,.field-flex-col-bg .tax_info div.tr_cash:last-child{
flex: 1;
}

.field-flex-col-bg .field-bg .tax_info{
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
/*
.field-flex-col-bg .paymentInfo > tbody > tr:not(.first_td){
border-top: 1px solid #E4E8EE;
}
*/
.field-flex-col-bg tbody .first_td + tr{
/*    border-top: 1px solid #E4E8EE;*/
}

.span_cash.tax_save_area{
padding: 10px 0;
}


.right_section .term_wrap{
width: auto;
}
.right_section .term_wrap > div{
font-size: 14px;
text-align: center;
}


.right_section .btn_cont{
padding: 10px 25px;    
background: #ECF9FB;
border-radius: 15px;
text-align: center;
}
.right_section .btn_cont button{
background: var(--primary-color);
color : #fff;
border-radius: 5px;
padding: 10px 25px;
width: 100%;
font-size: 18px;
min-height: 47px;
position: relative;
}

.right_section .btn_cont button:has(.white_loader){
display: flex;
justify-content: center;
align-items: center;
}


.account_info{
width: fit-content;
text-align: left;
margin-left: auto;
line-height:1.8;
}

.account_info .account{
display: flex;
gap:10px;
align-items: center;
}
.account_info button{
padding: 7px 12.5px;
background: transparent;
border-color: #888;
line-height: 1;
}



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




#sale_code_modal .body{
padding: 10px;
background: #f4f5f9;
margin: 20px 0;
border-radius: 10px;
}


#sale_code_modal .input_cont{
position: relative;
margin-bottom: 20px;
}
#sale_code_modal .input_cont input{
text-align: center;
padding: 9px 12px;
height: auto;
}
#sale_code_modal .input_cont button{
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
padding: 7px 12.5px;
line-height: 1;
font-size: 14px;
font-weight: 400;
}


#sale_code_modal .text{}
#sale_code_modal .text h3{
font-size: 16px;
font-weight: 500;
padding-bottom: 14px;
}
#sale_code_modal .text p{
font-size: 14px;
}


#sale_code_modal .btn_area{
display: flex;
gap:20px;
margin: 0;
padding: 0
}
#sale_code_modal .btn_area button{
flex-grow: 1;
max-width: none;
line-height: 1;
}

.sort_area{
/*    padding-bottom: 12px;*/
min-width: 120px;
display: flex;
justify-content: flex-end;
}

.sort_area .infl_sort{
max-width: 150px;
width: 100%;
}

.sort_area .infl_sort .box__{
display: flex;
justify-content: flex-end;
max-width: 150px;
}

.sort_area .infl_sort .select__{
width: fit-content;
height: auto;
font-size: 14px;
margin-bottom: 5px;
line-height: 1;
padding-right: 25px;
padding-top: 10px;
padding-bottom: 10px;
background-position: right 10px center;
background-color: #fff;
}


#ticket_info_modal .body{
font-size: 16px;
display: flex;
flex-direction: column;
gap: 20px;
}

#ticket_info_modal .btn_area{
gap:20px;
}

#ticket_info_modal .btn_area button{
max-width: none;
box-shadow: none;
}





.subscribe_banner_cont{
background: #ECF9FB;
padding: 20px 10px;
border-radius: 10px;
margin-bottom: 20px;
font-size: 16px;
font-weight: 500;
}

.subscribe_banner_cont .subscribe_banner{
display: flex;
justify-content: space-between;
}
.subscribe_banner_cont .subscribe_banner .date{
color: var(--primary-color);
}

.price_article{
padding: 20px 0;
border-bottom: 1px solid #EDEDED;
}

.price_article h3{
font-size: 16px;
font-weight: 500;
}

.price_article .service_price_info{
display: flex;
justify-content: space-between;
padding-bottom: 10px;
}

.price_info{
cursor: pointer;
}

.price_info div{
display: flex;
align-items: center;
}
.price_info div img{
padding-left: 10px;
}


.price_article .detail{
background-color: #F4F5F9;
padding: 15px 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
.price_article .detail .item{
display: flex;
justify-content: space-between;
font-size: 14px;
}


.biz_money_cont{
padding-bottom: 20px;
}
.biz_money_cont h3{
font-size: 16px;
font-weight: 400;
padding-bottom: 10px;
}
.biz_money_cont input{
height: auto;
flex: 1;
}
.biz_money_cont .input_cont{
display: flex;
gap:10px;
}
.biz_money_cont .input_cont input{
border-color: #888;
text-align: right;
}
.biz_money_cont .input_cont input::placeholder{
text-align: left;
}
.biz_money_cont .input_cont button{
padding: 12px 22px;
font-size: 14px;
font-weight: 400;
border-color: #888;
line-height: 1;
}


.feedback_section{}
.feedback_section h2{
font-size: 18px;
border-bottom: 1px solid #E4E8EE;
padding-bottom: 10px;
}

.feedback_section .content_box{
display: flex;
gap:10px;
}
.feedback_section .content{
padding: 10px;
flex:1;
}
.feedback_section .content_box .title{
font-size: 16px;
padding-bottom: 10px;
}


.feedback_section .star_rating{
min-height: 195px;
align-items: center;
justify-content: center;
gap: 50px;
margin-bottom: 0;
}

.feedback_section .text_cont{
min-height: 195px;

}
.feedback_section .text_cont textarea{
width: 100%;
height: 100%;
min-height: 195px;
border-color: var(--primary-color);
}
.feedback_section .btn_wrap{
padding-top: 20px;
}
.feedback_section .btn_wrap button{
width: 100%;
padding: 20px 0 ;
font-weight: 500;
}


.campaign_progress_info{}
.campaign_progress_info .pay_info{
background-color: #ECF9FB;
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
border-radius: 10px;
}
.campaign_progress_info .pay_info h3{
font-size: 20px;
}
.campaign_progress_info .info_text{
text-align: center;
font-size: 22px;
font-weight: 500;
padding: 10px 0 20px 0;
}

.campaign_info .campaign_wrap{
display: flex;
align-items: center;
gap: 20px;
}


.campaign_info .thumbnail{
max-width: 100px;
}

.campaign_info h3{
font-size: 20px;
padding-bottom: 15px;
}
.campaign_info .info .cp_id{
font-size: 16px;
color: #888;
font-weight: 300;
}



.campaign_info .info .cp_id{
padding-bottom: 10px;
}
.campaign_info .info .cp_subject{
font-size: 20px;
}

.campaign_info .btn_wrap{
display: flex;
gap:10px;
padding-top: 15px;
}
.campaign_info .btn_wrap button{
flex: 1;
text-align: center;
font-size: 18px;
font-weight: 500;
padding: 12px 0 ;
}
.campaign_info .sub_text{
padding-top: 15px;
font-weight: 300;
}







.ui.popup{
border: 2px solid var(--primary-color);
}
.ui.popup:has(.gray_box){
border: 2px solid #666;
}


.qualified{
border: 1px solid #E0E0E0;
background-color: #F9F9F9;
}









.free{
color: #EF5D1A;
font-weight: 500;
text-decoration-line: line-through;
}




/* 결제 정보 모달 */
#payment_info{}
#payment_info .pay_id{
background: var(--bg-gray);
color: #7D7D7D;
display: flex;
justify-content: space-between;
align-items: center;
padding: 6.5px 10px;
font-size: 14px;
border-radius: var(--border-round-L);
}

#payment_info .pay_price_info{
padding-top: 20px;
}

#payment_info .pay_price_info .pay_list{
display: flex;
flex-direction: column;
gap:10px;
color: #7D7D7D;
}
#payment_info .pay_price_info .pay_list .item{
display: flex;
justify-content: space-between;
font-size: 14px;
color: #222;
}
#payment_info .pay_price_info .pay_list .item .text{
display: flex;
align-items: center;
gap:10px;
position: relative;
flex: 1;
}

#payment_info .pay_price_info .pay_list .item .text .hover_info{
display: none;
position: absolute;
left: 0;
top: 30px;
padding: 15px;
border: 2px solid var(--primary-color);
background: #fff;
border-radius: 10px;
font-size: 12px;
color: #000;
line-height: 2;
}
#payment_info .pay_price_info .pay_list .item .text svg{
cursor: pointer;
}
#payment_info .pay_price_info .pay_list .item .text svg:hover ~ .hover_info{
display: block;
}

#payment_info .pay_price_info .pay_list .item span.price{
font-weight: 700;
}
#payment_info .pay_price_info .pay_list .sub_item{
color: #3969EF;
font-size: 12px;
}


#payment_info .pay_price_info .total_pay{
display: flex;
justify-content: space-between;
align-items: center;
background: var(--bg-sky);
border-radius: var(--border-round-L);
padding: 20px 10px;
margin-top: 10px;

}
#payment_info .pay_price_info .total_pay .left{
font-size: 18px;
font-weight: 700;
color: #222;
}

#payment_info .pay_price_info .total_pay .left small{
font-size: 16px;
font-weight: 400;
}

#payment_info .pay_price_info .total_pay .total_pay_price{
color: var(--primary-color);
font-size: 18px;
font-weight: 700;
}


#payment_info .pay_method_cont{
border-top: 1px solid var(--line-color,#E4E8EE);
padding-top: 20px;
margin-top: 20px;
font-weight: 700;
display: flex;
flex-direction: column;
gap: 10px;
}

#payment_info .pay_method_cont .pay_method{
display: flex;
justify-content: space-between;
color: #222;
}

#payment_info .pay_method_cont .pay_method_desc{
color: #7D7D7D;
font-weight: 400;
}




.payment_history_cont{
padding: 20px;
background-color: var(--bg-gray);
border-radius: 10px;
margin-top: 10px;
}
.payment_history_cont h4{
font-size: 18px;
padding-bottom: 20px;
}

.pay_price_info{

}
.pay_price_info .pay_list{
display: flex;
flex-direction: column;
gap:10px;
}
.pay_price_info .pay_list .item{
font-size:16px;
font-weight: 500;
display: flex;
justify-content: space-between;
}

.pay_price_info .pay_list .item .text{
display: flex;
align-items: center;
gap: 10px;
position: relative;
flex: 1;
}
.pay_price_info .pay_list .item .text .hover_info{
display: none;
position: absolute;
left: 0;
top: 30px;
padding: 15px;
border: 2px solid var(--primary-color);
background: #fff;
border-radius: 10px;
font-size: 12px;
color: #000;
line-height: 2;
z-index: 1;
}

.pay_price_info .pay_list .item .text svg{
cursor: pointer;
}
.pay_price_info .pay_list .item .text svg:hover ~ .hover_info{
display: block;
}
.pay_price_info .pay_list .sub_item{
padding-left: 20px;
font-weight: 400;
font-size: 14px;
color: var(--blue-color);
}

.pay_price_info .total_pay_cont{
padding: 10px 0;
margin-top: 10px;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
}
.pay_price_info .total_pay{
display: flex;
justify-content: space-between;
align-items: center;
background: var(--bg-sky);
border-radius: var(--border-round-L);
padding: 20px 10px;

font-size: 16px;
font-weight: 700;
}


.pay_price_info .total_pay .total_pay_price{
color: var(--primary-color);
font-size: 16px;
font-weight:700;    
}

.pay_price_info .total_pay .right{
font-size: 14px;
font-weight: 400;
}


.pay_method_cont{
/*
border-top: 1px solid var(--line-color, #E4E8EE);
padding-top: 20px;
*/
margin-top: 20px;
font-weight: 700;
display: flex;
flex-direction: column;
gap: 10px;
}

.pay_method_cont .pay_method{
display: flex;
justify-content: space-between;
color: #222;
font-size: 16px;
}

.pay_method_cont .pay_method_desc{
color: #7D7D7D;
font-weight: 400;
font-size: 16px;
}














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


.tool-area{
gap:10px;
}
.tool-area .row_1, .tool-area .row_2{
display: flex;
justify-content: space-between;
width: 100%;
}
.tool-area .row_1 .right,.tool-area .row_1 .left{
display: flex;
gap:5px;
}

.tool-area .fold_toggle button .text,.tool-area .filter_btn button .text{
display: flex;
align-items: center;
gap:10px;
}
.asign_infomation{
background-color: #fff;
}
.asign_infomation .btn_wrap{
padding-top: 12px;
max-width: 350px;
}
.asign_infomation .btn_wrap button{
font-size: 16px;
padding: 11px 0;
}
.asign_infomation .btn_wrap .active_btn button{
background-color: transparent;
}
.asign_infomation .btn_wrap button:disabled{
background: #CECECE !important;
color: #7D7D7D !important;
border: none !important;
}

.asign_infomation .information_tooltip{
color: var(--primary-color);
padding-top: 12px;    
display: flex;
align-items: center;
gap: 5px;
font-size: 16px;
font-weight: 500;
line-height: 1;
cursor: pointer;
}

.pull_up_condition_info{
background-color: #ECF9FB;
padding: 15px;
margin-top: 12px;
max-width: 350px;
border-radius: 10px;
color: #222;
}

.pull_up_condition_info .head{
padding-bottom: 10px;
font-size: 16px;
font-weight: 500;
}
.pull_up_condition_info .body{
display: flex;
flex-direction: column;
gap:10px;
font-size: 14px;
}
.pull_up_condition_info .body .item{
display: flex;
align-items: center;
gap: 10px;
}
.pull_up_condition_info .body .item .sub_text{
font-size: 14px;
font-weight: 300;
}



.legal_process_area{
    border: 1px solid var(--primary-color);
    margin-top: 10px;
    border-radius: var(--border-round-S);
}
.legal_process_area .date_edit_btn_wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 8px;
}
.legal_process_area .date_edit_btn_wrap.on + .legal_process_info{
    display: block;
}
.legal_process_area .date_edit_btn_wrap img{
    max-width: 15px;
    height: auto;
}
.legal_process_area .date_edit_btn_wrap.on img{
    transform: rotate(180deg);
}
.legal_process_area .date_edit_btn_wrap .empty_box{
    width: 15px;
    height: 15px;
}
.legal_process_area .date_edit_btn_wrap .date_edit_btn{
    border: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.legal_process_info{
    display: none;
    padding: 10px;
    border-top: 1px solid var(--line-color);
}
.legal_process_info > .head{
    font-size: 15px;
    font-weight: 500;
    padding-bottom: 10px;
}
.legal_process_info .process_info{
    padding: 5px;
    background-color: #ECFCFF;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}
.legal_process_info .process_desc{
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 10px;
}
.legal_process_info .step_info{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.legal_process_info .step_info .item{

}
.legal_process_info .step_info .item .head{
    font-size: 14px;
    font-weight: 600;
    color: #222;
}
.legal_process_info .step_info .item .desc{
    font-size: 14px;
    font-weight: 400;
}

.legal_action_btn{
    background-color: #fff;
    border: 1px solid #FF6163;
    color: #FF6163;
    font-size: 16px;
    font-weight: 500;
    padding: 11px 0;
    border-radius: var(--border-round-S);
    line-height: 1;
    width: 100%;
    margin-top: 10px;
}
.legal_action_btn:disabled{
    background-color: #CECECE;
    color: #7d7d7d;
    border: 1px solid #cecece;
}





#purpose_modal #mb_purpose{
    margin-top: 10px;
    width: 100%;
    min-height: 150px;
    padding: 10px;
}
#purpose_modal .body div{
    line-height: 1.4;
}