@charset "utf-8";

/*스크롤 영역*/
body::-webkit-scrollbar {display:none}
body {-ms-overflow-style:none}

/*헤더 영역*/
#header {position:relative; background:#fff; border-bottom:1px solid #ededed; padding:22px 0}

#header h1.logo {position:absolute; top:50%; left:14px; transform:translateY(-50%); width:94px; height:20px; font-size:0}
#header h1.logo a {display:block; color:transparent; width:94px; height:20px; background:url(../img/youtube-logo.png)no-repeat center / 94px auto; overflow:hidden}

#header .icon {position:absolute; top:50%; right:14px; transform:translateY(-50%); font-size:0}
#header .icon a {display:inline-block; padding:0 12px}
#header .icon a.sch {padding-right:0}


/*메인 영역*/
#main .video-box {display:block; font-size:0; text-align:center}
#main .video-box video {width:100%; height:auto}

#tit-box {display:flex; justify-content:center; padding:12px 14px}
#tit-box h3.tit {
    font-size:18px; color:#212121; width:100%; height:48px; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    line-height:24px; letter-spacing:-0.6px
}
#txt-box {display:block; padding:0 14px}
#txt-box p {font-size:12px; color:666; line-height:100%; letter-spacing:-0.4px}
#txt-box span {display:inline-block; font-weight:bold; cursor:pointer}

#info {position:relative; display:block; padding:14px 14px; cursor:pointer}
#info img {display:inline-block; width:32px; float:left}
#info p {display:inline-block; font-size:13px; color:#212121; font-weight:bold; line-height:100%; letter-spacing:-0.4px; vertical-align:-6px; padding-left:10px}
#info a {display:block; position:absolute; top:50%; right:14px; transform:translateY(-50%); line-height:100%; font-size:12px; font-weight:bold; color:#fff; background:#212121; padding:8px 10px; border-radius:16px}

#icon-btn {display:block; padding:0 14px}
#icon-btn ul {position:relative; overflow:hidden}
#icon-btn li {display:inline-block; font-size:0}
#icon-btn li a {position:relative; display:inline-block; color:#212121; font-size:12px; font-weight:bold; background:#f2f2f2; padding:10px 48px 10px 38px; border-radius:18px; line-height:100%}
#icon-btn li a img {position:absolute; top:50%; left:15px; transform:translateY(-50%); width:16px; height:16px}
#icon-btn li a span.dislike {
    position:absolute; top:50%; right:12px; transform:translateY(-50%); width:16px; height:16px; background:url(../img/dislike_icon.png)no-repeat center / 16px auto; overflow:hidden;
    color:transparent; font-size:0
}
#icon-btn li:nth-child(1) a:after {content:""; position:absolute; top:50%; right:38px; width:1px; height:16px; background:#e4e4e4; transform:translateY(-50%)}

#icon-btn li:nth-child(2) a {display:inline-block; padding-right:22px}

#icon-btn li:nth-child(3) a {display:inline-block; padding-right:18px}

#icon-btn li:nth-child(4) a {position:absolute; top:50%; right:-63px; transform:translateY(-50%); padding-right:18px}

#write-box {margin:16px 14px; background:#f2f2f2; border-radius:12px}
#write-box h3.tit {display:block; line-height:100%; font-size:14px; color:#212121; padding:12px 12px}
#write-box span {display:inline-block; font-size:13px; line-height:100%; padding-left:4px; font-weight:500}

#write-box .profile {display:inline-block; float:left; font-size:0; padding:0 12px 14px}
#write-box .profile a {display:block; width:24px; height:24px; background:url(../img/profile-icon.png)no-repeat center / 24px auto; overflow:hidden}

#write-box .form {padding:0 12px 14px}
#write-box .form input[type="text"] {width:270px; height:24px; background:#e6e6e6; font-size:12px; font-weight:500; line-height:100%; border-radius:10px; padding-left:16px}

#btn-box {padding:0 14px}
#btn-box ul {padding-bottom:8px; border-bottom:1px solid #e8e8e8}
#btn-box ul li {display:inline-block; font-size:0; padding:0 2px}
#btn-box ul li a {display:block; font-size:12px; font-weight:500; line-height:100%; background:#f2f2f2; padding:10px 12px; border-radius:10px}
#btn-box ul li:first-child {padding-left:0}
#btn-box ul li:first-child a {background:#151515; color:#fff}

#comment-box {padding-bottom:48px}
#comment-box ul.user {position:relative; padding:12px 14px; cursor:pointer}
#comment-box ul.user:after {content:""; position:absolute; top:14px; right:18px; width:3px; height:11px; background:url(../img/dot-icon.png)no-repeat center / 3px auto; overflow:hidden}
#comment-box ul.user li img {display:inline-block}
#comment-box ul.user li span {display:inline-block; padding-left:4px; font-size:12px; font-weight:400; line-height:100%; color:#666}
#comment-box ul.user li:nth-child(2) {padding-left:30px; letter-spacing:-0.4px}

#comment-box ul.user li:nth-child(3) {padding:12px 0 16px 30px}
#comment-box ul.user li:nth-child(3) a {display:inline-block; padding:0 14px}
#comment-box ul.user li a:nth-child(1) {padding-left:0}
#comment-box ul.user li:nth-child(3) span {display:inline-block; font-size:12px; font-weight:500; color:#212121; line-height:100%; vertical-align:middle}

/*푸터 영역*/
#footer-wrap {position:fixed; bottom:0; width:100%; height:48px; background:#fff; border-top:1px solid #dfdfdf}
#footer-wrap footer {position:relative; padding:0 14px; text-align:center; font-size:0}

#footer-wrap footer .main {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:30px; height:30px}
#footer-wrap footer .main a {display:block}

#footer-wrap footer .sub a {display:inline-block; font-size:11px; font-weight:500; line-height:100%; color:#212121; padding:5px 24px}
#footer-wrap footer .sub img {display:inline-block; width:24px; padding-bottom:2px}
#footer-wrap footer .sub span {display:block}

#footer-wrap footer .sub a:first-child {padding-left:0}
#footer-wrap footer .sub a:last-child {padding-right:0}

#footer-wrap footer .sub a:nth-child(2) {padding-right:60px}
#footer-wrap footer .sub a:nth-child(3) {padding-left:60px}