body{
    height:100%;
    margin:0;
}
@font-face {
    font-family: Alimama;
    src: url(../font/阿里妈妈方圆体/AlimamaFangYuanTiVF-Thin.ttf);    
}
* {    
    font-family: 'Alimama', arial, helvetica, Sans-Serif;
    font-variation-settings: 'wght' 500,'BEVL' 1;
    font-size: 12px;
    scrollbar-color: #BABABA rgba(0,0,0,0);/* 设置滚动条颜色 */
    scrollbar-width: thin;/* 设置滚动条宽度 */
}
::-webkit-scrollbar{  
    width: 2px;
    height: 16px;        
    background-color: rgba(0,0,0,0);
}
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
    border-radius: 10px;
    background-color: rgba(0,0,0,0);  
}
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb{
    background-color: #BABABA;
}

li {
    display: inline-block;       
}
div,p,a,b
{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
div{
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
#bg{
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(../img/主页背景.jpg) 0 0 no-repeat;
    background-size: cover;    
    background-attachment: fixed;
}
#top{
    width: 100%;
    height: 60px;
    left: 0px;
    top: 0px;
    position: fixed;    
}
#top div,#top img{
    position: relative;
    float: left;
}
#main{
    position: absolute;
    transform: translateX(151px);
    top: 25%;
}
#left{
    position: relative;
    width: 370px;
    float: left;
}
#left li{
    position: relative;
    width: 370px;
    height: 63px;
    margin-bottom: 9px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.80) 51%, rgba(0, 0, 0, 0) 100%);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#left li.short{
    width: 100px;
}
#left li.long{
    width: 370px;
}
#left li img{
    width: 63px;
    height: 63px;
    left: 19px;
    top: 0px;
    position: absolute;
}

#left .word1{
    left: 100px;
    top: 39px;
    position: absolute;
    color: #818181;
    font-size: 14px;    
    letter-spacing: 1.20px;    
}
#left .word2{
    left: 100px;
    top: 6px;
    position: absolute;
    color: white;
    font-size: 20px;    
    letter-spacing: 1.80px;    
}
#left li .tag{
    width: 4px;
    height: 63px;
    background: #DBFF01;
    display: block;
    opacity: 0;
}
#left .Divider{
    width: 105px;
    height: 1px;
    left: 100px;
    top: 34px;
    position: absolute;
    background: #C2C2C2;
}
#left li:hover
{
    animation:Tagtoleft 0.5s ease forwards;
}
#left li:hover .tag
{    
    animation:Tagtoleft-p2 0.5s ease forwards;
}
#left li:not(:hover)
{
    animation:Tagtoleft-back 0.5s ease forwards;
}
#left li:not(:hover) .tag
{
    animation:Tagtoleft-p2-back 0.5s ease forwards;
}
#right{
    position: relative;
    width: 515px;
    height: 436px;
    top: -1px;
    float: left;
}
#right #date{
    width: 50px;
    height: 64px;
    left: 455px;
    top: 0px;
    position: absolute;
}
#right #date div{
    position: relative;
}
#right #date #xiaoxi{
    width: 50px;
    height: 14px;
    color: #000;
    font-size: 12px;
    background: #DBFF00; 
}
#right #date #xiaoxi p{
    position: absolute;
    margin: 0px;
    top: 0px;
    left: 13px; 
}
#right #date #gonggao{
    width: 340px;
    height: 540px;
    left: 60px;
    top: 0px;
    background: #323335;
    position: absolute;
    display: none;
}
#right #date #gonggao-top{
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0.50);
}
#right #date #gonggao-top div{
    color: white;
    font-size: 18px;
    letter-spacing: 1.8px;
    top: 14px;
    position: relative;
    text-align: center; 
}
#right #etime{
    width: 306px;
    height: 77px;
    left: 199px;
    top: 73px;
    position: absolute;
}
#right #ltime{
    width: 226px;
    height: 77px;
    left: 199px;
    top: 153px;
    position: absolute;
}
#right #dtime{
    width: 77px;
    height: 77px;
    left: 428px;
    top: 153px;
    position: absolute;
}
#right #clock{
    width: 130px;
    height: 130px;
    left: 30px;
    top: 65px;
    position: absolute;
}
#right #clock svg,#circadian-image{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#right #clock svg{
    -webkit-transform: rotate(-90deg);
    transform: translate(-50%,-50%) rotate(-90deg);
}
#right .word-top{
    left: 0px;
    top: 0px;    
    height: 26px;
    position: absolute;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.80) 45%, rgba(0, 0, 0, 0.10) 100%);
}
#right .word-top div{
    left: 6px;
    top: 4px;
    /* font-family: '微软雅黑'; */
    color: white;
    font-size: 16px;    
    position: absolute;    
}
#right .word-main{
    left: 0px;
    top: 26px;
    height: 51px;    
    position: absolute;
    background: rgba(0, 0, 0, 0.60);
}
#right .word-main div{
    left: 0px;
    top: 5px;
    position: relative;
    text-align: center;
    color: #C2C2C2;
    /* font-family: '微软雅黑'; */
    font-size: 16px;
}
#right .word-main div b{
    color: white;
    /* font-family: '微软雅黑'; */
    font-size: 16px;
}
#right #raidboss{
    width: 515px;
    height: 160px;
    left: 0px;
    top: 256px;
    position: absolute;
}
#right #raid{
    width: 220px;
    height: 160px;
    left: 0px;    
    position: relative;
    float: left;
}
#right #boss{
    width: 294px;
    height: 160px;
    left: 0px;    
    position: relative;
    float: left;
}
#right .title-l{
    top: 4px;
    position: relative;
    text-align: center;
    color: white;
    font-size: 20px;
}
#right #raid li{
    left: 12px;
    top: 51px;
    width: 198px;
    height: 30px;
    background: rgba(0, 0, 0, 0.20);    
    position: relative;
    margin-bottom: 2px;    
}
#right #raid li img{
    width: 22px;
    height: 22px;
    margin: 4px;
    position: relative;
    float: left;    
}
#right #raid li div:nth-child(1){
    position: relative;
    float: left;
    width: 2px;
    height: 30px;
}
#right #raid li div:nth-child(3){
    color: white;
    position: relative;
    float: left;
    margin: 6px 0px 5px 16px;
    font-size: 16px;
}
#right #boss #bosslist{
    padding: 0px;
    margin: 0px;    
    position: absolute;
    top: 59px;
}
#right #boss #bosslist ul{
    padding: 0px;
    margin: 0px;
    position: relative;
    overflow: auto;
    height: 122px;
    display: none;
    /* animation:roll-1 18s linear forwards;
    animation-iteration-count: infinite; */
    /* animation-play-state:running; */
}
#right #boss #bosslist #list:hover{
    /* animation-play-state:paused; */
}
#right #boss li{
    left: 10px;
    top: 0px;
    width: 276px;
    height: 25px;
    background: rgba(0, 0, 0, 0.20);
    position: relative;
    margin-bottom: 2px;    
}
#right #boss li img{
    position: relative;
    float: left;
}
#right #boss li img:nth-child(2){
    width: 20px;
    height: 20px;
    left: 2px;
    top: 2px;
}
#right #boss li div{
    top: 4px;
    position: relative;
    float: left;    
    height: 25px;
    white-space: nowrap;
    overflow:hidden;
    color: white;
    /* font-family: '微软雅黑'; */
}
#right #boss li div:nth-child(1){
    width: 2px;
    height: 25px;
    top: 0px;
    background-color: #FFDF00;
}
#right #boss li div:nth-child(3){
    left: 5px;
}
#right #boss li p{
    margin: 0px;
    position: relative;
    float: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#right #boss li div:nth-child(4){    
    position: absolute;
    width: 84px;
    left: 185px;
    margin: 1px 0px 0px 0px;    
}
#content{
    width: 0px;
    height: 0px;
    position: absolute;
    left: 100px;
    background: #323335; 
    overflow: hidden;
}
#content #content-top{
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0.50);
}
#content #content-top img{
    width: 36px;
    height: 36px;
    margin: 7px;
    left: 5px;
}
#content #content-top div{
    color: white;
    font-size: 18px;
    letter-spacing: 1.8px;
    top: 14px;
    position: relative;
}
#ex{
    width: 300px;
    height: 0px;
    position: absolute;
    left: 1193px;
    background: #323335;
    opacity: 0;
    overflow: hidden;
}
#ex #ex-top{
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0.50);
}
#ex #ex-top div{
    color: white;
    font-size: 18px;
    letter-spacing: 1.8px;
    top: 14px;
    position: relative;
    text-align: center; 
}
#home{
    width: 90px;
    height: 56px;
    opacity: 0;
    position: absolute;
    top: 440px;
    background: #323335;
}
#home img{
    width: 40px;
    left: 25px;
    top: 11px;
}
#bottom{
    position: absolute;
    left: 36px;
    bottom: 22px;
}
#bottom div,img{
    position: relative;
    float: left;
}
#search{
    width: 1088px;
    height: 0px;
    background-color: #404040;
    overflow: hidden;    
}
#search .block{
    width: 1088px;    
    position: relative;
    border-bottom: dashed;
    border-bottom-color: #808080;
    border-bottom-width: 2px;
    float: left;
}
#search .block:nth-child(4){    
    border-bottom: none;    
}
#search .block .left{
    width: 74px;
    color: #fff;
    font-size: 16px;
    margin: 10px 0px 0px 15px;
    position: relative;
    float: left;
    letter-spacing: 1.6px; 
}
#search .block .right{
    width: 980px;
    color: #808080;
    font-size: 12px;
    top: 10px;
    position: relative;
    float: left;
    margin-bottom: 20px;
}
#search .block .right li{    
    position: relative;    
    float: left;
    color: #C2C2C2;
    margin: 0px 10px;
}
#search .block .right li a.select p{    
    background: #DBFF00;
    color: #000;
}
#search .block .right p{
    margin: 0px;
    letter-spacing: 1.2px; 
}
#bookmark{
    width: 132px;
    height: 21px;
    background-color: #404040;
    position: absolute;
    left: 478px;
}
#bookmark img{
    left: 56px;
    width: 20px;
    height: 14px;
    top: 3px;
}
#maoxian{
    height: 620px;
    overflow: auto;
    top: 60px;
    position: relative;
}
#maoxian-top{
    position: relative;
    float: left;
    left: 12px;    
    font-size: 18px;
    color: #fff;
    opacity: 0;
}
#save{
    position: relative;
    float: right;    
    left: -40px;
    display: none;
}
#save.check{
    display: block;
}
#save div{
    position: relative;
    float: left;
    width: 100px;
    height: 20px;
    font-size: 16px;
    text-align: center;
    padding: 5px 0px;
    margin: 0px 3px;
}
#save div:nth-child(1){
    background: #3E3E3E;
    color: #fff;
}
#save div:nth-child(2){
    background: #DBFF00; 
    color: #000;
}
#switch{
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#maoxian-switch{
    position: relative;
    float: right;
    right: 12px;    
}
#maoxian-switch .switch-box-label {
    margin-right: 4px;
    font-size: 18px;
    color: #fff;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
#maoxian-switch .switch-box-slider {
    position: relative;
    display: inline-block;
    height: 16px;
    width: 36px;
    top: 4px;
    border-color: #fff;
    border-width: 2px;    
    border-style: solid;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
#maoxian-switch .switch-box-slider:after {
    position: absolute;
    left: 2px;
    top: 2px;
    display: block;
    width: 12px;
    height: 12px;    
    background: #fff;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    content: '';
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
#maoxian-switch .switch-box-input {
    display: none;
}
#maoxian-switch .switch-box-input:checked ~ .switch-box-slider:after {
    left: 22px;
}
#maoxian-switch .switch-box-input:checked:not(:disabled) ~ .switch-box-label {
    color: #DBFF00;
}
#maoxian-switch .switch-box-input:checked:not(:disabled) ~ .switch-box-slider {
    border-color: #DBFF00;
}
#maoxian-switch .switch-box-input:checked:not(:disabled) ~ .switch-box-slider:after {
    background: #DBFF00;
}
#maoxian .maoxiance{
    width: 528px;
    height: 120px;
    margin: 4px;
    position: relative;
    float: left;
    top: 0px;
    left: 8px;
    right: 8px;
    border-radius: 4px;    
}
#maoxian .maoxiance img{
    position: absolute;    
    left: -50px;
    top: -5px;
}
#maoxian .maoxiance.long img{
    width: 120px;
    left: -5px;
    top: 20px;
}
#maoxian .maoxiance div{
    color: #fff;
    font-size: 14px;
    position: relative;
    float: left;
    left: 8px;
    font-family: "微软雅黑",Microsoft YaHei,Arial, Helvetica, sans-serif;
    font-weight: 400;
    letter-spacing: 1.6px; 
}
#maoxian .maoxiance div:nth-child(1){    
    width: 110px;
    height: 120px;
    margin-right: 10px;
}
#maoxian .maoxiance div:nth-child(2){    
    font-size: 16px;
    top: 8px;
}
#maoxian .maoxiance div:nth-child(3){    
    width: 400px;
    height: 1px;
    top: 12px;
    background: linear-gradient(90deg, #D9D9D9 0%, rgba(217, 217, 217, 0.00) 100%);
}
#maoxian .maoxiance div:nth-child(4){    
    width: 514px;
    height: 106px;
    top: 5px;
    left: 5px;
    position: absolute;
}
#maoxian .maoxiance div:nth-child(5){
    width: 400px;
    letter-spacing: 1.4px;
    margin-top: 20px;
}
#maoxian .maoxiance div:nth-child(5) li{    
    font-size: 14px;
    letter-spacing: 1.4px;
    font-family: "微软雅黑",Microsoft YaHei,Arial, Helvetica, sans-serif;
    font-weight: 400;    
    position: relative;
    display: table;
    margin: 3px 0px;
}
#maoxian .maoxiance div:nth-child(5) li div{
    width: 5px;
    height: 19px;
    margin-right: 5px;
    left: -5px;
}
#maoxian .maoxiance div:nth-child(6){
    position: absolute;
    left: 47px;
    top: 12px;
    display: none;
}
#maoxian .maoxiance.long div:nth-child(6){    
    left: 2px;
    top: -13px;
}
#maoxian .maoxiance div:nth-child(6) img{
    content:url(../img/NEW.png);
    width: 45px;
    height: 18px;
}
#maoxian .maoxiance.new div:nth-child(6){    
    display: block;
}
#maoxian .maoxiance div:nth-child(7),#maoxian .maoxiance div:nth-child(8){
    width: 528px;
    height: 120px;
    left: 0px;
    border-radius: 4px;
    position: absolute;    
    opacity: 0;
}
#maoxian .maoxiance div:nth-child(8){
    display: none;
}
#maoxian .maoxiance div:nth-child(7){
    background: rgba(0, 0, 0, 0.30);    
}
#maoxian .maoxiance.done div:nth-child(7){    
    opacity: 1;
}
#maoxian .maoxiance div:nth-child(7) div{
    width: 528px;
    height: 30px;
    left: 0px;
    top: 37.5%;
    font-size: 24px;    
    font-weight: 700;    
    letter-spacing: 2.4px;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.50);
    text-align: center;
}
#maoxian .maoxiance div:nth-child(7) div .line{
    width: 150px;
    height: 1px;
    color: #fff;
    top: 15px;
    background-color: #fff;
    position: absolute;
}
#maoxian .maoxiance div:nth-child(7) div .line:nth-child(1){
    left: 20px;
}
#maoxian .maoxiance div:nth-child(7) div .line:nth-child(2){
    left: 357px;
}
#maoxian .maoxiance.check:hover div:nth-child(8){
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 46.51%);
    display: block;
    opacity: 1;
}
#maoxian .maoxiance div:nth-child(8) a img{
    content:url(../img/R.png);
    width: 44px;
    height: 44px;
}
#maoxian .maoxiance div:nth-child(8) a:nth-child(1) img{
    content:url(../img/未拥有_icon.png);
    left: 350px;
    top: 41px;    
}
#maoxian .maoxiance.doing div:nth-child(8) a:nth-child(1) img{
    content:url(../img/已拥有_icon.png);
    left: 350px;
    top: 41px;
}
#maoxian .maoxiance div:nth-child(8) a:nth-child(2) img{
    content:url(../img/置顶_icon.png);
    left: 400px;
    top: 41px;    
}
#maoxian .maoxiance div:nth-child(8) a:nth-child(3) img{
    content:url(../img/未完成_icon.png);
    left: 460px;
    top: 41px;
}
#maoxian .maoxiance.no{
    background: linear-gradient(122deg, #38393A 0%, #565656 44.79%, #3E3E3E 100%);
}
#maoxian .maoxiance.doing{
    background: linear-gradient(122deg, #0B1122 0%, #1E2944 44.79%, #0B1122 100%);
}
#maoxian .maoxiance.top div:nth-child(4){
    border-radius: 2px;
    border-color: rgba(210,166,52,1);
    border-width: 2px;
    border-style: solid;
}
#maoxian .maoxiance.hidden{
    display: none;
}
#overlay{
    position: absolute;
    width: 0px;
    height: 0px;
    display: none;
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(5px); 
}
#book{
    width: 1064px;
    height: 666px;
    position: absolute;
    background: url(../img/冒险册底板.png) 0 0 no-repeat;        
}
#book .lefttop{
    width: 458px;
    height: 54px; 
    left: 28px;
    top: 30px;
    position: absolute;
    background: url(../img/冒险册名称底板.png) 0 0 no-repeat;
    color: #593E32;
    font-family: Microsoft YaHei;
    font-size: 20px;    
    font-weight: 700;    
    letter-spacing: 2px;
    text-align: center;
    padding-top: 13px;
}
#book .left{
    width: 480px;
    height: 526px;
    left: 20px;
    top: 107px; 
    position: absolute;
    background: url(../img/任务路径底板.png) 0 0 no-repeat;
}
#book .left svg{
    width: 480px;
    height: 526px;    
    position: absolute;    
}
#book .left svg line{
    stroke-width:2;
    stroke:rgb(255, 255, 255,0.5);
}
#book .left .point{
    width: 62px;
    height: 62px;
    left: 0px;
    top: 0px;
    position: absolute;
    background: url(../img/路径点.png) 0 0 no-repeat;
    text-align: center;
    padding-top: 17px;
    font-size: 24px;
}
#book .right{
    width: 500px;
    height: 530px;
    overflow: auto;
    left: 556px;
    top: 109px;
    position: absolute;
}
#book .right li{
    width: 490px;
    position: relative;
    display: inline-flex;
}
#book .right li:nth-child(odd){
    background: #414141;
}
#book .right li:nth-child(even){
    background: #323335;
}
#book .right li:nth-child(1){
    background: #191A1B;
}
#book .right li div{    
    position: relative;
    float: left;
    color: #FFF;
    text-align: center;
    font-size: 18px;
    letter-spacing: 1.8px; 
}
#book .right li div:nth-child(1){    
    width: 62px;
    align-items: center;
    display: grid;    
}
#book .right li div:nth-child(2){    
    width: 214px;    
}
#book .right li div:nth-child(3){    
    width: 214px;
}
@keyframes Tagtoleft {
    0% { left: 0px;}    
    100% { left: -5px;}
}
@keyframes Tagtoleft-p2 {
    0% { opacity: 0;}
    50% { opacity: 0.5;}
    100% { opacity: 1;}
}
@keyframes Tagtoleft-back {
    0% { left: -5px;}    
    100% { left: 0px;}
}
@keyframes Tagtoleft-p2-back {
    0% { opacity: 1;}
    50% { opacity: 0.5;}
    100% { opacity: 0;}
}
@keyframes roll-1 {
    0% { top: 0px;width: 294px;}
    10% { top: 0px;width: 14px;}
    11% { top: -120px;width: 14px;}
    20% { top: -120px;width: 294px;}
    33% { top: -120px;width: 294px;}
    43% { top: -120px;width: 14px;}
    44% { top: -240px;width: 14px;}
    53% { top: -240px;width: 294px;}
    66% { top: -240px;width: 294px;}
    76% { top: -240px;width: 14px;}
    77% { top: 0px;width: 14px;}
    87% { top: 0px;width: 294px;}
    100% { top: 0px;width: 294px;}
}
@keyframes roll-2 {
    0% { top: -360px;width: 294px;}
    10% { top: -360px;width: 14px;}
    11% { top: -360px;width: 14px;}
    20% { top: -360px;width: 294px;}
    33% { top: -360px;width: 294px;}
    43% { top: -360px;width: 14px;}
    44% { top: -360px;width: 14px;}
    53% { top: -360px;width: 294px;}
    66% { top: -360px;width: 294px;}
    76% { top: -360px;width: 14px;}
    77% { top: -360px;width: 14px;}
    87% { top: -360px;width: 294px;}
    100% { top: -360px;width: 294px;}
}
@keyframes loop-1 {
    0% { transform: translateX(0%);width: auto;}
    100%{ transform: translateX(-20%);width: auto;}
}
@keyframes loop-2 {
    0% { transform: translateX(0%);width: auto;}
    100%{ transform: translateX(-40%);width: auto;}
}
@keyframes loop-3 {
    0% { transform: translateX(0%);width: auto;}
    100%{ transform: translateX(-50%);width: auto;}
}
@keyframes disappear {
    0% { opacity: 1;}
    100%{ opacity: 0;}
}
@keyframes disappear-0 {
    0% { opacity: 0;}
    100%{ opacity: 0;}
}
@keyframes disappear-back {
    0% { opacity: 0;}
    100%{ opacity: 1;}
}
@keyframes right-disappear {
    0% { transform: translateX(0%);opacity: 1;}
    99%{ transform: translateX(50%);opacity: 0;} 
    100%{ transform: translateX(0%);opacity: 0;}
}
@keyframes right-appear {
    0% { transform: translateX(0%);opacity: 0;}
    1%{ transform: translateX(50%);opacity: 0;}
    100%{ transform: translateX(0%);opacity: 1; }
}
@keyframes left-short {
    0% { width: 370px;}
    100%{ width: 100px;}
}
@keyframes left-long {
    0%{ width: 100px;}
    100% { width: 370px;}    
}
@keyframes bg-change {
    0%{ background: url(../img/主页背景.jpg) 0 0 no-repeat;background-size: cover;background-attachment: fixed;}
    100% { background: url(../img/背景2.png) 0 0 no-repeat;background-size: cover;background-attachment: fixed;}
}
@keyframes bg-change-back {
    0% { background: url(../img/背景2.png) 0 0 no-repeat;background-size: cover;background-attachment: fixed;}
    100%{ background: url(../img/主页背景.jpg) 0 0 no-repeat;background-size: cover;background-attachment: fixed;}
}
@keyframes main-change {
    0% { transform: translateX(151px);top: 25%;}
    50% { transform: translateX(0px);top: 25%;}
    100%{ transform: translateX(0px);top: 10%;}
}
@keyframes main-change-back {
    0% { transform: translateX(0px);top: 10%;}
    50% { transform: translateX(151px);top: 10%;}
    100%{ transform: translateX(151px);top: 25%;}
}
@keyframes content-appear {
    0% { width: 0px;height: 50px;}
    50%{ width: 1088px;height: 50px;}
    100%{ width: 1088px;height: 740px;}
}
@keyframes content-disappear {
    0% { width: 1088px;height: 740px;}
    50%{ width: 1088px;height: 50px;}
    100%{ width: 0px;height: 50px;}
}
@keyframes ex-appear {
    0% { width: 300px;height: 0px;opacity: 1;}    
    100%{ width: 300px;height: 740px;opacity: 1;}
}
@keyframes ex-disappear {
    0% { width: 300px;height: 740px;opacity: 1;}    
    100%{ width: 300px;height: 0px;opacity: 0;}
}
@keyframes home-appear {
    0% { top: 440px; opacity: 0;}    
    100%{ top: 684px; opacity: 1;}
}
@keyframes home-disappear {
    0% { top: 684px; opacity: 1;}    
    100%{ top: 440px; opacity: 0;}
}
@keyframes turn {
    0% { transform: rotateX(0deg);}    
    100%{ transform: rotateX(180deg);}
}
@keyframes turn-back {
    0% { transform: rotateX(180deg);}    
    100%{ transform: rotateX(0deg);}
}
@keyframes search-appear {
    0% { width: 1088px;height: 0px;}    
    100%{ width: 1088px;height: 300px;}
}
@keyframes search-disappear {
    0% { width: 1088px;height: 300px;}    
    100%{ width: 1088px;height: 0px;}
}
@keyframes maoxian-up {
    0% { height: 320px;}    
    100%{ height: 620px;}
}
@keyframes maoxian-down {
    0% { height: 620px;}    
    100%{ height: 320px;}
}


#dituji {
    height: 680px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.leaflet-container {
    width: 100% !important;
    height: 680px !important;
}