@charset "utf-8";
/*
	外贸狼公共文件
	CSS Document 
	做外贸就用外贸狼
	网址：www.waimaolang.cn
	QQ：1918761727
*/
*{ box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ text-decoration: none; -webkit-font-smoothing: antialiased; transition: all .8s; }

body{ overflow-x: hidden; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}
body {
  font-family: "Microsoft YaHei", Arial;
  font-size: 12px;
  line-height: 1.428571429;
  color: #333333;
}
a{ color: #333; }
a:hover,a:focus {
  color: #ef7e00;
  text-decoration: none;
  transition: all .8s;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset, img {
	border: 0;
}
address, caption, cite, code, dfn, em, th, var, optgroup {
	font-style: normal;
	font-weight: inherit;
}
del, ins {
	text-decoration: none;
}
li {
	list-style: none;
}

q:before, q:after {
	content: '';
}
abbr, acronym {
	border: 0;
	font-variant: normal;
}
sup {
	vertical-align: baseline;
}
sub {
	vertical-align: baseline;
}
input, button, textarea, select, optgroup, option {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
}
input, button, textarea, select {
	*font-size:100%;
}
input, select {
	vertical-align: middle;
}

select, input, button, textarea, button {
	font: 99%;
}
table {
	font-size: inherit;
	font: 100%;
	border-collapse: collapse;
}
pre, code, kbd, samp, tt {
	font-family: monospace;
	*font-size:108%;
	line-height: 100%;
}
img{ max-width: 100%; }

.clearfix:after{ content:""; display:block; clear:both; visibility:hidden; height:0;}
.clear{ clear: both; height: 0; }
.fl-fix{float: left;}
.fr-fix{float: right;}

.font-color-blue{ color: #294fd8; }
.font-color-qianblue{ color: #2181db; }
.font-color-red{ color: #ff0000; }

.width-full { width: 100%; }
.width-harf { width: 50%; }
.width-main { max-width: 1200px; width: 1200px; margin: 0 auto; }
/* margin */
.margin-a { margin: 0 auto; }
.margin-5 { margin: 5px; }
.margin-10 { margin: 10px; }
.margin-12 { margin: 12px; }
.margin-15 { margin: 15px; }
.margin-20 { margin: 20px; }
.margin-25 { margin: 25px; }
.margin-30 { margin: 30px; }

.margin-t-5 { margin-top: 5px; }
.margin-t-10 { margin-top: 10px; }
.margin-t-15 { margin-top: 15px; }
.margin-t-20 { margin-top: 20px; }
.margin-t-30 { margin-top: 30px; }
.margin-t-35 { margin-top: 35px; }
.margin-t-35 { margin-top: 35px; }
.margin-t-40 { margin-top: 40px; }
.margin-t-45 { margin-top: 45px; }
.margin-t-50 { margin-top: 50px; }
.margin-t-55 { margin-top: 55px; }
.margin-t-60 { margin-top: 60px; }
.margin-t-80 { margin-top: 80px; }
.margin-t-100 { margin-top: 100px; }

.margin-r-20 { margin-right: 20px; }
.margin-r-100 { margin-right: 100px; }

.margin-b-5 { margin-bottom: 5px; }
.margin-b-10 { margin-bottom: 10px; }
.margin-b-15 { margin-bottom: 15px; }
.margin-b-20 { margin-bottom: 20px; }
.margin-b-25 { margin-bottom: 25px; }
.margin-b-30 { margin-bottom: 30px; }
.margin-b-35 { margin-bottom: 35px; }
.margin-b-40 { margin-bottom: 40px; }
.margin-b-45 { margin-bottom: 45px; }
.margin-b-50 { margin-bottom: 50px; }
.margin-b-55 { margin-bottom: 55px; }
.margin-b-60 { margin-bottom: 60px; }
.margin-b-80 { margin-bottom: 80px; }
.margin-b-100 { margin-bottom: 100px; }

.margin-l-5 { margin-left: 5px; }
.margin-l-10 { margin-left: 10px; }
.margin-l-15 { margin-left: 15px; }
.margin-l-20 { margin-left: 20px; }
.margin-l-25 { margin-left: 25px; }

.margin-tb-5 { margin-top: 5px; margin-bottom: 5px; }
.margin-tb-10 { margin-top: 10px; margin-bottom: 10px; }
.margin-tb-20 { margin-top: 20px; margin-bottom: 20px; }
.margin-tb-30 { margin-top: 30px; margin-bottom: 30px; }

.margin-lr-10 { margin-left: 10px; margin-right: 10px; }
.margin-lr-20 { margin-left: 20px; margin-right: 20px; }
.margin-lr-25 { margin-left: 25px; margin-right: 25px; }
.margin-lr-30 { margin-left: 30px; margin-right: 30px; }
.margin-lr-35 { margin-left: 35px; margin-right: 35px; }
.margin-lr-50 { margin-left: 50px; margin-right: 50px; }
.margin-lr-100 { margin-left: 50px; margin-right: 100px; }


/* display */
.display-i { display: inline; }
.display-b { display: block; }
.display-f { display: flex; }
.display-ib { display: inline-block; }
/* flex */
.flex-js-sa { justify-content: space-around; }
.flex-js-c { justify-content: center; }
.flex-ac-c { align-content: center; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.flex-4 { flex: 4; }
.flex-as-fe { align-self: flex-end; }
.flex-fd-c { flex-direction: column; }
.flex-fd-cr { flex-direction: column-reverse; }
/* padding */
.padding-5 { padding: 5px; }
.padding-10 { padding: 10px; }
.padding-12 { padding: 12px; }
.padding-15 { padding: 15px; }
.padding-20 { padding: 20px; }
.padding-25 { padding: 25px; }
.padding-30 { padding: 30px; }
.padding-35 { padding: 35px; }
.padding-45 { padding: 45px; }
.padding-50 { padding: 50px; }
.padding-55 { padding: 55px; }
.padding-60 { padding: 60px; }
.padding-65 { padding: 65px; }
.padding-75 { padding: 75px; }
.padding-80 { padding: 80px; }
.padding-100 { padding: 100px; }

.padding-t-5 { padding-top: 5px; }
.padding-t-8 { padding-top: 8px; }
.padding-t-10 { padding-top: 10px; }
.padding-t-15 { padding-top: 15px; }
.padding-t-20 { padding-top: 20px; }
.padding-t-25 { padding-top: 25px; }
.padding-t-30 { padding-top: 30px; }
.padding-t-35 { padding-top: 35px; }
.padding-t-45 { padding-top: 45px; }
.padding-t-50 { padding-top: 50px; }
.padding-t-55 { padding-top: 55px; }
.padding-t-60 { padding-top: 60px; }
.padding-t-65 { padding-top: 65px; }
.padding-t-75 { padding-top: 75px; }
.padding-t-45 { padding-top: 45px; }

.padding-r-20 { padding-right: 20px; }
.padding-r-100 { padding-right: 100px; }

.padding-b-5 { padding-bottom: 5px; }
.padding-b-10 { padding-bottom: 10px; }
.padding-b-15 { padding-bottom: 15px; }
.padding-b-20 { padding-bottom: 20px; }
.padding-b-30 { padding-bottom: 30px; }
.padding-b-35 { padding-bottom: 35px; }
.padding-b-45 { padding-bottom: 45px; }
.padding-b-50 { padding-bottom: 50px; }
.padding-b-55 { padding-bottom: 55px; }
.padding-b-60 { padding-bottom: 60px; }
.padding-b-65 { padding-bottom: 65px; }
.padding-b-75 { padding-bottom: 75px; }
.padding-b-45 { padding-bottom: 45px; }

.padding-l-5 { padding-left: 5px; }
.padding-l-10 { padding-left: 10px; }
.padding-l-15 { padding-left: 15px; }
.padding-l-20 { padding-left: 20px; }
.padding-l-25 { padding-left: 25px; }

.padding-tb-5 { padding-top: 5px; padding-bottom: 5px; }
.padding-tb-10 { padding-top: 10px; padding-bottom: 10px; }
.padding-tb-20 { padding-top: 20px; padding-bottom: 20px; }
.padding-tb-30 { padding-top: 30px; padding-bottom: 30px; }

.padding-lr-10 { padding-left: 10px; padding-right: 10px; }
.padding-lr-20 { padding-left: 20px; padding-right: 20px; }
.padding-lr-25 { padding-left: 25px; padding-right: 25px; }
.padding-lr-30 { padding-left: 30px; padding-right: 30px; }
.padding-lr-35 { padding-left: 35px; padding-right: 35px; }
.padding-lr-50 { padding-left: 50px; padding-right: 50px; }
.padding-lr-100 { padding-left: 100px; padding-right: 100px; }
/* font */
.font-s-12{ font-size: 12px; }
.font-s-13{ font-size: 13px; }
.font-s-14{ font-size: 14px; }
.font-s-15{ font-size: 15px; }
.font-s-16{ font-size: 16px; }
.font-s-18{ font-size: 18px; }
.font-s-20{ font-size: 20px; }
.font-s-22{ font-size: 22px; }
.font-s-24{ font-size: 24px; }
.font-s-28{ font-size: 28px; }
.font-s-30{ font-size: 30px; }
.font-s-32{ font-size: 32px; }
.font-s-36{ font-size: 36px; }
.font-s-42{ font-size: 42px; }
.font-s-60{ font-size: 60px; }

.font-w-b { font-weight: bold; }
/* background */
.bg-w { background-color: white; }
.bg-g { background-color: #f8f8f8; }
/* position */
.position-a { position: absolute; }
.position-r { position: relative; }
.position-f { position: fixed; }
/* color */
.color-w { color: white; }
.color-b { color: #00a8ee; }
.color-333 { color: #333; }
.color-000 { color: #000; }
/* cursor */
.cursor-p { cursor: pointer; }
/* line-height */
.line-h-25 { line-height: 25px; }


/*动态交互*/
.animated{ visibility: visible; }

.animated-left{ animation-name: fadeInLeftBig; }
.animated-right{ animation-name: fadeInRightBig; }
.animated-up{ animation-name: fadeInUpBig; }
.animated-down{ animation-name: fadeInDownBig; }

.animated-delay-1{ animation-delay: .1s; }
.animated-delay-2{ animation-delay: .2s; }
.animated-delay-3{ animation-delay: .3s; }
.animated-delay-4{ animation-delay: .4s; }
.animated-delay-5{ animation-delay: .5s; }
.animated-delay-6{ animation-delay: .6s; }
.animated-delay-7{ animation-delay: .7s; }
.animated-delay-8{ animation-delay: .8s; }
.animated-delay-9{ animation-delay: .9s; }
.animated-delay-10{ animation-delay: 1s; }


@keyframes leftOpen
{
from {left: -230px;}
to {left: 0px;}
}

@-moz-keyframes leftOpen /* Firefox */
{
from {left: -230px;}
to {left: 0px;}
}

@-webkit-keyframes leftOpen /* Safari 和 Chrome */
{
from {left: -230px;}
to {left: 0px;}
}

@-o-keyframes leftOpen /* Opera */
{
from {left: -230px;}
to {left: 0px;}
}