@charset "utf-8";

@import url("./slick.css");

.main #contents {width:auto; padding:0 0 80px 0;}
.main #contents .inner {position:relative; width:1200px; margin:0 auto 0; z-index:2;}

.main .title-box01 {font-size:0;}
.main .title-box01 > * {display:inline-block; margin-right:25px; vertical-align:middle;}
.main .btn-list-more {position:absolute; bottom:100%; right:0; display:inline-block; margin-bottom:30px; font-size:14px; line-height:1; color:#646464;}
.main .h2-title01 {font-size:30px; font-weight:500; line-height:40px; color:#6b6b6b;}

.main .slick-slide {outline:none;}
.main .slick-dots {position:absolute; top:20px; right:0; display:block; width:100%; padding:0 20px; height:8px; font-size:0; line-height:1; text-align:center;list-style:none;text-align:right; box-sizing:border-box;}
.main .slick-dots > li {list-style:none;display:inline-block; line-height:1; font-size:0;margin:0 6px}
.main .slick-dots > li  > button {display:inline-block; width:8px; height:8px; margin:0; font-size:0; line-height:8px; background:#fff; padding:0;margin:0; box-sizing:border-box; transition:all 0.35s ease;border:none;outline:none; opacity:0.3;}
.main .slick-dots > li.slick-active  > button {opacity:1;}

/* 상단 비주얼 */
.main-visual {position:relative; width:100%; height:525px; overflow:hidden; transition:background 0.5s ease;}
/* 20201218 수정 */
.main-visual .main-visual-item {position:relative; max-width:1920px; height:525px; margin:0 auto;}
/* //20201218 수정 */
.main-visual .main-visual-data {position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
.main-visual .main-visual-txt {position:relative; max-width:1040px; height:455px; margin:0 auto; z-index:1;}
.main-visual .main-visual-txt-item {position:relative; display:block; width:100%; height:455px; padding-top:118px; box-sizing:border-box; text-align:left;}
.main-visual-txt-item .program-title {font-size:56px; color:#000; line-height:67px; font-weight:500;letter-spacing:-4.2px;}
.main-visual-txt-item .program-title + * {margin-top:19px;}
.main-visual-txt-item .program-cate {font-size:20px; color:#000; line-height:31px; font-weight:400;}
/* 20201207 수정 : s */
.main-visual-txt-item .program-time {font-size:32px; color:#000; line-height:48px; font-weight:500; letter-spacing:-2.4px;}
/* //20201207 수정 : e */
.main-visual .slick-slide {outline:none;}
.main-visual .slick-dots {position:absolute; top:auto; right:auto; bottom:30px; left:50%; display:block; width:1040px; margin:0 0 0 -520px; padding:0; height:10px; font-size:0; line-height:1; text-align:center;list-style:none;text-align:left;}
.main-visual .slick-dots > li {list-style:none;display:inline-block; line-height:1; font-size:0;margin:0 8px}
.main-visual .slick-dots > li  > button {display:inline-block; width:10px; height:10px; margin:0; font-size:0; line-height:8px; background:#fff; padding:0;margin:0; box-sizing:border-box; transition:all 0.35s ease;border:none;outline:none;border-radius:50%; opacity:0.5;}
.main-visual .slick-dots > li.slick-active  > button {opacity:1;}
.main-visual-slider-ui {}
.main-visual-slider-ui .btn-main-slider-prev {position:absolute; top:50%; left:50%; margin:-34px 0 0 -600px; display:inline-block;width:29px; height:68px; font-size:0; background:url(../images/btn/btn_main_banner_prev.png) center center no-repeat; opacity:0.2; z-index:50; transition:opacity 0.45s ease;}
.main-visual-slider-ui .btn-main-slider-next {position:absolute; top:50%; right:50%; margin:-32px -600px 0 0; display:inline-block;width:27px; height:65px; font-size:0; background:url(../images/btn/btn_main_banner_next.png) center center no-repeat; opacity:0.2; z-index:50; transition:opacity 0.45s ease;}
.main-visual-slider-ui .btn-main-slider-prev:hover,
.main-visual-slider-ui .btn-main-slider-next:hover {opacity:0.5;}
.main-visual-slider-ui .btn-main-slider-prev.slick-disabled,
.main-visual-slider-ui .btn-main-slider-next.slick-disabled {opacity:0; visibility:hidden;}

/* ON AIR */
.main-on-air {padding:35px 0 58px 0;}
.main-on-air h3 {font-size:30px; color:#646464; font-weight:500; text-align:center; font-weight:700; line-height:27px;}
.main-on-air-list {max-width:1200px; margin:26px auto 0 auto;}
.main-on-air-list:after {content:''; display:block; clear:both;}
.main-on-air-cell {float:left; width:20%;}
.main-on-air-item {position:relative; text-align:left; display:block; padding:0 8px; width:100%; box-sizing:border-box;}
.main-on-air-item .item-cate {}
.main-on-air-item .item-cate img {max-height:27px;}
.main-on-air-item .item-subject {margin-top:9px; font-size:16px; line-height:22px; color:#323232; font-weight:500; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.main-on-air-item .item-time {margin-top:2px; font-size:13px; line-height:22px; color:#646464; font-weight:500;}
.main-on-air-item .item-progress {position:relative; height:4px; margin:6px -8px 0px -8px;}
.main-on-air-item .item-progress .bar {position:absolute; top:0; right:0; bottom:0; left:0; width:auto; height:auto; margin:auto auto auto 7px;}
.main-on-air-item .item-progress .bar .on {position:absolute; top:0; left:0; width:0; height:100%;}
.main-on-air-item .item-progress .bar:before {content:''; display:block; position:absolute; top:0; right:0; bottom:0; left:0; width:auto; height:2px; margin:1px 0px 1px -7px; background-color:#3b4751; z-index:0;}
.main-on-air-item .item-progress:before {content:''; position:absolute; top:-2px; left:0; display:block; width:8px; height:8px; border-radius:50%; background-color:#000; z-index:5;}
.main-on-air-item.every1 .item-progress .bar .on {background-color:#0056F5;}
.main-on-air-item.sports .item-progress .bar .on {background-color:#d21f28;}
.main-on-air-item.drama .item-progress .bar .on {background-color:#cc396f;}
.main-on-air-item.on .item-progress .bar .on {background-color:#26ab69;}
.main-on-air-item.music .item-progress .bar .on {background-color:#8b5be5;}
.main-on-air-item.every1 .item-progress:before {background-color:#0056F5;}
.main-on-air-item.sports .item-progress:before {background-color:#d21f28;}
.main-on-air-item.drama .item-progress:before {background-color:#cc396f;}
.main-on-air-item.on .item-progress:before {background-color:#26ab69;}
.main-on-air-item.music .item-progress:before {background-color:#8b5be5;}

/* HOT CLIP */
.main-hot-digital {padding:70px 0;}
.main-hot-digital .thumb-list01 li a .info .txt {color:#646464;}
.main-hot-digital .thumb-list01 li a .info .date {color:#8c8c8c;}
.main-hot-digital .thumb-list01 li a .info .name {color:#8c8c8c;}
.main-hot-digital .thumb-list01 li a .info {background-color:#fff;}
.main-hot-clip-data {position:relative; margin-top:30px; padding-right:300px;}
.main-hot-clip-list {position:relative;}
.main-hot-clip-list .thumb-list01 {margin:-24px 0 0 -24px;}
.main-hot-clip-list .thumb-list01 li {float:left; width:282px; box-sizing:border-box; margin:24px 0 0 24px;}
.main-hot-clip-list .thumb-list01 li a .info {min-height:111px;}
.main-hot-clip-list .btn-list-more { margin-bottom:6px;}
.main-hot-clip-banner {position:absolute; top:24px; right:0; width:282px; height:562px; overflow:hidden; box-sizing:border-box;}

.main-hot-clip .h2-title01 {margin-bottom:17px;}
.main-hot-clip .video-wide-list-cell + .video-wide-list-cell {margin-top:36px;}

/* DIGITAL CONTENTS*/
.main-digital-contents {margin-top:40px;}
.main-digital-contents-list {position:relative; margin-top:30px;}
.main-digital-contents-list .thumb-list01 {margin:0 0 0 -24px;}
.main-digital-contents-list .thumb-list01 li {float:left; width:282px; margin:0 0 0 24px;}
/*▼▼▼ 20201207 추가 ▼▼▼ */
.main-digital-contents-list .thumb-list01 li:nth-child(n+5){margin-top:24px;}
/*▲▲▲ 20201207 추가 끝 ▲▲▲*/

.main-video-contents .h2-title01 {margin-bottom:15px;}
.main-video-contents .video-category-contents {padding-bottom:0;}
.main-best {margin-top:68px;}
.main-recommended {margin-top:50px;}
.main-latest {margin-top:146px;}
.main-latest .video-wide-list-cell:after {content:''; display:block; clear:both;}
.main-latest .video-wide-list-cell {margin:0 -5px;}
.main-latest .video-wide-list-cell .video-wide-slick-slider-cell {margin-bottom:32px;}

/* 중간 배너 */
.main-middle-banner {margin-top:134px;}
.main-middle-banner-list {position:relative; width:100%; height:200px; overflow:hidden;}
.main-middle-banner-list .slick-dots {top:auto; bottom:20px;}

/* 엠플 뉴스 */
.main-news {padding:60px 0; background-color:#f5f6f6;}
.main-news-list {position:relative; margin-top:30px;}
.main-news-list.news-list {margin:30px -14px 0 -14px;}
.main-news-list.news-list ul {display:flex;}
.main-news-list.news-list li {padding:0 14px; box-sizing:border-box;}
.main-news-list.news-list li a {width:218px; margin:0; text-align:center; background-color:#fff;}
.main-news-list.news-list li a .img {height:126px; overflow:hidden; border:none;}
.main-news-list.news-list li a .info {border:none;}
.main-news-list.news-list li a .info .tit {display:block; height:42px; color:#646464; text-align: left; font-weight:400; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

/* 메인 프로그램 */
.main-program {margin-top:90px;}
.main-best-program { width:100%; box-sizing:border-box;}
.main-program-list {display:flex; margin:30px -14px 0 -14px;}
.main-program-cell {padding:0 14px; box-sizing:border-box;}
.btn-main-program-item {display:block; width:177px;}
.btn-main-program-item .item-img {font-size:0; border-radius:18px; overflow:hidden;}
.btn-main-program-item .item-img img {width:100%; transition:all 0.3s ease;}
.btn-main-program-item .item-subject {padding-left:18px; margin-top:18px;font-size:18px; color:#323232; line-height:20px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.btn-main-program-item .item-time {padding-left:18px; margin-top:14px;font-size:16px; color:#8c8c8c; line-height:16px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.btn-main-program-item:hover .item-img img {transform:scale(1.15);}



/* 실시간 sns */
.realtime-sns-box {margin-top:164px !important;}
.realtime-sns-box .title-box01 > * {margin-right:44px;}
.realtime-sns-box .btn-list-more {bottom:auto; top:33px;}
.realtime-sns-box .sns-list {margin-top:30px;}
.realtime-sns-box .sns-list + .sns-list {margin-top:26px;}
.realtime-sns-box .sns-list > ul {width:1228px; overflow:hidden;}
.realtime-sns-box .sns-list > ul > li {position: relative; float:left; transition:all 0.3s ease;}
.realtime-sns-box .sns-list > ul > li > a {position:relative; display:block; width:278px; margin:0 29px 0 0; background:#fff; transition:all 0.3s ease;}
.realtime-sns-box .sns-list > ul > li > a .img {font-size:0; border:1px solid #e6e6e6; border-radius:18px; overflow:hidden;}
.realtime-sns-box .sns-list > ul > li > a .img img {width:100%; transition:all 0.3s ease;}
.realtime-sns-box .sns-list > ul > li > a .ico-movie {position: absolute; bottom:20px; right:20px; border-radius:50%;}
.realtime-sns-box .sns-list > ul > li > a .info {position:relative; padding:15px 22px; border:1px solid #e6e6e6;}
.realtime-sns-box .sns-list > ul > li > a .info > * {display:block;}
.realtime-sns-box .sns-list > ul > li > a .info .tit {width:100%; max-height:48px; margin-bottom:15px; color:#323232; font-size:16px; font-weight:400; line-height:24px; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.realtime-sns-box .sns-list > ul > li > a .info .con {width:100%; max-height:109px; color:#8c8c8c; font-size:14px; line-height:22px; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;}
.realtime-sns-box .sns-list > ul > li > a .info .date {margin-top:15px; color:#a0a0a0; font-size:12px;}
.realtime-sns-box .sns-list > ul > li > a .info .date:before {content:''; display:inline-block; width:32px; height:32px; margin-right:10px; background:url('') no-repeat 0 -32px; overflow:hidden; vertical-align:middle;}
.realtime-sns-box .sns-list > ul > li > a .line span {display:block; position:absolute; transition:all 0.2s ease-out;}
.realtime-sns-box .sns-list > ul > li > a .line span.t {top:0; left:0; width:0; height:1px; transition-timing-function:ease-in;}
.realtime-sns-box .sns-list > ul > li > a .line span.r {top:0; right:0; width:1px; height:0; transition-delay:0.2s;}
.realtime-sns-box .sns-list > ul > li > a .line span.m {bottom:0; right:0; width:0; height:1px; transition-timing-function:ease-in;}
.realtime-sns-box .sns-list > ul > li > a .line span.l {bottom:0; left:0; width:1px; height:0; transition-delay:0.2s;}

.is-instagram a:hover .ico-movie:before {top:-1px; left:-1px; right:-1px; bottom:-1px;}
.is-instagram a .ico-movie:before {background:#c53827 !important;}
.is-instagram a:hover .ico-movie {border-color:#c53827 !important;}

.realtime-sns-box .sns-list > ul > li.is-facebook > a .info .date:before {background-image:url('../images/icon/ico_sns02_01.png');}
.realtime-sns-box .sns-list > ul > li.is-facebook > a .line span {background:#274383;}
.realtime-sns-box .sns-list > ul > li.is-twitter > a .info .date:before {background-image:url('../images/icon/ico_sns02_03.png');}
.realtime-sns-box .sns-list > ul > li.is-twitter > a .line span {background:#0092ca;}
.realtime-sns-box .sns-list > ul > li.is-blog > a .info .date:before {background-image:url('../images/icon/ico_sns02_02.png');}
.realtime-sns-box .sns-list > ul > li.is-blog > a .line span {background:#248d02;}
.realtime-sns-box .sns-list > ul > li.is-instagram > a .img {position:relative; width:276px; height:276px; object-fit:contain; overflow:hidden; background:#000;}
.realtime-sns-box .sns-list > ul > li.is-instagram > a .img img {width:276px; height:276px; object-fit:contain;}
.realtime-sns-box .sns-list > ul > li.is-instagram > a .img:before {z-index:1; content:''; visibility:hidden; opacity: 0; transition: opacity 0.3s 0s, visibility 0.3s 0s ease-in-out; position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.5); background-image:url(../images/icon/ico_link_write.png); background-position: center; background-repeat: no-repeat; background-size:40px;}
.realtime-sns-box .sns-list > ul > li.is-instagram > a:hover .img:before {visibility:visible; opacity: 1;}
.realtime-sns-box .sns-list > ul > li.long-size {height:496px;}
/* .realtime-sns-box .sns-list > ul > li.is-instagram.long-size > a .img {height:496px;}
.realtime-sns-box .sns-list > ul > li.is-instagram.long-size >  .img img {height:496px;} */
.realtime-sns-box .sns-list > ul > li.is-instagram > a .info .date:before {background-image:url('../images/icon/ico_sns02_02.png');}
.realtime-sns-box .sns-list > ul > li.is-instagram >  .line span {background: linear-gradient( to right, rgb(255, 174, 0), red, purple);}

.realtime-sns-box .sns-list > ul > li a:hover .img img {transform:scale(1.15);}
.realtime-sns-box .sns-list > ul > li a:hover .line span.t {width:100%;}
.realtime-sns-box .sns-list > ul > li a:hover .line span.r {height:100%;}
.realtime-sns-box .sns-list > ul > li a:hover .line span.m {width:100%;}
.realtime-sns-box .sns-list > ul > li a:hover .line span.l {height:100%;}

.realtime-sns-box .sns-list ul li.is-instagram .line {display:none;}


/* YOUTUBE */
.main-youtube-sns {margin:130px 0 -80px 0; padding:60px 0 40px 0; background-color: #f5f6f6;}
.main-youtube-sns .main-youtube-sns-slider {margin:30px -17px 0 -17px;}
.main-youtube-sns .main-youtube-sns-slider .slick-track {margin:0;}
.main-youtube-sns .youtube-sns-cell {width:120px; margin-bottom:40px; padding:0 17px; }
.main-youtube-sns .youtube-sns-cell a {display: block; text-align:center;}
.main-youtube-sns .youtube-sns-cell a .img {position:relative; display:flex; align-items:center; justify-content:center; width:120px; height:120px; margin-bottom:19px; overflow:hidden; border-radius:50%; background-color:#fff;}
.main-youtube-sns .youtube-sns-cell a .img img {width:100%;}
.main-youtube-sns .youtube-sns-cell a .tit {width:120px; color:#6b6b6b; font-size:18px; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.main-youtube-sns .youtube-sns-cell a .img:before {content:''; visibility:hidden; opacity: 0; transition: opacity 0.3s 0s, visibility 0.3s 0s ease-in-out; position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.5); background-image:url(../images/icon/ico_link_write.png); background-position: center; background-repeat: no-repeat; background-size:40px;}
.main-youtube-sns .youtube-sns-cell a:hover .img:before {visibility:visible; opacity: 1;}
.main-youtube-sns .slick-prev {position:absolute; top:30%; left:47%; margin:-32px 0 0 -600px; display:inline-block;width:27px; height:65px; font-size:0; background:url(../images/btn/btn_main_banner_prev.png) center center no-repeat; background-size: 22px 48px; opacity:0.3; z-index:50; transition:opacity 0.45s ease;}
.main-youtube-sns .slick-next {position:absolute; top:30%; right:47%; margin:-32px -600px 0 0; display:inline-block;width:27px; height:65px; font-size:0; background:url(../images/btn/btn_main_banner_next.png) center center no-repeat; background-size: 22px 48px; opacity:0.3; z-index:50; transition:opacity 0.45s ease;}
.main-youtube-sns .slick-prev:hover,
.main-youtube-sns .slick-next:hover {opacity:0.8;}
.main-youtube-sns .slick-prev.slick-disabled,
.main-youtube-sns .slick-next.slick-disabled {opacity:0; visibility:hidden;}

.realtime-sns-box .sns-list > ul > li .program-banner {position:relative; width:278px; border-radius:18px; height:491px; overflow:hidden;}
.realtime-sns-box .sns-list > ul > li .program-banner > ul {width:9999px; overflow:hidden;}
.realtime-sns-box .sns-list > ul > li .program-banner > ul > li {float:left;}
.realtime-sns-box .sns-list > ul > li .program-banner > ul > li > a {display:block;}
.realtime-sns-box .sns-list > ul > li .program-banner > ul > li > a > img {width:100%;}
.realtime-sns-box .sns-list > ul > li .program-banner .swiper-pagination {right:55px;}
.realtime-sns-box .sns-list > ul > li .program-banner .auto {position:absolute; top:12px; right:-10px;}
.realtime-sns-box .sns-list > ul > li .program-banner .auto a {display:block; width:24px; height:24px; text-indent:-9999px; background-color:transparent; font-size:0; background-repeat:no-repeat; background-position:0 0; overflow:hidden;}
.realtime-sns-box .sns-list > ul > li .program-banner .auto .btn-play {display:none; background-image:url('../images/icon/ico_play.png');}
.realtime-sns-box .sns-list > ul > li .program-banner .auto .btn-pause {display:block; background-image:url('../images/icon/ico_pause.png');}
.realtime-sns-box .sns-list > ul > li .program-banner .auto.stop .btn-play {display:block;}
.realtime-sns-box .sns-list > ul > li .program-banner .auto.stop .btn-pause {display:none;}