.center {width:100%; padding-top:10px; display: inline; top:0; flex-wrap: wrap; margin-top:20px;}
.card {width: 330px; height: 250px; background-color: #fff; background: linear-gradient(#f8f8f8, #fff); box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4); border-radius: 6px; overflow: hidden;
position: relative; display: flex;margin: 1.5rem;}
.card h1 {text-align: center;}
.card>a {width:100%;}
.card>a:focus {margin:3px;outline:3px solid #E91E63;}
.card>a:focus .additional,
.card>a:focus .child {width:calc(100% - 6px) !important;height:calc(100% - 6px);}
.card .additional {position: absolute; width: 110px; height: 100%; background:linear-gradient(#146dd3, #47a4e2); transition: width 0.4s; overflow: hidden; z-index: 2; }
.card .additional:hover {color:#fff;}
.card:hover .additional,
.card a:focus .additional,
.card .additional:has(.card_btn_w:focus) {width: 100%; background: linear-gradient(#146dd3, #47a4e2); border-radius: 0 5px 5px 0; }
.card .additional .user-card {width: 110px; height: 100%; position: relative; float: left; top:30%; color:#fff; font-size:50px; text-align:center;}
.card .additional .user-card:hover {color:#fff; }
.card .additional .user-card a {color:#fff;}
.card .additional .user-card::after {content: ""; display: block; position: absolute; top: 10%; right: -2px; height: 80%;}
.card .additional .user-card .level,
.card .additional .user-card .points { top: 15%; color: #fff; text-transform: uppercase; font-size: 0.75em;  font-weight: bold; background: rgba(0,0,0,0.15); padding: 0.125rem 0.75rem;
    border-radius: 100px;white-space: nowrap; }
.card .additional .user-card .points {top: 85%;}
.card .additional .user-card h3 {font-size:20px; font-weight: bold;}
.card .additional .user-card svg {top: 50%;}
.card .additional .more-info h1 {color: #fff; margin-bottom: 0;}
.card .general {width: 220px; height: 100%; position: absolute; top: 0;right: 0;z-index: 1;box-sizing: border-box;display:flex;justify-content:center;align-items:center;}
.card .general .more { position: absolute; bottom: 1rem; right: 1rem; font-size: 0.9em; }
.card .additional .more-info {width: 220px;float: left;position: absolute;left: 110px;height: 100%;top: 0;display:flex;justify-content:center;align-items:center;}
.card_btn {background:#146ebe; color:#fff; width:145px; height:50px;line-height:50px; border-radius: 20px; font-size:1em;font-weight: bold;text-align:center;}
.card_btn_w {background:#fff; color:#146ebe; width:145px; height:50px;line-height:50px; border-radius: 20px; font-size:1em;font-weight: bold;}
.card_btn_y {background:#edc71f; color:#fff; width:145px; height:50px;line-height:50px; border-radius: 20px; font-size:1em;font-weight: bold;}
.card_btn_wy {background:#fff; color:#edc71f; width:145px; height:50px;line-height:50px; border-radius: 20px; font-size:1em;font-weight: bold;}
.card_btn:focus,
.card_btn_w:focus,
.card_btn_y:focus,
.card_btn_wy:focus {outline:3px solid #E91E63}
.center i {color:#fff; width:40px;}
.center .group {width:30px}
.ovf_au {overflow-x: auto;}
.f-red {color:#ff0000}
.card .child {position: absolute; width: 110px; height: 100%; background: linear-gradient(#fde163, #edc71f); transition: width 0.4s; overflow: hidden; z-index: 2; }
.card .child:hover {color:#fff;}
.card:hover .child, 
.card a:focus .child,
.card .child:has(.card_btn_wy:focus) {width: 100%; background: linear-gradient(#fde163, #edc71f); border-radius: 0 5px 5px 0; }
.card .child .user-card {width: 110px; height: 100%; position: relative; float: left; top:30%; color:#fff; font-size:50px; text-align:center;}
.card .child .user-card:hover {color:#fff; }
.card .child .user-card a {color:#fff;}
.card .child .user-card::after {content: ""; display: block; position: absolute; top: 10%; right: -2px; height: 80%;}
.card .child .user-card .level,
.card .child .user-card .points { top: 15%; color: #fff; text-transform: uppercase; font-size: 0.75em;  font-weight: bold; background: rgba(0,0,0,0.15); padding: 0.125rem 0.75rem;
    border-radius: 100px;white-space: nowrap; }
.card .child .user-card .points {top: 85%;}
.card .child .user-card h3 {font-size:20px; font-weight: bold;}
.card .child .user-card svg {top: 50%;}
.card .child .more-info h1 {color: #fff; margin-bottom: 0;}
.card .child .more-info {width: 220px; float: left; position: absolute; left: 110px; height: 100%; top: 40%; text-align: center;}

/* tunel start */
.tunnel { counter-reset: progress; padding:20px 0 30px 0; width:80%; margin:0 auto; padding-left: 0; display: flex; }
.tunnel li { display: flex; align-items: center; list-style-type: none; counter-increment: progress }
.tunnel li+li { flex: 1 0 auto; }
.tunnel li::after { content: counter(progress); display: inline-block; box-sizing: border-box; width: 2em; height: 2em; line-height: 2em; background: #146ebe; border-radius: 50%; text-align: center; color: #fff; }
.tunnel li+li::before { content: ""; flex: 1; display: block; /* IE10 fix */ border-bottom: 2px solid #51a2f3; }
.tunnel .is-current ~ li::before { border-bottom-style: dotted; }
.tunnel li:not(.is-current)::after {background: #6592ba;}
.tunnel_y { counter-reset: progress; padding:20px 0 30px 0; width:80%; margin:0 auto; padding-left: 0; display: flex; }
.tunnel_y li { display: flex; align-items: center; list-style-type: none; counter-increment: progress }
.tunnel_y li+li { flex: 1 0 auto; }
/* .tunnel_y .is-current ~ li { opacity: .3; } */
.tunnel_y li:not(.is-current)::after {background: #efe2a9;}
.tunnel_y li::after { content: counter(progress); display: inline-block; box-sizing: border-box; width: 2em; height: 2em; line-height: 2em; background: #EDC71F; border-radius: 50%; text-align: center; color: #222; }
.tunnel_y li+li::before { content: ""; flex: 1; display: block; /* IE10 fix */ border-bottom: 2px solid #fde163; }
.tunnel_y .is-current ~ li::before { border-bottom-style: dotted; }
/* tunel end */

.join-step-box {padding:30px 0 40px;display: flex; align-items: center; justify-content: center; -moz-column-gap: 10rem; column-gap: 10rem;}
.join-step-box .join-step {display: flex; align-items: center; justify-content: center; flex-direction: column; row-gap: 0.75rem;}
.join-step-box .join-step .step-cir {position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 5.75rem; height: 5.75rem; border-radius: 50%; row-gap: 0.25rem; background-color: #f0f0f0;}
.join-step-box .join-step.on .step-cir {background-color:#146ebe;}
.join-step-box .join-step:not(:last-child) .step-cir {position:relative;}
.join-step-box .join-step:not(:last-child) .step-cir::before {content:"";display:inline-block;width:13rem;height:1px;background-color:#f0f0f0;position:absolute;top:50%;right:-13rem;transform:translateY(-50%);z-index:0;}
.join-step-box .join-step .step-cir .step-txt {font-size: 0.827em; line-height: 1.25em; color:#6a6c70;}
.join-step-box .join-step.on .step-cir .step-txt {color:#fff;}            	
.join-step-box .join-step .step-cir .step-num {font-weight:700;font-size:1.181em;line-height:1.5em;color:#6a6c70;}
.join-step-box .join-step.on .step-cir .step-num {color:#fff;}
.join-step-box .join-step .join-txt {font-weight:600;font-size:1em;line-height:1.2;color:#757575;}
.join-step-box .join-step.on .join-txt {color:#111;}

.agree_box { margin:0 auto; width:95%;}
.step2_tit {width:60%; height:auto; flex-wrap: wrap-reverse; border:1px solid #4987d8; color:#146ebe; padding:30px; font-size:1em; border-radius: 10px; margin:0 auto; font-weight: bold;}
.step2_tit_y {width:60%; height:auto; flex-wrap: wrap-reverse; border:1px solid #fde163; background: #fde163; color:#222; padding:30px; font-size:1em; border-radius: 10px; margin:0 auto; font-weight: bold;}
.agree {display:inline-block;  width:100%;}
.agree li {float:left; margin-right:20px; font-size:0.9em;}
.agree_txt {font-size:0.8em; text-align:left; color:#ff0000;}
.agree_box .btn_agree {background: #146ebe; color:#fff; padding:15px 0; font-size:1em; border-radius: 15px; width:200px; margin-top:30px; }
.agree_box .btn_agree:hover {background:#47a4e2;}
.agree_box .btn_agree2 {background: #ccc; color:#333; padding:15px 0; font-size:1em; font-weight:700; border-radius: 15px; width:200px; margin-top:30px; }
.agree_box .btn_agree2:hover {background:#eee;}
.agree_box .btn_agree3 {background: #edc71f; color:#fff; padding:15px 0; font-size:1em; border-radius: 15px; width:200px; margin-top:30px; }
.agree_box .btn_agree3:hover {background:#fde163;}
.agree_box p {color:#222;}
.agree2 {width:100%; font-size:0.8em; box-sizing: border-box; border: solid 1px #c1d8f0; padding:10px 20px; height:200px; text-align:left; overflow-y: scroll; line-height: 1.5em; margin-bottom:10px; }
.agree2 h3, h4 {line-height:2em;}
.confirm_box {background: #146ebe; border:3px solid #146ebe; width:220px; height:120px; border-radius: 100%; margin:20px auto; padding:50px 0;}
.confirm_box2 {background: #edc71f; width:220px; height:120px; border-radius: 100%; margin:20px auto; padding:50px 0; color:#222;}
.confirm {padding:80px; color:#222; background:url('../img/phone.png') no-repeat 50% 0%; top:50%; }
.confirm_txt, .confirm_txt2 {display: inline-block;  font-size:1.3em; font-weight: bold; color:#222;}
.confirm_txt span { color:#146ebe;}
.confirm_txt2 span { color:#b89f2f;}
.mp_pdtm20 {height: 300px; overflow-y: scroll;}
.pdtm20 {padding:20px 0;}
.my_left {display: none;}
.my_right { vertical-align: top;  padding:15px 10px 50px 15px ; margin-bottom:50px; min-height:500px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;}
.my_tit_sub {background: linear-gradient(to top, rgb(87, 182, 248, 0.5) 50%, transparent 50%);
    width: fit-content;
    font-size: 1.4em; font-weight:800; margin-left:30px;}
.my_tit:before {border:5px solid #0065cd;  border-radius: 50%;  width:10px; height:10px; position: absolute; line-height:4px; display: inline-block; content: ''; margin:6px 0 0 -30px; ;}
.my_tit { font-size:1.6em; text-align: left; font-weight: 600; content: '';margin-left:40px; color:#0065cd; margin-bottom:20px;}


/**/
.c_box { margin: 0 auto; font-size:0.9em; padding-right:10px;}
.c_box form {text-align: left; margin: 20px;}
.c_box label {width: 100%; padding-bottom: 20px; display:block; }
.c_box label input { height: 25px; margin: 0 0 0 15px;}
.c_box input {padding: 7px 10px; width: 150px; display:inline-block; margin-bottom:10px;}
.c_box input:focus {outline: none !important; border-color: #74aada; box-shadow: 0 0 2px #146ebe; }
.c_box input.ctype1 {width: 30px;}
.c_box input.ctype2 {width: 50px;}
.join_tit span {padding:20px 0;}
/* .c_box input[type=password] {width: auto !important;} */
.c_join_tit, .c_join_int {padding: 5px 0; border-bottom:1px dashed #ccc;}
input[type=radio] {width:15px !important;}
.bbx {border-bottom:none;}
.btm0 {margin-top:2px !important;}
.add_btn { margin-top:0;}
.mt7 {margin-top:7px}
.btm77 {margin-top:-7px;}
.mg10 {margin:0 10px;}

.label_tit { text-align: left; padding:0; vertical-align: middle;}
input[type=checkbox] {width:15px; }
.line_ck {line-height: 2em; text-align: center;}

.accredit_box  {width:100%; display: inline; top:0; flex-wrap: wrap;text-align:left; padding:20px 0;}
.accredit_box input [type=text], .accredit_box input[type=password], select, textarea {width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;  resize: vertical; }
.accredit_box label {padding: 12px 12px 12px 0; display: inline-block;}
.accredit_box .join_tit, .accredit_box .join_int,.accredit_box  input[type=submit] {width: 100%; margin-top: 0; text-align: left;}
.accredit_box .not {border-bottom:none;}
.accredit_box span {color:#146ebe;}
.accredit_box2 {padding:20px 0;}
.accredit_box2 label {padding: 12px 12px 12px 0; display: inline-block;}
.accredit_box2 span {color:#edc71f;}
.accredit_box .f-red {color:#ff0000}
.accredit_box .add_btn {background:#146ebe; color:#fff; margin-left:10px; border-radius: 5px;}
.commit_bg {background: url('../img/commit_bg.png') no-repeat 50%; color:#343434; width:100%; min-height: 400px; font-size:1.4em;}
.commit_bg p {line-height: 2em; width:380px; margin:0 auto; text-align: center; padding:70px 10px 0 10px;}
.con_txt h1 {background:linear-gradient(to top, rgb(87, 182, 248, 0.5) 50%, transparent 50%); width:fit-content; font-size:1.1em; font-weight: bold; margin:20px auto;}
.con_txt_y h1 {background:linear-gradient(to top, rgba(255, 241, 46, 0.5) 50%, transparent 50%); width:fit-content; font-size:1.1em; font-weight: bold; margin:20px auto;}
.content .con_img {width:100%; left:0%; transform: translateX(-50%); position: relative; }
/* .con_txt6_y {background:linear-gradient(to top,  rgba(255, 241, 46, 0.5) 50%, transparent 50%); width:fit-content; font-size:1.1em; font-weight: bold; margin:20px 0;} */
.con_txt6_y, .con_txt0 {width: fit-content; font-size: 1.1em; font-weight: bold; margin: 20px 0;}
.con_txt6_y {background: linear-gradient(to top, rgba(255, 241, 46, 0.5) 50%, transparent 50%);}
.con_txt0 {background: linear-gradient(to top, rgba(87, 182, 248, 0.5) 50%, transparent 50%);}
/*login*/
.login {width: 350px;margin: 40px auto;font-size: 16px;  height:auto; padding-bottom:40px; }
.login-header,.login p {margin-top: 0;margin-bottom: 0;}
.login-header {background: #146ebe;padding: 20px;font-size: 1.4em;font-weight: normal;text-align: center;text-transform: uppercase;color: #fff;}
.login-container {background: #eeeeee;padding: 12px;}
.pw_wrap {margin: 30px auto 0; max-width: 500px; background: #f8f8f8;}
.newpw {padding: 20px 0 0;}
.repw {font-size: 16px; border-top: 2px solid #000; width: 400px; margin: 20px auto; padding: 10px 0; padding-bottom:40px;}
.login p, .repw p {padding: 6px; }
.newpw p {font-weight: bold;}
.repw p {margin-bottom: 10px;}
.repw p label {width: 150px; display: inline-block;}
.repw p em {display: block; font-size: 0.9em;}
.login input {box-sizing: border-box;display: block;width: 100%;border-width: 1px;border-style: solid;padding: 16px;outline: 0;font-family: inherit;font-size: 0.95em;}
.login input[type="email"],
.login input[type="password"] {background: #fff;border-color: #bbb;color: #555;}
.login input[type="email"]:focus, .login input[type="password"]:focus {border-color: #888;}
.login .btn_sm {background: #146ebe; border-color: transparent; color: #fff;cursor: pointer;}
.login .btn_sm:hover {background: #294268;}
.login .btn_sm:focus {border-color: #146ebe;outline:3px solid #bb2027 !important;}
.ka { background:#fded2b; margin:5px;}
.ka:hover {background:#fdef56 ;}
.login button {display: block; width: 100%; font-size: 0.95em; margin-left:15px; padding:12px; font-weight: bold;}
.login .kakao {margin-left:0;padding-left:43px;background: url('../img/ka.png') no-repeat 25%; color:#222;}
.na { background:#5ec53a; margin:5px; }
.na:hover { background:#7ce456;}
.login .naver {margin-left:0;padding-left:43px;background: url('../img/n.png') no-repeat 25%; color:#222;}
.log_btn {padding:20px 0;}
.log_btn li {float: left; margin-right:20px; text-align: right;}
.log_btn a {text-decoration: underline; margin-bottom:5px;}
.log_btn a:hover {font-weight: bold;}

.logout {margin:100px 0;}
/*textarea*/
.chckbox { background-color: #eee; color: #444; cursor: pointer; padding:18px; width: 100%; border: none; text-align: left; outline: none; font-size: 0.8em; transition: 0.4s;}
.activez, .chckbox:hover { background-color: #ccc;}
.chckbox:after {content: '\2228'; color: #777; font-weight: bold; float: right; margin-right: 15px;   }
.activez:after {content: "\2227";}
.ppanel {background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;}
.txtarea {width:100%; height:250px; padding:10px; border:1px solid #eee; scrollbar-color: #eee;}
.formbox {width:100%;}
.formbox ul {width:100%; background:#eee;}
.formbox li {float: left; padding:10px;}
.chckbox2 {float:right;}
.mtime {display: none;}

@media screen and (max-width: 760px) {
    .join-step-box {flex-wrap:nowrap;-moz-column-gap:5px;column-gap:5px;align-items:flex-start;}
    .join-step-box .join-step {display:flex;align-items:center;justify-content:center;flex-direction:column;row-gap:4px;width:50%;}
    .join-step-box:has(.join-step:nth-child(3)) .join-step {width:33.333%;}
    .join-step-box .join-step .step-cir {position:relative;z-index:10;display:flex;align-items:center;justify-content:center;flex-direction:column;width:18vw;height:18vw;row-gap: 0px;}
    .join-step-box .join-step:not(:last-child) .step-cir::before {content:"";width:16vw;top:50%;left:18vw;}
    .join-step-box .join-step .step-cir .step-txt, .join-step-box .join-step .step-cir .step-num {font-size:12px;line-height:16px;}
    .join-step-box .join-step .join-txt {font-size:11px;line-height:14px;word-break:keep-all;text-align:center;}
}

@media all and (min-width:768px) and (max-width:1024px)and (orientation : portrait) {
	.center { display: flex;  margin:40px 0; justify-content: center;}

}

@media all and  (max-width:1024px){
    .center { display: flex;}
}
@media all and (min-width:1025px) {
    .center { display: flex; margin:40px 0; justify-content: center;}
    .card {width:420px;}
    .card .additional {width:180px;}
    .card .additional .user-card {width: 180px;}
    .card .general {width:240px;}
    .card .additional .more-info {width:240px; left:180px;}
    .card .child {width:180px;}
    .card .child .user-card {width: 180px;}
    .card .child .more-info {width:240px; left:180px;}
    .step2 {width:95%; margin:40px auto; display: inline-table; text-align: center;}
    .step2 .step {background:#343434; color:#fff; border-radius: 100%; padding:0 8px; margin:0 10px 0 50px; }
    .step2 .step_txt {display: inline;}
    .step2 .step_up {background:#336cb8; color:#fff; border-radius: 5px; padding:10px 20px; margin:0 10px 0 50px;}
    .person_box {width:40%; display: flex;}
    .accredit_box { display: flex; margin:40px 0; justify-content: center;}
    .accredit {width:420px;}
    .con_txt h1 {background:linear-gradient(to top, rgb(87, 182, 248, 0.5) 50%, transparent 50%); width:fit-content; font-size:1.7em; font-weight: bold; margin:20px auto;}
    .con_txt_y h1 {background:linear-gradient(to top, rgba(255, 241, 46, 0.5) 50%, transparent 50%); width:fit-content; font-size:1.7em; font-weight: bold; margin:20px auto;}
    .content .con_img {left:50%; transform: translateX(-50%);}
    .agree_box { margin:0 auto; width:80%;}
    /* //////////////////// */
    .c_box { width: 65%;}
    .c_join_tit, .c_join_int {padding: 15px 0;}
    .c_box input.ctype1 {width: 50px;}
    .c_box input.ctype2 {width: 80px;}
    .label_tit {text-align:right; width:30%; float:left; padding: 0 30px; margin-top:7px;}
    .c_box input {width:150px; padding:7px 10px;}
    input[type=checkbox] {width:15px; }
    .my_right {width:83%; float:right;}
    .my_tit:before {margin:12px 0 0 -30px; ;}
    .my_left {width:180px; background:#146ebe; color:#fff; position: relative;display: block;  float: left; top: -74px;}
    .my_l_t {padding:30px 0}
    .my_info {background :#fff; color:#146ebe;}
    .my_info ul {}
    .my_info li {border-bottom:1px dashed #ccc;  border-top:1px solid #fff;  padding:10px; border-left:1px solid #146ebe; border-right:1px solid #146ebe;}
    .my_info li:last-child {border-bottom:1px solid #146ebe}
    .my_info li:hover {text-decoration: underline; cursor: pointer}
    .mtime {display: inline; padding-top:5px;}
    /* //////////////////// */
}