@charset "gb2312";
/* CSS Document */
body{ font-family:"΢ÈíÑźÚ";height:100vh; overflow: hidden}
.cont {position: relative;height: 100%; margin:40px 70px;}
.cont__inner {position: relative;height: 100%;}
.cont__inner:hover .el__bg:after {opacity: 1;}
.el {position: absolute;left: 0;top: 0; width: 24.2%; height:80%;background: #252525;
  -webkit-transition: width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s, -webkit-transform 0.6s 0.7s;
  transition: width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s, -webkit-transform 0.6s 0.7s;
  transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s;
  transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s, -webkit-transform 0.6s 0.7s;
  will-change: transform, width, opacity;
}
.el:not(.s--active) {cursor: pointer;}
.el__overflow {overflow: hidden;position: relative;height: 100%;}
.el__inner {overflow: hidden;position: relative;height: 100%; -webkit-transition: -webkit-transform 1s;transition: -webkit-transform 1s; transition: transform 1s;transition: transform 1s, -webkit-transform 1s;}
.cont.s--inactive .el__inner { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);}
.el__bg { position: relative; width: calc(100vw - 140px);height: 100%;-webkit-transition: -webkit-transform 0.6s 0.7s; transition: -webkit-transform 0.6s 0.7s;transition: transform 0.6s 0.7s;transition: transform 0.6s 0.7s, -webkit-transform 0.6s 0.7s;will-change: transform;}
.el__bg:before {content: "";position: absolute;left: 0;top: -5%; width:83%;height: 110%;background-size: cover;
background-position: left center;-webkit-transition: -webkit-transform 1s;transition: -webkit-transform 1s;transition: transform 1s;transition: transform 1s, -webkit-transform 1s;-webkit-transform: translate3d(0, 0, 0) scale(1);transform: translate3d(0, 0, 0) scale(1);}
.cont.s--inactive .el__bg:before {-webkit-transform: translate3d(0, -100%, 0) scale(1.2); transform: translate3d(0, -100%, 0) scale(1.2);}
.el.s--active .el__bg:before {-webkit-transition: -webkit-transform 0.8s;transition: -webkit-transform 0.8s;
transition: transform 0.8s;transition: transform 0.8s, -webkit-transform 0.8s;}
.el__bg:after {content: "";z-index: 1;position: absolute;left: 0;top: 0;width: 100%;height: 100%;
background: rgba(0, 0, 0, 0.5);opacity: 0;-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
.cont.s--el-active .el__bg:after { -webkit-transition: opacity 0.5s 1.4s;transition: opacity 0.5s 1.4s;opacity: 1 !important;}
.el__preview-cont { text-align:center; z-index: 2;/*display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;*/-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;position: absolute;left: 0;top:44%; width: 100%;height: 100%;-webkit-transition: all 0.3s 1.2s;transition: all 0.3s 1.2s;}
.cont.s--inactive .el__preview-cont {opacity: 0;-webkit-transform: translateY(10px);transform: translateY(10px);}
.cont.s--el-active .el__preview-cont {opacity: 0;-webkit-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all 0.5s;transition: all 0.5s;}
.el__heading{color: #fff;text-transform: uppercase;font-size: 25px;margin-block-end:0 !important;margin-block-start:0 !important;}
.el__preview-cont p{color:#fff;font-size:18px;margin-top:10px; margin-block-end:0 !important;margin-block-start:0 !important;}
.el__content {z-index: -1;position: absolute;left: 0;top: 0;width: 100%; height: 100%;padding: 30px;opacity: 0;pointer-events: none;-webkit-transition: all 0.1s;transition: all 0.1s;}
.el.s--active .el__content {z-index: 2;opacity: 1;pointer-events: auto;-webkit-transition: all 0.5s 1.4s; transition: all 0.5s 1.4s;}
.el__text {text-transform: uppercase;font-size: 40px;color: #fff;}
.el__close-btn {z-index: -1;position: absolute; right: 10px; top: 10px; width: 60px; height: 60px; opacity: 0; pointer-events: none; -webkit-transition: all 0s 0.45s; transition: all 0s 0.45s; cursor: pointer;}
.el.s--active .el__close-btn {z-index: 5;opacity: 1;pointer-events: auto;-webkit-transition: all 0s 1.4s;transition: all 0s 1.4s;}
.el__close-btn:before, .el__close-btn:after {content: ""; position: absolute;left: 0;top: 50%;width: 100%;height: 8px;margin-top: -4px; background: #fff;opacity: 0;-webkit-transition: opacity 0s;transition: opacity 0s;}
.el.s--active .el__close-btn:before, .el.s--active .el__close-btn:after {opacity: 1;}
.el__close-btn:before {-webkit-transform: rotate(45deg) translateX(100%); transform: rotate(45deg) translateX(100%);}
.el.s--active .el__close-btn:before {-webkit-transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57);transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57);-webkit-transform: rotate(45deg) translateX(0); transform: rotate(45deg) translateX(0);}
.el__close-btn:after {-webkit-transform: rotate(-45deg) translateX(100%); transform: rotate(-45deg) translateX(100%);}
.el.s--active .el__close-btn:after {-webkit-transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57);transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57);-webkit-transform: rotate(-45deg) translateX(0);transform: rotate(-45deg) translateX(0);}
.el__index {overflow: hidden;position: absolute;left: 0;bottom: -50px;width: 100%;height: 100%;min-height: 250px;text-align: center;font-size: 10vw;line-height: 0.85;font-weight: bold; -webkit-transition: opacity 0.3s 1.4s, -webkit-transform 0.5s;
transition: opacity 0.3s 1.4s, -webkit-transform 0.5s;transition: transform 0.5s, opacity 0.3s 1.4s;transition: transform 0.5s, opacity 0.3s 1.4s, -webkit-transform 0.5s;-webkit-transform: translate3d(0, 1vw, 0); transform: translate3d(0, 1vw, 0);}
.el:hover .el__index {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.cont.s--el-active .el__index {-webkit-transition: opacity 0.3s, -webkit-transform 0.5s;transition: opacity 0.3s, -webkit-transform 0.5s;transition: transform 0.5s, opacity 0.3s;transition: transform 0.5s, opacity 0.3s, -webkit-transform 0.5s; opacity: 0;}
.el__index-back, .el__index-front {position: absolute;left: 0;bottom: 0;width: 100%;}
.el__index-back {color: #2f3840;opacity: 0;-webkit-transition: opacity 0.25s 0.25s;transition: opacity 0.25s 0.25s;}
.el:hover .el__index-back { -webkit-transition: opacity 0.25s;transition: opacity 0.25s;opacity: 1;}
.el__index-overlay {overflow: hidden;position: relative;-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: -webkit-transform 0.5s 0.1s; transition: -webkit-transform 0.5s 0.1s;transition: transform 0.5s 0.1s;transition: transform 0.5s 0.1s, -webkit-transform 0.5s 0.1s; color: transparent;}
.el__index-overlay:before {content: attr(data-index);position: absolute;left: 0;bottom: 0;width: 100%;height: 100%;color: #fff;-webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);-webkit-transition: -webkit-transform 0.5s 0.1s; transition: -webkit-transform 0.5s 0.1s; transition: transform 0.5s 0.1s; transition: transform 0.5s 0.1s, -webkit-transform 0.5s 0.1s;}
.el:hover .el__index-overlay { -webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.el:hover .el__index-overlay:before {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.el:nth-child(1) {-webkit-transform: translate3d(0%, 0, 0);transform: translate3d(0%, 0, 0);-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;}
.cont.s--el-active .el:nth-child(1):not(.s--active) { -webkit-transform: scale(0.5) translate3d(0%, 0, 0); transform: scale(0.5) translate3d(0%, 0, 0); opacity: 0;-webkit-transition: opacity 0.95s, -webkit-transform 0.95s; transition: opacity 0.95s, -webkit-transform 0.95s; transition: transform 0.95s, opacity 0.95s; transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;}
.el:nth-child(1) .el__inner {-webkit-transition-delay: 0s; transition-delay: 0s;}
.el:nth-child(1) .el__bg {-webkit-transform: translate3d(0%, 0, 0);transform: translate3d(0%, 0, 0);}
.el:nth-child(1) .el__bg:before { -webkit-transition-delay: 0s; transition-delay: 0s; background-image: url("../images/onepgscr-3.jpg");}
.el:nth-child(2) {-webkit-transform: translate3d(105.20833%, 0, 0);transform: translate3d(105.20833%, 0, 0);-webkit-transform-origin: 155.20833% 50%;transform-origin: 155.20833% 50%;}
.cont.s--el-active .el:nth-child(2):not(.s--active) { -webkit-transform: scale(0.5) translate3d(105.20833%, 0, 0); transform: scale(0.5) translate3d(105.20833%, 0, 0);opacity: 0;-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;transition: opacity 0.95s, -webkit-transform 0.95s;transition: transform 0.95s, opacity 0.95s;transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;}
.el:nth-child(2) .el__inner {-webkit-transition-delay: 0.1s; transition-delay: 0.1s;}
.el:nth-child(2) .el__bg {-webkit-transform: translate3d(-19.2%, 0, 0);transform: translate3d(-19.2%, 0, 0);}
.el:nth-child(2) .el__bg:before {-webkit-transition-delay: 0.1s; transition-delay: 0.1s;background-image: url("../images/onepgscr-4.jpg");}
.el:nth-child(3) {-webkit-transform: translate3d(210.41667%, 0, 0); transform: translate3d(210.41667%, 0, 0); -webkit-transform-origin: 260.41667% 50%; transform-origin: 260.41667% 50%;}
.cont.s--el-active .el:nth-child(3):not(.s--active) {-webkit-transform: scale(0.5) translate3d(210.41667%, 0, 0); transform: scale(0.5) translate3d(210.41667%, 0, 0);opacity: 0;-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;transition: opacity 0.95s, -webkit-transform 0.95s; transition: transform 0.95s, opacity 0.95s;transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;}
.el:nth-child(3) .el__inner {-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
.el:nth-child(3) .el__bg {-webkit-transform: translate3d(-14.4%, 0, 0);transform: translate3d(-14.4%, 0, 0);}
.el:nth-child(3) .el__bg:before { -webkit-transition-delay: 0.2s;transition-delay: 0.2s;background-image: url("../images/onepgscr-5.jpg");}
.el:nth-child(4) {-webkit-transform: translate3d(315.625%, 0, 0);transform: translate3d(315.625%, 0, 0);-webkit-transform-origin: 365.625% 50%; transform-origin: 365.625% 50%;}
.cont.s--el-active .el:nth-child(4):not(.s--active) {-webkit-transform: scale(0.5) translate3d(315.625%, 0, 0);transform: scale(0.5) translate3d(315.625%, 0, 0);opacity: 0;-webkit-transition: opacity 0.95s, -webkit-transform 0.95s; transition: opacity 0.95s, -webkit-transform 0.95s;transition: transform 0.95s, opacity 0.95s;transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;}
.el:nth-child(4) .el__inner {-webkit-transition-delay: 0.3s;transition-delay: 0.3s;}
.el:nth-child(4) .el__bg {-webkit-transform: translate3d(-13.6%, 0, 0);transform: translate3d(-13.6%, 0, 0);}
.el:nth-child(4) .el__bg:before {-webkit-transition-delay: 0.3s;transition-delay: 0.3s; background-image: url("../images/onepgscr-6.jpg");}
.el:hover .el__bg:after {opacity: 0;}
.el.s--active {z-index: 1;width: 100%;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-webkit-transition: width 0.7s 0.7s, z-index 0s, -webkit-transform 0.6s;transition: width 0.7s 0.7s, z-index 0s, -webkit-transform 0.6s;transition: transform 0.6s, width 0.7s 0.7s, z-index 0s;transition: transform 0.6s, width 0.7s 0.7s, z-index 0s, -webkit-transform 0.6s;}
.el.s--active .el__bg {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);-webkit-transition: -webkit-transform 0.6s;transition: -webkit-transform 0.6s;transition: transform 0.6s;transition: transform 0.6s, -webkit-transform 0.6s;}
.el.s--active .el__bg:before { -webkit-transition-delay: 0.6s;transition-delay: 0.6s;-webkit-transform: scale(1.1);transform: scale(1.1);}

.icon-link {position: absolute;left: 5px;bottom: 5px;width: 32px;}
.icon-link img {width: 100%;vertical-align: top;}
.icon-link--twitter {left: auto;right: 5px;}


@media only screen and (max-width: 1300px) {.el{height:75%}}


@media only screen and (max-width: 980px) {
	.cont {position: relative;height: 100%;margin: 40px 20px;}
	.el__heading{font-size:23px;}
	.el__preview-cont{top:35%}
    .el__preview-cont p{font-size:15px;}
}