@charset "UTF-8";

.table00{
    display:inline-block;
    width:100%;
   
}

.table000{
    display:inline-block;
    width:100%;
    margin-top: 63px;
    z-index: 5;
}


.table01{
        position: relative;
        float:left;
        width:400px;
        height:auto;
        margin:60px;
        border: 1px solid gainsboro;
        text-align: center;
        z-index: 1;
}




.table01:hover img{
    filter: brightness(0.5);    
}

.table01 span:nth-of-type(1){
    font-family: 'SCoreDream';
    position: absolute;
    top: 50%;
    left: 60%;
    transform:translate(-50%,-50%);
    color: rgb(255, 255, 255);
    font-size: 5rem;
    opacity: 1;
    visibility :hidden;
    font-weight: bold;    
    
}

.table01 span:nth-of-type(2){
    font-family: 'SCoreDream';
    width:500px;
    position: absolute;
     top: 70%;
    left: 59%;
    transform:translate(-50%,-50%);
    color: rgb(255, 255, 255);
    font-size: 1.875rem;
    opacity: 1;
    visibility :hidden;
    font-weight: light;    
   
}

.table01:hover span:nth-of-type(2){
    opacity: 1;
    visibility:visible;
    filter: brightness(1);
}

.table01:hover span:nth-of-type(1){
    opacity: 1;
    visibility:visible;
    filter: brightness(1);
}


.table02{
    position: relative;
    float:left;
    width:278px;
    height:309px;
    margin:10px;
    border: 1px solid gainsboro;
    text-align: center;
    z-index: 13;
   
}

.table02 p{
    border-top: 1px solid gainsboro;
    background-color: rgb(252, 252, 252);
}

/* NOVATOR */


.table02 span:nth-of-type(1){
    font-family: 'roboto';
    position: absolute;
    top: 20%;
    left: 50%;
    transform:translate(-50%,-50%);
    color: rgb(255, 255, 255);
    font-size: 22px;
    opacity: 1;
    visibility :hidden;
    font-weight: bold;    
    
}

.table02:hover span:nth-of-type(1){
    opacity: 1;
    visibility:visible;
    filter: brightness(1);
}


.table02:hover p{
    opacity: 0.1;
}

.table02:hover {
    background-color: #0080C7;
}

.table02:hover img{
    opacity: 0.1;
}
  
.table02:hover u{
    display:none;
}

.textdeco{
    text-decoration: underline;
    text-underline-position: under;
}

.table02 span:nth-of-type(2){
    font-family: 'roboto';
    width: 400px;
    position: absolute;
    top: 55%;
    left: 50%;
    transform:translate(-50%,-50%);
    color: rgb(255, 255, 255);
    font-size: 16px;
    opacity: 1;
    visibility :hidden;
    font-weight: medium;    
    
}

.table02:hover span:nth-of-type(2){
    opacity: 1;
    visibility:visible;
    filter: brightness(1);
}



@media screen and (max-width: 1199px){}



@media screen and (max-width: 768px){


    .table01{
        position: relative;
        float:left;
        width:250px;
        border: 0px solid gainsboro;
        height:auto;
        margin:10px auto;
        text-align: center;
        z-index: 1;
        
}

    .table01>img{
       width: 300px;
       height:auto; 
       text-align: center;
       margin-left: 38px;
}

.table01 span:nth-of-type(1){
    font-family: 'SCoreDream';  
    position: absolute;
    top: 50%;
    left: 75%;
    transform:translate(-50%,-50%);
    color: rgb(255, 255, 255);
    font-size: 3.5rem;
    opacity: 1;
    visibility :hidden;
    font-weight: bold;    
    
}

.table01 span:nth-of-type(2){
    font-family: 'SCoreDream';
    width:500px;
    position: absolute;
    top: 75%;
    left: 75%;
    transform:translate(-50%,-50%);
    color: rgb(255, 255, 255);
    font-size: 1.5rem;
    opacity: 1;
    visibility :hidden;
    font-weight: light;    
   
}

.table000{
    display:inline-block;
    width:100%;
    margin-top: 20px;
}


.table02{
    position: relative;
    float:left;
    width:278px;
    height:309px;
    margin-left:55px;
    margin-bottom: 30px;
    border: 1px solid gainsboro;
    text-align: center;
   
}


}