@charset "utf-8";

/* 로그인 ----------------------------------------------------------------------------------------------------*/
.LoginBoxAlign {display:table;height:calc(100vh - 372px);background-color:#f4f4fb;width: 100%;}
.LoginCntWrap, .JoinCntWrap {height:100%;display:table-cell;vertical-align:middle;}
.LoginCntWrap .LoginGroup {
    background-color:#fff;max-width:584px;width:100%;margin:auto;min-width:320px;
    border-radius:20px;-webkit-box-shadow:0px 0px 15px rgb(0 0 0 / 8%);-moz-box-shadow:0px 0px 15px rgb(0 0 0 / 8%);box-shadow:0px 0px 15px rgb(0 0 0 / 8%);
}
.LoginCntWrap .ImgBox {padding:70px 186px;max-width:956px;width:100%;position:relative;margin:auto;}
.LoginCntWrap .ImgBox::before, .LoginCntWrap .ImgBox::after {content:"";display:block;position:absolute;}
.LoginCntWrap .ImgBox::before {width:95px;height:345px;background:url(/image/member/img_login_l.png) 0 0 no-repeat;left:91px;bottom:196px;}
.LoginCntWrap .ImgBox::after {width:111px;height:235px;background:url(/image/member/img_login_r.png) 0 0 no-repeat;right:75px;bottom:191px;}
.LoginCntWrap .LoginGroup .FormBox {padding:70px 60px;}
.LoginCntWrap .LoginGroup h3.title, .JoinCntWrap h3.title {display:block;width:100%;text-align:center;font-family: sbfont;font-weight: 700;font-size:32px;color:#000;margin-bottom:50px;}
.LoginCntWrap .LoginGroup .FormBox ul {margin-bottom:18px;}
.LoginCntWrap .LoginGroup .FormBox ul li:first-child {margin-bottom:10px;}
.LoginCntWrap .LoginGroup .FormBox ul li input {width:100%;line-height:48px;}
.LoginCntWrap .LoginGroup .FormBox .check_box {margin-bottom:35px;}
.LoginCntWrap .LoginGroup .FormBox .btnTypeB {line-height:56px;border-radius:50px;width:100%;}
.LoginCntWrap .LoginGroup .FormBox .btn_group {padding-top:24px;font-size:15px;text-align:center;}
.LoginCntWrap .LoginGroup .FormBox .btn_group em {display:inline-block;height:12px;width:1px;background-color:#c6c6c6;margin:-3px 5% 0;vertical-align:middle;}
.LoginCntWrap .LoginGroup .InfoTitle {background-color:#8dc63f;text-align:center;padding:30px 0;border-bottom-left-radius:20px;border-bottom-right-radius:20px;position:relative;}
.LoginCntWrap .LoginGroup .InfoTitle h4 {font-size:35px;color:#fff;font-family:lato;font-weight:200;margin-bottom:8px;}
.LoginCntWrap .LoginGroup .InfoTitle h4 strong {font-weight:400;}
.LoginCntWrap .LoginGroup .InfoTitle span {font-size:21px;color:#d6e9c1;font-family:lato;font-weight:200;}
.LoginCntWrap .LoginGroup .InfoTitle::before, .LoginCntWrap .LoginGroup .InfoTitle::after {content:"";display:block;position:absolute;}
.LoginCntWrap .LoginGroup .InfoTitle::before {width:320px;height:180px;background:url(/image/member/img_space.png) 0 0 no-repeat;left:-168px;top:-49px;}
.LoginCntWrap .LoginGroup .InfoTitle::after {width:238px;height:173px;background:url(/image/member/img_frog.png) 0 0 no-repeat;right:-160px;top:-44px;z-index:1;}

/* 회원가입 -------------------------------------------------------------------------------------------------------- */
.JoinCntWrap {padding:70px 20px 100px;}
.JoinCntWrap .JoinFormGroup {max-width:584px;margin:auto;}
.JoinCntWrap .TopTxt {word-wrap: break-word;word-break:keep-all;overflow-wrap:break-word;font-size:16px;line-height:140%;padding:22px 0 13px 148px;position:relative;margin-bottom:35px;}
.JoinCntWrap .TopTxt strong {font-size:18px;color:#8dc63f;font-weight:600;display:block;}
.JoinCntWrap .TopTxt::before {
    content:"";display:block;width:127px;height:145px;position:absolute;left:0;bottom:0;background:url(/image/member/img_welcome.jpg) 0 0 no-repeat;
}
.NewJoinFormWrap li {margin-top:25px;}
.NewJoinFormWrap li label {display:block;width:100%;margin-bottom:7px;font-weight:400;color:#000;position:relative;padding-left: 12px;}
.NewJoinFormWrap li input, .NewJoinFormWrap li select {background-color:#fff;width:100%;}
.NewJoinFormWrap li input::placeholder, .NewJoinFormWrap li select::placeholder {color:#999;}
.NewJoinFormWrap .imp_txt {position:relative;padding-left: 12px;border-bottom:1px solid #33336e;padding-bottom:10px;color:#ed1c24;}
.NewJoinFormWrap li .btnTypeB {width:100%;}
.NewJoinFormWrap li .TxtInfo.PointColorA {color:#ff6c00;}
.NewJoinFormWrap li .TxtInfo {line-height:130%;color:#939393;word-wrap: break-word;word-break:keep-all;overflow-wrap:break-word;}

.AgreeWrap .title {display:flex;justify-content: space-between;align-items: center;margin-bottom:10px;}
.AgreeWrap .title strong {color:#000;font-weight:400;}
.AgreeWrap .title a {line-height:30px;display:block;padding:0 15px;border-radius:50px;background-color:#b0b0bd;color:#fff;font-size:14px;transition: all 0.3s ease-in-out 0s;}
.AgreeWrap .title a:hover {background-color:#686890;}
.AgreeWrap .AgreeList {background-color:#fff;height: 247px;font-size: 13px;border-radius:20px;margin-bottom:10px;border:1px solid #e8e8f1;}
.AgreeWrap .Check .imp {position:relative;padding-left: 12px;}
.JoinFormGroup .AllAgree {border-top:1px solid #dfdfe9;padding:10px 0 50px;}
.JoinFormGroup .AllAgree label {color:#000;font-size:16px;}
.JoinFormGroup .BtnGroup a {width:100%;display:block;}
.JoinFormGroup .BtnGroup a:first-child {margin-bottom:10px;}
.JoinFormGroup .BtnGroup.Withdrawal a:last-child {border-radius:50px;margin-top:30px;}
.JoinFormGroup .BtnGroup.Withdrawal {padding-top:30px;border-top:1px solid #cecedb;}

.AgreeInfoWrap {font-size:15px;line-height:150%;padding: 15px 10px;}

.JoinFormGroup .UserInfo {
    background-color:#fff;border-radius:20px;-webkit-box-shadow: 0px 0px 10px rgb(0 0 0 / 05%);-moz-box-shadow: 0px 0px 10px rgb(0 0 0 / 05%);box-shadow: 0px 0px 10px rgb(0 0 0 / 05%);
    padding:0 20px;
}
.JoinFormGroup .UserInfo li {padding:20px 0;text-align:center;line-height:130%;word-wrap: break-word;word-break:keep-all;overflow-wrap:break-word;}
.JoinFormGroup .UserInfo li:first-child {font-size:17px;font-weight:300;color:#000;border-bottom:1px solid #ebebeb;}
.JoinFormGroup .UserInfo li:first-child strong {color:#0074ec;font-weight:500;}
.JoinFormGroup .UserInfo li:last-child {font-size:14px;font-weight:300;color:#474747;}
.JoinFormGroup .UserInfo li:last-child strong {font-size:14px;font-weight:500;color:#000;}

.TermsBox {background-color:#fff;border-bottom-left-radius:20px;border-bottom-right-radius:20px;padding:20px;}


/* 모바일 ------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 840px){
    /* 로그인 */
    .LoginCntWrap .LoginGroup .InfoTitle::before, .LoginCntWrap .LoginGroup .InfoTitle::after {display:none;}

    
}

@media screen and (max-width: 800px){
    /* 로그인 */
    .LoginCntWrap .LoginGroup .FormBox {padding:60px 40px;}
}

@media screen and (max-width: 768px){
    /* 로그인 */
    .LoginCntWrap .ImgBox::before, .LoginCntWrap .ImgBox::after {display:none;}
    .LoginCntWrap .ImgBox {padding:50px 20px;}
}

@media screen and (max-width: 640px){
    /* 로그인 */
    .LoginCntWrap .LoginGroup {max-width:480px;}
    .LoginCntWrap .LoginGroup .InfoTitle {padding: 20px 0;}

    /* 약관 */
    .LoginCntWrap .LoginGroup h3.title, .JoinCntWrap h3.title {font-size: 30px;}
    .AgreeInfoWrap {font-size: 15px;}

    /* 회원가입폼 */
    .JoinCntWrap .TopTxt::before {bottom: 10px;}

    
}

@media screen and (max-width: 480px){
    /* 로그인 */
    .LoginCntWrap .LoginGroup .FormBox {padding: 50px 30px;}
    .LoginCntWrap .LoginGroup .InfoTitle {padding:15px 0;}
    .LoginCntWrap .LoginGroup .InfoTitle h4 {font-size: 30px;}
    .LoginCntWrap .LoginGroup .InfoTitle span {font-size: 18px;}
    .LoginCntWrap .LoginGroup .FormBox ul li input {line-height: 40px;}
    .LoginCntWrap .LoginGroup .FormBox .btnTypeB {line-height: 48px;}

    /* 약관 */
    .LoginCntWrap .LoginGroup h3.title, .JoinCntWrap h3.title {margin-bottom: 40px;}
    .AgreeInfoWrap {font-size: 15px;padding:0;}

    /* 회원가입폼 */
    .JoinCntWrap .TopTxt::before {display:none;}
    .JoinCntWrap .TopTxt strong {font-size: 16px;}
    .JoinCntWrap .TopTxt {padding:0;font-size: 15px;}
    .NewJoinFormWrap .imp_txt, .NewJoinFormWrap li .TxtInfo {font-size:14px;}
    .AgreeWrap .AgreeInfoWrap {padding: 15px 10px;}
    .AgreeWrap .AgreeList {height: 330px;}

    /* 가입완료 */
    .JoinFormGroup .UserInfo li {padding:15px 0;}
    .JoinFormGroup .UserInfo li:first-child {font-size: 16px;}
}

@media screen and (max-width: 400px){
    /* 로그인 */
    .LoginCntWrap .LoginGroup .FormBox .btn_group em {margin: -3px 3% 0;}
    .LoginCntWrap .LoginGroup {min-width:auto;}
    .LoginCntWrap .LoginGroup .FormBox {padding: 40px 20px;}
    .LoginCntWrap .LoginGroup .FormBox .btn_group {font-size:14px;}
}
@media screen and (max-width: 320px){
    /* 로그인 */
    .LoginCntWrap .LoginGroup .FormBox {padding: 30px 20px;}
    .LoginCntWrap .LoginGroup .FormBox .btnTypeB {line-height: 46px;}
    .LoginCntWrap .LoginGroup .FormBox .btn_group {padding-top: 20px;}
    .LoginCntWrap .LoginGroup .FormBox ul {margin-bottom:15px;}

    /* 약관 */
    .LoginCntWrap .LoginGroup h3.title, .JoinCntWrap h3.title {margin-bottom: 30px;font-size: 27px;}

    /* 회원가입폼 */
    .AgreeInfoWrap {font-size:14px;}
}