html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
body a.wfEditorMode{display:none;}
body.wfEditorMode a.wfEditorMode{display:block;height:1.3em;line-height:1.3em;float:right;margin:0;padding:0 0.5em;background:white;color:#99ccff;margin-top:-1.3em}


body{
    width: 7.5rem;
    height: 100vh;
    margin: 0 auto;
}

body #page{
    width: 100%;
    height: 100%;
}

.box{
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

img{
    display: block;
}



.laod{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: none;
}

.laod2{
    animation: laod .5s linear;
}

@keyframes laod{
    0%{background-color: rgba(0, 0, 0, 0);}
    100%{background-color: rgba(0, 0, 0, 0.8);}
}


.laod img:nth-of-type(1){
    position: absolute;
    width: 2.52rem;
    height: auto;
    top: 6rem;
    
}
.laod img:nth-of-type(2){
    position: absolute;
    width: .9rem;
    height: auto;
    top: 7.7rem;
}
.laod img{
    left: 50%;
    transform: translateX(-50%);
}

.laod .img{
    animation: laod2 .5s linear;
}

@keyframes laod2{
    0%{opacity: 0;}
    100%{opacity: 1;}
}


@keyframes show_hide{
    0%{opacity: 0;}
    100%{opacity: 1;}
}

@keyframes to_top {
    0%{opacity: 0; transform: translateY(.5rem);}
    100%{opacity: 1; transform: translateY(0);}
}


/* 视频样式 */
.mask,
.mask2 {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 .6rem;
    box-sizing: border-box;
    display: none;
}

.mask .video_title,
.mask2 .video_title {
    width: 100%;
    margin-top: 4.5rem;
    position: relative;
}

.mask .video_title .title_img,
.mask2 .video_title .title_img {
    width: 100%;
    height: auto;
}

.mask .video_title .close,
.mask2 .video_title .close {
    width: .4rem;
    height: .4rem;
    position: absolute;
    top: .2rem;
    right: .2rem;
    z-index: 1000;
}

.mask .video,
.mask2 .video {
    width: 100%;
    height: 3.55rem;
    background-color: #000;
}

.mask .video video,
.mask2 .video video {
    width: 100%;
    height: 100%;
}