.banner { width: 100%; } .title { height: 300px; width: 100%; display: table; vertical-align: middle; text-align: center; } .title .headline { padding-top: 105px; } .headline, .subhead { margin-top: 35px; } .subhead h3 { border-right: 2px solid #000; padding: 0 23px; } .subhead { display: inline-block; } .subhead a { float: left; color: #000; } .subhead a:last-child h3{ border-right:0; } .subhead a:hover { color: red; } .line-dashed{ border-bottom:1px dashed #000000; margin-bottom:100px; } .content{ width:80%; margin:40px auto 0 auto; position:relative; overflow:hidden; margin-bottom: 100px; } .drama-poster{ margin:0 auto; width:80%; height:560px; overflow:hidden; position:relative; } .drama-poster ul{ width:10000px; } .drama-poster li{ padding:0 7px; } .show-poster-3{ width:300px; float:left; } .show-poster-3 .img{ display:block; width:300px; } .show-poster-3 img{ box-sizing: border-box; height:396px; } .show-poster-3 .title{ display:none; width:270px; height:42px; /*background:url(/css/images/bg-index-img.png) 0 0 no-repeat;*/ /*_background:url(/css/images/bg-index-img2.png) 0 0 no-repeat;*/ position:absolute; color:#fff; padding:138px 15px 0 15px; line-height:1.5; top:0; } .show-poster-3 .title:hover{ color:#fff; } .drama-poster li.current img{ display:block; border:3px solid #E64340; } .show-poster-3 .price{ font-size:15px; width:300px; height:20px; display:block; margin-top:10px; text-align:center; font-weight:bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .show-poster-3 .arrow{ display: none; position: absolute; bottom: 107px; width: 300px; height: 7px; overflow: hidden; background: url(/img/front/bg-channel-drama.png) 50% -350px no-repeat; } .current .arrow{ display:block; } .show-poster-3 p{ font-size:16px; display:none; color:#999; line-height:20px; position:absolute; width:100%; height:94px; left:0;bottom:2px; border-top:1px dashed #ccc; z-index:10px; padding-top:10px; } .show-poster-3 p strong{ font-size:20px; line-height: 36px; color:#333; font-weight:normal; text-align:center; } .drama-poster li.current p{ display:block; } .drama-slide li{ position:absolute; top:180px; } .drama-slide li.prev{ left:0; } .drama-slide li.next{ right:0; } .drama-slide li a{ display:block; width:13px; height:25px; background:url(/img/front/bg-slide.png) no-repeat; text-indent:-1000em; } .drama-slide li.prev a{ background-position:0 -122px; } .drama-slide li.prev a:hover{ background-position:0 -147px; } .drama-slide li.next a{ background-position:-13px -122px; } .drama-slide li.next a:hover{ background-position:-13px -147px; }