@charset "UTF-8"; * { margin: 0; padding: 0; border: 0; box-sizing: border-box; } html, body { font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #333333; background-color: #ffffff; overflow-x: hidden; } ul, li { list-style-type: none; margin: 0; } input, textarea, select { resize: none; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 0; } a { text-decoration: none; color: #000; cursor: pointer; } a:hover { text-decoration: none; } img { max-width: 100%; border-style: none; vertical-align: middle; } .zoom-img { overflow: hidden; } .zoom-img .img { overflow: hidden; } .zoom-img img { -webkit-transition: all 0.5s; transition: all 0.5s; } .zoom-img:hover img { transform: scale(1.04); -ms-transform: scale(1.04); -webkit-transform: scale(1.04); -o-transform: scale(1.04); -moz-transform: scale(1.04); } .clear:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; } .clear { zoom: 1; } .nav-page { font-size: 0; text-align: center; } .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; box-shadow: none; } .btn-link:focus, .btn-link:hover { text-decoration: none; } /* header&home&footer */ .header { position: fixed; top: 0; left: 0; width: 100%; height: 104px; background-color: #fff; transition: all 0.5s ease-in; z-index: 11; display: flex; align-items: center; } .header .w1670 { width: 86.97%; margin: 0 auto; } .header .wrap { display: flex; justify-content: space-between; align-items: center; } .header .rHeadBox { display: flex; align-items: center; height: 104px; transition: all 0.5s ease-in; } .header .nav { position: relative; display: flex; align-items: center; } .header .nav.mNav { display: none; } .header .nav::after { position: absolute; content: ""; right: 0; top: 50%; width: 1px; height: 14px; background-color: #9e9e9e; margin-top: -7px; } .header .item { position: relative; margin: 0 20px; } .header .item>a { font-size: 18px; color: #666666; line-height: 104px; padding: 0 20px; } .header .item.active>a { color: #405aa8; font-weight: bold; } .header .dropDown { position: absolute; display: none; z-index: 10; } .header .item .dropDown { display: none; min-width: 100%; top: 100%; left: 50%; transform: translate(-50%, 0); background-color: rgba(0, 0, 0, 0.5); // transition: all 0.5s ease-in; } .header .item .dropDown>a { display: block; font-size: 16px; color: #fff; line-height: 40px; text-align: center; padding: 0 10px; white-space: nowrap; } .header .item .dropDown>a:last-child { margin-right: 0; } .header .item .dropDown>a:hover { text-decoration: underline; } .header .rBox { display: flex; align-items: center; margin-left: 12px; } .header .item2 { position: relative; margin: 0 14px; } .header .item2 .icon { line-height: 104px; } .header .icon { cursor: pointer; } .header .language .icon { display: flex; align-items: center; } .header .language .icon img { margin-right: 8px; } .header.headBack { height: 80px; background-color: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1); } .header.headBack .rHeadBox { height: 80px; } .header.headBack .item>a { line-height: 80px; } .header .btnMenu { width: 40px; height: 30px; display: none; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; display: none; } .header .btnMenu>span { width: 40px; height: 2px; background-color: #000; margin: 4px 0; transition: all 0.3s; -webkit-transform: skew(40deg); -moz-transform: skew(40deg); -o-transform: skew(40deg); -ms-transform: skew(40deg); transform: skew(40deg); } .header .btnMenu.on>span { width: 20px; } .header .btnMenu.on>span:first-child { transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); } .header .btnMenu.on>span:nth-child(2) { display: none; } .header .btnMenu.on>span:last-child { transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); margin-top: -6px; } .header .search .dropDown { top: 120%; right: 0; } .header .search .form { background-color: #fff; padding: 5px 15px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1); border-radius: 5px; } .header .inputBox { display: flex; align-items: center; } .header .inputText { width: 250px; height: 40px; } .header .btnSubmit { background: none; cursor: pointer; } .header .language .dropDown { top: 100%; left: 50%; transform: translate(-50%, 0); background-color: #fff; border-radius: 0 0 5px 5px; box-shadow: 0 3px 12px -5px rgba(0, 0, 0, 0.1); min-width: 100px; text-align: center; } .header .language .dropDown a { display: block; font-size: 14px; color: #333; line-height: 36px; padding: 0 5px; transition: all 0.5s ease-in; } .header .language .dropDown a:hover { background-color: #eee; } .header.headBack .item2 .icon { line-height: 80px; } .footer { background-color: #001526; } .footer .nav { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 63px 0 43px; } .footer .nav.mNav { display: none; } .footer .item { max-width: 20%; } .footer .nav .h1 { font-size: 22px; color: #ffffff; line-height: 30px; margin-bottom: 24px; } .footer .nav a { display: block; font-size: 14px; color: #686868; line-height: 30px; transition: all 0.5s ease; } .footer .nav a:hover { color: #fff; } .footer .infoBox { padding: 34px 0 20px; border-top: 1px solid #06233a; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } .footer .infoBox .h1 { display: flex; align-items: flex-end; flex-wrap: wrap; line-height: 1; margin-bottom: 24px; } .footer .phone { font-size: 30px; color: #ffffff; font-weight: bold; margin-right: 15px; } .footer .time { font-size: 16px; color: #777777; } .footer .address { font-size: 16px; color: #777777; line-height: 30px; } .footer .d1 { font-size: 16px; color: #777777; line-height: 30px; text-align: center; margin-top: 5px; } .footer .botBox { padding: 24px 0 15px; background-color: #001221; display: flex; justify-content: space-between; flex-wrap: wrap; } .footer .webInfo { display: flex; flex-wrap: wrap; } .footer .copyright { font-size: 14px; color: #cbcbcb; line-height: 30px; margin-right: 30px; } .footer .copyright a { color: #cbcbcb; } .footer .support { font-size: 14px; color: #1d3345; line-height: 30px; } .footer .support a { color: #1d3345; } .footer .shareBox { display: flex; align-items: center; } .footer .shareBox a { position: relative; font-size: 0; margin-left: 20px; } .footer .shareBox a:first-child { margin-left: 0; } .footer .shareBox .icon-2 { display: none; } .footer .shareBox a:hover .icon-2 { display: flex; } .footer .shareBox a:hover .icon-1 { display: none; } .footer .shareBox .dropDown { width: 130px; height: 130px; position: absolute; top: -140px; left: -65px; padding: 5px; background-color: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); border-radius: 5px; display: none; } .footer .shareBox a:hover .dropDown { display: block; } .main { padding-top: 104px; } .homeMain { padding-top: 0; } .bannerSwiper .suspen { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 41.6666%; width: 100%; text-align: center; } .bannerSwiper .h1 { font-size: 40px; color: #ffffff; line-height: 1; margin-bottom: 20px; } .bannerSwiper .h2 { font-size: 18px; color: #ffffff; line-height: 40px; /* margin-bottom: 40px; */ } .bannerSwiper .btnMore { display: inline-block; width: 175px; height: 55px; font-size: 16px; color: #ffffff; line-height: 55px; text-align: center; background-color: #009d33; border-radius: 27px; padding-right: 30px; background-image: url(../images/icon3.png); background-repeat: no-repeat; background-position: 80% center; } .bannerSwiper .swiper-pagination { bottom: 9.3%; } .bannerSwiper .swiper-pagination-bullet { width: 8px; height: 8px; background: none; margin: 0 5px !important; border: 2px solid #fff; border-radius: 50%; opacity: 1; } .bannerSwiper .swiper-pagination-bullet-active { background-color: #fff; } .mImg { display: none; } .w15 { width: 78.12%; margin: 0 auto; } .homeBox-1 { padding: 85px 0 190px; background-position: center center; background-size: cover; } .homeBox-1 .title { text-align: center; margin-bottom: 30px; } .homeBox-1 .h1 { font-size: 50px; color: #2a6590; line-height: 60px; } .homeBox-1 .h2 { font-size: 24px; color: #000000; line-height: 60px; } .homeBox-1 .text { max-width: 1030px; width: 100%; margin: 0 auto; font-size: 16px; color: #888888; line-height: 32px; text-align: center; margin-bottom: 75px; } .homeBox-1 .listBox { display: flex; justify-content: space-between; flex-wrap: wrap; } .homeBox-1 .item { width: 25%; text-align: center; padding: 0 3%; } .homeBox-1 .img { margin-bottom: 20px; } .homeBox-1 .name { height: 48px; font-size: 18px; color: #000000; line-height: 24px; font-weight: bold; margin-bottom: 23px; transition: all 0.5s ease-in; } .homeBox-1 .item:hover .name { color: #2a6590; } .homeBox-1 .h3 { font-size: 16px; color: #888888; line-height: 24px; } .homeBox-2 { padding: 65px 0 108px; background-position: center center; background-size: cover; } .homeBox-2 .title { position: relative; margin-bottom: 60px; border-bottom: 1px solid #dbdbdb; } .homeBox-2 .title::after { position: absolute; bottom: 0; left: 0; content: ""; width: 95px; height: 3px; background-color: #2a6590; } .homeBox-2 .title .h1 { font-size: 40px; color: #2a6590; line-height: 60px; padding-bottom: 20px; } .homeBox-2 .suspen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); } .homeBox-2 .suspen .name { position: absolute; bottom: 15px; left: 0; width: 100%; font-size: 18px; color: #ffffff; line-height: 36px; text-align: center; padding: 0 10px; } .homeBox-2 .topBox { display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; } .homeBox-2 .lBox { width: 41.33%; margin-right: 4.01%; } .homeBox-2 .rBox { width: 54.66%; display: flex; flex-direction: column; justify-content: space-between; } .homeBox-2 .botBox { width: 100%; } .lTeamSwiper, .rTeamSwiper { width: 100%; } .homeBox-2 .listBox .item { display: none; } .homeBox-2 .listBox .item.active { display: block; } .homeBox-2 .listBox .h1 { display: flex; flex-wrap: wrap; font-size: 18px; color: #1a1b1b; line-height: 36px; padding-bottom: 10px; border-bottom: 1px solid #dbdbdb; margin-bottom: 30px; } .homeBox-2 .h1 .name { font-size: 24px; color: #2a6590; margin-right: 23px; } .homeBox-2 .h2 { max-width: 80%; font-size: 18px; line-height: 36px; color: #666666; text-align: justify; margin-bottom: 24px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .homeBox-2 .btnMore { display: inline-block; font-size: 16px; color: #405aa8; line-height: 36px; padding-right: 40px; background-image: url(../images/icon4.png); background-repeat: no-repeat; background-position: right center; } .homeBox-2 .controlBox { display: flex; justify-content: flex-end; align-items: center; margin-top: 90px; } .homeBox-2 .swiper-button-next, .homeBox-2 .swiper-button-prev, .homeBox-2 .swiper-pagination, .homeBox-2 .swiper-pagination-number { position: static; top: auto; left: auto; bottom: auto; right: auto; width: auto; } .homeBox-2 .swiper-button-next, .homeBox-2 .swiper-button-prev { width: 11px; height: 19px; margin-top: 0; } .homeBox-2 .swiper-button-prev { background-image: url(../images/icon5.png); } .homeBox-2 .swiper-button-next { background-image: url(../images/icon6.png); margin-left: 24px; } .homeBox-2 .swiper-button-next:after, .homeBox-2 .swiper-button-prev:after { display: none; } .homeBox-2 .btnLeftPrev, .homeBox-2 .btnLeftNext { display: none; } .homeBox-2 .swiper-pagination { width: 70%; height: 2px; background: #e1e1e1; margin: 0 1.65% 0 3.45%; } .homeBox-2 .swiper-pagination-progressbar-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .homeBox-2 .swiper-pagination-number { font-size: 24px; color: #c3bebe; line-height: 36px; font-weight: bold; } .homeBox-2 .swiper-pagination-current { color: #2a6590; } .homeBox-3 { padding: 145px 0 185px; background-position: center center; background-size: cover; } .homeBox-3 .box { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .homeBox-3 .img { width: 27.7333%; } .homeBox-3 .textBox { width: 57.3333%; margin-left: 8.5%; } .homeBox-3 .h1 { font-size: 50px; color: #ffffff; line-height: 60px; margin-bottom: 55px; } .homeBox-3 .h2 { font-size: 17px; color: #9f9f9f; line-height: 36px; margin-bottom: 95px; } .homeBox-3 .listBox { display: flex; justify-content: space-between; flex-wrap: wrap; } .homeBox-3 .item { position: relative; width: 46%; padding: 35px 30px 35px 20px; display: flex; align-items: center; } .homeBox-3 .item::after { position: absolute; top: 20%; right: -9%; content: ""; width: 1px; height: 60%; background-color: #154c73; } .homeBox-3 .item:nth-child(2n) { padding: 35px 0 35px 55px; } .homeBox-3 .item:nth-child(2n)::after { display: none; } .homeBox-3 .item:nth-child(n + 3) { border-top: 1px solid #174466; } .homeBox-3 .icon { padding: 9px; border: 1px dashed #626a6f; border-radius: 50%; } .homeBox-3 .h3 { width: calc(100% - 80px); padding-left: 15px; font-size: 18px; color: #ffffff; line-height: 24px; } .homeBox-4 .title { padding: 90px 0 120px; text-align: center; } .homeBox-4 .title .wrap { max-width: 1100px; width: 100%; margin: 0 auto; } .homeBox-4 .title .h1 { font-size: 40px; color: #2a6590; line-height: 60px; margin-bottom: 38px; } .homeBox-4 .title .h2 { font-size: 18px; color: #666666; line-height: 30px; } .homeBox-4 .listBox { display: flex; align-items: center; } .homeBox-4 .item { position: relative; width: 25%; overflow: hidden; } .homeBox-4 .suspen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .homeBox-4 .back { position: absolute; top: 40%; left: 0; width: 100%; height: 100%; padding: 0 85px; display: flex; flex-direction: column; background-position: center center; background-position: center center; background-size: cover; transition: all 0.5s ease-in; } .homeBox-4 .back>div { transition: all 0.5s ease-in; } .homeBox-4 .suspen .h1 { font-size: 30px; color: #ffffff; line-height: 1; margin-bottom: 17px; } .homeBox-4 .suspen .h2 { font-size: 18px; color: #dedede; line-height: 30px; margin-bottom: 28px; font-family: Arial, Helvetica, sans-serif; } .homeBox-4 .line { width: 58px; height: 5px; background-color: #fff; margin-bottom: 40px; opacity: 0; transition: all 0.5s ease-in; } .homeBox-4 .suspen .h3 { font-size: 16px; color: #ffffff; line-height: 30px; margin-bottom: 90px; opacity: 0; } .homeBox-4 .more { width: 105px; font-size: 16px; color: #ffffff; line-height: 36px; padding-right: 40px; background-image: url(../images/icon3.png); background-repeat: no-repeat; background-position: right center; opacity: 0; transition: all 0.5s ease-in; } .homeBox-4 .icon { position: absolute; top: 5%; right: 5%; opacity: 0; transition: all 0.5s ease-in; } .homeBox-4 .item:hover .back { top: 0; background-image: url(../images/img17.jpg); justify-content: center; } .homeBox-4 .item:hover .h1 { color: #83c6ff; } .homeBox-4 .item:hover .h1 { color: #bbbbbb; } .homeBox-4 .item:hover .line { opacity: 1; } .homeBox-4 .item:hover .h3 { opacity: 1; } .homeBox-4 .item:hover .more { opacity: 1; } .homeBox-4 .item:hover .icon { opacity: 1; } .homeBox-4 .swiper-pagination { opacity: 0; } .homeBox-5 { padding: 60px 0 115px; } .homeBox-5 .title { position: relative; margin-bottom: 70px; border-bottom: 1px solid #dbdbdb; } .homeBox-5 .title::after { position: absolute; bottom: 0; left: 0; content: ""; width: 95px; height: 3px; background-color: #2a6590; } .homeBox-5 .title .h1 { font-size: 40px; color: #2a6590; line-height: 60px; padding-bottom: 20px; } .homeBox-5 .item { display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; margin-bottom: 50px; } .homeBox-5 .item:last-child { margin-bottom: 0; } .homeBox-5 .img { width: 335px; background-color: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; } .homeBox-5 .textBox { width: calc(100% - 390px); padding-bottom: 34px; border-bottom: 1px solid #dbdbdb; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; } .homeBox-5 .textBox .h1 { width: 100%; font-size: 18px; color: #858585; line-height: 36px; } .homeBox-5 .name { color: #000000; } .homeBox-5 .tips { display: inline-flex; font-size: 18px; color: #2a6590; line-height: 39px; padding-left: 53px; background-image: url(../images/icon12.png); background-repeat: no-repeat; background-position: left center; } /* 濯掍綋鏌ヨ */ /* header&home&footer */ @media only screen and (max-width: 1680px) { .header .item { margin: 0 10px; } .header .item2 { margin: 0 10px; } .header .item .dropDown>a { font-size: 14px; } } @media only screen and (max-width: 1600px) { .header .logo { width: 300px; } .header .item>a { font-size: 16px; padding: 0 10px; } .footer .nav .h1 { font-size: 18px; } .footer .nav a { font-size: 12px; } .footer .phone { font-size: 20px; } .footer .time { font-size: 14px; } .footer .address { font-size: 14px; } .footer .d1 { font-size: 14px; } .footer .copyright { font-size: 12px; } .footer .support { font-size: 12px; } .bannerSwiper .h1 { font-size: 30px; } .bannerSwiper .h2 { font-size: 14px; line-height: 30px; } .homeBox-1 { padding: 70px 0 100px; } .homeBox-1 .title { margin-bottom: 20px; } .homeBox-1 .h1 { font-size: 30px; line-height: 40px; } .homeBox-1 .h2 { font-size: 18px; line-height: 40px; } .homeBox-1 .text { font-size: 14px; line-height: 24px; margin-bottom: 40px; } .homeBox-1 .name { font-size: 14px; line-height: 20px; height: auto; margin-bottom: 10px; } .homeBox-1 .h3 { font-size: 14px; } .homeBox-2 .title .h1 { font-size: 30px; line-height: 50px; } .homeBox-2 .listBox .h1 { font-size: 16px; line-height: 30px; margin-bottom: 20px; } .homeBox-2 .h1 .name { font-size: 20px; margin-right: 15px; } .homeBox-2 .h2 { font-size: 14px; line-height: 24px; margin-bottom: 20px; } .homeBox-2 .controlBox { margin-top: 70px; } .homeBox-2 .swiper-pagination-number { font-size: 18px; } .homeBox-3 { padding: 100px 0 140px; } .homeBox-3 .h1 { font-size: 30px; line-height: 40px; margin-bottom: 30px; } .homeBox-3 .h2 { font-size: 14px; line-height: 24px; margin-bottom: 50px; } .homeBox-3 .item { padding: 20px; } .homeBox-3 .item:nth-child(2n) { padding: 20px 0 20px 20px; } .homeBox-3 .icon { width: 60px; } .homeBox-3 .h3 { width: calc(100% - 60px); font-size: 16px; } .homeBox-4 .title { padding: 70px 0 100px; } .homeBox-4 .title .h1 { font-size: 30px; line-height: 50px; margin-bottom: 30px; } .homeBox-4 .title .h2 { font-size: 14px; line-height: 24px; } .homeBox-4 .back { padding: 0 40px; } .homeBox-4 .suspen .h1 { font-size: 20px; margin-bottom: 10px; } .homeBox-4 .suspen .h2 { font-size: 16px; line-height: 24px; margin-bottom: 15px; } .homeBox-4 .line { width: 45px; height: 3px; margin-bottom: 20px; } .homeBox-4 .suspen .h3 { font-size: 14px; line-height: 24px; margin-bottom: 50px; } .homeBox-4 .icon { width: 45px; } .homeBox-5 .title { margin-bottom: 50px; } .homeBox-5 .title .h1 { font-size: 30px; line-height: 50px; } .homeBox-5 .img { width: 300px; } .homeBox-5 .textBox { width: calc(100% - 350px); } .homeBox-5 .textBox .h1 { font-size: 16px; line-height: 30px; } .homeBox-5 .tips { font-size: 16px; line-height: 30px; padding-left: 40px; background-size: auto 30px; } } @media only screen and (max-width: 1280px) { .header .w1670 { width: 90%; } .w15 { width: 90%; } .bannerSwiper .suspen { max-width: 90%; } .homeBox-4 .title .wrap { max-width: 90%; } } @media only screen and (max-width: 1199px) { .header { height: 70px; background-color: #fff; } .header .rHeadBox { height: auto; } .header.headBack { height: 70px; } .header .nav { position: fixed; top: 70px; left: 0; width: 100%; height: calc(100vh - 70px); background-color: #fff; border-top: 1px solid #eee; overflow-y: auto; flex-direction: column; display: none; } .header .nav::-webkit-scrollbar { display: none; } .header .item { width: 90%; margin: 0 auto; } .header .item>a { position: relative; display: block; padding: 0; line-height: 70px; border-bottom: 1px solid #eee; } .header .item>a::after { position: absolute; top: 50%; right: 0; content: ""; width: 11px; height: 19px; margin-top: -10px; background-image: url(../images/icon6.png); background-position: center center; background-size: cover; transition: all 0.3s ease-in; } .header .item>a.link::after { display: none; } .header .rBox { display: none; } .header .btnMenu { display: flex; } .header .item .dropDown { position: relative; top: 0; transition: none; background-color: #fff; } .header .item .dropDown>a { display: block; color: #333; line-height: 50px; text-align: left; margin-right: 0; } .header .item>a.active::after { transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); } .main { padding-top: 70px; } .homeBox-1 .item { padding: 0 1%; } .homeBox-2 .h2 { max-width: 100%; -webkit-line-clamp: 2; } .homeBox-3 .h3 { font-size: 14px; } .homeBox-4 .swiper-pagination { opacity: 1; } } @media only screen and (max-width: 1024px) { .homeBox-1 { padding: 70px 0; } .homeBox-1 .item { width: 50%; margin-bottom: 30px; } .homeBox-2 .lBox { width: 70%; margin: 0 auto; margin-bottom: 40px; } .homeBox-2 .rBox { width: 100%; } .rTeamSwiper { display: none; } .homeBox-2 .controlBox { justify-content: center; margin-top: 50px; } .homeBox-2 .btnRightPrev, .homeBox-2 .btnRightNext { display: none; } .homeBox-2 .btnLeftPrev, .homeBox-2 .btnLeftNext { display: block; } .homeBox-2 .swiper-pagination { display: none; } .homeBox-2 .swiper-button-next { margin: 0 30px; } .homeBox-2 .btnMore { margin-bottom: 0; } .homeBox-3 .img { width: 50%; text-align: center; margin-bottom: 30px; } .homeBox-3 .textBox { width: 100%; margin: 0 auto; } } @media only screen and (max-width: 991px) { .footer .nav { padding: 40px 0 30px; } .footer .nav.pNav { display: none; } .footer .nav.mNav { display: flex; } .footer .item { max-width: 100%; width: 100%; } .footer .nav .h1 { position: relative; margin-bottom: 0; padding: 15px 0; border-bottom: 1px solid #666; } .footer .nav .h1::after { position: absolute; top: 50%; right: 0; content: ""; width: 11px; height: 19px; margin-top: -10px; background-image: url(../images/icon6.png); background-repeat: no-repeat; background-position: center center; background-size: cover; transition: all 0.3s ease-in; } .footer .nav .h1.active::after { transform: rotate(90deg); -ms-transform: rotate(90deg); /* IE 9 */ -moz-transform: rotate(90deg); /* Firefox */ -webkit-transform: rotate(90deg); /* Safari 鍜 Chrome */ -o-transform: rotate(90deg); } .footer .item .dropDown { display: none; } .homeBox-5 .img { display: none; } .homeBox-5 .textBox { width: 100%; } .homeBox-5 .tips { margin-top: 30px; } } @media only screen and (max-width: 580px) { .header { height: 50px; } .header .logo { width: 250px; } .header .btnMenu { width: 30px; } .header .btnMenu>span { width: 30px; margin: 3px 0; } .header .btnMenu.on>span:last-child { margin-top: -5px; } .header.headBack { height: 50px; } .header .nav { top: 50px; height: calc(100vh - 50px); } .header .item>a { line-height: 60px; } .header .item .dropDown>a { line-height: 40px; } .header.headBack .item>a { line-height: 60px; } .footer .infoBox .textBox { margin-bottom: 20px; } .main { padding-top: 50px; } .homeMain .bannerSwiper .suspen { top: 30%; } .bannerSwiper .swiper-pagination { bottom: 5%; } .pImg { display: none; } .mImg { display: block; } .homeBox-1 { padding: 60px 0; } .homeBox-2 { padding: 60px 0; } .homeBox-2 .title { margin-bottom: 40px; } .homeBox-2 .lBox { width: 100%; } .homeBox-2 .controlBox { margin-top: 50px; } .homeBox-3 { padding: 60px 0; } .homeBox-3 .h2 { margin-bottom: 30px; } .homeBox-3 .item { padding: 15px; } .homeBox-3 .h3 { font-size: 12px; line-height: 20px; } .homeBox-4 .title { padding: 60px 0; } .homeBox-4 .back { top: 0; justify-content: center; } .homeBox-4 .item:hover .back { background: none; } .homeBox-4 .line { opacity: 1; } .homeBox-4 .suspen .h3 { opacity: 1; } .homeBox-4 .more { opacity: 1; } .homeBox-4 .icon { opacity: 1; } } @media only screen and (max-width: 480px) { .header .logo { width: 200px; } .header .item>a { line-height: 50px; } .header .item>a::after { width: 8px; height: 13px; } .header.headBack .item>a { line-height: 50px; } .footer .nav { padding: 20px 0; } .footer .nav .h1 { font-size: 16px; padding: 10px 0; } .footer .nav .h1::after { width: 8px; height: 13px; } .footer .infoBox { padding: 10px 0; border: 0; } .footer .infoBox .h1 { line-height: 30px; margin-bottom: 0px; } .footer .infoBox .textBox { text-align: center; } .footer .phone { font-size: 18px; margin-right: 5px; } .footer .codeBox { width: 100px; margin: 0 auto; } .footer .botBox { padding: 10px 0; } .footer .copyright { line-height: 24px; margin: 0; } .footer .webInfo { justify-content: center; text-align: center; } .footer .shareBox { width: 100%; justify-content: center; } .bannerSwiper .h1 { font-size: 20px; margin-bottom: 15px; } .bannerSwiper .h2 { line-height: 24px; } .homeBox-1 { padding: 40px 0 20px; } .homeBox-1 .title { margin-bottom: 15px; } .homeBox-1 .h1 { font-size: 20px; line-height: 30px; } .homeBox-1 .h2 { font-size: 16px; line-height: 30px; } .homeBox-1 .item { margin-bottom: 20px; } .homeBox-1 .text { margin-bottom: 20px; } .homeBox-1 .img { width: 70px; margin: 0 auto 20px; } .homeBox-2 { padding: 40px 0; } .homeBox-2 .title { margin-bottom: 30px; } .homeBox-2 .title .h1 { font-size: 20px; line-height: 30px; padding-bottom: 15px; } .homeBox-2 .lBox { margin-bottom: 20px; } .homeBox-2 .listBox .h1 { font-size: 14px; line-height: 24px; margin-bottom: 15px; } .homeBox-2 .h1 .name { font-size: 16px; margin-bottom: 5px; } .homeBox-2 .btnMore { font-size: 14px; line-height: 20px; background-size: auto 90%; padding-right: 32px; } .homeBox-2 .suspen .name { font-size: 14px; line-height: 20px; } .homeBox-2 .controlBox { margin-top: 30px; } .homeBox-2 .swiper-pagination { width: 50%; margin: 0 3%; } .homeBox-3 { padding: 40px 0 30px; } .homeBox-3 .h1 { font-size: 20px; line-height: 30px; margin-bottom: 10px; } .homeBox-3 .h2 { margin-bottom: 20px; } .homeBox-3 .img { width: 30%; } .homeBox-3 .item { width: 49.5%; padding: 10px 0 !important; border: 0 !important; } .homeBox-3 .item::after { display: none; } .homeBox-3 .icon { width: 50px; } .homeBox-3 .h3 { width: calc(100% - 50px); padding-left: 10px; } .homeBox-4 .title { padding: 40px 0; } .homeBox-4 .title .h1 { font-size: 20px; line-height: 30px; margin-bottom: 15px; } .homeBox-5 { padding: 40px 0; } .homeBox-5 .title { margin-bottom: 20px; } .homeBox-5 .title .h1 { font-size: 20px; line-height: 30px; padding-bottom: 15px; } .homeBox-5 .textBox { padding-bottom: 15px; } .homeBox-5 .textBox .h1 { font-size: 14px; line-height: 24px; } .homeBox-5 .tips { font-size: 14px; line-height: 20px; margin-top: 15px; } .homeBox-5 .item { margin-bottom: 20px; } } /* 鏍稿績鎶€鏈 */ .technicalBox-1 { padding: 125px 0 95px; } .technicalBox-1 .wrap { display: flex; justify-content: space-between; align-items: center; } .technicalBox-1 .h1{ margin-bottom: 0; } .technicalBox-1 .h4 { font-size: 24px; color: #ffffff; line-height: 40px; margin-bottom: 20px; } .technicalBox-1 .textBox { width: 57%; } .technicalBox-1 .img { width: 27.7333%; } .technicalBox-1 .item { width: 45%; padding: 30px 0; } .technicalBox-1 .item:nth-child(2n) { padding: 30px 0; } .technicalBox-1 .item::after { display: none; } .technicalBox-1 .item:nth-child(n + 3) { border: 0; } .technicalBox-2 { padding: 50px 0; background-position: center center; background-size: cover; } .technicalBox-2 .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .technicalBox-2 .img { width: 48%; } .technicalBox-2 .textBox { width: 45.3333%; } .technicalBox-2 .h1 { font-size: 50px; color: #0c5b94; line-height: 1; margin-bottom: 60px; } .technicalBox-2 .text { font-size: 16px; color: #666666; line-height: 36px; } .technicalBox-3 { padding-top: 75px; } .technicalBox-3 .box { position: relative; padding: 55px 0 115px; } .technicalBox-3 .box-1 { padding: 105px 0 115px; } .technicalBox-3 .h1 { font-size: 50px; color: #2a6590; line-height: 60px; text-align: center; } .technicalBox-3 .h2 { display: inline-block; min-width: 136px; font-size: 20px; color: #ffffff; line-height: 48px; text-align: center; border-radius: 24px; margin: 0 auto; background-color: #2a6590; margin-bottom: 55px; padding: 0 15px; } .technicalBox-3 .wrap { text-align: center; } .technicalBox-3 .videoBox { position: relative; display: flex; justify-content: center; flex-wrap: wrap; } .technicalBox-3 .img { width: 100%; } .technicalBox-3 .tips { max-width: 935px; width: 100%; display: inline-block; font-size: 20px; color: #666666; line-height: 30px; text-align: center; padding: 23px 35px; margin-top: 50px; border: 1px solid #e7e7e7; border-radius: 34px; } .technicalBox-3 .name { color: #00aeef; font-weight: bold; } .technicalBox-3 .btnPlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; } /* 濯掍綋鏌ヨ */ /* 鏍稿績鎶€鏈 */ @media only screen and (max-width: 1600px) { .technicalBox-1 .h4 { font-size: 18px; color: #ffffff; line-height: 30px; margin-bottom: 20px; } .technicalBox-2 .h1 { font-size: 30px; line-height: 40px; margin-bottom: 40px; } .technicalBox-2 .text { font-size: 14px; color: #666666; line-height: 30px; } .technicalBox-3 .h1 { font-size: 30px; line-height: 40px; } .technicalBox-3 .h2 { min-width: 100px; font-size: 16px; line-height: 40px; border-radius: 20px; } .technicalBox-3 .tips { font-size: 16px; line-height: 20px; } } @media only screen and (max-width: 991px) { .technicalBox-1 { padding: 70px 0; } .technicalBox-1 .wrap { flex-direction: column-reverse; } .technicalBox-1 .img { width: 30%; } .technicalBox-1 .textBox { width: 100%; } .technicalBox-2 .wrap { justify-content: center; } .technicalBox-2 .textBox { width: 100%; } } @media only screen and (max-width: 580px) { .technicalBox-1 { padding: 60px 0 40px; } .technicalBox-1 .img { width: 50%; } .technicalBox-1 .item { width: 48%; padding: 20px 0 !important; } .technicalBox-2 .img { width: 50%; } .technicalBox-3 { padding-top: 60px; } .technicalBox-3 .box { padding: 40px 0 60px; } .technicalBox-3 .tips { margin-top: 30px; } .technicalBox-3 .box-1 { padding: 60px 0; } .technicalBox-3 .btnPlay { width: 60px; } } @media only screen and (max-width: 480px) { .technicalBox-1 { padding: 40px 0 30px; } .technicalBox-1 .h4 { font-size: 16px; margin-bottom: 10px; } .technicalBox-1 .item { padding: 10px 0 !important; } .technicalBox-2 { padding: 40px 0; } .technicalBox-2 .h1 { font-size: 20px; line-height: 30px; margin-bottom: 15px; } .technicalBox-2 .text { line-height: 24px; } .technicalBox-3 { padding-top: 40px; } .technicalBox-3 .h1 { font-size: 20px; line-height: 30px; } .technicalBox-3 .box { padding: 20px 0 40px; } .technicalBox-3 .h2 { min-width: 90px; font-size: 14px; line-height: 34px; border-radius: 17px; margin-bottom: 30px; } .technicalBox-3 .box-1 { padding: 40px 0; } .technicalBox-3 .tips { font-size: 14px; padding: 10px 20px; } .technicalBox-3 .btnPlay { width: 40px; } } /* 鑽墿鐮斿彂鏈嶅姟 */ .banner { position: relative; } .banner .suspen { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .banner .cn { font-size: 50px; color: #ffffff; line-height: 1; margin-bottom: 25px; } .banner .en { font-size: 40px; color: #ffffff; line-height: 1; opacity: 0.2; } .sortNav { position: relative; border-top: 1px solid rgba(117, 117, 117, 0.19); margin-top: -77px; z-index: 2; } .sortNav .wrap { display: flex; align-items: flex-end; } .sortNav .wrap::-webkit-scrollbar { display: none; } .sortNav .item { position: relative; display: flex; align-items: stretch; max-width: 260px; width: 100%; } .sortNav .item>a { position: relative; max-width: 260px; width: 100%; font-size: 16px; color: #888888; line-height: 76px; text-align: center; padding: 0 15px; } .sortNav .item>a::after { position: absolute; top: 50%; right: 0; content: ""; width: 1px; height: 20px; margin-top: -10px; background-color: #5b5b5b; } .sortNav .item>a.active { color: #ffffff; font-weight: bold; } .sortNav .item>a.active::after { display: none; } .sortNav .item>a.active::before { position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: 120%; background-image: linear-gradient(#2a6590, #247aba); } .sortNav .item>a span { position: relative; } .sortNav .dropDown { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); width: 100%; padding: 10px 0; background-color: rgba(0, 0, 0, 0.3); display: none; } .sortNav .dropDown>a { display: block; font-size: 16px; color: #fff; line-height: 40px; text-align: center; padding: 0 15px; } .sortNav .dropDown>a:hover { text-decoration: underline; } .makeupBox-1 .aboutBox-6 { background: none; } .researchBox-1 { padding: 95px 0 370px; background-repeat: no-repeat; background-position: left bottom; background-size: 100% auto; } .researchBox-1 .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .researchBox-1 .textBox { width: 64.6666%; } .researchBox-1 .img { width: 28.2666%; } .researchBox-1 .en { position: relative; font-size: 72px; color: #f5f4f4; line-height: 1; margin-bottom: 65px; } .researchBox-1 .cn { position: absolute; left: 5px; bottom: 10px; font-size: 30px; color: #000000; font-weight: bold; } .researchBox-1 .text { font-size: 16px; color: #666666; line-height: 36px; } .researchBox-1 .tips { font-size: 16px; color: #000000; line-height: 36px; font-weight: bold; } .researchBox-1 .h1 { font-size: 20px; color: #2a6590; line-height: 48px; } .researchBox-2 .textBox { width: 100%; } .researchBox-2 .h2 { font-size: 20px; color: #000; line-height: 36px; font-weight: bold; margin-bottom: 40px; } .researchBox-3 .en { width: 100%; margin-bottom: 105px; } .researchBox-3 .img { width: 30%; } .researchBox-3 .textBox { width: 63.3333%; padding-right: 3.4%; } .researchBox-4 { padding: 90px 0 85px; } .researchBox-4 .topBox { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; margin-bottom: 100px; } .researchBox-4 .en { position: relative; font-size: 72px; color: #f5f4f4; line-height: 1; } .researchBox-4 .cn { position: absolute; left: 5px; bottom: 10px; font-size: 30px; color: #000000; font-weight: bold; } .researchBox-4 .h1 { font-size: 22px; color: #000000; line-height: 1; } .researchBox-4 .botBox { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .researchBox-4 .img { width: 30%; } .researchBox-4 .listBox { width: 63.3333%; } .researchBox-4 .item { display: flex; margin-bottom: 60px; } .researchBox-4 .item:last-child { margin-bottom: 0; } .researchBox-4 .icon { width: 59px; } .researchBox-4 .textBox { width: calc(100% - 59px); padding-left: 28px; } .researchBox-4 .name { font-size: 16px; color: #000000; line-height: 30px; font-weight: bold; } .researchBox-4 .text { font-size: 16px; color: #888888; line-height: 30px; } .researchBox-5 { padding: 80px 0 370px; background-repeat: no-repeat; background-position: left bottom; background-size: 100% auto; background-color: #f5f5f5; } .researchBox-5 .en { position: relative; font-size: 72px; color: #eaeaea; line-height: 1; text-align: center; margin-bottom: 100px; } .researchBox-5 .cn { position: absolute; left: 0; bottom: 10px; width: 100%; font-size: 30px; color: #000000; font-weight: bold; } /* 濯掍綋鏌ヨ */ /* 鑽墿鐮斿彂鏈嶅姟 */ @media only screen and (max-width: 1600px) { .banner .cn { font-size: 30px; } .banner .en { font-size: 20px; } .sortNav a { font-size: 14px; } .researchBox-1 { padding: 95px 0 250px; } .researchBox-1 .en { font-size: 50px; } .researchBox-1 .cn { left: 0; bottom: 5px; font-size: 20px; } .researchBox-1 .text { font-size: 14px; line-height: 30px; } .researchBox-1 .tips { font-size: 14px; line-height: 30px; } .researchBox-1 .h1 { font-size: 16px; line-height: 30px; } .researchBox-2 .h2 { font-size: 16px; line-height: 30px; margin-bottom: 20px; } .researchBox-3 .en { margin-bottom: 70px; } .researchBox-4 .topBox { margin-bottom: 70px; } .researchBox-4 .en { font-size: 50px; } .researchBox-4 .cn { left: 0; bottom: 5px; font-size: 20px; } .researchBox-4 .h1 { font-size: 18px; } .researchBox-5 .en { font-size: 50px; } .researchBox-5 .cn { bottom: 5px; font-size: 20px; } .researchBox-4 .item { margin-bottom: 40px; } .researchBox-4 .name { font-size: 14px; line-height: 24px; } .researchBox-4 .text { font-size: 14px; line-height: 24px; } } @media only screen and (max-width: 1199px) { .researchBox-1 .textBox { width: 100%; } .researchBox-1 .img { display: none; } .researchBox-5 { padding: 80px 0 250px; } .sortNav .wrap { overflow-x: auto; white-space: nowrap; } } @media only screen and (max-width: 991px) { .researchBox-4 .topBox { margin-bottom: 40px; } .researchBox-4 .en { margin-bottom: 20px; } .researchBox-4 .h1 { margin-bottom: 20px; } .researchBox-4 .botBox { justify-content: center; } .researchBox-4 .img { width: 50%; margin-bottom: 30px; } .researchBox-4 .listBox { width: 100%; } .researchBox-5 { padding: 80px 0 200px; } } @media only screen and (max-width: 768px) { .sortNav { margin-top: -50px; } .sortNav .item>a { line-height: 50px; } } @media only screen and (max-width: 580px) { .researchBox-1 { padding: 60px 0 100px; } .sortNav { margin-top: 0; border-top: 0; background-color: rgba(0, 0, 0, 0.5); } .sortNav .item>a { color: #fff; } .sortNav .item::after { height: 14px; margin-top: -7px; } .researchBox-4 { padding: 60px 0; } .researchBox-4 .topBox { margin-bottom: 20px; } .researchBox-4 .en { font-size: 36px; } .researchBox-4 .h1 { font-size: 16px; } .researchBox-4 .img { width: 70%; } .researchBox-4 .icon { width: 40px; } .researchBox-4 .textBox { width: calc(100% - 40px); padding-left: 15px; } .researchBox-4 .item { margin-bottom: 20px; } .researchBox-5 { padding: 60px 0 100px; } .researchBox-5 .en { font-size: 36px; margin-bottom: 30px; } .researchBox-1 .en { font-size: 30px; } .researchBox-1 .cn { position: relative; bottom: 0; margin-top: 10px; } } @media only screen and (max-width: 480px) { .banner .cn { font-size: 20px; margin-bottom: 20px; } .banner .en { font-size: 14px; } .researchBox-1 { padding: 40px 0 60px; } .researchBox-1 .en { margin-bottom: 30px; } .researchBox-1 .text { line-height: 24px; } .researchBox-1 .tips { line-height: 24px; } .researchBox-1 .h1 { font-size: 14px; } .researchBox-2 .h2 { font-size: 14px; line-height: 24px; } .researchBox-4 { padding: 40px 0; } .researchBox-4 .topBox { margin-bottom: 10px; } .researchBox-5 { padding: 40px 0 60px; } } /* 鍖荤編濡嗗搧 */ .makeupBox-1 { padding: 90px 0 310px; background-repeat: no-repeat; background-position: left bottom; background-size: 100% auto; } .makeupBox-1 .en { position: relative; font-size: 72px; color: #f5f4f4; line-height: 1; margin-bottom: 90px; } .makeupBox-1 .cn { position: absolute; left: 5px; bottom: 10px; font-size: 30px; color: #000000; font-weight: bold; } .makeupBox-1 .title { text-align: center; margin-bottom: 70px; } .makeupBox-1 .h1 { font-size: 40px; color: #000000; line-height: 1; font-weight: bold; margin-bottom: 30px; } .makeupBox-1 .h2 { font-size: 18px; color: #666666; line-height: 36px; } .makeupBox-1 .imgBox { text-align: center; margin-bottom: 10px; } .makeupBox-1 .listBox { display: flex; justify-content: space-between; flex-wrap: wrap; } .makeupBox-1 .item { max-width: 30%; display: flex; flex-direction: column; align-items: center; padding: 0 3%; text-align: center; } .makeupBox-1 .icon { margin-bottom: 35px; } .makeupBox-1 .name { font-size: 20px; color: #000000; line-height: 36px; margin-bottom: 18px; } .makeupBox-1 .h3 { font-size: 26px; color: #2a6590; line-height: 36px; margin-bottom: 35px; } .makeupBox-1 .h4 { font-size: 16px; color: #2a6590; line-height: 24px; margin-bottom: 25px; } .makeupBox-1 .text { font-size: 16px; color: #888888; line-height: 30px; margin-bottom: 30px; } .makeupBox-2 { padding: 95px 0 410px; } .makeupBox-2 .en { margin-bottom: 125px; } .makeupBox-2 .videoBox { display: flex; justify-content: center; align-items: center; } .makeupBox-2 .videoWrap { position: relative; overflow: hidden; } .makeupBox-2 .video { min-width: 1000px; width: 100%; } .makeupBox-2 .btnPlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; z-index: 3; } .makeupBox-3 { padding: 90px 0 440px; } .makeupBox-3 .en { margin-bottom: 50px; } .makeupBox-3 .botBox-2 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .makeupBox-3 .text-2 { width: 48%; font-size: 16px; color: #666666; line-height: 36px; } .makeupBox-3 .rBox { width: 43%; } .makeupBox-3 .h5 { font-size: 20px; color: #000000; line-height: 36px; font-weight: bold; margin-bottom: 45px; padding-left: 8px; } .makeupBox-3 .listBox-2 { position: relative; } .makeupBox-3 .listBox-2::after { position: absolute; top: -8%; left: 12px; content: ""; width: 1px; height: 130%; background-color: #e8e8e8; } .makeupBox-3 .item-1 { position: relative; font-size: 16px; color: #888888; line-height: 36px; margin-bottom: 30px; padding-left: 45px; } .makeupBox-3 .item-1:last-child { margin-bottom: 0; } .makeupBox-3 .item-1::after, .makeupBox-3 .item-1::before { position: absolute; content: ""; left: 0; top: 50%; transform: translate(0, -50%); border-radius: 50%; } .makeupBox-3 .item-1::after { width: 25px; height: 25px; background-color: #e8e8e8; z-index: 1; } .makeupBox-3 .item-1::before { left: 6px; width: 13px; height: 13px; background-color: #2a6590; z-index: 2; } .popupVideo { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 12; display: flex; justify-content: center; align-items: center; display: none; } .popupVideo .wrap { max-width: 60%; width: 100%; max-height: 70%; } .popupVideo .close { position: absolute; top: 5%; right: 5%; width: 30px; height: 30px; border: 1px solid #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; } .popupVideo .close img { width: 16px; } /* 濯掍綋鏌ヨ */ /* 鍖荤編濡嗗搧 */ @media only screen and (max-width: 1600px) { .makeupBox-1 { padding: 90px 0 250px; } .makeupBox-1 .en { font-size: 50px; } .makeupBox-1 .cn { left: 0; bottom: 5px; font-size: 20px; } .makeupBox-1 .h1 { font-size: 30px; } .makeupBox-1 .h2 { font-size: 14px; line-height: 24px; } .makeupBox-1 .icon { width: 140px; } .makeupBox-1 .name { font-size: 16px; line-height: 30px; margin-bottom: 10px; } .makeupBox-1 .h3 { font-size: 18px; line-height: 30px; margin-bottom: 20px; } .makeupBox-1 .h4 { font-size: 14px; margin-bottom: 20px; } .makeupBox-1 .text { font-size: 14px; line-height: 24px; } .makeupBox-2 .en { margin-bottom: 70px; } .makeupBox-3 .text-2 { font-size: 14px; line-height: 30px; } .makeupBox-3 .h5 { font-size: 16px; line-height: 30px; } .makeupBox-3 .item-1 { font-size: 14px; line-height: 30px; } .makeupBox-3 .listBox-2::after { top: 50%; height: 120%; transform: translate(0, -50%); } } @media only screen and (max-width: 1199px) { .popupVideo .wrap { max-width: 90%; } .makeupBox-2 .video { min-width: 100%; } } @media only screen and (max-width: 991px) { .makeupBox-3 .text-2 { width: 100%; margin-bottom: 30px; } .makeupBox-3 .rBox { width: 100%; } } @media only screen and (max-width: 768px) { .makeupBox-1 { padding: 90px 0 150px; } .makeupBox-1 .item { max-width: 100%; margin-bottom: 30px; } .makeupBox-1 .item:last-child { margin-bottom: 0; } } @media only screen and (max-width: 580px) { .makeupBox-1 { padding: 60px 0 100px; } .makeupBox-1 .en { font-size: 30px; margin-bottom: 50px; } .makeupBox-1 .cn { position: relative; bottom: 0; margin-top: 10px; } .makeupBox-1 .h1 { font-size: 20px; line-height: 1.5; } .makeupBox-2 .btnPlay { width: 60px; } .popupVideo .wrap { max-width: 90%; max-height: 100%; } } @media only screen and (max-width: 480px) { .makeupBox-1 { padding: 40px 0 60px; } .makeupBox-1 .en { margin-bottom: 30px; } .makeupBox-1 .title { margin-bottom: 40px; } .makeupBox-1 .h1 { margin-bottom: 20px; } .makeupBox-1 .icon { width: 100px; margin-bottom: 20px; } .makeupBox-2 .btnPlay { width: 40px; } .makeupBox-3 .text-2 { line-height: 24px; } .makeupBox-3 .h5 { margin-bottom: 20px; } .makeupBox-3 .listBox-2::after { height: 100%; } .makeupBox-3 .item-1 { line-height: 24px; margin-bottom: 20px; } } /* 鏂伴椈 */ .newsBox-1 { padding: 95px 0 90px; } .newsBox-1 .en { position: relative; font-size: 72px; color: #f5f4f4; line-height: 1; } .newsBox-1 .cn { position: absolute; left: 5px; bottom: 10px; font-size: 30px; color: #000000; font-weight: bold; } .newsBox-1 .item { padding: 80px 0 70px; border-bottom: 1px solid #e9e9e9; } .newsBox-1 .item>a { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .newsBox-1 .img { width: 312px; } .newsBox-1 .textBox { width: calc(100% - 312px); padding-left: 85px; } .newsBox-1 .time { font-size: 20px; color: #bbbbbb; line-height: 30px; font-weight: bold; margin-bottom: 5px; } .newsBox-1 .h1 { font-size: 20px; color: #333333; line-height: 36px; font-weight: bold; margin-bottom: 12px; transition: all 0.5s ease-in; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .newsBox-1 .text { font-size: 16px; color: #888888; line-height: 28px; margin-bottom: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .newsBox-1 .more { display: inline-block; vertical-align: top; font-size: 16px; color: #333333; line-height: 36px; padding-right: 45px; background-image: url(../images/icon27.png); background-repeat: no-repeat; background-position: right center; transition: all 0.5s ease-in; } .newsBox-1 .item:hover .h1 { color: #2a6590; } .newsBox-1 .item:hover .more { color: #174e9f; background-image: url(../images/icon28.png); } .newsBox-1 .navPage { margin-top: 80px; } .navPage { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .navPage a { width: 35px; height: 35px; border: 1px solid #bfbfbf; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 18px; color: #999999; margin: 0 7px; transition: all 0.5s ease-in; } .navPage a.active { color: #fff; border: 1px solid #174e9f; background-color: #174e9f; } .navPage a:hover { color: #fff; border: 1px solid #174e9f; background-color: #174e9f; } .detailsBox { padding: 110px 0 70px; } .detailsBox .title { text-align: center; margin-bottom: 60px; } .detailsBox .title .h1 { font-size: 28px; color: #000000; line-height: 36px; font-weight: bold; margin-bottom: 40px; } .detailsBox .title .infoBox { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; border-top: 1px solid #eeeeee; padding-top: 10px; } .detailsBox .title .s1 { font-size: 16px; color: #ada5a5; line-height: 36px; margin: 0 6%; } .detailsBox .text { font-size: 16px; color: #888888; line-height: 36px; text-align: justify; } .upDown { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; border-top: 1px solid #eeeeee; margin: 50px 0 15px; padding-top: 50px; } .upDown a { width: 45%; font-size: 16px; color: #000000; line-height: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upDown a:last-child { text-align: right; } .upDown span { color: #ada5a5; } .detailsBox .shareBox { display: flex; align-items: center; flex-wrap: wrap; font-size: 16px; color: #000000; line-height: 36px; } .detailsBox .shareBox a { margin: 0 5px; } /* 濯掍綋鏌ヨ */ /* 鏂伴椈 */ @media only screen and (max-width: 1600px) { .newsBox-1 .en { font-size: 50px; } .newsBox-1 .cn { font-size: 20px; left: 0; bottom: 5px; } .newsBox-1 .item { padding: 60px 0; } .newsBox-1 .textBox { padding-left: 50px; } .newsBox-1 .time { font-size: 16px; line-height: 20px; } .newsBox-1 .h1 { font-size: 16px; } .newsBox-1 .text { font-size: 14px; line-height: 24px; } .newsBox-1 .more { font-size: 14px; } .detailsBox .title { margin-bottom: 40px; } .detailsBox .title .h1 { font-size: 20px; line-height: 30px; margin-bottom: 30px; } .detailsBox .title .s1 { font-size: 14px; line-height: 30px; } .detailsBox .text { font-size: 14px; line-height: 30px; } .upDown { margin: 30px 0 10px; } .upDown a { font-size: 14px; line-height: 30px; } .detailsBox .shareBox { font-size: 14px; line-height: 30px; } } @media only screen and (max-width: 768px) { .newsBox-1 .img { margin-bottom: 30px; } .newsBox-1 .item>a { justify-content: center; } .newsBox-1 .textBox { width: 100%; padding: 0; } } @media only screen and (max-width: 580px) { .newsBox-1 { padding: 60px 0; } .newsBox-1 .item { padding: 40px 0; } .newsBox-1 .img { width: 100%; } .newsBox-1 .navPage { margin-top: 40px; } .detailsBox { padding: 60px 0; } .upDown { padding-top: 30px; } .upDown a { width: 100%; text-align: left !important; } .newsBox-1 .en { font-size: 30px; } .newsBox-1 .cn { position: relative; margin-top: 10px; } } @media only screen and (max-width: 480px) { .newsBox-1 { padding: 40px 0; } .newsBox-1 .item { padding: 30px 0; } .newsBox-1 .img { margin-bottom: 20px; } .newsBox-1 .time { font-size: 14px; } .newsBox-1 .h1 { line-height: 30px; margin-bottom: 10px; } .newsBox-1 .text { margin-bottom: 10px; } .newsBox-1 .more { line-height: 24px; padding-right: 35px; background-size: auto 100%; } .navPage a { width: 30px; height: 30px; font-size: 14px; margin: 0 5px; } .detailsBox { padding: 40px 0; } .detailsBox .title .h1 { font-size: 18px; margin-bottom: 20px; } .detailsBox .title { margin-bottom: 20px; } .upDown { margin: 20px 0 10px; padding-top: 20px; } } /* 鍏充簬鎴戜滑 */ .aboutBox-1 { padding: 95px 0 120px; background-repeat: no-repeat; background-position: 97% 3%; background-size: 50% auto; } .aboutBox-1 .topBox { display: flex; justify-content: space-between; flex-wrap: wrap; } .aboutBox-1 .textBox { width: 62.6666%; } .aboutBox-1 .swiperBox { width: 30%; margin-top: 147px; } .aboutBox-1 .en { position: relative; font-size: 72px; color: #f5f4f4; line-height: 1; margin-bottom: 75px; } .aboutBox-1 .cn { position: absolute; left: 5px; bottom: 10px; font-size: 30px; color: #000000; font-weight: bold; } .aboutBox-1 .text { font-size: 16px; color: #666666; line-height: 36px; } .aboutBox-1 .tips { font-size: 20px; color: #000000; font-weight: bold; } .aboutBox-1 .listBox { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 120px; } .aboutBox-1 .item { max-width: 25%; min-width: 15%; display: flex; flex-direction: column; align-items: center; } .aboutBox-1 .h1 { display: flex; justify-content: center; align-items: flex-end; font-size: 22px; color: #405aa8; line-height: 36px; font-weight: bold; margin-bottom: 25px; } .aboutBox-1 .number { font-size: 50px; margin-right: 15px; } .aboutBox-1 .unit { font-size: 50px; } .aboutBox-1 .line { width: 40px; height: 2px; background-color: #999999; margin: 0 auto 10px; } .aboutBox-1 .h2 { font-size: 16px; color: #666666; line-height: 36px; } .aboutBox-1 .swiper-pagination-bullet { width: 15px; height: 15px; border: 2px solid #fff; background: none; opacity: 1; } .aboutBox-1 .swiper-pagination-bullet-active { background-color: #fff; } .aboutBox-2 .en { position: relative; font-size: 72px; color: #efefef; line-height: 1; margin-bottom: 105px; } .aboutBox-2 .cn { position: absolute; left: 5px; bottom: 10px; font-size: 30px; color: #000000; font-weight: bold; } .aboutBox-3 { padding: 90px 0 165px; background-position: center center; background-size: cover; } .aboutBox-3 .en { position: relative; font-size: 72px; color: #efefef; line-height: 1; margin-bottom: 125px; } .aboutBox-3 .cn { position: absolute; left: 5px; bottom: 10px; font-size: 30px; color: #000000; font-weight: bold; } .aboutBox-3 .swiperBox { position: relative; } .aboutBox-3 .swiper-slide { padding: 10px; background-color: #fff; display: flex; justify-content: center; } .aboutBox-3 .swiper-button-next, .aboutBox-3 .swiper-button-prev { width: 18px; height: 37px; margin-top: -18px; background-size: cover; } .aboutBox-3 .swiper-button-prev { left: -5%; background-image: url(../images/icon35.png); } .aboutBox-3 .swiper-button-next { right: -5%; background-image: url(../images/icon36.png); } .aboutBox-3 .swiper-button-prev:hover { background-image: url(../images/icon35-1.png); } .aboutBox-3 .swiper-button-next:hover { background-image: url(../images/icon36-1.png); } .aboutBox-3 .swiper-button-next::after, .aboutBox-3 .swiper-button-prev::after { display: none; } .aboutBox-4 { padding: 95px 0 60px; } .aboutBox-4 .en { position: relative; font-size: 72px; color: #efefef; line-height: 1; margin-bottom: 95px; } .aboutBox-4 .cn { position: absolute; left: 5px; bottom: 10px; font-size: 30px; color: #000000; font-weight: bold; } .aboutBox-4 .btnBox { display: flex; justify-content: center; margin-top: 85px; } .aboutBox-4 .btnMore { display: flex; flex-direction: column; align-items: center; font-size: 16px; color: #8b8b8b; line-height: 36px; cursor: pointer; } .aboutBox-5 { padding: 95px 0 100px; background-position: top left; background-size: 100% auto; } .aboutBox-5 .en { position: relative; font-size: 72px; color: #efefef; line-height: 1; margin-bottom: 60px; } .aboutBox-5 .cn { position: absolute; left: 5px; bottom: 10px; font-size: 30px; color: #000000; font-weight: bold; } .aboutBox-5 .box { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .aboutBox-5 .listBox { width: 40%; } .aboutBox-5 .mapBox { width: 50%; } .aboutBox-5 .item { display: flex; align-items: center; padding: 30px 0; border-bottom: 1px solid #e6e6e6; } .aboutBox-5 .icon { width: 70px; } .aboutBox-5 .text { width: calc(100% - 70px); padding-left: 18px; } .aboutBox-5 .h1 { font-size: 18px; color: #3f6fb5; line-height: 30px; font-weight: bold; } .aboutBox-5 .h2 { font-size: 16px; color: #666666; line-height: 28px; } .aboutBox-6 { padding: 95px 0 115px; background-color: #f5f5f5; } .aboutBox-6 .en { position: relative; font-size: 72px; color: #efefef; line-height: 1; margin-bottom: 65px; } .aboutBox-6 .cn { position: absolute; left: 5px; bottom: 10px; font-size: 30px; color: #000000; font-weight: bold; } .aboutBox-6 .nav { display: flex; justify-content: center; align-items: center; margin-bottom: 60px; } .aboutBox-6 .nav .item { min-width: 138px; height: 48px; font-size: 20px; color: #666666; line-height: 48px; text-align: center; background-color: #d7d7d7; border-radius: 24px; margin: 0 35px; padding: 0 15px; cursor: pointer; white-space: nowrap; } .aboutBox-6 .nav .item.active { color: #ffffff; background-color: #2a6590; } .aboutBox-6 .box { position: relative; display: none; } .aboutBox-6 .box.active { display: block; } .aboutBox-6 .swiper-container { padding-bottom: 80px; } .aboutBox-6 .swiper-wrapper { align-items: flex-end; } .aboutBox-6 .swiper-pagination { bottom: 0; } .aboutBox-6 .swiper-pagination-bullet { background: none; border: 2px solid #aaaaaa; opacity: 1; } .aboutBox-6 .swiper-pagination-bullet-active { background-color: #aaa; } .aboutBox-6 .back { background-color: #f9f9f9; padding: 10px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1); cursor: pointer; } .aboutBox-6 .listBox .item:nth-child(4n) { margin-right: 0; } .aboutBox-6 .swiper-button-next, .aboutBox-6 .swiper-button-prev { width: 18px; height: 37px; margin-top: -55px; background-size: cover; } .aboutBox-6 .swiper-button-next::after, .aboutBox-6 .swiper-button-prev::after { display: none; } .aboutBox-6 .swiper-button-prev { left: -40px; background-image: url(../images/icon35.png); } .aboutBox-6 .swiper-button-next { right: -40px; background-image: url(../images/icon36.png); } .aboutBox-7 { padding: 95px 0 130px; background-repeat: no-repeat; background-position: 97% 3%; background-size: 50% auto; } .aboutBox-7 .en { position: relative; font-size: 72px; color: #efefef; line-height: 1; margin-bottom: 60px; } .aboutBox-7 .cn { position: absolute; left: 5px; bottom: 10px; font-size: 30px; color: #000000; font-weight: bold; } .aboutBox-7 .item { display: flex; flex-wrap: wrap; padding: 40px 0; border-bottom: 1px solid #ebebeb; } .aboutBox-7 .img { width: 440px; } .aboutBox-7 .textBox { width: calc(100% - 440px); padding: 15px 0 15px 60px; } .aboutBox-7 .h1 { display: flex; flex-wrap: wrap; font-size: 18px; color: #1a1b1b; line-height: 36px; padding-bottom: 10px; border-bottom: 1px solid #dbdbdb; margin-bottom: 30px; } .aboutBox-7 .name { font-size: 24px; color: #2a6590; margin-right: 23px; } .aboutBox-7 .h2 { font-size: 18px; line-height: 36px; color: #666666; text-align: justify; /* overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; */ } .popupImg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 12; display: none; } .popupImg .wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; } .popupImg .swiper-container { max-width: 700px; width: 100%; padding-bottom: 59px; } .popupImg .swiper-button-next, .popupImg .swiper-button-prev { color: #fff; } .popupImg .close { position: absolute; top: 5%; right: 5%; width: 30px; height: 30px; border: 1px solid #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; } .popupImg .close img { width: 16px; } .popupImg .swiper-pagination { bottom: 0; right: 0; color: #fff; text-align: right; padding: 20px 30px; background-color: #405aa8; } /* 濯掍綋鏌ヨ */ /* 鍏充簬鎴戜滑 */ @media only screen and (max-width: 1600px) { .aboutBox-1 .en { font-size: 50px; margin-bottom: 50px; } .aboutBox-1 .cn { left: 0; bottom: 5px; font-size: 20px; } .aboutBox-1 .text { font-size: 14px; line-height: 30px; } .aboutBox-1 .tips { font-size: 16px; } .aboutBox-1 .h1 { font-size: 18px; margin-bottom: 20px; } .aboutBox-1 .number { font-size: 30px; } .aboutBox-1 .h2 { font-size: 14px; line-height: 30px; } .aboutBox-2 .en { font-size: 50px; margin-bottom: 50px; } .aboutBox-2 .cn { left: 0; bottom: 5px; font-size: 20px; } .aboutBox-3 .en { font-size: 50px; margin-bottom: 50px; } .aboutBox-3 .cn { left: 0; bottom: 5px; font-size: 20px; } .aboutBox-4 .en { font-size: 50px; margin-bottom: 50px; } .aboutBox-4 .cn { left: 0; bottom: 5px; font-size: 20px; } .aboutBox-5 .en { font-size: 50px; margin-bottom: 50px; } .aboutBox-5 .cn { left: 0; bottom: 5px; font-size: 20px; } .aboutBox-5 .h1 { font-size: 16px; } .aboutBox-5 .h2 { font-size: 14px; } .aboutBox-4 .btnMore { font-size: 14px; line-height: 30px; } .aboutBox-4 .btnMore .icon { width: 30px; } .aboutBox-5 .icon { width: 60px; } .aboutBox-5 .text { width: calc(100% - 60px); padding-left: 15px; } .aboutBox-6 .en { font-size: 50px; margin-bottom: 50px; } .aboutBox-6 .cn { left: 0; bottom: 5px; font-size: 20px; } .aboutBox-6 .nav .item { min-width: 110px; height: 40px; font-size: 16px; line-height: 40px; margin: 0 20px; } .aboutBox-7 .en { font-size: 50px; margin-bottom: 40px; } .aboutBox-7 .cn { left: 0; bottom: 5px; font-size: 20px; } .aboutBox-7 .item { padding: 25px 0; } .aboutBox-7 .img { width: 360px; } .aboutBox-7 .textBox { width: calc(100% - 360px); padding: 10px 0 10px 40px; } .aboutBox-7 .h1 { font-size: 16px; line-height: 30px; } .aboutBox-7 .name { font-size: 20px; margin-right: 15px; } .aboutBox-7 .h2 { font-size: 14px; line-height: 30px; } } @media only screen and (max-width: 1024px) { .aboutBox-1 .topBox { justify-content: center; } .aboutBox-1 .textBox { width: 100%; } .aboutBox-1 .swiperBox { width: 50%; margin-top: 50px; } .aboutBox-1 .listBox { margin-top: 70px; } .aboutBox-3 .swiper-button-prev { left: 0; } .aboutBox-3 .swiper-button-next { right: 0; } .aboutBox-5 .listBox { width: 100%; margin-bottom: 30px; } .aboutBox-5 .mapBox { width: 100%; } .aboutBox-6 .swiper-container { padding-bottom: 40px; } } @media only screen and (max-width: 768px) { .aboutBox-1 { padding: 90px 0 60px; } .aboutBox-1 .item { max-width: 50%; width: 100%; margin-bottom: 30px; } .aboutBox-6 .swiper-button-next, .aboutBox-6 .swiper-button-prev { width: 12px; height: 24px; margin-top: -45px; } .aboutBox-6 .swiper-button-prev { left: -20px; } .aboutBox-6 .swiper-button-next { right: -20px; } .aboutBox-7 .item { padding: 25px 0 15px; } .aboutBox-7 .img { width: 100%; text-align: center; } .aboutBox-7 .textBox { width: 100%; padding: 15px 0 0; } .aboutBox-7 .h1 { margin-bottom: 15px; } } @media only screen and (max-width: 580px) { .aboutBox-1 { padding: 60px 0; } .aboutBox-1 .en { font-size: 30px; margin-bottom: 20px; } .aboutBox-1 .cn { position: relative; left: auto; bottom: auto; margin-top: 10px; } .aboutBox-2 .en { font-size: 30px; margin-bottom: 30px; } .aboutBox-2 .cn { position: relative; left: auto; bottom: auto; margin-top: 10px; } .aboutBox-3 { padding: 60px 0; } .aboutBox-3 .en { font-size: 30px; margin-bottom: 30px; } .aboutBox-3 .cn { position: relative; left: auto; bottom: auto; margin-top: 10px; } .aboutBox-4 { padding: 60px 0; } .aboutBox-4 .en { font-size: 30px; margin-bottom: 20px; } .aboutBox-4 .cn { position: relative; left: auto; bottom: auto; margin-top: 10px; } .aboutBox-4 .btnBox { margin-top: 40px; } .aboutBox-5 { padding: 60px 0; } .aboutBox-5 .en { font-size: 30px; margin-bottom: 20px; } .aboutBox-5 .cn { position: relative; left: auto; bottom: auto; margin-top: 10px; } .aboutBox-6 .en { font-size: 30px; margin-bottom: 30px; } .aboutBox-6 .cn { position: relative; left: auto; bottom: auto; margin-top: 10px; } .aboutBox-6 { padding: 60px 0; } .aboutBox-6 .nav { justify-content: flex-start; margin-bottom: 30px; overflow-x: auto; } .aboutBox-6 .nav::-webkit-scrollbar { display: none; } .aboutBox-6 .nav .item { min-width: fit-content; } .aboutBox-6 .swiper-button-prev { left: 15px; } .aboutBox-6 .swiper-button-next { right: 15px; } .aboutBox-7 { padding: 60px 0; } .aboutBox-7 .item { padding: 30px 0 15px; } } @media only screen and (max-width: 480px) { .aboutBox-1 { padding: 40px 0 10px; } .aboutBox-1 .text { font-size: 14px; line-height: 24px; } .aboutBox-1 .tips { font-size: 14px; } .aboutBox-1 .swiperBox { width: 80%; margin-top: 30px; } .aboutBox-1 .swiper-pagination-bullet { width: 10px; height: 10px; } .aboutBox-1 .listBox { margin-top: 30px; } .aboutBox-1 .h1 { font-size: 16px; line-height: 30px; margin-bottom: 15px; } .aboutBox-1 .number { font-size: 24px; margin-right: 5px; } .aboutBox-1 .line { width: 30px; } .aboutBox-3 { padding: 40px 0; } .aboutBox-3 .swiper-button-next, .aboutBox-3 .swiper-button-prev { width: 12px; height: 25px; } .aboutBox-4 { padding: 40px 0; } .aboutBox-4 .btnBox { margin-top: 30px; } .aboutBox-5 { padding: 40px 0; } .aboutBox-5 .item { padding: 15px 0; } .aboutBox-5 .icon { width: 50px; } .aboutBox-5 .text { width: calc(100% - 50px); } .aboutBox-5 .h1 { font-size: 14px; line-height: 24px; } .aboutBox-5 .h2 { line-height: 24px; } .aboutBox-6 { padding: 40px 0; } .aboutBox-6 .nav { margin-bottom: 20px; } .aboutBox-6 .nav .item { min-width: fit-content; height: 34px; font-size: 14px; line-height: 34px; margin: 0 10px; border-radius: 17px; } .popupImg .swiper-container { padding-bottom: 39px; } .popupImg .swiper-button-next, .popupImg .swiper-button-prev { margin-top: -55px; } .popupImg .swiper-button-next:after, .popupImg .swiper-button-prev:after { font-size: 24px; } .popupImg .swiper-pagination { bottom: 39px; padding: 10px 20px; } .aboutBox-7 { padding: 40px 0; } .aboutBox-7 .en { font-size: 30px; margin-bottom: 10px; } .aboutBox-7 .cn { position: relative; left: auto; bottom: auto; margin-top: 10px; } .aboutBox-7 .h1 { font-size: 14px; line-height: 24px; margin-bottom: 15px; } .aboutBox-7 .name { font-size: 16px; margin-bottom: 5px; } } /*鎼滅储缁撴灉*/ .xsousuo { padding-top: 90px; padding-bottom: 80px; } .xsousuo .conwidth {} .xsousuo .xssbox { padding-top: 85px; padding-left: 4%; padding-right: 4%; padding-bottom: 80px; background-color: #FFFFFF; } .xssbox .title { font-family: sy-Regular; color: #000000; font-size: 28px; padding-bottom: 35px; border-bottom: #e8e8e8 solid 1px; } .xssbox .title .t1 { color: #148fee; } .xsdiv {} .xsdiv ul li { width: 100%; padding-top: 30px; padding-bottom: 30px; border-bottom: #eae5e5 solid 1px; } .xsdiv ul li a { display: inline-block; width: 100%; } .xsousuo .l-wrap { float: left; width: 150px; } .xsousuo .l-wrap img { width: 100%; } .xsousuo .r-wrap { float: left; width: -moz-calc(100% - 150px); width: -webkit-calc(100% - 150px); width: calc(100% - 150px); padding-left: 30px; box-sizing: border-box; } .xsdiv ul li a .xtop { margin-bottom: 10px; overflow: hidden; color: #222222; font-size: 20px; margin-right: 30px; margin-bottom: 5px; } .xsdiv ul li a:hover .xtop { color: #148fee; } .xsdiv ul li a .xmid { color: #999999; font-size: 14px; line-height: 24px; margin-bottom: 15px; word-break: break-all; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .xsdiv ul li a .time { color: #444444; font-size: 16px; } @media screen and (max-width: 1440px) { .xssbox .title { font-size: 26px; } } @media screen and (max-width: 1024px) { .xsousuo { padding-bottom: 70px; } .xsousuo .xssbox { padding-top: 30px; padding-bottom: 50px; padding-left: 0; padding-right: 0; } .xssbox .title { font-size: 24px; } } @media screen and (max-width: 768px) { .xsousuo { padding-bottom: 60px; } .xsousuo .xssbox { padding-top: 20px; padding-bottom: 40px; } .xssbox .title { font-size: 20px; padding-bottom: 25px; } .xsdiv ul li { padding: 25px 0px; } } @media screen and (max-width: 640px) { .xsousuo .xssbox { padding-top: 0px; padding-bottom: 30px; } .xssbox .title { font-size: 18px; padding-bottom: 20px; } .xsdiv ul li { padding: 20px 0px; } .xsdiv ul li a .xtop { font-size: 18px; } .xsdiv ul li a .time { font-size: 15px; } } @media screen and (max-width: 576px) { .xsousuo .xssbox { padding-top: 0; } .xsousuo .l-wrap { width: 100px; } .xsousuo .r-wrap { padding-left: 20px; width: -webkit-calc(100% - 100px); width: calc(100% - 100px); } .xsdiv ul li a .xtop { font-size: 17px; } .xsdiv ul li a .xmid { margin-bottom: 10px; } .xsdiv ul li a .time { font-size: 14px; } }