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

.mb160{margin-bottom:160px;}

.full-sample {display: none;max-width: 600px;min-width: 500px;}
.full-sample img {float: left; padding:0 15px 15px 0;}

.full-sample .detail {margin:0 0 20px 0;}
.full-sample .detail  dl dt{ margin:0 0 25px 0; font-size:20px; color:#d7102d;}

.music-samples .back {width:224px; height:224px; padding: 0%;}
.sampleslist {position: relative;width: 100%;  margin: 0px 0 0 0; padding: 0; }
 .sampleslist li {
    position: relative;
    float: left;
    overflow: hidden;
    width:224px;
    height:224px;
	opacity: 0.8
}

.sampleslist_btn{text-align:center; padding:15px 0 0 0; -webkit-padding-before: 35px;}

.sampleslist li:hover{opacity:1}
.sampleslist li a div {
    position: absolute;
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
    background: rgba(255,0,0,0.2);
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    text-align: center;
    opacity: 0;
}
 .sampleslist li a:hover div { opacity: 1;}
 .panel {
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 100%;
    /*margin: auto;*/
    z-index: 1;
}

.card {
    width: 100%;
    height: auto;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
} 
.front {z-index: -1;}
.back { z-index: -2;width:100%;}
.panel:hover .front { z-index: -2;}
.panel:hover .back {z-index: -1;}