.inner-section { padding-top: 70px; } .inner-section .sec-name { font-size: 40px; font-weight: bold; margin-bottom: 13px; } .inner-section .sec-desc { font-size: 24px; color: #666666; font-weight: 300; margin-bottom: 40px; } .inner-section .sec-head.white .sec-name, .inner-section .sec-head.white .sec-desc { color: #fff; } .inner-section .sec-more { display: block; margin: 50px auto; position: relative; z-index: 3; } .about-left { width: 710px; } .about-left .about-content { color: #999999; line-height: 32px; } .about-right { width: 560px; height: 420px; margin-left: 25px; position: relative; } .about-right img { position: absolute; top: 0; left: 0; } .about-param { margin-top: 80px; margin-bottom: 80px; } .about-param .item { text-align: center; } .about-param .item .item-icon { margin: 0 auto; width: 100px; height: 100px; text-align: center; position: relative; z-index: 2; } .about-param .item .item-icon::after { content: ''; border-radius: 50%; background-image: -moz-linear-gradient(-54deg, #bcd4ff 0%, rgba(209, 226, 255, 0) 100%); background-image: -webkit-linear-gradient(-54deg, #bcd4ff 0%, rgba(209, 226, 255, 0) 100%); background-image: -ms-linear-gradient(-54deg, #bcd4ff 0%, rgba(209, 226, 255, 0) 100%); opacity: 0.502; position: absolute; width: 46px; height: 46px; bottom: 10px; right: 0; z-index: 0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .about-param .item .item-icon svg { width: 80px; height: 80px; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; } .about-param .item .item-icon svg path { fill: #254a8a; } .about-param .item .item-desc { font-size: 16px; color: #666666; line-height: 24px; } .about-param .item:hover .item-icon::after { background-image: -moz-linear-gradient(-54deg, #ffc8c7 0%, rgba(255, 210, 210, 0.01) 99%, #ffd2d2 100%); background-image: -webkit-linear-gradient(-54deg, #ffc8c7 0%, rgba(255, 210, 210, 0.01) 99%, #ffd2d2 100%); background-image: -ms-linear-gradient(-54deg, #ffc8c7 0%, rgba(255, 210, 210, 0.01) 99%, #ffd2d2 100%); } .about-param .item:hover .item-icon svg path { fill: #dd3834; } .about-param .item:hover .item-desc { color: #dd3834; } .sec-cultrue { background: url("../Image/company/cultrue-bg.jpg") center no-repeat fixed; height: 820px; } .sec-cultrue .cultrue-box { margin-top: 180px; } .sec-cultrue .cultrue-box .item { padding: 35px 35px 35px 50px; height: 280px; background-color: #FFFFFF; box-shadow: 0px 0px 12.61px 0.39px rgba(0, 0, 0, 0.15); -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .sec-cultrue .cultrue-box .item .item-icon { width: 50px; height: 50px; } .sec-cultrue .cultrue-box .item .item-icon .icon { width: 100%; height: 100%; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .sec-cultrue .cultrue-box .item .item-icon .icon path { fill: #e43833; } .sec-cultrue .cultrue-box .item .item-name { font-size: 24px; font-weight: bold; color: #333333; line-height: 2; margin-bottom: 5px; } .sec-cultrue .cultrue-box .item .item-desc { color: #666666; line-height: 26px; } .sec-cultrue .cultrue-box .item:hover { background-color: #ea4440; } .sec-cultrue .cultrue-box .item:hover .item-icon svg path { fill: #FFFFFF; } .sec-cultrue .cultrue-box .item:hover .item-name { color: #FFFFFF; } .sec-cultrue .cultrue-box .item:hover .item-desc { color: #FFFFFF; } .sec-history { height: 800px; background: url("../Image/company/history-bg.jpg") bottom no-repeat; position: relative; } .sec-history::after { content: ''; position: absolute; width: 100%; height: 100%; z-index: 0; bottom: 0; background: url("../Image/company/overlay-img.png") bottom no-repeat; } .swiper-top { position: relative; } .history-year-swiper { position: relative; } .history-year-swiper .history-item { cursor: pointer; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); text-align: center; } .history-year-swiper .history-item .year-num { color: #cccccc; font-size: 100px; } .history-year-swiper .swiper-slide-active, .history-year-swiper .swiper-slide-duplicate-active { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .history-year-swiper .swiper-slide-active .year-num, .history-year-swiper .swiper-slide-duplicate-active .year-num { color: #de3e3a; } .prev-next { position: absolute; width: 45px; height: 45px; background-color: #8b8b8b; margin: auto; top: 0; bottom: 0; z-index: 3; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .prev-next i { width: 10px; height: 1px; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .prev-next i::before, .prev-next i::after { content: ''; position: absolute; width: 100%; height: 100%; background: #fff; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .prev-next i::before { transform: rotate(45deg); } .prev-next i::after { transform: rotate(-45deg); } .prev-next.prev { left: -60px; } .prev-next.prev i::before, .prev-next.prev i::after { transform-origin: left; } .prev-next.next { right: -60px; } .prev-next.next i::before, .prev-next.next i::after { transform-origin: right; } .prev-next:hover { background-color: #de3e3a; } .history-txt { width: 500px; margin: 0 auto; } .history-txt .history-con { display: none; position: relative; } .history-txt .history-con::before { content: ''; display: block; width: 1px; height: 48px; margin: 0 auto 30px; transform-origin: top; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); background-color: #de3e3a; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .history-txt .history-con.active { display: block; } .history-txt .history-con.active::before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } .history-txt .history-con .wrap p { padding-left: 20px; position: relative; font-size: 16px; color: #333333; overflow: hidden; white-space: nowrap; -ms-text-overflow: ellipsis; text-overflow: ellipsis; height: 62px; font-size: 16px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .history-txt .history-con .wrap p::before { content: ''; width: 11px; height: 11px; background: #999999; border-radius: 50%; position: absolute; margin: auto; top: 6px; left: 0; z-index: 2; } .history-txt .history-con .wrap p::after { content: ''; height: 100%; top: 0; width: 0; border-left: 1px solid #eee; position: absolute; left: 5px; z-index: 0; } .history-txt .history-con .wrap p:first-child { color: #ec4844; } .history-txt .history-con .wrap p:first-child::after { top: 8px; } .history-txt .history-con .wrap p:first-child span { color: #ec4844; } .history-txt .history-con .wrap p:first-child::before { background-color: #ec4844; } .history-txt .history-con .wrap p span { color: #999999; margin-right: 5px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .history-txt .text-more i { display: block; margin: 3px; width: 3px; height: 3px; border-radius: 50%; background-color: CurrentColor; color: #666666; position: relative; } .sec-honor { height: 800px; background: url("../Image/company/honor-bg.jpg") bottom/cover no-repeat; } .sec-honor .honor-title { font-size: 36px; color: #ffffff; text-align: center; } .social-box .item { height: 365px; text-align: center; padding-top: 80px; } .social-box .item .item-icon { width: 126px; height: 126px; border-radius: 50%; background-color: #fff; margin: 0 auto 20px; position: relative; } .social-box .item .item-icon::after { content: ''; width: 40px; height: 40px; position: absolute; z-index: 0; right: 20px; bottom: 25px; border-radius: 50%; background-image: -moz-linear-gradient(-54deg, #bcd4ff 0%, rgba(209, 226, 255, 0) 100%); background-image: -webkit-linear-gradient(-54deg, #bcd4ff 0%, rgba(209, 226, 255, 0) 100%); background-image: -ms-linear-gradient(-54deg, #bcd4ff 0%, rgba(209, 226, 255, 0) 100%); opacity: 0.502; } .social-box .item .item-icon .icon { width: 68px; height: 68px; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; } .social-box .item .item-name { font-size: 18px; line-height: 2; color: #fff; } .social-box .item:nth-child(1) { background: url("../Image/company/social-bg-1.jpg"); } .social-box .item:nth-child(1) .item-icon::after { background-image: -moz-linear-gradient(-54deg, #bcd4ff 0%, rgba(209, 226, 255, 0) 100%); background-image: -webkit-linear-gradient(-54deg, #bcd4ff 0%, rgba(209, 226, 255, 0) 100%); background-image: -ms-linear-gradient(-54deg, #bcd4ff 0%, rgba(209, 226, 255, 0) 100%); } .social-box .item:nth-child(1) .icon path { fill: #254077; } .social-box .item:nth-child(2) { background: url("../Image/company/social-bg-2.jpg"); } .social-box .item:nth-child(2) .item-icon::after { background-image: -moz-linear-gradient(-54deg, #f46461 0%, rgba(209, 226, 255, 0) 100%); background-image: -webkit-linear-gradient(-54deg, #f46461 0%, rgba(209, 226, 255, 0) 100%); background-image: -ms-linear-gradient(-54deg, #f46461 0%, rgba(209, 226, 255, 0) 100%); } .social-box .item:nth-child(2) .icon path { fill: #e63a36; } .social-box .item:nth-child(3) { background: url("../Image/company/social-bg-3.jpg"); } .social-box .item:nth-child(3) .item-icon::after { background-image: -moz-linear-gradient(-54deg, #60a868 0%, rgba(209, 226, 255, 0) 100%); background-image: -webkit-linear-gradient(-54deg, #60a868 0%, rgba(209, 226, 255, 0) 100%); background-image: -ms-linear-gradient(-54deg, #60a868 0%, rgba(209, 226, 255, 0) 100%); } .social-box .item:nth-child(3) .icon path { fill: #60a868; }