@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* s : reset */
*{  /* 전체선택자->모든 태그에 여백을 뺌 */
	margin:0;
	padding:0;
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,abbr,address,cite,code,del,dfn,em,img,
ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,
menu,nav,section,summary,time,mark,audio,video{margin:0; padding:0;}
/*블록요소들을 이렇게 여백 0으로 초기화 시켜 모든 브라우저에서 앞으로 주는 여백이 
동일한 결과로 적용되도록 함. 전체 선택자 *를 사용하는 것보다 이렇게 블록을 나열하면 성능이 올라감
*/

html,body{
	width:100%; 
	height:100%;
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
html{
	/* ************************************************************
		종류:overflow(가로,세로)/overflow-x(가로)/overflow-y(세로)
		표현방식:auto/scroll/hidden 
	    ************************************************************ */
	overflow-y:scroll; /* 문서전체에 세로 스크롤바자국 항상 표시 */
	overflow-x:hidden; /* 문서전체에 가로 스크롤바자국 항상 숨김 */
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{ 
	display:block; 
	/*시맨틱태그를 지원하지 않은 브라우저 
	-> 인식하지 못하는 태그를 인라인으로 인식하기때문에 강제로 블럭으로 설정함*/
}
li{list-style-type:none;}   /*목록에 점 없애기 */
a{
	text-decoration:none; /*하이퍼링크 밑줄 없애기*/
	color:inherit;  /*하이퍼링크의 글자색 부모한테 상속받기*/
}  
button {
	padding: 0;
	margin: 0;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

h1,h2,h3,h4,h5,h6{font-size:100%;}
/*제목 태그들에 글자크기를 초기화하여 앞으로 부여하는 크기의 기준을 똑같이 설정함*/

body,input,textarea{
	font-size:18px;  /*모든글자 기본글자크기*/
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-weight: 700;
}

img{
	vertical-align:top; /*이미지에 원치 않는 여백이 생성되는 브라우저 오류가 발생하는 경우가 있음*/
	font-size:0;  /*폰트 크기 초기화*/
	border:0; /* 이미지 링크시 기본적으로 나타나는 테두리 제거 */
	max-width:100%; /*ipad사이즈에서 userlogin 의 title등 %로 된  것을 위해*/
}
table{border-collapse:collapse;} /* 칸사이의 기본 여백 제거 및 중첩 테두리 상쇄 효과 */
input,select{vertical-align:middle;} /*문자와 나란히 입력박스를 배치하면 높낮이가 맞지않아 맞추기 위함 */

.clear:after{    /* 자식이 모두 float 을 사용할때 부모가 높이를 갖게하기 위함 */
	content:"";
	display:block;
	clear:both;
}
.indent{     /* 글자 안보이게 밀어놓기 */
	display:block;
	text-indent:-9999px;
}
.hidden{display:none;}
/* e : reset */


/* s : contents */
#wrap { 
	position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

div.sec, .main {
	position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
div.sec [class^=img_] , .main [class^=img_] { width: 100%; max-width: 100%;}
.img_mo { display: none;}
div.sec [class^=img_] img , .main [class^=img_] img { width:100%; max-width:100%;}

.navi { position: relative; width: 100%; height: 81px;  background: #fff; border-bottom: 1px solid #eee; box-sizing: border-box;}
.navi.fixed .navi-list {position:fixed; top: 0; left: 0; right: 0; bottom: 0;  width: 100%; height: 81px; z-index: 10 ;background: #fff; border-bottom: 1px solid #eee; box-sizing: border-box;}
.navi .navi-list .navi-inner { display: flex; max-width: 1200px; margin: 0 auto;}
.navi .navi-list .navi-item{ position: relative; flex: 1; padding: 32px 0 29px; cursor: pointer; text-align: center; color: #888; font-size: 20px; line-height: 1; z-index: 11;}
.navi .navi-list .navi-item.active { color: #000;}
.navi .navi-list .navi-item.active::after { content: ''; position: absolute; display: block; width: 100%; height: 4px; background: #000; bottom: 0; left: 0;}


.sec.join { position: relative; padding: 100px 0; background: #eee; text-align: center;}
.join-box{
  position: relative;
  width:680px;
  padding:120px 0;   
  background: #fff;
  margin:0 auto;
  box-shadow: 0px 0px 40px #b9b9b9;
  z-index: 5;
}
legend{
  padding-top:0px;
  font-weight: 800;
  font-size:2.5rem;
  letter-spacing: -1px;
  line-height: 60px;
}
.form-sub{
  font-size:1.250rem;
  margin-top:20px;
  line-height: 30px;
}
.red{
  color:#a20016;
  font-weight: 800;
}
#NAME{
  border:1px solid #bebebe;
  box-sizing: border-box;
  width:480px;
  height:60px;
  margin:0px auto;
  margin-top:20px;
  margin-bottom:20px;
  font-size: 1rem;
}
#NAME2{
  border:1px solid #bebebe;
  box-sizing: border-box;
  width:230px;
  height:60px;
  margin:0px auto;
  margin-top:20px;
  margin-bottom:20px;
  font-size: 1rem;
}
#NAME4{
  border:1px solid #bebebe;
  box-sizing: border-box;
  width:480px;
  height:60px;
  margin:0px auto;
  margin-top:20px;
  margin-bottom:20px;
  font-size: 1rem;
}
select{
  border:1px solid #bebebe;
  box-sizing: border-box;
  width:100px;
  text-align: center;
  height: 60px;
  font-size: 1rem;
}

.option-box{
  width:73%;
  max-width:73%;
  margin:0 auto;
}
.option-box:after{ display:block; content:''; clear:both;}
.select2{
  width:50%;
  float:left;
  /* background: #222; */
}
.select2:after{display:block; content:''; clear:both;}
#HP2{
  border:1px solid #bebebe;
  box-sizing: border-box;
  width:185px;
  height: 60px;
  font-size: 1rem;
}
#HP3{
  border:1px solid #bebebe;
  box-sizing: border-box;
  width:185px;
  height: 60px;
  font-size: 1rem;
}
input::placeholder{
  padding-left: 15px;
}
.agree-box{
  width:480px;
  margin:0 auto;
  text-align: left;
  margin-top:25px;
}
.agree-box label { margin-top: 20px; font-size: 14px; color: #666; font-weight: normal;}

.formRight{
  width:480px;
  margin:0 auto;
  margin-top:25px;
  background: #12bcda;
  border: 0;
  color:#fff;
  font-weight: 800;
  font-size:1.725rem;
}
.formRight a { 
  display: block;
  padding:30px 0;
  text-decoration: none;
  color: inherit;
	font-weight: 800;
}

/* 퀵상담 */
.form-box2{
  width:1200px;
  height:130px;
  margin:0 auto;
}
.quick_bottom_wrap{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:99;
  box-sizing:border-box;
  background: #eee;
  border-top: 1px solid #dedede;
}

.quick_bottom_wrap .title-box { display: none;}

.quick_bottom_wrap .form-box2 {
  display: flex;
  max-width: 1200px;
  width: auto;
  height: auto;
  padding: 20px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.q-left { width: 25%;}
.quick_form{
  width:100%;
  margin:0 auto;
  position:relative;
  box-sizing:border-box;
}
.quick_form:after{display:block; content:''; clear:both;}
.quick_form input[type="text"],
.quick_form input[type="password"],
.quick_form select {
  border:none; height:40px;
  box-sizing:border-box;
  padding:3px;
  vertical-align:middle;
}
.quick_form .form-agree{
  color:#fff;
  font-size: 14px;
}
.quick_form .form-agree a{color:#000; font-weight:bold; text-decoration:underline;}

.quick_form .form-agree1{color:#fff; /*padding:0 10px;*/position: relative;top: 12px;}
.quick_form .form-agree1 a{color:#fff; font-weight:bold; text-decoration:underline;}

.form-title{float:left; padding:39px 26px 20px 19px; line-height:40px; color:#fff; font-size:20px; font-weight:bold;}
.form-input{ width: 50%;}
.form-input::after { content: ''; display: block; clear: both;}
.form-input .form-name,
.form-input .form-pass { float: left; width: calc((100% - 5px) / 2);}
.form-input .form-pass { margin-left: 5px;}
.form-command{
  width:15%;
}
.form-command button{width:100%; height:80px; background: #12bcda; color:#fff; font-size:20px; border:none; font-weight: 800;}

input:focus {outline:none;}
#q-NAME{
  width:100%;
  height:53px;
}
#hp{
  width:100%;
  height:53px;
}
.row{
  display: block;
  padding-top: 15px;
  clear: both;
}
.row label { display: inline-block;}

.footer { background: #333; padding: 60px 0; color: #fff;}
.footer .company-info { display: flex; align-items: center; justify-content: center;}
.footer .company-info .info { width: 800px; margin-left: 30px;}
.footer .company-info .info .text span{ display: block; font-size: 16px;}
.footer .company-info .info .text span + span { margin-top: 3px;}
.footer .company-info .info .company { margin-top: 20px;}
.footer .company-info .info .company .info-text { display: inline-block; margin-top: 4px; font-size: 14px; line-height: 20px; vertical-align: top;}
.footer .company-info .info .company .gap { content: ""; display: inline-block; width: 1px; height: 10px; margin: 9px 4px 0; background-color: #d5d5d5; vertical-align: top;}

/*result*/
.result{width:100%;max-width:100%;height:100vh;}
.result img{width:100%;max-width:100%;}


@media (max-width:940px) {
  .footer { padding: 20px 0;}
  .footer .logo { display: none;}

  .footer .company-info { display: flex; align-items: center; justify-content: center;}
  .footer .company-info .info { width: auto; margin-left: 0;}
  .footer .company-info .info .text span{ font-size: 12px; line-height: 16px;}
}


@media (max-width : 768px) {
	.img_pc { display: none;}
  .img_mo { display: block;}

	.navi { height: 55px;}
  .navi.fixed .navi-list { height: 55px;}
  .navi .navi-list .navi-item { padding: 22px 0 19px; font-size: 14px;}
	
	.footer .company-info { padding: 0 20px;}
  .footer .company-info .info .company { margin-top: 10px;}
  .footer .company-info .info .company .info-text { font-size: 10px; line-height: 14px; margin-top: 0;}
  .footer .company-info .info .company .gap { display: none;}

	.sec.join { padding: 60px 0;}
  .join-box{
    width:90%;
    max-width:90%;
    padding:60px 0;
    box-shadow: 0px 0px 20px #b9b9b9;
  }
  .formBox{
    width:90%;
    max-width:90%;
    margin:0 auto;
  }
  legend{
    font-size:1.5rem;
    line-height: 40px;
  }
  .form-sub{
    font-size:0.9rem;
    margin-top:10px;
    line-height: 26px;
  }
  #NAME{
    width:100%;
    max-width:100%;
    height:65px;
    margin-bottom: 10px;
  }
  select{
    width:30%;
    max-width:30%;
    text-align: center;
    height: 65px;
    font-size: 1rem;
  }
  .option-box{
    width:100%;
    max-width:100%;
  }
  .select2{
    width:100%;
    float:left;
    /* background: #222; */
    /* background: #222; */
  }
  .select3{
    width:100%;
    float:left;
    /* background: #222; */
    /* background: #222; */
  }
  #NAME2{
    border:1px solid #bebebe;
    box-sizing: border-box;
    width:100%;
    max-width:100%;
    height:60px;
    margin:0px auto;
    margin-top:20px;
    margin-bottom:20px;
    font-size: 1rem;
  }
  #NAME4{
    border:1px solid #bebebe;
    box-sizing: border-box;
    width:100%;
    max-width:100%;
    height:60px;
    margin:0px auto;
    margin-top:20px;
    margin-bottom:20px;
    font-size: 1rem;
  }
  #HP2{
    border:1px solid #bebebe;
    width:33.33%;
    max-width:33.33%;
    height: 65px;
    font-size: 1rem;
  }
  #HP3{
    width:33.33%;
    max-width:33.33%;
    height: 65px;
    font-size: 1rem;
  }
  input::placeholder{
    padding-left: 15px;
  }
  .agree-box{
    width:100%;
    max-width:100%;
    font-size: 0.7rem;
    margin:0 auto;
    text-align: left;
    margin-top:15px;
  }
  .agree-box label { font-size: 12px;}
  .agree-box a { display: inline-block; margin-top: 3px;}
  .formRight{
    width:100%;
    max-width:100%;
    margin:0 auto;
    margin-top:20px;
    background: #12bcda;
    color:#fff;
    font-size:1rem;
  }
  

  .quick_bottom_wrap { padding: 10px 20px;}
  .quick_bottom_wrap .title-box { display: block; font-size: 16px; color: #000; margin-bottom: 7px; text-align: center;}
  .quick_bottom_wrap .title-box .skyblue { color: #12bcda;}
  .quick_bottom_wrap .title-box .pink { color: #f18e8a;}
  .quick_bottom_wrap .form-box2 { padding: 0; align-items: flex-start;}

  .q-left { display: none;}
  .form-input { width: 70%;}
  .form-input .form-name,
  .form-input .form-pass { width: 100%;}
  .form-input .form-pass { margin-left: 0; margin-top: 5px;}
  .form-command { width: 25%;}
  .form-command button{ font-size:12px; height: 77px;}

  #q-NAME{
    width:100%;
    height:36px;
    font-size: 12px;
  }
  #hp{
    width:100%;
    height:36px;
    font-size: 12px;
  }
  .quick_form .form-agree{
    font-size: 10px;
  }
  .row { padding-top: 5px;}
  .quick_form .form-agree a {
    display: inline-block;
    margin-left: 5px;
  }
}
/* e : contents */