@charset "euc-kr";
@import url("common.css");

/* layout */
.nav.main-nav {position:relative;}
.nav.main-nav a {padding:18px 17px;}
.nav.main-nav .vod a, .nav.main-nav .board a {padding:0 20px;}
.main-content {position:relative; overflow:hidden; width:100%;}
.ui-main .visual-top h1 {width:291px; margin-left:392px;}

/* main news list*/
.tit-m-news {position:absolute; top:550px; left:539px; width:90px; height:17px; line-height:17px; padding-left:33px; background:url('http://img.imbc.com/broad/tv/drama/yaya/images/icon_main_v3.png') no-repeat 0 -80px; font-size:11px; font-weight:normal; z-index:10; color:#000;}
.main-content-list {width:1032px; position:relative; overflow:hidden; padding-top:8px;} 
.main-content-list li {float:left; width:250px; height:250px; margin:8px 8px 0 0; overflow:hidden;}
.main-content-list li.default {background-color:#fff; }
.main-content-list a {position:relative; display:block; overflow:hidden; text-align:left; background-color:#fff;}
.main-content-list a span {position:absolute; left:17px; bottom:15px; display:block; width:220px; z-index:95; font-size:14px; line-height:1.333; letter-spacing:-1px; color:#fffefe; cursor:pointer;}
.main-content-list img {width:250px;}
.main-content-list .thumnail-grid {position:absolute; left:0; bottom:0; width:auto; height:auto; z-index:90;}
.main-content-list .news-hot {position:relative; width:507px; margin:265px 0 0 516px; background-color:#f8e4ed;}
.main-content-list .news-hot a {position:relative; display:block; background:none; /*width:100%;*/ height:100%;}
.main-content-list .news-hot .txt-wrap {top:0; left:0; width:233px; height:250px; padding:0 14px 0 17px; background: url('http://img.imbc.com/broad/tv/drama/yaya/images/icon_mnews_hot.png') no-repeat 100% 23px; z-index:150;}
.main-content-list .news-hot .tit {position:static; margin-top:65px; font-size:14px; color:#000; font-weight:bold;}
.main-content-list .news-hot .summary {position:static; margin-top:20px; font-size:12px; color:#434343; line-height:18px; letter-spacing:0;}
.main-content-list .news-hot .img{position:absolute; top:0; right:0;}

/* 메인 뉴스 외 기타 아티클 */
.main-content .rec-fst, .main-content .photo, .main-content .cast, .main-content .sketch, .btn-content-more, .ad250, .main-content .board  {position:absolute; overflow:hidden; z-index:10;}
.main-content .rec-fst, .main-content .cast, .main-content .sketch, .btn-content-more, .ad250, .main-content .board {width:250px; height:250px;}
.main-content .rec-fst {top:8px; left:0;}
.main-content .preview {float:left; overflow:hidden; width:218px; height:75px; padding:23px 16px; background-color:#f5f5f5;}
.main-content .preview span {color:#696969; line-height:16px;}
.main-content .preview .date {display:block; margin-bottom:20px; font-size:15px; color:#393939; font-weight:bold;}
.main-content .preview a {color:#000;}
.main-content .event {float:left; position:relative; width:100%; overflow:hidden;}
.main-content .event li {float:left; overflow:hidden; width:122px; height:122px; margin-top:7px; background:#ddd url('http://img.imbc.com/broad/tv/drama/yaya/images/icon_main_v3.png') no-repeat 15px -182px;}
.main-content .event li:first-child {margin-right:6px;}
.main-content .event li img {width:122px; height:122px;}
.main-content .photo {top:8px; left:517px; width:249px; height:507px; background-color:#fff;}
.main-content .photo h2 {margin:24px 0 0 16px; width:70px; height:17px; line-height:17px; padding-left:33px; background:url('http://img.imbc.com/broad/tv/drama/yaya/images/icon_main_v3.png') no-repeat 0 0px; font-size:11px; font-weight:normal;}
.main-content .photo li.txt {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:211px; line-height:23px; margin:0 14px; padding-left:9px; background:url('http://img.imbc.com/broad/tv/drama/yaya/images/icon_main_v3.png') no-repeat 0 -171px;}
.main-content .photo li a {color:#686868;}
.main-content .photo li.top {line-height:0; margin-bottom:20px; padding-top:24px;}
.main-content .photo li.top .tit {display:block; overflow:hidden; height:40px; line-height:20px; margin:0 10px 20px 10px; color:#000; font-weight:bold; font-size:14px;}
.main-content .photo .img {display:block; overflow:hidden; width:250px; height:250px;}
.main-content .photo .fix-img {width:250px;}
.main-content .sketch {top:265px; left:258px; background-color:#fff;}
.main-content .sketch h2 {margin:24px 0 0 16px; width:70px; height:17px; line-height:17px; padding-left:33px; background:url('http://img.imbc.com/broad/tv/drama/yaya/images/icon_main_v3.png') no-repeat 0 -40px; font-size:11px; font-weight:normal;}
.main-content .sketch a {display:block;}
.main-content .sketch .img {width:250px;}
.main-content .sketch .tit {display:block; line-height:20px; margin:24px 23px 10px 23px; color:#000; font-weight:bold; font-size:14px;}
.main-content .sketch .icon-play {text-indent:-999px;}

.main-content .cast {top:265px; right:0;}
.main-content .cast ul {width:256px;}
.main-content .cast li {float:left; overflow:hidden; width:122px; height:122px; margin:0 6px 6px 0; background-image:url('http://img.imbc.com/broad/tv/drama/yaya/images/m_cast_thumb_v2.jpg'); background-repeat:no-repeat;}
.main-content .cast li a {display:block; padding-top:103px; text-align:center; color:#fff;}
.main-content .cast li a span {margin-left:8px; padding-left:10px; background:url('http://img.imbc.com/broad/tv/drama/yaya/images/icon_main_v3.png') no-repeat 0 -118px;}
.main-content .cast li.cast01 {background-position:0 0;}
.main-content .cast li.cast02 {background-position:-122px 0;}
.main-content .cast li.cast03 {background-position:0 -122px;}
.main-content .cast li.cast04 {background-position:-122px -122px;}

.main-content .board {top:265px; left:0; background-color:#f8e4ed;}
.main-content .board h2 {margin:24px 0 0 22px; width:70px;  height:18px; line-height:18px; padding-left:25px; background:url('http://img.imbc.com/broad/tv/drama/yaya/images/icon_main_v3.png') no-repeat 0 -309px; font-size:11px; font-weight:normal;}
.main-content .board  ul {margin:25px 15px 23px 23px;}
.main-content .board li {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:23px; padding-left:9px; background:url('http://img.imbc.com/broad/tv/drama/yaya/images/icon_main_v3.png') no-repeat 0 -171px;}
.main-content .board li a {color:#686868;}
 
.main-content .clip {position:absolute; overflow:hidden; top:525px; left:0; width:508px; height:506px; background-color:#e6e6e6; z-index:20;}
.main-content .clip h2 {margin:12px 0 11px 18px; width:70px; height:18px; line-height:18px; padding-left:25px; background:url('http://img.imbc.com/broad/tv/drama/yaya/images/icon_main_v3.png') no-repeat 0 -352px; font-size:11px; font-weight:normal;}
.main-content .clip .l-img {overflow:hidden; position:relative; display:block; height:285px; border:1px solid #252525; background-color:#fff;}
.main-content .clip .l-img .img {width:100%; height:100%;}
.main-content .clip .l-img .icon-play-l {position:absolute; top:50%; left:50%; display:block; width:82px; height:80px; margin:-41px 0 0 -40px; background:url('http://img.imbc.com/broad/tv/drama/yaya/images/icon_play_l.png') no-repeat 0 0;}
.main-content .clip .slider-wrap {overflow:hidden; position:absolute; left:0; top:338px; width:465px; height:88px; padding-left:41px;}
.main-content .clip .slider-wrap .btn {position:absolute; top:29px; width:12px; height:24px; background-repeat:no-repeat;}
.main-content .clip .slider-wrap .btn-prev {left:16px; background-image:url('http://img.imbc.com/broad/tv/drama/yaya/images/btn_prev.png');}
.main-content .clip .slider-wrap .btn-prev-off {background-image:url('http://img.imbc.com/broad/tv/drama/yaya/images/btn_prev_off.png');}
.main-content .clip .slider-wrap .btn-next {right:16px; background-image:url('http://img.imbc.com/broad/tv/drama/yaya/images/btn_next.png');}
.main-content .clip .slider-wrap .btn-next-off {background-image:url('http://img.imbc.com/broad/tv/drama/yaya/images/btn_next_off.png');}
.main-content .clip .slider {overflow:hidden; position:relative; width:424px; height:88px;}
.main-content .clip .slider ul {width:1000px; overflow:hidden; height:88px;}
.main-content .clip .slider li {float:left; position:relative; overflow:hidden; width:138px; height:88px; margin-right:5px;}
.main-content .clip .slider li a {display:block; overflow:hidden; width:136px; height:86px; border:1px solid #a2a2a2;}
.main-content .clip .slider li a .img {width:136px; height:86px;}
.main-content .clip .slider li .active {width:134px; height:84px; border:2px solid #7e0515;}
.main-content .clip .slider li .active img {margin:-1px 0 0 -1px;}
.main-content .clip .slider li .icon-play-s {display:block; position:absolute; left:7px; bottom:2px; width:28px; height:28px; cursor:pointer; background:url('http://img.imbc.com/broad/tv/drama/yaya/images/icon_play_s.png') no-repeat;}
.main-content .clip .txt-wrap {overflow:hidden; position:absolute; left:0; top:428px; width:100%;}
.main-content .clip .txt-wrap .title {display:block; overflow:hidden; padding:20px 35px 0; font-size:14px; color:#000; line-height:1.333; font-weight:bold;}
.main-content .clip .txt-wrap .title a {color:#000;}
.main-content .clip .txt-wrap .txt {padding:0 20px; color:#444; font-size:12px; line-height:1.5}



.btn-content-more {right:0; bottom:0; background:#994c86 url('http://img.imbc.com/broad/tv/drama/yaya/images/btn_more_v2.gif') no-repeat 105px 98px;}
.btn-content-more span {display:block; padding-top:59px; margin-left:5px; text-align:center; font-size:11px; letter-spacing:-0.5px; color:#fff;}
.ad250 {top:8px; right:0;}
.main-content .icon-play {display:block; position:absolute; bottom:10px; left:12px; width:36px; height:36px; background:url('http://img.imbc.com/broad/tv/drama/yaya/images/icon_play.png') no-repeat 0 0; z-index:99;}

.main-nav-bottom {width:100%; height:250px; margin-top:8px; overflow:hidden;}
.main-nav-bottom a {font-size:12px; letter-spacing:-1px; line-height:1.333; color:#2b2b2b;}
.main-nav-bottom a:hover {text-decoration:underline;}
.main-nav-bottom nav {float:left; width:508px; height:100%; background:#e9e9e9; overflow:hidden;}
.main-nav-bottom ul {width:600px; padding-top:40px; overflow:hidden;}
.main-nav-bottom li {float:left; width:208px; margin:0 0 14px 49px;}
.nav-all {margin-right:8px;}
.btn-like-program-wrap{position:absolute; top:20px; right:20px; margin-left:310px; z-index:999;}