@charset "UTF-8";
/* CSS Document */

body, html {
	height: 100%; 
	margin: 0; 
	animation: bugfix infinite 1s; 
	-webkit-animation: bugfix infinite 1s; 
	-o-animation: bugfix infinite 1s; 
	-moz-animation: bugfix infinite 1s; 
	-ms-animation: bugfix infinite 1s;
	}
.topNav{ 
	width:100%; 
	position:fixed; 
	top:-101px; left:0; 
	z-index:100; 
	background-color: rgba(0,0,0,0); 
	transition: background-color 200ms linear;
	-webkit-transition: background-color 200ms linear; 
	-o-transition: background-color 200ms linear; 
	-moz-transition: background-color 200ms linear; 
	-ms-transition: background-color 200ms linear; 
	}
.navActive{ 
	background-color:#000000; 
	transition: background-color 200ms linear; 
	-webkit-transition: background-color 200ms linear; 
	-o-transition: background-color 200ms linear; 
	-moz-transition: background-color 200ms linear; 
	-ms-transition: background-color 200ms linear; 
	opacity:0.9; 
	/* IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	/* IE 5-7 */
	filter: alpha(opacity=90);
	/* Netscape */
	-moz-opacity: 0.9;
	/* Safari 1.x */
	-khtml-opacity: 0.9;
}
.topNav ul{ text-align:center;}
.topNav ul li{ display:inline-block; padding:25px 40px; color:#ffffff; font-family: 'GothamLight'; font-size:18px; cursor:pointer;}
.overlay ul li{ font-size:30px;}
.overlay ul li label{ cursor:pointer;}
.topNav ul li a{
	color:#ffffff; 
	text-decoration:none; 
	padding-bottom:20px; 
	border-bottom:2px solid transparent;
	}

.topNav ul li a.active{
	border-bottom:2px solid  #e53a31; 
	padding-bottom:20px; 
	transition: all .5s ease-in-out; 
	-webkit-transition: all .5s ease-in-out; 
	-o-transition: all .5s ease-in-out; 
	-moz-transition: all .5s ease-in-out; 
	-ms-transition: all .5s ease-in-out;
	}

#toTop{ 
	position:fixed; 
	right:20px; 
	bottom:-61px; 
	z-index:10; 
	transition: all .5s ease-in-out; 
	-webkit-transition: all .5s ease-in-out; 
	-o-transition: all .5s ease-in-out; 
	-moz-transition: all .5s ease-in-out; 
	-ms-transition: all .5s ease-in-out; 
	border:none;
	}
#toTop img{ width:auto; height:41px; border:none;}
.gotoTop{bottom:16px!important;}
.gotoTop img{ border:none;}

.section{ background-color:#cccccc;}
.section-a, .section-b, .section-c, .section-d, .section-e, .section-f, .section-g{
	  position: relative;
	  background-attachment: fixed;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  will-change: transform;
	  top:0;
	  overflow: hidden;
}

.toTopImg{height: 30px; width: auto; position: relative; left: 0; top: 7px;}

.section-i .caption{ display: block!important; height:auto!important; padding-bottom: 30px;}
.section-i .caption p{text-align: center;width: 100%;max-width: 1000px;margin: 0 auto;}

#OP ul li img{ font-size:32px; height:50px}

html[data-useragent*='MSIE 10.0'] .section { background-attachment:inherit;}

@media all and (min-width:0\0) and (min-resolution:.001dpcm){
	.section { background-attachment:inherit;}
  	.gMap { display:none; }
}

@media \0screen {
	.section { background-attachment:inherit!important;}
    #AU .mask{ display:none!important;}
	.ie8img{ display:inline-block!important;} 
	.section .content{ padding-top:101px;}
	.toTopImg, .logoImg, .projectImg{ display:none!important;}
	.gMap{ display:none;}
}

.ie8img{ display: none;}

.section-a {
  background-image: url("../images/01.jpg?v1.0");
  min-height: 100%;
}

.section-b {
  background-image: url("../images/02.jpg?v1.0");
  min-height: 100%;
}

.section-c {
  background-image: url("../images/03.jpg?v1.0");
  min-height: 100%;
}

.section-d {
  background-image: url("../images/04.jpg?v1.0");
  min-height: 100%;
}

.section-e {
  background-image: url("../images/05.jpg?v1.0");
  min-height: 100%;
}

.section-f {
  background-image: url("../images/06.jpg?v1.0");
  min-height: 100%;
}

.section-g {
  background-image: url("../images/07.jpg?v1.0");
  min-height: 100%;
}



.section-i{ background-color:#f2f1f0; padding:180px 0;}

.section-i .content{ width:100%!important; display:inline-block;}

.section-i ul{ text-align:center; margin:0 auto; padding:0; max-width:1200px;}

.section-i ul li{ display: inline-block; margin:0; vertical-align:top; max-width:560px; margin-left:20px; margin-right:20px; float:left; margin-bottom:50px;}

.section-i ul li img{ width:100%; height:auto;}

.section-i h1{ margin-top:0; margin-bottom:40px; text-align:center; color:#3a3a3a!important;}

.section-i h2{ text-align:left; font-family: 'GothamLight'; margin-bottom:20px; margin-top:30px;}

.section-i p{color:#5c5c5c!important; margin-top:0; line-height:30px; margin-top:20px;}

.owl-dots{display:none;}

.owl-nav button span{font-size: 36px; color:#494949;line-height: 1;font-weight: 200; color: #e53a31;}

.section .content{ width:1000px; margin:0 auto; position:relative; z-index:2;}
.section .caption {
  text-align: center;
  color: #000;
  display:table-cell;
  vertical-align:middle;
  height:100vh;
  margin:0 auto;
  width:1200px;
}

@keyframes fadeIn {
    from { padding-top:130px; opacity:0; filter: alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0}
    to { padding-top:0; opacity:1; filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1;}
}
.animationFadeIn {
    animation: fadeIn 0.6s linear normal forwards;
    -webkit-animation: fadeIn 0.6s linear normal forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}

@keyframes fadeInNav {
    from { top:-101px; opacity:0; filter: alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0}
    to { top:0; opacity:1; filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1;}
}
.animationFadeIn-nav {
    animation: fadeInNav 0.6s linear normal forwards;
    -webkit-animation: fadeInNav 0.6s linear normal forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 0.6s; /* Safari 4.0 - 8.0 */
    animation-delay: 0.6s;
}


.section h1{ color:#ffffff; font-size:42px; font-family: 'Rio Glamour', 'GothamLight'; font-weight:lighter; letter-spacing:5px;}

.section h3{ color:#ffffff; line-height:40px; font-family: 'Rio Glamour', 'GothamLight'; letter-spacing: 5px; font-size:22px; font-weight:300;}

.section-a-light-c h3{ margin-top:5px;}

.section p{color:#ffffff; font-size:18px; font-family: 'GothamLight'; line-height:30px; letter-spacing:1/2px;}

.section-g h1, .section-h h1, .section-g p{ color:#ffffff;}

.section-g ul{ padding:0;}

.section-g ul li{ display:inline-block; padding:20px 50px;}

.section-h{text-align:center; padding:200px 0 170px 0; background-image: url("../images/logoWall.jpg?v1.0"); background-size:cover; background-position:center; background-color: #4b4b4b;}

.section-h h1{ color:#ffffff;}

.section-h p{ color:#ffffff;}

#AU .mask{ 
	position:absolute; 
	width:100%; 
	height:100%; 
	top:0; 
	left:0; 
	background-color:#0c5e9d; 
	opacity:0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	/* IE 5-7 */
	filter: alpha(opacity=50);
	/* Netscape */
	-moz-opacity: 0.5;
	/* Safari 1.x */
	-khtml-opacity: 0.5;
	z-index:1;  
	transition: all .5s ease-in-out; 
	-webkit-transition: all .5s ease-in-out; 
	-o-transition: all .5s ease-in-out; 
	-moz-transition: all .5s ease-in-out; 
	-ms-transition: all .5s ease-in-out;
}

#AU .maskActive{ opacity:0;}

.footer{ text-align:center; font-family: 'GothamLight'; background-color:#000000; color:#ffffff; padding:15px 0; font-size:14px;}

/* PC owl-carousel/owl-slider control  */
@media screen and (min-width:769px) {
    #owl-slider .owl-nav{ position: absolute;  top:50%; margin-top:-45px;  z-index: 2;  width:100%; display: block;}
    #owl-slider button{width: 30px; height: 80px; background-color: rgba(0, 0, 0, 0.6)}
    #owl-slider .owl-nav .owl-prev{ float: left; outline: none; }
    #owl-slider .owl-nav .owl-next{ float: right;  outline: none;}
    #owl-slider .owl-nav button span{ font-size: 60px; color:#e53a31; ;font-weight: 200;display: block; transition: 0.25s; margin-top: -10px;}
    #owl-slider .owl-nav button span:hover{opacity: 1;color:#e53a31; transform: scale(1.05) translateX(-2px);}
 }
/* End PC owl-slider control  */

/* mobile menu start */
@keyframes bugfix { from {padding:0;} to {padding:0;}}
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;}}
#overlay-button {
	  position: fixed;
	  right: 10px;
	  top: 10px;
	  padding: 26px 11px;
	  z-index: 12;
	  cursor: pointer;
	  user-select: none;
	  display:none;
	  background-color:#f13439;
	  border-radius:5px;
	  opacity:0.9;
	  }

#overlay-button span {
      height: 4px;
      width: 35px;
      border-radius: 2px;
      background-color: white;
      position: relative;
      display: block;
      transition: all .2s ease-in-out;
	  -webkit-transition: all .2s ease-in-out;
	  -o-transition: all .2s ease-in-out; 
	  -moz-transition: all .2s ease-in-out; 
	  -ms-transition: all .2s ease-in-out;
}
	  
#overlay-button span:before {
      top: -10px;
      visibility: visible;
      }
#overlay-button span:after {
      top: 10px;
      }

#overlay-button span:before, #overlay-button span:after {
      height: 4px;
      width: 35px;
      border-radius: 2px;
      background-color: white;
      position: absolute;
      content: "";
      transition: all .2s ease-in-out;
	  -webkit-transition: all .2s ease-in-out;
	  -o-transition: all .2s ease-in-out;
	  -moz-transition: all .2s ease-in-out;
	  -ms-transition: all .2s ease-in-out;
      }


#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after{
      background: #ffffff;
    }

input[type=checkbox] {
   	  display: none;
}

input[type=checkbox]:checked ~ .overlay{
 	  visibility: visible;
}

input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span{
      background: transparent;
  }

input[type=checkbox]:checked ~ #overlay-button span:after {
      transform: rotate(-45deg) translate(7px, -7px);
	  -webkit-transform: rotate(-45deg) translate(7px, -7px);
	  -o-transform: rotate(-45deg) translate(7px, -7px);
	  -moz-transform: rotate(-45deg) translate(7px, -7px);
	  -ms-transform: rotate(-45deg) translate(7px, -7px);
    }

input[type=checkbox]:checked ~ #overlay-button span:before {
      transform: rotate(45deg) translate(7px, 7px);
	  -webkit-transform: rotate(45deg) translate(7px, 7px);
      -o-transform: rotate(45deg) translate(7px, 7px);
      -moz-transform: rotate(45deg) translate(7px, 7px);
	  -ms-transform: rotate(45deg) translate(7px, 7px);
       opacity: 1;
       /* IE 8 */
	   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  	   /* IE 5-7 */
	   filter: alpha(opacity=100);
	   /* Netscape */
	   -moz-opacity: 1;
	   /* Safari 1.x */
	   -khtml-opacity: 1;
    }

.overlay {
	  height: 100vh;
	  width: 100vw;
	  background: #ec6451;
	  z-index: 11;
	  visibility: hidden;
	  position: fixed;
		  }

.overlay.active {
      visibility: visible;
  }

.overlay ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    height: 100vh;
    padding-left: 0;
    list-style-type: none;
    }
.overlay ul li {padding: 1em;}


		
/* mobile menu end */


/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .section-a, .section-b, .section-c, .section-d, .section-e, .section-f, .section-h {
    background-attachment: scroll;
  }
}

@media screen and (max-width:1200px) {
	.section .content{max-width: 900px;}
	section-i{ width:100%!important;}
	.section-i .content{ margin:0 auto; max-width: 100%!important;}
	}

@media screen and (min-device-width: 768px) and (max-device-width: 1200px) {
	.section .caption{max-width: 100%; padding:0 40px;}
}

@media screen and (max-width:769px) {
	#home .caption{ width:768px;}
	}
	
@media screen and (max-width:960px) {
	.section-a-light-c .content .caption{ width:1000px!important;}
	.section .content{width:100%;}
	.section .caption{padding:0 20px;}
	#CUS .content{ width:90%;}
	section-i{ width:100%!important;}
	.section-i .content{ max-width:560px;}
	.section-i .content .caption{ width: 100%; padding: 0;}
	.section-i ul li{ max-width:560px;}
	.toTopImg{height:40px; width: auto;}
	}
@media screen and (max-width:320px) {
	.section .caption{padding:0;}
	.section h1{ font-size:30px;}
	.logoImg{ width:230px;}
	.section h3{ font-size:20px;}
	.overlay ul li{ font-size:20px;}
	}
	
@media screen and (max-width: 640px) {
	.section-a, .section-b, .section-c, .section-d, .section-e, .section-f, .section-g{ 		
	background-attachment:scroll!important;}
	}

@font-face {
    font-family: 'GothamLight';
    src: url('fonts/GothamLight/GothamLight.eot');
    src: url('fonts/GothamLight/GothamLight.eot?#iefix') format('embedded-opentype'),
        url('fonts/GothamLight/GothamLight.woff2') format('woff2'),
        url('fonts/GothamLight/GothamLight.woff') format('woff'),
        url('fonts/GothamLight/GothamLight.ttf') format('truetype'),
        url('fonts/GothamLight/GothamLight.svg#GothamLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rio Glamour';
    src: url('fonts/RioGlamour/RioGlamour.eot');
    src: url('fonts/RioGlamour/RioGlamour.eot?#iefix') format('embedded-opentype'),
        url('fonts/RioGlamour/RioGlamour.woff2') format('woff2'),
        url('fonts/RioGlamour/RioGlamour.woff') format('woff'),
        url('fonts/RioGlamour/RioGlamour.ttf') format('truetype'),
        url('fonts/RioGlamour/RioGlamour.svg#RioGlamour') format('svg');
    font-weight: normal;
    font-style: normal;
}

