﻿body { margin: 0; background: #201d19; word-break: break-word; word-wrap: break-word }
.page_wrap { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100vh; padding: 0 1.42rem 6.5rem; box-sizing: border-box }
.page_wrap.login_close_wrap { display: block; min-height: auto; padding: 0 }
.closetime_wrap { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; padding: 4.166rem 1.666rem; font-size: 0.938rem; line-height: 2; color: #bfbfbf; text-align: center; box-sizing: border-box }
.closetime_wrap .img_main { display: block; margin: 0 auto; width: 220px }
.closetime_wrap .img_main.not_found { width: 433px }
.closetime_wrap .title { font-size: 1.68rem; line-height: 1.64; margin-top: 2rem; color: #fff }
.closetime_wrap .btn_move { display: flex; justify-content: center; align-items: center; width: 18.125rem; max-width: 80vw; height: 3.75rem; margin: 3.4rem auto 0 auto; font-size: 0.938rem; color: #fff; border: 1px solid #504a3a; border-radius: 0.3rem; transition: color 0.2s,background 0.2s; box-sizing: border-box }
.closetime_wrap .btn_move:hover { color: #000; background: #e6b858 }
.closetime_wrap .type_1 .desc { margin-top: 0.7rem }
.closetime_wrap .type_1 .from { color: #fff }
.closetime_wrap .type_2 { margin-top: 0.6rem }
.closetime_wrap .type_2 .desc { margin-top: 1.08rem }
.closetime_wrap .type_3 { margin-top: 2rem }
.closetime_wrap .type_3 .desc { margin-top: 0.4rem }
.closetime_wrap .type_3 .time_desc { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; min-width: 28rem; margin-top: 1.875rem; padding-top: 1.875rem; border-top: 1px solid #332f28; line-height: 2 }
.closetime_wrap .type_3 .time_text { display: inline-block; text-align: center }
.closetime_wrap .type_3 p { margin: 0 }
.closetime_wrap .type_3 b, .closetime_wrap .type_3 strong { font-weight: normal; color: #fff }
.copyright_wrap { position: absolute; bottom: 15px; left: 0; display: block; width: 100%; box-sizing: border-box }
.copyright_wrap .inner { position: relative; display: flex; justify-content: center; align-items: center; margin: 0 auto; padding: 32px 20px 30px 20px; box-sizing: border-box }
.copyright_wrap .logo { display: block; width: 128px; height: 16px; background: url(../../Common/img/cm_bi_white.png) no-repeat center center; background-size: contain; transition: opacity 0.3s; opacity: 0.6 }
.copyright_wrap .logo + .copyright { display: block; max-width: 100%; font-size: 13px; line-height: 1rem; margin-left: 1rem; color: #fff; opacity: 0.6; white-space: nowrap }
:lang(ko-KR) body { word-break: keep-all }
.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(../../Common/img/BDO/login_maintenance_bg.jpg) no-repeat 65% center; background-size: cover; box-sizing: border-box }
.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; color: #fff }
.login_close .time_box_wrap::before { position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: #dcb15c; content: '' }
.login_close .time_box_text, .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(../../Common/img/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) }
body.console .closetime_wrap .btn_move, body.console .closetime_wrap .desc, body.ingame .closetime_wrap .btn_move, body.ingame .closetime_wrap .desc { display: none }

@media screen and (min-width: 2560px) {
    .copyright_wrap .logo { background-image: url(../../Common/img/cm_bi_white_2x.png) }
}

@media screen and (min-width: 1921px) {
    .login_close { background-image: url(../../Common/img/BDO/w_login_maintenance_bg.jpg) }
}

@media screen and (min-width: 1025px) {
    .copyright_wrap .logo:hover { opacity: 1 }
    .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 }
}

@media screen and (max-width: 1024px) {
    .closetime_wrap .img_main { width: 13.75rem }
    .closetime_wrap .title { font-size: 1.0416rem }
    .closetime_wrap .type_2 .desc { font-size: 0.8333rem }
    .closetime_wrap .type_3 .time_desc { min-width: inherit }
    .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 }
}

@media screen and (max-width: 768px) {
    .closetime_wrap { padding: 4.166rem 0 }
    .closetime_wrap .img_main { width: 13.75rem }
    .closetime_wrap .img_main.not_found { width: 22rem }
    .copyright_wrap .sns_wrap { position: relative; right: auto; top: auto; display: flex; justify-content: center; width: 100%; padding: 1rem 0; border-bottom: 1px solid #e0e0e0; transform: none }
    .copyright_wrap .inner { flex-direction: column; padding: 0 }
    .copyright_wrap .logo { width: 6.375rem; height: 1rem; margin: 0 auto 0.72rem auto }
    .copyright_wrap .logo + .copyright { margin: 0 0 0.92rem 0; font-size: 0.75rem }
    .login_close.container { padding: 4.25rem 0 2rem; background: url(../../Common/img/BDO/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 }
}

@media screen and (max-height: 600px),screen and (max-width: 600px) {
    .page_wrap { display: flex; flex-direction: column; min-height: initial; padding: 0 1.42rem 1.666rem }
    .copyright_wrap { position: relative; bottom: auto; left: auto }
}

@media (min-width: 1025px) {
    html { font-size: 16px }
}

@media (max-width: 1024px) {
    html { font-size: 14px }
}

@media (max-width: 430px) {
    html { font-size: 13.71px }
}

@media (max-width: 420px) {
    html { font-size: 13.38px }
}

@media (max-width: 410px) {
    html { font-size: 13.07px }
}

@media (max-width: 400px) {
    html { font-size: 12.75px }
}

@media (max-width: 390px) {
    html { font-size: 12.43px }
}

@media (max-width: 380px) {
    html { font-size: 12.11px }
}

@media (max-width: 370px) {
    html { font-size: 11.79px }
}

@media (max-width: 360px) {
    html { font-size: 11.47px }
}

@media (max-width: 350px) {
    html { font-size: 11.16px }
}

@media (max-width: 340px) {
    html { font-size: 10.83px }
}

@media (max-width: 330px) {
    html { font-size: 10.52px }
}

@media (max-width: 320px) {
    html { font-size: 10.2px }
}
