:root {
    --primary-color: #F05152;
}

::-webkit-scrollbar {width:2px; height:8px; background-color:#F5F5F5;}
::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: #F5F5F5;}
::-webkit-scrollbar-thumb{-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.1); background-color: #adb5bd;}
*{font-family:"Pingfang SC", Microsoft Yahei, sans-serif, Helvetica; }
html, body { 
    margin: 0;
    font-size:15px;
    font-weight:400;
    line-height:1.5em;
    color: #353535;
    min-height:100%;
    background-color: #F7F8F9;
	font-family:"Pingfang SC", Microsoft Yahei, sans-serif, Helvetica; 
	-webkit-font-smoothing:subpixel-antialiased;
	outline:none; 
    font-style: normal;
}
*{margin:0; padding:0;}
a{text-decoration:none; color:#353535;}
a:hover{text-decoration:none;}
a:visited{text-decoration:none;}
img{border:none;}
ul{list-style-type:none;}
li{list-style:none; overflow:hidden;}
blockquote{background-color:#f7f8f9; padding:16px 20px; line-height:2.2em; border-left:3px solid #E0E0E0;}
div{box-sizing:border-box;}

.container{width:1200px; margin:0 auto;}

/* 响应式 */
.mobile-only{display:none;}

/* hide */
.hide{display:none;}


/* font size */
h1,h2,h3,h4,h5,h6{padding:0; margin:0;}
.fs13{font-size:13px;}
.fs135{font-size:13.5px;}
.fs14{font-size:14px;}
.fs145{font-size:14.5px;}
.fs15{font-size:15px;}
.fs16{font-size:16px;}
.fs17{font-size:17px;}
.fs18{font-size:18px;}
.fs20{font-size:20px;}
.fs24{font-size:24px;}

/* flex 布局 */
.flex{display:flex !important;}
.row, .rows{flex-direction:row;}
.column{flex-direction:column;}
.wrap{flex-direction:row; flex-wrap:wrap;}
.nowrap{flex-direction:row; flex-wrap:nowrap;}
.justify-content-around{justify-content:space-around;}
.justify-content-between{justify-content:space-between;}
.justify-content-start{justify-content:flex-start;}
.justify-content-center{justify-content:center;}
.justify-content-end{justify-content:flex-end;}
.align-items-start{align-items:flex-start;}
.align-items-center{align-items:center;}
.align-items-end{align-items:flex-end;}
.flex1{flex:1;}
.flex0{flex-shrink:0;}

/* space */
.space-vertical{height:20px;}
.space-horizontal{width:20px;}

/* size */
.w-full{width:100%;}

/* button */
.button{
    display: inline-flex;
    cursor: pointer;
    user-select: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    color: #FFFFFF;
    background: var(--primary-color);
    border:none;
    padding:5px 15px;
    font-size:15px;
    line-height:20px;
    border-radius:6px;
    outline:none;
}
/* mask */
.mask{background:rgba(0,0,0,0.5); position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; z-index:10; display:none;}

/* header */
header{position:fixed; top:0; left:0; width:100%; z-index:6; background:#FFFFFF; background:rgba(255,255,255,0.95); border-bottom:1px solid #F5F8FA; box-shadow: 0 .2rem .2rem rgba(0, 0, 0, .025); height:56px; overflow:hidden;}
.header-size-box{width:100%; height:56px;}
.logo{height:28px; margin:12px 0 7px 0;}
.navbar{display:flex; flex-grow:1; flex-wrap:nowrap; justify-content:flex-end; align-items:center;}
.navbar .item{display:block; color: #577788; padding:15px; font-size:15px;}
.navbar-line{width:1px; height:10px; margin:0 15px; overflow:hidden; opacity:0.6; border-right:1px dashed #577788;}
.navbar .item:hover{color:var(--primary-color);}
.navbar .item.active{color:var(--primary-color); font-weight:bold;}
.mobile-menu{width:40px; height:50px; display:none; justify-content:end;}
.mobile-menu .iconfont{font-size:28px !important; line-height:50px; color: #577788;}
.navbar-mobile-menu{width:66%; position:fixed; left:0; top:0; bottom:0; height:100%; background-color:#FFFFFF; z-index:90; display:none;}
#navbar-mobile-menu-body{display:flex; flex-direction:column; padding:12px;}
#navbar-mobile-menu-logo{border-bottom:1px solid #dee2e6; height:40px;}
#navbar-mobile-menu-logo img{margin:0px;}
#navbar-mobile-menu-items{margin-top:15px;}
#navbar-mobile-menu-items > a{display:block; width:100%; line-height:38px; padding:2px 10px;;}

/* footer */
.footer{position:fixed; bottom:0; left:0; width:100%; min-height:50px; z-index:5; background:#FFFFFF; background:rgba(255,255,255,0.95); border-top:1px solid #F5F8FA; padding:10px 0; display:flex; align-items:center;}
.footer .item{display:block; font-size:13px;}
.footer-space{width:100%; height:50px;}

/* pendant */
.pendant{display:flex; flex-direction:column; width:44px; padding:5px; position:fixed; z-index:20; right:20px; bottom:120px; align-items:center; justify-content:center;}
.pendant .item{width:44px; height:44px; text-align:center; cursor: pointer; background-color:#FFFFFF; border-radius:30px; overflow:hidden; box-shadow:0 0.5rem 0.6rem rgba(0, 0, 0, .025); outline:none;}
.pendant .item .iconfont{font-size:20px; line-height:44px;}
.pendant .item:hover *{color:var(--primary-color);}

/* card */
.card-list{margin:0 -10px; overflow:hidden; display:flex; flex-direction:row; flex-wrap:wrap;}
.card{width:382px; overflow: hidden; background-color:#FFFFFF; padding:15px 0; border-radius:6px; margin:12px;}
.card-header{display:flex; flex-direction:row; align-items:center; justify-content:space-between; border-bottom:1px solid #dee2e6;  margin:0 13px; padding-bottom:13px;}
.card-header > .title{display:flex; flex-direction:row; align-items:center;}
.card-header > .title > img{width:22px; height:22px; margin-right:8px; font-size:0; border-radius:20px;}
.card-header > .more{color:#577788; font-size:13px; line-height:20px; display:flex; align-items:center; flex-wrap:nowrap;}
.card-header > .more .iconfont{font-size:8px; line-height:16px; margin-left:6px; margin-top:3px;}
.card-body{padding:0 13px; margin-right:5px; margin-top:13px;}
.card-body .item{display:flex; flex-direction:row; align-items:flex-start; margin-bottom:12px; padding-right:12px;}
.card-body .item .icon{display:block; width:24px; height:24px; line-height:24px; font-size:15px; flex-shrink:0; color: #999;}
.card-body .item .title{font-size:15px; line-height:24px;}
.card-body .item a:hover{text-decoration:none; color:var(--primary-color);}

/* 序号 */
.index-1{color: #F05152 !important;}
.index-2{color: #F0A500 !important;}
.index-3{color: #F0D500 !important;}

/* background */
.grid-bg{
    background-image: linear-gradient(#fff 9px, transparent 0), linear-gradient(90deg, rgba(3, 122, 240, .30196) 1px, transparent 0); 
    background-size: 10px 10px, 10px 10px;
}

/* form elements */
.button{
    font-size: 15px;
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color:var(--primary-color);
    outline:0;
    border:0;
    border-radius:5px;
    cursor: pointer;
}
.button .iconfont{font-size:18px; margin-right:5px; margin-top:-2px; line-height:20px; color:#FFFFFF; font-style: normal;}
.button span{color:#FFFFFF; font-size:15px; line-height:20px;}

/* 动画 */
@keyframes bp-animate-width-group {
    0% {width: 0;}
    100% {width: 100%;}
}

/* 水波纹效果横向扩展 */
.water-ripple-horizontal {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.water-ripple-horizontal::after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    background-repeat: no-repeat;
    opacity: 1;
}
.water-ripple-horizontal:active::after {
    animation: bp-animate-width-group 200ms ease-in forwards;
}

#GoToTop{display:none;}

/* mobile */
@media screen and (max-width: 768px) { 
    .footer{position: relative; margin-top:15px; font-size:12px;}
    .footer .item{font-size:12px;}
    .container{width:100%; padding:0 12px;}
    .pc-only{display:none !important;}
    .mobile-only{display:flex;}
    header{height:50px;}
    .logo{height:24px;}
    .header-size-box{height:50px;}
    .space-vertical{height:10px;}
    .mobile-menu{display:flex;}
    .card-list{flex-direction:column; margin:0;}
    .card{width:100%; box-sizing: border-box; margin:18px 0;}
    .footer-space{height:0px; display:none;}
    .pendant{right:12px; bottom:60px;}
    .navbar-line{margin:0px; height:8px; margin-top:2px;}
    .navbar .item{display:block; color: #577788; padding:15px 10px; font-size:14px;}
}