@charset "utf-8";

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {font-size:100%;vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
table {border-collapse:collapse;border-spacing:0}
body {-webkit-text-size-adjust:none}
input[type='text'],input[type='password'],input[type='submit'],input[type='search'] {-webkit-appearance:none; border-radius:0}
input:checked[type='checkbox'] {background-color:#666; -webkit-appearance:checkbox}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button; border-radius:0}
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
body {background:#fff}
body,th,td,input,select,textarea,button {font-size:15px;line-height:1.5;font-family:'Malgun Gothic', '맑은 고딕', sans-serif;color:#000}
a {color:#000;text-decoration:none}
a:active, a:hover {text-decoration:none}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
img {vertical-align:top}
.screen_out {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px}

/* 공통, 레이아웃 */
.fwb {font-weight:bold}
.f_l {float:left}
.f_r {float:right}
.hide {display:none}
.show {display:block}
.emph_g {color:#4a72e2}
.img_cmt {overflow:hidden;background:url('/image/comment/img_cmt.png') no-repeat;font-size:0;line-height:0;text-indent:-9999px}
.thumb_profile {overflow:hidden;float:left;width:72px;height:72px;margin-right:7px;border-radius:72px;background:url('/image/comment/profile.png') no-repeat}
.tooltip {display:none;position:absolute;top:-24px;left:50%;z-index:2;width:240px;margin-left:-120px;padding:5px 0;font-size:11px;background:url('/image/comment/bg_tooltip.png') repeat;color:#fff;text-align:center}
.tooltip:after {position:absolute;bottom:-5px;left:50%;z-index:2;width:11px;height:6px;margin-left:-6px;content:'';background:url('/image/comment/ico_arr.png') no-repeat}

/* 댓글 쓰기 */
.fld_write {overflow:hidden;padding:30px 0 40px}
.sns_login {float:left;width:100%;padding-bottom:10px}
.sns_login .wrap_info {float:right;padding-top:30px;font-size:12px;line-height:1.3;text-align:right;color:#4a4a4a;letter-spacing:-1px}
.sns_login .btn_logout {float:right;margin-top:43px;padding:5px 5px 0}
.sns_login .btn_logout .img_cmt {display:block;width:56px;height:12px;background-position:-240px -60px}
.sns_login .list_sns {float:left}
.list_sns li {position:relative;z-index:1;float:left;margin-right:10px;padding-top:10px}
.list_sns button.img_cmt {display:block;width:50px;height:50px;border:0;margin:0;padding:0;outline:none}
.list_sns .btn_facebook {background-position:0 0}
.list_sns .btn_kakaotalk {background-position:-60px 0}
.list_sns .btn_naver {background-position:-120px 0}
.list_sns .btn_google {background-position:-180px 0}
.list_sns .btn_twitter {background-position:-240px 0}
.list_sns .ico_check {position:absolute;z-index:1;top:0;left:50%;width:20px;height:20px;margin-left:-10px;background-position:-210px -80px}
.list_sns li:hover {z-index:2}
.list_sns li:hover .tooltip {display:block}
.list_sns .facebook .tooltip {margin-left:-25px}
.list_sns .facebook .tooltip:after {left:8%}
.list_sns .kakaotalk .tooltip {margin-left:-85px}
.list_sns .kakaotalk .tooltip:after {left:33%}
    /* 댓글 입력창 */
.box_tf {float:left;width:100%;border:5px solid #f0f0f0;-webkit-box-sizing:border-box;box-sizing:border-box}
.box_tf .info_sns {display:block;padding:3px 4px 2px;height:24px;font-weight:bold;font-size:12px;color:#fff}
.box_tf .info_sns .txt_g {font-weight:normal;font-size:11px}
.box_tf .write {overflow:hidden;padding:9px 22px}
.box_tf .write .thumb_profile {margin:10px 7px 12px 0}
.box_tf .wrap_tf {overflow:hidden}
.box_tf .tf_cmt {overflow:hidden;width:100%;min-height:94px;padding:0 15px;border:0 none;resize:none;background-color:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;letter-spacing:-1px;color:#000}
.box_tf .tf_cmt[disabled="disabled"] {min-height:112px;padding:11px 15px}
.box_tf .tf_cmt::-webkit-input-placeholder {color:#000}
.box_tf .tf_cmt:-moz-placeholder {color:#000;opacity:1;filter:alpha(opacity=100)}
.box_tf .tf_cmt::-moz-placeholder {color:#000;opacity:1;filter:alpha(opacity=100)}
.box_tf .tf_cmt:-ms-input-placeholder {color:#000}
.box_facebook {border-color:#3757a1}
.box_facebook .info_sns {background-color:#3757a1}
.box_kakaotalk {border-color:#f8e71c}
.box_kakaotalk .info_sns {background-color:#f8e71c;color:#000}
.box_naver {border-color:#00b300}
.box_naver .info_sns {background-color:#00b300}
.box_google {border-color:#df4931}
.box_google .info_sns {background-color:#df4931}
.box_twitter {border-color:#3eafe5}
.box_twitter .info_sns {background-color:#3eafe5}
    /* 사진첨부 */
.attach_photo {display:none;overflow:hidden;margin:0 20px;padding-bottom:15px;border-top:1px solid #cecece}
.attach_photo .list_photo {overflow:hidden}
.list_photo li {position:relative;float:left;padding:15px 15px 0 0}
.list_photo .btn_delete {position:absolute;top:0;right:0;padding:9px;outline:none}
.list_photo .btn_delete .img_cmt {display:block;width:25px;height:25px;background-position:-180px -80px}
    /* 사진등록, 작성완료 버튼 */
.write_btn {overflow:hidden;width:100%;padding:10px 0}
.write_btn .btn_photo {position:relative;overflow:hidden;float:left;width:100px;height:30px;margin-left:5px}
.write_btn .btn_photo .img_cmt {display:block;width:100px;height:30px;background-position:0 -220px;cursor:pointer}
.write_btn .btn_photo .inp_file {position:absolute;top:0;left:5px;width:95px;height:30px;z-index:-1;opacity:.01;filter:alpha(opacity=1)}
.write_btn .txt_max {display:none;float:left;padding:6px 10px;font-size:12px;color:#4a4a4a}
.write_btn .bytes {float:left;padding:5px 10px;color:#000}
.write_btn .btn_write {float:left;margin-right:5px}
.write_btn .btn_write .img_cmt {display:block;width:100px;height:30px;background-position:0 -100px}

/* 댓글 목록 */
.count_cmt {overflow:hidden;padding-bottom:20px}
.count_cmt .txt_count {float:left;font-weight:bold}
.count_cmt .sort_btn {float:right;letter-spacing:-1px}
.count_cmt .sort_btn .txt_bar {padding:0 3px;font-size:11px;color:#d1d1d1}
.count_cmt .sort_btn .on {font-weight:bold;letter-spacing:-1px;color:#4a72e2}
.list_cmt {border-top:1px solid #e7e7e7;overflow:hidden;width:100%}
.list_cmt li {overflow:hidden;width:100%;padding-bottom:20px;border-bottom:1px solid #e7e7e7}
.list_cmt .thumb_profile {margin:31px 14px 0 2px}
.list_cmt .cmt_cont {overflow:hidden;margin-top:-15px}
.list_cmt .info_cmt {overflow:hidden;position:relative;height:53px;padding:53px 66px 0 0}
.info_cmt .txt_name {float:left;overflow:hidden;max-width:60%;padding-right:7px;line-height:25px;white-space:nowrap;text-overflow:ellipsis}
    /* 공유된 sns */
.share {position:relative;float:left}
.share .tooltip {top:-32px;width:180px;margin-left:-90px}
.share:hover .tooltip {display:block}
.share .img_cmt {float:left;width:25px;height:25px;margin-right:12px}
.share .ico_facebook {background-position:0 -60px}
.share .ico_kakaotalk {background-position:-30px -60px}
.share .ico_naver {background-position:-60px -60px}
.share .ico_google {background-position:-90px -60px}
.share .ico_twitter {background-position:-120px -60px}
.share .txt_date {font-size:12px;color:#9b9b9b}
    /* 신고,삭제 버튼*/
.menu_more {position:absolute;top:49px;right:9px;width:60px}
.menu_more .link_menu {display:block;padding:10px 0}
.menu_more .link_menu .img_cmt {display:block;width:32px;height:8px;margin:0 auto;background-position:-160px -60px}
.menu_more .btn_report, .menu_more .btn_delete {display:block;width:60px;height:29px}
.menu_more .btn_report {background-position:-110px -100px}
.menu_more .btn_delete {background-position:-110px -140px}
    /* 내용, 공감버튼 */
.cmt_cont .txt {padding:0 80px 32px 0;line-height:1.3;color:#4a4a4a}
.cmt_cont .wrap_like {width:100%;height:29px}
.wrap_like .btn_like {display:block;min-width:58px;height:29px;padding:0 14px;background-color:#9b9b9b;border-radius:6px;color:#fff;text-align:left;line-height:29px}
.wrap_like .btn_like .ico_like {float:left;width:16px;height:15px;margin:7px 5px 0 0;background-position:-200px -60px;vertical-align:top}
.wrap_like .btn_liked {background-color:#fd4381}
.wrap_like .btn_liked .ico_like {background-position:-220px -60px}
.wrap_like .like {float:right;position:relative;z-index:2;margin-right:9px}
.wrap_like .like:hover .tooltip {display:block;top:-30px;width:44px;margin-left:-22px;line-height:1.5}

/* 페이징 */
.paging {padding:23px 0 50px;text-align:center}
.paging .link_page {display:inline-block;padding:8px 3px;vertical-align:top}
.paging .link_page .img_cmt {display:block;width:16px;height:5px;background-position:-160px -80px}
.paging .num_page {padding:0 3px;color:#4a4a4a}
.paging .current {font-weight:bold;color:#4a72e2}

/* 신고 레이어 */
.dimmed_layer {display:none;position:fixed;top:0;left:0;z-index:9999;width:100%;height:100%;background-color:#fff;opacity:0.8}
.report_layer {display:none;position:fixed;top:50%;left:50%;z-index:9999;margin:-106px 0 0 -189px;width:320px;padding:21px 24px 30px;border:5px solid #dedede;background-color:#fff}
.report_layer .tit_report {display:block;width:138px;height:32px;margin:0 auto 21px;background-position:-180px -110px}
.selectbox .link_selected {display:block;height:48px;padding:0 40px 0 18px;border:1px solid #979797;line-height:48px;background:url('/image/comment/select_arr.gif') 100% 0 no-repeat;letter-spacing:-1px;text-decoration:none}
.selectbox {position:relative;letter-spacing:-1px}
.selectbox .list_select {display:none;position:absolute;top:49px;left:0;right:0;border:1px solid #979797;background-color:#fff}
.selectbox .list_select .link_select {display:block;height:40px;padding:0 18px;line-height:40px;text-decoration:none}
.selectbox .list_select .link_select:hover {background-color:#f6f6f6}
.report_layer .box_cont {display:none;border:1px solid #979797;margin-top:10px;padding:10px}
.box_cont .tf_cont {width:100%;border:0 none;resize:vertical}
.wrap_btn {padding-top:18px;text-align:center}
.wrap_btn button .img_cmt {display:block;width:100px;height:30px}
.wrap_btn .btn_report {margin-right:6px}
.wrap_btn .btn_report .img_cmt {background-position:0 -140px}
.wrap_btn .btn_cancel .img_cmt {background-position:0 -180px}



/* 650 이하 - 모바일 */
@media (max-width:650px){

    .img_cmt {background-image:url('/image/comment/img_cmt_m.png');-webkit-background-size:320px 320px;background-size:320px 320px}
    .thumb_profile {background-image:url('/image/comment/profile_m.png');-webkit-background-size:72px 72px;background-size:72px 72px}
    .fld_write {padding:15px 0 20px}
    .sns_login .wrap_info {overflow:hidden;float:none;width:100%;padding-top:0;text-align:center}
    .sns_login .btn_logout {margin-top:0;padding-bottom:5px}
    .list_sns {width:100%}
    .list_sns li {width:20%;margin-right:0}
    .list_sns button.img_cmt {margin:0 auto}
    .list_sns a.img_cmt {margin:0 auto}
    .list_sns li:last-child .tooltip {margin-left:-212px}
    .list_sns li:last-child .tooltip:after {left:90%}
    .list_sns li:nth-child(4) .tooltip {margin-left:-146px}
    .list_sns li:nth-child(4) .tooltip:after {left:61%}
    .box_tf .tf_cmt {padding:0}
    .box_tf .write {padding:9px 10px}
    .box_tf .write .thumb_profile {display:none}
    .write_btn .btn_photo {margin-left:0}
    .write_btn .txt_max {display:none}
    .attach_photo .txt_max {display:block}
    .list_photo img {max-width:105px}
    .write_btn .btn_write {margin-right:0}
    .count_cmt {padding-bottom:10px}
    .count_cmt .txt_count {font-size:12px}
    .count_cmt .sort_btn {font-size:13px}
    .list_cmt .thumb_profile {margin-top:21px}
    .list_cmt .cmt_cont {margin-top:0}
    .info_cmt .txt_name {display:block;float:none}
    .list_cmt .info_cmt {height:auto;padding-top:20px}
    .info_cmt .share {overflow:hidden;width:100%}
    .share .txt_date {display:block;padding-bottom:5px}
    .cmt_cont .txt {padding:15px 0 16px;font-size:12px}
    .info_cmt .menu_more {top:20px;right:0}
    .paging {padding:18px 0 40px}
	.report_layer {width:200px;margin:-106px 0 0 -130px;}
	.selectbox .link_selected {font-size:12px;}
	.selectbox .list_select {font-size:12px;}
	.wrap_btn .btn_report {margin-right:0;}
}