/*----- banner鍒囨崲 -----*/ .mybanner.swiper-container{width:100%;height:100%; transition:1s background-color 1.3s} .mybanner .swiper-wrapper{transition-delay:1s;transition-timing-function:cubic-bezier(.5,0,0,1)} .mybanner .swiper-slide{text-align:center;font-size:18px;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center} .mybanner .title{transition-delay:1s;z-index:10; position: absolute; top: 30%; right: 15%; max-width: 700px; text-align: left; line-height:calc(45px + 40 * ((53vw + 53vh) - 520px)/ 820);} .mybanner .title h3{ font-family: 'OriginGothic'; text-transform:uppercase;font-weight:700;font-size:calc(35px + 30 * ((53vw + 53vh) - 520px)/ 820); letter-spacing: -.21875rem; /*letter-spacing:-1px;*/color:rgba(255,255,255,0);} .mybanner .title h4{ font-family: 'SourceHanSansCN-Normal'; font-size:calc(14px + 30 * ((53vw + 53vh) - 520px)/ 820); margin-top: 10px; color:rgba(255,255,255,0);} .img-box{width:100%;height:100%;position:relative;transform:scale(.6,.6);transition-duration:1s;transition-property:transform;transition-timing-function:cubic-bezier(.5,0,0,1);opacity:.9;overflow:hidden} .img-box img{width:100%;height:100%;object-fit:cover;transform:scale(1.2,1.2) translateX(50%);transition-timing-function:cubic-bezier(.5,0,0,1);transition-property:transform} .button-next,.button-prev{transition:.5s;outline:none;position:absolute;width:100px;z-index:10;top:85vh;transform:translateY(-34px);cursor:pointer} .button-prev{left:4vw} .button-next{right:4vw} .button.disabled{opacity:.2;cursor:default} #arrow-svg-home{transform:translateY(353px)} .button-next #arrow-svg-home{transform:translateY(353px) rotateY(180deg);transform-origin:80px 0 0} .button-prev svg, .button-next svg{transition: 0.5s; } .cls-1{transition:.5s;opacity:.4;transform-origin:-20px 40px;opacity:1} .cls-4{transition:.5s;stroke-width:2px;stroke:#fff;fill:none;stroke-dasharray:1;stroke-dashoffset:1;opacity:.8;transform-origin:0 0 0} #arrow-trg{transition:.5s;fill:#fff;transform:rotateY(180deg) translate(-53px,39px)} #line{transition:.5s;stroke:#fff;transform:translate(50px,42px)} .button-prev:not(.disabled):hover svg{transform:translateX(-25px)} .button-next:not(.disabled):hover svg{transform:translateX(25px)} .button:not(.disabled):hover .cls-1{transform:scale(1.1)} .button:not(.disabled):hover .cls-4{stroke-dasharray:2px;stroke-dashoffset:2px;opacity:1} .button:not(.disabled):hover #arrow-trg{transform:rotateY(180deg) translate(-37px,39px)} .button:not(.disabled):hover #line{transform:translate(35px,42px) scaleX(.33)} .b_text_banner{ /*max-width: 100%;*/ width: auto; }