/* font */
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}
/* //font */



body {font-family: 'Pre'; background: #000000;}
.container {animation: intro2 1s 2s linear both; max-width: 950px; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box;}
section {padding-top: 50px;}

header h1, h2 {
  position: absolute;
  z-index: -9999;
  left: -9999px;
}

.cont_p {position: absolute; z-index: -9999; left: -9999px;}

/* header */
header {position: absolute; top: 0; left: 0; width: 100%; height: auto; padding: 30px 0; box-sizing: border-box; z-index: 9;}
header .container {display: flex; align-items: center; justify-content: space-between; max-width: 1320px;}
header .logo {width: 336px; height: auto;}
header .logo img {width: 100%; height: auto;}

header .sns-area {display: flex; align-items: center; gap: 50px;}
header .sns-area a {display: flex; align-items: center; font-size: 18px; font-weight: 400; line-height: 1.67;}
header .sns-area a img {width: 21px; height: auto; margin-right: 5px;}
header .sns-area a span {}
header .sns-area a span[data-name="kakao"] {color: #f9e000;}
header .sns-area a span[data-name="tel"] {color: #00d96c;}

.visual {position: relative; width: 100%; height: 700px;}
.visual .img-box {width: 100%; height: 100%;}
.visual .img-box img {width: 100%; height: 100%; object-fit: cover;}
.visual .txt-box {position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); width: 100%;}

.visual .txt-box .sub {margin-bottom: 29px; font-size: 30px; font-weight: bold; line-height: 1.2; color: #fff; text-align: center;}
.visual .txt-box .kv-logo {width: 232px; height: auto; margin: 0 auto 20px;}
.visual .txt-box .kv-logo img {animation: heartbeat 1.5s ease-in-out infinite both; width: 100%; height: auto;}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
.visual .txt-box .txt {margin-bottom: 70px; font-size: 40px; font-weight: bold; line-height: 1.2; color: #fff; text-align: center;}
.visual .txt-box .point {display: flex; align-items: center; justify-content: space-between; gap: 105px;}
.visual .txt-box .point li {font-size: 24px; font-weight: 200; line-height: 1.17; color: #fff;}

/* .link_sec {padding-top: 50px;} */
.link_sec .sec-tit {margin-bottom: 50px; font-size: 18px; font-weight: 300; line-height: 1.67; color: #fff; text-align: center;}
.link_sec .sec-link {display: flex; align-items: center; justify-content: center; gap: 10px;}
.link_sec .sec-link a {width: 100%;}
.link_sec .sec-link a img {width: 100%; height: auto;}
.link_sec2 {padding-bottom: 112px;}

section .img-box {width: 100%; height: auto;}
section .img-box img {width: 100%; height: auto;}


@keyframes intro2 {
  0% {opacity: 0;}
  90% {opacity: 1;}
}
/*  */
.mo {display: none;}

.intro {animation: intro 1s 3s linear both; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 9999; background: rgba(0, 0, 0, 0.7);}
@keyframes intro {
  0% {opacity: 1;}
  90% {opacity: 0;}
  100% {z-index: -9999;}
}
.intro .intro-img {animation: car 2s linear both; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: auto;}
@keyframes car {
  0% {transform: translate(-193%, -50%);}
  30% {transform: translate(-80%,-50%);}
  30% {transform: translate(-74%, -50%) rotate(17deg);}
  50% {transform: translate(-50%, -50%)}
  80% {transform: translate(-50%, -50%)}
  90% {transform: translate(100%,-50%);}
  100% {transform: translate(114%, -50%);}
}
.intro .intro-img img {width: 100%; height: auto;}