main { overflow: hidden; zoom: 1 }

/*banner*/
.banner { position: relative; width: 100%; height: 360px; overflow: hidden }
.banner-tit { width: 100%; height: 100%; justify-content: center; align-items: center }
.banner-tit h2 { display: block; line-height: 1.25em; font-weight: 700; font-family: "Mulish", Sans-serif; font-size: 40px; color: #fff }

/*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 }

/*position*/
.positionbox { background: #f8f8f8; border-bottom: 1px solid #dfdfdf }
.positionbox .position { justify-content: flex-start; border-left: none }
.position { padding-top: 10px; padding-bottom: 10px; align-items: center; line-height: 28px; font-family: "Mulish", Sans-serif; font-weight: 500; font-size: .85em; color: var(--hover-color) }
.position svg { margin-right: 11px; font-size: 16px; color: var(--hover-color) }
.position i { border-left: 5px solid #b6b6b6; border-right: 0 solid transparent; border-top: 4px solid transparent; border-bottom: 4px solid transparent }
.position a { padding: 0 9px; color: var(--hover-color); text-decoration: underline }
.position a:hover { color: var(--hover-color) }

.mainbox { padding: 50px 0 }

/*product*/
.main-title h1 { position: relative; padding: 5px 0; font-weight: 700; font-size: 2rem; line-height: 1.4em; font-family: "Mulish", Sans-serif; color: var(--hover-color); word-wrap: break-word; word-break: break-all; border-bottom: 1px solid #e6e6e6 }
.main-title h1::after { position: absolute; bottom: 0; content: ""; display: block; width: 150px; height: 2px; background: #cf2e2e }
.main-title p { margin-top: 20px; color: var(--color); font-weight: 500; font-family: "Mulish", Sans-serif; font-size: 16px; line-height: 1.8em }
.productbox { padding-top: 60px; padding-bottom: 60px; background: #F2F3F6 }
.productlist { margin-top: 30px }
.productlist li:nth-child(n+4) { margin-top: 30px }
.productlist li .col-item { position: relative; display: block; overflow: hidden; background: #fff; transition: all .4s ease }
.productlist 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 }
.productlist 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 }
.productlist li .col-item>a { display: block; padding: 10px }
.productlist li .col-item>a figure { position: relative; margin: 0; overflow: hidden }
.productlist li .col-item>a figure::before { content: ""; display: block; background-size: cover; background-position: 50%; padding-bottom: 72.89% }
.productlist 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 }
.productlist li .col-item:hover>a figure img { transform: scale3d(1.1, 1.1, 1) }
.productlist 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 }
.productlist 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) }
.productlist 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 }
.productlist 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 }
.productlist li .newsinfo .explore span { font-size: 14px; font-weight: 600; font-family: "Mulish", Sans-serif; color: var(--hover-color) }
.productlist li .common-arrow, .productlist li .common-arrow svg { width: 16px; color: var(--text-color) }
.productlist li .newsinfo .explore:hover { background-color: var(--hover-color) }
.productlist li .newsinfo .explore:hover span { color: #fff }
.productlist li:hover .col-item { box-shadow: 0 0 24px rgba(0, 0, 0, .12) }
.productlist li:hover .newsinfo { color: var(--hover-color) !important }
.productlist li .explore:hover .common-arrow, .productlist li .explore:hover .common-arrow svg { color: #fff }
.productlist li .explore:hover .explore .common-arrow svg { transition: all .4s ease; color: #fff }
.productlist li .explore:hover .explore .common-arrow svg.common-show { left: 100%; opacity: 0.2 }
.productlist li .explore:hover .explore .common-arrow svg.common-hide { opacity: 1; left: 0; transition-delay: 0.1s }

.main-info { font-family: "Mulish", Sans-serif }
.main-info h2 { line-height: 1.2em; font-weight: 700; font-size: 25px; margin-bottom: 0.8em; margin-top: 0.8em; color: var(--hover-color) }
.main-info p { margin-bottom: 1.6em; text-indent: 0; line-height: 1.8em; color: var(--color) }
.main-bottom { margin-top: 70px; font-family: "Mulish", Sans-serif }
.main-bottom p { margin-bottom: 1.6em; text-indent: 0; line-height: 1.8em; font-size: 500; color: var(--color) }
.productlb { margin-top: 30px }
.productlb li:nth-child(n+4) { margin-top: 30px }
.productlb li .col-item { position: relative; display: block; overflow: hidden; background: #F8F9FA; border: 1px solid #A8AECE; border-radius: 4px; transition: all .4s ease }
.productlb 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 }
.productlb 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 }
.productlb li .col-item>a { display: block }
.productlb li .col-item>a figure { position: relative; margin: 0; overflow: hidden }
.productlb li .col-item>a figure::before { content: ""; display: block; background-size: cover; background-position: 50%; padding-bottom: 72.89% }
.productlb 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 }
.productlb li .col-item:hover>a figure img { transform: scale3d(1.1, 1.1, 1) }
.productlb li .col-item .newsinfo { display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: auto; color: var(--color) !important; overflow: hidden; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease }
.productlb li .col-item .newsinfo h3.tit { width: 100%; padding: 20px; line-height: 1.5em; text-align: center; font-weight: 700; font-family: "Mulish", Sans-serif; font-size: 18px; color: var(--hover-color) }
.productlb li .col-item:hover .newsinfo h3.tit { color: var(--hover-color) }

.product { padding: 50px 0px 40px }
.product h1 { line-height: 1.4em; font-weight: 700; font-family: "Mulish", Sans-serif; font-size: 36px; color: var(--hover-color) }
.product h1::after { content: ""; display: block; width: 30%; height: 5px; margin-top: 19px; margin-left: 3px; border: 3px dashed #DE3232; transform: skewX(-45deg) }
.product p { margin-top: 49px; font-size: 18px; line-height: 35px; font-weight: 500; font-family: "Mulish", Sans-serif; color: var(--color) }
.product a.product-email { display: inline-flex; justify-content: center; align-items: center; margin-top: 40px; padding: 15px 30px; font-size: 14px; font-weight: 600; text-transform: capitalize; color: var(--hover-color); background-color: transparent; border-radius: 4px; border: 1px solid var(--hover-color); font-size: 14px; font-weight: 600; font-family: "Mulish", Sans-serif }
.product a.product-email:hover { color: var(--white); background: var(--hover-color); border-color: var(--hover-color) }
.product .product-img-big { display: inline-block; vertical-align: middle; height: auto; max-width: 100%; border: none; border-radius: 0; box-shadow: none; border: 1px solid #dfdfdf; border-radius: 4px }
.product-title { border-bottom: 2px solid var(--hover-color) }
.product-title h3 { display: inline-block; padding: 15px 30px; line-height: 1em; color: #fff; font-weight: 700; font-size: 1rem; font-family: "Mulish", Sans-serif; background: var(--hover-color) }

.product-img { background: #f5f5f5 }
.product-img .swiper-slide::before { content: ""; display: block; padding-bottom: 100% }
.product-img .swiper-slide img.img-fluid { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 100%; height: 100%; object-fit: cover }
.product-img-prev, .product-img-next { position: absolute; top: 45%; z-index: 9; width: 50px; height: 50px; transform: translateY(-50%); border: 2px solid #eee; border-radius: 50%; cursor: pointer; transition: 0.3s; background: transparent }
.product-img-prev::after, .product-img-next::after { content: ''; position: absolute; left: 50%; top: 50%; width: 33%; height: 33%; border-top: 2px solid #eee }
.product-img-prev { left: 0; transform: translateX(-100%) }
.product-img-prev::after { border-left: 2px solid #eee; transform: translate(-30%, -50%) rotate(-45deg) }
.product-img-next { right: 0; transform: translateX(100%) }
.product-img-next::after { border-right: 2px solid #eee; transform: translate(-70%, -50%) rotate(45deg) }
.product-img-prev:hover, .product-img-next:hover { background-color: var(--hover-color); border-color: transparent }
.product-img-prev:hover::after, .product-img-next:hover::after { border-color: #fff }
.product-img:hover .product-img-prev { transform: translateX(55%) }
.product-img:hover .product-img-next { transform: translateX(-55%) }
.product-img-page { display: flex; justify-content: center; position: absolute; bottom: 0; width: 100%; height: 10px; padding-bottom: 30px; box-sizing: content-box; line-height: 10px; text-align: center }
.product-img-page .page-bullet { display: block; width: 10px; height: 10px; margin: 0 8px; border-radius: 100%; background: #dcdcdc }
.product-img-page .page-bullet.page-active { background: var(--hover-color) }

.product-bt{  }
.product-spotlight {}
.product-spotlight .col-4:nth-child(n+4) { margin-top: 30px }

.relatedbox { padding-top: 60px; padding-bottom: 90px; overflow: hidden; background: #F2F3F6 }
.related-title { border-bottom: 2px solid var(--hover-color) }
.related-title h2 { display: inline-block; padding: 15px 30px; line-height: 1em; color: #fff; font-weight: 700; font-size: 1rem; font-family: "Mulish", Sans-serif; background: var(--hover-color) }
.related-product { margin-top: 55px }
.related-product-item { position: relative; display: block; width: 330px; margin-right: 30px; overflow: hidden; border: 1px solid #A8AECE; box-sizing: border-box; background: #fff; border-radius: 5px }
.related-product-item figure { position: relative; margin: 0; overflow: hidden }
.related-product-item figure::before { content: ""; display: block; padding-bottom: 76.667% }
.related-product-item 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 }
.related-product-item h3.tit { width: 100%; padding: 10px; line-height: 1.2em; font-family: "Mulish", Sans-serif; font-weight: 700; font-size: 18px; color: var(--hover-color); background: #fff; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; text-align: center; box-sizing: border-box }
.related-product-item:hover h3.tit { color: var(--hover-color) }
.related-more { display: inline-flex; justify-content: center; align-items: center; margin-top: 10px; padding: 9px 20px; font-size: 14px; font-weight: 600; text-transform: capitalize; color: var(--white); background-color: var(--hover-color); border-radius: 4px; border: 2px solid var(--hover-color) }
.related-more span { font-size: 14px; font-weight: 600; font-family: "Mulish", Sans-serif; color: var(--white) }
.related-more .common-arrow, .related-more .common-arrow svg { width: 16px; color: var(--white) }
.related-more:hover { background: #DE3232; border-color: #DE3232 }
.related-more:hover span { color: #fff }
.related-more:hover .common-arrow, .related-more:hover .common-arrow svg { color: #fff }
.related-more:hover .common-arrow svg { transition: all .4s ease; color: #fff }
.related-more:hover .common-arrow svg.common-show { left: 100%; opacity: 0.2 }
.related-more:hover .common-arrow svg.common-hide { opacity: 1; left: 0; transition-delay: 0.1s }
.related-product-title { flex-direction: column; align-items: center; padding: 10px 0 20px }
.related-product-prev, .related-product-next { position: absolute; top: 50%; z-index: 9; width: 30px; height: 60px; transform: translateY(-50%); border: 2px solid #333; cursor: pointer; transition: 0.3s; background: #333 }
.related-product-prev::after, .related-product-next::after { content: ''; position: absolute; left: 50%; top: 50%; width: 40%; height: 20%; border-radius: 2px; border-top: 3px solid #fff }
.related-product-prev { left: 0; border-radius: 0 5px 5px 0 }
.related-product-prev::after { border-left: 3px solid #fff; transform: translate(-30%, -50%) rotate(-45deg) }
.related-product-next { right: 0; border-radius: 5px 0 0 5px }
.related-product-next::after { border-right: 3px solid #fff; transform: translate(-70%, -50%) rotate(45deg) }
.related-product-prev:hover, .related-product-next:hover { background-color: var(--hover-color); border-color: var(--hover-color) }
.related-product-prev:hover::after, .related-product-next:hover::after { border-color: #fff }

/*list*/
.list { padding: 5px 0 }
.list li { padding: 40px 0; border-bottom: 1px solid #eee }
.list li:last-child { border-bottom: none }
.list li>a { position: relative; display: flex; overflow: hidden; background: #fff; transition: all .4s ease }
.list li>a figure { position: relative; margin: 0; margin-right: 40px; overflow: hidden; flex: 0 0 350px; max-width: 350px }
.list li>a figure::before { content: ""; display: block; padding-bottom: 75.71% }
.list 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 }
.list li>a:hover figure img { transform: scale3d(1.2, 1.2, 1) }
.list li>a .list-info { display: flex; flex-direction: column; justify-content: flex-start; height: auto; color: var(--color) !important; background: var(--white); overflow: hidden; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease }
.list li>a .list-info h3.tit { line-height: 50px; font-family: "Mulish", Sans-serif; font-size: 26px; color: var(--color) }
.list li>a .list-info p.txt { margin-top: 15px; line-height: 1.8em; font-size: 18px; font-family: "Mulish", Sans-serif; color: var(--text-color); -webkit-line-clamp: 3 }
.list li>a .list-info .flex { align-items: center; margin-top: 28px; font-size: 14px; color: var(--text-color) }
.list li>a .list-info .flex time.date { display: flex; align-items: center; font-family: Arial-Black, Arial; color: var(--text-color); letter-spacing: -.05em }
.list li>a .list-info .flex time.date svg { margin-right: 9px }
.list li>a .list-info .flex span { margin-left: 32px }
.list li>a .list-info .flex span i { font-style: normal; font-family: Arial-Black, Arial; margin-right: 5px }
.list li>a:hover .list-info h3.tit { color: var(--hover-color) }

/*article*/
.content { }
.article { position: relative; width: 100%; font-family: "Mulish", Sans-serif; background: #fff }
.article-tit { padding-top: 30px; padding-bottom: 30px; border-bottom: 1px solid #eee; text-align: center }
.article-tit h1 { padding: 20px 0; font-weight: 400; font-size: 2rem; line-height: 1.4em; color: var(--hover-color); word-wrap: break-word; word-break: break-all }
.article-tit .profile { font-size: 16px; color: var(--color); line-height: 1.8rem }
.article-tit .profile span + span { margin-left: 24px }
.article-tit .profile span i { margin-right: 5px; font-style: normal }
.article-info { overflow: hidden; padding-top: 30px }
.article-info .info { padding-bottom: 1.6em; line-height: 1.8; font-size: 16px }
.article-info .info h2 { line-height: 1.2em; font-weight: 700; font-size: 25px; margin-bottom: 0.8em; margin-top: 0.8em; color: var(--hover-color) }
.article-info .info p { margin-bottom: 1.6em; text-indent: 0; line-height: 1.8em; color: var(--color) }
.article-info .info img { max-width: 100%; vertical-align: top }
.article-info .info a { color: var(--color) }
.article-info .info a:hover { text-decoration: underline }
.article-info .info strong, .article-info .info th { font-weight: bold }
.article-info video { width: 100%; max-width: 100% }
.fanye { justify-content: space-between; margin-bottom: 10px; padding: 44px 0; line-height: 32px; font-size: 18px; color: var(--text-color); border-top: 1px solid #f4f4f4 }
.fanye strong { color: var(--color); font-weight: normal }
.fanye a { color: var(--text-color) }
.fanye a:hover { color: var(--hover-color) }
.fanye-left, .fanye-right { flex: 0 0 48%; max-width: 48%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.fanye-right { text-align: right }

/*aboutus*/
.aboutus .article-tit { text-align: left; border-bottom: none; padding-bottom: 0 }
.aboutus .article-tit h1 { position: relative; padding: 5px 0; font-weight: 700; font-size: 2rem; line-height: 1.4em; font-family: "Mulish", Sans-serif; color: var(--hover-color); word-wrap: break-word; word-break: break-all; border-bottom: 1px solid #e6e6e6 }
.aboutus .article-tit h1::after { position: absolute; bottom: 0; content: ""; display: block; width: 150px; height: 2px; background: #cf2e2e }
.aboutus .article-tit p { margin-top: 20px; color: var(--color); font-weight: 500; font-family: "Mulish", Sans-serif; font-size: 16px; line-height: 1.8em }

.messagebox { padding-top: 80px; padding-bottom: 80px; background: #F2F3F6 }
.message .message-title h2 { display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--hover-color); font-weight: 700; font-family: "Mulish", Sans-serif; font-size: 1.5rem; line-height: 1.25em; text-align: center }
.message .message-title h2::after { content: ""; display: block; width: 80px; height: 3px; margin-top: 35px; background: var(--hover-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*/
.banner-position { flex-direction: column }
.banner-position .position, .banner-position .position svg { color: var(--white) }
.banner-position .position i { border-left: 5px solid var(--white) }
.banner-position .position a { color: var(--white) }
.banner-position .position a:hover { color: var(--hover-color) }
.contactbox { padding-top: 120px; padding-bottom: 70px }
.contact-title { padding-top: 5px }
.contact-title span { color: var(--hover-color); font-weight: 700; font-family: "Mulish", Sans-serif; font-size: 40px; line-height: 1.25em }
.contact-title h1 { margin-top: 30px; font-weight: 700; line-height: 1.2em; font-size: 20px; color: var(--hover-color) }
.contact ul { margin-top: 40px }
.contact ul li { display: flex; justify-content: flex-start; align-items: flex-start; margin-top: calc(27px / 2); padding-bottom: calc(27px / 2); line-height: 2em; font-family: "Rubik", Sans-serif; font-size: 16px; font-weight: 400; text-transform: none; color: var(--hover-color) }
.contact ul li:first-child { margin-top: 0 }
.contact ul li i.footer-icon { display: flex; justify-content: center; align-items: center; flex: 0 0 24px; max-width: 24px; width: 2em; height: 2em; margin-right: 8px; color: var(--hover-color) }
.inquiry { padding: 40px 50px; background: #F2F3F6 }
.inquiry .inquiry-title h2 { color: var(--hover-color); font-weight: 700; font-family: "Mulish", Sans-serif; font-size: 40px; line-height: 1.25em }
.inquiry .inquiry-title p { margin-top: 50px; text-indent: 0; line-height: 1.8em; color: var(--color) }
.inquiry .form-item textarea.form-textarea { height: 100px }

.mapbox { margin-top: 100px }
.mapbox h3 { font-weight: 700; line-height: 1.25em; font-size: 1.5rem; color: var(--hover-color) }
.map { width: 100%; height: 450px; margin-top: 20px }
.map iframe { max-width: 100%; width: 100%; margin: 0; line-height: 1; border: none }

/*pages*/
.pagebar { width: 100%; margin-top: 10px; padding: 10px 0 }
.pagebar .pagination { display: flex; justify-content: center }
.pagebar .pagination a { display: block; min-width: 42px; height: 42px; margin: 0 5px; padding: 0 16px; line-height: 42px; text-align: center; color: var(--black); font-size: 18px; font-family: "Mulish", Sans-serif; box-sizing: border-box; text-decoration: none; border-radius: 100%; transition: all .3s ease-out 0s }
.pagebar .pagination a.page-size { font-size: 18px; font-family: "Mulish", Sans-serif; }
.pagebar .pagination .d-none { display: none; }
.pagebar .pagination a.page-size:hover { color: var(--hover-color) }
.pagebar .pagination a.page-num-current, .pagebar .pagination a.page-num:hover { color: #fff; background: var(--hover-color) }
.pageno { padding: 20px 0; text-align: center; font-size: 14px; color: #999 }

/*grid*/
@media (max-width:1440px) {

}
@media (max-width:1280px) { }
@media (max-width:1024px) {
	.mainbox{ padding-top: 5em; padding-bottom: 5em }

	/*pages*/
	.pagebar { margin-top: 20px }
	.pagebar .pagination { justify-content: center }
	.pagebar .page-num { display: none }
}
@media (max-width:768px) {
	.mainbox{ padding-top: 4em; padding-bottom: 4em }

	/*product*/
	.productlist { margin-top: 10px }
	.productlist li.col-4, .productlb li.col-4 { flex: 0 0 50%; max-width: 50% }
	.productlist li:nth-child(n+3), .productlb li:nth-child(n+3) { margin-top: 30px }
	.main-bottom { margin-top: 50px }
	.product { padding-top: 10px }
	.product .col-6 { flex: 0 0 100%; max-width: 100% }
	.product .product-img-big { margin-top: 30px }
	.product-spotlight .col-4 { flex: 0 0 50%; max-width: 50% }
	.product-spotlight .col-4:nth-child(n+3) { margin-top: 30px }

	/*list*/
	.list li>a figure { margin-right: 20px; flex: 0 0 280px; max-width: 280px }
	.list li>a figure::before { padding-bottom: 71.42% }
	.list li>a .list-info p.txt { -webkit-line-clamp: 2 }

	/*contact*/
	.contactbox .col-5, .contactbox .col-7 { flex: 0 0 100%; max-width: 100% }
	.inquiry { margin-top: 30px; padding: 30px 40px }
	.mapbox { margin-top: 4em }
}
@media (max-width:576px) {
	.mainbox{ padding-top: 3em; padding-bottom: 3em }

	/*product*/
	.productlist li.col-4, .productlb li.col-4 { flex: 0 0 100%; max-width: 100% }
	.productlist li:nth-child(n+2), .productlb li:nth-child(n+2) { margin-top: 30px }
	.main-bottom { margin-top: 30px }
	.product h1 { font-size: 28px }
	.product-spotlight .col-4 { flex: 0 0 100%; max-width: 100% }
	.product-spotlight .col-4:nth-child(n+2) { margin-top: 30px }

	/*list*/
	.list li { padding: 30px 0 }
	.list li>a { flex-direction: column }
	.list li>a figure { margin-right: 0; flex: 0 0 100%; max-width: 100% }
	.list li>a .list-info { margin-top: 10px }
	.list li>a .list-info h3.tit { line-height: 1.8em; font-size: 20px }
	.list li>a .list-info p.txt { margin-top: 10px; line-height: 1.5em; font-size: 16px; -webkit-line-clamp: 3 }
	.list li>a .list-info .flex { margin-top: 15px }

	/*article*/
	.article-tit { padding-bottom: 20px }
	.article-tit h1 { padding: 5px 0; line-height: 36px; font-size: 20px }
	.article-info { padding-top: 28px }

	/*aboutus*/
	.aboutus .article-tit { padding-top: 0 }
	.aboutus .article-info .info { padding-bottom: 0 }

	.inquiry-form { margin-top: 34px }
	.inquiry-form .col-6 { margin-top: 10px }

	/*contact*/
	.contact-title span { font-size: 32px }
	.contact-title h1 { font-size: 18px }
	.contact ul { margin-top: 30px }
	.inquiry { margin-top: 30px; padding: 20px 15px }
	.inquiry .inquiry-title h2 { font-size: 32px }
	.inquiry .inquiry-title p { margin-top: 30px }
	.mapbox { margin-top: 4em }

	/*pages*/
	.pagebar { margin-top: 20px }
	.pagebar .pagination { justify-content: center }
	.pagebar .page-num { display: none }
}