/* section 01 */
.sec01 { width: 100%; height: 100vh; }
.join_left { 
  position: relative;
  float: left;
  width: 50%;
  height: 100%;
  background: #fff;
}
.joinWrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 425px;
  max-width: 100%;
  padding: 0 15px;
}
.joinWrap .join_title {
  font-size: 56px;
  margin: 45px 0;
}
.join_listWrap li a {
  display: block;
  padding: 15px 0;
  margin-bottom: 10px;
  font-size: 16px;
  color: #242424;
  border-radius: 3px;
}
.join_listWrap li img { 
  position: relative;
  top: -2px;
  margin-right: 8px; 
}
.join_listWrap .kakao a {
  background: #fee500;
}
.join_listWrap .kakao a:hover {
  background: #f1d900;
}
.join_listWrap .naver a {
  background: #1ec800;
  color: #fff;
}
.join_listWrap .naver a:hover {
  background: #1fbf02;
}
.join_listWrap .google a {
  background: #f8f8f8;
}
.join_listWrap .google a:hover {
  background: #f1f0f0;
}
.join_right { 
  position: relative;
  overflow: hidden;
  float: left;
  width: 50%;
  height: 100%;
}
.join_right .img_bg{
  position: absolute;
  height: 100%;
  width: 100%;
  background: url(../img/main_bg.jpg) no-repeat center;
  background-size: cover;
  top: 50%;
  display: none;
  z-index: 1;
}
.join_right .img_bg.active {
  top: 0;
}
.bottom_bg{
  position: absolute;
  top: 100%;
  background-color: #f6f6f6;
  width: 100%;
  height: 100%;
}
.bottom_bg.active{
  top: 0;
}
.top_bg{
  position: absolute;
  top: 0;
  background-color: #f6f6f6;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 2;
}
.top_bg.active{
 top: -100%
}


@media screen and (max-width: 991px) {
  .joinWrap .join_title { font-size: 40px; }
}
@media screen and (max-width: 767px) {
  .joinWrap .join_title { font-size: 20px; margin: 0 0 45px 0; }
  .join_left { width: 100%; text-align: center; }
  .join_right { display: none; }
  .join_listWrap li a { font-size: 14px; }
}