@charset "utf-8";

@media all {
    /*comment*/
    #comment_wrap {
        margin-top:30px;
        padding-bottom: 15px;
        /*margin-right: 180px;*/
    }

    #comment_wrap .login_comment_wrap {
        display: flex;
        flex-direction: column;
        width:100%;
    }
    #comment_wrap .login_comment_wrap .login_comment_text {
        width: 100%;
        height: 105px;
        padding: 10px;
        border: 1px solid #ebebeb;
        box-sizing: border-box;
    }
    #comment_wrap .login_comment_wrap .login_comment_img {
        width: 55px;
        padding:8px;
    }
    #comment_wrap .login_comment_wrap .login_comment_content {
        width: calc(100% - 55px);
        overflow: hidden;
    }
    #comment_wrap .login_comment_wrap .login_comment_btn {
        text-align: right;
        margin-top:25px;
    }
    #comment_wrap .login_comment_wrap .login_comment_btn #btn_comment_login{
        margin-left:2px;
    }



    #comment_wrap .comment_best_web > span {
        width: 26px;
        font-size: 10px;
        line-height: 13px;
        color: #ffffff;
        background-color: #ff5858;
        padding: 0 2px;
        margin-left: 5px;
        margin-top: 1px;
    }

    #comment_wrap .comment_best_mobile {
        display: none;
    }

    /*열려있는 맨위 첫 댓글 적는 부분*/
    #comment_wrap .comment_total_number {
        font-weight: 700;
        font-size: 18px;
        padding: 15px 0;
        border-bottom: 1px solid #dadada;
        color: #A197FC;
        /*font-size: 16px;*/
    }

    #comment_wrap .comment_writing_section {
        display: flex;
        width:100%;
        overflow: hidden;
        margin: 15px 0 25px;
    }

    #comment_wrap .comment_writing_textarea {
        float: left;
        width: 490px;
        box-sizing: border-box;
        overflow: hidden;
        padding-top: 3px;
    }

    #comment_wrap .comment_register_area textarea.comment_text_input {
        width: 100%;
        height: 105px;
        padding: 10px;
        border: 1px solid #ebebeb;
        box-sizing: border-box;
        font-family: 'Noto Sans KR', sans-serif;
        resize: none;
    }


    #comment_wrap .comment_register_wrap {
        overflow: hidden;
        margin: 8px 0;
    }

    #comment_wrap .comment_file_upload {
        position: relative;
        float: left;
        width: 30px;
        height: 30px;
        margin-top:14px;
        overflow: hidden;
        cursor: pointer;
    }

    #comment_wrap .comment_file_hidden {
        position: absolute;
        top: 0;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    #comment_wrap .comment_upload_image_preview_area {
        display: none;
        float: left;
        width: 120px;
        max-height: 120px;
        margin-top:10px;
    }

    #comment_wrap .comment_register {
        float: right;
        /*width: 93px;*/
        padding: 5px 0;
        margin-top:10px;
    }


    #comment_wrap .upload_image_preview_area {
        position: relative;
    }

    #comment_wrap .upload_image_preview_area_image_box {
        position: relative;
        padding-top: 8px;
    }

    #comment_wrap .upload_image_preview_area_image {
        position: absolute;
        right: -7px;
        top: 1px;
        cursor: pointer;
    }

    #comment_wrap .upload_image_preview_area > div {
        float: left;
    }

    #comment_wrap .upload_image_preview_area_image_box img {
        max-width: 120px;
        max-height: 110px;
    }


    /*댓글들 리스트 부분(베스트댓글)*/
    #comment_wrap .best_comment_list_wrap {
        margin: 0 auto;
        overflow: hidden;
        width: 605px;
        margin-left: 75px;
    }

    #comment_wrap .best_comment_list_wrap .option_row > .title {
        font-size: 16px;
    }

    #comment_wrap .best_comment_list_wrap .option_row > .title span {
        margin-left:3px;
        font-size: 14px;
        color: #A197FC;
    }

    #comment_wrap .best_comment_list_wrap .option_row {
        width: 550px;
        border-bottom: 1px solid #dedede;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-bottom: 12px;
    }


    /*댓글들 리스트 부분(일반댓글)*/
    #comment_wrap .comment_list_wrap {
        margin: 0 auto;
        overflow: hidden;
        max-width: 540px;

        /*margin-left: 86px;*/
    }

    #comment_wrap .comment_list_wrap .option_row {
        max-width: 540px;
        border-bottom: 1px solid #dedede;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-bottom: 12px;
    }

    #comment_wrap .comment_list_wrap .option_row > .title {
        font-size: 16px;
        margin-bottom: 5px;
    }

    #comment_wrap .comment_list_wrap .option_row > .title span {
        margin-left:3px;
        font-size: 14px;
        color: #A197FC;
    }

    #comment_wrap .comment_list_wrap .option_row > .more {
        font-size: 14px;
    }

    #comment_wrap .comment_list_wrap .option_row > .more img {
        vertical-align: middle;
        margin-left: 2px;
    }

    #comment_wrap .comment_list_wrap .comment_list {
        /*display: none;*/
    }

    #comment_wrap .comment_item {
        max-width: 540px;
        /*overflow: hidden;*/
    }

    #comment_wrap .comment_item .comment_box {
        width:100%;
        display: flex;
        /*overflow: hidden;*/
        padding: 15px 0;
        border-bottom: 1px solid #ebebeb;
    }

    #comment_wrap .comment_box > div {
        /*float: left;*/
    }

    #comment_wrap .comment_box_left {
        width: 50px;
        /*overflow: hidden;*/
    }

    #comment_wrap .comment_box_right {
        /*width: calc(100% - 62px);*/
        width:100%;
    }


    #comment_wrap .comment_box_right .comment_list_info {
        height: 40px;
        display: flex;
        justify-content: space-between;
    }

    #comment_wrap .comment_box_right .comment_list_info .comment_list_info_left {
        display: inline-flex;
        align-items: center;
        /*float: left;*/
        /*overflow: hidden;*/
        margin-top: 4px;
    }

    #comment_wrap .comment_box_right .comment_list_info .comment_list_info_left .comment_list_writer {
        display: inline-flex;
        align-items: center;
        padding-right:10px;
        font-size: 14px;
        font-weight: bold;
    }

    #comment_wrap .comment_box_right .comment_list_info .comment_list_info_left .comment_list_writer .comment_writing_img {
        width: 46px;
    }

    #comment_wrap .comment_box_right .comment_list_info .comment_list_info_left .comment_list_writer .comment_writing_img img {
        max-width: 40px;
        max-height:40px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        /*margin: 0 5px 0 12px;*/
        vertical-align: middle;
    }

    #comment_wrap .comment_box_right .comment_list_info .comment_list_info_left li {
        /*float: left;*/
    }

    #comment_wrap .comment_box_right .comment_list_info li.comment_list_date {
        font-size: 13px;
        color: #777777;
    }

    #comment_wrap .comment_box_right .comment_list_info .comment_list_info_left li.recomment_number {
        font-size: 13px;
        font-weight: 500;
    }

    #comment_wrap .comment_box_right .comment_list_info .comment_list_info_right {
        position: relative;
        /*float: right;*/
        display: inline-flex;
        align-items: center;
    }


    /* comment_reply_box -> 답글 */
    #comment_wrap .comment_reply_box .comment_list_info_right {
        margin-right: -5px;
    }

    #comment_wrap .comment_list_info .comment_list_info_right:hover .comment_option_more_list {
        display: block;
    }

    #comment_wrap .comment_list_info .comment_list_info_right .comment_option_more {
        cursor: pointer;
        margin-right: 6px;
    }

    #comment_wrap .comment_list_info .comment_list_info_right .comment_option_more2 {
        position: absolute;
        top: 30px;
        right: 0;
    }

    #comment_wrap .comment_option_more img {
        float: right;
    }

    #comment_wrap .comment_option_more_list {
        background-color: #fff;
        /*display: none;*/
        width: 60px;
        -webkit-box-shadow: 0px 1px 1px 1px #ddd;
        -moz-box-shadow: 0px 1px 1px 1px #ddd;
        box-shadow: 0px 1px 1px 1px #ddd;
    }

    #comment_wrap .comment_option_more_list > li {
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    #comment_wrap .comment_option_more_list > li:hover {
        background-color: #f5f5f5;
        cursor: pointer;
    }

    #comment_wrap .comment_content {
        line-height: 1.5em;
        margin-bottom: 10px;
        word-break: break-all;
    }

    #comment_wrap .comment_content img {
        margin: 5px 0;
        display: block;
    }

    #comment_wrap .comment_reply_box .comment_vote_wrap {
        margin-right: 6px;
    }


    #comment_wrap .comment_vote_wrap {
        overflow: hidden;
    }

    #comment_wrap .comment_vote_wrap span {
        padding: 8px;
    }

    #comment_wrap .btn_comment_reply {
        float: left;
        cursor: pointer;
    }

    #comment_wrap .comment_vote_wrap > .comment_vote {
        float: right;
        margin-top: 11px;
    }

    #comment_wrap .comment_vote {
        overflow: hidden;
    }

    #comment_wrap .comment_vote li {
        float: left;
        color: #a7a7a7;
        font-size: 13px;
        font-weight: 500;
    }

    #comment_wrap .comment_vote_up {
        cursor: pointer;
    }

    #comment_wrap .comment_vote_down {
        margin-top: 2px;
        cursor: pointer;
    }

    #comment_wrap .comment_vote .middle_dot {
        margin: 0 7px;
        font-size: 19px;
        line-height: 1em;
    }

    #comment_wrap .comment_vote img {
        margin-right: 5px;
    }

    #comment_wrap .vote_up_voted {
        color: #5e8dd7 !important;
    }

    #comment_wrap .vote_down_voted {
        color: #f52057 !important;
    }


    /*댓글,답글 수정하는 부분*/
    #comment_wrap .comment_content_modify {
        overflow: hidden;
        text-align: right;
        margin-top: 8px;
        min-height: 70px;
    }

    #comment_wrap .comment_content_modify > textarea {
        /*width: 100%;*/
        width: 93%;
        height: 105px;
        padding: 10px;
        margin-right:12px;
        border: 1px solid #ebebeb;
        box-sizing: border-box;
        font-family: 'Noto Sans KR', sans-serif;
    }

    #comment_wrap .comment_modify_option_wrap {
        overflow: hidden;
        margin: 8px 0;
    }

    #comment_wrap .comment_modify_option_wrap .comment_modify_file {
        float: left;
        overflow: hidden;
        width: 160px;
        max-height: 120px;
    }

    #comment_wrap .comment_modify_option_wrap .comment_modify_file > div {
        float: left;
    }

    #comment_wrap .comment_modify_option_wrap .comment_modify_file > div.upload_image_preview_area {
        width: 120px;
    }

    #comment_wrap .comment_modify_option {
        float: right;
        /*width: 198px;*/
        overflow: hidden;
        margin: 5px 0 3px 0;
    }

    #comment_wrap .comment_modify_option span {
        float: left;
        padding: 7px 0;
    }

    #comment_wrap .comment_modify_option span.btn_comment_modify_cancel {
        /*width: 93px;*/
        margin-right: 12px;
    }

    #comment_wrap .comment_modify_option span.btn_comment_modify_submit {
        /*width: 93px;*/
    }

    /*댓글,답글 수정하는 부분 끝*/
    /*댓글들 리스트 부분(일반댓글) 끝*/
    /*대댓글*/
    #comment_wrap .comment_reply_box {
        padding: 15px;
        box-sizing: border-box;
        overflow: hidden;
        background-color: #fafafa;
    }

    #comment_wrap .reply_arrow {
        width: 28px;
        padding:10px 0 0 4px;
    }

    #comment_wrap .recomment_box_left {
        float: left;
        width: 50px;
    }

    #comment_wrap .recomment_box_left .comment_writing_img {
        width: 40px;
        height: 40px;
    }

    #comment_wrap .recomment_box_left .comment_writing_img img {
        width: 40px;
        height: 40px;
    }

    #comment_wrap .recomment_box_right {
        float: left;
        /*width: 435px;*/
        width: calc(100% - 30px);

        padding-top: 2px;
    }

    /*답글 쓰는 부분*/
    #comment_wrap .comment_content_reply {
        overflow: hidden;
        min-height: 70px;
        /*float: none !important;*/
        display: flex;
        justify-content: space-between;
    }

    #comment_wrap .comment_reply_left {
        /*float: left;*/

        display: inline-flex;
        justify-content: center;
        width: 50px;
    }

    #comment_wrap .comment_reply_left .comment_writing_img {
        width: 40px;
        height: 40px;
    }

    #comment_wrap .comment_reply_left .comment_writing_img img {
        width: 40px;
        height: 40px;
    }

    #comment_wrap .comment_reply_right {
        /*float: right;*/
        width: calc(100% - 55px);
        padding-right:10px;
    }

    #comment_wrap .comment_content_reply textarea {
        width: 100%;
        height: 105px;
        line-height: 1.5em;
        padding: 10px;
        border: 1px solid #ebebeb;
        box-sizing: border-box;
        font-family: 'Noto Sans KR', sans-serif;
        resize: none;
    }

    #comment_wrap .recomment_btn_wrap {
        float: right;
        overflow: hidden;
        margin-top: 14px;
        width:100%;
        /*max-width: 458px;*/
    }

    #comment_wrap .comment_reply_bottom_right span {
        float: left;
        /*padding: 7px 0;*/
    }

    #comment_wrap .comment_reply_bottom_right .comment_file_upload {
        float: left;
    }

    #comment_wrap .recomment_btn_wrap .comment_reply_bottom_right {
        float: right;
        margin: 10px 0;
    }

    #comment_wrap .recomment_btn_wrap .comment_reply_bottom_right span {
        float: left;
        font-weight: 500;
        /*width: 93px;*/
    }

    #comment_wrap .btn_comment_reply_cancel {
        /*width: 65px;*/
        margin-right: 12px;
    }

    #comment_wrap .btn_comment_reply_submit {
        /*width: 93px;*/
    }

    #comment_wrap .width88 {
        width: 88px;
    }

    /*대댓글 끝*/
    /*comment end*/



    #comment_wrap .paging{
        display: flex;
        justify-content: center;
        margin: 30px 0 10px;
    }

}



@media (max-width: 449px) {

    #comment_wrap .comment_box_right .comment_list_info {
        height:64px;
        margin-bottom: 10px;
    }
    #comment_wrap .comment_box_right .comment_list_info .comment_list_info_left {
        flex-direction: column;
    }
    #comment_wrap .comment_box_right .comment_list_info .comment_list_info_right {
        align-items: flex-start;
    }

    /*#comment_wrap .recomment_btn_wrap{
        display: flex;
        flex-direction: column;
    }
    #comment_wrap .recomment_btn_wrap .comment_reply_bottom_right > span{
        float: right;
        margin-top:6px;
        margin-left:6px;
    }*/
    #comment_wrap .recomment_btn_wrap .comment_reply_bottom_right{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        text-align: right;
    }
    #comment_wrap .recomment_btn_wrap .comment_reply_bottom_right > span{
        display: inline-block;
        margin-top:6px;
        margin-left:6px;
    }
}