@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

html {
	width: 100%;
	height: 100%
}

body {
	font-family: "微軟正黑體","Noto Sans TC","Microsoft JhengHei",sans-serif;
	-webkit-overflow-scrolling: touch;
	overflow-x: hidden;
	transition: all 0.5s ease;
	height: inherit
}

a {
	color: #000;
}

body.vis {
	transition: all 0.5s ease;
}

#word-logo {
    
	width: 15%;
}

#auto-logo {
	

    
    position: fixed;
    left: 50px;
    opacity: 0;
    z-index: 10;
    top: 15px;
    cursor: pointer;
    
    
    
    
    
    
}

#indexbox {
	background: url(../images/BG.jpg);
	background-size: cover;
	height: 100vh;
	background-position: center;
}

.center {
	text-align: center;
}

.r-word {
	color: #f00;
}

.b-word {
	margin: 0;
	font-size: 2rem;
	line-height: 7px;
	font-weight: bold;
}

.r-word {
    
	margin: 0;
	font-size: 2rem;
	color: #e50012;
	font-weight: bold;
}

header#header {
	height: 132px;
	width: 100%;
    transition: all 0.5s ease;
    background: #fff;
	
}

header#header .container {
    
    height: inherit;
}






#header.vis {
    
	height: 132px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
    display: block;
	transition: all 0.5s ease;
	
}



header#header.inside {
	display: block !important;
}

header#header.sm {
	height: 80px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	background: #fff;
	transition: all 0.5s ease;
}

#contact .col-md-7 {
	padding: 0 70px 0 50px;
}

header#header.vis {
	height: 132px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	transition: all 0.5s ease;
	z-index: 10;
	background: #fff;
	opacity: 1;
}

figure#logo2 {
	margin: 0;
	padding-left: 40px;
	opacity: 0;
	transition: all 0.5s ease;
	cursor: pointer;
}

figure#logo2.vis {
	margin: 0;
	transition: all 0.5s ease;
	padding-left: 40px;
	opacity: 1;
	cursor: pointer;
}

header#header.sm img {
	width: 5%;
}



header#header .row {
	height: inherit;
}

figure#logo {
	left: 50px;
    transform-origin: left;
	cursor: pointer;
	position: fixed;
    z-index: 12;
	top: 25px;
	transition: all 0.5s ease;
    width: 25%;
}

a.index-logo img {
    
    transform: translateX(-108px);
    transition: all 0.5s ease;
}

#red {
	width: 27%;
	transform-origin: left;
	transition: all 0.5s ease;
}

#logotype {
	transform-origin: left;
	transition: all 0.8s ease;
	opacity: 1;
}



nav#nav.vis {
	position: fixed;
	top: 132px;
	width: 100%;
	z-index: 10;
	transition: all 0.5s ease;
}

nav#nav {
	background: #e40011;
	padding: 2px 0 5px 0;
	margin-top: 0;
	position: relative;
	height: 55px;
	transition: all 0.5s ease;
}

nav#nav > .row {
	height: inherit;
}



nav#nav ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

nav#nav ul li {
	display: inline-block;
}

nav#nav ul li a {
	color: #fff;
}

nav#nav ul li a span {
	display: block;
	transform: translateY(0);
	transition: all 0.5s ease;
}

nav#nav ul li a:hover span {
	display: block;
	transform: translateY(-29px);
	transition: all 0.5s ease;
}

nav#nav .row div:first-child  , nav#nav .row div:nth-child(2) {
	text-align: right;
}

#sliderbox ul li {
	float: left;
	padding: 0 8px;
}

#sliderbox {
	overflow: hidden;
	height: 100vh;
	background: #fff;
}

nav#nav .row div:first-child li {
	margin: 0;
	width: 150px;
	text-align: center;
	overflow: hidden;
	height: 29px;
	line-height: 29px;
}

ul.roup {
	margin-right: 35px !important;
}

ul.roup li {
	margin: 0 5px;
}

#sliderbox ul  , ul.project-slider-box {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#sliderbox .owl-theme .owl-dots .owl-dot.active span, #sliderbox .owl-theme .owl-dots .owl-dot:hover span ,

 .project-slider-box.owl-theme .owl-dots .owl-dot.active span,  .project-slider-box.owl-theme .owl-dots .owl-dot.active span {
	background: #e40011;
	border: none;
	width: 15px;
	height: 15px;
}

#sliderbox  .owl-theme .owl-dots .owl-dot span  , .project-slider-box.owl-theme .owl-dots .owl-dot span {
	background: #eee;
	border: none;
	width: 15px;
	height: 15px
}

section#master-box {
	background: #fff;
	padding-top: 0px;
}

figure#master-logo {
	margin: 0;
	padding: 80px 0 80px 80px;
}

#project-box i {
	position: absolute;
	color: #e40011;
	right: 0;
	top: -35px;
	font-size: 2rem;
	cursor: pointer;
	333;
}

#project-wrap {
	background: rgba(0,0,0,.8);
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	transition: all 0.5s ease;
	left: 0;
	z-index: -1;
	opacity: 0
}

#project-wrap.vis {
	background: rgba(0,0,0,.8);
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	transition: all 0.5s ease;
	left: 0;
	z-index: 10;
	opacity: 1
}

aside#project-box {
	position: fixed;
	top: 50%;
	left: 50%;
	background-color: #fff;
	z-index: 11;
	transform: translate(-50%,-50%);
	width: 60%;
	min-height: 40%;
	border-radius: 15px;
	padding: 7%;
}

.service-list p {
	margin: 0;
	text-align: center;
}

.project-slider-box.owl-theme .owl-controls {
	margin-top: 0;
	bottom: 0;
	position: absolute;
	width: 100%;
}

figure#services-else {
    
	margin-top: 0;
	text-align: center;
	position: relative;
	margin-bottom: 0;
	padding: 25vh 0 25vh 0;
}

section#about {
    
	background: #fff;
	padding-top: 240px;
    
}

.sortable__nav li {
    margin: 0 18px;
}

section#projectbox {
	background: #fff;
	padding-top: 100px;
}

main#main {
	/*margin-top: 312px;*/
	margin-top: calc( 10vh + 55px );
	padding-bottom: 10vh;
}

.pr-title {
	color: #e40011;
	margin-bottom: 15px;
	font-size: 1.25rem;
	font-weight: 400;
}

.pr-main {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: justify;
}

section#footer {
	background: #fff;
}

.service-word {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20%;
	transform: translate(-50%,-50%);
}

#S1 , #S2 , #S3 , #S4 , #S5 {
	cursor: pointer;
}

#S1 , #S2 , #S3 , #S4 , #S5 , path#XMLID_545_ , path#XMLID_547_ , path#XMLID_542_ , path#XMLID_540_ , path#XMLID_538_ {
	opacity: 0;
}

@-webkit-keyframes ss {
    
   
	90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}



#S1 {
}

path#XMLID_547_ {
}

#S2 {
}

path#XMLID_545_ {
}

#S3 {
}

path#XMLID_542_ {
}

#S4 {
    
}

path#XMLID_540_ {
}

#S5 {
    
}

path#XMLID_538_ {
    
}

.service-word p:first-child ,  #m-service-else .row div p:first-child {
    
	color: #f00;
	margin: 0;
	font-size: 1.05rem;
}

.service-word p:last-child {
	color: #000;
}

ul.contact-message {
	padding: 0;
	margin: 0 0 25px 0;
	list-style-type: none;
	line-height: 2em;
}

.phone {
	color: #e50012;
	margin: 15px 0;
}

.footer-text {
	background: #e50012;
    /*margin-top: 100px;*/
}

.footer-logo {
	text-align: center;
	margin-top: 46px;
	margin-bottom: 46px;
}

footer {
	text-align: center;
	color: #e50012;
}

#fixed-menu {
	padding: 0;
	margin: 0;
	list-style-type: none;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	right: 15px;
	opacity: 0;
	transition: all 0.5s ease;
	text-align: center;
	z-index: 10;
}

#fixed-menu.vis {
	padding: 0;
	margin: 0;
	list-style-type: none;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
	opacity: 1;
	transition: all 0.5s ease;
	text-align: center;
	z-index: 10;
}


#fixed-menu li {
	margin-bottom: 10px;
}

#fixed-nav {
	position: fixed;
	width: 11vw;
	height: 100%;
	left: -15vw;
	background: rgba(255,255,255,0.60);
	top: 0px;
	padding-top: 25vh;
	z-index: 11;
	transition: all 0.5s ease;
}

#fixed-nav.vis {
    
	position: fixed;
	width: 11vw;
	height: 100%;
	left: 0;
	background: rgba(255,255,255,0.60);
	top: 0px;
	padding-top: 25vh;
	padding-left: 15px;
	padding-right: 15px;
	z-index: 11;
	transition: all 0.5s ease;
}

#fixed-nav ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#fixed-nav ul li {
	padding: 0 0 0 15px;
	margin: 6px 0;
}

#fixed-nav ul li a {
	color: #5d5d5d;
}
#fixed-nav ul li a:hover {
	color: #e50012;
}

#touchScroller {
	width: 100%;
	min-height: 330px;
	position: relative;
}

#touchScroller div.scrollableArea .img-box img {
	max-width: 100%;
	height: auto;
}

#touchScroller div.scrollableArea .img-box {
	position: relative;
	width: 450px;
	height: 450px;
	float: left;
	margin: 0;
	padding: 0 1px;
				/* If you don't want the images in the scroller to be selectable, try the following
				   block of code. It's just a nice feature that prevent the images from
				   accidentally becoming selected/inverted when the user interacts with the scroller. */
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.img-box a:first-child {
	position: absolute;
	top: 0;
	left: 0;
}

.img-box a:nth-child(2) {
	bottom: 0;
	left: 0;
	width: 50%;
	display: block;
	position: absolute;
}

.img-box a:nth-child(3) {
	bottom: 0;
	left: 50%;
	width: 50%;
	position: absolute;
}

#foot_pic {
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: -1;
}

section#contact {
	background-color: #fff;
	padding: 25px 0 125px;
}

.sp-slide {
	overflow: hidden;
}

section#services {
	    background: #fff;
        padding-top: 240px;
}

.sp-slide img {
	animation: move 10s ease alternate infinite;
	transform: scale(1) rotate(0.0001deg);
	width: 100%;
}

@-webkit-keyframes move {
    
	0% {
		-webkit-transform: scale(1.1) rotate(0.0001deg);
		transform: scale(1.1) rotate(0.0001deg)
	}

	100% {
		-webkit-transform: scale(1) rotate(0.0001deg);
		transform: scale(1) rotate(0.0001deg)
	}
}

@-moz-keyframes move {
    
	0% {
		-webkit-transform: scale(1.1) rotate(0.0001deg);
		transform: scale(1.1) rotate(0.0001deg)
	}

	100% {
		-webkit-transform: scale(1) rotate(0.0001deg);
		transform: scale(1) rotate(0.0001deg)
	}
}

#projectbox > .container {
	min-height: 500px;
	background: #fff;
	padding: 15px 0;
}

#box {
	height: 80vh;
	overflow: hidden;
}

#list img {
	width: 100%;
	height: auto;
}

#list ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#list ul li {
	padding: 0 10px;
	margin-bottom: 22px;
	max-height: 240px;
	overflow: hidden;
	-webkit-overflow: hidden;
	-moz-overflow: hidden;
	-khtml-overflow: hidden;
	border-radius: 7px;
}

#list ul li:hover {
	padding: 0 10px;
	margin-bottom: 22px;
	max-height: 240px;
	overflow: hidden;
	-webkit-overflow: hidden;
	-moz-overflow: hidden;
	-khtml-overflow: hidden;
	border-radius: 7px;
}

#list ul li img, .card2 img {
	border-radius: 7px;
	-webkit-border-radius: 7px;
    -moz-border-radius: 7px;
	-khtml-border-radius: 7px;
	transition: all 0.5s ease;
}

#list ul li img:hover, .card2 img:hover {
	border-radius: 7px;
	-webkit-border-radius: 7px;
    -moz-border-radius: 7px;
	-khtml-border-radius: 7px;
	transition: all 0.5s ease;
	transform: scale(1.05);
}

#list ul li a , .card2 a {
	display: block;
	overflow: hidden;
	position: relative;
	border-radius: 7px;
	-webkit-border-radius: 7px;
    -moz-border-radius: 7px;
	-khtml-border-radius: 7px;
}

#list ul li a:hover , .card2 a:hover {
	display: block;
	overflow: hidden;
	position: relative;
	border-radius: 7px;
	-webkit-border-radius: 7px;
    -moz-border-radius: 7px;
	-khtml-border-radius: 7px;
}



#main .col-md-8 img {
	border-radius: 7px;
	-webkit-border-radius: 7px;
    -moz-border-radius: 7px;
	-khtml-border-radius: 7px;
}

.title {
	padding: 50px 0 50px 40px;
}

.title img {
	width: 11.85%;
}

.pr-list-name , .card-infos {
	text-align: center;
	color: #333;
	position: absolute;
	background: rgba(255,255,255,.85) !important;
	bottom: -64px;
	left: 0;
	width: 100%;
	padding: 20px;
	border-radius: 0px 0px 6px 6px!important;
	transition: all 0.5s ease;
}

#list ul li a:hover .pr-list-name ,.card2 a:hover .card-infos {
	border-radius: 7px;
	-webkit-border-radius: 7px;
    -moz-border-radius: 7px;
	-khtml-border-radius: 7px;
	bottom: 0px;
	transition: all 0.5s ease;
}

.more {
	text-align: center;
	margin-top: 25px;
}

.more a:hover {
	color: #e50012;
	text-decoration: none;
}

#about .col-md-4 {
	padding: 0 50px;
}

#about .col-md-8 {
	padding: 0 50px 0 70px;
}

.more a {
	color: #333;
	text-decoration: none;
	font-size: 1rem;
	padding: 0 10px;
	position: relative;
}

.more a:after {
	content: '▾';
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
}

a.index-logo {
	padding-left: 0px;
    opacity: 0;
    transition: all 0.5s ease;
}



.project-list {
	margin-top: 40px;
}

.card2 a {
	text-decoration: none;
	color: #333;
}

@media (max-width:769px) {
    
    
   #red {
	   width: 36%!important;
	}
    
	nav#nav .row div:first-child, nav#nav .row div:nth-child(2) {
		text-align: center;
	}

	figure#logo img {
		max-width: 50%;
		margin-top: 0;
	}

	figure#logo img {
		width: 50%;
		height: auto;
	}
	
	#logotype {
		/*display: none;*/
	}
	
	.sortable__nav {
		display: none!important;
	}

	nav#nav ul li a span {
		color: #fff;
	}

	figure#master-logo {
		padding: 50px 0 50px 80px;
	}

	nav#nav ul li a {
		color: #fff;
		font-size: 0.8rem;
	}

	nav#nav .row div:first-child li {
		margin: 0 5px;
		width: inherit;
		padding: 5px 0;
	}

	figure#logo2 {
		width: 100%;
		height: auto;
	}

	#fixed-menu {
		/*display: none;*/
	}

	aside#project-box .row div:first-child {
		order: 2;
	}

	aside#project-box .row div:last-child {
		order: 1;
	}
    
    .animateme.vis {
        transform:translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
        transition: all 0.5s ease;
        
    }

	aside#project-box {
		width: 90%;
	}

	.row.service-list {
		padding: 0 15px;
	}

	div#m-service-else {
		margin-top: 25vh;
		padding: 0 15px;
	}

	nav#nav.vis ul li a {
		color: #3a3a3a;
		font-size: 0.8rem;
	}

	#contact .row div:first-child {
		order: 2;
	}

	#contact .row div:last-child {
		order: 1;
	}

	.footer-text {
		background: #e50012;
		margin-top: 0px;
		padding: 5px 35px;
	}

	footer {
		text-align: center;
		color: #e50012;
		font-size: 0.5rem;
		padding-bottom: 10px;
	}

	body.vis {
		margin-left: 0;
		transition: all 0.5s ease;
	}

	header#header img {
		width: 40%;
	}
    
    
    #header.vis .index-logo {
        
        opacity: 1;
        transition: all 0.5s ease;
    }
    
   

	#word-logo {
		width: 40% !important;
	}

	nav#nav {
		padding: 0;
		display: none !important;
	}

	.title img {
		width: 30%;
	}

	main#main {
		margin-top: 50px;
		padding-bottom: 10vh;
	}

	.pr-main {
		margin-bottom: 15px;
	}

	#fixed-nav.vis {
		position: fixed;
		width: 50vw;
		height: 100%;
		left: 0;
		background: rgba(255,255,255,.85);
		/*top: 132px;*/
		z-index: 11;
		transition: all 0.5s ease;
	}

	#fixed-nav {
		position: fixed;
		width: 50vw;
		height: 100%;
		left: -50vw;
		background: rgba(255,255,255,.85);
		/*top: 132px;*/
		z-index: 11;
		transition: all 0.5s ease;
	}

	

	#sliderbox {
		overflow: hidden;
		margin-top: 0;
		height: auto;
	}

	#contact .col-md-7 {
		padding: 15px;
	}
    
    figure#logo {
        
     width: inherit;
}
    
    .title {
    padding: 25px;
}
    
    #about .col-md-4 {
    padding: 0 30px;
}
	#about .col-md-8 {
		padding: 0 30px;
	}
    
    header#header {
      display: none;
}
    #auto-logo img
    
    {
        width: 50%;
}
    
    #auto-logo {
        
        left: 15px;
    }
    
	[data-sjsel] {
	padding: 0 30px;
}
	
	section#contact {
	padding: 100px 0 75px 0;
}
	section#about {
    
	padding-top: 100px;
    
}
	section#services {
        padding-top: 100px;
}
	.plr_portfolio {
	padding-left: 30px!important;
	padding-right: 30px!important;
}
	.prl_portfolio {
	padding-left: 30px!important;
	padding-right: 30px!important;
}
	.plr_contact {
	padding-left: 30px!important;
	padding-right: 30px!important;
}
	.prl_contact {
	padding-left: 30px!important;
	padding-right: 30px!important;
}
	
	#list ul li {
		padding: 0 30px;
	}
	
	.iframe {
    max-height: 220px!important;
}
	#foot_pic {
		height: 25vh;
		overflow: hidden;
	}
	#foot_pic img {
		width: 200%;
		margin-left: -50%;
}

	
	#list ul li img:hover, .card2 img:hover, #list ul li img, .card2 img {
	border-radius: 7px;
	-webkit-border-radius: 7px;
    -moz-border-radius: 7px;
	-khtml-border-radius: 7px;
	transition: all 0.5s ease;
	transform: scale(1.0)!important;
		
}
	#list ul li:hover { padding: 0 30px;}
	
	.pr-list-name , .card-infos {
	bottom: 0px;
}
	
	#box {
	height: 120vh;
	overflow: hidden;
}
	
 }

	
}

	.plr_portfolio {
	padding-left: 50px;
	padding-right: 15px;
}
	.prl_portfolio {
	padding-left: 70px;
	padding-right: 50px;
}

.plr_contact {
	padding-left: 70px;
	padding-right: 50px;
}

.iframe {
	border: 0px solid #9AC460;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    width: 100%;
    max-height: 382px;
    transition: all 0.5s ease-in-out 0s;
}
.iframe iframe {
	width: 100%;
}

[data-sjsel] {
		max-height: 240px;
		overflow: hidden;
		border-radius: 7px;
	-webkit-border-radius: 7px;
    -moz-border-radius: 7px;
	-khtml-border-radius: 7px;
}