@charset "utf-8";
a:hover,
a:focus,
a:active{color: #000;}
#captcha{width:100%; display: flex; align-items: center; justify-content: space-between; flex-flow: row wrap;}
#captcha legend{display: none;}
#captcha #captcha_img{width: 160px; height: 62px;}
#captcha #captcha_key{width: calc(100% - 193px); height: 62px;margin: 0;background-image:none;}
#captcha #captcha_key:focus{outline:none;border: 1px solid #48CFAD;}
#captcha #captcha_info{ display: none !important;}
#captcha #captcha_mp3 { position: absolute; top: 0; left: 161px; margin: 0; padding: 0; width: 31px; height: 30px; border: 0; vertical-align: middle; overflow: hidden; cursor: pointer; background-position: -5px -6px;}
#captcha #captcha_reload { position: absolute; top: 31px; left: 161px; margin: 0; padding: 0; width: 31px; height: 30px; border: 0; vertical-align: middle; overflow: hidden; cursor: pointer; border-top: 1px solid #ccc; text-indent: -999px;background-position: -5px -46px;}
.required, textarea.required{background-image:none !important}
.input_wrap{width: 100%; height: fit-content; padding: 0; margin-bottom: 30px;}
.input_wrap label{font-size: 15px;margin: 0 0 5px;}
.input_wrap .wrap{position: relative;height: 50px;width: 100%; bottom: 0; border-radius: 50px; overflow: hidden;z-index: 2;background: #fff;border: 1px solid #e9bbfc;}
.input_wrap .wrap input{position: absolute;bottom: 0;left: 0; width: 100%;height: 100%;line-height: 48px;font-size: 15px;border:none; color:#000 !important; padding: 0 15px;background: unset;z-index: 2;}
.input_wrap .wrap input::-webkit-inner-spin-button { appearance: none; -moz-appearance: none; -webkit-appearance: none; }
.input_wrap .wrap input::placeholder { color: #aaaaaa;}
.input_wrap .wrap input:focus,
.input_wrap .wrap input:valid{ outline: none; box-shadow: unset;border: none;border-bottom: none;}
.input_wrap .wrap span{position: absolute;bottom: 0;left: 0; width: 0;height: 100%;z-index: 1;transition: 0.5s;background: #fdf7ff;}
.input_wrap .wrap input:focus ~ span, 
.input_wrap .wrap input:valid ~ span {width: 100%; }
.input_wrap.readonly label {color: #777 !important;}
.input_wrap.readonly .wrap{border: 1px solid #ddd;}
.input_wrap.readonly .wrap span {width: 100%;background: #eee !important; }
.input_wrap.readonly .wrap input {color: #777 !important;}
.input_wrap.unable label {color: #777 !important;}
.input_wrap.unable .wrap{border: 1px solid #ddd;}
.input_wrap.unable .wrap span {width: 100%;background: #eee !important; }
.input_wrap.unable .wrap input {color: #777 !important;}

/* 로그인 시작 */
#mb_login{padding-bottom: 100px;}
#mb_login .logo_wrap{margin: 100px 0;}
#mb_login .logo_wrap img.icon{width: 40px; height: 40px; margin: 0 auto; display: block;}
#mb_login .logo_wrap img.text{height: 41px;width: 100px; display: block; margin: 15px auto 30px;}
#mb_login .logo_wrap p{font-size: 17px; width: 100%; text-align: center; line-height: 21px;}
#mb_login form{width: calc(100% - 30px);max-width: 400px;margin: 0 auto;}
#mb_login form input#login_pw{padding-right: 50px;}
#mb_login form>img{width: 50%; max-width: 250px;margin: 0 auto 50px;display: block;}
#mb_login form .input_wrap .eyes{width: 50px; height: 50px; position: absolute; right: 0; bottom: 0; cursor: pointer; z-index: 9;}
#mb_login form .input_wrap .eyes i{display: block; text-align: center; line-height: 50px !important; height: 100%; font-size: 17px !important;}
#mb_login form .form-group.my-3{display: flex;justify-content: space-between;align-items: center;margin: 50px 0 10px !important;}
#mb_login form .form-group.my-3 .custom-switch{padding-left: 45px;cursor: pointer;}
#mb_login form .form-group.my-3 .custom-switch .custom-control-label{font-size: 13px;cursor: pointer;}
#mb_login form .form-group.my-3 .custom-switch .custom-control-label::before{width: 40px;height: 20px;border-radius: 20px !important;margin-top: 0;top: 0px;left: -45px;cursor: pointer;}
#mb_login form .form-group.my-3 .custom-switch .custom-control-label::after{margin-top: 1px;width: 14px;height: 14px;border-radius: 20px;top: 2px;left: -43px;}
#mb_login form .form-group.my-3 .custom-switch .custom-control-input:checked~.custom-control-label::after{-webkit-transform: translateX(22px);transform: translateX(22px);}
#mb_login form>a{display: block;width: fit-content;margin: 0 auto;font-size: 13px;}
#mb_login form .form-group.my-3>a{font-size: 13px;}
#mb_login form .form-group.border-bottom{padding-bottom: 20px;border-color: #bebebe !important;}
#mb_login form .form-group.border-bottom>button{font-size: 15px; padding: 0; height: 50px; line-height: 48px;border-radius: 50px;}
/* 로그인 끝 */

/* 회원가입 약관 시작 */
#register_skin{padding-bottom:100px;}
#register_skin .logo_wrap{margin: 100px 0;}
#register_skin .logo_wrap img.icon{width: 40px; height: 40px; margin: 0 auto; display: block;}
#register_skin .logo_wrap img.text{height: 41px;width: 100px; display: block; margin: 15px auto 30px;}
#register_skin .step{align-items: center;width: fit-content;margin: 0 auto;}
#register_skin .step span{width: 40px; height: 40px; text-align: center; line-height: 40px; font-size: 15px; color: #ddd; border-radius: 50px; background: #ddd;font-weight: bold;display: block;}
#register_skin .step span.atv{color: #fff;}
#register_skin .step span:nth-child(2){position: relative; top: 0; left: 0; margin: 0 20px; z-index: 1;}
#register_skin .step span:nth-child(2)::before{width: 20px; height: 1px; background: #ddd; left: -20px; top: 50%; transform: translateY(-50%); content: ""; display: block; position: absolute; z-index: -1;}
#register_skin .step span:nth-child(2)::after{width: 20px; height: 1px; background: #ddd; right: -20px; top: 50%; transform: translateY(-50%); content: ""; display: block; position: absolute; z-index: -1;}
#register_skin #lang_check{width: calc(100% - 30px);max-width: 1200px;margin: 0 auto;}
#register_skin #lang_check>p{font-size: 15px;text-align: center;margin: 50px 0 100px;word-break:keep-all;line-height: 18px;}
#register_skin #lang_check>.wrap{width: 100%;max-width: 300px; margin: 0 auto;}
#register_skin #lang_check>.wrap .select {display: inline-block;width: 100%; cursor: pointer;}
#register_skin #lang_check>.wrap .select .selected {display: flex; justify-content: space-between; padding: 0px 20px; background: #eee; border-radius: 70px; height: 70px; line-height: 70px;}
#register_skin #lang_check>.wrap .select .selected.atv{border-radius: 35px 35px 0 0;}
#register_skin #lang_check>.wrap .select .selected .selected-value {font-size: 15px;color: #666;font-weight: bold;display: flex;justify-content: space-between;align-items: center;width: calc(100% - 25px);}
#register_skin #lang_check>.wrap .select .selected .selected-value .img_wrap{position: relative; top: 0; left: 0; width: 30px; height: 30px; border-radius: 30px; overflow: hidden;}
#register_skin #lang_check>.wrap .select .selected .selected-value .img_wrap img{height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
#register_skin #lang_check>.wrap .select .selected i {font-size: 20px !important;line-height: 70px !important;color: #666;}
#register_skin #lang_check>.wrap .select ul {display: none;}
#register_skin #lang_check>.wrap .select ul::-webkit-scrollbar {width: 5px;}
#register_skin #lang_check>.wrap .select ul::-webkit-scrollbar-thumb {background-color: #b767d7;}
#register_skin #lang_check>.wrap .select ul::-webkit-scrollbar-track {background-color: #eee;}
#register_skin #lang_check>.wrap .select.active ul {display: revert-layer;background: #eee;overflow-y: auto;max-height: 300px;border-radius: 0px 0px 35px 35px;}
#register_skin #lang_check>.wrap .select ul li {width: 100%; font-weight: normal; font-size: 13px;}
#register_skin #lang_check>.wrap .select ul li:first-child{}
#register_skin #lang_check>.wrap .select ul li:hover { background: rgba(168, 156, 235, 0.35) }
#register_skin #lang_check>.wrap .select ul li a{width: 100%; justify-content: space-between; align-items: center; padding: 0px 20px; border-radius: 50px; height: 50px; line-height: 50px;}
#register_skin #lang_check>.wrap .select ul li a .img_wrap{position: relative; top: 0; left: 0; width: 30px; height: 30px; border-radius: 30px; overflow: hidden;}
#register_skin #lang_check>.wrap .select ul li a .img_wrap img{height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
#register_skin #lang_check>.wrap .select ul li a p{}
#register_skin #lang_check>span{font-size: 15px; padding: 0; height: 50px; line-height: 48px; border-radius: 50px;display: block;margin: 50px auto 0;width: 100%;max-width: 600px;}
#register_skin #fregister{display:none;width: calc(100% - 30px);max-width: 1200px;margin: 0 auto;}
#register_skin #fregister>.wrap{margin-top: 50px;}
#register_skin #fregister>.wrap>b{justify-content: space-between;align-items: center; width: 100%;height: 50px;line-height: 20px;padding: 0 20px;font-size: 15px; border: 1px solid #dee2e6; border-bottom: none;border-radius: 25px 25px 0 0;}
#register_skin #fregister>.wrap>b span{cursor: pointer;}
#register_skin #fregister>.wrap>.con{}
#register_skin #fregister>.wrap>.con .pd{height: 300px; overflow-y: auto;overflow-x: hidden;}
#register_skin #fregister>.wrap>.con #provision{width: 100%;}
#register_skin #fregister>.wrap>.con table{}
#register_skin #fregister>.wrap>.con table tbody{}
#register_skin #fregister>.wrap>.con table tbody tr{}
#register_skin #fregister>.wrap>.con table tbody tr th{}
#register_skin #fregister>.wrap>.con table tbody tr td{}
#register_skin .custom-checkbox{padding-right: 25px;padding-left: 0; margin-top: 10px;justify-content: flex-end; align-items: center;}
#register_skin .custom-checkbox input{}
#register_skin .custom-checkbox label{cursor: pointer;}
#register_skin .custom-checkbox label::before,
#register_skin .custom-checkbox label::after{width: 20px !important; height: 20px !important; top: 50% !important;left: unset; right: -25px !important; transform: translateY(-50%);}
#register_skin .custom-checkbox label span{padding: 0 !important;font-size: 13px;line-height: 1px;}
#register_skin .custom-checkbox label>b>span{font-size: 15px;line-height: 1px;}
#register_skin #fregister>.btn_wrap{justify-content: space-between; align-items: center;margin-top: 20px;}
#register_skin #fregister>.btn_wrap a,
#register_skin #fregister>.btn_wrap button{width: calc(50% - 5px); padding: 0; line-height: 48px; font-size: 15px;border-radius: 50px;}
#register_skin #fregister>.btn_wrap a{color: #b767d7 !important;}
/* 회원가입 약관 끝 */

/* 회원가입 양식 시작 */
#register_form{padding-bottom:100px;}
#register_form .logo_wrap{margin: 100px 0;}
#register_form .logo_wrap img.icon{width: 40px; height: 40px; margin: 0 auto; display: block;}
#register_form .logo_wrap img.text{height: 41px;width: 100px; display: block; margin: 15px auto 30px;}
#register_form .step{align-items: center;width: fit-content;margin: 0 auto 20px;}
#register_form .step span{width: 40px; height: 40px; text-align: center; line-height: 40px; font-size: 15px; color: #ddd; border-radius: 50px; background: #ddd;font-weight: bold;display: block;}
#register_form .step span.atv{color: #fff;}
#register_form .step span:nth-child(2){position: relative; top: 0; left: 0; margin: 0 20px; z-index: 1;}
#register_form .step span:nth-child(2)::before{width: 20px; height: 1px; background: #ddd; left: -20px; top: 50%; transform: translateY(-50%); content: ""; display: block; position: absolute; z-index: -1;}
#register_form .step span:nth-child(2)::after{width: 20px; height: 1px; background: #ddd; right: -20px; top: 50%; transform: translateY(-50%); content: ""; display: block; position: absolute; z-index: -1;}
#register_form>form{width: calc(100% - 40px);max-width: 1200px;margin: 0 auto;}
#register_form>form input#reg_mb_password{padding-right: 50px;}
#register_form>form input#reg_mb_password_re{padding-right: 50px;}
#register_form>form .eyes{width: 50px; height: 50px; position: absolute; right: 0; bottom: 0; cursor: pointer; z-index: 9;}
#register_form>form .eyes i{display: block; text-align: center; line-height: 50px !important; height: 50px; font-size: 17px !important; color: #adb5bd;}
#register_form>form .feed{width: 100%;font-size: 12px;color: #777; bottom: 5px; position: absolute; font-weight: normal;line-height: 11px;}
#register_form>form ul>.group{position: relative;}
#register_form>form ul>.group .input_wrap{display: flex;justify-content: space-between;align-items: center;flex-flow: row wrap;}
#register_form>form ul>.group .input_wrap .left{width: calc(100% - 60px);}
#register_form>form ul>.group .input_wrap .left input:focus ~ span, 
#register_form>form ul>.group .input_wrap .left input:valid ~ span {width: calc(100% - 60px);}
#register_form>form ul>.group .input_wrap .right{width: 50px;}
#register_form>form ul>.group .input_wrap .right button{width: 50px;height: 50px;}
#register_form>form ul>.group .input_wrap .right button i{font-size: 17px !important;}
#register_form>form ul>.group .input_wrap #daum_juso_pagemb_zip{top: -10px;margin: 5px 0px 40px !important;}
#register_form>form ul>.group .check_wrap{}
#register_form>form ul>.group .check_wrap>p{font-size: 15px;}
#register_form>form ul>.group .check_wrap>.custom-checkbox{width: 100%;padding: 0 !important;}
#register_form>form ul>.group .check_wrap>.custom-checkbox label{padding-left: 20px;color: #000;font-size: 13px;}
#register_form>form ul>.group .check_wrap>.custom-checkbox label::before{left: 0;top: 5px !important;}
#register_form>form ul>.group .check_wrap>.custom-checkbox label::after{left: 0;top: 5px !important;}
#register_form>form ul>.group .check_wrap>.custom-checkbox label{padding-left: 20px;color: #000;font-size: 13px;}
#register_form>form ul>.group .open_comment{display: block; padding-left: 25px;word-break:keep-all;}
#register_form>form ul>.list-group-item.pt-4{background: unset; border: none; padding: 0 !important; margin-bottom: 30px;}
#register_form>form ul>.list-group-item.pt-4>.form-group{margin: 0; display: flex; justify-content: space-between; align-items: center; flex-flow: row wrap;}
#register_form>form ul>.list-group-item.pt-4>.form-group>label{font-size: 15px;color: #48CFAD;font-weight: bold;display: block;width: 100%;padding: 0; max-width: unset; flex: unset;}
#register_form>form ul>.list-group-item.pt-4>.form-group>div{max-width: unset; width: 100%; flex: unset; padding: 0; }
#register_form>form ul>.list-group-item.pt-4>.form-group>div>div{}
#register_form form .btn_wrap{justify-content: space-between; align-items: center;margin-top: 50px;}
#register_form form .btn_wrap a,
#register_form form .btn_wrap button{width: calc(50% - 5px); padding: 0; line-height: 48px; font-size: 15px;border-radius: 50px;}
#register_form form .btn_wrap a{color: #b767d7 !important;}
/* 회원가입 양식 끝 */



/* 회원가입완료 시작 */
#register_result{padding: 0 15px;}
#register_result #logo_img{ height: 30px; width: 107px; margin: 20px auto 50px; display: block;}
#register_result>p{font-size: 20px; font-weight: bold;text-align: center;}
#register_result>p b{font-size: 30px; display: block; line-height: 45px;}
#register_result>span{font-size: 15px; color: #777; margin: 20px auto 100px; display: block; text-align: center;}
#register_result>div{}
#register_result>div img{display: block; margin: 0 auto 50px; width: 70%; max-width: 600px;}
#register_result>div p{text-align: center; font-size: 13px; color: #777; line-height: 15px; margin-bottom: 20px; word-break: keep-all;}
#register_result>a{color: #b767d7 !important;padding: 0;height: 50px;line-height: 48px;width: 100%;max-width: 300px;margin: 50px auto 0;display: block;border-radius: 50px;font-size: 15px;}
/* 회원가입완료 끝 */
@media screen and (max-width:500px){
    #register_skin #fregister>.wrap>b{justify-content: center;text-align: center;}
    #register_result #logo_img{margin: 20px 0 50px;}
    #register_result>p{text-align: left;}
    #register_result>span{text-align: left;margin: 20px auto 50px;}
    #register_result>div p{text-align: left;}
}