@charset "utf-8";

/*
 * File    : layout.css
 * Author  : STUDIO-JT (KMS)
 *
 * SUMMARY :
 * FONT
 * VARIABLE
 * RESET
 * LAYOUT
 * ANIMATION KEYFRAMES
 * HOVER
 * RESPONSIVE
 */



/* **************************************** *
 * FONT
 * **************************************** */
@font-face {
    font-family: 'fahkwang';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/fahkwang/fahkwang-v16-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'fahkwang';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/fahkwang/fahkwang-v16-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'fahkwang';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/fahkwang/fahkwang-v16-latin-700.woff2') format('woff2');
}



/* **************************************** *
 * VARIABLE
 * **************************************** */
:root {
    /* FONT */
    --font-primary: 'fahkwang', sans-serif;

    --letter-spacing: 0em;

    --font-size-01: 80rem;
    --font-size-02: 20rem;
    --font-size-03: 18rem;

    --font-lineheight-01: 94rem;
    --font-lineheight-02: 32rem;
    --font-lineheight-03: 30rem;

    /* COLOR */
    --color-white: #FFF;
    --color-black: #111;

    --color-gray-100: #F8F8F8;
    --color-gray-200: #F4F4F4;
    --color-gray-300: #EEE;
    --color-gray-400: #DDD;
    --color-gray-500: #C5C5C5;
    --color-gray-600: #AAA;
    --color-gray-700: #8E8E8E;
    --color-gray-800: #666;
    --color-gray-900: #444;

    --color-primary: #CC65FD;
    --color-secondary: #E8FD65;
    --color-third: #20CF70;
    --color-fourth: #B8D0B8;

    /* RADIUS */
    --border-radius-01: 24rem;
    --border-radius-02: 8rem;

    /* SPACE */
    --section-space: 20rem;
}



/* **************************************** *
 * RESET
 * **************************************** */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, time, figure, article, nav, header, footer, hgroup, video, audio, aside, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    vertical-align: baseline;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
figure, article, header, footer, nav, hgroup, video, audio, aside, main { display: block; }

/* RESET MOBILE DEFAULT STYLE */
html { -ms-text-size-adjust: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none; }
body, textarea:focus, input:focus, a:focus { -webkit-tap-highlight-color: rgba(107, 120, 245, .08); }
body { -webkit-touch-callout: none; }

/* SELECTION */
::-moz-selection { background: rgba(33, 43, 53, .35); color: var(--color-white); } 
::selection { background: rgba(33, 43, 53, .35); color: var(--color-white); } 
::-moz-selection { background: rgba(33, 43, 53, .35); color: var(--color-white); }



/* **************************************** *
 * LAYOUT
 * **************************************** */
html { font-size: 6.25%; }
html.safari.desktop { font-size: 1px; }

body { overflow-x: hidden; font-family: var(--font-primary); font-size: 16rem; word-break: keep-all; color: var(--color-black); }
a { color: var(--color-black); text-decoration: none; }
 
/* WRAP */
.wrap { max-width: 1200rem; margin: 0 auto; position: relative; }

/* HEADER */
#header { width: calc(100% - (var(--section-space) * 2)); height: 94rem; position: absolute; top: var(--section-space); left: var(--section-space); }

#logo { display: flex; align-items: center; gap: 7rem; padding: 6rem 0; position: absolute; top: 29rem; left: 40rem; }
#logo > span { font-size: 22rem; font-weight: 700; line-height: 1; }
#logo > i { display: block; width: 24rem; height: 24rem; background: var(--color-black); border-radius: 50%; animation: blur 6s linear 0s infinite; }

/* CONTAINER */
.main-container { margin: var(--section-space) var(--section-space); }

/* ERROR */
.error { display: flex; align-items: center; justify-content: center; min-height: calc(100svh - (var(--section-space) * 2)); max-height: -webkit-fill-available; padding: 150rem 0; background: var(--color-gray-200); border-radius: var(--border-radius-01); overflow: hidden; }
.error__inner { text-align: center; }

.error__inner h1 { margin-bottom: 42rem; font-size: var(--font-size-01); line-height: var(--font-lineheight-01); font-weight: 600; letter-spacing: var(--letter-spacing); }
.error__inner p { font-size: var(--font-size-02); line-height: var(--font-lineheight-02); font-weight: 500; letter-spacing: var(--letter-spacing); }

.error__controller { display: flex; gap: 12rem; justify-content: center; margin-top: 48rem; }

.error__btn { padding: 10rem 32rem; text-align: center; border: 1px solid var(--color-black); border-radius: var(--border-radius-02); }
.error__btn > span { font-size: var(--font-size-03); line-height: var(--font-lineheight-03); font-weight: 700; letter-spacing: var(--letter-spacing); }
.error__btn.error__btn--01 { color: var(--color-white); background: var(--color-black); }
.error__btn.error__btn--02 { color: var(--color-black); background: transparent; }



/* **************************************** *
 * ANIMATION KEYFRAMES
 * **************************************** */
@keyframes blur {
    0% { filter: blur(0.2rem); }
    50% { filter: blur(5rem); }
    100% { filter: blur(0.2rem); }
}



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* BUTTON */
    .error__btn:hover { color: var(--color-white); background: var(--color-primary); border-color: var(--color-primary); }

}



/* **************************************** *
 * RESPONSIVE
 * **************************************** */
@media (max-width: 1680px){

    html,
    html.safari.desktop { font-size: 0.06060606060606061vw; }

    /* VARIABLE */
    :root {
        --font-size-01: 74rem;

        --font-lineheight-01: 88rem;
    }

}

@media (max-width: 1480px){

    html,
    html.safari.desktop { font-size: 0.06756756756756757vw; }

    /* VARIABLE */
    :root { 
		--font-size-01: 68rem;

        --font-lineheight-01: 80rem;
	}

    /* HEADER */
    #header { height: 86rem; }

    #logo { top: 25rem; }

}

@media (max-width: 1200px){

    html,
    html.safari.desktop { font-size: 0.0833333333333333vw; }

    /* VARIABLE */
    :root {
        --font-size-01: 62rem;
        --font-size-02: 18rem;
        --font-size-03: 17rem;

        --font-lineheight-01: 73rem;
        --font-lineheight-02: 29rem;
        --font-lineheight-03: 28rem;

        --border-radius-01: 20rem;
    }

    /* WRAP */
    .wrap { max-width: inherit; margin-left: 40rem; margin-right: 40rem; }

    /* HEADER */
    #header { height: 80rem; }

    #logo { top: 23rem; }
    #logo > span { font-size: 20rem; }
    #logo > i { width: 22rem; height: 22rem; }

    /* ERROR */
    .error { padding: 135rem 0; }

    .error__inner h1 { margin-bottom: 36rem; }

    .error__controller { margin-top: 42rem; }

}

@media (max-width: 1023px){

    html,
    html.safari.desktop { font-size: 0.09775171065493645vw; }

    /* VARIABLE */
    :root {
        --font-size-01: 60rem;

        --font-lineheight-01: 68rem;
    }

    /* WRAP */
    .wrap { margin-left: 30rem; margin-right: 30rem; }

    /* HEADER */
    #logo { left: 24rem; }

    /* ERROR */
    .error { padding: 130rem 0; }

    .error__btn { padding: 9rem 30rem; }

}

@media (max-width: 860px){

    html,
    html.safari.desktop { font-size: 0.13020833333333335vw; }

    /* VARIABLE */
    :root {
        --font-size-01: 48rem;
        --font-size-02: 17rem;
        --font-size-03: 16rem;

        --font-lineheight-01: 56rem;
        --font-lineheight-02: 27rem;
        --font-lineheight-03: 25rem;

        --section-space: 14rem;
    }

    /* ERROR */
    .error { padding: 110rem 0; }

    .error__inner h1 { margin-bottom: 30rem; }

    .error__controller { margin-top: 38rem; }

}

@media (max-width: 540px){

    html,
    html.safari.desktop { font-size: 0.2564102564102564vw; }

    /* VARIABLE */
    :root {
        --font-size-01: 38rem;
        --font-size-02: 16rem;
        --font-size-03: 15rem;

        --font-lineheight-01: 44rem;
        --font-lineheight-02: 26rem;
        --font-lineheight-03: 24rem;

        --border-radius-01: 16rem;
        --border-radius-02: 6rem;

        --section-space: 10rem;
    }

    /* WRAP */
    .wrap { margin-left: 15rem; margin-right: 15rem; }

    /* HEADER */
    #header { height: 74rem; }

    #logo { top: 19rem; }
    #logo a > i { width: 20rem; height: 20rem; }

    /* ERROR */
    .error { padding: 90rem 0; }

    .error__inner h1 { margin-bottom: 22rem; }
    .error__inner p br { display: none; }

    .error__controller { gap: 8rem; margin-top: 24rem; }
    .error__btn { padding: 8rem 24rem; }

}