.banner{ position:relative; }
.banner article{ color:#fff; max-width:1280px; position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); width:100%; }
.banner img{ display:block; }
.banner .big{ font:italic 5rem 'Ubuntu', sans-serif; font-style:italic; text-decoration:none; width:50%; margin:0; }
.banner .absolute{ position:absolute; width: 45vw; }

[class*=idx-box-] .center{ max-width:1414px; font-size:1.2rem; margin:0 auto; padding:0 20px; }
[class*=idx-box-] [class*=-title]{ color:#2b4346; text-align:center; font-size: 2.93333rem;}
[class*=idx-box-] p{ margin:0; display:inline-block; line-height: 1.8; }

h2{ font-size:2.93333rem; font-weight:initial; margin:0 0 35px; }

.products-title::after, .news-title::after{ margin: 21px 0 60px 0;content:''; width:100%; height:3px; background:linear-gradient(to right, rgba(107,107,107,0) 0%,rgba(107,107,107,0.52) 24%,rgba(107,107,107,1) 51%,rgba(107,107,107,0.5) 76%,rgba(107,107,107,0) 100%); display:block; }

.idx-box-1{ background:url('../images/about-bg.png') no-repeat 0 0 /cover; }
.idx-box-1 h1{ font-size:2.93333rem; font-weight:initial; margin:0; line-height:1; margin:0 0 35px; }
.idx-box-1 .center{ display:flex; align-items:center; justify-content:space-between; min-height:517px; max-width:1330px; margin:0 auto; padding-top: 5%; }
.idx-box-1 .about-box{ display:flex; max-width:860px; margin-top: 7%;}
.idx-box-1 .about-box .img{ width:179px; }
.idx-box-1 .text{ width:calc(100% - 179px); margin-left:45px; padding-left:45px; border-left:1px solid #000; }
.idx-box-1 .more-link{ background:#fff; color:#000; display:block; padding:2px 20px; }
.idx-box-1 .more-link:hover{ background:#29166f; color:#fff; }
.idx-box-1 .text img{ display:block; padding:20px 15px; }
.idx-box-1 .btn{ display:flex; align-items:center; justify-content:space-between; }

.idx-box-2{ background:url('../images/professional-bg.png') no-repeat; min-height:316px; margin-bottom:60px; }
.idx-box-2 .center{ min-height:316px; display:flex; justify-content:flex-end; align-items:center; }
.idx-box-2 h2{ color:#a8d6ff; font-family:'Times New Roman'; font-size:7rem; margin-bottom:0; }
.idx-box-2 article{ color:#fff; font-size:3rem; }

.idx-box-3{ margin-bottom:60px; }
.idx-box-3 .products-article{ position:relative; width:calc( 100% - 140px ); margin:0 auto;}
.idx-box-3 .owl-nav div{ position:absolute; top:calc(50% - 33px); transform:translateY(-50%); }
.idx-box-3 .owl-nav :before{ font:normal normal normal 5rem FontAwesome; color:#e0e0e0; transition:color .28s ease-in-out; }
.idx-box-3 .owl-nav :hover::before{ color:#818181; }
.idx-box-3 .owl-nav .owl-prev { left:-70px; }
.idx-box-3 .owl-nav .owl-next { right:-70px; }
.idx-box-3 .owl-nav .owl-prev::before { content:'\f104'; }
.idx-box-3 .owl-nav .owl-next::before { content:'\f105'; }
.idx-box-3 .text { text-align:center; margin:20px 0 0; font-size:1.4rem; }
.products-article span{ display: block; }
.products-article .name{ text-align: center; margin-top: 10px; }

.idx-box-4{ margin-bottom:60px; }
.idx-box-4 .news-article ul, .idx-box-4 .news-article li{ list-style-type:none; margin:0; padding:0; }
.idx-box-4 .news-article ul{ column-count:2; -webkit-column-count:2; width:100%; margin:0 auto; }
.idx-box-4 .news-article li{ position:relative; margin-bottom:10px; break-inside: avoid-column; }
.news-article li a{ display:flex; line-height:1.4; transition:.38s ease; }
.news-article li a:hover{ color:#fff; background:#29166f; }
.news-article li a .date{ white-space:nowrap; letter-spacing:1px; font-style:italic; color: #868686; }
.news-article li a .date::after{ content:''; width:1px; height:70%; display:block; background:#000; margin:0 14px; background:#e6e6e6; }
.news-article li a:hover .date{ color:#fff; font-style:initial;}


@media only screen and (max-width: 1500px){
html, body { font-size: 13.5px; }
.banner article {width: calc(92% - 20%);}
.banner .absolute {width: 59%;}
.idx-box-1 .center{min-height: 408px;padding: 0 173px;}
[class*="idx-box-"] p{width: 548px;}
.idx-box-1 .text img{width: 15vw;padding: 5px 15px;}
.about-img img{width: 17vw;}
.idx-box-2 .center{min-height: 245px; padding: 0 180px 0 0;}
.idx-box-2{min-height: 245px; background: url('../images/professional-bg.png') no-repeat 45% 0%;}
.idx-box-2 h2{font-size: 5.4rem;}
.idx-box-2 article{font-size: 2.3rem;}
/* .idx-box-3 .products-article {width: calc( 100% - 140px );} */
section.idx-box-1 .center{padding-top: 7%;}
[class*="idx-box-"] .center {padding: 0 12%;}


}


@media only screen and (min-width: 1100px){
    .news-article li{ overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; display:block; width:auto; }
    .news-article li:before{ content:''; -webkit-transform:rotate3d(0, 0, 1, 123deg) translate3d(0, 43px, 0); transform:rotate3d(0, 0, 1, 123deg) translate3d(0, 43px, 0); background:#29166f; display:block; position:absolute; height:53px; width:50px; z-index:-1; transition:.18s linear; opacity:0; }
    .news-article li:hover:before{ transform:rotate3d(0, 0, 1, 0deg); width:100%; height:100%; opacity:1; }
    .news-article li a{ padding:5px 8px; box-sizing:border-box; }
    .news-article li a:hover{ padding:5px 2px 5px 14px; }
    .news-article li a .date{ display:flex; align-items:center;  }
}

@media only screen and (max-width: 1414px){
    .banner .absolute{ width:60%; }
    .banner article{ width:calc(74% - 40px); top: 31%;}
}


@media only screen and (max-width: 1024px) {
    [class*="idx-box-"] .center{padding: 0 7%;}
    .banner .big{ font:italic 3.5rem 'Ubuntu', sans-serif;  padding-top: 20px;}
    .products-title::after, .news-title::after{margin: 21px 0 25px 0;}

}



@media only screen and (max-width: 999px){
    .banner { height:50vw; }
    .banner .big{ font-size:3rem; width:100%; line-height:1; margin-top:6%; }
    .banner img{ object-fit:cover; height:100%; }
    .banner article{ text-align:center; left:0; transform:translateY(-50%); top:50%; }
    .banner .absolute{ position:static; width:150px; display:inline;}
    [class*="idx-box-"]{ display:block; padding:20px 10px; }
    [class*=idx-box-] [class*=-title]{ margin-bottom:20px }
    [class*=idx-box-] .center{ padding:0 10px; }
    .idx-box-1 .about-box, .idx-box-1 .center{ display:block; text-align:center; }
    .idx-box-1 .text{ width:100%; margin:0; padding:0; border-left:0 none; }
    .idx-box-1 .about-box .img{ margin:0 auto; width: 28vw; }
    .idx-box-1 .btn{ flex-direction:column; }
    .idx-box-1 .more-link{ order:2; margin:20px 0; }
    .idx-box-2{ min-height:150px; }
    .idx-box-2 .center{ justify-content:center; min-height:auto; }
    .idx-box-2 h2{ font-size:3rem; }
    .idx-box-2 article{ font-size:1rem; text-align:center; }
    .idx-box-2{ margin-bottom:0; display:flex; }
    .idx-box-4 .news-article ul{ column-count:1; width:auto; }
    .idx-box-4 .news-article li { margin-bottom:8px; }
    .idx-box-3,.idx-box-4{padding: 0;}
    h2.products-title{padding: 25px 0 0 0;}
    .news-article li a{ display:block; background:#fff; border:1px solid #b9b9b9; padding:10px 5px; box-shadow:0 0 8px 0 rgba(0,0,0,.2); border-radius:5px; }
    .news-article li a:hover{ background:#29166f; }
    .news-article li a .date{ padding:0; margin:0; font-weight:bold; font-size:1.4rem; }
    .news-article li a .date , .news-article li a .text{ color:#000; text-align:center; }
    .news-article li a:hover .date , .news-article li a:hover .text{ color:#fff; background:transparent; }
    .banner h1{ font-size:1.8rem; }

}



@media only screen and (max-width: 768px){
.banner article{left:50%; transform:translate(-50%,-50%); width:100%;}
.banner article h1{font-size: 3rem;}
.banner article p{font-size: 1.8rem;}
.banner .absolute{width:65vw;}
.btn{margin: 0 0 30px 0;}
.idx-box-2 h2{font-size: 4rem;}
.idx-box-2 article {font-size: 1.5rem;}
[class*="idx-box-"] p {padding: 0 5px 20px 5px; line-height:150%;width: initial;}
.idx-box-1 .text img{width: 55vw;}
.about-img img{width: 40vw;}

}

@media only screen and (max-width: 580px){
    .about-img{display: none;}
    .idx-box-3 {margin-bottom: 0px;}
    .banner article h1{ font-size:2.2rem; }
    .banner article p{font-size: .8rem; margin: 5px 0 5px 0;}

}

@media only screen and (max-width: 380px){
    .idx-box-3 .text {margin: 10px 0 0;font-size: 1.4rem;}
    .banner article h1 {font-size: 2rem;}
    .banner article p {font-size: .9rem;padding: 0;margin: 5px 0 5px 0;}
}