@charset "UTF-8";

/* 네트워크바 */
.global_network {
    width: 100%;
    height: 35px;
    background: #222229;
}

#top_network {
    position: absolute !important;
}

.r_mp {
    margin: 0;
    padding: 0
}

.r_li {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.full {
    width: 100%;
    height: 100%;
    box-sizing: border-box
}

.fullWidth {
    width: 100%
}

.center {
    text-align: center
}

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

.block {
    display: block
}

.i_block {
    display: inline-block;
    vertical-align: middle
}

.hidden {
    overflow: hidden
}

.clear {
    display: block;
    content: '';
    height: 0;
    font-size: 0;
    opacity: 0;
    clear: both
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-family: 'CustomFont', sans-serif;
    -webkit-text-szie-adjust: none;
    -moz-text-szie-adjust: none;
    -ms-text-size-adjust: none
}

a,
address,
body,
button,
button,
caption,
dd,
div,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
input,
legend,
li,
ol,
p,
pre,
select,
table,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    font-size: 1.4rem
}

body {
    line-height: 1.2;
    color: #2b2b2b;
    min-width: 100%;
    letter-spacing: 0;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

a,
button,
input,
label,
select,
textarea {
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    vertical-align: top
}

input[type=number] {
    -moz-appearance: textfield;
}

input {
    font-weight: normal;
    color: #626262;
    outline: 0
}

::-ms-clear,
::-ms-reveal {
    display: none
}

a {
    cursor: pointer
}

caption {
    visibility: hidden;
    font-size: 0;
    text-indent: -9999px
}

input {
    vertical-align: middle
}

button,
input,
select,
textarea {
    font-size: 1.4rem;
    font-family: 'CustomFont', sans-serif
}

button span {
    position: relative;
}

li,
ol,
ul {
    list-style: none
}

a {
    text-decoration: none;
    color: #2b2b2b;
    cursor: pointer
}

img {
    vertical-align: top;
    border: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    max-width: 100%
}

em {
    font-style: normal
}

button {
    border: 0;
    background: none;
    outline: 0;
    cursor: pointer
}

.blind {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    width: 1px;
    height: 1px
}

fieldset {
    width: 100%;
    border: 0
}

legend {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    background: none;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px
}

html,
body {
    height: 100%;
    background: #ffffff;
}

select::-ms-expand {
    display: none;
    opacity: 0
}

iframe {
    max-width: 100%
}

p {
    line-height: initial
}

label {
    user-select: none;
}

body.overflow_hidden {
    overflow: hidden;
}

.ally_hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: polygon(0 0, 0 0, 0 0);
}

/* data-tooltipbox */
[data-tooltipbox] {
    position: relative;
    font-style: normal;
}

[data-tooltipbox]:hover:after {
    content: attr(data-tooltipbox);
    position: absolute;
    bottom: calc(100% + 0.4rem);
    left: 50%;
    padding: 5px 10px;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1.6;
    z-index: 9999;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    white-space: nowrap;
}

/* common loading */
.common_loading_wrap {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
}

.common_loading_wrap .char {
    float: left;
    display: inline-block;
    height: 53px;
    margin: 0 5px;
    background-image: url('../../img/common/spr_common_loading.png');
    background-repeat: no-repeat;
    background-size: 124px 108px;
    -webkit-animation: loading_animate 2.7s infinite ease-in-out;
    animation: loading_animate 2.7s infinite ease-in-out;
}

.common_loading_wrap .char_1 {
    width: 18px;
    height: 53px;
    background-position: -46px 0px;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.common_loading_wrap .char_2 {
    width: 16px;
    height: 53px;
    background-position: -18px -55px;
    -webkit-animation-delay: 0.12s;
    animation-delay: 0.12s;
}

.common_loading_wrap .char_3 {
    width: 21px;
    height: 53px;
    background-position: 0px 0px;
    -webkit-animation-delay: 0.24s;
    animation-delay: 0.24s;
}

.common_loading_wrap .char_4 {
    width: 18px;
    height: 53px;
    background-position: -66px 0px;
    -webkit-animation-delay: 0.36s;
    animation-delay: 0.36s;
}

.common_loading_wrap .char_5 {
    width: 16px;
    height: 53px;
    background-position: -36px -55px;
    -webkit-animation-delay: 0.48s;
    animation-delay: 0.48s;
}

.common_loading_wrap .char_6 {
    width: 21px;
    height: 53px;
    background-position: -23px 0px;
    margin-left: 15px;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.common_loading_wrap .char_7 {
    width: 18px;
    height: 53px;
    background-position: -86px 0px;
    -webkit-animation-delay: 0.84s;
    animation-delay: 0.84s;
}

.common_loading_wrap .char_8 {
    width: 18px;
    height: 53px;
    background-position: -106px 0px;
    -webkit-animation-delay: 0.96s;
    animation-delay: 0.96s;
}

.common_loading_wrap .char_9 {
    width: 16px;
    height: 53px;
    background-position: -54px -55px;
    -webkit-animation-delay: 1.08s;
    animation-delay: 1.08s;
}

.common_loading_wrap .char_10 {
    width: 16px;
    height: 53px;
    background-position: 0px -55px;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

/* icon */
.icn_password_view {
    width: 17px;
    height: 17px;
    background: url('../../img/common/icn_eye.svg') no-repeat center;
    background-size: 17px 17px;
    cursor: pointer;
}

.open .icn_password_view {
    background-image: url('../../img/common/icn_eye_blind.svg');
}

.theme_black .icn_password_view {
    background-image: url('../../img/common/icn_eye_dark.svg');
}

.theme_black .open .icn_password_view {
    background-image: url('../../img/common/icn_eye_blind_dark.svg');
}

.icn_globe {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('../../img/common/icn_globe.svg') no-repeat center;
    background-size: contain;
}

.custom_input .pi {
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
}

.custom_input .pi.pi_password_check {
    right: 16px;
}

.custom_input .pi.icn_password_view {
    padding: 3px;
}

/* svg icon */
.icn_svg {
    flex: 0 0 auto;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.icn_svg.globe {
    width: 24px;
    height: 24px;
    background-image: url('../../img/common/icon/icn_globe.svg');
}

.icn_svg.circle_bang {
    width: 14px;
    height: 14px;
    background: url('../../img/common/icon/icn_circle_bang.svg');
}

.icn_svg.circle_error {
    width: 14px;
    height: 14px;
    background-image: url('../../img/common/icon/icn_circle_error.svg');
}

.icn_svg.circle_check {
    width: 14px;
    height: 14px;
    background-image: url('../../img/common/icon/icn_circle_check.svg')
}

.icn_svg.circle_question {
    width: 14px;
    height: 14px;
    background-image: url('../../img/common/icon/icn_circle_question.svg');
}

.icn_svg.arrow_up {
    width: 12px;
    height: 7px;
    background-image: url('../../img/common/icon/icn_arrow_up.svg');
}

.icn_svg.arrow_down {
    width: 12px;
    height: 7px;
    background-image: url('../../img/common/icon/icn_arrow_down.svg');
}

.icn_svg.cert_mobile {
    width: 43px;
    height: 66px;
    background-image: url('../../img/common/icon/cert_mobile.svg');
}

.icn_svg.cert_creditcard {
    width: 48px;
    height: 58px;
    background-image: url('../../img/common/icon/cert_creditcard.svg');
}

.icn_svg.moon {
    width: 26px;
    height: 26px;
    background-image: url('../../img/common/icon/icn_moon.svg');
}

.icn_svg.security_check {
    width: 27px;
    height: 27px;
    background-image: url('../../img/common/icon/icn_security_check.svg');
}

.icn_svg.security_check.gray {
    background-image: url('../../img/common/icon/icn_security_check_gray.svg');
}

.icn_svg.lock {
    width: 28px;
    height: 28px;
    background-image: url('../../img/common/icon/icn_lock.svg');
}

/* svg sns */
.icn_svg.sns_2,
.icn_svg.facebook {
    width: 12px;
    height: 24px;
    background-image: url('../../img/common/icon/icn_sns_facebook.svg');
}

.icn_svg.sns_3,
.icn_svg.steam {
    width: 24px;
    height: 24px;
    background-image: url('../../img/common/icon/icn_sns_steam.svg');
}

.icn_svg.sns_4,
.icn_svg.vk {
    width: 25px;
    height: 15px;
    background-image: url('../../img/common/icon/icn_sns_vk.svg');
}

.icn_svg.sns_6,
.icn_svg.google {
    width: 20px;
    height: 20px;
    background-image: url('../../img/common/icon/icn_sns_google.svg');
}

.icn_svg.sns_7,
.icn_svg.kakao {
    width: 26px;
    height: 24px;
    background-image: url('../../img/common/icon/icn_sns_kakao.svg');
}

.icn_svg.sns_8,
.icn_svg.naver {
    width: 18px;
    height: 18px;
    background-image: url('../../img/common/icon/icn_sns_naver.svg');
}

.icn_svg.sns_9,
.icn_svg.twitter {
    width: 20px;
    height: 20px;
    background-image: url('../../img/common/icon/icn_x_white.svg');
}

.icn_svg.sns_10,
.icn_svg.yahoo {
    width: 26px;
    height: 24px;
    background-image: url('../../img/common/icon/icn_sns_yahoo.svg');
}

.icn_svg.circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-size: 60% 60%;
    background-color: #b3b3b3;
}

.circle.mid {
    width: 24px;
    height: 24px;
    background-size: 57% 57%;
}

.circle.big {
    width: 34px;
    height: 34px;
    background-size: 64% 64%;
}

.circle.sns_8,
.circle.naver {
    background-size: 48% 48%;
}

.circle.naver.big {
    background-size: 46% 46%;
}

.icn_svg.circle.blue {
    background-color: #2b2f5a;
}

.icn_svg.icn_capslock {
    width: 14px;
    height: 14px;
    background-image: url('../../img/common/icon/icn_caps_lock.svg');
}

/* interaction use svg */
.svg_wrap {
    display: flex;
    justify-content: center;
}

.svg_icon {
    width: 100%;
}

/* custom msg */
.custom_msg {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
}

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

.custom_msg.error {
    color: #da2a21;
}

.custom_msg.check {
    color: #2b2f5a;
}

.custom_msg.question {
    color: #5f5f5f;
}

.custom_msg .icn_svg {
    margin: 0 4px;
}

/*사용여부 확인 필요함*/
.hide {
    display: none !important;
}

/* link blue 텍스트 */
.blue {
    color: #2e3b7d
}

/* recapcha */
.recapcha {
    margin: 0px auto 0;
}

/* bold 클래스 추가 */
.bold {
    font-weight: bold;
}

/* 인증메일 유효시간 */
.time_auth {
    display: block;
    margin: 25px 0;
    text-align: center;
    font-size: 15px;
    color: #606060;
    opacity: .6;
    line-height: 1.75;
}

.time_auth_text {
    display: block;
    margin: 1.5rem 0;
    text-align: center;
    font-size: 0.9rem;
    color: #5f5f5f;
    line-height: 1.75;
}

/* custom_input */
.custom_input_wrap {
    margin-top: 12px;
}

.custom_input {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom_input>*,
.custom_input:after,
.custom_input:before {
    cursor: text;
}

.custom_input>a {
    cursor: pointer;
}

.custom_inputBox {
    position: relative;
}

.custom_input input[type="email"]:focus,
.custom_input input[type="password"]:focus,
.custom_input input[type="text"]:focus,
.custom_input input[type="number"]:focus,
.custom_input input[type="tel"]:focus {
    box-shadow: 0px 3px 2px rgba(188, 188, 197, 0.5);
}

.custom_input input[type="email"],
.custom_input input[type="password"],
.custom_input input[type="text"],
.custom_input input[type="number"],
.custom_input input[type="tel"] {
    width: 100%;
    height: 48px;
    max-height: 56px;
    padding: 0 24px;
    font-size: 16px;
    color: #323232;
    box-sizing: border-box;
    border: 1px solid #b3b3b3;
    border-radius: 4px;
    -webkit-transition: border-color .2s, box-shadow .25s, background-color .2s, color .2s;
    transition: border-color .2s, box-shadow .25s, background-color .2s, color .2s;
}

.custom_input input[type="password"].password_view,
.custom_input input[type="text"].password_view {
    padding: 0 43px 0 25px;
}

.js-capslockWrap .custom_input input[type="password"].password_view,
.js-capslockWrap .custom_input input[type="text"].password_view {
    padding: 0 70px 0 25px;
}

.select2-input .input_label {
    font-size: 13px;
}

.custom_select .select2-container .select2-selection:focus {
    box-shadow: 0px 3px 2px rgba(188, 188, 197, 0.5);
}

/* custom_input 중간사이즈 53px */
.custom_input input[type="email"].mid,
.custom_input input[type="password"].mid,
.custom_input input[type="text"].mid,
.custom_input input[type="number"].mid,
.custom_input input[type="tel"].mid {
    height: 53px
}

/* custom_input 작은 사이즈 43px */
.custom_input input[type="text"].sml,
.custom_input input[type="number"].sml,
.custom_input input[type="tel"].sml {
    height: 43px;
    padding: 0 18px;
    color: #4f4f4f;
}

/* custom_input 라벨 */
.custom_input.label label {
    position: absolute;
    left: 24px;
    top: 50%;
    font-size: 16px;
    color: #5f5f5f;
    cursor: text;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    -webkit-transform-origin: left;
    transform-origin: left;
    z-index: 2;
}

.custom_input input.input-error.typing,
.custom_input input.input-validation-error.typing,
.custom_input input.active,
.custom_input input:focus {
    color: #1e1e1e;
    border: 1px solid #2b2f5a;
    background: transparent;
}

.custom_input input:disabled {
    background: rgba(0, 0, 0, .01);
}

.custom_input input.input-error,
.custom_input input.input-validation-error {
    color: #da2a21;
    border-color: #E74C3C;
    background: #fff6f6;
}

.custom_input input.typing+label,
.custom_input input.active+label,
.custom_input input:focus+label,
.select2-input .input_label {
    color: #2b305a;
    top: 0;
    -webkit-transform: translate3d(0, -50%, 0) scale(0.9);
    transform: translate3d(0, -50%, 0) scale(0.9);
}

/* passowrd checker */
.js-password .custom_input input[type="password"],
.js-password .custom_input input[type="text"] {
    padding-right: 115px;
}

.custom_input .js-securityStep {
    position: absolute;
    right: 50px;
    top: 48%;
    font-size: 12px;
    color: #000;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}

.password_wrap.capslock_on .custom_input .js-securityStep {
    right: 74px;
}

.custom_input .js-securityStep.safe {
    color: #53a263;
}

.custom_input .js-securityStep.medium {
    color: #f29114;
}

.custom_input .js-securityStep.weak {
    color: #e74c3c;
}

.custom_line {
    position: absolute;
    top: 0;
    height: 0;
}

.custom_line::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    background: #fff;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    -webkit-transition: .15s;
    transition: .15s;
    content: '';
    z-index: 1;
}

.custom_input input:focus~.custom_line::before,
.custom_input input.active~.custom_line::before {
    width: 100%;
    height: 1px;
    -webkit-transition: width .35s cubic-bezier(.03, .84, .28, 1.15), background-color .2s;
    transition: width .35s cubic-bezier(.03, .84, .28, 1.15), background-color .2s;
}

.custom_input.icon input[type="password"],
.custom_input.icon input[type="text"] {
    padding-right: 60px
}

.custom_input.sml.icon input[type="text"] {
    padding-right: 44px
}

.custom_input.icon:before {
    display: block;
    content: "";
    overflow: hidden;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%);
    background: url(../../img/common/spr_etc.png) no-repeat;
    background-size: 800px 800px
}

.custom_input.icon_email:before {
    width: 21px;
    height: 16px;
    background-position: -73px -383px
}

.custom_input.icon_pass:before {
    width: 18px;
    height: 22px;
    background-position: -117px -383px
}

.custom_input.icon_pass_check:before {
    right: 15px;
    width: 22px;
    height: 22px;
    background-position: -225px -383px
}

.custom_input.icon_user:before {
    width: 18px;
    height: 18px;
    background-position: -155px -383px
}

.custom_input.icon_verification:before {
    width: 19px;
    height: 21px;
    background-position: -190px -383px
}

.custom_input.error:before {
    right: 20px;
    width: 21px;
    height: 21px;
    background-position: -35px -447px
}

.custom_input.icn_cal:before {
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    background-position: -383px -383px
}

.custom_input.icon_phone:before {
    width: 18px;
    height: 24px;
    background-position: -585px -383px
}

.custom_input.icon_key:before {
    width: 14px;
    height: 24px;
    background-position: -612px -383px
}

/* custom input with button */
/* when error */
.custom_input input.input-error+label,
.custom_input input.input-validation-error+label {
    color: #E74C3C;
}

.custom_input input.input-error.typing+label,
.custom_input input.input-validation-error.typing+label {
    color: #2b305a;
}

/* custom disabled */
.custom_input input[type="email"]:disabled,
.custom_input input[type="password"]:disabled,
.custom_input input[type="text"]:disabled,
.custom_input input[type="number"]:disabled,
.custom_input input[type="tel"]:disabled,
.custom_select select:disabled {
    background: #f4f4f4;
    color: #b3b3b3;
    cursor: not-allowed
}

/* custom readonly */
.custom_input input[readonly],
.custom_input input[readonly]:focus,
.custom_input input[readonly].disabled {
    border-color: #dbdbdb;
    background: #f1f1f1;
    color: #b3b3b3;
    box-shadow: none;
}

.custom_input input[readonly]+label {
    color: #b3b3b3;
}

/* custom input icon이 있는 요소들 */
.custom_input.icon input[type="password"],
.custom_input.icon input[type="text"],
.custom_input.icon input[type="number"],
.custom_input.icon input[type="tel"] {
    padding-right: 60px
}

.custom_input.icon input[type="text"].sml,
.custom_input.icon input[type="number"].sml,
.custom_input.icon input[type="tel"].sml {
    padding-right: 45px
}

.num_input_wrap {
    display: flex;
    justify-content: center;
    margin: 15px auto;
}

.num_input {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 265px;
    height: 65px;
    border: 1px solid #b3b3b3;
    font-size: 22px;
    text-align: center;
    border-radius: 4px;
    box-sizing: border-box;
    -webkit-transition: background .1s, border .1s, padding .1s, width .1s;
    transition: background .1s, border .1s, padding .1s, width .1s;
}

.num_input~.num_input {
    margin-left: 1.5%;
}

.num_input.active {
    border: 2px solid #2b2f5a;
}

.num_input_wrap.small .num_input {
    width: 48px;
    height: 48px;
    font-size: 19px;
}

.num_input::-webkit-outer-spin-button,
.num_input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.error .num_input {
    border: 1px solid #cc0000;
    background: #fff2f2;
}

.num_input_wrap_grey {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem auto 2.4rem;
    background: #f1f1f1;
    padding: 35px 80px 45px;
}

.num_input_wrap_grey .mail_resend .mail_resend_btn {
    display: inline-block;
    font-size: 0.9rem;
    color: rgb(59, 107, 180);
    text-decoration-line: underline;
    text-underline-position: under;
}

.num_input_wrap_grey .mail_resend .mail_resend_btn.disabled {
    color: #a9a9a9;
    opacity: 1;
    text-decoration-line: none;
}

/* custom number input error */
.custom_error {
    display: flex;
    align-items: center;
    margin-top: 15px;
    font-size: 14px;
    color: #f90c00;
}

.custom_error .icn_svg.circle_error {
    margin-right: 4px;
}

/* custom toggle */
.custom_toggle {
    display: flex;
    align-items: center;
    font-size: .825rem;
    color: #797979;
}

.custom_toggle_label {
    margin-right: .4rem;
}

.custom_toggle_button {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    width: 38px;
    height: 20px;
    border-radius: 50px;
    background: #d5d5d5;
    box-sizing: border-box;
    -webkit-transition: background .2s ease;
    transition: background .2s ease;
    cursor: pointer;
}

.custom_toggle_input {
    border: none;
    width: 0px;
    height: 0px;
}

.custom_toggle_input~.custom_toggle_button:active,
.custom_toggle_input:focus~.custom_toggle_button {
    background: #b6b6b6;
}

.custom_toggle_input:checked~.custom_toggle_button {
    background: #2b2f5a;
}

.custom_toggle_input:checked~.custom_toggle_button:active,
.custom_toggle_input:checked:focus~.custom_toggle_button {
    background: #484e91;
}

.custom_toggle_button::before {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    -webkit-transition: transform .2s ease;
    transition: transform .2s ease;
    content: '';
}

.custom_toggle_input:checked~.custom_toggle_button::before {
    -webkit-transform: translate3d(18px, 0, 0);
    transform: translate3d(18px, 0, 0);
}

/* select2 */
.select2-input {
    position: relative;
}

.select2-input .select2-dropdown,
.select2-input .select2-selection {
    border-radius: 4px;
    padding: 11px 11px 0;
}

.select2-input .select2-selection__arrow {
    display: none;
}

.select2-input .select2-search--dropdown {
    padding: 0;
}

.select2-input .select2-search--dropdown .select2-search__field {
    height: 42px;
    line-height: 42px;
    border-radius: 4px;
    color: #1e1e1e;
    font-size: 16px;
    padding-left: 14px;
}

.select2-input .select2-container .select2-selection,
.select2-input .select2-results__option--selectable {
    padding-left: 15px;
    color: #b3b3b3;
    border-color: #2b305a;
    box-sizing: border-box;
}

.select2-input .select2-results__option--highlighted.select2-results__option--selectable {
    color: #fff;
    background: #2b305a;
}

.select2-input .select2-results__options::-webkit-scrollbar-button:decrement,
.select2-input .select2-results__options::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 0;
    background-color: transparent
}

.select2-input .select2-results__options::-webkit-scrollbar-button:end:increment {
    height: 4px;
}

.select2-input .custom_select:after {
    display: none;
}

.select2-input .input_label {
    position: absolute;
    left: 24px;
    top: 0;
    color: #2b305a;
    font-size: 16px;
    z-index: 1;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.select2-input .input_label::before {
    position: absolute;
    left: -8px;
    top: 7px;
    display: block;
    width: calc(100% + 16px);
    height: 5px;
    box-sizing: border-box;
    background: #fff;
    content: '';
    z-index: -1;
}

.select2-input .select2-container--open .select2-dropdown--below,
.select2-input .select2-container--open .select2-dropdown--above {
    border-radius: 4px;
}

/* select2 관련 옵션 */
.select_region_wrap {
    position: relative;
    padding: 5px;
}

.select2-dropdown {
    border-radius: 5px;
    overflow: hidden;
}

.select2-results__option {
    box-sizing: border-box;
}

.select2-results__option.select2-results__message {
    padding-left: 15px;
}

.select2-results .select2-results__options {
    max-height: 140px;
    overflow-y: auto;
    padding-top: 7px;
    padding-right: 4px;
    padding-bottom: 7px;
    font-size: 14px;
}

.select2-results .select2-results__options::-webkit-scrollbar {
    width: 6px;
}

.select2-results .select2-results__options::-webkit-scrollbar-track {
    background-color: transparent;
}

.select2-results .select2-results__options::-webkit-scrollbar-thumb {
    height: 45px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.45);
}

.select2-results .select2-results__options::-webkit-scrollbar-button:start:decrement,
.select2-results .select2-results__options::-webkit-scrollbar-button:end:increment {
    width: 0;
    height: 7px;
}

.select2-search--dropdown .select2-search__field {
    font-size: 1rem;
    border: 1px solid #979797;
    -webkit-transition: border-color .2s, color .2s;
    transition: border-color .2s, color .2s;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #2b2f5a;
}

.select2-container--open .select2-dropdown {
    border-color: #000;
}

/* jquery-validation */
ul.bullet_list .error,
.field-validation-error span {
    color: #E74C3C;
}

/* input_validate */
.join_list_text,
ul.bullet_list {
    margin-top: .6rem;
}

ul.bullet_list+ul.bullet_list {
    margin-top: 0;
}

.join_list_text,
ul.bullet_list li,
.field-validation-valid>span,
.field-validation-error>span {
    display: block;
    position: relative;
    padding-left: 25px;
    font-size: 13px;
    line-height: 1.538;
    color: #3d3d3d;
}

.input_validate .field-validation-error>span {
    display: flex;
    align-items: center;
    padding: 4px 0 0;
}

.box_agree.toggle .input_validate .field-validation-error>span {
    padding-top: 3px;
}

.join_list_text:before,
ul.bullet_list li:before,
.field-validation-valid>span:before,
.field-validation-error>span:before {
    content: '';
    display: block;
    position: absolute;
    left: .75rem;
    top: .6rem;
    width: 2px;
    height: 2px;
    background: #3d3d3d;
}

.field-validation-error>span:before {
    flex: 0 0 auto;
    position: static;
    width: 14px;
    height: 14px;
    margin: 0 4px;
    background: url('../../img/common/icon/icn_circle_error.svg') no-repeat center / contain;
}

.join_list_text:before,
ul.bullet_list li:before {
    background-color: #c0c0c0
}

.join_list_text.no_text:before {
    display: none;
}

.join_list_text {
    color: #E74C3C;
}

/* balloon box */
.balloon_wrap {
    position: relative;
}

.balloon_box {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    padding: .875rem 1.2rem;
    width: 360px;
    max-width: 75vw;
    font-size: 12px;
    visibility: hidden;
    opacity: 0;
    border: 1px solid #dedede;
    border-radius: 4px;
    background: #f9f9f9;
    -webkit-transform: translate3d(-50%, 10px, 0);
    transform: translate3d(-50%, 10px, 0);
    z-index: 10;
    box-sizing: border-box;
}

.balloon_box.on {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    visibility: visible;
    opacity: 1;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;
    -webkit-transition-duration: .175s;
    transition-duration: .175s;
    -webkit-transition-timing-function: cubic-bezier(0.35, 0.79, 0.9, 1.2);
    transition-timing-function: cubic-bezier(0.35, 0.79, 0.9, 1.2);
}

.balloon_box.ballon_right {
    left: auto;
    right: -20px;
    text-align: left;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
}

.balloon_box.ballon_right .balloon_desc {
    display: block;
}

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

.balloon_box.ballon_right::before {
    left: auto;
    right: 21px;
}

.balloon_box::before {
    position: absolute;
    top: -6px;
    left: 30px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #dedede;
    border-left: 1px solid #dedede;
    transform: rotate(45deg);
    background: #f9f9f9;
    content: '';
}

.balloon_square {
    position: absolute;
    top: -6px;
    left: 30px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #dedede;
    border-left: 1px solid #dedede;
    transform: rotate(45deg);
    background: #f9f9f9;
}

.balloon_title {
    color: #1e1e1e;
    margin-bottom: 4px;
}

.balloon_desc+.balloon_title {
    margin-top: 1rem;
}

.balloon_desc {
    position: relative;
    color: #5f5f5f;
    padding-left: 4px;
    line-height: 1.3;
}

.balloon_desc.dot_hidden {
    padding-left: 0;
}

.balloon_desc::before {
    content: '\00B7';
    position: absolute;
    top: 0;
    left: -4px;
}

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

.balloon_desc+.balloon_desc {
    margin-top: .45rem;
}

/* tooltip */
.tooltip_wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #2b335e;
    outline: none;
}

.tooltip_wrap::before {
    flex: 0 0 auto;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 4px;
    background: url(../../img/common/icon/icn_circle_question_blue.svg) no-repeat center / contain;
    content: '';
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}

.tooltip_wrap .tooltip_title {
    font-size: 13px;
}

/*todo >  bullet_list 클래스명 input_info 클래스명으로 교체해주기*/
ul.bullet_list.red li {
    color: #E74C3C
}

ul.bullet_list.red li:before {
    background: #E74C3C
}

ul.bullet_list.fs14 li {
    font-size: 14px;
    line-height: 1.785
}

ul.bullet_list.fs14 li:before {
    top: 10px
}

ul.bullet_list.fs15 li {
    font-size: 15px;
    line-height: 1.785
}

ul.bullet_list.fs15 li:before {
    top: 12px
}

ul.bullet_list.icon {
    position: relative;
    padding-left: 112px
}

/*input_label*/
.input_label {
    display: block;
    margin-bottom: 10px;
    font-size: 17px;
    color: #4f4f4f
}

/* custom_input 에러 */
.custom_input.error label {
    color: #E74C3C
}

.custom_input.error input {
    border: 1px solid #E74C3C
}

.custom_input.error input+label,
.custom_input.error input:focus+label {
    color: #E74C3C
}

.custom_input+.input_validate,
.custom_input.error+.input_validate {
    display: none
}

.custom_input.error:not(.customerror)+.input_validate {
    display: block
}

.custom_input.error .input_validate,
.custom_input.error .input_validate .input_error,
.custom_input.error .input_validate.error span,
.field-validation-error span {
    color: #E74C3C;
}

/* disabled와 readonly 스타일 */
input:disabled:focus {
    box-shadow: 0 0 0 1px #b3b3b3
}

input[readonly]:focus {
    box-shadow: 0 0 0 1px #b3b3b3
}

/* custom_input 통과 */
.custom_input.correct input {
    background-color: #e8f0fe
}

/* checkbox */
.custom_check {
    position: relative;
    display: inline-block;
    flex: 0 1 auto;
}

.custom_check input[type="checkbox"],
.custom_radio input[type="radio"] {
    position: absolute;
    left: -1px;
    top: -1px;
    width: 1px;
    height: 1px;
    opacity: 0;
    flex-shrink: 1;
}

/* checkbox, radio - 라벨과의 레이아웃 */
.custom_check input[type="checkbox"]~label,
.custom_radio input[type="radio"]~label {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #2a2a2a;
    line-height: 1.3;
    cursor: pointer;
    -webkit-transition: color .2s;
    transition: color .2s;
}

.custom_check input[type="checkbox"]~label:before,
.custom_radio input[type="radio"]~label:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    background: #d5d5d5;
}

.error .custom_check input[type="checkbox"]~label:before,
.error .custom_radio input[type="radio"]~label:after {
    background: #fff6f6;
    box-shadow: 0 0 0 1.5px #e74c3c;
}

.custom_check input[type="checkbox"]~label span,
.custom_radio input[type="radio"]~label span {
    margin-left: 10px;
}

.custom_check input[type="checkbox"]:focus~label:before,
.custom_radio input[type="radio"]:focus~label {
    box-shadow: 0 0 0 1.5px #6080bd;
    background-color: #fff;
}

/* checkbox 디자인 */
/* 이미지 파일 정리 예정 */
.custom_check .pi {
    display: block;
    content: '';
    overflow: hidden;
    position: absolute;
    left: 5px;
    top: calc(50% - 1px);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
}

.custom_check input[type="checkbox"]:checked~.pi {
    opacity: 1;
}

.custom_check input[type="checkbox"]~label::before {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1px solid transparent;
    border-radius: 3px;
    background-color: #d5d5d5;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    box-sizing: border-box;
    content: '';
}

.custom_check input[type="checkbox"]:checked~label::before {
    background-color: #2b2f5a;
}

/* checkbox인데 라디오 형태 디자인 */
.custom_check.round input[type='checkbox']~label:before {
    width: 14px;
    height: 14px;
    background: #fff;
    border: 1px solid #b6b6b6;
    border-radius: 50%
}

.custom_check.round input[type="checkbox"]~label:after {
    content: '';
    position: absolute;
    left: 3px;
    top: 6px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%
}

.custom_check.round input[type='checkbox']:checked~label:before {
    border-color: #262626
}

.custom_check.round input[type='checkbox']:checked~label:after {
    background: #262626
}

/* radio 디자인 */
.custom_radio {
    position: relative;
    display: inline-block
}

.custom_radio input[type="radio"] {
    position: absolute;
    left: -1px;
    top: -1px;
    width: 1px;
    height: 1px;
    opacity: 0
}

.custom_radio input[type="radio"]+label {
    position: relative;
    padding-left: 24px;
    vertical-align: middle;
    font-size: 16px;
    color: #000;
    line-height: 1.4;
    cursor: pointer
}

.custom_radio input[type="radio"]+label:before,
.custom_radio input[type="radio"]+label:after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    overflow: hidden;
    border-radius: 50%;
}

.custom_radio input[type="radio"]+label:before {
    width: 14px;
    height: 14px;
    background: #fff;
    border: 1px solid #b6b6b6;
    -webkit-transition: 0.25s;
    transition: 0.25s;
    box-sizing: border-box;
}

.custom_radio input[type="radio"]+label:after {
    width: 8px;
    height: 8px;
    top: 50%;
    margin-left: 3px;
    background: #fff;
    z-index: 10;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.custom_radio input[type='radio']:checked~label:before {
    border-color: #262626
}

.custom_radio input[type='radio']:checked~label:after {
    background: #262626
}

/* select */
.custom_select {
    position: relative;
    display: inline-block;
    width: 100%;
    box-sizing: border-box
}

.custom_select:after {
    display: block;
    content: '';
    overflow: hidden;
    width: 8px;
    height: 8px;
    border-left: 2px solid #4f4f4f;
    border-top: 2px solid #4f4f4f;
    background-color: transparent;
    -webkit-transform: translate(0, -50%) rotate(225deg);
    transform: translate(0, -50%) rotate(225deg);
    -webkit-transition: border-color .2s;
    transition: border-color .2s;
    position: absolute;
    right: 20px;
    top: 45%
}

.custom_select .select2-container:after {
    display: block;
    content: '';
    overflow: hidden;
    width: 8px;
    height: 8px;
    border-left: 2px solid #4f4f4f;
    border-top: 2px solid #4f4f4f;
    background-color: transparent;
    -webkit-transform: translate(0, -50%) rotate(225deg);
    transform: translate(0, -50%) rotate(225deg);
    position: absolute;
    right: 26px;
    top: 45%;
    -webkit-transition: transform .3s, border-color .3s;
    transition: transform .2s, border-color .2s;
    pointer-events: none;
}

.custom_select .select2-container.select2-container--open:not([disabled])::after {
    -webkit-transform: translate(0, -10%) rotate(225deg) scale(-1);
    transform: translate(0, -10%) rotate(225deg) scale(-1);
    border-color: #000;
}

.custom_select .select2-container.select2-container--focus:not([disabled])::after {
    border-color: #000;
}

.custom_select select {
    width: 100%;
    height: 46px;
    padding: 0 45px 0 25px;
    border: 1px solid #b3b3b3;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 18px;
    color: #4f4f4f;
    cursor: pointer;
    outline: 0
}

.custom_select select.mid {
    height: 48px;
    box-sizing: border-box;
    font-size: 15px;
    color: #888;
}

/* clear 버튼 미노출 */
.custom_select .select2-container {
    width: 100% !important;
}

.custom_select .select2-container .select2-selection--single {
    height: 48px;
    border: 1px solid #d3d3d3;
    outline: none;
    -webkit-transition: border-color .2s, background-color .2s;
    transition: border-color .2s, background-color .2s;
}

.custom_select .select2-container .select2-selection {
    padding: 0 45px 0 25px;
    border: 1px solid #b3b3b3;
    border-radius: 4px;
    box-sizing: border-box;
    -webkit-transition: border-color .2s;
    transition: border-color .2s;
}

.custom_select.error .select2-container .select2-selection,
.custom_select.error .select2-container .select2-selection:focus,
.custom_select.error .select2-container--open .select2-selection--single,
.custom_select.error .select2-container .select2-selection--single:not([disabled]):hover {
    color: #da2a21;
    border-color: #E74C3C;
    background: #fff6f6;
}

.custom_select.error+label,
.custom_select.error .select2-container .select2-selection--single .select2-selection__rendered {
    color: #da2a21;
}

.custom_select .select2-container .select2-selection:focus {
    border-color: #000;
}

/* 임시 */
#error_no_country {
    display: none;
}

.custom_select .select2-results__option {
    padding: 10px;
    font-size: .9rem;
}

.custom_select .select2-results__option--selectable:hover {
    background: rgba(255, 255, 255, .3);
}

.custom_select .select2-container .select2-selection--single .select2-selection__clear {
    display: none !important;
}

.custom_select .select2-container .select2-selection--single .select2-selection__rendered {
    display: flex !important;
    align-items: center;
    height: 100%;
    padding-left: 0;
    color: #323232;
    font-size: 16px;
}

.custom_select .select2-container--open .select2-selection--single,
.custom_select .select2-container .select2-selection--single:not([disabled]):hover {
    border-color: #2b2f5a;
}

.custom_select .select2-container .select2-selection--single:not([disabled]):hover option {
    border-color: #000
}

.custom_select .select2-container .select2-selection--single .select2-selection__clear {
    display: none !important;
}

.ie10 .select2-container .selection {
    display: none;
}

/* button */
.btn_wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.btn_wrap .btn_big+.btn_big {
    margin-left: 16px;
}

.btn {
    position: relative;
    display: inline-flex;
    padding: 0 1rem;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    text-align: center;
    line-height: 1;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-transition: background-color .2s, color .2s, border .2s, opacity .2s;
    transition: background-color .2s, color .2s, border .2s, opacity .2s;
}

.btn+.btn {
    margin-left: 5px
}

.btn span {
    position: relative
}

.btn_wrap form+form {
    margin-left: 5px;
}

/* 링크 버튼 */
.btn_link {
    min-width: 150px;
    height: 50px;
    font-size: 15px;
    color: #fff;
}

.btn_link span {
    padding-right: 22px
}

.btn_link span .pi {
    display: block;
    overflow: hidden;
    box-sizing: border-box;
}

/* 큰 버튼 */
.btn_big {
    width: auto;
    min-width: 300px;
    max-width: 100%;
    height: 75px;
    font-size: 17px;
}

.btn_big2 {
    width: 100%;
    height: 56px;
    font-size: 16px;
}

.btn_big3 {
    padding: 0 1.75rem;
    width: 100%;
    height: 100px;
    border: 1px solid #dfdfdf;
    font-size: 18px;
}

/* 중간사이즈 버튼 */
.btn_mid {
    width: 260px;
    height: 60px;
    font-size: 16px
}

.btn_mid2 {
    width: 260px;
    height: 70px;
    font-size: 17px
}

.btn_mid3 {
    min-width: 150px;
    padding: 0 20px;
    height: 50px;
    font-size: 15px
}

/* 작은 버튼*/
.btn_sml {
    max-width: 200px;
    height: 36px;
    padding: 0 15px;
    font-size: 14px
}

.btn_sml02 {
    height: 45px;
    padding: 0 35px;
    font-size: 14px
}

.btn_sml03 {
    height: 43px;
    padding: 0 24px;
    font-size: 15px;
    color: #fff;
}

.btn_sml04 {
    min-width: 100px;
    height: 40px;
    padding: 0 6px;
    font-size: 14px;
}

/* 색상 버튼 */
.btn_blue {
    color: #fff;
    border: 1px solid transparent;
    background-color: #2b2f5a;
}

.btn_blue:focus {
    background-color: #3a3f79;
}

.btn_blue::before {
    display: none;
}

.btn_blue_border {
    color: #2b305a;
    border: 1px solid #2b305a
}

.btn_white {
    color: #454b50;
    background-color: #fff;
    border: 1px solid #2b2f5a;
}

.btn_white:focus {
    background-color: #f6f8ff;
}

.btn_white::before {
    display: none;
}

.btn_gray {
    color: #606060;
    border: 1px solid #cbcbcb;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f2f2f2));
    background-image: -webkit-linear-gradient(top, #fff, #f2f2f2);
    background-image: linear-gradient(top, #fff, #f2f2f2);
    background-color: #fff
}

.btn_gray02 {
    background: #e7e7e7;
    color: #575757;
}

/* 기존 font-size 15px 사이즈는 색깔 css에서 제거 */
.btn_gray03 {
    background: #f8f8f8;
    border: 1px solid #ccc;
    font-size: 15px;
    color: #000;
}

.btn_black {
    background: #323232;
    color: #fff
}

.btn_yellow {
    background: #9f865d;
    color: #fff
}

.btn_red {
    background: #a92214;
    color: #fff;
}

.btn_grd_blue {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4c5891), color-stop(1, #404975));
    background: -webkit-linear-gradient(top, #4c5891 0, #404975 100%);
    background: linear-gradient(top, #4c5891 0, #404975 100%)
}

.btn_grd_gray {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e3e3e3), color-stop(1, #cacaca));
    background: -webkit-linear-gradient(top, #e3e3e3 0, #cacaca 100%);
    background: linear-gradient(top, #e3e3e3 0, #cacaca 100%)
}

.btn_grd_yellow {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9a866a), color-stop(1, #87765d));
    background: -webkit-linear-gradient(top, #9a866a 0, #87765d 100%);
    background: linear-gradient(top, #9a866a 0, #87765d 100%)
}

.btn_transparent {
    color: #5f5f5f;
    border: 1px solid #b2b1b1;
}

/* sns 버튼 */
.btn_with_sns {
    padding: 0 50px;
}

.btn_with_sns .icn_svg {
    position: absolute;
    top: 50%;
    left: 20px;
    width: 25px;
    height: 25px;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 화살표 아이콘 붙은 버튼 (btn_blue 이 기본)*/
.btn_with_arrow {
    position: relative;
    justify-content: space-between;
    width: 350px;
    height: 80px;
    padding: 0 20px;
    line-height: 1.25;
}

.btn_with_arrow:focus {
    color: #fff;
    border-color: #2b305a;
}

.btn_with_arrow span {
    width: 100%;
    text-align: left;
}

.btn_with_arrow:before {
    background-color: #2b305a;
}

.icn_btn_arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid #d5d6de;
    border-radius: 50%;
}

.icn_btn_arrow::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 3px 0 0;
    border-left: 2px solid #d5d6de;
    border-top: 2px solid #d5d6de;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.btn_gray03 .icn_btn_arrow,
.btn_gray03 .icn_btn_arrow::after {
    border-color: #ccc;
}

.btn_gray03.disabled .icn_btn_arrow.disabled,
.btn_gray03.disabled .icn_btn_arrow.disabled::after {
    border-color: #9a9a9a;
    opacity: 1;
}

/* 버튼과 인풋이 함께 button : btn_sml */
.input_with_btn {
    position: relative;
}

.input_with_btn .custom_input input[type="email"],
.input_with_btn .custom_input input[type="password"],
.input_with_btn .custom_input input[type="text"],
.input_with_btn .custom_input input[type="number"],
.input_with_btn .custom_input input[type="tel"] {
    padding-right: 130px;
}

.input_with_btn .btn_absolute {
    position: absolute;
    right: 6px;
    top: 6px;
}

/* input auth */
.input_auth {
    display: none;
    position: relative;
    margin: 14px 0 0 auto;
    width: 100%;
}

.input_auth.complete {
    -webkit-animation: complete .65s ease both .1s;
    animation: complete .65s ease both .1s;
}

.input_auth .custom_input input[type="number"] {
    -webkit-appearance: textfield;
}

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

.input_auth .custom_input input[type="tel"] {
    -webkit-appearance: textfield;
}

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

/* 텍스트 버튼 */
.btn_text {
    text-decoration: underline
}

.btn_text:focus {
    text-shadow: 0 1px 1px rgba(43, 48, 90, 0.3);
}

.btn_text.text_blue {
    color: #286bc6
}

/* 화살표 버튼 */
.btn_arrow span {
    position: relative;
    padding-right: 28px
}

.btn_arrow span:after {
    display: block;
    content: '';
    position: absolute;
    top: 55%;
    right: 5px;
    transform: translate(0, -50%) rotate(-40deg) skewX(10deg);
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border-right: 1px solid #7f7f7f;
    border-bottom: 1px solid #7f7f7f
}

/* 전역 disabled */
.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.disabled.opacityNot {
    opacity: 1;
}

/* disabled 버튼 */
.btn.disabled {
    background-color: #e8e8e8;
    color: #363636;
    cursor: not-allowed;
    user-select: none;
}

.btn.disabled:before {
    display: none;
}

/* paging */
.paging .common_paging {
    display: flex;
    justify-content: center;
    align-items: center;
}

.paging .link_item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 37px;
    height: 37px;
    box-sizing: border-box;
    font-size: 14px;
    color: #3d3d3d;
    -webkit-transition: 0.25s;
    transition: 0.25s;
    white-space: nowrap;
}

.paging .link_item+.link_item {
    margin-left: .2rem;
}

.paging .link_item.active {
    background: #323232;
    color: #fff;
}

.paging span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    box-sizing: border-box;
    padding: 0 15px 10px;
    font-size: 14px;
    color: #3d3d3d;
    white-space: nowrap;
}

.paging .box {
    border: 1px solid #dedede;
}

.paging .link_item.btn_arrow .pi {
    display: block;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.paging .link_item.box:first-of-type {
    margin: 0 20px 0 -1px
}

.paging .link_item.box:last-of-type {
    margin: 0 -1px 0 20px
}

/* paging layout */
.paging_area {
    position: relative
}

.paging_area .btn_wrap {
    position: relative;
    display: flex;
    justify-content: flex-start;
    margin-top: 20px
}

.paging_area .btn_wrap.left_area {
    left: 0;
    right: auto
}

/* character */
.icon_character_area {
    display: inline-block;
    position: relative;
    width: 142px;
    height: 142px;
    box-sizing: border-box;
    overflow: hidden;
}

.icon_character_area.profile {
    width: 100px;
    height: 100px;
}

.icon_character_area .icon_character {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 50%;
    background: #ccc url(../../img/common/character/character_default.jpg) no-repeat center center;
    background-size: cover;
}

/* agree_wrap */
.agree_wrap {
    position: relative;
}

.agree_wrap .box_agree .sec_header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    -webkit-transition: background-color .2s;
    transition: background-color .2s;
}

.agree_wrap .box_agree .sec_header.join_policy_box {
    justify-content: space-between;
    margin-bottom: 6px;
}

.agree_wrap .box_agree .sec_header.join_policy_box .custom_check {
    width: 100%;
}

.agree_wrap .box_agree .sec_header.join_policy_box .custom_check .js-popDetails,
.agree_wrap .box_agree .sec_header.join_policy_box .custom_check label,
.agree_wrap .box_agree .sec_header.join_policy_box .custom_check label span {
    font-size: 13px;
    line-height: 18px;
}

.agree_wrap .box_agree .sec_header.join_policy_box .custom_check .js-popDetails2 {
    margin: 0 0.2em 0 0;
    color: #697690;
    vertical-align: baseline;
    -webkit-transition: color .2s;
    transition: color .2s;
}

.agree_wrap .box_agree .sec_header.join_policy_box .custom_check .js-popDetails2:focus {
    color: #4e7db5;
}

.agree_wrap .box_agree .sec_header.join_policy_box .custom_check label span {
    display: block;
    width: 100%;
    flex: 0 1 auto;
}

.agree_wrap .box_agree .box_policy_wrap {
    padding: 0 .25rem;
    height: 4.25rem;
    border: 1px solid #b3b3b3;
    border-radius: 4px;
    box-sizing: border-box;
    -webkit-transition: background-color .2s, border-color .2s;
    transition: background-color .2s, border-color .2s;
    overflow: hidden;
}

.agree_wrap .box_agree .box_policy_wrap.optional {
    height: auto;
}

.agree_wrap .box_agree .box_policy {
    padding: .45rem;
    max-height: 4.25rem;
    overflow-y: auto;
    -webkit-overflow-scolling: touch;
    box-sizing: border-box;
}

.agree_wrap .box_agree .box_policy_wrap.optional .box_policy {
    max-height: none;
}

.agree_wrap .box_agree .box_policy::-webkit-scrollbar {
    width: 4px;
}

.agree_wrap .box_agree .box_policy::-webkit-scrollbar-track {
    background-color: transparent;
}

.agree_wrap .box_agree .box_policy::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.2);
}

.agree_wrap .box_agree .box_policy::-webkit-scrollbar-button {
    width: 0;
    height: 4px;
}

.agree_wrap .box_agree .box_policy b,
.agree_wrap .box_agree .box_policy strong {
    font-weight: bold;
}

.agree_wrap .box_agree.error .box_policy_wrap {
    border-color: #E74C3C;
    background: #fff6f6;
}

.agree_wrap .box_agree {
    margin-bottom: 14px;
}

.agree_wrap .box_agree.toggle {
    margin-bottom: 10px;
}

.agree_wrap .box_agree .btn_agree_more_js {
    display: none;
    padding: .65rem;
    position: relative;
    right: auto;
    top: auto;
    margin-left: .3rem;
    margin-right: 0;
    -webkit-transform: inherit;
    transform: inherit;
    font-size: 0.8rem;
    -webkit-transition: transform .2s;
    transition: transform .2s;
}

.agree_wrap .box_agree .btn_agree_more_js::after {
    display: block;
    content: '';
    overflow: hidden;
    width: 7px;
    height: 7px;
    border-left: 2px solid #000;
    border-top: 2px solid #000;
    opacity: .55;
    background-color: transparent;
    -webkit-transform: translate(0, -75%) rotate(225deg);
    transform: translate(0, -75%) rotate(225deg);
    position: absolute;
    right: 6px;
    top: 50%;
    -webkit-transition: transform .2s, opacity .2s;
    transition: transform .2s, opacity .2s;
}

.agree_wrap .box_agree .btn_agree_more_js.active {
    border-color: #2b2f5a;
    color: #2b2f5a;
    -webkit-transform: rotateX(180deg) translateY(-2px);
    transform: rotateX(180deg) translateY(-2px);
}

.agree_wrap .box_agree h5 {
    font-size: 15px;
    color: #000;
}

.agree_wrap .box_agree p {
    font-size: 14px;
    color: #3d3d3d;
}

.agree_wrap .box_agree.box_agree_type2 .btn_agree_more_js,
.agree_wrap .box_agree.toggle .btn_agree_more_js {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.agree_wrap .box_agree.toggle .box_policy_wrap {
    height: auto;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    border-width: 0px;
    -webkit-transition: max-height .2s, opacity .2s, border .2s;
    transition: max-height .2s, opacity .2s, border .2s;
}

.agree_wrap .box_agree.toggle .box_policy_wrap.on {
    max-height: 4.25rem;
    opacity: 1;
    border-width: 1px;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: cubic-bezier(.11, .43, .21, 1);
    transition-timing-function: cubic-bezier(.11, .43, .21, 1);
}

.agree_wrap .box_agree.toggle .box_policy_wrap.on .box_policy {
    max-height: 4.25rem;
}

.agree_wrap .box_policy .content {
    width: auto;
}

.agree_wrap .box_policy h2 {
    padding: 0.6rem 0 0 0;
    font-size: 1.4rem;
}

.agree_wrap .box_agree h5,
.agree_wrap .box_agree p {
    font-size: 0.8125rem;
}

/* header */
.header_nav_wrap {
    position: relative;
    width: 100%;
    height: 54px;
    border-bottom: 1px solid #e5e5e5;
    background: #FFF;
    box-sizing: border-box;
    z-index: 99;
}

.login_page .header_nav_wrap {
    display: none;
}

.header_nav_wrap .btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 60px;
    padding: 0 10px;
    font-size: 14px;
    overflow: hidden;
}

.header_nav_wrap>.inner {
    position: relative;
    left: 0;
    top: 0;
    display: flex;
    width: 100%;
    height: 70px;
    font-size: 14px;
    background: #FFF;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 12;
}

.header_nav_wrap .top_wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 70px;
    background: #FFF;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
    z-index: 11;
}

.header_nav_wrap .top_wrap_inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1230px;
    height: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    z-index: 4;
}

.header_nav_wrap .nav_wrap {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 0 10px;
    z-index: 12;
    box-sizing: border-box;
}

.header_nav_wrap .logo_wrap,
.header_nav_wrap .btn_header_nav,
.header_nav_wrap .nav_option {
    position: relative;
    z-index: 10;
}

.logo_box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80%;
    background-size: auto 1.25rem;
    box-sizing: border-box;
    transition: none
}

.aside_wrap .logo_box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60%;
    background-size: auto 1.25rem;
    box-sizing: border-box;
    transition: none;
}

.header_nav_wrap .logo,
.aside_wrap .logo {
    width: 150px;
}

.header_nav_wrap .nav_option {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    padding-right: 0;
    box-sizing: border-box;
}

.header_nav_wrap .common_nav .title {
    padding: 0 50px;
}

.header_nav_wrap .header_profile_wrap {
    display: flex;
    align-items: center;
}

.header_nav_wrap .header_profile {
    display: flex;
    align-items: center;
    margin-right: 18px;
}

.header_nav_wrap.not_login .header_profile {
    display: none;
}

.header_nav_wrap .header_profile .icon_character {
    display: block;
    width: 28px;
    height: 28px;
    background: url(../../img/common/character/character_default.png) #ccc center center no-repeat;
    border-radius: 50%;
    background-size: cover;
}

.header_nav_wrap .header_profile .profile_nickname {
    font-size: 13px;
    color: #3c3c3c;
    margin-left: 10px;
}

.header_nav_wrap .header_profile_wrap .btn_logout {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    height: 32px;
    font-size: 13px;
    color: #fff;
    background: #35353b;
    border-radius: 4px;
}

.header_nav_wrap .btn_header_lang {
    width: 1.8rem;
    height: 1.8rem;
    background: url(../../img/common/m_icn_lang.svg) no-repeat center center;
    background-size: contain;
}

.header_nav_wrap .btn_header_nav {
    position: absolute;
    display: none;
    left: 1.666rem;
    top: 1.337rem;
    width: 2rem;
    height: 1.492rem;
}

.header_nav_wrap .btn_header_nav:after {
    display: none;
}

.header_nav_wrap .btn_header_nav .nav_line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.166rem;
    background: #000;
    transform-origin: center;
    transition: transform 0.3s;
}

.header_nav_wrap .btn_header_nav .nav_line:before {
    display: none;
}

.header_nav_wrap .btn_header_nav .nav_line.top {
    top: 0.166rem;
}

.header_nav_wrap .btn_header_nav .nav_line.center {
    top: 0.666rem;
}

.header_nav_wrap .btn_header_nav .nav_line.bottom {
    top: 1.166rem;
}

/* aside_wrap */
.aside_wrap {
    float: left;
    width: 280px;
    margin-top: 161px;
    z-index: 5;
}

.aside_wrap .inner {
    position: relative;
    z-index: 20;
    border-top: 2px solid #555;
}

.aside_wrap+.content {
    float: right;
    width: calc(100% - 280px);
}

.aside_wrap li .aside_node_parent {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 45px;
    padding-left: 20px;
    padding-right: 36px;
    box-sizing: border-box;
    border-top: 1px solid #dfdfdf;
    font-size: 15px;
    color: #3d3d3d;
    font-weight: 400;
}

.aside_wrap li:first-child .aside_node_parent {
    border-top: 0;
}

/* aside_menu */
.aside_menu .menu_display_2 {
    margin-top: 30px;
    border-top: 2px solid #555;
}

/* aside_menu */
.aside_menu .menu_display_3 {
    margin-top: 30px;
    border-top: 2px solid #555;
}

.aside_menu .menu_display_2~.menu_display_2 {
    margin-top: 0;
    border: none;
}

.aside_menu .menu_display_3~.menu_display_3 {
    margin-top: 0;
    border: none;
}

/* aside_top */
.aside_top {
    display: none;
}

/* aside_footer */
.aside_footer {
    display: none;
}

/* pi */
.aside_wrap li .aside_node_parent .pi {
    margin-right: 18px;
}

.aside_wrap li.aside_logout {
    display: block;
}

.aside_wrap .btn_logout {
    display: none;
    width: 100%;
    height: 52px;
    margin-top: 22px;
    border: 1px solid #dcdcdc;
    background: #f8f8f8;
}

.aside_wrap .btn_logout a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 15px;
    color: #6d6d6d;
    -webkit-transition: background .3s;
    transition: background .3s;
}

.aside_wrap .btn_logout a:hover {
    background: #eaeaea;
}

.aside_wrap li.active a {
    color: #8f714a
}

.aside_wrap li.active a:after {
    content: '';
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    width: 8px;
    height: 8px;
    background-color: transparent;
    border-left: 2px solid #8f714a;
    border-top: 2px solid #8f714a;
    -webkit-transform: translate(-50%, -50%) rotate(140deg) skew(10deg);
    transform: translate(-50%, -50%) rotate(140deg) skew(10deg)
}

.aside_wrap li .aside_node_parent.icon:before {
    display: block;
    content: "";
    overflow: hidden;
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translate(0, -50%);
}

.aside_wrap li .aside_node_parent.icon.icn_0:before {
    box-sizing: border-box;
}

.aside_wrap li .aside_node_parent.icon.icn_1:before {
    box-sizing: border-box;
    background-position: -34px 0
}

.aside_wrap li .aside_node_parent.icon.icn_2:before {
    width: 30px;
    height: 20px;
    box-sizing: border-box;
    background-position: -66px 0
}

.aside_wrap li .aside_node_parent.icon.icn_3:before {
    left: 26px;
    width: 20px;
    height: 30px;
    box-sizing: border-box;
    background-position: -105px 0
}

.aside_wrap li .aside_node_parent.icon.icn_4:before {
    width: 29px;
    height: 24px;
    box-sizing: border-box;
    background-position: -134px 0
}

.aside_wrap li .aside_node_parent.icon.icn_5:before {
    width: 28px;
    height: 26px;
    box-sizing: border-box;
    background-position: -169px 0
}

.aside_wrap li .aside_node_parent.icon.icn_6:before {
    left: 24px;
    width: 23px;
    height: 30px;
    box-sizing: border-box;
    background-position: -206px 0
}

.aside_wrap li .aside_node_parent.icon.icn_8:before {
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    background-position: -526px -448px
}

.aside_wrap li .aside_node_parent.icon.icn_9:before {
    width: 26px;
    height: 26px;
    box-sizing: border-box;
    background-position: -238px 0
}

.aside_wrap li.active a.icon.icn_0:before {
    background-position: -1px -35px
}

.aside_wrap li.active a.icon.icn_1:before {
    background-position: -34px -35px
}

.aside_wrap li.active a.icon.icn_2:before {
    background-position: -66px -35px
}

.aside_wrap li.active a.icon.icn_3:before {
    background-position: -105px -35px
}

.aside_wrap li.active a.icon.icn_4:before {
    background-position: -134px -35px
}

.aside_wrap li.active a.icon.icn_5:before {
    background-position: -169px -35px
}

.aside_wrap li.active a.icon.icn_6:before {
    background-position: -206px -35px
}

.aside_wrap li.active a.icon.icn_8:before {
    background-position: -526px -488px
}

.aside_wrap li.active a.icon.icn_9:before {
    background-position: -238px -35px
}

/*footer*/
footer.footer_wrap {
    position: relative;
    height: auto;
    background: #fff;
}

footer.footer_wrap #languageBox {
    text-align: center;
}

footer.footer_wrap #languageBox .custom_select {
    position: relative;
    width: auto;
}

footer.footer_wrap #languageBox .custom_select .icn_globe {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate3d(0, -44%, 0);
    transform: translate3d(0, -44%, 0);
    -webkit-transition: filter .2s;
    transition: filter .2s;
}

footer.footer_wrap #languageBox select {
    position: relative;
    padding-left: 2.25rem;
    height: 40px;
    font-size: 16px;
    color: #7f7e7e;
    border: none;
    border-radius: 0;
    background: transparent;
    -webkit-transition: color 0.2s, border-bottom 0.2s;
    transition: color 0.2s, border-bottom 0.2s;
    z-index: 1;
}

footer.footer_wrap #languageBox select:focus {
    color: #000;
}

footer.footer_wrap #languageBox select:focus~.icn_globe {
    -webkit-filter: brightness(0);
    filter: brightness(0);
}

footer.footer_wrap .inner_footer {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 230px;
    padding-bottom: 15px;
    border-top: 1px solid #f1f1f1;
    box-sizing: border-box;
}

footer.footer_wrap .inner_footer .term_list {
    width: 100%;
    margin-top: 25px;
    text-align: center;
    box-sizing: border-box;
    padding: 0 5%;
    line-height: 2
}

footer.footer_wrap .inner_footer .term_list .term_item {
    display: inline-block;
    position: relative;
    padding: 0 24px;
    font-size: 14px;
    color: #5f5f5f;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
    -webkit-transition: color .2s;
    transition: color .2s;
}

footer.footer_wrap .inner_footer .term_list .term_item:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 11px;
    margin-top: -5px;
    background-color: #727373
}

footer.footer_wrap .inner_footer .term_list .term_item:first-child:before {
    display: none
}

footer.footer_wrap .inner_footer address {
    text-align: center;
}

footer.footer_wrap .inner_footer address span {
    display: inline-block;
    position: relative;
    padding: 0 20px;
    vertical-align: middle;
    font-size: 13px;
    color: #7f7e7e;
    line-height: 1.769
}

footer.footer_wrap .inner_footer address span a {
    font-size: 13px;
    color: #7f7e7e;
    line-height: 1.769;
    text-decoration: underline
}

footer.footer_wrap .inner_footer address span:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 10px;
    margin-top: -5px;
    background-color: #727373
}

footer.footer_wrap .inner_footer address span:first-child:before {
    display: none
}

footer.footer_wrap .inner_footer .copyright {
    text-align: center;
}

footer.footer_wrap .inner_footer .copyright .logo_footer {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    font-size: 0;
    opacity: .8;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
    margin-bottom: 15px;
     height: 65px;
}

footer.footer_wrap .inner_footer .copyright .btn_pearlabyss .pi {
    display: block;
    width: 100%;
    height: 100%;
}

footer.footer_wrap .inner_footer .copyright p {
    display: inline-block;
    margin-left: 25px;
    vertical-align: middle;
    font-size: 12px;
    color: #888;
}

footer.footer_wrap .inner_footer .adrCopyright {
    text-align: left;
    padding: 10px 0 20px;
    justify-content: center;
    display: flex;
    align-items: center
}

footer.footer_wrap .inner_footer .adrCopyright .txtRating {
    margin-left: 12px;
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    color: #7f7e7e
}

footer.footer_wrap .inner_footer .footer_item {
    display: flex;
    justify-content: center;
    align-items: center
}

/* container */
.container {
    min-height: calc(100vh - 230px - 35px);
    padding: 80px 0;
    box-sizing: border-box
}

/*bridge_page*/
#bridge_wrap {
    position: relative;
    margin: 0 auto;
    text-align: center;
    background: #fff;
}

#bridge_wrap .title {
    font-size: 45px;
    color: #2e2e2e;
}

#bridge_wrap .h2_desc {
    display: block;
    margin: 20px 0 0;
    font-size: 16px;
    color: #3d3d3d;
}

#bridge_wrap .platform_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 55px 0 130px;
}

#bridge_wrap .platform_list {
    position: relative;
    flex: 0 0 400px;
    max-width: 100%;
    width: 400px;
    height: 580px;
    overflow: hidden;
}

#bridge_wrap .platform_list+.platform_list {
    margin: 0 0 0 15px;
}

#bridge_wrap .platform_list>a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 30px;
    border-radius: 6px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../../img/common/bridge_bdo_bg_v2.jpg);
    -webkit-animation: fadeinup ease-in-out 0.5s both;
    animation: fadeinup ease-in-out 0.5s both;
    -webkit-transition: transform .3s, background-size .8s;
    transition: transform .3s, background-size .8s;
}

#bridge_wrap .platform_sha>a {
    background-image: url(../../img/common/bridge_sha_bg_v2.jpg);
    animation-delay: 0.1s;
}

#bridge_wrap .platform_list a.disabled {
    -webkit-filter: grayscale(0.9);
    filter: grayscale(0.9);
}

#bridge_wrap .platform_list strong {
    display: block;
    font-size: 38px;
    color: #fff;
}

#bridge_wrap .platform_list em {
    display: block;
    margin-top: 16px;
    font-size: 15px;
    font-style: normal;
    color: #c3c3c3;
    line-height: 1.4;
}

#bridge_wrap .service_country {
    display: flex;
    align-items: center;
    height: 32px;
    margin: 10px auto 0;
    padding: 0 20px;
    background: #1b1e26;
    border-radius: 16px;
    font-size: 15px;
    color: #fff;
}

#bridge_wrap .js-gameOpen {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 30px;
    font-size: 16px;
    color: #c3c3c3;
    line-height: 1;
    -webkit-animation: fadeinup ease-in-out 0.5s both;
    animation: fadeinup ease-in-out 0.5s both;
}

#bridge_wrap .js-gameOpen i {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 6px;
    height: 6px;
    margin-left: 14px;
    box-sizing: border-box;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    -webkit-transform-origin: 0 bottom;
    transform-origin: 0 bottom;
}

#bridge_wrap .js-gameOpen i::before {
    content: '';
    display: block;
    position: absolute;
    top: -9px;
    left: -9px;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    -webkit-transform: translate3d(-2px, -2px, 0);
    transform: translate3d(-2px, -2px, 0);
}

#bridge_wrap .game_list_wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    -webkit-transition: transform .3s;
    transition: transform .3s;
    -webkit-transition-timing-function: cubic-bezier(0, .49, .39, 1.04);
    transition-timing-function: cubic-bezier(0, .49, .39, 1.04);
}

#bridge_wrap.open .game_list_wrap {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

#bridge_wrap .game_list {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    left: 0;
    bottom: 80px;
    width: 100%;
}

#bridge_wrap .game_list li {
    flex: 0 0 50%;
}

#bridge_wrap .game_list a {
    display: block;
    padding: 10px;
    color: #878787;
    font-size: 15px;
}

#bridge_wrap .js-gameClose {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 30px;
    height: 30px;
    padding: 50px 30px 30px;
    box-sizing: border-box;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    opacity: 0.5;
}

#bridge_wrap .js-gameClose::before,
#bridge_wrap .js-gameClose::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 20px;
    height: 30px;
    width: 2px;
    background-color: #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

#bridge_wrap .js-gameClose::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/*에러 점검 페이지*/
.container.notfound {
    background: #f0f0f0;
    min-height: 100vh;
    padding: 0
}

.notfound_wrap {
    text-align: center;
    padding-top: 200px
}

.notfound_wrap .notfound_msg {
    position: relative;
    z-index: 2;
    overflow: hidden
}

.notfound_wrap .img_area {
    width: 719px;
    height: 273px;
    box-sizing: border-box;
    margin: 0 auto 3rem;
}

.notfound_wrap .img_area:before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: url(../../img/common/error_404.png) no-repeat top center;
    background-size: 100% auto;
}

.notfound_wrap .text_area .text01 {
    display: block;
    font-size: 19px;
    color: #000;
    font-weight: bold;
    line-height: 1.57
}

.notfound_wrap .text_area .text02 {
    display: block;
    font-size: 16px;
    color: #545454;
    font-weight: normal;
    line-height: 1.25;
    margin-top: 30px
}

.notfound_wrap .btn_wrap {
    margin-top: 70px
}

.notfound_wrap .btn_wrap .btn_big {
    width: 369px;
    height: 95px;
    font-size: 24px;
}

.footer_wrap.notfound {
    background: #f0f0f0;
    padding: 0
}

.footer_wrap.notfound .copyright {
    text-align: center;
    padding: 110px 0 35px
}

.footer_wrap.notfound .copyright a.btn_pearlabyss {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 143px;
    height: 26px;
    font-size: 0;
    margin: 0 6px
}

.footer_wrap.notfound .copyright p {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    color: #7f7e7e;
    font-weight: normal;
    margin: 0 6px
}

.container.closetime {
    background: #f0f0f0;
    min-height: 100vh;
    padding: 0
}

.closetime_wrap {
    text-align: center;
    padding-top: 180px
}

.closetime_message {
    overflow: hidden
}

.closetime_wrap .closetime_msg {
    position: relative;
    z-index: 2
}

.closetime_wrap .img_area {
    height: 309px;
    box-sizing: border-box;
    margin: 0 auto;
    position: relative
}

.closetime_wrap .img_area:before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: url(../../img/common/system_check.png) top center no-repeat
}

.closetime_wrap .text_area {
    position: relative;
    max-width: 1000px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 30px 0 100px;
}

.closetime_wrap .text_area .text01 {
    display: block;
    font-size: 19px;
    color: #000;
    font-weight: bold;
    line-height: 1.57;
    margin-bottom: 30px
}

.closetime_wrap .text_area .text02 {
    display: block;
    font-size: 17px;
    color: #000;
    font-weight: bold;
    line-height: 1.58
}

.closetime_wrap .text_area .text03 {
    display: block;
    font-size: 16px;
    color: #545454;
    font-weight: normal;
    line-height: 1.5;
    margin-top: 20px
}

.closetime_wrap .text_area .text04 {
    display: block;
    font-size: 17px;
    color: #000;
    font-weight: bold;
    line-height: 1.57;
    margin-top: 100px
}

.closetime_wrap .text_area .text_red {
    color: #911412
}

.closetime_wrap .btn_wrap {
    margin-top: 50px
}

.footer_wrap.closetime {
    background: #f0f0f0;
    height: 118px;
    padding: 0
}

.footer_wrap.closetime .copyright {
    text-align: center;
    padding: 60px 0 20px;
    box-sizing: border-box
}

.footer_wrap.closetime .copyright a.btn_pearlabyss {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 144px;
    height: 26px;
    font-size: 0;
    margin: 0 6px
}

.footer_wrap.closetime .copyright a.btn_pearlabyss .pi {
    display: block;
    width: 100%;
    height: 100%;
}

.footer_wrap.closetime .copyright p {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    color: #7f7e7e;
    font-weight: normal;
    margin: 0 6px
}

/* 제한 점검 페이지 */
.login_close.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18vh 0 50px;
    position: relative;
    min-height: calc(100vh - 35px);
    background: url('../../img/common/login_maintenance_bg.jpg') no-repeat 65% center;
    background-size: cover;
}

.login_close .close_inner {
    padding: 0 6.8%;
}

.login_close .close_sub_1 {
    font-size: 24px;
    color: #dcb15c;
}

.login_close .close_sub_2 {
    margin-top: 12px;
    font-size: 58px;
    color: #fff;
    line-height: 1.4;
}

.login_close .close_sub_3 {
    margin-top: 16px;
    font-size: 16px;
    color: rgba(255, 255, 255, .6);
    line-height: 1.4;
}

.login_close .time_box_wrap {
    position: relative;
    margin-top: 70px;
    padding-left: 12px;
}

.login_close .time_box_wrap::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: #dcb15c;
    content: '';
}

.login_close .time_box_text p {
    color: #fff;
    font-size: 16px;
}

.login_close .time_box_text+.time_box_text {
    margin-top: 5px;
}

.login_close .close_download_wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 75px;
}

.login_close .close_down_desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.3);
}

.login_close .close_down_btn {
    position: relative;
    display: block;
    min-width: 360px;
    height: 72px;
    margin-top: 13px;
    font-size: 20px;
    color: #000;
    text-align: center;
    border-radius: 3px;
    background: #dcb15c;
}

.login_close .close_down_btn::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    background: rgba(255, 255, 255, .1);
    -webkit-transition: transform .5s;
    transition: transform .5s;
    -webkit-transition-timing-function: cubic-bezier(0.29, 0.12, 0, 0.99);
    transition-timing-function: cubic-bezier(0.29, 0.12, 0, 0.99);
    -webkit-transform-origin: left;
    transform-origin: left;
    z-index: 0;
    content: '';
}

.login_close .close_down_btn .btn_inner_text {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.login_close .login_copyright {
    display: flex;
    align-items: center;
    padding: 0 6.8%;
    margin-top: 2rem;
}

.login_close .login_copyright_logo {
    display: flex;
    width: 120px;
    height: 20px;
    background: url('../../img/common/bi_white.svg') no-repeat center;
    background-size: contain;
    opacity: .3;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
}

.login_close .login_copyright_text {
    margin-left: 15px;
    font-size: 12px;
    color: rgba(255, 255, 255, .3);
}

.login_close.container.launcher_login_maintenance {
    top: 52px;
    height: calc(100vh - 52px);
    min-height: auto;
}

/* policy */
.container.policy {
    padding-top: 5px;
}

.container.policy .content {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 2%;
    box-sizing: border-box;
}

.container.policy .sort_area {
    margin: 24px 0 10px;
}

.container.policy .sort_area:after {
    display: block;
    content: '';
    height: 0;
    font-size: 0;
    opacity: 0;
    clear: both
}

.container.policy .sort_area .right_area {
    display: flex;
    float: right;
    vertical-align: top;
}

.container.policy .sort_area .right_area .policy_select_wrap+.policy_select_wrap {
    margin-left: 5px
}

.container.policy h2 {
    padding: 0 0 40px;
    border-bottom: 2px solid #555;
    font-size: 45px;
    color: #2e2e2e;
    font-weight: normal;
    text-align: center;
}

.container.policy .policy_wrap {
    padding: 5px 0;
}

.container.policy .policy_wrap b,
.container.policy .policy_wrap strong {
    font-weight: bold;
}

.container.policy .policy_print {
    float: right;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 48px;
    padding: 0 25px;
    font-size: 15px;
    color: #888;
    box-sizing: border-box;
    border: 1px solid #b3b3b3;
    border-radius: 4px;
}

/* google reCaptcha */
.recaptcha_wrap,
.recaptcha_wrap+.btn_wrap {
    margin-top: 20px;
    display: flex;
}

.googleRobot.center>div {
    margin: 0 auto;
}

.recaptcha_wrap .recapcha>div {
    margin: 0 auto;
}

/* policy_wrap */
.policy_wrap table {
    margin: 5px 0;
}

.policy_wrap table td {
    padding: 4px;
    border: 1px solid #000;
}

.policy_wrap p {
    line-height: 1.5;
}

/* sns more */
.btn_sns_more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1.5rem .9rem;
    font-size: 14px;
    color: #7f7f7f;
    -webkit-transition: color .25s;
    transition: color .25s;
}

.btn_sns_more:focus {
    color: #000;
}

.btn_sns_more::after {
    content: '';
    display: block;
    margin-top: 0.4rem;
    margin-left: 0.5rem;
    border: 0.25rem solid transparent;
    border-top-color: #7f7f7f;
    border-top-width: 0.4rem;
    -webkit-transform-origin: center 0.15rem;
    transform-origin: center 0.15rem;
    -webkit-transition: transform .3s;
    transition: transform .3s;
}

.btn_sns_more.active::after {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.sns_login_more {
    display: none;
}

.sns_login_more.on {
    display: block;
}

/* pearlapp */
.container.app_login {
    padding-top: 2rem;
}

/* inputmask */
.custom_input input.input_mask {
    text-transform: uppercase;
    color: transparent;
    -webkit-transition: color .2s, background-color .2s;
    transition: color .2s, background-color .2s;
}

.custom_input input.input_mask:focus {
    color: #aaa;
}

.custom_input input.input_mask.typing,
.custom_input input.input_mask.active {
    color: #323232
}

.custom_input input.input_mask.active[readonly] {
    color: #b3b3b3;
}

.custom_input input.input_mask.input-error {
    color: #da2a21;
}

/* 약관 팝업 */
#agree_popup_wrap {
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    overflow: auto;
    box-sizing: border-box;
    z-index: 1000;
}

#agree_popup_wrap .agree_popup_inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    min-height: 100%;
    overflow: auto;
    box-sizing: border-box;
}

#agree_popup_wrap .agree_popup_box {
    position: relative;
    display: block;
    width: 800px;
    max-width: 90%;
    margin: 40px 0;
    padding: 40px;
    background: #FFF;
    box-sizing: border-box;
}

#agree_popup_wrap .agree_popup_box .title_wrap {
    position: relative;
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    border-bottom: 1px solid #ececec;
}

#agree_popup_wrap .agree_popup_box .btn_close {
    position: absolute;
    right: 0;
    top: 2px;
    display: inline-block;
    width: 30px;
    height: 30px;
    z-index: 3;
    margin-left: -1px
}

#agree_popup_wrap .agree_popup_box .btn_close:before {
    display: none;
}

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

#agree_popup_wrap .agree_popup_box .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);
}

#agree_popup_wrap .agree_popup_box .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);
}

#agree_popup_wrap .agree_popup_box .popup_title {
    display: block;
    margin: 0;
    padding: 0 35px 0 0;
    font-size: 28px;
    text-align: left;
}

#agree_popup_wrap .agree_popup_box b,
#agree_popup_wrap .agree_popup_box strong {
    font-weight: bold;
}

.loadingLayer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 999;
    display: none;
}

.loadingLayer .loading_progress_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.loadingLayer .loading_progress_wrap .loading_circle {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center
}

.loadingLayer .loading_progress_wrap .loading_circle .loader {
    color: #fff;
    font-size: 14px;
    margin: 0 auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: 1.3s linear infinite load5;
    animation: 1.3s linear infinite load5;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0)
}

.loadingLayer .loading_progress_wrap img {
    width: 100%;
    animation: 4s linear infinite spin
}

.loadingLayer .loading_progress_wrap .loading_text {
    display: block;
    font-size: 20px;
    color: #fff;
    font-weight: normal;
    margin-top: 28px
}

.loading_mini_circle {
    width: 1em;
    height: 1em;
    padding: 0.16em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgba(63, 249, 220, 0.1) 33%, rgb(255, 255, 255) 100%);
    animation: spin_btn .8s linear 0s infinite;
}

.loading_mini_core {
    width: 100%;
    height: 100%;
    background-color: #2b305a;
    border-radius: 50%;
    -webkit-transition: background-color .2s;
    transition: background-color .2s;
}

.btn_white .loading_mini_circle {
    background: #f0f0f0;
    background: linear-gradient(0deg, #b5b5b5 33%, rgb(255 255 255) 100%);
}

.btn_white .loading_mini_core {
    background: #f6f6f6;
}

.skin_type.theme_black .loading_mini_core {
    background: #495c9c;
}

.btn.btn_loader {
    color: transparent;
    opacity: 1;
    -webkit-transition: background-color .125s, border .125s, opacity .125s;
    transition: background-color .125s, border .125s, opacity .125s;
}

.btn.btn_loader.disabled.btn_blue,
.btn.btn_loader.disabled.btn_blue:hover {
    color: transparent;
    background-color: #2b2f5a;
}

.btn.btn_loader.disabled.btn_white,
.btn.btn_loader.disabled.btn_white:hover {
    color: transparent;
    background-color: #f6f6f6;
}

.btn_loader .loading_mini_circle {
    position: absolute;
    top: calc(50% - 0.58em);
    left: calc(50% - 0.58em);
    -webkit-animation: fadein .4s both, spin_btn .8s linear 0s infinite;
    animation: fadein .4s both, spin_btn .8s linear 0s infinite;
}

/* cookiebot BI remove */
a#CybotCookiebotDialogPoweredbyCybot {
    display: none !important;
}

/* Cookiebot Override Style */
@media screen and (min-width: 1921px) {

    /* 제한 점검 페이지 */
    .login_close {
        background-image: url('../../img/common/w_login_maintenance_bg.jpg')
    }
}

@media screen and (max-width: 1279px) {
    #CybotCookiebotDialogHeader {
        display: none !important;
    }

    #CybotCookiebotDialog {
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15%;
        border-radius: 0 !important;
        transform: translate(-50%, 0) !important;
    }

    #CybotCookiebotDialog *,
    #CybotCookiebotDialogBodyUnderlay * {
        font-size: 0.86rem !important;
    }

    #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
        padding: 0.6rem !important;
    }

    #CybotCookiebotDialogPoweredByText {
        display: none !important;
    }

    #CybotCookiebotDialogBodyButtons {
        display: flex;
        justify-items: center;
        align-items: center;
    }
}

@media screen and (max-width: 600px) {
    #CybotCookiebotDialog {
        padding: 0;
    }
}

@media (max-width: 1280px) {
    .aside_wrap {
        width: 20%;
    }

    .aside_wrap+.content {
        width: 78%;
    }

    .aside_wrap li .aside_node_parent .pi,
    .pi_wrap .pi[class*="pi_mypage_"] {
        display: none;
    }

    .header_nav_wrap .top_wrap_inner {
        padding: 0 1rem;
    }
}

@media (min-width: 1025px) {

    /* common */
    .only-m {
        display: none !important;
    }

    .aside_wrap .btn_logout {
        display: block;
    }

    /* tooltipbox */
    [data-tooltipbox]:hover:after {
        padding: 0.3rem 0.5rem;
        font-size: 0.866rem;
    }

    /* login */
    .custom_input .pi {
        opacity: .7;
    }

    .custom_input .pi:hover {
        opacity: 1;
    }

    /* btn hover */
    .btn_blue:hover {
        background-color: #2f346a;
    }

    .btn_white:hover {
        background-color: #f6f8ff;
    }

    /* link blue */
    a.blue:hover {
        text-decoration: underline;
    }

    .btn:hover::before {
        opacity: 1
    }

    .btn.disabled:hover {
        background: #e8e8e8;
    }

    .btn.disabled:hover::before {
        opacity: 0;
    }

    .btn_with_arrow:hover {
        color: #fff;
        border-color: #2b305a;
        background-color: #2b305a;
    }

    .btn_with_arrow.disabled:hover {
        color: #3c3c3c;
        border-color: #afafaf
    }

    /* checkbox */
    .custom_check input[type="checkbox"]~label:hover::before {
        box-shadow: 0 0 0 1.5px #6080bd;
        background-color: #fff;
    }

    .custom_check input[type="checkbox"]:checked~label:hover::before {
        background-color: #2b2f5a;
    }

    .custom_check input[type="checkbox"]~label:hover,
    .custom_radio input[type="radio"]~label:hover {
        color: #000;
    }

    /* checkbox인데 라디오 형태 디자인 */
    .custom_check.round input[type="checkbox"]~label:hover:before {
        width: 14px;
        height: 14px;
        background: #fff;
        border: 1px solid #b6b6b6;
        border-radius: 50%
    }

    .custom_check.round input[type="checkbox"]~label:hover:after {
        width: 8px;
        height: 8px;
        background: #fff;
        border-radius: 50%
    }

    .custom_check.round input[type='checkbox']:checked~label:hover:before {
        border-color: #262626
    }

    .custom_check.round input[type='checkbox']:checked~label:hover:after {
        background: #262626
    }

    /* radio */
    .custom_radio input[type='radio']:checked~label:hover:after {
        background: #262626
    }

    /* select */
    .custom_select select:not([disabled]):hover {
        border-color: #000
    }

    .custom_select select:not([disabled]):hover option {
        border-color: #000
    }

    .custom_select select:not([disabled]):focus {
        border-color: #000
    }

    .custom_select select:not([disabled]):focus option {
        border-color: #000
    }

    .custom_select .select2-container:not([disabled]):after {
        border-color: #aaa;
    }

    .custom_select .select2-container:not([disabled]):hover:after {
        border-color: #000;
    }

    .custom_select select:disabled:hover,
    .custom_select:disabled:hover:after {
        cursor: not-allowed
    }

    /* toggle */
    .custom_toggle_input~.custom_toggle_button:hover {
        background: #b6b6b6;
    }

    .custom_toggle_input:checked~.custom_toggle_button:hover {
        background: #484e91;
    }

    /* paging */
    .paging button.link_item:hover {
        background: #323232;
        color: #fff
    }

    .paging .link_item.btn_arrow:hover {
        border: 1px solid #323232
    }

    .paging .link_item.first:hover .pi {
        background-position: -107px -2118px
    }

    .paging .link_item.prev:hover .pi {
        background-position: -129px -2118px
    }

    .paging .link_item.next:hover .pi {
        background-position: -146px -2118px
    }

    .paging .link_item.last:hover .pi {
        background-position: -163px -2118px
    }

    /*footer*/
    footer.footer_wrap .inner_footer .term_list .term_item:hover {
        color: #000;
        text-decoration: underline;
        text-underline-position: under;
    }

    footer.footer_wrap #languageBox .custom_select:after {
        border-color: #7f7e7e;
    }

    footer.footer_wrap #languageBox .custom_select:hover select {
        color: #000;
        border-bottom-color: #000;
    }

    footer.footer_wrap #languageBox .custom_select:hover:after {
        border-color: #000;
    }

    footer.footer_wrap #languageBox .custom_select:hover .icn_globe {
        -webkit-filter: brightness(0);
        filter: brightness(0);
    }

    footer.footer_wrap .inner_footer .copyright .btn_pearlabyss:hover {
        opacity: 1;
    }

    /*bridge*/
    #bridge_wrap .platform_list a:hover {
        background-size: 110%;
        -webkit-transition: background-size .8s;
        transition: background-size .8s;
    }

    #bridge_wrap .js-gameOpen:hover {
        color: #fff;
    }

    #bridge_wrap .game_list a:hover {
        color: #fff;
    }

    #bridge_wrap .js-gameClose:hover {
        opacity: 1;
    }

    .aside_wrap li .aside_node_parent:hover {
        color: #8f714a
    }

    .aside_wrap li .aside_node_parent:hover:after {
        position: absolute;
        right: 20px;
        top: 50%;
        display: block;
        content: '';
        width: 8px;
        height: 8px;
        background-color: transparent;
        border-left: 2px solid #8f714a;
        border-top: 2px solid #8f714a;
        transform: translate(-50%, -50%) rotate(140deg) skew(10deg)
    }

    .aside_wrap li.active a:after {
        display: block
    }

    .aside_wrap li .aside_node_parent.icon.icn_0:hover:before {
        background-position: -1px -35px
    }

    .aside_wrap li .aside_node_parent.icon.icn_1:hover:before {
        background-position: -34px -35px
    }

    .aside_wrap li .aside_node_parent.icon.icn_2:hover:before {
        background-position: -66px -35px
    }

    .aside_wrap li .aside_node_parent.icon.icn_3:hover:before {
        background-position: -105px -35px
    }

    .aside_wrap li .aside_node_parent.icon.icn_4:hover:before {
        background-position: -134px -35px
    }

    .aside_wrap li .aside_node_parent.icon.icn_5:hover:before {
        background-position: -169px -35px
    }

    .aside_wrap li .aside_node_parent.icon.icn_6:hover:before {
        background-position: -206px -35px
    }

    .aside_wrap li .aside_node_parent.icon.icn_8:hover:before {
        background-position: -526px -488px
    }

    .aside_wrap li .aside_node_parent.icon.icn_9:hover:before {
        background-position: -238px -35px
    }

    .login_close .close_down_btn:hover::before {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        background: rgba(227, 188, 102, 1);
    }

    .login_close .login_copyright_logo:hover {
        opacity: .6;
    }

    .container.policy .policy_print:hover {
        border-color: #000;
    }

    .btn_sns_more:hover {
        color: #000;
    }

    .btn_sns_more:hover::after {
        border-top-color: #000;
    }

    .agree_wrap .box_agree .btn_agree_more_js:hover {
        color: #000;
    }

    .agree_wrap .box_agree .btn_agree_more_js:hover::after {
        opacity: 1;
    }

    .agree_wrap .box_agree .sec_header.join_policy_box .custom_check .js-popDetails2:hover {
        color: #4388da;
    }

    #agree_popup_wrap .agree_popup_box .btn_close:hover {
        opacity: 0.6;
    }
}

@media (max-width: 1024px) {

    /* common */
    .only-pc {
        display: none !important;
    }

    .touch body {
        -webkit-user-select: none;
        user-select: none;
    }

    .time_auth {
        margin: 1.25rem 0;
        font-size: 0.916rem;
    }

    /* svg icon */
    .icn_svg.lock {
        width: 2rem;
        height: 2rem;
    }

    .icn_svg.moon {
        width: 2rem;
        height: 2rem;
    }

    .icn_svg.circle_bang,
    .icn_svg.circle_error,
    .icn_svg.circle_check,
    .icn_svg.circle_question {
        width: 1.1rem;
        height: 1.1rem;
        min-width: 13px;
        min-height: 13px;
    }

    .icn_svg.circle {
        width: 1.1rem;
        height: 1.1rem;
        min-width: 13px;
        min-height: 13px;
    }

    .circle.mid {
        width: 1.5rem;
        height: 1.5rem;
        min-width: 18px;
        min-height: 18px;
    }

    .circle.big {
        width: 2rem;
        height: 2rem;
        min-width: 24px;
        min-height: 24px;
    }

    .icn_svg.security_check {
        width: 1.785rem;
        height: 1.785rem;
    }

    /* 화살표 아이콘 붙은 버튼 (btn_blue 이 기본)*/
    .btn_with_arrow {
        width: 100%;
        min-width: initial;
        height: 3.32rem;
        padding: 0 0.833rem;
        font-size: 1.041rem;
    }

    .icn_btn_arrow {
        width: 1.166rem;
        height: 1.166rem;
    }

    .icn_btn_arrow::after {
        width: 0.33rem;
        height: 0.33rem;
        margin: 0 0.125rem 0 0;
        border-left: 0.0833rem solid #d5d6de;
        border-top: 0.0833rem solid #d5d6de;
    }

    /* 버튼과 인풋이 함께 button : btn_sml */
    .input_with_btn {
        position: relative;
    }

    .input_with_btn .custom_input input[type="email"],
    .input_with_btn .custom_input input[type="password"],
    .input_with_btn .custom_input input[type="text"],
    .input_with_btn .custom_input input[type="number"],
    .input_with_btn .custom_input input[type="tel"] {
        padding-right: 8rem;
    }

    .input_with_btn .btn_absolute {
        height: 36px;
        font-size: 14px;
    }

    /* input */
    .custom_input_wrap {
        margin-top: 1rem;
    }

    .custom_input input[type="email"],
    .custom_input input[type="password"],
    .custom_input input[type="text"],
    .custom_input input[type="number"],
    .custom_input input[type="tel"] {
        height: 48px;
        padding: 0 20px;
        font-size: 16px
    }

    .custom_input input[type="password"].password_view,
    .custom_input input[type="text"].password_view {
        padding: 0 3rem 0 1.5rem;
    }

    .js-capslockWrap .custom_input input[type="password"].password_view,
    .js-capslockWrap .custom_input input[type="text"].password_view {
        padding: 0 5.5rem 0 1.5rem;
    }

    .custom_input .icn_password_view+input {
        padding: 0 3rem 0 1.5rem;
    }

    .js-password .custom_input input[type="password"] {
        padding-right: 8.5rem;
    }

    .input_auth.on {
        margin-top: 1rem;
    }

    /* custom_input 작은 사이즈 43px */
    .custom_input input[type="email"].sml,
    .custom_input input[type="password"].sml,
    .custom_input input[type="text"].sml,
    .custom_input input[type="number"].sml {
        padding: 0 1.666rem;
    }

    .custom_input.icon input[type="text"].sml,
    .custom_input.icon input[type="number"].sml,
    .custom_input.icon input[type="tel"].sml {
        padding-right: 2.25rem
    }

    .custom_input.label label {
        left: 20px;
        font-size: 16px;
    }

    .custom_input.icon input[type="password"],
    .custom_input.icon input[type="text"] {
        padding-right: 3.25rem
    }

    .custom_input.sml.icon input[type="text"] {
        padding-right: 2.25rem
    }

    .custom_input.icn_cal input[type="text"] {
        padding-left: 0.888rem
    }

    .custom_input.icon:before {
        background-size: 33.333rem 33.333rem
    }

    .custom_input.icon_email:before {
        width: 1.375rem;
        height: 1.0416rem;
        background-position: -3.014rem -17.125rem
    }

    .custom_input.icon_pass:before {
        width: 1.166rem;
        height: 1.375rem;
        background-position: -4.875rem -17.125rem
    }

    .custom_input.icon_pass_check:before {
        width: 1.416rem;
        height: 1.416rem;
        background-position: -9.375rem -17.125rem
    }

    .custom_input.icon_user:before {
        width: 1.041rem;
        height: 1.208rem;
        background-position: -6.458rem -17.025rem
    }

    .custom_input.icon_verification:before {
        width: 1.308rem;
        height: 1.308rem;
        background-position: -7.916rem -17.025rem
    }

    .custom_input.error:before {
        width: 1.291rem;
        height: 1.291rem;
        background-position: -1.458rem -19.896rem
    }

    .custom_input.icn_cal:before {
        right: 0.666rem;
        width: 1.083rem;
        height: 1rem;
        background-position: -15.958rem -17.125rem
    }

    .custom_input.icon_phone:before {
        width: 1.0833rem;
        height: 1.5rem;
        background-position: -26.4166rem -15.9583rem
    }

    .custom_input.icon_key:before {
        width: 0.9166rem;
        height: 1.5833rem;
        background-position: -27.875rem -15.9583rem
    }

    /* num input */
    .num_input {
        width: calc(14% + 2px);
        height: 0;
        padding: calc(7% + 1px) 0px;
        font-size: 1.6rem;
        box-sizing: content-box;
    }

    .num_input.active {
        width: 14%;
        padding: 7% 0;
    }

    .num_input_wrap.small .num_input {
        width: calc(10.5% + 2px);
        height: 0;
        padding: calc(5.25% + 1px) 0;
        font-size: 1.2rem;
    }

    .num_input_wrap.small .num_input.active {
        width: 10.5%;
        padding: 5.25% 0;
    }

    /* checkbox */
    .custom_check input[type="checkbox"]~label {
        font-size: 0.916rem;
        line-height: 1.5;
    }

    .custom_check input[type="checkbox"]~label:before {
        width: 1.25rem;
        height: 1.25rem;
    }

    .custom_check.round input[type='checkbox']~label:after {
        top: 9px;
    }

    .custom_check .pi {
        left: 0.325rem;
    }

    .custom_check .pi.pi_check {
        width: 0.45rem;
        height: 0.25rem;
    }

    /* toggle */
    .custom_toggle_button {
        width: 2.7rem;
        height: 1.425rem;
    }

    .custom_toggle_button::before {
        width: calc(1.425rem - 4px);
        height: calc(1.425rem - 4px);
    }

    .custom_toggle_input:checked~.custom_toggle_button::before {
        -webkit-transform: translate3d(calc(1.425rem - 2px), 0, 0);
        transform: translate3d(calc(1.425rem - 2px), 0, 0);
    }

    /* radio */
    .custom_radio input[type="radio"]+label {
        padding-left: 1.3rem;
        font-size: 0.9rem;
    }

    .custom_radio input[type="radio"]+label:before {
        width: 0.8333rem;
        height: 0.8333rem
    }

    .custom_radio input[type="radio"]+label:after {
        width: 0.5rem;
        height: 0.5rem;
        margin-left: 0.17rem
    }

    /* select */
    .custom_select .select2-container .select2-selection {
        padding: 0 2rem 0 1rem;
    }

    .custom_select select.mid {
        height: 2.833rem;
        box-sizing: border-box;
        font-size: 0.833rem
    }

    .custom_select .select2-container:after {
        right: 1.25rem;
        width: .55rem;
        height: .55rem;
    }

    /* select2 */
    .select2-input {
        margin-top: 1.25rem;
    }

    .select2-input .select2-container .select2-selection {
        padding-left: 1.5rem;
    }

    .select2-input .select2-results__option--selectable {
        padding-left: .7rem;
    }

    .select2-input .select2-search--dropdown .select2-search__field {
        padding-left: .7rem;
        line-height: 2.6rem;
    }

    .select2-input .input_label {
        left: 20px;
        font-size: 16px;
    }

    .select2-input .input_label::before {
        left: -0.4rem;
        width: calc(100% + 0.85rem);
    }

    .select2-input .select2-dropdown,
    .select2-input .select2-selection {
        padding: .825rem .825rem 0;
    }

    .select2-results__option.select2-results__message {
        padding-left: calc(.7rem + 1px);
    }

    /* custom msg */
    .custom_msg {
        font-size: .875rem;
    }

    .custom_msg .icn_svg {
        -webkit-transform: translate3d(0, 0.05rem, 0);
        transform: translate3d(0, 0.05rem, 0);
    }

    /* balloon box */
    .balloon_box {
        font-size: .833rem;
    }

    .balloon_box.ballon_right {
        right: -1em;
        -webkit-transform: translate3d(50%, 10px, 0);
        transform: translate3d(50%, 10px, 0);
    }

    .balloon_box.ballon_right.on {
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
    }

    .balloon_box.ballon_right::before {
        display: none;
    }

    /* tooltip */
    .tooltip_wrap .tooltip_title {
        font-size: .833rem;
    }

    /*input_label*/
    .input_label {
        font-size: 1.083rem;
        color: #323232
    }

    /* input_validate */
    .join_list_text,
    ul.bullet_list li,
    .field-validation-valid>span,
    .field-validation-error>span {
        font-size: 0.875rem;
        line-height: 1.5;
        padding-left: 1.75rem;
    }

    /*bullet_list*/
    ul.bullet_list.fs14 li {
        padding-left: 0.541rem;
        font-size: 0.875rem;
    }

    ul.bullet_list.fs15 li:before {
        top: 0.5rem
    }

    ul.bullet_list.fs15 li {
        font-size: 0.833rem;
    }

    ul.bullet_list.fs15 li:before {
        top: 0.625rem
    }

    /* btn */
    /*todo*/
    .btn_wrap .btn_big+.btn_big {
        margin-left: 1.6%;
    }

    .btn_big {
        min-width: 49.2%;
        height: 4.1666rem;
        margin: 0 auto;
        padding: 0 1rem;
        line-height: inherit;
        font-size: 1.083rem
    }

    .btn_big2 {
        height: 3.5rem;
        font-size: 1.083rem;
    }

    .btn_big3 {
        height: 7rem;
        font-size: 1.2rem;
    }

    .btn_mid {
        width: 100%;
        height: 3.75rem;
        margin: 0 auto;
        line-height: inherit;
        font-size: 1.041rem
    }

    .btn_mid2 {
        width: 100%;
        height: 3.75rem;
        margin: 0 auto;
        line-height: inherit;
        font-size: 1.041rem
    }

    .btn_mid3 {
        width: auto;
        min-width: 12rem;
        height: 2.916rem;
        margin: 0 auto;
        line-height: inherit;
        font-size: 1.041rem
    }

    .btn_sml {
        height: 2.916rem;
        margin: 0 auto;
        padding: 0 .8rem;
        line-height: inherit;
        font-size: 0.916rem
    }

    .btn_sml02 {
        height: 2.916rem;
        margin: 0 auto;
        padding: 0 .8rem;
        line-height: inherit;
        font-size: 0.916rem
    }

    .btn_sml03 {
        height: 2.916rem;
        padding: 0 .8rem;
        line-height: 2.916rem;
        font-size: 1rem
    }

    /* paging */
    .paging .link_item {
        width: auto;
        height: 1.666rem;
        font-size: 1rem;
        margin: 0 0.291rem;
        padding: 0 0.5rem
    }

    .paging .link_item.box {
        width: 2.5rem;
        height: 2.5rem;
    }

    .paging span {
        width: 1.666rem;
        height: 1.666rem;
        font-size: 1rem;
        margin: 0 0.291rem;
        padding: 0;
        align-items: stretch
    }

    .paging .link_item:first-child {
        margin: 0 1.25rem 0 -1px
    }

    .paging .link_item.last-child {
        margin: 0 -1px 0 1.25rem
    }

    .paging .link_item.first {
        margin: 0
    }

    .paging .link_item.last {
        margin: 0
    }

    /* paging layout */
    .paging_area .btn_wrap {
        position: relative;
        transform: none;
        justify-content: flex-end;
        margin-top: 1rem
    }

    .paging_area .btn_wrap.left_area {
        justify-content: flex-start
    }

    /* character */
    .icon_character_area {
        width: 6.666rem;
        height: 6.666rem;
    }

    .icon_character_area .icon_character {
        background-size: cover;
    }

    .icon_character_area.profile {
        width: 5.833rem;
        height: 5.833rem;
    }

    /* agree_wrap */
    .agree_wrap .box_agree {
        margin-bottom: 1.666rem
    }

    .agree_wrap .box_agree h5,
    .agree_wrap .box_agree p {
        font-size: 0.875rem
    }

    .agree_wrap .box_agree.box_agree_type2 .custom_check,
    .agree_wrap .box_agree.toggle .custom_check {
        width: 54%;
        flex: 1 0 67%;
    }

    .agree_wrap .box_agree .btn_agree_more_js {
        padding: 0 1.2rem 0 0;
        height: 2.0833rem;
        box-sizing: border-box
    }

    .agree_wrap .box_agree .btn_agree_more_js::after {
        width: 0.4rem;
        height: 0.4rem;
        right: 0.2rem;
        opacity: 0.9;
    }

    .agree_wrap .box_agree .sec_header.join_policy_box .custom_check .js-popDetails2,
    .agree_wrap .box_agree .sec_header.join_policy_box .custom_check label,
    .agree_wrap .box_agree .sec_header.join_policy_box .custom_check label span {
        font-size: 0.875rem;
        line-height: 1.45rem;
    }

    /* aside_wrap*/
    .aside_wrap {
        z-index: 105;
        position: fixed;
        top: 0;
        float: none;
        width: 100%;
        max-width: 375px;
        height: 100%;
        margin-top: 0;
        padding: 0;
        border: none;
        box-sizing: border-box;
        background: #fff;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: transform .15s;
        transition: transform .15s;
        overflow-x: hidden;
        overflow-y: auto;
        opacity: 0;
    }

    .aside_wrap.right {
        right: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    .aside_wrap .inner {
        border: none;
    }

    .aside_wrap.active {
        transform: translateX(0);
        box-shadow: 0 .416rem .833rem 0 rgba(0, 0, 0, .14);
        opacity: 1;
    }

    .aside_wrap+.content {
        margin-left: auto;
        width: auto;
        float: none;
        padding-top: 1.875rem;
        margin-top: 0;
    }

    /* header */
    .header_nav_wrap {
        position: fixed;
        left: 0;
        top: 0;
        display: block;
        height: 4.166rem;
    }

    .login_page .header_nav_wrap {
        display: block;
    }

    .header_nav_wrap .top_wrap_inner {
        position: absolute;
        left: 50%;
        top: 0;
        justify-content: center;
        height: 4.166rem;
        margin: 0 auto;
        padding: 0 1.666rem;
        transform: translateX(-50%);
    }

    .header_nav_wrap .logo_box,
    .aside_wrap .logo_box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 60%;
        background-size: auto 1.25rem;
        box-sizing: border-box;
        transition: none;
    }

    .header_nav_wrap .btn_header_lang {
        width: 1.8rem;
        height: 1.8rem;
        background: url(../../img/common/m_icn_lang.svg) no-repeat center center;
        background-size: contain;
    }

    .header_nav_wrap .header_profile {
        position: absolute;
        right: 1.666rem;
        top: 0.892rem;
        margin-right: 0;
    }

    .header_nav_wrap.not_login .header_profile {
        display: flex;
    }

    .header_nav_wrap .header_profile .icon_character {
        display: block;
        width: 2.4rem;
        height: 2.4rem;
        background: url(../../img/common/character/character_default.png) #ccc center center no-repeat;
        border-radius: 50%;
        background-size: cover;
    }

    /*dimm_sub_menu*/
    .dimm_sub_menu {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 4;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
        opacity: 0;
        visibility: hidden;
    }

    .dimm_sub_menu.active {
        opacity: 1;
        visibility: visible;
    }

    /* aside_top*/
    .aside_top {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 4.166rem;
    }

    .aside_top .pi {
        display: block;
        position: absolute;
        left: 2.25rem;
        top: 1.25rem;
        cursor: pointer;
    }

    .aside_wrap.right .aside_top .pi {
        left: auto;
        right: 2.25rem;
    }

    /* aside_body */
    .aside_body {
        position: relative;
    }

    .aside_body_top {
        padding: 1.66rem;
        background: #ececec;
    }

    .aside_body_top.login {
        padding: 0;
    }

    .aside_body_profile {
        display: flex;
        align-items: center;
        padding: 1.6rem 2rem;
        color: #fff;
        background: #2b305a;
    }

    .aside_body_profile .icon_character_area {
        width: 3.375rem;
        height: 3.375rem;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .aside_body_profile .icon_character_area .icon_character {
        background-size: 4.2rem auto;
    }

    .aside_body_top .nav_info_join {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0.6rem 0;
        font-size: 1.1rem;
        margin-top: 1rem;
        opacity: 0.75;
    }

    .aside_body_top .nav_info_join .icn_join {
        margin-right: 1.1rem;
        width: 1.48rem;
        height: 1.58rem;
        opacity: 0.4;
    }

    .aside_body_top .nav_info_join .icn_join svg {
        width: 1.48rem;
        height: 1.58rem;
    }

    .aside_body_top .aside_profile_list {
        padding: 0.5rem 0
    }

    .aside_body_top .aside_profile_list li a {
        display: flex;
        align-items: center;
        height: auto;
        padding: 1rem 2.5rem;
        font-size: 1.08rem;
        line-height: 1;
    }

    .aside_body_top .nav_info_logout {
        display: flex;
        align-items: center;
        color: #2b2b2b;
        width: 100%;
        height: auto;
        padding: 1.25rem 2.5rem;
        font-size: 1.08rem;
        line-height: 1;
        border-top: 1px solid #c4c5c9;
    }

    .char_name {
        display: block;
        overflow: visible;
    }

    .char_name em {
        display: block;
        font-size: 1.25rem;
        overflow: visible;
    }

    .char_name span {
        display: block;
        width: 25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: .25rem;
        font-size: 1rem;
    }

    .btn_nav_info {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: .583rem;
        width: 100%;
        height: 3.5rem;
        border-radius: 4px;
        background: #2b305a;
        color: #fff;
    }

    .btn_nav_info:first-child {
        margin-top: 0;
    }

    .btn_nav_info span {
        display: block;
        margin-top: -.2rem;
        line-height: 1;
        font-size: 1.25rem;
    }

    .btn_nav_info .pi {
        margin-right: .6rem;
    }

    /* aside_menu */
    .aside_wrap .aside_menu .aside_node_parent {
        display: flex;
        align-items: center;
        width: 100%;
        height: auto;
        padding: 1.25rem 2.5rem;
        font-size: 1.08rem;
        line-height: 1;
    }

    .aside_wrap .aside_menu .aside_node_parent:after {
        display: none;
    }

    .aside_wrap .aside_menu button.aside_node_parent:after {
        content: '';
        position: relative;
        top: 0.14rem;
        display: block;
        margin-left: .416rem;
        border-top: 0.416rem solid #363636;
        border-left: .3rem solid transparent;
        border-right: .3rem solid transparent;
        -webkit-transition: transform .3s;
        transition: transform .3s;
    }

    .aside_wrap .aside_menu button.aside_node_parent.active:after {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }

    .aside_wrap .aside_menu .sub_menu {
        display: none;
        width: 100%;
        position: static;
        height: auto;
        padding: 1.25rem 0;
        background-color: #fff;
        border-bottom: 1px solid #dfdfdf;
        box-sizing: border-box;
        z-index: 10;
    }

    .aside_wrap .aside_menu .sub_menu li {
        display: flex;
        align-items: center;
        padding: 1rem 2.5rem;
        box-sizing: border-box;
    }

    .aside_wrap .aside_menu .sub_menu li.aside_node_child a {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .aside_wrap .aside_menu .sub_menu li span {
        display: none;
        flex-shrink: 0;
        justify-content: center;
        width: 3.125rem;
        height: 1.4583rem;
        margin-left: 0.416rem;
        border: 2px solid #ff6666;
        border-radius: 0.8rem;
        color: #da0011;
        font-weight: bold;
        line-height: 1.4;
        font-size: 0.9167rem;
    }

    .aside_wrap .aside_menu .sub_menu li.new span {
        display: flex;
    }

    .aside_wrap.left .aside_menu {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #dfdfdf;
    }

    .aside_menu .menu_display_2 {
        margin-top: 0;
        border: none;
    }

    .aside_menu .menu_display_3 {
        margin-top: 0;
        border: none;
    }

    /* sns more */
    .btn_sns_more {
        font-size: .925rem;
    }

    /* 모바일에서 회원탈퇴만 제일 아래로 */
    [data-navregexp*="LeaveReq"] {
        order: 1;
    }

    /* aside_footer */
    .aside_footer {
        display: block;
        padding-top: 6.25rem;
        padding-bottom: 1.4583rem;
        text-align: center;
        font-size: 0.75rem;
        color: #7f7e7e;
    }

    /* pi */
    .aside_wrap li .aside_node_parent .pi,
    .pi_wrap .pi[class*="pi_mypage_"] {
        display: none;
    }

    /*footer*/
    footer.footer_wrap {
        min-width: initial;
    }

    footer.footer_wrap .inner_footer {
        height: 16rem;
        padding: 0.25rem 2.2916rem 0.75rem;
    }

    footer.footer_wrap .inner_footer .term_list {
        margin-top: 1.25rem;
        padding: 0
    }

    footer.footer_wrap .inner_footer .term_list .term_item {
        padding: 0 0.625rem;
        font-size: 0.791rem;
        line-height: 1.768
    }

    footer.footer_wrap .inner_footer .term_list .term_item::before {
        height: 0.6rem;
        margin-top: 0;
        transform: translateY(-45%);
    }

    footer.footer_wrap .inner_footer address span {
        font-size: 0.75rem;
        line-height: 1.666;
        padding: 0 0.583rem
    }

    footer.footer_wrap .inner_footer address span.mob_line {
        display: block
    }

    footer.footer_wrap .inner_footer address span.mob_line:before {
        display: none
    }

    footer.footer_wrap .inner_footer address span a {
        font-size: 0.75rem;
        line-height: 1.666;
        padding: 0 0.583rem
    }

    footer.footer_wrap .inner_footer address span.mob_block {
        display: block;
        padding: 0
    }

    footer.footer_wrap .inner_footer address span.mob_block:before {
        display: none
    }

    footer.footer_wrap .inner_footer .copyright {
        margin-top: 1.25rem;
        text-align: center
    }

    footer.footer_wrap .inner_footer .copyright .btn_pearlabyss {
        width: 7.333rem;
        height: 1.4166rem
    }

    footer.footer_wrap .inner_footer .copyright p {
        display: block;
        margin-left: 0;
        margin-top: 0.625rem;
        font-size: 0.75rem
    }

    footer.footer_wrap .inner_footer .copyright .btn_pearlabyss:before {
        background-size: 33.333rem 33.333rem;
        background-position: -7.833rem -29.7916rem
    }

    footer.footer_wrap .inner_footer .adrCopyright .txtRating {
        font-size: 0.7rem
    }

    footer.footer_wrap .inner_footer .footer_item {
        flex-direction: column
    }

    /* container */
    .container {
        min-height: calc(100vh - 16rem);
        padding: 4.1666rem 1.25rem 2.916rem
    }

    /*bridge_page*/
    #bridge_wrap .title {
        margin-top: 4.2917rem;
        font-size: 1.9667rem;
    }

    #bridge_wrap .h2_desc {
        margin: 0.8333rem 0 0;
        font-size: 1.0833rem;
    }

    #bridge_wrap .platform_wrap {
        display: block;
        text-align: center;
        margin: 2.5rem auto 0;
    }

    #bridge_wrap .platform_list {
        flex: 0 0 28.4167rem;
        width: 28.4167rem;
        height: 37.7917rem;
        margin: 0 auto;
    }

    #bridge_wrap .platform_list+.platform_list {
        margin: 1.25rem auto;
    }

    #bridge_wrap .platform_list>a {
        padding: 1.5rem;
        border-radius: 0.8333rem;
    }

    #bridge_wrap .platform_list strong {
        font-size: 2.4rem;
    }

    #bridge_wrap .platform_list em {
        margin-top: .7rem;
        font-size: .9rem;
    }

    #bridge_wrap .service_country {
        height: 2.25rem;
        margin: 0.8333rem auto 0;
        padding: 0 1.4583rem;
        border-radius: 1.125rem;
        font-size: 1rem;
    }

    #bridge_wrap .js-gameOpen {
        padding: 2.0833rem;
        font-size: 1.2rem;
        color: #fff;
    }

    #bridge_wrap .game_list {
        bottom: 6rem;
    }

    #bridge_wrap .game_list a {
        font-size: 1.1rem;
        padding: 0.8rem;
        color: #efefef;
    }

    #bridge_wrap .js-gameClose {
        width: 2.5rem;
        height: 2.5rem;
        padding: 4.1667rem 2.5rem 2.5rem;
        opacity: 0.8;
    }

    #bridge_wrap .js-gameClose::before,
    #bridge_wrap .js-gameClose::after {
        top: 1.6667rem;
        height: 2.5rem;
    }

    /*에러/ 점검 페이지*/
    .notfound_wrap {
        padding-top: 12.5rem
    }

    .notfound_wrap .img_area {
        max-width: 22.833rem;
        width: 100%;
        height: 8.875rem;
        box-sizing: border-box;
    }

    .notfound_wrap .text_area .text01 {
        font-size: 1.0416rem
    }

    .notfound_wrap .text_area .text02 {
        font-size: 0.8333rem;
        margin-top: 1.25rem
    }

    .notfound_wrap .btn_wrap {
        display: inline-block;
        margin-top: 2.416rem
    }

    .notfound_wrap .btn_wrap .btn_big {
        width: 15.375rem;
        height: 3.9583rem;
        font-size: 1rem;
    }

    .footer_wrap.notfound .copyright {
        height: 6.916rem;
        box-sizing: border-box;
        padding: 2.803rem 0 0
    }

    .footer_wrap.notfound .copyright p {
        display: block;
        margin: 0.666rem 0
    }

    .footer_wrap.notfound .copyright a.btn_pearlabyss {
        width: 7.166rem;
        height: 1.291rem
    }

    .footer_wrap.notfound .copyright a.btn_pearlabyss:before {
        background-size: 33.333rem 33.333rem;
        background-position: -7.916rem -29.833rem
    }

    .footer_wrap.notfound .copyright p {
        font-size: 0.75rem
    }

    .closetime_wrap {
        padding-top: 7.8rem
    }

    .closetime_wrap:before {
        height: 17.0833rem;
        box-sizing: border-box
    }

    .closetime_wrap .img_area {
        width: 27rem;
        max-width: 100%;
        height: 11.333rem;
        box-sizing: border-box
    }

    .closetime_wrap .img_area:before {
        background-size: 100% auto;
    }

    .closetime_wrap .text_area {
        padding: 2.75rem 2.0833rem;
        margin-top: 0;
        max-width: 28.333rem
    }

    .closetime_wrap .text_area .text01 {
        font-size: 1.0416rem;
        margin-bottom: 1.666rem
    }

    .closetime_wrap .text_area .text02 {
        font-size: 0.9166rem
    }

    .closetime_wrap .text_area .text03 {
        font-size: 0.8333rem;
        margin-top: 1.25rem
    }

    .closetime_wrap .text_area .text04 {
        font-size: 0.9rem;
        margin-top: 3rem
    }

    .closetime_wrap .btn_wrap {
        margin-top: 2.416rem
    }

    .footer_wrap.closetime {
        height: 6.5rem
    }

    .footer_wrap.closetime .copyright {
        padding: 2.5rem 0 1.25rem
    }

    .footer_wrap.closetime .copyright p {
        display: block;
        margin: 0.666rem 0 0;
        line-height: 1
    }

    .footer_wrap.closetime .copyright a.btn_pearlabyss {
        width: 7.166rem;
        height: 1.333rem
    }

    .footer_wrap.closetime .copyright a.btn_pearlabyss:before {
        background-size: 33.333rem 33.333rem;
        background-position: -7.916rem -29.833rem
    }

    .footer_wrap.closetime .copyright p {
        font-size: 0.75rem
    }

    /* 제한 점검 페이지 */
    .login_close.container {
        min-height: 100vh;
        padding: 7rem 0 2.5rem;
        background-position: 78% center;
    }

    .login_close .close_sub_wrap {
        max-width: 65%;
    }

    .login_close .close_inner {
        padding: 0 4rem;
    }

    .login_close .close_sub_1 {
        font-size: 1.33rem;
    }

    .login_close .close_sub_2 {
        font-size: 3.22rem;
    }

    .login_close .close_sub_3 {
        font-size: 1rem;
    }

    .login_close .time_box_wrap {
        margin-top: 3rem;
    }

    .login_close .close_download_wrap {
        display: none;
    }

    /* policy */
    .container.policy {
        padding-top: .166rem;
    }

    .container.policy .content {
        padding: 0;
    }

    .container.policy .sort_area {
        margin: 2.5rem 0 0.833rem;
        padding: 0;
        font-size: 0
    }

    .container.policy .sort_area:after {
        display: block;
        content: '';
        height: 0;
        font-size: 0;
        opacity: 0;
        clear: both
    }

    .container.policy .sort_area .right_area {
        float: none;
        vertical-align: top
    }

    .container.policy .sort_area .right_area .policy_select_wrap+.policy_select_wrap {
        margin-left: 2%
    }

    .container.policy .sort_area .right_area .policy_select_wrap:first-child {
        width: 59%
    }

    .container.policy .sort_area .right_area .policy_select_wrap:last-child {
        width: 39%
    }

    .container.policy h2 {
        margin: 0;
        padding: 1.5rem 0;
        border-bottom: 2px solid #555;
        font-size: 2.166rem;
        color: #2e2e2e;
        font-weight: normal
    }

    .container.policy .policy_wrap {
        padding: 2rem 0
    }

    .container.policy .policy_print {
        padding: 0 1rem;
        height: 2.833rem;
        font-size: 0.833rem;
    }

    /* google reCaptcha */
    .recaptcha_wrap,
    .recaptcha_wrap+.btn_wrap {
        margin-top: 2.0833rem;
    }

    /* #languageBox select*/
    #agree_popup_wrap .agree_popup_box .title_wrap {
        margin: 0 0 1rem 0;
        padding: 0 0 1rem 0;
    }

    #agree_popup_wrap .agree_popup_box .popup_title {
        padding: 0 24px;
        height: auto;
        border-bottom: none;
        font-size: 2rem;
    }

    #agree_popup_wrap .agree_popup_box .btn_close {
        width: 20px;
        height: 20px;
    }

    #agree_popup_wrap .agree_popup_box .btn_close span {
        width: 24px;
    }

    .loadingLayer .loading_progress_wrap .loading_circle {
        width: 5.1666rem;
        height: 5.1666rem
    }

    .loadingLayer .loading_progress_wrap .loading_circle .loader {
        font-size: 0.833rem
    }

    .loadingLayer .loading_progress_wrap .loading_text {
        font-size: 1.083rem;
        margin-top: 1.25rem
    }
}

@media (max-width: 767px) {
    .common_loading_wrap .char {
        height: 3.32rem;
        margin: 0 0.32rem;
        background-size: 7.75rem 6.75rem;
    }

    .common_loading_wrap .char_1 {
        width: 1.13rem;
        height: 3.32rem;
        background-position: -2.88rem 0rem;
    }

    .common_loading_wrap .char_2 {
        width: 1rem;
        height: 3.32rem;
        background-position: -1.13rem -3.44rem;
    }

    .common_loading_wrap .char_3 {
        width: 1.32rem;
        height: 3.32rem;
        background-position: 0rem 0rem;
    }

    .common_loading_wrap .char_4 {
        width: 1.13rem;
        height: 3.32rem;
        background-position: -4.13rem 0rem;
    }

    .common_loading_wrap .char_5 {
        width: 1rem;
        height: 3.32rem;
        background-position: -2.25rem -3.44rem;
    }

    .common_loading_wrap .char_6 {
        width: 1.32rem;
        height: 3.32rem;
        background-position: -1.44rem 0rem;
        margin-left: 0.94rem;
    }

    .common_loading_wrap .char_7 {
        width: 1.13rem;
        height: 3.32rem;
        background-position: -5.38rem 0rem;
    }

    .common_loading_wrap .char_8 {
        width: 1.13rem;
        height: 3.32rem;
        background-position: -6.63rem 0rem;
    }

    .common_loading_wrap .char_9 {
        width: 1rem;
        height: 3.32rem;
        background-position: -3.38rem -3.44rem;
    }

    .common_loading_wrap .char_10 {
        width: 1rem;
        height: 3.32rem;
        background-position: 0rem -3.44rem;
    }

    .container {
        min-height: calc(100vh - 19rem);
    }

    #agree_popup_wrap .agree_popup_box {
        margin: 30px 0;
        padding: 20px;
    }

    .field-validation-error>span:before {
        margin: 0 .25rem;
    }

    .tooltip_wrap::before {
        margin: 0 .25rem;
    }

    /*footer*/
    footer.footer_wrap .inner_footer {
        height: 19rem;
    }

    /* 제한 점검 페이지 */
    .login_close.container {
        padding: 4.25rem 0 2rem;
        background: url('../../img/common/m_login_maintenance_bg.jpg') no-repeat center;
        background-size: cover;
    }

    .login_close .close_sub_wrap {
        max-width: 100%;
    }

    .login_close .close_inner {
        padding: 0 3rem;
    }

    .login_close .close_sub_text {
        text-align: center;
    }

    .login_close .close_sub_1 {
        font-size: 1.583rem;
    }

    .login_close .close_sub_2 {
        margin-top: .5rem;
        font-size: 2.833rem;
    }

    .login_close .close_sub_3 {
        margin-top: 0.875rem;
        font-size: 1.167rem;
    }

    .login_close .time_box_wrap {
        margin-top: 3rem;
        padding: 1.25rem;
        border: 1px solid #765f3f;
        border-radius: 3px;
        background: rgba(0, 0, 0, .15);
    }

    .login_close .time_box_wrap::before {
        display: none;
    }

    .login_close .time_box_text {
        text-align: center;
    }

    .login_close .time_box_text+.time_box_text {
        margin-top: .925rem;
    }

    .login_close .time_box_text p {
        font-size: 1rem;
    }

    .login_close .login_copyright {
        flex-direction: column;
        align-items: center;
    }

    .login_close .login_copyright_logo {
        width: 100px;
    }

    .login_close .login_copyright_text {
        margin-left: 0;
        margin-top: 5px;
    }

    .password_wrap.capslock_on .custom_input .js-securityStep {
        right: 50px;
    }

    .num_input_wrap_grey {
        padding: 2rem 7% 2.5rem;
    }
}

@media (max-width: 480px) {

    .custom_msg,
    .btn_sml,
    .btn_sns_more,
    .btn_sns_more .sns_more,
    .btn_sns_more sns_close,
    .join_list_text,
    ul.bullet_list li,
    .tooltip_wrap .tooltip_title,
    .field-validation-valid>span,
    .field-validation-error>span,
    .custom_check input[type="checkbox"]~label,
    .agree_wrap .box_agree .sec_header.join_policy_box .custom_check .js-popDetails2,
    .agree_wrap .box_agree .sec_header.join_policy_box .custom_check label,
    .agree_wrap .box_agree h5,
    .agree_wrap .box_agree p {
        font-size: 11px
    }

    .btn_sml02,
    .btn_sml03,
    .btn_mid2,
    footer.footer_wrap .inner_footer .term_list .term_item,
    footer.footer_wrap .inner_footer .copyright p,
    .aside_wrap .aside_menu .sub_menu li,
    .steam_login_box .btn_steam_login,
    .btn_with_arrow,
    #bridge_wrap .platform_list em,
    #bridge_wrap .service_country,
    .agree_popup_content,
    .agree_wrap .box_agree .sec_header.join_policy_box .custom_check label span {
        font-size: 12px
    }

    .btn_big,
    .aside_wrap .aside_menu .aside_node_parent,
    #bridge_wrap .h2_desc {
        font-size: 13px;
    }
}

/* device 배율에 따른 이미지 변경 */
@media screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (min-resolution: 1.5dppx),
screen and (min-resolution: 144dpi) {
    .common_loading_wrap .char {
        background-image: url('../../img/common/spr_common_loading_2x.png');
    }
}

/* 360px에서 recaptcha 너비 조정 */
@media (max-width: 360px) {
    #rc-anchor-container {
        transform: scale(0.8);
        transform-origin: 0 0;
    }
}

/* 280이하에서 recaptcha 너비 조정 */
@media (max-width: 280px) {
    #rc-anchor-container {
        transform: scale(0.75);
        transform-origin: 0 0;
    }
}

/*keyframes*/
@-webkit-keyframes fadeinup {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeinup {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes complete {
    0% {
        max-height: 145px;
        width: 100%;
        margin: 0 0 0 auto;
    }

    40% {
        width: 0;
        opacity: 0;
        margin: 0 0 0 auto;
    }

    100% {
        max-height: 0;
        width: 0;
        opacity: 0;
        margin: 0 0 0 auto;
        padding: 0;
    }
}

@keyframes complete {
    0% {
        max-height: 145px;
        width: 100%;
    }

    40% {
        width: 0;
        opacity: 0;
        overflow: hidden;
    }

    100% {
        max-height: 0;
        width: 0;
        opacity: 0;
        margin: 0 0 0 auto;
        padding: 0;
        overflow: hidden;
    }
}

@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes load5 {

    0%,
    100% {
        box-shadow: 0 -2.6em 0 0 #fff, 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7)
    }

    12.5% {
        box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0 #fff, 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5)
    }

    25% {
        box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7), 2.5em 0 0 0 #fff, 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2)
    }

    37.5% {
        box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5), 2.5em 0 0 0 rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0 #fff, 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2)
    }

    50% {
        box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.7), 0 2.5em 0 0 #fff, -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2)
    }

    62.5% {
        box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.5), 0 2.5em 0 0 rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0 #fff, -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2)
    }

    75% {
        box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.7), -2.6em 0 0 0 #fff, -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2)
    }

    87.5% {
        box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.5), -2.6em 0 0 0 rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0 #fff
    }
}

@keyframes load5 {

    0%,
    100% {
        box-shadow: 0 -2.6em 0 0 #fff, 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7)
    }

    12.5% {
        box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0 #fff, 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5)
    }

    25% {
        box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7), 2.5em 0 0 0 #fff, 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2)
    }

    37.5% {
        box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5), 2.5em 0 0 0 rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0 #fff, 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2)
    }

    50% {
        box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.7), 0 2.5em 0 0 #fff, -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2)
    }

    62.5% {
        box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.5), 0 2.5em 0 0 rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0 #fff, -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2)
    }

    75% {
        box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.7), -2.6em 0 0 0 #fff, -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2)
    }

    87.5% {
        box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.5), -2.6em 0 0 0 rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0 #fff
    }
}

@-webkit-keyframes spin_btn {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(359deg);
    }
}

@keyframes spin_btn {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(359deg);
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes loading_animate {

    0%,
    70% {
        opacity: 1;
    }

    35% {
        opacity: 0.05;
    }
}

@keyframes loading_animate {

    0%,
    70% {
        opacity: 1;
    }

    35% {
        opacity: 0.05;
    }
}

@media print {
    @page {
        size: A4;
        margin: 1mm;
    }

    html,
    body {
        margin: 1mm;
    }

    #top_network,
    header,
    footer,
    .header_nav_wrap {
        display: none !important;
    }
}


span.live {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding: 10px 27px;
    font-size: 14px;
    color: #fcea69;
    text-align: left;
    line-height: 1.5;
    white-space: nowrap;
    -webkit-transition: color .15s;
    transition: color .15s
}

span.live a {
    color: #fcea69;
}

span.live a:after {
    color: #fcea69;
}

span.live a:hover {
    color: #e3cf3b;
}

p.coded,
a.coded {
    color: #5f5f5f;
    margin-left: 3px;
}

a.coded {
    color: #5f5f5f;
    text-decoration: none; /* Varsayılan alt çizgiyi kaldırmak için */
}

a.coded:hover {
    color: #9d9d9d;
}