@charset "utf-8";

#template-signature .signature-contents {
	padding-top:120px;
	margin-bottom:170px;
}

#template-signature .top-visual {
	width:100%;
	height:250px;
	background:url(/images/menu4_top.png) no-repeat 0% 0%;	
}

#template-signature .contents-wrap {
	max-width:1220px;
	width:100%;
	margin:0 auto;	
}

#template-signature .sub-title {
  font-family: 'NanumSquare', gulim;
  font-size:20px;
  font-weight:700;
  color:#2e2e2e;
  letter-spacing:-1px;
  margin-bottom:20px;
}

#template-signature .sub-title > label {
	color:#2f62c8;
}

#template-signature .sub-txt {
  font-family: 'Noto Sans KR', gulim;
  font-size:14px;
  font-weight:300;
  color:#4b4b4b;
  letter-spacing:-1px;	  
}

#template-signature .signature1 {
	width:100%;
	padding-bottom:33.2%;
	margin:30px 0px 50px 0px;
	background:url(/images/signature2022_1.png) no-repeat 0% 0%;		
	background-size:contain;
}

#template-signature .signature2 {
	width:100%;
	padding-bottom:45.5%;
	margin:30px 0px 50px 0px;
	background:url(/images/signature2022_2.png) no-repeat 0% 0%;		
	background-size:contain;
}

#template-signature .signature-div3 ul {
	width:100%;
	padding:0px;
}

#template-signature .signature-div3 li {
  width:12.5%;
  padding-bottom:12.5%;
  margin:60px 0px 60px 0px;
  float:left;
  list-style-type:none;
  text-align:center;
}

#template-signature .circle {
  width:78%;
  padding-bottom:78%;
  margin:0px 11% 10px 11%;
  border-radius:50%;
}

#template-signature .circle1 {
  background-color:#f26522;
}

#template-signature .circle2 {
  background-color:#fec465;
}

#template-signature .circle3 {
  background-color:#7b5aa6;
}

#template-signature .circle4 {
  background-color:#bcc4c9;
}

#template-signature .circle5 {
  background-color:#06a7e1;
}

#template-signature .circle6 {
  background-color:#4ab957;
}

#template-signature .circle7 {
  background-color:#bdd748;
}

#template-signature .circle8 {
  background-color:#231f20;
}

#template-signature .color-bottom {
	clear:both;
	height:40px;
	width:100%;	
	background:url(/images/signature_color.png) no-repeat 0% 0%;	
	background-size:contain;	
}

#template-signature .signature-btn-div {
	clear:both;
  text-align:center;
  margin:100px 0px;
  height:55px;
}
	
#template-signature .signature-btn {
  display:inline-block;
  width:260px;
  height:55px;
  line-height:55px;
  background-color:#707070;
  font-family: 'Noto Sans KR', gulim;
  font-size:22px;
  font-weight:500;
  color:#fff;
  letter-spacing:-1px;
  margin:0px 10px;
  border:solid 0px;
}

@media screen and (max-width:1280px) {

	#template-signature .contents-wrap {
		padding:0px 10px;	
	}
	
	#template-signature .sub-txt {
	  font-size:12px;
	}	
		
}

@media screen and (max-width:767px) {

	#template-signature .signature-contents {
		padding-top: 15vw !important;
		margin-bottom:0px;
	}	
	
	#template-signature .sub-txt {
	  font-size:15px;
	}	
	
	#template-signature .signature-div3 li {
	  margin:20px 0px 20px 0px;
	}
	
	#template-signature .signature-btn-div {
	  margin:30px 0px 70px 0px;
	  height:45px;
	}
	
	#template-signature .signature-btn {
	  width:130px;
	  height:45px;
	  line-height:45px;
	  font-size:12px;
	  margin:0px 5px;	
	}
}