/* CSS reset@ */
@import url(../font/iconfont.css);
@font-face {
  font-family: 'iconfont';
  src: url('../font/iconfont.woff2?t=1690277927284') format('woff2'),
       url('../font/iconfont.woff?t=1690277927284') format('woff'),
       url('../font/iconfont.ttf?t=1690277927284') format('truetype');
}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,a{padding:0;margin:0;}
table {border-collapse: collapse;border-spacing:0;}
del, ins {text-decoration:none;}
fieldset, img {border:0;}.unLock{ overflow:hidden;}
body{ overflow-x:hidden; position:relative;}
body,button,textarea{font:16px/2 "Microsoft YaHei",微软雅黑, Arial, sans-serif;color:#333;-webkit-text-size-adjust: none;}
input,select{font:16px/2 "Microsoft YaHei",微软雅黑, Arial, sans-serif;color:#333;}
input,select,img{vertical-align:middle;}img{ max-width:100%;}
input,select,textarea{outline:none;}
select{height:22px;line-height:18px;padding:2px;}
ul,ol{list-style:none;}
h1, h2, h3, h4, h5, h6 {font-size:16px; font-weight:normal;}
address,cite,dfn,em,var{font-style:normal;}
legend{display:none;}
label{margin:0;cursor:pointer;}
input::-moz-focus-inner,button::-moz-focus-inner{border:0;padding:0;}
.left{float:left;}
.right{float:right;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
a{color:#333;text-decoration:none; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;}
a:hover{color:#12377b;text-decoration:none;}
i{ font-style:normal;}
.txthide{text-indent:-999em;overflow:hidden;line-height:0;font-size:0}
.clearfix:after{content:"";height:0;visibility:hidden;display:block;clear:both;}
.clearfix{zoom:1;}
.clear{clear:both;height:0;overflow:hidden;}
*, *:after, *:before{ padding:0;margin:0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;}
.flex-centerbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.fr{ float:right;}.fl{ float:left;}

.a{
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
@media (min-width:320px){
	.header,.pc-nav-tit,.pc-nav-tit{display: none}
	.mod-header{
		position: fixed;
		height: 50px;
		background-color: #fff;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1021;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		box-shadow: 0 0 5px 0 rgba(0,0,0,0.05)
	}
	.mod-header .logo{
		width: 150px;
		display: block;
		float: left;
		margin-left:20px;
		position: relative;
		top: 48%;
		transform:translateY(-48%);
	}
	.mod-header .logo img,
	.header .mian .logo img{
		width: 100%;
	}
	.mod-header .line{
		float: right;
		width: 50px;
		position: relative;
		height: 50px;
		border-left: 1px solid #e5e5e5;
	}
	.mod-header .line .point{
		position: absolute;
		left: calc(50% - 11px);
		top: 50%;
		transform:translateY(-50%);
		width: 21px;
		height: 18px;
	}
	.mod-header .line .point p{
	    width:100%;
	    height:2px;
	    background-color: #191919;
	    position: absolute;
	    left: 0;
	    -webkit-transition: all 0.8s;
	            transition: all 0.8s;
	}
	.mod-header .line .point p:nth-child(1){
	    top: 0px;
	        -webkit-transform-origin: left top;
	            -ms-transform-origin: left top;
	                transform-origin: left top;
	        -webkit-transform: rotateZ(0deg);
	            -ms-transform: rotateZ(0deg);
	                transform: rotateZ(0deg);
	            -webkit-transition: all 0.5s;
	                -ms-transition: all 0.5s;
	                    transition: all 0.5s;
	}
	.mod-header .line .point.cur p:nth-child(1) {
	    -webkit-transform: rotateZ(45deg);
	            transform: rotateZ(45deg);
	}
	.mod-header .line .point p:nth-child(2){
	    top:7px;
	    -webkit-transition: all 0.5s;
	    transition: all 0.5s;
	}
	.mod-header .line .point.cur p:nth-child(2) {
	    opacity: 0;
	}
	.mod-header .line .point p:nth-child(3){
	    top: 14px;
	        -webkit-transform-origin: left bottom;
	            -ms-transform-origin: left bottom;
	                transform-origin: left bottom;
	        -webkit-transform: rotateZ(0deg);
	            -ms-transform: rotateZ(0deg);
	                transform: rotateZ(0deg);
	            -webkit-transition: all 0.5s;
	                -ms-transition: all 0.5s;
	                    transition: all 0.5s;
	}
	.mod-header .line .point.cur p:nth-child(3){
	        -webkit-transform: rotateZ(-45deg);
	                transform: rotateZ(-45deg);
	}
	.mod-header .share,
	.mod-header .mao,
	.searchNum,
	.mod-header .search{
		height: 28px;
		line-height:28px;
		width: 28px;
		float: right;
		position: relative;
		top: 50%;
		transform:translateY(-50%);
		margin-right:.2rem;
	}
	.searchNum{ width:50px; line-height:12px;}
	.searchNum a{ font-size:12px; color:#666;}
	.mod-header .share{
		width:auto;
	}
	.mod-header .mao{
		width: .49rem;
		/*height:.33rem;
		text-indent:-9999px;
		background: url(../images/en.jpg) center no-repeat;
		background-size:cover;*/
	}
	.mod-header .mao a{ color:#333;}
	.mod-header .search{
		background: url(../images/serch.1.png) center/18px no-repeat;
	}
	.mod-header .share .mbox{
		background-color: #fff;
		position: fixed;
		top:1rem;
		right: 3px;
		display: none;
		padding: 0.5rem;
		width: 96px;
		box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
	}
	.mod-header .share .mbox:before{
		display: block;
		content: '';
		width: 0;
		height: 0;
		border-right: 8px solid transparent;
		border-left: 8px solid transparent;
		border-bottom: 8px solid #fff;
		position: absolute;
		top: -7px;
		right: 0px;
		box-shadow: 0 -10px 20px 0 rgba(0,0,0,0.2);
	}
	.mod-header .share .mbox a{
		margin: 0px 10px 0px 0;
	}
	.mod-header .share .mbox a:last-child{
		margin-right: 0
	}
	.tip-bg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		display: none;
		height: 100%;
		background-color: rgba(0,0,0,0.7);
		z-index: 19;
	}
	.mod-nav{
		width: 100%;
		padding: 10px 20px 0;
		background-color: #fff;
		position: fixed;
		top: 50px;
		left: 0;
		display: none;
		z-index: 200;
		border-top: 1px solid #e5e5e5;
	}
	.mod-nav li{height: 42px; line-height: 42px; display:block; position:relative; overflow:hidden;}
	.mod-nav li .title{
		height: 42px;
		line-height: 42px;
		font-size:15px;
		color: #333;
		position: relative;
		border-bottom: 1px solid rgba(0,0,0,0.05);
		background:url(../images/menu-right.png) no-repeat right center;
		background-size:10px;
	}
	.mod-nav li .title:before{
		content: '';
		position: absolute;
		left: 0;
		height: 2px;
		bottom: -1px;
		background-color: #333;
		width: 0;
		-webkit-transition: all 0.3s;
      	transition: all 0.3s;
	}
	.mod-nav li.on .title{ background:url(../images/menu-down.png) no-repeat right center; background-size:10px;}
	.mod-nav li.on .title:before{
		width: 16px;
	}
	.mod-nav li.on { height:auto; }
	.mod-nav li .child{
		width: 100%;
		display: none;
		padding: 12px 0;
		border-bottom: 1px solid rgba(0,0,0,0.05);
	}
	.mod-nav li .child .tit{
		height:34px;
		line-height:34px;
		font-size:14px;
		color: #555;
	}
	.search-box{
		width: 100%;
		position: fixed;
		z-index: 2500;
		top: 0%;
		left: 0%;
		display: none;
		height: 100%;
		background-color: rgba(0,0,0,0.9);
	}
	.search-box .point{
		display: block;
		width: .4rem;
		height: .4rem;
		position: fixed;
		right: 10%;
		top: 5%;
	}
	.search-box .point:before{
		content: "\2715";
		color: #fff;
		font-size:30px;
	}
	.search-box .box{
		width: 80%;
		height: 80px;
		line-height:80px;
		border-bottom: 1px solid rgba(255,255,255,0.3);
		position: absolute;
		left: 10%;
		top: 25%;
	}
	.search-box .box .txt{
		width: 75%;
		float: left;
		height: 80px;
		line-height: 80px;
		color: #fff;
		border: 0;
		padding:20px 0;
		font-size:26px;
		background-color: transparent;
	}
	.search-box .box .btn{
		width: 80px;
		height: 80px;
		float: right;
		border: 0;
		background: url(../images/serch.2.png) center/26px no-repeat;
	}
}
@media (min-width:1280px){
	.mod-header,
	.mod-header .share .mbox{
		display: none;
	}
	.header{
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		display: block;
		width: 100%;
		box-sizing:border-box;
		height: 110px;
		position:relative;
		top: 0;
		left: 0%;
		z-index: 30;
		box-shadow: 0px 6px 7px -7px rgba(0,0,0,0.03);		
		border-bottom:1px solid #e6e6e6;
	}
	.header .mian{
		width: 1600px;
		margin: 0 auto;
		max-width: 96%;
		height: 110px;
		position:relative;
	}
	.header .mian .logo{
		display: block;
		width: 290px;
		position:absolute;
		left:0;
		top: 50%;
		transform:translateY(-50%);
	}
	.header .mian .share,
	.header .mian .mao{
		float: right;
		height: 36px;
		line-height:36px;
		position: relative;
		z-index: 5;
		top: 50%;
		transform:translateY(-50%);
		margin-left: 18px;
		cursor: pointer;
	}
	.header .mian .search{
		width: 50px;
		float:right;
		height: 50px;
		line-height:50px;
		position:relative;
		z-index: 5;
		top: 50%;
		transform:translateY(-50%);
		cursor: pointer;
	}
	.header .mian .share{
		z-index: 10;
	}
	.header .mian .mao{
		text-align:center;
		color:#12377b;
		/*background: url(../images/en.jpg) left center no-repeat;
		padding-left:35px;*/
	}
	.header .mian .mao a{ color:#333;}
  .header .mian .mao a,.header .mian .share a{display: block;}
	.header .mian .mao a:hover{ color:#12377b;}
	.header .mian .share .mbox{
		padding: 25px 30px;
		background-color: #fff;
	    position: fixed;
	    top: 50px;
	    right: 0px;
	    display: none;
	    width: 96px;
	    box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
	}
	.header .mian .search .mbox{
		height: 40px;
		width: 0px;
		min-width: 40px;
		position: absolute;
		right: 0;
		top: 5px;
		overflow: hidden;
		z-index: 10;
		border: 1px solid #fff;
		-webkit-transition: all 0.3s;
	            transition: all 0.3s;
	}
	.header .mian .search .mbox .txt{
		width: 175px;
		float: left;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		background-color: #fff;
		color: #666;
		padding: 0 8px;
		border: 0;
	}
	.header .mian .search .mbox .submit{
		width: 36px;
		height: 36px;
		cursor: pointer;
		z-index: 5;
		position: absolute;
		background:#fff url(../images/search.png) center no-repeat;
		background-size:24px;
		border:none;
		right: 0;
		top: 0;
		float: right;
		padding: 0;
	}
	.header .mian .search:hover .mbox{
		width: 240px;
		border: 1px solid #dfdfdf;
	}
	.header .mian .search:hover .submit{
		border:none;
	}
	.header .mian .nav{
		/*position: relative;*/
		/*left: 50%;*/
		width:100%;
		height: 110px;
		width: auto;
		text-align:center;
		-webkit-transition: all 0.3s;
	            transition: all 0.3s;
		/*transform:translateX(-50%);*/
	}
	.header .mian .nav .f-cb{ display:inline-block; margin:0 0 0 14vw;}
	.header .mian .nav ._li{
		height: 110px;
		float: left;
		line-height: 110px;
		margin-left: 3.2vw;
		position: relative;
	}
	.header .mian .nav li.active:before{
		display: block;
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		background-color: #153b86;
		height: 2px;
		width: 0%;
		-webkit-transition: all 0.3s;
	            transition: all 0.3s;
	}
	.header .mian .nav li.active:before{
		width: 100%;
		left: 0;
	}
	.header .mian .nav ._li .child{
		position: fixed;
		left: 0;
		top: 110px;
		width: 100%;
		display: none;
		padding: 30px 0 70px;
		background-color: #fff;
		box-shadow: 0 5px 10px 0 rgba(0,0,0,0.1)
	}
	.header .mian .nav ._li .child .tt{
		float:left;
		width:31.333%;
		margin:0 2.5% 0 0;
		line-height: 43px;
		font-size: 18px;		
		position: relative;
		text-align:left;
		border-bottom: 1px solid #e6e6e6;
	}
	.header .mian .nav ._li .menu5 .tt{
		width:18%;
		margin:0 2.5% 0 0;
	}
	.header .mian .nav ._li .child .tt:nth-of-type(3n),.header .mian .nav ._li .menu5 .tt:nth-of-type(5n){
		margin:0;
	}	
	.header .mian .nav ._li .menu5 .tt:nth-of-type(3n){ margin:0 2.5% 0 0;}
	.header .mian .nav ._li .btn-close-nav-ani {
        z-index: 2;
        display: block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        position: absolute;
        top: -15px;
        right: 0;
    }
	.header .mian .nav ._li .btn-close-nav-ani .iconfont {
        color: #000;
        font-size: 25px;
    }
	.header .mian .nav ._li .child .tt span{
		display: inline-block;
		position: relative;
	}
	.header .mian .nav ._li .child .tt a{
		color: #666;
		display: inline-block;		
		-webkit-transition: all 0.3s;
	            transition: all 0.3s;
	}
	.header .mian .nav ._li .child .tt span a:hover{
		color: #153b86;
	}
	.header .mian .nav ._li .child .btn a{
		display: block;
		width: 85px;
		height: 32px;
		margin: 25px auto 10px;
		line-height: 32px;
		border-radius: 3px;
		color: #fff;
		font-size: 14px;
		text-align: center;
		background-color: #0d1438;
		-webkit-transition: all 0.3s;
	            transition: all 0.3s;
	}
	.header .mian .nav ._li .child .btn a:hover{
		background-color: rgba(13,20,56,0.7);
	}

	.header .mian .nav ._li:first-child{
		margin-left: 0
	}
	.header .mian .nav ._li:hover {
	    z-index: 2;
	}
	.header .mian .nav ._li .title{
		font-size: 16px;
		color: #222;
		position: relative;
		height: 110px;
		line-height: 110px;
		-webkit-transition: all 0.3s;
      	transition: all 0.3s;
	}

	.header .mian .nav ._li .title:hover,
	.header .mian .nav ._li.on .title,.header .mian .nav ._li.now .title{
		color: #12377b;
	}
	.child-container{ width: 85.652%; max-width: 1430.016px; margin:0 auto; padding:0 25px; position:relative;}
    .header .mian .nav ._li >a::after{
        font-size: 12px;
		color:#333;
        font-family: "iconfont" !important;
        position:absolute;
        top: 50%;
        right: -20px;
        transform: translateY(-48%);
        visibility: hidden;
        content: "\e65e";
    }
    .header .mian .nav ._li >a:hover::after{
        visibility: visible;
    }
    .header .mian .nav ._li.active >a::after{
        -webkit-transform: translateY(-47%) rotate(-180deg);
        -ms-transform: translateY(-47%) rotate(-180deg);
        transform: translateY(-47%) rotate(-180deg);
        font-weight: normal;
		visibility: visible;
    }
    .header .mian .nav ._li.active:hover >a::after{
        visibility: visible;
        display: block;
    }

}
	
	

@media (max-width:1220px){
	.header .mian .mao{ display:none;}	
}
@media (max-width:1100px){
	.bannerli{ margin-top:70px;}
	.bannerli1{ margin-top:70px;}
	.bannerli8{ margin-top:70px;}
	.product-container .box{ margin-top:70px;}
}


@media (min-width:768px){
	.mod-header{
		height: 70px;
	}
	.mod-header .logo{
		width: 148px;
	}
	.mod-header .share, .mod-header .mao, .mod-header .search {
	    height: 50px;
	    width: 40px;
	    margin-right: 15px;
	}
	.searchNum{ width:auto; height:50px; line-height:50px; margin-right:25px;}
	.searchNum a{ color:#666;}
	.mod-header .search {
	    background: url(../images/serch.png) center/19px no-repeat;
	}
	.mod-header .mao {
		width:40px;
		line-height:50px;
		margin:0 15px 0 10px;
	}
	.mod-header .mao a{ font-size:15px; color:#333;}
	.mod-header .share {
	    background: url(../images/share.png) center/21px no-repeat;
	}
	.mod-header .line .point {
	    left: calc(50% - 15px);
	    width: 30px;
	    height: 24px;
	}
	.mod-header .line .point p:nth-child(2) {
	    top: 10.5px;
	}
	.mod-header .line .point p:nth-child(3) {
	    top: 21px;
	}
	.mod-header .line {
	    width: 70px;
	    height: 70px;
	}
	.mod-nav{
		top: 70px;
		padding: 15px 40px 0;
	}
	.mod-nav li{height: 50px; line-height: 50px; display:block; position:relative; overflow:hidden;}

	.mod-nav li .title {
	    height: 50px;
	    line-height: 50px;
	    font-size: 16px;
	}
	.mod-nav li .child{
		padding: 10px 0;
	}
	.mod-nav li .child .tit {
	    height: 36px;
	    line-height: 36px;
	    font-size: 14px;
	}
	.mod-nav li.on .title:before{
		width: 25px;
	}
	.mod-nav li.on { height:auto; }
	.mod-nav li.on .child{/* margin:50px 0 0;*/}

}

/*--------------------------------------------------------------
 # Slider / Slick
 --------------------------------------------------------------*/
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  float: left;
  height: 100%;
  outline: 0;
  min-height: 1px;
  display: none;
}
[dir="rtl"] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}
.slick-disabled {
    opacity: 0;
    pointer-events:none;
}

footer{ width:100%; background:#0f2341;}
footer .footerWrapper{ padding:60px 0 90px;}
footer .footer-nav{ float:left; width:80%; padding:0 5% 0 0; overflow:hidden;}
footer .footer-nav li{ float:left; width:16.666%;}
footer .footer-nav li>a{ font-size:20px; color:#fff;}
footer .footer-nav .serList{ padding:40px 0 0;}
footer .footer-nav .serList a{ font-size:16px; line-height:36px; display:block; color:#adbbca;}
footer .footer-nav .serList a:hover{ color:#fff;}

.footer-share{ float:right; width:20%;}
.share-title{ font-size:20px; color:#fff; padding:0 0 40px;}
.share-box li{display:inline-block;margin:0 1.5%;vertical-align:middle}
.share-box li a{ width:50px; height:50px; line-height:50px; display:inline-block; border-radius:50%; border:1px solid; color:rgba(255,255,255,0.5); position:relative; text-align:center;}
.share-box li a span{ font-size:25px;color:#fff}
.share-box li .wechat-qrcode{position:absolute;z-index:999;top:-246px;left:-89px;width:200px;height:222px;color:#666;font-size:12px;text-align:center;-webkit-transition:all 200ms;transition:all 200ms;display:none}
.share-box li .wechat-qrcode{border:1px solid #eee;background-color:#fff;box-shadow:0 2px 10px #aaa}
.share-box li .wechat-qrcode.show{display:block}
.share-box li .wechat-qrcode:after{content:'';position:absolute;left:50%;margin-left:-6px;top:-13px;width:0;height:0;border-width:6px 6px 8px 6px;border-style:solid;border-color:transparent transparent #f3f3f3 transparent}
.share-box li .wechat-qrcode button,.share-box li .wechat-qrcode .share-close{background:transparent;border:0;font-size:25px;position:absolute;top:-12px;right:2px;color:#000 !important}
.share-box li .wechat-qrcode h4{height:26px;line-height:26px;font-size:12px;background-color:#f3f3f3;margin:0;padding:0;color:#777}
.share-box li .wechat-qrcode .qrcode{width:138px;margin:5px auto;line-height:18px;}
.share-box li .wechat-qrcode img{width:100%;vertical-align:middle}
.share-box li .wechat-qrcode:after{border-width:8px 6px 6px 6px;top:auto;border-color:#f3f3f3 transparent transparent transparent}




footer .footer-copyright{ width:100%; background:#11284b; overflow:hidden;}
footer .footer-copyright-Wrapper{ color:#8aa6c5; padding:22px 0; line-height:24px; text-align:center;}
footer .footer-copyright a{ font-size:16px; color:#8aa6c5;}
footer .footer-copyright a:hover{ color:#fff;}

.izl-rmenu{position:fixed; right:0; margin-right:20px; bottom:20px; padding-bottom:20px; z-index:999;
 _position:absolute; 
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
 /* for IE6 */ overflow:visible;}
.izl-rmenu .btn{width:51px; height:51px; margin-bottom:9px; cursor:pointer; position:relative;}
.izl-rmenu .btn-top{font-family:Arial, Helvetica, sans-serif; width:45px;height:45px; border-radius:5px; padding:5px 0 0;line-height:45px;text-align:center;background-color:#173784;color:#fff;font-size:14px;font-weight:bold;cursor:pointer; display:none;filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7; position:relative;}
.izl-rmenu .btn-top::after{ font-size:12px;color:#fff;font-family:"iconfont" !important;position:absolute; left:16px; top:-9px; content:"\e65d"}
.izl-rmenu .btn-top:hover{filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity:1;}
/*  css animation  */
.trans{
/*    -webkit-transition: all .4s ease-in;
    -moz-transition:all .4s ease-in;
    -o-transition:all .4s ease-in;
    -ms-transition:all .4s ease-in;
    transition:all .4s ease-in;*/
}

@media (min-width:325px){
  /* page animation  */
  .ani-view {
      opacity: 0;
      opacity: 1\9;
      opacity: 1\0/;
      opacity: 1\0/;
  }
  @-webkit-keyframes fadeInDown{
      0% {
          opacity:0;
          -webkit-transform:translateY(40px)
      }
      100% {
          opacity:1;
          -webkit-transform:translateY(0)
      }
  }
  @-moz-keyframes fadeInDown{
      0% {
          opacity:0;
          -moz-transform:translateY(40px)
      }
      100% {
          opacity:1;
          -moz-transform:translateY(0)
      }
  }
  @-o-keyframes fadeInDown {
      0% {
          opacity:0;
          -o-transform:translateY(40px)
      }
      100% {
          opacity:1;
          -o-transform:translateY(0)
      }
  }
  @keyframes fadeInDown {
      0% {
          opacity:0;
          transform:translateY(40px)
      }
      100% {
          opacity:1;
          transform:translateY(0)
      }
  }

  .ani-view.fade-in-down{
      opacity:0;
      opacity: 1\9;
      opacity: 1\0/;
      -webkit-transform:translateY(40px);
      -moz-transform:translateY(40px);
      -o-transform:translateY(40px);
      transform:translateY(40px);
  }
  .ani-view.fadeInDown{
      -webkit-animation:fadeInDown 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -moz-animation:fadeInDown 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -o-animation:fadeInDown 1s cubic-bezier(.25,.74,.22,.99) forwards;
      animation:fadeInDown 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -webkit-animation-delay:0.1s; 
      -moz-animation-delay:0.1s;
      -o-animation-delay:0.1s;
      animation-delay:0.1s;
  }


  @-webkit-keyframes fadeInLeft {
      0% {
          opacity:0;
          -webkit-transform:translateX(-100px)
      }
      100% {
          opacity:1;
          -webkit-transform:translateX(0)
      }
  }
  @-moz-keyframes fadeInLeft {
      0% {
          opacity:0;
          -moz-transform:translateX(-100px)
      }
      100% {
          opacity:1;
          -moz-transform:translateX(0)
      }
  }
  @-o-keyframes fadeInLeft {
      0% {
      opacity:0;
      -o-transform:translateX(-100px)
      }
      100% {
      opacity:1;
      -o-transform:translateX(0)
      }
  }
  @keyframes fadeInLeft {
      0% {
      opacity:0;
      transform:translateX(-100px)
      }
      100% {
      opacity:1;
      transform:translateX(0)
      }
  }
  .ani-view.fade-in-left{
      opacity:0;
      opacity: 1\9;
      opacity: 1\0/;
      -webkit-transform:translateX(-100px);
      -moz-transform:translateX(-100px);
      -o-transform:translateX(-100px);
      transform:translateX(-100px);
  }
  .ani-view.fadeInLeft {
      -webkit-animation:fadeInLeft 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -moz-animation:fadeInLeft 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -o-animation:fadeInLeft 1s cubic-bezier(.25,.74,.22,.99) forwards;
      animation:fadeInLeft 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -webkit-animation-delay:0.1s; 
      -moz-animation-delay:0.1s;
      -o-animation-delay:0.1s;
      animation-delay:0.1s;
  }

  @-webkit-keyframes fadeInRight {
      0% {
      opacity:0;
      -webkit-transform:translateX(100px)
      }
      100% {
      opacity:1;
      -webkit-transform:translateX(0)
      }
  }
  @-moz-keyframes fadeInRight {
      0% {
      opacity:0;
      -moz-transform:translateX(100px)
      }
      100% {
      opacity:1;
      -moz-transform:translateX(0)
      }
  }
  @-ms-keyframes fadeInRight {
      0% {
      opacity:0;
      -ms-transform:translateX(100px)
      }
      100% {
      opacity:1;
      -ms-transform:translateX(0)
      }
  }
  @-o-keyframes fadeInRight {
      0% {
      opacity:0;
      -o-transform:translateX(100px)
      }
      100% {
      opacity:1;
      -o-transform:translateX(0)
      }
  }
  @keyframes fadeInRight {
      0% {
      opacity:0;
      transform:translateX(100px)
      }
      100% {
      opacity:1;
      transform:translateX(0)
      }
  }
  .ani-view.fade-in-right{
      opacity:0;
      opacity: 1\9;
      opacity: 1\0/;
      -webkit-transform:translateX(100px);
      -moz-transform:translateX(100px);
      -o-transform:translateX(100px);
      transform:translateX(100px);
  }
  .ani-view.fadeInRight {
      -webkit-animation:fadeInRight 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -moz-animation:fadeInRight 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -o-animation:fadeInRight 1s cubic-bezier(.25,.74,.22,.99) forwards;
      animation:fadeInRight 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -webkit-animation-delay:0.1s; 
      -moz-animation-delay:0.1s;
      -o-animation-delay:0.1s;
      animation-delay:0.1s;
  }
  .ani-view.ani_delay2{
    -webkit-animation-delay:0.2s; 
    -moz-animation-delay:0.2s;
    -o-animation-delay:0.2s;
    animation-delay:0.2s;
  }
  .ani-view.ani_delay3{
    -webkit-animation-delay:0.3s; 
    -moz-animation-delay:0.3s;
    -o-animation-delay:0.3s;
    animation-delay:0.3s;
  }
  .ani-view.ani_delay4{
    -webkit-animation-delay:0.4s; 
    -moz-animation-delay:0.4s;
    -o-animation-delay:0.4s;
    animation-delay:0.4s;
  }
  .ani-view.ani_delay5{
    -webkit-animation-delay:0.5s; 
    -moz-animation-delay:0.5s;
    -o-animation-delay:0.5s;
    animation-delay:0.5s;
  }
  .ani-view.ani_delay6{
    -webkit-animation-delay:0.6s; 
    -moz-animation-delay:0.6s;
    -o-animation-delay:0.6s;
    animation-delay:0.6s;
  }
  .ani-view.ani_delay7{
    -webkit-animation-delay:0.7s; 
    -moz-animation-delay:0.7s;
    -o-animation-delay:0.7s;
    animation-delay:0.7s;
  }
  .ani-view.ani_delay8{
    -webkit-animation-delay:0.8s; 
    -moz-animation-delay:0.8s; 
    -o-animation-delay:0.8s; 
    animation-delay:0.8s; 
  }
  .ani-view.ani_delay9{
    -webkit-animation-delay:0.9s; 
    -moz-animation-delay:0.9s;
    -o-animation-delay:0.9s;
    animation-delay:0.9s;
  }
  .ani-view.ani_delay10{
    -webkit-animation-delay:1s; 
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
    animation-delay:1s;
  }
  .ani-view.ani_delay11{
    -webkit-animation-delay:1.1s; 
    -moz-animation-delay:1.1s; 
    -o-animation-delay:1.1s; 
    animation-delay:1.1s; 
  }
  .ani-view.ani_delay12{
    -webkit-animation-delay:1.2s; 
    -moz-animation-delay:1.2s; 

    -o-animation-delay:1.2s; 
    animation-delay:1.2s; 
  }
  .ani-view.ani_delay13{
    -webkit-animation-delay:1.3s; 
    -moz-animation-delay:1.3s;  
    -o-animation-delay:1.3s;  
    animation-delay:1.3s;  
  }
  .ani-view.ani_delay14{
    -webkit-animation-delay:1.4s; 
    -moz-animation-delay:1.4s; 
    -o-animation-delay:1.4s; 
    animation-delay:1.4s; 
  }
  .ani-view.ani_delay15{
    -webkit-animation-delay:1.5s; 
    -moz-animation-delay:1.5s;  
    -o-animation-delay:1.5s;  
    animation-delay:1.5s;  
  }
  .ani-view.ani_delay16{
    -webkit-animation-delay:1.6s; 
    -moz-animation-delay:1.6s;
    -o-animation-delay:1.6s;
    animation-delay:1.6s;
  }
  .ani-view.ani_delay17{
    -webkit-animation-delay:1.7s; 
    -moz-animation-delay:1.7s; 
    -o-animation-delay:1.7s; 
    animation-delay:1.7s; 
  }
  .ani-view.ani_delay18{
    -webkit-animation-delay:1.8s; 
    -moz-animation-delay:1.8s; 
    -o-animation-delay:1.8s; 
    animation-delay:1.8s; 
  }
  .ani-view.ani_delay19{
    -webkit-animation-delay:1.9s; 
    -moz-animation-delay:1.9s; 
    -o-animation-delay:1.9s; 
    animation-delay:1.9s; 
  }
  .ani-view.ani_delay20{
    -webkit-animation-delay:2s; 
    -moz-animation-delay:2s; 
    -o-animation-delay:2s; 
    animation-delay:2s; 
  }





.move_right {
-webkit-animation-name : move_right;
animation-name : move_right;
-webkit-animation-duration : 1s;
animation-duration : 1s;
-webkit-animation-iteration-count : 1;
animation-iteration-count : 1;
-webkit-animation-fill-mode : forwards;
animation-fill-mode : forwards;
}

.image-home{position:relative;display:inherit;max-width:100%}
.image-home:before{position:absolute;content:"";top:0;left:0;width:0;height:0;margin:auto;background-color:rgba(255,255,255,0.1);-webkit-transition:all 0.3s ease-out 0s;transition:all 0.3s ease-out 0s}
.image-home:after{content:"";position:absolute;right:0;bottom:0;width:0;height:0;background-color:rgba(255,255,255,0.1);-webkit-transition:all 0.3s ease-out 0s;transition:all 0.3s ease-out 0s}
.image-home:hover:before,.image-home:hover:after{width:100%;height:100%}

}

@media screen and (max-width:319px){
	html{font-size:42.66px}
}
@media screen and (min-width:320px){
	html{font-size:42.66px}
}
@media screen and (min-width:360px){
	html{font-size:48px}
}
@media screen and (min-width:375px){
	html{font-size:50px}
}
@media screen and (min-width:384px){
	html{font-size:51.2px}
}
@media screen and (min-width:400px){
	html{font-size:53.34px}
}
@media screen and (min-width:414px){
	html{font-size:55.2px}
}
@media screen and (min-width:424px){
	html{font-size:56.54px}
}
@media screen and (min-width:480px){
	html{font-size:64px}
}
@media screen and (min-width:540px){
	html{font-size:72px}
}
@media screen and (min-width:720px){
	html{font-size:96px}
}
@media screen and (min-width:750px){
	html{font-size:100px}
}

@media screen and (min-width:1280px){
	html{font-size:18px}
}