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

/* common style */
a {color: inherit;}
button {border: 0 none; background: none; cursor: pointer;}
body {text-align: center;}
.wrapper {min-width: 1024px; font-family: "¸¼Àº °íµñ", "Malgun 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;*/ height: 138px; background: url(http://img.imbc.com/broad/tv/ent/weekendmovie/images/sub-top.jpg) no-repeat 50% bottom;}
.visual-top .program-data {position: absolute; bottom: 33px; left: 34px; overflow: hidden;}
.visual-top .program-data .tit-logo {float: left; margin-right: 14px;}
.visual-top .program-data .broad-info {float: left; padding-top: 10px; text-align: left; color: #fff;}
.visual-top .program-data .broad-info h2 {margin: 4px 0 10px;}
.visual-top .program-data .broad-info h2 strong {color: #fff; font-size: 20px; font-weight: bold;}
.visual-top .program-data .broad-info .staff-info span {font-size: 12px; font-weight: normal; letter-spacing: -0.075em; color: #fff; margin-right: 12px;}
.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;}

/*main - ¼­ºê ver*/
/*.visual-top {position: relative; overflow: hidden; margin: 0 auto; width: 1024px; height: 148px; background: url(http://img.imbc.com/broad/tv/ent/realman300/images/main-top.jpg) no-repeat 50% bottom;}
.visual-top .program-data {position: absolute; bottom: 33px; left: 34px; overflow: hidden;}
.visual-top .program-data .tit-logo {float: left; margin-right: 14px;}
.visual-top .program-data .broad-info {float: left; padding-top: 12px; font-size: 0; text-align: left; color: #fff;}
.visual-top .program-data .broad-info h2 {margin: 4px 0 10px;}
.visual-top .program-data .broad-info h2 strong {color: #fff; font-size: 20px; font-weight: bold;}
.visual-top .program-data .broad-info .staff-info span {font-size: 12px; font-weight: normal; letter-spacing: -0.075em; color: #fff; margin-right: 12px;}
.visual-top .program-data .broad-info img {vertical-align: middle; margin: 0 5px;}
.btn-like-program-wrap {display: inline-block; position: absolute; top: 41px; right: 50%; z-index: 100; margin-right: -495px;}*/

/*nav*/
.nav {margin: 0 auto 45px; position: relative; font-size: 15px; line-height: 45px; letter-spacing: -.5px;}
.nav ul {position: relative; height: 45px; text-align: center; margin-top: 15px; border-bottom: 1px solid #ccc;}
.nav li {font-size: 15px; display: inline-block; *display: inline; position: relative; text-align: center; vertical-align: top; /*margin:0 18px;*/ margin: 0 13px;}
.nav li .item {display: inline-block; *display: inline; position: relative; height: 45px; vertical-align: top; color: #000; box-sizing: border-box; letter-spacing: -1px;}
.nav li .item:hover {color: #d90033; font-weight: bold; border-bottom: 3px solid #d90033;}
.nav li .item.active {color: #d90033; font-weight: bold; border-bottom: 3px solid #d90033;}
.nav li .dropdown {display: none; z-index: 50; position: absolute; top: 45px; text-align: center; padding: 2px 0; height: 40px; line-height: 40px;}
.nav li .dropdown a {display: inline-block; *display: inline; color: #000; font-family: 'Nanum Gothic'; font-size: 15px; line-height: 30px; margin-left: 22px;}
.nav li .dropdown a:hover {color: #d90033; text-decoration: underline; border: 0; font-family: 'Nanum Gothic Bold';}
.nav li .dropdown a:first-child {margin-left: 0;}

/*floating banner*/
.flt-banner {position: absolute; right: 0; bottom: 0;}
.flt-banner .banner-img {position: relative;}
.flt-banner .btn-close {display: inline-block; width: 32px; height: 32px; position: absolute; top: 0; right: 0; z-index: 10; cursor: pointer; text-indent: -9999px;}

/******************************************************************* ÄÁÅÙÃ÷ °øÅë */
.section {position: relative; width: 1024px; margin: 0 auto; overflow: hidden;}
section h2 {text-align: left; width: 228px; color: #d90033; font-size: 12px; font-weight: bold; line-height: 28px; margin-bottom: 5px;}
section h2 span {color: #959595; font-weight: normal;}

/* box-type */
section .box-wrap {width: 714px; position: relative; overflow: hidden;}
section .box-type {width: 100%; height: 216px; overflow: hidden; margin-bottom: 25px;}
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 ul li:nth-child(3) {margin-right: 0;}
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;}
section .replay-wrap .rect,
section .news-wrap .rect {width: 250px; height: 216px;}
section .svod-wrap {/*display: none;*/}
section .news-wrap {width: 250px;}
section .news-wrap ul {width: 100%; height: 100%; border: 1px solid #dcdcdc; box-sizing: border-box;}
section .news-wrap ul li {width: 100%; border: none;}
section .youtube-wrap {width: 250px; height: 250px; display: none;}
section .youtube-wrap a {display: block;}
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: #1f356f;}
section .paging {position: absolute; top: 0px; right: 0;}

/* section-preview */
.section-preview {overflow: hidden; margin-bottom: 30px;}
.section-preview h2 {text-align: left; font-weight: bold;}
.section-preview h2 span {color: #959595;}
.section-preview .teaser {float: left;}
.section-preview .teaser h2 {margin-bottom: 24px;}
.section-preview .banner-teaser {margin-top: 9px;}
.section-preview .none-preview {width: 714px; height: 400px; position: relative; overflow: hidden; border: 1px solid #ddd; box-sizing: border-box;}
.section-preview .none-preview a {}
.section-preview .none-preview img {min-height: 100%; position: absolute; left: -50%; right: -50%; bottom: 50%; top: 50%; margin: auto;}
.section-preview .before-preview {font-size: 25px; line-height: 450px; background-color: #000; color: #fff;}
.section-preview .ad-wrap {width: 250px; float: right;}
.section-preview .ad-wrap .ad-rectangle {margin-bottom: 20px;}

/*section1*/
.section1 {margin-top: 45px; margin-bottom: 45px; overflow: hidden; position: relative; display: none;}
.section1 .whatsnew {position: relative; float: left; width: 198px; height: 215px; padding: 27px 20px; border: 1px solid #0d0d11; background: #1d1e26; 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: #fff;}
.section1 .article-multi .txt > span {color: #fff; position: absolute; bottom: 0; display: block; font-size: 12px; font-weight: normal;}
.section1 .article-multi .txt > span > span {font-weight: normal;}
.section1 .article-multi .title {position: relative; width: 258px; padding: 16.5px 20px; margin-left: 484px; color: #222; 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: #1d1e26; color: #fff; font-weight: bold; text-decoration: underline;}
.section1 .article-multi .bg-arr {display: none; position: absolute; z-index: 10; top: 0; left: -8px; width: 8px; height: 45px; background: url(http://img.imbc.com/broad/tv/ent/realman300/images/bg-arr.png);}

/*section2*/
.section2 {margin: 0 auto 60px;}
.section2 .svod_box {margin-bottom: 0;}

/*section3 */
.section3 {float: right; width: 250px; position: absolute; top: 0; right: 0;}
.section3 .ad-rectangle {margin-bottom: 25px; display: none;}

/*------------------------------------------------------------------- ¼­ºêÆäÀÌÁö ------------*/

/*¼­ºêÆäÀÌÁö °øÅë*/
.sub .visual-top {position: relative; overflow: hidden; margin: 0 auto; width: 1024px; height: 148px; background: url(http://img.imbc.com/broad/tv/ent/weekendmovie/images/sub-top.jpg) no-repeat 50% bottom;}
.sub .visual-top .program-data {position: absolute; bottom: 33px; left: 34px; overflow: hidden;}
.sub .visual-top .program-data .tit-logo {float: left; margin-right: 14px;}
.sub .visual-top .program-data .broad-info {float: left; padding-top: 12px; text-align: left; color: #fff;}
.sub .visual-top .program-data .broad-info h2 {margin: 4px 0 10px;}
.sub .visual-top .program-data .broad-info h2 a {color: #fff; font-size: 20px; font-weight: bold;}
.sub .visual-top .program-data .broad-info .staff-info span {font-size: 12px; font-weight: normal; letter-spacing: -0.075em; color: #fff; margin-right: 12px;}
.sub .btn-like-program-wrap {top: 41px;}
.sub .content h2.tit-content {color: #000; padding-left: 50px; background: #f7f7f7 url(http://img.imbc.com/broad/tv/ent/hangoutwithyoo/images/sub-title.png) 28px no-repeat; border: 1px solid #f1f1f1; margin-bottom: 15px; line-height: 44px; font-size: 15px; font-weight: bold; box-sizing: border-box; width: 100%;}
.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;}

/* ÇÁ·Î±×·¥ ¼Ò°³ */
.concept {position: relative;}
.concept .staff {width: 100%; height: 389px; position: absolute; bottom: 0; left: 0; display: table;}
.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: 24px;}
.concept .staff-wrap ul {text-align: left; width: 445px; margin: 0 auto;}
.concept .staff-wrap ul li {margin-top: 20px; font-size: 0;}
.concept .staff-wrap ul li:first-child {margin-top: 0;}
.concept .staff-wrap ul li strong,
.concept .staff-wrap ul li span {font-size: 16px; color: #2c324e; 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'; background: url(http://img.imbc.com/broad/tv/ent/WhatIsStudy/images/concept-staff-bg.png) no-repeat 0 50%; 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;}

/*Ã⿬ÀÚ ¼Ò°³ */
.cast-area {background: url(http://img.imbc.com/broad/tv/ent/weekendmovie/images/cast.jpg) repeat-y 50% 0; font-family: 'notokr-regular'; box-sizing: border-box; width: 725px; height: 1624px;}
.cast-area ul li {overflow: hidden; margin-top: 39px;}
.cast-area ul li:first-child {margin-top: 0;}
.cast-area ul li .img,
.cast-area ul li .txt {float: left;}
.cast-area ul li .img {margin: 21px 5px 0 0; width: 228px; height: 215px; position: relative; box-sizing: border-box; padding: 10px 0 0 18px; overflow: hidden;}
.cast-area ul li .img:after {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; background: url(http://img.imbc.com/broad/tv/ent/WhatIsStudy/images/cast-frame.png);}
.cast-area ul li .img img {width: 195px;}
.cast-area ul li .txt {width: 350px;}
.cast-area ul li .name-wrap {padding-bottom: 21px; background: url(http://img.imbc.com/broad/tv/ent/WhatIsStudy/images/cast-name-line.png) no-repeat 15px 100%; margin-bottom: 9px;}
.cast-area ul li .name-wrap span {display: block;}
.cast-area ul li .name-wrap .sum {color: #155e3d; font-size: 19px; font-family: 'notokr-bold'; margin-bottom: 8px; line-height: 21px; background: url(http://img.imbc.com/broad/tv/ent/WhatIsStudy/images/cast-tit-deco.png) no-repeat 0 0; padding: 21px 0 0 24px;}
.cast-area ul li .name-wrap .name {padding-left: 24px; font-size: 30px; color: #000; font-family: 'notokr-bold';}
.cast-area ul li .info p {padding-left: 24px; font-size: 15px; color: #155e3d; line-height: 25px;}

/* Á¦ÀÛ¹ßǥȸ */
.live {box-sizing: border-box; background: #cec9c3 url(http://img.imbc.com/broad/tv/ent/howdoyouplay/images/live-bg.jpg) no-repeat center top; height: 932px; position: relative;}
.live .live-info span {line-height: 28px; display: block; text-align: center; font-family: 'notokr-bold'; font-size: 18px; color: #01deff;}
.live .live-info span.first {color: #fff;}
.live .live-info span.center {margin: 14px 0 295px;}
.live .live-info span.last {color: #deff00; font-size: 24px; margin-bottom: 20px;}
.live .live-vod-wrap {}
.live .live-vod {width: 640px; box-sizing: border-box; position: absolute; bottom: 38px; left: 52px;}
.live .live-vod iframe {position: relative;}
.live .heyo-banner {text-align: center;}
.live .btn-area {padding: 47px 0; box-sizing: border-box; background: url(http://img.imbc.com/broad/tv/ent/realman300/images/live-bottom-line.jpg) repeat-x center bottom;}
.live .btn-area ul {width: 405px; margin: 0 auto; overflow: hidden;}
.live .btn-area ul li {float: right;}
.live .btn-area ul li:first-child {float: left;}
.live .btn-area ul li a {text-indent: -9999px; display: block; width: 155px; height: 26px;}
.live .btn-area ul li a.concept-btn {background: url(http://img.imbc.com/broad/tv/ent/realman300/images/live-btn1.png) no-repeat center center;}
.live .btn-area ul li a.cast-btn {background: url(http://img.imbc.com/broad/tv/ent/realman300/images/live-btn2.png) no-repeat center center;}
.live .btn-area ul li:first-child {margin-right: 30px;}

/* 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 promotion banner*/
.flt-banner {position: absolute; right: 0; bottom: 0; z-index: 10;}
.flt-banner .banner-img {position: relative;}
.flt-banner ul {padding: 70px 0 0 92px;}
.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;}

/* main - event banner */
.banner-wrap {width: 250px; height: 130px; overflow: hidden;}
.banner-wrap a {display: block; width: 100%; height: 100%;}