@charset "utf-8";

@import url('font.css');

/************************************************
	reset
************************************************/
* { margin:0; padding:0; box-sizing: border-box;}
body,input,button,select,input,textarea,h1,h2,h3,h4,h5,h6,pre{ font:normal 14px/1.4 "NotoSans-R","Malgun Gothic","Apple Gothic",sans-serif; color:#060505;}
img { max-width:100%; vertical-align:top; border:0 none;}
fieldset, abbr, acronym { border:0 none; }
dl,dt,dd,ul,ol,li { list-style:none; }
em,address { font-style:normal; }
legend,hr { display:none; } 
a { color:#333; text-decoration:none;}
caption, legend, .hidden,#skipNavi{ position:absolute; visibility:hidden; width:0; height:0; font-size:0; line-height:0;}
sup { font-size:13px; }
table {width:100%;border-spacing:0;border:0;}
.labelst{position:absolute; top:-5000px; right:0px; overflow:hidden;}
label,input[type=button], input[type=submit], input[type=image],button { border:0; background:none; cursor:pointer; outline:none;}
input,select { outline:none;}
textarea {resize: none; outline:none;}

::-webkit-input-placeholder {color:#d0d0d0;}
::-moz-placeholder {color:#d0d0d0;}
:-ms-input-placeholder {color:#d0d0d0;}
:-moz-placeholder {color:#d0d0d0;}


/************************************************
	layout
************************************************/
body { background:#f0f0f0;}
.wrap { max-width:480px; margin:0 auto; background:#fff;}

.app_down { overflow:hidden; padding:12px 16px; background-color: #ffe95e; color:#000;}
.app_down p { float:left; line-height:32px; font-size:20px;}
.app_down .btn_down { float:right; height:32px; padding:0 10px; border: 1px solid #000000; border-radius: 16px; background-color: #ffffff; color:#000; line-height:30px;}

.sec_top { padding:30px 16px 12px;}
.sec_top .title { margin:24px 0 16px; font-size:20px; line-height:24px; font-family: NotoSans-B;}
.sec_top .con_post p { margin-bottom:15px; font-size:16px; line-height:1.5;}
.sec_top .con_post pre { margin-bottom:15px; font-size:16px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word;}
.sec_top .con_post p:last-child { margin-bottom:0;}
.sec_top .post_info .info_top { overflow:hidden; padding:17px 0 16px;}
.sec_top .post_info .info_top .left { float:left; }
.sec_top .post_info .info_top .left span {margin-right:10px;}
.sec_top .post_info .info_top .right { float:right; }
.sec_top .post_info .info_bottom { overflow:hidden; padding:16px 0 12px; border-top:1px solid #ededed;}
.sec_top .post_info .info_bottom button { float:left; width:33.3%; color: #9f9f9f; font-size: 12px; line-height:15px;}

.sec_comments .sort button { padding: 0 16px; color: #c3c3c3;}
.sec_comments .sort button:not(:first-child) { border-left:1px solid #d2d2d2;}
.sec_comments .sort button.select { color: #060505; font-family: NotoSans-B;}
.sec_comments .comment_list { margin:12px 16px;}
.sec_comments .conmment_write { position: relative; padding:4px 16px 3px; border-top:1px solid #ededed;}
.sec_comments .conmment_write input { width:calc(100% - 30px); height: 40px; padding:0 16px; border:1px solid #e0e0e0; border-radius: 20px; background: #f9f9f9; font-size:16px;}
.sec_comments .conmment_write button { position: absolute; top:8px; right:5px; width:32px; height: 32px;  background: url(../images/ic-send-off-g-300.svg) no-repeat 50% 50%; font-size: 0;}
.sec_comments .btn_more { width:100%; height: 56px; line-height:56px; background-color: #ffe95e; text-align: center;}
.sec_comments .btn_more span {padding-right:20px; background: url(../images/ic-chevron-down-2.svg) no-repeat 100% 50%;}

.sec_newpost { padding:24px 16px 0;}
.sec_newpost .tit { margin-bottom:24px; color:#000; font-size:18px; font-family: NotoSans-B; line-height:28px; text-align: center;}
.sec_newpost .tit span{ padding-bottom:2px; background: url(../images/bg_bar2.png) repeat-x 0 100%;}

.profile { overflow:hidden;}
.profile .photo { float:left;}
.profile .user_info { float:left; padding:3px 16px; }
.profile .user_info .user_name { font-size:16px; font-family: NotoSans-M;}
.profile .user_info .txt_time { margin-top:3px; color: #898888; font-size:12px;}

.photo { overflow:hidden; width: 48px; height: 48px; border-radius: 100%; background-color: #ededed;}


/************************************************
	text & list
************************************************/
.txt_time { color: #b3b2b2; font-size:11px;}
.txt_view { padding-left:20px; background: url(../images/ic-eye.svg) no-repeat 0 50%; color: #b3b2b2; font-size:11px;}
.txt_comment { padding-left:20px; background: url(../images/ic-bubble.svg) no-repeat 0 50%; color: #b3b2b2; font-size:11px; line-height:16px;}
.txt_cash { padding-left:18px; background: url(../images/ic-won.svg) no-repeat 0 50%; color: #b3b2b2; font-size:11px; line-height:16px;}
.txt_good { padding-left:20px; background: url(../images/ic-heart-off-16.svg) no-repeat 0 50%; color: #b3b2b2; font-size:11px; line-height:16px;}

.comment_list li { overflow:hidden; padding:12px 0;}
.comment_list li .photo { float:left;}
.comment_list li .comment { float:left; width: calc(100% - 48px); padding: 2px 8px;}
.comment_list li .comment .user { font-family: NotoSans-B;}
.comment_list li .comment .text { margin:5px 0 8px;}
.comment_list li .comment .conmment_info { margin:5px 0 8px;}
.comment_list li .comment .conmment_info * {margin-right:8px;}
.comment_list li.type2 { padding-left:16px; background: url(../images/ic-holdfast-16.svg) no-repeat 0 20px; }

.newpost_list li { overflow:hidden; padding:16px 0; border-top:1px solid #f9f9f9;}
.newpost_list li:first-child { border-top:none;}
.newpost_list li .photo { float:left;}
.newpost_list li .post_list { float:left; width: calc(100% - 48px); padding: 2px 16px;}
.newpost_list li .post_list .title { font-size:16px; font-family: NotoSans-B;}
.newpost_list li .post_list .post_info2 { margin-top:3px;}
.newpost_list li .post_list .post_info2 * {margin-right:8px;}


/************************************************
	button
************************************************/
.btn_conversation { position:relative; margin-left:8px; padding-left:18px; background: url(../images/ic-chat-y-5.svg) no-repeat 0 100%; font-size:12px; line-height:18px; vertical-align: 2px;}
.btn_conversation span { display:inline-block; width:43px; background: url(../images/bg_bar.png) no-repeat 0 100%;}
.btn_question { display:inline-block; width:16px; height:16px; margin-left:5px; background: url(../images/ic-question.svg) no-repeat 50% 50%; font-size:0; vertical-align: middle;}

.btn_good { padding-top:32px; background: url(../images/ic-heart-off-32.svg) no-repeat 50% 0;}
.btn_share { padding-top:32px; background: url(../images/ic-share-32.svg) no-repeat 50% 0;}
.btn_scrap { padding-top:32px; background: url(../images/ic-scrap-32.svg) no-repeat 50% 0;}
.btn_comment { color: #b3b2b2; font-size:11px; font-family: NotoSans-B;}


/************************************************
	modal
************************************************/
.modal {display:none;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100vh;text-align:left; z-index:1;}
.modal.on { display:block;}
.modal_mask { position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.6); z-index:1001; opacity:0;
	-webkit-transition: opacity 300ms ease;
  transition: opacity 300ms ease;}
.modal_mask.on {opacity:1;}
.modal_wrapper { display:none; overflow:auto; position:absolute; top:50%; left:50%; z-index:1002;
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);}
.modal_wrapper.on {display:block;}

.app_info { position:relative; width:278px; height:243px; background: url(../images/modal.png) no-repeat 0 0; background-size:100%; text-align: center;}
.app_info a { display:inline-block; margin-top:195px; height:32px; padding:0 25px; border: solid 1px #000000; border-radius: 16px; background-color: #ffe95e; line-height:28px;}