@charset "UTF-8";

*,:after,:before {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box
}

Element {
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-o-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box
}

Element {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box
}

html {
	box-sizing: border-box;
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%
}

body,button,input,select,textarea {
	margin: 0;
	padding: 0;
	color: #656565;
	font-size: 16px;
	font-family: "微軟正黑體","Helvetica Neue",Helvetica,Arial,sans-serif;
	line-height: 1.8
}

body {
	position: relative;
	overflow-x: hidden;
	overflow-y: scroll;
	margin-bottom: 889px;
	height: 100%;
	background-color: #333;
	counter-reset: item;
	-webkit-overflow-scrolling: touch
}

body.blur {
	position: fixed;
	top: 0;
	left: 0;
	overflow-y: hidden;
	width: 100%;
	height: 100%
}

.news_table td,.news_table th {
	padding: 5px 10px;
	text-align: center
}

.news_table th {
	background: #333;
	color: #fff
}

.news_table tr:nth-child(even) td {
	background: #eee
}

.blur #banner,.blur #main,.blur #mastfoot,.blur #site-logo {
	-webkit-filter: blur(3px);
	filter: blur(3px)
}

body::-webkit-scrollbar-track {
	background-color: #fff
}

body::-webkit-scrollbar {
	width: 5px;
	background-color: #fff
}

body::-webkit-scrollbar-thumb {
	border: 5px solid #fad029;
	background-color: #fff
}

article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {
	display: block
}

audio,canvas,progress,video {
	display: inline-block;
	vertical-align: baseline
}

audio:not([controls]) {
	display: none;
	height: 0
}[hidden],template {
	display: none!important
}

span.bigletter {
	position: absolute;
	z-index: 3;
	display: block;
	padding-bottom: 40px;
	color: #fad029;
	font-weight: 700;
	font-size: 120px;
	font-family: "Noto Serif TC","Helvetica Neue",Helvetica,Arial,sans-serif;
	line-height: 1
}

a {
	color: #333;
	text-decoration: none;
	background-color: transparent;
	transition: all 350ms ease
}

a:active,a:focus,a:hover {
	outline: 0
}

img {
	height: auto;
	max-width: 100%;
	border: 0
}

h1,h2,h3,h4,h5,h6 {
	clear: both;
	color: #333;
	font-weight: 400;
	font-family: "微軟正黑體","Helvetica Neue",Helvetica,Arial,sans-serif;
	line-height: 1.2
}

h1 {
	margin: .67em 0;
	font-size: 2em
}

h5 {
	margin-bottom: 10px;
	font-size: 27px
}

h5::before {
	top: 18px
}

h3.section-title {
	font-size: 38px
}

p.section-subtitle {
	margin: 0 0 25px;
	color: #333;
	font-weight: 500;
	font-size: 26px;
	line-height: 1.3
}

p {
	margin-top: 0;
	margin-bottom: 1em
}

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

ol {
	list-style: none;
	margin-top: -15px;
	margin-left: 0
}

ul li i {
	padding-right: 10px;
	color: #eecd4b
}

li>ol,li>ul {
	margin-bottom: 0;
	margin-left: 1.5em
}

ol li {
	margin-bottom: -35px;
	counter-increment: item
}

ol li::before {
	position: relative;
	top: 10px;
	display: inline-block;
	margin-right: 10px;
	min-width: 35px;
	color: #fad029;
	content: counter(item);
	font-weight: 700;
	font-size: 48px
}

table {
	margin: 0 0 1.5em;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0
}

td,th {
	padding: 0
}

dt {
	font-weight: 700
}

dd {
	margin: 0 1.5em 1.5em
}

figure {
	margin: 1em 0
}

blockquote {
	margin-top: 30px;
	margin-bottom: 35px;
	padding: 5px 0 5px 20px;
	border-left: 4px solid #fad029;
	font-style: italic;
	font-size: 18px;
	line-height: 1.6
}

button {
	overflow: visible
}

input {
	line-height: normal
}

button,select {
	text-transform: none
}

button[disabled],input[disabled] {
	cursor: default
}

button,input,optgroup,select,textarea {
	margin: 0;
	color: inherit;
	font: inherit
}

input[type=checkbox],input[type=radio] {
	box-sizing: border-box;
	padding: 0
}

button,input[type=button],input[type=reset],input[type=submit]:not(.popart-btn) {
	padding: .6em 1em .4em;
	border: 1px solid;
	border-radius: 3px;
	color: rgba(0,0,0,.8);
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: button
}

input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=range],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],textarea {
	padding: 3px;
	border-radius: 3px
}

textarea {
	width: 100%
}

button::-moz-focus-inner,input::-moz-focus-inner {
	padding: 0;
	border: 0
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
	height: auto
}

input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover {
	transition: background-color 5000s ease-in-out 0s
}

::-webkit-input-placeholder {
	color: #333
}

::-moz-placeholder {
	color: #333
}

:-ms-input-placeholder {
	color: #333
}

:-moz-placeholder {
	color: #333
}

fieldset {
	margin: 0 2px;
	padding: .35em .625em .75em;
	border: 1px solid silver
}

legend {
	padding: 0;
	border: 0
}

textarea {
	overflow: auto
}

optgroup {
	font-weight: 700
}

sub,sup {
	position: relative;
	vertical-align: baseline;
	font-size: 75%;
	line-height: 0
}

sup {
	top: -.5em
}

sub {
	bottom: -.25em
}

cite,dfn,em,i {
	font-style: italic
}

font.yellow_font {
	color: #fad029
}

abbr,acronym {
	cursor: help
}

abbr[title] {
	border-bottom: 1px dotted
}

b,strong {
	font-weight: 700
}

ins,mark {
	text-decoration: none
}

mark {
	background: #ff0;
	color: #000
}

svg:not(:root) {
	overflow: hidden
}

figure {
	margin: 1em 40px
}

address {
	margin: 0 0 1.5em
}

big {
	font-size: 125%
}

small {
	font-size: 80%
}

blockquote,q {
	quotes: "" ""
}

blockquote {
	margin: 0 1.5em
}

blockquote:after,blockquote:before,q:after,q:before {
	content: ""
}

hr {
	margin-bottom: 1.5em;
	height: 1px;
	border: 0;
	box-sizing: content-box;
	height: 0
}

pre {
	overflow: auto;
	margin-bottom: 1.6em;
	padding: 1.6em;
	max-width: 100%;
	background: #999
}

code,kbd,pre,samp {
	font-size: 1em;
	font-family: monospace,monospace
}

code,kbd,tt,var {
	font-family: Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace
}

code {
	display: inline-table;
	margin-bottom: 1em;
	padding: 20px;
	width: auto;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	background-color: #272323;
	color: #fad029
}

p code {
	padding: 6px 20px 6px 20px
}

.fleft {
	float: left
}

.fright {
	float: right
}

.alignleft {
	float: left;
	display: inline;
	margin-right: 1.5em
}

.alignright {
	float: right;
	display: inline;
	margin-left: 1.5em
}

.centered {
	text-align: center
}

.color-darkgrey {
	color: #333
}

.color-white {
	color: #fff
}

.color-gray {
	color: #656565
}

.font-main {
	font-family: '微軟正黑體',sans-serif
}

.font-serif {
	font-family: "微軟正黑體",serif
}

.none {
	display: none!important
}

.visible .input-wrapper .input-icon {
	opacity: 1
}

.display-scrolling {
	opacity: .1!important;
	transition: left .7s,opacity .7s
}

.edge-banner {
	width: 100vh!important
}

.animation-in {
	opacity: 1;
	animation: animationIn .5s
}

.animation-out {
	opacity: 0;
	animation: animationOut .5s
}

@keyframes animationIn {
	0% {
		padding-top: 20%
	}

	100% {
		padding-top: 0
	}
}

@keyframes animationOut {
	0% {
		overflow: hidden;
		padding-top: 0
	}

	100% {
		overflow: hidden;
		padding-top: 80%
	}
}

.section-usluga ul li::before {
	top: 19px
}

.parallax {
	position: relative
}

.parallax.abs-pos {
	position: absolute
}

.plx {
	position: relative;
	overflow: visible!important
}

.plx::after {
	display: none!important
}

.plx .pic-overlay {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%
}

.plx .bg {
	position: relative;
	transition: transform .5s!important;
	transform: translateX(-50%) scaleX(0)!important
}

.plx .abs-pos {
	position: absolute;
	top: 0;
	left: -90px;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .5s,transform .5s;
	transform: translateY(50px)
}

.plx .iphone {
	top: -50px
}

.plx .stamp {
	top: 50px
}

.plx .letter {
	top: 110px
}

.plx .pen {
	top: 170px
}

.plx .envelope {
	top: 260px
}

.plx .folded-letter,.plx .iphone {
	top: 400px
}

.plx .bcard1 {
	top: 570px
}

.plx .bcard2 {
	top: 660px
}

.plx .stamp {
	top: 800px
}

.plx.show .abs-pos {
	opacity: 1;
	transform: translateY(0)
}

.plx.show .bg {
	opacity: 1;
	transform: translateX(0) scaleX(1)!important
}

.plx.no-delay .abs-pos {
	transition-delay: 0s!important
}

.section-title {
	margin: 0 0 20px;
	font-size: 36px
}

.x-btn {
	position: relative;
	display: block;
	width: 80px;
	height: 80px;
	border-radius: 50%
}

.x-btn:after,.x-btn:before {
	position: absolute;
	display: block;
	content: ''
}

.x-btn:after {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	border-radius: 50%;
	background-color: #fad029;
	transition: all 350ms ease
}

.x-btn:before {
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
	z-index: -1;
	border-right: 1px solid rgba(0,0,0,.1);
	border-left: 1px solid rgba(0,0,0,.1);
	border-radius: 50%;
	box-shadow: 4px 2px 10px rgba(0,0,0,.05);
	transition: all 175ms ease;
	transform: rotate(45deg)
}

.x-btn span {
	display: block;
	width: 80px;
	height: 80px;
	border: 2px solid #fad029;
	border-radius: 50%;
	transition: all 350ms ease
}

.x-btn span:after,.x-btn span:before {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	background-color: #383838;
	content: '';
	transition: all 350ms ease;
	transform: translate(-50%,-50%)
}

.x-btn span:before {
	width: 43px;
	height: 2px
}

.x-btn span:after {
	width: 2px;
	height: 43px
}

.x-btn.drag:after,.x-btn.hover-in:after {
	background: rgba(255,255,255,.9)
}

.x-btn.drag:before,.x-btn.hover-in:before {
	top: -12px;
	right: -12px;
	bottom: -12px;
	left: -12px
}

.x-btn.drag span,.x-btn.hover-in span {
	transform: scale(.88)
}

.x-btn.drag span:after,.x-btn.drag span:before,.x-btn.hover-in span:after,.x-btn.hover-in span:before {
	background-color: rgba(0,0,0,.2)
}

.x-btn.hover-in.hover-in-alt:before {
	top: -7px;
	right: -7px;
	bottom: -7px;
	left: -7px
}

.draggable-btn {
	position: relative;
	padding: 0 0 40px;
	width: 80px;
	height: 160px
}

.draggable-btn .x-btn {
	position: relative;
	top: 0;
	transition: all 180ms ease-out
}

.slick-slide {
	outline: 0
}

.yellow-bg:before {
	transition: transform 1.8s .4s ease-out;
	transform: scale(0,1);
	transform-origin: left top
}

.yellow-bg.show:before {
	transform: scale(1,1)
}

.mouse {
	position: absolute;
	bottom: 40px;
	left: 50%;
	display: none;
	margin-left: -12px;
	width: 22px;
	height: 42px;
	border: 2px solid #888;
	border-radius: 15px;
	cursor: pointer;
	transform: translate(-50%);
	animation: intro 1s
}

.scroll {
	margin: 6px auto;
	width: 3px;
	height: 3px;
	border-radius: 4px;
	background: #888;
	animation: finger 1s infinite
}

.team-page {
	padding-top: 70px
}

.team-page .container {
	position: relative
}

#dropper {
	position: fixed;
	top: 50%;
	right: 50px;
	overflow: hidden;
	width: 276px;
	height: 296px;
	border: 1px dashed transparent;
	transition: all .5s ease;
	transform: translateY(-50%)
}

#dropper span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	color: #fad029;
	text-align: center;
	opacity: 0;
	transition: all .5s ease;
	transform: translate(-50%,-50%)
}

#dropper:after {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fad029;
	content: '';
	transform: translateX(-101%)
}

#dropper.show {
	border-color: #fad029;
	transition: border-color 1ms ease .6s,opacity .3s ease
}

#dropper.show span {
	opacity: 1;
	transition: all 1ms ease .6s
}

#dropper.show:after {
	transition: all 2s ease;
	transform: translateX(101%)
}

#dropper.hide-alt {
	visibility: hidden;
	opacity: 0
}

.project-info-wrapper {
	width: 100%
}

.service-options {
	display: none;
	padding: 0 22px 22px;
	border: 2px solid #333;
	border-top: 0;
	border-bottom-right-radius: 25px;
	border-bottom-left-radius: 25px
}

.service-single-option {
	position: relative;
	display: block;
	margin-bottom: 0;
	width: 100%;
	height: 47px
}

.service-single-option label:focus,.service-single-option label:hover {
	color: #383838
}

.service-trigger {
	margin-bottom: 0
}

.service-trigger input[type=checkbox]+label {
	display: block;
	margin-bottom: 15px;
	color: #383838;
	font-size: 14px
}

.service-trigger .icon-keyboard_arrow_down {
	position: absolute;
	top: 15px;
	right: 15px
}

.service-trigger .icon-keyboard_arrow_down::before {
	font-size: 24px
}

.triger-single-options {
	position: relative;
	display: block
}

.triger-single-options:focus .input-trigger,.triger-single-options:hover .input-trigger {
	border-color: #333;
	border-bottom: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	color: #333
}

.browser-support-field label,.keywords-field label {
	display: block;
	margin-bottom: 15px;
	color: #333;
	font-size: 14px
}

.order-form-graphic,.order-form-seo {
	display: none
}

.notification-field-success {
	border: 2px solid #3cd964;
	background-color: #3cd964
}

.notification-field-success .icon-check::before {
	display: block
}

.notification-field-error {
	border: 2px solid #ff3b30;
	background-color: #ff3b30
}

.notification-field-error .icon-cross::before {
	display: block
}

.scroll-btn {
	position: absolute;
	right: 0;
	left: 0;
	display: none;
	margin-top: 45px;
	text-align: center
}

.scroll-btn>* {
	display: inline-block;
	color: #fff;
	letter-spacing: 2px;
	font-weight: 400;
	font-size: 13px;
	font-family: proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;
	line-height: 18px
}

.scroll-btn>.active,.scroll-btn>:focus,.scroll-btn>:hover {
	color: #fff
}

.scroll-btn>.active,.scroll-btn>:active,.scroll-btn>:focus,.scroll-btn>:hover {
	opacity: .8
}

.scroll-btn .mouse {
	position: relative;
	display: none;
	box-sizing: border-box;
	margin: 0 auto 20px;
	width: 25px;
	height: 45px;
	border: 2px solid #959595;
	border-radius: 23px
}

.scroll-btn .mouse>* {
	position: absolute;
	top: 29%;
	left: 50%;
	display: none;
	margin: -2px 0 0 -2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #959595;
	animation: ani-mouse 2.5s linear infinite
}

@keyframes ani-mouse {
	0% {
		top: 29%;
		opacity: 1
	}

	15% {
		top: 50%;
		opacity: 1
	}

	50% {
		top: 50%;
		opacity: 0
	}

	100% {
		top: 29%;
		opacity: 0
	}
}

.e-commerce>.container {
	max-width: 1254px
}

.float_right {
	float: right
}

#homewebdev .section-image {
	top: -50px;
	right: 0
}

#homewebdev .img_div {
	position: relative;
	right: 0;
	margin-left: auto;
	width: 80%
}

.hide-header #sidebar {
	padding-top: 5px
}

.hide-header .site-header .site-branding {
	opacity: 0;
	transition: opacity ease .5s,left ease .5s
}

.hide-header .site-header {
	transform: translateY(-110%)
}

.sticky-header .site-header {
	top: 0;
	box-shadow: 0 3px 10px -5px rgba(51,51,51,.4);
	transition: transform .3s ease,top .3s ease,background-color 1ms ease .6s,box-shadow 1ms ease .6s
}

.sticky-header .site-header::before {
	transform: translateY(0)
}

.sticky-header .site-header .site-branding a {
	transform: scale(.8)
}

.l-loading {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 0;
	transition: height 1ms ease .1s;
	pointer-events: none
}

.l-loading .container-load {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	height: 100%
}

.l-loading span {
	position: absolute;
	top: 0;
	display: block;
	height: 100%;
	max-width: 0;
	background-color: #333
}

.l-loading>span:first-child {
	left: 0;
	transition: max-width 1.2s ease
}

.l-loading>span:nth-child(2) {
	transition: max-width 1.2s ease .5s
}

.l-loading span.inner-load {
	width: 25%
}

.l-loading span.inner-load:nth-of-type(1) {
	transition: max-width 1.2s ease .1s
}

.l-loading span.inner-load:nth-of-type(2) {
	left: 25%;
	transition: max-width 1.2s ease .2s
}

.l-loading span.inner-load:nth-of-type(3) {
	left: 50%;
	transition: max-width 1.2s ease .3s
}

.l-loading span.inner-load:nth-of-type(4) {
	left: 75%;
	transition: max-width 1.2s ease .4s
}

.l-loading.show {
	z-index: 100000001;
	height: 100%;
	transition: height 1ms ease
}

.l-loading.show span {
	max-width: 700px
}

.l-loading.show.hide-alt span {
	max-width: 0
}

.l-loading.show.hide-alt>span:first-child {
	right: 0;
	left: auto;
	transition: max-width 1.2s ease .5s
}

.l-loading.show.hide-alt>span:nth-child(2) {
	transition: max-width 1.2s ease
}

.l-loading.show.hide-alt span.inner-load {
	right: 0;
	left: auto;
	transition: max-width 1.2s ease .4s
}

.l-loading.show.hide-alt span.inner-load:nth-of-type(2) {
	right: 25%;
	transition: max-width 1.2s ease .3s
}

.l-loading.show.hide-alt span.inner-load:nth-of-type(3) {
	right: 50%;
	transition: max-width 1.2s ease .2s
}

.l-loading.show.hide-alt span.inner-load:nth-of-type(4) {
	right: 75%;
	transition: max-width 1.2s ease .1s
}

.slow-header .site-header {
	transition: transform .7s ease 2ms,top .7s ease 2ms,background-color 1ms ease,box-shadow 1ms ease
}

.site-header {
	position: fixed;
	top: 20px;
	left: 0;
	z-index: 1100;
	width: 100%;
	transition: transform .3s ease 2ms,top .3s ease 2ms,background-color 1ms ease,box-shadow 1ms ease
}

.site-header .site-branding {
	position: relative;
	position: absolute;
	top: 50%;
	left: 40px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 250px;
	height: 100%;
	opacity: 1;
	transform: translateY(-50%);
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center
}

.site-header .site-branding a {
	transform-origin: 0 50%
}

.site-header .site-branding img,.site-header .site-branding video {
	display: block;
	max-width: 279px
}

.site-header .site-branding .logo-video {
	position: absolute;
	top: 50%;
	left: 0;
	display: none;
	transform: translateY(-50%)
}

.site-header .site-branding svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 120px;
	height: 120px
}

.site-header .site-branding #css-motion-path {
	transition: 2s ease;
	motion-path: path("M62.7 28.2s-3.1-.3-7.4-.3H35.9c-1.5 0-5.5 1.3-5.2 6.5.2 3.2 3.1 5.2 7.7 5.2h19.4s5.5.3 5.5 5.5c0 4.4-4.4 5.9-5.1 5.9h-6.5c-3.8 0-11.8-.2-17.5 6.8-4.3 5.3-3.4 12.9-3.2 14 .1 1.1.7 6 5.7 5.6 4.7-.3 5.3-2.6 5.4-6.9 0 0-.2-4.5 2.2-6.8 2.9-2.8 8.9-2.2 11.1-2.3 3.8-.1 20.2.2 20-17.4-.2-13.4-12.6-15.8-12.7-15.8");
	offset-path: path("M62.7 28.2s-3.1-.3-7.4-.3H35.9c-1.5 0-5.5 1.3-5.2 6.5.2 3.2 3.1 5.2 7.7 5.2h19.4s5.5.3 5.5 5.5c0 4.4-4.4 5.9-5.1 5.9h-6.5c-3.8 0-11.8-.2-17.5 6.8-4.3 5.3-3.4 12.9-3.2 14 .1 1.1.7 6 5.7 5.6 4.7-.3 5.3-2.6 5.4-6.9 0 0-.2-4.5 2.2-6.8 2.9-2.8 8.9-2.2 11.1-2.3 3.8-.1 20.2.2 20-17.4-.2-13.4-12.6-15.8-12.7-15.8")
}

.site-header::before {
	position: absolute;
	top: -50px;
	left: 0;
	width: 100%;
	height: calc(100% + 50px);
	background: rgba(255,255,255,.96);
	content: '';
	transition: transform .5s;
	transition-delay: .5s;
	transform: translateY(-100%)
}

.sticky-header .site-header .site-branding {
	position: absolute;
	top: 50%;
	left: 40px;
	transform: translateY(-50%)
}

.sticky-header .site-header .site-branding svg {
	transform: translateY(5px) translateX(0)
}

.clear:after,.clear:before,.container:after,.container:before {
	display: table;
	table-layout: fixed;
	content: ""
}

.clear:after,.container:after {
	clear: both
}

.container {
	margin: 0 auto;
	padding: 0 15px
}

body.blur .nav-wrapper.active {
	overflow-y: auto
}

.main-navigation {
	float: right;
	padding: 65px 0;
	padding-left: 1rem;
	transition: all .3s ease
}

.main-navigation>ul {
	position: relative
}

.main-navigation li {
	position: relative;
	float: left;
	margin-left: 45px
}

.main-navigation li:first-of-type {
	margin-left: 0
}

.main-navigation .nav-link-wrap {
	position: relative;
	display: block;
	overflow: hidden
}

.main-navigation .nav-link-wrap:after {
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 100%;
	height: 1px;
	background-color: #333;
	content: '';
	transition: .3s ease;
	transform: translate(-102%,-50%)
}

.main-navigation li.focus>.nav-link-wrap:after,.main-navigation li:hover>.nav-link-wrap:after {
	transform: translate(102%,-50%)
}

.main-navigation li.focus>.nav-link-wrap a,.main-navigation li:hover>.nav-link-wrap a {
	transform: translateY(-27px)
}

.main-navigation a {
	position: relative;
	display: block;
	padding: 10px 0 8px;
	color: #333;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1;
	transition: all .3s ease-out .1s;
	-webkit-filter: blur(0);
	filter: blur(0)
}

.main-navigation a:after {
	position: absolute;
	top: 27px;
	left: 0;
	display: block;
	padding: 10px 0 12px;
	color: #fad029;
	content: attr(data-hover-text)
}

.sticky-header .main-navigation {
	padding: 50px 0
}

.sub-menu-wrapper {
	position: absolute;
	top: 100%;
	left: 50%;
	overflow: hidden;
	width: 1000px;
	height: 0;
	text-align: center;
	transition: 1ms ease 350ms;
	transform: translateX(-50%)
}

.sub-menu-wrapper .sub-menu:before {
	display: block;
	margin: 0 auto;
	width: 0;
	height: 2px;
	background-color: #333;
	content: '';
	transition: 350ms ease;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
}

.sub-menu-wrapper ul {
	overflow: hidden
}

.sub-menu-wrapper li {
	float: none;
	display: inline-block;
	transition: 350ms ease;
	transform: translateY(150%)
}

.header-icons {
	position: absolute;
	top: 0;
	right: 50px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin: 0;
	padding: 0;
	height: 100%;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center
}

.header-icons .header-icon-wrap {
	margin-right: 10px;
	border-radius: 50%;
	background-color: #333
}

.header-icons .header-icon-wrap:last-child {
	margin: 0
}

.header-icons .header-icon {
	position: relative;
	display: block;
	width: 48px;
	height: 48px;
	color: #fff;
	line-height: 1;
	cursor: pointer
}

.header-icons .header-icon span,.header-icons .header-icon::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%)
}

.header-icons .header-icon.icon-email {
	font-size: 13px
}

.header-icons .header-icon.icon-email span {
	display: none
}

.header-icons .header-icon.icon-follow {
	font-size: 22px
}

.header-icons .header-icon.lang-info {
	font-weight: 600
}

.header-icons .hi-wrapper {
	position: absolute;
	top: 84px;
	right: -30px;
	visibility: hidden;
	padding-top: 80px;
	width: 100%;
	opacity: 0
}

.header-icons .hi-content {
	float: right;
	overflow: hidden;
	padding: 40px 30px 0;
	padding: 40px 30px 40px;
	width: 0;
	height: 215px;
	height: auto;
	border-bottom: 1px solid #f8b309
}

.header-icons .hi-content ul {
	margin: 0;
	padding: 20px 0 0 0;
	color: #333
}

.header-icons .hi-content span {
	color: #333;
	cursor: pointer;
	line-height: inherit
}

.header-icons .hi-content a:hover span {
	color: #fff
}

.header-icons .hi-title {
	color: #333;
	font-weight: 700;
	font-size: 36px;
	line-height: 1
}

.header-icons .hi-title .hi-title-wrapper {
	display: block;
	overflow: hidden
}

.header-icons .hi-title .hi-title-inner-wrapper {
	display: block;
	transition: 1ms ease .4s;
	transform: translateY(100%)
}

.header-icons .hi-details {
	opacity: 0;
	transform: translateX(-10px)
}

.header-icons .hi-phone {
	font-size: 16px;
	line-height: 1
}

.header-icons .hi-phone li:first-child span {
	padding-bottom: 4px
}

.header-icons .hi-phone li:last-child span {
	padding-top: 4px
}

.header-icons .hi-phone a {
	margin-left: 20px
}

.header-icons .hi-phone span {
	display: inline-block;
	box-sizing: content-box;
	width: 90px;
	border-right: 1px solid #333;
	font-weight: 500
}

.header-icons .hi-lang li {
	display: inline-block;
	display: block;
	padding-right: 13px
}

.header-icons .hi-lang li:last-child {
	padding-right: 0;
	padding-left: 15px;
	padding-left: 0
}

.header-icons .hi-lang li:nth-child(2) {
	border-right: 1px solid rgba(51,51,51,.1);
	border-left: 1px solid rgba(51,51,51,.1);
	border-right: none;
	border-left: none
}

.header-icons .hi-lang li:nth-child(2) a {
	padding-left: 15px;
	padding-left: 0
}

.header-icons .hi-lang a {
	display: block
}

.header-icons .hi-lang span {
	display: block
}

.header-icons .hi-lang span:first-child {
	font-weight: 600
}

.header-icons .hi-lang span:last-child {
	font-weight: 300
}

.header-icons .hi-follow li {
	display: inline-block;
	margin-right: 7px;
	font-size: 20px
}

.nav-button-wrapper {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 3000;
	display: none;
	padding: 0 0 35px;
	width: 40px;
	transition: all .3s ease 2ms
}

.nav-button {
	backface-visibility: hidden
}

.nav-button {
	position: relative;
	display: block;
	padding: 20px;
	border: 2px solid #333;
	border-radius: 30px;
	color: #333;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1;
	transition: all .7s cubic-bezier(.75,.1,.25,1)
}

.nav-button .menu-btn {
	position: absolute;
	top: 50%;
	right: 50%;
	z-index: 100;
	width: 15px;
	height: 10px;
	cursor: pointer;
	transform: translate(50%,-50%);
	pointer-events: none
}

.nav-button .menu-btn span,.nav-button .menu-btn:after,.nav-button .menu-btn:before {
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	background-color: #333;
	transition: background-color .7s cubic-bezier(.75,.1,.25,1)
}

.nav-button .menu-btn:after,.nav-button .menu-btn:before {
	content: '';
	transition: .3s width .4s ease-out,background-color .7s cubic-bezier(.75,.1,.25,1)
}

.nav-button .menu-btn:after {
	top: 0;
	left: 0
}

.nav-button .menu-btn:before {
	right: 0;
	bottom: 0
}

.nav-button .menu-btn span {
	top: 50%;
	margin-top: -1px;
	background-color: #fff;
	transition: transform .3s ease-out
}

.nav-button .menu-btn span:before {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #333;
	content: '';
	transition: transform .3s ease-out,background-color .7s cubic-bezier(.75,.1,.25,1)
}

.nav-button .menu-btn.open:after {
	left: 0;
	width: 0;
	transition: all .2s ease
}

.nav-button .menu-btn.open:before {
	right: 0;
	width: 0;
	transition: all .2s ease
}

.nav-button .menu-btn.open span {
	transition: .3s transform .4s ease-out,background-color .7s cubic-bezier(.75,.1,.25,1);
	transform: rotate(45deg)
}

.nav-button .menu-btn.open span:before {
	background-color: #fff;
	transition: .3s transform .4s ease-out,background-color .7s cubic-bezier(.75,.1,.25,1);
	transform: rotate(-90deg)
}

.nav-button.active {
	border-color: #fff;
	color: #fff
}

.slow-header .nav-button-wrapper {
	transition: all 1.5s ease 2ms
}

.hide-header .nav-button-wrapper {
	transform: translateY(-110%)
}

.sticky-header .nav-button-wrapper {
	top: 7px;
	padding: 31px 0;
	transition: all .3s ease
}

.site-footer {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	padding-top: 250px;
	width: 100%;
	background-color: #383838;
	color: #fff;
	text-align: center;
	z-index: -1
}

.site-footer a,.site-footer h2 {
	color: #fff
}

.site-footer a:hover {
	color: #fad029
}

.site-footer .footer-pretitle {
	font-size: 18px
}

.site-footer h2 {
	margin: 15px 0 25px
}

.site-footer .footer-email {
	font-size: 14px
}

.site-footer .footer-info {
	margin-top: 80px;
	padding-right: 0;
	padding-left: 0;
	text-align: left;
	font-size: 14px
}

.site-footer .footer-info address,.site-footer .footer-info>ul {
	float: left;
	margin: 0;
	padding: 0;
	width: 25%;
	font-style: normal
}

.site-footer .footer-info li {
	margin-bottom: 5px;
	text-align: center
}

.site-footer .footer-info li:last-child {
	margin-bottom: 0
}

.site-footer .footer-info li.finfo-title {
	margin-bottom: 10px;
	text-transform: uppercase;
	text-align: center;
	font-size: 18px
}

.site-footer .footer-info a {
	color: #fff
}

.site-footer .footer-info a:hover {
	color: #fad029
}

.site-footer .footer-social {
	margin-top: 60px
}

.site-footer .footer-social span {
	display: inline-block;
	margin: 0 12px;
	vertical-align: middle;
	font-size: 20px;
	transition: all 350ms ease
}

.site-footer .footer-social span:hover {
	color: #fad029;
	cursor: pointer
}

.site-footer .copyright {
	display: block;
	margin-top: 45px;
	padding-bottom: 30px;
	font-weight: 300;
	font-size: 12px;
	word-break: break-word
}

.site-footer #toTop {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
	margin: 0 auto;
	margin-bottom: 20px;
	width: 70px;
	height: 70px;
	border-radius: 100%;
	background: #fad029;
	line-height: .7;
	cursor: pointer;
	transform: scale(1);
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center
}

.site-footer #toTop span {
	position: relative;
	color: #383838;
	font-size: 38px
}

.site-footer #toTop img {
	position: relative;
	z-index: 3;
	display: block;
	width: 100%
}

.site-footer #toTop::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	content: ''
}

.site-footer #toTop:hover::before {
	animation: sonar-effect2 .8s ease-out 75ms
}

@keyframes sonar-effect2 {
	0% {
		opacity: .3
	}

	40% {
		box-shadow: 0 0 0 2px rgba(250,204,22,.1),0 0 10px 10px #fff,0 0 0 10px rgba(250,204,22,.5);
		opacity: .5
	}

	100% {
		box-shadow: 0 0 0 2px rgba(250,204,22,.1),0 0 10px 10px #fff,0 0 0 10px rgba(250,204,22,.5);
		opacity: 0;
		transform: scale(1.2)
	}
}

.site-preloader {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999999999999;
	display: none;
	width: 100%;
	height: 100%
}

.site-preloader svg {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 2px;
	width: 30px;
	height: 30px;
	opacity: 1;
	transition: transform .5s,opacity .5s;
	transform: translateY(-50%) translateX(-50%) scale(1)
}

.site-preloader svg path {
	transition: 1s;
	fill: #fff;
	stroke: #fad029;
	stroke-width: 1px;
	stroke-dasharray: 0 602
}

.site-preloader.active svg path {
	stroke-dasharray: 602 602
}

.site-preloader.flyout svg {
	opacity: 0;
	transform: translateY(-50%) translateX(-50%) scale(50)
}

.form-holder {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap
}

.form-holder .fake-checkbox span[class*="-privacy"],.pop-up-wrapper .form-container .fake-checkbox span[class*="-privacy"] {
	display: inline-block;
	vertical-align: middle
}

.forms-wrapper {
	top: 57%!important
}

.order-norobot-field .order-norobot label {
	font-size: 11px!important
}

.form-holder .prev-form,.pop-up-wrapper .form-container .prev-form {
	top: 0!important
}

.form-title {
	margin-bottom: 50px;
	font-weight: 500;
	font-size: 26px;
	font-family: "微軟正黑體","Helvetica Neue",Helvetica,Arial,sans-serif
}

.pop-up-wrapper {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10100;
	width: 0;
	height: 100%
}

.pop-up-wrapper .contact-us-wrapper {
	position: absolute;
	right: 50px;
	bottom: 40px!important;
	width: 70px;
	height: 70px;
	transition: all .4s ease;
	transform: scale(0)
}

.pop-up-wrapper .contact-us-wrapper.show {
	transform: none
}

.pop-up-wrapper .contact-us-wrapper:before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	display: block;
	padding: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(51,51,51,.1);
	content: '';
	opacity: 0;
	transform: scale(.7);
	pointer-events: none
}

.pop-up-wrapper .contact-us-wrapper:before {
	animation: sonar-effect 1.2s ease-out 75ms;
	animation-iteration-count: infinite
}

@keyframes sonar-effect {
	0% {
		opacity: .3
	}

	40% {
		box-shadow: 0 0 0 2px rgba(51,51,51,.1),0 0 10px 10px #fff,0 0 0 10px rgba(51,51,51,.5);
		opacity: .5
	}

	100% {
		box-shadow: 0 0 0 2px rgba(51,51,51,.1),0 0 10px 10px #fff,0 0 0 10px rgba(51,51,51,.5);
		opacity: 0;
		transform: scale(1.2)
	}
}

.pop-up-wrapper .contact-us-btn {
	position: relative;
	display: block;
	padding: 21px 0;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background-color: #292929;
	color: #fff;
	text-align: center;
	font-size: 25px;
	line-height: 1;
	transition: transform .4s ease,background-color .4s ease,color .4s ease
}

.pop-up-wrapper .contact-us-btn:hover {
	transform: scale(.9)
}

.pop-up-wrapper.open {
	width: 100%
}

.pop-up-wrapper.open .contact-us-wrapper {
	bottom: calc(100% - 120px)
}

.pop-up-wrapper.open .contact-us-wrapper:after {
	transform: none
}

.pop-up-wrapper.open .contact-us-wrapper:hover:before {
	animation: none
}

.pop-up-wrapper.open .contact-us-btn {
	padding: 16px 0;
	background-color: #fad029;
	color: #333;
	font-size: 33px
}

.pop-up-wrapper.open .contact-us-btn span:before {
	content: ''
}

.pop-up-wrapper.open {
	background-color: #333;
	transition: width .4s ease .4s
}

.forms-wrapper {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	color: #fff;
	transform: translateY(-50%)
}

.forms-wrapper p {
	margin-bottom: 80px;
	font-size: 70px;
	font-family: "微軟正黑體","Helvetica Neue",Helvetica,Arial,sans-serif;
	line-height: 1.4
}

.form-holder,.pop-up-wrapper .form-container {
	position: relative;
	display: none
}

.form-holder .popart-fill-btn,.pop-up-wrapper .form-container .popart-fill-btn {
	border-color: #fad029;
	background-color: #fad029
}

.form-holder .prev-form,.pop-up-wrapper .form-container .prev-form {
	position: absolute;
	top: -50px;
	display: none;
	font-size: 50px;
	cursor: pointer
}

.form-holder label,.pop-up-wrapper .form-container label {
	color: #959595
}

.form-holder .fake-checkbox,.pop-up-wrapper .form-container .fake-checkbox {
	float: left;
	display: block
}

.form-holder .fake-checkbox span[class*="-privacy"],.pop-up-wrapper .form-container .fake-checkbox span[class*="-privacy"] {
	position: relative;
	margin-right: 20px;
	width: 66px;
	height: 36px;
	border: 2px solid #959595;
	border-radius: 30px;
	cursor: pointer
}

.form-holder .fake-checkbox span[class*="-privacy"]:before,.pop-up-wrapper .form-container .fake-checkbox span[class*="-privacy"]:before {
	position: absolute;
	top: 1px;
	left: 1px;
	padding: 3px;
	border: 2px solid #959595;
	border-radius: 50%;
	background-color: #959595;
	color: #fff;
	font-size: 20px;
	transition: all 350ms ease
}

.form-holder .fake-checkbox .privacy-form-link,.pop-up-wrapper .form-container .fake-checkbox .privacy-form-link {
	float: right;
	display: block;
	height: 36px;
	line-height: 1.3
}

.form-holder .fake-checkbox .privacy-form-link a,.pop-up-wrapper .form-container .fake-checkbox .privacy-form-link a {
	text-decoration: underline;
	transition: 350ms ease
}

.form-holder .fake-checkbox .privacy-form-link a:hover,.pop-up-wrapper .form-container .fake-checkbox .privacy-form-link a:hover {
	color: #959595
}

.form-holder input[type=checkbox]:checked+label span:before,.pop-up-wrapper .form-container input[type=checkbox]:checked+label span:before {
	left: 31px;
	border-color: #fad029;
	background-color: #fad029
}

.form-holder .input-wrapper,.pop-up-wrapper .form-container .input-wrapper {
	position: relative;
	margin-bottom: 40px
}

.form-holder .input-wrapper label,.pop-up-wrapper .form-container .input-wrapper label {
	position: absolute;
	top: 17.5px;
	left: 25px;
	line-height: 1;
	transition: all 350ms ease;
	pointer-events: none
}

.form-holder .input-wrapper .fake-input:focus+label,.form-holder .input-wrapper .fake-input:hover+label,.form-holder .input-wrapper input:focus+label,.form-holder .input-wrapper input:hover+label,.form-holder .input-wrapper input:valid+label,.pop-up-wrapper .form-container .input-wrapper .fake-input:focus+label,.pop-up-wrapper .form-container .input-wrapper .fake-input:hover+label,.pop-up-wrapper .form-container .input-wrapper input:focus+label,.pop-up-wrapper .form-container .input-wrapper input:hover+label,.pop-up-wrapper .form-container .input-wrapper input:valid+label {
	top: -15px;
	font-size: 12px
}

.form-holder .input-wrapper .input-icon,.pop-up-wrapper .form-container .input-wrapper .input-icon {
	position: absolute;
	top: 17.5px;
	right: 30px;
	display: block;
	color: #959595;
	font-size: 20px;
	opacity: 0;
	transition: opacity .5s;
	transform: translateY(-50%)
}

.form-holder .input-wrapper:hover .input-icon,.pop-up-wrapper .form-container .input-wrapper:hover .input-icon {
	color: #fff
}

.form-holder .fake-input,.form-holder input,.form-holder textarea,.pop-up-wrapper .form-container .fake-input,.pop-up-wrapper .form-container input,.pop-up-wrapper .form-container textarea {
	display: block;
	padding: 17px 40px;
	width: 100%;
	outline: 0;
	border: 2px solid #959595;
	border-radius: 30px;
	background-color: transparent;
	color: #959595;
	font-size: 14px;
	line-height: 1.2;
	transition: all 350ms ease
}

.form-holder .fake-input:focus,.form-holder .fake-input:hover,.form-holder input:focus,.form-holder input:hover,.form-holder textarea:focus,.form-holder textarea:hover,.pop-up-wrapper .form-container .fake-input:focus,.pop-up-wrapper .form-container .fake-input:hover,.pop-up-wrapper .form-container input:focus,.pop-up-wrapper .form-container input:hover,.pop-up-wrapper .form-container textarea:focus,.pop-up-wrapper .form-container textarea:hover {
	border-color: #fff;
	color: #fff
}

.form-holder .fake-input:focus+label,.form-holder .fake-input:hover+label,.form-holder input:focus+label,.form-holder input:hover+label,.form-holder textarea:focus+label,.form-holder textarea:hover+label,.pop-up-wrapper .form-container .fake-input:focus+label,.pop-up-wrapper .form-container .fake-input:hover+label,.pop-up-wrapper .form-container input:focus+label,.pop-up-wrapper .form-container input:hover+label,.pop-up-wrapper .form-container textarea:focus+label,.pop-up-wrapper .form-container textarea:hover+label {
	color: #fff
}

.form-holder .fake-input,.pop-up-wrapper .form-container .fake-input {
	min-height: 50px
}

.form-holder .fake-input-file,.pop-up-wrapper .form-container .fake-input-file {
	cursor: pointer
}

.form-holder .fake-select,.pop-up-wrapper .form-container .fake-select {
	position: relative;
	cursor: pointer
}

.form-holder .fake-select .fake-select-text,.pop-up-wrapper .form-container .fake-select .fake-select-text {
	position: absolute;
	top: 50%;
	left: 40px;
	overflow: hidden;
	transform: translateY(-50%);
	pointer-events: none
}

.form-holder .fake-select .fake-select-text:after,.pop-up-wrapper .form-container .fake-select .fake-select-text:after {
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 100%;
	height: 1px;
	background-color: #fff;
	content: '';
	transform: translate(-100%,-50%)
}

.form-holder .fake-select .fake-select-text.selecting:after,.pop-up-wrapper .form-container .fake-select .fake-select-text.selecting:after {
	transition: all .5s ease;
	transform: translate(100%,-50%)
}

.form-holder .fake-select.selected+label,.pop-up-wrapper .form-container .fake-select.selected+label {
	top: -15px;
	font-size: 12px
}

.form-holder .fake-select:hover,.pop-up-wrapper .form-container .fake-select:hover {
	border-bottom: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0
}

.form-holder .fake-select:hover .fake-options,.pop-up-wrapper .form-container .fake-select:hover .fake-options {
	visibility: visible;
	height: 300px;
	border-color: #fff;
	opacity: 1
}

.form-holder .fake-select:hover .fake-options:before,.pop-up-wrapper .form-container .fake-select:hover .fake-options:before {
	width: calc(100% - 80px)
}

.form-holder .fake-options,.pop-up-wrapper .form-container .fake-options {
	position: absolute;
	top: 40px;
	left: -2px;
	z-index: 10;
	display: block;
	visibility: hidden;
	overflow: hidden;
	padding: 0 40px;
	width: calc(100% + 4px);
	height: 100%;
	border-right: 2px solid #959595;
	border-bottom: 2px solid #959595;
	border-left: 2px solid #959595;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 30px;
	background-color: rgba(51,51,51,.95);
	opacity: 0;
	transition: all 250ms ease
}

.form-holder .fake-options .f-opt,.pop-up-wrapper .form-container .fake-options .f-opt {
	position: relative;
	display: block;
	margin: 10px 0;
	padding-left: 30px;
	width: 100%;
	transition: all 350ms ease
}

.form-holder .fake-options .f-opt:first-child,.pop-up-wrapper .form-container .fake-options .f-opt:first-child {
	margin-top: 10px
}

.form-holder .fake-options .f-opt:last-child,.pop-up-wrapper .form-container .fake-options .f-opt:last-child {
	margin-bottom: 10px
}

.form-holder .fake-options .f-opt:after,.form-holder .fake-options .f-opt:before,.pop-up-wrapper .form-container .fake-options .f-opt:after,.pop-up-wrapper .form-container .fake-options .f-opt:before {
	content: '';
	transition: all 350ms ease
}

.form-holder .fake-options .f-opt:before,.pop-up-wrapper .form-container .fake-options .f-opt:before {
	position: absolute;
	top: -2px;
	left: -5px;
	color: #fff;
	content: "\E011";
	text-transform: none;
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	font-size: 17px;
	font-family: icomoon;
	line-height: 1;
	opacity: 0;
	transform: rotate(-90deg);
	speak: none
}

.form-holder .fake-options .f-opt:after,.pop-up-wrapper .form-container .fake-options .f-opt:after {
	position: absolute;
	top: 6px;
	left: -25px;
	display: block;
	width: 15px;
	height: 2px;
	background-color: #fff;
	opacity: 0
}

.form-holder .fake-options .f-opt:hover,.pop-up-wrapper .form-container .fake-options .f-opt:hover {
	padding-left: 20px
}

.form-holder .fake-options .f-opt:hover:before,.pop-up-wrapper .form-container .fake-options .f-opt:hover:before {
	left: 0;
	opacity: 1
}

.form-holder .fake-options .f-opt:hover:after,.pop-up-wrapper .form-container .fake-options .f-opt:hover:after {
	left: 0;
	width: 10px;
	opacity: 1
}

.form-holder .fake-options:before,.pop-up-wrapper .form-container .fake-options:before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	display: block;
	margin: 0 auto;
	width: 0;
	height: 1px;
	background-color: #fff;
	content: '';
	transition: all 350ms ease
}

.form-holder textarea,.pop-up-wrapper .form-container textarea {
	min-height: 200px;
	resize: none
}

.form-holder .fake-submit,.pop-up-wrapper .form-container .fake-submit {
	float: right;
	margin-right: 0;
	border-color: #fad029!important;
	background-color: #fad029!important;
	color: #333!important
}

.form-holder input.select-dropdown,.form-holder input[type=checkbox],.form-holder input[type=file],.pop-up-wrapper .form-container input.select-dropdown,.pop-up-wrapper .form-container input[type=checkbox],.pop-up-wrapper .form-container input[type=file] {
	display: none
}

.form-holder ::-webkit-input-placeholder,.pop-up-wrapper .form-container ::-webkit-input-placeholder {
	color: #959595
}

.form-holder ::-moz-placeholder,.pop-up-wrapper .form-container ::-moz-placeholder {
	color: #959595
}

.form-holder :-ms-input-placeholder,.pop-up-wrapper .form-container :-ms-input-placeholder {
	color: #959595
}

.form-holder :-moz-placeholder,.pop-up-wrapper .form-container :-moz-placeholder {
	color: #959595
}

.form-container .order-norobot-field .form-field input[type=checkbox]+label {
	transition: 350ms ease
}

.form-container .order-norobot-field .form-field input[type=checkbox]+label a {
	position: relative;
	color: #959595;
	font-weight: 700
}

.form-container .order-norobot-field .form-field input[type=checkbox]+label a::before {
	position: absolute;
	bottom: -3px;
	width: 0;
	height: 1px;
	background: #fff;
	content: '';
	transition: width .5s
}

.form-container .order-norobot-field .form-field input[type=checkbox]+label a:focus::before,.form-container .order-norobot-field .form-field input[type=checkbox]+label a:hover::before {
	width: 100%
}

.form-container .order-norobot-field .form-field input[type=checkbox]+label:focus,.form-container .order-norobot-field .form-field input[type=checkbox]+label:hover {
	border-color: #fff;
	color: #fff
}

.form-container .order-norobot-field .form-field input[type=checkbox]+label:focus a,.form-container .order-norobot-field .form-field input[type=checkbox]+label:hover a {
	color: #fff
}

.fade-input {
	opacity: 0;
	transition: all .3s ease-out;
	transform: translateY(50px)
}

.fade-input.show {
	opacity: 1;
	transform: none
}

#careers-form,#order-form {
	top: 0!important
}

.order-form {
	width: 100%
}

.order-form form {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap
}

.order-form .form-container,.order-form .form-holder {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap
}

.order-form .form-container input[type=submit],.order-form .form-holder input[type=submit] {
	display: block;
	color: #383838
}

.form-field {
	position: relative;
	margin-bottom: 40px;
	min-height: 50px
}

.form-field label,.form-field p {
	font-size: 14px
}

.form-field input+label {
	position: absolute;
	top: 17.5px;
	left: 25px;
	color: #383838;
	font-size: 14px;
	line-height: 1;
	transition: font-size 350ms ease,top 350ms ease
}

.form-field .input-has-value {
	top: -15px;
	font-size: 12px
}

.form-field input,.form-field option,.form-field select,.form-field textarea {
	padding: 10px 22px;
	width: 100%;
	outline: 0;
	border: 2px solid #333;
	border-radius: 25px;
	letter-spacing: -.5px;
	transition: .35s ease
}

.form-field input {
	height: 50px;
	background-color: transparent
}

.form-field textarea {
	height: 200px
}

.form-field input[type=email]:focus+label,.form-field input[type=email]:hover+label,.form-field input[type=tel]:focus+label,.form-field input[type=tel]:hover+label,.form-field input[type=text]:focus+label,.form-field input[type=text]:hover+label {
	top: -15px;
	font-size: 12px
}

.form-field input[type=checkbox],.form-field input[type=radio] {
	position: absolute;
	top: 25px;
	left: 0;
	width: 5px;
	height: 5px
}

.form-field input[type=checkbox]+label,.form-field input[type=radio]+label {
	left: 50px;
	cursor: pointer
}

.form-field input[type=checkbox]+label:focus .fake-checkmark,.form-field input[type=checkbox]+label:hover .fake-checkmark,.form-field input[type=radio]+label:focus .fake-checkmark,.form-field input[type=radio]+label:hover .fake-checkmark {
	opacity: .45
}

.form-field input[type=checkbox]:checked+label .fake-check-wrapper,.form-field input[type=radio]:checked+label .fake-check-wrapper {
	border: 2px solid #f8b309;
	background-color: #f8b309
}

.form-field input[type=checkbox]:checked+label .fake-checkmark,.form-field input[type=radio]:checked+label .fake-checkmark {
	color: #fff;
	opacity: 1
}

.form-field input[type=checkbox]:checked+label .fake-checkmark::before,.form-field input[type=radio]:checked+label .fake-checkmark::before {
	background-color: transparent
}

.form-field input[type=checkbox]:checked+label:focus .fake-checkmark,.form-field input[type=checkbox]:checked+label:hover .fake-checkmark,.form-field input[type=radio]:checked+label:focus .fake-checkmark,.form-field input[type=radio]:checked+label:hover .fake-checkmark {
	opacity: 1
}

.form-field .fake-check-wrapper {
	position: absolute;
	top: -70%;
	left: -50px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 30px;
	height: 30px;
	border: 2px solid #383838;
	border-radius: 50%;
	background-color: #fff;
	transition: 350ms ease;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center
}

.form-field .fake-checkmark {
	color: #383838;
	opacity: 0;
	transition: opacity 350ms ease
}

.form-field .fake-checkmark::before {
	display: inline-block;
	margin-top: 2px;
	font-size: 20px
}

.message-field label {
	display: block;
	margin-bottom: 15px;
	color: #383838;
	font-size: 14px
}

.submit-form-field .popart-btn {
	float: right
}

.order-norobot-field {
	margin-bottom: 0;
	min-height: 50px
}

.order-norobot-field .form-field input[type=checkbox]+label {
	top: 50%;
	left: 0;
	transform: translateY(-50%)
}

.order-norobot-field .form-field input[type=checkbox]+label:focus,.order-norobot-field .form-field input[type=checkbox]+label:hover {
	border-color: #383838;
	color: #383838
}

.order-norobot-field .form-field input[type=checkbox]:checked+label .icon-cross:before {
	content: ""
}

.order-norobot-field .fake-checkbox span.icon-cross {
	border: 2px solid #333
}

.order-norobot-field .fake-checkbox span.icon-cross::before {
	top: 2px;
	left: 2px;
	border: 0;
	background-color: #333;
	color: #fff
}

.order-form form .fake-input.invalid-input,.order-form form .invalid-input {
	border: 2px solid #ff3b30
}

.order-form form .invalid-input-msg {
	position: absolute;
	right: 0;
	bottom: -22px;
	display: none;
	padding-right: 20px;
	color: #ff3b30;
	font-weight: 600;
	font-size: 11px
}

.order-form form .fake-checkbox .invalid-norobot {
	border: 2px solid #ff3b30
}

.order-form form .fake-checkbox .invalid-norobot::before {
	border-color: #ff3b30;
	background-color: #ff3b30
}

.undo-img {
	margin-top: 34px;
	height: 41px;
	transform: rotate(-45deg)
}

#form-response,#order-form-response {
	display: none;
	padding: 10px 22px;
	width: 100%;
	min-height: 50px;
	outline: 0;
	border-radius: 25px;
	text-align: center;
	letter-spacing: -.5px;
	transition: .35s ease
}

.notification-message {
	color: #fff;
	line-height: 1.5!important
}

#form-response .notification-message,#order-form-response .notification-message {
	padding: 0;
	font-family: "微軟正黑體","Helvetica Neue",Helvetica,Arial,sans-serif;
	line-height: 2
}

#form-response .icon-cross,#form-response .notification-message,#order-form-response .icon-cross,#order-form-response .notification-message {
	color: #fff
}

#form-response .icon-cross::before,#form-response .notification-message::before,#order-form-response .icon-cross::before,#order-form-response .notification-message::before {
	position: absolute;
	top: 50%;
	right: 20px;
	font-weight: 900;
	font-size: 28px;
	transform: translateY(-50%)
}

.page-banner {
	position: relative;
	z-index: 100;
	padding-top: 160px;
	padding-bottom: 140px;
	background-color: #fff
}

.page-banner .banner-object {
	position: absolute;
	top: 185px;
	right: 184px;
	z-index: 10;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-top: 0;
	width: auto;
	max-width: 45%;
	opacity: 0;
	transition: all 350ms ease;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center
}

.page-banner .banner-object.show {
	right: 0!important;
	opacity: 1;
	transition: all .5s ease .1s
}

.page-banner .banner-object img,.page-banner .banner-object video {
	display: block;
	max-width: 100%
}

.page-banner .banner-object img {
	max-height: 100%
}

.page-banner .banner-object video {
	z-index: 1
}

.page-banner>.container {
	position: relative;
	z-index: 9999;
	height: calc(100vh - 270px)
}

@media only screen and (max-width:1024px) {
	.page-banner>.container {
		height: calc(100vh - 280px);
		pointer-events: none
	}
}

.page-banner.home-banner .banner-object img {
	transform: scale(.9);
	transform-origin: center top
}

.page-banner.home-banner .banner-object img.reset-transform {
	transform: none;
	-ms-transform: none
}

.page-banner.home-banner .banner-caption {
	width: 100%
}

.page-banner .banner-caption {
	position: absolute;
	z-index: 10000;
	top: 51px;
	left: 15px
}

@media only screen and (max-width:1440px) {
	.page-banner .banner-caption {
		top: 0
	}

	.camera {
		top: 10px!important
	}
}

.page-banner .banner-caption span.bigletter {
	position: relative;
	float: left;
	margin-top: 30px;
	margin-bottom: -110px
}

.page-banner.home_top h3 {
	margin-top: 126px;
	position: relative;
	z-index: 9;
	margin: 0;
	margin-top: 120px;
	padding-left: 1rem;
	font-size: 70px;
	line-height: 1
}

@media only screen and (max-width:1400px) {
	.page-banner.home_top h3 {
		margin-top: 107px;
		font-size: 60px
	}
}

@media only screen and (max-width:1200px) {
	.page-banner.home_top h3 {
		margin-top: 103px;
		font-size: 54px
	}
}

@media only screen and (max-width:960px) {
	.page-banner.home_top h3 {
		margin-top: 125px
	}
}

@media only screen and (max-width:768px) {
	.page-banner.home_top h3 {
		margin-top: 65px
	}
}

.page-banner h1 {
	position: relative;
	z-index: 9;
	margin: 0;
	margin-top: 120px;
	padding-left: 1rem;
	font-size: 70px;
	line-height: 1
}

@media only screen and (max-width:1600px) {
	.page-banner h1 {
		font-size: 55px!important;
		line-height: 1.1
	}
}

@media only screen and (max-width:1400px) {
	.page-banner h1 {
		font-size: 46px!important;
		line-height: 1.2
	}
}

@media only screen and (max-width:1200px) {
	.page-banner h1 {
		font-size: 36px!important;
		line-height: 1.2
	}
}

.page-banner h2 {
	margin-top: 40px;
	padding-left: 1rem;
	max-width: 650px;
	color: #333;
	font-weight: 500;
	font-size: 16px;
	font-family: '微軟正黑體',sans-serif
}

.page-banner.home-banner .banner-caption span.bigletter {
	position: absolute;
	top: 0;
	left: 0;
	margin-bottom: 0;
	font-size: 133px
}

@media only screen and (max-width:1600px) {
	.page-banner.home-banner .banner-caption span.bigletter {
		font-size: 133px
	}
}

@media only screen and (max-width:1400px) {
	.page-banner.home-banner .banner-caption span.bigletter {
		font-size: 115px
	}
}

@media only screen and (max-width:1200px) {
	.page-banner.home-banner .banner-caption span.bigletter {
		font-size: 100px
	}
}

.page-banner.single->.container {
	height: calc(100vh - 318px)
}

.sep-line:before {
	top: 752px!important
}

.l-header {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	border: 1px solid #fad029;
	opacity: 0;
	transition: top .1s ease .1s,right .1s ease .1s,bottom .1s ease .1s,left .1s ease .1s,opacity .1s ease .1s,border-color 2.1s ease
}

.l-header:before {
	position: absolute;
	top: 163px;
	right: -20px;
	display: block;
	width: 0;
	height: 1px;
	background-color: #fad029;
	content: '';
	transition: width .7s ease .2s,background-color 1s ease
}

.l-header.show {
	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	opacity: 1
}

.l-header.show:before {
	width: calc(100% + 40px)
}

.fade-lines .l-header {
	border-color: #fef5d0
}

.fade-lines .l-header:before {
	background-color: #fef5d0
}

.l-horizontal {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: -1;
	margin: 0 auto;
	height: 0;
	border-right: 1px solid #fad029;
	border-left: 1px solid #fad029;
	transition: height .3s ease-in .1s,border-color 2.5s ease
}

.l-horizontal.show {
	height: 100%
}

.l-horizontal span,.l-horizontal:after {
	position: absolute;
	top: 0;
	display: block;
	width: 1px;
	height: 100%;
	background-color: #fad029;
	transition: background-color 2.5s ease
}

.l-horizontal:after {
	right: 0;
	left: 0;
	margin: 0 auto;
	content: ''
}

.l-horizontal span:first-child {
	left: 25%
}

.l-horizontal span:last-child {
	right: 25%
}

.fade-lines .l-horizontal {
	border-color: #fef5d0
}

.fade-lines .l-horizontal span,.fade-lines .l-horizontal:after {
	background-color: #fef5d0
}

span.bigletter.animate-bigletter {
	overflow: hidden;
	color: transparent;
	transition: color 1ms ease 250ms
}

span.bigletter.animate-bigletter:before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fad029;
	content: '';
	transition: all .6s ease-out;
	transform: translateX(-101%)
}

span.bigletter.animate-bigletter.show {
	color: #fad029
}

span.bigletter.animate-bigletter.show:before {
	transform: translateX(101%)
}

.write-text .outer-wrapper {
	display: block;
	overflow: hidden
}

.write-text .outer-wrapper .inner-wrapper {
	display: block;
	transition: all .7s cubic-bezier(.85,.1,.25,1);
	transform: translateY(110%)
}

.write-text .outer-wrapper.show .inner-wrapper {
	transform: none
}

.order-form .write-text .outer-wrapper.show {
	padding-left: 60px
}

.forms-wrapper .write-text .inner-wrapper {
	transition: all .6s ease-in-out
}

.info-buttons-wrapper {
	position: relative;
	z-index: 100001;
	width: 0;
	height: 164px;
	transition: all 1.2s ease .8s
}

.info-buttons-wrapper.show {
	width: 100%
}

.info-buttons-wrapper .container {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	margin: 0 auto;
	transform: translateY(-50%)
}

.info-buttons-wrapper .container a,.info-buttons-wrapper .container button {
	opacity: 0;
	transition: all 350ms ease;
	transform: translateY(50px)
}

.info-buttons-wrapper .container a.show,.info-buttons-wrapper .container button.show {
	opacity: 1;
	transform: none
}

.info-buttons-wrapper .container a:not(:first-child),.info-buttons-wrapper .container button:not(:first-child) {
	margin-left: 25px
}

.popart-btn {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 19px 0 17px;
	width: 220px;
	outline: 0;
	border: 2px solid #333;
	border-radius: 30px;
	background-color: rgba(255,255,255,.9);
	color: #333;
	vertical-align: middle;
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	transition: 350ms ease
}

.popart-btn:after {
	position: absolute;
	top: 50%;
	right: 20px;
	color: #333;
	content: "\E011";
	text-transform: none;
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	font-size: 24px;
	font-family: icomoon;
	line-height: 1;
	opacity: 0;
	transition: all 350ms ease;
	transform: translateY(-50%) rotate(-90deg);
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.popart-btn:before {
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 70px;
	height: 2px;
	background-color: #333;
	content: '';
	opacity: 0;
	transition: all 350ms ease;
	transform: translateY(-50%)
}

.popart-btn.white-btn {
	border-color: #fff;
	color: #fff
}

.popart-btn.white-btn:after {
	color: #fff
}

.popart-btn.white-btn:before {
	background-color: #fff
}

.popart-btn:hover {
	color: #fad029;
	text-indent: -20px
}

.popart-btn:hover:after {
	text-indent: 0;
	opacity: 1
}

.popart-btn:hover:before {
	left: 175px;
	width: 12px;
	opacity: 1
}

.order-project {
	padding-bottom: 100px;
	text-align: center
}

.order-project .popart-btn {
	display: block;
	margin: 30px auto 0
}

.order-project .popart-btn {
	border-color: #fad029;
	background-color: #fad029;
	color: #333
}

.order-project .popart-btn:hover {
	color: #333
}

.popart-btn.popart-fill-btn:focus,.popart-btn.popart-fill-btn:hover {
	border: 2px solid #fad029;
	background-color: #fad029;
	color: #333;
	text-indent: 0
}

.popart-btn.popart-fill-btn::after,.popart-btn.popart-fill-btn::before {
	display: none
}

.popart-btn.selected-btn {
	border: 2px solid #fad029;
	background-color: #fad029;
	color: #333;
	text-indent: 0
}

#forms-popup .popart-btn {
	background: #333
}

.forms-wrapper .popart-btn {
	margin-right: 30px
}

.site-main {
	position: relative;
	z-index: 300;
	margin-top: -1px;
	padding: 0;
	background-color: #fff
}

.site-main ul:not(.clients-logo):not(.pricing):not(.contact_ul):not(.domain_name):not(.seo-buttons) {
	padding: 0;
	padding-top: 5vh;
	padding-bottom: 5vh
}

.site-main ul:not(.clients-logo):not(.pricing):not(.contact_ul):not(.domain_name):not(.seo-buttons) li {
	position: relative;
	padding-left: 30px
}

.site-main ul:not(.clients-logo):not(.pricing):not(.contact_ul):not(.domain_name):not(.seo-buttons) li:first-child {
	margin-top: 0
}

.site-main ul:not(.clients-logo):not(.pricing):not(.contact_ul):not(.domain_name):not(.seo-buttons) li:before {
	position: absolute;
	top: 11px;
	left: 13px;
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #fad029;
	content: ''
}

.site-main ul:not(.clients-logo):not(.pricing):not(.contact_ul):not(.domain_name):not(.seo-buttons) li:last-child {
	margin-bottom: 0
}

.page-section.content-divide>.container,.page-section.content-divide>.container-fluid {
	display: -webkit-flex;
	display: -moz-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

@media only screen and (max-width:768px) {
	.header-icons {
		display: none!important
	}

	.main-navigation .this a {
		color: #e4ab2f
	}

	.nav-wrapper {
		background-color: #333!important
	}

	.site-header .site-branding {
		width: 100%;
		max-width: 100%!important
	}

	.site-header .site-branding a {
		margin: auto
	}

	.nav-wrapper-wrapper {
		left: -420px
	}

	.nav-wrapper-wrapper.active {
		left: 0;
		cursor: pointer
	}

	.nav-button-wrapper-wrapper.active .nav-button {
		color: #fff;
		border-color: #fff
	}
}

@media only screen and (max-width:568px) {
	.hidden-mobile {
		display: none!important
	}

	.hidden-mobile.show {
		display: none!important
	}
}

.hidden-desktop {
	display: none
}

@media only screen and (max-width:568px) {
	.show-mobile {
		display: block
	}
}

.mobile-logo {
	display: none!important
}

@media only screen and (max-width:568px) {
	.mobile-logo {
		display: block!important
	}
}

.sections {
	position: relative
}

.sections .section-item {
	position: relative;
	min-height: 100vh
}

.sections .section-item .content {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%)
}

.sections .section-item .content .page-section {
	padding-top: 0;
	padding-bottom: 0
}

.sections .section-item .content .page-section.yellow-block .section-content {
	position: absolute;
	top: 0;
	left: 15px;
	width: 45%;
	transform: none
}

.page-section {
	position: relative;
	z-index: 10;
	padding-top: 60px
}

.page-section .section-image {
	position: relative;
	overflow: hidden
}

.page-section .section-image:after {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 999999;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fef5d0;
	content: '';
	transition: all 2s ease;
	transform: translateX(-101%)
}

.page-section .section-image img {
	display: block;
	margin: 0 auto;
	width: auto;
	opacity: 0
}

.page-section .section-image.show:not(.plx):after {
	transform: translateX(101%)
}

.page-section .section-image.show:not(.plx) img {
	opacity: 1;
	transition: opacity 1ms ease .6s
}

.page-section .section-content a:not(.x-btn):not(.carrer-btn) {
	position: relative;
	color: #333;
	font-weight: 600
}

.page-section .section-content a:not(.x-btn):not(.carrer-btn)::before {
	position: absolute;
	bottom: -3px;
	width: 0;
	height: 1px;
	background: #fad029;
	content: '';
	transition: width .5s
}

.page-section .section-content a:not(.x-btn):not(.carrer-btn):hover::before {
	width: 100%
}

.page-section.yellow-block {
	overflow: hidden
}

.page-section.yellow-block>.container {
	position: relative;
	z-index: 2;
	height: 730px
}

.page-section.yellow-block:not(.video-section)::before {
	position: absolute;
	top: 50px;
	left: 0;
	width: 50%;
	height: 80%;
	background: #fad029;
	content: '';
	transition: transform 1s ease;
	transform: translateX(50%) scaleX(0)
}

.page-section.yellow-block .section-content {
	left: 15px;
	width: 45%
}

.section-content {
	z-index: 9
}

.page-section.yellow-block .video-cont {
	position: absolute;
	top: calc(50% + 125px);
	left: 50%;
	overflow: hidden;
	width: 50%;
	height: 600px;
	transition: transform .7s .2s ease-out;
	transform: translateY(-50%) scale(1,1);
	transform-origin: left top
}

.page-section.yellow-block .video-cont video {
	position: relative;
	top: 50%;
	width: 100%;
	transition: transform ease .5s;
	transform: translateX(-100%) translateY(-50%)
}

.page-section.yellow-block-left .section-content {
	position: absolute;
	top: 40%;
	left: 52%;
	width: 48%;
	transform: translateY(-50%)
}

.page-section.yellow-block-left.show:not(.video-section)::before {
	transform: translateX(0) scaleX(1)!important
}

.page-section.yellow-block.show:not(.video-section)::before {
	transform: translateX(100%) scaleX(1)
}

.page-section.yellow-block.show .video-cont video {
	transform: translateX(0) translateY(-50%)
}

.page-section.yellow-block.yb-alt .section-content {
	right: 15px;
	left: auto
}

.page-section.yellow-block.yb-alt:before {
	left: 0
}

.page-section.yellow-block-higher>.container {
	margin-bottom: 110px
}

.page-section.content-indent .section-content {
	margin-left: 25%;
	padding-top: 0
}

.page-section.content-shorten .section-content {
	width: 75%
}

.page-section.content-divide>.container,.page-section.content-divide>.container-fluid {
	position: relative;
	align-items: center
}

.page-section.content-divide .section-content,.page-section.content-divide .section-image {
	width: 50%
}

.page-section.content-divide img {
	display: block;
	margin: 0 auto
}

.page-section.no-vacancy {
	opacity: .2;
	pointer-events: none!important
}

.page-section .section-image img {
	top: 0!important
}

.showcase-fullimage-wrapper {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10101;
	display: none;
	background: rgba(250,204,22,.56);
	background: radial-gradient(center,ellipse cover,rgba(255,255,255,.56) 40%,#fad029 100%);
	opacity: 0;
	transition: all .5s ease
}

.showcase-fullimage {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80vw;
	height: 80vh;
	transform: translate(-50%,-50%)
}

.showcase-fullimage-image {
	display: block;
	margin: 0 auto;
	max-height: 80vh;
	box-shadow: 0 0 5px 0 rgba(33,33,33,.5);
	opacity: 0;
	transition: all .5s ease;
	transform: scale(5)
}

.open-slider {
	opacity: 1
}

.close-btn {
	position: absolute;
	top: 50px;
	right: 50px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	padding-top: 5px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background-color: #333;
	font-weight: 100;
	font-size: 70px;
	line-height: 1;
	cursor: pointer;
	transition: .4s ease;
	transform-origin: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center
}

.close-btn:focus,.close-btn:hover {
	background-color: #fad029
}

.close-btn:focus::before,.close-btn:hover::before {
	color: #333
}

.btn-dark {
	background-color: #333;
	color: #fff
}

.slider-arrow {
	position: absolute;
	top: 50%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background-color: #333;
	font-weight: 100;
	cursor: pointer;
	transition: .4s ease;
	transform: translateY(-50%);
	transform-origin: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center
}

.slider-arrow:focus,.slider-arrow:hover {
	background-color: #fad029
}

.slider-arrow:focus::before,.slider-arrow:hover::before {
	color: #333
}

.slider-arrow::before {
	padding: 0;
	font-size: 7px;
	transform-origin: center
}

.prev-arrow {
	right: auto;
	left: 50px
}

.prev-arrow::before {
	transform: rotate(180deg)
}

.next-arrow {
	right: 50px;
	left: auto
}

.close-showcase-galllery-btn {
	padding: 0;
	font-size: 40px
}

.close-showcase-galllery-btn,.slider-arrow {
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.08)
}

.home-layer-banner .overlay {
	position: absolute;
	top: 0;
	left: -102px;
	z-index: 999;
	width: 120%;
	height: 100%;
	max-width: unset!important;
	opacity: 1;
	transition: opacity .5s
}

.home-layer-banner .layer {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
	transition: opacity .5s,left .5s,top 10ms
}

.home-layer-banner .layer.l1 {
	top: 17.5vh;
	left: -9.6vh
}

.home-layer-banner .layer.l2 {
	top: 6.6vh;
	left: 43.5vh
}

.home-layer-banner .layer.l3 {
	top: 12.3vh;
	left: 10vh
}

.home-layer-banner .layer.l4 {
	top: 1vh;
	left: 73.5vh
}

.home-layer-banner .layer.l5 {
	top: 160px;
	top: 16.4vh;
	right: 0;
	left: auto;
	overflow: hidden;
	width: 110px;
	height: 141px
}

.home-layer-banner .layer.l5 img {
	width: 197px;
	height: 141px;
	max-width: 197px;
	max-height: 141px
}

.home-layer-banner.visible #home-banner-bg,.home-layer-banner.visible .layer {
	opacity: 1!important
}

.home-layer-banner.visible .overlay {
	opacity: 0
}

.half-width {
	position: relative;
	width: calc(50% - 12.5px)
}

.half-width:nth-child(even) {
	margin-left: 15px
}

.full-width {
	position: relative;
	width: 100%
}

#web-form-response,.notification-message {
	display: none;
	margin-bottom: 0!important;
	padding: 5px 22px!important;
	width: 100%;
	min-height: 50px;
	outline: 0;
	border-radius: 25px;
	text-align: center;
	letter-spacing: -.5px;
	font-size: 14px!important;
	line-height: 1.5!important;
	transition: .35s ease
}

.notification-field-success .notification-message {
	border: 2px solid #3cd964;
	background-color: #3cd964
}

.notification-field-error .notification-message {
	border: #ff3b30;
	background-color: #ff3b30
}

.prevent-desktop-scrolling {
	overflow: hidden
}

.preloader-svg-wrapper {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10101;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	background-color: rgba(255,255,255,.2);
	opacity: 0;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center
}

.animate-svg-path {
	opacity: 1;
	animation: fade-out .45s linear 1s forwards
}

.animate-svg-path #logo-inner,.animate-svg-path #logo-outer {
	transition: 1s cubic-bezier(.41,.01,.44,1)
}

@keyframes fade-out {
	0% {
		opacity: 1
	}

	100% {
		opacity: 0
	}
}

@keyframes fadeUp {
	to {
		padding-top: 0;
		opacity: 1
	}
}

.sub-menu-btn {
	display: none
}

@media only screen and (max-width:1900px) {
	#dropper {
		right: 20px;
		width: 202px;
		height: 216px
	}
}

@media only screen and (max-width:1880px) {
	.page-banner .banner-object {
		max-width: 44%
	}
}

@media only screen and (max-width:1850px) {
	.main-navigation {
		margin-right: 180px
	}
}

@media only screen and (max-width:1650px) {
	.pop-up-wrapper .contact-us-btn,.pop-up-wrapper .contact-us-wrapper {
		padding: 0;
		width: 55px;
		height: 55px;
		font-size: 20px;
		line-height: 62px
	}

	.pop-up-wrapper.open .contact-us-btn,.pop-up-wrapper.open .contact-us-wrapper {
		padding: 0;
		line-height: 68px
	}

	.form-holder .input-wrapper,.pop-up-wrapper .form-container .input-wrapper {
		margin-bottom: 30px
	}

	.form-holder p,.pop-up-wrapper .form-container p {
		margin-bottom: 30px;
		font-size: 40px
	}

	.form-holder .fake-input,.form-holder input,.form-holder textarea,.pop-up-wrapper .form-container .fake-input,.pop-up-wrapper .form-container input,.pop-up-wrapper .form-container textarea {
		display: block;
		padding: 12px 30px;
		width: 100%;
		outline: 0;
		border: 2px solid #959595;
		border-radius: 30px;
		background-color: transparent;
		color: #959595;
		font-size: 14px;
		line-height: 1.2;
		transition: all 350ms ease
	}

	.form-holder .fake-input:focus,.form-holder .fake-input:hover,.form-holder input:focus,.form-holder input:hover,.form-holder textarea:focus,.form-holder textarea:hover,.pop-up-wrapper .form-container .fake-input:focus,.pop-up-wrapper .form-container .fake-input:hover,.pop-up-wrapper .form-container input:focus,.pop-up-wrapper .form-container input:hover,.pop-up-wrapper .form-container textarea:focus,.pop-up-wrapper .form-container textarea:hover {
		border-color: #fff;
		color: #fff
	}

	.form-holder .fake-input:focus+label,.form-holder .fake-input:hover+label,.form-holder input:focus+label,.form-holder input:hover+label,.form-holder textarea:focus+label,.form-holder textarea:hover+label,.pop-up-wrapper .form-container .fake-input:focus+label,.pop-up-wrapper .form-container .fake-input:hover+label,.pop-up-wrapper .form-container input:focus+label,.pop-up-wrapper .form-container input:hover+label,.pop-up-wrapper .form-container textarea:focus+label,.pop-up-wrapper .form-container textarea:hover+label {
		color: #fff
	}

	.form-holder .prev-form,.pop-up-wrapper .form-container .prev-form {
		top: 0;
		left: -10px;
		font-size: 40px
	}

	.form-field {
		margin-bottom: 30px;
		min-height: 45px
	}

	.order-norobot-field {
		min-height: 45px
	}

	.main-navigation {
		margin-right: 80px
	}

	.main-navigation li {
		margin-left: 35px
	}

	.site-footer {
		padding-top: 80px
	}

	.site-footer h2 {
		margin: 15px 0 5px
	}

	.site-footer .footer-info {
		margin-top: 50px
	}

	.site-footer .footer-info li {
		margin-bottom: 0
	}

	.site-footer .copyright {
		margin-top: 45px
	}

	.popart-btn {
		padding: 14px 0 13px
	}

	.close-btn {
		width: 50px;
		height: 50px
	}

	.slider-arrow {
		width: 50px;
		height: 50px
	}

	.slider-arrow::before {
		font-size: 4px
	}

	.close-showcase-galllery-btn {
		font-size: 25px
	}
}

@media only screen and (max-width:1600px) {
	.page-banner.home-banner .banner-object img {
		transform: scale(.7)
	}
}

@media only screen and (max-width:1500px) {
	.site-header .site-branding img,.site-header .site-branding video {
		max-width: 179px
	}

	.site-header .site-branding svg {
		height: 70px!important;
		transform: translateY(5px) translateX(-30px)
	}

	.site-footer #toTop {
		margin-bottom: 10px;
		width: 40px;
		height: 40px
	}

	.site-footer #toTop span {
		font-size: 27px
	}

	.inner-form-btn {
		margin-bottom: 20px
	}

	.undo-img {
		display: block;
		margin-top: 17px;
		margin-left: 50px;
		height: 25px
	}

	.page-banner.home-banner .banner-object img {
		transform: scale(.6)
	}

	.page-banner.home-banner .banner-caption span.bigletter {
		top: 0;
		left: 0
	}

	.home-layer-banner .layer.l2 {
		left: 40.1vh
	}

	.home-layer-banner .layer.l3 {
		top: 15.3vh;
		left: 17vh
	}

	.home-layer-banner .layer.l4 {
		top: 2vh;
		left: 67.5vh
	}

	.home-layer-banner .layer.l5 {
		display: none
	}
}

@media (max-width:1440px) {
	.page-section {
		padding-top: 30px
	}

	.page-banner .banner-object img {
		max-width: 100%
	}

	span.bigletter {
		font-size: 140px
	}

	.team-page {
		padding-top: 0
	}

	.site-header .site-branding {
		position: absolute;
		top: 50%;
		left: 2.5%;
		transform: translateY(-50%)
	}

	.sticky-header .site-header .site-branding {
		position: absolute;
		top: 50%;
		left: 2.5%;
		transform: translateY(-50%)
	}

	.main-navigation {
		margin-right: 50px;
		padding-top: 35px;
		padding-bottom: 35px
	}

	.main-navigation li {
		margin-left: 25px
	}

	.main-navigation a {
		font-size: 16px
	}

	.sub-menu-wrapper {
		top: 50%
	}

	.sub-menu-wrapper a {
		font-size: 14px
	}

	.header-icons .hi-wrapper {
		top: 75px;
		padding-top: 89px
	}

	.section-title {
		font-size: 32px
	}

	.site-footer h2 {
		margin: 5px 0 5px
	}

	.site-footer .footer-pretitle {
		font-size: 15px
	}

	.site-footer .footer-social {
		margin-top: 35px
	}

	.site-footer .copyright {
		margin-top: 45px;
		margin-bottom: 0
	}

	.site-footer .footer-info {
		margin-top: 35px
	}

	.site-footer .footer-info address,.site-footer .footer-info ul {
		padding-left: 0
	}

	.site-footer .footer-pretitle {
		font-size: 17px;
		line-height: 1.8
	}

	.site-footer .footer-info a,.site-footer .footer-info li {
		font-size: 14px;
		line-height: 1.8
	}

	.site-footer .footer-info li.finfo-title,.site-footer .footer-info li.finfo-title a {
		font-size: 21px
	}

	.pop-up-wrapper .contact-us-wrapper {
		bottom: 125px
	}

	.undo-img {
		margin-top: 20px;
		margin-left: 0;
		height: 25px
	}

	.popart-btn {
		width: 150px
	}

	#banner {
		padding-bottom: 130px
	}

	.home-layer-banner .layer.l2 {
		left: 36.1vh
	}

	.sub-menu-wrapper {
		top: 90%
	}
}

@media only screen and (max-width:1420px) {
	.section-title {
		font-size: 36px
	}

	h3.section-title {
		font-size: 32px
	}

	p.section-subtitle {
		font-size: 20px
	}

	.site-main {
		padding: 0 0 100px
	}

	.page-banner {
		padding-bottom: 150px
	}

	.page-banner h1 {
		margin-top: 90px;
		font-size: 55px
	}
}

@media only screen and (max-width:1420px) and (max-width:1366px) {
	.page-banner h1 {
		font-size: 49px
	}
}

@media only screen and (max-width:1420px) {
	.page-banner h2 {
		position: relative;
		z-index: 1;
		margin-top: 10px;
		font-size: 17px
	}

	.page-banner .banner-caption span.bigletter {
		margin-bottom: -87px;
		padding-left: .4rem
	}

	.page-banner.home_top .banner-object {
		margin-top: 0;
		max-width: 47%
	}
}

@media only screen and (max-width:1420px) and (max-width:768px) {
	.page-banner .banner-object img {
		max-width: 100%
	}

	.page-banner .banner-object img .banner-object {
		top: 90px;
		padding: 0
	}
}

@media only screen and (max-width:1370px) {
	.pop-up-wrapper {
		top: 0!important
	}

	.forms-wrapper {
		top: 50%!important
	}
}

@media (max-width:1120px) {
	.page-banner .banner-object {
		margin-top: 0;
		max-width: 47%
	}

	.home-layer-banner.visible #home-banner-bg,.home-layer-banner.visible .layer {
		opacity: .3!important
	}

	.info-buttons-wrapper {
		height: 120px
	}
}

@media (max-width:1024px) {
	body {
		margin-bottom: 0
	}

	.draggable-btn {
		position: relative!important;
		left: 0!important;
		float: none!important;
		margin: 0 auto!important;
		margin-top: 45px!important;
		transform: translateX(0)!important
	}

	.team-page {
		padding-bottom: 700px
	}

	.site-footer {
		position: static
	}

	.site-footer .footer-info address,.site-footer .footer-info ul {
		margin-bottom: 30px;
		width: 100%;
		text-align: center
	}

	.pop-up-wrapper .contact-us-wrapper {
		bottom: 70px
	}

	.page-banner:not(.home_top)>.container {
		height: 400px
	}

	.page-banner:not(.home_top) h2 {
		width: 70%
	}

	.page-banner .banner-caption span.bigletter {
		font-size: 160px
	}

	.page-banner:not(.home-banner) .banner-caption span.bigletter {
		font-size: 120px
	}

	#homewebdev {
		margin-top: 150px!important;
		padding-top: 0!important;
		padding-bottom: 200px
	}

	.page-banner.home-banner .banner-object img.home-banner-image {
		width: 80%
	}
}

@media (max-width:960px) {
	.header-icons {
		position: relative;
		top: 50px;
		right: auto;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		margin-bottom: 40px;
		height: auto;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center
	}

	.page-banner .banner-object video {
		margin: 0 auto;
		max-width: 80%
	}

	.order-form {
		width: 100%
	}

	.site-header {
		top: 0
	}

	.site-header .site-branding,.sticky-header .site-header .site-branding {
		position: relative;
		top: auto;
		left: -30px;
		left: 0;
		padding: 16px 0 15px;
		transform: none
	}

	.site-header .site-branding img,.site-header .site-branding video {
		max-width: 150px
	}

	.site-header .site-branding svg {
		height: 90px!important
	}

	.nav-wrapper {
		position: fixed;
		top: 0;
		right: -420px;
		bottom: 0;
		z-index: 2000;
		overflow-x: hidden;
		margin: 0;
		width: 100%;
		height: 100%;
		max-width: 420px;
		background-color: #383838;
		text-align: center;
		transition: all .7s cubic-bezier(.88,-.26,.13,1.23)
	}

	.nav-wrapper.active {
		right: 0;
		cursor: pointer;
		-webkit-overflow-scrolling: touch
	}

	.nav-wrapper.active::after {
		right: 0
	}

	.main-navigation {
		float: none;
		margin: 170px 0 0;
		padding: 0;
		cursor: pointer
	}

	.main-navigation ul {
		position: static
	}

	.main-navigation li {
		float: none;
		margin: 0 0 5px;
		min-height: 40px
	}

	.main-navigation li.focus>.nav-link-wrap a,.main-navigation li:hover>.nav-link-wrap a {
		transform: none
	}

	.main-navigation a {
		display: block;
		color: #fff;
		letter-spacing: 1px;
		font-weight: 400;
		font-size: 20px;
		line-height: 1
	}

	.main-navigation a:after {
		display: block;
		width: 0;
		height: 1px;
		background-color: #fff;
		content: '';
		transition: 350ms ease
	}

	.main-navigation a:hover:after {
		display: none
	}

	.main-navigation .nav-link-wrap {
		position: relative;
		display: block;
		overflow: hidden
	}

	.main-navigation .nav-link-wrap:after {
		content: none
	}

	.main-navigation .sub-menu-btn {
		position: absolute;
		top: 0;
		left: 30px;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		padding: 2px;
		width: 100%;
		height: 40px;
		color: #fff;
		text-align: left;
		line-height: 1;
		cursor: pointer;
		transition: 350ms ease;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: left;
		-ms-flex-pack: center;
		justify-content: left
	}

	.main-navigation .sub-menu-btn::before {
		font-size: 24px;
		transition: 350ms ease
	}

	.sub-menu-wrapper {
		position: relative;
		top: auto;
		left: auto;
		display: none;
		visibility: visible;
		width: 100%;
		height: auto;
		text-align: center;
		transition: none;
		transform: none
	}

	.sub-menu-wrapper .sub-menu ul {
		padding: 10px 0 30px
	}

	.sub-menu-wrapper .sub-menu li {
		margin-bottom: 0
	}

	.sub-menu-wrapper .sub-menu a {
		font-weight: 300;
		font-size: 16px;
		font-family: "微軟正黑體","Helvetica Neue",Helvetica,Arial,sans-serif
	}

	.sub-menu-wrapper li {
		display: block;
		transform: none
	}

	.sub-menu-wrapper {
		transform: none
	}

	.sub-menu-wrapper .sub-menu:before {
		display: none
	}

	.main-navigation a:after {
		display: none
	}

	.nav-button-wrapper {
		display: block
	}

	.sticky-header .nav-button-wrapper {
		top: 20px;
		padding: 0 0 35px
	}

	.nav-button.active {
		background-color: #383838
	}

	.page-banner .banner-object {
		top: 90px
	}

	.page-banner {
		padding-top: 90px
	}

	.site-header {
		top: 0;
		background: rgba(255,255,255,.8);
		box-shadow: 0 3px 10px -5px rgba(51,51,51,.4);
		transition: transform .3s ease,top .3s ease,background-color 1ms ease .6s,box-shadow 1ms ease .6s
	}

	.l-header.show {
		top: 0
	}

	.page-section {
		padding-bottom: 60px
	}

	.mouse {
		bottom: 250px
	}

	.section-image {
		padding-bottom: 0!important
	}
}

@media (max-width:768px) {
	.header-icons .header-icon:focus+.hi-wrapper .hi-title .hi-title-inner-wrapper,.header-icons .header-icon:hover+.hi-wrapper .hi-title .hi-title-inner-wrapper {
		line-height: 1.5
	}

	#homewebdev>.container {
		display: grid
	}

	#homegraphdesign .bigletter,#homeseo .bigletter,#homewebdesign .bigletter,#homewebdev .bigletter {
		position: static!important;
		padding: 0;
		order: 2;
		margin-top: 20px;
		margin-bottom: 20px;
		font-size: 90px
	}

	#homewebdev .section-image {
		order: 1
	}

	#homewebdev .section-content {
		order: 3
	}

	#homegraphdesign .bigletter {
		order: 2
	}

	#homegraphdesign .section-image {
		order: 1
	}

	#homegraphdesign .section-content {
		order: 3
	}

	.home-graphicdesign>.container .bigletter {
		right: 0;
		left: 50px
	}

	.section-image img {
		display: block;
		margin: 10px auto;
		width: 80%
	}

	#homewebdev {
		margin-top: 0!important;
		padding-bottom: 0!important
	}

	#homewebdev .img_div {
		position: static;
		left: 0;
		width: 100%
	}

	.home-graphicdesign .section-image {
		width: 100%
	}

	.info-buttons-wrapper {
		height: 60px
	}

	.home-layer-banner .layer {
		opacity: .2
	}

	#homewebdev .section-image {
		top: 0!important;
		right: 0
	}

	.order-form .budget-field,.order-form .order-norobot-field {
		width: 100%!important
	}

	.page-banner:not(.home_top) h2 {
		width: 100%
	}

	.page-banner:not(.home_top)>.container {
		height: auto;
		min-height: initial;
		padding-top: 0
	}

	.page-banner:not(.home_top) .banner-object img {
		max-width: 80%
	}

	.page-banner.home-banner .banner-object {
		z-index: 1!important
	}

	.page-banner .banner-object video {
		position: static!important;
		width: 100%!important;
		max-width: 100%!important
	}

	.page-banner .banner-object video {
		display: block
	}

	.page-banner .banner-object {
		width: 100%!important;
		max-width: 100%!important
	}

	.page-banner .banner-object.show {
		top: -5px!important
	}

	.page-banner .banner-object video {
		margin: 10px auto;
		max-width: 80%!important
	}

	.page-banner .banner-caption span.bigletter {
		margin: 0 0 -30px
	}

	.page-banner.home-banner .banner-caption span.bigletter {
		top: -100px;
		font-size: 120px
	}

	span.bigletter.animate-bigletter.show:before {
		content: none!important
	}

	.page-section .section-image.show:not(.plx) img {
		max-width: 750px
	}

	.page-section:not(#homeblog) {
		display: grid
	}

	.page-section .container {
		width: 100%;
		display: grid;
		order: 2
	}

	.page-section .section-image {
		order: 1
	}

	.page-section .section-image.show:not(.plx) img {
		max-width: 60%
	}

	.page-section .section-image.show:not(.plx) img {
		max-width: 100%
	}

	#homewebdev .page-section .section-image>div {
		position: static!important
	}

	#homewebdev .page-section .section-content {
		position: static!important;
		width: 100%
	}

	#homegraphdesign .page-section {
		margin-bottom: 0
	}

	.section-top {
		padding: 10px
	}

	ol li {
		margin-bottom: 0
	}

	ol li::before {
		top: 0;
		margin-right: 0;
		margin-bottom: -11px;
		min-width: 30px
	}

	.section-title {
		margin-bottom: 30px;
		font-size: 35px
	}

	h3.section-title {
		font-size: 30px
	}

	p.section-subtitle {
		margin-bottom: 20px;
		font-size: 18px
	}

	.scroll-btn {
		left: -23.2px!important;
		z-index: 99;
		margin-top: 145px!important
	}

	.x-btn {
		width: 60px;
		height: 60px
	}

	.x-btn span {
		width: 60px;
		height: 60px
	}

	.x-btn span::after {
		height: 22px
	}

	.x-btn span::before {
		width: 22px
	}

	.mouse {
		bottom: 60px;
		z-index: 99
	}

	.team-page {
		padding-bottom: 550px
	}

	.page-banner .banner-object {
		top: 122px
	}

	#dropper {
		display: none
	}

	.scroll-btn {
		margin-top: 250px!important
	}

	.sticky-header .site-header .site-branding a {
		transform: scale(.7)
	}

	.sticky-header .site-header .site-branding {
		max-width: 47px
	}

	.sticky-header .site-header .site-branding a {
		transform: none
	}

	.sticky-header .site-header .site-branding {
		position: relative;
		top: auto;
		left: -30px;
		transform: none
	}

	.nav-wrapper {
		transform: translateZ(0)
	}

	.main-navigation .nav-link-wrap:after {
		transform: none
	}

	.main-navigation li.focus>.nav-link-wrap:after,.main-navigation li:hover>.nav-link-wrap:after {
		transform: none
	}

	.main-navigation li.focus>.nav-link-wrap a,.main-navigation li:hover>.nav-link-wrap a {
		transform: none
	}

	.sticky-header .main-navigation {
		padding: 30px 0
	}

	.sub-menu-wrapper li {
		transform: none
	}

	.header-icons .header-icon-wrap {
		margin-right: 20px;
		background-color: #fff
	}

	.header-icons .header-icon-wrap:focus,.header-icons .header-icon-wrap:hover {
		background-color: #fad029
	}

	.header-icons .hi-wrapper {
		top: auto;
		right: 0;
		bottom: 70px
	}

	.header-icons .hi-content {
		float: none;
		margin: 0 auto;
		width: 100%;
		max-width: 320px;
		background-color: #fad029
	}

	.header-icons .hi-content ul {
		color: #333;
		text-align: initial;
		opacity: 1;
		transform: none
	}

	.header-icons .hi-title .hi-title-inner-wrapper {
		color: #333;
		text-align: left
	}

	.header-icon i,.header-icons .header-icon {
		color: #333!important
	}

	.header-icons .header-icon:focus+.hi-wrapper,.header-icons .header-icon:hover+.hi-wrapper {
		visibility: visible;
		opacity: 1
	}

	.header-icons .header-icon:focus+.hi-wrapper .hi-title .hi-title-inner-wrapper,.header-icons .header-icon:hover+.hi-wrapper .hi-title .hi-title-inner-wrapper {
		transition: none;
		transform: none
	}

	.header-icons .header-icon:focus+.hi-wrapper .hi-content ul,.header-icons .header-icon:hover+.hi-wrapper .hi-content ul {
		transition: none;
		transform: none
	}

	.header-icons .hi-lang li {
		font-size: 14px
	}

	.sticky-header .nav-button-wrapper {
		top: 0
	}

	.sticky-header .nav-button-wrapper {
		padding: 20px 0
	}

	.site-footer .footer-email {
		font-size: 17px
	}

	.site-footer .footer-email {
		font-size: 16px;
		line-height: 1.7
	}

	.site-footer #toTop span {
		font-size: 27px
	}

	.site-footer {
		padding-top: 50px
	}

	.site-footer h2 {
		margin: 20px 0 10px
	}

	.site-footer .footer-info {
		margin-top: 40px
	}

	.site-footer .footer-social {
		margin-top: 40px
	}

	.site-footer .copyright {
		margin-top: 40px
	}

	.forms-wrapper {
		top: 5%!important
	}

	.order-norobot-field .order-norobot label {
		font-size: 9px!important
	}

	.form-holder .prev-form,.pop-up-wrapper .form-container .prev-form {
		left: 0!important
	}

	.pop-up-wrapper.open {
		top: 0!important
	}

	.pop-up-wrapper .contact-us-wrapper:after {
		width: 320vw;
		height: 320vw
	}

	#banner {
		padding-bottom: 0
	}

	.page-banner {
		padding-top: 90px;
		padding-bottom: 0
	}

	.page-banner .banner-object img,.page-banner .banner-object video {
		max-width: 100%;
		margin-left: auto;
		max-width: 88%
	}

	.page-banner .banner-object img {
		top: 20px
	}

	.page-banner.home-banner .banner-object img.home-banner-image {
		margin-left: auto;
		width: 85%;
		max-width: 800px
	}

	.page-banner h1 {
		padding-left: 1rem;
		font-size: 27.5px
	}

	.page-banner h2 {
		margin-top: 20px;
		font-size: 18px
	}

	.page-banner .banner-object {
		position: relative;
		top: 90px;
		margin: 0 0 20px auto;
		padding: 0;
		max-width: 57%;
		width: 80%;
		height: initial;
		max-width: 960px;
		transform: none
	}

	.page-banner>.container {
		height: initial
	}

	.page-banner .banner-caption {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		margin: 20px 0;
		transform: none
	}

	.page-banner.single->.container {
		height: 390px
	}

	.page-banner.single- h2 {
		display: none
	}

	.page-section.yellow-block:not(.video-section)::before {
		top: 210px
	}

	.page-section.content-indent .section-content {
		margin-left: 0;
		order: 2
	}

	.page-section.content-shorten .section-content {
		width: 100%
	}

	.page-section.yellow-block>.container {
		height: 100%
	}

	.page-section.yellow-block:before {
		top: calc(50% + 75px);
		height: 100%
	}

	.page-section.yellow-block.show .section-content {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		transform: none
	}

	.page-section.yellow-block.show .video-cont {
		position: relative;
		top: 0;
		left: 0;
		margin: 40px auto;
		margin-bottom: 0;
		padding: 0 15px 0 16px;
		width: auto;
		height: 100%;
		max-width: 960px;
		transform: none
	}

	.page-section.yellow-block.show .video-cont video {
		width: 100%;
		transform: none
	}

	.page-section.content-divide>.container,.page-section.content-divide>.container-fluid {
		display: block
	}

	.page-section.content-divide>.container-fluid {
		padding: 0 15px
	}

	.page-section.content-divide .section-content,.page-section.content-divide .section-image {
		width: 100%
	}

	.page-section.content-divide .section-image {
		margin: 15px 0
	}

	.page-section.yellow-block:not(.video-section)>.container {
		height: auto
	}

	.page-section.yellow-block:not(.video-section):before {
		top: 50px;
		height: 95%;
		background-color: #fef5d0
	}

	.page-section.yellow-block:not(.video-section) .section-content {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		padding-top: 50px;
		width: 100%;
		transform: none
	}

	.page-section.yellow-block:not(.video-section).yb-alt .section-content {
		right: auto;
		left: auto
	}

	.page-section.video-section.show .video-cont {
		max-width: 630px
	}

	.l-header:before {
		top: 120px
	}

	.l-header {
		border-left-color: transparent;
		border-right-color: transparent
	}

	.l-header.show {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border-bottom: transparent
	}

	.l-header:before {
		right: 0;
		background-color: transparent!important
	}

	.info-buttons-wrapper .container a:first-child {
		margin-right: 10px
	}

	.popart-btn:after {
		right: 10px
	}

	.popart-btn:hover:before {
		left: 144px
	}

	.popart-btn:after,.popart-btn:before {
		content: none
	}

	.popart-btn:hover {
		color: initial;
		text-indent: initial
	}

	.pop-up-wrapper .contact-us-wrapper {
		right: 20px;
		bottom: 70px;
		width: 40px;
		height: 40px
	}

	.pop-up-wrapper .contact-us-btn {
		padding: 0;
		width: 40px;
		height: 40px;
		font-size: 15px;
		line-height: 40px
	}

	.pop-up-wrapper.open .contact-us-btn {
		padding: 0;
		font-size: 20px;
		line-height: 46px
	}

	.pop-up-wrapper {
		transition: background-color 1ms ease .4s,width .4s ease
	}

	.pop-up-wrapper.open {
		background-color: #333;
		transition: width .4s ease .4s;
		overflow-y: auto
	}

	.pop-up-wrapper.open .contact-us-wrapper {
		bottom: calc(100% - 80px)
	}

	.pop-up-wrapper.open .contact-us-wrapper:after {
		content: none
	}

	.forms-wrapper p {
		font-size: 50px
	}

	.forms-wrapper {
		top: 0;
		padding: 50px 10px;
		height: 100%;
		transform: none
	}

	.forms-wrapper p {
		margin-bottom: 30px;
		font-size: 30px
	}

	.site-main {
		padding: 0 0 50px
	}

	.close-btn {
		top: 20px;
		right: 20px
	}

	.slider-arrow {
		top: auto;
		bottom: 0
	}

	.prev-arrow {
		left: 20px
	}

	.next-arrow {
		right: 20px
	}

	.half-width {
		width: 100%
	}

	.half-width:nth-child(even) {
		margin-left: 0
	}

	.half-width:nth-child(even) {
		margin-left: 10px!important
	}

	.inner-form-btn {
		margin-bottom: 25px
	}

	.undo-img {
		display: block;
		margin-top: 19px;
		height: 25px
	}

	#web-form-response,.notification-message {
		font-size: 15px!important
	}

	main.show section {
		animation: fadeUp 0s ease 0s forwards
	}

	main section {
		padding-top: 100px;
		opacity: 0;
		animation: fadeUp .7s ease 2.3s forwards
	}

	.main-navigation {
		margin: 130px 0 0
	}
}

@media (max-width:568px) {
	.home_main .more-btn .draggable-btn {
		padding: 0!important;
		padding-bottom: 0!important;
		margin: 0 auto!important;
		margin-bottom: 0!important
	}

	.more-btn {
		padding: 0!important;
		margin: 0!important
	}

	#homewebdev {
		min-height: initial;
		margin-top: unset!important
	}

	p.section-subtitle {
		line-height: 26px
	}

	.section-title {
		font-size: 20px;
		line-height: 26px;
		margin-bottom: 25px
	}

	.info-buttons-wrapper {
		height: 180px
	}

	.info-buttons-wrapper .container a,.info-buttons-wrapper .container button {
		padding: 10px;
		font-size: 16px;
		border: 1px solid #000
	}

	.home_page .bigletter {
		margin-bottom: 0!important;
		font-size: 50px
	}

	#homegraphdesign .bigletter,#homeseo .bigletter,#homewebdesign .bigletter,#homewebdev .bigletter {
		font-size: 50px
	}

	#homegraphdesign {
		margin-bottom: 0!important
	}

	.form-holder .fake-select:hover .fake-options,.pop-up-wrapper .form-container .fake-select:hover .fake-options {
		height: 300px
	}

	.form-holder .fake-options .f-opt,.pop-up-wrapper .form-container .fake-options .f-opt {
		display: block;
		width: 100%
	}

	.form-holder .fake-options .f-opt:first-child,.pop-up-wrapper .form-container .fake-options .f-opt:first-child {
		margin-top: 10px
	}

	.form-field {
		margin-bottom: 20px;
		min-height: 1px!important
	}

	.pop-up-wrapper .form-container input {
		padding: 5px 30px
	}

	.form-field input+label,.form-holder .input-wrapper label,.order-norobot-field .form-field input[type=checkbox]+label,.pop-up-wrapper .form-container .input-wrapper label {
		top: 11.5px
	}

	.form-field input {
		height: 35px
	}

	.form-holder .fake-input,.pop-up-wrapper .form-container .fake-input {
		min-height: 35px
	}

	.form-holder textarea,.pop-up-wrapper .form-container textarea {
		height: 100px;
		min-height: 100px
	}

	h4.section-title {
		font-size: 27px
	}

	.site-main:not(.home_page) .section-content p {
		text-align: left
	}

	.about_text .about-testimonials div div:first-child {
		font-size: 48px
	}

	.about_text .about-testimonials div div:last-child {
		font-size: 24px
	}

	.page-section.yellow-block:not(.video-section)::before {
		top: 0;
		width: 100%!important;
		transform: translateX(0)!important
	}

	.page-section .section-image.show:not(.plx) img {
		max-width: 100%
	}

	body,button,input,select,textarea {
		line-height: 1.6
	}

	blockquote {
		padding: 0 20px;
		font-size: 16px;
		line-height: 1.5
	}

	span.bigletter {
		font-size: 85px
	}

	h3.section-title {
		font-size: 17px
	}

	.video-section {
		padding-bottom: 0
	}

	.mouse {
		bottom: 0
	}

	.main-navigation {
		margin: 30px 0 0
	}

	.site-footer .footer-email {
		font-size: 15px
	}

	.site-footer {
		bottom: auto;
		left: auto;
		padding-right: 15px;
		padding-left: 15px;
		width: 100%
	}

	.site-footer .footer-info address,.site-footer .footer-info ul {
		float: none
	}

	.site-footer .footer-info li:last-child {
		margin-bottom: 5px
	}

	.forms-wrapper {
		top: 0!important;
		margin-top: 30px
	}

	.forms-wrapper.open {
		margin-top: 31px
	}

	.form-holder p,.pop-up-wrapper .form-container p {
		font-size: 30px
	}

	.form-btn-right {
		margin-top: 60px
	}

	#careers-form,#order-form {
		top: -30px!important
	}

	.undo-img {
		display: block;
		margin-top: 11px;
		height: 21px
	}

	.page-banner h1 {
		padding-left: 0;
		font-size: 27.5px
	}

	.page-banner.home-banner .banner-caption span.bigletter {
		top: -45px;
		padding-left: 0
	}

	.banner-caption .bigletter {
		font-size: 40px!important
	}

	.l-header:before {
		top: 91px
	}

	.order-form .write-text .outer-wrapper.show {
		padding-left: 40px;
		font-size: 28px
	}

	.info-buttons-wrapper .container {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex
	}

	.info-buttons-wrapper .container a:first-child,.info-buttons-wrapper .container button:first-child {
		margin-right: 0;
		margin-left: -20px
	}

	.info-buttons-wrapper .container a:not(:first-child),.info-buttons-wrapper .container button:not(:first-child) {
		right: -20px;
		margin-left: 0
	}

	.info-buttons-wrapper.narucivanje-info-buttons-wrapper .container a:first-child,.info-buttons-wrapper.narucivanje-info-buttons-wrapper .container a:not(:first-child),.info-buttons-wrapper.narucivanje-info-buttons-wrapper .container button:first-child,.info-buttons-wrapper.narucivanje-info-buttons-wrapper .container button:not(:first-child) {
		right: 0;
		margin-left: 0
	}

	.info-buttons-wrapper .container {
		display: block!important
	}

	.popart-btn {
		width: 100%;
		font-size: 18px!important
	}

	.order-project .popart-btn {
		padding: 15px;
		width: 100%;
		font-size: 13px
	}

	.popart-btn {
		position: relative;
		right: 0!important;
		float: none;
		display: block;
		margin: 0 auto!important;
		margin-top: 15px!important;
		margin-bottom: 10px!important;
		width: 100%!important
	}

	#forms-popup .popart-btn {
		margin-bottom: 30px!important
	}

	.forms-wrapper .popart-btn {
		display: block;
		margin-right: 0;
		margin-bottom: 20px
	}

	.page-section.yellow-block:before {
		top: calc(50% + 40px);
		height: 90%
	}

	.half-width:nth-child(even) {
		margin-left: 0!important
	}
}

@media only screen and (max-width:501px) {
	.page-banner {
		padding-bottom: 0
	}

	.page-banner .banner-object {
		padding-bottom: 0
	}

	#banner {
		padding-bottom: 0
	}

	.team-page {
		padding-bottom: 300px
	}

	.scroll-btn {
		bottom: -20px
	}
}

@media only screen and (max-width:360px) {
	.site-footer .footer-social span {
		margin: 0 9px
	}
}

@media (max-width:340px) {
	.form-field {
		margin-bottom: 20px;
		min-height: 1px!important
	}

	.pop-up-wrapper .form-container input {
		padding: 5px 30px
	}

	.form-field input+label,.form-holder .input-wrapper label,.pop-up-wrapper .form-container .input-wrapper label {
		top: 9.5px
	}

	.form-field input {
		height: 30px
	}

	.form-holder .fake-input,.pop-up-wrapper .form-container .fake-input {
		min-height: 30px
	}

	.form-holder textarea,.pop-up-wrapper .form-container textarea {
		height: 80px;
		min-height: 80px
	}

	.page-banner:not(.home-banner) .banner-caption span.bigletter {
		font-size: 40px!important
	}
}

@media only screen and (min-width:600px) {
	.enter-forms-content {
		display: -webkit-box!important;
		display: -webkit-flex!important;
		display: -ms-flexbox!important;
		display: flex!important;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center
	}

	.enter-forms-content {
		display: -webkit-box!important;
		display: -webkit-flex!important;
		display: -ms-flexbox!important;
		display: flex!important;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center
	}

	.form-title-left {
		float: left;
		width: 70%
	}

	.form-btn-right {
		float: right;
		width: 30%
	}

	.form-title-left {
		float: left;
		width: 70%
	}

	.form-btn-right {
		float: right;
		width: 30%
	}

	.inner-form-btn {
		float: right;
		margin: 0 auto;
		margin-right: 0!important;
		margin-bottom: 50px
	}
}

@media only screen and (min-width:768px) {
	.container {
		width: 730px
	}

	.l-loading .container-load {
		width: 600px
	}

	.l-loading .container-load {
		width: 930px
	}

	.l-horizontal {
		right: 0;
		left: 0;
		width: 600px
	}

	.l-horizontal {
		width: 630px
	}

	.page-section.content-indent .section-content {
		margin-left: 0!important
	}
}

@media only screen and (min-width:769px) and (max-width:960px) {
	.page-banner.home-banner .banner-caption span.bigletter {
		top: 0;
		font-size: 120px
	}

	.page-section .section-image.show:not(.plx) img {
		width: 100%;
		max-width: 750px
	}
}

@media only screen and (min-width:960px) {
	li:focus .sub-menu-wrapper,li:hover .sub-menu-wrapper {
		height: auto;
		transition: none
	}

	li:focus .sub-menu-wrapper .sub-menu:before,li:hover .sub-menu-wrapper .sub-menu:before {
		width: 50px
	}

	li:focus .sub-menu-wrapper li,li:hover .sub-menu-wrapper li {
		transition: 350ms ease 350ms;
		transform: translateY(0);
		backface-visibility: hidden
	}

	.sticky-header .sub-menu-wrapper li {
		margin-left: 20px;
		font-size: 15px;
		transform: translateY(200%)
	}

	.sticky-header li:focus .sub-menu-wrapper li,.sticky-header li:hover .sub-menu-wrapper li {
		transform: translateY(-5px)
	}
}

@media only screen and (min-width:992px) {
	.container {
		width: 860px
	}

	.site-main:not(.home_main) .container {
		width: 90%
	}
}

@media (min-width:1024px) {
	.page-banner:not(.home_top) .bigletter {
		font-size: 120px
	}

	.page-banner:not(.home_top) h2 {
		width: 65%;
		line-height: 28px
	}

	.page-banner:not(.home_top) .banner-caption {
		top: 20%
	}

	.page-banner:not(.home_top):not(.portfolio_page) {
		padding-bottom: 100px
	}

	.page-banner>.container {
		height: calc(80vh - 150px)
	}

	.page-banner.home-banner .banner-object {
		z-index: 10003
	}

	#banner.home_top {
		padding-bottom: 120px
	}

	.info-buttons-wrapper {
		height: 100px
	}

	#homewebdesign {
		padding-bottom: 75px
	}

	#homeseo {
		margin: 170px 0 70px
	}
}

@media only screen and (max-width:1336px) and (min-width:1120px) {
	.camera {
		top: 3vh
	}
}

@media only screen and (min-width:960px) {
	.header-icons .header-icon-wrap.show,.header-icons .header-icon-wrap:hover {
		background-color: #fad029
	}

	.header-icons .header-icon-wrap.show .header-icon,.header-icons .header-icon-wrap:hover .header-icon {
		color: #333
	}

	.header-icons .header-icon-wrap.show .hi-wrapper,.header-icons .header-icon-wrap:hover .hi-wrapper {
		visibility: visible;
		opacity: 1;
		transition: 1ms ease;
		min-width: 400px
	}

	.header-icons .header-icon-wrap.show .hi-content,.header-icons .header-icon-wrap:hover .hi-content {
		width: 100%;
		background-color: #fad029;
		box-shadow: inset 0 0 12px 2px #f8b309;
		transition: width .4s ease,background-color 0s ease,box-shadow .4s ease
	}

	.header-icons .header-icon-wrap.show .hi-title .hi-title-inner-wrapper,.header-icons .header-icon-wrap:hover .hi-title .hi-title-inner-wrapper {
		transition: all 0s cubic-bezier(.85,.1,.25,1) 0s;
		transform: none
	}

	.header-icons .header-icon-wrap.show .hi-details,.header-icons .header-icon-wrap:hover .hi-details {
		opacity: 1;
		transition: .5s ease .3s;
		transform: none
	}
}

@media (min-width:1440px) {
	.page-banner:not(.home_top) h2 {
		width: 100%;
		line-height: 32px
	}

	.page-banner:not(.home_top) .bigletter {
		font-size: 120px
	}

	.page-banner .banner-object img {
		max-width: 100%
	}

	#homegraphdesign>.container .bigletter {
		right: 0
	}

	#homewebdev {
		padding-bottom: 200px;
		padding-top: 100px
	}

	#homeseo {
		padding-top: 70px!important;
		padding-bottom: 70px
	}

	.site-main:not(.home_main) .container {
		width: 1000px
	}

	.site-main:not(.home_main) .container {
		width: 1000px
	}

	.inner-form-btn {
		margin-bottom: 60px
	}

	.container {
		padding: 0 15px;
		width: 1000px
	}

	#baner-links {
		bottom: 0;
		top: initial
	}
}

@media only screen and (min-width:1650px) {
	.l-loading .container-load {
		width: 1224px
	}

	.site-main:not(.home_main) .container {
		width: 1254px
	}

	.l-horizontal {
		width: 1224px
	}

	.container {
		width: 1254px
	}
}

@media only screen and (max-width:568px) {
	.site-header .site-branding,.sticky-header .site-header .site-branding {
		left: 0
	}
}

@font-face {
	font-family:icomoon;src:url(../fonts/icomoon.eot);src:url(../fonts/icomoon.eot?#iefix) format("eot"),url(../fonts/icomoon.woff) format("woff"),url(../fonts/icomoon.ttf) format("truetype");font-display: swap;
}

.icon-arrow-up:before,.icon-attachment:before,.icon-behance:before,.icon-check:before,.icon-circle-plus:before,.icon-contract:before,.icon-cross:before,.icon-dribbble:before,.icon-drsh-back:before,.icon-email:before,.icon-facebook:before,.icon-feed:before,.icon-follow:before,.icon-global:before,.icon-google-plus:before,.icon-happy:before,.icon-instagram:before,.icon-keyboard_arrow_down:before,.icon-keyboard_arrow_left:before,.icon-keyboard_arrow_right:before,.icon-linkedin:before,.icon-mail-envelope-closed:before,.icon-mail:before,.icon-menu:before,.icon-narucivanje-header-shape:before,.icon-phone:before,.icon-plus:before,.icon-slider-arrow:before,.icon-twitter:before,.icon-write:before,.order-norobot-field .form-field input[type=checkbox]:checked+label .icon-cross:before {
	text-decoration: none;
	text-transform: none;
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	font-family: icomoon;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.icon-arrow-up:before {
	content: ""
}

.icon-attachment:before {
	content: ""
}

.icon-behance:before {
	content: ""
}

.icon-check:before {
	content: ""
}

.icon-yahoo:before {
	content: "\e900"
}

.icon-circle-plus:before {
	content: ""
}

.icon-contract:before {
	content: ""
}

.icon-cross:before {
	content: ""
}

.icon-dribbble:before {
	content: ""
}

.icon-drsh-back:before {
	content: ""
}

.icon-email:before {
	content: ""
}

.icon-facebook:before {
	content: ""
}

.icon-feed:before {
	content: ""
}

.icon-follow:before {
	content: ""
}

.icon-google-plus:before {
	content: ""
}

.icon-happy:before {
	content: ""
}

.icon-instagram:before {
	content: ""
}

.icon-keyboard_arrow_down:before {
	content: ""
}

.icon-keyboard_arrow_left:before {
	content: ""
}

.icon-keyboard_arrow_right:before {
	content: ""
}

.icon-linkedin:before {
	content: ""
}

.icon-mail-envelope-closed:before {
	content: ""
}

.icon-mail:before {
	content: ""
}

.icon-menu:before {
	content: ""
}

.icon-narucivanje-header-shape:before {
	content: ""
}

.icon-phone:before {
	content: ""
}

.icon-plus:before {
	content: ""
}

.icon-slider-arrow:before {
	content: ""
}

.icon-twitter:before {
	content: ""
}

.icon-write:before {
	content: ""
}

.header-icon i {
	font-size: 18px;
	line-height: 48px;
	text-align: center;
	width: 48px;
	color: #fff;
	padding-right: 0
}

.header-icon:hover i {
	color: #333
}

@media only screen and (max-width:1024px) {
	.main-navigation {
		margin-right: 100px;
		margin-right: 150px;
		padding-top: 35px;
		padding-bottom: 35px
	}

	.main-navigation li {
		margin-left: 15px
	}
}

.nav-wrapper-wrapper {
	display: none
}

@media only screen and (max-width:1024px) {
	.nav-wrapper-wrapper {
		display: block
	}
}

.newListBox {
	overflow: hidden;
	position: relative;
	display: none
}

.web-prezentacije-items .newListBox {
	display: block
}

.newListBox .listBox {
	display: flex;
	display: -ms-flex;
	display: -moz-flex;
	display: -webkit-flex;
	display: -o-flex;
	flex-wrap: wrap;
	margin: 0 -20px
}

.newListBox .listBox .list {
	width: 33.3333333333333333%;
	margin: 0 0 50px 0;
	padding: 0 10px;
	height: 452px
}

.newListBox .listBox .list .li {
	overflow: hidden
}

.newListBox .listBox .list .li .liI {
	overflow: hidden;
	position: relative;
	margin: 0 0 20px 0
}

.newListBox .listBox .list .li .liI .spI {
	overflow: hidden;
	height: 386px;
	margin: 10px 0 0 0;
	-webkit-transition: all .3s ease 0s;
	-moz-transition: all .3s ease 0s;
	-ms-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s
}

.newListBox .listBox .list .li .liI img {
	width: 100%;
	height: auto
}

.newListBox .listBox .list .li .liI .bg {
	overflow: hidden;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: rgba(250,204,22,.3);
	opacity: 0;
	-webkit-transition: all .1s ease 0s;
	-moz-transition: all .1s ease 0s;
	-ms-transition: all .1s ease 0s;
	-o-transition: all .1s ease 0s;
	transition: all .1s ease 0s
}

.newListBox .listBox .list .li:hover .liI {
	margin: 0 0 30px 0
}

.newListBox .listBox .list .li:hover .liI .spI {
	margin: 0
}

.newListBox .listBox .list .li:hover .liI .bg {
	opacity: 1;
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	-ms-transition: all .5s ease 0s;
	-o-transition: all .5s ease 0s;
	transition: all .5s ease 0s
}

.newListBox .listBox .list .li .liT {
	overflow: hidden;
	text-align: center;
	font-size: 20px;
	color: #333;
	height: 36px;
	line-height: 36px
}

.newListBox .listBox .list .li .liT .spD {
	overflow: hidden;
	margin: -35px 0 0 0;
	display: flex;
	display: -ms-flex;
	display: -moz-flex;
	display: -webkit-flex;
	display: -o-flex;
	justify-content: center;
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	-ms-transition: all .5s ease 0s;
	-o-transition: all .5s ease 0s;
	transition: all .5s ease 0s
}

.newListBox .listBox .list .li .liT .spD img {
	height: 20px;
	margin: 9px 0 0 0;
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	-ms-transition: all .5s ease 0s;
	-o-transition: all .5s ease 0s;
	transition: all .5s ease 0s
}

.newListBox .listBox .list .li .liT .spT {
	padding: 0 10px;
	white-space: nowrap;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
	overflow: hidden
}

.newListBox .listBox .list .li:hover .liT .spD {
	margin: 0
}

.newListBox .listBox .list .li:hover .liT .spD img {
	margin: 9px 0 0 15px
}

.newListBox .listBox .list .li .showcase-section {
	position: relative;
	z-index: 10;
	margin-top: 0;
	padding-bottom: 0;
	margin-bottom: 0
}

.newListBox .listBox .list .li .showcase-section .showcase:last-child,.newListBox .listBox .list .li .showcase-section .singe-portfolio:last-child {
	margin: 0;
	width: auto;
	max-width: initial
}

.newListBox .listBox .list .li .showcase-section img {
	display: block;
	margin: 0 auto;
	width: auto;
	max-width: initial;
	transition: none;
	-webkit-transform-origin: inherit;
	transform-origin: inherit;
	-ms-transform-origin: inherit
}

.newListBox .listBox .list .li .showcase-section .showcase:before,.newListBox .listBox .list .li .showcase-section .singe-portfolio:before {
	border: none
}

.newListBox .listBox .list .li .showcase-section .showcase:after,.newListBox .listBox .list .li .showcase-section .singe-portfolio:after {
	border: none
}

.newListBox .listBox .list .li .showcase-section .showcase:hover:after,.newListBox .listBox .list .li .showcase-section .singe-portfolio:hover:after {
	transition: none;
	border-bottom-color: #facc16;
	border-right-color: #facc16
}

.newListBox .listBox .list .li .showcase-section .showcase:hover:before,.newListBox .listBox .list .li .showcase-section .singe-portfolio:hover:before {
	transition: none;
	border-top-color: #facc16;
	border-left-color: #facc16
}

.newListBox .listBox .list .li .showcase-section:not(.portfolio-photo) .showcase:hover .showcase-img,.newListBox .listBox .list .li .showcase-section:not(.portfolio-photo) .singe-portfolio:hover .portfolio-img {
	transform: none
}

.newListBox .listBox .list .li .liI img {
	width: 100%;
	height: auto
}

.newListDetail {
	overflow: hidden;
	position: relative;
	width: 1280px;
	margin: auto
}

.newListDetail .tit {
	overflow: hidden;
	position: relative;
	text-align: center
}

.newListDetail .tit h2 {
	font-size: 20px;
	margin: 0;
	line-height: 40px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: center
}

.newListDetail .tit h2 img {
	margin: 0 0 0 15px
}

.newListDetail .tit h4 {
	font-size: 16px;
	margin: 30px 0 15px 0;
	color: #facc16;
	font-weight: 700
}

.newListDetail .tit p {
	color: #666;
	margin: 0
}

.newListDetail .center {
	overflow: hidden;
	position: relative;
	text-align: center;
	padding: 0 0 120px 0;
	margin: 40px auto 0
}

.newListDetail .center .spI {
	overflow: hidden;
	position: relative;
	width: 1280px;
	margin: auto;
	text-align: center;
	padding: 5px 10px;
}

.newListDetail .center .spI img {
	width: auto;
	max-width: 100%;
	height: auto;
	box-shadow: 2px 6px 12px 0px rgba(0,0,0,0.2)
}

.portfolio-wrapper .mainBox {
	overflow: hidden;
	padding: 0 95px
}

@media only screen and (max-width:1680px) {
	.newListBox .listBox .list {
		height: 398px
	}

	.newListBox .listBox .list .li .liI .spI {
		height: 332px
	}
}

@media only screen and (max-width:1600px) {
	.newListBox .listBox .list {
		height: 380px
	}

	.newListBox .listBox .list .li .liI .spI {
		height: 314px
	}
}

@media only screen and (max-width:1440px) {
	.newListBox .listBox .list {
		height: 330px
	}

	.newListBox .listBox .list .li .liI .spI {
		height: 264px
	}
}

@media only screen and (max-width:1366px) {
	.newListBox .listBox .list {
		height: 312px
	}

	.newListBox .listBox .list .li .liI .spI {
		height: 246px
	}
}

@media only screen and (max-width:1360px) {
	.newListBox .listBox .list {
		height: 312px
	}

	.newListBox .listBox .list .li .liI .spI {
		height: 246px
	}
}

@media only screen and (max-width:1280px) {
	.newListBox .listBox .list {
		height: 302px
	}

	.newListBox .listBox .list .li .liI .spI {
		height: 242px
	}

	.main-navigation li {
		margin-left: 20px
	}
}

@media only screen and (max-width:1152px) {
	.main-navigation {
		margin-right: 150px
	}

	.main-navigation li {
		margin-left: 18px
	}
}

@media only screen and (max-width:1024px) {
	.newListDetail {
		width: 100%
	}

	.newListDetail .center .spI {
		width: 100%
	}

	.newListBox .listBox .list {
		height: 280px
	}

	.newListBox .listBox .list .li .liI .spI {
		height: 214px
	}

	.portfolio-wrapper .mainBox {
		padding: 0
	}
}

@media only screen and (max-width:768px) {
	.newListBox .listBox .list {
		height: 220px
	}

	.newListBox .listBox .list .li .liI .spI {
		height: 156px
	}
}

@media only screen and (max-width:767px) {
	.newListDetail .tit h2 {
		font-size: 18px
	}

	.newListBox .listBox .list {
		width: 50%;
		margin: 0 0 20px 0;
		height: 176px
	}

	.newListBox .listBox .list .li .liI {
		margin: 0 0 10px 0
	}

	.newListBox .listBox .list .li .liT {
		font-size: 14px
	}

	.newListBox .listBox .list .li .liI .spI {
		height: 120px
	}
}

@media only screen and (max-width:375px) {
	.newListBox .listBox .list {
		height: 162px
	}

	.newListBox .listBox .list .li .liI .spI {
		height: 106px
	}
}

@media only screen and (max-width:360px) {
	.newListBox .listBox .list {
		height: 158px
	}

	.newListBox .listBox .list .li .liI .spI {
		height: 102px
	}
}

@media only screen and (max-width:320px) {
	.newListBox .listBox .list {
		height: 144px
	}

	.newListBox .listBox .list .li .liI .spI {
		height: 88px
	}
}

#desktop_whatsapp {
	transition: 0.5s ease;
	position: fixed;
	right: 20px;
	bottom: 20px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	background-color: #4dc247;
	z-index: 99999;
	padding: 8px;
	box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.5);
}

#desktop_whatsapp:hover {
	box-shadow: 2px 2px 15px 0px rgba(0,0,0,0.8);
}

@media(max-width: 768px) {
	#desktop_whatsapp {
		display: none;
	}
}