@charset "utf-8"; /* CSS Document */ h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; } a, a:hover, a:visited { color: inherit; text-decoration: none!important; } ul li { list-style: none; } /*****header*******/ .header { width: 100%; height: 80px; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.1); position: fixed; top: 0; left: 0; z-index: 9; } .header>.container { height: 100%; display: flex; align-items: center; justify-content: space-between; } .header>.container::before, .header>.container::after { display: none; } .headerNav { width: calc(94% - 330px); display: flex; align-items: center; justify-content: center; } .headerNav>li { width: 15%; text-align: center; } .headerNav>li>a, .headerNav>li>span { font-size: 16px; color: #333333; line-height: 80px; letter-spacing: 1px; cursor: pointer; } .headerNav>li>a::after, .headerNav>li>span::after { content: ''; display: inline-block; width: 9px; height: 6px; background: url(../images/head.png) center/cover no-repeat; margin-left: 4px; } .headerNav>li:nth-child(1)>a::after, .headerNav>li:nth-child(5)>a::after { display: none; } .headerNav>li:hover>a, .headerNav>li:hover>span/*, .headerNav>li.active>a, .headerNav>li.active>span*/ { color: #ea5404; } .headerNav>li:hover>a::after, .headerNav>li:hover>span::after { background: url(../images/head_on.png) center/cover no-repeat; } .headerDown { width: 100%; text-align: left; box-shadow: 0 0 5px rgba(0,0,0,0.1); background: -webkit-linear-gradient(to right, #f5f5f5 0, #f5f5f5 50%, #ffffff 50%, #ffffff 100%); background: -o-linear-gradient(to right, #f5f5f5 0, #f5f5f5 50%, #ffffff 50%, #ffffff 100%); background: -moz-linear-gradient(to right, #f5f5f5 0, #f5f5f5 50%, #ffffff 50%, #ffffff 100%); background: linear-gradient(to right, #f5f5f5 0, #f5f5f5 50%, #ffffff 50%, #ffffff 100%); position: absolute; top: 80px; left: 0; visibility: hidden; } .headerNav>li:hover .headerDown { visibility: visible; } .headerNav>li:nth-child(2) .headerDown, .headerNav>li:nth-child(3) .headerDown{ background: #fff; } .headerDown .container { display: flex; align-items: flex-start; justify-content: space-between; } .headerDown .container::before, .headerDown .container::after { display: none; } .headerLeft { width: 50%; padding: 40px 10% 20px; } .headerLeft li { position: relative; } .headerLeft li::after { content: ''; display: inline-block; width: 15px; height: 9px; background: url(../images/right.png) center/cover no-repeat; position: absolute; top: 50%; right: 20px; margin-top: -5px; } .headerLeft li:nth-child(n+2) { margin-top: 6px; } .headerLeft li a { position: relative; padding: 0 20px 0 70px; } .headerLeft li a img { position: absolute; top: 10px; left: 30px; } .headerLeft li a span { font-size: 16px; color: #333333; line-height: 40px; } .headerLeft li:hover { background-color: #ea5404; } .headerLeft li:hover span { color: #fff; } .headerLeft li::after, .headerLeft li a img:nth-child(2), .headerLeft li:hover a img { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); } .headerLeft li:hover::after, .headerLeft li:hover a img:nth-child(2) { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); } .headerRight { width: 50%; padding: 20px 10% 80px; } .headerRight p { margin-top: 20px; font-size: 14px; color: #666; } .headerRight a { margin-top: 30px; display: block; width: 200px; height: 60px; line-height: 60px; font-size: 14px; color: #fff; text-align: center; background-color: #ea5404; } .headerRight a img { margin: -4px 0 0 8px; } .headerCenter{ width: 100%; padding: 40px 0; display: flex; align-items: flex-start; justify-content: space-around; } .headerCenter h6 a{ font-size: 18px; color: #ea5404; letter-spacing: 1px; margin-bottom: 10px; } .headerCenter li>a{ font-size: 14px; color: #666; line-height: 2; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .headerCenter li>a:hover{ color:#ea5404; -webkit-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } .language { width: 110px; display: flex; align-items: center; justify-content: space-between; } .language, .language a{ font-size:18px; font-weight: bold; } .language a.active{ color: #ea5404; } /*****header*******/ /***footer***/ .footer { position: relative; } .footer_top { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; } .footerCenter { width: calc(90% - 470px); } .footerCenter p { font-size: 14px; color: #999; line-height: 2; } .footerCenter p i { margin-right: 10px; width: 16px; } .footerNav { margin-bottom: 20px; } .footerNav li { float: left; } .footerNav li a { font-size: 16px; color: #ccc; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .footerNav li:nth-child(n+2) a::before { content: ''; display: inline-block; width: 3px; height: 3px; background-color: #f5f5f5; margin: 0 15px; position: relative; bottom: 4px; } .footerNav li:hover a { color: #ea5404; } .footerLink { width: 260px; text-align: center; display: flex; align-items: flex-start; justify-content: space-between; } .footerLink p { font-size: 14px; color: #f5f5f5; text-align: center; margin-bottom: 10px; } .copy { padding: 20px 0; font-size: 14px; color: #999; background: #111; } .footer_warp { background: #222222; padding: 50px 0; } /***footer***/ /***floatWindow***/ .floatWindow{ width: 44px; height: 130px; padding-top: 10px; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); position: fixed; right: 30px; bottom: 15vh; z-index: 10; cursor: pointer; } .floatWindow_con .iconImg{ text-align: center; position: relative; } .floatWindow_con>h6{ font-size: 16px; color: #ea5404; margin: 10px auto 0; writing-mode: vertical-rl; writing-mode: tb-rl; } .floatWindow_box{ width: 280px; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); position: absolute; right: 54px; bottom: 0; display: none; } .floatWindow_box li{ display: flex; align-items: center; justify-content: flex-start; } .floatWindow_box li:nth-child(n+2){ margin-top: 20px; } .floatWindow_txt{ margin-left: 10px; } .floatWindow_txt h6{ font-size: 16px; color: #4c4c4c; letter-spacing: 1px; margin-bottom: 6px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .floatWindow_txt h5{ font-size: 14px; color: #ea5404; } .floatWindow_txt p{ font-size: 14px; color: #999999; } .floatWindow_box li:hover h6{ color: #ea5404; } /***floatWindow***/ /*****banner*******/ .banner { width: 100%; position: fixed; top: 80px; left: 0; } .indBaner video{ position:absolute; top:-40%; left:0; z-index:-1; } .indBaner_bg { height: calc(70vh - 80px); padding: 0 20%; position: relative; display: flex; align-items: center; justify-content: flex-start; } .indBaner_box * { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .indBaner .swiper-slide-active .indBaner_box * { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .indBaner .swiper-slide-active .indBaner_box * { -webkit-transition: all 0.3s ease-in-out 1s; -moz-transition: all 0.3s ease-in-out 1s; -ms-transition: all 0.3s ease-in-out 1s; -o-transition: all 0.3s ease-in-out 1s; transition: all 0.3s ease-in-out 1s; } .indBaner .swiper-slide-active .indBaner_box *:nth-child(2) { transition-delay: 1.1s; } .indBaner .swiper-slide-active .indBaner_box *:nth-child(3) { transition-delay: 1.2s; } .indBaner .swiper-slide-active .indBaner_box *:nth-child(4) { transition-delay: 1.3s; } .indBaner .swiper-slide-active .indBaner_box *:nth-child(5) { transition-delay: 1.4s; } .indBaner .swiper-slide-active .indBaner_box *:nth-child(6) { transition-delay: 1.5s; } .indBaner .swiper-slide-active .indBaner_box *:nth-child(7) { transition-delay: 1.6s; } .indBaner .swiper-slide-active .indBaner_box *:nth-child(8) { transition-delay: 1.7s; } .indBaner .swiper-slide-active .indBaner_box *:nth-child(9) { transition-delay: 1.8s; } .indBaner .swiper-slide-active .indBaner_box *:nth-child(10) { transition-delay: 1.9s; } .indBaner_box h5 { font-size: 20px; color: #fff; font-weight: bold; } .indBaner_box h6 { margin-top: 6%; font-size: 50px; color: #fff; } .indBaner_box .line { margin: 8% 0 6%; width: 40px; height: 1px; background-color: #fff; } .indBaner_box p { font-size: 18px; color: #fff; line-height: 2; } .indBaner_box a { margin-top: 6%; display: block; width: 142px; height: 52px; border: 1px solid #fff; font-size: 16px; color: #fff; line-height: 50px; font-weight: bold; text-align: center; } .indBaner_prev, .indBaner_next { position: absolute; top: calc(50% - 30px); left: 8%; cursor: pointer; z-index: 2; } .indBaner_next { left: auto; right: 8%; } .pageDown { position: absolute; left: calc(50% - 30px); bottom: 30px; z-index: 2; } .pageDown img { width: 60px; display: block; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); animation: fade 1.5s infinite ease-in-out; -moz-animation: fade 1.5s infinite ease-in-out; -webkit-animation: fade 1.5s infinite ease-in-out; -o-animation: fade 1.5s infinite ease-in-out; } .pageDown img:first-child { position: relative; top: 14px; } .pageDown img:nth-child(2) { animation-delay: 0.3s; } @keyframes fade { 0% { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); } 50% { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); } 100% { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); } } .detailBan, .detailBan2{ margin-top: 80px; position: relative; } .detailBan::after{ content: ''; display: block; width: 84%; height: 12%; background: url(../images/bannerLine.png) center/100% 100% no-repeat; position: absolute; left: 0; bottom:-1px; } .publicNav{ width: 100%; height: 70px; background-color:rgba(0,0,0, 0.7); display: flex; align-items: flex-start; justify-content: center; position: absolute; left: 0; bottom: 0; } .publicNav li{ margin: 0 2%; } .publicNav li, .publicNav li a{ height: 70px; font-size: 18px; color: #fff; line-height: 70px; overflow: hidden; text-align: center; position: relative; cursor: pointer; } .publicNav li.active, .publicNav li.active a{ color: #ea5404; } .publicNav li.active::after{ content: ''; display: block; width: 100%; height: 3px; background-color: #ea5404; position: absolute; left: 0; bottom: 0; } .publicNav.fiexd{ position: fixed; top: 80px; left: 0; z-index: 8; } /*****banner*******/ .comment_title { text-align: center; } .comment_title h6 { font-size: 42px; color: #222; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; } .comment_title p { margin-top: 20px; font-size: 16px; color: #222; line-height: 1.8; } .whiteColor h6, .whiteColor p { color: #fff; } .indWarpper .comment_title h6, .indWarpper .comment_title p { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .indWarpper .comment_title p { -webkit-transition: all 1s ease-in-out 0.3s; -moz-transition: all 1s ease-in-out 0.3s; -ms-transition: all 1s ease-in-out 0.3s; -o-transition: all 1s ease-in-out 0.3s; transition: all 1s ease-in-out 0.3s; } .comm_take { width: 200px; height: 60px; background: #ea5404; text-align: center; line-height: 60px; margin-top: 30px; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .comm_take a { color: #fff; font-size: 16px; display: block; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .comm_take a:hover { background: #002e73; } .indWarpper>div.on .comment_title h6, .indWarpper>div.on .comment_title p, .indWarpper>div.on .comm_take { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .indWarpper { margin-top: 70vh; background-color: #fff; z-index: 1; position: relative; } /* index.html */ .indSec1 { padding: 80px 0; padding-bottom: 0px; background-color: #f2f2f2; position: relative; } .indSec1 .container { position: relative; } .indSec1 .line { width: 0; overflow: hidden; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 2s ease-in-out 1s; -moz-transition: all 2s ease-in-out 1s; -ms-transition: all 2s ease-in-out 1s; -o-transition: all 2s ease-in-out 1s; transition: all 2s ease-in-out 1s; } .indSec1.on .line { width: 100%; } .indSec1_swiper { width: 100%; height: 100%; padding: 0 10px; position: absolute; top: 0; left: 0; z-index: 2; } .indSec1_swiper .swiper-slide { position: relative; /*opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px);*/ } /*.indSec1.on .indSec1_swiper .swiper-slide { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .indSec1_swiper .swiper-slide:nth-child(1) { -webkit-transition: all 0.6s ease-in-out 1.4s; -moz-transition: all 0.6s ease-in-out 1.4s; -ms-transition: all 0.6s ease-in-out 1.4s; -o-transition: all 0.6s ease-in-out 1.4s; transition: all 0.6s ease-in-out 1.4s; } .indSec1_swiper .swiper-slide:nth-child(2) { -webkit-transition: all 0.6s ease-in-out 2s; -moz-transition: all 0.6s ease-in-out 2s; -ms-transition: all 0.6s ease-in-out 2s; -o-transition: all 0.6s ease-in-out 2s; transition: all 0.6s ease-in-out 2s; } .indSec1_swiper .swiper-slide:nth-child(3) { -webkit-transition: all 0.6s ease-in-out 2.6s; -moz-transition: all 0.6s ease-in-out 2.6s; -ms-transition: all 0.6s ease-in-out 2.6s; -o-transition: all 0.6s ease-in-out 2.6s; transition: all 0.6s ease-in-out 2.6s; }*/ .indSec1_swiper .swiper-slide.prev .open-btn { top: 66%; } .indSec1_swiper .swiper-slide-prev .open-btn { top: 47%!important; } .indSec1_swiper .swiper-slide-active .open-btn { top: 46.5%; } .indSec1_swiper .swiper-slide-next .open-btn { top: 56.5%; } .indSec1_box { padding: 8%; border-radius: 10px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.3); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: none; } .indSec1_box h6 { font-size: 24px; color: #333; position:relative; } .indSec1_box h6:after{ content: ""; position: absolute; bottom: -10px; left: 0px; width: 20px; height: 2px; background: #ea5404;} .indSec1_box p { margin-top: 10%; font-size: 16px; color: #666; line-height: 1.4; /*text-align: justify;*/ } .indSec1_box a { margin-top: 6%; display: block; width: 200px; height: 60px; background-color: #ea5404; font-size: 16px; color: #fff; font-weight: bold; text-align: center; line-height: 60px; } .indSec1_box a img{margin: -4px 0 0 8px;} .indSec1_img{ /*text-align: center;*/ } .indSec1_img img { width: 30%; margin-top: 10px; } .indSec1_box .boxClose { width: 20px; height: 20px; position: absolute; top: 10px; right: 10px; cursor: pointer; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .eyesberg-card-btn { height: 50px; width: 50px; cursor: pointer; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; opacity: 1; /*z-index: 5;*/ -webkit-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition: top 0.6s ease-in-out; -moz-transition: top 0.6s ease-in-out; -ms-transition: top 0.6s ease-in-out; -o-transition: top 0.6s ease-in-out; transition: top 0.6s ease-in-out; } .eyesberg-card-btn.open-btn::before { position: absolute; display: block; content: ''; width: 300%; height: 300%; margin-left: -100%; margin-top: -100%; border-radius: 50%; background: rgba(243,84,4,.49); -webkit-animation: pulse-ring 1.25s cubic-bezier(.215, .61, .355, 1) infinite; animation: pulse-ring 1.25s cubic-bezier(.215, .61, .355, 1) infinite; z-index: -1; } .eyesberg-card-btn.open-btn .eyesberg-card-btn-lg-circle { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: .5; background-color: #ea5404; border-radius: 50%; -webkit-box-shadow: 0 0 8px rgba(0,0,0,.3); box-shadow: 0 0 8px rgba(0,0,0,.3); -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .eyesberg-card-btn.open-btn .eyesberg-card-btn-sm-circle { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; background-color: #fff; border-radius: 50%; -webkit-box-shadow: 0 0 8px rgba(0,0,0,.3); box-shadow: 0 0 8px rgba(0,0,0,.3); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; -webkit-transition-property: width, height; -o-transition-property: width, height; transition-property: width, height; } @keyframes pulse-ring { 0% { -webkit-transform:scale(.33); transform:scale(.33) } 100%, 80% { opacity:0 } } .open-btn:hover .eyesberg-card-btn-lg-circle { opacity: .75; } .open-btn:hover .eyesberg-card-btn-sm-circle { width: 25px; height: 25px; } .indSec2 { padding: 120px 0 80px; background: url(../images/indSec2_bg.jpg) center/cover no-repeat fixed; } .indSec2_swiper { margin-top: 60px; padding: 30px 0; position: relative; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); -webkit-transition: all 1.4s ease-in-out 1s; -moz-transition: all 1.4s ease-in-out 1s; -ms-transition: all 1.4s ease-in-out 1s; -o-transition: all 1.4s ease-in-out 1s; transition: all 1.4s ease-in-out 1s; } .indSec2.on .indSec2_swiper { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .indSec2_swiper .swiper-slide { /*width: 22.5%;*/ opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; -webkit-opacity: 0.5; filter: alpha(opacity=50); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .indSec2_swiper .swiper-slide-active { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } .indSec2_prev, .indSec2_next { cursor: pointer; z-index: 2; position: absolute; top: calc(50% - 30px); left: 20%; } .indSec2_next { left: auto; right: 20%; } .indSec2_box { position: relative; background: #fff; } .indSec2_box a{ display: block; } .indSec2_box span { position: absolute; left: calc(50% - 30px); bottom: -30px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec2_box:hover span{ transform: rotate(-180deg); -ms-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -o-transform: rotate(-180deg); } .indSec2_imgBox{ padding: 20px; } .indSec2_imgBox p{ margin-bottom: 20px; font-size: 20px; margin-top:10px; } .indSec2_img { overflow: hidden; } .indSec2_img img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec2_img:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .indSec2_txt { padding: 8%; background-color: #002e73; padding-bottom: 12%; } .indSec2_txt h6 { font-size: 24px; color: #fff; } .indSec2_txt p { margin-top: 15px; font-size: 16px; color: #fff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; height: 44px; } .indSec3 { margin: 80px 0; } .indSec3_list { margin-top: 60px; } .indSec3_list li { float: left; width: calc(50% - 6px); position: relative; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); } .indSec3_list li:nth-child(2n) { margin-left: 12px; -webkit-transform: translateY(calc(50% + 60px)); -ms-transform: translateY(calc(50% + 60px)); -o-transform: translateY(calc(50% + 60px)); transform: translateY(calc(50% + 60px)); } .indSec3_list li:nth-child(1) { -webkit-transition: all 1s ease-in-out 1s; -moz-transition: all 1s ease-in-out 1s; -ms-transition: all 1s ease-in-out 1s; -o-transition: all 1s ease-in-out 1s; transition: all 1s ease-in-out 1s; } .indSec3_list li:nth-child(2) { -webkit-transition: all 1s ease-in-out 1.2s; -moz-transition: all 1s ease-in-out 1.2s; -ms-transition: all 1s ease-in-out 1.2s; -o-transition: all 1s ease-in-out 1.2s; transition: all 1s ease-in-out 1.2s; } .indSec3_list li:nth-child(3) { -webkit-transition: all 1s ease-in-out 1.6s; -moz-transition: all 1s ease-in-out 1.6s; -ms-transition: all 1s ease-in-out 1.6s; -o-transition: all 1s ease-in-out 1.6s; transition: all 1s ease-in-out 1.6s; } .indSec3_list li:nth-child(4) { -webkit-transition: all 1s ease-in-out 1.8s; -moz-transition: all 1s ease-in-out 1.8s; -ms-transition: all 1s ease-in-out 1.8s; -o-transition: all 1s ease-in-out 1.8s; transition: all 1s ease-in-out 1.8s; } .indSec3.on .indSec3_list li { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .indSec3.on .indSec3_list li:nth-child(2n) { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(60px); -ms-transform: translateY(60px); -o-transform: translateY(60px); transform: translateY(60px); } .indSec3_list li:nth-child(n+3) { margin-top: 12px; } .indSec3_img { overflow: hidden; } .indSec3_img img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec3_list li:hover .indSec3_img img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .indSec3_txt { width: 80%; text-align: center; position: absolute; top: 50%; left: 10%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec3_txt h6 { font-size: 24px; color: #fff; text-transform: uppercase; position: relative; } .indSec3_txt h6:after { position: absolute; bottom: -20px; width: 20px; height: 2px; content: ""; background: #ea5404; left: 50%; margin-left: -10px; } .indSec3_txt p { margin-top: 25px; color: #fff; line-height: 1.4; display: inline-block; font-size: 16px; opacity: 0; position: relative; top: 50px; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec3_list li:hover .indSec3_txt { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .indSec3_list li:hover .indSec3_txt p { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); top: 0px; } .indSec3_txt a:nth-child(n+2)::before { content: ''; display: inline-block; width: 2px; height: 15px; background-color: #fff; margin: 0 10px; position: relative; top: 2px; transform: rotate(20deg); -ms-transform: rotate(20deg); -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); } .indSec3_more { margin-top: 120px; text-align: center; } .indSec3_more a { display: inline-block; width: 200px; height: 60px; border: 1px solid #002e73; font-size: 16px; color: #002e73; line-height: 60px; position: relative; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec3_more a::before, .indSec3_more a::after { content: ''; display: block; width: 100%; height: 50%; background-color: #ea5404; position: absolute; top: 0; right: 100%; z-index: -1; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec3_more a::after { top: auto; right: auto; left: 100%; bottom: 0; } .indSec3_more a:hover { color: #fff; border-color: #ea5404; } .indSec3_more a:hover::before { right: 0; } .indSec3_more a:hover::after { left: 0; } .indSec3_more img{ position: absolute; right: 26px; top: calc(50% - 3px); } .indSec3_more img:nth-child(2){ display: none; } .indSec3_more:hover img:nth-child(1){ display: none; } .indSec3_more:hover img:nth-child(2){ display: block; } .indSec4 { background: rgba(0,0,0,0.9) url(../images/indSec4_bg.png) center/cover no-repeat fixed; } .indSec4 .container { display: flex; align-items: center; justify-content: space-between; } .indSec4 .container::before, .indSec4 .container::after { display: none; } .indSec4 .comment_title { width: 25%; text-align: left; } .indSec4_list { width: 70%; display: flex; align-items: flex-start; justify-content: space-between; } .indSec4_list h6 { margin: 20px 0 30px; font-size: 16px; color: #fff; letter-spacing: 1px; } .indSec4_list h5 { margin: 20px 0 30px; font-size: 24px; color: #fff; letter-spacing: 1px; position: relative; } .indSec4_list h5:after { content: ""; position: absolute; bottom: -10px; left: 50%; width: 20px; height: 2px; background: #ea5404; margin-left: -10px; } .indSec4_list li { width: 33%; padding: 160px 0 100px; text-align: center; border-left: 1px solid rgba(255,255,255,0.2); -webkit-transform: translateX(1920px); -ms-transform: translateX(1920px); -o-transform: translateX(1920px); transform: translateX(1920px); } .indSec4_list li:last-child { border-right: 1px solid rgba(255,255,255,0.2); } .indSec4_list li:nth-child(1) { -webkit-transition: all 1s ease-in-out 0.6s; -moz-transition: all 1s ease-in-out 0.6s; -ms-transition: all 1s ease-in-out 0.6s; -o-transition: all 1s ease-in-out 0.6s; transition: all 1s ease-in-out 0.6s; } .indSec4_list li:nth-child(2) { -webkit-transition: all 1s ease-in-out 0.8s; -moz-transition: all 1s ease-in-out 0.8s; -ms-transition: all 1s ease-in-out 0.8s; -o-transition: all 1s ease-in-out 0.8s; transition: all 1s ease-in-out 0.8s; } .indSec4_list li:nth-child(3) { -webkit-transition: all 1s ease-in-out 1s; -moz-transition: all 1s ease-in-out 1s; -ms-transition: all 1s ease-in-out 1s; -o-transition: all 1s ease-in-out 1s; transition: all 1s ease-in-out 1s; } .indSec4_list li:nth-child(4) { -webkit-transition: all 1s ease-in-out 1.2s; -moz-transition: all 1s ease-in-out 1.2s; -ms-transition: all 1s ease-in-out 1.2s; -o-transition: all 1s ease-in-out 1.2s; transition: all 1s ease-in-out 1.2s; } .indSec4.on .indSec4_list li { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .indSec4_list li img:last-child { opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; -webkit-opacity: 0.5; filter: alpha(opacity=50); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec4_list li:hover img:last-child { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: none; } .indSec4_list li:hover img:last-child { transform: rotate(-180deg); -ms-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -o-transform: rotate(-180deg); } .indSec5 { padding: 80px 0; } .indSec5_list { margin-top: 60px; display: flex; align-items: flex-start; justify-content: space-between; } .indSec5_list li { width: calc(33.33% - 30px); opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .indSec5_list li:nth-child(1) { -webkit-transition: all 1s ease-in-out 0.6s; -moz-transition: all 1s ease-in-out 0.6s; -ms-transition: all 1s ease-in-out 0.6s; -o-transition: all 1s ease-in-out 0.6s; transition: all 1s ease-in-out 0.6s; } .indSec5_list li:nth-child(2) { -webkit-transition: all 1s ease-in-out 0.8s; -moz-transition: all 1s ease-in-out 0.8s; -ms-transition: all 1s ease-in-out 0.8s; -o-transition: all 1s ease-in-out 0.8s; transition: all 1s ease-in-out 0.8s; } .indSec5_list li:nth-child(3) { -webkit-transition: all 1s ease-in-out 1s; -moz-transition: all 1s ease-in-out 1s; -ms-transition: all 1s ease-in-out 1s; -o-transition: all 1s ease-in-out 1s; transition: all 1s ease-in-out 1s; } .indSec5.on .indSec5_list li { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .indSec5_list li:hover { -webkit-box-shadow: 5px 15px 40px rgba(0, 0, 0, 0.1); box-shadow: 5px 15px 40px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec5_img { overflow: hidden; } .indSec5_img img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec5_list li:hover .indSec5_img img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .indSec5_txt { padding: 25px; border: 1px solid #dddddd; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec5_txt h5 { margin-top: 20px; font-size: 14px; color: #666; } .indSec5_txt h5 i { margin-right: 10px; } .indSec5_txt h6 { font-size: 18px; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; height: 38px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: relative; } .indSec5_list li:hover .indSec5_txt h6 { margin-left: 10px; color: #ea5404; } .indSec5_txt h6:after { content: ""; position: absolute; bottom: -10px; left: 0px; width: 20px; height: 2px; background: #ea5404; } .indSec5_txt p { margin-top: 20px; font-size: 16px; color: #666; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; height: 44px; } .indSec5_list li:hover .indSec5_txt { border-color: #fff; } .indSec5 .indSec3_more { margin-top: 60px; } /* index.html */ /* about.html */ .aboutSec1{ padding: 80px 0; background: #fff url(../images/aboutSec1_bg.jpg) center/100% no-repeat; } .aboutSec1_box{ margin-top: 80px; display: flex; align-items: center; justify-content: space-between; } .aboutSec1_img{ width: 35%; position: relative; } .aboutSec1_img::after{ /*content: '';*/ /*display: block;*/ /*width: 60%;*/ /*height: 60%;*/ /*background: url(../images/aboutSec1_float.png) center/100% no-repeat;*/ /*position: absolute;*/ /*top: 0;*/ /*left: 0;*/ /*-webkit-transform: translate(-60%, -30%);*/ /*-ms-transform: translate(-60%, -30%);*/ /*-o-transform: translate(-60%, -30%);*/ /*transform: translate(-60%, -30%);*/ } .aboutSec1_txt{ width: 60%; } .aboutSec1_txt h6{ font-size: 30px; color: #333; line-height: 1.5; } .aboutSec1_txt h6 span{ color: #ea5404; } .aboutSec1_txt p{ margin-top: 5%; font-size: 16px; color: #666; line-height: 2; } .aboutSec2{ padding: 80px 0; background: url(../images/aboutSec2_bg.jpg) center/cover no-repeat fixed; } .aboutSec2_list{ margin-top: 80px; display: flex; align-items: flex-start; justify-content: space-between; } .aboutSec2_box{ width: 18%; text-align: center; } .aboutSec2_title{ padding-top: 22px; height: 130px; background: url(../images/aboutSec2_box.png) center no-repeat; } .aboutSec2_title h6{ font-size: 22px; color: #fff; } .aboutSec2_txt{ margin-top: 20px; } .aboutSec2_txt p{ font-size: 16px; color: #fff; line-height: 1.8; } .aboutSec3{ padding: 80px 0; } .aboutSec3 .container{ position: relative; } .aboutSec3_bg{ padding-top: 40px; } .aboutSec3_box{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .aboutSec3_warp1{ width: 35%; height: 35%; margin: 10% auto 0; position: relative; } .aboutSec3_warp1 p{ width: 110px; text-align: center; font-size: 22px; color: #4c4c4c; position: absolute; } .aboutSec3_warp1 p:nth-child(1){ top: 2%; left: 40%; } .aboutSec3_warp1 p:nth-child(2){ top: 46%; right: 0%; } .aboutSec3_warp1 p:nth-child(3){ right: 20%; bottom: 2%; } .aboutSec3_warp1 p:nth-child(4){ left: 20%; bottom: 0%; } .aboutSec3_warp1 p:nth-child(5){ left: 3%; top: 45%; } .aboutSec3_warp2{ width: 90%; height: 6%; margin: 13.5% auto 0; position: relative; display: flex; align-items: center; justify-content: space-between; } .aboutSec3_warp2 p{ width: 17%; font-size: 22px; color: #fff; text-align: center; } .aboutSec3_warp3{ width: 100%; height: 6%; margin: 11% auto 0; position: relative; display: flex; align-items: center; justify-content: space-between; } .aboutSec3_warp3 p{ width: 12.5%; font-size: 22px; color: #4c4c4c; text-align: center; } .aboutSec3_warp3 p:nth-child(3){ color: #fff; } .aboutSec4{ padding: 80px 0; background: url(../images/aboutSec4_bg.jpg) center/cover no-repeat fixed; } .honorSwiper{ margin-top: 80px; padding-bottom: 60px; } .aboutSec4_pag .swiper-pagination-bullet{ width: 12px; height: 12px; margin: 0 8px!important; background-color: #fff; } .aboutSec4_img img{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .aboutSec4_img:hover img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .aboutSec4_txt{ margin-top: 20px; text-align: center; } .aboutSec4_txt p{ font-size: 18px; color: #fff; } .aboutSec5{ padding: 80px 0; } .aboutSec5_box{ margin-top: 80px; background-color: #002e73; display: flex; align-items: center; justify-content: space-between; } .aboutSec5_map{ width: 50%; height: 420px; } .aboutSec5_txt{ width: 50%; padding: 5%; } .aboutSec5_txt h6{ font-size: 24px; color: #fff; margin-bottom: 20px; } .aboutSec5_txt p{ font-size: 16px; color: #fff; line-height: 1.8; } .aboutSec5_phone{ margin-top: 10px; display: flex; align-items: center; justify-content: flex-start; } .aboutSec5_phone>div{ margin-right: 20px; display: flex; align-items: center; justify-content: flex-start; } .aboutSec5_phone img{ margin-right: 6px; } /* 百度地图样式 */ .iw_poi_title { color:#CC5522; font-size:14px; font-weight:bold; overflow:hidden; padding-right:13px; white-space:nowrap } .iw_poi_content { font:12px arial,sans-serif; overflow:visible; padding-top:4px; white-space:-moz-pre-wrap; word-wrap:break-word } .BMapLabel{ display: none; } .BMap_Marker>div>img{ margin: 0!important; left: 0!important; top: 0!important; } /* about.html */ /* news.html */ .newsSec{ padding: 80px 0; } .newsSec_list { margin-top: 60px; } .newsSec_list li { float: left; width: calc(33.33% - 30px); margin-right: 45px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .newsSec_list li:nth-child(3n){ margin-right: 0; } .newsSec_list li:nth-child(n+4){ margin-top: 45px; } .newsSec_list li:hover { -webkit-box-shadow: 5px 15px 40px rgba(0, 0, 0, 0.1); box-shadow: 5px 15px 40px rgba(0, 0, 0, 0.1); } .newsSec_img { overflow: hidden; } .newsSec_img img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .newsSec_list li:hover .newsSec_img img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .newsSec_txt { padding: 25px; border: 1px solid #dddddd; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .newsSec_txt h5 { margin-top: 20px; font-size: 14px; color: #666; } .newsSec_txt h5 i { margin-right: 10px; } .newsSec_txt h6 { font-size: 18px; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; height: 38px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: relative; } .newsSec_list li:hover .newsSec_txt h6 { margin-left: 10px; color: #ea5404; } .newsSec_txt h6:after { content: ""; position: absolute; bottom: -10px; left: 0px; width: 20px; height: 2px; background: #ea5404; } .newsSec_txt p { margin-top: 20px; font-size: 16px; color: #666; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; height: 44px; } .newsSec_list li:hover .newsSec_txt { border-color: #fff; } /* news.html */ /* service.html */ .serviceSec1{ padding: 80px 0; text-align: center; background-color: #f5f5f5; } .serviceSec1_box{ margin-top: 80px; display: inline-block; text-align: center; position: relative; } .serviceSec1_box img{ max-width: 100%; } .serviceSec1_txt p{ width: 190px; font-size: 20px; color: #4c4c4c; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .serviceSec1_txt i{ display: block; margin-bottom: 25px; font-size:20px; } .serviceSec1_txt p:after{ content: ""; position: absolute; top: 30px; left: 50%; width: 20px; height: 2px; background: #ea5404; margin-left:-10px;} .serviceSec1_txt p:nth-child(1){ margin: -12% 0 0 -39%; } .serviceSec1_txt p:nth-child(2){ margin: 13% 0 0 -27%; } .serviceSec1_txt p:nth-child(3){ margin: 22% 0 0 0%; } .serviceSec1_txt p:nth-child(4){ margin: 13% 0 0 27%; } .serviceSec1_txt p:nth-child(5){ margin: -12% 0 0 39%; } .serviceSec2{ padding: 80px 0 0; background: url(../images/serviceSec2_bg.jpg) center/cover no-repeat fixed; } .serviceSec2_con{ display: flex; align-items: center; justify-content: space-between; -webkit-transform: translateY(30%); -ms-transform: translateY(30%); -o-transform: translateY(30%); transform: translateY(30%); } .serviceSec2_box{ width: calc(33.33% - 20px); padding: 60px 30px; text-align: center; background: linear-gradient(140deg, rgba(86,143,201,1), rgba(0,46,115,1)); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .serviceSec2_box:hover{ margin-top:-20px;} .serviceSec2_box h6{ margin-top: 8%; font-size: 24px; color: #fff; font-weight: bold; } .serviceSec2_box p{ margin-top: 4%; font-size: 16px; color: #e5e5e5; line-height: 1.6; } .serviceSec3{ padding: 240px 0 80px; } .serviceSec3_list{ display: flex; align-items: center; justify-content: space-between; } .serviceSec3_box{ margin-top: 80px; width: calc(25% - 15px); text-align: center; background: #fff; border: 1px solid #ddd; position: relative; } .serviceSec3_box a{ padding: 40px 0; } .serviceSec3_box:before { content: ""; position: absolute; left: -1px; top: -1px; width: 23px; height: 23px; background-repeat: no-repeat; background-image: url(../images/box_edge2.png); } .serviceSec3_box:after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 23px; height: 23px; background-repeat: no-repeat; background-image: url(../images/box_edge1.png); } .serviceSec3_box h6{ font-size: 24px; color: #4c4c4c; font-weight: bold; } .serviceSec3_box span{ margin-top: 10px; padding-right: 30px; display: inline-block; font-size: 16px; color: #ea5404; font-weight: bold; letter-spacing: 1px; position: relative; } .serviceSec3_box span::after { content: ""; position: absolute; right: 0; top: 2px; width: 18px; height: 19px; background: url(../images/download1.png) no-repeat center top; } .serviceSec3_box:hover{ background-image: linear-gradient(-45deg, #002e73 100px, #1d50a2 200px); } .serviceSec3_box:hover h6, .serviceSec3_box:hover span{ color: #fff; } .serviceSec3_box:hover span::after { background: url(../images/download2.png) no-repeat center top; } .serviceSec4{ padding: 80px 0; background-color: #fff; } .serviceSec4_list{ margin-top: 80px; padding: 0 10%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } .serviceSec4_list li{ width: 25%; text-align: center; } .serviceSec4_list li:nth-child(n+5){ margin-top: 60px; } .serviceSec4_list p{ margin-top: 40px; font-size: 24px; color: #4c4c4c; } /* service.html */ /* solution.html */ .solutionSec{ padding: 80px 0; } .solutionSec_list{ margin-top: 80px; } .solutionSec_list li{ float: left; width: calc(33.33% - 30px); margin-right: 45px; } .solutionSec_list li:nth-child(3n){ margin-right: 0; } .solutionSec_list li:nth-child(n+4){ margin-top: 45px; } .solutionSec_img { overflow: hidden; } .solutionSec_img img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .solutionSec_img:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .solutionSec_txt{ margin-top: 15px; text-align: center; } .solutionSec_txt p{ font-size: 22px; color: #4c4c4c; } /* solution.html */ /* solutionDetail.html */ .solutionSec1{ padding: 80px 0; } .solutionSec1_box{ margin-top: 80px; display: flex; align-items: center; justify-content: space-between; } .solutionSec1_img{ width: 45%; } .solutionSec1_txt{ width: 50%; } .solutionSec1_txt h6{ font-size: 30px; color: #333; font-weight: bold; } .solutionSec1_txt p{ margin-top: 20px; font-size: 16px; color: #333; line-height: 2; } .solutionSec2{ padding: 80px 0; background-color: #f2f2f2; } .solutionSec2_box{ margin-top: 80px; display: flex; align-items: center; justify-content: space-between; } .solutionSec2_txt{ width: 40%; } .solutionSec2_txt p{ font-size: 16px; color: #333; line-height: 2; } .solutionSec2_img{ width: 55%; } .solutionSec3{ padding: 80px 0; background: url(../images/solu_bg.jpg) center/cover no-repeat fixed; } .solutionSec3_list{ margin-top: 80px; display: flex; align-items: flex-start; justify-content: space-between; } .solutionSec3_box img{ max-width: 100%; } .solutionSec3_list li{width: 18%; text-align: center;} .solutionSec3_box h6{ margin-top: 20px; font-size: 18px; color: #fff; } .solutionSec3_box .line{ margin: 10px auto 0; width: 30px; height: 2px; background-color: #ea5404; } .solutionSec3_box p{ margin-top: 10px; font-size: 16px; color: #fff; line-height: 1.6; } .solutionSec4_list{ margin-top: 80px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } .solutionSec4_list li{ width: calc(33.33% - 20px); margin-right: 30px; border: 1px solid #dddddd; } .solutionSec4_list li:nth-child(3n){ margin-right: 0; } .solutionSec4_list li:nth-child(n+4){ margin-top: 30px; } .solutionSec4_list li .newsSec_txt{ border: none; } .solutionSec4_swiper{ margin-top: 80px; padding-bottom: 60px; } .solutionSec4_pag{ bottom: 0!important; } .solutionSec4_pag .swiper-pagination-bullet{ width: 12px; height: 12px; background-color: #ea5404; } .solutionSec4_box:hover .newsSec_img img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .solutionSec4_box:hover .newsSec_txt h6 { margin-left: 10px; color: #ea5404; } .solutionSec4_box:hover .newsSec_txt { border-color: #fff; } .solu_text p{ margin-top:0px; height:auto; -webkit-line-clamp: unset; } /* solutionDetail.html */ /* product.html */ .productSec_img{ border: 1px solid #f0f0f0; } .productSec1{ padding: 80px 0 } .productSec1_box{ margin-top: 80px; display: flex; align-items: flex-start; justify-content: space-between; } .productSec1_img{ width: 48%; } .productSec1_txt{ width: 48%; } .productSec1_txt h6{ font-size: 30px; color: #333; letter-spacing: 1px; } .productSec1_txt p{ margin-top: 15px; font-size: 18px; color: #4c4c4c; line-height: 2; } .productSec2{ padding: 80px 0; background-color: #f2f2f2; } .productSec2_list{ margin-top: 80px; } .productSec2_list li{ float: left; width: calc(25% - 22.5px); margin-right: 30px; } .productSec2_list li:nth-child(4n){ margin-right: 0; } .productSec2_list li:nth-child(n+5){ margin-top: 30px; } .productSec2_img { overflow: hidden; } .productSec2_img img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .productSec2_list li:hover .productSec2_img img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .productSec2_txt{ margin-top: 10px; } .productSec2_txt h6{ font-size: 18px; color: #4c4c4c; margin-top:20px; } .productSec2_txt p{ margin-top: 6px; font-size: 16px; color: #808080; line-height: 1.6; } .productSec3{ padding: 80px 0; background: url(../images/product_bg.jpg) center/cover no-repeat fixed; } .productSec3_list{ margin-top: 80px; display: flex; align-items: flex-start; justify-content: space-between; } .productSec3_list li{ width: 18%; text-align: center; } .productSec3_box img{ max-width: 100%; } .productSec3_box h6{ margin-top: 20px; font-size: 18px; color: #fff; } .productSec3_box .line{ margin: 10px auto 0; width: 30px; height: 2px; background-color: #ea5404; } .productSec3_box p{ margin-top: 10px; font-size: 16px; color: #fff; line-height: 1.6; } .productSec4{ padding: 80px 0 } .productSec4_swiper{ margin-top: 80px; padding-bottom: 40px; } .productSec4_pag{ bottom: 0!important; } .productSec4_pag .swiper-pagination-bullet{ width: 12px; height: 12px; background-color: #ea5404; } .productSec4_img { overflow: hidden; } .productSec4_img img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .productSec4_box:hover .productSec4_img img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .productSec4_txt{ margin-top: 20px; } .productSec4_txt p{ font-size: 18px; color: #333; } /* product.html */ /* join.html */ .joinSec{ padding: 80px 0; } .joinSec .nece{ font-size: 12px; color: red; margin-top: -0.5rem; } .joinSec_top{ margin-top: 80px; } .joinSec_top h6{ font-size: 26px; color: #333; font-weight: bold; letter-spacing: 2px; } .joinSec_top p{ margin-top: 10px; font-size: 18px; color: #808080; } .joinSec_form{ margin-top: 40px; border-top: 2px solid #000; } .joinSec_form>div{ border-bottom: 1px solid #eee; } .joinSec_row{ display: flex; align-items: center; justify-content: space-between; } .joinSec_row .joinSec_box:nth-child(2){ border-left: 1px solid #eee; } .joinSec_box{ padding: 20px; display: flex; align-items: center; justify-content: space-between; } .joinSec_box.wid50{ width: 50%; } .joinSec_txt{ font-size: 18px; color: #4c4c4c; } .joinSec_input{ width: calc(100% - 180px); height: 52px; border: 1px solid #eee; padding: 0 20px; font-size: 18px; color: #333; } .joinSec_input.file{ height: auto; padding: 0; } .joinSec_textarea{ width: calc(100% - 180px); height: 240px; border: 1px solid #eee; padding: 0 20px; font-size: 18px; color: #333; line-height: 1.8; } .joinSec_input:focus, .joinSec_textarea:focus{ outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .joinSec_submit{ margin: 60px auto 0; display: block; width: 200px; height: 60px; border: 1px solid #ea5404; background-color: #ea5404; font-size: 16px; color: #fff; letter-spacing: 1px; line-height: 58px; position: relative; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /* join.html */ /* cases.html */ .casesSec{ padding: 80px 0; } .casesSec_list{ margin-top: 80px; } .casesSec_list li{ padding: 4% 40px; background-color: #f2f2f2; } .casesSec_list li:nth-child(n+2){ margin-top: 40px; } .casesSec_box{ position: relative; } .casesSec_txt{ width: 50%; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .casesSec_txt h5{ font-size: 22px; color: #ea5404; text-transform: uppercase; } .casesSec_txt h6{ margin-top: 20px; font-size: 34px; color: #333; } .casesSec_txt p{ margin-top: 20px; font-size: 18px; color: #808080; line-height: 1.4; } .casesSec_img{ float: right; width: 45%; overflow: hidden; } .casesSec_img img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .casesSec_img:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .casesSec_list li:nth-child(2n) .casesSec_txt{ left: auto; right: 0; } .casesSec_list li:nth-child(2n) .casesSec_img{ float: left; } .case_text h6{ font-size:24px; margin-bottom:10px; position:relative;} .case_text h6:after{content: ""; position: absolute; bottom: -10px; left: 0px; width: 20px; height: 2px; background: #ea5404;} /* cases.html */ @media(max-width:1760px) { } @media(max-width:1680px) { } @media(max-width:1600px) { .aboutSec3_warp1 p{ font-size: 18px; } .aboutSec3_warp1 p:nth-child(1){ top: 3%; left: 38.5%; } .aboutSec3_warp1 p:nth-child(2){ top: 48%; right: 0%; } .aboutSec3_warp1 p:nth-child(3){ right: 20%; bottom: 4%; } .aboutSec3_warp1 p:nth-child(4){ left: 20%; bottom: 4%; } .aboutSec3_warp1 p:nth-child(5){ left: 2%; top: 48%; } .aboutSec3_warp2{ margin: 13% auto 0; } } @media(max-width:1520px) { } @media(max-width:1440px) { .aboutSec3_warp1 p{ font-size: 18px; } .aboutSec3_warp1 p:nth-child(1){ top: 2%; left: 37.5%; } .aboutSec3_warp1 p:nth-child(2){ top: 46%; right: -2%; } .aboutSec3_warp1 p:nth-child(3){ right: 18.5%; bottom: 5%; } .aboutSec3_warp1 p:nth-child(4){ left: 19%; bottom: 5%; } .aboutSec3_warp1 p:nth-child(5){ left: 1%; top: 46%; } .aboutSec3_warp2{ margin: 12.5% auto 0; } .aboutSec3_warp3{ margin: 11% auto 0; } } @media(max-width:1360px) { } @media(max-width:1280px) { } @media(max-width:1200px) { .aboutSec3_warp1{ margin: 9% auto 0; } .aboutSec3_warp1 p{ font-size: 18px; } .aboutSec3_warp1 p:nth-child(1){ top: 2%; left: 35%; } .aboutSec3_warp1 p:nth-child(2){ top: 45%; right: -4%; } .aboutSec3_warp1 p:nth-child(3){ right: 16%; bottom: 5%; } .aboutSec3_warp1 p:nth-child(4){ left: 16%; bottom: 5%; } .aboutSec3_warp1 p:nth-child(5){ left: -2%; top: 45%; } .aboutSec3_warp2{ margin: 12.5% auto 0; } .aboutSec3_warp2 p{ font-size: 18px; } .aboutSec3_warp3{ margin: 10.5% auto 0; } .aboutSec3_warp3 p{ font-size: 18px; } } @media(max-width:768px) { .row, .row>div { margin: 0; padding: 0; } .navbar-nav { width: 100%; margin-left: 0px; text-transform: uppercase; } .navbar-nav li { text-align: center; border-bottom: 1px dotted #e5e5e5; line-height: 40px; } .navbar-nav li a { color: #666; font-size: 13px; } .navbar-nav li a:hover { color: #0752a4; } .headerbg { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 999999; background: #fff; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .logo_boxlist { float: left; width: 120px; margin-top: 17px; } .navbar-toggle { margin-top: 10px; } .navbar-toggle .icon-bar { background-color: #000; } .navbar-collapse { border-top: 1px solid #e5e5e5; } .floatWindow{ right: 3%; } .indBaner video{ width: 100%; height: 100%; object-fit: fill; top: 0; } .banner{ top: 52px; } .indBaner_bg { height: calc(70vh - 52px); padding: 0 3%; } .indBaner_box h5{ font-size: 16px; } .indBaner_box h6{ font-size: 26px; } .indBaner_box a { width: 120px; height: 44px; font-size: 14px; line-height: 42px; } .indBaner_prev, .indBaner_next{ top: auto; bottom: 30px; } .pageDown img, .indBaner_prev img, .indBaner_next img{ width: 30px; } .pageDown img:first-child{ top: 8px; } .detailBan, .detailBan2{ margin-top: 52px; } .comment_title h6{ font-size: 26px; } .comment_title p { margin-top: 10px; font-size: 14px; line-height: 1.4; } .footer_warp { background: #222222; padding: 50px 0; display: none; } .copy { padding: 10px 0; font-size: 12px; color: #999; background: #111; } /* index.html */ .indSec1{ padding: 40px 0; } .indSec1>.container{ margin-top: 40px; padding: 0; } .indSec1_bg{ display: none; } .indSec1_swiper{ position: relative; padding: 10px; width: 100%; left: 3%; } .indSec1_swiper .swiper-slide .indSec1_box{ display: block; } .eyesberg-card-btn{ display: none; } .indSec1_box{ width: 100%; padding: 8%; z-index: 2; position: relative; top: 0; left: 0; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .indSec1_box .boxClose{ display: none; } .indSec1_img img:nth-child(1){ width: 100%; margin-top: 10px; position: relative; top: 0; left: 0; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .indSec1_box h6{ font-size: 18px; } .indSec1_box p{ font-size: 14px; } .indSec1_box a { margin-top: 6%; width: 160px; height: 48px; font-size: 14px; line-height: 48px; } .indSec2{ padding: 40px 0; } .indSec2_swiper{ margin: 0 auto; width: 94%; } .indSec2_swiper .swiper-slide-active{ -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .indSec2_prev, .indSec2_next{ display: none; } .indSec2_imgBox{ padding: 10px; } .indSec2_txt{ padding: 20px 20px 12%; } .indSec3{ margin: 40px 0; } .indSec3_list{ margin-top: 40px; } .indSec3_list li{ width: 100%; } .indSec3_list li:nth-child(n+2){ margin-top: 15px; } .indSec3.on .indSec3_list li:nth-child(2n){ margin-left: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .indSec3_more{ margin-top: 40px; } .indSec4 .container{ display: block; padding: 40px 0; } .indSec4 .comment_title{ width: 100%; text-align: center; } .comm_take{ margin: 40px auto; } .indSec4_list{ width: 100%; } .indSec4_list li{ padding: 40px 0; } .indSec4_list img{ width: 40px; } .indSec4_list h5{ font-size: 18px; } .indSec4_list h6{ font-size: 14px; } .indSec5{ padding: 40px 0; } .indSec5_list{ display: block; margin-top: 40px; } .indSec5_list li{ width: 100%; } .indSec5_list li:nth-child(n+2){ margin-top: 10px; } .indSec5_txt{ padding: 15px 10px; } .indSec5_txt p{ font-size: 14px; height: 38px; } .indSec5_txt h5{ margin-top: 10px; } .indSec5 .indSec3_more{ margin-top: 40px; } /* index.html */ /* join.html */ .joinSec{ padding: 40px 0; } .joinSec_top { margin-top: 40px; } .joinSec_top h6{ font-size: 22px; font-weight: normal; } .joinSec_top p{ font-size: 12px; } .joinSec_form{ margin-top: 20px; } .joinSec_box{ padding: 10px 0; } .joinSec_box.wid50{ width: 100%; } .joinSec_txt{ font-size: 14px; } .joinSec_input, .joinSec_textarea{ width: calc(100% - 120px); font-size: 14px; } .joinSec_textarea{ height: 100px; } .joinSec_row{ display: block; } .joinSec_row .joinSec_box:nth-child(2){ border-left: none; } .joinSec_submit{ margin: 40px auto 0; width: 180px; height: 53px; line-height: 52px; } .joinSec_form>div:nth-child(n+2) input, .joinSec_form>div:nth-child(n+2) textarea{ width: calc(100% - 60px); } /* join.html */ /* product.html */ .publicNav.fiexd{ top: 52px; background-color: #000; } .publicNav2{ overflow-y: scroll; display: block; } .publicNav_ul{ margin: 0 auto; display: flex; align-items: flex-start; justify-content: center; } .publicNav li, .publicNav li a{ font-size: 16px; letter-spacing: 0; } .solutionSec{ padding: 40px 0; } .solutionSec_list{ margin-top: 40px; } .solutionSec_list li{ width: calc(50% - 10px); margin-right: 20px; } .solutionSec_list li:nth-child(3n){ margin-right: 20px; } .solutionSec_list li:nth-child(2n){ margin-right: 0; } .solutionSec_list li:nth-child(n+3){ margin-top: 20px; } .solutionSec_txt p{ font-size: 18px; } /* product.html */ /* productDetail.html */ .productSec1{ padding: 40px 0; } .productSec1_box{ margin-top: 40px; display: block; } .productSec1_img, .productSec1_txt{ width: 100%; } .productSec1_txt{ margin-top: 20px; } .productSec1_txt h{ font-size: 22px; } .productSec1_txt p{ margin-top: 10px; font-size: 14px; } .productSec2{ padding: 40px 0; } .productSec2_list{ margin-top: 40px; } .productSec2_list li{ width: calc(50% - 10px); margin-right: 20px; } .productSec2_list li:nth-child(4n){ margin-right: 20px; } .productSec2_list li:nth-child(2n){ margin-right: 0; } .productSec2_list li:nth-child(n+3){ margin-top: 20px; } .productSec2_txt p{ font-size: 14px; } .productSec3{ padding: 40px 0; } .productSec3_list{ margin-top: 40px; display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; justify-content: flex-start; } .productSec3_list li{ width: 30%; margin-right: 5%; } .productSec3_list li:nth-child(3n){ margin-right: 0; } .productSec3_list li:nth-child(n+4){ margin-top: 20px; } .productSec3_box h6{ font-size: 16px; line-height: 1.4; } .productSec3_box p{ font-size: 14px; } .productSec4{ padding: 40px 0; } .productSec4_swiper{ margin-top: 40px; } /* productDetail.html */ /* solutionDetail.html */ .solutionSec1, .solutionSec2, .solutionSec3{ padding: 40px 0; } .solutionSec1_box, .solutionSec2_box{ margin-top: 40px; display: block; } .solutionSec1_img, .solutionSec1_txt, .solutionSec2_img, .solutionSec2_txt{ width: 100%; } .solutionSec1_txt, .solutionSec2_img{ margin-top: 20px; } .solutionSec1_txt h6, .solutionSec2_txt h6{ font-size: 22px; } .solutionSec1_txt p .solutionSec2_txt p{ margin-top: 10px; font-size: 14px; } .solutionSec3_list{ margin-top: 40px; display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; justify-content: flex-start; } .solutionSec3_list li{ width: 30%; margin-right: 5%; } .solutionSec3_list li:nth-child(3n){ margin-right: 0; } .solutionSec3_list li:nth-child(n+4){ margin-top: 20px; } .solutionSec3_list h6{ font-size: 16px; line-height: 1.4; } .solutionSec3_list p{ font-size: 14px; } .solutionSec4_swiper{ margin-top: 40px; padding-bottom: 30px; } /* solutionDetail.html */ /* service.html */ .serviceSec4{ padding: 40px 0; } .serviceSec4_list{ margin-top: 40px; padding: 0; } .serviceSec4_list li{ width: 30%; margin-right: 5%; } .serviceSec4_list li:nth-child(3n){ margin-right: 0; } .serviceSec4_list li:nth-child(n+4){ margin-top: 20px; } .serviceSec4_list img{ width: 80%; } .serviceSec4_list h6{ font-size: 16px; line-height: 1.4; } .serviceSec4_list p{ margin-top: 10px; font-size: 14px; } .serviceSec1{ padding: 40px 0; } .serviceSec1_box{ margin-top: 40px; display: block; } .serviceSec1_box img{ display: none; } .serviceSec1_txt{ display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; justify-content: flex-start; } .serviceSec1_txt p{ width: 30%; font-size: 14px; margin: 0 5% 0 0!important; position: relative; top: 0; left: 0; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .serviceSec1_txt p:nth-child(3n){ margin-right: 0!important; } .serviceSec1_txt p:nth-child(n+4){ margin-top: 20px!important; } .serviceSec2_con { display: block; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .serviceSec2{ padding: 40px 0; } .serviceSec2_box{ width: 100%; margin-top: 20px; padding: 20px; } .serviceSec2_box img{ width: 40px; } .serviceSec2_box h6{ font-size: 18px; } .serviceSec2_box p{ font-size: 14px; } .serviceSec3{ padding: 40px 0; } .serviceSec3_list{ display: block; } .serviceSec3_box{ margin-top: 20px; width: 100%; } .serviceSec3_box a{ padding: 20px 0; } .serviceSec3_box h6 { font-size: 22px; font-weight: normal; } /* service.html */ /* news.html */ .newsSec{ padding: 40px 0; } .newsSec_list{ margin-top: 40px; } .newsSec_list li{ width: 100%; margin-right: 0; } .newsSec_list li:nth-child(n+2){ margin-top: 20px; } .newsSec_txt{ padding: 15px 10px; } .newsSec_txt p{ font-size: 14px; height: 38px; } .newsSec_txt h5{ margin-top: 10px; } /* news.html */ /* about.html */ .aboutSec1{ padding: 40px 0; } .aboutSec1_box{ display: block; } .aboutSec1_img{ width: 100%; } .aboutSec1_txt{ width: 100%; margin-top: 20px; } .aboutSec1_txt h6{ font-size: 22px; line-height: 1.4; } .aboutSec1_txt p{ font-size: 14px; } .aboutSec2{ padding: 40px 0; } .aboutSec2_list{ margin-top: 40px; display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; justify-content: flex-start; } .aboutSec2_box{ width: 30%; margin-right: 5%; } .aboutSec2_box:nth-child(3n){ margin-right: 0; } .aboutSec2_box:nth-child(n+4){ margin-top: 20px; } .aboutSec2_title{ padding-top: 28px; } .aboutSec2_title h6{ font-size: 18px; } .aboutSec2_txt p{ font-size: 14px; } .aboutSec3{ padding: 40px 0 0; } .aboutSec3_bg{ padding-top: 80px; } .aboutSec3_warp1 { margin: 6% auto 0; width: 80%; height: 38%; } .aboutSec3_warp1 p{ width: 28%; height: 20px; font-size: 12px; top: 50%!important; left: 50%!important; right: 0!important; bottom: 0!important; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform:translate(-50%, -50%); } .aboutSec3_warp1 p:nth-child(1) { margin: -45% 0% 0 0; } .aboutSec3_warp1 p:nth-child(2) { margin: -9% 0 0 -35%; } .aboutSec3_warp1 p:nth-child(3) { margin: 28% 0 0 -18%; } .aboutSec3_warp1 p:nth-child(4) { margin: 25% 0% 0 17%; } .aboutSec3_warp1 p:nth-child(5) { margin: -10% 0 0 36.5%; } .aboutSec3_warp2 { margin: 9% auto 0; width: 90%; height: 18%; position: relative; } .aboutSec3_warp2 p{ width: auto; font-size: 12px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform:translate(-50%, -50%); } .aboutSec3_warp2 p:nth-child(1) { margin: -24% 0% 0 -24%; } .aboutSec3_warp2 p:nth-child(2) { margin: -6% 0 0 -24%; } .aboutSec3_warp2 p:nth-child(3) { margin: 11% 0 0 -24%; } .aboutSec3_warp2 p:nth-child(4) { margin: -15% 0% 0 24%; } .aboutSec3_warp2 p:nth-child(5) { margin: 2% 0 0 24%; } .aboutSec3_warp3 { margin: 1% auto 0; height: 21%; } .aboutSec3_warp3 p{ width: 20%; font-size: 12px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform:translate(-50%, -50%); } .aboutSec3_warp3 p:nth-child(1) { margin: -11% 0% 0 -12%; } .aboutSec3_warp3 p:nth-child(2) { margin: 10% 0 0 -25%; } .aboutSec3_warp3 p:nth-child(3) { margin: 10% 0 0 0%; } .aboutSec3_warp3 p:nth-child(4) { margin: -10% 0% 0 13%; } .aboutSec3_warp3 p:nth-child(5) { margin: 10% 0 0 25%; } .aboutSec4{ padding: 40px 0; } .honorSwiper{ margin-top: 40px; } .aboutSec5{ padding: 40px 0; } .aboutSec5_box{ margin-top: 40px; display: block; } .aboutSec5_map{ width: 100%; height: 340px; } .aboutSec5_txt{ width: 100%; } .aboutSec5_txt h6{ font-size: 22px; } .aboutSec5_txt p{ font-size: 14px; } .aboutSec5_phone{ display: block; margin: 0; } .aboutSec5_phone>div{ margin: 10px 0 0 0; } .aboutSec5_phone>div p{ font-size: 18px; letter-spacing: 1px; } /* about.html */ /* case.html */ .casesSec{ padding: 40px 0; } .casesSec_list{ margin-top: 40px; } .casesSec_list li{ padding: 20px; } .casesSec_txt{ width: 100%; position: relative; top: 0; left: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .casesSec_img{ float: none; width: 100%; margin-top: 20px; } .casesSec_txt h5{ font-size: 18px; } .casesSec_txt h6{ margin-top: 10px; font-size: 24px; } .casesSec_txt p { margin-top: 10px; font-size: 14px; } .casesSec_list li:nth-child(n+2){ margin-top: 20px; } /* case.html */ } @media (min-width: 768px) { .container { margin: 0 auto; padding: 0; } } @media (min-width: 1440px) { .container { width: 1280px; } } @media (min-width: 1600px) { .container { width: 1440px; } }