@import 'loading.css';
/*
0. Common - 공통
*/

@font-face {
    font-family: 'Pretendard';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

::-webkit-scrollbar {
    width: 8px;  /* 스크롤바의 너비 */
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #7A7A7A; /* 스크롤바의 색상 */
    border-radius: 20px;
}

::-webkit-scrollbar-track {
    background: #E8E8E8;  /*스크롤바 뒷 배경 색상*/
    border-radius: 20px;
}

button {
    background: inherit;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
    cursor: pointer
}

input, textarea, div[contenteditable], select {
    outline: none;
    font-size: 12px;
}

select:invalid {
    font-size: 12px;
    color: #8e8e8e;
}

input[type=checkbox] {
    width: 15px;
    height: 15px;
    margin: 3px 0 3px 0;
    flex: 0 0 auto;
    background: url(/images/icon-input-check-bg-gray.png) no-repeat center center / 15px 15px;
    vertical-align: text-bottom;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-progress-appearance: none;
}

input[type=checkbox]:checked {
    background: url(/images/icon-input-check-bg.png) no-repeat center center / 15px 15px;
}

input[type=radio] {
    width: 15px;
    height: 15px;
    margin: 3px 0 3px 0;
    flex: 0 0 auto;
    background: url(/images/radio-blank.png) no-repeat center center / 15px 15px;
    vertical-align: text-bottom;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-progress-appearance: none;
}

input[type=radio]:checked {
    background: url(/images/radio-fill.png) no-repeat center center / 15px 15px;
}

input[type=radio][role="switch"] {
    position: relative;
    border-radius: 50px;
    width: 30px;
    height: 18px;
    background: #E9E9E9;
}

input[type=radio][role="switch"]::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: left 250ms linear;
    box-shadow: 0 0 4px 0 #0000004D;
}

input[type=radio][role="switch"]:checked {
    background: #34C759;
}

input[type=radio][role="switch"]:checked::before {
    left: 14px;
}

input[type=date] {
    position: relative;
    width: 95px;
    height: 25px;
    padding: 0 5px;
    border: 1px solid #2FA254;
    border-radius: 5px;
    background: url(/images/icon-calendar.svg) no-repeat right 8px center / 8px auto #fff;
    font-size: 10px;
}

input[type=date]::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

a {
    color: inherit;
}

.underline {
    text-decoration: underline;
    text-underline-position: under;
}

.icon {
    width: 32px;
    height: 32px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.icon.sm {
    width: 20px;
    height: 20px;
}

.loading-thumbnail {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #e9e9e9;
}
.loading-thumbnail.banner-thumbnail {
    aspect-ratio: 10 / 3;
}

.loading-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.1s ease-out 0s;
}

.loading-thumbnail img.off {
    opacity: 1;
}

.form-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 10px;
}

.form-wrap + .form-wrap {
    margin-top: 20px;
}

.form-wrap .form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    flex: 1 0 100%;
}

.form-wrap .form .caution, .board-form-wrap .board-form .caution {
    display: none;
    flex: 1 0 100%;
    font-size: 10px;
    color: #f00;
}

.form.radio label{
    margin-left: 2px;
}

.board-form-wrap .board-form {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1 0 100%;
}

.board-form-wrap .board-form .time_select{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
}

.form-wrap .form.multiple-row input {
    width: 100% !important;
    flex: 1 0 calc(50% - 10px) !important;
}

.form-wrap .form-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    font-size: 15px;
    color: #111;
    line-height: 1.5;
}

.form-wrap .form-title.sm {
    font-size: 12px;
}

.form-wrap .form-title > * {
    flex: 1 1 auto;
    width: auto;
}

.form-wrap .form-title > .form.input3 {
    font-size: 12px;
}

.form-wrap .form-title > .form.input3 input[type=text], .form-wrap .form-title > .form.input3 input[type=password], .form-wrap .form-title > .form.input3 input[type=number] {
    width: 60px;
    flex: 0;
}

.form-wrap .form.input input[type=text], .form-wrap .form.input input[type=password], .form-wrap .form.input input[type=number] {
    width: auto;
    height: 40px;
    flex: 1 0 auto;
    padding: 0 10px;
    background: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    text-indent: 5px;
}

.form-wrap .form.input2 input[type=text], .form-wrap .form.input2 input[type=password], .form-wrap .form.input2 input[type=number], .form-wrap .form.input2 select {
    width: auto;
    height: 40px;
    flex: 1 0 auto;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    text-indent: 5px;
}

.form-wrap .form.input3 input[type=text], .form-wrap .form.input3 input[type=password], .form-wrap .form.input3 input[type=number] {
    width: auto;
    height: 40px;
    padding: 0 5px;
    flex: 1 0 auto;
    background: #fff;
    border: 1px solid #2FA254;
    border-radius: 2px;
}

.form-wrap .scheduler {
    position: relative;
    width: fit-content;
    display: inline-block;
    flex: 0;
}

.form-wrap .scheduler:after {
    content: "";
    position: absolute;
    top: 0;
    right: 25px;
    width: 1px;
    height: 100%;
    background: #2FA254;
}

.form-wrap .form > input.number-input:valid {
    text-align: right;
}

.form-wrap .form > input[disabled] {
    background: #f5f5f5;
}

.form-wrap .form.checkbox, .form-wrap .form.radio, .board-form-wrap .board-form.radio [type=checkbox], .board-form-wrap .board-form.radio [type=radio] {
    flex-wrap: nowrap;
    align-items: flex-start;
}

.form-wrap .form.radio input[type=checkbox] {
    background: url(/images/icon-circle-check-gray.png) no-repeat center center / 15px 15px;
}

.form-wrap .form.radio input[type=checkbox]:checked {
    background: url(/images/icon-circle-check.png) no-repeat center center / 15px 15px;
}

.form-wrap .form label, .board-form-wrap .board-form label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 10px;
    font-size: 12px;
    text-align: left;
    line-height: 18px;
}

.form-wrap .form.input > ::placeholder {
    font-size: 12px;
    color: #ABABAB;
    text-indent: 5px;
}

/*.form-wrap .form.input > */.textarea {
    width: 100%;
    height: 100vw;
    max-height: 335px;
    flex: 1 0 auto;
    padding: 16px 10px;
    background: #f9f9f9;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
    font-size: 12px;
    line-height: 1.5;
    color: #111;
    overflow: auto;
    resize: none;
}

.form-wrap .form.input > textarea.textarea::placeholder {
    text-indent: 0;
}

.form-wrap .form.input > div.textarea:empty:before {
    content: attr(data-placeholder);
    font-size: 12px;
    color: #8e8e8e;
}

.form-wrap .form.input > .btn, .form-wrap .form.input2 > .btn {
    flex: 1 0 auto;
    height: 36px;
}

.form-wrap .form.input > input + .btn {
    margin-left: 5px;
}

.form-wrap .form.form-group {
    position: relative;
    flex-wrap: nowrap;
}

.btn {
    width: fit-content;
/*    min-width: 50px;*/
    min-height: 25px;
    margin: auto;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
/*    white-space: nowrap;*/
    line-height: 1.5;
    font-size: 13px;
    text-align: center;
    border-radius: 5px;
    letter-spacing: -1px;
    word-break:auto-phrase;
}
.btn.small{
    min-height: 25px;
}

.btn.square {
    border-radius: 0;
}

.btn.smooth-square, .form.smooth-square input[type=text], .form.smooth-square input[type=password], .form.smooth-square input[type=number], .form.smooth-square select {
    border-radius: 5px !important;
}

.btn.w50 {
    width: 50%;
}
.btn.w100 {
    width: 100%;
}

.btn.sm {
    min-height: 25px;
    padding: 3px 9px;
    font-size: 12px;
}

.btn.md {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: bold;
}

.btn.md2 {
    min-height: 25px;
    padding: 0 6.5px;
    font-size: 14px;
    font-weight: bold;
}

.btn.lg {
    height: 44px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
}

.btn .description {
    font-size: 9px;
    font-weight: 300;
}

.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}
.d-inline {
    display: inline !important;
}
.d-inline-block {
    display: inline-block !important;
}

.d-flex {
    display: flex !important;
}

.fw-light {
    font-weight: 300 !important;
}

.fw-normal {
    font-weight: 500; !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-lg {
    font-size: 18px !important;
}

.fs-md {
    font-size: 12px !important;
}

.fs-sm {
    font-size: 10px !important;
}

.fc-green {
    color: #2FA254 !important;
}

.fc-gray {
    color: #8e8e8e !important;
}

.fc-red {
    color: red !important;
}

.flex-row {
    display: flex !important;
    flex-direction: row !important;
}

.flex-column {
    display: flex !important;
    flex-direction: column !important;
}

.flex-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
}

.flex-start {
    display: flex !important;
    justify-content: flex-start !important;
}

.flex-center {
    display: flex !important;
    justify-content: center !important;
}

.flex-end {
    display: flex !important;
    justify-content: flex-end !important;
}

.space-between {
    display: flex !important;
    justify-content: space-between !important;
}

.flex-auto {
    display: flex !important;
    flex: 1 0 auto !important;
}

.align-start {
    display: flex !important;
    align-items: start !important;
}

.align-center {
    display: flex !important;
    align-items: center !important;
}

.align-end {
    display: flex !important;
    align-items: end !important;
}

.gap-3 {
    gap: 3px;
}

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.line-1 {
    line-height: 1 !important
}

.line-half {
    line-height: 1.5 !important
}

.btn.dark-gray {
    background: #979797;
    color: #fff;
}

.btn.gray {
    background: #cfcfcf;
    color: #fff;
}
.btn.border-gray{
    color: #6E6E6E;
    border:1px solid #D5D7DA;
}

.btn.light-gray {
    background: #e7e7e7;
    color: #a0a0a0;
}

.btn.light-gray2 {
    background: #f4f4f4;
    border: 1px solid #ddd;
    color: #111;
}

.btn.light-gray3 {
    background: #f4f4f4;
    color: #111;
}

.btn.light-gray4 {
    background: #e3e3e3;
    color: #fff;
}

.btn.light-gray5 {
    background: #ebebeb;
    border: 1px solid #e3e3e3;
    color: #111;
}

.btn.green {
    background: #2FA254;
    color: #fff;
}

.btn.deep-green {
    background: #086721;
    color: #fff;
}

.btn.outline-green {
    border: 1px solid #2FA254;
    background: #fff;
}

.btn.yellow {
    background: #fdd000;
    color: #484848;
    border-radius: 2px;
}

.btn.mustard {
    background: #e5bf0e;
    color: #fff;
}

.btn.certi_check {
    color: #fff;
    border: solid 1px #fdd000;
    background-color: #fdd000;
}

.btn.lemon {
    background: #fee77f;
    color: #484848;
}

.btn.orange {
    background: #fb9d0a;
    color: #fff;
}

.btn.blue {
    background: #1687d6;
    color: #fff;
}

.btn.sky-blue {
    background: #4197e0;
    color: #fff;
}

.btn.outline-red {
    background: #fff;
    color: red;
    border: 1px solid red;
}

.btn.navy {
    background: #404F80;
    color: #fff;
}

.btn.light {
    background: #fff;
    border: 1px solid #afafaf;
    color: #111;
}

.btn.light2 {
    background: #fff;
    border: 1px solid #D5D7DA;
    color: #414651;
}

.btn.light3 {
    background: #fff;
    border: 1px solid #d1d1d1;
    color: #111;
}

.btn.light4 {
    background: #fff;
    border: 1px solid #e3e3e3;
    color: #777;
}

.btn.black {
    background: #111;
    color: #fff;
}

.btn.disable {
    background: #dbdbdb;
    border: 1px solid #afafaf;
    color: #7b7b7b;
}

.btn.round {
    border-radius: 20px !important;
}

/*.box {
    margin-top: 40px;
}

#sub .box {
    margin-top: 30px;
}*/

.box.inner {
    padding: 20px 16px;
}

.box .box-form {
    padding: 20px 15px;
    background: #f1f8f3;
}

.box .box-title {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    display: flex;
    align-items: center;
    gap: 5px;
}

.box .box-title.sub {
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    line-height: 1.43;
}

.box .box-title + .form-wrap {
    margin-top: 10px;
}

.box .box-title span.info {
    display: block;
    background: url('/images/dashicons_info.svg') no-repeat center center / cover;
    width: 24px;
    height: 24px;
}

.box .box-title a.more {
    display: block;
    background: url('/images/view-more.svg') no-repeat center center / cover;
    width: 9px;
    height: 16px;
    margin-left: auto;
}

.ellipse_1line {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.ellipse_2line {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ellipse_3line {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.comment {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: #000;
}

.material .comment{
    position:relative;
    padding-left: 16px;
}
.material .comment:before{
    content:'※';
    display:block;
    position:absolute;
    top:0;
    left:0;
}


/*.box .box-title + .box-contents {
    margin-top: 20px;
}*/

.table {
    width: 100%;
    height: 100%;
}

.table.border-top tr th {
    border-top: 1px solid #011111;
}

.table th, .table td {
    padding: 5px;
    vertical-align: middle;
    border: 1px solid #e3e3e3;
    /* word-break: keep-all; */
    color: #111;
    font-size: 12px;
    line-height: 1.5;
}

.table tr th {
    background-color: #f9f9f9;
    font-weight: bold;
}

/*.overflow-y-auto > */.table tr th {
    /* white-space: nowrap; */
}

.table tr td button {
    margin: auto;
}

.table td.soft {
    color: #8e8e8e;
}

.table td.emphasis {
    color: #e62a2a;
    font-weight: 600;
}

.table td.overflow-td > ul {
    max-height: 190px;
    overflow: auto;
}

.table td.overflow-td > ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    color: #111;
    line-height: 3;
}

.box .box-title + .box-contents {
    margin-top: 15px;
}

.box-contents > .btn {
    width: 100%;
    margin-top: 15px;
    font-weight: bold;
}

.box-contents > .btn.h-auto {
    height: auto;
    padding: 15px 10px;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.buttons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

* + .buttons {
    margin-top: 20px;
}

.buttons.multiple {
    gap: 10px;
}

.buttons.multiple.full-buttons .btn {
    flex: 1 1 auto;
}

.buttons.multiple .btn {
    margin: 0;
}

.buttons.flex-end {
    justify-content: flex-end;
}

.buttons.twins > .btn:first-child {
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
}

.buttons.twins > .btn:last-child {
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
}

.buttons.twins > .btn {
    flex: 1;
    line-height: 15px;
}

ul.check-list {
    /*margin-top: 15px;*/
    margin: 15px 0 15px 2ch;
    padding-inline-start: 3ch;
    list-style: disc;
    font-size: 12px;
    line-height: 18px;
    color: #111;
}

ul.check-list li {
    line-height: 1.5;
}

ul.check-list li::marker {
    color: #39a154;
    font-size: 1em;
}

ul.check-list li + li {
    margin-top: 5px;
}

#fog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    overflow: hidden;
    z-index: 10001;
}

.loading-layer.analysis-login-guide {
    position:absolute;
    font-size: 20px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.05em;
    text-align: center;
}
.loading-layer.analysis-login-guide p {
    line-height: 20px;
}
.loading-layer.analysis-login-guide .login-link{
    /*20250213 추가 */
    color:#fff;
    text-decoration:underline;
}


.loading-layer img {
    width: 164px;
}

.loading-layer {
    display: none;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    flex-direction: column;
    gap: 23px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -0.05em;
    text-align: center;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.loading-layer.active {
    display: flex;
}

.paging {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.paging .prev, .paging .next {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: solid 1px #e3e3e3;
    background-color: #fff;
}
.paging .prev {
    margin-right: 20px;
}
.paging .next {
    margin-left: 20px;
}
.paging .prev img, .paging .next img {
    width: 7px;
    height: 11px;
}
.paging .page-item {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-family: Roboto;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #111;
}
.paging .page-item.active {
    background-color: #111;
    border-radius: 50%;
    color: #fff;
}







.analysis-box.explanation.active .explanation-box {
    display: block;
    cursor: initial;
    overflow: auto;
}
.explanation-box {
    display: none;
    /*position: absolute;*/
    position:fixed;
    /* bottom: 0; */
    bottom: 50%;
    transform: translateY(50%);
    right: -312px;
    /*left: 100px;*/
    width: 310px;
    height: auto;
    max-height: 300px;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.11);
    border: solid 1px #e3e3e3;
    border-radius: 5px;
    padding: 10px;
    line-height: 1.23;
    font-size: 13px;
    color: #111;
    text-align: center;
}

.explanation-box .box {
    white-space: pre-line;
    word-break: keep-all;
    text-align: left;
    height: 100%;
    font-size:14px;
    font-weight: 500;
    line-height:1.7;
}

.c-rank-analysis {
    width: 100%;
    align-items: center;
    position: relative;
    padding:0 0 20px;
}

.c-rank-analysis .contents-list {
    width: 100%;
    gap: 3px;
}

.c-rank-analysis .contents-item-box {
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: calc(100% / 2 - 5px);
}

.c-rank-analysis .contents-list .contents-item {
    width: 100%;
    height: 43px;
    padding: 0 8px;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #D6D6D680;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
    gap: 5px;
}

.c-rank-analysis .contents-list .contents-item .label {
    margin-right: 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 19.36px;
    color: #000;
    white-space: nowrap;
    min-width: 55px;
}

.c-rank-analysis .contents-list .contents-item .progress-bar {
    height: 20px;
    position: relative;
}

.c-rank-analysis .contents-list .contents-item .progress-bar .child {
    height: 20px;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
}

.c-rank-analysis .category-img-item {
    box-shadow: 0 0 20px #2FA254;
}

.c-rank-analysis .contents-list .contents-item.orange .progress-bar .child {
    background-color: #E85A13;
}

.c-rank-analysis .contents-list .contents-item.blue .progress-bar .child {
    background-color: #77A2CA;
}

.c-rank-analysis .contents-list .contents-item.green .progress-bar .child {
    background-color: #79BB9F;
}

.c-rank-analysis .contents-list .contents-item.gray .progress-bar .child {
    background-color: #A5A5A5;
}

.contents-area.material{
    /*margin-bottom:50px;*/
}

.analysis-box.explanation.active .triangle {
    /*display: block;*/
}

.analysis-box.explanation .triangle {
    display: none;
    position: absolute;
    top: 50%;
    right: -18px;
    z-index: 1000;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid #fff;
}



/* Layer box */
.layer-box.active {
    display: flex;
}

.layer-box {
    display: none;
    z-index: 10002;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    height: fit-content;
    border-radius: 12px;
    border: 3px solid #2FA254;
    background-color: #FFF;
    box-shadow: 0 0 20px 2px #0A0D124D;
    padding: 25px 20px;
    flex-direction: column;
    gap: 20px;
}

.layer-box .layer-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.layer-box .layer-header{

}
.layer-box .layer-header h2 {
    font-size: 20px;
    font-weight: bold;
    line-height: 28px;
    display:flex;
    align-items:center;
    gap:10px;
}

.layer-box .title-logo {
    width: 160.68px;
    height: 25.22px;
}

.explore-layer .layer-title {
    justify-content: center;
}

.layer-box .layer-title img {
    width: 20px;
    height: 20px;
}

.layer-box .layer-title .title {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.05em;
    color: #000;
}

.layer-box .layer-content {
    width: 100%;
    height: auto;
    padding: 20px 17.5px;
    border-radius: 12px;
    border: 1px solid #D6D6D6;
    max-height:400px;
    overflow-y:auto;
}
.layer-box .layer-content p{
    /*20250213 추가 */
    font-size: 14px;
    line-height: 1.5;
    word-break: keep-all;
    letter-spacing: -1px;
}

.layer-box.default-text-layer .layer-content p{
    line-height:1.7;
}

.posting-start-layer .layer-content p:first-child {
    margin-bottom: 10px;
}

.posting-start-layer .layer-content p {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

.get-keyword-layer .layer-content {
    padding: 0;
    border: none;
    border-radius: unset;
}

.layer-box .layer-buttons {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content:center;
    gap: 4px;
}

.layer-box .layer-buttons .button {
    width: calc(100% / 2 - 6px);
    height: 44px;
    line-height: 44px;
    border-radius: 8px;
}
.layer-box .layer-close{
    /*20250213 추가 */
    cursor:pointer;
    margin-left:auto;
}

.layer-box.share-info-box .layer-content p{
    white-space:pre-line;

}

.layer-box.check_detail_popup .layer-buttons .button,
.layer-box.check_blog_popup .layer-buttons .button
{
    width:auto;
}


.layer-box.level-up-layer .layer-content p{
    font-weight:unset;
    font-size:unset;
}
.layer-box.level-up-layer .layer-content img{
    width:78px;
}
.layer-box.level-up-layer .grade-up-main-text{
    font-size:18px;
    text-align:center;
}
.layer-box.level-up-layer .grade-up-sub-text{
    font-size:16px;
    text-align:center;
}

.layer-box.join-benefit-layer {
    width: fit-content;
    padding:20px 0 ;
    gap:20px;
    min-width: 250px;
}
.layer-box.join-benefit-layer .layer-header {
    width: 100%;
    padding: 0 0 0 20px;
}

.layer-box.join-benefit-layer .title-logo{
    width:100px;
    height:auto;
}
.layer-box.join-benefit-layer .join-logos {
    align-items: center;
    justify-content:center;
    gap: 10px;
}

.layer-box.join-benefit-layer .join-logos img {
    width: 45px;
    height: 45px;
}

.layer-box.join-benefit-layer .join-benefit-text {
    width: 100%;
    margin-bottom: 20px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    gap: 5px;
    font-weight: 700;
    color: #000000;
}
.layer-box.join-benefit-layer .layer-content{
    border:unset;
    width:auto;
    padding: 0 0 30px 0;
    border-bottom: 1px solid #D6D6D6;
    border-radius:0
}
.layer-box.join-benefit-layer .layer-content p{
    font-size:18px;
}
.layer-box.join-benefit-layer .layer-buttons{
    padding: 0 20px;
    height:unset;
}


.layer-box.join-benefit-layer .layer-buttons .button {
    width: fit-content;
    padding: 0 15px;
    height: 30px;
    font-size: 12px;
    line-height: 27px;
}



.layer-box.welcome-layer .layer-header {
    width: 100%;

}

.layer-box.welcome-layer .title-logo{
    width:125px;
    height:auto;
}
.layer-box.welcome-layer .layer-content{
    border:none;
    line-height:1.7;
    padding:0;
}
.layer-box.welcome-layer .layer-content .title{
    font-size:20px;
    font-weight:600;

}
.layer-box.welcome-layer .layer-content .summary{
    font-size:18px;
    font-weight:500;
}

.layer-box.welcome-layer .layer-content .notice-text{
    font-size:16px;
    font-weight: 500;
    text-decoration: underline;
}

.layer-box.welcome-layer .kakao-channel-wrap{
    font-size: 14px;
    font-weight: 400;

    margin:0 auto;
    display:flex;
    flex-direction: column;
    gap:10px;
    align-items: center;
    justify-content: center;
}

.layer-box.first-analysis-layer .layer-header {
    width: 100%;
}

.layer-box.first-analysis-layer .layer-close{
    position: absolute;
    right: 24px;
    top: 30px;
}


.layer-box.first-analysis-layer .title-logo{
    width:160.68px;
    height:auto;
}
.layer-box.first-analysis-layer .layer-content{
    border:none;
    line-height:1.7;
    padding:0;
    width:auto;
}
.layer-box.first-analysis-layer .layer-content p {
    font-size:16px;
}
.layer-box.first-analysis-layer .layer-content .title{
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;

}
.layer-box.first-analysis-layer .layer-content .summary{
    font-size:18px;
    font-weight:500;
}

.layer-box.first-analysis-layer .layer-buttons .button{
    width:auto;
    flex : 1;
    margin: 0 20px;
}


.explore-layer .layer-content.gray {
    border: none;
 /*   padding: 32px 22px;*/
    background: #D9D9D94D;
    width: 100%;
    /*height: 180px;*/
    justify-content: center;
    align-items: center;
}

.explore-layer .icon-box-wrap {
    width: 30px;
    gap: 15px;
    height: auto;
}

.explore-layer .icon-box-wrap .blog-icon-box {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.explore-layer .icon-box-wrap .blog-icon-box img {
    width: 24px;
    height: 21px;
}

.explore-layer .rectangle-line-box1 {
    width: 20px;
    height: 46px;
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    border-top-right-radius: 10px;
}

.explore-layer .rectangle-line-box2 {
    width: 20px;
    height: 45px;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    border-bottom-right-radius: 10px;
}

.explore-layer .rectangle-line-box3 {
    width: 14px;
    height: 2px;
    background-color: #000000;
}

.explore-layer .concon-hub {
    width: 90px;
    height: 37px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 3px solid #2FA254;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.explore-layer .concon-hub img {
    width: 58px;
    height: 9px;
}

.explore-layer .concon-hub .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #39A154;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.explore-layer .concon-hub .dot.left {
    left: -6px;
}

.explore-layer .concon-hub .dot.right {
    right: -6px;
}

.explore-layer .fluent {
    width: 35.5px;
    height: 46px;
    margin-top: -45px;
    z-index: 2;
}

.explore-layer .rectangle-line-box4 {
    margin-top: 54px;
    border-bottom-right-radius: 10px;
    width: 19px;
    height: 37px;
    border-bottom: 2px solid #39A154;
    border-right: 2px solid #39A154;
}

.explore-layer .rectangle-line-box5 {
    margin-top: 17px;
    border-top-left-radius: 10px;
    width: 16px;
    height: 37px;
    border-top: 2px solid #39A154;
    border-left: 2px solid #39A154;
    position: relative;
    left: -2px;
}

.explore-layer .arrow-box {
    position: relative;
    margin-right: 38px;
}

.explore-layer .arrow-box .arrow {
    width: 23.68px;
    height: 20.69px;
    position: absolute;
    top: -10px;
    left: 0;
    z-index: -1;
}

.explore-layer .keywords {
    /* width: 103px; */

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.explore-layer .keywords .keyword {
    padding: 0 10px;
    border-radius: 8px;
    background: #D6D6D680;
    /* width: 103px; */
    height: 32px;
    display: flex;
    /* flex-direction: column; */
    gap: 5px;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.03em;
    text-align: center;
    white-space: nowrap;
    justify-content: center;
}

.explore-layer .keywords .keyword.red {
    background: #CF5D44;
    color: #FFF;
    font-weight: 700;
}
.explore-layer .keywords .keyword .count_now{
    color:#ffff00;
}

.explore-layer.manuscript .arrow-box {
    width: 30.75px;
    margin: 0 11px;
}

.explore-layer.manuscript .arrow-box img {
    width: 28.76px;
    height: 24.15px;
}

.explore-layer .explore-doc {
    width: 42.7px;
    height: 52.62px;
}

.explore-layer.manuscript .layer-content.gray {
 /*   padding: 32px 44px;*/
}
/* Layer box -end */

.padding-lr-20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.w-100 {
    width: 100% !important;
}

.w-80 {
    width: 80% !important;
}

.w-50 {
    width: 50% !important;
}

.w-fit {
    width: fit-content !important;
}

.p-0 {
    padding: 0 !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-10 {
    padding-right: 10px !important;
}

.pr-15 {
    padding-right: 15px !important;
}

.pr-20 {
    padding-right: 20px !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pl-10 {
    padding-left: 10px !important;
}

.pl-15 {
    padding-left: 15px !important;
}

.pl-20 {
    padding-left: 20px !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-15 {
    padding-top: 15px !important;
}

.pt-20 {
    padding-top: 20px !important;
}

.pt-30 {
    padding-top: 30px !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-15 {
    padding-bottom: 15px !important;
}

.pb-20 {
    padding-bottom: 20px !important;
}

.pb-30 {
    padding-bottom: 30px !important;
}

.m-0 {
    margin: 0 !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-25 {
    margin-top: 25px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-5 {
    margin-top: 5px !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-25 {
    margin-bottom: 25px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.ml-auto {
    margin-left: auto !important;
}

.ml-5 {
    margin-left: 5px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.ml-15 {
    margin-left: 15px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.mr-auto {
    margin-right: auto !important;
}

.mr-5 {
    margin-right: 5px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.mr-15 {
    margin-right: 15px !important;
}

em {
    font-style: normal;
    font-weight: bold;
}

em.red, .red {
    color: #ec1010;
}

.pagination ul {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.pagination ul:empty {
    margin-top: 0;
}

.pagination ul li {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    text-align: center;
    border-radius: 50%;
}

.pagination ul li a {
    font-family: Roboto;
    height: 100%;
    display: block;
    font-size: 10px;
    color: #111;
    line-height: 26px;
}

.pagination ul li.current {
    background: #111;
}

.pagination ul li.current a {
    color: #fff;
}

.pagination ul li.prev {
    background: url('/images/paging-pre.png') no-repeat center center / 6px 9px #fff;
    border: 1px solid #e3e3e3;
}

.pagination ul li.next {
    background: url('/images/paging-next.png') no-repeat center center / 6px 9px #fff;
    border: 1px solid #e3e3e3;
}

.board-container > * {
    width: calc(100% - 20px);
    margin: 0 auto;
}

.board-container .board-wrap .board-form-wrap {
    position: relative;
}

.board-container .board-wrap .board-form-wrap .board-form + .board-form {
    margin-top: 20px;
}

.board-container .board-wrap .board-form-wrap .board-form-title {
    flex: 1 0 100%;
    font-size: 13px;
    color: #111;
    line-height: 1.69;
}

.board-container .board-wrap .board-form-wrap .board-form .inner-input-btn {
    position: absolute;
    right: 0;
    bottom: 10px;
}

.board-container .board-wrap .board-form-wrap input[type=text], .board-container .board-wrap .board-form-wrap input[type=password], .board-container .board-wrap .board-form-wrap input[type=number], .board-container .board-wrap .board-form-wrap select {
    width: 100%;
    height: 38px;
    border: none;
    border-bottom: 1px solid #e3e3e3;
    border-radius: 0;
}

select:empty {
    font-size: 12px;
    color: #8e8e8e;
}

.board-container .board-wrap .board-form-wrap .editor-wrap {
    margin-top: 25px;
    margin-bottom: 30px;
}

.board-container .board-wrap .board-contents {
    position: relative;
    font-size: 12px;
    font-weight: 300;
    color: #111;
    line-height: 1.5;
}
.board-container .board-wrap .board-contents *{
    max-width:100%;
}

.contents-item .progress-bar {
    min-width: 50px;
    height: 22px;
    position: relative;
}

.contents-item .progress-bar .child {
    height: 22px;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
}

.contents-item.orange .progress-bar .child {
    background-color: #E85A13;
}

.contents-item.blue .progress-bar .child {
    background-color: #77A2CA;
}

.contents-item.green .progress-bar .child {
    background-color: #79BB9F;
}

.contents-item.gray .progress-bar .child {
    background-color: #A5A5A5;
}



/*
1. Layout - 레이아웃
*/
#container {
    width: 100%;
    padding: 50px 0 80px 0;
    /*overflow: hidden;*/
}

html.toggle {
    overflow: hidden;
}
html header .aside-header{
    display:none;
}
html.toggle header .aside-header{
    display:block;
}
html.toggle header .header-default{
    display:none;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    width: 100%;
    height: 50px;
    background: #fff;
}

header > div {
    position: relative;
    height: 100%;
    margin: 0 16px;
    line-height: 50px;
}

header .header_logo {
    height: 17px;
    object-fit: cover;
    line-height: 50px;
}

header .top-left {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

header .top-left a {
    display: flex;
    align-items: center;
}

header .top-left h2 {
    font-size: 15px;
    font-weight: 500;
    color: #111;
    line-height: 1.5;
}

header .top-left .back {
    width: 32px;
    height: 32px;
}

header .top-center {
    width: 100%;
    height: 100%;
}

header .top-center h2 {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    letter-spacing: -1.5px;
}

header .top-center h2.left {
    text-align: left;
    text-indent: 35px;
}

header .top-right {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

header .top-right > div {
    height: 100%;
    display: flex;
    align-items: center;
}

header .top-right img {
 /*   margin: 12px 0;*/
}

header .top-right a {
    font-size: 14px;
    text-decoration: underline;
}

header .top-right a.mypage {
    font-size: 18px;
    font-weight: bold;
}

html.toggle header .top-right a, html.toggle header .top-right .alarm_count {
    display: none;
}

html.toggle #hamburger img {
    content: url('/images/material-symbols_close-rounded.svg');
}

/*
div#content {
    min-height: calc(100vh - 60px - 50px);
    max-height: calc(100vh - 60px - 50px);
    scroll-behavior: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling:touch;
}
*/

aside {
    width: 100%;
    height: calc(100% - 130px);
    position: fixed;
    top: 50px;
    right: -100%;
    bottom: 0;
    background: #fff;
    z-index: 100000;
    transition: 0.3s;
    overflow-y: auto;
}

html.toggle aside {
    right: 0;
}

aside .my_info > div + div:before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    margin: 12px 0;
    background: #d6d6d6;
}

aside .my_info > div + div:last-child:before {
    display:none;
    background: transparent;
    margin: 12px 0 0;
}

aside .my_info #member_name {
    font-size: 18px;
    font-weight: bold;
    text-decoration: underline;
    line-height: 2;
}

aside .my_info .left p, aside .my_info .right *:not(a) {
    font-size: 14px;
    /*color: #6e6e6e;*/
    line-height: 1.5;
    letter-spacing: -0.5px;
}

aside .my_info .right *:not(a) {
    gap: 7px;
}

aside .my_info .right .label {
    display: block;
    width: 100%;
}

aside .my_info .right .percentage {
    color: #000;
}

aside .my_info .left .point {
    font-family: Pretendard, sans-serif;
    display: inline-block;
    margin-left: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
}

/*aside .my_info div:last-child .left, aside .my_info div:last-child .right {
    width: calc(100% / 2 - 5px);
    padding: 15px;
    background: #f5f5f5;
    border: 1px solid #d6d6d6;
    border-radius: 10px;
    color: #6e6e6e;
}*/

aside .my_info .blog-crank-info {
    /*width: calc(100% / 2 - 5px);*/
    padding: 15px;
    background: #f5f5f5;
    border: 1px solid #d6d6d6;
    border-radius: 10px;
    flex:1;
    /*color: #6e6e6e;*/
}
aside .my_info .blog-crank-info p{
    font-size:14px;
    white-space:nowrap;
}

aside .my_info .left .blog-levels .grade span {
    color: #fff;

}

aside .my_info .left .blog-levels .grade {
    width: 50px;
    height: 50px;
}

aside .my_info .left .blog-levels .circle {
    width: 50px;
    height: 50px;
    line-height: 50px;
}

aside .sidemenu ul li {
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #d6d6d6;
}

aside .sidemenu ul li a {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    color: #6E6E6E;
    font-size: 14px;
}

aside .sidemenu ul li a:after {
    content: "";
    display: inline-block;
    background: url(/images/view-more.svg) no-repeat center center / cover;
    width: 6px;
    height: 11px;
    margin-left: auto;
}

nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 80px;
    z-index: 10000;
}

nav .icon {
    width: auto;
    height: auto;
    aspect-ratio: auto;
    transform: scale(0.89);
    filter: brightness(100);
}

nav a.active span {
    color: #B6FB56;
    font-weight: 700;
}

nav a.active > .icon {
    filter: none;
}

nav > div {
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #2FA254;
}

nav > div > a {
    width: fit-content;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

nav > div > a > span {
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.7px;
}

footer .kakao-plus {
    padding: 40px 0;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    color: #6e6e6e;
    letter-spacing: -1.5px;
}
footer .kakao-plus .kakao-plus-btn{
    display: inline-block;
    height: auto;
    width: auto;
}

footer > * {
    width: 100%;
}


footer #footer {
    padding: 30px 16px 50px;
    background: #F5F5F5;
}

footer #footer h5 {
    font-size: 14px;
}

footer #footer ul {
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.8;
}


footer #footer dd {
    display: block;
}

footer > div .footer-logo {
    width: 122px;
    margin: auto;
}

footer > div .footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

footer > div.footer-links {
    margin-top: 17px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 13px 0;
}

footer > div.footer-links .footer-link {
    position: relative;
    display: block;
    font-size: 15px;
    color: #616161;
}

footer > div.footer-links .footer-link.active {
    color: #111;
}

footer > div.footer-links .footer-link + span {
    width: 1px;
    display: inline-block;
    height: 12px;
    background: #c6c6c6;
    line-height: 15px;
    margin: 0 13px;
}

footer > ul {
    margin-top: 35px;
}

footer > ul li {
    font-size: 14px;
    color: #676767;
    line-height: 1.43;
}

footer > p {
    margin-top: 5px;
    font-size: 14px;
    color: #b6b6b6;
    line-height: 1.79;
}


/*
2. Main - 메인
*/

.alarm_count {
    position: relative;
}

.alarm_count[data-count="0"]:after, .alarm_count[data-count=""]:after {
    display: none;
}

.alarm_count:after {
    content: attr(data-count);
    position: absolute;
    top: 9px;
    right: -3px;
    background: #339c52;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

#menu_wrap {
    position: sticky;
    top: 50px;
    width: 100%;
    background: #fff;
    z-index: 1001;
}

#menu {
    width: 100%;
    height: 50px;
}

#menu > li {
    width: fit-content;
    flex: 1 0 auto;
    font-size: 15px;
    font-weight: 400;
    color: #777;
    text-align: center;
    border-bottom: 1px solid #c3c3c3;
    line-height: 50px;
}

#menu > li a {
    padding: 0 12px;
    width: 100%;
    height: 100%;
    display: block;
    color: #777;
}

#menu > li.active {
    font-weight: 600;
    color: #000;
    border-bottom: 3px solid #2FA254;
}

#menu > li.active a {
    color: #111;
}

.count {
    font-family: Roboto;
}

#sub_top_wrap {
    background-color: #f7f7f7;
}

#sub_top_wrap div.flex-end-wrap {
    height: 50px;
    padding: 0 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

div.filter-container {
    padding: 25px 0 ;
    /*padding-bottom: 25px;*/
}

div.filter-container .filter-wrap {
    display: flex;
    align-items: center;
    gap: 22px;
}

#sub_top_wrap div.filter-container .filter-wrap {
    padding-left: 10px;
}

div.filter-container .filter-wrap .filter-box {
    width: 100%;
    padding-right: 10px;
}

div.filter-container .filter-wrap > span {
    flex: 1 0 55px;
    font-size: 14px;
    line-height: 40px;
    font-weight: 500;
}

div.filter-container .filter-wrap ul li {
    width: auto;
    height: 25px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 25px;
    line-height: 1.5;
    text-align: center;
    font-size: 13px;
    color: #777;
}

div.filter-container .filter-wrap ul li.active {
    background: #2FA254;
    border: solid 1px #2FA254;
    color: #fff;
}

#main_banner_slide .swiper-wrapper .swiper-slide {
    /*height: 120px;*/
}

#main_banner_slide .swiper-wrapper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity:1;
}

.content-box {
    width: 100%;
    font-size: 14px;
    line-height: 1.5;
}

.guide-box {
    font-size: 13px;
    line-height: 1.5;
}

.guide-box ul li {
    font-size: 10px;
    position: relative;
    padding-left: 10px;
    margin-bottom: 5px;
    word-break: keep-all;
}
.guide-box ul li:before{
    display: block;
    position: absolute;
    content: '∙';
    top: 0;
    left: 0;
}

.divide {
    width: 100%;
    height: 1px;
    margin: 15px auto;
    background: #e3e3e3;
}

.divide.inner {
    width: calc(100% - 20px);
}

.divide.margin-tb {
    margin: 15px auto;
}

.inner-padding {
    padding: 20px 0;
}

.inner-padding > * {
    padding: 0 10px;
}

.sort-wrap {
    display: flex;
    width: 100%;
}

.inner-padding .sort-wrap {
    width: calc(100% - 20px);
    margin: auto;
    padding: 0;
}

.sort-wrap .sort-left {
    position: relative;
    padding-bottom: 10px;
    display: flex;
    flex: 1 0 auto;
}

.sort-wrap .sort-right {
    position: relative;
    padding-bottom: 10px;
    display: flex;
    justify-content: flex-end;
    flex: 1 0 auto;
}

.sort-wrap .sort {
    width: auto;
    height: 25px;
    min-width: 60px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 5px;
    border: solid 1px #d7d7d7;
    background-color: #fff;
}

.sort-wrap .sort .sort-name {
    font-size: 10px;
    color: #111;
}

.sort-wrap .sort .icon {
    width: 8px;
    height: 6px;
}

.sort-wrap .sort-option-box {
    display: none;
    position: absolute;
    top: 37px;
    right: 0;
    width: max-content;
    height: auto;
    border-radius: 5px;
    border: solid 1px #d7d7d7;
    background-color: #fff;
    padding: 7px;
    z-index: 100;
}

.sort-wrap .sort-left .sort-option-box {
    left: 0;
    right: auto;
}

.sort-wrap .sort.active + .sort-option-box {
    display: block;
}

.sort-wrap .sort-option-box:before {
    content: "";
    position: absolute;
    top: -12px;
    right: 15px;
    width: 0;
    height: 0;
    border-bottom: 6px solid #fff;
    border-top: 6px solid transparent;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    z-index: 1000;
}

.sort-wrap .sort-left .sort-option-box:before {
    left: 15px;
    right: auto;
}

.sort-wrap .sort-option-box:after {
    content: "";
    position: absolute;
    top: -15px;
    right: 14px;
    width: 0;
    height: 0;
    border-bottom: 7px solid #d7d7d7;
    border-top: 7px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    z-index: 900;
}

.sort-wrap .sort-left .sort-option-box:after {
    left: 14px;
    right: auto;
}

.sort-wrap .sort-option-box .options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    color: #5a5a5a;
}

.sort-wrap .sort-option-box .options .option-item {
    padding: 3px;
}

.sort-wrap + .item-list {
    margin-top: 20px;
}

.item-list.campaign {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 10px));
    gap: 0 20px;
}

.item-list.border-top {
    border-top: 1px solid #111;
}

.item-list.campaign .item {
    padding-bottom: 40px;
}

.item-list .item .individual-status-wrap {
    padding: 5px;
    display: flex;
    justify-content: space-between;
    gap: 3px;
    background: #e9e9e9;
}

.item-list .item .individual-status-wrap > div[data-individual] {
    width: fit-content;
    flex: 1 0 auto;
    text-align: center;
    background: #fff;
    font-size: 8px;
    color: #a9a9a9;
    border: solid 1px #b3b3b3;
    border-radius: 3px;
    line-height: 16px;
}

.item-list .item .individual-status-wrap > div[data-individual].active {
    color: #fff;
    border: solid 1px #2FA254;
    background-color: #2FA254;
}

.item-list .item a.campaign-item {
    width: 100%;
    display: inline-block;
}

.item-info-wrap {
    position: relative;
    margin-top: 12px;
}

.item-info-wrap:after {
    content: "";
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: #e9e9e9;
    transition: opacity 0.1s ease-out 0s;
}

.item-info-wrap.off:after {
    opacity: 0;
}

.item-info-wrap .type-box {
    width: 100%;
    height: 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item-info-wrap .type-box .channel, .item-info-wrap .type-box .site {
    display: flex;
    align-items: center;
    gap: 5px;
}

.item-info-wrap .type-box .channel .channel-icon, .item-info-wrap .type-box .site .site-icon {
    width: 15px;
    height: 15px;
    background-size: cover;
}

.item-info-wrap .type-box .channel .channel-icon.insta {
    background-image: url(/images/c-insta@3x.png);
}

.item-info-wrap .type-box .channel .channel-icon.blog {
    background-image: url(/images/c-blog@3x.png);
}

.item-info-wrap .type-box .channel .channel-icon.youtube {
    background-image: url(/images/c-youtube@3x.png);
}

.item-info-wrap .type-box .site .site-icon.revu {
    background-image: url(/images/icon-revu.png);
}

.item-info-wrap .type-box .site .site-icon.mrblog {
    background-image: url(/images/icon-mrblog.png);
}

.item-info-wrap .type-box .site .site-icon.seoulouba {
    background-image: url(/images/icon-seoulouba.png);
}

.item-info-wrap .type-box .site .site-icon.cloudreview {
    background-image: url(/images/icon-cloudreview.png);
}

.item-info-wrap .type-box .site .site-icon.ringble {
    background-image: url(/images/icon-ringble.png);
}

.item-info-wrap .type-box .site .site-icon.reviewnote {
    background-image: url(/images/icon-reviewnote.png);
}

.item-info-wrap .type-box .site .site-icon.reviewplace {
    background-image: url(/images/icon-reviewplace.png);
}

.item-info-wrap .type-box .site .site-icon.tble {
    background-image: url(/images/icon-tble.png);
}

.item-info-wrap .type-box .site .site-icon.storyn {
    background-image: url(/images/icon-storyn.png);
}

.item-info-wrap .type-box .site .site-icon.cometoplay {
    background-image: url(/images/icon-cometoplay.png);
}

.item-info-wrap .type-box .channel .d-day {
    font-size: 11px;
    color: #111;
}

.item-info-wrap .type-box .site .site-name {
    font-size: 11px;
    color: #777;
}

.item-info-wrap .title-box {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.item-info-wrap .title-box .title {
    font-size: 14px;
    color: #111;
    line-height: 1.2;
}

.item-info-wrap .title-box .explanation {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10px;
    color: #989898;
}

.item-info-wrap .option-box {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-info-wrap .option-box .apply-count {
    font-size: 10px;
    color: #111;
    font-weight: 500;
}

.item-info-wrap .option-box .badges {
    width: 100%;
    height: 16px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.item-info-wrap .option-box .badges li {
    width: auto;
    height: 16px;
    padding: 0 9px;
    border-radius: 8px;
    background-color: #e9e9e9;
    text-align: center;
    font-size: 8px;
    color: #9c9c9c;
    line-height: 16px;
}

#setting_alarm_layer .weeks {
    display: flex;
    align-items: center;
    gap: 5px;
}

#setting_alarm_layer .weeks a.week {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    font-size: 12px;
    padding: 5px 7px;
    border-radius: 5px;
    border: 1px solid #e3e3e3;
    color: #b3b3b3;
}

#setting_alarm_layer .weeks a.week.active {
    border: solid 1px #ebc309;
    background-color: #ebc309;
    color: #ffff;
}

#setting_alarm_layer .setting-footer-section .form-title {
    gap: 5px;
}


#blog_analysis .form-wrap .form.form-group.input > .btn {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: 40px;
    border-radius: 50px;
    padding: 0 25px;
    font-size: 14px;
    font-weight: bold;
}

#blog_analysis .form-wrap .form.input input[type=text] {
    border-radius: 50px;
    border-color: #ACB1C6;
    background-color: #ffffff;
}

#blog_analysis .form-wrap .form.input > ::placeholder {
    font-size: 16px;
}

#blog_posting .form-wrap .form.input .tag-area {
    width: 100%;
}

#blog_posting .form-wrap .form.input textarea {
    width: 100%;
    min-height: 80px;
    padding: 15px;
    border-radius: 10px;
    border-color: #ACB1C6;
    background-color: #ffffff;
    resize: none;
}

#blog_posting .form-wrap .form.form-group.input > .btn {
    height: 100%;
    flex: 0 0 auto;
    margin: 0;
    padding: 13px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
}

#blog_posting .form-wrap .form.input ::placeholder {
    font-size: 16px;
}

#blog_posting .posting {
    font-size: 16px;
    line-height: 1.5;
    background:#F5F5F5;
    padding:20px 16px;
}

#blog_posting .posting > h5 {
    /*padding: 20px 16px 0;*/
    font-weight: 500;
    letter-spacing:-0.9px;
    word-break: auto-phrase;
}

#blog_posting .posting > p {
    padding: 0 16px 20px;
    color: #6f6f6f;
}

#blog_posting .posting > .contents-wrap {

    position:relative;
    height: auto;
    background: #F5F5F5;
}

#blog_posting .posting > .contents-wrap .blog-levels-container {
    position: relative;
    width: 100%;
    height: 200px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    overflow-x: auto;
    transform: translateZ(0);
}
#blog_posting .posting > .contents-wrap .analysis-date-text{
    position: absolute;
    right : 10px;
    bottom : 15px;
    font-size:13px;
}


#contents .page-title-box {
    margin: 70px 0 66px;
}

#contents .page-title-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    width: 100%;
    height: auto;
}

#contents .page-title-box .title {
    font-size: 40px;
    font-weight: 700;
    line-height: 58px;
    letter-spacing: -0.05em;
    text-align: center;
    color: #000000;
}

#contents .page-title-box .text {
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: -0.05em;
    color: #000000;
}

.page-sub-title-box {
    width: 100%;
    height: auto;
    margin-bottom: 35px;
}

.page-sub-title-box .title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: #000000;
}

.contents-wrap .wrap-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    color: #000;
    line-height: 25px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.05em;
    margin-bottom: 10px;
}

.contents-wrap .wrap-header .title {
    line-height: 34px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: #000;
}

.contents-wrap .wrap-header .sub-title {
    font-weight: 500;
}

#contents.main-page .posting .page-title-box{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
}


.blog-levels {
    gap: 20px;
}

.blog-levels .level {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.blog-levels .level.current{
    margin-left:5px;
    margin-right:10px;
}

.blog-levels .circle.purple {
    background-color: #8F8FBE;
}

.blog-levels .circle {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    font-weight: 700;
    position: relative;
    border-radius: 50%;
    text-align: center;
    color: #FFF;
}

.blog-levels .level.current::after {
    width: 24px;
    height: 24px;
    bottom: unset;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*.blog-levels .circle::after {
    width: 13px;
    top: 50%;
    transform: translateY(-50%);
    right: -15px;
}*/

.blog-levels .circle::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(/images/right-arrow-gray.png);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -20px;
}
.blog-levels .circle.active::after{
    right:-30px;
}
aside .blog-levels .circle::after{
    display:none;
}
.blog-levels .level:last-child .circle::after{
    width:0;
    height:0;
}

.blog-levels .grade {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    line-height: 60px;
    z-index:2;
}
.blog-levels .circle.active .grade{
    top: -2.5px;
    left: 2.5px;
}
.blog-levels .level.grade_na .circle.active .grade{
    top:2.5px;
}

.blog-levels .grade span {
    position: absolute;
    line-height: 1;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -40%);
    font-size: 24px;
    display: inline-block;
}
aside .blog-levels .grade span {
    top: 50%;
    transform: translate(-50%, -50%);
}

.blog-levels .level.current .grade .grade_name {
    font-size: 24px;
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.blog-levels .circle .plus {
    font-size: 15px;
    position: absolute;
    top: 2px;
    left: unset;
    right: -8px;
    transform: translate(0, 0);
}

.blog-levels .level.current .grade .grade_name_text {
    top: 90%;
    left: 50%;
    transform: translate(-50%, -90%);
    color:#CDCDCD;
}

.blog-levels .grade span.grade_name_text {
    color: #fff;
    font-size: 10px;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -90%);
    text-wrap: nowrap;
}


.blog-levels .level.current.grade_na .grade .grade_name{
    top:40%;
}
.blog-levels .level.current.grade_na .grade .grade_name_text{
    top:85%;
}

.blog-levels .circle.active .grade span.grade_name_text {
    color: inherit;
}

.blog-levels .circle.active .grade span.white {
    color: inherit;
}

.blog-levels .circle.active:before {
    content: "";
    display: inline-block;
    border: 8px solid #79BB9F !important;
    width: 70px;
    height: 70px;
    position: absolute;
    top: -2.5px;
    left: -2.5px;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0 0 12px 0 #00000099;
    z-index: 2;
    animation: 1s blink-half  infinite;
}
.posting .blog-levels .level.grade_na .circle.active:before {border:8px solid #CDCDCD;}
.posting .blog-levels .level.grade_na .circle.active {color: #CDCDCD;}

.posting .blog-levels .level.grade_d .circle.active:before {border:8px solid #A5A5A5;}
.posting .blog-levels .level.grade_d .circle.active {color: #A5A5A5;}

.posting .blog-levels .level.grade_c .circle.active:before {border:8px solid #79BB9F;}
.posting .blog-levels .level.grade_c .circle.active {color: #79BB9F;}

.posting .blog-levels .level.grade_b .circle.active:before {border:8px solid #8F8FBE;}
.posting .blog-levels .level.grade_b .circle.active {color: #8F8FBE;}

.posting .blog-levels .level.grade_a .circle.active:before {border:8px solid #F08362;}
.posting .blog-levels .level.grade_a .circle.active {color: #F08362;}

.posting .blog-levels .level.grade_s .circle.active:before {border:8px solid #CF5D44;}
.posting .blog-levels .level.grade_s .circle.active {color: #CF5D44;}


.blog-levels .dash {
    height: 27px;
    border-left: 1px dashed #ABABAB;
    margin: 6px 0 4px;
}

.blog-levels .dash.long {
    height: 68px;
    margin-bottom: 10px;
}

.blog-levels .level .curved-arrow {
    width: 64px;
    height: 32px;
    background-image: url(/images/curved_arrow3.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    left: -38px;
}

.blog-levels .level.current-next  .curved-arrow {
    background-image: url(/images/curved_arrow2.png);
}

.blog-levels .curved-arrow .count {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 13px;
    right: 10px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    width: 24px;
    height: 10px;
    text-wrap: nowrap;
}

.blog-levels .level.current-next .curved-arrow.active{
    animation: 1s blink-half  infinite;
}

.blog-levels .curved-arrow.none {
    background-image: none;
    opacity:0;
}


.review-board .review-list {
    padding: 15px 13px;
    border-radius: 10px;
    border: 1px solid #D6D6D6;
    background-color: #f5f5f5;
}




.review-board .review-list .review-item {
    display: block;
    padding: 15px 0;
    font-size: 16px;
}

.review-board .review-list .review-item:first-of-type{
    padding-top: 0;
}
.review-board .review-list .review-item:last-of-type{
    padding-bottom: 0;
}

.review-board .review-list .review-item .title {
    line-height: 24px;
    display:flex;
    flex:1;
    gap:3px;
}



.review-board .review-list .review-item .title-text{
    max-width : calc(100% - 100px);
}
.review-board .review-list .review-item + .review-item {
    border-top: 1px solid #d6d6d6;
}

.review-board .review-list .review-item .comment-count {
    color: #2FA254;
    font-weight: 700;
}

.share-graph {
    /*width: 641px;*/
    flex: 1;
    /*height: 488px;*/
    /*padding-left: 114px;*/
}

.share-graph .share-list {
    justify-content: flex-end;
    width: 100%;
    padding: 0 13px;
    border-radius: 10px;
    /*border: 1px solid #D6D6D6;
    background-color: #f5f5f5;*/
}


.share-graph .share-list .share-item {
    display: flex;
    padding: 15px 0;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
}
.share-graph .share-list .share-item:first-of-type{
    padding-top:0;
}


.share-graph .share-list .share-item + .share-item {
    border-top: 1px solid #d6d6d6;
}

.share-graph .share-list .share-item .share-type-box {
    align-items: center;
    justify-content: space-between;
    /*height: 70px;*/
    gap: 5px;
}

.share-graph .share-list .share-item .share-type-box .label {
    color: #000;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2; /* 120% */
    letter-spacing: -1px;
    /*width: 60px;*/
}

.share-graph .share-list .share-item .share-type-box .value {
    width: 74px;
    border-radius: 990px;
    background: #FFF;
    border: 1px solid #D6D6D6;
    padding: 2px 10px;
    color: #707070;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0.36px;
}

.share-graph .share-list .share-item .share-type-box a{
    color:unset;
}

.share-graph .share-list .share-item .share-type-box .value .count {
    color: #2FA254;
}

.share-graph .share-list .share-item .share-type-box .value.request {
    width: 74px;
    padding: 4px 0;
    text-align: center;
    color: #000;
}

.share-graph .share-list .share-item .share-type-box .value.request.none {
    background: #EDEDED;
    border: 0;
}

.share-graph .share-list .share-item .share-type-box .value.request.complete {
    background: #D5E6CF;
    border: 0;
}


.challenge-list {
    width: 100%;
    align-items: center;
    gap: 11px;
}

.challenge-list .chall-item {
    width: calc((100% / 2) - 11px / 2);
    height: 120px;
    gap: 10px;
    border-radius: 10px;
    border: 1px solid #d6d6d6;
    padding: 20px 13px;
    background: #FFF;
    text-align: center;
}

.challenge-list .chall-item img {
    width: 46.452px;
    height: 46.538px;
}

.challenge-list .chall-item .chall-contents {
}

.challenge-list .chall-item .chall-contents .sub {
    color: #6E6E6E;
    font-size: 12px;.challenge-list .chall-item
    font-weight: 400;
    line-height: 2; /* 150% */
    letter-spacing: -0.8px;
    white-space: nowrap;
}

.challenge-list .chall-item .chall-contents .main {
    color: #000;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5; /* 100% */
    letter-spacing: -1.2px;
}

.product-list {
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 25px 13px;
}

.product-list .product-item {
    width: calc((100% / 2) - (13px / 2));
}

.product-list .product-item .thumbnail {
    width: 100%;
    aspect-ratio: 1;
}

.product-list .product-item .group {
    width: 100%;
    height: 42px;
    /*border-bottom: 1px solid #D9D9D9;*/
    align-items: center;
}

.product-list .product-item .group .d-day {
    gap: 5px;
    align-items: center;
}

.product-list .product-item .group .site {
    gap: 5px;
    align-items: center;
}

.product-list .product-item .group .site-icon {
    width: 20px;
    height: 20px;
}

.product-list .product-item .group .text {
    color: #6E6E6E;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px; /* 128.571% */
    letter-spacing: -0.7px;
}

.product-list .product-item .item-name {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: -0.9px;
    height: 50px;
}

.product-list .product-item .item-text {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #707070;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    height: 18px;
    margin:0 0 16px;
}

.product-list .product-item .request-info {
    display: flex;
    /*flex-direction: column;*/
    gap: 10px;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px; /* 128.571% */
}

.product-list .product-item .request-info .site-info {
    display: flex;
    gap: 4px;
    margin-right:auto;
}

.product-list .product-item .request-info .site-info img {
    width: 16px;
}

/*
3. 지수 확인
*/
.icon.point {
    width: 16px;
    height: 16px;
}

.point-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
}

.point-wrap .holding-point {
    font-size: 12px;
    line-height: 1.83;
}

.box .accordion-wrap {
    position: relative;
    margin-top: 20px;
    border-bottom: 1px solid #c3c3c3;
}

.box .accordion-wrap > button.toggle-btn {
    position: absolute;
    bottom: -29px;
    right: 10px;
    height: 28px;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    border-top-left-radius: unset;
    border-top-right-radius: unset;
    font-size: 10px;
    font-weight: bold;
}

.box .accordion-wrap > button.toggle-btn img.icon {
    width: 8px;
    height: 5px;
}

.box .accordion-wrap > button.toggle-btn.active img.icon {
    content: url(/images/btn-icon-up.png);
}

.box .accordion-wrap .accordion-contents {
    display: none;
    border-top: 1px solid #c3c3c3;
    padding: 20px 0;
}

.box .accordion-wrap > button.toggle-btn.active + .accordion-contents {
    display: block;
}

.box .accordion-wrap .accordion-contents .accordion-title {
    font-size: 12px;
    font-weight: bold;
    color: #111;
}

.box .accordion-wrap .blog-grade-table {
    width: calc(100% - 2ch);
    height: 45px;
    margin: 11px 0 0 2ch;
    border: 1px solid #d3d3d3;
    text-align: center;
}

.box .accordion-wrap .blog-grade-table th, .box .accordion-wrap .blog-grade-table td {
    vertical-align: middle;
    font-size: 9px;
}

.box .accordion-wrap .blog-grade-table th {
    height: 25px;
    color: #fff;
    font-weight: bold;
}

.box .accordion-wrap .blog-grade-table th.normal {
    background: #363636;
}

.box .accordion-wrap .blog-grade-table th.base {
    background: #223ee5;
}

.box .accordion-wrap .blog-grade-table th.top {
    background: #ef3d19;
}

.box .accordion-wrap .blog-grade-table td {
    height: 20px;
    color: #111;
}

.item-list {
    display: block;
    width: 100%;
}

.item-list.list > div:not(.popup-box) {
    display: block;
    width: 100%;
    border-bottom: 1px solid #e3e3e3;
    padding: 12px 15px;
    line-height: 1.79;
}

.item-list.list > div.blog-grade-wrap {
    padding-bottom:37px;
}

.item-list.list > div:not(.popup-box) .title {
    font-size: 14px;
    font-weight: bold;
}

.item-list.list > div .contents {
    font-size: 14px;
}

.item-list.list > div .contents .description {
    color: #8e8e8e;
}

.mark {
    padding: 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.mark.normal {
    background: #363636;
}

.mark.base {
    background: #223ee5;
}

.mark.top {
    background: #ef3d19;
}

.mark.dark {
    color: #363636;
}

.mark.blue {
    color: #223ee5;
}

.mark.red {
    color: #ef3d19;
}


.blog-history .mark{
    min-width: 28px;
    padding:0 2px;
    display: inline-block;
    text-align: center;
}

.blog-history .mark.mark-red{
    background-color: #ef3d19;
}
.blog-history .mark.mark-blue{
    background-color: #223ee5;
}
.blog-history .mark.mark-dark{
    background-color: #363636;
}
.item-list.list.analysis-contents-report {
    border-top: 1px solid #111;
}

.item-list.list.analysis-contents-report .contents {
    margin-left: 15px;
}
.item-list.list.analysis-contents-report .contents .plus{
    color:red;
}
.item-list.list.analysis-contents-report .contents .minus{
    color:blue;
}

.box.analysis-contents {
    padding-top: 70px;
}

.box .analysis-contents-report {
    margin: auto;
    padding: 0;
}

.box .analysis-contents-report > .list {
    padding: 0;
}

.table.report-table td[data-status] {
    color: #fff;
}

.table.report-table td[data-status="good"] {
    background-color: #1f75e1;
}

.table.report-table td[data-status="bad"] {
    background-color: #f87e3f;
}

.table.report-table td[data-status="less-good"] {
    background-color: #d4be00;
}

.table.report-table td[data-status="unexposed"] {
    background-color: #272727;
}

.table.report-table td:nth-last-child(3) {
    /*background-color: #36a253;
    color: #fff;*/
}

.table.report-table td:nth-last-child(3) .comment {
    color: #75ed94;
}

.table.report-table td:nth-last-child(2) {
    /*background-color: #cae2d0;*/
}
.report-table .detail_btn{
    width:100%;
    /* border-radius:0 !important; */
}

.report-table .concon-ranking{

    color:#fff;
    background:#fdd000;
    display:inline-block;
    max-width: 180px;
    padding: 2px 8px;
    font-size: 10px;
    width:100%;
}
.report-table .naver-ranking{
    color:#fff;
    background:#36a253;
    display:inline-block;
    max-width: 180px;
    padding: 2px 8px;
    font-size: 10px;
    width:100%;
}
.report-table .post-title{
    color:#0039ff;
    text-decoration:underline;
}
.report-table td>div {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.report-table td>div>div {
    width:100%;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.report-table .ad_fee_text{
    color:#36a253;
    font-weight:bold;
}
.analysis-contents-report .ad_fee_text{
    font-size:14px;
    color:#223ee5;
    font-weight:bold;
}

.tags {
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    gap: 4px 15px;
    align-items:center;
}

.tags li {
    line-height: 18px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.05em;
    color: #000;
}

.tags li.tag:before {
    content: "#";
    color: #000;
    line-height: 18px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.05em;
}


.rescript-container {

}

.rescript-container .input-wrap .label {
    width: 110px;
}

.rescript-container .input-wrap input {
    width: calc(100% - 100px);
}

.rescript-container .keyword-input-row {
    gap: 10px;
    margin-bottom: 5px;
    align-items: center;
}

.rescript-container .keyword-input-row .input-wrap input {
    width: 500px;
}

.rescript-container .selected-keywords .keywords {
    gap: 10px;
}

.rescript-container .configure-paragraphs-form {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.rescript-container .paragraph-plus-btn {
    width: 20px;
    height: 20px;
    display:flex;
    align-items:center;
}

.rescript-container .paragraph-plus-btn img {
    width: 20px;
    height: 20px;
}

.rescript-container .configure-paragraphs-form .additional-input-form {
    width: 100%;
    height: auto;
    gap: 5px;
}

.rescript-container .configure-paragraphs-form .additional-input-form .added-input-wrap {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 10px;
    background: #D9D9D94D;
}

.rescript-container .configure-paragraphs-form .additional-input-form .added-input-wrap .move-elem-btn {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.05em;
    color: #000;
}

/*.rescript-container .configure-paragraphs-form .additional-input-form .added-input-wrap input {
    width: 100%;
    height: 50px;
    padding: 10px 15px 10px 15px;
    border-radius: 5px;
    border: 1px solid #D6D6D6;
    background-color: #FFF;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.05em;
    color: #000;
}*/

.rescript-container .configure-paragraphs-form .additional-input-form .added-input-wrap .del-elem-btn {
    width: 20px;
    height: 20px;
}

.rescript-container .configure-paragraphs-form .additional-input-form .added-input-wrap .del-elem-btn img {
    width: 20px;
    height: 20px;
}

.rescript-container .script-style-list {
    margin-bottom: 18px;
    align-items: center;
}

.rescript-container .script-style-list .label {
    width: 110px;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.05em;
}

.rescript-container .script-style-list .script-style {
    align-items: center;
    gap: 5px;
}

.rescript-container .script-style-list .script-style .script-style-item {
    display: inline-block;
    padding: 5px 18px 5px 18px;
    border-radius: 100px;
    background: #D9D9D980;
    border: 1px solid #ABABAB;
    box-shadow: 0 1px 2px 0 #0A0D120D;
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.05em;
    text-align: center;
    color: #000;
    cursor: pointer;
}

.rescript-container .script-style-list .script-style .script-style-item.active {
    border: 1px solid #2FA254;
    background: #D5E6CF;
}

.rescript-container .script-letter-count {
    align-items: center;
}

.rescript-container .script-letter-count .form {
    width: auto;
    flex: 1 0 auto;
}

.rescript-container .script-letter-count .value {
    gap: 10px;
    align-items: center;
}

.rescript-container .script-letter-count .value span {
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.05em;
    color: #000;
}

.rescript-container .script-letter-count .value select {
    width: fit-content;
}

.refurbishment-point-guide-layer .layer-content {
    gap: 10px;
}

.refurbishment-point-guide-layer .layer-content p {
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
}



.table-wrap{
    width:100%;
    overflow-x:auto;
}
.table.keyword-table {
    margin-top: 15px;
}

.table.select-table tr {
    transition: all 0.2s ease 0s;
    transform: translateX(0px);
}

.table.select-table tr.active {
    background-color: #ebf4e6;
}
.table.select-table tr.recommend_green {
    background-color: rgba(235, 244, 230,0.5);
}
.table.select-table tr.recommend_purple {
    background-color: rgba(255, 216, 255, 0.5);
}
.table.select-table tr.recommend_red {
    background-color: rgba(255, 238, 238, 0.5);
}
.table.select-table tr.recommend_green.active {
    background-color: rgba(235, 244, 230,1);
}
.table.select-table tr.recommend_purple.active {
    background-color: rgba(255, 216, 255,1);
}
.table.select-table tr.recommend_red.active {
    background-color: rgba(255, 238, 238,1);
}



.table.select-table tr.hold {
    background-color: #ff9c9c29;
}

.table.select-table tr td > div.check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    background-image: url(/images/table-check.png);
    background-size: 10px 8px;
    background-position: center;
    background-repeat: no-repeat;
}

.table.select-table tr.active td > div.check {
    background-image: url(/images/table-check-sel.png);
}

.tip-box {
    width: 100%;
    height: auto;
    /*padding: 20px 23px;*/
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    /*background-color: #D6D6D680;*/
    border-radius: 10px;
}

.tip-box .tip-icon {
    width: 30px;
    height: 30px;
    margin-right: 11px;
}

.tip-box .tip-text {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #086721;
    font-style: italic;
    word-break: keep-all;
    line-height: 1.25;
}

.tip-box .tip-title {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    line-height: 1.5;
    letter-spacing: -1px;
}

.tip-box .tip-explanation {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    line-height: 1.5;
    letter-spacing: -0.8px;
    text-align:center;
    word-break:keep-all;
}
.subscription-contents .tip-box .tip-explanation{
    font-size:14px;
}

.text {
    font-size: 14px;
    line-height: 22px;
}

.box[data-state="after"] {
    display: none;
}

.btn.next, .btn.prev, .btn.complete {
    margin: 30px 0 0 auto;
    padding: 0 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.btn.next img, .btn.prev img, .btn.complete img {
    width: 13px;
    height: 7px;
}

/*.btn.complete.step-btn img {
    filter: brightness(0);
}*/

.btn.complete {
    border-radius: 2px;
}

.btn.complete img {
    filter: brightness(100);
}

.table.diagnosis-table {
    margin-top: 20px;
}

.table.diagnosis-table td.inadequate {
    background-color: #ffe4bc;
}

.table.diagnosis-table td.suitable {
    background-color: #d1e3ef;
}

.table.diagnosis-table td.good {
    background-color: #d1e3ef;
}

.table.diagnosis-table td.normal {
    background-color: #d4be00;
}

.table.diagnosis-table td.explain_view {
    background-color: #fff5a4;
}

.table.diagnosis-table td .explanation{
    padding:5px;
    border-radius:5px;
}
.table.diagnosis-table td .inadequate {
    background-color: #ffe4bc;
}

.table.diagnosis-table td .suitable {
    background-color: #d1e3ef;
}

.table.diagnosis-table td .good {
    background-color: #d1e3ef;
}

.table.diagnosis-table td .normal {
    background-color: #d4be00;
}

.table.diagnosis-table td .explain_view {
    background-color: #fff5a4;
}

.recommended-title {
    width: 100%;
    padding: 10px;
    line-height: 1.3;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 14px;
    color: #000;
    border: 2px solid #2FA254;
}


/*.badge {
    width: fit-content;
    height: 30px;
    min-width: 90px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 90px;
    font-size: 10px;
    color: #111;
    line-height: 1.57;
    word-break:keep-all;;
    border: 1px solid #2FA254;
}*/

.badge {
    display: inline-block;
    width: fit-content;
    height: fit-content;
    padding: 2px 10px;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -1px;
    text-align: center;
    background: #fff;
    border: 1px solid #2FA254;
    color: #000;
    cursor: default;
    min-width: 80px;
}

.badge.sm {
    height: fit-content;
    min-width: 40px;
    padding: 2px 5px;
}

.badge.md {
    height: 25px;
    min-width: 50px;
    padding: 2px 5px;
    font-size: 12px;
}

.badge.fit {
    min-width: fit-content;
}

.badge.square {
    border-radius: 0;
}

.badge.round {
    border-radius: 5px;
}

.badge.inadequate {
    background-color: #ffe3bb;
}

.badge.suitable {
    background-color: #d1e3ef;
}

.badge.good {
    background-color: #d1e3ef;
}

.badge.explain_view {
    background-color: #fff5a4;
}

.badge.normal{
    /*border: 2px solid #111;*/
    background-color:#d4be00;
}
.badge.complete {
    background-color: #cee9d6;
}

.badge.audit {
    color: #616161;
    background-color: #dbdbdb;
}

.badge.yellow {
    background: #fee77f;
}

.badge.blue {
    color: #fff;
    background: #1687d6;
}

.badge.green {
    color: #fff;
    background: #2FA254;
}

.badge.gray {
    background: #e1e1e1;
}

/*.badge.light-gray {
    color: #8e8e8e;
    background-color: #f6f6f6;
}*/

.badge.border-none{
    border:none;
}

.badge.outline-green {
    color: #2FA254;
    border: 1px solid #2FA254;
    background: #fff;
}

/*.badge.light-green {
    color: #000;
    background-color: #d9f2d0;
    border-color: #5d9f5d;
}*/

.badge.gold {
    background: #ffc000;
    border-color: #ad8200;
}

.badge.navy, .badge.second {
    color: #fff;
    background: #404F80;
    border-color: #404F80;
}

.badge.outline-navy, .badge.outline-second {
    color: #000;
    background: #404F8033;
    border: 1px solid #404F80B2;
}

.badge.taupe {
    color: #fff;
    background: #CF8359;
    border-color: #CF8359;
}

.badge.orange {
    background: #E85A13;
    color: #fff;
    border: 2px solid #E85A13;
}
.badge.light-red {
    background-color: #fbe3d6;
    border-color:#f2aa84;
}

.badge.light-gray {
    background-color: #f2f2f2;
    border-color:#bfbfbf;
}
.badge.light-green{
    background-color: #d9f2d0;
    border-color:#5d9f5d;
}

.badge.light-yellow{
    background-color: #ffffd5;
    border-color:#e3e304;
}






.table.title-recommend-table + .form-wrap {
    margin-top: 30px;
}

.box-contents > .btn.start_support_btn, .box-contents > .btn.start_analysis_btn, .box-contents > .btn.start_ai_btn {
    font-size: 15px;
    font-weight: 500;
}

.box-contents .complete_analysis {
    display: none;
}

.textarea .ai_complete {
    color: #2FA254;
    font-size: 12px;
    font-weight: bold;
}

.recent-contents-wrapper {
    position:relative;
}
.recent-contents-wrapper.no-login .recent-contents-analysis-item{
    filter:blur(5px);
}


.recent-contents-analysis-list {
    padding: 15px;
    background: #D6D6D680;
    gap:15px;
}

.recent-contents-analysis-list .recent-contents-analysis-item {
    padding: 25px 13px;
    background: #fff;
    border-radius: 10px;
}

.recent-contents-analysis-list .recent-contents-analysis-item > div {
    gap: 20px;
}

.recent-contents-analysis-list .recent-contents-analysis-item h2 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: -0.5px;
}

.recent-contents-analysis-list .recent-contents-analysis-item .info-list dl {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.5px;
}


.posting-analysis-guide-layer .table-wrap{
    overflow:unset;
}
.posting-analysis-guide-layer.layer-box .layer-content {
    width: fit-content;
}

.popup .layer-content .sub-title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}


.posting-analysis-guide-layer .layer-content .sub-title{
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin-bottom:8px;
}


.posting-analysis-guide-layer .layer-content ul {
    font-size: 14px;
    color: #111;
    line-height: 1.25;
    /*20250213 추가 */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.posting-analysis-guide-layer .layer-content ul li {
    display: flex;
}

.posting-analysis-guide-layer.layer-box .layer-buttons .button {
    width: 100%;
}

.blog-history-layer.layer-box .layer-buttons .button {
    width: 100%;
}

.posting-analysis-guide-layer .layer-content ul li:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #39a154;
    margin: 9px 10px 9px 6px;
    aspect-ratio: 1 / 1
}

/*20250213 추가 S*/
.posting-analysis-guide-layer .layer-content li .point {
    font-weight: 700;
}
.posting-analysis-guide-layer .layer-content li .point.red {
    color: #ec1010;
}
.posting-analysis-guide-layer .layer-content .blog-grade-table {
    width: 100%;
    height: 60px;
    border: 1px solid #d3d3d3;
    text-align: center;
}
.posting-analysis-guide-layer .layer-content .blog-grade-table tr {
    width: 100%;
    height: 30px;
}
.posting-analysis-guide-layer .layer-content .blog-grade-table th {
    font-size: 13px;
    font-weight: 700;
    color: #000;
    border: 1px solid #d3d3d3;
    vertical-align: middle;
}
.posting-analysis-guide-layer .layer-content .blog-grade-table th.normal {
    background-color: #363636;
}
.posting-analysis-guide-layer .layer-content .blog-grade-table th.base {
    background-color: #223ee5;
}
.posting-analysis-guide-layer .layer-content .blog-grade-table th.top {
    background-color: #ef3d19;
}
.posting-analysis-guide-layer .layer-content .blog-grade-table td {
    font-size: 13px;
    /*color: #111;*/
    border: 1px solid #d3d3d3;
    vertical-align: middle;
}
/*20250213 추가 E */


/*
#content_textarea_div {
    display: none;
}*/

/*
3-1. 포스팅 지수
*/

/*
.categories-wrap {
    width: 100%;
    align-items: center;
    margin-bottom: 66px;
}

.categories {
    gap: 70px;
    align-items: center;
}

.categories .title {
    color: #000;
    font-family: "Noto Sans CJK KR";
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -1.4px;
}

.categories .category {
    gap: 60px;
    align-items: center;
}

.categories .category .item.active {
    position:relative;
    !*color: #2FA254;*!
    color:#000;
}

.categories .category .item.active:after{
    content: '';
    position: absolute;
    width:calc(100% + 11px);
    height:50%;
    bottom:0;
    left:-5px;
    background-color:#2fa25433;
    border-radius:10px;
}

.categories .category .item {
    color: #707070;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 20px; !* 100% *!
    letter-spacing: -1px;
}

.link-btn {
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px; !* 171.429% *!
    letter-spacing: -0.7px;
    padding: 2px 14px;
}*/


.material-categories{

}
.material-categories .title {
    color: #000;
    font-family: "Noto Sans CJK KR";
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -1.4px;
}



.material-categories .category .item.active {
    position:relative;
    color:#000;
}

.material-categories .category .item.active:after{
    content: '';
    position: absolute;
    width:calc(100% + 11px);
    height:50%;
    bottom:0;
    left:-5px;
    background-color:#2fa25433;
    border-radius:10px;
}

.material-categories .category .item {
    color: #707070;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -1px;
    white-space:nowrap;
}
.category-img-list {
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    padding: 20px 10px;
    overflow-x: auto;
}

.category-img-item {
    /*min-width: 123px;
    width: 123px;
    height: 123px;*/
    display: flex;
    width: 80px;
    height: 80px;
    min-width: 80px;
    background-color: #FFF;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    gap: 7px;
}

.category-img-item:hover {
    /*scale: 115%;
    transition: .2s;*/
}
.category-img-item.active {
    background-color: #2FA254;
}
.category-img-item.active .category-name {
    color: #fff;
}

.category-img-item img {
    /*width: 54px;
    height: 54px;*/
    width: 35px;
    height: 35px;
}
.category-img-item.active img {
    filter: invert(100%);
}

.category-img-item .category-name {
    color: #000;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}

.manuscript-diagnosis-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin-top: 30px;
    align-items: stretch;
    column-gap: 10px;
    grid-template-columns: calc(100% / 2 - 50px) 80px calc(100% / 2 - 50px);
}

.manuscript-diagnosis-wrap .contents-wrap {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
}

.diagnosis-arrow {
    width: 80px;
    gap: 8px;
    justify-content: center;
    cursor: pointer;
}

.diagnosis-arrow .arrow {
    width: 80px;
    height: 80px;
    border-radius: 999px;
    background-color: #2FA254;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diagnosis-arrow .arrow img {
    width: 51.5px;
    height: 42.59px;
}

.diagnosis-arrow .step {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    color: #000;
}

.manuscript-diagnosis-wrap .manuscript-wrap .history-box {
    justify-content: space-between;
    align-items: center;
    padding: 11px 15px;
    background: #D5ECDD66;
    border-width: 3px 0 1px 0;
    border-style: solid;
    border-color: #000000;
}

.history-box .history {
    align-items: center;
    gap: 3px;
    flex-wrap:wrap;
}

.history-box .history-btn {
    min-width: 25px;
    padding: 2px 5px;
    border-radius: 5px;
}

.history-box .label {
    font-size: 13px;
    font-weight: 500;
    line-height: 21px;
    color: #000000;
}

.history-box .count-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.05em;
    color: #000000;
}



.manuscript-wrap .summary {
    /*border-bottom: 1px solid #DCDCDC;*/
    padding: 14px 10px;
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.05em;
}

.manuscript-wrap .summary .label {
    font-weight: 700;
    white-space: nowrap;
    margin-right: 3px;
}
.manuscript-wrap .summary .content_keyword .value{
    height:60px;
    overflow:hidden;
}
.manuscript-wrap .manuscript {
    width: 100%;
    padding: 26px 14px;
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.05em;
    height: 420px;
    overflow-y: scroll;
    border: 0;
}

.manuscript-wrap .re-script-btn {
    width: 100%;
    padding: 10px 18px;
}

.manuscript-wrap .button-wrap{
    display:flex;
    gap: 25px;
    align-items: center;
    justify-content: center;
}
.manuscript-wrap .basic-btn{
    width:50%;
    /*flex:1;*/
    padding:10px 18px;
}
.manuscript-wrap .copy-btn{
    margin-left:5px;
    border-radius: 20px;
    white-space:nowrap;
}

.manuscript-wrap hr.divider{
    border:1px solid #DCDCDC;
    margin:0;
}
.manuscript-wrap .contents-copy .copy-btn{
    float:right;
    border-radius: 20px;
}

.manuscript-diagnosis-wrap .diagnosis-table thead {
    height: 55px;
    line-height: 55px;
}

.manuscript-diagnosis-wrap .diagnosis-table tbody tr td, .reference-table-wrap .reference-table tbody tr td {
    font-size: 13px;
    text-align: center;
    line-height: 1.5;
}

.manuscript-diagnosis-wrap .diagnosis-table tbody tr td .explanation {
    font-weight: 600;
    background: #F2F2F2;
}

.manuscript-diagnosis-wrap .diagnosis-table tbody tr td .explanation.light-green {
    background: #D5E6CF;
}

.manuscript-diagnosis-wrap .diagnosis-table tbody tr td .explanation.light-red {
    background: #E8D2C678;
}


.reference-table-wrap .reference-table tbody tr td .badge {
    margin: 0 auto;
}


.analysis {

}

.analysis .start-form-wrap {
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom:30px;
}

.analysis .input-wrap {
    gap: 10px;
}

.analysis .input-wrap .label {
    width: fit-content;
}

.analysis .start-form-wrap input {
    width: 350px;
    height: 48px;
    padding: 10px 15px 10px 15px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.05em;
    color: #000000;
}

.analysis .analysis-start-btn {
    height: 44px;
    line-height: 44px;
}

.analysis .get-level-analysis-btn {
    height: 44px;
    line-height: 44px;
}

.analysis .page-sub-title-box {
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
}

.analysis .page-sub-title-box .share-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /*background-color: #000;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.analysis .page-sub-title-box .share-btn img {
    /*width: 15px;
    height: 16.67px;*/
    width: 25.33px;
    height: 23.67px;
}

.analysis .page-sub-title-box .title-wrap {
    align-items: center;
    gap: 15px;
}


.analysis .analysis-basic-info .blog-info-box {
    align-items: center;
}

.analysis .analysis-basic-info .blog-info-box .blog-info {
    display: flex;
    align-items: center;
}

.analysis .analysis-basic-info .blog-info-box .blog-info .label {
    margin-right: 5px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.05em;
}

.analysis .analysis-basic-info .blog-info-box .blog-info .value {
    font-size: 14px;
}

.analysis .analysis-basic-info .blog-info-box .blog-info .value.green {
    /*color: #2FA254;*/
}

.analysis .analysis-basic-info .blog-info-box .blog-info:after {
    display: inline-block;
    content: "";
    width: 1px;
    height: 16px;
    background-color: #000;
    /*margin: 0 35px;*/
    margin: 0 10px;

}

.analysis .analysis-basic-info .blog-info-box .blog-info:last-child:after {
    width: 0;
}

.analysis .by-type-analysis {
    width: 100%;
    gap: 25px;
    justify-content: space-between;
}

.analysis .by-type-analysis .by-type {
    width: 100%;
    padding: 26px 21px 30px;
    align-items: center;
    background: #F6F6F6;
    border-radius: 10px;
    position: relative;
}

.analysis .by-type-analysis .by-type .share-btn {
    width: 25.33px;
    height: 23.67px;
    position: absolute;
    top: 15px;
    right: 15px;
}

.analysis .by-type-analysis .by-type .share-btn img {
    width: 22px;
    height: 21px;
}

.analysis .by-type-analysis .by-type .type-name {
    color: #000;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: -0.05em;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.analysis .by-type-analysis .by-type .type-name img {
    cursor: pointer;
    width: 20px;
    height: 20px;
    line-height: 26px;
}

.analysis .by-type-analysis .by-type .none-result-box{
    background: #fff;
    padding: 7.5px 20px;
    width: 100%;
    text-align: center;
    border-radius:10px;
}

.analysis .by-type-analysis .by-type .levels{
    position: relative;
}

.analysis .by-type-analysis .by-type .levels img {
    width: 100%;
}

.analysis .by-type-analysis .by-type .levels .level-mark-container.empty img{
    width:auto;
}

.analysis .by-type-analysis .by-type .level-fluctuations-list {
    margin-top: 19px;
    width: 100%;
    gap: 10px;
}


.level-fluctuations-list .fluctuations-item {
    width: 100%;
    height: 74px;
    padding: 7.5px 20px;
    gap: 25px;
    background: #FFFFFF;
    border-radius: 10px;
    align-items: center;
    white-space: nowrap;
}

.level-fluctuations-list .fluctuations-item .score-text{
    font-weight:500;
}
.level-fluctuations-list .fluctuations-item .analysis-date{
    font-size:14px;
    font-weight:500;
    color: #838383;
}

.level-fluctuations-list .fluctuations-item .level-mark-circle {
    width: 50px;
    height: 50px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -1px;
    color: #fff;
}

.level-fluctuations-list .fluctuations-item.blue .level-mark-circle {
    background: #77A2CA;
}

.level-fluctuations-list .fluctuations-item.orange .level-mark-circle {
    background: #E85A13;
}

.level-fluctuations-list .fluctuations-item .fluctu-info {
    min-width: 74px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -1px;
    color: #000;
}

.level-fluctuations-list .fluctuations-item .fluctu-info .level-text {
    font-weight: 700;
}

.level-fluctuations-list .fluctuations-item .added-level-point {
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: -1px;
    color: #E85A13;
}
.level-fluctuations-list .fluctuations-item .added-level-point.minus{
    /*20250213 추가 */
    color:#77A2CA;
}

.level-mark-container{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.level-mark-container .level-mark-wrap{
    position:relative;
}


.level-mark-container .circle-container {
    position: relative;
    display:flex;
    width: 37.3333vw;
    height: 13.333vw;
    max-width: 140px;
    max-height: 50px;
}
.level-mark-container .circle-container .circle{
    width: 27.2vw;
    height: 13.333vw;
    max-width: 102px;
    max-height: 50px;
    border-radius: 999px 999px 0 0 ;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 35px;
    font-weight: 700;
    color: #FFF;
    line-height: 35px;
}
.level-mark-container .circle-container .circle .grade-name-text{
    font-size: 13px;
    position: absolute;
    font-weight: 700;
    bottom: -30px;
    color: #000;
}

.level-mark-container .circle-container .circle-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #CDCDCD;
    transform-origin: 50% 75%;
}


.level-mark-container.grade_na .circle-container .circle {background-color:#CDCDCD;}
.level-mark-container.grade_d .circle-container .circle {background-color:#A5A5A5;}
.level-mark-container.grade_c .circle-container .circle {background-color:#79BB9F;}
.level-mark-container.grade_b .circle-container .circle {background-color:#8F8FBE;}
.level-mark-container.grade_a .circle-container .circle {background-color:#F08362;}
.level-mark-container.grade_s .circle-container .circle {background-color:#CF5D44;}

.level-mark-container.grade_na .circle-container .circle-arrow {border-bottom: 10px solid #CDCDCD;}
.level-mark-container.grade_d .circle-container .circle-arrow {border-bottom: 10px solid #A5A5A5;}
.level-mark-container.grade_c .circle-container .circle-arrow {border-bottom: 10px solid #79BB9F;}
.level-mark-container.grade_b .circle-container .circle-arrow {border-bottom: 10px solid #8F8FBE;}
.level-mark-container.grade_a .circle-container .circle-arrow {border-bottom: 10px solid #F08362;}
.level-mark-container.grade_s .circle-container .circle-arrow {border-bottom: 10px solid #CF5D44;}

.mark.grade_na{background-color:#CDCDCD;}
.mark.grade_d{background-color:#A5A5A5;}
.mark.grade_c{background-color:#79BB9F;}
.mark.grade_b{background-color:#8F8FBE;}
.mark.grade_a{background-color:#F08362;}
.mark.grade_s{background-color:#CF5D44;}



.posting-start-info {
    gap: 10px;
}

.posting-start-info .flex-row {
    width: 100%;
    height: 68px;
    gap: 10px;
}

.posting-start-info .posting-btn {
    width: 163px;
    height: 68px;
    line-height: 68px;
    border-radius: 5px;
}

.posting-start-info .textarea-wrap {
    width: calc(100% - 163px);
}

.posting-start-info .input-wrap input
{
    width: calc(50% - 150px);
}


.posting-start-info .textarea-wrap textarea {
    width: calc(100% - 127px);
}

.posting-start-info .comments {
    padding-left: 127px;
}

/*
4. 커뮤니티
*/
.notify-box {
    width: 100%;
    padding: 20px 15px;
    background: #f9f9f9;
}

.notify-box.type2 {
    background: #ececec;
}

.notify-box.type3 {
    background: #f6f6f6;
}

.notify-box.hide-box {
    display: none;
    border-bottom: 1px solid #111;
}

.notify-box .notify-contents {
    font-size: 12px;
    color: #111;
    line-height: 1.5;
}
.notify-box .notify-contents .notice-text{
    white-space:pre-line;;
}

.notify-box.type2 .notify-contents {
    text-align: center;
}

.sort-wrap + .item-list.know-how-contents, .sort-wrap + .item-list.neighbor-contents, .sort-wrap + .item-list.campaign-contents {
    margin-top: 0;
}

.item-list.list .contents .sub-contents {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    color: #8e8e8e;
    line-height: 1.5;
}

.item-list.list .contents .sub-contents + .sub-contents {
    margin-top: 8px;
}

.item-list.list .contents .sub-contents ul {
    display: flex;
    flex-wrap: wrap;
}

.item-list.list .contents .sub-contents ul li {
    flex: 1 0 50%;
    color: #111;
}

.item-list.know-how-contents > div, .item-list.campaign-contents > div {
    padding: 20px 15px;
}

.item-list.know-how-contents .contents, .item-list.campaign-contents .contents {
    margin-top: 20px;
}

.item-list.know-how-contents .contents > .sub-contents:nth-child(2) {
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.board-container .board-wrap .board-form-wrap .point-input::after {
    content: "P";
    display: block;
    position: absolute;
    /*top: calc((35px - 12px - 15px) / 2);*/
    right: 14px;
    font-size: 12px;
    color: #111;
}

.board-container ~ .buttons .btn {
    /*border-radius: 0;*/
}

.board-container ~ .buttons .autosave_delete {
    /*margin-right: auto;*/
}

.board-container ~ .buttons .submit {
/*    margin-left: auto;*/
}

.board-container .board-wrap .board-view-title {
    font-size: 14px;
    color: #111;
    line-height: 1.36;
}

.board-container .board-wrap .board-view-title + * {
    margin-top: 10px;
}

.notify-box .notify-buttons {
    margin-top: 15px;
}

.board-container .notify-box {
    margin-top: 5px;
}

.board-container .board-wrap .board-contents.hide-contents {
    /*max-height: 280px;*/
    overflow: hidden;
}

.board-container .board-wrap .board-contents.hide-contents:before {
    content: "";
    width: 100%;
    height: 50%;
    display: block;
    background: linear-gradient(to top, white, transparent);
    position: absolute;
    bottom: 0;
}

.comment-container {
    margin-top: 15px;
    overflow: hidden;
}

.comment-container .comment-wrap .comment-box {
    width: 100%;
}

.comment-container .comment-wrap .list_area {
    padding: 0 15px;
    overflow: hidden;
}

.comment-container .comment-wrap .comment-box.registered, .comment-container .comment-wrap .comment-box.reply {
    background: #f9f9f9;
}

.comment-container .comment-wrap .comment-box.registered {
    padding: 15px 10px;
    border: 1px solid #ebebeb;
}

.comment-container .comment-wrap .comment-box.reply, .comment-container .comment-wrap .comment-box.modify {
    display: none;
    padding: 20px 15px 20px 5px;
}

.comment-container .comment-wrap .comment-box.reply[data-depth="2"], .comment-container .comment-wrap .comment-box.modify[data-depth="2"] {
    padding: 15px 15px 15px 20px;
}

.comment-container .comment-wrap .comment-box.view {
    padding: 20px 15px 20px 5px;
}

.comment-container .comment-wrap .comment-box[data-depth="1"] {
/*    margin-left: 20px;*/
}

.comment-container .comment-wrap .comment-box.view[data-depth="2"] {
    padding: 15px 15px 15px 20px;
}

.comment-container .comment-wrap .comment-box:not(.registered) {
    border-bottom: 1px solid #ebebeb;
}

.comment-container .comment-wrap .comment-box > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-container .comment-wrap .comment-box > div.comment-contents {
    margin-top: 15px;
    font-size: 10px;
    color: #393939;
    line-height: 1.5;
}

.comment-container .comment-wrap .comment-box  .is_modify {
    margin-bottom: 3px;
    font-size: 10px;
    color: #8b8b8b;
}

.comment-container .comment-wrap .comment-box div.textarea[contenteditable] {
    height: 50px;
    padding: 10px 8px;
    background: #fff;
    font-size: 10px;
}

.comment-container .comment-wrap .comment-box > div:first-child + .form-wrap {
    margin-top: 16px;
}

.comment-container .comment-box div .writer_nickname {
    font-size: 10px;
    font-weight: bold;
    color: #111;
}

.comment-container .comment-box div .registered_date {
    font-size: 10px;
    font-weight: bold;
    color: #8b8b8b;
}

.comment-container div .registered_comment_btn {
    height: 20px;
    margin-right: 0;
    font-size: 10px;
}

.comment-container .comment-box .comment-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8b8b8b;
    font-size: 10px;
}

.comment-container .comment-box .comment-btn img {
    width: 10px;
    height: 10px;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.comment-container .comment-box .registered_date + * {
    margin: 0 0 0 auto;
}
.comment-container .comment-box .comment-btn.reply {
    /*margin: 0 auto 0 20px;*/
}

.comment-container .comment-box .comment-edit-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-container .comment-box .comment-edit-buttons .comment-btn + span {
    width: 1px;
    height: 6px;
    margin: 0 6px;
    display: inline-block;
    background: #8b8b8b;
    line-height: 10px;
}

.neighbor-contents.item-list .contents, .campaign-contents.item-list .contents {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #111;
    line-height: 1.79;
}

.neighbor-contents.item-list .contents > div:first-child, .campaign-contents.item-list .contents > div:first-child, .point-histories.item-list .contents > div:first-child * {
    margin-right: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.neighbor-contents.item-list .contents > div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    flex: 1 0 auto;
    max-width: 75px;
}

.campaign-contents.item-list .contents > div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    flex: 0 0 90px;
    max-width: 90px;
}

.neighbor-contents.item-list .contents > div:last-child *, .campaign-contents.item-list .contents > div:last-child * {
    width: 100%;
    margin: 0;
}

.qna-no-item-box {
    width: 100% !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.qna-no-item-box img {
    width: 110px;
    object-fit: cover;
}

.qna-no-item-box .text {
    font-size: 12px;
    color: #8e8e8e;
}

.box.neighbor_write_box .form-title {
    gap: 0;
}

.box.neighbor_write_box .form-title > span.po_text {
    flex: none;
}

.box.neighbor_write_box .tip-box {
    padding: 0 10px;
    background: #fff;
}

.box.neighbor_write_box .tip-box .tip-text {
    flex: 1 0 calc(100% - 41px);
}

.box.neighbor_write_box .buttons.multiple.full-buttons .btn.cancel-btn {
    flex: 0 0 70px;
}

td.overflow-td ul li[data-status="before"] {
    color: #8e8e8e;
}

.info-list > li {
    display: flex;
    align-items: center;
    gap: 30px;
}

.info-list > li > p {
    flex: 1 0 auto;
    font-size: 14px;
    color: #777;
    line-height: 1.43;
}

.info-list > li > p.info-title {
    flex: 0 0 100px;
    color: #111;
}

.info-list > li > p:not(.info-title) {
    font-family: Roboto;
    font-weight: 300;
}

.item-list.campaign-contents .contents .sub-contents {
    flex-wrap: wrap;
    color: #111;
}

.item-list .contents .sub-contents .post_info {
    color: #8e8e8e;
}

.item-list.campaign-contents .contents .sub-contents .post_info {
    margin-right: 10px;
}

.item-list.list .contents .sub-contents ul.campaign-info {
    width: 100%;
    flex-direction: column;
}

ul.list-style-marker.dot li {
    display: flex;
    gap: 2px;
    white-space: nowrap;
}

ul.list-style-marker.dot li:before {
    content: '·';
}

.campaign-view-info {
    display: flex;
    justify-content: space-between;
    max-width: 425px;
    color: #2FA254;
    font-size: 14px;
    flex-wrap:wrap;
    gap:10px;
}

.form-wrap .form-title.horizontal > * {
    flex: 1;
}

.form-title.horizontal > span {
    flex: 0 0 90px;
    text-align: left;
}

.form-title.horizontal .form input {
    width: calc(100% - 22px) !important;
}

.overflow-x-auto {
    overflow-x: auto !important;
}

.overflow-y-auto {
    overflow-y: auto !important;
}

.overflow-y-scroll {
    overflow-y: scroll !important;
}

.ratings {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 0 auto;
}

.star-rate {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 3px;
}

.ratings.sm {
    gap: 2px;
}

.ratings img {
    width: 14px;
    height: 14px;
    aspect-ratio: 1 / 1;
}

.ratings.sm img {
    width: 10px;
    height: 10px;
}

.select-table .list-style-marker li > span {
    flex: 1 0 51px;
}

.query-box {
    width: 100%;
    height: auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.query-box .num {
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 50%;
    background-color: #000;
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.05em;
    text-align: center;
}

.query-box .query {
    font-size: 28px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: -0.05em;
    color: #000;
    margin-left:10px;
}
.query-box .query.sm {
    font-size: 16px;
    margin-left: 0;
}

.query-box .base-keyword {
    font-size: 28px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: -0.05em;
    color: #2FA254;
}

.selected-keywords {
    width: 100%;
    height: auto;
    gap: 10px;
    margin-bottom:15px;
}

.selected-keywords > .flex-row {
    gap: 12px;
}

.selected-keywords .label {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.05em;
    color: #000;
    flex: 0 0 auto;
}

.selected-keywords .keywords {
    gap: 11px;
    row-gap: 11px;
    flex-wrap: wrap;
}

.selected-keywords .keywords .keyword {
    padding: 2px 15px;
    background: #2FA2541A;
    /*border: 1px solid #d9d9d9;*/
    cursor: pointer;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.05em;
    border-radius: 990px;
    justify-content:space-between;;
    flex:1;
    min-width:calc(50% - 10px);
}

.keyword-input-row .selected-keywords .keywords {
    gap: 5px;
}

.keyword-input-row .selected-keywords .keywords .keyword {
    background: #2FA2541A;
    border: none;
}


.table-wrap {
    width: 100%;
    height: auto;
}
.diagnosis-detail .table-wrap{
    max-height:450px;
    overflow-y:auto;
    overflow-x:hidden;

}
.diagnosis-detail .view-missing-image {
    color: #7786ff;
    font-weight: 500;
    text-decoration: #7786ff underline;
}

.table-wrap .basic-table.keyword-list {
    margin-bottom: 15px;
    /*width: max-content;*/
    width:100%;
}

.table-wrap .basic-table.keyword-list td {
    padding: 8px;
    font-size: 13px;
}
.table-wrap .basic-table.keyword-list.text-nowrap td{
    white-space:nowrap;;
}

.table-wrap .table-title-row {
    width: 100%;
    height: 40px;
    color: #000;
    line-height: 40px;
    text-align: center;
    background-color: #55a57166;
    border-top: 1px solid #B7B7B7;
    font-weight: 700;
    font-size: 13px;
}

.keyword-list .keyword-list-wrap .recommend-btn-box {
    width: 100%;
    height: 44px;
    justify-content: right;
    margin-bottom: 10px;
}

.keyword-list .keyword-list-wrap .recommend-btn-box .basic-btn {
    line-height: 44px;
    padding: 0 22px;
    border-radius: 8px;
}

.table-wrap .table-header {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.table-wrap .table-header .label {
    line-height: 34px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: #000;
}

.table-wrap .basic-table {
    width: 100%;
    height: auto;
    text-align: center;
    border-top: 1px solid #707070;
    overflow-x: auto;
}

.table-wrap .basic-table tr {
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: #707070;
    background: #D5ECDD66;
    color: #000;
    height: 60px;
    line-height: 1.3;
}

.table-wrap .basic-table th, .table-wrap .basic-table td {
    border: 1px solid #B7B7B7;
    height: 50px;
    vertical-align: middle;
    padding:5px;
}

.table-wrap .basic-table th {
    font-size: 12px;
    font-weight: 500;
    word-break: keep-all;
}

.table-wrap .basic-table tbody tr {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #DCDCDC;
    height: 50px;
    background-color: #FFF;
    transition: .5s;
}

.basic-table tbody tr:hover {

    /*background-color:#D5ECDD66 !important;*/
    /*background-color:#d5ecdd !important;*/
}

.table-wrap .basic-table tbody tr:nth-of-type(even) {
    /*background-color: #f9f9f9;*/
}
.table-wrap .basic-table tbody tr:nth-of-type(odd) {
    background-color: unset;
}

.table-wrap .basic-table tbody tr .keyword-text {
    margin-right: 5px;
}

.table-wrap .basic-table tbody td {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.05em;
}
.blog-history .table-wrap .basic-table tr
,.blog-history .table-wrap .basic-table th
, .blog-history .table-wrap .basic-table td {
    height: unset;
}

.table-wrap .basic-table tbody td.left {
    text-align: left;
    padding-left: 18px;
}

.table-wrap .basic-table tbody td.effect {
    color: #478E88;
    font-weight: 700;
}

.table-wrap .basic-table th:first-child,
.table-wrap .basic-table td:first-child {
    border-left: 0;
}
.table-wrap .basic-table th:last-child,
.table-wrap .basic-table td:last-child {
    border-right: 0;
}

.table-wrap .basic-table.diagnosis-table tbody td{
    font-size: 12px;
    line-height: 1.7;
    word-break:keep-all;
}

.keyword-list-wrap .next-btn-wrap {
    width: 100%;
    justify-content: center;
    height: 44px;
    margin-top: 25px;
}

.keyword-list-wrap .next-btn-wrap .next-btn {
    width: 169.5px;
    line-height: 44px;
}

.posting-title-ex {
    width: 100%;
    height: auto;
    padding: 13px 15px;
    background-color: #FFF;
    border: 1px solid #39A154;
    box-shadow: 0 4px 4px 0 #0000001A;
    font-size: 13px;
    font-weight: 400;
    line-height: 13px;
    letter-spacing: -0.05em;
    border-radius: 5px;
}

.table-header {
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
}

.title-select .table-header {
    margin-bottom: 15px;
}

.table-header .title {
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: -0.05em;
}

.title-select .re-recommend-btn {
    padding: 9px 10px;
}

span.tag {
    height: 24px;
    line-height: 22px;
    padding: 0 12px;
    border-radius: 100px;
    box-shadow: 0 1px 2px 0 #0A0D120D;
    color: #000;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -1px;
}

span.tag.basic {
    background: #D5E6CF;
    border: 1px solid #2FA254;
}


/*
5. 로그인
*/
a.find_password, a.signup {
    line-height: 18px;
}

label[for="save_id"] {
    margin-left: -5px;
}

.social-login-contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.social-login-contents > div:first-child h2 {
    font-size: 15px;
    color: #111;
}

.social-login-contents > div:first-child p {
    font-size: 11px;
    color: #8e8e8e;
}

.social-login-contents > div:last-child {
    display: flex;
    align-items: center;
    gap: 9px;
}

.social-login-contents > div:last-child > a, .sns-box > div:first-child {
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 36px;
    height: 36px;
}

.sns-box div.naver, .sns-box div.kakao, .sns-box div.apple {
    background: #d2d2d2;
}

a.naver, .connected div.naver {
    background: #21cb01;
}

a.kakao, .connected div.kakao {
    background: #fdd000;
}
a.kakao, .connected div.kakao {
    background: #fdd000;
}
a.kakao, div.kakao img{
    width: 15px;
    height: auto;
    aspect-ratio:unset;
}

a.apple, .connected div.apple {
    background: #000000;
}

.social-login-contents > div:last-child > a img, .sns-box img {
    width: 36px;
    height: 36px;
}
.social-login-contents > div:last-child > a.kakao{
    width: 36px;
    height: 36px;
    border-radius: 100%;
    background-color: #fee500;
}
.social-login-contents > div:last-child > a.kakao img{
    width: 21px;
    height: 19px
}


/*
6. 회원가입
*/
.join_form .form-wrap .form > button, .join_form .form-wrap .form > select {
    width: 100px;
    flex: 1 0 100px;
}

.form.certy-input, .board-form.certy-input {
    display: none;
}

.certy-input > div {
    position: relative;
    flex: 1 0 auto;
}

.certy-input > div > input {
    width: 100% !important;
}

.certy-input > div #certify_limit_time {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 12px;
    color: #f00;
}

#user_submit_btn.active {
    background: #2FA254;
    color: #fff;
}

/*
7. 마이페이지
*/
.sns-box {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
}

.sns-box + .sns-box {
    margin-top: 15px;
}

.sns-box .social-login-info {
    margin-right: auto;
    font-size: 14px;
    color: #797979;
}

.sns-box.connected .social-login-info {
    color: #111;
}

.sns-box .social-login-info .login-date {
    display: block;
    margin-top: 10px;
    font-size: 10px;
    color: #a7a7a7;
}

.sns-box .social-login-info .login-date:empty {
    display: none;
}

.switch_label {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    height: 20px;
    min-width: 40px;
    background: #f4f4f4;
    border: 1px solid #d7d7d7;
    border-radius: 20px;
    font-weight: 700;
    color: #b3b3b3;
    transition: 0.2s;
}

.switch_label > span {
    font-size: 10px;
}

.switch_label .switch {
    display: none;
    position: absolute;
}

.switch_label .toggle_btn {
    position: absolute;
    top: -1px;
    left: -1px;
    display: inline-block;
    width: fit-content;
    height: 20px;
    min-width: 20px;
    border: solid 1px #d7d7d7;
    border-radius: 20px;
    background: #fff;
    color: #fff;
    transition: 0.2s;
}

.switch:checked + .toggle_btn {
    left: 20px;
    background: #ebc309;
}

#setting_alarm_layer .switch_label {
    width: 60px;
    justify-content: center;
    background-color: #e8e8e8;
    border-color: #e8e8e8;
}

#setting_alarm_layer .switch_label .toggle_btn {
    left: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ebc309;
}

#setting_alarm_layer .switch + .toggle_btn:before {
    content: "OFF";
    display: block;
}

#setting_alarm_layer .switch:checked + .toggle_btn:before {
    content: "ON";
    display: block;
}

#setting_alarm_layer .switch:checked + .toggle_btn {
    left: -1px;
}

.point-menu {
    margin: 0 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.point-menu a {
    position: relative;
    display: block;
    font-size: 14px;
    color: #616161;
    text-align: center;
    line-height: 50px;
}

.point-menu a.active {
    color: #111;
    font-weight: bold;
}

.point-menu span {
    width: 1px;
    display: inline-block;
    height: 12px;
    background: #989898;
    line-height: 15px;
    margin: 0 15px;
}

.my_point_info button {
    min-width: 60%;
    font-size: 11px !important;
}

.thick-line {
    width: 100%;
    height: 10px;
    background: #ebebeb;
}

.my_point {
    color: #111;
    font-size: 20px;
    font-weight: 500;
}

.my_point span {
    font-size: 20px;
    font-weight: bold;
}

.point-histories {
    padding: 0 10px;
}

.point-histories > div {
    padding: 20px 0 !important;
}

.point-histories.item-list.list > div .title {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: normal;
    color: #2FA254;
}

.point-histories.item-list.list > div .title span {
    color: #111;
}

.point-histories.item-list.list > div .contents {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #8e8e8e;
}

.point-histories.item-list.list > div .contents div:first-child {
    display: flex;
    align-items: center;
}

.point-histories.item-list.list > div .contents span.separate {
    width: 1px;
    height: 12px;
    margin: 2px 10px 0;
    display: block;
    background: #8e8e8e;
}

.inquiries.item-list.list {
    flex-direction: column;
}

.inquiries.item-list.list > div {
    padding: 20px 0;
}

.inquiries.item-list.list > div:first-child {
    padding-top: 0;
}

.inquiries.item-list.list .title, .alarm-list.item-list.list .title {
    display: flex;
    gap: 10px;
}

.inquiries.item-list.list .title .create_date, .alarm-list.item-list.list .title .create_date {
    color: #8e8e8e;
    font-size: 12px;
    font-weight: normal;
}

.inquiries.item-list.list .contents .sub-contents {
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
}
.category-swiper{
    margin: 10px 0;
}
.category-swiper .swiper-slide {
    width: auto;
    margin-right:20px !important;
}

.qna-category-swiper{
    margin: 10px 0;
}
.qna-category-swiper .swiper-slide {
    width: auto;
    margin-right:5px !important;
}

.alarm-list.item-list.list .checked {
    color: #8e8e8e;
}

.alarm-list.item-list.list .icon {
    margin-top: 3px;
}

.alarm-list.item-list.list .checked .icon {
    content: url(/images/alarm-check.png);
}

.alarm-list.item-list.list > div {
    padding: 20px 5px;
    background: #f9f9f9;
}

.alarm-list.item-list.list > div.checked {
    background: #fff;
}

.category-swiper .swiper-wrapper .swiper-slide {
    margin: initial;
}

#all-check-btn {
    height: 30px;
}

.subscription-contents .tip-box{
    padding:10px;
    justify-content:center;
    background:#D5ECDD66;
    gap:5px;
}
.subscription-contents .tip-box .tip-title{
    text-align:center;
}


.subscription-wrap .current-usage-wrap{
    margin: 35px 0 ;
}
.subscription-wrap .current-usage-wrap .current-usage-container{
    font-size:16px;
    line-height:25px;
    font-weight:400;
    text-align: center;
    background:#D5ECDD66;
    padding:17.5px 0;
    border-radius: 10px;
}
.subscription-wrap .current-usage-wrap .current-usage-container .current-usage{
    font-weight: 600;
}
.subscription-wrap .subscription-table{

    min-width: max-content;
}

.subscription-wrap .subscription-table, .subscription-wrap .subscription-table tr, .subscription-wrap .subscription-table th {
    border-top: none;
}
.subscription-wrap .subscription-table th, .subscription-wrap .subscription-table td {
    padding: 7px;
    background: #fff;
    border-left: none;
    border-right: none;
    font-size: 13px;
}
.subscription-wrap .subscription-table tr:nth-of-type(1) td:not(:first-of-type){
    vertical-align:top;
}

.subscription-wrap .subscription-table td .price{
    font-weight: 600;
}
.subscription-wrap .subscription-table td .rate-per{
    color:#339c52;
    font-weight:400;
}
.subscription-wrap .subscription-table td .origin-price{
    color:#CF8359;
    font-weight:400;
    text-decoration:line-through;
}

.subscription-wrap .subscription-table td .text-green{
    color:#339c52;
}

.subscription-wrap .subscription-table .benefit-row{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}


.subscription-wrap .subscription-table tbody tr:nth-child(odd){
    /*background:#D9D9D91A;*/
}

.subscription-wrap .subscription-btn.btn-orange{
    background-color:#CF8359;
    color:#FFF;
}
.subscription-wrap .subscription-btn.btn-navy{
    background-color: #404F80;
    color:#FFF;
}

.subscription-wrap .subscription-btn.btn-gray{
    background-color: #ABABAB;
    color:#FFF;
}

.subscription-wrap .subscription-notice-wrap .title{
    font-size:18px;
    font-weight: 600;
    margin-bottom:15px;
}
.subscription-wrap .subscription-notice-wrap ul li{
    position:relative;
    font-size:14px;
    font-weight:400;
    line-height: 25px;
    padding-left:10px;
}
.subscription-wrap .subscription-notice-wrap ul li:before{
    display: block;
    position: absolute;
    content: '∙';
    top:0;
    left:0;
}



.subscription-payment-layer{
    padding:15px;
}
.subscription-payment-layer.active{
    display: flex;

}
.subscription-payment-layer .layer-content{
    width:100%;
    border: 0;
    padding:5px 3px 20px 3px;
    animation: fadeOut 0.4s forwards;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE 10+ */

}
.input-form-wrapper{
    width:100%;
}
.subscription-payment-layer.active .layer-content{
    animation: fadeInUp 0.5s forwards;
}

.subscription-payment-layer .input-form{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.subscription-payment-layer .input-wrap{

    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transform: translateY(20px);


}
.subscription-payment-layer.active .input-wrap{
    display: flex;
    flex-wrap:wrap;
    animation: fadeInUp 0.5s forwards;
}


.subscription-payment-layer .input-label{
    font-size: 14px;
    font-weight:600;
    line-height: 1.4;
    margin-bottom:3px;
    width:140px;
}

.subscription-payment-layer .input-wrap input,
.subscription-payment-layer .input-wrap select{
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    width: auto;
    max-width:100%;
    border: 1px solid #D6D6D6;
    background-color: #FFF;

    line-height: 24px;
    letter-spacing: -0.01em;
    /* color: #ABABAB; */
    color: #000;
    border-radius: 5px;
    padding: 7px;
}
.subscription-payment-layer .input-wrap input::placeholder{
    font-size: 14px;
    font-weight:500;
}

.subscription-payment-layer .layer-buttons{
    opacity: 0;
}
.subscription-payment-layer.active .layer-buttons{
    animation: fadeInUp 0.7s forwards;
    animation-delay: 0.7s;
}

.subscription-payment-layer .product-info{

    background: #D5ECDD66;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding:15px;
    margin-bottom:10px;
    border-radius: 10px;
}

.subscription-payment-layer .input-wrap:nth-of-type(1) { animation-delay: 0.1s; }
.subscription-payment-layer .input-wrap:nth-of-type(2) { animation-delay: 0.2s; }
.subscription-payment-layer .input-wrap:nth-of-type(3) { animation-delay: 0.3s; }
.subscription-payment-layer .input-wrap:nth-of-type(4) { animation-delay: 0.4s; }
.subscription-payment-layer .input-wrap:nth-of-type(5) { animation-delay: 0.5s; }
.subscription-payment-layer .input-wrap:nth-of-type(6) { animation-delay: 0.6s; }


.subscription-payment-layer .layer-content::-webkit-scrollbar {
    display: none;              /* Chrome, Safari, Opera */
}

@media (max-width: 435px) {
    .subscription-payment-layer br{
        display:none;

    }
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}


/*
8. 더보기
*/

.terms-list.item-list.list > div, .version-list.item-list.list > div {
    padding: 27px 0;
}

.terms-list.item-list.list .title, .version-list.item-list.list .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
}

/*
@media all and (min-width: 1080px) {
    #container > * {
        max-width: 1080px;
        margin: 0 auto;
    }
}*/

@media all and (max-width: 359px) {
    .item-list.campaign {
        width: 100%;
        display: grid;
        grid-template-columns: 100%;
        gap: 0 10px;
    }
}

.chameleon-b.gray {
    color: #8e8e8e;
}

.chameleon-b.red {
    color: #e62a2a;
}

.popup-box {
    display: none;
    position: fixed;
    top: calc(50% - 200px);
    left:5%;
    width: 90%;
    height: auto;
    padding: 16px 21px;
    border-radius: 10px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
    border: solid 1px #d7d7d7;
    background-color: #fff;
    z-index: 10010;
    white-space: nowrap;
}
.community-box .popup-box{
    top: calc(50% - 100px);
}


.popup-box .popup-header{
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin-bottom:15px;
}
.popup-box .popup-header .title{
    white-space:pre-line;
    line-height: 1.5;
}
.popup-box .popup-body{
    width:100%;
    margin-bottom:15px;
}

.popup-box .keyword-list-box{

    max-height:230px;
    font-size:12px;
    padding: 15px 10px;
    border: 1px solid #d0d0d0;
}
.popup-box .keyword-list-box .keyword-list-view{
    max-height: 200px;
    overflow-y: auto;
}
.popup-box .keyword-list-box .keyword-list-wrap{
    margin-bottom:10px;
    cursor: default;
}

.popup-box .keyword-list-box .keyword-item{
    padding:4px 10px;
    cursor:pointer;

}
.popup-box .keyword-list-box .keyword-title{
    margin-bottom:5px;
}
.popup-box .keyword-list-box .keyword-item.active{
    background-color: #2FA254;
    color:#fff;
}
.popup-box .select-category-area{
    display:flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding : 10px 0;
    border: 1px solid #d0d0d0;
    margin-top: 10px;
    font-size:12px;
}
.popup-box .select-category-area .after{
    color:#2FA254;
}


.popup-box .popup-footer .button-box{
    text-align: center;
}

.popup-box .submit-btn {
    width: auto;
    height: 26px;
    padding: 6px 10px;
    border-radius: 5px;
    background-color: #353535;
    display: inline-block;
    text-align: center;
    font-size: 13px;
    color: #fff;
}
.popup-box#info_popup{
    top:calc(50% - 300px);
    max-height: 600px;
    overflow-y: auto;
}
.popup-box#info_popup p{
    white-space: normal;
    line-height: 1.5;
    word-break: keep-all;
    margin-bottom:20px;
}
.popup-box#info_popup p .point{
    color :#2FA254;
}

.popup-box#info_popup .btn{
    margin:0;
    border-radius:0 !important;
    width:100%;

}


.popup-box.check_popup{
    max-width:unset;
}
.popup-box.check_popup p{
    line-height:2;
}
.popup-box.check_popup .popup-body {
    font-size: 13px;
    white-space: normal;
}
.popup-box.check_popup .popup-body p{
    line-height: 1.5;
}
.popup-box.check_popup .button-box{
    margin-top:10px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.popup-box.check_popup .submit-btn{
    background-color:#2FA254;
    width:100%;
    height:unset;
    padding:12px 10px;
}


.dimmed{
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    background-color: rgba(0,0,0,0.7);
    display: none;
    z-index: 10002;
}



.mypage-wrapper .alarm-switch-button {
    cursor: pointer;
    width: 80px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
    border-radius: 13px;
    background-color: #e8e8e8;
    font-size: 12px;
    font-weight: 700;
    color: #b3b3b3;
}

.mypage-wrapper .alarm-switch-button .active-button {
    position: absolute;
    top: 0;
    width: 40px;
    height: 26px;
    border-radius: 13px;
    border: solid 1px #e6e6e6;
    background-color: #ebc309;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 24px;
}
.mypage-wrapper .alarm-switch-button .active-button.on {
    left: 0;
}
.mypage-wrapper .alarm-switch-button .active-button.off {
    right: 0;
}

.title-list-wrapper .supporting-start-btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.title-list-wrapper .supporting-start-btn {
    padding: 0px 30px;
    white-space: nowrap;
    width: auto;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    background-color: #fdd000;
    font-size: 12px;
    font-weight: 600;
    color: #484848;
}



#table_notice {
    border: solid 1px #e3e3e3;
    background-color: #f9f9f9;
    margin-top: 10px;
    padding: 8px;
    line-height: 1.2;
}

#table_notice .key_str {
    font-size: 16px;
    font-weight: bold;
}

.notify {
    padding-left: 15px;
    font-size: 14px !important;
    /*color: #6e6e6e;*/
    color: #000;
    word-break: keep-all;
    line-height: 1.5;
}

.notify.mark {
    display: flex;
    gap: 5px;
}

.notify.mark:before {
    content: "!";
    display: inline-block;
    color: #ec1010;
    font-weight: bold;
}

.write-buttons {
    margin-top:-5px;
    margin-bottom:15px;
    text-align:right;
}
.write-buttons .community-write-btn{
    line-height: 20px;
    padding: 6px 10px;
    border-radius: 5px;
    background-color: #2FA254;
    font-size: 13px;
    font-weight:600;
    color: #fff;
}

.community-back-btn{
    background-color: #f4f4f4;
    border: 1px solid #d7d7d7;
    color:#111;
    font-size:12px;
    padding:6px 10px;
    border-radius:5px;
}

.blog-history .cal-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
}
.blog-history .cal-title .cal_current{
    font-size: 17px;
    font-weight: 500;
}

.blog-history .cal-title .cal_btn{
    width:20px;
    height:20px;
}
.blog-history .cal-title .cal_btn img{
    width:100%;
}

.blog-history .cal-title{
    margin-top:20px;
}

.blog-history table td{
    padding: 8px 0 5px;
    text-align:center;
}
.blog-history table tbody tr:nth-of-type(7) td,
.blog-history table tbody tr:nth-of-type(14) td
{
    padding:5px 0;
}
.blog-history table tbody tr:nth-of-type(14) td,
.blog-history table tbody tr:nth-of-type(28) td {
    border-bottom:1px solid;

}




.blog-history .modal-section.modal-body{
    margin-top:26px;
}
.blog-history .point{
    font-weight:bold;
}

.blog-history .point.plus{
    color:#eb1b1b;
}
.blog-history .point.minus{
    color:#258ce4;
}

.blog-history .success:before{
    content:'V';
    color:#2FA254;
}
.blog-history .fail:before{
    content:'X';
    color:#eb1b1b;
}
.blog-history .info-text{
    font-size:11px;
    color:#858585;
}
.blog-history .total{
    width:100%;
    height: 40px;
    margin: 19px 0 14px;
    padding: 12px 13px;
    background-color: #cbe9d4;
    text-align:center;
    font-weight: bold;
}


.layer-box.blog-history{
    width: 100%;
}
.layer-box.blog-history .layer-contents .table-wrap{
    /*max-height:700px;*/
    overflow:unset;
}

.blog-history .table-wrap .basic-table tbody tr{
    transition: unset;
}



.blog-history .history-wrapper{
    display:flex;
    gap:15px;
    flex-direction:column;
    padding-right:5px;
}

.blog-history .history-wrapper .title{
    text-align: center;
    margin: 10px 0;
    font-size: 16px;
    font-weight: 600;
}

.blog-history .history-wrapper .history-list{
    width:100%;

}
.layer-box.blog-history .layer-contents .history-list .table-wrap{
    max-height:unset;
    overflow:unset;
}
.layer-box.blog-history .layer-contents .history-list .table-wrap td{
    cursor:pointer;
}
.blog-history .history-wrapper .history-detail tr.active{
    background:#d5ecdd;
}
.layer-box.blog-history .layer-contents .history-list .paging{
    margin:20px 0;
}
.blog-history .history-wrapper .history-detail{
    width:100%;

}


.mobile-scroll-notice{
    display:inline-block;
    width:100%;
    text-align:center;
    font-size:12px;
    font-weight:bold;
}


.keyword_input_box{
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    background-color: white;
    padding: 16px;
    border-radius: 10px;

    display: flex;
    align-items: center;

    gap: 15px;

    z-index: 1002;

    display: none;


    /* align-items: flex-start; */

}
.keyword_input_box input[type='text'] {
    width: auto;
    height: 40px;
    padding: 10px;
    border-radius: 5px;
    border: solid 1px #e3e3e3;
    background-color: #fff;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 500;
    outline: none;
}

.keyword_input_box > div{
    display: flex;
    gap: 10px;
    align-items:center;
}


.keyword_input_box button{
    background-color: transparent;
    width: 26px;
    height: 26px;
    border: 0;
    cursor: pointer;
}

.keyword_input_box button img{
    width: 100%;
}


#campaign_keyword{
    background-color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 1002;
}
#campaign_keyword input[type='text'] {
    width: auto;
    height: 40px;
    padding: 5px 10px;
    border-radius: 5px;
    border: 2px solid #2FA254;
    background-color: #fff;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: 500;
    outline: none;
}

#campaign_keyword > div{
    display: flex;
    gap: 10px;
    align-items:center;
}

#campaign_keyword .form-wrap .form.form-group.input > #campaign_search_btn {
    position: absolute;
    right: 0;
    top: 7px;
    width: auto;
    height: 20px;
    border-radius: 50px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
}

#campaign_keyword .form-wrap .form.input input[type=text] {
    border-radius: 50px;
    background-color: #ffffff;
}


#campaign_keyword button{
    background-color: transparent;
    width: 26px;
    height: 26px;
    border: 0;
    cursor: pointer;
}

#campaign_keyword button img{
    width: 100%;
}

.campagin_search_result{
    opacity: 0;
}

.campaign-list-box {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 25px 13px;
    border-top: 1px solid #000;
    padding-top:13px;

}


.campaign-list-box .campaign-item-wrapper {
    width: calc((100% / 2) - (13px / 2));
    height: auto;
    display: flex;
    flex-direction: column;
}

.campaign-item-wrapper .campaign-item {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}
.campaign-item-wrapper .campaign-item .thumbnail {
    width: 100%;
    aspect-ratio: auto 1/1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: cover;
}
.campaign-item-wrapper .campaign-item .type-box {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.campaign-item-wrapper .campaign-item  .channel {
    display: flex;
    align-items: center;
    gap: 4px;
}
.campaign-item-wrapper .campaign-item .channel-icon {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}
.campaign-item-wrapper .campaign-item .channel-icon.insta {
    background-image: url('/images/c-insta@3x.png');
}
.campaign-item-wrapper .campaign-item  .channel-icon.blog {
    background-image: url(/images/c-blog@3x.png);
}
.campaign-item-wrapper .campaign-item .channel-icon.youtube {
    background-image: url(/images/c-youtube@3x.png);
}
.campaign-item-wrapper .campaign-item .channel-icon.etc {
    background-image: url(/images/icon-etc-gray.png);
}

.campaign-item-wrapper .campaign-item .channel-name {
    font-size: 12px;
    color: #111;
    font-weight: 600;
}
.campaign-item-wrapper .campaign-item .type-box .channel .d-day {
    /*font-size: 13px;
    color: #111;
    font-weight: 600;*/
    color: #000;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing:-0.7px;
}
.campaign-item-wrapper .campaign-item .type-box .site {
    display: flex;
    align-items: center;
    gap: 5px;
}
.campaign-item-wrapper .campaign-item .type-box .site .site-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}
.campaign-item-wrapper .campaign-item .type-box .site .site-icon.revu {
    background-image: url('/images/icon-revu.png');
}
.campaign-item-wrapper .campaign-item .type-box .site .site-name {
    /*font-size: 13px;
    color: #777;
    font-weight: 600;*/
    color: #6E6E6E;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: -0.7px;
}
.campaign-item-wrapper .campaign-item .title-box {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /*margin-bottom: 18px;*/
    /*margin: 14px 0 16px;*/
    margin: 0 0 8px;
}
.campaign-item-wrapper .campaign-item .title-box .title {
    /*font-size: 18px;
    color: #111;
    font-weight: 700;
    line-height: 1.54;*/
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: -0.9px;
    height:50px;
}
.campaign-item-wrapper .campaign-item .title-box .explanation {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /*font-size: 13px;
    color: #989898;
    font-weight: 500;*/
    color: #707070;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    height:18px;
}
.campaign-item-wrapper .campaign-item .option-box {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.campaign-item-wrapper .campaign-item .option-box .apply-count-wrap{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:30px;
}
.campaign-item-wrapper .campaign-item .option-box .apply-count {
    font-size: 12px;
    color: #111;
    font-weight: 700;
    margin-left:auto;
}

.campaign-item-wrapper .campaign-item .option-box .options {
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.campaign-item-wrapper .campaign-item .option-box .options li {
    width: auto;
    height: 20px;
    border-radius: 10px;
    background-color: #e9e9e9;
    text-align: center;
    font-size: 12px;
    color: #9c9c9c;
    padding: 3px 12px;
}





.intro-container{
    width: 100%;
    height: auto;
    display: flex;
    justify-content:center;
    gap: 100px;
    padding: 25px 5px 50px;
}

.intro-container .intro-contents{
    max-width:1000px;
}
.intro-container .intro-contents .title-main-image{
    width:100%;
    text-align:center;
    margin-bottom:17px;
}
.intro-container .intro-contents .title-main-image img{

}
.intro-container .intro-contents .contents-header{
    font-size: 19px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
    color: #111;
    word-break: keep-all;
}
.intro-container .intro-contents .contents-header .sub-text{
    font-size: 17px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
    color: #111;
    margin-top:24px;
}

.intro-container .intro-contents .contents-body{
    width:100%;
    margin-top:30px;
    text-align: center;
}
.intro-container .intro-contents .contents-item{
    width:100%;
    margin-bottom: 60px;
}

.intro-container .intro-contents .contents-body .image{
    margin-bottom: 35px;
}
.intro-container .intro-contents .contents-body .image img{
    width:100%;

}

.intro-container .intro-contents .contents-body .inner-title{
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 37.5px;
    color: #111111;
    margin-bottom: 25px;
    word-break: keep-all;
}

.intro-container .intro-contents .contents-body .inner-title .highlight{
    font-size: 28px;
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.39;
    letter-spacing: normal;
    text-align: center;
    color: #2FA254;

}
.intro-container .intro-contents .contents-body .inner-text .description{
    text-align: center;
    word-break: keep-all;

}
.intro-container .intro-contents .contents-body .inner-text .description li{
    display: flex;
    align-items:  center;
    justify-content: flex-start;
    gap: 5px;
    font-size: 14px;
    line-height: 2;
    position:relative;
}
.intro-container .intro-contents .contents-body .inner-text .description li span{
    display: inline-block;
    width:fit-content;
    text-align: left;
}
.intro-container .intro-contents .contents-body .inner-text .description li::before{
    content: '';
    display:block;
    width:20px;
    height:20px;
    background: url('/images/con-list@3x.png') no-repeat center center/100%;
    word-break: keep-all;
    margin-top: 5px;
    margin-bottom:auto;

}


.intro-container .last-message {
    font-size: 22px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.36;
    letter-spacing: normal;
    text-align: center;
    color: #111;
    margin-bottom: 20px;
}

.intro-contents.use .contents-body .contents-item{
    margin-bottom: 45px;
}
.intro-contents.use .contents-body .contents-item:last-of-type{
    margin-bottom:0;
}
.intro-contents.use .contents-body .contents-item .title{
    font-size: 22px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.38;
    letter-spacing: normal;
    text-align: center;
    color: #111;
    padding:20px 0;
}
.intro-contents.use .contents-body .contents-item .description{

    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
    color: #111;
    word-break:keep-all;
}

.intro-contents.use .contents-body .contents-item .description{
    text-align:center;
}
.intro-contents.use .contents-body .contents-item .description ul.green-box li{
    width:fit-content;
    border-radius: 20px;
    background-color: rgba(48,162,84,0.2);
    padding:11px 21px;
    margin:10px auto 15px;
    font-size: 15px;
    font-weight: 500;
}
.intro-contents.use .contents-body .contents-item .description ul.service-box{
    display:flex;
    flex-wrap:wrap;
    align-items: center;
    gap:20px;
    justify-content: center;
}
.intro-contents.use .contents-body .contents-item .description ul.service-box li{
    display:flex;
    align-items: center;
    justify-content: center;
    width : 100%;
    /*height:120px;*/
    padding: 10px 8px;
    border-radius: 20px;
    border: 1px solid #dedede;
    box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.08);
    background-color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
    color: #111;
    word-break: keep-all;
}

.intro-contents.use .contents-body .contents-item .description ul.service-box li:last-of-type{
    width: 100%;
    height:unset;
    border:unset;
    box-shadow: unset;
    font-size : 18px;
    font-weight: 700;
}

.intro-contents.use .contents-body .contents-item .description ul.three-box{
    display:flex;
    align-items: center;
    gap:20px;
    flex-wrap:wrap;
    justify-content: center;
}
.intro-contents.use .contents-body .contents-item .description ul.three-box li{
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    border-radius: 30px;
    border:1px solid #898989;
    font-weight: 500;
    font-size:16px;
    line-height: 1.53;
    padding: 8px 0;
}

.intro-contents.use .contents-body .contents-item .description ul.three-box li.green-bg{
    color:#fff;
    background: #2FA254;
    border: none;
}

.intro-contents.use .contents-body .contents-item .how-to-wrap .title{
    font-size: 20px;
    padding-bottom: 19px;
    border-bottom: 1px solid #313131;
    text-align: left;
}

.intro-contents.use .contents-body .contents-item .how-to-wrap .how-to-item{
    padding:12px 6px;
}
.intro-contents.use .contents-body .contents-item .how-to-wrap .how-to-item .item-title{
    font-size: 16px;
    font-weight: 500;
    /*display: flex;
    align-items: flex-start;
    gap:14px;*/
    margin-bottom: 17px;
}
.intro-contents.use .contents-body .contents-item .how-to-wrap .how-to-item .item-title .number{
    width: 60px;
    height: 30px;
    background-color: #0d682a;
    padding: 5px 0 ;
    color:#fff;
    border-radius: 30px;
    margin-bottom:10px;
}
.intro-contents.use .contents-body .contents-item .how-to-wrap .how-to-item .item-title .description{
    font-size: 15px;
    line-height: 30px;
    font-weight: 500;
    text-align: left;
    word-break: keep-all;
    flex:1;
}
.intro-contents.use .contents-body .contents-item .how-to-wrap .how-to-item .item-title .sub{
    font-weight: 400;
    font-size: 14px;
}
.intro-contents.use .contents-body .contents-item .how-to-wrap .how-to-item .item-title .description .button{
    font-size: 13px;
    font-weight: 600;
    padding : 4px 14px;
    border-radius: 5px;
    margin:0 8px 0 0 ;
    display:inline-block;
    line-height:1.7;
}
.intro-contents.use .contents-body .contents-item .how-to-wrap .how-to-item .item-title .description .button.green{
    background: #2FA254;
    color: #fff;
}
.intro-contents.use .contents-body .contents-item .how-to-wrap .how-to-item .item-title .description .button.yellow{
    background: #fdd000;
    color: #111111;
}
.intro-contents.use .contents-body .contents-item .how-to-wrap .how-to-item .item-title .description .button.gray{
    border:1px solid #ddd;
}
.intro-contents.use .contents-body .contents-item .how-to-wrap .how-to-item .item-title .description .button .img-next{
    display: inline-block;
    margin-left: 3px;
    width:13px;
    height:7px;
    background: url('/images/icon-next-arrow.png') no-repeat center center/cover;
}


.intro-contents.use .contents-body .contents-item .how-to-wrap .how-to-item .item-image img{
    width:100%;
    margin-bottom: 10px;
}

.introduction-wrap .grade-info{
    margin-top: 26px;
    padding: 20px 24px;
    background: #F6F6F6;
    border-radius: 10px;
}
.introduction-wrap .grade-info .subject{
    font-size: 16px;
    margin-bottom: 25px;
    font-weight: bold;
}
.introduction-wrap .grade-info .grade-list{
    display: flex;
    gap: 20px 52px;
    align-items: center;
    flex-wrap: wrap;
}
.introduction-wrap .grade-info .grade-item{
    display: flex;
    align-items: center;
    gap:10px;
    font-size: 14px;
    color: #6E6E6E;
}
.introduction-wrap .grade-info .grade-item .icon{
    width:36px;
    height:36px;
    border-radius: 100%;
    color: #fff;
    font-size:18px;
    font-weight:600;
    text-align: center;
    line-height: 36px;
}
.introduction-wrap .grade-info .grade-item.grade-s .icon{
    background-color: #CF5D44;
}
.introduction-wrap .grade-info .grade-item.grade-a .icon{
    background-color: #F08362;
}
.introduction-wrap .grade-info .grade-item.grade-b .icon{
    background-color: #8F8FBE;
}
.introduction-wrap .grade-info .grade-item.grade-c .icon{
    background-color: #79BB9F;
}
.introduction-wrap .grade-info .grade-item.grade-d .icon{
    background-color: #A5A5A5;
}
/*.introduction-wrap .grade-info .grade-item .icon:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size:26px;
}
.introduction-wrap .grade-info .grade-item.grade-s .icon:after{
    content
}*/

.solution-list{
    display: flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}
.solution-list .solution-item{
    display:flex;
    align-items: center;
    justify-content: space-between;
    width: calc(50% - 10px);
    height: 220px;
    padding: 20px;
    background: no-repeat center / 100% 100%;
    border-radius: 20px;
}
.solution-list .solution-item:nth-of-type(1){
    background-image: url("/images/intro/section4-bg1.png");
}
.solution-list .solution-item:nth-of-type(2){
    background-image: url("/images/intro/section4-bg2.png");
}
.solution-list .solution-item:nth-of-type(3){
    background-image: url("/images/intro/section4-bg3.png");
}
.solution-list .solution-item:nth-of-type(4){
    background-image: url("/images/intro/section4-bg4.png");
}
.solution-list .solution-item .icon{
    width: auto;
    height: 40px;
}
.solution-list .solution-item .text-wrap .title{
    font-size: 16px;
    letter-spacing: -0.5px;
    line-height: 25px;
    font-weight: 700;
    margin-bottom: 15px;
}
.solution-list .solution-item .text-wrap .description{
    font-size: 13px;
    letter-spacing: -0.5px;
    line-height: 1.5;
    font-weight: 400;
    color: #6E6E6E;
}
.solution-list .solution-item .icon img{
    width:100%;
}

.headhunter-wrap > div {
    background: #72b3b4;
    padding: 28px 20px;
    border-radius: 20px;
    align-items: flex-start;
}
.headhunter-wrap .introduction-wrap .subject {
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: -0.5px;
}

.headhunter-wrap .introduction-wrap .description {
    margin-top: 15px;
    font-size: 13px;
    line-height: 1.5;
}

.headhunter-wrap .introduction-wrap .subject, .headhunter-wrap .introduction-wrap .description {
    color:#fff;
}

.headhunter-wrap .image-wrap{
    /*width:300px;
    height:300px;
    background-image: url(/images/intro/section5-bg.png);
    background-repeat: no-repeat;
    background-position: 0;
    background-size: cover;
    background-color: #72b3b4;*/
}
.headhunter-wrap .icon-wrap{
    position:relative;
    /*width:320px;*/
    display:flex;
    justify-content: center;
    gap:20px;
}
.headhunter-wrap .icon-wrap .icon-human{
    position:relative;
    width:70px;
    height: 130px;
}
.headhunter-wrap .icon-wrap .icon-human-head{
    position: absolute;
    width: 34px;
    height: 34px;
    background: #6E6E6E;
    box-shadow: 6px 5px 4px rgba(0, 0, 0, 0.6);
}

.headhunter-wrap .icon-wrap .icon-human .icon-human-head{
    position:absolute;
    background: #6E6E6E;
    width: 34px;
    height: 34px;
    border-radius:100%;
    box-shadow: 6px 5px 4px rgba(0, 0, 0, 0.6);
    z-index:2;
    top:0;
    left:15px;
}
.headhunter-wrap .icon-wrap .icon-human.yellow .icon-human-head{
    background:#E0C34C;
}
.headhunter-wrap .icon-wrap .icon-human .icon-human-body{
    position:absolute;
    width: 62px;
    height: 31px;
    background-color: #6E6E6E;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    box-shadow: 6px 7px 4px rgba(0, 0, 0, 0.7);
    z-index:1;
    top:35px;
}
.headhunter-wrap .icon-wrap .icon-human.yellow .icon-human-body{
    background:#E0C34C;
}
.headhunter-wrap .icon-wrap .reading-glass{
    position:absolute;
    top: -21px;
    left: -24px;
    content: '';
    background: url(/images/intro/reading-glass-img.png) no-repeat center center/contain;
    width: 148.11px;
    height: 175px;
}



.border{
    border:1px solid #484848;
}
.border-1{border-width :1px;}
.border-2{border-width :2px;}
.border-3{border-width :3px;}
.border-4{border-width :4px;}

.blog-history .grade-text-wrap {
    display: flex;
    align-items: center;
    justify-content:center;
    gap: 8px;
}
.blog-history table td{
    padding: 8px 0 5px;
    text-align:center;
}

.blog-history .graph {
    display: inline-block;
    position: relative;
    width: 13px;
    height: 25px;
    min-width: 13px;
    border: 1px solid #d3d3d3;
    background-color: #ececec;
}


.blog-history .graph .percent {
    position: absolute;
    bottom: 0px;
    left: -1px;
    width: 13px;
    max-height: 23px;
    background-image: linear-gradient(to top, #13973d, #3ce370);
}

.blog-history .point{
    font-weight:bold;
}

.blog-history .point.plus{
    color:#eb1b1b;
}
.blog-history .point.minus{
    color:#258ce4;
}

.blog-history .success:before{
    content:'V';
    color:#2FA254;
}
.blog-history .fail:before{
    content:'X';
    color:#eb1b1b;
}

.blog-history.table-wrap {
    max-height: 300px;
}

.blog-history .share-area .total {
    flex: 1;
    height: 100%;
    margin: 0;
    background-color: #cbe9d4;
    padding: 15px 10px;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    word-break: keep-all;
    line-height: 1.5;
}

.blog-history .share-area .total > div{
    /*margin-bottom:10px;*/
}

.blog-history .share-area .total > div{
    margin-bottom:unset;
}
.blog-history .share-area .total .grade-info{
    margin-bottom:10px;
}
.blog-history .share-area .total .grade-increase-info{
    display:flex;
    gap:10px;
    flex-wrap: wrap;
}
.blog-history .share-area .total .grade-increase-info .item{
    /*flex-direction:column;*/
}
.blog-history .share-area .total .diagnosis{
    border-radius:5px;
}
.blog-history .share-area .posting-support-btn,
.blog-history .share-area .diagnosis{
    width:100%;
    padding: 5px;
}

.blog-history .share-area .total > div:last-of-type {
    margin-bottom: unset;
}

.blog-history .share-area .share-button {
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: #39a154;
    color: #fff;
    border: 0;
    outline: 0;
    cursor: pointer;
    margin: 10px 0;
}

.blog-history{
    max-height: 80vh;
    margin-top:10px;
    gap: 15px;
}

.blog-history .layer-contents {
    max-height: 80vh;
    overflow: auto;
}
.blog-history .share-area .posting-support-btn {
    flex:1;
    min-height: 40px;

    border-radius: 5px;
    background-color: #39a154;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.blog-history .share-area .diagnosis {
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex:1;
    min-height:40px;
    background: #fdd000;

    font-size: 13px;
    border: 0;
    border-radius: 5px;
}

.blog-history .share-area .posting-support-btn img {
    width: 7px;
    height: 11px;
}


.blog-history .share-area .grade-increase-info .item{
    display:flex;
    width:100%;
    align-items:center;
    gap: 5px;
    margin-bottom: 5px;
}
.blog-history .share-area .arrow-icon img{
    transform:rotate(90deg);
    width:100%;
    max-width:30px;
}



#content .effect.mo.red_pas {
    background-image: linear-gradient(65deg,
            #75b8ff,
            #ff8080,
            #75b8ff,
            #ff8080,
            #75b8ff,
            #ff8080);
    background-size: 800% 550%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    border: 0;
    border-radius: 10px;
    color: white;
    font-weight: bold;
}

#content .effect.mo.yellow {
    background-image: linear-gradient(65deg,
            #36a253,
            #babd00,
            #36a253,
            #babd00,
            #36a253,
            #babd00);
    background-size: 800% 550%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    color: white;
}
#content .effect.mo.red {
    background-image: linear-gradient(65deg,
            #FB0E0E,
            #6C3EEA,
            #FB0E0E,
            #6C3EEA,
            #FB0E0E,
            #6C3EEA);
    background-size: 800% 550%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
}
#content .effect.mo.orange {
    background-image: linear-gradient(65deg,
    #ffe600,
    #ef3d19,
    #ffe600,
    #ef3d19,
    #ffe600,
    #ef3d19);
    background-size: 800% 550%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
}


#content .effect.mo.shine {
    background-image:unset;
    background-image: linear-gradient(65deg,
            #36a253,
            #0cd43e,
            #36a253,
            #0cd43e,
            #36a253,
            #0cd43e);
    background-size: 800% 550%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
}


#content .effect.mo{
    animation: rotate 15s infinite linear, bright 2s infinite linear;
}


.modal-area .effect.mo{
    animation: rotate 15s infinite linear, bright2 2s infinite linear;
}
@keyframes rotate {
    0% {
        background-position: 0% 0%;
    }

                100% {
        background-position: 100% 100%;
    }
                
}

@keyframes bright {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.15);
    }
    100% {
        filter: brightness(1);
    }
}
@keyframes bright2 {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.1);
    }
    100% {
        filter: brightness(1);
    }
}


.modal.diagnosis .view-missing-image{
    color:#7786ff;
    font-weight: 500;
    text-decoration: #7786ff underline;

}
.modal.diagnosis .missing-image-text{
    margin-top:5px;
    font-size:14px;
    word-break: keep-all;
    line-height: 1.25;
}
.missing-image-text .popup-box{
    width:100%;
    top:0;
    left:0;
    height:100%;
    overflow-y:auto;
}
.missing-image-text .popup-box img{
    display:inline-block;
    width:100%;
    max-width:600px;
    border:1px solid #d0d0d0;
    margin-bottom:10px;
}


.review-wrap .form-title > *{
    width:100%;

}


.my_point_info .point-row{
    width:100%;
    text-align:center;
}
.my_point_info .point-row .point-inner{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: flex-start;
    width:100%;
    max-width:280px;
    padding: 35px 0 20px 0;
    margin: 0 auto;
}
.my_point_info .point-row:last-of-type{
    background-color: #f9f9f9;
    padding: 35px 0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.my_point_info .point-row:last-of-type .my_point{
    display:flex;
    align-items:center;
}

.my_point_info .point-avail {
    /* margin-left: 10px; */
    line-height: 20px;
    text-align: center;
    padding: 3px 5px;
    background-color: #e1e1e1;
    font-size: 12px;
    margin:6px auto 0;
    width:fit-content;
}
.my_point_info .point-avail.avail{
    color:#2FA254;
}
.my_point_info .point-avail.no-avail{
    color:#ea1515;
}

.my_point_info .calc-icon{
    margin-top:12px;
}
.my_point_info .calc-icon img{
    width:30px;
    height:30px;
}

.quation_mark {
    display: inline-flex;
    position: relative;
}

.quation_mark .mark_string {
    display: inline-flex;
    color: green;
    border: 1px solid green;
    border-radius: 100%;
    width: 10px;
    height: 10px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 8px;

}

.quation_mark_content {
    display: none;
    background: rgba(0, 0, 0, .7);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    z-index: 100001;
}
.quation_mark_box{
    background-color: white;
    width: 80vw;
    /* white-space: nowrap; */
    padding: 10px;
    border: 1px solid #000;
    border-radius: 10px;
    line-height: 1.6;
    text-align: start;
    position: relative;
    font-size: 11px;
    
}

.quation_close_btn img{
    width: 50%;
}
.quation_close_btn{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -10px;
    right: -10px;
    height: 20px;
    width: 20px;
    background-color: #000;
    border-radius: 100%;
    
}



.content_history_paging {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    gap: 5px;
}

.content_history_paging .content_history_item:hover,
.content_history_paging .content_history_item.active {
    background-color: #2FA254;
    color: white;
}

.content_history_paging .content_history_item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: 1px solid #2FA254;
    background-color: transparent;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    color: #2FA254;
    transition: .2s;
}


.analysis-contents .blog-grade-table {
    width: 100%;
    margin-top:5px;
}
.analysis-contents .blog-grade-table th {
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    border: 1px solid #d3d3d3;
    vertical-align: middle;
    padding:0;
    height:25px;
}
.analysis-contents .blog-grade-table th.normal {
    background-color: #363636;
}
.analysis-contents .blog-grade-table th.base {
    background-color: #223ee5;
}
.analysis-contents .blog-grade-table th.top {
    background-color: #ef3d19;
}
.analysis-contents .blog-grade-table td {

    color: #111;
    border: 1px solid #d3d3d3;
    vertical-align: middle;
    text-align:center;
    height:20px;
    font-size:9px;
}

.analysis-contents .blog-grade-table td{
    position:relative;
}
.analysis-contents .blog-grade-table td.current-grade:after{
    content:'';
    position:absolute;
    width:20px;
    height:20px;
    bottom:-25px;
    left:-10px;
    background: url('/images/arrow-top-edit.png') no-repeat center center/cover ;
}
.analysis-contents .support-btn-wrap{
    display:flex;
    gap:10px;
    align-items: center;
    margin-top : 15px;
}
.analysis-contents .support-btn-wrap .btn{
    width:100%;
    border-radius: 5px;
}


.analysis-contents .gradeup-tip {
    padding-right:15px;
}


.analysis-contents .gradeup-tip .question-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    border: 2px solid #00b050;
    border-radius: 100%;
    width: 24px;
    color:#00b050;
    font-weight: 600;
    height: 24px;
    cursor:pointer;
}

.tooltip {
    position: relative;
}

.tooltip .speech-bubble {
    display: none;
    position: absolute;
    left: calc(50% - 30px);
    transform: translate(50%, -50%);
    top: 50%;
    width: 184px;
    height: auto;
    border-radius: 4px;
    background: #FFFFFF;
    padding: 16px;
    box-shadow: 8px 8px 20px 8px #00000012;
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: -0.03em;
    opacity: 1;
    z-index: 1000;
}

.tooltip.active .speech-bubble {
    display: block;
}
.tooltip img{
    width:20px;
    height:20px;

}

.tooltip .speech-bubble .triangle {
    position: absolute;
    top: -11px;
    left: 50%;
    z-index: 1999;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.analysis .tooltip .speech-bubble{
    /*left: 33px;
    top: -40px;*/
    transform:unset;
}

.analysis .by-type-analysis .by-type .contents-list {
    width: 100%;
    gap: 10px;
    margin-top: 19px;
}

.analysis .by-type-analysis .by-type .contents-list .contents-item {
    width: 100%;
    height: 50px;
    padding: 12px 18px;
    gap: 10px;
    background: #FFFFFF;
    border-radius: 10px;
    align-items: center;
}

.analysis .by-type-analysis .by-type .contents-list .contents-item .label {
    width: 80px;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.36px;
    color: #000;
}

.analysis .by-type-analysis .by-type .contents-list .contents-item .progress-bar {
    width: 150px;
    height: 26px;
    position: relative;
}

.analysis .by-type-analysis .by-type .contents-list .contents-item .progress-bar .child {
    height: 26px;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
}

.analysis .by-type-analysis .by-type .contents-list .contents-item.orange .progress-bar .child {
    background-color: #E85A13;
}

.analysis .by-type-analysis .by-type .contents-list .contents-item.blue .progress-bar .child {
    background-color: #77A2CA;
}

.analysis .by-type-analysis .by-type .contents-list .contents-item.green .progress-bar .child {
    background-color: #79BB9F;
}

.analysis .by-type-analysis .by-type .contents-list .contents-item.gray .progress-bar .child {
    background-color: #A5A5A5;
}

.analysis .by-type-analysis .by-type .contents-list .contents-item .percentage {
    font-size: 14px;
    font-weight: 400;
    line-height: 19.36px;
    color: #000;
}



.popup-box#gradeup_tip_popup{
    display:none;
    width:100%;
    height: 100%;
    position:fixed;
    top:0px;
    left: 0;
    border-radius: 0px;
    padding:0 7px;
    background:#fff;
}
.popup-box#gradeup_tip_popup .popup-body{
    padding:20px 0 10px 0;
    height: calc(100% - 60px);
    overflow-y:auto;
    margin:0;
}
.popup-box#gradeup_tip_popup .popup-footer{
    height:60px;
    border-top:1px solid #d0d0d0;
    display:flex;
    align-items: center;
    justify-content: center;
}
#gradeup_tip_popup .tip-contents{
    padding:20px 0;
    border-bottom : 1px dashed #000;
}
#gradeup_tip_popup .tip-contents:first-of-type{
    padding-top:0;
}
#gradeup_tip_popup .tip-contents:last-of-type{
    border-bottom:none;
    padding-bottom:0;
}
#gradeup_tip_popup .tip-contents p{
    line-height:1.8;
    font-weight:500;
    white-space: normal;
    word-break: keep-all;
}
.text-green{
    color:#2FA254;
}
.text-orange{
    color:#E85A13;
}
#gradeup_tip_popup .text-red{
    color:#ef3d19;
}
#gradeup_tip_popup .text-blue{
    color:#223ee5;
}
#gradeup_tip_popup .text-green{
    color:#00b050;
}

.analysis-category-row{
    display:none;
}
.analysis-category-toggle-btn{
    display:inline-block;
    padding:3px 9px;
    background:#00b050;
    border-radius: 5px;
    font-size:12px;
    font-weight:500;
    color:#fff;
    cursor:pointer;
    margin: 0 5px;
}
.analysis-category-toggle-btn .icon{
    width:unset;
    height:unset;
    display:inline-block;
    border-left: 5px solid #00b050;
    border-right: 5px solid #00b050;
    border-bottom: 9px solid #fff;
}
.analysis-category-toggle-btn.active .icon{
    transform:rotate(180deg);
}

.analysis-category-toggle-btn .text:after{
    content: '자세히보기 열기';
}
.analysis-category-toggle-btn.active .text:after{
    content: '자세히보기 닫기';
}

.box-contents .video {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 2px 2.5px 5.2px 2px rgba(0, 0, 0, 0.20);
}

.box-contents .video #control {
    position: absolute;
    bottom: 13px;
    right: 9px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
    border-radius: 50%;
}

.box-contents .video #control[data-control="pause"]:after {
    content: "";
    display: block;
    width: 4px;
    height: 14px;
    border-left: 4px solid #000;
    border-right: 4px solid #000;
}

.box-contents .video #control[data-control="play"]:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #000;
}

.up-blog-list {
    width: 100%;
    height: 215px;
    overflow-y: scroll;
    padding-right: 10px;
}

.up-blog-list .up-blog {
    width: 100%;
    height: 76px;
    padding: 14px 10px 14px 0;
    align-items: center;
    border-bottom: 1px solid #D6D6D6;
    cursor: unset;
}
.up-blog-list .up-blog:first-of-type{
    padding-top:0;
}


.up-blog-list .up-blog .blog-title {
    display: flex;
    max-width:60%;
}

.up-blog-list .up-blog .blog-title .title {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
    letter-spacing: -0.9px;
}

.up-blog-list .up-blog .blog-title .blog-date {
    color: #6E6E6E;
    font-size: 11px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.65px;
}

.up-blog-list .up-blog .change-grade {
    display: flex;
    gap: 12px;
    align-items: center;
}

.up-blog-list .up-blog .change-grade .grade-box{
    text-align: center;
}

.up-blog-list .up-blog .change-grade .grade-box > span.text {
    display: block;
    font-size: 10px;
    color: #333;
    text-align: center;
    line-height: 1.5;
}

.up-blog-list .up-blog .change-grade .grade {
    border-radius: 50%;
    /*color: #FFF;*/
    text-align: center;
    font-weight: 700;
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -0.985185px;
    position: relative;
}

.up-blog-list .up-blog .change-grade .grade .plus {
    font-size: 16px;
    position: absolute;
    top: 0;
    right: -10px;
}

.up-blog-list .up-blog .change-grade .grade.gray {
    color: #B1B1B2;
}

.up-blog-list .up-blog .change-grade .grade.green {
    color: #81B8AF;
}

.up-blog-list .up-blog .change-grade .grade.orange {
    color: #F08362;
}

.up-blog-list .up-blog .change-grade .grade.red {
    color: #E16458;
}

.up-blog-list .up-blog .change-grade .grade.purple {
    color: #8F8FBE;
}

.up-blog-list .up-blog .change-grade img {
    width: 16px;
    height: 15px;
}
.blog-grade-text.grade_na{
    color :#CDCDCD;
}
.blog-grade-text.grade_d{
    color :#A5A5A5;
}
.blog-grade-text.grade_c{
    color :#79BB9F;
}
.blog-grade-text.grade_b{
    color :#8F8FBE;
}
.blog-grade-text.grade_a{
    color :#F08362;
}
.blog-grade-text.grade_s{
    color :#CF5D44;
}

.blog-grade-bg.grade_na{
    background-color :#CDCDCD;
}
.blog-grade-bg.grade_d{
    background-color :#A5A5A5;
}
.blog-grade-bg.grade_c{
    background-color :#79BB9F;
}
.blog-grade-bg.grade_b{
    background-color :#8F8FBE;
}
.blog-grade-bg.grade_a{
    background-color :#F08362;
}
.blog-grade-bg.grade_s{
    background-color :#CF5D44;
}


.blog-levels .level.current.grade_na .circle::before {color:#CDCDCD; border-color:#CDCDCD !important;}
.blog-levels .level.current.grade_d .circle::before {color:#A5A5A5; border-color:#A5A5A5 !important;}
.blog-levels .level.current.grade_c .circle::before {color:#79BB9F; border-color:#79BB9F !important;}
.blog-levels .level.current.grade_b .circle::before {color:#8F8FBE; border-color:#8F8FBE !important;}
.blog-levels .level.current.grade_a .circle::before {color:#F08362; border-color:#F08362 !important;}
.blog-levels .level.current.grade_s .circle::before {color:#CF5D44; border-color:#CF5D44 !important;}

.blog-levels .level.current.grade_na .grade .grade_name {color:#CDCDCD;}
.blog-levels .level.current.grade_d .grade .grade_name {color:#A5A5A5;}
.blog-levels .level.current.grade_c .grade .grade_name {color:#79BB9F;}
.blog-levels .level.current.grade_b .grade .grade_name {color:#8F8FBE;}
.blog-levels .level.current.grade_a .grade .grade_name {color:#F08362;}
.blog-levels .level.current.grade_s .grade .grade_name {color:#CF5D44;}

.blog-levels .level .circle.active {background-color:#fff !important;}
.blog-levels .level.grade_na .circle {background-color:#CDCDCD;}
.blog-levels .level.grade_d .circle {background-color:#A5A5A5;}
.blog-levels .level.grade_c .circle {background-color:#79BB9F;}
.blog-levels .level.grade_b .circle {background-color:#8F8FBE;}
.blog-levels .level.grade_a .circle {background-color:#F08362;}
.blog-levels .level.grade_s .circle {background-color:#CF5D44;}

.tag-area{
    width:100%;
    height: 68px;
    border: 1px solid #D6D6D6;
    background:#fff;
    font-size: 14px;
    font-weight: 400;
    line-height:22px;
    letter-spacing: -0.01em;
    color: #000;
    border-radius: 5px;
    padding: 10px 15px;
    overflow-y:auto;
}
.contents-inner.posting .tag-area{
    width: calc( 100% - 127px);
}
.tag-area:focus,
.tag-area:hover{
    border-color:#2FA254;
}
.tag-area:focus:hover,
.tag-area:hover:focus{
    border-width:2px;
}

.tag-area .tag-input-wrap{
    display: inline-block;
    margin: 0 2px 5px 0;
}
.tag-area .tag-input-wrap:before{
    content:'#';
    font-size:14px;
    font-weight:400;
    color:#000;
}


.tag-area .tag-input-wrap .tag-input{
    border: none !important;
    color: #000;
    background: none !important;
    display: inline-block;
    font-size: 14px;
    height: 14px !important;
    line-height: 14px;
    min-height: 14px;
    outline: none;
    overflow-y: hidden !important;
    padding:0 !important;
}
.tag-area .tag-input-wrap .tag-input::placeholder{
    font-size:14px !important;
    font-weight:400;
    color:#000;
}
.tag-area .tag-box{
    background-color: #eee;
    border-radius: 5px;
    display: inline-block;
    margin: 0 5px 6px 0;
    padding: 2px 7px;
    word-wrap: break-word;
    word-break: break-all;
}

.tag-area .tag-box.active{
    background: #2FA254;
    color:#fff;
}



span.icon-new{
    position:relative;;
}
span.icon-new:after {
    position: absolute;
    content: 'NEW';
    display: block;
    width: auto;
    left: 0;
    top: 0;
    background: #2FA254;
    color: #fff;
    padding: 0 9px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
}

.info-icon{
    display: block;
    background: url(/images/dashicons_info.svg) no-repeat center center / cover;
    width: 24px;
    height: 24px;
}
.recommend_tr .left span:not(.badge):not(.keyword-text) {
    display: none;
}

.recommend_tr .left br {
    display: none;
}

.keyword-more-btn:after{
    content:'더보기';
}
.keyword-more-btn.active:after{
    content:'접기';
}


.expect-area{
    display:flex;
    flex-direction:column;
    gap : 15px;
}

.expect-wrapper{
    padding:10px;
    background: #F6F6F6;
    border-radius: 10px;
    width:100%;
}
.expect-area .expect-wrap{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:5px;
    flex:1
}

.expect-area .expect-wrap:not(:first-of-type):after{
    display: block;
    content: '';
    position: absolute;
    width:100%;
    height: 2px;
    background: #d0d0d0;
    top: 0;
    left: 0;
}
.expect-area .expect-wrap .expect-subject{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}
.expect-area .expect-wrap .expect-subject .title{
    color: #000;
    font-size: 14px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: -0.05em;
}
.expect-area .expect-wrap .expect-value{
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.05em;
}
.expect-area .expect-wrap .expect-value.blue{
    color:#77A2CA;
}
.expect-area .expect-wrap .expect-value.orange{
    color:#E85A13;
}

.expect-area .expect-wrap .number-container {
    display: inline-flex;
    gap: 1px;
}

.expect-area .expect-wrap .digit {
    display: inline-block;
    transition: transform 0.7s ease, opacity 0.7s ease;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform-style: preserve-3d;
}
.expect-area .expect-wrap .digit.animate {
    transform: translateY(-10px);
    opacity: 0;
}

.expect-area .expect-wrap .digit.flip {
    transform: rotateX(-90deg);
}
.expect-area .expect-wrap .digit.scale {
    transform: scale(1.8);
}
.expect-area .expect-wrap .digit.flip-up {
    transform: rotateX(-90deg);
    opacity: 0;
}
.expect-area .expect-wrap .digit.flip-down {
    transform: rotateX(-90deg);
    opacity: 0;
}

.expect-range-container{
    width:100%;
}
.expect-range-container .tooltip .speech-bubble{
    left: calc(100% - 70px);
}
/*.rescript-popup .expect-range-container{
    display: flex;
    align-items: center;
}
.rescript-popup .expect-range-container .label{
    width:110px;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.05em;
}
.rescript-popup .expect-area{
    flex:1;
    padding: 25px;
    height:unset;
}*/

.get-keyword-layer .expect-range-container .query-box{
    margin-bottom: 15px;
}
.get-keyword-layer  .expect-area{
    padding: 0;
    height:unset;
}
.get-keyword-layer .expect-wrapper{
    padding:5px;
}
.bubble-container {
    display:none;

    position: absolute;
    width: 300px;
    z-index: 10002;
    transform: translate(50%, -50%);
    left: calc(50% - 300px);
    bottom: 45px;
}
.bubble-container .bubble {
    display: block;
    position: relative;
    background-color: rgb(255, 255, 255);

    border-radius: 15px;
    border: 5px solid #bbb;
    width: auto;
    max-width: 402px;
    z-index: 3;
    padding:15px 10px 30px;

}
.bubble-container .close-btn{
    position:absolute;
    top:10px;
    right:10px;
    cursor:pointer;

}
.bubble-container .bubble-contents{
    margin:10px 0;
}
.bubble-container .bubble-contents p{
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}
.bubble-container .bubble-buttons{
    text-align:center;
}

.bubble-container .bubble-buttons .basic-btn{
    width: 100%;
    height: 44px;
    line-height: 44px;
    border-radius: 8px;
}



.bubble-container .pointer {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 41px 10px 0;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -40px;
    left: 138px;
}
.bubble-container .pointerBorder {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 50px 15px 0;
    border-color: #bbb transparent;
    display: block;
    width: 0;
    bottom: -45px;
    left: 138px;
    z-index: 0;
}

.loading-video-box {
    display:none;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    overflow: hidden;
}
.loading-video-box video{
    max-height:300px;
}
.free-tip-box {
    padding:10px;
    text-align:center;
    font-weight:600;
    display:flex;
    flex-direction:column;
    gap: 10px;
}
.free-tip-box .btn{
    display:inline-flex;
}
.border-table th,
.border-table td{
    border: 1px solid #B7B7B7 !important;
}
.history-container{
    width: 100%;
    height: auto;
    max-height:420px;
}
.history-container .history-wrapper{
    width:100%;
    overflow-y:auto;
    max-height: 280px;
}