@charset "UTF-8";

/* Web Fonts CDN - S */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");/* font-family: 'Pretendard'; */
/* Web Fonts CDN - E */

*{
  margin: 0; padding: 0;
  box-sizing: border-box;
  font-family: 'Pretendard';
}
.container{
  display: flex; justify-content: center; align-items: center; 
  width: 100%; height: 100vh;  
  background-color: #f7f8fb;
}
.shortcut{display: flex; align-items: center; justify-content: center;}
.img-box{
  width: 150px; height: 420px; margin: 15px;
  border-radius: 60px;
  background-image: url(img/img-01.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: width 0.5s;
  position: relative;
  overflow: hidden;
}
.img-box:nth-child(2){
  background: url(img/img-02.png);
  background-size: cover;
  background-position: center;
}
.img-box:nth-child(3){
  background: url(img/img-03.png);
  background-size: cover;
  background-position: center;
}
.img-box:nth-child(4){
  background: url(img/img-04.png);
  background-size: cover;
  background-position: center;
}
.img-box h3{
  width: 100%; height: 100px; padding: 15px 30px;
  font-size: 24px; line-height: 32px; color: #fff;
  position: absolute; bottom: -25px; left: 0px;
  opacity: 0;
  transition: bottom 0.5s, opacity 0.5s;
  background-image: url(img/text-bg.png);
  background-position: center bottom;
  background-repeat: no-repeat;
}
.img-box h3 span{
  display: block;
  font-weight: 300; font-style: 18px; line-height: 24px;
}
.img-box:hover{width: 300px;}
.img-box:hover h3{
  opacity: 1;
  bottom: 0px;
}