@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR');
body,th,td,input,select,textarea,button {font-size:12px; line-height:1.5; font-family: 'Noto Sans KR', sans-serif; color:#333} 



.comment_container{width: 100%; height: 100%; max-width: 400px; margin:0 auto;}

header,
footer{position: fixed; left: 50%; width: 100%; max-width: 400px; transform: translateX(-50%);}

header{height: 56px; top: 0;  background: #cce9ef; color: #000; z-index: 300;}
header .back_btn{position: absolute; display: block; left: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px;}
header .back_btn:after{content: ""; position: absolute; display: block; top: 2.5px; left: 0; width: 12px; height: 12px; transform: rotate(45deg); border:1.5px solid #000; border-top: 0; border-right: 0;}
header .back_btn:before{content: ""; width: 20px; height: 2px; display: block; position: absolute;right: 0; top: 50%; transform: translateY(-50%); background: #000;}
header h1{font-size: 1.2rem; padding-left: 55px; line-height: 56px;}
header input[id='menuicon']{display: none;}
header input[id='menuicon'] ~ label{display: none; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width:25px; height: 20px; cursor: pointer;}
header input[id='menuicon'] ~ label span{position: absolute; left: 0; display: block; width: 100%; height: 2px; background: #000; transition: 0.3s;}
header input[id='menuicon'] ~ label span:nth-child(1) {top: 0;}
header input[id='menuicon'] ~ label span:nth-child(2) {top: 50%; transform:translateY(-50%);}
header input[id='menuicon'] ~ label span:nth-child(3) {bottom: 0;}
header input[id='menuicon']:checked ~ label span:nth-child(1){top: 50%; transform: translateY(-50%) rotate(45deg);}
header input[id='menuicon']:checked ~ label span:nth-child(2){opacity: 0;}
header input[id='menuicon']:checked ~ label span:nth-child(3){bottom: 50%; transform: translateY(+50%) rotate(-45deg);}
header .menu_box{position: absolute; right: 20px; bottom: -55px; width: 100px; height: 0; background: #FFF; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); text-align: center; border-radius: 5px; opacity: 0; overflow: hidden; transition: 0.3s;}
header input[id='menuicon']:checked ~ .menu_box{height: auto; opacity: 1;}
header .menu_box li{padding: 5px 0;}
header .menu_box li:first-child{ border-bottom: 1px solid #CCC;}
header .menu_box li button{display: block; width: 100%; font-size: 1.2rem;}



main{min-height: calc(100vh - 160px); padding: 56px 0 104px; background:#edefe9; }
main .main_box{width: 100%; padding: 0 8px; box-sizing: border-box;}
main .main_box .main_date{text-align: center; padding: 12px 0; overflow: hidden; position: relative;}
main .main_box .main_date:after,
main .main_box .main_date:before{content: ""; position: absolute; display: block; top: 50%; width: 1000px; height: 1px; background: #DDD;}
main .main_box .main_date .date{color: #888; font-size: 1rem;}


main .wrap_chat{position: relative;}
main .wrap_chat.my{text-align: right;}
main .wrap_chat .chat_img{position: absolute; top: 0; width: 40px; height: 40px;}
main .wrap_chat.you .chat_img{left: 0;}
main .wrap_chat.my .chat_img{right: 0;}
main .wrap_chat .chat_img .img{width: 100%; height: 100%; border-radius: 50%; background-size: cover; background: url(../image/img_user.png) no-repeat 50% 50%; background-color: rgba(0,0,0,0.1);}
main .wrap_chat .chat{padding: 8px 30px 8px 12px;}
main .wrap_chat .chat_name{color: #555; font-size: 14px; margin-bottom: 5px;}
main .wrap_chat .chat_body{position: relative;}
main .wrap_chat .chat_body .chat_bubble{background:#FFF;}
main .wrap_chat .chat_body .chat_bubble{display: inline-block; position: relative; z-index: 100; margin-top: 8px; padding: 8px; border-radius: 2px; font-size: 14px; box-shadow: 0 1px 1px rgba(0,0,0,0.1);}
main .wrap_chat .chat_body .chat_bubble:before{content: ""; position: absolute; top: -9px; left: 0; z-index: 101; width: 0; height: 0; border-left: 6px solid transparent; border-right:6px solid transparent; border-bottom:12px solid #FFF;  }
main .wrap_chat .chat_body .chat_bubble .chat_text{max-width: 270px; overflow: hidden; white-space: pre-line; word-break:break-all;}


main .wrap_chat.you .chat_body .chat_bubble:before{}


main .wrap_chat.my .chat_body .chat_bubble:before{right: -6px; border-top: 6px solid #FFF;}





main .wrap_chat.you .chat_body .chat_info{left: 100%;}

main .wrap_chat.my .chat_body .chat_info{right: 100%;}
main .wrap_chat .chat_body .chat_info{bottom: 0; padding: 0 4px; width: 85px;}
main .wrap_chat .chat_body .chat_info .chat_time{color: #888; font-size: 10px; letter-spacing: 0;}
main .wrap_chat .chat_body .chat_remove{position: absolute; top: -6px; z-index: 100; width: 16px; height: 16px; border-radius: 50%; background: #d4d4d4; box-shadow: 0 2px 4px rgba(0,0,0,0.2);}
main .wrap_chat.you .chat_body .chat_remove{right: -6px;}
main .wrap_chat.my .chat_body .chat_remove{left: -6px;}
main .wrap_chat .chat_body .chat_remove span{position: absolute; top: 50%; left: 50%; width: 10px; height: 1px; margin-left: -5px; background: #FFF;}
main .wrap_chat .chat_body .chat_remove span.line1{transform: rotate(45deg);}
main .wrap_chat .chat_body .chat_remove span.line2{transform: rotate(-45deg);}



@media screen and (min-width:400px) {
	main .main_box .main_date:after{left: 70%;}
	main .main_box .main_date:before{right: 70%; }
	main .wrap_chat .chat_body .chat_info{position: absolute; }
}

@media screen and (max-width:399px) {
	main .main_box .main_date:after{left: 75%;}
	main .main_box .main_date:before{right: 75%; }
}




.form_login{position: absolute; left: 50%; top: 0; width: 100%; max-width: 400px; min-height: 100vh; transform: translateX(-50%); background: #FFF; z-index: 400; display: none;}
.form_login.active{display: block;}
.form_login .login_close{position: absolute; right: 10px; top: 10px; width: 25px; height: 25px; cursor: pointer;}
.form_login .login_close span{position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: #000; transform: translateY(-50%);}
.form_login .login_close span.line1{transform: rotate(45deg);}
.form_login .login_close span.line2{transform: rotate(-45deg);}
.form_login .login_box{width: 100%; height: 100vh;}
.form_login .login_box form{width: 100%; height: 100vh; display: flex; align-items: center; justify-content:center; flex-direction: column; }
.form_login .login_box form button{display: block; position: relative; width: 240px; height: 48px; margin:0 auto 12px; border-radius: 5px; line-height: 48px; color: #FFF; font-size: 1.3rem;}
.form_login .login_box form button:before{content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background-size: cover; background-repeat: no-repeat;}
.form_login .login_box form button.btn_kakao{background: #ffeb04; color: #3b1e1e;}
.form_login .login_box form button.btn_naver{background: #2db402;}
.form_login .login_box form button.btn_facebook{background: #3b5998;}
.form_login .login_box form button.btn_kakao:before{background-image: url(../image/sns_k.png);}
.form_login .login_box form button.btn_naver:before{background-image: url(../image/sns_n.png);}
.form_login .login_box form button.btn_facebook:before{background-image: url(../image/sns_f.png);}
.form_login .login_box form p{margin-top: 20px; font-size: 1.2rem;}



.remove_item_box{display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50% , -50%); width: 100%; max-width: 380px; padding: 20px; box-sizing: border-box; box-shadow: 0 2px 4px rgba(0,0,0,0.2); background: #cce9ef; border-radius: 5px; z-index: 1000;}
.remove_item_box.active{display: block;}
.remove_item_box input{border:none; outline: none; border-radius: 2px; padding: 8px 10px; font-size: 12px; display: block; width: 100%;}
.remove_item_box button{display: block; padding: 8px 10px; text-align: center; color: #FFF; width: 100%; border-radius: 2px;}
.remove_item_box button.ok{background: #416e8b; margin: 10px 0;}
.remove_item_box button.close{background: #333;}


footer{height: 104px; bottom:0; background: #cce9ef; padding: 8px; box-sizing: border-box; z-index: 100;}
footer .user_name_pw_box{margin:5px 0 10px 0;}
footer .user_name_pw_box input{border:none; outline: none;  display: block; float:left; width: 47.5%; margin-left: 5%; border-radius: 2px; padding: 8px 10px; font-size: 12px;}
footer .user_name_pw_box input:first-child{margin-left: 0;}
footer .write{position: relative;}
footer .write.active{padding-right: 56px; }
footer .write .btn-write{display: none; position: absolute; top: 0; right: 0; width: 48px; height: 100%; }
footer .write.active .btn-write{display: inline-block;}
footer .write .btn-write button{width: 100%; height: 100%; border-radius: 3px; color: #FFF; background: #416e8b; overflow: hidden;}
footer textarea{display: block; width: 100%; min-height: 36px; max-height: 72px; padding: 8px 10px; border-radius: 2px; font-size: 14px; line-height: 20px; resize: none; box-sizing: border-box; border:none;}
footer textarea:focus{border:none; outline: none; box-shadow: none;}