/*@keyframes rotation { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } } @keyframes rotation1 { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } } @keyframes rotation2 { from { transform: rotateY(-45deg); } to { transform: rotateY(-405deg); } } @keyframes rotation3 { from { transform: rotateY(-90deg); } to { transform: rotateY(-450deg); } } @keyframes rotation4 { from { transform: rotateY(-135deg); } to { transform: rotateY(-495deg); } } @keyframes rotation5 { from { transform: rotateY(-180deg); } to { transform: rotateY(-540deg); } } @keyframes rotation6 { from { transform: rotateY(-225deg); } to { transform: rotateY(-585deg); } } @keyframes rotation7 { from { transform: rotateY(-270deg); } to { transform: rotateY(-630deg); } } @keyframes rotation8 { from { transform: rotateY(-315deg); } to { transform: rotateY(-675deg); } }*/ @keyframes rotation { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } } @media (max-width:1300px){ .pointContainer{ display: none !important; } } /* 灏忓睆骞曪紙骞虫澘锛屽ぇ浜庣瓑浜� 768px锛� */ @media (max-width: 1200px) { .play{ display:none !important; } .caursel3d { width: 136px; height: 100px; top: 50px; perspective: 1200px; } #carousel figure { width: 136px; height: 100px; } /*#carousel figure:nth-child(1) { transform: rotateY(0deg) translateZ(180px); } #carousel figure:nth-child(2) { transform: rotateY(51.4deg) translateZ(180px); } #carousel figure:nth-child(3) { transform: rotateY(96.4deg) translateZ(180px); } #carousel figure:nth-child(4) { transform: rotateY(141.4deg) translateZ(180px); } #carousel figure:nth-child(5) { transform: rotateY(186.4deg) translateZ(180px); } #carousel figure:nth-child(6) { transform: rotateY(231.4deg) translateZ(180px); } #carousel figure:nth-child(7) { transform: rotateY(276.4deg) translateZ(180px); }*/ /*#carousel figure:nth-child(8) { transform: rotateY(315deg) translateZ(180px); }*/ #carousel figure:nth-child(1) { transform: rotateY(0deg) translateZ(180px); } #carousel figure:nth-child(2) { transform: rotateY(45deg) translateZ(180px); } #carousel figure:nth-child(3) { transform: rotateY(90deg) translateZ(180px); } #carousel figure:nth-child(4) { transform: rotateY(135deg) translateZ(180px); } #carousel figure:nth-child(5) { transform: rotateY(180deg) translateZ(180px); } #carousel figure:nth-child(6) { transform: rotateY(225deg) translateZ(180px); } #carousel figure:nth-child(7) { transform: rotateY(270deg) translateZ(180px); } #carousel figure:nth-child(8) { transform: rotateY(315deg) translateZ(180px); } .caursel3d-container { height: 150px; } .galleryrow .item:hover span, .galleryrow2 .item:hover span { font-size: 1.4rem; } } /* 涓瓑灞忓箷锛堟闈㈡樉绀哄櫒锛屽ぇ浜庣瓑浜� 992px锛� */ @media (min-width: 1200px) { /* .responsibility .menus { padding: 0 100px; }*/ .caursel3d { width: 336px; height: 208px; top: 100px; perspective: 2100px; } #carousel figure { width:300px; border-bottom: 5px solid #d5b870; /*height: 600px;*/ } #carousel figure:nth-child(1) { transform: rotateY(0deg) translateZ(480px); } #carousel figure:nth-child(2) { transform: rotateY(51.4deg) translateZ(480px); } #carousel figure:nth-child(3) { transform: rotateY(102.8deg) translateZ(480px); } #carousel figure:nth-child(4) { transform: rotateY(154.2deg) translateZ(480px); } #carousel figure:nth-child(5) { transform: rotateY(205.6deg) translateZ(480px); } #carousel figure:nth-child(6) { transform: rotateY(257deg) translateZ(480px); } #carousel figure:nth-child(7) { transform: rotateY(308.4deg) translateZ(480px); } /* #carousel figure:nth-child(8) { transform: rotateY(315deg) translateZ(480px); }*/ /*#carousel figure:nth-child(1) { transform: rotateY(0deg) translateZ(480px); } #carousel figure:nth-child(2) { transform: rotateY(45deg) translateZ(480px); } #carousel figure:nth-child(3) { transform: rotateY(90deg) translateZ(480px); } #carousel figure:nth-child(4) { transform: rotateY(135deg) translateZ(480px); } #carousel figure:nth-child(5) { transform: rotateY(180deg) translateZ(480px); } #carousel figure:nth-child(6) { transform: rotateY(225deg) translateZ(480px); } #carousel figure:nth-child(7) { transform: rotateY(270deg) translateZ(480px); } #carousel figure:nth-child(8) { transform: rotateY(315deg) translateZ(480px); }*/ .caursel3d-container { position: relative; } .video, .picture { width: 30px; height: 28px; } .play { width: 48px; height: 48px; } .item span { font-size: 1.8rem; } .item:hover span { font-size: 2.4rem; } .china-content, .special-content { margin-left: 90px; width: 1100px; } .china-item { margin: 10px; } .special-item img { width: 540px; height: auto; border-radius: 15px; } .show-item { width: 100%; height: 118px; } .showroom { height: 500px; } .show-tips { margin-top: -77px; } } header { height: auto !important; } .col-xs-6 { padding: 0 !important; } /* 闁挎氨鍋� */ .anchorContainer { position: fixed; right: 50px; top: 25%; height: 180px; width: 30px; background-color: transparent; padding-right: 0; border-radius: 5px; behavior:url(/cms-chng-theme/js/PIE.htc); -ms-behavior:url(/cms-chng-theme/js/PIE.htc); z-index: 999; visibility: hidden; transition: all .3s; } .pointContainer { width: 30px; height: 30px; } .pointContainer a { display: inline-block; width: 10px; height: 10px; border-radius: 50px; behavior:url(/cms-chng-theme/js/PIE.htc); -ms-behavior:url(/cms-chng-theme/js/PIE.htc); background-color: #949494; } .pointContainer a:hover { transform: scale(1.3); } .actAnchor a { display: inline-block; width: 10px; height: 25px; border-radius: 50px; behavior:url(/cms-chng-theme/js/PIE.htc); -ms-behavior:url(/cms-chng-theme/js/PIE.htc); background-color: #0054A7; } /* 閺備即妞堟稉顓炵妇 */ .news-container { position: relative; width: 100%; height: 100%; padding: 60px 0; background-color: #f6f6f6; } .news { position: relative; } .news .more { top: -10px; } .news-radio { position: absolute; right: 10px; top: 0; width: 100px; font-size: 0; height: 30px; border: 1px solid #b9b9b9; } .news-radio span { display: inline-block; width: 50%; height: 100%; font-size: 1.2rem; text-align: center; line-height: 30px; cursor: pointer; } .atvSelect { background-color: #0054a7; color: #fff; } .image-card { /* margin-top: 20px; */ margin: 60px -15px 0 -15px; } .image-subcard { margin-bottom: 0; margin: 15px auto; cursor: pointer; overflow: hidden; padding: 0 !important; background-color: #fff; border: 1px solid #e8e8e8; box-shadow: 0 5px 5px #e8e8e8;} .image-subcard .caption { padding: 3%; } .atvimg { overflow: hidden; transition: 300ms; } .atvimg img { width: 50%; transition: all .3s; } .share { position: relative; margin-top: 16px; width: 100%; } .share span { color: #333; font-size: 1.2rem; margin-left: 11px; } .share .share-img { position: absolute; right: 0; bottom: 0; display: none; margin-right: 19px; } .qrcode-img { display: inline-block; position: relative; left: -5px; } .share img { width: 18px; height: 18px; } .image-subcard:hover .atvimg img { transform: translateX(-100%); transform: scale(1.1) \9; transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; -o-transition-duration: .5s; } .image-subcard:hover .atvimg img:first-child { z-index: 10; } .image-subcard:hover .text { color: #0054a7; animation: textmove .3s alternate; animation-duration: .3s; -moz-animation-duration: .3s; -webkit-animation-duration: .3s; -o-animation-duration: .3s; } .image-subcard:hover .share > div { display: block; transition-duration: .3s; -moz-transition-duration: .3s; -webkit-transition-duration: .3s; -o-transition-duration: .3s; } .qrcode { position: absolute; top: -200px; left: 10%; margin-left: -75px; width: 140px; height: 160px; background-color: #fff; border: 1px solid #d9d9d9; } @keyframes textmove { 0% { transform: translateX(-8px); } 25% { transform: translateX(0px); } 50% { transform: translateX(8px); } 100% { transform: translateY(0px); } } .news-list { display: none; position: relative; width: 100%; margin: 30px 0; z-index: 10; top: 20px; } .news-leader-list { display: none; position: relative; margin: 30px 15px; z-index: 6; top: 20px; } .news-first-list { display: none; position: relative; margin: 30px 15px; z-index: 10; top: 20px; } .news-mediarep-list { display: none; position: relative; margin: 30px 15px; z-index: 10; top: 20px; } .news-advisory-list { display: none; position: relative; margin: 30px 15px; z-index: 10; top: 20px; } .news-list-item { position: relative; width: 100%; cursor: pointer; padding: 20px 0; background-color: #fff; box-sizing: border-box; border-bottom: 1px solid #d9d9d9; } .news-item-img { position: absolute; float: left; } .news-index { position: relative; margin: 0 auto; top: 20px; border: 1px solid #0054A7; color: #0054A7; font-size: 30px; line-height: 50px; text-align: center; } .news-date { position: relative; font-size: 18px; color: #0054A7; text-align: center; } .news-list-con { position: relative; color: #333; height: 110px; transition: .3s; padding-left: 30px; box-sizing: border-box; border-left: 1px solid #e8e8e8; } .news-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 2rem; line-height: 24px; margin-top: 10px; font-weight: 600; padding-right: 10px; } .news-detail { height: 60px; font-size: 1.4rem; line-height: 24px; margin-top: 10px; margin-right: 20px; margin-bottom: 20px; } .news-share { position: absolute; right: 20px; display: none; bottom: 20px; } .news-share img { width: 20px; height: 20px; /* margin: 0 5px; */ } .news-list-item:hover { z-index: 100; transition-duration: .3s; box-shadow: 10px 10px 5px #e8e8e8; } .news-list-item:hover .news-index { background-color: #0054A7; color: #fff !important; } .news-list-item .news-item-img img { transition: 300ms; transform: scale(1); } .news-list-item:hover .news-item-img img { transform: scale(1.2); transition-duration: 0.3s; } .news-list-item:hover .news-list-con { color: #0054A7; transform: translateY(-5px); transition-duration: 0.3s; } .news-list-item:hover .news-list-con.right { transform: scale(1.05); transition-duration: 0.3s; } .news-list-item:hover .news-list-con.right .news-detail { height: auto; transition-duration: 0.3s; } .news-list-item:hover .news-share { display: block; transition-duration: 0.3s; } /* 绀句細璐d换 */ .responsibility-container { position: relative; padding: 40px 0; width: 100%; background-image: url(../images/response/bg_3d.png); background-position: center; background-size: 100% 85%; background-repeat: no-repeat; } .responsibility { position: relative; } .responsibility .title span { background-color: #fff; } .caursel3d-container { position: relative; } .showSelectImg-container { display: none; position: relative; width: 100%; height: 100%; overflow: hidden; } .showSelectImg { display: block; width: 600px; height: 100%; margin: 0 auto; } .responsibility .more { top: 50px; } /* 420,260 */ /* .carousel3d { */ .caursel3d { display: block; position: relative; margin: auto; } #carousel { position: absolute; width: 100%; height: 100%; margin: auto; transform-style: preserve-3d; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; animation-name: rotation; } #carousel:hover { animation-play-state: paused; } #carousel figure { display: block; position: absolute; left: 10px; top: 10px; overflow: hidden; } .caursel3d img{ cursor: pointer; transition: all .5s ease; width: 100%; height: 100%; } .caursel3d img:hover{ transform: scale(1.2, 1.2); } /* 閺冩湹鍞崡搴ゅ厴 */ .huaneng-container { position: relative; padding: 60px 0; width: 100%; } .huaneng { position: relative; } .huaneng .title span { background-color: #fff; } .huaneng-content { margin: 70px 0 20px 0; width: 100%; height: 100%; } .gallery { position: relative; width: 100%; } .galleryrow, .galleryrow2 { position: relative; width: 100%; font-size: 0; height: 300px; } .item { position: absolute; height: 300px; cursor: pointer; overflow: hidden; transition: all .3s !important; } .i1 { left: 0; right: 75%; } .i2 { left: 25%; right: 49.5%; } .i3 { left: 50%; right: 25%; } .i4 { left: 75%; right: 0; } .i5 { left: 0; right: 66.6%; } .i6 { left: 33.4%; right: 33.4%; } .i7 { left: 66.6%; right: 0; } /* .galleryrow:hover .item { width: 22%; } */ .item img { width: 100%; transition: 300ms; } .item span { position: absolute; left: 20px; bottom: 20px; color: #fff; z-index: 3; } .video, .picture { display: inline-block; position: absolute; left: 20px; top: 20px; z-index: 5; } .video { background-size: contain; -ms-behavior: url(/cms-chng-theme/js/backgroundsize.min.htc); behavior: url(/cms-chng-theme/js/backgroundsize.min.htc); z-index: 5; background-image: url(../images/gallery/video.png); } .picture { background-size: contain; -ms-behavior: url(/cms-chng-theme/js/backgroundsize.min.htc); behavior: url(/cms-chng-theme/js/backgroundsize.min.htc); z-index: 5; background-image: url(../images/gallery/picture.png); } .video-container { position: relative; width: 100%; height: 100%; } .item-video { height: 100%; width: 100%\0; position: absolute; top: 0!important; left: 0!important; } .play { position: absolute; left: 50%; top: 50%; /* width: 48px; height: 48px; */ margin-left: -24px; margin-top: -24px; background-image: url(../images/gallery/play.png); background-size: contain; -ms-behavior: url(/cms-chng-theme/js/backgroundsize.min.htc); behavior: url(/cms-chng-theme/js/backgroundsize.min.htc); z-index: 5; } .item:hover { transition-duration: 0.4s; } .videoitem2:hover { flex: 2.3; transition-duration: 0.4s; } .videoitem2:hover .play { display: none\0; transform: scale(0.3); opacity: 0; transform: rotate(360deg); transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; -o-transition-duration: .5s; } .videoitem2:hover .video { display: none\0; transform: translateY(-100px); opacity: 0; transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; -o-transition-duration: .5s; } .item:hover span { /* font-size: 2.4rem; */ /* border-bottom: 2px solid #fff; */ transition-duration: 0.4s; } .item:hover::after { display: none; } .tab-content { position: relative; width: 100%; height: 100%; } .china, .special { display: none; position: relative; width: 100%; height: 100%; } #china1 { width: 100%; } .timeline-wrapper { position: absolute; top: 40px; /* top: 50%; */ /* margin-top: -150px; */ float: left; width: 120px; height: 300px; } .timeline { position: relative; width: 100%; height: 100%; overflow: hidden; /* position: absolute; top: 50%; margin-top: -150px; float: left; width: 120px; height: 300px; overflow: hidden; */ } .timeline-pre { position: absolute; top: -30px; left: 50%; margin-left: -10px; width: 20px; height: 20px; cursor: pointer; background-image: url(../images/icon/to-top.png); background-position: center; background-size: contain; -ms-behavior: url(/cms-chng-theme/js/backgroundsize.min.htc); behavior: url(/cms-chng-theme/js/backgroundsize.min.htc); background-repeat: no-repeat; } .timeline-next { position: absolute; left: 50%; bottom: -30px; margin-left: -10px; width: 20px; height: 20px; cursor: pointer; background-image: url(../images/icon/to-bottom.png); background-position: center; background-size: contain; -ms-behavior: url(/cms-chng-theme/js/backgroundsize.min.htc); behavior: url(/cms-chng-theme/js/backgroundsize.min.htc); background-repeat: no-repeat; } .timeline .line { position: relative; width: 20px; height: 100%; margin: 0 auto; transform: translateY(0); transition: all .2s; } .timeline .line::before { content: ""; position: absolute; left: 10px; top: 0; width: 1px; height: 1000%; background-color: #000; } .time-point { position: relative; width: 20px; height: 20px; border: 1px solid #000; border-radius: 50px; behavior:url(/cms-chng-theme/js/PIE.htc); -ms-behavior:url(/cms-chng-theme/js/PIE.htc); margin-top: 145px; background-color: #fff; cursor: pointer; } .time-point span { position: absolute; left: -40px; width: 40px; height: 20px; font-size: 1.4rem; color: #000; } .time-point::after { content: ""; position: absolute; background-color: #000; width: 10px; height: 10px; left: 50%; top: 50%; margin-left: -5px; margin-top: -5px; border-radius: 50px; behavior:url(/cms-chng-theme/js/PIE.htc); -ms-behavior:url(/cms-chng-theme/js/PIE.htc); } .timeline .nav-tabs { border: none !important; } .timeline .active-time-point { border-color: #0054A7; } .timeline .active-time-point span { color: #0054A7; } .timeline .active-time-point::after { background-color: #0054A7; } .time-point:first-child { margin: 0; } .china-content, .special-content { float: left; margin-left: 90px; width: 1110px; margin-top: 20px; text-align: center; } .china-content p { margin-top: 25px; color: #333; font-size: 1.6rem; } .china-item { cursor: pointer; padding: 10px; } .china-item img { width: 100%; height: auto; } .china-item:hover img { transform: scale(1.1); transition-duration: .3s; } .special-item { padding: 10px; } .special-item img { /* width: 540px; height: 160px; */ margin: 10px auto; cursor: pointer; } .special-item img:hover { transform: scale(1.05); transition-duration: .3s; } /* 閸楀氦鍏樼仦鏇炲泛 */ .showroom { position: relative; /* width: 100%; */ /* height: 500px; */ } .showroom .backImg { width: 100%; height: 100%; margin: 0 auto; } .show-arrow { position: absolute; top: 0; left: 50%; /* width: 100%; */ height: 100%; margin-left: -600px; z-index: 10; } .show-arrow-left { float: left; width: 200px; height: 22px; margin-top: 239px; margin-left: 50px; animation: heart 0.5s ease-in-out 1.5s infinite alternate; animation-duration: .5s; -moz-animation-duration: .5s; -webkit-animation-duration: .5s; -o-animation-duration: .5s; } .show-arrow-right { float: right; width: 200px; height: 22px; margin-top: 239px; margin-right: 50px; animation: heart 0.5s ease-in-out 1.5s infinite alternate; } .show-tips { position: absolute; width: 400px; height: 134px; left: 50%; top: 30%; z-index: 10; margin-left: -200px; font-size: 30px; text-align: center; color: #fff; } .playBtn { position: absolute; width: 80px; height: 80px; font-size: 14px; top: 50%; margin-top: -40px; left: 50%; margin-left: -40px; background-color: #0054a7; border-radius: 50px; behavior:url(/cms-chng-theme/js/PIE.htc); -ms-behavior:url(/cms-chng-theme/js/PIE.htc); line-height: 80px; text-align: center; color: #fff; cursor: pointer; z-index: 10; box-sizing: border-box; } .playBtnWater { position: absolute; width: 90px; height: 90px; font-size: 14px; top: 50%; margin-top: -45px; left: 50%; margin-left: -45px; border-radius: 50px; behavior:url(/cms-chng-theme/js/PIE.htc); -ms-behavior:url(/cms-chng-theme/js/PIE.htc); background-color: rgba(0, 84, 167, 0.5); cursor: pointer; z-index: 1; animation: btnWater 2.5s infinite 1s; box-sizing: border-box; } .show-arrow img { width: 200px; height: 22px; } @keyframes btnWater { from { transform: scale(1); } to { transform: scale(1.3); opacity: 0; } } @keyframes heart { from { transform: translate(0, 0); } to { transform: translate(10px, 0); } } /* 鎼存洟鍎撮懣婊冨礋閹稿鎸� */ .show-bottom { position: relative; margin: 60px auto; } .show-bottom-con { margin: 0 -15px; } .show-bottom p { display: inline-block; position: absolute; bottom: 10px; text-align: center; width: 100%; } .col-55 { position: relative; float: left; /* margin: 8px; */ padding: 0; } /*旋转*/ /*.caursel3d-container { position: relative; } .caursel3d { display: block; position: relative; margin: auto; } #carousel { position: absolute; width: 100%; height: 100%; margin: auto; transform-style: preserve-3d; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; animation-name: rotation; } #carousel figure { display: block; position: absolute; left: 10px; top: 10px; overflow: hidden; } .caursel3d img { cursor: pointer; transition: all .5s ease; width: 100%; height: 100%; } #carousel figure { display: block; position: absolute; left: 10px; top: 10px; overflow: hidden; } @media (min-width: 1200px){ .caursel3d-container { position: relative; } #carousel figure { width: 336px; height: 208px; } .caursel3d { width: 336px; height: 208px; top: 100px; perspective: 2100px; } #carousel figure { width: 336px; height: 208px; } #carousel figure:nth-child(1) { transform: rotateY(0deg) translateZ(480px); } #carousel figure:nth-child(2) { transform: rotateY(45deg) translateZ(480px); } #carousel figure:nth-child(3) { transform: rotateY(90deg) translateZ(480px); } #carousel figure:nth-child(4) { transform: rotateY(135deg) translateZ(480px); } #carousel figure:nth-child(5) { transform: rotateY(180deg) translateZ(480px); } #carousel figure:nth-child(6) { transform: rotateY(225deg) translateZ(480px); } #carousel figure:nth-child(7) { transform: rotateY(270deg) translateZ(480px); } #carousel figure:nth-child(3) { transform: rotateY(315deg) translateZ(480px); } }*/ #carousel figure{background: #fff;width: 370px;} #carousel .h3-h3{color: rgb(15, 69, 142);font-size: 24px;line-height: 30px;margin: 10px 0 10px; text-align: center;} #carousel .p3-p3{color: rgb(102, 102, 102);font-size: 14px;line-height: 24px;padding: 0 10px;margin-bottom: 10px;text-align: center;height: 150px;} .rw-img{width: 330px;height: 330px;overflow: hidden;margin: 20px auto;box-sizing: border-box;} .leading-figures-bottom{ height: 1100px; background-image: url(../images/zq-bg.png); background-size: 100% 1100px; background-repeat: no-repeat; }