@import 'loading.css';
.displaynone{
    display: none !important;
}
select {
    width: auto;
    height: 40px;
    border-radius: 5px;
    border: solid 1px #d7d7d7;
    background-color: #fff;
    padding: 8px 10px;
    font-size: 14px;
    color: #111;
}

.input-wrap {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.input-wrap label {
    width: 100px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

input[type='text'], input[type='password'], input[type='number'] {
    width: auto;
    height: 40px;
    padding: 10px;
    border-radius: 5px;
    border: solid 1px #e3e3e3;
    background-color: #fff;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 500;
    outline: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-check-wrap {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    gap: 7px;
}
.input-check-wrap input[type='checkbox'] {
    display: none;
}
.input-check-wrap input[type='checkbox'] + .check-box {
    flex: 0 0 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("/images/icon-input-check-bg-gray.png");
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}
.input-check-wrap input[type='checkbox']:checked + .check-box::after{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("/images/icon-input-check-bg.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.input-circle-check-wrap {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.input-circle-check-wrap input[type='checkbox'] {
    display: none;
}
.input-circle-check-wrap input[type='checkbox'] + .check-box {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("/images/icon-circle-check-gray.png");
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}
.input-circle-check-wrap input[type='checkbox']:checked + .check-box::after{
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("/images/icon-circle-check.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.input-circle-check-wrap input[type='radio'] {
    display: none;
}
.input-circle-check-wrap input[type='radio'] + .check-box {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("/images/icon-circle-check-gray.png");
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}
.input-circle-check-wrap input[type='radio']:checked + .check-box::after{
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("/images/icon-circle-check.png");
    background-size: contain;
    background-repeat: no-repeat;
}

/*모달*/

.modal-wrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 20000;
}
.modal-wrap .modal {
    position: absolute;
    top: 50%;
    left: 50%;
    width:100%;
    transform: translate(-50%, -50%);
    /*padding: 30px 30px 60px;*/
    padding: 30px;
    height: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.11);
    border: solid 1px #e3e3e3;
    background-color: #fff;
    border-radius: 10px;
}
.modal-wrap#terms_modal .modal{
    max-height:800px;
    overflow:auto;
}
.modal .modal-section {
    width: 100%;
    height: auto;
}

.modal .modal-close-btn {
    position: absolute;
    top: -20px;
    right: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #111;
    border-radius: 50%;
}
#terms_modal .modal .modal-close-btn {
    top: 10px;
    right: 10px;
}
.modal .modal-close-btn img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
.modal .modal-section {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.modal .modal-section table {
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 14px;
    color: #111;
}
.modal .modal-section table tr {
    border-bottom: 1px solid #e3e3e3;
}
.modal .modal-section table thead tr {
    height: 60px;
    background-color: #f9f9f9;
}
.modal .modal-section table tbody tr {
    height: 30px;
}
.modal .modal-section table th {
    border: 1px solid #e3e3e3;
    border-top: 1px solid #111;
    vertical-align: middle;
    font-weight: bold;
    line-height:1.25;
}
.modal .modal-section table td {
    border: 1px solid #e3e3e3;
    vertical-align: middle;
}

.modal.diagnosis {
    max-width: 700px;
}
.modal.diagnosis .modal-header {
    margin-bottom: 25px;
    font-size: 20px;
    font-weight: 700;
    color: #111;
}
.modal.diagnosis .modal-body .recommended-title {
    width: 100%;
    padding:10px;
    /*height: 40px;*/
    line-height: 1.3;
    margin-bottom: 20px;
    padding-left: 19px;
    border-radius: 5px;
    background-color: #30a254;
    font-size: 16px;
    color: #fff;
}
.modal.diagnosis .diagnosis-table td:first-child {
    text-align: left;
    padding-left: 13px;
}
.modal.diagnosis td .analysis-box {
    width: 100%;
    position: relative;
    /*height: 30px;
    line-height: 30px;*/
    padding:5px 0;
}
.modal.diagnosis td .analysis-box.inadequate {
    background-color: #ffe4bc;
}
.modal.diagnosis td .analysis-box.suitable {
    background-color: #d1e3ef;
}
.modal.diagnosis td .analysis-box.good {
    background-color: #d1e3ef;
}
.modal.diagnosis td .analysis-box.normal {
    background-color: #d4be00;
}

.modal.diagnosis td .analysis-box.explanation {
    border:1px solid #afafaf;
    cursor: pointer;
    border-radius:5px;
}
.modal.diagnosis td .analysis-box.explain_view {
    background-color: #fff5a4;
}

.modal.diagnosis td .analysis-box.explanation.active .explanation-box {
    display: block;
    cursor: initial;
    overflow:auto;
}
.modal.diagnosis td .analysis-box.explanation .explanation-box {
    display: none;
    position: absolute;
    /*bottom: 0;*/
    bottom: 50%;
    transform: translateY(50%);
    /*right: -320px;*/
    left:90px;
    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;
}
.modal.diagnosis td .analysis-box.explanation .explanation-box .box{
    white-space: pre-line;
    word-break: keep-all;
    text-align: left;
    height:100%;

}
.modal.diagnosis tr td:last-of-type{
    padding:5px 10px;
}
/*
.analysis-box.explanation .explanation-box .triangle {
    position: absolute;
    top: 50%;
    left: -20px;
    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;
}
*/

.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;
}
.analysis-box.explanation.active .triangle {
    display:block;
}



/*헤더*/

header {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e3e3e3;
}

header .header-inner {
    width: 1300px;
    height: 100%;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-inner .header-inner-section {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-inner .header-inner-section .header-logo {
    width: 36px;
    height: 60px;
}

.header-inner .header-inner-section .header-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-inner .header-inner-section .category-wrap {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-inner .header-inner-section .category-wrap img {
    width: 40px;
    height: 40px;
}

.header-inner .header-inner-section .category-wrap span {
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.header-inner .header-inner-section .header-menus {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-inner .header-inner-section .header-menus .menu-item {
    width: auto;
    height: 100%;
}

.header-inner .header-inner-section .header-menus .menu-item .menu-item-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

.header-inner .header-inner-section .header-menus .menu-item .menu-item-inner .icon {
    width: 40px;
    height: 40px;
}

.header-inner .header-inner-section .header-menus .menu-item .menu-item-inner .menu-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.header-inner .header-inner-section .header-menus .menu-item .menu-item-inner .alarm-count {
    position: absolute;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #339c52;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    border-radius: 50%;
    top: 0;
    right: 0;
}

/*푸터*/

footer {
    width: 100%;
    min-width: 1300px;
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
}

footer .footer-inner {
    width: 1300px;
    height: 100%;
    padding: 40px 0 56px;
    display: flex;
    align-items: flex-start;
    gap: 70px;
}

.footer-inner .footer-logo {
    width: 150px;
    height: 50px;
}

.footer-inner .footer-logo a {
    width: 100%;
    height: 100%;
}

.footer-inner .footer-logo a img {
    width: 100%;
    height: 100%;
}

.footer-inner .footer-info {
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.footer-inner .footer-info .footer-menus {
    width: auto;
    height: 50px;
    display: flex;
    align-items: center;
}

.footer-inner .footer-info .footer-menus .menu-item {
    width: auto;
    height: 100%;
    padding: 16px 0;
}

.footer-inner .footer-info .footer-menus .menu-item:after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #c6c6c6;
}

.footer-inner .footer-info .footer-menus .menu-item:last-child:after {
    width: 0;
    height: 0;
}

.footer-inner .footer-info .footer-menus .menu-item a {
    font-size: 16px;
    color: #616161;
    font-weight: 600;
    padding: 0 20px;
}

.footer-inner .footer-info .footer-menus .menu-item a.point {
    color: #111;
    font-weight: 700;
    padding-left: 0;
}

.footer-inner .footer-info .infos {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
}

.footer-inner .footer-info .infos .info {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    color: #676767;
}

.footer-inner .footer-info .infos .info .info-item {
    width: auto;
    height: 100%;
}

.footer-inner .footer-info .infos .info.items .info-item:after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    margin: 0 10px;
    background-color: #c6c6c6;
}

.footer-inner .footer-info .infos .info.items .info-item:last-child:after {
    width: 0;
    height: 0;
    margin: 0;
}

.footer-inner .footer-info .infos .copyright {
    color: #b6b6b6;
}

/*컨텐츠*/
#wrap {
    width: 100%;
    height: auto;
}
#wrap #content {
    width: 100%;
    min-width: 1300px;
    height: auto;
}

#wrap #content.analysis {
    background-image: url("/images/concon_bg.png");
    background-size: 3000px;
    background-position: center 0;
    background-repeat: no-repeat;
}

#wrap #content .content-inner {
    margin: 0 auto;
    width: 1300px;
    height: auto;
}

/*지수조회*/
.check-blog-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 30px 0 58px;
    min-height: 76.5vh;
}
.check-blog-wrapper .wrapper-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}
.check-blog-wrapper .wrapper-header .title {
    font-size: 24px;
    font-weight: 700;
    color: #111;
}
.check-blog-wrapper .holding-point-box {
    display: flex;
    align-items: center;
    gap: 10px;
}
.check-blog-wrapper .holding-point-box .icon {
    width: 20px;
    height: 20px;
}
.check-blog-wrapper .holding-point-box .holding-point {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.check-blog-wrapper .section {
    width: 100%;
    height: auto;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.11);
    border: solid 1px #e3e3e3;
    background-color: #fff;
}
.check-blog-wrapper .section-title {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
}
.check-blog-wrapper .section .section-inner {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}
.blog-analysis-inquiry {
    position: relative;
    margin-bottom: 60px;
}
.blog-analysis-inquiry .accordion-active-btn {
    position: absolute;
    bottom: -36px;
    right: 40px;
    width: 170px;
    height: 36px;
    background-color: #e5bf0e;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.blog-analysis-inquiry .accordion-active-btn:hover {
    background-color: #cfab06;
}
.blog-analysis-inquiry .accordion-active-btn .icon {
    width: 11px;
    height: 7px;
}
.blog-analysis-inquiry .accordion-active-btn.inactive .icon.inactive {
    display: block;
}
.blog-analysis-inquiry .accordion-active-btn.inactive .icon.active {
    display: none;
}
.blog-analysis-inquiry .accordion-active-btn.active .icon.inactive {
    display: none;
}
.blog-analysis-inquiry .accordion-active-btn.active .icon.active {
    display: block;
}

.blog-analysis-inquiry .inquiry-form {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 100%;
    height: 40px;
}

.blog-analysis-inquiry .inquiry-form .form-header {
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.blog-analysis-inquiry .inquiry-form .form-body {
    display: flex;
    align-items: center;
    gap: 10px;
}



.inquiry-form .form-body input {
    width: 260px;
    background-color: #f5f5f5;
}

.inquiry-form .form-body .inquiry-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 40px;
    border-radius: 5px;
    background-color: #30a254;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
}

.inquiry-form .form-body .id-save-btn {
    display: inline-block;
    text-align: center;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    background-color: #9a9a9a;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
}

.inquiry-form .form-body .inquiry-btn .point {
    font-weight: 700;
}

.blog-analysis-inquiry .inquiry-caution {
    display: none;
}

.blog-analysis-inquiry .inquiry-caution.active {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px 0 0 10px;
    border-top: 1px solid #e3e3e3;
    margin-top: 30px;
}

.blog-analysis-inquiry .inquiry-caution .caution-header {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}
.blog-analysis-inquiry .inquiry-caution .caution {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: #111;
    margin-bottom:10px;
}
.blog-analysis-inquiry .inquiry-caution .caution .caution-item {
    display: flex;
    align-items: center;
}
.blog-analysis-inquiry .inquiry-caution .caution .caution-item:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #39a154;
    margin: 0 10px 0 6px;
}

.blog-analysis-inquiry .inquiry-caution .caution .caution-item .point {
    font-weight: 700;
}
.blog-analysis-inquiry .inquiry-caution .caution .caution-item .point.red {
    color: #ec1010;
}
.blog-analysis-inquiry .inquiry-caution .blog-grade-table {
    width: 490px;
    height: 60px;
    margin-left: 22px;
    border: 1px solid #d3d3d3;
    text-align: center;
}
.blog-analysis-inquiry .inquiry-caution .blog-grade-table tr {
    width: 100%;
    height: 30px;
}
.blog-analysis-inquiry .inquiry-caution .blog-grade-table th {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    border: 1px solid #d3d3d3;
    vertical-align: middle;
}
.blog-analysis-inquiry .inquiry-caution .blog-grade-table th.normal {
    background-color: #363636;
}
.blog-analysis-inquiry .inquiry-caution .blog-grade-table th.base {
    background-color: #223ee5;
}
.blog-analysis-inquiry .inquiry-caution .blog-grade-table th.top {
    background-color: #ef3d19;
}
.blog-analysis-inquiry .inquiry-caution .blog-grade-table td {
    font-size: 14px;
    color: #111;
    border: 1px solid #d3d3d3;
    vertical-align: middle;
}


.section.analysis-contents .plus{
    color:red;
}
.section.analysis-contents .minus{
    color:blue;
}

.analysis-contents {
    margin-bottom: 60px;
}
.analysis-contents-table {
    width: 100%;
    height: auto;
    text-align: left;
}
.analysis-contents-table tr {
    border-top: 1px solid #e3e3e3;
    height: 50px;
}
.analysis-contents-table tr:first-child {
    border-top: 1px solid #111;
}
.analysis-contents-table th {
    width: 274px;
    vertical-align: middle;
    padding-left: 10px;
    font-size: 16px;
    color: #111;
    font-weight: 700;
}
.analysis-contents-table td {
    font-size: 16px;
    color: #111;
    vertical-align: middle;
    padding:13px 0;
}
.analysis-contents-table td .comment {
    font-size: 14px;
    color: #8e8e8e;
}
.analysis-contents-table td .inner {
    display: flex;
    align-items: center;
    gap: 12px;
}
.analysis-contents-table td .inner .grade-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
}
.analysis-contents-table td .inner .grade-wrap .mark-red {
    background-color: #ef3d19;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    width: 26px;
    height: 18px;
    text-align: center;
    vertical-align: middle;
}
.analysis-contents-table td .inner .posting-support-btn:hover {
    background-color: #086721;
}
.analysis-contents-table td .inner .posting-support-btn {
    width: 340px;
    height: 50px;
    border-radius: 5px;
    background-color: #39a154;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.analysis-contents-table td .inner .posting-support-btn img {
    width: 7px;
    height: 11px;
}

.recent-contents-analysis .section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.recent-contents-analysis .more-btn {
    display: inline-block;
    line-height: 40px;
    width: 300px;
    height: 40px;
    border-radius: 20px;
    border: solid 1px #d1d1d1;
    background-color: #fff;
    font-size: 14px;
    font-weight: 700;
    color: #111;
    text-align: center;
}
.recent-contents-analysis-table {
    width: 100%;
    height: auto;
    border-top: 1px solid #111;
    text-align: center;
}
.recent-contents-analysis-table thead tr {
    background-color: #f9f9f9;
    height: 60px;
    font-size: 14px;
    font-weight: 700;
    color: #111;
}
.recent-contents-analysis-table tbody tr {
    height: 50px;
    background-color: #fff;
    font-size: 14px;
    color: #111;
}
.recent-contents-analysis-table tr {
    border-bottom: 1px solid #e3e3e3;
}
.recent-contents-analysis-table th {
    vertical-align: middle;
    line-height: 1.29;
}
.recent-contents-analysis-table td {
    vertical-align: middle;
}
.recent-contents-analysis-table td:nth-child(2) {
    text-align: left;
    padding-left: 10px;
}
.recent-contents-analysis-table td .comprehensive {
    width: 60px;
    height: 50px;
    color: #fff;
    line-height: 50px;
}
.recent-contents-analysis-table td .comprehensive.good {
    background-color: #1f75e1;
}
.recent-contents-analysis-table td .comprehensive.bad {
    background-color: #f87e3f;
}
.recent-contents-analysis-table td .comprehensive.less-good {
    background-color: #d4be00;
}
.recent-contents-analysis-table td .comprehensive.unexposed {
    background-color: #272727;
}
.recent-contents-analysis-table td .collecting {
    color: #8e8e8e;
}
.recent-contents-analysis-table td .concon-ranking {
    background-color: #36a253;
    width: 123px;
    height: 50px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.recent-contents-analysis-table td .concon-ranking .ranking{
    font-size:13px;
}
.recent-contents-analysis-table td .concon-ranking .comment {
    font-size: 12px;
    color: #75ed94;
}
.recent-contents-analysis-table td .naver-ranking {
    background-color: #cae2d0;
    width: 85px;
    height: 50px;
    line-height: 50px;
}
.recent-contents-analysis-table td .diagnosis {
    color: white;
    font-weight: bold;
    display: inline-block;
    line-height: 30px;
    width: 50px;
    /*height: 30px;*/
    /*border: solid 1px #afafaf;*/
    /*background-color: #fff;*/
    /*color: #111;*/
    background: #fdd000;
    /* color: #484848; */
    border:2px solid #484848;
    border-radius: 2px;
    font-size: 13px;
    border: 0;
    border-radius: 10%;
}

/*로그인*/
.login-form-wrapper {
    width: 600px;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 60px 0 570px;
}
.login-form-wrapper .wrapper-header {
    width: 100%;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    color: #111;
    border-bottom: 1px solid #313131;
}
.login-form-wrapper .wrapper-body {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 50px 70px;
    gap: 20px;
}

.login-form-wrapper .wrapper-body .input-wrap input {
    width: 100%;
    height: 50px;
}

input:hover {
    border: 1px solid #e5bf0e;
}

input:focus {
    outline: 1px solid #e5bf0e;
}

.login-form-wrapper .wrapper-body .input-wrap.certify {
    position: relative;
    display: none;
}
.login-form-wrapper .wrapper-body .input-wrap .button, .info-input-box .button {
    width: 150px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 5px;
    border: solid 1px #30a254;
    background-color: #30a254;
    font-size: 15px;
    color: #fff;
}
.login-form-wrapper .wrapper-body .input-wrap .button.disabled, .info-input-box .button.disabled{
    border: solid 1px #868686;
    background-color: #868686;
}
.login-form-wrapper .wrapper-body .input-wrap.certify .button, .info-input-box.certify .button {
    border: solid 1px #fdd000;
    background-color: #fdd000;
}
.login-form-wrapper .wrapper-body .input-wrap.certify .button.complete, .info-input-box .button.complete {
    border: solid 1px #868686;
    background-color: #868686;
}
.login-form-wrapper .wrapper-body .input-wrap.certify .timer {
    position: absolute;
    top: 50%;
    right: 140px;
    transform: translateY(-50%);
    font-size: 13px;
    color: #f00;
}

.login-form-wrapper .wrapper-body .login-btn-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 30px;
}
.login-form-wrapper .wrapper-body .login-btn-wrap #find_password_form_submit, .login-form-wrapper .wrapper-body .login-btn-wrap #change_password_form_submit {
    background-color: #868686;
}
.login-form-wrapper .wrapper-body .login-btn-wrap #find_password_form_submit.active, .login-form-wrapper .wrapper-body .login-btn-wrap #change_password_form_submit.active {
    background-color: #36a253;
}
.login-form-wrapper .wrapper-body .login-btn-wrap .btn {
    width: 100%;
    height: 50px;
    background-color: #36a253;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 50px;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
}
.login-form-wrapper .wrapper-body .login-btn-wrap .btn:hover {
    background-color: #00bb33;
}

.login-form-wrapper .wrapper-body .login-comment-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.login-form-wrapper .wrapper-body .login-comment-wrap .find-password-btn {
    border-bottom: 1px solid #111;
    font-size: 13px;
    color: #111;
    line-height: 1.54;
    font-weight: 700;
}

.login-form-wrapper .wrapper-body .login-comment-wrap .checkbox-label {
    font-size: 13px;
    color: #8e8e8e;
}

/*메인*/


.campaign-filter-wrapper {
    width: 100%;
    height: auto;
    margin-bottom: 40px;
}
.campaign-filter-wrapper .section {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #e3e3e3;
}
.campaign-filter-wrapper .section.filter-header {
    display: flex;
    align-items: center;
    justify-content: center;
}
.section.filter-header .concon-box-open-wrap {
    width: 100px;
    height: 70px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 10px;
}
.section.filter-header .concon-box-open-wrap .concon-box {
    font-size: 20px;
    font-weight: 900;
    color: #30a254;
}
.section.filter-header .status-menus {
    width: 1200px;
    height: 70px;
    display: flex;
    align-items: center;
}
.section.filter-header .status-menus .status-item {
    width: calc(1200px / 7);
    height: 100%;
}
.section.filter-header .status-menus .status-item.active {
    border-bottom: 5px solid #fdd000;
}
.section.filter-header .status-menus .status-item .inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #777;
}
.section.filter-header .status-menus .status-item.active .inner {
    color: #111;
    font-weight: 700;
}
.section.filter-header .status-menus .status-item .inner .count {
    font-family: Roboto;
}
.section.filter-body {
    display: none;
}
.section.filter-body.active {
    display: block;
}
.section.filter-body .filter-table {
    width: 1300px;
    height: auto;
    margin: 0 auto;
    border-left: 1px solid #e3e3e3;
    border-right: 1px solid #e3e3e3;
}
.section.filter-body .filter-table tr {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #e3e3e3;
}
.section.filter-body .filter-table tr:last-child {
    border-bottom: none;
}
.section.filter-body .filter-table td {
    width: auto;
    height: 100%;
    vertical-align: middle;
}
.section.filter-body .filter-table th + td {
    width: 96px;
}
.section.filter-body .filter-table th {
    width: 106px;
    height: 100%;
    font-size: 16px;
    color: #111;
    vertical-align: middle;
}

.section.filter-body .filter-table th,
.section.filter-body .filter-table td{
    padding: 15px 0;
}
.section.filter-body .filter-table .inner {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #777;
    box-sizing: border-box;
}
.section.filter-body .filter-table .input-check-wrap {
    gap: 10px;
}
.section.filter-body .filter-table .filter-label-box {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #777;
}
.section.filter-body .filter-table .input-check-wrap.active {
    font-weight: 700;
    color: #111;
}
.section.filter-body .filter-table .filter-label-box .filter-icon {
    margin-right: 5px;
    width: 20px;
    height: 20px;
}
.section.filter-body .filter-table .alarm-show-icon {
    width: 11px;
    height: 7px;
    margin-right: 10px;
    cursor: pointer;
}
.section.filter-body .filter-table .alarm-show-icon.on {
    transform: rotate(180deg);
}
.section.filter-body .filter-table .alarm-count {
    display: inline-block;
    width: 30px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    background-color: #339c52;
    color: #fff;
    font-size: 13px;
    font-family: Roboto;
    text-align: center;
    font-weight: 700;
    margin-right: 10px;
}

.section.filter-body .filter-table .bell-box {
    display: inline-block;
    position: relative;
}
.section.filter-body .filter-table .bell-box .bell-icon {
    width: 23px;
    height: 26px;
    cursor: pointer;
}
.section.filter-body .filter-table .bell-box .alarm-setting-box {
    display: none;
    position: absolute;
    top: 42px;
    right: -24px;
    width: auto;
    height: auto;
    padding: 32px 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: 10000;
    white-space: nowrap;
}
.section.filter-body .filter-table .bell-box .alarm-setting-box.active {
    display: block;
}
.alarm-setting-box .triangle {
    position: absolute;
    top: -17px;
    right: 28px;
    width: 0;
    height: 0;
    border-bottom: 9px solid #fff;
    border-top: 9px solid transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    z-index: 1000;
}
.alarm-setting-box .triangle.border {
    position: absolute;
    top: -20px;
    right: 27px;
    width: 0;
    height: 0;
    border-bottom: 10px solid #d7d7d7;
    border-top: 10px solid transparent;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    z-index: 900;
}
.alarm-setting-box .setting-header-section {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    height: 26px;
    margin-bottom: 25px;
}
.alarm-setting-box .setting-header-section .setting-header {
    font-size: 18px;
    font-weight: 700;
    color: #111;
}
.alarm-setting-box .setting-header-section .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;
}
.alarm-setting-box .setting-header-section .alarm-switch-button .active-button.on {
    left: 0;
}
.alarm-setting-box .setting-header-section .alarm-switch-button .active-button.off {
    right: 0;
}
.alarm-setting-box .setting-header-section .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;
}
.alarm-setting-box .setting-body-section {
    width: 100%;
    height: auto;
    padding-left: 12px;
    margin-bottom: 35px;
}

.alarm-setting-box .setting-body-section .settings {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.alarm-setting-box .setting-body-section .settings .setting-item {
    width: 100%;
    height: 26px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.alarm-setting-box .setting-body-section .settings .setting-item .setting-title {
    width: 105px;
    font-size: 14px;
    color: #111;
    font-weight: 600;
}
.alarm-setting-box .setting-body-section .settings .setting-item select {
    width: auto;
    height: 26px;
    padding: 0 5px;
    line-height: 1;
}
.alarm-setting-box .setting-body-section .settings .setting-item .weeks {
    width: auto;
    height: 26px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.alarm-setting-box .setting-body-section .settings .setting-item .weeks .week {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: solid 1px #d7d7d7;
    background-color: #fff;
    display: inline-block;
    line-height: 25px;
    text-align: center;
    font-size: 14px;
    color: #b3b3b3;
}
.alarm-setting-box .setting-body-section .settings .setting-item .weeks .week.active {
    border-radius: 5px;
    border: solid 1px #ebc309;
    background-color: #ebc309;
    color: #fff;
}
.alarm-setting-box .setting-body-section .settings .setting-item .form-box {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: 26px;
}
.alarm-setting-box .setting-body-section .settings .setting-item .form-box input {
    width: auto;
    height: 26px;
    border-radius: 5px;
    border: solid 1px #d7d7d7;
    background-color: #fff;
    padding: 0 5px;
    line-height: 1;
    font-size: 12px;
    color: #b3b3b3;
}
.alarm-setting-box .setting-body-section .settings .setting-item .form-box .certify-request-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;
}
.alarm-setting-box .setting-footer-section {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.alarm-setting-box .setting-footer-section .section-title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}
.alarm-setting-box .setting-footer-section .section-title .comment {
    font-size: 13px;
    font-weight: 500;
    color: #b3b3b3;
}
.alarm-setting-box .setting-footer-section .form-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 10px;
}
.alarm-setting-box .setting-footer-section .form-box input {
    width: 250px;
    height: 26px;
    padding: 0 5px;
    border-radius: 5px;
    border: solid 1px #d7d7d7;
    background-color: #fff;
}
.alarm-setting-box .setting-footer-section .form-box .submit-btn.active {
    background-color: #30a254;
}
.alarm-setting-box .setting-footer-section .form-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;
}

.main-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}

.main-wrapper .main-banner-wrapper {
    width: 100%;
    height: 110px;
    margin-bottom: 40px;
    position: relative;
}
.main-wrapper .main-banner-wrapper .banner-wrap-inner {
    width: 100%;
    height: 100%;
}
.main-wrapper .main-banner-wrapper .banner-wrap-inner .banner-item {
    background-repeat: no-repeat;
    background-size: contain;
}
.concon-swiper-button.swiper-button-next, .concon-swiper-button.swiper-button-prev {
    width: 40px;
    height: 40px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
    border: solid 1px #f1f1f1;
    background-color: #fff;
    border-radius: 50%;
    z-index: 1000;
}
.concon-swiper-button.swiper-button-next {
    right: -20px;
}
.concon-swiper-button.swiper-button-prev {
    left: -20px;
}
.concon-swiper-button.swiper-button-next:after, .concon-swiper-button.swiper-button-prev:after {
    font-size: 17px;
    font-weight: 900;
    color: #000;
}

.main-wrapper .campaign-list-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.main-wrapper .campaign-list-wrapper .campaign-list-order-box {
    width: 100%;
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.main-wrapper .campaign-list-wrapper .campaign-list-order-box .order-select {
    width: auto;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 5px;
    border: solid 1px #d7d7d7;
    background-color: #fff;
    padding: 5px 10px;
}
.main-wrapper .campaign-list-wrapper .campaign-list-order-box .order-select .order-name {
    font-size: 14px;
    color: #111;
}
.main-wrapper .campaign-list-wrapper .campaign-list-order-box .order-select .icon {
    width: 10px;
    height: 7px;
}
.main-wrapper .campaign-list-wrapper .campaign-list-order-box .order-select .order-option-box {
    display: none;
}
.main-wrapper .campaign-list-wrapper .campaign-list-order-box .order-select.active .order-option-box {
    display: block;
    position: absolute;
    bottom: -120px;
    right: 0;
    width: auto;
    height: auto;
    border-radius: 5px;
    border: solid 1px #d7d7d7;
    background-color: #fff;
    padding: 15px;
}
.main-wrapper .campaign-list-wrapper .campaign-list-order-box .order-select.active .order-option-box .triangle {
    position: absolute;
    top: -17px;
    right: 15px;
    width: 0;
    height: 0;
    border-bottom: 9px solid #fff;
    border-top: 9px solid transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    z-index: 1000;
}
.main-wrapper .campaign-list-wrapper .campaign-list-order-box .order-select.active .order-option-box .triangle.border {
    position: absolute;
    top: -20px;
    right: 14px;
    width: 0;
    height: 0;
    border-bottom: 10px solid #d7d7d7;
    border-top: 10px solid transparent;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    z-index: 900;
}
.main-wrapper .campaign-list-wrapper .campaign-list-order-box .order-select.active .order-option-box .options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    color: #5a5a5a;
}
.main-wrapper .campaign-list-wrapper .campaign-list-order-box .order-select.active .order-option-box .options li {
    padding: 3px;
}
.main-wrapper .campaign-list-wrapper .campaign-list-order-box .order-select.active .order-option-box .options li:hover {
    color: #339c52;
}

.main-wrapper .campaign-list-wrapper .campaign-list-box {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
    border-top: 1px solid #000;
    padding-top: 25px;
}
.main-wrapper .campaign-list-wrapper .campaign-list-box .campaign-item-wrapper {
    width: calc(100% / 5 - 24px);
    height: auto;
    display: flex;
    flex-direction: column;
}
.campaign-item-wrapper .status-buttons {
    width: 100%;
    height: 30px;
    padding: 5px;
    background-color: #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.campaign-item-wrapper .status-buttons .status-button {
    width: auto;
    height: 20px;
    line-height: 18px;
    border-radius: 3px;
    border: solid 1px #b3b3b3;
    background-color: #fff;
    font-size: 12px;
    color: #808080;
    display: inline-block;
    padding: 0 3px;
}

.campaign-item-wrapper .status-buttons .status-button.active {
    border: solid 1px #30a254;
    background-color: #30a254;
    color: #fff;
}
.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;
    margin-bottom: 10px;
    /* background-size: contain; */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 236px;
    object-fit: cover;
}
.campaign-item-wrapper .campaign-item .type-box {
    width: 100%;
    height: 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.campaign-item-wrapper .campaign-item .type-box .channel {
    display: flex;
    align-items: center;
    gap: 10px;
}
.campaign-item-wrapper .campaign-item .type-box .channel-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}
.campaign-item-wrapper .campaign-item .type-box .channel-icon.insta {
    background-image: url('/images/c-insta@3x.png');
}
.campaign-item-wrapper .campaign-item .type-box .channel-icon.blog {
    background-image: url(/images/c-blog@3x.png);
}
.campaign-item-wrapper .campaign-item .type-box .channel-icon.youtube {
    background-image: url(/images/c-youtube@3x.png);
}
.campaign-item-wrapper .campaign-item .type-box .channel .d-day {
    font-size: 13px;
    color: #111;
    font-weight: 600;
}
.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;
}
.campaign-item-wrapper .campaign-item .title-box {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 18px;
}
.campaign-item-wrapper .campaign-item .title-box .title {
    font-size: 18px;
    color: #111;
    font-weight: 700;
    line-height: 1.54;
}
.campaign-item-wrapper .campaign-item .title-box .explanation {
    width: 100%;
    height: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    color: #989898;
    font-weight: 500;
}
.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 {
    font-size: 13px;
    color: #111;
    font-weight: 700;
}
.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;
}

.join-form-wrapper {
    width: 600px;
    height: auto;
    margin: 0 auto;
    padding: 60px 0 187px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.join-form-wrapper .wrapper-header {
    width: 100%;
    height: auto;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    color: #111;
    border-bottom: 1px solid #313131;
}
.join-form-wrapper input[type='text'],
.join-form-wrapper input[type='password']
{
    width: 300px;
    height: 50px;
    box-sizing: border-box;
    font-size: 15px;
    color: #8e8e8e;
}
.join-form-wrapper select {
    width: 150px;
    height: 50px;
}
.join-form-wrapper .wrapper-body {
    width: 100%;
    height: auto;
    padding: 30px 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    border-bottom: 1px solid #ddd;
}
.join-form-wrapper .wrapper-body .input-section {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.join-form-wrapper .wrapper-body .input-section .input-box {
    width: 100%;
   /* height: 50px;*/
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.join-form-wrapper .wrapper-body .input-section .input-box.certify {
    position: relative;
    display: none;
}
.join-form-wrapper .wrapper-body .input-section .input-box .button {
    width: 150px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 5px;
    border: solid 1px #e3e3e3;
    background-color: #e3e3e3;
    font-size: 15px;
    color: #fff;
}
.join-form-wrapper .wrapper-body .input-section .input-box .button.active {
    border: solid 1px #30a254;
    background-color: #30a254;
}
.join-form-wrapper .wrapper-body .input-section .input-box.certify .button {
    border: solid 1px #fdd000;
    background-color: #fdd000;
}
.join-form-wrapper .wrapper-body .input-section .input-box.certify .timer {
    position: absolute;
    top: 50%;
    /*right: 180px;*/
    right: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #f00;
}
.join-form-wrapper .wrapper-body .input-section .input-box.certify .button.disabled {
    border: solid 1px #868686;
    background-color: #868686;
}
.join-form-wrapper .wrapper-body .input-section .input-box .caution.active {
    display: block;
}
.join-form-wrapper .wrapper-body .input-section .input-box .caution {
    display: none;
    padding-left: 9px;
    font-size: 13px;
    color: #f00;
}
.join-form-wrapper .wrapper-body .agree-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.join-form-wrapper .wrapper-body .agree-section .input-circle-check-wrap {
    width: 100%;
}
.join-form-wrapper .wrapper-body .agree-section .input-circle-check-wrap .check-comment {
    width: 340px;
    font-size: 13px;
    color: #8e8e8e;
    line-height: 1.54;
}
.join-form-wrapper .wrapper-body .agree-section .input-circle-check-wrap .check-comment .agree-contents-view {
    font-weight: 700;
    color: #30a254;
}
.join-form-wrapper .wrapper-footer {
    width: 100%;
    height: auto;
    padding: 30px 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.join-form-wrapper .wrapper-footer .buttons {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.join-form-wrapper .wrapper-footer .buttons .submit-btn {
    width: 100%;
    height: 60px;
    border-radius: 5px;
    border: solid 1px #e3e3e3;
    background-color: #e3e3e3;
    text-align: center;
    color: #fff;
    font-size: 18px;
    line-height: 60px;
}
.join-form-wrapper .wrapper-footer .buttons .submit-btn.active {
    border: solid 1px #30a254;
    background-color: #30a254;
}
.sns-join-section {
    width: 100%;
    height: 120px;
    padding: 30px 40px 27px;
    background-color: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sns-join-section .copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sns-join-section .copy .title {
    font-size: 18px;
    font-weight: bold;
    color: #111;
}
.sns-join-section .copy .contents {
    font-size: 14px;
    color: #8e8e8e;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sns-join-section .icons {
    display: flex;
    align-items: center;
    gap: 20px;
}
.sns-join-section .icons .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.sns-join-section .icons .icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.sns-join-section .icons .icon.naver {
    background-color: #21cb01;
}
.sns-join-section .icons .icon.facebook {
    background-color: #445d98;
}
.sns-join-section .icons .icon.kakao img{
    width: 25px;
}
.sns-join-section .icons .icon.kakao {
    background-color: #fee500;

}
.sns-join-section .icons .icon.apple {
    background-color: #000;
}

.mypage-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    gap: 100px;
    padding: 60px 0 100px;
}
.mypage-wrapper .menu-box {
    width: 200px;
    height: auto;
    display: flex;
    flex-direction: column;
}
.mypage-wrapper .menu-box .menu-header {
    width: 100%;
    height: 60px;
    padding: 20px 0;
    font-size: 22px;
    font-weight: 700;
    color: #111;
    border-bottom: 1px solid #313131;
}
.mypage-wrapper .menu-box .menus {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}
.mypage-wrapper .menu-box .menus .menu-item {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 18px;
    font-size: 15px;
    font-weight: 600;
    color: #797979;
    border-bottom: 1px solid #ddd;
}
.mypage-wrapper .menu-box .menus .menu-item.active {
    font-size: 17px;
    font-weight: 700;
    color: #111;
}
.mypage-wrapper .menu-box .menus .sub-menus {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-bottom: 1px solid #ddd;
    padding: 20px 0 20px 25px;
}
.mypage-wrapper .menu-box .menus .sub-menus .sub-menu-item {
    width: 100%;
    height: auto;
}
.mypage-wrapper .menu-box .menus .sub-menus .sub-menu-item.active a {
    color: #111;
}
.mypage-wrapper .menu-box .menus .sub-menus .sub-menu-item a {
    width: 100%;
    height: 100%;
    font-size: 15px;
    font-weight: 500;
    color: #797979;
}
.mypage-wrapper .mypage-contents {
    width: calc(100% - 300px);
    height: auto;
    display: flex;
    flex-direction: column;
}
.mypage-wrapper .mypage-contents .mypage-contents-header {
    width: 100%;
    height: 60px;
    padding: 20px 0;
    font-size: 22px;
    font-weight: 700;
    color: #111;
    border-bottom: 1px solid #313131;
}
.mypage-wrapper .mypage-contents .mypage-contents-body {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}
.mypage-wrapper .mypage-contents .mypage-contents-body .info-edit-form {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 30px 30px;
    /*border-bottom: 1px solid #ddd;*/
}
.info-edit-form .info-input-box {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
}
.info-edit-form .info-input-box .input-label {
    width: 180px;
    height: 100%;
    line-height: 50px;
    font-size: 16px;
    font-weight: 700;
    color: #111;
}
.info-edit-form .info-input-box input[type='text'], .info-edit-form .info-input-box input[type='password'] {
    width: 300px;
    height: 50px;
    font-size: 13px;
    color: #111;
}
.info-edit-form .info-input-box select {
    width: 300px;
    height: 50px;
    font-size: 13px;
    color: #8e8e8e;
}
.info-edit-form .info-input-box select.alarm_time{
    width:190px;
}


.info-edit-form .info-input-box .input-wrap.gender {
    gap: 30px;
}
.info-edit-form .info-input-box .input-circle-check-wrap .input-label {
    width: auto;
}
.info-edit-form .info-input-section {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.info-edit-form .info-input-box .phone-certify-box {
    display: flex;
    align-items: center;
    gap: 10px;
}
.info-edit-form .info-input-box .certify-btn {
    width: auto;
    height: 50px;
    line-height: 50px;
    padding: 0 14px;
    border-radius: 5px;
    border: solid 1px #30a254;
    background-color: #30a254;
    font-size: 15px;
    color: #fff;
}
.info-edit-form .info-input-box .find-address-btn {
    width: auto;
    height: 50px;
    line-height: 50px;
    padding: 0 14px;
    border-radius: 5px;
    border: solid 1px #30a254;
    background-color: #30a254;
    font-size: 15px;
    color: #fff;
}
.info-edit-form .info-input-box .input-wrap.password {
    gap: 20px;
}
.info-edit-form .info-input-box .input-wrap.password .caution {
    display: none;
    font-family: NanumGothic;
    font-size: 13px;
    color: #f00;
}
.info-edit-form .info-input-box.certify .button {
    border: solid 1px #fdd000;
    background-color: #fdd000;
}
.info-edit-form .info-input-box .button.disabled {
    border: solid 1px #868686;
    background-color: #868686;
}
.info-edit-form .info-input-box.certify {
    position: relative;
    display: none;
}
.info-edit-form .info-input-box.certify .timer {
    position: absolute;
    top: 50%;
    right: 51%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #f00;
}
.info-edit-form .info-input-box .certify-box {
    display: flex;
    gap: 10px;
}

.info-edit-form .wrapper-footer .buttons .submit-btn {
    width: 100%;
    height: 60px;
    border-radius: 5px;
    border: solid 1px #e3e3e3;
    background-color: #e3e3e3;
    text-align: center;
    color: #fff;
    font-size: 18px;
    line-height: 60px;
}
.info-edit-form .wrapper-footer {
    width: 100%;
    height: auto;
    padding: 30px 270px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.info-edit-form .wrapper-footer .buttons {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-edit-form .wrapper-footer .buttons .submit-btn.active {
    border: solid 1px #30a254;
    background-color: #30a254;
}
.mypage-contents-body .sns-login-edit {
    width: 100%;
    height: auto;
    /*padding: 30px;*/
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.mypage-contents-body .sns-login-edit .sns-login-wrap {
    width: 100%;
    height: 60px;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    border: solid 1px #e3e3e3;
    background-color: #fff;
    cursor: pointer;
}
.mypage-contents-body .sns-login-edit .sns-login-wrap .sns-wrap-body {
    display: flex;
    align-items: center;
}
.mypage-contents-body .sns-login-edit .sns-login-wrap .sns-wrap-body .icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    border-radius: 50%;
    background-color: #d2d2d2;
}
.mypage-contents-body .sns-login-edit .sns-login-wrap.active .sns-wrap-body .icon.naver {
    background-color: #21cb01;
}
.mypage-contents-body .sns-login-edit .sns-login-wrap.active .sns-wrap-body .icon.kakao {
    background-color: #fdd000;
}
.mypage-contents-body .sns-login-edit .sns-login-wrap.active .sns-wrap-body .icon.apple {
    background-color: #000;
}
.mypage-contents-body .sns-login-edit .sns-login-wrap .sns-wrap-body .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.mypage-contents-body .sns-login-edit .sns-login-wrap .sns-wrap-body .icon.kakao img {
    width: 16px;
    height: auto;
    object-fit: unset;
}
.mypage-contents-body .sns-login-edit .sns-login-wrap .sns-wrap-body .sns-name {
    margin-right: 25px;
    font-size: 16px;
    font-weight: 700;
    color: #797979;
}
.mypage-contents-body .sns-login-edit .sns-login-wrap .sns-wrap-body .sns-connect-date {
    display: none;
    font-size: 13px;
    color: #a7a7a7;
}
.mypage-contents-body .sns-login-edit .sns-login-wrap.active .sns-wrap-body .sns-connect-date {
    display: block;
}
.mypage-contents-body .sns-login-edit .sns-login-wrap .button {
    position: relative;
    width: 52px;
    height: 26px;
    border-radius: 13px;
    border: solid 1px #d7d7d7;
    background-color: #f4f4f4;
}
.mypage-contents-body .sns-login-edit .sns-login-wrap .button .circle {
    position: absolute;
    left: -1px;
    top: -1px;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    border: solid 1px #d7d7d7;
    background-color: #fff;
}
.mypage-contents-body .sns-login-edit .sns-login-wrap.active .button .circle {
    /*left: auto;*/
    left: 25px;
    border: solid 1px #d7d7d7;
    background-color: #ebc309;
}
.mypage-contents-body .withdrawal-box {
    width: 100%;
    height: 22px;
    padding: 0 30px;
    margin-bottom: 10px;
    display: flex;
    justify-content: right;
}
.mypage-contents-body .withdrawal-box .logout-btn, 
.mypage-contents-body .withdrawal-box .withdrawal-btn {
    font-size: 14px;
    color: #111;
    border-bottom: 1px solid #111;
    margin-left: 10px;
}
.mypage-contents-body .submit-button-box {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mypage-contents-body .submit-button-box .save-button {
    width: auto;
    height: 60px;
    line-height: 60px;
    padding: 0 146px;
    border-radius: 5px;
    border: solid 1px #e3e3e3;
    background-color: #e3e3e3;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.mypage-contents-body .submit-button-box .save-button.active {
    background-color: #30a254;
}

.mypage-contents.qna .mypage-contents-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}
.mypage-contents.qna .mypage-contents-header .qna-write-btn {
    width: auto;
    height: 40px;
    line-height: 40px;
    padding: 0 24px;
    border-radius: 5px;
    background-color: #fdd000;
    font-size: 15px;
    color: #484848;
}
.mypage-contents.qna .qna-list-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}
.mypage-contents.qna .qna-list-wrapper .qna-no-item-box {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.mypage-contents.qna .qna-list-wrapper .qna-no-item-box img {
    width: 130px;
}
.mypage-contents.qna .qna-list-wrapper .qna-no-item-box .text {
    font-size: 15px;
    color: #8e8e8e;
}
.mypage-contents.qna .qna-list-wrapper .qna-item-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 10px;
    gap: 35px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}
.mypage-contents.qna .qna-list-wrapper .qna-item-wrapper .status-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 13px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.mypage-contents.qna .qna-list-wrapper .qna-item-wrapper .status-box.standby {
    background-color: #f6f6f6;
    color: #8e8e8e;
}
.mypage-contents.qna .qna-list-wrapper .qna-item-wrapper .status-box.complete {
    border: solid 1px #30a254;
    background-color: #fff;
    color: #30a254;
}
.mypage-contents.qna .qna-list-wrapper .qna-item-wrapper .status-box:before {
    line-height: 1.23;
}
.mypage-contents.qna .qna-list-wrapper .qna-item-wrapper .status-box.standby:before {
    content: "접수대기";
}
.mypage-contents.qna .qna-list-wrapper .qna-item-wrapper .status-box.complete:before {
    content: "답변완료";
}
.mypage-contents.qna .qna-list-wrapper .qna-item-wrapper .item-body {
    width: calc(100% - 95px);
    height: 100%;
}

.qna-item-wrapper .item-body {
    width: calc(100% - 95px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.qna-item-wrapper .item-body .title-box-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.qna-item-wrapper .item-body .title-box-wrap .title-box {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 700;
}
.qna-item-wrapper .item-body .title-box-wrap .title-box .category {
    color: #30a254;
}
.qna-item-wrapper .item-body .title-box-wrap .title-box .title {
    color: #111;
}
.qna-item-wrapper .item-body .title-box-wrap .write-date {
    font-family: Roboto;
    font-size: 15px;
    color: #8e8e8e;
}
.qna-item-wrapper .item-body .contents {
    width: 100%;
    height: auto;
    line-height: 1.6;
    font-size: 15px;
    color: #8e8e8e;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 두 줄 */
    -webkit-box-orient: vertical;
}

.mypage-contents.qna .qna-list-pagination {
    width: 100%;
    height: auto;
    padding: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.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: 16px;
    text-align: center;
    font-weight: bold;
    color: #111;
}
.paging .page-item.active {
    background-color: #111;
    border-radius: 50%;
    color: #fff;
}

.mypage-contents.qna.view .mypage-contents-body {
    padding: 30px 20px;
    border-bottom: 1px solid #ddd;
    gap: 40px;
}
.mypage-contents.qna .mypage-contents-body .inquiry-contents {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.mypage-contents.qna .mypage-contents-body .inquiry-contents .title-box-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mypage-contents.qna .mypage-contents-body .inquiry-contents .title-box-wrap .title-box {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 700;
}
.mypage-contents.qna .mypage-contents-body .inquiry-contents .title-box-wrap .title-box .category {
    color: #30a254;
}
.mypage-contents.qna .mypage-contents-body .inquiry-contents .title-box-wrap .title-box .title {
    color: #111;
}
.mypage-contents.qna .mypage-contents-body .inquiry-contents .title-box-wrap .write-date {
    font-family: Roboto;
    font-size: 15px;
    color: #8e8e8e;
}
.mypage-contents.qna .mypage-contents-body .inquiry-contents .contents {
    font-size: 15px;
    line-height: 1.73;
    color: #111;
}
.mypage-contents.qna .mypage-contents-body .answer-contents {
    width: 100%;
    height: auto;
    padding: 40px;
    background-color: #f6f6f6;
    font-size: 15px;
    line-height: 1.73;
    color: #111;
}
.mypage-contents.qna .mypage-contents-body .answer-contents.inactive {
    display: none;
}
.mypage-contents.qna .mypage-contents-footer {
    width: 100%;
    height: auto;
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mypage-contents.qna .mypage-contents-footer .buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mypage-contents.qna .mypage-contents-footer .buttons.right .button {
    background-color: #111;
    color: #fff;
}
.mypage-contents.qna .mypage-contents-footer .buttons .button {
    width: 80px;
    height: 40px;
    line-height: 40px;
    border: solid 1px #ddd;
    background-color: #fff;
    font-size: 15px;
    text-align: center;
    color: #484848;
}

.mypage-contents.qna.write .mypage-contents-body {
    padding: 20px 20px 40px;
    border-bottom: 1px solid #ddd;
}
.mypage-contents.qna.write .mypage-contents-body .categories {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mypage-contents.qna.write .mypage-contents-body .categories .category-item.active {
    border: solid 1px #30a254;
    background-color: #30a254;
    color: #fff;
    font-weight: 700;
}
.mypage-contents.qna.write .mypage-contents-body .categories .category-item {
    width: auto;
    height: 40px;
    padding: 0 20px;
    border-radius: 5px;
    border: solid 1px #ddd;
    background-color: #fff;
    font-size: 15px;
    line-height: 40px;
    color: #111;
    text-align: center;
    cursor: pointer;
}
.mypage-contents.qna.write .mypage-contents-body .categories input[type="radio"] {
    display: none;
}

.mypage-contents.qna.write .mypage-contents-body .input-wrap {
    width: 100%;
    height: 50px;
    margin-bottom: 30px;
}
.mypage-contents.qna.write .mypage-contents-body .input-wrap input {
    width: 100%;
    height: 100%;
}

.mypage-contents.qna.write .mypage-contents-footer {
    justify-content: center;
}
.mypage-contents.qna.write .mypage-contents-footer .mypage-write-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.mypage-contents.qna.write .mypage-contents-footer .mypage-write-buttons .button {
    width: auto;
    height: 40px;
    padding: 0 27px;
    text-align: center;
    line-height: 40px;
    font-size: 15px;
    color: #484848;
}
.mypage-contents.qna.write .mypage-contents-footer .mypage-write-buttons .button.submit {
    border: solid 1px #fdd000;
    background-color: #fdd000;
}
.mypage-contents.qna.write .mypage-contents-footer .mypage-write-buttons .button.cancel {
    border: solid 1px #ddd;
    background-color: #fff;
}
.mypage-contents.point .mypage-contents-footer {
    width: 100%;
    height: auto;
    padding: 50px 0;
}
.mypage-contents.point .buttons {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mypage-contents.point .buttons .submit-btn {
    width: auto;
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding: 0 168px;
    border-radius: 5px;
    background-color: #fdd000;
    font-size: 18px;
    font-weight: 700;
    color: #484848;
}
.mypage-contents.point .mypage-contents-body {
    padding-top: 20px;
    border-bottom: 1px solid #ddd;
}
/*.mypage-contents.point .remainder-point-box {
    width: 100%;
    height: auto;
    padding: 40px 0 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
}*/
/*
.remainder-point-box .box-header {
    margin-bottom: 22px;
    font-size: 16px;
    color: #111;
}
.remainder-point-box .box-body {
    width: 100%;
    position: relative;
    margin-bottom: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.remainder-point-box .box-body .point {
    font-family: Roboto;
    font-size: 30px;
    font-weight: 700;
    color: #111;
}
.remainder-point-box .box-body .point-char {
    font-size: 24px;
    font-weight: 500;
    color: #111;
}
.remainder-point-box .box-body .point-avail {
!*    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-60%, -50%);*!
    margin-left: 10px;
    line-height: 20px;
    text-align: center;
    padding: 3px 5px;
    background-color: #e1e1e1;
    font-size: 14px;
}
.remainder-point-box .box-body .point-avail.avail {
    color: #30a254;
}
.remainder-point-box .box-body .point-avail.no-avail {
    color: #ea1515;
}
.remainder-point-box .box-footer {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.remainder-point-box .box-footer .received-point-btn {
    width: auto;
    height: 30px;
    line-height: 30px;
    padding: 0 25px;
    border-radius: 15px;
    background-color: #30a254;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
}*/

.mypage-contents.point .remainder-point-box{
    display:flex;
    flex-direction:row;
    gap:40px;
    width: 100%;
    height: auto;
    padding: 40px 0 20px 0;
    align-items: flex-start;
    justify-content: center;
    background-color: #f9f9f9;

}

.remainder-point-item{

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
}

.remainder-point-item .box-header {
    margin-bottom: 22px;
    font-size: 16px;
    color: #111;
}
.remainder-point-item .box-body {
    width: 100%;
    position: relative;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.remainder-point-item .box-body .point {
    font-family: Roboto;
    font-size: 30px;
    font-weight: 700;
    color: #111;
}
.remainder-point-item .box-body .point-char {
    font-size: 24px;
    font-weight: 500;
    color: #111;
}
.remainder-point-item .box-body .point-avail {
    /*    position: absolute;
        top: 50%;
        left: 60%;
        transform: translate(-60%, -50%);*/
    margin-left: 10px;
    line-height: 20px;
    text-align: center;
    padding: 3px 5px;
    background-color: #e1e1e1;
    font-size: 14px;
}
.remainder-point-item .box-body .point-avail.avail {
    color: #30a254;
}
.remainder-point-item .box-body .point-avail.no-avail {
    color: #ea1515;
}

.remainder-point-item .box-footer .point-avail {
    /*    position: absolute;
        top: 50%;
        left: 60%;
        transform: translate(-60%, -50%);*/
    /*margin-left: 10px;*/
    line-height: 20px;
    text-align: center;
    padding: 3px 5px;
    background-color: #e1e1e1;
    font-size: 14px;
}
.remainder-point-item .box-footer .point-avail.avail {
    color: #30a254;
}
.remainder-point-item .box-footer .point-avail.no-avail {
    color: #ea1515;
}
.remainder-point-item .box-footer {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.remainder-point-item .box-footer .received-point-btn {
    width: auto;
    height: 30px;
    line-height: 30px;
    padding: 0 25px;
    border-radius: 15px;
    background-color: #30a254;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
}

.remainder-point-box .calc-icon{
    margin-top:12px;
}
.remainder-point-box .calc-icon img{
    width:50px;
    height:50px;
}
.point-form-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 0 30px 30px;
}
.point-form-wrapper .input-wrap {
    width: 100%;
    min-height: 50px;
}
.point-form-wrapper .input-label {
    width: 250px;
}
.point-form-wrapper input, .point-form-wrapper select {
    width: 300px;
    height: 50px;
    padding: 0 10px;
    font-size: 13px;
    color: #8e8e8e;
}

.point-form-wrapper .wrap-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}
.point-form-wrapper .wrap-inner select {
    width: 150px;
}
.point-form-wrapper .wrap-inner .all-point-btn {
    width: auto;
    height: 50px;
    line-height: 50px;
    padding: 0 16px;
    border-radius: 5px;
    border: solid 1px #e3e3e3;
    background-color: #ebebeb;
    font-size: 15px;
    color: #111;
}
.point-form-wrapper .wrap-inner .card-upload-btn {
    width: auto;
    height: 50px;
    line-height: 50px;
    padding: 0 16px;
    border-radius: 5px;
    border: solid 1px #e3e3e3;
    background-color: #ebebeb;
    font-size: 15px;
    color: #111;
}
.mypage-contents.point.inquiry .point-history-table {
    width: 100%;
    height: auto;
    margin-top: 40px;
    border-top: 1px solid #111;
    text-align: center;
    font-size: 16px;
    color: #111;
}
.mypage-contents.point.inquiry .point-history-table thead tr {
    background-color: #f6f6f6;
}
.mypage-contents.point.inquiry .point-history-table tr {
    border-bottom: 1px solid #ddd;
    height: 50px;
}
.mypage-contents.point.inquiry .point-history-table th {
    vertical-align: middle;
    font-weight: 700;
}
.mypage-contents.point.inquiry .point-history-table td {
    vertical-align: middle;
}
.mypage-contents.point.inquiry .point-history-table td.left-text {
    text-align: left;
}

.mypage-contents.alarm .all-check-btn {
    width: auto;
    height: 40px;
    padding: 0 16px;
    border-radius: 5px;
    background-color: #30a254;
    font-size: 15px;
    line-height: 40px;
    color: #fff;
}
.mypage-contents.alarm .mypage-contents-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}
.mypage-contents.alarm .alarm-list-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin-bottom: 40px;
}
.mypage-contents.alarm .alarm-list-wrapper .alarm-no-item-box {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.mypage-contents.alarm .alarm-list-wrapper .alarm-no-item-box img {
    width: 130px;
}
.mypage-contents.alarm .alarm-list-wrapper .alarm-no-item-box .text {
    font-size: 15px;
    color: #8e8e8e;
}

.alarm-list-wrapper .alarm-item-wrapper.active {
    background-color: #f9f9f9;
    color: #111;
}
.alarm-list-wrapper .alarm-item-wrapper {
    width: 100%;
    height: auto;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #8e8e8e;
    font-size: 15px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}
.alarm-list-wrapper .alarm-item-wrapper .contents-box {
    display: flex;
    align-items: center;
    gap: 20px;
}
.alarm-list-wrapper .alarm-item-wrapper .contents-box .icon-box {
    width: 24px;
    height: 24px;
    background-image: url("/images/alarm-check.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.alarm-list-wrapper .alarm-item-wrapper.active .icon-box {
    background-image: url("/images/alarm-check-ok.png");
}
.alarm-list-wrapper .alarm-item-wrapper .date {
    color: #8e8e8e;
}

.check-blog-wrapper.support .inquiry-form .form-body .explanation {
    margin-left: 10px;
    font-family: NanumGothic;
    font-size: 14px;
    font-weight: bold;
    color: #111;
}
.check-blog-wrapper.support .section.blog-analysis-inquiry {
    margin-bottom: 50px;
}
.check-blog-wrapper.support .supporting-guide-tab {
    width: 100%;
    height: 50px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.check-blog-wrapper.support .supporting-guide-tab .tab-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.check-blog-wrapper.support .supporting-guide-tab .tab-inner .tab {
    width: 50%;
    height: 100%;
    line-height: 50px;
    background-color: #e7e7e7;
    text-align: center;
    font-size: 16px;
    color: #a0a0a0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.check-blog-wrapper.support .supporting-guide-tab .tab-inner .tab.active {
    font-weight: 700;
    background-color: #086721;
    color: #fff;
}
.supporting-guide-contents .section-header {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}
.supporting-guide-contents .section-header .section-header-title {
    font-size: 18px;
    font-weight: 700;
    color: #111;
}
.supporting-guide-contents .section-header .get-existing-guide-btn {
    width: auto;
    height: 24px;
    line-height: 24px;
    padding: 0 13px;
    border-radius: 5px;
    background-color: #2a2a2a;
    font-family: NanumGothic;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
}
.supporting-guide-contents .section-body {
    width: 100%;
    height: auto;
}
.supporting-guide-contents .section-body .keyword-input-form-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 50px 26px;
    background-color: #f9f9f9;
    border-top: 1px solid #111;
}
.keyword-input-form-wrapper .form-wrapper-header {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}
.keyword-input-form-wrapper .form-wrapper-body {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.keyword-input-form-wrapper .input-wrap {
    width: 100%;
}
.keyword-input-form-wrapper .input-wrap input {
    width: 100%;
    height: 50px;
}
.keyword-input-form-wrapper .supporting-start-btn {
    padding: 0 50px;
    white-space: nowrap;
    width: auto;
    height: 50px;
    line-height: 50px;
    border-radius: 5px;
    background-color: #fdd000;
    font-size: 15px;
    font-weight: 600;
    color: #484848;
}


.supporting-guide-contents .keyword-list-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}
.supporting-guide-contents .keyword-list-wrapper .list-wrapper-header {
    width: 100%;
    height: auto;
    padding: 15px 30px;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    gap: 20px;
    border-top: 1px solid #111;
    margin-bottom: 20px;
}
.keyword-list-wrapper .list-wrapper-header .inner-title {
    font-size: 15px;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
}
.keyword-list-wrapper .list-wrapper-header .input-wrap {
    width: 100%;
    height: 50px;
}
.keyword-list-wrapper .list-wrapper-header .input-wrap input {
    width: 100%;
    height: 50px;
}
.keyword-list-wrapper .list-wrapper-body {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 25px;
}
.keyword-list-wrapper .list-wrapper-body .recommend-explanations {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.keyword-list-wrapper .list-wrapper-body .recommend-explanations li {
    display: flex;
    align-items: center;
    font-family: NanumGothic;
    font-size: 14px;
    font-weight: 500;
    color: #111;
}
.keyword-list-wrapper .list-wrapper-body .recommend-explanations li:before {
    content: "";
    display: inline-block;
    margin: 5px 11px 5px 19px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #39a154;
}
.keyword-list-wrapper .list-wrapper-body .recommended-keyword-table {
    width: 100%;
    height: auto;
    background-color: #fff;
    text-align: center;
    font-family: NanumGothic;
    font-size: 14px;
    color: #111;
}
.keyword-list-wrapper .recommended-keyword-table tr {
    width: 100%;
}
.keyword-list-wrapper .recommended-keyword-table thead tr {
    height: 60px;
    background-color: #f9f9f9;
}
.keyword-list-wrapper .recommended-keyword-table tbody tr {
    height: 50px;
    cursor: pointer;
}
.keyword-list-wrapper .recommended-keyword-table tr.active {
    background-color: #ebf4e6;
}
.keyword-list-wrapper .recommended-keyword-table tr.recommend_green {
    background-color: rgba(235, 244, 230,0.5);
}
.keyword-list-wrapper .recommended-keyword-table tr.recommend_purple {
    background-color: rgba(255, 216, 255, 0.5);
}
.keyword-list-wrapper .recommended-keyword-table tr.recommend_red {
    background-color: rgba(255, 238, 238, 0.5);
}
.keyword-list-wrapper .recommended-keyword-table tr.recommend_green.active {
    background-color: rgba(235, 244, 230,1);
}
.keyword-list-wrapper .recommended-keyword-table tr.recommend_purple.active {
    background-color: rgba(255, 216, 255,1);
}
.keyword-list-wrapper .recommended-keyword-table tr.recommend_red.active {
    background-color: rgba(255, 238, 238,1);
}

.keyword-list-wrapper .recommended-keyword-table th {
    vertical-align: middle;
    border: 1px solid #e3e3e3;
    font-weight: 700;
}
.keyword-list-wrapper .recommended-keyword-table td {
    vertical-align: middle;
    border: 1px solid #e3e3e3;
}
.keyword-list-wrapper .recommended-keyword-table td:nth-child(2) {
    text-align: left;
    padding-left: 13px;
}
.keyword-list-wrapper .recommended-keyword-table td.emphasis {
    color: #e62a2a;
    font-weight: 600;
}
.keyword-list-wrapper .recommended-keyword-table td.soft {
    color: #8e8e8e;
}
.keyword-list-wrapper .recommended-keyword-table td .table-check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    background-image: url("/images/table-check.png");
    background-size: 12px 9px;
    background-position: center;
    background-repeat: no-repeat;
}
.keyword-list-wrapper .recommended-keyword-table tr.active .table-check-icon {
    background-image: url("/images/table-check-sel.png");
}


.keyword-list-wrapper .list-wrapper-footer {
    width: 100%;
    height: auto;
}
.tip-box {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: #f9f9f9;
}
.tip-box .tip-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
.tip-box .tip-text {
    font-size: 15px;
    font-weight: 700;
    color: #086721;
    font-style: italic;
    margin-right: 35px;
}
.tip-box .tip-explanation {
    font-size: 15px;
    font-weight: 500;
    color: #111;
    line-height: 1.6;
}

.supporting-guide-contents .section-footer {
    width: 100%;
    height: auto;
}
.supporting-guide-contents .section-footer .buttons, .supporting-guide-contents .buttons {
    width: 100%;
    height: auto;
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 20px;
}
.supporting-guide-contents .section-footer .buttons .step-btn.active {
    display: flex;
}
.supporting-guide-contents .section-footer .buttons .step-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    height: 40px;
    padding: 0 50px;
    border: solid 1px #ddd;
    background-color: #fff;
    font-size: 15px;
    color: #484848;
}
.supporting-guide-contents .section-footer .buttons .step-btn img {
    width: 13px;
    height: 7px;
}

.supporting-guide-contents .buttons .btn {
    height: 50px;
    justify-content: center;
    text-align: center;
    border: none;
    font-weight: 600;
    border-radius: 5px
}

.supporting-guide-contents .buttons .btn.btn-yellow {
    background-color: yellow;
    color: #484848;
}

.supporting-guide-contents .buttons .btn.btn-yellow-green {
    background-color: yellowgreen;
    color: #484848;
}

.title-list-wrapper .list-wrapper-header {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    background-color: #f9f9f9;
    border-top: 1px solid #111;
    margin-bottom: 20px;
}
.title-list-wrapper .list-wrapper-header .inner-title {
    font-size: 15px;
    color: #111;
    font-weight: 600;
}
.title-list-wrapper .list-wrapper-header .replay-btn {
    width: auto;
    height: 50px;
    line-height: 50px;
    padding: 0 32px;
    border-radius: 5px;
    background-color: #fdd000;
    font-size: 15px;
    color: #111;
}

.title-list-wrapper .list-wrapper-body {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 24px;
}
.title-list-wrapper .recommended-title-table {
    width: 100%;
    height: auto;
    text-align: center;
    font-family: NanumGothic;
    font-size: 14px;
    color: #111;
}
.title-list-wrapper .recommended-title-table thead tr {
    height: 60px;
    background-color: #f9f9f9;
}
.title-list-wrapper .recommended-title-table tbody tr {
    height: 50px;
}
.title-list-wrapper .recommended-title-table th {
    border: 1px solid #e3e3e3;
    vertical-align: middle;
}
.title-list-wrapper .recommended-title-table .keyword-list {
    line-height: 1.23;
}
.title-list-wrapper .recommended-title-table th .light {
    font-weight: normal;
}
.title-list-wrapper .recommended-title-table td:first-child {
    text-align: left;
}
.title-list-wrapper .recommended-title-table td {
    border: 1px solid #e3e3e3;
    vertical-align: middle;
    padding: 0 22px;
}
.title-list-wrapper .recommended-title-table .copy-btn {
    width: auto;
    height: 30px;
    padding: 5px 12px;
    border: solid 1px #afafaf;
    background-color: #fff;
    text-align: center;
    font-family: NanumGothic;
    font-size: 13px;
    color: #111;
    white-space: nowrap;
}
.title-list-wrapper .title-input-box {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
}
.title-list-wrapper .title-input-box .input-label {
    width: 60px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #086721;
}
.title-list-wrapper .title-input-box .input-wrap {
    width: 100%;
}
.title-list-wrapper .title-input-box input {
    width: 100%;
    height: 50px;
    border: solid 1px #30a254;
}

.supporting-guide-contents .contents-analysis-form-wrapper {
	width: 100%;
	height: auto;
}
.supporting-guide-contents .contents-analysis-form-wrapper .wrapper-header {
	width: 100%;
	height: auto;
}

.supporting-guide-contents .contents-analysis-form-wrapper .title-input-box {
	width: 100%;
	height: auto;
	padding: 15px 30px;
	display: flex;
	align-items: center;
	gap: 20px;
	background-color: #f9f9f9;
	border-top: 1px solid #111;
}
.contents-analysis-form-wrapper .title-input-box .box-header {
	font-size: 15px;
	color: #111;
	white-space: nowrap;
}

.contents-analysis-form-wrapper .title-input-box .input-wrap {
	width: 100%;
	height: auto;
}
.contents-analysis-form-wrapper .title-input-box input::placeholder {
    color: #8e8e8e;
}
.contents-analysis-form-wrapper .title-input-box input {
	width: 100%;
	height: 50px;
	font-size: 13px;
}
.contents-analysis-form-wrapper .wrapper-body {
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 60px;
}
.contents-analysis-form-wrapper .contents-input-box {
	position: relative;
	width: calc(100% / 2 - 50px);
	height: auto;
}
.contents-analysis-form-wrapper .contents-input-box textarea,
.contents-analysis-form-wrapper .contents-input-box .textarea {
	width: 100%;
	height: 670px;
	padding: 30px;
	border: solid 1px #e3e3e3;
	background-color: #f9f9f9;
	resize: none;
}
.contents-analysis-form-wrapper .contents-input-box .guide-text {
	position: absolute;
	top: 30px;
	left: 30px;
}
.contents-analysis-form-wrapper .analysis-result-box {
	position: relative;
	width: calc(100% / 2 - 50px);
	height: auto;
}
.contents-analysis-form-wrapper .analysis-start-btn-box {
	width: 53px;
	height: auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.contents-analysis-form-wrapper .analysis-start-btn-box span {
	display: block;
	text-align: center;
	word-break: keep-all;
	line-height: 1.6;
	font-size: 15px;
	font-weight: 700;
	color: #111;
}
.contents-analysis-form-wrapper .analysis-start-btn-box .next-btn {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 25px;
	background-color: #9a9a9a;
}
.contents-analysis-form-wrapper .analysis-start-btn-box .next-btn img {
	width: 50px;
	height: 50px;
}

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

.analysis-contents-table td .inner .grade-wrap .mark {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    min-width: 26px;
    height: 18px;
    text-align: center;
    vertical-align: middle;
    padding: 0 3px;
}
.analysis-contents-table td .inner .grade-wrap .mark.mark-red{
    background-color: #ef3d19;
}
.analysis-contents-table td .inner .grade-wrap .mark.mark-blue{
    background-color: #223ee5;
}
.analysis-contents-table td .inner .grade-wrap .mark.mark-dark{
    background-color: #363636;
}



.analysis-contents-table td .inner .grade-wrap .mark.mark-red {
    background-color: #ef3d19;
}

.analysis-contents-table td .inner .grade-wrap .mark.mark-blue {
    background-color: #223ee5;
}

.analysis-contents-table td .inner .grade-wrap .mark.mark-dark {
    background-color: #363636;
}

.modal-area .effect.yellow {
    background-image: linear-gradient(65deg, #36a253, #babd00, #36a253, #babd00, #36a253, #babd00);
    background-size: 800% 550%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
}

.modal-area .effect.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;
}

.analysis-contents .blog-grade-table {
    width: 100%;
    max-width:600px;
    padding: 10px 0;
    /*border: 1px solid #d3d3d3;*/
    text-align: center;
    margin-top:15px;
    margin-bottom:30px;
}
.analysis-contents .blog-grade-table tr {
    width: 100%;
    height: 30px;
}
.analysis-contents .blog-grade-table th {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    border: 1px solid #d3d3d3;
    vertical-align: middle;
    padding:0;
}
.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 {
    font-size: 14px;
    color: #111;
    border: 1px solid #d3d3d3;
    vertical-align: middle;
    padding:0;
}

.analysis-contents .blog-grade-table td{
    position:relative;
}
.analysis-contents .blog-grade-table td.current-grade:after{
    content:'';
    position:absolute;
    width:25px;
    height:25px;
    bottom:-30px;
    left:-12.5px;
    background: url('/images/arrow-top-edit.png') no-repeat center center/cover ;
}

.analysis-contents .gradeup-tip {
    position: relative;
    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;
}

.analysis-contents .gradeup-tip .tip-contents-wrap{
    display:none;
    width:600px;
    height:600px;
    position:absolute;
    top : -300px;
    left: 30px;
    border: 1px solid #000;
    border-radius: 10px;
    padding:30px 15px;
    overflow-y:auto;
    background:#fff;
    z-index:1000;
}
.analysis-contents .gradeup-tip .tip-contents{
    padding:20px 0;
    border-bottom : 1px dashed #000;
}
.analysis-contents .gradeup-tip .tip-contents:first-of-type{
    padding-top:0;
}
.analysis-contents .gradeup-tip .tip-contents:last-of-type{
    border-bottom:none;
    padding-bottom:0;
}
.analysis-contents .gradeup-tip .tip-contents p{
    line-height:1.8;
    font-weight:500;
}
.analysis-contents .text-red{
    color:#ef3d19;
}
.analysis-contents .text-blue{
    color:#223ee5;
}
.analysis-contents .text-green{
    color:#00b050;
}

.analysis-contents .gradeup-tip:hover .tip-contents-wrap,
.analysis-contents .tip-contents-wrap:hover
{
    display:block;
}


.popup-box {
    display: none;
    position: fixed;
    top: 250px;
    left:calc(50% - 160px);
    width: auto;
    max-width:320px;
    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: 10002;
    white-space: nowrap;
}
.popup-box.position-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 30% !important;
    word-break: keep-all;
    white-space: normal;
}
.popup-box#info_popup{
    max-width:unset;
    left:25%;
}
.popup-box#info_popup p{
    line-height:3;
}
.popup-box#info_popup p .point{
    color :#30a254;
}

.popup-box.check_popup{
    max-width:unset;
}
.popup-box.check_popup p{
    line-height:2;
}
.popup-box.check_popup .button-box{
    margin-top:30px;
}

.popup-box.check_popup .submit-btn{
    background-color:#30a254;
}
.community-wrapper .popup-box{
    top:calc(50% - 125px);
}
.popup-box .popup-header{
    font-size: 16px;
    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:5px;
}

.popup-box .keyword-list-box{

    font-size:14px;
    padding: 15px 10px;
    border: 1px solid #d0d0d0;
}
.popup-box .keyword-list-box .keyword-list-view{
    max-height: 250px;
    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: #30a254;
    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:14px;
}
.popup-box .select-category-area .after{
    color:#30a254;
}


.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.share-info-box{
    z-index:20001;
    width:400px;
    max-width:unset;
}

.recent-contents-analysis .main-keyword-category{
    cursor:pointer;
}

.dimmed{
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    background-color: rgba(0,0,0,0.7);
    display: none;
    z-index: 1001;
}

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


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

.notify {
    font-size: 12px;
    color: #111;
    line-height: 1.5;
}

body::-webkit-scrollbar,
body *::-webkit-scrollbar {
    width: 6px;  /* 스크롤바의 너비 */
}

body::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-thumb{
    background: #a8aaae; /* 스크롤바의 색상 */

    border-radius: 4px;
}

body::-webkit-scrollbar-track,
body *::-webkit-scrollbar-track{
    background: rgb(223, 223, 227);  /*스크롤바 뒷 배경 색상*/
}

.modal.blog-history {
    width: 1000px;
    height: calc(100% - 20px);
}
.modal.blog-history .cal-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
}
.modal.blog-history .cal-title .cal_current{
    font-size: 24px;
    font-weight: 500;
}

.modal.blog-history .cal-title .cal_btn{
    width:40px;
    height:40px;
}
.modal.blog-history .cal-title .cal_btn img{
    width:100%;
}

.modal.blog-history .modal-section table tr{
    height: calc(608px / 15);
}
.modal.blog-history .modal-section table tbody tr:nth-of-type(7) td,
.modal.blog-history .modal-section table tbody tr:nth-of-type(14) td
{
    padding:5px 0;
}
.modal.blog-history .modal-section table tbody tr:nth-of-type(14) td,
.modal.blog-history .modal-section table tbody tr:nth-of-type(28) td {
    border-bottom:1px solid;

}
.modal.blog-history .modal-section.modal-body .table-wrap{
    width:100%;
    height:100%;
    max-height:608px;
    overflow-y:auto;
}

.modal-wrap#history_view{
    position:unset;
}
.modal-wrap#history_view .modal.blog-history .modal-section.modal-body .table-wrap{
    overflow:unset;
}
.modal-wrap#history_view .blog-history{
    width:100%;
    max-width:unset;
}
.modal-wrap#history_view .modal{
    position:unset;
    top:unset;
    left:unset;
    transform:unset;
    max-width: unset;
    border-radius: unset;
    box-shadow:unset;
    border:unset;
    padding:9px;
}


.modal.blog-history .modal-section.modal-body{
    margin-top:26px;
}
.modal-wrap#history_view .modal.blog-history .modal-section.modal-body{
    margin:0;
}
.blog-history .point{
    font-weight:bold;
}

.blog-history .point.plus{
    color:#eb1b1b;
}
.blog-history .point.minus{
    color:#258ce4;
}

.modal.blog-history .success:before{
    content:'V';
    color:#30a254;
}
.modal.blog-history .fail:before{
    content:'X';
    color:#eb1b1b;
}
.modal.blog-history .info-text{
    margin-top:5px;
    font-size:13px;
    color:#858585;
}
.blog-history .modal-footer .total{
    width:calc( 100% - 200px - 19px);
    height:100%;
    margin:0;
    background-color: #cbe9d4;
    padding:20px 13px;
    font-size:13px;
    text-align:center;
    font-weight: bold;
}


.modal.blog-history .modal-footer .total > div{
    /*margin-bottom:13px;*/
}

.modal.blog-history .modal-footer .total > div:last-of-type {
    margin-bottom: unset;
}

.modal.blog-history .share-area{
    width:100%;
    /*height:80px;*/
    display:flex;
    gap:19px;
    margin:19px 0 14px;
}
.modal.blog-history .share-area .share-button{
    width:200px;
    height:auto;
    padding: 23px 29px 24px;
    border-radius: 5px;
    background-color: #39a154;
    color:#fff;
    border:0;
    outline:0;
    cursor:pointer;
}

.blog-history .share-area .total{
    flex:1;
    height:100%;
    margin:0;
    background-color: #cbe9d4;
    padding:20px 13px;
    font-size:13px;
    text-align:center;
    font-weight: bold;
}

.blog-history .share-area .total > div{
    margin-bottom:13px;
}
.blog-history .share-area .total > div:last-of-type {
    margin-bottom: unset;
}


/*.blog-history .share-area .total{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}*/

.blog-history .share-area .total{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex:1;
    height:100%;
    margin:0;
    background-color: #cbe9d4;
    padding:20px 13px;
    font-size:13px;
    text-align:center;
    font-weight: bold;
}

.blog-history .share-area .total > div:last-of-type {
    margin-bottom: unset;
}

.blog-history .share-area .share-button{
    width:200px;
    height:100%;
    padding: 23px 29px 24px;
    border-radius: 5px;
    background-color: #39a154;
    color:#fff;
    border:0;
    outline:0;
    cursor:pointer;
}

.blog-history .share-area .posting-support-btn {
    width:220px;
    height: 50px;
    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;
    width:220px;
    height:50px;
    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 .total > div{
    margin:unset;
}
.blog-history .share-area .grade-info div{
    margin-bottom:10px;

}




.blog-history .mark{
    display:inline-block;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    min-width: 26px;
    height: 20px;
    line-height:20px;
    text-align: center;
    vertical-align: middle;
    padding: 0 3px;
}
.blog-history .mark.mark-red{
    background-color: #ef3d19;
}
.blog-history .mark.mark-blue{
    background-color: #223ee5;
}
.blog-history .mark.mark-dark{
    background-color: #363636;
}
.blog-history .grade-text-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

}
.blog-history .grade-text{
    display: flex;
    align-items: center;
    gap: 2px;
}
.blog-history .graph{
    display:inline-block;;
    position:relative;
    width: 15px;
    height:30px;
    border: 1px solid #d3d3d3;
    background-color: #ececec;

}
.blog-history .graph .percent{
    position:absolute;
    bottom:0px;
    left:-1px;
    width:15px;
    max-height: 30px;
    background-image: linear-gradient(to top, #13973d, #3ce370);
}

.keyword_input_box{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    background-color: white;
    padding: 30px;
    border-radius: 10px;

    display: flex;
    align-items: center;

    gap: 5px;

    z-index: 1002;

    display: none;
}

.keyword_input_box button{
    background-color: transparent;
    width: 40px;
    height: 40px;
    border: 0;
    cursor: pointer;
}

.keyword_input_box button img{
    width: 100%;
}

.campagin_search_result{
    opacity: 0;
}


.intro-container{
    width: 100%;
    height: auto;
    display: flex;
    gap: 100px;
    padding: 50px 0 100px;
}

.intro-container .menu-box {
    width: 200px;
    height: auto;
    display: flex;
    flex-direction: column;
}
.intro-container .menu-box .menu-header {
    width: 100%;
    height: 90px;
    padding: 20px 0;
    display: flex;
    align-items: flex-end;
    font-size: 22px;
    font-weight: 700;
    color: #111;
    border-bottom: 1px solid #313131;
}
.intro-container .menu-box .menus {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}
.intro-container .menu-box .menus .menu-item {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 18px;
    font-size: 15px;
    font-weight: 600;
    color: #797979;
    border-bottom: 1px solid #ddd;
}
.intro-container .menu-box .menus .menu-item.active {
    font-size: 17px;
    font-weight: 700;
    color: #111;
}
.intro-container .menu-box .menus .sub-menus {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-bottom: 1px solid #ddd;
    padding: 20px 0 20px 25px;
}
.intro-container .menu-box .menus .sub-menus .sub-menu-item {
    width: 100%;
    height: auto;
}
.intro-container .menu-box .menus .sub-menus .sub-menu-item.active a {
    color: #111;
}
.intro-container .menu-box .menus .sub-menus .sub-menu-item a {
    width: 100%;
    height: 100%;
    font-size: 15px;
    font-weight: 500;
    color: #797979;
}

.intro-container .intro-contents{
    max-width:1000px;
}
.intro-container .intro-contents .title-main-image{
    width:100%;
    text-align:center;
    margin-bottom:50px;
}
.intro-container .intro-contents .title-main-image img{

}
.intro-container .intro-contents .contents-header{
    font-size: 22px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.36;
    letter-spacing: normal;
    text-align: center;
    color: #111;
}
.intro-container .intro-contents .contents-header .sub-text{
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
    color: #111;
    margin-top:48px;
}

.intro-container .intro-contents .contents-body{
    width:100%;
    margin:90px 0;
    text-align: center;
}
.intro-container .intro-contents .contents-item{
    width:100%;
    margin-bottom: 165px;
}

.intro-container .intro-contents .contents-body .image{
    margin-bottom: 70px;
}
.intro-container .intro-contents .contents-body .image img{
    width:100%;

}

.intro-container .intro-contents .contents-body .inner-title{
    text-align: center;
    font-size: 26px;
    font-weight: 500;
    line-height: 50px;
    color: #111111;
    margin-bottom: 51px;
    word-break: keep-all;
}

.intro-container .intro-contents .contents-body .inner-title .highlight{
    font-size: 36px;
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.39;
    letter-spacing: normal;
    text-align: center;
    color: #30a254;

}
.intro-container .intro-contents .contents-body .inner-text .description{
    text-align: center;

}
.intro-container .intro-contents .contents-body .inner-text .description li{
    display: flex;
    align-items:  center;
    justify-content: center;
    gap: 5px;
    font-size: 18px;
    line-height: 2.22;
    position:relative;
}
.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/cover;

}


.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: 105px;
}

.intro-contents.use .contents-body .contents-item{
    margin-bottom: 90px;
}
.intro-contents.use .contents-body .contents-item .title{
    font-size: 32px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.38;
    letter-spacing: normal;
    text-align: center;
    color: #111;
    padding:40px 0;
}
.intro-contents.use .contents-body .contents-item .description{

    font-size: 20px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: center;
    color: #111;
}

.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:15px auto 25px;
    font-size: 18px;
    font-weight: 500;
}
.intro-contents.use .contents-body .contents-item .description ul.service-box{
    display:flex;
    flex-wrap:wrap;
    align-items: center;
    gap:30px;
    justify-content: center;
}
.intro-contents.use .contents-body .contents-item .description ul.service-box li{
    display:flex;
    align-items: center;
    justify-content: center;
    width : calc(50% - 30px);
    height:120px;
    padding: 38px 15px;
    border-radius: 20px;
    border: 1px solid #dedede;
    box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.08);
    background-color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.44;
    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 : 22px;
    font-weight: 600;
}

.intro-contents.use .contents-body .contents-item .description ul.three-box{
    display:flex;
    align-items: center;
    gap:50px;
    justify-content: center;
}
.intro-contents.use .contents-body .contents-item .description ul.three-box li{
    display: flex;
    justify-content: center;
    align-items: center;
    width:calc(100%/3 - 50px);
    height: 100px;
    border-radius: 30px;
    border:1px solid #898989;
    font-weight: 500;
    font-size:17px;
    line-height: 1.53;
}

.intro-contents.use .contents-body .contents-item .description ul.three-box li.green-bg{
    color:#fff;
    background: #30a254;
    border: none;
}

.intro-contents.use .contents-body .contents-item .how-to-wrap .title{
    font-size: 24px;
    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:25px;
}
.intro-contents.use .contents-body .contents-item .how-to-wrap .how-to-item .item-title{
    font-size: 18px;
    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: 40px;
    height: 40px;
    background-color: #0d682a;
    padding: 10px 0;
    color:#fff;
    border-radius: 40px;
}
.intro-contents.use .contents-body .contents-item .how-to-wrap .how-to-item .item-title .description{
    font-size: 16px;
    line-height: 30px;
    font-weight: 500;
    text-align: left;
    word-break: keep-all;
}
.intro-contents.use .contents-body .contents-item .how-to-wrap .how-to-item .item-title .description .sub{
    font-weight: 400;
}
.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 ;
}
.intro-contents.use .contents-body .contents-item .how-to-wrap .how-to-item .item-title .description .button.green{
    background: #30a254;
    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;
}




/* 버튼 이펙트 */

.example_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 40px;
    border-radius: 5px;
    background-color: #30a254;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    position: relative;
    overflow: hidden;
}

#content .effect.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;
}

#content .effect.yellow {
    background-image: linear-gradient(65deg,
            #36a253,
            #babd00,
            #36a253,
            #babd00,
            #36a253,
            #babd00);
    background-size: 800% 550%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
}
#content .effect.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.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.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{
    animation: rotate 15s infinite linear, bright 2s infinite linear;
}


.modal-area .effect{
    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{
    max-width:500px;
    top:0;
    left:100px;
    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;
}

.popup-box#info_popup .posting-support-btn {

    width: 340px;
    height: 50px;
    border-radius: 5px;
    background-color: #39a154;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.popup-box#info_popup .posting-support-btn img{
    width: 7px;
    height: 11px;
}
.popup-box#info_popup p{
    line-height:2;
}
.popup-box#info_popup .diagnosis {
    color: white;
    font-weight: bold;
    display: inline-block;
    line-height: 30px;
    width: 50px;
    text-align:center;
    font-size: 13px;
    border: 0;
    border-radius: 10%;
}




.quation_mark {
    display: inline-flex;
    position: relative;
}

.quation_mark .mark_string {
    display: flex;
    color: green;
    border: 1px solid green;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    justify-content: center;
    align-items: center;
    cursor: pointer;

}

.quation_mark_content {
    display: none;
    background: white;
    position: absolute;
    bottom: 28px;
    right: 10px;
    white-space: nowrap;
    padding: 10px;
    border: 1px solid #000;
    border-radius: 10px;
    line-height: 1.6;
    text-align: start;
}

.quation_mark:hover .quation_mark_content {

    display: flex;

}

.content_history_paging {
    display: flex;
    margin-bottom: 15px;
    gap: 5px;
}

.content_history_paging .content_history_item:hover,
.content_history_paging .content_history_item.active {
    background-color: #30a254;
    color: white;
}

.content_history_paging .content_history_item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: 1px solid #30a254;
    background-color: transparent;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    color: #30a254;
    transition: .2s;
}


.layer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 450px;
    background-color: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 10px;
    overflow: hidden;
    z-index: 99999;
}