@charset "euc-kr";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
button { display: inline-block; margin: 0; padding: 0; border: none;  background: none; cursor: pointer; }
body{ font-family: "Nanum Gothic", Dotum; font-size: 12px; } 
a{color:inherit;text-decoration: none;}

#wrap {width: 100%;min-width: 1024px;}
#container { width: 100%; overflow: hidden;background:#F2F3F3;}

.con-header {width: 100%;height: 896px;text-align: center;background: url("http://img.imbc.com/broad/tv/culture/climate/images/main-bg-v2.jpg") no-repeat center;position: relative;}
.con-header .visual-top{width: 1200px;margin: 0 auto;position: relative;}
.con-header h1 {position: absolute;left: 50%;margin-left:-253px;top: 172px;z-index: 100;}
.con-header h1 a{display: block;width: 100%;}

/*nav*/
.con-header .nav {position: absolute;width:1200px;top: 776px;height: 65px;background: url("http://img.imbc.com/broad/tv/culture/climate/images/nav-bar.png") no-repeat center;}
.nav-logo{position:absolute;left:42px;top: 16px;}
.con-header .nav ul { overflow: hidden;margin: 0 auto;}
.con-header .nav li{float:left;padding-top: 26px;padding-bottom: 22px;background: url("http://img.imbc.com/broad/tv/culture/climate/images/nav-vertical-bar.png") no-repeat right center;}
.con-header .nav li:last-child{background: none;}
.con-header .nav li.nav-main{padding-left:265px;padding-right:34px;}
.con-header .nav li.nav-content{padding-left:29px;padding-right:32px;}
.con-header .nav li.nav-media{padding-left:35px;padding-right:36px;}
.con-header .nav li.nav-clip{padding-left:30px;padding-right:35px;}
.con-header .nav li.nav-vod{padding-left:32px;padding-right:39px;}
.con-header .nav li.nav-bbs{padding-left:23px;padding-right:0px;}

.btn-like-program-wrap{position: absolute;left: 20px;top: 46px;z-index: 10;}
.sub .btn-like-program-wrap{position: absolute;left: 850px;top: 26px;z-index: 10;}


/* sub  */
.sub .con-header {width: 100%;height: 380px;text-align: center;background: url("http://img.imbc.com/broad/tv/culture/climate/images/sub-bg-v2.jpg") no-repeat center;border-bottom:1px solid #C9C9C9;}
.sub .con-header .visual-top{width: 1020px;margin: 0 auto;position: relative;}

.sub .con-header h1 {position: absolute;left: 50%;margin-left:-497px;top: 56px;}
.sub .con-header h1 a{display: block;width: 100%;}
.sub .con-header .visual-top{width: 1020px;margin: 0 auto;position: relative;}
.sub .con-header .nav {position: absolute;width:1020px;top: 275px;height: 65px;background: url("http://img.imbc.com/broad/tv/culture/climate/images/sub-nav-bar.png") no-repeat center;}
.sub .con-header .nav ul { overflow: hidden;margin: 0 auto;}
.sub .con-header .nav li{float:left;padding-top: 25px;padding-bottom: 22px;background: url("http://img.imbc.com/broad/tv/culture/climate/images/nav-vertical-bar.png") no-repeat right 25px;}
.sub .con-header .nav li:last-child{background: none;}
.sub .con-header .nav li.nav-main{padding-left:265px;padding-right:34px;}
.sub .con-header .nav li.nav-content{padding-left:29px;padding-right:32px;}
.sub .con-header .nav li.nav-media{padding-left:35px;padding-right:36px;}
.sub .con-header .nav li.nav-clip{padding-left:30px;padding-right:35px;}
.sub .con-header .nav li.nav-vod{padding-left:32px;padding-right:39px;}
.sub .con-header .nav li.nav-bbs{padding-left:23px;padding-right:0px;}


/*  main-roll*/
.roll-area{position:absolute;top: 30px;width: 1200px;height: 675px;overflow: hidden;position: relative;}
.roll-area .pro {opacity:0;z-index:1;position: absolute;top: 0;left: 0;}
.roll-area .pro:first-child {opacity:1;}
.btn-roll-control {position:absolute;left:50%;top:724px;z-index:150;}
.btn-roll-control .btn {margin-right:6px;width:10px;height:10px;border-width:1px;border-style:solid;border-radius:50%;background-color:transparent;border-color:#fff;opacity: 0.5;cursor:pointer;}
.btn-roll-control .btn.on {background-color:#fff;opacity: 0.5;}

.btn-front.btn-play{position:absolute;left:50%;margin-left:-27px;top:723px;z-index:100;width: 16px;}
.btn-play {vertical-align:middle;width:16px;height:16px;background:url(http://img.imbc.com/broad/tv/drama/include/img/ico-play.png) no-repeat;background-size: contain;opacity: 0.5;}
.btn-stop {background:url(http://img.imbc.com/broad/tv/drama/include/img/ico-pause.png) no-repeat;background-size: contain;opacity: 0.5;}

.broad-title{position: absolute;top: 554px;left: 50%;margin-left: -590px;}


/* main-media */
.media{overflow: hidden;}
.media li{float:left;margin-bottom: 10px;border:3px solid #fff;width: 394px;height: 216px;}
.media li a{display: block;width: 100%;height :100%;position: relative;}
.media li:hover {border:8px solid #fff;width: 384px;height: 206px;}
.media li:hover .media-img{width: 384px;height: 206px;}
.media li:hover .media-title{bottom: 44px;}
.media li:hover .media-detail{bottom: 21px;}
.media li:last-child{margin-bottom: 0;}
.media-img{width: 394px;height: 216px;}
.media-title{position: absolute;left:29px;bottom: 49px;font-size:16px;color:#fff;letter-spacing: -1px;font-weight: bold;}
.media-detail{position: absolute;left:29px;bottom: 26px;font-size:12px;color:#fff;letter-spacing: -1px;}


/* main-staff */
.section2{position: relative;padding-top: 15px;padding-bottom: 28px;height: 68px;}
.staff-intro{float:left;position: absolute;top: 0;left: 24px;}
.staff{float:left;position: absolute;top: 0;left: 127px;}
.staff .first{padding-right: 10px;margin-right: 10px;background: url("http://img.imbc.com/broad/tv/culture/climate/images/vertical-bar.jpg") no-repeat right center;)}
.staff .mid{padding-right: 10px;margin-right: 10px;background: url("http://img.imbc.com/broad/tv/culture/climate/images/vertical-bar.jpg") no-repeat right center;)}
.staff li{margin-bottom: 13px;}
.staff li:first-child{margin-top: 4px;}
.staff li:last-child{margin-bottom: 0;}
.staff li em{font-weight:bold;margin-right: 10px;}


/* culturelist */
.section-common {position:relative;margin:0 auto;padding-top:22px;padding-bottom:22px;width:1200px;border-top:1px solid #eee;border-bottom:1px solid #eee;text-align:right;background-color:#fff;}
.section-common .btn-culture-all {margin-right:22px;}
.culture-all {display:none;overflow:hidden;position:absolute;right:0;bottom:58px;padding:28px 22px 37px 40px;width:450px;background-color:#fff;}
.culture-all li {float:left;width:223px;line-height:28px;text-align:left;}
.culture-all .btn-list-close {position:absolute;right:20px;bottom:12px;width:18px;height:18px;line-height:0;font-size:0;color:transparent;background:url("http://img.imbc.com/broad/radio/include/img/btn-list-close.png") no-repeat 50%;}
.top_btn{width: 60px;height: 58px;background: #7e7e7e;position: absolute;bottom: 0;right: -80px;}
.top_btn img { padding-top: 15px; width: 11px; margin: 0 auto; display: block; }
.top_btn span{ display: block; width:30px; margin: 0 auto; color: #fff; padding-top: 9px;}

/*content*/
#container .con-inner{width: 1200px;margin: 0 auto;position: relative;}


/* #container-main */
.section1 h2{padding-top: 33px;padding-bottom: 23px;text-align: center;}


/*footer*/
#footer{padding:38px 0 64px 0;background: #F2F3F3;}
#footer .l-copyright{margin-bottom: 6px;}

/* sub */

.sub #container .con-wrap{ z-index: 10; width: 964px; *width: 1024px; padding: 0 30px; background-color: #fff; margin: 0 auto; overflow: hidden; text-align: center; }
.sub #container .con-wrap h2{ height: 27px; *height: 60px; padding-top: 25px; margin-bottom: 22px; border-bottom: 1px solid #ddd; text-align: left;font-size:18px;color:#363636;letter-spacing: -1px;font-family:'Nanum Gothic';}
.sub #container .con-wrap .container-left {width: 690px;overflow: hidden;float: left;}
.sub #container .con-wrap .container-right { padding-bottom: 20px; float:right;margin-left: 15px;}

/* sub-concept */
.sub #container .con-wrap .container-left.concept{padding: 24px 23px 32px 47px;width: 604px;letter-spacing: -1.5px;}
.concept p{text-align: left;font-size:16px;color:#393939;letter-spacing: -1px;}
.title-point{display:block;text-align: left;font-size:20px;color:#393939;font-weight: bold;line-height: 1;letter-spacing: 0;}
.title-point-sub{font-size:16px;color:#393939;font-weight:bold;line-height: 30px;}
.mt24{margin-top: 24px;}
.mt32{margin-top: 32px;}
.mt30{margin-top: 30px;}
.mt36{margin-top: 36px;}
.mt57{margin-top: 57px;}
.mb10{margin-bottom: 10px;}
.mb24{margin-bottom: 24px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.pl5{padding-left: 5px;}
.pl6{padding-left: 6px;}
.pl7{padding-left: 7px;}
.pl10{padding-left: 10px;}
.lh30{line-height: 30px;}

/* sub-content */
.sub #container .con-wrap.vod h2{ height: 30px;padding-top: 27px;margin-bottom: 20px;}
#tab {position: relative;height: 1400px;}
#tab ul { width: 672px;height: 34px;background:#7B7B7B;position: absolute;left: 0px;top: 0px;padding-top: 6px;padding-left: 17px;margin-left: 1px;}
#tab ul li { float:left;width: 104px;margin-right: 1px;}
#tab ul li a {padding-top: 11px;padding-bottom: 10px;display:block;background:#D8D8D8;font-size:13px;color:#363636; text-align:center; transition:all 0.5s; letter-spacing:-1px;}
#tab ul li a.on { background:#fff; color:#363636;font-weight: bold;}
#tab>div { position:absolute; top:42px; left: 0;padding-top: 55px;padding-left: 36px;background:#fff; display:none;text-align: left;letter-spacing: -1px;}
#tab>div#tab1 { display:block;}

.tab-wrap{width: 100%;overflow: hidden;}
.tab-header .tab-top{font-size:24px;color:#4a4a4a;letter-spacing: -1px;margin-left: 3px;font-weight: bold;}
.tab-header .tab-date{margin-top: 11px;margin-bottom: 16px;font-size: 16px;font-weight:bold;letter-spacing: 0;line-height: 1;color:#4a4a4a;padding-left: 3px;}
.tab-vod{width: 608px;height: 346px;margin-bottom: 36px;position: relative;}
.tab-vod.no1{background: url("http://img.imbc.com/broad/tv/culture/climate/images/broad-vod1.jpg") no-repeat center;}
.tab-vod.no2{background: url("http://img.imbc.com/broad/tv/culture/climate/images/broad-vod2.jpg") no-repeat center;}
.tab-vod.no3{background: url("http://img.imbc.com/broad/tv/culture/climate/images/broad-vod3.jpg") no-repeat center;}
.tab-vod .iframe{width: 580px;height: 318px;background:#000;position: absolute;top: 14px;left: 14px;}
.tab-title{display:block;padding-left: 7px;font-size:20px;font-weight:bold;color:#555;}
.tab-wrap p{font-size:16px;color:#555;letter-spacing: -1px;line-height: 30px;width: 640px;}