/* @charset "utf-8"; */ /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .testimonials-carousel.slick-slider .slick-track { -webkit-transition-delay: 0.8s !important; transition-delay: 0.8s !important; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; max-width: none; width: 100%; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .clear { clear: both; } .tab-box .holder-block { position: absolute; width: 52.5rem; height: 84rem; background: rgba(0, 65, 220, .95); color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; left: 40%; top: -5rem; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; } .tab-box .holder-block h3 { color: #fff; font-family: 'GothamUltra', Arial, sans-serif; text-transform: uppercase; font-size: 3rem; line-height: 1.4; letter-spacing: 2px; margin: 0 0 4rem; } .tab-box .holder-block h3 a { color: #fff; text-decoration: none; } .tab-box .holder-block p { color: #fff; } .number-slide { font-size: 35.5rem; color: rgba(255, 255, 255, .1); position: absolute; top: 2.5rem; right: -2.5rem; font-family: 'GothamBlack', Arial, sans-serif; line-height: 0.5; opacity: 0; -webkit-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .frame-block.slick-active .number-slide { opacity: 1; } .effect-link a:before, .effect-link a:after { background: #566473; content: ""; height: 3px; left: 0; position: absolute; top: 100%; -webkit-transform: scale(0.85); -ms-transform: scale(0.85); transform: scale(0.85); -webkit-transition: -webkit-transform 0.3s ease 0s; -ms-transition: transform 0.3s ease 0s; transition: transform 0.3s ease 0s; width: 100%; } .holder-button { position: relative; z-index: 1; } .trans-btn { display: inline-block; border: 3px solid #fff; text-decoration: none; color: #fff; font-family: 'GothamBlack', Arial, sans-serif; text-transform: uppercase; position: relative; -webkit-backface-visibility: hidden; outline: none; overflow: hidden; font-size: 1.6rem; } .tab-box .holder-block .frame-block { padding: 0; overflow: hidden; position: absolute; } .tab-box .holder-block .frame-block.slick-active { z-index: 1; } .tab-box .frame-text { padding: 34% 27% 34% 18%; -webkit-backface-visibility: hidden; } .tab-box .frame-text { padding: 34% 27% 34% 18%; -webkit-transform: translateY(10rem); transform: translateY(10rem); opacity: 0; -webkit-transition: opacity 0.7s ease 0s, -webkit-transform 0.7s ease 0s; -ms-transition: opacity 0.7s ease 0s, transform 0.7s ease 0s; transition: opacity 0.7s ease 0s, transform 0.7s ease 0s; will-change: transform; } .tab-box .slick-active .frame-text { -webkit-transform: translateY(0rem); transform: translateY(0rem); opacity: 1; } .tab-box .switcher ul { list-style: none; margin: 0; padding: 0; } .tab-box .switcher ul li { float: right; margin: 0 8px 0 12px; } .tab-box .switcher ul li a, .tab-box .switcher ul li span { color: #5c84f1; font-size: 12px; font-family: 'GothamBlack', Arial, sans-serif; text-decoration: none; letter-spacing: 1px; -webkit-transition: color 0.3s ease 0s; -ms-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s; } .tab-box .switcher ul li em { display: none; } .tab-box .switcher ul li span { color: #fff; display: inline-block; margin: 0 10px 0 0; } .switcher { position: absolute; left: 18%; bottom: 7rem; width: 60%; z-index: 2; } .tab-box .switcher ul li a:hover { color: #fff; } .tab-box .switcher ul li.active>a { display: none; } .tab-box .switcher ul li.active em, .tab-box .direction em { background: #fff; display: inline-block; height: 2px; vertical-align: middle; width: 5rem; margin: 0 5px 0 0; } .tab-box .direction { width: 9rem; text-align: center; } .tab-box .direction, .progress-slide { display: inline-block; text-align: left; width: 45%; } .progress-line>span { background: #fff; display: block; height: 3px; margin: 5px 0 0; width: 0px; } .progress-slide { font-size: 12px; -webkit-transform: translateY(-13px); transform: translateY(-13px); } .tab-box .count-slide { font-family: 'GothamBlack', Arial, sans-serif; font-size: 12px; } .tab-box .total-slide { font-family: 'GothamLight', Arial, sans-serif; font-size: 12px; } .tab-box .direction span { cursor: pointer; font-family: 'GothamBlack', Arial, sans-serif; -webkit-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; -webkit-backface-visibility: hidden; background: transparent !important; } .tab-box .direction span:hover { opacity: .5; } .tab-box .direction em { margin: 0 10px 1px; width: 2.5rem; } .slick-arrow { width: 30px; height: 60px; color: #244da0; line-height: 60px; text-align: center; text-indent: 10000000px; position: absolute; border: none; z-index: 8; cursor: pointer; transition: all 0.35s ease-in-out; background: none; overflow: hidden; font-size: 25px; top: 50%; margin-top: -30px; } .slick-prev:after { content: ''; width: 17px; height: 14px; left: 10px; top: 8px; position: absolute; z-index: 0; transition: all 0.4s ease-in-out; border-radius: 50%; } .slick-next:after { content: ''; width: 24px; height: 14px; left: -8px; top: 8px; right: 0; position: absolute; z-index: 0; /* border-radius: 50%; */ } .slick-arrow:before { position: relative; z-index: 10; } .slick-arrow:before { position: relative; z-index: 10; } .slick-next:after { left: auto; right: 0; } .slick-prev { left: 0%; } .slick-next { right: 0%; } .slick-arrow:hover { color: #fff; } .slick-dots { width: 100%; text-align: center; /* padding-top: 15px; */ position: absolute; /* left: 0; */ bottom: -46px; } .slick-dots li { width: 8px; height: 8px; position: relative; margin: 0 6px; display: inline-block; *display: inline; *zoom: 1; } .slick-dots li button { text-indent: -8888em; background-color: #9B9B9B; border: none; width: 100%; height: 100%; cursor: pointer; transition: background 0.4s ease-in-out; border-radius: 50%; /* overflow: hidden; */ } .slick-dots li.slick-active button, .slick-dots li:hover button {} /*更多*/ .trans-btn2 { margin-top: 50px; display: inline-block; border: 3px solid #fff; text-decoration: none; color: #fff; font-family: 'GothamBlack', Arial, sans-serif; text-transform: uppercase; position: relative; -webkit-backface-visibility: none; outline: none; overflow: hidden; font-size: 1.6rem; } .trans-btn2 strong, .trans-btn2 span, .trans-btn2 em { padding: 1rem 2rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; } .trans-btn2 strong { display: block; opacity: 0; } .trans-btn2 span, .trans-btn2 em { position: absolute; width: 100%; -webkit-backface-visibility: none; -webkit-transition: left 0.3s ease 0s; transition: left 0.3s ease 0s; } .trans-btn2 span { left: 0; } .trans-btn2 em { font-style: normal; background: #fff; color: #0041dc; left: -100%; } .trans-btn2:hover span { left: 100%; -webkit-backface-visibility: none; } .trans-btn2:hover em { left: 0; -webkit-backface-visibility: none; } .slick-txt { position: absolute; left: 0; width: 100%; bottom: 0; color: #fff; background: url(../images/slide_bg.png) repeat-x bottom; height: 119px; /* line-height: 100px; */ /* padding-left: 28px; */ /* font-weight: bold; */ } .slick-txt>span { display: block; padding-left: 28px; width: 70%; line-height: 26px; height: 52px; overflow: hidden; padding-top: 45px; } @media screen and (max-width:996px) { .slick-txt { height: 60px; line-height: 60px; } } @media screen and (max-width:767px) { .slick-arrow { transform: scale(0.7) } .slick-dots { bottom: 0; } .slick-arrow { bottom: 0; } .slick-txt { height: 50px; line-height: 50px; padding: 5px 0; background-size: auto 50px; } .slick-txt { font-size: 14px; } .slick-prev { /* left: 2%; */ } .slick-next { /* right: 2%; */ } }