@charset "UTF-8";
*{ scroll-behavior: smooth;}

html, body { width: 100%; height: 100%; max-width: 2560px; max-height: 1600px; margin: 0 auto; background: #111; font-family: 'Noto Sans KR'; }
#wrap {width: 100vw; height: auto; max-width: 2560px; margin: 0 auto; background: #fefefe; } 

h1,
h2,
h3 { line-height: .9em; }
h4,
h5,
p { line-height: 1.25em; }

h1,
h3 { font-family: 'Mulish'; font-weight: 700; }

h2,
h4 { font-weight: 600; }

h1 { font-size: 100px; }
h2 { font-size: 80px; font-family: 'Noto Sans KR'; text-transform: uppercase; }
h3 { font-size: 40px; color: #879BCD; }
h4 { font-size: 20px; }
h5, p { font-size: 16px; font-weight: 400; }

.title-con{ margin-bottom: 80px; }
.title-con.nobt{ margin-bottom: 0; }
.title-con > * { position: relative; }
.title-con.center{ text-align: center; } 
.title-con.right{ text-align: right; }

.title-con h2 { margin-top: 10px; }
.title-con h4 { margin-top: 31px; }
.title-con h5,
.title-con p { margin-top: 34px; }

.title-con.white h2,
.title-con.white h4,
.title-con.white h5,
.title-con.white p { color: #fefefe; }

ul.v-con { width: calc(100% + 40px); margin: 0 -20px -40px; position: relative; }
ul.v-con li.cells { position: relative; display: inline-block; margin: 0 20px 40px; vertical-align: top; }
ul.v-con li.cells.box { position: relative; }
ul.v-con.one-con > li.cells { width: calc(100% - 40px); }
ul.v-con.two-con > li.cells { width: calc(50% - 40px); }
ul.v-con.three-con > li.cells { width: calc(33.333% - 40px); }
ul.v-con.four-con > li.cells { width: calc(25% - 40px); }
ul.v-con.five-con > li.cells { width: calc(20% - 40px); }
ul.v-con.six-con > li.cells { width: calc(16.666% - 40px); }

.swiper-scrollbar { background-color: #8899c2; }
.swiper-button-next { transform: translate(60px, -40px); color: #8899c2; }
.swiper-button-next:after { display: none; }
.swiper-button-next span{ font-size: 50px; }

.sections { position: relative; }
.pr-inner { width: 1520px; margin: 0 auto; padding: 160px 0; min-width: 360px; position: relative; }

#header { background-color: rgba(1, 1, 1, .5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
#header:hover { background-color: rgba(1, 1, 1, .8); }

#meta img { background-color: #3282FF; padding-top: 92px; width: 100%; }
#meta .metadefender {display: block;}
#meta .metadefender-m { display: none; }

/*responsive*/
@media screen and (min-width: 1921px){

}

@media screen and (min-width: 1521px) and (max-width: 1920px){
  #wrap {max-width: 1920px;}
}

@media screen and (min-width: 1001px) and (max-width: 1520px){
  @keyframes bar {
    0%{ right: 590px; }
    10%{ opacity: 1; right: 570px; }
    30%{ right: 510px; }
    85%{ opacity: 1; right: -20px; }
    100%{ opacity: 0; }
  }
  #wrap {max-width: 1520px;}
  .pr-inner { width: 85%; padding: 120px 0; }
  h2 { font-size: 60px; }
  h3 { font-size: 30px; }
  .swiper-button-next { transform: translate(60px, 103px); color: #8899c2; }

}

@media screen and (min-width: 721px) and (max-width: 1000px) {
  @keyframes bar {
    0%{ right: 470px; }
    10%{ opacity: 1; right: 450px; }
    30%{ right: 390px; }
    76%{ opacity: 1; right: -20px; }
    100%{ opacity: 0; }
  }
  #wrap {max-width: 1000px;}
  .pr-inner { width: 85%; padding: 120px 0; }
  h1 { font-size: 80px; }
  h2 { font-size: 45px; }
  h3 { font-size: 30px; }
  h4 { font-size: 20px; font-weight: 600; }
  h5, p { font-size: 16px; font-weight: 400; }
  .title-con h5,
  .title-con p { margin-top: 24px; }
  .swiper-button-next { transform: translate(60px, 91px); color: #8899c2; }
}

@media screen and (min-width: 0px) and (max-width: 720px) {
  #wrap { max-width: 720px;}
  .pr-inner { width: calc(100vw - 60px); padding: 80px 0; }
  h1 { font-size: 60px ; }
  h2 { font-size: 40px; }
  h3 { font-size: 20px; }
  h4 { font-size: 16px; }
  h5, p { font-size: 14px; }
  .title-con { text-align: center; margin-bottom: 40px; }
  .title-con h2 { margin-top: 10px; }
  .title-con h4 { margin-top: 31px; }
  .title-con h5,
  .title-con p { margin-top: 14px; }
  ul.v-con { width: calc(100% + 20px); margin: 0 -10px -20px; position: relative; }
  ul.v-con li.cells { margin: 0 10px 20px; }
  ul.v-con li.cells.box { position: relative; }
  ul.v-con.one-con > li.cells { width: calc(100% - 20px); }
  ul.v-con.two-con > li.cells { width: calc(50% - 20px); }
  ul.v-con.three-con > li.cells { width: calc(33.333% - 20px); }
  ul.v-con.four-con > li.cells { width: calc(25% - 20px); }
  ul.v-con.five-con > li.cells { width: calc(20% - 20px); }
  ul.v-con.six-con > li.cells { width: calc(16.666% - 20px); }
  .swiper-button-next { transform: translate(25px, 56px); color: #8899c2; }
}


/*430-1000*/
@media screen and (min-width: 0px) and (max-width: 1000px) {

  #meta img { background-color: #3282FF; padding-top: 80px; width: 100%; }
  #meta .metadefender {display: none;}
  #meta .metadefender-m { display: block; }

}
/*responsive end*/