#indexView {background: maroon;background-color: #171717;}
.h-title a::before,
.h-title::before,
.icon,
.wrap3 .download-wrap .download,
.wrap3 .download-wrap .register,
.wrap3 .slides-wrap a:after,
.wrap3 .container-slider .pagination .swiper-pagination-bullet,
.wrap5 .detail-wrap .title a,
.wrap6 .video-wrap .videos .video .sbtn,
.wrap6 .video-wrap .videos .video .sbtn::after,
.wrap6 .video-wrap .videos .video .sbtn::before {background-image: url(../images/main/dark/main-icon.png);background-repeat: no-repeat;}

.clearfix:after,
.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.h-cont {display: flex;justify-content: space-between;align-items: center;width: 100%;color: #ffffff;padding: 10px 20px;box-sizing: border-box;}
.h-title {font-size: 2em;font-weight:bold;margin: 0;}
.h-link {display: flex;align-items: center;margin-left: 20px;text-decoration: none;color: #ffffff;}
.h-sign {transition: transform 0.3s;margin-right: 5px;}
.h-link:hover {color: #ffc457;}
.h-link:hover .h-sign {color: #ffc457;transform: rotate(180deg);}

.wrap2,.wrap3,.wrap4,.wrap5,.wrap6{
	box-shadow: 0 0px 4px 4px #fffa00;
    background-color: #000000;
}

.wrap {padding:70px 0;}
.wrapcw {background: url(../images/cover/bg.webp)no-repeat top center;height: 780px}
.wrapof {background: url(../images/cover/bgw.jpg)no-repeat top center;height: 780px}
.wrap1 {height: 780px}
.wrap1:after {position: absolute;content: "";height: 192px;left: 0;width: 100%;bottom: 0;background: url(../images/main/dark/filter-bg.png)no-repeat top center}
.wrap1 .inner {z-index: 2}
.wrap1 .logo {background: url(../images/cover/logo.png)no-repeat top center;width: 190px;height: 127px;display: block;position: absolute;top: 100px;left: -212px}
.wrap1 .slogan { background: no-repeat top center / 100%;width: 1200px;height: 397px;position: absolute;top: 435px;left: 40px;}
.wrap1 .slogan.en {background-image: url(../images/cover/en-slogan1.png);}
.wrap1 .slogan.zh {background-image: url(../images/cover/zh-slogan1.png);}
.wrap1 .video {width: 68px;height: 68px;position: absolute;z-index: 2;left: 50%;top: 287px;margin-left: 182px;cursor: pointer;background-position: -871px 0}
.wrap1 .video i {width: 20px;height: 23px;background-position: -797px 0;left: 50%;margin-left: -8px;margin-top: -11px}
.wrap1 .agewran,
.wrap1 .tips {left: 0;color: #1ada0b;z-index: 2;position: absolute}
.wrap1 .agewran {top: 120px;background: url(../images/cover/age-tips.png);width: 90px;height: 117px}
.wrap1 .tips {top: 840px;text-shadow: 1px 1px 1px #155038,-1px 1px 1px #155038,-1px -1px 1px #155038,1px -1px 1px #155038}
.wrap1 .hbtn {position: absolute;background-color: #4c422f;color: #d5d2cd;right: 0;top: 720px;width: 194px;height: 49px;line-height: 39px;font-size: 20px;text-align: center;font-weight: 700;z-index:4;}
.wrap1 .hbtn .txt {position: absolute;left: 3px;top: 3px;height: calc(100% - 6px);width: calc(100% - 6px);box-sizing: border-box;transition: all .3s ease-out;border: 1px solid #8d876e;background: 0 0;z-index: 2;}
.wrap1 .hbtn:hover .txt {color: #fff;letter-spacing: .22em;background: rgba(0, 0, 0, .65);height: calc(100% - 10px);width: calc(100% - 10px);left: 5px;top: 5px;}
.wrap1 .hbtn:after,
.wrap1 .hbtn:before {position: absolute;content: "";width: 12px;height: 12px;border: 1px solid #b3a281;z-index: 3;top: 50%;box-sizing: border-box;margin-top: -6px;transform: rotate(45deg);transition: all .2s ease-out;}
.wrap1 .hbtn:before {left: 10%;border-color: #fff;}
.wrap1 .hbtn:after {right: 10%;border-color: #fff;}
.wrap1 a:hover{filter:brightness(1.2);}
.wrap1 #mainbtn-1{background-image: url(../images/icon/mainevents.webp);background-position: 0px 0px;width: 245px;height: 156px;position: absolute;top: -50px;padding-top:28px}
.wrap1 #mainbtn-2{background-image: url(../images/icon/mainevents.webp);background-position: 0px -156px;width: 245px;height: 128px;position: absolute;top: 106px;}
.wrap1 #mainbtn-3{background-image: url(../images/icon/mainevents.webp);background-position: 0px -284px;width: 245px;height: 128px;position: absolute;top: 234px;}
.wrap1 .maintxt {position: absolute;top: 40%;left: 50%;transform: translate(-50%, -50%);font-family: Impact;font-size: 36px;width: max-content;font-weight: bold;background: linear-gradient(0deg, #391d00, #6b4217);-webkit-background-clip: text;color: transparent;}
.wrap1 .subtxt {position: absolute;top: 65%;left: 50%;transform: translate(-50%, -50%);font-family: inherit;font-size: 16px;width: max-content;font-weight: bold;background: linear-gradient(0deg, #391d00, #2b1601);-webkit-background-clip: text;color: transparent;}

.wrap2 .statistics-wrap {font-size: 0.5em;font-family: inherit;}
.wrap2 .statistics-container {width:100%;color:#ffffff;}
.wrap2 .statistics-header {text-align:center;margin-bottom:1.25em;}
.wrap2 .statistics-header h2 {font-size:2em;font-weight:bold;color: #ffe4c4;}
.wrap2 .statistics-overview {display:flex;justify-content:space-around;margin-bottom:1.25em;}
.wrap2 .stat-item {background-color:#2c2c2c;padding:0.625em;border-radius:0.5em;width:30%;text-align:center;}
.wrap2 .stat-item span {display:block;font-size:1em;color:#ffe4c4;}
.wrap2 .stat-item strong {font-size:1.25em;color:#00ff00;}
.wrap2 .stat-progress-bar {height:0.5em;background-color:#0bcb0d;border-radius:0.3125em;transition:width 0.3s;}
.wrap2 .width-0 { width: 0%; } .width-10 { width: 10%; } .width-20 { width: 20%; } .width-30 { width: 30%; } .width-40 { width: 40%; } .width-50 { width: 50%; }
.wrap2 .width-60 { width: 60%; } .width-70 { width: 70%; } .width-80 { width: 80%; } .width-90 { width: 90%; } .width-100 { width: 100%; }
.wrap2 .statistics-table {background-color:#2c2c2c;border-radius:0.5em;overflow:hidden;}
.wrap2 .table-header {display:flex;background-color:#444;font-weight:bold;}
.wrap2 .table-body {font-size: 12px;}
.wrap2 .table-col {flex:1;padding:0.625em;text-align:center;border-bottom:0.0625em solid #444;}
.wrap2 .table-row {display:flex;transition:background-color 0.2s;}
.wrap2 .table-row:hover {background-color:#333;}
.wrap2 .servertime {color:#ffff00;}
.wrap2 .serveronline {color:#00ff00;}
.wrap2 .serveroffline {color:#ff0000;}

.wrap3 .download-wrap {width: 470px;float: left;font-family: inherit}
.wrap3 .download-wrap .download,
.wrap3 .download-wrap .register {display: flex;position: relative;flex-direction: column;justify-content: center;align-items: center;font-weight: 700;letter-spacing: .05em;transition: all .3s ease-out}
.wrap3 .download-wrap .download {height: 225px;cursor: pointer;font-size: 50px;color: #fff;background-position: 0-229px}
.wrap3 .download-wrap .download span {font-size: 12px;color: #bfd8db;line-height:32px; letter-spacing: .7em;font-weight: 400;font-family: inherit}
.wrap3 .download-wrap .download:before {position: absolute;left: 5px;top: 4px;content: "";background: url(../images/main/dark/main-download-border.png)no-repeat top center;width: 459px;height: 215px}
.wrap3 .download-wrap .download:hover,
.wrap3 .download-wrap .register:hover {letter-spacing: .25em}
.wrap3 .download-wrap .download:hover span,
.wrap3 .download-wrap .register:hover span {letter-spacing: 1.2em}
.wrap3 .download-wrap .download:hover:before {transform: scale(.98)}
.wrap3 .download-wrap .register {width: 235px;height: 125px;float: left;background-position: 0-477px;font-size: 24px;color: #ffcd57;padding-top: 52px}
.wrap3 .download-wrap .download span,
.wrap3 .download-wrap .download:before,
.wrap3 .download-wrap .register span,
.wrap3 .download-wrap .register:before {transition: all .2s .1s ease-out}
.wrap3 .download-wrap .register span {font-size: 12px;color: #a29e88;letter-spacing: .7em;font-weight: 400;transform: scale(.75);font-family:inherit}
.wrap3 .download-wrap .register:before {position: absolute;left: 5px;top: 4px;content: "";background: url(../images/main/dark/main-register-border.png)no-repeat top center;width: 227px;height: 117px}
.wrap3 .download-wrap .register:hover:before {transform: scale(.96)}
.wrap3 .download-wrap .register.card {position: relative;left: -1px;background-position: -252px -477px}
.wrap3 .download-wrap .register,
.wrap3 .container-slider .pagination {box-sizing: border-box;}
.wrap3 .container-slider .pagination {position: absolute;bottom: 30px;display: flex;width: 100%;padding-right: 40px;justify-content: flex-end;align-items: center;z-index: 3}
.wrap3 .container-slider .pagination .swiper-pagination-bullet {width: 10px;height: 10px;opacity: 1;background-color: transparent;background-position: -513px -229px}
.wrap3 .container-slider .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {width: 18px;height: 18px;background-position: -543px -229px}
.wrap3 .slides-wrap .swiper-slide-active a h4,
.wrap3 .video-wrap .videos .video:hover p {opacity: 1;transform: translateY(0)}
.wrap3 .slides-wrap a {display: block;width: 870px;height: 350px;position: relative}
.wrap3 .slides-wrap a img {display: block;width: 100%}
.wrap3 .slides-wrap a h4 {position: absolute;left: 30px;bottom: 22px;color: #cec1a6;font-size: 16px;z-index: 4;transition: all .3s .4s ease-out;opacity: 0;transform: translateY(100%)}
.wrap3 .slides-wrap a:before {content: "";background: url(../images/main/dark/main-slide-border.png)no-repeat top center;width: 859px;height: 338px;position: absolute;left: 5px;top: 6px}
.wrap3 .slides-wrap a:after {content: "";position: absolute;width: 100%;height: 58px;bottom: 0;left: 0;z-index: 2;background-position: 0-663px}


.wrap4 .news-wrap {float: left;width: 864px;}
.wrap4 .news-wrap .tabs {border: 1px solid #934505; background-color: #efdc99; margin-top: 20px; border-radius: 8px; overflow: hidden; display: flex; position: relative;}
.wrap4 .news-wrap .tabs li {flex: 1; height: 48px; line-height: 46px; text-align: center; cursor: pointer; font-size: 24px; color: #333; transition: background .3s, color .3s; padding: 0 16px; position: relative;}
.wrap4 .news-wrap .tabs li:hover {background-color: #bcab6d; color: #000000;}
.wrap4 .news-wrap .tabs li.active {color: #ffca00; background-color: #fff; font-weight: bold; border-bottom: 2px solid #ffca00;}
.wrap4 .news-wrap .tabs li span {position: relative; z-index: 2; display: block;}
.wrap4 .news-wrap .focus-wrap {padding-bottom: 20px;border-bottom: 1px dashed #dadada;position: relative;margin-bottom: 12px}
.wrap4 .news-wrap .focus-wrap h1 {font-size: 26px;color: #ffca00;font-weight: 700;padding-top: 20px;padding-bottom: 16px}
.wrap4 .news-wrap .focus-wrap .img-wrap {float: left;width: 864px;height: 140px;overflow: hidden;margin-bottom: 20px}
.wrap4 .news-wrap .focus-wrap .img-wrap img {display: block;width: 100%;height: 100%;transition: .3s}
.wrap4 .news-wrap .focus-wrap .desc-wrap {font-size: 16px;color: #ffca00;line-height: 1.62}
.wrap4 .news-wrap .focus-wrap .time {position: absolute;right: 0;bottom: 20px;font-size: 13px;color: #ffca00}
.wrap4 .news-wrap .news-list {overflow: hidden}
.wrap4 .news-wrap .news-list .news,
.wrap4 .news-wrap .news-list li.loading::before {display: none}
.wrap4 .news-wrap .news-list .news.active {display: block}
.wrap4 .news-wrap .news-list li {position: relative}
.wrap4 .news-wrap .news-list li.loading {text-align: center;padding-top: 30px}
.wrap4 .news-wrap .news-list li.loading p {padding-top: 4px}
.wrap4 .news-wrap .news-list li:nth-child(1) {transition: all .1s ease-out}
.wrap4 .news-wrap .news-list li:nth-child(2) {transition: all .3s ease-out}
.wrap4 .news-wrap .news-list li:nth-child(3) {transition: all .5s ease-out}
.wrap4 .news-wrap .news-list li:nth-child(4) {transition: all .7s ease-out}
.wrap4 .news-wrap .news-list li:nth-child(5) {transition: all .9s ease-out}
.wrap4 .news-wrap .news-list li:nth-child(6) {transition: all .1s ease-out}
.wrap4 .news-wrap .news-list li .time {position: absolute;right: 0;bottom: 14px;font-size: 13px;color: #979797}
.wrap4 .news-wrap .news-list li::before,.wrap5 .tabs-wrap .circle {position: absolute;border-radius: 50%}
.wrap4 .news-wrap .news-list li::before {content: "";width: 5px;height: 5px;left: 0;top: 22px;background-color: #555}
.wrap4 .news-wrap .news-list a {font-size: 18px;color: #fff;line-height: 48px;position: relative;padding-left: 20px}
.wrap4 .news-wrap .news-list li p {text-align: center; font-size: 120%; text-decoration: underline; color: #fff;}
.wrap4 .news-wrap .news-list a:hover {text-decoration: underline}
.wrap4 .hot-wrap {float: right;width: 438px}
.wrap4 .hot-wrap .h-title::before {width: 153px;height: 29px;background-position: -253px -756px}
.wrap4 .hot-wrap ul {padding-top: 10px}
.wrap4 .hot-wrap li {position: relative;margin: 0px}
.wrap4 .hot-wrap li .txt {position: absolute;left: 24px;top: 32px}
.wrap4 .hot-wrap li .txt h2 {font-size: 18px;font-weight: 700;color: #887e65}
.wrap4 .hot-wrap li .txt p {font-size: 15px;color: #737271;line-height: 1.6}
.wrap4 .hot-wrap li .txt a {display: block; margin-top: 54px; width: 104px; height: 24px; line-height: 24px; text-align: center; font-size: 16px; padding: 3px 20px; border-radius: 12px 1px 12px 1px; background: #ffffff63; box-shadow: 2px 2px #000000; color: #000000; opacity: .82}
.wrap4 .hot-wrap li .txt a:hover {text-decoration:underline;}
.wrap4 .news-wrap .tabs li label {transition: all 0.3s ease-in-out;text-overflow: ellipsis;white-space: nowrap;user-select: none;overflow: hidden;cursor: pointer;color: #4f441c;}
.wrap4 .news-wrap .tabs li label:hover,
.wrap4 .news-wrap .tabs li label:focus,
.wrap4 .news-wrap .tabs li label:active {outline: 0;color: #161616;}
.wrap4 .news-wrap input[name=tab-control] {display: none;}
.wrap4 .news-wrap input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1),
.wrap4 .news-wrap input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2),
.wrap4 .news-wrap input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3),
.wrap4 .news-wrap input[name=tab-control]:nth-of-type(4):checked ~ ul > li:nth-child(4) {opacity: 1;background-color:#968443;}
.wrap4 .news-wrap input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label,
.wrap4 .news-wrap input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label,
.wrap4 .news-wrap input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label,
.wrap4 .news-wrap input[name=tab-control]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {cursor: default;color: #ffffff;}
.wrap4 .news-wrap input[name=tab-control]:nth-of-type(1):checked ~ .news-list > .news:nth-child(1) {display: block;}
.wrap4 .news-wrap input[name=tab-control]:nth-of-type(2):checked ~ .news-list > .news:nth-child(2) {display: block;}
.wrap4 .news-wrap input[name=tab-control]:nth-of-type(3):checked ~ .news-list > .news:nth-child(3) {display: block;}
.wrap4 .news-wrap input[name=tab-control]:nth-of-type(4):checked ~ .news-list > .news:nth-child(4) {display: block;}


.wrap5 .tabs-wrap {position: absolute; z-index: 3; left: 0; top: 0; width:100%; height: 200px; border-bottom: 1px solid #FFFFFF00; border-radius: 8px 0px;}
.wrap5 .tabs-wrap .tab {float: left;width: 134px;height:200px;position: relative;top:72px;text-align: center;color: #f0e68c;cursor: pointer;}
.wrap5 .tabs-wrap .radio {appearance: none; padding: 0; border: none; border-radius: 0; width: 0;}
.wrap5 .tabs-wrap .tab span {font-size: 24px;}
.wrap5 .tabs-wrap .tab:hover + span {border-bottom:2px solid #f0e68c;color: #fff;}
.wrap5 .tabs-wrap .radio:checked + label .tab span {color: #fff;border-bottom:2px solid #f0e68c;}
.wrap5 .tabs-wrap .radio:checked + label:hover .tab {color: #fff;}
.wrap5 .content-wrap {padding-top: 200px; border-radius: 0px 8px;}
.wrap5 .detail-wrap {z-index: 3;position: relative; display: none; padding: 20px; border-radius: 0px 8px; backdrop-filter: blur(10px); box-shadow: 0 2px 20px #0000004D;}
.wrap5 .detail-wrap .title {width: 600px; font-size: 1.5em; color: #ffffff; text-align: center; line-height: 1.6; position: relative; z-index: 2;}
.wrap5 .detail-wrap .title a {display: block; width: 240px; height: 60px; line-height: 50px; background-image: url(../images/icon/classbtn.png); text-align: center; font-size: 1.2em; color: #fceac1; margin: 20px auto; border-radius: 5px; transition: background 0.3s;}
.wrap5 .detail-wrap .title a:hover {filter: brightness(1.5);}
.wrap5 .detail-wrap .title a:active {filter: brightness(0.9);}
.wrap5 .detail-wrap .title .txt {margin: 0 auto 12px;}
.wrap5 .detail-wrap .title .txt.gradientext {font-size: 70px; background: radial-gradient(circle, #e0e0e0 40%, #4a4a4a 70%, #FFFFFF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center;}
.wrap5 .detail-wrap .role {position: absolute; z-index: 1; right: -1px; bottom: -1px; pointer-events: none;}
.wrap5 > .inner:has(.tabs-wrap .radio[value=classtab1]:checked + label) > .content-wrap > .detail-wrap:nth-of-type(1),
.wrap5 > .inner:has(.tabs-wrap .radio[value=classtab2]:checked + label) > .content-wrap > .detail-wrap:nth-of-type(2),
.wrap5 > .inner:has(.tabs-wrap .radio[value=classtab3]:checked + label) > .content-wrap > .detail-wrap:nth-of-type(3),
.wrap5 > .inner:has(.tabs-wrap .radio[value=classtab4]:checked + label) > .content-wrap > .detail-wrap:nth-of-type(4),
.wrap5 > .inner:has(.tabs-wrap .radio[value=classtab5]:checked + label) > .content-wrap > .detail-wrap:nth-of-type(5),
.wrap5 > .inner:has(.tabs-wrap .radio[value=classtab6]:checked + label) > .content-wrap > .detail-wrap:nth-of-type(6),
.wrap5 > .inner:has(.tabs-wrap .radio[value=classtab7]:checked + label) > .content-wrap > .detail-wrap:nth-of-type(7),
.wrap5 > .inner:has(.tabs-wrap .radio[value=classtab8]:checked + label) > .content-wrap > .detail-wrap:nth-of-type(8),
.wrap5 > .inner:has(.tabs-wrap .radio[value=classtab9]:checked + label) > .content-wrap > .detail-wrap:nth-of-type(9) {display: block;}
.radio[value=classtab1]:checked + label div i:nth-child(2) {width: 48px; height: 48px; margin-left: -24px; background-position: 0 -61px;}
.radio[value=classtab2]:checked + label div i:nth-child(2) {top: 10px; opacity: 1; width: 48px; height: 48px; margin-left: -24px; background-position: -43px -61px;}
.radio[value=classtab3]:checked + label div i:nth-child(2) {top: 10px; opacity: 1; width: 48px; height: 48px; margin-left: -24px; background-position: -86px -61px;}
.radio[value=classtab4]:checked + label div i:nth-child(2) {top: 10px; opacity: 1; width: 48px; height: 48px; margin-left: -24px; background-position: -129px -61px;}
.radio[value=classtab5]:checked + label div i:nth-child(2) {top: 10px; opacity: 1; width: 48px; height: 48px; margin-left: -24px; background-position: -172px -61px;}
.radio[value=classtab6]:checked + label div i:nth-child(2) {top: 10px; opacity: 1; width: 48px; height: 48px; margin-left: -24px; background-position: -215px -61px;}
.radio[value=classtab7]:checked + label div i:nth-child(2) {top: 10px; opacity: 1; width: 48px; height: 48px; margin-left: -24px; background-position: -258px -61px;}
.radio[value=classtab8]:checked + label div i:nth-child(2) {top: 10px; opacity: 1; width: 48px; height: 48px; margin-left: -24px; background-position: -301px -61px;}
.radio[value=classtab9]:checked + label div i:nth-child(2) {top: 10px; opacity: 1; width: 48px; height: 48px; margin-left: -24px; background-position: -344px -61px;}

.wrap6 { overflow: hidden; }
.wrap6 .pics-wrap { float: left; width: 864px; }
.wrap6 .pics-wrap .pics { width: 100%; padding-top: 10px;}
.wrap6 .pics-wrap .pics .pic { float: left; width: calc(50% - 20px); margin: 0px 5px 20px; position: relative; overflow: hidden; border-radius: 3px; border: 3px solid #996221; height: 210px; }
.wrap6 .pics-wrap .pics .pic img { width: 100%; height: 100%; object-fit: cover; }
.wrap6 .pics-wrap .pics .pic a { position: absolute; left: 50%; top: 50%; z-index: 2; width: 128px; height: 40px; box-sizing: border-box; border: 1px solid #c49d54; margin-left: -64px; text-align: center; line-height: 38px; color: #c49d54; margin-top: -20px; transform: scale(0); opacity: 0; }
.wrap6 .pics-wrap .pics .pic a:hover { background-color: #c49d54; color: #fff; }
.wrap6 .pics-wrap .pics .pic:hover::before { background-color: rgba(255, 215, 0, 0.3); }
.wrap6 .pics-wrap .pics .pic:hover img { transform: scale(1.4); }
.wrap6 .pics-wrap .pics .pic:hover a { transform: scale(1); opacity: 1; }
.wrap6 .pics-wrap .pics .pic a, .wrap6 .pics-wrap .pics .pic img { transition: all .2s ease-out; }
.wrap6 .video-wrap { float: right; width: 438px; }
.wrap6 .video-wrap .videos { width: 100%; padding-top: 10px;}
.wrap6 .video-wrap .videos .video { float: left; width: calc(50% - 20px); margin: 0px 5px 20px; position: relative; overflow: hidden; border-radius: 3px; border: 3px solid #996221; height: 210px; }
.wrap6 .video-wrap .videos .video img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); transition: all .2s ease-out;}
.wrap6 .video-wrap .videos .video:hover img { transform: scale(1); }
.wrap6 .video-wrap .videos .video .play-button { width: 84px; height: 84px; position: absolute; }
.wrap6 .video-wrap .videos .video p { position: absolute; width: 100%; box-sizing: border-box; padding: 12px; bottom: 0; left: 0; z-index: 3; opacity: 0; transform: translateY(100%); color: #fff; }
.wrap6 .video-wrap .videos .video:hover .play-button::before { transform: scale(1.12); }
.wrap6 .video-wrap .videos .video:hover .play-button::after { transform: scale(.72); }
.wrap6 .play-button { position: absolute; width: 60px; height: 60px; background-color: #bd7a1957; border: 3px solid #bd7a19; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); transition: background-color 0.3s; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; transform: scale(0); opacity: 0; transition: all .2s ease-out; }
.wrap6 .play-button:hover { background-color: #000000; }
.wrap6 .play-button::before { content: ''; width: 0; height: 0; border-left: 15px solid white; border-top: 10px solid transparent; border-bottom: 10px solid transparent; position: absolute; transition: transform .2s ease-out; }
.wrap6 .video-wrap .videos .video:hover .play-button { transform: scale(1); opacity: 1; }
.wrap6 .video-wrap .videos .video:hover .play-button::before { transform: scale(1); }
.wrap6 .links-wrap li a, .wrap6 .video-wrap .videos .video .play-button::after, .wrap6 .video-wrap .videos .video .play-button::before { transition: all .2s ease-out; }