body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, form, button, input, textarea, th, td { font-weight: normal; margin: 0; padding: 0; } body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, i { font: normal 12px/1.5 "Helvetica Neue", "Microsoft YaHei", Helvetica, STHeiTi, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } ul, ol, li { list-style: none; } a { text-decoration: none; color: #333; } a:hover { text-decoration: none; } img { vertical-align: top; border: 0; } button, input, textarea { font-size: 100%; vertical-align: middle; outline: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } table { border-spacing: 0; border-collapse: collapse; } div, a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .main{ width: 1200px; margin: 0 auto; padding: 0; } .ww768 { display: none; } @media only screen and (max-width: 1200px) { .main{ width: 100%; padding: 0 10px; box-sizing: border-box; margin: 0 auto; } } @media only screen and (max-width: 768px){ .ww768 { display: block; } .banner { display: none; } } .left{ float: left; } .right { float: right; } .clearfloat{ clear: both; zoom: 1; } .clearfloat:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; } .banner .swiper-slide img { width: 100%; } .phone_banner .swiper-slide { height: 240px; background-size: auto 100%; background-position: center; } .phone_banner .swiper-slide a { display: block; width: 100%; height: 100%; } .banner .swiper-pagination-bullet{ width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 1; transition: all .5s; } .banner .swiper-pagination-bullet-active{ background: #205fb4; } .phone_banner .swiper-pagination-bullet{ width: .3rem; height: 3px; background: #fff; border-radius: 0; opacity: 1; transition: all .5s; } .phone_banner .swiper-pagination-bullet-active{ background: #205fb4; } .nav-btn img { margin: 20px 0 14px; } .mob-nav{ display: none; width: 100%; height: 100%; position: fixed; top: 92px; left: 0; background: #333; padding: 15px; box-sizing: border-box; z-index: 99999999999999999; } .mob-nav ul li{ font-size: 16px; width: 100%; border-bottom: 2px solid #000; } .mob-nav ul li a{ color: #fff; line-height: 3em; } .banner .swiper-slide img { width: 100%; } .header h1 { float: left; } .header h1 img { margin-top: 10px; } .header .main { width: 1260px; } .header h6 { background: #efefef; font-size: 14px; color: #727272; line-height: 26px; } .header .pc_nav { float: right; } .header .pc_nav ul li { float: left; position: relative; } .header .pc_nav ul li a { display: block; line-height: 80px; box-sizing: border-box; font-size: 15px; padding: 0 25px; } .header .pc_nav ul li a:hover{ color: #fff; background: #0080d3; } .header .img { margin-top: 15px; } .header .pc_nav ul li dl{ display: block; position: absolute; top: 80px; left: 0%; width: 100%; z-index: 99999999999999; overflow: hidden; } .header .pc_nav ul li dl dd a { display: block; padding: 0 0; border: none; background: rgba(0,128,211,.5); height: 0; line-height: 32px; overflow: hidden; text-align: center; } .header .pc_nav ul li:hover dl dd a { padding: 6px 0; height: 100%; color: #fff; transition: all .4s ease; } .header .pc_nav ul li dl dd a:hover { transition: all .4s ease; background: rgba(0,128,211,.8); } @media only screen and (max-width:1660px) { .header h1 img { width: 300px; margin-top: 15px; } } @media only screen and (max-width:1440px) { .header .main{ width: 100%; padding: 0 15px; box-sizing: border-box; } } @media only screen and (max-width:1200px) { .header .pc_nav ul li a{ padding: 0 15px; } .header h1{ margin-left: 0; } } @media only screen and (max-width:1050px) { .header h1 img{ width: 220px; margin-top: 20px; } .header .pc_nav ul li a{ padding: 0 4px; } } @media only screen and (max-width:768px) { .header h6{ font-size: 12px; } .header .pc_nav{ display: none; } .header h1 img{ width: 250px; margin-top: 12px; } } .box-top h3 { font-size: 30px; color: #0080D3; font-weight: bold; text-align: center; margin-bottom: 35px; } .box1{ padding: 40px 0; } .box1 .text{ float: left; max-width: 70%; padding-top: 45px; } .box1 .text .p{ font-size: 14px; line-height: 30px; color: #2e2e2e; overflow: hidden; display: -webkit-box; -webkit-line-clamp:8; -webkit-box-orient: vertical; } .box1 .text p { display: inline-block; } @media only screen and (max-width: 1200px){ .box-top h3{ font-size: 22px; margin-bottom: 15px; } .box1 .text{ max-width: 55%; } .box1 { padding: 20px 0; } } @media only screen and (max-width: 768px) { .box1 .text{ width: 57%; padding-top: .2rem; margin-right: 3%; } .box1 .text .p{ -webkit-line-clamp:5; } .box1 .img { width: 40%; } } @media only screen and (max-width: 414px){ .box1 .text .p{ line-height: 26px; } } .number { left: 0; width: 100%; background: #0080d3; z-index: 9999; } .number ul { clear: both; overflow: hidden; padding: 50px 0; } .number ul li { width: 25%; box-sizing: border-box; float: left; border-right: 1px solid #eaeaea; text-align: center; } .number ul li:nth-last-child(1){ border-right: 1px solid transparent; } .number ul li h3 { font-size: 48px; color: #fff; display: inline-block; position: relative; line-height: 1em; } .number ul li h3 span { font-size: 12px; position: absolute; top: 0; right: -48px; text-align: right; line-height: 1em; } .number ul li h3 span.P12{ right: -12px; } .number ul li h3 span.P24{ right: -24px; } .number ul li p { color: #fff; } @media only screen and (max-width:1200px){ .number ul{ padding: 30px 0; } .number ul li h3 { font-size: 36px; } } @media only screen and (max-width:768px) { .number ul{ padding: 15px 0; } .number ul li{ width: 50%; margin-bottom: 15px; } .number ul li:nth-child(even){ border-right: 1px solid transparent; } .number ul li h3 { font-size: 20px; } } .box2 { padding: 40px 0; background-image: url(../img/index_08.jpg); background-repeat: repeat-y; background-size: 100% auto; } .box2 .box-top h3 { margin-bottom: 0; } .box2 .list ul li { clear: both; overflow: hidden; } .box2 .list ul li .text { width: 62%; float: left; padding-top: 80px; padding-bottom: 106px; background-image: url(../img/list.jpg); background-position: bottom; background-size: 100% auto; background-repeat: no-repeat; } .box2 .list ul li:nth-last-child(1) .text{ background-image: none; } .box2 .list ul li .img { width: 38%; float: right; display: flex; justify-content: center; align-items: center; } .box2 .list ul li .img img { max-width: 320px; width: 100%; } .box2 .list ul li .text span{ display: block; background-image: url(../img/bg.png); width: 87px; background-size: 100%; text-align: center; font-size: 30px; font-weight: bold; line-height: 76px; padding-left: 14px; box-sizing: border-box; color: #fff; float: left; } .box2 .list ul li .text h3 { font-size: 22px; font-weight: bold; color: #0080d3; margin-left: 100px; margin-bottom: 25px; } .box2 .list ul li .text p { font-size: 14px; margin-left: 100px; color: #666; overflow: hidden; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; } @media only screen and (max-width: 768px) { .box2{ padding: 20px 0; } .box2 .list ul li .img{ width: 100%; } .box2 .list ul li .text{ width: 100%; padding: 40px 0 46px; } } .box3 { padding: 40px 0; background: #fafbfd; clear: both; overflow: hidden; } .box3 .tab-top { background: #0080D3; color: #fff; width: 238px; box-sizing: border-box; border-left: 8px solid #fdd839; text-align: center; padding-bottom: 20px; display: table-cell; float: left; } .box3 .tab-top h3 { line-height: 75px; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: bold; border-bottom: 1px solid #fafbfd; } .box3 .tab-top h3 img{ margin-right: 8px; } .box3 .tab-top ul li{ line-height: 60px; cursor: pointer; } .box3 .tab-top ul li.on,.box3 .tab-top ul li:hover { padding-left: 20px; transition: all .3s; } .box3 .tab-top ul{ padding: 35px 0; } .box3 .tab-top .text{ margin-top: 275px; font-size: 18px; } .box3 .tab-down{ float: left; display: table-cell; padding-left: 30px; width: 920px; } .box3 .tab-down ul { display: none; } .box3 .tab-down ul li{ float: left; width: 31%; margin: 0 1% 5px; } .box3 .tab-down .img{ padding-bottom: 72%; background-size: auto 100%; background-position: center; } .box3 .tab-down ul li h3 { line-height: 40px; font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; } .box3 .tab-down ul li:hover .img{ transition: all .3s; transform: scale(1.05); } .box3 h5 a { display: none; margin: 0 auto; width: 110px; text-align: center; line-height: 36px; color: #fff; font-size: 14px; background: #0080D3; margin-top: 15px; } @media only screen and (max-width: 1200px) { .box3 .tab-top{ width: 22%; } .box3 .tab-down{ width: 78%; box-sizing: border-box; } .box3 .tab-top .text{ margin-top: 150px; } } @media only screen and (max-width: 768px){ .box3{ padding: 20px 0; } .box3 .tab-top{ display: none; } .box3 h5 a{ display: block; } .box3 .tab-down{ width: 100%; box-sizing: border-box; padding: 0; float: none; } } @media only screen and (max-width: 475px){ .box3 .tab-down ul li { width: 48%; } } .box4 { padding: 40px 0; } .box4 .main{ position: relative; } .box4 .top h3 { font-size: 18px; position: relative; line-height: 30px; font-weight: bold; } .box4 .top h3 span { color: #989999; font-weight: normal; } .box4 .top h3 a { font-size: 16px; font-weight: normal; float: right; color: #989999; } .box4 .top h3 i{ display: block; width: 32px; height: 2px; background: #0080D3; position: absolute; bottom: 0; left: 0; } .box4 .swiper-container{ margin-top: 40px; max-width: 1088px; } .box4 .swiper-container .swiper-slide .img{ border: 1px solid #0080D3; padding: 20px 10px; display: flex; justify-content: center; align-items: center; } .box4 .swiper-container .swiper-slide .img img { max-width: 100%; } .box4 .swiper-container .swiper-slide h3 { font-size: 16px; font-weight: bold; text-align: center; color: #0080D3; margin-top: 20px; } .box4 .swiper-button-next{ background-image: url(../img/right.png); outline: none; top: 68%; right: 0; } .box4 .swiper-button-prev{ top: 68%; outline: none; left: 0; background-image: url(../img/left.png); } @media only screen and (max-width: 768px) { .box4 { padding: 20px 0; } } .box5 { padding: 40px 0; } .box5 .swiper-container{ padding-bottom: 50px; } .box5 .swiper-container .img { text-align: center; } .box5 h3 { margin-top: 10px; text-align: center; } @media only screen and (max-width: 768px) { .box5 { padding: 20px 0; } } .footer { background: #1178c9; clear: both; overflow: hidden; color: #fff; } .footer .link{ line-height: 60px; font-size: 14px; background: #fff; color: #333; } .footer .link a { margin: 0 8px; color: #666; display: inline-block; } .footer .text{ padding-bottom: 15px; } .footer .num{ float: left; width: 230px; padding: 60px 0; } .footer .right{ width: 970px; float: right; } .footer .num h3 { font-size: 30px; font-weight: bold; } .footer .num a { color: #fff; font-size: 16px; font-weight: bold; } .footer_nav { border-bottom: 1px solid #a5c8e4; } .footer .footer_nav ul li{ float: left; line-height: 57px; margin: 0 30px; } .footer .footer_nav ul li a { color: #fff; font-size: 14px; } .footer .erweima{ margin-top: 25px; } .footer .erweima img{ float: left; margin-right: 10px; } .footer .erweima p{ margin-bottom: 10px; } .footer .right .href{ width: 250px; line-height: 40px; text-align: center; color: #fff; background: #ff9921; display: block; float: right; border-radius: 2px; margin-top: -50px; } .footer h6 { font-size: 14px; color: #fff; padding: 20px 0 55px; border-top: 1px solid #a5c8e4; } .footer h6 a { color: #fff; display: inline-block; } @media only screen and (max-width: 1200px) { .footer .num{ width: 20%; } .footer .right{ width: 80%; } .footer .footer_nav ul li{ margin: 0 10px; } } @media only screen and (max-width: 768px){ .footer .num{ display: none; } .footer .right{ width: 100%; } .footer .footer_nav{ display: none; } .footer .erweima{ text-align: center; } .footer .erweima img{ float: none; } .footer .right .href{ float: none; margin: 15px auto; } .footer h6{ padding: 10px 0 10px; } } /*****************้ๅ‘ดใ€‰*****************/ .inner_top{ text-align: center; margin: 70px 0 50px; } .inner_top h3 { font-size: 24px; color: #606060; } .inner_top p{ font-size: 14px; color: #afafaf; text-transform: uppercase; } @media only screen and (max-width: 1200px) { .inner_top{ margin: 35px 0 25px; } .inner_top h3 { font-size: 20px; } } @media only screen and (max-width: 768px) { .inner_top{ margin: 15px 0 15px; } .inner_top h3 { font-size: 16px; } } .about{ padding-bottom: 80px; } .about .text { padding-bottom: 30px; border-bottom: 1px dashed #eee; } .about .text img { float: left; max-width: 100%; margin-right: 30px; } .about .text p { font-size: 14px; color: #7f7f7f; line-height: 24px; margin-bottom: 30px; } .about .text2 { margin-top: 40px; } .about .text2 h4 { font-size: 22px; } .about .text2 h5 { font-size: 14px; color: #7f7f7f; margin: 10px 0; } .about .text2 p { font-size: 14px; color: #7f7f7f; } @media only screen and (max-width: 768px) { .about{ padding-bottom: 40px; } .about .text2 h4 { font-size: 18px; } .about .text{ padding-bottom: 10px; } } .about .tab-top ul { display: flex; justify-content: center; } .about .tab-top ul li { float: left; padding: 8px 0; background: none; margin: 0; cursor: pointer; font-size: 14px; } .about .tab-top ul li span{ border-left:1px solid #eee; border-right:1px solid #eee; padding: 0 30px; } .about .tab-top ul li.on,.about .tab-top ul li:hover{ background: #2d2d2d; color: #fff; } .about .tab-top ul li.on span,.about .tab-top ul li:hover span{ border-left:1px solid transparent; border-right:1px solid transparent; } .about .tab-down { width: 100%; max-width: 1820px; margin: 40px auto 0; } .about .tab-down ul { clear: both; overflow: hidden; display: none; } .about .tab-down ul li { width: 440px; float: left; margin-right: 20px; margin-bottom: 20px; } .about .tab-down ul li span { font-size: 16px; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin: 8px 0 10px; } .about .tab-down ul li:nth-child(4n+4){ margin-right: 0; } .about .tab-down ul li img { width: 100%; } .about .tab-down ul li:hover img{ cursor: pointer; transform: scale(1.05); transition: all .5s; } .about .page ul{ display: flex; justify-content: center; margin-top: 30px; } .about .page ul li { padding: 0 14px; border: 1px solid #eee; float: left; margin: 0 8px; } .about .page ul li a{ display: block; font-size: 14px; line-height: 32px; } .about .page ul li.on,.about .page ul li:hover{ background: #e7e7e7; } @media only screen and (max-width: 1820px) { .about .tab-down ul li{ width: 23%; margin: 0 1% 20px; } } @media only screen and (max-width: 768px) { .about .tab-top ul li span{ padding: 0 15px; } .about .tab-down ul li{ width: 31%; margin: 0 1% 20px; } } @media only screen and (max-width: 550px) { .about .tab-top ul{ display: block; clear: both; overflow: hidden; } .about .tab-top ul li span{ padding: 0 8px; } .about .tab-down ul li{ width: 48%; margin: 0 1% 15px; } } .details .swiper{ margin: 30px 0; } .details .swiper-slide img { width: 100%; } .details .swiper .swiper-button-prev{ background-image: url(../img/btn_03.jpg); width: 46px; height: 46px; background-size: 100% 100%; } .details .swiper .swiper-button-next{ background-image: url(../img/btn_05.jpg); width: 46px; height: 46px; background-size: 100% 100%; } .details h3 { font-size: 18px; } .details p { font-size: 14px; color: #777; } .details .p { margin: 40px 0; } .details h6 { font-size: 16px; color: #777; height: 52px; margin-bottom: 30px; border-bottom: 1px dashed #eee; } .contact dl{ margin-bottom: 40px; } .contact dl dt{ font-size: 16px; color: #7b7b7b; margin-bottom: 35px; font-weight: bold; } .contact dl dd{ font-size: 16px; color: #7b7b7b; line-height: 30px; } #map { margin-bottom: 50px; height: 458px; } @media only screen and (max-width:1200px) { #map { margin-bottom:35px; height: 400px; } } @media only screen and (max-width:768px) { .contact dl dt{ font-size: 14px; } .contact dl dd{ font-size: 14px; } #map { margin-bottom:20px; height: 300px; } } .about .jion { width: 1200px; margin: 0 auto; } .about .jion ul li{ width: 31%; margin: 0 1% 30px; } .about .jion ul li h3 { font-size: 16px; padding: 30px 0; border-bottom: 1px solid #eee; } .about .jion ul li dl dt { font-size: 14px; color: #666; margin: 15px 0 20px; } .about .jion ul li dl dd { font-size: 14px; color: #666; } @media only screen and (max-width: 1200px) { .about .jion { width: 100%; } } .about .news ul{ clear: both; overflow: hidden; max-width: 1200px; margin: 0 auto; } .about .news ul li { float: left; width: 31%; margin: 0 1% 15px; height:410px } .about .news ul li:nth-child(4n+4){ margin: 0 1% 15px; } .news ul li .img { background-image: url(../img/index_09.jpg); background-size: 100% 100%; } .news ul li .img .text { /* padding: 80px 20px; */ background: rgba(243,243,243,1); color: #6b6b6b; border: none; height:320px; overflow:hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 20px; } .news ul li .img .text h3 { font-size: 18px; } .news ul li .img .text h3 span { font-size: 14px; } .news ul li .img .text h4 { font-size: 16px; margin-top: 20px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .news ul li .img .text p{ font-size: 14px; margin-top: 10px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .news ul li .test { padding: 0 25px; background: #e7e7e7; line-height: 90px; color: #9b9b9b; font-size: 14px; } .news ul li .test img { float: right; margin-top: 22px; display: none; width: auto; } .news ul li:hover .img .text p{ color: #fff; } .news ul li:hover .img .text{ color: #fff; background: rgba(0,0,0,.4); transition: all .3s; } .news ul li:hover .test img { transition: all .3s; display: block; } @media only screen and (max-width: 1200px){ .news ul li .img .text{ padding: .4rem .3rem; } .news ul li .test{ line-height: .6rem; padding: 0 .15rem; } .news ul li .test img { margin-top: 7px; } } @media only screen and (max-width: 768px){ .about .news ul li{ width: 48%; } .news ul li .img .text{ padding: .3rem .2rem; } .news ul li .test{ line-height: .5rem; padding: 0 .15rem; } .news ul li .test img { margin-top: .05rem; max-width: .4rem; } .about .news ul li{height:auto} .nav-btn img{margin-left:60px} img{max-width:100%;} .about .jion ul li{width:100%} .news ul li .img .text{height:auto;} } @media only screen and (max-width: 414px){ .news ul li .test img { margin-top: .1rem; max-width: .3rem; } }