/**--------------------------- 서브 비주얼 **/
.sub_visual {position: relative; overflow: hidden; height:30rem;}
.sub_visual::before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-position: top center; background-repeat: no-repeat; animation:bgZoom-sub  1s ease-in-out forwards; background-size: cover;} 
.sub_visual .inner {display: flex; flex-direction: column; justify-content: center; height:inherit;}
.sub_visual .inner h2 {padding-top:3.75rem; color: #FFF; font-size: 2.5rem; font-weight: 600; line-height: 176%; letter-spacing: -0.8px;}
.sub_visual .inner p {margin-top:0.875rem; color: #FFF; font-size: 1.25rem; font-weight: 500; line-height: 1.4; word-break: keep-all;}
.sub_visual.about_us::before {background-image: url('../img/bg_about_us.png');}
.sub_visual.our_company::before {background-image: url('../img/bg_our_company.png');}
.sub_visual.our_story::before {background-image: url('../img/bg_ourstory.png');}
.sub_visual.contact_us::before {background-image: url('../img/bg_contact_us.png');}


@media screen and (max-width:640px){
  .sub_visual {position: relative; overflow: hidden; height:25rem;}
  .sub_visual .inner h2 {padding-top:40px;}
}


@keyframes bgZoom-sub { 
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

/**--------------------------- 서브 **/
/** 공통 */
.content {padding-top:3.75rem; padding-bottom:7.5rem;}
.content h3 {margin-bottom:2.5rem; display: flex; flex-direction: column; align-items: center; gap:1.5rem; padding-top:5rem; text-align: center; color:var(--primary); font-size: 1.375rem; font-weight: 600; letter-spacing: -1.1px;}
.content h3::after {content: ''; display: block; height:3.75rem; width:1px; background-color: #d9d9d9;}

@media screen and (max-width:640px){
  .content {padding-top:3rem;}
  .content h3 {padding-top:3rem;}
}

/**--------------------------- About Us **/
#about_us .introduce {background: url('../img/bg_introduce.png') no-repeat  ; background-size: cover   ; margin:0 3.75rem 3.75rem 3.75rem; border-radius: 1.875rem; overflow: hidden; text-align: center;   padding:0 3rem 5rem ; }
#about_us .introduce .txt_wrap {}
#about_us .introduce .txt_wrap h4{color: #000; text-align: center; font-family: Poppins; font-size: 2.5rem; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 0.5rem; ;}
#about_us .introduce .txt_wrap h5{color: #000;  text-align: center;  font-size: 1.375rem; font-style: normal; font-weight: 700; line-height: 1.875rem; /* 136.364% */ letter-spacing: -0.0275rem; margin-bottom: 3rem; }
#about_us .introduce .txt_wrap .desk_box {}
#about_us .introduce .txt_wrap .desk_box p { color: #5C5C5C; text-align: center;  font-size: 1.125rem; font-style: normal; font-weight: 500; line-height: 1.6875rem; /* 150% */ margin-bottom: 1rem;; }
#about_us .contact { width:100%;}
#about_us .contact .map { width:100%; margin-bottom: 1rem; }
#about_us .contact ul.info {display: flex;
  align-items: center;
  gap: 5.125rem;
  justify-content: center}
#about_us .contact ul.info li {color: #5C5C5C;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.6875rem; /* 150% */}
#about_us .contact ul.info li strong {color: #1F1F1F;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.6875rem; /* 150% */
  margin-right: 2rem; ;}


@media screen and (max-width:1024px){
  #about_us .introduce {margin: 0 16px ; }
}

 

@media screen and (max-width:640px){ 
  #about_us .contact ul.info {flex-direction: column; gap:0.5rem;align-items: flex-start }
}


/**--------------------------- Our Company **/
#our_company .business_list {
  display: grid;
  grid-template-columns:  repeat(4,1fr);
  align-items: flex-start;
  gap: 0.625rem;
  align-self: stretch;
  margin-bottom: 3.75rem; ;
}

#our_company .business_list li {
  display: flex;
  padding: 1.875rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  flex: 1 0 0;
  align-self: stretch; 
  border: 1px solid var(--border, #EDEDED);
  background: #FFF;
  }

#our_company .business_list li div.txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  }

#our_company .business_list li div.txt strong {
  color: #F6863F; 
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.875rem; /* 187.5% */
  }

#our_company .business_list li div.txt p {
  color: #2D2D2D;
  font-family: Poppins;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 1.575rem */
  }

  #our_company .bg_business {
    display: flex;
    width: 100%; 
    flex-direction: column;
    align-items: center;
    background-image: url('../img/bg_company_info.png');
    background-repeat: no-repeat;
    background-size: cover; 
    background-attachment: fixed;
    margin-bottom: 3.75rem;
  }

  #our_company .bg_business .desk {
    display: flex;
    /* width: 75rem; */
    padding: 6.875rem 0rem;
    justify-content: center;
    align-items: flex-start;
  }
  #our_company .bg_business .desk .box {
    display: flex;
    padding: 0rem 1.875rem;
    flex-direction: column;
    align-items: flex-start;
    gap:1.88rem;
    flex: 1 0 0;
    align-self: stretch;
    border-right: 1px solid #E4E4E4; 
  }

  #our_company .bg_business .desk .box:last-child {
    border-right: none; 
  }

  #our_company .bg_business .desk .box strong {
    color: #28283F;
    font-family: Pretendard;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 1.25rem */
    text-transform: uppercase;
  }

#our_company .bg_business .desk .box p {
    color: #656565;
    font-family: Pretendard;
    font-size: 1.0625rem;
    font-style: normal;
    font-weight: 500;
    line-height: 160%; /* 1.7rem */
    letter-spacing: -0.03188rem;
    word-break: keep-all; 
  }

#our_company .client {
  display: flex;
  margin:0 3.75rem 3.75rem 3.75rem;  
  flex-direction: column;
  align-items: center; 
  border-radius: 1.875rem;
  background: #FBFBFB;
  padding-bottom:5rem; 
}

#our_company ul.client_list { display: flex; justify-content: space-between; align-items: center; gap:1.875rem}
#our_company ul.client_list li img {max-width: 100%; width:auto;}

@media screen and (max-width:840px){ 
  #our_company .business_list { grid-template-columns:  repeat(2,1fr); } 
  #our_company .bg_business .desk {flex-direction: column; ;}
  #our_company .bg_business .desk .box {margin-bottom: 3rem; border-right: none; gap:0.5rem;  ;}
  #our_company .bg_business .desk .box:last-child {margin-bottom: 0; ;}
  #our_company .client {margin: 0 16px; }
}

@media screen and (max-width:640px){  
  #our_company {padding:5rem 0;}
  #our_company ul.client_list {flex-direction: column; gap:1rem;}
  #our_company ul.client_list li {display: flex; flex-direction: column; align-items: center; justify-content: center; gap:1rem;}
  #our_company ul.client_list li::after {content: ""; display: block; width:1px; height:16px; background-color: rgba(0, 0, 0, 0.15);}
  #our_company ul.client_list li:last-child::after {display: none;}
}

/**--------------------------- Our Story **/
#our_story ul.stoty_list {margin-bottom:5rem;}
#our_story ul.stoty_list > li {display: flex; gap:1.875rem; align-items: center; border-bottom:1px solid #E2E2E2; padding:0.9375rem 0;}
#our_story ul.stoty_list > li p {display: flex; justify-content: space-between; width:15rem; color: #1A1A1A; font-size: 1.125rem; font-weight: 700; line-height: 160%;  letter-spacing: 0.18px;}
#our_story ul.stoty_list > li p::after {content: ''; display: block; height:30px; width:1px; background-color: #E2E2E2;}
#our_story ul.stoty_list > li ul {flex:1;}
#our_story ul.stoty_list > li ul li {color: #656565; font-size: 1.0625rem; font-weight: 500; line-height: 160%;  letter-spacing: -0.34px;}

@media screen and (max-width:640px){
  #our_story ul.stoty_list > li {flex-direction: column; align-items: flex-start; gap:1rem;}
  #our_story ul.stoty_list > li p::after {display: none;}
}

#our_story ul.stoty_list_pic {display: grid; grid-template-columns: repeat(3,1fr); gap:3.75rem 1.25rem;}
#our_story ul.stoty_list_pic > li .img img {width:100%;}
#our_story ul.stoty_list_pic > li .date {margin-top:1.25rem; color:#333; font-size: 1.125rem; font-weight: 700; line-height: 160%; letter-spacing: -0.36px;}
#our_story ul.stoty_list_pic > li > ul {margin-top:10px; display: flex; flex-direction: column; gap:6px;}
#our_story ul.stoty_list_pic > li > ul li {display: flex; gap:10px; color: #656565; font-weight: 500; line-height: 160%; letter-spacing: -0.48px; word-break: keep-all;;}
#our_story ul.stoty_list_pic > li > ul li span {width:80px; height:28px; flex-shrink: 0; border-radius: 50px;  background:#B7B7B7; text-align: center; line-height: 28px; color:#fff;}


@media screen and (max-width:1024px){
  #our_story ul.stoty_list_pic {grid-template-columns: repeat(2,1fr);}
}

@media screen and (max-width:640px){
  #our_story ul.stoty_list_pic {grid-template-columns: repeat(1,1fr);}
}






/*inp 공통*/
input,select,textarea,button {font-size: inherit; font-family: inherit; vertical-align: middle}
input{-webkit-appearance: none; -webkit-border-radius: 0; outline: none; border: none}
input[type="text"]::placeholder{color: inherit}
input[type='checkbox'], input[type='radio']{clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px}

.inp_wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.inp_wrap + .inp_wrap { margin-top: 2.5rem; }

@media (max-width: 768px) {   
  .inp_wrap {   grid-template-columns: minmax(0, 1fr);  gap: 2.5rem}    
}
 
.inp_wrap .inp_box.full { grid-column: 1 / 3; }

.inp_wrap .inp_box > .tit_box { margin-bottom: 1rem; }
.inp_wrap .inp_box .tit_box .tit { font-size: 1.125rem; font-weight: 600; }
.inp_wrap .inp_box .tit_box .tit .required { display: flex; align-items: flex-start; justify-content: flex-start; }
.inp_wrap .inp_box .tit_box .tit .required:before { content: '*'; margin-right: 0.3rem; color: var(--blue); color: #F6863F }
.inp_wrap .inp_box .tit_box .tit + .desc { margin-top: 0.5rem; padding-left: 1em; font-size: 1.3rem; color: #777777; }

.inp_wrap .inp_box .variable {padding: 1rem 0 ; font-size: 0.9rem; color:#B22222;}

.inp_wrap .inp_box .inp { height: 3.75rem; line-height: 3.75rem; padding: 0 1rem; border-radius: 0.25rem; box-shadow: 0 0 0 0.8px #e6e6e6; background-color: #fff; overflow: hidden; }
.inp_wrap .inp_box .inp.focus { box-shadow: 0 0 0 0.8px #000; }
.inp_wrap .inp_box .inp input { width: 100%; height: 100%; background-color: transparent; font-size: 1rem; color: #000; text-align: left; border: none; } 
.inp_wrap .inp_box .inp input:focus {outline: none;  ;} 
.inp_wrap .inp_box .inp input::placeholder { color: #B6B6B6; }


.inp_wrap .inp_box .inp.focus.text { box-shadow: 0 0 0 0.8px #000; }
.inp_wrap .inp_box .inp.text { height: auto; padding: 1rem; }
.inp_wrap .inp_box .inp.text textarea { width: 100%; height: 100%; min-height: 13rem; background-color: transparent; resize: none; border: 0; font-size: 1rem; }
.inp_wrap .inp_box .inp.text textarea:focus {outline: none; ;}
.inp_wrap .inp_box .inp.text textarea::placeholder { color: #B6B6B6; }

.inp_wrap .inp_box .radio_box { display: flex; align-items: center; justify-content: flex-start; gap:0.5rem; flex-wrap: wrap;  }
.inp_wrap .inp_box .radio_box .radio {  }
.inp_wrap .inp_box .radio_box .radio + .radio {   }
.inp_wrap .inp_box .radio_box .radio input[type=radio] { display: none; }
.inp_wrap .inp_box .radio_box .radio label { display: inline-block;   padding: 1rem 1.75rem; font-size: 1rem; font-weight: 600; color: #B6B6B6; border-radius: 2em; border: 1px solid #B6B6B6; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.inp_wrap .inp_box .radio_box .radio input:checked + label { background-color: #000; color: #fff; border-color: #000; }

.inp_wrap .inp_box .attach_box { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; }
.inp_wrap .inp_box .attach_box .inp_btn_wrap{display: grid; grid-template-columns: minmax(0, 1fr) auto; flex: 1;}
.inp_wrap .inp_box .attach_box .inp { display: flex; align-items: center; width: 100%; height: auto; min-height: 3.75rem; line-height: unset;}
.inp_wrap .inp_box .attach_box .btn_wrap { margin-top: 0; margin-left: 1rem; flex-shrink: 0; }
.inp_wrap .inp_box .attach_box .btn { height: 3.75rem; line-height: 3.75rem; padding: 0 1.5rem; background-color: #fff; font-size: 1.125rem; font-weight: 600; box-shadow: 0 0 0 1px #000; border-radius: 0.5rem; flex-shrink: 0; color: #000; transition: background-color 0.5s, color 0.5s; }
.inp_wrap .inp_box .attach_box .inp_refer{position: relative; width: 100%; padding-left: 0.75em; margin-top: 0.75em; color: #717171; font-size: 0.9rem;}
.inp_wrap .inp_box .attach_box .inp_refer + .inp_refer{margin-top: 0.15em;}
.inp_wrap .inp_box .attach_box .inp_refer b{color: #000; font-weight: 500;}
.inp_wrap .inp_box .attach_box .inp_refer::before{content: '*'; position: absolute; top: 0; left: 0; color: #000;}

/* 파일첨부 영역 */
.inp_wrap .inp_box .attach_box .drag_drop_wrap{position: relative; width: 60%; border: 2px dashed #DDE3EB; padding: 15px 20px; display: flex; align-items: center; justify-content: center; color: #7985A9}
.inp_wrap .inp_box .attach_box .drag_drop_wrap button{position: absolute; left: 20px; top: 50%; transform: translateY(-50%)}
.inp_wrap .inp_box .attach_box .drag_drop_wrap span{font-size: 14px; font-weight: 500}
.inp_wrap .inp_box .attach_box .drag_drop_wrap span i{font-size: 17px; margin-right: 10px}
.inp_wrap .inp_box .attach_box .file_desc{display: inline-block; margin-top: 10px; font-size: 13px; color: #484D60; font-weight: 400}
.inp_wrap .inp_box .attach_box .file_desc i{margin-right: 5px; color: #484D60}

.inp_wrap .inp_box .attach_box .file_upload_wrap{display: flex; flex-wrap: wrap; align-items: center; padding: 0.25em 0; transition: all 0.3s}
.inp_wrap .inp_box .attach_box .file_upload_wrap .uploadedCommonFile{margin: 0.5rem 1rem;}
.inp_wrap .inp_box .attach_box .file_upload_wrap .file_img{position: relative; padding-top: 73px; width: 140px; margin-right: 20px}
.inp_wrap .inp_box .attach_box .file_upload_wrap .file_img img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover}
.inp_wrap .inp_box .attach_box .file_upload_wrap .file_name{display: flex; font-weight: 500}
.inp_wrap .inp_box .attach_box .file_upload_wrap .file_name .name{display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.5em; font-size: 13px; color: #333; }
.inp_wrap .inp_box .attach_box .file_upload_wrap .file_name .name span{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 2px; border-bottom: 1px solid #333}
.inp_wrap .inp_box .attach_box .file_upload_wrap .file_btn{width: 120px; text-align: center}
.inp_wrap .inp_box .attach_box .file_upload_wrap .file_move{position: relative; width: 120px; min-height: 30px; text-align: center; color: #B8BED0; font-size: 18px; cursor: move}
.inp_wrap .inp_box .attach_box .file_upload_wrap .file_move i{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)}


.inp_wrap .inp_box .id_box { display: flex; align-items: center; justify-content: flex-start; }
.inp_wrap .inp_box .id_box .inp { width: 100%; }
.inp_wrap .inp_box .id_box .btn { min-width: 15rem; height: 3.75rem; line-height: 3.75rem; margin-left: 1rem; flex-shrink: 0; text-align: center; box-shadow: 0 0 0 0.8px #000; border-radius: 0.5rem; color: #000; font-weight: 500; transition: background-color 0.5s, color 0.5s; }

.inp_wrap .inp_box .term_box { }
.inp_wrap .inp_box .term_box .box { box-shadow: 0 0 0 0.8px #e6e6e6; border-radius: 0.5rem; }
.inp_wrap .inp_box .term_box .box + .box { margin-top: 1.2rem; }
.inp_wrap .inp_box .term_box .box .top { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; cursor: pointer; }
.inp_wrap .inp_box .term_box .box .top .chk_box {  }
.inp_wrap .inp_box .term_box .box .top .arr { width: 1.5rem; height: 1.5rem; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M239 401c9.4 9.4 24.6 9.4 33.9 0L465 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-175 175L81 175c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L239 401z"/></svg>')center/contain no-repeat; transition: transform 0.3s; }
.inp_wrap .inp_box .term_box .box .top.active .arr { transform: rotate(180deg); }
.inp_wrap .inp_box .term_box .box .txt_wrap { display: none; padding: 2rem; background-color: #f8f8f8; font-size: 0.95rem; color: #777777; line-height: 1.8; border-top: 1px solid #e6e6e6; }
.inp_wrap .inp_box .term_box .chk_wrap { display: flex; align-items: center; justify-content: flex-end; margin-top: 2rem; }
 
.inp_wrap .inp_box .desc_wrap { margin-top: 1rem; }
.inp_wrap .inp_box .desc { font-size: 1.3rem; color: #717171; }


/*체크박스 공용*/
.chk_box {  }
.chk_box input[type=checkbox] {  }
.chk_box input[type=checkbox] + label { display: flex; align-items: center; justify-content: flex-start; cursor: pointer;   font-weight: 500; }
.chk_box input[type=checkbox] + label:before { 
  font-family: "Material Symbols Outlined"; 
  content: "check_box_outline_blank";  
   margin-right: 0.25rem; 
   font-size: 1.75rem; }

.chk_box input[type=checkbox]:checked + label:before { 
  font-family: "Material Symbols Outlined";  
  content: "check_box"; 
  font-variation-settings:
    'FILL' 1 }

/*공통*/
.btn_wrap { display: flex; align-items: center; justify-content: flex-start; margin-top: 3rem; }
.btn_wrap.center { justify-content: center; }
.btm_btn { height: 4rem; line-height: 4rem; padding: 0 2.5rem; font-size: 1.125rem; color: #fff; background: #000; border-radius: 0.5rem; font-weight: 400; }



.year_tab {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.year_tab li a {
  padding: 5px 12px;
  border: 1px solid #999;
  border-radius: 4px;
  display: inline-block;
}

.year_tab li a.active {
  background: #000;
  color: #fff;
  border-color: #000;
}