@import url(http://font.imbc.com/nanumgothic/nanumgothic.css);
@import url('https://fonts.googleapis.com/css?family=Gugi');
/* 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:150px;background:url(http://img.imbc.com/broad/tv/drama/goodbyetogoodbye/images/main-top.jpg) no-repeat 50% bottom;}
.visual-top .broad_info {overflow:hidden;margin:44px 0 0 40px; }
.visual-top .broad_info .tit-logo {float:left;width:73px;margin-right:17px;}
.visual-top .broad_info .broad_about { line-height: 28px;text-align:left; }
.visual-top .broad_info .broad_about h2 { margin:2px 0 5px; color:#09053b; font-size:22px; font-weight:bold;letter-spacing:-0.1em;}
.visual-top .broad_info .broad_about .broad_staff { line-height:18px; color:#000;font-size:12px;letter-spacing:-0.05em}
.visual-top .btn-like-program-wrap {display:inline-block;position:absolute;z-index:200; right:20px; top:42px;}
*/
/* main top visual */
.visual-top { overflow:hidden; width:1024px; margin:10px auto 0; position:relative;}
.visual-top .broad_info { width:1024px; overflow:hidden; position:absolute; bottom:55px; left:40px; z-index: 200; }
.visual-top .broad_info .tit-logo {float:left;width:73px;margin-right:17px;}
.visual-top .broad_info .broad_about { line-height: 28px;text-align:left;}
.visual-top .broad_info .broad_about h2 { margin:2px 0 5px; color:#010103; font-size:22px; font-weight:bold;letter-spacing:-0.09em;}
.visual-top .broad_info .broad_about .broad_staff { line-height:18px; color:#111;font-size:12px;letter-spacing:-0.12px; display:inline-block; margin-left:1.5px; margin-top:2px;}
.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:150px;background:url(http://img.imbc.com/broad/tv/drama/goodbyetogoodbye/images/main-top.jpg) no-repeat 50% bottom;}
.sub .visual-top .broad_info {overflow:hidden;margin:44px 0 0 40px; position:static; }
.sub .visual-top .broad_info .tit-logo {float:left;width:73px;margin-right:17px;}
.sub .visual-top .broad_info .broad_about { line-height: 28px;text-align:left;}
.sub .visual-top .broad_info .broad_about h2 { margin:2px 0 5px; color:#010103; font-size:22px; font-weight:bold;letter-spacing:-0.1em;}
.sub .visual-top .broad_info .broad_staff {line-height:18px; color:#000;font-size:12px;letter-spacing:-0.05em}
.sub .btn-like-program-wrap {display:inline-block;position:absolute;z-index:200; right:20px; top:42px;}
/*nav*/
.nav {margin: 0 auto; height: 89px;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 14px;}
.nav li .item:hover{color:#617897;font-weight:bold; border-bottom:3px solid #617897; 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:33px; color:#010101; font-size:14px; font-weight: bold;line-height:2;}
.section .box-wrap { width:714px; position: relative; float:left; margin-bottom:45px; }
.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:45px; }
.section-preview { position:relative; overflow:hidden; text-align:left; /* margin-bottom: 32px */}
.section-preview .left{float:left;width:714px;}
.section-preview .vod{ overflow:hidden; width:384px; float:left;}
.section-preview .vod a img { margin-left:-10%; height:263px; }
.section-preview .vod-txt {float:left;width:298px;height:244px;padding:20px 12px 0 20px;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:22px;line-height:30px;margin-top:14px;}
.section-preview .vod-txt p:nth-child(3){color:#757575;letter-spacing:0;position:absolute;bottom:20px;}
/* 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(2n) { margin-right:0; }
/* main - news section */
.section .news { width:714px; }
.section .news_box ul { }
.section .news_box img.ico-m-play { display:none; }
/* main - clip section */
.section .clip { width:714px; }
.section .clip_box ul { }
/* main - insta section */
.section .insta-wrap { }
.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:45px; position:relative; width: 250px; height: 250px;overflow: hidden }
.castList ul li { float: left;position: relative; width: 250px; height: 250px; background: #e3f1ff;overflow: hidden;}
.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:250px; }
/* footer */
#footer { padding:55px 0; color:#424242; background-color:#ececec; }
/*----------------------------------------------- ¼ºê ----------------------------------------*/
/*sub*/
.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:#000; padding-left:50px; background:#f7f6f2 url(http://img.imbc.com/broad/tv/ent/livingwith/img/sub-title.png) 28px no-repeat; border:1px solid #efeeeb; 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;border:1px solid #dbdbdb;}
.sub .content .section-right { float: left;}
.sub .border_box {text-align:center;}
/* board */
.recommend-banner { margin-bottom:20px; }
/* concept */
.concept-txt { position:absolute; top:236px; width:100%; }
.concept-txt p { font-size:16px; color:#000; margin:0 auto; text-align:center; font-family:"Nanum Gothic"; line-height:36px; letter-spacing:-0.1rem; }
.concept-txt p.first-item { margin-bottom:36px; }
/* staff */
.staff-top { margin-bottom:10px; }
.staff-name { overflow:hidden; }
.staff-name table { width:50%; float:left; overflow:hidden; font-family:dotum, sans-serif; }
.staff-name table tbody { }
.staff-name table tbody tr { }
.staff-name table th, .staff-name table td { letter-spacing:-1px; vertical-align:top; font-size:12px; line-height:30px; height:30px; color:#4b688e; }
.staff-name table th { background:#f7f6f2; padding:0 18px 0 28px; box-sizing:border-box; text-align:left; }
.staff-name table td { background:#f7f6f2; }
.staff-name table td.second { border-right:1px solid #ddd; }
.staff-name table tr.first-item th, .staff-name table tr.first-item td { padding-top:20px; }
.staff-name table tr.last-item th, .staff-name table tr.last-item td { padding-bottom:20px; }
/*cast*/
.ui-list-cast-slide { width:725px; margin-bottom:13px; }
.ui-list-cast-slide ul { overflow:hidden; width:100%; }
.ui-list-cast-slide ul li { float:left; margin-right:7px;margin-bottom:7px;width:237px; background:#fff; border:1px solid #e3e3e3; box-sizing:border-box; }
.ui-list-cast-slide ul li:last-child {margin-right: 0}
.ui-list-cast-slide ul li a { font-size:14px; color:#333; display:inline-block; width:100%; text-align:center;padding:15px 0;}
.ui-list-cast-slide ul li.active { border:1px solid #617897; }
.ui-list-cast-slide ul li.active a { color:#617897; text-decoration: underline; }
.ui-list-cast-slide ul li.active a span{font-weight: bold;}
.ui-list-cast-slide ul li:hover { border:1px solid #617897; }
.ui-list-cast-slide ul li:hover a { color:#617897; text-decoration: underline; font-weight:bold; }
.ui-list-cast-slide ul.sub-cast li { width:176px;margin-right: 7px; }
.ui-list-cast-slide ul.sub-cast li:last-child {margin-right: 0}
.ui-list-cast-slide ul.main-cast li:hover { border:1px solid #617897; }
.ui-list-cast-slide ul.main-cast li.active { border:1px solid #617897; }
.ui-list-cast-slide ul.sub-cast li:hover { border:1px solid #617897; }
.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: 8px}
.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; }
.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:12px; }
.preview_wrapper em { text-align:center !important; font-size:12px; }
.preview_wrapper .vod_btn { margin-left:10% !important; }
/**/
#rptView_ctl00_tblAdamMedia { text-align:center; }
.btn-like-program-wrap .btn-like-program-summary { margin-top:5px !important; }