@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 */


.wrapper{
  position: relative;
  width:700px;
  margin: 0 auto;
  overflow: hidden;
}

#wrap {
	position: relative;
  width:700px;
  margin: 0 auto;
  overflow: hidden;
}

div.sec{
  position: relative;
  width:100%;
	height: 100%;
  max-width:100%;
  overflow: hidden;
}
div.sec img { width:100%; max-width:100%;}

div.sec.award{ padding-bottom: 60px; background: #333;}

.sec.join { position: relative; padding: 100px 0; background: #eee; text-align: center;}
.join-box{
  position: relative;
  width:660px;
  padding:80px 0;   
  background: #fff;
  margin:0 auto;
  box-shadow: 0px 0px 40px #b9b9b9;
  z-index: 5;
}
legend{
  padding-top:0px;
  font-weight: 700;
  font-size:2rem;
  letter-spacing: -1px;
  line-height: 45px;
}
.form-sub{
  font-size:1.250rem;
  margin-top:10px;
  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: #00a3ff;
  border: 0;
  color:#fff;
  font-weight: 500;
  font-size:1.725rem;
}
.formRight a { 
  display: block;
  text-decoration: none;
  color: inherit;
}


.quick_bottom_wrap{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:99;
	width: 700px;
	margin: 0 auto;
  box-sizing:border-box;
  background: #eee;
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.3);
}

.quick_bottom_wrap .quick_form button {
  display: inline-block;
  width: 100%;
	vertical-align: top;
}

.footer { background: #000; padding: 20px 0; color: #fff;}
.footer .company-info { display: flex; align-items: center; justify-content: center; padding: 0 20px;}
.footer .company-info .info .text span{ display: block; font-size: 13px; line-height: 18px;}
.footer .company-info .info .text span + span { margin-top: 4px;}
.footer .company-info .info .company { margin-top: 10px;}
.footer .company-info .info .company .info-text { display: block; margin-top: 3px; font-size: 11px; line-height: 18px; vertical-align: top;}


@media (max-width:768px) {
	.wrapper, #wrap, .top-count, .quick_bottom_wrap{ width: auto; margin: 0;}

	.sec.join { padding: 60px 0;}
  .join-box{
    width:90%;
    max-width:90%;
    padding:45px 0;
    box-shadow: 0px 0px 20px #b9b9b9;
  }
  .formBox{
    width:90%;
    max-width:90%;
    margin:0 auto;
  }
  legend{
    font-size:1.5rem;
    line-height: 35px;
  }
  .form-sub{
    font-size:1rem;
    margin-top:5px;
    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;
    color:#fff;
    font-size:1.125rem;
  }
}