锘緻charset "utf-8"; .pageMenu li.on { background: #ee7430; } .pageMenu li.on a { color: #fff; } .pageMenu li a.on { color: #fff; background: #ee7430; } /*header css*/ .header { height:75px; line-height: 75px; } .logo { width: 400px; float:left; height: 75px; display: flex; align-items: center; } .logo a { height: 75px; display: flex; align-items: center; } .logo img { display:block; } .menu { width: calc(100% - 400px); float:right; max-width:1100px; } .close { display: none; } .menuBox { width:calc(100% - 220px); float:left; max-width:1100px; } #service { position: relative; } #service .serMenu { position:absolute; top:76px; background: #fff; box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); z-index:12; width:120px; left:50%; margin-left:-60px; display:none; padding-bottom: 20px; } #service.services .serMenu { display: block; } #service .serMenu a { display: block; text-align: center; font-size:14px; line-height: 1.4; padding:20px 10px 0 10px } #service .serMenu a:hover { color: #ee7430; } .searchBox { width:200px; float:right; display:flex; justify-content: space-around; align-items: center; height: 75px; } .menu .menuBox > ul { display: flex; justify-content: space-between; max-width: 640px; } .menu .menuBox ul li a { color:#666; font-size:16px; transition: all 0.5s; } .menu .menuBox > ul > li > a { color:#000; font-weight: 600; } .menu .menuBox ul li:hover > a { color:#ee7430; transition: all 0.5s; } .menu .menuBox ul li a:hover { text-decoration: underline; } /*脙陇脗潞脜鈥櫭兟偮好偮兟γ偮犆偮徝兟⑩偓潞脗庐*/ .secondMenu { position: absolute; top: 75px; width: 100%; left: 0; background:#fff; display: none; border-top:1px solid #eee; z-index: 2; } #product .secondMenu::after { content:''; background:#f4f4f4; width:40%; position:absolute; left:0; top:0; height:100%; } .mask { position: absolute; top:100%; background:rgba(0,0,0,0.2); height:100%; left:0; width:100%; } .secondMenuBox { max-width:1576px; padding:0 20px; margin:0 auto; display: flex; position: relative; } .menu .menuBox .secondList { width:35%; float:left; margin:40px 0; padding-right: 5%; z-index: 1; } .menu .menuBox .secondList ul { display:flow-root } .menu .menuBox .secondList ul li{ width:calc((100% - 15%) /2); float:left; line-height: 1; margin-bottom: 26px; font-size:16px; background:url("../images/menuIcon.png") no-repeat center right; padding-right:10px; margin-right:15%; cursor: pointer; } .menu .menuBox .secondList ul li:hover { text-decoration: underline; } .menu .menuBox .secondList ul li:nth-child(2n) { margin-right:0; } .menu .menuBox .secondList ul li:hover { background:url("../images/menuIconHover.png") no-repeat center right; color:#ee7430 } .productActive { color:#ee7430; background:url("../images/menuIconHover.png") no-repeat center right !important; } .menu .menuBox .secondListShows { width: 100%; float: left; background: #fff; max-width: 800px; z-index: 1; } .secondListShow { padding: 40px 80px; display: none; } .secondListShow.secondShowActive { display: block; } .listShowTitle { line-height: 1; font-size:20px; border-bottom:1px solid #eee; width:100%; padding-bottom:20px; pointer-events: none; } .menu .menuBox .secondListShow ul { display: block; margin-top:20px; } .menu .menuBox .secondListShow ul li{ line-height: 40px; width: 50%; } .menu .menuBox .secondListShow ul li a{ font-size:18px; width: 100%; display: flex; align-items: baseline; justify-content: space-between; cursor: pointer; } .menu .menuBox .secondListShow ul li a img{ padding-right:20% } .menu .menuBox .secondListShow ul li .third { line-height:20px; margin-bottom:10px; } .menu .menuBox .secondListShow ul li .third a { font-size:16px; } .menu .menuBox .secondListShow ul li .third a:hover { color: #ee7430; } .menu .menuBox .secondListShow .lookMore { font-size:16px; color:#ee7430; border-bottom:1px solid #ee7430; padding-bottom:5px; } .menu .menuBox .secondListShow ul.ulChange { display: flex; margin-top: 20px; flex-direction: column; flex-wrap: wrap; height: 330px; } .menu .menuBox .secondListShow ul.ulChange li { width: 50%; cursor: pointer; } .menuSearch { border-top:1px solid #dbdbdb; clear: both; margin-top:30px; padding-top:30px; } .menuSearch a { display:block; line-height:40px; } .secondMenuBox .menuSearch a:hover { color:#ee7430 } .menuClose { position: absolute; right:0; z-index: 1; cursor: pointer; } .menuLists { display:flex; width:100%; max-width:1200px; margin:20px 0; } .menuList { width: 25%; } .menuLists .menuListTitle { color:#ee7430; font-size:20px; line-height: 50px; pointer-events: none; } .menuLists .menuListTitle img { margin-left:10px; } .menuLists .menuList ul { display:block; } .menuLists .menuList ul li { line-height: 36px; } .searchBox svg { fill: #888; } .search { display: flex; cursor:pointer; transition: all 0.5s; } .search svg { width: 25px; height: 25px; } .search:hover svg{ fill: #ee7430; transition: all 0.5s; } .login { display: flex; cursor:pointer; transition: all 0.5s; } .login svg { width: 25px; height: 25px; } .login:hover svg{ fill: #ee7430; transition: all 0.5s; } .language { display: flex; align-items: center; cursor:pointer; position: relative; transition: all 0.5s; } .language svg { width: 25px; height: 25px; } .language:hover svg{ fill: #ee7430; transition: all 0.5s; } .language span { font-size: 12px; color: #999; left: 20px; cursor: pointer; top: 0; height: 15px; line-height: 15px; } .languageBox { position: absolute; width: 60px; margin-left:-20px; left:50%; box-shadow: 0 0 5px rgba(0,0,0,0.5); top:20px; height:0; transition: all 0.5s; overflow: hidden; z-index:10; background: #fff; } .language:hover .languageBox { height:60px; transition: all 0.5s; } .languageBox a { display: block; text-align: center; height: 30px; line-height: 30px; border-bottom: 1px solid #eee; font-size: 12px; color: #333; } .languageBox a:hover { background:#ee7430; color:#fff; } /*content css*/ .banner img { width:100%; height:auto; } .swiper-button-prev.banner-prev,.swiper-button-next.banner-next { border-radius: 50%; width:40px; height:40px; } .swiper-button-prev.banner-prev:hover,.swiper-button-next.banner-next:hover { /*background:#ee7430; color:#fff;*/ } .swiper-button-prev.banner-prev:after,.swiper-button-next.banner-next:after { font-size: 30px; color: #fff; font-weight: 900; } .swiper-button-prev.banner-prev { left:30px; } .swiper-button-next.banner-next { right:30px; } /*脙娄脜鈥溍⑩€毬兟γ⑩偓鈥溍偮懊兟っ偮好偮兟ッ⑩偓艙脗聛 css*/ .products { /*background: url('../images/pro.jpg') no-repeat center;*/ background: #eee; background-size:cover; padding-top:70px; padding-bottom:70px; position: relative; } .products:after { /*!*content: '';*!*/ /*background: url('../images/proMask.png') no-repeat center bottom;*/ /*background-size:cover;*/ /*position: absolute;*/ /*width:100%;*/ /*height:177px;*/ /*bottom:0*/ } .products .proTitles { font-size:38px; text-align:center; color:#333; margin-bottom: 30px; } .products .swiperBox { max-width: 1240px; margin:auto; position: relative; padding:0 20px } .products .swiper { /*margin:0 60px;*/ } .products .swiper-button-prev,.products .swiper-button-next { color:#ee7430 } .products .swiper-button-prev:after,.products .swiper-button-next:after { font-size:20px; } .products .swiper-slide { background:#fff; border-radius:20px; overflow: hidden; } .products .proImg { height:0; padding-bottom:60%; overflow: hidden; position:relative } .products .proImg:after { content:'NEW'; position:absolute; top:20px; left:30px; background: #d83110; color:#fff; padding:5px; border-radius: 5px; font-size:12px; } .products .proImg img { transform: translate(-50%,-50%); position:absolute; top:50%; left:50%; max-width: 100%; max-height: 100%; transition:all 0.5s; } .products .proContent { text-align: left; padding: 0 40px; } .products .proContent .proTitle{ font-size:22px; color:#333; margin-bottom:10px; text-align: left; } .products .proContent .proDes{ font-size:16px; color:#666; min-height: 40px; line-height: 20px; } .products .proContent .proMore{ font-size: 14px; color: #ee7430; margin: 40px 0 30px; padding: 4px 0; transition: all 0.5s; text-align: left; display: inline-block; border-bottom: 1px solid #ee7430; } .products .swiper-slide:hover img { transform: translate(-50%,-50%) scale(1.1); transition:all 0.5s; } .productClass { color:#ee7430; margin-top:10px; font-size: 16px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /*脙娄脗篓脗隆脙娄芒鈧姑吢该兟吢犆偮兟⑩偓掳芒鈧 css*/ .model { background-image: linear-gradient(to right, #9fafc2 , #f9eae1); padding: 50px 20px; } .modelBoxPhone { display:none; } .modelBoxPhone img { width:100% } .model .modelTitle { font-size:38px; text-align:center; color:#333333; margin-bottom: 0; } .modelBoxs { display:flex; align-items: center; } .model .midTs:hover { /*background: #ef9443;*/ } .model .midTs.midTd02 a:hover { background: #ef9443 !important; } .model .midTs.midTd02 a { flex-direction: column; justify-content: center; width: 40%; } .model .midTs.midTd02 a:nth-of-type(3) { width: 30%; } .model .midTs.midTd02 a > span:nth-of-type(1) { height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .model .midTs.midTd02 a > span:nth-of-type(1) img { max-height: 100%; max-width: 100%; object-fit: contain; } .modelBoxBottom li:hover { background: #ef9443; } .model .midT06:hover { background: #ef9443; } .modelBoxRight02:hover { background: #ef9443; } .modelBoxRight01:hover { background: #ef9443; } .modelBoxLeft01:hover { background: #ef9443; } .model .midT02:hover { background: url("../images/modelMidh.png") no-repeat center; background-size: 100% 100%; } .model .rightIcons .midT02:hover { background: url("../images/modelMid3h.png") no-repeat center; background-size: 100% 100%; } .model .midT05:hover { background: url("../images/modelMid2h.png") no-repeat center; background-size: 100% 100%; } .modelBoxs a:hover { color:#fff; } .modelBox a:hover { color:#fff; } .modelBoxLeft { width: 170px; float:left; background: #ababab; border: 1px solid #ababab; border-radius: 10px; pointer-events: none; } .modelBoxLeft01 { width: calc(50% - 1px); float: left; text-align: center; height:100px; line-height:100px; border-right:1px solid rgba(255,255,255,0.2); border-bottom:1px solid rgba(255,255,255,0.2); } .modelBoxLeft01:nth-child(2n) { border-right:none } .modelBoxLeft01:last-child { /*border:none;*/ /*width:100%*/ } .modelBoxMid { width: calc(80% - 170px); float: left; } .modelBoxRight { width: 20%; float: right; display: flex; justify-content: space-between; align-items: center; position: relative; } .model .midTs { float:left; background: #f3b176; border: 1px solid #ef9341; border-radius: 10px; display:flex; justify-content: center; color:#fff; align-items: center; font-size: 20px; width: 18%; } .model .midT { display: flex; align-items: center; justify-content: space-between; position: relative; } .model .midT01 { height:76px; position: relative; background: #ababab; border: none; } .model .midT02 { height:60px; position: relative; background: url("../images/modelMid.png") no-repeat center; background-size:100% 100%; border:none } .model .rightIcons .midT02 { background: url("../images/modelMid3.png") no-repeat center; background-size:100% 100%; } .model .midT02 i.icon1 { height: 36px; width: 2px; position: absolute; left: 30px; right: 0; bottom: -38px; margin: auto; background: #000; } .model .midT02 i.icon1:after { content: ''; position: absolute; width:0; height:0; border:5px solid transparent; border-bottom-color:#000; left:-4px; top:-5px } .model .midT03 { height:60px; position: relative; } .model .midT03 i.icon1 { height: 36px; width: 2px; position: absolute; left: 0; right: 0; bottom: -38px; margin: auto; background: #000; } .model .midT03 i.icon1:after { content: ''; position: absolute; width:0; height:0; border:5px solid transparent; border-bottom-color:#000; left:-4px; top:-5px } .model .midT04 { height:60px; position: relative; } .model .midT04 i.icon1 { height: 36px; width: 2px; position: absolute; left: 0; right: 0; bottom: -38px; margin: auto; background: #000; } .model .midT04 i.icon1:after { content: ''; position: absolute; width:0; height:0; border:5px solid transparent; border-bottom-color:#000; left:-4px; top:-5px } .model .midT05 { height:76px; position: relative; background: url("../images/modelMid2.png") no-repeat center; background-size:100% 100%; border:none } .model .midT05 i.icon1 { height: 30px; width: 2px; position: absolute; left: 0; right: 0; bottom: -30px; margin: auto; background: #000; } .model .midT05 i.icon1:after { content: ''; position: absolute; width:0; height:0; border:5px solid transparent; border-bottom-color:#000; left:-4px; top:-5px } .model .midT06 { position: absolute; right: 20px; top: -80px; background: #f3b176; border-radius: 10px; padding: 10px 20px; color: #fff; } .model .rightIcons .midT06 { bottom:-80px; top:auto; } .model .rightIcons .midT02 i.icon1 { top: -38px; bottom: auto; } .model .rightIcons .midT02 i.icon1:after { border-top-color: #000; border-bottom-color:transparent; bottom:-5px; top:auto; } .model .rightIcons .midT03 i.icon1 { top: -38px; bottom: auto; } .model .rightIcons .midT03 i.icon1:after { border-top-color: #000; border-bottom-color:transparent; bottom:-5px; top:auto; } .model .rightIcons .midT04 i.icon1 { top: -38px; bottom: auto; } .model .rightIcons .midT04 i.icon1:after { border-top-color: #000; border-bottom-color:transparent; bottom:-5px; top:auto; } .model .rightIcons .midT05 i.icon1 { top: -30px; bottom: auto; } .model .rightIcons .midT05 i.icon1:after { border-top-color: #000; border-bottom-color:transparent; bottom:-5px; top:auto; } .model .midT06:before { content: ''; top: 80px; position: absolute; margin: auto; height: 0; width: 0; right: 0; bottom: 0; left: 0; border: 5px solid transparent; border-top-color: #000; } .model .midT06:after { content: ''; width: 2px; height: 41px; background: #000; position: absolute; left: 0; right: 0; margin: auto; top: 39px; } .model .rightIcons .midT06:before { content: ''; top: -122px; position: absolute; margin: auto; height: 0; width: 0; right: 0; bottom: 0; left: 0; border: 5px solid transparent; border-bottom-color: #000; } .model .rightIcons .midT06:after { content: ''; width: 2px; height: 41px; background: #000; position: absolute; left: 0; right: 0; margin: auto; top: -39px; } .rightIcon { width: 4%; height:2px; background:#000; position: relative; } .rightIcon .b1 { width:8px; height:2px; background:#b9c0cb; position: absolute; left:40%; } .rightIcon .b1:after { content:''; width:8px; height:2px; background:#000; position: absolute; left:-1px; top:-2px; transform: rotate(-45deg); } .rightIcon .b1.b2:after { top: 2px; left: 1px; } .rightIcon:after { content: ''; top:0; position: absolute; margin: auto; height: 0; width: 0; right: -5px; bottom: 0; border: 5px solid transparent; border-left-color: #000; } .rightIcons .rightIcon:after { left: -5px; border: 5px solid transparent; border-right-color: #000; right: auto; } .model .midTs span { margin:0 4px } .midTd { margin: 30px 0 30px 4%; display:flex; align-items: center; justify-content: space-between; } .midTd .midTd01 { height:140px; /*width:180px;*/ width: 22%; flex-direction: column; text-align: center; position: relative; } .midTd .midTd01 i.icon1 { position: absolute; height: 2px; width: 18%; right: -19%; background: #000; } .midTd .midTd01 i.icon1::before { content: ''; position: absolute; border: 5px solid transparent; border-right-color: #000; left: -5px; top: 0; bottom: 0; margin: auto; } .midTd .midTd01 i.icon1::after { content: ''; position: absolute; border: 5px solid transparent; border-left-color: #000; right: -5px; top: 0; bottom: 0; margin: auto; } .midTd01Icon1 { height: 60px; width: 2px; position: absolute; background: #000; top: -60px; left: 85%; } .midTd01Icon1:after { content:''; width:0; height:0; border:5px solid transparent; border-bottom-color:#000; top:-10px; left:-4px; position: absolute; } .midTd01Icon2 { height: 60px; width: 2px; position: absolute; background: #000; bottom: -60px; left: 85%; } .midTd01Icon2:after { content:''; width:0; height:0; border:5px solid transparent; border-top-color:#000; bottom:-10px; right:-4px; position: absolute; } .model .midTd01 span { margin:4px auto; } .midTd .midTd02 { height:140px; width: 74%; background:#ababab; border:none } .midTd02 span { font-size: 20px; } .modelBoxRight01 { width: 100%; height:200px; background:#ababab; border-radius: 10px; color:#fff; display: flex; font-size: 20px; justify-content: center; align-items: center; flex-direction: column; margin-left: 25%; /*margin-right: 13%;*/ position: relative; pointer-events: none; } .modelBoxRight .im { position: absolute; text-align: center; line-height: 24px; color: #b9b9b9; } .modelBoxRight .im1 { top: -140px; left: 40px; } .modelBoxRight .im2 { bottom: -140px; left: 40px; } .modelBoxRight .im3 { right: 25%; top: 10px; } .rightIcon i.line1 { position: absolute; top: -60px; } .rightIcon i.line2 { position: absolute; top: 40px; right:0; } .modelBoxRight01 i.icon1 { position: absolute; height: 2px; width: 32%; left: -32%; background: #000; } .modelBoxRight01 i.icon1:before { content: ''; position: absolute; border: 5px solid transparent; border-right-color: #000; left: -5px; top: 0; bottom: 0; margin: auto; } .modelBoxRight01 i.icon1:after { content: ''; position: absolute; border: 5px solid transparent; border-left-color: #000; right: -5px; top: 0; bottom: 0; margin: auto; } .modelBoxRight01 i.icon2 { position: absolute; height: 55px; width: 2px; background: #000; left: 0; top: -55px; right: 0; bottom: 0; margin: 0 auto; } .modelBoxRight01 i.icon2:after { content:''; position:absolute; border:5px solid transparent; border-top-color:#000; left:-4px; right:0; bottom:-5px; margin:auto; } .modelBoxRight01 i.icon3 { position: absolute; height: 55px; width: 2px; background: #000; left: 0; bottom: -55px; right: 0; margin: 0 auto; } .modelBoxRight01 i.icon3:after { content:''; position:absolute; border:5px solid transparent; border-bottom-color:#000; left:-4px; right:0; top:-5px; margin:auto; } .modelBoxRight01 i.icon4 { position: absolute; height: 2px; width: 83%; background: #000; left: -83%; bottom: -55px; right: 0; margin: 0 auto; } .modelBoxRight01 i.icon4:after { content: ''; position: absolute; border: 5px solid transparent; border-right-color: #000; left: -5px; top: -4px; margin: auto; } .modelBoxRight01 i.icon5 { position: absolute; height: 2px; width: 83%; background: #000; left: -83%; top: -55px; right: 0; margin: 0 auto; } .modelBoxRight01 i.icon5:after { content: ''; position: absolute; border: 5px solid transparent; border-right-color: #000; left: -5px; top: -4px; margin: auto; } .modelBoxRight02 { width: 34%; height:60px; background:#ababab; border-radius: 10px; color:#fff; display: flex; font-size: 20px; justify-content: center; align-items: center; position:relative; } .modelBoxRight02:before { content:''; width:2px; height: 142px; position:absolute; background:#000; left:0; right:0; margin:auto; bottom: 60px; } .modelBoxRight02 i.icon:before { content:''; width: 244%; height: 2px; position:absolute; background:#000; right: 50%; margin:auto; bottom: 200px; } .modelBoxRight02:after { content:''; width:2px; height: 142px; position:absolute; background:#000; left:0; right:0; margin:auto; top: 60px; } .modelBoxRight02 i.icon:after { content:''; width: 244%; height: 2px; position:absolute; background:#000; right: 50%; margin:auto; top: 200px; } .modelBoxRight02 i.icon2:before { content: ''; position: absolute; margin: auto; height: 0; width: 0; top: -146px; right: 0; left: -489%; border: 5px solid transparent; border-right-color: #000; } .modelBoxRight02 i.icon2:after { content: ''; position: absolute; margin: auto; height: 0; width: 0; top: 0; right: 0; bottom: -342px; left: -489%; border: 5px solid transparent; border-right-color: #000; } .modelBoxRight02 i.icon3 { position:absolute; height:2px; width: 38%; left: -38%; background:#000; } .modelBoxRight02 i.icon3:before { content: ''; position: absolute; border: 5px solid transparent; border-right-color: #000; left: -5px; top: 0; bottom: 0; margin: auto; } .modelBoxRight02 i.icon3:after { content: ''; position: absolute; border: 5px solid transparent; border-left-color: #000; right: -5px; top: 0; bottom: 0; margin: auto; } .modelBoxRight01 span,.modelBoxRight02 span { margin:4px } .modelBox { max-width: 1526px; padding:130px 30px 50px; margin:0 auto; border-radius: 10px; position: relative; /*background: #fff;*/ /*box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2);*/ } .box-shadow { /*background: url('../images/boxShadow.png') no-repeat center top 5px;*/ /*max-width: 1700px;*/ /*margin: 0 auto;*/ } .modelBoxBottom li:nth-child(2) ,.modelBoxBottom li:nth-child(5){ background: #ababab; border:none; } .modelBoxBottom li:nth-child(5) { pointer-events: none; } .modelBox a { color: #000; width: 100%; text-align: center; height: 100%; display: flex; justify-content: center; align-items: center; font-weight: 400; } .modelBox a img { filter: brightness(0); } .midTd01 a ,.modelBoxRight01 a { flex-direction: column; } .modelBoxBottom { max-width: 1240px; margin: 110px auto 0; } .modelBoxBottom ul{ display: flex; justify-content: space-between; } .modelBoxBottom li { background: #f3b176; border-radius: 5px; border: 1px solid #ef9341; width: calc((100% - 30px) / 5); margin-right: 30px; text-align:center; font-size: 20px; } .modelBoxBottomImg { /*width:40px;*/ /*height:40px;*/ text-align: center; line-height: 40px; margin: 20px auto 0; } .modelBoxBottom li:last-child { margin-right:0 } .modelBoxBottom li a { color: #000; display:block } .modelBoxBottom li p { margin-top: 10px; margin-bottom: 20px; } /*脙楼脗潞芒鈧澝兟⑩偓聺脗篓脙漏脗垄芒鈧犆兟ッ吢该吢 css*/ .application.section { max-width: 1240px; } .application .appTitles { font-size:38px; text-align:center; color:#333; margin-bottom: 30px; margin-top: 50px; } .appContent { position:absolute; bottom: 60px; left: 80px; right:80px; } .appContent .appTitle { font-size:32px; color:#fff; margin-bottom: 20px; } .appContent .appDes { font-size:16px; color:#fff; margin-bottom: 30px; } .application .swiper-pagination { right: 30px; text-align: right; bottom: 40px !important; width: 50% !important; left: auto !important; } .application .swiper { border-radius: 15px; } .application .swiper-slide img { transition:all 0.5s; width:100%; height:auto; } .application .swiper-slide:hover img { transform: scale(1.1); transition:all 0.5s; } .application .swiper-slide .appMore { background: url('../images/icon.png') no-repeat center; width:24px; height:15px; transition: all 0.5s; } .application .swiper-slide:hover .appMore { background: url('../images/iconHover.png') no-repeat center; transition: all 0.5s; } .appCon { display:flex; justify-content: space-between; max-width: 1240px; margin: 0 auto; align-items: center; } .appCon ul { display: flex; justify-content: space-between; flex-wrap: wrap; } .appCon ul li{ width:calc((100% - 40px) / 2); margin-bottom:40px; background: #eee; } .appCon ul li a { display: flex; justify-content: space-between; align-items: center } .appLeft { width: 180px; padding-bottom: 24%; height:0; overflow: hidden; position: relative; } .appRight { width:calc(100% - 200px); padding-right:20px; } .appLeft img { width:100%; height:auto; transform: translate(-50%,-50%); position: absolute; top:50%; left:50%; transition: all 0.5s; } .appContents .appTitle { font-size: 22px; /* font-weight: 600; */ color: #333; margin-bottom:5px; } .appContents .appDes { line-height: 28px; font-size: 18px; color:#333; } .appCon ul li:hover img { transform: translate(-50%,-50%) scale(1.1); transition: all 0.5s; } /*脙楼芒鈧γ偮兟ッ偮徝偮该兟ッ偮吢久兟ッ吢犆⑩偓潞*/ .strength { height:300px; position: relative; display: flex; align-items: center; justify-content: flex-start; margin:50px auto; background-size: cover !important; } .strBox { max-width:1240px; padding:0 20px; margin:0 auto; width:100%; } .strTitle { font-size:48px; color:#fff; } .strDes { font-size:24px; color:#fff; margin-top:10px; } /*脙娄芒鈧€溍偮懊兟┟⑩偓鈥澝偮幻兟っ偮该偮兟ッ偮棵嗏€?/ .news { display:flow-root; margin-bottom:50px; max-width:1240px !important } .news .newsTitles { font-size:38px; text-align:center; color:#333; margin-bottom: 30px; margin-top: 50px; } .news .newBox { border-top:1px solid #e5e5e5; display: flow-root; margin-bottom:100px; } .newBox ul { margin-top:50px } .newBox li { width:calc((100% - 140px) / 3); margin-right: 70px; float: left; } .newBox li:hover .newsTitle { color:#ee7430; transition: all 0.5s; } .newBox li:nth-child(3n) { margin-right:0; } .newBox .newsTime { font-size: 12px; color:#666; } .newBox .newsTitle { font-size: 20px; color:#333; margin:10px auto 30px; transition: all 0.5s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .newBox .newsDes { font-size: 16px; color: #666; line-height:24px } .newsImg { height:0; padding-bottom:51%; overflow: hidden; position: relative; margin-bottom:20px; } .newsImg img { transition: all 0.5s; transform: translate(-50%,-50%); width: 100%; height:auto; position: absolute; top:50%; left:50%; } .newsImg:hover img { transform: translate(-50% ,-50%) scale(1.1); transition: all 0.5s; } /*脙楼脗聬脣鈥犆兟っ偮矫呪€溍兟っ偮济⑩€灺⒚兟っ偮济偮?/ .partner { display: flex; background: #f7f7f7; align-items: center; } .partnerTitle { font-size: 38px; text-align: center; color: #333; /* font-weight: 100; */ margin-bottom: 10px; } .partner .partnerImgs { width:50%; overflow: hidden; } .partner .partnerImgs img { width:100%; transition: all 0.5s; } .partner .partnerImgs:hover img { transition: all 0.5s; transform: scale(1.1); } .partnerBox { width:50%; } .partnerShow { max-width: 660px; margin:0 auto; padding:0 20px; display: flex; flex-wrap: wrap; justify-content: space-between; } .partner .partnerImg { border: 1px solid #eee; width:calc((100% - 30px) / 4); margin-bottom:10px; } .partner img { width:100%; height:auto; } /*footer css*/ .footer { background-color:#262626; padding:90px 0 } .footerContent { width: 600px; float:left } .footerBox { display:flow-root; } .footerMenu { width: calc(100% - 600px); float:right; display: flex; justify-content: space-around; max-width: 780px; } .menuAbout li a,.menuQuick li a { transition: all 0.5s; } .menuAbout li a:hover,.menuQuick li a:hover { color:#ee7430; transition: all 0.5s; } .menuLink { width:20%; float: left; } .footerLogo { margin-bottom: 50px; } .footerLogo img { max-width:100% } .footerPhone { display: flex; } .wechatCode { width: 120px; background: #222222; border-radius:5px; border:1px solid rgba(255,255,255,0.1); text-align: center; color:rgba(255,255,255,0.3); font-size:12px; padding:12px 0; } .wechatCode p { margin-top:4px; } .phoneRight { padding-left:30px; } .phone { background:url('../images/f_02.png') no-repeat center left; padding-left: 60px; } .phone a { font-size:34px; color:#fff; line-height: 24px; } .phone span a{ font-size: 23px; } .contact { color:#fff; border-top:1px solid rgba(255,255,255,0.1); padding-top:15px; margin-top:15px; font-size: 16px; } .contact a { color:#fff; } .contact .eMail { background: url('../images/youxiang.png') no-repeat center left; padding-left:20px; } .contact a:hover { color:#ee7430 } .contact .address { background: url('../images/dizhi.png') no-repeat center left; padding-left:20px; margin-top:10px; } .menuT { color:rgba(255,255,255,0.6); margin-bottom:20px; font-size: 17px;} .menuLinkBox { display: flex; justify-content:flex-start; flex-wrap: wrap; } .links { position:relative; cursor:pointer; width: calc(100% / 3); margin-bottom:20px } .wechatShow { position: absolute; top:24px; left: 0; display: none; } .wechatC:hover .wechatShow { display: block; } .footerMenu li { margin-bottom: 10px; font-size: 17px;} .footerMenu li a { color:#fff } .menuQuick li { } .linkBox { border-top:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.6); font-size:14px; margin:65px auto 50px; display: flow-root; line-height: 30px;padding: 20px 0;} .linkBox li { float:left; margin:0 30px } .linkBox a { color:rgba(255,255,255,0.6); font-size:14px; } .linkBox a:hover { color:#ee7430; transition: all 0.5s; } .linkBox span { float:left; width: 70px;} .linkBox ul { float:left; width: calc(100% - 100px); } .upTop { float:right; } .copyRight { display: flex; color:rgba(255,255,255,0.3);; font-size:12px; justify-content: space-between; } .copyRight a { color:rgba(255,255,255,0.3); font-size:12px; } .copyRight a:hover { color:#ee7430; transition: all 0.5s; } .upTop { cursor: pointer; } .phone-wechat-code { display:none; } .phoneSearch { display: none; } @media screen and (max-width:1600px) { /*脙娄脗篓脗隆脙楼脗聺芒鈧€澝兟吢犆偮兟⑩偓掳芒鈧?/ .model .midTs,.modelBoxBottom li { font-size:16px; } .midTd02 span,.modelBoxRight01 { font-size:20px; } } @media screen and (max-width:1440px) { /*脙娄脗篓脗隆脙楼脗聺芒鈧€澝兟吢犆偮兟⑩偓掳芒鈧?/ .model .midTs,.modelBoxBottom li { font-size:14px; } .midTd02 span,.modelBoxRight01 { font-size:18px } .modelBoxMid { width: calc(100% - 480px); } .modelBoxRight { width:25%; } } @media screen and (max-width:1366px) { .model .modelTitle,.products .proTitles,.application .appTitles,.news .newsTitles,.partnerTitle { font-size:32px; } .menuQuick { } .menuLink { width: 220px; clear: both; } .logo { width: 350px; } .menu { width:calc(100% - 350px) } .menu .menuBox .secondList, #product .secondMenu::after { width: 45%; } .menu .menuBox .secondListShows { width: 55%; } .menu .menuBox .secondListShow ul li a { font-size: 16px; } .menu .menuBox .secondListShow ul li .third a { font-size: 14px; } } @media screen and (max-width:1280px) { .modelBoxLeft { width:140px; } .modelBoxMid { width: calc(100% - 340px); } .modelBoxRight .im3 { right:20%; } .strength .rightText .rightTexts span { font-size:36px; } .footerContent { width:40% } .footerMenu { width:55%; flex-wrap: wrap; } .phone a { font-size:24px; } .menuLink{ width:50%; } } @media screen and (max-width:1200px) { /*header css*/ .menu .menuBox ul li a { font-size:14px; } .logo { width: 320px; } .menu { width:calc(100% - 320px) } } @media screen and (max-width:1100px) { .modelBox a { flex-direction: column; } .model .midT06:before { top:103px } .model .rightIcons .midT06:before { top:-103px } .model .midT06:after { height:18px; top:59px } .model .rightIcons .midT06:after { height:18px; top:-17px } .midTd02 span, .modelBoxRight01 { font-size:16px; } } @media screen and (max-width:1000px) { .logo { width: 240px; } .logo img { width: 100%; } .menu { width: calc(100% - 260px); } } /*@media screen and (max-width:900px) { .menu { width: calc(100% - 230px); } .logo { width: 200px; } .logo img { width: 100%; } .searchBox { width:155px; } .menuBox { width: calc(100% - 180px); float: left; max-width: 1100px; } }*/ @media screen and (max-width:980px) { .phoneSearch { display: block; width: 100%; clear: both; padding: 0 20px; color: #000; } .phoneSearch a { color: #000; } /*header css*/ .header { height:60px; line-height: 60px; } .logo { width: 66%; height:60px; } .logo img { max-width:100%; } .menu { position: fixed; background: #fff; height: 100vh; z-index: 9; width: 101%; right: -101%; transition: all 0.5s; border-left: 1px solid #eee; overflow:auto ; overflow-x:hidden ; } .menuBox { width:100%; margin-top:60px; } .menu .menuBox ul { display: block; } .close { display: block; font-size: 24px; position: absolute; right: 30px; color: #ee7430; width: 30px; text-align: center; cursor: pointer; background: url(../images/close.png) no-repeat center; text-indent: -99px; overflow: hidden; background-size: 60%; } .phoneShow { right:-1px; transition: all 0.5s; } .phoneLineBox { float: right; position: relative; top: 20px; cursor: pointer; width: 24px; height: 20px; line-height: 24px; display: flex; align-items: center; } .phoneLine { width: 24px; height: 2px; background: #ee7430; } .phoneLine:before { content: ''; width:24px; height:2px; background:#ee7430; position: absolute; top:0; left:0; } .phoneLine:after { content: ''; width:24px; height:2px; background:#ee7430; position: absolute; bottom:0; left:0; } .menu .menuBox ul li a { line-height:40px; display: block; border-bottom:1px solid #eee; padding-left:20px; position: relative; height: 40px; } .menu .menuBox > ul > li:nth-child(1) > a::after,.menu .menuBox > ul > li:nth-child(2) > a::after,.menu .menuBox > ul > li:nth-child(3) i { content:''; position: absolute; background: url('../images/menuIconHover.png') no-repeat center center; width: 70px; height: 40px; right: 0; top: 0; margin: auto; transition: all 0.5s; z-index: 30; } #service .serMenu { position: relative; width: 100%; left: 0; margin-left: 34px; top: 0; text-align: left; box-shadow: none; padding-bottom:0; } #service .serMenu a { font-size:13px; text-align: left; padding:0; line-height:34px; color:#333; } #service.services .serMenu { display: none; } .iRotate { transform: rotate(90deg); } .listShowTitle,.menuListTitle { position: relative; } .listShowTitle::after{ content:''; position: absolute; background: url('../images/menuIconHover.png') no-repeat center right; width: 6px; height: 10px; right: 20px; top: 0; bottom: 0; margin: auto; transition: all 0.5s; } .menuListTitle::after { content:''; position: absolute; background: url('../images/menuIconHover.png') no-repeat center right; width: 6px; height: 10px; right: 39px; top: 0; bottom: 0; margin: auto; transition: all 0.5s; } .searchBox { width:80%; float:left; height: 20px; margin-top: 30px; } .secondList { display:none } .secondMenuBox { padding: 0; min-height: auto; } .menuClose { display:none } .menu .menuBox .secondListShows { width: 100%; } .secondListShow { padding:20px; } .listShowTitle { font-size:13px; padding: 14px 0; } .menu .menuBox .secondListShow ul { margin-top:0 !important; display: none; } .menu .menuBox .secondListShow ul li { width:100% !important; padding-right:20px !important; } .menu .menuBox .secondListShow ul li a { font-size:12px !important; } .menu .menuBox .secondListShow ul li.third a { padding-left:40px; } .menu .menuBox .secondListShow .lookMore { display:none } .secondListShow { display:block; padding:0 20px; } .secondMenu{ border-top:none; position: relative; top:0; left:10px; } .menuLists { font-size:13px; display:block; margin:0; } .menuLists .menuListTitle { font-size:13px; color:#000; line-height: 1; padding:10px 0 10px; border-bottom:1px solid #eee; } .menuLists .menuListTitle img { display:none } .menuList a { font-size:12px !important; border: none !important; } .listShowTitle { pointer-events: auto; } .menuLists .menuList ul li { border-bottom:1px solid #eee; } .menuLists .menuList ul { display:none; } .menuList { padding-left:20px; margin-right:0; width:100% } .menuLists .menuListTitle { pointer-events: auto; } .menu .menuBox .secondListShow ul.ulChange { display:none; height:auto; } /*脙娄脗篓脗隆脙娄芒鈧姑吢该兟吢犆偮兟⑩偓掳芒鈧?/ .model { padding-top:50px; } .modelBox { display:none; } .modelBoxPhone { display:block; } .model .modelTitle { font-size:24px; margin-bottom:30px; } .modelBoxBottom li { width: calc((100% - 24px) / 2); margin-right: 20px; float: left; margin-bottom: 20px; } .modelBoxBottom li:nth-child(2n) { margin-right: 0; } .modelBoxBottom ul { flex-wrap: wrap; } /*脙陇脗潞脗搂脙楼芒鈧撁偮?/ .products { padding-top:50px; } .products .proTitles { font-size:24px; margin-bottom:30px; } .products .proContent .proTitle { font-size:16px; margin-bottom: 4px; margin-top:4px } .products .proContent .proDes { font-size:12px; overflow: hidden; } .products .proContent .proMore { margin:0 0 20px; font-size: 12px; } .productClass { font-size:12px; } /*脙楼脗潞芒鈧澝兟⑩偓聺脗篓*/ .application .appTitles { font-size:24px; margin-bottom:30px; } .appContent .appTitle { font-size:18px; } .appContent .appDes { font-size:14px; } .applicationImg { height:0; padding-bottom: 75%; } .application .swiper-slide img { height:100%; width:auto; position: absolute; } .strength .strengthNum { display:block; margin:50px auto; } .strength .number_box li { width: calc((100% - 40px) / 3); margin-right:20px; float:left } .strength .number_box li:last-child { margin-right:0 } .strength .number_box .gd-count, .strength .number_box p { font-size:28px; } .strength .rightText .rightTexts span { font-size:28px; } .strength .rightText .rightTextsD { margin-top:20px; max-width:100%; } .strength .rightText { margin-right:0 } .strength .strengthNum { width:100%; } .strengthImg:last-child { display: none; } /*脙娄芒鈧€溍偮懊兟┟⑩偓鈥澝偮?/ .newBox li { width:100%; margin-bottom:15px; border-bottom:1px solid #eee; padding-bottom:15px; } .newBox .newsTitle { font-size:16px; margin-bottom:10px } .news .newsTitles { font-size:24px; margin-bottom:30px; margin-top:50px } .news .newBox { margin-bottom:50px; } /*脙楼脗聬脣鈥犆兟っ偮矫呪€溍兟っ偮济⑩€灺⒚兟っ偮济偮?/ .partner { display: block; } .partner .partnerImgs { width:100%; margin-bottom:50px; } .partnerBox { width:100%; padding-bottom:30px; } .partnerTitle { font-size:24px; margin-bottom:30px; } .partner .partnerImg { width:calc((100% - 20px) / 2) } /*footer*/ .footerContent { width:100%; } .footerMenu { width:100% } .phone { background-size:24px; padding-left:40px; } .phone a { font-size:18px; } .phone span a { font-size:16px; } .menuAbout,.menuQuick { width:100%; margin-bottom: 20px; } .footerMenu li { width:calc(100% / 3); float: left; } .menuT { margin-bottom: 10px; } .menuLink { margin-top: 0; } .copyRight { display:block; line-height: 24px; } .footerMenu li a { font-size:12px; } .strength .number_box .countDes { font-size:12px } .application .appTitles { margin-top:60px; } .appContent { left:20px; right:20px; position: inherit; } .wechatCode { display: none; } .phoneRight { padding-left:0; width: 100%; display: flex; flex-wrap: wrap; align-items: center; } .footerLogo { margin-bottom:20px; } .footer { padding:40px 0 } .footerMenu { display:none } .linkBox { margin-top:20px; } .footerLogo img { width:70%; } .phoneIcon::after { transition: all 0.5s; transform: rotate(90deg); } .appCon { flex-direction: column-reverse; } .appLeft,.appRight { width:100%; } .mask { display:none } .appCon ul li { width:100%; } .appCon ul li a { flex-direction: column; } .appRight { padding:20px; } .products .proContent { padding:0 20px } .strTitle { font-size:24px; } .strDes { font-size:18px; } .swiper-button-prev.banner-prev, .swiper-button-next.banner-next { width:30px; height:30px; } .appContents .appTitle { font-size:18px; } .appContents .appDes { font-size:14px; } .strength { height:200px; } .bodyActive .bodyMask { position: fixed; top: 0; width: 100%; background: rgba(0,0,0,0.5); left: 0; height: 100%; z-index: 1; } .menu .menuBox .secondListShow ul li a img{ padding-right:0 } .bodyActive { overflow:hidden; position: relative; max-height: 100vh; } .partnerImgs .video-play img { width:50px !important } .footerPhone { flex-direction: column; } .phone-wechat-code { display:block; } .phone-wechat-code { display: block; width: 120px; color: rgba(255,255,255,0.3); padding: 10px; text-align: center; background: #222222; border-radius: 5px; border: 1px solid rgba(255,255,255,0.1); font-size: 12px; margin-right: 10%; } .phone-wechat-code img { margin-bottom:5px; } .contact { width:100%; } .swiper-button-prev.banner-prev { left: 10px; } .swiper-button-next.banner-next { right: 10px; } .swiper-button-prev.banner-prev:after, .swiper-button-next.banner-next:after { font-size:24px; } .products .proImg:after { left: 20px; } }