/*全局设置*/
*{
    position:relative;
}
body{
    margin:0;
    padding:0;
}
img
{
    width:100%;
}




/*边框*/
.红边框{
    border:solid 1px #c4261d;
}
.灰边框{
    border:solid 1px #e6e6e6;
}
.上下灰边框
{
    border-top:solid 1px #e6e6e6;
    border-bottom:solid 1px #e6e6e6;
}






/*浮动div组合，float*/
.内部浮动行{zoom:1} 
.内部浮动行:after,.内部浮动行:before{
    content:'';
    display:block;
    clear:both;
}
.浮动列{
    display:block;
    box-sizing:border-box;
    position:relative;
    float:left;
}
.浮动列居右{
    display:block;
    box-sizing:border-box;
    position:relative;
    float:right;
}



/*div的特殊设置*/
.超出隐藏{overflow:hidden;}
.消除浮动{clear:both;}
.块元素{display:block;}
.行内块元素{display:inline-block;}



/*投影*/
.向下投影{
    box-shadow: 0px 5px 10px #888888;
}
.投影{
    box-shadow: 5px 5px 10px #888888;
}
.黑色投影{
    box-shadow: 2px 2px 5px #000;
}



/*背景色*/
.白色背景{
    background-color:#ffffff;
}
.红色背景{
    background-color:#c4261d;
}
.浅灰背景{
    background-color:#f3f3f3;
}
.粉红背景{
    background-color:#f64e5d;
}
.深黑背景{
    background-color:#272536;
}




/*半透明背景*/
.黑色背景透明5{
    background:transparent;
    background-color:rgba(0,0,0,0.5);
}
.黑色背景透明8{
    background:transparent;
    background-color:rgba(0,0,0,0.8);
}
.白色背景透明5{
    background:transparent;
    background-color:rgba(255,255,255,0.5);
}
.白色背景透明8{
    background:transparent;
    background-color:rgba(255,255,255,0.8);
}



/*背景图设置*/
.背景缩放{
    background-repeat: no-repeat; 
    background-size:100% 100%;
}
.背景平铺{
    background-repeat: repeat; 
}
.背景滚动{
    background-attachment: scroll; 
}
.背景不滚动{
    background-attachment: fixed; 
}





/*文字颜色*/
.白色字{
    color: #FFFFFF;
}
.纯黑字{
    color: #000000;
}
.深黑字{
    color: #272536;
}
.红色字{
    color: #c4261d;
}
.深灰字{
    color:#4e4e4e;
}
.中灰字{
    color:#999999;
}
.浅灰字{
    color:#d1d1d1;
}


/*字号*/
.字号20{
    font-size:20px;
}
.字号30{
    font-size:30px;
}
.字号40{
    font-size:40px;
}
.字号50{
    font-size:50px;
}
.字号60{
    font-size:60px;
}
.字号70{
    font-size:70px;
}
.字号80{
    font-size:80px;
}

/*行高*/
.行高20{
    line-height:20px;
}
.行高30{
    line-height:30px;
}
.行高40{
    line-height:40px;
}
.行高50{
    line-height:50px;
}
.行高60{
    line-height:60px;
}
.行高70{
    line-height:70px;
}
.行高80{
    line-height:80px;
}
.行高90{
    line-height:90px;
}
.行高100{
    line-height:100px;
}

/*文字样式*/
.斜体{font-style:italic;}
.粗体{font-weight:bold;}


/*内边距，padding*/
.内边距10{
    padding:10px;
}
.内边距20{
    padding:20px;
}
.内边距30{
    padding:30px;
}
.内边距40{
    padding:40px;
}
.内边距100{
    padding:100px;
}
.内边距上下10{
    padding:10px 0px 10px 0px;
}
.内边距上下20{
    padding:20px 0px 20px 0px;
}
.内边距上下40{
    padding:40px 0px 40px 0px;
}
.内边距上下100{
    padding:100px 0px 100px 0px;
}
.内边距左右10{
    padding:0px 10px 0px 10px;
}
.内边距左右20{
    padding:0px 20px 0px 20px;
}



/*外边距，margin*/
.外边距10{
    margin:10px;
}
.外边距20{
    margin:20px;
}
.外边距30{
    margin:30px;
}
.外边距100{
    margin:100px;
}
.外边距下30{
    margin-bottom:30px;
}
.外边距上下10{
    margin-top:10px;
    margin-bottom:10px;
}
.外边距上下100{
    margin-top:100px;
    margin-bottom:100px;
}

/*手动间隔行*/
.间隔行5{
    width:100%;
    height:5px;
    display:block;
}
.间隔行10{
    width:100%;
    height:10px;
    display:block;
}
.间隔行20{
    width:100%;
    height:20px;
    display:block;
}
.间隔行30{
    width:100%;
    height:30px;
    display:block;
}
.间隔行40{
    width:100%;
    height:40px;
    display:block;
}
.间隔行60{
    width:100%;
    height:60px;
    display:block;
}
.间隔行80{
    width:100%;
    height:80px;
    display:block;
}
.间隔行100{
    width:100%;
    height:100px;
    display:block;
}





/*百分比宽度*/
.宽度100{
    width:100%;
}
.宽度80{
    width:80%;
}
.宽度70{
    width:70%;
}
.宽度65{
    width:65%;
}
.宽度60{
    width:60%;
}
.宽度50{
    width:50%;
}
.宽度45{
    width:45%;
}
.宽度40{
    width:40%;
}
.宽度33{
    width:33.33%;
}
.宽度30{
    width:30%;
}
.宽度25{
    width:25%;
}
.宽度20{
    width:20%;
}
.宽度10{
    width:10%;
}
.宽度5{
    width:5%;
}

/*像素宽度*/
.宽度1200px{
    width:1200px;
}
.宽度1000px{
    width:1000px;
}
.宽度800px{
    width:800px;
}
.宽度200px{
    width:200px;
}
.宽度100px{
    width:100px;
}








/*高度*/
.高度2px{
    height:2px;
}
.高度30px{
    height:30px;
}
.高度40px{
    height:40px;
}
.高度60px{
    height:60px;
}
.高度90px{
    height:90px;
}
.高度100px{
    height:100px;
}
.高度120px{
    height:120px;
}
.高度140px{
    height:140px;
}
.高度160px{
    height:160px;
}
.高度180px{
    height:180px;
}
.高度200px{
    height:200px;
}
.高度250px{
    height:250px;
}
.高度300px{
    height:300px;
}








/*自身对齐方式*/
.自身右对齐{
    margin-left:auto;
    margin-right:0px;
}
.自身居中{
    margin-left:auto;
    margin-right:auto;
}



/*内部对齐方式*/
.内部左对齐{
    text-align:left;
}
.内部右对齐{
    text-align:right;
}
.内部居中{
    text-align:center;
}




/*圆角*/
.圆角全5{
    border-radius:5px;
}
.圆角全10{
    border-radius:10px;
}
.圆角全15{
    border-radius:15px;
}
.圆角全20{
    border-radius:20px;
}
.圆角全25{
    border-radius:25px;
}
.圆角全30{
    border-radius: 30px;
}