@import "/statics/home/css/reset.css"; /* 重置、统一、对齐 */
@import "/statics/home/css/variables.css"; /* 变量 */

html,body {scroll-behavior:smooth;}
body {font-family:var(--app-font-family);line-height:var(--app-lh-150);font-size:var(--app-fs-16);}
@font-face {
    font-family: 'lusitana';
    src: url('../fonts/Lusitana-Regular.ttf');
}

@font-face {
    font-family: 'markpro';
    src: url('../fonts/MARKPRO.OTF');
}
/* 字体图标 */
.iconfont {font-size:inherit;display:inline-flex;align-items:center;justify-content:center;line-height:inherit;color:inherit;}
/* 优化默认滚动条 */
/* 宽度 */
::-webkit-scrollbar {width:5px;}
/* 滚动条轨道 */
::-webkit-scrollbar-track {background:#f1f1f1;}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {background:#d8d8d8;border-radius:10px;}

/* 文本多出部分用省略号表示, 用于1行或多行 */
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  }
.ellipsis-1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.ellipsis-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.ff-lusitana { font-family: 'lusitana', sans-serif; }
.ff-markpro { font-family: 'markpro', sans-serif; }

[v-cloak] {display:none;}
.am {transition:all .3s;}
.flex {display:flex;}
.flex-col {flex-direction:column;}
.flex-center {align-items:center;justify-content:center;}
.items-center {align-items:center;}
.justify-center {justify-content:center;}
.justify-between {justify-content:space-between;}
.justify-end {justify-content:flex-end;}
.app-container {max-width:var(--app-main-content-width);margin:0 auto;}

@media (max-width: 1400px) {
    .app-container {
        padding-left: var(--app-fs-24);
        padding-right: var(--app-fs-24);
    }
}

/***
 * 内页 banner
 */
.page-banner { position: relative; }
.page-banner-image { width: 100%; height: auto; object-fit: cover; }
.page-banner-wrapper { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding-top: var(--app-header-height); }
.page-banner-title { font-size: var(--app-fs-42); font-weight: normal; color: #fff; text-align: center; }
.page-banner-txt { font-size: var(--app-fs-24); color: #fff; text-align: center; }

/***
 * 侧边栏
 */
.right-tools { position: fixed; bottom: 20%; right: 0; z-index: 10; width: var(--app-fs-102); background: #fff; box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px; }
.tool-item { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--app-fs-20) 10px; cursor: pointer; }
.tool-item + .tool-item { border-top: 1px solid #e8e8e8; }
.tool-icon { width: var(--app-fs-33); height: var(--app-fs-33); background-image: url(../images/right-tool.png); background-size: var(--app-fs-99) var(--app-fs-66); }
.tool-icon-1 { background-position: 0 var(--app-fs-33); }
.tool-icon-2 { background-position: var(--app-fs-66) var(--app-fs-33); }
.tool-icon-3 { background-position: var(--app-fs-33) var(--app-fs-33); }
.tool-tit { margin-top: 1em; font-size: var(--app-fs-14); line-height: 1; color: #333; white-space: nowrap; }
.tool-follow { position: absolute; top: -100%; right: 200%; display: flex; flex-direction: column; width: var(--app-fs-280); height: 300%; border-radius: 10px; background: #fff; opacity: 0; transform: scale(0); transition: right .5s, opacity .5s; box-shadow: rgba(0, 0, 0, 0.2) 0 0 20px 0; overflow: hidden; }
.tool-follow-half--top { flex-shrink: 0; height: 50%; padding: 16px; background-image: url(../images/bg-3.png); background-position: center center; background-repeat: no-repeat; background-size: 110% 110%; }
.tool-follow--top-image { height: 28%; }
.tool-follow--bottom { position: relative; flex-shrink: 0; height: 50%; padding: 0 12px; }
.tool-follow--bottom .qrcode { width: 100px; height: 100px; margin-top: -50px; margin-right: auto; margin-left: auto; box-shadow: rgba(0, 0, 0, 0.2) 0 0 20px 0; }
.tool-follow--bottom .tips { margin: 14px 0 0 0; font-size: var(--app-fs-14); line-height: 1.57; color: #333; text-align: center; }
.tool-item:hover .tool-tit { color: var(--app-color-main); }
.tool-item:hover .tool-icon-1 { background-position: 0 0; }
.tool-item:hover .tool-icon-2 { background-position: var(--app-fs-66) 0; }
.tool-item:hover .tool-icon-3 { background-position: var(--app-fs-33) 0; }
.tool-item:hover .tool-follow { right: calc(100% + 12px); opacity: 1; transform: scale(1); }

@media (max-width: 1024px) {

}

@media (max-width: 992px) {
    .page-banner {height: 400px;}
    .page-banner-image { height: 100%; }
}

@media (max-width: 768px) {
    .page-banner-wrapper { top: auto; bottom: 0; height: 100%; }
    .page-banner-txt { margin-top: .5em; }
    .right-tools { right: var(--app-fs-24); background: unset; width: auto; box-shadow: unset; }
    .tool-item { width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: rgba(0, 0, 0, 0.2) 0 0 20px 0; }
    .tool-item + .tool-item {
        border-top: none;
        margin-top: 10px;
    }
    .tool-tit { display: none; }
    .tool-follow { top: auto; bottom: 15%; width: 198px; height: 240px; }
}

@media (max-width: 600px) {

}

@media (max-width: 375px) {

}