pc 端 初始化默认的一些样式;
// res.css
*,::before,::after{
padding:0;margin:0;
outline:none;
-webkit-tap-highlight-color:transparent;
}
/* 改变盒子模型 */
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-size:14px;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
line-height:normal;
margin:0 auto;
min-height:100%;color:#333;
}
/* 表单元素不继承 font-size font-family属性*/
form{
font-size:14px;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
table{border-collapse:collapse;}
em,i{font-style:normal;}
strong{font-weight:normal;}
ol,ul{list-style:none;}
input,textarea{
border:none;
/*去掉默认的边框*/
outline:none;resize:none;
-webkit-appearance:none;
}
a{color:#333333;text-decoration:none;}
/* 图片自适应 */
img{
border:none;
vertical-align:middle;
height:auto;
max-100%;
auto;
}
h1,h2,h3,h4,h5,h6{font-weight:normal;line-height:1;}
/*清除浮动*/
.clearfix:before,.clearfix:after{
content:"";
display:block;
visibility:hidden;
height:0;
clear:both;
}
.clearfix{zoom:1;}
/* 浮动 */
.fl{float:left;}
.fr{float:right;}
/* 定位 */
.posr{position:relative;}
.posa{position:absolute;}
.posf{position:fixed;}
/* 定位居中 */
.all_center{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
}
/* 垂直居中 */
.y_center{
position:absolute;
top:50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
}
/* 水平居中 */
.x_center{
position:absolute;
left:50%;
transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
}
/* 文字超出省略 */
.ellipsis_2{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
}
.ellipsis_1{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:1;
overflow:hidden;
}
/*============== flex布局start ==========flex布局start================flex布局start============== */
/* 设置为flex布局后子元素的float、clear和vertical-align将失效 */
/* 父元素-横向排列（主轴） 左到右*/
.flex_r{
/*定义一个伸缩盒子*/
display:box;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
/* 09版 */
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
/* 12版 */
-webkit-flex-direction:row;
-moz-flex-direction:row;
-ms-flex-direction:row;
-o-flex-direction:row;
flex-direction:row;
}
/* 横向从右到左 */
.flex_r_back{
/*定义一个伸缩盒子*/
display:box;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:reverse;
-webkit-flex-direction:row-reverse;
-moz-flex-direction:row-reverse;
-ms-flex-direction:row-reverse;
flex-direction:row-reverse;
-webkit-box-pack:end
}
/* ================================== */
/* 纵向排列（主轴）从上到下 */
.flex_c{
display:box;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-moz-flex-direction:column;
-ms-flex-direction:column;
-o-flex-direction:column;
flex-direction:column;
}
/* 主轴设置横向就是水平方向；或者设置为竖直就是垂直方向(在主轴上的对齐方式;) */
/* （定义了在主轴上的对齐方式） */
.f_jc_s{
-webkit-box-pack:start;
-webkit-justify-content:flex-start;
-ms-flex-pack:start;
justify-content:flex-start
}
.f_jc_c{
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center
}
/* 两端对齐 */
.f_jc_b{
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
}
/* 每个项目之间距离都相等; 只有12版标准版;*/
.f_jc_a{
-webkit-justify-content:space-around;
-moz-justify-content:space-around;
-ms-justify-content:space-around;
-o-justify-content:space-around;
justify-content:space-around;
}
.f_jc_end{
-webkit-box-pack:end;
-webkit-justify-content:flex-end;
-ms-flex-pack:end;
justify-content:flex-end;
}
/* (定义了项目在交叉轴上的对齐方式) */
.f_ai_s{
-webkit-box-align:start;
-webkit-align-items:flex-start;
-ms-flex-align:start;
align-items:flex-start;
}
.f_ai_c{
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
}
/* 基线对齐 */
.f_ai_base{
-webkit-box-align:baseline;
-webkit-align-items:baseline;
-ms-flex-align:baseline;
align-items:baseline;
}
.f_ai_end{
-webkit-box-align:end;
-webkit-align-items:flex-end;
-ms-flex-align:end;
align-items:flex-end;
}
/* 上下对齐铺满 */
.f_ai_stretch{
-webkit-box-align:stretch;
-webkit-align-items:stretch;
-ms-flex-align:stretch;
align-items:stretch;
}
/* ============================*/
/*多跟主轴的对齐方式;*/
.flex_ac{
-webkit-align-content:center;
-moz-align-content:center;
-ms-align-content:center;
-o-align-content:center;
align-content:center;
}
/* 允许换行 */
.flex_wrap{
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
-o-flex-wrap:wrap;
flex-wrap:wrap;
}
.flex1{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-flex:1;-moz-box-flex:1;}
.flex2{-webkit-flex:2;-ms-flex:2;flex:2;-webkit-box-flex:2;-moz-box-flex:2;}
/* 单个属性和其他项目的对齐方式 */
.flex_self{
-webkit-align-self:flex-end;
-moz-align-self:flex-end;
-ms-align-self:flex-end;
-o-align-self:flex-end;
align-self:flex-end;
}
/*============== flex布局end ==========flex布局end ================flex布局end ============== */
/* 盒子模型 */
.box_border{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.box_content{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}
.mask{position:fixed;100%;height:100%;background:rgba(0,0,0,.3);left:0px;top:0px;}
.maskp{position: absolute;background:rgba(0,0,0,.3);left:0px;top:0px;}
/* 基础样式类 end */
/* 公共样式类 start */
.mauto{margin-left:auto;margin-right:auto;}
.main1200{1200px;margin-left:auto;margin-right:auto;}
.main1170{1170px;margin-left:auto;margin-right:auto;}
.main1000{ 1000px;margin-right:auto;margin-left:auto;}
.main900{ 900px;margin-right:auto;margin-left:auto;}
.main800{ 800px;margin-right:auto;margin-left:auto;}
.main700{ 700px;margin-right:auto;margin-left:auto;}
.main600{ 600px;margin-right:auto;margin-left:auto;}
.main500{ 500px;margin-right:auto;margin-left:auto;}
.main400{ 400px;margin-right:auto;margin-left:auto;}
.w100{100%;}
.w75{75%;}
.w60{60%;}
.w50{50%;}
.w33{33.3%}
.w25{25%;}
.w25{20%;}
.w15{15%;}
.w10{10%;}
.h100{height:100%}
.h75{height:75%}
.h60{height:60%}
.h50{height:50%}
.h33{height:33%}
.h25{height:25%}
.h10{height:10%}
.h24px{height: 24px}
.h26px{height: 26px}
.h28px{height: 28px}
.h30px{height: 30px}
.h32px{height: 32px}
.h34px{height: 34px}
.h36px{height: 36px}
.h38px{height: 38px}
.h40px{height: 40px}
.h42px{height: 42px}
.h43px{height: 43px}
.h45px{height: 45px}
.h46px{height: 46px}
.h48px{height: 48px}
.h50px{height: 50px}
.h52px{height: 52px}
.h54px{height: 54px}
.h56px{height: 56px}
.lh24{line-height: 24px}
.lh25{line-height: 25px}
.lh26{line-height: 26px}
.lh27{line-height: 27px}
.lh28{line-height: 28px}
.lh30{line-height: 30px}
.lh32{line-height: 32px}
.lh34{line-height: 34px}
.lh36{line-height: 36px}
.lh38{line-height: 38px}
.lh40{line-height: 40px}
.lh42{line-height: 42px}
.lh43{line-height: 43px}
.lh44{line-height: 44px}
.lh45{line-height: 45px}
.lh46{line-height: 46px}
.lh47{line-height: 47px}
.lh48{line-height: 48px}
.lh49{line-height: 49px}
.lh50{line-height: 50px}
.lh52{line-height: 52px}
.lh54{line-height: 54px}
.lh56{line-height: 56px}
.over_h{overflow:hidden;}
.over_a{overflow:auto;}
.over_x_a{overflow-x:auto;}
.over_x_h{overflow-x:hidden;}
.over_y_a{overflow-y:auto;}
.over_y_h{overflow-y:hidden;}
.dis_b{display:block;}
.dis_n{display:none;}
.dis_i{display:inline-block;}
.fw400{font-weight:400;}
.fw500{font-weight:500;}
.fw600{font-weight:600;}
.fw_b{font-weight:bold;}
/*贯穿线*/
.td_line{text-decoration:line-through;}
/*文本下的一条线*/
.td_under{text-decoration:underline;}
/*上划线*/
.td_over{text-decoration:overline;}
/*设置线的颜色*/
.td_color_red{text-decoration-color:red;}
/*下划线设置为波浪线*/
.td_style_wavy{text-decoration-style:wavy;}
/*把此元素放置在父元素的中部。*/
.ver_m{vertical-align:middle;}
/*元素放置在父元素的基线上*/
.ver_b{vertical-align:baseline;}
/*垂直对齐文本的下标。*/
.ver_s{vertical-align:sub;}
/*垂直对齐文本的上标*/
.ver_super{vertical-align:super;}
/*把元素的顶端与行中最高元素的顶端对齐*/
.ver_top{vertical-align:top;}
/*把元素的顶端与父元素字体的顶端对齐*/
.ver_text_top{vertical-align:text-top;}
/*手形*/
.cur_p{cursor:pointer;}
/*光标呈为十字线*/
.cur_c{cursor:crosshair;}
/*此光标指示某对象可被移动*/
.cur_m{cursor:move;}
/*指示文本*/
.cur_t{cursor:text;}
/*此光标指示程序正忙*/
.cur_wait{cursor:wait;}
/*此光标指示可用的帮助（通常是一个问号或一个气球)*/
.cur_help{cursor:help;}
.ti_2{text-indent:2em;}
.tc{text-align:center;}
.tl{text-align:left;}
.tr{text-align:right;}
/*内容透明*/
.opacity6{opacity:0.6;filter:alpha(opacity=60);}
/*设置字符间距 字母和汉字*/
.t_ls10{letter-spacing:10px;}
/*保留文字中的空白*/
.t_ws_p{white-space:pre;}
/* 背景色 */
.bg_333{background-color:#333;}
.bg_666{background-color:#666;}
.bg_999{background-color:#999;}
.bg_000{background-color:#000;}
.bg_fff{background-color:#ffffff;}
.bg_black{background-color:black;}
.bg_white{background-color:white;}
.bg_red{background-color:red;}
.bg_green{background-color:green;}
.bg_blue{background-color:blue;}
.bg_deeppink{background-color:deeppink;}
.bg_yellow{background-color:yellow;}
/* 颜色 */
.cr_333{color:#333;}
.cr_666{color:#666;}
.cr_999{color:#999;}
.cr_fff{color:#ffffff;}
.cr_000{color:#000000;}
.cr_white{color:white;}
.cr_black{color:black;}
.cr_red{color:red;}
.cr_green{color:green;}
.cr_blue{color:blue;}
.cr_pink{color:pink;}
.cr_yellow{color:yellow;}
/* 边框 */
.br_1_333{border:1px solid #333;}
.br_1_666{border:1px solid #666;}
.br_1_999{border:1px solid #999;}
.br_1_000{border:1px solid #000000;}
.br_t_1_333{border-top:1px solid #333;}
.br_t_1_666{border-top:1px solid #666;}
.br_t_1_999{border-top:1px solid #999;}
.br_t_1_000{border-top:1px solid #000000;}
.br_b_1_333{border-bottom:1px solid #333;}
.br_b_1_666{border-bottom:1px solid #666;}
.br_b_1_999{border-bottom:1px solid #999;}
.br_b_1_000{border-bottom:1px solid #000000;}
.br_l_1_333{border-left:1px solid #333;}
.br_l_1_666{border-left:1px solid #666;}
.br_l_1_999{border-left:1px solid #999;}
.br_l_1_000{border-left:1px solid #000000;}
.br_r_1_333{border-right:1px solid #333;}
.br_r_1_666{border-right:1px solid #666;}
.br_r_1_999{border-right:1px solid #999;}
.br_r_1_000{border-right:1px solid #000000;}
/* 圆角 */
.brs_2{border-radius:2px;}
.brs_3{border-radius:3px;}
.brs_4{border-radius:4px;}
.brs_5{border-radius:5px;}
.brs_6{border-radius:6px;}
.brs_7{border-radius:7px;}
.brs_8{border-radius:8px;}
.brs_9{border-radius:9px;}
.brs_10{border-radius:10px;}
.brs_15{border-radius:15px;}
.brs_20{border-radius:20px;}
.brs_25{border-radius:25px;}
.brs_30{border-radius:30px;}
.brs_40{border-radius:40px;}
.brs_50{border-radius:50px;}
.brs50{border-radius:50%;}
.brs_max{border-radius:90000px}
/* 镜像渐变 */
.radial_gradient{
background:-webkit-radial-gradient(red,green,blue);
/* Safari 5.1 - 6.0 */
background:-o-radial-gradient(red,green,blue);
/* Opera 11.6 - 12.0 *
/background:-moz-radial-gradient(red,green,blue);
/* Firefox 3.6 - 15 */
background:radial-gradient(red,green,blue); /* 标准的语法（必须放在最后） */
}
/* 线性背景渐变 */
.linear_gradient{
background-image:-webkit-linear-gradient(to bottom,#e6e6e6,#fff);
background-image:-o-linear-gradient(to bottom,#e6e6e6,#fff);
background-image:linear-gradient(to bottom,#e6e6e6,#fff);
}
/* 动画 */
@keyframes mydeom{
from{left:0px;}
to{left:500px;}
}
/* 使用自定义动画 添加动画 元素名称 */
.use_keyframes{
position:relative;
animation:mydeom 5s infinite;
-webkit-animation:mydeom 5s infinite;
}
/* 过渡 */
.transition_attr{
transition:width 2s;
-ms-transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
/* 放大1.8倍 */
.scale_18{
transform:scale(1.8,1.8);
-ms-transform:scale(1.8,1.8);
-webkit-transform:scale(1.8,1.8);
}
/* 旋转180度 */
.rotate_180deg{
transform:rotate(180deg);
-ms-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
/*沿着 X 轴移动元素。*/
.translateX_100px{
transform:translateX(100px);
-ms-transform:translateX(100px);
-webkit-transform:translateX(100px);
}
/*沿着 Y 轴移动元素。*/
.translateY_100px{
transform:translateY(100px);
-ms-transform:translateY(100px);
-webkit-transform:translateY(100px);
}
/* 计算函数 */
.cale_function{cale(100% - 100px);}
/*
将整个网站设为为灰色;
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;
}
*/
/* 媒体查询;
@media screen and (min-900px){
body{background-color: blue;}
}
@media screen and (min-600px) and (max-900px){
body{ background-color: red; }
}
@media screen and (max-600px){
body{
background-color: yellow;
}
}
@media screen and (700px){
.boxs{font-size: 60px;}
}
*/
/* 字体 */
.fs10{font-size:10px}
.fs11{font-size:11px}
.fs12{font-size:12px}
.fs13{font-size:13px}
.fs14{font-size:14px}
.fs15{font-size:15px}
.fs16{font-size:16px}
.fs17{font-size:17px}
.fs18{font-size:18px}
.fs19{font-size:19px}
.fs20{font-size:20px}
.fs21{font-size:21px}
.fs22{font-size:22px}
.fs23{font-size:23px}
.fs24{font-size:24px}
.fs25{font-size:25px}
.fs26{font-size:26px}
.fs27{font-size:27px}
.fs28{font-size:28px}
.fs29{font-size:29px}
.fs30{font-size:30px}
.fs31{font-size:31px}
.fs32{font-size:32px}
.fs33{font-size:33px}
.fs34{font-size:34px}
.fs35{font-size:35px}
.fs36{font-size:36px}
.fs37{font-size:37px}
.fs38{font-size:38px}
.fs39{font-size:39px}
.fs40{font-size:40px}
.fs41{font-size:41px}
.fs42{font-size:42px}
.fs43{font-size:43px}
.fs44{font-size:44px}
.fs45{font-size:45px}
.fs46{font-size:46px}
.fs47{font-size:47px}
.fs48{font-size:48px}
.fs49{font-size:49px}
.fs50{font-size:50px}
.fs51{font-size:51px}
.fs52{font-size:52px}
.fs53{font-size:53px}
.fs54{font-size:54px}
.fs55{font-size:55px}
.fs56{font-size:56px}
.fs57{font-size:57px}
.fs58{font-size:58px}
.fs59{font-size:59px}
.fs60{font-size:60px}
.fs61{font-size:61px}
.fs62{font-size:62px}
.fs63{font-size:63px}
.fs64{font-size:64px}
.fs65{font-size:65px}
.fs66{font-size:66px}
.fs67{font-size:67px}
.fs68{font-size:68px}
.fs69{font-size:69px}
.fs70{font-size:70px}
.fs71{font-size:71px}
.fs72{font-size:72px}
.fs73{font-size:73px}
.fs74{font-size:74px}
.fs75{font-size:75px}
.fs76{font-size:76px}
.fs77{font-size:77px}
.fs78{font-size:78px}
.fs79{font-size:79px}
.fs80{font-size:80px}
/* margin 外边距 */
.mt1{margin-top:1px}
.mt2{margin-top:2px}
.mt3{margin-top:3px}
.mt4{margin-top:4px}
.mt5{margin-top:5px}
.mt6{margin-top:6px}
.mt7{margin-top:7px}
.mt8{margin-top:8px}
.mt9{margin-top:9px}
.mt10{margin-top:10px}
.mt11{margin-top:11px}
.mt12{margin-top:12px}
.mt13{margin-top:13px}
.mt14{margin-top:14px}
.mt15{margin-top:15px}
.mt16{margin-top:16px}
.mt17{margin-top:17px}
.mt18{margin-top:18px}
.mt19{margin-top:19px}
.mt20{margin-top:20px}
.mt21{margin-top:21px}
.mt22{margin-top:22px}
.mt23{margin-top:23px}
.mt24{margin-top:24px}
.mt25{margin-top:25px}
.mt26{margin-top:26px}
.mt27{margin-top:27px}
.mt28{margin-top:28px}
.mt29{margin-top:29px}
.mt30{margin-top:30px}
.mt31{margin-top:31px}
.mt32{margin-top:32px}
.mt33{margin-top:33px}
.mt34{margin-top:34px}
.mt35{margin-top:35px}
.mt36{margin-top:36px}
.mt37{margin-top:37px}
.mt38{margin-top:38px}
.mt39{margin-top:39px}
.mt40{margin-top:40px}
.mt41{margin-top:41px}
.mt42{margin-top:42px}
.mt43{margin-top:43px}
.mt44{margin-top:44px}
.mt45{margin-top:45px}
.mt46{margin-top:46px}
.mt47{margin-top:47px}
.mt48{margin-top:48px}
.mt49{margin-top:49px}
.mt50{margin-top:50px}
.mt51{margin-top:51px}
.mt52{margin-top:52px}
.mt53{margin-top:53px}
.mt54{margin-top:54px}
.mt55{margin-top:55px}
.mt56{margin-top:56px}
.mt57{margin-top:57px}
.mt58{margin-top:58px}
.mt59{margin-top:59px}
.mt60{margin-top:60px}
.mt61{margin-top:61px}
.mt62{margin-top:62px}
.mt63{margin-top:63px}
.mt64{margin-top:64px}
.mt65{margin-top:65px}
.mt66{margin-top:66px}
.mt67{margin-top:67px}
.mt68{margin-top:68px}
.mt69{margin-top:69px}
.mt70{margin-top:70px}
.mt71{margin-top:71px}
.mt72{margin-top:72px}
.mt73{margin-top:73px}
.mt74{margin-top:74px}
.mt75{margin-top:75px}
.mt76{margin-top:76px}
.mt77{margin-top:77px}
.mt78{margin-top:78px}
.mt79{margin-top:79px}
.mt80{margin-top:80px}
.mt81{margin-top:81px}
.mt82{margin-top:82px}
.mt83{margin-top:83px}
.mt84{margin-top:84px}
.mt85{margin-top:85px}
.mt86{margin-top:86px}
.mt87{margin-top:87px}
.mt88{margin-top:88px}
.mt89{margin-top:89px}
.mt90{margin-top:90px}
.mt91{margin-top:91px}
.mt92{margin-top:92px}
.mt93{margin-top:93px}
.mt94{margin-top:94px}
.mt95{margin-top:95px}
.mt96{margin-top:96px}
.mt97{margin-top:97px}
.mt98{margin-top:98px}
.mt99{margin-top:99px}
.mt100{margin-top:100px}
.mb1{margin-bottom:1px}
.mb2{margin-bottom:2px}
.mb3{margin-bottom:3px}
.mb4{margin-bottom:4px}
.mb5{margin-bottom:5px}
.mb6{margin-bottom:6px}
.mb7{margin-bottom:7px}
.mb8{margin-bottom:8px}
.mb9{margin-bottom:9px}
.mb10{margin-bottom:10px}
.mb11{margin-bottom:11px}
.mb12{margin-bottom:12px}
.mb13{margin-bottom:13px}
.mb14{margin-bottom:14px}
.mb15{margin-bottom:15px}
.mb16{margin-bottom:16px}
.mb17{margin-bottom:17px}
.mb18{margin-bottom:18px}
.mb19{margin-bottom:19px}
.mb20{margin-bottom:20px}
.mb21{margin-bottom:21px}
.mb22{margin-bottom:22px}
.mb23{margin-bottom:23px}
.mb24{margin-bottom:24px}
.mb25{margin-bottom:25px}
.mb26{margin-bottom:26px}
.mb27{margin-bottom:27px}
.mb28{margin-bottom:28px}
.mb29{margin-bottom:29px}
.mb30{margin-bottom:30px}
.mb31{margin-bottom:31px}
.mb32{margin-bottom:32px}
.mb33{margin-bottom:33px}
.mb34{margin-bottom:34px}
.mb35{margin-bottom:35px}
.mb36{margin-bottom:36px}
.mb37{margin-bottom:37px}
.mb38{margin-bottom:38px}
.mb39{margin-bottom:39px}
.mb40{margin-bottom:40px}
.mb41{margin-bottom:41px}
.mb42{margin-bottom:42px}
.mb43{margin-bottom:43px}
.mb44{margin-bottom:44px}
.mb45{margin-bottom:45px}
.mb46{margin-bottom:46px}
.mb47{margin-bottom:47px}
.mb48{margin-bottom:48px}
.mb49{margin-bottom:49px}
.mb50{margin-bottom:50px}
.mb51{margin-bottom:51px}
.mb52{margin-bottom:52px}
.mb53{margin-bottom:53px}
.mb54{margin-bottom:54px}
.mb55{margin-bottom:55px}
.mb56{margin-bottom:56px}
.mb57{margin-bottom:57px}
.mb58{margin-bottom:58px}
.mb59{margin-bottom:59px}
.mb60{margin-bottom:60px}
.mb61{margin-bottom:61px}
.mb62{margin-bottom:62px}
.mb63{margin-bottom:63px}
.mb64{margin-bottom:64px}
.mb65{margin-bottom:65px}
.mb66{margin-bottom:66px}
.mb67{margin-bottom:67px}
.mb68{margin-bottom:68px}
.mb69{margin-bottom:69px}
.mb70{margin-bottom:70px}
.mb71{margin-bottom:71px}
.mb72{margin-bottom:72px}
.mb73{margin-bottom:73px}
.mb74{margin-bottom:74px}
.mb75{margin-bottom:75px}
.mb76{margin-bottom:76px}
.mb77{margin-bottom:77px}
.mb78{margin-bottom:78px}
.mb79{margin-bottom:79px}
.mb80{margin-bottom:80px}
.mb81{margin-bottom:81px}
.mb82{margin-bottom:82px}
.mb83{margin-bottom:83px}
.mb84{margin-bottom:84px}
.mb85{margin-bottom:85px}
.mb86{margin-bottom:86px}
.mb87{margin-bottom:87px}
.mb88{margin-bottom:88px}
.mb89{margin-bottom:89px}
.mb90{margin-bottom:90px}
.mb91{margin-bottom:91px}
.mb92{margin-bottom:92px}
.mb93{margin-bottom:93px}
.mb94{margin-bottom:94px}
.mb95{margin-bottom:95px}
.mb96{margin-bottom:96px}
.mb97{margin-bottom:97px}
.mb98{margin-bottom:98px}
.mb99{margin-bottom:99px}
.mb100{margin-bottom:100px}
.ml1{margin-left:1px}
.ml2{margin-left:2px}
.ml3{margin-left:3px}
.ml4{margin-left:4px}
.ml5{margin-left:5px}
.ml6{margin-left:6px}
.ml7{margin-left:7px}
.ml8{margin-left:8px}
.ml9{margin-left:9px}
.ml10{margin-left:10px}
.ml11{margin-left:11px}
.ml12{margin-left:12px}
.ml13{margin-left:13px}
.ml14{margin-left:14px}
.ml15{margin-left:15px}
.ml16{margin-left:16px}
.ml17{margin-left:17px}
.ml18{margin-left:18px}
.ml19{margin-left:19px}
.ml20{margin-left:20px}
.ml21{margin-left:21px}
.ml22{margin-left:22px}
.ml23{margin-left:23px}
.ml24{margin-left:24px}
.ml25{margin-left:25px}
.ml26{margin-left:26px}
.ml27{margin-left:27px}
.ml28{margin-left:28px}
.ml29{margin-left:29px}
.ml30{margin-left:30px}
.ml31{margin-left:31px}
.ml32{margin-left:32px}
.ml33{margin-left:33px}
.ml34{margin-left:34px}
.ml35{margin-left:35px}
.ml36{margin-left:36px}
.ml37{margin-left:37px}
.ml38{margin-left:38px}
.ml39{margin-left:39px}
.ml40{margin-left:40px}
.ml41{margin-left:41px}
.ml42{margin-left:42px}
.ml43{margin-left:43px}
.ml44{margin-left:44px}
.ml45{margin-left:45px}
.ml46{margin-left:46px}
.ml47{margin-left:47px}
.ml48{margin-left:48px}
.ml49{margin-left:49px}
.ml50{margin-left:50px}
.ml51{margin-left:51px}
.ml52{margin-left:52px}
.ml53{margin-left:53px}
.ml54{margin-left:54px}
.ml55{margin-left:55px}
.ml56{margin-left:56px}
.ml57{margin-left:57px}
.ml58{margin-left:58px}
.ml59{margin-left:59px}
.ml60{margin-left:60px}
.ml61{margin-left:61px}
.ml62{margin-left:62px}
.ml63{margin-left:63px}
.ml64{margin-left:64px}
.ml65{margin-left:65px}
.ml66{margin-left:66px}
.ml67{margin-left:67px}
.ml68{margin-left:68px}
.ml69{margin-left:69px}
.ml70{margin-left:70px}
.ml71{margin-left:71px}
.ml72{margin-left:72px}
.ml73{margin-left:73px}
.ml74{margin-left:74px}
.ml75{margin-left:75px}
.ml76{margin-left:76px}
.ml77{margin-left:77px}
.ml78{margin-left:78px}
.ml79{margin-left:79px}
.ml80{margin-left:80px}
.ml81{margin-left:81px}
.ml82{margin-left:82px}
.ml83{margin-left:83px}
.ml84{margin-left:84px}
.ml85{margin-left:85px}
.ml86{margin-left:86px}
.ml87{margin-left:87px}
.ml88{margin-left:88px}
.ml89{margin-left:89px}
.ml90{margin-left:90px}
.ml91{margin-left:91px}
.ml92{margin-left:92px}
.ml93{margin-left:93px}
.ml94{margin-left:94px}
.ml95{margin-left:95px}
.ml96{margin-left:96px}
.ml97{margin-left:97px}
.ml98{margin-left:98px}
.ml99{margin-left:99px}
.ml100{margin-left:100px}
.mr1{margin-right:1px}
.mr2{margin-right:2px}
.mr3{margin-right:3px}
.mr4{margin-right:4px}
.mr5{margin-right:5px}
.mr6{margin-right:6px}
.mr7{margin-right:7px}
.mr8{margin-right:8px}
.mr9{margin-right:9px}
.mr10{margin-right:10px}
.mr11{margin-right:11px}
.mr12{margin-right:12px}
.mr13{margin-right:13px}
.mr14{margin-right:14px}
.mr15{margin-right:15px}
.mr16{margin-right:16px}
.mr17{margin-right:17px}
.mr18{margin-right:18px}
.mr19{margin-right:19px}
.mr20{margin-right:20px}
.mr21{margin-right:21px}
.mr22{margin-right:22px}
.mr23{margin-right:23px}
.mr24{margin-right:24px}
.mr25{margin-right:25px}
.mr26{margin-right:26px}
.mr27{margin-right:27px}
.mr28{margin-right:28px}
.mr29{margin-right:29px}
.mr30{margin-right:30px}
.mr31{margin-right:31px}
.mr32{margin-right:32px}
.mr33{margin-right:33px}
.mr34{margin-right:34px}
.mr35{margin-right:35px}
.mr36{margin-right:36px}
.mr37{margin-right:37px}
.mr38{margin-right:38px}
.mr39{margin-right:39px}
.mr40{margin-right:40px}
.mr41{margin-right:41px}
.mr42{margin-right:42px}
.mr43{margin-right:43px}
.mr44{margin-right:44px}
.mr45{margin-right:45px}
.mr46{margin-right:46px}
.mr47{margin-right:47px}
.mr48{margin-right:48px}
.mr49{margin-right:49px}
.mr50{margin-right:50px}
.mr51{margin-right:51px}
.mr52{margin-right:52px}
.mr53{margin-right:53px}
.mr54{margin-right:54px}
.mr55{margin-right:55px}
.mr56{margin-right:56px}
.mr57{margin-right:57px}
.mr58{margin-right:58px}
.mr59{margin-right:59px}
.mr60{margin-right:60px}
.mr61{margin-right:61px}
.mr62{margin-right:62px}
.mr63{margin-right:63px}
.mr64{margin-right:64px}
.mr65{margin-right:65px}
.mr66{margin-right:66px}
.mr67{margin-right:67px}
.mr68{margin-right:68px}
.mr69{margin-right:69px}
.mr70{margin-right:70px}
.mr71{margin-right:71px}
.mr72{margin-right:72px}
.mr73{margin-right:73px}
.mr74{margin-right:74px}
.mr75{margin-right:75px}
.mr76{margin-right:76px}
.mr77{margin-right:77px}
.mr78{margin-right:78px}
.mr79{margin-right:79px}
.mr80{margin-right:80px}
.mr81{margin-right:81px}
.mr82{margin-right:82px}
.mr83{margin-right:83px}
.mr84{margin-right:84px}
.mr85{margin-right:85px}
.mr86{margin-right:86px}
.mr87{margin-right:87px}
.mr88{margin-right:88px}
.mr89{margin-right:89px}
.mr90{margin-right:90px}
.mr91{margin-right:91px}
.mr92{margin-right:92px}
.mr93{margin-right:93px}
.mr94{margin-right:94px}
.mr95{margin-right:95px}
.mr96{margin-right:96px}
.mr97{margin-right:97px}
.mr98{margin-right:98px}
.mr99{margin-right:99px}
.mr100{margin-right:100px}
.pt1{padding-top:1px}
.pt2{padding-top:2px}
.pt3{padding-top:3px}
.pt4{padding-top:4px}
.pt5{padding-top:5px}
.pt6{padding-top:6px}
.pt7{padding-top:7px}
.pt8{padding-top:8px}
.pt9{padding-top:9px}
.pt10{padding-top:10px}
.pt11{padding-top:11px}
.pt12{padding-top:12px}
.pt13{padding-top:13px}
.pt14{padding-top:14px}
.pt15{padding-top:15px}
.pt16{padding-top:16px}
.pt17{padding-top:17px}
.pt18{padding-top:18px}
.pt19{padding-top:19px}
.pt20{padding-top:20px}
.pt21{padding-top:21px}
.pt22{padding-top:22px}
.pt23{padding-top:23px}
.pt24{padding-top:24px}
.pt25{padding-top:25px}
.pt26{padding-top:26px}
.pt27{padding-top:27px}
.pt28{padding-top:28px}
.pt29{padding-top:29px}
.pt30{padding-top:30px}
.pt31{padding-top:31px}
.pt32{padding-top:32px}
.pt33{padding-top:33px}
.pt34{padding-top:34px}
.pt35{padding-top:35px}
.pt36{padding-top:36px}
.pt37{padding-top:37px}
.pt38{padding-top:38px}
.pt39{padding-top:39px}
.pt40{padding-top:40px}
.pt41{padding-top:41px}
.pt42{padding-top:42px}
.pt43{padding-top:43px}
.pt44{padding-top:44px}
.pt45{padding-top:45px}
.pt46{padding-top:46px}
.pt47{padding-top:47px}
.pt48{padding-top:48px}
.pt49{padding-top:49px}
.pt50{padding-top:50px}
.pt51{padding-top:51px}
.pt52{padding-top:52px}
.pt53{padding-top:53px}
.pt54{padding-top:54px}
.pt55{padding-top:55px}
.pt56{padding-top:56px}
.pt57{padding-top:57px}
.pt58{padding-top:58px}
.pt59{padding-top:59px}
.pt60{padding-top:60px}
.pt61{padding-top:61px}
.pt62{padding-top:62px}
.pt63{padding-top:63px}
.pt64{padding-top:64px}
.pt65{padding-top:65px}
.pt66{padding-top:66px}
.pt67{padding-top:67px}
.pt68{padding-top:68px}
.pt69{padding-top:69px}
.pt70{padding-top:70px}
.pt71{padding-top:71px}
.pt72{padding-top:72px}
.pt73{padding-top:73px}
.pt74{padding-top:74px}
.pt75{padding-top:75px}
.pt76{padding-top:76px}
.pt77{padding-top:77px}
.pt78{padding-top:78px}
.pt79{padding-top:79px}
.pt80{padding-top:80px}
.pt81{padding-top:81px}
.pt82{padding-top:82px}
.pt83{padding-top:83px}
.pt84{padding-top:84px}
.pt85{padding-top:85px}
.pt86{padding-top:86px}
.pt87{padding-top:87px}
.pt88{padding-top:88px}
.pt89{padding-top:89px}
.pt90{padding-top:90px}
.pt91{padding-top:91px}
.pt92{padding-top:92px}
.pt93{padding-top:93px}
.pt94{padding-top:94px}
.pt95{padding-top:95px}
.pt96{padding-top:96px}
.pt97{padding-top:97px}
.pt98{padding-top:98px}
.pt99{padding-top:99px}
.pt100{padding-top:100px}
.pb1{padding-bottom:1px}
.pb2{padding-bottom:2px}
.pb3{padding-bottom:3px}
.pb4{padding-bottom:4px}
.pb5{padding-bottom:5px}
.pb6{padding-bottom:6px}
.pb7{padding-bottom:7px}
.pb8{padding-bottom:8px}
.pb9{padding-bottom:9px}
.pb10{padding-bottom:10px}
.pb11{padding-bottom:11px}
.pb12{padding-bottom:12px}
.pb13{padding-bottom:13px}
.pb14{padding-bottom:14px}
.pb15{padding-bottom:15px}
.pb16{padding-bottom:16px}
.pb17{padding-bottom:17px}
.pb18{padding-bottom:18px}
.pb19{padding-bottom:19px}
.pb20{padding-bottom:20px}
.pb21{padding-bottom:21px}
.pb22{padding-bottom:22px}
.pb23{padding-bottom:23px}
.pb24{padding-bottom:24px}
.pb25{padding-bottom:25px}
.pb26{padding-bottom:26px}
.pb27{padding-bottom:27px}
.pb28{padding-bottom:28px}
.pb29{padding-bottom:29px}
.pb30{padding-bottom:30px}
.pb31{padding-bottom:31px}
.pb32{padding-bottom:32px}
.pb33{padding-bottom:33px}
.pb34{padding-bottom:34px}
.pb35{padding-bottom:35px}
.pb36{padding-bottom:36px}
.pb37{padding-bottom:37px}
.pb38{padding-bottom:38px}
.pb39{padding-bottom:39px}
.pb40{padding-bottom:40px}
.pb41{padding-bottom:41px}
.pb42{padding-bottom:42px}
.pb43{padding-bottom:43px}
.pb44{padding-bottom:44px}
.pb45{padding-bottom:45px}
.pb46{padding-bottom:46px}
.pb47{padding-bottom:47px}
.pb48{padding-bottom:48px}
.pb49{padding-bottom:49px}
.pb50{padding-bottom:50px}
.pb51{padding-bottom:51px}
.pb52{padding-bottom:52px}
.pb53{padding-bottom:53px}
.pb54{padding-bottom:54px}
.pb55{padding-bottom:55px}
.pb56{padding-bottom:56px}
.pb57{padding-bottom:57px}
.pb58{padding-bottom:58px}
.pb59{padding-bottom:59px}
.pb60{padding-bottom:60px}
.pb61{padding-bottom:61px}
.pb62{padding-bottom:62px}
.pb63{padding-bottom:63px}
.pb64{padding-bottom:64px}
.pb65{padding-bottom:65px}
.pb66{padding-bottom:66px}
.pb67{padding-bottom:67px}
.pb68{padding-bottom:68px}
.pb69{padding-bottom:69px}
.pb70{padding-bottom:70px}
.pb71{padding-bottom:71px}
.pb72{padding-bottom:72px}
.pb73{padding-bottom:73px}
.pb74{padding-bottom:74px}
.pb75{padding-bottom:75px}
.pb76{padding-bottom:76px}
.pb77{padding-bottom:77px}
.pb78{padding-bottom:78px}
.pb79{padding-bottom:79px}
.pb80{padding-bottom:80px}
.pb81{padding-bottom:81px}
.pb82{padding-bottom:82px}
.pb83{padding-bottom:83px}
.pb84{padding-bottom:84px}
.pb85{padding-bottom:85px}
.pb86{padding-bottom:86px}
.pb87{padding-bottom:87px}
.pb88{padding-bottom:88px}
.pb89{padding-bottom:89px}
.pb90{padding-bottom:90px}
.pb91{padding-bottom:91px}
.pb92{padding-bottom:92px}
.pb93{padding-bottom:93px}
.pb94{padding-bottom:94px}
.pb95{padding-bottom:95px}
.pb96{padding-bottom:96px}
.pb97{padding-bottom:97px}
.pb98{padding-bottom:98px}
.pb99{padding-bottom:99px}
.pb100{padding-bottom:100px}
.pl1{padding-left:1px}
.pl2{padding-left:2px}
.pl3{padding-left:3px}
.pl4{padding-left:4px}
.pl5{padding-left:5px}
.pl6{padding-left:6px}
.pl7{padding-left:7px}
.pl8{padding-left:8px}
.pl9{padding-left:9px}
.pl10{padding-left:10px}
.pl11{padding-left:11px}
.pl12{padding-left:12px}
.pl13{padding-left:13px}
.pl14{padding-left:14px}
.pl15{padding-left:15px}
.pl16{padding-left:16px}
.pl17{padding-left:17px}
.pl18{padding-left:18px}
.pl19{padding-left:19px}
.pl20{padding-left:20px}
.pl21{padding-left:21px}
.pl22{padding-left:22px}
.pl23{padding-left:23px}
.pl24{padding-left:24px}
.pl25{padding-left:25px}
.pl26{padding-left:26px}
.pl27{padding-left:27px}
.pl28{padding-left:28px}
.pl29{padding-left:29px}
.pl30{padding-left:30px}
.pl31{padding-left:31px}
.pl32{padding-left:32px}
.pl33{padding-left:33px}
.pl34{padding-left:34px}
.pl35{padding-left:35px}
.pl36{padding-left:36px}
.pl37{padding-left:37px}
.pl38{padding-left:38px}
.pl39{padding-left:39px}
.pl40{padding-left:40px}
.pl41{padding-left:41px}
.pl42{padding-left:42px}
.pl43{padding-left:43px}
.pl44{padding-left:44px}
.pl45{padding-left:45px}
.pl46{padding-left:46px}
.pl47{padding-left:47px}
.pl48{padding-left:48px}
.pl49{padding-left:49px}
.pl50{padding-left:50px}
.pl51{padding-left:51px}
.pl52{padding-left:52px}
.pl53{padding-left:53px}
.pl54{padding-left:54px}
.pl55{padding-left:55px}
.pl56{padding-left:56px}
.pl57{padding-left:57px}
.pl58{padding-left:58px}
.pl59{padding-left:59px}
.pl60{padding-left:60px}
.pl61{padding-left:61px}
.pl62{padding-left:62px}
.pl63{padding-left:63px}
.pl64{padding-left:64px}
.pl65{padding-left:65px}
.pl66{padding-left:66px}
.pl67{padding-left:67px}
.pl68{padding-left:68px}
.pl69{padding-left:69px}
.pl70{padding-left:70px}
.pl71{padding-left:71px}
.pl72{padding-left:72px}
.pl73{padding-left:73px}
.pl74{padding-left:74px}
.pl75{padding-left:75px}
.pl76{padding-left:76px}
.pl77{padding-left:77px}
.pl78{padding-left:78px}
.pl79{padding-left:79px}
.pl80{padding-left:80px}
.pl81{padding-left:81px}
.pl82{padding-left:82px}
.pl83{padding-left:83px}
.pl84{padding-left:84px}
.pl85{padding-left:85px}
.pl86{padding-left:86px}
.pl87{padding-left:87px}
.pl88{padding-left:88px}
.pl89{padding-left:89px}
.pl90{padding-left:90px}
.pl91{padding-left:91px}
.pl92{padding-left:92px}
.pl93{padding-left:93px}
.pl94{padding-left:94px}
.pl95{padding-left:95px}
.pl96{padding-left:96px}
.pl97{padding-left:97px}
.pl98{padding-left:98px}
.pl99{padding-left:99px}
.pl100{padding-left:100px}
.pr1{padding-right:1px}
.pr2{padding-right:2px}
.pr3{padding-right:3px}
.pr4{padding-right:4px}
.pr5{padding-right:5px}
.pr6{padding-right:6px}
.pr7{padding-right:7px}
.pr8{padding-right:8px}
.pr9{padding-right:9px}
.pr10{padding-right:10px}
.pr11{padding-right:11px}
.pr12{padding-right:12px}
.pr13{padding-right:13px}
.pr14{padding-right:14px}
.pr15{padding-right:15px}
.pr16{padding-right:16px}
.pr17{padding-right:17px}
.pr18{padding-right:18px}
.pr19{padding-right:19px}
.pr20{padding-right:20px}
.pr21{padding-right:21px}
.pr22{padding-right:22px}
.pr23{padding-right:23px}
.pr24{padding-right:24px}
.pr25{padding-right:25px}
.pr26{padding-right:26px}
.pr27{padding-right:27px}
.pr28{padding-right:28px}
.pr29{padding-right:29px}
.pr30{padding-right:30px}
.pr31{padding-right:31px}
.pr32{padding-right:32px}
.pr33{padding-right:33px}
.pr34{padding-right:34px}
.pr35{padding-right:35px}
.pr36{padding-right:36px}
.pr37{padding-right:37px}
.pr38{padding-right:38px}
.pr39{padding-right:39px}
.pr40{padding-right:40px}
.pr41{padding-right:41px}
.pr42{padding-right:42px}
.pr43{padding-right:43px}
.pr44{padding-right:44px}
.pr45{padding-right:45px}
.pr46{padding-right:46px}
.pr47{padding-right:47px}
.pr48{padding-right:48px}
.pr49{padding-right:49px}
.pr50{padding-right:50px}
.pr51{padding-right:51px}
.pr52{padding-right:52px}
.pr53{padding-right:53px}
.pr54{padding-right:54px}
.pr55{padding-right:55px}
.pr56{padding-right:56px}
.pr57{padding-right:57px}
.pr58{padding-right:58px}
.pr59{padding-right:59px}
.pr60{padding-right:60px}
.pr61{padding-right:61px}
.pr62{padding-right:62px}
.pr63{padding-right:63px}
.pr64{padding-right:64px}
.pr65{padding-right:65px}
.pr66{padding-right:66px}
.pr67{padding-right:67px}
.pr68{padding-right:68px}
.pr69{padding-right:69px}
.pr70{padding-right:70px}
.pr71{padding-right:71px}
.pr72{padding-right:72px}
.pr73{padding-right:73px}
.pr74{padding-right:74px}
.pr75{padding-right:75px}
.pr76{padding-right:76px}
.pr77{padding-right:77px}
.pr78{padding-right:78px}
.pr79{padding-right:79px}
.pr80{padding-right:80px}
.pr81{padding-right:81px}
.pr82{padding-right:82px}
.pr83{padding-right:83px}
.pr84{padding-right:84px}
.pr85{padding-right:85px}
.pr86{padding-right:86px}
.pr87{padding-right:87px}
.pr88{padding-right:88px}
.pr89{padding-right:89px}
.pr90{padding-right:90px}
.pr91{padding-right:91px}
.pr92{padding-right:92px}
.pr93{padding-right:93px}
.pr94{padding-right:94px}
.pr95{padding-right:95px}
.pr96{padding-right:96px}
.pr97{padding-right:97px}
.pr98{padding-right:98px}
.pr99{padding-right:99px}
.pr100{padding-right:100px}