.hover1 img{ transform:scale3d(1,1,1); transition: all .3s linear 0s; } .hover1 p{ letter-spacing: 0; transition: all .3s linear 0s; } .hover1:hover p{ /*letter-spacing: 1px;*/ } .hover1:hover img{ transform:scale3d(1.1,1.1,1); } .hover2 .img1{ transform:scale3d(1,1,1); transition: all .3s linear 0s; } .hover2:hover .img1{ transform:scale3d(1.1,1.1,1); } .hover2 .video-btn{ border-radius:50%; overflow: hidden; } .hover2:hover .video-btn{ animation: spinner 2000ms infinite linear; } .main.news .box1 .list-box .li .tit5{ transition: all .5s ease; } .main.news .box1 .list-box .li:hover .tit5{ color:#008b3f; } .button--sacnite{ background:#008d40 !important; transition:background .3s; } .button--sacnite:hover{ background:#007937 !important; } .button--sacnite span{ display:block; } /*.button--sacnite:hover::before { box-shadow: inset 0 0 0 2px #008d40; -webkit-transform: scale3d(1.1,1.1,1); transform: scale3d(1.1,1.1,1); } .button--sacnite::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius:8px; z-index: -1; box-shadow: inset 0 0 0 35px #008d40; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); -webkit-transition: box-shadow .3s,-webkit-transform .3; transition: box-shadow .3s,transform .3s; } */ .button--sacnite1{ background:#008d40 !important; transition:background .3s; } .button--sacnite1:hover{ background:#007937 !important; } .recruit-tip .button1 span{ display: block; } .button--sacnite1 span{ display:block; } /*.button--sacnite1{ background:transparent !important; transition:color .3s; } .button--sacnite1 span{ position:relative; z-index:1; } .button--sacnite1:hover{ color:#008d40 !important; } .button--sacnite1:hover::before { box-shadow: inset 0 0 0 2px #008d40; -webkit-transform: scale3d(1.1,1.1,1); transform: scale3d(1.1,1.1,1); } .button--sacnite1::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius:5px; z-index:1; box-shadow: inset 0 0 0 35px #008d40; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); -webkit-transition: box-shadow .3s,-webkit-transform .3; transition: box-shadow .3s,transform .3s; }*/ /*.button--sacnite2{ transition:color .3s; } .button--sacnite2 .button{ background:transparent !important; } .button--sacnite2 span{ position:relative; z-index:1; } .button--sacnite2:hover .button{ color:#008d40 !important; } .button--sacnite2:hover::before { box-shadow: inset 0 0 0 2px #008d40; -webkit-transform: scale3d(.9,.9,1); transform: scale3d(.9,.9,1); } .button--sacnite2::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius:5px; z-index:1; box-shadow: inset 0 0 0 35px #008d40; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); -webkit-transition: box-shadow .3s,-webkit-transform .3; transition: box-shadow .3s,transform .3s; } */ .button--sacnite2 .button{ background:#008d40 !important; transition:background .3s; } .button--sacnite2:hover .button{ background:#007937 !important; } .button--sacnite3 .button{ background:#eee !important; transition:background .3s,color .3s; } .button--sacnite3:hover .button{ background:#007937 !important; color:#fff !important; } .button--sacnite2 span,.button--sacnite3 span{ display:block; } /*.button--sacnite3{ transition:color .3s; } .button--sacnite3 .button{ background:transparent !important; } .button--sacnite3 span{ position:relative; z-index:1; } .button--sacnite3:hover .button{ color:#008d40 !important; } .button--sacnite3:hover::before { box-shadow: inset 0 0 0 2px #008d40; -webkit-transform: scale3d(.95,.95,1); transform: scale3d(.95,.95,1); } .button--sacnite3::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius:5px; z-index:1; box-shadow: inset 0 0 0 35px #eee; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); -webkit-transition: box-shadow .3s,-webkit-transform .3; transition: box-shadow .3s,transform .3s; }*/ .main.news .box1 .list-box .li{ position:relative; overflow:hidden; } .main.news .box1 .list-box .li:before{ content: ''; position: absolute; bottom: 0; left: 0; width:0; height:8px; background:#008c3f; z-index:1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); -webkit-transition: all .5s; transition: all .5s; } .main.news .box1 .li:hover:before{ height:3px; width:100%; } .main.news .box2 .ulbox{ -webkit-perspective: 2000px; perspective: 2000px; } .main.culture .box2 .li{ -webkit-perspective:400px; perspective:400px; } .main.openwindow .box1 .w1280{ -webkit-perspective: 2000px; perspective: 2000px; } .main.culture .box2 .li a{ display:block; } .js-m.listrotateY{ opacity: 0; transform-origin:left center 0; transform: rotateY(45deg); -webkit-transform: rotateY(45deg); -moz-transform: rotateY(45deg); transition:all 1s cubic-bezier(0.6, 0.2, 0.1, 1); -webkit-transition:all 1s cubic-bezier(0.6, 0.2, 0.1, 1); } .js-m.listrotateY.animate{ opacity: 1; transform: rotateY(0); -webkit-transform: rotateY(0); -moz-transform: rotateY(0); } .js-m.opacity1{ opacity:0; transition:all 1s cubic-bezier(0.6, 0.2, 0.1, 1); -webkit-transition:all 1s cubic-bezier(0.6, 0.2, 0.1, 1); } .js-m.opacity1.animate{ opacity:1; } .js-m.imgwidth{ opacity: 0; filter: alpha(opacity=0); transition: clip-path 1s cubic-bezier(0.62, 0.04, 0, 0.96),opacity 0.8s; clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } .js-m.imgwidth.animate{ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 1; } .js-m.imgwidth2{ opacity: 0; filter: alpha(opacity=0); transition: clip-path 3s ease,opacity 0.8s; clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } .js-m.imgwidth2.animate{ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 1; } .js-m.translate-bottom1{ opacity:0; } .js-m.translate-bottom1.animate{ opacity:1; -webkit-animation:animate1 1s cubic-bezier(0.6, 0.2, 0.1, 1) forwards; -moz-animation:animate1 1s cubic-bezier(0.6, 0.2, 0.1, 1) forwards; } .js-m.translate-bottom2.animate{ -webkit-animation:animate3 1s cubic-bezier(0.6, 0.2, 0.1, 1) forwards; -moz-animation:animate3 1s cubic-bezier(0.6, 0.2, 0.1, 1) forwards; } .js-m.translate-left1{ opacity:0; } .js-m.translate-left1.animate{ opacity:1; -webkit-animation:animate2 1s cubic-bezier(0.6, 0.2, 0.1, 1) forwards; -moz-animation:animate1 1s cubic-bezier(0.6, 0.2, 0.1, 1) forwards; } .js-m2.listrotateY{ opacity: 0; /*transform-origin:left center 0;*/ transform-origin: 36% 50% 0; transform: rotateY(45deg); -webkit-transform: rotateY(45deg); -moz-transform: rotateY(45deg); transition:all 1s cubic-bezier(0.6, 0.2, 0.1, 1); -webkit-transition:all 1s cubic-bezier(0.6, 0.2, 0.1, 1); } .js-m2.listrotateY.animate{ opacity: 1; transform: rotateY(0); -webkit-transform: rotateY(0); -moz-transform: rotateY(0); } .js-m2.opacity1{ opacity:0; transition:all 1s cubic-bezier(0.6, 0.2, 0.1, 1); -webkit-transition:all 1s cubic-bezier(0.6, 0.2, 0.1, 1); } .js-m2.opacity1.animate{ opacity:1; } .js-m2.banner-animate1{ opacity:0; transform:translate3d(0,100px,0) scale3d(1.4,1.4,1); -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .js-m2.banner-animate1.animate{ opacity:1; transform:translate3d(0,0,0) scale3d(1,1,1); } .js-m2.banner-animate2{ opacity:0; transform:translate3d(0,-100px,0) scale3d(1.4,1.4,1); -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .js-m2.banner-animate2.animate{ opacity:1; transform:translate3d(0,0,0) scale3d(1,1,1); } .delay_1_1s{ -webkit-transition-delay:.2s; -moz-transition-delay:.2s; -webkit-animation-delay:.2s !important; -moz-animation-delay:.2s !important; } .delay_1s{ -webkit-transition-delay:.3s; -moz-transition-delay:.3s; -webkit-animation-delay:.3s !important; -moz-animation-delay:.3s !important; } .delay_2s{ -webkit-transition-delay:.4s; -moz-transition-delay:.4s; -webkit-animation-delay:.4s !important; -moz-animation-delay:.4s !important; } .delay_3s{ -webkit-transition-delay:.5s; -moz-transition-delay:.5s; -webkit-animation-delay:.5s !important; -moz-animation-delay:.5s !important; } .delay_4s{ -webkit-transition-delay:.6s !important; -moz-transition-delay:.6s !important; -webkit-animation-delay:.6s !important; -moz-animation-delay:.6s !important; } .delay_9s{ -webkit-transition-delay:.9s !important; -moz-transition-delay:.9s !important; -webkit-animation-delay:.9s !important; -moz-animation-delay:.9s !important; } .delay_10s{ -webkit-transition-delay:1s !important; -moz-transition-delay:1s !important; -webkit-animation-delay:1s !important; -moz-animation-delay:1s !important; } .delay_11s{ -webkit-transition-delay:1.1s !important; -moz-transition-delay:1.1s !important; -webkit-animation-delay:1.1s !important; -moz-animation-delay:1.1s !important; } .delay_12s{ -webkit-transition-delay:1.2s !important; -moz-transition-delay:1.2s !important; -webkit-animation-delay:1.2s !important; -moz-animation-delay:1.2s !important; } @keyframes animate1{ 0% { opacity:0; transform:translate3d(0,50px,0); } 100%{ opacity:1; transform:translate3d(0,0,0); } } @keyframes animate2{ 0% { opacity:0; transform:translate3d(50px,0,0); } 100%{ opacity:1; transform:translate3d(0,0,0); } } @keyframes animate3{ 0% { transform:translate3d(0,50px,0); } 100%{ transform:translate3d(0,0,0); } }