@charset "utf-8";
.w100{width:100%;}
.pl0{padding-left:0 !important;}
.pt30{padding-top:30px !important;}
.ml0{margin-left:0 !important;}
.mt0{margin-top:0 !important;}
.mt25{margin-top:25px !important;}
.mt50{margin-top:50px !important;}
.mt80{margin-top:80px !important;}
.pull-none{float: none !important;}
#wrapper{}
#content.bg-space{
    position:relative;
    min-height:calc(100vh - 9.75rem) !important;
    height:auto;
    padding-top:3rem !important;
    padding-bottom:3rem !important;
    /*height:calc(100vh - 9.75rem);*/
    background: url(/static/images/sub/membership/bg-all-min.jpg) right bottom no-repeat;
    background-size: cover;
}

.bg-motion{position:absolute; left:0; top:0;width:100%; height: 100%;z-index: 0;
background:url(/static/images/sub/membership/bg-solid.svg) center / cover no-repeat;
}
.bg-motion:after{
    content: '';
    position:absolute;
    left:0;top:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,.25);
}
section{z-index:1;margin-top:0;margin-bottom:inherit;min-height: calc(100% - 13rem);}
.section-login:first-child {padding-top: 6vh;padding-bottom: 5rem; text-align: left; padding-left: 10%; height:100%;
    box-sizing: border-box; margin-top:0;
}
.section-login *{font-family: "Noto Sans", Sans-serif;}
.section-login .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.section-login .box{
    position:absolute;
    top: 50%;
    left: 15%;
    margin-bottom:inherit;
    border-radius:0.625rem;
    box-sizing:border-box;
    width: 800px; height: auto;
    -webkit-box-shadow: 0px 0px 20px 5px rgba(22,24,31, 0.75);
    -moz-box-shadow:    0px 0px 20px 5px rgba(22,24,31, 0.75);
    box-shadow:         0px 0px 20px 5px rgba(22,24,31, 0.75);
    background: #282a32;
    transform: translateY(-50%) ;
}
.section-login .box.wide{width: 980px;}
.box-cont{ float:left; }
.box-cont.left{float:left; position:relative; box-sizing:border-box;
    width:60%; background: #33363f;height:100%;
    min-height:34rem;
    /*padding:3.4375rem 11% 2.8rem;*/
    padding:/*2.86456vw*/2.5rem 7% 1.8rem;
    border-top-left-radius: 0.875rem;
    border-bottom-left-radius: 0.875rem;
}

.box-cont.right{ box-sizing:border-box; width:/* 347 / 902*/ 38.47%; height: 100%; border-top-right-radius: 0.625rem;  border-bottom-right-radius: 0.625rem; background: #282a32;}
.box-cont h1{line-height: 2.25rem;color:#fff;font-size: 2.375rem; margin-bottom:1.25rem;/*padding-left:0.625rem;*/overflow-y: hidden}
.box-cont h1 small{color:#fff; font-weight: normal; font-size: 0.75rem; vertical-align:top; float: right; text-transform: uppercase;}


/* input 1 */
.section-login .wrapper-input{position:relative;width:100%; margin-bottom: 0.875rem}
.section-login .wrapper-input.not-all{width:110%; margin-left:-5%;}
.wrapper-input .alert{ /*display: block;*/ display: none;  width:100%; padding-left: 0.35rem; margin-top:0.35rem; font-size: 0.75rem; line-height: 1.4; color:#b03870; letter-spacing: 0.125px;}
.wrapper-input .alert.round{ /*display: block;*/ display: none; box-sizing:border-box; width: 100%;  padding-right: 1.25rem; padding-left: 1.25rem; margin-top: 0.75rem; margin-bottom: 1rem; font-size: 0.75rem; color: #b03870; }
.wrapper-input + .alert.round{ /*display: block;*/ display: none; width: 100%; 
    padding-left: 1.25rem; padding-right: 1.25rem; margin-top: 0.75rem; margin-bottom: 1rem; font-size: 0.75rem; color: #b03870; }
.wrapper-input .alert.green{ color: #53ce7f;}
.wrapper-input .alert.on{ display: block;}
.wrapper-input + .alert.round.on{ display: block;}
.wrapper-input .eyes { position: absolute; top: 0.75rem; bottom: 0; right: 1.25rem; margin: auto 2px; cursor: pointer;}
.wrapper-input .eyes .icon-eye {transition: all .2s;}
.wrapper-input .eyes .icon-eye.off { background: url(/static/images/sub/membership/icon-eyes-off.png) ;
    width: 17px; height: 13px; display: inline-block;

}
.wrapper-input .eyes .icon-eye.on { background: url(/static/images/sub/membership/icon-eyes-on.png);
    width: 17px; height: 11px; display: inline-block;

;}


.btn.small-input{ position: absolute; top: 0.495rem; right: 0.4rem; height:inherit; line-height:inherit; min-width: inherit;  cursor: pointer;
     transition: all .2s;   border-radius: 1rem; padding-top: 0.25rem; padding-bottom:0.25rem; padding-left: 1rem; padding-right: 0.25rem;
}

.btn.small-input.setting{background: #6586e2;}
.btn.small-input.setting:hover{background: #4271f5;}
.btn.small-input .txt{ display: inline-block; font-size: 0.75rem; color:#fff; margin-right:0.4375rem; vertical-align:middle; height:auto; text-transform:none}
.btn.small-input .icon-pencil {
    width: 1.5rem; height: 1.5625rem; display: inline-block; vertical-align:middle;
    background-image: url(/static/images/sub/membership/icon-pencil.png); background-size: cover;
}
.btn.small-input.change{background: #6dbfd0;}
.btn.small-input.change:hover{background: #48b6ce;}


.tui-datepicker-input,
.tui-datepicker-input.tui-datetime-input.tui-has-focus{color: #9ea1a9;}

.section-login input[type=text],
.section-login input[type=email],
.section-login input[type=password]{box-sizing:border-box; width: 100%; outline:none;min-width:inherit;
    padding: 0.625rem 2rem; border-radius:  1.5rem; font-size:0.875rem;
    border: 4px solid #bdc2d2; color: #9ea1a9 !important;cursor: pointer;}

.section-login input[type=text]:focus,
.section-login input[type=email]:focus,
.section-login input[type=password]:focus{ border: 4px solid #4271f5; outline: none; }

/* 인풋 2 */
.section-login .wrapper-input.border-type{
    box-sizing: border-box; overflow:hidden; width: 100%; min-width: inherit;
    border-radius: 1.5rem;
    font-size: 0.875rem;
    border: 4px solid #bdc2d2; color:#9ea1a9 !important; background: #fff;
    transition: all 0.2s;

}
.section-login .wrapper-input.border-type.on{
    border: 4px solid #4271f5;
    outline: none;
}

.section-login .wrapper-input.border-type.read-only{
    border: 4px solid #bdc2d2; color:#9ea1a9 !important; /* background: #dddee6; */
    outline: none;
}
.section-login input[type=text].border-none-type,
.section-login input[type=email].border-none-type,
.section-login input[type=password].border-none-type{float:left; border-radius: 0; outline:none; border:none;  -webkit-appearance: none; background: transparent; color:#9ea1a9 !important;}

input[type=text].width60, input[type=email].width60, .width60{width: 60%; }
input[type=text].width40, input[type=email].width40, .width40{width: 40%; }


/*

::placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
textarea:-moz-placeholder,
textarea::-moz-placeholder,
textarea:-ms-input-placeholder{
    font-weight:400; color:#000 !important;
    text-align:left;font-size:0.875rem;
}
*/


input[type=checkbox]:checked {
    background: transparent;
    border: none !important;
}

.section-login input[type=checkbox]{
    position: relative;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    box-sizing: border-box;
    display: inline-block;
    margin: 0 4px 0 0;
    width: 14px;
    height: 14px;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    align-items: flex-start;
    vertical-align: middle;
    background: transparent;
    border: none !important;
    cursor: pointer;
}

input[type=checkbox]:after {
    position: absolute;
    content: '';
    display: inline-block;
    margin: 0 9px 0 0;
    left: -1px;
    top: -1px;
    border: none !important;
    width: 14px;
    height: 15px;
    background: transparent url(/static/images/sub/membership/chk-off.png) 0 0 no-repeat;
}
input[type=checkbox]:checked{
    outline: none;
    border: none !important;
}
input[type=checkbox]:checked:after {
    position: absolute;
    content: '';
    display: inline-block;
    margin: 0 9px 0 0;
    width: 14px;
    height: 15px;
    left: -1px;
    top: -4px;
    border: none !important;
    background: transparent url(/static/images/sub/membership/chk-on.png) 0 0 no-repeat;
}

.btn.round-type{
    outline: none;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    line-height:  /*unset*/inherit;
    min-width:  /*unset*/inherit;
    padding: 0.9375rem 2rem;
    border-radius: 1.75rem;
    font-size: 0.875rem;
    align-items: flex-start;
    color:#fff;
    background:#6586e2;
}


.valid-type-not{display:inline-block;background: #6e788e; color:rgba(255,255,255,0.5); cursor:default; pointer-events: none;}
.valid-type-not:hover, .valid-type-not:focus{background: #6e788e; color:rgba(255,255,255,0.5); cursor:default; pointer-events: none;}
.valid-type-pass{display:inline-block;background: #6586e2; }
.valid-type-active{display:inline-block;background: #4271f5; color:#fff;}

.valid-type-pass:hover, .valid-type-pass:focus,
.valid-type-active:hover, .valid-type-active:focus{background: #4271f5; color:#fff;}

/* readonly */
.section-login input[type=text].border-none-type:read-only,
.section-login input[type=email].border-none-type:read-only,
.section-login input[type=password].border-none-type:read-only,
.section-login input[type=text]:read-only,
.section-login input[type=email]:read-only,
.section-login input[type=password]:read-only{
    font-weight: 400;
    color:#9ea1a9 !important;
    background: #fff;
    font-size: 14px;
    cursor: default !important;
    pointer-events: none !important;
}
/* 플레이스 홀더 */
input::-webkit-input-placeholder{ font-weight: 400; color:#9ea1a9 !important; background: #fff; font-size: 14px; cursor: default !important;}
::-webkit-input-placeholder{ font-weight: 400; color:#9ea1a9 !important; background: #fff; font-size: 14px; cursor: default !important;}
:-moz-placeholder{ font-weight: 400; color:#9ea1a9 !important; background: #fff; font-size: 14px; cursor: default !important;}
:-ms-input-placeholder{ font-weight: 400; color:#9ea1a9 !important; background: #fff; font-size: 14px; cursor: default !important;}
::-moz-placeholder{ font-weight: 400; color:#9ea1a9 !important; background: #fff; font-size: 14px; cursor: default !important;}
::-ms-input-placeholder{ font-weight: 400; color:#9ea1a9 !important; background: #fff; font-size: 14px; cursor: default !important;}
::-webkit-input-placeholder{ font-weight: 400; color:#9ea1a9 !important; background: #fff; font-size: 14px; cursor: default !important;}
::placeholder{ font-weight: 400; color:#9ea1a9 !important; background: #fff; font-size: 14px; cursor: default !important;}
textarea:-moz-placeholder{ font-weight: 400; color:#9ea1a9 !important; background: #fff; font-size: 14px; cursor: default !important;}
textarea:-ms-input-placeholder{ font-weight: 400; color:#9ea1a9 !important; background: #fff; font-size: 14px; cursor: default !important;}
textarea::-moz-placeholder{ font-weight: 400; color:#9ea1a9 !important; background: #fff; font-size: 14px; cursor: default !important;}
textarea::-webkit-input-placeholder{ font-weight: 400; color:#9ea1a9 !important; background: #fff; font-size: 14px; cursor: default !important;}

/* 밸리데이션 버튼 */
.btn.round-type.valid-type-not{display: none; background: #6e788e; color:rgba(255,255,255,0.5); cursor:default; pointer-events: none;}
.btn.round-type.valid-type-not:hover, .btn.round-type.valid-type-not:focus{background: #6e788e; color:rgba(255,255,255,0.5); cursor:default; pointer-events: none;}
.btn.round-type.valid-type-pass{display: none; background: #6586e2; }
.btn.round-type.valid-type-active{display: none; background: #4271f5; color:#fff;}
.btn.round-type.valid-type-not.on,
.btn.round-type.valid-type-pass.on,
.btn.round-type.valid-type-active.on{display: inline-block;}

.btn.round-type:hover, .btn.round-type:focus,
.btn.round-type.valid-type-pass:hover, .btn.round-type.valid-type-pass:focus,
.btn.round-type.valid-type-active:hover, .btn.round-type.valid-type-active:focus
{background: #4271f5; color:#fff;}
.label-chk-sns{ margin-left:0.625rem; font-size: 0.75rem; font-weight: normal; color:#fff;}

/* SNS 정보 동의 버튼  */
.btn.small{
    display: inline-block;
    background-color: #6e788e;
    width: 10.1875rem;
    margin-left: 1.5rem;
    min-width:inherit;
    height: inherit;
    line-height: inherit;
}
.btn.small:first-child{margin-left: 0;}
.btn.small.active{
    background-color: #4271f5;
}
.btn.small.text-over{font-size: 0.75rem;padding:1rem 2rem;}
/* ./ SNS 정보 동의 버튼 */

/* 어카운트 딜리트 버튼 */
.btn.smallest{
    float: right;
    display: inline-block;
    background-color: transparent;
    width: auto;
    min-width:inherit;
    height: inherit;
    line-height: inherit;
    margin-top: 0.125rem;
    padding: 0.5rem 0.5rem 0.5rem;
    font-size: 0.75rem;
    vertical-align: middle;
    text-align: center;
    text-transform: none;
}
.btn.smallest:first-child{margin-left: 0;}
.btn.grey-border{color:#6e788e; border: 2px solid #6e788e;}
.btn.grey-border:hover{background:transparent; color:#4271f5; border-color:#4271f5;}


.btn.arrow{
    display:none;
    background-color: transparent;
    min-width: inherit;
    width: 2rem;
    height: 2rem;
    line-height: 2;
    margin-right: 0.75rem;
    padding: 0;
    font-size: 0.75rem;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    text-transform: none;
}
.btn.arrow.on{
    display:inline-block;
}

/* ******************************* */
/* warpper - link : 링크 버튼 영역 */
/* ******************************* */
/* warpper - link : signin */
.wrapper-input.link{ width: calc(100% - 1.25rem); margin-top: 1.25rem; margin-left: 0.625rem; margin-bottom: 1.5rem; }
.wrapper-input.link > a{display:inline-block; vertical-align: top; color:#fff; font-size: 0.75rem; text-transform:none;}
.wrapper-input.link > span{display:inline-block; vertical-align: middle; color:#fff; font-size: 0.625rem; }
.wrapper-input.link > span > a{display:inline-block; vertical-align: middle; color:#fff; font-size: 0.75rem; text-transform:none}

#cont_3 .label-chk-sns{box-sizing:border-box; width: 100%; line-height: 1.4; display: inline-block; padding-left: 4rem;font-size: 0.875rem; text-indent:-1rem;font-weight: 400; letter-spacing: 0;
cursor:pointer;
}
#cont_3 .round-chk{margin-left: -2rem;}
#cont_3 .label-chk-sns[for=agree_all]{padding-left: 3rem;font-size:0.9375rem;}
.section-login input[type=checkbox].round-chk{
    position: relative;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    box-sizing: border-box;
    display: inline-block;
    margin: 0 1.125rem 0 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    align-items: flex-start;
    vertical-align: middle;
    background: transparent;
    border: none !important;
    cursor: pointer;

    width: 1.375rem;
    height: 1.375rem;
    transition: all .2s;
    cursor: pointer;
}
.section-login input[type=checkbox].round-chk:focus:after{
    border: 2px solid #6e788e !important;
}

input[type=checkbox].round-chk:after {
    position: absolute;
    content: '';
    display: inline-block;
    box-sizing:border-box;
    margin: 0 9px 0 0;
    left: 0;
    top: 0;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: none;
    background-position:center;
    border: 2px solid #6e788e !important;
    transition: all .2s;
}

input[type=checkbox]#agree_all:after {
    position: absolute;
    content: '';
    display: inline-block;
    box-sizing:border-box;
    margin: 0 9px 0 0;
    left: 0;
    top: 0;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: none;
    background-position:center;
    border: 2px solid #3567ff !important;

}
input[type=checkbox]:checked{
    outline: none;
    border: none !important;
    box-sizing:border-box;
}
input[type=checkbox].square-chk:checked:after {
    position: absolute;
    content: '';
    display: inline-block;
    box-sizing:border-box;
    margin: -3px 9px 0 -1px;
    width: 1.375rem;
    height: 1.375rem;
    left: 50%;
    top: 50%;
    transform:translate(-50%, -50%);
    border: none;
    background: transparent url(/static/images/sub/membership/chk-on.png) center no-repeat;
}
input[type=checkbox].round-chk:checked:after {
    position: absolute;
    content: '';
    display: inline-block;
    box-sizing:border-box;
    margin: 0 9px 0 0;
    width: 1.375rem;
    height: 1.375rem;
    left: 50%;
    top: 50%;
    transform:translate(-50%, -50%);
    border: 2px solid #fff !important;
    background: transparent url(/static/images/sub/membership/round-chk-on.png) center no-repeat;
}
input[type=checkbox]#agree_all:checked:after {
    position: absolute;
    content: '';
    display: inline-block;
    box-sizing:border-box;
    margin: 0 9px 0 0;
    width: 1.375rem;
    height: 1.375rem;
    left: 50%;
    top: 50%;
    transform:translate(-50%, -50%);
    border: 2px solid #3567ff !important;
    background: transparent url(/static/images/sub/membership/round-chk-all-on.png) center no-repeat;
}
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 50%;
    height: 2.125rem;
    vertical-align:middle;
}
.switch .txt{display:inline-block; width:100%; margin-right: 1rem; line-height: 3; vertical-align:middle; font-size: 0.75rem; color:#bdc2d2;}
/* Hide default HTML checkbox */
.section-login .switch input[type=checkbox].toggle-chk {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    top: 0;
    left: 5.25rem;
    right: 0;
    bottom: 0;
    cursor: pointer;
    width: 4rem;
    background-color: #6e788e;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.625rem;
    width: 1.625rem;
    left: 0.25rem;
    bottom: 0.25rem;
    background-color: #bdc2d2;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:after {
    position: absolute;
    content: "Off";
    /*height: 1.625rem;*/
    width: 1.625rem;
    left: 2.25rem;
    top: 0.75rem;
    background: none;
    -webkit-transition: .4s;
    transition: .4s;
    font-weight: bold;
    color:#bdc2d2;
    font-size: 0.625rem;
    letter-spacing: 0.125px;
}

input.toggle-chk:checked + .slider {
    background-color: #4271f5;
}

input.toggle-chk:focus + .slider {
    box-shadow: 0 0 1px #4271f5;
}

input.toggle-chk:checked + .slider:before {
    background-color: #fff;
    -webkit-transform: translateX(1.875rem);
    -ms-transform: translateX(1.875rem);
    transform: translateX(1.875rem);
}

input.toggle-chk:checked + .slider:after {
    position: absolute;
    content: "On";
    /*height: 1.625rem;*/
    width: 1.625rem;
    left: 0.5rem;
    top: 0.75rem;
    background: none;
    -webkit-transition: .4s;
    transition: .4s;
    font-weight: bold;
    color:#fff;
    font-size: 0.625rem;
    letter-spacing: 0.125px;
}
/* Rounded sliders */
.slider.round {
    vertical-align:middle;
    border-radius: 2.125rem;
}
.slider.round:before {
    border-radius: 50%;
}

/* 회원정보 삭제 */

.guide{margin-top:-25px;text-align:right; color:#c3bbdd; font-size: 0.75rem; font-weight: normal; letter-spacing: 0;}

.essential{margin-right:6px;color:#b03870;vertical-align:text-top}
.optional{margin-right:6px;color:#406be1;vertical-align:text-top}
.guide .essential, .guide .optional{vertical-align: middle;}

/* 스텝 안내 */
.step{margin-bottom: 2rem;position:relative;}
.ul-step{z-index:1;display: inline-block; align-items: center; justify-content:space-around;width:56%; margin-left:auto; margin-right: auto; }
.ul-step li{position:relative; display: inline-block; width: 3rem; text-align:center;transition: background 2s;}
.ul-step li:first-child{float:left; margin-left:-1.35rem;}
.ul-step li:last-child{float: right;margin-right:-1.35rem;}
.ul-step .circle{display: inline-block; box-sizing: border-box; border-radius: 50%;width:2.125rem; height:2.125rem; border: 3px solid #6e788e;background: #3b3e4a; transition: background 2s;}
.ul-step .txt{font-size:0.75rem;font-weight:bold;color:#6e788e; transition: color 2s;}

.ul-step li.on .circle{border: 3px solid #3567ff;transition: background 2s;}
.ul-step li.on .txt {color: #3567ff; transition: color 2s;}

.step > .bar{position:absolute; height: 3px; width: 56%; left:24%; top: 1.95rem;  z-index:0; transition: background 2s;}
.step > .bar._1{background: linear-gradient(90deg, rgba(53,103,255,0) 0%, rgba(134,140,158,1) 0.1%, rgba(134,140,158,1) 100%);transition: background 2s;}
.step > .bar._2{background: linear-gradient(90deg, rgba(53,103,255,1) 50%, rgba(134,140,158,1) 50.1%, rgba(134,140,158,1) 100%);transition: background 2s;}
.step > .bar._3, .step > .bar.last {background: linear-gradient(90deg,  rgba(53,103,255,1) 0%, rgba(53,103,255,1) 100%);transition: background 2s;}
.ul-step li.on:after{
    content:'';
    position:absolute;
    top: 14px;
    left: 50%;
    margin-left:-6px;
    width:12px; height: 7px;
    background:url(/static/images/sub/membership/step-on.png) center no-repeat;
}
.box-cont .cont{display: none;}
.box-cont .cont.on{display: block;}

/* warpper - link : signup */
.pull-size{width: 130%;margin-left: -15%; padding:/* 2.625rem*/ 1rem 0;text-align:center;background: #3b3e4a;vertical-align:middle;letter-spacing:0;}
.wrapper-input.link.pull-size{position:absolute;
    width: 100%;
    margin-top: inherit;
    margin-bottom: inherit;
    bottom: 0;
    left: 0%; margin-left:0; border-bottom-left-radius: 0.875rem;}
.wrapper-input.link > span{display:inline-block; vertical-align: middle; color:#bdc2d2; font-size: 0.8125rem; letter-spacing:-0.25px;}
.wrapper-input.link.pull-size > span > a{margin-left: 6px;color: #82a2fd;font-size: 0.8125rem; vertical-align:middle;transition: all .25s;}
.wrapper-input.link.pull-size > span > a:hover{text-decoration:underline}
/* ******************************* */
/* ./ warpper - link : 링크 버튼 영역 */
/* ******************************* */
.link-signup{}
.line-or{position:relative;  margin-top: 0.5rem; width:100%; height: 1px; display: inline-block; background-color: rgba(189, 194, 210, 0.2); }
.or{ position:absolute; display: inline-block; top:50%; left: 50%; transform:translate(-50%, -50%); padding-left: 1.5rem; padding-right: 1.5rem; width: auto;
    font-size: 12px; height: 12px;text-align: center; color: #bdc2d2; background: #33363f; letter-spacing: 0; text-transform: uppercase; }

/* ********** */
/* SNS 아이콘 */
/* ********** */
/* SNS 아이콘 공통 */
.icon{display: inline-block;border-radius: 50%;background:#fff; vertical-align: middle; transition: all 0.25s;}
.nav-li .icon{background:transparent}
.icon-vfun,
.icon-fb,
.icon-gg,
.icon-apple{ display: inline-block; vertical-align:middle; width:1.875rem; height: 1.875rem;}
.icon-vfun { background:url(/static/images/sub/membership/icon-vfun.png) center no-repeat; }
.icon-fb { background:url(/static/images/sub/membership/icon-fb.png) center no-repeat; }
.icon-gg { background:url(/static/images/sub/membership/icon-gg.png) center no-repeat; }
.icon-apple{ background:url(/static/images/sub/membership/icon-apple.png) center no-repeat; }

/* sns 버튼 : 로그인 */
.wrapper-input.sns{ margin-top: 2.125rem; width: calc(100% - 1.25rem);  margin-left: 0.625rem; text-align:center; }
.wrapper-input.sns > .btn-sns{display:inline-block; margin-left:10%; text-align:center; vertical-align: top; color:#fff; font-size: 0.75rem; text-transform:none;}
.wrapper-input.sns > .btn-sns:first-child{margin-left:0;}
/* SNS 아이콘 - 로그인 */
.btn-sns .icon{margin-bottom: 0.625rem;width: 2.75rem; height: 2.75rem;  border:4px solid #bdc2d2;}
.btn-sns .icon-vfun,
.btn-sns .icon-fb,
.btn-sns .icon-fb,
.btn-sns .icon-gg,
.btn-sns .icon-apple{margin-top:0.4375rem; }
.btn-sns .txt{transition: all 0.25s;}
.btn-sns:hover .icon{ background:#fff; border:4px solid #4271f5; }
.btn-sns:hover .txt{ color: #6586e2; }

.btn-login-more{float: right; display: inline-block; padding:0.10rem 0.65rem; text-align:center; font-weight: bold; border-radius: 0.875rem; text-indent: 0; background:#5cd8d9; color: #33363f; font-size: 0.75rem;}

/* SNS 아이콘 - 회원가입 */
a.btn.signup { margin-bottom:0.875rem; padding: 0.5rem 0.625rem; background:#fff; color: #6e788e; clear:both; text-transform: none;}
.btn.signup .icon {float:left;width: 1.75rem; height: 1.75rem; margin-top:0;background:transparent;}
h1 + .btn.signup {background:#6586e2; color:#fff;}
h1 + .btn.signup .icon {background:#fff;}
.btn.signup .icon-vfun,
.btn.signup .icon-fb,
.btn.signup .icon-gg,
.btn.signup .icon-apple{border-radius: 1.75rem;width: 1.75rem;height: 1.75rem;margin-top:0;}
.btn.signup .icon-fb{background-size:1.75rem 1.75rem;}
.btn.signup .icon-gg{background-size:1.75rem 1.6875rem;}
.btn.signup .icon-apple{background-size:1.0625rem 1.1875rem;}
.btn.signup small{font-weight: normal; font-style: normal; vertical-align: middle;}
.btn.signup em{display: inline-block;height: 1.75rem; line-height: 1.68;}

/* ************* */
/* ./ SNS 아이콘 */
/* ************* */
.lastname-bar{position:absolute; left:60%; top: 0 ;top: 0.8125rem; width: 1px; height: 0.875rem;background: #bdc2d2; }
.section-login input[type=text]:focus,
.section-login input[type=password]:focus{ border: 4px solid #4271f5; outline: none; }

.section-login input[type=text].border-none-type:focus,
.section-login input[type=email].border-none-type:focus, .section-login input[type=password].border-none-type:focus { border: none; outline: none; }


/* recaptcht 비활성화 상태 */

.g-recaptcha {
    display: none;
    margin-bottom:5px;
}
.membership .wrap-btn{margin-top:5px;}
.recaptcha-wrap .input-wrap{display:none;}
.recaptcha-wrap.on .g-recaptcha {display: block;}
/* recaptcht on 상태 */
.recaptcha-wrap.on .input-wrap{display:block;}
.input-wrap.remember{margin-bottom: 15px;}


#recaptcha-wrapper{display:none;position:relative;margin-top:0.9375rem;margin-bottom: 1.5rem;text-align:center;height: 78px;}
#recaptcha-wrapper.on{display:block;}
#recaptcha-wrapper.on .g-recaptcha{display: inline-block;position:absolute; left: 50%; /*  304 * 78 */ margin-left: -144px;}
.recaptcha-wrap.on{display:block;height: 78px;}
#recaptcha-wrapper .input-wrap{margin-top:0;}

/* 로그인 오른쪽 영역 */
.box-cont.promote{position: relative; overflow:hidden;/*height:42.21125rem; */text-align:center; padding: 5.4375rem 0 0;}

.area-logo{display: inline-block;
    width: 1.875rem;
    height: 1.875rem;
    background: url(/static/images/sub/membership/vfun-emblem.png) center no-repeat;
    background-size: 100%;
}
.area-greeting{display: inline-block; margin-top: 0.875rem; /* 높이 너비 108 * 45 */width:100%; height: 2.8125rem;background: url(/static/images/sub/membership/txt-greeting.png) center no-repeat; background-size: 6.75rem 2.8125rem;}

.area-character{position:absolute; bottom:0; left: 0; width:100%; height: 14.9rem; }
.area-gamepad{position:relative;  margin-top: -10rem; display: inline-block; /* 높이 너비234 211 */width:100%; height: 13.1875rem;background: url(/static/images/sub/membership/gamepad.png) center no-repeat; background-size: 14.625rem 13.1875rem}
.area-funny{display: inline-block; position: absolute; right:0; bottom:-6rem;/* 높이 너비 262 320 */width:100%; height: 20rem;background: url(/static/images/sub/membership/funny.png) center top no-repeat; background-size: auto 20rem;
animation:funnyPop 2s 0s linear forwards ;
-webkit-animation:funnyPop 2s 0s linear forwards ;
-moz-animation:funnyPop 2s 0s linear forwards ;
-o-animation:funnyPop 2s 0s linear forwards ;
}
.funny-eye{position:absolute; display: inline-block; top: 7.25rem; left:50%; margin-left:-1.875rem;
    width:3.5625rem; height:3.5625rem;
background:url(/static/images/sub/membership/funny-eye.png) center no-repeat;
}

/* 게임 패드 조정 */
.fadeUpDown {animation: updown 2s 1s ease infinite , fadeInUp 1s 0s ease 1}
.fadeDownUp {animation: downup 2s 1s ease-in infinite , fadeInUp 1s 0s ease 1}
@keyframes updown { /* explorer에서 % 인식이 이상하게 반영되어 기존3%에서 10px로 변경 */
    0% {transform:translateY(0%); opacity: 1}
    50% {transform:translateY(10px); opacity: 1}
    100% {transform:translateY(0);opacity: 1}
}
@-webkit-keyframes updown {0% {transform:translateY(0%); opacity: 1}50% {transform:translateY(10px); opacity: 1}100% {transform:translateY(0);opacity: 1}}
@-moz-keyframes updown {0% {transform:translateY(0%); opacity: 1}50% {transform:translateY(10px); opacity: 1}100% {transform:translateY(0);opacity: 1}}
@-o-keyframes updown {0% {transform:translateY(0%); opacity: 1}50% {transform:translateY(10px); opacity: 1}100% {transform:translateY(0);opacity: 1}}
@-ms-keyframes updown {0% {transform:translateY(0%); opacity: 1}50% {transform:translateY(10px); opacity: 1}100% {transform:translateY(0);opacity: 1}}
@keyframes downup {
    0% {transform:translateY(0%);opacity: 1}
    50% {transform:translateY(-10px);opacity: 1}
    100% {transform:translateY(0);opacity: 1}
}
@-webkit-keyframes downup {0% {transform:translateY(0%);opacity: 1}50% {transform:translateY(-10px);opacity: 1}100% {transform:translateY(0);opacity: 1}}
@-moz-keyframes downup {0% {transform:translateY(0%);opacity: 1}50% {transform:translateY(-10px);opacity: 1}100% {transform:translateY(0);opacity: 1}}
@-o-keyframes downup {0% {transform:translateY(0%);opacity: 1}50% {transform:translateY(-10px);opacity: 1}100% {transform:translateY(0);opacity: 1}}
@-ms-keyframes downup {0% {transform:translateY(0%);opacity: 1}50% {transform:translateY(-10px);opacity: 1}100% {transform:translateY(0);opacity: 1}}

.twinkle1{position:absolute;left:50%; /*9*/ margin-left:-3rem; top:-6rem; /* 14 * 16 */ width: 0.875rem; height: 1rem; background: url(/static/images/sub/membership/twinkle-1.png) center no-repeat;
    animation: twinkle 2s 0s infinite ease-in-out;
    -webkit-animation: twinkle 2s 0s infinite ease-in-out;
    -o-animation: twinkle 2s 0s infinite ease-in-out;
    -moz-animation: twinkle 2s 0s infinite ease-in-out;
    opacity:0;
}
.twinkle2{position:absolute;left:50%;/*12*/ margin-left:1.25rem; top:-5rem; /* 8 * 9 */width: 0.5rem; height: 0.5625rem;  background: url(/static/images/sub/membership/twinkle-2.png) center no-repeat;
    animation: twinkle 2s 0.5s infinite ease-in-out;
    -webkit-animation: twinkle 2s 0.5s infinite ease-in-out;
    -o-animation: twinkle 2s 0.5s infinite ease-in-out;
    -moz-animation: twinkle 2s 0.5s infinite ease-in-out;
    opacity:0;}
.twinkle3{position:absolute;left:50%; /*13.25*/margin-left:-1rem; top:-2.25rem;  /* 12 * 13 */ width: 0.75rem; height: 0.8125rem; background: url(/static/images/sub/membership/twinkle-3.png) center no-repeat;
    animation: twinkle 2.5s 0.25s infinite ease-in-out;
    -webkit-animation: twinkle 2.5s 0.25s infinite ease-in-out;
    -o-animation: twinkle 2.5s 0.25s infinite ease-in-out;
    -moz-animation: twinkle 2.5s 0.25s infinite ease-in-out;
    opacity:0;}
.twinkle4{position:absolute;left:50%;/*9.75*/margin-left:3rem; top:-1.75rem;  /* 14 * 16 */ width: 0.875rem; height: 1rem; background: url(/static/images/sub/membership/twinkle-4.png) center no-repeat;
    animation: twinkle 3s 0.75s infinite ease-in-out;
    -webkit-animation: twinkle 3s 0.75s infinite ease-in-out;
    -o-animation: twinkle 3s 0.75s infinite ease-in-out;
    -moz-animation: twinkle 3s 0.75s infinite ease-in-out;
    opacity:0;}
@keyframes twinkle {
    0%{ opacity: 0}
    50%{ opacity: 1}
    100%{ opacity: 0}
}
@-webkit-keyframes twinkle {
    0%{ opacity: 0}
    50%{ opacity: 1}
    100%{ opacity: 0}
}
@-moz-keyframes twinkle {
    0%{ opacity: 0}
    50%{ opacity: 1}
    100%{ opacity: 0}
}
@-o-keyframes twinkle {
    0%{ opacity: 0}
    50%{ opacity: 1}
    100%{ opacity: 0}
}


@keyframes funnyPop {
  /*  0%{ bottom:-10rem;}
    10%{ bottom:-1rem;}
    20%{ bottom:-5rem;}
    30%{ bottom:-1rem;}
    50%{ bottom: 0rem;}
    100%{ bottom: -6rem;}*/
}

.double-blink {
    -webkit-animation: double-blink 4s 0s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    animation: double-blink 4s 0s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    opacity:0;
}

@-webkit-keyframes double-blink {
    0%, 8% {
        opacity:1;
        height: 0;
    }
    10%, 12% {
        opacity:1;
        height: 0;
    }
    13% {
        opacity:1;
        height:0 ;
    }
    14%, 16% {
        opacity:1;
        height: 3.5625rem;
    }
    18%, 100% {
        opacity:1;
        height: 0 ;
    }
}

@keyframes double-blink {
    0%, 8% {
        opacity:1;
        height: 0;
    }
    10%, 12% {
        opacity:1;
        height: 0;
    }
    13% {
        opacity:1;
        height:0 ;
    }
    14%, 16% {
        opacity:1;
        height: 3.5625rem;
    }
    18%, 100% {
        opacity:1;
        height: 0 ;
    }
}

svg {
    width:70%;  margin-top:0; position:absolute;left: -4rem;
    top: -81rem;
    z-index: 0;
    transform: rotate(176deg);
}
svg path{
    d:path('M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45	c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2	c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7	c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z');
    animation: morph 5s infinite;
}

@keyframes morph {
    0%, 100%{
        /*d:path('M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45	c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2	c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7	c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z');*/
        d:path('M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45	c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2	c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7	c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z');
    }
    50%{
        d:path('M51,171.3c-6.1-17.7-15.3-17.2-20.7-32c-8-21.9,0.7-54.6,20.7-67.1c19.5-12.3,32.8,5.5,67.7-3.4C145.2,62,145,49.9,173,43.4 c12-2.8,41.4-9.6,60.2,6.6c19,16.4,16.7,47.5,16,57.7c-1.7,22.8-10.3,25.5-9.4,46.4c1,22.5,11.2,25.8,9.1,42.6	c-2.2,17.6-16.3,37.5-33.5,40.8c-22,4.1-29.4-22.4-54.9-22.6c-31-0.2-40.8,39-68.3,35.7c-17.3-2-32.2-19.8-37.3-34.8	C48.9,198.6,57.8,191,51,171.3z')
    }
}

.txt-info{
    margin-bottom: 3.25rem;
    width: 110%;
    margin-left: -5%;
    font-size: 1.125rem;
    text-align:center;
    color:#fff;
    word-break: keep-all;
}

:lang(jp) .txt-info, :lang(jp) .small-grey,
:lang(tw) .txt-info, :lang(tw) .small-grey,
:lang(cn) .txt-info, :lang(cn) .small-grey,
:lang(zh) .txt-info, :lang(zh) .small-grey,
:lang(th) .txt-info, :lang(th) .small-grey{word-break: break-all;}
.small-grey{
    display: block;
    margin-top:0.625rem;
    width:100%;
    font-size: 0.875rem;
    line-height: 1.7;
    color: #bdc2d2;
    word-break: keep-all;
    letter-spacing:0;
}
.txt-info a{color: #bdc2d2; text-decoration: none;}
.cont table {width: 110%;margin-left: -5%;}
td.bg-grey{background: rgba(255,255,255,0.1);}
td.small-grey{
    display: table-cell;
    width: auto;
    min-width: 6rem;
    padding: 0.5rem;
    border: 1px solid #53555d;
}
.sns-agree-info + .txt-info{
    font-size: 0.75rem;
}
.sns-agree-info{
    margin:3rem auto 1.25rem;
    width: 100%;
}
.sns-agree-info th{
    padding: 0.75rem;
    font-weight: bold;
    font-size: 0.875rem;
    text-transform:uppercase;
    background: #4271f5;
    color:#fff;
}

.sns-agree-info td {
    font-size: 0.875rem;
    padding: 0.75rem 0.875rem;
    vertical-align: middle;
    border-bottom: 1px solid #bdc2d2;
    color: #33363f;
    background:#fff;
}

.sns-agree-info td .circle{
    position:relative;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 0.875rem;
    width: 1.4375rem;
    height: 1.4375rem;
    border: 2px solid #3567ff;
    background: transparent;
}


.sns-agree-info td .circle:after {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 50%;
    margin-left:-0.25rem;
    width: 9px;
    height: 7px;
    background: url(/static/images/sub/membership/step-on.png) center top no-repeat;
    background-size:100%;
}

.tui-datepicker {
    border: 1px solid #33363f;
    position: absolute;
    margin-left: -136px;
    left: 50%;
    top: -200px;
    z-index: 99;
}
#calendar.shadow-on{display:block;z-index:9998;}
@media screen and (max-width: 1920px){
/*    #content.bg-space {background: url(/static/images/sub/membership/bg-all-min.jpg) right bottom no-repeat; background-size:cover;*/

}
@media screen and (max-width: 1280px){

    h1.mb60{margin-bottom: 2rem !important;}
    #content.bg-space {background-position:right bottom; background-size: cover;}
    .section-login .box{ width: 60%; height: auto; left:5%;}
    /* deletion */
    .section-login .box.wide{width: 80%;left: 10%;}

    .area-funny {bottom: -5rem;height: 16rem;background-size: auto 16rem;}
    .funny-eye{ top: 5.8rem; margin-left: -1.5rem; width: 2.85rem; height: 2.85rem;}
    .wrapper-input .eyes {top: 0.875rem;}
    .box-cont.left {padding: 1.8rem 7% 1.5rem;}
    .box-cont h1 {font-size: 2rem;}
    .box-cont h1.mb20{margin-bottom:0.5rem !important;}
    /* 스텝 박스 사이즈*/
    .pull-size {padding: 0.8rem 0 0.75rem;}
    .step > .bar {top: 1.75rem;}
    .wrapper-input.mb10{margin-bottom: 0.5rem !important}




}

@media screen and (max-width: 1024px) {
    .section-login input[type=text], .section-login input[type=email], .section-login input[type=password],
    input[type=email]:disabled, input[type=email]:read-only, input[type=file]:disabled, input[type=file]:read-only, input[type=password]:disabled, input[type=password]:read-only, input[type=text]:disabled, input[type=text]:read-only,
    .section-login input[type=text].border-none-type:read-only, .section-login input[type=email].border-none-type:read-only, .section-login input[type=password].border-none-type:read-only, .section-login input[type=text]:read-only, .section-login input[type=email]:read-only, .section-login input[type=password]:read-only {
        font-size: 1rem !important;
        padding: 0.75rem 1.25rem;
        border-width: 2px;
        color:#9ea1a9 !important;
    }

    .btn.round-type,  .wrapper-input.link > a, .wrapper-input.link > span > a {font-size: 1rem;}
    .btn-sns .txt{ font-size: 1rem;}
    .label-chk-sns{font-size: 0.875rem; font-weight: 300;}
    .section-login .wrapper-input.border-type {
        border-width: 2px;
    }
    .section-login .wrapper-input.border-type{
        border-width: 2px;
    }
    .section-login input[type=text]:focus,
    .section-login input[type=email]:focus,
    .section-login input[type=password]:focus{ border-width: 2px}


    .wrapper-input .eyes {top: 1.125rem;}

    section h1 {padding-bottom: 0;}
    .box-cont h1 {line-height: 3.25rem;}
    .label-chk-sns {letter-spacing: 0.25px;}

    .line-or {margin-bottom: 1rem;margin-top: 1rem;}


}
/*************************/
/*********edit profile and signin js and css ****************/
/*************************/

@media screen and (max-width: 900px) {

    .bg-motion{/*background: none;*/}

    #content.bg-space{
        min-height: calc(100vh - 10.55rem) !important; background-size: cover;
        height: auto;
        background-position: 100% 0;
    }
    .bg-motion{background: none;}

    section {height: 100%;}
    section:last-of-type{margin-bottom:inherit;}
    .section-login .box{position:relative; display: inline-block; width: 70%;height: auto;left:inherit; margin-left:15%;
        transform: translateY(0); margin-top:4rem; margin-bottom: 4rem; background:rgba(51, 54, 63, .95);
    }

    h1 + .pull-size {width: 116%;margin-left: -8%;margin-top:20px;}
    .wrapper-input.link.pull-size{width: 100%;margin-left: 0;left: 0;}
    .box-cont.left{float:none;width:100%; border-top-right-radius: 0.875rem;border-bottom-right-radius: 0.875rem;background:transparent;}
    .box-cont.right{display: none;}
    .section-login .wrapper-input.save-id{margin-top:1.25rem; margin-bottom:1.25rem;}

    .tui-datepicker{
        z-index: 99;
        left: 50%;
        top: -212px;
        margin-left: -136px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .ul-step li:last-child {
        margin-right: -1.45rem;
    }

}

@media screen and (orientation: portrait) and (max-width: 1024px) {

    #content.bg-space {
        background-position:100% -20%;
        background-size: auto 100%;
    }
    .bg-motion{/*background: none;*/}
    section {height: 100%;}
    .section-login .box{ top: 22%; width: 80%;height: auto; left: 10%;
        transform: translateY(0) ;
    }
}

@media screen and (orientation: portrait) and (max-width: 900px) {
    #content.bg-space{background-position: 100% 0;background-size:cover}
    section {height: 100%;}
    section:last-of-type{margin-bottom:inherit;}
    .section-login .box{position:relative; display: inline-block; width: 70%;height: auto;left:inherit;margin-left:15%;
        transform: translateY(-20%); margin-top:4rem; margin-bottom: 4rem;
    }

    /* deletion */
    .section-login .box.wide{width: 70%;left:inherit;margin-left: 15%;}

    .box-cont.left{float:none;width:100%; border-top-right-radius: 0.875rem;border-bottom-right-radius: 0.875rem;}
    .box-cont.right{display: none;}
}

@media screen and (max-width: 640px){

    .bg-motion{background: none;}
    .section-login .box{ width: 90%;height: auto;left:inherit; margin-left:5%; margin-top: 0rem;}

    /* deletion */
    .section-login .box.wide{width: 90%;margin-left: 5%;}
}