* {
  margin: 0;
  padding: 0;
  font-family: "Spoqa Han Sans Neo", "sans-serif";
  list-style: none;
  letter-spacing: -0.4px;
}

/* Fixed Nav -- start */
nav.navbar {
  position: fixed;
  width: 100%;
  top: 0;
  background-color: #fff;
  z-index: 9999;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
}

#topMessageBar-wrapper {
  width: 100%;
  max-width: 1000px;
  flex-basis: 100%;
  margin-bottom: 1rem;
}

#topMessageBar-wrapper .message {
  letter-spacing: initial;
}

#topMessageBar-wrapper + .container {
  padding-top: 0;
}

#wrap {
  margin-top: 6.6rem;
}
/* Fixed Nav -- end */

main button:disabled {
  background-color: transparent !important;
}

section article {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  color: var(--color-grey-80);
  padding: 100px;
  height: fit-content;
}

section article h1 {
  margin-bottom: 3.6rem;
  font-size: 3.8rem;
  color: var(--color-grey-80);
  font-weight: 600;
}

section article h2 {
  font-size: 2rem;
  font-weight: 300;
  color: var(--color-grey-60);
  white-space: nowrap;
}

section article p {
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-grey-80);
}

section article p strong {
  font-weight: bold;
}

section .imgs > img {
  width: 380px;
}
section .imgs > img.timesaving {
  width: 340px;
  margin-right: 40px;
}

section .mob_img {
  padding-top: 50px;
  transform: translateY(70px);
  transition: transform 400ms ease-out;
}
section .mob_img.timesaving {
  padding-top: 130px;
  transform: translateY(70px);
}
section .mob_img.moveup {
  transform: translateY(0px);
}

section article .roundbox {
  display: flex; 
  justify-content: space-between;
  border-radius: 20px;
  padding: 3rem 5rem 0;
  min-height: 500px;

  word-break: keep-all;
  white-space: nowrap;
}

section article .roundbox > div:first-child {
  padding: 10rem 2rem;
}

section article .roundbox .commentary {
  color: #9ea4aa !important;
}
section article .roundbox p.commentary {
  padding-top: 9rem;
  font-size: 1.3rem;
}

section .btn {
  font-size: 1.8rem;
  border-radius: 10px;
  white-space: nowrap !important;
}

@media (max-width: 1280px) {
  #topMessageBar-wrapper {
    max-width: 900px;
  }

  section article {
    padding: 90px;
    max-width: 900px;
  }

  section article h1 {
    font-size: 3.2rem;
  }
  section article p {
    font-size: 1.8rem;
  }

  section article .roundbox {
    padding: 1rem 3rem 0;
    min-height: 400px;
  }
  section article .roundbox > div:first-child {
    padding: 10rem 2rem 5rem;
  }

  section .imgs > img {
    width: 370px;
  }
  section .imgs > img.timesaving {
    width: 215px;
    margin-right: 0px;
  }
}

@media (max-width: 800px) {
  header {
    height: 48px;
  }

  section article {
    padding: 70px 40px;
  }

  section article h1 {
    text-align: center;
  }
  section article h2 {
    text-align: center;
  }
  section article p {
    text-align: center;
  }

  section article .roundbox {
    flex-direction: column;
    padding: 1rem 1rem 0;
  }

  section article .roundbox i p.commentary {
    padding-top: 2rem !important;
    margin: 0;
  }

  section article .roundbox > div:first-child {
    padding: 3rem 0;
  }

  section .imgs {
    text-align: center;
  } 
  section .mob_img {
    padding: 0;
  }
  section .mob_img.moveup.mob_img.timesaving {
    width: 200px;
    padding-top: 8rem;
    transform: translateY(-70px);
  }
}

@media (max-width: 550px) {
  section article {
    padding: 70px 30px;
  }

  section article h1 {
    margin-bottom: 2rem;
    font-size: 2.6rem;
  }

  section .imgs > img {
    width: 300px;
  }
}

#main {
  background-color: #0f243d;
}

#main article {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

#main div {
  color: white;
  margin-top: 28px;
  backface-visibility: hidden; /* fix for shaky animation */
}

#main div h2 {
  color: white;
  font-weight: 400;
}

#main div h1 {
  color: white;
}

#main div p {
  font-size: 30px;
  color: white;
}

#main img {
  position: relative;
  height: 280px;
  animation: bounce 0.6s infinite alternate ease-in; 
}
@keyframes bounce {
  from { transform: translate3d(0, 0, 0);}
  to { transform: translate3d(0, 50px, 0);}
}

#main a {
  padding: 18px 38px;
  margin-top: 58px;
  border-radius: 10px;
  background-color: #3beaff;
  border: none;

  animation: breathe 1.6s ease-out infinite;
}
#main a.btn-desktop {
  display: inline-block;
}
#main a.btn-mobile {
  display: none;
}

#main button {
  background: none;
  color: #0f243d;
  font-size: 18px;
  font-weight: bold;
}
@keyframes breathe {
  0% {
    box-shadow: 0 0 20px 0 rgba(59, 234, 255, 0.5);
  } 

  50% {
    box-shadow: 0 0 26px 4px rgba(59, 234, 255, 0.6);
  }

  100% {
    box-shadow: 0 0 20px 0 rgba(59, 234, 255, 0.5);
  }
}

@media (max-width: 1280px) {
  #main div {
    margin-top: 0;
  }
  #main div h1 {
    font-size: 40px;
    margin: 20px 0;
    line-height: 1.2;
  }
  #main div p {
    font-size: 16px;
  }
  #main a {
    padding: 12px 40px;
    margin-top: 50px;
  }
  #main img {
    height: 220px;
  }
}

@media (max-width: 800px) {
  #main article {
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly !important;
    height: 600px; 
  }
  #main div {
    text-align: center;
  }

  #main div h1 {
    margin-top: 0;
  }

  #main h2 > span {
    display: block;
    margin-bottom: 6px;
  }

  #main a {
    margin-top: 80px;
  }
  #main a.btn-desktop {
    display: none;
  }
  #main a.btn-mobile {
    display: inline-block;
    width: 60%;
    text-align: center;
  }

  #main img {
    height: 180px;
  }
}

@media (max-width: 400px) {
  #main div h1 {
    font-size: 3.2rem;
  }
  #main a {
    padding: 12px 20px;
  }
  #main a.btn-mobile {
    width: 80%;
  }
}

/* Section - Story */
#story, 
#brandVideo {
  background-color: #FAFBFC;
}

#story {
  margin-top: 0;
  overflow: hidden;
}

#story article {
  /* padding-right: 0; for last swiper-item to show */
  height: auto;
}

#story .swiper.contents {
  padding-top: 20px; /* spare room for card hover effect */
}

#story article > div:first-child {
  display: flex; 
  justify-content: space-between;
  align-items: center;
}
#story a.see-all {
  display: block; 
  color: var(--color-grey-60);
  font-size: 16px;
  font-weight: bold;
}
#story a.see-all span {
  vertical-align: middle;
}

#story figure {
  max-height: 300px; 
  max-width: 275px;
  border-radius: 10px;
  box-shadow: 10px 10px 30px 0 rgba(0, 0, 0, 0.1);
  overflow: auto;
  background-color: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease-out;
  margin-right: 3rem;
  margin-bottom: 4rem;
}

#story figure .figure-img {
  height: 170px; 
  background-size: cover;
  background-position: center;
}

#story figure figcaption {
  padding: 1.8rem 2rem;
}

#story figure figcaption h3.title {
  height: 4.5rem;
  line-height: 2.4rem; 
  margin-bottom: 2rem;
  color: var(--color-grey-80); 
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre-wrap;

  /* Text overflow ellipsis on two lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#story figure figcaption .tag {
  color: #9ea4aa; 
  font-weight: 500;
  font-size: 1.4rem;
}

@media (min-width: 1280px) {
  #story figure.figure:hover {
    transform: translateY(-12px); 
  }

  #story a.see-all {
    font-size: 14px;
  }
}

@media (max-width: 800px) {
  #story article {
    padding: 70px 30px;
  }

  #story article > div:first-child {
    justify-content: center;
  }

  #story h2 + div {
    display: block;
  }
  #story h1 + h1 a.see-all {
    display: none;
  }
  #story .swiper.contents + a.see-all {
    display: block !important;
    font-size: 1.3rem;
  }
}

/* patent */
#patent, #exapi, #auto, #youtube, #review {
  margin-top: 120px;
}

@media (max-width: 1280px) {
  #patent, #exapi, #auto, #youtube, #review {
    margin-top: 100px;
  }
}
@media (max-width: 550px) {
  #patent, #exapi, #auto, #youtube, #review {
    margin-top: 80px;
  }
}

#patent article {
  padding: 0 100px;
}

#patent article .roundbox {
  background-color: var(--color-grey-20);
}

@media (max-width: 1280px) {
  #patent .imgs > img {
    width: 260px;
  }
}

/* exapi */
#exapi article {
  margin: 50px auto;
  padding: 0 100px;
}

#exapi article .roundbox {
  background-color: #10243d;
}
#exapi article .roundbox * {
  color: #fff;
}

/* auto  */
#auto article {
  padding: 0 100px;
}

#auto article .roundbox {
  background-color: #10243d;
}
#auto article .roundbox * {
  color: #fff;
}

#auto article .roundbox p.commentary {
  padding-top: 0rem;
  transform: translateY(8rem);
}

#auto .overlayer {
  position: absolute !important;
  bottom: -58px !important;
  left: 50% !important;
  z-index: 1000;
  width: 500px;

  transform: translateX(-48%);
}
#auto .overlayer img {
  width: 100%;
}

@media (max-width: 800px) {
  #auto article .roundbox p.commentary {
    padding-top: 2rem;
    transform: translateY(0);
  }
}

@media (max-width: 550px) {
  #auto .overlayer {
    width: 400px;
  }
}

/* youtube */
#youtube article {
  padding: 0 100px;
}

#youtube article .roundbox {
  background-color: var(--color-grey-20);
  height: 510px;
}

#youtube .roundbox div:last-child {
  position: absolute;
  top: 100px; 
  right: 100px;
}
#youtube .roundbox div:last-child iframe {
  width: 470px;
  height: 300px;
}

@media (max-width: 1280px) {
  #youtube article .roundbox {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 640px;
  }
  #youtube .roundbox div:last-child {
    position: relative;
    top: 0; 
    right: 0;
  }
  #youtube article .roundbox > div:first-child {
    padding: 0;
    margin-bottom: 2rem;
  }
  #youtube article .roundbox > div:last-child > a {
    text-align: center !important;
  }
}

@media (max-width: 550px) {
  #youtube .roundbox div:last-child iframe {
    width: 340px;
  }
}

/* review NEW */
#review {
  background-color:#fafbfc;
}

/*
#review article {
  padding-right: 0; for last swiper-item to show 
}
*/

#review figure {
  padding: 30px 36px;
  height: 230px;
  max-width: 200px;
  border-radius: 10px;
  box-shadow: 10px 10px 30px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
  overflow: hidden;
  margin-right: 3rem;
  margin-bottom: 4rem;
}

#review figure .header p {
  color: var(--color-grey-60); 
  font-size: 1.4rem;
  text-align: start;
}
#review figure .header + p {
  color: var(--color-grey-80);
  font-size: 1.6rem;
  text-align: start;
}
#review figure .header img {
  width: 40px;
  height: 40px;
  margin-right: 1rem;
}

#review .swiper.contents {
  transform: translateX(200px);
  transition: transform 600ms ease-out;
}
.slidein {
  transform: translateX(0px) !important;
}
  
/* instruction NEW */
#instruction article {
  height: fit-content;
}

#instruction sup {
  font-size: small;
  left: -.4rem;
  top: -0.9rem;
}

#instruction .row {
  margin-top: 40px;
}

#instruction .form-check * {
  color: #9ea4aa;
}

#instruction .form-check:not(:last-child) {
  margin-bottom: 3rem;
}

#instruction label {
  opacity: 1 !important;
}

#instruction label .step .num {
  width: 7.5rem;
  padding: 2px 7px;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  text-align: center;
  color: #9ea4aa;
  border: 1px solid #9ea4aa;
  border-radius: 50px;
  font-weight: 600;
}

#instruction label .step .bar-bg {
  position:relative;
  width: 4px;
  margin-right: 2rem;
  background-color: #d9d9d9;
  border-radius: 20px;
}

/* 눌림효과 */
#instruction input[name="instruction"]:checked + label .step .num {
  color: #00a6ed;
  border: 1px solid #00a6ed;
}

#instruction input[name="instruction"]:checked + label p,
#instruction input[name="instruction"]:checked + label p * {
  color: var(--color-grey-80) !important;
}

#instruction input[name="instruction"]:checked + label .bar {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: #00a6ed;
  animation: grow 3s ease-out forwards;
  transform-origin: top;
}
@keyframes grow {
  from {
    transform: scaleY(0);
  }
}

#instruction .imgs .swiper {
  position: relative;
  margin: 0 2rem;
  height: 100%;
  border-radius: 20px;
  background-color: var(--color-grey-20);
  text-align: center;
}
#instruction .imgs .swiper-slide img {
  padding-top: 0;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: 0;
  width: 400px;
}

@media (max-width: 1280px) {
  #instruction sup {
    font-size: x-small;
    left: -.4rem;
    top: -0.7rem;
  }

  #instruction .form-check:not(:last-child) {
    margin-bottom: 1.5rem;
  }

  #instruction article p strong {
    font-size: 2rem;
  }

  #instruction .imgs .swiper {
    align-self: center;
  }

  #instruction .imgs .swiper-slide img {
    width: 330px;
  }
}

@media (max-width: 1000px) {
  #instruction article p {
    text-align: start;
  }

  #instruction .col-lg-5 {
    padding: 3rem 3rem 0;
  }

  #instruction .imgs .swiper {
    margin: 0;
  }
  #instruction .imgs .swiper-slide img {
    position: relative;
    padding-top: 3rem;
    bottom: -1.5rem;
    left: 0;
    transform: none;
  }
}

@media (max-width: 800px) {
  #instruction h1, 
  #faq h1 {
    text-align: center !important;
  }
}

@media (max-width: 550px) {
  #instruction .row {
    margin-top: 0;
  }

  #instruction .imgs .swiper-slide img {
    width: 290px;
  }

  #exapi article, #patent article, #auto article, #youtube article {
    padding: 0 20px;
  }
}

#instruction .btn-blue-fill {
  position: absolute;
  left: 50%;
  bottom: 20px;
  padding: 1.4rem;
  z-index: 100;
  width: 80%;
  border-radius: 10px;
  font-size: 1.8rem;
  font-weight: 500;
  transform: translate(-50%);

  animation: breathe2 1.6s ease-out infinite;
}
.btn-blue-fill:hover {
  color: #fff;
  background-image: linear-gradient(rgba(0, 0, 0, 0.2) 0 0);
}

@keyframes breathe2 {
  0% {
    box-shadow: 0 0 20px 0 rgba(0, 77, 240, 0.5);
  } 
  50% {
    box-shadow: 3px 3px 33px 0 rgba(0, 87, 240, 0.7);
  }
  100% {
    box-shadow: 0 0 20px 0 rgba(0, 77, 240, 0.5);
  }
}

#supposition {
  background-color: #0f243d;
  margin-top: 0;
}

#supposition article {
  color: white;
  text-align: center;
  box-sizing: border-box;
}

#supposition h1 {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 32px;
  color: white;
}

#supposition h1 span {
  color: #00a6ed;
}

#supposition .table .title {
  position: relative;
  display: flex;
  margin-top: 50px;
  --lowbar-position: 0;
  --lowbar-width: 20%;
}

#supposition .table .title:after {
  content: "";
  position: absolute;
  left: var(--lowbar-position);
  bottom: 0;
  display: block;
  width: var(--lowbar-width);
  height: 4px;
  background-color: #00a6ed;
  transition: left 0.3s;
}

#supposition .table .title li {
  flex-shrink: 1;
  padding: 20px 0;
  font-size: 24px;
  font-weight: bold;
  color: var(--color-grey-70);
  border-bottom: 2px solid white;
  cursor: pointer;
}

#supposition .table .title li.on {
  color: white;
}

#supposition .table .indicator {
  width: 100%;
  margin-top: 32px;
  padding: 32px 0;
  display: flex;
  border-radius: 5px;
  background-color: #fff;
  box-sizing: border-box;
}

#supposition .table .indicator li {
  width: 100%;
}

#supposition .table .indicator li + li {
  border-left: 1px solid var(--color-grey-40);
}

#supposition .table .indicator li h2 {
  color: #0f243d; 
  font-weight: 500;
  font-size: 20px;
}

#supposition .table .indicator li p {
  margin-top: 40px;
  font-size: 32px;
  font-weight: bold;
  color: var(--color-grey-60);
}

@media (max-width: 1280px) {
  #supposition h1 {
    font-size: 2.4rem;
    word-break: keep-all;
  }
  #supposition h2 {
    font-size: 16px;
  }
  #supposition .table .title {
    margin: 0;
  }
  #supposition .table .title li {
    min-width: 80px;
    white-space: nowrap;
    font-size: 1.8rem;
  }
  #supposition .table .title:after {
    min-width: 80px;
  }
  #supposition .table .indicator {
    padding: 16px 0;
  }
  #supposition .table .indicator li h2 {
    font-size: 16px;
  }
  #supposition .table .indicator li p {
    margin-top: 12px;
    font-size: 22px;
  }
}

@media (max-width: 600px) {
  #supposition {
    overflow: hidden;
  }
  #supposition .swiper {
    overflow: visible;
  }
  #supposition .table .title {
    box-sizing: border-box;
  }
  #supposition .table .title li {
    font-size: 17px;
    flex-shrink: 0;
  }
  #supposition .table .indicator {
    width: auto;
  }

  #supposition .table .indicator li h2 {
    font-size: 14px;
  }
  #supposition .table .indicator li p {
    font-size: 16px;
  }

  #supposition .table .indicator li + li {
    border: none;
  }
}

#membership {
  background-color: #fafbfc;
}

#membership article {
  height: fit-content;
  /* padding-right: 0; */
}

#membership button {
  width: 60%;
  padding: 1.4rem 2rem;
  color: #10243d;
  border: 1px solid #10243d;
}

#membership figure {
  padding: 2.2rem;
  height: 210px;
  max-width: 200px;
  border-radius: 20px;
  box-shadow: 10px 10px 30px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
  overflow: hidden;
  margin-right: 3rem;
  margin-bottom: 4rem;
}

#membership figure .imgbox {
  padding: 1.2rem;
  border-radius: 10px;
  background-color: var(--color-grey-20);
  width: fit-content;
}

#membership figure img {
  height: 45px;
}

#membership figure figcaption h3 {
  color: var(--color-grey-80);
  font-size: 2rem;
  margin: 1.4rem 0;
}

#membership figure figcaption h3 small {
  font-size: 1.5rem;
  font-weight: normal;
}

#membership figure figcaption p {
  color: var(--color-grey-70);
  font-size: 1.4rem;
  text-align: initial;
  font-weight: normal;
}

#membership figure figcaption p span {
  display: inline-block;
  color: #9ea4aa;
  padding-top: 1rem;
  font-size: 1.1rem;
}

#membership .swiper.contents {
  transform: translateX(200px);
  transition: transform 600ms ease-out;
}

@media (max-width: 800px) {
  #review .title,
  #membership .title {
    flex-direction: column;
    align-items: center !important;
  }
  #review article h1,
  #membership article h1 {
    margin-bottom: 1.2rem;
  }
  #review article h2,
  #membership article h2 {
    padding-left: 0 !important;
    font-size: 1.6rem;
    margin-bottom: 4rem;
  }
}

@media (max-width: 450px) {
  #review figure {
    padding: 20px 26px;
    height: 205px;
  }

  #review figure .header + p {
    font-size: 1.5rem;
  }
}

/* Section7 - FAQ */
#faq {
  margin-top: 20rem;
}

#faq article {
  padding: 100px;
}

#faq h1 {
  padding: 1.6rem 1.25rem;
}
#faq h2.accordion-header {
  white-space: initial;
}

#faq .accordion-header button {
  font-size: 2rem;
  padding: 2rem 1.25rem; 
}

#faq .accordion-body {
  font-size: 1.6rem;
  padding: 2rem;
}

.btn-faq {
  padding: 1rem 2rem;
  margin-top: 12rem;
  width: 50%;
  background-color: #0F243D;
  color: #fff !important;
  opacity: 1 !important;
  transition: all 0.1s;
}

@media (max-width: 1280px) {
  #faq .accordion-header button {
    font-size: 1.8rem;
  }
}

@media (max-width: 800px) {
  #faq {
    margin-top: 40rem;
  }

  #faq h1 {
    padding: 1.6rem 1.25rem 0;
  }

  #faq article {
    padding: 80px 16px;
  }
}

@media screen and (max-width: 450px) {
  #faq {
    margin-top: 38rem;
  }

  .btn-faq {
    margin-top: 6rem;
  }
}

/* For this page only */
#page-container {
  padding-bottom: 11.5rem; 
  overflow: hidden;
}

.navbar .container {
  padding: 1.4rem 0;
  max-width: 1000px;
}

@media (max-width: 1280px) {
  #topMessageBar-wrapper,
  .navbar .container {
    max-width: 700px;
  }
}

@media (max-width: 800px) {
  .navbar .container {
    padding: 1.4rem;
  }
}

/* Footer */
.footer {
  font-size: 1.2rem !important;
}

.footer-wrap > div a, .footer-wrap > div svg + span {
  font-size: 1.3rem !important;
}

.footer-wrap {
  max-width: 1000px !important;
}

@media (max-width: 1280px) {
  .footer-wrap {
    max-width: 700px !important;
  }
}

@media (max-width: 700px) {
  .footer {
    font-size: 1.1rem !important;
  }
  
  .footer-wrap > div a, .footer-wrap > div svg + span {
    font-size: 1.15rem !important;
  }
}