@charset "utf-8";

.video-recent-wrap{position: relative; overflow: hidden; padding: 0 0 420px 0; background: url(../images/global_background.png) no-repeat right bottom; margin-top: 52px;}
.video-recent-wrap .container{max-width: 1780px; padding: 0 30px; margin: 0 auto; position: relative; z-index: 2;}
.video-recent-wrap .video-recent-prev,
.video-recent-wrap .video-recent-next{display: none;}
.video-recent-wrap .video-recent-inner{width: 69.8%; position: absolute; left: -18.7%; bottom: 198px; display: flex; flex-wrap: wrap; justify-content: space-between; z-index: 3; opacity: 0; transition: all .5s;}
.video-recent-wrap .inner{width: 100%; position: relative;}
.video-recent-wrap .inner::before{content:""; display: block; position: absolute; right: -2.4%; top: -20%; width: 49.56%; height: 123.5%; border-radius: 50%; background-color: #f2f6fb; z-index: -1; max-width: 660px; max-height: 660px;}
.video-recent-wrap .video-recent-image .slick-list{margin: 0 -65px;}
.video-recent-wrap .video-recent-image .slick-slide{padding: 10px 65px; max-width: 732px; width: 100%;}
.video-recent-wrap .video-recent-image-list .thumb{padding-bottom: 420px; position: relative; border-radius: 20px; box-shadow: rgba(0,0,0,.2) 8px 0 10px; overflow: hidden;}
.video-recent-wrap .video-recent-image-list .thumb img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: all .5s;}
.video-recent-wrap .video-recent-image-list{display: block !important;}
.video-recent-wrap .video-recent-text-inner {margin-top: 23px;}
.video-recent-wrap .video-recent-text-inner .subjectText,
.video-recent-wrap .video-recent-text-inner .content{text-align: center; font-size: 22px; color: #000000; font-family: "SBA Light";}
.video-recent-wrap .video-recent-text-inner .content{margin-top: -16px;}
.video-recent-wrap .video-recent-text-inner .subjectText span span,
.video-recent-wrap .video-recent-text-inner .content span span{background-image: linear-gradient(#000000, #000000); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 1px; transition: background-size .5s;}
.video-recent-wrap .video-recent-text-inner .content span span{transition-delay: .2s}
.video-recent-wrap .video-recent-text-inner .content > span{display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.video-recent-inner .video-recent-count {display: flex; align-items: end; position: absolute; left: calc(100% + 20px); bottom: 55px}
.video-recent-inner .video-recent-count .current{font-size: 110px; color: #acc6e7; opacity: .5; font-family: "SBA Bold"; line-height: 1; display: inline-block; position: relative; top: 17px;}
.video-recent-inner .video-recent-count .slash{width: 2px; height: 25px; background-color: #a7a7a7; opacity: .4; transform: rotate(45deg); display: inline-block; margin: 0 21px 0 17px;}
.video-recent-inner .video-recent-count .total{font-size: 30px; color: #a7a7a7; opacity: .2; font-family: "SBA Bold"; line-height: 1; display: inline-block; position: relative; top: 2px;}
.video-title{text-align: right;}
.video-title h1{font-size: 70px; line-height: 92px; color: #000000; font-family: "SBA Medium"; right: -100px; opacity: 0; position: relative;}
.video-title h1 span{font-family: "SBA Bold";}
.video-title h1 .blue{color: #1174ff;}
.video-title h1 .green{color: #00b5ad;}
.video-title p{font-family: "SBA Light"; font-size: 24px; line-height: 50px; margin-top: 17px; right: -100px; opacity: 0; position: relative;}

.video-recent-wrap .video-recent-image-list a:hover .thumb img{transform: scale(1.1);}
.video-recent-wrap .video-recent-image-list a:hover .subjectText span span{background-size: 100% 1px;}
.video-recent-wrap .video-recent-image-list a:hover .content span span{background-size: 100% 1px;}

.video-recent-wrap .video-recent-inner .subject,
.video-recent-wrap .video-recent-inner {cursor:none;}

.cursor-custom {position: absolute;width: 156px;height: 157px; background:url('../images/cursor-obj2.png') no-repeat center; pointer-events: none; transform: translate(-50%, -50%); display: none; z-index: 990}
.cursor-custom .cursor-inner {content:''; width:100%; height:100%; background: url('../images/cursor-obj1.png') no-repeat center; position: absolute; top:0; left:0; animation:cursor-rotate 10s linear infinite;}
@keyframes cursor-rotate {
    0% {transform:rotate(0);}
    100% {transform:rotate(360deg);}
}

@media screen and (min-width: 1921px) {
    .video-recent-wrap .inner::before{right: -.6%;}
    .video-recent-wrap .video-recent-image .slick-list .slick-track{margin-left: -135px;}
    .video-recent-wrap .video-recent-image .slick-slide{max-width: 732px;}
}

@media screen and (max-width: 1300px) {
    .video-recent-wrap{padding: 0 0 344px 0; background: url(../images/tablet_global_background.png) no-repeat right bottom 70px;}
    .video-title h1{font-size: 40px; line-height: 50px;}
    .video-title p{font-size: 16px; line-height: 24px; margin-top: 17px;}
    .video-recent-wrap .inner::before{width: 52.361%; height: 118%; top: -19%;}
    .video-recent-wrap .video-recent-swiper .video-recent-image,
    .video-recent-wrap .video-recent-image-list .thumb{padding-bottom: 280px;}
    .video-recent-wrap .video-recent-image .slick-list{margin: 0 -15px;}
    .video-recent-wrap .video-recent-image .slick-slide{padding: 10px 15px; max-width: 432px;}
    .video-recent-inner .video-recent-count{bottom: 75px;}
    .video-recent-inner .video-recent-count .current{font-size: 50px; top: 6px;}
    .video-recent-inner .video-recent-count .slash{margin: 0 21px 0 31px;}
    .video-recent-inner .video-recent-count .total{font-size: 18px;}
    .video-recent-wrap .video-recent-inner{width: 84.15%; bottom: 75px; left: -33.5%;}
    .video-recent-wrap .video-recent-text-inner{margin-top: 13px;}
    .video-recent-wrap .video-recent-text-inner .subjectText,
    .video-recent-wrap .video-recent-text-inner .content{font-size: 16px;}
    .video-recent-wrap .video-recent-text-inner .content{margin-top: -9px;}
}

@media screen and (max-width: 768px) {
    .video-recent-wrap {display: flex; flex-wrap: wrap; flex-direction: column-reverse; padding: 0 0 20px 0; background: none;}
    .video-recent-wrap .container{width: 100%; padding: 0 20px; z-index: 3;}
    .video-title h1{font-size: 32px; line-height: 39px;}
    .video-title p{font-size: 14px; line-height: 22px; margin-top: 6px;}
    .video-recent-wrap .video-recent-prev,
    .video-recent-wrap .video-recent-next{display: block; position: absolute; width: 20px; height: 37px; background: url(../images/video_recent_arrow.png) no-repeat; font-size: 0; top: 50%; margin-top: -57.5px; z-index: 2;}
    .video-recent-wrap .video-recent-prev{left: 10px; background-position: left center;}
    .video-recent-wrap .video-recent-next{right: 10px; background-position: right center;}
    .video-recent-wrap .video-recent-image{border-radius: 0; box-shadow: none;}
    .video-recent-wrap .video-recent-inner{position: relative; left: 0; bottom: 0; width: 100%;}
    .video-recent-wrap .video-recent-swiper{display: none;}
    .video-recent-wrap .inner{width: 100%;}
    .video-recent-wrap .video-recent-text-inner{margin-top: 14px;}
    .video-recent-wrap .video-recent-text-inner .content{margin-top: -14px;}
    .video-recent-wrap .video-recent-text-inner .con{padding: 0 50px;}
    .video-recent-wrap .inner::before{width: 89.24%; height: 117.62%; top: -16%; left: 5.3%;}
    .video-recent-wrap .video-recent-image .slick-list{padding-bottom: 20px !important; padding-top: 20px !important; margin: 0 -11px;}
    .video-recent-wrap .video-recent-image .slick-slide{padding: 0 11px;}
    .video-recent-wrap .video-recent-image .slick-slide .thumb{border-radius: 20px; box-shadow: rgba(0,0,0,.2) 8px 0 10px; overflow: hidden;}
    .video-recent-inner .video-recent-count{left: auto; right: 20px; bottom: 25px;}
    .video-recent-inner .video-recent-count .current{font-size: 30px; top: 3px;}
    .video-recent-inner .video-recent-count .slash{margin: 0 7px 0 16px;}
    .video-recent-inner .video-recent-count .total{font-size: 15px; top: 1px;}
    .cursor-custom{display: none !important;}
    .video-recent-wrap .video-recent-inner .subject,
    .video-recent-wrap .video-recent-inner{cursor: pointer;}
}