@charset "utf-8";
@import url('./fonts.css');

/* reset */
* {font-family: 'Pretendard', sans-serif;letter-spacing:-0.5px;outline:none;color:#181818}
html,body {width:100%;height:100%;}
body {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
img {border:none;max-width: 100%;}
html,body,ul,ol,p,h1,h2,h3,h4,h5 {margin:0;padding:0;}
a {text-decoration: none;outline:none;}
ul li, ol li {list-style: none;vertical-align: middle}
li > a {display:block;}
textarea {resize:none;}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select::-ms-expand { display: none; }
form * {border:0;outline:0;margin:0;padding:0;}
input,button,textarea {border-radius:0;-webkit-appearance: none;box-shadow: none;}
svg {overflow:hidden;width:100%;height:100%;}
table {border-collapse: collapse;}
button {border:none;background: none;cursor: pointer;}
label {cursor: pointer;display: inline-block;}
picture, picture img {display: block;}
strong, span, a {color:inherit;letter-spacing: inherit;line-height: inherit;font-size: inherit;font-family: inherit;}

/* common */
.font-din, .font-din * {font-family: 'DIN Pro';}
.font-dinCond, .font-dinCond * {font-family: 'DIN Pro Cond';font-weight: 300;letter-spacing: 0.5px;}
.content-inner {max-width: 1150px;margin:0 auto;padding:0 40px}

@media (max-width: 1400px) and (min-width: 910px) {
  body {zoom: 0.85;}
}

@media (max-width: 909px) and (min-width: 735px) {
  body {zoom: 0.7;}
}


@media (min-width: 735px) {
  .mo {display: none;}
}

@media (max-width: 734px) {
  * {word-break: keep-all;letter-spacing: -0.25px;}
  .pc {display: none;}
  .content-inner {padding:0 20px}
}

/* 인트로 로드 이미지 */
.wrap-preimg {height: 100vh;width: 100%;background: #fff;display: flex;justify-content: center;align-items: center;
  position: fixed;left:0;top:0;z-index: 9999;opacity: 1;}

@media (min-width: 735px) {
  body.load .wrap-preimg {top:-100%;transition: top 1s;}
}

@media (max-width: 734px) {
  body.load .wrap-preimg {opacity: 0;transition: 1s;z-index: -1;}
}


/* header */
header {position: fixed;left:0;top:0;z-index: 999;width:100%;box-sizing: border-box;height:85px;
  background: rgba(0,0,0,0.5);}
header nav ul {display: flex;gap:57px;align-items: center;justify-content: center;}
header nav ul li {font-family: 'DIN Pro Cond';}
header nav ul li a {display: block;font-size: 20px;color:#B9B9B9;}
header nav ul li.active a {color:#fff;}

body.main header nav ul li a {color:#fff}

@media (min-width: 735px) {
  header nav ul li a {transition: color 0.3s;}
  header nav ul li:hover a {color:#fff;}
}

@media (max-width: 734px) {
  header {height: 44px;}
  header nav ul {gap:22px;}
  header nav ul li a {font-size: 14px;}
  header nav ul li:not(.logo) a {padding:10px}
}


/* 스크롤 상단 이동 버튼 */
.wrap-scroll-btn {position: fixed;z-index:5;width: 56px;height: 56px;border-radius: 100%;background-color: rgba(255,255,255,0.3);transition: opacity 0.3s;
  right:5.5vw;bottom:122px;display: flex;justify-content: center;align-items: center;cursor: pointer;opacity:1}
.wrap-scroll-btn.hide {opacity: 0;}

@media (max-width: 734px) {
  .wrap-scroll-btn {width: 50px;height:50px;right:10px;bottom:50px;}
  .wrap-scroll-btn img {width:20px;}
}


/* footer */
footer {background: #181818;padding:41px 65px 55px 60px;}
footer * {color:#fff;}
footer .inner-wrap {display: flex;align-items: flex-start;justify-content: space-between;}
footer .wrap-left .info-thin {margin-top: 22px;}

footer .info-thin * {font-size: 20px;font-weight: 200;}
footer .info-thin strong {font-weight: 300;}
footer .info-thin p:not(:first-child) {margin-top: 5px;}

footer .sns-list {display: flex;justify-content: flex-start;align-items: center;}

footer .info * {font-size: 16px;font-weight: 300;}
footer .info p:not(:first-child) {margin-top: 7px;}

footer .copyright {font-size: 14px;font-weight: 400;margin-top: 48px;}
footer .copyright strong {font-weight: 500;}

@media (min-width: 735px) {
  footer {position: relative;z-index: 10;}
  footer .wrap-right {text-align: right;}
  footer .wrap-left .sns-list {margin-top: 36px;gap:8px;padding-left: 4px;}
  footer .info-thin * {line-height: 26px;}
  footer .info * {line-height: 21px;}
  footer .info .main-icon {margin-bottom: 21px;margin-top: 19px;display: inline-block;}
}

@media (max-width: 734px) {
  footer {padding: 19px 19px 35px 20px;}
  footer .inner-wrap {position: relative;}
  footer .sns-list {position: absolute; top:8px; right:0;}
  footer .sns-list a {padding:2px}

  footer .inner-wrap {flex-direction: column;gap:22px;}
  footer .wrap-left .info-thin {margin-top: 24px;}

  footer .info-thin * {font-size: 11px;}
  footer .info-thin p:not(:first-child) {margin-top: 5px;}

  footer .info * {font-size: 10px;}
  footer .info .main-icon {margin-bottom: 6px;}
  footer .info p:not(:first-child) {margin-top: 4px;}
  footer .copyright {font-size: 10px;margin-top: 22px;}

}