:root { --columns: 12; --gutters: 20px; --outside-gutters: 25px; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 62.5%; }

.bg-black { background: #101010; }

.font-white { color: #fff; }

ul { list-style: none; }

.widget-text { transform-origin: 50% 50%; animation: rotate 8s infinite linear; }

.swiper-container img { transform: scale(1); }

@keyframes rotate { 0% { transform: rotate(0); }
  100% { transform: rotate(360deg); } }

.widget { position: fixed; bottom: 20%; right: 20px; display: none; z-index: 1000; }

.active1 { display: block; }

.pad-x { max-width: 1920px; padding-left: var(--outside-gutters); padding-right: var(--outside-gutters); }

.banner-wrap { width: 100%; position: relative; min-height: 100vh; font-weight: lighter; }

.banner-wrap .banner-bg { position: relative; height: 100vh; }

.banner-wrap .banner-bg img { width: 100%; height: 100%; transform: scale(1); object-fit: cover; }

.banner-wrap .banner-text { width: 100%; color: #fff; position: absolute; z-index: 2000; bottom: 10vh; }

.banner-wrap .banner-text p { font-size: 8rem; line-height: 10rem; border-bottom: 1px solid rgba(237, 237, 237, 0.35); padding-bottom: 2rem; margin-bottom: 2rem; }

.banner-wrap .banner-text span { display: block; font-size: 1.8rem; }

.banner-wrap .swiper-active img { transform: scale(1.1); transition: all 5.5s ease-out; }

.header { width: 100%; height: 80px; position: fixed; z-index: 2000; top: 0; left: 0px; background-image: linear-gradient(to bottom, #1d1d1d, rgba(29, 29, 29, 0)); }

.header .container { display: flex; justify-content: space-between; align-items: center; }

.header .logo { top: 0px; cursor: pointer; position: absolute; z-index: 3500; height: 70px; }

.header .logo img { height: 70px; }

.header ul { list-style: none; display: flex; }

.body-wrap-bg { top: 0; position: fixed; width: 100%; height: 100%; background: radial-gradient(#553b37 15%, #3f3631 30%, #101010 70%) no-repeat center top; opacity: 0; visibility: hidden; background-size: 800px 800px; }

.body-wrap-bg2 { top: 0; position: fixed; width: 100%; height: 100%; background: radial-gradient(#20414e 15%, #243132 30%, #101010 70%) no-repeat center top; opacity: 0; visibility: hidden; background-size: 800px 800px; }

.body-wrap-bg3 { top: 0; position: fixed; width: 100%; height: 100%; background: radial-gradient(#222823 15%, #2a1f1a 30%, #101010 70%) no-repeat center top; opacity: 0; visibility: hidden; background-size: 800px 800px; }

.body-wrap .slogan1 { padding-top: 14rem; margin-bottom: 10rem; }

.body-wrap .slogan1 .p1 { text-align: center; font-size: 8rem; font-weight: lighter; }

.body-wrap .slogan1 .p2 { text-align: center; font-size: 1.6rem; padding-top: 3rem; line-height: 2.5rem; font-weight: lighter; }

.body-wrap .slogan2 { padding-top: 14rem; margin-bottom: 10rem; }

.body-wrap .slogan2 .p31 { text-align: center; font-size: 8rem; font-weight: lighter; }

.body-wrap .slogan2 .p32 { text-align: center; font-size: 1.6rem; padding-top: 3rem; line-height: 2.5rem; font-weight: lighter; }

.body-wrap .slogan3 { padding-top: 14rem; margin-bottom: 10rem; }

.body-wrap .slogan3 .p41 { text-align: center; font-size: 8rem; font-weight: lighter; }

.body-wrap .slogan3 .p42 { text-align: center; font-size: 1.6rem; padding-top: 3rem; line-height: 2.5rem; font-weight: lighter; }

.body-wrap .part2-wrap { display: grid; grid-template-columns: repeat(var(--columns), minmax(0px, 1fr)); gap: 8rem 1.6rem; position: relative; align-items: flex-start; overflow: hidden; }

.body-wrap .part2-wrap img { display: block; width: 85%; margin-left: auto; margin-right: auto; }

.body-wrap .part2-wrap .part21 { grid-column: 2 / span 5; border-bottom: 1px solid rgba(255, 255, 255, 0.24); padding-bottom: 3rem; }

.body-wrap .part2-wrap .part22 { grid-column: 8 / span 4; border-bottom: 1px solid rgba(255, 255, 255, 0.24); padding-bottom: 3rem; margin-top: 50px; }

.body-wrap .part2-wrap .part23 { grid-column: 2 / span 4; border-bottom: 1px solid rgba(255, 255, 255, 0.24); padding-bottom: 3rem; margin-top: 50px; }

.body-wrap .part2-wrap .part24 { grid-column: 7 / span 5; border-bottom: 1px solid rgba(255, 255, 255, 0.24); padding-bottom: 3rem; }

.body-wrap .part2-wrap .p1 { font-size: 4.8rem; font-weight: lighter; padding-top: 2rem; padding-bottom: 0.5rem; }

.body-wrap .part2-wrap .p2 { font-size: 1.8rem; font-weight: lighter; }

.body-wrap .part2-wrap2 { padding-top: 10rem; }

.body-wrap .part3-wrap li { background: linear-gradient(to bottom, #292e3b, rgba(29, 29, 29, 0)); padding: 4rem 4rem; position: relative; }

.body-wrap .part3-wrap li .p1 { font-size: 1.4rem; color: #82848b; }

.body-wrap .part3-wrap li .p2 { font-size: 2.4rem; color: #fff; padding: 1.4rem 0; }

.body-wrap .part3-wrap li .p3 { font-size: 1.4rem; color: #82848b; text-align: justify; }

.body-wrap .part3-wrap li:nth-child(1) { grid-column: 1 / span 4; }

.body-wrap .part3-wrap li:nth-child(2) { grid-column: 5 / span 4; }

.body-wrap .part3-wrap li:nth-child(3) { grid-column: 9 / span 4; }

.footer-wrap { padding-bottom: 10rem !important; }

.footer-wrap #backToTop { cursor: pointer; display: flex; justify-content: start; padding-left: 70%; padding-bottom: 2rem; }

.footer-wrap #backToTop span { font-size: 1.5rem; color: #797a7a; padding-left: 0.8rem; padding-top: 3px; }

.footer { border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); height: 30rem; display: flex; position: relative; justify-content: space-between; padding-bottom: 2rem; padding-top: 1rem; }

.footer .footer-left { width: 40%; display: flex; flex-direction: column; justify-content: space-between; }

.footer .footer-left img { width: 16rem; }

.footer .footer-left p { font-size: 1.2rem; line-height: 2rem; opacity: 0.5; }

.footer .footer-right { width: 30%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }

.footer .footer-right .content { border-bottom: 1px solid rgba(255, 255, 255, 0.2); width: 100%; }

.footer .footer-right .telUs { position: relative; display: inline-block; font-size: 1.4rem; border-radius: 20px; padding: 6px 18px 6px 30px; margin-top: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.2); }

.footer .footer-right .telUs::before { content: ''; position: absolute; left: 1.6rem; top: 1.1rem; height: 9px; width: 9px; border-radius: 50%; background: #ffad4c; }

.footer .footer-right .telNum { font-size: 3rem; padding: 1rem 0; }

.footer .footer-right .telNum a { color: #fff; text-decoration: none; }

.footer .footer-right .address { font-size: 1.4rem; display: flex; }

.footer .footer-right .address img { height: 3rem; padding-right: 1rem; }

.footer .footer-right .wx { font-size: 1.4rem; }

.nav { position: absolute; right: 0; top: 20px; right: 25px; color: #fff; font-size: 1.5rem; }

.nav li { margin-left: 1rem; }

.nav li .active { background: none !important; border: 1px solid rgba(255, 255, 255, 0.4); }

.nav a { color: #fff; text-decoration: none; display: block; padding: 1rem 2.5rem; border-radius: 100px; transition: all 400ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.nav a:hover { cursor: pointer; background: rgba(22, 22, 22, 0.8); transition: all 500ms; }

.nav .contactUs { display: flex; align-items: center; background: #fff !important; border-radius: 100px; color: #222 !important; }

.nav .contactUs span { margin-left: 1rem; display: inline-block; position: relative; width: 16px; height: 8px; overflow: hidden; }

.nav .contactUs span img { transition: all 400ms; position: absolute; right: 0px; top: 0px; }

.nav .contactUs:hover { background: #fff !important; border-radius: 100px; color: #222 !important; }

.nav .contactUs:hover img { position: absolute; transform: translateX(50%); top: 0px; }

.mobile-menu { display: none; }

.menu-button { display: none; }

.menu-button2 { display: none; }

@media screen and (max-width: 1440px) { .body-wrap .part3-wrap li { display: block; padding: 1rem 2.5rem; } }

@media screen and (max-width: 1200px) { .body-wrap .part3-wrap li { padding: 1rem 2.5rem; } }

@media screen and (max-width: 1024px) { .forbidden { transform: translate(0) !important; }
  .nav { display: none !important; }
  .menu-button { position: fixed; z-index: 3000; right: 25px; top: 20px; height: 3rem; width: 3rem; padding: 0.5rem; display: block; }
  .menu-button:hover { cursor: pointer; }
  .mobileActive { display: block; }
  .mobile-menu { position: fixed; top: 0px; right: 0px; height: 100vh; width: 100vw; overflow: hidden; background: #000; background: linear-gradient(to bottom, #000, #091918); z-index: 1500; }
  .menu-button2 { position: fixed; z-index: 3000; right: 25px; top: 20px; display: none; }
  .nav-m { display: block !important; position: absolute; top: 10rem; right: 25px; }
  .nav-m li { cursor: pointer; margin-top: 2rem; margin-bottom: 4rem; text-align: right; }
  .nav-m a { text-align: right; text-decoration: none; color: rgba(255, 255, 255, 0.25); font-size: 2.6rem; padding: 1rem 0rem; }
  .nav-m .active { color: #fff; position: relative; }
  .nav-m .active::after { content: ''; position: absolute; bottom: 0; right: 0; height: 2px; width: 100%; background: linear-gradient(to right, #FFAD4C, #fff); }
  .mobileBtnActive .menu-button { display: none; }
  .mobileBtnActive .menu-button2 { display: block; }
  .banner-wrap .banner-text p { font-size: 7rem; line-height: 8.5rem; border-bottom: 1px solid rgba(237, 237, 237, 0.35); padding-bottom: 2rem; margin-bottom: 2rem; }
  .body-wrap .slogan1 { padding-top: 12rem; margin-bottom: 9rem; }
  .body-wrap .slogan1 .p1 { font-size: 7rem; }
  .body-wrap .part2-wrap .p1 { font-size: 3.5rem; padding-top: 2rem; padding-bottom: 0.5rem; }
  .body-wrap .part2-wrap .p2 { font-size: 1.6rem; font-weight: lighter; }
  .body-wrap .slogan2 .p31 { font-size: 7rem; }
  .body-wrap .part3-wrap li { padding: 1rem 2.5rem; }
  .body-wrap .part3-wrap li .p2 { font-size: 2rem; padding: 1rem 0; }
  .body-wrap .slogan3 .p41 { font-size: 7rem; }
  .footer .footer-right .telNum { font-size: 2.8rem; padding: 1rem 0; } }

@media screen and (max-width: 768px) { :root { --columns: 6; --gutters: 20px; --outside-gutters: 25px; }
  .banner-wrap .banner-text p { font-size: 5rem; line-height: 6.5rem; border-bottom: 1px solid rgba(237, 237, 237, 0.35); padding-bottom: 2rem; margin-bottom: 2rem; }
  .banner-wrap .banner-text span { display: block; font-size: 1.45rem; }
  .body-wrap .slogan1 { padding-top: 7rem; margin-bottom: 4rem; }
  .body-wrap .slogan1 .p1 { font-size: 5rem; }
  .body-wrap .slogan2 .p31 { font-size: 5rem; padding: 0 8rem; }
  .body-wrap .slogan2 .p32 { font-size: 1.4rem; padding-top: 3rem !important; line-height: 2.5rem; font-weight: lighter; }
  .body-wrap-bg { top: 20vh; background-size: 350px 350px; }
  .body-wrap-bg2 { top: 20vh; background-size: 350px 350px; }
  .body-wrap-bg3 { top: 20vh; background-size: 350px 350px; }
  .body-wrap .part2-wrap img { display: block; width: 100%; margin-left: auto; margin-right: auto; }
  .body-wrap .part2-wrap .part21 { grid-column: 1 / span 5; border-bottom: 1px solid rgba(255, 255, 255, 0.24); padding-bottom: 2rem; }
  .body-wrap .part2-wrap .part22 { grid-column: 2 / span 5; border-bottom: 1px solid rgba(255, 255, 255, 0.24); padding-bottom: 2rem; margin-top: 0px; }
  .body-wrap .part2-wrap .part23 { grid-column: 1 / span 5; border-bottom: 1px solid rgba(255, 255, 255, 0.24); padding-bottom: 2rem; margin-top: 50px; }
  .body-wrap .part2-wrap .part24 { grid-column: 2 / span 5; border-bottom: 1px solid rgba(255, 255, 255, 0.24); padding-bottom: 2rem; }
  .body-wrap .part2-wrap .p1 { font-size: 3.8rem; font-weight: lighter; padding-top: 2rem; padding-bottom: 0.5rem; }
  .body-wrap .part2-wrap .p2 { font-size: 1.6rem; font-weight: lighter; }
  .body-wrap .part2-wrap2 { padding-top: 0rem; }
  .body-wrap .part3-wrap li { padding: 2rem 4rem; position: relative; }
  .body-wrap .part3-wrap li .p1 { font-size: 1.4rem; color: #82848b; }
  .body-wrap .part3-wrap li .p2 { font-size: 2rem; color: #fff; padding: 1.2rem 0; }
  .body-wrap .part3-wrap li .p3 { font-size: 1.3rem; color: #82848b; }
  .body-wrap .part3-wrap li:nth-child(1) { grid-column: 1 / span 6; }
  .body-wrap .part3-wrap li:nth-child(2) { grid-column: 1 / span 6; }
  .body-wrap .part3-wrap li:nth-child(3) { grid-column: 1 / span 6; }
  .body-wrap .slogan3 .p41 { font-size: 4.5rem; }
  .body-wrap .slogan3 .p42 { text-align: center; font-size: 1.4rem; padding-top: 2rem !important; line-height: 2.5rem; font-weight: lighter; }
  .footer { border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); height: auto; display: flex; flex-direction: column-reverse; position: relative; justify-content: space-between; padding-bottom: 2rem; padding-top: 1rem; }
  .footer .footer-left { padding-top: 8rem; width: 100%; display: flex; flex-direction: column; justify-content: space-between; }
  .footer .footer-left img { width: 12rem; }
  .footer .footer-left p { padding: 0.5rem 0; font-size: 1.4rem; line-height: 2rem; }
  .footer .footer-right { width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
  .footer .footer-right .content { border-bottom: 1px solid rgba(255, 255, 255, 0.2); width: 100%; }
  .footer .footer-right .telUs { position: relative; display: inline-block; font-size: 1.4rem; border-radius: 20px; padding: 6px 18px 6px 30px; margin-top: 1rem; border: 1px solid rgba(255, 255, 255, 0.2); }
  .footer .footer-right .telUs::before { content: ''; position: absolute; left: 1.6rem; top: 1.1rem; height: 9px; width: 9px; border-radius: 50%; background: #ffad4c; }
  .footer .footer-right .telNum { font-size: 3rem; padding: 1rem 0; }
  .footer .footer-right .telNum a { color: #fff; text-decoration: none; }
  .footer .footer-right .address { width: 100%; font-size: 1.4rem; display: flex; padding: 2rem 0 2rem 0; }
  .footer .footer-right .address img { height: 3rem; padding-right: 1rem; }
  .footer .footer-right .wx { font-size: 1.4rem; } }