@charset "utf-8";
@font-face {
    font-family: 'SBAggroB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'LeferiPoint-BlackA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-BlackA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*=============== 공통요소 ===============*/
.tit-container .tit {font-size: 43px; font-weight: 600;}

@media all and (min-width:768px) and (max-width:1023px) {
	.tit-container .tit {font-size: 38px;}
}
/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
	.tit-container .tit {font-size: 24px;}
}

/*=============== 메인비주얼 ===============*/
/* 기본 레이아웃 */
#main-visual {width: 100%;height: 775px;position: relative;overflow: hidden;}
#main-visual .bg-container {width: 100%;height: 775px;position: absolute;top: 0;left: 0;background: url(../../img/mainVisu-bg7.png) no-repeat center;background-size: cover; z-index: 0;
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
	-webkit-transition: all 10s ease;
	-moz-transition: all 10s ease;
	-ms-transition: all 10s ease;
	-o-transition: all 10s ease;
	transition: all 10s ease;
}
#main-visual .txt-container {position: absolute;top: 50%;left: 0;text-align: center;z-index: 2;color: #ffffff;width: 100%;padding: 5%; overflow: hidden;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
#main-visual .txt-container .tit {font-size: 60px;font-weight: 800;letter-spacing: -1px;margin-bottom: 35px;word-break: keep-all;filter: blur(10px);opacity: 0;
	-webkit-transform: translateY(-20px);
	-moz-transform: translateY(-20px);
	-ms-transform: translateY(-20px);
	-o-transform: translateY(-20px);
	transform: translateY(-20px);
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
	-webkit-text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	-moz-text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	-ms-text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	-o-text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
#main-visual .txt-container .subtit {
	font-size: 22px;
	letter-spacing: -0.2px;
	font-weight: 600!important;
	word-break: keep-all;
	line-height: 1.8em;
	opacity: 0;
	-webkit-transform: translateY(-20px);
	-moz-transform: translateY(-20px);
	-ms-transform: translateY(-20px);
	-o-transform: translateY(-20px);
	transform: translateY(-20px);
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
	-ms-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	transition-delay: 0.6s;
	-webkit-text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
	-moz-text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
	-ms-text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
	-o-text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
	text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
}

/* 메인비주얼 애니메이션 */
#main-visual.active .bg-container {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
#main-visual.active .txt-container .tit {filter: blur(0); opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}
#main-visual.active .txt-container .subtit {filter: blur(0); opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

/* 메인비주얼 캔버스 파티클 */
#particle-canvas {
  width: 100%;
  height: 100vh;
  vertical-align: middle;
  /* position: relative;
  z-index: 1;
  top: 28%; */
}

/* 하단 화이트 바 */
#main-bottom-bar {width: 95%;max-width: 1540px;background: #ffffff;height: inherit;min-height: 245px;padding: 65px 130px;position: relative;z-index: 3;
	margin: 0 auto;
	-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.15);
	-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.15);
	-ms-box-shadow: 3px 3px 10px rgba(0,0,0,0.15);
	-o-box-shadow: 3px 3px 10px rgba(0,0,0,0.15);
	box-shadow: 3px 3px 10px rgba(0,0,0,0.15);
	
}
#main-bottom-bar:before {width: 327px;height: 134px;content: "";display: block;background: url(../../img/mainVisu-bottom-bar-bg.png) no-repeat center;position: absolute;bottom: 20px;left: 40px;opacity: 0.65;}
#main-bottom-bar .txt-container {position: relative;width: 100%;height: 100%;padding-right: 350px;}
#main-bottom-bar .txt-container .main-txt {font-size: 28px;margin-bottom: 35px;font-weight: 800;position: relative;word-break: keep-all;line-height: 1.5em;}
#main-bottom-bar .txt-container .main-txt:before {content: "";display: block;width: 50px;height: 3px;background: #dddddd;position: absolute;bottom: -19px;left: 0;}
#main-bottom-bar .txt-container .sub-txt {font-size: 17px;letter-spacing: -0.2px;word-break: keep-all;}
#main-bottom-bar .txt-container .btn-wr {position: absolute;top: 50%;right: 0;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
#main-bottom-bar .txt-container .main-txt span{font-family: 'SBAggroB';
	font-style: italic; font-size: 40px;}

/*=============== 메인비주얼 반응형 ===============*/
@media all and (min-width:1200px) and (max-width:1519px) {
	#main-bottom-bar {padding: 65px 5%}
}
@media all and (min-width:1024px) and (max-width:1199px) {
	#main-bottom-bar {padding: 65px 5%}
}
/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {
	#main-visual .txt-container .tit {font-size:42px; margin-bottom:20px;}
	#main-visual .txt-container .subtit {font-size:18px;}
	#main-bottom-bar {padding: 5% 5%;}
	#main-bottom-bar .txt-container {padding: 0;}
	#main-bottom-bar .txt-container .btn-wr {position: relative;margin-top: 30px;top: 0;
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	#main-bottom-bar .txt-container .main-txt {font-size: 24px;}
	
}
@media all and (max-width:1024px) {
	#main-bottom-bar .txt-container .main-txt span{font-size: 28px;}
}
@media all and (max-width:480px) {
	#main-bottom-bar .txt-container .main-txt span{font-size: 24px;     font-family: 'LeferiPoint-BlackA'; font-weight: 800;font-style: normal;}
}
/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
	#main-visual {height: 420px;}
	#main-visual .bg-container {height:420px;}
	#main-visual .txt-container {top:calc(50% + 25px)}
	#main-visual .txt-container .tit {font-size:28px; margin-bottom:15px; line-height:1.5em;}
	#main-visual .txt-container .subtit {font-size:15px;}
	#main-bottom-bar {padding: 8% 5%;position: relative;top: auto;left: auto;width: 100%;
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}
	#main-bottom-bar .txt-container {padding: 0;}
	#main-bottom-bar .txt-container .btn-wr {position: relative;margin-top: 30px;top: 0;
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	#main-bottom-bar .txt-container .main-txt {font-size:20px;}
	#main-bottom-bar .txt-container .sub-txt {font-size:14px;line-height:1.8em;word-break: keep-all;}

   #main-bottom-bar .txt-container .main_sample_img img{
      width: 100%;
   }
}

/*=============== 서비스 섹션 ===============*/
#main-service {padding: 0px 0 100px;background: url(../../img/main-service-bg.png) no-repeat center;background-size:cover;}
#main-service .video-container {width: 95%; max-width: 990px; text-align: center;margin: 0 auto 79px; transform: translateY(-100px); box-shadow: 3px 3px 10px rgb(0 0 0 / 15%);}
#main-service .video-container .imsi {font-size: 18px; font-weight: 600;width: 100%; height: 557px; }

#main-service .tit-container {text-align: center;width: 100%;height: auto;margin-bottom: 50px;}
#main-service .cont-container {width: 97%; display: flex; margin: 0 auto; justify-content: center;}
#main-service .cont-container article {display: block; width: 20%; max-width: 454px; background: #ffffff; margin-left: 20px;}
#main-service .cont-container article:first-of-type {margin-left: 0;}
#main-service .cont-container article a {display: block; width: 100%; height: 100%;}
#main-service .cont-container article .img-wr {width: 100%; height: auto; overflow: hidden;}
#main-service .cont-container article .img-wr img {width: 100%;}
#main-service .cont-container article .txt-wr {padding: 40px 10px;display: flex;justify-content: center;align-content: center; height: 215px;}
#main-service .cont-container article .txt-wr .txtbox {text-align: center;}
#main-service .cont-container article .txt-wr .txtbox .tit {font-size: 26px;font-weight: 800;margin-bottom: 30px;position: relative;}
#main-service .cont-container article .txt-wr .txtbox .tit:before {content: "";display: block;width: 50px;height: 2px;background: #e1e1e1;position: absolute;bottom: -14px;left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}
#main-service .cont-container article .txt-wr .txtbox .cont {font-size: 17px;font-weight: 400;letter-spacing: -0.2px;color: #666666;}
#main-service .cont-container article:hover .img-wr img {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}
#main-service .cont-container article:hover .txt-wr {background: #008ff7;}
#main-service .cont-container article:hover .txt-wr .txtbox .tit {color: #ffffff;}
#main-service .cont-container article:hover .txt-wr .txtbox .cont {color: rgba(255,255,255,0.7);}
#main-service .cont-container article:hover .txt-wr .tit:before {background: rgba(255,255,255,0.3);}
#main-service .cont-container article .img-wr img,
#main-service .cont-container article .txt-wr,
#main-service .cont-container article .txt-wr .txtbox .tit,
#main-service .cont-container article .txt-wr .txtbox .cont,
#main-service .cont-container article .txt-wr .tit:before {
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;}

/*=============== 서비스 섹션 반응형 ===============*/
@media all and (min-width:1200px) and (max-width:1519px) {
}
@media all and (min-width:1024px) and (max-width:1199px) {
	#main-service .cont-container article .img-wr {height:auto;}
	#main-service .cont-container article .txt-wr .txtbox .tit {font-size:24px;}
}
/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {
	#main-service {padding: 0px 2% 60px;}
	#main-service .cont-container article .txt-wr .txtbox .tit {font-size:20px;}
	#main-service .cont-container article .img-wr {height:auto;}

}
/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
	#main-service .video-container .imsi{height:300px ;}
	#main-service {padding: 40px 2%;}
	#main-service .tit-container {margin-bottom:20px;}
	#main-service .cont-container {flex-wrap:wrap; width: 100%;}
	#main-service .cont-container article .txt-wr {padding: 20px 10px;width: 100%;
      align-items:center}
	#main-service .cont-container article .txt-wr .txtbox .tit {font-size: 18px;word-break: keep-all; margin-bottom: 60px;}
	#main-service .cont-container article .txt-wr .txtbox .cont {font-size:14px;word-break: keep-all;}
	#main-service .cont-container article {margin-left: 10px;width: 100%;margin-bottom: 15px;margin-left: 0;}
	#main-service .cont-container article:first-of-type {margin-left: 0;}
	#main-service .cont-container article .img-wr {height:auto;display: none;}
   /* icon 추가 */
   #main-service .cont-container article .txt-wr .txtbox .tit:before {
      content: unset;
   }
   /* 12/24일수정 */
   #main-service .cont-container article .txt-wr .txtbox .tit.font-icon_1:before {
      content: "\f201";
      display: block;
      width: 80px;
      height: 0px;
      background: #e1e1e1;
      position: absolute;
      bottom: -15px;
      left: 50%;
      font-family: "Font Awesome 5 Free";
      font-size: 30px;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
   }
   #main-service .cont-container article .txt-wr .txtbox .tit.font-icon_2:before {
      content: "\f200";
      display: block;
      width: 80px;
      height: 0px;
      background: #e1e1e1;
      position: absolute;
      bottom: -15px;
      left: 50%;
      font-family: "Font Awesome 5 Free";
      font-size: 30px;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
   }
   #main-service .cont-container article .txt-wr .txtbox .tit.font-icon_3:before {
      content: "\f1ea";
      display: block;
      width: 80px;
      height: 0px;
      background: #e1e1e1;
      position: absolute;
      bottom: -15px;
      left: 50%;
      font-family: "Font Awesome 5 Free";
      font-size: 30px;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
   }
   #main-service .cont-container article .txt-wr .txtbox .tit.font-icon_4:before {
      content: "\f0ac";
      display: block;
      width: 80px;
      height: 0px;
      background: #e1e1e1;
      position: absolute;
      bottom: -15px;
      left: 50%;
      font-family: "Font Awesome 5 Free";
      font-size: 30px;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
   }
}

/*============== 핵심 가치 섹션 =============*/
#main-value {padding: 95px 0 70px;background: url(../../img/main-value-bg2.png) no-repeat center;background-size:cover;}
#main-value .tit-container {width: 100%; height: auto; text-align: center; margin-bottom: 50px;}
#main-value .tit-container .tit {color: #ffffff;}
#main-value .cont-container {display: flex; justify-content: center;}
#main-value .cont-container article {width: 33.33%;display: flex;justify-content: center;align-content: center;padding: 40px 10px;flex-direction: column;border: 1px solid rgba(255,255,255,0.5);border-right: 0;background: rgba(0,0,0,0.2);
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
#main-value .cont-container article:last-of-type {border-right: 1px solid rgba(255,255,255,0.5);}
#main-value .cont-container article:hover {background: rgba(0,0,0,0.5);}
#main-value .cont-container article .icon-wr {display: block;width: 118px;height: 86px;margin: 0 auto;}
#main-value .cont-container article.item1 .icon-wr {background: url(../../img/main-value-icon1.png) no-repeat center;}
#main-value .cont-container article.item2 .icon-wr {background: url(../../img/main-value-icon2.png) no-repeat center;}
#main-value .cont-container article.item3 .icon-wr {background: url(../../img/main-value-icon3.png) no-repeat center;}
#main-value .cont-container article .txt-wr {display: block;padding: 40px 0 0;text-align: center;}
#main-value .cont-container article .txt-wr .tit{font-size: 24px;font-weight: 800;margin-bottom: 15px;color: #ffffff;}
#main-value .cont-container article .txt-wr .cont {font-size: 16px;letter-spacing: -0.2px;line-height: 1.8em;color: #ffffff;}
#main-value .btn-container {text-align: center;width: 100%;height: auto;padding-top: 60px;}
#main-value .btn-container .btn-style2 a {
    /* background: rgba(0,0,0,0.3); */
}

/*=============== 핵심가치 섹션 반응형 ===============*/
@media all and (min-width:1200px) and (max-width:1519px) {
}
@media all and (min-width:1024px) and (max-width:1199px) {
}
/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {
}
/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
	#main-value {padding: 40px 0;}
	#main-value .tit-container {margin-bottom:30px;}
	#main-value .cont-container {flex-direction: column;}
	#main-value .cont-container article {width: 100%;border: 1px solid rgba(255,255,255,0.5);border-top: 0;flex-direction: row;padding: 25px 15px;}
	#main-value .cont-container article:first-of-type {border-top: 1px solid rgba(255,255,255,0.5);}
	
	#main-value .cont-container article .icon-wr {width: 110px;height: auto;min-height: 43px;margin: 0;display: block;}
	#main-value .cont-container article.item1 .icon-wr {background: url(../../img/main-value-icon1-m.png) no-repeat center;}
	#main-value .cont-container article.item2 .icon-wr {background: url(../../img/main-value-icon2-m.png) no-repeat center;}
	#main-value .cont-container article.item3 .icon-wr {background: url(../../img/main-value-icon3-m.png) no-repeat center;}
	#main-value .cont-container article .txt-wr {padding-top:0;text-align:left;padding: 0 10px 0 15px;width: calc(100% - 110px);}
	#main-value .cont-container article .txt-wr .tit {font-size:20px;margin-bottom: 10px;}
	#main-value .cont-container article .txt-wr .cont {font-size:14px;}

	#main-value .btn-container {padding-top:30px;}
}

/*=============== 절차 섹션 ===============*/
#main-process {padding: 90px 0 100px;}
#main-process .tit-container {text-align: center;margin-bottom: 55px;}
#main-process .tit-container .tit {margin-bottom: 10px;}
#main-process .tit-container .subtit {font-size: 16px; color: #646464; letter-spacing: -0.2px;}
#main-process .cont-container {width: 100%; height: auto;}
#main-process .cont-container .img-wr {width: 100%; height: auto;}
#main-process .cont-container .img-wr img {max-width: 100%; height: auto;}

/* 절차 밑 태그 */
#main-process .main_tag{ margin-top: 30px;}
#main-process .main_tag ul{display: flex; width: 80%; margin: 0 auto; text-align: right; justify-content: center; max-width: 1600px; flex-wrap: wrap;}
#main-process .main_tag ul li{font-family: 'Noto Sans KR', dotum, sans-serif; font-size: 14px; color: #888;line-height: 1.8em; letter-spacing: -0.2px; text-align: center; padding: 0 9px;}
#main-process .main_tag ul li a{ border: 2px solid #aaa; padding:5px 10px;}
#main-process .main_tag ul li a:hover{background-color: #aaa; color: #fff;}

/*=============== 절차 섹션 반응형 ===============*/
@media all and (min-width:1200px) and (max-width:1519px) {
}
@media all and (min-width:1024px) and (max-width:1199px) {
}
/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (max-width:1024px) {
	#main-process .main_tag ul{width: 95%;}
	#main-process .main_tag ul li{padding: 0 5px; line-height: 2.5;}
}
/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
	#main-process {padding: 40px 0 50px;}
	#main-process .tit-container {margin-bottom:20px;}
}

/*=============== cs 섹션 ===============*/
#main-cs {width: 100%;height: 307px;/* background: url(../../img/main-cs-bg.png) no-repeat center; */background:#008ff7; background: linear-gradient(to right, #3bc1ff, #008ff7, #0081de);background-size:cover;padding: 90px 0 0;}
#main-cs .txt-container {width: 100%;height: auto;text-align: center;margin-bottom: 45px;}
#main-cs .txt-container .txt {font-size: 25px;color: #ffffff;font-weight: 600;}
#main-cs .txt-container .txt span {font-size: 30px;font-weight: 900;position: relative;top: -6px;}
#main-cs .btn-container {display: flex; justify-content: center;}
#main-cs .btn-container .btn-style2 {display: block; margin-right: 15px; float: left;text-align: center; }
#main-cs .btn-container .btn-style2:last-of-type {margin-right: 0;}
#main-cs .btn-container .btn-style2 a {padding: 15px 35px; width: 270px;}

/*=============== cs 섹션 반응형 ===============*/
@media all and (min-width:1200px) and (max-width:1519px) {
}
@media all and (min-width:1024px) and (max-width:1199px) {
}
/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {
}
/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
	#main-cs {padding: 45px 2%;height: auto;}
	#main-cs .txt-container {margin-bottom: 15px;padding:0 5%;}
	#main-cs .txt-container .txt {font-size:18px; word-break:keep-all; line-height:1.8em;}
	#main-cs .txt-container .txt span {font-size:22px; top: -2px;}
	#main-cs .btn-container {flex-direction: column;}
	#main-cs .btn-container .btn-style2 {margin-right:0; margin-top:15px;}
}


/*=============== 메인비주얼 반응형 ===============*/
@media all and (min-width:1200px) and (max-width:1519px) {
}
@media all and (min-width:1024px) and (max-width:1199px) {
}
/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {
}
/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
}