@charset "euc-kr";
@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;}
.ellipsis {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word;}

/*main top visual - teaser  */
.visual-top {position: relative;overflow: hidden;width: 1024px;margin: 0 auto;height: 148px;background: url(http://img.imbc.com/broad/tv/drama/thespieswholovedme/images/bg_sub.jpg) no-repeat 50%;}
.visual-top .broad_info {overflow: hidden; margin: 40px 0 0 40px;}
.visual-top .broad_info .tit-logo {float: left; width: 73px; margin-right: 20px;}
.visual-top .broad_info .broad_about {margin-top: 0; line-height: 28px; text-align: left;}
.visual-top .broad_info .broad_about h2 {color: #000;font-size: 22px;font-weight: bold;letter-spacing: -0.1em;margin: 4px 0 2px;}
.visual-top .broad_info .broad_about .broad_staff {color: #000;font-size: 12px;letter-spacing: -0.05em;line-height: 20px;}
.visual-top .broad_info .broad_about .broad_staff span {color: #7f71c2;}
.visual-top .broad_info .broad_about .broad_staff img {vertical-align: middle; margin: 0 3px;}
.visual-top .btn-like-program-wrap {display: inline-block; position: absolute; z-index: 200; right: 20px; top: 40px;}

/* main top visual */
.main.visual-top {overflow: hidden;width: 1024px;height: auto;background: none;margin: 10px auto;position: relative;}
.main.visual-top .broad_info {width: 1024px; overflow: hidden; position: absolute; bottom: 57px; left: 40px; z-index: 200; margin: 0;}
.main.visual-top .broad_info .tit-logo {
    margin-top: 8px;
}
.main.visual-top .broad_info .broad_about {margin-top: 0; line-height: 28px; text-align: left;}
.main.visual-top .broad_info .broad_about h2 {color: #fff; font-size: 22px; font-weight: bold; letter-spacing: -0.09em; margin: 7px 0 2px;}
.main.visual-top .broad_info .broad_about .broad_staff {color: #fff; font-size: 12px; letter-spacing: -0.12px; display: inline-block; line-height: 20px;}
.main.visual-top .broad_info .broad_about .broad_staff img {vertical-align: middle;}
.main.visual-top .btn-like-program-wrap {display: inline-block; position: absolute; z-index: 200; right: 20px; top: 20px;}

/*preview visual-txt-box */
.roll-ban-event {width: 1024px; height: 580px; position: relative; margin-bottom: 15px; background-color: #000;}
.roll-ban-event li {position: absolute; top: 0; left: 0; width: 1024px; height: 580px; opacity: 0; -ms-filter: "alpha(opacity=0)"; z-index: 10;}
.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;}
.btn-preview {position: absolute; top: 23px; right: 15px; cursor: pointer;}

/*sub top visual*/
.sub .visual-top {position: relative;overflow: hidden;width: 1024px;margin: 0 auto;height: 148px;background: url(http://img.imbc.com/broad/tv/drama/thespieswholovedme/images/bg_sub.jpg) no-repeat 50%;}
.sub .visual-top .broad_info {overflow: hidden; margin: 40px 0 0 40px; position: static;}
.sub .visual-top .broad_info .tit-logo {float: left; width: 73px; margin-right: 20px;}
.sub .visual-top .broad_info .broad_about {margin-top: 0; line-height: 28px; text-align: left;}
.sub .visual-top .broad_info .broad_about h2 {color: #000;font-size: 22px;font-weight: bold;letter-spacing: -0.1em;margin: 0 0 7px 0;}
.sub .visual-top .broad_info .broad_staff {color: #000;font-size: 12px;letter-spacing: -0.05em;line-height: 20px;}
.sub .visual-top .broad_info .broad_about .broad_staff img {vertical-align: middle; margin: 0 3px;}
.sub .btn-like-program-wrap {display: inline-block; position: absolute; z-index: 200; right: 20px; top: 40px;}

/*nav*/
.nav {margin: 0 auto; height: 94px; font-size: 15px; line-height: 45px; letter-spacing: -.5px;}
.nav ul {height: 45px; text-align: center; margin-top: 12px; border-bottom: 1px solid #ccc;}
.nav li {display: inline-block; *display: inline; height: 94px; text-align: center; vertical-align: top;}
.nav li .item {display: inline-block; *display: inline; position: relative; height: 45px; vertical-align: top; color: #222; margin: 0 15px; font-size: 15px;}
.nav li .item:hover {color: #7d234f; font-weight: bold; border-bottom: 3px solid #7d234f; box-sizing: border-box;}
.nav .hidden {display: none;}

/*section paging*/
.section .num {display: none;}
.section .paging {position: absolute; top: 0px; right: 0px;}
.section .paging a {display: block; float: left;}
.section .paging a img {width: 28px; height: 28px;}

/*contents*/
.section {width: 1024px; margin: 0 auto; position: relative; text-align: left; margin-bottom: 45px; overflow: hidden;}
.section h2 {width: 228px; height: 34px; color: #010101; font-size: 14px; font-weight: bold; line-height: 2;}
.section .box-wrap {width: 714px; position: relative; float: left; margin-bottom: 40px;}
.section .con_box {height: 216px; overflow: hidden;}
.section .con_box ul {float: left;}
.section .con_box ul li {position: relative; float: left; width: 228px; height: 214px; margin-right: 12px; border: 1px solid #dcdcdc;}
.section .con_box ul li:nth-child(3n) {margin-right: 0;}
.section .con_box a {line-height: 20px; font-weight: bold; font-size: 14px; letter-spacing: -.5px; color: #424242; font-weight: bold;}
.section .con_box .img {position: relative; display: block; width: 100%; height: 128px; margin-bottom: 7px; overflow: hidden;}
.section .con_box .img img {width: 228px;}
.section .con_box .txt {padding: 3px 15px; display: block; font-size: 14px; text-align: left; color: #424242; font-weight: normal;}
.section .con_box 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;}
.content .section-bottom {}

.content .section-main-right {width: 250px; position: absolute; top: 0; right: 0;}

/* main - preview section */
.ad-wrap {margin-bottom: 65px;}
.section-preview {position: relative; overflow: hidden; text-align: left; margin-bottom: 32px;}
.section-preview .left {float: left;width: 750px;}
.section-preview .vod {overflow: hidden;width: 505px;float: left;}
.section-preview .vod a img {margin-left: -10%; height: 263px;}
.section-preview .vod-txt {float: left;width: 220px;height: 265px;padding: 10px 0 0 22px;letter-spacing: -0.1em;color: #222;font-size: 14px;position: relative;}
.section-preview .vod-txt p:nth-child(1) {font-weight: bold;}
.section-preview .vod-txt div:nth-child(2) {font-size: 20px;line-height: 28px;margin-top: 14px;}
.section-preview .vod-txt p:nth-child(3) {color: #757575; letter-spacing: 0; position: absolute; bottom: 20px;}
.section-preview .vod .none-preview {width: 100%; height: 263px; background-color: #000; color: #fff; text-align: center; line-height: 263px;}

/* main - sketch section */
.section .sketch {width: 230px; margin-right: 12px;}
.section .sketch_box ul {}

/* main - photo section */
.section .photo {width: 472px;}
.section .photo_box ul li:nth-child(2) {margin-right: 0;}

/* main - news section */
.section .news {width: 714px;}
.section .news_box ul {}

/* main - clip section */
.section .clip {width: 714px;}
.section .clip_box ul {}

/* main - insta section */
.section .insta-wrap {display: none;}
.section .insta-wrap .insta {width: 250px; height: 250px;}
.section .insta-wrap .insta a {display: inline-block; width: 100%; height: 100%; background-color: #ff9900;}

/* main - cast slide */
.castList {margin-bottom: 40px; position: relative; width: 250px; height: 250px; overflow: hidden;}
.castList ul li {float: left;position: relative;width: 250px;height: 250px;overflow: hidden;box-sizing: border-box;border: 1px solid #dcdcdc;}
.castList ul li a {position: absolute;top: 0;right: 0;}
.castList .name {font-size: 22px; color: #000; position: absolute; top: 19px; left: 25px; line-height: 29px; letter-spacing: -1.5px;}
.castList li a img {width: 100%;}

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

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

/*----------------------------------------------- Sub Page ----------------------------------------*/

/*sub*/
.sub .imbbs {text-align: center; padding-top: 10px; margin-top: 10px;}
.sub .content {width: 1024px; *width: 1024px; margin: 0 auto; padding-bottom: 50px; background: #fff; text-align: left; overflow: hidden;}
.sub .content h2.tit-content {color: #fff;padding-left: 50px;background: #000 url(http://img.imbc.com/broad/tv/drama/wheniwasmostbeautiful/images/sub-title.png) 28px no-repeat;border: 1px solid #e1e7e6;margin-bottom: 15px;line-height: 44px;font-size: 15px;font-weight: bold;}
.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;}
.sub .content .section-right {float: left;}
.sub .border_box {text-align: center;}

/*cast*/
.ui-list-cast-slide {width: 725px; margin-bottom: 13px;}
.ui-list-cast-slide ul {width: 733px; margin-left: -4px; overflow: hidden;}
.ui-list-cast-slide ul li {float: left;width: 33.3%;padding: 0 4px 8px;box-sizing: border-box;}
.ui-list-cast-slide ul li a {font-size: 14px;color: #333;border: 1px solid #e3e3e3;box-sizing: border-box;display: inline-block;width: 100%;text-align: center;padding: 15px 0;letter-spacing: -1px;}
.ui-list-cast-slide ul li.active a {color: #7d234f;border: 1px solid #7d234f;text-decoration: underline;}
.ui-list-cast-slide ul li.active a span {font-weight: bold;}
.ui-list-cast-slide ul li a:hover {color: #7d234f;border: 1px solid #7d234f;text-decoration: underline;font-weight: bold;}
.ui-list-cast-slide ul.sub-cast li {width: 20%;}
.ui-list-cast-slide ul.main-cast li a:hover {border: 1px solid #7d234f;}
.ui-list-cast-slide ul.main-cast li.active a {border: 1px solid #7d234f;}
.ui-list-cast-slide ul.sub-cast li a:hover {border: 1px solid #20377d;}
.ui-dividing-cast-main {overflow: hidden; position: relative; overflow: hidden;}
.ui-dividing-cast-main .image {overflow: hidden; position: relative; width: 300px; height: 450px; margin: 0 0 10px; float: left; margin-right: 21px;}
.ui-dividing-cast-main .header {height: 53px; padding: 0 0 0 20px; background-color: #f2f5f5; border-top: 2px solid #e0e8e8; font-size: 14px; font-weight: bold; color: #737270; line-height: 53px; float: left; width: 384px; *width: 360px;}
.ui-dividing-cast-main .header .extra {margin: 0 0 0 6px; padding: 0 0 0 8px; background: url("http://img.imbc.com/broad/tv/drama/hwajung/img/bg-cast-main.png") repeat-y left;}
.ui-dividing-cast-main .description {margin: 0 0 16px; padding: 20px 25px; line-height: 18px; border-bottom: 2px solid #e0e8e8; width: 354px; *width: 360px; float: left;}
.ui-dividing-cast-main .description .meta {font-weight: bold; font-size: 13px; margin-bottom: 18px;}
.ui-dividing-cast-child {overflow: hidden; position: relative;}
.ui-dividing-cast-child .item {overflow: hidden; position: relative; float: left; width: 200px; height: 206px; margin: 0 5px 0 0;}
.ui-dividing-cast-child .item .image {overflow: hidden; position: relative; width: 200px; height: 150px; margin: 0 0 1px;}
.ui-dividing-cast-child .item .header {height: 53px; padding: 0 20px; background-color: #f2f5f5; border-top: 2px solid #e0e8e8; font-size: 14px; font-weight: bold; color: #737270; line-height: 53px;}
.ui-dividing-cast-child .item .header .extra {margin: 0 0 0 13px; padding: 0 0 0 8px; background: url("http://img.imbc.com/broad/tv/drama/hwajung/img/bg-cast-main.png") repeat-y left;}
.ui-button-cast-main {position: absolute; right: 12px; top: 2px; height: 53px; padding: 0 9px 0 0; line-height: 53px; color: #3c7a72; text-decoration: underline; background: url("http://img.imbc.com/broad/tv/drama/hwajung/img/icon-arrow-right.png") no-repeat right center;}
.ui-button-cast-main strong {font-weight: bold;}
.ui-button-cast-side {display: block; position: absolute; right: 13px; top: 2px; height: 53px; padding: 0 9px 0 0; line-height: 53px; color: #3c7a72; text-decoration: underline; background: url("http://img.imbc.com/broad/tv/drama/hwajung/img/icon-arrow-right.png") no-repeat right center;}
.ui-dividing-cast-side {overflow: hidden; position: relative; padding: 76px 0 0; background: url("http://img.imbc.com/broad/tv/drama/hwajung/img/bg-cast-header.png") repeat-x top;}
.ui-dividing-cast-side .category {display: block; position: absolute; left: 13px; top: 2px; height: 53px; padding: 0 9px 0 0; line-height: 53px; color: #3c7a72;}
.ui-button-cast-side strong {font-weight: bold;}
.ui-list-cast-side {overflow: hidden; position: relative;}
.ui-list-cast-side .item {position: relative; width: 475px; *width: 669px; min-height: 140px; margin-bottom: 20px; *margin-bottom: 45px; padding: 10px 0 0 218px;}
.ui-list-cast-side .item.item_m {margin: 0;}
.ui-list-cast-side .item .image {overflow: hidden; position: absolute; left: 0; top: 0; width: 200px; height: 150px;}
.ui-list-cast-side .item .image img {width: 200px; *margin-top: -20px;}
.ui-list-cast-side .item .header {margin: 0 0 15px; font-size: 14px; color: #777574; font-weight: bold;}
.ui-list-cast-side .item .header .extra {margin: 0 0 0 13px; padding: 0 0 0 8px; background: url("http://img.imbc.com/broad/tv/drama/hwajung/img/bg-cast-main.png") repeat-y left; font-weight: normal;}
.ui-list-cast-side .item .meta {margin: 0 0 15px; color: #44403e; line-height: 18px;}
.ui-list-cast-side .item .description {color: #44403e; line-height: 1.5; font-weight: bold;}

/*news*/

/*vod preview  */
.preview_wrapper p {text-align: center !important; font-size: 14px;}
.preview_wrapper em {text-align: center !important; font-size: 14px;}
.preview_wrapper .vod_btn {margin-left: 10% !important;}

/* 제작발표회 */
.live {position: relative;}
.live .live-vod{width: 640px; height: 362px; position: absolute; top: 630px; left: 50%; margin-left: -320px;}