/* title */ .bannerpic{padding-bottom: 45px;} .home_title{line-height: 1;text-align: center;font-weight: 600;padding-bottom: 50px;position: relative;z-index: 5;} .home_title p{font-size: 40px;color: #003264;} .home_title p a{color: #003264;} .home_title span{display: block;width: 280px;height: 15px;margin: 20px auto 0;position: relative;background: url(../images/icon3.png) center no-repeat;} .home_title span *{width: 120px;height: 1px;position: absolute;left:0;top: 7px;background: #003264;} .home_title span i{left: auto;right: 0;} .home_title.title2 p, .home_title.title2 p a{color: #fff;} .home_title.title2 span{background-image: url(../images/icon4.png);} .home_title.title2 span *{background: #fff;} .home_title p a:hover{color: #ffbf00;} .swiper-pagination-bullets .swiper-pagination-bullet-active{background-color: #003264;} @media only screen and (max-width:1440px){ .home_title{padding-bottom: 45px;} } @media only screen and (max-width:1250px){ .home_title{padding-bottom: 40px;} } @media only screen and (max-width:1024px){ .home_title{padding-bottom: 35px;} .home_title p{font-size: 35px;} .home_title span{margin-top: 15px;} } @media only screen and (max-width:768px){ .home_title p{font-size: 30px;} .home_title span{width: 240px;} .home_title span *{width: 100px;} .swiper-pagination-bullet{margin: 0 7px;padding: 3px;} } @media only screen and (max-width:480px){ .home_title{padding-bottom: 30px;} .home_title p{font-size: 25px;} .home_title span{width: 200px;} .home_title span *{width: 80px;} .swiper-pagination-bullet{margin: 0 5px;} } /* productbox */ .productbox{padding: 80px 0;} .productbox .prhome_title{line-height: 1;text-align: center;padding: 0 5% 10px;margin-bottom: 50px;} .productbox .prhome_title p{font-size: 40px;font-weight: 600;color: #003264;} .productbox .prhome_title span{display: block;font-size: 18px;color: #808080;padding: 21px 0;} .productbox ul li{width: 25%;float: left;flex-shrink: 0;padding: 0 15px 20px;text-align: center;height: 580px;} .productbox ul li .txt{width: 100%;height: 100%;background: #eee;border-radius: 10px;padding: 15% 2%;color: #666;cursor: pointer;} .productbox ul li .txt em{display: block;width: 60%;margin: 0 auto;position: relative;overflow: hidden; clip-path: circle(50%);} .productbox ul li .txt em::after{content: "";width: 100%;height: 100%;border: 2px solid #47addd;border-radius: 50%;position: absolute;left: 0;top: 0;} .productbox ul li .txt em i{display: block;width: 100%;height: 0;padding-bottom: 100%;border-radius: 50%;background: #fff;} .productbox ul li .txt em img{position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);transform: translate(-50%,-50%);width: 150%;} .productbox ul li .txt strong{font-size: 30px;padding: 20px 0;margin-top: 10px;color: #003264;display: block;line-height: 1;} .productbox ul li .txt p{display: block;font-size: 16px;line-height: 30px;height: 90px;overflow: hidden;} .productbox ul li .txt span{display: block;padding: 10px 0 5px;} .productbox ul li .txt span i{display: block;width: 20px;height: 20px;margin: 0 auto;background: url(../images/icon9.png) center no-repeat;} .productbox ul li.active .txt{background: #003264;color: #fff;} .productbox ul li.active .txt strong{color: #fff;} .productbox ul li.active .txt span i{background-image: url(../images/icon10.png);} @media only screen and (max-width:1440px){ .productbox{padding: 65px 0;} .productbox ul{margin: 0 -10px;} .productbox ul li{padding: 0 10px 20px;height:500px ;} } @media only screen and (max-width:1250px){ .productbox{padding: 55px 0;} .productbox ul{margin: 0 -5px;} .productbox ul li{padding: 0 5px 15px;height: 460px;} .productbox ul li .txt{padding: 12% 8%;} .productbox ul li .txt strong{font-size: 25px;padding: 15px 0;} .productbox ul li .txt p{font-size: 15px;line-height: 28px;} .productbox ul li .txt span{padding: 20px 0 0;} } @media only screen and (max-width:1024px){ .productbox{padding: 50px 0;} .productbox ul li{padding: 0 5px 10px;height:400px;} .productbox ul li .txt{padding: 12% 4%;} .productbox ul li .txt strong{font-size: 20px;padding: 10px 0;margin-top: 5px;} .productbox ul li .txt p{max-height: 110px;} } @media only screen and (max-width:768px){ .productbox{padding: 45px 0;} .productbox ul{flex-wrap: wrap;} .productbox ul li{width: 50%;height:480px ;} .productbox ul li .txt{padding: 12% 5%;} .productbox ul li .txt strong{font-size: 24px;padding: 15px 0;margin-top: 10px;} .productbox ul li .txt p{font-size: 16px;line-height: 30px;} .productbox ul li .txt span{display: block;padding-top: 25px;} } @media only screen and (max-width:600px){ .productbox ul li{height: 400px;} .productbox ul li .txt strong{font-size: 20px;padding: 10px 0;margin-top: 5px;} .productbox ul li .txt p{font-size: 15px;line-height: 28px;} } @media only screen and (max-width:480px){ .productbox{padding: 40px 0;} .productbox ul{margin: 0 -2px;} .productbox ul li{padding: 0 2px 4px;height: 360px;} .productbox ul li .txt{border-radius: 5px;padding: 10% 5%;} .productbox ul li .txt span{display: block;} } @media only screen and (max-width:425px){ .productbox ul li .txt em img{width: 150%;} .productbox ul li .txt p{line-height: 24px;} } @media only screen and (max-width:359px){ .productbox ul li{width: 100%;height: 440px;} .productbox ul li .txt{padding: 9% 5% 8%;} .productbox ul li .txt strong{font-size: 24px;padding: 12px;} } /* advantage */ .advantagebox{padding: 90px 0 75px; background: #021426 url(../images/bg1.jpg) center no-repeat;background-attachment: fixed;} .advantagebox ul{margin: 0 -20px;flex-wrap: wrap;} .advantagebox ul li{width: 33.333%;float: left;flex-shrink: 0;padding: 0 20px 35px;text-align: center;color: #fff;font-size: 16px;line-height: 25px;} .advantagebox ul li div{width: 100%;height: 100%;padding: 40px 8%;background: rgba(0,50,100,.8);cursor: pointer;border-radius: 3px;overflow: hidden;} .advantagebox ul li:nth-of-type(even) div{background: rgba(0,0,0,.3);} .advantagebox ul li em{display: block;height: 70px;padding: 5px 0;} .advantagebox ul li em img{height: 100%;} .advantagebox ul li p{font-size: 25px;line-height: 1;padding: 15px 0;} .advantagebox ul li span{display: block;max-width: 300px;height: 50px;margin: 0 auto;} .advantagebox ul li:hover div{background: #ffbf00;} @media only screen and (max-width:1440px){ .advantagebox{padding: 75px 0 70px;} .advantagebox ul{margin: 0 -15px;} .advantagebox ul li{padding: 0 15px 25px;} } @media only screen and (max-width:1250px){ .advantagebox{padding: 65px 0;} .advantagebox ul{margin: 0 -10px;} .advantagebox ul li{padding: 0 10px 15px;} } @media only screen and (max-width:1024px){ .advantagebox{padding: 55px 0;} .advantagebox ul{margin: 0 -5px;} .advantagebox ul li{padding: 0 5px 15px;font-size: 15px;} .advantagebox ul li div{padding: 30px 8%;} } @media only screen and (max-width:768px){ .advantagebox{padding: 50px 0;} .advantagebox ul li{width: 50%;padding: 0 5px 10px;} .advantagebox ul li div{padding: 30px 5%;} .advantagebox ul li:nth-child(3) div{background: rgba(0,0,0,.3);} .advantagebox ul li:nth-child(4) div{background: rgba(0,50,100,.8);} .advantagebox ul li span{margin-top: -3px;} .advantagebox ul li:hover div{background: #ffbf00;} } @media only screen and (max-width:480px){ .advantagebox{padding: 50px 0 40px;} .advantagebox ul li em{height: 50px;padding: 0;} } @media only screen and (max-width:425px){ .advantagebox ul li{width: 100%;padding: 0 5px 10px;font-size: 16px;} .advantagebox ul li div{padding: 25px 5%;} .advantagebox ul li em{height: 70px;padding: 5px;} .advantagebox ul li span{margin-top: 0;height: auto;} .advantagebox ul li:nth-child(3) div{background: rgba(0,50,100,.8);} .advantagebox ul li:nth-child(4) div{background: rgba(0,0,0,.3);} .advantagebox ul li:hover div{background: #ffbf00;} } /* company */ .companybox{padding: 80px 0;background: url(../images/bg2.jpg) center top no-repeat;background-size: 100% auto;} .companybox .list{width: 100%;padding-bottom: 30px;} .companybox .list ul li{width: 25%;float: left;flex-shrink: 0;padding: 35px 15px;line-height: 1;text-align: center;} .companybox .list ul li p{display: inline-block;padding-right: 20px;position: relative;color: #003264;} .companybox .list ul li p strong{font-size: 50px;} .companybox .list ul li p em{font-style: normal;font-size: 15px;position: absolute;right: 0;bottom: 9px;color: #666;} .companybox .list ul li p i{font-style: normal;font-size: 20px;position: absolute;right: 2px;top: 3px;} .companybox .list ul li span{font-size: 18px;display: block;padding: 12px 0 5px;} .companybox .cont{width: 100%;position: relative;} .companybox .cont .pic{width: 50%;height: 100%;position: absolute;right: 0;top: 0;} .companybox .cont .pic p{width: 100%;height: 100%;} .companybox .cont .pic p em{display: block;width: 100%;height: 100%;position: relative;z-index: -1;} .companybox .cont .pic p em img{height: 100%;min-width: 100%;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);transform: translate(-50%,-50%);} .companybox .cont .txt{width: 50%;height: 494px;float: left;background: #1b3d62 url(../images/bg3.jpg) center no-repeat;background-size: auto 100%;padding: 60px;color: #fff;} .companybox .cont .txt .titl{width: 100%;font-size: 30px;padding: 5px 0;line-height: 1;} .companybox .cont .txt .text{width: 100%;min-height: 140px;max-height: 210px;font-size: 15px;line-height: 2;font-weight: 600;margin: 20px 0;text-indent: 30px;} .companybox .cont .txt .more{width: 100%;padding-top: 5px;} .companybox .cont .txt .more a{float: left;font-size: 15px;font-weight: 600;line-height: 30px;padding: 4px 24px;border: 1px solid #fff;color: #fff;} .companybox .cont .txt .more a:hover{background: #fff;color: #003264;} @media only screen and (max-width:1440px){ .companybox{padding: 70px 0;} .companybox .list{padding-bottom: 25px;} .companybox .list ul li{padding: 30px 10px;} } @media only screen and (max-width:1250px){ .companybox{padding: 60px 0;} .companybox .list ul li{padding: 20px 10px;} .companybox .cont .txt{height: 360px;padding: 45px 4%;} .companybox .cont .txt .text{max-height: 175px;margin: 15px 0;} } @media only screen and (max-width:1024px){ .companybox{padding: 55px 0;} .companybox .list{padding-bottom: 20px;} .companybox .list ul li{padding: 10px;} .companybox .list ul li p strong{font-size: 42px;} .companybox .list ul li p em{bottom: 7px;} .companybox .list ul li p i{font-size: 18px;right: 3px;top: 2px;} .companybox .list ul li span{font-size: 18px;padding: 10px 0 5px;} .companybox .cont .txt{height: 360px;padding: 40px 3%;} .companybox .cont .txt .titl{font-size: 25px;padding: 0;font-weight: 600;} .companybox .cont .txt .text{min-height: 170px;max-height: 205px;} } @media only screen and (max-width:768px){ .companybox{padding: 50px 0;} .companybox .list ul{margin: 0 -5px;flex-wrap: wrap;} .companybox .list ul li{padding: 0 5px 10px;width: 50%;} .companybox .list ul li div{background: #003264;border-radius: 3px;padding: 10% 5%;color: #fff;} .companybox .list ul li:hover div{background: #ffbf00;-webkit-transition: .5s;-moz-transition: .5s;transition: .5s;} .companybox .list ul li p, .companybox .list ul li p em{color: #fff;} .companybox .list ul li span{padding-bottom: 0;font-size: 16px} .companybox .cont .pic{width: 100%;position: relative;height: auto;max-height: 360px;} .companybox .cont .pic p em img{width: 100%;height: auto;position: relative;left: 0;top: 0;-webkit-transform: none;-moz-transform: none;transform: none;} .companybox .cont .txt{width: 100%;height: auto;padding: 45px 6%;background-size: 100% 100%;} .companybox .cont .txt .text{min-height: auto;max-height: none;margin: 20px 0;} } @media only screen and (max-width:480px){ .companybox{padding: 45px 0;} .companybox .list ul{margin: 0 -2px;} .companybox .list ul li{padding: 0 2px 4px;} .companybox .cont .txt{padding: 8% 5%;background-size: auto 100%;} .companybox .cont .txt .text{margin: 5% 0;} } /* news */ .newsbox ul{margin: 0 -10px;} .newsbox ul li{width: 50%;float: left;padding: 0 10px;overflow: hidden;} .newsbox ul li .txt{width: 100%;font-size: 15px;line-height: 25px;color: #808080;overflow: hidden;padding: 30px 35px;position: relative;} .newsbox ul li .txt .titl{width: 100%;padding-top: 25px;} .newsbox ul li .txt .titl a{font-size: 22px;padding: 10px 0;display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .newsbox ul li .txt .text{width: 100%;height: 50px;overflow: hidden;} .newsbox ul li .txt .text br{display: none;} .newsbox ul li .txt .time{position: absolute;left: 35px;top: 30px;font-size: 16px;-webkit-transition: left .5s;-moz-transition: left .5s;transition: left .5s;} .newsbox ul li .pic{width: 100%;overflow: hidden;} .newsbox ul li .pic a{padding-bottom: 360px;} .newsbox ul li .pic a em{position: absolute;width: 100%;height: 100%;z-index: 5;} .newsbox ul li.li_1 .txt:hover{padding: 30px 35px;} .newsbox ul li.li_1 .txt:hover .time{left: 35px;} .newsbox ul li.li_1 .pic{display: block;} .newsbox ul li.li_5{display: none;} .newsbox ul li .txt:hover{background:#f5c534;color: #fff;} .newsbox ul li .txt:hover .titl a{color: #fff;} @media only screen and (max-width:1250px){ .newsbox ul{margin: 0 -5px;} .newsbox ul li .txt{padding: 20px 25px;} .newsbox ul li .txt .time{left: 25px;top: 20px;} .newsbox ul li .pic a{padding-bottom: 320px;} .newsbox ul li.li_1 .txt:hover{padding: 20px 25px;} .newsbox ul li.li_1 .txt:hover .time{left: 25px;} } @media only screen and (max-width:1024px){ .newsbox ul li{width: 50%;padding-left: 5px;} .newsbox ul li .txt .titl a{font-size: 16px;font-weight: 600;} .newsbox ul li .txt .text{height: 70px;padding: 2px 0;line-height: 22px;} .newsbox ul li .txt .time{left: 20px;top: 15px;} .newsbox ul li.li_1 .txt{padding: 15px 0;} .newsbox ul li.li_1 .txt:hover{padding: 15px 20px;} .newsbox ul li.li_1 .txt:hover .time{left: 20px;} } @media only screen and (max-width:768px){ .newsbox ul{margin: -15px 0 0;} .newsbox ul li{width: 100%;border-bottom: 1px dotted #ccc;margin-top: 15px;position: relative;} .newsbox ul li.li_1 .txt, .newsbox ul li .txt{width: 75%;float: right;padding: 0;} .newsbox ul li .txt .titl{padding: 0;} .newsbox ul li .txt .text{height: 50px;padding: 0;line-height: 25px;font-size: 14px;} .newsbox ul li.li_1 .txt .time, .newsbox ul li .txt .time{left: 0;top: 0;position: relative;padding-top: 5px;font-size: 15px;line-height: 20px;} .newsbox ul li .pic{width: 24%;max-width: 150px;display: block;float: left;border: 1px solid #e6e6e6;} .newsbox ul li .pic a{padding-bottom: 110px;} .newsbox ul li .pic a em{display: none;} .newsbox ul li.li_1 .txt:hover, .newsbox ul li .txt:hover{background: none;padding: 0 0 0 5px;color: #333;} .newsbox ul li .txt:hover .titl a{color: #003264;} .newsbox ul li.li_1 .txt:hover .time, .newsbox ul li .txt:hover .time{left: 0;top: 0;} .newsbox ul li.li_5{display: block;} } @media only screen and (max-width:480px){ .newsbox ul{margin-top: -20px;} .newsbox ul li{margin-top: 20px;} .newsbox ul li.li_1 .txt, .newsbox ul li .txt{width: 100%;padding-top: 10px;} .newsbox ul li .txt .text{height: auto;font-size: 15px;} .newsbox ul li .pic{width: 100%;max-width: 100%;} .newsbox ul li .pic a{padding-bottom: 56.25%;} .newsbox ul li.li_1 .txt:hover, .newsbox ul li .txt:hover{padding: 10px 0 0;} } /* faq */ .faqbox{padding: 55px 0;} .faqbox ul{margin: -1px;flex-wrap: wrap;} .faqbox ul li{width: 50%;padding: 1px;float: left;flex-shrink: 0;} .faqbox ul li.li_5{display: none;} .faqbox ul li div{width: 100%;height: 100%;background: #f1f3f5;font-size: 15px;line-height: 25px;padding: 10px;} .faqbox ul li .titl a{font-size: 22px;padding: 5px 0 5px 30px;display: block;background: url(../images/icon7.png) left center no-repeat;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #003264;} .faqbox ul li .text{padding-left: 30px;margin: 5px 0;background: url(../images/icon9.png) left 2px no-repeat;color: #666;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .faqbox ul li .text br{display: none;} .faqbox ul li .more a{float: left;padding: 5px 0 0 30px;color: #666;} .faqbox ul li .titl a:hover, .faqbox ul li .more a:hover{text-decoration: underline;} .faqbox ul li:hover div{background: #003264;} .faqbox ul li:hover .titl a{color: #fff;background-image: url(../images/icon8.png);} .faqbox ul li:hover .text{color: #fff;background-image: url(../images/icon10.png);} .faqbox ul li:hover .more a{color: #fff;} @media only screen and (max-width:1440px){ .faqbox{padding: 50px 0;} } @media only screen and (max-width:1250px){ .faqbox{padding: 45px 0;} .faqbox ul li div{padding: 15px;} .faqbox ul li .text{margin: 2px 0;} } @media only screen and (max-width:1024px){ .faqbox{padding: 35px 0;} .faqbox ul li .titl a{font-size: 16px;font-weight: 600;} .faqbox ul li .text{line-height: 22px;} } @media only screen and (max-width:768px){ .faqbox{padding: 30px 0;} .faqbox .home_title{padding-top: 20px;} .faqbox ul li{width: 100%;} .faqbox ul li.li_5{display: block;} .faqbox ul li div{font-size: 14px;} .faqbox ul li .text{line-height: 25px;} } @media only screen and (max-width:480px){ .faqbox{padding: 25px 0;} .faqbox ul li div{padding: 10px;} .faqbox ul li .titl a, .faqbox ul li .text, .faqbox ul li .more a{margin: 0;padding-left: 27px;} } /* contact */ .contactbox{padding: 30px 0 25px;background-size: 100% 100%;} .contactbox .cont{box-shadow: 0 0 20px rgba(0,0,0,.1);background: #fff;} .contactbox .txtbox{width: 50%;background: #fff url(../images/bg8.jpg) 30% bottom no-repeat;float: left;flex-shrink: 0;background-size: auto 100%;} .contactbox .txtbox .txt{width: 100%;height: 100%;padding: 66px 50px;} .contactbox .txtbox .titl{font-size: 24px;line-height: 1;color: #003264;font-weight: 600;padding-top: 5px;} .contactbox .txtbox .titl em{width: 2em;padding-top: 18px;display: block;border-bottom: 2px solid #003264;} .contactbox .txtbox .text{width: 100%;padding-top: 25px;overflow: hidden;font-size: 15px;line-height: 25px;color: #666;} .contactbox .txtbox .text p{padding: 10px 0;} #order{width: 50%;float: right;flex-shrink: 0;background: #191919 url(../images/bg7.jpg) center no-repeat;background-size: 100% auto;position: relative;} #order .titl{width: 100%;font-size: 24px;line-height: 1;color: #fff;position: absolute;left: 50px;top: 50px;white-space: nowrap;} #order ul{margin: 0 -10px 0 -5px;height: 100%;padding: 100px 50px 50px;overflow: hidden;} #order ul li{width: 50%;float: left;padding: 10px 10px 5px 5px;position: relative;} #order ul li .red{position: absolute;right: 15px;top: 50%;margin-top: -7px;line-height: 25px;color: #fff;} #order ul li img{position: absolute;right: 10px;top: 10px;padding: 11px;background: #fff;cursor: pointer;border-radius: 3px;} #order ul li .txt{color: #fff;display: block;width: 100%;overflow: hidden;background: rgba(255,255,255,.5);line-height: 18px;padding: 10px 14px;border: 1px solid #fff;border-radius: 3px;} #order ul li.li_2{width: 100%;} #order ul li.li_2 .txt{height: 100px;} #order ul li.li_3{padding-right: 90px;} #order ul li.li_3 .red{right: 95px;} #order ul li.li_4{float: right;max-width: 170px;} #order ul li.li_4 .tj{display: block;width: 100%;background: #003264;color: #fff;font-size: 15px;font-weight: 600;line-height: 40px;cursor: pointer;border-radius: 3px;} #order ul li.li_4 .tj:hover{background-color: #ffbf00;} #order ul li .txt::-webkit-input-placeholder{color: #fff;} #order ul li .txt:-moz-placeholder{color: #fff;} #order ul li .txt::-moz-placeholder{color: #fff;} #order ul li .txt:-ms-input-placeholder{color: #fff;} @media only screen and (max-width:1440px){ .contactbox{padding: 25px 0 20px;background-size: auto 100%;} .contactbox .txtbox .txt{padding: 40px 45px;} #order .titl{left: 45px;top: 45px;} #order ul{padding: 90px 45px 45px;} } @media only screen and (max-width:1250px){ .contactbox{padding: 20px 0;} .contactbox .txtbox{background-position-x: center;} .contactbox .txtbox .txt{padding: 35px;} .contactbox .txtbox .titl{font-size: 20px;} .contactbox .txtbox .text{padding-top: 20px;line-height: 22px;} #order .titl{left: 35px;top: 40px;font-size: 20px;font-weight: 600;} #order ul{padding: 80px 35px 35px;margin: 0 -5px;} #order ul li{padding: 10px 5px 5px;} #order ul li .red{right: 10px;} #order ul li img{right: 5px;} #order ul li.li_3{padding-right: 85px;} #order ul li.li_3 .red{right: 90px;} } @media only screen and (max-width:1080px){ #order{background-size: auto 100%;} } @media only screen and (max-width:1024px){ .contactbox .cont{flex-wrap: wrap;} .contactbox .txtbox{width: 100%;} .contactbox .txtbox .text{line-height: 20px;} #order{width: 100%;background-size: 100% auto;} } @media only screen and (max-width:768px){ .contactbox .txtbox .txt{padding: 4%;} .contactbox .txtbox .titl em{padding-top: 13px;} .contactbox .txtbox .text{padding-top: 15px;} #order{padding: 5% 4%;} #order .titl{position: relative;left: 0;top: 5px;} #order ul{padding: 4% 0 1%;height: auto;} } @media only screen and (max-width:520px){ #order{background-size: auto 100%;} } @media only screen and (max-width:480px){ .contactbox .txtbox .txt{padding: 5% 4%;} .contactbox .txtbox .text p{padding: 3px 0;} #order .titl{font-size: 18px;white-space: normal;line-height: 20px;} #order ul{margin: 0;padding: 5% 0 1%;} #order ul li{padding: 5px 0;width: 100%;} #order ul li .red{margin-top: -10px;} #order ul li img{top: 5px;right: 0;} #order ul li.li_3{padding-right: 80px;} #order ul li.li_3 .red{right: 85px;} #order ul li.li_4{max-width: 100%;padding: 10px 0;} } /* links */ .linkbox{line-height: 30px;padding: 50px 0;} .linkbox .titl{width: 100%;border-bottom: 1px solid #ddd;float: left;font-size: 20px;color: #0053a6;line-height: 1;} .linkbox .titl p{float: left;font-weight: 600;border-bottom: 1px solid #0053a6;margin-bottom: -1px;padding: 5px 0 9px;} .linkbox .titl span{float: left;padding: 7px 0 7px 10px;border-bottom: 1px solid #0053a6;margin-bottom: -1px;} .linkbox ul{width: 100%;float: left;padding-top: 20px;} .linkbox ul li{display: inline;padding: 0 5px;} .linkbox ul li a{white-space: nowrap;} @media only screen and (max-width:1440px){ .linkbox{padding: 40px 0;} } @media only screen and (max-width:1250px){ .linkbox{padding: 35px 0;} .linkbox ul{padding: 20px 0 5px;line-height: 24px;} } @media only screen and (max-width:1024px){ .linkbox{padding: 30px 0;} } @media only screen and (max-width:768px){ .linkbox{padding: 25px 0;} } @media only screen and (max-width:480px){ .linkbox{padding: 20px 0;} }