@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;}

   
}

/* pick */
.badge_pick {display:block;width:57px;height:22px;margin-bottom:6px;background-image: url("data:image/svg+xml,%0A%3Csvg width='57' height='22' viewBox='0 0 57 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='vi6wz04jqa'%3E%3CfeColorMatrix in='SourceGraphic' values='0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0'/%3E%3C/filter%3E%3Cfilter id='hpkbjdf0lb'%3E%3CfeColorMatrix in='SourceGraphic' values='0 0 0 0 0.964706 0 0 0 0 0.200000 0 0 0 0 0.039216 0 0 0 1.000000 0'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23F6330A' width='57' height='22' rx='3'/%3E%3Cpath d='M23.993 14.855v-2.56h.969c1.748 0 3.274-.808 3.274-2.642 0-1.907-1.504-2.508-3.33-2.508H22v7.71h1.993zm.869-4.02h-.869V8.605h.813c.958 0 1.492.27 1.492 1.047 0 .756-.468 1.181-1.436 1.181zm6.78 4.02v-7.71H29.65v7.71h1.993zm5.412.145c1.08 0 2.005-.383 2.706-1.14l-1.047-1.16c-.39.393-.924.704-1.58.704-1.17 0-1.927-.891-1.927-2.425 0-1.502.88-2.394 1.949-2.394.59 0 1.024.25 1.436.602l1.047-1.182A3.656 3.656 0 0 0 37.12 7c-2.104 0-3.953 1.472-3.953 4.041 0 2.612 1.782 3.959 3.886 3.959zm5.913-.145v-2.02l.902-1.14 1.949 3.16H48l-2.973-4.622 2.505-3.088H45.35L43 10.192h-.033V7.145h-1.993v7.71h1.993z' fill='%23FFF' fill-rule='nonzero'/%3E%3Cg filter='url(%23vi6wz04jqa)'%3E%3Cg transform='translate(6 4)' filter='url(%23hpkbjdf0lb)'%3E%3Cg transform='rotate(34 2.38 11.357)' fill='%23FFF'%3E%3Cpath d='M2.893 7.955.616 7.954c-.495 0-.653-.158-.609-.626.096-1.015.568-1.84 1.427-2.46.109-.078.146-.156.145-.282-.005-.857 0-1.715-.007-2.573a.56.56 0 0 0-.095-.294c-.272-.4-.42-.831-.418-1.307.002-.25.154-.408.42-.409a668.21 668.21 0 0 1 4.192 0c.26.001.415.164.415.416.001.461-.145.88-.4 1.272a.652.652 0 0 0-.111.33c-.01.858-.003 1.716-.008 2.574 0 .117.032.193.136.267.914.659 1.371 1.546 1.438 2.621.018.291-.162.466-.5.47-.595.005-1.191 0-1.787.001h-1.96z'/%3E%3Crect x='3.048' y='7.14' width='1.143' height='3.66' rx='.571'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");}

.pick_info {margin-right:10px;margin-left:auto;align-self:center;}
.pick_info .btn_info {display:flex;align-items:center;font-size:11px;font-weight:900;line-height:17px;letter-spacing:0;color:#999;}
.pick_info .ico_info {width:16px;height:16px;margin-left:2px;background-image:url("data:image/svg+xml,%0A%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23CDCDCD' width='16' height='16' rx='8'/%3E%3Ctext font-family='SFPro-Black, SF Pro' font-size='11' font-weight='700' fill='%23FFF'%3E%3Ctspan x='5' y='12'%3E%3F%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E%0A");}
.layer_pick {z-index:2;top:24px;right:0;width:320px;padding:14px 20px 20px;}
.layer_pick p {font-size:14px;}
.layer_pick p.title {font-weight:bold;line-height:20px;color:#333;}
.layer_pick p.desc {margin-top:10px;line-height:22px;color:#666;}
.layer_pick .btn_close {top:10px;right:10px;}
.layer_pick .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");}
.comment .badge_pick + .comment_header.flex + .comment_body + .comment_footer .more_option_area {top:38px;}
.comment .comment_header.flex {display:flex;}
.comment .comment_header.flex .comment_userid {margin-right:auto;order:1;}
.comment .comment_header.flex .comment_date {margin-left:0;margin-right:15px;order:3;}
.comment .comment_header.flex .btn_report {margin-left:0;margin-right:21px;order:2;}
.comment .comment_header.flex .btn_report::before {left:auto;right:-11px;}
.comment .comment_header.flex + .comment_body {margin-top:6px;}
.comment .comment_header.flex + .comment_body + .comment_footer .more_option_area {top:12px;}

.ico_level_bronze {width:22px;height:22px;background-image:url("data:image/svg+xml,%0A%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3ClinearGradient x1='102.989%25' y1='57.146%25' x2='0%25' y2='40.165%25' id='alkgeqisfa'%3E%3Cstop stop-color='%23CBA283' offset='0%25'/%3E%3Cstop stop-color='%23A77D6F' offset='100%25'/%3E%3C/linearGradient%3E%3ClinearGradient x1='7.418%25' y1='24.143%25' x2='88.242%25' y2='80.475%25' id='3ry3pukwyb'%3E%3Cstop stop-color='%23D6AD8E' offset='0%25'/%3E%3Cstop stop-color='%23A77D6F' offset='100%25'/%3E%3C/linearGradient%3E%3ClinearGradient x1='50%25' y1='0%25' x2='50%25' y2='81.408%25' id='z2t3605c2e'%3E%3Cstop stop-color='%23F0DCCB' offset='0%25'/%3E%3Cstop stop-color='%23D4B294' offset='100%25'/%3E%3C/linearGradient%3E%3Cfilter x='-7.2%25' y='-7.7%25' width='114.5%25' height='110.4%25' filterUnits='objectBoundingBox' id='f9nkw6pgec'%3E%3CfeOffset dy='.2' in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur stdDeviation='.5' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3E%3CfeColorMatrix values='0 0 0 0 0.541176471 0 0 0 0 0.266666667 0 0 0 0 0.164705882 0 0 0 1 0' in='shadowBlurOuter1'/%3E%3C/filter%3E%3Cpath d='M9.828 13.373 7.01 14.714a.4.4 0 0 1-.568-.413l.404-3.095a.4.4 0 0 0-.106-.327L4.592 8.612a.4.4 0 0 1 .217-.668l3.07-.572a.4.4 0 0 0 .277-.202L9.65 4.428a.4.4 0 0 1 .702 0l1.493 2.742a.4.4 0 0 0 .278.202l3.069.572a.4.4 0 0 1 .217.668L13.26 10.88a.4.4 0 0 0-.106.327l.404 3.095a.4.4 0 0 1-.568.413l-2.82-1.34a.4.4 0 0 0-.343 0z' id='vohrycvihd'/%3E%3C/defs%3E%3Cg transform='translate(1 1)' fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%239E7965' stroke-width='.8' fill='url(%23alkgeqisfa)' cx='10' cy='10' r='10.4'/%3E%3Ccircle fill='url(%233ry3pukwyb)' cx='10' cy='10' r='9'/%3E%3Cuse fill='%23000' filter='url(%23f9nkw6pgec)' xlink:href='%23vohrycvihd'/%3E%3Cuse fill='url(%23z2t3605c2e)' xlink:href='%23vohrycvihd'/%3E%3C/g%3E%3C/svg%3E%0A");}
.ico_level_silver {width:22px;height:22px;background-image:url("data:image/svg+xml,%0A%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3ClinearGradient x1='102.989%25' y1='57.146%25' x2='0%25' y2='40.165%25' id='xhk5zabgra'%3E%3Cstop stop-color='%23D5DFE5' offset='0%25'/%3E%3Cstop stop-color='%23C4CED5' offset='100%25'/%3E%3C/linearGradient%3E%3ClinearGradient x1='7.418%25' y1='24.143%25' x2='88.242%25' y2='80.475%25' id='pj04vbfg3b'%3E%3Cstop stop-color='%23DCE3E8' offset='0%25'/%3E%3Cstop stop-color='%23A6AFB5' offset='100%25'/%3E%3C/linearGradient%3E%3ClinearGradient x1='50%25' y1='0%25' x2='50%25' y2='81.408%25' id='9fonzd9tne'%3E%3Cstop stop-color='%23EEF1F3' offset='0%25'/%3E%3Cstop stop-color='%23DBE0E3' offset='100%25'/%3E%3C/linearGradient%3E%3Cfilter x='-7.2%25' y='-7.7%25' width='114.5%25' height='110.4%25' filterUnits='objectBoundingBox' id='9waz8spe7c'%3E%3CfeOffset dy='.2' in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur stdDeviation='.5' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3E%3CfeColorMatrix values='0 0 0 0 0.460572227 0 0 0 0 0.539822589 0 0 0 0 0.604663794 0 0 0 1 0' in='shadowBlurOuter1'/%3E%3C/filter%3E%3Cpath d='M9.828 13.373 7.01 14.714a.4.4 0 0 1-.568-.413l.404-3.095a.4.4 0 0 0-.106-.327L4.592 8.612a.4.4 0 0 1 .217-.668l3.07-.572a.4.4 0 0 0 .277-.202L9.65 4.428a.4.4 0 0 1 .702 0l1.493 2.742a.4.4 0 0 0 .278.202l3.069.572a.4.4 0 0 1 .217.668L13.26 10.88a.4.4 0 0 0-.106.327l.404 3.095a.4.4 0 0 1-.568.413l-2.82-1.34a.4.4 0 0 0-.343 0z' id='9ftggkh7md'/%3E%3C/defs%3E%3Cg transform='translate(1 1)' fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23C2C7CA' stroke-width='.8' fill='url(%23xhk5zabgra)' cx='10' cy='10' r='10.4'/%3E%3Ccircle fill='url(%23pj04vbfg3b)' cx='10' cy='10' r='9'/%3E%3Cuse fill='%23000' filter='url(%239waz8spe7c)' xlink:href='%239ftggkh7md'/%3E%3Cuse fill='url(%239fonzd9tne)' xlink:href='%239ftggkh7md'/%3E%3C/g%3E%3C/svg%3E%0A");}
.ico_level_gold {width:22px;height:22px;background-image:url("data:image/svg+xml,%0A%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3ClinearGradient x1='18.519%25' y1='12.076%25' x2='79.178%25' y2='94.261%25' id='tiazro4dca'%3E%3Cstop stop-color='%23F8B735' offset='0%25'/%3E%3Cstop stop-color='%23FFD465' offset='100%25'/%3E%3C/linearGradient%3E%3ClinearGradient x1='9.895%25' y1='24.292%25' x2='88.242%25' y2='80.475%25' id='hgck4uugpb'%3E%3Cstop stop-color='%23FFD465' offset='0%25'/%3E%3Cstop stop-color='%23F8B735' offset='100%25'/%3E%3C/linearGradient%3E%3ClinearGradient x1='50%25' y1='0%25' x2='50%25' y2='77.721%25' id='0myvdnbtoe'%3E%3Cstop stop-color='%23FFFAEE' offset='0%25'/%3E%3Cstop stop-color='%23FFECB8' offset='100%25'/%3E%3C/linearGradient%3E%3Cfilter x='-7.2%25' y='-7.7%25' width='114.5%25' height='110.4%25' filterUnits='objectBoundingBox' id='d97kjikiwc'%3E%3CfeOffset dy='.2' in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur stdDeviation='.5' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.702958906 0 0 0 0 0.187341606 0 0 0 1 0' in='shadowBlurOuter1'/%3E%3C/filter%3E%3Cpath d='M9.828 13.373 7.01 14.714a.4.4 0 0 1-.568-.413l.404-3.095a.4.4 0 0 0-.106-.327L4.592 8.612a.4.4 0 0 1 .217-.668l3.07-.572a.4.4 0 0 0 .277-.202L9.65 4.428a.4.4 0 0 1 .702 0l1.493 2.742a.4.4 0 0 0 .278.202l3.069.572a.4.4 0 0 1 .217.668L13.26 10.88a.4.4 0 0 0-.106.327l.404 3.095a.4.4 0 0 1-.568.413l-2.82-1.34a.4.4 0 0 0-.343 0z' id='czfzkoxxhd'/%3E%3C/defs%3E%3Cg transform='translate(1 1)' fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23FFC800' stroke-width='.8' fill='url(%23tiazro4dca)' cx='10' cy='10' r='10.4'/%3E%3Ccircle fill='url(%23hgck4uugpb)' cx='10' cy='10' r='9.087'/%3E%3Cuse fill='%23000' filter='url(%23d97kjikiwc)' xlink:href='%23czfzkoxxhd'/%3E%3Cuse fill='url(%230myvdnbtoe)' xlink:href='%23czfzkoxxhd'/%3E%3C/g%3E%3C/svg%3E%0A");}
.comment_header [class^="ico_level_"], .layer_pick .level [class^="ico_level_"] {margin-right:5px;}
.layer_pick .level {margin-top:16px;padding-top:16px;border-top:1px solid rgba(0, 0, 0, 0.1);font-size:14px;line-height:22px;letter-spacing:-0.4px;color:#111;}
.layer_pick .level li {display:flex;}
.layer_pick .level li:not(:first-child) {margin-top:5px;}
.layer_pick .level strong {font-weight:normal;}

@media (max-width: 1023px){
	.comment_area {position:relative;}
}

@media (min-width:1024px) {
	.pick_info {position:relative;}
}