.ellipsis-01 { overflow: hidden; white-space: nowrap; display: block; text-overflow: ellipsis; } .ellipsis-02 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .ellipsis-03 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .ellipsis-04 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } @media screen and (min-width: 320px) { .swiper-banner .banner-bg { width: 100%; height: 100vh; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; justify-content: center; } .swiper-banner .banner-bg::before { content: ' '; background: rgba(0, 0, 0, 0.7); position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .banner-txt { color: #fff; font-weight: bold; font-size: 18px; text-align: center; z-index: 2; position: relative; } .banner-txt.txt-split-on span { opacity: 0; font-weight: normal; padding: 0 3px; } .banner-txt.txt-split-on .txt-show { opacity: 0; } .banner-bg .txt-show { animation: txt-show 2s; animation-fill-mode: both; animation-delay: 0s; } } @keyframes txt-show { from { opacity: 0; color: #E72229; } 40% { opacity: 1; color: #fff; } to { opacity: 1; color: #fff; } } @media screen and (min-width: 992px) { .banner-txt { font-size: 36px; } .banner-txt.txt-split-on span { padding: 0 7px; } } @media screen and (min-width: 1240px) { .banner-txt { font-size: 48px; } } @media screen and (min-width: 1440px) { .banner-txt { font-size: 50px; } } @media screen and (min-width: 320px) { .ind-box-02 { position: relative; height: 400vh; width: 100%; } .ind-box-02 .clip-box { position: relative; width: 100%; height: 100vh; overflow: hidden; } .ind-box-02 .bg { background-image: url(../img/ind-bg-02.jpg); background-size: cover; background-position: center; height: 100%; width: 100%; position: relative; } .ind-box-02 .bg .box { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; flex-direction: column; } .ind-box-02 .bg .box .txt { color: #fff; padding-bottom: 20px; font-size: 18px; } .ind-box-02 .bg .shade { background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; } .ind-box-02 .clip { background-image: url(../img/ind-bg-02-mask.png); background-size: cover; background-position: center; height: 100%; position: absolute; left: 0; top: 0; width: 100%; z-index: 2; display: flex; align-items: center; justify-content: center; } .ind-box-02 .clip .txt { padding-top: 65vw; color: #333; font-size: 18px; } .btn-box { display: flex; justify-content: center; } .btn-box a { padding: 0 30px; height: 36px; border: 1px solid #fff; border-radius: 30px; display: inline-flex; align-items: center; justify-content: center; } .btn-box span { color: #fff; } .btn-box i { padding-left: 5px; } .btn-box i, .btn-box i::before { color: #fff; font-size: 12px; line-height: 1; } .btn-box a:hover { background: #E72229; border-color: #E72229; } .btn-box a:hover span, .btn-box a:hover i::before { color: #fff; } .btn-box-02 a { border-color: #CCCCCC; } .btn-box-02 span { color: #000; } .btn-box-02 i, .btn-box-02 i::before { color: #E72229; } .btn-box-03 a { border-color: #E72229; background: #E72229; } .btn-box-03 span { color: #fff; } .btn-box-03 i, .btn-box-03 i::before { color: #E72229; } .ind-box-02 .clip .txt .e-anim-on { animation: clip-txt-anim-on .3s; animation-fill-mode: both; } .ind-box-02 .clip .txt .e-anim-off { animation: clip-txt-anim-off .3s; animation-fill-mode: both; } .ind-box-02 .bg .txt.e-anim-on { animation: bg-txt-anim-on .3s; animation-fill-mode: both; } .ind-box-02 .bg .txt.e-anim-off { animation: bg-txt-anim-off .3s; animation-fill-mode: both; } .ind-box-02 .bg .btn-box-hide.e-anim-on { animation: bg-txt-anim-on .3s; animation-fill-mode: both; animation-delay: .3s; } .ind-box-02 .bg .btn-box-hide.e-anim-off { animation: bg-txt-anim-off .3s; animation-fill-mode: both; } } @keyframes clip-txt-anim-on { from { opacity: 0; } to { opacity: 1; } } @keyframes clip-txt-anim-off { from { opacity: 1; } to { opacity: 0; } } @keyframes bg-txt-anim-on { from { opacity: 0; transform: translateY(10%); } to { opacity: 1; transform: translateY(0); } } @keyframes bg-txt-anim-off { from { opacity: 1; } to { opacity: 0; } } @media screen and (min-width: 992px) { .ind-box-02 { height: 600vh; } .ind-box-02 .bg .box .txt { padding-bottom: 70px; font-size: 52px; } .ind-box-02 .clip .txt { padding-top: 0; margin-top: 50vh; font-size: 24px; transform: translateY(-50%); } .btn-box a { padding: 0 40px; height: 48px; } .btn-box span { font-size: 14px; } .btn-box i, .btn-box i::before { font-size: 14px; } } @media screen and (min-width: 1240px) { .ind-box-02 .bg .box .txt { padding-bottom: 90px; font-size: 64px; } .ind-box-02 .clip .txt { font-size: 30px; } } @media screen and (min-width: 1440px) { .ind-box-02 .bg .box .txt { padding-bottom: 110px; font-size: 80px; } .ind-box-02 .clip .txt { font-size: 38px; } .btn-box a { padding: 0 50px; height: 60px; } .btn-box span { font-size: 16px; } .btn-box i, .btn-box i::before { font-size: 16px; } } @media screen and (min-width: 320px) { .ind-pt { padding-top: 55px; } .ind-pb { padding-bottom: 55px; } .ind-box { height: 100vh; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; position: relative; } .ind-box .ind-box-tit { text-align: center; font-size: 18px; letter-spacing: 3px; } i.pic-scale-case { padding-bottom: 120%; } .ind-box-03 { background-image: url(../img/ind-bg-03.jpg); } .ind-box-03 .swiper-case-bd { padding: 30px 0; position: relative; } .ind-box-03 .swiper-case-bd .pic { position: relative; } .ind-box-03 .swiper-case-bd .pic::before { content: ' '; position: absolute; z-index: 2; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); } .ind-box-03 .swiper-case-bd .pic .txt { position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; color: #fff; z-index: 2; padding: 10px; font-size: 18px; } .ind-box-03 .swiper-case-prev, .ind-box-03 .swiper-case-next { position: absolute; top: 50%; margin-top: -25px; z-index: 2; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); cursor: pointer; transition: .3s; } .ind-box-03 .swiper-case-prev i, .ind-box-03 .swiper-case-prev i::before, .ind-box-03 .swiper-case-next i, .ind-box-03 .swiper-case-next i::before { font-size: 18px; color: #E72229; } .ind-box-03 .swiper-case-prev { left: 5px; } .ind-box-03 .swiper-case-next { right: 5px; } .ind-box-03 .swiper-case-prev:hover, .ind-box-03 .swiper-case-next:hover { background: #E72229; } .ind-box-03 .swiper-case-prev:hover i, .ind-box-03 .swiper-case-prev:hover i::before, .ind-box-03 .swiper-case-next:hover i, .ind-box-03 .swiper-case-next:hover i::before { color: #fff; } } @media screen and (min-width: 992px) { .ind-pt { padding-top: 80px; } .ind-pb { padding-bottom: 80px; } .ind-box .ind-box-tit { font-size: 24px; letter-spacing: 5px; } .ind-box .container { position: relative; z-index: 3; } .ind-box-03 .swiper-case-bd { padding: 45px 0; } .ind-box-03 .swiper-case-bd .pic .txt { padding: 30px 20px; font-size: 24px; } .ind-box-03 .swiper-case-prev i, .ind-box-03 .swiper-case-prev i::before, .ind-box-03 .swiper-case-next i, .ind-box-03 .swiper-case-next i::before { font-size: 24px; } } @media screen and (min-width: 1240px) { .ind-pt { padding-top: 100px; } .ind-pb { padding-bottom: 100px; } .ind-box-03 .swiper-case-bd { padding: 60px 0; } .ind-box-03 .swiper-case-prev, .ind-box-03 .swiper-case-next { margin-top: -35px; width: 70px; height: 70px; } .ind-box-03 .swiper-case-prev { left: 5px; } .ind-box-03 .swiper-case-next { right: 5px; } } @media screen and (min-width: 1780px) { .ind-box-03 .swiper-case-prev { left: -90px; } .ind-box-03 .swiper-case-next { right: -90px; } } @media screen and (min-width: 320px) { i.pic-scale-news { padding-bottom: 58.824%; } .ind-box-04 { height: auto; padding: 10vh 0; background-image: url(../img/ind-bg-04.jpg); } .ind-box-04 .module { padding: 30px 0; margin: -15px; } .ind-box-04 .module .item { padding: 15px; } .ind-box-04 .module .item .box { box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); border-radius: 10px; overflow: hidden; background: #fff; } .ind-box-04 .module .item .box dl dd { padding: 15px; height: 160px; display: flex; flex-direction: column; justify-content: space-between; } .ind-box-04 .module .item .box .time { color: #AAAAAA; font-size: 12px; margin-bottom: 5px; } .ind-box-04 .module .item .box .tit { font-size: 14px; color: #000000; } .ind-box-04 .module .item .box .more { display: flex; align-items: center; } .ind-box-04 .module .item .box .more span { font-size: 14px; color: #E72229; padding-right: 5px; } .ind-box-04 .module .item .box .more i, .ind-box-04 .module .item .box .more i::before { line-height: 1; font-size: 12px; color: #E72229; } .ind-box-04 .module .item .box .list { padding: 15px; margin: -15px 0; } .ind-box-04 .module .item .box .list li { padding: 15px 0; border-bottom: 1px solid #E2E7F1; } .ind-box-04 .module .item .box .list li:nth-last-child(1) { border: none; } .ind-box-04 .module .item a:hover .tit { color: #000000; color: #E72229; text-decoration: underline; } } @media screen and (min-width: 992px) { .ind-box-04 { height: 100vh; padding: 80px 0 0 0; } .ind-box-04 .module { padding: 45px 0; margin: -15px; display: flex; } .ind-box-04 .module .item { flex: 1; padding: 15px; min-width: 0; } .ind-box-04 .module .item .box { border-radius: 20px; } .ind-box-04 .module .item .box dl dd { padding: 15px; height: 149px; } .ind-box-04 .module .item .box .tit { font-size: 16px; } .ind-box-04 .module .item .box .more span { font-size: 16px; } .ind-box-04 .module .item .box .list { padding: 15px; margin: -15px 0; } .ind-box-04 .module .item .box .list li { padding: 15px 0; } } @media screen and (min-width: 1240px) { .ind-box-04 { padding: 100px 0 0 0; } .ind-box-04 .module { padding: 60px 0; margin: -18px; } .ind-box-04 .module .item { padding: 18px; } .ind-box-04 .module .item .box dl dd { padding: 30px 20px; height: 229px; } .ind-box-04 .module .item .box .time { font-size: 14px; } .ind-box-04 .module .item .box .tit { font-size: 18px; } .ind-box-04 .module .item .box .list { padding: 30px 20px; margin: -30px 0; } .ind-box-04 .module .item .box .list li { padding: 30px 0; } } @media screen and (min-width: 320px) { .ind-box-05 { height: auto; background-image: url(../img/ind-bg-05.jpg); } .ind-box-05::before { content: ' '; position: absolute; background: rgba(0, 0, 0, 0.8); left: 0; top: 0; right: 0; bottom: 0; } .ind-box-05 .ind-box-tit { color: #fff; } .message { position: relative; z-index: 2; padding: 30px 0 55px 0; margin: -10px; } .message .col { padding: 10px; display: flex; align-items: center; } .message .inp::-webkit-input-placeholder, .message .text::-webkit-input-placeholder { color: #fff; } .message .inp, .message .text { width: 100%; border: 1px solid #6f6f6f; background: rgba(0, 0, 0, 0.5); border-radius: 10px; height: 48px; padding: 0 15px; color: #fff; } .message .text { padding: 10px 15px; height: 110px; } .message .btn { height: 48px; border-radius: 30px; border: none; padding: 0 30px; margin: 0 auto; background: #E72229; color: #fff; cursor: pointer; } } @media screen and (min-width: 992px) { .ind-box-05 .ind-box-tit { color: #fff; } .message { display: flex; flex-wrap: wrap; margin: -15px; padding: 45px 0 80px 0; } .message .col { padding: 15px; flex-basis: 100%; flex-shrink: 0; } .message .col-06 { flex-basis: 50%; flex-shrink: 0; } .message .inp { height: 60px; font-size: 16px; } .message .text { font-size: 16px; } .message .btn { height: 60px; padding: 0 60px; font-size: 18px; } } @media screen and (min-width: 1240px) { .message { padding: 60px 0 80px 0; } } @media screen and (min-width: 320px) { .footer-bg { background: #515151; padding: 30px 0; } .footer-bg .l { text-align: center; } .footer-bg .l .f-logo { height: 35px; filter: contrast(0%) brightness(1000%); } .footer-bg .l .f-logo img { height: 100%; } .footer-bg .l .cont-list { padding-top: 20px; margin: -5px 0; } .footer-bg .l .cont-list li { padding: 5px 0; color: #fff; } .footer-bg .l .cont-list li i { padding-right: 5px; } .footer-bg .l .cont-list li i, .footer-bg .l .cont-list li i::before { line-height: 1; font-size: 16px; } .footer-bg .l .cont-list li span { font-size: 14px; } .footer-bg .c { display: none; } .footer-bg .r { padding-top: 20px; display: flex; justify-content: center; } .footer-bg .r dl { border-radius: 4px; width: 120px; overflow: hidden; } .footer-bg .r dl dt img { width: 100%; } .footer-bg .r dl dd { color: #fff; background: #333; height: 40px; display: flex; align-items: center; justify-content: center; } .footer-b { background: #444444; } .footer-b { text-align: center; color: #939393; padding: 10px 0; } .footer-b a { color: #939393; } .footer-b a:hover { color: #E72229; } } @media screen and (min-width: 992px) { .footer-bg { padding: 45px 0; } .footer-bg .flex-box { display: flex; } .footer-bg .l { text-align: left; } .footer-bg .l .f-logo { height: 52px; } .footer-bg .l .cont-list { padding-top: 30px; width:400px; } .footer-bg .l .cont-list li i { padding-right: 8px; } .footer-bg .c { display: block; padding: 0 50px; flex: 1; } .footer-bg .c .menu-list { display: flex; justify-content: space-between; } .footer-bg .c .menu-list dl a { color: #fff; } .footer-bg .c .menu-list dl a:hover { color: #E72229; } .footer-bg .c .menu-list dl dt { padding-bottom: 10px; } .footer-bg .c .menu-list dl dt a { font-size: 16px; } .footer-bg .c .menu-list dl dd span { display: block; padding: 5px 0; } .footer-bg .c .menu-list dl dd span a { font-size: 14px; } .footer-bg .r { padding-top: 0; } .footer-b { padding: 15px 0; } } @media screen and (min-width: 1240px) { .footer-bg { padding: 60px 0; } .footer-bg .l .f-logo { height: 66px; } .footer-bg .l .cont-list { padding-top: 45px; } .footer-bg .c { padding: 0 80px; } .footer-bg .c .menu-list dl dt { padding-bottom: 10px; } .footer-bg .c .menu-list dl dt a { line-height: 1.2; font-size: 20px; } .footer-bg .c .menu-list dl dd span a { font-size: 16px; } .footer-bg .r { padding-top: 0; } } @media screen and (min-width: 1440px) { .footer-bg { padding: 60px 0; } .footer-bg .l .f-logo { height: 66px; } .footer-bg .l .cont-list { padding-top: 65px; } .footer-bg .l .cont-list li span { font-size: 16px; } .footer-bg .c { padding: 0 120px; } .footer-bg .c .menu-list dl dt { padding-bottom: 18px; } .footer-bg .c .menu-list dl dt a { font-size: 24px; } .footer-bg .c .menu-list dl dd span a { font-size: 16px; } .footer-bg .r { padding-top: 0; } } @media screen and (min-width: 320px) { .to-top { display: none; } .cy-logo img{max-width:100%;} .cy-logo{width:189px;margin-top:20px;} } @media screen and (min-width: 992px) { .to-top { display: block; width: 60px; height: 60px; border-radius: 10px; background: #E72229; display: flex; align-items: center; justify-content: center; position: fixed; right: 40px; bottom: -70px; z-index: 9; transition: .3s; cursor: pointer; opacity: 0; } .to-top i, .to-top i::before { line-height: 1; color: #fff; font-size: 20px; } .to-top:hover { box-shadow: 0 5px 10px rgba(231, 34, 41, 0.2); } .to-top:hover i { transform: translateY(-5px); } .to-top-show { bottom: 100px; opacity: 1; } } @media screen and (min-width: 320px) { .swiper-gywm-banner .banner-bg { width: 100%; height: 100vh; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; justify-content: center; padding-top: 55px; } .swiper-gywm-banner .banner-bg::before { content: ' '; background: rgba(0, 0, 0, 0.7); position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .gywm-banner-btn { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; cursor: pointer; } .gywm-banner-btn img { width: 86px; } .gywm-banner-btn span { padding-top: 10px; display: block; color: #fff; line-height: 1.6; font-size: 18px; text-align: center; } .scroll-btn { position: absolute; left: 50%; bottom: 0; } .scroll-btn .flex-box { display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); } .scroll-btn .flex-box span { color: #fff; font-size: 12px; padding-bottom: 5px; display: block; } .scroll-btn .flex-box img { width: 9px; } .gywm-box-01 { height: auto; padding-bottom: 40vw; background-image: url(../img/gywm-bg-01.jpg); } .gywm-box-01 .flex-box { color: #000; } .gywm-box-01 .flex-box .l .tit { font-size: 24px; line-height: 1.2; } .gywm-box-01 .flex-box .l .tit span{font-size:16px;font-weight:blod;} .gywm-box-01 .flex-box .l .line { width: 50px; height: 2px; background: #E72229; margin-top: 10px; } .gywm-box-01 .flex-box .l .txt { margin-top: 20px; font-size: 14px; line-height: 1.8; } .gywm-box-01 .flex-box .l .code { margin-top: 20px; background: #f6f6f6; display: inline-flex; overflow: hidden; border-radius: 6px; } .gywm-box-01 .flex-box .l .code dt { padding: 5px 15px; } .gywm-box-01 .flex-box .l .code dd { padding: 5px 15px; background: #E72229; color: #fff; border-radius: 6px; } .gywm-box-01 .flex-box .r { padding-top: 30px; } .gywm-box-01 .flex-box .r .r-flex-box { display: flex; flex-wrap: wrap; margin: -20px; } .gywm-box-01 .flex-box .r dl { flex-basis: 50%; padding: 20px; position: relative; } .gywm-box-01 .flex-box .r dl dt { display: flex; align-items: flex-end; } .gywm-box-01 .flex-box .r dl dt .num, .gywm-box-01 .flex-box .r dl dt .plus { font-size: 30px; color: #E72229; font-weight: bold; line-height: 1; } .gywm-box-01 .flex-box .r dl dt .plus { padding-right: 3px; } .gywm-box-01 .flex-box .r dl dt .unit { line-height: 1; font-size: 14px; } .gywm-box-01 .flex-box .r dl dd { padding-top: 5px; } .gywm-box-01 .flex-box .r dl:nth-child(n+3)::before { content: ' '; position: absolute; left: 20px; right: 20px; top: 0; height: 1px; background: #dbdbdb; } } @media screen and (min-width: 992px) { .gywm-box-01 .flex-box .l .tit span{font-size:18px;} .swiper-gywm-banner .banner-bg { padding-top: 80px; } .gywm-banner-btn span { font-size: 22px; } .scroll-btn .flex-box span { letter-spacing: 3px; font-size: 14px; } .gywm-box-01 { min-height: 100vh; padding-bottom: 28vw; } .gywm-box-01 .flex-box { display: flex; align-items: flex-start; } .gywm-box-01 .flex-box .l { flex-basis: 62%; flex-shrink: 0; min-width: 0; padding-right: 60px; } .gywm-box-01 .flex-box .l .tit { font-size: 36px; } .gywm-box-01 .flex-box .l .line { width: 50px; height: 2px; background: #E72229; margin-top: 10px; } .gywm-box-01 .flex-box .l .txt { margin-top: 20px; font-size: 14px; } .gywm-box-01 .flex-box .l .code { margin-top: 30px; } .gywm-box-01 .flex-box .l .code dt { padding: 8px 20px; font-size: 16px; } .gywm-box-01 .flex-box .l .code dd { font-size: 16px; padding: 8px 20px; } .gywm-box-01 .flex-box .r { flex-basis: 38%; flex-shrink: 0; padding-top: 0; min-width: 0; } .gywm-box-01 .flex-box .r .r-flex-box { margin: -30px; } .gywm-box-01 .flex-box .r dl { padding: 30px; } .gywm-box-01 .flex-box .r dl dt .num, .gywm-box-01 .flex-box .r dl dt .plus { font-size: 40px; } .gywm-box-01 .flex-box .r dl dt .plus { padding-right: 5px; } .gywm-box-01 .flex-box .r dl dt .unit { line-height: 1; font-size: 17px; } .gywm-box-01 .flex-box .r dl dd { padding-top: 5px; font-size: 16px; } } @media screen and (min-width: 1240px) { .swiper-gywm-banner .banner-bg { padding-top: 100px; } .gywm-banner-btn span { font-size: 24px; } .scroll-btn .flex-box span { letter-spacing: 5px; font-size: 16px; } .gywm-box-01 .flex-box { padding-top: 80px; } .gywm-box-01 .flex-box .l { padding-right: 110px; } .gywm-box-01 .flex-box .l .tit { font-size: 48px; } .gywm-box-01 .flex-box .l .line { margin-top: 25px; } .gywm-box-01 .flex-box .l .txt { margin-top: 50px; font-size: 18px; } /*.gywm-box-01 .flex-box .l .code { margin-top: 45px; }*/ .gywm-box-01 .flex-box .l .code dt { font-size: 18px; } .gywm-box-01 .flex-box .l .code dd { font-size: 18px; padding: 8px 25px; } .gywm-box-01 .flex-box .r .r-flex-box { margin: -35px -30px; } .gywm-box-01 .flex-box .r dl { padding: 35px 30px; } .gywm-box-01 .flex-box .r dl dt .num, .gywm-box-01 .flex-box .r dl dt .plus { font-size: 50px; } .gywm-box-01 .flex-box .r dl dt .unit { line-height: 1; font-size: 20px; } .gywm-box-01 .flex-box .r dl dd { padding-top: 5px; font-size: 18px; } } @media screen and (min-width: 320px) { .box-shade::before { content: ' '; background: rgba(0, 0, 0, 0.7); position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .box-max-height { min-height: 100vh; height: auto; } .gywm-box-02 { color: #fff; text-align: center; } .gywm-box-02 .tit { font-size: 24px; line-height: 1.2; } .gywm-box-02 .txt { padding-top: 30px; font-size: 14px; } .gywm-box-02 .pic { padding-top: 20px; text-align: center; } .gywm-box-02 .pic img { width: 100%; max-width: 1144.6px; } } @media screen and (min-width: 992px) { .gywm-box-02 .tit { font-size: 32px; } .gywm-box-02 .txt { padding-top: 40px; font-size: 16px; } .gywm-box-02 .pic { padding-top: 30px; } } @media screen and (min-width: 320px) { .video-style{position:absolute; width:100%; height:100%; object-fit: cover;} .video-ds{position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,.5)} .gywm-box-tit { text-align: center; font-size: 24px; color: #000; letter-spacing: 5px; } .gywm-box-tit-fff { color: #fff; } i.pic-scale-qywm { padding-bottom: 100%; } .gywm-box-03 { color: #000; } .gywm-box-03 .list { padding-top: 30px; } .gywm-box-03 .list ul { margin: -15px; } .gywm-box-03 .list li { padding: 15px; } .gywm-box-03 .list .box { position: relative; cursor: pointer; } .gywm-box-03 .list .box::before { content: ' '; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 53, 113, 0.5); z-index: 2; } .gywm-box-03 .list .box .mess { position: absolute; left: 0; top: 0; bottom: 0; right: 0; padding: 30px; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 2; color: #fff; } .gywm-box-03 .list .box:hover{ transform: translateY(-20px); } .gywm-box-03 .list .box .mess .icon { width: 60px; margin-bottom: 20px; } .gywm-box-03 .list .box .mess .icon img { width: 100%; } .gywm-box-03 .list .box .mess .tit { font-weight: bold; font-size: 20px; line-height: 1.2; text-align: center; } .gywm-box-03 .list .box .mess .line { width: 50px; height: 2px; background: #fff; margin: 20px 0; } .gywm-box-03 .list .box .mess .txt { font-size: 14px; line-height: 1.5; text-align: center; } } @media screen and (min-width: 992px) { .gywm-box-tit { font-size: 36px; letter-spacing: 10px; } i.pic-scale-qywm { padding-bottom: 122.727%; } .gywm-box-03 { background-image: url(../img/gywm-bg-03.jpg); } .gywm-box-03 .list { padding-top: 60px; } .gywm-box-03 .list ul { margin: -20px; display: flex; } .gywm-box-03 .list li { padding: 20px; flex-basis: 33.333%; flex-shrink: 0; } .gywm-box-03 .list .box .mess .icon { margin-bottom: 30px; } .gywm-box-03 .list .box .mess .tit { font-size: 28px; } .gywm-box-03 .list .box .mess .line { margin: 30px 0; } .gywm-box-03 .list .box .mess .txt { font-size: 16px; height: 80px; } } @media screen and (min-width: 1240px) { .gywm-box-tit { font-size: 48px; letter-spacing: 15px; } .gywm-box-03 .list { padding-top: 80px; } .gywm-box-03 .list .box .mess { padding: 50px 80px; } .gywm-box-03 .list .box .mess .icon { margin-bottom: 40px; } .gywm-box-03 .list .box .mess .tit { font-size: 38px; } .gywm-box-03 .list .box .mess .line { margin: 40px 0; } .gywm-box-03 .list .box .mess .txt { font-size: 18px; height: 100px; } } @media screen and (min-width: 1440px) { .gywm-box-03 .list .box .mess { padding: 50px 90px; } } @media screen and (min-width: 320px) { .gywm-box-04 { background-image: url(../img/gywm-bg-04.jpg); color: #000; } .gywm-box-04 .t { padding-top: 30px; } .gywm-box-04 .honor-pic { width: 100%; padding-bottom: 10px; } .gywm-box-04 .honor-pic img { width: 100%; } .gywm-box-04 .mess { border-radius: 20px; background: #fff; padding: 15px; } .gywm-box-04 .mess .list-01 { margin: -8px -15px; } .gywm-box-04 .mess .list-01 li { padding: 0 15px; } .gywm-box-04 .mess .list-01 li dl { border-bottom: 1px solid #ECECEC; display: flex; align-items: center; padding: 8px 0; text-align: center; } .gywm-box-04 .mess .list-01 li dl dt { width: 18px; height: 18px; background: url(../img/honor-ico.png); background-size: cover; margin-right: 5px; } .gywm-box-04 .mess .list-01 li dl dd { text-align: left; line-height: 24px; } .gywm-box-04 .mess .list-02 { padding-top: 30px; } .gywm-box-04 .mess .list-02 ul { display: flex; flex-wrap: wrap; } .gywm-box-04 .mess .list-02 ul li { flex-basis: 50%; display: flex; align-items: center; justify-content: center; padding: 10px; } .gywm-box-04 .mess .list-02 ul li .pic { width: 70px; } .gywm-box-04 .mess .list-02 ul li .pic img { width: 100%; } .gywm-box-04 .mess .list-02 ul li dl dt { font-size: 20px; } .gywm-box-04 .swiper-honor-bd { margin-top: 30px; position: relative; } .gywm-box-04 .swiper-honor-bd .pic { background: #fff; padding: 15px; } .gywm-box-04 .swiper-honor-bd .swiper-honor-prev, .gywm-box-04 .swiper-honor-bd .swiper-honor-next { position: absolute; top: 50%; margin-top: -25px; z-index: 2; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #54585A; border-radius: 50%; cursor: pointer; transition: .3s; } .gywm-box-04 .swiper-honor-bd .swiper-honor-prev i, .gywm-box-04 .swiper-honor-bd .swiper-honor-prev i::before, .gywm-box-04 .swiper-honor-bd .swiper-honor-next i, .gywm-box-04 .swiper-honor-bd .swiper-honor-next i::before { font-size: 18px; color: #fff; } .gywm-box-04 .swiper-honor-bd .swiper-honor-prev { left: 5px; } .gywm-box-04 .swiper-honor-bd .swiper-honor-next { right: 5px; } .gywm-box-04 .swiper-honor-bd .swiper-honor-prev:hover, .gywm-box-04 .swiper-honor-bd .swiper-honor-next:hover { background: #E72229; } .gywm-box-04 .swiper-honor-bd .swiper-honor-prev:hover i, .gywm-box-04 .swiper-honor-bd .swiper-honor-prev:hover i::before, .gywm-box-04 .swiper-honor-bd .swiper-honor-next:hover i, .gywm-box-04 .swiper-honor-bd .swiper-honor-next:hover i::before { color: #fff; } i.pic-scale-honor { padding-bottom: 76.687%; } } @media screen and (min-width: 992px) { .gywm-box-04 .t { display: flex; padding-top: 60px; } .gywm-box-04 .honor-pic { width: 100%; padding-bottom: 0; padding-right: 10px; width: 460px; } .gywm-box-04 .honor-pic img { width: 100%; } .gywm-box-04 .mess { flex: 1; padding: 40px; height: 400px; } .gywm-box-04 .mess .list-01 { margin: -15px -20px; } .gywm-box-04 .mess .list-01 ul { overflow-y: scroll; height: 220px; } .gywm-box-04 .mess .list-01 ul::-webkit-scrollbar { width: 3px; height: 3px; } .gywm-box-04 .mess .list-01 ul::-webkit-scrollbar-thumb { background-color: #E72229; } .gywm-box-04 .mess .list-01 li { padding: 0 20px; display: flex; } .gywm-box-04 .mess .list-01 li dl { flex: 1; padding: 15px 0; } .gywm-box-04 .mess .list-01 li dl dd { font-size: 16px; line-height: 26px; } .gywm-box-04 .mess .list-02 { padding-top: 40px; } .gywm-box-04 .mess .list-02 ul { display: flex; flex-wrap: wrap; } .gywm-box-04 .mess .list-02 ul li { position: relative; flex-basis: 25%; padding: 10px; } .gywm-box-04 .mess .list-02 ul li::before { content: ' '; position: absolute; right: 0; top: 50%; margin-top: -35px; height: 70px; width: 1px; background: #e2e4e5; } .gywm-box-04 .mess .list-02 ul li:nth-last-child(1)::before { display: none; } .gywm-box-04 .mess .list-02 ul li dl dt { font-size: 26px; } .gywm-box-04 .swiper-honor-bd { margin-top: 45px; } } @media screen and (min-width: 1240px) { .gywm-box-04 .t { padding-top: 80px; } .gywm-box-04 .mess .list-01 { margin: -21px -20px; } .gywm-box-04 .mess .list-01 ul { display: flex; flex-wrap: wrap; } .gywm-box-04 .mess .list-01 li { flex-basis: 50%; padding: 0 20px; } .gywm-box-04 .mess .list-01 li dl { padding: 21px 0; } .gywm-box-04 .mess .list-01 li dl dt { margin-right: 10px; } .gywm-box-04 .mess .list-01 li dl dd { font-size: 18px; line-height: 30px; } .gywm-box-04 .mess .list-02 { padding-top: 50px; } .gywm-box-04 .mess .list-02 ul { display: flex; flex-wrap: wrap; } .gywm-box-04 .mess .list-02 ul li { flex-basis: 25%; padding: 10px; } .gywm-box-04 .mess .list-02 ul li dl dt { font-size: 26px; } .gywm-box-04 .swiper-honor-bd { margin-top: 60px; } .gywm-box-04 .swiper-honor-bd .swiper-honor-prev, .gywm-box-04 .swiper-honor-bd .swiper-honor-next { margin-top: -35px; width: 70px; height: 70px; } } @media screen and (min-width: 1780px) { .gywm-box-04 .swiper-honor-bd .swiper-honor-prev { left: -90px; } .gywm-box-04 .swiper-honor-bd .swiper-honor-next { right: -90px; } } @media screen and (min-width: 320px) { .gywm-box-05 { background-image: url(../img/gywm-bg-05.jpg); color: #fff; text-align: center; } .gywm-box-05 .pic { padding-top: 30px; text-align: center; } .gywm-box-05 .pic img { width: 100%; max-width: 1260px; } } @media screen and (min-width: 992px) { .gywm-box-05 .pic { padding-top: 30px; } } @media screen and (min-width: 1240px) { .gywm-box-05 .pic { padding-top: 80px; } } @media screen and (min-width: 320px) { .banner-min { height: 40vw; background-size: cover; background-position: center; display: flex; align-items: flex-end; } .banner-min .crumbs { padding-bottom: 15px; text-align: right; } .banner-min .crumbs a { color: #fff; } .banner-min .crumbs a:hover { opacity: 0.5; } .banner-min .crumbs span { color: #fff; } .banner-min .crumbs i, .banner-min .crumbs i::before { color: #fff; } } @media screen and (min-width: 992px) { .banner-min { height: 400px; } } @media screen and (min-width: 1240px) { .banner-min { height: 500px; } } @media screen and (min-width: 320px) { i.pic-scale-products { padding-bottom: 64.378%; } .products-bg { background-image: url(../img/ind-bg-03.jpg); background-size: cover; background-position: center; } .products-bg .products-tit { text-align: center; font-size: 18px; color: #333; line-height: 1.2; } .products-bg .list { padding-top: 30px; margin-left: -1px; margin-top: -1px; } .products-bg .list ul { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .products-bg .list ul li { flex-basis: 50%; padding-left: 1px; padding-top: 1px; } .products-bg .list ul li .pic { position: relative; } .products-bg .list ul li .pic::before { content: ' '; position: absolute; z-index: 2; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); } .products-bg .list ul li .pic .txt { position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; color: #fff; z-index: 2; padding: 10px; font-size: 18px; } } @media screen and (min-width: 992px) { .products-bg .products-tit { font-size: 24px; } .products-bg .list { padding-top: 45px; } .products-bg .list ul li { flex-basis: 33.333333%; } .products-bg .list ul li .pic .txt { padding: 30px 20px; font-size: 24px; } } @media screen and (min-width: 1240px) { .products-bg .list { padding-top: 60px; } } @media screen and (min-width: 320px) { .menu-bg { background: #fff; border-bottom: 1px solid #DDD; } .menu-bg .menu ul { display: flex; flex-wrap: wrap; } .menu-bg .menu ul li { flex-basis: 50%; position: relative; } .menu-bg .menu ul li a { display: flex; align-items: center; justify-content: center; position: relative; height: 48px; } .menu-bg .menu ul li a::before { content: ' '; width: 100%; left: 0; bottom: -1px; height: 2px; background: #E72229; position: absolute; opacity: 0; } .menu-bg .menu ul li a.on { color: #E72229; } .menu-bg .menu ul li a.on::before { opacity: 1; } } @media screen and (min-width: 992px) { .menu-bg { background: #fff; border-bottom: 1px solid #DDD; } .menu-bg .menu ul { display: flex; flex-wrap: wrap; justify-content: center; } .menu-bg .menu ul li { max-width: 16.66667%; flex: 1; } .menu-bg .menu ul li::before { content: ' '; width: 1px; top: 50%; height: 20px; margin-top: -10px; position: absolute; background: #ddd; } .menu-bg .menu ul li:nth-child(1)::before { display: none; } .menu-bg .menu ul li a { display: flex; align-items: center; justify-content: center; position: relative; height: 56px; } } @media screen and (min-width: 1240px) { .menu-bg .menu ul li a { height: 77px; font-size: 16px; } } @media screen and (min-width: 320px) { .products-bg-02 { background: #f8f8f8; } .products-bg-02 .list ul { display: flex; flex-wrap: wrap; margin: -10px; } .products-bg-02 .list ul li { flex-basis: 50%; padding: 10px; } .products-bg-02 .list ul li a { background: #fff; display: block; border-radius: 10px; padding: 20px; } .products-bg-02 .list ul li a .tit { margin-top: 20px; font-size: 18px; font-weight: bold; color: #000000; } .products-bg-02 .list ul li a .more { margin-top: 15px; display: flex; align-items: center; } .products-bg-02 .list ul li a .more span { padding-right: 10px; color: #464646; } .products-bg-02 .list ul li a .more i { background: #ccc; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .products-bg-02 .list ul li a .more i::before { color: #fff; } .products-bg-02 .list ul li a:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); margin-top: -10px; } .products-bg-02 .list ul li a:hover .pic { padding-top: 10px; } .products-bg-02 .list ul li a:hover i.iconfont{ background: #E72229; } .products-bg-02 .list ul li a:hover i::before { color: #fff; } } @media screen and (min-width: 992px) { .products-bg-02 .list ul { margin: -20px; } .products-bg-02 .list ul li { flex-basis: 25%; padding: 20px; } .products-bg-02 .list ul li a { border-radius: 20px; } .products-bg-02 .list ul li a .tit { margin-top: 40px; font-size: 24px; } .products-bg-02 .list ul li a .more { margin-top: 30px; } .products-bg-02 .list ul li a .more span { font-size: 16px; } } @media screen and (min-width: 320px) { .pro-info-t { background: #f5f7f9; } .pro-info-t .crumbs { padding: 10px 0; } .pro-info-t .crumbs i, .pro-info-t .crumbs i::before { color: #54585a; } .pro-info-t .crumbs a { color: #54585a; } .pro-info-t .crumbs a:hover { opacity: 0.5; } .pro-info-t .info-box { padding-bottom: 30px; } .pro-info-t .info-box .r { max-width: 280px; margin: 0 auto; } .pro-info-t .info-box .l { padding: 15px 0 0 0; color: #000; } .pro-info-t .info-box .l .tit { font-size: 24px; font-weight: bold; text-align: center; line-height: 1.2; } .pro-info-t .info-box .l .txt { font-size: 18px; text-align: center; line-height: 1.2; } .pro-info-t .info-box .l .line { width: 50px; height: 2px; background: #E72229; margin: 15px auto; } .pro-info-t .info-box .l .btn-box { padding-top: 30px; } .pro-info-t .info-box .l .btn-box a:hover { opacity: 0.6; } .pro-mess-box { padding: 30px 0; } .pro-mess-box .info-box + .info-box { padding-top: 30px; } .pro-mess-box .info-box .tit { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #E5E6E6; display: flex; align-items: center; } .pro-mess-box .info-box .tit i { width: 4px; height: 18px; background: #e72229; border-radius: 2px; margin-right: 5px; } .pro-mess-box .info-box .tit span { line-height: 1.2; color: #000; font-weight: bold; font-size: 18px; } .pro-mess-box .info-box .cont { background: #f8f8f8; padding: 20px; color: #000; } .pro-mess-box .info-box .table-box { overflow-x: auto; } .pro-mess-box .info-box .table-box table { width: 100%; min-width: 480px; } .pro-mess-box .info-box .table-box table thead { height: 50px; background: #E72229; } .pro-mess-box .info-box .table-box table thead th { border: 1px solid #fff; color: #fff; } .pro-mess-box .info-box .table-box table thead th.name { min-width: 140px; } .pro-mess-box .info-box .table-box table tbody tr td { padding: 15px; } .pro-mess-box .info-box .table-box table tbody tr:nth-child(odd) { background: #f8f8f8; } } @media screen and (min-width: 992px) { .pro-info-t .container { position: relative; } .pro-info-t .crumbs { padding: 45px 0; position: absolute; left: 0; top: 0; } .pro-info-t .info-box { padding: 45px 0; display: flex; flex-direction: row-reverse; align-items: center; } .pro-info-t .info-box .r { width: 450px; margin: 0; max-width: none; } .pro-info-t .info-box .l { padding: 0; flex: 1; padding-right: 100px; } .pro-info-t .info-box .l .tit { font-size: 36px; text-align: left; } .pro-info-t .info-box .l .txt { font-size: 22px; text-align: left; } .pro-info-t .info-box .l .line { margin: 20px 0; } .pro-info-t .info-box .l .btn-box { padding-top: 60px; justify-content: flex-start; } .pro-mess-box { padding: 45px 0; } .pro-mess-box .info-box + .info-box { padding-top: 40px; } } @media screen and (min-width: 1240px) { .pro-info-t .info-box { padding: 60px 0; } .pro-info-t .info-box .r { width: 600px; } .pro-info-t .info-box .l .tit { font-size: 42px; } .pro-info-t .info-box .l .txt { font-size: 24px; } .pro-info-t .info-box .l .line { margin: 25px 0; } .pro-info-t .info-box .l .btn-box { padding-top: 90px; } .pro-mess-box { padding: 60px 0; } .pro-mess-box .info-box + .info-box { padding-top: 50px; } .pro-mess-box .info-box .tit i { height: 22px; margin-right: 10px; } .pro-mess-box .info-box .tit span { font-size: 22px; } .pro-mess-box .info-box .cont { padding: 30px; font-size: 16px; } .pro-mess-box .info-box .table-box { overflow-x: auto; } .pro-mess-box .info-box .table-box table thead th { font-size: 16px; } .pro-mess-box .info-box .table-box table tbody tr td { font-size: 16px; padding: 20px 50px; } .pro-mess-box .info-box .table-box table tbody tr:nth-child(odd) { background: #f8f8f8; } } @media screen and (min-width: 320px) { .news-list ul { margin: -10px; } .news-list ul li { padding: 10px; } .news-list .box { box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); border-radius: 10px; overflow: hidden; background: #fff; } .news-list .box dl dd { padding: 15px; height: 160px; display: flex; flex-direction: column; justify-content: space-between; } .news-list .box .time { color: #AAAAAA; font-size: 12px; margin-bottom: 5px; } .news-list .box .tit { font-size: 14px; color: #000000; } .news-list .box .more { display: flex; align-items: center; } .news-list .box .more span { font-size: 14px; color: #E72229; padding-right: 5px; } .news-list .box .more i, .news-list .box .more i::before { line-height: 1; font-size: 12px; color: #E72229; } .news-list .box .list { padding: 15px; margin: -15px 0; } .news-list .box .list li { padding: 15px 0; border-bottom: 1px solid #E2E7F1; } .news-list .box .list li:nth-last-child(1) { border: none; } .news-list a:hover .tit { color: #000000; color: #E72229; text-decoration: underline; } .news-list .layui-flow-more { margin: 0; padding: 10px; flex-basis: 100%; } .news-list .layui-flow-more a { display: block; height: auto; } .news-list .layui-flow-more a cite { display: block; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #F5F5F5; color: #AAAAAA; font-size: 16px; } } @media screen and (min-width: 992px) { .news-list ul { margin: -15px; display: flex; flex-wrap: wrap; } .news-list ul li { padding: 15px; flex-basis: 33.33333%; } .news-list .box { border-radius: 20px; } .news-list .box dl dd { padding: 15px; height: 149px; } .news-list .box .tit { font-size: 16px; } .news-list .box .more span { font-size: 16px; } .news-list .box .list { padding: 15px; margin: -15px 0; } .news-list .box .list li { padding: 15px 0; } .news-list .layui-flow-more { padding: 15px; } } @media screen and (min-width: 1240px) { .news-list ul { margin: -18px; } .news-list ul li { padding: 18px; } .news-list .box dl dd { padding: 30px 20px; height: 229px; } .news-list .box .time { font-size: 14px; } .news-list .box .tit { font-size: 18px; } .news-list .box .list { padding: 30px 20px; margin: -30px 0; } .news-list .box .list li { padding: 30px 0; } .news-list .layui-flow-more { margin: 0; padding: 18px; flex-basis: 100%; } .news-list .layui-flow-more a cite { height: 72px; border-radius: 20px; font-size: 20px; } } @media screen and (min-width: 320px) { .info-bg { background: #fff; padding: 30px 15px; } } @media screen and (min-width: 992px) { .info-bg { padding: 45px 35px; } } @media screen and (min-width: 1240px) { .info-bg { padding: 60px 50px; } } @media screen and (min-width: 320px) { .contact-box + .contact-box { padding-top: 30px; } .contact-tit { text-align: center; font-size: 24px; color: #000; padding-bottom: 20px; line-height: 1.2; } .contact-box .map-box { height: 400px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .contact-box .list { border: 1px solid #ddd; overflow: hidden; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .contact-box .list dl { border-left: 1px solid #ddd; border-top: 1px solid #ddd; margin: -1px 0 0 -1px; padding: 20px; } .contact-box .list dl dt { display: flex; align-items: center; justify-content: center; } .contact-box .list dl dt i { width: 60px; height: 60px; background: #E72229; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .contact-box .list dl dt i::before { color: #fff; font-size: 25px; } .contact-box .list dl dd { text-align: center; } .contact-box .list dl dd .tit { padding-top: 10px; line-height: 1.2; font-size: 18px; color: #00182E; } .contact-box .list dl dd .txt { padding-top: 10px; line-height: 1.2; font-size: 14px; color: #666; } .contact-message { padding-top: 0; } .contact-message .inp, .contact-message .text { border: 1px solid #DDDDDD; background: #F5F5F5; color: #000; } .contact-message .inp::-webkit-input-placeholder, .contact-message .text::-webkit-input-placeholder { color: #000; } } @media screen and (min-width: 992px) { .contact-box + .contact-box { padding-top: 60px; } .contact-tit { font-size: 32px; padding-bottom: 35px; } .contact-box .map-box { border-top-left-radius: 20px; border-top-right-radius: 20px; } .contact-box .list { display: flex; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .contact-box .list dl { flex: 1; padding: 32px; } .contact-box .list dl dd .tit { font-size: 22px; } .contact-box .list dl dd .txt { font-size: 18px; } } @media screen and (min-width: 1240px) { .contact-box + .contact-box { padding-top: 80px; } }