.ser_box {
    width: 100%;
    height: auto;
    background: #FFFFFF;
}

.ser_title_top {
    width: 100%;
    height: 6rem;
}

.ser_title {
    width: 90%;
    height: auto;
    margin: 0 auto;
    font-size: 3.125rem;
    font-family: opm;
}

.web_ln {
    width: 90%;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 2%;
}

.web_ln_item {
    width: 15.5%;
    height: auto;
    background: #f5f7fa;
    border-radius: 15px;
    padding: 36px 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.web_ln_item_img {
    width: auto;
    height: 5rem;
    margin: 0 auto;
    text-align: center;
}

.web_ln_item_img img {
    width: 4rem;
    height: auto;
}

.ser_titleon font {
    animation: id_t_right_p 0.8s linear forwards;
    -webkit-animation: id_t_right_p 0.8s linear forwards;
}

.web_ln_item_title {
    text-align: center;
    font-size: 1.875rem;
    font-family: opm;
}

.web_ln_item_ltitle {
    text-align: center;
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.5);
    font-family: db;
}

.web_lj_box {
    width: 100%;
    height: auto;
    background: #f5f7fa;
    position: relative;
    margin-top: 7rem;
    padding-bottom: 7rem;
}

.web_lj {
    width: 90%;
    height: auto;
    margin: 0 auto;
}

.web_lj_top {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 5rem;
}

.web_lj_top_item {
    font-size: 1.875rem;
    font-family: opm;
}

.web_lj_top_line {
    width: 2px;
    height: 3.7rem;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 2rem;
}

.web_lj_con {
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top: 4rem;
}

.web_lj_con_item {
    font-size: 1.375rem;
    margin-top: 1rem;
    position: relative;
    padding-left: 10px;
}

.web_lj_con_item:before {
    position: absolute;
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #000000;
    left: 0;
    top: calc(50% - 2px);
}

.web_lj_img {
    position: absolute;
    right: 5%;
    top: 7rem;
    height: calc(100% - 14rem);
    width: 55%;
    border-radius: 15px;
    overflow: hidden;
    background-image: url("../../static/upload/image/20250605/web_lj_img.jpg");
    background-attachment: fixed;
    background-size: 100% auto;
    background-position: center;
}

.web_lj_img span {
    display: inline-block;
    position: absolute;
    bottom: 1.5rem;
    right: 0.5rem;
    font-size: 6.75rem;
    font-weight: bold;
    color: #FFFFFF;
    text-transform: uppercase;
    font-family: "Arial";
}


.web_ys {
    width: 90%;
    height: auto;
    margin: 0 auto;
    margin-top: 2%;
    display: grid;
    grid-template-columns: 24.25% 24.25% 24.25% 24.25%;
    grid-template-rows: calc(90vw * 0.2425 * 340 / 420) calc(90vw * 0.2425 * 340 / 420);
    grid-gap: 0.9vw 0.9vw;
}

.web_ys_item {
    padding: 2.5rem;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

.web_ys_item1 {
    background: #0d41b3;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}

.web_ys_item2 {
    background: #33d793;
}

.web_ys_item3 {
    background: #00cacc;
}

.web_ys_item4 {
    background: #3a6ddd;
}

.web_ys_item5 {
    background: #8592a2;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

.web_ys_item6 {
    background: #702aff;
}

.web_ys_item_title {
    font-size: 1.875rem;
    color: #FFFFFF;
    font-family: opm;
    position: relative;
    z-index: 5;
}

.web_ys_item_des {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 160%;
    margin-top: 1.5rem;
    position: relative;
    z-index: 5;
}

.web_ys_item_back {
    position: absolute;
    width: auto;
    height: 55%;
    bottom: -10%;
    right: -5%;
    z-index: 0;
}

.web_ys_item_back img {
    width: auto;
    height: 100%;
}

.web_ys_item1 .web_ys_item_back {
    height: 45%;
    bottom: -3%;
    right: -10%;
}

.web_ys_item5 .web_ys_item_back {
    right: -1%;
}

.web_ys_item5 .web_ys_item_des {
    padding-right: 35%;
}

.web_sh {
    width: 90%;
    height: auto;
    margin: 0 auto;
    margin-top: 2%;
    padding-right: 10%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.web_sh2 {
    padding-left: 10%;
    padding-right: 0%;
    margin-top: 0.9%;
}

.web_sh_item {
    width: 32.66%;
    height: calc(90vw * 0.9 * 0.3266 * 321 / 507);
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.web_sh_item_img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 0;
}

.web_sh_item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.web_sh_item:hover .web_sh_item_img img {
    transform: scale(1.03);
}

.web_sh_item_back {
    position: absolute;
    width: 100%;
    height: 60%;
    left: 0;
    bottom: 0;
    z-index: 5;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.9));
}

.web_sh_item_title {
    position: relative;
    z-index: 10;
    font-size: 1.875rem;
    font-family: opm;
    color: #FFFFFF;
    padding: 0 2rem;
}

.web_sh_item_des {
    position: relative;
    z-index: 10;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.8);
    padding: 0 2rem;
    padding-bottom: 2rem;
    line-height: 150%;
    padding-top: 0.5rem;
}

.web_lc_box {
    width: 100%;
    height: auto;
    padding-bottom: 6rem;
    background: #f5f7fa;
    margin-top: 7rem;
}

.web_lc {
    width: 100%;
    height: calc(100vw * 427 / 1920);
    background-image: url("../../static/upload/image/20250605/web_lc_back.png");
    background-size: cover;
    background-position: center;
    margin-top: 2%;
    position: relative;
}

.web_lc_l {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

.web_lc_item {
    position: absolute;
    font-size: 1.875rem;
    font-family: opm;
    color: #FFFFFF;
    border-radius: 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.web_lc_item1 {
    width: 11.7vw;
    height: 11.7vw;
    background: #3a6ddd;
    top: 1vw;
    left: 0;
}

.web_lc_item2 {
    width: 8.7vw;
    height: 8.7vw;
    background: #0d41b3;
    bottom: 3.6vw;
    left: 10vw;
}

.web_lc_item3 {
    width: 15.6vw;
    height: 15.6vw;
    background: #00cacc;
    top: 0;
    left: 18vw;
}

.web_lc_item4 {
    width: 8.7vw;
    height: 8.7vw;
    background: #0d41b3;
    top: -1vw;
    left: 33.5vw;
}

.web_lc_item5 {
    width: 11.7vw;
    height: 11.7vw;
    background: #702aff;
    top: 5vw;
    left: 40vw;
}

.web_lc_item6 {
    width: 15.6vw;
    height: 15.6vw;
    background: #0d41b3;
    top: 1vw;
    left: 52.5vw;
}

.web_lc_item7 {
    width: 8.7vw;
    height: 8.7vw;
    background: #2bd2a4;
    top: 7vw;
    left: 68.5vw;
}

.web_lc_item8 {
    width: 8.7vw;
    height: 8.7vw;
    background: #3a6ddd;
    top: 1vw;
    left: 76.5vw;
}

.web_lc_item9 {
    width: 11.7vw;
    height: 11.7vw;
    background: #0d41b3;
    top: 10.5vw;
    left: 77vw;
}

@media screen and (max-width: 1023px) and (min-width: 300px) {
	.ser_title{
		width: 94%;
		height: auto;
		margin: 0 auto;
		font-size: 2rem;
		font-family: opm;
		text-align: center;
	}
	.web_ln{
		width: 94%;
		height: auto;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 1%;
	}
	.web_ln_item{
		width: 32%;
		height: auto;
		background: #f5f7fa;
		border-radius: 8px;
		padding: 2rem 0;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		transition: all 0.5s;
		margin-top: 2%;
	}
	.web_ln_item_img{
		width: auto;
		height: 4rem;
		margin: 0 auto;
		text-align: center;
	}
	.web_ln_item_img img{
		width: 3.5rem;
		height: auto;
	}
	.web_ln_item:hover{
		background: #e5ebf5;
	}
	.web_ln_item_title{
		text-align: center;
		font-size: 1.5rem;
		font-family: opm;
	}
	.web_ln_item_ltitle{
		text-align: center;
		font-size: 1.125rem;
		color: rgba(0,0,0,0.5);
		font-family: db;
	}
    
	.web_lj_box{
		width: 100%;
		height: auto;
		background: #f5f7fa;
		position: relative;
		margin-top: 3rem;
		padding-bottom: 3rem;
	}
	.web_lj{
		width: 94%;
		height: auto;
		margin: 0 auto;
	}
	.web_lj_top{
		width: 100%;
		height: auto;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 2rem;
	}
	.web_lj_top_item{
		font-size: 1.5rem;
		font-family: opm;
	}
	.web_lj_top_line{
		width: 2px;
		height: 3.7rem;
		background: rgba(0,0,0,0.1);
		margin: 0 2rem;
	}
	.web_lj_con{
		width: 100%;
		height: auto;
		margin: 0 auto;
		margin-top: 2rem;
	}
	.web_lj_con_item{
		font-size: 1.25rem;
		margin-top: 1rem;
		position: relative;
		padding-left: 0px;
		text-align: center;
	}
	.web_lj_con_item:before{
		position: absolute;
		content: '';
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: #000000;
		left: 0;
		top: calc(50% - 2px);
		display: none;
	}

	.web_lj_img{
		position: relative;
		right: 0%;
		top: 0;
		height: calc(94vw * 566 / 1092);
		width: 94%;
		border-radius: 15px;
		overflow: hidden;
        background-image: url("../../static/upload/image/20250605/web_lj_img.jpg");
		background-attachment: fixed;
		background-size: 100% auto;
		background-position: center;
		margin-left: 3%;
		margin-top: 2rem;
	}
	.web_lj_img span{
		display: inline-block;
		position: absolute;
		bottom: 1.3rem;
		right: 0.3rem;
		font-size: 5rem;
		font-weight: bold;
		color: #FFFFFF;
		text-transform: uppercase;
		font-family: "Arial";
	}
    
	.web_ys{
		width: 94%;
		height: auto;
		margin: 0 auto;
		margin-top: 2%;
		display: grid;
		grid-template-columns: 49% 49%;
		grid-template-rows: calc(94vw * 0.49 * 400 / 420) calc(94vw * 0.49 * 400 / 420) calc(94vw * 0.49 * 400 / 420) calc(94vw * 0.49 * 400 / 420);
		grid-gap: 2vw 2vw;
	}
	.web_ys_item{
		padding: 1.7rem 1.4rem;
		border-radius: 8px;
		position: relative;
		overflow: hidden;
	}
	.web_ys_item1{
		background: #0d41b3;
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 2;
	}
	.web_ys_item2{
		background: #33d793;
	}
	.web_ys_item3{
		background: #00cacc;
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 3;
	}
	.web_ys_item4{
		background: #3a6ddd;
	}
	.web_ys_item5{
		background: #8592a2;
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 3;
		grid-row-end: 5;
	}
	.web_ys_item6{
		background: #702aff;
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 4;
		grid-row-end: 5;
	}
	.web_ys_item_title{
		font-size: 1.5rem;
		color: #FFFFFF;
		font-family: opm;
		position: relative;
		z-index: 5;
	}
	.web_ys_item_des{
		font-size: 1rem;
		color: rgba(255,255,255,0.9);
		line-height: 150%;
		margin-top: 0.6rem;
		position: relative;
		z-index: 5;
	}

	.web_ys_item_back{
		position: absolute;
		width: auto;
		height: 55%;
		bottom: -10%;
		right: -5%;
		z-index: 0;
	}
	.web_ys_item_back img{
		width: auto;
		height: 100%;
	}
	.web_ys_item1 .web_ys_item_back{
		height: 55%;
		bottom: -10%;
		right: -5%;
	}
	.web_ys_item3 .web_ys_item_back{
		height: 35%;
		bottom: -3%;
		right: -10%;
	}
	.web_ys_item5 .web_ys_item_back{
		height: 35%;
		bottom: -5%;
		right: -10%;
	}
	.web_ys_item5 .web_ys_item_des{
		padding-right: 0%;
	}
    
	.web_sh{
		width: 94%;
		height: auto;
		margin: 0 auto;
		margin-top: 2%;
		padding-right: 0%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.web_sh2{
		padding-left: 0%;
		padding-right: 0%;
		margin-top: 2%;
	}

	.web_sh_item{
		width: 32%;
		height: calc(94vw * 0.32 * 321 / 507 * 1.2);
		position: relative;
		border-radius: 8px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}
	.web_sh_item_img{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 0;
	}
	.web_sh_item_img img{
		width:100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		transition: all 0.5s;
	}
	.web_sh_item:hover .web_sh_item_img img{
		transform: scale(1.03);
	}
	.web_sh_item_back{
		position: absolute;
		width: 100%;
		height: 60%;
		left: 0;
		bottom: 0;
		z-index: 5;
		background: linear-gradient(to bottom,transparent,rgba(0,0,0,0.9));
	}
	.web_sh_item_title{
		position: relative;
		z-index: 10;
		font-size: 1.25rem;
		font-family: opm;
		color: #FFFFFF;
		padding: 0 1.5rem;
	}
	.web_sh_item_des{
		position: relative;
		z-index: 10;
		font-size: 1.125rem;
		color: rgba(255,255,255,0.8);
		padding: 0 2rem;
		padding-bottom: 2rem;
		line-height: 150%;
		padding-top: 0.5rem;
		display: none;
	}

	.web_lc_box{
		width: 100%;
		height: auto;
		padding-bottom: 3rem;
		background: #f5f7fa;
		margin-top: 3rem;
	}

	.web_lc{
		width: 100%;
		height: auto;
		background-image: url("../images/web_lc_back.png");
		background-size: cover;
		background-position: center;
		background: none;
		margin-top: 2%;
		position: relative;
	}
	.web_lc_l{
		width: 94%;
		height: 100%;
		margin: 0 auto;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.web_lc_item{
		position: relative;
		font-size: 1.25rem;
		font-family: opm;
		color: #FFFFFF;
		border-radius: 50%;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 30.08vw;
		height: 30.08vw;
		margin-top: 1.8vw;
	}
	.web_lc_item1{
		width: 30.08vw;
		height: 30.08vw;
		background: #3a6ddd;
		top: 0;
		left: 0;
	}
	.web_lc_item2{
		width: 30.08vw;
		height: 30.08vw;
		background: #0d41b3;
		bottom: auto;
		top: 0;
		left: 0;
	}
	.web_lc_item3{
		width: 30.08vw;
		height: 30.08vw;
		background: #00cacc;
		top: 0;
		left: 0;
	}
	.web_lc_item4{
		width: 30.08vw;
		height: 30.08vw;
		background: #0d41b3;
		top: 0;
		left: 0;
	}
	.web_lc_item5{
		width: 30.08vw;
		height: 30.08vw;
		background: #702aff;
		top: 0;
		left: 0;
	}
	.web_lc_item6{
		width: 30.08vw;
		height: 30.08vw;
		background: #0d41b3;
		top: 0;
		left: 0;
	}
	.web_lc_item7{
		width: 30.08vw;
		height: 30.08vw;
		background: #2bd2a4;
		top: 0;
		left: 0;
	}
	.web_lc_item8{
		width: 30.08vw;
		height: 30.08vw;
		background: #3a6ddd;
		top: 0;
		left: 0;
	}
	.web_lc_item9{
		width: 30.08vw;
		height: 30.08vw;
		background: #0d41b3;
		top: 0;
		left: 0;
	}
}