@import '/path/to/reset-css/reset.css';

html,body{width: 100%;height: 100%;}
body{background-color: #3a3a3a;}

#wrap{width: 100%;min-width: 1200px;height: 100%;display: flex;align-items: center;justify-content: space-between;}

.content{width: 100%;display: flex;align-items: center;justify-content: space-around;}
.content .wavy_box{position: relative;width: 340px;height: 340px;cursor: pointer;transition: .3s;transition-timing-function: ease-in-out;}
.content .wavy_box:hover{margin-bottom: -200px;}
.content .wavy_box:nth-child(1){background-color: #25a0f3;}
.content .wavy_box:nth-child(2){background-color: #fd6172;}
.content .wavy_box:nth-child(3){background-color: #98c854;}
.content .wavy_box .item{width:280px;height:280px;max-height: 280px;position: absolute;bottom: 30px;left: 30px;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 60px 40px;border: 3px solid #fff;border-radius: 15px;box-shadow: 10px 14px 15px rgba(0,0,0,.3), inset 9px 10px 15px 0px rgba(0,0,0,.3);box-sizing: border-box;text-align: center;color: #fff;transition: .4s;}
.content .wavy_box:hover .item{height: 530px;max-height: 530px;}

.content .wavy_box .item .icon{position: absolute;top: 60px;transition: .5s;}
.content .wavy_box:hover .item .icon{position: initial}
.content .wavy_box .item dl{opacity: 0;transition: .4s;}
.content .wavy_box:hover .item dl{opacity: 1;}
.content .wavy_box .item dl dt{font-size: 2em;font-weight: bold;margin-bottom: 20px;margin-top: 70px;}
.content .wavy_box .item dl dd{}
.content .wavy_box .item dl dd p{line-height: 1.2em;margin-bottom: 20px;}
.content .wavy_box .item dl dd button{display: block;background: #fff;color: #333;border: none;padding:10px 30px;margin: 0 auto;cursor: pointer;}

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