/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Lato', sans-serif; overflow-x: hidden; background:url(../images/demo-bg.jpg) no-repeat top center #013b75; }
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; 
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; }

* { margin:0; padding:0; list-style:none;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}

.content-Box { max-width:1300px; margin:0 auto; text-align:left; position:relative; clear:both;}
.content-Box p a {color: #ffff00; font-weight: 600; border-bottom: 1px solid;}
.content-Box a:hover{color: #FC5102;}
#content { font-size: 16px; line-height:28px; color: #fff; padding-top: 0px; letter-spacing: 0.05rem;}
#content p{ /*padding-bottom: 10px;*/}

.main-box { padding: 175px 20px 0 20px;}

#path { padding-bottom: 26px; text-align: center;}
#path li { display: inline-block; vertical-align: top; font-size: 14px;}
#path li:after { content:">"; display: inline-block; vertical-align: top; padding: 0 0 0 4px;}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #fff;}
#path li a:hover { opacity: 0.6;}


.title01 { position: relative; margin-bottom: 25px; display: inline-block;} 
.title01:after {content: ""; position: absolute; bottom: -5px; width: 100%; left: 0; height: 10px; background: linear-gradient(90deg, #fc1b02 0%, #fc9902 100%);} 
.title01 h1, .title01 span { position: relative; z-index: 3;font-size: 26px; font-weight: bold; display: block;} 
.title02 { width: 100%; /*background: url(../images/line01.png) no-repeat center bottom; padding-bottom: 23px;*/ font-size: 20px; font-weight: 700; text-align: center; margin: 23px 0;}

.btn01 { display: block; width: 176px; line-height: 46px; border: 1px solid #fff; text-align: center; font-size: 15px; color: #fff;}

.align-center { text-align: center;}

/*products*/
.pro-list { display: flex; flex-direction: row; flex-wrap: wrap; padding-top: 48px;}
.pro-list > a { width: calc(25% - 48px); margin: 0 24px 80px 24px; background: rgba(0,24,47,.25); transition: all 0.4s ease-out 0s;}
.pro-list > a:hover { background: rgba(232,51,12,1); }
.pro-list > a:hover img { transform: scale(1.05);}
.pro-list-pto { position: relative; top:-48px; margin-bottom: -52px; left: -18px; line-height: 0; overflow: hidden;}
.pro-list-pto img { width: 100%;transition: all 0.4s ease-out 0s;}
.pro-list-name { color: #fff; font-size: 15px; padding: 12px 20px; text-align: right; font-weight: bold; line-height: 130%;}


/*products-list*/
.pro-list2 { display: flex; flex-direction: row; flex-wrap: wrap; margin-right: -13px; margin-bottom: 35px;}
.pro-list2 > div { margin: 0 13px 30px 0; width: calc(16.66% - 13px);}
.pro-list3 > div { width: calc(25% - 13px);}
.pro-list2 > div:hover img { transform: scale(1.05);}
.pro-list2 > div:hover .pro-list2-pto:after { left: 0;}
.pro-list2-pto { line-height: 0;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); position: relative; margin-bottom: 15px; overflow: hidden;background: rgba(255, 255, 255, .9);}
.pro-list2-pto img { width: 100%; transition: all 0.6s ease-out 0s;}
.pro-list2-pto:after { content: ""; position: absolute; z-index: 2; bottom: 0; width: 100%; left: -100%; height: 5px; background: #fc2802; transition: all 0.4s ease-out 0s;}
.pro-list2-name { position: relative; padding-left: 34px; font-size: 15px; color: #fff; line-height: 120%;}
.pro-list2-name:before { position: absolute; content: ""; left: 0; top: 7px; width: 20px; height: 4px; background: linear-gradient(90deg, #fc1b02 0%, #fc9902 100%);}
.pro-list2-name a {color: #fff;font-size: 15px;font-weight: bold;line-height: 130%;transition: all .3s;display: block;}
.pro-list2-name a:hover {color: #fc9902;}
.pro-list2-name2 a{ display: block}
.pro-list2-name2 b { font-size: 18px; color: #fce202;}
.pro-list2-name2 a:nth-child(2){ color:#fff;padding: 0 ; font-size: 15px; max-height: 80px; overflow: hidden; line-height: 170%;}

/*products-detail*/
.p-detail-box { max-width: 944px; margin: 0 auto; text-align: left;}
.p-detail-top { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 150px;border-bottom: 1px solid #fff; }
.p-detail-top > div:nth-of-type(1) { width: calc(80% - 350px); padding-top: 40px; position: relative; padding-bottom: 100px;display: flex; flex-direction: column; align-items: center;}
.p-detail-top > div:nth-of-type(2) { width: 350px; margin: 0 10%;background: rgba(255, 255, 255, .9);}

.social-tool {}
.btn-box { display: flex;flex-wrap: wrap;justify-content: center;margin-top: 5%;}
.btn-box a { display: inline-block; width: 60px; height: 60px; box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1); border-radius: 100%; line-height: 60px; text-align: center; color: #fff; font-size: 30px;}
.btn-box_01{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 10px;}

.loop .owl-dots { }
.loop .owl-item {position: relative; }
.loop .owl-item > div {display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center;}
.loop .owl-nav { position: absolute; top:calc(50% - 50px); width: 100%; z-index: 11;}
.loop .owl-prev, .loop .owl-next { position:absolute; z-index:100; top:calc(50% - 40px); background:none !important;}
.loop .owl-prev { left:0px; }
.loop .owl-next { right:0px;}
.loop .owl-prev:before, .loop .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 0.3;transition: all 0.4s ease-out 0s;width: 107px; height: 107px; background-size: contain; display: block;}
.loop .owl-prev:before { background-image:url(../images/left-arrow.png); content: ""; }
.loop .owl-next:before { background-image:url(../images/right-arrow.png); content: ""; }
.loop .owl-prev:hover:before, .loop .owl-next:hover:before { opacity: 1;}
.loop .owl-stage-outer {z-index: 2;}
.loop .owl-dots { position: absolute; z-index: 100; bottom: -60px; width: 100%; text-align: center !important; padding: 0 50px; }
.loop .owl-dots .owl-dot span, .loop  .owl-dots .owl-dot span { background: #fff !important; width: 14px !important; height: 14px !important; border-radius: 7px; opacity: 0.4}
.loop .owl-dots .owl-dot.active span { background: #fff !important; width: 30px !important; opacity: 1; }
.loop  .owl-dots .owl-dot:hover span { background: #fff !important; opacity: 1; }

.align-right { text-align: right;}
.btn-back { display: inline-block; position: relative; padding: 0 5px 10px 50px; border-bottom: 1px solid #fff; font-size: 16px; color: #fff; margin-bottom: 40px; line-height: 100%;}
.btn-back:hover { padding-left:70px;}
.btn-back:before { content: ""; position: absolute; height: 20px; width: 1px; background: #fff; bottom: 0; left: 0; transform-origin: 0% 100%; transform: rotate(45deg);}

.btn-box2 { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; border-top:1px solid #fff; padding-top: 30px;}
.btn-tool a { display: inline-block; width: 90px; line-height: 32px; margin-right: 10px; border: 1px solid #fff; text-align: center; font-size: 14px; color: #fff; }


/*about*/
.about-section-1 { height: 909px; margin-top: -129px; padding: 0 20px; position: relative; padding-top: 175px; margin-left: -20px; width: calc(100% + 40px); } 
.about-content { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding-top: 70px;} 
.about-content > div:nth-of-type(1) {width: 64%;} 
.about-content > div:nth-of-type(1) a { color: #fce202; text-decoration: underline;} 
.about-content > div:nth-of-type(2) {width: 36%; text-align: center; padding: 0 40px;} 
.parallax__container{clip:rect(0,auto,auto,0);height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%;z-index:-100}
.about-section-1 .parallax{background-position:center !important;background-repeat:no-repeat;background-size:cover !important;position:fixed;top:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:100%}

.about-section-2 { margin-left: -20px; width: calc(100% + 40px); padding: 40px 20px; min-height: 614px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; background: url(../images/about-bg-2.jpg) no-repeat top center; background-size: cover;}

.about-section-3 { margin-left: -20px; width: calc(100% + 40px); padding: 80px 20px 20px 20px; background: linear-gradient(0deg, #136bc4 0%, #083e73 100%);}
.about-data { display: flex; flex-direction: column; flex-wrap: nowrap;}
.about-data > div { margin-bottom: 54px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;color: #333;}
.about-data > div > div:nth-of-type(1) {width: 400px;height: 202px;}
.about-data > div:nth-child(1) > div:nth-of-type(1):after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 0 100px 40px;
  border-color: transparent transparent transparent white;
  position: absolute;

  }
.about-data > div:nth-child(3) > div:nth-of-type(1):after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 0 100px 40px;
    border-color: transparent transparent transparent white;
    position: absolute;}
.about-data > div:nth-child(2) > div:nth-of-type(1):before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 40px 100px 0;
  border-color: transparent white transparent transparent;
  margin-left: -40px;}

  .about-data > div:nth-child(1) { border-right: 2px solid white;background: linear-gradient(135deg, #6c6f71 34%, #a2a2a2 100%);}
  .about-data > div:nth-child(2) { border-left: 2px solid white;background: linear-gradient(135deg, #6c6f71 34%, #a2a2a2 100%);}
  .about-data > div:nth-child(3) { border-right: 2px solid white;background: linear-gradient(135deg, #6c6f71 34%, #a2a2a2 100%);}



.about-data > div > div:nth-of-type(1) > img {border: 2px solid white;}
.about-data > div > div:nth-of-type(2) { width: calc(100% - 400px);padding-left: 70px;padding-right: 30px;    color: white;}
.about-data > div:nth-child(even) > div:nth-of-type(1) { order: 2;}
.about-data > div:nth-child(even) > div:nth-of-type(2) { order: 1;padding-left: 30px;padding-right: 70px;}
.about-section-4 { margin-left: -20px; width: calc(100% + 40px); padding:107px 20px 20px 20px; min-height: 540px; background: url(../images/about-bg-3.jpg) no-repeat top center; background-size: cover;}
.about-section-4-pto { text-align: center; margin-top: 30px;}

.resp-tab-content table td{border: 1px solid #ccc;padding: 4px 8px;}
.resp-tab-content table td:nth-of-type(even){border-left: 0px;}
.resp-tab-content table tr td{border-bottom: 0px;}
.resp-tab-content table td:nth-of-type(1n+3){border-left: 0px;}
.resp-tab-content table tr:last-child td{border-bottom: 1px solid #ccc;;}
.resp-tab-content ul {padding-left: 30px;}
.resp-tab-content ul li{ list-style: disc;}

.wrap{max-width: 100%;margin: 0 auto;}
.oem_img_list{display: inline-block;vertical-align: top;width: calc(90%/5);margin: 0 0 15px 15px;}
.oem_img_list >img {width: 220px;height: auto;}
.product_list{ margin: 0 13px 30px 0;width: calc(16.33% - 13px);display: inline-flex;flex-wrap: wrap;}
.product_pic{width: 100%;background: rgba(255, 255, 255, 0.9);text-align: center;line-height: 0;}
.product_list_title{
  color: #fff;
  font-size: 15px;
  padding: 12px 4px;
  text-align: left;
  font-weight: bold;
  line-height: 130%;
width: 100%;
display: block;}
  .product_list_title a:link, .product_list_title a:visited{color: #fff;transition: all .3;}
  .product_list:hover .product_list_title a{color: rgba(232,51,12,1);}
@media only screen and (max-width:  980px) {
	.main-box { padding-top: 100px;}
	.title01 h1, .title01 span  { font-size: 24px;}
  .product_list{width: calc(19.5% - 13px);}
	.pro-list > a { width: calc(50% - 48px); }
	
	.pro-list2 > div { width: calc(33.33% - 13px);}
	
	.about-section-1 {height: auto;}
	.about-content { padding: 30px 0 50px 0;}
	.about-content > div:nth-of-type(1) {width: 100%; order: 2;} 
	.about-content > div:nth-of-type(2) {width: 100%; order: 1; padding: 0 0 30px 0;} 
	.about-content > div:nth-of-type(2) img {width: 220px;} 
	
	.about-section-4  { min-height: inherit; padding: 60px 20px;}

  .oem_img_list{width: calc(90%/4);}
}

@media only screen and (max-width: 768px) {
	.pro-list2 > div { width: calc(50% - 13px);}
	
	.p-detail-top { margin-bottom: 40px; border-width: 0;}
	.p-detail-top > div:nth-of-type(1) { width: calc(100% - 0px); order: 2; padding-top: 80px; padding-right: 0px; padding-bottom: 0;}
	.p-detail-top > div:nth-of-type(2) { width: 100%; order: 1;margin: 0;}
	
	.about-data > div > div:nth-of-type(1) { width: 100%; text-align: center;}
	.about-data > div > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0px;}
	.about-data > div:nth-child(even) > div:nth-of-type(1) { order: 1;}
	.about-data > div:nth-child(even) > div:nth-of-type(2) { order: 2; padding-right: 0px;}

  .oem_img_list{width: calc(90%/3);}
}
@media only screen and (max-width: 640px) {
	.product_list{width: calc(32.5% - 13px);}
}
@media only screen and (max-width: 570px) {
  .title02 { font-size: 16px;}

	.pro-list { padding-left: 0; padding-right: 0;}
	.pro-list > a { width: calc(100% - 0px); margin-left: 0; margin-right: 0; }
	.pro-list-pto { left: 0;}
	.pro-list-name { text-align: center;}
  .product_list{width: calc(49% - 13px);}
  .oem_img_list{width: calc(90%/2); margin: 0 0 2% 3%; }
}

@media only screen and (max-width: 414px) {
	.about-data > div > div:nth-of-type(2) {
    width: calc(100%);
    padding-left: 20px;
    padding-right: 20px;
    color: white;
    padding-bottom: 20px;
  }
  .about-data > div:nth-child(1) {border-right: 0px;  border: 2px solid white;}
  .about-data > div:nth-child(2) {border-left: 0px;  border: 2px solid white;}
  .about-data > div:nth-child(3) {border-right: 0px;  border: 2px solid white;}
  .about-data > div:nth-child(1) > div:nth-of-type(1):after {border-style: none;}
  .about-data > div:nth-child(2) > div:nth-of-type(1):before {border-style: none;}
  .about-data > div:nth-child(3) > div:nth-of-type(1):after {border-style: none;}
  .about-data > div > div:nth-of-type(1) > img {border: 0px solid white;}
  .about-data > div:nth-child(even) > div:nth-of-type(2) {order: 2;padding-right: 20px;padding-left: 20px;}
}

@media only screen and (max-width: 375px) {
  .oem_img_list{width: 100%; margin: 0 auto 2%; text-align: center;}
}

@media only screen and (max-width: 320px) {
  
}