/* 로그인 */

._login{ width: 100%; overflow: hidden; padding: 200px 0; }
._login .innerWrap{ width: 100%; max-width: 760px; margin: 0 auto; }

._login h3.title{ font-size: 30px; letter-spacing: -0.045em; font-weight: 600; text-align: center; }
._login .my_form{ margin-top: 45px; }
._login .bigBtnWrap{ width: 100%; margin-top: 40px; }
._login .bigBtnWrap > a{ width: 100%; display: block; padding: 28px 0; box-sizing: border-box; font-size: 24px; text-align: center; border-radius: 20px; }
._login .bigBtnWrap > a.red{ background-color: #d92b2b; }
._login .bigBtnWrap > a.gray{ background-color: #333; margin-bottom: 5px; }

._login .loginLinks{ width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 20px; }
._login .loginLinks li{ position: relative; color: #888; font-weight: 500; }
._login .loginLinks li::after{ content: '|'; display: block; position: absolute; right: 0; top: 1px; }
._login .loginLinks li:last-of-type::after{ display: none; }
._login .loginLinks li > a{ display: block; padding: 0 25px; }

._login .snsLogin{ margin-top: 65px; }
._login .snsLogin > p{ font-size: 20px; letter-spacing: -0.045em; color: #888888; font-weight: 600; text-align: center; }
._login .snsLogin > ul{ width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 15px; }
._login .snsLogin > ul li{ text-align: center; margin-right: 45px; }
._login .snsLogin > ul li:last-of-type{ margin-right: 0; }
._login .snsLogin > ul li i{ font-size: 32px; display: block; }
._login .snsLogin > ul li span{ font-size: 14px; font-weight: 400; letter-spacing: -0.045em; display: block; }


/* 회원가입 */

._login .signType_{ width: 100%; padding: 0 calc(45 / 1280 * 100%); box-sizing: border-box; display: flex; justify-content: space-between; margin-top: 55px; }
._login .signType_ > a{  word-break: keep-all; border: 2px solid #888888; display: flex; width: calc(580 / 1190 * 100%); border-radius: 20px; text-align: center; flex-direction: column; justify-content: center; height: 330px; transition-duration: 0.2s; box-sizing: border-box; }
._login .signType_ > a h5{ font-size: 36px; font-weight: 700; letter-spacing: -0.045em; margin-top: 25px; }
._login .signType_ > a p{line-height: 1.5; font-size: 18px; letter-spacing: -0.045em; color: rgba(255,255,255,0.6); margin-top: 15px; }

@media screen and (min-width: 821px){
    ._login .signType_ > a:hover{ background-color: #d92b2b; border-color: #d92b2b; }
}

._login .abroad_{ text-align: center; width: 100%; max-width: 400px; margin: 0 auto; margin-top: 65px; }
._login .abroad_ > p{ font-size: 20px; letter-spacing: -0.045em; color: #888888; font-weight: 600; cursor: pointer; transition-duration: 0.2s; }
._login .abroad_ > a{ width: 100%; background-color: #333333; padding: 22px 0; font-size: 20px; font-weight: 500; display: block; text-align: center; border-radius: 15px; margin-top: 20px; transition-duration: 0.2s; position: relative; display: none; opacity: 0; }

._login .abroad_ > a.on{ opacity: 0; display: block; }
._login .abroad_ > a.on.opa{ opacity: 1; }


@media screen and (min-width: 821px){
    ._login .abroad_ > a:hover{ background-color: #d92b2b; }
    ._login .abroad_ > p:hover{ color: #fff; }
}


.my_form > li._verif_confirm{ font-size: 1.86vw; font-weight: 700; justify-content: center; word-break: keep-all; padding: 60px 30px; text-align: center; line-height: 1.3; }
.my_form > li._verif_confirm.bg{ background-color: #111; }

@media screen and (min-width: 1920px){
    .my_form > li._verif_confirm{ font-size: 30px; }
}

@media screen and (max-width: 1280px){
    .my_form > li._verif_confirm{ font-size: 24px; }
}

@media screen and (max-width: 820px){
    .my_form > li._verif_confirm{ font-size: 20px; }
}


/* 회원가입 폼 */
._login{ position: relative; }
._login .wrap{ position: relative; z-index: 1; }
._login .inner900{ width: 100%; max-width: 900px; margin: 0 auto; }
._login .sign_form{ margin-top: 80px; box-sizing: border-box; width: 100%; }
._login .sign_form > li{ display: flex; justify-content: space-between; position: relative; margin-bottom: 20px; }
._login .sign_form > li:last-of-type{ margin-bottom: 0; }
._login .sign_form > li label{ width: 170px; flex-shrink: 0; font-size: 18px; font-weight: 500; padding-top: 15px; cursor: pointer; }
._login .sign_form > li .sf_wrap{ position: relative; width: 100%; }
._login .sign_form > li .sf_wrap input{ width: 100%; background: none; background-color: #333; color: #fff; font-family: 'Pretendard'; font-weight: 400; letter-spacing: -0.045em; font-size: 16px; border: none; height: 50px; padding: 0 20px; box-sizing: border-box; border-radius: 15px; }
._login .sign_form > li .sf_wrap input::placeholder{ font-size: 16px; color: rgba(255,255,255,0.4); }
._login .sign_form > li .sf_wrap button{ font-size: 16px; font-family: 'Pretendard'; letter-spacing: -0.045em; color: #333; background: none; background-color: #777777; border-radius: 15px; padding: 15.5px 0; box-sizing: border-box; position: absolute; left: calc(100% + 10px); top: 0; border: none; width: 100px; text-align: center; cursor: pointer; }
._login .sign_form > li .sf_wrap > p{ font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 10px; display: none; }
/* ._login .sign_form > li.fix .sf_wrap{ pointer-events: none; } */
._login .sign_form > li.fix .sf_wrap input{ background-color: #111; color: rgba( 255,255,255,0.4 ); }
._login .sign_form > li .sf_wrap.flex{ width: 100%; display: flex; justify-content:space-between; }
._login .sign_form > li .sf_wrap .sel{ width: calc(210 / 645 * 100%); position: relative; cursor: pointer; }
._login .sign_form > li .sf_wrap .sel input{ background-image: url(/img/mypage/select_icon.png); background-position: right 20px center; background-repeat: no-repeat; position: relative; pointer-events: none; }
._login .sign_form > li .sf_wrap .sel .scroll{ position: absolute; width: 100%; top: 75%; padding: 15px 10px; background-color: #333; border-radius: 0 0 15px 15px; box-shadow: 10px 10px 10px rgba(0,0,0,0.3); box-sizing: border-box; z-index: 3; display: none; }

._login .sign_form > li .sf_wrap .sel .select{ width: 100%; max-height: 350px; box-sizing: border-box; overflow-y: auto; }

._login .sign_form > li .sf_wrap .sel .select::-webkit-scrollbar{ width: 8px; border-radius: 10px; background-color: #333; }
._login .sign_form > li .sf_wrap .sel .select::-webkit-scrollbar-thumb{ width: 8px; border-radius: 10px; background-color: #000; }

._login .sign_form > li .sf_wrap .sel .select li{ border-radius: 20px; padding: 10px; font-size: 16px; letter-spacing: -0.045em; }

._login .sign_form > li .sf_wrap > a{ display: block; width: calc(200 / 645 * 100%); border-radius: 15px; background-color: #777; padding: 30px 0; text-align: center; transition-duration: 0.2s; }

._login .sign_form > li .sf_wrap > a.on { background-color: #d92b2b; }
._login .sign_form > li .sf_wrap > a i{ font-size: 32px; }
._login .sign_form > li .sf_wrap > a span{ font-size: 18px; letter-spacing: -0.045em; margin-top: 12px; display: block; }

._login .sign_form > li.chk_ .sf_wrap{ display: flex; justify-content: flex-end; flex-wrap: wrap; }
._login .sign_form > li.chk_ .sf_wrap input[type="checkbox"]{ width: 14px; height: 14px; border-radius: 50%; border: 1px solid #888; display: block; margin: 0; margin-right: 5px; padding: 0; background-color: rgba(0,0,0,0); }
._login .sign_form > li.chk_ .sf_wrap > h4{ width: 100%; font-size: 16px; letter-spacing: -0.045em; height: 50px; display: flex; align-items: center; justify-content: flex-end; color: #777;}
._login .sign_form > li.chk_ .sf_wrap label{ color: #888; font-size: 16px; letter-spacing: -0.045em; padding-top: 0; width: auto; }
._login .sign_form > li.chk_ .sf_wrap span{ text-decoration: underline; margin-left: 5px; text-underline-position: under; font-size: 14px; letter-spacing: -0.045em; cursor: pointer; }

._login .sign_form > li.chk_ .sf_wrap input[type="checkbox"]:checked{ border-color: #fff; background-color: #fff; }
._login .sign_form > li.chk_ .sf_wrap input[type="checkbox"]:checked ~ label{ color: #fff; }

@media screen and (min-width: 821px){
    ._login .sign_form > li .sf_wrap .sel .select li:hover{ background-color: #111; }
    ._login .sign_form > li .sf_wrap > a:hover{ filter: brightness(1.1); }
}

/* ._login .sign_form ~ .bigBtnWrap{ max-width: 645px; margin: 0 auto; margin-top: 40px; } */

@media screen and (max-width: 820px){
    ._login .sign_form > li .sf_wrap .sel .select li{ font-size: 14px; padding: 10px 0; }
	._login .sign_form > li.chk_ .sf_wrap > h4{ font-size: 13px; line-height: 1.3; }
}


/* 회원가입 후 안내 */
._login .sign_note_{ width: 100%; text-align: center; }
._login .sign_note_ h1{ font-size: 20px; font-weight: 600; letter-spacing: -0.045em; }
._login .sign_note_ > dl{ margin-top: 30px; }
._login .sign_note_ > dl dt{ font-size: 24px; font-weight: 600; letter-spacing: -0.045em; line-height: calc(40 / 24); }
._login .sign_note_ > dl dt span{ text-decoration: underline; text-underline-position: under; }
._login .sign_note_ > dl dd{ font-size: 14px; letter-spacing: -0.045em; color: #cccccc; line-height: calc(20 / 14); margin-top: 15px; word-break: keep-all; }

._login .sign_note_._find > dl{ background-color: #333; border-radius: 15px; padding: 30px 20px; box-sizing: border-box; }

._login .noteBg_{ width: 100%; position: absolute; z-index: 0; background-position: top center; background-size: cover; height: 100%; top: 0; left: 0; }

._login .sign_note_ > dl dt.chk{ width: 100%; max-width: 640px; margin: 0 auto; margin-top: 35px; border-radius: 10px; border: 1px solid #888888; font-size: 16px; letter-spacing: -0.045em; display: flex; justify-content: center; padding: 15px 0; }
._login .sign_note_ > dl dt.chk .chkwrap{ margin-right: 50px; display: flex; align-items: center;  }
._login .sign_note_ > dl dt.chk .chkwrap:last-of-type{ margin-right: 0; }
._login .sign_note_ > dl dt.chk .chkwrap input{ width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box; background-color: #fff; margin: 0; padding: 0; background-image: url(/img/sub/chk_black.png); background-position: center; background-repeat: no-repeat; opacity: 0.6; }
._login .sign_note_ > dl dt.chk .chkwrap label{ opacity: 0.4; margin-left: 5px; cursor: pointer; }
._login .sign_note_ > dl dt.chk .chkwrap input:checked{ opacity: 1; }
._login .sign_note_ > dl dt.chk .chkwrap input:checked ~ label{ opacity: 1; }


@media screen and (max-width: 1280px){
    ._login{ padding: 150px 0; }
    ._login .signType_{ padding: 0; }
    ._login .sign_note_ > dl dt{ font-size: 20px; }
    
}

@media screen and (max-width: 900px) {
    ._login .signType_{ justify-content: space-between; }
    ._login .signType_ > a {padding: 0 20px; height: 230px; width: 49%;}
    ._login .signType_ > a h5 {font-size: 25px;}
    ._login .signType_ > a p {font-size: 16px;}
    
    ._login.find .sign_form {padding-right: 0; }
    ._login.find .sign_form > li{flex-direction: column;}
    ._login.find .sign_form > li label {padding: 10px 0;}
}

@media screen and (max-width: 820px) {
    ._login .inner900 {width: 95%;}
    ._login .sign_form {padding-right: 0px; margin-top: 30px;}
    ._login .sign_form > li {flex-direction: column;}
    ._login .sign_form > li label {padding: 20px 0;}
    ._login.find .sign_form > li label{ font-size: 16px; }
    ._login .sign_form > li .sf_wrap input { font-size: 14px; padding: 0 10px; height: 40px; border-radius: 10px;}
    ._login .sign_form > li .sf_wrap.sf_id input { width: calc(100% - 100px); }
    ._login .sign_form > li .sf_wrap button { width: 80px; right: 0; left: auto; padding: 12px 0; border-radius: 10px; font-size: 14px; }
    ._login .sign_form > li .sf_wrap .sel input {padding: 0 10px;}

    ._login .sign_note_ > dl dt.chk{ font-size: 14px; }
    ._login .bigBtnWrap > a{ font-size: 18px; padding: 15px 0; border-radius: 10px; }
}

@media screen and (max-width: 500px) {
    ._login h3.title {font-size: 25px;}
    ._login .loginLinks li > a {font-size: 14px; padding: 0 18px;}
    ._login .bigBtnWrap > a {padding: 20px 0;}
    ._login .snsLogin > p {font-size: 14px;}

    ._login .signType_ > a {padding: 0 5px; height: 200px; width: 49%;}
    ._login .signType_ > a > .icon {scale: 0.8;}
    ._login .signType_ > a h5 {font-size: 18px; margin-top: 15px;}
    ._login .signType_ > a p { font-size: 13px;}

    ._login .sign_form > li label { padding: 10px 0; font-size: 14px; }
    ._login .sign_form > li .sf_wrap.sf_id input { width: calc(100% - 90px); }
    ._login .sign_form > li .sf_wrap > a {padding: 30px 10px;}
    ._login .sign_form > li .sf_wrap > a+a {margin-left: 5px;}
    ._login .sign_form > li .sf_wrap > a span {font-size: 14px; word-break: keep-all;}

    ._login .sign_note_ > dl dt {font-size: 18px; word-break: keep-all;}
    ._login .sign_note_ > dl dt.chk .chkwrap{ margin-right: 30px; }

    ._login .abroad_ > p{ font-size: 14px; }
    ._login .abroad_ > a{ font-size: 18px; padding: 15px 0; }
}

@media screen and (max-width: 400px) {
    ._login {padding: 120px 0;}
    ._login .bigBtnWrap > a {font-size: 16px; padding: 15px 0;}
}

@media screen and (max-width: 300px) {
    ._login .snsLogin > p {font-size: 17px;}

    ._login .signType_ > a {padding: 0 6px;}
    ._login .signType_ > a h5 {font-size: 16px;}
    ._login .abroad_ > p {font-size: 18px;}
    ._login .abroad_ > a {font-size: 18px;}
}