/* layer */

#layer{}
#layer > div{position: fixed;}

#layer > .active{
    display: block;
    animation: layer-fade-up 1s;
    animation-fill-mode: forwards;
}
#layer > .hide{
    display: none;
}

@keyframes layer-fade-up {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
    }
}


#layer-bottom{
    bottom:0;
    width:100%;
    height:auto;
    overflow: hidden;
    border-radius: 40px 40px 0 0;
    background-color:#F7F7F7;
    z-index:10;
}

#layer-bottom > .line{
    position: absolute;
    top:15px;
    left:50%;
    transform: translate(-50%, 0);
    min-width:30px;
    width:5vw;
    height:2px;
    background-color:#B2B2B2;
}

#layer-bottom > .close{
    position: absolute;
    top:40px;
    right:40px;
    width:3vw;
    max-width:60px;
    min-width:20px;
}

#layer-bottom > .close img{width:100%;}

#layer-bottom > div{width:calc(100% - 80px)}
#layer-bottom > div:first-of-type{margin:100px 40px 20px 40px;}
#layer-bottom > div:last-of-type{margin:50px 40px 20px 40px;}

#layer-bottom > .div_select > div{
    height:13vmin;
    min-height:70px;
    line-height: max(70px,13vmin);
}