@charset 'UTF-8';

section {
    position: relative;
    padding-block: clamp(80px, 9.4vw, 110px);
    text-align: center;
}

.container {
    width: calc(100% - 200px);
    max-width: 1720px;
    margin: 0 auto;
    transition: 0.3s;
}

/* header */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding-block: clamp(15px, 2vw, 18px);
    z-index: 99;
    background-color: var(--white-color);
    border-bottom: 1px solid #c5c5c5;
    transition: top .8s cubic-bezier(0.22, 1, 0.36, 1);
}

header.hide {
    top: -18%;
}

header .container {
    max-width: 1340px;
}

header .container {
    justify-content: space-between;
    gap: 10vw;
}

header nav ul {
    gap: 5vw;
}

header * {
    font-size: var(--font-30);
}

.bold {
    font-weight: 600;
    color: inherit;
}

/* ==================================================
assets
================================================== */
.top-btn {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 100;
    width: clamp(46px, 3.5vw, 50px);
    height: clamp(46px, 3.5vw, 50px);
    border-radius: 50%;
    background-color: var(--purple-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.4s,
        filter 0.3s;
}

.top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.top-btn__arrow {
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 auto;
    border-top: 2px solid var(--white-color);
    border-right: 2px solid var(--white-color);
    transform: translateY(2px) rotate(-45deg);
}

.top-btn:hover {
    filter: brightness(1.08);
}

.star-ico {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 24px;
    background: url(../images/icon/dia-ico.png) no-repeat center/contain;
    margin-top: 5vw;
}

.flower-ico {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: url(../images/icon/flower-ico.png) no-repeat center / contain;
    --w: 89;
    --h: 90;
}

.radius-box {
    display: inline-block;
    border-radius: 40px;
    color: var(--white-color);
    background-color: var(--purple-color);
}

.column__line {
    position: relative;
    width: 1px;
    height: 40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--black-color);
    margin-bottom: 2.1vw;
}

.gra-purple-box>* {
    background: linear-gradient(160deg, #8563B7 0%, #5F4783 100%);
    color: var(--white-color);
    border-radius: 10px;
    padding-block: 1.4vw;
}


/* ==================================================
hero
================================================== */
#hero {
    background: url(../images/section/hero/hero-bg.png) no-repeat center/cover;
    overflow: hidden;
}

#hero .star-ico  {
    margin-top: 3vw;
}
.hero__text {
    position: relative;
    z-index: 1;
}

.hero__image {
    top: 64%;
    left: -22px;
    transform: translateY(-50%);
    background: url(../images/section/hero/hero-img.png) no-repeat center/contain;
    --w: 484;
    --h: 362;
    z-index: 0;
}

.hero__image--02 {
    left: auto;
    right: -12%;
    top: 50%;
    background-image: url(../images/section/hero/hero-img-2.png);
    z-index: 1;
    --w: 832;
    --h: 434;
}

.hero__para.hero__para--1 {
    position: relative;
    margin-block: 2vw 2.92vw;
    font-size: var(--font-72);
    line-height: 1.3;
    font-weight: 300;
}

.hero__para.hero__para--2 {
    font-size: var(--font-32);
}

.hero__para.hero__para--3 {
    font-size: var(--font-30);
    line-height: 1.3;
    margin-block: clamp(30px, 2.6vw, 50px);
}

.hero__para.hero__para--3 .purple-color {
    font-family: var(--ff-MaruBuri);
    letter-spacing: -4px;
}

.hero__box-wrap {
    justify-content: center;
    gap: 25px 20px;
    max-width: 940px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.hero__box-wrap>.hero-box {
    width: calc(((100% / 3)) - 50px);
    font-family: var(--ff-MaruBuri);
    font-size: var(--font-20);
    line-height: 1.4;
}

.auto-year {
    font-family: inherit;
}

/* ==================================================
invisalign
================================================== */
#invisalign {
    background: url(../images/section/invisalign/invisalign-bg.png) no-repeat center/cover;
}

.invisalign__flower-text {
    font-size: var(--font-36);
    margin-top: 16px;
}

.invisalign .top__para-1 {
    font-size: var(--font-40);
    margin-block: 3vw 1vw;
}

.invisalign .top__para-2 {
    font-size: var(--font-72);
}

.invisalign-title {
    font-size: var(--font-30);
    padding: 6px 20px 5px;
    margin-top: 2.32vw;
}

.invisalign .center__bg,
.angel .center__bg {
    background: url(../images/section/invisalign/invisalign-img.png) no-repeat center -630px/cover;
    width: 1200px;
    height: 425px;
    margin: 3vw auto 0;
    border-radius: 10px;
}

.invisalign .bottom__box-wrap {
    max-width: 1060px;
    margin: 3vw auto;
    justify-content: space-between;

}

.invisalign .bottom__box {
    display: flex;
    justify-content: center;
    gap: 5px;
    width: calc((100% /5) - 20px);
    font-size: var(--font-36);
    font-weight: 100;
}

.invisalign .bottom__para-1,
.invisalign .bottom__para-2 {
    font-size: var(--font-28);
    line-height: 1.2;
}

.invisalign .bottom__para-2 {
    margin-top: 1.5vw;
}

/* ==================================================
special
================================================== */
.ui-d2 .container>div {
    width: 50%;
}

.ui-d2 h2 {
    font-size: var(--font-48);
    line-height: 1.2;
    margin-block: 1.2vw 2.4vw;
}

.ui-d2 .left {
    display: grid;
    place-items: center;
}

.ui-d2 .left__img {
    background: url(../images/section/special/special-img.png) no-repeat center/contain;
    --w: 555;
    --h: 540;
    margin: 0 auto;
}

.ui-d2 .right {
    text-align: left;
    max-width: 700px;
}

.ui-d2 .right .star-ico {
    left: 0;
    transform: none;
}

.check-list-box {
    background-color: #F7F6F9;
    border-radius: 10px;
    padding: 2.6vw 1.75vw;
}

.check-list-box>li {
    position: relative;
    font-size: var(--font-24);
    line-height: 1.2;
    padding-left: 2.75vw;
    margin-left: 0.5vw;
    font-weight: 300;
}

.check-list-box>li:before {
    position: absolute;
    left: 0;
    content: '';
    display: block;
    width: 25px;
    height: 21px;
    background: url(../images/icon/check-ico.png) no-repeat center/contain;
}

.check-list-box>li:not(:first-child) {
    margin-top: 1vw;
}

.check-list-box>li span {
    font-weight: 500;
}



/* ==================================================
how
================================================== */
.ui-d3 h2 {
    font-size: var(--font-64);
    line-height: 1.25;
}

.para--2 {
    font-size: var(--font-24);
    font-weight: 300;
    border: 1px solid;
    padding-block: 7px 5px;
    max-width: 980px;
    margin: 2.6vw auto 2vw;
}

.ui-d3-top {
    position: relative;
    padding-top: 5vw;
}

.ui-d3-top:before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    content: '';
    display: block;
    width: min(calc(var(--w) * 1px), calc(var(--fluid) * var(--w)));
    height: min(calc(var(--h) * 1px), calc(var(--fluid) * var(--h)));
    --w: 225;
    --h: 225;
    background: url(../images/icon/teeth-ico.png) no-repeat center/contain;
}

.ui-d3-bottom {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
    margin-top: 85px;
}

.ui-d3-box {
    position: relative;
    width: calc((100% / 4) - 120px);
    background-color: var(--purple-color);
    border-radius: 10px;
    padding-block: 3.2vw 2vw;
}

.ui-d3-box * {
    color: var(--white-color);
    font-weight: 100;
}

.ui-d3-box-title {
    font-size: var(--font-24);
    font-family: var(--ff-MaruBuri);
    margin-block: 1vw;
}

.ui-d3-box-desc {
    font-size: var(--font-20);
    line-height: 1.3;
}

.ui-d3-box .ico {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    width: 85px;
    height: 85px;
    background-color: #fff;
    border: 2px solid var(--purple-color);
    border-radius: 50%;
}

.ui-d3-box .ico:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
    display: block;
    width: min(calc(var(--w) * 1px), calc(var(--fluid) * var(--w)));
    height: min(calc(var(--h) * 1px), calc(var(--fluid) * var(--h)));
    --w: 45;
    --h: 42;
}

.ui-d3-box.box-1 .ico:after {
    background: url(../images/icon/how-ico-1.png) no-repeat center/contain;
    --w: 41;
}

.ui-d3-box.box-2 .ico:after {
    background: url(../images/icon/how-ico-2.png) no-repeat center/contain;
    --w: 39;
    --h: 48;
}

.ui-d3-box.box-3 .ico:after {
    background: url(../images/icon/how-ico-3.png) no-repeat center/contain;
}

.ui-d3-box.box-4 .ico:after {
    background: url(../images/icon/how-ico-4.png) no-repeat center/contain;
    --w: 51;
    --h: 39;
}

.ui-d3-box.box-5 .ico:after {
    background: url(../images/icon/how-ico-5.png) no-repeat center/contain;
    --w: 52;
    --h: 28;
}


/* ==================================================
angel
================================================== */
#angel,
#difference {
    background: url(../images/section/angel/angel-bg.png) no-repeat center/cover;
}

#angel .top__para-1 {
    font-size: var(--font-40);
}

#angel .top__para-2 {
    font-size: var(--font-72);
    margin-block: 1.2vw 2.9vw;
}

#angel .top__para-3 {
    font-size: var(--font-28);
}

#angel .center__bg {
    background-image: url(../images/section/angel/angel-img.png?ver=2);
    background-position-y: -275px;
}

.angel__bottom * {
    font-size: var(--font-28);
    font-weight: 300;
}

#angel .bottom__para-1 {
    margin-block: 4.2vw 1.5vw;
}



/* ==================================================
angel-s
================================================== */
.angel-s .left__img {
    background-image: url(../images/section/angel/angel-ortho-img.png);
}

.angel-s .point-color {
    color: #183746;
}


/* ==================================================
difference
================================================== */
#difference {
    overflow: hidden;
}

#difference::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -1px;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 2;
    transition: left 2.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#difference.is-revealed::after {
    left: 100%;
}

#difference .top__para-1 {
    font-size: var(--font-40);
}

#difference .top__para-2 {
    font-size: var(--font-72);
    margin-top: 1vw;
}

#difference .top__para-3 {
    font-size: var(--font-28);
    margin-block: 2.4vw 2.8vw;
    line-height: 1.2;
}

.difference__bottom {
    gap: 25px;
}

.difference__bottom * {
    color: var(--white-color);
    font-weight: 300;
}

.difference__bottom>div {
    border-radius: 10px;
    min-width: 490px;
}

.difference__bottom .bottom__left {
    background-color: #735F91;
}

.difference__bottom .bottom__right {
    background-color: var(--purple-color);
}

.difference__bottom .bottom__title {
    font-family: var(--ff-MaruBuri);
    font-size: var(--font-28);
    text-align: left;
    padding-left: 1.5vw;
    margin: 1.9vw 1.2vw;
    padding-bottom: 35px;
    border-bottom: 1px solid var(--white-color);
}

.difference__bottom li {
    font-size: var(--font-24);
    margin-inline: 1.2vw;
    text-align: left;
    font-weight: 100;
    line-height: 1.4;
    margin-inline: 0;
    padding-bottom: 1vw;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

#difference .check-list-box {
    background-color: inherit;
    padding-block: 0 3.5vw;
}

#difference .check-list-box>li:before {
    filter: brightness(10);
    top: 6px;
    left: 0.75vw;
}


/* ==================================================
resident
================================================== */
#resident {
    margin-bottom: 5vw;
}

#resident .star-ico,
.system .star-ico,
.example .star-ico {
    margin-bottom: 2vw;
}

.resident__para-1,
.resident__para-1 * {
    font-size: var(--font-64);
    line-height: 1.3;
}

.resident__para-2 {
    font-size: var(--font-24);
    font-weight: 300;
    border: 1px solid;
    padding-block: 7px 5px;
    max-width: 980px;
    margin: 2.6vw auto 2vw;
}

.resident__para-3,
.resident__para-4,
.resident__para-5 {
    font-size: var(--font-24);
    font-weight: 300;
    line-height: 1.8;
}

.resident__arrow {
    background: url(../images/section/resident/resident-arrow.png) no-repeat center/contain;
    --w: 1300;
    --h: 52;
    left: 50%;
    transform: translateX(-50%);
    margin-block: 1.9vw 2.8vw;
}

.resident__box-container {
    position: relative;
    max-width: 1300px;
    margin: 7.1vw auto 0;
}

.resident__box-wrap {
    display: flex;
    gap: 20px;
}

.resident__box {
    width: calc((100%/5) - 60px);
    font-size: var(--font-24);
    font-family: var(--ff-MaruBuri);
    border-radius: 10px;
    background-color: var(--purple-color);
    color: var(--white-color);
    padding-block: 1.5vw;
    line-height: 1.4;
    font-weight: 100;
}

.resident__box-before {
    position: absolute;
    width: 652px;
    top: -1.1vw;
    right: 5vw;
    height: 8.5vw;
    background-color: #DFDAE6;
    border-radius: 10px;
    z-index: -1;
}

.resident__box-before::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background:
        radial-gradient(circle, #8B7AA5 0 1px, transparent 1.5px) top / 10px 5px repeat-x,
        radial-gradient(circle, #8B7AA5 0 1px, transparent 1.5px) bottom / 10px 5px repeat-x,
        radial-gradient(circle, #8B7AA5 0 1px, transparent 1.5px) left / 5px 10px repeat-y,
        radial-gradient(circle, #8B7AA5 0 1px, transparent 1.5px) right / 5px 10px repeat-y;
}

.resident__box-before .before-text {
    position: absolute;
    font-size: var(--font-30);
    bottom: -4.5vw;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.ab-box {
    position: absolute;
    inset: 0;
}

.ab-box:before,
.ab-box:after {
    position: absolute;
    left: 50%;
    content: '';
    display: block;
    background-color: var(--purple-color);
}

.ab-box:before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    bottom: -4px;
}

.ab-box:after {
    bottom: -50px;
    left: 50.7%;
    width: 1px;
    height: 50px;
}


/* ==================================================
system
================================================== */
#system {
    background: url(../images/section/system/system-bg.png) no-repeat center/cover;
    padding-bottom: clamp(150px, 9.9vw, 200px);
}

.system__para-1 {
    font-size: var(--font-72);
}

.system__para-2 {
    font-size: var(--font-24);
    border: 1px solid;
    padding-block: 7px 5px;
    max-width: 980px;
    margin: 2.6vw auto 2vw;
    line-height: 1.2;
}

.system__para-3,
.system__para-4,
.system__para-5 {
    font-size: var(--font-24);
    font-weight: 300;
    line-height: 1.4;
}

.system__para-4 {
    margin-block: 1vw;
}

.system__box-wrap {
    display: flex;
    max-width: 1300px;
    margin-inline: auto;
    gap: 20px;
}

.system__box {
    display: grid;
    place-items: center;
    width: calc((100% / 3) - 60px);
    font-size: var(--font-20);
    font-family: var(--ff-MaruBuri);
    border-radius: 10px;
    background-color: var(--purple-color);
    padding-block: 2.8vw;
    margin-top: 2.8vw;
    font-weight: 100;
}

.system__box *,
#final * {
    color: var(--white-color);
}

.system__title {
    font-family: var(--ff-MaruBuri);
    font-size: var(--font-24);
    margin-top: 0.6vw;
    font-weight: 300;
}

.system__desc {
    line-height: 1.3;
}



/* ==================================================
example
================================================== */
.example__para-1 {
    font-size: var(--font-40);
}

.example__para-2 {
    font-size: var(--font-72);
    margin-block: 1vw 2.5vw;
}

.example__para-3 {
    font-size: var(--font-20);
    line-height: 1.6;
    color: #bbbbbb;
    word-break: auto-phrase;
}

.example-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto 2.5vw;
    position: relative;
}

.example-box>div {
    width: 50%;
    height: 400px;
    font-family: var(--ff-MaruBuri);
    font-size: var(--font-24);
    border-radius: 10px;
    padding-top: 20px;
    color: #fff;
}

.example__row-1 .system__before {
    background: url(../images/section/case/1/1.jpg) no-repeat center / cover;
}
.example__row-1 .system__after {
    background: url(../images/section/case/1/2.jpg) no-repeat center / cover;
}
.example__row-2 .system__before {
    background: url(../images/section/case/2/1.jpg) no-repeat center / cover;
}
.example__row-2 .system__after {
    background: url(../images/section/case/2/2.jpg) no-repeat center / cover;
}
.example__row-3 .system__before {
    background: url(../images/section/case/3/1.jpg) no-repeat center / cover;
}
.example__row-3 .system__after {
    background: url(../images/section/case/3/2.jpg) no-repeat center / cover;
}
.example__row-4 .system__before {
    background: url(../images/section/case/4/1.jpg) no-repeat center / cover;
}
.example__row-4 .system__after {
    background: url(../images/section/case/4/2.jpg) no-repeat center / cover;
}



/* ==================================================
final
================================================== */
#final {
    background: url(../images/section/footer/footer-bg.png) no-repeat center/cover;
}

.final-how__para--1 {
    font-size: var(--font-60);
    font-family: var(--ff-MaruBuri);
    font-weight: 100;
    line-height: 1.3;
    padding-top: 2vw;
}

#final .column__line {
    margin-block: 3vw;
    background: var(--white-color);
}

.final-how__para--2 {
    font-size: var(--font-24);
    font-weight: 100;
}

.final-how__para--3 {
    font-size: var(--font-28);
    font-weight: 300;
    line-height: 1.4;
    margin-block: 1.5vw;
}

.final-how__para--4 {
    font-size: var(--font-24);
    font-weight: 300;
    margin-bottom: 1.5vw;
    letter-spacing: -0.5px;
}

.link-btn {
    display: inline-block;
    background-color: var(--white-color);
    padding: 7px 2.5vw 7px;
    border-radius: 50px;
}

.link-btn a {
    font-size: var(--font-36);
    font-weight: 600;
    color: var(--purple-color) !important;
    margin-bottom: 2vw;
}


/* footer */
.footer {
  background: #35383f;
  color: #8b919c;
  border-top: 1px solid #f47b20;
  font-size: 13px;
  line-height: 1.7;
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 1vw;
  font-size: var(--font-16);
}

.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.footer__logo {
  margin: 0;
}
.footer__logo img {
  width: 220px;
  filter: brightness(10);
}

/* footer custom selects */
.footer__selects {
  display: flex;
  gap: 10px;
}

.fselect {
  position: relative;
}

.fselect__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: -0.3px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.fselect__btn:hover,
.fselect.is-open .fselect__btn {
  border-color: var(--orange-color);
  background: rgba(255, 255, 255, 0.07);
}

.fselect__label {
  flex: 1;
  text-align: left;
  letter-spacing: -0.6px;
}

.fselect__caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.6);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s;
}

.fselect.is-open .fselect__caret {
  transform: translateY(1px) rotate(-135deg);
}

.fselect__list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  padding: 5px;
  background: #2b2e34;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.2s,
    transform 0.2s,
    visibility 0.2s;
  z-index: 20;
}

.fselect.is-open .fselect__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fselect__list li {
  border-radius: 4px;
}

.fselect__list a,
.fselect__current {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: -0.3px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.fselect__list a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.fselect__current {
  color: var(--orange-color);
  cursor: default;
}

.fselect__ico {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.7);
}

.fselect__list a:hover .fselect__ico {
  color: var(--orange-color);
}

.footer__info {
  margin-block: 1vw 0.8vw;
}

.footer__info * {
  margin-left: 10px;
  font-weight: 300;
  letter-spacing: -0.5px;
  color: rgba(255, 255, 255, 0.7);
}

.footer__info *::first-child {
  margin-left: 0;
}

.footer__copy,
.footer__copy * {
  font-size: 12px;
  color: #6f757f;
  letter-spacing: -0.6px;
}