/* common */
.container { width:100%;max-width: 1600px; margin: 0 auto; padding:0 50px; }
.container .header { width:100%;margin-bottom: 40px;}
.container .header h2 { color: #000; margin-bottom: 20px;font-size:32px;}
.container .header .subtitle { font-size:20px;color:#000;height:20px;line-height: 20px;margin-bottom:45px; }
.container .header .subtitle::after { content:'';display:inline-block;vertical-align: middle;width:32px;height:2px;margin-left:16px;background-color: #000;margin-top:-1px; }

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

/* 导航 */
.menu { height:100px;padding:15px 0;background-color: #222;box-sizing: border-box; }
.menu .container { justify-content: flex-start; }
.menu a { height:70px;border: none; cursor: pointer; background-color: transparent; transition: background-color 0.3s;font-size:18px;color:#fff;margin:0 60px 0 0;flex-grow: 0;line-height: 70px;}
.menu a.active { color: #e6212a;background-image: url(../images/bg-index-case-active.png);background-repeat: no-repeat;background-position: center bottom; }

/* 视频列表 */
.video-list { background-color:#f5f5f5;padding-bottom:50px; }
.video-list .container { padding:30px 0; }
.video-list ul { width:100%; }
.video-list li { width: 100%;position: relative;height:480px;overflow: hidden;margin-bottom:30px;}
.video-list li img { width:100%;height:100%; }
.video-item { width: 32%;position: absolute; background: rgba(34,34,34,.85);left: auto;bottom: 0;/*right: 0;*/top: 0;padding: 50px;-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: 24px;line-height: 24px;letter-spacing: .12em;}
.video-item-content p { color: #cbcbcb;margin-top: 20px;}
.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:80px 0 40px 0; }
.video-detail .container { flex-direction: column;  }
.video-detail .video { position: relative; width:100%;height:0;padding-bottom: 45%;background-color: #000;overflow: hidden; }
.video-detail iframe {  position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;  border: none;}
.video-detail .video video,.video-detail .video img { position: absolute; top: 0; left: 0; right: 0; bottom: 0;width:100%;height:100%;object-fit: contain; }
.video-detail .description { width:100%;background-color: #fff;padding:50px 40px; }
.video-detail .description h1,.video-detail .description h2 { font-size:32px;margin-bottom:40px; }

/* 播放列表 */
.gallery { background-color:#f5f5f5;  padding-bottom:80px;}
.gallery .container { justify-content:flex-start;flex-wrap: wrap;gap: 20px; }
.gallery-item { flex: 0 0 calc(25% - 20px); 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:45%;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;}

/* 播放详情 */
.breadcrumb { background-color: #f5f5f5; }
.news-detail { background-color: #f5f5f5;padding-bottom:200px; }
.news-detail .container { background-color: #fff;padding:90px; }
article .container { flex-direction: column; }
article h1 { font-size:32px;line-height:40px;font-weight: bolder;padding: 16px 0;color: #333;width:100%; }
.article-meta { display:flex;line-height: 60px;border-bottom: #e9e9e9 1px solid;padding-bottom:40px; }
.article-meta p { display:inline;margin-right:30px;color:#666; }
.article-content { padding:40px 0;border-bottom: #e9e9e9 1px solid;width:100%; }
.article-content .video { position: relative; width:100%;height:0;padding-bottom: 45%;background-color: #000;overflow: hidden; }
.article-content iframe {  position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;  border: none;}
.article-tags { padding:40px 0;border-bottom: #e9e9e9 1px solid;display:flex;justify-content:flex-start; }
.article-tags span { font-size:18px;color:#666;line-height: 42px;margin-right:30px; }
.article-tags ol li { display:inline-block;padding:10px 25px;background-color: #f5f5f5;color:#666;border-radius: 30px; }

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