@charset "utf-8";

#member{position:relative;padding:120px 15px;}
#member .header{line-height:67px;font-size:48px;font-weight:300;color:#c5a880;text-align:center;margin:0 0 80px 0;font-family: 'Bookk', sans-serif;}
#member .header span{display:block;margin:24px 0 0 0;line-height:22px;font-size:16px;font-weight:500;color:#222222;}
#member .login{width:480px;max-width:100%;margin:0 auto;}
#member .login .form{}
#member .login .form dl{}
#member .login .form dl + dl{margin-top:16px;}
#member .login .form dt{line-height:20px;font-size:14px;font-weight:300;color:#111111;margin:0 0 6px;}
#member .login .form dd{}
#member .login .form dd .inp{}
#member .login .form dd .inp input[type="text"],
#member .login .form dd .inp input[type="password"]{display:block;padding:10px;width:100%;height:42px;border-radius:0;border:1px solid #d2d2d2;background:#ffffff;line-height:21px;font-size:15px;color:#111111;}
#member .login .button{margin:24px 0 0 0;}
#member .login .button button{display:flex;align-items:center;justify-content:center;width:100%;height:49px;border-radius:0;background:#000000;font-size:18px;font-weight:100;color:#ffffff;}
#member .login .tool{margin:16px 0 0 0;display:flex;justify-content:space-between;align-items:center;}
#member .login .tool .lt,
#member .login .tool .rt{display:flex;align-items:center;gap:10px;}
#member .login .tool a{line-height:21px;font-size:15px;color:#111111;font-weight:300;}
#member .login .tool a strong{font-weight:600;color:#c5a880;}

#member .social{margin:80px auto 0;width:480px;max-width:100%;border:0;}
#member .social .tit{padding:0 0 8px 0;line-height:25px;font-size:18px;font-weight:500;color:#111111;border-bottom:1px solid #d2d2d2;text-align:center;}
#member .social .con{padding:16px 0;margin:0;display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid #d2d2d2;}
#member .social .con > a{display:flex;align-items:center;justify-content:center;margin:0;width:calc(33.33% - 3.33px);height:46px;border:1px solid #e0e0e0;border-radirus:0;gap:8px;}
#member .social .con > a .ico{width:20px;height:20px;display:block;}
#member .social .con > a .txt{font-size:16px;font-weight:300;color:#000000;letter-spacing:0;}
#member .social .con > a.sns-naver{border:1px solid #42A76E;background:#42A76E;}
#member .social .con > a.sns-naver .ico{background:url("../img/member/icon_naver.svg") no-repeat 50% 50% / contain;}
#member .social .con > a.sns-naver .txt{color:#ffffff;}
#member .social .con > a.sns-kakao{border:1px solid #F8BF3B;background:#F8BF3B;}
#member .social .con > a.sns-kakao .ico{background:url("../img/member/icon_kakao.svg") no-repeat 50% 50% / contain;}
#member .social .con > a.sns-kakao .txt{color:#312302;}
#member .social .con > a.sns-google{border:1px solid #4378DE;background:#ffffff;}
#member .social .con > a.sns-google .ico{background:url("../img/member/icon_google.svg") no-repeat 50% 50% / contain;}
#member .social .con > a.sns-google .txt{color:#4378DE;}

#member .register{margin:0 auto 0;width:480px;max-width:100%;}
#member .register .agree{}
#member .register .agree dl{}
#member .register .agree dl + dl{margin-top:40px;}
#member .register .agree dt{margin:0 0 8px 0;}
#member .register .agree dd{}
#member .register .agree dd + dd{margin-top:8px;}
#member .register .agree .tit{line-height:22px;font-size:16px;font-weight:500;color:#111111;}
#member .register .agree .txt{padding:24px 16px;border:1px solid #d2d2d2;background:#ffffff;height:178px;overflow-y:auto;}
#member .register .agree .chk{display:flex;align-items:center;gap:8px;cursor:pointer;}
#member .register .agree .chk input{display:none;}
#member .register .agree .chk input ~ i{position:relative;display:block;width:16px;height:16px;border-radius:2px;border:1px solid #d2d2d2;}
#member .register .agree .chk input ~ span{line-height:16px;font-size:14px;font-weight:300;color:#111111;}
#member .register .agree .chk input:checked ~ i{background:#000000;border-color:#000000;}
#member .register .agree .chk input:checked ~ i:before{content:'';position:absolute;top:1px;left:1px;width:12px;height:12px;background:url("../img/sub/checked.svg") no-repeat center / contain;}
#member .register .all{margin:24px 0;padding:24px 0 0 0;}
#member .register .all .chk{display:flex;align-items:center;gap:8px;cursor:pointer;}
#member .register .all .chk input{display:none;}
#member .register .all .chk input ~ i{position:relative;display:block;width:16px;height:16px;border-radius:2px;border:1px solid #d2d2d2;}
#member .register .all .chk input ~ span{line-height:16px;font-size:14px;font-weight:700;color:#111111;}
#member .register .all .chk input:checked ~ i{background:#000000;border-color:#000000;}
#member .register .all .chk input:checked ~ i:before{content:'';position:absolute;top:1px;left:1px;width:12px;height:12px;background:url("../img/sub/checked.svg") no-repeat center / contain;}
#member .register .form{margin:0 0 40px 0;}
#member .register .form dl{}
#member .register .form dl + dl{margin-top:16px;}
#member .register .form dt{line-height:20px;font-size:14px;font-weight:300;color:#111111;margin:0 0 6px;}
#member .register .form dt em{color:#E4282E;}
#member .register .form dd{}
#member .register .form dd .inp{}
#member .register .form dd .inp input[type="text"],
#member .register .form dd .inp input[type="password"]{display:block;padding:10px;width:100%;height:42px;border-radius:0;border:1px solid #d2d2d2;background:#ffffff;line-height:21px;font-size:15px;color:#111111;}
#member .register .result{display:flex;flex-direction:column;align-items:center;text-align:center;margin:80px 0;}
#member .register .result .icon{width:40px;height:40px;margin:0 0 16px 0;background:url("../img/sub/complete.svg") no-repeat 50% 50% / contain;}
#member .register .result .title{line-height:67px;font-size:48px;font-weight:300;color:#c5a880;margin:0 0 16px 0;font-family: 'Bookk', sans-serif;}
#member .register .result .text{line-height:22px;font-size:16px;font-weight:500;color:#222222;}
#member .register .result .button{margin:64px 0 0 0;}
#member .register .result .button .btn{flex:0 0 auto;width:161px;}
#member .register .button{margin:24px 0 0 0;display:flex;gap:4px;align-items:center;justify-content:center;}
#member .register .button button,
#member .register .button a{flex:1;display:flex;align-items:center;justify-content:center;width:100%;height:49px;border-radius:0;font-size:18px;font-weight:200;}
#member .register .button .btn_01{background:#000000;color:#ffffff;border:1px solid #000000}
#member .register .button .btn_02{background:#ffffff;color:#434343;border:1px solid #D2D2D2}

#wrap #captcha{display:flex;gap:8px 4px;flex-wrap:wrap;}
#wrap #captcha #captcha_img{margin:0;width:94px;height:42px;border:1px solid #D2D2D2;}
#wrap #captcha #captcha_key{margin:0;width:calc(100% - 94px - 42px - 42px - 4px - 4px - 4px);height:42px;border:1px solid #d2d2d2;}
#wrap #captcha #captcha_mp3{margin:0;width:42px;height:42px;border-radius:0;border:1px solid #d2d2d2;background-color:#eaeaea;}
#wrap #captcha #captcha_reload{margin:0;width:42px;height:42px;border-radius:0;border:1px solid #d2d2d2;background-color:#eaeaea;}
#wrap #captcha #captcha_info{width:100%;line-height:17px;font-size:12px;color:#666666;}

@media all and  (max-width:768px) {

    #member{position:relative;padding:60px 15px;}
    #member .header{line-height:45px;font-size:32px;margin:0 0 40px;}
    #member .header span{margin:16px 0 0 0;line-height:21px;font-size:15px;font-weight:300;}
    #member .social{margin:60px 0 0 0;}
    #member .register{}
    #member .register .result{margin:60px auto;align-items:stretch;}
    #member .register .result .icon{margin:0 auto 16px;}
    #member .register .result .title{line-height:45px;font-size:32px;margin:0 0 8px 0;}
    #member .register .result .text{line-height:21px;font-size:15px;}
    #member .register .result .button{}
    #member .register .result .button .btn{width:100%;}

}