@charset "utf-8";

/* intro */
.intro_wrap {width: 100vw; height: 100vh; background: url('/images/etc/bg_intro.jpg') no-repeat center center; background-size: cover;}
.intro_navi {display: flex; align-items: center; position: absolute; width: calc(100vw - 200px); left: 50%; bottom: 100px; transform: translate(-50%, 0); justify-content: space-between}
.intro_navi .link {width: calc(50% - 10px); display: flex; align-items: flex-start; flex-direction: column; background: #fff; border-radius: 20px; padding: 40px; flex-shrink: 0; box-sizing: border-box}
.intro_navi .link .txt {color: #9da0a5; display: block; margin-bottom: 10px}
.intro_navi .link .title {display: flex; align-items: center; font-size: 28px; font-weight: 600}
.intro_navi .link .title .ico_24 {margin-left: 5px}

/* login */
.login_wrap {display: flex; align-items: flex-start; flex-wrap: wrap; width: 100%; background: #fff}
.login_wrap .info_area {width: calc(100% - 560px); height: 100%; background: #163989; border-top-right-radius: 80px; border-bottom-right-radius: 80px; color: #fff}
.login_wrap .info_area .slide_wrap {display: flex; align-items: center; justify-content: center; height: 100%}
.login_wrap .info_area .slide_wrap .row {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center}
.login_wrap .info_area .slide_wrap .row dt {font-size: 26px; font-weight: 600; margin-bottom: 10px}
.login_wrap .info_area .slide_wrap .row dd {font-size: 20px; font-weight: 300}

.login_wrap .input_area {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 560px; height: 100%; flex-shrink: 0; box-sizing: border-box; padding: 100px} 
.login_wrap .input_area .logo {display: block; width: 150px; height: 75px; margin:0 auto 50px; background: url('/images/common/logo/logo_full.svg') no-repeat center center; background-size: contain;}
.login_wrap .input_area input {margin-bottom: 10px}
.login_wrap .input_area .btn_r {margin-top: 20px; width: 100%}
.login_wrap .in_sns {margin-top: 50px}

.login_wrap .in_sns .txt {text-align: center; margin-bottom: 20px}
.sns_list {display: flex; align-items: center; justify-content: center}
.sns_list .sns {display: inline-block; width: 50px; height: 50px; margin: 0 5px}
.sns_list .sns.naver {background: url('/images/common/sns/naver.svg') no-repeat center center; background-size: contain;}
.sns_list .sns.kakao {background: url('/images/common/sns/kakao.svg') no-repeat center center; background-size: contain;}
.sns_list .sns.facebook {background: url('/images/common/sns/facebook.svg') no-repeat center center; background-size: contain;}
.sns_list .sns.apple {background: url('/images/common/sns/apple.svg') no-repeat center center; background-size: contain;}
.sns_list .sns.google {background: url('/images/common/sns/google.svg') no-repeat center center; background-size: contain;}

.login_wrap .in_etc {display: flex; align-items: center; justify-content: center; margin-top: 50px}
.login_wrap .in_etc a {display: block; padding: 10px}

/* 회원가입 */
.inner_600 {width: 600px; margin: auto}
.inner_760 {width: 760px; margin: auto}

.join_wrap {display: flex; align-items: flex-start; flex-wrap: wrap; flex-direction: column; width: 100%; height: 100%; background: #fff;overflow-y: scroll;  min-height: 100vh}
.join_wrap .head {position: fixed; z-index: 10; left: 0; top:0; width: 100%; background: #fff}
.join_step {width: 100%}
.join_step .list {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; flex-wrap: wrap; padding: 0 100px; box-sizing: border-box}
.join_step .list:before {content: ""; height: 2px; background: #ddd; position: absolute; left: 0; right: 0; bottom: 10px}
.join_step .list .step {position: relative; width: 20%; text-align: center; background: url('/images/etc/input_check_full.svg') no-repeat bottom center; background-size: 20px; padding-bottom: 30px; z-index: 1; color: #9da0a5}
.join_step .list .step.on {background: url('/images/etc/input_check_navy.svg') no-repeat bottom center; background-size: 20px; color: #163989; font-weight: 600}
/* 23-11-18 LEE */
.join_step .list .step2 {position: relative; width: 20%; text-align: center; background: url('/images/etc/input_check_full.svg') no-repeat bottom center; background-size: 20px; padding-bottom: 30px; z-index: 1; color: #9da0a5}
.join_step .list .step2.on {background: url('/images/etc/input_check_navy.svg') no-repeat bottom center; background-size: 20px; color: #163989; font-weight: 600}

/*.join_wrap .top_navi {display: flex; align-items: center; flex-wrap: wrap; width: 100%; height: 80px; box-sizing: border-box; padding: 0 20px}*/
.join_wrap .top_navi {display: flex; align-items: center; flex-wrap: wrap; width: 100%; height: 50px; box-sizing: border-box; padding: 0 20px}
.join_wrap .top_navi .btn_prev {display: flex; align-items: center; font-size: 20px}

.join_wrap .cont {width: 100%; text-align: center; margin-top: 200px; padding-bottom: 160px}
.join_wrap .cont .msg {text-align: center; margin-bottom: 50px; line-height: 1.5; font-size: 20px}
.flex_row {display: flex; align-items: center; justify-content: center;}
.join_wrap .cont .in_input .row { margin-bottom: 10px}
.join_wrap .cont .in_input .row:last-child {margin: 0}
.join_wrap .cont .in_input .row .btn_bor {padding: 0 30px; margin-left: 10px}
.join_wrap .btn_re {text-decoration: underline; display: inline-block; padding: 20px; color: #9da0a5}
.insert_msg {flex-shrink: 0; width: 100%; text-align: left; margin: 10px 0; padding: 0 20px; font-size: 14px; color: #9da0a5}
/* 20324-03-06 */
.join_wrap .cont2 {width: 100%; text-align: center; margin-top: 50px; padding-bottom: 160px}

.agree_area {margin-top: 50px; padding: 0 10px}
.agree_area .row {position: relative; display: flex; align-items: center; justify-content: space-between; padding: 5px 0}
.agree_area .row.all {border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 10px}
.agree_area .row.all strong {font-weight: 600; display: block;=}
.agree_area .row strong {font-weight: 300}
.agree_area .row input[type='checkbox'].check_full {width: 24px; height: 24px}

.profile_input {display: flex; align-items: flex-start; flex-wrap: wrap}
.profile_input .profile_area {width: 166px; margin-right: 50px; border-right: 1px solid #eee}
.profile_input .profile_area .title,
.profile_input .basic_area .title,
.profile_input .present_area .title {display: block; text-align: left; margin-bottom: 20px; font-weight: 600; font-size: 20px}
.profile_input .basic_area {width: calc(100% - 217px)}
.add_profile {display: block; width: 116px; height: 116px; background:#eee url('/images/common/big_add.svg') no-repeat center center; background-size: 30px; border-radius: 100%;cursor: pointer;}
.profile_input .present_area {margin-top: 50px; width: 100%}
.profile_input .present_area input {width: 100%}
.profile_input .present_area .txt {text-align: left; margin-bottom: 10px;}
.profile_input .present_area li:first-child {margin-bottom: 20px}
/* 24-01-10 LEE */
.image-upload > input {display: none;}
.upload_profile {display: flex; width: 116px; height: 116px; background-size: 30px; border-radius: 100%;text-align: center;justify-content: center;align-items: center;cursor: pointer;}
.upload_profile img {margin: auto; display: block;}

/* 24-01-09 LEE */
.errmsg {flex-shrink: 0; width: 100%; text-align: left; margin: 10px 0; padding: 0 20px; font-size: 14px; font-weight: 700; color: #FF0000}
.okmsg {flex-shrink: 0; width: 100%; text-align: left; margin: 10px 0; padding: 0 20px; font-size: 14px; font-weight: 700; color: #0000FF}

.join_finish dt {font-size: 30px; font-weight: 600; display: block; margin-bottom: 20px; padding-top: 100px; background: url('/images/etc/input_check_navy.svg') no-repeat top center; background-size: 50px;}
.join_finish dd {line-height: 1.5; font-size: 20px; color: #5d6066}
.join_finish .btn_r {width: 400px; margin-top: 50px}

/******231113 인트로/로그인 수정*******/

/*intro*/
.intro-wrap{width:100%;height:100vh;overflow:hidden;}
.intro-wrap>div{width:50%;}
.intro-wrap .intro-top{display:flex;width:100%;height: calc(30% + 50px);justify-content:center;}
.intro-wrap .intro-top-txt{display:flex;width:100%;align-items:center;justify-content: center;flex-direction: column;}
.intro-wrap .intro-top>img{position:relative;right:-50px;}
.intro-wrap .intro-top-txt p{margin-top:21px;font-size:24px;font-weight:700;color:#5d6066;}
.intro-wrap .intro-con{display:flex;position:relative;top:-50px;width:100%;height:70%;border-radius: 96px 96px 0px 0px;background:#163989;align-items: center;justify-content:center;flex-direction: column;}
.intro-wrap .intro-con .con-flex{display:flex;align-items: center;justify-content: center;}
.intro-wrap .intro-con .con-flex>img{margin-left:160px;}
.intro-wrap .intro-con-txt p{font-size:24px;color:#fff;font-weight:700;}
.intro-wrap .intro-con-txt p span{font-weight:400;}
.intro-skip-btn{display:flex;position:absolute;bottom:50px;left:50%;transform:translateX(-50%);width:142px;height:60px;align-items:center;justify-content:center;border-radius:58px;border:1px solid #fff;color:#fff;font-size:20px;font-weight:700;}

/*login*/
.login_wrap{height:100vh;}
.login_wrap .info_area{overflow:hidden;background:none;}
.pop-joininfo-btn{display:flex;width:80px;margin-top:20px;padding:6px 15px;align-items: center;justify-content:center;border: 1px solid #CACACA;border-radius: 44px;font-size:14px;color:#7a7a7a;}
.login-swip-nxt{cursor: pointer;}
.login-swip .swiper-slide{background:#163989;}
.login-swip .img-wrap{display:flex;height:42%;background:#F4F4F4;align-items:center;justify-content:center;}
.login-swip .img-wrap img{height:70%;}
.login-swip .txt-wrap{height:55%;padding:58px;background:#163989;box-sizing: border-box}
.login-swip{height:100%;}
.login-swip .txt-wrap h2{margin-bottom:20px;font-size:30px;font-weight:700;}/*font-size:30px;*/
.login-swip .txt-wrap p{font-size: 24px;line-height:1.3;font-weight:400;}/*font-size:22px;*/
.login-swip-bt{display:flex;position:absolute;bottom:58px;left:50%;align-items:center;justify-content:center;z-index:9;width:calc(100% - 116px);transform: translateX(-50%);}
.login-swip .swiper-pagination-bullet{background:#181D62;opacity:1;}
.login-swip .swiper-pagination-bullet-active{background:#fff;}
.login-swip-nxt{display:flex;width:103px;height:60px;border-radius:30px;border:1px solid #fff;align-items:center;justify-content:center;}/*padding:12px 20px;*/
.login-swip .s7 p:nth-child(2){margin-bottom:20px;}

.pop-joininfo{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:99;background:#fff;}
.pop-joininfo .pop-close{position:absolute;top:30px;right:30px;}
.pop-joininfo .pop-con{width:100%;height:100%;overflow-y: auto;}

/* 24-01-11 */
.fuc_wrap {position:relative;}
.inline {display:inline-block !important;}
.fuc_wrap input + .remain {
    position: absolute;
    right: 5%;
    top: 1.5rem;
    font-weight: bold;
    color: #ff001e;
    z-index: 1;
}