@font-face {
    font-family: MyFontName;
    src: url(./DFPKingGothicGB-Light-2.ttf)
}
* {-webkit-tap-highlight-color: transparent;outline: 0;  }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {  margin: 0;  padding: 0;  border: 0;   font: inherit;  vertical-align: baseline;  outline: none;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  }
html { height:100%;background:#fff;touch-action: manipulation;}
body {line-height: 1;font-size: 62.5%;  margin: 0 auto;  min-width: 320px;  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Hiragino Sans GB", "Microsoft Yahei", "微软雅黑", Arial, Helvetica, STHeiti, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";  -webkit-text-size-adjust: 100% !important;  -webkit-user-select: none;  user-select: none; background: #fff; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }
a, a:visited ,a:hover,a:active{ text-decoration: none; color: #333;  }
a,button,input{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;}
.flex {  display: box;  display: -ms-box;  display: -webkit-box;  display: flex;  display: -ms-flexbox;  display: -webkit-flex;  }
.flex-item {  display: block;  flex: 1;  -ms-flex: 1;  -webkit-flex: 1;  box-flex: 1;  -ms-box-flex: 1; -webkit-box-flex: 1; }
.flex-container{justify-content: center; align-items: center;}
.relative { position: relative; }
.none { display: none; }
.bg-fff{ background: #FFFFFF;}
.col-fff{color: #FFFFFF;}
.bg-f7d{background-color: #f7dd92;}
.magfooter{margin-bottom: 1.4rem;}
.fr{text-align: right}
.fl{text-align: left}
.html_hide{ height: 100%;width: 100%;overflow: hidden;}

.home-index{
    position: absolute;
    top: 0px;
    width: 100%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* font-family: 'STXihei'; */
    /* font-family: MyFontName; */
}
#header{
    background: #D10044;
    height: 40px;
    line-height: 40px;
    color: #fff;
    position: relative;
}
.header-left{
    display:flex;
    padding-left: 10px;
}
#header-hover{
    display: flex;
    position: relative;
}
.header-left img{
    width: 20px;
    height: 20px;
    margin-right: 3px;
    margin-top: 9px;
    cursor: pointer;
}
.header-left .h-l-jg{
 color: #763A4C;
 margin: 0px 1px 0px 5px;
}
.header-left .icon-log{
    width: auto;
    height: 40px;
    margin-top: -2px;
    margin-left: -14px;
}
.header-toggle{
    cursor: pointer;
}

#header-toggle-modal{
    display: none;
    left: -10px;
    top: 40px;
    position: absolute;
    color: #fff;
    z-index: 10;
    background: #D10044;
    box-shadow: 1px 2px 3px 1px #666;
    font-weight: bold;
    min-width: 150px;
}
#header-toggle-modal ul{
    padding: 5px 0px;
}
#header-toggle-modal ul li{
    cursor: pointer;
    text-align: center;
    position: relative;
   }
#header-toggle-modal ul li:hover{
   color: #D10044;
   background: #fff;
   cursor: pointer;
}
.modal-actives{
    color: #fff;
   background: #2A231C;
   box-sizing: border-box;
}
.modal-actives::before{
    content: "";
    position: absolute;
    right:-10px;
    top:-10px;
    width: 0;
    height: 0;
    transform: rotate(-45deg);
    border-top: 10px solid transparent;
    border-left: 10px solid #D10044;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
#header-toggle-modal ul li:hover::after{
position: absolute;
left: 0;
height: 40px;
width: 3px;
background: #2C2E2B;
content: '';
}
#center{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    align-items: center;
}
#center #tab-list{
    width: 60%;
    display: flex;
    flex-direction: row;
    height: 60px;
    justify-content: center;
    align-items: center;
    
}
#center #tab-list .tab-aitem{
    flex: 1;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    position: relative;
    transition: all .3s;
}
.tab-aitem:hover{
    color: #D10044;
    padding-bottom: 10px;
}
.tab-aitem:hover::after{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    margin: auto;
    content: '';
    width: 40px;
    background: #D10044;
    height: 2px;
    animation: itemkey .6s;
}
@keyframes itemkey{
    0%{
        width: 0px;
    }
    100%{
        width: 40px;
    }
}
.tab-active{
    color: #D10044;
}
.bg-list{
    position: relative;
    display: none;
    width: 100%;
}
.bg-img{
    width: 100%;
    cursor: pointer;
}

input:disabled{
    background: transparent;
}
.bg-list-active{
    display: block;
}
.login-abs{
    position: absolute;
    left: 0;
    top: calc(100% - 84%);
    right: 0;
    width: calc(100% - 91%);
    margin: auto;
    cursor: pointer;
}
.bg-contexts{
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 59.8%);
    margin: auto;
    display:flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    /* font-weight: bold; */
    /* filter: blur(0.3px); */
    font-size: .8rem;
}
.bg-width{
    width:calc(100% - 57.2%);
}
.bg-paragraph{
    margin-bottom: 1rem;
    letter-spacing: .8px;
    line-height: 1.4rem;
}
.bg-p-context{
    line-height: 1.4rem;
    letter-spacing: .8px;
}
.bg-contexts .bg-title{
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: #000;
}
.bg-person-title{
    font-size: 1.1rem !important;
    color: #000;
}
.href-src
{
    color: #fc2959 !important;
}
.bg-person-par{
    font-size: .7rem !important;
    line-height: 1rem;
    letter-spacing: .8px;
}
.bg-list-aside{
    width:72%;
    /* position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 42%);
    margin: auto; */
    display:flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
}
.bg-list-aside .bg-l-aside-icon{
  width: 33.3%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.bg-list-aside .bg-l-aside-icon img{
    width: 80px;
    transition: all .4s;
}
.btn-list{
    display: flex;
    width: calc(100% - 79%);
}
.btn-list img{
    width: calc(100% - 59%);
    margin: 0px 10px;
}
.lucky-draw{
    top:calc(100% - 56%);
}
.new-hrefs{
    position: absolute;
    left: calc(100% - 50%);
    top: calc(100% - 54%);
    margin: auto;
    width: 200px;
    height: 20px;
}

.btn-login{
    transition: all .4s;
}
.btn-login:hover{
    transform: translateY(-4px);
    filter: grayscale(20%);
}
.btn-login:hover .bg-img{
    filter: grayscale(100%);
}

#login-modal,#regist{
    position: fixed;
    padding: 30px 60px;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width:400px;
    height: 330px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0px 0px 15px 2px #111;
    display: none;
}
#regist{
    height: 370px;
}
#regist .login-m-title-s{
    margin-bottom: 30px;
}
.login-m-title-s{
    font-size: 26px;
    color: #262626;
    font-weight: bold;
}
.form-warp{
    display: flex;
    height: 40px;
    margin-top: 20px;
    border-bottom: 1px solid #e3e3e3;
}
.form-warp img{
    height: 30px;
    margin-top: 5px;
}
.form-warp input{
    border: none;
    width: 100%;
    padding: 10px;
    font-size: 14px;
}
.none-border{
    border: none;
    color: #CECECE;
    font-weight:100;
    letter-spacing: 1px;
    margin-top: 10px;
    font-size: 15px;
}
.login-btns{
    color: #ffff;
    display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 38px;
    background: #fc2959;
    border-radius: 40px;
    font-size: 1rem;
    margin-top: 40px;
    border: none;
    cursor: pointer;
}
.login-modal-warp{
    z-index: 105;
}
.mask{
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.4;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  z-index: 100;
  display: none;
}
.new-buttn{
    width: calc(100% - 87%);
}
input::-webkit-input-placeholder {
    color: #CECECE;
    font-weight: 100;
}
input::-webkit--internal-autofill-selected{
    background: transparent;
}
.seach-img{
    width: calc(100% - 67%);
    margin-bottom: 1.2rem;
}
.bg-l-aside-icon:hover img{
    transform: translateY(-15px);
}
.bg-par-more{
    margin-bottom: 2.4rem;
}
.bg-title-more{
    /* margin-bottom: .8rem !important; */
}
.bg-l-aside-icon:hover::before{
    content: '';
    position: absolute;
    left: 0px;
    height: 0px;
    right: 0;
    width: 20px;
    background: #000;
    bottom: 0;
    margin: auto;
    box-shadow: 0px 0px 10px 2px #2C2E26;
    transform: rotateX(45deg);
    animation: before .6s;
}





::-webkit-scrollbar  
{  
    display: none;
}  
::-moz-scrollbar  
{  
    display: none;
} 
::-ms-scrollbar  
{  
    display: none;
} 
::-o-scrollbar  
{  
    display: none;
} 

::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    /* border-radius: 10px;   */
    background-color: lightgray;  
}  

::-webkit-scrollbar-thumb  
{  
    /* border-radius: 10px;   */
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #fc2959;  
}  
::-webkit-scrollbar-button{
     background-color: #000;
     border:1px solid #fff;
}
.bg-erwei{
    margin-bottom: 0px;
}
.second-erwei{
    margin-bottom: .3rem;;
}
.er-wei-ma{
    width: 200px;
    margin-bottom: 20px;
}
#error-message{
    position: fixed;
    left: 0;
    right: 0;
    top: 20%;
    z-index: 1000;
    opacity: .9;
    width: 300px;
    background: #D10044;
    text-align: center;
    padding:15px 20px;
    margin: auto;
    border-radius: 2px;
    color: #fff;
    box-shadow: 1px 1px 3px 1px #333;
    display: none;
}
input:-internal-autofill-selected{
    background: #fff;
}

.db-btn-even{
    right: calc(100% - 90%);
}
.db-btn-odd{
    left: calc(100% - 90%);
}


@keyframes before{
    0%{
        width: 60px;
    }
    100%{
        width: 20px;
    }
}

@media screen and (max-width:860px){
    .login-abs{
        width:60px;
    }
    #tab-list{
        width: 100% !important;
        overflow: auto;
    }
    #tab-list .tab-aitem{
        width: 33.3%;
        font-size: 10px !important;
    }
    .login-m-title-s{
        font-size: 20px;
    }
    .none-border{
        font-size: 12px;
    }
    .btn-list{
        width: 140px;
    }
    .btn-list img{
        margin: 0px 5px;
    }
    .db-btn-even{
    right: calc(100% - 90%);
    }
    .db-btn-odd{
    left: calc(100% - 90%);
    }
    .rg-btns{
        width: 90px;
    }
}
@media screen and (max-width:500px){
    #tab-list{
        display: none !important;
    }
    #login-modal, #regist{
        width: 80%;
        padding: 20px;
    }
    .db-btn-even{
        right: calc(100% - 80%);
        }
        .db-btn-odd{
        left: calc(100% - 80%);
        }
    
}
    @media screen and (min-width:2000px){
    .new-hrefs{
    left: calc(100% - 50%);
    top: calc(100% - 53%);
    width: 20%;
    cursor: pointer;
    }
}
@media (min-width:320px) and (max-width:1125px){
    .seach-img{
        width: calc(100% - 50%);
    }
    .bg-list-aside{
        top:calc(100% - 34%);
    }
    .bg-contexts{
        width: calc(100% - 30.2%);
        font-size: .5rem;
    }
    .bg-contexts .bg-title{
        font-size: 1rem;
    }
}