main { overflow: hidden; zoom: 1; background: #f2f3f6 }
@keyframes fadeInUpMini {
	0% { opacity: 0; transform: translate3d(0, 90px, 0) }
	to { opacity: 1; transform: none }
}
.fadeInUpMini { animation-name: fadeInUpMini }

@-webkit-keyframes fadeInLeftmini {
	0% { opacity: 0; -webkit-transform: translate3d(-90px, 0, 0); transform: translate3d(-90px, 0, 0) }
	100% { opacity: 1; -webkit-transform: none; transform: none }
}
@keyframes fadeInLeftmini {
	0% { opacity: 0; -webkit-transform: translate3d(-90px, 0, 0); -ms-transform: translate3d(-90px, 0, 0); transform: translate3d(-90px, 0, 0) }
	100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none }
}
.fadeInLeftmini { -webkit-animation-name: fadeInLeftmini; animation-name: fadeInLeftmini }
@-webkit-keyframes fadeInRightmini {
	0% { opacity: 0; -webkit-transform: translate3d(90px, 0, 0); transform: translate3d(90px, 0, 0) }
	100% { opacity: 1; -webkit-transform: none; transform: none }
}
@keyframes fadeInRightmini {
	0% { opacity: 0; -webkit-transform: translate3d(90px, 0, 0); -ms-transform: translate3d(90px, 0, 0); transform: translate3d(90px, 0, 0) }
	100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none }
}
.fadeInRightmini { -webkit-animation-name: fadeInRightmini; animation-name: fadeInRightmini }

/*slide*/
.slide { position: relative; width: 100%; height: 750px }
.slide .swiper-slide::before { content: ""; display: block; position: absolute; max-width: 100%; width: 1074px; height: 858px; left: 0px; top: 0px; z-index: 2; background: url(../images/lines.png) no-repeat }
.slide .swiper-slide::after { content: ""; display: block; position: absolute; max-width: 100%; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 1; background: #00000036 }
.slide .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover }
.slide .slide-titlebox { position: absolute; inset: 0; z-index: 3; height: 100% }
.slide .slide-title { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 80%; height: 100% }
.slide .slide-title p { margin-top: 30px; padding-bottom: 12px; font-weight: bold; font-family: "Mulish", Sans-serif; font-size: 15px; font-weight: 600; text-transform: uppercase; opacity: 0; visibility: hidden; transform: translateY(100%); background: linear-gradient(90deg, var(--white), var(--white)); -webkit-background-clip: text; -webkit-text-fill-color: transparent }
.slide .slide-title p::before { content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 60%; height: 1.5px; border-radius: 1.5px; background: #f8ee7d }
.slide .slide-title p::after { content: ''; display: block; position: absolute; left: 61%; bottom: 0; width: 10px; height: 1.5px; border-radius: 1.5px; background: #f8ee7d }
.slide .slide-title>h2 { display: block; position: relative; padding-bottom: 37px; font-family: "Mulish", Sans-serif; font-size: 70px; font-weight: 600; text-transform: capitalize; line-height: 1.15em; color: var(--white); opacity: 0; visibility: hidden; transform: translateY(60%) }
.slide .slide-title .slide-more { margin-top: 50px; opacity: 0; visibility: hidden; transform: translateY(100%) }
.slide .slide-title .slide-more a { position: relative; display: block; width: initial; height: 50px; padding: 0 57px; line-height: 50px; font-size: 16px; color: var(--white); border-radius: 33px; border: 2px solid #DE3232; overflow: hidden; background: #DE3232; text-transform: uppercase; transition: all .3s ease }
.slide .slide-title .slide-more a>span { position: relative; z-index: 1 }
.slide .slide-title .slide-more a:hover { transition: width 1s ease 0s, opacity 1s ease 0s, transform 1s ease 0.9s }
.slide .slide-title .slide-more a::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, #DE3232, #950202); width: 0 }
.slide .slide-title .slide-more a:hover::after { width: 100%; transition: width 1s ease 0s, opacity 1s ease 0s, transform 1s ease 0.9s }
.slide-prev, .slide-next { position: absolute; top: 50%; z-index: 9; width: 60px; height: 60px; transform: translateY(-50%); border: 2px solid #333; border-radius: 50%; cursor: pointer; transition: 0.3s; background: #333 }
.slide-prev::after, .slide-next::after { content: ''; position: absolute; left: 50%; top: 50%; width: 25%; height: 25%; border-radius: 2px; border-top: 5px solid #fff }
.slide-prev { left: 0; transform: translate(-100%, -50%) }
.slide-prev::after { border-left: 5px solid #fff; transform: translate(-30%, -50%) rotate(-45deg) }
.slide-next { right: 0; transform: translate(100%, -50%) }
.slide-next::after { border-right: 5px solid #fff; transform: translate(-70%, -50%) rotate(45deg) }
.slide-prev:hover, .slide-next:hover { background-color: #DE3232; border-color: #DE3232 }
.slide-prev:hover::after, .slide-next:hover::after { border-color: #fff }
.slide .slide-prev { transform: translate(100%, -50%) }
.slide .slide-next { transform: translate(-100%, -50%) }
.slide .swiper-slide.swiper-slide-active .slide-title .flex, .slide .swiper-slide.swiper-slide-active .slide-title>h2, .slide .swiper-slide.swiper-slide-active .slide-title>h2::before, .slide .swiper-slide.swiper-slide-active .slide-title>h2::after, .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 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-page { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 33px; left: 0; z-index: 1; width: 100%; height: 10px }
.slide-page .page-bullet { display: block; width: 36px; height: 5px; background: rgba(255, 255, 255, .13); margin-left: 7px; border-radius: 5px; cursor: pointer }
.slide-page .page-bullet:first-child { margin-left: 0 }
.slide-page .page-bullet.page-active { background: var(--hover-color) }

/*title*/
.title { line-height: 1.8em; text-align: left; font-family: "Mulish", Sans-serif }
.title span { display: block; font-weight: 500; font-size: 16px; color: #333 }
.title h2 { position: relative; margin-top: 3px; line-height: 1.25em; font-weight: 700; font-size: 40px; color: var(--hover-color) }

.explore { display: flex; align-items: center }
.explore span { display: inline-block; color: #fff; font-size: 18px; transition: 200ms }
.explore span + .common-arrow {  margin-left: 10px }
.explore .common-arrow { position: relative; overflow: hidden; width: 16px; line-height: 1; color: #fff }
.explore .common-arrow svg { display: block; position: relative; left: 0; width: 16px; height: auto; line-height: 1; transform: scaleY(-1) }
.explore .common-arrow svg.common-hide { position: absolute; left: -16px; top: 0; opacity: 0 }
.explore:hover span { color: var(--hover-color) }
.explore:hover .common-arrow svg { color: var(--hover-color); transition: 0.4s }
.explore:hover .common-arrow svg.common-show { left: 100%; opacity: 0.2 }
.explore:hover .common-arrow svg.common-hide { opacity: 1; left: 0; transition-delay: 0.1s }

/*about*/
.aboutbox { padding-top: 119px; padding-bottom: 116px; background: #fff url(../images/pattern.png) no-repeat center / cover }
.about-img { }
.about-img img { display: inline-block; vertical-align: middle; height: auto; max-width: 100%; border: none; border-radius: 0 }
.about-img img.about-img-big { box-shadow: 30px 30px 1px 0px #F43737 }
.about-img img.about-img-small { box-shadow: 0px 0px 1px 30px #FFFFFF; margin: -286px 0px 0px -130px }
.about-info { padding-left: 70px; line-height: 1.8em; font-family: "Mulish", Sans-serif; font-weight: 500; font-size: 16px; color: #333 }
.about-info span { display: block; margin-top: 21px; padding-bottom: 3px }
.about-info h2 { line-height: 1.25em; font-weight: 700; font-size: 36px; color: var(--hover-color) }
.about-info p { margin-top: 20px }
.about-info ul { margin-top: 23px }
.about-info ul li { display: flex; align-items: center; padding: 30px; background: #F2F3F6 }
.about-info ul li:nth-child(2) { background: #fff }
.about-info ul li i { display: block; width: 45px; height: 45px; line-height: 45px; text-align: center; font-style: normal; color: #fff; background: #DE3232 }
.about-info ul li strong { margin-left: 17px; color: var(--hover-color); font-family: "Mulish", Sans-serif; font-size: 18px; font-weight: 600 }
.about-info ul li:hover { background: #fff }

/*choose*/
.choosebox { position: relative; padding-top: 140px; padding-bottom: 100px; background: rgba(255, 255, 255, 1) }
.choosebox::after { content: ""; display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; background: #fff url(../images/bg1.png) no-repeat center / cover }
.choosebox .container { position: relative; z-index: 2 }
.choose-guild { align-items: center }
.choose-guild p { margin-top: 29px; line-height: 1.8em; font-family: "Mulish", Sans-serif; font-size: 16px; font-weight: 500; color: #333 }
.choose { margin-top: 105px }
.choose-item .flex { align-items: center }
.choose-item .flex .choose-img { flex: 0 0 33.255%; max-width: 33.255% }
.choose-item .flex h3 { flex: 0 0 calc(100% - 33.255%); max-width: calc(100% - 33.255%); line-height: 1.2em; text-transform: capitalize; font-family: "Mulish", Sans-serif; font-size: 18px; font-weight: 500; color: var(--hover-color) }
.choose-item p { margin-top: 36px; margin-bottom: 1.6em; line-height: 1.8em; font-family: "Mulish", Sans-serif; font-size: 16px; font-weight: 500; color: #333 }

/*product*/
.productbox { padding-top: 60px; padding-bottom: 60px }
.productbox .title { text-align: center }
.product { margin-top: 45px }
.product li:nth-child(n+4) { margin-top: 30px }
.product li .col-item { position: relative; display: block; overflow: hidden; background: #fff; transition: all .4s ease }
.product li .col-item::after { display: block; content: ""; position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background-color: #DE3232; transition: transform 250ms ease-in, -webkit-transform 250ms ease-in; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform-origin: center center; transform-origin: center }
.product li:hover .col-item::after { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform-origin: center center; transform-origin: center }
.product li .col-item>a { display: block; padding: 10px }
.product li .col-item>a figure { position: relative; margin: 0; overflow: hidden }
.product li .col-item>a figure::before { content: ""; display: block; background-size: cover; background-position: 50%; padding-bottom: 72.89% }
.product li .col-item>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 }
.product li .col-item:hover>a figure img { transform: scale3d(1.1, 1.1, 1) }
.product li .newsinfo { display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: auto; padding: 20px; color: var(--color) !important; background: var(--white); overflow: hidden; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease }
.product li .newsinfo h3.tit { width: 100%; line-height: 1.5em; text-align: center; font-weight: 700; font-family: "Mulish", Sans-serif; font-size: 18px; color: var(--hover-color) }
.product li .newsinfo p.txt { width: 100%; line-height: 1.8em; font-family: "Mulish", Sans-serif; font-weight: 500; font-size: 16px; color: var(--color); -webkit-line-clamp: 5 }
.product li .newsinfo .explore { display: inline-flex; justify-content: center; align-items: center; margin-top: 20px; padding: 15px 70px 15px 70px; font-size: 14px; font-weight: 600; text-transform: capitalize; color: var(--hover-color); background-color: #fff; border: 2px solid #F2F3F6 }
.product li .newsinfo .explore span { font-size: 14px; font-weight: 600; font-family: "Mulish", Sans-serif; color: var(--hover-color) }
.product li .common-arrow, .product li .common-arrow svg { width: 16px; color: var(--text-color) }
.product li .newsinfo .explore:hover { background-color: var(--hover-color) }
.product li .newsinfo .explore:hover span { color: #fff }
.product li:hover .col-item { box-shadow: 0 0 24px rgba(0, 0, 0, .12) }
.product li:hover .newsinfo { color: var(--hover-color) !important }
.product li .explore:hover .common-arrow, .product li .explore:hover .common-arrow svg { color: #fff }
.product li .explore:hover .explore .common-arrow svg { transition: all .4s ease; color: #fff }
.product li .explore:hover .explore .common-arrow svg.common-show { left: 100%; opacity: 0.2 }
.product li .explore:hover .explore .common-arrow svg.common-hide { opacity: 1; left: 0; transition-delay: 0.1s }

/*advantages*/
.advantagesbox { position: relative; padding-top: 80px; padding-bottom: 90px; background: url(../images/image-home01-7lejtt3.jpg) no-repeat center / cover }
.advantagesbox::after { content: ""; display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; background: rgba(36, 47, 108, .97) }
.advantagesbox .container { position: relative; z-index: 2 }
.advantagesbox .title { text-align: center }
.advantagesbox .title span { color: #fff }
.advantagesbox .title h2 { margin-top: 20px; color: #fff }
.advantages { margin-top: 50px }
.advantages li .count-item { display: flex; flex-direction: column; justify-content: center; align-items: center; height: auto; padding-top: 30px; padding-bottom: 30px; border-radius: 20px; background: #fff; box-shadow: 0px 28px 40px 0px rgba(2.000000000000001, 8.000000000000025, 22, 0.1) }
.advantages li .count-item b { position: relative; margin-top: 25px; color: #333; font-family: "Roboto Slab", Sans-serif; font-size: 30px; font-weight: 700 }
.advantages li .count-item b sub { bottom: initial; margin-left: 5px; font-style: normal; font-weight: 600; font-size: 100% }
.advantages li .count-item p { margin-top: 12px; line-height: 25px; color: #808080; font-weight: 400; font-family: "Open Sans", Sans-serif; font-size: 15px }
.advantages p.advantages-txt { width: 100%; margin-top: 40px; padding-top: 58px; text-align: center; line-height: 1.8em; font-family: "Mulish", Sans-serif; font-weight: 600; font-size: 18px; color: var(--white); border-top: 1px solid #A8AECE }
.advantages p a { text-decoration: underline; color: #DE3232 }

/*fabrication*/
.fabricationbox { padding-top: 141px; padding-bottom: 119px; overflow: hidden }
.fabrication-guild { justify-content: space-between; align-items: center }
.fabrication-more { display: inline-flex; justify-content: center; align-items: center; padding: 9px 40px; font-size: 14px; font-weight: 600; text-transform: capitalize; color: var(--hover-color); background-color: transparent; border: 2px solid var(--hover-color) }
.fabrication-more span { font-size: 14px; font-weight: 600; font-family: "Mulish", Sans-serif; color: var(--hover-color) }
.fabrication-more .common-arrow, .fabrication-more .common-arrow svg { width: 16px; color: var(--hover-color) }
.fabrication-more:hover { border-color: #DE3232 }
.fabrication-more:hover span { color: #DE3232 }
.fabrication-more:hover .common-arrow, .fabrication-more:hover .common-arrow svg { color: #DE3232 }
.fabrication-more:hover .common-arrow svg { transition: all .4s ease; color: #DE3232 }
.fabrication-more:hover .common-arrow svg.common-show { left: 100%; opacity: 0.2 }
.fabrication-more:hover .common-arrow svg.common-hide { opacity: 1; left: 0; transition-delay: 0.1s }
.fabrication { margin-top: 55px }
.fabrication-item { width: 450px; margin-right: 30px }
.fabrication-item>a { position: relative; display: block; overflow: hidden; border: 1px solid #ccc; background: #fff; border-bottom: 2px solid #F43737; padding: 10px; border-radius: 5px }
.fabrication-item>a figure { position: relative; margin: 0; overflow: hidden }
.fabrication-item>a figure::before { content: ""; display: block; padding-bottom: 76.667% }
.fabrication-item>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 }
.fabrication-item>a h3.tit { width: 100%; margin-top: 10px; padding: 0 10px; line-height: 3em; font-family: "Mulish", Sans-serif; font-weight: 500; font-size: 16px; color: var(--hover-color); background: #fff; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; text-align: center; text-decoration: underline; box-sizing: border-box }
.fabrication-item>a:hover h3.tit { color: #DE3232 }
.fabrication-page { display: flex; justify-content: center; align-items: center; width: 100%; height: 10px; margin-top: 45px }
.fabrication-page .page-bullet { display: block; width: 36px; height: 5px; background: #bfbfbf; margin-left: 20px; border-radius: 5px; cursor: pointer }
.fabrication-page .page-bullet:first-child { margin-left: 0 }
.fabrication-page .page-bullet.page-active { background: var(--hover-color) }

/*contact*/
.contactbox { padding-top: 120px; padding-bottom: 116px; background: #fff url(../images/patternhh.png) no-repeat center / cover }
.contact-txt { margin-top: 50px; line-height: 1.8em; font-weight: 600; font-family: "Mulish", Sans-serif; font-size: 16px; color: var(--color) }
.inquiry-form { margin-top: 54px }
.inquiry-form .row { margin-left: -5px; margin-right: -5px }
.inquiry-form .col-6, .inquiry-form .col-12 { padding-left: 5px; padding-right: 5px }
.inquiry-form .col-btn { display: flex; align-items: center; justify-content: center; margin-left: auto }
.inquiry-form .col-btn .form-item { width: 100% }
.form-item { position: relative }
.form-item label { display: flex; align-items: center; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); color: #999; font-family: "Mulish", Sans-serif; transition: color 0.5s ease-in-out }
.form-textarea label { top: 20px; font-family: "Mulish", Sans-serif; font-weight: 400; transform: none }
.form-item label span { display: flex; justify-content: center; align-items: center; width: 15px; color: #cf4040 }
.form-item input.form-input, .form-item textarea.form-textarea { width: 100%; height: 50px; padding: 0 20px; line-height: 50px; border: none; background-color: #fff; font-size: 14px; color: #1f2124; border: 3px solid #F2F3F6; font-family: "Mulish", Sans-serif }
.form-item textarea.form-textarea { max-width: 100%; min-width: 100%; height: 156px; font-size: 14px; line-height: 24px; padding: 20px }
.form-item input.form-input::placeholder, .form-item textarea.form-textarea::placeholder { opacity: 0 }
.form-item input.form-input:focus, .form-item textarea.form-textarea:focus { border-style: dotted; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1) }
.form-item input.form-input:focus::placeholder, .form-item textarea.form-textarea:focus::placeholder { opacity: 0 }
.form-item input.form-input:focus + label, .form-item input.form-input:active + label { color: transparent }
.form-item button.form-btn { display: block; width: 100%; height: 50px; padding: 0 20px; line-height: 50px; font-family: "Mulish", Sans-serif; font-size: 16px; color: #fff; cursor: pointer; outline: 0; border: none; background: #242F6C; border-radius: 5px; text-decoration: underline }
.form-item button.form-btn:hover { color: var(--hover-color); border: 2px solid var(--hover-color); background: none }
.form-item.focused label, .form-textarea.focused label { display: none }
.contact-img { display: flex; justify-content: flex-end; padding-right: 30px; padding-bottom: 30px }
.contact-img img { box-shadow: 30px 30px 1px 0px #F43737 }

/*grid*/
@media (max-width:1440px) { }
@media (max-width:1280px) { }
@media (max-width:1024px) {
	/*about*/
	.aboutbox, .choosebox, .advantagesbox, .fabricationbox, .contactbox { padding-top: 5em; padding-bottom: 5em }
	.about-img img.about-img-big { width: calc(100% - 60px) }
	.about-img img.about-img-small { display: none }
	.about-info { padding-left: 0;}

	/*about*/
	.aboutbox .col-6 { flex: 0 0 100%; max-width: 100% }
	.about-img img.about-img-big { width: calc(100% - 30px) }
	.about-info { margin-top: 50px }

	/*product*/
	.product li { flex: 0 0 50%; max-width: 50% }
	.product li:nth-child(n+3) { margin-top: 30px }

	/*choose*/
	.choose { margin-top: 5em }
	.choose li { flex: 0 0 50%; max-width: 50% }
	.choose li:nth-child(n+3) { margin-top: 30px }

	/*advantages*/
	.advantages li { flex: 0 0 50%; max-width: 50% }
	.advantages li:nth-child(n+3) { margin-top: 30px }

	/*contact*/
	.contactbox .col-7, .contactbox .col-5 { flex: 0 0 100%; max-width: 100% }
	.contact-img { display: none }
}
@media (max-width:768px) {
	/*slide*/
	.slide { height: 400px }
	.slide .slide-title { width: 100% }
	.slide .slide-title>h2 { display: block; position: relative; padding-bottom: 7px; font-size: 30px }
	.slide .slide-title .slide-more { margin-top: 20px }
	.slide .slide-title .slide-more a { padding: 0 40px; font-size: 14px }
	.slide-prev, .slide-next { display: none }
	.slide-page { bottom: 15px; height: 4px }
	.slide-page .page-bullet { width: 26px; height: 4px }

	/*title*/
	.title h2 { margin-top: 8px; font-size: 32px }

	.aboutbox, .choosebox, .advantagesbox, .fabricationbox, .contactbox { padding-top: 4em; padding-bottom: 4em }
}
@media (max-width:576px) {
	/*slide*/
	.slide .slide-title .slide-more a { height: 42px; padding: 0 35px; line-height: 42px }

	/*title*/
	.title h2 { margin-top: 8px; font-size: 28px }

	.aboutbox, .choosebox, .advantagesbox, .fabricationbox, .contactbox { padding-top: 3em; padding-bottom: 3em }

	/*product*/
	.product li { flex: 0 0 100%; max-width: 100% }
	.product li:nth-child(n+2) { margin-top: 30px }

	/*choose*/
	.choose li { flex: 0 0 100%; max-width: 100% }
	.choose li:nth-child(n+2) { margin-top: 30px }

	/*fabrication*/
	.fabrication-more { margin-top: 30px }

	/*contact*/
	.contact-txt { margin-top: 30px }
	.inquiry-form { margin-top: 34px }
	.inquiry-form .col-6 { margin-top: 10px }
}