@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");


/* common style */
a {color:inherit;}
button {border:0 none;background:none;cursor:pointer;}
body { text-align: center; background-color: #e9eff5; font-family:'Nanum Gothic','나눔 고딕',dotum!important; }
.wrapper {min-width:1024px; } 
.btn-like-program-wrap {display:inline-block;position:absolute;top:20px;right:50%;z-index:100;margin-right:-505px; z-index: 999;}
.ad-rectangle{ position:absolute;right:0;top: 0; }
.ad { position:absolute;right:0;top: 0; }

/* 메뉴, 좋아요버튼 */
.nav {text-align:center; width: 100%;  background: #452833; height: 60px; }
.nav ul {overflow:hidden;margin:0 auto;text-align:center;}
.nav ul li {display:inline;line-height:57px;text-align:center;  background:url("http://img.imbc.com/broad/tv/drama/carrier/img/vertical_bar2.png") no-repeat left center;}
.nav ul li:hover {text-decoration: underline;}
.nav ul li a {padding:0 12px;font-size:16px;color:#fff;letter-spacing:-0.05em; font-weight: normal;}
.nav ul li a:hover { text-decoration: underline;}
.nav ul li.first-item {background:none;}
/* 방송정보 */
.main .broad-info { position:absolute; left:50%;  letter-spacing:-1px; top:21px; margin-left:-505px; z-index: 1000; font-size:14px; color:#f1e9e3; }  
.main .broad-info li {float:left; margin-right:5px; padding-left: 5px;  background:url("http://img.imbc.com/broad/tv/drama/golden//img/broad-info-bar-02.png") no-repeat left center; }
.main .broad-info li.first-item{ background: none; }
.main .broad-info li span {padding-right:7px; color: #f1e9e3; font-weight: bolder; }
.main .broad-info li a .txt .title { color: #f1e9e3; font-size: 18px; line-height: 29px; letter-spacing: -1px; padding-bottom: 12px; border-bottom: 1px solid #ccc; }
.main .tit-content {padding:44px 0;height:22px;line-height:25px;text-align:center;font-size:22px;color:#f1e9e3; font-family:'Nanum Gothic','나눔 고딕',dotum,'돋움'}
.main .tit-content span {font-weight:normal;}
/* 아티클 */
.content .con-inner {position:relative;overflow:hidden;margin:0 auto;width:1024px;}
.content .article {float:left;margin-bottom:10px;width:500px;height:250px;}
.content .list-last{ width: 512px; margin-left: 12px;}
.content .list-last a .txt { background: #fff; width: 205px; *width: 262px; height: 210px; *height: 250px; padding: 20px 26px 20px 31px; }
.content .article .img {position:relative;overflow:hidden;float:left;width:250px;height:250px;}
.content .article img {position:absolute;left:-100%;right:-100%;margin:auto;min-width:100%;height:100%;}
.content .enews .article img {position:static;margin:0;}
.content .article .txt {position:relative;float:left;padding:30px 22px;width:206px;height:190px;letter-spacing:-1px;background:#fff;}
.content .article .txt .title {display:block;margin-bottom:15px;padding-bottom:15px;line-height:24px;border-bottom:1px solid #ccc;font-size:20px;color:#000;}
.content .article .txt .summary {overflow:hidden;max-height:80px;line-height:20px;font-size:14px;color:#606060;}
.content .article .txt .date {position:absolute;left:25px;bottom:20px;line-height:1.4;font-size:14px;color:#606060;}
.bg-arr { background: url('http://img.imbc.com/broad/tv/drama/goodperson/img/bg-vod-img.png') no-repeat right center; display: inline-block; width: 250px; height: 250px; position: absolute; top: 0; left: 0; z-index: 111;}
.section .section-banner {float:left;margin-left:12px;width: 250px;height: 250px;position: absolute;right: 0;}
.section .box-square {position:relative;overflow:hidden;float:left;padding:22px 16px;width:216px;height:204px;border:1px solid #e6e6e6;color:#4f4f4f;letter-spacing:-1px;background-color:#fff;}
.top-contents { position:relative ;z-index:2;margin:298px auto 0;padding-top:22px;padding-left:42px;width:972px;height:78px;text-align:left;color:#3f3f3f; letter-spacing:-1px;background:url(http://img.imbc.com/broad/tv/drama/include/img/bg-op4-w.png) repeat-x;}
.top-contents a {display:block;max-width:840px;}
.top-contents .date {font-size:16px;}
.top-contents .title {padding-top:12px;font-weight:600;font-size:24px;}
.top-contents .article {display:none;}
.top-contents .article:first-child {display:block;}
.article.last-item {margin-left:12px;width:512px;}
.article.last-item .txt {padding:30px 31px;width:200px;*width:262px;}

.box-square .title {padding-bottom:12px;font-weight:400;font-size:18px;color:#c44456;}
.box-square .img {display:block;overflow:hidden;width:216px;height:122px;}
.box-square .img img {width:216px;}
.box-square .txt {padding-top:6px;line-height:1.4;font-size:16px;color:#040404;}
.box-title {position:relative;float:left;margin-right:12px;width:250px;height:250px;line-height:1;text-align:center;font-size:24px;color:#fff;}
.box-title strong {line-height:244px;font-weight:bold; color:#fff; }
.box-title .btn-more1 {position:absolute;right:25px;bottom:25px;width:25px;height:25px;line-height:0;font-size:0;color:transparent;background:url(http://img.imbc.com/broad/tv/drama/carrier/img/news-more-02.png) no-repeat;}
.box-title .btn-more2{position:absolute;right:25px;bottom:25px;width:25px;height:25px;line-height:0;font-size:0;color:transparent;background:url(http://img.imbc.com/broad/tv/drama/carrier/img/news-more-01.png) no-repeat;}
/*=======================================================================================================================================================================================================*/
/*메인공통*/
.main { min-width: 1024px; }
.main #container {  position: relative; text-align: left; /* background: url("http://img.imbc.com/broad/tv/drama/golden/img/main_repaet-bg.jpg") repeat-x top center;*/}
.main .content-inner {overflow:hidden;margin:0 auto;width:1024px;}
.main #footer {padding:30px 0 30px;color:#566472;background-color:#faf4db;}
/* 티저 메인 이미지 */
/*.main .visual-top {position:relative; overflow:hidden; height:504px; min-width: 1024px;  background: url("http://img.imbc.com/broad/tv/drama/golden/img/main_bg.jpg") no-repeat top center;}
.main .visual-top h1 {margin-left: -153px; top: 63px;}  
.main .visual-top .tit-logo-main {position:absolute; left:50%;z-index:100;*/} 

/* 공홈 - 이미지슬라이드 */
.roll-controll-btn { position: absolute; bottom: 15px; left: 50%; width: 105px; margin-left: -65px; text-align: center;  height: 16px; z-index: 9999; }
.roll-controll-btn .btn { display: inline-block; width: 16px; height: 16px; padding: 0; margin-right: 10px; border: 0; background: url('http://img.imbc.com/broad/tv/culture/mbcspecial/img/img-dot.png') no-repeat top center; cursor: pointer; } 
.roll-controll-btn .btn.on { height: 16px; background: url('http://img.imbc.com/broad/tv/culture/mbcspecial/img/img-dot.png') no-repeat top center; background-position: 0 -16px;} 

.roll-ban-event li { position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; -ms-filter: "alpha(opacity=0)"; height: 580px; }
.roll-ban-event li:first-child{ opacity: 1; -ms-filter: "alpha(opacity=100)"; }
.btn-front { position: absolute; overflow: hidden; left: 50%; bottom: 10px; margin-left: 40px; padding: 0; border: 0; display: block; z-index: 1000; width: 25px; height: 25px; text-indent: 100%; white-space: nowrap; cursor: pointer; background-image: url('http://img.imbc.com/broad/tv/culture/mbcspecial/img/btn-play-stopV2.png'); background-repeat: no-repeat; background-color: transparent; background-position: 0 -25px; }
.btn-stop { background-position: 0 0; }


/* 공홈 - 이미지슬라이드 텍스트 */
.visual-txt-box  { z-index: 800; color: #fff; font-size: 30px; width: 930px; text-align: left; height: 89px; padding-top: 30px; margin: 0 auto; background: url('http://img.imbc.com/broad/tv/culture/peoplegood/images/bg-visual-text.png') repeat-x top left; position: absolute; bottom: 15px; left: 50%; margin-left: -465px;}
.visual-txt-box .visual-day{ font-size:16px; letter-spacing: 0; font-weight: normal;}
.visual-txt-box .visual-title { padding-top: 5px; }
.visual-txt-box a{ color:#fff; font-size:30px; font-weight: bold; letter-spacing: -3px; }
.btn-preview{ position:absolute; bottom: 20px; border:0; background:none; right:50%; margin-right:-470px;  z-index:100; cursor:pointer;}
.btn-t{display: inline-block; padding: 0 15px;}

/* 공홈 - 이미지슬라이드 */
.roll-controll-btn .btn { display: inline-block; width: 16px; height: 16px; padding: 0; margin-right: 10px; border: 0; background: url('http://img.imbc.com/broad/tv/culture/mbcspecial/img/img-dot.png') no-repeat top center; cursor: pointer; } 
.roll-controll-btn .btn.on { height: 16px; background: url('http://img.imbc.com/broad/tv/culture/mbcspecial/img/img-dot.png') no-repeat top center; background-position: 0 -16px;} 
.roll-controll-btn { position: absolute; bottom: 15px; left: 50%; width: 105px; margin-left: -65px; text-align: center;  height: 16px; z-index: 9999; }
.roll-ban-event li { position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; -ms-filter: "alpha(opacity=0)"; height: 580px; }
.roll-ban-event li:first-child{ opacity: 1; -ms-filter: "alpha(opacity=100)"; }
.btn-front { position: absolute; overflow: hidden; left: 50%; bottom: 10px; margin-left: 40px; padding: 0; border: 0; display: block; z-index: 1000; width: 25px; height: 25px; text-indent: 100%; white-space: nowrap; cursor: pointer; background-image: url('http://img.imbc.com/broad/tv/culture/mbcspecial/img/btn-play-stopV2.png'); background-repeat: no-repeat; background-color: transparent; background-position: 0 0; }
.btn-stop { background-position: 0 -25px; }

/*메인 예고보기 */
.preview_vod { float: left; overflow: hidden;}
.content .section3 { background: #faf4db; }
.preview_box { width: 250px; height: 250px; position: relative; overflow: hidden;  padding-left: 10px; margin-top: 261px; }
.preview_box .txt{ background: #fff; width: 212px; height: 186px; padding: 28px 13px 20px 25px; text-align: left; }
.preview_box .txt .broad-num { color: #5e6c82; font-size: 14px; line-height: 29px; letter-spacing: -1px; }
.preview_box .txt .broad-day { color: #5e5e5e; font-size: 14px; line-height: 20px; letter-spacing: -1px; padding-top: 15px;}
.preview_box .txt .broad-txt{ color: #000; font-size: 20px; line-height: 28px; letter-spacing: -1px; padding-top: 15px;}
.preview_box i{ text-indent: -9999px; font-size: 0; background: url("http://img.imbc.com/broad/tv/drama/goodperson/img/contents_add.png") no-repeat; position: absolute; top: 178px; left: 213px; width: 25px; height: 25px;}




/* 예고영상 */
.content .section1 {background-color:#f7f1ea; padding-bottom: 30px;}
/* 뉴스 */
.content .section2 {background-color:#c6b9ad; padding-bottom: 20px;  }
.content .section2 .box-title {background-color: #f7f1ea; color:#f7f2ee ; padding-top: 100px; height: 150px;}
.content .section2 .box-title  span { line-height: 40px; font-weight: bold; color:#0e0e0e; padding-top: 100px; height: 150px;font-weight: normal;}
.content .section2 .box-title  span strong {line-height:1;color:#1b1c1b;line-height:1; font-weight: bold; color:#0e0e0e;  }

.content .section2 .cast-box { height: 250px; position: absolute; right: 0; }
.content .section2 .cast-box span { padding-top: 100px; height: 150px; color:#1a1c19; font-weight: normal; }
.content .section2 .cast-box  span strong {line-height:1; font-weight: bold; color:#1a1c19; }

.content .section3 .box-title { padding-top: 100px; height: 150px; background: #c6b9ad; }
.content .section3 .box-title strong {line-height:1; font-weight: bold; color: #0e0e0e;}
.content .section3 .btn { position: absolute; background: url('http://img.imbc.com/broad/tv/culture/mbcspecial/img/btn-next-prev.png') no-repeat; bottom: 30px; display: inline-block; width: 15px; height: 27px; border: 0; }
.content .section3 .btn-prev { background-position: 0 0; left: 169px; }
.content .section3 .btn-next { background-position: -43px 0; left: 210px; }
.content .section3 .clip { width: 500px; height: 250px; overflow: hidden; margin-right: 12px; }
.content .section3 .clip ul { overflow: hidden; position: absolute; left: 0; }
.content .section3 .clip ul li.article { display: block;  float: left;}
.content .section3 .clip { float:left; position: relative; margin: 0 auto; width: 500px; overflow: hidden;}

.event-box img{ margin-left: 11px;}
/* 예고보기 - 텍스트 */
/*
.preview_box {width: 250px;height: 250px;position: relative;overflow: hidden;padding-left: 10px;margin-top: 261px;}
.txt { background: #fff; width: 212px; height: 186px; padding: 28px 13px 20px 25px; text-align: left;}
.txt .broad-num {font-size: 16px; letter-spacing: 0; font-weight: normal; }
.txt .broad-title { color: #000; font-size: 20px; line-height: 29px; letter-spacing: -1px; padding-bottom: 15px; border-bottom: 1px solid #ccc; }
.txt .broad-txt { color: #000; font-size: 20px; line-height: 28px; letter-spacing: -1px; padding-top: 15px; }
.txt .broad-day { color: #5e5e5e; font-size: 14px; line-height: 20px; letter-spacing: -1px; padding-top: 15px; }
.txt i {text-indent: -9999px; font-size: 0; background: url("http://img.imbc.com/broad/tv/drama/goodperson/img/contents_add.png") no-repeat; position: absolute; top: 178px; left: 213px; width: 25px; height: 25px;}
*/

/* 주요등장인물 슬라이드(메인) */
.main .box-control {position:absolute;right:28px;bottom:18px;}
.main .box-control button {width:19px;height:27px;line-height:0;font-size:0;color:transparent;}
.content .cast-slider { width: 250px; height: 250px; margin: 0 auto; position: relative; overflow: hidden }
.content .cast-slider ul { list-style: none; width: 250px; margin: 0 auto; }
.content .cast-slider ul li { display: inline-block; }
.content .cast-slider ul li .slide-vod { float: left; position: relative; }
.content .cast-slider ul li .slide-vod h3 { position: absolute; top: -11px; left: -4px; }
.slide-contents .slide-1, .slide-3, .slide-5,.slide-7 {  margin-bottom: 20px;}
.slide-contents .slide-item { float: left; overflow: hidden; position: relative; width: 250px; height: 250px; background: #e3f1ff; }
.cast-slider .slide-leftbtn { position: absolute; top: 200px; left: 170px; z-index: 50 }
.cast-slider .slide-rightbtn { position: absolute; top: 200px; right: 22px; z-index: 50 }
.cast-slider .slide-activebtn ul li { padding-top: 11px; }
.slide_container { position: absolute; top: 0; right: 0; }
.cast_intro { /*padding-left: 23px; padding-top: 6px*/; }
.cast_relationship { padding-top: 23px; padding-left: 147px; }
button { display: inline-block; margin: 0; padding: 0; border: none;  background: none; cursor: pointer; }
.box-control .btn-before {margin-right:24px;background:url(http://img.imbc.com/broad/radio/include/img/btn-before-w.png) no-repeat;}
.box-control .btn-after {background:url(http://img.imbc.com/broad/radio/include/img/btn-after-w.png) no-repeat;}
/*=======================================================================================================================================================================================================*/
/*서브*/
.sub {  font-family:'Nanum Gothic','나눔 고딕',dotum,'돋움'; position: relative; min-width: 1024px; background: #f7f1ea; }
.sub #container { position: relative; text-align: center; /*background: url("http://img.imbc.com/broad/tv/drama/golden/img/sub_repaet-bg.jpg") repeat-x 50% 0;*/}
.sub .con-inner {overflow:hidden;margin:0 auto;width:1024px;}
.sub #footer {padding:30px 0 30px; background-color:#f7f1ea; color: #555;}

.sub .visual-top {position:relative; overflow:hidden; height:297px; background: #130a08 url("http://img.imbc.com/broad/tv/drama/golden/img/sub-bg.jpg") no-repeat 50% 0;}
.sub .visual-top h1 {margin-right:-320px; top:35px; } 
.sub .visual-top .tit-logo-sub {position:absolute; right: 50%; z-index:100;} 

/* 방송정보 */
.sub .broad-info {position:absolute; left:50%; *font-weight:normal; font-size:14px; letter-spacing:-1px; top:21px; margin-left:-505px; color:#000; z-index: 1000;} 
.sub .broad-info li {float:left;margin-right:10px; padding-left: 13px; background:url("http://img.imbc.com/broad/tv/drama/golden/img/broad-info-bar-02.png") no-repeat left center; color: #f1e9e3; }
.sub .broad-info li.first-item{ background: none; }
.sub .broad-info li span {padding-right:7px; color: #f1e9e3; font-weight: bold; }
.sub .broad-info li a .txt .title { color: #f1e9e3; font-size: 20px; line-height: 29px; letter-spacing: -1px; padding-bottom: 12px; border-bottom: 1px solid #ccc; }
.sub .content h2.tit-content { margin-bottom: 22px; border-bottom: 2px solid #ddd; line-height: 30px; font-size: 18px; letter-spacing: -0.05em; }

.sub .content { width: 964px; *width:1024px; margin: 0 auto; background: #fff; padding: 20px 30px 40px; text-align: left; overflow: hidden; }
.sub .content .section-left { margin-right: 21px; width: 693px; float: left; }
.sub .content .section-right { float: left;}

/* 등장인물 - 상세페이지 */
.cast-bt { position: absolute; right: 24px; top: 415px; float: left; overflow: hidden; width: 346px;}
.cast-bt-01, .cast-bt-02 { width: 170px; display: inline; float: left; }
.cast-bt-01 { margin-right: 6px;  }
/* 등장인물 슬라이드 */
.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: 22px; }
.ui-dividing-cast-main .header { height: 53px; padding: 0 0 0 20px; background-color: #ecf6ff; border-top: 2px solid #ddeefd; font-size: 14px; font-weight: bold; color: #33434e; line-height: 53px; float: left; width: 340px; *width: 360px; }
.ui-dividing-cast-main .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-dividing-cast-main .description {  font-weight: bold; margin: 0 0 16px; padding: 20px 25px; line-height: 1.5; border-bottom: 2px solid #e0e8e8; width: 310px; *width: 360px; height: 353px; *height: 393px; float: left; }
.ui-dividing-cast-main .description .meta { margin-top: 5px; font-weight:normal;}
.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 { display: block; position: absolute; right: 20px; top: 2px; height: 53px; padding: 0 9px 0 0; line-height: 53px; color: #33434e; 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-vod { display: block; width: 120px; height: 53px; padding: 0 9px 0 0; line-height: 53px; color: #33434e; text-decoration: underline; background: url("http://img.imbc.com/broad/tv/drama/hwajung/img/icon-arrow-right.png") no-repeat right center; font-weight: normal;}
.ui-button-cast-vod 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; }
.ui-dividing-cast-slide { overflow: hidden; position: relative; width: 693px; margin: 0 0 15px; text-align: center; }
.ui-dividing-cast-slide .ui-button-prev, .ui-dividing-cast-slide .ui-button-next { display: block; position: absolute; top: 17px; width: 15px; height: 26px; padding: 0; border: 0; cursor: pointer; }
.ui-dividing-cast-slide .ui-button-prev { left: 10px; background: url("http://img.imbc.com/broad/tv/drama/hwajung/img/btn-cast-prev.png") no-repeat; }
.ui-dividing-cast-slide .ui-button-next { right: 10px; background: url("http://img.imbc.com/broad/tv/drama/hwajung/img/btn-cast-next.png") no-repeat; }
.ui-dividing-cast-slide .ui-dividing-slide { overflow: hidden; position: relative; width: 606px; margin: 0 auto; }
.ui-list-cast-slide { overflow: hidden; position: relative;  width: 2000px; }
.ui-list-cast-slide .item, .ui-list-cast-slide .item-first { overflow: hidden; position: relative; float: left; width: 150px; height: 60px; margin: 0 0 0 -1px; border: 1px solid #e3e3e3; }
.ui-list-cast-slide .item-first { margin: 0;}
.ui-list-cast-slide .item a, .ui-list-cast-slide .item-first a { display: table-cell; width: 150px; height: 60px; color: #333; vertical-align: middle; text-align: center; *padding-top:20px;}
.ui-list-cast-slide li.active { z-index: 20; border: 1px solid #898989; }
.ui-list-cast-slide li.active a { text-decoration: underline; }
.visual {position: absolute;; height: 580px; overflow: hidden; z-index: 10; left: 50%; top: 0; margin-left: -960px; width: 1920px; }
.box-visual {position: relative;height: 580px;overflow: hidden;z-index: 100;width: 1920px;left: 50%;margin-left: -960px;}

.roll-ban-event { position: absolute; top: 0; left: 0; height: 580px;  width: 100%; z-index: -1; }