.rel { position: relative;}
.abs {position: absolute;}
.fixed {position: fixed;}
.fl {float: left;}
.fr {float: right;}
@color: #0075c7;
@color2: #005E9F;
@color3: #eedfc2;
@min1004: ~"screen and (min-width: 1004px)";
@max1600: ~"(max-width: 1600px)";
@max1440: ~"(max-width: 1440px)";
@max1366: ~"(max-width: 1366px)";
@max1280: ~"(max-width: 1280px)";
@max1004: ~"(max-width: 1004px)";
.regular {font-family: "regular";}
.medium {font-family: "medium";}
.flex {
    display: flex;
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
    display: -moz-box; /* Firefox 17- */  
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
    display: -moz-flex; /* Firefox 18+ */  
    display: -ms-flexbox; /* IE 10 */  
}
.flex-wrap {
    flex-flow: wrap;
}
.flex-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.inline-block {display: inline-block;}
.block { display: block;}
.hide {display: none;}


.txt-over(@num) {/* 多行省略溢出显示省略号*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @num;
    overflow: hidden;
}
.txt {overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}/* 一行省略溢出显示省略号*/
.bold {font-weight: 700;}
.txt-center {text-align: center;}
.txt-left {text-align: left;}
.txt-right { text-align: right;}
.height(@vh){
    height: calc(@vh / 920 * 100vh);
}
.linH(@fontSize, @lineHeight){
    line-height: calc(@lineHeight / @fontSize);
}

.flex1() {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
.flex2() {
   display: flex; 
   display: -webkit-flex; 
   justify-content: space-between; 
   -webkit-justify-content: space-between; 
};
.flex3() {
   display: flex; 
   display: -webkit-flex; 
   justify-content: center; 
   -webkit-justify-content: center; 
};
.flex4() {
   display: flex; 
   display: -webkit-flex; 
   flex-direction: column; 
   -webkit-flex-direction: column;
   justify-content: center; 
   -webkit-justify-content: center; 
};
.flex5() {
   display: flex; 
   display: -webkit-flex; 
   align-items: center; 
   -webkit-align-items: center; 
   justify-content: space-between; 
   -webkit-justify-content: space-between; 
};
.flex6() {
   display: flex; 
   display: -webkit-flex; 
   align-items: center; 
   -webkit-align-items: center; 
   justify-content: center; 
   -webkit-justify-content: center; 
   flex-direction: column; 
   -webkit-flex-direction: column;
};
.flex7() {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: space-between;
    -webkit-justify-content: space-between; 
}

.ss span{ position: relative; z-index: 1; }
.ss i{ display: block;
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0; }
.ss i:before{ position: relative; content: ''; display: block; margin-top: 100%; }
.ss i:after{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; }
.ss:hover i{ -moz-animation: anim-out .75s;
    -webkit-animation: anim-out .75s;
    animation: anim-out .75s }
.ss:hover i:after {
    -moz-animation: anim-out-pseudo .75s;
    -webkit-animation: anim-out-pseudo .75s;
    animation: anim-out-pseudo .75s
}

.img_rotate{ -moz-animation:rotate 15s infinite linear;  -webkit-animation:rotate 15s infinite linear;  animation:rotate 15s infinite linear; }
@-moz-keyframes rotate{ 0%{  -moz-transform:rotate(0deg);  } 100%{  -moz-transform:rotate(-360deg);  } }
@-webkit-keyframes rotate{ 0%{  -webkit-transform:rotate(0deg);  } 100%{  -webkit-transform:rotate(-360deg);  } }
@keyframes rotate{ 0%{  transform:rotate(0deg);  } 100%{  transform:rotate(-360deg);  } }

// 动画过度
.transition(@element: all, @time: .3s){
    transition: @element @time;
    -o-transition: @element @time;
    -moz-transition: @element @time;
    -webkit-transition: @element @time;
}
// 延迟执行
.transition2(@element, @time, @time2){
    transition: @element @time @time2;
    -o-transition: @element @time @time2;
    -moz-transition: @element @time @time2;
    -webkit-transition: @element @time @time2;
}
// 以相同速度开始至结束的过渡效果
.linear{
    transition-timing-function: linear;
    -o-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
}

// 慢速开始，然后变快，然后慢速结束的过渡效果
.ease{
    transition-timing-function: ease;
    -o-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    -webkit-transition-timing-function: ease;
}

// 以慢速开始的过渡效果
.ease-in{
    transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
}

// 以慢速结束的过渡效果
.ease-out{
    transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}

// 以慢速开始和结束的过渡效果
.ease-in-out{
    transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
}

// 元素旋转
.rotate(@deg){
    transform: rotate(@deg);
    -o-transform: rotate(@deg);
    -moz-transform: rotate(@deg);
    -webkit-transform: rotate(@deg);
}
// 元素Y轴旋转
.rotateY(@deg){
    transform: rotateY(@deg);
    -o-transform: rotateY(@deg);
    -moz-transform: rotateY(@deg);
    -webkit-transform: rotateY(@deg);
}
// 元素水平移动
.translateX(@x){
    transform: translateX(@x);
    -o-transform: translateX(@x);
    -moz-transform: translateX(@x);
    -webkit-transform: translateX(@x);
}
// 元素纵向移动
.translateY(@y){
    transform: translatey(@y);
    -o-transform: translatey(@y);
    -moz-transform: translatey(@y);
    -webkit-transform: translatey(@y);
}
// 元素水平和纵向移动
.translate(@x, @y){
    transform: translate(@x, @y);
    -o-transform: translate(@x, @y);
    -moz-transform: translate(@x, @y);
    -webkit-transform: translate(@x, @y);
}

// 元素放大或缩小
.scale(@x){
    transform: scale(@x) translateZ(0);
    -o-transform: scale(@x) translateZ(0);
    -moz-transform: scale(@x) translateZ(0);
    -webkit-transform: scale(@x) translateZ(0);
}
// 元素倾斜
.skew(@x:0deg, @y:0deg){
    transform: skew(@x, @y);
    -o-transform: skew(@x, @y);
    -moz-transform: skew(@x, @y);
    -webkit-transform: skew(@x, @y);
}
.transform(@item1:scale(1, 1), @item2:rotate(0deg), @item3:translate(0, 0)){
    transform: @item1 @item2 @item3;
    -o-transform: @item1 @item2 @item3;
    -moz-transform: @item1 @item2 @item3;
    -webkit-transform: @item1 @item2 @item3;
}

@-webkit-keyframes anim-out{0%{width:0%}100%{width:100%}}
@-moz-keyframes anim-out{0%{width:0%}100%{width:100%}}
@-ms-keyframes anim-out{0%{width:0%}100%{width:100%}}
@keyframes anim-out{0%{width:0%}100%{width:100%}}
@-webkit-keyframes anim-out-pseudo{0%{background:rgba(0,0,0,0.25)}100%{background:0 0}}
@-moz-keyframes anim-out-pseudo{0%{background:rgba(0,0,0,0.25)}100%{background:0 0}}
@-ms-keyframes anim-out-pseudo{0%{background:rgba(0,0,0,0.25)}100%{background:0 0}}
@keyframes anim-out-pseudo{0%{background:rgba(0,0,0,0.25)}100%{background:0 0}}

@keyframes fadeOfOpacity {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes am_top{
    0%{ -webkit-transform:translate(0,30px);opacity:0}
    100%{ -webkit-transform:translate(0,0px);opacity:1}
}

@-webkit-keyframes am_top{
    0%{ -webkit-transform:translate(0,30px);opacity:0}
    100%{ -webkit-transform:translate(0,0px);opacity:1}
}

@keyframes am_left{
    0%{ -webkit-transform:translate(30px,0);opacity:0}
    100%{ -webkit-transform:translate(0,0px);opacity:1}
}

@-webkit-keyframes am_left{
    0%{ -webkit-transform:translate(30px,0);opacity:0}
    100%{ -webkit-transform:translate(0,0px);opacity:1}
}

@keyframes am_right{
    0%{ -webkit-transform:translate(-30px,0);opacity:0}
    100%{ -webkit-transform:translate(0,0px);opacity:1}
}

@-webkit-keyframes am_right{
    0%{ -webkit-transform:translate(-30px,0);opacity:0}
    100%{ -webkit-transform:translate(0,0px);opacity:1}
}

@keyframes upDown {
  from {
    transform: translateY(0); }
  to {
    transform: translateY(-10px); } }
@-webkit-keyframes upDown {
  from {
    -webkit-transform: translateY(0); }
  to {
    -webkit-transform: translateY(-10px); } }

.before { opacity: 0;visibility: hidden;}
.after { opacity: 1;visibility: visible;}

.input(@c:#ccc,@f: 14px) {
    /* input placeholder  */
    ::-webkit-input-placeholder { /* WebKit browsers */
        color: @c;
        font-size: @f;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: @c;
        font-size: @f;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: @c;
        font-size: @f;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
        color:@c;
        font-size: @f;
    }
}
.upper {text-transform: uppercase;}
.middle {vertical-align: middle;}
.background {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.coverbackground {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}