@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

:root {
  --primary : #FF985E;
  --white: #fff;
  --gray2: #E6E6E6;
  --gray4: #868686;
  --gray5: #555;
  --gray6: #343434;

  --base-space: 80px;
  --base-space-in: 90px;
  --base-height: 80px;

  --font-16: 16px;
  --font-20: 20px;
  --font-48: 48px;
  --font-56: 56px;
}

* {margin: 0; padding: 0; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; box-sizing: border-box; color: var(--gray6);}

html, body {font-size: 10px;}


a {display: flex; text-decoration: none;}
em, i {font-style: normal;}
img {max-width: 100%;}

#wrap {width: 100%; height: 100%;}
#header {position: fixed; top: 0; padding: 0 var(--base-space); width: -webkit-fill-available; height: var(--base-height); display: flex; justify-content: space-between; align-items: center; z-index: 100;}
#header button {background: none; border: 0; display: block; height: 50px;}


.header-btn-wrap { display: flex; gap: 12px;}
.header-btn-wrap a {font-size: 16px; font-weight: 500; line-height: 1.5; width: auto; height: auto; padding: 12px 32px; border: 1px solid var(--primary); border-radius: 24px;}
.btn-line {border: 1px solid var(--primary); background-color: white; color: var(--primary);}
.btn-fill {border: 1px solid var(--primary); background-color: var(--primary); color: var(--white); font-weight: 700;}
.header-btn-wrap em {color: inherit;}

h1 {font-size: var(--font-56); line-height: var(--font-56); font-weight: 700;}
h1 span {color: inherit;}
p {font-size: var(--font-20); font-weight: 300; color: var(--gray5);}
h1 > div {color: var(--primary); position: relative; display: inline-flex;}
h1 > div div {display: flex; flex-direction: row; justify-content: space-around; position: absolute; width: 100%; top: -1.6rem;}
h1 span {background-color: var(--primary); width: .8rem; height: .8rem; border-radius: .8rem; display: block;}
.h2-wrap {display: flex; gap: 20px; flex-direction: column; align-items: center; position: relative;}
.h2-wrap::after {position: absolute; content: ""; display: block; width: 1.8rem; height: 1.8rem; border-radius: 1.8rem; top: -2.4rem; background-color: var(--primary);}
h2 {font-size: var(--font-48); line-height: var(--font-48); font-weight: 700;}
h2 span {color: var(--primary);}

.weight300 {font-weight: 300 !important;}
.primary {color: var(--primary);}
.primary em {color: inherit;}
.weight300 em {font-weight: inherit;}


.section {padding-top: var(--base-height); width: 100%; min-height: 100vh; }

.section1 {position: relative; display: flex; align-items: center; justify-content: center;}
.section1-wrap {display: flex; flex-direction: row; align-items: flex-start; max-width: 1210px; margin: 0 var(--base-space); padding-top: 0;}
.section1-text-wrap {position: relative; z-index: 10; display: flex; flex-direction: column; gap: 48px; top: 15vh;}
.section1-text {display: flex; gap: 16px; flex-direction: column;}
.download-btn-wrap {display: flex; gap: 12px;}
.section1-img {position: relative; z-index: 10; top: 0;}
.section1-bg {width: 100%; padding: 0 var(--base-space); position: absolute; top: 120px;}
.section1-bg div {background: url(../images/section1_bg.svg) no-repeat center; background-size: cover; width: 100%; height: 70vh; border-radius: 40px; z-index: 1;}

.section2 {display: flex; align-items: center;}
.section2 > div {width: 1210px; display: flex; justify-content: space-between; margin: 0 auto;}
.section2-text {display: flex; flex-direction: column; align-items: center; justify-content: space-between;}

.section3 {display: flex; align-items: center;}
.section3 > div {width: 1210px; display: flex; justify-content: center; margin: 0 auto; flex-direction: column; gap: 20px;}

.section4 {background: url(../images/section4_bg.png) center no-repeat; display: flex; align-items: center; justify-content: center;    background-size: cover;}
.section4-text {display: flex; flex-direction: column; align-items: center; gap: 20px;}
.section4 h1 {color: var(--white);}


.footer {padding: var(--base-space);}
.footer h1 {font-size: 24px; color: var(--primary);}
.footer div {padding-bottom: 12px;}
.footer div div {display: flex;}
.footer h6 {font-size: 20px; font-weight: 500;}
.footer h6 span {font-weight: 400; color: var(--gray4); display: inline-block; padding-right: 4px;}
.footer h6::after {width: 1px; height: 12px; background: var(--gray2); content: ""; display: inline-block; margin: 0 10px;}
.footer h6:last-child::after {display: none;}
.footer p {font-size: 15px;}




.center .slick-center h3 {
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  opacity: 1;
  transform: scale(1.1);
}
.center h3 {
  opacity: 0.8;
  transition: all 300ms ease;
  padding: 40px 0 20px;
}
.center h3 span {display: flex; justify-content: center; background: url(/images/picker_gray.svg) center no-repeat;}
.center .slick-center h3 span {background-image: url(/images/picker_primary.svg);}

.slick-arrow {border: 0; background: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 140px; height: 140px; color: transparent; cursor: pointer;}
.slick-prev.slick-arrow {left: -140px; background: url(/images/arrow-l.svg) center no-repeat;}
.slick-next.slick-arrow {right: -140px; background: url(/images/arrow-r.svg) center no-repeat;}


@media (max-width: 1356px) {
  .section1-text-wrap {top: 6vw;}
}

@media (max-width: 1330px) {

}


@media (max-width: 820px) {
  :root {
    --base-space: 16px;
    --base-space-in: 16px;
    --base-height: 60px;

    --font-16: 14px;
    --font-20: 20px;
    --font-48: 24px;
    --font-56: 24px;
  }
  #header h1 {width: 64px;}


  /* .section1 {align-items: flex-start;} */
  .section1-wrap {flex-direction: column-reverse; align-items: center; padding-top: 0;}
  .section1-img {width: 70%;}
  .section1-bg {top: 80px;}
  .section1-bg div {height: 56vh;}

  .section1-text-wrap {gap: 32px;}
  
  .header-btn-wrap { gap: 2px;}
  .header-btn-wrap a {padding: 1.2rem .6rem; font-size: 1rem;}

  .h2-wrap {gap: 8px; width: 90%;}
  .h2-wrap::after {width: 4px; height: 4px; top: -16px;}
  .h2-wrap p {text-align: center;}

  .section2 > div { width: 100%; min-height: inherit; position: relative;}
  .section2-img {position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;} 
  .section2-img img {width: 40%;}
  .section2-text {justify-content: space-around; }

  .section3 > div { width: 100%; min-height: inherit; position: relative;}

  .section4-text img {width: 30%;}

  .footer h1 {padding-bottom: 12px; font-size: 18px;}
  .footer h6 {font-size: 14px;}
  .footer h6::after {display: none;}
  .footer p {font-size: 12px;}
  .footer div div {flex-direction: column;}

}

@media (max-width: 620px) {
  .section1-img {width: 70%;}
  .center h3 {padding: 30px 0 10px;}

}


.en {display: none !important;}
.lang .en {display: inline-block !important;}
.lang .kr {display: none;}
.lang .footer .en {display: block !important;}


body.lang-en .kr {display: none;}
body.lang-en .en {display: inline-block !important;}
body.lang-en .footer .en {display: block !important;}

body.lang-en #translate {display: none;}

/* slick */
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}