@charset "UTF-8";
/* CSS Document */

.tab{
max-width: 1000px;
margin: 0 auto 60px;
padding: 0 10px;
}
.tab ul{
display: flex;
}
.tab ul li{
width: 20%;
}
.tab ul li a{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #024467;
text-decoration: none;
background-color: #e7e7e7;
border-top: 1px solid #e7e7e7;
border-right: 1px solid #e7e7e7;
border-bottom: 1px solid #024467;
border-left: 1px solid #e7e7e7;
padding: 7px;
transition: background 100ms ease;
}
.tab ul li.active a{
background-color: #ffffff;
border-top: 1px solid #024467;
border-right: 1px solid #024467;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #024467;
}
.tab ul li a:hover{
background-color: #f1f1f1;
}
.tab ul li.active a:hover{
background-color: #ffffff;
}
.tabContents>div{
animation: contentFade 700ms linear forwards;
}
.tabContents>div.hide{
display: none;
opacity: 0;
visibility: hidden;
transition: none;
}

@keyframes contentFade{
0%{
opacity: 0;
visibility: hidden;
}
100%{
opacity: 1;
visibility: visible;
}
}

@media screen and (max-width: 999px){
.tab{
margin: 0 auto 60px;
}
}/*media*/