/* common */
body { background-color: #f5f5f5; }

/* banner */
.banner { padding:20px; background: url('../images/mobile-banner-video.png') no-repeat center; background-size: cover; height: 250px; display: flex;align-items: flex-end; justify-content: flex-start; color: white; position: relative;}
.banner .container { flex-direction: column;width:100%; }
.banner p { width:100%;color:#fff;font-size:32px;font-weight:bolder; }
.banner h2 {  width:100%; display: block; font-size: 24px; margin-bottom: 40px;}

/* 导航 */
.menu { width:100%;padding:10px 20px; background-color: #222;display: flex;justify-content: flex-start;}
.menu a:last-child { margin-right: 0;}
.menu a { display:inline-block;height:24px;border: none; cursor: pointer; background-color: transparent; transition: background-color 0.3s;font-size:16px;color:#fff;margin-right:15px;line-height: 38px;}
.menu a.active { color: #e6212a;background-image: url(../images/bg-index-case-active.png);background-repeat: no-repeat;background-position: center bottom; }
.menu a { height:50px; }

/* 视频列表 */
.video-list { background-color:#f5f5f5;padding:20px 0; }
.video-list li { width: 100%;position: relative;height:auto;overflow: hidden;margin-bottom:10px;height:7.6em;margin-bottom:20px;}
.video-list li img { width:100%;height:7.6em;object-fit: cover; }
.video-item { width: 50%;position: absolute; background: rgba(34,34,34,.85);left: auto;bottom: 0;/*right: 0;*/top: 0;padding: 20px;-webkit-transition: background .3s;-moz-transition: background .3s;-ms-transition: background .3s;-o-transition: background .3s;transition: background .3s;}
.video-list li:nth-child(2n+1) .video-item { right: 0;}
.video-list li:nth-child(2n+2) .video-item { left: 0;}
.video-item-content { width: 100%;position: absolute;left: 0;top: 50%;z-index: 100;color: #fff;font-size: 14px;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%); text-align: center;}
.video-item-content h4 { font-size: 16px;line-height: 16px;letter-spacing: .12em;}
.video-item-content p { color: #cbcbcb;margin-top: 10px;}
.video-item-content p.style::before { content:'';display:inline-block;width:25px;height:1px;background-color: #cbcbcb;vertical-align: middle;margin-right:10px; }
.video-item-content p.style::after { content:'';display:inline-block;width:25px;height:1px;background-color: #cbcbcb;vertical-align: middle;margin-left:10px; }
.video-item-content p.tag span { color:#fff;margin:0 10px; }
.video-item-content a { display: inline-block;background: transparent;border: none;line-height: 22px;padding: 13px 30px;color: #fff;font-size: 14px;background-color: #262626;height: auto;margin-top: 0;opacity: 0;visibility: hidden;-webkit-transition: all .3s;-moz-transition: all .3s;-ms-transition: all .3s;-o-transition: all .3s;transition: all .3s; }
.video-item-content a i { vertical-align: middle; width:24px;height:16px;display:inline-block;margin-left: 10px;position: relative;left: 0;-webkit-transition: all .3s;-moz-transition: all .3s;-ms-transition: all .3s;-o-transition: all .3s;transition: all .3s;background-image: url(../images/icon-cases-more.png);}
.video-list li:hover .video-item-content a { margin-top: 30px; opacity: 1; visibility: visible;}
.video-item-content a:hover { background-color: #565656; }
.video-item-content a:hover i { left: 10px;}

/* 视频播放 */
.video-detail { background-color:#f5f5f5;padding:20px; }
.video-detail .container { flex-direction: column;  }
.video-detail .video { width:100%;height:0;padding-bottom: 45%;background-color: #000;position: relative; }
.video-detail .video video { width:100%;height:100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0;object-fit: cover;  }
.video-detail .description { width:100%;background-color: #fff;padding:20px;color:#666; }
.video-detail .description h1 { font-size:24px;margin-bottom:20px;color:#000; }

/* 播放列表 */
.gallery { background-color:#f5f5f5;  padding:20px;}
.gallery .container { justify-content:flex-start;flex-wrap: wrap; }
.gallery-item { width: 100%; background-color: white; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 20px;}
.gallery-item.active { border-bottom: 4px solid red;}
.gallery-item .video-cover { width:100%;height:0;padding-bottom:53.65%;background-color: #666;position: relative; }
.gallery-item .video-cover img { width: 100%; height: auto;}
.gallery-item button.play-button { width:48px;height:48px;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.02); border: none; border-radius: 50%;cursor: pointer; outline: none;background-image: url(../images/icon-video-play.png);background-repeat: no-repeat;background-size: cover;}
.gallery-item:hover button.play-button { background-color: rgba(0, 0, 0, 1); }
.gallery-title { margin:0 15px;font-size: 16px; color: #333; padding:20px 0;background-image: url(../images/icon-video-more.png);background-repeat: no-repeat;background-position: center right;}

/* 播放详情 */
.news-detail { background-color: #f5f5f5;padding:20px; }
.news-detail .container { background-color: #fff;padding:20px; }
article .container { flex-direction: column; }
article h1 { font-size:24px;line-height:1.6;font-weight: bolder;padding: 16px 0;color: #333;width:100%; }
.article-meta { display:flex;line-height: 1.6;border-bottom: #e9e9e9 1px solid;padding-bottom:20px; }
.article-meta p { display:inline;margin-right:30px;color:#666;font-size:14px; }
.article-content { padding:20px 0;border-bottom: #e9e9e9 1px solid; }
.article-content video { width:100%; }
.article-tags { padding:10px 0;border-bottom: #e9e9e9 1px solid;display:flex;justify-content:flex-start; }
.article-tags span { font-size:14px;color:#666;line-height: 1.6;margin-right:20px; }
.article-tags ol li { display:inline-block;padding:5px 10px;background-color: #f5f5f5;color:#666;border-radius: 10px;margin-bottom:10px; }
.article-content p { color:#666; }

.article-related { padding:20px 0 0 0; }
.article-related a { color:#666; }