@charset "utf-8";

*{
  box-sizing: border-box;
}

/* 공간소개 */

.intro-tit{
  color: #000;
  margin-bottom: 50px;
}
.intro-tit > h3{
  font-size: 45px;
  font-weight: 800;
  line-height: 1.3;
}

.intro-wrap{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
}
.intro-box{
  width: 24%;
}
.intro-wrap.w-100 .intro-box{
  width: 100%;
}
.intro-wrap.last{
  margin-bottom: 0;
}
.intro-box > a{
  display: block;
  border: 2px solid #e9e9e9;
  border-radius: 10px;
  background-color: #fff;
  transition: .4s;
}
.intro-caption{
  padding: 25px 20px;
}
.ic-tit{
  width: 100%;
  display: flex;
  justify-content: center;
}
.ic-tit > li{
  font-size: 24px;
}
.ic-tit > li:first-child{
  color: #CF666B;
  font-weight: 800;
}
.ic-tit > li:last-child{
  color: #000;
  font-weight: 500;
  margin-left: 1rem;
  padding-left: 1rem;
  position: relative;
}
.ic-tit > li:last-child::before{
  content: "";
  width: 1px;
  height: 16px;
  background-color: #ddd;
  position: absolute;
  left: 0;
  top: 7px;
}
.intro-wrap.w-100 .ic-tit > li{
  margin-left: 0;
  padding-left: 0;
  color: #CF666B;
  font-weight: 800;
}
.intro-wrap.w-100 .ic-tit > li:last-child::before{
  display: none;
}
.intro-img{
  width: 100%;
  display: flex;
  position: relative;
}
.intro-img img{
  width: 100%;
}
.intro-img::before{
  content: "";
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  z-index: 1;
  transition: .4s;
  position: absolute;
  top: 0;
  left: 0;
}
.intro-img > span{
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
  color: #CF666B;
  font-size: 30px;
  line-height: 47px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  transition: .45s;
  opacity: 0;
}
.ic-cont{
  width: 100%;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed #ddd;
}
.ic-cont > li{
  font-size: 18px;
  color: #000;
  font-weight: 500;
  margin-bottom: 1rem;
  padding-left: 25px;
  position: relative;
}
.ic-cont > li:last-child{
  margin-bottom: 0;
}
.ic-cont > li > span{
  display: inline-block;
  color: #CF666B;
  position: absolute;
  top: 0;
  left: 0;
}
.intro-wrap.w-100 .ic-cont{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.ic-caption{
  width: 100%;
}
.ic-caption > li{
  font-size: 16px;
  font-weight: 400;
  color: #676767;
  margin-bottom: 10px;
  padding-left: 15px;
  position: relative;
}
.ic-caption > li::before{
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #CF666B;
  position: absolute;
  top: 7px;
  left: 3px;
}
.ic-caption > li:last-child{
  margin-bottom: 0;
}
.intro-box > a:hover{
  border-color: #CF666B;
}
.intro-box > a:hover .intro-img::before{
  opacity: 0.4;
}
.intro-box > a:hover .intro-img > span{
  opacity: 1;
}

/* 찾아오시는 길 */

.root_daum_roughmap{width: 100% !important;}
.root_daum_roughmap .wrap_controllers{display: none;}

.map-box{
  width: 100%;
}
.map-caption{margin-top: 2rem; color: #000;}
.map-caption > h3{font-size: 30px; padding-bottom: 1.5rem; margin-bottom: 1.5rem; position: relative;}
.map-caption > h3::after{content: ""; width: 50px; height: 1px; background-color: #ddd; position: absolute; bottom: 0; left: 0;}
.map-caption > ul > li{font-size: 18px; font-weight: 400; margin-bottom: 1rem;}
.map-caption > ul > li:last-child{
  margin-bottom: 0;
}
.map-caption > ul > li > span{display: inline-block; margin-right: 5px; color: #CF666B;}
.map-caption > ul > li > span.copybtn{padding: 5px 15px; border-radius: 5px; background-color: #CF666B; font-size: 14px; margin-left: 5px; transition: .5s; cursor: pointer; color: #fff;}
.map-caption > ul > li > span.copybtn:hover{border-radius: 0;}

/* 제휴 협력사 소개 */
.pt-caption{color: #000;}
.pt-caption > h3{font-size: 30px; padding-bottom: 2rem; margin-bottom: 2rem; position: relative;}
.pt-caption > h3::after{content: ""; width: 50px; height: 1px; background-color: #ddd; position: absolute; bottom: 0; left: 0;}

.pt-wrap{
  width: 100%;
  display: flex;
}
.pt-box{
  margin-right: 1.5rem;
}
.pt-box > a{
  display: flex;
  border: 1px solid #ddd;
  padding: 1rem;
  transition: .3s;
}
.pt-box > a:hover{
  border-color: #CF666B;
}
.pt-box > a > img{
  width: 100%;
}

/* 공유오피스 소개 */

.ver-line{
  width: 1px; 
  height: 100px; 
  background-color: #ddd; 
  margin: 0 auto;
}
.about-tit{
  margin-bottom: 4rem;
}
.greet-wrap{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.greet-box{
  width: 48%;
}
.greet-img{
  width: 100%;
  display: flex;
  justify-content: center;
}
.greet-img img{
  width: 100%;
  border-radius: 50%;
}
.greet-caption > h5{
  color: #000;
  font-size: 30px;
  line-height: 1.4;
  margin-bottom: 3rem;
}
.greet-caption > p{
  font-size: 16px;
  color: #676767;
  line-height: 1.8;
  font-weight: 400;
}

/* media-query */

@media(min-width:1200px){
  .d-lg-block{
    display: block;
  }
  .d-lg-none{
    display: none;
  }

  .ani.up.delay{
		transition: 1.2s opacity 0.2s, 1.2s transform 0.2s;
	}
	.ani.up.delay2{
		transition: 1.2s opacity 0.5s, 1.2s transform 0.5s;
	}
	.ani.up.delay3{
		transition: 1.2s opacity 0.8s, 1.2s transform 0.8s;
	}
	.ani.up.delay4{
		transition: 1.2s opacity 1.0s, 1.2s transform 1.0s;
	}
	.ani.up.delay5{
		transition: 1.2s opacity 1.3s, 1.2s transform 1.3s;
	}

}

@media (max-width: 1430px) {

}

@media(max-width:1199px){
  .d-block{
    display: block;
  }
  .d-none{
    display: none;
  }
  
  .about-tit{
    margin-bottom: 3rem;
  }
  .ver-line{
    height: 70px;
  }

  .greet-wrap{
    flex-direction: column;
  }
  .greet-box{
    width: 100%;
  }
  .greet-box:first-child{
    margin-bottom: 2rem;
  }
  .greet-caption > h5{
    font-size: 22px;
    margin-bottom: 1.5rem;
  }
  .greet-caption > p{
    font-size: 14px;
    line-height: 1.6;
  }

  .intro-tit{
    margin-bottom: 30px;
  }
  .intro-tit > h3{
    font-size: 28px;
  }
  .intro-wrap{
    flex-direction: column;
    margin-bottom: 1.5rem;
  }
  .intro-box{
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .intro-box:last-child{
    margin-bottom: 0;
  }
  .ic-tit > li{
    font-size: 20px;
  }
  .ic-tit > li:last-child{
    padding-left: 10px;
    margin-left: 10px;
  }
  .ic-tit > li:last-child::before{
    height: 13px;
    top: 6px;
  }
  .intro-caption{
    padding: 15px;
  }

  .root_daum_roughmap .wrap_map{
    height: 300px !important;
  }
  .map-caption > h3{
    font-size: 22px;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }
  .map-caption > ul > li{
    font-size: 16px;
  }
  .map-caption{
    margin-top: 1.5rem;
  }

  .pt-caption > h3{
    font-size: 22px;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .pt-wrap{
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .pt-box{
    width: 49%;
    margin-right: 0;
    margin-bottom: 10px;
  }
  .pt-box > a{
    padding: 10px;
  }
  
}
@media(max-width:600px){
  .ic-cont > li{
    font-size: 16px;
    line-height: 1.6;
  }
  .ic-caption > li{
    font-size: 14px;
  }
  .ic-caption > li::before{
    top: 6px;
  }
}

/* animation */

.ani.up{
	transform: translateY(100px);
	opacity: 0;
	transition: 1.2s;
}
.ani.up.act{
	transform: translateY(0);
	opacity: 1;
}
.ani.left{
	transform: translateX(100px);
	opacity: 0;
	transition: 1s;
}
.ani.left.act{
	transform: translateX(0);
	opacity: 1;
}
.ani.right{
	transform: translateX(-100px);
	opacity: 0;
	transition: 1s;
}
.ani.right.act{
	transform: translateX(0);
	opacity: 1;
}