/* 
    font-family: 'Spoqa Han Sans Neo', 'sans-serif';
    font-family: 'Arita buri';
 */

/* ===============================================================
    * Reset 
=============================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;box-sizing: border-box;line-height: 1.6;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;overflow-x: hidden;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
a {text-decoration: none; color: inherit;}
img {vertical-align: top;}
input[type="date"] {border: none;}
input[type="text"],input[type="tel"],input[type="email"],input[type="password"],input[type="search"],input[type="date"],
textarea,button {appearance: none;-webkit-appearance: none;outline:none;background: none; border: 1px solid #fff;}
button {cursor: pointer; border:none; border-radius: 0; padding: 0; margin: 0;}
select {appearance: none;-webkit-appearance: none;outline:none; border: 1px solid #fff;}
select::-ms-expand {display: none;}
* {box-sizing: border-box;}
a:link {background: none;}
a:visited {background: none;}
a:active {background: none;}

/* ===============================================================
    * Layout & Font & Width & Color
=============================================================== */
:root {
    --color1: #fff;
    --background: #3d3d3d;
}

.font1{
    font-family: 'Arita buri';
    font-weight: 500;
    font-size: 24px;
}
.font2{
    font-family: 'Spoqa Han Sans Neo', 'sans-serif';
}
.lig{ font-weight: 300;}
.reg{ font-weight: 400;}
.med{ font-weight: 500;}

body{ background-color: var(--background); overflow: hidden; overflow: hidden;color: var(--color1);}
#intro{ position: relative; width: 100%; height: 100vh; overflow: hidden;}
#intro .flex-wrap{ width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: flex-start;}
#intro .flex-wrap > a{ display: flex; align-items: center; width: 50%; height: 100%; position: relative;}
#intro .flex-wrap .img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; transition: .4s; overflow: hidden; opacity: .3;}
#intro .flex-wrap > a:hover .img{ opacity: .8;}
#intro .text-wrap{ display: flex; justify-content: space-between; align-items: center; flex-direction: column; text-align: center; left: 0; right: 0; margin: 0 auto; z-index: 100; }
#intro .text-wrap img{ padding-bottom: 30px;}
#intro .text-wrap h3{ font-size: 24px; padding-bottom: 10px;}
#intro .text-wrap h4{ font-size: 14px; padding-bottom: 10px;}
#intro .text-wrap h5{ font-size: 14px; padding-bottom: 30px;}
#intro .text-wrap p{ font-size: 14px; position: relative; display: inline-block; text-decoration: underline; text-transform: uppercase; text-underline-position: under; transition: .3s; letter-spacing: 0;}
#intro .flex-wrap > a:hover p{ letter-spacing: 0.410em;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    body{ overflow: inherit;}
    #intro{ height: auto; }
    #intro .flex-wrap{ display: block; height: auto; }
    #intro .flex-wrap > a{ display: flex; width: 100%; height: 50vh;}
    #intro .flex-wrap .img{ opacity: .6;}
    #intro .flex-wrap > a:hover .img{ opacity: .6;}
    #intro .text-wrap{ bottom: 40px;}
    #intro .text-wrap img{ padding-bottom: 20px;}
    #intro .text-wrap h3, #intro .text-wrap h4,#intro .text-wrap h5{ display: none;}
}