#wrap {z-index: 2;}



/* section */

section { padding: 5vw 0 2vw; }

section >* { z-index: 3; }

section .title_box { padding-bottom: 3vw; font-style: italic; font-size: 38px; }

section .clip { margin: auto; width: 100%; }

section .clip img { height: 100%; }

section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }

section .clip video { width: auto; height: 100%; top: 50%; left: 50%; }



/* about_area */

#about_area { padding-bottom: 5vw; z-index: 5; }

#about_area .tit_box .top_title { margin-bottom: 30px; width: auto; font-size: 36px; color: #006AA1; }

#about_area .tit_box .top_info {
    width: 450px;
    font-weight: 300;
    color: #404040;
    display: flex;
    flex-direction: column;
    }

#about_area ul {margin: 50px 30px 30px;grid-template-columns: repeat(3, 1fr);grid-gap: 3.5rem 2rem;}

#about_area ul li svg {margin-bottom: .8rem;width: 115px;height: 115px;fill: #29a6dd;}

#about_area ul li * { font-size: 15px; color: #29a6dd; }

#about_area ul li p { margin-top: .5rem; }

#about_area ul li p b {line-height: 1;font-weight: 900;font-size: 36px;letter-spacing: 2px;}
@media screen and (max-width:786px) {
	#about_area ul li p b{
		font-size: 27px;
	}
}
#about_area ul li.op_2 { opacity: .2; }



/* expertise_area */

#expertise_area { padding: 6vw 0 10vw; background: url(/images/44/img_expertise_bg.png) no-repeat 50% 0; }

#expertise_area .txt_box { padding: 0 2% 0 10%; width: 1%; flex: 1 auto; order: 1; }

#expertise_area .txt_box h3, #about_area .tit_box .top_info h3 { font-weight: 300; font-size: 30px; color: #5F7584; }

#expertise_area .txt_box p, #about_area .tit_box .top_info p {margin: 15px 0;font-size: 18px;color: #404040;font-weight: 400;}

#expertise_area .txt_box article, #about_area .tit_box .top_info article, #slogin_area .info article { font-weight: 300; color: #404040; }

#expertise_area ul { width: 410px; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; }

#expertise_area ul li { padding: 1rem .5rem; background: #fff; box-shadow: 0 0 0.35rem rgb(0 0 0 / 15%); border-radius: .3rem; }

#expertise_area ul li svg { width: 50px; height: 50px; fill: #29a6dd; }

#expertise_area ul li p {margin-top: 15px;font-weight: 300;font-size: 13px;color: #333;text-align: center;}



/* service_area */

#service_area { padding: 8vw 0 17vw; background: url(/images/44/img_service_bg.png) no-repeat 50%; }

#service_area .top_title { text-align: center; font-weight: 300; font-size: 30px; }

#service_list { position: relative; margin: 180px auto 0; width: 700px; height: 700px; }

#service_list .top_title , #effort_area .top_title , #brand_area .top_title { text-align: center; font-weight: 300; font-size: 30px; color: #5F7584; }

#service_list ul { position: absolute; width: 100%; top: 0; bottom: 0; left: 0; right: 0; box-sizing: border-box; }

#service_list ul li {position: absolute;padding-bottom: 25%;border-radius: 50%;display: inline-block;text-align: center;font-size: 0;left: 0;top: 50%;transform: translate(0%, -50%);transform-origin: 250% 50%;box-sizing: border-box;}

#service_list ul li >div { position: absolute; left: 0; top: 0; text-decoration: none; font-size: 18px; text-align: center; }

#service_list ul li >div:hover img{    transform: scale(1.1);}



#service_list ul li:nth-child(1) { width: 201px; transform: translate(-40%, -30%) rotateZ(0deg); }

#service_list ul li:nth-child(2) { width: 259px; transform: translate(-80%, 10%) rotateZ(45deg); }

#service_list ul li:nth-child(3) { width: 271px; transform: translate(-130%, 70%) rotateZ(90deg); }

#service_list ul li:nth-child(4) { width: 285px; transform: translate(-160%, 50%) rotateZ(135deg); }

#service_list ul li:nth-child(5) {width: 197px;transform: translate(-80%, -50%) rotateZ(180deg);left: 30px;}

#service_list ul li:nth-child(6) { width: 255px; transform: translate(-130%, -110%) rotateZ(225deg); }

#service_list ul li:nth-child(7) { width: 184px; transform: translate(-50%, -50%) rotateZ(270deg); }

#service_list ul li:nth-child(8) { width: 253px; transform: translate(-70%, -100%) rotateZ(315deg); }

/* a 中的文字旋转，修正 */

#service_list ul li:nth-child(1) >div { transform: translate(-10%, -10%) rotateZ(0deg); }

#service_list ul li:nth-child(2) >div { transform: translate(0%, 0%) rotateZ(-45deg); }

#service_list ul li:nth-child(3) >div { transform: translate(0%, 0%) rotateZ(-90deg); }

#service_list ul li:nth-child(4) >div { transform: translate(0%, -10%) rotateZ(-135deg); }

#service_list ul li:nth-child(5) >div { transform: translate(0%, -10%) rotateZ(-180deg); }

#service_list ul li:nth-child(6) >div { transform: translate(0%, -10%) rotateZ(-225deg); }

#service_list ul li:nth-child(7) >div { transform: translate(-10%, 0%) rotateZ(-270deg); }

#service_list ul li:nth-child(8) >div { transform: translate(0%, -10%) rotateZ(-315deg); }



/* slogin_area */

#slogin_area {padding: 5vw 0 0;}

#slogin_area .title {font-size: 36px;color: #006AA1;width: 45%;}

#slogin_area .info {width: 50%;flex: 1 auto;}

#slogin_area .info p {margin-bottom: 20px;font-size: 18px;color: #404040;font-weight: 400;}



/* effort_area */

#effort_area {padding: 12vw 0;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1928.339 891.427'%3E%3Cpath d='M0 59.423s350.9-98.742 946.175-41.657 918.35 84.856 977.522 0c13.018 212.911-5.473 802.033-5.473 802.033s-212.917 124.621-808.279 45.105S0 886.267 0 886.267z' fill='%23f3f3f3' opacity='.5'/%3E%3C/svg%3E") no-repeat 50% / cover;display: none;}

#effort_area ul { margin-top: 60px; }

#effort_area ul li { width: 360px; height: 360px; background: #0094A6; border-radius: 50%; }

#effort_area ul li:nth-child(2) { background: #8FC31F; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }

#effort_area ul li:nth-child(3) { background: #3EBFF0; }

#effort_area ul li svg { fill: #fff; }

#effort_area ul li p { margin-top: 30px; font-size: 18px; color: #fff; }



@media screen and (max-width: 1440px){

	#about_area .about_sub_1 , #about_area .about_sub_2 , #about_area .about_sub_3 { width: 20vw; }

}

@media screen and (min-width: 1025px){

	#wrap .workframe { width: 980px; }

}

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

	#product_list { margin: auto; }

	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }

	#about_area ul{margin: 50px 0 30px;}

}

@media screen and (max-width: 980px){
	#slogin_area .title{width:100%}

	section { padding-top: 10vw; }

	#product_list { width: 500px; }

	#product_list li .clip { height: 590px; }

	#about_area #about_info { margin-bottom: 8vw; }

	#about_area .about_sub_2 { top: auto; bottom: 35vw; width: 35vw; }

	#about_area .about_sub_3 { width: 29vw; left: 10vw; }

	#expertise_area .workframe{display:block;}

	#expertise_area .txt_box{padding:0;width: 100%;margin: 0 0 40px;}

	#expertise_area ul{width:100%;}

	#slogin_area .tit_box{display:block;}

	#slogin_area .info{width:100%;margin: 30px 0 0;}

	#effort_area ul{display: flex;flex-direction: column;align-items: center;}

	#effort_area ul li, #effort_area ul li:nth-child(2){margin-top: -30px;position: relative;left: 0;transform: translateX(0%);}

	#service_area{background: #c4e7e4;padding: 8vw 0;}

	#service_list{width: 100%;height: 100%;margin: 50px auto 0;}

	#service_list ul{position:relative;display: flex;flex-wrap: wrap;justify-content: space-between;}

	#service_list ul li, #service_list ul li:nth-child(1), #service_list ul li:nth-child(2), #service_list ul li:nth-child(3), #service_list ul li:nth-child(4), #service_list ul li:nth-child(5), #service_list ul li:nth-child(6), #service_list ul li:nth-child(7), #service_list ul li:nth-child(8){position: relative;width: 45%;border-radius: 0;padding: 0;transform: unset;top: 0;transform-origin: unset;margin-bottom: 30px;left: 0;}

	#service_list ul li >div{position:relative;transform: unset !important;}

	#service_list ul li >div img{width: 200px;height: 200px;object-fit: contain;margin-bottom: 20px;}

}

@media screen and (max-width: 760px){
	#slogin_area .title{font-size:30px;}
	#about_area ul li p{display:block;text-align: center;}
	#about_area ul li p b{text-align:center;display: block;}

	#about_area ul{grid-template-columns: repeat(2, 1fr);grid-gap: 1.5rem 1rem;}

	section, #expertise_area, #service_area, #slogin_area {padding: 50px 0;}

	#product_sub_list >div { margin: 10px auto 50px; }

	#product_sub_list li { width: 150px; }

	#product_sub_list li .clip { height: 150px; }

	#product_list { width: 70vw; }

	#product_list li .clip { height: 80vw; }

	#product_list li .info_box { width: 45vw; height: 30vw; }

	#about_area .tit_box{display:block;}

	#about_area .tit_box .top_info{width:100%;line-height: 200%;}

	#service_list ul li >div p{font-size: 14px;}

	#service_list ul li >div img{width: 150px;height: 150px;}

	#effort_area ul li{width: 300px;height: 300px;}

	#effort_area ul li svg{width: 120px;height: 120px;}

	#effort_area ul li p{margin-top:15px;}

}

@media screen and (max-width: 550px){

	#product_sub_list li { margin: 10px; width: 35vw; }

	#product_sub_list li .clip { height: 35vw; }

	#product_list { width: 90vw; }

	#product_list li .clip { height: 100vw; }

	#product_list li .info_box { width: 55vw; height: 40vw; }

	#about_area #about_img { width: 80vw; }

	#about_area .about_sub_2 { bottom: 60vw; }

	#news_area li .row { margin: auto; width: 280px; }

}

@media screen and (max-width: 480px){

	#book_area li .row { margin: auto; width: 250px; }

}