/*======================================================
                    清除内外边距
======================================================*/

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,        /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li,                                 /* list elements 列表元素 */
pre,                                                    /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea,             /* form elements 表单元素 */
th, td {                                                /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}

/*======================================================
                    设置默认字体
======================================================*/
html,
button, input, select, textarea {
    font: 14px/1.5 Arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif;
    color: #000;
}

h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

p{text-align: justify;}

address, cite, dfn, em, var { font-style: normal; }                             /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; }    /* 统一等宽字体 */
small { font-size: 12px; }                                                      /* 小于 12px 的中文很难阅读，让 small 正常化 */

/*======================================================
                    重置列表元素
======================================================*/
ul, ol { list-style: none; }

/*======================================================
                    重置文本格式元素
======================================================*/
a {
    color: #000;
    text-decoration: none;
}

a:hover{
    text-decoration: none;
}

abbr[title], acronym[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

q:before, q:after { content: ''; }


/*======================================================
                    重置表单元素
======================================================*/
legend { color: #000; }
fieldset, img {
    border: 0;
    outline: none;
    vertical-align: middle;
}
button, input, select, textarea {
    font-size: 100%;
    outline: none;
}

input[type=text]:focus,
input[type=password]:focus,
textarea:focus{
    border-color: #000;
}

input[type=button],
input[type=submit],
input[type=reset],
button{
    cursor: pointer;
}

/*======================================================
                    重置表格元素
======================================================*/
table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

/*======================================================
                    重置hr
======================================================*/
hr {
    border: 0;
    height: 1px;
}

/*======================================================
                去除百度地图左下角logo及文字
======================================================*/
.anchorBL{
    display:none;
}

/*======================================================
                    loader
======================================================*/
.loader{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 99999;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
}

.loader:before,
.loader:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
}

.loader1:before,
.loader1:after{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0.6;
    -webkit-animation: loader1 2.0s infinite ease-in-out;
    animation: loader1 2.0s infinite ease-in-out;
}

.loader1:after {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.loader2{
    -webkit-animation: loader2 2.0s infinite linear;
    animation: loader2 2.0s infinite linear;
}

.loader2:before,
.loader2:after{
    display: inline-block;
    width: 60%;
    height: 60%;
    border-radius: 100%;
    -webkit-animation: loader2Dot 2.0s infinite ease-in-out;
    animation: loader2Dot 2.0s infinite ease-in-out;
}

.loader2:after {
    top: auto;
    bottom: 0px;
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.loader3{
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    background-color: #000;
    -webkit-animation: loader3 1.2s infinite ease-in-out;
    animation: loader3 1.2s infinite ease-in-out;
}

.loader4{
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
}

.loader4:before,
.loader4:after{
    width: 10px;
    height: 10px;
    -webkit-animation: loader4 1.8s infinite ease-in-out;
    animation: loader4 1.8s infinite ease-in-out;
}

.loader4:after {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

@keyframes loader1 {
    0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }
    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

@keyframes loader2 {
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg)
    }
}

@keyframes loader2Dot {
    0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }
    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

@keyframes loader3 {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

@keyframes loader4 {
    25% {
        transform: translateX(42px) rotate(-90deg) scale(0.5);
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    }
    50% {
        transform: translateX(42px) translateY(42px) rotate(-179deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    }
    50.1% {
        transform: translateX(42px) translateY(42px) rotate(-180deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    }
    75% {
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }
    100% {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}

/*======================================================
                    common
======================================================*/
textarea{
    width: 100%;
    height: 200px;
}

.input{
    width: 100%;
    padding: 0 8px;
}

.input-xs{
    height: 30px;
}

.input-s{
    height: 35px;
}

.input-m{
    height: 40px;
}

.input-l{
    height: 45px;
}

.input-xl{
    height: 50px;
}

.btn{
    cursor: pointer;
    transition: border .4s, background .4s;
}

.btn:hover{
    border-color: #000;
    color: #fff;
    background-color: #000;
}

.btn-xs{
    height: 30px;
    line-height: 28px;
}

.btn-s{
    height: 35px;
    line-height: 33px;
}

.btn-m{
    height: 40px;
    line-height: 38px;
}

.btn-l{
    height: 45px;
    line-height: 43px;
}

.btn-xl{
    height: 50px;
    line-height: 48px;
}

.h0{
    height: 0;
}

.h5px{
    height: 5px;
}

.h10px{
    height: 10px;
}

.h15px{
    height: 15px;
}

.h20px{
    height: 20px;
}

.h25px{
    height: 25px;
}

.h30px{
    height: 30px;
}

.h35px{
    height: 35px;
}

.h40px{
    height: 40px;
}

.h45px{
    height: 45px;
}

.h50px{
    height: 50px;
}

.h55px{
    height: 55px;
}

.h60px{
    height: 60px;
}

.h65px{
    height: 65px;
}

.h70px{
    height: 70px;
}

.h75px{
    height: 75px;
}

.h80px{
    height: 80px;
}

.h85px{
    height: 85px;
}

.h90px{
    height: 90px;
}

.h95px{
    height: 95px;
}

.h100px{
    height: 100px;
}

.w0{
    width: 0;
}

.w025{
    width: 25%;
}

.w033{
    width: 33.33%;
}

.w05{
    width: 50%;
}

.w066{
    width: 66.66%;
}

.w075{
    width: 75%;
}

.w1{
    width: 100%;
}

.posits{
    position: static;
}

.positr{
    position: relative;
}

.posita{
    position: absolute;
}

.positf{
    position: fixed;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.clearfix:after{
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

.ellipsis {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.visible{
    visibility: visible;
}

.invisible{
    visibility: hidden;
}

.block{
    display: block;
}

.none{
    display: none;
}

.grayscale {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: all 0.4s;
}

.opct0{
    opacity: 0;
}

.opct1{
    opacity: 1;
}

.txtalil{
    text-align: left;
}

.txtalic{
    text-align: center;
}

.txtalir{
    text-align: right;
}

.txtalij{
    text-align: justify;
}

.mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    transition: background .4s;
}

.all{
    position: relative;
    opacity: 0;
    transition: opacity .4s;
}