body {background-color: #F7F9F9;}
/*banner*/
.title-bg {position: relative;}
.title-bg .title {position: absolute; top: 35%; left: 7%;}
.title-bg .title h1 {color: #fff; margin-top: 5px;}
.title-bg .title h1 img {display: inline-block; width: auto; height: 25px; transform: translateY(-2px);}
.title-bg .title span {color: #bbb; font-size: 18px; font-weight: bold;}
/*mianbao*/
.mianbao {width: 100%; height: 80px; background-color: #eee;}
.mianbao ol {list-style: none; overflow: hidden; margin-top: 30px;}
.mianbao ol li {float: left; color: #999;}
.mianbao ol .jian {margin: 0 10px;}

.word-box h2 {font-size: 40px; text-transform: uppercase; line-height: 50px;}
.word-box span {color: #FF791F;}
.word-box .line-box {margin: 3% 0 5%;}

p {margin-bottom: 0;}
/*content*/
.pro-sec {background: url('/uppf/static/haiwai/home50/shadow2.png') no-repeat; background-size: 80%;}
.clear-ct1 {padding-top: 5%; padding-bottom: 5%;}
.clear-ct1 .info-word {margin-top: 8%; padding: 0 8% 0 5%;}
.clear-ct1 .col-md-6 {margin-bottom: 20px;}

.clear-bg2 {background: url('/uppf/static/haiwai/products/bg-tuliao.jpg') no-repeat; background-size: cover;}
.clear-ct2 {padding-top: 5%; padding-bottom: 5%;}
.clear-ct2 .left-box .box-part {margin-bottom: 40px;}
.clear-ct2 .left-box .box-part:last-child {margin-bottom: 0px;}
.clear-ct2 .left-box .box-part h5 {color: #ccc; font-size: 15px;}
.clear-ct2 .left-box .box-part img {width: 180px;}
.clear-ct2 .left-box .box-part b {color: #fff; font-weight: 400; font-size: 20px;}

.clear-bg3 {position: relative;}
.clear-bg3 .warr-word {position: absolute; left: 10%; top: 25%; width: 35%;}
.clear-bg3 .warr-word h2 {color: #FF771E; margin-bottom: 30px;}
.clear-bg3 .warr-word p {color: #fff;}

.clear-ct3 .para-col {padding: 0px 30px;}
.clear-ct3 .para-col .para-box {padding: 40px 60px; background-color: #fff; box-shadow: 0px 10px 15px rgba(0,0,0,0.1);}
.clear-ct3 .para-col .para-box h5 {font-size: 15px; text-transform: Capitalize;}
.clear-ct3 .para-col .para-box b {color: #FF771E; font-size: 20px;}
.clear-ct3 .para-col .para-box .xuxian {border-top: 1px dashed #ccc; margin: 20px 0;}
.clear-ct3 .case-col {padding: 0px 30px 30px;}
.clear-ct3 .case-col .case-pic {height: 200px;}
.clear-ct3 .case-col .case-pic img {object-fit: cover;}
.clear-ct3 .case-col a .case-title {padding: 10px; color: #666; text-align: center; font-size: 16px; font-weight: 400; transition: all .3s;}
.clear-ct3 .case-col a:hover .case-title {color: #FF771E;}

.clear-ct3 {padding-top: 8%; padding-bottom: 8%;}
.clear-ct3 h4 {font-size: 40px; font-family: none;}

.info-word a {display: block; margin: 20px 0;}
.info-word a img {width:120px;}







@media (min-width: 768px) {

}
@media (max-width: 767px) {
	p {margin-bottom: 20px;}
	.word-box h2 {font-size: 25px;}

	/*banner*/
	.title-bg img {height: 250px; object-fit: cover;}
	.title-bg .title {top: 50%;}
	.title-bg .title h1 {font-size: 30px;}
	.title-bg .title h1 img {height: 20px;}
	/*mianbao*/
	.mianbao {height: 60px;}
	.mianbao ol {margin-top: 20px;}

	/*content*/
	.pro-sec {background-size: cover;}
	.clear-ct1 .info-word {margin-top: 0;}
	.clear-ct1,.clear-ct2,.clear-ct3 {padding-top: 10%; padding-bottom: 12%}
	.clear-ct2 h4,.clear-ct3 h4 {font-size: 25px; font-weight: bold;}
	
	.word-box h2 {font-size: 25px; text-align: center;}
	
	.clear-ct3 .para-col {padding: 0 30px 30px;}
	.clear-ct2 .left-box .box-part {text-align: center;}
	.clear-ct2 .left-box .box-part img {transform: translateX(15px);}
	.clear-ct3 h3 {font-size: 20px; text-align: center;}
	.clear-ct2 .left-box .box-part b {font-size: 18px;}
	.clear-ct2 .left-box .box-part img {transform: translateX(0px); width: 130px;}

	
}