@charset "utf-8";
/* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess */

.awl_wrap {background:#f8faff;}
.awl_head img {width:100%;}
.awl_content {padding:16px 26px;}

/* 본문 영역 */
.awl_main_list {}
.awl_main_list li {background:#fff; border-radius:10px; box-shadow:0px 3px 10px #b5b5b5; padding:16px 16px;}
.awl_main_list li + li {margin-top:32px;}
.awl_main_list li .awl_user {display:grid; grid-template-columns:30px 1fr; grid-template-rows:repeat(2,15px); grid-template-areas:"a b . c" ". d . .";}
.awl_main_list li .awl_user .awl_img {width:30px; height:30px; border-radius:50%; vertical-align:middle;}
.awl_main_list li .awl_user .awl_img img {width:30px; height:30px;border-radius:50%;grid-area:a;}
.awl_main_list li .awl_user .awl_name {display:inline-block; vertical-align:middle;}
.awl_main_list li .awl_user .awl_name strong {font-size:11px; line-height:1.2; color:#000; font-weight:bold; float:left; margin-left:5px; grid-area:b;}
/* .awl_main_list li .awl_user .awl_name span {font-size:11px; line-height:12px; color:#4a4a4a; letter-spacing:-0.4px; display:inline-block; transform:translate(5px, -6px);} */
.awl_main_list li .awl_user .awl_name span {font-size:11px; line-height:12px; color:#4a4a4a; letter-spacing:-0.4px; display:flex; justify-content:flex-end; margin-left:auto;}
.awl_main_list li > p {font-size:12px; line-height:1.2; letter-spacing:-0.48px; color:#000; margin-top:16px; margin-bottom:8px; white-space:pre-wrap;word-break:break-all;}
.awl_main_list li .awl_box_state {margin-top:5px; position:relative; height:24px;}
.awl_main_list li .awl_box_state .awl_dat {display:inline-block; padding-left:28px; background:url('../../images/textsms-24px.png') left center no-repeat; background-size:24px; font-size:12px; line-height:24px; color:#4169e1;}
.awl_main_list li .awl_box_state .awl_abs_right {position:absolute; right:0; top:0;}
.awl_main_list li .awl_box_state .awl_abs_right a {font-size:12px; line-height:24px; color:#4169e1; margin-left:8px;}
.awl_main_list li .awl_comment_box {position:relative; display:none; left:-16px; width:calc(100% + 32px); box-sizing:border-box;}
.awl_main_list li .swl_comment_list {padding:0; border-top:0;}
.awl_main_list li .swl_comment_list li {border-radius:0; margin:0 16px; box-shadow:none;}
.awl_main_list li .swl_comment_list li + li {margin-top:1px;}
/* .awl_main_list li .awl_comment_tit {position:relative; border-top:10px solid #f2f2f2; margin-top:8px; padding:0 16px;} */
.awl_main_list li .awl_comment_tit {position:relative; margin-top:8px; padding:0 16px;}
.awl_main_list li .awl_comment_tit strong {font-size:16px; line-height:40px; color:#000; font-weight:bold;}
.awl_main_list li .awl_comment_tit > a {font-size:12px; line-height:24px; color:#000; padding-right:24px; background:url(../../images/icon_arrow.png) right center no-repeat; background-size:24px; position:absolute; right:8px; top:50%; margin-top:-12px;}
.awl_main_list li .swl_comment_input {margin:8px 16px 0; display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:10px; grid-template-areas:"a a a b" "a a a c";}
.awl_main_list li .swl_comment_input input {width:90%; box-sizing:border-box; padding:0 24px; border:1px solid #cdcdcd; background:#f2f2f2; border-radius:10px; font-size:12px; line-height:30px; color:#cdcdcd;}
.awl_main_list li .swl_comment_input input::placeholder {font-size:12px; line-height:30px; color:#cdcdcd;}
.awl_main_list li .swl_comment_input input:focus::-webkit-input-placeholder {color:transparent; }
.awl_main_list li .swl_comment_list .awl_box_state {margin-top:10px;}
.awl_main_list li .swl_comment_list li .awl_name {display: block;margin-top: -18px;margin-left: 17px;}


/* ? */
.awl_fixer {position:fixed; left:0; bottom:0; width:100%; height:56px; background:#fff;}
.awl_fixer ul:after {content:''; display:block; clear:both;}
.awl_fixer ul li {float:left; width:20%; text-align:center; position:relative; box-sizing:border-box;}
.awl_fixer ul li a {display:block; text-align:center; position:relative; font-size:10px; line-height:12px; color:#86888e; padding-top:36px; height:56px; box-sizing:border-box;}
.awl_fixer ul li a:after {content:''; width:29px; height:29px; position:absolute; left:50%; top:6px; margin-left:-15px; background:url('../../images/ic_nav_01.png') no-repeat; background-size:100%;}
.awl_fixer ul li.on {border-top:2px solid #4169e1;}
.awl_fixer ul li:nth-child(1) a:after {background:url('../../images/ic_nav_01.png') no-repeat; background-size:100%;}
.awl_fixer ul li:nth-child(2) a:after {background:url('../../images/ic_nav_02.png') no-repeat; background-size:100%;}
.awl_fixer ul li:nth-child(3) a:after {background:url('../../images/ic_nav_03.png') no-repeat; background-size:100%;}
.awl_fixer ul li:nth-child(4) a:after {background:url('../../images/ic_nav_04.png') no-repeat; background-size:100%;}
.awl_fixer ul li:nth-child(5) a:after {background:url('../../images/ic_nav_05.png') no-repeat; background-size:100%;}

/* 작성 및 수정 영역 */
.awl_word {background:#fff; height:100vh;}
.awl_word .awl_tit {position:relative;}
.awl_word .awl_tit > button {position:absolute; right:20px; top:10px;}
.awl_word .awl_tit > button img {width:24px;}
.awl_word .awl_tit h1 {font-size:20px; font-weight:400; line-height:44px; color:#000; padding:0 20px; border-bottom:2px solid #e7e7e7;}
.awl_word .awl_text {position:relative;}
.awl_word .awl_text textarea {height:270px; overflow-y:auto; box-sizing:border-box; width:100%; padding:5px 20px; border:0;}
.awl_word .awl_text .awl_intext {position:absolute; left:0; top:40%; margin-top:-9px; font-size:15px; line-height:22px; color:#cdcdcd; letter-spacing:-0.48px; text-align:center; width:100%;}
.awl_word .awl_text .count {position:absolute; right:20px; font-size:11px; line-height:18px; color:#cdcdcd; letter-spacing:-0.48px; }
.awl_word .awl_write_btn {position:fixed; left:0; bottom:25px; width:100%; text-align:center;}
.awl_word .awl_write_btn button {width:160px; height:43px; border-radius:22px; background:#757575; font-size:18px; line-height:1.5; letter-spacing:-0.72px; color:#fff;}

/* 큰 글 영역(본문+댓글) */
.awl_comment {}
.awl_comment .awl_tit {padding:0 16px; position:relative;}
.awl_comment .awl_tit h1 {font-size:16px; line-height:44px; color:#000; font-weight:bold;}
.awl_comment .awl_tit > button {position:absolute; right:16px; top:10px;}
.awl_comment .awl_tit > button img {width:24px;}
.awl_comment .awl_content {padding:10px 16px;}
.awl_comment .awl_main_list {padding:10px 16px; padding-top:14px; padding-bottom:0;}
.awl_comment .awl_main_list li {background:#fff; border-radius:0px; box-shadow:none; padding:0}
.awl_comment .awl_main_list li p {margin-top:14px;}
.awl_comment .awl_main_list li .awl_box_state {margin-top:9px;}

/* 댓글 목록 출력 */
.swl_comment_list {margin-top:10px; background:#fff; border-top:10px solid #f2f2f2; padding:10px 16px; padding-top:22px;}
.swl_comment_list li {position:relative; padding:4px 0 4px 38px;}
.swl_comment_list li + li {margin-top:4px;}
.swl_comment_list li .awl_img {width:30px; height:30px; overflow:hidden; border-radius:50%; display:inline-block; vertical-align:middle; position:absolute; left:0; top:4px;}
.swl_comment_list li .awl_img img {width:30px; height:30px;}
.swl_comment_list li .awl_name {display:inline-block; vertical-align:middle; margin-left:0px;}
.swl_comment_list li .awl_name strong {font-size:11px; line-height:14px; color:#000; display:inline-block; font-weight:bold; vertical-align:middle;}
.swl_comment_list li .awl_name span {font-size:10px; line-height:14px; color:#4a4a4a; display:inline-block; vertical-align:middle; margin-left:5px;}
.swl_comment_list li > p {font-size:12px; line-height:18px; letter-spacing:-0.48px; color:#000; margin-top:-10px !important;white-space:pre-wrap;word-break:break-all;}
.swl_comment_list li .awl_box_state {margin-top:0px; position:relative; height:18px;}
.swl_comment_list li .awl_box_state .awl_dat {display:inline-block; padding-left:18px; background:url('../../images/textsms-24px.png') left center no-repeat; background-size:24px; font-size:12px; line-height:24px; color:#4169e1;}
.swl_comment_list li .awl_box_state .awl_abs_right {position:absolute; right:0; top:0;}
.swl_comment_list li .awl_box_state .awl_abs_right a {font-size:12px; line-height:18px; color:#4169e1; margin-left:8px;}

/* detail 댓글 영역 */
.awl_fixer_comment .swl_comment_input{display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:10px; grid-template-areas:"a a a b" "a a a c";}
.awl_fixer_comment {position:relative; left:0; bottom:0; width:100%; height:64px; box-sizing:border-box; padding:16px 42px; background:#fff;}
.awl_fixer_comment textarea {width:100%; max-height:140px; box-sizing:border-box; padding:0 24px; border:1px solid #cdcdcd; background:#f2f2f2; border-radius:10px; font-size:12px; line-height:30px; color:#cdcdcd; grid-area:a;}
.awl_fixer_comment textarea:focus::-webkit-input-placeholder {color:transparent; } 

/**/
.awl_comment_box .swl_comment_input textarea {width:100%; max-height:140px; box-sizing:border-box; padding:0 24px; border:1px solid #cdcdcd; background:#f2f2f2; border-radius:10px; font-size:12px; line-height:30px; color:#cdcdcd; grid-area:a;}
.awl_comment_box .swl_comment_input textarea::placeholder {font-size:12px; line-height:30px; color:#cdcdcd;}
.awl_comment_box .swl_comment_input textarea:focus::-webkit-input-placeholder {color:transparent; }

/* 글쓰기 버튼 */
.awl_fixer_plus {position:fixed; right:26px; bottom:82px;}
.awl_fixer_plus img {width:56px; display:flex; justify-content:center; position:fixed; right:20px; bottom:20px;}

/* 댓글 전송 버튼 */
.sendIcon{width:25px; height:25px; grid-area:b;}
.countReply{font-size:10px; font-weight:500; color:#4a4a4a; grid-area:c;}

/* ogTag 출력 영역*/
.awl_ogTag {display: block; position: relative; width: 268px; background-color: #fff; text-decoration: none; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .08); cursor: pointer; margin-bottom:8px;}
.awl_ogImg {width:120px; height:75px; top:0; right:0; bottom:0; left:0; border:1px solid rgba(0, 0, 0, .1);}
.awl_ogTitle {white-space: nowrap; word-wrap: normal;overflow: hidden;text-overflow: ellipsis;word-break: break-all; display: block; line-height: 15px; font-weight: 500; color: #333; font-size: 12px;}
.awl_ogDescription {font-size: 11px; white-space: nowrap;word-wrap: normal;overflow: hidden; text-overflow: ellipsis;word-break: break-all;line-height: 18px;color: #999;}
.awl_ogUrl {font-size:12px; font-weight:500; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; word-break: break-all; color:#4169e1;}

/* detail 댓글 수정 부분 */
.awl_main_reply .swl_comment_input{position:relative; width:100%; height:64px; box-sizing:border-box; padding:16px 42px; background:#fff; display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:10px; grid-template-areas:"a a a b" "a a a c";}
.awl_main_reply .swl_comment_input .replyArea{width:100%; box-sizing:border-box; padding:0 24px; border:1px solid #cdcdcd; background:#f2f2f2; border-radius:10px; font-size:12px; line-height:30px; color:#cdcdcd; grid-area:a;}

/* 댓글 상태 박스 */
.awl_main_list li .awl_reply_box_state .awl_dat {display:inline-block; padding-left:28px; background:url('../../images/textsms-24px.png') left center no-repeat; background-size:24px; font-size:12px; line-height:24px; color:#4169e1;}
.awl_main_list li .awl_reply_box_state .awl_abs_right {position:absolute; right:0; top:0;}
.awl_main_list li .awl_reply_box_state .awl_abs_right a {font-size:12px; line-height:24px; color:#4169e1; margin-left:8px;}

.swl_comment_list li .awl_reply_box_state {margin-top:0px; position:relative; height:18px;}
.swl_comment_list li .awl_reply_box_state .awl_dat {display:inline-block; padding-left:18px; background:url('../../images/textsms-24px.png') left center no-repeat; background-size:24px; font-size:12px; line-height:24px; color:#4169e1;}
.swl_comment_list li .awl_reply_box_state .awl_abs_right {position:absolute; right:0; top:0;}
.swl_comment_list li .awl_reply_box_state .awl_abs_right a {font-size:12px; line-height:18px; color:#4169e1; margin-left:8px;}

/* 멘티,멘토 뱃지 */
.awl_badge{font-size:9px; color:#4169e1; border:1px solid #4169e1; border-radius:100px; width:45px; height:13px; text-align:center; margin-left:5px; grid-area:d;}

/* 댓글 영역 닫기 이미지 */
#closeToggle{transform:rotate(180deg); width:20px; display:inherit; vertical-align:middle; margin-left:auto; margin-right:auto; margin-top: 5px;}

/* 댓글 영역 닫기 head*/
.awl_comment_head{border-top:10px solid #f2f2f2;}