@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; }
.wrapper {min-width:1024px;font-family:'Nanum Gothic','나눔 고딕',dotum,'돋움';}
.btn-like-program-wrap {display:inline-block;position:absolute;top:12px;right:50%;z-index:100;margin-right:-505px;}

.ellipsis{
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp:2; /* 라인수 */
 -webkit-box-orient: vertical;
 word-wrap:break-word; 
} 

/*main */
.visual-top {position:relative;overflow:hidden;width:1024px;margin:10px auto 0;height:580px;background:url(http://img.imbc.com/broad/tv/ent/borgmom/images/main_top_v2.jpg) no-repeat 50% 0;}
.visual-top .ent_info{overflow:hidden;position:relative;width:473px;margin:480px 0 0 33px;}
.visual-top .tit-logo {float:left;width:73px;margin-right:20px;}
.visual-top .ent_about{margin-top:10px;float:right;width:380px;line-height: 28px;text-align:left;}
.visual-top h2{color:#000; font-size:20px; font-weight:bold;}
.broad-info {color:#000;left:50%;z-index:100;font-weight:600;font-size:12px;}
.broad-info li {float:left;margin-right:12px;padding-left:10px;height:45px;line-height:45px;background:url(http://img.imbc.com/broad/tv/drama/include/img/bg-bar-ver1.png) no-repeat 0 center;}
.broad-info li.first-item {padding-left:2px;background:none;}
.broad-info li span {padding-left:5px;}
.btn-like-program-wrap {display:inline-block;position:absolute;top:36px;right:50%;z-index:100;margin-right:-505px;}

/*main */
.sub .visual-top {position:relative;overflow:hidden;width:1024px;margin:10px auto 0;height:138px;background:url(http://img.imbc.com/broad/tv/ent/borgmom/images/sub_top_v2.jpg) no-repeat 50% 0;}
.sub .visual-top .ent_info{margin: 32px 0 0 58px}
.btn-like-program-wrap {display:inline-block;position:absolute;top:36px;right:50%;z-index:100;margin-right:-505px;}

/* program style */
.nav ul li a {background:url(http://img.imbc.com/broad/tv/drama/fip/img/vertical_bar_01.png) no-repeat left center;}

/*nav*/
.nav {margin: 0 auto;position: relative;height: 94px;font-size:15px;line-height:45px;letter-spacing:-.5px}
.nav ul {position: relative;height:45px;text-align: center;margin-top:12px;border-bottom:1px solid #ccc;}
.nav li {display: inline-block;*display: inline;position: relative;height: 94px;text-align: center;vertical-align: top;}
.nav li .item{display: inline-block;*display: inline;position: relative;height: 45px;vertical-align: top;color:#000;margin: 0 15px;}
.nav li .item:hover{color:#f43084;font-weight:bold; border-bottom:3px solid #f43084;}
.nav li .item.active{color:#f43084;font-weight:bold; border-bottom:3px solid #f43084;}
.nav li .dropdown {width:400px;z-index:50;position: absolute;left: -120px;top: 42px;padding: 5px 0;}
.nav li .program_dropdown {width:700px;left: -440px}
.nav li .event_dropdown {width: 400px;left: -180px;}
.nav li .dropdown a {display:inline-block;*display: inline;text-align: center;color: #000;font-family: 'Nanum Gothic', "나눔고딕";font-size: 15px;line-height:30px;margin-right:14px;}
.nav li .dropdown a:hover {font-weight:bold;color: #135882;	text-decoration: underline;border:0;font-weight:normal;}
.nav .hidden {display: none;}

/*floating banner*/
.flt_ban{position: absolute;top:0;left:0;z-index: 100}
.flt_ban .banner{height:271px;}
.flt_ban .btn-close{position:absolute;top:0; left:213px;z-index:200;cursor:pointer;}
.content .section{width:1024px; margin:0 auto;overflow:hidden;}

/*section1*/
.section1{overflow: hidden;position:relative;}
.section1 .whatsnew{position:relative;float:left;width:198px; height:215px;padding:27px 20px;border:1px solid #db1469;background:#f43084;text-align:left;}
.section1 .wrap-article {float:right;text-align:left;position:relative;width:784px;height:300px;background-color:#fff;}
.section1 .article-multi li:first-child p.title{border-top:1px solid #ccc;}
.section1 .article-multi li:last-child p.title{border-bottom:1px solid #ccc;}
.section1 .article-multi .img {display:none;position:absolute;right:312px;top:-1px;width:472px; height:272px; overflow: hidden;}
.section1 .article-multi .img img{width:482px;}
.section1 .article-multi .txt {color:#fff;display:none;position:absolute;right:805px;top:60px;width:198px; height:190px; overflow: hidden;font-size:20px; font-weight: bold;line-height:28px;}
.section1 .article-multi .txt span{position:absolute; bottom:0;display:block;font-size:12px;font-weight: normal}
.section1 .article-multi .title {position:relative;width:258px; padding:16.5px 20px;margin-left:484px;color:#424242;font-size:12px;letter-spacing:-.5px;border-left:1px solid #ccc;border-right:1px solid #ccc;}
.section1 .article-multi .svod .title {border-bottom:none;}
.section1 .article-multi .over .img {display:block;}
.section1 .article-multi .over .txt {display:block;}
.section1 .article-multi .over .bg-arr {display: block;}
.section1 .article-multi li.over p.title {color:#f43084;border:1px solid #f43084;border-left:0;width:259px;}

.section1 .article-multi .bg-arr {display:none;position:absolute; z-index:10;top:0;left:-8px;width:9px; height:45px; background:url(http://img.imbc.com/broad/tv/ent/borgmom/images/br-arr.jpg);}

/*section2 - 화제의 1분 */
.section2 {float:left;width:714px;text-align:left;margin-bottom:48px; } 
.section2 h2{width:228px;color:#eb0868; font-size:13px; font-weight: bold;line-height:33px;} 
.section2 h2 span{color:#959595;}
.section2 .clip-wrap{position: relative;}
.section2 .clip{width:714px; height:452px;overflow: hidden;margin-bottom:25px;}
.section2 .clip ul { overflow:hidden; height:456px; }
.section2 .clip ul li{position:relative;float:left;margin:0 12px 12px 0;width:228px; height: 214px; border:1px solid #dcdcdc;}
.section2 .clip ul li:nth-child(3n){margin-right:0;}
.section2 .clip a {line-height:20px; font-weight:bold; font-size:14px; letter-spacing:-.5px; color:#424242; font-weight:bold;}
.section2 .clip .img {position:relative; display:block; width:100%; height:128px; margin-bottom:7px; overflow:hidden;}
.section2 .clip .img img{width:228px;}
.section2 .clip .txt {padding:3px 15px;display:block;font-size:14px;text-align:left;color:#424242;font-weight: normal;}
.section2 .clip 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;}

.section2 .replay-wrap{overflow: hidden}
.section2 .box-wrap{float:left;}
.section2 .box-wrap:first-child{margin-right:12px;}
.section2 .photo_box{overflow:hidden;}
.section2 .photo_box .rect:first-child{margin-right:12px;}

.rect-wrap{position: relative;overflow: hidden}
.rect{float:left;position:relative;width:228px; height: 214px; border:1px solid #dcdcdc;}
.rect a {line-height:20px; font-weight:bold; font-size:14px; letter-spacing:-.5px; color:#424242; font-weight:bold;}
.rect .img {position:relative; display:block; width:100%; height:128px; margin-bottom:7px; overflow:hidden;}
.rect .img img{width:228px;}
.rect .txt {padding:3px 15px;display:block;font-size:14px;text-align:left;color:#03073f;font-weight: normal;}
.rect img.ico-m-play {width:30px; height:30px;position:absolute; bottom:10px; right:10px; width:auto; height:auto; z-index:10;}

.section2 .num{color:#818181; font-size:11px;letter-spacing:5px;line-height:28px;}
.section2 .num strong{color:#f02f80;}
.section2 .paging{position:absolute;top:0px; right:0;}


.section3 h2{width:228px;color:#eb0868; font-size:13px; font-weight: bold;line-height:33px;text-align:left;}
.section3 h2 span{color:#959595;}
.section3 {float:right; width:250px; }
.section3 .box-wrap{overflow:hidden;margin-top:32px;}
.section3 .box-wrap .rect{width:248px;}
.section3 .box-wrap .rect .img img{width:100%;}
.section3 .box-wrap .rect img.ico-m-play {width:30px;}
.section3 .banner{margin-top:10px;position: relative;}
.section3 .banner a{display:block; margin-bottom:12px;}
.section3 .banner .txt{width:250px;position:absolute;top:0; left:0; text-align: center;font-size:16px;font-weight:bold;color:#000; text-indent:-9999px; }

/* 메인 예고 영상 */

.section-preview { margin-bottom:50px; overflow:hidden; display:none; }
.section-preview h2{ text-align:left; color:#eb0868; font-size:13px; font-weight: bold; line-height:33px;}
.section-preview h2 span{color:#959595;}
.section-preview .ad-wrap { float:right; }
.teaser { float:left; }
.banner-teaser { margin-top:10px; }


/*-------- 서브페이지 ------------*/
/*서브페이지 공통*/
.sub .content h2.tit-content { color:#000; padding-left:50px; background:#fceef7 url(http://img.imbc.com/broad/tv/ent/livingwith/img/sub-title.png) 28px no-repeat; border:1px solid #fbe1f2; margin-bottom: 15px;line-height: 44px;font-size:15px;font-weight:bold;}
.sub .content h2.tit-content span{color:#7e7e7b; font-size:15px;font-weight:normal;}
.sub .content { width:1024px; *width:1024px;margin: 0 auto; padding-bottom:30px;background: #fff; text-align: left; overflow: hidden;}
.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;}

/* 등장인물 - 상세페이지 */
.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: #f2f5f5; border-top: 2px solid #e0e8e8; font-size: 14px; font-weight: bold; color: #737270; line-height: 53px; float: left; width:380px}
.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 {margin: 0 0 16px; padding: 20px 25px; line-height: 1.5; border-bottom: 2px solid #e0e8e8; width: 350px; height: auto; *height: auto; float: left; }
.ui-dividing-cast-main .description .meta { margin-bottom: 15px; font-weight: bold;}
.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: #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 { font-weight:bold; margin: 0 0 15px; font-size: 14px; color: #444;}
.ui-list-cast-side .item .header .extra { font-weight:normal; 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 { color: #44403e; line-height: 18px; }
.ui-list-cast-side .item .description { margin: 0 0 15px; color: #44403e; line-height: 1.5; }
.ui-dividing-cast-slide { overflow: hidden; position: relative; margin: 0 0 15px; text-align: center; }
.ui-dividing-cast-slide .ui-button-prev, .ui-dividing-cast-slide .ui-button-next { display: none;/*주요인물만있어서 버튼 none*/ 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: 725px; margin: 0 auto; }
.ui-list-cast-slide { overflow: hidden; position: relative;width:725px;}
.ui-list-cast-slide ul li { margin-bottom:10px; margin-left:6px; overflow: hidden; position: relative; float: left; border: 1px solid #e3e3e3; box-sizing:border-box;}
.ui-list-cast-slide li.item-first { margin:0; }
.ui-list-cast-slide .item a, .ui-list-cast-slide .item-first a {height:76px;width:138px;display: table-cell; color: #333; vertical-align: middle; text-align: center; }
.ui-list-cast-slide li.active { z-index: 20; border: 1px solid #f43084 ; }
.ui-list-cast-slide li:hover { z-index: 20; border: 1px solid #f43084 ; }
.ui-list-cast-slide li.active a { font-weight:bold; color:#f43084 ; text-decoration: underline; }
.ui-list-cast-slide li:hover a { font-weight:bold; color:#f43084 ; 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: 640px;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; }

/*제작진소개*/
.staff-name {width:667px;margin-top:14px;padding:40px 0 40px 56px;border: 1px solid #ffc4e9;overflow: hidden;}
.staff-name ul li {line-height: 30px}
.staff-name ul li.first-child {padding-top:0}
.staff-name ul li strong{width:133px;float:left;color:#e21298;font-weight:bold;font-size:14px;letter-spacing:-0.055em;}
.staff-name ul li span {display:block;float:left;width:165px;color:#000;font-size:14px;letter-spacing:-0.055em;}
.staff-name .left-staff-name, .staff-name .right-staff-name{float: left;width:300px;}
.staff-name .right-staff-name{margin-left:30px}
.staff-name strong.line-2{margin-bottom:26px;}
.staff-name span.line-2{width:142px;display:block;position:absolute;right:-9px;top:80px;line-height:25px;}

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