@charset "euc-kr";

@import url(http://font.imbc.com/nanumgothic/nanumgothic.css);

/* common style */
a {color: inherit;}
button {border: 0 none; background: none; cursor: pointer;}
body {text-align: center;}
.wrapper {min-width: 1024px; font-family: "Nanum Gothic", "맑은 고딕", dotum, sans-serif; letter-spacing: -0.05em;}
.btn-like-program-wrap {display: inline-block; position: absolute; top: 12px; right: 50%; z-index: 100; margin-right: -505px;}
.ellipsis {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical; word-wrap: break-word;}

/*main - 포스터 ver */
.visual-top {position: relative; overflow: hidden; margin: 10px auto 0; width: 1024px; height: 580px; background: url('http://img.imbc.com/broad/tv/ent/reallovestory/images/main_top.jpg') no-repeat 50% top;}
.visual-top .program-data {position: absolute; bottom: 30px; top: auto; left: 30px; overflow: hidden;}
.visual-top .program-data .tit-logo {float: left; margin-right: 23px;}
.visual-top .program-data .broad-info {float: left; font-size: 0; text-align: left; color: #FFF;}
.visual-top .program-data .broad-info h2 {margin-top: 12px; font-size: 20px; font-weight: bold; margin-bottom: 10px;}
.visual-top .program-data .broad-info img {margin: 1px 5px 0;}
.btn-like-program-wrap {display: inline-block; position: absolute; top: 30px; right: 50%; z-index: 100; margin-right: -495px;}

/*preview visual-txt-box */
.roll-ban-event {width: 1024px; height: 580px; position: relative; margin-bottom: 21px; background-color: #000;}
.roll-ban-event li {position: absolute; top: 0; left: 0; width: 1024px; height: 580px; opacity: 0; -ms-filter: "alpha(opacity=0)"; font-size: 0; text-indent: -9999em;}
.roll-ban-event li img {width: 100%; height: 100%;}
.roll-ban-event li:first-child {opacity: 1; -ms-filter: "alpha(opacity=100)";}
.roll-controll-btn .btn:last-child {margin-right: 0;}
.roll-controll-btn .btn {vertical-align: middle; background-color: #dcdcdc; border-radius: 50%; border: 2px solid #dcdcdc; box-sizing: border-box; display: inline-block; width: 12px; height: 12px; margin-right: 18px; border: 0; cursor: pointer;}
.roll-controll-btn .btn.on {border: 2px solid #000; background-color: #fff;}
.btn-front {position: absolute; right: 0; width: 22px; height: 22px; text-indent: 100%; white-space: nowrap; cursor: pointer; background-image: url('http://img.imbc.com/broad/tv/drama/fantasy2017/images/btn-play-stop.png'); background-repeat: no-repeat; background-color: transparent; background-position: 0 0; background-color: #ddd; z-index: 1000;}
.btn-stop {background-position: 0 -22px;}

/*nav*/
.nav {margin: 0 auto 30px; font-size: 15px; line-height: 45px; letter-spacing: -.5px;}
.nav ul {position: relative; height: 45px; text-align: center; margin-top: 12px; border-bottom: 1px solid #ccc;}
.nav li {font-size: 15px; display: inline-block; position: relative; text-align: center; vertical-align: top;}
.nav li .item {display: inline-block; *display: inline; position: relative; height: 45px; vertical-align: top; color: #000; margin: 0 12px; box-sizing: border-box; letter-spacing: -1px;}
.nav li .item:hover {color: #e3246e; font-weight: bold; border-bottom: 3px solid #e3246e;}
.nav li .item.active {color: #e3246e; font-weight: bold; border-bottom: 3px solid #e3246e;}
.nav li .dropdown {width: 350px; z-index: 50; position: absolute; top: 42px; padding: 5px 0;}
.nav li.concept .dropdown {left: -83px;}
.nav li.vod .dropdown {left: -23px;}
.nav li .program_dropdown {width: 700px; left: -440px;}
.nav li .event_dropdown {width: 400px; left: -180px;}
.nav li .dropdown a {display: inline-block; *display: inline; text-align: center; color: #000; font-family: 'Nanum Gothic', "나눔고딕"; font-size: 15px; line-height: 30px; margin-right: 14px;}
.nav li .dropdown a:hover {font-weight: bold; color: #b41214; text-decoration: underline; border: 0; font-weight: normal;}
.nav .hidden {display: none;}
.content .section {width: 1024px; margin: 0 auto 50px; overflow: hidden;}

/*section1*/
.section1 {overflow: hidden; position: relative;}
.section1 .whatsnew {position: relative; float: left; width: 198px; height: 215px; padding: 27px 20px; border: 1px solid #fad379; background: #fde3a7; text-align: left;}
.section1 .wrap-article {float: right; text-align: left; position: relative; width: 784px; background-color: #fff;}
.section1 .article-multi li:first-child p.title {border-top: 1px solid #ccc;}
.section1 .article-multi li:last-child p.title {border-bottom: 1px solid #ccc;}
.section1 .article-multi .img {display: none; position: absolute; right: 312px; top: -1px; width: 472px; height: 272px; overflow: hidden;}
.section1 .article-multi .img img {width: 482px;}
.section1 .article-multi .txt {display: none; position: absolute; right: 805px; top: 60px; width: 198px; height: 190px; overflow: hidden; font-size: 20px; font-weight: bold; line-height: 28px;}
.section1 .article-multi .txt > p {color: #000;}
.section1 .article-multi .txt > span {color: #2e2d31; position: absolute; bottom: 0; display: block; font-size: 12px; font-weight: normal;}
.section1 .article-multi .txt > span > span {font-weight: bold; color: #000;}
.section1 .article-multi .title {position: relative; width: 258px; padding: 16.5px 20px; margin-left: 484px; color: #424242; font-size: 12px; letter-spacing: -.5px; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}
.section1 .article-multi .over .img {display: block;}
.section1 .article-multi .over .txt {display: block;}
.section1 .article-multi .over .bg-arr {display: block;}
.section1 .article-multi .over .title {background: #fff; color: #f6921e; text-decoration: underline; border: 1px solid #f6921e; border-left: 0;}
.section1 .article-multi .bg-arr {display: none; position: absolute; z-index: 10; top: 0; left: -8px; width: 9px; height: 45px; background: url(http://img.imbc.com/broad/tv/ent/talknomad/images/arr_bar_v2.jpg);}

/*customed*/
.section1 .article-multi li.over:first-child .title {border-top: 1px solid #f6921e;}
.section1 .article-multi li.over:last-child .title {border-bottom: 1px solid #f6921e;}

/*section2 - 화제의 1분 */
.section2 {float: left; width: 714px; text-align: left;}
.section2 h2 {width: 228px; color: #000000; font-size: 13px; font-weight: bold; line-height: 33px;}
.section2 h2 span {color: #959595; font-weight: normal;}
.section2 .clip-wrap {position: relative; float: left; overflow: hidden; height: 250px;}
.section2 .clip {width: 714px; height: 482px; overflow: hidden; margin-bottom: 25px;}
.section2 .clip ul {overflow: hidden; float: left;}
.section2 .clip ul li {position: relative; float: left; margin: 0 12px 50px 0; width: 228px; height: 214px; border: 1px solid #dcdcdc;}
.section2 .clip ul li:nth-child(3n) {margin-right: 0;}
.section2 .clip a {line-height: 20px; font-weight: bold; font-size: 14px; letter-spacing: -.5px; color: #424242; font-weight: bold;}
.section2 .clip .img {position: relative; display: block; width: 100%; height: 128px; margin-bottom: 7px; overflow: hidden;}
.section2 .clip .img img {width: 228px;}
.section2 .clip .txt {padding: 3px 15px; display: block; font-size: 14px; text-align: left; color: #424242; font-weight: normal;}
.section2 .clip img.ico-m-play {width: 30px; height: 30px; position: absolute; bottom: 10px; right: 10px; width: auto; height: auto; z-index: 10;}
.date {position: absolute; color: #959595; font-size: 11px; bottom: 7px; left: 15px; line-height: 20px;}
.section .replay-wrap {overflow: hidden;}
.section .box-wrap {float: left;}
.section .box-wrap:first-child {margin-right: 12px;}
.section .photo_box {overflow: hidden;}
.section .photo_box .rect:first-child {margin-right: 12px;}
.rect-wrap {position: relative; overflow: hidden;}
.rect {float: left; position: relative; width: 228px; height: 170px; border: 1px solid #dcdcdc;}
.rect a {line-height: 20px; font-weight: bold; font-size: 14px; letter-spacing: -.5px; color: #424242; font-weight: bold;}
.rect .img {position: relative; display: block; width: 100%; height: 128px; margin-bottom: 7px; overflow: hidden;}
.rect .img img {width: 228px;}
.rect .txt {padding: 3px 15px; display: block; font-size: 14px; text-align: left; color: #03073f; font-weight: normal;}
.rect img.ico-m-play {width: 30px; height: 30px; position: absolute; bottom: 10px; right: 10px; width: auto; height: auto; z-index: 10;}

/*section paging*/
.section .num {float: left; color: #818181; font-size: 11px; letter-spacing: 5px; line-height: 28px; margin-right: 5px;}
.section .paging {position: absolute; top: 0px; right: 0px;}
.section .paging a {display: block; float: left;}
.section .paging a img {width: 28px; height: 28px;}
.section3 h2 {width: 228px; color: #000000; font-size: 13px; font-weight: bold; line-height: 33px; text-align: left;}
.section3 h2 span {color: #959595;}
.section3 {float: right; width: 250px;}
.section .box-wrap {overflow: hidden; margin-top: 14px; position: relative;}
.section .box-wrap .rect {width: 248px;}
.section .box-wrap .rect li {width: 248px; height: 216px;}
.section .box-wrap .rect .img img {width: 100%;}
.section .box-wrap .rect img.ico-m-play {width: 30px;}
.section .banner {margin-top: 10px; position: relative;}
.section .banner a {display: block; margin-bottom: 10px;}
.section .banner .txt {width: 250px; position: absolute; top: 0; left: 0; line-height: 135px; text-align: center; font-size: 16px; font-weight: bold; color: #000; display: none;}

/* 메인 예고 영상 */

.section-preview {margin-bottom: 30px; overflow: hidden;}
.section-preview h2 {text-align: left; color: #5f21d1; font-size: 13px; font-weight: bold; margin-bottom: 12px;}
.section-preview h2 span {color: #959595;}
.section-preview .ad-wrap {float: right;}
.teaser {float: left; margin-bottom: 32px;}
.banner-teaser {margin-top: 9px;}

/*------------------------------------------------------------------- 서브페이지 ------------*/

/*서브페이지 공통*/
.sub .visual-top {position: relative; overflow: hidden; margin: 0 auto; width: 1028px; height: 153px; background: url('http://img.imbc.com/broad/tv/ent/reallovestory/images/bg_main.jpg') no-repeat 50% bottom;}
.sub .visual-top .program-data {left: 40px;}
.sub .visual-top .program-data .broad-info h2 {}
.sub .btn-like-program-wrap {top: 50px;}
.sub .content h2.tit-content {color: #000; padding-left: 50px; background: #f6f6f6 url('http://img.imbc.com/broad/tv/ent/reallovestory/images/sub-title.png') 28px no-repeat; margin-bottom: 15px; line-height: 44px; font-size: 15px; font-weight: bold; border: 1px solid #f1f1f1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.sub .content h2.tit-content span {color: #777; font-size: 12px; font-weight: normal; vertical-align: bottom;}
.sub .content h2.tit-content span.sub-text {color: #5b3bbb;}
.sub .content {width: 1024px; *width: 1024px; margin: 0 auto; padding-bottom: 50px; background: #fff; text-align: left; overflow: hidden;}
.sub .content .section-left {position: relative; margin-right: 48px; width: 725px; float: left;}
.sub .content .section-left .imbbs {text-align: center; padding-top: 10px; margin-top: 10px; border: 1px solid #dbdbdb;}
.sub .content .section-right {float: left;}
.sub .border_box {text-align: center;}

/* staff*/
.sub .staff {position: absolute; top: 666px; left: 158px; line-height: 30px; letter-spacing: -.055em; font-size: 14px; color: #000000;}
.sub .staff span {display: inline-block; width: 70px; color: #eb7222; font-weight: bold;}

/*member*/
.sub .concept {width: 725px;}

/* footer */
#footer {padding: 55px 0; color: #424242; background-color: #ececec;}

/*vod 및 preview 상세페이지 */
.preview_wrapper p {text-align: center !important; font-size: 12px;}
.preview_wrapper em {text-align: center !important; font-size: 14px;}
.preview_wrapper .vod_btn {margin-left: 10% !important;}

/*main flt banner*/
.flt-banner {position: absolute; right: 0; bottom: 0; z-index: 10;}
.flt-banner .banner-img {position: relative;}
.flt-banner ul {padding: 72px 0 0 95px;}
.flt-banner li {text-align: left; font-size: 14px; line-height: 32px; letter-spacing: -.075em;}
.flt-banner li span {color: #eb008b;}
.flt-banner .btn-close {display: inline-block; width: 30px; height: 30px; position: absolute; top: 0; right: 0; z-index: 10; cursor: pointer; text-indent: -9999px;}
.cast_wrap {width: 725px; height: 1207px; margin: 0 auto; background: url('http://img.imbc.com/broad/tv/ent/jam/images/cast_bg_01.jpg') 0 0 no-repeat;}
.cast_wrap .cast_bx {width: 510px; margin: 0 auto;}
.cast_wrap .cast_bx .cst_img {width: 350px; margin: 0 auto; position: relative;}
.cast_wrap .cast_bx .cst_img img {display: inline-block; margin: 0 auto;}
.cast_wrap .cast_bx .cst_img .cst_ttl {width: 130px; height: 80px; position: absolute; bottom: -35px; left: 50%; margin-left: -65px;}
.cast_wrap .cast_bx .cst_txt {font-size: 18px; color: #cdbb82; line-height: 26px; margin-top: 60px;}
.cast_wrap .cast_bx .cst_txt span {color: #FFF;}

/* box-type */
.section .box-wrap {width: 714px; position: relative; overflow: hidden;}
.section .box-type {width: 100%; height: 216px; overflow: hidden; margin: 25px 0;}
.section .box-type ul {overflow: hidden; float: left;}
.section .box-type ul li {position: relative; float: left; margin: 0 12px 50px 0; width: 228px; height: 214px; border: 1px solid #dcdcdc;}
.section .box-type a {line-height: 20px; font-weight: bold; font-size: 14px; letter-spacing: -.5px; color: #424242; font-weight: bold;}
.section .box-type .img {position: relative; display: block; width: 100%; height: 125px; margin-bottom: 7px; overflow: hidden;}
.section .box-type .img img {width: 100%;}
.section .box-type .txt {padding: 3px 15px; display: block; font-size: 14px; text-align: left; color: #424242; font-weight: normal;}
.section .box-type img.ico-m-play {width: 30px; height: 30px; position: absolute; bottom: 10px; right: 10px; width: auto; height: auto; z-index: 10;}
.section .date {position: absolute; color: #959595; font-size: 11px; bottom: 7px; left: 15px; line-height: 20px;}
.section .replay-wrap {width: 250px; display: none;}
.section .news-wrap, .section .news-wrap .rect {width: 250px;}
.section .news-wrap .rect {height: 216px;}
.section .svod-wrap {}

.section .rect {box-sizing: border-box; position: relative; width: 228px; height: 214px; border: 1px solid #dcdcdc;}
.section .rect a {line-height: 20px; font-weight: bold; font-size: 14px; letter-spacing: -.5px; color: #424242; font-weight: bold;}
.section .rect .img {position: relative; display: block; width: 100%; height: 125px; margin-bottom: 7px; overflow: hidden;}
.section .rect .img img {width: 100%;}
.section .rect .txt {padding: 3px 15px; display: block; font-size: 14px; text-align: left; color: #424242; font-weight: normal;}
.section .rect img.ico-m-play {width: 30px; height: 30px; position: absolute; bottom: 10px; right: 10px; width: auto; height: auto; z-index: 10;}
.section .date {position: absolute; color: #959595; font-size: 11px; bottom: 7px; left: 15px; line-height: 20px;}
.section .num {color: #818181; font-size: 11px; letter-spacing: 5px; line-height: 28px;}
.section .num strong {color: #314e92;}
.section .paging {position: absolute; top: 0px; right: 0;}
.nav {width: 1024px;}
.visual-top .program-data .broad-info p {font-size: 12px; font-weight: normal; letter-spacing: -0.075em; color: #FFF; line-height: 18px;}
.visual-top .program-data .broad-info p > .ttl_line {color: #e3246e;}
.section .news-wrap {float: right !important;}

/* 프로그램 소개 */
.concept {position: relative;}
.concept .staff {width: 445px; height: 260px; position: absolute; top: 1060px; left: 50%; margin-left: -222px;}
.concept .staff-wrap {width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center;}
.concept .staff-wrap strong.staff-tit {display: block; margin-bottom: 20px; width: 95px; margin-left: 40px;}
.concept .staff-wrap ul {text-align: left; width: 445px; margin: 0 auto;}
.concept .staff-wrap ul li {}
.concept .staff-wrap ul li:first-child {margin-top: 0;}
.concept .staff-wrap ul li strong, .concept .staff-wrap ul li span {font-size: 14px; color: #1c1b19; font-family: 'notokr-regular'; display: inline-block; vertical-align: top;}
.concept .staff-wrap ul li strong {width: 101px; height: 26px; font-weight: normal; font-family: 'notokr-bold'; padding-left: 39px; box-sizing: border-box; line-height: 26px; margin-right: 10px;}
.concept .staff-wrap ul li span {line-height: 26px; width: 73%; word-break: keep-all; font-weight: normal;}

.sub .visual-top .program-data .broad-info {color: #3b3b3b;}
.sub .visual-top .program-data .broad-info p {color: #3b3b3b;}