/* ----------------------------- login common ----------------------- */
section {padding: 7.5rem 0 8.75rem;}
@media screen and (max-width:1024px) {
  section {padding: 5rem 0 10rem;}
}/* md */
/* ----------------------------- login common end ----------------------- */


/* ----------------------------- new login_sec ----------------------- */
/*--- box_01 ---*/
.login_sec{background-color:#F8F8F8; font-size: 1rem; font-weight: 500; line-height: 150%; letter-spacing: -0.02rem; color: #222;}
.login_sec .inner{max-width: 512px;}
.login_sec .box_01{padding: 4.5rem 2.5rem 2.5rem;}
.login_sec .tit_wrap{gap: 0.5rem;}
.login_sec .cont_wrap{margin: 2.5rem 0 0;}
.login_sec .tit{color:#6049ea; font-weight:600;}
.login_sec .sub_tit{font-size:1.5rem; font-weight:800; line-height:130%;}
.login_sec .btn_wrap{margin: 2.5rem 0;}
.login_sec button{width: 100%;}
.login_sec .btn_blue{width: 100%; background:#6049EA; color:#fff; font-weight: 700; font-size: 1rem;}
/*EMAIL*/
.login_email .login_cont form input[type="text"],
.login_email .login_cont form input[type="password"],
.login_email .login_cont form input[type="tel"]{width:100%; padding:0 1.5rem; background:#f8f8f8; color:#aaa; font-size:0.875rem; font-weight:400; line-height:140%;}
.login_email .email_wrap{margin-bottom:0.5rem;}
.login_email .pn_wrap{margin-bottom: 1rem;}
.login_email .find_wrap{margin-bottom:2.5rem; display:flex; justify-content:center; gap:2rem}
.login_email .find_wrap a{position:relative; color:#aaa; font-size:0.875rem; font-weight:500; line-height:140%;}
.login_email .find_wrap a:not(:last-child)::before{content:''; display:block; width:1px; height:1rem; background-color:rgba(211,211,211,0.50); position:absolute; top:50%; right:-1rem; transform:translate(0,-50%)}
/*SNS*/
.login_email .sns_wrap{position:relative;}
.login_email .sns_wrap::before,
.login_email .sns_wrap::after{content:''; display:block; width:7.938rem; height:1px; background:rgba(34, 34, 34, 0.15); position:absolute; top:0.6rem;}
.login_email .sns_wrap::before{left: 0;}
.login_email .sns_wrap::after{right: 0;}
.login_email .sns_wrap h4{color:#666; font-weight:600;}
.login_email .btn_list{margin-top: 1.5rem;}
.login_email .btn_list li{flex: unset;}

/*--- box_02 ---*/
.login_sec .box_02 .btn_wrap{margin: 0 0; gap: unset;}
.login_sec .box_02 .btn_toggle{justify-content: space-between; cursor: pointer;}
.login_sec .box_02 .btn_toggle button{width: unset;}
.login_sec .box_02 .email_wrap{margin-top: 2rem;}
/*비회원 신청*/
.login_sec .box_02 .login_cont{display: none;}
.login_sec .no_member{font-weight: 700;}
.login_sec .ico_down{width: 1.5rem; height: 1.5rem;}
.login_sec .des{margin-top: 0.25rem; text-align: left; color: #888; font-size: 0.875rem; line-height: 140%;}
.login_sec .login_cont .btn_wrap{margin-top: 0.5rem;}
.login_sec .login_cont .btn_wrap button{font-size: 1rem;}

.login_sec .btn_toggle.open .ico_down{background: url(/front/images/common/ico_up.png) no-repeat center/100% auto;}

@media screen and (max-width: 767px){
  .login_sec{padding: 0 0 2.667rem;}
  .login_sec .inner{width: 100%;}

  /*--- box_01 ---*/
  /*SNS*/
  .login_email .sns_wrap::before,
  .login_email .sns_wrap::after{width: 6rem;}
  .login_email .btn_list li{width: 4.667rem;}
}
/* ----------------------------- new login_sec end ----------------------- */


/* ----------------------------- login SNS ----------------------- */
.login_sns .login_cont .sns_wrap{width:100%; display:flex; justify-content:center; flex-direction:column; align-items:center; gap:1.5rem}
.login_sns .login_cont .sns_login{width:100%; display:flex; justify-content:center; align-items:center; flex-direction:row; border-radius:1rem; background-color:#fff; color:#381E1E}
.login_sns .login_cont .sns_login button{padding:1.125rem 0; text-align:center; font-size:1.125rem; font-weight:700; line-height:100%; width:auto}
.login_sns .login_cont #kakao_id_login{background-color:#FFE600}
.login_sns .login_cont #login_naver{background-color:#4AB752; color:#fff}
.login_sns .login_cont #google_id_login{border:1px solid #BFBFBF}
.login_sns .login_cont .sns_login::before{display:inline-block; content:''; margin-right:.75rem}
.login_sns .login_cont #kakao_id_login::before{width:23px; height:21px; background:url(/front/images/login/ico_kakao.svg) center center / contain no-repeat}
.login_sns .login_cont #login_naver::before{width:22px; height:22px; background:url(/front/images/login/ico_naver.svg) center center / contain no-repeat}
.login_sns .login_cont #google_id_login::before{width:22px; height:22px; background:url(/front/images/login/ico_google.svg) center center / contain no-repeat}
.login_sns .find_wrap{display:flex; justify-content:center; align-items:center; gap:2rem; margin-top:2.5rem}
.login_sns .find_wrap a{color:#A3A3A3; font-size:1rem; font-weight:300; line-height:100%; position:relative}
.login_sns .find_wrap a:not(:last-child)::after{content:''; display:block; width:1px; height:1rem; position:absolute; top:50%; right:-1rem; transform:translate(0,-50%); background-color:rgba(211,211,211,0.50)}

@media screen and (max-width:767px){
  .login_sns .login_cont .sns_login button{padding:1.3rem 0}
  .login_sns .find_wrap a{font-size:1.08rem}
}/* sm */
/* ----------------------------- login SNS  end ----------------------- */


/* ----------------------------- sign up ----------------------- */

.signup_sec .signup_cont{padding:2.5rem; margin:2.5rem auto 0; border-radius:30px; background:#FFF; box-shadow:0 7px 25px 8px rgba(0,0,0,0.04)}
.signup_sec .signup_cont h4{color:#444; font-size:1.25rem; font-weight:700; line-height:100%; margin-bottom:2rem}
.signup_sec .signup_cont:nth-child(2n){margin:2.5rem auto}

/* info part */
.signup_sec form label{color:#444; font-size:1rem; font-weight:600; line-height:100%; display:block}
.signup_sec form input[type="text"],
.signup_sec form input[type="password"]{width:100%; padding:1rem; border-radius:.625rem; background:#F9F9F9; color:#A3A3A3; font-size:1rem; font-weight:300; line-height:100%; margin:10px auto 8px}
.signup_sec form input::placeholder{color:#A3A3A3; font-size:1rem; font-weight:300; line-height:100%}

.signup_sec form .email_wrap + .pw_wrap{margin-top:1rem}
.signup_sec form .validation_wrap{padding-left:1rem}
.signup_sec form .validation_wrap:not(:last-child){margin-bottom:1.5rem}
.signup_sec form .validation_wrap.hide{display:none}
.signup_sec form .validation_wrap.hide + .email_wrap{margin-top:1rem}
.signup_sec form .validation_wrap.hide + .pw_wrap{margin-top:1rem}
.signup_sec form .validation_wrap span{color:#BFBFBF; font-size:0.875rem; font-weight:300; line-height:100%; padding-right:.5rem}
.signup_sec form .validation_wrap span::before{content:''; display:inline-block; width:11px; height:7px; background:url(/front/images/login/ico_check_line.svg) center center /contain no-repeat; margin-right:4px}
.signup_sec form .validation_wrap span.color_pink{color:#FF62AD}
.signup_sec form .validation_wrap span.color_pink::before{display:none}
.signup_sec form .validation_wrap span.active{color:#6049EA}
.signup_sec form .validation_wrap span.active::before{background-image:url(/front/images/login/ico_check_line_purple.svg)}

/* agree part */
.signup_sec form .chk_wrap:not(:last-child){margin-bottom:1.375rem}
.signup_sec form .chk_wrap.chk_all{margin-bottom:3.25rem}
.signup_sec form .chk_wrap.chk_all::after{content:''; display:block; width:100%; height:1px; background-color:#F0F0F0; position:absolute; bottom:-1.625rem; right:50%; transform:translate(50%,0)}
.signup_sec form  .chk_wrap{display:flex; justify-content:flex-start; align-items:center}
.signup_sec form .chk_wrap input[type="checkbox"] + label{color:#444; font-size:1rem; font-weight:300; line-height:1.25rem}
.signup_sec form .chk_wrap input[type="checkbox"] + label strong{font-weight:700}
.signup_sec form  .chk_wrap .btn_popup{width:1.25rem; height:1.25rem; background:url(/front/images/login/btn_popup.svg) center center / contain no-repeat ; position:absolute; right:0; top:0}

/* button */
.signup_sec .btn_type_01{height: auto; padding:1.3rem 0}
.signup_sec .btn_disable button{background:#EEEEEE; color:#666666; cursor:default}

@media screen and (max-width:767px){
  .signup_sec{background-color:#F8F8F8}
  .signup_sec .inner[data-layout="wd_500"]{width:100%}
  .signup_sec .signup_cont{box-shadow:none; border-radius:0}
  .signup_sec .signup_cont{margin:5rem auto 0}
  .signup_sec .signup_cont:nth-child(2n){margin:8px auto 32px}
  .signup_sec .btn_type_01{max-width:94%; margin:0 auto; }

  .signup_sec .signup_cont h4 {font-size:1.38rem}
  .signup_sec form label,
  .signup_sec form .chk_wrap input[type="checkbox"] + label {font-size:1.08rem}
}/* sm */
/* ----------------------------- sign up end ----------------------- */


/* ----------------------------- find ip  ----------------------- */
.find_sec .tab_menu_wrap ul{font-size:0; display:flex; justify-content:center; align-items:center; flex-direction:row; gap: 1rem;}
.find_sec .tab_menu_wrap ul li{flex:1; width:50%; white-space: nowrap;}
.find_sec .tab_menu_wrap ul li a{display:block; color:#A3A3A3; text-align:center; font-size:18px; font-weight:700; line-height:100%; padding:1rem 0; border-bottom:2px solid #E4E4E4}
.find_sec .tab_menu_wrap ul li.active a{color:#6049EA; border-bottom:2px solid #6049EA}
.find_sec .find_desc{color:#444; font-size:1rem; font-weight:400; line-height:175%; margin-top:2.5rem}
.find_sec form input{width:100%; padding:1rem; border-radius:.625rem; background:#F9F9F9; color:#A3A3A3; font-size:1rem; font-weight:300; line-height:100%; margin:1.5rem auto 2.5rem}
.find_sec form input::placeholder{color:#A3A3A3; font-size:1rem; font-weight:300; line-height:100%}
@media screen and (max-width:767px){
  .find_sec .tab_menu_wrap ul li a{font-size:1.23rem}
  .find_sec .find_desc{font-size:1.08rem}
}
/* ----------------------------- find ip end ----------------------- */


.signup_done_sec .inner {max-width: 512px;}
.signup_done_sec .title_wrap {display: block; margin-bottom: 0; color: #222; text-align: center;}
.signup_done_sec .tit {margin-bottom: 0.5rem; font-size: 1.5rem; font-weight: 800; line-height: 133%;}
.signup_done_sec .sub_tit {font-size: 1rem; font-weight: 500; line-height: 150%;}
.signup_done_sec .clab_lottie {width: 200px; margin: 1rem auto}
.signup_done_sec .info_box {width: 100%; padding: 1.875rem 2rem; background-color: #F8F8F8;}
.signup_done_sec .info_tit {margin-bottom: 0.5rem; font-size: 1.125rem; color: #222; font-weight: 700; line-height: 144%;}
.signup_done_sec .info_desc li {display: flex; align-items: center; gap: 0.375rem;}
.signup_done_sec .info_desc li:not(:last-child) {margin-bottom: 0.375rem;}
.signup_done_sec .info_desc i {display: block; width: 1rem; height: 1rem;}
.signup_done_sec .info_desc li:nth-child(1) i {background: url(/front/images/common/title_ico_01.svg) no-repeat center/100% auto;}
.signup_done_sec .info_desc li:nth-child(2) i {background: url(/front/images/common/title_ico_03.svg) no-repeat center/100% auto;}
.signup_done_sec .info_desc li:nth-child(3) i {background: url(/front/images/common/title_ico_04.svg) no-repeat center/100% auto;}
.signup_done_sec .info_desc p {font-weight: 500; font-size: 1rem; line-height: 150%;}
.signup_done_sec .btn_wrap {max-width: 426px; margin: 2rem auto 0;}
.signup_done_sec .btn_wrap .btn_type_01 {font-size: 1rem;}
.signup_done_sec .btn_wrap .btn_type_01[data-bgColor="white"] {flex: 12.5rem 0 0;}
.signup_done_sec .btn_wrap .btn_type_01[data-bgColor="black"] {flex: 13.625rem 0 0;}
@media screen and (max-width: 767px) {
    .signup_done_sec .info_box {padding: 2rem 1.667rem;}
    .signup_done_sec .info_tit {font-size: 1.33rem;}
    .signup_done_sec .info_desc li {gap: 0.5rem;}
    .signup_done_sec .info_desc i {width: 1.167rem; height: 1.167rem;}
    .signup_done_sec .info_desc p {font-size: 1.167rem;}
}
@media screen and (max-width: 500px) {
    .signup_done_sec .tit {font-size: 1.667rem;}
    .signup_done_sec .sub_tit {font-size: 1.167rem;}
    .signup_done_sec .clab_lottie {width: 160px; margin: 0 auto}
    .signup_done_sec .btn_wrap {flex-direction: column-reverse;}
    .signup_done_sec .btn_wrap .btn_type_01 {width: 100%;}
    .signup_done_sec .btn_wrap .btn_type_01[data-bgColor="white"],
    .signup_done_sec .btn_wrap .btn_type_01[data-bgColor="black"] {flex: 4rem 0 0; font-size: 1.167rem;}
}