@charset "UTF-8";

html,
body {
    background-color: transparent;
}

body {
    max-width: 2560px;
    min-width: inherit;
    margin: 0 auto;
    background-image: url(../../img/common/common_pattern_bg.jpg), url(../../img/common/common_pattern_bg.jpg);
    background-position: 0 0, 100% 0;
    background-repeat: repeat-y;
    background-size: calc((100% - 2560px)/2), calc((100% - 2560px)/2);
}

/* Container */
.contents_container {
    margin: 0 auto;
}

.container_join {
    min-height: calc(100vh - 230px - 35px);
    padding: 10px 0 80px 0;
}

.container_join h2 {
    margin-bottom: 20px;
    font-size: 35px;
    padding: 45px 0 0;
}

.container_join .content {
    max-width: 400px;
}

.container_login {
    padding: 100px 0 0;
    overflow-x: hidden;
}

/* account header 공통 */
.account_header_wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    overflow: hidden;
    width: 100%;
    height: 65px;
    background: rgba(0, 0, 0, 0.9);
    -webkit-transition: 0.35s;
    transition: 0.35s;
}

.account_header_wrap.open {
    height: 335px;
    box-sizing: border-box
}

.account_header_wrap .logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 210px;
    height: 65px;
    box-sizing: border-box
}

.account_header_wrap .logo a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-size: 0
}

.account_header_wrap .logo a img {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.account_header_wrap .btn_all_menu {
    display: block;
    position: absolute;
    top: 0;
    left: 210px;
    width: 60px;
    height: 65px;
    box-sizing: border-box;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3)
}

.account_header_wrap .btn_all_menu span {
    position: absolute;
    left: 14px;
    width: 30px;
    height: 2px;
    box-sizing: border-box;
    background: #f0f0f2
}

.account_header_wrap .btn_all_menu>span:nth-child(1) {
    top: 23px
}

.account_header_wrap .btn_all_menu>span:nth-child(2) {
    top: 32px
}

.account_header_wrap .btn_all_menu>span:nth-child(3) {
    top: 41px
}

.account_header_wrap nav>ul {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    position: absolute;
    top: 65px;
    left: 0;
    z-index: 10;
    border-top: 1px solid rgba(255, 255, 255, 0.3)
}

.account_header_wrap nav>ul>li {
    min-width: 150px;
    padding-bottom: 38px;
    box-sizing: border-box
}

.account_header_wrap nav>ul>li>a {
    display: block;
    padding: 38px 0;
    text-align: center;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: normal
}

.account_header_wrap nav>ul>li .sub_menu>ul>li>a {
    display: block;
    text-align: center;
    line-height: 2.142;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: normal
}

.account_header_wrap nav .util_wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    top: 0;
    right: 0;
    height: 65px
}

.account_header_wrap nav .util_wrap ul {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
    height: 65px;
    box-sizing: border-box;
    margin-right: 50px
}

.account_header_wrap nav .util_wrap ul li {
    position: relative;
    margin-left: 30px;
    padding-left: 30px
}

.account_header_wrap nav .util_wrap ul li:first-child {
    margin-left: 0;
    padding-left: 0
}

.account_header_wrap nav .util_wrap ul li:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 4px;
    width: 1px;
    height: 12px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.3)
}

.account_header_wrap nav .util_wrap ul li a {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal
}

.account_header_wrap nav .util_wrap .btn_acoin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 290px;
    height: 100%;
    box-sizing: border-box;
    background: #9d7d57;
    font-size: 19px;
    color: #fff;
    font-weight: normal
}

.content {
    position: relative;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    box-sizing: border-box;
}

.content.center {
    text-align: center;
}

.max-500 {
    max-width: 500px;
    box-sizing: border-box;
}

.content>.agree_wrap,
.content>.box_join {
    max-width: 600px;
    margin-top: 40px;
}

.content>.agree_wrap .btn_wrap {
    justify-content: space-between;
}

.content>.agree_wrap .btn_wrap.single_btn_wrap {
    justify-content: center;
}

.content>.agree_wrap .btn_wrap .btn_big {
    min-width: 294px;
}

.content.sha_login_content {
    max-width: 1250px;
    padding: 0 25px;
}

.container_login .sha_login_content {
    min-height: calc(100vh - 35px - 230px - 144px - 100px);
}

h2 {
    margin-bottom: 45px;
    padding: 65px 0 42px;
    font-size: 45px;
    font-weight: normal;
    text-align: center;
}

h2.line {
    border-bottom: 2px solid #555
}

/* email_confirm */
.email_confirm .btn_wrap {
    margin-top: 40px;
}

.email_confirm .box_white.mid_pad {
    padding: 70px 139px;
}

.email_confirm .recaptcha_msg {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 정리전 */
.login_content_wrap {
    position: relative;
    box-sizing: border-box;
}

.login_content_wrap .login_box_wrap {
    width: 100%;
    box-sizing: border-box;
    margin-top: 40px;
}

.login_content_wrap .login_box_wrap .custom_check {
    margin-top: 10px;
}

.steam_login_wrap .steam_login_info p {
    display: block;
    position: relative;
    font-size: 15px;
    color: #797979;
    line-height: 1.6;
    padding-left: 13px;
    text-indent: -13px;
}

.steam_login_wrap .steam_login_info .dot:before {
    content: '';
    display: inline-block;
    position: relative;
    width: 2px;
    height: 2px;
    top: -4px;
    margin-right: 7px;
    background: #b3b3b3;
}

.steam_login_wrap .steam_login_info .go_steam {
    color: #086497;
    padding-right: 4px;
    margin-left: 5px;
    font-size: 15px;
    -webkit-transition: filter .3s;
    transition: filter .3s;
}

.steam_login_wrap .steam_login_info .go_steam:after {
    content: '';
    display: inline-block;
    position: relative;
    top: -2px;
    padding: 3px;
    border: solid #086497;
    border-width: 0 1px 1px 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: filter .3s;
    transition: filter .3s;
}

.login_content_wrap .login_title {
    display: block;
    margin: 0;
    padding: 0;
    color: #1e1e1e;
    font-size: 28px;
    text-align: center;
}

.login_content_wrap .login_title img {
    width: 16rem;
    max-width: 256px;
    max-height: 32px;
}

.box_login {
    width: 100%;
    margin: 0 auto;
}

.box_login ul {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 393px;
}

.box_login ul li+li {
    margin-top: 15px;
}

.box_login ul li:last-child {
    margin-top: 30px;
}

.box_login ul li .btn_mid {
    width: 100%;
    height: 56px;
    line-height: 56px;
    font-size: 16px;
}

.box_login .box_join {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0 35px;
}

.box_login .box_join a {
    display: block;
    position: relative;
    padding: 0 20px;
    font-size: 14px;
    color: #797979;
    text-align: center;
    flex-shrink: 0;
}

.box_login .box_join a:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 4px;
    width: 1px;
    height: 13px;
    background-color: #d5d5d5
}

.box_login .box_join a:first-child {
    padding-left: 0;
}

.box_login .box_join a:first-child:before {
    display: none
}

.box_login .box_join a:last-child {
    padding-right: 0;
}

.box_login .toggle_wrap {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.box_login .toggle_wrap .balloon_box {
    left: 74%;
    -webkit-transform: none;
    transform: none;
}

.box_login .toggle_wrap .balloon_box::before {
    display: none;
}

.box_join_main {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.box_join_main ul li {
    margin-top: 15px
}

.box_join_main ul li:first-child {
    margin-top: 0
}

.box_join_main ul li .btn_mid {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90px;
    font-size: 24px
}

.box_join_main ul li .btn_mid::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 25px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: translate3d(-0.4rem, 0, 0) rotate(45deg);
    transform: translate3d(-0.4rem, 0, 0) rotate(45deg);
    -webkit-transition: transform .3s;
    transition: transform .3s;
}

.box_join_main ul li a {
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
}

.box_join {
    width: 100%;
    padding-top: 0
}

.box_join,
.agree_wrap {
    position: relative;
    width: 100%;
    margin: 40px auto 0 auto;
}

.box_join ul.bullet_list+.custom_input,
.box_join .custom_input+.custom_input {
    margin-top: 15px
}

.icon_box {
    position: relative;
    margin-bottom: 40px;
    padding-top: 100px;
    text-align: center
}

.icon_box.pp_policy {
    padding-top: 0;
}

.pp_btn_wrap {
    margin-top: 2rem;
}

.steam_login_box {
    box-sizing: border-box;
    padding: 44px 0;
    background: #f1f1f1;
}

.steam_login_box>h2 {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    height: auto;
    border-bottom: none;
}

.steam_login_box .btn_steam_login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 393px;
    height: 56px;
    padding: 0 10px;
    text-align: center;
    box-sizing: border-box;
    background-image: -webkit-linear-gradient(to right, #1173b4, #084e92);
    background-image: linear-gradient(to right, #1173b4, #084e92);
    font-size: 16px;
    color: #fff;
    border-radius: 4px;
    -webkit-transition: filter .3s;
    transition: filter .3s;
}

.steam_login_box .btn_steam_login:focus {
    -webkit-filter: saturate(1.4);
    filter: saturate(1.4);
}

.steam_login_box .btn_steam_login .pi {
    flex: 0 0 auto;
    content: '';
    display: inline-block;
    margin-right: 10px;
}

.steam_login_box .btn_steam_login span {
    padding-bottom: 2px;
}

.check_login_wrap {
    margin: 0 auto 100px auto;
}

.check_login_wrap .btn_wrap,
.check_login_wrap .box_wrap {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.check_login_wrap .btn_wrap {
    margin-top: 1rem;
}

.check_login_wrap.login_content_wrap .login_box_wrap {
    margin-top: 0;
}

.check_login_wrap .content_title {
    padding: 0 0 1.24rem 0;
    border-bottom: none;
    font-size: 28px;
    text-align: center;
    color: #2f346a;
}

.check_login_wrap .desc_wrap {
    margin: 0 auto 2.24rem auto;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    color: #3d3d3d;
}

.check_login_wrap .box_wrap {
    border: 2px solid #2f346a;
    border-radius: 4px;
    padding: 3rem 1.58rem;
    text-align: center;
    box-sizing: border-box;
}

.check_login_wrap .box_wrap .box_btn_wrap {
    margin-top: 2.4rem;
}

.check_login_wrap .box_wrap .bold_text {
    margin: 0.6rem 0 0.4rem 0;
    font-size: 24px;
    color: #1e1e1e;
}

.check_login_wrap .box_btn_wrap+.desc_center {
    margin: 1rem auto 0;
}

.check_login_wrap .link_wrap {
    margin-top: 1.8rem;
    font-size: 0.86em;
    text-align: center;
}

.check_login_wrap .nickname {
    font-size: 18px;
}

.check_login_wrap .desc_center {
    font-size: 14px;
    text-align: center;
    color: #797979;
}

.check_login_wrap .icon_character_area {
    width: 5.625rem;
    height: 5.625rem;
}

/* email auth modal */
.modal_dim {
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 104;
}

.modal_recapcha {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    z-index: 105;
    box-sizing: border-box;
    overflow: hidden;
    transform: translate3d(-50%, -50%, 0);
    transition: padding 0.5s ease, width 0.5s ease, height 0.5s ease
}

.modal_recapcha .recaptcha_wrap,
.modal_recapcha .recapcha {
    margin: 0;
}

.modal_recapcha .btn_close {
    position: absolute;
    right: 10px;
    top: 10px;
    display: inline-block;
    width: 20px;
    height: 20px;
    z-index: 3;
    margin-left: -1px;
    opacity: 0;
    transition: opacity 0.2s;
}

.modal_recapcha .btn_close:before {
    display: none;
}

.modal_recapcha .btn_close span {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 25px;
    height: 2px;
    box-sizing: border-box;
    background: #666666;
    -webkit-transition: background-color .3s ease;
    transition: background-color .3s ease;
}

.modal_recapcha .btn_close span:nth-child(1) {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 45deg);
    transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 45deg);
}

.modal_recapcha .btn_close span:nth-child(2) {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 135deg);
    transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 135deg);
}

.modal_recapcha.active {
    width: 304px;
    height: auto;
}

.modal_recapcha.active .btn_close {
    opacity: 1;
}

/* sns_register_wrap */
.sns_register_wrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 70px 0 45px;
}

.sns_register_wrap .sns_login_text {
    text-align: center;
    display: block;
    margin-bottom: 25px;
    padding-top: 25px;
    font-size: 1.1rem;
    color: #555;
    border-top: 1px solid #eaeaea;
}

.sns_register_wrap ul li {
    position: relative;
    margin-top: 10px
}

.sns_register_wrap ul li .sns {
    display: block;
    width: 65px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    font-size: 0;
    cursor: pointer;
}

.sns_register_wrap ul li .sns_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    position: relative;
    background-color: #f8f8f8;
    border: 1px solid #c6c6c6;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 17px;
    color: #000
}

.sns .pi {
    display: block;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

.icon_box .icon {
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: 81px;
    height: 81px
}

/* 정리 */
.icon_box .icon .pi {
    display: block;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}


.icon_box h3 {
    font-size: 30px;
    font-weight: normal;
    color: #2b2f5a;
}

.icon_box .h3_desc {
    display: block;
    margin-top: 14px;
    font-size: 15px;
    color: #3d3d3d
}

.icon_box .h3_desc.lh {
    line-height: 1.5;
}

.icon_step_box {
    position: relative;
    text-align: center;
}

.icon_step_box.main_step {
    padding-top: 0px;
    margin: 60px 0 40px;
}

.icon_step_box+div {
    margin-top: 40px;
}

/* icon_step_box */
.icon_step_box .pi_member_step {
    display: block;
    margin: 0 auto 30px;
}

.icon_step_box h3 {
    font-size: 26px;
    color: #2b2f5a;
    font-weight: normal;
}

.icon_step_box .h3_desc {
    display: block;
    margin-top: 20px;
    font-size: 15px;
    color: #757575;
    font-weight: normal
}

.box_white {
    padding: 45px;
    margin: 0 0 20px;
    overflow: hidden;
    border: 1px solid #b3b3b3;
    background-color: #fff
}

.box_flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.box_white.mid_pad {
    padding: 70px 60px
}

.mid_pad.padding_small {
    padding: 45px 60px;
}

.mid_pad_title {
    font-size: 1.4rem;
    text-align: center;
    line-height: 1.4;
}

.mid_pad_desc {
    font-size: 1rem;
    text-align: center;
    line-height: 1.4;
}

.mid_pad_title+.mid_pad_desc {
    margin-top: 1rem;
}

.mid_pad_btn_wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.mid_pad_btn {
    margin: .4rem;
    height: auto;
    min-height: 2.916rem;
}

.box_white.big_pad {
    padding: 100px 55px
}

.box_white .text_complete {
    display: block;
    margin: 30px 0;
    text-align: center;
    font-size: 17px;
    color: #000;
    line-height: 1.5;
}

.box_white .text_complete:first-child {
    margin-top: 0;
}

.box_white .text_complete .limited_time>em {
    color: #7b4c29;
    font-style: normal;
}

.box_white .text_complete .guide_info_title {
    display: inline-block;
    margin-bottom: 20px;
}

.box_white .text_complete .guide_info {
    display: inline-block;
    text-align: left;
}

.box_white .text_complete .timer_wrap {
    margin-top: 2em;
    font-size: 17px;
}

.box_white .text_complete .timer {
    color: #931313;
}

.box_white .payment_area {
    padding: 1rem 0 2.5rem;
    text-align: left;
}

.box_white .payment_area .title {
    display: block;
    margin: 0 0 10px;
    text-align: left;
    font-size: 17px;
    color: #4f4f4f;
}

.box_white .period_list {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem;
    border: 1px solid #e2e2e2;
}

.box_white .period_list li {
    display: inline-block;
    margin: 0 3rem 0 0;
}

.box_white .agree_link_copy {
    display: inline-block;
    font-size: 15px;
    text-align: center;
    color: #286bc6;
    text-decoration: underline;
}

.leave_page .btn_wrap {
    margin: 2.0833rem 0 0;
}

.text_purging {
    display: block;
    margin-bottom: 40px;
    font-size: 15px;
    color: #E74C3C;
    text-align: center
}

.text_verification {
    display: block;
    text-align: center;
    line-height: 2;
    font-size: 15px;
    color: #000
}

.text_verification+.custom_input_wrap {
    margin-top: 25px;
}

.box_email {
    text-align: center
}

.box_email>span {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-bottom: 30px;
    padding: 15px 85px;
    background: #ececec;
    font-size: 20px;
    color: #2e3b7d;
    vertical-align: middle;
    text-align: center
}

.addemailcomplete .box_email>span {
    margin-bottom: 0;
}

.box_email.box_email_between>span {
    justify-content: space-between;
}

.box_email>span span {
    width: calc(100% - 12rem);
    text-align: center;
}

.box_email>span #btnMailSend {
    flex-shrink: 0;
    width: 11rem;
    padding: 0 0.5rem;
    margin-left: 1rem;
}

.icon_complete {
    display: block;
    width: 125px;
    height: 109px;
    box-sizing: border-box;
    margin: 0 auto;
    margin-bottom: 35px
}

.icon_complete .pi {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.authentication_wrap {
    width: 619px;
    margin: 0 auto
}

.box_authentication {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    margin-bottom: 20px;
    border: 1px solid #b3b3b3;
    box-sizing: border-box;
}

.box_authentication .inner {
    float: left;
    width: 50%;
    padding: 0 24px 21px;
    box-sizing: border-box;
    border-right: 1px solid #b3b3b3;
    border-bottom: 1px solid #b3b3b3;
    margin-bottom: -1px
}

.box_authentication .inner:nth-child(2n) {
    border-right: 0
}

.box_authentication .inner h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    border-bottom: 1px solid #efefef;
    font-size: 18px;
    color: #000;
    text-align: center;
    line-height: 1.4;
}

.box_authentication .inner .icon {
    position: relative;
    display: block;
    width: 70px;
    height: 115px;
    margin: 0 auto;
    box-sizing: border-box
}

.box_authentication .inner .icon .pi {
    display: block;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.box_authentication .inner .btn_wrap .btn_mid {
    width: 100%
}

.content_text_box {
    text-align: center;
    margin-bottom: 0rem;
    padding-top: 4rem;
}

.content_text_box h2 {
    padding: 0;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    color: #2b2f5a;
    border-bottom: none;
}

.btn_auth_confirm {
    width: 100%;
}

.authentication_wrap.col3 {
    width: 100%
}

.authentication_wrap.col3 .inner {
    width: 33.33%
}

.authentication_wrap.col3 .inner:nth-child(2n) {
    border-right: 1px solid #b3b3b3
}

.authentication_wrap.col3 .inner:nth-child(3n) {
    border-right: 0
}

.check_list {
    position: relative
}

.check_list dl {
    margin-top: 30px
}

.check_list dl:first-child {
    margin-top: 0
}

.check_list dl dt {
    position: relative;
    margin-bottom: 0.5em;
    padding-left: 21px;
    font-size: 17px;
    color: #000;
    font-weight: bold
}

.check_list dl dt .pi {
    display: block;
    position: absolute;
    left: 0;
    top: 4px;
}

.check_list dl dd {
    position: relative;
    padding-left: 8px;
    font-size: 14px;
    color: #3d3d3d;
    line-height: 1.785
}

.check_list dl dd:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 11px;
    width: 2px;
    height: 2px;
    background-color: #c4c4c4
}

.check_list .box_gray {
    background: #f9f9f9;
    padding: 30px
}

.check_list dl+.box_gray {
    margin-top: 15px
}

.list_table {
    margin: 25px 0 1.2em 0;
}

.list_table th,
.list_table td {
    vertical-align: middle;
}

.list_table .td_game {
    width: 280px;
}

.list_table .td_cash {
    min-width: 320px;
    margin-right: 34px;
    font-size: 15px;
    font-weight: bold;
    text-align: right;
    color: #3d3d3d;
}

.list_table .td_cash em {
    color: #a3a3a3;
}

.list_table .td_info {
    display: flex;
    align-items: center;
}

.list_table .td_link {
    text-align: right;
}

.list_table .td_link .btn {
    min-width: 140px;
}

.leave_list {
    position: relative
}

.leave_list .blue {
    color: #286bc6;
}

.leave_list tbody td {
    padding: 12px;
}

.leave_list tr:first-child {
    border-top: 1px solid #656565;
}

.leave_list dl {
    margin-top: 30px
}

.leave_list dl a {
    display: block;
    margin-top: 5px;
}

.leave_list dl:first-child {
    margin-top: 0
}

.leave_list dl dt {
    position: relative;
    margin-bottom: 10px;
    padding-left: 21px;
    font-size: 17px;
    color: #000;
    font-weight: bold
}

.leave_list dl dt .pi {
    display: block;
    position: absolute;
    left: 0;
    top: 4px;
}

.leave_list dl dd {
    position: relative;
    padding-left: 8px;
    font-size: 14px;
    color: #3d3d3d;
    line-height: 1.785
}

.leave_list dl dd:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 11px;
    width: 2px;
    height: 2px;
    background-color: #c4c4c4
}

.leave_list .box_gray {
    margin-top: 0.8em;
    background: #f9f9f9;
    padding: 26px 30px;
}

.remaining_coins {
    line-height: 1.8;
    font-size: 14px;
    color: #3d3d3d;
    font-weight: normal
}

.remaining_coins .custom_check input[type="checkbox"]+label:before {
    margin: 10px 10px 10px 0
}

.remaining_coins h4 {
    font-size: 15px;
    color: #000;
    font-weight: bold
}

.remaining_coins h4 span.user_id {
    color: #E74C3C
}

.remaining_coins h4~h4 {
    margin-top: 25px
}

.remaining_coins a {
    color: #286bc6
}

.remaining_coins ul {
    padding-left: 10px
}

.remaining_coins ul li {
    position: relative;
    padding-left: 10px;
    font-size: 14px;
}

.remaining_coins ul li:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 11px;
    width: 2px;
    height: 2px;
    background-color: #c4c4c4;
}

.leave_agreement {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
}

.leave_agreement .custom_check+.custom_check {
    margin-top: 6px;
}

.text_complete_box {
    position: relative;
    display: block;
}

.btn_account_list {
    width: 731px;
    max-width: 100%;
    margin-bottom: 20px;
    text-align: right;
}

.btn_account_list input {
    max-width: 100%;
}

.my_account_list {
    width: 695px;
    margin: 0 auto 40px
}

.my_account_list .my_account_list_item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 52px;
    padding: 16px 29px;
    margin-top: 1px;
    background-color: #ececec;
    box-sizing: border-box
}

.my_account_list .my_account_list_item:first-child {
    margin-top: 0
}

.my_account_list .my_account_list_item .th {
    position: relative;
    display: inline-block;
    width: 170px;
    font-size: 15px;
    color: #000;
    vertical-align: middle
}

.my_account_list .my_account_list_item .th:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 2px;
    width: 1px;
    height: 16px;
    background-color: #b9b9b9
}

.my_account_list .my_account_list_item .td {
    display: inline-block;
    width: 460px;
    padding-left: 30px;
    font-size: 15px;
    color: #000;
    vertical-align: middle;
    box-sizing: border-box
}

.my_account_list .my_account_list_item .td.blue {
    color: #2e3b7d
}

.my_account_list .my_account_list_item .user_id {
    display: inline-block;
    width: 100%;
    padding-right: 200px;
    text-align: left;
    font-size: 15px;
    color: #2e3b7d;
    box-sizing: border-box
}

.my_account_list .my_account_list_item .btn_find_pass {
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.sns_login_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    max-width: 393px;
}

.sns_login_title::before,
.sns_login_title::after {
    flex: 0 1 100%;
    display: block;
    height: 1px;
    background: #ebebeb;
    content: '';
}

.sns_login_title .text {
    flex: 0 0 auto;
    position: relative;
    display: block;
    margin: 0 2em;
    box-sizing: border-box;
    font-size: 14px;
    color: #515151;
    text-align: center;
}

.sns_login_wrap {
    position: relative;
    margin: 0 auto;
    padding: 25px 0;
}

.sns_login_wrap .btn_sns_more {
    margin: 0 auto;
    width: auto;
}

.sns_login_wrap .btn_sns_more .sns_close {
    display: none;
}

.sns_login_wrap .btn_sns_more.active .sns_more {
    display: none;
}

.sns_login_wrap .btn_sns_more.active .sns_close {
    display: block;
}

/*비밀번호 찾기*/
.find_pw_wrap .ask_text {
    display: inline-block;
    float: right;
    margin: 0 0 10px;
    text-align: right;
    font-size: 13px;
    color: #457fce;
}

.find_pw_wrap .btn_wrap {
    margin: 40px 0 0 0;
}

.find_area {
    padding: 0 70px
}

.find_area .find_send_mail {
    text-align: center;
    margin-bottom: 1.5rem;
}

.find_area .text_verification+.custom_input,
.find_area .btn_wrap {
    margin-top: 25px;
}

.find_area .mail_address+.input_box {
    margin-top: 30px;
}

.find_area .input_box+.input_box {
    margin-top: 14px;
}

.select_birth {
    overflow: hidden;
    margin-top: 12px;
}

.container_join .select_birth.input_margin {
    margin-top: 0;
    margin-bottom: 22px;
}

.container_join .select_birth .error_link {
    display: inline-block;
    font-size: 13px;
    padding-left: 21px;
    -webkit-transition: color .2s;
    transition: color .2s;
}

.select_birth .label_text {
    margin-bottom: 10px;
}

.select_birth .custom_wrap {
    float: left;
    width: 32%;
}

.select_birth .custom_wrap+.custom_wrap {
    margin-left: 2%;
}

.select_birth_wrap {
    display: flex;
}

.select_birth_wrap .custom_wrap.order_1 {
    order: 1;
    margin-left: 0;
    margin-right: 2%;
}

.select_birth_wrap .custom_wrap.order_2 {
    order: 2;
    margin-left: 0;
    margin-right: 2%;
}

.select_birth_wrap .custom_wrap.order_3 {
    order: 3;
    margin-left: 0;
    margin-right: 0;
}

/* 이용 가능한 서비스 */
.service_list_wrap {
    display: none;
}

.service_list_wrap+.agree_wrap {
    margin-top: 20px;
}

.service_list {
    display: flex;
    flex-wrap: wrap;
}

.service_list .service_item {
    margin: 0 5px 5px 0;
}

.service_list .service_item .item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 13px 7px 13px;
    font-size: .8rem;
    color: #3d3d3d;
    border-radius: 15px;
    background: #f4f4f4;
    box-sizing: border-box;
    transition: background 0.3s, color 0.3s;
}

.service_list .service_item a.item {
    color: rgba(43, 48, 90, .9);
}

.service_list .service_item a.item:after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 2px 0 0 5px;
    background: url('../../img/common/icon/icn_external.svg') no-repeat center center;
    background-size: contain;
    transition: background 0.3s;
}

.service_list_wrap .service_desc {
    margin: .5rem 0;
    font-size: 13px;
    color: #3d3d3d;
    line-height: 1.5;
}

/* 회원탈퇴 */
#frmLeaveReq .btn_wrap {
    margin-top: 2rem;
}

/*사용 여부 확인 필요함 todo*/
/*.find_area .select_birth .custom_select.sel_year { width:224px }
.box_join .select_birth .custom_select.sel_year { width:206px }*/
.box_join .sel_country {
    width: 100%;
    margin-top: .7rem
}

.phoneauth_area .input_area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap
}

.phoneauth_area .input_area .custom_input {
    width: calc(100% - 183px);
}

.phoneauth_area .input_area input[type='text'] {
    height: 53px
}

.phoneauth_area .input_area label {
    font-size: 16px
}

.phoneauth_area .bullet_list {
    margin-bottom: 20px
}

.phoneauth_area .btn {
    width: 175px;
    height: 55px;
    margin-left: 5px
}


/* 예외 구문 */
.container.oauth .agree_wrap {
    margin-top: 20px;
}

/* dormant */
.dormant_box ul {
    display: flex
}

.dormant_box ul li {
    position: relative;
    text-align: left;
    font-size: 1rem;
    color: #2e3b7d;
    font-weight: bold
}

.dormant_box ul li.lable {
    display: inline-block;
    width: 35%
}

.dormant_box li.lable {
    color: #000
}

.dormant_box li.lable:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    right: 2rem;
    height: 100%;
    border-right: 1px solid #bababa
}

.dormant_box .dormant_info {
    display: block;
    box-sizing: border-box;
    padding: 1.5rem 0.5rem 3.5rem
}

.dormant_box .dormant_info p {
    position: relative;
    font-size: 0.875rem;
    color: #515151;
    line-height: 1.5
}

.dormant_box .dormant_info p:before {
    content: '·';
    position: absolute;
    top: 0;
    left: -0.5rem
}

.dormant_box .dormant_info p>em {
    color: #911412
}

.dormant_box .ask {
    display: block;
    text-align: center;
    font-size: 0.938rem
}

.dormant_box .ask>em {
    color: #7b4c29
}

.dormant_box .btn_wrap {
    margin-top: 40px;
}


/* sns_login_wrap */
.sns_login_wrap ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sns_login_wrap ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    width: 52px;
    height: 52px;
    margin: 5px 10px;
}

.sns_login_wrap ul li .sns {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: 1px solid #dbdbdb;
    border-radius: 50%;
    box-sizing: border-box;
    -webkit-transition: transform .2s;
    transition: transform .2s;
}

.sns_login_wrap ul li .sns:focus {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
}

.sns_login_wrap ul li a {
    display: none
}

.sns_login_wrap ul li a:after {
    content: '';
    display: block;
    position: absolute;
    left: 65px;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #fff;
    border-left: 1px solid #c6c6c6
}

/* box_help */
.box_help {
    padding: 5px 0;
    box-sizing: border-box;
}

.box_help li {
    width: 100%;
    height: 90px;
    margin-top: 20px;
    border: 1px solid #d9d9d9;
}

.box_help li.fint_old_account_item {
    height: 60px;
}

.box_help a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding-right: 2rem;
    box-sizing: border-box;
}

.box_help .ico_help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 110px;
}

.box_help strong {
    font-size: 18px;
    color: #323232;
}

/* download_game_wrap */
.download_game_wrap {
    margin-top: 3rem;
}

.title_download {
    text-align: center;
}

.end_register .btn_wrap {
    margin-top: 2rem;
}

.download_game_wrap .btn_wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 2rem;
}

.download_game_wrap .btn_wrap a {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 100%;
    width: 435px;
    height: 100px;
    -webkit-transition: filter .3s;
    transition: filter .3s;
}

.download_game_wrap .btn_wrap a~a {
    margin-left: 10px;
}

.download_game_wrap .down_title {
    display: block;
    position: relative;
    padding-left: 75px;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.03em;
    z-index: 1;
}

.download_game_wrap .down_bg {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

.download_game_wrap .down_circle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 40px;
    top: 50%;
    z-index: 1;
    width: 40px;
    height: 40px;
    background: #000000;
    border-radius: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}


/* box_auth_key & email auth */
.auth_desc_wrap {
    font-size: 16px;
}

.auth_desc_wrap .email_text .user_email {
    color: #737373;
}

.box_auth_key {
    text-align: center;
}

.box_auth_key h4 {
    font-size: 18px;
}

.box_auth_key .desc {
    display: block;
    line-height: 1.8;
    margin-top: 2rem;
}

.box_auth_key .key_codes_box {
    display: block;
    text-align: center;
    max-width: 620px;
    box-sizing: border-box;
    margin: 2rem auto 0;
    padding: 1.6667rem 10%;
    background: #f6f6f6;
}

.box_auth_key .key_codes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    counter-reset: otp;
}

.box_auth_key .key_codes li {
    display: block;
    line-height: 1.8;
    flex: 1 0 50%;
    font-size: 19px;
}

.box_auth_key .key_codes li .cancle_line {
    position: relative;
    color: #bababa;
}

.box_auth_key .key_codes li .cancle_line::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #9e9e9e;
}

/*.box_auth_key .key_codes li .count_num:before { counter-increment: otp; content: counter(otp) ". "; text-align: left; }*/
.box_auth_key .key_warning {
    display: block;
    margin-top: 2rem;
    font-size: 14px;
    color: #d31f1f;
    line-height: 1.5;
}

.box_auth_key ul.bullet_list {
    text-align: center;
}

.box_auth_key .btn_wrap {
    margin: 2rem 0 0;
}

.box_auth_key .btn_big {
    margin: 0;
}

.box_auth_key .btn_sml02 {
    min-width: 120px;
}

.box_auth_key .blue_text_btn {
    color: #1447a3;
    font-size: 14px;
}

.auth_key_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 2.6rem auto 0;
    box-sizing: border-box;
}

.auth_key_wrap.with_loader {
    max-width: 452px;
    padding: 0 40px 0 0;
}

.auth_key_wrap .key_input {
    width: 60px;
    height: 60px;
    padding: 0;
    font-size: 21px;
    color: #000;
    text-align: center;
    border: 1px solid #b3b3b3;
}

.auth_key_wrap .key_input:focus {
    border-color: #2b305a;
}

.auth_key_wrap .key_input+.key_input {
    margin: 0 0 0 10px;
}

.auth_key_wrap input[type="number"]::-webkit-outer-spin-button,
.auth_key_wrap input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.box_auth_key .loader {
    display: none;
    width: 22px;
    height: 22px;
    position: absolute;
    top: calc(50% - 11px);
    right: 0;
    border-radius: 50%;
    background: #286bc6;
    border: 1px solid #286bc6;
}

.box_auth_key .loader .leftHalf,
.box_auth_key .loader .rightHalf,
.box_auth_key .loader .spinner {
    top: 0;
    position: absolute;
    width: 11px;
    height: 22px;
    box-sizing: border-box;
}

.box_auth_key .loader .leftHalf {
    left: 0;
    background: #286bc6;
    z-index: 3;
    opacity: 1;
    border-radius: 100% 0 0 100%/ 50% 0 0 50%;
}

.box_auth_key .loader .rightHalf {
    right: 0;
    background: #fff;
    z-index: 1;
    opacity: 0;
    border-radius: 0 100% 100% 0/ 0 50% 50% 0;
}

.box_auth_key .loader .spinner {
    left: 0;
    background: #fff;
    z-index: 2;
    border-radius: 100% 0 0 100%/ 50% 0 0 50%;
}

/* active */
.box_auth_key .loader.active {
    display: block;
}

.box_auth_key .loader.active .leftHalf {
    -webkit-animation: showHide 60s steps(1, end) forwards;
    animation: showHide 60s steps(1, end) forwards;
}

.box_auth_key .loader.active .rightHalf {
    animation: showHide 60s steps(1, end) reverse forwards;
}

.box_auth_key .loader.active .spinner {
    animation: spin 60s 1 linear forwards;
    transform-origin: center right;
}

.end_register h2 {
    margin-bottom: 40px;
}

.end_register .auth_key_wrap {
    margin-top: 30px;
}

.end_register .resend_wrap {
    margin-top: 30px;
    font-size: 14px;
}

.end_register .resend_wrap .resend_btn {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 5px;
    -webkit-transition: filter .2s;
    transition: filter .2s;
}

.end_register .resend_wrap .txt_blue {
    margin-left: 5px;
    font-size: 14px;
    color: #2e65d9;
}

/* container_join */
.container_join .input_margin {
    margin-top: 14px;
}

.container_join .btn_reEmail.btn_sml {
    color: #2b305a;
    max-width: inherit;
    border: 1px solid transparent;
    -webkit-transition: color .2s;
    transition: color .2s;
}

.container_join .btn_reEmail.btn_sml:focus {
    color: #5d67b7;
    text-decoration: underline;
}

.container_join .js-emailAuth,
.container_join .js-authCheck {
    min-width: 6.25rem;
}

.container_join .js-emailAuth {
    overflow: hidden;
}

.container_join .js-emailAuth::after {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: inherit;
    top: 0;
    left: 0;
    content: '';
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    -webkit-transition: transform 0s .2s, opacity .2s;
    transition: transform 0s .2s, opacity .2s;
    z-index: -1;
}

.container_join .js-emailAuth.btn_blue::after {
    background: #2b305a;
}

.container_join .js-emailAuth.wait {
    color: #fff;
    opacity: 0.9;
    border: 0;
    background: #ddd;
}

.container_join .js-emailAuth.wait::after {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: transform 30s linear;
    transition: transform 30s linear;
}

.container_join .validMarkWrap {
    position: absolute;
    top: 0;
    right: 20px;
    z-index: -1;
    width: 28px;
    height: 100%;
    overflow: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.container_join .validMarkWrap.on {
    z-index: 0;
    -webkit-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
    -webkit-transition: transform .3s cubic-bezier(0, 0, 0, 1.08) .35s;
    transition: transform .3s cubic-bezier(0, 0, 0, 1.08) .35s;
}

.container_join .icn_valid_check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    right: 0;
    top: 50%;
    border-radius: 50%;
    background: #2b2f5a;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}

.container_join .icn_valid_check::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    width: 7px;
    height: 4px;
    -webkit-transform: translate3d(-47%, -72%, 0) rotate(-45deg);
    transform: translate3d(-47%, -72%, 0) rotate(-45deg);
}

.container_join .validMarkWrap.on .icn_valid_check {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity .15s .35s;
    transition: opacity .15s .35s;
}

.container_join .input_pass_check {
    position: relative;
}

.container_join .btn_wrap {
    max-width: 400px;
    margin: 50px auto 0;
}

.container_join .js-password {
    position: relative;
}

.container_join .js-policyCheck {
    display: none;
}

.email_tooltip {
    margin-top: 4px;
    padding-bottom: 10px;
}

.email_tooltip .balloon_box {
    left: -25px;
    top: 100%;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
}

.email_tooltip .balloon_box.on {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.container_join .js-authKey input.disabled {
    opacity: 1;
}

.parents_auth_wrap .custom_input,
.parents_auth_wrap .payment_area {
    width: 400px;
    max-width: 100%;
    margin: 0 auto;
}

.parents_auth_wrap .input_margin,
.parents_auth_wrap .input_margin+.input_with_btn {
    margin-top: 12px;
}

.parents_auth_wrap .time_auth {
    margin-top: 25px;
    font-size: 16px;
}

.parents_auth_wrap .payment_area {
    padding: 0;
}

.parents_auth_wrap .payment_area .title {
    font-size: 15px;
}

.parents_auth_wrap .period_list {
    padding: 0.5rem 1.5rem;
}

.parents_auth_wrap .period_list li {
    width: 32%;
    margin: 0.5rem 0;
    box-sizing: border-box;
}

.parents_auth_wrap .text_complete {
    margin-bottom: 40px;
}

.btn_join_close {
    display: none;
}

/* transfer */
.container_transfer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
}

.container_transfer .transfer_article {
    width: 100%;
    max-width: 524px;
}

.container_transfer .transfer_logo_wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
}

.container_transfer .transfer_logo_wrap img {
    width: 16rem;
    max-width: 258px;
}

.container_transfer .transfer_wrap {
    width: 100%;
    padding: 70px 45px;
    color: #2e2e2e;
    border: 1px solid #dfdfdf;
    box-sizing: border-box;
    border-radius: 4px;
}

.container_transfer .transfer_title {
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    font-size: 24px;
    text-align: left;
    color: #1e1e1e;
    border: none;
}

.container_transfer .transfer_title.error {
    color: #cc0000;
}

.container_join .transfer_title_desc {
    text-align: left;
    margin: 0;
    padding: 0;
    border: none;
}

.container_transfer .transfer_title_desc {
    font-size: 15px;
    line-height: 1.5;
}

.container_transfer .transfer_title+.transfer_title_desc {
    margin-top: 20px;
}

.container_transfer .transfer_user_wrap {
    display: flex;
    align-items: center;
    margin: 50px 0;
}

.container_transfer .transfer_user_id {
    font-size: 1.75rem;
}

.container_transfer .transfer_user_wrap.small {
    margin-bottom: 15px;
}

.container_transfer .transfer_user_wrap.small .transfer_user_id {
    font-size: 1.6rem;
}

.container_transfer.pending {
    height: calc(100vh - 35px);
    min-height: 455px;
}

.sns_icn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    width: 48px;
    height: 48px;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
}

.transfer_link_wrap {
    margin: 3rem 0;
}

.transfer_link {
    display: inline-block;
    font-size: .925rem;
    color: #2051b4;
    -webkit-transition: color .2s;
    transition: color .2s;
}

.footnote_wrap {
    width: 100%;
    margin-top: 1.4rem;
}

.footnote {
    position: relative;
    padding-left: .5rem;
    font-size: .875rem;
    color: #5f5f5f;
}

.footnote::before {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    margin-right: .4rem;
    content: '\00b7';
}

.footnote+.footnote {
    margin-top: .5rem;
}

.transfer_btn {
    display: flex;
    margin-top: 3.125rem;
}

.transfer_btn+.transfer_btn {
    margin-top: 15px;
    margin-left: 0;
}

.transfer_wrap .box_join {
    margin-top: 2.5rem;
}

.transfer_wrap .input_margin {
    margin-top: 14px;
}

.transfer_contents_wrap {
    margin: 1rem 0;
    padding: 0 .925rem;
    box-sizing: border-box;
}

.transfer_contents_wrap img {
    max-width: 100%;
}

.transfer_contents_text {
    font-size: .925rem;
    color: #5f5f5f;
}

.transfer_contents_wrap .transfer_contents_text {
    margin-top: 1rem;
    line-height: 1.5;
}

.transfer_innerbox {
    margin: 3rem 0;
}

.transfer_innerbox+.transfer_innerbox {
    margin-top: 1rem;
}

.transfer_innerbox .btn {
    justify-content: space-between;
    color: #4a4a4a;
}

.transfer_innerbox .btn+.btn {
    margin-left: 0;
    margin-top: 1rem;
}

.transfer_innerbox .icn_svg {
    width: 34px;
    margin: 0 .5rem;
}

.transfer_innerbox .icn_svg.cert_mobile {
    height: 46px;
}

.transfer_innerbox .icn_svg.cert_creditcard {
    height: 41px;
}

.disconnect_account {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding: 10px 20px;
    border: 1px solid #dfdfdf;
    font-size: 14px;
}

.disconnect_account .sns_wrap {
    display: flex;
    align-items: center;
}

/* transfer welcome */
.transfer_contents_wrap.welcome {
    margin: 1rem 0;
}

.transfer_contents_wrap .svg_wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.transfer_contents_wrap.welcome .svg_wrap {
    margin: 2rem auto;
    width: 90%;
    max-width: 266px;
}

.svg_wrap .svg_welcome {
    width: 100%;
    overflow: visible;
}

.svg_welcome_dotted {
    position: absolute;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: transform .3s cubic-bezier(0, 0.58, 0.29, 1);
    transition: transform .3s cubic-bezier(0, 0.58, 0.29, 1);
}

.on .svg_welcome_dotted {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.svg_welcome_dotted.type_1 {
    left: -0.5%;
    bottom: 0;
    width: 9.8%;
    height: 21%;
    transition-delay: 1.35s;
}

.svg_welcome_dotted.type_2 {
    left: 33%;
    top: 0;
    width: 4.15%;
    height: 8.7%;
    transition-delay: 1.25s;
}

.svg_welcome_dotted.type_3 {
    right: 1%;
    top: 44%;
    width: 4.89%;
    height: 10.3%;
    transition-delay: 1.45s;
}

.welcome .welcomeSvg {
    overflow: visible;
}

.welcome .card {
    opacity: 0;
    -webkit-transform: translate3d(0, 13%, 0);
    transform: translate3d(0, 13%, 0);
    -webkit-transition: transform .65s, opacity .65s;
    transition: transform .65s, opacity .65s;
    -webkit-transition-timing-function: cubic-bezier(0, 0.01, 0.26, 1);
    transition-timing-function: cubic-bezier(0, 0.01, 0.26, 1);
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.welcome.on .card {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.welcome .human>g {
    opacity: 0;
    -webkit-transition: opacity .4s, transform .4s;
    transition: opacity .4s, transform .4s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.welcome .human>g:nth-child(1) {
    -webkit-transform: translateY(3%);
    transform: translateY(3%);
    -webkit-transition-delay: .45s;
    transition-delay: .45s;
}

.welcome .human>g:nth-child(3),
.welcome .human>g:nth-child(5) {
    -webkit-transform: translateY(2%);
    transform: translateY(2%);
    -webkit-transition-delay: .6s;
    transition-delay: .6s;
}

.welcome .human>g:nth-child(2),
.welcome .human>g:nth-child(4) {
    -webkit-transform: translateY(1%);
    transform: translateY(1%);
    -webkit-transition-delay: .75s;
    transition-delay: .75s;
}

.welcome.on .human>g {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
}

.welcome .circle_wrap {
    opacity: 0;
    -webkit-transition: opacity .4s, transform .4s;
    transition: opacity .4s, transform .4s;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}

.welcome .circle_wrap.p {
    -webkit-transform: translate3d(2.5%, 1.5%, 0);
    transform: translate3d(2.5%, 1.5%, 0);
}

.welcome .circle_wrap.s {
    -webkit-transform: translate3d(-2.5%, -1.5%, 0);
    transform: translate3d(-2.5%, -1.5%, 0);
}

.welcome .circle_wrap.b {
    -webkit-transform: translate3d(-2.5%, 1.5%, 0);
    transform: translate3d(-2.5%, 1.5%, 0);
}

.welcome.on .circle_wrap {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}

.welcome .circle_small>g {
    opacity: 0;
    -webkit-transition: opacity .2s, transform .75s;
    transition: opacity .2s, transform .75s;
    -webkit-transition-timing-function: cubic-bezier(0, 0.01, 0.26, 1);
    transition-timing-function: cubic-bezier(0, 0.01, 0.26, 1);
}

.welcome .circle_small>g:nth-child(1) {
    -webkit-transform: translate3d(5%, 7%, 0);
    transform: translate3d(5%, 7%, 0);
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s;
}

.welcome .circle_small>g:nth-child(2) {
    -webkit-transform: translate3d(-0.5%, 8%, 0);
    transform: translate3d(-0.5%, 8%, 0);
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s;
}

.welcome.on .circle_small>g {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
}

.welcome .lock {
    opacity: 0;
    -webkit-transform: translate3d(0, -3%, 0);
    transform: translate3d(0, -3%, 0);
    -webkit-transition: opacity .35s, transform .35s;
    transition-delay: 2s;
    transition: opacity .35s, transform .35s;
    transition-delay: 2s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.welcome.on .lock {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}

.index_link_wrap {
    margin: 2rem 0;
}

/* transfer nation select */
.nation_select_desc {
    display: flex;
}

.nation_select_desc .transfer_contents_text {
    display: flex;
}

.nation_select_desc .balloon_box {
    left: -25px;
    top: 30px;
    transform: translate3d(0, 10px, 0);
}

.nation_select_desc .balloon_box.on {
    transform: translate3d(0, 0, 0);
}

.nation_select_desc .balloon_box::before {
    left: calc(50% - 5px);
}

.nation_select_desc .icn_svg {
    transform: translateY(4px);
}

.nation_select_list {
    margin-top: 1rem;
}

.nation_select_item+.nation_select_item {
    margin-top: 10px;
}

.nation_select_item .nation_select_btn {
    height: 52px;
    padding: 0 24px;
    font-size: 14px;
    border-width: 1.5px;
}

.nation_select_item .nation_select_btn:active {
    color: #fff;
    background: #2b2f5a;
}

/* transfer table */
.table_wrap {
    width: 100%;
    font-size: 14px;
    color: #1e1e1e;
}

.table_wrap+.table_wrap {
    margin-top: 2.5rem;
}

.transfer_title_desc+.table_wrap {
    margin-top: 3rem;
}

.table_title {
    width: 100%;
    font-size: 14px;
    color: #1e1e1e;
    text-align: left;
    padding-bottom: .5rem;
    border-bottom: 1px solid #707070;
}

.table_title .icn_svg {
    -webkit-transform: translate3d(0, 1.5px, 0);
    transform: translate3d(0, 1.5px, 0);
}

.table_item {
    padding: 12px 10px;
    border-bottom: 1px solid #ededed;
}

.table_key {
    font-size: 12px;
    color: #999;
}

.table_value {
    font-size: 14px;
    color: #1e1e1e;
}

.table_key+.table_value {
    margin-top: .45em;
}

/* transfer 계정표시 */
.transfer_account_wrap {
    margin-top: 2.5rem;
}

.transfer_account_title {
    font-size: 1.125rem;
    color: #1e1e1e;
}

.transfer_account_box {
    padding: 1.25rem 1.9rem;
    border: 1px solid #b3b3b3;
    border-radius: 4px;
    box-sizing: border-box;
}

.transfer_account_title+.transfer_account_box {
    margin-top: 11px;
}

.transfer_account_box.after {
    border: 2px solid #2b2f5a;
}

.transfer_account_box .account_id {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    color: #1e1e1e;
}

.transfer_account_box .account_id_text {
    max-width: calc(100% - 2rem);
}

.transfer_account_box.before .account_id {
    font-size: 1.2rem;
}

.transfer_account_box .account_id .icn_svg {
    margin-left: .55rem;
}

.transfer_account_box .account_name {
    font-size: 1.05rem;
    color: #1e1e1e;
}

.transfer_account_box.before .account_name {
    font-size: 0.9rem;
}

.transfer_account_box .account_id+.account_name,
.transfer_account_box .account_date+.account_name {
    margin-top: 1rem;
}

.transfer_account_box.before .account_id+.account_name,
.transfer_account_box.before .account_date+.account_name {
    margin-top: 0.6rem;
}

.transfer_account_box .account_date {
    font-size: .925rem;
    color: #999;
}

.transfer_account_box.before .account_date {
    font-size: .75rem;
    color: #999;
}

.transfer_account_box .account_name+.account_date,
.transfer_account_box .account_id+.account_date {
    margin-top: .3rem;
}

.transfer_account_box.before .account_name+.account_date,
.transfer_account_box.before .account_id+.account_date {
    margin-top: .2rem;
}

.transfer_account_arrow {
    margin: 2rem 0 0;
    text-align: center;
}

.transfer_account_arrow+.transfer_account_wrap {
    margin-top: 0;
}

.transfer_account_arrow .arrow_down {
    width: 1.875rem;
    height: 1.1875rem;
}

.transfer_account_box .steam_account {
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
}

.transfer_account_box .steam_account img {
    width: 7rem;
    height: 2.25rem;
}

.transfer_account_box .steam_account span {
    color: #666;
    margin-top: 6px;
    font-size: 1.025rem;
}

.transfer_account_box.before .steam_account img {
    width: 6rem;
    height: 1.9rem;
}

.transfer_account_box.before .steam_account span {
    font-size: .925rem;
}

/* transfer otp */
.auth_num_wrap .auth_num_help {
    display: flex;
    align-items: center;
    margin-top: .9375rem;
    font-size: .9375rem;
}

.auth_num_wrap .auth_num_help .icn_svg.circle_question {
    margin-right: 7px;
}

.num_input_wrap+.transfer_contents_text {
    margin-top: 1rem;
}

.transfer_otp_wrap .otp_backup_wrap {
    display: none;
}

.transfer_otp_wrap .otp_delete_wrap {
    display: none;
}

.transfer_otp_wrap .otp_delete_wrap .auth_num_help {
    margin-left: auto;
    margin-right: auto;
}

.transfer_otp_wrap[attr-type="backup"] .otp_input_wrap {
    display: none;
}

.transfer_otp_wrap[attr-type="backup"] .otp_backup_wrap {
    display: block;
}

.transfer_otp_wrap[attr-type="delete"] .otp_input_wrap {
    display: none;
}

.transfer_otp_wrap[attr-type="delete"] .otp_delete_wrap {
    display: block;
}

.transfer_otp_wrap[attr-type="delete"] .otp_btn_wrap {
    display: none;
}

.retired_box {
    margin-top: 2.5rem;
    padding: 2.5rem 1.25rem;
    font-size: .9375rem;
    box-sizing: border-box;
    text-align: center;
    background: #f0f0f0;
}

.retired_box .transfer_link_wrap {
    margin: .9375rem 0;
}

.auth_num_wrap .transfer_link_wrap {
    margin: .9375rem 0;
}

/* transfer complete */
.transfer_complete_id {
    font-size: 2rem;
    color: #1e1e1e;
    text-align: center;
}

.transfer_complete_date {
    margin-top: 10px;
    font-size: 1.25rem;
    color: #999999;
    text-align: center;
}

.transfer_contents_wrap.complete {
    margin: 2rem 0;
}

.svg_complete_check {
    position: absolute;
    left: 50%;
    top: 0;
    max-height: 90px;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
}

.complete .completeSvg {
    max-height: 90px;
}

.complete .human>g {
    opacity: 0;
    transform: translate3d(0, 5%, 0);
    transition: transform .4s ease-out, opacity .4s ease-out;
}

.complete.on .human>g {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.complete.on .human>g:nth-child(2),
.complete.on .human>g:nth-child(3) {
    transition-delay: 0.1s;
}

.complete.on .human>g:nth-child(4),
.complete.on .human>g:nth-child(5) {
    transition-delay: 0.2s;
}

.complete .checkSvg {
    position: absolute;
    top: 0;
    left: 50%;
    max-height: 90px;
    opacity: 0;
    -webkit-transform: translate3d(-50%, -3%, 0) scale(0.8);
    transform: translate3d(-50%, -3%, 0) scale(0.8);
    -webkit-transition: transform .25s cubic-bezier(0.11, 1.4, 0.54, 2.3), opacity .1s;
    transition: transform .2s cubic-bezier(0.11, 1.4, 0.54, 2.3), opacity .1s;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition-delay: .45s;
    transition-delay: .45s;
}

.complete.on .checkSvg {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0%, 0) scale(1);
    transform: translate3d(-50%, 0%, 0) scale(1);
}

.transfer_reset {
    margin-top: 5.5rem;
}

/* transfer id join */
.transfer_wrap .box_join .js-email {
    margin-top: 14px;
}

.transfer_wrap .deleted_wrap .table_value {
    display: flex;
    align-items: center;
}

.transfer_wrap .deleted_wrap .table_value .icn_svg {
    margin-right: .3rem;
}

.transfer_wrap .deleted_wrap .table_value .icn_svg.lock {
    width: 14px;
    height: 19px;
}

.transfer_wrap .msg_totalcomplete {
    margin-top: 3.125rem;
    font-size: .925rem;
    color: #1e1e1e;
}

.transfer_wrap .msg_totalcomplete+.transfer_btn {
    margin-top: 0.75rem;
}

.transfer_wrap .box_join .table_agree {
    margin-top: 14px;
}

.nation_question_wrap {
    position: relative;
    display: inline-block;
    margin-top: 4px;
}

.nation_question_wrap .question {
    padding-bottom: 10px;
}

.nation_question_wrap .balloon_box {
    top: 100%;
    left: -25px;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
}

.nation_question_wrap .balloon_box.on {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.nation_question_wrap .balloon_desc::before {
    display: none;
}

.deleted_question_wrap {
    position: relative;
    margin-top: 2.5rem;
}

.deleted_question_wrap.table_title {
    padding-bottom: 0;
}

.deleted_question_wrap.table_title .icn_svg {
    margin-left: .25rem;
    -webkit-transform: none;
    transform: none;
}

.deleted_question_wrap .js-questionToolTip {
    padding-bottom: .5rem;
    display: flex;
    align-items: center;
}

.deleted_question_wrap .balloon_box {
    left: calc(50% - 48px);
    top: calc(100% + 1px);
}

.transfer_wrap .agree_wrap {
    margin-top: 2.5rem;
}

.box_join_inner {
    display: flex;
    flex-direction: column;
}

.box_join_inner .table_title {
    order: -2;
}

.box_join_inner .readData {
    order: -1;
}

/* transfer in progress */
.transfer_progress .common_loading_wrap {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
}

.transfer_progress .progress_ui {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.transfer_progress .progress_ui .inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.transfer_progress .progress_ui svg path,
.transfer_progress .progress_ui svg rect {
    fill: #2e65d9;
}

.transfer_progress .progress_ui .spinner {
    -webkit-animation: loadingRotator 1s cubic-bezier(0.38, 0.13, 0.5, 0.82) infinite;
    animation: loadingRotator 1s cubic-bezier(0.38, 0.13, 0.5, 0.82) infinite;
}

.transfer_progress .progress_title {
    margin: 8rem 0 0;
    padding: 0;
    font-size: 1.225rem;
    color: #2e2e2e;
    text-align: center;
    line-height: 1.4;
    border: 0;
}

.transfer_progress .progress_desc {
    margin-top: 1.5rem;
    font-size: 1rem;
    color: #5f5f5f;
    text-align: center;
}

.transfer_progress .progress_desc+.progress_desc {
    margin-top: 0;
}

/* CS 브릿지 페이지 - support */
.container.cs_bridge {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 2%;
    padding-right: 2%;
    background: #f8f8f8;
}

.cs_bridge .cs_title {
    width: 100%;
    font-size: 45px;
    color: #2b2f5a;
    text-align: center;
}

.cs_bridge .cs_title_desc {
    width: 100%;
    margin-top: 24px;
    font-size: 17px;
    color: #3d3d3d;
    text-align: center;
}

.bridge_list {
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 100%;
    margin-top: 68px;
}

.bridge_list .bridge_box {
    position: relative;
    width: 408px;
    height: 222px;
    margin: 0 1% 1.5%;
    border-radius: 3px;
    background: #fff;
    overflow: hidden;
}

.bridge_list .bridge_link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 3px;
    background: #fff;
    -webkit-transition: background .2s;
    transition: background .2s;
}

.bridge_list .bridge_link:focus {
    background: #f8f8f8;
}

.bridge_list .bridge_link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #a1a1a1;
    border-radius: 3px;
    z-index: 0;
    box-sizing: border-box;
}

.bridge_list .bridge_link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    box-sizing: border-box;
    border-radius: 3px;
    z-index: 0;
    -webkit-transition: border-color .2s;
    transition: border .2s;
    z-index: 1;
}

.bridge_list .bridge_link:focus::after {
    border: 2px solid #2b2f5a;
}

.bridge_list .bridge_game_title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0 .65rem;
    font-size: 2.25rem;
    color: #2b2f5a;
    border: 0;
}

.bridge_box.bdo_box.on .nation_popup {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.find_account {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 500px;
}

.find_account h2 {
    font-size: 35px;
    padding: 0;
}

.find_account .h3_desc {
    text-align: center;
    font-size: 15px;
    margin-bottom: 30px;
    color: #3d3d3d;
    line-height: 1.5;
}

.find_account .h3_desc.rest_account_desc {
    width: 100%;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 0;
}

.find_account .h3_desc .warn {
    color: #a4a4a4;
}

.find_account .h3_desc a {
    color: #286bc6;
}

.find_account .h3_desc .balloon_wrap {
    display: inline-block;
    width: 1em;
    height: 1.5em;
    vertical-align: bottom;
}

.find_account .h3_desc .balloon_wrap .icn_svg {
    width: 1em;
    height: 1em;
    margin: 0.28em 0 0.22em 0;
}

.find_account .info_box {
    width: 100%;
    box-sizing: border-box;
}

.find_account .info_box .find_area {
    padding: 0;
}

.find_account .info_box .find_area .btn_wrap .find_btn {
    width: 100%;
    height: 55px;
    font-size: 15px;
}

.find_account .info_box .other_find_wrap {
    margin-top: 25px;
    font-size: 15px;
    text-align: center;
}

.find_account .info_box .other_find_wrap .title {
    color: #3d3d3d;
}

.find_account .info_box .other_find_wrap .btn_wrap {
    margin-top: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

.find_account .info_box .other_find_wrap .btn_wrap>.other_find_btn {
    position: relative;
    font-size: 15px;
    color: #437bce;
}

.find_account .info_box .other_find_wrap .btn_wrap>.other_find_btn::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: -9px;
    width: 1px;
    height: 80%;
    background: #d5d5d5;
    transform: translate(0, -50%);
}

.find_account .info_box .other_find_wrap .btn_wrap>.other_find_btn:last-child::before {
    display: none;
}

.find_account .find_bd_account_box {
    margin-top: 45px;
    padding: 44px 36px;
    background: #f7f7f7;
    text-align: center;
}

.find_account .find_bd_account_box.old_account_box {
    background: none;
    padding: 0;
    margin-top: 10px;
}

.find_account .find_bd_account_box .title {
    font-size: 18px;
    color: #353942;
    margin-bottom: 18px;
}

.find_account .find_bd_account_box .desc {
    font-size: 15px;
    color: #3d3d3d;
}

.find_account .find_bd_account_box .btn_wrap {
    gap: 10px;
}

.find_account .find_bd_account_box .btn_wrap button {
    color: #3d3d3d;
    border-color: #c7c7c7;
    font-size: 14px;
    padding: 0 10px;
    margin: 0;
    min-width: calc(33.33% - 20px / 3);
}

.find_account .find_bd_account_box .btn_wrap button:hover {
    background: #2b2f5a;
    border-color: #2b2f5a;
    color: #fff;
}

.find_account .my_account_list {
    width: 100%;
    margin: 0;
}

.find_account .my_account_list .my_account_list_item {
    margin-top: 6px;
    border-radius: 4px;
    cursor: pointer;
}

.find_account .my_account_list .my_account_list_item.no_select {
    cursor: auto;
}

.find_account .my_account_list .my_account_list_item:first-of-type {
    margin-top: 0;
}

.find_account .my_account_list .my_account_list_item.active {
    background-color: #2b2f5a;
}

.find_account .my_account_list .my_account_list_item.active .user_id {
    color: #fff;
}

.find_account .my_account_list .my_account_list_item .pi_sns_check {
    display: none;
    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translate3d(0, -50%, 0);
    width: 1.33rem;
    height: 1.33rem;
    background-position: -13.708rem -86.5417rem;
    background-size: 100rem 100rem;
}

.find_account .my_account_list .my_account_list_item.active .pi_sns_check {
    display: block;
}

.find_account .my_account_list+.text_complete_box {
    margin-top: 2.5rem;
}

.find_account .btn_wrap {
    gap: 10px;
    margin-top: 25px;
}

.find_account .btn_wrap .btn {
    flex: 1;
    height: 55px;
    margin: 0;
    font-size: 15px;
}

.find_account>form {
    width: 100%;
}

.find_account .input_margin {
    margin-top: 14px;
}

.find_account .recaptcha_wrap,
.find_account .recaptcha_wrap+.btn_wrap {
    margin-top: 25px;
}

.find_account.find_old_account {
    background: #f7f7f7;
    padding: 30px;
    margin-top: 48px;
}

.find_account.find_old_account h2 {
    font-size: 18px;
    margin-bottom: 20px;
}

.find_account.find_old_account .h3_desc {
    margin-bottom: 0;
}

/*.nation_popup_wrap { position: absolute; top:0; left:0; width: 100%; height: 100%; }*/
.nation_popup {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 5px;
    background: #272a4d;
    z-index: 2;
    border-radius: 3px;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    box-sizing: border-box;
    -webkit-transition: transform .2s ease;
    transition: transform .2s ease;
}

.nation_popup .popup_list {
    width: 100%;
    padding: 1rem 0 1rem 4px;
    max-height: 100%;
    overflow-y: scroll;
    box-sizing: border-box;
}

.nation_popup .popup_list::-webkit-scrollbar {
    width: 4px;
    border-right: 3px;
}

.nation_popup .popup_list::-webkit-scrollbar-track {
    background: transparent;
}

.nation_popup .popup_list::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(255, 255, 255, .5);
}

.nation_popup .popup_list::-webkit-scrollbar-button {
    width: 0px;
    height: 1rem;
    background: transparent;
}

.nation_popup .popup_item {
    display: flex;
    justify-content: center;
}

.nation_popup .popup_item+.popup_item {
    margin-top: 10px;
}

.nation_popup .nation_selector {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 220px;
    max-width: 90%;
    padding: 3px 14px;
    font-size: 18px;
    color: #80829d;
    text-align: center;
    line-height: normal;
    border: 2px solid transparent;
    border-radius: 50px;
    -webkit-transition: color .2s, border-color .2s;
    transition: color .2s, border-color .2s;
}

.nation_popup .nation_selector:hover {
    color: #fff;
    border-color: #bfc0ca;
}

.nation_popup .nation_selector:focus {
    color: #fff;
}

.nation_popup .nation_popup_close {
    position: absolute;
    top: 19px;
    right: 19px;
    width: 28px;
    height: 28px;
}

.nation_popup .nation_popup_close .icn_close_draw {
    position: absolute;
    top: calc(50% - 1px);
    left: calc(50% - 14px);
    width: 28px;
    height: 2px;
    background: rgba(253, 253, 254, .7);
    -webkit-transition: transform .2s ease, background-color .2s ease;
    transition: transform .2s ease, background-color .2s ease;
}

.nation_popup .nation_popup_close:focus .icn_close_draw {
    background: rgba(253, 253, 254, 1);
}

.nation_popup .nation_popup_close .icn_close_draw:nth-child(1) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nation_popup .nation_popup_close .icn_close_draw:nth-child(2) {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.child_protect_wrap {
    display: flex;
    justify-content: center;
    max-width: 100%;
    margin-top: 43px;
}

.child_protect {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    width: 373px;
    height: 77px;
    font-size: 18px;
    color: #3d3d3d;
    text-align: center;
    border: 2px solid transparent;
    border-radius: 50px;
    background: #e3e3e3;
    -webkit-transition: border-color .2s;
    transition: border-color .2s;
}

.child_protect .icn_protect {
    margin-right: 8px;
}

.icn_protect {
    display: inline-block;
    width: 19px;
    height: 21px;
    background: url('../../img/common/icon/icn_protect_shiled.png') no-repeat center;
    background-size: contain;
}

.icn_map_pin {
    display: inline-block;
    width: 10px;
    height: 17px;
    background: url('../../img/common/icon/icn_map_pin.png') no-repeat center;
    background-size: contain;
}

.password_wrap {
    position: relative;
}

.capslock_wrap {
    position: absolute;
    right: 50px;
    top: 16px;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 20;
}

.capslock_wrap .btn_capslock {
    opacity: 0.7;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
}

.capslock_wrap .balloon_box {
    left: -29px;
    display: inline-flex;
    width: 360px;
    width: max-content;
    max-width: 360px;
    word-break: normal;
    -webkit-transform: none;
    transform: none;
}

.available_game_info_box {
    max-width: 600px;
    margin: 0 auto 40px;
}

.available_game_info_box .available_game_info_text {
    font-size: 18px;
    display: inline-block;
    margin-bottom: 22px;
}

.available_game_info_box .available_game_info {
    display: flex;
    justify-content: space-between;
    padding: 20px 6px;
    border-top: 1px solid #4a4a4a;
    border-bottom: 1px solid #4a4a4a;
}

.available_game_info_box .available_game_info+.available_game_info {
    border-top: none;
}

.available_game_info_box .available_game_info .available_game_status.warn {
    color: #E74C3C;
}

.mobile_auth_code_desc {
    margin-top: 25px;
    color: #999;
    text-align: center;
}

/* sns link 제거 */
.sns_link_remove_box .sns_link_remove_title {
    font-size: 22px;
    margin-bottom: 20px;
}

.sns_link_remove_box .sns_link_remove_desc {
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.sns_link_remove_box .sns_link_info_box {
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #8b8b8b;
    border-radius: 4px;
}

.sns_link_remove_box .sns_link_info {
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.sns_link_remove_box .sns_link_info_title {
    font-size: 13px;
    color: #8b8b8b;
    margin-bottom: 10px;
}

.sns_link_remove_box .sns_link_info_content {
    display: flex;
    align-items: center;
    font-size: 16px;
}

.sns_link_remove_box .sns_link_info_content.j_between {
    justify-content: space-between;
}

.sns_link_remove_box .sns_link_info_content .btn_sns_info_blind {
    display: block;
    width: 23px;
    height: 20px;
    background: url('../../img/common/icn_eye-1.svg') no-repeat;
    background-size: contain;
    opacity: 0.8;
    transition: opacity 0.28s;
    -webkit-transition: opacity 0.28s;
}

.sns_link_remove_box .sns_link_info_content .btn_sns_info_blind.active {
    background-image: url('../../img/common/icn_eye_blind-1.svg');
}

.sns_link_remove_box .sns_link_info_content i {
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 8px;
}

.sns_link_remove_box .sns_link_info_content .icn_twitter {
    width: 20px;
    height: 16px;
    background-image: url('../../img/common/icon/icn_twt.svg');
}

.sns_link_remove_box .sns_link_info_content .icn_yahoo {
    width: 27px;
    height: 14px;
    background-image: url('../../img/common/icon/icn_yahoo.png');
}

.sns_link_remove_box .btn_sns_link_remove {
    display: block;
    width: 100%;
    height: 55px;
    font-size: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.sns_link_remove_box .sns_remove_link {
    font-size: 14px;
    margin: 0 auto;
    color: #437bce;
}

.sns_link_remove_box {
    display: flex;
    flex-direction: column;
    max-width: 360px;
    margin: 0 auto;
    padding: 40px 30px;
    border: 1px solid #c2c2c2;
}


@media (min-width: 1025px) {
    .sns_login_wrap ul li .sns:hover {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    .box_join_main ul li:hover a {
        background-color: #2e3b7d;
    }

    .box_join_main ul li:hover .btn_mid::after {
        -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
        transform: translate3d(0, 0, 0) rotate(45deg);
    }

    .box_join_main ul li:hover a::before {
        display: none;
    }

    .box_login .box_join a:hover {
        color: #000;
    }

    .steam_login_box .btn_steam_login:hover {
        -webkit-filter: saturate(1.4);
        filter: saturate(1.4);
    }

    .login_content_wrap .login_box_wrap .steam_login_info .go_steam:hover {
        filter: saturate(1.4);
    }

    .login_content_wrap .login_box_wrap .steam_login_info .go_steam:hover:before {
        filter: saturate(1.2);
    }

    .sns_register_wrap ul li:hover .sns_btn {
        border-color: #212335;
    }

    .box_help li:hover {
        border-color: #555555;
    }

    .download_game_wrap .btn_wrap a:hover {
        filter: saturate(1.4);
    }

    .end_register .resend_wrap .resend_btn:hover {
        -webkit-filter: brightness(1.5);
        filter: brightness(1.5);
    }

    .container_join .btn_reEmail.btn_sml:hover {
        color: #5d67b7;
    }

    .container_join .select_birth .error_link:hover {
        color: #336fbf;
    }

    .find_account .h3_desc a:hover {
        color: #3885ed;
    }

    /* transfer */
    .transfer_link:hover {
        color: #2b2f5a;
    }

    /* CS 브릿지 페이지 - support */
    .bridge_list .bridge_link:hover {
        background: #f8f8f8;
    }

    .bridge_list .bridge_link:hover::after {
        border: 2px solid #2b2f5a;
    }

    .nation_popup_open:hover {
        border-color: #2b2f5a;
        background: #f8f8f8;
    }

    .nation_popup .nation_selector:hover {
        color: #fff;
    }

    .nation_popup .nation_popup_close:hover .icn_close_draw {
        background: rgba(253, 253, 254, 1);
    }

    .child_protect:hover {
        border-color: #2b2f5a;
    }

    .capslock_wrap .btn_capslock:hover {
        opacity: 1;
    }

    .service_list .service_item a.item:hover {
        color: #3b6bb4;
        background-color: rgb(238, 242, 251);
    }

    .service_list .service_item a.item:hover:after {
        background-image: url('../../img/common/icon/icn_external_blue.svg');
    }

    .skin_type.theme_black .service_list .service_item a.item:hover {
        color: #b4c0db;
        background: #454c5c;
    }

    /* sns link 제거 */
    .sns_link_remove_box .sns_link_info_content .btn_sns_info_blind:hover {
        opacity: 1;
    }

    .sns_link_remove_box .sns_link_info_content .btn_sns_info:hover {
        opacity: 1;
    }

    .sns_link_remove_box .sns_remove_link:hover {
        text-decoration: underline;
        text-underline-position: under;
    }
}

@media (max-width: 1024px) {
    .container_join {
        min-height: calc(100vh - 16rem);
        padding: 4.1666rem 1.25rem 2.916rem;
        padding-left: calc(1.25rem + 4px);
    }

    .container_join .input_margin {
        margin-top: 1rem;
    }

    .container_login {
        padding-top: 4.1666rem;
    }

    .content {
        width: 100%;
        max-width: 50rem;
    }

    .max-500 {
        max-width: 32rem;
        padding: 0;
    }

    .content.sha_login_content {
        max-width: 50rem;
        padding: 0 1.25rem;
    }

    .container_login .sha_login_content {
        min-height: calc(100vh - 4.1666rem - 16rem - 8.25rem);
    }

    .content>.agree_wrap,
    .content>.box_join {
        max-width: inherit;
        margin-top: 1.5rem;
    }

    .content>.agree_wrap .btn_wrap .btn_big {
        min-width: 49.2%;
    }

    h2,
    .container_join h2 {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2.083rem;
        padding: 1.8rem 0;
        font-size: 2.1666rem;
        border-bottom: 0.083rem solid #555
    }

    .icon_step_box .pi_member_step {
        margin: 0 auto 1rem;
    }

    .icon_box {
        margin-bottom: 2.083rem;
        padding-top: 5rem
    }

    .icon_box .icon {
        width: 4.041rem;
        height: 4.041rem
    }

    .icon_box h3 {
        font-size: 1.625rem
    }

    .icon_box h3.agree_title br {
        display: none;
    }

    .icon_box h3 span.mob_block {
        display: block;
        line-height: 1.23
    }

    .icon_box .h3_desc {
        margin-top: 0.416rem;
        font-size: 0.9167rem;
        line-height: 1.55
    }

    .icon_box .h3_desc .mob_block {
        display: block
    }

    .icon_step_box+div {
        margin-top: 1.66rem;
    }

    .icon_step_box.main_step {
        margin: 1.8rem 0 0 0;
    }

    .icon_step_box h3 {
        font-size: 1.625rem
    }

    .icon_step_box h3 span.mob_block {
        display: block;
        line-height: 1.23
    }

    .icon_step_box .h3_desc {
        margin-top: 0.416rem;
        font-size: 0.833rem;
        line-height: 1.55
    }

    .icon_step_box .h3_desc .mob_block {
        display: block
    }

    .box_white {
        padding: 1.875rem 1.25rem
    }

    .box_white.big_pad {
        padding: 3rem 1.25rem
    }

    .email_confirm .box_white.mid_pad,
    .box_white.mid_pad {
        padding: 3rem 4rem;
    }

    .mob_brNone {
        border: none
    }

    .box_white .text_complete {
        margin: 1.25rem;
        font-size: 1rem;
        line-height: 1.739
    }

    .box_white .text_complete .mob_block {
        display: block
    }

    .box_white .text_complete .mob_block+br {
        display: none;
    }

    .box_white .text_complete .guide_info br {
        display: block;
    }

    .box_white .text_complete .timer_wrap {
        margin-top: 1em;
        font-size: 1.08rem;
    }

    .box_white .payment_area .title {
        font-size: 1rem;
    }

    .box_white .period_list {
        padding: .8rem 1rem 1rem;
    }

    .box_white .period_list li {
        margin: 0 1rem 0 0;
    }

    .leave_page .btn_wrap {
        margin: 40px 0 0;
    }

    .text_purging {
        margin-bottom: 1.666rem;
        font-size: 0.958rem
    }

    .text_verification {
        font-size: 0.958rem;
        line-height: 1.739;
    }

    .text_verification+.custom_input_wrap {
        margin-top: 1.5rem;
    }

    .box_email>span {
        display: flex;
        justify-content: center;
        width: auto;
        margin: 0 0 1.25rem;
        padding: 1.25rem .4rem;
        font-size: 1.083rem
    }

    .box_email>span span {
        width: 100%;
    }

    .box_email>span #btnMailSend {
        margin-right: 0;
        min-width: 10rem;
        height: 5rem;
        flex-shrink: 1;
    }

    .icon_complete {
        width: 7.5rem;
        height: 6.541rem;
        box-sizing: border-box;
        margin-bottom: 1.5rem
    }

    .check_list dl dt {
        margin-bottom: 0.625rem;
        padding-left: 1.166rem;
        font-size: 1.041rem
    }

    .check_list dl dt .pi {
        top: 0.333rem;
    }

    .check_list dl dd {
        font-size: 0.875rem;
        line-height: 1.523
    }

    .check_list .box_gray {
        padding: 1.666rem
    }

    .check_list dl+.box_gray {
        margin: 2.2083rem -1.25rem -1.875rem
    }

    .leave_list dl dd:before {
        top: 0.54rem;
    }

    .leave_list dl a {
        margin-top: 1em;
    }

    .leave_list .box_gray {
        margin-top: 0.416rem;
        padding: 1.666rem
    }

    .leave_list dl {
        margin-top: 1.24rem;
    }

    .leave_list dl dt {
        margin-bottom: 0.416rem;
    }

    .leave_list dl+.box_gray {
        margin: 2.2083rem 0 0;
    }

    .list_table {
        margin: 1.1em 0 0 0;
    }

    .list_table dl a {
        font-size: 0.875rem;
        line-height: 1.523
    }

    .list_table .td_info {
        flex-direction: column;
    }

    .list_table .td_game {
        width: auto;
    }

    .list_table .td_cash {
        min-width: initial;
        margin-right: 0;
        font-size: .916rem;
    }

    .list_table .td_link {
        width: 100%;
        margin-top: 0.58rem;
        text-align: center;
    }

    .list_table .td_link .btn {
        width: 70%;
        height: auto;
        padding: 0.583rem 0;
    }

    .leave_list {
        margin-bottom: 0.833rem;
    }

    .remaining_coins {
        font-size: 0.875rem
    }

    .remaining_coins .custom_check input[type="checkbox"]+label:before {
        margin: 0.5rem 0.5rem 0.5rem 0;
    }

    .remaining_coins h4 {
        font-size: 0.916rem
    }

    .remaining_coins h4~h4 {
        margin-top: 1.4583rem
    }

    .remaining_coins ul {
        margin-top: 0.4em;
        padding-left: 0.4em;
    }

    .remaining_coins ul li {
        padding-left: 0.4166rem;
        font-size: 0.875rem;
    }

    .remaining_coins ul li+li {
        margin-top: 0.2rem;
    }

    .remaining_coins ul li:before {
        top: 0.8rem;
    }

    .leave_agreement .custom_check+.custom_check {
        margin-top: 0.416rem;
    }

    .authentication_wrap {
        width: 100%;
        max-width: 50rem;
    }

    .box_authentication {
        margin-bottom: 1.666rem;
    }

    .box_authentication .inner {
        width: 50%;
        padding: 0 0 0.708rem
    }

    .box_authentication .inner:nth-child(2n) {
        border-right: 0
    }

    .box_authentication .inner:nth-child(3n) {
        border-right: 1px solid #b3b3b3
    }

    .box_authentication .inner h3 {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3.166rem;
        line-height: inherit;
        font-size: 1.041rem
    }

    .box_authentication .inner .icon {
        width: 4rem;
        height: 6.583rem
    }

    .container_join .select_birth.input_margin {
        margin-bottom: 2rem;
    }

    .container_join .select_birth .error_link {
        font-size: 0.833rem;
    }

    .find_account h2 {
        font-size: 2.1666rem;
        border-bottom: 0;
        margin-top: 2.083rem;
    }

    .find_account .h3_desc {
        font-size: 1.1rem;
        margin-bottom: 2.2rem;
    }

    .find_account .h3_desc.rest_account_desc {
        margin-top: 0.5rem;
        margin-bottom: 2rem;
    }

    .find_account .h3_desc .balloon_wrap {
        position: initial;
        cursor: pointer;
    }

    .find_account .h3_desc .balloon_box {
        top: calc(100% - 1.5rem);
        right: 50%;
    }

    .find_account .info_box .find_area .btn_wrap .find_btn {
        font-size: 1.1rem;
        height: 3.7rem;
    }

    .find_account .input_margin {
        margin-top: 1rem;
    }

    .find_account .info_box .find_area .btn_wrap .find_btn {
        height: 3.75rem;
        font-size: 1.2rem;
    }

    .find_account .info_box .other_find_wrap {
        margin-top: 2rem;
        font-size: 1.2rem;
    }

    .find_account .info_box .other_find_wrap .btn_wrap {
        margin-top: 0.4rem;
        gap: 1.3rem;
    }

    .find_account .info_box .other_find_wrap .btn_wrap>.other_find_btn {
        font-size: 1.2rem;
    }

    .find_account .info_box .other_find_wrap .btn_wrap>.other_find_btn::before {
        right: -0.7rem;
    }

    .find_account .find_bd_account_box {
        margin-top: 3rem;
        padding: 2.5rem 1.5rem;
    }

    .find_account .find_bd_account_box.old_account_box {
        max-width: 570px;
        margin-top: 0;
    }

    .find_account .find_bd_account_box .title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .find_account .find_bd_account_box .desc {
        font-size: 1.2rem;
    }

    .find_account .find_bd_account_box .btn_wrap {
        gap: 0.6rem;
    }

    .find_account .find_bd_account_box .btn_wrap button {
        font-size: 1.1rem;
        padding: 0 0.7rem;
        margin: 0;
        min-width: calc(33.33% - 1.4rem / 3);
    }

    .find_account .my_account_list .my_account_list_item {
        margin-top: 0.6rem;
        border-radius: 0.3rem;
    }

    .find_account .my_account_list~.text_complete_box .h3_desc {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .find_account .btn_wrap {
        gap: 0.6rem;
        margin-top: 1.25rem;
    }

    .find_account .btn_wrap .btn {
        height: 3.75rem;
        font-size: 1.2rem;
    }

    .find_account .recaptcha_wrap,
    .find_account .recaptcha_wrap+.btn_wrap {
        margin-top: 1.25rem;
    }

    .find_account.find_old_account {
        padding: 2rem 1.5rem;
        margin-top: 2.6rem;
    }

    .find_account.find_old_account h2 {
        margin-top: 0;
        margin-bottom: 1.4rem;
        font-size: 1.3rem;
    }

    .find_account.find_old_account .h3_desc {
        margin-bottom: 1.2rem;
    }

    .dormant_box .dormant_info p>br {
        display: none
    }

    .box_authentication .inner .btn_wrap {
        padding: 0 0.708rem
    }

    .authentication_wrap.col3 .inner {
        width: 50%
    }

    .authentication_wrap.col3 .inner:nth-child(2n) {
        border-right: 0
    }

    .authentication_wrap.col3 .inner:nth-child(2n+1) {
        border-right: 1px solid #b3b3b3
    }

    .text_complete_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    .text_complete_box.center {
        justify-content: center;
    }

    .text_complete_box .text_complete {
        text-align: left;
        margin-bottom: 0;
        padding-right: .8rem;
    }

    .btn_account_list {
        width: 100%;
        margin-bottom: 0;
    }

    .my_account_list {
        width: 100%
    }

    .my_account_list .my_account_list_item {
        height: auto;
        min-height: 3.75rem;
        padding: 1.083rem 1.25rem
    }

    .my_account_list .my_account_list_item .th {
        width: 8.5rem;
        font-size: 1.083rem
    }

    .my_account_list .my_account_list_item .th:after {
        top: 0;
        height: 1.5rem;
        background-color: #bababa
    }

    .my_account_list .my_account_list_item .td {
        width: calc(91.5%);
        padding-left: 1.666rem;
        font-size: 1.083rem
    }

    .my_account_list .my_account_list_item .user_id {
        padding-right: 40%;
        font-size: 1.083rem
    }

    .my_account_list .my_account_list_item .btn_find_pass {
        right: 0.416rem
    }

    .login_content_wrap {
        background: #fff;
    }

    .login_content_wrap .login_title {
        display: flex;
        padding: 2.125rem 0;
        border-bottom: none;
        font-size: 1.875rem;
    }

    .login_content_wrap .login_title li {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 50%;
        height: 3.291rem;
        box-sizing: border-box;
        border: 1px solid #dfdfdf;
        text-align: center;
        font-size: 0.958rem;
        background: #fff;
        margin-left: -1px;
        cursor: pointer;
    }

    .login_content_wrap .login_title li.active {
        height: 3.291rem;
        background: #323232;
        color: #fff;
        font-weight: normal;
        border: 0;
        z-index: 2;
    }

    h2.line.oauth_line {
        border-bottom: 2px solid #555;
    }

    .login_content_wrap {
        border: none;
        padding: 0 4rem;
        margin-top: 0;
    }

    .login_content_wrap:before {
        background: none;
    }

    .steam_login_box {
        padding: 2.25rem 1.25rem 2.25rem;
    }

    .steam_login_box .btn_steam_login {
        height: 3.75rem;
        padding: 0 0.5rem;
        font-size: 1.083rem;
    }

    .steam_login_box .btn_steam_login .pi {
        margin-right: 0.8333rem;
    }

    .login_content_wrap .login_box_wrap .steam_login_info p {
        font-size: 0.8333rem;
    }

    .login_content_wrap .login_box_wrap .steam_login_info .label {
        font-weight: bold;
        color: #515151;
    }

    .login_content_wrap .login_box_wrap .steam_login_info .go_steam {
        font-size: 0.8333rem;
    }

    .login_content_wrap .login_box_wrap .steam_login_info .go_steam:after {
        top: -0.043rem;
        padding: 0.2083rem;
    }

    .box_login {
        width: 100%;
        padding-top: 0
    }

    .box_login ul li+li {
        margin-top: 0.833rem
    }

    .box_login ul li:last-child {
        margin-top: 2.125rem;
    }

    .box_login ul li .btn_mid {
        height: 3.75rem;
        font-size: 1.083rem;
        line-height: 1.3;
    }

    .box_login .box_join {
        margin: 0.9375rem 0 2.1875rem;
    }

    .box_login .box_join a {
        padding: 0 1rem;
        font-size: 0.925rem;
        text-align: left;
    }

    .box_login .box_join a:before {
        top: 30%;
        height: 80%;
    }

    .box_join {
        width: 100%;
        padding-top: 0
    }

    .box_join,
    .agree_wrap {
        margin-top: 1.75rem;
    }

    .box_join_main {
        max-width: 32rem;
        padding: 0 1.8583rem;
        box-sizing: border-box;
    }

    .box_join_main ul li .btn_mid {
        height: 4.75rem;
        font-size: 1.3rem;
    }

    .box_join_main ul li .btn_mid::after {
        width: .5rem;
        height: .5rem;
        right: 1.5rem;
        margin-top: -.25rem;
    }

    .sns_login_title {
        padding-top: 1.875rem;
    }

    .sns_login_wrap {
        padding: 1.875rem 0;
    }

    .sns_login_wrap ul li {
        width: 3.2rem;
        height: 3.2rem;
        margin: 0.25rem 0.4167rem;
    }

    .sns_login_title .text {
        font-size: 0.925rem;
    }

    .check_login_wrap {
        margin-top: 60px;
        margin-bottom: 60px;
        padding: 0;
    }

    .check_login_wrap .desc_wrap {
        font-size: 0.9167rem;
    }

    .check_login_wrap .content_title {
        padding-top: 0;
        font-size: 1.875rem;
    }

    .check_login_wrap .box_wrap .bold_text {
        font-size: 18px;
    }

    .check_login_wrap .nickname {
        font-size: 14px;
    }

    .check_login_wrap .desc_center {
        font-size: 11px;
    }

    .check_login_wrap .desc_wrap {
        margin: 0 auto 2.125rem auto;
    }

    .find_pw_wrap .ask_text {
        margin: 0 0 0.5rem;
        font-size: 0.8333rem;
    }

    .find_pw_wrap .btn_wrap {
        margin: 2.0833rem 0 0 0;
    }

    .find_area {
        padding: 0
    }

    .find_area .text_verification+.custom_input {
        margin-top: 1.64rem;
    }

    .find_area .mail_address+.input_box {
        margin-top: 1.875rem;
    }

    .find_area .input_box+.input_box {
        margin-top: 0.8rem;
    }

    .find_area .custom_input_box {
        margin-top: 0.625rem;
    }

    .find_area .btn_wrap {
        margin-top: 1.25rem;
    }

    .find_area .btn_wrap .frm_wrap {
        flex: 0 1 100%;
    }

    .select_birth {
        margin: 1.25rem 0 0.521rem 0;
    }

    /* 이용 가능한 서비스 */
    .service_list_wrap+.agree_wrap {
        margin-top: 1.75rem;
    }

    .service_list_wrap .service_desc {
        font-size: .925rem;
    }

    .service_list .service_item .item {
        font-size: .925rem;
        padding: .5rem .925rem;
    }

    .service_list .service_item a:after {
        width: 0.875rem;
        height: 0.875rem;
        margin: 0.1rem 0 0 0.2rem;
    }

    /*사용 여부 확인 필요함 todo*/
    /*.find_area .select_birth .custom_select.sel_year { width:38.23% }
    .box_join .select_birth .custom_select.sel_year { width:38.23% }*/


    .phoneauth_area .input_area {
        border: 1px solid #b3b3b3
    }

    .phoneauth_area .input_area .custom_input {
        width: calc(100% - 7.8333rem);
        border: 0
    }

    .phoneauth_area .input_area input[type='text'] {
        height: 3.666rem;
        font-size: 1.0833rem
    }

    .phoneauth_area .input_area label {
        font-size: 1.0833rem
    }

    .phoneauth_area .btn {
        width: 7.8333rem;
        height: 3.666rem;
        margin: 0;
        border: 0;
        border-left: 1px solid #b3b3b3;
        padding: 0 1rem
    }

    .phoneauth_area .bullet_list {
        margin-bottom: 1.666rem
    }

    .sns_register_wrap {
        width: 100%;
        max-width: 32rem;
        padding: 1.8583rem;
        box-sizing: border-box
    }

    .sns_register_wrap ul li .sns {
        width: 3.75rem;
    }

    .sns_register_wrap ul li .sns_btn {
        height: 3.5rem;
        font-size: 0.958rem
    }


    /* 예외 구문 */
    .container.oauth .agree_wrap {
        margin-top: 1.666rem;
    }


    /* box_help */
    .box_help {
        padding: 0 0 1rem;
    }

    .box_help li {
        height: 6rem;
        margin-top: 1rem;
        border-color: #999;
    }

    .box_help li.fint_old_account_item {
        height: 4rem;
    }

    .box_help .ico_help {
        width: 5rem;
    }

    .box_help strong {
        font-size: 1.3rem;
        padding: 0.5rem;
    }

    /* download_game_wrap */
    .download_game_wrap .btn_wrap {
        display: block;
        overflow: hidden;
    }

    .download_game_wrap .btn_wrap a {
        width: 28.3333rem;
        height: 5rem;
        margin: 0 auto 0.8rem;
    }

    .download_game_wrap .btn_wrap a~a {
        margin-left: 0;
    }

    .download_game_wrap .down_title {
        padding-left: 4.9167rem;
        font-size: 0.9rem;
        line-height: 1.2;
    }

    .download_game_wrap .down_circle {
        left: 2.2917rem;
        width: 2.0833rem;
        height: 2.0833rem;
    }

    /* box_auth_key & email auth */
    .auth_key_wrap .key_input {
        flex: 0 0 2.8333rem;
        width: 2.8333rem;
        height: 2.8333rem;
        font-size: 1.2rem;
    }

    .auth_key_wrap .key_input+.key_input {
        margin: 0 0 0 0.2083rem;
    }

    .box_auth_key h4,
    .box_auth_key .otp_codes li {
        font-size: 1.0833rem
    }

    .auth_desc_wrap .email_text,
    .box_auth_key .desc,
    .box_auth_key .otp_warning {
        font-size: 0.9583rem
    }

    .auth_key_wrap,
    .box_auth_key .desc {
        margin: 1.6667rem 0 0;
    }

    .box_auth_key .btn_sml02 {
        min-width: 6.875rem;
        margin: 0 0.5rem;
    }

    .box_auth_key .blue_text_btn {
        font-size: 0.9167rem;
    }

    .box_auth_key .loader {
        width: 1.2917rem;
        height: 1.2917rem;
        top: calc(50% - 0.64585rem);
    }

    .box_auth_key .loader .leftHalf,
    .box_auth_key .loader .rightHalf,
    .box_auth_key .loader .spinner {
        width: 0.65585rem;
        height: 1.2917rem;
    }

    .end_register h2 {
        margin-bottom: 40px;
    }

    .end_register .auth_key_wrap {
        margin-top: 2.5rem;
    }

    .end_register .btn_wrap {
        margin-top: 2.5rem;
    }

    .end_register .btn_wrap .end_register .resend_wrap {
        margin-top: 2rem;
        font-size: .916rem;
    }

    .end_register .resend_wrap .resend_btn {
        padding: .3rem;
    }

    .end_register .resend_wrap .txt_blue {
        margin-left: .3rem;
        font-size: .916rem;
    }

    .parents_auth_wrap .input_margin,
    .parents_auth_wrap .input_margin+.input_with_btn {
        margin-top: 0.916rem;
    }

    .parents_auth_wrap .time_auth {
        margin-top: 1rem;
        font-size: 0.958rem;
    }

    .parents_auth_wrap .text_complete {
        margin-bottom: 2rem;
    }

    .parents_auth_wrap .payment_area .title {
        font-size: 1rem;
    }

    .parents_auth_wrap .period_list li {
        margin: 0.5rem 0;
    }

    /* CS 브릿지 페이지 - support */
    .cs_bridge .cs_title {
        margin-top: 3rem;
        font-size: 2.2rem;
    }

    .cs_bridge .cs_title_desc {
        margin-top: 1.5rem;
        font-size: 1.0625rem;
    }

    .bridge_list {
        margin-top: 3rem;
    }

    .bridge_list .bridge_box {
        width: 25.5rem;
        height: 13.875rem;
        margin-bottom: 2.5%;
    }

    .nation_popup .nation_selector {
        color: #fff;
    }

    .nation_popup_open {
        min-width: 13.75rem;
        font-size: 1.0625rem;
    }

    .child_protect_wrap {
        margin-top: 2.6875rem;
    }

    .child_protect {
        width: 23.3125rem;
        max-width: 90%;
        height: 4.8125rem;
        font-size: 1.125rem;
    }

    /* transfer */
    .container_transfer {
        min-height: calc(100vh - 16rem);
        padding: 4.1666rem 1.25rem 2.916rem;
    }

    .container_transfer .transfer_wrap {
        padding: 3.25rem 7%;
    }

    .container_transfer .transfer_article {
        margin-top: 3rem;
    }

    .container_transfer .transfer_title {
        font-size: 1.65rem;
    }

    .container_transfer .transfer_title_desc {
        font-size: 1.1rem;
    }

    .container_transfer .transfer_title+.transfer_title_desc {
        margin-top: 1.25rem;
    }

    .container_transfer.pending {
        height: 100vh;
    }

    .nation_select_desc .icn_svg {
        transform: translateY(8%);
    }

    .nation_select_item .nation_select_btn {
        height: 3.25rem;
        font-size: 1rem;
        padding: 0 1.5rem;
    }

    .table_item {
        padding: .75rem .6rem;
    }

    .table_title {
        font-size: .95rem;
    }

    .table_key {
        font-size: .8rem;
    }

    .table_value {
        font-size: .875rem;
    }

    .auth_num_wrap .auth_num_help {
        margin-top: 1rem;
        font-size: 1rem;
    }

    .container_transfer .transfer_user_wrap {
        margin: 2.75rem 0;
    }

    .transfer_user_wrap.small {
        margin-bottom: 1rem;
    }

    .transfer_innerbox .icn_svg {
        width: 2.25rem;
    }

    .transfer_innerbox .icn_svg.cert_mobile {
        height: 3.7rem;
    }

    .transfer_innerbox .icn_svg.cert_creditcard {
        height: 2.85rem;
    }

    .transfer_wrap .box_join .js-email {
        margin-top: 1rem;
    }

    .deleted_question_wrap .balloon_box {
        left: calc(50% - 3rem);
    }

    .transfer_wrap .deleted_wrap .table_value .icn_svg.lock {
        width: 1.1rem;
        height: 1.4rem;
    }

    .capslock_wrap {
        right: 3.6rem;
        top: 1rem;
    }

    .capslock_wrap .balloon_box {
        left: auto;
        right: -2.4rem;
    }

    .capslock_wrap .balloon_box::before {
        left: auto;
        right: 2.52rem;
    }

    .content_text_box {
        padding-top: 1rem;
    }

    .available_game_info_box {
        margin: 0 auto 2rem;
    }

    .available_game_info_box .available_game_info_text {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }

    .available_game_info_box .available_game_info {
        padding: 1.3rem 0.4rem;
    }


    /* sns link 제거 */
    .sns_link_remove_box .sns_link_remove_title {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    .sns_link_remove_box .sns_link_remove_desc {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .sns_link_remove_box .sns_link_info_box {
        margin-bottom: 1rem;
        border-radius: 0.25rem;
    }

    .sns_link_remove_box .sns_link_info {
        padding: 0.8rem;
    }

    .sns_link_remove_box .sns_link_info_title {
        font-size: 1rem;
        margin-bottom: 0.8rem;
    }

    .sns_link_remove_box .sns_link_info_content {
        font-size: 1.2rem;
    }

    .sns_link_remove_box .sns_link_info_content .btn_sns_info_blind {
        display: block;
        width: 1.9rem;
        height: 1.6rem;
        opacity: 1;
    }

    .sns_link_remove_box .sns_link_info_content .btn_sns_info {
        display: block;
        width: 1.9rem;
        height: 1.6rem;
        opacity: 1;
    }

    .sns_link_remove_box .sns_link_info_content i {
        margin-right: 0.7rem;
    }

    .sns_link_remove_box .sns_link_info_content .icn_twitter {
        width: 1.3rem;
        height: 1.1rem;
    }

    .sns_link_remove_box .sns_link_info_content .icn_yahoo {
        width: 1.8rem;
        height: 1.05rem;
    }

    .sns_link_remove_box .btn_sns_link_remove {
        height: 3.8rem;
        font-size: 1rem;
        border-radius: 0.25rem;
        margin-bottom: 1rem;
    }

    .sns_link_remove_box .sns_remove_link {
        font-size: 1rem;
    }

    .sns_link_remove_box {
        max-width: 24rem;
        margin: 100px auto 0;
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 767px) {
    .container_join {
        min-height: calc(100vh - 19rem);
    }

    .container_login .sha_login_content {
        min-height: calc(100vh - 4.1666rem - 19rem - 8.25rem);
    }

    .login_content_wrap .login_box_wrap .steam_login_info .go_steam {
        display: block;
    }

    .login_content_wrap {
        padding: 0;
    }

    .email_confirm .box_white.mid_pad,
    .box_white.mid_pad {
        padding: 3.1666rem 1.25rem;
    }

    .check_login_wrap {
        margin-top: 1.8rem;
        margin-bottom: 3.6rem;
    }

    .bridge_list {
        flex-wrap: wrap;
    }

    .bridge_list .bridge_box {
        width: 100%;
        max-width: 342px;
        height: 194px;
    }

    .nation_popup_open {
        min-width: 55%;
    }

    .nation_popup .popup_item+.popup_item {
        margin-top: 1rem;
    }

    .nation_popup .nation_selector {
        min-width: 66%;
        font-size: 1.2rem;
    }

    .nation_popup .nation_popup_close {
        top: 9px;
        right: 11px;
    }

    .capslock_wrap {
        display: none;
    }
}

@media (max-width: 400px) {
    .bridge_list .bridge_box {
        height: 49vw;
    }
}

/* skintype common */
/*body { background: #0f0c0a; }*/
.skin-m {
    display: none !important;
}

.skin_type {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 2560px;
    overflow: hidden;
}

.skin_type .skin_floating_wrap {
    position: relative;
    min-height: 550px;
    height: 100vh;
    background: url(../../img/common/join_skin_thum_world.jpg) no-repeat center / 1920px 1080px;
}

.skin_type .skin_left_container {
    width: calc(100% - 440px);
    height: 100%;
    padding: 0 100px;
    box-sizing: border-box;
}

.skin_type .skin_going_home {
    position: absolute;
    top: 25px;
    left: 35px;
    width: 180px;
    height: 30px;
    opacity: .9;
    -webkit-filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.4));
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.4));
    background: url(../../img/common/join_skin_header_bdo_logo.svg) no-repeat center;
    background-size: contain;
    z-index: 10;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
}

/* skin floating */
.skin_type .skin_floating {
    position: absolute;
    left: 4%;
    bottom: 98px;
    display: flex;
    justify-content: space-between;
    width: calc(92% - 440px);
    box-sizing: border-box;
    z-index: 1;
}

.skin_type .skin_floating_img {
    max-width: 100%;
}

.skin_type .skin_floating_img img {
    max-width: 100%;
}

.skin_type .skin_sub_title {
    margin-top: 12px;
    color: rgba(255, 255, 255, .7);
    font-size: 25px;
}

.skin_type .skin_title {
    color: #ffc64c;
    font-size: 44px;
}

.skin_type button.skin_title {
    display: none;
}

.skin_type .skin_movie_wrap {
    position: relative;
    width: 294px;
    height: 190px;
    background: url('../../img/common/join_skin_default_movie_thumb.png') no-repeat center;
    background-size: cover;
    cursor: pointer;
}

.skin_type .skin_movie_wrap .skin_movie_btn {
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    width: 50px;
    height: 50px;
    -webkit-transition: transform .2s;
    transition: transform .2s;
    background: url('../../img/common/join_skin_default_movie_btn.svg') no-repeat center;
    background-size: contain;
}

.skin_type .skin_movie_wrap .skin_movie_btn:focus {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1.2);
    transform: translate3d(-50%, -50%, 0) scale(1.2);
}

.skin_type .skin_movie_modal {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
}

.skin_type .skin_movie_modal.on {
    display: flex;
    opacity: 1;
    visibility: visible;
    -webkit-animation: modalOpen .3s ease;
    animation: modalOpen .3s ease;
}

.skin_type .skin_movie_modal .skin_movie_content {
    position: relative;
    width: 80%;
    max-height: 90%;
    background: rgba(0, 0, 0, 0.75);
}

.skin_type .skin_movie_modal .skin_movie {
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}

.skin_type .skin_movie_modal .skin_movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.skin_type .skin_movie_modal .skin_modal_close {
    position: absolute;
    top: 0;
    right: -98px;
    width: 68px;
    height: 68px;
    border: 1px solid #71706f;
    background: rgba(255, 255, 255, 0);
    -webkit-transition: border-color .2s, background-color .2s;
    transition: border-color .2s, background-color .2s;
}

.skin_type .skin_movie_modal .skin_modal_close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 35px;
    height: 1px;
    background: #71706f;
    -webkit-transition: background-color .2s;
    transition: background-color .2s;
}

.skin_type .skin_movie_modal .skin_modal_close:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, .2);
}

.skin_type .skin_movie_modal .skin_modal_close:focus span {
    background: #fff;
}

.skin_type .skin_movie_modal .skin_modal_close span:nth-of-type(1) {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg);
    transform: translate3d(-50%, -50%, 0) rotate(45deg);
}

.skin_type .skin_movie_modal .skin_modal_close span:nth-of-type(2) {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
    transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}

.skin_type .skin_movie_modal .skin_movie_dimmed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    z-index: -1;
}

/* skin join */
.skin_type .container_wrap {
    position: absolute;
    top: 0;
    right: 0;
    flex: 0 0 auto;
    width: 440px;
    height: 100%;
    padding: 0 4px 0 8px;
    box-sizing: border-box;
}

.skin_type .container_join {
    position: relative;
    padding-bottom: 1.75rem;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    box-sizing: border-box;
}

.skin_type .container_join::-webkit-scrollbar {
    width: 4px;
    background: transparent;
}

.skin_type .container_join::-webkit-scrollbar-button {
    display: block;
    height: 6px;
    background-color: transparent
}

.skin_type .container_join::-webkit-scrollbar-track {
    background-color: transparent;
}

.skin_type .container_join::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 11px;
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1)
}

.skin_type .container_join .content {
    max-width: 354px;
}

.skin_type .custom_input input[type="email"]:focus,
.skin_type .custom_input input[type="password"]:focus,
.skin_type .custom_input input[type="text"]:focus,
.skin_type .custom_input input[type="number"]:focus {
    box-shadow: none;
}

.skin_type .container_join .btn_wrap {
    max-width: 354px;
}

.skin_type .box_join,
.skin_type .agree_wrap {
    margin-top: 40px;
}

.skin_type .container_join .btn_wrap {
    margin-top: 30px;
}

.skin_type .skin_down_link_wrap {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.skin_type .skin_down_link_wrap .skin_down_link {
    color: #4388da;
    font-size: 12px;
    text-decoration: underline;
    text-underline-position: under;
}

/* skin complete */
.skin_type .auth_complete_skin .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding-bottom: 1.5rem;
}

.skin_type .complete_text {
    width: 100%;
    padding-top: 22vh;
    text-align: center;
}

.skin_type .complete_text .text_sup {
    font-size: 18px;
}

.skin_type .complete_text .text_title {
    font-size: 32px;
    margin-top: .5rem;
}

.skin_type .complete_text .btn {
    margin-top: 1.75rem;
}

.skin_type .complete_btn {
    flex: 0 0 auto;
    margin-top: 1.75rem;
    width: 100%;
}

/* skin video */
.skin_type .video_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.skin_type .video_wrap video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

.skin_type .video_wrap video.on {
    opacity: 1;
    visibility: visible;
}

/* skintype black */
.skin_type.theme_black {
    background: #0e151f;
}

.skin_type.theme_black .container_wrap {
    background: rgba(36, 39, 46, .92);
}

.skin_type.theme_black .container_join h2 {
    font-size: 1.75rem;
    color: #eef2fe;
}

.skin_type.theme_black .custom_input input.input-validation-error.typing,
.skin_type.theme_black .custom_input input[type="email"],
.skin_type.theme_black .custom_input input[type="password"],
.skin_type.theme_black .custom_input input[type="text"],
.skin_type.theme_black .custom_input input[type="number"] {
    color: #c9d1e4;
    border-color: #424959;
    background: #24272e;
}

.skin_type.theme_black .custom_input input[type="email"]:disabled,
.skin_type.theme_black .custom_input input[type="password"]:disabled,
.skin_type.theme_black .custom_input input[type="text"]:disabled,
.skin_type.theme_black .custom_input input[type="number"]:disabled {
    background: #35363a;
    color: #b3b3b3;
}

.skin_type.theme_black .custom_input input.input-validation-error.typing,
.skin_type.theme_black .custom_input input:focus,
.skin_type.theme_black .custom_input input.active {
    border-color: #76839f;
}

.skin_type.theme_black .custom_input input.input-validation-error.input_mask,
.skin_type.theme_black .custom_input input.input_mask {
    color: transparent;
}

.skin_type.theme_black .custom_input input.input_mask.active,
.skin_type.theme_black .custom_input input.input_mask:focus {
    color: #a6b2cd;
}

.skin_type.theme_black .custom_input input.input-validation-error {
    color: #ea5252;
    border-color: #de5d5d;
    background: #292121;
}

.skin_type.theme_black .custom_input.label label {
    color: #727a8e;
}

.skin_type.theme_black .custom_input label::before,
.skin_type.theme_black .select2-input .input_label::before {
    background: #24272e;
}

.skin_type.theme_black .custom_input input.input-validation-error~label::before {
    background: #292121;
}

.skin_type.theme_black .custom_input input.input-validation-error.typing~label::before {
    background: #24272e;
}

.skin_type.theme_black .custom_input input.input-validation-error.typing+label,
.skin_type.theme_black .custom_input input.input-validation-error.active.typing+label,
.skin_type.theme_black .custom_input input:focus+label,
.skin_type.theme_black .custom_input input.active+label,
.skin_type.theme_black .select2-input .input_label {
    color: #a6b2cd;
}

.skin_type.theme_black .custom_input input.input-validation-error+label,
.skin_type.theme_black .custom_input input.input-validation-error.active+label {
    color: #ea5252;
}

.skin_type.theme_black .custom_line::before {
    background: #24272e;
}

.skin_type.theme_black .container_join .btn_reEmail.btn_sml {
    color: #bbc8e7;
}

.skin_type.theme_black .container_join .email_tooltip_title {
    color: #c9d1e4;
}

.skin_type.theme_black .btn_blue {
    color: #eff3ff;
    background-color: #495c9c;
}

.skin_type.theme_black .btn.disabled {
    background-color: #535967;
}

.skin_type.theme_black .balloon_box {
    max-width: calc(100% + 15px);
    border-color: #5c6577;
    background: #383c47;
}

.skin_type.theme_black .balloon_box::before {
    border-color: #5c6577;
    background: #383c47;
}

.skin_type.theme_black .balloon_title {
    color: #c9d1e4;
}

.skin_type.theme_black .balloon_desc {
    color: #99a3bb;
}

.skin_type.theme_black .email_tooltip .balloon_box {
    left: -20px;
    max-width: 390px;
}

.skin_type.theme_black .email_tooltip .balloon_box::before {
    left: 24px;
}

.skin_type.theme_black .tooltip_wrap::before {
    -webkit-filter: brightness(2.1);
    filter: brightness(2.1);
}

.skin_type.theme_black .tooltip_title {
    color: #c9d1e4;
}

.skin_type.theme_black .custom_select select {
    border: 1px solid #424959;
    background: #24272e;
}

.skin_type.theme_black .select2-input .select2-dropdown,
.skin_type.theme_black .select2-input .select2-selection {
    background: #24272e;
}

.skin_type.theme_black .select2-container--open .select2-dropdown {
    border-color: #76839f;
}

.skin_type.theme_black .custom_select .select2-container .select2-selection,
.skin_type.theme_black .select2-input .select2-results__options,
.skin_type.theme_black .select2-results__option--selectable {
    color: #727a8e;
}

.skin_type.theme_black .select2-input .select2-results__option--highlighted.select2-results__option--selectable {
    color: #a6b2cd;
    background: #2d364a;
}

.skin_type.theme_black .select2-search--dropdown .select2-search__field {
    color: #727a8e;
    border-color: #424959;
    background: #24272e;
}

.skin_type.theme_black .select2-search--dropdown .select2-search__field:focus {
    color: #a6b2cd;
    border-color: #76839f;
}

.skin_type.theme_black .custom_check input[type="checkbox"]~label,
.skin_type.theme_black .custom_radio input[type="radio"]~label,
.skin_type.theme_black .custom_check input[type="checkbox"]~label a,
.skin_type.theme_black .custom_radio input[type="radio"]~label a {
    color: #99a3bb;
}

.skin_type.theme_black .agree_wrap .box_agree .box_policy_wrap {
    border-color: #424959;
    background: #24272e;
}

.skin_type.theme_black .agree_wrap .box_agree.error .box_policy_wrap {
    border-color: #de5d5d;
    background: #292121;
}

.skin_type.theme_black .custom_radio input[type="radio"]:focus~label {
    border-color: #fff;
}

.skin_type.theme_black .custom_check input[type="checkbox"]:focus~label:before,
.skin_type.theme_black .custom_radio input[type="radio"]:focus~label {
    box-shadow: 0 0 0 1.5px #fff;
}

.skin_type.theme_black .custom_check input[type="checkbox"]~label::before {
    background-color: #535967;
}

.skin_type.theme_black .custom_check input[type="checkbox"]:checked~label::before {
    background-color: #495c9c;
}

.skin_type.theme_black .agree_wrap .box_policy p,
.skin_type.theme_black .agree_wrap .box_policy span {
    color: #5d6472 !important;
}

.skin_type.theme_black .container_join::-webkit-scrollbar-thumb,
.skin_type.theme_black .agree_wrap .box_agree .box_policy::-webkit-scrollbar-thumb,
.skin_type.theme_black .select2-results__options::-webkit-scrollbar-thumb {
    background-color: #4a4e5a;
}

.skin_type.theme_black .custom_select .select2-container .select2-selection--single .select2-selection__rendered {
    color: #c9d1e4;
}

.skin_type.theme_black .custom_select .select2-container .select2-selection,
.skin_type.theme_black .select2-results__option--selectable {
    border-color: #76839f;
    background: #24272e;
}

.skin_type.theme_black .custom_select .select2-container:after {
    border-color: #424959;
}

.skin_type.theme_black .custom_select .select2-container.select2-container--open:not([disabled])::after {
    border-color: #76839f;
}

.skin_type.theme_black .js-emailAuth.btn_blue::after {
    background-color: #495c9c;
}

.skin_type.theme_black~.footer_wrap {
    background: rgba(36, 39, 46, 1);
}

.skin_type.theme_black~.footer_wrap .inner_footer {
    border-top: none;
}

.skin_type.theme_black~.footer_wrap .inner_footer .term_list a {
    color: #99a3bb;
}

.skin_type.theme_black~.footer_wrap .inner_footer .copyright p {
    color: #bdbec0;
}

.skin_type.theme_black~.footer_wrap .inner_footer .copyright .btn_pearlabyss {
    opacity: .7;
    background-image: url(../../img/common/bi_white.svg);
}

.skin_type.theme_black~.footer_wrap #languageBox select {
    color: #bdbec0;
}

.skin_type.theme_black~.footer_wrap #languageBox select:focus {
    box-shadow: none;
}

.skin_type.theme_black~.footer_wrap #languageBox select:focus~.icn_globe {
    -webkit-filter: brightness(1.5);
    filter: brightness(1.5);
}

/* skintype black complete */
.skin_type.theme_black .complete_text .text_sup {
    color: #99a3bb;
}

.skin_type.theme_black .complete_text .text_title {
    color: #f2f6ff;
}

.skin_type.theme_black .complete_text .text_free {
    color: #6a8cfd;
}

.skin_type.theme_black .btn_transparent {
    color: #99a3bb;
    border-color: #545e73;
}

/* skintype black service bullet */
.skin_type.theme_black .box_join .bullet_list.service_bullet li {
    color: #99a3bb;
}

.skin_type.theme_black .service_list .service_item .item {
    color: #99a3bb;
    background: #2e343e;
}

.skin_type.theme_black .service_list .service_item a.item:after {
    background-image: url('../../img/common/icon/icn_external_white.svg');
    opacity: 0.6;
    transition: opacity 0.3s;
}

.skin_type.theme_black .service_list_wrap .service_desc {
    color: #99a3bb;
}

.skin_type.theme_black .agree_wrap .box_agree .btn_agree_more_js::after {
    border-color: #99a3bb;
}

/* skintype white */
.skin_type.theme_white .container_wrap {
    background: rgba(255, 255, 255, .90);
}

.skin_type.theme_white .container_join h2 {
    color: #2d2d4a;
}

.skin_type.theme_white .custom_input input.input-validation-error.typing,
.skin_type.theme_white .custom_input input[type="email"],
.skin_type.theme_white .custom_input input[type="password"],
.skin_type.theme_white .custom_input input[type="text"],
.skin_type.theme_white .custom_input input[type="number"] {
    background: #fff;
}

.skin_type.theme_white .custom_input input.input-validation-error {
    background: #fff6f6;
}

.skin_type.theme_white .custom_input input.input-validation-error~label::before {
    background: #fff6f6;
}

.skin_type.theme_white .custom_input input.input-validation-error.typing~label::before {
    background: #fff;
}

.skin_type.theme_white .custom_input label::before,
.skin_type.theme_white .select2-input .input_label::before {
    background: #fff;
}

.skin_type.theme_white .custom_select .select2-container .select2-selection {
    background: #fff;
}

.skin_type.theme_white .agree_wrap .box_agree .box_policy_wrap {
    background: #fff;
}

/* skintype white complete */
.skin_type.theme_white .complete_text .text_sup {
    color: #5f5f5f;
}

.skin_type.theme_white .complete_text .text_title {
    color: #2d2d4a;
}

.skin_type.theme_white .complete_text .text_free {
    color: #4848a1;
}

@media (min-width: 1921px) {
    .skin_type .skin_floating_wrap {
        background-size: cover;
    }
}

@media (min-width: 1025px) {
    .skin_type .skin_going_home:hover {
        opacity: 1;
    }

    .skin_type.theme_black .container_join .btn_reEmail.btn_sml:hover {
        color: #dadcef;
    }

    .skin_type.theme_black .custom_select .select2-container:not([disabled]):hover:after {
        border-color: #76839f;
    }

    .skin_type.theme_black .custom_check input[type="checkbox"]~label:hover::before {
        box-shadow: 0 0 0 1.5px #fff;
    }

    .skin_type.theme_black .custom_check input[type="checkbox"]~label:hover,
    .skin_type.theme_black .custom_radio input[type="radio"]~label:hover,
    .skin_type.theme_black .custom_check input[type="checkbox"]~label a:hover,
    .skin_type.theme_black .custom_radio input[type="radio"]~label a:hover {
        color: #b8c0d2;
    }

    .skin_type .skin_movie_modal .skin_modal_close:hover {
        border-color: #fff;
        background: rgba(255, 255, 255, .2);
    }

    .skin_type .skin_movie_modal .skin_modal_close:hover span {
        background: #fff;
    }

    .skin_type .skin_movie_wrap:hover .skin_movie_btn {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    .skin_type.theme_black~.footer_wrap .inner_footer .term_list a:hover {
        color: #b8c0d2;
    }

    .skin_type.theme_black~.footer_wrap #languageBox .custom_select:hover select {
        color: #e5e5e5;
        border-bottom: #e5e5e5;
    }

    .skin_type.theme_black~.footer_wrap #languageBox .custom_select select option {
        color: #676767
    }

    .skin_type.theme_black~.footer_wrap #languageBox .custom_select:hover .icn_globe {
        -webkit-filter: brightness(1.5);
        filter: brightness(1.5);
    }

    .skin_type.theme_black~.footer_wrap #languageBox .custom_select:hover:after {
        border-color: #e5e5e5;
    }
}

@media (max-width: 1440px) {
    .skin_type .skin_floating_wrap {
        min-height: 485px;
    }

    .skin_type .skin_floating {
        position: relative;
        left: 0;
        bottom: 0;
        justify-content: center;
        align-items: flex-end;
        width: calc(100% - 350px);
        height: 100%;
        padding-bottom: 5vh;
    }

    .skin_type .skin_floating_left {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
        text-align: center;
    }

    .skin_type .skin_floating_right {
        position: absolute;
        top: 45%;
        left: 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
    }

    .skin_type .skin_floating_img {
        padding-left: 2.5%;
    }

    .skin_type .skin_sub_title {
        font-size: 22px;
    }

    .skin_type .skin_title {
        font-size: 38px;
    }

    .skin_type .skin_movie_wrap .skin_movie_btn:focus {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    .skin_type .skin_movie_modal .skin_movie_content {
        width: calc(78% - 4.5rem);
    }

    .skin_type .skin_movie_modal .skin_modal_close {
        right: -4.5rem;
        width: 3.5rem;
        height: 3.5rem;
    }

    .skin_type .skin_movie_modal .skin_modal_close span {
        width: 2rem;
    }

    .skin_type .container_join h2 {
        padding-top: 1.5rem;
        height: auto;
        font-size: 1.75rem;
        border-bottom: 0;
        margin-bottom: 0;
    }

    .skin_type .box_join,
    .skin_type .agree_wrap {
        margin-top: 1.5rem;
    }

    .skin_type .container_join .content {
        max-width: 290px;
    }

    .skin_type .custom_input input[type="email"],
    .skin_type .custom_input input[type="password"],
    .skin_type .custom_input input[type="text"],
    .skin_type .custom_input input[type="number"],
    .skin_type .custom_select .select2-container .select2-selection {
        height: 2.75rem;
    }

    .skin_type .agree_wrap .box_agree {
        margin-bottom: .8rem;
    }

    .skin_type .container_join .input_margin {
        margin-top: .825rem;
    }

    .skin_type .container_join .js-emailAuth,
    .skin_type .container_join .js-authCheck {
        min-width: 5rem;
        height: 2.2rem;
    }

    .skin_type .input_auth.on {
        margin: .625rem 0 .625rem auto;
    }

    .skin_type .container_join .validMarkWrap {
        right: 15px;
    }

    .skin_type .container_join .input_with_btn .icn_valid_check {
        top: 50%;
    }

    .skin_type .container_join .btn_reEmail.btn_sml {
        height: 2rem;
    }

    .skin_type .input_with_btn .btn_absolute {
        top: .275rem;
        right: .275rem;
    }

    .skin_type .skin_movie_wrap {
        width: auto;
        height: auto;
        background: none;
    }

    .skin_type .skin_movie_wrap .skin_movie_btn {
        position: static;
        width: 88px;
        height: 88px;
        background-image: url('../../img/common/join_skin_default_movie_btn_m.svg');
    }

    .skin_type .container_wrap {
        max-width: 350px;
        box-sizing: border-box;
    }

    .skin_type .container_join .btn_wrap {
        max-width: 290px;
    }

    .skin_type .recaptcha_wrap,
    .skin_type .recaptcha_wrap+.btn_wrap {
        margin-top: .8rem;
    }

    /* skin complete */
    .skin_type .complete_text {
        padding-top: 14vh;
    }

    .skin_type .complete_text .text_sup {
        font-size: 1rem;
    }

    .skin_type .complete_text .text_title {
        font-size: 1.65rem;
    }
}

@media (max-width: 1024px) {
    .skin_type .skin_going_home {
        top: 1.166rem;
        left: 1.5rem;
        width: 11rem;
        opacity: .9;
    }

    .skin_type .skin_floating_wrap {
        min-height: 450px;
        background: url('../../img/common/join_skin_world_bg.jpg') no-repeat center;
        background-size: cover;
    }

    .skin_type .skin_movie_modal {
        height: 100vh;
    }

    .skin_type .container_wrap {
        height: 100vh;
    }

    .skin_type .container_join {
        padding-top: 0;
    }

    .skin_type .container_join h2 {
        margin-top: 1.5rem;
    }

    .skin_type .video_wrap {
        display: none;
    }

    .skin_type .video_wrap video {
        display: none;
    }

    .skin_type .custom_input.label label,
    .skin_type .select2-input .input_label {
        font-size: .9rem;
    }

    .skin_type.theme_black .custom_select .select2-container:after {
        border-color: #76839f;
    }

    .skin_type .skin_down_link_wrap {
        margin-top: 0.9rem;
    }

    .skin_type .skin_down_link_wrap .skin_down_link {
        font-size: 0.875rem;
    }

    .skin_type.theme_black .email_tooltip .balloon_box {
        max-width: 320px;
    }

    .mobile_auth_code_desc {
        margin-top: 1.25rem;
    }
}

@media (max-width: 767px) {
    .skin-pc {
        display: none !important;
    }

    .skin-m {
        display: block !important;
    }

    .skin_type .skin_floating_wrap {
        height: auto;
        min-height: auto;
    }

    .skin_type .skin_floating {
        position: relative;
        width: 100%;
        padding-bottom: 2rem;
        min-height: 43rem;
        height: 115vw;
        max-height: calc(100vh - 4.166rem);
    }

    .skin_type .skin_sub_title {
        margin-top: 1.16rem;
        font-size: 1.45rem;
    }

    .skin_type button.skin_title {
        display: block;
        margin-top: 2rem;
        padding: 1.25rem .5rem;
        width: 28.33rem;
        max-width: 100%;
        font-size: 1.583rem;
        color: #fff;
        cursor: pointer;
        background: #9f723c;
        -webkit-transition: background-color .2s;
        transition: background-color .2s;
    }

    .skin_type button.skin_title:focus {
        background-color: #af7a3b;
    }

    .skin_type p.skin_title {
        display: none;
    }

    .skin_type .skin_movie_modal .skin_modal_close {
        right: -4.5rem;
    }

    .skin_type .skin_movie_wrap .skin_movie_btn {
        width: 5.458rem;
        height: 5.458rem;
    }

    .skin_type .container_wrap {
        position: static;
    }

    .skin_type .skin_floating_wrap~.container_wrap {
        position: fixed;
        width: 100%;
        max-width: none;
        padding: 0;
        z-index: -1;
        opacity: 0;
    }

    .skin_type .skin_floating_wrap~.container_wrap.on {
        -webkit-animation: joinOpen .5s cubic-bezier(.08, .72, .49, 1) both;
        animation: joinOpen .5s cubic-bezier(.08, .72, .49, 1) both;
    }

    .skin_type .skin_floating_wrap~.container_wrap.close {
        animation: joinClose .3s both;
    }

    .skin_type .content>.agree_wrap,
    .skin_type .content>.box_join {
        max-width: none;
    }

    .skin_type .container_join {
        padding: 2rem 5% 5rem;
        padding-right: calc(5% - 4px);
    }

    .skin_type .container_join h2 {
        padding-top: 0;
    }

    .skin_type .container_join .content {
        max-width: 28.33rem;
    }

    .skin_type .container_join .btn_wrap {
        max-width: 28.33rem;
    }

    .skin_type .btn_join_close {
        position: absolute;
        top: .75rem;
        right: 1.35rem;
        display: block;
        width: 2.5rem;
        height: 2.5rem;
    }

    .skin_type .btn_join_close .close_border {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1.5rem;
        height: 1px;
        background: #fff;
    }

    .skin_type .btn_join_close .close_border:nth-of-type(1) {
        -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg);
        transform: translate3d(-50%, -50%, 0) rotate(45deg);
    }

    .skin_type .btn_join_close .close_border:nth-of-type(2) {
        -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
        transform: translate3d(-50%, -50%, 0) rotate(-45deg);
    }

    .skin_type.theme_black .btn_join_close .close_border {
        background: #76839f;
    }

    .skin_type.theme_white .btn_join_close .close_border {
        background: #2b305a;
    }

    /* skin type complete*/
    .skin_type .skin_floating_wrap~.auth_complete_skin.opener {
        opacity: 1;
        transform: translate3d(0, 0%, 0);
        z-index: 10;
    }
}


@media (max-width:480px) {

    .box_login .box_join a,
    .sns_login_title .text,
    .check_list dl dd,
    .table_key,
    .table_value,
    .transfer_wrap .msg_totalcomplete {
        font-size: 11px;
    }

    .check_list dl dt,
    .icon_box .h3_desc,
    .skin_type .custom_input.label label,
    .skin_type .select2-input .input_label,
    .table_title {
        font-size: 12px;
    }

    .box_login ul li .btn_mid,
    .steam_login_box .btn_steam_login {
        font-size: 13px;
    }

    .box_login ul li+li {
        margin-top: 1.2rem
    }

    .check_login_wrap .desc_wrap {
        font-size: 12px;
    }
}


@-webkit-keyframes joinOpen {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20%, 0);
        transform: translate3d(0, 20%, 0);
        z-index: 10;
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
        z-index: 10;
    }
}

@keyframes joinOpen {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20%, 0);
        transform: translate3d(0, 20%, 0);
        z-index: 10;
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
        z-index: 10;
    }
}

@-webkit-keyframes joinClose {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
        z-index: 10;
    }

    99% {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
        z-index: 10;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
        z-index: -1;
    }
}

@keyframes joinClose {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
        z-index: 10;
    }

    99% {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
        z-index: 10;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
        z-index: -1;
    }
}

@-webkit-keyframes modalOpen {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes modalOpen {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes loadingRotator {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes loadingRotator {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}