/* 
---------------------------------------------
Intro
--------------------------------------------- 
*/
.video-box { width: 100%; height: 100vh; }
.video-box > video { width: 100%; height: 100%; }
.video-box > .skip-box { width: 100%; height: 60px; position: absolute; bottom: 60px; }
.video-box > .skip-box > img.button-skip { width: 102px; height: 60px; display: block; margin:0 auto; content: url('/images/btn-skip.png'); }
.video-box > .skip-box > img.button-skip:hover { cursor: pointer; content: url('/images/btn-skip-hover.png'); }

/* 
---------------------------------------------
Home(index)
--------------------------------------------- 
*/
.main-banner-box { background-image: url('/images/main-banner.jpg'); background-size: cover; background-repeat: no-repeat; width: 100%; height: 850px; position: relative; }
.main-banner-box > div.subtext-box { position: absolute; bottom: 24%; width: 100%; left: 50%; transform: translateX(-50%); max-width: 1280px; }
.main-banner-box > div.subtext-box > p { font-size: 24px; color: #0043E3; font-weight: 500; line-height: 27.48px; }
.main-banner-box > div.subtext-box > p > span { font-weight: 800; }

.section { padding-top: 144px; padding-bottom: 163.5px; background: rgba(154, 154, 154, 0.2); }
.section .container div.button-box { height: 120px; }
.section .container div.button-box img.button-arrow { width: 120px; height: 120px; content: url('/images/btn-arrow.png'); }
.section .container div.button-box img.button-arrow:hover { cursor: pointer; content: url('/images/btn-arrow-hover.png'); }
.section .container div.button-box span.more { font-size: 15px; font-weight: 500; color: #000155; padding-left: 20.25px; }

#section1 { border-top-left-radius: 75px; border-top-right-radius: 75px; backdrop-filter: blur(60px); margin-top: -66px; position: relative; }
#section1 .container div.text-box span { color: #000155; }
#section1 .container div.text-box p.title { font-size: 52.5px; line-height: 52.5px; font-weight: 500; font-family: GT Walsheim Trial; }
#section1 .container div.text-box p.title.top { margin-top: 41.25px; }
#section1 .container div.text-box p.title.bottom { margin-bottom: 33px; }
#section1 .container div.text-box p.description { font-family: IBM Plex Sans KR; font-size: 22.5px; font-weight: 500; line-height: 36.75px; word-break: keep-all; }
#section1 > div.scroll-box { position: absolute; top: 24px; left: 50%; transform: transLateX(-50%); }
#section1 > div.scroll-box > span { font-family: GT Walsheim Trial; font-size: 15px; font-weight: 300; line-height: 17px; text-align: center; color: #0053D8; }
#section1 > div.scroll-box > img { display: block; margin: 0 auto; margin-top: 7.5px; }

.section .container div.product-box { margin-top: 34px; }
.section .container div.product-box div.title { margin-bottom: 12px; }
.section .container div.product-box div.title span { font-family: GT Walsheim Trial; font-size: 51px; font-weight: 500; line-height: 58.395px; color: #000155; }
.section .container div.product-box div.introduce-box { display: flex; }
.section .container div.product-box div.introduce-box > img { width: 385.15px; height: 320.25px; border-radius: 45px; }
.section .container div.product-box div.introduce-box > div { width: 100%; position: relative; }
.section .container div.product-box div.introduce-box > div > p { position: absolute; bottom: 0; left: 46.85px; font-family: IBM Plex Sans KR; font-size: 18.75px; font-weight: 500; line-height: 36.75px; letter-spacing: -0.02em; color: #000155; word-break: keep-all; }
#section3 { padding-bottom: 22vw; }

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/
@media (min-width: 576px) {
  .main-banner-box > div.subtext-box { max-width: 540px; }
}

@media (min-width: 768px) {
  .main-banner-box > div.subtext-box { max-width: 720px; }
}

@media (min-width: 992px) {
  .main-banner-box > div.subtext-box { max-width: 960px; }
}

@media (min-width: 1200px) {
  .main-banner-box > div.subtext-box { max-width: 1140px; }
}

@media (min-width: 1300px) {
  .main-banner-box > div.subtext-box { max-width: 1280px; }
}

@media (max-width: 1299px) {
  .main-banner-box > div.subtext-box { bottom: 14%; }
  .main-banner-box > div.subtext-box > p { font-size: 22px; }

  .section { padding-bottom: 100px; }
  .section .container div.button-box { height: 100px; }
  .section .container div.button-box img.button-arrow { width: 100px; height: 100px; }
  .section .container div.button-box span.more { font-size: 14px; }
  #section1 .container div.text-box p.title.top { margin-top: 30px; }
  #section1 .container div.text-box p.title.bottom { margin-bottom: 30px; }
  #section1 .container div.text-box p.title { font-size: 45px; line-height: 48px; }
  #section1 .container div.text-box p.description { font-size: 19px; line-height: 28px; }
  .section .container div.product-box div.title span { font-size: 46px; line-height: 46px; }
  .section .container div.product-box div.introduce-box > img { width: 350px; height: 291px; }
  .section .container div.product-box div.introduce-box > div > p { left: 37px; font-size: 17.5px; line-height: 33px; }
}

@media (max-width: 1199px) {
}

@media (max-width: 991px) {
}

@media (max-width: 767px) {
  .main-banner-box { height: 600px; }
  .main-banner-box > div.subtext-box > p { font-size: 18px; }

  .section { padding-bottom: 50px; }
  .section .container div.button-box { height: 80px; }
  .section .container div.button-box img.button-arrow { width: 80px; height: 80px; }
  .section .container div.button-box span.more { font-size: 13px; padding-left: 16.25px; }
  #section1 .container div.text-box p.title.top { margin-top: 28px; }
  #section1 .container div.text-box p.title { font-size: 38px; line-height: 42px; }
  #section1 .container div.text-box p.description { font-size: 17px; line-height: 26px; }
  .section .container div.product-box { margin-top: 28px; }
  .section .container div.product-box div.title span { font-size: 38px; line-height: 38px; }
  .section .container div.product-box div.introduce-box { flex-direction: column; }
  .section .container div.product-box div.introduce-box > div > p { left: 0; position: inherit; line-height: 29px; margin-top: 26px; font-size: 16.5px; }
}

@media (max-width: 575px) {
  .main-banner-box > div.subtext-box > p { text-align: center; }

  .section { padding-bottom: 10px; padding-top: 130px; }
  .section .container { padding-left: 10%; padding-right: 10%; }
  .section .container div.button-box { height: 70px; }
  .section .container div.button-box img.button-arrow { width: 70px; height: 70px; }
  .section .container div.button-box span.more { font-size: 12px; padding-left: 12.25px; }
  #section1 { border-top-left-radius: 45px; border-top-right-radius: 45px; }
  #section1 .container div.text-box p.title { font-size: 32px; line-height: 36px; }
  #section1 .container div.text-box p.description { font-size: 17px; line-height: 26px; }
  #section1 .container div.text-box p.title.top { margin-top: 22px; }
  .section .container div.product-box { margin-top: 22px; }
  .section .container div.product-box div.title span { font-size: 32px; line-height: 34px; }
  .section .container div.product-box div.introduce-box > img { width: 100%; height: 100%; }
}