/* reset */
@charset "utf-8";
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@import url('https://fonts.googleapis.com/css?family=Poppins:wght@100;200;300;400;500;700;800;800&display=swap');

@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

.nanumgothic * {
 font-family: 'Nanum Gothic', sans-serif;
}

/* 공통 */
html, body{font-family: 'Nanum Gothic', 'NanumSquare', sans-serif;}
html, body, div, ul, li, p, figure{padding:0; margin:0; line-height:1; letter-spacing:-0.03em}
ul, li{list-style:none}
a{text-decoration:none; color:#333}
button, optgroup, select, textarea, input{font-family: 'Nanum Gothic', 'NanumSquare', sans-serif;}
input[type=password]{font-family: sans-serif;}
input::-webkit-input-placeholder{ color:#dadada; font-weight:normal}
textarea::-webkit-input-placeholder{ color:#dadada; font-weight:normal}
input::-ms-input-placeholder{ color:#dadada; font-weight:normal}
textarea::-ms-input-placeholder{ color:#dadada; font-weight:normal}
input::-moz-placeholder{ color:#dadada; font-weight:normal}
textarea::-moz-placeholder{ color:#dadada; font-weight:normal}
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none;}
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none;}
select::-ms-expand{display:none;}
select{-moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ appearance:none;}
.poppins{font-family: 'Poppins', sans-serif;}
.center{ width:1000px; margin:0 auto;}
.borderBN{ border-bottom:none !important}

/* 헤더 */
header .topArea{ border-bottom:1px solid #f4f4f4; text-align:right; padding:10px 0}
header .topArea p{ display:inline-block; vertical-align:middle; font-size:14px; font-weight:bold; color:#7f7f7f; letter-spacing:-1px;}
header .topArea a{ position:relative; display:inline-block; vertical-align:middle; font-size:14px; font-weight:bold; color:#7f7f7f; letter-spacing:-1px; margin-left:25px; transform:skew(-0.04deg)}
header .topArea a:last-child:before{ content:""; position:absolute; top:50%; left:-14px; width:1px; height:12px; background-color:#ddd; transform:translateY(-50%);}
header .navArea{ text-align:center; padding:20px 0; border-bottom:1px solid #f4f4f4;}
header .navArea .center{ position:relative;}
header .navArea .logo{ position:absolute; left:0; top:0;}
header .navArea .logo img{ display:block; width:101px;}
header .navArea nav{ display:inline-block;}
header .navArea nav a{ display:inline-block; vertical-align:middle; line-height:64px; font-size:16px; font-weight:bold; color:#333; margin-right:90px; transform:skew(-0.04deg)}
header .navArea nav a:last-child{ margin-right:0}
header .navArea nav a:hover{ color:#1c1fff}
header .navArea .searchBtn{ position:absolute; right:0; top:50%; transform:translateY(-50%) }
header .navArea .searchBtn img{ display:inline-block; vertical-align:middle; width:20px;}
header .navArea .searchBtn span{ display:inline-block; vertical-align:middle; font-size:16px; font-weight:bold; color:#333; margin-left:10px; transform:skew(-0.04deg)}

/* 팝업 공통 */
.popup_layer{ position:fixed; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,0.7); z-index:100}
.popup_layer .popup_main{ position:absolute; top:50%; left:50%; transform:translate(-50%,-55%); width:500px; min-height:470px; background-color:#fff; padding:60px 30px; box-sizing:border-box; transition:0.4s;}
.popup_layer .popup_main .xBtn{ position:absolute; top:0; right:-35px;}
.popup_layer .popup_main .xBtn img{ display:block;}
.popup_layer .popup_main .popup_title{
  font-size: 30px;
  color: #333333;
  text-align: center;
}
.popup_layer .popup_main .popup_subTitle{ font-size:24px; font-weight:bold; color:#333; margin-top:50px; text-align:center; line-height:1.4;}
.popup_layer .popup_main .popup_subTitle2 {
  font-size: 16px;
  color: #666666;
  text-align: center;
  margin-top: 20px;
}
.popup_layer .popup_main .popup_btn{ display:block; width:100%; line-height:58px; font-size:16px; font-weight:bold; color:#fff; text-align:center; background-color:#1c1fff; margin-top:40px;}
.popup_layer .popup_main .popup_btnBox{ text-align:center;  margin-top:40px; font-size:0}
.popup_layer .popup_main .popup_btnBox a{ display:inline-block; vertical-align:middle; width:48.5%; line-height:58px; font-size:16px; font-weight:bold; transform:skew(-0.04deg)}
.popup_layer .popup_main .popup_btnBox .btn01{ color:#fff; background-color:#1c1fff; margin-right:3%;}
.popup_layer .popup_main .popup_btnBox .btn02{ color:#333; background-color:#dadada;}
.popup_layer .popup_main .select_item{ margin-bottom:60px;}
.popup_layer .popup_main .select_item input[type=radio]{ display:none;}
.popup_layer .popup_main .select_item input[type=radio] + label{ display:block; padding:10px 0 10px 30px; box-sizing:border-box; font-size:16px; font-weight:bold; color:#333; background-image:url(../img/icon_radio_off.png); background-position:left center; background-repeat:no-repeat; background-size:24px; cursor:pointer; transform:skew(-0.04deg); margin-bottom:5px;}
.popup_layer .popup_main .select_item input[type=radio] + label:last-of-type{ padding:5px 0 5px 30px;}
.popup_layer .popup_main .select_item input[type=radio]:checked + label{ background-image:url(../img/icon_radio_on.png);}
.popup_layer .popup_main .select_item input[type=radio] + label input{ display:block; width:150px; height:38px; border:1px solid #333300; background-color:#fff; outline:none; font-size:16px; font-weight:bold; color:#333; padding-left:10px; box-sizing:border-box;}

/* 회원가입 완료 */
.popup_layer{ position:fixed; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,0.7); z-index:100}
.popup_layer .join_complete{ width:400px; min-height:0; border-radius:0; background-color:#fff; padding:0;}
.popup_layer .join_complete .xBtn{ top:20px; right:20px; z-index:1}
.popup_layer .join_complete .xBtn img{ display:block;}
.popup_layer .join_complete .popup_title2{ font-size:18px; font-weight:bold; color:#333; text-align:center; padding:100px 0;}
.popup_layer .join_complete .popup_btn{ margin-top:0;}

/* 검색 팝업 */
.popup_layer .searchArea .inputBox{ position:relative; width:100%; height:40px; border-bottom:1px solid #333;}
.popup_layer .searchArea .inputBox input{ display:block; width:100%; height:100%; padding-left:10px; font-size:16px; font-weight:bold; color:#333; padding-right:50px; box-sizing:border-box; border:none; background-color:transparent; outline:none; transform:skew(-0.04deg)}
.popup_layer .searchArea .inputBox .btn{ position:absolute; right:10px; top:50%; transform:translateY(-50%);}
.popup_layer .searchArea .inputBox .btn img{}
.popup_layer .searchArea .history{ width:100%; padding:30px 10px; box-sizing:border-box;}
.popup_layer .searchArea .history .his_title{ position:relative; font-size:18px; font-weight:800; color:#333;}
.popup_layer .searchArea .history .his_title .all_del{ position:absolute; top:50%; right:0; transform:translateY(-50%); font-size:14px; font-weight:bold; color:#757271;}
.popup_layer .searchArea .history ul{ margin-top:40px;}
.popup_layer .searchArea .history ul li{ position:relative; margin-bottom:20px}
.popup_layer .searchArea .history ul li .word{ display:inline-block; font-size:16px; font-weight:bold; color:#333; transform:skew(-0.04deg)}
.popup_layer .searchArea .history ul li .del{ position:absolute; right:0; top:50%; transform:translateY(-50%);}
.popup_layer .searchArea .history ul li .del img{ width:10px;}

/* 후원자리스트 팝업 */
.popup_layer .sponsor{ padding:70px 60px; border-radius:0}
.popup_layer .sponsor .sponsor_counting{ font-size:24px; font-weight:bold; color:#333; margin-top:30px; text-align:center; margin-bottom: 20px;}
.popup_layer .sponsor .sponsor_counting strong{ font-weight:800}
.popup_layer .sponsor .sponsor_title{ font-size:20px; font-weight:bold; color:#333; margin-top:60px; margin-bottom:30px;}
.popup_layer .sponsor .sponsor_list{ /*max-height: 255px; overflow-y:auto;*/ border-bottom: 1px solid #dadada;}
.popup_layer .sponsor .sponsor_list table{ width:100%; border-collapse:collapse; margin-top: 10px; margin-bottom: 30px;}
.popup_layer .sponsor .sponsor_list table td{ font-size:16px; font-weight:bold; color:#666; padding:10px 0; transform:skew(-0.04deg)}
.popup_layer .sponsor .sponsor_list table td:nth-child(1){}
.popup_layer .sponsor .sponsor_list table td:nth-child(2){ font-weight:800; color:#333;}
.popup_layer .sponsor .sponsor_list table td:nth-child(3){ font-weight:800; color:#008fe4; text-align:right; padding-right:10px;}

/* 후원하기 팝업 */
.popup_layer .sponsor .sponsor_notice{}
.popup_layer .sponsor .sponsor_notice li{ position:relative; font-size:14px; font-weight:bold; color:#666; letter-spacing:-0.05em; margin-top:12px; padding-left:15px; transform:skew(-0.04deg)}
.popup_layer .sponsor .sponsor_notice li:before{ content:""; position:absolute; top:50%; left:2px; transform:translateY(-50%); width:4px; height:4px; border-radius:50%; background-color:#333;}

/* 신고하기 팝업 */
.popup_layer .report{ padding:70px 60px; border-radius:0}
.popup_layer .report .report_tb{ width:100%; border-collapse:collapse; margin-top:30px;}
.popup_layer .report .report_tb th{ width:60px; font-size:20px; font-weight:bold; color:#333; vertical-align:middle; padding:5px 0; text-align:left;}
.popup_layer .report .report_tb td{ vertical-align:middle; padding:5px 20px; text-align:left;}
.popup_layer .report .report_tb td p{ max-width:286px; font-size:16px; font-weight:bold; color:#666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; transform:skew(-0.04deg); white-space: nowrap; display: block;}
.popup_layer .report .report_title{ font-size:20px; font-weight:bold; color:#333; padding-top:30px; margin-top:30px; margin-bottom:30px; border-top:1px solid #dadada;}
.popup_layer .report .report_notice{ font-size:14px; font-weight:bold; color:#666; letter-spacing:-0.05em; margin-top:20px; transform:skew(-0.04deg); line-height:1.4; transform:skew(-0.04deg)}

.popup_layer .find{}
.popup_layer .find .formBox{ margin-top:40px;}
.popup_layer .find .formBox li{ margin-bottom:30px;}
.popup_layer .find .formBox li .form_title{ font-size:16px; font-weight:bold; color:#9d9d9d; transform:skew(-0.04deg); margin-bottom:10px;}
.popup_layer .find .formBox li .inputBox{ width:100%; height:58px; border:1px solid #ccc; box-sizing:border-box; }
.popup_layer .find .formBox li .inputBox input{ display:block; width:100%; height:100%; padding-left:20px; font-size:16px; font-weight:bold; color:#333; border:none; box-sizing:border-box; background-color:transparent; outline:none; transform:skew(-0.04deg)}
.popup_layer .find .formBox li .inc_btn{ position:relative; padding-right:100px; box-sizing:border-box}
.popup_layer .find .formBox li .inc_btn .btn{ position:absolute; right:20px; top:50%; transform:translateY(-50%) skew(-0.04deg); font-size:16px; font-weight:800; color:#1c1fff;}
.popup_layer .find .formBox li .form_notice{ font-size:14px; font-weight:bold; color:#64c051; margin-top:10px; padding-left:10px; transform:skew(-0.04deg)}
.popup_layer .find .step02 .formBox li .form_title{
  font-size: 16px;
  letter-spacing: -0.2px;
  color: #333333;
  display: inline-block;
  margin-right: 40px;
  margin-top: 186px;
}
.popup_layer .find .step02 .formBox li .inputBox{
  font-size: 16px;
  letter-spacing: -0.2px;
  color: #333333;
  display: inline-block;
}
.popup_layer .find .step02 .formBox li .form_notice{
  font-size: 12px;
  letter-spacing: -0.2px;
  color: #333333;
  margin-top: 20px;
  margin-bottom: 199px;
}
.popup_layer .find.pw_step02 .formBox li .form_title.dark {
  font-size: 16px;
  letter-spacing: -0.2px;
  color: #333333;
}

/* 푸터 */
footer{ padding:20px 0; border-top:1px solid #f4f4f4;}
footer .link{}
footer .link a{ position:relative; display:inline-block; vertical-align:middle; font-size:14px; font-weight:bold; color:#333; margin-right:40px; transform:skew(-0.04deg)}
footer .link a:last-child{ margin-right:0}
footer .link a:before{ content:"|"; position:absolute; top:50%; right:-23px; transform:translateY(-50%); font-size:12px; font-weight:100; color:#ddd;}
footer .link a:last-child:before{ display:none}
footer .info{ margin-top:20px;}
footer .info p{ margin-top:10px;}
footer .info p.copyright{ font-size:12px; font-weight:bold; color:#333; margin-top:40px; transform:skew(-0.04deg)}
footer .info p span{ position:relative; display:inline-block; vertical-align:middle; font-size:12px; font-weight:bold; color:#333; margin-right:20px; transform:skew(-0.04deg)}
footer .info p span:last-child{ margin-right:0}
footer .info p span:before{ content:"|"; position:absolute; top:50%; right:-13px; transform:translateY(-50%); font-size:12px; font-weight:100; color:#ddd;}
footer .info p span:last-child:before{ display:none}

/* 로그인/회원가입 */
#login{ position:relative; height:calc(100vh - 171px); min-height: 894px;}
#login .loginBox{ position:absolute; top:50%; left:50%; width:390px; transform:translate(-50%,-50%)}
#login .loginBox .logo{ display:block; width:150px; margin:0 auto;}
#login .loginBox .logo img{ width:100%;}
#login .loginBox .formBox{ margin-top:50px;}
#login .loginBox .formBox .inputBox{ width:100%; height:58px; border:1px solid #ccc; box-sizing:border-box; margin-bottom:20px;}
#login .loginBox .formBox .inputBox input{ display:block; width:100%; height:100%; padding-left:20px; font-size:16px; font-weight:bold; color:#333; border:none; box-sizing:border-box; background-color:transparent; outline:none; transform:skew(-0.04deg)}
#login .loginBox .formBox .inputBox input::-webkit-input-placeholder{ color:#9d9d9d;}
#login .loginBox .formBox .inputBox input::-ms-input-placeholder{ color:#9d9d9d;}
#login .loginBox .formBox .inputBox input::-moz-placeholder{ color:#9d9d9d;}
#login .loginBox .formBox .checkBox{ text-align:left;}
#login .loginBox .formBox .checkBox input{ display:none;}
#login .loginBox .formBox .checkBox input + label{ display:inline-block; vertical-align:middle; font-size:14px; font-weight:bold; color:#9d9d9d; padding:10px 0 10px 30px; margin-right:30px; background-image:url(../img/icon_check_off.png); background-position:left center; background-repeat:no-repeat; background-size:24px; transform:skew(-0.04deg); cursor:pointer}
#login .loginBox .formBox .checkBox input:checked + label{ background-image:url(../img/icon_check_on.png);}
#login .loginBox .formBox .loginBtn{ display:block; width:100%; line-height:58px; font-size:16px; font-weight:bold; color:#fff; text-align:center; background-color:#1c1fff; border:none; margin-top:50px; cursor:pointer; transform:skew(-0.04deg); font-family: 'NanumSquare', sans-serif;}
#login .loginBox .formBox .linkBox{ text-align:center; margin-top:30px;}
#login .loginBox .formBox .linkBox a{ position:relative; display:inline-block; vertical-align:middle; font-size:14px; font-weight:bold; color:#9d9d9d; margin:0 10px; transform:skew(-0.04deg)}
#login .loginBox .formBox .linkBox a:before{ content:""; position:absolute; top:50%; right:-12px; width:1px; height:10px; background-color:#ddd; transform:translateY(-50%);}
#login .loginBox .formBox .linkBox a.join{ font-weight:800; color:#333}
#login .loginBox .formBox .linkBox a.join:before{ display:none;}
#login .joinBox .formBox .mgB0{ margin-bottom:0; margin-bottom:-1px}
#login .joinBox .formBox .inc_btn{ position:relative; padding-right:100px; box-sizing:border-box}
#login .joinBox .formBox .inc_btn .btn{ position:absolute; right:20px; top:50%; transform:translateY(-50%) skew(-0.04deg); font-size:16px; font-weight:800; color:#1c1fff;}
#login .joinBox .formBox .checkBox{ text-align:left;}
#login .joinBox .formBox .checkBox input{ display:none;}
#login .joinBox .formBox .checkBox input + label{ display:inline-block; vertical-align:middle; font-size:14px; font-weight:bold; color:#9d9d9d; padding:10px 0 10px 30px; margin-right:30px; background-image:url(../img/icon_check_off.png); background-position:left center; background-repeat:no-repeat; background-size:24px; transform:skew(-0.04deg); cursor:pointer}
#login .joinBox .formBox .checkBox input:checked + label{ background-image:url(../img/icon_check_on.png);}

/* 메인 */
#wraper .mainArea{ padding-bottom:180px;}
#wraper .mainArea .visual{ width:1000px; margin:0 auto}
#wraper .mainArea .visual .swiper-button-prev,
#wraper .mainArea .visual .swiper-button-next{ width:40px; height:70px; background-position:center; background-repeat:no-repeat; background-size:contain; top:50%; margin-top:0; transform:translateY(-50%);}
#wraper .mainArea .visual .swiper-button-prev{ left:30px; background-image:url(../img/prevBtn.png);}
#wraper .mainArea .visual .swiper-button-next{ right:30px; background-image:url(../img/nextBtn.png);}
#wraper .mainArea .visual .swiper-pagination{ bottom:30px; right:30px; left:auto; top:auto; width:51px; border-radius:12px; background-color:rgba(0,0,0,0.7); font-size:14px; color:#fff;}
#wraper .mainArea .visual .swiper-pagination span{ font-size:14px; font-weight:bold; color:#fff; line-height:28px;}
#wraper .mainArea .visual .swiper-pagination span.swiper-pagination-total{ opacity:0.6;}
#wraper .mainArea section{ margin-top:120px;}
#wraper .mainArea section.bg_gray{ background-color:#f5f5f5; padding:120px 0;}
#wraper .mainArea section .sec_title{ position:relative; width:100%; padding:20px 0; border-bottom:2px solid #333; font-size:24px; font-weight:800; color:#333;}
#wraper .mainArea section .sec_title .more{ position:absolute; right:0; top:50%; transform:translateY(-50%); padding-left:15px; font-size:14px; font-weight:bold; color:#333; background-image:url(../img/icon_plus.png); background-position:left top 1px; background-repeat:no-repeat; background-size:11px;}
#wraper .mainArea section .channel_list{}
#wraper .mainArea section .channel_list li{ border-bottom:1px solid #ddd;}
#wraper .mainArea section .channel_list li a{ position:relative; display:block; width:100%; padding:20px 0; font-size:0}
#wraper .mainArea section .channel_list li a .number{ display:inline-block; vertical-align:middle; width:140px; font-size:32px; font-weight:700; color:#333; letter-spacing:-1px; text-align:center; font-family: 'Poppins', sans-serif !important;}
#wraper .mainArea section .channel_list li a .imgBox{ display:inline-block; vertical-align:middle; width:110px; height:110px; overflow:hidden; border-radius:12px}
#wraper .mainArea section .channel_list li a .imgBox .img{ width:inherit; height:inherit; border-radius:12px; background-position:center; background-repeat:no-repeat; background-size:cover; transition:0.2s;}
#wraper .mainArea section .channel_list li a .textBox{ display:inline-block; vertical-align:middle; width:660px; padding:0 20px; box-sizing:border-box}
#wraper .mainArea section .channel_list li a .textBox .text01{ font-size:18px; font-weight:bold; color:#333;}
#wraper .mainArea section .channel_list li a .textBox .text02{ font-size:14px; font-weight:bold; color:#757271; margin-top:6px; transform:skew(-0.04deg)}
#wraper .mainArea section .channel_list li a .viewBtn{ position:absolute; top:50%; right:20px; transform:translateY(-50%); font-size:14px; font-weight:bold; color:#333; padding-right:15px; background-image:url(../img/icon_arrow_right.png); background-position:right top 1px; background-repeat:no-repeat; background-size:7px;}
#wraper .mainArea section .channel_list li a:hover .imgBox .img{ transform:scale(1.1) translateZ(0)}
#wraper .mainArea section .new_contents{ position:relative; margin-top:40px; }
#wraper .mainArea section .new_contents .swiper-container{ padding:5px; box-sizing:border-box}
#wraper .mainArea section .new_contents .swiper-slide{ display:block; overflow:hidden; border-radius:14px; box-shadow:0 0 3px 1px rgba(0,0,0,0.1);}
#wraper .mainArea section .new_contents .swiper-slide .imgBox{ position:relative; width:100%; height:170px; overflow:hidden; border-radius:14px 14px 0 0;}
#wraper .mainArea section .new_contents .swiper-slide .imgBox .img{ width:100%; height:inherit; background-position:center; background-repeat:no-repeat; background-size:cover; border-radius:14px 14px 0 0; transition:0.2s;}
#wraper .mainArea section .new_contents .swiper-slide .imgBox .new{ position:absolute; left:0; bottom:0; font-size:16px; font-weight:bold; color:#fff; padding:10px; background-color:#1c1fff; z-index:1}
#wraper .mainArea section .new_contents .swiper-slide .textBox{ position:relative; width:100%; padding:20px; box-sizing:border-box; background-color:#fff; border-radius:0 0 14px 14px; z-index:1}
#wraper .mainArea section .new_contents .swiper-slide .textBox .text01{ height:36px; font-size:16px; font-weight:bold; color:#333; line-height:1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transform:skew(-0.04deg)}
#wraper .mainArea section .new_contents .swiper-slide .textBox .text02{ font-size:14px; font-weight:bold; color:#757271; margin-top:10px; transform:skew(-0.04deg)}
#wraper .mainArea section .new_contents .swiper-slide .textBox .text03{ font-size:12px; font-weight:bold; color:#333; margin-top:30px; transform:skew(-0.04deg)}
#wraper .mainArea section .new_contents .swiper-slide:hover .imgBox .img{ transform:scale(1.1) translateZ(0)}
#wraper .mainArea section .new_contents .swiper-pagination{ position:relative; width:100%; text-align:center; transform:none; margin-top:60px;}
#wraper .mainArea section .new_contents .swiper-pagination span{ width:10px; height:10px; background-color:#757271; opacity:1; margin:0 10px;}
#wraper .mainArea section .new_contents .swiper-pagination span.swiper-pagination-bullet-active{ position:relative; background-color:#1c1fff}
#wraper .mainArea section .new_contents .swiper-pagination span.swiper-pagination-bullet-active:before{ content:""; position:absolute; width:16px; height:16px; border:1px solid #1c1fff; left:-4px; top:-4px; border-radius:50%;}

#wraper .mainArea section .contents_new{ position:relative;}
#wraper .mainArea section .contents_new .swiper-slide{}
#wraper .mainArea section .contents_new .swiper-slide li{ border-bottom:1px solid #ddd;}
#wraper .mainArea section .contents_new .swiper-slide li a{ position:relative; display:block; width:100%; padding:30px; box-sizing:border-box;}
#wraper .mainArea section .contents_new .swiper-slide li a .text01{ font-size:16px; font-weight:bold; color:#333; transform:skew(-0.04deg)}
#wraper .mainArea section .contents_new .swiper-slide li a .text02{ font-size:14px; font-weight:bold; color:#757271; margin-top:10px; transform:skew(-0.04deg)}
#wraper .mainArea section .contents_new .swiper-slide li a .date{ position:absolute; top:50%; right:30px; transform:translateY(-50%) skew(-0.04deg); font-size:14px; font-weight:bold; color:#333;}
#wraper .mainArea section .contents_new .swiper-pagination{ position:relative; width:100%; text-align:center; transform:none; margin-top:60px;}
#wraper .mainArea section .contents_new .swiper-pagination span{ width:10px; height:10px; background-color:#757271; opacity:1; margin:0 10px;}
#wraper .mainArea section .contents_new .swiper-pagination span.swiper-pagination-bullet-active{ position:relative; background-color:#1c1fff}
#wraper .mainArea section .contents_new .swiper-pagination span.swiper-pagination-bullet-active:before{ content:""; position:absolute; width:16px; height:16px; border:1px solid #1c1fff; left:-4px; top:-4px; border-radius:50%;}
#wraper .mainArea section .contents_list_new{}
#wraper .mainArea section .contents_list_new li{ border-bottom:1px solid #ddd;}
#wraper .mainArea section .contents_list_new li a{ position:relative; display:block; width:100%; padding:50px 30px; box-sizing:border-box;}
#wraper .mainArea section .contents_list_new li a .text01{ font-size:16px; font-weight:bold; color:#333; transform:skew(-0.04deg)}
#wraper .mainArea section .contents_list_new li a .text02{ font-size:14px; font-weight:bold; color:#757271; margin-top:10px; transform:skew(-0.04deg)}
#wraper .mainArea section .contents_list_new li a .date{ position:absolute; top:50%; right:30px; transform:translateY(-50%) skew(-0.04deg); font-size:14px; font-weight:bold; color:#333;}
#wraper .mainArea section .contents_list{ width:100%; box-sizing:border-box; margin-top:40px; overflow:hidden; padding-left:3px;}
#wraper .mainArea section .contents_list:after{ content:""; display:block; clear:both;}
#wraper .mainArea section .contents_list li{ float:left; width:23.8%; margin-right:1.5%; margin-bottom:40px;}
#wraper .mainArea section .contents_list li:nth-child(4n){ margin-right:0}
#wraper .mainArea section .contents_list li a{ display:block; width:100%; overflow:hidden; border-radius:14px; box-shadow:0 0 3px 1px rgba(0,0,0,0.1);}
#wraper .mainArea section .contents_list li a .imgBox{ position:relative; width:100%; height:170px; border-radius:14px 14px 0 0;}
#wraper .mainArea section .contents_list li a .imgBox .img{ width:100%; height:inherit; background-position:center; background-repeat:no-repeat; background-size:cover; border-radius:14px 14px 0 0; transition:0.2s;}
#wraper .mainArea section .contents_list li a .textBox{ position:relative; width:100%; padding:20px; box-sizing:border-box; background-color:#fff; border-radius:0 0 14px 14px; z-index:1}
#wraper .mainArea section .contents_list li a .textBox .text01{ height:36px; font-size:16px; font-weight:bold; color:#333; line-height:1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transform:skew(-0.04deg)}
#wraper .mainArea section .contents_list li a .textBox .text02{ font-size:14px; font-weight:bold; color:#757271; margin-top:10px; transform:skew(-0.04deg)}
#wraper .mainArea section .contents_list li a .textBox .text03{ font-size:12px; font-weight:bold; color:#333; margin-top:30px; transform:skew(-0.04deg)}
#wraper .mainArea section .contents_list li a:hover .imgBox .img{ transform:scale(1.1) translateZ(0)}
#wraper .mainArea section .list_more{ display:block; width:140px; line-height:50px; font-size:16px; font-weight:bold; color:#333; border:1px solid #333; box-sizing:border-box; text-align:center; margin:50px auto 0; transition:0.3s; transform:skew(-0.04deg)}
#wraper .mainArea section .list_more:hover{ color:#fff; background-color:#1c1fff;}

/* 서브공통 */
#wraper .subArea{ padding:130px 0 180px;}
#wraper .subArea .title{ font-size:30px; font-weight:bold; color:#333; text-align:center; transform:skew(-0.04deg)}
#wraper .subArea .subTitle{ font-size:16px; font-weight:bold; color:#666; margin-top:10px; text-align:center; margin-bottom:130px; transform:skew(-0.04deg)}
#wraper .subArea .sec_title{ position:relative; width:100%; padding:20px 0; border-bottom:2px solid #333; font-size:24px; font-weight:bold; color:#333;}

/* 채널 */
#wraper .subArea .channel_list{}
#wraper .subArea .channel_list li{ border-bottom:1px solid #ddd;}
#wraper .subArea .channel_list li a{ position:relative; display:block; width:100%; padding:20px 0; font-size:0}
#wraper .subArea .channel_list li a .number{ display:inline-block; vertical-align:middle; width:140px; font-size:32px; font-weight:700; color:#333; letter-spacing:-1px; text-align:center; font-family: 'Poppins', sans-serif !important;}
#wraper .subArea .channel_list li a .imgBox{ display:inline-block; vertical-align:middle; width:110px; height:110px; overflow:hidden; border-radius:12px}
#wraper .subArea .channel_list li a .imgBox .img{ width:inherit; height:inherit; border-radius:12px; background-position:center; background-repeat:no-repeat; background-size:cover; transition:0.2s;}
#wraper .subArea .channel_list li a .textBox{ display:inline-block; vertical-align:middle; width:660px; padding:0 20px; box-sizing:border-box}
#wraper .subArea .channel_list li a .textBox .text01{ font-size:18px; font-weight:bold; color:#333;}
#wraper .subArea .channel_list li a .textBox .text02{ font-size:14px; font-weight:bold; color:#757271; margin-top:6px; transform:skew(-0.04deg)}
#wraper .subArea .channel_list li a .viewBtn{ position:absolute; top:50%; right:20px; transform:translateY(-50%); font-size:14px; font-weight:bold; color:#333; padding-right:15px; background-image:url(../img/icon_arrow_right.png); background-position:right top 1px; background-repeat:no-repeat; background-size:7px; transform:skew(-0.04deg)}
#wraper .subArea .channel_list li a:hover .imgBox .img{ transform:scale(1.1) translateZ(0)}
#wraper .subArea .bt_btn{ display:block; width:140px; line-height:50px; font-size:16px; font-weight:bold; color:#333; border:1px solid #333; box-sizing:border-box; text-align:center; margin:50px auto 0; transition:0.3s; transform:skew(-0.04deg)}
#wraper .subArea .bt_btn:hover{ color:#fff; background-color:#1c1fff;}

/* 마이페이지/고객센터 */
#wraper .subArea .tabBox{ display:table; width:100%; border-collapse:collapse;}
#wraper .subArea .tabBox a{ display:table-cell; vertical-align:middle; width:33.33%; height:64px; font-size:16px; font-weight:bold; color:#333; text-align:center; background-color:#f4f4f4; border:1px solid #dcdcdc; box-sizing:border-box; transform:skew(-0.04deg)}
#wraper .subArea .tabBox a.active{ color:#fff; background-color:#1c1fff; border-color:#1c1fff}
#wraper .subArea .listBox{ margin-top:80px;}
#wraper .subArea .listBox table{ width:100%; border-collapse:collapse; border-top:2px solid #000;}
#wraper .subArea .listBox table th{ font-size:14px; font-weight:bold; color:#333; text-align:center; background-color:transparent; border-bottom:1px solid #ddd; padding:20px 0; transform:skew(-0.04deg)}
#wraper .subArea .listBox table td{ height:78px; vertical-align:middle; font-size:16px; font-weight:bold; color:#333; text-align:center; border-bottom:1px solid #ddd; transform:skew(-0.04deg); line-height:1.2; box-sizing:border-box}
#wraper .subArea .listBox table th:first-child,
#wraper .subArea .listBox table td:first-child{ text-align:left; padding:0 30px;}
#wraper .subArea .listBox table td.blue{ color:#008fe4;}
#wraper .subArea .listBox table td.red{ color:#ed0000;}
#wraper .subArea .listBox table td p{ display:block; width:100%; padding:0 20px; box-sizing:border-box; font-size:14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; transform:skew(-0.04deg); margin-top:5px;}
#wraper .subArea .listBox table tr.question{ cursor:pointer;}
#wraper .subArea .listBox table tr.question:hover td{ background-color:#f6f6f6;}
#wraper .subArea .listBox table tr.answer{ display:none}
#wraper .subArea .listBox table tr.answer td{ width:100%; padding:30px; background-color:#f6f6f6; line-height:1.4}
#wraper .subArea .listBox table tr.active + .answer{ display:table-row}
#wraper .subArea .listBox .pageBox{ margin-top:50px; text-align:center;}
#wraper .subArea .listBox .pageBox a{ display:inline-block; vertical-align:middle; width:30px; font-size:16px; font-weight:bold; color:#333; padding:10px 0; text-align:center; transform:skew(-0.04deg)}
#wraper .subArea .listBox .pageBox a img{ height:12px;}
#wraper .subArea .listBox .pageBox a.number.active{ color:#1c1fff}
#wraper .subArea .listBox .pageBox a.prev{ text-align:left}
#wraper .subArea .listBox .pageBox a.next{ text-align:right}

/* 문의하기 */
#wraper .subArea .request{}
#wraper .subArea .request table{ width:100%; border-collapse:collapse; border-top:2px solid #000;}
#wraper .subArea .request table th{ width:114px; padding-left:20px; box-sizing:border-box; font-size:16px; font-weight:bold; color:#333; text-align:left; vertical-align:middle; border:1px solid #ddd; border-left:none; transform:skew(-0.04deg)}
#wraper .subArea .request table td{ padding:30px 50px; vertical-align:middle; border:1px solid #ddd; border-right:none; box-sizing:border-box; transform:skew(-0.04deg)}
#wraper .subArea .request table td .inputBox{ width:100%; height:40px; border:1px solid #ddd; box-sizing:border-box;}
#wraper .subArea .request table td .inputBox.wd50{ width:50%;}
#wraper .subArea .request table td .inputBox input{ display:block; width:100%; height:100%; font-size:16px; font-weight:bold; color:#333; padding-left:10px; box-sizing:border-box; border:none; background-color:transparent; outline:none; transform:skew(-0.04deg)}
#wraper .subArea .request table td .textArea{ width:100%; height:170px; border:1px solid #ddd; box-sizing:border-box;}
#wraper .subArea .request table td .textArea textarea{ display:block; width:100%; height:100%; font-size:16px; font-weight:bold; color:#333; padding:10px; box-sizing:border-box; border:none; background-color:transparent; outline:none; resize:none; transform:skew(-0.04deg)}
#wraper .subArea .request table td .fileBox{}
#wraper .subArea .request table td .fileBox input{ display:none;}
#wraper .subArea .request table td .fileBox input + label{ display:block; width:110px; line-height:38px; font-size:16px; font-weight:bold; color:#333; text-align:center; border:1px solid #ddd; box-sizing:border-box; transform:skew(-0.04deg); cursor:pointer}
#wraper .subArea .request table td p{ position:relative; font-size:14px; font-weight:bold; color:#9d9d9d; padding-left:15px; margin-top:20px;}
#wraper .subArea .request table td p:before{ content:""; position:absolute; top:50%; left:0; transform:translateY(-50%); width:4px; height:4px; border-radius:50%; background-color:#9d9d9d;}
#wraper .subArea .request .request_btn{ text-align:center; margin-top:50px;}
#wraper .subArea .request .request_btn a{ display:inline-block; vertical-align:middle; width:140px; line-height:50px; font-size:16px; font-weight:bold; color:#333; text-align:center; border:1px solid #333; transform:skew(-0.04deg)}
#wraper .subArea .request .request_btn a.btn02{ border-color:#1c1fff; background-color:#1c1fff; color:#fff; margin-left:20px;}

/* 캐시충전 */
#wraper .subArea .my_cash{ position:relative; width:100%; padding:28px 50px; box-sizing:border-box; font-size:24px; font-weight:bold; color:#fff; background-color:#1c1fff; border-radius:10px;}
#wraper .subArea .my_cash p{ position:absolute; top:50%; right:50px; transform:translateY(-50%); font-size:30px; font-weight:800; color:#fff;}
#wraper .subArea .chargeBox{ width:100%; padding:30px 50px; box-sizing:border-box; border-radius:10px; box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.1); margin-top:40px;}
#wraper .subArea .chargeBox .charge_text{ position:relative; font-size:24px; font-weight:bold; color:#333;}
#wraper .subArea .chargeBox .charge_text p{ position:absolute; top:50%; right:0; transform:translateY(-50%); font-size:24px; font-weight:bold; color:#333;}
#wraper .subArea .chargeBox .select_cash{ display:table; width:100%; border-collapse:collapse; margin-top:20px;}
#wraper .subArea .chargeBox .select_cash input[type=radio]{ display:none;}
#wraper .subArea .chargeBox .select_cash input[type=radio] + label{ display:table-cell; width:25%; vertical-align:middle; padding:10px 0 10px 30px; box-sizing:border-box; font-size:16px; font-weight:bold; color:#333; background-image:url(../img/icon_radio_off.png); background-position:left center; background-repeat:no-repeat; background-size:24px; cursor:pointer; transform:skew(-0.04deg)}
#wraper .subArea .chargeBox .select_cash input[type=radio]:checked + label{ background-image:url(../img/icon_radio_on.png);}
#wraper .subArea .chargeBox .select_cash input[type=radio] + label input{ display:block; width:100%; height:38px; border:1px solid #333300; background-color:#fff; outline:none; font-size:16px; font-weight:bold; color:#333; padding-left:10px; box-sizing:border-box;}
#wraper .subArea .charge_title{ font-size:24px; font-weight:bold; color:#333; text-align:center; margin-top:100px;}
#wraper .subArea .select_ticket{ margin-top:60px;}
#wraper .subArea .select_ticket input{ display:none;}
#wraper .subArea .select_ticket input + label{ display:block; width:100%; padding:30px 50px 30px 114px; box-sizing:border-box; border-radius:10px; box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.1); margin-top:40px; font-size:0; background-image:url(../img/icon_radio_off.png); background-position:left 50px center; background-repeat:no-repeat; background-size:24px; cursor:pointer; margin-bottom:40px;}
#wraper .subArea .select_ticket input + label p{ display:inline-block; vertical-align:middle; font-size:18px; font-weight:bold; color:#333;}
#wraper .subArea .select_ticket input + label p:nth-child(1){ width:200px;}
#wraper .subArea .select_ticket input + label p:nth-child(2){ width:-webkit-calc(100% - 300px); width:-moz-calc(100% - 300px); width:calc(100% - 300px);}
#wraper .subArea .select_ticket input + label p:nth-child(3){ width:100px; font-weight:800; text-align:right;}
#wraper .subArea .select_ticket input:checked + label{ background-image:url(../img/icon_radio_on.png); box-shadow:none; border:1px solid #1c1fff}
#wraper .subArea .charge_notice{ margin-top:150px;}
#wraper .subArea .charge_notice .notice_title{ font-size:16px; font-weight:bold; color:#333; transform:skew(-0.04deg)}
#wraper .subArea .charge_notice ul{ margin-top:20px; margin-bottom:80px;}
#wraper .subArea .charge_notice ul:last-of-type{ margin-bottom:0}
#wraper .subArea .charge_notice ul li{ position:relative; font-size:14px; font-weight:bold; color:#666; letter-spacing:-0.05em; margin-top:12px; padding-left:15px; transform:skew(-0.04deg)}
#wraper .subArea .charge_notice ul li:before{ content:""; position:absolute; top:50%; left:2px; transform:translateY(-50%); width:4px; height:4px; border-radius:50%; background-color:#333;}

/* 채널 상세 */
#wraper .subArea .channel_detail{}
#wraper .subArea .channel_detail .titleArea{ overflow:hidden}
#wraper .subArea .channel_detail .titleArea:after{ content:""; display:block; clear:both}
#wraper .subArea .channel_detail .titleArea .imgBox{ float:left; width:50%; height:500px; background-position:center; background-repeat:no-repeat; background-size:cover;}
#wraper .subArea .channel_detail .titleArea .textBox{ float:left; width:50%; padding-left:40px; box-sizing:border-box;}
#wraper .subArea .channel_detail .titleArea .textBox .name{ font-size:40px; font-weight:800; color:#333;}
#wraper .subArea .channel_detail .titleArea .textBox .cate{ font-size:14px; font-weight:bold; color:#757271; margin-top:6px; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .titleArea .textBox .sponsor_btn{ display:block; width:140px; line-height:50px; font-size:16px; font-weight:bold; color:#333; text-align:center; border:1px solid #333; margin-top:20px; transition:0.3s; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .titleArea .textBox .sponsor_btn:hover{ color:#fff; background-color:#1c1fff;}
#wraper .subArea .channel_detail .titleArea .textBox .contents{ height:110px; font-size:16px; font-weight:bold; color:#333; letter-spacing:-0.03em; line-height:1.6; margin-top:30px; overflow:hidden; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .titleArea .textBox .noticeBox{}
#wraper .subArea .channel_detail .titleArea .textBox .noticeBox .notice_title{ position:relative; font-size:24px; font-weight:bold; color:#333; padding:20px 0; border-bottom:2px solid #333;}
#wraper .subArea .channel_detail .titleArea .textBox .noticeBox .notice_title .more{ position:absolute; top:50%; right:0; transform:translateY(-50%); font-size:14px; color:#333; padding-left:15px; background-image:url(../img/icon_plus.png); background-position:left top 1px; background-repeat:no-repeat; background-size:11px; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .titleArea .textBox .noticeBox .notice_list{ margin-top:7px;}
#wraper .subArea .channel_detail .titleArea .textBox .noticeBox .notice_list li{}
#wraper .subArea .channel_detail .titleArea .textBox .noticeBox .notice_list li a{ display:block; width:100%; font-size:16px; font-weight:bold; color:#333; padding:20px 0; border-bottom:1px solid #ddd; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .sponsor_view_btn{ display:block; width:100%; line-height:82px; font-size:24px; color:#fff; text-align:center; background-color:#1c1fff; margin-top:60px;}
#wraper .subArea .channel_detail .episode{ margin-top:130px;}
#wraper .subArea .channel_detail .episode .list_title{ position:relative; width:100%; padding:20px 0; border-bottom:2px solid #333; font-size:24px; font-weight:bold; color:#333;}
#wraper .subArea .channel_detail .episode .list_title .more{ position:absolute; right:0; top:50%; transform:translateY(-50%); padding-left:15px; font-size:14px; font-weight:bold; color:#333; background-image:url(../img/icon_plus.png); background-position:left top 1px; background-repeat:no-repeat; background-size:11px; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .episode .episode_list{ margin-bottom:150px}
#wraper .subArea .channel_detail .episode .episode_list li{ position:relative; width:100%; padding:40px 30px; box-sizing:border-box; border-top:1px solid #ddd;}
#wraper .subArea .channel_detail .episode .episode_list li .subject{ font-size:18px; font-weight:bold; color:#333; letter-spacing:-0.03em;
  width: 330px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#wraper .subArea .channel_detail .episode .episode_list li .subject .download{ margin-left:10px;}
#wraper .subArea .channel_detail .episode .episode_list li .subject .download img{ width:17px;}
#wraper .subArea .channel_detail .episode .episode_list li .name{ font-size:14px; font-weight:bold; color:#757271; margin-top:6px; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .episode .episode_list li .date{ font-size:14px; color:#333; margin-top:13px; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .episode .episode_list li .state{ position:absolute; top:20px; right:30px; transform:translateY(-50%); font-size:14px; font-weight:bold; color:#333; transform:skew(-0.04deg); line-height: 45px;}
#wraper .subArea .channel_detail .episode .episode_list li .state.complete{ font-weight:800; color:#1c1fff;}
#wraper .subArea .channel_detail .comment{}
#wraper .subArea .channel_detail .comment .comment_title{ position:relative; width:100%; padding:20px 0; font-size:24px; font-weight:bold; color:#333;}
#wraper .subArea .channel_detail .comment .comment_title .refresh{ margin-left:5px;}
#wraper .subArea .channel_detail .comment .comment_title .refresh img{ width:20px;}
#wraper .subArea .channel_detail .comment .commentBox{ margin-bottom:60px; overflow:hidden;}
#wraper .subArea .channel_detail .comment .commentBox:after{ content:""; display:block; clear:both;}
#wraper .subArea .channel_detail .comment .commentBox .inputArea{ float:left; width:-webkit-calc(100% - 150px); width:-moz-calc(100% - 150px); width:calc(100% - 150px); position:relative; padding:20px 30px; box-sizing:border-box; border:1px solid #dadada;}
#wraper .subArea .channel_detail .comment .commentBox .inputArea .name{ font-size:14px; font-weight:800; color:#333; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .comment .commentBox .inputArea input[type=file]{ display:none;}
#wraper .subArea .channel_detail .comment .commentBox .inputArea input[type=file] + label{ position:absolute; top:20px; right:30px; display:block; width:75px; border:1px solid #757271; text-align:center;}
#wraper .subArea .channel_detail .comment .commentBox .inputArea input[type=file] + label img{ display:inline-block; vertical-align:middle; width:15px; margin-right:6px;}
#wraper .subArea .channel_detail .comment .commentBox .inputArea input[type=file] + label span{ display:inline-block; vertical-align:middle; font-size:12px; font-weight:bold; color:#757271; line-height:26px; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .comment .commentBox .inputArea .textArea{ margin-top:30px;}
#wraper .subArea .channel_detail .comment .commentBox .inputArea .textArea textarea{ display:block; width:100%; height:64px; font-size:14px; font-weight:bold; color:#333; padding:10px 0; box-sizing:border-box; border:none; background-color:transparent; resize:none; outline:none; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .comment .commentBox .submit_btn{ position:relative; display:block; float:left; width:150px; height:150px; background-color:#1c1fff}
#wraper .subArea .channel_detail .comment .commentBox .submit_btn span{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) skew(-0.04deg); font-size:14px; font-weight:bold; color:#fff;}
#wraper .subArea .channel_detail .comment .comment_list{ border-top:2px solid #000;}
#wraper .subArea .channel_detail .comment .comment_list li{ position:relative; width:100%; padding:20px 30px; box-sizing:border-box; border-bottom:1px solid #ddd;}
#wraper .subArea .channel_detail .comment .comment_list li .name{ font-size:16px; font-weight:800; color:#333; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .comment .comment_list li .name .date{ font-size:14px; font-weight:bold; margin-left:20px; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .comment .comment_list li .contents{ font-size:14px; font-weight:bold; color:#333; margin-top:20px; line-height:1.7; transform:skew(-0.04deg);word-break: break-all;}
#wraper .subArea .channel_detail .comment .comment_list li .reply_btn{ display:inline-block; font-size:14px; font-weight:bold; color:#333; margin-top:30px; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .comment .comment_list li .btnBox{ position:absolute; top:20px; right:30px;}
#wraper .subArea .channel_detail .comment .comment_list li .btnBox a{ position:relative; display:inline-block; vertical-align:middle; font-size:14px; font-weight:bold; color:#333; margin-left:20px; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .comment .comment_list li .btnBox a:before{ content:""; position:absolute; top:50%; left:-12px; transform:translateY(-50%); width:1px; height:12px; background-color:#ddd;}
#wraper .subArea .channel_detail .comment .comment_list li .btnBox a:first-child:before{ display:none;}
#wraper .subArea .channel_detail .comment .comment_list li .goodbad{ position:absolute; bottom:20px; right:30px;}
#wraper .subArea .channel_detail .comment .comment_list li .goodbad input{ display:none;}
#wraper .subArea .channel_detail .comment .comment_list li .goodbad input + label{ display:inline-block; vertical-align:middle; margin-left:20px; padding:5px 0 5px 25px; font-size:14px; font-weight:bold; color:#757271; background-position:left center; background-repeat:no-repeat; background-size:20px; transform:skew(-0.04deg); cursor:pointer}
#wraper .subArea .channel_detail .comment .comment_list li .goodbad input.good + label{ background-image:url(../img/icon_good_off.png);}
#wraper .subArea .channel_detail .comment .comment_list li .goodbad input.bad + label{ background-image:url(../img/icon_bad_off.png);}
#wraper .subArea .channel_detail .comment .comment_list li .goodbad input.good:checked + label{ font-weight:800; color:#333; background-image:url(../img/icon_good_on.png);}
#wraper .subArea .channel_detail .comment .comment_list li .goodbad input.bad:checked + label{ font-weight:800; color:#333; background-image: url(../img/icon_bad_on.png);}
#wraper .subArea .channel_detail .comment .comment_list li.reply{ padding:20px 70px;}
#wraper .subArea .channel_detail .comment .comment_list li.reply:before{ content:""; position:absolute; top:20px; left:50px; width:10px; height:10px; background-image:url(../img/icon_reply.png); background-position:center; background-repeat:no-repeat; background-size:contain;}
#wraper .subArea .channel_detail .comment .comment_list li.reply .btnBox,
#wraper .subArea .channel_detail .comment .comment_list li.reply .goodbad{ right:50px;}
#wraper .subArea .channel_detail .comment .comment_list li.reply_comment{ padding:20px 50px;}
#wraper .subArea .channel_detail .comment .comment_list li.reply_comment .inputArea{overflow:hidden;}
#wraper .subArea .channel_detail .comment .comment_list li.reply_comment .inputArea:after{ content:""; display:block; clear:both}
#wraper .subArea .channel_detail .comment .comment_list li.reply_comment .inputArea .textArea{ float:left; width:-webkit-calc(100% - 125px); width:-moz-calc(100% - 125px); width:calc(100% - 125px); height:125px; box-sizing:border-box; border:1px solid #dadada;}
#wraper .subArea .channel_detail .comment .comment_list li.reply_comment .inputArea .textArea textarea{ display:block; width:100%; height:100%; font-size:14px; font-weight:bold; color:#333; padding:10px; box-sizing:border-box; border:none; background-color:transparent; resize:none; outline:none; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .comment .comment_list li.reply_comment .inputArea .submit_btn{ position:relative; display:block; float:left; width:125px; height:125px; background-color:#1c1fff}
#wraper .subArea .channel_detail .comment .comment_list li.reply_comment .inputArea .submit_btn span{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) skew(-0.04deg); font-size:14px; font-weight:bold; color:#fff;}
#wraper .subArea .channel_detail .comment .comment_list li.reply_comment .reply_btnBox{ margin-top:20px; text-align:center}
#wraper .subArea .channel_detail .comment .comment_list li.reply_comment .reply_btnBox a{}
#wraper .subArea .channel_detail .comment .comment_list li.reply_comment .reply_btnBox a span{ display:inline-block; vertical-align:middle; font-size:14px; font-weight:bold; color:#333; transform:skew(-0.04deg)}
#wraper .subArea .channel_detail .comment .comment_list li.reply_comment .reply_btnBox a img{ display:inline-block; vertical-align:middle; width:11px; margin-left:5px;}

.commentImg {
  max-width: 500px;
  height: auto;
}
.pagination {
  justify-content: center;
}