main { overflow: hidden; zoom: 1 ; }

/*slide*/
.slide { position: relative; width: 100%; height: 100vh }
.slide .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover }
.slide .slide-title { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: absolute; inset: 0; z-index: 2; height: 100%; color: #fff }
.slide .slide-title>h2 { line-height: 1.2; font-weight: 700; font-size: 52px; opacity: 0; visibility: hidden; transform: translateY(60%) }
.slide .slide-title>span { display: block; margin-top: 20px; line-height: 1.4; font-weight: 700; font-size: 24px; font-family: Heebo; opacity: 0; visibility: hidden; transform: translateY(80%) }
.slide .slide-title>p { margin-top: 25px; opacity: 0; visibility: hidden; transform: translateY(100%); line-height: 24px; font-weight: 400; font-family: "Nunito Sans"; font-size: 14px }
.slide .slide-title>p>strong { margin: 0 6px; font-size: 24px }
.slide .slide-title>.slide-more { margin-top: 72px; opacity: 0; visibility: hidden; transform: translateY(100%) }
.slide .swiper-slide.swiper-slide-active img { ; animation: narrow 10s ease-in; -webkit-animation: narrow 10s ease-in }
.slide .swiper-slide.swiper-slide-active .slide-title>h2, .slide .swiper-slide.swiper-slide-active .slide-title>span, .slide .swiper-slide.swiper-slide-active .slide-title>p, .slide .swiper-slide.swiper-slide-active .slide-title>.slide-more { opacity: 1; visibility: visible; transform: translateY(0); transition: 1s 0.6s cubic-bezier(0.15, 1, 0.35, 1) }
.slide .swiper-slide.swiper-slide-active .slide-title>span, .slide .swiper-slide.swiper-slide-active .slide-title>p, .slide .swiper-slide.swiper-slide-active .slide-title>.slide-more { transition: all 2s cubic-bezier(0.15, 1, 0.35, 1) 0.75s }
.slide-prev, .slide-next { position: absolute; top: 50%; z-index: 9; width: 50px; height: 50px; transform: translateY(-50%); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 50%; cursor: pointer; transition: 0.3s; background: transparent }
.slide-prev::after, .slide-next::after { content: ''; position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; border-top: 2px solid rgba(255, 255, 255, .5) }
.slide-prev { left: 0; transform: translateX(-100%) }
.slide-prev::after { border-left: 2px solid rgba(255, 255, 255, .5); transform: translate(-30%, -50%) rotate(-45deg) }
.slide-next { right: 0; transform: translateX(100%) }
.slide-next::after { border-right: 2px solid rgba(255, 255, 255, .5); transform: translate(-70%, -50%) rotate(45deg) }
.slide-prev:hover, .slide-next:hover { background-color: var(--hover-color); border-color: transparent }
.slide-prev:hover::after, .slide-next:hover::after { border-color: #fff }
.slide:hover .slide-prev { transform: translateX(200%) }
.slide:hover .slide-next { transform: translateX(-200%) }
.slide-page { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 30px; left: 0; z-index: 1; width: 100%; height: 10px }
.slide-page .page-bullet { display: block; width: 10px; height: 10px; border-radius: 100%; background: rgba(255, 255, 255, .5); margin: 0 5px; cursor: pointer }
.slide-page .page-bullet.page-active { background: rgba(255, 255, 255, .9) }
@keyframes narrow {
	0% { -ms-transform: scale(1.2); transform: scale(1.2) }
	100% { transform: scale(1); -ms-transform: scale(1) }
}

/*title*/
.title { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #000 }
.title h2 { display: flex; flex-direction: column; align-items: center; line-height: 1.2; font-weight: 700; font-size: 40px }
.title h2::after { content: ''; display: block; width: 1em; height: 4px; margin-top: 19px; background: #17499f; border-radius: 2px }
.title p { display: block; text-align: center; margin-top: 16px; line-height: 28px; font-weight: 350; font-size: 16px }

/*more*/
.more { display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 28px; font-weight: 700; font-size: 15px; color: #17499f; border-radius: 24px; border: 2px solid #17499f; background: transparent; transition: all .3s ease }
.more:hover { color: #fff; background: #17499f }
.more .more-arrow { position: relative; overflow: hidden; width: 8px; margin-left: 11px; line-height: 1 }
.more .more-arrow svg { display: block; position: relative; left: 0; width: 8px; height: auto; line-height: 1 }
.more .more-arrow svg.more-hide { position: absolute; left: -10px; top: 0; opacity: 0 }
.more .more-arrow svg path { color: #17499f }
.more:hover .more-arrow svg { color: var(--hover-color); transition: .4s }
.more:hover .more-arrow svg.more-show { left: 100%; opacity: .2 }
.more:hover .more-arrow svg.more-hide { opacity: 1; left: 0; transition-delay: .1s }
.more:hover .more-arrow svg path { color: #fff }

.more-white { color: #fff; border-color: #fff }
.more-white:hover { border-color: #17499f; background: #17499f }
.more-white .more-arrow svg path { color: #fff }
.more-white:hover .more-arrow svg path { stroke: #fff }

.morebox { display: flex; flex-direction: column; align-items: center }

/*product*/
.productbox { padding: 88px 0 56px; background: #f8f8f8 }
.productbox .morebox { margin-top: 60px }
.product { margin-top: 55px }
.product ul { margin-left: -5px; margin-right: -5px }
.product li { height: 320px; padding-left: 5px; padding-right: 5px; transition: all .5s ease }
.product li>a { position: relative; display: block; width: 100%; height: 100%; color: #000; background: #ececec }
.product li>a::before { content: ""; width: 100%; height: 100%; display: none; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .5) }
.product li>a img { display: none; position: absolute; z-index: 0 }
.product li>a .flex { display: flex; flex-direction: column; justify-content: space-around; align-items: center; position: relative; z-index: 2; width: 100%; height: 100%; overflow: hidden }
.product li>a .flex .svgbox { display: flex; justify-content: center; width: 100% }
.product li>a .flex svg { margin-top:60px; color: #17499f }
.product li>a .flex h3 { height: 48px; margin-top: 44px; line-height: 24px; text-align: center; font-weight: 700; font-size: 17px }
.product li>a .flex p { display: none; margin-top: 14px; padding: 0 15px; line-height: 24px; font-weight: 350; font-size: 16px }
.product li.on { flex: 0 0 335px; max-width: 335px }
.product li.on>a { color: #fff }
.product li.on>a::before  { display: block }
.product li.on>a img { display: block; width: 100%; height: 100% }
.product li.on>a .flex { justify-content: center }
.product li.on>a .flex svg { margin-top: 20px; color: #fff }
.product li.on>a .flex h3 { height: initial; margin-top: 14px }
.product li.on>a .flex p { display: block; padding-bottom: 50px }

/*case*/
.casebox { padding: 70px 0 105px }
.casebox .morebox { margin-top: 40px }
.case { margin-top: 40px }
.case li>a { position: relative; display: block; overflow: hidden; color: var(--black); background: #f1f1f1 }
.case li>a figure { position: relative; margin: 0; overflow: hidden }
.case li>a figure::before { content: ""; display: block; background-size: cover; background-position: 50%; padding-bottom: 60% }
.case li>a figure img { display: inline-block; width: 100%; height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; position: absolute; top: 0; object-fit: cover }
.case li:hover>a figure img { transform: scale3d(1.1, 1.1, 1) }
.case li>a .caseinfo { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 20px; color: var(--black) !important; overflow: hidden; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease }
.case li>a .caseinfo h3.tit { width: 100%; height: 24px; line-height: 24px; font-weight: 400; font-size: 16px; text-align: center }
.case li>a:hover { background: #ebebeb }
.case li>a:hover .caseinfo h3.tit { font-weight: 700; color: #17499f }

/*abouts*/
.aboutbox { padding-top: 136px; background: url(../images/about_bg.jpg) no-repeat center / cover }
.aboutbox .title { color: #fff }
.aboutbox .title h2 span { display: block; margin-top: 4px; font-size: 24px; line-height: 48px; letter-spacing: 16px }
.aboutbox .title h2::after { margin-top: 13px; background: #17499f }
.aboutbox .title p { max-width: 50%; margin: 23px auto 0; line-height: 30px }
.aboutbox .title a { margin-top: 60px }
.abouts-count { align-content: center; justify-content: space-around; align-items: center; position: relative; bottom: -85px; width: 100%; background: #fff; box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.25) }
.abouts-count li { flex: 1; margin: 48px 0; padding: 0 20px; text-align: center; border-right: 1px solid #dcdcdc }
.abouts-count li:last-child { border-right: none }
.abouts-count li b { position: relative; font-size: 60px; line-height: 74px; font-weight: normal; font-family: Impact; color: #17499f }
.abouts-count li b span { margin-right: 10px }
.abouts-count li p { margin-top: 21px; line-height: 25px; letter-spacing: 1px; font-size: 16px }

/*news*/
.newsbox { margin-top: 85px; padding: 70px 0 50px }
.newsbox .morebox { margin-top: 40px }
.news { margin-top: 40px }
.news li>a { position: relative; display: block; overflow: hidden; color: var(--black); background: #f1f1f1 }
.news li>a figure { position: relative; margin: 0; overflow: hidden }
.news li>a figure::before { content: ""; display: block; background-size: cover; background-position: 50%; padding-bottom: 50% }
.news li>a figure img { display: inline-block; width: 100%; height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; position: absolute; top: 0; object-fit: cover }
.news li:hover>a figure img { transform: scale3d(1.1, 1.1, 1) }
.news li>a .newsinfo { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 20px; color: var(--black) !important; overflow: hidden; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease }
.news li>a .newsinfo h3.tit { height: 48px; line-height: 24px; font-weight: 400; font-size: 17px }
.news li>a .newsinfo time.date { margin-top: 10px; font: 400 15px / 21px "Nunito Sans"; color: #868686 }
.news li>a .newsinfo span { position: relative; display: block; margin-top: 24px; padding-bottom: 5px; font-weight: 700; font-size: 15px; line-height: 27px; transition: all 0.3s }
.news li>a .newsinfo span:after { content: " "; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 0; height: 1px; background: #17499f; transition: all 0.3s }
.news li>a:hover { background: #ebebeb }
.news li>a:hover .newsinfo span { color: #17499f }
.news li>a:hover .newsinfo span:after { width: 100% }

/*grid*/
@media (max-width:1600px) {}
@media (max-width:1440px) {}
@media (max-width:1280px) {}
@media (max-width:1024px) {}
@media screen and (min-width:767px) and (max-width:992px) {
	.product li>a .flex svg { width: 50% }
	.product li>a .flex h3 { font-size: 14px }
}
@media (max-width:768px) {
	/*slide*/
	.slide .slide-title>h2 { font-size: 42px }
	.slide-prev, .slide-next { display: none }

	/*title*/
	.title h2 { font-size: 34px }

	/*product*/
	.productbox { padding: 40px 0 50px }
	.product { margin-top: 25px }
	.product ul { justify-content: space-between; margin-left: 0; margin-right: 0 }
	.product li { flex: 0 0 calc(50% - 15px); max-width: calc(50% - 15px); height: auto; margin-top: 30px; padding-left: 0; padding-right: 0 }
	.product li>a { color: #fff }
	.product li>a::before { display: block }
	.product li>a img { display: block; width: 100%; height: 100% }
	.product li>a .flex { justify-content: center }
	.product li>a .flex svg { margin-top: 20px; color: #fff }
	.product li>a .flex h3 { height: initial; margin-top: 14px; font-size: 17px }
	.product li>a .flex p { display: block; padding-bottom: 50px }

	/*case*/
	.casebox { padding: 40px 0 50px }

	/*abouts*/
	.aboutbox .title p { max-width: 88% }
	.abouts-count li { flex: 0 0 50%; max-width: 50% }
	.abouts-count li:nth-child(2) { border-right: none }
	.abouts-count li:nth-child(n+3) { margin-top: 0 }

	/*news*/
	.newsbox { margin-top: 85px; padding-top: 40px }
	.news li>a .newsinfo { padding: 15px }
	.news li>a .newsinfo h3.tit { font-size: 16px }
	.news li>a .newsinfo time.date { font-size: 14px }
	.news li>a .newsinfo span { margin-top: 10px; font-size: 14px }
}
@media (max-width:576px) {
	/*slide*/
	.slide .slide-title>h2 { font-size: 34px }
	.slide .slide-title>span { margin-top: 10px; font-size: 20px }
	.slide .slide-title>p { margin-top: 10px }
	.slide .slide-title>p>strong { font-size: 20px }
	.slide .slide-title>a { margin-top: 42px }
	.slide-prev, .slide-next { display: none }

	/*more*/
	.more { padding: 0 18px }

	/*product*/
	.product ul { justify-content: center }
	.product li { flex: 0 0 100%; max-width: 100%; height: 320px }

	/*case*/
	.case { margin-top: 10px }
	.case li { margin-top: 30px }

	/*abouts*/
	.aboutbox { padding-top: 120px }
	.aboutbox .title h2 span { font-size: 20px; letter-spacing: 2px }
	.aboutbox .title p { max-width: 100% }
	.aboutbox .title a { margin-top: 40px }
	.abouts-count li { margin: 28px 0; padding: 0 15px }
	.abouts-count li b { font-size: 42px; line-height: 64px }
	.abouts-count li b span { margin-right: 5px }

	/*news*/
	.news { margin-top: 10px }
	.news li { margin-top: 30px }
}