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

/* [S] 기본속성 - 프로젝트 셋팅 이후 작성된 속성 수정금지 */
:root {
  --basic-font-family: 'Pretendard Variable', Pretendard, sans-serif, '돋움', Dotum;
  --basic-font-size: 17px;
  --basic-line-height: 1.5;
  --basic-color: #474748;

  /* font 사용되는 폰트만 추가 */
  --f-12: 12px;
  --f-13: 13px;
  --f-14: 14px;
  --f-15: 15px;
  --f-16: 16px;
  --f-17: 17px; /* 기본폰트 사이즈 */
  --f-18: 18px;
  --f-19: 19px;
  --f-20: 20px;
  --f-21: 21px;
  --f-22: 22px;
  --f-23: 23px;
  --f-24: 24px;
  --f-25: 25px;
  --f-26: 26px;
  --f-28: 28px;
  --f-30: 30px;
  --f-32: 32px;
  --f-35: 35px;
  --f-40: 40px;
  --f-43: 43px;
  --f-44: 44px;
  --f-45: 45px;
  --f-46: 46px;
  --f-50: 50px;
  --f-60: 60px;
  --f-62: 62px;
  --f-64: 64px;
  --f-70: 70px;
  --f-75: 75px;
  --f-80: 80px;
  --f-86: 86px;
  --f-90: 90px;
  --f-95: 95px;
  --f-105: 105px;
  --f-126: 126px;
  --f-150: 150px;

  /* color 사용되는 컬러만 추가 */
  --C-000000: #000000;
  --C-000000-10: rgba(0, 0, 0, 0.1);
  --C-000000-50: rgba(0, 0, 0, 0.5);
  --C-ffffff: #ffffff;
  --C-ffffff-50: rgba(255, 255, 255, 0.5);
  --C-999999: #999999;
  --C-737380: #737380;
  --C-f6faf2: #f6faf2;
  --C-f4f4f4: #f4f4f4;
  --C-45474d: #45474d;
  --C-474748: #474748;
  --C-aaaab2: #aaaab2;
  --C-aaaab3: #aaaab3;
  --C-000b17: #000b17;
  --C-bdbdc9: #bdbdc9;
  --C-33373f: #33373f;
  --C-6b3758: #6b3758;
  --C-511e3f: #511e3f;
  --C-19212d: #19212d;
  --C-f66fd6: #f66fd6;
  --C-ff77b9: #ff77b9;
  --C-bcb2ae: #bcb2ae;
  --C-f8f8f8: #f8f8f8;
  --C-111113: #111113;
  --C-a93297: #a93297;
  --C-ffb5e8: #ffb5e8;
  --C-3bbc1d: #3bbc1d;
  --C-a1cc8f: #a1cc8f;
  --C-376b2b: #376b2b;
  --C-f5e3ff: #f5e3ff;
  --C-ffe9e5: #ffe9e5;
  --C-ebdfe5: #ebdfe5;
  --C-ea6753: #ea6753;
  --C-a0466a: #a0466a;
  --C-f172ac: #f172ac;
  --C-f27bb2: #f27bb2;
  --C-e3e3e3: #e3e3e3;
  --C-f0f0f0: #f0f0f0;
  --C-e46ea4: #e46ea4;
  --C-f3fbfc: #f3fbfc;
  --C-04cad7: #04cad7;
  --C-00abb6: #00abb6;
  --C-9ff9ff: #9ff9ff;

  /* 추가 */
  --C-e7538a: #e7538a;
  --C-fff8f6: #fff8f6;
  --C-98214e: #98214e;
  --C-e7a8bf: #e7a8bf;
  --C-e75077: #e75077;
  --C-f77a16: #f77a16;
  --C-bd6988: #bd6988;
  --C-222222: #222222;
  --C-f9e0e9: #f9e0e9;
  --C-ffc7ee: #ffc7ee;
  --C-f25ace: #f25ace;
  --C-fcf7ff: #fcf7ff;
  --C-542041: #542041;
  --C-db26b0: #db26b0;
  --C-ff8b2f: #ff8b2f;
  --C-8a3004: #8a3004;
  --C-fffef5: #fffef5;
  --C-ffc08e: #ffc08e;
  --C-ff7f1a: #ff7f1a;
  --C-ff923b: #ff923b;
  --C-e66500: #e66500;
  --C-ffe3e9: #ffe3e9;
  --C-f56077: #f56077;
  --C-961099: #961099;
  --C-fbf5ff: #fbf5ff;
  --C-eaadeb: #eaadeb;
  --C-b021b3: #b021b3;
  --C-474747: #474747;
  --C-582579: #582579;
  --C-f958c2: #f958c2;
  --C-fff7f9: #fff7f9;
  --C-722e5b: #722e5b;
  --C-ffe2f5: #ffe2f5;
  --C-e747b0: #e747b0;
  --C-fcf8ff: #fcf8ff;
  --C-b0ff9e: #b0ff9e;
  --C-4d8a18: #4d8a18;
  --C-ffdcaf: #ffdcaf;
  --C-ffc9f2: #ffc9f2;
  --C-d3d0d9: #d3d0d9;
  --C-ffe3f8: #ffe3f8;
  --C-6b41c9: #6b41c9;
  --C-fffdbd: #fffdbd;
  --C-aa8bed: #aa8bed;
  --C-a989e9: #a989e9;
  --C-ede9f7: #ede9f7;
  --C-088eff: #088eff;
  --C-7f59d4: #7f59d4;
  --C-372265: #372265;

  
  --primary-color: var(--C-f25ace);
  --secondary-color: var(--C-ffc9f2);
  --btn-color: var(--C-f66fd6);
  --swiper-active: var(--C-f25ace);
  --bg-color: var(--C-fcf7ff);
}
/* [S] 기본속성 - 프로젝트 셋팅 이후 작성된 속성 수정금지 */

/**** 0618 eye_type_photo 작업 ****/
.eye_type_photo img {max-width: 100%;}
.eye_type_photo .img {line-height: 0;}
.eye_type_photo {max-width: 960px;background: #ffe3f8;border-radius: 32px;margin: 75px auto 110px;}
.eye_type_photo ul {padding: 58px 70px 48px;display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 112px; row-gap: 27px;line-height: 1;text-align: center; letter-spacing: -1px;}
.eye_type_photo li .text strong {display: block; font-weight: 900; color:#db26b0; font-size: 25px; padding: 32px 0 17px;}
.eye_type_photo li .text p {line-height: 1.2; font-size: 20px; color: #000; font-weight: 500;}

@media (max-width: 720px) {
  .eye_type_photo {border-radius: 4.44vw;margin: 4.86vw auto 13.19vw;}
  .eye_type_photo ul {padding: 5.28vw 6.94vw 4.72vw;column-gap: 11.11vw; row-gap: 4.03vw;letter-spacing: -0.14vw;}
  .eye_type_photo li .text strong {font-size: 3.47vw; padding: 5.56vw 0 2.78vw;}
  .eye_type_photo li .text p {font-size: 2.78vw;}

}

/**********/


#wrap {
  background-color: var(--bg-color);
}

.wb_img {
  display: block;
}

.mb_img {
  display: none;
}

.C-visual {
  background: url("/include/resources/images/wb/eye/eye_theme_bg.jpg") no-repeat center 0/cover;
  overflow: hidden;
}
.C-visual .img_text {
  text-align: left;
}
@media (max-width: 720px) {
  .C-visual .img_text {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-left: 0 !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--vw40) 0;
  }
  .C-visual .img_text img {
    max-width: 90%;
  }
  .C-visual .img_text .item_02 {
    font-size: var(--vw80);
  }
}
.C-visual .img_text .item_02 {
  background: -webkit-gradient(linear, left top, left bottom, from(#582445), to(#501c3d));
  background: linear-gradient(to bottom, #582445, #501c3d);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 1;
}
.C-visual:after {
  margin: 0;
  left: 0;
  right: 0;
  -webkit-transform: none;
          transform: none;
  max-width: 100%;
  height: 60%;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(var(--bg-color)));
  background: linear-gradient(to bottom, transparent 0%, var(--bg-color) 100%);
}
.C-visual .counseling_form .btn_request {
  background-color: var(--primary-color);
}

.C-title .primary-color {
  color: var(--primary-color);
}

.eye_theme_info > .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 81px;
  width: 429px;
  text-align: center;
  margin: 0 auto;
  position: relative;
  padding: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media (max-width: 720px) {
  .eye_theme_info > .text {
    height: 11.25vw;
    width: 59.58vw;
  }
}
.eye_theme_info > .text span {
  font-size: 26px;
  color: var(--C-737380);
  line-height: 1.1;
  letter-spacing: -1px;
  position: relative;
}
@media (max-width: 720px) {
  .eye_theme_info > .text span {
    font-size: 3.61vw;
    letter-spacing: -0.14vw;
  }
}
.eye_theme_info > .text strong {
  display: block;
  font-size: 48px;
  color: var(--primary-color);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -2px;
}
@media (max-width: 720px) {
  .eye_theme_info > .text strong {
    font-size: 6.67vw;
    letter-spacing: -0.28vw;
  }
}
.eye_theme_info > .text::before {
  content: "[";
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 68px;
  color: var(--C-ffc7ee);
  font-weight: 900;
}
@media (max-width: 720px) {
  .eye_theme_info > .text::before {
    font-size: 9.44vw;
    bottom: 0;
  }
}
.eye_theme_info > .text::after {
  content: "]";
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 68px;
  color: var(--C-ffc7ee);
  font-weight: 900;
}
@media (max-width: 720px) {
  .eye_theme_info > .text::after {
    font-size: 9.44vw;
    bottom: 0;
  }
}


@media (max-width: 720px) {
  .C-inner {
    padding: 0 4.17vw;
  }
}

.operation_info {
  text-align: center;
  margin-bottom: 100px;
}
.operation_info img {
  max-width: 100%;
}
.operation_info ol {
  line-height: 1;
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 100px;
  row-gap: 88px;
  letter-spacing: -2px;
}

.operation_info .title {
  font-size: 48px;
  color: var(--C-f25ace);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 80px;
}

.operation_info .text {
  font-size: 20px;
  color: #000;
  text-align: center;
  font-weight: 500;
  line-height: 1.2;
}
.operation_info .text strong {
  display: block;
  line-height: 1;
  letter-spacing: -2px;
  font-size: 48px;
  font-weight: 800;
  color: #db26b0;
  padding: 27px 0 20px;
}
.operation_info .text p {
  letter-spacing: -0.5px;
}


@media (max-width: 720px) {
  .operation_info {
    margin-bottom: 12.5vw;
  }
  .operation_info .title {
    font-size: 6.67vw;
    margin-bottom: var(--vw40);
    letter-spacing: -0.28vw;
  }
  .operation_info .text p {
    letter-spacing: -0.07vw;
  }

  .operation_info ol {
    max-width: 83.89vw;
    column-gap: 3.75vw;
    row-gap: 8.61vw;
    letter-spacing: -0.28vw;
  }

  .operation_info .text {
    font-size: 2.78vw;
  }
  .operation_info .text strong {
    letter-spacing: -0.42vw;
    font-size: 6.67vw;
    padding: 3.75vw 0 2.78vw;
  }

}