:root {
	--yjw-min: 20rem;
	
	--yjw-max: 100rem;
	
	
	--f14: clamp(0.75rem, 0.719rem + 0.16vw, 0.875rem);
	--f16: clamp(0.875rem, 0.844rem + 0.16vw, 1rem);
	
	--f18: clamp(1rem, 0.969rem + 0.16vw, 1.125rem);
	
	--f20: clamp(1.125rem, 1.094rem + 0.16vw, 1.25rem);
	
	--f22: clamp(1.25rem, 1.219rem + 0.16vw, 1.375rem);
	
	--f24: clamp(1.375rem, 1.344rem + 0.16vw, 1.5rem);
	
	--f28: clamp(1.5rem, 1.438rem + 0.31vw, 1.75rem);
	
	--f32: clamp(1.75rem, 1.719rem + 0.16vw, 1.875rem);
	
	--f36: clamp(2rem, 1.938rem + 0.31vw, 2.25rem);
	
	--f48: clamp(2.5rem, 2.375rem + 0.63vw, 3rem);
	
	--f56: clamp(3rem, 1.5rem + 2vw, 3.5rem);
	
	--f72: clamp(4.25rem, 4.2rem + 0.25vw, 4.5rem);
	
	--f84: clamp(4.75rem, 4.65rem + 0.5vw, 5.25rem);
	

	--f100: clamp(6.25rem, 5.625rem + 3.13vw, 8.75rem);

	--sd30: 0 0.2em 10px rgb(76 76 76 / 30%);
	--sd20: 0 0.2em 10px rgb(76 76 76 / 20%);
	--sd10: 0 0.2em 10px rgb(76 76 76 / 10%);
	--tr3: .3s ease;
	--tr6: .6s ease;
	--tr8: .8s ease;
	--gleft: linear-gradient(to left, var(--c) 0%, var(--n) 100%);
	--gleftx: linear-gradient(to left, #014ca0 0%, #229b6b 100%);

	--c:#1e56a0 !important;
	--n:#ff7200 !important;
	--bc:#1e56a0 !important;
	--t: #1a1a1a;
	--alin:kuosan 1s linear infinite;
	--c80:rgb(1 69 54 / 80%);
	--c3:#333;
	--c6:#666;
	--c9:#999;
}
.page_a:hover{
  background:var(--c) !important;
    color: #fff !important;  
}
.page_con > a.page_a.disabled:hover:before,
.page_con > a:hover:before{
  content: "";
border-left-color: #fff !important;  
}

.yx_ImgContain,
.yx_ImgCover {
	position: relative;
	height: 0;
	overflow: hidden;
}

.yx_ImgContain img {
	position: absolute;
	max-height: 100%;
	max-width: 100%;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);

}

.yx_ImgCover img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.6s;
}

.yw {
	width: 94%;
	max-width: 1600px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.list4 {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 40px;
	grid-row-gap: 40px;
}

.list3 {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 40px;
	grid-row-gap: 40px;
}

.list2 {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 40px;
	grid-row-gap: 40px;
}


@media screen and (max-width:1360px) {
	.yw {
		width: 90% !important;
	}

	:root {
		--yjw-min: 20rem;
		
		--yjw-max: 100rem;
		
		
		--text-step--2: 0.875rem;
		--f18: clamp(0.875rem, 0.844rem + 0.16vw, 1rem);
		
		--f20: clamp(1rem, 0.969rem + 0.16vw, 1.125rem);
		
		--f22: clamp(1.125rem, 1.094rem + 0.16vw, 1.25rem);
		
		--f24: clamp(1.25rem, 1.219rem + 0.16vw, 1.375rem);
		
		--f28: clamp(1.375rem, 1.344rem + 0.16vw, 1.5rem);
		
		--f32: clamp(1.5rem, 1.438rem + 0.31vw, 1.75rem);
		
		--f36: clamp(1.75rem, 1.719rem + 0.16vw, 1.875rem);
		
		--f48: clamp(2.5rem, 2.375rem + 0.63vw, 3rem);
		
		--f56: clamp(3rem, 2.818rem + 0.91vw, 3.5rem);
		
		--f72: clamp(3.25rem, 3.136rem + 0.57vw, 3.5rem);
		
	}
}

@media screen and (max-width:768px) {
	.yw {
		width: 94% !important;
	}

	.list4,
	.list3,
	.list2 {
		grid-column-gap: 20px;
		grid-row-gap: 20px;
	}

	.list4 {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}

	.list3 {
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(3, 1fr);
	}

	.list2 {
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}
}

@media screen and (max-width: 1024px) and (min-width: 769px) {}

.full-img-box .full-img>img {
	display: none
}

.img-clip {
	clip-path: circle(0 at 50% 50%);
	transition: clip-path 1.5s ease-in-out;
	opacity: 0
}

.img-clip.go {
	clip-path: circle(50% at 50% 50%);
	opacity: 1
}

.lv-make .img-clip {
	clip-path: circle(50% at 50% 50%);
	opacity: 1
}



@font-face {
	font-family: "iconfontX";
	
	src: url('../../portal-saas/new2023120518343546419/cms/file/7fbb44f6-79c7-498d-a588-c817447ec6d8.ttf') format('truetype');
}

@font-face {
	font-family: "iconfontY";
	
	src: url('../../portal-saas/new2023120518343546419/cms/file/f58477cb-37a1-4971-a0ac-cd942b063f16.ttf') format('truetype');
}

.iconfont {
	font-family: "iconfontX" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


.btn1 {
	width: 60px;
	text-align: left;
	color: #fff;
	z-index: 20;
	cursor: pointer;
}

.btn1 .btn_x,
.btn1 .btn_y {
	width: 60px;
	height: 60px;
	position: relative;
	margin: auto;
}

.btn1 .btn_x:before {
	
	content: "\e65d";
	font-family: "iconfontX";
	color: #fff;
	text-align: center;
	font-size: 30px;
	line-height: 60px;
	display: block;
	animation: updownX 3000ms linear infinite;
}

.btn1 .btn_x:after,
.btn1 .btn_y:after {
	top: 0;
	left: 0;
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	border: 2px dotted var(--c);
	border-radius: 50%;
	animation: rotateZ360 3000ms linear infinite;
}

.btn1 .btn_x:after {
	border: 2px dotted #fff;
}


.btn1 .btn_y:before {
	
	content: "\e631";
	font-family: "iconfontY";
	position: absolute;
	left: 24%;
	top: auto;
	bottom: -5px;
	color: var(--c);
	text-align: center;
	font-size: 30px;

	display: block;
	animation: updownY 2000ms linear infinite;
}

@keyframes rotateZ360 {
	0% {
		transform: rotateZ(0);
	}

	100% {
		transform: rotateZ(360deg)
	}
}

@keyframes updownX {

	0%,
	100% {
		transform: translateY(0);
	}


	50% {
		transform: translateX(-10px);
	}

}

@keyframes updownY {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes upd20 {

	0%,
	100% {
		transform: translateY(-20px);
	}

	50% {
		transform: translateY(0px);
	}
}

@-webkit-keyframes r360 {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
	}
}





.btn1{
	-webkit-animation: kuosan 1s linear infinite;
	    animation: kuosan 1s linear infinite;
}

@keyframes kuosan{
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 
      0 0 0 10px rgba(255, 255, 255, 0.3), 
      0 0 0 20px rgba(255, 255, 255, 0.3), 
      0 0 0 25px rgba(255, 255, 255, 0);
}

100% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 
      0 0 0 20px rgba(255, 255, 255, 0.3), 
      0 0 0 25px rgba(255, 255, 255, 0), 
      0 0 0 30px rgba(255, 255, 255, 0);
}
}

@keyframes kuosan{
  0% {
    box-shadow: 0 0 0 0 rgba(0, 62, 131, 0), 
      0 0 0 10px rgba(0, 62, 131, 0.3), 
      0 0 0 20px rgba(0, 62, 131, 0.3), 
      0 0 0 25px rgba(0, 62, 131, 0);
}

100% {
    box-shadow: 0 0 0 10px rgba(0, 62, 131, 0.3), 
      0 0 0 20px rgba(0, 62, 131, 0.3), 
      0 0 0 25px rgba(0, 62, 131, 0), 
      0 0 0 30px rgba(0, 62, 131, 0);
}
}

.btn1:after {
    content: "";
    display: block;
    width: 1px;
    height: 100px;
    background: linear-gradient(0deg, transparent, #fff, transparent);
    position: absolute;
    right: -1px;
    top: 40%;
	animation: lineup 2s infinite alternate linear;
}

@keyframes lineup{
	0% {
	    top: 0px;
	}
	100% {
	    top: 100%;
	}
}
@-webkit-keyframes tone {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  35% {
    -webkit-transform: translateX(20px) translateY(-40px);
    transform: translateX(20px) translateY(-40px);
  }

  65% {
    -webkit-transform: translateX(10px) translateY(40px);
    transform: translateX(10px) translateY(40px);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes tone {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  35% {
    -webkit-transform: translateX(5px) translateY(-20px);
    transform: translateX(5px) translateY(-20px);
  }

  65% {
    -webkit-transform: translateX(30px) translateY(40px);
    transform: translateX(30px) translateY(40px);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes ttwo {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  40% {
    -webkit-transform: translateX(-8px) translateY(-1%);
    transform: translateX(-8px) translateY(-1%);
  }

 75% {
    -webkit-transform: translateX(20px) translateY(-20px);
    transform: translateX(20px) translateY(-8%);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes ttwo {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  40% {
    -webkit-transform: translateX(-15px) translateY(-1%);
    transform: translateX(-15px) translateY(-1%);
  }

  75% {
    -webkit-transform: translateX(20px) translateY(-20px);
    transform: translateX(20px) translateY(-8%);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes tthree {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  30% {
    -webkit-transform: translateX(5%) translateY(11%);
    transform: translateX(5%) translateY(11%);
  }

  70% {
    -webkit-transform: translateX(-13%) translateY(-5%);
    transform: translateX(-13%) translateY(-5%);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes tthree {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  30% {
    -webkit-transform: translateX(5%) translateY(11%);
    transform: translateX(5%) translateY(11%);
  }

  70% {
    -webkit-transform: translateX(-13%) translateY(-5%);
    transform: translateX(-13%) translateY(-5%);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}
.circle{
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
	    width: 100%;
	    height: 23vw;
		position: absolute;
	    top: 0;
	    left: 0;
	    border-radius: 50%;
	    overflow: hidden;
	    pointer-events: none;
		background: #0099cd;
	
}
.circle-first {
    opacity: 0.15;
    -webkit-animation: firstCircle 10s ease infinite;
    animation: firstCircle 10s ease infinite;
}
.circle-second {
    opacity: 0.15;
    -webkit-animation: secondCircle 10s ease infinite;
    animation: secondCircle 10s ease infinite;
}
.circle-third {
    opacity: 0.15;
    -webkit-animation: thirdCircle 10s ease infinite;
    animation: thirdCircle 10s ease infinite;
}