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

/*---
Main Title-----------*/
.title_box {
	width: 50%;
	padding-top: 18%;
	margin: 0 0 0 8%;
}
.title { display: block; }
.title_box span {
	position: absolute;
	font-family: Microsoft YaHei, Segoe UI, Tahoma, Arial, Verdana, sans-serif;
	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: 140%;
	height: 0;
	padding-bottom: 96%;
	top: 15%;
	left: -20%;
	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;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}



/*---
Second Title-----------*/
.title_box {
	width: 70%;
	padding-top: 5%;
	margin: 0 auto 0 auto;
}
.title { display: none;}
.title_mob {
	position: relative;
	width: 85%;
	height: auto;
	margin:  0 auto 3% auto;
	overflow: hidden;
}
.title_box span {
	position: absolute;
	color: white;
	font-size: 11vw;
	font-weight: bold;
	line-height: 12vw;
	letter-spacing: 0.3vw;
	left: 3.2%;
	z-index: 2;
}
.square {
	width: 8%;
	height: 0;
	padding-bottom: 23%;
	background-color: #00d2ff;
}
.next {
	position: absolute;
	width: 9%;
	height: 0;
	padding-bottom: 9%;
	background-image: url(../img/next.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	left: 45.5%;
	bottom: 2.5%;
	z-index: 1000;
	cursor: pointer;
	opacity: 0.5;
}
.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: 190%;
	overflow: hidden;
}
.black {
	position: absolute;
	width: 100%;
	height: 0;
	padding-bottom: 180%;
	background-image: url(../img/home/dark_mob.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	top: 6.5%;
	z-index: 20;
}
.nav_box {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 12%;
	overflow: hidden;
}
header {
	position: fixed;
	width: 100%;
	height: 0;
	padding-bottom: 12%;
	background: hsla(0, 0%, 0%, 0.8);
	top: 0;
	z-index: 1000;
	overflow: hidden;
}
.logo {
	position: fixed;
	width: 22%;
	height: 0;
	padding-bottom: 8%;
	background-image: url(../img/logo.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	top: 1%;
	left: 2%;
	z-index: 10000;
}

/*Video*/
.layout {
	position: absolute;
	width: 100%;
	height: 0;
	padding-bottom: 43%;
	color: white;
	font-size: 17vw;
	font-weight: bold;
	text-align: center;
	top: 53%;
	z-index: 100;
}


/*Community / Copyright*/
.community {
	position: absolute;
	width: 30%;
	height: 0;
	padding-bottom: 11%;
	top: 84%;
	left: 35%;
	bottom: 4%;
	z-index: 1000;
	opacity: .5;
}
.community a {
	float: left;
	width: 29%;
	height: 0;
	padding-bottom: 30%;
	background-size: 100% auto;
	background-repeat: no-repeat;
	margin: 0 2% 0 2%;
}
.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); }



/*---
What We Do-----------*/
#portfolio {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 187%;
	background-image: url(../img/home/1-2_mob.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	overflow: hidden;
}
.item_pc  { display: none; }
.sort {
	width: 78%;
	height: 0;
	padding-bottom: 160%;
	color: black;
	margin: 3% auto 0 auto;
	overflow: hidden;
}
.box {
	position: relative;
	width: 100%;
	height: 0;
	margin: 0 0 3% 0;
	padding-bottom: 45%;
}
.sort figcaption {
	position: absolute;
	width: 100%;
	top: 30%;
	left: 2.5%;
	z-index: 100;
	overflow: hidden;
}
.sort img { width: 100%;}
.sort span {
	font-size: 6vw;
	font-weight: bold;
	font-style: italic;
	color: white;
}
.sort .frame {
	width: 98%;
	height: 0;
	padding-bottom: 30%;
	border: 1px solid white;
	margin-top: -5.5%;
}


/*---
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: auto;
	background-image: url(../img/home/1-6_mob.jpg);
	background-size: 100% auto;
	background-repeat: repeat-y;
	margin-top: -0.5%;
	padding-top: 5%;
}
#logo, #services, #contact {
	width: 100%;
	margin: 0 auto 3% auto;
	overflow: hidden;
	padding-top: 4%;
}

/*--Title 2--*/
.title_box_2 {
	position: relative;
	width: 80%;
	height: 0;
	padding-bottom: 12%;
	margin: 0 auto 3% auto;
	overflow: hidden;
}
.title_box_3 {
	position: relative;
	width: 42%;
	height: 0;
	padding-bottom: 12%;
	margin: 0 auto 5% auto;
	overflow: hidden;
}
.title_box_4 {
	position: relative;
	width: 42%;
	height: 0;
	padding-bottom: 12%;
	margin: 0 auto 5% auto;
}


.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: 10vw;
	font-weight: bold;
	line-height: 11vw;
	/* letter-spacing: -0.4vw; */
	left: 3%;
	z-index: 2;
}
.title_box_2 .square {
	position: absolute;
	width: 6%;
	height: 0;
	padding-bottom: 18%;
	background-color: #00d2ff;
	top: 0;
	left: 0;
}
.title_box_3 .square {
	position: absolute;
	width: 10%;
	height: 0;
	padding-bottom: 30%;
	background-color: #00d2ff;
	top: 0;
	left: 0;
}
.title_box_4 .square {
	position: absolute;
	width: 11%;
	height: 0;
	padding-bottom: 28%;
	background-color: #00d2ff;
	top: 0;
	left: -1%;
}


/*--Logo--*/
.logo_box {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 25%;
	margin: 0 0 7% 0;
	overflow: hidden;
}
.dark {
	position: absolute;
	width: 100%;
	height: 0;
	padding-bottom: 25%;
	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%;
}
.slide img {
	display: block;
	width: 90%;
}

/*--Services--*/
#services ul {
	width: 92%;
	height: auto;
	margin: 0 auto 0 auto;
	overflow: hidden;
}
#services ul li {
	float: left;
	width: 49%;
	height: auto;
	margin: 0 0 9% 1%;
}
#services ul li span {
	color: white;
	font-size: 3.5vw;
	margin: 0 0 2% 0;
	line-height: 5vw;
}
#services ul li .item {
	font-weight: bold;
	font-size: 4vw;
	margin: 0 0 5% 0;
}

/*--Contact--*/
.add {
	width: 80%;
	height: auto;
	margin: auto;
}
.mail, .tel {
	/* float: left; */
	width: 80%;
	height: auto;
	margin: 0 auto 4% auto;
}

.add_title  {
	width: 100%;
	height: auto;
	overflow: hidden;
}
.mail_title, .tel_title {
	float: left;
	width: 100%;
	overflow: hidden;
}
.add_title img {float: left;width: 9%;margin: 0 1% 0 0;}
.mail_title img, .tel_title img {
	float: left;
	width: 9%;
	margin: 0 2% 0 0;
}
.add_title span, .mail_title span, .tel_title span  {
	color: white;
	font-size: 6vw !important;
	font-weight: bold;
	line-height: 10vw;
	letter-spacing: 0.5vw !important;
	margin: -1.5% 0 0 11%;
}

.mail span, .tel span {
	color: white !important;
	font-size: 4.5vw;
	line-height: 9vw;
	letter-spacing: 0.1vw;
	text-decoration: none;
}


.add .taipei, .add .suzhou {
	width: 100%;
	height: auto;
	margin: 0 0 6% 0;
}
.add .taipei .tit, .add .suzhou .tit {
	font-size: 5vw;
	font-weight: bold;
	margin: 2% 0 2% 0;
	letter-spacing: 0 !important;
	color: white;
}
.add .taipei span, .add .suzhou span {
	color: white;
	font-size: 3.5vw;
	line-height: 5vw;
	letter-spacing: 0.1vw;
}

.submit {
	display: block;
	width: 80%;
	height: auto;
	margin: auto;
	margin-top: 5%;
	overflow: hidden;
}
.submit span {
	width: 100%;
	color: white;
	font-size: 4.1vw;
	font-weight: bold;
	line-height: 6vw;
	text-align: center;
}
.btn_submit {
	width: 45%;
	text-align: center;
	background-color: #00d2ff;
	color: white;
	font-size: 6vw;
	font-weight: bold;
	padding: 4%;
	text-decoration: none;
	border-radius: 50px;
	margin: 6% auto 0 auto;
	text-align: center;
}
.btn_submit:hover {
	color: #00d2ff;
	background-color: white;
}


/*---
Footer-----------*/
#footer {
	width: 100%;
	height: 0;
	padding-bottom: 22%;
	margin: 11% auto 0 auto;
}
.community_2 {
	width: 30%;
	height: 0;
	padding-bottom: 9%;
	margin: 10% auto 3% 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%;
}
.community_2 a:active { transform: scale(0.9); }
#footer span {
	display: block;
	color: white;
	text-align: center;
	font-size: 3vw;
	letter-spacing: 0.1vw;
}



/*---
Pop_Submit-----------*/
.pop {
	width: 95% !important;
	height: auto;
	background-color: white;
	overflow: hidden;
}
.btn_close {
	position: absolute;
	width: 7%;
	height: 0;
	padding-bottom: 7%;
	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: 100%;
	height: 0;
	padding-bottom: 10%;
	margin: 0 auto 5% auto;
}
.pop_title span {
	text-align: left;
	color: #00d2ff;
	font-size: 6vw;
}

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

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

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

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

/*Message*/
.message {
	width: 100%;
	height: auto;
	text-align: left;
	color: #00d2ff;
	font-size: 5vw;
	margin: 0 auto 2% auto;
}
.message_box {
	width: 100%;
	height: auto;
	overflow: hidden;
}
.message span {font-size: 5vw;margin: 0 0 1% 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: 5vw;
	color: #00d2ff;
}
textarea {
	width: 96%;
	height: auto;
	padding: 2%;
	border: none;
	color: #00d2ff;
	background: #ededed;
	font-size: 5vw;
}
.btn_submit_pop {
	width: 40%;
	height: 0;
	padding-bottom: 15%;
	text-align: center;
	background-color: #00d2ff;
	color: white;
	font-size: 6vw;
	font-weight: bold;
	line-height: 12vw;
	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: 95% !important;
	height: auto;
	background-color: white;
	overflow: hidden;
}

.btn_close_02 {
	position: absolute;
	width: 7%;
	height: 0;
	padding-bottom: 7%;
	background-image: url(../img/btns/btn_close_pop.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	top: 10%;
	right: 5%;
	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 {

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