@charset "utf-8";

/*导入字体*/
@font-face { font-family: 'hui'; src: url('../font/hui.eot?#font-spider') format('embedded-opentype'), url('../font/hui.ttf') format('truetype'); font-weight: normal; font-style: normal; }
.hui_footer { font-family: "hui"; color: #fff;}

@font-face { font-family: 'gr'; src: url('../font/gr.eot?#font-spider') format('embedded-opentype'), url('../font/gr.ttf') format('truetype'); font-weight: normal; font-style: normal; }
.gr_footer { font-family: "gr"; color: #fff;}

/* CSS Document wlo:Cflower */
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 { border: 0 none; font: inherit; margin: 0; padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: outside none none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after, q::before, q::after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
* { box-sizing: border-box; outline: 0 none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
input, textarea { border-radius: 0; outline: 0 none; resize: none; -webkit-appearance: none;    /*去掉iOS下input的默认内阴影*/ }
.clearfix:after, .clearfloat:after { visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0; }
html { font-family: "Arial", "Heiti SC", "Helvetica", "Microsoft YaHei", sans-serif; -webkit-text-size-adjust: none; }
body { margin: 0 auto; min-width: 3.2rem; position: relative; width: 100%; height: 100%; background: #fff; }
a { text-decoration: none; color: inherit; }
.clearfloat:after { clear: both; content: ""; display: block; height: 0; visibility: hidden; }
.ridius { border-radius: 5px; }

/* 假如添加了video标签,可能会出现video标签默认置顶的情况,解决这个bug可以通过样式设置来规避;*/
.compatibleStyle { backface-visibility: hidden; -webkit-backface-visibility: hidden;    /* Chrome 和 Safari */ -moz-backface-visibility: hidden;    /* Firefox */ -ms-backface-visibility: hidden;    /* Internet Explorer */ -webkit-perspective: 0; -webkit-transform: translate3d(0, 0, 0); visibility: visible; }

/*弹出层遮罩div*/
.black_overlay { display: none; position: absolute; top: 0%; left: 0%; bottom: 0; right: 0; width: 100%; height: 100%; background-color: #000; z-index: 988; -moz-opacity: 0.5; opacity: .50; filter: alpha(opacity=50); }
.btn { display: block; cursor: pointer; }
.pos { position: absolute; }
.fl { float: left; }
.fr { float: right; }
.w750 { width: 100%; }
.curp { cursor: pointer; }
.imgcove { width: 100%; height: 100%; display: block; border: none; }
.yellow { color: #ffd800; }
.hide { display: none; }
.show { display: block; }
.zIndex2 { z-index: 9; position: relative; }



#wrap{
    position: relative;
    overflow:hidden;
}


video{
    position: fixed;
    left: 50%;
    bottom: 0px;
    transform: translate(-50%,0);
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
    /*加滤镜*/
    /*filter: blur(15px); //背景模糊设置 */
    /*-webkit-filter: grayscale(100%);*/
    /*filter:grayscale(100%); //背景灰度设置*/
    z-index:-11
}
source{
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
}


.mark{
    display: block;
    background: rgba(0,0,0,.3) url(../images/mark.png);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0 ;
}

.nav{
    width: 100%;
    height:3.42rem;
    background: url(../images/nav.png) no-repeat center 0 / 100% 3.42rem;
    position: fixed;
    z-index: 9;
}
.footer{
    width: 100%;
    height:1.08rem;
    position: fixed;
    bottom: 0;
    background: rgba(0,0,0,.8);
    display: flex;
    display: -webkit-flex; /* Safari */
    justify-content:center;
    z-index: 9;
    padding-top: 0.3rem;
}
.footer p{
    align-items:center;
    color: #a0a0a0;
    font-size: 0.14rem;
    margin: 0 0.2rem;
}
.footer p:nth-child(2){
    margin-top: 0.05rem;
}

.menu{
    width: 100%;
    height: 0.9rem;
    background: url(../images/line.png) no-repeat 0 bottom / 25.6rem 0.02rem;
    display: -webkit-flex; /* Safari */
    display: flex;
    position: relative;
    z-index: 1;
}

.navbar{
    width: 80%;
    height: 100%;
    margin: 0 auto;
}

.navbar .logo{
    float: left;
    display: block;
    margin: 0.24rem 0 0;
}

.nav-item{
    float: right;
    margin: 0.35rem 0 0;
}

.nav-item .btn{display: block;text-indent: -999em;display: inline-block;}
.nav-item .btn_search{
    width:0.2rem;
    height: 0.2rem;
    background: url(../images/btn_search.png) no-repeat 0 0 / 0.2rem 0.2rem;
    margin-right: 0.5rem;
    position: relative;
    top: 0.05rem;
}
.nav-item .btn_wx,.nav-item .btn_kz,.nav-item .btn_wb{
    background: url(../images/nav-item.png) no-repeat 0 0 / 1.34rem 0.28rem;
    width: 0.3rem;
    height: 0.28rem;
    margin: 0 0.1rem;
    position: relative;
}

.nav-item .btn_kz{
    background-position: -0.55rem 0;
}
.nav-item .btn_wb{
    background-position: -1.04rem 0;
}

.pop_panel{
    width:2.4rem;
    height: 2.38rem;
    position: fixed;
    right: 10%;
    top: 1rem;
    display: none;
}

.nav-item .btn_wx .after {
    display: block;
    width: 0.12rem;
    height: 0.08rem;
    background: url(../images/next-sj.png) no-repeat 0 0 / 0.12rem 0.08rem;
    position: absolute;
    bottom: -0.15rem;
    left: 50%;
    margin-left: -0.06rem;
    display: none;
}

.cont-wrapper{
    width: 100%;
    position: fixed;
    top: 0.8rem;
    bottom: 1.8rem;
    display: flex;
    display: -webkit-flex; /* Safari */
    justify-content:center;
    z-index: 9;
}

.container-fluid{
    width: 6.0rem;
    display: flex;
    display: -webkit-flex; /* Safari */
    justify-content:center;
    position: relative;
    flex-direction:column;
}

.container-fluid .nav-link{
    width: 100%;
    align-content:center;
    text-align: center;
    position: relative;
    align-items:center;
    height: 1.2rem;
    margin: 0.2rem auto;
    cursor: pointer;
    overflow: hidden;
}
.container-fluid .nav-link span{
    display: block;
    width: 100%;
    height: 100%;
    line-height: 1.2rem;
    font-size: 0.42rem;
    position: absolute;
    top: 0;
    transition: all 200ms;
}

.container-fluid .nav-link p{
    width: 100%;
    height: 100%;
    line-height: 1.2rem;
    text-transform:capitalize;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:0.01rem rgba(255,255,255,.5);
    font-size: .66rem;
    transition: all 1s;
    position: relative;
    top: 0;
}

.container-fluid .nav-link p::before{
    content: attr(data-letters);
    position: absolute;
    color: #fff;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    width: 0%;
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.container-fluid .nav-link:hover p::before {
    width: 100%;
}
.container-fluid .nav-link p.active{
    -webkit-text-fill-color:#fff;
}
.container-fluid .nav-link span.active{
    text-transform:capitalize;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:0.01rem rgba(255,255,255,.5);
    font-size: 1rem;
    /*display: none;*/
}

.container-fluid .nav-link .n_after{
    display: block;
    height: 0.52rem;
    width: 100%;
    position: absolute;
    top: 0.38rem;
    left:100%;
    background: #000;
    transition: all 500ms;
    z-index: -1;
}

/*======废弃======*/
.fadeInLeftMove{
    animation: nlikeMove 300ms linear;
    -webkit-animation: nlikeMove 300ms linear; /* Safari 与 Chrome */
}

.fadeInRightMove{
    animation: RightMove 300ms linear;
    -webkit-animation: RightMove 300ms linear; /* Safari 与 Chrome */
}
@keyframes nlikeMove {
    from {left: -100%;}
    to {left: 100%;}
}

@-webkit-keyframes nlikeMove {
     from {left: -100%;}
    to {left: 100%;}
}


@keyframes RightMove {
    from {left: 100%;}
    to {left: -100%;}
}

@-webkit-keyframes RightMove {
     from {left: 100%;}
    to {left: -100%;}
}
/*======废弃======*/


.container-fluid .nav-link p.curr{
    font-size: 0.85rem;
    -webkit-text-fill-color:#fff;
    position: absolute;
    width: 100%;
    text-align: center;
    top: -0.5rem;
}


/*//iphoneX、iphoneXs*/
/*即: 设备屏幕可见宽度为375px， 可见高度为812px及设备像素比为3*/
@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) { }

/*//iphone Xs Max*/
@media only screen and (device-width:414px) and (device-height:896px) and (-webkit-device-pixel-ratio:3) { }

/*//iphone XR*/
@media only screen and (device-width:414px) and (device-height:896px) and (-webkit-device-pixel-ratio:2) { }

/* 兼容iphone5 */
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2) { }

/*兼容iphone6，iphone7，iphone8s*/
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2) { }

/*兼容iphone6 Plus,iphone7 Plus,iphone8 Plus*/
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2) { }