@charset "euc-kr";

/* common */
legend {position:absolute; right:-999em; top:-999em; zoom:1; font:0/0;}
/* button style */
*.button {display:inline-block; position:relative; border:none; border-radius:none; white-space:nowrap; vertical-align:middle; cursor:pointer; background-color:transparent;}
input.button,
button.button {border-radius:0;-webkit-appearance:none}

/* layout */
.footer {clear:both; padding:20px 0; color:#252d2d; text-align:center;}
.container {width:1024px; margin:0 auto;}
.container a:hover, .container a:focus {text-decoration:underline;}
.nav {}
.ui-main .nav {position:relative; z-index:10;}
.ui-sub .nav {position:static;}
.nav ul {overflow:hidden; height:57px; text-align:center;}
.nav li {display:inline-block; *display:inline; background:url('http://img.imbc.com/broad/tv/drama/dfamily/images/bg_nav_bar.gif') no-repeat 0 19px;}
.nav a {display:block; *display:inline; *height:100%; line-height:53px; padding:0 12px; font-size:14px; letter-spacing:-1px; color:#231617; font-weight:bold;}
.nav a:hover {text-decoration:underline;}
.nav .nav-popular-vod {background:none;}
.p-info {position:relative; line-height:1; padding:17px 0 0 19px; font-family:'Nanum Gothic'; color:#000; font-size:12px; z-index:10;}
.p-info strong {font-weight:normal;}

.logo-area {position:relative;}
.logo-area ul {position:absolute; overflow:hidden; left:0px; top:15px;}
.logo-area li {float:left; padding:0 3px 0 0; font-size:11px; letter-spacing:-1px; color:#010101; line-height:18px;}
.logo-area .first {background:none;}
.logo-area.logo-main ul {left:30px; z-index:100;}
.logo-area.logo-main li {color:#fff;}

/* main */
.btn-like-program-wrap {position:absolute; top:15px; left:50%; margin-left:330px; z-index:100;}
.ui-main {overflow-x:hidden; background:#f1f1f1 url('http://img.imbc.com/broad/tv/drama/dfamily/images/bg_m.jpg') no-repeat 50% 120px;}
.ui-main .wrapper {background: url('http://img.imbc.com/broad/tv/drama/dfamily/images/bg_m2.png') no-repeat 50% 1550px;}
.ui-main article {position:relative;}
.ui-main .container {position:relative; text-align:left;}
.ui-main .bottom {clear:both; width:100%; height:230px; background-color:#f8dfdc;}
.ui-main .bottom .inner {width:965px; margin:0 auto;}
.ui-main .bottom .inner div {float:left; margin-top:28px; padding-left:32px; width:465px;}
.ui-main .bottom .inner div:first-child {padding:0;}
.ui-main .bottom h3 {font-size:12px; margin-bottom:15px; color:#1f3037;}
.ui-main .bottom ul {width:120%; overflow:hidden;}
.ui-main .bottom li {float:left; width:254px;}
.ui-main .bottom a {color:#404951; font-size:12px; line-height:21px;}
.ui-main .bottom a:hover, .ui-main .bottom a:focus {text-decoration:underline;}
.ui-main .bottom .bottom-menu {overflow:hidden; height:175px; border-right:1px solid #e4cfcd;}
.ui-main .bottom .bottom-menu ul {margin-left:-34px;}
.ui-main .bottom .bottom-menu li {width:235px; padding-left:32px; border-left:1px solid #e4cfcd;}
.ui-main .bottom .bottom-drama ul {margin-left:-33px;}
.ui-main .bottom .bottom-drama li {width:235px; padding-left:32px; border-left:1px solid #e4cfcd;}
.ui-main .p-info {padding:22px 0 0 18px; color:#f6ebe8;}
.ui-main .p-info .bar {color:#958b88;}
.logo-main {width:100%; height:609px;}
.btn-front {position:absolute; overflow:hidden; right:9px; bottom:24px; padding:0; border:0; display:block; z-index:200; width:35px; height:32px;text-indent:100%; white-space:nowrap; cursor:pointer; background-image: url('http://img.imbc.com/broad/tv/drama/dfamily/images/btn_roll_play.png'); background-repeat:no-repeat; background-color:transparent;}
.logo-main .btn-play {background-position:0 100%;}
.logo-main .btn-stop {background-position:0 0;}
.roll-ban-event {position:absolute; top:9px; left:2px; z-index:0;}
.roll-ban-event img {position:absolute; top:0; left:0; z-index:0; opacity:0; filter:alpha(opacity=0);}
.roll-ban-event img:first-child {opacity:1; filter:alpha(opacity=100);}
.roll-controll-btn {position:absolute; bottom:30px; left:50%; width:100px; margin-left:-50px; text-align:center; z-index:100;}
.roll-controll-btn .btn {display:inline-block; width:23px; height:14px; padding:0; margin:0; border:0; background: url('http://img.imbc.com/broad/tv/drama/dfamily/images/btn_roll_off.png') no-repeat 50% 50%; cursor:pointer;}
.roll-controll-btn .btn.on {width:30px; height:14px; background:url('http://img.imbc.com/broad/tv/drama/dfamily/images/btn_roll_on.png') no-repeat 50% 50%;}

.content-main {position:relative; margin-bottom:10px; padding:16px 30px 17px; overflow:hidden; background-color:#fff; /*min-height:495px;*/}
.content-main h2 {height:29px; margin-bottom:10px; font-size:12px; line-height:29px; color:#333; font-weight:normal; text-indent:10px; background:#eee;}
.content-main h2 a {color:inherit;}

.content-main .preview {position:relative; float:left; overflow:hidden; width:224px; height:185px; margin:0 16px 22px 0; background-color:#eee;}
.content-main .preview strong {display:block; margin-bottom:10px;}
.content-main .preview a {display:block; padding:19px 16px;}
.content-main .preview .txt {padding:11px 17px 0; line-height:17px; color:#424242;}
.content-main .preview .img {position:relative; overflow:hidden; width:224px; height:130px;}
.content-main .preview .img img:first-child {width:100%; height:100%;}
.content-main .ico-m-play {position:absolute; bottom:10px; right:10px; width:auto; height:auto; z-index:10;}

.content-main .news {float:left; position:relative; overflow:hidden; width:698px; height:263px; margin-right:16px; margin-bottom:10px;}
.content-main .news ul {overflow:hidden; height:212px;}
.content-main .news li {width:224px; height:29px; overflow:hidden; border-bottom:1px solid #e5e5e5;}
.content-main .news li a {display:block; width:100%; text-indent:7px; font-size:11px; letter-spacing:-1px; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:29px; background:url('http://img.imbc.com/broad/tv/drama/kmhm/images/ico-list-square.gif') no-repeat left 14px;}
.content-main .news .news-thumb {float:left; width:225px; height:210px; margin-right:14px; border-bottom:0 none;}
.content-main .news .news-thumb:first-child {margin-right:8px;}
.content-main .news .news-thumb .img {display:block; width:100%; height:159px; margin-bottom:10px; overflow:hidden;}
.content-main .news .news-thumb a {line-height:1; text-indent:0;}
.content-main .news .news-thumb .img img {width:100%;}
.content-main .news .news-thumb .txt {display:inline; text-overflow:clip; white-space:normal; line-height:18px; font-size:12px; letter-spacing:-1px; color:#333;}

.content-main .photo, .content-main .sketch {position:relative; float:left; overflow:hidden; width:224px; height:199px; margin-bottom:22px;}
.content-main .photo {margin-right:8px;}
.content-main .photo h2, .content-main .sketch h2 {margin-bottom:10px;}
.content-main .photo ul, .content-main .sketch ul {overflow:hidden;}
.content-main .photo a, .content-main .sketch a {line-height:20px; font-size:12px; letter-spacing:-1px; color:#333;}
.content-main .photo .img, .content-main .sketch .img {position:relative; display:block; width:100%; height:126px; overflow:hidden;}
.content-main .photo .img img, .content-main .sketch .img img {width:100%; height:auto; min-height:auto;}
.content-main .photo .txt, .content-main .sketch .txt {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; padding:5px 0 0; color:#333; font-size:12px; line-height:16px;}
.content-main .sketch li em {position:absolute; top:40px; left:90px; display:block; width:48px; height:48px; text-indent:-9999px; background:url('http://img.imbc.com/broad/tv/drama/dfamily/images/ico-play-m.png') no-repeat 0 0;}

.content-main .hotclip {clear:both; float:left; width:698px; margin-right:16px; overflow:hidden;}
.content-main .hotclip ul {overflow:hidden;}
.content-main .hotclip li {float:left; width:224px; margin-left:13px;}
.content-main .hotclip li:first-child {margin-left:0;}
.content-main .hotclip a {line-height:20px; font-size:12px; letter-spacing:-1px; color:#333;}
.content-main .hotclip .img {position:relative; display:block; width:100%; height:126px; overflow:hidden;}
.content-main .hotclip .img img:first-child {width:100%; height:auto; min-height:auto;}
.content-main .hotclip .txt {display:block; padding:7px 0 0; color:#333; font-size:12px; line-height:18px; letter-spacing:-1px;}

.content-main .comment {position:relative; overflow:hidden;}
.content-main .comment h2 {margin-bottom:5px;}
.content-main .comment ul {overflow:hidden;}
.content-main .comment li {height:29px; overflow:hidden; border-bottom:1px solid #e5e5e5;}
.content-main .comment li a {display:block; width:100%; text-indent:7px; font-size:11px; letter-spacing:-1px; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:29px; background:url('http://img.imbc.com/broad/tv/drama/kmhm/images/ico-list-square.gif') no-repeat left 14px;}

.content-main .quick {clear:right; overflow:hidden; width:250px; height:225px; margin-top:260px; margin-bottom:10px;}
.content-main .quick li {width:250px; height:110px; margin-bottom:5px;}
.content-main .quick li img {width:100%; height:100%;}

.content-main .ad-square {position:absolute; top:16px; right:30px;}

/* sub */
.ui-sub {text-align:center; background:#f2f3f3 url('http://img.imbc.com/broad/tv/drama/dfamily/images/bg_s_v2.jpg') no-repeat 50% 120px;}
.ui-sub .container {width:1024px; margin:0 auto;}
.logo-sub {width:100%; height:220px; text-align:left;}
.logo-sub h1 {position:absolute; top:24px; left:50%; margin-left:-133px; z-index:2;}
.logo-sub h1 a {overflow:hidden; display:block;}

.content-sub {width:964px; *width:100%; padding:30px 30px; text-align:left; overflow:hidden; background-color:#fff;}
.content-sub h2 {width:100%; margin-bottom:15px; padding-bottom:8px; border-bottom:2px solid #e2e2e2; font-size:13px; font-weight:normal;}
.content-sub h2 img {margin:-2px 0 0 2px; vertical-align:top; *margin:0 0 0 2px; vertical-align:middle;}
.sub-c-layer {position:relative; float:left; width:692px; min-height:800px; height:auto !important; *height:800px; margin-right:22px;}

/*À̺¥Æ®*/
.event-section {padding-bottom:10px; border-top:1px solid #e0e8e8; border-bottom:2px solid #e0e8e8; font-size:12px; line-height:18px; letter-spacing:-0.5px;}
.sec-common {border-bottom:2px solid #e0e8e8; }
.event-tab {margin-bottom:30px; border-top:1px solid #e0e8e8; border-bottom:1px solid #e0e8e8;}
.event-tab ul {overflow:hidden; width:100%; padding:11px 0; background:#f3f6f6; border-top:1px solid #fff; border-bottom:1px solid #fff;}
.event-tab li {float:left; padding:4px 30px; border-left:1px solid #e0e8e8; line-height:1;}
.event-tab li.none-border {border-left:0 none;}
.event-tab li a {color:#2a7171;}
.event-tab li a.tab-on {font-weight:bold;}
.event-summary {position:relative; padding-bottom:56px; width:100%; *zoom:1;}
.event-summary:after {content:""; display:block; visibility:hidden; clear:both; font-size:0; height:0; line-height:0;}
.event-summary span {float:left; display:block; margin-left:30px;}
.event-summary span img {width:196px; height:196px;}
.event-summary div {float:right; width:415px; margin:0 30px 0 21px;}
.event-summary div strong {font-size:14px; line-height:34px; font-weight:bold; color:#333;}
.event-summary div p {color:#333; font-size:12px; line-height:20px;}
.event-summary div ul {padding-top:23px;}
.event-summary div ul li {padding-left:7px; background:url('http://img.imbc.com/broad/tv/drama/springday/images/list-style01.gif') no-repeat 0 6px; font-size:12px; line-height:18px; color:#2a7171;}
.event-join {position:absolute; top:201px; left:30px; clear:both; z-index:10;}
.event-join a {display:block; width:194px; padding:9px 0; border:1px solid #ccd7d7; background:#d7e1e1; font-weight:bold; text-align:center; line-height:1; color:#333;}
.btn-eveMore {position:absolute; top:0; right:0; display:block; width:176px; padding:28px 0 25px 0; border:2px solid #d2d2d2; background:#fff url('http://img.imbc.com/broad/tv/drama/springday/images/event-go.gif') no-repeat 130px 20px; font-size:14px; font-weight:bold; color:#232323; text-indent:15px; line-height:1; letter-spacing:-0.5px;}

.event-none {padding:174px 0; font-size:14px; color:#666; text-decoration:underline; text-align:center; letter-spacing:-0.5px;}
.event-title {display:block; padding:15px 0; font-size:12px; color:#2a7171; text-indent:30px; letter-spacing:-0.5px; border-top:2px solid #e0e8e8;}
.event-top {margin-bottom:20px;}

/* µîÀåÀι° */
.cast-data {position:relative; margin-bottom:20px; border-bottom:2px solid #e5ecec;}
.cast-data .cast-main-name {height:35px; *height:54px; padding:18px 0 0 21px; background:#f2f5f5; font-weight:bold; color:#737270; font-size:14px;}
.cast-data .img {display:block; width:692px; height:250px; margin-bottom:1px; padding-bottom:9px; border-bottom:2px solid #e5ecec;}
.cast-data .img img {width:692px; height:250px;}
.cast-main-txt {padding:19px 22px; line-height:20px}
.cast-main-txt strong {display:block; margin-bottom:10px; font-size:14px; font-weight:bold;}
.cast-other {margin-top:20px;}
.cast-other dl {position:relative; min-height:150px; *height:150px; margin-bottom:15px; margin:0 40px 25px; padding:5px 0 0 215px; letter-spacing:-1px;}
.cast-other .img {position:absolute; top:0; left:0; width:200px; height:150px; background:#ebebeb;}
.cast-other .img img {width:100%; height:100%;}
.cast-other .cast-name {padding:0 0 13px; font-weight:bold; color:#44403e; font-size:14px;}
.cast-other .cast-txt {line-height:18px; color:#44403e;}
.cast-data a {display:block; position:absolute; top:280px; right:9px; width:160px; overflow:hidden; color:#3c7a72; line-height:21px;}
.cast-other .relation {display:block; margin:20px 0;padding-right:10px; width:682px; height:51px; color:#3c7a72; line-height:51px; text-align:right; background-color:#f2f5f5;}

.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; background-color:#eee;}
.ui-dividing-cast-child .item .header {height:53px; background-color:#f2f5f5; border-top:2px solid #e0e8e8; font-size:14px; font-weight:bold; color:#737270; line-height:53px; text-align:center;}
.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;}

.cast_map_wrap {overflow:hidden; position:relative; width:692px; height:1069px; background:url('http://img.imbc.com/broad/tv/drama/dfamily/images/bg_cast.jpg') no-repeat 0 0;}
.btn-cast-map {position:absolute; display:block; overflow:hidden; top:115px; width:161px; height:43px;}
.btn-cast-map:hover img, .btn-cast-map.on img {margin-top:-50px;}
.btn-cast-map.map01 {left:90px;}
.btn-cast-map.map02 {left:265px;}
.btn-cast-map.map03 {left:440px;}
.cast-map-con {display:none; margin:185px 0 0 39px; }
#cast_map01 {display:block;}

/* Á¦ÀÛ ¹ßǥȸ */
.con-live {min-height:1195px; background:url('http://img.imbc.com/broad/tv/drama/dfamily/images/bg_live.jpg') no-repeat 0 0;}
.con-live  #live-player {overflow:hidden; width:640px; height:360px; padding:716px 26px 99px;}
.con-live .btn-wrap {text-align:center; margin:0 0 50px -17px;}
.con-live .btn-wrap a {display:inline-block; margin-left:17px;}