@charset "utf-8";
html{background: #e8f1e1;position: relative;min-height: 100vh;overflow-y:auto}
html::after{content: ""; width: 100%; height: 100%; position: fixed; bottom: 0px; left: 50%; transform: translateX(-50%); background-image: URL('../../../../img/main_bg.svg'); background-repeat: no-repeat; background-position: center bottom; background-size: 100%, cover; z-index: -1;}
body{background: none;}
.input_wrap{position: relative;width: 100%;top: 0;left: 0; padding-top: 25px; border-radius: 5px; overflow: hidden;margin-bottom: 30px;}
.input_wrap input{font-size: 15px;width: 100%;border:none; color:#000 !important; padding: 0 10px;height: 50px;line-height: 50px; background: #fff;position: relative;z-index: 5;border-radius: 5px;}
.input_wrap input::-webkit-inner-spin-button { appearance: none; -moz-appearance: none; -webkit-appearance: none; }
.input_wrap input::placeholder { color: #aaaaaa;}
.input_wrap input:focus { outline: none; box-shadow: unset;}
.input_wrap label{ position: absolute; left: 10px; font-size: 15px; bottom: 11px; margin-bottom: 0; transition: all .2s; z-index: 6;}
.input_wrap span{ display: block; position: absolute; bottom: 0; left: 0%; width: 0; height: 2px; border-radius: 2px; transition: 0.5s; z-index: 6;}
.input_wrap input:focus ~ label,
.input_wrap input:valid ~ label {bottom: 50px; left: 0;font-weight: bold;}
.input_wrap input:focus ~ span, 
.input_wrap input:valid ~ span {width: 100%; }
.input_wrap.readonly label {bottom: 50px; left: 0;font-weight: bold;}
.input_wrap.readonly span {width: 100%; }
.input_wrap.readonly input {background: unset !important;}
.input_wrap.unable label {bottom: 50px; left: 0;font-weight: bold;}
.input_wrap.unable span {width: 100%; }
.input_wrap.unable input {background: unset !important;}
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 #48b813;}
#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;}

#intro{position: fixed; width: 100vw; height: 100vh; top: 0; left: 0;z-index: 999999;background: #fff; background-image: URL('/../../img/intro_bg.svg'); background-repeat: no-repeat; background-size: cover; background-position: center;}
#intro .text{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: fit-content;}
#intro .text .span_wrap{position: relative; top: 0; left: 0; width: 400px;margin: 0 auto 100px;}
#intro .text .span_wrap span{position: absolute; background-repeat: no-repeat; background-size: inherit; background-position: center;}
#intro .text .span_wrap span:nth-child(1){background-image: URL('/../../img/intro_span1.svg'); right: 45px; top: 2px; width: 10px; height: 10px;-webkit-animation: intro1 0.5s infinite ease backwards; animation: intro1 0.5s infinite ease backwards;}
#intro .text .span_wrap span:nth-child(2){background-image: URL('/../../img/intro_span2.svg'); right: 33px; top: -2px; width: 14px; height: 14px;-webkit-animation: intro2 0.5s infinite ease backwards; animation: intro2 0.5s infinite ease backwards;}
#intro .text .span_wrap span:nth-child(3){background-image: URL('/../../img/intro_span3.svg'); right: 28px; top: 7px; width: 15px; height: 15px;-webkit-animation: intro3 0.5s infinite ease backwards; animation: intro3 0.5s infinite ease backwards;}
#intro .text .span_wrap img{width: 100%; animation: intro0 2s forwards;}
#intro .text>img{width: 50%;max-width: 350px; margin: 0 auto; display: block;}
#intro .text>p{font-size: 25px;margin: 50px auto 0; text-align: center;font-weight: bold;}
@-webkit-keyframes intro0 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes intro1 {
    0% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes intro2 {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}
@-webkit-keyframes intro3 {
    0% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}



#mb_login{width: calc(100% - 30px);max-width: 400px;margin: 0 auto;padding: 75px 0;}
#mb_login form{}
#mb_login form>img{width: 50%; max-width: 250px;margin: 0 auto 50px;display: block;}
#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;}

#register{width: calc(100% - 30px);max-width: 1200px;margin: 0 auto;padding: 75px 0;}
#register>form{}
#register>form>img{width: 50%; max-width: 250px;margin: 0 auto 50px;display: block;}
#register>form>.login-sns{margin-bottom: 50px !important;}
#register>form>.login-sns h2{height: 50PX;line-height: 50px;font-size: 13px;font-weight: bold;border-radius: 5px 5px 0px 0px;padding: 0px 15px;width: 100%;color: #fff;background: #48b813;text-align: left;}
#register>form>.login-sns .sns-wrap{width: 100%;text-align: center;background: #fff;border-radius: 0 0 5px 5px;height: fit-content;display: inline-block;}
#register>form>.login-sns .sns-wrap a{width: fit-content;height: fit-content; display: flex; justify-content: center; align-items: center; margin: 12px auto; color: #000; padding-right: 15px; background-size: 30px 30px; background-position: 10px;}
#register>form>.login-sns .sns-wrap a .txt{font-size: 13px; overflow: auto; line-height: 30px; position: unset;font-weight: bold;}
#register>form>.login-sns .sns-wrap a .ico{width: 50px;height: 50px;}
#register>form>.con{margin-bottom: 50px;}
#register>form>.con>b{display: block;; width: 100%; color: #fff; font-size: 13px; height: 50px; padding: 0 10px; border-radius: 5px 5px 0px 0px;line-height: 50px;}
#register>form>.con .page_wrap{background: #fff; padding: 20px 10px;}
#register>form>.con .page_wrap h5{font-size: 13px;}
#register>form .custom-checkbox{padding: 0;}
#register>form .custom-checkbox input{}
#register>form .custom-checkbox label{padding-left: 30px;color: #000;font-size: 13px;background: #f8f8f8;height: 50px;line-height: 50px; width: 100%;display: block;border-radius: 0px 0px 5px 5px;position: unset;border: none;cursor: pointer;}
#register>form .custom-checkbox label::before{left: 10px; top: 16px !important;}
#register>form .custom-checkbox label::after{left: 10px; top: 16px !important;}
#register>form>.con table{background: #fff; margin-bottom: 0 !important;min-width: unset !important;}
#register>form>.con table tbody{}
#register>form>.con table tbody tr{}
#register>form>.con table tbody tr th{}
#register>form>.con table tbody tr td{}
#register>form>.custom-checkbox label{background: unset; padding-left: 20px;width: fit-content;line-height: unset;height: unset;}
#register>form>.custom-checkbox label::before{left: 0px; top: 3px !important;}
#register>form>.custom-checkbox label::after{left: 0px; top: 3px !important;}
#register>form>.custom-checkbox label b{font-size: 15px; color: #000;}
#register>form .btn_wrap{display: flex;justify-content: space-between;align-items: center;flex-flow: row wrap;margin-top: 20px;}
#register>form .btn_wrap a,
#register>form .btn_wrap button{width: calc(50% - 5px);margin: 0;font-size: 15px;padding: 0; height: 50px; line-height: 48px;}


#register_form{width: calc(100% - 30px);max-width: 1200px;margin: 0 auto;padding: 75px 0;}
#register_form>form{}
#register_form>form>img{width: 50%; max-width: 250px;margin: 0 auto 50px;display: block;}
#register_form>form .feed{width: 100%;font-size: 12px;color: #000; bottom: 5px; position: absolute; font-weight: normal;}
#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; font-weight: bold;}
#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: #48b813;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{display: flex;justify-content: space-between;align-items: center;flex-flow: row wrap;margin-top: 50px;}
#register_form>form .btn_wrap a,
#register_form>form .btn_wrap button{width: calc(50% - 5px);margin: 0;font-size: 15px;padding: 0; height: 50px; line-height: 48px;}

#result_skin{padding-bottom: 75px;}
#result_skin h5{display: block;; width: 100%; color: #fff; font-size: 13px; height: 50px; padding: 0 10px; border-radius: 5px 5px 0px 0px;line-height: 50px;font-weight: bold;}
#result_skin li{border: none;word-break:keep-all;}
#result_skin a.btn{font-size: 15px;width: 100%;margin: 0;font-size: 15px;padding: 0; height: 50px; line-height: 48px;}

#mb_confirm{padding-bottom: 75px;}
#mb_confirm>div{}
#mb_confirm>div>form{}
#mb_confirm>div>form>ul{}
#mb_confirm>div>form>ul>h5{display: block; width: 100%; color: #fff; font-size: 13px; height: 50px; padding: 0 10px; border-radius: 5px 5px 0px 0px;line-height: 50px;font-weight: bold;}
#mb_confirm>div>form>ul>li{border: none;border-radius: 0px 0px 5px 5px;}
#mb_confirm>div>form>ul>li>p{font-size: 13px;word-break:keep-all;}
#mb_confirm>div>form>ul>li>p strong{}
#mb_confirm>div>form>ul>li.input_group{}
#mb_confirm>div>form>ul>li .input_wrap{padding-top: 50px;margin-bottom: 0;}
#mb_confirm>div>form>ul>li .input_wrap input{background:#f8f8f8}
#mb_confirm>div>form>ul>.btn_wrap{display: flex;justify-content: space-between;align-items: center;flex-flow: row wrap;margin-top: 20px;}
#mb_confirm>div>form>ul>.btn_wrap a,
#mb_confirm>div>form>ul>.btn_wrap button{width: calc(50% - 5px);margin: 0;font-size: 15px; padding: 0; height: 50px; line-height: 48px;}

#find_info{padding: 75px 0; margin-bottom: 0 !important;}
#find_info>img{width: 50%; max-width: 250px;margin: 0 auto 50px;display: block;}
#find_info>form{}
#find_info>form h5{display: block;; width: 100%; color: #fff; font-size: 13px; height: 50px; padding: 0 10px; border-radius: 5px 5px 0px 0px;line-height: 50px;font-weight: bold;}
#find_info>form>div{border: none;border-radius: 0px 0px 5px 5px;}
#find_info>form>div>p{}
#find_info>form>div>.input_wrap{padding-top: 50px;margin-bottom: 20px;}
#find_info>form>div>.input_wrap input{background:#f8f8f8 !important;}
#find_info>form>div>.text-center{}
#find_info>form>.btn_wrap{display: flex;justify-content: space-between;align-items: center;flex-flow: row wrap;margin-top: 50px;}
#find_info>form>.btn_wrap a,
#find_info>form>.btn_wrap button{width: calc(50% - 5px);margin: 0;font-size: 15px;margin: 0;font-size: 15px; padding: 0; height: 50px; line-height: 48px;}


.register .list-group-item {
	padding-left:0;
	padding-right:0;
	border-left:0;
	border-right:0;
}

@media all and (max-width:500px){
    #intro .text .span_wrap{width: 300px; margin: 0 auto 70px;}
    #intro .text>img{ max-width: 300px;}
    #intro .text>p{font-size: 20px; margin: 30px auto 0;}
    #intro .text .span_wrap span:nth-child(1){right: 32px; top: 2px; width: 7px; height: 7px;}
    #intro .text .span_wrap span:nth-child(2){right: 24px; top: 0px; width: 10px; height: 10px;}
    #intro .text .span_wrap span:nth-child(3){right: 20px; top: 7px; width: 10px; height: 10px;}
}
@media all and (max-width:400px){
    #intro .text .span_wrap{width: 200px; margin: 0 auto 50px;}
    #intro .text>img{ max-width: 200px;}
    #intro .text>p{font-size: 16px; margin: 20px auto 0;}
    #intro .text .span_wrap span:nth-child(1){right: 21px; top: 3px; width: 4px; height: 4px;}
    #intro .text .span_wrap span:nth-child(2){right: 16px; top: 1px; width: 6px; height: 6px;}
    #intro .text .span_wrap span:nth-child(3){right: 14px; top: 5px; width: 6px; height: 6px;}
}
@media all and (max-width:575px) {
	.register .list-group-item {
		padding-left:1.0rem;
		padding-right:1.0rem;
	}
}