.font-24 {
  --fontsize: 2.4rem;
  font-size: var(--fontsize);
}

.font-28 {
  --fontsize: 2.8rem;
  font-size: var(--fontsize);
}

.font-30 {
  --fontsize: 3.0rem;
  font-size: var(--fontsize);
}

.section .w1720,
.section .w1300 {
	height: 100%;
}

.section .box {
  width: 100%;
  height: 100%;
}

#products .box,
#about .box {
	padding: 100px 0 0;
}

#type .box,
#recommend .box {
	padding: 100px 0;
}

#visual {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
}

#visual :root {
  --vh: 100%;
}

@supports (-webkit-touch-callout: none) {
  #visual {
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
  }
}

#visual .bgBox {
  position: absolute;
  z-index: -2;
  width: 100%;
  height: 100%;
}

#visual .bgBox video {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
}

#visual .bgBox::after {
  content: "";
  display: block;
  background-image: url("/img/main/visualCover.png");
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

#visual .w1720 .visualBox {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@supports (-webkit-touch-callout: none) {
  #visual .w1720 .visualBox {
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
  }
}

#visual .w1720 .visualBox .titleBox {
  gap: 26px 0;
  text-align: center;
  margin: auto 0;
  padding: 4% 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#visual .w1720 .visualBox .titleBox .svg {
  height: auto;
}

#visual .w1720 .visualBox .titleBox .title1 {
  width: 538px;
	width: 640px;
}

#visual .w1720 .visualBox .titleBox .title2 {
  width: 600px;
	width: 714px;
}

#visual .w1720 .visualBox .titleBox p {
  color: #ffffff;
  font-size: 2.3rem;
  font-weight: 300;
  line-height: 1.6;
  margin: 15px 0 0;
}

#visual .w1720 .visualBox .markBox {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: relative;
}

#visual .w1720 .visualBox .markBox .optionBox {
  margin: 0 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#visual .w1720 .visualBox .markBox .optionBox .slideBar {
  width: 120px;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  position: relative;
}

#visual .w1720 .visualBox .markBox .optionBox .slideBar span {
  display: block;
  width: 0;
  height: 100%;
  background: #ffffff;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
}

#visual .w1720 .visualBox .markBox .optionBox b {
  display: block;
  width: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  margin: 0 18px;
}

#visual .w1720 .visualBox .markBox .optionBox .videoButton i {
  color: rgba(255, 255, 255, 0.4);
  font-size: 2.0rem;
}

#visual .w1720 .visualBox .markBox .scrollBox {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#visual .w1720 .visualBox .markBox .scrollBox span {
  display: block;
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-transform: translateY(18px);
          transform: translateY(18px);
  position: relative;
  z-index: 2;
}

#visual .w1720 .visualBox .markBox .scrollBox span::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  position: absolute;
  left: -3px;
  bottom: 0;
}

#visual .w1720 .visualBox .markBox .scrollBox .scroll {
  width: 60px;
  height: 60px;
  background: transparent;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.100em;
  position: relative;
  -webkit-transition: all 0.6s cubic-bezier(0.68, -0.55, 0.555, 1.55);
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.555, 1.55);
  font-family: 'Oswald',
 sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#visual .w1720 .visualBox .markBox .scrollBox .scroll::before {
  content: "";
  display: block;
  background: #d60000;
  border-radius: 50%;
  -webkit-transition: all 0.6s cubic-bezier(0.68, -0.55, 0.555, 1.55);
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.555, 1.55);
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#products {
  position: relative;
}

#products .bg {
  width: 36.5%;
  height: 100%;
  position: absolute;
  right: 0;
}

#products .bg img {
	width: 100%;
  height: 100%;
	object-fit: cover;
}

#products .bg::after,
#products .bg .count {
  width: 200px;
}

#products .bg::after {
  content: "";
  display: block;
  height: 67.38%;
  background: #d60000;
  position: absolute;
  left: 0;
  bottom: 0;
}

#products .bg .count {
  text-align: center;
	padding: 50px 0;
  position: absolute;
  bottom: 0;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#products .bg .count span {
  display: inline-block;
  width: 14px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 15px;
  font-weight: 200;
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
}

#products .bg .count span.number, #products .bg .count span.total {
  color: #ffffff;
  font-weight: 300;
}

#products .bg .count span.number {
  width: 45px;
  font-size: 4.0rem;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

#products .bg .count span.total {
  width: 18px;
  font-size: 13px;
}

#products .title {
  top: 11.5%;
  left: 23.95%;
}

#products .box {
	padding: 8% 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; */
	-webkit-box-pack: start;
		-ms-flex-pack: start;
			justify-content: flex-start;
}

/* 22-04-25 */
#products .box {
	position: relative;
	z-index: 2;
}

#products .box .tabContents {
	height: 100%;
}

#products .box .tabContents .item {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
}

#products .box .tabContents .item .img {
	max-width: 50%;
	margin: auto 0 0;
}

#products .box .tabContents .item .info {
	height: 100%;
	display: flex;
	flex-direction: column;
}

#products .box .tabContents .item .info .titleBox .sectionTitleH2 {
  color: #111111;
  margin: 35px 0 20px -5px;
}

#products .box .tabContents .item .info .titleBox p {
  color: #222222;
  font-weight: 800;
}

#products .box .tabContents .item .info ul {
  margin: 40px 0 0;
}

#products .box .tabContents .item .info ul li {
  color: #333333;
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: -0.030em;
  padding: 10px 0;
}

#products .box .tabContents .item .info .moreButton {
	margin: auto 0 75px;
}

/* #products .box .tabContents .item .img {
  width: 100%;
  max-width: 34.61538%;
  position: absolute;
  top: 200px;
	left: 35%;
} */

#products .box .productsTabTitle {
  height: 17.112%;
	flex-shrink: 0;
	margin: auto 0 0;
  /* margin: 80px 0 0; */
  position: relative;
}

#products .box .productsTabTitle::before,
#products .box .productsTabTitle::after {
  content: "";
  display: block;
  position: absolute;
}

#products .box .productsTabTitle::before {
  width: calc(100% + 160px);
  height: 1px;
  background: #e0e0e0;
  top: 0;
  left: 0;
}

#products .box .productsTabTitle::after {
  width: 4px;
  height: 4px;
  border-top: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: -2px;
	right: -160px;
}

#products .box .productsTabTitle ul {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
	padding: 50px 0;
}

/* #products .box .productsTabTitle ul li {
  width: 25%;
} */

#products .box .productsTabTitle ul li button {
  width: 100%;
  height: 100%;
  color: #222222;
  font-size: 2.0rem;
  font-weight: 700;
  text-align: center;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#products .box .productsTabTitle ul li:hover button, #products .box .productsTabTitle ul li.on button {
  color: #d60000;
}

#type .box,
#recommend .box {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#type .box .titleBox,
#recommend .box .titleBox {
  text-align: center;
}

#type .box .titleBox .sectionTitleH2,
#recommend .box .titleBox .sectionTitleH2,
#about .box .titleBox .sectionTitleH2 {
  margin: 40px 0 20px;
}

#type .box .titleBox > p,
#recommend .box .titleBox > p,
#about .box .titleBox > p {
  font-size: 1.8rem;
  letter-spacing: -0.030em;
}

#type {
  background: #111111;
  position: relative;
}

#type .point1,
#type .point2 {
  position: absolute;
}

#type .point1 {
  width: 15.208333%;
  top: 46px;
}

#type .point2 {
  width: 26.25%;
  right: 0;
  bottom: 7.4866%;
}



#type .box .titleBox .sectionTitleH2 {
  color: #d60000;
}

#type .box .titleBox p {
  color: #d60000;
}

#type .box .itemBox {
  gap: 0 25px;
  margin: 70px 0 0;
}

#type .box .itemBox .item {
  width: 20%;
  height: 300px;
  height: auto;
}

#type .box .itemBox .item:nth-child(1)::before {
  content: "";
  display: block;
  background-image: url("/img/main/typeImg1.jpg");
  opacity: 0;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#type .box .itemBox .item:nth-child(2)::before {
  content: "";
  display: block;
  background-image: url("/img/main/typeImg2.jpg");
  opacity: 0;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#type .box .itemBox .item:nth-child(3)::before {
  content: "";
  display: block;
  background-image: url("/img/main/typeImg3.jpg");
  opacity: 0;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#type .box .itemBox .item:nth-child(4)::before {
  content: "";
  display: block;
  background-image: url("/img/main/typeImg4.jpg");
  opacity: 0;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#type .box .itemBox .item:nth-child(5)::before {
  content: "";
  display: block;
  background-image: url("/img/main/typeImg5.jpg");
  opacity: 0;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#type .box .itemBox .item > a {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #ffffff;
  color: #333333;
  padding: 25.295% 0;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#type .box .itemBox .item > a .icon {
  height: 70px;
  margin: 0 0 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
      justify-content: center;
}

#type .box .itemBox .item > a h5,
#type .box .itemBox .item > a p {
  letter-spacing: -0.030em;
}

#type .box .itemBox .item > a h5 {
  font-weight: 600;
}

#type .box .itemBox .item > a span {
  display: block;
  font-size: 13px;
  letter-spacing: 0;
  margin: 10px 0 25px;
}

#type .box .itemBox .item > a p {
  font-size: 1.6rem;
  text-align: center;
}

#type .box .itemBox .item:hover > a {
  background: transparent;
  -webkit-filter: brightness(10);
          filter: brightness(10);
}

#type .box .itemBox .item:hover::before {
  opacity: 1;
}

#recommend {
  background-image: url("/img/main/recommendBg.jpg");
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

#recommend .box .titleBox .sectionTitleH2, #recommend .box .titleBox p {
  color: #ffffff;
}
#recommend .box .titleBox .titleEn { color: #ffffff;
} 

#recommend .box .itemBox {
  gap: 0 33px;
  margin: 60px 0 0;
}

#recommend .box .itemBox .item {
  width: calc((100% - 99px) / 4);
}

#recommend .box .itemBox .item > a {
  display: block;
  width: 100%;
  height: 100%;
}

#recommend .box .itemBox .item > a .img {
  width: 100%;
  padding: 50% 0;
  background: #ffffff;
  position: relative;
  z-index: 2;
}

#recommend .box .itemBox .item > a .img img {
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#recommend .box .itemBox .item > a .text {
  color: #ffffff;
  text-align: center;
  letter-spacing: 0;
  padding: 30px 0;
  position: relative;
}

#recommend .box .itemBox .item > a .text::before {
  content: "";
  display: block;
  width: calc(100% + 20px);
  height: 0;
  background: #d60000;
  position: absolute;
  top: -20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  opacity: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

#recommend .box .itemBox .item > a .text h5,
#recommend .box .itemBox .item > a .text p {
  position: relative;
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

#recommend .box .itemBox .item > a .text h5 {
  height: 1.2em;
  font-size: 2.0rem;
  font-weight: 700;
  margin: 0 0 10px;
  -webkit-line-clamp: 1;
}

#recommend .box .itemBox .item > a .text p {
  height: 2.4em;
  font-size: 1.6rem;
  -webkit-line-clamp: 2;
}

#recommend .box .itemBox .item:hover .text::before {
  height: calc(100% + 20px);
  opacity: 1;
}

#about {
  background: url("/img/main/aboutPoint.png") no-repeat right bottom/45.98958% auto;
  position: relative;
}

#about .title {
  width: 100%;
  max-width: 1720px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 45px;
  z-index: -2;
}

#about .box {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

#about .box .info {
  gap: 0 115px;
}

#about .box .info .titleBox {
  overflow: hidden;
}

#about .box .info .titleBox .sectionTitleH2,
#about .box .info .titleBox h6 {
  color: #222222;
}

#about .box .info .titleBox .sectionTitleH2 {
	width: 210px;
	height: auto;
}

#about .box .info .titleBox h6 {
  font-size: 1.8rem;
  letter-spacing: -0.030em;
}

#about .box .info .titleBox h6 {
  font-weight: 500;
}

#about .box .info .titleBox div {
  margin: 10px 0 75px;
}

#about .box .info .titleBox div p {
  color: #333333;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1.66;
  margin: 35px 0 0;
}

#about .box .link.listBox {
  margin: 85px 0 50px;
}

#about .box .link.listBox ul li:nth-child(2) {
  margin: 0 -1px;
}