html {
  scroll-behavior: smooth;
}

.visual_wrap{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
	overflow: hidden; 
}
.visual_wrap .page_down{
  position: absolute;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 20;
}
.visual_wrap .page_down:hover{
  animation-name: bounce; 
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.visual_wrap .visual{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.visual_wrap .swiper{
  width: 100%;
  height: 100vh;
  z-index:1;
}
.visual_wrap .swiper-slide{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;  
  transition: .2s;
}
.visual_wrap .swiper-pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 5%;
  left: 50%;
  width: auto;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.visual_wrap .swiper-pagination-bullet{ width: 10px; height: 10px; background: #fff;}
.visual_wrap .swiper-pagination-bullet-active{ width: 13px; height: 13px; background: transparent; border: 2px solid rgb(255, 255, 255); transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; -ms-transition: .2s; -o-transition: .2s; }
.visual_wrap .swiper-button-prev, .visual_wrap .swiper-button-next{
  display: none;
}
.visual_wrap .swiper-slide .bg{
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;  
  transform: scale(1);
  transition: .5s;
}
.visual_wrap .swiper-slide .ca_wrap{
  display: flex;
  gap: 1rem;
  position: absolute;
  bottom: 10%;
  left: 50%;
  padding: 0;
  margin: 3rem auto 0 auto;
  opacity: 0;
  text-align: center;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transition: .5s;
}
.visual_wrap .swiper-slide .ca_wrap img{
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
}
.visual_wrap .swiper-slide .ca_wrap>div:hover img{
  margin-top: -2rem;
  padding-bottom: 2rem;
}
.visual_wrap .swiper-slide .ca_wrap h2{
	font-family: 'SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  color: #fff;
  letter-spacing: 0;
  padding: 0;
  margin: 1rem 0 0 0;
}
.visual_wrap .swiper-slide .ca_wrap p{
	font-family: 'Jost', 'Roboto', 'OneMobileTitle','SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
  font-size: .9rem;
  color: rgb(255, 255, 255, .5);
  padding: 0;
  margin: 0;
}
.visual_wrap .swiper-slide .center_wrap{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: absolute;
  top: 20%;
  left: 50%;
  width: 50%;
  height: 50vh;
  text-align: center;
  margin: 0 auto;
  color: #fff;  
  word-break:keep-all; 
  word-wrap:break-word;
  transition: .5s;
  z-index: 2;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.visual_wrap .swiper .center_wrap h1{
	font-family: 'Jost', 'Roboto', 'SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
  font-size: 4rem;
  text-align: center;
  margin: 3rem auto 0 auto;
  opacity: 0;
  transition: .5s;
}
.visual_wrap .swiper .center_wrap .con{
  width: 50%;
	font-family: 'SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  color: #fff;
  text-align: center;
  padding: 0;
  margin: 3rem auto 0 auto;
  opacity: 0;
  transition: .5s;
}
.visual_wrap .swiper .center_wrap .con strong{
  font-weight: 500;
  /* color: rgba(252, 255, 0, .6); */
}
.visual_wrap .swiper-slide .text_wrap{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: absolute;
  top: 25%;
  left: 15%;
  width: 50%;
  height: 50vh;
  text-align: left;
  color: #fff;  
  word-break:keep-all; 
  word-wrap:break-word;
  transition: .5s;
  z-index: 2;
}
.visual_wrap .swiper .text_wrap h1{
	font-family: 'Jost', 'Roboto', 'SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
  font-weight: 200;
  font-size: 4rem;
  margin-top: 3rem;
  opacity: 0;
  transition: .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
}
.visual_wrap .swiper .text_wrap h1 strong{
  font-weight: 600;
  font-size: 5rem;
}
.visual_wrap .swiper .text_wrap .con{
  position: relative;
  width: 50%;
  font-family: 'SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
  font-weight: 400;
  font-size: .9rem;
  color: rgba(255, 255, 255, 0.6);
  padding: 5rem 0 0 0;
  margin-top: 3rem;
  opacity: 0;
  transition: .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
}
.visual_wrap .swiper .text_wrap .con::after{
  position: absolute;
  top: 1.5rem;
  left: 0;
  content:'';
  width: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.8);
}
.visual_wrap .swiper .text_wrap .con strong{
  display: block;
  font-weight: 600;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: .5rem;
}
.visual_wrap .swiper .text_wrap .bt{
  padding-top: 2rem;
  margin-top: 3rem;
  opacity: 0;
}
.visual_wrap .swiper .text_wrap a{
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size:.85rem;
  color: rgba(0, 0, 0, 1);
  background-color: #fff;
  border:1px solid rgba(255, 255, 255, .4);;
  border-radius: 1.5rem;
  padding: .5rem 2rem;
  transition: all .2s;
}
.visual_wrap .swiper .text_wrap a:hover{
  color: rgba(255, 255, 255, 1);
  background-color: #0c2069;
  border: 1px solid #0c2069;
}
.visual_wrap .swiper-slide .img_wrap{
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 10%;
  left: 0;
  width:100%;
  padding-left:0;
  opacity: 0;
  transition: all .3s ease-out;
  z-index: 1;
}
.visual_wrap .swiper-slide-active .bg{
  transform: scale(1.2);
  transition-duration: 3s;
  transition-delay: 2s;
}
.visual_wrap .swiper-slide-active .center_wrap h1{
  opacity: 1;
  margin-top: 0;
  transition-duration: 1s;
  transition-delay: .5s;
}
.visual_wrap .swiper-slide-active .center_wrap .con{
  opacity: 1;
  margin-top: 0;
  transition-delay: 1s;
  transition-duration: 1s;
}
.visual_wrap .swiper-slide-active .ca_wrap{
  opacity: 1;
  margin-top: 0;
  transition-duration: 1s;
  transition-delay: 1.5s;
}
.visual_wrap .swiper-slide-active .text_wrap h1{
  opacity: 1;
  margin-top: 0;
  transition-duration: 1s;
  transition-delay: .5s;
}
.visual_wrap .swiper-slide-active .text_wrap .con{
  opacity: 1;
  margin-top: 0;
  transition-delay: 1s;
  transition-duration: 1s;
}
.visual_wrap .swiper-slide-active .text_wrap .bt{
  opacity: 1;
  margin-top: 0;
  transition-delay: 1.5s;
  transition-duration: 1s;
}
.visual_wrap .swiper-slide-active .img_wrap{
  opacity: 1;
  padding-left: 55%;
  transition-delay: 1.5s;
  transition-duration: 1s;
}
@media (max-width: 991.98px) {
  .visual_wrap .swiper-slide .center_wrap{
    width: 70%;
  }
  .visual_wrap .swiper-slide .text_wrap{
    left: 5%;
    width: 70%;
  }
  .visual_wrap .swiper-slide .img_wrap img{
    transform: scale(.8);
  }
  .visual_wrap .swiper-slide-active .img_wrap{
    padding-left: 40%;
  }
  .visual_wrap .swiper-slide .ca_wrap{
    width: 98%;
    gap: .5rem;
  }
  .visual_wrap .swiper-slide .ca_wrap img{
    width: 100%;
  }
  .visual_wrap .swiper-slide .ca_wrap h2{
    font-size: .9rem;
  }
  .visual_wrap .swiper-slide .ca_wrap p{
    font-size: .7rem;
  }
}
@media (max-width: 767.98px) {
  .visual_wrap .swiper-slide .center_wrap{
    top: 22%;
    width: 100%;
    padding: 0 1rem;
  }
  .visual_wrap .swiper-slide .center_wrap h1{
    font-size: 2.0rem;
  }
  .visual_wrap .swiper-slide .center_wrap .con{
    width: 90%;
  }
  .visual_wrap .swiper-slide .ca_wrap{
    width: 95%;
    bottom: 20%;
  }
  .visual_wrap .swiper-slide .text_wrap h1{
    font-size: 1.5rem;
  }
  .visual_wrap .swiper-slide .text_wrap h1 strong{
    font-size: 2rem;
  }
  .visual_wrap .swiper-slide .text_wrap>div{
    width: 100%;
    padding-left:1rem;
    padding-right:1rem; 
  }
  .visual_wrap .swiper-slide .text_wrap .con{
    width: 100%;
    text-align: center;
    padding: 1rem 0 0 0;
  }
  .visual_wrap .swiper-slide .text_wrap .con::after{
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
  }
  .visual_wrap .swiper-slide .text_wrap{
    text-align: center;
    top: 18%;
    left: 0;
    width: 100%;
    padding: 0 1rem;
  }
  .visual_wrap .swiper-slide .img_wrap{
    bottom: -15%;
    margin-bottom: 0;
  }
  .visual_wrap .swiper-slide .img_wrap img{
    transform: scale(.5);
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -ms-transform: scale(.5);
    -o-transform: scale(.5);
}
  .visual_wrap .swiper-slide-active .img_wrap{
    justify-content: center;
    text-align: center;
    padding-left:0;
    margin:0 auto;
  }
  .visual_wrap .page_down{
    display: none;
  }
}




.product_wrap{
  width: 100%;
  /* min-height: 100%; */
  padding: 7rem 0;
  margin: 0 auto;
  text-align: center;
  background: #4a4b53;
  background-image: url('/img/main_product_bg.gif');  
}
.product_wrap .product_box{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 7rem 1rem 7rem;
  margin: 0;
}
.product_wrap h1{
	font-family: 'SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
	font-weight: 500;
  font-size: 2.6rem;
  color: #1e1e1e;  
}
.product_wrap p{
	font-family: 'SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
	font-weight: 500;
  font-size: .9rem;
  color: #7a7a7a;
}
.product_wrap .ca{
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem;
  padding: 1rem;
  margin: auto;
}
.product_wrap button{
	font-family: 'SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
  font-weight: 500;
  font-size: .8rem;
  color: #656565;
  padding: .3rem 1.5rem;
  background-color: transparent;
  border: 1px solid #939393;
  border-radius: 1.5rem;
  -webkit-border-radius: 1.5rem;
  -moz-border-radius: 1.5rem;
  -ms-border-radius: 1.5rem;
  -o-border-radius: 1.5rem;
}
.product_wrap .bt_on{
  color: #fff;
  background-color: #183290;
  border: 1px solid #183290;
}
.product_wrap .swiper-slide{
  width: 70%;
  background: #fff;
  border-radius: .5rem;
  -webkit-border-radius: .5rem;
  -moz-border-radius: .5rem;
  -ms-border-radius: .5rem;
  -o-border-radius: .5rem;
}

.product_wrap .swiper-slide-active .items{
  /*padding: 2rem 1rem;*/
  opacity: 1;
  transform-origin: center;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transition-delay: .5s;
  transition-duration: .5s;
}
.product_wrap .items{
  position: relative;
  width: 100%;
  padding: 2rem 2rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  opacity: .4;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transition-duration: 1s;
  transition: all 1s;
  -webkit-transition: all 1s ;
  -moz-transition: all 1s ;
  -ms-transition: all 1s ;
  -o-transition: all 1s ;
}
.product_wrap .items .pic{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
}
.product_wrap .items img{
  max-width: 100%;
  margin: auto;
}
.product_wrap .items .con{
  width: 60%;
  padding: 4rem 0 4rem 4rem;
  margin: 0;
  background: #fff;
  text-align: left;
}
.product_wrap .items .con .brand{
  margin-bottom: 1rem;
}
.product_wrap .items .con .brand img{
  max-width: 60%;
  max-height: 25px;
}
.product_wrap .items .con h1{
  font-family: 'SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
  font-weight: 600;
  font-size: 1.8rem;
  color: #222;
  word-break:keep-all; 
  word-wrap:break-word;
  text-align: left;
  margin: 0;
  padding: 0;
}
.product_wrap .items .con p{
  font-family: 'SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
  font-weight: 400;
  font-size: 0.8rem;
  color: #727272;
  word-break:keep-all; 
  word-wrap:break-word;
  text-align: left;
  padding: 1rem 0;
  margin: 0;
}
.product_wrap .items .bt{
  display: flex;
  justify-content: flex-start;
  gap: .5rem;
  margin-top: 2rem;
  font-size: .75rem;
}
.bt_view {
  display: inline-block;
  color: #414141;
  padding: .7rem 2rem;
  font-family: 'SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
  font-weight: 500;
  line-height: 1;
  background-color: #fff;
  border: 1px solid #cccccc;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition:all .2s ease-in-out ;
  -webkit-transition:all .2s ease-in-out ;
  -moz-transition:all .2s ease-in-out ;
  -ms-transition:all .2s ease-in-out ;
  -o-transition:all .2s ease-in-out ;
}
.bt_view:focus,
.bt_view:hover{
  padding: .7rem 3rem;
	color: #000;
  background-color: #fff;
  border: 1px solid #696969;
	outline: 0;
}
.bt_online {
  display: inline-block;
	color: #fff;
  padding: .7rem 2rem;
	font-family: 'SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
	font-weight: 500;
  line-height: 1;
  background-color: #1a5fc7;
  border: 1px solid #1a5fc7;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	-webkit-appearance: none;
		-moz-appearance: none;
					appearance: none;
  transition:all .2s ease-in-out ;
  -webkit-transition:all .2s ease-in-out ;
  -moz-transition:all .2s ease-in-out ;
  -ms-transition:all .2s ease-in-out ;
  -o-transition:all .2s ease-in-out ;
}
.bt_online:focus,
.bt_online:hover{
  padding: .7rem 3rem;
	color: #fff;
  background-color: #0e4ba6;
	border-color: #0f4ba4;
	outline: 0;
}

@media (max-width: 1199.98px) {
  .product_wrap .swiper-button-prev{
    left: 0px;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}
  .product_wrap .swiper-button-next{
    left: auto;
    right: 0px;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
  .product_wrap .items .pic{
    width: 35%;
  }
  .product_wrap .items .con{
    width: 65%;
  }
}
@media (max-width: 991.98px) {
  .product_wrap .swiper-slide{
    width: 90%;
  }
  .product_wrap .product_box{    
    padding: 0 1rem 1rem 1rem;
  }
  .product_wrap button{
    padding: .3rem 1rem;
  }
}
@media (max-width: 767.98px) {
  .product_wrap{
    padding: 5rem .5rem;    
  }
  .product_wrap .product_box{    
    padding: 0 0 1rem 0;
  }
  .product_wrap .items .con .brand{
    text-align: center;
  }
  .product_wrap .product_box h1{
    font-size: 1.6rem;
  }
  .product_wrap .product_box p{
    font-size: 0.8rem;
  }  
  .product_wrap .ca{
    max-width: 100%;
    padding: 0;
  }
  .product_wrap button{
    padding: .2rem .5rem;
    font-size: .7rem;
  }
  .product_wrap .ca{
    max-width: 100%;
  }
  .product_wrap .swiper-slide{
    width: 80%;
  }
  .product_wrap .items{
    flex-direction: column;
  }
  .product_wrap .items .pic{
    width: 100%;
  }
  .product_wrap .items .con{
    width: 100%;
    padding: 1rem;
    text-align: center;
  }    
  .product_wrap .items .con h1{
    font-size: 1.2rem;
    text-align: center;
  }
  .product_wrap .items .con p{
    font-size: 0.75rem;
    text-align: center;
  }
  .product_wrap .items .bt{
    justify-content: center;
    font-size: .65rem;
  }
}

@media (max-width: 575.98px) {
  .product_wrap{
    padding: 3rem .5rem;    
  }
  .product_wrap .product_box h1{
    font-size: 1.4rem;
  }
  .product_wrap .product_box p{
    font-size: 0.7rem;
  }
  .product_wrap .swiper-slide{
    width: 75%;
  }
  .product_wrap .swiper-button-next,
  .product_wrap .swiper-button-prev{
    transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
  }  
  .product_wrap .items .pic img{
    width: 80%;
  }
  .product_wrap .items .con{
    padding: 1rem .2rem;
  }
  .product_wrap .items .con h1{
    font-size: 1.0rem;
    font-weight: 500;
  }
  .product_wrap .items .con p{
    font-size: 0.7rem;
    line-height: 1.2;
    padding: .5rem 0;
  }
  .product_wrap .items .bt{
    margin-top: .5rem;
  }
  .bt_view,
  .bt_online {
    padding: .7rem 1rem;
  }
  .bt_view:focus,
  .bt_view:hover,
  .bt_online:focus,
  .bt_online:hover{
    padding: .7rem 1rem;
  }  
}

.company_wrap{
  width: 100%;
  /* height: 100%; */
  padding: 10rem;
  margin: 0 auto;
  text-align: center;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/img/main_company_bg.jpg');  
}
.company_wrap .company_box{
	display: flex;
  flex-direction: column;
	align-items: center;
	padding: 0;
	margin: 0;
}
.company_wrap h1{
	font-family: 'SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
	font-weight: 500;
  font-size: 3.0rem;
  color: rgba(255, 255, 255, .7);  
}
.company_wrap p{
	font-family: 'SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
	font-weight: 400;
  color: rgba(255, 255, 255, .5);
  word-break:keep-all; 
  word-wrap:break-word;
  
}
.company_wrap .icon{
	display: flex;
	justify-content:space-between;
	align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 800px;
	padding: 3rem 0 0 0;
	margin: 0;
	font-family: 'SCoreDream', system-ui, -apple-system, "Noto Sans",  sans-serif;
	font-weight: 500;
  font-size: 3.0rem;
  color: #fff;
}
.company_wrap .icon img{
  width: 100%;
}
.company_wrap .icon .title{
	font-weight: 400;
  font-size: 1.3rem;
  padding: 1.5rem 0 0 0;
  margin: 0 auto;
}
@media (max-width: 991.98px) {
  .company_wrap{
    padding:10rem 6rem;
  }
  .company_wrap h1{
    font-size: 2.5rem;
  }
  .company_wrap p{
    font-size: 0.95rem;
  }
  .company_wrap .icon{
    font-size: 2.2rem;
  }
}
@media (max-width: 767.98px) {
  .company_wrap{
    padding:4rem 2rem;
  }
  .company_wrap h1{
    font-size: 2.2rem;
  }
  .company_wrap p{
    font-size: 0.95rem;
  }
  .company_wrap .icon{
    gap: .5rem;
    font-size: 1.8rem;
  }
  .company_wrap .icon .title{
    font-size: 1.0rem;
    padding: .5rem 0 0 0;
  }
}



.main_page{
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
}
.main_page ul{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .5rem 0;  
  padding: 1rem 0;
  margin: 0;
}
/* .main_page ul::after{
  position: absolute;
  content:'';
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  z-index: 1001;
  background: rgba(255, 255, 255, .5);
  transform: translateX(-50%);
} */
.main_page li{
  position: relative;
  list-style: none;
  padding: 0;
}
.main_page li div{
  position: absolute;
  top: 7px;
  left: -100px;
  width: 100px;
  text-align: right;
  display: none;
}
.main_page li a{
  padding: .5rem;
  font-size: .5rem;
  color: rgba(255,255,255,.4);
  -webkit-transition: .2s;
  transition: .2s;
}
.main_page li a:hover{
  /* font-size: .8rem; */
  color: rgba(252, 255, 0, .7);
}
.main_page li.active a{
  color: #fcff00;
}
.main_page li.active div{
  display: block;
}
@media (max-width: 991.98px) {
  .main_page{
    right: .5rem;
  }
  .main_page li.active div{
    display: none;
  }
}
@media (max-width: 767.98px) {
  .main_page{
    display: none;
  }
}