@charset "utf-8";
.main ul { padding: 0;}
.main ul li { list-style: none;}
.main h2, .main h3, .main h4, .main h5 { padding: 0; margin: 0; line-height: 1;}
.main p { margin: 0;}

.main {overflow:hidden;}
.main article { padding: 100px 10px; }    
.main article .wrap { padding: 0; margin:0 auto; max-width:1190px;}    
.main article .wrap h2 { padding: 0 0 70px; font-size: 40px; font-weight: bold; color: #000; line-height: 1; text-align: center;}    
.main article .wrap h2:after { content: ''; display: inline-block; position: relative; top: -20px; width: 22px; height: 22px; background: url('/page/images/tit_after.png') no-repeat ; background-size: contain;}



@media (max-width:1199px){
    .main article { padding: 90px 10px; }    
    .main article .wrap h2 {  padding: 0 0 60px; font-size: 38px;  }
} 

@media (max-width:991px){
    .main article { padding: 80px 10px; }    
    .main article .wrap h2 {  padding: 0 0 50px; font-size: 36px;  }
}

@media (max-width:768px){
    .main article { padding: 70px 10px; }    
    .main article .wrap h2 {  padding: 0 0 40px; font-size: 36px;  }
    .main article .wrap h2:after { top: -12px; ;width: 18px;}
}
@media (max-width:576px){
    .main article { padding: 60px 10px; }    
    .main article .wrap h2 {  padding: 0 0 30px; font-size: 34px;  }
}
@media (max-width:480px){
    .main article { padding: 50px 10px; }    
    .main article .wrap h2 {  padding: 0 0 25px; font-size: 32px;  }
    #banner .visual-txt img{max-width: 220px!important;}
}


.main .about ul { display: flex; justify-content: space-between;}
.main .about ul li {  width: 32% ;}
.main .about ul li .img_box { height: 200px; background-repeat: no-repeat; background-size: auto 100%; background-position:center center; transition:all .4s;}
.main .about ul li:first-of-type .img_box  { background-image:url('/data/main/about_com.png');}
.main .about ul li:nth-of-type(2) .img_box  { background-image:url('/data/main/about_prod.png');}
.main .about ul li:last-of-type .img_box  { background-image:url('/data/main/about_recu.jpg');}
.main .about ul li a .txt_area { height: 200px; border: 1px solid #d7d7d7;}
.main .about ul li a .txt_area h3 { padding: 30px 0 25px; margin: 0; font-size: 22px; color: #000; text-align: center;}
.main .about ul li a .txt_area .hover_area { overflow: hidden; position: relative; height: 122px;}
.main .about ul li a .txt_area .hover_area .hover_area1{ position: absolute; left: 0; width: 100%; text-align: center; transition:all .5s}
.main .about ul li a .txt_area .hover_area .hover_area2{ position: absolute; left: 105%;  padding: 0 10px; width: 100%; height: 122px;; border-bottom: 5px solid #1869c3;  transition:all .5s}
.main .about ul li a .txt_area .hover_area .hover_area2 p { font-size: 16px; color: #666; line-height: 1.3; text-align: center;}
.main .about ul li a .txt_area .hover_area .hover_area2 p span { display: block;}
.main .about ul li a .txt_area .hover_area .hover_area2 p.go { padding: 30px 0 0;}


@media (min-width:1200px){
    .main .about ul li .img_box { background-size: 110% auto;   }
    .main .about ul li a:hover .img_box { background-size: 110% auto; }    
}

@media (min-width:481px){    
    .main .about ul li a:hover .txt_area .hover_area .hover_area1 { left:-100%;}
    .main .about ul li a:hover .txt_area .hover_area .hover_area2 { left:0;}
}

@media (min-width:481px) and (max-width:1199px){
    .main .about ul li a:hover .img_box { background-size: auto 110% ; }
}


@media (max-width:768px){
     .main .about ul li a .txt_area .hover_area .hover_area2 p {  font-size: 15px; }
    .main .about ul li a .txt_area .hover_area .hover_area2 p span { display: inline; }    
}

@media (max-width:576px){
    .main .about ul { display:block;}    
    .main .about ul li .img_box { height: 200px;}
    .main .about ul li { position: relative; margin: 0 0 20px; width: calc(100% - 200px); ;  }    
    .main .about ul li a .txt_area { position: absolute; top:0; right: -200px; width:200px; height: 200px;}
    .main .about ul li a .txt_area .hover_area .hover_area2 p {  font-size: 14px; }   
    
}

@media (max-width:480px){        
    .main .about ul li { width: calc(100% - 150px); }    
    .main .about ul li .img_box { height: 180px;}
    .main .about ul li a .txt_area { right: -150px; width:150px; height: 180px;}
    .main .about ul li a .txt_area .hover_area { height: 102px;}
    .main .about ul li a .txt_area .hover_area1 img{ height: 60px;;}       
}


@media (max-width:400px){        
    .main .about ul li { margin: 0 0 10px; width: calc(100% - 120px);  }    
    .main .about ul li .img_box { height: 160px;}
    .main .about ul li a .txt_area { right: -120px; width:120px; height: 160px;}
    .main .about ul li a .txt_area .hover_area { height: 102px;}
    .main .about ul li a .txt_area .hover_area1 img{ height: 60px;;}   
    .main .about ul li a .txt_area h3 {  padding: 32px 0 20px; font-size: 20px; }
    
}









.main .product { background: #f2f5f7;}
.main .product .item { display: flex; justify-content: space-between;}
.main .product .item > a { display: block; flex:1; position: relative; height: 360px; background-repeat:no-repeat; background-size:cover; background-position: center; transition:all .3s; box-shadow: 5px 5px 5px rgb(0 0 0 / 35%);}
.main .product .item > a.item1 { background-image: url('/data/main/prod_1.jpg')}
.main .product .item > a.item2 { background-image: url('/data/main/prod_2.jpg')}
.main .product .item > a h3 { overflow:hidden; position: absolute; left: 5%; bottom: 30px; padding: 30px 20px 0; width: 350px; height: 130px;;/* background: linear-gradient(to right,#1d83cc,#45bfbb ); */color: #fff; font-size: 30px; font-weight: 500; transition:all .3s;}
.main .product .item > a h3 span { display: block; padding: 20px 0 0;font-size: 18px; font-weight: 400;}
.main .product .item > a h3 span:after { content: ''; display: block; position: relative; float:right; z-index:2; width: 15px; height: 17px; background: url('/data/main/ico_plus.png') no-repeat;}
.main .product .item > a h3 i { position: relative; font-style:normal; z-index:2}
.main .product .item > a h3:after { content:''; display: block; position: absolute; top: 0; left: 0; width:200%; height:100%; background: linear-gradient(to left,#1d83cc,#45bfbb,#1d83cc ); transition:all .3s; }
.main .product .item > a:hover { flex:1.2;}
.main .product .item > a:hover h3:after { left: -50%;}
.main .product .item > a:first-of-type { margin: 0 4% 0 0;}



@media(min-height:992px){
    .main .product .item > a:hover { flex:1.2;}
    .main .product .item > a:hover h3:after { left: -50%;}
}


@media (max-width:991px){
    .main .product .item > a { height: 330px;}
    .main .product .item > a h3 { width: 300px; } 
}

@media (max-width:769px){
    .main .product .item > a { height: 300px;}
    .main .product .item > a h3 {padding: 25px 10px 0; width: 245px; height: 110px; font-size: 24px;} 
    .main .product .item > a h3 span { font-size: 16px;}
}
@media (max-width:576px){
    .main .product .item { display:block; }
    .main .product .item > a:first-of-type { margin: 0 0 20px 0;}
    .main .product .item > a h3 { width: 90%;}
}
@media (max-width:480px){
     .main .product .item > a { height: 280px;}
    .main .product .item > a h3 { height: 105px; }
    .main .product .item > a h3 span { padding: 15px 0 0 }
}
@media (max-width:400px){
     .main .product .item > a { height: 260px;}
    .main .product .item > a h3 { height: 105px; }
    .main .product .item > a h3 span { padding: 15px 0 0 }
}


.main article.contact .wrap h2 { color:#fff;}
.main .contact { background: url('/data/main/bg_contact.png') no-repeat  center top ; background-size: cover;}
.main .contact .box { display: flex;  justify-content: space-between;}

.main .contact .box .map1 { position: relative; width: 64%;}
.main .contact .box .map1 >  p { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: 50px; font-size: 14px; line-height: 50px; text-align: center; color: #fff; background: #20a4d3;}

.main .contact .box .info { width:33.33%;}
.main .contact .box .info .customer { padding: 24px 25px; margin: 0 0 10px; border: 1px solid #dcdcdc; background: #fff url('/data/main/ico_building.png') no-repeat right bottom   ;}
.main .contact .box .info .customer h3 { font-size: 23px; color: #282828; font-weight: 400; }
.main .contact .box .info .customer h3:after { content: ''; display: block; margin: 15px 0; width: 20px; height: 1px; background: #282828; }
.main .contact .box .info .customer dl {  display:flex; flex-wrap: wrap; padding: 0 0 5px; margin: 0;}
.main .contact .box .info .customer dl dt { width: 42px; height: 26px; margin: 0 0 8px; font-size: 15px; font-weight: 300; color: #fff; text-align: center; line-height: 26px; background: #20a4d3; border-radius: 6px;}
.main .contact .box .info .customer dl dd { padding: 0 10px; width:calc(100% - 42px);  height: 26px; font-size: 25px; color: #555; line-height: 26px; font-weight: 700; }
.main .contact .box .info .customer dl dt:last-of-type { background: #005c8f;}
.main .contact .box .info .customer p { font-size: 17px; color: #666; line-height: 1.23; font-weight: 300;}
.main .contact .box .info .customer p span { display: block; }


.main .contact .box .info .ico_box { display: flex; justify-content: space-between; }
.main .contact .box .info .ico_box > a { display: block; padding: 25px 10px; width: 48%; text-align: center; border: 1px solid #dcdcdc; background: #fff;}
.main .contact .box .info .ico_box > a p { padding: 10px 0 0; font-size: 17px; color: #666;}
.main .contact .box .info .ico_box img{height: 48px;}

@media (max-width:844px){
    .main .contact .box .map1 { width: 60%;}
    .main .contact .box .info { width: 37.33%; }
}


@media (max-width:768px){
    .main .contact .box { display: block;}
    .main .contact .box .map1 { margin: 0 0 10px;; width:100%;}
    .main .contact .box .info { width: 100%; }
}