body { background-color: #1c1c1f; }
#wrapper { width: 100%; height: auto; }
#container { width: 100%; height: auto; }

/*---
Main Title-----------*/
.title_box {
	width: 50%;
	padding-top: 18%;
	margin: 0 0 0 8%;
}
.title {
	position: relative;
	width: 100%;
	height: auto;
	padding-bottom: 50%;
	overflow: hidden;
}
.title_box span {
	position: absolute;
	color: white;
	font-size: 7.2vw;
	font-weight: bold;
	line-height: 7vw;
	letter-spacing: 0.3vw;
	left: 3.2%;
	z-index: 2;
}
.square {
	width: 7%;
	height: 0;
	padding-bottom: 28%;
	background-color: #00d2ff;
}

/*--Video--*/
.video_box {
	position: absolute;
	width: 100%;
	height: 0;
	padding-bottom: 48%;
	top: 0;
	z-index: 10;
}
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
}


/*---
Second Title-----------*/
.title_box {
	width: 50%;
	padding-top: 18%;
	margin: 0 0 0 8%;
}
.title {
	position: relative;
	width: 100%;
	height: auto;
	padding-bottom: 50%;
	overflow: hidden;
}
.title_mob { display: block; }
.title_box span {
	position: absolute;
	color: white;
	font-size: 7.5vw;
	font-weight: bold;
	line-height: 9vw;
	left: 3.2%;
	z-index: 2;
}
.square {
	width: 8%;
	height: 0;
	padding-bottom: 38%;
	background-color: #00d2ff;
}
.next {
	position: absolute;
	width: 3.2%;
	height: 0;
	padding-bottom: 3.2%;
	background-image: url(../img/next.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	left: 48.5%;
	bottom: 4%;
	z-index: 1000;
	cursor: pointer;
}
.arrow {
	width: 60%;
	height: 0;
	padding-bottom: 40%;
	background-image: url(../img/arrow.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	margin: 33% auto 0 auto;
	-webkit-animation: shake-vertical 3s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
	   -moz-animation: shake-vertical 3s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
	    -ms-animation: shake-vertical 3s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
	     -o-animation: shake-vertical 3s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
	        animation: shake-vertical 3s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;

}
@-webkit-keyframes shake-vertical {
	0%,
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	10%,
	30%,
	50%,
	70% {
		-webkit-transform: translateY(-15%);
	    transform: translateY(-15%);
	}
	20%,
	40%,
	60% {
		-webkit-transform: translateY(15%);
	    transform: translateY(15%);
	}
	80% {
		-webkit-transform: translateY(15%);
	    transform: translateY(15%);
	}
	90% {
		-webkit-transform: translateY(-15%);
	    transform: translateY(-15%);
	}
}


/*---
Vision-----------*/
#vision {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 48%;
	overflow: hidden;
}
/*Video*/
#block2 {
	width: 100%;
	height: 870px;
}
.black {
	width: 100%;
	height: 0;
	padding-bottom: 48%;
	background: hsla(0, 0%, 0%, 0.3);
}
.nav_box {
	position: absolute;
	width: 100%;
	height: 0;
	padding-bottom: 3%;
	background: hsla(0, 0%, 0%, 0.6);
	top: 0;
	z-index: 1000;
	overflow: hidden;
}
.layout { display: none;}


/*Community / Copyright*/
.community {
	position: absolute;
	width: 2%;
	height: 0;
	padding-bottom: 7%;
	left: 1%;
	bottom: 4%;
	z-index: 1000;
}
.community a {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	margin: 0 0 25% 0; 
	background-size: 100% auto;
	background-repeat: no-repeat;
}
.community a:active { transform: scale(0.9); }
.btn_fb { background-image: url(../img/btns/fb.png); }
.btn_ig { background-image: url(../img/btns/ig.png); }
.btn_art{ background-image: url(../img/btns/art.png); }
.community a:hover { opacity: .7; transition: 0.2s;}


/*---
What We Do-----------*/
#portfolio {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 53%;
	background-image: url(../img/home/1-2.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	overflow: hidden;
}
.item_mob  { display: none; }
.sort {
	position: absolute;
	width: 55%;
	height: 0;
	padding-bottom: 40%;
	color: black;
	top: 12%;
	right: 7%;
}
.box {
	position: relative;
	float: left;
	width: 46%;
	height: 0;
	margin: 0.5% 3.2% 0 0;
	padding-bottom: 35%;
	overflow: hidden;
}
.box span {
	font-size: 1.8vw;
	font-weight: bold;
	font-style: italic;
	color: white;
}
.box .frame {
	width: 98%;
	height: 0;
	padding-bottom: 61%;
	border: 1px solid white;
}
figure {
	position: absolute;
	width: 100%;
	height: 0;
	padding-bottom: 62.5%;
	top: 13%;
	left: -5%;
	z-index: 100;
	overflow: hidden;
}
figure img { width: 100%; cursor: pointer;}


/* Common style */
.grid {
	position: relative;
	clear: both;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 1000px;
	list-style: none;
	text-align: center;
}
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 320px;
	max-width: 480px;
	max-height: 360px;
	width: 48%;
	height: auto;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
figure.effect-apollo {
	display: block;
	background: #3498db;
}

figure.effect-apollo img {
	opacity: 0.95;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

figure.effect-apollo figcaption::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5);
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-105%,0);
}


figure.effect-apollo:hover img {
	opacity: 0.6;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

/*Light*/
figure.effect-apollo:hover figcaption::before {
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,105%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,105%,0);
	cursor: pointer;
}
figure.effect-apollo:hover p {
	opacity: 1;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}


/*---
Logos-----------*/
#logos {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 47%;
	background-image: url(../img/home/1-4.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
}


/*---
Services & Contact-----------*/
#information {
	width: 100%;
	height: 0;
	padding-bottom: 83%;
	background-image: url(../img/home/1-6.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	margin-top: -0.5%;
	padding-top: 5%;
}
#logo, #services, #contact {
	width: 50%;
	margin: 0 auto 3% auto;
	overflow: hidden;
}

/*--Title 2--*/
.title_box_2, .title_box_3, .title_box_4 {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 7%;
	margin: 0 0 3% 0;
}

.title_box_2 .title, .title_box_3 .title, .title_box_4 .title {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 10%;
	overflow: hidden;
}
.title_box_2 span, .title_box_3 span, .title_box_4 span {
	position: absolute;
	color: white;
	font-size: 2.5vw;
	font-weight: bold;
	line-height: 3.2vw;
	letter-spacing: 0.1vw;
	left: 1%;
	z-index: 2;
	text-align: center;
}
.title_box_2 .square, .title_box_3 .square, .title_box_4 .square {
	position: absolute;
	width: 2.5%;
	height: 0;
	padding-bottom: 7%;
	background-color: #00d2ff;
	top: 0;
	left: 0;
}

/*--Logo--*/
.logo_box {
	position: relative;
	width: 90%;
	height: 0;
	padding-bottom: 20%;
	margin: 0 0 0 0;
	overflow: hidden;
}
.dark {
	position: absolute;
	width: 100%;
	height: 0;
	padding-bottom: 30%;
	z-index: 100;
	background: -moz-linear-gradient(left, rgba(22,24,28,1) 0%, rgba(22,24,28,0) 30%, rgba(22,24,28,0) 70%, rgba(22,24,28,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(22,24,28,1) 0%,rgba(22,24,28,0) 30%,rgba(22,24,28,0) 70%,rgba(22,24,28,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(22,24,28,1) 0%,rgba(22,24,28,0) 30%,rgba(22,24,28,0) 70%,rgba(22,24,28,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16181c', endColorstr='#16181c',GradientType=1 ); /* IE6-9 */
}
.slider9 {
	display: block;
	width: 100%;
}

/*--Services--*/
#services ul {
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	overflow: hidden;
}
#services ul li {
	float: left;
	width: 33%;
	height: 0;
	padding-bottom: 20%;
	margin: 0 0 3% 0;
}
#services ul li span {
	color: white;
	font-size: 0.8vw;
	margin: 0 0 2% 0; 
	line-height: 1.2vw;
	font-family: Microsoft JhengHei;
}
#services ul li .item { 
	font-weight: bold; 
	font-size: 1.2vw;
	margin: 0 0 5% 0;
}

/*--Contact--*/
.add {
	width: 100%;
	height: auto;
	overflow: hidden;
}
.mail, .tel {
	float: left;
	width: 50%;
	height: auto;
}
.add_title {
	width: 50%;
	overflow: hidden;
	margin-bottom: 2%;
}
.mail_title, .tel_title {
	float: left;
	width: 100%;
	overflow: hidden;
	margin-bottom: 2%;
}
.add_title img, .mail_title img, .tel_title img {
	float: left;
	width: 9%;
	margin: 0 2% 0 0;
}
.add_title span, .mail_title span, .tel_title span {
	float: left;
	color: white;
	font-size: 1.5vw !important;
	font-weight: bold;
}
 .mail span, .tel span {
	color: white;
	font-size: 0.8vw;
	letter-spacing: 0.1vw;
}


.add .taipei, .add .suzhou {
	float: left;
	width: 45%;
	height: auto;
	margin: 0 5% 3% 0;
}
.add .taipei .tit, .add .suzhou .tit {
	font-size: 1vw;
	font-weight: bold;
	margin: 2% 0 0 0;
	letter-spacing: 0 !important;
	color: white;
}
.add .taipei span, .add .suzhou span {
	color: white;
	font-size: 0.8vw;
	line-height: 1.5vw;
	letter-spacing: 0.1vw;
}

.submit {
	display: block;
	width: 60%;
	height: 0;
	padding-bottom: 7%;
	margin: auto;
	margin-top: 13%;
	overflow: hidden;
}
.submit span {
	float: left;
	width: 70%;
	color: white;
	font-size: 1vw;
	font-weight: bold;
	line-height: 3vw;
	letter-spacing: 0.05vw;
	/* text-align: center; */
}
.btn_submit {
	float: left;
	width: 30%;
	height: 0;
	padding-bottom: 10%;
	text-align: center;
	background-color: #00d2ff;
	color: white;
	font-size: 1.1vw;
	font-weight: bold;
	line-height: 3vw;
	text-decoration: none;
	border-radius: 50px;
	transition: 0.2s;
}
.btn_submit:hover {
	color: #00d2ff;
	background-color: white;
}


/*---
Footer-----------*/
#footer {
	width: 100%;
	height: 0;
	padding-bottom: 4%;
	margin: 4% auto 0 auto;
}
.community_2 {
	width: 7%;
	height: 0;
	padding-bottom: 2.5%;
	margin: 0 auto 0.5% auto;
}
.community_2 a {
	float: left;
	width: 29%;
	height: 0;
	padding-bottom: 29%;
	background-size: 100% auto;
	background-repeat: no-repeat;
	margin: 0 2% 0 2%;
}
#footer span {
	display: block;
	color: white;
	text-align: center;
	font-size: 0.5vw;
	letter-spacing: 0.1vw;
}
.community_2 a:hover { opacity: .7; transition: 0.2s;}
.community_2 a:active { transform: scale(0.9); }



/*---
Pop_Submit-----------*/
.pop {
	width: 40% !important;
	height: auto;
	background-color: white;
	overflow: hidden;
}
.btn_close {
	position: absolute;
	width: 3%;
	height: 0;
	padding-bottom: 3%;
	background-image: url(../img/btns/btn_close_pop.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	top:5%;
	right: 0;
	z-index: 2;
	-webkit-transition: all 0.2s ease-out;
	   -moz-transition: all 0.2s ease;
	     -o-transition: all 0.2s ease;
	        transition: all 0.2s ease-out;
}
.btn_close:hover {
	-webkit-transform: rotate(3.14159rad);      
	   -moz-transform: rotate(3.14159rad);      
	     -o-transform: rotate(3.14159rad); 
	        transform: rotate(3.14159rad);
}

.pop_title {
	position: relative;
	width: 95%;
	height: 0;
	padding-bottom: 10%;
	margin: auto;
}
.pop_title span {
	text-align: left;
	color: #00d2ff;
	font-size: 1.5vw;
}

.name, .email, .subject {
	width: 95%;
	height: 0;
	padding-bottom: 10%;
	text-align: left;
	color: #00d2ff;
	font-size: 1.5vw;
	margin: 0 auto 2% auto;
}
.beeline {
	float: left;
	width: 1%;
	height: 0;
	padding-bottom: 10%;
	background-color: #00d2ff;
}

/*Name*/
.name span {font-size: 1vw;margin: 0 0 0.5%% 0;}
.first_name_box, .last_name_box {
	float: left;
	width: 50%;
	height: 0;
	padding-bottom: 10%;
}
.first_name, .last_name {
	width: 100%;
	height: 0;
	padding-bottom: 10%;
}
.mail_box {
	width: 100%;
	height: 0;
	padding-bottom: 5%;
	overflow: hidden;
}
.first_name input, .last_name input {
	float: left;
	width: 95%;
	height: 0;
	padding-bottom: 5%;
	border: none;
	background-color: #ededed;
	text-align: center;
	padding-top: 5%;
	font-size: 1vw;
	color: #00d2ff;
}
.tip {
	width: 100%;
	height: 0;
	padding-bottom: 5%;
	font-size: 0.6vw !important;
	color: #bbbbbb;
}

/*Email Address*/
.email span {font-size: 1vw;margin: 0 0 0.5%% 0;}
.email input {
	float: left;
	width: 97%;
	height: 0;
	padding-bottom: 5%;
	border: none;
	background-color: #ededed;
	text-align: center;
	padding-top: 2.5%;
	font-size: 1vw;
	color: #00d2ff;
}
.mail_box .beeline {
	float: left;
	width: 0.5%;
	height: 0;
	padding-bottom: 6%;
	background-color: #00d2ff;
}

/*Subject*/
.subject_box {
	width: 100%;
	height: 0;
	padding-bottom: 5%;
	overflow: hidden;
}
.subject span {font-size: 1vw;margin: 0 0 0.5%% 0;}
.subject input {
	float: left;
	width: 97%;
	height: 0;
	padding-bottom: 5%;
	border: none;
	background-color: #ededed;
	text-align: center;
	padding-top: 2.5%;
	font-size: 1vw;
	color: #00d2ff;
}
.subject_box .beeline {
	float: left;
	width: 0.5%;
	height: 0;
	padding-bottom: 6%;
	background-color: #00d2ff;
}

/*Message*/
.message {
	width: 95%;
	height: auto;
	text-align: left;
	color: #00d2ff;
	font-size: 1.5vw;
	margin: 0 auto 2% auto;
}
.message_box {
	width: 100%;
	height: auto;
	overflow: hidden;
}
.message span {font-size: 1vw;margin: 0 0 0.5% 0;}
.message_box input {
	float: left;
	width: 90%;
	height: 0;
	padding-bottom: 0%;
	border: none;
	background-color: #ededed;
	text-align: center;
	padding-top: 5%;
	font-size: 1vw;
	color: #00d2ff;
}
textarea {
	width: 97%;
	height: auto;
	background-color: #ededed;
	border: none;
	color: #00d2ff;
	font-size: 1vw;
	padding: 1%;
}
.btn_submit_pop {
	width: 17%;
	height: 0;
	padding-bottom: 6%;
	text-align: center;
	background-color: #00d2ff;
	color: white;
	font-size: 1.1vw;
	font-weight: bold;
	line-height: 2.5vw;
	text-decoration: none;
	border-radius: 50px;
	border-style: none;
	margin: 2% auto 3% auto;
}
.btn_submit_pop:active { transform: scale(0.9); }

/*--Done,Error--*/
.pop_02 {
	position: relative;
	width: 25% !important;
	height: auto;
	background-color: white;
	overflow: hidden;
}

.btn_close_02 {
	position: absolute;
	width: 5%;
	height: 0;
	padding-bottom: 5%;
	background-image: url(../img/btns/btn_close_pop.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	top: 10%;
	right: 2%;
	z-index: 2;
	-webkit-transition: all 0.2s ease-out;
	   -moz-transition: all 0.2s ease;
	     -o-transition: all 0.2s ease;
	        transition: all 0.2s ease-out;
}
.btn_close_02:hover {
	-webkit-transform: rotate(3.14159rad);      
	   -moz-transform: rotate(3.14159rad);      
	     -o-transform: rotate(3.14159rad); 
	        transform: rotate(3.14159rad);
}

.pop_02 span {
	width: 90%;
	height: auto;
	color: #00d2ff;
	font-size: 1vw;
	font-weight: bold;
	text-align: center;
	line-height: 1.5vw;
	padding: 5%;
	margin: auto;
}
.btn_OK {
	width: 20%;
	height: auto;
	padding: 2%;
	text-align: center;
	background-color: #00d2ff;
	color: white;
	font-size: 1.1vw;
	font-weight: bold;
	text-decoration: none;
	border-radius: 50px;
	border: 2px #00d2ff solid;
	margin: 2% auto 3% auto;
	transition: 0.2s;
	opacity: .5;
}
.btn_OK:hover { opacity: 1; }
.btn_ok:active { transform: scale(0.9); }