@charset "UTF-8";
/*
    Theme Name: SJ Group
    Theme URI: 
    Author: Team WP MD
    Author URI: 
    Description: A starter theme
    Version: 1.0
    Text Domain: corex
    Tags: theme, starter theme,
*/
@font-face {
  font-family: "";
  src: url("./assets/fonts/") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--Gradient-Blue, linear-gradient(0deg, #122146 31.15%, #20315A 99.01%));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:window-inactive {
  background: var(--Gradient-Blue, linear-gradient(0deg, #122146 31.15%, #20315A 99.01%));
}

button,
input,
select,
textarea {
  margin: 0;
  outline: none;
}

html {
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

img,
video {
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}
td:not([align]),
th:not([align]) {
  text-align: left;
}

html,
body {
  margin: 0;
  padding: 0;
  color: #6B4434;
  font-family: "Fahkwang", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}
@media only screen and (max-width: 1024px) {
  html,
  body {
    font-size: 13px;
  }
}

.site-container {
  overflow: hidden;
}

ul li {
  list-style: none;
}

a {
  text-decoration: none;
}

p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

.typography html,
.typography body,
.typography p,
.typography ol,
.typography ul,
.typography li,
.typography dl,
.typography dt,
.typography dd,
.typography blockquote,
.typography figure,
.typography fieldset,
.typography legend,
.typography textarea,
.typography pre,
.typography iframe,
.typography hr,
.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 {
  margin: 0;
  padding: 0;
}
.typography ul {
  list-style: none;
}

@keyframes draw2 {
  0% {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 2000;
  }
}
@keyframes signature1 {
  0% {
    stroke-dashoffset: 500;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes signature2 {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes opacityKey {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes colorTextWhite {
  0% {
    stroke: #000;
    stroke-width: 0;
    fill: #000;
  }
  50% {
    stroke: #000;
    stroke-width: 3.46544;
    fill: #fff;
  }
  100% {
    stroke: #000;
    stroke-width: 0;
    fill: #000;
  }
}
@keyframes colorTextBlack {
  0% {
    stroke: #000;
    stroke-width: 3.46544;
    fill: #fff;
  }
  50% {
    stroke: #000;
    stroke-width: 0;
    fill: #000;
  }
  100% {
    stroke: #000;
    stroke-width: 3.46544;
    fill: #fff;
  }
}
@keyframes zoomOut {
  from {
    transform: scale(1.3); /* Kích thước ban đầu của ảnh */
  }
  to {
    transform: scale(1); /* Kích thước cuối cùng của ảnh (zoom out) */
  }
}
@keyframes trin {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  20%, 32%, 44%, 56%, 68% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  23%, 35%, 47%, 59%, 71% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  26%, 38%, 50%, 62%, 74% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  29%, 41%, 53%, 65%, 77% {
    transform: rotate3d(0, 0, 1, -15deg);
  }
  80% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@-webkit-keyframes future {
  0% {
    transform: translate(-400px) rotate(-45deg);
  }
  50% {
    transform: translate(0) rotate(-45deg);
  }
  100% {
    transform: translate(400px) rotate(-45deg);
  }
}
@-moz-keyframes future {
  0% {
    transform: translate(-400px) rotate(-45deg);
  }
  50% {
    transform: translate(0) rotate(-45deg);
  }
  100% {
    transform: translate(400px) rotate(-45deg);
  }
}
@-o-keyframes future {
  0% {
    transform: translate(-400px) rotate(-45deg);
  }
  50% {
    transform: translate(0) rotate(-45deg);
  }
  100% {
    transform: translate(400px) rotate(-45deg);
  }
}
@keyframes future {
  0% {
    transform: translate(-400px) rotate(-45deg);
  }
  50% {
    transform: translate(0) rotate(-45deg);
  }
  100% {
    transform: translate(400px) rotate(-45deg);
  }
}
@keyframes drawLine {
  from {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
  }
  to {
    stroke-dasharray: 300;
    stroke-dashoffset: 0;
  }
}
@keyframes zoomOut {
  from {
    transform: scale(1.3); /* Kích thước ban đầu của ảnh */
  }
  to {
    transform: scale(1); /* Kích thước cuối cùng của ảnh (zoom out) */
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-moz-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-o-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes shakeX2 {
  0% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    transform: rotate(0) scale(1) skew(1deg);
  }
}
@-moz-keyframes shakeX2 {
  0% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    transform: rotate(0) scale(1) skew(1deg);
  }
}
@-o-keyframes shakeX2 {
  0% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    transform: rotate(0) scale(1) skew(1deg);
  }
}
@keyframes shakeX2 {
  0% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    transform: rotate(0) scale(1) skew(1deg);
  }
}
@keyframes colorChange {
  0% {
    fill: #fff;
  }
  50% {
    fill: #E1C38B;
  }
  100% {
    fill: #fff;
  }
}
@keyframes colorChange2 {
  0% {
    fill: #fff;
  }
  50% {
    fill: #77121D;
  }
  100% {
    fill: #fff;
  }
}
@keyframes draw2 {
  0% {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes draw {
  0% {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 1500;
  }
}
@keyframes draw22 {
  0% {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 1000;
  }
}
@keyframes bounceY {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}
@keyframes opacityKey {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes section1 {
  0% {
    stroke-dashoffset: 1500;
    fill: none;
    stroke: #FDCB9A;
    stroke-width: 1;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #FDCB9A;
    stroke: #FDCB9A;
    stroke-width: 0;
  }
}
@keyframes coccoc-alo-circle-anim {
  0% {
    transform: translate(-50%, -50%) rotate(0) scale(0.7) skew(1deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(0) scale(1) skew(1deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0) scale(0.7) skew(1deg);
  }
}
@keyframes coccoc-alo-circle-fill-anim {
  0% {
    transform: translate(-50%, -50%) rotate(0) scale(0.7) skew(1deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(0) scale(1) skew(1deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0) scale(0.7) skew(1deg);
  }
}
@keyframes scrollDown {
  0% {
    top: 17px;
  }
  100% {
    top: 50px;
  }
}
@media only screen and (max-width: 1024px) {
  @keyframes scrollDown {
    0% {
      top: 13px;
    }
    100% {
      top: 28px;
    }
  }
}
@keyframes blinkFade {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}
.cm-button {
  color: var(--Text-Brown, #6B4434);
  border-radius: 0 0 0 8px;
  background: var(--Brown, #E8BB9C);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 159px;
  height: 50px;
  position: relative;
  transition: all 0.5s ease;
  z-index: 0;
}
@media only screen and (max-width: 1280px) {
  .cm-button {
    height: 45px;
  }
}
@media only screen and (max-width: 576px) {
  .cm-button {
    width: 150px;
    height: 40px;
  }
}
.cm-button:hover p {
  background: var(--Gradient-Brown, linear-gradient(180deg, #A97961 0.14%, #D1A285 63.81%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cm-button:hover:after {
  width: 100%;
  opacity: 1;
}
.cm-button::after {
  transition: all 0.5s ease;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  content: "";
  width: 0%;
  height: 100%;
  border-radius: 0 0 0 8px;
  background: var(--Gradient-Blue, linear-gradient(0deg, #122146 31.15%, #20315A 99.01%));
  z-index: -1;
  opacity: 0;
}
.cm-button p {
  z-index: 1;
  transition: all 0.5s ease;
}

.cm-title {
  color: var(--White, #FDFDFD);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 28.8px */
  text-transform: uppercase;
  padding: 3px 0 !important;
}
@media only screen and (max-width: 1280px) {
  .cm-title {
    font-size: 22px;
  }
}
.cm-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 117px;
}
@media (max-width: 1280px) {
  .cm-container {
    padding: 0 60px;
  }
}
@media (max-width: 1024px) {
  .cm-container {
    padding: 0 30px;
  }
}
@media (max-width: 767px) {
  .cm-container {
    padding: 0 15px;
  }
}

.header-main-site {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  right: 0;
  display: flex;
  padding: 0px 0 0;
  transition: all 0.5s ease;
  justify-content: center;
  height: 68px;
}
@media only screen and (max-width: 768px) {
  .header-main-site {
    height: 100vh;
    flex-direction: column;
    background: #0D1427;
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    border-radius: 0 0 50px 50px;
  }
}
.header-main-site .decor_hd {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .header-main-site .decor_hd {
    display: none;
  }
}
.header-main-site.is_active_header {
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.header-main-site.hSticky-down {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  transition: all 400ms ease;
  opacity: 0;
  visibility: hidden;
}
.header-main-site .logo-header {
  display: flex;
  width: 225px;
  transition: all 0.5s ease;
  align-items: center;
  justify-content: center;
  height: 100%;
}
@media only screen and (max-width: 1280px) {
  .header-main-site .logo-header {
    width: 190px;
  }
}
@media only screen and (max-width: 768px) {
  .header-main-site .logo-header {
    order: 1;
    display: none;
  }
}
.header-main-site .logo-header svg {
  width: 161px;
  height: auto;
  transition: all 0.5s ease;
}
@media only screen and (max-width: 768px) {
  .header-main-site > .left {
    order: 2;
  }
}
.header-main-site > .left ul {
  float: right;
}
@media only screen and (max-width: 768px) {
  .header-main-site > .left ul {
    float: none;
  }
}
.header-main-site > .left li:first-child {
  margin-left: 0;
}
.header-main-site > .right {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .header-main-site > .right {
    order: 3;
    justify-content: center;
    flex-direction: column;
  }
}
.header-main-site > .right .lang {
  color: var(--Neutral-White, #FFF);
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .header-main-site > .right .lang {
    padding-left: 0;
    border-left: none;
    height: auto;
    padding: 0;
  }
}
.header-main-site > .right .lang svg {
  margin-left: 12px;
  width: 8px;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .header-main-site > .right .lang svg, .header-main-site > .right .lang > p {
    display: none;
  }
}
.header-main-site > .right .lang ul {
  display: none;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .header-main-site > .right .lang ul {
    display: flex;
  }
}
.header-main-site > .right .lang ul li {
  padding: 0 10px;
  position: relative;
}
.header-main-site > .right .lang ul li:last-child::after {
  display: none;
}
.header-main-site > .right .lang ul li:after {
  position: absolute;
  width: 1px;
  height: 75%;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  background: #FDFDFD;
}
.header-main-site > .right .lang ul a {
  color: #FDFDFD;
}
.header-main-site .left, .header-main-site .right {
  width: calc((100% - 225px) / 2);
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  transition: all 400ms ease;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .header-main-site .left, .header-main-site .right {
    width: auto;
    height: auto;
  }
}
.header-main-site .li {
  cursor: pointer;
  position: relative;
}
@media only screen and (min-width: 1025px) {
  .header-main-site .li:hover::after {
    height: 100%;
  }
  .header-main-site .li:hover::before {
    width: 100%;
  }
  .header-main-site .li:hover p {
    background: var(--gradient-brown, linear-gradient(90deg, #A97961 32%, #E8BB9C 64%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .header-main-site .li:hover path {
    fill: #E8BB9C;
  }
}
.header-main-site .li:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 0%;
  transition: all 0.5s ease;
  opacity: 0.9;
  background: var(--Gradient-Blue, linear-gradient(0deg, #122146 31.15%, #20315A 99.01%));
  z-index: 1;
}
.header-main-site .li:before {
  content: "";
  position: absolute;
  left: 0%;
  top: 0;
  width: 0%;
  height: 2px;
  z-index: 2;
  transition: all 0.5s ease;
  background: var(--gradient-brown, linear-gradient(90deg, #A97961 32%, #E8BB9C 64%));
}
.header-main-site .li.active p {
  background: var(--gradient-brown, linear-gradient(90deg, #A97961 32%, #E8BB9C 64%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.header-main-site .li p, .header-main-site .li svg {
  z-index: 2;
}
.header-main-site .menu-main {
  display: flex;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .header-main-site .menu-main {
    flex-direction: column;
    height: auto;
  }
}
.header-main-site .menu-main li {
  position: relative;
  padding: 0px 24px 0;
  z-index: 0;
  height: 100%;
  transition: all 0.5s ease;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 1280px) {
  .header-main-site .menu-main li {
    padding: 0px 14px 0;
  }
}
@media only screen and (max-width: 768px) {
  .header-main-site .menu-main li {
    margin-bottom: 30px;
    height: auto;
  }
}
@media only screen and (min-width: 1025px) {
  .header-main-site .menu-main li:hover::after {
    height: 100%;
  }
  .header-main-site .menu-main li:hover::before {
    width: 100%;
  }
  .header-main-site .menu-main li:hover a {
    background: var(--gradient-brown, linear-gradient(90deg, #A97961 32%, #E8BB9C 64%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.header-main-site .menu-main li:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 0%;
  z-index: -2;
  transition: all 0.5s ease;
  opacity: 0.9;
  background: var(--Gradient-Blue, linear-gradient(0deg, #122146 31.15%, #20315A 99.01%));
}
.header-main-site .menu-main li:before {
  content: "";
  position: absolute;
  left: 0%;
  top: 0;
  width: 0%;
  height: 2px;
  z-index: -1;
  transition: all 0.5s ease;
  background: var(--gradient-brown, linear-gradient(90deg, #A97961 32%, #E8BB9C 64%));
}
.header-main-site .menu-main li.active a {
  background: var(--gradient-brown, linear-gradient(90deg, #A97961 32%, #E8BB9C 64%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.header-main-site .menu-main a {
  color: var(--White, #FDFDFD);
  text-align: center;
  text-transform: uppercase;
  position: relative;
  width: max-content;
  display: block;
  transition: all 0.5s ease;
}
@media only screen and (max-width: 768px) {
  .header-main-site .menu-main a {
    margin: 0 auto;
  }
}

.menu_mb {
  display: none;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  padding: 0 30px;
  background: #0D1427;
  position: fixed;
  transition: all 0.5s ease;
  box-shadow: -8.412px 132.294px 36.706px 0px rgba(0, 0, 0, 0), -5.353px 84.118px 33.647px 0px rgba(0, 0, 0, 0.01), -3.059px 47.412px 28.294px 0px rgba(0, 0, 0, 0.03), -1.529px 21.412px 21.412px 0px rgba(0, 0, 0, 0.04), 0px 5.353px 11.471px 0px rgba(0, 0, 0, 0.05);
}
@media only screen and (max-width: 768px) {
  .menu_mb {
    display: flex;
  }
}
@media only screen and (max-width: 576px) {
  .menu_mb {
    padding: 0 15px;
  }
}
.menu_mb.hSticky-down {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  transition: all 400ms ease;
  opacity: 0;
  visibility: hidden;
}
.menu_mb.active_header:after {
  width: 100%;
}
.menu_mb:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background: rgba(255, 255, 255, 0.5019607843);
  transition: all 0.5s ease;
}
.menu_mb.active {
  opacity: 0;
  pointer-events: none;
}
.menu_mb .logo {
  width: 200px;
  display: block;
}
.menu_mb .humbeger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding-top: 15px;
  transition: all 0.5s ease;
}
.menu_mb .humbeger span {
  width: 30px;
  height: 3px;
  background: #fff;
  display: block;
  transition: all 0.5s ease;
  margin-bottom: 0.48828125vw;
}
@media (max-width: 576px) {
  .menu_mb .humbeger span {
    width: 20px;
    height: 2px;
    margin-bottom: 5px;
  }
}
.menu_mb .humbeger span:nth-child(3) {
  margin-bottom: 0;
}

.footer {
  background: var(--Gradient-Blue, linear-gradient(0deg, #122146 31.15%, #20315A 99.01%));
  padding: 80px 9.375%;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 0;
  flex-wrap: wrap;
}
@media only screen and (max-width: 1280px) {
  .footer {
    padding: 60px 30px;
  }
}
@media only screen and (max-width: 576px) {
  .footer {
    padding: 50px 15px;
  }
}
.footer .item .label {
  background: var(--Gradient-Brown, linear-gradient(180deg, #A97961 0.14%, #D1A285 63.81%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.footer .item:nth-child(1) {
  width: 19.9145299145%;
}
@media only screen and (max-width: 768px) {
  .footer .item:nth-child(1) {
    width: 100%;
    margin-bottom: 30px;
    order: 1;
  }
}
.footer .item:nth-child(1) a {
  display: block;
  width: 233px;
}
@media only screen and (max-width: 1280px) {
  .footer .item:nth-child(1) a {
    width: 190px;
  }
}
@media only screen and (max-width: 768px) {
  .footer .item:nth-child(1) a {
    margin: 0 auto;
  }
}
.footer .item:nth-child(1) a img {
  width: 100%;
  height: auto;
}
.footer .item:nth-child(2) {
  width: 32.0512820513%;
}
@media only screen and (max-width: 768px) {
  .footer .item:nth-child(2) {
    width: 100%;
    margin-bottom: 30px;
    order: 2;
  }
}
.footer .item:nth-child(3) {
  width: 23.5042735043%;
}
@media only screen and (max-width: 768px) {
  .footer .item:nth-child(3) {
    width: 100%;
    order: 4;
  }
}
.footer .item:nth-child(3) a {
  margin-bottom: 4px;
}
.footer .item:nth-child(4) {
  width: 12.3931623932%;
}
@media only screen and (max-width: 768px) {
  .footer .item:nth-child(4) {
    width: 100%;
    order: 3;
    margin-bottom: 30px;
  }
}
.footer .item a {
  color: var(--White, #EFEEE3);
  display: flex;
}
.footer .item a .icon {
  width: 12px;
  margin-right: 8px;
  margin-top: 2px;
}
.footer .item a p {
  width: calc(100% - 20px);
}
.footer .item .coppy {
  opacity: 0.3;
  margin-top: 12px;
  color: var(--White, #FDFDFD);
}
.footer .item ul {
  display: flex;
  flex-wrap: wrap;
}
.footer .item ul li {
  width: calc((100% - 24px) / 2);
  margin-right: 24px;
  padding: 4px 0;
  border-bottom: rgba(239, 238, 227, 0.1019607843) 1px solid;
  position: relative;
}
.footer .item ul li:hover a {
  background: var(--Gradient-Brown, linear-gradient(180deg, #A97961 0.14%, #D1A285 63.81%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer .item ul li:hover:after {
  width: 100%;
}
.footer .item ul li:after {
  content: "";
  position: absolute;
  left: 0;
  width: 0%;
  height: 1px;
  bottom: 0;
  transition: all 0.5s ease;
  background: var(--Gradient-Brown, linear-gradient(180deg, #A97961 0.14%, #D1A285 63.81%));
}
.footer .item ul li:nth-of-type(2n + 2) {
  margin-right: 0;
}
.footer .item ul li a {
  transition: all 0.5s ease;
}
.footer .decor_ft {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 9.375%;
  z-index: -1;
}
.footer .decor_b_ss5 {
  position: absolute;
  left: 0;
  top: -100px;
  display: block;
}
.footer .decor_b_ft {
  position: absolute;
  right: 0;
  bottom: 0px;
  display: block;
}

.h_ss1 {
  width: 100%;
  height: auto;
  position: relative;
  aspect-ratio: 1440/920;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .h_ss1 {
    margin-top: 70px;
  }
}
.h_ss1 .cm-decor {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 45px;
  z-index: 1;
  transform: rotate(90deg);
}
.h_ss1:after {
  opacity: 0.6;
  background: linear-gradient(0deg, #000920 31.15%, rgba(0, 9, 32, 0) 99.01%);
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 34.7826086957%;
  width: 100%;
}
.h_ss1 > .img {
  width: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  height: 100%;
}
.h_ss1 .down {
  color: var(--White, #FDFDFD);
  padding-right: 16px;
  position: absolute;
  right: 9.375%;
  bottom: 9.5652173913%;
  transition: all 0.5s ease;
  z-index: 1;
  cursor: pointer;
}
@media only screen and (min-width: 1025px) {
  .h_ss1 .down:hover {
    color: #E8BB9C;
  }
  .h_ss1 .down:hover:after {
    background: #E8BB9C;
    height: 1000%;
  }
}
.h_ss1 .down:after {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 1px;
  background: var(--White, #FDFDFD);
  content: "";
  transition: all 0.5s ease;
}
.h_ss1 .abs {
  position: absolute;
  left: 9.375%;
  bottom: 13.4782608696%;
  text-transform: uppercase;
  color: var(--Brown, #E8BB9C);
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .h_ss1 .abs {
    left: 30px;
    bottom: 50px;
  }
}
@media only screen and (max-width: 576px) {
  .h_ss1 .abs {
    left: 15px;
    bottom: 20px;
  }
}
.h_ss1 .abs h2 {
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 48px */
  margin-bottom: 16px;
}
@media only screen and (max-width: 1280px) {
  .h_ss1 .abs h2 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 768px) {
  .h_ss1 .abs h2 {
    font-size: 22px;
  }
}
@media only screen and (max-width: 576px) {
  .h_ss1 .abs h2 {
    font-size: 18px;
    margin-bottom: 8px;
  }
}
.h_ss1 .abs h1 {
  font-size: 60px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}
@media only screen and (max-width: 1280px) {
  .h_ss1 .abs h1 {
    font-size: 45px;
  }
}
@media only screen and (max-width: 768px) {
  .h_ss1 .abs h1 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 576px) {
  .h_ss1 .abs h1 {
    font-size: 26px;
  }
}

.h_ss2 {
  background: var(--White, #F4EEE6);
  padding: 140px 9.375% 60px;
  position: relative;
}
@media only screen and (max-width: 1280px) {
  .h_ss2 {
    padding: 100px 30px 60px;
  }
}
@media only screen and (max-width: 768px) {
  .h_ss2 {
    padding: 60px 30px 60px;
  }
}
@media only screen and (max-width: 576px) {
  .h_ss2 {
    padding: 50px 15px 10px;
  }
}
.h_ss2 .decor {
  position: absolute;
  left: -60px;
  top: -32px;
  pointer-events: none;
}
@media only screen and (max-width: 1280px) {
  .h_ss2 .decor {
    max-width: 50%;
  }
}
@media only screen and (max-width: 576px) {
  .h_ss2 .decor {
    left: -15px;
    top: -8px;
  }
}
.h_ss2 .top {
  display: flex;
  margin-bottom: 40px;
}
@media only screen and (max-width: 768px) {
  .h_ss2 .top {
    flex-direction: column;
    margin-bottom: 20px;
  }
}
.h_ss2 .top .cm-title {
  color: var(--Text-Brown, #6B4434);
  width: 57.5213675214%;
}
@media only screen and (max-width: 1280px) {
  .h_ss2 .top .cm-title {
    width: 47.521368%;
  }
}
@media only screen and (max-width: 768px) {
  .h_ss2 .top .cm-title {
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
  }
}
.h_ss2 .top .exp {
  margin-left: 2.0512820513%;
  width: 40.4273504274%;
  color: var(--Text-Brown, #6B4434);
}
@media only screen and (max-width: 1280px) {
  .h_ss2 .top .exp {
    width: 50.42735%;
  }
}
@media only screen and (max-width: 768px) {
  .h_ss2 .top .exp {
    width: 100%;
    margin-left: 0;
  }
}
.h_ss2 .top .exp p {
  margin-bottom: 10px;
}
.h_ss2 .top .exp p:last-child {
  margin-bottom: 0;
}
.h_ss2 .mid {
  width: 100%;
  position: relative;
  margin-bottom: 32px;
}
@media only screen and (max-width: 576px) {
  .h_ss2 .mid {
    margin-bottom: 20px;
  }
}
.h_ss2 .mid .cm-decor {
  position: absolute;
  right: 0;
  top: 0;
  width: 35px;
}
.h_ss2 .mid > img:not(.cm-decor) {
  width: 100%;
}
.h_ss2 .mid .abs {
  position: absolute;
  left: 0;
  bottom: 0;
}
@media only screen and (max-width: 768px) {
  .h_ss2 .mid .abs {
    width: 180px;
  }
}
@media only screen and (max-width: 576px) {
  .h_ss2 .mid .abs {
    width: 110px;
  }
}
.h_ss2 .mid .abs img:nth-child(2) {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
}
@media only screen and (max-width: 768px) {
  .h_ss2 .mid .abs img:nth-child(2) {
    max-width: 50%;
  }
}
.h_ss2 .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 576px) {
  .h_ss2 .bottom {
    flex-direction: column;
  }
}
.h_ss2 .bottom .exp {
  width: 66.5811965812%;
}
@media only screen and (max-width: 576px) {
  .h_ss2 .bottom .exp {
    width: 100%;
    margin-bottom: 20px;
  }
}

.h_ss3 {
  padding: 100px 0 50px;
  position: relative;
  z-index: 0;
}
@media only screen and (max-width: 1280px) {
  .h_ss3 {
    padding: 70px 0 60px;
  }
}
@media only screen and (max-width: 768px) {
  .h_ss3 {
    padding: 60px 0 50px;
  }
}
@media only screen and (max-width: 576px) {
  .h_ss3 {
    padding: 50px 0;
  }
}
.h_ss3 > .decor {
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: -1;
}
.h_ss3 .decor_ss3 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  z-index: 0;
  display: block;
  object-fit: cover;
  opacity: 0.5;
  max-height: 110%;
  transform: translate(-50%, -50%);
}
@media only screen and (max-width: 576px) {
  .h_ss3 .decor_ss3 {
    max-height: unset;
    left: 0;
    top: 10%;
    transform: unset;
  }
}
.h_ss3 .cm-title {
  text-align: center;
  margin-bottom: 16px;
  color: var(--Text-Brown, #6B4434);
}
.h_ss3 > p {
  width: 41.6666666667%;
  margin: 0 auto 40px;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .h_ss3 > p {
    width: calc(100% - 60px);
    margin: 0 auto 20px;
  }
}
@media only screen and (max-width: 576px) {
  .h_ss3 > p {
    width: calc(100% - 30px);
  }
}
.h_ss3 .swiper {
  padding: 0 23.1944444444%;
}
@media only screen and (max-width: 576px) {
  .h_ss3 .swiper {
    padding: 0px 15px;
  }
}
.h_ss3 .swiper .swiper-button-next, .h_ss3 .swiper .swiper-button-prev {
  width: 40px !important;
  height: 40px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  background: var(--Bronze, #A97961);
  top: 50% !important;
  transform: translateY(-50%) !important;
}
@media only screen and (max-width: 768px) {
  .h_ss3 .swiper .swiper-button-next, .h_ss3 .swiper .swiper-button-prev {
    width: 30px !important;
    height: 30px !important;
  }
}
.h_ss3 .swiper .swiper-button-next::after, .h_ss3 .swiper .swiper-button-prev::after {
  display: none;
}
.h_ss3 .swiper .swiper-button-next:before, .h_ss3 .swiper .swiper-button-prev:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: var(--Gradient-Blue, linear-gradient(0deg, #122146 31.15%, #20315A 99.01%));
  transition: all 0.5s ease;
}
.h_ss3 .swiper .swiper-button-next svg, .h_ss3 .swiper .swiper-button-prev svg {
  z-index: 1;
}
.h_ss3 .swiper .swiper-button-next:hover::before, .h_ss3 .swiper .swiper-button-prev:hover::before {
  width: 100%;
}
.h_ss3 .swiper .swiper-button-next:hover svg path, .h_ss3 .swiper .swiper-button-prev:hover svg path {
  fill: #E8BB9C;
}
.h_ss3 .swiper .swiper-button-next {
  right: 20.9722222222% !important;
  border-left: 1px #122146 solid;
}
@media only screen and (max-width: 576px) {
  .h_ss3 .swiper .swiper-button-next {
    right: 10px !important;
  }
}
.h_ss3 .swiper .swiper-button-prev {
  left: 21.0416666667% !important;
  border-right: 1px #122146 solid;
}
@media only screen and (max-width: 576px) {
  .h_ss3 .swiper .swiper-button-prev {
    left: 10px !important;
  }
}
.h_ss3 .swiper .swiper-button-prev:before {
  right: 0;
  left: auto;
}
.h_ss3 .swiper .swiper-slide {
  aspect-ratio: 772/480;
  position: relative;
  border-radius: 16px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.h_ss3 .swiper .swiper-slide:after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 0;
  border-radius: 16px;
}
.h_ss3 .swiper .swiper-slide.swiper-slide-active::after, .h_ss3 .swiper .swiper-slide.swiper-slide-active .abs, .h_ss3 .swiper .swiper-slide.swiper-slide-active .desc {
  opacity: 1;
}
.h_ss3 .swiper .swiper-slide.swiper-slide-active > .img {
  height: 100%;
}
.h_ss3 .swiper .swiper-slide:hover > .img img {
  transform: scale(1.2);
}
.h_ss3 .swiper .swiper-slide:hover .abs .see-more {
  opacity: 1;
  height: auto;
}
.h_ss3 .swiper .swiper-slide:hover .abs h3 {
  margin-bottom: 8px;
}
.h_ss3 .swiper .swiper-slide:hover .desc {
  transform: translateX(0%);
}
.h_ss3 .swiper .swiper-slide > .img {
  border-radius: 16px;
  height: calc(100% - 94px);
  transition: all 0.5s ease;
  width: 100%;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .h_ss3 .swiper .swiper-slide > .img {
    height: calc(100% - 60px);
  }
}
.h_ss3 .swiper .swiper-slide > .img img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  transition: all 0.5s ease;
}
.h_ss3 .swiper .swiper-slide .abs {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0;
  transition: all 0.5s ease;
  padding: 40px;
}
@media only screen and (max-width: 1280px) {
  .h_ss3 .swiper .swiper-slide .abs {
    padding: 20px 40px;
  }
}
@media only screen and (max-width: 768px) {
  .h_ss3 .swiper .swiper-slide .abs {
    padding: 20px 40px 10px;
  }
}
.h_ss3 .swiper .swiper-slide .abs p {
  color: var(--White, #FDFDFD);
  text-transform: uppercase;
  margin-bottom: 8px;
}
@media only screen and (max-width: 1280px) {
  .h_ss3 .swiper .swiper-slide .abs p {
    margin-bottom: 4px;
  }
}
.h_ss3 .swiper .swiper-slide .abs h3 {
  color: var(--White, #FDFDFD);
  text-transform: uppercase;
  font-size: 40px;
  line-height: 120%;
}
@media only screen and (max-width: 1280px) {
  .h_ss3 .swiper .swiper-slide .abs h3 {
    font-size: 25px;
  }
}
@media only screen and (max-width: 768px) {
  .h_ss3 .swiper .swiper-slide .abs h3 {
    font-size: 20px;
  }
}
.h_ss3 .swiper .swiper-slide .abs .see-more {
  display: flex;
  align-items: center;
  color: var(--White, #FDFDFD);
  opacity: 0;
  transition: all 1s ease;
  border-bottom: var(--White, rgba(253, 253, 253, 0.1019607843)) 1px solid;
  width: max-content;
  padding-bottom: 2px;
  height: 0;
}
.h_ss3 .swiper .swiper-slide .abs .see-more img {
  margin: 2px 0 0 4px;
}
.h_ss3 .swiper .swiper-slide .desc {
  position: absolute;
  right: 0;
  background-origin: 0;
  background: var(--Bronze, #A97961);
  opacity: 0;
  transition: all 0.5s ease;
  bottom: 0;
  z-index: 1;
  padding: 24px;
  color: var(--White, #FDFDFD);
  border-radius: 25px 0 0 0;
  transform: translateX(100%);
}
.h_ss3 .swiper .swiper-slide .desc .cm-decor2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
}
.h_ss3 .swiper .swiper-slide .desc div {
  display: flex;
  align-items: center;
  border-bottom: var(--White, rgba(253, 253, 253, 0.1019607843)) 1px solid;
  padding: 8px 0;
}
.h_ss3 .swiper .swiper-slide .desc div:last-child {
  border-bottom: none;
}
.h_ss3 .swiper .swiper-slide .desc div p:nth-child(1) {
  font-weight: 700;
  width: 87px;
}
.h_ss3 .cm-button {
  margin: 40px auto 0;
}
@media only screen and (max-width: 576px) {
  .h_ss3 .cm-button {
    margin: 30px auto 0;
  }
}

.h_ss4 > img {
  width: 100%;
  margin-bottom: -5px;
}
@media only screen and (max-width: 768px) {
  .h_ss4 > img {
    margin-bottom: 5px;
  }
}
.h_ss4 #fan-quote-654 iframe {
  background: transparent !important;
}
.h_ss4 > .cm-title {
  background: var(--Gradient-Blue, linear-gradient(0deg, #122146 31.15%, #20315A 99.01%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 1;
  display: none;
}
@media only screen and (max-width: 768px) {
  .h_ss4 > .cm-title {
    display: block;
    text-align: center;
    padding-top: 50px !important;
  }
}
.h_ss4 .content {
  background: rgba(255, 255, 255, 0);
  padding: 88px 9.375% 88px;
  display: flex;
  position: relative;
  z-index: 0;
  align-items: center;
}
@media only screen and (max-width: 1280px) {
  .h_ss4 .content {
    padding: 60px 30px 60px;
  }
}
@media only screen and (max-width: 768px) {
  .h_ss4 .content {
    flex-direction: column-reverse;
    padding: 40px 30px 60px;
  }
}
@media only screen and (max-width: 576px) {
  .h_ss4 .content {
    padding: 20px 0 50px;
  }
}
.h_ss4 .content .decor_ss4 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 90%;
  pointer-events: none;
  z-index: 4;
}
@media only screen and (max-width: 768px) {
  .h_ss4 .content .decor_ss4 {
    bottom: 0;
    top: unset;
    transform: unset;
  }
}
.h_ss4 .content .left {
  width: 52.9914529915%;
  margin-right: 3.4188034188%;
  position: relative;
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 1280px) {
  .h_ss4 .content .left {
    width: 56.4102564103%;
    margin-right: 0%;
  }
}
@media only screen and (max-width: 768px) {
  .h_ss4 .content .left {
    width: 100%;
  }
}
.h_ss4 .content .left::before {
  position: absolute;
  right: 3px;
  width: 60%;
  background: #fff;
  content: "";
  top: 50px;
  height: 110px;
  z-index: 1;
}
@media only screen and (max-width: 1450px) {
  .h_ss4 .content .left::before {
    width: 0%;
  }
}
@media only screen and (max-width: 1280px) {
  .h_ss4 .content .left::before {
    width: 0%;
  }
}
@media only screen and (max-width: 768px) {
  .h_ss4 .content .left::before {
    top: 10px;
    width: 0%;
  }
}
@media only screen and (max-width: 576px) {
  .h_ss4 .content .left::before {
    width: 0%;
  }
}
.h_ss4 .content .left > div:nth-child(2) {
  position: relative;
  margin-top: -30px;
  margin-bottom: -46px;
  z-index: 0;
}
.h_ss4 .content .left > div:nth-child(2):after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  right: 0;
  bottom: 0;
  border: 2px #fff solid;
  content: "";
  pointer-events: none;
}
.h_ss4 .content .left > div:nth-child(2)::before {
  position: absolute;
  right: 0px;
  width: 100%;
  background: #fff;
  content: "";
  top: 0px;
  height: 40px;
  z-index: 1;
}
.h_ss4 .content .left .cm-title {
  background: var(--Gradient-Blue, linear-gradient(0deg, #122146 31.15%, #20315A 99.01%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .h_ss4 .content .left .cm-title {
    display: none;
  }
}
.h_ss4 .content .left .bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  z-index: 1;
}
@media only screen and (max-width: 576px) {
  .h_ss4 .content .left .bot {
    flex-direction: column;
    padding-top: 30px;
  }
}
.h_ss4 .content .left .bot > p {
  background: var(--Gradient-Blue, linear-gradient(0deg, #122146 31.15%, #20315A 99.01%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 18px;
  line-height: 130%;
}
@media only screen and (max-width: 576px) {
  .h_ss4 .content .left .bot > p {
    font-size: 16px;
    margin-bottom: 20px;
  }
}
.h_ss4 .content .right {
  width: 42.735042735%;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
@media only screen and (max-width: 768px) {
  .h_ss4 .content .right {
    width: 100%;
  }
}
.h_ss4 .content .right img {
  width: 22.64px;
  margin: 0 auto 24px;
}
@media only screen and (max-width: 1280px) {
  .h_ss4 .content .right img {
    width: 20px;
    margin: 0 auto 15px;
  }
}
.h_ss4 .content .right p {
  background: var(--Gradient-Blue, linear-gradient(0deg, #122146 31.15%, #20315A 99.01%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 40px;
  text-align: center;
  line-height: 120%;
}
@media only screen and (max-width: 1280px) {
  .h_ss4 .content .right p {
    font-size: 30px;
    margin-bottom: 10px;
  }
}
@media only screen and (max-width: 768px) {
  .h_ss4 .content .right p {
    font-size: 20px;
  }
}
.h_ss4 .content .right span {
  background: var(--Gradient-Blue, linear-gradient(0deg, #122146 31.15%, #20315A 99.01%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-weight: 700;
  line-height: 130%;
  display: block;
  margin-top: 16px;
  padding: 5px 0;
}
@media only screen and (max-width: 768px) {
  .h_ss4 .content .right span {
    margin-top: 10px;
  }
}

.h_ss5 {
  display: flex;
  position: relative;
  background: var(--Bronze, #A97961);
  padding: 130px 9.375% 80px;
  margin-top: 40px;
  z-index: 0;
}
@media only screen and (max-width: 1280px) {
  .h_ss5 {
    padding: 80px 30px 60px;
    margin-top: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .h_ss5 {
    flex-direction: column;
    padding: 50px 30px 60px;
  }
}
@media only screen and (max-width: 576px) {
  .h_ss5 {
    padding: 50px 15px 60px;
  }
}
.h_ss5 .decor_ss5 {
  position: absolute;
  left: 0;
  top: -40px;
  width: 100%;
  display: block;
}
@media only screen and (max-width: 1450px) {
  .h_ss5 .decor_ss5 {
    top: -30px;
  }
}
@media only screen and (max-width: 1280px) {
  .h_ss5 .decor_ss5 {
    top: -20px;
  }
}
@media only screen and (max-width: 768px) {
  .h_ss5 .decor_ss5 {
    top: -15px;
  }
}
@media only screen and (max-width: 576px) {
  .h_ss5 .decor_ss5 {
    top: -8px;
  }
}
.h_ss5 .left {
  width: 25.641025641%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 24px;
}
@media only screen and (max-width: 768px) {
  .h_ss5 .left {
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .h_ss5 .left .cm-button {
    display: none;
  }
}
.h_ss5 .right {
  width: 74.358974359%;
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (max-width: 768px) {
  .h_ss5 .right {
    width: 100%;
  }
}
.h_ss5 .right .news {
  display: flex;
  flex-direction: column;
  width: calc((100% - 48px) / 3);
  margin-right: 24px;
  margin-bottom: 24px;
}
@media only screen and (max-width: 1280px) {
  .h_ss5 .right .news {
    width: calc((100% - 40px) / 3);
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 576px) {
  .h_ss5 .right .news {
    width: calc((100% - 15px) / 2);
    margin-right: 15px;
    margin-bottom: 15px;
  }
}
.h_ss5 .right .news:nth-of-type(3n + 3) {
  margin-right: 0;
}
@media only screen and (max-width: 576px) {
  .h_ss5 .right .news:nth-of-type(3n + 3) {
    margin-right: 15px;
  }
}
@media only screen and (max-width: 576px) {
  .h_ss5 .right .news:nth-of-type(2n + 2) {
    margin-right: 0;
  }
}
.h_ss5 .right .news:hover .img img {
  transform: scale(1.2);
}
.h_ss5 .right .news:hover .img .exp {
  transform: translateX(0);
}
.h_ss5 .right .news .img {
  aspect-ratio: 274/260;
  margin-bottom: 16px;
  border-radius: 16px 0 0 0;
  position: relative;
  overflow: hidden;
}
.h_ss5 .right .news .img .exp {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 24px;
  border-radius: 16px 0 0 0;
  background: var(--Brown, #E8BB9C);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  transition: all 0.5s ease;
  transform: translateX(100%);
  color: var(--Text-Brown, #6B4434);
  width: 55%;
}
.h_ss5 .right .news .img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: all 0.5s ease;
  border-radius: 16px 0 0 0;
}
.h_ss5 .right .news h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  color: var(--White, #FDFDFD);
  margin-bottom: 2px;
  font-size: 14px !important;
}
@media only screen and (max-width: 1024px) {
  .h_ss5 .right .news h3 {
    font-size: 13px !important;
  }
}
.h_ss5 .right .news p {
  opacity: 0.6;
  color: var(--White, #FDFDFD);
  font-size: 10px;
}
.h_ss5 > .cm-button {
  display: none;
}
@media only screen and (max-width: 768px) {
  .h_ss5 > .cm-button {
    display: flex;
    margin: 20px auto 0;
  }
}
.h_ss5 .vector {
  position: absolute;
  top: 50%;
  left: 1.6666666667%;
  transform: translateY(-50%);
  z-index: -1;
}
@media only screen and (max-width: 1280px) {
  .h_ss5 .vector {
    max-width: 50%;
  }
}

/*# sourceMappingURL=style.css.map */