@charset "utf-8";
/* CSS Document */
#banner{width:100%;overflow:hidden;margin-top: 20px}
#banner .bannerCon{margin:0px auto;position:relative;}
#banner .bannerCon .before{background:rgba(0,0,0,0.7);position:absolute;z-index:1;border-radius: 5px;}
#banner .bannerCon .before img{position:absolute;right:40px;cursor:pointer;}
#banner .bannerCon .after{background:rgba(0,0,0,0.7);position:absolute;z-index:1;border-radius: 5px;}
#banner .bannerCon .after img{position:absolute;left:40px;cursor:pointer;}
#banner .bannerCon .scroll{position:relative;}
#banner .bannerCon .scroll .item{float:left;text-align: center;}
#banner .bannerCon .scroll .item .img-box{margin: auto;}
#banner .bannerCon .scroll .item .img-box img{display: inline-block; width: 100%;height: 100%;border-radius: 5px;}
@media (max-width: 767px) {
  #banner{display: none}
}
#choose{ padding: 2.6% 0 2%; text-align: center;overflow: hidden; }
#choose .title2{color: #333333;  font-size: 26px; margin: 30px 0 15px; font-weight: 400; }
#choose p{ color: #535353;line-height: 22px}
#choose a{display: inline-block;padding: 6px 12px;border:1px solid #ddd;border-radius: 5px;color: #333;margin-top: 15px}
#choose a:hover{background-color: #42a466;color: #fff}
.c-img{max-width: 30%}

 #line {
     padding: 3.6% 0 3%;background-color: #f9f9f9
 }
 #line .wtitle {
     text-align: center;
     padding-bottom: 3.33%
 }
 #line .wtitle .typename {
     font-size: 30px;
     font-weight: bold;
     color: #333
 }
 #line a.lineimg {
     overflow: hidden;
     display: block;
     max-width: 620px;
     border: 1px solid #d3d3d3;
     position: relative;
 }
 #line img {
     transition: all 0.3s ease;
     z-index: 1;
 }
 #line a:hover.lineimg img {
     transform: scale(1.2);
 }
 #line a.lineimg .readmore {
     position: absolute;
     z-index: 2;
     right: 0;
     bottom: 0;
     background: #4f4e4e;
     color: #fff;
     padding: 5px 48px 3px 20px;
     text-transform: uppercase;
     font-size: 12px;
     font-weight: 400;
 }
 #line a.lineimg .readmore::before {
     background: #646464;
     position: absolute;
     width: 30px;
     content: "\f054";
     font-family: FontAwesome;
     text-align: center;
     right: 0;
     padding-top: 4px;
     padding-bottom: 4px;
     top: 0;
 }
 #line a:hover.lineimg .readmore {
     background: #42a466;
 }
 #line a:hover.lineimg .readmore::before {
     background: #5fc275;
 }
 #line .title {
     color: #323232;
     font-size: 18px;
     text-transform: uppercase;
     font-weight: 400;
     display: block;
     margin-top: 40px;
     margin-bottom: 12px;
 }
 #line .title::before {
     width: 40px;
     height: 3px;
     background: #42a466;
     content: "";
     position: absolute;
     margin-top: -10px;
 }
 #line .title h3 {
     font-size: 18px;
     margin: 0;
     padding: 0;
 }
 #line a:hover.title {
     color: #42a466;
     text-decoration: none;
 }
 #line h2 {
     color: #959595;
     line-height: 20px;
     font-size: 14px;
 }
#iproduct_4{ padding: 3.42% 0 2.5%; text-align: center;}
#iproduct_4 .typename{ font-size: 30px; text-transform: uppercase; text-align: center; font-weight: bold; color:#333; position: relative; margin-bottom: 20px; }
#iproduct_4 .typename::after{ position: absolute; content: "" ; width: 40px; height: 3px; background: #42a466; left: 50%; margin-left: -20px; bottom: -17px;  }
#iproduct_4 .flagimg{ display: block;  overflow: hidden;position: relative;}
#iproduct_4 .flagimg::before{ z-index: 2; transform: scale(0); width: 100%; height:100%; left: 0; top: 0; position: absolute; content: "";  background: rgba(0,0,0,.5);transition:all 0.3s ease;opacity:0;}
#iproduct_4 .flagimg::after{z-index: 3;transform: scale(0);content:"\f0c1"; font-family: FontAwesome; color: #fff; font-size: 32px; top: 50%; left: 50%; position: absolute; margin-left: -10px; margin-top: -10px; transition:all 0.3s ease;opacity: 0;}
#iproduct_4 a:hover .flagimg::before{ transform: scale(1);opacity: 1; }
#iproduct_4 a:hover .flagimg::after{transform: scale(1);opacity: 1;}
#iproduct_4 .flagimg img{transition:all 0.3s ease; z-index: 1;}
#iproduct_4 a:hover .flagimg img{ transform: scale(1.2); }
#iproduct_4 .flag-text{ color:#fff; padding: 5%; display: block; text-decoration: none;     border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    text-decoration: none;font-size: 16px;
    background: #42a466;text-transform: capitalize;}
#iproduct_4 a:hover{text-decoration: none; }
#iproduct_4 .col-md-3{ margin-top: 20px; margin-bottom: 20px; }

#iproduct_5{ padding: 3.42% 0 2.5%; text-align: center;background-color: #efefef}
#iproduct_5 .typename{ font-size: 30px; text-transform: uppercase; text-align: center; font-weight: bold; color:#333; position: relative; margin-bottom: 30px; }
#iproduct_5 .typename::after{ position: absolute; content: "" ; width: 40px; height: 3px; background: #42a466; left: 50%; margin-left: -20px; bottom: -17px;  }
#iproduct_5 .flagimg{ display: block;  overflow: hidden;position: relative;}
#iproduct_5 .flagimg::before{ z-index: 2; transform: scale(0); width: 100%; height:100%; left: 0; top: 0; position: absolute; content: "";  background: rgba(0,0,0,.5);transition:all 0.3s ease;opacity:0;}
#iproduct_5 .flagimg::after{z-index: 3;transform: scale(0);content:"\f0c1"; font-family: FontAwesome; color: #fff; font-size: 32px; top: 50%; left: 50%; position: absolute; margin-left: -10px; margin-top: -10px; transition:all 0.3s ease;opacity: 0;}
#iproduct_5 a:hover .flagimg::before{ transform: scale(1);opacity: 1; }
#iproduct_5 a:hover .flagimg::after{transform: scale(1);opacity: 1;}
#iproduct_5 .flagimg img{transition:all 0.3s ease; z-index: 1;}
#iproduct_5 a:hover .flagimg img{ transform: scale(1.2); }
#iproduct_5 .flag-text{ color:#fff; padding: 5%; display: block;     border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    background: #42a466;text-transform: capitalize;}
#iproduct_5 a:hover{text-decoration: none; }
#iproduct_5 .col-md-3{ margin-top: 20px; margin-bottom: 20px; }
#wedo{ padding: 3.42% 0 2.5%; text-align: center;}
#wedo .typename{ font-size: 26px; text-transform: uppercase; text-align: center; font-weight: bold; color:#333; position: relative; margin-bottom: 20px; }
#wedo .typename::after{ position: absolute; content: "" ; width: 40px; height: 3px; background: #42a466; left: 50%; margin-left: -20px; bottom: -17px;  }
#wedo .flagimg{ display: block;  overflow: hidden;position: relative;}
#wedo .flagimg::before{ z-index: 2; transform: scale(0); width: 100%; height:100%; left: 0; top: 0; position: absolute; content: "";  background: rgba(0,0,0,.5);transition:all 0.3s ease;opacity:0;}
#wedo .flagimg::after{z-index: 3;transform: scale(0);content:"\f0c1"; font-family: FontAwesome; color: #fff; font-size: 32px; top: 50%; left: 50%; position: absolute; margin-left: -10px; margin-top: -10px; transition:all 0.3s ease;opacity: 0;}
#wedo a:hover .flagimg::before{ transform: scale(1);opacity: 1; }
#wedo a:hover .flagimg::after{transform: scale(1);opacity: 1;}
#wedo .flagimg img{transition:all 0.3s ease; z-index: 1;}
#wedo a:hover .flagimg img{ transform: scale(1.2); }
#wedo .flag-text{ color:#fff; padding: 5%; display: block;     border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    text-decoration: none;
    font-size: 18px;
    background: #42a466; text-transform: capitalize;}
#wedo a:hover{text-decoration: none; }
#wedo .col-md-3{ margin-top: 20px; margin-bottom: 20px; }
#aboutfaq{ padding: 4% 0 3%; position: relative;background-image:url(../images/ipro_bg.jpg);background-repeat: no-repeat;background-size: cover;background-position:center center; }
  #aboutfaq .aboutus{ width: 100%;      background-color:#42a466;
    opacity: 0.95;
    z-index: 1;position: absolute; left:0; right: 0; top: 0; bottom: 0;}
#aboutfaq .container{position: relative;z-index: 2}
#aboutfaq .typename{ font-size: 24px; color: #fff; text-transform: uppercase; font-weight: 400; margin-bottom: 30px;}
#aboutfaq .typename::before{width: 40px; height: 3px; background: #fff; content: ""; position: absolute; margin-top: -15px;}
#aboutfaq .typename a{color: #323232; text-decoration: none;}
#aboutfaq p{ font-size: 16px; color: #fff; }
#aboutfaq .more{ display: block; width: 136px; height: 42px; border: 1px solid #e4e4e4; line-height: 42px; text-align: center; color: #fff; font-weight: normal; border-radius: 5px; margin-top: 40px; }
#aboutfaq a:hover.more{ background: #333; border:1px solid #333;color: #fff; text-decoration: none; }
#aboutfaq .panel{border:none;}
#aboutfaq .panel-heading{ padding: 0; margin-bottom: 2px; line-height:18px; }
#aboutfaq .panel-heading a{ position: relative; background: #333;  font-size: 16px; border-radius: 3px; display: block; padding: 20px 15px 20px 60px; color: #fff; text-decoration: none; outline: none; font-weight: 400;}
#aboutfaq .panel-heading a.collapsed{background: #333; color: #fff;}
#aboutfaq .panel-heading a:hover{background: #6bc18a; color: #fff;}
#aboutfaq .panel-body{ border: none; color: #3a3a3a; padding: 7px 15px; font-size: 15px; }
#aboutfaq .panel-heading a.collapsed::after,#aboutfaq .panel-heading a::after{ position:absolute; top: 50%; margin-top: -9px; left: 15px; width: 18px; height: 18px;content:"\f067"; line-height: 20px; background: #54c67e; border-radius: 9px; color: #444444; font-size: 10px; display:inline-block; font-family:FontAwesome; text-align:center;  color:#fff;}

#aboutfaq .panel-heading a::after{content:"\f068";background: #fff; color:#54c67e; }
#aboutfaq .panel-heading a:hover::after{ background: #fff; color:#54c67e;  }
#aboutfaq .panel-heading a::before{ width: 1px; height: 17px; background: #48be74; position: absolute; content: ""; top: 50%; margin-top: -8px; margin-left: -15px;}
#aboutfaq .panel-heading a.collapsed::before{background: #696767;}
#aboutfaq .panel-heading a:hover:before{background: #48be74;}

 #touch{ background: #fff ; padding: 7.6rem 0 3.6rem; color: #fff;}
#touch .typename{ font-size: 26px; color: #333; text-transform: uppercase; font-weight: bold; margin-bottom: 30px;}
#touch .typename::before{width: 40px; height: 3px; background: #42a466; content: ""; position: absolute; margin-top: -15px;}
#touch .typename a{color: #fff}
#touch .newslist{ padding: 15px 0; line-height: 18px; }
#touch .newslist .time{ width: 64px; height: 73px; background: #42a466; color: #fff; float: left; margin-right: 15px; font-weight: 400; text-align: center; padding: 18px 5px 0 5px; border-radius: 7px;}
#touch .newslist .time span{font-size: 30px;}
#touch .newslist a{color: #333; font-size: 16px;font-weight: 600;display: block;margin-top: 5PX;}
#touch .newslist p{ color: rgba(0,0,0,.7); font-size: 12px; line-height: 20px; margin-top: 10px; }
#touch .form-group{ margin-bottom: 15px; }
#touch input.form-control{ height: 54px; }
#touch .mailbody{ max-width: 652px; margin: 0 auto; }
#touch .mailbody .send{ cursor: pointer;transition:all 0.3s ease;background-color: #42a466;  width: 168px;  height: 44px;margin: 0 auto; display: block; text-align: center; border-radius: 5px; line-height: 44px; color: #fff; font-weight: 400; border: none;  }
#touch .mailbody .send:hover{ background:#3d3d3d; color: #fff;  }
#touch p{margin: 5px 0 17px}
#touch .readmore{cursor: pointer;transition:all 0.3s ease;  width: 168px; margin:0 auto; height: 44px; display: block; text-align: center; border-radius: 5px; line-height: 44px; color: #3d3d3d; font-weight: 400; border: none; background: #ddd;text-decoration: none}
#touch .readmore:hover{ background:#3d3d3d; color: #fff;  }


@media (max-width: 767px) {
  .is-sticky #header .search{top: 11px}
  #iproduct_4,#iproduct_5,#wedo{padding: 8% 0}
  #iproduct_5 .flag-text,#iproduct_4 .flag-text,#wedo .flag-text{padding: 2% 0;}
  #aboutfaq{ padding-top: 60px; padding-bottom: 30px; }
  #aboutfaq .aboutleft{ margin-bottom: 60px; }
  #choose {padding: 5% 0}
  #aboutfaq .typename{text-align: center;}
  #aboutfaq .typename::before{display: none}
  #aboutfaq .more{margin: 40px auto}
  #touch{padding: 8% 0}

  #touch .col-sm-6{margin-bottom: 3%}
  #touch .typename{margin-bottom: 20px;text-align: center}
#choose .col-sm-4{margin-bottom: 30px;}
     .firstp {
         margin-bottom: 40px;
     }
     #line a.lineimg {
         margin: 0 auto;
     }
     
     #line {
         text-align: center;padding: 8% 0 3%;
     }
     #line .col-sm-6{
         margin-bottom: 3%
     }
     #line .title::before {
         left: 50%;
         margin-left: -20px;
     }
     #touch .readmore{margin-bottom: 10%}
 }