.const_wrap{
  display: flex;
  justify-content: flex-start;  
  padding: 2rem 0;
  margin: 0;
  font-family: 'GmarketSansMedium','SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
  font-weight: 500;
}
.const_wrap .title{
  width: 30%;
  padding: 0 0 .5rem 0;
  margin: 0;
}
.const_wrap .contents{
  width: 70%;
  padding: 0;
  margin: 0;
}
.const_wrap .contents p{
  padding: 0;
  margin: 0;
}
.const_wrap .contents img{
  max-width: 100%;
}
.const_wrap .area_wrap{  
  position: relative;
  /* display: flex; */
  display:none;
  flex-wrap: wrap;
  gap: 5rem 0;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}
.const_wrap .area_wrap::before{
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 450px;
  height: 450px;
  border: 1px solid #cdeeec;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  z-index: -1;
}
.const_wrap .area_wrap::after{
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  border: 1px solid #e9e6c9;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  z-index: -1;
}
.const_wrap .area_wrap .area1{
  width: 100%;
  text-align: center;
  padding: 0 2rem 2rem 2rem;
  margin: 0 auto;
}
.const_wrap .area_wrap .area2,
.const_wrap .area_wrap .area3{
  width: 50%;
  text-align: center;
  padding: 2rem 2rem 2rem 2rem;
  margin: 0 auto;
}
.const_wrap .area_wrap .point{
  padding: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  font-size: 1.2rem;
  color: #fff;
  line-height: 100px;
  text-align: center;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.const_wrap .area_wrap .p1{
  background: #08b892;
}
.const_wrap .area_wrap .p2{
  background: #0663b9;
}
.const_wrap .area_wrap .p3{
  background: #5a08b8;
}
.const_wrap .area_wrap .txt{
  padding-top: 1rem;
  font-size: 0.9rem;
}
.const_wrap h2{
  display: inline;
  position: relative;
  padding: .5rem 0;
  margin: 0;
  font-size: 1.4rem;
}
.const_wrap h2::after{
  position: absolute;
  content: '';
  left: 7px;
  top: -7px;
  width: 7px;
  height: 7px;
  background: #f11a1a;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  /*transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  */
}
.const_wrap ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0;
	border-bottom: 1px solid #eaeef3;
}
.const_wrap ul:not(.type):hover{
  background: #faf6f6;
}
.const_wrap ul.type{
	font-family: 'GmarketSansBold';
	font-size: 0.95rem;
	color: #111;
  padding: .2rem 0;
  border-top: 2px solid #f11a1a;
	border-bottom: 1px solid #c3c3c4;
}
.const_wrap li{
  list-style: none;
  padding: 1rem .5rem;
  margin: 0; 
  font-family: 'Roboto', 'GmarketSansMedium', 'SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
  font-size: .8rem;
  text-align: center;
  word-break:keep-all; 
  word-wrap:break-word;
}
.const_wrap ul.type li{
  font-family: 'GmarketSansMedium','SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
}
#const1 .box li:nth-child(1){
  text-align: left;
}
#const1 li:nth-child(1){
  width: 40%;
}
#const1 li:nth-child(2){
  width: 20%;
}
#const1 li:nth-child(3){
  width: 15%;
}
#const1 li:nth-child(4){
  width: 25%;
}


#const2 li:nth-child(1){
  width: 15%;
}
#const2 li:nth-child(2){
  width: 15%;
}
#const2 li:nth-child(3){
  width: 15%;
}
#const2 li:nth-child(4){
  width: 20%;
}
#const2 li:nth-child(5){
  width: 35%;
}


.const_wrap table{
  width: 100%;
}
.const_wrap table th{
	font-family: 'GmarketSansBold';
	font-size: 0.8rem;
	color: #111;
  text-align: center;
  padding: 1rem 0;
  border-top: 2px solid #f11a1a;
	border-bottom: 1px solid #c3c3c4;
}
.const_wrap table td{
  font-size: .8rem;
  text-align: center;
  word-break:keep-all; 
  word-wrap:break-word;
  padding: 1rem .5rem;
	border-bottom: 1px solid #eaeef3;
}
.const_wrap table tr:not(:first-child):hover{
  background: #faf6f6;
}


@media (max-width: 900px) {  
  .const_wrap{
    flex-direction: column;
  }
  .const_wrap .title{
    width: 100%;
  }
  .const_wrap .contents{
    width: 100%;
  }
  .const_wrap .area_wrap{
    gap: 2rem 0;
  }
  .const_wrap .area_wrap::after{
    width: 400px;
    height: 400px;
    border: 1px solid #cccccc;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}
  .const_wrap .area_wrap .area1{
    padding: 0 2rem 2rem 2rem;
  }
  .const_wrap .area_wrap .area2,
  .const_wrap .area_wrap .area3{
    width: 49%;
    padding: 2rem 2rem 2rem 2rem;
  }
}
@media (max-width: 767.98px) {
  .const_wrap .area_wrap{
    gap: 2rem 0;
    padding: 0 3rem;
  }
  .const_wrap .area_wrap::after{
    width: 280px;
    height: 280px;
    border: 1px solid #cccccc;
    transform: translate(-50%,-55%);
    -webkit-transform: translate(-50%,-55%);
    -moz-transform: translate(-50%,-55%);
    -ms-transform: translate(-50%,-55%);
    -o-transform: translate(-50%,-55%);
  }
  .const_wrap .area_wrap .area1{
    padding: 0 .5rem 1rem .5rem;
  }
  .const_wrap .area_wrap .area2,
  .const_wrap .area_wrap .area3{
    width: 49%;
    padding: 2rem 0 0 0;
  }
  .const_wrap .area_wrap .txt{
    font-size: 0.8rem;
  }
  .const_wrap table th{
    font-size: 0.7rem;
    padding: .5rem 0;
    border-top: 1px solid #f11a1a;
  }
  .const_wrap table td{
    font-size: .75rem;
    padding: .8rem .5rem .5rem .5rem;
  }  
  .const_wrap ul:first-child{
    border-top: 1px solid #d61212;
  }
  .const_wrap ul{
    flex-direction: column;
    padding: 1rem 0;
  }
  .const_wrap ul.type{
    display: none;
  }
  .const_wrap li{
    width: 100% !important;
    position: relative;
    text-align: left;
    padding: .2rem .5rem .2rem 5rem;
  }
  .const_wrap li::after{
    position: absolute;
    left: .5rem;
    top: 50%;
    font-family: 'GmarketSansBold';
    font-size: .75rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
  }

  #const1 li:nth-child(1)::after{
    content: '공사명';
  }
  #const1 li:nth-child(2)::after{
    content: '발주처';
  }
  #const1 li:nth-child(3)::after{
    content: '공사금액';
  }
  #const1 li:nth-child(4)::after{
    content: '공사기간';
  }
  


  #const2 li:nth-child(1)::after{
    content: '성명';
  }
  #const2 li:nth-child(2)::after{
    content: '직위';
  }
  #const2 li:nth-child(3)::after{
    content: '담당업무';
  }
  #const2 li:nth-child(4)::after{
    content: '연락처';
  }
  #const2 li:nth-child(5)::after{
    content: '이메일';
  }
}
@media (max-width: 600px) {
  .const_wrap .area_wrap{
    gap: 0;
    padding: 0;
  }
  .const_wrap .area_wrap::after{
    width: 230px;
    height: 230px;
    border: 1px solid #cccccc;
    transform: translate(-50%,-55%);
    -webkit-transform: translate(-50%,-55%);
    -moz-transform: translate(-50%,-55%);
    -ms-transform: translate(-50%,-55%);
    -o-transform: translate(-50%,-55%);
  }
  .const_wrap .area_wrap .area1{
    padding: 0 .5rem 1rem .5rem;
  }
  .const_wrap .area_wrap .area2,
  .const_wrap .area_wrap .area3{
    width: 49%;
    padding: 2rem 0 0 0;
  }
}