/* CSS Document */
@import url(font-awesome/css/font-awesome.min.css);

.banner { width: 100%; padding: 84px 0 0 0;}
.banner-mobile { display: none; }
.banner-set { position: relative; }
.banner-title-1 { position: absolute; left: 7%; top: 10%; font-size: 65px; color: #fff; line-height: 1.2;}
.banner-title-2 { position: absolute; left: 7%; top: 22%; font-size: 45px; color: #fff; line-height: 1.4;}

.loop .owl-dots { display: none;}
.loop .owl-item {position: relative; }
.loop .owl-nav { position: absolute; top:calc(50% - 40px); left: 0; width: 100%; z-index: 11;}
.loop .owl-prev, .loop .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); width: 50px !important; height: 50px !important; border-radius: 0% !important; background: rgba(255,255,255,0) !important; transition: all 0.4s ease-out 0s;}
.loop .owl-prev { left:10px; }
.loop .owl-next { right:10px;}
.loop .owl-prev:before, .loop .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width: 25px; height: 25px; background-size: contain; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: #fff; position: relative;}
.loop .owl-prev:before { content: ""; transform: rotate(-135deg); left: 20px; }
.loop .owl-next:before { content: ""; transform: rotate(45deg); right: -10px;}
.loop .owl-prev:hover, .loop .owl-next:hover { opacity: 0.7;}
.loop .owl-stage-outer {z-index: 2;}
.loop .owl-dots { position: absolute; z-index: 100; bottom: 0px; right: 0; width: 220px;  text-align: center !important; padding: 20px 20px; background: rgba(255,255,255,.16); }
.loop .owl-dots .owl-dot { width: 19px; height: 19px; border: 1px solid #fff !important; padding: 4px !important; border-radius: 100%; text-align: center; margin: 0 7px;}
.loop .owl-dots .owl-dot span { background: rgba(255,255,255,0) !important; width: 9px !important; height: 9px !important; margin: 0 !important;}
.loop .owl-dots .owl-dot.active span, .loop  .owl-dots .owl-dot:hover span { background: rgba(255,255,255,1) !important; }

.idx-section-about { max-width:1400px; margin:0 auto; padding:calc(20px + 3%) 20px; }
.idx-about-content { display: flex; flex-wrap: wrap; align-items: center;}
.idx-about-text { width: 50%; font-size: 18px; line-height: 2rem; padding-right: 30px; }
.idx-about-pic { width: 50%; text-align: center; }
.btn-about { display: block; color: #16315c !important; border: 1px solid #16315c; max-width: 170px; text-align: center; padding: 10px 0; font-size: 16px; }
.btn-about:hover { background-color: #b91c2d; border: 1px solid #b91c2d; color: #fff !important; }

.vantage-bg { background-color: #ededed; position: relative; margin-top: -100px; padding-top: calc(20px + 5%);}
.idx-section-vantage { max-width:1400px; margin:0 auto; padding: 40px 20px 70px 20px; }
.vantage-list { text-align: center; border-right: 1px solid #dedede; padding-right: 10px; }
.no-border { border: none }
.vantage-icon { margin-bottom: 10px; }
.vantage-icon img { max-width: 70px;}
.vantage-title { font-weight: bold; font-size: 22px; }
.vantage-text { margin-top: 5px; line-height: 1.7rem; color: #7e7e7e; }

.idx-section-product { max-width:1400px; margin:0 auto; padding: 70px 20px; }
.product-title { text-align: center; font-weight: bold; font-size: 1.7rem; margin-bottom: 30px; }
.product-title:after { content: ""; display: block; width: 6%; height: 3px; margin: 10px auto; background-color: #b91c2d; }
.product-list { padding: 0 10px; }
.product-pic { position: relative; padding-bottom: 66.6%; overflow: hidden; }
.product-pic img { transition: all 0.5s; }
.product-pic img:hover { scale: 1.2;  }
.product-name { text-align: center; font-weight: bold; font-size: 1.1rem; }
.idx-product .slick-dots { bottom: -60px; }
.idx-product .slick-dots li button:before { font-size: 10px; }
.idx-product .slick-dots li.slick-active button:before { color: #b91c2d;}

.idx-section-news { max-width:1400px; margin:0 auto; padding: 70px 20px; }
.news-title { text-align: center; font-weight: bold; font-size: 1.7rem; margin-bottom: 30px; }
.news-title:after { content: ""; display: block; width: 6%; height: 3px; margin: 10px auto; background-color: #b91c2d; }

.news-list { display: flex; align-items: center; border: solid 1px #e2e0e0; border-radius: 6px; transition: all 0.5s; margin-bottom: 70px; padding: 20px 0; }
.news-list-pic { position: relative; overflow: hidden; width: 35%; padding: 0 2.799%;}
.news-list-pic > a {display: block; position: relative; z-index: 1; padding-bottom: 66.6%;}
.news-info { position: relative; width: 60%; padding: 15px; }
.news-info-title { margin-top: 27px; font-size: 1.2rem; line-height: 1.5rem; font-weight: 600; }
.news-info-title a:hover { color: #b91c2d; }
.news-info-text { margin: 10px 0; font-size: 1.1rem; line-height: 1.5rem; color: #7f7f7f; }
.news-list:hover { transform: scale(0.98); box-shadow: 0px 5px 6px #d6d6d6; }
.news-list:hover .news-list-pic img { opacity: 0.7; }
.news-btnbox { text-align: center; margin-top: 16px; }
.news-btn { display: inline-block; padding: 5px 25px; font-size: 1rem; color: #5c5c5c !important; background-color: #fff; border: solid 1px #adadad; border-radius: 3px; transition: all 0.5s; }
.news-btn:hover { background: #b91c2d; color: #fff !important; border: solid 1px #b91c2d; }


.idx-section-application { max-width:1400px; margin:0 auto; padding: 70px 20px; }
.application-title { text-align: center; font-weight: bold; font-size: 1.7rem; margin-bottom: 30px; }
.application-title:after { content: ""; display: block; width: 6%; height: 3px; margin: 10px auto; background-color: #b91c2d; }

.application-list { border: solid 1px #e2e0e0; transition: all 0.5s ease-in-out; margin-bottom: 20px; }
.application-list-pic { overflow: hidden; position: relative; padding-bottom: 47%; }
.application-list:hover .application-list-info { background-color: #b91c2d; }
.application-list:hover .application-list-title a, .application-list:hover .application-list-text { color: #fff; }
.application-list-info { padding: 20px; }
.application-list-title { font-size: 1.2rem; line-height: 1.5rem; font-weight: 600; }
.application-list-text { margin: 10px 0; font-size: 16px; line-height: 24px; height: 74px; color: #919191; transition: all 0.3s ease-in-out; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;}
.application-list:hover { transform: scale(0.97); box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.3); }


.btn-common { display: block; ; color: #16315c !important; border: 1px solid #16315c; max-width: 170px; margin: 0 auto; text-align: center; padding:10px 0; font-size: 16px; line-height: 1.7; }
.btn-common:hover { background-color: #b91c2d; color: #fff !important; border: 1px solid #b91c2d;}

.idx-about-title { display: flex; flex-direction: row; flex-wrap: wrap; padding-top: calc(20px + 5%); padding-bottom: calc(20px + 3%); padding-left: 5%; width: 50%;}
.idx-about-title h1 {line-height: 1.2; font-weight: 700; font-size: clamp(28px, 3vw, 40px); color: #b91c2d;}
.idx-about-title span { font-weight: 400; font-size: clamp(19px, 1.4vw, 24px); line-height: 1.3; display: block; padding-top: 7px; color: #111;}
.idx-about-section { padding: 0 0 0 0; display: flex; flex-direction: row; flex-wrap: wrap; position: relative; z-index: 3;}
.idx-about-section > div { width: 50%; position: relative;}
.idx-about-section > div:nth-of-type(2) { padding: 0 5% calc(20px + 3%) 5%;font-size: clamp(17px, 1.2vw, 22px); line-height: 1.7;transform: translateY(-120px);}
.idx-about-pto { clip-path: polygon(0 0, 66% 0, 97% 100%, 0% 100%); position: absolute; bottom: 30px; left: 0;}
.idx-about-pto:before { content: "";position: absolute;width: 9vw;height: 50%;background: linear-gradient(137deg, #b91c2d 60%, #dd5028);clip-path: polygon(0% 0%, 0% 100%, 100% 100%);bottom: 0;}


@media only screen and (max-width: 1400px) {
	.banner-title-2 { top: 25%; }
}
@media only screen and (max-width: 1100px) {
	.banner-title-2 { top: 30%; }
	
	.idx-about-section > div { width: 100%;}
	.idx-about-title { padding-top: calc(20px + 3%); padding-bottom:20px; padding-right: 5%; width: 100%;}
	.idx-about-section > div { width: 100%;}
	.idx-about-section > div:nth-of-type(1) { order: 2;}
	.idx-about-section > div:nth-of-type(2) { order: 1; transform: none;}
	.idx-about-pto { position: relative; bottom: auto; left: auto;}
	
	.vantage-bg { margin-top: 0; padding-top: 0;}
	.idx-section-vantage { padding: calc(20px + 5%) 20px; }
	.idx-about-pto { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
	.idx-about-pto::before { width: 20%; height: 35%;}
}
@media only screen and (max-width: 1070px) {
	.banner {padding: 71px 0 0 0;}
}
@media only screen and (max-width: 800px) {
	.banner-title-1 { font-size: 50px; }
	.banner-title-2 { top: 35%; font-size: 30px; }
}
@media only screen and (max-width: 1279px) {
	.loop .owl-prev, .loop .owl-next { transform: scale(0.9);}
}
@media only screen and (max-width: 980px) {
	.idx-about-text { width: 100%; }
	.idx-about-pic { width: 100%; padding-top: 20px; }
}
@media only screen and (max-width: 768px) {
	.vantage-list { border-right: none; border-bottom: 1px solid #dedede; margin-top: 20px; padding-bottom: 20px; }
	.news-list { display: block; }
	.news-list-pic { /*padding-bottom: 50%;*/ width: 100%; padding: 0 15px;}
	.news-info { width: 100%; padding: 15px; }
    .news-info-title {margin-top: 5px;}
}
@media only screen and (max-width: 576px) {
	.banner-pc { display: none; }
	.banner-mobile { display: block; }
	.banner-title-1 { display: none; }
	.banner-title-2 { display: none; }	
}