@charset "UTF-8";
/*布局通用文件*/

/*-moz-  Firefox */
/*-webkit-  Safari 和 Chrome */
/*-o-  Opera */
/*-ms-  IE */
/*内容通用盒子*/
.contain{width:1200px;margin:0 auto;}

/*浮动*/
.fl{float: left!important;}
.fr{float: right!important;}
.relative{position:relative !important;}
.absolute{position:absolute !important;}
.clear{clear: both;zoom: 1;}
.clear:after{display:block;clear:both;content:"";visibility:hidden;height:0;}

/*flex布局（行布局）*/
.flex-layout {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -o-flex-direction: row;
    -ms-flex-direction: row;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

/*列布局*/
.flex-layout-column {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -o-flex-direction: column;
    -ms-flex-direction: column;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

/*flex里子项的水平对齐方式:其中h为horizontal的简写*/

/*左对齐*/
.flex-h-align-left {
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -o-justify-content: flex-start;
    -ms-justify-content: flex-start;
}

/*右对齐*/
.flex-h-align-right {
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -o-justify-content: flex-end;
    -ms-justify-content: flex-end;
}

/*居中*/
.flex-h-align-center {
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center;
}

/*左右对齐*/
.flex-h-align-between {
    justify-content: space-between;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -o-justify-content: space-between;
    -ms-justify-content: space-between;
}

/*子项之间的距离是两边距离的两倍*/
.flex-h-align-around {
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -o-justify-content: space-around;
    -ms-justify-content: space-around;
}

/*flex里子项的垂直对齐方式：其中v为vertical的简写*/

/*顶部对齐*/
.flex-v-align-top {
    align-items: flex-start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    -o-align-items: flex-start;
    -ms-align-items: flex-start;
}

/*底部对齐*/
.flex-v-align-bottom {
    align-items: flex-end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    -o-align-items: flex-end;
    -ms-align-items: flex-end;
}

/*居中*/
.flex-v-align-center {
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -o-align-items: center;
    -ms-align-items: center;
}

/*项目的第一行文字的基线对齐*/
.flex-v-align-baseline {
    align-items: baseline;
    -webkit-align-items: baseline;
    -moz-align-items: baseline;
    -o-align-items: baseline;
    -ms-align-items: baseline;
}

/*项目占满整个容器的高度*/
.flex-v-align-full {
    align-items: stretch;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    -o-align-items: stretch;
    -ms-align-items: stretch;
}

/*flex里多行子项的垂直对齐方式:其中m为more的简写;如果项目只有一行，该属性不起作用。*/

/*顶部对齐*/
.flex-m-align-top {
    align-content: flex-start;
    -webkit-align-content: flex-start;
    -moz-align-content: flex-start;
    -o-align-content: flex-start;
    -ms-align-content: flex-start;
}

/*底部对齐*/
.flex-m-align-bottom {
    align-content: flex-end;
    -webkit-align-content: flex-end;
    -moz-align-content: flex-end;
    -o-align-content: flex-end;
    -ms-align-content: flex-end;
}

/*居中*/
.flex-m-align-center {
    align-content: center;
    -webkit-align-content: center;
    -moz-align-content: center;
    -o-align-content: center;
    -ms-align-content: center;
}

/*上下对齐*/
.flex-m-align-between {
    align-content: space-between;
    -webkit-align-content: space-between;
    -moz-align-content: space-between;
    -o-align-content: space-between;
    -ms-align-content: space-between;
}

/*每行子项之间的距离是两边距离的两倍*/
.flex-m-align-around {
    align-content: space-around;
    -webkit-align-content: space-around;
    -moz-align-content: space-around;
    -o-align-content: space-around;
    -ms-align-content: space-around;
}

/*全部子项自动伸展，直至充满整个容器*/
.flex-m-align-full {
    align-content: stretch;
    -webkit-align-content: stretch;
    -moz-align-content: stretch;
    -o-align-content: stretch;
    -ms-align-content: stretch;
}


/*flex里子项基于其他子项的放大比例，默认为0,即不放大*/
.flex-item-grow-1 {
    flex-grow: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -o-flex-grow: 1;
    -ms-flex-grow: 1;
}

.flex-item-grow-2 {
    flex-grow: 2;
    -webkit-flex-grow: 2;
    -moz-flex-grow: 2;
    -o-flex-grow: 2;
    -ms-flex-grow: 2;
}

.flex-item-grow-3 {
    flex-grow: 3;
    -webkit-flex-grow: 3;
    -moz-flex-grow: 3;
    -o-flex-grow: 3;
    -ms-flex-grow: 3;
}

.flex-item-grow-4 {
    flex-grow: 4;
    -webkit-flex-grow: 4;
    -moz-flex-grow: 4;
    -o-flex-grow: 4;
    -ms-flex-grow: 4;
}

.flex-item-grow-5 {
    flex-grow: 5;
    -webkit-flex-grow: 5;
    -moz-flex-grow: 5;
    -o-flex-grow: 5;
    -ms-flex-grow: 5;
}

.flex-item-grow-6 {
    flex-grow: 6;
    -webkit-flex-grow: 6;
    -moz-flex-grow: 6;
    -o-flex-grow: 6;
    -ms-flex-grow: 6;
}

/*项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。*/
.flex-item-shrink-0 {
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -o-flex-shrink: 0;
    -ms-flex-shrink: 0;
}

/*允许flex里子项的垂直对齐方式*/
/*默认值；继承flex容器align-items属性*/
.flex-item-align-auto {
    align-self: auto;
    -webkit-align-self: auto;
    -moz-align-self: auto;
    -o-align-self: auto;
    -ms-align-self: auto;
}

/*顶部对齐*/
.flex-item-align-top {
    align-self: flex-start;
    -webkit-align-self: flex-start;
    -moz-align-self: flex-start;
    -o-align-self: flex-start;
    -ms-align-self: flex-start;
}

/*底部对齐*/
.flex-item-align-bottem {
    align-self: flex-end;
    -webkit-align-self: flex-end;
    -moz-align-self: flex-end;
    -o-align-self: flex-end;
    -ms-align-self: flex-end;
}

/*居中*/
.flex-item-align-center {
    align-self: center;
    -webkit-align-self: center;
    -moz-align-self: center;
    -o-align-self: center;
    -ms-align-self: center;
}

/*项目的第一行文字的基线对齐*/
.flex-item-align-baseline {
    align-self: baseline;
    -webkit-align-self: baseline;
    -moz-align-self: baseline;
    -o-align-self: baseline;
    -ms-align-self: baseline;
}

/*项目占满整个容器的高度*/
.flex-item-align-ful {
    align-self: stretch;
    -webkit-align-self: stretch;
    -moz-align-self: stretch;
    -o-align-self: stretch;
    -ms-align-self: stretch;
}