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

/* common style */
a {color:inherit;}
button { display: inline-block; margin: 0; padding: 0; border: none;  background: none; cursor: pointer; }
body { text-align: center; }
#container{width: 100%;height: 100%;background: url('http://img.imbc.com/broad/tv/drama/fantasy2017/images/bg-pattern.jpg') repeat-y center;background-position: center -14px;}
.wrapper {min-width:1024px;font-family:'Nanum Gothic','³ª´® °íµñ',dotum,'µ¸¿ò';}
.btn-like-program-wrap {display:inline-block;position:absolute;top:10px;right:50%;z-index:100;margin-right:-502px;}

/* °øÅë */
.nav {width: 1022px;margin: -40px auto;text-align:center; background-color:#A343CC;border:1px solid #8D16C0;z-index: 500;}
.nav ul {overflow:hidden;text-align:center;height: 57px;}
.nav ul li {display:inline;height:57px;line-height:57px;text-align:center;}
.nav ul li a {font-size:18px;color:#fff;letter-spacing:-1px; background:url('http://img.imbc.com/broad/tv/drama/fantasy2017/images/nav-bar.png') no-repeat left 3px;padding-left: 15px;padding-right: 15px;}
.nav ul li.first-item a {background:none;}
.btn-like-program-wrap{z-index: 999;}

.broad-info {position:absolute; left:50%;top:19px; margin-left:-512px; z-index:10;font-size:16px;font-weight:normal;letter-spacing:-1px; color:#000;overflow: hidden;}
.broad-info p>span{padding-right: 8px;margin-right: 10px;background:url(http://img.imbc.com/broad/tv/drama/fantasy2017/images/vertical-bar.jpg) no-repeat right center;}


/* ¸ÞÀÎÆäÀÌÁö--------------------------------------------------------------------------------------------------------------------- */
.top-wrap{width: 100%;height: 290px;background: url('http://img.imbc.com/broad/tv/drama/fantasy2017/images/bg-top.jpg') no-repeat top center;}
.visual-top {position:relative;overflow:hidden;width: 1024px;height: 250px;margin: 0 auto;}
.visual-top .tit-logo-main {position:absolute;left: 50%;top: 24px;margin-left:-167.5px;} 

/* common */
.main .tit-content {padding:70px 0 38px;line-height:1;text-align:center;}

.box-title {position:relative;float:left;margin-right:12px;width:250px;height:250px;line-height:1;text-align:center;font-size:24px;letter-spacing: -1px;color:#fff;}
.box-title strong {display:block;line-height:250px;color: #fff; }
.box-title strong em{font-weight: normal}
.box-title .btn-more {position:absolute;right:22px;bottom:30px;width:25px;height:25px;line-height:0;font-size:0;color:transparent;}

.main .content-inner {overflow:hidden;margin:0 auto;width:1024px;}
.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: 203px; *width: 262px; height: 208px; *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 20px 41px 22px;width:206px;height:177px;border:1px solid #D7D7D7;letter-spacing:-1px;background:#fff;text-align: left;}
.content .article .txt .title {display:inline-block;width: 196px;margin-bottom:18px;padding-bottom:18px;padding-left: 4px;line-height:24px;border-bottom:1px solid #ccc;font-size:20px;color:#000;text-align: left;letter-spacing: -1px;}
.content .article .txt .summary {overflow:hidden;width: 203px;padding-left: 3px;max-height:60px;line-height:20px;font-size:14px;color:#606060;}
.content .article .txt .date {position:absolute;left:25px;bottom:26px;line-height:1.4;font-size:14px;color:#606060;}

.article.list-last:last-child .txt {position:relative;float:left;padding:30px 26px 38px 28px;width:206px;height:180px;border:1px solid #D7D7D7;letter-spacing:-1px;background:#fff;text-align: left;}
.article.list-last:last-child .txt .title {display:inline-block;width: 196px;margin-bottom:18px;padding-bottom:18px;padding-left: 4px;line-height:24px;border-bottom:1px solid #ccc;font-size:20px;color:#000;text-align: left;letter-spacing: -1px;}
.article.list-last:last-child .txt .summary {overflow:hidden;width: 203px;padding-left: 3px;max-height:60px;line-height:20px;font-size:14px;color:#606060;}
.article.list-last:last-child .txt .date {position:absolute;left:31px;bottom:26px;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 left center; display: inline-block; width: 15px; height: 23px; position: absolute; top: 50%;margin-top: -11.5px; left: -15px; z-index: 200;}

.ad { position:absolute;right:0;top: 0; }
#footer {padding:64px 0 68px;color:#000;}
#footer .l-copyright{line-height:20px! important;}

/* section1-preview*/
.content .section1 {margin-top: 80px;}
.section1 .ad-rectangle{position: absolute;right: 0;width: 250px;height: 250px;}

.visual { float: left; overflow: hidden;width: 762px;height: 491px;border:1px solid #A343CC;position: relative;z-index: 100;}
.roll-area{width: 764px;height: 493px;overflow: hidden;position: relative;text-align: center;}
.roll-area .pro {opacity:0;z-index:1;position: absolute;top: 0;left: 0;text-align: center;float:left;}
.roll-area .pro:first-child {opacity:1;}
/* .roll-area .pro img{width: 764px;height: 493px;} */
.text-layer{z-index: 200;position: absolute;bottom: 0;left: 0;width: 764px;}
.btn-wrap{position:absolute;top: 442px;left: 50%;margin-left: -55px;text-align: center;display:inline;z-index:500;}
.btn-roll-control {height: 22px;text-align: center;float:left;margin-right: 17px;}
.btn-roll-control .btn {margin-right:19px;margin-top: 6px;width:8px;height:8px;border-width:2px;border-style:solid;border-radius:50%;background-color:transparent;border-color:#fff;cursor:pointer;float:left;}
.btn-roll-control .btn.on {width: 14px;height: 14px;margin-top: 3px;background-color:#fff;}
.btn-roll-control .btn:last-child{margin-right: 0;}

.btn-front {padding: 0; border: 0; display: block; z-index: 1000; 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 -22px;float:left;}
.btn-stop { background-position: 0 0; }


/* .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; }

.preview_box { width: 250px; height: 243px;position: relative; overflow: hidden;  padding-left: 10px; margin-top: 260px; }
.preview_box .txt{ background: #fff;border:1px solid #A343CC;width: 203px; height: 184px; padding: 28px 20px 20px 25px; text-align: left; }
.preview_box .txt .broad-num { color: #A343CC; font-size: 14px;letter-spacing: -1px; }
.preview_box .txt .broad-day { color: #5e5e5e; font-size: 14px; line-height: 1; letter-spacing: -1px; padding-top: 18px;}
.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/fantasy2017/images/btn-more-p.png") no-repeat; position: absolute; bottom: 30px; right: 22px; width: 25px; height: 25px;}


/* section2-photo, sketch*/
.content .section2 .box-title { background:#9329C0;}
.content .section2 .box-title strong{color:#fff;}

.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: #fffdce; }
.cast-slider .slide-leftbtn { position: absolute; top: 199px; left: 170px; z-index: 50 }
.cast-slider .slide-rightbtn { position: absolute; top: 199px; right: 22px; z-index: 50 }
.cast-slider .slide-activebtn ul li { padding-top: 11px; }
.slide_container { position: absolute; top: 0; right: 0; }
.cast_relationship { padding-top: 23px; padding-left: 147px; }

.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; }


 /*section3 -  news*/
.section-news .box-title { background:#9329C0;box-sizing: border-box;}
.section-news .box-title strong {line-height:250px; font-weight: bold;color:#fff;letter-spacing: -1px;}
.section3 .box-title .btn-more{background:url(http://img.imbc.com/broad/tv/drama/fantasy2017/images/btn-more-w.png) no-repeat;}

.event-box{position: absolute;right: 0;width: 250px;height: 250px;}

/* section4 */
.section-clip .box-title { background: #FFE99E;box-sizing: border-box; }
.section-clip .box-title strong {line-height:250px; font-weight: bold;color:#000;letter-spacing: -1px;}
.section4 .box-title .btn-more{background:url(http://img.imbc.com/broad/tv/drama/fantasy2017/images/btn-more-b.png) no-repeat;}

.section-clip .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;opacity: 0.6;}
.section-clip .btn-prev { background-position: 0 0; left: 169px; }
.section-clip .btn-next { background-position: -43px 0; left: 210px; }
.section-clip .con-inner div { float: left; }
.section-clip .clip { width: 500px; height: 250px; overflow: hidden; margin-right: 12px; }
.clip ul { overflow: hidden;  position: absolute; left: 0; }
.clip ul li.article { display: block;  float: left;}
.con-inner .clip { float:left; position: relative; margin: 0 auto; width: 500px; overflow: hidden; margin-right: 12px; }

.event-box.ban-area{position: relative;}
.link-wrap{position: absolute;top: 97px;left: 8px;width: 234px;height: 116px;}
.link-wrap li{float:left;}
.link-wrap li a{display: block;;width: 100%;height: 100%;padding-top: 4px;}
.link-wrap li:first-child a {padding: 0;}


/* ¼­ºêÆäÀÌÁö--------------------------------------------------------------------------------------------------------------------- */
.sub .content { width: 962px; *width:1024px; margin: 38px auto; background: #fff;padding: 26px 30px 40px;border:1px solid #E5E5E5;border-top: 0;text-align: left; overflow: hidden;}

.sub .content h2.tit-content { margin-bottom: 9px; border-bottom: 2px solid #F2DCFB;line-height: 25px;}
.sub .content h2.tit-content .sub-txt{margin-left: 16px;margin-top: 1px;}
.sub .content .section-left { margin-right: 21px; width: 690px;*width:692px; float: left; }
.sub .content .section-right { float: left;}


/* ´º½º */
.sect-news { overflow-y: auto; overflow-x: hidden; min-height: 1255px; }

/* ¿¹°íº¸±â */
.preview_wrapper em{text-align:center! important;}
.preview_wrapper p{text-align:center! important;}

/* 4. µå¶ó¸¶¼Ò°³ */
.concept-area li{width: 100%;height: 248px;margin-bottom: 10px;position: relative;}
.concept-area li.star{border:1px solid #010300;}
.concept-area li.love{border:1px solid #bbc4c6;}
.concept-area li.ring{border:0;}
.concept-area li .btn-more{position:absolute;bottom: 10px;right: 10px;display: block;width: 36px;height: 36px;}

/* µå¶ó¸¶¼Ò°³ - ¿ìÁÖÀÇ º°ÀÌ */
.concept-area.division li{height: inherit;}

/*µå¶ó¸¶¼Ò°³ »ó¼¼ÆäÀÌÁö - cast*/
.sec-com { overflow: hidden; position: relative; }
.sec-com .header{font-size:14px;color:#7C0DAC;line-height: 1;letter-spacing: -1px;border-bottom: 1px solid #F2DCFB;padding-bottom: 10px;margin-top: 30px;margin-bottom: 13px;}
.sec-com .meta, .sec-com .meta>p, .sec-com .meta p>span, .sec-com .sec-detail li{font-size:12px;color:#464646;line-height: 20px;letter-spacing: -1px! important;font-family:'Nanum Gothic'! important,'³ª´® °íµñ',dotum,'µ¸¿ò';}
.sec-com.cast .item { position: relative; width: 475px; min-height: 140px; margin-bottom: 20px; padding: 10px 0 0 218px; }
.sec-com.cast .item .image { overflow: hidden; position: absolute; left: 0; top: 0; width: 200px; height: 150px; background-color: #eee;border:1px solid #E5E5E5;}
.sec-com.cast .item .image img { width: 200px; }
.sec-com.cast .item .header { margin: 0 0 19px; font-size: 14px; color: #777574; font-weight: bold;border:0;padding-bottom: 0;}
.sec-com.cast .item .header .extra { margin: 0 0 0 7px; padding: 0 0 0 7px; background: url("http://img.imbc.com/broad/tv/drama/hwajung/img/bg-cast-main.png") repeat-y left; }
.sec-com.cast .item .meta { margin: 0 0 13px; color: #44403E;line-height: 1;font-weight: bold;}
.sec-com.cast .item .description { color: #44403e; line-height: 18px; }
.staff-wrap{position: absolute;top: 20px;left: 20px;}
.staff-position{display:inline-block;font-size: 14px;float:left;}
.star .staff-position, .ring .staff-position{color:#fff;}
.love .staff-position{color:#000;}
.staff-name{padding-right: 13px;}
.star .staff-name{background: url("http://img.imbc.com/broad/tv/drama/fantasy2017/images/star-bar.jpg") no-repeat left center;padding-left: 9px;margin-left: 8px;}
.ring .staff-name{background: url("http://img.imbc.com/broad/tv/drama/fantasy2017/images/star-bar.jpg") no-repeat left center;padding-left: 8px;margin-left: 6px;}
.love .staff-name{background: url("http://img.imbc.com/broad/tv/drama/fantasy2017/images/love-bar.png") no-repeat left center;padding-left: 8px;margin-left: 6px;}

/* Á¦ÀÛÁø¼Ò°³ */
.sec-com.staff .sec-detail{position: relative;overflow: hidden;padding: 0 2px;}
.sec-com.staff .sec-detail li{line-height: 14px;}
.actor-list .ac-main{margin-bottom: 20px;}
.actor-list p{font-size:16px;color:#514557;font-weight: bold;line-height: 22px;}
.actor-list span.left{display: inline-block;width: 133px;}
.staff_left, .staff_right{display:block;line-height: 12px;float:left;}
.staff_left{width:376px;padding-left: 2px;}
.staff_right{margin-left: 10px;padding-left: 16px;}
.staff_v{font-size:11px;}
.staff_v .m-txt{font-weight:bold;width:136px;display: inline-block;}
.m-title{font-weight: bold;font-size: 16px;}
.sec-com.staff .sec-detail li.mt33{margin-top: 33px;}
.sec-com.staff .sec-detail li.mt20{margin-top: 20px;}
.sec-com.staff .sec-detail li.mt66{margin-top: 58px;}