/*
    尽量按原子性->模块化->页面的方式组合搭配
*/


:root {
    --main-color: coral; /* 定义变量 */
}

html, body {height: 100%;width: 100%;}
body.hidden {overflow: hidden;}
* {margin: 0;padding: 0;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;	box-sizing: border-box;}
img { border:none;}
li { list-style:none;}
a {text-decoration:none;}
/* a:hover {opacity:0.7;filter:alpha(opacity=70);} */

/* 表格样式统一 */
table, td, th {border-collapse: collapse;}

.text-danger {color:#fe6816!important}

div::-webkit-scrollbar { 
    width: 6px; /* 垂直于滚动条的宽度 */ 
    height: 6px; /* 和滚动条平行的宽度 */ 
}
/* 前面的颜色 */
div::-webkit-scrollbar-thumb {
    background:rgba(0,0,0,0.4); 
}

/* 后面的颜色 */
div::-webkkit-scrollbar-track {
    background:#977054;
} 

div {
    /* Foreground, Background */
    scrollbar-color:rgba(0,0,0,0.4) rgba(0,0,0,0.1);
    scrollbar-width:thin;
}

.app-loading {
    position: fixed;right:0;top:0;left:0;bottom:0;z-index: 9;background-color: rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.app {
    min-height: 100vh;
}
.home {
    position: relative;
    height:100%;
}
.home-pc-bg, .home-mobile-bg {position: absolute;width:100%;top:0;bottom:0;}
.home-main {position:relative;z-index:1}


/* swiper 样式重置 */
.swiper-container {height:100%;}
/* swiper 样式重置 */


/* mod-anchor */
.mod-anchor {
    position: fixed;
    right:8px;
    top:50vh;
    transform: translateY(-50%);
    z-index:1
}
.mod-anchor .mod-anchor-btn {
    cursor: pointer;
}

.mod-anchor .mod-anchor-btn a {
    color: #333;
    text-decoration: none;
}
.mod-anchor-btn.active a {color:blue}

/* 按钮模块 */
.mod-menu-btn {display: inline-block;cursor: pointer;}
.mod-menu-btn>img:nth-child(2){display: none;}
.mod-menu-btn:hover img:nth-child(1), .mod-menu-btn.active>img:nth-child(1){
    display: none;
}
.mod-menu-btn:hover>img:nth-child(2), .mod-menu-btn.active>img:nth-child(2){
    display: block;
}
/* 按钮模块 */


/*满屏一屏显示*/
.full-section {
    position: relative;
    height: 100vh;
}

/*在屏幕中居中显示*/
.pos-center-middle {
    position: absolute;
    left:50%;top:50vh;
    transform: translate(-50%, -50%);
    
}
.fixed-center-middle {
    position: fixed;
    left:50%;top:50vh;
    transform: translate(-50%, -50%);
}


/*类似于背景层的效果，不影响上层内容的布局，虽然是绝对定位，也不会遮挡正常文档流的内容*/
.mod-background {position: absolute;z-index:-1;left:0;right:0;bottom:0;top:0;}


/* 引导页样式 */
.home {position: relative;}
.home.active {display: none;}
.home-bg {position: absolute;left:0;top:0;right:0;bottom:0;}
.home-header {display: flex;gap: 16px}
.home-header .left{flex:0 0 auto;}
.home-header .center{flex:1 0 auto}
.home-header .right{flex:0 0 auto}

.page {}
.page.active {display: block;}
.page-header {display: flex;gap: 16px;}
.page-header .left {flex: 0 0 auto;}
.page-header .center{flex:1 0 auto}
.page-header .right{flex:0 0 auto}
.page-main{

}


/*  弹框 start 

<div class="mod-dialog">
    <div class="mod-dialog-mask"></div>
    <div class="mod-dialog-main artical"></div>
</div>

*/
.h24 {height:24px;}
.mod-dialog {
    /* display: none; */
    position: fixed;
    z-index:9;
    left:0;top:0;right:0;bottom:0;
    transition: all 0.3s;
    visibility: hidden;
    opacity: 0;
}
.mod-dialog.active {display: block;visibility: visible;opacity: 1;}
.mod-dialog-mask {
    position: absolute;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(0,0,0,0.5);
    z-index:0;
}

.mod-dialog-main {
    position: absolute;
    left:50%;top:50vh;
    transform: translate(-50%, -50%);
    width:100px;
    background-color: blue;
}

.mod-dialog-main:before{
    position: absolute;z-index:-1;
    height:50px;
    min-width:20px;
    content: ' ';
    display: block;
    top:-25px;
}
.mod-dialog-main:after{
    position: absolute;z-index:-1;
    content: ' ';
    display: block;
    height:50px;
    min-width:20px;
    bottom:-25px;
}
.mod-dialog-close {
    position: absolute;
    cursor: pointer;
    top:0;right:0;min-width:10px;min-height:10px;
}
/*  弹框 end */


/* tabs */
.mod-tabs{}
.mod-tabs-btn {display: inline-block;cursor: pointer;}
.mod-tabs-btn>img:nth-child(2){display: none;}
/* .mod-tabs-btn:hover img:nth-child(1), .mod-tabs-btn.active>img:nth-child(1){
    display: none;
}
.mod-tabs-btn:hover img:nth-child(2), .mod-tabs-btn.active>img:nth-child(2){
    display: none;
} */
.mod-tabs-item{display: none;}
.mod-tabs-item.active {display: block;}
/* tabs */


/* mod-menu */
.mod-menu
.mod-menu .mod-menu-item {}
.mod-menu .mod-menu-item > span {display: block;cursor: pointer;}
.mod-menu-sub {}
.mod-menu .mod-menu-item > .mod-menu-sub {height:0;overflow: hidden;}
.mod-menu .mod-menu-item.active {background-color: rgba(0,0,0,0.3);}
.mod-menu .mod-menu-item.open .mod-menu-sub {height:auto;}
.mod-menu-sub {margin-left:16px;transition: all 2s;}

/* 返回顶部按钮 */
.mod-toTop {
    position: fixed;
    width:80px;
    height:80px;
    cursor: pointer;
    right:50px;bottom:50px;
    overflow: hidden;
    z-index:5;
}


/* 大段文字或者图文的段落样式 */
.artical {
    overflow:hidden;
    max-width: 100%;
    font-size: 16px;
    line-height: 1.5;
}

.artical .artical-tit {text-align: center;}
.artical .artical-tit img {width:auto;display: block;}
.artical img{max-width: 100%;margin:0 auto;}
.artical .artical-main p {margin-bottom: 16px;}



/*大屏样式*/
@media screen and (min-width: 768px) {

    .pc {display: block!important;}
    .mobile {display: none!important;}
    img {width: auto;display: block;}

    .home {}
    .page{}
}

/*小屏样式*/
@media screen and (max-width: 768px) {
    .pc {display: none!important;}
    .mobile {display: block!important;}
    img {width: 100%;display: block;}

    .mod-dialog-main {
        max-width: 90%;
    }

    .home{}
    .page {}
}