/*=== 作者：Distantmemory - 时间：2018年11月 - 版本：1.0 - 个人：www.distantmemory.cc - 公司：www.timoo.net ===*/

/*=== 媒体查询 ===*/
/*手机*/
@media ( min-width : 320px) { 

}

@media ( min-width : 360px) { 

} 

@media ( min-width : 400px) { 

} 

/*平板电脑*/
@media ( min-width : 640px) {

}

@media ( min-width : 768px) {

}

/*笔记本电脑*/
@media ( min-width : 960px) {

} 

@media ( min-width : 1024px) {

} 

/*PC电脑*/
@media ( min-width : 1200px) { 
    
} 

/*大屏PC电脑*/
@media ( min-width : 1600px) { 
    
}

/*=== Style ===*/
.sidebar { box-sizing: border-box; position: fixed; top: 0; width: 100%; height: 100%; background: #011327; overflow: hidden; z-index: 99; 
    transform: translate(-100%);
    -ms-transform: translate(-100%);
    -moz-transform: translate(-100%);
    -webkit-transform: translate(-100%);
    -o-transform: translate(-100%); }
.sidebar.on { 
    transform: translate(0);
    -ms-transform: translate(0);
    -moz-transform: translate(0);
    -webkit-transform: translate(0);
    -o-transform: translate(0); }
.sidebar-logo { padding: 0.08rem 0.64rem; border-bottom: 0.01rem solid #000; }
.sidebar-menu nav { padding-bottom: 0.16rem; line-height: 0.4rem; font-size: 0.14rem; }
.sidebar-menu nav a { padding: 0 0.16rem; border-top-right-radius: 0.02rem; border-bottom-right-radius: 0.02rem; color: #999; }
.sidebar-menu nav i { font-size: 0.12rem; }
.sidebar-menu nav .sub-menu i { 
    transform: scale(0.5);
    -ms-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -o-transform: scale(0.5); }
.sidebar-menu nav > ul > li { position: relative; overflow: hidden; }
.sidebar-menu nav > ul > li > a { display: block; border-bottom: 0.01rem solid rgba(0,0,0,0.3); }
.sidebar-menu nav > ul > li > a i { position: relative; top: -0.01rem; }
.sidebar-menu nav > ul > li > i { position: absolute; top: 0; right: 0; width: 0.4rem; height: 0.4rem; line-height: 0.4rem; text-align: center; font-size: 0.16rem; color: #FFF; cursor: pointer; z-index: 2; }
.sidebar-menu nav > ul > li.on > i {
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); 
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -o-transform:rotate(90deg); }
.sidebar-menu nav a:hover, 
.sidebar-menu nav > ul > li.on > a { background: #FF3D00; color: #FFF; }
.sidebar-menu nav > ul > li.on .sub-menu { border-bottom: 0.01rem solid rgba(0,0,0,0.3); }
.sidebar-menu .sub-menu { height: 0; }
.sidebar-menu .sub-menu > li > a { display: block; }
.sidebar-menu .sub-menu > li > a:hover,
.sidebar-menu .sub-menu > li.on > a { background: #021831; color: #FFF; }

/*边栏背景*/
.sidebar-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); pointer-events: none; opacity: 0; z-index: 98; }
.sidebar-background.on { pointer-events: all; opacity: 1; }

/*边栏控制按钮*/
.sidebar-control { position: fixed; top: 0; right: 0.24rem; width: 0.20rem; height: 0.15rem; z-index: 100; cursor: pointer; 
    transform: translate(0, 0.32rem);
    -ms-transform: translate(0, 0.32rem);
    -moz-transform: translate(0, 0.32rem);
    -webkit-transform: translate(0, 0.32rem);
    -o-transform: translate(0, 0.32rem); }
.sidebar-control.fixed-before { opacity: 0;
    transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -moz-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);  }
.sidebar-control.fixed-after { opacity: 1;
    transform: translate(0, 0.32rem);
    -ms-transform: translate(0, 0.32rem);
    -moz-transform: translate(0, 0.32rem);
    -webkit-transform: translate(0, 0.32rem);
    -o-transform: translate(0, 0.32rem); }
.sidebar-control.on {
    transform: translate(0, 0.32rem);
    -ms-transform: translate(0, 0.32rem);
    -moz-transform: translate(0, 0.32rem);
    -webkit-transform: translate(0, 0.32rem);
    -o-transform: translate(0, 0.32rem); }
.sidebar-control .line { position: absolute; top: 50%; margin-top: -0.01rem; width: 100%; height: 0.01rem; background: #FFF; opacity: 1; 
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s; 
    transition: all 0.5s; }
.sidebar-control.on .line { opacity: 0; }
.sidebar-control:before,
.sidebar-control:after { content: ""; display: block; position: absolute; width: 100%; height: 0.01rem; background: #FFF;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s; 
    transition: all 0.5s; }
.sidebar-control:before { top: 0; }
.sidebar-control:after { bottom: 0; }
.sidebar-control.on:before { 
    transform-origin: right; 
    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg); 
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg); }
.sidebar-control.on:after { 
    transform-origin: right; 
    transform:rotate(45deg);
    -ms-transform:rotate(45deg); 
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg); }