/*
 * 404 커스텀 디자인 — 원본 studio_jt sub-bin.css(.error_404) 이식.
 * 파도 3겹 + 헤엄치는 사람 + 상어. 모션은 main.js page_404_motion().
 */

.error_404 .wave_wrap { display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; }
.error_404 .wave_wrap .wave { display: block; width: 120%; height: 72%; position: absolute; opacity: 0; }
.error_404 .wave_wrap .wave svg { display: block; width: 100%; position: absolute; top: 0; }
.error_404 .wave_wrap .wave_01 { bottom: 43px; left: -9.6%; }
.error_404 .wave_wrap .wave_02 { bottom: 28px; left: -10.2%; }
.error_404 .wave_wrap .wave_03 { bottom: 0; left: -9%; z-index: 10; }
.error_404 .wave_wrap .wave_03 img { z-index: 10; }
.error_404 .wave_wrap .wave_03 div { display: block; width: 100%; position: absolute; bottom: -18px; top: 32%; left: 0; background: #0b21ee; z-index: 10; }

.error_404 .swimming_man { height: 25.7%; position: absolute; right: 28.5%; bottom: 57.7%; opacity: 0; }
.error_404 .swimming_man img { height: 100%; }
.error_404 .shark { display: inline-block; position: absolute; right: 3.6%; bottom: 57.5%; transform: rotate(10deg); opacity: 0; }
.error_404 .shark img { height: 100%; }

.error_404 .message_wrap { display: block; width: 100%; position: absolute; top: 45.6%; z-index: 100; text-align: center; color: #fff; }
.error_404 .message_wrap h1 { font-family: 'Montserrat', sans-serif; font-size: 24px; letter-spacing: 0.3em; font-weight: 500; margin-bottom: 20px; }
.error_404 .message_wrap p { letter-spacing: 0.095em; }
.error_404 .message_wrap a { color: #fff; }
.error_404 .message_wrap nav { padding-top: 46px; font-size: 0; }
.error_404 .message_wrap nav a { display: inline-block; width: 201px; height: 60px; position: relative; border: 2px solid #fff; border-radius: 3px; margin: 0 5px; line-height: 56px; padding: 0 40px; font-size: 15px; transition: all 300ms; }
.error_404 .message_wrap nav a:before { display: block; width: 15px; height: 12px; position: absolute; top: 50%; margin-top: -7px; font-family: 'jt-font'; font-size: 15px; line-height: 15px; }
.error_404 .message_wrap nav a:hover { background: #fff; color: #0b21ee; }
.error_404_gohome { text-align: left; }
.error_404_gohome:before { content: '\e903'; right: 29px; }
.error_404_goback { text-align: right; }
.error_404_goback:before { content: '\e902'; left: 29px; }