﻿
.hidden_box .t5_0{
    font-weight: bold;
    position:absolute;
    top:82%;
    cursor :pointer;
    width:80%; text-align: center;
    height:2rem; background:#F960BD;
    line-height: 2rem;
    border-radius:20px;
    transition:0.2s;
}

.hidden_box label:hover {
    background: #efefef;
}

.hidden_box input {display: none;}

.hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    display: none;
    animation: show 0.3s linear 0s;
    position:fixed; z-index:24;
}

.hidden_show buttom input{
  display: none;   
}

.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
    display: block;
    animation: show 0.3s linear 0s;
}

@keyframes show{
    from{opacity: 0;}
    to{opacity: 1;}}


.back-buttom{
position: fixed;
top:5%; left:8%;
width:70%; height:70%;
padding:1%;
z-index:1; background: #FFFFFF;
}

.background label{
position:fixed;  
top:0; left:0; width:100%;
height:100%; background:rgba(0,0,0,0.7);
}

.background label:hover{
background:rgba(0,0,0,0.7);
}





.back_in{
width:150px;
height:110px;
background:url(../img/001.jpg);
color:#111111;
transition:0.25s;
cursor:pointer;
border:none;
}

.back_in:hover{
transform: scale(1.1);
}

.back-img{
width:140px; height:75px;
box-shadow: 0px 1px 1px rgba(0,0,0,0.8);
margin-left:-2.5px;

}

.back-buttom h3{
margin-top:0px;    
}

.back-1{background: url(../img/001.jpg); background-size:140px;75px;}
.back-2{background: url(../img/002.jpg); background-size:140px;75px;}
.back-3{background: url(../img/003.jpg); background-size:140px;75px;}
.back-4{background: url(../img/004.jpg); background-size:140px;75px;}
.back-5{background: url(../img/005.jpg); background-size:140px;75px;}


/*    sns   */

    .sns_bace{
    width:100%;  height:2rem;
    display: flex; justify-content: space-between;
    top:87%; position: absolute;
    left:-0.5rem;
    }
    
    .sns_bace a{
    text-decoration: none;    
    }
    
    .sns_circle{
    width:2rem;
    height:2rem;
    text-align: center;
    margin-left:1rem;
    line-height: 2rem;
    border-radius:50%;
    color:#FFFFFF;
    font-weight: 600;
    transition:.5s ease;
    }
    
    .sns_circle:hover > img{
     transition:.4s;
    transform: rotateY(360deg);    
    }
    
    .sns_circle:hover{
    transform: translateY(-5px);
    box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
    border-radius:5px;
    }
    
    .sns_circle img{
    height:0.66rem;
    }


.dl{
position: absolute;
top:101%; left:25px; 
transition:0.2s;
}

.dl:hover{
    transform: scale(1.1); 
     opacity: 0.9;
}

.fantia{
position: absolute;
top:102%; left:120px;
transition:0.2s;
}

.fantia:hover{
    transform: scale(1.2); 
  opacity: 0.9;
}

.deka{
position: absolute;
top:102%; left:170px;
transition:0.2s;
filter:grayscale(1) contrast(2);
}

.deka:hover{
    transform: scale(1.2); 
  opacity: 0.9;
}
    
 
    
    .facebook_bace{background: #3635BC;}
    .tweet_bace{background: #22A1EA;}
    .google_bace{background: #F15536;}
    .line_bace{background: #74DF00;}