@charset "utf-8";

textarea{resize: none;}
textarea:focus {border:none; outline:none;}
.hide {display:none !important;}
.pop_hide{display: none !important;}

.comment_form .comment_textarea:focus::-webkit-input-placeholder{color:#999 !important;}

/* .show{display:block !important;} */
.overflow_hidden{overflow: hidden;}
.visually_hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important;}

.btn{display:flex;align-items:center; justify-content: center; width:auto;padding:3px 14px;border-radius:50px;border:1px solid transparent;background-color:transparent;background-repeat: no-repeat;color:#111;font-size:13px;letter-spacing: -0.5px; font-weight: 700; line-height:20px;text-align:center;white-space:nowrap;}
.btn_black{ border: 1px solid #111; background-color: #111; color: #fff;}
.btn_outline_black{ border: 1px solid #111 !important; }
.btn.btn_square{padding: 10px 16px;border-radius: 0;}
.comment .btn_outline_gray{border: 1px solid rgba(0, 0, 0, .1); color: #999; font-weight:400;}
.btn_full{margin-top: 30px; width: 100%;padding: 11px 15px 13px;border-radius: 0;background-color: #f4f5fa;font-size: 14px;font-weight: 700;color: #333;justify-content: center;}
.btn_full .ico_more { width: 7px; height: 11px; margin-left:4px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='11'%3E%3Cpath d='M1 11l5-5-5-5' stroke='%23000' fill='none' fill-rule='evenodd' opacity='.9'/%3E%3C/svg%3E"); }

[class*="ico_"]{display: inline-block;font-style: normal;background-position: 50% 50%;background-repeat: no-repeat;background-size: 100% auto;}
.ico_more{width:14px;height:14px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 14V0h14v14z'/%3E%3Cpath fill='%231D1D1D' d='M4.9 11.868l-.495-.495L8.778 7 4.404 2.627l.495-.495 4.868 4.867-4.868 4.868z'/%3E%3C/g%3E%3C/svg%3E");}
.ico_more_option{width:3px;height:17px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='17'%3E%3Cpath d='M1.5 14a1.5 1.5 0 11-.001 3.001A1.5 1.5 0 011.5 14zm0-7a1.5 1.5 0 11-.001 3.001A1.5 1.5 0 011.5 7zm0-7a1.5 1.5 0 11-.001 3.001A1.5 1.5 0 011.5 0z' fill='%23CCC' fill-rule='evenodd'/%3E%3C/svg%3E");}
.ico_like{width:22px;height:22px;background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h22v22H0z'/%3E%3Cpath d='M19 2v.25l-.8.75h-3.072A9 9 0 1111 2h8zm-8 1a8 8 0 100 16 8 8 0 000-16zm-5 8a5 5 0 0010 0h1a6 6 0 11-12 0h1zm2-4a1 1 0 110 2 1 1 0 010-2zm6 0a1 1 0 110 2 1 1 0 010-2z' fill='%23999' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");}
.active .ico_like {background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h22v22H0z'/%3E%3Cpath d='M19 2v.25l-.8.75h-3.072A9 9 0 1111 2h8zm-8 1a8 8 0 100 16 8 8 0 000-16zm-5 8a5 5 0 0010 0h1a6 6 0 11-12 0h1zm2-4a1 1 0 110 2 1 1 0 010-2zm6 0a1 1 0 110 2 1 1 0 010-2z' fill='%231D1D1D' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");}
.ico_dislike{width:22px;height:22px;background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h22v22H0z'/%3E%3Cpath d='M19 2v.25l-.8.75h-3.072A9 9 0 1111 2h8zm-8 1a8 8 0 100 16 8 8 0 000-16zm0 7.5a6.003 6.003 0 015.81 4.5h-1.039a5.002 5.002 0 00-9.542 0h-1.04A6.003 6.003 0 0111 10.5zM8 7a1 1 0 110 2 1 1 0 010-2zm6 0a1 1 0 110 2 1 1 0 010-2z' fill='%23999' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");}
.active .ico_dislike {background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h22v22H0z'/%3E%3Cpath d='M19 2v.25l-.8.75h-3.072A9 9 0 1111 2h8zm-8 1a8 8 0 100 16 8 8 0 000-16zm0 7.5a6.003 6.003 0 015.81 4.5h-1.039a5.002 5.002 0 00-9.542 0h-1.04A6.003 6.003 0 0111 10.5zM8 7a1 1 0 110 2 1 1 0 010-2zm6 0a1 1 0 110 2 1 1 0 010-2z' fill='%231D1D1D' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");}
.ico_bang{width:22px;height:22px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23979797' fill-rule='nonzero'%3E%3Cg%3E%3Cg%3E%3Cpath d='M8 0c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8zm0 .96C4.112.96.96 4.112.96 8S4.112 15.04 8 15.04s7.04-3.152 7.04-7.04S11.888.96 8 .96z' transform='translate(-1099.000000, -514.000000) translate(1099.000000, 514.000000) translate(2.000000, 2.000000)'/%3E%3Cpath d='M8.592 9.418l.153-4.887h-1.43l.202 4.887h1.075zm.105 2.083v-1.22H7.411v1.22h1.286z' transform='translate(-1099.000000, -514.000000) translate(1099.000000, 514.000000) translate(2.000000, 2.000000)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
.ico_comment{width: 26px;height: 26px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h26v26H0z'/%3E%3Cpath fill='%231D1D1D' d='M3.25 23.183l-.867.867H1.95V4.806c0-.555.468-.906.906-.906h20.288c.534 0 .906.37.906.906V19.76c0 .471-.378.932-.906.932H5.85v-1.279h16.9V5.2H3.25v17.983z'/%3E%3Ccircle cx='8.667' cy='12.242' r='1.3' fill='%231D1D1D'/%3E%3Ccircle cx='13' cy='12.242' r='1.3' fill='%231D1D1D'/%3E%3Ccircle cx='17.333' cy='12.242' r='1.3' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E");}
.ico_comment.desabled{width: 30px;height:30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h30v30H0z'/%3E%3Cpath fill='%23999' d='M3.75 26.75l-1 1h-.5V5.546c0-.64.54-1.046 1.046-1.046h23.408c.617 0 1.046.428 1.046 1.046V22.8c0 .544-.436 1.075-1.046 1.075H6.75v-1.476l19.5.001V6H3.75v20.75z'/%3E%3Ccircle cx='10' cy='14.125' r='1.5' fill='%23999'/%3E%3Ccircle cx='15' cy='14.125' r='1.5' fill='%23999'/%3E%3Ccircle cx='20' cy='14.125' r='1.5' fill='%23999'/%3E%3C/g%3E%3C/svg%3E");}
.ico_refresh{width:22px;height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='%231D1D1D' fill-rule='evenodd'%3E%3Cpath fill-rule='nonzero' d='M11 2.2c4.488 0 8.19 3.36 8.732 7.7h-1.11A7.7 7.7 0 003.3 11a7.7 7.7 0 0015.322 1.1h1.11A8.8 8.8 0 1111 2.2z'/%3E%3Cpath d='M19.25 4.4h1.1v5.5h-1.1z'/%3E%3Cpath d='M20.35 8.8v1.1h-5.5V8.8z'/%3E%3C/g%3E%3C/svg%3E");}
.layer_comment .ico_close{width:24px;height:24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='%231D1D1D' d='M21.192 2.1l.707.707L12.706 12l9.193 9.193-.707.707-9.193-9.193L2.807 21.9l-.707-.707L11.292 12 2.1 2.807l.707-.707L12 11.292 21.192 2.1z'/%3E%3C/g%3E%3C/svg%3E");}
.layer_alert .ico_close{width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h20v20H0z'/%3E%3Cpath d='M16.71751 2.6l.70711.7071-6.71724 6.7179 6.71724 6.71714-.7071.7071-6.71714-6.71724-6.7179 6.71724-.7071-.7071 6.718-6.71714-6.718-6.7179.7071-.7071 6.7179 6.718L16.7175 2.6z' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E");}

.dropdown{display:inline-block;position:relative; padding-right: 4px;}
.dropdown .dropdown_toggle_btn{background:right center no-repeat;color:#111;font-size:14px;font-weight:700;}
.dropdown_toggle_btn{display:flex;align-items:center;position:relative;width:auto;color:#111;font-weight:700;line-height:normal;}
.dropdown .ico_arrow{ width: 14px; height: 14px; margin-left:4px;}
.dropdown:not(.type_up) .ico_arrow,
.dropdown.type_up.open .ico_arrow{background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h14v14H0z'/%3E%3Cpath d='M2.133 4.9l.495-.495L7 8.778l4.371-4.373.495.495L7 9.767 2.133 4.9z' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E");}
.dropdown:not(.type_up).open .ico_arrow,
.dropdown.type_up .ico_arrow{background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 14h14V0H0z'/%3E%3Cpath d='M2.133 9.1l.495.495L7 5.222l4.371 4.373.495-.495L7 4.233 2.133 9.1z' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E");}
.dropdown_menu{display:none;z-index:10;position:absolute;top:27px;left:0;width:auto;padding:15px 20px;border:1px solid rgba(0, 0, 0, 0.1);background-color:#fff; white-space: nowrap;}
.dropdown_menu.right{left:inherit;right:0;}
.dropdown.type_up .dropdown_menu{top:inherit;bottom:31px;}
.dropdown.open .dropdown_menu{display:block;}
.dropdown_menu .dropdown_item{display:block;padding:5px 0;color:#111;font-size:13px;line-height:1.69;letter-spacing: -0.5px;}
.dropdown_menu .dropdown_item a {display:block;}
.dropdown_menu .dropdown_item .active{font-weight:700;}

.comment_recomm{ display: flex; align-items: center;}
.comment_recomm > button{ display: flex; justify-content: center; align-items: center;}
.comment_recomm > button.active > .count{ font-weight: 700; font-family: "Noto Sans KR"; color: #111;}
.comment_recomm [class^="ico_"]{ width: 22px; height: 22px; background-size: 100%;}
.comment_recomm > button .count{ margin-left: 5px; color: #999; font-size: 14px;}

*:not(.layer_comment) .comment_wrap .comment_list ~ .btn_full {margin-top:2px;}
.comment_wrap {overflow:hidden;}
.layer_comment .comment_wrap {overflow:inherit;}

/* 댓글 */

.comment{ position: relative; z-index: 1; padding: 12px 0;}
.report_comment::before{ content:''; z-index: -1; position: absolute; left: 0; top: 0; width: 100%; height: 100%;} 
.comment_state{ position: relative; display: flex; align-items: center; }
.comment_state .comment_count{ font-weight: 700; color: #111;}
.comment_state .btn_refresh{ width: 22px; height: 22px; margin-left: 6px;}
.comment_state .ico_refresh{ width: 100%; height: 100%;}
.comment_state .btn_write { display: none; position: absolute; }
.layer_comment.sticky .comment_state .btn_write { display: block; }
.comment_header{ position: relative;}
.comment_header .comment_userid{ color: #000; font-size: 15px; line-height: 23px; font-weight: 700; letter-spacing: -0.5px; }
.my_comment .comment_header .comment_userid{ color: #f6330a;}
.comment_header .comment_date{ margin-left: 12px; font-size: 13px; line-height: 21px; letter-spacing: -0.5px; color: #999;}
.comment_header .btn_report{ position: relative; margin-left: 21px; font-size: 13px; line-height: 22px; letter-spacing: -0.5px; color: #999;}
.comment_header .btn_report::before{ content: ''; position: absolute; left: -11px; top: 50%; transform: translateY(-50%); width: 1px; height: 11px; background-color: #999;}
.comment .more_option_area{ position: absolute; right: 0; top: 16px;}
.comment .more_option_area [class*='btn_outline'] {background:#fff;}
.comment .more_option_area .btn_toggle{ position: relative; right: -8px; width: 20px; height: 20px;}
.comment .more_option_area .btn_outline_gray{ display: none; position: absolute; right: 0; top: 30px;}
.comment .more_option_area.open .btn_outline_gray{ display: block;}
.comment_body{ margin-top: 12px;}
.comment_body .comment_text{ font-size: 14px; line-height: 22px; color: #111;word-break: break-all;}
.comment_body .report_text{ display: flex; align-items: center; font-size: 14px; line-height: 22px; color: #666;}
.comment_body .report_text .ico_bang{ margin-right: 2px; width: 20px; height: 20px; }
.comment_footer{ margin-top: 10px;}
.comment_footer::after{ display: block; content: ''; clear: both;}
.comment_footer .btn_reply_cnt,
.comment_footer .btn_reply{ float: left; color: #999; font-size: 13px; line-height: 22px;}
.btn_reply + .btn_reply_cnt{ margin-left: 15px;}
.comment_footer .comment_recomm{ float: right;}
.comment_footer .comment_recomm > button:nth-child(2){ margin-left: 15px;}
.new_comment {display:none}


.comment_list li:nth-child(n+2){ border-top: 1px solid rgba(0, 0, 0, .1);}
.comment_list li:last-child .comment_form{margin-bottom:40px;}
.comment .ico_more_option{ width: 3px; height: 17px;}
.comment_area{ display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 0, 0, .1);}
.comment_area .dropdown_toggle_btn{ height: 22px;}
.btn_new_reply{display: none; width: 100%; height: 52px; margin: 20px 0 18px; background-color: #fff6e2; font-size: 14px; font-weight: 700; color: #f6330a;}
.btn_mycomment{ display: flex; align-items: center; font-size: 13px; font-weight: 700; line-height: 22px; letter-spacing: -0.5px; color: #111;}
.btn_mycomment .ico_arrow_primary_right{ margin-left: 4px;}

/* 답글쓰기 */
.comment_form{ display: none; padding: 10px 20px; border: 1px solid #111;}
.comment_form.active{ display: block;}
.comment_form .comment_userid{ font-size: 14px; line-height: 20px; font-weight: bold; color: #111;}
.comment_form .comment_body{ margin-top: 10px;}
.comment_form .comment_byte{ float: left; font-size: 13px; line-height: 30px; letter-spacing: -0.5px; color: #999;}
.comment_form .btn { float: right;}

/* 답글 */
.reply_area{ display: none; border-top: 1px solid rgba(0, 0, 0, .1);}
.reply_area.active{ display: block;}
.reply_area li{ padding: 0 20px; background-color: #f4f5fa;}
.reply_area .comment:not(.new_comment)::before{ content:''; z-index: -1; position: absolute; top: 0; left: -20px; width: calc(100% + 40px); height: 100%;}
.reply_area .new_comment::before{ left: -20px; width: calc(100% + 40px);}

/* 댓글목록 없을때 */
.not_comment{ display: flex; flex-flow: column; align-items: center; font-size: 14px; text-align: center; color: #999;}
.not_comment .ico_comment{ width: 30px; height: 30px; margin-bottom: 6px;}

/* layer_comment 답글 */
.layer_comment { overflow-y: auto; z-index:311; position: fixed; top: 0; height: 100%; background-color: #fff; padding-bottom: 40px;}
.layer_comment.show { display:block !important; right: 0; transition: all 0.5s;  -webkit-overflow-scrolling: touch;}
.layer_comment.hide { display:block !important; right: -100%;transition: all 0.8s;}
.layer_comment .comment {overflow:inherit;}
.layer_comment .comment_header .comment_form { display: block; }
.layer_comment .comment_area {  border-bottom: 4px solid #111; }
.layer_comment .new_comment::before { content:''; z-index: -1; position: absolute; top: 0;  height: 100%; background-color: rgba(255, 246, 226, 0.5); }

.main_sm_text_area strong { color: #111; font-size: 24px; line-height:34px;}
.main_sm_text_area span { display:block; margin-top:6px; font-size:15px; line-height:21px;}
.main_sm_text_area .btn_full { margin-top: 20px; }

.txt_outline{display:none; border: 1px solid rgba(0, 0, 0, .1);}
.txt_outline div{display: block;  line-height: 20px; font-size: 14px; color: #666; cursor: pointer;}
.layer_comment .comment_header .txt_outline { display: block; }

/* 댓글 제한 */
.comment_disabled {margin-top:30px;background:#f4f5fa;padding:30px 36px;}
.comment_disabled p {font-size:15px;line-height:24px;color:#666;}

/* 댓글레이어 */
.layer_comment > .comment_body { margin-top:0; padding-top:30px !important;}
.layer_comment .btn_close { z-index: 101; display:none }
.layer_comment.show .btn_close{display:block}
.layer_comment.hide .btn_close{ display:none }
.layer_comment.sticky > .comment_header .comment_state { position: fixed; top: 0; z-index: 11; padding-top:30px; background: #fff; border-bottom: 1px solid #d8d8d8;}
.layer_comment.sticky > .comment_header .txt_outline{ display: none; }
.layer_comment.sticky .btn_close { position: fixed;}

.sticky_menu .layer_share {border: 1px solid rgba(0, 0, 0, .1); border-radius: 5px;}
.sticky_menu .layer_fontsize { border: 1px solid rgba(0, 0, 0, .1); border-radius: 5px;}

/* 로딩 */
.skeleton { position: relative; overflow: hidden; display:inline-block; height:19px; background-color:#f4f5fa; }
.skeleton:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.2) 20%,
      rgba(255, 255, 255, 0.5) 60%,
      rgba(255, 255, 255, 0)
    );
    animation: shimmer 2s infinite;
    content: '';
}
.comment .comment_header .skeleton {width:174px;}
.comment .comment_body .skeleton {display:block; width:282px; margin-top:4px;}
.comment .comment_body .skeleton:nth-child(1) {width:360px; margin-top:15px;}
.comment .comment_footer > .skeleton {width:50px;}
.comment .comment_footer .comment_recomm .skeleton {width:50px;}
.comment .comment_footer .comment_recomm .skeleton + .skeleton {margin-left:11px; width:37px;}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.spinner_wrap {padding-bottom:40px; border-top:1px solid rgba(0, 0, 0, .1);}
.spinner {position:relative; height:36px;}
.spinner svg {width: 36px; position:absolute; top:0; left:50%; margin-left:-18px;}
.spinner .line {transform-origin: center; animation: rotate 2s linear infinite; z-index:5;}
.spinner circle {width:36px; height:36px; fill: none; stroke-width: 3; stroke-linecap: round;}
.spinner .line circle {stroke: #333; stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash 1.5s ease-in-out infinite; z-index:10;}
.spinner .bg circle {stroke: #e2e2e2;}


@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dashoffset: -125px;
  }
}
  

    /* 팝업 */
    .layer_popup{position:absolute; z-index:200; background-color:#fff; border: solid 1px rgba(0, 0, 0, 0.1);}
    .full_popup { position:fixed; z-index:400; top: 0; right: 0; bottom: 0; left: 0;}
    .full_popup:not(.bg_white):not(.bg_black) { background: rgba(0,0,0,.4); }
    .full_popup .layer_alert {top:50%; left:50%; transform: translate(-50%, -50%); width:320px; min-height:170px; padding:40px 20px 30px; border:none; outline: 1px solid rgba(0, 0, 0, .1);}
    .layer_alert .layer_body {min-height:44px; font-size:14px; line-height:22px; text-align:center;}
    .layer_alert .layer_footer {display:flex; align-items:center; justify-content:center; margin-top:20px;}
    .layer_alert .layer_footer [class*='btn'] {padding: 0px 20px;font-size:14px;line-height: 34px;}
    .layer_alert .layer_footer [class*='btn'] + [class*='btn'] {margin-left:10px;}
    .layer_alert .btn_close {position: absolute; top:10px; right:10px;}

/* Mobile devices (mobile + tablet, 1023px and down) */
@media (max-width: 1023px){

    /* 댓글 */
    .txt_outline div{ padding: 13px 16px;}
    .comment_wrap .comment_state{ padding-top: 24px;}
    .comment_state .comment_count{ font-size: 16px; line-height: 24px;}
    .comment_state .btn_refresh{ width: 20px; height: 20px; margin-left: 6px;}
    .comment_area{ padding-bottom: 10px;}
    .comment_state { margin-bottom: 10px; }
    .comment_state .btn_write {top: 18px;right: 54px;}
    .comment_form .comment_textarea{overflow-y:auto; width: 100%; height: 84px; border: 0; font-size: 16px; line-height: 20px; color: #111;}
    .layer_comment .new_comment::before { left: -20px; width: calc(100% + 40px); }
    .layer_comment .reply_area .new_comment::before { left: -40px; width: calc(100% + 80px); }
    
    /* 댓글레이어 */
    .layer_comment {right: -100%; width: 100%;}
    .layer_comment > .comment_header { padding: 54px 20px 0;}
    .layer_comment > .comment_body { padding: 0 20px; }
    .layer_comment.active { display: block; }
    .layer_comment .btn_close {position: absolute;right: 20px;top: 20px;}
    .layer_comment.sticky .btn_close { position: fixed; }
    .main_sm_text_area + .comment_state { margin-top: 20px; padding-top: 20px; border-top: 1px solid #d8d8d8; }
    /* .layer_comment.sticky > .comment_header { width: 100%; left: 0; padding-top: 0; } */
    /*.layer_comment.sticky .main_sm_text_area { display: none; }*/
    .layer_comment.sticky .main_sm_text_area + .comment_state { left:0; width:100%; padding:20px; margin-top: 0; border-top: none; }
    .layer_comment.sticky > .comment_body { margin-top: 10px; }

    /* not_comment */
    .not_comment{ padding: 20px 0;}

    /* 로딩 */
    .spinner_wrap {padding-top:30px;}
}

/* Large devices (desktops, 1024px and up) */
@media (min-width:1024px) {

    /* 댓글 */
    .comment_wrap .comment_state{ padding-top: 26px;}
    .layer_comment.sticky .comment_state { width: 480px; }
    .comment_state .comment_count{ font-size: 20px; line-height: 30px;}
    .comment_area{ padding-bottom: 12px;}
    .comment_state { padding-bottom: 20px; }
    .comment_state .btn_write { top: 32px; right: 42px; }
    .comment_form .comment_textarea{overflow-y:auto; width: 100%; height: 66px; border: 0; font-size: 14px; line-height: 20px; color: #111;}

    /* 댓글레이어 */
    .layer_comment { right: -100%;  width: 560px; box-shadow: -5px 2px 7px rgba(0, 0, 0, 0.08); }
    .layer_comment .btn_close { position: absolute; right: 40px; top: 34px; }
    .layer_comment.active.sticky .btn_close { position: fixed; }
    .main_sm_text_area { display: none; }
    .layer_comment > .comment_header { padding: 30px 40px 0; }
    .layer_comment > .comment_body { padding: 0 40px; }

    .sticky_menu{border-radius: 36px; border: 1px solid rgba(0, 0, 0, 0.1); padding: 28px 12px; z-index: 299;}
    .sticky_menu [class*="btn_"]:hover{opacity: 0.6;}
    .sticky_menu [class*="ico_"]{margin-bottom: 6px;}
    /*.sticky_menu .layer_fontsize::before,
    .sticky_menu .layer_share::before { content: ''; z-index: 1; position: absolute; left: -5px; top: 20px; transform: rotate(-45deg); width: 7px; height: 7px; border-left: 1px solid #e2e2e2; border-top: 1px solid #e2e2e2; background-color: #fff; }*/
    .sticky_menu .reader_area span{font-size: 12px; line-height: 22px; color: #666;}
    .sticky_menu .cnt.bg_black{color: #fff;}
    .sticky_menu .btn_comment{padding-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
    .sticky_menu .btn_fontsize{padding-bottom: 15px;}
    .sticky_menu .reader_area{padding-bottom: 4px;  border-top: 1px solid rgba(0, 0, 0, 0.1); margin-top: 20px;}
    .txt_outline div{ padding: 20px;}

    /* layer_comment 답글 */
    .layer_comment .new_comment::before { left: -40px; width: calc(100% + 80px); }
    .layer_comment .reply_area .new_comment::before { left: -60px; width: calc(100% + 120px); }
    
    /* 댓글 제한 */
    .comment_disabled {margin-top:20px;padding:20px 24px;}

    /* not_comment */
    .not_comment{ padding: 40px 0;}

    /* 로딩 */
    .spinner_wrap {padding-top:40px;}

   
}