@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Anton|Noto+Sans+TC');
.text-border-black, .黑框字{text-shadow:-1px 0 rgba(41,50,58,1), 0 1px rgba(41,50,58,1), 1px 0 rgba(41,50,58,1), 0 -1px rgba(41,50,58,1);}
.text-border-white, .白框字{text-shadow:-1px 0 #FFF, 0 1px #FFF, 1px 0 #FFF, 0 -1px #FFF;}
.text-blue{color:rgba(2,151,255,1);}
.text-darkblue{color:rgba(3,43,78,1);}
.text-orange{color:rgba(241,143,96,1);}
/*----------------------------------------------------------- 
GLOBAL STYLES
-----------------------------------------------------------*/
*{
  font-family:'Noto Sans TC', 'Lucida Sans Unicode','Trebuchet MS',Verdana,Arial,黑體,宋體,微軟正黑體,新細明體;
  outline:none;
  box-sizing:border-box;
  transition:
    top 0.5s ease,
    left 0.5s ease,
    right 0.5s ease,
    height 0.5s ease,
    width 0.5s ease,
    opacity 0.5s ease,
    background-image 0.5s ease,
    background-color 0.5s ease,
    background-position 0.5s ease,
    margin 0.5s ease-out,
    padding 0.5s ease-out;
  -webkit-transition:
    top 0.5s ease,
    left 0.5s ease,
    right 0.5s ease,
    height 0.5s ease,
    width 0.5s ease,
    opacity 0.5s ease,
    background-image 0.5s ease,
    background-color 0.5s ease,
    background-position 0.5s ease,
    margin 0.5s ease-out,
    padding 0.5s ease-out;
  -moz-transition:
    top 0.5s ease,
    left 0.5s ease,
    right 0.5s ease,
    height 0.5s ease,
    width 0.5s ease,
    opacity 0.5s ease,
    background-image 0.5s ease,
    background-color 0.5s ease,
    background-position 0.5s ease,
    margin 0.5s ease-out,
    padding 0.5s ease-out;
}

body{
	color:rgba(51,51,51,1);
	font-size:;
	background:rgba(245,245,245,1);
	overflow-x:hidden;
}

section{
	width:100%;
	min-height:100vh;
}

.scroll-snap-x{
  overflow-x:hidden;
  width:100%;
  max-height:100vh;
  overflow:auto;
  -ms-scroll-snap-type:mandatory;
      scroll-snap-type:mandatory;
  -ms-scroll-snap-type:x mandatory;
      scroll-snap-type:x mandatory;
}

.scroll-snap-y{
	/*
  overflow-x:hidden;
  width:100%;
  min-height:100vh;
  */
  overflow:auto;
  -ms-scroll-snap-type:y proximity;
      scroll-snap-type:y proximity;
}

.snap-align-start{
	scroll-snap-align:start;
}

.sticky{
	position:-webkit-sticky;
	position:sticky;
	bottom:0;
	background:rgba(41,50,58,1);
	/*background:rgba(0,0,0,1);*/
	padding:12px;
	text-align:right;
	font-size:9pt;
	color:#FFF;
}

.sticky-100{
	z-index:100;
}

h1, h2, h3, h4, h5{
	font-family:'Noto Sans TC','Montserrat', sans-serif;
}

h2{
	font-size:9vw;
	font-weight:800;
	color:rgba(41,50,58,1);
}

h2:first-letter{
	font-size:11vw;
}

h2 small{
	color:#222;
	display:block;
	font-size:22px;
	margin-bottom:18px;
}

.parallax-section, .parallax{
	background-attachment:fixed!important;
}

.home, .home:hover{
	color:#FFF;
	border:#FFF 1px solid;
	min-width:2em;
	min-height:2em;
	line-height:2em;
	text-align:center;
	display:inline-block;
}

.gotop{
	text-align:right;
	padding:8px;
	right:0;
	bottom:0;
	width:100%;
}
/*----------------------------------------------------------- 
Loader
-----------------------------------------------------------*/
.loaders{
	width:100%;
	box-sizing:border-box;
	display:flex;
	flex:0 1 auto;
	flex-direction:row;
	flex-wrap:wrap;
}

.loaders .loader{
	box-sizing:border-box;
	display:flex;
	flex:0 1 auto;
	flex-direction:column;
	flex-grow:1;
	flex-shrink:0;
	flex-basis:25%;
	max-width:25%;
	height:200px;
	align-items:center;
	justify-content:center;
}

.loader{
	display:table;
	height:100%;
	position:fixed;
	width:100%;
	z-index:1200;
}

.loader-bg{
	/*
	background-color:transparent; 
	background-image:url(../images/home-bg.jpg);
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
	*/
}

.loader-inner{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}

.loader .ball-clip-rotate-pulse{
	left:50%;
	position:absolute;
	top:50%;
}

/*----------------------------------------------------------- 
navigator
-----------------------------------------------------------*/
.navbar{
	/*overwrite bootstrap*/
	padding:0;
	background:rgba(41,50,58,0.6);
}

.top-nav-collapse {
  background:rgba(41,50,58,0.6);
  z-index:999999;
  top:0px !important;
  box-shadow:0px 3px 6px 3px rgba(0, 0, 0, 0.6);
  -webkit-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-name:fadeInDown;
  animation-name:fadeInDown;
}

.top-nav-collapse .navbar-brand {
  top:0px;
}

.navbar-brand {
  width:100px;
}

.top-nav-collapse .navbar-nav .nav-link {
  color:#FFF !important;
  margin-top:0px !important;
  margin-bottom:0px !important;
}

.top-nav-collapse .navbar-nav .nav-link:hover {
	color:#FFF;
	background-color:rgba(219,0,27,1) !important;
}

.top-nav-collapse .navbar-nav .nav-link.active {
	color:#fff !important;
}

.top-nav-collapse .slicknav_btn{
	border-color:rgba(2,151,255,0);
}

.top-nav-collapse .slicknav_menu .slicknav_icon-bar{
	background:rgba(255,255,255,1);
}

.navbar-expand-lg .navbar-nav .nav-link {
  color:#FFF;
  padding:0 22px;
  margin-top:20px;
  margin-bottom:20px;
  line-height:40px;
  border-radius:30px;
  background:transparent;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

.navbar-expand-lg .navbar-nav li a{
	border-top:rgba(219,0,27,0) 2px dotted;
	border-bottom:rgba(219,0,27,0) 2px dotted;
}

.navbar-expand-lg .navbar-nav li a:hover,
.navbar-expand-lg .navbar-nav li .active > a,
.navbar-expand-lg .navbar-nav li a:focus {
	color:#FFF;
	border-top:rgba(219,0,27,1) 2px dotted;
	border-bottom:rgba(219,0,27,1) 2px dotted;
}

.navbar .nav-link.active {
  color:#fff !important;
  background:rgba(219,0,27,1);
}

.dropdown-toggle::after {
  display:none;
}

.slicknav_btn {
	border-color:rgba(2,151,255,0);
}


.slicknav_open .slicknav_icon-bar:nth-child(1){
	transform-origin:50% 50%;
	transform:translateY(8px) rotate(45deg);
}

.slicknav_open .slicknav_icon-bar:nth-child(2){
	opacity:0;
}

.slicknav_open .slicknav_icon-bar:nth-child(3){
	transform-origin:50% 50%;
	transform:translateY(-8px) rotate(135deg);
}

.slicknav_menu .slicknav_icon-bar {
  background:rgba(255,255,255,1);
}

/* only small tablets */
@media (min-width:768px) and (max-width:991px) {
  #nav-main li a.nav-link {
    padding-top:18px;
  }
}

.navbar-toggler {
  display:none;
}

.mobile-menu {
  display:none;
}

.slicknav_menu {
  display:none;
}


/*----------------------------------------------------------- 
home section
-----------------------------------------------------------*/
#home{
	background:rgba(245,245,245,1) url(../images/home-bg.jpg); 
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
	width:100vw;
	height:100vh;
	max-height:100vh;
}

#home h2,
#home h5{
	text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}

.home-slogan{
	margin:auto;
	margin-top:50vh;
	width:60vw;
}

.home-slogan .header-1{
	font-size:8vw;
}

.home-slogan .header-2{
	font-size:6vw;
	width:28vw;
	display:inline-block;
	vertical-align:bottom;
}

.home-slogan .header-3{
	font-size:4vw;
}
/*----------------------------------------------------------- 
vedio section
-----------------------------------------------------------*/
.video-sec{
	overflow:hidden;
	position:absolute;
	width:100vw;
	height:100vh;
}

.video-sec:before{
	content:'';
	position:absolute;
	display:block;
	width:100%;
	height:100vh;
	left:0;
	top:0;
	/*
	background:linear-gradient(to bottom right, rgba(8,70,111,0.2), rgba(3,43,78,0.8));
	background:url(../images/home-bg.jpg); 
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
	*/
	background:rgba(41,50,58,0.6);
	z-index:0;
	opacity:0;
}

.video-background{
	min-width:100%;
	min-height:100%;
}
/*----------------------------------------------------------- 
SERVICE SECTION
-----------------------------------------------------------*/
.service-sec{
	min-height:50vh;
	padding-bottom:60px;
}

.service-sec .heading{
	float:left;
	width:100%;
	margin-bottom:70px;
}

.service-sec i{
	border:1px solid #0297FF;
	border-radius:2px;
	font-size:25px;
	padding:12px 0;
	width:52px;
	color:#0297FF;
	margin-bottom:20px
}

.service-sec h3{
	font-size:23px;
	font-weight:600;
}

.service-sec p{
	line-height:22px;
	margin-top:13px;
	padding:0 21px;
}

.service-sec .service-side{
	background:rgba(245,245,245,1) url(../images/3D-600.png);
	background-position:right bottom;
	background-repeat:no-repeat;
}

.service-sec .service-block{
	margin-top:30px;
	text-align:center;
	border:rgba(41,50,58,1) 1px solid;
	border-radius:12px;
	padding-top:12px;
	min-height:60vh;
	border-bottom:rgba(41,50,58,1) 12px solid;
}

/*----------------------------------------------------------- 
ABOUT SECTION
-----------------------------------------------------------*/
.about-sec{
	/*
	background:rgba(245,245,245,1) url('../images/case-wall-1.jpg');
	background-repeat:no-repeat;
	background-position:center top;
	background-size:contain;
	*/
	color:#333;
	position:relative;
}

.about-sec .font-l{
	font-size:24px;
	font-weight:800;
}

.about-sec p{
	font-size:16px;
}

/*----------------------------------------------------------- 
showcase SECTION
-----------------------------------------------------------*/
section#showcase{
	padding-top:0;
}

.swiper-slide img{
	border:#FFF 6px solid;
	box-shadow:3px 3px 3px rgba(0,0,0,0.6);
	position:absolute;
	left:70px;
	top:160px;
}

.showcase-sec .showcase-box{
	text-align:center;
}

.showcase-sec .heading{
	float:left;
	width:100%;
	margin-bottom:70px;
}

.showcase-sec h3 small{
	display:block;
	color:#0297FF;
	margin-bottom:15px;
}

.showcase-sec h3 a{
	color:#333;
	font-size:22px;
}

.showcase-sec h3 a:hover{
	color:#0297FF;
	text-decoration:none;
}

.showcase-sec .showcase-image-block{
	margin-bottom:40px;
}

.showcase-sec .showcase-image-block img{
	border-radius:5px;
}

.swiper-wrapper .label,
#work div.label{
	font-size:4.2vw;
	position:absolute;
	color:#000;
	background:linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0.6));
	padding:6px 24px;
	padding-right:48px;
	border-radius:0 20px 20px 0;
	box-shadow:3px 3px 3px rgba(0,0,0,0.3);
	opacity:0.8;
	margin-top:-15%;
}

.swiper-wrapper .label{
	opacity:1;
	font-size:2vw;
	color:#000;
	margin-top:15%;
	border-radius:20px 0 0 20px;
	background:linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,255,0.6));
	right:0;
}

.swiper-wrapper .label-3d{
	position:absolute;
	background:rgba(41,50,58,1);
	color:#FFF;
	font-size:60%;
	padding:2px 12px;
	border-radius:0 0 10px 0;
	left:60px;
	top:180px;
	box-shadow:2px 2px 2px rgba(0,0,0,0.5);
}

.swiper-wrapper .label-3d:before{
	content:'';
	border-width:5px;
	border-color:transparent #000 #000 transparent;
	border-style:solid;
	position:absolute;
	display:block;
	width:0;
	height:0;
	left:0;
	top:-10px;
}

.swiper-button-prev{
	bottom:40px !important;
}

.swiper-button-next{
	top:120px !important;
}

.swiper-button-prev,.swiper-button-next {
    background-image:none !important;
    color:#fff;
    width:50px;
    height:50px;
    border:1px solid #fff;
    text-align:center;
    line-height:50px;
    font-size:20px;

}

.swiper-container{
	width:100%;
	height:100vh;
}

.swiper-slide{
	text-align:center;
	font-size:18px;
	background:#fff;
	/* Center slide text vertically */
	display:-webkit-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-box-align:center;
	-ms-flex-align:center;
	-webkit-align-items:center;
	align-items:center;
}

#Carousel-3d{
	height:60vh;
}
/*-----------------------------------------------------------
Gallery section
-----------------------------------------------------------*/
.gallery-sec{
	/*background:url('../images/gallery-bg.jpg');*/
	background-position:center top;
	background-size:cover; 
	background-repeat:repeat-y; 
	/*min-height:50vh;*/
}

.gallery-sec .heading{
	float:left;
	width:100%;
	margin-bottom:40px;
}

.gallery-sec .gallery-thumb{
	position:relative;
	overflow:hidden;
	margin:0;
}

.gallery-sec .gallery-thumb .label{
	color:#FFF;
	background:rgba(3,43,78,1);
	padding:3px;
	bottom:0;
	position:absolute;
	width:100%;
}

.gallery-sec .gallery-thumb .gallery-overlay{
	background:#0297FF; /* fallback for old browsers */
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
	-webkit-transition:all 0.4s ease-in-out;
	transition:all 0.4s ease-in-out;
}

.gallery-sec .gallery-thumb:hover .gallery-overlay{
	opacity:0.9;
}

.gallery-sec .gallery-thumb .gallery-overlay .gallery-item{
	text-align:center;
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
}

.gallery-sec .gallery-thumb .fa{
	background:#ffffff;
	border-radius:100%;
	font-size:24px;
	color:#222;
	width:60px;
	height:60px;
	line-height:60px;
	text-align:center;
	vertical-align:middle;
}

.threedgallery a:hover:before{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:#000;
	opacity:0.3;
	animation-name:op3;
	animation-duration:0.5s;
}

@-webkit-keyframes op3 {
  0%{opacity:0;}
  100% {opacity:0.3;}
}

@keyframes op3 {
  0%{opacity:0;}
  100% {opacity:0.3;}
}

.threedgallery .label,
.gallery-3d .label{
	position:absolute;
	background:linear-gradient(to right, rgba(41,50,58,0.3), rgba(41,50,58,0));
	width:100%;
	padding:6px 24px;
	color:#FFF;
	font-size:2vw;
	text-shadow:2px 2px 2px rgba(0,0,0,0.7);
}

#Carousel-3d .label{
	position:absolute;
	left:0;
	bottom:1em;
	width:100%;
	background:linear-gradient(to right, rgba(41,50,58,0.8), rgba(41,50,58,0));
	font-size:4vw;
	color:#FFF;
	border-radius:0;
	text-align:left;
	padding-left:1em;
}

.gallery-3d .label{
	position:sticky;
	left:0;
	background:linear-gradient(to right, rgba(41,50,58,0.8), rgba(41,50,58,0.3));
	font-size:4vw;
}

.gallery-3d .label::first-letter,
.threedgallery .label::first-letter{
	font-size:150%;
}

.gallery-3d img{
	white-space:nowrap;
}
.gallery-3d{
	white-space:nowrap;
	overflow-x:auto;
}
/*----------------------------------------------------------- 
contactnow section 
-----------------------------------------------------------*/
.contactnow-sec{
	background:rgba(245,245,245,1) url(../images/exhibition-bg.jpg); 
	background-position:center top; 
	background-repeat:no-repeat;
	background-size:cover;
	padding-top:80px;
}

.contactnow-sec .carousel{
	width:100%;
	margin:auto;
	padding:12px;
}

.contactnow-sec h1{
	font-size:64px;
	color:#FFF;
}

.deepshadow {
	font-family:'Anton';
	color:#e0dfdc;
	letter-spacing:.1em;
	text-shadow:0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
}

/*----------------------------------------------------------- 
footer
-----------------------------------------------------------*/
footer{
	float:left;
	background-image:linear-gradient(to bottom,rgba(41,50,58,0.2),rgba(41,50,58,1.1)), url(../images/footer-bg.jpg); 
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
	width:100%;
	color:#fff;
	padding:20px 0
}

footer ul{
	list-style:none;
	padding-left:0
}

footer li a,
footer li a:hover{
	color:#fff;
	width:100%;
}

footer .copy-footer{
	border-top:1px solid #fff;
	padding-top:20px;
	margin-top:10px;
}


/*----------------------------------------------------------- 
RESPONSIVE CSS
-----------------------------------------------------------*/
@media (min-width:769px){
	/*xl*/
	.mobile{display:none;}
	.laptop{display:block;}
	
	.service-sec{
		padding-top:100px;
	}

	.video-background{
		min-width:100%;
		min-height:100%;
		width:100vw;
		height:auto;
	}
}

@media (max-width:768px){
	/*sm*/
	.mobile{display:block;}
	.laptop{display:none !important;}
	.laptop.d-flex{display:none !important;}
	
	.service-sec{
		padding-top:0;
	}
	
	.swiper-slide img{
	 	display:none;
	}	
	
	.top-bar .navbar-nav{
		width:100%;
		//background:#0C242E;
		margin-top:20px;
	}

	.collapsing{
		transition-duration:0s;
		overflow:none;
	}

	.contactnow-sec h1{
		font-size:42px;
		color:#FFF;
	}

	.home-slogan{
		margin-top:60vh;
		width:85vw;
	}

	.home-slogan .header-1{
		 font-size:12vw;
	}

	.home-slogan .header-2{
		font-size:8vw;
		width:36vw;
		display:inline-block;
		vertical-align:bottom;
	}

	.home-slogan .header-3{
		font-size:6vw;
	}

	.video-background{
		min-width:100%;
		min-height:100%;
		margin-left:-50%;
	}
}

@media screen and (max-width:769px) {
  .navbar-header {
    width:100%;
  }
  .navbar-brand {
    position:absolute;
    padding:15px;
    top:0;
  }
  .navbar-brand img {
	//width:70%;
  }

  #mobile-menu {
    display:none;
  }

  .slicknav_menu {
    display:block;
  }

  .slicknav_nav .active a {
    background:#61D2B4;
    color:#fff;
  }
  .slicknav_nav a:hover, .slicknav_nav .active {
    color:rgba(219,0,27,1);
    background:#f8f9fa;
  }
  .slicknav_nav .dropdown li a.active {
    background:#f8f9fa;
    color:rgba(219,0,27,1);
  }
  .slicknav_nav .nav-item{
  	border-bottom:#DDD 1px dotted;
  	color:#FFF;
  }
}