html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin-block: 0;
  margin-inline: 0;
  box-sizing: border-box;
  line-height: 1.5em
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block
}

body {
  line-height: 1
}

ol,
ul {
  list-style: none
}

blockquote,
q {
  quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none
}

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

a {
  color: inherit;
  text-decoration: none
}

:root {
  --color-black: #000;
  --color-white: #fff;
  --color-gray: #f6f6f6;
  --color: #3c77a0;
  --font-color: #666;
  font-size: 100px
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px
}

::-webkit-scrollbar-track {
  background: transparent;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em
}

::-webkit-scrollbar-thumb {
  background-color: rgb(60, 119, 160, .8);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em
}

@font-face {
  font-family: "Quick";
  font-display: swap;
  src: url("/fonts/Quicksand-Regular.ttf") format("truetype")
}

@font-face {
  font-family: "Quick-Medium";
  font-display: swap;
  src: url("/fonts/Quicksand-Medium.ttf") format("truetype")
}

@font-face {
  font-family: "Quick-Bold";
  font-display: swap;
  src: url("/fonts/Quicksand-Bold.ttf") format("truetype")
}

html body {
  font-family: Quick-Medium;
  font-size: .16rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5em;
  color: var(--font-block);
  font-variant: normal;
  overflow-x: hidden
}

h1,
h2,
h3,
h4,
h5,
strong {
  font-family: Quick-semiBold;
  font-family: Quick-Medium
}

body * {
  transition: background-color .5s linear, color .3s linear;
  text-rendering: optimizeSpeed
}

html,
body {
  -ms-overflow-style: none;
  scrollbar-width: none
}

::-webkit-scrollbar-thumb {
  display: none;
  width: 0;
  height: 0
}

:root {
  --color-light-rgb: 0, 0, 0;
  --color-white: #fff;
  --color-black: #000;
  --color-gray: #9d9d9d;
  --color-blue: #005aeb;
  --color-light-blue: #0032ff;
  --color-off-white: #f0f0f0;
  --color-yellow: #fffa4e;
  --color-bg: #e6e6dc;
  --font-tech: "Share Tech Mono", monospace;
  --font-ibm: "IBM Plex Mono", monospace;
  --font-ibmJP: "IBM Plex Sans JP", sans-serif;
  --font-coprec: coprec, monospace;
  --font-inter: "Inter", sans-serif;
  --color-red: rgb(157, 41, 51);
  --transition: all .3s linear;
  --animation-primary: .4s cubic-bezier(.85, 0, .15, 1)
}

html body.dark {
  --color-white: #000;
  --color-black: #fff
}

body.dark {
  cursor: url("/img/cross-cursor-white.svg") 16 16, auto
}

body.dark a:hover {
  cursor: url("/img/hover-cursor-white.svg") 16 16, auto
}

html body.scrollDark {
  --color-white: #000;
  --color-black: #fff
}

.p_ab {
  position: absolute
}

img {
  width: 100%;
  max-width: 100%;
  max-height: 100%
}

.display_flex {
  display: flex;
  align-items: center;
  justify-content: center
}

.h_50 {
  height: .5rem;
  line-height: .5rem
}

.t_r {
  text-align: right
}

.roundDot::before {
  content: "";
  display: block;
  width: .1rem;
  height: .1rem;
  border-radius: 50%;
  background: var(--color-black);
  position: absolute;
  top: 50%;
  left: .1rem;
  transform: translateY(-50%);
  transition: all .3s ease 0s;
  opacity: 0
}

.roundDot:hover::before,
.roundDot.active::before {
  opacity: 1
}

.r_line::before,
.l_line::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  background-color: var(--color-black);
  width: 1px;
  height: 100%;
  display: block
}

.r_line::before {
  left: unset;
  right: 0
}

.t_line::after,
.b_line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  background-color: var(--color-black);
  width: 100%;
  height: 1px;
  display: block
}

.b_line::after {
  top: unset;
  bottom: 0
}

.container {
  margin: 0 auto
}

body {
  cursor: url("/img/cross-cursor-black.svg") 16 16, auto
}

body::-webkit-scrollbar {
  display: none
}

body {
  -ms-overflow-style: none;
  scrollbar-width: none
}

a:hover,
button:hover,
input:hover {
  cursor: url("/img/hover-cursor-black.svg") 16 16, auto
}

main {
  height: auto;
  padding: 65px 15px 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--color-white)
}

main * {
  color: var(--color-black)
}

.form-input {
  width: 100%;
  border-bottom: 1px solid var(--color-black);
  padding: .24rem .23rem;
  display: flex;
  align-items: center;
  justify-content: center
}

.form-input input {
  outline: none;
  width: 100%;
  border: none;
  font-size: .2rem;
  background: none;
  color: var(--color-black)
}

.form-checkbox {
  padding: .24rem .3rem 0 .23rem;
  position: relative
}

.form-checkbox input {
  display: none
}

.form-checkbox p {
  display: inline;
  font-size: .14rem;
  line-height: 1em
}

.checkbox_span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-black);
  position: absolute;
  top: .275rem;
  left: .23rem
}

.checkbox_span:hover {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .2)
}

.checkbox_span::after {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  border-color: var(--color-black);
  border-width: 0 1px 1px 0;
  height: 50%;
  width: 25%;
  margin-top: -20%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  display: none
}

.checkbox_span.click::after {
  display: block
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg)
  }

  10% {
    transform: translate(-1px, -2px) rotate(-1deg)
  }

  20% {
    transform: translate(-3px, 0) rotate(1deg)
  }

  30% {
    transform: translate(3px, 2px) rotate(0deg)
  }

  40% {
    transform: translate(1px, -1px) rotate(1deg)
  }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg)
  }

  60% {
    transform: translate(-3px, 1px) rotate(0deg)
  }

  70% {
    transform: translate(3px, 1px) rotate(-1deg)
  }

  80% {
    transform: translate(-1px, -1px) rotate(1deg)
  }

  90% {
    transform: translate(1px, 2px) rotate(0deg)
  }

  100% {
    transform: translate(1px, -2px) rotate(-1deg)
  }
}

main {
  opacity: 0;
  transition: opacity .5s linear .5s
}

.load main {
  opacity: 1
}

.about_cont .about_cont_item {
  align-items: stretch !important
}

.about_cont_img {
  flex-grow: 1;
  overflow: hidden;
  border-right: 1px solid var(--color-black)
}

.about_cont_img img {
  max-height: unset;
  width: auto;
  height: 100%;
  max-width: unset;
  min-width: 100%
}

.about_cont .about_cont_item:nth-child(2n) {
  display: flex;
  flex-direction: row-reverse;
  align-items: normal
}

.about_cont .about_cont_item:nth-child(2n) img,
.about_cont .about_cont_item:nth-child(2n) .about_cont_img {
  border-right: none
}

.about_cont_text.link_thumb {
  border-right: 1px solid var(--color-black)
}

.about_cont_item>div {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: baseline
}

.about_cont_text>span {
  width: unset
}

.about_cont_text>p {
  font-size: .24rem
}

@media (max-width:1200px) {

  .about_cont_text>h4,
  .about_cont_text>span {
    font-size: 18px
  }

  main .other_nav li a,
  .about_cont_text>p {
    font-size: 14px !important
  }
}

@media (max-width:767px) {

  .about_cont .about_cont_item img,
  .about_cont_text.link_thumb {
    border: none
  }
}

.slide {
  width: 100%;
  position: relative
}

.slide>p {
  color: var(--color-black);
  font-size: .1rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  position: absolute;
  top: 50%;
  left: 15px;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: translateY(-50%)
}

.slide>p:nth-child(2) {
  right: 15px;
  left: unset;
 
}

.main_button {
  width: 3rem;
  height: .4rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 0;
  padding: 0;
  transition: all .3s ease 0s;
  margin-top: .2rem
}

main .main_button:hover {
  background-color: var(--color-red);
  opacity: 1
}

main .main_button:hover .link_thumb_icon.black span {
  background-color: var(--color-white);
  transition: all .3s ease 0s
}

.main_button a::before {
  transition: all .3s ease 0s
}

main .main_button:hover a::before {
  background-color: var(--color-white)
}

main .main_button:hover a {
  color: var(--color-white)
}

.main_button a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  padding: .1rem;
  font-size: .17rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .85px;
  line-height: 1.2;
  text-align: left;
  color: var(--color-black)
}

.about {
  width: 100%
}

.main {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  max-width: 9.6rem;
  margin: 0 auto
}

.main .tit {
  font-size: .17rem;
  font-weight: 400;
  margin: 0;
  font-family: Quick-Medium
}

.main h3 {
  font-size: .3rem;
  font-weight: 600;
  line-height: 1.5em;
  text-transform: uppercase
}

.main h3 strong {
  display: block
}

.main_img {
  width: 100%;
  max-width: 960px;
  flex-shrink: 0;
  margin: .45rem 0;
  aspect-ratio: 960 / 540
}

.main_cont {
  display: flex
}

.line_o {
  width: 100%;
  height: 1px;
  background: var(--color-black);
  max-width: 9.6rem;
  margin: 0 auto
}

.proImg_left img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.o_main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 0
}

.container {
  max-width: 9.6rem;
  margin: 0 auto;
  display: flex;
  position: relative
}

.o_nav {
  align-items: flex-start
}

.content {
  width: 100%;
  height: 100%;
  position: relative
}

.o_slide {
  position: sticky;
  width: 100%;
  height: 0;
  display: flex;
  justify-content: space-between;
  top: 50%;
  transform: translateY(-50%)
}

.o_slide .slide_item {
  position: absolute;
  opacity: 0.5;
  color: var(--color-black);
  top: 0;
  left: 15px;
  font-size: .1rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  writing-mode: vertical-rl;
  display: block;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: Quick
}

.o_slide .slide_item:nth-child(2) {
  left: unset;
  right: 15px;
}

.reser {
  cursor: url("/img/cross-cursor-white.svg") 16 16, auto
}

.dark .reser {
  cursor: url("/img/cross-cursor-black.svg") 16 16, auto
}

.footer_left:hover {
  cursor: url(/img/hover-cursor-black.svg) 16 16, auto
}

.main_cont p {
  line-height: 1.5em;
  margin: .1rem 0
}

.list_right p {
  transition: all .5s linear
}

.list_right li:hover p {
  background: var(--color-red);
  color: var(--color-white)
}

.button_box>div a {
  transition: all .5s linear
}

.button_box>div:hover a {
  background: var(--color-red);
  color: var(--color-white)
}

.o_main .list_nav {
  background: var(--color-whte)
}

.main_button a {
  text-transform: uppercase;
  font-family: Quick
}

@media (max-width:1200px) {
  html body {
    font-size: 16px
  }
}

.add_left .add_left_img {
  display: block;
  position: relative;
  width: 100%
}

.add_left .add_left_img img {
  display: block
}

.add_left .add_left_img::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--color-black);
  opacity: .3
}

.add_left .add_cont,
.add_left .add_tit {
  padding: .1rem;
  font-size: .16rem;
  font-weight: 500;
  border: 1px solid var(--color-black)
}

.add_left .add_cont h3 {
  font-size: .18rem;
  margin-block: .1rem
}

:deep() .content_desc p {
  font-size: .2rem !important
}

:deep() .content_desc h3 {
  font-size: .22rem !important;
  font-weight: 600 !important
}

:deep() .content_desc a {
  text-decoration: underline;
  color: var(--color-red)
}

@media (max-width:960px) {
  :deep() .content_desc p {
    font-size: .14rem !important
  }

  :deep() .content_desc h3 {
    font-size: .18rem !important
  }

  .load .language {
    flex-wrap: wrap;
    padding-right: 0 !important
  }

  .language>a {
    border-left: 0 !important;
    border-bottom: 1px solid var(--color-black);
    width: 100%
  }

  .language_menu li a {
    margin: 0 auto
  }

  .language_menu {
    display: flex;
    flex-wrap: wrap
  }
}

@media (min-width:961px) {
  .proImg_right_bottom p {
    font-size: .18rem;
    font-family: Quick
  }

  .list_right .list_item p {
    font-size: .16rem
  }

  .list_nav a,
  .sol_list_left h3 {
    font-size: .2rem
  }

  .nav_item_sub a {
    font-size: .18rem
  }

  .list_item table td,
  .proImg table td,
  .desc_list li .desc,
  .sol_list_left .sol_desc {
    font-size: .16rem !important
  }

  .h30 {
    height: 30px;
  }
 

}