.items{
  position: absolute;
  top: 0;
  left: 50%;
  width: 1600px;
  transform: translate(-50%,0);
  height:100vh;
  transition-property:top, opacity;
  transition-duration: 1s;
} 
.items>div{
  position:absolute;
  top:0;
  left:0;
  width: 100%;
}

.items img{width:100%;}

.items.hide{
  top:700px;
  opacity: 0;
}

.items.out{
  top:-700px;
  opacity: 0;
}



@media screen and (max-width: 1600px) {
  .items{ width: 1600px;left :0;transform: translate(0,0); }
  .items>div{ width: 1600px; }
  .items.hide{
    top:200px;
  }
  .items.out{
    top:200px;
  }
}










/* 1 */
.item_1 > div:nth-child(2){
  top:560px;
  max-width:1600px;
  width:0;
  height:4px;
  background-image:url('/resources/image/recruit/line.png');
  /* background-color:red; */
  transition-property:  background-position-x, width;
  clip-path: inset(0px 0px 0px 0px);
  background-position-x:-800px;
  left:50%;
}
.item_1 > div:nth-child(2).show{
  width:1600px;
  left:0;
  background-position-x: 0 ;
  transition: all 18s;
}
.item_1 > div:nth-child(4){
  width:0;
  height:1px;
  top:685px;
  background-image:url('/resources/image/recruit/line2.png');
  clip-path: inset(0px 0px 0px 0px);
  transition-property:  width;
}
.item_1 > div:nth-child(4).show{
  width:1600px;
  transition: all 3s ;
}


.item_1 > div:nth-child(5),
.item_1 > div:nth-child(6),
.item_1 > div:nth-child(7),
.item_1 > div:nth-child(8),
.item_1 > div:nth-child(9){
  transform: translateY(50px);
  opacity: 0;
}

.item_1 > div:nth-child(5).show{
  transition: all 1s 1s;
}
.item_1 > div:nth-child(6).show{
  transition: all 1s 1.2s;
}
.item_1 > div:nth-child(7).show{
  transition: all 1s 1.4s;
}
.item_1 > div:nth-child(8).show{
  transition: all 1s 1.6s;
}
.item_1 > div:nth-child(9).show{
  transition: all 1s 1.8s;
}

.item_1 > div:nth-child(5).show,
.item_1 > div:nth-child(6).show,
.item_1 > div:nth-child(7).show,
.item_1 > div:nth-child(8).show,
.item_1 > div:nth-child(9).show{
  transform: translateY(0);
  opacity: 1;
}











/* 2 */
.item_2{
  margin-top:50px;
}
.item_2 > div:nth-child(2),
.item_2 > div:nth-child(14){
  width:0;
  height:1px;
  top:685px;
  background-image:url('/resources/image/recruit/line2.png');
  clip-path: inset(0px 0px 0px 0px);
  transition-property:  width;
}
.item_2 > div:nth-child(2).show,
.item_2 > div:nth-child(14).show{
  width:1600px;
  transition-duration: 3s ;
}
.item_2 > div:nth-child(14).show{
  transition-delay: 2s;

}


.item_2 > div:nth-child(2){
  top:115px;
}
.item_2 > div:nth-child(14){
  top:654px;
}



.item_2 > div:nth-child(3),
.item_2 > div:nth-child(4),
.item_2 > div:nth-child(5),
.item_2 > div:nth-child(6),
.item_2 > div:nth-child(7),
.item_2 > div:nth-child(8),
.item_2 > div:nth-child(9),
.item_2 > div:nth-child(10),
.item_2 > div:nth-child(11),
.item_2 > div:nth-child(12){
  transform: translateY(50px);
  opacity: 0;
}

.item_2 > div:nth-child(3).show{
  transition: all 1s 1s;
}
.item_2 > div:nth-child(4).show{
  transition: all 1s 1.2s;
}
.item_2 > div:nth-child(5).show{
  transition: all 1s 1.4s;
}
.item_2 > div:nth-child(6).show{
  transition: all 1s 1.6s;
}
.item_2 > div:nth-child(7).show{
  transition: all 1s 1.8s;
}


.item_2 > div:nth-child(8).show{
  transition: all 1s 1.6s;
}
.item_2 > div:nth-child(9).show{
  transition: all 1s 1.8s;
}
.item_2 > div:nth-child(10).show{
  transition: all 1s 2s;
}
.item_2 > div:nth-child(11).show{
  transition: all 1s 2.2s;
}
.item_2 > div:nth-child(12).show{
  transition: all 1s 2.4s;
}

.item_2 > div:nth-child(3).show,
.item_2 > div:nth-child(4).show,
.item_2 > div:nth-child(5).show,
.item_2 > div:nth-child(6).show,
.item_2 > div:nth-child(7).show,
.item_2 > div:nth-child(8).show,
.item_2 > div:nth-child(9).show,
.item_2 > div:nth-child(10).show,
.item_2 > div:nth-child(11).show,
.item_2 > div:nth-child(12).show{
  transform: translateY(0);
  opacity: 1;
}
.item_2 > div:nth-child(16){
  width:0;
  height:3px;
  top:875px;
  background-image:url('/resources/image/recruit/line3.png');
  background-position: -4px 0;
  clip-path: inset(0px 0px 0px 0px);
  transition-property:  width;
}
.item_2 > div:nth-child(16).show{
  width:1600px;
  transition: all 3s 3s;
}



/* 2 */
.item_3{
  margin-top:50px;
}





/* 3 */
#onlineSupport{
  margin-top:165px;
  width:1100px;
  position: absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
}

#onlineSupport>div{
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width:100%;
  margin:16px 0;
  position: relative;
}
#onlineSupport>div input[type="file"]{
  osition: absolute;
  width: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}


#onlineSupport>div input{
  border:1px solid #7f7f7f;
  padding:8px;
  outline:none;
  width:calc(100% - 16px);
}
#onlineSupport>div input::placeholder{
  color:#95999a;
}
#onlineSupport>div textarea{
  border:1px solid #7f7f7f;
  padding:8px;
  outline:none;
  resize:none;
  width:calc(100% - 16px);
  height:100px;
}
#onlineSupport>div textarea::placeholder{
  color:#95999a;
}

#onlineSupport>div:nth-child(1)>div{
  height:35px;
}
#onlineSupport>div select{
  width:calc(100% - 12px);
  height:35px;
  padding:0 8px;
  outline: none;;
}
#onlineSupport>div:nth-child(1)>div:nth-child(1) select{
  margin-right:12px;
}
#onlineSupport>div:nth-child(1)>div:nth-child(2) select{
  margin-left:12px;
}
#onlineSupport>div:nth-child(1)>div:nth-child(1){
  border-right: 1px solid #7f7f7f;
  box-sizing: border-box;
}



#onlineSupport>div.fileUploadArea{
  border:1px solid #7f7f7f;
  padding:8px;
  box-sizing: border-box;
  color:#404241;
  letter-spacing: -2px;
  justify-content: flex-start;
  font-size:14px;
}
#onlineSupport>div.fileUploadArea span{
  display: inline-block;
  width:75px;
  /* border-right:2px solid #404241; */
}
#onlineSupport>div.fileUploadArea  span:nth-child(2){
  width:2px;
  display:inline-block;
  background-color: #404241;
  height:10px;
  margin-right:20px;
}
#onlineSupport>div.fileUploadArea label{
cursor:pointer;
}
#onlineSupport>div.fileUploadArea label span{
  letter-spacing: 0;
  display:inline-block;
  width:780px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color:#747777;
}
#onlineSupport>div.fileUploadArea   div{
  display: block;
  position: absolute;
  right:0;
  top:0;
  font-size:20px;
  font-weight:bold;
  color:#404241;
  padding:2px 10px 6px;
  cursor:pointer;
}

#onlineSupport .policyBox{
  color:#606363
}


#onlineSupport .policyBox input[type="checkbox"]{display: none;}
#onlineSupport .policyBox input[type="checkbox"]+label{display: inline-block;position: relative;cursor: pointer;margin: 3px 8px 0 0;}
#onlineSupport .policyBox input[type="checkbox"]+label::before{margin-top: -5px;content: '';display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align:center;vertical-align:middle;border: 1px solid #cccccc;}
#onlineSupport .policyBox input[type="checkbox"]:checked + label:before{ content:'✔';width:14px;height: 16px;line-height: 16px;text-shadow:1px 1px white;border:2px solid #191919;}
#onlineSupport .policyBox > a{
  color:#2a2c2b;
  font-weight: bold;
  border-bottom:1px solid #404241;
  display: inline-block;
  letter-spacing: -1.5px;
}


#onlineSupport .submitBtn{
  width:350px;
  margin:50px auto 0;
}
#onlineSupport .submitBtn > input{
  display: block;
  text-align: center;
  font-weight:bold;
  padding:10px 0 12px;
  color:#404241;
  border: 1px solid #404241;
  width:100%;
  letter-spacing: -1.5px;
}

#dump_backround{
	position: fixed;width: 100%;height: 100%;background: #000000a1;z-index: 999;
}
#dump_backround > div{
	position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 1000;background:url('/resources/image/recruit/RECRUIT_law_src_01_trim.png');width: 600px;height: 608px;
}

#dump_backround > div .popup_close{
	position: absolute;top: -31px;right: 0;width: 20px;height: 20px;background: url('/resources/image/popup_close_trim.png');background-size: cover;display: block;cursor: pointer;
}