/*banner*/ .about_banner { width: 100%; height: auto; overflow: hidden; display: block; overflow: hidden; } .about_banner img { width: 100%; height: 580px; object-fit: none; } .about_banner_m { display: none; } .about_banner_m img { width: 100%; height: auto; } @media (max-width:575px) { .about_banner { display: none;} .about_banner_m { display: block;} } /*about_bar*/ .about_bar { margin-top: -65px; max-width: 1280px; } .about_bar .bg1 { background: #2db3a9; border-top: #fff 13px solid; border-left: #fff 13px solid; } .about_bar .bg2 { background: #0e75bb; border-top: #fff 13px solid; } .about_bar .bg3 { background: #f49402; border-top: #fff 13px solid; border-right: #fff 13px solid; } .about_bar h3 { width: 100%; line-height: 50px; text-align: center; font-size: 1.625rem; color: #fff;} .about_bar p { color: #fff; padding-left: 20px;} .about_bar p span { width: 30%; height: auto; line-height: 30px; display: inline-block; text-align: center;} @media (max-width:575px) { .about_bar { margin-top: 0; } .about_bar .bg1 ,.about_bar .bg2,.about_bar .bg3 { border: 0;} .about_bar h3 { font-size: 1.375rem; line-height:40px; } .about_bar p { padding-left: 0; } } /*about*/ .st_about { margin-top: 0; background: #f5f5f5; height: auto; padding: 30px 0 60px 0; } .st_about .header { max-width: 1280px; margin: auto; height: 90px; line-height: 90px;border-bottom: #2db3a9 2px solid; margin-bottom: 75px; overflow: hidden; } .st_about .header h1 { width: auto; height: 90px; line-height: 90px;font-size: 2.6rem; background: url(../images/about/title_bg.png) left top no-repeat ; font-weight: 600; padding-left: 15px; } .st_about .header h1 span.bnav { font-size: 1rem; font-weight: normal;} .st_about .header h1 span.bnav i { margin-left: 10px; margin-right: 10px; } .st_about .box { max-width: 1280px; margin: auto; } .st_about .about_video { width: 525px; height: 350px; overflow: hidden; border-radius: 10px; } .st_about .about_video img { width: 100%; height: auto;} .st_about .about_video video { width: 100%; height: 100%; object-fit:cover; } .st_about .about_content { width: 100%; height: auto; } .st_about .about_content h3 { font-size: 2.6rem; margin-top: 10px; } .st_about .about_content h4 { font-size: 1.125rem; color: #999; } .st_about .about_content p { font-size: 1rem; color: #3b3b3b; margin-top: 40px; } /* .st_about .about_content a.btn { width: 165px; height: 44px; background: #2db3a9; color: #fff; text-align: center; border-radius: 50px; font-size: 16px; display: inline-block; } .st_about .about_content a.btn:hover { background: #d8a62f; color: #fff; } */ .st_about .about_content a.btn { width: 165px; height: 44px; line-height: 18px; background: #2db3a9; color: #fff; text-align: center; border-radius: 50px; font-size: 16px; display: inline-block; padding-left: 30px; padding-right: 30px; } .st_about .about_content a.btn:hover { background: #ff7e00; color: #fff; box-shadow: 0 0 5px #f60; } .st_about .about_content a.btn i { font-size: 1.375rem; transition: all 0.5s; } .st_about .about_content a.btn:hover i { padding-left: 20px; } @media (max-width:575px) { .st_about .about_video { width: 100%; height: auto; } .st_about .about_content h3 { font-size: 1.375rem; } .st_about .about_content h4 { font-size: 1rem; font-weight: normal; } .st_about .about_content p { font-size: 0.95rem; line-height: 24px; margin-top: 20px; } .st_about .header h1 { font-size: 1.6rem;} .st_about .about_content img { margin-top: 15px; width: 12%; height: auto; } .st_about .header h1 span.bnav { display: none; } } /*vs*/ .about_vs { margin-top: 45px; background: #fff; height: auto; padding: 30px 0 60px 0; } .about_vs .header { max-width: 1280px; margin: auto; height: 90px; line-height: 90px; margin-bottom: 55px; overflow: hidden; } .about_vs .header h2 { color: #5b5b5b ; margin: auto; text-align: center; } .about_vs .header h2 span { color: #2db3a9 ; } .about_vs .box { width: 100%; height: auto; overflow-x: auto; } .about_vs .box table { width: 1262px; height: 671px; margin: auto; background: url(../images/about/table_bg.png) left top no-repeat ; transition: all 1s; } .about_vs .box table:hover { background: url(../images/about/table_bg2.png) left top no-repeat ; } .about_vs .box table td { color: #5b5b5b;} .about_vs .box table tr th { height: 70px; line-height: 70px; color: #fff; font-size: 1.5rem; overflow: hidden; } .about_vs .box table tr th.th1 { width: 20%; text-align: center; } .about_vs .box table tr th.th2{ width: 35%; text-align: center; padding-left: 60px; } .about_vs .box table tr th.th3 { width: 35%; text-align: center; } .about_vs .box table tr th.th3 span { display: inline-block; position:absolute; margin-top: -25px; margin-left: -60px; } .about_vs .box table tr td:first-child { text-align: center; font-weight: 600; } .about_vs .box table tr td:nth-child(2) { padding-left: 30px; padding-right: 30px; } .about_vs .box table tr td:nth-child(3) { padding-left: 30px; padding-right: 30px; } .about_vs .box table tr td img { margin-right: 5px;} /* .about_vs .box table tr td:nth-child(2):hover img { transform: scale(1.2); } */ .about_vs .box table tr:last-child td { height: 130px; } .about_vs .box table tr:nth-child(6) { padding-top: 20px; } .about_vs .more { width: 100%; height: 50px; line-height: 50px; text-align: center; margin-top: 30px; margin-top: 50px; } .about_vs .more a { width: auto; height: 50px; line-height: 30px; background: #f49402; color: #fff; text-align: center; border-radius: 50px; font-size: 16px; display: inline-block; padding-left: 30px; padding-right: 30px; } .about_vs .more a:hover { background: #ff7e00; color: #fff; box-shadow: 0 0 5px #f60; } .about_vs .more a i { font-size: 1.375rem; transition: all 0.5s; } .about_vs .more a:hover i { padding-right: 20px; } @media (max-width:575px) { .about_vs { margin-top: 25px; } .about_vs .header { width: 100%; height: auto; } .about_vs .header h2 { font-size: 1.6rem; font-weight: 600; } .about_vs .header h2 span, .about_vs .header h1 strong { width: 100%; text-align: center; display: block; } .about_vs .box table tr th.th3 span { display: inline-block; position:unset; margin-top: 10px; margin-left: 20px; } .about_vs .box { width: 100%; height: auto; overflow-x:auto; } } /*youshi*/ .st_youshi { background: url(../images/index/st_youshi_bg.jpg) center top no-repeat; height: 579px; padding: 60px 0 60px 0; } .st_youshi .header h2 { font-size: 2.6rem; color: #fff;} .st_youshi .box { margin: auto; margin-top: 60px; max-width: 1260px; } .st_youshi .box .box_list { width: 100%; margin:20px auto; text-align: center; } .st_youshi .box .box_list .img { width: 160px; height: 160px; border-radius: 50%; line-height: 160px; border:#00ffda 2px solid; margin:0 auto; transition: all 0.3s; } .st_youshi .box .box_list h4 { font-size:1.375rem ; color: #fff; margin-top: 20px; transition: all 0.3s; } .st_youshi .box .box_list p { font-size:1rem ; color: #fff; width: 100%; text-align: left; padding-left: 16%; } .st_youshi .box .box_list:hover .img { margin-top: -20px; } .st_youshi .box .box_list:hover h4 { margin-top: 50px; } /* backface-visibility: hidden; */ /* .st_youshi .box .box_list .img img { position: absolute; top: 40px; margin-left: -60px; transition: transform ease 1s; } .st_youshi .box .box_list .img img:last-child { z-index: 1; backface-visibility: hidden; } */ /* .st_youshi .box .box_list .img:hover img:last-child { transform: rotateY(180deg); } */ /* .st_youshi .box .box_list .img:hover { border:#fff 2px solid; } */ /* .st_youshi .box .box_list:hover h4,.st_youshi .box .box_list:hover p { color:#d1db3a; } */ @media (max-width:575px) { .st_youshi { height: auto; background: url(../images/index/st_youshi_bg2.jpg) center top no-repeat; } .st_youshi .header { width: 80%; margin: auto;} .st_youshi .header h2 { font-size: 1.6rem; font-weight: 600; } .st_youshi .box { margin-top: 40px; width: 100%; } .st_youshi .box .box_list h4 { font-size:1.125rem ; } .st_youshi .box .box_list p { font-size:0.95rem ; padding-left: 0; text-align: center; } } /*team*/ .st_team { margin-top: 65px; max-width: 1280px; height: 1000px; padding-bottom: 60px; } .st_team .header h4 { font-size: 1.125rem; color: #8b8b8b; margin-top: 20px; } .st_team .header h2 { font-size: 2.6rem; color: #3b3b3b; } .st_team .header p { width: auto; height: 8px; display: inline-block; } .st_team .box { margin-top: 20px; width: 100%; height: 500px; } .st_team .box .fathers { width: 100%; margin-top: 60px; position: relative; } .st_team .box .swp3 { width: 90%; } /*滚动*/ .st_team .box .swiper-slide .img_box { width: 205px; height: 205px; border-radius: 50%; overflow: hidden; margin: auto; } .st_team .box .swiper-slide .img_box img { width: 100%; height: auto; border-radius: 205px; transition: all 0.3s ; } .st_team .box .swiper-slide .img_box:hover img { transform: scale(1.1,1.1); } .st_team .box .swiper-slide:hover h4 { color: #40d0bb;} .st_team .box .swiper-slide h4 { font-size: 1.375rem; margin-top: 20px; width: 100%; text-align: center; } .st_team .box .swiper-slide p { font-size: 1rem; margin-top: 10px; color: #8b8b8b; width: 100%; text-align: center; display: inline-block; } .st_team .box .swiper-pagination.sp3 { margin-left: 48%; } .st_team .box .swiper-pagination.sp3 { margin-top: 50px;} .st_team .box .swiper-pagination.sp3 .swiper-pagination-bullet { background: #40d0bb; margin-right: 6px; border: #fff 2px solid; } .st_team .box .swiper-pagination.sp3 .swiper-pagination-bullet-active { width: 14px; height: 14px; background: #fff; border: #40d0bb 3px solid;} .st_team .more { width: 100%; height: 50px; line-height: 50px; text-align: center; margin-top: 50px; } .st_team .more a { width: auto; height: 50px; line-height: 50px; background: #f49402; color: #fff; text-align: center; border-radius: 50px; font-size: 16px; display: inline-block; padding-left: 30px; padding-right: 30px; } .st_team .more a:hover { background: #ff7e00; color: #fff; box-shadow: 0 0 5px #f60; } .st_team .more a i { font-size: 1.375rem; transition: all 0.5s; } .st_team .more a:hover i { padding-left: 20px; } @media (max-width:575px) { .st_team { height: auto; } .st_team .header h2 { font-size: 1.6rem; font-weight: 600; } .st_team .header h4 { font-size: 1rem; font-weight: normal; width: 50%; margin: auto; margin-top: 20px; } .st_team .box { height: auto;} .st_team .box .swiper-slide .img_box { width: 140px; height: 140px; border-radius: 70px; } .st_team .box .swiper-slide .img_box img { border-radius: 70px;} .st_team .box .swiper-pagination.sp3 { margin-left: 25%; margin-top: 30px; } .st_team .box .swiper-slide h4 { font-size: 1.125rem; } .st_team .box .swiper-slide p { margin-top: 0; } .st_team .more { margin-top: 90px; } } /**********byc*********/ .byc{ width:1200px; margin: 0 auto; position: relative; height: 330px; border-radius: 50px; margin-top: 35px; } #center,#center2 { z-index: 2;position: absolute; top: 70px; left:0 } #slider,#slider2 { z-index: 1; position: absolute; width: 1200px; height: 260px; overflow: hidden; top: 0; left: 0; border-radius: 20px; } #slider .slide,#slider2 .slide { z-index: 10; position: absolute; width: 860px; height: 260px; overflow: hidden; top: 0; cursor: default; left: 22px; text-align:left; background: #333; border-right: 5px solid #fff; margin-left:-2px; } #slider .title,#slider2 .title { color: #f80; font-size: 1.2em; font-weight: bold; margin-right: 1.5em; text-decoration: none; } #slider .text,#slider2 .text { display: none; } #slider .p,#slider2 .p{ width: 200px; height: 260px; color: #fff; position: absolute; left: 300px; top: 0; } #slider .p img,#slider2 .p img{ display: inline-block; margin: 40px 0 20px 0; } #slider .p span,#slider2 .p span{ margin-right: 50px; font-size: 12px; color: #fff; line-height: 20px; display: block; } #slider .pp,#slider2 .pp { width: 228px; height: 260px; color: #fff; background: #2db3a9; position: absolute; left: 500px; top: 0; padding: 0 20px; } #slider .pp dt,#slider2 .pp dt{ font-size: 22px; font-weight: bold; border-bottom: 1px solid #fff; padding: 30px 0 5px 0; } #slider .pp dt span,#slider2 .pp dt span{ font-size: 14px; margin-left: 10px; } #slider .pp dd,#slider2 .pp dd{ font-size: 12px; color: #fff; line-height: 20px; margin-top: 15px; } #slider .pp a,#slider2 .pp a{ background: #fff; width: 50px; height: 22px; line-height: 22px; text-align: center; font-size: 14px; color: #2db3a9; display: block; margin: 0 0 0 130px; position:absolute; bottom:20px; } #slider .diapo,#slider2 .diapo { position: absolute; border-left: 3px solid #fff; } @media (max-width:575px) { .byc { display: none; } } /*offer*/ .st_offer { margin-top: 65px; height:auto; background: #f5f5f5 ; padding-top: 60px; padding-bottom: 60px; } .st_offer .header h4 { font-size: 1.125rem; color: #8b8b8b; margin-top: 20px; line-height: 28px; width: 60%; margin: auto; } .st_offer .header h2 { font-size: 2.6rem; color: #3b3b3b; } .st_offer .header p { width: auto; height: 8px; display: inline-block; } .st_offer .box { padding-top: 40px; max-width: 1280px; margin: auto; height: auto; } .st_offer .box .list { width: 97%; height: auto; background: #fff; border: #fff 4px solid; padding: 20px; margin-top: 20px; display:inline-block; transition: all 0.3s;} .st_offer .box .list:hover { box-shadow: 0 0 20px #aaa; margin-top: 10px; border-bottom: #f49402 4px solid; } /* .st_offer .box .list:hover img { transform: scale(1.05); } */ .st_offer .box .list .left { width: 50%; float: left; overflow: hidden; } .st_offer .box .list .left img { width: 100%; height: auto; transition: all 0.3s; } /* .st_offer .box .list:hover .left img {transform: scale(1.1) ; } */ .st_offer .box .list .right {width: 50%; float: right; overflow: hidden;} .st_offer .box .list .right ul li { text-align: center; color: #5b5b5b; } .st_offer .box .list .right ul li span.n1 { font-size: 1.125rem; font-weight: 600; color: #40d0bb; } .st_offer .box .list .right ul li span.n2 { font-size: 1.125rem; font-weight: 600; color: #ff7417; } .st_offer .box .list .right ul li:nth-child(6) { margin-top: 20px;} .st_offer .more { width: 100%; height: 50px; line-height: 50px; text-align: center; margin-top: 30px; margin-top: 50px; } .st_offer .more a { width: auto; height: 50px; line-height: 30px; background: #f49402; color: #fff; text-align: center; border-radius: 50px; font-size: 16px; display: inline-block; padding-left: 30px; padding-right: 30px; } .st_offer .more a:hover { background: #ff7e00; color: #fff; box-shadow: 0 0 5px #f60; } .st_offer .more a i { font-size: 1.375rem; transition: all 0.5s; } .st_offer .more a:hover i { padding-left: 20px; } @media (max-width:575px) { .byc { display: none; } .st_offer .header h4 { width: 100%; } .st_offer .header h2 { font-size: 1.6rem; font-weight: 600; } .st_offer .box { padding-top: 20px;} .st_offer .box .list { width: 100%; } } /*map */ .st_map { height:1300px; background:url(../images/about/map.jpg) center top no-repeat #f5f5f5 ; padding-top: 60px; margin-bottom:50px; } .st_map .header h4 { font-size: 1.125rem; color: #fff; margin-top: 20px; line-height: 48px; width: 60%; margin: auto; font-weight: normal; } .st_map .header h2 { font-size: 2.6rem; color: #fff; margin-top: 20px; } .st_map .box { width: 100%; height: 100%; } .st_map .box .row { max-width: 1280px; margin: auto; margin-top: 900px; } .st_map .box .row h4 { font-size: 4rem; font-weight: 600; } .st_map .box .row h4 span { color: #2db3a9;} .st_map .box .row h5 { font-size: 1.125rem; } .st_map .box .row p { font-size: 1rem; color: #999999; } @media (max-width:575px) { .st_map { margin-top: 0; height:500px; margin-bottom: 300px; padding-top: 10px; background:url(../images/about/map2.jpg) center top no-repeat } .st_map .header h4 { font-size: 0.9rem; line-height: 22px; margin-top: 0; padding: 0; width: 90%; } .st_map .header h2 { font-size: 1.6rem; } .st_map .box .row { max-width: 100%; margin-top: 400px; } .st_map .box .row h4 { font-size: 1.6rem; margin-top: 10px; } .st_map .box .row h5 { font-size: 1rem; } .st_map .box .row p { font-size: 0.8rem; line-height: 22px; } }