@charset "utf-8";

input::placeholder{color:#a4a4a4;}

input[type="checkbox"]{display: none;}
input[type="checkbox"] +label{color:#ccc;margin-right:8px;vertical-align: middle;}
input[type="checkbox"] +label span{ display: inline-block; width:14px; height:14px; border:1px solid #cfcfcf; background: #fff; cursor:pointer;}
input[type="checkbox"]:checked + label span {width:14px; height:14px; background:url(../images/form/checkbox-selected.png)top left no-repeat; outline:none; border:none;}
input[type="checkbox"]:disabled + label span {display: inline-block; width:14px; height:14px; vertical-align: middle; border:1px solid #ccc; background: #ccc; cursor:pointer;}

/*모바일 메뉴 슬라이딩*/
input[id="menuicon"] {display: none;}
input[id="menuicon"] + label{display: none;}

@media screen and (max-width: 767px){
#main{position: relative;}
input[id="menuicon"] + label{position: fixed; left:10px; top:14px; display: block; margin:0; width:20px; height:16px; cursor:pointer; z-index: 108;}
input[id="menuicon"] + label span{display:block; position: absolute; border:0; width:20px; height:2px; border-radius:2px; background:#000; transition:all .35s;}
input[id="menuicon"] + label span:nth-child(1){top:0;}
input[id="menuicon"] + label span:nth-child(2){top:50%; transform:translatey(-50%);}
input[id="menuicon"] + label span:nth-child(3){bottom:0;}

input[id="menuicon"]:checked + label{z-index:109; position: fixed; right:10px;}
input[id="menuicon"]:checked + label span{background:#fff;width:100%; height:2px;border:0;}
input[id="menuicon"]:checked + label span:nth-child(1){top:50%; transform: translateY(-50%) rotate(45deg);}
input[id="menuicon"]:checked + label span:nth-child(2){opacity: 0;}
input[id="menuicon"]:checked + label span:nth-child(3){bottom:50%; transform:translateY(50%) rotate(-45deg);}

input[id="menuicon"]:checked + label + div{left:0;}
} 



/*23-03 인풋 수정*/
input[type="radio"]:checked + label .check_circle {
  width:16px;
  height:16px;
  background:url(../images/form/radio-selected.svg)center no-repeat;
  outline:none;
  border:none;
}
.mem_box .all_agree {width: 18px; height: 18px; border-radius: 3px; background: #b0b7bb;}
input[type="checkbox"]:checked + label .all_agree {width:20px; height:20px; background:url(../images/form/checkbox-selected_large_gray.svg)top left no-repeat; outline:none; border:none; border-radius: 3px;}

.check_circle{width: 16px; height: 16px; background:url(../images/form/radio-selected_gray.svg)center no-repeat; outline:none; border:none;}
input[type="checkbox"]:checked + label .check_circle {width:16px; height:16px; background:url(../images/form/radio-selected_gray.svg)center no-repeat; outline:none; border:none;}


dd input[type="checkbox"] +label span{ display: inline-block; width:14px; height:14px; vertical-align: middle; border:1px solid #cfcfcf; background: #fff; cursor:pointer;}
dd input[type="checkbox"]:checked + label span {width:16px; height:16px; background:url(../images/form/checkbox-selected2.svg)top left no-repeat; outline:none; border:none;}
dd label{margin-right:8px;}

input[type="radio"]{display: none; }

input.checkbox +label{margin-right:4px; vertical-align: middle;}
input.checkbox +label span{ display: inline-block; width:14px; height:14px;  border:1px solid #cfcfcf; background: #fff; cursor:pointer;}
input.checkbox:checked + label span {width:14px; height:14px; background:url(../images/form/checkbox-selected.png)top left no-repeat; outline:none; border:none;}
input.checkbox:disabled + label span {display: inline-block; width:12px; height:12px; vertical-align: middle; border:1px solid #ccc; background: #ccc; cursor:pointer;}

input.radio +label{display: inline-block; width:20px; height:20px;vertical-align: middle;}
input.radio +label span{display: inline-block; width:16px; height:16px;line-height: 16px;  background:url(../images/form/radio-selected_gray.svg)center no-repeat; outline:none; border:none; cursor:pointer;}
input.radio:checked + label span {width:16px; height:16px; background:url(../images/form/radio-selected.svg)top left no-repeat; outline:none; border:none;}
input.radio.radio-disabled:checked + label span {width:16px; height:16px; background:url(../images/form/radio-selected2.svg)top left no-repeat; outline:none; border:none;}
input.radio:checked:disabled + label span {width:16px; height:16px; background:url(../images/form/radio-selected2.svg)top left no-repeat; outline:none; border:none;}
input.radio:disabled +label span{display: inline-block; width:14px; height:14px;line-height: 16px; vertical-align: middle; border:1px solid #ccc;margin-bottom:2px;margin-right:10px;border-radius: 8px; background: #fff;color:#8D8D8D;}

input[type="text"],[type="password"],[type="date"], [type="number"]{height:40px;font-size:14px; outline:none; padding-left:13px; border:1px solid #e3e3e3;}
input.input_search{width:240px;border-left:0; }
input.input{width:100%; }
input.input_100{width:100%;}
input.input_h{width:70px; }
input.pop_bs{position: relative; width:100%; border:1px solid #e3e3e3; border-bottom:0;}
input.pop_bs +label{position: absolute; top:40px; right:14px;}

.form_input textarea{width:630px; height:96px;padding:8px 14px; border:1px solid #e3e3e3; }

#datepicker{position: relative; width: 140px; }
#datepicker > span img{position: absolute; top:8px; right:14px;}
#datepicker > span:hover{cursor:pointer;}




.btnCalendar { display:inline-block; position:relative; overflow:hidden; width:36px; height:30px; box-sizing:border-box; border:1px solid #d4d4d4; vertical-align:top; text-indent:120%; white-space:nowrap;  -webkit-transition:border .3s ease-out; transition:border .3s ease-out; }
.btnCalendar:before { content:""; display:inline-block; position:absolute; top:0; left:0; width:18px; height:18px; margin-top:0;  background: url(../images/form/btn-calendar.png)no-repeat; }
.btnCalendar { margin-left:-5px; }

/* 23-03 내용 수정 */
.form_input .radio_w120 {width: 120px;}


/* 프로모션 시승신청, 시승신청 메뉴 */
.apply_contents {
  padding: 0 30px 100px 30px;
}
.apply_contents .tit {
  font-weight: normal;
}
.testDrive_tit {
  text-align: center;
}
.testDrive_tit_img {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding-top: 50px;
  margin: auto;
  overflow: hidden;
}
.testDrive_tit_img > img {
  width: 100%;
}
.testDrive_tit_text {
  padding: 50px 0 30px 0;
}
.testDrive_tit_text .sub {
  text-align: center;
  margin-top: 30px;
  padding-top: 0;
  padding: 20px 0;
  border-top: 1px solid var(--gray3);
  border-bottom: 1px solid var(--gray3);
  color: var(--gray2);
}
.testDrive_cont .promotion_text p{
  margin-left: 10px;
  text-indent: -9px;
}
.form_field {
  width: 100%;
  margin-bottom: 16px;
}
.form_input li {
  width: 100%;
}
.form_input li input {
  width: 100%;
  border-radius: 5px;
}
.counseling_way .counseling_way_radio {
  width: 30px;
}
.selectric {
  border-radius: 5px;
}
/* 휴대폰 인증 */
.form_field.tel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.form_field.tel:first-child {
  margin-bottom: 10px;
}
.form_field.tel .form_input {
  position: relative;
  width: 60%;
}
.check_count {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
.form_field .btn_tel {
  width: 40%;
  height: 40px;
}
.form_field .btn_tel .btn_black {
  width: 100%;
  height: 100%;
  min-width: auto;
  padding: 0;
  border-radius: 5px;
}


.form_h1 {
  padding: 10px 0;
}
.compulsory {
  padding-left: 5px;
  color: var(--red);
}

.mem_box {
 padding: 16px 10px;
 margin-bottom: 30px;
 border-radius: 8px;
 background: var(--gray4);
 color: var(--gray1);
 font-size: 12px;
}
.mem_box br:nth-child(1) {
  display: none;
}
.mem_bt_tit {
  margin-top: 60px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: bold;
}
.mem_bt_tit a {
  margin-left: 5px;
  padding: 2px 15px 3px 15px;
  border:1px solid transparent;
  border-radius: 5px;
  background: var(--black);
  color: var(--white);
  font-size: 11px;
  font-weight: normal;
  transition: 0.4s;
  font-family: 'NotoSans-Kr';
}
.mem_bt_tit a:hover {
	color: var(--black);
	background: var(--white);
	border:1px solid var(--black);
}
.mem_bt_box li {
  margin: 22px 0;
  font-size: 12px;
  margin-left: 24px;
  text-indent: -24px;
}

/* 20250307 지우 내용 추가 */
.mem_bt_box li input[type="checkbox"] +label span {
  margin-top: 2px;
}
/* 20250307 지우 내용 추가 */

.checkbox_all {
  font-weight: bold;
}
.checkbox_all input[type="checkbox"] +label span{
  width: 20px;
  height: 20px;
  border-radius: 20px;
}
.checkbox_all input[type="checkbox"]:checked + label span {
  width: 20px;
  height: 20px;
  background: url(../images/form/checkbox-selected.png) no-repeat center / 18px;
  background-color: #262626;
}
.mem_bt_box li .under_red {
  display: none;
  margin-top: 10px;
  font-size: 12px;
  color: var(--red);
}
.mem_bt_box li .under_red.on {
  display: block;
}
.centerBtn {
  margin-top: 50px;
  text-align: center;

}
.centerBtn .btn_black {
  max-width: auto;
  width: 100%;
  height: 40px;
  border-radius: 5px;
}

/* 20250226 지우 프로모션 풀 화면 추가 */
.apply_contentsFull {
  position: relative;
  width: 100%;
  height: 100%;
  margin: auto;
}
.apply_contentsFull .testDrive_cont {
  height: 100%;
}
.apply_contentsFull .promotion_text_wrap {
  display: flex;
  flex-direction: column;
  padding: 50px 25px 100px 25px;
  align-items: center;
  justify-content: center;
  color: var(--gray1);
  font-size: 12px;
}
/* 20250226 지우 프로모션 풀 화면 추가 */

/* 20250227 지우 내용 수정 추가 */
.btn_add_basket input.checkbox +label {
  margin-right: 6px;
}
/* 20250227 지우 내용 수정 추가 */

/* 로그인 */
.login_dim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
}
.login_cont {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  width: 90%;
  max-width: 550px;
  margin: 0 auto;
  padding: 50px 30px;
  background: var(--white);
  border-radius: 10px;
}
.tit.login {
  margin-bottom: 14px;
  text-align: center;
  font-weight: normal;
}
.login_cont .login_cont_tit {
  margin-bottom: 40px;
  text-align: center;
}
.login_cont .sub{
  padding-top: 15px;
}
.login_cont .name_input,
.login_cont .form_field.tel .form_input,
.login_cont .form_field.tel .number_input {
  width: 75%;
}
.login_cont .form_field .btn_tel {
  width: 25%;
}
.login_cont .login_btn {
  padding: 0;
  border: none;
  margin-top: 30px;
  text-align: center;
}
.login_cont .login_btn .btn_black {
  width: 100%;
  border-radius: 5px;
  font-size: 16px;
  letter-spacing: inherit;
}
.login_cont .login_btn .btn_black:hover {
  color: var(--black);
}
.account_login {
  margin-top: 14px;
}
.account_login li {
  margin-top: 10px;
}
.account_login .account_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 20px;
  border-radius: 5px;
  color: var(--gray2);
}
.account_login .account_btn img {
  width: 15px;

}
.account_login .account_btn p {
  margin-left: 10px;
  white-space : nowrap; 
}
.account_login .account_btn.kakao {
  background: #fee500;
}
.account_login .account_btn.kakao p {
  color: #000;
}
.account_login .account_btn.naver {
  background: #03c75a;
}
.account_login .account_btn.naver p {
  color: #fff;
}

/* 인증 번호 팝업 */
.pop_dim {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
}
.pop_wrap {
  width: 90%;
  margin: auto;
  text-align: center;
}
.pop_box{ 
  display: none;
	position:fixed; 
	left:50%; 
	top:50%;
  width: 90%;
  padding: 30px 0;
	z-index: 10000; 
	background: #fff; 
	transform:translate(-50%, -50%);
	box-sizing: border-box;
	border-radius: 10px;
}
.close_btn {
  content: "";
  display: block;
  position: fixed;
  top: 15px;
  right: 15px;
  width: 16px;
  height: 16px;
  background: url(../images/icon/btn_pop_close.png);
  background-size: 16px 16px;
  cursor: pointer;
}
.pop_wrap .pop_text {
  font-size: 14px;
  padding: 30px 0 40px 0;
  text-align: center;
}

.pop_dim.show, .pop_box.show {
  display: block;
}
/* 연락처 폼 */
.number_input {
  display: flex;
  gap: 2%;
}
.number_input .selectric-wrapper,
.number_input .number {
  width: calc(100% - 2% / 3);
}
.selectric .label {
  color: #a4a4a4;
}


@media screen and (min-width: 751px) {
  .testDrive_tit_img {
    max-height: 420px;
  }
  .login_cont .sub br {
    display: none;
  }
}

@media screen and (min-width: 1025px){

    /* 프로모션 시승신청 */
    .apply_contents {
      max-width: 640px;
      margin: auto;
      box-sizing: border-box;
    }
    .testDrive_tit_text {
      padding: 60px 0;
    }
    .testDrive_tit_text .sub {
      margin-top: 60px;
      padding: 30px 0;
    }

    /* 프로모션 시승신청 이미지 */
    .testDrive_tit_img > img {
      width: 100%;
    }
    /* 프로모션 시승신청 이미지 */
    
    .form_h1 {
      width: 100%;
    }
    .form_input {
      width: 100%;
    }

    /* 20250226 지우 프로모션 풀 화면 추가 */
    .apply_contentsFull {
      width: 80%;
      margin: auto;
    }
    /* 20250226 지우 프로모션 풀 화면 추가 */
    /* 로그인 */

    .login_cont {
      padding: 60px;
      padding-top: 60px;
    }
    .tit.login {
      padding-bottom: 16px;
      font-weight: normal;
    }
    .login_cont .sub {
      font-size: 16px;
      padding-top: 0;
    }
    .login_cont .sub br {
      display: none;
    }
    .login_cont .form_field {
      display: block;
    }
    .login_cont .form_field.tel {
      display: flex;
    }
    .login_cont .form_h1 {
      width: 100%;
    }
    .login_cont .form_input {
      width: 100%;
    }
    .account_login {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .account_login li {
      width: 50%;
      margin-top: 0;
    }
    /* 인증 번호 팝업 */
    .pop_wrap {
      max-width: 450px;
    }
    .pop_wrap .pop_text {
      font-size: 16px;
      padding: 30px 0 40px 0;
    }
    .w_500 {
      width: 500px;
      margin: auto;
    }

    .close_btn {
      width: 18px;
      height: 18px;
      background-size: 18px 18px;
    }
    /*시승신청*/
    .mem_box{
      padding: 20px;
    }
    .mem_box br:nth-child(1) {
    display: block;
  }
  }