@charset "UTF-8";

@import url(reset.css);
@import url(font.css);
@import url(swiper-bundle.min.css);
@import url(jquery-ui.min.css);

@import url(astro/astro.css?v=3);
@import url(astro/astro_m.css);
@import url(astro/astro_mbti.css);
@import url(astro/astro_mbti_m.css);

@import url(science/science.css?v=4);
@import url(science/science_m.css?v=4);

/* 글쓰기 평가 */
.evaluation {
    margin-bottom: 40px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    overflow: hidden;
}

.evaluation h4 {
    position: relative;
    height: 39px;
    line-height: 39px;
    padding-left: 52px;
    font-size: 18px;
    background: #eb4e44 url(http://img.dongascience.com/kids2016/images/common/ico_evaluation.png) 10px 7px no-repeat;
    color: #fff;
}

.evaluation h4 span {
    position: absolute;
    font-weight: normal;
}

.evaluation h4 span.name {
    right: 130px;
}

.evaluation h4 span.date {
    right: 20px;
}

.evaluation p {
    padding: 30px;
    line-height: 1.6;
    font-size: 18px;
}

/*.cnt{ position:absolute; top:5%; left:75%; min-width:18px; padding:1.4 3.55px; background:#fff; border:1px solid #e83428; border-radius:10px; color:#e83428; box-sizing:border-box;}*/
/* 컬러 */
.card_list {
    margin: 0 -20px;
}

.card_list_li {
    width: 25%;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.card_list .card_item {
    padding: 10px 10px 20px;
    background-color: #fff;
    border-radius: 24px;
    -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
}

.card_list .card_item_top {
    position: relative;
    padding-right: 30px;
}

.card_list .card_item_top_link {
    position: absolute;
    width: 30px;
    height: 40px;
    right: 0;
    top: 0;
    background-image: url(../../images/ico/arrow_next.svg);
    background-repeat: no-repeat;
    background-position: center center;
}

.card_list .card_item_top_tit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: "Godo";
    font-weight: bold;
    z-index: #212121;
}

.card_list .card_item_top_tit img {
    margin-right: 5px;
}

.card_list .card_item_link {
    display: block;
}

.card_list .card_item_link .tit {
    font-size: 13px;
    line-height: 18px;
    max-height: 36px;
    letter-spacing: -0.13px;
    margin-top: 8px;
    font-weight: normal;
}

.card_list .card_item_link .writer_set {
    margin-top: 11px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-right: 10px;
}

.main_cont_wrap {
    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    padding-bottom: 50px;
}

.main_sec {
    padding-top: 50px;
}

.main_sec_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.main_sec_wrap.reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.main_sec_wrap.col2 {
    margin: 0 -20px;
}

.main_sec_wrap.col2 .main_sec {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}

.main_sec_wrap.col2 .main_sec.s_big {
    width: 55%;
}

.main_sec_wrap.col2 .main_sec.s_small {
    width: 45%;
}

.main_sec_tit_area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 10;
}

.main_sec_tit_area.taC {
    display: block;
}

.main_sec_tit_area .main_sec_tit {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-size: 24px;
    line-height: 1.5;
    font-family: "Godo";
    font-weight: bold;
    letter-spacing: -0.6px;
    color: #212121;
}

.main_sec_tit_area .main_sec_tit.fc_white {
    color: #fff;
}

.main_sec_tit_area .main_sec_tit .sub {
    display: block;
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: -0.17px;
    font-weight: normal;
    font-family: "Noto Sans KR";
    margin-top: 4px;
}

.main_vote .main_sec_tit_area .main_sec_tit {
    letter-spacing: -1.2px;
}

.main_sec_tit_area .sub2 {
    display: block;
    font-size: 12px;
    color: #999;
    line-height: 1.42;
    letter-spacing: -0.12px;
    margin-top: 5px;
}

.main_sec_tit_area .ico_vote {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 8px;
    font-size: 11px;
    line-height: 16px;
    color: #ff5050;
    font-weight: bold;
}

.main_sec_tit_area .ico_vote i {
    width: 15px;
    height: 14px;
    background: url(../../images/ico/ico_vote.svg) no-repeat center center;
    margin-left: 5px;
}

.main_sec_tit_area .ico_play {
    margin-left: 10px;
}

.main_tv .ico_play {
    margin-bottom: 5px;
}

.main_sec_tit_area .btn_view {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 100%;
    background-image: url(../../images/ico/arrow_next.svg);
    background-size: 8px;
    background-repeat: no-repeat;
    background-position: center center;
}

.main_sec_tit_area .tag_status {
    margin-left: 5px;
}

.main_sec_tit_area .period {
    font-size: 12px;
    margin-left: 5px;
}

.main_sec.main_best {
    margin-top: 0;
    padding: 50px 0;
    background-color: #fbfbfb;
}

.main_discussion {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
}

.main_discussion_cont {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.main_discussion_cont .chart_box {
    width: 120px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-right: 20px;
}

.main_discussion_cont .txt_box {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.main_discussion_cont.no_val {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.main_discussion_cont.no_val .txt_box {
    text-align: center;
}

.main_discussion_cont.no_val .chart_box {
    display: none;
}

.main_discussion_tit {
    font-size: 18px;
    line-height: 1.44;
    font-weight: 500;
    color: #212121;
}

.main_discussion_result {
    margin-top: 10px;
}

.main_discussion_result_item {
    display: inline-block;
    vertical-align: top;
    font-size: 0;
    vertical-align: top;
}

.main_discussion_result_item+.main_discussion_result_item {
    margin-left: 20px;
}

.main_discussion_result_item i {
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 6px 0;
    margin-right: 5px;
}

.main_discussion_result_item b {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    margin-right: 5px;
}

.main_discussion_result_item span {
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    line-height: 24px;
    font-weight: 300;
    color: #424242;
}

.pie_chart_wrap {
    padding-top: 100%;
    position: relative;
}

.pie_chart_wrap .pie_chart {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: rotateX(180deg) rotateZ(90deg);
    transform: rotateX(180deg) rotateZ(90deg);
    border-radius: 50%;
    overflow: hidden;
}

.pie_chart_wrap .pie_svg {
    width: 100%;
    height: 100%;
}

.main_benefit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
}

.main_benefit_btns {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 0;
    margin: 0 -15px;
}

.main_benefit_btns li {
    width: 50%;
    padding: 0 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main_benefit_btn {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
    background-color: #fff;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px 20px 20px;
    border-radius: 8px;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.main_benefit_btn:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}

.main_benefit_btn .ico_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 48px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.main_benefit_btn .txt_box {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    line-height: 24px;
    position: relative;
    margin-top: 4px;
}

.main_benefit_btn .txt_box::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 10px;
    background-image: url(../../images/ico/arrow_next.svg);
    background-repeat: no-repeat;
    background-position: center center;
    left: 100%;
    margin-left: 10px;
    top: 50%;
    margin-top: -4px;
}

.main_about_btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -15px;
}

.main_about_btns li {
    width: 50%;
    padding: 0 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main_about_btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    height: 100%;
    border-radius: 8px;
    background-color: #fef8d9;
}

.main_about_btn .img_box {
    text-align: center;
    margin-bottom: -40px;
}

.main_about_btn .img_box img {
    max-width: 100%;
    position: relative;
    z-index: 10;
}

.main_about_btn .txt_box {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 40px 20px;
}

.main_about_btn .txt_box .tit {
    display: block;
    font-size: 18px;
    line-height: 1.28;
    letter-spacing: -0.18px;
    color: #212121;
}

.main_about_btn .txt_box .desc {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.15px;
    margin-top: 10px;
}

.main_about_btn .txt_box::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 9px;
    background-image: url(../../images/ico/arrow_go.svg);
    background-repeat: no-repeat;
    background-size: contain;
    right: 20px;
    bottom: 20px;
}

.main_about_btn:hover .txt_box::after {
    -webkit-animation: arrow 0.5s ease infinite;
    animation: arrow 0.5s ease infinite;
}

@-webkit-keyframes arrow {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes arrow {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.main_article_cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.main_article .main_sec_tit_area .logo_box {
    margin-right: 5px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.main_article .main_sec_tit_area .main_sec_tit {
    margin-right: 30px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.main_article .main_sec_tit_area .desc {
    font-size: 17px;
    color: #666;
    line-height: 1.4;
}

.main_article .book_area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-size: 0;
    padding-right: 40px;
    position: relative;
    z-index: 11;
}

.main_article .book_area .img_box {
    width: 200px;
}

.main_article .book_area .img_box+.img_box {
    margin-left: 20px;
}

.main_article .book_area .img_box .audio_sook_link {
    display: block;
}

.main_article .book_area::before {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100%;
    right: 0;
    top: 0;
    background-color: #fff;
    z-index: 0;
}

.main_article .article_area {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    padding: 20px 60px 0 40px;
    background-color: #FFFDE6;
}

.main_article .article_area_tit {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.18px;
    margin-bottom: 10px;
    color: #212121;
    position: relative;
    z-index: 10;
}

.main_article .article_area_tit span {
    font-weight: 300;
}

.main_article .article_area::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #FFFDE6;
    z-index: 10;
}

.main_article .article_area::after {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #FFFDE6;
    z-index: 0;
}

.main_article_slide {
    width: 100%;
}

.main_article_slide .main_article_item {
    width: 240px;
}

.main_article_slide .main_article_item .txt_box {
    margin-top: 10px;
}

.main_article_slide .main_article_item .txt_box .tit {
    font-size: 15px;
    letter-spacing: -0.15px;
    line-height: 20px;
    max-height: 40px;
    font-weight: normal;
}

.vote_box {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background-color: #fbfbfb;
    overflow: hidden;
    text-align: center;
}

.vote_box.on {
    border-color: rgba(30, 144, 255, 0.5);
}

.vote_box_cont {
    padding: 20px 20px 23px;
}

.vote_box_tit {
    display: block;
    font-size: 18px;
    line-height: 1.33;
    font-weight: bold;
}

.vote_box.on .vote_box_tit {
    color: #ff5050;
}

.vote_box_info {
    margin-top: 13px;
    font-size: 0;
}

.vote_box_period {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    line-height: 20px;
}

.vote_box_status {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
    padding: 0 10px;
    height: 20px;
    line-height: 19px;
    border-radius: 10px;
    font-size: 11px;
    color: #fff;
    background-color: #ccc;
}

.vote_box.on .vote_box_status {
    background-color: #ff5050;
    color: #fff;
}

.vote_box_desc {
    font-size: 14px;
    line-height: 1.36;
    color: #424242;
    margin-top: 15px;
}

.vote_box_btn {
    display: block;
    line-height: 35px;
    background-color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    border-top: 1px solid #e5e5e5;
}

.vote_box_btn span {
    display: inline-block;
    vertical-align: top;
    padding-right: 14px;
    background: url(../../images/ico/ico_arrow_next_s.svg) no-repeat right 55%;
}

.vote_box.on .vote_box_btn {
    background-color: #ff5050;
    color: #fff;
    border-top: 1px solid rgba(30, 144, 255, 0.5);
}

.vote_box.on .vote_box_btn span {
    background-image: url(../../images/ico/ico_arrow_next_s_w.svg);
}

.vote_box.off .vote_box_btn {
    pointer-events: none;
}

.main_oc_cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.main_oc_cont .oc_vid_area {
    width: 55.556%;
}

.main_oc_cont .oc_vid_box {
    border-radius: 8px;
    overflow: hidden;
}

.main_oc_cont .oc_vid_box .date_box {
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 17px;
    line-height: 40px;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10;
    color: #fff;
}

.main_oc_cont .oc_vid_box .tag_status {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #fff;
    z-index: 11;
    left: 10px;
    bottom: 10px;
    letter-spacing: -0.5px;
    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.main_oc_cont .oc_vid_box .tag_status.ty_live {
    background-color: #f00;
}

.main_oc_cont .oc_vid_box .tag_status.ty_comming {
    background-color: #ff5050;
}

.main_oc_cont .oc_vid_box .tag_status.ty_ended {
    background-color: #666;
}

.main_oc_cont .oc_vid_box .tag_status strong {
    font-size: 18px;
    line-height: 1;
    letter-spacing: 1.8px;
}

.main_oc_cont .oc_vid_box .tag_status span {
    font-size: 16px;
    line-height: 1.2;
}

.main_oc_cont .oc_vid_tit {
    display: block;
    font-size: 20px;
    line-height: 29px;
    margin-top: 10px;
    letter-spacing: -0.2px;
    font-weight: 500;
}

.main_oc_cont .oc_list_area {
    min-width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main_oc_cont .oc_list_area_inner {
    padding: 0 20px 0 40px;
    height: 377px;
    overflow-y: auto;
}

.main_oc_cont .oc_list_area_inner::-webkit-scrollbar {
    width: 4px;
}

.main_oc_cont .oc_list_area_inner::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 2px;
}

.main_oc_cont .oc_list_area_inner::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 2px;
}

.main_oc_cont .oc_list_box {
    border-radius: 4px;
}

.main_oc_cont .oc_list_box_tit {
    display: block;
    font-size: 15px;
    line-height: 1.13;
    letter-spacing: -0.15px;
    font-weight: normal;
    margin-bottom: 15px;
}

.main_oc_cont .oc_list_box_tit strong {
    font-weight: bold;
}

.main_oc_cont .oc_list_box+.oc_list_box {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #e5e5e5;
}

.main_oc_cont .oc_list li+li {
    margin-top: 18px;
}

.main_oc_cont .oc_list li .ico_status {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1.2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.comming .ico_status {
    background-color: #ff5050;
    color: #fff;
}

.ended .ico_status {
    background-color: #666;
    color: #fff;
}

.main_oc_cont .oc_list li .txt_area {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    padding-left: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main_oc_cont .oc_list li .txt_area .tit {
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: -0.13px;
}

.main_oc_cont .oc_list li .txt_area .date {
    font-size: 11px;
    line-height: 1.3;
    color: #999;
    margin-top: 4px;
}

.main_oc_cont .oc_list_link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.main_audio_slide {
    position: relative;
}

.main_audio_slide::before {
    display: none;
    content: "";
    position: absolute;
    width: 100vw;
    height: 100%;
    background-color: #FFFDE6;
    right: 100%;
    z-index: 10;
}

.main_audio_item {
    width: 240px;
}

.main_audio_item .txt_box {
    margin-top: 10px;
}

.main_audio_item .txt_box .tit {
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -0.15px;
    font-weight: normal;
    max-height: 40px;
}

.main_board_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: -29px;
}

.main_board_item {
    width: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 29px;
}

.main_board_item:nth-child(odd) {
    padding-right: 20px;
}

.main_board_item:nth-child(even) {
    padding-left: 20px;
}

.main_board_item_link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.main_board_item .txt_box {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    padding-right: 30px;
}

.main_board_item .txt_box .tit {
    font-size: 16px;
    font-weight: normal;
    line-height: 21px;
    max-height: 42px;
}

.main_board_item .txt_box .date {
    display: block;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.12px;
    color: #999;
    margin-top: 5px;
}

.main_board_item .img_box {
    width: 106px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.main_tv_cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.main_tv_cont .main_tv_vid_area {
    width: 66%;
}

.main_tv_cont .main_tv_vid_area .sc_thumb_img {
    background-color: #ff5050;
}

.main_tv_cont .main_tv_vid_area .tit {
    display: block;
    font-size: 24px;
    line-height: 1.33;
    font-weight: 500;
    color: #fff;
    margin-top: 10px;
}

.main_tv_cont .main_tv_list_area {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-left: 40px;
}

.main_tv_cont .main_tv_list_area_inner {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
    padding-bottom: 90px;
    background-color: #fff;
    border-radius: 8px;
    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    position: relative;
}

.main_tv_cont .main_tv_list_area .main_tv_list {
    max-height: 100%;
    overflow-y: auto;
    padding-right: 10px;
}

.main_tv_cont .main_tv_list_area .main_tv_list::-webkit-scrollbar {
    width: 4px;
}

.main_tv_cont .main_tv_list_area .main_tv_list::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 2px;
}

.main_tv_cont .main_tv_list_area .main_tv_list::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 2px;
}

.main_tv_cont .main_tv_list_area .btn_ytb {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 50px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 0 16px 0 20px;
    background-color: #fbfbfb;
    font-weight: bold;
}

.main_tv_cont .main_tv_list_area .btn_ytb i {
    margin-right: 10px;
}

.main_tv_cont .main_tv_list_area .btn_ytb::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 6px;
    height: 10px;
    background-image: url(../../images/ico/ico_arrow_next_s.svg);
    background-repeat: no-repeat;
    background-position: center center;
}

.main_tv_list_item+.main_tv_list_item {
    margin-top: 16px;
}

.main_tv_list_link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.main_tv_list_link .img_box {
    width: 80px;
}

.main_tv_list_link .txt_box {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    margin-left: 10px;
}

.main_tv_list_link .txt_box .tit {
    font-size: 13px;
    line-height: 18px;
    max-height: 36px;
    font-weight: normal;
}

.sep_bar {
    display: block;
    margin: 0;
    width: 100%;
    height: 10px;
    border: none;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    background-color: #f5f5f5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.sep_bar.ty_hoz {
    width: auto;
    margin-left: -20px;
    margin-right: -20px;
}

@media (max-width: 1024px) {
    .card_list {
        margin: 0 -10px;
    }

    .card_list_li {
        padding: 0 10px;
    }
}

@media (max-width: 900px) {
    .main_cont_wrap {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .main_cont_wrap .inner {
        padding: 0;
    }

    .main_sec.main_benefit {
        padding-top: 0;
        padding-bottom: 50px;
        background-color: #fbfbfb;
    }

    .main_sec.main_discussion {
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    .main_sec_wrap {
        display: block;
    }

    .main_sec_wrap.col2 {
        margin-left: 0;
        margin-right: 0;
    }

    .main_sec_wrap.col2 .main_sec {
        padding-left: 30px;
        padding-right: 30px;
    }

    .main_sec_wrap.col2 .main_sec.s_big {
        width: 100%;
    }

    .main_sec_wrap.col2 .main_sec.s_small {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .card_list {
        padding: 0;
    }

    .card_list_li {
        padding: 0 4px;
    }

    .card_list .card_item {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        -webkit-transition: -webkit-transform 0.4s ease-in-out;
        transition: -webkit-transform 0.4s ease-in-out;
        transition: transform 0.4s ease-in-out;
        transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
    }

    .card_list .swiper-slide-active .card_item {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    .main_sec_wrap.col2 .main_sec {
        padding-left: 20px;
        padding-right: 20px;
    }

    .main_sec {
        padding-top: 30px;
    }

    .main_sec_tit_area .main_sec_tit {
        font-size: 17px;
        line-height: 20px;
        letter-spacing: -0.6px;
    }

    .main_sec_tit_area .main_sec_tit .sub {
        margin-top: 4px;
    }

    .main_sec.main_best {
        padding: 30px 0;
    }

    .main_sec.main_best .inner {
        padding: 0 16vw;
    }

    .main_sec.main_benefit {
        padding-bottom: 30px;
    }

    .main_discussion_cont .chart_box {
        width: 100px;
    }

    .main_discussion_tit {
        font-size: 14px;
    }

    .main_discussion_result_item {
        display: block;
    }

    .main_discussion_result_item+.main_discussion_result_item {
        margin-top: 0;
        margin-left: 0;
    }

    .main_benefit_btns {
        margin: 0 -10px;
    }

    .main_benefit_btns li {
        padding: 0 10px;
    }

    .main_benefit_btn .txt_box::after {
        margin-left: 6px;
    }

    .main_about_btns {
        margin: 0 -10px;
    }

    .main_about_btns li {
        padding: 0 10px;
    }

    .main_about_btn .img_box {
        margin-bottom: -36px;
    }

    .main_about_btn .txt_box {
        padding: 36px 15px;
    }

    .main_about_btn .txt_box .tit {
        font-size: 14px;
    }

    .main_about_btn .txt_box .desc {
        font-size: 12px;
    }

    .main_about_btn .txt_box::after {
        bottom: 15px;
        right: 15px;
    }
}

.comments_wrap {
    background-color: #fff;
}

.comments_wrap_top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 10px;
}

.comments_wrap_top .amount {
    font-size: 14px;
    line-height: 17px;
}

.comments_wrap_top .sc_check {
    color: #666;
    font-size: 11px;
    cursor: pointer;
}

.comments_wrap_top .input_pw {
    width: 100%;
    margin-top: 10px;
    border-radius: 4px !important;
}

.comments_wrap .write_comment {
    padding: 20px;
}

.comments_wrap .txt_area {
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

.comments_wrap .txt_area .ta1 {
    height: 120px;
    width: 100%;
    color: #666;
    border: none;
    outline: none;
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.comments_wrap .txt_area_bot {
    border-top: 1px solid #f5f5f5;
    background-color: #fff;
    position: relative;
    border-radius: 0 0 2px 2px;
}

.comments_wrap .txt_area_bot .btn_apply {
    position: absolute;
    right: -1px;
    top: -1px;
    height: 36px;
    line-height: 34px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    width: 80px;
    background-color: #ff5050;
    border: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.comments_wrap .comment_reply .txt_area_bot .btn_apply {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #424242;
}

.comments_wrap .txt_area_bot .select_sticker {
    position: relative;
}

.comments_wrap .txt_area_bot .select_sticker .toggle_tab {
    display: inline-block;
    position: relative;
    vertical-align: top;
    height: 34px;
    line-height: 34px;
    font-size: 13px;
    font-weight: 500;
    color: #424242;
    padding-left: 10px;
    padding-right: 20px;
}

.comments_wrap .txt_area_bot .select_sticker .toggle_tab::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -3px;
    width: 11px;
    height: 6px;
    background-repeat: no-repeat;
    background-image: url(../../images/ico/ico_open.svg);
}

.comments_wrap .txt_area_bot .select_sticker .tabs {
    display: none;
    border-top: 1px solid #f5f5f5;
}

.comments_wrap .txt_area_bot .select_sticker .tabs.on {
    display: block;
}

.comments_wrap .txt_area_bot .select_sticker .tabs .tab_btns {
    font-size: 0;
    background-color: #fafafa;
    border-bottom: 1px solid #f5f5f5;
}

.comments_wrap .txt_area_bot .select_sticker .tabs .tab_btn {
    display: inline-block;
    margin-left: -1px;
    vertical-align: top;
    font-size: 13px;
    line-height: 34px;
    padding: 0 20px;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

.comments_wrap .txt_area_bot .select_sticker .tabs .tab_btn.on {
    position: relative;
    background-color: #fff;
    border-left: 1px solid #f5f5f5;
    border-right: 1px solid #f5f5f5;
}

.comments_wrap .txt_area_bot .select_sticker .tabs .tab_btn.on::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #fff;
    left: 0;
    bottom: -1px;
}

.comments_wrap .txt_area_bot .select_sticker .sticker_set {
    display: none;
    font-size: 0;
    max-height: 150px;
    overflow-y: auto;
}

.comments_wrap .txt_area_bot .select_sticker .sticker_set .btn_add_sticker {
    display: inline-block;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 25%;
    max-width: 98px;
    padding: 10px;
}

.comments_wrap .txt_area_bot .select_sticker .sticker_set .btn_add_sticker img {
    width: 100%;
}

.comments_wrap .txt_area_bot .select_sticker .sticker_set.on {
    display: block;
}

.comments_wrap .upload_img {
    padding-top: 56.25%;
    border-radius: 4px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    position: relative;
    margin-bottom: 4px;
}

.comments_wrap .upload_img .img_box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.comments_wrap .upload_img .img_box img {
    -ms-flex-item-align: center;
    align-self: center;
    max-width: 100%;
    max-height: 100%;
}

.comments_wrap .upload_img .hidden_file {
    opacity: 0;
    position: absolute;
    z-index: -9999;
}

.comments_wrap .upload_img .btn_upload_img {
    position: absolute;
    width: 80px;
    height: 36px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    right: 10px;
    bottom: 8px;
}

.comments_wrap .comment_paging {
    padding: 0 20px;
}

.comment_set .comment_origin {
    padding: 20px;
}

.comment_set+.comment_set {
    border-top: 1px solid #e5e5e5;
}

.comment_set .txt_area {
    margin-top: 10px;
}

.comment_set .comment_status {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-bottom: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    vertical-align: top;
    padding: 0 9px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: -0.55px;
    line-height: 22px;
    border: 1px solid transparent;
    border-radius: 8px;
}

.comment_set .comment_status img {
    width: 10px;
    margin-right: 4px;
}

.comment_set .comment_status.agree {
    border-color: #ffa500;
    color: #ffa500;
}

.comment_set .comment_status.disagree {
    border-color: #50c785;
    color: #50c785;
}

.comment_area_top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.comment_area_top .user_info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0;
}

.comment_area_top .user_info_thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #fafafa;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.comment_area_top .user_info_thumb img {
    width: 100%;
    height: 100%;
}

.comment_area_top .user_info_txt {
    padding-left: 7px;
    min-width: 0;
}

.comment_area_top .user_info_top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.comment_area_top .user_info_top .user_info_id {
    min-width: 0;
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
    color: #212121;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}

.comment_area_top .user_info_top .level {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 0 5px;
    position: relative;
    font-size: 11px;
    line-height: 15px;
    color: #fff;
    border-radius: 3px 3px 3px 0;
    margin-left: 9px;
}

.comment_area_top .user_info_top .level_arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top-width: 8px;
    border-top-style: solid;
    left: -5px;
    bottom: 0;
}

.comment_area_top .user_info_top .level b {
    display: inline-block;
    vertical-align: top;
    font-size: 13px;
    line-height: 16px;
    font-weight: bold;
}

.comment_area_top .user_info_top .level.lv1 {
    background-color: #e74c3c;
}

.comment_area_top .user_info_top .level.lv1 .level_arrow {
    border-top-color: #e74c3c;
}

.comment_area_top .user_info_top .level.lv2 {
    background-color: #e97820;
}

.comment_area_top .user_info_top .level.lv2 .level_arrow {
    border-top-color: #e97820;
}

.comment_area_top .user_info_top .level.lv3 {
    background-color: #ecb000;
}

.comment_area_top .user_info_top .level.lv3 .level_arrow {
    border-top-color: #ecb000;
}

.comment_area_top .user_info_top .level.lv4 {
    background-color: #b6ce00;
}

.comment_area_top .user_info_top .level.lv4 .level_arrow {
    border-top-color: #b6ce00;
}

.comment_area_top .user_info_top .level.lv5 {
    background-color: #55aad8;
}

.comment_area_top .user_info_top .level.lv5 .level_arrow {
    border-top-color: #55aad8;
}

.comment_area_top .user_info_top .level.lv6 {
    background-color: #3070ae;
}

.comment_area_top .user_info_top .level.lv6 .level_arrow {
    border-top-color: #3070ae;
}

.comment_area_top .user_info_top .level.lv7 {
    background-color: #8650c7;
}

.comment_area_top .user_info_top .level.lv7 .level_arrow {
    border-top-color: #8650c7;
}

.comment_area_top .user_info_top .level.lv8 {
    background-color: black;
}

.comment_area_top .user_info_top .level.lv8 .level_arrow {
    border-top-color: black;
}

.comment_area_top .user_info_date {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    color: #999;
}

.comment_area_top .utils {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-left: 10px;
}

.comment_area_top .utils .btn_like {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 9px;
    border-radius: 12px;
    line-height: 22px;
    width: auto;
    height: 24px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
}

.comment_area_top .utils .btn_like .count {
    padding-left: 4px;
    font-size: 12px;
    font-weight: 500;
}

.comment_area_top .utils .btn_report {
    margin-left: 4px;
    width: 30px;
    height: 24px;
    border-radius: 12px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: url(../../images/ico/ico_report.svg) no-repeat center center;
    background-color: #fff;
}

.comment_area_cont {
    padding-top: 10px;
    font-size: 12px;
    line-height: 1.42;
    letter-spacing: -0.12px;
    color: #666;
}

.comment_area_cont .emo_box {
    display: block;
    width: 90px;
    margin: 10px;
}

.comment_area_cont .emo_box img {
    width: 100%;
}

.comment_area_cont img {
    max-width: 100%;
}

.comment_area_cont .img_box {
    margin: 10px 0;
}

.comment_area_cont .secret_cont {
    font-size: 13px;
    background-color: #eee;
    text-align: center;
    line-height: 50px;
}

.comment_area_cont.ty_toggle {
    max-height: 102px;
    overflow: hidden;
    min-height: 50px;
}

.comment_area_cont.ty_toggle.on {
    max-height: none;
}

.comment_area_cont.ty_toggle.on .btn_toggle_comment::before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.comment_area_cont.ty_toggle.on .btn_toggle_comment::after {
    display: none;
}

.comment_area_cont .btn_toggle_comment {
    position: absolute;
    width: 100%;
    height: 30px;
    bottom: 0;
    left: 0;
    background-color: #fbfbfb;
}

.comment_area_cont .btn_toggle_comment::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 40px;
    left: 0;
    bottom: 100%;
    background: rgb(251, 251, 251);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(251, 251, 251, 0)), to(rgb(251, 251, 251)));
    background: linear-gradient(180deg, rgba(251, 251, 251, 0) 0%, rgb(251, 251, 251) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fbfbfb", endColorstr="#fbfbfb", GradientType=1);
}

.comment_area_cont .btn_toggle_comment::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 6px;
    background-image: url(../../images/ico/arrow_bot_b.svg);
    background-repeat: no-repeat;
    background-position: center center;
    left: 50%;
    top: 50%;
    margin-left: -5px;
    margin-top: -3px;
}

.comment_area_bot {
    padding-top: 10px;
}

.comment_area_bot .comment_area_bot_btn {
    padding: 0 9px;
    height: 24px;
    line-height: 22px;
    font-size: 12px;
    color: #424242;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    background-color: #fff;
}

.comment_area_bot .comment_area_bot_btn.btn_reply {
    margin-right: 12px;
}

.comment_reply {
    display: none;
    padding: 20px;
    background-color: #fafafa;
}

.comment_reply.on {
    display: block;
}

.comment_reply_item {
    padding: 10px 0 10px 25px;
    position: relative;
}

.comment_reply_item+.comment_reply_item {
    border-top: 1px solid #e5e5e5;
}

.comment_reply_item::before {
    content: "re";
    position: absolute;
    left: 0;
    top: 10px;
    width: 20px;
    height: 14px;
    border: 1px solid rgba(255, 80, 80, 0.2);
    border-radius: 7px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    font-size: 10px;
    color: #ff5050;
    font-weight: bold;
    line-height: 12px;
}

.pp_gallery {
    font-size: 0;
    margin: 0 -10px;
    margin-top: -30px;
}

.pp_gallery_item {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 30px;
}

.pp_gallery_item_link {
    cursor: pointer;
}

.pp_gallery_item .txt_box {
    margin-top: 10px;
}

.pp_gallery_item .txt_box .tit {
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    max-height: 44px;
}

.pp_gallery_item .txt_box .tit.taC {
    text-align: center;
}

.pp_gallery.ty_webtoon .pp_gallery_item .txt_box {
    margin-top: 0;
    padding: 12px 15px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 0 0 8px 8px;
    word-break: normal;
}

.pp_gallery_item .epi_list_wrap {
    display: none;
}

.pp_gallery.ty_webtoon .sc_thumb_img {
    border-radius: 8px 8px 0 0;
}

.pp_list_item+.pp_list_item {
    margin-top: 20px;
}

.pp_list.ty_freeboard .pp_list_item {
    padding-top: 15px;
    border-top: 1px solid #f1f1f1;
}

.pp_list.ty_freeboard .pp_list_item+.pp_list_item {
    margin-top: 15px;
}

.pp_list_link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.pp_list_thumb {
    width: 106px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
}

.ty_freeboard .pp_list_thumb {
    padding-left: 10px;
}

.pp_list_thumb .sc_thumb_info {
    margin-top: 5px;
}

.pp_list_thumb .status {
    position: absolute;
    z-index: 10;
    left: 0;
    top: -8px;
    padding: 0 8px;
    height: 20px;
    line-height: 19px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 10px;
    color: #fff;
}

.pp_list_thumb .status.on {
    background-color: #ff5050;
}

.pp_list_thumb .status.off {
    background-color: #ccc;
}

.pp_list_thumb .status.soon {
    background-color: #fff;
    border: 1px solid #ff5050;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 17px;
    color: #ff5050;
}

.pp_list_txt {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-item-align: center;
    align-self: center;
    min-width: 0;
    padding-left: 10px;
}

.ty_as .pp_list_txt {
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.ty_freeboard .pp_list_txt {
    padding-left: 0;
}

.pp_list_txt .tit {
    font-size: 13px;
    line-height: 18px;
    max-height: 36px;
    letter-spacing: -0.13px;
    font-weight: 500;
}

.pp_list_txt .tit .sc_ico {
    margin-right: 2px;
}

.pp_list .writer_set {
    margin-top: 6px;
}

.list_epi_item+.list_epi_item {
    border-top: 1px solid #e5e5e5;
}

.list_epi_link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 50px 0 10px;
    position: relative;
}

.list_epi_link .tit {
    min-width: 0;
    font-size: 13px;
    line-height: 50px;
    padding-right: 10px;
}

.list_epi_link .info_co {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-size: 10px;
    padding-left: 12px;
    background-image: url(../../images/ico/ico_ct_co.svg);
    background-position: 0 center;
    background-repeat: no-repeat;
    color: #666;
}

.list_epi_link .ico_arrow {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 100%;
    background-image: url(../../images/ico/ico_arrow_l.svg);
    background-repeat: no-repeat;
    background-position: center center;
}

.sub_vid_slide {
    overflow-x: auto;
    padding-bottom: 10px;
    margin-right: -20px;
}

.sub_vid_slide .sub_vid_list {
    white-space: nowrap;
    font-size: 0;
}

.sub_vid_slide .sub_vid_item {
    margin-right: 20px;
    display: inline-block;
    width: 36%;
    vertical-align: top;
}

.sub_vid_slide .sub_vid_item .txt_box {
    margin-top: 5px;
}

.sub_vid_slide .sub_vid_item .txt_box .tit {
    font-size: 12px;
    line-height: 18px;
    max-height: 36px;
    letter-spacing: -0.12px;
    font-weight: normal;
}

.list_bar li {
    position: relative;
    padding-left: 0.6em;
}

.list_bar li::before {
    content: "-";
    position: absolute;
    left: 0;
    top: 0;
}

@media (max-width: 767px) {
    .pp_gallery {
        margin-top: -20px;
    }

    .pp_gallery_item {
        margin-top: 20px;
    }

    .pp_gallery_item .txt_box {
        margin-top: 5px;
    }

    .pp_gallery_item .txt_box .tit {
        font-size: 13px;
        line-height: 18px;
        max-height: 36px;
    }

    .pp_gallery.ty_webtoon .pp_gallery_item .txt_box {
        padding: 8px 9px;
    }
}

.vp_area .vp_tit_area {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 19px;
}

.vp_area .vp_tit_area.ty_webtoon {
    padding-right: 50px;
    position: relative;
}

.vp_area .vp_tit_area.ty_webtoon .btn_like_b {
    position: absolute;
    right: 0;
    top: 0;
}

.vp_area .vp_tit_area .tag_box {
    margin-bottom: 10px;
}

.vp_area .vp_tit_area .tag_box .tag {
    display: inline-block;
    vertical-align: top;
    padding: 0 9px;
    height: 20px;
    line-height: 18px;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 500;
}

.vp_area .vp_tit_area .tag_box .tag.on {
    border-color: #ff5050;
    background-color: #ff5050;
    color: #fff;
}

.vp_area .vp_tit_area .tag_box .tag.soon {
    border-color: #ff5050;
    background-color: #fff;
    color: #ff5050;
}

.vp_area .vp_tit_area .tag_box .tag.off {
    border-color: #ccc;
    background-color: #ccc;
    color: #fff;
}

.vp_area .vp_tit_area .vp_tit {
    font-size: 20px;
    line-height: 1.3;
    color: #212121;
    font-weight: normal;
}

.vp_area .vp_tit_area .vp_tit_sub {
    display: block;
    font-size: 13px;
    line-height: 1.38;
    letter-spacing: -0.13px;
    margin-bottom: 5px;
    font-weight: normal;
}

.vp_area .vp_tit_area .vp_tit_bot {
    margin-top: 17px;
}

.vp_area .vp_tit_area .vp_tit_bot.ty_writer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.vp_area .vp_tit_area .vp_tit_bot.ty_writer .btns {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-left: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.vp_area .vp_tit_area .vp_writer {
    display: inline-block;
    vertical-align: top;
    font-size: 13px;
    line-height: 19px;
    color: #666;
    letter-spacing: -0.13px;
    margin-right: 10px;
    font-weight: normal;
}

.vp_area .vp_tit_area .vp_date {
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    line-height: 19px;
    color: #999;
    letter-spacing: 0.24px;
}

.vp_area .vp_tit_area .vp_period {
    display: block;
    font-size: 12px;
    color: #999;
    line-height: 19px;
    margin-top: 17px;
    letter-spacing: -0.13px;
}

.vp_area .vp_tit_area .vp_period strong {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-right: 4px;
}

.vp_area .vp_tit_area .vp_tit_bot~.vp_period {
    margin-top: 7px;
}

.vp_area .vp_cont_area {
    padding: 30px 0;
    font-size: 16px;
    line-height: 1.4;
}

.vp_area .vp_cont_area * {
    max-width: 100%;
}

.vp_area .vp_cont_area .btn_audio {
    margin-bottom: 20px;
}

.vp_area .vp_cont_area .btn_dl_box {
    margin-top: 20px;
}

.vp_area .vp_btn_area {
    padding-bottom: 20px;
}

.vp_area .vp_btn_area .flex_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.vp_area .vp_btn_area .flex_box .btn_like_b {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.vp_area .vp_btn_area .flex_box .btn_list {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    margin-left: 8px;
}

.vp_discussion_area {
    margin-bottom: 30px;
}

.vp_discussion_progress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.vp_discussion_progress .bar {
    height: 8px;
}

.vp_discussion_progress .bar.agree {
    background-color: #ffa500;
    border-radius: 4px 0 0 4px;
}

.vp_discussion_progress .bar.disagree {
    background-color: #50c785;
    border-radius: 0 4px 4px 0;
}

.vp_discussion_info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.vp_discussion_info .info_sec .percent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 24px;
    line-height: 35px;
    font-weight: bold;
}

.vp_discussion_info .info_sec .percent span {
    font-size: 14px;
    font-weight: 500;
}

.vp_discussion_info .info_sec .percent.agree span {
    margin-left: 5px;
}

.vp_discussion_info .info_sec .percent.disagree {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.vp_discussion_info .info_sec .percent.disagree span {
    margin-right: 5px;
}

.vp_discussion_info .info_sec .count {
    display: block;
    font-size: 11px;
    line-height: 16px;
}

.vp_discussion_best {
    margin-top: 20px;
}

.vp_discussion_best_sec+.vp_discussion_best_sec {
    margin-top: 18px;
}

.vp_discussion_best_sec .tit_area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
    line-height: 24px;
    font-weight: bold;
    color: #fff;
    border-radius: 8px 8px 0 0;
}

.vp_discussion_best_sec .tit_area .ico_thumb {
    line-height: 0;
    margin-right: 5px;
}

.vp_discussion_best_sec.agree .tit_area {
    background-color: #ffa500;
}

.vp_discussion_best_sec.disagree .tit_area {
    background-color: #50c785;
}

.vp_discussion_best_sec .cont_area {
    position: relative;
    padding: 10px 10px 42px;
    border: 1px solid #e1e1e1;
    border-top: none;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.discussion_select {
    margin-bottom: 10px;
    font-size: 0;
}

.discussion_select .btn_slct_discussion {
    display: inline-block;
    vertical-align: top;
    height: 36px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 0 10px;
    cursor: pointer;
}

.discussion_select .btn_slct_discussion+.btn_slct_discussion {
    margin-left: 10px;
}

.discussion_select .btn_slct_discussion.agree {
    border: 1px solid #ffa500;
}

.discussion_select .btn_slct_discussion.disagree {
    border: 1px solid #50c785;
}

.discussion_select .btn_slct_discussion .hidden_input {
    position: absolute;
    opacity: 0;
    z-index: -999;
    opacity: 0;
}

.discussion_select .btn_slct_discussion .hidden_input:checked~.radio_custom::after {
    display: block;
}

.discussion_select .btn_slct_discussion .btn_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    font-weight: bold;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
}

.discussion_select .btn_slct_discussion .ico_thumb {
    margin-right: 5px;
}

.discussion_select .btn_slct_discussion .radio_custom {
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin-left: 22px;
}

.discussion_select .btn_slct_discussion .radio_custom::after {
    display: none;
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    left: 50%;
    top: 50%;
    margin-left: -4px;
    margin-top: -4px;
    border-radius: 50%;
}

.discussion_select .btn_slct_discussion.agree .radio_custom::after {
    background-color: #ffa500;
}

.discussion_select .btn_slct_discussion.disagree .radio_custom::after {
    background-color: #50c785;
}

.discussion_application_top {
    padding-bottom: 20px;
}

.discussion_application_top .txt_box {
    margin-top: 20px;
}

.discussion_application_top .txt_box .tit {
    font-size: 20px;
    line-height: 1.3;
    color: #212121;
}

.discussion_application_top .txt_box p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.36;
}

.discussion_application_top .txt_box strong {
    display: block;
    font-size: 16px;
    line-height: 1.75;
    margin-top: 20px;
}

.vp_nav {
    border-top: 1px solid #ccc;
    padding-bottom: 10px;
}

.vp_nav_item+.vp_nav_item {
    border-top: 1px solid #f5f5f5;
}

.vp_nav_link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 40px;
    font-size: 12px;
    letter-spacing: -0.3px;
}

.vp_nav_link strong {
    width: 40px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.vp_nav_link p {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
}

@media (max-width: 767px) {
    .vp_area .vp_cont_area {
        padding: 20px 0;
    }
}

.wp_cont .wp_btn_list {
    margin-top: 20px;
}

.wp_cont .ta_ty1 {
    margin-top: 30px;
}

.wp_btn_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.wp_btn_list li {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.wp_btn_list li+li {
    margin-left: 10px;
}

.wp_btn_list .wp_btn {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #f5f5f5;
    border-radius: 3px;
    background-color: #fff;
    text-align: center;
    padding: 15px 0 7px;
}

.wp_btn_list .wp_btn .ico_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #fef8d9;
}

.wp_btn_list .wp_btn strong {
    display: block;
    font-size: 11px;
    line-height: 13px;
    margin-top: 5px;
    color: #212121;
    font-weight: normal;
}

.sub_vote_box {
    padding: 20px;
    border: 1px solid rgba(30, 144, 255, 0.5);
    border-radius: 8px;
}

.sub_vote_box~.pp_gallery {
    margin-top: 23px;
}

.sub_vote_top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.sub_vote_top .img_box {
    width: 50%;
}

.sub_vote_top .txt_box {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-left: 20px;
}

.sub_vote_top .txt_box .status {
    display: inline-block;
    vertical-align: top;
    padding: 0 10px;
    line-height: 24px;
    border: 1px solid #ff5050;
    border-radius: 13px;
    color: #ff5050;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 10px;
}

.sub_vote_top .txt_box .status.ended {
    border-color: #ccc;
    background-color: #ccc;
    color: #fff;
}

.sub_vote_top .txt_box .tit {
    display: block;
    font-size: 16px;
    line-height: 1.38;
    font-weight: bold;
}

.sub_vote_top .txt_box .sub_vote_desc {
    margin: 10px 0;
    font-size: 14px;
    line-height: 1.36;
}

.sub_vote_top .txt_box .period_box {
    font-size: 12px;
    line-height: 1.42;
    margin-top: 5px;
}

.sub_vote_top .txt_box .period_box .period_box_cont {
    display: inline-block;
    color: #666;
}

.sub_vote_top .txt_box .btn_enter {
    margin-top: 20px;
    display: inline-block;
    padding: 0 10px;
    height: 36px;
    line-height: 36px;
    color: #fff;
    background-color: #1e90ff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.4px;
    white-space: nowrap;
}

.sub_vote_top .txt_box .btn_enter span {
    display: block;
    padding-right: 14px;
    background: url(../../images/ico/ico_arrow_l_w.svg) no-repeat right 52%;
}

.sub_vote_top .txt_box .sub_vote_items {
    display: block;
}

.sub_vote_items {
    margin-top: 20px;
    display: none;
}

.sub_vote_items_tit {
    font-size: 16px;
    line-height: 1.38;
    font-weight: bold;
}

.sub_vote_items_cont {
    font-size: 13px;
    line-height: 1.38;
    margin-top: 5px;
}

.sub_vote_items_cont+.sub_vote_items_tit {
    margin-top: 20px;
}

.progress_wrap .progress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.progress_wrap .progress .bar {
    position: relative;
    height: 8px;
    background-color: #46b8ff;
    border-radius: 4px;
}

.progress_wrap .progress .bar .rank {
    position: absolute;
    width: 24px;
    height: 24px;
    font-size: 11px;
    line-height: 24px;
    color: #fff;
    font-weight: bold;
    border-radius: 50%;
    background-color: #46b8ff;
    right: 0;
    top: 50%;
    margin-top: -12px;
    text-align: center;
    letter-spacing: -0.4px;
}

.progress_wrap .progress .vote_count {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: bold;
    color: #46b8ff;
    padding-left: 8px;
    white-space: nowrap;
}

.sub_vote_set {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid rgba(30, 144, 255, 0.5);
    border-radius: 8px;
}

.sub_vote_set_wrap .sub_vote_set {
    margin-top: 0;
}

.sub_vote_set_wrap .sub_vote_set+.sub_vote_set {
    margin-top: 20px;
}

.sub_vote_set.ended {
    border-color: #e5e5e5;
    background-color: #fbfbfb;
}

.sub_vote_set_tit {
    display: block;
    font-size: 16px;
    line-height: 1.38;
    font-weight: normal;
}

.sub_vote_set_tit.fc_blue {
    font-weight: bold;
}

.sub_vote_set_tit .fc_blue {
    font-weight: bold;
}

.sub_vote_set_desc {
    font-size: 13px;
    line-height: 1.38;
    font-weight: 500;
    margin-top: 5px;
}

.sub_vote_set_desc.ty2 {
    margin-top: 10px;
}

.sub_vote_set .way_to_ptcp {
    margin-top: 20px;
}

.sub_vote_set .way_to_ptcp~.sub_vote_set_cont {
    margin-top: 15px;
}

.sub_vote_set_cont {
    margin-top: 10px;
}

.sub_vote_set_list li {
    font-size: 12px;
    line-height: 1.42;
}

.sub_vote_set_list li+li {
    margin-top: 12px;
}

.sub_vote_set_list li label {
    display: inline-block;
    vertical-align: top;
    padding-left: 18px;
    position: relative;
    cursor: pointer;
}

.sub_vote_set_list li label input[type=checkbox] {
    position: absolute;
    left: 0;
    top: 3px;
    margin: 0;
    width: 13px;
    height: 13px;
}

.sub_vote_set_list li .progress {
    margin-top: 5px;
}

@media (max-width: 740px) {
    .sub_vote_items {
        display: block;
    }

    .sub_vote_top .txt_box .sub_vote_items {
        display: none;
    }
}

.paging {
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.paging_list {
    margin: 0 10px;
}

.paging_list li {
    display: inline-block;
    vertical-align: top;
}

.paging_btn {
    display: block;
    width: 20px;
    height: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    color: #eee;
}

.paging_btn.current {
    font-weight: bold;
}

.paging_btn.ty_ctrl {
    background-color: #ff5050;
}

.paging_btn.ty_ctrl+.paging_btn.ty_ctrl {
    margin-left: 5px;
}

.layer_popup {
    display: none;
    position: fixed;
    z-index: 10001;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    left: 0;
    top: 0;
}

.layer_popup.on {
    display: block;
}

.layer_popup .layer_popup_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 40px 20px 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.layer_popup .layer_popup_cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-height: 100%;
    max-width: 100%;
    position: relative;
}

.layer_popup .layer_popup_contents {
    width: 700px;
    padding: 20px;
    background-color: #fff;
    max-height: 100%;
    max-width: 100%;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 12px 0 12px 12px;
}

.layer_popup .layer_popup_contents::-webkit-scrollbar {
    width: 6px;
}

.layer_popup .layer_popup_contents::-webkit-scrollbar-thumb {
    background-color: #646464;
    border-radius: 3px;
}

.layer_popup .layer_popup_contents::-webkit-scrollbar-track {
    background-color: #ccc;
    border-radius: 3px;
}

.layer_popup .close_popup {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 0;
    top: -20px;
    background-color: #fff;
    border-radius: 50%;
}

.layer_popup .close_popup::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 20px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: #333;
}

.layer_popup .close_popup::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 20px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
    background-color: #333;
}

.write_tip {
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.14px;
}

.write_tip .layer_popup_contents {
    padding-top: 40px;
    padding-bottom: 0;
}

.write_tip_tit {
    font-size: 24px;
    line-height: 1.33;
    letter-spacing: -0.24px;
    color: #212121;
}

.write_tip_introduce {
    margin-top: 20px;
}

.write_tip_introduce .img_box {
    float: right;
    margin-top: -80px;
}

.write_tip_step_item {
    display: block;
    border: 1px solid #ff5050;
    border-radius: 6px;
    padding: 20px;
    margin-top: 30px;
}

.write_tip_step_item .tit {
    display: block;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.2px;
}

.write_tip_step_item .tit~* {
    margin-top: 10px;
}

.write_tip .quote_area {
    max-width: 304px;
    margin: 30px auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    font-size: 18px;
    line-height: 1.44;
    letter-spacing: -0.18px;
}

.write_tip .quote_area .ico_quote_open {
    -ms-flex-item-align: start;
    align-self: flex-start;
    margin-bottom: 4px;
}

.write_tip .quote_area .ico_quote_close {
    -ms-flex-item-align: end;
    align-self: flex-end;
}

.write_tip .write_tip_wrap {
    margin: 30px -20px 0;
    padding: 30px 20px 40px;
    background-color: #fbfbfb;
}

.write_tip .write_tip_wrap .tit {
    display: block;
    font-size: 20px;
    letter-spacing: -0.2px;
}

.write_tip .write_tip_wrap .write_tip_ol {
    margin-top: 20px;
}

.write_tip .write_tip_wrap .write_tip_ol li {
    padding-left: 30px;
    position: relative;
}

.write_tip .write_tip_wrap .write_tip_ol li .num {
    position: absolute;
    font-family: "Godo";
    font-weight: bold;
    color: #ff5050;
    left: 0;
    top: 0;
    font-size: 20px;
    line-height: 22px;
    letter-spacing: -0.2px;
}

.write_tip .write_tip_wrap .write_tip_ol li+li {
    margin-top: 20px;
}

.reporter_card {
    max-width: 260px;
    margin: 0 auto;
}

.reporter_card_thumb_area {
    display: block;
    width: 200px;
    margin: 0 auto;
    margin-top: 10px;
}

.reporter_card_thumb {
    padding-top: 100%;
    position: relative;
}

.reporter_card_thumb::before {
    position: absolute;
    width: 100%;
    text-align: center;
    left: -50%;
    top: 50%;
    content: "PRESS";
    color: rgba(33, 33, 33, 0.1);
    font-size: 50px;
    line-height: 1;
    letter-spacing: 5px;
    -webkit-transform: translate(-22px, -50%) rotate(-90deg);
    transform: translate(-22px, -50%) rotate(-90deg);
    font-weight: bold;
}

.reporter_card_thumb .img_box {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border: 4px solid #ff5050;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 20px;
    background-image: url(../../images/common/bg_idcard.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.reporter_card_thumb .img_box img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.reporter_card_id {
    margin-top: 18px;
}

.reporter_card_id .name {
    display: block;
    font-size: 30px;
    letter-spacing: -0.3px;
    line-height: 34px;
}

.reporter_card_id .logo {
    display: block;
    margin-top: 9px;
}

.reporter_card_info {
    padding-top: 15px;
    margin-top: 20px;
    border-top: 1px solid #ccc;
}

.reporter_card_info .desc {
    font-size: 13px;
    line-height: 1.38;
    letter-spacing: -0.13px;
}

.reporter_card_info .period {
    font-size: 12px;
    line-height: 1.42;
    letter-spacing: -0.12px;
    margin-top: 5px;
    color: #999;
}

.reporter_card_info .benefit {
    margin-top: 20px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -0.12px;
    color: #212121;
}

.reporter_info_btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 0;
    margin: 0 -10px;
    margin-top: 30px;
}

.reporter_info_btns li {
    width: 50%;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.reporter_info_btn {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
    background-color: #fff;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px 20px 20px;
    border-radius: 8px;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.reporter_info_btn:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}

.reporter_info_btn .ico_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 48px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.reporter_info_btn .txt_box {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    line-height: 24px;
    position: relative;
    margin-top: 4px;
}

.reporter_info_btn .txt_box::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 10px;
    background-image: url(../../images/ico/arrow_next.svg);
    background-repeat: no-repeat;
    background-position: center center;
    left: 100%;
    margin-left: 10px;
    top: 50%;
    margin-top: -4px;
}

.caution_box {
    border: 1px solid #ff5050;
    border-radius: 6px;
    padding: 10px 10px 15px;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: -0.12px;
    margin-top: 1rem;
}

.reporter_card_inner .caution_box {
    margin-top: 30px;
}

.caution_box_tit {
    display: block;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.16px;
    margin-bottom: 8px;
}

.caution_box li+li {
    margin-top: 5px;
}

.reporter_info_top {
    text-align: center;
}

.reporter_info_top .log_msg {
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: -0.17px;
}

.reporter_info_top .name {
    display: block;
    font-size: 24px;
    line-height: 27px;
    letter-spacing: -0.24px;
    color: #212121;
}

.reporter_info_top .desc {
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: -0.17px;
    margin-top: 4px;
}

.reporter_info_top .caution {
    display: block;
    font-size: 12px;
    line-height: 1.42;
    letter-spacing: -0.12px;
    color: #999;
    margin-top: 5px;
}

.reporter_about_sec~.reporter_about_sec {
    padding-top: 40px;
}

.reporter_about_sec.greeting {
    margin-top: 1rem;
}

.reporter_about_sec.greeting h2 {
    font-size: 18px;
    line-height: 1.5;
    font-weight: normal;
    text-align: center;
}

.reporter_about_sec.greeting h2 strong {
    font-size: 24px;
}

.reporter_about_sec.greeting .img_box {
    margin-top: 30px;
}

.reporter_about_sec.qna dt {
    font-size: 16px;
    line-height: 1.38;
    letter-spacing: -0.16px;
    margin-bottom: 20px;
    font-weight: normal;
}

.reporter_about_sec.qna dd {
    font-size: 14px;
    line-height: 1.43;
    letter-spacing: -0.14px;
}

.reporter_about_sec.qna dd+dt {
    margin-top: 40px;
}

.reporter_about_sec .reporter_about_tit {
    text-align: center;
    margin-bottom: 20px;
}

.reporter_about_sec .reporter_about_tit h2 {
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.2px;
}

.reporter_about_sec .reporter_about_tit .sub {
    font-size: 14px;
    line-height: 1.43;
    letter-spacing: -0.14px;
    margin-top: 10px;
}

.reporter_about_sec .reporter_benefit_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: -20px;
    margin-left: -10px;
    margin-right: -10px;
}

.reporter_about_sec .reporter_benefit_list li {
    width: 25%;
    text-align: center;
    margin-top: 20px;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.reporter_about_sec .reporter_benefit_list .benefit_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    margin: 0 auto;
    width: 110px;
    height: 90px;
    border: 2px solid #ff5050;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 20px;
    color: #ff5050;
    font-weight: bold;
    font-family: "Godo";
}

.reporter_about_sec .reporter_benefit_list .benefit_box_num {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.16px;
}

.reporter_about_sec .reporter_benefit_list .benefit_box_tit {
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.reporter_about_sec .reporter_benefit_list .desc {
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.38;
    letter-spacing: -0.13px;
    margin-top: 8px;
    max-width: 200px;
}

.reporter_about_sec .caution_list2 {
    margin-top: 20px;
}

.reporter_about_sec .spot_list {
    margin: 0 -20px;
}

.reporter_about_sec .spot_list_wrap {
    margin-top: 30px;
}

.reporter_about_sec .spot_list_wrap .top_chk_area {
    text-align: right;
    margin-bottom: 20px;
}

.reporter_about_sec .spot_list_wrap .top_chk_area .btn_list_open {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    vertical-align: top;
    font-size: 14px;
    line-height: 20px;
}

.reporter_about_sec .spot_list_wrap .top_chk_area .btn_list_open .list_open_chk {
    margin: 0;
    margin-right: 4px;
}

.reporter_about_sec .spot_list_item {
    border-top: 1px solid #f5f5f5;
}

.reporter_about_sec .spot_list_cont {
    display: none;
    padding: 15px;
    background-color: #fbfbfb;
    border-top: 1px solid #f5f5f5;
}

.reporter_about_sec .spot_list .logo_list {
    font-size: 0;
}

.reporter_about_sec .spot_list .logo_list li {
    display: inline-block;
    vertical-align: top;
    padding: 5px;
    width: 33.33333%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.reporter_about_sec .spot_list .logo_list li a {
    display: block;
    border: 1px solid #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
}

.reporter_about_sec .spot_list .logo_list li a img {
    width: 100%;
}

.reporter_about_sec .spot_list_tit {
    padding: 0 20px;
    position: relative;
}

.reporter_about_sec .spot_list_tit .spot {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 19px;
    background-repeat: no-repeat;
    background-position: 0 center;
    background-image: url(../../images/ico/ico_loc.svg);
    font-size: 16px;
    line-height: 50px;
}

.reporter_about_sec .spot_list_tit .spot .count {
    display: inline-block;
    vertical-align: top;
    margin-left: 6px;
    font-size: 14px;
    font-weight: normal;
}

.reporter_about_sec .spot_list_tit::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 0;
    margin-top: -2px;
    width: 10px;
    height: 100%;
    background-image: url(../../images/ico/arrow_bot_b.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.spot_list_item.on .spot_list_tit::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.reporter_about_sec.id_card {
    padding-bottom: 20px;
}

.reporter_about_sec.id_card .tit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 25px;
}

.reporter_about_sec.id_card .tit img {
    margin-right: 10px;
}

.reporter_about_sec.id_card .step_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    margin-left: -10px;
    margin-right: -10px;
}

.reporter_about_sec.id_card .step_list li {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.reporter_about_sec.id_card .step_list li+li {
    border-left: 1px solid #e5e5e5;
}

.reporter_about_sec.id_card .step_list .step_tit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #ff5050;
}

.reporter_about_sec.id_card .step_list .step_tit span {
    font-size: 13px;
    line-height: 20px;
}

.reporter_about_sec.id_card .step_list .step_tit b {
    font-size: 18px;
    margin-left: 6px;
    line-height: 26px;
}

.reporter_about_sec.id_card .step_list .desc {
    font-size: 13px;
    line-height: 1.38;
    margin-top: 4px;
    letter-spacing: -0.2px;
}

@media (max-width: 767px) {
    .reporter_about_sec .reporter_benefit_list li {
        width: 50%;
    }

    .reporter_about_sec .spot_list .logo_list li {
        width: 50%;
    }
}

.fc_key {
    color: #ff5050;
}

.fc_blue {
    color: #1e90ff;
}

.fc_red {
    color: #f00;
}

.fc_lblue {
    color: #46b8ff;
}

.fc_orange {
    color: #ffa500;
}

.fc_green {
    color: #50c785;
}

.fc_yellow {
    color: #ff0;
}

.m_only {
    display: none;
}

.td_u {
    text-decoration: underline;
}

.cursor_default {
    cursor: default;
}

.cursor_pointer {
    cursor: pointer;
}

#content {
    overflow: hidden;
}

#content.ty_sub {
    padding-top: 181px;
}

#container.main {
    padding-top: 180px;
}

#container.sub_m {
    max-width: 740px;
    margin: 0 auto;
    min-height: calc(100vh - 129px);
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#container.ty_audio_ssok {
    padding-top: 40px;
}

#header.header~#container.sub_m {
    padding-top: 181px;
}

#header.sub_header~#container.sub_m {
    padding-top: 60px;
    min-height: 100vh;
    height: 100%;
}

#header.sub_header~#container.sub_m::before {
    content: "";
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;
    left: 50%;
    top: 0;
    z-index: -1;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#header.sub_header~#container.sub_m.ty_audio_ssok {
    padding-top: 40px;
}

.header {
    background-color: #fff;
    position: absolute;
    z-index: 9999;
    width: 100%;
    left: 0;
    top: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.sub .header {
    min-width: auto;
}

.header_top {
    padding: 0 40px;
}

.header_top .logo a {
    display: block;
}

.header_top_inner {
    height: 120px;
    position: relative;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: 1140px;
    margin: 0 auto;
}

.header_top_inner #advertise_top {
    position: absolute;
    right: 70px;
    transform: translateY(-10px);
}

.header_top_inner #advertise_top ul {
    width: 210px;
    height: 70px;
    overflow: hidden;
}

.header_top_inner #advertise_top p {
    text-align: right;
    padding-right: 3px
}

.header_top_inner #advertise_top p a {
    display: inline-block;
    height: 26px;
    width: 24px;
    background: url(//img.dongascience.com/news2016/images/common/ico_circle_off.png) center no-repeat;
}

.header_top_inner #advertise_top p a.on {
    background: url(//img.dongascience.com/news2016/images/common/ico_circle.png) center no-repeat;
}

.header_top_inner #advertise_top .item img {
    /* width:210px; */
    /* height:70px; */
}


.header_util {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.header_util .btn_mypage {
    display: block;
    width: 50px;
    height: 50px;
    background: url(../../images/ico/ico_mem_b.svg) no-repeat center center;
}

.header_util .btn_lm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    position: relative;
    margin-left: 10px;
}

.header_util .btn_lm .bar_box {
    width: 32px;
    height: 20px;
    position: relative;
}

.header_util .btn_lm .bar_box .bar {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #212121;
    left: 0%;
}

.header_util .btn_lm .bar_box .bar.top {
    top: 0;
}

.header_util .btn_lm .bar_box .bar.mid {
    top: 9px;
}

.header_util .btn_lm .bar_box .bar.bot {
    width: 60%;
    top: 18px;
}

.header_util .btn_sign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 20px;
}

.header_util .btn_sign.ty_login {
    margin-left: 0;
}

.header_util .btn_sign_ico {
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px auto;
}

.ty_logout .btn_sign_ico {
    background-image: url(../../images/ico/ico_sign.svg);
}

.ty_login .btn_sign_ico {
    width: 50px;
    height: 50px;
    background-image: url(../../images/ico/ico_sign_on.svg);
}

.ty_login .btn_sign_txt {
    display: none;
}

.header_util .btn_sign_txt {
    font-size: 18px;
    margin-left: 10px;
    font-weight: 500;
    margin-bottom: 1px;
    color: #ff5050;
}

.header .nav_area {
    position: relative;
    height: 60px;
}

.header .nav_area .nav {
    position: absolute;
    width: 100%;
    text-align: center;
}

.header .nav_area .nav_list li {
    display: inline-block;
    vertical-align: top;
}

.header .nav_area .nav_list li+li {
    margin-left: 50px;
}

.header .nav_area .nav_list li a {
    display: block;
    font-size: 20px;
    font-weight: bold;
    line-height: 60px;
    color: #212121;
}

.header .nav_area .nav_list li a span {
    display: block;
    position: relative;
    padding: 0 10px;
}

.header .nav_area .nav_list li.on {
    font-family: "Godo";
}

.header .nav_area .nav_list li.on a {
    font-size: 24px;
}

.header .nav_area .nav_list li.on a span::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 8px;
    background-color: rgba(255, 80, 80, 0.3);
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: -1;
}

.inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 40px;
}

.sub_inner {
    padding-left: 20px;
    padding-right: 20px;
}

.sub_wrap {
    padding-top: 30px;
    padding-bottom: 50px;
}

.menu_dep2 {
    padding: 16px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff2f2;
    text-align: center;
    position: relative;
}

.menu_dep2::before {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100%;
    background-color: #fff2f2;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: -1;
}

.menu_dep2_list {
    font-size: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow-x: auto;
}

.menu_dep2_item {
    display: inline-block;
    vertical-align: top;
}

.menu_dep2_item+.menu_dep2_item {
    margin-left: 20px;
}

.menu_dep2_link {
    display: block;
    height: 40px;
    line-height: 38px;
    color: #424242;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.menu_dep2_link.on {
    padding: 0 20px;
    background-color: #fff;
    border-radius: 20px;
    font-size: 18px;
    border: solid 1px rgba(255, 80, 80, 0.2);
    color: #ff5050;
    font-weight: bold;
}

.menu_dep3 {
    padding: 0 20px;
}

.menu_dep2~.menu_dep3 {
    margin-top: 30px;
}

.menu_dep3_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.menu_dep3_item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.menu_dep3_link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 50px;
    height: 100%;
    padding: 7px 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1.42;
    letter-spacing: -0.6px;
    text-align: center;
    color: #666;
    border-bottom: 1px solid #ccc;
}

.menu_dep3_link.on {
    color: #ff5050;
    font-weight: bold;
    border-bottom: 1px solid #ff5050;
}

.footer {
    background-color: #f5f5f5;
    padding: 20px 16px;
    text-align: center;
}

.footer_menu {
    font-size: 0;
    margin-bottom: 12px;
}

.footer_menu li {
    display: inline-block;
    vertical-align: top;
    padding: 0 10px;
    position: relative;
}

.footer_menu li::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 10px;
    background-color: #ccc;
    right: 0;
    top: 50%;
    margin-top: -5px;
}

.footer_menu li:last-child::after {
    display: none;
}

.footer_menu a {
    display: block;
    font-size: 11px;
    line-height: 1.82;
    letter-spacing: -0.55px;
}

.footer .footer_policy {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 500px;
    margin: 0 auto;
    background-color: #fff;
    text-align: left;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.footer .footer_policy_tit button {
    display: block;
    width: 100%;
    line-height: 30px;
    padding: 0 12px;
    position: relative;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

.footer .footer_policy_tit button i {
    position: absolute;
    width: 12px;
    height: 7px;
    background-image: url(../../images/ico/ico_open.svg);
    background-repeat: no-repeat;
    background-position: center center;
    right: 12px;
    top: 50%;
    margin-top: -3.5px;
}

.footer .footer_policy.on .footer_policy_tit button i {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.footer .footer_policy .txt_box {
    display: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 9px 11px;
    font-size: 10px;
    color: #666;
    line-height: 1.6;
    letter-spacing: -0.3px;
}

.footer .copy {
    font-size: 11px;
    line-height: 13px;
    font-weight: 500;
    margin-top: 12px;
}

/* btns */
.btn_area {
    font-size: 0;
}

.btn_area.ty_bot {
    margin-top: 30px;
}

.btn_area.ty_bot2 {
    margin-top: 20px;
}

.btn_area.ty_bot3 {
    margin-top: 10px;
}

.btn_area.taC {
    text-align: center;
}

.btn_area.taR {
    text-align: right;
}

.btn_area [class^=btn] {
    margin: 0 5px;
}

.btn_small {
    display: inline-block;
    vertical-align: top;
    height: 24px;
    line-height: 22px;
    padding: 0 5px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    border-style: solid;
    border-width: 1px;
}

.btn_small.white {
    color: #fff;
    border-color: #fff;
}

.btn_small.white2 {
    color: #424242;
    border-color: #fff;
    background-color: #fff;
    font-weight: 500;
}

.btn_small.white3 {
    padding: 0 10px;
    color: #424242;
    border-color: #e1e1e1;
    background-color: #fff;
    font-weight: 500;
}

.btn_small.white4 {
    padding: 0 5px;
    color: #666;
    border-color: #999;
    background-color: #fff;
    font-weight: 500;
}

.btn_small.grey {
    padding: 0 10px;
    color: #424242;
    background-color: #f5f5f5;
    border-color: #e1e1e1;
}

.btn_small.key_c {
    background-color: #ff5050;
    border-color: #ff5050;
    color: #fff;
}

.btn_save {
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../../images/ico/ico_save.svg);
}

.btn_save.white {
    background-image: url(../../images/ico/ico_save_w.svg);
}

.btn_write {
    display: inline-block;
    vertical-align: top;
    padding: 0 7px;
    border: 1px solid #ff5050;
    border-radius: 0 8px 8px 8px;
    line-height: 28px;
    height: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: bold;
    color: #ff5050;
}

.btn_write span {
    display: block;
    padding-left: 25px;
    background: url(../../images/ico/ico_pen.svg) no-repeat 0 center;
}

.btn_back {
    width: 40px;
    height: 40px;
    background: url(/images/ico/arrow_r.svg) no-repeat center center;
}

.btn_back.black {
    background-image: url(/images/ico/arrow_l_b.svg);
}

.btn_s_mid {
    display: inline-block;
    vertical-align: top;
    height: 30px;
    line-height: 28px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #ff5050;
    background-color: #ff5050;
    text-align: center;
    padding: 0 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}

.btn_s_mid.white {
    color: #ff5050;
    background-color: #fff;
}

.btn_s_mid.grey {
    border-color: #e1e1e1;
    color: #424242;
    background-color: #f5f5f5;
    padding: 0 7px;
}

.btn_mid {
    height: 36px;
    line-height: 34px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #ff5050;
    background-color: #ff5050;
    text-align: center;
    padding: 0 15px;
    min-width: 80px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

.btn_mid.white {
    color: #ff5050;
    background-color: #fff;
}

.btn_more {
    display: inline-block;
    vertical-align: top;
    width: 80px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 0 12px 0 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    height: 30px;
    border-radius: 15px;
    -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
}

.btn_more span {
    position: relative;
    display: block;
    width: 100%;
    line-height: 30px;
    font-size: 14px;
    background-image: url(/images/ico/arrow_more.svg);
    background-repeat: no-repeat;
    background-position: right 55%;
}

.btn_plus {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    margin: 0 !important;
    height: 36px;
    line-height: 36px;
    background-color: #5e25c7;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
}

.btn_plus i {
    display: inline-block;
    margin-right: 4px;
    vertical-align: top;
    width: 12px;
    height: 12px;
    position: relative;
}

.btn_plus i::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -1px;
    width: 2px;
    height: 100%;
    background-color: #fff;
    border-radius: 2px;
}

.btn_plus i::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -1px;
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
}

.btn_plus.ty_grey {
    border: 1px solid #e1e1e1;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 34px;
    background-color: #f5f5f5;
    color: #424242;
}

.btn_plus.ty_grey i::after {
    background-color: #424242;
}

.btn_plus.ty_grey i::before {
    background-color: #424242;
}

.btn_like {
    width: 24px;
    height: 24px;
    z-index: 99;
    cursor: pointer;
}

.btn_like .btn_like_chk {
    position: absolute;
    z-index: -999;
    visibility: hidden;
    opacity: 0;
}

.btn_like .btn_like_chk:checked~.ico_like {
    background-image: url(../../images/ico/ico_heart2_on.svg);
}

.btn_like .ico_like {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 16px 14px;
    background-position: center center;
    background-image: url(../../images/ico/ico_heart2.svg);
}

.btn_like_b {
    display: inline-block;
    width: 36px;
    height: 36px;
    z-index: 99;
    cursor: pointer;
}

.btn_like_b .btn_like_chk {
    position: absolute;
    z-index: -999;
    visibility: hidden;
    opacity: 0;
}

.btn_like_b .btn_like_chk:checked~.ico_like {
    background-image: url(../../images/ico/ico_vp_like_on.svg);
    background-color: #ff5050;
}

.btn_like_b .ico_like {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 16px 14px;
    background-position: center center;
    background-color: #fff;
    border: 1px solid #ff5050;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    background-image: url(../../images/ico/ico_vp_like.svg);
    background-size: 15px;
}

.btn_dl {
    display: inline-block;
    vertical-align: top;
    padding: 0 24px 0 40px;
    position: relative;
    border: 1px solid #41b5c6;
    border-radius: 4px;
    overflow: hidden;
    font-size: 12px;
    line-height: 26px;
    height: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: 500;
}

.btn_dl .logo_dl {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 100%;
    background: url(../../images/common/logo_dl.svg) no-repeat center center;
    background-color: #41b5c6;
}

.btn_dl::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 24px;
    height: 100%;
    background: url(../../images/ico/arrow_next_green.svg) no-repeat center center;
}

.btn_audio {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    border: 1px solid rgba(30, 144, 255, 0.5);
    border-radius: 0 8px 8px 8px;
    line-height: 28px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    color: #ff5050;
}

.btn_audio_inner {
    padding-left: 26px;
    background-repeat: no-repeat;
    background-position: 0 center;
    background-image: url(../../images/ico/ico_audio.svg);
}

.btn_list {
    display: inline-block;
    vertical-align: top;
    height: 36px;
    line-height: 34px;
    background-color: #f5f5f5;
    border: 1px solid #e1e1e1;
    text-align: center;
    font-size: 13px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    font-weight: 500;
}

.btn_list.w100 {
    width: 100%;
    margin: 0;
}

.btn_epi_list {
    display: inline-block;
    vertical-align: top;
    padding: 0 10px;
    border: 1px solid #ff5050;
    border-radius: 4px;
    height: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: bold;
    color: #ff5050;
}

.btn_epi_list span {
    display: block;
    padding-right: 20px;
    background: url(../../images/ico/arrow_bot.svg) no-repeat right 55%;
}

.list_top_btns {
    margin-bottom: 18px;
}

.list_top_btns .fl {
    float: left;
    margin-bottom: 10px;
}

.list_top_btns .fr {
    float: right;
}

.list_top_btns .tit {
    font-size: 16px;
    line-height: 30px;
}

.list_top_btns .discuss_msg {
    font-size: 12px;
    line-height: 1.4;
    color: #666;
}

.list_top_sec {
    margin-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: top;
    -ms-flex-align: top;
    align-items: top;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.list_top_sec .btn_box {
    padding-left: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.list_top_sec .btn_box>*+* {
    margin-left: 10px;
}

.writer_set {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.writer_set_thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.writer_set_thumb img {
    width: 100%;
    height: 100%;
}

.writer_set_txt {
    padding-left: 4px;
    min-width: 0;
}

.writer_set_info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0;
}

.writer_set .name {
    font-size: 12px;
    line-height: 18px;
    max-width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
}

.writer_set .level {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 0 5px;
    position: relative;
    font-size: 11px;
    line-height: 15px;
    color: #fff;
    border-radius: 3px 3px 3px 0;
    margin-left: 9px;
}

.writer_set .level_arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top-width: 8px;
    border-top-style: solid;
    left: -5px;
    bottom: 0;
}

.writer_set .level b {
    display: inline-block;
    vertical-align: top;
    font-size: 13px;
    line-height: 16px;
    font-weight: bold;
}

.writer_set .level.lv1 {
    background-color: #e74c3c;
}

.writer_set .level.lv1 .level_arrow {
    border-top-color: #e74c3c;
}

.writer_set .level.lv2 {
    background-color: #e97820;
}

.writer_set .level.lv2 .level_arrow {
    border-top-color: #e97820;
}

.writer_set .level.lv3 {
    background-color: #ecb000;
}

.writer_set .level.lv3 .level_arrow {
    border-top-color: #ecb000;
}

.writer_set .level.lv4 {
    background-color: #b6ce00;
}

.writer_set .level.lv4 .level_arrow {
    border-top-color: #b6ce00;
}

.writer_set .level.lv5 {
    background-color: #55aad8;
}

.writer_set .level.lv5 .level_arrow {
    border-top-color: #55aad8;
}

.writer_set .level.lv6 {
    background-color: #3070ae;
}

.writer_set .level.lv6 .level_arrow {
    border-top-color: #3070ae;
}

.writer_set .level.lv7 {
    background-color: #8650c7;
}

.writer_set .level.lv7 .level_arrow {
    border-top-color: #8650c7;
}

.writer_set .level.lv8 {
    background-color: black;
}

.writer_set .level.lv8 .level_arrow {
    border-top-color: black;
}

.writer_set_v {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0;
}

.writer_set_v .writer_set_thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.writer_set_v .writer_set_thumb img {
    width: 100%;
    height: 100%;
}

.writer_set_v .writer_set_txt {
    padding-left: 8px;
    min-width: 0;
}

.writer_set_v .writer_set_info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0;
}

.writer_set_v .name {
    word-break: break-all;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 500;
    min-width: 0;
}

.writer_set_v .level {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 0 5px;
    position: relative;
    font-size: 11px;
    line-height: 15px;
    color: #fff;
    border-radius: 3px 3px 3px 0;
    margin-left: 9px;
}

.writer_set_v .level_arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top-width: 8px;
    border-top-style: solid;
    left: -5px;
    bottom: 0;
}

.writer_set_v .level b {
    display: inline-block;
    vertical-align: top;
    font-size: 13px;
    line-height: 16px;
    font-weight: bold;
}

.writer_set_v .level.lv1 {
    background-color: #e74c3c;
}

.writer_set_v .level.lv1 .level_arrow {
    border-top-color: #e74c3c;
}

.writer_set_v .level.lv2 {
    background-color: #e97820;
}

.writer_set_v .level.lv2 .level_arrow {
    border-top-color: #e97820;
}

.writer_set_v .level.lv3 {
    background-color: #ecb000;
}

.writer_set_v .level.lv3 .level_arrow {
    border-top-color: #ecb000;
}

.writer_set_v .level.lv4 {
    background-color: #b6ce00;
}

.writer_set_v .level.lv4 .level_arrow {
    border-top-color: #b6ce00;
}

.writer_set_v .level.lv5 {
    background-color: #55aad8;
}

.writer_set_v .level.lv5 .level_arrow {
    border-top-color: #55aad8;
}

.writer_set_v .level.lv6 {
    background-color: #3070ae;
}

.writer_set_v .level.lv6 .level_arrow {
    border-top-color: #3070ae;
}

.writer_set_v .level.lv7 {
    background-color: #8650c7;
}

.writer_set_v .level.lv7 .level_arrow {
    border-top-color: #8650c7;
}

.writer_set_v .level.lv8 {
    background-color: black;
}

.writer_set_v .level.lv8 .level_arrow {
    border-top-color: black;
}

.writer_set_v .writer_set_date {
    display: block;
    font-size: 11px;
    line-height: 16px;
    color: #999;
}

.sub_header {
    position: fixed;
    z-index: 999;
    width: 100%;
    max-width: 740px;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 40px;
    height: 40px;
    text-align: center;
    background-color: #fff;
    -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
}

.sub_header .tit {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 16px;
    line-height: 40px;
    font-weight: normal;
}

.sub_header .btn_back {
    position: absolute;
    left: 0;
    top: 0;
    background: url("../../images/ico/arrow_l_b.svg") no-repeat center center;
}

.sub_header .btns {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 10px;
}

.sub_header .btns>* {
    margin-left: 6px;
}

.sc_tit h1,
.sc_tit h2,
.sc_tit h3,
.sc_tit h4 {
    font-weight: 500;
}

.sc_thumb {
    padding-top: 56.25%;
    position: relative;
}

.sc_thumb.ty2 {
    padding-top: 136%;
}

.sc_thumb_img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #eee;
    background-image: url(../../images/common/logo.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
}

.sc_thumb_img img {
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.sc_thumb_img:hover img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.sc_thumb_vid {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #eee;
    background-image: url(../../images/common/logo.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
}

.sc_thumb_vid .video,
.sc_thumb_vid video,
.sc_thumb_vid iframe {
    width: 100%;
    height: 100%;
}

.sc_thumb .ico_audio {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    border-radius: 0 6px 6px 6px;
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 2;
    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.sc_thumb .ico_audio.ty2 {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    left: 4px;
    top: 4px;
}

.sc_thumb .ico_audio.ty2 img {
    width: 14px;
}

.sc_thumb_info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.sc_thumb_info_item {
    font-size: 11px;
    line-height: 13px;
    color: #666;
    background-repeat: no-repeat;
    background-position: 0 center;
}

.sc_thumb_info_item+.sc_thumb_info_item {
    margin-left: 7px;
}

.sc_thumb_info_item.ct_view {
    padding-left: 10px;
    background-image: url(../../images/ico/ico_ct_play.svg);
}

.sc_thumb_info_item.ct_like {
    padding-left: 13px;
    background-image: url(../../images/ico/ico_ct_like.svg);
}

.sc_thumb_info_item.ct_co {
    padding-left: 11px;
    background-image: url(../../images/ico/ico_ct_co.svg);
    background-position: 0 60%;
}

.sc_thumb_info.ty_inside {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 0 8px 8px 0;
    z-index: 10;
    padding: 0 8px;
    height: 16px;
}

.sc_thumb_info.ty_inside .sc_thumb_info_item {
    line-height: 15px;
    color: #fff;
}

.sc_thumb_info.ty_inside .sc_thumb_info_item.ct_co {
    background-image: url(../../images/ico/ico_ct_co_w.svg);
}

.sc_thumb_info.ty_inside .sc_thumb_info_item.ct_like {
    background-image: url(../../images/ico/ico_ct_like_w.svg);
    background-position: 0 50%;
}

.list_item_info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 5px;
    white-space: nowrap;
    line-height: 0;
}

.list_item_info .audioDu {
    margin-right: 10px;
}

.list_item_info .date {
    font-size: 10px;
    line-height: 15px;
    color: #999;
}

.list_item_info .date strong {
    font-size: 11px;
}

.list_item_info>* {
    margin-right: 10px;
}

.list_item_info>*:last-child {
    margin-right: 0;
}

.sort_area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-bottom: 17px;
}

.sort_area .period {
    font-size: 12px;
    line-height: 17px;
    color: #999;
}

.sc_tag {
    display: inline-block;
    vertical-align: top;
}

.sc_tag_box {
    font-size: 0;
}

.sc_tag_box .sc_tag+.sc_tag {
    margin-left: 4px;
}

.sc_tag.finish {
    display: inline-block;
    width: 25px;
    height: 14px;
    line-height: 14px;
    background-color: #5e25c7;
    font-size: 10px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.sc_tag.up {
    width: 20px;
    height: 14px;
    line-height: 13px;
    background-color: #00bee5;
    font-size: 10px;
    color: #fff;
    text-align: center;
    border-radius: 7px;
}

.sc_tag.up span {
    display: block;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

.sc_tag.pay {
    width: 14px;
    height: 14px;
    line-height: 14px;
    background-color: #ff8000;
    font-size: 10px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
}

.sc_tag.pay span {
    display: block;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

.sc_tag.re {
    width: 20px;
    height: 14px;
    line-height: 10px;
    font-size: 10px;
    color: #424242;
    border: 1px solid rgba(0, 0, 0, 0.3);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    border-radius: 7px;
    background-color: #fff;
}

.sc_tag.re span {
    display: block;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

.sc_tag.ty_txt {
    border: solid 1px rgba(94, 37, 199, 0.3);
    border-radius: 3px;
    height: 16px;
    line-height: 13px;
    font-size: 11px;
    color: #5e25c7;
    padding: 0 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.sc_tag.service {
    background-color: #50c785;
    font-size: 10px;
    line-height: 14px;
    color: #fff;
    letter-spacing: -0.1px;
    border-radius: 3px;
    padding: 0 3px;
}

.sc_tag.hold {
    border: 1px solid #50c785;
    font-size: 10px;
    line-height: 12px;
    height: 14px;
    font-weight: 500;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #50c785;
    letter-spacing: -0.1px;
    border-radius: 3px;
    padding: 0 3px;
}

.sc_tag.false {
    border: 1px solid #ff8000;
    font-size: 10px;
    line-height: 12px;
    height: 14px;
    font-weight: 500;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #ff8000;
    letter-spacing: -0.1px;
    border-radius: 3px;
    padding: 0 3px;
}

.sc_tag.save {
    border: 1px solid rgba(0, 0, 0, 0.3);
    font-size: 10px;
    line-height: 12px;
    height: 14px;
    font-weight: 500;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #424242;
    letter-spacing: -0.1px;
    border-radius: 3px;
    padding: 0 3px;
}

.tag_status {
    display: inline-block;
    vertical-align: top;
    padding: 0 9px;
    line-height: 18px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 10px;
    height: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.tag_status.ty_ing {
    color: #fff;
    background-color: #ff5050;
}

.tag_status.ty_soon {
    color: #ff5050;
    border: 1px solid #ff5050;
    line-height: 16px;
}

.tag_status.ty_end {
    color: #fff;
    background-color: #ccc;
}

.sc_ico {
    display: inline-block;
}

.sc_ico.new {
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 11px;
    color: #fff;
    background-color: #f00;
    border-radius: 50%;
    text-align: center;
}

.caution_list_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 10px;
}

.caution_list_wrap .btn_s_mid {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.caution_list.ty_bot {
    margin-top: 10px;
}

.caution_list li {
    position: relative;
    padding-left: 12px;
    font-size: 11px;
    line-height: 1.4;
    color: #999;
}

.caution_list li::before {
    content: "※";
    position: absolute;
    left: 0;
    top: 0;
}

.caution_list li+li {
    margin-top: 4px;
}

.caution_list2 li {
    position: relative;
    padding-left: 1.2em;
    font-size: 12px;
    line-height: 1.4;
}

.caution_list2 li::before {
    content: "※";
    position: absolute;
    left: 0;
    top: 0;
}

.caution_list2 li+li {
    margin-top: 4px;
}

.asm_banner {
    display: block;
    position: relative;
    border-radius: 8px;
    background-color: #ff5050;
    color: #fff;
    padding: 15px 20px;
}

.asm_banner.ty_login {
    margin: 0 auto;
    max-width: 320px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 65px;
}

.asm_banner_tit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 16px;
    line-height: 1.3;
    font-weight: bold;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.asm_banner_tit_ico {
    margin-left: 5px;
    height: 18px;
}

.asm_banner_desc {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.3;
}

.asm_banner .ico_go {
    position: absolute;
    width: 34px;
    right: 15px;
    bottom: 15px;
    font-size: 14px;
    line-height: 22px;
}

.asm_banner .ico_go::before {
    content: "";
    position: absolute;
    background-color: #fff;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    border-radius: 1px;
}

.asm_banner .ico_go::after {
    content: "";
    position: absolute;
    background-color: #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: -1px 100%;
    transform-origin: -1px 100%;
    height: 10px;
    width: 2px;
    right: 0;
    bottom: 0;
    border-radius: 1px;
}

.way_to_ptcp_tit {
    display: inline-block;
    vertical-align: top;
    padding: 0 8px;
    font-size: 12px;
    font-weight: bold;
    line-height: 22px;
    background-color: #46b8ff;
    margin-bottom: 5px;
    color: #fff;
}

.way_to_ptcp_cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.way_to_ptcp_cont .txt_box {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 12px;
    line-height: 1.42;
    color: #666;
    padding-right: 20px;
}

.way_to_ptcp_cont .img_box {
    width: 70px;
}

.way_to_ptcp_cont .img_box img {
    width: 100%;
}

.input_ty1 {
    width: 100%;
    height: 40px;
    border-radius: 3px;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
    color: #424242;
    outline: none;
    border-radius: 4px;
}

.ta_ty1 {
    width: 100%;
    height: 120px;
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    color: #424242;
    outline: none;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.38;
}

.ta_ty1.ty_wp {
    height: 300px;
}

.ta_ty1::-webkit-scrollbar {
    width: 4px;
}

.ta_ty1::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 2px;
}

.ta_ty1::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 2px;
}

.select_ty1 {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 30px;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 30px 0 10px;
    border-radius: 4px;
    font-size: 13px;
    background-image: url(../../images/ico/arrow_bot_b.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
}

.limit_info {
    position: absolute;
    right: 5px;
    bottom: 1px;
    background-color: #fff;
    padding: 4px;
    border-radius: 4px;
    font-size: 10px;
    color: #ccc;
}

.limit_info_wrap {
    position: relative;
}

.limit_info_wrap .ta_ty1 {
    padding-bottom: 20px;
}

.limit_info .current {
    color: #777;
}

.sc_radio {
    display: inline-block;
}

.sc_radio input[type=radio] {
    position: absolute;
    z-index: -999;
    opacity: 1;
}

.sc_radio input[type=radio]:checked~.sc_radio_btn {
    border-color: rgba(94, 37, 199, 0.5);
    color: #5e25c7;
}

.sc_radio input[type=radio]:checked~.sc_radio_btn::before {
    background-color: #5e25c7;
    border-color: #5e25c7;
}

.sc_radio_btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    color: #424242;
    line-height: 22px;
    height: 24px;
    border: 1px solid #f5f5f5;
    border-radius: 12px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.sc_radio_btn::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 5px;
}

.no_result {
    display: inline-block;
    vertical-align: top;
    border: 1px solid #333;
    padding: 30px;
    text-align: center;
}

.no_result_wrap {
    text-align: center;
    margin: 50px 0;
}

.no_result .txt {
    font-size: 20px;
    line-height: 1.4;
    word-break: break-all;
}

.no_result .fc_red {
    display: inline-block;
    color: #f00;
}

.no_result .list_dot {
    display: inline-block;
    vertical-align: top;
    margin-top: 15px;
    vertical-align: top;
    text-align: left;
}

.no_result .list_dot li {
    padding-left: 10px;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
}

.no_result .list_dot li::before {
    content: "·";
    position: absolute;
    left: 0;
    top: 0;
}

.sub_sec+.sub_sec {
    margin-top: 30px;
}

.sub_tit_area {
    margin-bottom: 20px;
}

.sub_tit1 {
    font-size: 20px;
    line-height: 1.3;
    font-weight: bold;
}

@media (max-width: 1024px) {
    .header {
        min-width: auto;
    }

    .header_top {
        padding: 0 30px;
    }

    #wrap {
        min-width: auto;
    }

    .inner {
        padding: 0 30px;
    }
}

@media (max-width: 767px) {
    .m_only {
        display: block;
    }

    #content.ty_sub {
        padding-top: 100px;
    }

    #container.main {
        padding-top: 100px;
    }

    #header.header~#container.sub_m {
        /*padding-top: 90px;*/
        padding-top: 100px;
    }

    .inner {
        padding: 0 20px;
    }

    .header {
        min-width: auto;
        position: fixed;
        padding-bottom: 0;
        border-bottom: none;
        -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
        /*
    @at-root .main &.bgon {
        background-color: #fff;
        .header_top {
            .logo {
                background-image: url(../../images/LOGO.png);
            }
        }
        .nav_area {
            .nav_list li a {
                color: #212121;
            }
        }
        .header_util {
            .btn_mypage {
                background-image: url(../../images/ico/ico_mem_b.svg);
            }
            .btn_lm {
                .bar_box .bar {
                    background-color: #212121;
                }
            }
        }
    }
    */
    }

    .header_top {
        padding: 0 20px;
        padding-right: 10px;
    }

    .header_top_inner {
        height: 60px;
    }

    .header_top_inner .logo img {
        height: 29px;
    }

    .header_util {
        right: 0;
    }

    .header_util .btn_mypage {
        width: 40px;
        height: 40px;
        background-size: 20px;
    }

    .header_util .btn_lm {
        width: 40px;
        height: 40px;
        margin-left: 0;
    }

    .header_util .btn_lm .bar_box {
        width: 20px;
        height: 18px;
    }

    .header_util .btn_lm .bar_box .bar.mid {
        top: 8px;
    }

    .header_util .btn_lm .bar_box .bar.bot {
        top: 16px;
    }

    .header_util .btn_sign {
        margin-left: 0;
    }

    .header_util .btn_sign_ico {
        width: 16px;
        height: 16px;
        background-size: 15px auto;
    }

    .ty_login .btn_sign_ico {
        width: 30px;
        height: 40px;
    }

    .header_util .btn_sign_txt {
        font-size: 12px;
        margin-left: 4px;
        margin-bottom: 2px;
    }

    .header .nav_area {
        height: 40px;
    }

    .header .nav_area .nav_list {
        overflow-x: auto;
        white-space: nowrap;
    }

    .header .nav_area .nav_list li+li {
        margin-left: 10px;
    }

    .header .nav_area .nav_list li a {
        font-size: 13px;
        line-height: 40px;
        letter-spacing: -0.65px;
    }

    .header .nav_area .nav_list li a span {
        padding: 0 8px;
    }

    .header .nav_area .nav_list li.on a {
        font-size: 14px;
    }

    .menu_dep2 {
        padding: 9px 10px 0;
    }

    .menu_dep2_list {
        padding-bottom: 9px;
    }

    .menu_dep2_item+.menu_dep2_item {
        margin-left: 10px;
    }

    .menu_dep2_link {
        height: 30px;
        line-height: 28px;
        font-size: 12px;
    }

    .menu_dep2_link.on {
        padding: 0 15px;
        border-radius: 15px;
        font-size: 13px;
    }

    .menu_dep2~.menu_dep3 {
        margin-top: 10px;
    }

    .menu_dep3_link {
        min-height: 40px;
        font-size: 12px;
        letter-spacing: -0.6px;
    }

    .sc_thumb_rank {
        font-size: 30px;
        line-height: 1;
        right: 6px;
        top: -17px;
    }

    .sc_counter.ty2 .sc_counter_item {
        font-size: 10px;
        line-height: 14px;
    }

    .sc_counter.ty1 .sc_counter_item {
        font-size: 10px;
        line-height: 14px;
    }

    .btn_area.ty_bot {
        margin-top: 20px;
    }

    .btn_more {
        padding: 0;
        background-color: transparent;
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        width: auto;
        height: 26px;
    }

    .btn_more span {
        padding-right: 12px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 26px;
    }

    .top_sort_area {
        margin-bottom: 20px;
    }

    .top_sort_area .top_sort_sec+.top_sort_sec {
        margin-top: 11px;
    }

    .top_sort_area .tag_list {
        text-align: left;
    }

    .sc_search {
        width: 100%;
        max-width: none;
    }

    .top_chk_area {
        margin-bottom: 15px;
    }

    .no_result {
        padding: 15px;
    }

    .no_result_wrap {
        margin: 30px 0;
    }

    .no_result .txt {
        font-size: 16px;
    }

    .no_result .list_dot li {
        font-size: 12px;
    }
}

/*  검색  */
/*
.sc_search {
  display: inline-block;
  vertical-align: top;
  border-bottom: 1px solid #424242;
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 500px;
}
.sc_search_wrap.taC {
  text-align: center;
}
.sc_search_input {
  height: 40px;
  border: none;
  outline: none;
  width: 100%;
  font-size: 13px;
  padding-right: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: left;
}
.sc_search_btn {
  position: absolute;
  width: 40px;
  height: 40px;
  border: none;
  outline: none;
  background: url(/images/ico/Ico_search.svg) no-repeat center center;
  right: 0;
  top: 0;
}
.sc_search_input { height: 40px; border: none; outline: none; width: 100%; font-size: 13px; padding-right: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left; }*/

/** 페이징 **/
.paging {
    margin-top: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.paging_btn {
    display: block;
    width: 30px;
    height: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    color: #666;
    border: 1px solid #ddd;
    box-sizing: border-box;
    line-height: 28px;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-position: center center;
}

.paging_list {
    margin: 0 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.paging_list li+li {
    margin-left: 10px;
}

.paging_btn {
    display: block;
    width: 30px;
    height: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    color: #666;
    border: 1px solid #ddd;
    box-sizing: border-box;
    line-height: 28px;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-position: center center;
}

.paging_btn.current {
    font-weight: bold;
    color: #f6c34b;
    border-color: #f6c34b;
}

.paging_btn.first {
    margin-right: 10px;
    background-image: url(/images/common/paging_first.svg);
}

.paging_btn.prev {
    background-image: url(/images/common/paging_prev.svg);
}

.paging_btn.next {
    background-image: url(/images/common/paging_next.svg);
}

.paging_btn.last {
    margin-left: 10px;
    background-image: url(/images/common/paging_last.svg);
}

@media (max-width: 767px) {
    .paging {
        margin-top: 20px;
    }

    .paging_list {
        margin: 0 5px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .paging_list li+li {
        margin-left: 5px;
    }

    .paging_btn {
        width: 22px;
        height: 22px;
        line-height: 20px;
        font-size: 12px;
        background-size: auto 8px;
    }

    .paging_btn.first {
        margin-right: 5px;
    }

    .paging_btn.last {
        margin-left: 5px;
    }
}

/* pageing */
.paginate {
    clear: both;
    padding: 20px 0;
    text-align: center;
    font-size: 0;
    /*width:938px*/
}

.paginate a,
.paginate strong {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border: 1px solid #e4e4e4;
    width: 30px;
    height: 29px;
    text-align: center;
    line-height: 30px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 0 0 -1px;
    *margin: 0 0 0 -2px;
    font-size: 12px;
    vertical-align: top;
    background-color: #fff;
    font-weight: bold;
}

.paginate strong,
.paginate a:active,
.paginate a:hover {
    width: 28px;
    height: 27px;
    line-height: 28px;
    color: #e74c3c;
    border: 2px solid #e74c3c;
    z-index: 1
}

.paginate a.prev,
.paginate a.next {
    width: 32px;
    height: 31px;
    text-indent: -9999px;
    border: 0
}

.paginate a.prev {
    background: #999999 url(http://img.dongascience.com/dlibrary/images/common/btn_page_prev.gif) no-repeat;
}

.paginate a.next {
    background: #999999 url(http://img.dongascience.com/dlibrary/images/common/btn_page_next.gif) no-repeat
}

.paginate a.prev:hover,
.paginate a.next:hover {
    background-color: #41b5c6
}

#graphic .paginate a.next:hover,
#graphic .paginate a.prev:hover {
    background-color: #011548;
    color: #011548;
}

#graphic .paginate strong,
#graphic .paginate a:active,
#graphic .paginate a:hover {
    color: #011548;
    border-color: #011548;
}

#people .paginate a.next:hover,
#people .paginate a.prev:hover {
    background-color: #41b5c6;
    color: #41b5c6;
}

#people .paginate strong,
#people .paginate a:active,
#people .paginate a:hover {
    color: #41b5c6;
    border-color: #41b5c6;
}


.astro,
.astro_mbti,
.astro_mbti_result {
    padding: 0;

    word-break: keep-all;
    word-wrap: break-word;
}

#header {
    z-index: 500;
}

.select-mission-wrap {
    margin-bottom: 22px;
}

.select-mission {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    width: 100%;
    margin-bottom: 8px;
}

.select-mission .tab-ms {
    cursor: pointer;
    width: 50%;
    background-color: #d9d9d9;
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    color: #fff;
}

.select-mission .tab-ms.selected {
    background-color: #ff5050;
}

.press-input-with-label {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 20px;
    font-family: "Noto Sans KR-SemiBold", Helvetica;
    font-weight: 600;
    color: #424242;
    font-size: 13px;
}

.press-input-init-btn-wrapper {
    display: flex;
    width: 58px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0px 10px;
    position: relative;
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid;
    border-color: rgba(224, 224, 224, 1);
    cursor: pointer;
}

.press-input-init-btn-wrapper .text {
    position: relative;
    flex: 1;
    font-family: "Noto Sans KR-Regular", Helvetica;
    font-weight: 400;
    color: var(--neutralneutral-700);
    font-size: 12px;
    text-align: center;
    letter-spacing: 0;
    line-height: 20px;
}

.btn-area {
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 0px 0px 32px;
    position: relative;
    background-color: #ffffff;
}

.btn-secondary {
    display: flex;
    width: 80px;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0px 16px;
    position: relative;
    background-color: #ff5050;
    border-radius: 6px;
    overflow: hidden;
}

.btn-area .text-wrapper {
    color: #fff;
    position: relative;
    width: fit-content;
    margin-left: -3px;
    margin-right: -3px;
    font-family: "Noto Sans KR-Bold", Helvetica;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    letter-spacing: -0.22px;
    line-height: 19.6px;
    white-space: nowrap;
}

.btn-area .div-wrapper {
    display: flex;
    width: 80px;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0px 16px;
    position: relative;
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid;
    border-color: #ff505099;
}

.btn-area .div {
    color: #ff5050;
    position: relative;
    width: fit-content;
    margin-left: -3px;
    margin-right: -3px;
    font-family: "Noto Sans KR-Bold", Helvetica;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    letter-spacing: -0.22px;
    line-height: 19.6px;
    white-space: nowrap;
}

.nodata {
    display: none;
    width: 100%;
    min-height: 240px;
    align-items: center;
    justify-content: center;
    padding: 60px 0px;
    position: relative;
    background-color: rgba(250, 250, 250, 1);
}

.nodata .text-wrapper {
    position: relative;
    width: fit-content;
    font-family: "Noto Sans KR-Regular", Helvetica;
    font-weight: 400;
    color: rgba(33, 33, 33, 1);
    font-size: 14px;
    text-align: center;
    letter-spacing: 0;
    line-height: 20px;
}

.swal2-html-container {
    overflow-x: hidden;
}