/* CSS Document */
/* 外贸狼 做最好的品牌 */
/* 网址：www.waimaolang.cn */
/* QQ：1114759591 */
@charset "utf-8";
body,html{ font-family: "微软雅黑",arial; overflow-x: hidden;}
/*导航*/
header
.head_top{ height: 38px; line-height: 38px; background: #f5f5f5; }
.head_top .head_tel{ font-size: 16px; color: #999999;}
.head_top .head_nav a{ margin-left: 25px; font-size: 16px; color: #999999; }
.head_top .head_nav a:hover{color: #666;}

video::-internal-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}


/* slider */
.slider { position: relative; overflow:hidden; }
.slider ul { padding-bottom: 38.25%; }
.slider li { position: absolute; left: 0; top: 0; z-index: 20; width: 100%; padding-bottom: 31.25%; }
.slider li.is-curr { z-index: 22; }
.slider li.is-next { z-index: 21; }
.slider .slide img { position: absolute; left: 0; top: 0; width: 100%; }
.sliderTxt { position: absolute; width: 1200px; z-index: 22; text-align: left; }
.sliderTxt h2 { font-family: "微软雅黑"; font-size: 48px; color: #000; margin-bottom: 15px; }
.sliderTxt h3 { font-family: "微软雅黑"; font-size: 30px; color: #ff8b00; margin-bottom: 10px; }
.sliderTxt.st2 { top: 30%; left: 0; right: 0; bottom: 0; margin: auto; }
.sliderTxt.st1 { top: 0; right: 15%; height: 150px; bottom: 0; margin: auto; }
.sliderTxt a { font-size: 20px; color: #333333; display: inline-block; line-height: 52px; height: 52px; padding: 0 20px; border: 1px solid #333333; margin-top: 20px; background: rgba(255,255,255,0.6);}
.sliderTxt a:hover{ background: #ff8b00; color: #ffffff; border-color:#ff8b00; transition: all 0.8s;  }
.sliderTxt.st2 .sTxt.EnglishText { font-family: "Helvetica" }

.sliderTxt.st0 { position: relative;display: block; width: 100%; height: 100%; top: 0; bottom: 0; margin: auto;left:18%} 
.slider .sliderTxt .sTxtLeft{position:absolute;top:150px;left:0;width:677px;height:340px;}
.slider .sliderTxt .sTxtRight{position:absolute;top:170px;left:20%;width:auto;height:252px;}
.slider .sliderTxt .sTxtRight h3{display:block}

.dot-list { position: absolute;left: 48.5%;bottom: 10px; z-index: 25;}
.dot-list .dot {display: inline-block;width: 10px;height: 10px; margin: 3px; background-color: #fff; border-radius: 5px;cursor:pointer;}
.dot-list .dot.active{background-color: #D90000;}
#prev{position: absolute;left: -50px; top: 0;width: 50px;height: 100%; z-index: 25;}
#next{position: absolute;right: -50px;top: 0; width: 50px;height: 100%; z-index: 25;}
#prev,#next{-webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -ms-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; cursor: pointer;}
#HopeSlider:hover #prev{left: 0;}
#HopeSlider:hover #next{right: 0;}



/*外贸狼 价值观*/
.values_in{ padding: 25px 0; background: #ffffff; text-align: center; color: #333333; }
.values_in div{ display: block; }
.values_in p{ font-size: 14px; margin: 8px 0;}
.values_in h3{font-size: 24px; margin: 25px 0 8px 0; color: #000000;}
.values_in span{font-size: 16px; margin: 8px 0;}

.Three_Views{ background: #F5F5F6; width: 100%; padding: 30px 0; }
.Three_Views ul li{ text-align: center; background: #ffffff; float: left; width: 31.333333%; margin: 0 1%; display: block; padding-bottom: 15px;  position: relative; cursor: pointer;}
.Three_Views ul li .inner{ z-index: 11; position: relative; width: 100%; padding: 1px; }
.Three_Views ul li img{width: 100%;}
.Three_Views ul li h2{ font-size: 24px; margin:25px 0;}
.Three_Views ul li p{ font-size: 16px; line-height: 25px;}
.ma_0{ margin-right: 43px;}
.Three_Views ul li:after { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: #EF7E00; z-index: 10; height: 0; width: 100%; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; }
.Three_Views ul li:hover:after { height: 100%; }
.Three_Views ul li:hover h2,.Three_Views ul li:hover p{ color: #FFFFFF;}

/*解决方案*/
.solution{ background: #373D41; width: 100%;}
.solution .main{ width: 80%;}
.solution ul li{ float: left; text-align: center;  width: 20%; cursor: pointer; display: inline-block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;}
.solution ul li b{ position: relative; width: 100%; display: block;}
.solution ul li b img{ width: 100%; height: 100%;}
.solution ul li .inner{ display: block; width: 100%; height: 100%; padding-top: 45%;  box-sizing: border-box; z-index: 11; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transition: all .8s cubic-bezier(.6,0,.2,1);}
.solution ul li .inner span{ border-bottom: 2px solid #FFFFFF; display: block; width: 30px; height: 25px; margin: 0 auto; margin-bottom: 15px;}
.solution ul li .inner p{ font-size: 25px; color: #FFFFFF; line-height: 40px; margin-bottom: 20px;}
.solution ul li .inner a{ font-size: 18px; color: #000000; line-height: 45px; border: 1px solid #333333; display: none; width: 130px; height: 45px; margin: 0 auto; border-radius: 3px;}
.solution ul li .inner a:hover{ background: #EF7E00; color: #FFFFFF; border-color: #EF7E00; transition: all 0.8s;}
.solution ul li:hover a{ display: block;}
.solution ul li:hover p{ color: #000000; }
.solution ul li:hover .inner{padding-top: 35%;}

.solution ul li:after { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: rgba(255,255,255,0.6); z-index: 10; height: 0; width: 100%; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; }
.solution ul li:hover:after { height: 100%; }

@media (max-width: 1200px) {
	.solution .main{ width: 1200px;}
}

/*技术产品线*/
.product_line .pr_li{ width: 19.5%; float: left; background: #EFEFEF; margin: 0 0.25%; }
.pr_li .pr_title{background: #666666; color: #FFFFFF; padding: 30px 0; text-align: center; line-height: 36px; position: relative; z-index: 11; box-sizing: border-box;}
.pr_li .pr_title h3{ font-weight: 600; font-family: "微软雅黑";}
.pr_li .pr_title p{ font-size: 16px;}
.pr_li b{ width: 80px; display: block; height: 80px; border-radius: 50%; text-align: center; line-height: 80px; color: #FFFFFF; background: #666666; font-size: 36px; margin: 0 auto; position: relative; margin-top: -40px; z-index: 12;}
.pr_li .pr_content{ font-size: 14px; box-sizing: border-box; position: relative; margin-top: -40px; padding: 60px 15px 0 15px; line-height: 32px; height: 315px;}
.product_line .pr_li:hover .pr_content{ background: #E3E3E3; box-shadow:0 1px 3px 1px #CCCCCC ; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; }
.product_line .pr_li:hover .pr_title,.product_line .pr_li:hover b{ color: #FFFFFF; background: #00B1EE; transition: all 0.8s;}



@media (max-width: 1366px){

}

@media (max-width: 1200px){
	body { min-width: auto; }
	.wml.width-min { width: 100%; min-width: auto; }
	.main{
		width: 100%;
	}
	.product_line .pr_li .pr_content{
		font-size: 12px;
		text-align: center;
	}
	.wml-know-content{ padding: 10px; }
}

@media (max-width: 1024px){
	.about-slider{
		height: auto;
		background-size: cover;
		background-position: center;
	}
	.wml.display-f{
		flex-wrap: wrap;
	}
	.wml.wml-know-ul{
		flex-direction: row!important;
	}
	.main{
		width: 100%;
	}
	.product_line .pr_li .pr_content{
		line-height: 24px;
	}

	.Three_Views ul li p{ font-size: 14px; }

}
.wml-team-li{
	float: left;
	width: 25%;
	padding: 5px;
    background: #fff;
}
.wml-team-li img{
	width: 100%;
}

@media ( max-width: 923px){
	.wml-know-ul  .wml-know-li{
		width: 50%;
		text-align: center;
		margin: 0 auto;
	}
	
	.product_line .pr_li{
		width: 100%;
		margin: 0 0 20px 0;
	}
	.product_line .pr_li .pr_content{
		text-align: center;
	}
	.product_line{
		padding: 10px;
	}
	.Three_Views ul li p{ font-size: 12px; }
	.Three_Views ul li h2{ margin: 15px 0 }

}

@media ( max-width: 768px){
	.wml-team-li{
		width: 50%;
	}
}

@media (max-width: 640px){
	.Three_Views ul li{ width: 90%; margin: 12px auto; float: none; }
}

@media (max-width: 480px) and (min-width: 320px){
	.wml-know-ul .wml-know-li{
		width: 100%;
	}
	.Three_Views ul li{ width: 96%; }
}