/*格式化样式*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;} 
table {border-collapse:collapse;border-spacing:0;} 
fieldset,img {border:0} 
address,caption,cite,code,dfn,em,i,strong,th,var {font-style:normal;font-weight:normal} 
ol,ul {list-style:none} 
caption,th {text-align:left} 
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} 
q:before,q:after {content:''} 
abbr,acronym { border:0}
input[type="text"],input[tyep="button"],input[type="submit"],input[type="reset"],input[type="file"],input[type="password"],textarea{outline:none;resize:none}
button{
    border: 0;
}
/* 全局添加box-sizing: border-box */
html {
	box-sizing: border-box;
    font-family: Droid Sans;
}
/* 针对WebKit内核 */
html::-webkit-scrollbar {
    display: none;
  }
  
/* 针对Firefox内核 */
html {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

*,
*:before,
*:after {
	box-sizing: inherit;
}
/* 全局禁用选中 */
body {
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently not supported by any browser */   
}
/*文字排版、颜色*/
.f12{font-size:12px}
.f13{font-size:13px}
.f14{font-size:14px}
.f16{font-size:16px}
.f20{font-size:20px}
.fb{font-weight:bold}
.fn{font-weight:normal}
.t2{text-indent:2em}
.red,a.red{color:#cc0031}
.darkblue,a.darkblue{color:#039}
.gray,a.gray{color:#878787}
.lh150{line-height:150%}
.lh180{line-height:180%}
.lh200{line-height:200%}
.unl{text-decoration:underline;}
.no_unl{text-decoration:none;}

/*定位*/
.tl{text-align:left}
.tc{text-align:center}
.tr{text-align:right}
.fl{float:left;display:inline}
.fr{float:right;display:inline}
.cb{clear:both}
.cl{clear:left}
.cr{clear:right}
.vm{vertical-align:middle} 
.pr{position:relative} 
.pa{position:absolute}
.abs-right{position:absolute;right:0}
.zoom{zoom:1} 
.hidden{visibility:hidden} 
.none{display:none}

/*长度高度*/
.w10{width:10px}
.w20{width:20px}
.w50{width:50px}
.w90{width:90px}
.w100{width:100px}
.w200{width:200px}
.w250{width:250px}
.w500{width:500px}
.w800{width:800px}
.w{width:100%}
.h50{height:50px}
.h80{height:80px}
.h100{height:100px}
.h200{height:200px}
.h{height:100%}

/*边距*/
.m10{margin:10px}
.m15{margin:15px}
.m30{margin:30px}
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt50{margin-top:50px}
.mt100{margin-top:100px}
.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb100{margin-bottom:100px}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml50{margin-left:50px}
.ml100{margin-left:100px}
.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr15{margin-right:15px}
.mr50{margin-right:50px}
.mr100{margin-right:100px}
.p10{padding:10px;}
.p15{padding:15px;}
.p30{padding:30px;}
.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt50{padding-top:50px}
.pb5{padding-bottom:5px}
.pb100{padding-bottom:100px}
.pl5{padding-left:5px}
.pl10{padding-left:10px}
.pl50{padding-left:50px}
.pl100{padding-left:100px}
.pr5{padding-right:5px}
.pr10{padding-right:10px}
.pr15{padding-right:15px}
.pr100{padding-right:100px}

/* 公用颜色定义 */
:root {
    --primary-color: #07c160;
    --primary-color-2: #73ce45;
    /* f0c808 */
    --primary-active-color: #08dd6e;
    --primary-active-color-2: #85d45e;
    --primary-light-color: #cefde4;
    --primary-light-color-2: #e1f4d7;
    --primary-bg-color: #fafafa;
    --primary-bg-color-2: #eafafa;
    --primary-shadow-color: #cfcfcf;
    --primary-shadow-active-color: #efefef;
    --white-color: #ffffff;
    --red-color: #E53A40;
    --color-333: #333;
    --color-666: #666;
    --color-999: #999;
    --color-ddd: #ddd;
    --color-efefef: #efefef;
}

body.main-style-2{
    --primary-color: #14b8a6!important;
    --primary-color-2: #3b82f6!important;
    --primary-active-color: #0d9488!important;
    --primary-active-color-2: #14b8a6!important;
    --primary-light-color: #ccfbf1!important;
    --primary-light-color-2: #99f6e4!important;
}
body.main-style-3{
    --primary-color: #f472b6!important;
    --primary-color-2: #ec4899!important;
    --primary-active-color: #ec4899!important;
    --primary-active-color-2: #f472b6!important;
    --primary-light-color: #fce7f3!important;
    --primary-light-color-2: #fbcfe8!important;
}
/*css定义超链接四个状态也有顺序的。*/
a{
    transition: all 0.3s;
}
a:link, a:visited {
    text-decoration: none;
    color: var(--color-333);
}
a:hover, a:active {
    text-decoration: none;
    color: var(--primary-color);
    border: none;
}
/*======万能Float闭合======*/
.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear {display: inline-block;} /* for IE/Mac */

.clear {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */

/* 隐藏滚动条 */
/* 针对WebKit内核 */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
  
/* 针对Firefox内核 */
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 5px;
    /* 对应横向滚动条的宽度 */
    height: 5px;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #dcefe4;
    border-radius: 32px;
}
/* 红色默认滚动条 */
.normal-scrollbar-red::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 5px;
    /* 对应横向滚动条的宽度 */
    height: 5px;
}
/* 滚动条上的滚动滑块 */
.normal-scrollbar-red::-webkit-scrollbar-thumb {
    background-color: #eb8695;
    border-radius: 32px;
}

/* 滚动条轨道 */
.normal-scrollbar-red::-webkit-scrollbar-track {
    background-color: #ffe5eb;
    border-radius: 32px;
}
/* 青色默认滚动条 */
.normal-scrollbar-blue::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 5px;
    /* 对应横向滚动条的宽度 */
    height: 5px;
}
/* 滚动条上的滚动滑块 */
.normal-scrollbar-blue::-webkit-scrollbar-thumb {
    background-color: #5fc4c5;
    border-radius: 32px;
}

/* 滚动条轨道 */
.normal-scrollbar-blue::-webkit-scrollbar-track {
    background-color: #dcefe4;
    border-radius: 32px;
}
/* 公用样式 */
body{
    background-color: var(--primary-bg-color);
}
main{
    padding-top: 135px;
    width: 1080px;
    margin: 0 auto;
    padding-bottom: 40px;
    height: 100%;
    min-height: calc(100vh - 54px);
    /* overflow-y: auto; */
}
/* 公用盒模型 */
.innerWrap {
    padding: 15px;
    border-radius: 6px;
    background: var(--white-color);
    box-shadow: 0 0 8px var(--primary-shadow-color);
}
/* 左右布局盒模型 */
.sectionLR{
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
}
.innerWrap-span1{
    width: 340px;
}
.innerWrap-span2{
    width: 724px;
}


@media screen and (max-width: 1080px) {
    body{
        background-color: var(--color-efefef);
    }
    /* 主体内容 */
    main{
        width: 100%;
        padding-top: 88px;
        padding-bottom: 0; /* footer 是平級元素，由 footer 的 margin-bottom 處理底部間距 */
    }
    .mt15{
        margin-top: 12px;
    }
    .sectionLR{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .innerWrap{
        padding: 12px;
        box-shadow: none;
        border-radius: 0;
    }
    .innerWrap-span1{
        width: 100%;
    }
    .innerWrap-span2{
        width: 100%;
    }
    .sectionLR .innerWrap:nth-child(2){
        margin-top: 12px;
    }
}