/*鼠标特效*/
/*底部边框下边距增加、底部边框变高，变色*/
.bd-bottom-hover-pd:hover a{border-bottom:2px solid #ec6a21;padding-bottom: 39px;}


.bd-bottom-width-0-hover-100 span{position: absolute;top: 100%;left: 0;width:0%;height: 2px;border-bottom:1px solid #fff;transition: all 1s;}
.bd-bottom-width-0-hover-100:hover span{width: 100%;border-color: #ec6a21;}
/*底部边框长度增加10-100*/
.bd-bottom-width-1-hover-10 span{position: absolute;top: 180%;left: 0;width:20%;height: 1px;border-bottom:1px solid #fff;transition: all 1s;}
.bd-bottom-width-1-hover-10:hover span{width: 100%;border-color: #ec6a21;}
/*字体颜色右黑色过度为橙色*/
.txt-hover-orange:hover,.txt-hover-orange:hover .txt-a,.txt-hover-orange:hover a,.txt-hover-orange:hover .txt-36,.txt-hover-orange:hover .txt-6,.txt-hover-orange:hover .txt-white{color: #ec6a21;}

.bg-hover-white:hover .bg-orangee{background: #fff;}
.font-hover-blod:hover,.font-hover-blod:hover .h4,.font-hover-blod:hover .h3{font-size: 2rem;}

.po-re{position: relative;}
.transition-1{-webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;}
.bd-orange{border:1px solid #ec6a21;}
.bd-bottom-orange-2{border-bottom: 2px solid #ec6a21;}
.bd-bottom-lack-05{color:rgba(0, 0, 0, 0.5);}
.bd-2{border:2px solid #000;}

.shadow-1:hover{  -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
    box-shadow:  0px 10px 10px rgba(0, 0, 0, 0.1);}

/*.pd-top-bottom-hover pd:hover{padding: 0px 10px 20px 10px;}*/

.shadow-1{   -webkit-box-shadow: 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px rgba(0, 0, 0, 0.3);transition: all 1s;}


.btn01 {
    cursor:pointer;
    width: 100%;
    overflow: hidden;
    position: relative;
 /*   -webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);*/
}
.fa {
    margin: 0 1px;
    /*background: rgb(256, 256, 256);*/
/*    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);*/
    /*-webkit-border-radius: 50%;*/
    /*-moz-border-radius: 50%;*/
    /*border-radius: 50%;*/
    /*color: rgba(50, 50, 50, 0.9);*/
    display: inline-block;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    /*width: 40px;*/
    /*height: 40px;*/
}
.bd-bottom-2-red{border-bottom: 2px solid #f00;}



/*从上往下效果*/
/*遮罩*/
.btn01 .ovrly1 {
    background: rgba(0, 0, 0, 0.76);
    height: 100%;
    left: 0;
    top: -100%;
    width: 100%;
    position: absolute;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.btn01:hover .ovrly1 {
    top: 0;
}
/*文字*/
.btn01 .buttons1 {
    position: absolute;
    top: -100%;
    left: 50%;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.btn01:hover .buttons1 {
    top: 50%;
}
/*从下往上效果*/
/*遮罩*/
.btn01 .ovrly2 {
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    left: 0;
    bottom: -100%;
    width: 100%;
    position: absolute;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.btn01:hover .ovrly2 {
    bottom: 0;
}
/*文字*/
.btn01 .buttons2 {
    position: absolute;
    bottom: -100%;
    left: 50%;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.btn01:hover .buttons2 {
    bottom: 50%;
}
/*遮罩从左往右效果*/
.btn01 .ovrly3 {
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    left:-100%;
    top:0;
    width: 100%;
    position: absolute;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.btn01:hover .ovrly3 {
    left: 0;
}
/*文字*/
.btn01 .buttons3 {
    position: absolute;
    bottom: 50%;
    left: -100%;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.btn01:hover .buttons3 {
    left: 50%;
}
/*遮罩从右往左效果*/
.btn01 .ovrly3 {
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    right:-100%;
    top:0;
    width: 100%;
    position: absolute;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.btn01:hover .ovrly3 {
    right: 0;
}
/*文字*/
.btn01 .buttons4 {
    position: absolute;
    bottom: 50%;
    right: -100%;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.btn01:hover .buttons4 {
    right: 50%;
}
/*图片*/
.btn01 img.img0 {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
}
.btn01 img{
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    max-height: 100%;
    transition: all 1s;
}
.btn01:hover img.img0{}
/*图片缩放：缩小图*/
.btn01:hover img.img-small{transform: scale(0.5);}
/*图片缩放：原图*/
.btn01:hover img.img-auto{transform: scale(1);}
/*图片缩放：放大图*/
.btn01:hover img.img-big{transform: scale(1.2);}
/*图片缩放：超大图*/
.btn01:hover img.img-large{transform: scale(1.5);}
/*图片缩放：超大图*/
.btn01:hover img.img-maxlarge{transform: scale(2);}
/*颜色鼠标效果*/
.bd-bottom-hover{position: absolute;top:50%;left: 0;width:50px;color:#000;height: 2px;transition: all 1s;}
/*.txt-black-hover-orange:hover .bd-bottom-hover{width: 100%;height: 2px;}*/
.txt-black-hover-orange a{color: black;transition: all 1s;}
.txt-black-hover-orange:hover a{color: #ec6a21;}
.txt-hover-black{color: #fff;background: #000;cursor: pointer;transition: all 1s;}
.txt-hover-black:hover{color: #000;background: #fff;}
.txt-hover-red:hover,.txt-hover-red:hover a{color: red;cursor: pointer;}
.txt-hover-white:hover,.txt-hover-white:hover a{color:white;cursor: pointer;}
.bg-hover-black:hover,.bg-hover-black:hover a{background: #000;}
.font-hover-20:hover{font-size: 20px;}
.pd-hover-left-b:hover{text-indent:20px;}
.pd-hover-left-b{text-indent:0px;transition: 1s;}

.txt-undecoration{text-decoration: none;}

.pd-right-ml{padding-right: 100px;}



@media (min-width:1000px){

}
.pd-left-l-x{}
.pd-right-ml-x{}

.dd-xx-img{  -webkit-transition: 0.9s;  transition: 0.9s;overflow: hidden;}
.dd-xx-img:hover{  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);cursor: pointer;}

/*.icn{  -webkit-transition: 0.9s;
  transition: 0.9s;border:1px solid #f00;width: 10%;}
.icn:hover{  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);}*/



/* Effect 5 */
.hi-icon-effect-5 .hi-icon {
	/*box-shadow: 0 0 0 4px rgba(255,255,255,1);
	overflow: hidden;
	-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
	-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
	transition: background 0.3s, color 0.3s, box-shadow 0.3s;*/
	/*box-shadow: 0 0 0 4px rgba(255,255,255,1);*/
	overflow: hidden;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition:  all 0.3s;
}

.hi-icon-effect-5 .hi-icon:after {
	display: none;
}

.hi-icon-effect-5 .hi-icon:hover {
	/*background: rgba(255,255,255,1);*/
	color: #ec6a21;
	/*box-shadow: 0 0 0 8px rgba(255,255,255,0.3);*/
}

.hi-icon-effect-5a .hi-icon:hover:before {
	-webkit-animation: toRightFromLeft 1s forwards;
	-moz-animation: toRightFromLeft 1s forwards;
	animation: toRightFromLeft 1s forwards;
	/*forwards则是停在动画最后的的那个画面*/
}

/*animation-fill-mode，定义动画播放时间之外的状态,顾名思义，要么就是在动画播放完了之后给它一个状态 animation-fill-
/*mode : none | forwards | backwards |both; none，播放完之后不改变默认行为，默认值，forwards则是停在
/*动画最后的的那个画面，backwards则是回调到动画最开始出现的画面，both则应用为动画结束或开始的状态，*/

@-webkit-keyframes toRightFromLeft {
	49% {
		-webkit-transform: translate(100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}
@-moz-keyframes toRightFromLeft {
	49% {
		-moz-transform: translate(100%);
	}
	50% {
		opacity: 0;
		-moz-transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}
@keyframes toRightFromLeft {
	49% {
		transform: translate(100%);
	}
	50% {
		opacity: 0;
		transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}