body, html { padding: 0; margin: 0; background-color: #fff; font-size: 14px; font-family: "PingFang SC", "榛戜綋", serif; color: #262626; width: 100vw; overflow-x: hidden; } body.modelShow { overflow-y: hidden; } * { box-sizing: border-box; margin: 0; padding: 0; } a, a:hover { color: inherit; text-decoration: inherit; } button, input, textarea { -webkit-appearance: none; appearance: none; } li, ul { list-style: none; } @font-face { font-family: "impact"; src: url("../fonts/impact.ttf"); } @font-face { font-family: "impactc"; src: url("../fonts/impactc.ttf"); } .wrap { margin-left: auto; margin-right: auto; max-width: 1650px; } /* 澶撮儴 */ .header { position: fixed; left: 0; top: 0; width: 100%; z-index: 10; height: 100px; border-bottom: 1px solid #fff; transition: all 0.5s ease; border-color: rgba(255, 255, 255, 0.24); } .header:hover { background: #fff; } .header.active { background-color: #fff; } .header .logo { display: flex; align-items: center; height: 100px; width: 300px; float: left; } .header .logo .logo_b { display: none; } .header:hover .logo .logo_b { display: block; } .header:hover .logo .logo_w { display: none; } .header.active .logo .logo_b { display: block; } .header.active .logo .logo_w { display: none; } .header .logo img { width: 100%; } .header .logo a { display: flex; height: 100px; align-items: center; } .header .tools { display: flex; align-items: center; padding: 0 40px; float: right; transition: 0.5s ease; height: 100px; border-left: 1px solid rgba(255, 255, 255, 0.24); } .header .tools .item { display: flex; } .header .tools span { color: #fff; display: flex; align-items: center; } .header:hover .tools span { color: #333; } .header.active .tools span { color: #333; } .header .tools span img { width: 25px; height: 25px; display: flex; } .header .tools span.arrow { margin-left: 5px; padding-top: 4px; } .header .tools .active { display: none; } .header:hover .tools .active { display: flex; } .header:hover .tools .normal { display: none; } .header.active .tools .active { display: flex; } .header.acctive .tools .normal { display: none; } .header .tools .language img { width: 20px; height: 20px; } .header .tools .language { margin-left: 30px; } .header .tools .search img { width: 20px; height: 20px; } .header .tools .search { margin-left: 30px; } .header .tools .search span { margin-left: 5px; } .header .tools .dz img { width: 20px; height: 20px; } .header .tools .dz { margin-left: 30px; } .header .tools .dz span { margin-left: 5px; } .header .tools .item:hover { cursor: pointer; } .header .tools .item { position: relative; } .header .tools .item.think ul { padding: 5px 0; position: absolute; left: 50%; margin-left: -50px; top: 100%; margin-top: 5px; width: 100px; border: 1px solid #e5e5e5; text-align: center; display: none; background: #fff; z-index: 6; } .header .tools .item.think ul li a { font-size: 14px; line-height: 30px; color: #666; } .header .tools .item.language .sub { position: absolute; padding: 35px 0; left: -55px; top: 28px; background: #f4f4f4; width: 128px; font-size: 12px; padding: 7px 20px; color: #555; opacity: 0; transition: all 0.5s ease; z-index: 6; } header .tools .item.language .sub a{ border-bottom: 1px solid #eee; font-size: 14px; display: block; line-height: 32px; text-align: center; } .header.active .tools .normal { display: none; } header .tools .item.language .sub a:hover { color: #ea5413; } .header.active .innav li { color: #333; } .header .tools .item.language .sub::after { content: ""; height: 0; width: 0; overflow: hidden; font-size: 0; line-height: 0; border-color: transparent transparent #f4f4f4 transparent; border-style: solid solid dashed dashed; border-width: 6px; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); } .header .tools .item.language:hover .sub { opacity: 1; } .header .innav { float: right; } .header .innav > ul > li { font-size: 15px; line-height: 100px; padding: 0px 25px; float: left; color: #fff; transition: padding 0.5s ease; } .header:hover .innav li { color: #333; } .header:hover .innav li:hover { color: #ea5413; } .searchBox { position: fixed; left: 0; top: -100%; width: 100%; height: 100px; background: #fff; z-index: 98; } .searchBox .wrap { height: 100%; } .searchBox .searchL { float: left; height: 100%; width: calc(100% - 101px); } .searchBox .close { border-left: 1px solid #e1e0e1; cursor: pointer; float: right; width: 100px; height: 100%; display: flex; justify-content: center; align-items: center; } .searchBox .close img { width: 35px; transition: all 0.5s ease; } .searchBox .close:hover img { transform: rotate(90deg); } .searchBox .searchL .input { position: relative; padding-left: 50px; height: 100%; display: flex; align-items: center; } .searchBox .searchL .input .icon { position: absolute; left: 0; top: 50%; margin-top: -10px; width: 30px; height: 30px; background: url(../images/search2.png) no-repeat; background-size: 25px; } .searchBox .searchL .input form { position: relative; width: 100%; } .searchBox .searchL .input input { outline: none; border: none; font-size: 15px; height: 70px; line-height: 70px; text-align: left; width: 80%; box-sizing: border-box; background: none; padding: 0; } .searchBox .searchL .input button { width: 120px; height: 40px; line-height: 40px; text-align: center; border-radius: 40px; background-color: transparent; outline: none; border: 1px solid#aaa; cursor: pointer; color: #aaa; font-size: 15px; transition: all 0.5s ease; } .searchBox .searchL .input button:hover { background-color: #ea5413; color: #fff; border: 1px solid #ea5413; } .header .innav li .dropDown { overflow: hidden; position: absolute; z-index: 5; width: 100%; top: 100%; left: 0; background-color: #fff; display: none; } .header .innav li .dropDown .wrap { height: 100%; overflow: hidden; position: relative; z-index: 2; } .header .innav li .dropDown .l { height: 100%; padding-top: 40px; padding-left: 4%; float: left; width: 28%; background-image: linear-gradient(to right, #efefef, #eee); padding-bottom: 40px; } .header .innav li .dropDown .bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; } .header .innav li .dropDown .bg .l { float: left; width: 28%; background-image: linear-gradient(to right, #efefef, #eee); } .header .innav li .dropDown .bg .r { position: absolute; left: 28%; top: 0; right: 0; bottom: 0; } .header .innav li .dropDown1 .bg .r { background: url(../images/dropdown1.jpg); background-position: center right; background-repeat: no-repeat; } .header .innav li .dropDown2 .bg .r { background: url(../images/dropdown2.jpg); background-position: bottom right; background-repeat: no-repeat; background-size: 97%; } .header .innav li .dropDown3 .bg .r { background: url(../images/dropdown3.jpg); background-position: center right; background-repeat: no-repeat; } .header .innav li .dropDown4 .bg .r { background: url(../images/dropdown4.jpg); background-position: center right; background-repeat: no-repeat; } .header .innav li .dropDown5 .bg .r { background: url(../images/dropdown5.jpg); background-position: center right; background-repeat: no-repeat; } .header .innav li .dropDown6 .bg .r { background: url(../images/dropdown6.jpg); background-position: center right; background-repeat: no-repeat; } .header .innav li .dropDown7 .bg .r { background: url(../images/dropdown7.jpg); background-position: center right; background-repeat: no-repeat; } .header .innav li .dropDown .l .dnav li a { display: block; line-height: 45px; color: #333; padding-left: 30px; } .header .innav li .dropDown .l .dnav li a:hover { background: #fff; color: #ea5413; } .header .innav li .dropDown .dnav { padding-bottom: 30px; position: relative; } .header .innav li .dropDown .dnav::after { position: absolute; left: 0; bottom: 0; right: 15%; content: ""; display: block; background-color: #ccc; height: 1px; } .header .innav li .dropDown .l .sig { padding-top: 30px; padding-left: 30px; } .header .innav li .dropDown .l .sig dt { font-size: 16px; line-height: 30px; color: #333; } .header .innav li .dropDown .l .sig dd { line-height: 30px; color: #333; } .header .innav li .dropDown .l .sig dd a { line-height: 30px; color: #333; } .header .innav li .dropDown .l .sig dd a:hover { color: #ea5413; } .header .innav li .dropDown .wrap .r { float: left; width: 40%; padding-left: 5%; padding-top: 50px; } .header .innav li .dropDown .wrap .r h2 { font-size: 25px; color: #000; line-height: 50px; font-weight: normal; } .header .innav li .dropDown .wrap .r p { font-size: 15px; color: #000; line-height: 30px; margin: 13px 0 45px; } .header .innav li .dropDown .wrap .r a { border: 1px solid #e1e0e1; width: 170px; height: 55px; line-height: 55px; border-radius: 55px; padding-left: 40px; margin-bottom: 80px; display: block; color: #333; transition: all 0.5s ease; position: relative; } .header .innav li .dropDown .wrap .r a span { display: inline-block; width: 30px; height: 30px; background: url(../images/arrow_right_1.png); background-size: 25px; background-repeat: no-repeat; background-position: center center; position: absolute; top: 50%; transform: translateY(-50%); right: 30px; transition: all 0.5s ease; } .header .innav li .dropDown .wrap .r a:hover span { background: url(../images/arrow_right_1_on.png); display: inline-block; width: 30px; height: 30px; background-size: 25px; background-repeat: no-repeat; background-position: center center; position: absolute; top: 50%; transform: translateY(-50%); right: 25px; } .header .innav li .dropDown .wrap .r a:hover { background-color: #ea5413; color: #fff; border: 1px solid #ea5413; } .header .orderCon { overflow: hidden; position: absolute; z-index: 5; width: 100%; top: 100%; left: 0; height: 600px; display: none; background-color: #f9f9f9; } .header .orderCon .l { float: left; width: 50%; padding-top: 85px; } .header .orderCon .l h2 { font-size: 25px; font-weight: normal; margin-bottom: 20px; } .header .orderCon .l p { margin-bottom: 28px; } .header .orderCon .l input { width: 47%; padding-right: 7%; border: none; height: 46px; line-height: 46px; background-color: #efefef; text-indent: 30px; margin-left: 4%; float: left; outline: none; margin-bottom: 25px; } .header .orderCon .l input:nth-child(2n + 1) { margin-left: 0; } .header .orderCon .l textarea { background-color: #f5f5f5; width: 98%; border: none; outline: none; height: 130px; padding-top: 20px; padding-left: 4%; } .header .orderCon .l button { width: 200px; height: 45px; line-height: 45px; text-align: center; color: #fff; background-color: #ea5413; font-size: 15px; outline: none; border: none; margin-top: 20px; cursor: pointer; } .header .orderCon .r { padding-top: 70px; float: right; width: 28%; } .header .orderCon .r .con { position: relative; background-color: #ea5413; padding: 30px 35px 50px 45px; } .header .orderCon .r .con h2 { font-size: 25px; color: #fff; font-weight: normal; margin-bottom: 10px; } .header .orderCon .r .con p { color: #fff; margin-bottom: 30px; } .header .orderCon .r .con h2 span { font-size: 20px; } .header .orderCon .r .con p span { margin-right: 5px; } .header .orderCon .r .con img { position: absolute; top: 15px; right: 20px; cursor: pointer; width: 40px; } .header_menu { position: fixed; height: 50px; background-color: #fff; left: 0; right: 0; top: 0; z-index: 50; } .header_menu .menu_box { display: flex; align-items: center; } .header_menu .wrap { height: 100%; display: flex; justify-content: space-between; align-items: center; } .header_menu .wrap .logo { display: flex; } .header_menu .wrap .logo img { height: 25px; } .header_menu .wrap .menu_box img { width: 30px; } .rightNav { left: 100vw; top: 0; position: fixed; width: 100vw; height: 100vh; background-color: #ffff; z-index: 9999; transition: all 0.4s ease; padding: 0 15px; box-sizing: border-box; } .rightNav .top { display: flex; justify-content: flex-end; padding: 20px 5px 30px 0; } .rightNav .close img { width: 25px; } .rightNav ul li { border-bottom: 1px solid #eee; } .rightNav ul li a { display: block; height: 46px; line-height: 46px; font-size: 16px; text-align: center; color: #333; position: relative; } .rightNav ul li a .arrow { display: block; position: absolute; right: 3%; top: 50%; transform: translateY(-50%); display: flex; align-items: center; } .rightNav ul li a .arrow img { width: 20px; transition: 0.3s; } .rightNav ul li .sub { display: none; } .rightNav ul li .sub a { display: block; width: 100%; text-align: center; height: 40px; line-height: 40px; font-size: 14px; } .rightNav ul li.active .arrow img { transform: rotate(90deg); } /* 棣栭〉banner */ .banner-box { position: relative; width: 100%; height: 100vh; overflow: hidden; } .banner-box .banner-item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center center; background-size: cover; display: flex; align-items: center; padding: 0 8.3333333%; } .banner-box .banner-item .c1 { padding-left: 40px; } .banner-box .banner-item .c1 .line { width: 140px; height: 3px; background-color: #213f6b; margin-top: 110px; } .banner { position: relative; } .banner-box .banner-item .videoBox { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; } .banner-box .banner-item .videoBox .mask { position: absolute; z-index: 2; left: 0; top: 0; right: 0; bottom: 0; background: url(../images/mask.png); background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; } .banner-box .banner-item h3 { color: #fff; font-size: 30px; font-weight: normal; margin-bottom: 15px; margin-top: 15px; } .banner-box .banner-item p { color: #fff; font-size: 18px; } .banner-box .banner-item .bannerTxt { z-index: 2; position: relative; } .banner-box .banner-item .bannerTxt h2 { color: #fff; font-family: "impactc"; letter-spacing: 2px; text-transform: uppercase; font-size: 40px; font-weight: normal; } .banner-box.swiper-slide-active .bannerTxt h2 { animation: fadeInUp 1s ease both; animation-delay: 1s; } .banner-box.swiper-slide-active .bannerTxt h3 { animation: fadeInUp 1s ease both; animation-delay: 1.5s; } .banner-box.swiper-slide-active .bannerTxt p { animation: fadeInUp 1s ease both; animation-delay: 2s; } .home .bannerprev { cursor: pointer; position: absolute; left: 2%; top: 50%; transform: translateY(-50%); z-index: 1; width: 40px; height: 40px; background: url(../images/prev.png); background-color: none; background-size: 20px; background-repeat: no-repeat; background-position: center center; } .home .bannernext { cursor: pointer; position: absolute; right: 2%; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; background: url(../images/next.png); background-color: none; background-size: 20px; background-repeat: no-repeat; background-position: center center; } @keyframes fadeInUp { 0% { transform: translateY(40px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .homepagination { position: absolute; left: 10% !important; bottom: 9% !important; z-index: 5; } .homepagination .swiper-pagination-bullet { width: 12px; height: 20px; border-radius: 0; background-color: #fff; transform: skew(-15deg); opacity: 1; } .homepagination .swiper-pagination-bullet-active { background-color: #facd00; } .homeSec2 .title { padding-top: 45px; text-align: center; } .homeSec2 .title h2 { font-weight: normal; font-size: 30px; } .homeSec2 .title p { margin-top: 20px; margin-bottom: 20px; display: inline-block; max-width: 800px; font-size: 16px; line-height: 28px; } .homeSec2 li { float: left; width: 25%; padding: 40px 35px 60px 35px; text-align: center; } .homeSec2 li .icon { display: inline-block; width: 60px; height: 60px; background-repeat: no-repeat !important; background-position: center center !important; } .homeSec2 li .icon.icon1 { background: url(../images/icon1.jpg); background-size: 55px !important; } .homeSec2 li .icon.icon2 { background: url(../images/icon2.png); background-size: 52px !important; } .homeSec2 li .icon.icon3 { background: url(../images/icon3.jpg); background-size: 60px !important; } .homeSec2 li .icon.icon4 { background: url(../images/icon4.jpg); background-size: 50px !important; } .homeSec2 li .number { font-size: 40px; color: #1b66aa; font-family: "impact"; } .homeSec2 li .number span { font-family: "impact"; } .homeSec2 ul { height: auto; overflow: hidden; } .homeSec3 { background: url(../images/hbg1.jpg); background-attachment: fixed; padding: 80px 0 60px 0; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover; } .homeSec3 .wrap { height: auto; overflow: hidden; } .homeSec3 .wrap .r { float: right; width: 730px; } .homeSec3 .title { text-align: right; } .homeSec3 .title h2 { font-weight: normal; font-size: 30px; } .homeSec3 .title p { margin-top: 10px; margin-bottom: 30px; display: inline-block; font-size: 16px; line-height: 28px; } .homeSec3 .content .l { position: relative; width: 430px; height: 330px; overflow: hidden; float: left; } .homeSec3 .content .l .img { position: absolute; z-index: 1; left: 0; top: 0; height: 100%; width: 100%; transition: all 0.5s ease; background: url(../images/ab1.jpg); background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; } .homeSec3 .content .l:hover .img { transform: scale(1.1); } .homeSec3 .content .l .con { position: relative; z-index: 2; padding: 35px; height: 100%; } .homeSec3 .content .l .con h2 { font-weight: normal; font-size: 24px; margin-bottom: 15px; } .homeSec3 .content .l .con p { font-size: 14px; line-height: 26px; } .homeSec3 .content .l .con a { position: absolute; bottom: 30px; right: 30px; transition: all 0.5s ease; } .homeSec3 .content .l:hover .con a { right: 35px; } .homeSec3 .content .r { float: right; width: 250px; } .homeSec3 .content .r .item { display: block; cursor: pointer; overflow: hidden; width: 250px; height: 150px; position: relative; margin-bottom: 30px; } .homeSec3 .content .r .item .img { position: absolute; z-index: 1; left: 0; top: 0; height: 100%; width: 100%; transition: all 0.5s ease; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; } .homeSec3 .content .r .item.item1 .img { background: url(../images/ab2.jpg); } .homeSec3 .content .r .item.item2 .img { background: url(../images/ab3.jpg); } .homeSec3 .content .r .item:hover .img { transform: scale(1.1); } .homeSec3 .content .r .item .con { position: relative; z-index: 2; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; flex-direction: column; } .homeSec3 .content .r .item .con h2 { font-size: 16px; font-weight: normal; } .homeSec3 .content .r .item .con p { font-size: 20px; font-weight: bold; } .homeSec4 { padding-top: 30px; padding-bottom: 100px; } .homeSec4 .title { height: auto; overflow: hidden; padding-bottom: 60px; } .homeSec4 .title .l { float: left; } .homeSec4 .title .l h3 { color: #1b66aa; font-size: 14px; margin-bottom: 20px; } .homeSec4 .title .l h2 { font-weight: normal; font-size: 30px; } .homeSec4 .title .r { padding-top: 50px; float: right; } .homeSec4 .title .r a { cursor: pointer; display: inline-block; width: 144px; height: 36px; text-align: center; line-height: 36px; background-color: #e8e8e8; font-size: 14px; margin-left: 15px; } .homeSec4 .title .r a.active, .homeSec4 .title .r a:hover { color: #fff; background-color: #1b66aa; } .newSwiper { overflow: hidden; position: relative; padding-bottom: 70px; } .newSwiper .newImg { overflow: hidden; height: 300px; position: relative; } .newSwiper .newImg > div { width: 100%; height: 100%; position: absolute; left: 0; right: 0; bottom: 0; top: 0; transition: all 0.5s ease; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; } .newSwiper .newImg:hover > div { transform: scale(1.1); } .newSwiper .txt { padding: 35px 20px; } .newSwiper .txt h1 { font-weight: normal; font-size: 14px; } .newSwiper .txt h2 { font-weight: normal; font-size: 20px; margin: 12px 0 25px 0; color: #000; min-height: 53px; transition: all 0.5s ease; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .newSwiper .txt p { min-height: 50px; font-size: 13px; line-height: 25px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .newSwiper a:hover .txt h2 { color: #ea5413; } .newSwiper .tool { position: absolute; left: 7%; right: 7%; bottom: 0; height: 30px; } .newSwiper .tool .newsprev { position: absolute; left: 0; top: 0; width: 30px; height: 30px; background: url(../images/n_arr_l_on.png); background-size: 30px; background-repeat: no-repeat; background-position: center center; cursor: pointer; } .newSwiper .tool .newsnext { position: absolute; top: 0; right: 0; width: 30px; height: 30px; background: url(../images/n_arr_r_on.png); background-size: 30px; background-repeat: no-repeat; background-position: center center; cursor: pointer; } .newSwiper .tool .newsnext.swiper-button-disabled { background: url(../images/n_arr_r.png); background-size: 30px; background-repeat: no-repeat; background-position: center center; cursor: pointer; } .newSwiper .tool .newsprev.swiper-button-disabled { background: url(../images/n_arr_l.png); background-size: 30px; background-repeat: no-repeat; background-position: center center; cursor: pointer; } .newSwiperPagination { background: rgba(0, 0, 0, 0.25); height: 2px; width: 90%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .newSwiperPagination .my-pagination-progressbar-fill { background-color: #ea5413; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .homeSec4 .newSwiper2 { opacity: 0; } .homeSec4 .swiperContain { position: relative; } .homeSec4 .swiperContain .newSwiper1 { position: relative; z-index: 2; } .homeSec4 .swiperContain .newSwiper2 { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; } .footer { padding-top: 40px; background-color: #2a2a2a; } .footer .copy { border-top: 1px solid rgba(255, 255, 255, 0.3); height: auto; overflow: hidden; padding: 20px 0; } .footer .copy span { color: #d0cece; } .footer .copy .l { float: left; } .footer .copy .r { float: right; text-align: right; } .footer .footCon { padding-top: 30px; height: auto; overflow: hidden; padding-bottom: 80px; } .footer .footCon .l { float: left; width: calc(100% - 400px); } .footer .footCon .r { float: right; } .footer .footCon .l dt { color: #fff; font-size: 20px; margin-bottom: 20px; } .footer .footCon .l dd { margin-bottom: 10px; } .footer .footCon .l dd a { color: #959595; } .footer .footCon .l dl { float: left; margin-right: 7%; } .footer .footCon .r .flogo img { width: 200px; } .footer .footCon .r h2 { color: rgba(255, 255, 255, 0.9); font-weight: normal; font-size: 13px; margin: 10px 0; text-align: right; } .footer .footCon .r .ewm .item { float: right; margin-left: 20px; } .footer .footCon .r .ewm .item .img { width: 90px; height: 90px; background-color: #fff; margin-top: 20px; } .footer .footCon .r .ewm .item .img img{ width: 100%; height: 100%; } .footer .footCon .r .ewm .item .t { color: rgba(255, 255, 255, 0.9); margin: 10px 0; font-size: 12px; text-align: center; } .rightBar { float: right; margin-left: 40px; margin-top: 90px; } .rightBar .item { margin-bottom: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; width: 35px; height: 35px; border-radius: 100%; background-color: #fff; /* box-shadow: 5px 12px 13px rgba(0, 0, 0, .1); */ } .rightBar .item img { width: 20px; } .rightBar .item img.active { display: none; } .rightBar .item:hover img.normal { display: none; } .rightBar .item:hover img.active { display: block; } .rightBar .item:hover { background-color: #ea5413; } .rightBar .down { cursor: pointer; padding-top: 8px; text-align: center; display: block; border-top-right-radius: 35px; border-top-left-radius: 35px; border-bottom-right-radius: 35px; border-bottom-left-radius: 35px; width: 35px; height: 110px; background-color: #ea5413; margin-bottom: 15px; } .rightBar .down img { width: 20px; margin-bottom: 4px; } .rightBar .down span { display: inline-block; width: 20px; line-height: 15px; color: #fff; font-size: 12px; } .homeSec1 .title { padding-top: 45px; text-align: center; } .homeSec1 .title h2 { font-weight: normal; font-size: 30px; } .proUl li { height: 480px; float: left; position: relative; margin-left: 0.6%; transition: all 0.5s ease; overflow: hidden; width: 15%; } .proUl li:first-child { margin-left: 0; } .proUl li.on { /* width: 53.2%; */ width: 37.6%; } .proUl li a { display: block; height: 100%; position: relative; } .proUl { padding: 80px 0 50px 0; height: auto; overflow: hidden; } .proUl li .normal { height: 100%; position: relative; z-index: 3; transition: all 0.5s ease; } .proUl li .normal .txt { text-align: center; position: absolute; padding: 0 2%; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 3; } .proUl li .normal .txt h2 { font-weight: normal; font-size: 18px; margin-bottom: 10px; color: #fff; } .proUl li .normal .txt p { color: #fff; font-size: 15px; } .proUl li .normal .bg { position: relative; z-index: 1; background-position: left top !important; background-size: cover !important; background-repeat: no-repeat !important; width: 100%; height: 100%; } .proUl li .normal .cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background: rgba(0, 0, 0, 0.45); } .proUl li .active { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; } .proUl li .active .bg { position: relative; z-index: 1; background-position: left top; background-size: cover !important; background-repeat: no-repeat !important; width: 100%; height: 100%; } .proUl li .active .cover { position: absolute; z-index: 2; left: 0; top: 0; height: 100%; width: 80%; background-image: linear-gradient( to right, rgba(27, 102, 170, 0.8), rgba(27, 102, 170, 0) ); } .proUl li.on .active { display: block; } .proUl li.on .normal { display: none; } .proUl li.on .active .txt { position: absolute; bottom: 15%; left: 5%; z-index: 3; animation: fadeInUp 0.5s ease both; animation-delay: 0.3s; } .proUl li.on .active .txt h2 { font-weight: normal; font-size: 24px; margin-bottom: 10px; color: #fff; } .proUl li.on .active .txt .desc { color: #fff; font-size: 15px; margin-bottom: 20px; margin-top: 15px; margin-right: 10%; } .proUl li.on .active .txt .txtList { color: #fff; font-size: 14px; } .proUl li.on .active .txt .txtList a { display: inline-block; line-height: 23px; } .proUl li .active .txtList { margin-right: 8%; } .banner-box .banner-item .videoCircle { position: absolute; right: 10%; bottom: 9%; width: 160px; height: 160px; z-index: 2; } .banner-box .banner-item .videoCircle .cir { position: relative; z-index: 1; width: 100%; animation: rotate 8s linear infinite; } .banner-box .banner-item .videoCircle .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } @keyframes rotate { 0% { transform: rotate(0); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } .inBanner { height: 580px; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; position: relative; } .inBanner.banner1 { background: url(../images/ibanner1.jpg); } .inBanner.banner2 { background: url(../images/ibanner2.jpg); } .inBanner.banner3 { background: url(../images/ibanner3.jpg); } .inBanner.banner4 { background: url(../images/ibanner4.jpg); } .inBanner.banner5 { background: url(../images/ibanner5.jpg); } .inBanner.banner6 { background: url(../images/ibanner6.jpg); } .inBanner.banner7 { background: url(../images/ibanner7.jpg); } .inBanner .wrap { position: relative; height: 100%; } .banCon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .banCon h2 { letter-spacing: 4px; color: #fff; font-weight: normal; font-size: 40px; line-height: 40px; margin-bottom: 20px; } .banCon h3 { color: #fff; font-weight: normal; font-size: 22px; letter-spacing: 2px; } .banCon h3 span { margin-right: 11px; } .bannerArr { margin-top: 35px; width: 50px; height: 50px; border-radius: 100%; background-color: #ea5413; background-image: url(../images/down1.png); background-position: center center; background-repeat: no-repeat; background-size: 25px; animation: beating 2s linear infinite; } @keyframes beating { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .inNav { height: 88px; background: url(../images/in_nav.png) no-repeat right center; position: absolute; left: 0; width: 100%; bottom: -33px; z-index: 2; } .inNav1 { height: 88px; background: url(../images/in_nav1.png) no-repeat right center; position: absolute; left: 0; width: 100%; bottom: -33px; z-index: 2; } .inNav .l { float: left; width: 65%; margin-top: 13px; } .inNav .l a { color: #fff; padding: 15px 10px; font-size: 16px; line-height: 75px; position: relative; } .inNav .l a:hover { color: #facd00; } .inNav .l a.active { color: #facd00; } .inNav .l a::after { position: absolute; left: 0; right: 0; bottom: -12px; display: block; content: ""; width: 100%; height: 3px; background-color: #facd00; transform: scaleX(0); transition: 0.3s ease; } .inNav .l a:hover::after { transform: scaleX(1); } .inNav .l a.active::after { transform: scaleX(1); } .inNav .r { float: right; font-size: 15px; color: #fff; line-height: 55px; } .inNav .r em { display: inline-block; margin: 0 5px; } .abSec1 { padding: 100px 0; background: url(../images/bg_line.jpg); } .ntitle h2 { font-size: 40px; font-weight: normal; position: relative; margin-bottom: 15px; letter-spacing: 1px; } .ntitle1 h2 { margin-bottom: 8px; } .ntitle h2 .since { color: #ededed; font-weight: bold; font-size: 68px; margin-left: 25px; vertical-align: -7px; } .ntitle h3 { font-weight: normal; font-size: 24px; letter-spacing: 1px; color: #666; } .ntitle h2::after { display: block; content: ""; width: 110px; height: 10px; background-color: #ea5413; position: absolute; left: 0; bottom: 2px; z-index: 1; } .ntitle1 h2::after { bottom: 14px; } .ntitle span { position: relative; z-index: 2; } .abSec1 .intro .p { margin-top: 40px; padding-bottom: 40px; border-bottom: 1px solid #eee; height: auto; overflow: hidden; } .abSec1 .intro .p .l { float: left; width: calc(100% - 500px); } .abSec1 .intro p { line-height: 28px; font-size: 16px; margin-bottom: 12px; } .abSec1 .intro .r { float: right; width: 450px; } .abSec1 .intro .r .item { float: left; width: 50%; text-align: center; padding-top: 25px; padding-bottom: 20px; } .abSec1 .intro .r .item h3 { font-family: "impact"; font-size: 45px; color: #ea5413; } .abSec1 .intro .r .item h3 span { font-family: "impact"; font-size: 45px; color: #ea5413; } .introCont { padding-top: 55px; height: auto; overflow: hidden; } .introCont .l { padding-top: 24px; float: left; width: 42%; height: 350px; background: url(../images/itembg.jpg); background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; } .introCont .r { float: right; width: 58%; overflow: hidden; height: 350px; } .introCont .r > div { width: 100%; height: 100%; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; transition: 1s ease; } .introCont .r:hover > div { transform: scale(1.1); } .introCont .l .item { width: 50%; height: 145px; padding: 0 5%; text-align: center; color: #fff; float: left; display: flex; align-items: center; justify-content: center; flex-direction: column; } .introCont .l .item p { margin-top: 4px; font-size: 18px; } .abSec2 { background: url(../images/culbg.jpg); background-attachment: fixed; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; height: 600px; } .abSec2 ul { height: 100%; } .abSec2 li { position: relative; padding: 0 2.6%; cursor: pointer; float: left; width: 20%; height: 100%; border-right: 1px solid rgba(255, 255, 255, 0.6); } .abSec2 li > div { position: relative; z-index: 2; padding-top: 240px; } .abSec2 li > div h2 { letter-spacing: 5px; font-size: 26px; color: #fff; transform: translateY(10px); transition: all 0.5s ease; } .abSec2 li > div p { font-size: 16px; color: #fff; transform: translateY(30px); opacity: 0; transition: all 0.5s ease; } .abSec2 li:hover > div p { opacity: 1; transform: translateY(10px); } .abSec2 li::after { content: ""; display: block; width: 100%; height: 0; position: absolute; left: 0; top: 0; right: 0; z-index: 1; transition: all 0.5s ease; background-color: #ea5413; } .abSec2 li:hover:after { height: 100%; } .abSec2 li:hover > div h2 { transform: translateY(0); } .abSec3 { padding: 80px 0; background: url(../images/history.png); } .hisSwiper { margin-top: 100px; } .hisSwiper .item { border-left: 1px solid #dedede; padding: 20px 35px; height: 180px; } .hisBox { position: relative; } .hisBox::after { content: ""; display: block; height: 10px; width: 100%; background: url(../images/hisline.png); position: absolute; left: 0; top: 200px; } .hisSwiper .item h2 { font-size: 40px; color: #ea5413; font-weight: normal; font-family: "impact"; margin-bottom: 20px; } .hisSwiper .item p { line-height: 25px; font-size: 15px; } .hisSwiper .item::before { display: block; content: ""; width: 10px; height: 10px; border-radius: 100%; border: 1px solid #ea5413; position: absolute; bottom: -50px; left: 0; } .hisSwiper .item::after { display: block; content: ""; width: 6px; height: 6px; border-radius: 100%; background-color: #ea5413; position: absolute; bottom: -47px; left: 3px; } .hisBox .hisprev { position: absolute; left: -55px; top: 35%; width: 45px; height: 45px; background-color: #f5f5f5; background-image: url(../images/arr3.png); background-size: 25px; background-repeat: no-repeat; background-position: center center; cursor: pointer; outline: none; } .hisBox .hisprev:hover { background-color: #ea5413; background-image: url(../images/arrow3_on.png); background-size: 25px; background-repeat: no-repeat; background-position: center center; } .hisBox .hisnext:hover { background-color: #ea5413; background-image: url(../images/arrow3_on_r.png); background-size: 25px; background-repeat: no-repeat; background-position: center center; } .hisBox .hisnext { position: absolute; right: -55px; top: 35%; width: 45px; height: 45px; background-color: #f5f5f5; background-image: url(../images/arr3_r.png); background-size: 25px; background-repeat: no-repeat; background-position: center center; cursor: pointer; outline: none; } .abSec4 { padding: 80px 0; background: url(../images/honorbg.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } .honorUl { margin-top: 100px; height: auto; overflow: hidden; } .honorUl li { cursor: pointer; height: 260px; float: left; margin-left: 4%; width: calc(88% / 4); margin-bottom: 45px; background-image: radial-gradient(#fff, #555); overflow: hidden; position: relative; } .honorUl li:nth-child(4n + 1) { margin-left: 0; } .honorUl li .img { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .honorUl li .img img { max-width: 85%; height: 85%; } .honorUl li .cover { display: flex; position: absolute; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(234, 84, 19, 0.8); left: 0; top: 0; right: 0; bottom: 0; z-index: 2; transition: all 0.5s ease; opacity: 0; transform: scale(0); } .honorUl li .cover h2 { font-size: 18px; color: #fff; margin-right: 6%; margin-left: 6%; text-align: center; } .honorUl li .cover .search { width: 35px; height: 35px; background: url(../images/honsearch.png); background-size: 35px; } .honorUl li .cover .line { width: 45px; height: 2px; background-color: #fff; margin: 15px 0; } .honorUl li:hover .cover { opacity: 1; transform: scale(1); } .honPop { position: fixed; z-index: 50; background: rgba(0, 0, 0, 0.75); left: 0; top: -100vh; right: 0; height: 100vh; transition: all 0.5s ease; } .honPop.show { top: 0; } .honPop .close { position: absolute; right: 0; top: 0; width: 50px; height: 50px; cursor: pointer; background-color: #ea5413; background-image: url(../images/close1.png); background-repeat: no-repeat; background-size: 37px; background-position: center center; } .honPop .container { position: absolute; z-index: 55; top: 50%; width: 80%; left: 50%; transform: translate(-50%, -50%); } .honPop .container .img { display: flex; justify-content: center; } .honPop .container img { max-height: 76vh; } .honPop .container .prev { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 45px; height: 45px; background: url(../images/prev.png); background-size: 24px !important; background-repeat: no-repeat; background-position: center center; cursor: pointer; } .honPop .container .next { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 45px; height: 45px; background: url(../images/next.png); background-size: 24px !important; background-repeat: no-repeat; background-position: center center; cursor: pointer; } .abSec5 { padding: 80px 0; background: url(../images/abbg2.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; } .abSec5 .ntitle span { color: #fff; } .abSec5 .ntitle h2::after { background-color: rgba(255, 255, 255, 0.7); } .abSec5 .ntitle h3 { color: #fff; } .abSec5 .wrap { height: auto; overflow: hidden; } .abSec5 .wrap .l { width: 405px; padding-top: 50px; float: left; } .abSec5 .wrap .r { margin-left: 500px; } .abSec5 .item { overflow: hidden; cursor: pointer; height: 400px; display: flex; justify-content: center; align-items: center; background-image: radial-gradient(#fff, #999); } .abSec5 .item img { max-height: 90%; max-width: 90%; transition: all 0.5s ease; } .facSwiper { overflow: hidden; } .abSec5 .item:hover img { transform: scale(1.1); } .abSec5 .facBtn { padding-top: 90px; height: auto; overflow: hidden; } .facprev { float: left; width: 45px; height: 45px; border: 1px solid #fff; outline: none; cursor: pointer; background-image: url(../images/arrow3_on.png); background-size: 30px; background-position: center center; background-repeat: no-repeat; } .facnext { float: left; margin-left: 25px; width: 45px; height: 45px; border: 1px solid #fff; outline: none; cursor: pointer; background-image: url(../images/arrow3_on_r.png); background-size: 30px; background-position: center center; background-repeat: no-repeat; } .newsList { padding: 120px 0 0 0; background: #f1f1f1; } .newsList li a { display: block; height: 275px; border-bottom: 1px solid #cdc8c8; transition: all 0.5s ease; } .newsList li a .l { position: relative; float: left; width: 100px; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; transition: all 0.5s ease; } .newsList li a .l h2 { font-size: 66px; line-height: 66px; font-weight: bold; margin-bottom: 3px; } .newsList li a .l h3 { font-weight: normal; font-size: 22px; line-height: 22px; } .newsList li a .r { position: relative; margin-left: 100px; padding: 30px 35px 30px 70px; } .newsList li a .l::before { content: ""; background: #bcbcbc; position: absolute; width: 46px; height: 1px; top: 50%; right: -56px; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } .newsList li a .l::after { content: ""; position: absolute; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #ea5413; right: -15px; top: 50%; margin-top: -15px; z-index: 3; transition: all 0.5s ease; opacity: 0; } .newsList li a:hover .l::after { opacity: 1; } .newsList li a:hover .l::before { background: #ea5413; } .newsList li a:hover .l { background: #ea5413; } .newsList li a:hover .l h2 { color: #fff; } .newsList li a:hover .l h3 { color: #fff; } .newsList li a .r .img { float: right; width: 23%; height: 190px; overflow: hidden; } .newsList li a .r .img > div { width: 100%; height: 100%; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; transition: all 0.5s ease; } .newsList li a .r .intro { float: left; width: 73%; } .newsList li a .r h2 { font-weight: normal; font-size: 22px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .newsList li a .r .iconBox { margin: 20px 0; color: #c9c9c9; display: flex; align-items: center; } .newsList li a .r .iconBox span { display: flex; align-items: center; margin-right: 12px; } .newsList li a .r .iconBox i { display: inline-block; width: 18px; height: 18px; margin-right: 6px; } .newsList li a .r .iconBox i.eye { background: url(../images/eye.png); background-size: 100%; background-position: center 2px; } .newsList li a .r .iconBox i.date { background: url(../images/date.png); background-size: 15px; background-repeat: no-repeat; background-position: center 4px; } .newsList li a .r .iconBox .dateBox { display: none; } .newsList li a .r .desc { font-size: 15px; line-height: 28px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .newsList li a:hover .r h2 { color: #ea5413; } .newsList li a:hover { background: #fff; } .newsList li a:hover .r .img > div { transform: scale(1.1); } .newsInner { padding: 100px 0; } .newsInner .wrap { height: auto; overflow: hidden; } .newsInner .wrap .r { float: right; width: 300px; background-color: #fff; } .newsInner .wrap .l { float: left; width: calc(100% - 380px); } .newsInner .recomdHead { background-color: #ea5413; height: 55px; color: #fff; font-size: 20px; padding-left: 40px; line-height: 55px; } .newsInner .wrap .r ul { padding-top: 20px; padding-bottom: 20px; display: block; border: 1px solid #ededed; } .newsInner .wrap .r ul li { padding: 5px 18px; } .newsInner .wrap .r ul li p { font-size: 14px; } .newsInner .wrap .r ul li h2 { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; font-size: 16px; font-weight: normal; } .newsInner .wrap .r ul li:hover h2 { color: #ea5413; } .newsInner .wrap .l .top h2 { font-weight: normal; font-size: 22px; } .newsInner .wrap .l .top span { display: flex; align-items: center; } .newsInner .wrap .l .spanBox { padding: 20px 0 60px 0; color: #999; border-bottom: 1px solid #eee; } .newsInner .wrap .l .spanBox span { margin-right: 20px; } .newsInner .wrap .l .spanBox i.date { background: url(../images/date.png); background-size: 15px; background-repeat: no-repeat; background-position: center 4px; } .newsInner .wrap .l .spanBox i { display: inline-block; width: 18px; height: 18px; margin-right: 6px; } .newsInner .wrap .l .spanBox i.eye { background: url(../images/eye.png); background-size: 100%; background-position: center 4px; } .newsInner .wrap .l .contain { padding: 80px 0; font-size: 15px; line-height: 28px; border-bottom: 1px solid #eee; } .newsInner .wrap .l .contain img{ max-width: 100%; } .newsInner .wrap .l .pageBtns { padding: 30px 0; position: relative; height: auto; overflow: hidden; } .newsInner .wrap .l .pageBtns .prev .span { display: flex; align-items: center; } .newsInner .wrap .l .pageBtns .next .span { display: flex; align-items: center; justify-content: flex-end; } .newsInner .wrap .l .pageBtns .prev { float: left; width: 30%; } .newsInner .wrap .l .pageBtns .next { float: right; width: 30%; } .newsInner .wrap .l .pageBtns .prev .span i { margin-top: 2px; display: inline-block; width: 20px; height: 20px; background: url(../images/arr3.png); background-size: 20px; background-position: center center; } .newsInner .wrap .l .pageBtns .title { padding-top: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; transition: 0.5s ease; } .newsInner .wrap .l .pageBtns .prev:hover .title { color: #ea5413; } .newsInner .wrap .l .pageBtns .next:hover .title { color: #ea5413; } .newsInner .wrap .l .pageBtns .next .span i { display: inline-block; width: 20px; height: 20px; background: url(../images/arr3_r.png); background-size: 20px; background-position: center center; } .newsInner .wrap .l .pageBtns .next .title { text-align: right; } .newsInner .wrap .l .pageBtns .back { position: absolute; top: 50%; left: 50%; margin-left: -70px; margin-top: -17px; display: block; width: 140px; height: 35px; color: #fff; text-align: center; line-height: 35px; background-color: #ea5413; } .newsInner .wrap .r.fixed { position: fixed; } .contactS1 { padding: 100px 0; background: url(../images/bg_line.jpg); } .contactS1 .wrap { height: auto; overflow: hidden; } .contactS1 .l { float: left; width: 46%; } .contactS1 .l .top { height: auto; overflow: hidden; padding: 20px 0 50px 0; border-bottom: 1px solid #ddd; } .contactS1 .l .top .ntitle { float: left; } .contactS1 .l .top .viewMap { border: 1px solid #ea5413; width: 170px; height: 48px; line-height: 48px; border-radius: 48px; padding-left: 40px; display: block; color: #ea5413; transition: all 0.5s ease; position: relative; float: right; cursor: pointer; font-size: 15px; margin-top: 45px; } .contactS1 .l .top .viewMap span { display: inline-block; width: 30px; height: 30px; background: url(../images/carr1.png); background-size: 20px; background-repeat: no-repeat; background-position: center center; position: absolute; top: 50%; transform: translateY(-50%); right: 30px; transition: all 0.5s ease; } .contactS1 .l .top .viewMap:hover span { background: url(../images/carr2.png); background-size: 20px; background-repeat: no-repeat; background-position: center center; right: 20px; } .contactS1 .l .top .viewMap:hover { background: #ea5413; color: #fff; } .contactS1 .l .list { height: auto; overflow: hidden; } .contactS1 .l .list .item { float: left; width: 50%; padding: 30px 15px; } .contactS1 .l .list .item h2 { position: relative; font-size: 22px; font-style: italic; padding-left: 42px; font-weight: normal; margin-bottom: 15px; } .contactS1 .l .list .item h2::before { display: block; content: ""; width: 35px; height: 35px; position: absolute; left: 0; top: -4px; } .contactS1 .l .list .item1 h2::before { background: url(../images/cont_icon1.png); background-size: 30px; background-position: center center; background-repeat: no-repeat; } .contactS1 .l .list .item2 h2::before { background: url(../images/cont_icon2.png); background-size: 30px; background-position: center center; background-repeat: no-repeat; } .contactS1 .l .list .item3 h2::before { background: url(../images/cont_icon3.png); background-size: 26px; background-position: center center; background-repeat: no-repeat; } .contactS1 .l .list .item4 h2::before { background: url(../images/cont_icon4.png); background-size: 26px; background-position: center center; background-repeat: no-repeat; } .contactS1 .l .list .item p { font-size: 16px; line-height: 27px; } /* 鍦板浘 */ .mapPop { position: fixed; z-index: 50; background: rgba(0, 0, 0, 0.75); left: 0; top: -100vh; right: 0; height: 100vh; transition: all 0.5s ease; } .mapBox { position: absolute; width: 85%; height: 88%; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #ccc; } .mapPop.show { top: 0; } .mapPop .close { position: absolute; right: 0; top: 0; width: 50px; height: 50px; cursor: pointer; background-color: #ea5413; background-image: url(../images/close1.png); background-repeat: no-repeat; background-size: 37px; background-position: center center; } .contactS1 .r { padding-top: 80px; float: right; width: 48%; } .contactS1 .r .input { float: left; width: 48%; border: 1px solid #ccc; height: 40px; border-radius: 5px; margin-left: 4%; margin-bottom: 28px; } .contactS1 .r .input input { width: calc(100% - 30px); height: 38px; outline: none; border: none; margin-left: 15px; background: transparent; } .contactS1 .r .input:nth-child(2n + 1) { margin-left: 0; } .clear { clear: both; } .contactS1 .r .textarea { padding: 15px; width: 100%; border: 1px solid #ccc; height: 140px; border-radius: 5px; margin-bottom: 28px; } .contactS1 .r textarea { width: 100%; height: 100%; outline: none; border: none; background: transparent; } .contactS1 .btnBox { text-align: center; } .contactS1 .btnBox button { display: inline-block; width: 130px; height: 38px; text-align: center; line-height: 38px; margin: 0 15px; cursor: pointer; border: none; outline: none; } .contactS1 .btnBox button.submit { background-color: #ea5413; color: #fff; } .talentS1 { padding: 150px 0 80px 0; } .title1 { text-align: center; } .title1 h2 { font-size: 35px; letter-spacing: 1px; font-weight: normal; margin-bottom: 20px; } .title1 p { font-size: 16px; display: inline-block; max-width: 799px; line-height: 25px; } .talentS1 li { height: auto; overflow: hidden; } .talentS1 .container { margin-top: 60px; } .talentS1 li.li1 .item { padding: 40px 40px; float: left; width: 50%; height: 240px; background-size: cover; background-repeat: no-repeat; background-position: center center; } .talentS1 li.li1 .item span { color: #fff; font-size: 24px; font-style: italic; } .talentS1 li.li2 .item { padding: 40px 40px; float: left; width: 33.33%; height: 240px; background-size: cover; background-repeat: no-repeat; background-position: center center; } .talentS1 li.li2 .item span { color: #fff; font-size: 24px; font-style: italic; } .talentBox { margin-top: 70px; height: auto; overflow: hidden; } .talentBox .l { float: left; width: 50%; } .talentBox .l .item1 { background-color: #eee; padding: 64px 30px; height: 320px; } .talentS2 { padding-bottom: 80px; } .talentBox .l h2 { padding-left: 25px; font-weight: normal; font-size: 26px; position: relative; padding-bottom: 20px; } .talentBox .l h2::before { display: block; content: ""; background-color: #ea5413; width: 3px; height: 36px; position: absolute; left: 0; top: 0; } .talentBox .l p { font-size: 15px; line-height: 25px; } .talentBox .l .item3 { float: left; width: 50%; height: 260px; overflow: hidden; } .talentBox .l .item3 > div { transition: 0.5s ease; width: 100%; height: 100%; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; } .talentBox .l .item3:hover > div { transform: scale(1.1); } .talentBox .l .item4 { padding: 40px 30px; float: left; width: 50%; height: 260px; overflow: hidden; background: #ea5413; } .talentBox .l .item4 h2 { color: #fff; } .talentBox .l .item4 h2::before { background: #fff; } .talentBox .l .item4 p { color: #fff; } .talentBox .r { position: relative; float: right; width: 50%; height: 580px; overflow: hidden; } .talentBox .r .bg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; background-size: cover !important; background-repeat: no-repeat !important; background-position: center left !important; transition: 0.5s ease; } .talentBox .r .txt { position: relative; z-index: 2; padding: 64px 30px; } .talentBox .r:hover .bg { transform: scale(1.1); } .talentBox .r h2 { color: #fff; padding-left: 25px; font-weight: normal; font-size: 26px; position: relative; padding-bottom: 20px; } .talentBox .r h2::before { display: block; content: ""; background-color: #ea5413; width: 3px; height: 36px; position: absolute; left: 0; top: 0; } .talentBox .r p { color: #fff; font-size: 15px; line-height: 25px; } .joinUs { padding: 70px 0; background: url(../images/joinus.jpg); background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; } .joinUs h2 { font-weight: normal; font-size: 26px; margin-bottom: 40px; } .joinUs p { font-size: 15px; line-height: 25px; display: block; max-width: 40%; margin-bottom: 55px; } .joinUs a { background: #e8e8e8; width: 157px; height: 50px; line-height: 50px; padding-left: 40px; display: block; color: #333; transition: all 0.5s ease; position: relative; margin-right: 15px; display: inline-block; } .joinUs a span { display: inline-block; width: 30px; height: 30px; background: url(../images/arrow_right_1.png); background-size: 25px; background-repeat: no-repeat; background-position: center center; position: absolute; top: 50%; transform: translateY(-50%); right: 30px; transition: all 0.5s ease; } .joinUs a:hover { background-color: #ea5413; color: #fff; } .joinUs a:hover span { background: url(../images/arrow_right_1_on.png); display: inline-block; width: 30px; height: 30px; background-size: 25px; background-repeat: no-repeat; background-position: center center; position: absolute; top: 50%; transform: translateY(-50%); right: 25px; } .jobSec { padding: 120px 0 100px 0; } .jobSec .jobTit { font-size: 35px; letter-spacing: 1px; margin-bottom: 50px; text-align: center; } .jobSec .tc { display: flex; justify-content: center; margin-bottom: 60px; } .jobSec .tc .item { display: flex; align-items: center; font-size: 15px; margin: 0 30px; } .jobSec .tc .item i { margin-right: 8px; display: inline-block; width: 25px; height: 25px; background-repeat: no-repeat !important; background-position: center center !important; } .jobSec .tc .item i.icon1 { background-size: 20px !important; background: url(../images/tcicon1.png); } .jobSec .tc .item i.icon2 { background-size: 25px !important; background: url(../images/tcicon2.png); } .jobSec .tc .item i.icon3 { background-size: 25px !important; background: url(../images/tcicon3.png); } .jobBox .jobT { padding: 0 0 0 50px; border-radius: 8px; height: 80px; background: #ea5413; } .jobBox .jobT .item { float: left; line-height: 80px; color: #fff; text-align: left; font-size: 22px; } .jobBox .jobT .item.item1 { width: 45%; } .jobBox .jobT .item.item2 { width: 20%; } .jobBox .jobT .item.item3 { width: 20%; } .jobBox .jobT .item.item4 { text-align: right; width: 145px; float: right; padding-right: 50px; box-sizing: border-box; } .jobList li { border-bottom: 1px solid #ededed; } .jobList li .normal { padding: 0 0 0 50px; border-radius: 8px; height: 80px; cursor: pointer; } .jobList li .normal.active { background: #ea5413; color: #fff; } .jobList li .normal .item { float: left; line-height: 80px; text-align: left; font-size: 20px; transition: 0.5s ease; } .jobList li .normal .item.item1 { width: 45%; } .jobList li .normal .item.item2 { width: 20%; } .jobList li .normal .item.item3 { width: 20%; } .jobList li .normal .item.item4 { position: relative; text-align: right; width: 145px; float: right; padding-right: 50px; box-sizing: border-box; } .jobList li.active .normal { background: #facd00; } .jobList li.active .normal .item { color: #fff; } .jobList li .normal .span2 { display: none; } .jobList li.active .normal .span1 { display: none; } .jobList li.active .normal .span2 { display: block; } .jobList li.active .normal .item2 { display: none; } .jobList li.active .normal .item3 { display: none; } .jobList li .normal .arr { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: inline-block; width: 30px; height: 30px; background: url(../images/jobarr.png); background-size: cover; background-repeat: no-repeat; background-position: center center; } .jobList li.active .normal .arr { top: 33%; background: url(../images/jobarr1.png); background-size: cover; background-repeat: no-repeat; background-position: center center; transform: rotate(90deg); } .jobList li .jobCon { display: none; padding: 40px 45px; height: auto; overflow: hidden; } .jobList li .jobCon .l { float: left; width: 35%; border-right: 1px solid #eee; } .jobList li .jobCon .l .dl { margin-bottom: 30px; font-size: 15px; } .jobList li .jobCon .r { margin-left: 42%; } .jobList li .jobCon .r h2 { margin-bottom: 30px; } .jobList li .jobCon .r p { font-size: 16px; margin-bottom: 15px; } .jobList li .jobCon .r a { margin-top: 50px; display: block; width: 120px; height: 38px; line-height: 38px; text-align: center; background: #ea5413; border-radius: 5px; color: #fff; font-size: 15px; } /* 瀹㈡埛鏈嶅姟 */ .serS1 { padding: 100px 0 40px 0; background: url(../images/bg_line.jpg); } .serS1 ul { margin-top: 60px; height: auto; overflow: hidden; } .serS1 ul li { text-align: center; padding: 30px 5%; position: relative; float: left; width: 33.33%; } .serS1 ul li::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; content: ""; width: 1px; height: 100px; background-color: #ededed; } .serS1 ul li .top { display: flex; align-items: center; justify-content: center; } .serS1 ul li .img { display: inline-block; } .serS1 ul li .txt { display: inline-block; margin-left: 10px; font-size: 58px; color: #ea5413; } .serS1 ul li .p { margin-top: 8px; font-size: 16px; } .serS2 { background: url(../images/serbg2.jpg); padding-top: 80px; padding-bottom: 80px; background-size: cover; background-repeat: no-repeat; background-position: center -60px; } .serS2 ul { margin-top: 80px; height: auto; overflow: hidden; } .serS2 li { float: left; margin-left: 4%; width: 22%; } .serS2 li:first-child { margin-left: 0; } .serS2 li > div { height: 220px; position: relative; overflow: hidden; } .serS2 li .bg { position: relative; z-index: 1; height: 100%; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; transition: 0.5s ease; } .serS2 li > div:hover .bg { transform: scale(1.1); } .serS2 li .icon { position: absolute; z-index: 2; right: 20px; top: 20px; } .serS2 li .icon img { width: 40px; } .serS2 li .txt { position: absolute; bottom: 25px; left: 20px; z-index: 2; font-size: 18px; color: #fff; } .serS3 .wrap { height: auto; overflow: hidden; } .serS3 .wrap .l { float: left; width: 42%; } .serS3 .wrap .l img { width: 100%; } .serS3 .wrap .r { padding-top: 120px; padding-bottom: 200px; width: 48%; } .serS3 ul { height: auto; overflow: hidden; } .serS3 .wrap .r h2 { font-size: 35px; letter-spacing: 1px; font-weight: normal; margin-bottom: 35px; } .serS3 .wrap .r a { background: #e8e8e8; width: 157px; height: 50px; line-height: 50px; padding-left: 40px; display: block; color: #333; transition: all 0.5s ease; position: relative; margin-right: 15px; display: inline-block; margin-top: 50px; } .serS3 .wrap .r a span { display: inline-block; width: 30px; height: 30px; background: url(../images/arrow_right_1.png); background-size: 25px; background-repeat: no-repeat; background-position: center center; position: absolute; top: 50%; transform: translateY(-50%); right: 30px; transition: all 0.5s ease; } .serS3 .wrap .r a:hover { background-color: #ea5413; color: #fff; } .serS3 .wrap .r a:hover span { background: url(../images/arrow_right_1_on.png); display: inline-block; width: 30px; height: 30px; background-size: 25px; background-repeat: no-repeat; background-position: center center; position: absolute; top: 50%; transform: translateY(-50%); right: 25px; } .serS3 .wrap .r p { font-size: 16px; line-height: 30px; } .serS3 .wrap .r h3 { margin-top: 40px; color: #ea5413; } .serS3 .wrap .r h3 span { margin-right: 8px; } .serS4 { padding: 20px 0 80px 0; background: url(../images/bg_line.jpg); } .serS4 ul { height: auto; overflow: hidden; } .serS4 ul li { cursor: pointer; float: left; margin-left: 8%; width: calc(84% / 3); position: relative; } .serS4 ul li:first-child { margin-left: 0; } .serS4 ul li .bg { position: relative; height: 500px; width: 100%; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; } .serS4 ul li .txt { position: absolute; left: 30px; bottom: 45px; transition: 0.5s ease; } .serS4 ul li .txt h2 { color: #fff; font-weight: normal; margin-bottom: 8px; } .serS4 ul li .txt .line { width: 32px; height: 2px; background: #ea5413; } .serS4 ul li .active { transition: all 0.5s ease; position: absolute; left: 30px; right: 30px; top: 30px; bottom: 30px; background: #fff; z-index: 2; padding: 40px 25px; transform: scale(0); } .serS4 ul li:hover .active { transform: scale(1); } .serS4 ul li:hover .txt { display: none; } .serS4 ul li .active h2 { color: #333; font-weight: normal; margin-bottom: 8px; } .serS4 ul li .active .line { width: 32px; height: 2px; background: #ea5413; margin-bottom: 40px; } .serS4 ul li .active p { font-size: 15px; line-height: 28px; } .yfS1 { padding: 100px 0 20px 0; } .yfS1 .wrap { height: auto; overflow: hidden; } .serS3 { background: url(../images/s1.jpg); } .yfS1 .wrap .l { float: left; width: 36%; } .yfS1 .wrap .l img { width: 100%; } .yfS1 .wrap .r { padding-top: 80px; width: 52%; float: right; } .yfS1 .wrap .r h3 { position: relative; font-size: 17px; font-weight: normal; display: inline-block; } .yfS1 .wrap .r h3::before { position: absolute; display: inline-block; content: ""; width: 50px; height: 2px; background-color: #000; right: -60px; top: 50%; transform: translateY(-50%); } .yfS1 .wrap .r h2 { font-size: 35px; letter-spacing: 1px; font-weight: normal; margin-bottom: 30px; margin-top: 10px; } .yfS1 .wrap .r h4 { font-weight: normal; font-size: 20px; color: #ea5413; margin-bottom: 40px; } .yfS1 .wrap .r ul { height: auto; overflow: hidden; } .yfS1 .wrap .r ul li { float: left; width: 33.33%; padding-right: 2%; min-height: 93px; } .yfS1 .wrap .r ul li .t { font-size: 16px; font-weight: bold; color: #ea5413; margin-bottom: 5px; } .yfS1 .wrap .r ul li p { font-size: 14px; line-height: 22px; } .yfS2 { background: url(../images/qubg2.jpg); background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; padding: 100px 0 100px 0; background-attachment: fixed; } .yfS2 .wrap { padding: 80px 60px; background-color: rgba(255, 255, 255, 0.88); } .quiet .p { font-size: 16px; line-height: 25px; } .yfS2 .quiet { height: auto; overflow: hidden; } .yfS2 .quiet .l { float: left; width: 46%; } .yfS2 .quiet { padding-top: 50px; } .quiet .small { margin-top: 43px; height: auto; overflow: hidden; } .quiet .small .item { position: relative; float: left; margin-left: 3%; width: calc(94% / 3); height: 160px; overflow: hidden; } .quiet .small .item:first-child { margin-left: 0; } .quiet .small .item > div.bg { position: relative; z-index: 1; /* filter: grayscale(100%); */ height: 100%; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; transition: 0.5s ease; } .quiet .small .item:hover > div.bg { transform: scale(1.1); filter: grayscale(0%); } .quiet .small .txt { position: absolute; left: 0; bottom: 0; right: 0; z-index: 2; color: #fff; padding: 20px 15px 10px 12px; background: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.7)); } .yfS2 .quiet .r { overflow: hidden; float: right; width: 50%; height: 352px; position: relative; } .yfS2 .quiet .r .bg { z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover !important; background-repeat: no-repeat !important; background-position: bottom center !important; transition: 0.5s ease; } .yfS2 .quiet .r:hover .bg { transform: scale(1.1); } .yfS2 .quiet .r .txt { position: absolute; left: 0; bottom: 0; right: 0; z-index: 2; padding: 20px 30px 25px 40px; font-size: 16px; color: #fff; background: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.7)); } .quiet2 { height: auto; overflow: hidden; margin-top: 50px; } .quiet2 .r { float: right; width: 50%; } .quiet2 .l { float: left; width: 46%; } .quiet2 .r .p { font-size: 16px; line-height: 25px; } .quiet2 .r .itemBox { height: auto; overflow: hidden; margin-top: 40px; } .quiet2 .r .itemBox .item { float: left; width: 65%; height: 330px; position: relative; margin-left: 3%; width: calc(94% / 3); overflow: hidden; } .quiet2 .r .itemBox .item:first-child { margin-left: 0; } .quiet2 .r .itemBox .item .bg { position: relative; z-index: 1; width: 100%; height: 100%; background-size: cover !important; background-repeat: no-repeat !important; background-position: bottom center !important; transition: 0.5s ease; /* filter: grayscale(100%); */ } .quiet2 .r .itemBox .item .txt { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 20px 30px 15px 20px; font-size: 16px; color: #fff; background: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.7)); } .quiet2 .r .itemBox .item:hover .bg { transform: scale(1.1); filter: grayscale(0%); } .quiet2 .l .itemBox { height: auto; overflow: hidden; } .quiet2 .l .itemBox .item1 { float: left; width: 100%; } .quiet2 .l .itemBox .item { overflow: hidden; position: relative; } .quiet2 .l .itemBox .item .bg { position: relative; z-index: 1; width: 100%; height: 100%; background-size: cover !important; background-repeat: no-repeat !important; background-position: bottom center !important; transition: 0.5s ease; /* filter: grayscale(100%); */ } .quiet2 .l .itemBox .item .txt { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 20px 30px 15px 20px; font-size: 16px; color: #fff; background: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.7)); } .quiet2 .l .itemBox .item.item1_1 { width: 100%; height: 360px; } .quiet2 .l .itemBox .item:hover .bg { transform: scale(1.1); filter: grayscale(0%); } .quiet2 .l .itemBox .item2 .item { height: 100%; } .quiet2 .l .itemBox .item2 { float: right; width: 34%; height: 270px; } .quiet2 .l .itemBox .item3 { float: left; width: 65%; height: 310px; position: relative; margin-left: 3%; width: calc(94% / 3); overflow: hidden; } .quiet2 .l .itemBox .item3:first-child { margin-left: 0; } .quiet2 .l .itemBox.itemBox1 { margin-top: 30px; } .quiet2 .r .itemBox1 .item { width: 48.5%; height: 210px; } .quiet2 .r .itemBox1 { margin-top: 20px; } .yfS3 { padding: 80px 0; background: #fff !important; } .yfS3 .wrap { background-color: rgba(255, 255, 255, 0.88); padding-left: 60px; padding-right: 60px; } .yfS3 ul { padding: 80px 0 0 0; height: auto; overflow: hidden; } .yfS3 ul li { position: relative; float: left; width: 25%; text-align: center; } .yfS3 ul li h2 { font-family: "impact"; font-size: 55px; color: #ea5413; } .yfS3 ul li h2 span { font-family: "impact"; } .yfS3 ul li h2 .sup { font-size: 20px; font-weight: normal; } .yfS3 ul li h2 .plus { font-size: 40px; font-weight: normal; margin-top: -10px; } .yfS3 ul li p { font-size: 16px; margin-top: 5px; } .yfS3 ul li::after { display: block; content: ""; width: 1px; height: 60px; background-color: #ddd; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .yfS3 ul li:last-child:after { display: none; } .yfList { height: auto; overflow: hidden; margin-top: 55px; background: #f5f5f5; padding: 45px 35px 35px 40px; } .yfList .box1{ height: auto; overflow: hidden; } .yfList .box1 .l{ float: left; width: 40%; } .yfList .box1 .r{ float: right; width: 57%; height: 1080px; overflow-y: auto; } .yfList .box1 .r::-webkit-scrollbar { width: 5px; height: 5px; background-color: #ea5413; } .yfList .box1 .r::-webkit-scrollbar-track { border-radius: 2; background: #ccc; } .yfList .box1 .r::-webkit-scrollbar-thumb { border-radius: 2; background-color: #ea5413; } .yfList .box1 .r .img{ float: left; position: relative; z-index: 1; width: 100%; height: 250px; background-color: #fff; display: flex; justify-content: center; align-items: center; margin-left: 5%; width: calc(90% / 3); margin-bottom: 20px; } .yfList .box1 .r .img:nth-child(3N + 1){ margin-left: 0; } .yfList .box1 .r .img img{ max-width: 85%; height: 85%; } .yfList .item { position: relative; font-size: 17px; float:left; width: 100%; line-height: 25px; padding-left: 20px; margin-bottom: 15px; } .yfList .item::before { position: absolute; left: 0; top: 7px; display: block; content: ""; width: 0; height: 0; border-top: 5px solid transparent; border-left: 10px solid #333; border-bottom: 5px solid transparent; } .proContainer ul { height: auto; overflow: hidden; } .proContainer ul li { float: left; margin-left: 5%; width: 30%; margin-bottom: 50px; } .proContainer ul li:nth-child(3N+1){ margin-left: 0; } .proContainer ul.proList { padding-top: 100px; height: auto; overflow: hidden; margin-left: 430px; } .proContainer ul li .img { background-color: #f5f5f5; height: 300px; position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .proContainer ul li .img img { max-width: 85%; transition: all 0.5s ease; } .proContainer ul li a { display: block; } .proContainer ul li a:hover .img img { transform: scale(1.1); } .proContainer ul li a:hover .txt{ color: #ea5413; } .proContainer ul li .txt { font-weight: bold; font-size: 18px; padding: 30px 0; height: 100px; position: relative; border-bottom: 1px solid #ddd; } .proContainer ul li .txt::after { display: block; content: ""; height: 1px; background: #ea5413; width: 0; position: absolute; bottom: -1px; left: 0; transition: all 0.5s ease; } .proContainer ul li a:hover .txt::after { width: 100%; } .proBody .wrap { height: auto; overflow: hidden; } .leftNav { /* box-shadow: 10px 0px 70px 0px rgba(0, 0, 0, 0.08); */ min-height: 500px; float: left; width: 350px; background: #f7f7f7; position: relative; z-index: 3; } .navt { display: flex; align-items: center; width: 350px; position: absolute; left: 0; bottom: 0; background: #ea5413; height: 70px; padding-left: 40px; } .navt img { width: 40px; } .navt span { color: #fff; font-size: 22px; margin-left: 20px; } .leftNav a { font-size: 16px; padding-left: 40px; display: block; height: 60px; line-height: 60px; position: relative; transition: 0.5s ease; } .leftNav a:after { display: block; content: ""; height: 1px; border-bottom: 1px solid #ededed; position: absolute; left: 20px; right: 20px; bottom: 0; } .leftNav a:hover { padding-left: 50px; color: #ea5413; } .leftNav a::before { display: block; content: ""; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); width: 0; height: 2px; background: #ea5413; transition: 0.5s ease; } .leftNav a:hover::before { width: 20px; } .leftNav a.active::before { width: 20px; } .leftNav a.active { padding-left: 50px; color: #ea5413; } .proContainer ul li:first-child { margin-left: 0; } .proBox { margin-left: 400px; padding: 80px 0; } .proCon1 { height: auto; overflow: hidden; } .proCon1 .l { float: left; width: 58%; } .proCon1 .r { float: right; width: 38%; } .proCon1 .imgCon { background-color: #f5f5f5; height: 600px; position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .proCon1 .thumb { margin-top: 20px; width: 100%; height: 90px; } .proCon1 .imgCon img { max-width: 95%; max-height: 100%; } .proCon1 .thumb .item { width: 90px; height: 90px; border: 1px solid #ddd; cursor: pointer; display: flex; justify-content: center; align-items: center; overflow: hidden; margin-right: 10px; float: left; margin-bottom: 10px; } .proCon1 .thumb .item.active { border: 1px solid #ea5413; } .proCon1 .thumb .item img { max-width: 85%; } .proCon1 .r .prot { font-size: 25px; line-height: 32px; padding-bottom: 5px; padding: 20px 0 23px 0; border-bottom: 1px solid #ddd; } .proCon1 .r .desc { padding: 32px 0 45px 0; font-size: 15px; line-height: 25px; } .proCon1 .r a { font-size: 15px; background: #ea5413; width: 157px; height: 50px; line-height: 50px; padding-left: 40px; display: block; color: #fff; transition: all 0.5s ease; position: relative; margin-right: 15px; display: inline-block; } .proCon1 .r a span { display: inline-block; width: 30px; height: 30px; background: url(../images/arrow_right_1_on.png); background-size: 25px; background-repeat: no-repeat; background-position: center center; position: absolute; top: 50%; transform: translateY(-50%); right: 25px; } .proCon2 { margin-top: 90px; } .proCon2 .title { margin-top: 25px; position: relative; border-bottom: 1px solid #ddd; } .proCon2 .title span { display: inline-block; padding: 13px 0; text-align: center; background-color: #ea5413; color: #ffff; font-size: 18px; width: 186px; } .proCon2 .proBoody { padding: 60px 0 50px 0; } .proCon2 .proBoody .proCon { padding: 35px 30px; background-color: #f5f5f5; font-size: 15px; line-height: 30px; } .proCon2 .proBoody .proCon img{ max-width: 85%; margin: 40px 0; } .proCon2 .proBoody .proCon table{ width: 100% !important; background-color: #f5f5f5 !important; } .proCon2 .proBoody .proCon table td{ padding: 5px; background-color: #f5f5f5 !important; } .recomBox { position: relative; margin-top: 80px; padding: 0 40px; } .recomSwiper { overflow: hidden; } .recomSwiper .swiper-slide a { display: block; } .recomSwiper .swiper-slide a .imgCon { background-color: #f5f5f5; height: 300px; position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .recomSwiper .swiper-slide a .imgCon img { max-width: 85%; height: 85%; position: relative; z-index: 1; transition: all 0.5s ease; } .recomSwiper .swiper-slide a .imgCon .cover { display: flex; justify-content: center; align-items: center; position: absolute; width: 100%; height: 100%; left: 0; top: 100%; z-index: 2; background: rgba(234, 84, 19, 0.6); transition: 0.5s ease; } .recomSwiper .swiper-slide a .imgCon .cover img { width: 40px; height: 40px; transition: 0.5s ease; } .recomSwiper .swiper-slide a:hover .cover { top: 0; } .recomSwiper .swiper-slide a:hover .imgCon > img { transform: scale(1.1); } .recomSwiper .swiper-slide .txt { background: #ea5413; color: #fff; padding: 22px 15px; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .recomprev { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: url(../images/n_arr_l_on.png); background-size: 40px; background-repeat: no-repeat; background-position: center center; cursor: pointer; border: none; outline: none; } .recomnext { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: url(../images/n_arr_r_on.png); background-size: 40px; background-repeat: no-repeat; background-position: center center; cursor: pointer; border: none; outline: none; } .pageNation { text-align: center; margin-top: 80px; border-top: 1px solid #ccc; border-bottom: 3px solid #ea5413; height: 60px; } .pageNation .acon { font-size: 0; } .pageNation .acon a { display: inline-block; width: 57px; height: 57px; line-height: 57px; text-align: center; border-left: 1px solid #ccc; font-size: 16px; } .ppage { display: inline-block; } .pageNation .acon { display: inline-block; } .pageNation .acon a.active { background-color: #ea5413; color: #fff; } .pageNation .acon a:last-child { border-right: 1px solid #ccc; } .ppage { padding: 0 15px; } .ppage.next { border: none; } .abSec4 .viewMore { font-size: 15px; background: #ea5413; width: 157px; height: 50px; line-height: 50px; padding-left: 40px; display: block; color: #fff; transition: all 0.5s ease; position: relative; margin-right: 15px; margin-left: auto; margin-right: auto; margin-top: 20px; } .abSec4 .viewMore span { display: inline-block; width: 30px; height: 30px; background: url(../images/arrow_right_1_on.png); background-size: 25px; background-repeat: no-repeat; background-position: center center; position: absolute; top: 50%; transform: translateY(-50%); right: 25px; } .proBox1{ padding-top: 100px; text-align: center; font-size: 22px; } .bgMask{ background: rgba(0, 0, 0, 0.08); position: absolute; right: 0; top: 0; left: 0; bottom: 0; z-index: 2; } .mobile_lang{ text-align: center; padding-top: 35px; } .mobile_lang a{ margin: 0 15px; font-size: 16px; }