html,body,div,ul,li,h1,h2,h3,button {
padding:0;
margin:0;
}

div {
box-sizing: border-box;
}

button {
background: none;
border: none;
cursor:pointer;
}

body {
background-color:#fff;
}

body::-webkit-scrollbar {
width: 8px;
background-color: #f9f9fd;
}
      
body::-webkit-scrollbar-thumb {
border-radius: 0 0 5px 5px;
background-color: #587c76;
}
      
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
border-radius: 0 0 5px 5px;
background-color: #a3c5bf;
}

h1 {
font-size: 20px;
position: relative;
border-bottom: 1px #81a59f dashed;
padding-bottom: 5px;
line-height:30px;
color: #1a2322;
}

.h_1 {
font-size: 28px;
}

h2 {
font-size: 20px;
margin-top: 20px;
border-bottom: 1px #eaeaea solid;
margin-bottom: 8px;
}

#h_21 {
color: #748585;
z-index: 1020;
position: relative;
text-align: center;
font-style: italic;
}

h3 {
color: #1a2322;
font-size: 28px;
margin-top: 30px;
margin-bottom: 8px;
}

.h_31 {
z-index: 1020;
position: relative;
text-align: center;
color: #306264;
margin-top: 25px;
}

.sc::-webkit-scrollbar {
width: 8px;
background-color: #f9f9fd;
}
  
.sc::-webkit-scrollbar-thumb {
border-radius: 0 0 5px 5px;
background-color: #587c76;
}
  
.sc::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
border-radius: 0 0 5px 5px;
background-color: #a3c5bf;
}

@font-face {
font-family: "font_logo";
src: url("../fonts/logo.otf") format("opentype");
}

.ani1 {
-webkit-transition: all 0.8s linear;
-moz-transition: all 0.8s linear;
-ms-transition: all 0.8s linear;
transition: all 0.8s linear;
}

.ani2 {
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}

@-webkit-keyframes spin_pr1 {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@-moz-keyframes spin_pr1 {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@-o-keyframes spin_pr1 {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@keyframes spin_pr1 {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

.preload_time{
position: absolute;
height: 60px;
width: 60px;
border: 3px solid transparent;
border-top-color: #2d3f3c;
top: 50%;
left: 50%;
margin: -30px;
border-radius: 50%;
-webkit-animation: spin_pr1 1.5s linear infinite;
-moz-animation: spin_pr1 1.5s linear infinite;
-o-animation: spin_pr1 1.5s linear infinite;
animation: spin_pr1 1.5s linear infinite;
z-index: 1009;
}   

.preload_time:before, #preload_time:after{
content:'';
position: absolute;
border: 3px solid transparent;
border-radius: 50%;
}
            
.preload_time:before{
border-top-color: #2d3f3c;
top: -12px;
left: -12px;
right: -12px;
bottom: -12px;
-webkit-animation: spin_pr1 1.5s linear infinite;
-moz-animation: spin_pr1 1.5s linear infinite;
-o-animation: spin_pr1 1.5s linear infinite;
animation: spin_pr1 1.5s linear infinite;
}
            
.preload_time:after{
border-top-color: #2d3f3c;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;  
-webkit-animation: spin_pr1 1.5s linear infinite;
-moz-animation: spin_pr1 1.5s linear infinite;
-o-animation: spin_pr1 1.5s linear infinite;
animation: spin_pr1 1.5s linear infinite;
}

.disOff {
display: none;
}

.disOn {
display: block !important;
}

#firstW {
position:absolute;
width:100%;
height:100%;
z-index: 9999;
min-width: 970px;
}

#win {
position:absolute;
width:100%;
height:100%;
z-index: -999;
opacity:0;
min-width: 970px;
}

.winOn {
opacity:1 !important;
}
.winOnZ {
z-index: 1300 !important;
}

.dark {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1005;
align-items: center;
justify-content: center;  
background-color: #fff;
opacity: 0.7;
}

#compCh {
position: relative;
width:500px;
background-color:none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1020;
opacity:1;
}

#compChOp {
position: absolute;
width: calc(100% + 80px);
height: calc(100% + 80px);
top:-40px;
left:-40px;
background-color: #fff;
z-index: 1015;
border-radius: 10px;
left: -40px;
top: -40px;
border: 1px #c0cdc8 solid;
opacity:0.9;
}

.compChOp {
opacity:0 !important;
}

#compCh button {
width: 100%;
position: relative;
color: #293735;
font-size: 25px;
margin: 20px 0;
padding: 15px;
border-bottom: 1px #b5b5b5 solid;
border-top: 1px #b5b5b5 solid;
z-index: 1020;
}

#compCh button:hover {
background-color:#47625e;
color:#fff;
}

.wrap {
min-width:950px;
max-width:1250px;
width: 100%;
height: 100%;
margin:0 auto;
}


.header {
width: 100%;
position: relative;
height: 70px;
padding: 10px 20px;box-sizing: border-box;
background-color: #2d3f3c;
border-bottom: 1px #929c9a solid;
min-width: 970px;
}

.logo {
font-family: "font_logo";
font-size: 30px;
top: 50%;
transform: translate( 0, -50%);
position: relative;
float: left;
color:#fff;
}

.nav {
top: 50%;
transform: translate( 0, -50%);
position: relative;
float: right;
}

.btnLine {
height: 3px;
width: 0;
background-color: #cfde55;
position: absolute;
left: 50%;
transform: translate( -50%, 0);
border-radius:5px;
}

.nav button:first-child {
border-left: none;
}

.nav button {
color:#cdcbd1;
border-left: 1px #8f8f8f dashed;
font-style: italic;
font-size: 15px;
padding: 5px 15px;box-sizing: border-box;
position: relative;
}

.nav button:hover {
color:#cfde55;
}

.nav button:hover .btnLine {
width: 90%;
}

.btnAct {
color:#ebc55b !important;
}

#base {
width: 100%;
position: absolute;
height: calc(100% - 130px);
padding: 20px;box-sizing: border-box;
}

.bl_div {
height: calc(100% - 16px);
overflow: auto;
}

.bl1 {
width: calc(25% - 14px);
display:inline-block;
padding: 10px;box-sizing: border-box;
border: 1px #9fb7b3 solid;
margin: 10px 5px;
background-color: #dceee5;
border-radius: 5px;
}

.bl1 .name {
width: 100%;
height: 120px;
display: table-cell;
vertical-align: middle;
overflow: hidden;
border-bottom: 1px #9fb7b3 solid;
text-align: center;
}

.bl1 .act{
margin-top: 15px;
position: relative;
display: block;
}

.bl1 .act a{
text-decoration: none;
color: #fff;
background-color: #2d3f3c;
padding: 8px 0px;
display: block;
text-align: center;
border-radius: 5px;
}

.bl1 .act a:hover{
color: #adffd1;
background-color: #5e7f79;
}

.footer {
width: 100%;
height: 60px;
background: #202d2b;
position: absolute;
bottom: 0;
padding: 10px 20px;box-sizing: border-box;
color:#fff;
text-align: center;
min-width: 970px;
}

.footer i{
margin-left:10px;
}