@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,800');

body {
	height:100%;
	font-family: Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
H1{
	font-family: "Anton", sans-serif;
	font-size:60px;
	text-transform: uppercase;
	letter-spacing: 4px;
	color: #333;
	line-height: 60px;
}
H2{
	font-family: "Anton", sans-serif;
	font-size:60px;
	text-transform: uppercase;
	letter-spacing: 4px;
	color: #333;
	line-height: 60px;
}
.mt36{margin-top:36px}
.mt22{margin-top:22px}
.mt-20{margin-top:-20px}
.mb50{margin-bottom:50px}
.mt12{margin-top:12px}
.mb5{margin-bottom:5px;}
.mb40{margin-bottom:40px;}
.mt50{margin-top:50px;}
.mb80{margin-bottom:80px;}
.mb100{margin-bottom:100px;}
.mb20{margin-bottom:20px;}
.mr20{margin-right:20px;}
.pt100{padding-top:100px}
.pt140{padding-top:140px}
.pt50{padding-top:50px}
.p30{padding :30px}
.t-center{text-align:center}
.mt80{margin-top:80px}
/* 隱藏 .imgHover:hover{opacity: 0.5; filter: alpha(opacity=50);	-webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
	-o-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;}	*/
img {max-width: 100%;}

.color-333{color: #333!important;}
.f-weight800{font-weight:600!important;letter-spacing: 1px;}
h4{font-weight:600;color: #009eff;margin:20px auto;}
h3{font-size:25px;font-weight:600;margin:0px}
h6 {padding: 0;margin: 0;font-weight: 600;}
p {
	font-size:16px;
	margin-bottom: 10px;
	color:#666;
	line-height: 25px;
	font-weight:400;
	letter-spacing: 0.5px;
}

a:hover,a:focus {text-decoration: none;outline: none;}
ul,ol {padding: 0;margin: 0;}
.show991{display:none}
/* Nav */
.header-section {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	z-index:999;
	border-bottom-style: solid;
	background-color: #333333;
  -webkit-border-image: -webkit-linear-gradient(
        right,
       rgba(253,252,253,1) 1%,
      rgba(80,80,80,1) 50%
  ) 0 0 100% 0/0 0 10px 0 stretch;
}





.nav-shrink {-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;position: fixed;background: #fff;box-shadow:0px 0px 10px #999;;}
.nav-shrink .nav-link {color:#666;}
.site-menu a:hover{color:#0075c1;}
.menu-list:hover{color:#0075c1;}


.header-section a:visited{color: #fff;!important;}
.nav-shrink a:visited{color: #666666;!important;}

.header-section a:hover{color: #0075c1;}
.nav-shrink a:hover{color:#0075c1;}






.show991 a:visited{color: #666;!important;}



.header-warp {
	width:100%;
	height:100px;
	padding:0px;

}

.header-section .site-logo{float:left;height:100%;padding:10px 0px;}
.header-section .site-logo img {height:80px;max-height:100%;}
.nav-shrink .light {display:none}
.header-section .dark{display:none}
.nav-shrink .dark{display:block}

.responsive-switch,.sm-close,.responsive-switch2 {display:none;}
.sm-close{color: #999;}

.header-section .mailto {}
.header-section .mailto a:hover{color:#82cdff}

.site-menu ul {float:right;list-style: none;padding-top:35px;margin-left:0px}
.site-menu li {display: inline-block;}

/*--藍色鎖住--*/
.site-menu li.current a{color: #fff;background-color: #0075c1;border-radius:999px;padding:2px 10px 0px 10px!important;margin-bottom:10px;}
/*--小圓點--*/
.site-menu li.current a:after {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);margin-bottom:-5px!important;}




/*--.site-menu a:hover {color: #56b3ef;}--*/
.site-menu a {
	text-transform:uppercase;
	color: #fff;
	padding: 5px 10px;
	font-size: 18px;
	position: relative;
	margin-left: 5px;
	font-weight: 700;
}
.site-menu a:after {position: absolute;content: "";width: 10px;height: 10px;left: 50%;bottom: -10px;margin-left: -5px;border-radius: 20px;background: #0075c1;-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);-webkit-transition: all 0.4s;-o-transition: all 0.4s;transition: all 0.4s;}





.bg-section{
	padding-top:100px;
	padding-bottom:100px;
	text-align:center;
background-color:#000;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
}


/* Product*/
.itemTxt{padding:10px 10px 20px 10px;background-color: #000000;min-height:120px}
.itemTxt p{
	color:#FFF!important;
	font-weight: 800;
	font-size: 16px;
}	

.tool-item {display: block;position: relative;}
.tool-item img {min-width: 100%;border-radius:10px 10px 0px 0px}
.tool-item:hover:after {opacity: .5;height: 100%;-webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;-o-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;border-radius:10px 10px 0px 0px}
.tool-item:hover i {opacity: 1;-webkit-transition: all 0.3s ease .2s;-o-transition: all 0.3s ease .2s;transition: all 0.3s ease .2s;}
.tool-item:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 50%;
	left: 0;
	bottom: 0;
	background: #000;
	opacity: 0;
	z-index: 1;
	-webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
	-o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}
.tool-item i {position: absolute;right: 20px;top: 20px;font-size: 30px;color: #fff;z-index: 4;opacity: 0;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}

/* Contacts */
.contacts {position: relative;}
.contacts .Txt{width:23%;
	position: absolute;
	left:25%;padding:30px 30px 50px 30px;
	top:35px;
	background-color: #000;
}
.contacts2{
	position: relative;
	background-image: url(../img/contact.jpg);
	background-repeat: no-repeat;
	background-position: center top;min-height:500px;
}	
.contacts2-limg {position: absolute;left:0;top:0px}	

/* Footer */
.footer .block{display:none;}
.footer{padding:50px 0;text-align:center;display:block;background-color: #333333;}
.footer ,.footer a ,.footer p{color:#FFF!important}
.footer i{font-size: 35px;margin-bottom:10px;display:block}
.footer label{font-size: 12px;}

/*Solutions*/
.Solutions-bg{
	background-image: url(../img/Solutions.jpg);
	background-repeat: no-repeat;
	background-position: right center;
}
.Solutions img{margin: auto 70px 0px 70px;-webkit-transition: all 0.3s ease .2s;-o-transition: all 0.3s ease .2s;transition: all 0.3s ease .2s;}

.Solutions .zoomin:hover{margin: auto 75px 12px 75px;-webkit-transition: all 0.3s ease .2s;-o-transition: all 0.3s ease .2s;transition: all 0.3s ease .2s;}


.Solutions H5{
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	color: #333333;
}

/*--------------------
	Responsive
----------------------*/
@media only screen and (max-width: 415px) {
.site-menu a {font-size: 10px!important;}
.Solutions img{margin: auto 20px!important;}

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



}
@media only screen and (max-width: 768px) {
.bg-opacity{margin: auto -30px!important;}	
.bg-section {padding:100px 30px!important;}
.jarallax {padding:100px 30px!important;}
.t-center768{text-align:center}	
.sliders-content {position: absolute;}
H1{
	font-size:45px!important;
	line-height: 50px!important;
}
H2{
	font-size:45px!important;
	line-height: 50px!important;
}
.txtTitle-w{font-size:45px!important;line-height: 50px!important;}
.txtTitle-b{font-size:45px!important;line-height: 50px!important;}

.swiper-slide .txt H2{
	font-size:50px!important;
	line-height:55px!important;	
}
}

@media only screen and (max-width: 991px) {
.footer .block{height:70px!important;display:block!important;}
.jarallax1 {display:none!important;}.jarallax-rimg{display:none!important;}
.Solutions img{margin: auto 40px!important;}
.hidden991{display:none}
.show991{display:block}
.t-center991{text-align:center}	
.sliders-section {height:calc(100vh - 70px)!important;}

.nav-shrink .responsive-switch {color: #666;}
.nav-shrink .responsive-switch2 {color: #666;}
.responsive-switch2 {color: #fff;display: block;float: right;font-size: 40px;padding-top: 10px;padding-right: 12px;cursor: pointer;}
.responsive-switch {color: #fff;display: block;float: right;font-size: 40px;padding-top: 10px;padding-right: 12px;cursor: pointer;}
.site-menu li.current a{border-radius:0px!important;padding-top:20px!important;}
.site-menu{margin:0px!important;padding:0px!important;background-color: #fff;box-shadow:0px 0px 10px #999;display:block;width:100%;Z-index:999;position: fixed;height:75px;bottom: 0px;display: block;}
.site-menu ul {float:none;list-style: none;padding-top:0px!important;margin-left:0px}
.site-menu li {width:20%;float:left;text-align:center;display:block;}
/*--.site-menu a:hover {color: #56b3ef;}--*/
.site-menu li i{font-size:25px;}
.site-menu a {
	color: #666;
	padding: 20px 0px;
	font-size: 11px;
	margin-left: 0px!important;
	font-weight: 600;height:75px!important;
}
.site-menu a:after {bottom: -999px!important;}
.Solutions-bg{
	background-image: url(../img/Solutions.jpg);
	background-repeat: no-repeat;
	background-position: right center;
}.Solutions-bg{
	text-align:center;
	background-position: -2000px 1000px!important;
}
.CORPORATE{text-align:center;}
.company{text-align:center}
.Solutions{text-align:center!important;}
}
.color-w{color:#FFF!important;}
.t-left{text-align:left}

@media only screen and (max-width: 1024px) {.contacts .Txt{width:80%!important;left:10%!important;}
.header-section .site-logo{padding:8px 0px;}
.header-section .site-logo img {height:64px;}
.header-warp {height:80px;}
.site-menu ul {padding-top:25px;}
.pt140{padding-top:110px}
.pt100{padding-top:85px}
}
@media only screen and (max-width: 1280px) {.contacts .Txt{width:60%;left:20%}
}

.site-btn {margin-top:22px;font-size:20px;color:#333333;font-weight:800;padding: 15px 30px;min-width: 160px;}
a{text-decoration: none;}
.site-btn:hover {color: #999;}
.jarallax {position: relative;z-index: 0;padding-top:100px;
	padding-bottom:100px;}

.jarallax-rimg{bottom:0px;right:0px;
	position: absolute;
}
.jarallax-keep-img { position: relative;z-index: 0;}
.jarallax-keep-img > .jarallax-img {
    position: relative;
    display: block;
    max-width: 100%;
    height: auto;
    z-index: -100;}

.jarallax2 {position: relative;z-index: 0;padding-top:15px;
	padding-bottom:15px;text-align:center;min-height:80px;}
.jarallax2 > .jarallax-img {
	position: absolute;
	object-fit: cover;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-position: right;
}


.jarallax1 {position: relative;z-index: 0;padding-top:15px;
	padding-bottom:15px;text-align:center}
.jarallax1 > .jarallax-img {
	position: absolute;
	object-fit: cover;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-position: right;
}
.jarallax > .jarallax-img {
    position: absolute;
    object-fit: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.txtTitle-w{font-size:60px;color:transparent;-webkit-text-stroke: 1px #fff;text-transform: uppercase;font-family: "Anton", sans-serif;letter-spacing:4px;line-height: 60px;}
.txtTitle-b{font-size:60px;color:transparent;-webkit-text-stroke: 1px #333;text-transform: uppercase;font-family: "Anton", sans-serif;letter-spacing:4px;line-height: 60px;}

html,    
    body {
      position: relative;
      height: 100%;
    }
 
.swiper {width: 100%;height: 100%;}
.swiper-slide {      
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;      
    }
.swiper-slide .txt{color:#fff;
	position: absolute;
}
.swiper-slide .txt H2{
	color:#fff;
	font-size: 100px;
	opacity: 0.5;
	line-height:105px;	
}
.swiper-slide .txt H4{color:#fff;}
    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
.more{
	width:auto;width:140px;
	position: relative;
}
.more .btn{
	height:25px;left:0px;top:0px;
	width:100px;
	background-color: #0075c1;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	color: #FFF;
	position: absolute;
	font-size:12px;
	line-height: 14px;border-radius:0px;z-index:3
}
.more .btn:hover{background-color: #646464;}
.more .line{width:30px;border-top: solid #fff 1px;right:-20px;top:12px;z-index:999;position: absolute;}