.pc{ display:block; } .wap{ display: none; } body .myskin{ background:transparent; box-shadow: 0 0 0 rgba(0,0,0,0); } body .skin{ background:transparent; box-shadow: 0 0 0 rgba(0,0,0,0); top:0.75rem !important; } .swiper-pagination{ text-align: right !important; } .swiper-slide img{ width:100%; } #contents .swiperCon{ position: relative; } #contents .swiperCon .swiperBox{ width:400px; height:100%; position: absolute; right:0; top:0; z-index: 9; background:rgba(47,60,67,0.7); padding:30px 40px; box-sizing: border-box; color:#fff; } #contents .swiperCon .swiperBox h1{ font-size: 24px; border-bottom: 1px solid #ccc; padding-bottom: 20px; } #contents .swiperCon .swiperBox h1 > span > img{ vertical-align: middle; padding-right: 10px; } #contents .swiperCon .swiperBox li{ padding:8px 0; color:#969899; cursor: pointer; } #contents .swiperCon .swiperBox li p:nth-child(2){ font-size: 16px; } #contents .swiperCon .swiperBox li a { text-decoration: none; } #contents .swiperCon .swiperBox li a:hover p { color:#d9f3f3; } #contents .swiperCon .swiperBox li .arrow > img{ vertical-align: middle; padding-left: 10px; } #contents .videoBox .videoCon{ width:1200px; margin:50px auto; position: relative; } #contents .videoChoose{ float:left; } #contents .videoChoose li{ float:left; padding:5px 35px; background:#f8f8f8; border-radius: 15px; margin:0 5px; color:#909090; cursor: pointer; } #contents .videoChoose li:hover{ background:#d9f3f3; } #contents .videoChoose li.on{ background:#00aab2; color:#fff; } #contents .videoBox .videoCon .videoTit{ font-size: 22px; font-weight: bold; float:left; padding-right:20px; } #contents .videoBox .videoCon .videoTit span > img{ margin-right: 10px; } #contents #second-swiper .floatBox{ margin:30px 0; } #contents #second-swiper .floatBox .videoLf{ width:50%; float:left; cursor: pointer; box-sizing: border-box; padding:0 18px 0 12px; position: relative; } #contents #second-swiper .floatBox .videoLf > img{ width:100%; border-radius:7px; } #contents #second-swiper .floatBox .videoLf .blockShad{ position: absolute; bottom:0; background: rgb(0,0,0,0.5); color:#fff;padding:10px 0; } #contents #second-swiper .floatBox .videoLf .blockShad p{ padding-left: 20px; } #contents #second-swiper .floatBox .videoLf .blockShad p.day { font-size: 85%; } #contents #second-swiper .floatBox .videoRt{ width:50%; float:right; } #contents #second-swiper .floatBox .videoRt li{ width:32.5%; float:left; padding:0 10px; box-sizing: border-box; cursor: pointer; } #contents #second-swiper .floatBox .videoRt li:nth-child(1), #contents #second-swiper .floatBox .videoRt li:nth-child(2), #contents #second-swiper .floatBox .videoRt li:nth-child(3) { padding:0 10px 23px 10px; } #contents #second-swiper .floatBox .videoRt li > a > img{ width:100%; margin-bottom: 10px; } #contents .swiper-container .floatBox li > a > img{ border-radius:5px; } #contents #second-swiper .floatBox .videoRt li > p, #contents .floatList li > p{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #contents #second-swiper .floatBox .videoRt li > p.day { font-size: 85%; color: #999; } #contents .videoCon li > p:nth-child(3){ font-size: 85%; color: #999; } #contents .swiper-pagination.swiper-pagination-fraction{ width:auto; position: absolute; top:0; text-align: right; right:20px; left:unset; bottom:unset; z-index: 0; } .videoCon .videotitCon span.videoSub{ vertical-align: sub; color:#a3a3a3; } #contents .floatList{ margin:20px 0; } #contents .floatList li{ width:16%; float:left; padding:15px 10px; box-sizing: border-box; margin:0 3px; cursor: pointer; } #contents .floatList li > a > img{ width:100%; margin-bottom: 10px; } .swiper-button-next, .swiper-button-prev{ width:10px !important; height:18px !important; top:0 !important; background-size: 100% 100% !important; } .swiper-button-next{ background-image: url(../../images/swiper_arrow02.png) !important; right:0px !important; } .swiper-button-prev{ right:60px !important; left:auto !important; background-image: url(../../images/swiper_arrow01.png) !important; } .block{ height:420px; } @media (max-width: 768px){ .pc{ display: none; } .wap{ display: block; } .block{ height:25vh; } .swiper-pagination-bullet-active{ background:#00b1b2 !important; } #contents #second-swiper .floatBox .videoLf > img{ width:100%; border-radius:0px; } #contents .swiper-container .floatBox li > img{ border-radius:0px; } #contents .videoChoose{ width:100%; padding:20px 0; background:#333f48; } #contents .videoChoose li{ width:47%; padding:5px 0; text-align:center; margin:5px; } #contents .videoBox .videoCon .videoTit{ margin-left: 10px; } #contents .videotitCon span > img{ width:auto; } #contents .videoBox .videoCon{ width:100%; } #contents .videoBox .videoList{ } #contents .videoBox .videoList ul{ display: flex; flex-wrap: wrap; } #contents .videoBox .videoCon01 .videoList li:nth-child(1){ width:100%; } #contents .videoBox .videoList li{ width:50%; float:left; box-sizing: border-box; padding:10px 0; } #contents .videoBox .videoList li:nth-child(2n){ padding-left:5px; } #contents .videoBox .videoList li:nth-child(2n+1){ padding-right:5px; } #contents .videoBox .videoList.fristList li{ width:50%; float:left; box-sizing: border-box; padding:10px 0; } #contents .videoBox .videoList.fristList li:nth-child(2n+1){ padding-left:5px; } #contents .videoBox .videoList.fristList li:nth-child(2n){ padding-right:5px; } #contents .videoBox .videoList.fristList li:nth-child(1){ padding:10px 0px; } #contents .videoBox .videoList li p{ margin: 0 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #contents .videoBox .videoList li > a > img{ width:100%; margin-bottom: 10px; } #contents .videoBox .videoList li.flod-list{ display: none; } #contents .videoBox .videoList .moreBtn{ margin:20px auto; color:#00b1b2; text-align:center; font-size: 16px; } #contents .videoBox .videoList .moreBtn span{ padding:10px 80px; text-align:center; background:#ebebeb; border-radius: 15px; } }