@import url(http://font.imbc.com/nanumgothic/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:'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:148px;background:url(http://img.imbc.com/broad/tv/drama/hormone/images/main-bg.jpg) no-repeat 50% 0}
.visual-top .ent_info{overflow:hidden;position:relative;width:473px;margin:43px 0 0 40px}
.visual-top .tit-logo {float:left;width:73px;margin-right:20px;}
.visual-top .ent_about{margin-top:6px;float:right;width:380px;line-height: 28px;text-align:left;}
.visual-top h2{margin-bottom:5px;color:#ffffff; font-size:22px; font-weight:bold;letter-spacing:-0.1em;}
.broad-info {color:#cad4ea;font-size:12px;letter-spacing:-0.05em;line-height: 1.6}
.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;}
.visual-top .btn-like-program-wrap {display:inline-block;position:absolute;z-index:200; right:20px; top:42px;}

/* main top visual  */
.main.visual-top { overflow:hidden; width:1024px; margin:10px auto 30px; height:auto;position:relative;}  
.main.visual-top .ent_info { overflow:hidden; position:absolute; bottom:57px; left:0; z-index: 200; }
.main.visual-top h2{color:#000; font-size:22px; font-weight:bold;letter-spacing:-0.1em;}
.main.visual-top .broad-info {color:#000;font-size:12px;letter-spacing:-0.05em}
.main.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; }
.visual-txt-box  {  }
.btn-preview{ position:absolute; top:23px;right: 15px;cursor:pointer;}

/*sub top visual*/
.sub .visual-top { margin:0 auto; position:relative;overflow:hidden;height:148px;background:url(http://img.imbc.com/broad/tv/drama/hormone/images/main-bg.jpg) no-repeat 50% 0}
.sub .visual-top .broad-info-wrap { position:static; }
.sub .visual-top .broad-info-wrap .tit-logo { position:absolute; margin-left:-475px;top:43px;left:50%;z-index:100;}
.sub .visual-top .broad-info-wrap .bg-logo { position:absolute; margin-left:19px; bottom:3px; left:50%; z-index:100; }
.sub .visual-top .broad-info-wrap .broad_about h2 { margin:0;  position: absolute;left:50%;margin-left:-385px;top:60px;color:#fff; font-size:20px; font-weight:bold;} 
.sub .visual-top .broad-info-wrap .broad_about .broad-info { margin-top:0; margin-left:-385px; position:absolute; top:90px; left:50%; z-index:100; }
.sub .visual-top .broad-info-wrap .broad_about .broad-info li { letter-spacing:-0.5px; float:left; color:#fff; font-size:12px; color:#fff; margin-right:20px; background:url(http://img.imbc.com/broad/tv/drama/moneyflower/img/info-line.png) no-repeat 26px 0px; background-size:3px; }
.sub .visual-top .broad-info-wrap .broad_about .broad-info li strong { font-weight:normal; margin-right:10px; }
.sub .btn-like-program-wrap {display:inline-block;position:absolute;top:38px;right:50%;z-index:100;margin-right:-493px;}

/*sub preview visual-txt-box */

/* 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; height: 94px;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 15px;}
.nav li .item:hover{color:#166abf;font-weight:bold; border-bottom:3px solid #166abf;}
.nav li .item.active{color:#166abf;font-weight:bold; border-bottom:3px solid #166abf;}
.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; position:relative;}
.content .section-bottom{margin-bottom:45px; }
/*section*/
section.section .num { display:none; color:#818181; font-size:11px;letter-spacing:5px;line-height:28px;}
section.section .num strong{color:#f02f80;}
section.section .paging{position:absolute;top:0px; right:0px;}
section.section .paging a{display: block;float: left}
section.section .paging a img { width:28px; height:28px; }

.section { width:714px;text-align:left; margin-bottom:48px; overflow:hidden; }
.section h2{width:228px;height:33px;color:#010101; font-size:13px; font-weight: bold;line-height:2;} 
.section h2 span{color:#959595;}
.section .box-wrap{ width:714px; position: relative; float:left; margin-bottom:13px; }
.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.section1 { margin-bottom:31px; }

/* 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 {  } 

/* main - clip section */
.section .clip { width:714px;} 
.section .clip_box ul {  } 

.section .insta-wrap { position:absolute; top:0; right:0; }
.section .insta-wrap .insta { width:250px; height:250px; }
.section .insta-wrap .insta a { display:inline-block; width:100%; height:100%; background-color:#ff9900; }

.section .bottom-banner { position:absolute;top:263px; right:0; }
.section .bottom-banner .banner { width:250px; height:250px; }
.section .bottom-banner .banner a { display:inline-block; width:100%; height:100%; background-color:#ff9900; }

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

/* main - ad banner section */
.ad-rectangle { float:right; }
.section-preview{position:relative;overflow:hidden;text-align:left;margin-bottom: 30px}
.section-preview .left{float:left;width:714px;}
.section-preview .vod{width:384px;/*height:263px;*/float:left;}
.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 - cast slide */
.castList {position: absolute; top:0; right:0;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*/
.sub .content h2.tit-content { color:#000; padding-left:50px; background:#e6eef7 url(http://img.imbc.com/broad/tv/ent/livingwith/img/sub-title.png) 28px no-repeat; border:1px solid #d9e4ef; margin-bottom: 15px;line-height: 44px;font-size:15px;font-weight:bold;}
.sub .content h2.tit-content span{color:#777; font-size:15px;font-weight:normal;}
.sub .content { width:1024px; *width:1024px;margin: 0 auto; padding-bottom:50px;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;}

/* board */
.recommend-banner { margin-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;width:181px; 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 #7d5b75; }
.ui-list-cast-slide ul li.active a { color:#7d5b75; 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 #7d5b75; }
.ui-list-cast-slide ul li:hover a { color:#7d5b75; text-decoration: underline; font-weight:bold; }
.ui-list-cast-slide ul.main-cast li:hover { border:1px solid #7d5b75; }
.ui-list-cast-slide ul.main-cast li.active { border:1px solid #7d5b75; }

.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 .image img{width:100%;}
.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-main .description .meta p{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 { 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 {font-weight:bold;color: #44403e; line-height: 1.5; }

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

/* 力累惯钎雀 */
.live { margin-bottom:30px; padding-top:638px; height:1289px; box-sizing:border-box; background:#243a56 url(http://img.imbc.com/broad/tv/drama/hormone/images/live-bg-v2.jpg) no-repeat center top; }
.live .live-info { margin-bottom:35px; }
.live .live-info span { line-height:28px; display:block; text-align:center; font-size:18px; color:#01deff; }
.live .live-info span.live-text { font-size:21px; color:#fff; line-height:40px; }
.live .live-vod { text-align:center; margin-bottom:135px; }
.live .btn-area { box-sizing:border-box; }
.live .btn-area ul { width:520px; margin:0 auto; overflow:hidden; }
.live .btn-area ul li { float:right; }
.live .btn-area ul li:first-child { float:left; margin-right:30px; }
.live .btn-area ul li a { display:block; }
.live-boardtxt { margin-bottom:30px; background:#243a56; color:#fff; text-align:center; padding:24px 0; letter-spacing:-1px; font-size:16px; }

/**/
#rptView_ctl00_tblAdamMedia { text-align:center; }