/* Vision page */
body { background: #f8f4ec; }
.v-hero { position: relative; height: 756px; overflow: hidden; }
.v-hero .bg { position: absolute; left: 50%; top: 0; width: 1496px; height: 756px; margin-left: -776px; max-width: none; object-fit: cover; }
.v-hero .bg-r { position: absolute; left: 50%; top: 0; width: 781px; height: 756px; margin-left: -61px; max-width: none; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent, #000 140px); mask-image: linear-gradient(to right, transparent, #000 140px); }
.v-hero .fade { position: absolute; left: 50%; top: 234px; width: 806px; height: 573px; margin-left: -766px; background: linear-gradient(to left, rgba(255, 233, 194, 0), #ffe9c2 70%, #f3f0e6); filter: blur(12px); }
.v-hero .wrap { height: 756px; }
.v-copy { position: absolute; left: 72px; top: 155px; width: 740px; }
.v-label { font: 500 22px/33px 'Poppins', sans-serif; color: #d85b0b; }
.v-label::after { content: ""; display: block; width: 64px; height: 2px; margin-top: 12px; background: #d85b0b; }
.v-copy h1 { margin-top: 16px; font: 700 52px/53px 'Lora', serif; color: #232526; }
.v-copy h1 em, .v-lead em { font-style: normal; color: #d85b0b; }
.v-lead { margin-top: 16px; width: 600px; font: 400 23px/26.4px 'Arimo', sans-serif; color: #232526; }
.v-lead em { font-weight: 700; }
.v-para { margin-top: 16px; width: 540px; font: 400 19px/21.9px 'Arimo', sans-serif; color: #232526; }
.found { display: flex; margin-top: 16px; padding-top: 6px; width: 435px; }
.found > div { width: 145px; text-align: center; }
.found img { width: 50px; height: 50px; margin: 0 auto 8px; }
.found span { display: block; font: 700 19px/24.3px 'Lora', serif; color: #232526; }
.v-rule { width: 64px; height: 2px; margin-top: 16px; background: #d85b0b; }
.v-sign { margin-top: 16px; font: 700 12px/15.4px 'Lora', serif; color: #686a69; white-space: nowrap; }

.pill-head { position: relative; height: 480px; background: url(../assets/img/frame-2147229417.webp) center / cover; text-align: center; }
.pill-head .in { position: absolute; left: 310px; top: 114px; width: 820px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.orn { display: flex; align-items: center; gap: 18px; }
.orn i { display: block; width: 275px; height: 1px; background: #e8bf94; }
.orn b { display: block; width: 13px; height: 13px; background: #e8bf94; transform: rotate(45deg); }
.pill-head .t { font: 700 28px/33.9px 'Cormorant Garamond', serif; color: #d85b0b; letter-spacing: .5px; }
.pill-head .r { width: 36px; height: 2px; background: #d85b0b; margin-top: -4px; }
.pill-head h2 { font: italic 600 45px/50.4px 'Cormorant Garamond', serif; color: #475461; }

.pillar { position: relative; overflow: hidden; display: flex; }
.pillar > img.art { position: absolute; top: 0; left: 50%; width: 1440px; height: 100%; margin-left: -720px; max-width: none; object-fit: cover; }
.panel { position: relative; z-index: 1; background: #faf5eb; overflow: hidden; }
.panel .fol { position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: none; pointer-events: none; }
.panel .wash { position: absolute; left: 0; bottom: 0; width: 100%; height: 126px; object-fit: cover; opacity: .15; }
.panel > .c { position: relative; }
.ic { display: block; border-radius: 50%; }
.lab { display: flex; align-items: center; gap: 18px; }
.lab img { width: 56px; height: 56px; }
.lab b { font: 600 28px/33.9px 'Cormorant Garamond', serif; color: #d85b0b; }
.acc { width: 64px; height: 2px; background: #e8bf94; }
.pillar h3 { color: #232526; }
.pillar p { font: 400 16px/23.7px 'Poppins', sans-serif; color: #686a69; }
.pillar p strong { font-weight: 600; color: #d85b0b; }
.quote { display: flex; gap: 14px; padding-right: 16px; border-left: 1px solid #d85b0b; }
.quote i { font: 400 50px/64px 'Lora', serif; color: #d85b0b; font-style: normal; margin-left: 15px; }
.quote span { font: 600 29px/32.5px 'Cormorant Garamond', serif; color: #232526; }
.quote span em { font-style: normal; color: #d85b0b; }

/* 01 */
.p1 { height: 497px; background: #fcf6ea; }
.p1 .left { position: absolute; left: 0; top: 0; width: 829px; height: 100%; object-fit: cover; }
.p1 .panel { margin-left: 829px; width: 611px; background: #fcf6ea; }
.p1 .fol { left: auto; right: 0; }
.p1 .c { padding: 106px 0 0 21px; display: flex; gap: 22px; }
.p1 .circ { width: 80px; height: 80px; flex: none; }
.p1 .txt { width: 386px; }
.p1 .num { font: 600 18px/26px 'Poppins', sans-serif; color: #e08a1e; }
.p1 h3 { margin-top: 14px; font: 700 40px/48px 'Lora', serif; }
.p1 h3 em { font-style: normal; color: #d9772b; }
.p1 .acc { margin: 14px 0; }
.p1 p { font-size: 15px; line-height: 25px; color: #3d3d3d; }
/* 02 */
.p2 { height: 492px; }
.p2 .panel { width: 650px; background: #fcf6ea; }
.p2 .c { padding: 55px 24px 0 60px; }
.p2 .head { display: flex; align-items: center; gap: 26px; }
.p2 .head img { width: 84px; height: 84px; }
.p2 .head b { display: block; font: 600 18px/26px 'Poppins', sans-serif; color: #e08a1e; }
.p2 h3 { font: 700 46px/54px 'Cormorant Garamond', serif; }
.p2 h3 em, .p3 h3 em, .p5 h3 em, .p6 h3 em { font-style: normal; color: #d9772b; }
.p2 .acc { margin: 22px 0; }
.p2 p { font-size: 18px; line-height: 30px; color: #5b5b5b; width: 550px; }
.p2 p strong { color: #e08a1e; }
.stages { display: flex; margin-top: 22px; }
.stage { text-align: center; }
.stage img { width: 54px; height: 54px; margin: 0 auto 10px; }
.stage b { display: block; font: 500 15px/22px 'Poppins', sans-serif; color: #232526; }
.stage span { display: block; margin-top: 4px; font: 400 10.5px/16px 'Poppins', sans-serif; color: #6b6b6b; }
.stg-arrow { width: 15px; height: 34px; margin: 0 2px; flex: none; }
.p2 .fadeR { position: absolute; z-index: 1; left: 650px; top: 0; width: 264px; height: 100%; background: linear-gradient(to right, #fcf6ea, rgba(252, 246, 234, 0)); }
/* 03 */
.p3 { height: 492px; justify-content: flex-end; }
.p3 .panel { width: 490px; margin-right: -10px; }
.p3 .c { padding: 80px 38px 0; display: flex; flex-direction: column; gap: 17px; }
.p3 h3, .p4 h3 { font: 700 54px/65.4px 'Cormorant Garamond', serif; }
.p3 .acc { margin: 0; }
.p3 p { width: 414px; }
.p3 .it { font: italic 700 30px/33.6px 'Cormorant Garamond', serif; color: #ed8a12; }
.p3 .fadeL { position: absolute; z-index: 1; right: 480px; top: 0; width: 264px; height: 100%; background: linear-gradient(to left, #faf5eb, rgba(250, 245, 235, 0)); }
/* 04, 05, 06 */
.p4 { height: 538px; }
.p5 { height: 482px; justify-content: flex-end; }
.p6 { height: 525px; }
.p4 .panel { width: 548px; }
.p5 .panel { width: 682px; }
.p6 .panel { width: 694px; }
.p4 .c, .p5 .c, .p6 .c { display: flex; flex-direction: column; justify-content: center; height: 100%; gap: 18px; }
.p4 .c { padding: 0 68px 0 103px; }
.p5 .c { padding: 0 68px; }
.p6 .c { padding: 0 68px 0 103px; }
.p4 .lab img, .p5 .lab img, .p6 .lab img { width: 56px; height: 56px; }
.p4 .acc, .p5 .acc, .p6 .acc { margin: 0; }
.p5 h3 { font: 600 57px/58.1px 'Cormorant Garamond', serif; }
.p6 h3 { font: 700 44px/46.6px 'Cormorant Garamond', serif; }
.p4 p, .p5 p { white-space: pre-line; }
.p4 .fol, .p5 .fol, .p6 .fol { opacity: 1; }
.p4 .c > *, .p5 .c > *, .p6 .c > * { position: relative; }

.explore2 { display: flex; height: 148px; background: #faf5eb; }
.ex { position: relative; flex: 1; display: flex; align-items: center; border: 1px solid #e8bf94; overflow: hidden; transition: background .3s ease; }
.ex:hover { background: #f6ecd8; }
.ex .im { flex: none; height: 148px; overflow: hidden; }
.ex .im img { height: 148px; width: 1440px; max-width: none; object-fit: cover; }
.ex.a .im { width: 320px; }
.ex.b .im { width: 260px; }
.ex.b .im img { margin-left: -720px; }
.ex h4 { font: 700 38px/46px 'Cormorant Garamond', serif; color: #232526; }
.ex h4 em { font-style: normal; color: #d85b0b; }
.ex p { margin-top: 8px; font: 400 14px/19.6px 'Poppins', sans-serif; color: #686a69; }
.ex .go { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: #f9cdac; color: #d85b0b; display: grid; place-items: center; transition: transform .3s var(--ease); }
.ex .go svg { width: 22px; height: 22px; }
.ex:hover .go { transform: translateX(6px); }
.ex.a h4 { margin-left: 18px; width: 290px; }
.ex.a .go { left: 646px; }
.ex.b h4 { margin-left: 18px; }
.ex.b .go { left: 631px; }
.ex .txt { padding: 0; }

.trade { position: relative; height: 480px; overflow: hidden; background: #faf5eb; text-align: center; }
.trade img { position: absolute; left: 0; top: 0; width: 100%; height: 520px; object-fit: cover; object-position: center top; }
.trade .in { position: absolute; left: 0; right: 0; top: 91px; }
.trade h2 { font: 600 61px/62.2px 'Cormorant Garamond', serif; color: #232526; }
.trade h2 em { font-style: normal; color: #d85b0b; }
.trade .qr { width: 64px; height: 1px; margin: 23px auto 0; background: #d85b0b; }
.trade small { display: block; margin-top: 24px; font: 400 12px/18px 'Poppins', sans-serif; color: #686a69; text-transform: uppercase; }

@media (max-width: 899.98px) {
  .v-hero { height: auto; display: flex; flex-direction: column; }
  .v-hero .wrap { order: 1; height: auto; padding: 112px 24px 0; }
  .v-hero .bg { position: static; order: 2; width: 100%; height: 282px; margin: 36px 0 0; object-fit: cover; object-position: 30% 50%; }
  .v-hero .fade { display: none; }
  .v-hero .bg { display: none; }
  .v-hero .bg-r { position: static; order: 2; width: 100%; height: 330px; margin: 36px 0 0; object-position: 50% 80%; -webkit-mask-image: none; mask-image: none; }
  .v-copy { position: static; width: auto; }
  .v-label { font-size: 15px; line-height: 22px; }
  .v-copy h1 { font-size: 34px; line-height: 38px; margin-top: 28px; }
  .v-lead { width: auto; font-size: 18px; line-height: 25px; }
  .v-para { width: auto; font-size: 15px; line-height: 23px; }
  .found { width: 100%; justify-content: space-between; }
  .found > div { width: 33%; }
  .found span { font-size: 14px; line-height: 17px; }
  .v-sign { white-space: normal; font-size: 10px; margin-bottom: 8px; }
  .v-hero .btn-m { display: flex; margin-top: 24px; align-items: center; justify-content: space-between; height: 48px; padding: 0 9px 0 22px; border-radius: 30px; background: #bf4d00; color: #fff; font: 700 15px 'Lato', sans-serif; white-space: nowrap; }
  .pill-head { height: 280px; }
  .pill-head .in { left: 0; width: 100%; top: 56px; padding: 0 24px; gap: 14px; }
  .orn i { width: 80px; }
  .pill-head .t { font-size: 18px; line-height: 24px; }
  .pill-head h2 { font-size: 28px; line-height: 33px; }
  .pillar { flex-direction: column; height: auto !important; }
  .pillar > img.art { position: static; width: 100%; height: 260px; margin: 0; order: 2; object-position: 0 50%; }
  .p2 > img.art, .p6 > img.art { object-position: 100% 50%; }
  .p4 > img.art { object-position: 87% 50%; }
  .panel, .p1 .panel, .p2 .panel, .p3 .panel, .p4 .panel, .p5 .panel, .p6 .panel { width: 100%; margin: 0; order: 1; }
  .p1 .left { position: static; width: 100%; height: 240px; order: 0; }
  .p1 .panel { order: 1; }
  .panel .fol, .fadeR, .fadeL, .panel .wash { display: none; }
  .p1 .c, .p2 .c, .p3 .c, .p4 .c, .p5 .c, .p6 .c { padding: 36px 24px 44px; height: auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; }
  .p1 .c { flex-direction: column; }
  .p1 .txt { width: auto; }
  .p1 .circ { width: 48px; height: 48px; }
  .p1 h3, .p2 h3, .p3 h3, .p4 h3, .p5 h3, .p6 h3 { font-size: 34px; line-height: 40px; }
  .p1 h3 { font-family: 'Lora', serif; font-size: 28px; line-height: 34px; }
  .p2 .head img { width: 48px; height: 48px; }
  .p2 p, .p3 p, .pillar p { width: auto; font-size: 14px; line-height: 24px; }
  .p3 .it { font-size: 22px; line-height: 28px; }
  .quote span { font-size: 22px; line-height: 28px; }
  .quote i { font-size: 34px; line-height: 40px; margin-left: 10px; }
  .stages { flex-direction: column; gap: 14px; margin-top: 4px; }
  .stage { display: flex; align-items: center; gap: 16px; text-align: left; }
  .stage img { width: 40px; height: 40px; margin: 0; }
  .stage b { width: 90px; font-size: 14px; }
  .stage span { margin: 0; font-size: 12px; }
  .stg-arrow { display: none; }
  .p4 .lab img, .p5 .lab img, .p6 .lab img, .lab img { width: 44px; height: 44px; }
  .p5 .panel, .p3 .panel { order: 1; }
  .explore2 { flex-direction: column; height: auto; }
  .ex { height: 130px; padding: 0 20px 0 0; }
  .ex .im { overflow: hidden; }
  .ex .im, .ex.a .im, .ex.b .im { width: 110px; height: 70px; margin: 0 16px 0 12px; }
  .ex .im img, .ex.b .im img { height: 70px; width: 110px; max-width: 110px; margin: 0; object-fit: cover; object-position: left; }
  .ex h4, .ex.a h4 { width: auto; margin: 0; font-size: 28px; line-height: 34px; }
  .ex p { font-size: 12px; line-height: 17px; }
  .ex .go, .ex.a .go, .ex.b .go { position: static; margin-left: auto; flex: none; }
  .ex .txt { flex: 1; }
  .trade { height: 430px; }
  .trade h2 { font-size: 34px; line-height: 38px; padding: 0 20px; }
  .trade .in { top: 60px; }
  .trade img { height: 260px; top: auto; bottom: 0; }
}
.btn-m { display: none; }
.btn-m svg { width: 24px; height: 24px; flex: none; }
.panel .fol { width: 100%; object-fit: cover; }
.p1 .fol { width: 361px; left: auto; right: 0; }