@charset "utf-8";

body {background: #53A6F8; height: 100vh;}

.warning_box {display: inline-block; width: 490px; height: 500px; position: absolute; z-index: 5; top: 230px; left: 50%; transform: translateX(-50%); text-align: center; opacity: 0; animation-name: warning; animation-delay: .3s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-direction: alternate;}

.textBox {margin-top: 120px;}
.textBox p {margin-bottom: 16px;}
.textBox .warning {display: inline-block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1; font-family: 'Manrope'; font-size: 14.375rem; color: #66B0FA; margin-bottom: 0;}
.textBox .text_01 {font-size: 2.125rem; font-weight: 400; color: #fff;}
.textBox .text_02 {font-size: 1.125rem; font-weight: 200; color: #fff; width: 404px; margin: 0 auto 16px auto;}
.textBox .text_03 {font-size: 1.125rem; font-weight: 100; color: #fff; margin-bottom: 0;}

.buttonBox {display: inline-block; text-align: center; margin-top: 32px;}
.buttonBox .btn {display: inline-block; position: relative; float: left; margin-right: 16px; width: 149px; height: 40px; text-align: right; border-radius: 6px; background: #053661; box-sizing: border-box;}
.buttonBox .btn span {display: inline-block; position: absolute; top: 50%; right: 19px; transform: translateY(-50%); font-size: 1.25rem; font-weight: 300; color: #fff;}
.buttonBox .btn:last-child {margin-right: 0;}
.buttonBox .btn .icon {position: relative; z-index: 0; width: 40px; height: 40px; background: #064174; border-radius: 6px 0 0 6px; transition: width .3s;}
.buttonBox .btn:hover .icon {width: 100%; border-radius: 6px;}
.buttonBox .btn_return .icon:after,
.buttonBox .btn_main .icon:after {display: inline-block; position: absolute;}
.buttonBox .btn_return .icon:after {content: ""; left: 5px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;  background: url(/error/img/warning_return.svg) no-repeat; background-size: contain;}
.buttonBox .btn_main .icon::after {content: ""; left: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: url(/error/img/warning_main.svg) no-repeat;}

img {position: absolute;}
.bg_map {bottom: 15%; right: 10%; opacity: 0; animation-name: map; animation-delay: 1s; animation-duration: 2s; animation-fill-mode: forwards; animation-direction: alternate;}
.bg_ship {bottom: 10%; right: 13%; transform: translate(50px, -50px); opacity: 0; animation-name: ship; animation-delay: 2s; animation-duration: 2.5s; animation-fill-mode: forwards; animation-direction: alternate;}

@keyframes warning {

    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes map {

    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes ship {

    0% {transform: translate(50px, -50px); opacity: 0;}
    100% {transform: translate(0, 0); opacity: 1;}
}

/* ----- mobile ----- */

@media screen and (max-width: 1400px) {
    
    img {width: 90%;}
    .bg_map {max-width: 1150px; left: 50%; transform: translateX(-50%); bottom: 50px;}
    .bg_ship {max-width: 525px; width: 45%; bottom: 50px;}
}

@media screen and (max-width: 1200px) {
    
    .warning_box {width: 90%; max-width: 490px; height: auto; top: 40%; transform: translate(-50%, -40%);}    
}

@media screen and (max-width: 450px) {
    
    .warning_box {max-width: 90%; top: 45%; transform: translate(-50%, -45%);}

    .textBox {margin-top: 80px}
    .textBox .warning {font-size: 9.375rem;}
    .textBox .text_01 {font-size: 1.5rem;}
    .textBox .text_02 {font-size: 0.875rem; width: auto;}
    .textBox .text_03 {font-size: 0.875rem;}
    
    .buttonBox .btn {width: 110px;}
    .buttonBox .btn span {font-size: .875rem; right: 10px}

    .bg_map {bottom: 10%;}
    .bg_ship {bottom: 10%;}
}