/* Swiper min */



body{

	/*min-width: 1180px;*/

}

.clear{clear:both;}



.cases-info-title{

	padding-top: 50px;

}



.cases-info-line{

	display: inline-block;

	width: 65px;

	height: 2px;

	background-color:rgba(0,174,239,1.00);

	margin-top: 35px;

	margin-bottom: 35px;

}



.cases-info-en{

	line-height: 40px;

	padding-bottom: 30px;

}



.cases-info-other {

	position: relative;

	padding: 40px 0 0;

	border-top: 1px solid #cccccc;

	margin-top: 44px;

}



.swiper-container {

	margin: 0 auto;

	position: relative;

	overflow: hidden;

	list-style: none;

	padding: 0;

	z-index: 1

}



.swiper-container-no-flexbox .swiper-slide {

	float: left

}



.swiper-container-vertical>.swiper-wrapper {

	-webkit-box-orient: vertical;

	-webkit-box-direction: normal;

	-webkit-flex-direction: column;

	-ms-flex-direction: column;

	flex-direction: column

}



.swiper-wrapper {

	position: relative;

	width: 100%;

	height: 100%;

	z-index: 1;

	display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-transition-property: -webkit-transform;

	transition-property: -webkit-transform;

	-o-transition-property: transform;

	transition-property: transform;

	transition-property: transform,-webkit-transform;

	-webkit-box-sizing: content-box;

	box-sizing: content-box

}



.swiper-container-android .swiper-slide,.swiper-wrapper {

	-webkit-transform: translate3d(0,0,0);

	transform: translate3d(0,0,0)

}



.swiper-container-multirow>.swiper-wrapper {

	-webkit-flex-wrap: wrap;

	-ms-flex-wrap: wrap;

	flex-wrap: wrap

}



.swiper-container-free-mode>.swiper-wrapper {

	-webkit-transition-timing-function: ease-out;

	-o-transition-timing-function: ease-out;

	transition-timing-function: ease-out;

	margin: 0 auto

}



.swiper-slide {

	-webkit-flex-shrink: 0;

	-ms-flex-negative: 0;

	flex-shrink: 0;

	width: 100%;

	height: 100%;

	position: relative;

	-webkit-transition-property: -webkit-transform;

	transition-property: -webkit-transform;

	-o-transition-property: transform;

	transition-property: transform;

	transition-property: transform,-webkit-transform

}



.swiper-slide-invisible-blank {

	visibility: hidden

}



.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide {

	height: auto

}



.swiper-container-autoheight .swiper-wrapper {

	-webkit-box-align: start;

	-webkit-align-items: flex-start;

	-ms-flex-align: start;

	align-items: flex-start;

	-webkit-transition-property: height,-webkit-transform;

	transition-property: height,-webkit-transform;

	-o-transition-property: transform,height;

	transition-property: transform,height;

	transition-property: transform,height,-webkit-transform

}



.swiper-container-3d {

	-webkit-perspective: 1200px;

	perspective: 1200px

}



.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper {

	-webkit-transform-style: preserve-3d;

	transform-style: preserve-3d

}



.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top {

	position: absolute;

	left: 0;

	top: 0;

	width: 100%;

	height: 100%;

	pointer-events: none;

	z-index: 10

}



.swiper-container-3d .swiper-slide-shadow-left {

	background-image: -webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));

	background-image: -webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));

	background-image: -o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));

	background-image: linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))

}



.swiper-container-3d .swiper-slide-shadow-right {

	background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));

	background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));

	background-image: -o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));

	background-image: linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))

}



.swiper-container-3d .swiper-slide-shadow-top {

	background-image: -webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));

	background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));

	background-image: -o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));

	background-image: linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))

}



.swiper-container-3d .swiper-slide-shadow-bottom {

	background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));

	background-image: -webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));

	background-image: -o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));

	background-image: linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))

}



.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper {

	-ms-touch-action: pan-y;

	touch-action: pan-y

}



.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper {

	-ms-touch-action: pan-x;

	touch-action: pan-x

}



.swiper-button-next,.swiper-button-prev {

	position: absolute;

	top: 50%;

	width: 27px;

	height: 44px;

	margin-top: -22px;

	z-index: 10;

	cursor: pointer;

	background-size: 27px 44px;

	background-position: center;

	background-repeat: no-repeat

}



.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled {

	opacity: .35;

	cursor: auto;

	pointer-events: none

}



.swiper-button-prev,.swiper-container-rtl .swiper-button-next {

	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");

	left: 10px;

	right: auto

}



.swiper-button-next,.swiper-container-rtl .swiper-button-prev {

	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");

	right: 10px;

	left: auto

}



.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white {

	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")

}



.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white {

	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")

}



.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black {

	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")

}



.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black {

	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")

}



.swiper-button-lock {

	display: none

}



.swiper-pagination {

	position: absolute;

	text-align: center;

	-webkit-transition: .3s opacity;

	-o-transition: .3s opacity;

	transition: .3s opacity;

	-webkit-transform: translate3d(0,0,0);

	transform: translate3d(0,0,0);

	z-index: 10

}



.swiper-pagination.swiper-pagination-hidden {

	opacity: 0

}



.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction {

	bottom: 10px;

	left: 0;

	width: 100%

}



.swiper-pagination-bullets-dynamic {

	overflow: hidden;

	font-size: 0

}



.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {

	-webkit-transform: scale(.33);

	-ms-transform: scale(.33);

	transform: scale(.33);

	position: relative

}



.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {

	-webkit-transform: scale(1);

	-ms-transform: scale(1);

	transform: scale(1)

}



.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {

	-webkit-transform: scale(1);

	-ms-transform: scale(1);

	transform: scale(1)

}



.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {

	-webkit-transform: scale(.66);

	-ms-transform: scale(.66);

	transform: scale(.66)

}



.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {

	-webkit-transform: scale(.33);

	-ms-transform: scale(.33);

	transform: scale(.33)

}



.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {

	-webkit-transform: scale(.66);

	-ms-transform: scale(.66);

	transform: scale(.66)

}



.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {

	-webkit-transform: scale(.33);

	-ms-transform: scale(.33);

	transform: scale(.33)

}



.swiper-pagination-bullet {

	width: 8px;

	height: 8px;

	display: inline-block;

	border-radius: 100%;

	background: #000;

	opacity: .2

}



button.swiper-pagination-bullet {

	border: none;

	margin: 0;

	padding: 0;

	-webkit-box-shadow: none;

	box-shadow: none;

	-webkit-appearance: none;

	-moz-appearance: none;

	appearance: none

}



.swiper-pagination-clickable .swiper-pagination-bullet {

	cursor: pointer

}



.swiper-pagination-bullet-active {

	opacity: 1;

	background: #007aff

}



.swiper-container-vertical>.swiper-pagination-bullets {

	right: 10px;

	top: 50%;

	-webkit-transform: translate3d(0,-50%,0);

	transform: translate3d(0,-50%,0)

}



.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {

	margin: 6px 0;

	display: block

}



.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {

	top: 50%;

	-webkit-transform: translateY(-50%);

	-ms-transform: translateY(-50%);

	transform: translateY(-50%);

	width: 8px

}



.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {

	display: inline-block;

	-webkit-transition: .2s top,.2s -webkit-transform;

	transition: .2s top,.2s -webkit-transform;

	-o-transition: .2s transform,.2s top;

	transition: .2s transform,.2s top;

	transition: .2s transform,.2s top,.2s -webkit-transform

}



.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {

	margin: 0 4px

}



.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {

	left: 50%;

	-webkit-transform: translateX(-50%);

	-ms-transform: translateX(-50%);

	transform: translateX(-50%);

	white-space: nowrap

}



.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {

	-webkit-transition: .2s left,.2s -webkit-transform;

	transition: .2s left,.2s -webkit-transform;

	-o-transition: .2s transform,.2s left;

	transition: .2s transform,.2s left;

	transition: .2s transform,.2s left,.2s -webkit-transform

}



.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {

	-webkit-transition: .2s right,.2s -webkit-transform;

	transition: .2s right,.2s -webkit-transform;

	-o-transition: .2s transform,.2s right;

	transition: .2s transform,.2s right;

	transition: .2s transform,.2s right,.2s -webkit-transform

}



.swiper-pagination-progressbar {

	background: rgba(0,0,0,.25);

	position: absolute

}



.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {

	background: #007aff;

	position: absolute;

	left: 0;

	top: 0;

	width: 100%;

	height: 100%;

	-webkit-transform: scale(0);

	-ms-transform: scale(0);

	transform: scale(0);

	-webkit-transform-origin: left top;

	-ms-transform-origin: left top;

	transform-origin: left top

}



.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {

	-webkit-transform-origin: right top;

	-ms-transform-origin: right top;

	transform-origin: right top

}



.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {

	width: 100%;

	height: 4px;

	left: 0;

	top: 0

}



.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar {

	width: 4px;

	height: 100%;

	left: 0;

	top: 0

}



.swiper-pagination-white .swiper-pagination-bullet-active {

	background: #fff

}



.swiper-pagination-progressbar.swiper-pagination-white {

	background: rgba(255,255,255,.25)

}



.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {

	background: #fff

}



.swiper-pagination-black .swiper-pagination-bullet-active {

	background: #000

}



.swiper-pagination-progressbar.swiper-pagination-black {

	background: rgba(0,0,0,.25)

}



.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {

	background: #000

}



.swiper-pagination-lock {

	display: none

}



.swiper-scrollbar {

	border-radius: 10px;

	position: relative;

	-ms-touch-action: none;

	background: rgba(0,0,0,.1)

}



.swiper-container-horizontal>.swiper-scrollbar {

	position: absolute;

	left: 1%;

	bottom: 3px;

	z-index: 50;

	height: 5px;

	width: 98%

}



.swiper-container-vertical>.swiper-scrollbar {

	position: absolute;

	right: 3px;

	top: 1%;

	z-index: 50;

	width: 5px;

	height: 98%

}



.swiper-scrollbar-drag {

	height: 100%;

	width: 100%;

	position: relative;

	background: rgba(0,0,0,.5);

	border-radius: 10px;

	left: 0;

	top: 0

}



.swiper-scrollbar-cursor-drag {

	cursor: move

}



.swiper-scrollbar-lock {

	display: none

}



.swiper-zoom-container {

	width: 100%;

	height: 100%;

	display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-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;

	text-align: center

}



.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg {

	max-width: 100%;

	max-height: 100%;

	-o-object-fit: contain;

	object-fit: contain

}



.swiper-slide-zoomed {

	cursor: move

}



.swiper-lazy-preloader {

	width: 42px;

	height: 42px;

	position: absolute;

	left: 50%;

	top: 50%;

	margin-left: -21px;

	margin-top: -21px;

	z-index: 10;

	-webkit-transform-origin: 50%;

	-ms-transform-origin: 50%;

	transform-origin: 50%;

	-webkit-animation: swiper-preloader-spin 1s steps(12,end) infinite;

	animation: swiper-preloader-spin 1s steps(12,end) infinite

}



.swiper-lazy-preloader:after {

	display: block;

	content: '';

	width: 100%;

	height: 100%;

	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

	background-position: 50%;

	background-size: 100%;

	background-repeat: no-repeat

}



.swiper-lazy-preloader-white:after {

	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")

}



@-webkit-keyframes swiper-preloader-spin {

	100% {

		-webkit-transform: rotate(360deg);

		transform: rotate(360deg)

	}

}



@keyframes swiper-preloader-spin {

	100% {

		-webkit-transform: rotate(360deg);

		transform: rotate(360deg)

	}

}



.swiper-container .swiper-notification {

	position: absolute;

	left: 0;

	top: 0;

	pointer-events: none;

	opacity: 0;

	z-index: -1000

}



.swiper-container-fade.swiper-container-free-mode .swiper-slide {

	-webkit-transition-timing-function: ease-out;

	-o-transition-timing-function: ease-out;

	transition-timing-function: ease-out

}



.swiper-container-fade .swiper-slide {

	pointer-events: none;

	-webkit-transition-property: opacity;

	-o-transition-property: opacity;

	transition-property: opacity

}



.swiper-container-fade .swiper-slide .swiper-slide {

	pointer-events: none

}



.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active {

	pointer-events: auto

}



.swiper-container-cube {

	overflow: visible

}



.swiper-container-cube .swiper-slide {

	pointer-events: none;

	-webkit-backface-visibility: hidden;

	backface-visibility: hidden;

	z-index: 1;

	visibility: hidden;

	-webkit-transform-origin: 0 0;

	-ms-transform-origin: 0 0;

	transform-origin: 0 0;

	width: 100%;

	height: 100%

}



.swiper-container-cube .swiper-slide .swiper-slide {

	pointer-events: none

}



.swiper-container-cube.swiper-container-rtl .swiper-slide {

	-webkit-transform-origin: 100% 0;

	-ms-transform-origin: 100% 0;

	transform-origin: 100% 0

}



.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active {

	pointer-events: auto

}



.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev {

	pointer-events: auto;

	visibility: visible

}



.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top {

	z-index: 0;

	-webkit-backface-visibility: hidden;

	backface-visibility: hidden

}



.swiper-container-cube .swiper-cube-shadow {

	position: absolute;

	left: 0;

	bottom: 0;

	width: 100%;

	height: 100%;

	background: #000;

	opacity: .6;

	-webkit-filter: blur(50px);

	filter: blur(50px);

	z-index: 0

}



.swiper-container-flip {

	overflow: visible

}



.swiper-container-flip .swiper-slide {

	pointer-events: none;

	-webkit-backface-visibility: hidden;

	backface-visibility: hidden;

	z-index: 1

}



.swiper-container-flip .swiper-slide .swiper-slide {

	pointer-events: none

}



.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active {

	pointer-events: auto

}



.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top {

	z-index: 0;

	-webkit-backface-visibility: hidden;

	backface-visibility: hidden

}



.swiper-container-coverflow .swiper-wrapper {

	-ms-perspective: 1200px

}



/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

html {

	font-family: sans-serif;

	-ms-text-size-adjust: 100%;

	-webkit-text-size-adjust: 100%;

	height: 100%;

}



body {

	margin: 0;

}



article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

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;

}



a {

	background-color: transparent;

	text-decoration: none;

}



a:active,

a:hover {

	outline: 0;

}



abbr[title] {

	border-bottom: 1px dotted;

}



b,

strong {

	font-weight: bold;

}



dfn {

	font-style: italic;

}



h1 {

	font-size: 2em;

	margin: 0.67em 0;

}



mark {

	background: #ff0;

	color: #000;

}



small {

	font-size: 80%;

}



sub,

sup {

	font-size: 75%;

	line-height: 0;

	position: relative;

	vertical-align: baseline;

}



sup {

	top: -0.5em;

}



sub {

	bottom: -0.25em;

}



img {

	border: 0;

}



svg:not(:root) {

	overflow: hidden;

}



figure {

	margin: 1em 40px;

}



hr {

	box-sizing: content-box;

	height: 0;

}



pre {

	overflow: auto;

}



code,

kbd,

pre,

samp {

	font-family: monospace, monospace;

	font-size: 1em;

}



button,

input,

optgroup,

select,

textarea {

	color: inherit;

	font: inherit;

	margin: 0;

}



button {

	overflow: visible;

}



button,

select {

	text-transform: none;

}



button,

html input[type="button"],

input[type="reset"] {

	-webkit-appearance: button;

	cursor: pointer;

}



button[disabled],

html input[disabled] {

	cursor: default;

}



button::-moz-focus-inner,

input::-moz-focus-inner {

	border: 0;

	padding: 0;

}



input {

	line-height: normal;

}



input[type="checkbox"],

input[type="radio"] {

	box-sizing: border-box;

	padding: 0;

}



input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

	height: auto;

}



input[type="search"] {

	-webkit-appearance: none;

}



input[type="search"]::-webkit-search-cancel-button,

input[type="search"]::-webkit-search-decoration {

	-webkit-appearance: none;

}



fieldset {

	border: 1px solid #c0c0c0;

	margin: 0 2px;

	padding: 0.35em 0.625em 0.75em;

}



legend {

	border: 0;

	padding: 0;

}



textarea {

	overflow: auto;

}



optgroup {

	font-weight: bold;

}



table {

	border-collapse: collapse;

	border-spacing: 0;

}



td,

th {

	padding: 0;

}



.hidden {

	display: none;

}



.casestudies a{color: #fff}

.fixed a{color: #000;}



/* Structure */

body {

	font-family: "PingFang SC", "Microsoft Yahei", STXihei, "华文细黑", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft Yahei", "Wenquanyi Micro Hei", sans-serif;

	counter-reset: nav-counter;

}



ul {

	list-style: none;

	margin: 0;

	padding: 0;

}



ul li {

	list-style: none;

}



.container {

	width: calc(100% - 40px);

	max-width: 1680px;

	margin-right: 20px;

	margin-left: 20px;

}



@media (min-width: 768px) {

	.container {

		width: calc(100% - 60px);

		margin-right: 30px;

		margin-left: 30px;

	}

}



@media (min-width: 1200px) {

	.container {

		width: calc(100% - 80px);

		margin-right: 40px;

		margin-left: 40px;

	}

}



@media (min-width: 1440px) {

	.container {

		width: calc(100% - 120px);

		margin-right: 60px;

		margin-left: 60px;

	}

}



@media (min-width: 1800px) {

	.container {

		width: 100%;

		margin-right: auto;

		margin-left: auto;

	}

}



.page {

	margin-top: 115px;

}



@media (min-width: 992px) {

	.page {

		margin-top: calc(50px);

	}

}



@media (min-width: 1200px) {

	.page {

		margin-top: calc(70px);

	}

}



@media (min-width: 992px) {

	.page-casestudy {

		margin-top: 130px;

	}

}



.page-hero {

	position: relative;

	width: 100%;

	height: 400px;

}



.page-hero .content-overlap {

	position: relative;

	z-index: 5;

}



.page-hero-bg {

	position: absolute;

	top: 0;

	left: 0;

	z-index: 0;

	width: 100%;

	height: 100%;

	background-color: white;

	background-size: cover;

	background-repeat: no-repeat;

	background-position: center;

	overflow: hidden;

}



.page-hero-bg img {

	position: absolute;

	opacity: 0;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	-o-object-fit: cover;

	object-fit: cover;

	-webkit-transform: scale(1);

	-ms-transform: scale(1);

	transform: scale(1);

	transition: opacity .5s linear;

	-ms-transition: opacity .5s linear;

	-webkit-transition: opacity .5s linear;

}



.page-hero-bg img.loaded {

	opacity: 1;

}



.page-hero.aboutus .page-hero-bg {

	width: 100%;

}



.thumbnails {

	filter: blur(4px);

	transition: all 0.7s;

}



@media (min-width: 768px) {

	.page-hero {

		height: 500px;

	}



	.page-hero.aboutus {

		height: 600px;

	}

}



@media (min-width: 992px) {

	.page-hero.aboutus .page-hero-bg {

		

	}

}



@media (min-width: 1200px) {

	.page-hero {

		height: 600px;

	}



	.page-hero.aboutus {

		height: 690px;

	}

}



@media (min-width: 1440px) {

	.page-hero {

		height: 720px;

	}



	.page-hero.aboutus {

		height: 690px;

	}

}



.page-hero.indent {

	display: flex;

	justify-content: flex-end;

	align-items: flex-end;

}





.page-hero .content-overlap {

	position: absolute;

	text-align: justify;

	background: white;

	right: 0;

	bottom: 0;

	padding: 20px;

	margin-top: 500px;

	margin-bottom: 0;

}
.page-hero .content-overlap p{font-size: 15px;line-height: 26px;}


@media (min-width: 992px) {

	.page-hero .content-overlap {

		max-width: 620px;

		box-sizing: border-box;

		margin-top: 160px;

		padding: 60px;

		padding-bottom: 0;



	}

}



@media (min-width: 1200px) {

	.page-hero .content-overlap {

		max-width: 740px;

		margin-top: 160px;

		padding: 80px 60px;

		padding-bottom: 0px;



	}

}



@media (min-width: 1440px) {

	.page-hero .content-overlap {

		max-width: 900px;

		margin-top: 160px;

		padding: 40px 60px;

		padding-bottom: 0px;



	}

}



@media (min-width: 992px) and (max-width: 1500px){

	.page-hero .content-overlap{

		max-height: 600px;

		overflow-y: auto;

	}

	.page-hero .content-overlap::-webkit-scrollbar{

		width: 0;

	}

}





section.fullheight {

	position: relative;

	width: 100%;

	height: 90vh;

	padding: 0;

}



@media (min-width: 640px) {

	.page-aside {

		width: 80px;

		border-top: 1px solid #C4C4C4;

		margin-right: 60px;

		margin-top: 50px;

	}

}



@media (min-width: 1200px) {

	.page-aside {

		width: 140px;

		margin-right: 120px;

	}

}



@media (min-width: 1440px) {

	.page-aside {

		width: 260px;

		margin-right: 168px;

		flex: none;

	}

}



@media (min-width:640px) and (max-width:768px) {

	.text-block-h1 {

		font-size: 36px;

	}

}



@media (min-width:320px) and (max-width:420px) {

	.text-block-h1 {

		font-size: 20px;

	}



	.page-aside {

		width: 45px;

		border-top: 1px solid #C4C4C4;

		margin-right: 6px;

		margin-top: 26px;

	}

}



.page-content {

	width: 100%;

	max-width: 1250px;

}



.text-block {

	max-width: 890px;

	margin-bottom: 40px;

}



.text-block.full-width {

	max-width: 100%;

}



.text-block.space_large {

	margin-bottom: 95px;

}



@media (min-width:320px) and (max-width:420px) {

	.text-block.space_large {

		margin-bottom: 55px;

	}

}



.text-block.space_medium {

	margin-bottom: 60px;

}



.text-block ul,

.text-block ol {

	padding-left: 20px;

}



.text-block ul li {

	font-size: 17px;

	margin: 8px 0;

	list-style: disc;

	color: #9B9B9B;

}



.text-block ul.type-none li {

	list-style: none;

}



.text-block ol li {

	font-size: 14px;

	margin: 8px 0;

	color: #9B9B9B;

}



.text-block-between {

	display: flex;

	justify-content: space-between;

	align-items: center;

}





/* Typography */

h1,h2,h3,h4,h5 {

	font-weight: 500;

}



.footer-title .strong {

	font-weight: 500;

}



h1 {

	margin: 0 0 30px;

}



h2 {

	margin: 0 0 25px;

}



h1, h2, .project-title {

	font-size: 38px;

}



.footer-title .strong {

	font-size: 38px;

}



h1.small, h2.small {

	font-size: 30px;

}



@media (min-width: 320px) {

	.js-slogan strong {

		font-size: 30px;

	}



	h1, h2, .project-title {

    /* font-size: 30px; */

		font-size: 15px;

	}



	.footer-title .strong {

		font-size: 46px;

	}



	h1.small, h2.small {

		font-size: 38px;

	}

}



@media (min-width: 640px) {

	h1, h2, .project-title {

		font-size: 46px;

	}



	.footer-title .strong {

		font-size: 46px;

	}



	h1.small, h2.small {

		font-size: 38px;

	}

}



@media (min-width: 768px) {

	h1, h2, .project-title {

		font-size: 48px;

	}



	.footer-title .strong {

		font-size: 48px;

	}



	h1.small, h2.small {

		font-size: 46px;

	}

}



@media (min-width: 1200px) {

	h1, h2, .project-title {

		font-size: 62px;

	}



	.footer-title .strong {

		font-size: 62px;

	}



	h1.small, h2.small {

		font-size: 46px;

	}

}



@media (min-width: 1440px) {

	h1, h2, .project-title {

		font-size: 50px;

	}



	.footer-title .strong {

		font-size: 76px;

	}



	h1.small, h2.small {

		font-size: 60px;

	}

}



h3 {

	font-size: 30px;

	margin: 0 0 20px;

}



h3 span {

	color: #9B9B9B;

}



h4 {

	font-size: 20px;

	margin: 0 0 20px;

}



h4 span {

	color: #9B9B9B;

}



p {

	font-size: 16px;

	margin: 0 0 15px;

	color: #9B9B9B;

	line-height: 1.5;

}



p.large {

	font-size: 20px;

	margin: 0 0 15px;

}



p.small {

	font-size: 14px;

	margin: 0 0 15px;

}



p a {

	color: black;

}



p a:hover {

	color: #9B9B9B;

}



blockquote {

	position: relative;

	margin: 0;

	margin-left: 80px;

}



@media (min-width: 1440px) {

	blockquote {

		margin-left: 50px;

	}

}



blockquote:before {

	content: '';

	width: 50px;

	height: 40px;

	position: absolute;

	top: -10px;

	left: -14px;

	background-image: url("../image/quotes.png");

	background-repeat: no-repeat;

	background-size:auto;

}



@media (min-width:320px) and (max-width:420px) {

	blockquote:before {

		width: 18px;

		height: 14px;

		left: -42px;

	}



	blockquote {

		margin-left: 49px;

	}



	blockquote p {

		font-size: 14px;

	}

}



.text-grey {

	color: #9B9B9B;

}



.text-white {

	color: white;

}



@media (min-width:320px) and (max-width:420px) {

	.text-grey {

		padding-bottom: 10%;

	}



	.section-row .col-sm-4 img {

		margin-bottom: 8%;

	}

}



.client-content h2 {

	color: rgba(68,68,68,1.00);

	text-align: justify;

	font-size: 18px;

}



.text-center {

	text-align: center;

}



.text-left {

	text-align: left;

}



.text-right {

	text-align: right;

}



.text-number_large {

	display: inline-block;

	font-size: 150px;

}



.text-number_large img {

	display: block;

	width: 107px;

	height: auto;

}



/* Sections */

section {

	position: relative;

	padding-top: 60px;

	padding-bottom: 60px;

}



@media (min-width: 768px) {

	section {

		padding-top: 80px;

		padding-bottom: 80px;

	}

}



@media (min-width: 1200px) {

	section {

		padding-top: 70px;

		padding-bottom: 70px;

	}

}



@media (min-width: 1440px) {

	section {

		padding-top: 80px;

		padding-bottom: 80px;

	}

}



section.bg-teal {

}



section.bg-teal .section-tab {

	display: none;

}



@media (min-width: 1024px) {

	section.bg-teal .section-tab {

		position: absolute;

		display: block;

		height: 15%;

		top: -15%;

		right: 0;

		width: calc(50vw + 50px);

	}

}



@media (min-width: 1680px) {

	section.bg-teal .section-tab {

		width: calc(((100% - 1680px) / 2) + 830px);

	}

}



.border-top {

	border-top: 1px solid #C4C4C4;

}



/* Header */

header {

	position: fixed;

	z-index: 99;

	top: 20px;

	left: 0;

	width: 100%;

	opacity: 0;

	transform: translateY(-20px);

	-ms-transform: translateY(-20px);

	-webkit-transform: translateY(-20px);

	background: transparent;

	border-bottom: 1px solid transparent;

	transition: all .4s ease;

	-o-transition: all .4s ease;

	-moz-transition: all .4s ease;

	-webkit-transition: all .4s ease;

}



body.loaded header {

	opacity: 1;

	transform: translateY(0);

	-ms-transform: translateY(0);

	-webkit-transform: translateY(0);

}



@media (min-width: 1024px) {

	header {

		top: 30px;

	}

}



@media (min-width: 1440px) {

	header {

		top: 50px;

	}

}



header > div {

	display: flex;

	align-items: center;

	justify-content: space-between;

}



header.fixed {

	top: 0;

	min-width: 1180px;

	z-index: 100;

	padding: 15px 0;

	background: white;

	border-bottom: 1px solid #C4C4C4;

}



@media (min-width: 1441px) {

	header.fixed {

		padding: 25px 0;

	}

}



. {

	position: relative;

	display: block;

	width: 150px;

	height: 53px;

	background-image: url("../image/logo-black.svg");

	background-repeat: no-repeat;

	background-size: contain;

	background-position: center center;

}



.site-logo {

	position: relative;

	display: block;

	width: 150px;

	height: 53px;

	background-image: url("../image/logo-black.svg");

	background-repeat: no-repeat;

	background-size: contain;

	background-position: center center;

}



/* .site-menu {

  display: block;

  width: 24px;

  height: 25px;

  cursor: pointer;

  background-image: url("../image/nav-button.svg");

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center center;

  transition: transform .35s ease;

  -o-transition: transform .35s ease;

  -moz-transition: transform .35s ease;

  -webkit-transition: transform .35s ease;

} */



/* .site-menu:hover {

  transform: scale(1.2);

  -o-transform: scale(1.2);

  -moz-transform: scale(1.2);

  -webkit-transform: scale(1.2);

} */

/* menu hover BEGIN */

/* .navMenu {

  width: 25px;

  height: 25px;

  

  display: flex;

  flex-wrap: wrap;

  align-content: space-between;

  position: relative;

}

.navMenu-row {

  width: 100%;

  display: flex;

  justify-content: space-between;

}

.navMenu-rect {

  width: 4px;

  height: 4px;

  background: #000;

}

.navMenu-rect-topLeft,

.navMenu-rect-center {

  transform-origin: right;

}

.navMenu-rect-bottomRight {

  background: transparent;

}

.navMenu-text {

  position: absolute;

  color: #000;

  font-size: 12px;

  bottom: -6.5px;

  right: 0;

  font-weight: bold;

  transform: translateX(5%);

  opacity: 0;

} */



.navMenu {

	width: 25px;

	height: 25px;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;

	-ms-flex-wrap: wrap;

	flex-wrap: wrap;

	-ms-flex-line-pack: justify;

	align-content: space-between;

	position: relative;

}



.navMenu-row {

	width: 100%;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;

	-webkit-box-pack: justify;

	-ms-flex-pack: justify;

	justify-content: space-between;

}



.navMenu-rect {

	width: 4px;

	height: 4px;

	background: #000;

}



.navMenu-rect.light {

	background: #fff;

}



.fixed .navMenu-rect.light {

	background: #000;

}



.navMenu-rect-topLeft,

.navMenu-rect-center {

	-webkit-transform-origin: right;

	-ms-transform-origin: right;

	transform-origin: right;

}



.navMenu-rect-bottomRight {

	background: transparent !important;

}



.navMenu-text {

	position: absolute;

	color: #000;

	font-size: 12px;

	bottom: -6.5px;

	right: 0;

	font-weight: bold;

	-webkit-transform: translateX(5%);

	-ms-transform: translateX(5%);

	transform: translateX(5%);

	opacity: 0;

}



.navMenu-text.light {

	color: #fff;

}



.fixed .navMenu-text.light {

	color: #000;

}







/* menu hover END */

header.fixed .site-menu {

  /* background-image: url("../image/nav-button.svg"); */

	background-repeat: no-repeat;

	background-size: contain;

	background-position: center center;

}



header.casestudies .filter {

	display: none;

}



@media (min-width: 992px) {

	header.casestudies .filter {

		display: flex;

		justify-content: flex-end;

		align-items: center;

		opacity: 1;

		transition: all .35s ease;

	}

}



header.casestudies .filter li {

	font-size: 20px;

	color: #CDCDCD;

	margin: 0 25px;

	cursor: pointer;

	transition: all .25s ease;

	-o-transition: all .25s ease;

	-moz-transition: all .25s ease;

	-webkit-transition: all .25s ease;

}





header.casestudies .filter li.active,

header.casestudies .filter li:hover {



}

header.casestudies .filter li{

	position: relative;

}

header.casestudies .filter li i{

	position: absolute;

	bottom: 0;

	width: 0;

	left: -30%;

	background: #00aeef;

	transition: all 0.6s;

}



header.casestudies .filter li.on i{

	width: 130%;

	height: 8px;

	background: #00aeef;

	transition: all 0.6s;

	z-index: -1;

}



header.casestudies .filter li:first-child {

	margin-left: 0;

}



header.casestudies .filter li:last-child {

	margin-right: 0;

}





/* Nav */

.nav-fixed {

	position: fixed;

	width: 100%;

	height: 100%;

	left: 0;

	top: 0;

	z-index: 101;

	background: white;

	padding: 0;

	display: none;

	opacity: 0;

	transform: translateY(-100px);

	transition: all 1s cubic-bezier(.19,1,.22,1);

	-o-transition: all 1s cubic-bezier(.19,1,.22,1);

	-moz-transition: all 1s cubic-bezier(.19,1,.22,1);

	-webkit-transition: all 1s cubic-bezier(.19,1,.22,1);

}



@media (min-width: 400px) {

	.nav-fixed {

		height: auto;

		padding: 20px 0;

	}

}



@media (min-width: 1024px) {

	.nav-fixed {

		padding: 30px 0;

	}

}



@media (min-width: 1440px) {

	.nav-fixed {

		padding: 40px 0;

	}

}



.nav-fixed .scroller {

	overflow: auto;

	height: 100%;

}



@media (min-width: 400px) {

	.nav-fixed .scroller {

		overflow: inherit;

		height: auto;

	}

}



.nav-fixed .nav-fixed-top,

.nav-fixed .nav-fixed-main,

.nav-fixed .nav-fixed-contact {

	opacity: 0;

}



.nav-fixed.active .nav-fixed-top {

	animation-duration: .5s;

	animation-timing-function: ease-in-out;

	animation-name: fadeIn;

	animation-fill-mode: forwards;

}



.nav-fixed.active .nav-fixed-main {

	animation-duration: .5s;

	animation-delay: .15s;

	animation-timing-function: ease-in-out;

	animation-name: fadeIn;

	animation-fill-mode: forwards;

}



.nav-fixed.active .nav-fixed-contact {

	animation-duration: .5s;

	animation-delay: .3s;

	animation-timing-function: ease-in-out;

	animation-name: fadeIn;

	animation-fill-mode: forwards;

}



.nav-bg {

	position: fixed;

	width: 100%;

	height: 100%;

	left: 0;

	top: 0;

	right: 0;

	bottom: 0;

	z-index: 100;

	background: black;

	opacity: 0;

 /*0.37*/

	display: none;

	transition: all .35s ease;

	-o-transition: all .35s ease;

	-moz-transition: all .35s ease;

	-webkit-transition: all .35s ease;

}



.nav-fixed-top {

	margin-top: 20px;

	display: flex;

	justify-content: space-between;

	align-items: center;

}



@media (min-width: 400px) {

	.nav-fixed-top {

		margin: 0;

	}

}



.nav-fixed-top > div {

	display: flex;

	align-items: center;

}



.nav-fixed-top .nav-top {

	display: none;

}



@media (min-width: 992px) {

	.nav-fixed-top .nav-top {

		display: block;

		margin-right: 80px;

	}

}



.nav-fixed-top .nav-top ul,

.nav-fixed-top .lang {

	display: flex;

}



.nav-fixed-top .nav-top ul li {

	margin: 0 25px;

}



.nav-fixed-top .lang li:first-child,

.nav-fixed-top .nav-top ul li:first-child {

	margin-left: 0;

}



.nav-fixed-top .lang li:last-child,

.nav-fixed- .nav-top ul li:last-child {

	margin-right: 0;

}



.nav-fixed-top .nav-top ul li a {

	color: #9B9B9B;

	font-size: 16px;

	font-weight: 400;

	transition: .2s ease;

	-o-transition: .2s ease;

	-moz-transition: .2s ease;

	-webkit-transition: .2s ease;

}



.nav-fixed-top .nav-top ul li a:hover {

	color: black;

}



.nav-fixed-top .lang {

	margin-right: 40px;

}



@media (min-width: 768px) {

	.nav-fixed-top .lang {

		margin-right: 80px;

	}

}



.nav-fixed-top .lang li {

	margin: 0 7px;

}



.nav-fixed-top .lang li a {

	color: #9B9B9B;

	font-size: 16px;

	font-weight: 400;

	transition: .2s ease;

	-o-transition: .2s ease;

	-moz-transition: .2s ease;

	-webkit-transition: .2s ease;

}



.nav-fixed-top .lang li.active a,

.nav-fixed-top .lang li a:hover {

	color: black;

}



.nav-fixed-top .close_nav {

	display: block;

	width: 24px;

	height: 25px;

	background-image: url("../image/close.svg");

	background-size: contain;

	cursor: pointer;

	transition: transform .35s ease;

	-o-transition: transform .35s ease;

	-moz-transition: transform .35s ease;

	-webkit-transition: transform .35s ease;

}



.nav-fixed-top .close_nav:hover {

	transform: scale(1.2);

	-o-transform: scale(1.2);

	-moz-transform: scale(1.2);

	-webkit-transform: scale(1.2);

}



.nav-fixed-main {

	margin-top: 20px;

}



@media (min-width: 768px) {

	.nav-fixed-main {

		margin-top: 70px;

	}

}



@media (min-width: 992px) {

	.nav-fixed-main {

		margin-top: 90px;

		display: flex;

		justify-content: space-between;

		align-items: center;

	}

}



@media (min-width: 1200px) {

	.nav-fixed-main {

		margin-top: 100px;

	}

}



.nav-fixed-main .nav-main {

	margin: 0 0 30px;

}



@media (min-width: 992px) {

	.nav-fixed-main .nav-main {

		margin: 0;

	}

}



.nav-fixed-main .nav-main ul {

	display: flex;

	flex-wrap: wrap;

}



@media (min-width: 992px) {

	.nav-fixed-main .nav-main ul {

		flex-wrap: nowrap;

	}

}



.nav-fixed-main .nav-main ul li {

	position: relative;

	display: flex;

	line-height: 1;

	margin: 15px 0;

	width: 100%;

	counter-increment: nav-counter;

}



@media (min-width: 375px) {

	.nav-fixed-main .nav-main ul li {

		margin: 15px 20px;

		width: calc(50% - 40px);

	}

}



@media (min-width: 768px) {

	.nav-fixed-main .nav-main ul li {

		width: calc(25% - 40px);

		margin: 0 20px;

	}

}



@media (min-width: 992px) {

	.nav-fixed-main .nav-main ul li {

		width: auto;

	}

}



@media (min-width: 1440px) {

	.nav-fixed-main .nav-main ul li {

		margin: 0 40px;

	}

}



@media (min-width: 1680px) {

	.nav-fixed-main .nav-main ul li {

		margin: 0 80px;

	}

}



.nav-fixed-main .nav-main ul li:before {

	content: '0' counter(nav-counter);

	font-size: 14px;

	color: black;

	font-weight: 500;

	margin-right: 20px;

	margin-top: 2px;

}



.nav-fixed-main .nav-main ul li:after {

	content: '';

	position: absolute;

	left: 0;

	bottom: 2px;

	width: 0;

	height: 20px;

	background: #D3E8EF;

	z-index: 0;

	transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-o-transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-moz-transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-webkit-transition: all 1.5s cubic-bezier(.19,1,.22,1);

}



.nav-fixed-main .nav-main ul li.active:after,

.nav-fixed-main .nav-main ul li:hover:after {

	width: 100%;

}



@media (max-width: 768px) {

	.nav-fixed-main .nav-main ul li:nth-of-type(odd) {

		margin-left: 0;

	}



	.nav-fixed-main .nav-main ul li:nth-of-type(even) {

		margin-right: 0;

	}

}



@media (min-width: 768px) {

	.nav-fixed-main .nav-main ul li:first-child {

		margin-left: 0;

	}



	.nav-fixed-main .nav-main ul li:last-child {

		margin-right: 0;

	}

}



.nav-fixed-main .nav-main ul li a {

	position: relative;

	font-size: 38px;

	color: black;

	font-weight: 500;

	z-index: 5;

}



@media (min-width: 640px) {

	.nav-fixed-main .nav-main ul li a {

		font-size: 46px;

	}

}



@media (min-width: 768px) {

	.nav-fixed-main .nav-main ul li a {

		font-size: 54px;

	}

}



@media (min-width: 1200px) {

	.nav-fixed-main .nav-main ul li a {

		font-size: 62px;

	}

}



@media (min-width: 1440px) {

	.nav-fixed-main .nav-main ul li a {

		font-size: 76px;

	}

}



.nav-fixed-contact {

	margin-top: 50px;

}



@media (min-width: 768px) {

	.nav-fixed-contact {

		margin-top: 80px;

	}

}



@media (min-width: 992px) {

	.nav-fixed-contact {

		margin-top: 90px;

		display: flex;

		justify-content: space-between;

	}

}



@media (min-width: 1200px) {

	.nav-fixed-contact {

		margin-top: 120px;

	}

}



.nav-fixed-contact .nav-contact {

	display: flex;

	flex-wrap: wrap;

}



@media (min-width: 768px) {

	.nav-fixed-contact .nav-contact {

		flex-wrap: nowrap;

		flex-grow: 1;

	}

}



.nav-fixed-contact .nav-contact .col {

	width: calc(50% - 20px);

	margin: 0 20px 20px 0;

}



@media (min-width: 768px) {

	.nav-fixed-contact .nav-contact .col {

		width: 25%;

		max-width: 350px;

		margin: 0;

		margin-right: 30px;

	}

}



@media (min-width: 1200px) {

	.nav-fixed-contact .nav-contact .col {

		margin-right: 60px;

	}

}



.nav-fixed-contact .nav-contact .col:last-child {

	margin-right: 0;

}



.nav-fixed-contact .nav-contact strong,

.nav-fixed-contact .nav-contact p,

.nav-fixed-contact .nav-contact p a,

.nav-fixed-contact .nav-contact a {

	color: #9B9B9B;

	font-size: 14px;

	text-decoration: none;

	margin: 0;

	line-height: 1.65;

	transition: all .25s ease;

	-o-transition: all .25s ease;

	-moz-transition: all .25s ease;

	-webkit-transition: all .25s ease;

}



.nav-fixed-contact .nav-contact strong {

	font-weight: 600;

}



@media (min-width: 1200px) {

	.nav-fixed-contact .nav-contact strong,

  .nav-fixed-contact .nav-contact p,

  .nav-fixed-contact .nav-contact p a,

  .nav-fixed-contact .nav-contact a {

		font-size: 16px;

	}

}



.nav-fixed-contact .nav-contact p a:hover,

.nav-fixed-contact .nav-contact a:hover {

	color: black;

}



.nav-fixed-contact .nav-mobile {

	display: block;

}



@media (min-width: 992px) {

	.nav-fixed-contact .nav-mobile {

		display: none;

	}

}



.nav-fixed-contact .nav-mobile ul {

	display: block;

	text-align: center;

}



@media (min-width: 375px) {

	.nav-fixed-contact .nav-mobile ul {

		display: flex;

		justify-content: center;

	}

}



.nav-fixed-contact .nav-mobile ul li {

	margin: 5px 0;

}



@media (min-width: 375px) {

	.nav-fixed-contact .nav-mobile ul li {

		margin: 0 10px;

	}

}



.nav-fixed-contact .nav-mobile ul li:first-child {

	margin-left: 0;

}



.nav-fixed-contact .nav-mobile ul li:last-child {

	margin-right: 0;

}



.nav-fixed-contact .nav-mobile ul li a {

	color: #9B9B9B;

	font-size: 16px;

	font-weight: 400;

	transition: .2s ease;

	-o-transition: .2s ease;

	-moz-transition: .2s ease;

	-webkit-transition: .2s ease;

}



.nav-fixed-contact .nav-mobile ul li a:hover {

	color: black;

}



.nav-social {

	display: flex;

	justify-content: center;

	margin: 30px 0 20px;

	padding: 0;

}



@media (min-width: 400px) {

	.nav-social {

		margin: 30px 0 0;

	}

}



@media (min-width: 992px) {

	.nav-social {

		justify-content: flex-end;

		margin: 0;

	}

}



.nav-social li {

	display: block;

	margin: 0 10px;

}



.nav-social li:first-child {

	margin-left: 0;

}



.nav-social li:last-child {

	margin-right: 0;

}



.nav-social li a {

	position: relative;

	display: block;

	overflow: hidden;

	width: 40px;

	height: 40px;

}



@media (min-width: 400px) {

	.nav-social li a {

		width: 60px;

		height: 60px;

	}

}



.nav-social li a.dribbble {

	background-image: url("../image/ball-gray.svg");

	background-size: contain;

}



.nav-social li a.dribbble:hover {

	background-image: url("../image/ball-black.svg");

	background-size: contain;

}



.nav-social li a.station {

	background-image: url("../image/zcool-gray.svg");

	background-size: contain;

}



.nav-social li a.station:hover {

	background-image: url("../image/zcool-black.svg");

	background-size: contain;

}



.nav-social li a.instagram {

	background-image: url("../image/pane-gray.svg");

	background-size: contain;

}



.nav-social li a.instagram:hover {

	background-image: url("../image/pane-black.svg");

	background-size: contain;

}



.nav-social li a.behance {

	background-image: url("../image/be-gray.svg");

	background-size: contain;

}



.nav-social li a.behance:hover {

	background-image: url("../image/be-black.svg");

	background-size: contain;

}





/* Intro */

.section-parallax {

	display: block;

	padding: 0;

	width: 100%;

	background-color: transparent;

}



.pos-relative {

	float: left;

	width: 100%;

}



.pos-center {

	position: absolute;

	left: 0%;

	top: 0%;

	right: 0%;

	bottom: 0%;

	z-index: 2;

	display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-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;

}



.parallax-up {

	text-align: center;

	margin-top: 8.6%;

}



@media (min-width: 320px) {

	.parallax-up {

		margin-top: 8.6%;

	}

}



@media (min-width: 370px) {

	.parallax-up {

		margin-top: 8.6%;

	}

}



@media (min-width: 400px) {

	.parallax-up {

		margin-top: 8.6%;

	}

}



@media (min-width: 640px) {

	.parallax-up {

		margin-top: 20%;

	}

}



@media (min-width: 768px) {

	.parallax-up {

		margin-top: 16.6%;

	}

}



@media (min-width: 992px) {

	.parallax-up {

		margin-top: 11%;

	}

}



@media (min-width: 1200px) {

	.parallax-up {

		margin-top: 8.6%;

	}

}



@media (min-width: 1440px) {

	.parallax-up {

		margin-top: 8.6%;

	}

}



body.mobile .parallax-up {

	margin-top: 0;

}



.parallax-up h1 {

	display: block;

	width: 100%;

	margin-right: auto;

	margin-left: auto;

	font-weight: 600;

	color: #000;

	text-align: center;

	letter-spacing: 2px;

}



@media (min-width: 400px) {

	.parallax-up h1 {

		font-size: 25px;

		letter-spacing: 8px;

	}

}



@media (min-width: 640px) {

	.parallax-up h1 {

		font-size: 36px;

		line-height: 80px;

		letter-spacing: 14px;

		margin: 0 0 10px;

	}

}



@media (min-width: 768px) {

	.parallax-up h1 {

		font-size: 42px;

		line-height: 80px;

		letter-spacing: 20px;

		margin: 0 0 10px;

	}

}



@media (min-width: 1440px) {

	.parallax-up h1 {

		font-size: 70px;

		line-height: 140px;

		letter-spacing: 40px;

	}

}



.parallax-up strong {

	display: block;

	width: 100%;

	margin-right: auto;

	margin-left: auto;

	font-weight: 600;

	color: #000;

	text-align: center;

	letter-spacing: 2px;

}



@media (min-width: 400px) {

	.parallax-up strong {

		font-size: 35px;

		letter-spacing: 10px;

	}



	.parallax-up strong:nth-child(2) {

		letter-spacing: 0px;

	}

}



@media (min-width: 640px) {

	.parallax-up strong {

		font-size: 60px;

		line-height: 100px;

		letter-spacing: 8px;

	}



	.parallax-up strong:nth-child(2) {

		font-size: 40px;

		letter-spacing: 5px;

	}

}



@media (min-width: 768px) {

	.parallax-up strong {

		font-size: 72px;

		line-height: 100px;

		letter-spacing: 20px;

	}



	.parallax-up strong:nth-child(2) {

		font-size: 40px;

		letter-spacing: 5px;

	}

}



@media (min-width: 1440px) {

	.parallax-up strong {

		font-size: 110px;

		line-height: 140px;

		letter-spacing: 40px;

	}



	.parallax-up strong:nth-child(2) {

		font-size: 86px;

		letter-spacing: 18px;

	}

}



.img-creative-business {

	position: relative;

	z-index: 1;

	width: 22%;

	margin-right: 4%;

	height: auto;

	overflow: hidden;

	float: left;

}

.pos-relative .img-creative-business:last-child{

	margin-right: 0;

}



.img-creative-business-case {

	position: absolute;

	z-index: 999;

	overflow: hidden;

	top: 10%;

	left: 10%;

}



.img-creative-business-case h3{

	font-size: 26px;

	color: #d5d5d5;

	margin-bottom: 16px;	

}



.img-creative-business-case h4{

	font-size: 40px;

	color: #fff;

}



.img-creative-business a{

	font-size: 18px;

	color: #fff;

	position: absolute;

	bottom: 10%;

	left: 10%;

}







@media (min-width: 1440px) {

	.img-creative-business {

		width: 22%;

		height: auto;

		max-height: 500px;

	}

}



@media screen and (max-width:1080px) {

	.img-creative-business {

		width: 48%;

		height: auto;

		margin-right: 4%;

		max-height: 500px;

		margin-bottom: 4%;

	}

	.img-creative-business:nth-child(2n) {

		margin-right: 0;

	}

}



.img-creative-business img {

	width: 100%;

}



.img-creative-business-black{

	position: absolute;

	width: 100%;

	left: 0;

	top: 0;

	height: 500px;

	background: rgba(0, 0, 0, 0.6);

}



.img-creative-business:hover .img-creative-business-black{

    background: rgba(0, 0, 0, 0.14);

}



.img-creative-business:hover{

	box-shadow:rgba(0, 0, 0, 0.3) 5px 5px 10px 5px ;

}



.img-creative-business-inner {

	position: absolute;

	left: 0%;

	top: 0%;

	right: 0%;

	bottom: 0%;

	display: block;

	width: 100%;

	height: auto;

	min-height: 100%;

	min-width: 100%;

}



.creative-business {

	width: 40%;

	margin: 0 auto;

	overflow: hidden;

}



.parallax-up p {

	font-family: "Bebas", Impact, sans-serif;

	color: #000;

	font-size: 20px;

	line-height: 1em;

	letter-spacing: 5px;

	text-transform: uppercase;

}



@media (min-width: 400px) {

	.parallax-up p {

		font-size: 26px;

	}

}



@media (min-width: 768px) {

	.parallax-up p {

		font-size: 40px;

		line-height: 1em;

		letter-spacing: 5px;

	}

}



.parallax-up p span {

	background-image: url("../image/close-thick.svg");

	background-size: contain;

	width: 18px;

	height: 17px;

	margin: 0 10px 0 6px;

	display: inline-block;

}



@media (min-width: 768px) {

	.parallax-up p span {

		width: 26px;

		height: 25px;

		margin: 0 17px 0 15px;

	}

}



.hr-block {

	width: 70px;

	height: 6px;

	margin: 45px auto;

	background-color: #000;

}



@media (min-width: 768px) {

	.hr-block {

		margin: 25px auto;

	}

}



@media (min-width: 1440px) {

	.hr-block {

		margin: 45px auto;

	}

}



/* Hero */

.hero {

	position: relative;

	width: 100%;

	height: calc(400px + 45vh);

	display: flex;

	margin: 0 0 107px;

}



@media (min-width: 1024px) {

	.hero {

		height: 100vh;

	}

}



.hero-content {

	position: relative;

	width: 100%;

	z-index: 2;

	margin-top: 90px;

	height: 280px;

	opacity: 0;

	transform: translateX(-50px);

	-ms-transform: translateX(-50px);

	-webkit-transform: translateX(-50px);

	transition: all .5s ease;

	-ms-transition: all .5s ease;

	-webkit-transition: all .5s ease;

	transition-delay: .35s;

	-ms-transition-delay: .35s;

	-webkit-transition-delay: .35s;

}



body.loaded .hero-content {

	opacity: 1;

	transform: translateX(0);

	-ms-transform: translateX(0);

	-webkit-transform: translateX(0);

}



@media (min-width: 1024px) {

	.hero-content {

		margin: 0;

		height: auto;

	}

}



.hero-content .project-details {

	position: relative;

	margin-top: 40px;

	margin-left: 20px;

	height: auto;

}



@media (min-width: 768px) {

	.hero-content .project-details {

		margin-left: 30px;

	}

}



@media (min-width: 1024px) {

	.hero-content .project-details {

		margin-top: 22vh;

		height: calc(100% - 270px);

	}

}



@media (min-width: 1200px) {

	.hero-content .project-details {

		margin-left: 40px;

	}

}



@media (min-width: 1440px) {

	.hero-content .project-details {

		margin-left: 60px;

	}

}



@media (min-width: 1680px) {

	.hero-content .project-details {

		margin-left: calc((100vw - 1630px) / 2);

	}

}



.project-subtitles {

	position: relative;

	width: 100%;

}



.project-subtitles .subtitle {

	font-size: 20px;

	line-height: 1;

	color: #9B9B9B;

	opacity: 0;

	animation-duration: .75s;

	animation-timing-function: ease-in-out;

	animation-name: fadeOut;

	animation-fill-mode: forwards;

}



.hero-slide.active .project-subtitles .subtitle {

	animation-duration: .75s;

	animation-delay: .35s;

	animation-timing-function: ease-in-out;

	animation-name: fadeIn;

	animation-fill-mode: forwards;

}



.project-titles {

	position: relative;

	max-width: 650px;

	margin-top: 20px;

}



@media (min-width: 1024px) {

	.project-titles {

		margin-top: 60px;

	}

}



@media (min-width: 1440px) {

	.project-titles {

		max-width: 750px;

	}

}



.project-titles .project-title {

	color: #000000;

	font-weight: 600;

	opacity: 0;

	animation-duration: .75s;

	animation-timing-function: ease-in-out;

	animation-name: fadeOut;

	animation-fill-mode: forwards;

}



@media (min-width: 1440px) {

	.project-titles .project-title {

		font-size: 46px;

		line-height: 110px;

	}

}



.hero-slide.active .project-titles .project-title {

	animation-duration: .75s;

	animation-delay: .35s;

	animation-timing-function: ease-in-out;

	animation-name: fadeIn;

	animation-fill-mode: forwards;

}



.project-more {



	align-items: center;

	justify-content: flex-start;

	position: relative;

	z-index: 9;

	font-size: 24px;

	color: #000000;

	text-decoration: none;

	font-weight: 500;

	width: auto;

	opacity: 1;

	animation-duration: .75s;

	animation-timing-function: ease-in-out;

	animation-name: fadeOut;

	animation-fill-mode: forwards;

}



@media (min-width: 1920px) {

	.project-more {

		margin-top: 50px;

	}

}



.project-more .ele {

	position: relative;

	margin-top: 100px;

}



.project-more .ele-circle {

	display: block;

	width: 42px;

	height: 42px;

	background: url(../image/index-banner-paopao.png)no-repeat center center;

	background-size: cover;

}



.project-more .ele-line {

	position: absolute;

	top: 21px;

	left: 16px;

	width: 40px;

	height: 2px;

	border-top: 2px solid #7fc6e8;

	transition: all .35s ease;

	-o-transition: all .35s ease;

	-moz-transition: all .35s ease;

	-webkit-transition: all .35s ease;

}



.project-more:hover .ele-line {

	left: 33px;

}

.project-more .ele-font {

	position: absolute;

	top: 13px;

	left: 80px;

	font-size: 18px;

	color: #f1f1f1;

	transition: all .35s ease;

	-o-transition: all .35s ease;

	-moz-transition: all .35s ease;

	-webkit-transition: all .35s ease;

}



.hero-slide.active .project-more {

	animation-duration: .75s;

	animation-delay: .35s;

	animation-timing-function: ease-in-out;

	animation-name: fadeIn;

	animation-fill-mode: forwards;

}



.project-discs {

	position: absolute;

	left: 0;

	bottom: 0px;

	width: 100%;

	height: 100px;

	display: none;

}



@media (min-width: 1024px) {

	.project-discs {

		display: block;

	}

}



@media (min-height: 780px) and  (max-height: 800px) {

	.project-discs {

		bottom: 0px;

	}

}



@media (min-height: 720px) and  (max-height: 780px) {

	.project-discs {

		bottom: -40px;

	}

}



@media (min-height: 680px) and  (max-height: 720px) {

	.project-discs {

		bottom: -50px;

	}

}



@media (min-height: 500px) and  (max-height: 680px) {

	.project-discs {

		bottom: -60px;

	}

}



@media (min-height: 0px) and  (max-height: 580px) {

	.project-discs {

		display: none;

	}

}



.project-discs .disc {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	font-size: 14px;

	line-height: 1.9;

	color: #9B9B9B;

	opacity: 0;

	animation-duration: .75s;

	animation-timing-function: ease-in-out;

	animation-name: fadeOut;

	animation-fill-mode: forwards;

}



.hero-slide.active .project-discs .disc {

	animation-duration: .75s;

	animation-delay: .35s;

	animation-timing-function: ease-in-out;

	animation-name: fadeIn;

	animation-fill-mode: forwards;

}



.hero-slide {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	width: 100%;

	height: 100%;

	display: flex;

	flex-direction: column;

	z-index: 2;

}



@media (min-width: 1024px) {

	.hero-slide {

		flex-direction: row;

	}

}



.hero-slide.active {

	z-index: 3;

}



.hero-image {

	position: relative;

	flex: none;

	height: 100%;

	width: 100%;

	opacity: 0;

	transition: all .35s ease;

	-ms-transition: all .35s ease;

	-webkit-transition: all .35s ease;

}



body.loaded .hero-image {

	opacity: 1;

}



@media (min-width: 1024px) {

	.hero-image {

		width: 100%;

		height: 100%;

		margin: 0;

	}

}



@media (min-width: 1200px) {

	.hero-image {

		width: 42%;

	}

}



@media (min-width: 1680px) {

	.hero-image {

		width: calc((100% - 1680px) / 2 + 650px);

	}

}



.hero-nav {

	position: absolute;

	left: 44px;

	top: 450px;

	z-index: 99;

	opacity: 0;

	transform: translateX(50px);

	-ms-transform: translateX(50px);

	-webkit-transform: translateX(50px);

	transition: all .5s ease;

	-ms-transition: all .5s ease;

	-webkit-transition: all .5s ease;

	transition-delay: .35s;

	-ms-transition-delay: .35s;

	-webkit-transition-delay: .35s;

}



body.loaded .hero-nav {

	opacity: 1;

	transform: translateX(0px);

	-ms-transform: translateX(0px);

	-webkit-transform: translateX(0px);

}



@media (min-width: 1024px) {

	.hero-nav {

		top: 30px;

		left: inherit;

		right: calc(50vw + 50px);

	}

}



@media (min-width: 1200px) {

	.hero-nav {

		right: calc(42vw + 50px);

	}

}



@media (min-width: 1440px) {

	.hero-nav {

		top: 70px;

	}

}



@media (min-width: 1680px) {

	.hero-nav {

		right: calc((100% - 1680px) / 2 + 700px);

	}

}



.hero-nav ul {

	list-style: none;

	text-align: left;

	margin: 0;

	padding: 0;

}



@media (min-width: 1024px) {

	.hero-nav ul {

		text-align: right;

	}

}



.hero-nav ul li {

	position: relative;

	color: rgba(255,255,255,0.75);

	font-size: 14px;

	margin: 10px 0;

	transition: color .4s ease;

	-o-transition: color .4s ease;

	-moz-transition: color .4s ease;

	-webkit-transition: color .4s ease;

}



.hero-nav ul li.active {

	color: white;

}



.hero-nav ul li:after {

	content: '';

	position: absolute;

	left: -24px;

	top: 10px;

	width: 0px;

	height: 2px;

	border: none;

	border-bottom: 2px solid white;

	transition: width .4s ease;

	-o-transition: width .4s ease;

	-moz-transition: width .4s ease;

	-webkit-transition: width .4s ease;

}



@media (min-width: 1024px) {

	.hero-nav ul li {

		color: #9B9B9B;

	}



	.hero-nav ul li.active {

		color: black;

	}



	.hero-nav ul li:after {

		left: inherit;

		right: -24px;

		border-bottom: 2px solid #000000;

	}

}



@media (min-width: 1200px) {

	.hero-nav ul li {

		font-size: 16px;

	}

}



@media (min-width: 1440px) {

	.hero-nav ul li {

		font-size: 20px;

	}

}



.hero-nav ul li.active:after {

	width: 16px;

}



.hero-nav ul li:hover {

	color: #000000;

	cursor: pointer;

}



.hero-nav ul li:focus {

	outline: none;

}



.hero-pagination {

	display: none;

}



@media (min-width: 1024px) {

	.hero-pagination {

		position: absolute;

		display: flex;

		align-items: center;

		justify-content: center;

		background: white;

		z-index: 5;

		box-sizing: border-box;

		top: inherit;

		left: inherit;

		bottom: 0;

		right: calc(50vw - 385px);

		width: 385px;

		height: 135px;

		padding: 0 43px;

		opacity: 0;

		transform: translateY(50px);

		-ms-transform: translateY(50px);

		-webkit-transform: translateY(50px);

		transition: all .5s ease;

		-ms-transition: all .5s ease;

		-webkit-transition: all .5s ease;

		transition-delay: .35s;

		-ms-transition-delay: .35s;

		-webkit-transition-delay: .35s;

	}



	body.loaded .hero-pagination {

		opacity: 1;

		transform: translateY(0);

		-ms-transform: translateY(0);

		-webkit-transform: translateY(0);

	}

}



@media (min-width: 1200px) {

	.hero-pagination {

		right: calc(42vw - 385px);

	}

}



@media (min-width: 1680px) {

	.hero-pagination {

		right: calc((100% - 1680px) / 2 + 265px);

	}

}



.hero-pagination ul {

	list-style: none;

	display: flex;

	align-items: center;

	padding: 0;

	margin: 0;

}



.hero-pagination .hero-pagination-item {

	position: relative;

	display: inline-block;

	font-size: 14px;

	color: #9B9B9B;

	margin: 0 10px;

}



@media (min-width: 1024px) {

	.hero-pagination .hero-pagination-item {

		margin: 0 15px;

	}

}



.hero-pagination .hero-pagination-item.active {

	font-size: 24px;

	color: #000000;

	padding-left: 60px;

}



@media (min-width: 1024px) {

	.hero-pagination .hero-pagination-item.active {

		font-size: 30px;

		padding-left: 120px;

	}

}



.hero-pagination .hero-pagination-item:before {

	content: '';

	position: absolute;

	left: -15px;

	top: calc(50% - 1px);

	height: 2px;

	width: 40px;

	opacity: 0;

	background: #3d3d3d;

	transition: left .2s ease;

}



@media (min-width: 1024px) {

	.hero-pagination .hero-pagination-item:before {

		width: 90px;

	}

}



.hero-pagination .hero-pagination-item.active:before {

	opacity: 1;

	left: 0;

}



.hero-pagination .hero-pagination-item:first-child {

	margin-left: 0;

}



.hero-pagination .hero-pagination-item:last-child {

	margin-right: 0;

}



.hero-scroll {

	display: block;

}



@media (min-width:1024px) {

	.hero-scroll {

		position: absolute;

		display: block;

		bottom: 54px;

		left: 50%;

		z-index: 5;

		cursor: pointer;

		opacity: 0;

		transform: translate(-50%, 50px);

		-ms-transform: translate(-50%, 50px);

		-webkit-transform: translate(-50%, 50px);

		transition: all .5s ease;

		-ms-transition: all .5s ease;

		-webkit-transition: all .5s ease;

		transition-delay: .35s;

		-ms-transition-delay: .35s;

		-webkit-transition-delay: .35s;

	}



	body.loaded .hero-scroll {

		opacity: 1;

		transform: translate(-50%, 0);

		-ms-transform: translate(-50%, 0);

		-webkit-transform: translate(-50%, 0);

	}

}



.hero-scroll svg #scroll,

.page-scroll svg #scroll {

	transition: all .25s ease-in-out;

}



.hero-scroll:hover svg #scroll,

.page-scroll:hover svg #scroll {

	transform: translateY(7px);

}



.hero-slide .bg-holder {

	position: absolute;

	top: 0;

	bottom: 0;

	left: 0;

	right: 0;

	width: 100%;

	min-height: 100%;

	z-index: 2;

	overflow: hidden;

}



.hero-slide .bg-holder .project-bg {

	position: absolute;

	bottom: 0;

	left: 0;

	right: 0;

	width: 100%;

	height: 100%;

	background-position: center center;

	background-repeat: no-repeat;

	background-size: cover;

	overflow: hidden;

	-webkit-transform: scale(1.1) translate3d(0,0,0);

	transform: scale(1.1) translate3d(0,0,0);

	animation-duration: 1s;

	animation-timing-function: ease-in-out;

	animation-name: projectOut;

	animation-fill-mode: forwards;

}



.hero-slide .bg-holder a {

	display: block;

	width: 100%;

	height: 100%;

}



.hero-slide.active .bg-holder .project-bg {

	animation-duration: 1s;

	animation-timing-function: ease-in-out;

	animation-name: projectIn;

	animation-fill-mode: forwards;

}



.hero-swipe {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	width: 100%;

	height: 100%;

	z-index: 0;

}



.project-swipe {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	width: 0%;

	height: 100%;

	animation-duration: .5s;

	animation-timing-function: ease;

	animation-name: fadeOut;

	animation-fill-mode: forwards;

}



.hero-slide.active .project-swipe {

	animation-delay: .5s;

	animation-duration: 5s;

	animation-timing-function: ease-out;

	animation-name: swipeFull;

	animation-fill-mode: forwards;

}



@media (min-width: 1024px) {

	.hero-slide.active .project-swipe {

		animation-delay: 1.3s;

		animation-duration: 9s;

		animation-timing-function: ease-out;

		animation-name: swipeFull;

		animation-fill-mode: forwards;

	}

}



.section-about{

	margin: 100px 0;

}



.section-about .section-clients .container{

	margin: 80px auto;

}

@media (min-width: 700px) {

	.section-about {

		margin-bottom: 100px;

	}

}



@media (min-width: 1200px) {

	.section-about {

		margin-bottom: 45px;

	}

}

/* Work Grid */

.section-work {

	padding-top: 100px;

	margin-bottom: 0;

}



@media (min-width: 700px) {

	.section-work {

		margin-bottom: 100px;

	}

}



@media (min-width: 1200px) {

	.section-work {

		margin-bottom: 45px;

	}

}



@media (min-width: 768px) {

	.title-h2 {

		font-size: 44px;

		font-weight: 500;

	}

	.index-line{

		width:13px;

		height: 3px;

		background: #00aeef;

	}

}



.title-h2 a {

	color: #000;

}

.show{

	margin-bottom: 66px;

	position: relative;

}



.index-line{

	    display: inline-block;

		width:13px;

		height: 3px;

		background: #00aeef;

	    float: left;

	    margin-top: 30px;

	    margin-right: 18px;

}



.index-title-p1{

	position: absolute;

	top: -56px;

	left: 10%;

	font-size: 100px;

	font-weight: bold;

	color: rgba(170,170,170,0.1);

}

.index-title-p2{

	position: absolute;

	top: 0;

	left: 15%;

	font-size: 50px;

	font-weight: bold;

	color: rgba(170,170,170,0.1);

}



.index-case-line{

	    display: inline-block;

		width:40px;

		height: 2px;

		background: #00aeef;

}



.index-news-sort{

	float: right;

	margin-top: -50px;

	width: auto;

}

.index-news-sort1{

	float: left;

	color: #666;

	font-size: 18px;

	width: 120px;

	border-right: #CBCBCB solid thin;

	text-align: center;

}

.index-news-sort12{

	border-right:none;

}



.index-news-sort .index-news-sort1:hover{

	color: #000;

}

.clear{clear: both;}



@media (min-width:320px) and (max-width:420px) {

	.title-h2 a {

		font-size: 25px;

	}

}



.section-work-grid {

	display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	flex-wrap: wrap;

	margin-top: 40px;

}



@media (min-width: 700px) {

	.section-work-grid {

		margin-top: 50px;

	}

}



@media (min-width: 1200px) {

	.section-work-grid {

		margin-top: 75px;

	}

}



.work-grid-column {

	width: 100%;

}



@media (min-width: 700px) {

	.work-grid-column {

		width: calc(50% - 30px);

		margin: 0 30px;

	}

}



@media (min-width: 1200px) {

	.work-grid-column {

		width: calc(50% - 60px);

		margin: 0 60px;

	}

}



@media (min-width: 1440px) {

	.work-grid-column {

		width: calc(50% - 80px);

		margin: 0 80px;

	}

}



@media (min-width: 1680px) {

	.work-grid-column {

		width: calc(50% - 90px);

		margin: 0 90px;

	}

}



.work-grid-column:not(.alt) {

	margin-left: 0;

}



.work-grid-column.alt {

	margin-right: 0;

	transition-delay: .25s;

	-o-transition-delay: .25s;

	-moz-transition-delay: .25s;

	-webkit-transition-delay: .25s;

}



@media (min-width: 700px) {

	.work-grid-column.alt {

		margin-top: 90px;

	}

}



.work-item {

	position: relative;

	display: block;

	color: black;

	overflow: hidden;

	width: 100%;

	margin: 0 0 50px;

	opacity: 0;

	cursor: pointer;

	transform: translateY(150px);

	-o-transform: translateY(150px);

	-moz-transform: translateY(150px);

	-webkit-transform: translateY(150px);

	transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-o-transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-moz-transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-webkit-transition: all 1.5s cubic-bezier(.19,1,.22,1);

}



.work-item:hover .work-item-img img,

.work-item:focus .work-item-img img {

	transform: scale(1.1);

	-o-transform: scale(1.1);

	-moz-transform: scale(1.1);

	-webkit-transform: scale(1.1);

}



@media (min-width: 700px) {

	.work-item {

		margin: 0 0 120px;

	}

}



.work-item.in-view {

	opacity: 1;

	transform: translateY(0px);

}



.work-item-shadow {

	position: absolute;

	left: 0%;

	top: 0%;

	right: 0%;

	bottom: 0%;

	display: block;

	width: 100%;

	height: 100%;

	box-shadow: inset 0 0 0 100px white;

	z-index: 2;

	pointer-events: none;

	transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-o-transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-moz-transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-webkit-transition: all 1.5s cubic-bezier(.19,1,.22,1);

}



.work-item.in-view .work-item-shadow {

	box-shadow: inset 0 0 0 0 white;

}



.work-item-img {

	position: absolute;

	left: 0%;

	top: 0%;

	right: 0%;

	bottom: 0%;

	display: block;

	width: 100%;

	height: 100%;

	z-index: 1;

}



.work-item-img img {

	position: absolute;

	left: 0%;

	top: 0%;

	right: 0%;

	bottom: 0%;

	display: block;

	width: auto;

	height: 100%;

	
	transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-o-transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-moz-transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-webkit-transition: all 1.5s cubic-bezier(.19,1,.22,1);

}



.work-item-content {

	position: absolute;

	right: 0;

	bottom: 0;

	z-index: 5;

	background: rgba(255, 255, 255, .95);

	width: 265px;

	box-sizing: border-box;

	text-align: center;

    padding: 20px;

}



@media (min-width: 768px) {

	.work-item-content {

		padding-left: 50px;

		padding-top: 35px;

	}

}



.work-item-content h3 {

	margin: 0 0 10px;

	font-size: 30px;

	font-weight: 500;

}



@media (min-width: 768px) {

	.work-item-content h3 {

		margin: 0 0 20px;

	}

}



.work-item-content p {

	font-size: 16px;

	color: #9B9B9B;

	margin: 0;

}



@media (min-width:320px) and (max-width:420px) {

	.work-item-content {

		padding-top: 10px;

	}



	.work-item-content h3 {

		margin: 0 0 4px;

		font-size: 24px;

	}

}



/* Animations */

.fadein {

	opacity: 0;

	transform: translateY(100px);

	-o-transform: translateY(100px);

	-moz-transform: translateY(100px);

	-webkit-transform: translateY(100px);

	transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-o-transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-moz-transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-webkit-transition: all 1.5s cubic-bezier(.19,1,.22,1);

}



.fadein.in-view {

	opacity: 1;

	transform: translateY(0);

	-o-transform: translateY(0);

	-moz-transform: translateY(0);

	-webkit-transform: translateY(0);

}



.fadein[data-delay="0.1"] {

	transition-delay: .1s;

}



.fadein[data-delay="0.15"] {

	transition-delay: .15s;

}



.fadein[data-delay="0.2"] {

	transition-delay: .2s;

}



.fadein[data-delay="0.25"] {

	transition-delay: .25s;

}



.fadein[data-delay="0.3"] {

	transition-delay: .3s;

}



.fadein[data-delay="0.35"] {

	transition-delay: .35s;

}



.fadein[data-delay="0.4"] {

	transition-delay: .4s;

}



.fadein[data-delay="0.45"] {

	transition-delay: .45s;

}



.fadein[data-delay="0.5"] {

	transition-delay: .5s;

}





/* Home clients */



@media (min-width: 768px) {

	.client-section {

		display: flex;

		justify-content: space-between;

		align-items: center;

	}

}



@media (min-width: 1024px) {



}



.client-content {

	margin: 0 auto 50px;

	padding: 80px 0 0;

}



@media(min-width: 567px) {

	.client-content {

		max-width: 90%;

	}

}



@media (min-width: 768px) {

	.client-content {

		margin: 0;

	}

}



.client-content h2 {

	line-height: 1.8;

	margin: 40px 0 0;

}



@media (min-width: 1024px) {

	.client-content h2 {

		margin: 50px 0 0;

	}

}



.client-content p {

	font-size: 14px;

	margin: 0;

}



@media (min-width: 768px) {

	.client-content p {

		font-size: 16px;

		line-height: 24px;

	}

}



.client-logos {

	width: 100%;

}



@media (min-width: 768px) {

	.client-logos {

		width: 50%;

	}

}



@media (min-width: 1024px) {

	.client-logos {

		transform: translate(0,-60px);

		-webkit-transform: translate(0,-60px);

	}

}



@media (min-width: 1680px) {

	.client-logos {

		transform: translate(50px,-60px);

		-webkit-transform: translate(50px,-60px);

	}

}



.client-logos .grid {

	display: flex;

	flex-wrap: wrap;

	width: 60%;

}



.client-logos .grid img{

	width: 100%;

}





.client-logos .grid > div {

	position: relative;

	width: 80%;

	margin: 15px 0;

}



@media(min-width: 567px) {

	.client-logos .grid > div {

		margin: 19px 0;

	}

}



@media (min-width: 1024px) {

	.client-logos .grid > div {

		margin: 23px 0;

	}

}



@media (min-width: 1200px) {

	.client-logos .grid > div {

		margin: 25px 0;

	}

}



@media (min-width: 1440px) {

	.client-logos .grid > div {

		margin: 28px 0;

	}

}



.client-logos .grid > div:nth-of-type(1),

.client-logos .grid > div:nth-of-type(2),

.client-logos .grid > div:nth-of-type(3) {

	margin-top: 0;

}



.client-logos .grid > div:nth-of-type(13),

.client-logos .grid > div:nth-of-type(14),

.client-logos .grid > div:nth-of-type(15) {

	margin-bottom: 0;

}



.client-logos .grid > div span {

	width: 100%;

	height: 68px;

	display: block;

	max-height: 35px;

	max-width: 105px;

	margin: 0 auto;

	animation-duration: .5s;

	animation-timing-function: ease-in-out;

	animation-name: fadeOut;

	animation-fill-mode: forwards;

	background-image: url('../image/logo-more.png');

	background-size: 750%;

}



@media (min-width: 1024px) {

	.client-logos .grid > div span {

		max-height: 50px;

		max-width: 150px;

	}

}



@media (min-width: 1200px) {

	.client-logos .grid > div span {

		max-height: 58px;

		max-width: 165px;

	}

}



@media (min-width: 1440px) {

	.client-logos .grid > div span {

		max-height: 70px;

		max-width: 200px;

	}

}



.client-logos .grid > div:nth-of-type(1) span:nth-of-type(1) {

	background-position: 3.3% 6%;

}



.client-logos .grid > div:nth-of-type(1) span:nth-of-type(2) {

	background-position: 21.8% 6.5%;

}



.client-logos .grid > div:nth-of-type(2) span:nth-of-type(1) {

	background-position: 41.4% 6%;

}



.client-logos .grid > div:nth-of-type(2) span:nth-of-type(2) {

	background-position: 60.1% 6.4%;

}



.client-logos .grid > div:nth-of-type(3) span:nth-of-type(1) {

	background-position: 79.7% 5.6%;

}



.client-logos .grid > div:nth-of-type(3) span:nth-of-type(2) {

	background-position: 96.5% 6%;

}



.client-logos .grid > div:nth-of-type(4) span:nth-of-type(1) {

	background-position: 3.5% 92.6%;

}



.client-logos .grid > div:nth-of-type(4) span:nth-of-type(2) {

	background-position: 3.2% 23%;

}



.client-logos .grid > div:nth-of-type(4) span:nth-of-type(3) {

	background-position: 21.8% 23%;

}



.client-logos .grid > div:nth-of-type(5) span:nth-of-type(1) {

	background-position: 41.4% 23.2%;

}



.client-logos .grid > div:nth-of-type(5) span:nth-of-type(2) {

	background-position: 60.2% 23%;

}



.client-logos .grid > div:nth-of-type(6) span:nth-of-type(1) {

	background-position: 79.8% 23%;

}



.client-logos .grid > div:nth-of-type(6) span:nth-of-type(2) {

	background-position: 96.9% 23%;

}



.client-logos .grid > div:nth-of-type(7) span:nth-of-type(1) {

	background-position: 21.4% 91.5%;

}



.client-logos .grid > div:nth-of-type(7) span:nth-of-type(2) {

	background-position: 3.2% 42%;

}



.client-logos .grid > div:nth-of-type(7) span:nth-of-type(3) {

	background-position: 21.6% 41.8%;

}



.client-logos .grid > div:nth-of-type(8) span:nth-of-type(1) {

	background-position: 42% 92%

}



.client-logos .grid > div:nth-of-type(8) span:nth-of-type(2) {

	background-position: 41.4% 41.5%;

}



.client-logos .grid > div:nth-of-type(8) span:nth-of-type(3) {

	background-position: 60% 41.2%;

}



.client-logos .grid > div:nth-of-type(9) span:nth-of-type(1) {

	background-position: 79.8% 41.2%

}



.client-logos .grid > div:nth-of-type(9) span:nth-of-type(2) {

	background-position: 96.6% 41.5%;

}



.client-logos .grid > div:nth-of-type(10) span:nth-of-type(1) {

	background-position: 3.3% 60%;

}



.client-logos .grid > div:nth-of-type(10) span:nth-of-type(2) {

	background-position: 21.6% 60%;

}



.client-logos .grid > div:nth-of-type(11) span:nth-of-type(1) {

	background-position: 41.4% 59.8%;

}



.client-logos .grid > div:nth-of-type(11) span:nth-of-type(2) {

	background-position: 59.8% 59%;

}



.client-logos .grid > div:nth-of-type(12) span:nth-of-type(1) {

	background-position: 79.8% 59.6%;

}



.client-logos .grid > div:nth-of-type(12) span:nth-of-type(2) {

	background-position: 97.3% 59.3%;

}



.client-logos .grid > div:nth-of-type(13) span:nth-of-type(1) {

	background-position: 3.4% 75.5%;

}



.client-logos .grid > div:nth-of-type(13) span:nth-of-type(2) {

	background-position: 21.6% 75.2%;

}



.client-logos .grid > div:nth-of-type(14) span:nth-of-type(1) {

	background-position: 41.6% 75.3%;

}



.client-logos .grid > div:nth-of-type(14) span:nth-of-type(2) {

	background-position: 61% 75.5%;

}



.client-logos .grid > div:nth-of-type(15) span:nth-of-type(1) {

	background-position: 80% 75.5%;

}



.client-logos .grid > div:nth-of-type(15) span:nth-of-type(2) {

	background-position: 97.5% 75.5%;

}



.client-logos .grid > div span.b ,.client-logos .grid > div span.z {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%,-50%);

	-ms-transform: translate(-50%,-50%);

	-webkit-transform: translate(-50%,-50%);

}



.client-logos .grid > div span.active {

	animation-duration: 2s;

	animation-timing-function: ease-in-out;

	animation-name: fadeIn;

	animation-fill-mode: forwards;

}



/* About us */

.aboutus-services {

	margin-top: 60px;

}



@media (min-width: 480px) {

	.aboutus-services {

		margin-left: -20px;

		margin-right: -20px;

	}

}



@media (min-width: 640px) {

	.aboutus-services {

		margin-top: 100px;

		margin-left: -30px;

		margin-right: -30px;

	}

}



.services-item {

	position: relative;

	display: block;

	width: 100%;

	height: 500px;

	margin: 0 0 20px;

	overflow: hidden;

}



@media (min-width: 480px) {

	.services-item {

		width: calc(50% - 40px);

		height: 380px;

		margin: 20px;

	}

}



@media (min-width: 640px) {

	.services-item {

		width: calc(50% - 60px);

		height: 400px;

		margin: 30px;

	}

}



@media (min-width: 768px) {

	.services-item {

		height: 500px;

	}

}



@media (min-width: 992px) {

	.services-item {

		width: calc(25% - 60px);

		height: 350px;

		margin: 0 30px;

	}

}



@media (min-width: 1200px) {

	.services-item {

		height: 400px;

	}

}



@media (min-width: 1440px) {

	.services-item {

		height: 500px;

	}

}



.services-item_content {

	position: relative;

	display: flex;

	flex-direction: column;

	height: 100%;

	justify-content: space-between;

	z-index: 5;

	padding: 15px;

	box-sizing: border-box;

}



@media (min-width: 768px) {

	.services-item_content {

		padding: 25px 40px;

	}

}



@media (min-width: 992px) {

	.services-item_content {

		padding: 10px 20px;

	}



	.services-item_content p {

		height: 60px;

		font-size: 13px;

	}

}



@media (min-width: 1024px) {

	.services-item_content {

		padding: 13px 20px;

	}



	.services-item_content p {

		height: 70px;

		font-size: 14px;

	}

}



@media (min-width: 1200px) {

	.services-item_content {

		padding: 15px 30px;

	}



	.services-item_content p {

		font-size: 16px;

	}

}



@media (min-width: 1400px) {

	.services-item_content {

		padding: 18px 30px;

	}

}



@media (min-width: 1600px) {

	.services-item_content {

		padding: 38px 30px;

	}

}



.services-item_content h4 {

	font-size: 24px;

}



@media (min-width: 768px) {

	.services-item_content h4 {

		font-size: 32px;

	}

}



@media (min-width: 1200px) {

	.services-item_content h4 {

		font-size: 40px;

		margin-top: -200px;

	}

}



.services-item_content h4,

.services-item_content p {

	color: white;

}



.services-item_content h5 {

	font-size: 26px;

	color: rgba(213,213,213,1.00);

	}



.services-item_content p {

	text-align: left;

	margin: 0;

}



.background-image-holder {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	width: 100%;

	height: 100%;

	z-index: 0;

}



.background-image-holder img {

	position: relative;

	z-index: 1;

	width: 100%;

	height: 100%;

	-o-object-fit: cover;

	object-fit: cover;

	-webkit-transform: scale(1);

	-ms-transform: scale(1);

	transform: scale(1);

	transition: all .35s ease;

	-o-transition: all .35s ease;

	-moz-transition: all .35s ease;

	-webkit-transition: all .35s ease;

}



.services-item:hover .background-image-holder img {

	-webkit-transform: scale(1.05);

	-ms-transform: scale(1.05);

	transform: scale(1.05);

}



.about-slider-container {

	position: relative;

	height: 450px;

	width: 100%;

	max-width: 100%;

}



@media (min-width: 992px) {

	.about-slider-container {

		padding-left: 65px;

		height: 650px;

		max-width: calc((100vw - 1680px) / 2 + 900px);

		margin-left: auto;

		margin-right: 0;

	}

}



@media (min-width: 1200px) {

	.about-slider-container {

		max-width: calc((100vw - 1680px) / 2 + 950px);

	}

}



.about-slider {

	position: relative;

	height: 450px;

	width: 100%;

}



@media (min-width: 992px) {

	.about-slider {

		height: 650px;

	}

}



.about-slider-container .swiper-pagination {

	top: 0;

	background: white;

	padding-left: 20px;

	box-sizing: border-box;

	width: 80px;

	height: 300px;

	display: flex;

	flex-direction: column;

}



@media (min-width: 992px) {

	.about-slider-container .swiper-pagination {

		padding: 0;

		height: 350px;

	}

}



@media (min-width: 1200px) {

	.about-slider-container .swiper-pagination {

		height: 450px;

	}

}



.about-slider-container .swiper-pagination .swiper-pagination-bullet {

	margin: 0 0 30px;

	counter-increment: nav-counter;

	background: none;

	font-size: 16px;

	outline: none;

	color: #B8B8B8;

	opacity: 1;

	width: 22px;

	height: 20px;

}



@media (min-width: 992px) {

	.about-slider-container .swiper-pagination .swiper-pagination-bullet {

		font-size: 20px;

	}

}



.about-slider-container .swiper-pagination .swiper-pagination-bullet-active {

	color: black;

	opacity: 1;

}







.about-slider-container .swiper-pagination .swiper-pagination-bullet:focus {

	outline: none;

}



.about-slider .swiper-slide {

	position: relative;

	height: 100%;

	background-repeat: no-repeat;

	background-position: center;

	background-size: cover;

}



.about-slider-container .swiper-button-prev,

.about-slider-container .swiper-button-next {

	z-index: 90;

}



.about-slider-container .swiper-button-prev {

	top: inherit;

	bottom: 20px;

	left: 20px;

	margin-top: 0;

	width: 34px;

	height: 34px;

	background-image: url("../image/jt-right.png");

	background-size: contain;

	transform: rotate(180deg);

	-ms-transform: rotate(180deg);

	-webkit-transform: rotate(180deg);

	transition: all .35s ease;

	-o-transition: all .35s ease;

	-moz-transition: all .35s ease;

	-webkit-transition: all .35s ease;

}



.about-slider-container .swiper-button-next {

	top: inherit;

	bottom: 20px;

	left: 80px;

	width: 34px;

	height: 34px;

	background-image: url("../image/jt-right.png");

	background-size: contain;

	transition: all .35s ease;

	-o-transition: all .35s ease;

	-moz-transition: all .35s ease;

	-webkit-transition: all .35s ease;

}



@media (min-width: 992px) {

	.about-slider-container .swiper-button-prev {

		bottom: 80px;

		left: 0;

		background-image: url("../image/jt-left.png");

		background-size: contain;

		transform: rotate(0);

		-ms-transform: rotate(0);

		-webkit-transform: rotate(0);

	}



	.about-slider-container .swiper-button-next {

		bottom: 80px;

		left: 100px;

	}

}



.about-slider-container .swiper-button-prev:focus,

.about-slider-container .swiper-button-next:focus {

	outline: none;

}



.about-push {

	margin-left: 20px;

}



@media (min-width: 768px) {

	.about-push {

		margin-left: 30px;

	}

}



@media (min-width: 1200px) {

	.about-push {

		margin-left: 40px;

	}

}



@media (min-width: 1440px) {

	.about-push {

		margin-left: 60px;

	}

}



@media (min-width: 1800px) {

	.about-push {

		margin-left: calc((100vw - 1680px) / 2);

	}

}



/* Join Us */

.joinus-mark {

	display: flex;

	align-items: center;

	margin: 30px 0 0;

}



.joinus-mark img {

	display: block;

	height: 40px;

	width: auto;

	flex: none;

	margin-right: 20px;

}



.joinus-mark:after {

	content: '';

	width: 100%;

	height: 1px;

	background: #C4C4C4;

	max-width: 160px;

}



/* About us  -- zz */





/* Home News */

.news-grid {

	display: flex;

	flex-wrap: wrap;

}



@media (max-width: 1200px) {

	.news-grid {

		max-width: 720px;

		margin: 0 auto;

	}

}



.news-grid article {

	position: relative;

	width: 100%;

	margin: 0 0 30px;

}



@media (min-width: 567px) {

	.news-grid article {

		margin: 30px 0;

	}

}



@media (min-width: 1200px) {

	.news-grid article {

		width: calc(50% - 34px);

		margin: 30px 34px;

	}

}



.news-grid article a {

	display: block;

	width: 100%;

	height: 100%;

	color: inherit;

	text-decoration: none;

}



@media (min-width: 567px) {

	.news-grid article a {

		display: flex;

		align-items: center;

	}

}



.news-grid article:nth-of-type(odd) {

	margin-left: 0;

}



.news-grid article:nth-of-type(even) {

	margin-right: 0;

}



.news-grid article .article-content {

	position: relative;

	height: auto;

	width: 100%;

	padding-bottom: 30px;

}



@media (min-width: 567px) {

	.news-grid article .article-content {

		width: calc(100% - 340px);

		height: 100%;

		padding: 0;

	}

}



.news-grid article .article-content:before {

	content: '';

	position: absolute;

	z-index: 0;

	right: 0;

	bottom: 0;

	width: 100%;

	height: 1px;

	background: #C4C4C4;

}



.news-grid article .article-content:after {

	content: '';

	position: absolute;

	z-index: 1;

	right: 0;

	bottom: 0;

	width: 0;

	height: 1px;

	background: #7fc6e8;

	transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-webkit-transition: all 1.5s cubic-bezier(.19,1,.22,1);

}



.news-grid article a:hover .article-content:after {

	width: 100%;

}

.index-news-author{

	float: right;

	font-size: 14px;

	margin-top: -62px;

}



.news-grid article .article-content .date {

	color: #757575;

	font-size: 14px;

	margin: 15px 0 20px;

	line-height: 1;

}



@media (min-width: 768px) {

	.news-grid article .article-content .date {

		font-size: 20px;

	}

}



@media (min-width: 1680px) {

	.news-grid article .article-content .date {

		margin: 25px 0 40px;

	}

}



.news-grid article .article-content h3 {

	position: relative;

	font-size: 24px;

	line-height: 1;

	font-weight: 500;

	color: black;

	margin: 0 0 20px;

	overflow: hidden;

	text-overflow: ellipsis;

	white-space: nowrap;

}



@media (min-width: 1440px) {

	.news-grid article .article-content h3 {

		font-size: 30px;

		margin: 0 0 25px;

	}

}



.news-grid article .article-content .desc {

	color: #9B9B9B;

	font-size: 14px;

	line-height: 24px;

	margin: 0;

	overflow: hidden;

	text-overflow: ellipsis;

	display: -webkit-box;

	-webkit-box-orient: vertical;

	-webkit-line-clamp: 2;

}



.news-grid article .article-img {

	position: relative;

	overflow: hidden;

	width: 100%;

	height: 250px;

}



@media (min-width: 567px) {

	.news-grid article .article-img {

		width: 250px;

		height: 200px;

		margin-right: 30px;

		flex: none;

	}

}



@media (min-width: 1440px) {

	.news-grid article .article-img {

		width: 300px;

		height: 200px;

		margin-right: 40px;

	}

}



.news-grid article .article-img img {

	position: relative;

	z-index: 1;

	width: 100%;

	height: 100%;

	-o-object-fit: cover;

	object-fit: cover;

	-webkit-transform: scale(1);

	-ms-transform: scale(1);

	transform: scale(1);

	transition: all 1.5s cubic-bezier(.19,1,.22,1);

	-webkit-transition: all 1.5s cubic-bezier(.19,1,.22,1);

}



.news-grid article a:hover .article-img img {

	-webkit-transform: scale(1.05);

	-ms-transform: scale(1.05);

	transform: scale(1.05);

}



.news-grid .action {

	width: 100%;

	margin-top: 30px;

	display: flex;

	justify-content: center;

}



@media (min-width: 567px) {

	.news-grid .action {

		margin-top: 60px;

	}

}



.read-more {

	display: inline-flex;

	align-items: center;

	justify-content: flex-start;

	position: relative;

	z-index: 9;

	font-size: 24px;

	color: #000000;

	text-decoration: none;

	font-weight: 500;

	width: auto;

}



.read-more .ele {

	position: relative;

	margin-right: 40px;

}



.read-more .ele-circle {

	display: block;

	width: 42px;

	height: 42px;

	border-radius: 50%;

}



.read-more .ele-line {

	position: absolute;

	top: 21px;

	right: -17px;

	width: 40px;

	height: 2px;

	border-top: 2px solid #7fc6e8;

	transition: all .35s ease;

	-o-transition: all .35s ease;

	-moz-transition: all .35s ease;

	-webkit-transition: all .35s ease;

}



.read-more:hover .ele-line {

	right: -30px;

}





/* 404 */

.content-404 {

	text-align: center;

}



.content-404 h1 {

	display: block;

	position: relative;

	width: 70%;

	height: 160px;

	text-indent: -9999px;

	margin: 0 auto;

	overflow: hidden;

	background-image: url("../image/404.svg");

	background-size: contain;

	background-position: center;

	background-repeat: no-repeat;

}



@media (min-width: 768px) {

	.content-404 h1 {

		width: 470px;

		height: 257px;

	}

}



.content-404 p {

	display: block;

	color: #828282;

	font-size: 24px;

	font-weight: 400;

	margin: 0;

}



@media (min-width: 768px) {

	.content-404 p {

		margin: 70px 0 0;

	}

}





/* Case studies */

@media (min-width: 992px) {

	.cases-filter {

		display: flex;

		justify-content: space-between;

	}

}



.cases-filter h3 {

	margin: 0;

}



@media (min-width: 992px) {

	.cases-filter h3 {

		font-size: 44px;

	}

}



.cases-filter .filter {

	margin-top: 40px;

	display: flex;

	justify-content: flex-start;

	align-items: center;

}



@media (min-width: 992px) {

	.cases-filter .filter {

		margin: 0;

		justify-content: flex-end;

	}

}



.cases-filter .filter li a{

	font-size: 16px;

	color: #9a9a9a;

	margin: 0 10px;

	cursor: pointer;

	transition: all .25s ease;

	-o-transition: all .25s ease;

	-moz-transition: all .25s ease;

	-webkit-transition: all .25s ease;

}



@media (min-width: 992px) {

	.cases-filter .filter li a{

		font-size: 20px;

		margin: 0 25px;

	}

}



.cases-filter .filter li.active a,

.cases-filter .filter li:hover a{

	color: #34bcf6;

}



.cases-filter .filter li:first-child {

	margin-left: 0;

}



.cases-filter .filter li:last-child {

	margin-right: 0;

}



section.section-cases {

	border-top: 1px solid #C4C4C4;

	margin-top: 40px;

	padding-top: 40px;

}



@media (min-width: 768px) {

	section.section-cases {

		border-top: 1px solid #C4C4C4;

		margin-top: 60px;

		padding-top: 60px;

	}

}



@media (min-width: 992px) {

	section.section-cases {

		border-top: 1px solid #C4C4C4;

		margin-top: 50px;

		padding-top: 64px;

	}

}



section.section-cases .cases-block {

	margin-bottom: 40px;

}



@media (min-width: 992px) {

	section.section-cases .cases-block {

		margin-bottom: 60px;

	}

}



@media (min-width: 992px) {

	section.section-cases .cases-block {

		margin-bottom: 90px;

	}

}



section.section-cases .cases-block h4 {

	margin: 0 0 30px;

}



@media (min-width: 992px) {

	section.section-cases .cases-block h4 {

		font-size: 30px;

	}

	

	section.section-cases .cases-block h5 {

		font-size: 14px;

		color: rgba(102,102,102,1.00)

	}



	section.section-cases .cases-block .title {

		display: flex;

		justify-content: space-between;

		align-items: center;

	}

}



section.section-cases .cases-block .title h2 {

	margin: 0;

}



section.section-cases .cases-block .title .read-more {

	margin-top: 20px;

}



.cases-title{

	float:left;

	width: 100%;

}



.cases-title1{

	float:left;

}



.cases-title2{

	float:left;

	margin-left: 20px;

	margin-top: 16px;

}



.cases-title3{

	float:right;

	color: #666;

}



@media (min-width: 992px) {

	section.section-cases .cases-block .title .read-more {

		margin: 0;

	}

}



section.section-cases .cases-grid {

	display: flex;

	flex-wrap: wrap;

	margin-left: -10px;

	margin-right: -10px;

}



section.section-cases .cases-grid-item {

	position: relative;

	width: 100%;

	background: #EFF8FC;

	height: 200px;

	margin: 5px 0;

	box-shadow: inset 0 0 0 1px transparent;

	display: none;

	opacity: 0;

	transition: all .35s ease;

	-o-transition: all .35s ease;

	-moz-transition: all .35s ease;

	-webkit-transition: all .35s ease;

}



@media (min-width: 380px) {

	section.section-cases .cases-grid-item {

		width: calc(50% - 10px);

		margin: 5px;

		height: 180px;

	}

}



@media (min-width: 640px) {

	section.section-cases .cases-grid-item {

		height: 240px;

	}

}



@media (min-width: 992px) {

	section.section-cases .cases-grid-item {

		width: calc(33.3333% - 10px);

		margin: 20px 5px;

		height: 240px;

	}

}



@media (min-width: 1280px) {

	section.section-cases .cases-grid-item {

		height: 300px;

	}

}



section.section-cases .cases-grid-item > a {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	height: 100%;

	overflow: hidden;

}



section.section-cases .cases-grid-item.branding.app {

	background: #F8F7F4;

 /* grey */

}



section.section-cases .cases-grid-item.branding.website {

	background: #F2FAF4;

 /* green */

}



section.section-cases .cases-grid-item.website {

	background: #EFF8FC;

 /* blue */

}



section.section-cases .cases-grid-item.branding {

	background: #FDFAEF;

 /* yellow */

}



section.section-cases .cases-grid-item.app {

	background: #FAF1F1;

 /* red */

}



section.section-cases .cases-grid-item:hover {

	background: white !important;

	box-shadow: inset 0 0 0 1px #C4C4C4;

}



section.section-cases .cases-grid-item:hover .meta{

	background: rgba(0, 0, 0, 0.5) !important;

}







section.section-cases .cases-grid-item > a img {

	transition: all .35s ease;

	-o-transition: all .35s ease;

	-moz-transition: all .35s ease;

	-webkit-transition: all .35s ease;

	-webkit-filter: brightness(0%);

    /* webkit内核支持程度较好 */

	-moz-filter: brightness(0%);

    /* 其他内核现在并不支持，为了将来兼容性书写 */

	-ms-filter: brightness(0%);

	-o-filter: brightness(0%);

	filter: brightness(40%);

}
section.section-cases .cases-grid-item > a span{background: rgba(0, 0, 0);opacity: 0.5; display: block;width: 100%;height: 100%;transition: all .35s ease;

	-o-transition: all .35s ease;

	-moz-transition: all .35s ease;

	-webkit-transition: all .35s ease;}
section.section-cases .cases-grid-item:hover > a span{opacity: 0;}

@media (min-width: 992px) {

	section.section-cases .cases-grid-item > a img {

		width:auto;

		height: 100%;

	}

}



section.section-cases .cases-grid-item > a img.hover {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%,-50%);

	opacity: 0;

	-webkit-filter: brightness(100%);

    /* webkit内核支持程度较好 */

	-moz-filter: brightness(100%);

    /* 其他内核现在并不支持，为了将来兼容性书写 */

	-ms-filter: brightness(100%);

	-o-filter: brightness(100%);

	filter: brightness(85%);

}



section.section-cases .cases-grid-item:hover > a img.hover {

	opacity: 1;

	-webkit-filter: brightness(100%);

    /* webkit内核支持程度较好 */

	-moz-filter: brightness(100%);

    /* 其他内核现在并不支持，为了将来兼容性书写 */

	-ms-filter: brightness(100%);

	-o-filter: brightness(100%);

	filter: brightness(85%);

}



section.section-cases .cases-grid-item:hover > a img:not(.hover) {

  /* opacity: 0; */

	-webkit-filter: brightness(100%);

    /* webkit内核支持程度较好 */

	-moz-filter: brightness(100%);

    /* 其他内核现在并不支持，为了将来兼容性书写 */

	-ms-filter: brightness(100%);

	-o-filter: brightness(100%);

	filter: brightness(85%);

}



section.section-cases .cases-grid-item:hover > a img.hide {

	opacity: 0;

}



section.section-cases .cases-grid-item.active {

	display: block;

}



section.section-cases .cases-grid-item.in-view {

	animation-duration: .5s;

	animation-timing-function: ease-in-out;

	animation-name: fadeUp;

	animation-fill-mode: forwards;

	animation-delay: .25s;

}



section.section-cases .cases-grid-item .meta {

	position: absolute;

	display: flex;

	align-items: center;

	justify-content: space-between;

	bottom: 0;

	left: 0;

	width: 100%;

	padding: 20px 18px;

	box-sizing: border-box;

}



@media (min-width: 1200px) {

	section.section-cases .cases-grid-item .meta {

		padding: 20px 18px;

	}

}

section.section-cases .cases-grid-item .meta .tags{

	width: 100%;

}



section.section-cases .cases-grid-item .meta .tags span {

	color: #808080;

	font-size: 14px;

}



section.section-cases .cases-grid-item .meta .tags .tags-span1{

	display:block;

	color: #fff;

	font-size: 16px;

}



section.section-cases .cases-grid-item .meta .tags .tags-span2{

	display: block;

	width: 30px;

	height: 2px;

	margin: 10px 0;

	background: #00aeef;

}



section.section-cases .cases-grid-item .meta .tags .tags-span3{

	display:inline-block;

	color: #c3c3c3;

	font-size: 14px;

}



section.section-cases .cases-grid-item .meta .tags a{

	float: right;

	color: #fff;

	font-size: 14px;

}



@media (min-width:414px) and (max-width:567px) {

	section.section-cases .cases-grid-item .meta {

		padding: 0 8px 18px;

	}



	section.section-cases .cases-grid-item .meta .tags span {

		font-size: 12px;

		margin: 0 1px;

	}

}



@media (min-width:320px) and (max-width:375px) {

	section.section-cases .cases-grid-item .meta .tags span {

		font-size: 12px;

		margin: 0 3px;

	}

}



section.section-cases .cases-grid-item .meta .tags span:first-child {

	margin-left: 0;

}



section.section-cases .cases-grid-item .meta .tags span:last-child {

	margin-right: 0;

}



@media (min-width: 1200px) {

	section.section-cases .cases-grid-item .meta .social {

		display: flex;

	}

}



section.section-cases .cases-grid-item .meta .social li {

	margin-left: 8px;

}



section.section-cases .cases-grid-item .meta .social li a {

	position: relative;

	display: block;

	overflow: hidden;

	width: 40px;

	height: 40px;

}



@media (min-width:320px) and (max-width:414px) {

	section.section-cases .cases-grid-item .meta .social li a {

		width: 30px;

		height: 30px;

	}

}



section.section-cases .cases-grid-item .meta .social li a.dribbble {

	background-image: url("../image/ball-white.svg");

	background-size: contain;

	background-repeat: no-repeat;

}



section.section-cases .cases-grid-item .meta .social li a:hover.dribbble {

	background-image: url("../image/ball-white-hover.svg");

	background-size: contain;

	background-repeat: no-repeat;

}



section.section-cases .cases-grid-item .meta .social li a.station {

	background-image: url("../image/zcool-white.svg");

	background-size: contain;

	background-repeat: no-repeat;

}



section.section-cases .cases-grid-item .meta .social li a:hover.station {

	background-image: url("../image/zcool-white-hover.svg");

	background-size: contain;

	background-repeat: no-repeat;

}



section.section-cases .cases-grid-item .meta .social li a.behance {

	background-image: url("../image/be-white.svg");

	background-size: contain;

	background-repeat: no-repeat;

}



section.section-cases .cases-grid-item .meta .social li a:hover.behance {

	background-image: url("../image/be-white-hover.svg");

	background-size: contain;

	background-repeat: no-repeat;

}



section.section-cases .cases-grid-item .meta .social li a.link {

	background-image: url("../image/link.svg");

	background-size: contain;

	background-repeat: no-repeat;

}



section.section-cases .cases-grid-item .meta .social li a:hover.link {

	background-image: url("../image/link-hover.svg");

	background-size: contain;

	background-repeat: no-repeat;

}



/* section.section-cases .cases-grid-item > a:hover + .meta .social li a.link {

  background-image: url("../image/link-hover.svg");

  background-size: contain;

} */



/* Video player */

.video-player {

	position: relative;

	height: 0;

	padding-bottom: 56.25%;

}



.video-player > video {

	position: absolute;

	top: 0;

	left: 0;

	height: 100%;

	width: 100%;

}



.video-controls {

	position: absolute;

	left: 10px;

	bottom: 10px;

	display: flex;

	align-items: center;

	width: calc(100% - 60px);

}



@media (min-width: 1200px) {

	.video-controls {

		left: 30px;

		bottom: 30px;

	}

}



.video-scrubber, .video-progress {

	cursor: pointer;

}



.video-scrubber {

	position: relative;

	width: 100%;

	height: 20px;

	background: rgba(19,19,19,0);

}



.video-progress {

	width: 0;

	height: 1px;

	margin-top: 10px;

	background-color: white;

}



.play-pause {

	background: rgba(19,19,19,0);

	border: none;

	width: 80px;

	height: 50px;

	padding: 0;

	margin-right: 20px;

	display: flex;

	justify-content: center;

	align-items: center;

	outline: none;

}



.play-pause:focus {

	outline: none;

}



.play-pause:after {

	content: "";

	display: block;

	width: 12px;

	height: 12px;

	background-image: url("../image/triangle.svg");

	background-repeat: no-repeat;

	background-size: contain;

}



.play-pause.pause:after {

	content: "";

	display: block;

	width: 20px;

	height: 20px;

	background-image: url("../image/suspend.svg");

	background-repeat: no-repeat;

	background-size: contain;

}









/* Individual case study */

.page-casestudy h1 {

	margin-top: 0;

	font-size: 50px;

}



body.casestudy-indeco .page-casestudy h1 {

	color: #283276;

}



.page-casestudy h1 span {

	display: block;

	margin-top: 10px;

	font-size: 14px;

	font-weight: 400;

}



@media (min-width: 768px) {

	.page-casestudy h1 span {

		display: inline-block;

		margin: 0;

		margin-left: 40px;

	}

}



@media (min-width: 768px) {

	.page-casestudy h1 span {

		font-size: 18px;

	}

}



.casestudy-container {

	max-width: 1350px;

	margin: 0 auto;

}



.hero-casestudy {

	position: relative;

	width: 100%;

 /* height: 700px;*/

	background-repeat: no-repeat;

	background-size: cover;

	background-position: center center;

	display: flex;

	align-items: flex-end;

}



.hero-casestudy .container {

	margin: 20% 0 -10.5%;

	z-index: 5;

}



@media (min-width: 768px) {

	.hero-casestudy .container {

		margin: 19% 0 -7.5%;

	}

}



@media (min-width: 1200px) {

	.hero-casestudy .container {

		margin: 19% 0 -7.5%;

	}

}



.container-title {

	width: 80%;

	margin: 0 auto;

	overflow: hidden;

}



.hero-casestudy_title {

	width: 40%;

 /* height: 300px; */

	margin: 0 auto;

	margin-right: 0;

	padding: 1.8% 2.4%;

	box-sizing: border-box;

}



@media (min-width: 640px) {

	.hero-casestudy_title {

		width: 30%;

	}

}



@media (min-width: 768px) {

	.hero-casestudy_title {

		width: 26%;

	}

}



@media (min-width: 1200px) {

	.hero-casestudy_title {

		width: 22%;

	}

}



.hero-casestudy_title h3 {

	margin: 0;

	font-size: 20px;

	line-height: 24px;

	font-weight: lighter;

	font-family: 'PingFangSC-Semibold';

}



@media (min-width: 640px) {

	.hero-casestudy_title h3 {

		font-size: 22px;

		line-height: 28px;

		font-weight: lighter;

	}

}



@media (min-width: 768px) {

	.hero-casestudy_title h3 {

		font-size: 22px;

		line-height: 28px;

		font-weight: lighter;

	}

}



@media (min-width: 992px) {

	.hero-casestudy_title h3 {

		font-size: 24px;

		line-height: 34px;

		font-weight: lighter;

	}

}



@media (min-width: 1200px) {

	.hero-casestudy_title h3 {

		font-size: 24px;

		line-height: 40px;

		font-weight: lighter;

	}

}



@media (min-width: 1400px) {

	.hero-casestudy_title h3 {

		font-size: 26px;

		line-height: 40px;

		font-weight: lighter;

	}

}



@media (min-width: 1600px) {

	.hero-casestudy_title h3 {

		font-size: 30px;

		line-height: 48px;

		font-weight: lighter;

	}

}



.hero-casestudy_title img {

	width: 83%;

	margin: 53.2% auto;

	height: auto;

	display: block;

}



@media (min-width:320px) and (max-width:414px) {

	.hero-casestudy_title img {

		width: 68%;

		margin: 35.2% auto;

	}



	body.casestudy-securam .hero-casestudy_title img {

		width: 83%;

		margin: 45.2% auto;

	}

}



.casestudy-jumpaz .hero-casestudy_title img {

	width: 60%;

	margin: 26% auto;

}



@media (min-width:320px) and (max-width:414px) {

	.casestudy-jumpaz .hero-casestudy_title img {

		width: 36%;

		margin: 22% auto;

	}

}



.casestudy-dft .hero-casestudy_title img {

	margin: 33.5% auto;

}



.casestudy-migo .hero-casestudy_title img {

	width: 80%;

	margin: 32% auto;

}



body.casestudy-securam .hero-casestudy_title {

	background: #333;

	color: white;

}



@media (min-width:414px) and (max-width:567px) {

	body.casestudy-securam .hero-casestudy_title h3 {

		font-size: 20px;

	}

}



@media (min-width:375px) and (max-width:413px) {

	body.casestudy-securam .hero-casestudy_title h3 {

		font-size: 18px;

	}

}



@media (min-width:320px) and (max-width:374px) {

	body.casestudy-securam .hero-casestudy_title h3 {

		font-size: 15px;

	}

}



body.casestudy-indeco .hero-casestudy_title {

	background: #283276;

	color: white;

}



body.casestudy-indeco .hero-casestudy_title img {

	width: 50%;

	margin: 36% auto;

}



.casestudy-intro_row {

	position: relative;

	padding: 40px 0 0;

	border-top: 1px solid #cccccc;

}



@media (min-width: 640px) {

	.casestudy-intro_row {

		display: flex;

	}

}



.casestudy-intro_row p {

	margin: 0;

	padding-bottom: 26px;

}



.casestudy-intro_row p.space {

	font-size: 18px;

	color: #333333;

	margin: 0 0 15px;

	line-height: 2;

	flex: none;

}



@media (min-width: 640px) {

	.casestudy-intro_row p.space {

		margin: 0;

		margin-right: 50px;

	}

}



@media (min-width: 768px) {

	.casestudy-intro_row p.space {

		margin-right: 85px;

		width: 250px;

	}

}



@media (min-width: 1200px) {

	.casestudy-intro_row p.space {

		margin-right: 185px;

	}



	body.casestudy-indeco .casestudy-intro_row p.space {

		margin-right: 225px;

	}



	body.casestudy-securam .casestudy-intro_row p.space {

		margin-right: 50px;

		width: 250px;

	}

}



@media (min-width: 1440px) {

	.casestudy-intro_row p.space {

		margin-right: 85px;

		width: 200px;

	}



	body.casestudy-securam .casestudy-intro_row p.space {

		margin-right: 175px;

		width: 300px;

	}

}



.casestudy-intro_row .horz {

	font-size: 16px;

	line-height: 2;

	color: #909090;

	max-width: 1000px;

}



.casestudy-custom_header {

	color: #333333;

	font-size: 40px;

	margin: 0 0 2% 6%;

	max-width: 163px;

	font-weight: bolder;

}



@media (min-width:320px) and (max-width:414px) {

	.casestudy-custom_header {

		font-size: 24px;

		max-width: 150px;

	}

}



.casestudy-custom_header span {

	color: #F24535;

}



.casestudy-fullheight,

.casestudy-halfheight {

	position: relative;

	height: auto;

	width: 100%;

}



@media (min-width:320px) and (max-width:414px) {

	.securam-media {

		padding: 33% 0 23%;

	}

}



.casestudy-halfheight.media {

	height: 50vh;

}



@media (min-width:1200px) and (max-width:1360px) {

	.casestudy-fullheight.media {

		height: 85vh;

	}

}



@media (min-width:992px) and (max-width:1200px) {

	.casestudy-fullheight.media {

		height: 68vh;

	}

}



@media (min-width:768px) and (max-width:992px) {

	.casestudy-fullheight.media {

		height: 60vh;

	}

}



@media (min-width: 992px) {

	.casestudy-fullheight {

		height: 100vh;

	}



	.casestudy-fullheight.nopad {

		padding-top: 0;

		padding-bottom: 0;

	}

}



@media (min-width: 992px) {

	.casestudy-halfheight {

		height: 685px;

	}



	.casestudy-halfheight.nopad {

		padding-top: 0;

		padding-bottom: 0;

	}

}



@media (min-width: 992px) {

	.casestudy-fullheight {

		height: 100vh;

	}



	.casestudy-fullheight.nopad {

		padding-top: 0;

		padding-bottom: 0;

	}

}



.content-center {

	display: flex;

	justify-content: center;

	align-items: center;

}



.casestudy-branding .securam-logo {

	display: block;

	width: calc(100% - 120px);

	max-width: 540px;

	height: auto;

	margin: 0 auto 2%;

}



@media (min-width: 992px) {

	.casestudy-branding .securam-logo {

		width: 100%;

	}

}



.casestudy-branding .securam-guide {

	display: block;

	width: calc(100% - 120px);

	max-width: 1350px;

	height: auto;

	margin: 150px auto 0;

}



@media (min-width: 992px) {

	.casestudy-branding .securam-guide {

		margin: 250px auto 0;

		width: 100%;

	}

}



.casestudy-branding p {

	font-size: 18px;

}



.bg-white {

	background: white;

}



.bg-black {

	background: black;

}



.bg-black p {

	color: #CCCCCC;

}



.bg-securam-red {

	background: #F24535;

}



.bg-securam-red p {

	color: white;

}



.page-casestudy p .number {

	display: block;

	margin-bottom: 10px;

}



.page-casestudy p .number.lightgrey {

	color: #CCCCCC;

}



@media (min-width: 768px) {

	.page-casestudy p .number {

		display: inline-block;

		margin: 0;

		margin-right: 95px;

	}

}



.casestudy-branding.bg-black p .number {

	color: #6E6E6E;

}



.casestudy-branding.bg-white p .number {

	color: #CCCCCC;

}



.branding-colors {

	display: flex;

	justify-content: space-between;

	margin-top: 40px;

	width: calc(100% + 40px);

	margin-left: -20px;

	margin-right: -20px;

}



@media (min-width: 768px) {

	.branding-colors {

		margin: 0;

		margin-top: 95px;

		width: 100%;

	}

}



.branding-colors .color-block {

	height: 360px;

	display: flex;

	flex-direction: column;

	justify-content: space-between;

	align-items: flex-start;

	padding: 20px;

	box-sizing: border-box;

}



@media (min-width: 768px) {

	.branding-colors .color-block {

		border-radius: 8px;

		padding: 30px;

	}

}



@media (min-width: 1200px) {

	.branding-colors .color-block {

		height: 430px;

		padding: 40px;

	}

}



.branding-colors .color-block h4 {

	margin: 0;

	font-size: 26px;

	line-height: 1;

}



@media (min-width: 768px) {

	.branding-colors .color-block h4 {

		font-size: 40px;

	}

}



.branding-colors .color-block p {

	margin: 0 0 10px;

	padding: 0;

	line-height: 1;

	font-size: 14px;

}



.branding-colors .color-block p:last-child {

	margin: 0;

}



.branding-colors .color-block.black {

	width: 33.3333%;

	background: black;

	color: #CCCCCC;

}



.branding-colors .color-block.white {

	width: 33.3333%;

	background: white;

	border: 1px solid #CCCCCC;

	color: #6E6E6E;

}



.branding-colors .color-block.red {

	width: 33.3333%;

	background: #F24535;

	color: rgba(255,255,255,0.8);

}



@media (min-width: 768px) {

	.branding-colors .color-block.black {

		margin-top: 90px;

		width: 33.3333%;

	}



	.branding-colors .color-block.white {

		width: 26%;

	}



	.branding-colors .color-block.red {

		margin-top: 200px;

		width: 24%;

	}

}





@media (min-width: 1200px) {

	.branding-colors .color-block.black {

		width: 430px;

	}



	.branding-colors .color-block.white {

		width: 340px;

	}



	.branding-colors .color-block.red {

		margin-top: 200px;

	}

}



.securam-graphics {

	max-width: calc((100vw - 1350px) / 2 + 1350px);

	margin: 0 auto;

	margin-right: 0;

	padding-top: 60px;

	padding-bottom: 0;

}



@media (min-width: 768px) {

	.securam-graphics {

		padding-top: 80px;

	}

}



@media (min-width: 1200px) {

	.securam-graphics {

		padding-top: 100px;

	}

}



@media (min-width: 1440px) {

	.securam-graphics {

		padding-top: 120px;

	}

}



.securam-graphics p .number {

	color: rgba(255,255,255,0.8);

}



.securam-graphics .securam-graphics-row {

	align-items: flex-start;

	flex-wrap: wrap;

	justify-content: center;

	margin-top: -20px;

	transform: translateY(107px);

}



@media (min-width: 992px) {

	.securam-graphics .securam-graphics-row {

		margin-top: -20px;

		flex-wrap: nowrap;

		justify-content: space-between;

		transform: translateY(114px);

	}

}



@media (min-width: 1360px) {

	.securam-graphics .securam-graphics-row {

		margin-top: -20px;

		transform: translateY(184px);

	}

}



.securam-graphics .securam-graphics-row img {

	display: block;

	width: 100%;

	height: auto;

}



.securam-graphics .securam-graphics-row img:last-child {

	height: 450px;

	width: auto;

	margin-top: 50px;

}



@media (min-width: 992px) {

	.securam-graphics .securam-graphics-row img:first-child {

		height: auto;

		max-width: 460px;

	}



	.securam-graphics .securam-graphics-row img:last-child {

		margin: 0;

		margin-left: 50px;

		height: auto;

		max-width: 260px;

	}

}



@media (min-width: 1360px) {

	.securam-graphics .securam-graphics-row img:first-child {

		max-width: 760px;

	}



	.securam-graphics .securam-graphics-row img:last-child {

		margin: 0;

		max-width: 420px;

	}

}



.casestudy-padding_left {

	position: relative;

}



.casestudy-padding_left .bg-underlay {

	position: absolute;

	top: 227px;

	left: 0;

	height: calc(100% - 40px);

	width: 100%;

	max-width: calc((100vw - 1350px) / 2 + 1350px);

	z-index: -1;

	opacity: 0;

	transform: translateY(200px);

	transition: all 1s cubic-bezier(.25,.75,.5,1.25);

}



.casestudy-padding_left .bg-underlay.in-view {

	transform: translateY(0);

	opacity: 1;

}



.casestudy-row {

	width: 100%;

}



@media (min-width: 768px) {

	.casestudy-row {

		display: flex;

	}

}



.casestudy-logo {

	position: relative;

	padding-top: 120px;

	padding-bottom: 120px;

}



@media (min-width: 768px) {

	.casestudy-logo {

		padding-top: 160px;

		padding-bottom: 160px;

	}

}



@media (min-width: 1200px) {

	.casestudy-logo {

		padding-top: 200px;

		padding-bottom: 200px;

	}

}



@media (min-width: 1440px) {

	.casestudy-logo {

		padding-top: 240px;

		padding-bottom: 240px;

	}

}



.casestudy-logo > img {

	width: calc(100% - 60px);

	max-width: 400px;

	height: auto;

}



.casestudy-logo .tagline {

	position: absolute;

	bottom: 47px;

	left: 60px;

	font-size: 18px;

	line-height: 1;

}



.casestudy-logo.bg-white .tagline {

	color: #CCCCCC;

}



.casestudy-logo.bg-black .tagline {

	color: rgba(255,255,255,0.8);

}



.casestudy-padded {

	padding-top: 60px;

	padding-bottom: 60px;

	z-index: 2;

}



@media (min-width: 768px) {

	.casestudy-padded {

		padding-top: 80px;

		padding-bottom: 80px;

	}

}



@media (min-width: 1200px) {

	.casestudy-padded {

		padding-top: 120px;

		padding-bottom: 120px;

	}

}



@media (min-width: 1440px) {

	.casestudy-padded {

		padding-top: 160px;

		padding-bottom: 160px;

	}

}



.securam-decal-bg-1 {

	display: block;

	position: absolute;

	width: 100vw;

	height: 130px;

	left: 0;

	top: 0;

	background: url('../image/securam-decal-bg.jpg') no-repeat center center;

	background-size: cover;

	z-index: 0;

}



@media (min-width: 567px) {

	.securam-decal-bg-1 {

		display: block;

		position: absolute;

		width: 50vw;

		height: 72%;

	}

}



.securam-decal-bg-1 .tagline {

	position: absolute;

	bottom: 47px;

	left: 60px;

	font-size: 18px;

	color: #CCCCCC;

}



.securam-unique_image1 {

	max-width: 240px;

	margin-top: 150px;

}



@media (min-width: 567px) {

	.securam-unique_image1 {

		margin: 0;

		max-width: 300px;

		transform: translateX(90px);

	}

}



@media (min-width: 1200px) {

	.securam-unique_image1 {

		max-width: 467px;

		transform: translateX(140px);

	}

}



@media (min-width: 768px) {

	.securam-unique_panel1 {

		position: absolute;

		right: -70px;

		top: 0;

		height: 340px;

		width: 94px;

		background: #f24535;

	}



	.securam-unique_panel2 {

		position: absolute;

		right: -200px;

		top: 0;

		height: 340px;

		width: 94px;

		background: #E58200;

	}

}



@media (min-width: 1200px) {

	.securam-unique_panel1 {

		right: -110px;

		height: 510px;

		width: 134px;

	}



	.securam-unique_panel2 {

		right: -334px;

		height: 510px;

		width: 134px;

	}

}



.securam-webdesign img {

	display: block;

	width: 100%;

	max-width: 1116px;

	height: auto;

	margin: 50px auto 0;

}



@media (min-width: 768px) {

	.securam-webdesign img {

		margin: 100px auto 0;

	}

}



@media (min-width: 1200px) {

	.securam-webdesign img {

		margin: 145px auto 0;

	}

}



.securam-webdesign .container {

	position: relative;

	z-index: 3;

}



.securam-webdesign .decal-bg {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 50%;

	z-index: 0;

}



@media (min-width: 1200px) {

	.securam-webdesign .decal-bg {

		height: 940px;

	}

}



.securam-uidesign {

	margin-top: 60px;

}



@media (min-width: 768px) {

	.securam-uidesign {

		margin-top: 100px;

	}

}



@media (min-width: 1200px) {

	.securam-uidesign {

		margin-top: 120px;

	}

}



.uidesign-tiles {

	display: flex;

	flex-wrap: wrap;

}



.uidesign-tiles > .column {

	width: calc(16.66666% - 10px);

	margin: 5px;

}



.indeco-uidesign .uidesign-tiles > .column {

	width: calc(50% - 10px);

}



@media(min-width: 768px) {

	.indeco-uidesign .uidesign-tiles > .column {

		width: calc(33.3333% - 10px);

	}

}



@media(min-width: 1200px) {

	.indeco-uidesign .uidesign-tiles > .column {

		width: calc(20% - 10px);

	}

}



.uidesign-tiles .column .block {

	padding: 20px;

	margin-bottom: 10px;

	box-sizing: border-box;

	transition: all .35s ease;

	-o-transition: all .35s ease;

	-moz-transition: all .35s ease;

	-webkit-transition: all .35s ease;

}



.uidesign-tiles .column .block:first-child {

	display: flex;

	justify-content: space-between;

	flex-direction: column;

	height: auto;

}



@media (min-width: 992px) {

	.uidesign-tiles .column .block:first-child {

		height: 160px;

	}

}



@media (min-width: 992px) {

	.indeco-uidesign .uidesign-tiles .column .block:first-child {

		height: 180px;

	}

}



.uidesign-tiles .column .block p {

	margin: 0;

}



.uidesign-tiles .column .block span {

	color: white;

}



.uidesign-tiles .block.dark {

	background: #1A1A1A;

}



.indeco-uidesign .uidesign-tiles .block.blue {

	background: #283276;

}



.indeco-uidesign .uidesign-tiles .block.teal {

	background: #93D0CD;

}



.indeco-uidesign .uidesign-tiles .block.teal p,

.indeco-uidesign .uidesign-tiles .block.blue p {

	color: white;

	font-family: 'Poppins';

	font-size: 20px;

	font-weight: 500;

}



.indeco-uidesign .uidesign-tiles .block.teal span,

.indeco-uidesign .uidesign-tiles .block.blue span {

	color: white;

	font-family: 'Poppins';

	font-size: 18px;

	font-weight: 500;

}



.uidesign-tiles .block.dark:hover {

	background: #111111;

}



.uidesign-tiles .block.red {

	background: #F24535;

}



.uidesign-tiles .block.red p,

.uidesign-tiles .block.red span {

	color: white;

}



@media (min-width:375px) and (max-width:414px) {

	.mobile-site {

		margin-left: 6%;

	}

}



.casestudy-media {

	position: relative;

}



.casestudy-media .tagline {

	position: absolute;

	left: 20px;

	bottom: 20px;

}



@media (min-width: 768px) {

	.casestudy-media .tagline {

		left: 60px;

		bottom: 47px;

	}

}



.casestudy-media.bg-red .tagline {

	color: white;

}



.casestudy-media.bg-white .tagline {

	color: #6E6E6E;

}



.casestudy-app {

	position: relative;

}



.casestudy-app .container {

	position: relative;

	z-index: 3;

}



.casestudy-app .decal-bg {

	position: absolute;

	right: 0;

	top: 0;

	width: 50%;

	height: 100%;

	background: #F4F4F4;

	z-index: 0;

}



.casestudy-app .casestudy-row {

	display: flex;

	flex-wrap: wrap;

	justify-content: space-between;

	align-items: center;

}



.justify-end {

	justify-content: flex-end;

}



.justify-start {

	justify-content: flex-start;

}



.justify-center {

	justify-content: center;

}



.justify-between {

	justify-content: space-between;

}



.align-center {

	align-items: center;

}



.casestudy-app h3 {

	font-size: 30px;

	margin: 0 0 20px;

}



.casestudy-app .casestudy-row  > div {

	width: 50%;

	text-align: center;

}



.casestudy-app .casestudy-row  > div:first-child {

	width: 100%;

	margin-bottom: 50px;

	text-align: left;

}



@media (min-width: 640px) {

	.casestudy-app .casestudy-row > div {

		width: 33.3333%;

	}



	.casestudy-app .casestudy-row  > div:first-child {

		width: 33.3333%;

		margin: 0;

	}

}



@media (min-width: 1200px) {

	.casestudy-app h3 {

		font-size: 40px;

	}

}



.casestudy-app img {

	width: calc(100% - 20px);

	max-width: 335px;

}



.casestudy-app p {

	color: #6E6E6E;

	margin: 0;

}



.casestudy-securam-end {

	background: url('../image/securam-end.jpg') no-repeat center;

	background-size: cover;

}



.casestudy-end h2 {

	text-transform: uppercase;

	margin: 0;

}



@media (min-width: 768px) {

	.casestudy-end {

		height: 500px;

	}

}



@media (min-width: 1200px) {

	.casestudy-end {

		height: 750px;

	}



	.casestudy-end h2 {

		font-size: 90px;

	}

}





/* Indeco */

.casestudy-indeco-end {

	height: auto;

}



.casestudy-indeco-end h2 {

	color: #283276;

	text-align: center;

}



.casestudy-indeco-end img {

	display: block;

	width: 100%;

	height: auto;

	max-width: 806px;

	margin: 0 auto 120px;

}



.indeco-logo {

	max-width: 338px;

	width: 100%;

}



@media (min-width:320px) and (max-width:374px) {

	.indeco-logo {

		max-width: 200px;

	}

}



.indeco-guide {

	max-width: 900px;

	width: 100%;

}



.section-title p {

	color: black

}



.indeco-section-title {

	position: relative;

	font-family: 'Poppins';

	display: table;

	width: auto;

	margin: 0 auto 60px;

	font-size: 20px;

	letter-spacing: 6px;

	line-height: 1;

	text-align: center;

}



.indeco-section-title p {

	margin: 0;

}



.indeco-section-title:before {

	content: '';

	position: absolute;

	left: -45px;

	bottom: 11px;

	width: 51px;

	height: 1px;

	border-top: 1px solid #93D0CD;

}



.indeco-section-title:after {

	content: '';

	position: absolute;

	right: -8px;

	top: -8px;

	width: 6px;

	height: 6px;

	border-radius: 12px;

	border: 2px solid #93D0CD;

}



@media (min-width: 768px) {

	.indeco-section-title {

		margin: 0 auto 80px;

	}

}



@media (min-width: 1200px) {

	.indeco-section-title {

		margin: 0 auto 120px;

	}

}



.indeco-font > div:first-child {

	margin-bottom: 95px;

}



.indeco-font h2 {

	font-family: 'Poppins';

	font-weight: 700;

	font-size: 60px;

	color: #283276;

	text-transform: uppercase;

	margin: 0 0 50px;

	line-height: 1;

}



.indeco-font h2.teal {

	color: #6BC5C1;

}



.indeco-font h2 span {

	display: block;

	font-size: 18px;

}



@media (min-width: 640px) {

	.indeco-font h2 span {

		display: inline-block;

		margin-left: 20px;

	}

}



.indeco-font ul {

	list-style: none;

	display: flex;

}



.indeco-font ul li {

	font-family: 'Poppins';

	font-weight: 500;

	font-size: 14px;

	color: #283276;

	margin-right: 15px;

}



@media (min-width: 640px) {

	.indeco-font ul li {

		font-size: 18px;

		margin-right: 40px;

	}

}



.indeco-media-3,

.indeco-media-4,

.indeco-media-5 {

	display: block;

	max-width: 1335px;

	width: 100%;

	height: auto;

	margin: 0 auto;

}



.indeco-media-6 {

	display: block;

	width: 100%;

	height: auto;

	margin: 0 auto;

}



.indeco-media-7 {

	display: block;

	max-width: 1091px;

	width: 100%;

	height: auto;

	margin: 0 auto;

}



.indeco-media-9 {

	display: block;

	max-width: 1335px;

	width: 100%;

	height: auto;

	margin: 0 auto;

}



.indeco-media-border {

	border: 7px solid #283276;

	border-radius: 18px;

	position: relative;

	overflow: hidden;

	box-sizing: border-box;

}



.indeco-media-icons {

	display: block;

	max-width: 976px;

	width: 100%;

	height: auto;

	margin: 0 auto;

}



.indeco-media-9 img {

	display: block;

	width: 100%;

	height: auto;

	margin: 0 auto;

}



.bg-indeco-lightgrey {

	background: #F5F6FA;

}



.bg-indeco-blue {

	background: #252E6A;

}



.bg-indeco-blue .container {

	position: relative;

	z-index: 5;

}



.bg-indeco-blue .line-1 {

	position: absolute;

	top: 0;

	left: calc((100vw - 1335px) / 2 + 499px);

	height: 100%;

	width: 1px;

	background: #4655BA;

	z-index: 0;

}



.bg-indeco-blue .line-2 {

	position: absolute;

	top: 423px;

	left: 0;

	height: 1px;

	width: 100%;

	background: #4655BA;

	z-index: 0;

}



.bg-indeco-blue .line-3 {

	position: absolute;

	bottom: 773px;

	left: 0;

	height: 1px;

	width: 100%;

	background: #4655BA;

	z-index: 0;

}



@media (min-width:414px) and (max-width:567px) {

	.bg-indeco-blue .line-3 {

		bottom: 555px;

	}

}



@media (min-width:375px) and (max-width:413px) {

	.bg-indeco-blue .line-3 {

		bottom: 555px;

	}

}



@media (min-width:320px) and (max-width:374px) {

	.bg-indeco-blue .line-3 {

		bottom: 498px;

	}

}



.bg-indeco-blue .line-circle {

	position: absolute;

	bottom: 94px;

	left: calc((100vw - 1335px) / 2 - 305px);

	border-radius: 100%;

	height: 801px;

	width: 801px;

	border: 1px solid #4655BA;

	z-index: 0;

}



.bg-indeco-blue .indeco-section-title {

	color: white;

}



body.casestudy-indeco .small-grey {

	color: #A0A3AF;

	font-size: 14px;

	font-family: 'Poppins';

	margin: 0;

}



.casestudy-indeco-app {

	display: flex;

	flex-wrap: wrap;

	justify-content: flex-end;

}



.casestudy-indeco-app > div {

	width: 100%;

	margin: 0 0 50px;

}



@media (min-width: 567px) {

	.casestudy-indeco-app > div {

		width: 50%;

	}

}



@media (min-width: 768px) {

	.casestudy-indeco-app > div {

		width: 33.3333%;

		margin: inherit;

	}

}



.casestudy-indeco-app > div > div {

	display: table;

	margin: 0 auto;

	width: auto;

}



.indeco-line-circle {

	position: absolute;

	top: 250px;

	left: 50%;

	width: 200px;

	height: 200px;

	border-radius: 100%;

	border: 1px solid #CED2EE;

	z-index: -1;

	transform: translateX(-50%);

}



@media (min-width: 768px) {

	.indeco-line-circle {

		width: 450px;

		height: 450px;

	}

}



@media (min-width: 1200px) {

	.indeco-line-circle {

		width: 947px;

		height: 947px;

	}

}



.indeco-line-diagonal {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	width: 100%;

	height: 100%;

	background: url('../image/indeco-line-diag.svg') no-repeat center;

	background-size: cover;

	z-index: -1;

}



.indeco-line-diagonal2 {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	width: 100%;

	height: 100%;

	background: url('../image/indeco-line-diag2.svg') no-repeat center;

	background-size: cover;

	z-index: -1;

}



.indeco-product-service {

	position: relative;

	background: url('../image/indeco-media-8.jpg') no-repeat center;

	background-size: cover;

	height: 500px;

	max-width: calc((100vw - 1350px) / 2 + 1050px);

	margin-left: auto;

	margin-right: 0;

}



@media (min-width: 768px) {

	.indeco-product-service {

		height: 600px;

		transform: translateY(-110px);

	}

}



@media (min-width: 1200px) {

	.indeco-product-service {

		height: 700px;

	}

}



@media (min-width: 1600px) {

	.indeco-product-service {

		max-width: calc((100vw - 1350px) / 2 + 1350px);

	}

}



.indeco-product-service .content {

	position: absolute;

	bottom: -40px;

	left: 30px;

}



@media (min-width: 768px) {

	.indeco-product-service .content {

		bottom: -140px;

	}

}



@media (min-width: 1200px) {

	.indeco-product-service .content {

		position: absolute;

		bottom: -140px;

		left: -66px;

	}

}





.indeco-product-service .content h3 {

	font-family: 'Poppins';

	color: #6BC5C1;

	font-size: 24px;

	font-weight: 400;

	margin: 0 0 30px;

}



.indeco-product-service .content h2 {

	color: #458DFF;

	font-family: 'Poppins';

	font-weight: 700;

	margin: 0;

}



@media (min-width: 992px) {

	.indeco-product-service .content h2 {

		font-size: 90px;

		line-height: 88px;

	}

}



.indeco-product-service .content ul {

	position: relative;

	background: #283276;

	color: white;

	width: calc(100% + 80px);

	padding: 20px;

	box-sizing: border-box;

	margin: 60px 0 0;

}



@media (min-width: 768px) {

	.indeco-product-service .content ul {

		padding: 55px 50px;

		margin: 120px 0 0;

		width: 510px;

	}

}



@media (min-width: 1200px) {

	.indeco-product-service .content ul {

		margin: 120px 0 0 66px;

	}

}



.indeco-product-service .content ul li {

	color: white;

	font-size: 18px;

	font-family: 'Poppins';

	margin-bottom: 20px;

	font-weight: 400;

}



@media (min-width: 768px) {

	.indeco-product-service .content ul li {

		font-size: 24px;

	}

}



.indeco-product-service .content ul li:last-child {

	margin-bottom: 0;

}



.indeco-product-service .content ul:after {

	content: '';

	position: absolute;

	right: 20px;

	bottom: 20px;

	height: 62px;

	width: 12px;

	background: url('../image/indeco-arrow.svg') no-repeat center;

	background-size: contain;

}



@media (min-width: 768px) {

	.indeco-product-service .content ul:after {

		right: 50px;

		bottom: 50px;

	}

}



.indeco-furnishing {

	position: relative;

	background-size: cover;

	height: 600px;

	max-width: calc((100vw - 1350px) / 2 + 1050px);

	margin-left: auto;

	margin-right: 0;

}



.indeco-furnishing .swiper-slide {

	position: relative;

	width: 320px;

	height: 600px;

	background-repeat: no-repeat;

	background-position: center;

	background-size: cover;

}



.indeco-furnishing .swiper-slide:after {

	content: '';

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	width: 100%;

	height: 100%;

	background: black;

	opacity: 0.25;

	z-index: 1;

	transition: .4s ease;

	-o-transition: .4s ease;

	-moz-transition: .4s ease;

	-webkit-transition: .4s ease;

}



.indeco-furnishing .swiper-slide:hover:after {

	background: #283276;

	opacity: 1;

}



.indeco-furnishing .swiper-slide .content {

	position: absolute;

	bottom: 0;

	left: 0;

	width: 100%;

	z-index: 5;

	color: white;

	padding: 40px;

	box-sizing: border-box;

	transition: .4s ease;

	-o-transition: .4s ease;

	-moz-transition: .4s ease;

	-webkit-transition: .4s ease;

}



.indeco-furnishing .swiper-slide .hover-content {

	position: absolute;

	top: 0;

	bottom: 0;

	left: 0;

	right: 0;

	height: 100%;

	width: 100%;

	opacity: 0;

	z-index: 5;

	box-sizing: border-box;

	padding: 40px;

	pointer-events: none;

	visibility: hidden;

	transition: .4s ease;

	-o-transition: .4s ease;

	-moz-transition: .4s ease;

	-webkit-transition: .4s ease;

}



.indeco-furnishing .swiper-slide .hover-content:after {

	content: '';

	position: absolute;

	bottom: 0;

	left: 0;

	width: 100%;

	height: 198px;

	background: url('../image/indeco-slider-graphic.svg') no-repeat center;

	background-size: contain;

}



.indeco-furnishing .swiper-slide:hover .content {

	opacity: 0;

}



.indeco-furnishing .swiper-slide:hover .hover-content {

	opacity: 1;

	pointer-events: all;

	visibility: visible;

}



.indeco-furnishing .swiper-slide .hover-content h2,

.indeco-furnishing .swiper-slide .content h2 {

	display: flex;

	align-items: center;

	font-size: 30px;

	color: white;

	margin: 0;

	line-height: 1;

}



.indeco-furnishing .swiper-slide .hover-content h2:before,

.indeco-furnishing .swiper-slide .content h2:before {

	content: '';

	display: inline-block;

	width: 2px;

	height: 26px;

	background: #5362CE;

	margin-right: 14px;

}



.indeco-furnishing .swiper-slide:hover .hover-content h2:before {

	background: #0FB5A8;

}



.indeco-furnishing .swiper-slide .hover-content p {

	font-size: 14px;

	line-height: 1.4;

	margin: 30px 0 0;

	color: rgba(255,255,255,0.7);

}



.indeco-furnishing .swiper-button-prev {

	width: 70px;

	height: 70px;

	background: url('../image/slide-prev.svg') no-repeat center;

	background-size: contain;

	left: 40px;

}



.indeco-furnishing .swiper-button-next {

	width: 70px;

	height: 70px;

	background: url('../image/slide-next.svg') no-repeat center;

	background-size: contain;

	right: 40px;

}



.indeco-furnishing .swiper-button-prev:focus,

.indeco-furnishing .swiper-button-next:focus {

	outline: none;

}



.indeco-fill-circle {

	background: #F6F7FC;

	width: 240px;

	height: 240px;

	position: absolute;

	left: 0;

	bottom: -120px;

	border-radius: 100%;

	z-index: -1;

}



.indeco-fill-circle2 {

	background: #EAECF4;

	width: 240px;

	height: 240px;

	position: absolute;

	left: 50%;

	top: 50%;

	border-radius: 100%;

	z-index: 0;

	transform: translate(-50%,-50%);

}



@media (min-width: 768px) {

	.indeco-fill-circle {

		width: 528px;

		height: 528px;

		bottom: -215px;

	}



	.indeco-fill-circle2 {

		width: 528px;

		height: 528px;

	}

}



@media (min-width: 1200px) {

	.indeco-fill-circle2 {

		width: 788px;

		height: 788px;

	}

}



.casestudy-wow .hero-casestudy_title img {

	width: 72%;

	margin: 36.5% auto;

}



.casestudy-fairy .hero-casestudy_title img {

	width: 60%;

	margin: 26% auto;

}



body.casestudy-jumpaz .hero-casestudy_title {

	background: #88d11d;

	color: white;

}



body.casestudy-migo .hero-casestudy_title {

	background: #346375;

	color: white;

}



.casestudy-intro_row p.vert {

	width: 10%;

	min-width: 75px;

	font-size: 18px;

	color: #333333;

  /* writing-mode: vertical-rl; */

	text-orientation: upright;

	margin-right: 5%;

}



.casestudy-migo .casestudy-custom_header {

	margin: 0 0 2% 11%;

}



.az-large {

	padding-bottom: 28%;

}



.jumpza-container {

	background-image: url("../image/jumpaz-process.jpg");

	background-size: 100%;

	background-repeat: no-repeat;

}



.jumpza-container h3 {

	width: 445px;

	color: #fff;

	font-weight: bolder;

	font-size: 36px;

	padding-top: 9%;

}



@media (min-width:1360px) and (max-width:1440px) {

	.jumpza-container h3 {

		padding-top: 6%;

	}

}



@media (min-width:1200px) and (max-width:1360px) {

	.jumpza-container h3 {

		padding-top: 4%;

	}

}



@media (min-width:992px) and (max-width:1200px) {

	.jumpza-container h3 {

		padding-top: 2%;

		line-height: 32px;

	}

}



@media (min-width:992px) and (max-width:1200px) {

	.jumpza-container h3 {

		padding-top: 2%;

		line-height: 32px;

	}

}



@media (min-width:840px) and (max-width:992px) {

	.jumpza-container h3 {

		width: 349px;

		padding-top: 2%;

		line-height: 29px;

		font-size: 27px;

		margin: 0 0 2%;

	}

}



@media (min-width:768px) and (max-width:840px) {

	.jumpza-container h3 {

		padding-top: 0%;

		line-height: 29px;

		font-size: 27px;

		margin: 0 0 2%;

	}

}



@media (min-width:700px) and (max-width:768px) {

	.jumpza-container h3 {

		padding-top: 2%;

		line-height: 29px;

		font-size: 27px;

		margin: 0 0 2%;

	}

}



@media (min-width:640px) and (max-width:700px) {

	.jumpza-container h3 {

		padding-top: 2%;

		line-height: 23px;

		font-size: 25px;

		margin: 0 0 1%;

	}

}



@media (min-width:567px) and (max-width:640px) {

	.jumpza-container h3 {

		padding-top: 0%;

		line-height: 23px;

		font-size: 19px;

		margin: 0 0 1%;

	}

}



@media (min-width:414px) and (max-width:567px) {

	.jumpza-container h3 {

		padding-top: 0%;

		line-height: 16px;

		font-size: 18px;

		margin: 0 0 1%;

	}



	.az-large {

		padding: 10% 0 17%;

	}

}



@media (min-width:415px) and (max-width:567px) {

	.jumpza-container h3 {

		padding-top: 0%;

		line-height: 23px;

		font-size: 19px;

		margin: 0 0 1%;

	}



	.az-large {

		padding: 10% 0 17%;

	}

}



@media (min-width:376px) and (max-width:414px) {

	.jumpza-container h3 {

		padding: 7.5% 0 16%;

		font-size: 19px;

	}



	.az-large {

		padding: 10% 0 17%;

	}

}



@media (min-width:321px) and (max-width:375px) {

	.jumpza-container h3 {

		padding: 6% 0 10%;

		font-size: 17px;

	}



	.az-large {

		padding: 10% 0 17%;

	}

}



@media (min-width:0px) and (max-width:320px) {

	.jumpza-container h3 {

		padding: 5.8% 0 9%;

		font-size: 15px;

	}



	.az-large {

		padding: 10% 0 17%;

	}

}



.jumpza-container p {

	width: 62%;

	color: #fff;

	font-size: 16px !important;

	line-height: 36px;

}



@media (min-width:1200px) and (max-width:1360px) {

	.jumpza-container p {

		line-height: 32px;

	}

}



@media (min-width:992px) and (max-width:1200px) {

	.jumpza-container p {

		line-height: 28px;

	}

}



@media (min-width:840px) and (max-width:992px) {

	.jumpza-container p {

		line-height: 24px;

		width: 70%;

		font-size: 14px !important;

	}

}



@media (min-width:768px) and (max-width:840px) {

	.jumpza-container p {

		line-height: 24px;

		width: 70%;

		font-size: 14px !important;

	}

}



@media (min-width:700px) and (max-width:768px) {

	.jumpza-container p {

		line-height: 22px;

		width: 70%;

		font-size: 14px !important;

	}

}



@media (min-width:640px) and (max-width:700px) {

	.jumpza-container p {

		line-height: 22px;

		width: 70%;

		font-size: 14px !important;

	}

}



@media (min-width:567px) and (max-width:640px) {

	.jumpza-container p {

		line-height: 18px;

		width: 70%;

		font-size: 12px !important;

	}

}



@media (min-width:415px) and (max-width:567px) {

	.jumpza-container p {

		line-height: 18px;

		width: 100%;

		font-size: 12px !important;

	}

}



@media (min-width:320px) and (max-width:414px) {

	.jumpza-container p {

		display: none;

	}

}



.contrast {

	display: flex;

	padding-top: 2.8%;

}



.contrast-logo li {

	width: 49.9%;

}



.contrast-logo li img {

	width: 53%;

	margin: 0 auto;

	display: block;

}



.contrast-logo li span {

	display: block;

	text-align: center;

	color: #6c6c6c;

	font-size: 20px;

	padding-top: 70px;

}



.contrast-logo li:nth-child(1) {

	border-right: 1px solid #aeaeae;

}



.more-logo {

	width: 76%;

	margin: 7.4% auto 4.5%;

}



.more-logo img {

	width: 100%;

	margin: 0 auto;

}



.bg-logo {

	width: 100%;

	background: #fffcf8;

}



.bg-logo img {

	width: 35%;

	display: block;

	margin: 0 auto;

	padding: 14% 0;

}



.visual-element {

	background-image: url("../image/orange_bg.png");

	background-size: 100%;

	background-repeat: no-repeat;

	padding: 4.2% 0;

}



.visual-element h3 {

	width: 190px;

	color: #fff;

	font-weight: bolder;

	font-size: 36px;

	padding: 2.7% 0 28% 1.1%;

	;

}



@media (max-width:1600px) {

	.visual-element {

		padding: 4% 0;

	}



	.visual-element h3 {

		padding: 0 0 24% 1.1%;

		;

	}

}



@media (max-width:1440px) {

	.visual-element {

		padding: 4% 0;

	}



	.visual-element h3 {

		padding: 0 0 21% 1.1%;

		;

	}

}



@media (max-width:1200px) {

	.visual-element {

		padding: 4% 0;

	}



	.visual-element h3 {

		padding: 0 0 19.5% 1.1%;

		;

    width: 170px;

		font-size: 32px;

	}

}



@media (max-width:992px) {

	.visual-element {

		padding: 4% 0;

	}



	.visual-element h3 {

		padding: 0 0 17% 1.1%;

		width: 150px;

		font-size: 28px;

	}

}



@media (max-width:768px) {

	.visual-element {

		padding: 4% 0;

	}



	.visual-element h3 {

		padding: 0 0 16.4% 1.1%;

		width: 138px;

		font-size: 26px;

		line-height: 33px;

	}

}



@media (max-width:640px) {

	.visual-element {

		padding: 4% 0;

	}



	.visual-element h3 {

		padding: 0 0 14% 1.1%;

		width: 116px;

		font-size: 22px;

		line-height: 28px;

	}

}



@media (max-width:415px) {

	.visual-element {

		padding: 4% 0;

	}



	.visual-element h3 {

		padding: 0 0 16% 1.1%;

		width: 96px;

		font-size: 18px;

		line-height: 21px;

	}

}



@media (max-width:376px) {

	.visual-element {

		padding: 4% 0;

	}



	.visual-element h3 {

		padding: 0 0 13% 1.1%;

		width: 96px;

		font-size: 18px;

		line-height: 21px;

	}

}



@media (max-width:321px) {

	.visual-element {

		padding: 4% 0;

	}



	.visual-element h3 {

		padding: 0 0 14% 1.1%;

		width: 80px;

		font-size: 15px;

		line-height: 17px;

	}

}



.img-color {

	width: 70%;

	margin: 0 auto;

	overflow: hidden;



}



.img-color li {

	width: 33.3%;

	float: left;

}



.img-color li img {

	width: 50%;

	float: left;

}



.img-color li h4 {

	width: 48%;

	float: left;

	color: #f18e1e;

	font-size: 26px;

	font-weight: bolder;

	margin: 17% 0 1% 2%;

	line-height: 28px;

}



.img-color li:nth-child(2) h4 {

	color: #87c132;

}



.img-color li:nth-child(3) h4 {

	color: #124c4c;

}



.img-color li span {

	width: 48%;

	float: left;

	display: block;

	color: #7f7f7f;

	font-size: 20px;

	font-weight: 600;

	margin: 0 0 0 2%;

}



.bg-color {

	width: 70%;

	margin: 7% auto 0;

	overflow: hidden;

}



.bg-color li {

	width: 20%;

	float: left;

	margin-bottom: 7.5%;

	position: relative;

}



.bg-color li span {

	display: inline-block;

	width: 90px;

	height: 90px;

	background: #21b596;

	border-radius: 45px;

}



.bg-color li:nth-child(2) span {

	background: #21a8e0;

}



.bg-color li:nth-child(3) span {

	background: #b18bbe;

}



.bg-color li:nth-child(4) span {

	background: #f29c9f;

}



.bg-color li:nth-child(5) span {

	background: #fed200;

}



.bg-color li:nth-child(6) span {

	background: #add9c9;

}



.bg-color li:nth-child(7) span {

	background: #abcfed;

}



.bg-color li:nth-child(8) span {

	background: #d1c1df;

}



.bg-color li:nth-child(9) span {

	background: #f9cfcd;

}



.bg-color li:nth-child(10) span {

	background: #ffe39b;

}



.bg-color li em {

	position: absolute;

	font-style: normal;

	color: #7f7f7f;

	line-height: 90px;

	font-size: 20px;

	font-weight: 600;

	width: 50%;

	text-align: center;

}



.img-border {

	width: 72.5%;

	margin: 0 auto;

	overflow: hidden;

}



.img-border li {

	width: 16.6%;

	float: left;

}



.img-border li img:nth-child(1) {

	width: 40%;

	margin: 0 auto;

	display: block;

}



.img-border li span {

	display: block;

	width: 0px;

	height: 260px;

	border-left: 2px solid #b4b4b4;

	margin: 18% auto;

}



.img-border li img:nth-child(3) {

	width: 22%;

	margin: 0 auto;

	display: block;

}



.img-border li p {

	width: 100%;

	text-align: center;

	font-size: 25px;

	color: #9b9f9f;

	padding: 15px 0;

}



@media (min-width:1360px) and (max-width:1600px) {

	.bg-color li span {

		width: 80px;

		height: 80px;

	}



	.bg-color li em {

		line-height: 80px;

		width: 55%;

	}



	.img-border li img:nth-child(1) {

		width: 43%;

	}



	.img-border li img:nth-child(3) {

		width: 23%;

	}



	.img-border li span {

		height: 250px;

	}

}



@media (min-width:1200px) and (max-width:1360px) {

	.bg-color li span {

		width: 70px;

		height: 70px;

	}



	.bg-color li em {

		line-height: 70px;

		width: 55%;

	}



	.img-border li img:nth-child(1) {

		width: 44%;

	}



	.img-border li img:nth-child(3) {

		width: 24%;

	}



	.img-border li span {

		height: 240px;

	}

}



@media (min-width:992px) and (max-width:1200px) {

	.img-color,.bg-color {

		width: 75%;

	}



	.img-border {

		width: 80%;

	}



	.img-color li h4 {

		font-size: 22px;

		line-height: 25px;

	}



	.bg-color li {

		width: 25%;

	}



	.bg-color li span {

		width: 72px;

		height: 72px;

	}



	.bg-color li em {

		line-height: 72px;

		width: 60%;

	}



	.img-border li img:nth-child(1) {

		width: 45%;

	}



	.img-border li img:nth-child(3) {

		width: 25%;

	}



	.img-border li span {

		height: 230px;

	}

}



@media (min-width:850px) and (max-width:992px) {

	.img-color,.bg-color {

		width: 80%;

	}



	.img-border {

		width: 85%;

	}



	.img-color li h4 {

		font-size: 22px;

		line-height: 25px;

	}



	.bg-color li {

		width: 25%;

	}



	.bg-color li span {

		width: 65px;

		height: 65px;

	}



	.bg-color li em {

		line-height: 65px;

		width: 60%;

	}



	.img-border li img:nth-child(1) {

		width: 46%;

	}



	.img-border li img:nth-child(3) {

		width: 26%;

	}



	.img-border li span {

		height: 220px;

	}

}



@media (min-width:768px) and (max-width:850px) {

	.img-color,.bg-color {

		width: 85%;

	}



	.img-border {

		width: 90%;

	}



	.img-color li h4 {

		font-size: 22px;

		line-height: 25px;

	}



	.bg-color li {

		width: 25%;

	}



	.bg-color li span {

		width: 60px;

		height: 60px;

	}



	.bg-color li em {

		line-height: 60px;

		width: 60%;

	}



	.img-border li img:nth-child(1) {

		width: 47%;

	}



	.img-border li img:nth-child(3) {

		width: 27%;

	}



	.img-border li p {

		font-size: 22px;

	}



	.img-border li span {

		height: 210px;

	}

}



@media (min-width:640px) and (max-width:768px) {

	.img-color,.bg-color {

		width: 85%;

	}



	.img-border {

		width: 90%;

	}



	.img-color li h4 {

		font-size: 18px;

		line-height: 18px;

	}



	.img-color li span {

		font-size: 17px;

	}



	.img-color li img {

		width: 48%;

	}



	.bg-color li {

		width: 33%;

	}



	.bg-color li span {

		width: 60px;

		height: 60px;

	}



	.bg-color li em {

		line-height: 60px;

		width: 60%;

	}



	.img-border li img:nth-child(1) {

		width: 48%;

	}



	.img-border li img:nth-child(3) {

		width: 28%;

	}



	.img-border li p {

		font-size: 21px;

	}



	.img-border li span {

		height: 200px;

		border-left: 1px solid #b4b4b4;

	}

}



@media (min-width:567px) and (max-width:640px) {

	.img-color,.bg-color {

		width: 90%;

	}



	.img-border {

		width: 95%;

	}



	.img-color li h4 {

		font-size: 16px;

		line-height: 18px;

		margin: 16% 0 1% 2%;

	}



	.img-color li span {

		font-size: 17px;

	}



	.img-color li img {

		width: 48%;

	}



	.bg-color li {

		width: 33%;

	}



	.bg-color li span {

		width: 60px;

		height: 60px;

	}



	.bg-color li em {

		line-height: 60px;

		width: 60%;

	}



	.img-border li img:nth-child(1) {

		width: 49%;

	}



	.img-border li img:nth-child(3) {

		width: 29%;

	}



	.img-border li p {

		font-size: 20px;

	}



	.img-border li span {

		height: 190px;

		border-left: 1px solid #b4b4b4;

	}

}



@media (min-width:415px) and (max-width:567px) {

	.img-color,.bg-color {

		width: 90%;

	}



	.img-border {

		width: 95%;

	}



	.img-color li h4 {

		font-size: 16px;

		line-height: 18px;

		margin: 16% 0 1% 2%;

	}



	.img-color li span {

		font-size: 17px;

	}



	.img-color li img {

		width: 48%;

	}



	.bg-color li {

		width: 33%;

	}



	.bg-color li span {

		width: 50px;

		height: 50px;

	}



	.bg-color li em {

		line-height: 50px;

		width: 60%;

		font-size: 16px;

	}



	.img-border li img:nth-child(1) {

		width: 50%;

	}



	.img-border li img:nth-child(3) {

		width: 30%;

	}



	.img-border li p {

		font-size: 19px;

	}



	.img-border li span {

		height: 180px;

		border-left: 1px solid #b4b4b4;

	}

}



@media (min-width:376px) and (max-width:414px) {

	.hero-casestudy {

		height: auto;

	}



	.img-color,.bg-color {

		width: 90%;

		display: block;

	}



	.img-border {

		width: 95%;

	}



	.img-color li {

		width: 50%;

	}



	.img-color li h4 {

		font-size: 16px;

		line-height: 18px;

		margin: 14% 0 0 2%;

	}



	.img-color li span {

		font-size: 17px;

	}



	.img-color li img {

		width: 43%;

	}



	.img-color li:nth-of-type(3) {

		margin-top: 5%;

	}



	.bg-color li {

		width: 33%;

	}



	.bg-color li span {

		width: 45px;

		height: 45px;

	}



	.bg-color li em {

		line-height: 45px;

		width: 60%;

		font-size: 16px;

	}



	.img-border li img:nth-child(1) {

		width: 51%;

	}



	.img-border li img:nth-child(3) {

		width: 31%;

	}



	.img-border li p {

		font-size: 18px;

	}



	.img-border li span {

		height: 170px;

		border-left: 1px solid #b4b4b4;

	}

}



@media (min-width:321px) and (max-width:375px) {

	.hero-casestudy {

		height: auto;

	}



	.img-color,.bg-color {

		width: 90%;

		display: block;

	}



	.img-border {

		width: 95%;

	}



	.img-color li {

		width: 50%;

	}



	.img-color li h4 {

		font-size: 15px;

		line-height: 16px;

		margin: 13% 0 0 2%;

	}



	.img-color li span {

		font-size: 15px;

	}



	.img-color li img {

		width: 40%;

	}



	.img-color li:nth-of-type(3) {

		margin-top: 5%;

	}



	.bg-color li {

		width: 33%;

	}



	.bg-color li span {

		width: 40px;

		height: 40px;

	}



	.bg-color li em {

		line-height: 40px;

		width: 60%;

		font-size: 14px;

	}



	.img-border li img:nth-child(1) {

		width: 52%;

	}



	.img-border li img:nth-child(3) {

		width: 32%;

	}



	.img-border li p {

		font-size: 17px;

	}



	.img-border li span {

		height: 160px;

		border-left: 1px solid #b4b4b4;

	}

}



@media (min-width:0px) and (max-width:320px) {

	.hero-casestudy {

		height: auto;

	}



	.img-color,.bg-color {

		width: 90%;

		display: block;

	}



	.img-border {

		width: 95%;

	}



	.img-color li {

		width: 50%;

	}



	.img-color li h4 {

		font-size: 13px;

		line-height: 13px;

		margin: 13% 0 0 2%;

	}



	.img-color li span {

		font-size: 13px;

	}



	.img-color li img {

		width: 40%;

	}



	.img-color li:nth-of-type(3) {

		margin-top: 5%;

	}



	.bg-color li {

		width: 33%;

	}



	.bg-color li span {

		width: 35px;

		height: 35px;

	}



	.bg-color li em {

		line-height: 35px;

		width: 60%;

		font-size: 12px;

	}



	.img-border li img:nth-child(1) {

		width: 53%;

	}



	.img-border li img:nth-child(3) {

		width: 33%;

	}



	.img-border li p {

		font-size: 16px;

	}



	.img-border li span {

		height: 150px;

		border-left: 1px solid #b4b4b4;

	}

}



.gray-bg {

	position: absolute;

	right: 0;

	top: 0;

	width: 50%;

	height: 100%;

	background: #F4F4F4;

	z-index: 0;

}



.card-one {

	width: 75%;

	margin: 0 auto;

	z-index: 9;

	position: relative;

}



.card-icon {

	padding-top: 10%;

}



.card-icon img {

	width: 100%;

}



.card-two {

	width: 88%;

	margin-left: 12%;

	padding: 6% 0 7%;

	z-index: 9;

	position: relative;

}



.card-kid {

	width: 64.3%;

}



.card-half {

	width: 35.7%;

}



.card-more {

	position: relative;

	z-index: 0;

	margin: 10.5% 0 6%;

}



.card-below {

	width: 72%;

	margin: 0 auto;

	position: absolute;

	left: 14%;

	z-index: 0;

}



.card-left {

	width: 24.6%;

	position: absolute;

}



.card-middle {

	width: 51.3%;

	position: absolute;

	left: 23%;

}



.card-right {

	width: 24.5%;

	position: relative;

	left: 72.6%;

}



.card-below img {

	width: 100%;

}



.card-right img {

	padding-top: 151%;

}



.card-above {

	width: 47.6%;

	position: relative;

	z-index: 9;

	left: 52.2%;

	padding-top: 7.2%;

}



.card-top img {

	width: 100%;

}



.card-bottom {

	width: 4.4%;

	position: relative;

	left: 27.5%;

	padding-top: 9.2%;

	top: 1%;

}



.card-bottom img {

	width: 100%;

}



.about-jumpza {

	width: 100%;

	margin: 1% 0;

}



.envelope-bg {

	background: #d2e5ed;

}



.icon-container {

	display: flex;

	margin: 6.5% 0 7.5%;

}



.two-icon {

	width: 14.6%;

	padding: 0px 8% 0 19%;

	border-right: 2px solid #a5a5a5;

}



.two-icon li {

	width: 100%;

}



.two-icon li:nth-child(2) {

	padding-top: 43%;

}



.two-icon li img {

	width: 100%;

	margin: 0 auto;

	display: block;

}



.more-icon {

	width: 58%;

	padding-left: 9.5%;

}



.more-icon li {

	width: 14.5%;

	display: inline-block;

	margin-right: 3.7%;

}



.more-icon li img {

	width: 100%;

}



.more-icon li:nth-child(6),.more-icon li:nth-child(7),.more-icon li:nth-child(8),.more-icon li:nth-child(9),.more-icon li:nth-child(10) {

	margin: 2.4% 3.7% 2.4% 0;

}



.sight {

	width: 100%;

	background: #f7f9fa;

}



.sight-img {

	width: 100%;

}



.sight-img img {

	width: 100%;

}



.sight-bottom {

	margin-top: 8%;

}



.indicato {

	display: flex;

}



.indicator-left {

	width: 69%;

	display: inline-block;

}



.indicator-right {

	width: 29.15%;

	display: inline-block;

	position: absolute;

	right: 0;

}



.indicator-bottom {

	width: 100%;

	display: inline-block;

	margin-top: 1.6%;

}



.indicator img {

	width: 100%;

}



.mascot-design {

	background-image: url("../image/mascot-design.png");

	background-size: 100%;

	background-repeat: no-repeat;

	padding: 37.7% 0;

}



.mascot-design h3 {

	width: 160px;

	color: #333333;

	font-weight: bolder;

	font-size: 36px;

	position: absolute;

	right: 23%;

	top: 0.6%;

}



@media (min-width:1440px) and (max-width:1680px) {

	.mascot-design h3 {

		right: 20%;

		top: -0.5%;

	}

}



@media (min-width:1200px) and (max-width:1440px) {

	.mascot-design h3 {

		right: 19%;

		top: -1.2%;

	}

}



@media (min-width:992px) and (max-width:1200px) {

	.mascot-design h3 {

		right: 12%;

		top: -2.2%;

	}

}



@media (min-width:768px) and (max-width:992px) {

	.mascot-design h3 {

		right: 12%;

		top: -2.2%;

		font-size: 32px;

	}

}



@media (min-width:640px) and (max-width:768px) {

	.mascot-design h3 {

		right: 6%;

		top: -2.2%;

		font-size: 28px;

	}

}



@media (min-width:500px) and (max-width:640px) {

	.mascot-design h3 {

		right: 2%;

		top: -2.2%;

		font-size: 24px;

	}

}



@media (min-width:376px) and (max-width:414px) {

	.mascot-design h3 {

		right: -6%;

		top: -4%;

		font-size: 20px;

	}

}



@media (min-width:321px) and (max-width:375px) {

	.mascot-design h3 {

		right: -11%;

		top: -4.2%;

		font-size: 20px;

	}

}



@media (min-width:0px) and (max-width:320px) {

	.mascot-design h3 {

		width: 150px;

		right: -13%;

		top: -3%;

		font-size: 18px;

		line-height: 20px;

	}

}



.mascot-design h3 font,.web-design h3 font {

	color: #ff9500;

}



.web-design {

	width: 100%;

	background: #e8edf0;

	margin: 25% 0 35%;

	z-index: 0;

}



.web-design-all {

	width: 100%;

	position: relative;

	padding: 26% 0;

}



.web-design h3 {

	width: 160px;

	color: #333333;

	font-weight: bolder;

	font-size: 36px;

	position: absolute;

	left: 15.5%;

	top: -56%;

}



@media (min-width:992px) and (max-width:1440px) {

	.web-design h3 {

		left: 10%;

		top: -56%;

	}

}



@media (min-width:768px) and (max-width:992px) {

	.web-design h3 {

		left: 8%;

		top: -56%;

		font-size: 32px;

	}

}



@media (min-width:640px) and (max-width:768px) {

	.web-design h3 {

		left: 8%;

		top: -56%;

		font-size: 28px;

	}

}



@media (min-width:500px) and (max-width:640px) {

	.web-design h3 {

		width: 140px;

		left: 8%;

		top: -56%;

		font-size: 24px;

	}

}



@media (min-width:376px) and (max-width:414px) {

	.web-design h3 {

		width: 120px;

		left: 6%;

		top: -62%;

		font-size: 20px;

	}

}



@media (min-width:321px) and (max-width:375px) {

	.web-design h3 {

		width: 120px;

		left: 6%;

		top: -62%;

		font-size: 20px;

	}

}



@media (min-width:0px) and (max-width:320px) {

	.web-design h3 {

		width: 100px;

		left: 6%;

		top: -62%;

		font-size: 18px;

		line-height: 20px;

	}

}



.web-design-top {

	width: 66%;

	position: absolute;

	right: 0;

	top: -66%;

}



.web-design-bottom {

	width: 75%;

	position: absolute;

	left: 12.5%;

	top: 78%;

}



.web-design img {

	width: 100%;

}



.bottom-logo {

	width: 26%;

	margin: 0 auto;

}



.bottom-logo img {

	width: 100%;

}



.bottom-font {

	width: 100%;

	margin: 4% auto 0;

}



.bottom-font p {

	color: #818181;

	padding: 0 10px;

	text-align: center;

}



.bottom-font p font {

	color: #000;

}



.bottom-thanks {

	width: 90%;

	margin: 0 auto;

}



.bottom-thanks img {

	width: 100%;

}

/*****************************************/













.bg-white {

	background: white;

}



.bg-black {

	background: black;

}



.bg-black p {

	color: #CCCCCC;

}



.casestudy-row {

	width: 100%;

}



@media (min-width: 768px) {

	.casestudy-row {

		display: flex;

	}

}



.icon-design {

	position: relative;

	margin-bottom: 25%;

}



.location-logo {

	width: 100%;

	position: absolute;

	top: 50%;

}



.location-logo img {

	width: 40%;

	margin: 0 auto;

	display: block;

}



.three-element li {

	width: 33.3%

}



.three-element li img {

	width: 100%

}



.logo-course {

	width: 55%;

	margin: 6.5% auto;

	display: block;

}



.logo-course img {

	width: 100%;

}



.logo-line {

	width: 100%;

	background: #346375;

}



.logo-line img {

	width: 46%;

	margin: 0 auto;

	display: block;

	padding: 18% 0;

}



.logo-blank {

	width: 40%;

	margin: 18% auto;

	display: block;

}



.logo-blank img {

	width: 100%;

}



.color-five {

	width: 100%;

	display: inline-block;

}



.color-five li {

	float: left;

	width: 33.333%;

}



.color-five li:nth-child(1) {

	width: 66.666%;

	background: #244252;

}



.color-five li:nth-child(2) {

	background: #00caeb;

}



.color-five li:nth-child(3) {

	background: #ffdd00;

}



.color-five li:nth-child(4) {

	background: #6edc00;

}



.color-five li:nth-child(5) {

	background: #00b83c;

}



.color-five li p {

	font-size: 17px;

	font-weight: 600;

	line-height: 34px;

	margin: 0;

	padding: 32% 0% 7% 9%;

}



.color-five li:nth-child(1) p {

	color: #346375;

	padding: 41% 0% 3.82% 4.5%;

}



.color-five li:nth-child(2) p {

	color: #00a8d8;

	padding: 82.05% 0% 7.6% 9%;

}



.color-five li:nth-child(3) p {

	color: #39514a;

}



.color-five li:nth-child(4) p {

	color: #4bbb00;

}



.color-five li:nth-child(5) p {

	color: #019d34;

}



.color-five li font {

	font-size: 30px;

	color: #fff;

	font-weight: 600;

}



.color-five li:nth-child(2) font,.color-five li:nth-child(3) font {

	color: #244252;

}



.green-blue {

	width: 70%;

	margin: 1.2% 6% 3.5% 16%;

	display: inline-block;

}



.green-blue li {

	width: 16.6%;

	float: left;

}



.green-blue li:nth-child(1),.green-blue li:nth-child(2),.green-blue li:nth-child(3),.green-blue li:nth-child(4),.green-blue li:nth-child(5),.green-blue li:nth-child(6) {

	margin-bottom: 8%;

}



.green-blue li img {

	width: 82%;

	margin: 0 auto;

	display: block;

}



.two-card {

	display: inline-block;

}



.two-card img {

	float: left;

}



.two-card img:nth-child(1) {

	width: 53.1%;

}



.two-card img:nth-child(2) {

	width: 46.9%;

}



.landscape-painting {

	width: 63%;

	margin: 3.5% auto 0;

}



.landscape-painting img {

	width: 100%;

	display: block;

}



.landscape-painting img:nth-child(1) {

	margin-bottom: 10%;

}



.triangle-color {

	width: 45%;

	display: inline-block;

	margin: 0 0 2% 12%;

}



.triangle-color li {

	width: 32%;

	display: inline-block;

}



.triangle-color li img {

	width: 60%;

	margin: 7% auto 9%;

	display: block;

}



.triangle-color li p {

	text-align: center;

	color: #487283;

	font-weight: bold;

	font-size: 17px;

	padding-bottom: 15%;

}



.yellow-green {

	width: 16%;

	display: inline-block;

	position: absolute;

	right: 3%;

	top: 24%;

}



.yellow-green img {

	width: 100%;

}



.cartoon-icon {

	width: 100%;

	background: url('../image/mascot-bg.png') no-repeat center;

	background-size: 100%;

}



.cartoon-icon ul {

	width: 55%;

	margin: 2% auto;

}



.cartoon-icon li {

	width: 19.2%;

	display: inline-block;

}



.cartoon-icon li:nth-child(2),.cartoon-icon li:nth-child(6) {

	width: 38%;

}



.cartoon-icon li img {

	width: 80%;

	margin: 5% auto;

	display: block;

}



.small-ren {

	padding: 10% 0;

}

/* .puppet{

  width:70%;

  margin:0 auto;

} */

.puppet ul {

	display: inline-block;

}



.two-puppet {

	width: 22%;

	margin-left: 15%;

	float: left;

}



.two-puppet li {

	width: 35%;

	margin: 0 auto 14%;

}



.more-puppet {

	width: 58%;

}



.more-puppet li {

	width: 77.4%;

}



.puppet li img {

	width: 100%;

}



.two-puppet p {

	text-align: center;

	color: #7e8b94;

	font-weight: 600;

	padding-top: 14%;

}



.migo-electrombile {

	width: 100%;

	display: inline-block;

	margin-top: 4%;

}



.migo-electrombile li {

	width: 60.4%;

	float: left;

}



.migo-electrombile li {

	margin-bottom: 3%;

}



.migo-electrombile li:nth-child(2),.migo-electrombile li:nth-child(3) {

	width: 28.4%;

	padding: 4.1% 5.6%;

}



.migo-electrombile li img {

	width: 100%;

}



.thank-you {

	width: 100%;

	background: url('../image/thanks-bg.png') no-repeat center;

	background-size: 100%;

	text-align: center;

	padding: 8% 0;

	font-size: 84px;

	font-weight: bolder;

	color: #fff;

}



@media (min-width:1600px) and (max-width:1780px) {

	.thank-you {

		font-size: 77px;

	}

}



@media (min-width:1440px) and (max-width:1600px) {

	.thank-you {

		font-size: 70px;

	}



	.color-five li font {

		font-size: 28px;

	}



	.two-puppet p {

		padding-top: 13%;

	}



	.two-puppet p {

		padding-top: 13%;

	}

}



@media (min-width:1360px) and (max-width:1440px) {

	.thank-you {

		font-size: 66px;

	}



	.color-five li font {

		font-size: 26px;

	}



	.two-puppet p {

		padding-top: 13%;

	}

}



@media (min-width:1200px) and (max-width:1360px) {

	.thank-you {

		font-size: 58px;

	}



	.color-five li font {

		font-size: 24px;

	}



	.color-five li p {

		font-size: 16px;

		line-height: 30px;

	}



	.two-puppet p {

		padding-top: 11%;

	}

}



@media (min-width:992px) and (max-width:1200px) {

	.thank-you {

		font-size: 48px;

	}



	.color-five li font {

		font-size: 22px;

	}



	.color-five li p {

		font-size: 16px;

		line-height: 28px;

	}



	.two-puppet p {

		padding-top: 10%;

	}

}



@media (min-width:768px) and (max-width:992px) {

	.thank-you {

		font-size: 36px;

	}



	.color-five li font {

		font-size: 20px;

	}



	.color-five li p {

		font-size: 15px;

		line-height: 28px;

	}



	.two-puppet p {

		padding-top: 8%;

		font-size: 16px;

	}

}



@media (min-width:576px) and (max-width:768px) {

	.thank-you {

		font-size: 30px;

	}



	.color-five li font {

		font-size: 18px;

	}



	.color-five li p {

		font-size: 15px;

		line-height: 28px;

	}



	.two-puppet p {

		padding-top: 7%;

		font-size: 15px;

	}



	.cartoon-icon ul {

		width: 60%;

	}

}



@media (min-width:414px) and (max-width:576px) {

	.thank-you {

		font-size: 20px;

	}



	.color-five li font {

		font-size: 16px;

	}



	.color-five li p {

		font-size: 14px;

		line-height: 24px;

	}



	.triangle-color li p {

		font-size: 14px;

	}



	.two-puppet {

		width: 24%;

		margin: 0 10% 0 8%;

	}



	.two-puppet p {

		padding-top: 4%;

		font-size: 13px;

	}



	.more-puppet li {

		width: 83%;

	}



	.cartoon-icon ul {

		width: 80%;

	}



	.cartoon-icon li {

		width: 18%;

	}



	.triangle-color {

		width: 65%;

		margin: 6% 0 2% 6%;

	}



	.yellow-green {

		top: 30%;

	}



	.casestudy-migo .casestudy-custom_header {

		width: 30%;

	}



	.location-logo {

		top: 72%;

	}



	.location-logo img {

		width: 54%;

	}

}



@media (min-width:375px) and (max-width:413px) {

	.thank-you {

		font-size: 18px;

	}



	.color-five li font {

		font-size: 15px;

	}



	.color-five li p {

		font-size: 13px;

		line-height: 22px;

	}



	.triangle-color li p {

		font-size: 14px;

	}



	.two-puppet {

		width: 24%;

		margin: 0 10% 0 8%;

	}



	.two-puppet p {

		padding-top: 4%;

		font-size: 12px;

	}



	.more-puppet li {

		width: 83%;

	}



	.cartoon-icon ul {

		width: 80%;

	}



	.cartoon-icon li {

		width: 18%;

	}



	.triangle-color {

		width: 70%;

		margin: 6% 0 2% 6%;

	}



	.triangle-color li {

		width: 30%;

	}



	.yellow-green {

		top: 30%;

	}



	.casestudy-migo .casestudy-custom_header {

		width: 30%;

	}



	.location-logo {

		top: 72%;

	}



	.location-logo img {

		width: 54%;

	}

}



@media (min-width:320px) and (max-width:374px) {

	.thank-you {

		font-size: 16px;

	}



	.color-five li font {

		font-size: 14px;

	}



	.color-five li p {

		font-size: 12px;

		line-height: 20px;

	}



	.triangle-color li p {

		font-size: 14px;

	}



	.two-puppet {

		width: 28%;

		margin: 0 4% 0 6%;

	}



	.two-puppet p {

		padding-top: 0;

		font-size: 12px;

	}



	.more-puppet li {

		width: 95%;

	}



	.cartoon-icon ul {

		width: 80%;

	}



	.cartoon-icon li {

		width: 18%;

	}



	.triangle-color {

		width: 70%;

		margin: 6% 0 2% 6%;

	}



	.triangle-color li {

		width: 30%;

	}



	.yellow-green {

		top: 30%;

	}



	.casestudy-migo .casestudy-custom_header {

		width: 30%;

	}



	.location-logo {

		top: 72%;

	}



	.location-logo img {

		width: 54%;

	}

}



body.casestudy-oaf .hero-casestudy_title {

	background: #f0b08e;

	color: white;

}



body.casestudy-tmr .hero-casestudy_title {

	background: #f32e3b;

	color: #fff;

}



body.casestudy-atlas .hero-casestudy_title {

	background: #000;

	color: #fff;

}



body.casestudy-wow .hero-casestudy_title {

	background: #c0a279;

	color: white;

}



.about-wow {

	width: 100%;

}



body.casestudy-wow .page-casestudy .wow-web-design img {

	width: 85%;

	margin: -5% auto 0;

	overflow: hidden;

	display: block;

}



.creative-process {

	width: 100%;

	float: left;

	background: url(../image/creative-process-bg.jpg);

	background-size: 100%;

	background-repeat: no-repeat;

}



.creative-process p:nth-of-type(1) {

	width: 50%;

	float: left;

	font-family: 'PingFangSC-Semibold';

	font-weight: bold;

	font-size: 39px;

	color: #fff;

	line-height: 48px;

	margin: 10.7% 0 1.1% 33.3%;

}



.creative-process p:nth-of-type(2) {

	width: 49%;

	float: left;

	font-size: 18px;

	color: #9c9c9d;

	line-height: 36px;

	margin: 0 0 48% 33.3%;

}



@media (min-width:1200px) and (max-width:1360px) {

	.creative-process p:nth-of-type(1) {

		margin: 9.7% 0 1.1% 33.3%;

	}



	.creative-process p:nth-of-type(2) {

		width: 58%;

	}

}



@media (min-width:992px) and (max-width:1200px) {

	.creative-process p:nth-of-type(1) {

		margin: 9% 0 1.1% 33.3%;

		font-size: 36px;

		line-height: 40px;

	}



	.creative-process p:nth-of-type(2) {

		width: 58%;

		line-height: 30px;

		font-size: 16px;

	}

}



@media (min-width:768px) and (max-width:992px) {

	.creative-process p:nth-of-type(1) {

		width: 60%;

		margin: 9% 0 1.1% 26%;

		font-size: 30px;

		line-height: 29px;

	}



	.creative-process p:nth-of-type(2) {

		width: 65%;

		line-height: 26px;

		font-size: 14px;

		margin: 0 0 48% 26%;

	}

}



@media (min-width:640px) and (max-width:768px) {

	.creative-process p:nth-of-type(1) {

		width: 60%;

		margin: 9% 0 1.1% 26%;

		font-size: 28px;

		line-height: 26px;

	}



	.creative-process p:nth-of-type(2) {

		width: 66%;

		line-height: 22px;

		font-size: 12px;

		margin: 0 0 48% 26%;

	}

}



@media (min-width:414px) and (max-width:640px) {

	.creative-process p:nth-of-type(1) {

		width: 74%;

		margin: 8% 0 1.1% 15%;

		font-size: 16px;

		line-height: 12px;

	}



	.creative-process p:nth-of-type(2) {

		width: 84%;

		line-height: 19px;

		font-size: 12px;

		margin: 0 0 35% 15%;

	}

}



@media (min-width:375px) and (max-width:413px) {

	.creative-process p:nth-of-type(1) {

		width: 74%;

		margin: 8% 0 1.1% 15%;

		font-size: 15px;

		line-height: 11px;

	}



	.creative-process p:nth-of-type(2) {

		width: 91%;

		line-height: 19px;

		font-size: 12px;

		margin: 0 0 35% 5%;

	}

}



@media (min-width:320px) and (max-width:374px) {

	.creative-process p:nth-of-type(1) {

		width: 74%;

		margin: 8% 0 1.1% 15%;

		font-size: 13px;

		line-height: 7px;

	}



	.creative-process p:nth-of-type(2) {

		width: 96%;

		line-height: 13px;

		font-size: 12px;

		margin: 0 0 35% 2%;

	}

}



.creative-icon {

	width: 84%;

	margin: 0 auto;

	overflow: hidden;

	padding-top: 12%;

}



.creative-icon ul {

	width: 33%;

	float: left;

}



.creative-icon ul li {

	width: 33.3%;

	float: left;

}



.creative-icon ul li img {

	width: 28%;

	margin: 0 auto;

	overflow: hidden;

	display: block;

	padding-left: 5%;

}



.creative-icon ul li p {

	width: 100%;

	float: left;

	text-align: center;

	color: #000;

	line-height: 18px;

	padding: 20% 0 89%;

}



.creative-icon ul li span {

	width: 100%;

	float: left;

	color: #d6d6d6;

	font-size: 12px;

	font-weight: bold;

	transform: rotate(90deg);

	-ms-transform: rotate(90deg);

 	/* IE 9 */

	-moz-transform: rotate(90deg);

 	/* Firefox */

	-webkit-transform: rotate(90deg);

 /* Safari 和 Chrome */

	-o-transform: rotate(90deg);

}



.creative-icon h2 {

	float: right;

	margin-right: 34.5%;

}



@media (min-width:1200px) and (max-width:1600px) {

	.creative-icon h2 {

		margin: 0 32% 0% 6%;

		font-size: 34px;

		line-height: 44px;

	}

}



@media (min-width:992px) and (max-width:1200px) {

	.creative-icon h2 {

		margin: 0 30% 2% 6%;

		font-size: 30px;

		line-height: 42px;

	}

}



@media (min-width:640px) and (max-width:992px) {

	.creative-icon h2 {

		margin: 0 18.5% 2% 6%;

		font-size: 28px;

		line-height: 40px;

	}

}



@media (min-width:414px) and (max-width:640px) {

	.creative-icon h2 {

		margin: 0 18.5% 2% 6%;

		font-size: 24px;

		line-height: 36px;

	}

}



@media (min-width:375px) and (max-width:413px) {

	.creative-icon h2 {

		margin: 0 18.5% 2% 6%;

		font-size: 20px;

		line-height: 34px;

	}

}



@media (min-width:320px) and (max-width:374px) {

	.creative-icon h2 {

		margin: 0 18.5% 2% 6%;

		font-size: 18px;

		line-height: 34px;

	}

}



.more-screwdriver {

	width: 100%;

	float: left;

	background: url(../image/more-screwdriver-bg.jpg);

	background-size: 100%;

	background-repeat: no-repeat;

}



.more-screwdriver h2 {

	margin: 9% 0 64% 15%;

}



.wow-computer img {

	width: 100%;

	float: left;

	margin-top: 5%;

}



.wow-banner-design {

	width: 85%;

	float: right;

}



.wow-banner-design > h2 {

	margin: 9% auto 5%;

}



.wow-banner-design ul {

	width: 100%;

	float: right;

}



.wow-banner-design ul li {

	width: 50%;

	float: left;

}



.wow-banner-design ul li img {

	width: 100%;

	float: left;

}



.wow-banner-design ul li h2 {

	margin: 53% 0 0 0;

}



@media (min-width:1200px) and (max-width:1600px) {

	.wow-banner-design > h2, .more-screwdriver h2, .wow-web-design h2 {

		font-size: 34px;

		line-height: 44px;

	}



	.wow-banner-design ul li h2 {

		margin: 48% 0 0 0;

		font-size: 34px;

		line-height: 44px;

	}

}



@media (min-width:992px) and (max-width:1200px) {

	.wow-banner-design > h2, .more-screwdriver h2, .wow-web-design h2 {

		font-size: 32px;

		line-height: 42px;

	}



	.wow-banner-design ul li h2 {

		margin: 45% 0 0 0;

		font-size: 32px;

		line-height: 42px;

	}

}



@media (min-width:768px) and (max-width:992px) {

	.wow-banner-design > h2, .more-screwdriver h2, .wow-web-design h2 {

		font-size: 28px;

		line-height: 38px;

	}



	.wow-banner-design ul li h2 {

		margin: 40% 0 0 0;

		font-size: 28px;

		line-height: 38px;

	}

}



@media (min-width:640px) and (max-width:768px) {

	.wow-banner-design > h2, .more-screwdriver h2, .wow-web-design h2 {

		font-size: 26px;

		line-height: 34px;

	}



	.wow-banner-design ul li h2 {

		margin: 38% 0 0 0;

		font-size: 26px;

		line-height: 34px;

	}

}



@media (min-width:414px) and (max-width:640px) {

	.wow-banner-design > h2, .more-screwdriver h2, .wow-web-design h2 {

		font-size: 22px;

		line-height: 30px;

	}



	.wow-banner-design ul li h2 {

		margin: 30% 0 0 0;

		font-size: 22px;

		line-height: 26px;

	}

}



@media (min-width:375px) and (max-width:413px) {

	.wow-banner-design > h2, .more-screwdriver h2, .wow-web-design h2 {

		font-size: 22px;

		line-height: 30px;

	}



	.wow-banner-design ul li h2 {

		margin: 30% 0 0 0;

		font-size: 22px;

		line-height: 26px;

	}

}



@media (min-width:320px) and (max-width:374px) {

	.wow-banner-design > h2, .more-screwdriver h2, .wow-web-design h2 {

		font-size: 18px;

		line-height: 24px;

	}



	.wow-banner-design ul li h2 {

		margin: 30% 0 0 0;

		font-size: 18px;

		line-height: 24px;

	}

}



.tool-show, .tool-show img {

	width: 100%;

	display: block;

}



body.casestudy-dft .hero-casestudy_title {

	background: #000;

	color: #fff;

}



.color-card {

	width: 94.6%;

	margin: 0 auto;

	overflow: hidden;

}



.color-card ul {

	width: 100%;

	float: left;

}



.color-card ul li {

	width: 19.8%;

	float: left;

	color: #fff;

	margin-left: 19.9%;

}



.color-card ul li:nth-of-type(1) {

	background: #fff;

	color: #000;

	border: 1px solid #c4c4c4;

	margin-left: 0;

}



.color-card ul li:nth-of-type(2) {

	background: #be9461;

	border: 1px solid #be9461;

}



.color-card ul li:nth-of-type(3) {

	background: #005baf;

	border: 1px solid #005baf;

}



.color-card ul li:nth-of-type(4) {

	background: #000;

	border: 1px solid #000;

}



.color-card ul li:nth-of-type(5) {

	background: #e44429;

	border: 1px solid #e44429;

}



.color-card ul li p {

	width: 85%;

	float: left;

	font-size: 60px;

	line-height: 60px;

	color: #fff;

	margin: 14% 0 36% 11%;

}



.color-card ul li:nth-of-type(1) p {

	color: #000;

}



.color-card ul li span {

	width: 85%;

	float: left;

	display: block;

	font-size: 14px;

	line-height: 30px;

	margin: 36% 0 11% 11%;

}



.fencing-equipment, .fencing-equipment img {

	width: 100%;

	float: left;

}



.three-classify {

	width: 100%;

	float: left;

	background: #f8f8f9;

}



.three-classify > img:nth-of-type(1) {

	width: 25%;

	margin: 7% auto 5%;

	overflow: hidden;

	display: block;

}



.three-classify > img:nth-of-type(2) {

	width: 55%;

	margin: 0 auto;

	overflow: hidden;

	display: block;

}



.three-classify ul {

	width: 71%;

	margin: 6% auto;

	overflow: hidden;

}



.three-classify ul li {

	width: 23.6%;

	float: left;

	margin: 0 0.7%;

}



.three-classify ul li:nth-of-type(2), .three-classify ul li:nth-of-type(4) {

	margin-top: 10%;

}



.three-classify ul li img {

	width: 100%;

	float: left;

}



.venue-space, .venue-space > img {

	width: 100%;

	float: left;

}



.venue-space > img:nth-of-type(1) {

	width: 30%;

	margin: 7% auto 5%;

	overflow: hidden;

	display: block;

	float: none;

}



.venue-space > div {

	width: 100%;

	float: left;

}



.venue-space > div img {

	width: 50%;

	float: left;

}



.gather-lion {

	width: 75%;

	float: left;

	background: #fbf8f4;

	padding: 11% 12.5% 5%;

}



.dft-mascot-design {

	width: 50%;

	float: left;

}



.dft-mascot-design img {

	width: 2%;

	float: left;

}



.dft-mascot-design p {

	width: 80%;

	float: left;

	font-family: 'PingFangSC-Semibold';

	font-weight: 600;

	font-size: 18px;

	color: #212121;

	line-height: 36px;

	padding-left: 4%;

}



.dft-mascot-design p b {

	font-size: 30px;

	font-weight: bold;

}



.lion-big {

	width: 92.5%;

	margin: 0 auto;

	overflow: hidden;

	display: block;

}



.gather-lion ul {

	width: 100%;

	float: left;

	margin: 2% 0 1%;

}



.gather-lion ul li {

	width: 33.3%;

	float: left;

	margin-bottom: 4%;

}



.gather-lion ul li img {

	width: 50%;

	margin: 0 auto;

	overflow: hidden;

	display: block;

}



.gather-lion ul li p {

	width: 100%;

	float: left;

	font-size: 18px;

	font-weight: bold;

	color: rgba(33,33,33,1);

	line-height: 34px;

	text-align: center;

	margin: 0;

}



.gather-lion ul li span {

	width: 100%;

	float: left;

	font-size: 14px;

	font-weight: 600;

	color: rgba(196,196,196,1);

	line-height: 14px;

	text-align: center;

}



.three-lion {

	width: 100%;

	float: left;

}



.logo-show, .two-breastpin, .logo-show > img {

	width: 100%;

	float: left;

}



.two-breastpin img {

	width: 50%;

	float: left;

}



.dft-thanks, .dft-thanks img {

	width: 100%;

	display: block;

}



@media (min-width:1440px) and (max-width:1600px) {

	.color-card ul li p {

		font-size: 50px;

		line-height: 50px;

	}



	.tmr-logo-design h2 {

		font-size: 38px;

		line-height: 44px;

	}

}



@media (min-width:1200px) and (max-width:1440px) {

	.color-card ul li p {

		font-size: 40px;

		line-height: 40px;

	}



	.tmr-logo-design h2 {

		font-size: 36px;

		line-height: 42px;

	}



	.dft-mascot-design img {

		width: 10px;

	}



	.dft-mascot-design p {

		font-size: 16px;

		line-height: 25px;

		padding-left: 6%;

	}



	.dft-mascot-design p b {

		font-size: 24px;

	}



	.gather-lion ul li p {

		font-size: 17px;

		line-height: 32px;

	}



	.gather-lion ul li span {

		font-size: 14px;

	}

}



@media (min-width:992px) and (max-width:1200px) {

	.color-card ul li p {

		font-size: 30px;

		line-height: 30px;

	}



	.color-card ul li span {

		line-height: 26px;

	}



	.tmr-logo-design h2 {

		font-size: 32px;

		line-height: 38px;

	}



	.dft-mascot-design img {

		width: 9px;

	}



	.dft-mascot-design p {

		font-size: 14px;

		line-height: 23px;

		padding-left: 6%;

	}



	.dft-mascot-design p b {

		font-size: 22px;

	}



	.gather-lion ul li p {

		font-size: 16px;

		line-height: 30px;

	}



	.gather-lion ul li span {

		font-size: 14px;

	}

}



@media (min-width:768px) and (max-width:992px) {

	.color-card ul li {

		width: 19.7%;

	}



	.color-card ul li p {

		font-size: 25px;

		line-height: 25px;

	}



	.color-card ul li span {

		font-size: 12px;

		line-height: 20px;

	}



	.tmr-logo-design h2 {

		font-size: 28px;

		line-height: 34px;

	}



	.dft-mascot-design img {

		width: 8px;

	}



	.dft-mascot-design p {

		font-size: 13px;

		line-height: 20px;

		padding-left: 6%;

	}



	.dft-mascot-design p b {

		font-size: 20px;

	}



	.gather-lion ul li p {

		font-size: 15px;

		line-height: 28px;

	}



	.gather-lion ul li span {

		font-size: 13px;

	}

}



@media (min-width:640px) and (max-width:768px) {

	.color-card ul li {

		width: 19.6%;

	}



	.color-card ul li p {

		font-size: 20px;

		line-height: 20px;

	}



	.color-card ul li span {

		width: 96%;

		font-size: 12px;

		line-height: 20px;

		margin: 36% 0 11% 4%;

	}



	.tmr-logo-design h2 {

		font-size: 24px;

		line-height: 30px;

	}



	.dft-mascot-design img {

		width: 7px;

	}



	.dft-mascot-design p {

		font-size: 12px;

		line-height: 18px;

		padding-left: 6%;

	}



	.dft-mascot-design p b {

		font-size: 18px;

	}



	.gather-lion ul li p {

		font-size: 13px;

		line-height: 26px;

	}



	.gather-lion ul li span {

		font-size: 12px;

	}

}



@media (min-width:0) and (max-width:640px) {

	.color-card ul li {

		width: 32.7%;

		margin-left: 0%;

	}



	.color-card ul li:nth-of-type(4) {

		margin-left: 33.1%;

	}



	.color-card ul li p {

		font-size: 18px;

		line-height: 18px;

	}



	.color-card ul li span {

		width: 96%;

		font-size: 12px;

		line-height: 20px;

		margin: 36% 0 11% 4%;

	}



	.tmr-logo-design h2 {

		font-size: 24px;

		line-height: 30px;

	}



	.dft-mascot-design img {

		width: 7px;

	}



	.dft-mascot-design p {

		font-size: 12px;

		line-height: 18px;

		padding-left: 6%;

	}



	.dft-mascot-design p b {

		font-size: 18px;

	}



	.gather-lion ul li p {

		font-size: 13px;

		line-height: 26px;

	}



	.gather-lion ul li span {

		font-size: 12px;

	}

}



@media (min-width:0) and (max-width:414px) {

	.tmr-logo-design h2 {

		font-size: 20px;

		line-height: 26px;

	}

}



@media (min-width:0) and (max-width:320px) {

	.color-card ul li {

		width: 45%;

	}



	.color-card ul li:nth-of-type(4) {

		margin-left: 0;

	}

}



body.casestudy-tongyan .hero-casestudy_title {

	background: #f0b08e;

	color: white;

}



body.casestudy-tongyan .hero-casestudy_title img {

	width: 75%;

	margin: 39.7% auto;

}



body.casestudy-oaf .hero-casestudy_title {

	background: #f0b08e;

	color: white;

}



body.casestudy-oaf .hero-casestudy_title img {

	width: 88%;

	margin: 56% auto;

}



.con-dark {

	width: 100%;

	background: #505f74;

	position: relative;

	margin-top: 7.5%;

}



.five-line {

	width: 100%;

	height: 100%;

	position: absolute;

}



.five-line span {

	width: 1px;

	background: #fff;

	height: 100%;

	position: absolute;

	opacity: 0.1;

}



.five-line span:nth-of-type(1) {

	left: 18%;

}



.five-line span:nth-of-type(2) {

	left: 32.9%;

}



.five-line span:nth-of-type(3) {

	left: 49.9%;

}



.five-line span:nth-of-type(4) {

	left: 66.85%;

}



.five-line span:nth-of-type(5) {

	left: 81.7%;

}



.con-surface {

	width: 100%;

	position: relative;

	z-index: 5;

}



.con-surface img:nth-of-type(1) {

	width: 5%;

	float: left;

	padding: 9% 18% 0;

}



.con-surface img:nth-of-type(2) {

	width: 70%;

	margin: 0 auto;

	overflow: hidden;

	display: block;

	padding: 10% 0 11%;

}



.con-main {

	width: 63.4%;

	margin: 0 auto;

	overflow: hidden;

}



.con-main-l {

	width: 5%;

	float: left;

	font-size: 20px;

	color: #fff;

	line-height: 18px;

}



.con-main-m {

	width: 54%;

	float: left;

	text-align: center;

	margin: 0 0 0 18%;

}



.con-main .con-main-m p {

	padding: 0.8% 0;

}



.con-main .con-main-m p:nth-of-type(5) {

	margin-bottom: 7%;

}



.con-main .con-main-m p span:nth-of-type(2) {

	margin: 0 16%;

}



.con-main-m p:nth-of-type(odd) {

	font-size: 20px;

	color: #fff;

	line-height: 18px;

}



.con-main-m p:nth-of-type(even) {

	font-size: 14px;

	color: #fff;

	line-height: 18px;

}



.con-main-m p:nth-of-type(1) {

	padding: 0 0 12%;

	letter-spacing: 10px;

}



.con-main-r {

  /* width:2%; */

	float: right;

}



.con-dark .con-main-r {

	width: 2%;

	margin-top: 10%;

}



.con-main-r span:nth-of-type(1) {

	width: 116%;

	float: right;

	background: #50b4c9;

	height: 80px;

}



.con-main-r span:nth-of-type(2) {

	width: 75%;

	float: right;

	background: #f0b08e;

	height: 80px;

}



.con-main-r span:nth-of-type(3) {

	width: 42%;

	float: right;

	background: #64778f;

	height: 80px;

}



.basic-grid {

	width: 100%;

}



.basic-grid img {

	width: 70%;

	margin: 0 auto;

	overflow: hidden;

	display: block;

}



.con-white {

	width: 100%;

	background: #efefef;

	position: relative;

}



.con-white .con-main {

	padding: 11% 0 3%;

}



.con-white .con-main .con-main-r {

	line-height: 18px;

	line-height: 18px;

}



.con-white .five-line span, .con-gray .five-line span {

	background: rgba(134,162,200,1);

}



.con-white .con-main-l, .con-white .con-main-m p, .con-white .con-main-r {

	color: rgba(80,95,116,1);

}



/* .con-white .con-main-r {

  width: 11%;

} */

.spring-suit {

	width: 100%;

}



.spring-suit img:nth-of-type(1) {

	width: 19%;

	float: left;

	margin-top: 8.5%;

}



.spring-suit img:nth-of-type(2) {

	width: 70%;

	float: right;

}



.con-white .con-main-l {

	letter-spacing: 10px;

}



.classion-suit {

	width: 70%;

	margin: 0 auto;

	overflow: hidden;

	padding-bottom: 9%;

}



.classion-suit img {

	width: 100%;

	position: relative;

}



.con-play {

	padding: 1% 0 3%;

}



.classion-suit li {

	width: 28%;

	float: left;

}



.classion-suit li:nth-of-type(2) {

	margin: 0 7%;

}



.classion-suit li:nth-of-type(3) {

	z-index: 99;

	position: absolute;

	right: 15%;

	bottom: -4.4%;

	;

  width: 20.5%;

}



.con-orange {

	width: 100%;

	background: #e2a07c;

	position: relative;

}



.con-orange .con-main {

	padding: 13% 0 3%;

}



.con-orange .con-main-r {

  /* width: 22%; */

	color: #fff;

	text-align: right;

	font-size: 20px;

	line-height: 36px;

	margin-top: -0.5%;

}



.con-orange .classion-suit {

	position: relative;

}



.con-orange .orange-mobile {

	padding: 3% 0 5%;

	letter-spacing: 10px;

}



.commodity-show {

	width: 65%;

	margin: 0 auto;

	overflow: hidden;

	position: relative;

}



.commodity-show li {

	width: 30%;

	float: left;

	margin: 0 10%;

}



.commodity-show li:nth-of-type(2) {

	margin: 13% 10% 0;

}



.commodity-show li img {

	width: 100%;

	display: block;

}



.orange-detail img {

	width: 97%;

	margin: 0 auto;

	position: relative;

	display: block;

}



.con-orange .orange-detail {

	padding: 10% 0 0;

}



.green-grid {

	width: 100%;

	background: url(../image/green-grid.png);

	background-size: 100%;

	background-repeat: no-repeat;

	position: relative;

}



.green-grid .con-main {

	padding: 7% 0 0;

}



.green-grid img {

	width: 85.5%;

	margin: 0 auto;

	overflow: hidden;

	display: block;

	padding-bottom: 6%;

}



.con-gray {

	width: 100%;

	background: #e5e5e5;

	position: relative;

}



.con-gray .con-main {

	padding: 5.5% 0 1%;

}



.con-gray .con-main-l {

	color: rgba(89,102,119,1);

}



.con-gray .con-main-m p:nth-of-type(1) {

	color: rgba(89,102,119,1);

}



.con-gray img {

	width: 68%;

	margin: 0 auto;

	overflow: hidden;

	display: block;

	position: relative;

	padding-bottom: 6%;

}



.con-thank {

	width: 100%;

	position: relative;

	font-size: 48px;

	color: rgba(89,102,119,1);

	line-height: 30px;

	text-align: center;

	letter-spacing: 10px;

	padding: 5% 0 16%;

	margin: 0;

}



@media (min-width:1200px) and (max-width:1600px) {

	.green-grid img {

		padding-bottom: 5.4%;

	}

}



@media (min-width:992px) and (max-width:1200px) {

	.con-main-m p:nth-of-type(1), .con-white .con-main-l, .con-orange .orange-mobile, .con-thank {

		letter-spacing: 8px;

	}



	.green-grid img {

		padding-bottom: 5.4%;

	}



	.con-main-l, .con-main-m p:nth-of-type(odd), .con-orange .con-main-r {

		font-size: 18px;

	}



	.con-orange .con-main-r {

		line-height: 32px;

	}



	.con-thank {

		font-size: 44px;

	}

}



@media (min-width:768px) and (max-width:992px) {

	.con-main-m p:nth-of-type(1), .con-white .con-main-l, .con-orange .orange-mobile, .con-thank {

		letter-spacing: 5px;

	}



	.green-grid img {

		padding-bottom: 3.4%;

	}



	.con-main-l, .con-main-m p:nth-of-type(odd), .con-orange .con-main-r {

		font-size: 16px;

	}



	.con-white .con-main .con-main-r {

		font-size: 16px;

	}



	.con-orange .con-main-r {

		line-height: 32px;

	}



	.con-white .con-main, .con-orange .con-main {

		width: 69.4%;

		margin: 0 0 0 18.3%;

	}



	.con-white .con-main-m, .con-orange .con-main-m {

		width: 49%;

		margin: 0 0 0 16%;

	}



	.con-thank {

		font-size: 40px;

	}

}



@media (min-width:640px) and (max-width:768px) {

	.con-main-m p:nth-of-type(1), .con-white .con-main-l, .con-orange .orange-mobile, .con-thank {

		letter-spacing: 4px;

	}



	.green-grid img {

		padding-bottom: 2.6%;

	}



	.con-main-l, .con-main-m p:nth-of-type(odd), .con-orange .con-main-r {

		font-size: 16px;

	}



	.con-white .con-main .con-main-r {

		font-size: 16px;

	}



	.con-orange .con-main-r {

		line-height: 28px;

	}



	.con-white .con-main, .con-orange .con-main {

		width: 70.4%;

		margin: 0 0 0 18.3%;

	}



	.con-white .con-main-m, .con-orange .con-main-m {

		width: 48%;

		margin: 0 0 0 16%;

	}



	.con-thank {

		font-size: 36px;

	}



	.con-dark .con-main-m {

		width: 60%;

		margin: 0 0 0 15%;

	}

}



@media (min-width:414px) and (max-width:640px) {

	.con-main-m p:nth-of-type(1), .con-white .con-main-l, .con-orange .orange-mobile, .con-thank {

		letter-spacing: 3px;

	}



	.green-grid img {

		padding-bottom: 2.6%;

	}



	.con-main-l, .con-main-m p:nth-of-type(odd), .con-orange .con-main-r {

		font-size: 14px;

	}



	.con-white .con-main .con-main-r {

		font-size: 14px;

	}



	.con-main-m p:nth-of-type(even) {

		font-size: 12px;

	}



	.con-orange .con-main-r {

		line-height: 24px;

		margin-top: -0.9%;

	}



	.con-white .con-main, .con-orange .con-main {

		width: 78.4%;

		margin: 0 0 0 18.3%;

	}



	.con-white .con-main-m, .con-orange .con-main-m {

		width: 35%;

		margin: 0 0 0 18%;

	}



	.con-thank {

		font-size: 32px;

	}



	.con-dark .con-main-m {

		width: 82%;

		margin: 0 0 0 5%;

	}



	.green-grid .con-main {

		padding: 5% 0 0;

	}

}



@media (min-width:375px) and (max-width:413px) {

	.con-main-m p:nth-of-type(1), .con-white .con-main-l, .con-orange .orange-mobile, .con-thank {

		letter-spacing: 2px;

	}



	.green-grid img {

		padding-bottom: 3.6%;

	}



	.con-main-l, .con-main-m p:nth-of-type(odd), .con-orange .con-main-r {

		font-size: 13px;

	}



	.con-white .con-main .con-main-r {

		font-size: 13px;

	}



	.con-main-m p:nth-of-type(even) {

		font-size: 12px;

	}



	.con-orange .con-main-r {

		line-height: 20px;

	}



	.con-white .con-main, .con-orange .con-main {

		width: 78.4%;

		margin: 0 0 0 18.3%;

	}



	.con-white .con-main:nth-of-type(2) {

		width: 85.4%;

		margin: 0 0 0 11.3%;

	}



	.con-white .con-main-m, .con-orange .con-main-m {

		width: 39%;

		margin: 0 0 0 11%;

	}



	.con-thank {

		font-size: 24px;

	}



	.con-dark .con-main-m {

		width: 82%;

		margin: 0 0 0 5%;

	}



	.green-grid .con-main {

		padding: 5% 0 0;

	}



	.con-dark .con-main:nth-of-type(3) {

		width: 77.4%;

	}



	.green-grid .con-main-m p {

		padding: 0 0 2%;

	}

}



@media (min-width:320px) and (max-width:374px) {

	.con-main-m p:nth-of-type(1), .con-white .con-main-l, .con-orange .orange-mobile, .con-thank {

		letter-spacing: 2px;

	}



	.green-grid img {

		padding-bottom: 3.6%;

	}



	.con-main-l, .con-main-m p:nth-of-type(odd), .con-orange .con-main-r {

		font-size: 13px;

	}



	.con-white .con-main .con-main-r {

		font-size: 13px;

	}



	.con-main-m p:nth-of-type(even) {

		font-size: 12px;

	}



	.con-orange .con-main-r {

		line-height: 20px;

	}



	.con-white .con-main, .con-orange .con-main {

		width: 78.4%;

		margin: 0 0 0 18.3%;

	}



	.con-white .con-main:nth-of-type(2) {

		width: 85.4%;

		margin: 0 0 0 11.3%;

	}



	.con-white .con-main-m, .con-orange .con-main-m {

		width: 39%;

		margin: 0 0 0 11%;

	}



	.con-thank {

		font-size: 24px;

	}



	.con-dark .con-main-m {

		width: 82%;

		margin: 0 0 0 5%;

	}



	.green-grid .con-main {

		padding: 5% 0 0;

	}



	.con-dark .con-main:nth-of-type(3) {

		width: 77.4%;

	}



	.green-grid .con-main-m p {

		padding: 0 0 2%;

	}

}



body.casestudy-tmr .hero-casestudy_title {

	background: #f32e3b;

	color: #fff;

}



.tmr-logo-design img {

	width: 30%;

	margin: 8% auto;

	overflow: hidden;

	display: block;

}



@media (min-width:320px) and (max-width:640px) {

	.tmr-logo-design img {

		width: 50%;

	}

}



.tmr-four {

	width: 100%;

	float: left;

}



.tmr-four li {

	width: 49.6%;

	float: left;

}



.tmr-four li:nth-of-type(1), .tmr-four li:nth-of-type(3) {

	margin: 0 0.8% 0.8% 0;

}



.tmr-four li img {

	width: 100%;

	float: left;

}



.tmr-book, .tmr-book img, .tmr-book ul {

	width: 100%;

	float: left;

}



.tmr-book > img {

	margin-bottom: 1%;

}



.tmr-book ul li {

	width: 50%;

	float: left;

}



.tmr-web-design {

	width: 100%;

	float: left;

	background: url(../image/tmr-computer.jpg);

	background-size: 100%;

	background-repeat: no-repeat;

	margin-top: 1%;

}



.tmr-web-design span {

	width: 11%;

	float: left;

	text-align: center;

	font-size: 18px;

	font-weight: 600;

	color: #fff;

	opacity: 0.8;

	padding: 3% 0;

}



.tmr-web-design span:nth-of-type(2) {

	width: 13%;

	float: right;

}



.tmr-web-design h2 {

	width: 100%;

	float: left;

	font-family: 'PingFangSC-Semibold';

	font-size: 56px;

	font-weight: bolder;

	color: #fff;

	text-align: center;

	letter-spacing: 2px;

	padding: 1% 0 11%;

}



@media (min-width:1440px) and (max-width:1600px) {

	.tmr-web-design span {

		width: 13%;

	}



	.tmr-web-design span:nth-of-type(2) {

		width: 14%;

	}



	.tmr-web-design h2 {

		font-size: 52px;

	}

}



@media (min-width:1360px) and (max-width:1440px) {

	.tmr-web-design span {

		width: 14%;

	}



	.tmr-web-design span:nth-of-type(2) {

		width: 15%;

	}



	.tmr-web-design h2 {

		font-size: 48px;

	}

}



@media (min-width:1200px) and (max-width:1360px) {

	.tmr-web-design span {

		width: 15%;

	}



	.tmr-web-design span:nth-of-type(2) {

		width: 17%;

	}



	.tmr-web-design h2 {

		font-size: 44px;

	}

}



@media (min-width:992px) and (max-width:1200px) {

	.tmr-web-design span {

		width: 16%;

	}



	.tmr-web-design span:nth-of-type(2) {

		width: 18%;

	}



	.tmr-web-design h2 {

		font-size: 40px;

	}

}



@media (min-width:768px) and (max-width:992px) {

	.tmr-web-design span {

		width: 17%;

	}



	.tmr-web-design span:nth-of-type(2) {

		width: 20%;

	}



	.tmr-web-design h2 {

		font-size: 36px;

	}

}



@media (min-width:640px) and (max-width:768px) {

	.tmr-web-design span {

		width: 18%;

	}



	.tmr-web-design span:nth-of-type(2) {

		width: 22%;

	}



	.tmr-web-design h2 {

		font-size: 32px;

		padding: 0% 0 11%;

	}

}



@media (min-width:414px) and (max-width:640px) {

	.tmr-web-design span {

		width: 18%;

		font-size: 13px;

		padding: 3% 0 1%;

	}



	.tmr-web-design span:nth-of-type(2) {

		width: 22%;

	}



	.tmr-web-design h2 {

		font-size: 20px;

		padding: 0% 0 11%;

	}

}



@media (min-width:375px) and (max-width:413px) {

	.tmr-web-design span {

		width: 18%;

		font-size: 13px;

		padding: 3% 0 1%;

	}



	.tmr-web-design span:nth-of-type(2) {

		width: 22%;

	}



	.tmr-web-design h2 {

		font-size: 20px;

		padding: 0% 0 11%;

	}

}



@media (min-width:320px) and (max-width:374px) {

	.tmr-web-design span {

		width: 20%;

		font-size: 13px;

		padding: 3% 0 1%;

	}



	.tmr-web-design span:nth-of-type(2) {

		width: 28%;

	}



	.tmr-web-design h2 {

		font-size: 20px;

		padding: 0% 0 11%;

	}

}



.tmr-web-design p {

	width: 8.5%;

	float: left;

	font-size: 18px;

	color: #000;

	font-weight: 600;

	margin: 6% 0 40% 0;

	transform: rotate(270deg);

	-ms-transform: rotate(270deg);

 /* IE 9 */

	-webkit-transform: rotate(270deg);

 /* Safari and Chrome */

}



.tmr-web-design img {

	width: 57%;

	margin: 1% auto 3%;

	display: block;

	padding: 0 20%;

}



.con-solution {

	width: 82%;

	float: left;

	margin-left: 18%;

}



.con-solution p {

	width: 100%;

	float: left;

	font-size: 16px;

	color: #000;

	font-weight: 600;

	padding: 3.3% 0;

}



@media (min-width:1440px) and (max-width:1600px) {

	.tmr-web-design p {

		width: 9.5%;

		margin: 6% 0 39% 0;

	}

}



@media (min-width:1360px) and (max-width:1440px) {

	.tmr-web-design p {

		width: 10%;

		margin: 6% 0 38% 0;

	}

}



@media (min-width:1200px) and (max-width:1360px) {

	.tmr-web-design p {

		width: 11.5%;

		margin: 6% 0 37% 0;

	}

}



@media (min-width:992px) and (max-width:1200px) {

	.tmr-web-design p {

		width: 14%;

		margin: 6% 0 36% 0;

	}

}



@media (min-width:768px) and (max-width:992px) {

	.tmr-web-design p {

		width: 18%;

		margin: 6% 0 33% 0;

	}

}



@media (min-width:640px) and (max-width:768px) {

	.tmr-web-design p {

		width: 22%;

		margin: 6% 0 30% -4%;

	}

}



@media (min-width:414px) and (max-width:640px) {

	.tmr-web-design p {

		width: 26%;

		margin: 7% 0 30% -7%;

		font-size: 14px;

	}



	.con-solution p {

		font-size: 14px;

	}

}



@media (min-width:375px) and (max-width:413px) {

	.tmr-web-design p {

		width: 28%;

		margin: 7% 0 30% -7%;

		font-size: 13px;

	}



	.con-solution p {

		font-size: 13px;

	}

}



@media (min-width:320px) and (max-width:374px) {

	.tmr-web-design p {

		width: 28%;

		margin: 7% 0 30% -7%;

		font-size: 12px;

	}



	.con-solution p {

		font-size: 12px;

	}

}



.con-solution ul {

	width: 100%;

	float: left;

}



.con-solution ul li {

	width: 32.6%;

	float: left;

}



.con-solution ul li:nth-of-type(2) {

	margin: 0 2.2%;

}



.con-solution ul li:nth-of-type(3) {

	width: 30.4%;

}



.con-solution ul li img {

	width: 100%;

	float: left;

}



.mobile-screen {

	width: 100%;

	display: inline-flex;

	background: url(../image/mobile-screen-bg.jpg);

	background-size: 100%;

	background-repeat: no-repeat;

	margin-top: 12%;

}



.mobile-screen h2 {

	margin: -2% 0 68% 18%;

}



@media (min-width:414px) and (max-width:640px) {

	.mobile-screen h2 {

		margin: -2% 0 56% 18%;

		font-size: 20px;

	}

}



@media (min-width:375px) and (max-width:413px) {

	.mobile-screen h2 {

		margin: -2% 0 50% 18%;

		font-size: 20px;

	}

}



@media (min-width:320px) and (max-width:374px) {

	.mobile-screen h2 {

		margin: -2% 0 51% 18%;

		font-size: 20px;

	}

}



body.casestudy-atlas .hero-casestudy_title {

	background: #000;

	color: #fff;

}



.casestudy-atlas {

	font-family: 'Alibaba Sans';

}



.branding-design {

	width: 90%;

	margin: 3% auto;

	overflow: hidden;

}



.branding-design-l {

	width: 48.6%;

	float: left;

}



.branding-design-l img {

	width: 100%;

	float: left;

	display: block;

}



.branding-design-r {

	width: 50%;

	float: right;

	font-weight: bold;

}



.branding-design-r img {

	width: 6.2%;

	float: left;

	display: block;

	margin: 29.5% 95% 0 0;

}



.branding-design-r span:nth-of-type(1) {

	width: 100%;

	float: left;

	font-size: 63px;

	color: #0062ff;

	line-height: 70px;

}



.branding-design-r span:nth-of-type(2) {

	width: 100%;

	float: left;

	font-size: 158px;

	color: #000;

	font-weight: bolder;

	line-height: 160px;

	margin: 10.5% 0 12%;

}



.branding-design-r span:nth-of-type(3) {

	width: 100%;

	float: left;

	font-size: 39px;

	color: #0062ff;

	line-height: 46px;

}



.con-all {

	width: 90%;

	margin: 0 auto;

	overflow: hidden;

}



.typeface-color img, .vis-design img {

	width: 100%;

	float: left;

}



.atlas-title {

	width: 24%;

	float: left;

	font-family: 'Alibaba Sans HeavyItalic';

	font-size: 70px;

	line-height: 90px;

	color: #0062ff;

	font-weight: bold;

}



.about-project > div {

	padding: 0 0 13% 0.5%;

}



.about-project p {

	width: 75.5%;

	float: left;

	font-size: 28px;

	color: #000;

	line-height: 48px;

	margin: 0 0 2.5%;

}



.focus-advertsing {

	width: 73%;

	float: right;

	overflow: hidden;

	background: #e7e7e7;

	padding: 8.7% 0 10% 21%;

}



.focus-top, .focus-middle, .focus-bottom {

	width: 100%;

	float: left;

}



.focus-top p {

	float: left;

	font-size: 31px;

	color: #000;

}



.focus-top p:nth-of-type(1) {

	width: 32%;

	font-weight: bold;

}



.focus-top p:nth-of-type(2) {

	width: 42%;

	line-height: 42px;

}



.focus-middle {

	padding: 5.4% 0 6.5%;

}



.focus-middle span {

	display: inline-block;

	color: #979898;

	vertical-align: top;

}



.focus-middle span:nth-of-type(1) {

	font-size: 128px;

	font-weight: bold;

}



.focus-middle span:nth-of-type(2), .focus-middle span:nth-of-type(4), .focus-middle span:nth-of-type(5) {

	font-size: 37px;

	line-height: 198px;

	padding: 0 4%;

}



.focus-middle span:nth-of-type(3) {

	font-size: 36px;

	line-height: 36px;

	padding: 2.9% 0;

}



.focus-middle span:nth-of-type(3) em {

	font-family: "Helvetica Neue", Helvetica;

}



.focus-middle img:nth-of-type(1) {

	width: 9.8%;

	padding: 2.1% 0;

}



.focus-middle img:nth-of-type(2) {

	width: 15.5%;

	padding: 4.2% 0;

}



.focus-bottom span {

	text-align: center;

	float: left;

	font-size: 31px;

	font-weight: bold;

}



.focus-bottom span:nth-of-type(1) {

	width: 12.4%;

	letter-spacing: 6px;

}



.focus-bottom span:nth-of-type(2) {

	width: 39%;

}



.focus-bottom span:nth-of-type(3) {

	width: 10%;

}



.logo-design > div {

	padding: 6% 40% 10.8% 0;

}



.logo-design img {

	width: 50.5%;

	margin: 0 auto 5%;

	overflow: hidden;

	display: block;

}



.logo-line-2 {

	background: #e7e7e7;

	padding: 4.2% 0 3%;

}



.logo-line-2 ul {

	width: 100%;

	float: left;

}



.logo-line-2 ul li {

	width: 50%;

	float: left;

}



.logo-line-2 ul li img {

	width: 66.6%;

	float: left;

	display: block;

	padding: 12% 16.7% 13.2%;

}



.logo-line-2 ul li:nth-of-type(1) img {

	border-right: 2px solid #fff;

}



.logo-line-2 ul li:nth-of-type(2) img {

	border-left: 2px solid #fff;

}



.logo-line-2 ul li p {

	width: 100%;

	float: left;

	text-align: center;

	font-family: 'Futura Medium';

	font-size: 25px;

}



.atlas-icon-design > div {

	padding: 0 70% 6.4% 0.5%;

}



.atlas-icon-design > img {

	width: 24.5%;

	float: left;

}



.atlas-icon-design ul {

	width: 48%;

	float: left;

	margin-left: 18%;

}



.atlas-icon-design ul li {

	width: 30%;

	float: left;

	margin: 0 10%;

}



.atlas-icon-design ul li img {

	width: 81%;

	float: left;

}



.atlas-icon-design ul li p {

	width: 100%;

	float: left;

	font-size: 28px;

	font-weight: 500;

	margin: 8% 0;

}



.atlas-video {

	width: 100%;

	float: left;

}



.poster-two {

	padding: 11.5% 0;

}



.poster-two ul {

	width: 100%;

	float: left;

}



.poster-two ul li {

	width: 49%;

	float: left;

}



.poster-two ul li:nth-of-type(1) {

	border-right: 2px solid #e4e4e4;

}



.poster-two ul li:nth-of-type(2) {

	border-left: 1px solid #e4e4e4;

}



.poster-two ul li img {

	width: 81%;

	margin: 0 auto;

	overflow: hidden;

	display: block;

}



.web-poster, .web-poster-content {

	width: 100%;

	float: left;

	padding: 1.5% 0 0;

}



.web-computer, .poster-three {

	width: 95%;

	float: right;

}



.web-poster-bg {

	position: absolute;

	left: 0;

	bottom: 0;

	width: 78%;

	height: 80%;

	background: #e7e7e7;

	z-index: 0;

}



.poster-three > div {

	padding: 8% 0 0

}



.web-poster-content {

	position: relative;

	z-index: 3;

}



.web-computer img {

	width: 60%;

	float: right;

}



.poster-three ul {

	width: 95%;

	float: left;

	margin: 7.6%  0 12%;

}



.poster-three ul li {

	width: 31.6%;

	float: left;

}



.poster-three ul li:nth-of-type(2) {

	margin: 0 2.6%;

}



.poster-three ul li img {

	width: 100%;

	float: left;

}



.metro-poster img {

	width: 100%;

	float: left;

}



.con-thanks {

	width: 88%;

	background: #e7e7e7;

	padding: 7.4% 6% 0;

}



.con-thanks p {

	width: 100%;

	float: left;

	font-family: 'PingFang SC';

	font-size: 28px;

	color: #232323;

	padding-bottom: 1%;

	text-shadow: #fff 2px 0 0,#fff 0 2px 0,#fff -2px 0 0,#fff 0 -2px 0;

	-webkit-text-shadow: #fff 2px 0 0,#fff 0 2px 0,#fff -2px 0 0,#fff 0 -2px 0;

	-moz-text-shadow: #fff 2px 0 0,#fff 0 2px 0,#fff -2px 0 0,#fff 0 -2px 0;

}



.con-thanks span {

	width: 100%;

	height: 2px;

	float: left;

	display: block;

	background: #676262;

	border: 1px solid #f9f5f5;

	margin: 5% 0 5%;

}



.con-thanks img {

	width: 43.8%;

	margin: 0 auto;

	overflow: hidden;

	display: block;

	padding: 2.5% 0 11%;

}





@media (min-width:1600px) and (max-width:1900px) {

	.branding-design-r span:nth-of-type(1) {

		font-size: 53px;

	}



	.branding-design-r span:nth-of-type(2) {

		font-size: 131px;

		line-height: 131px;

	}



	.branding-design-r span:nth-of-type(3) {

		font-size: 33px;

		line-height: 40px;

	}



	.about-project p {

		font-size: 23px;

		line-height: 40px;

	}



	.atlas-title {

		font-size: 58px;

		line-height: 74px;

	}



	.focus-top p {

		font-size: 30px;

	}



	.focus-middle span:nth-of-type(1) {

		font-size: 105px;

	}



	.focus-middle span:nth-of-type(3) {

		font-size: 32px;

		line-height: 35px;

	}



	.focus-middle span:nth-of-type(2), .focus-middle span:nth-of-type(4), .focus-middle span:nth-of-type(5) {

		padding: 0 3.5%;

		line-height: 163px;

	}



	.con-thanks p {

		font-size: 23px;

	}

}



@media (min-width:1440px) and (max-width:1600px) {

	.branding-design-r span:nth-of-type(1) {

		font-size: 47px;

	}



	.branding-design-r span:nth-of-type(2) {

		font-size: 118px;

		line-height: 120px;

	}



	.branding-design-r span:nth-of-type(3) {

		font-size: 33px;

		line-height: 40px;

	}



	.about-project p {

		font-size: 22px;

		line-height: 36px;

	}



	.atlas-title {

		font-size: 53px;

		line-height: 68px;

	}



	.focus-top p {

		font-size: 27px;

	}



	.focus-top p:nth-of-type(2) {

		line-height: 39px;

	}



	.focus-middle span:nth-of-type(1) {

		font-size: 96px;

	}



	.focus-middle span:nth-of-type(3) {

		font-size: 28px;

		line-height: 31px;

	}



	.focus-middle span:nth-of-type(2), .focus-middle span:nth-of-type(4), .focus-middle span:nth-of-type(5) {

		padding: 0 3.4%;

		line-height: 150px;

	}



	.focus-bottom span {

		font-size: 28px;

	}



	.atlas-icon-design ul li img {

		width: 79%;

	}



	.con-thanks p {

		font-size: 22px;

	}

}



@media (min-width:1360px) and (max-width:1440px) {

	.branding-design-r img {

		margin: 27% 95% 0 0;

	}



	.branding-design-r span:nth-of-type(1) {

		font-size: 45px;

	}



	.branding-design-r span:nth-of-type(2) {

		font-size: 112px;

		line-height: 112px;

	}



	.branding-design-r span:nth-of-type(3) {

		font-size: 33px;

		line-height: 40px;

	}



	.about-project p {

		font-size: 22px;

		line-height: 36px;

	}



	.atlas-title {

		font-size: 50px;

		line-height: 64px;

	}



	.focus-top p {

		font-size: 25px;

	}



	.focus-top p:nth-of-type(2) {

		line-height: 36px;

	}



	.focus-middle span:nth-of-type(1) {

		font-size: 90px;

	}



	.focus-middle span:nth-of-type(3) {

		font-size: 28px;

		line-height: 30px;

	}



	.focus-middle span:nth-of-type(2), .focus-middle span:nth-of-type(4), .focus-middle span:nth-of-type(5) {

		padding: 0 3.1%;

		line-height: 140px;

	}



	.focus-bottom span {

		font-size: 28px;

	}



	.atlas-icon-design ul li img {

		width: 78%;

	}



	.con-thanks p {

		font-size: 22px;

	}

}



@media (min-width:1200px) and (max-width:1360px) {

	.branding-design-r img {

		margin: 27% 95% 0 0;

	}



	.branding-design-r span:nth-of-type(1) {

		font-size: 40px;

	}



	.branding-design-r span:nth-of-type(2) {

		font-size: 100px;

		line-height: 100px;

	}



	.branding-design-r span:nth-of-type(3) {

		font-size: 28px;

		line-height: 35px;

	}



	.about-project p {

		font-size: 22px;

		line-height: 36px;

	}



	.atlas-title {

		font-size: 48px;

		line-height: 66px;

	}



	.focus-top p {

		font-size: 22px;

	}



	.focus-top p:nth-of-type(2) {

		line-height: 32px;

	}



	.focus-middle span:nth-of-type(1) {

		font-size: 80px;

	}



	.focus-middle span:nth-of-type(3) {

		font-size: 26px;

		line-height: 28px;

	}



	.focus-middle span:nth-of-type(2), .focus-middle span:nth-of-type(4), .focus-middle span:nth-of-type(5) {

		font-size: 30px;

		line-height: 128px;

		padding: 0 3.1%;

	}



	.focus-bottom span:nth-of-type(2) {

		width: 40%;

	}



	.focus-bottom span {

		font-size: 24px;

	}



	.atlas-icon-design ul li img {

		width: 74%;

	}



	.con-thanks p {

		font-size: 22px;

	}

}



@media (min-width:992px) and (max-width:1200px) {

	.branding-design-r img {

		margin: 27% 95% 0 0;

	}



	.branding-design-r span:nth-of-type(1) {

		font-size: 33px;

		line-height: 56px;

	}



	.branding-design-r span:nth-of-type(2) {

		font-size: 80px;

		line-height: 80px;

	}



	.branding-design-r span:nth-of-type(3) {

		font-size: 24px;

		line-height: 30px;

	}



	.about-project p {

		font-size: 18px;

		line-height: 30px;

	}



	.atlas-title {

		font-size: 38px;

		line-height: 48px;

	}



	.focus-top p {

		font-size: 18px;

	}



	.focus-top p:nth-of-type(2) {

		line-height: 26px;

	}



	.focus-middle span:nth-of-type(1) {

		font-size: 66px;

	}



	.focus-middle span:nth-of-type(3) {

		font-size: 20px;

		line-height: 23px;

	}



	.focus-middle span:nth-of-type(2), .focus-middle span:nth-of-type(4), .focus-middle span:nth-of-type(5) {

		font-size: 30px;

		line-height: 128px;

		padding: 0 3.1%;

	}



	.focus-bottom span:nth-of-type(2) {

		width: 41%;

	}



	.focus-bottom span {

		font-size: 20px;

	}



	.atlas-icon-design ul li img {

		width: 74%;

	}



	.con-thanks p {

		font-size: 20px;

	}

}



@media (min-width:768px) and (max-width:992px) {

	.branding-design-r img {

		margin: 27% 95% 0 0;

	}



	.branding-design-r span:nth-of-type(1) {

		font-size: 26px;

		line-height: 36px;

	}



	.branding-design-r span:nth-of-type(2) {

		font-size: 66px;

		line-height: 66px;

	}



	.branding-design-r span:nth-of-type(3) {

		font-size: 20px;

		line-height: 26px;

	}



	.about-project p {

		font-size: 16px;

		line-height: 22px;

	}



	.atlas-title {

		font-size: 30px;

		line-height: 40px;

	}



	.focus-top p {

		font-size: 18px;

	}



	.focus-top p:nth-of-type(2) {

		line-height: 26px;

		width: 53%;

	}



	.focus-middle span:nth-of-type(1) {

		font-size: 52px;

	}



	.focus-middle span:nth-of-type(3) {

		font-size: 18px;

		line-height: 19px;

	}



	.focus-middle span:nth-of-type(2), .focus-middle span:nth-of-type(4), .focus-middle span:nth-of-type(5) {

		font-size: 24px;

		line-height: 82px;

		padding: 0 3.1%;

	}



	.focus-bottom span:nth-of-type(1) {

		letter-spacing: 3px;

	}



	.focus-bottom span:nth-of-type(2) {

		width: 46%;

	}



	.focus-bottom span {

		font-size: 18px;

	}



	.atlas-icon-design ul li img {

		width: 74%;

	}



	.con-thanks p {

		font-size: 18px;

	}

}



@media (min-width:640px) and (max-width:768px) {

	.branding-design-r img {

		margin: 27% 95% 0 0;

	}



	.branding-design-r span:nth-of-type(1) {

		font-size: 22px;

		line-height: 30px;

	}



	.branding-design-r span:nth-of-type(2) {

		font-size: 56px;

		line-height: 56px;

	}



	.branding-design-r span:nth-of-type(3) {

		font-size: 18px;

		line-height: 22px;

	}



	.about-project p {

		font-size: 16px;

		line-height: 22px;

	}



	.atlas-title {

		font-size: 26px;

		line-height: 34px;

	}



	.focus-top p {

		font-size: 18px;

	}



	.focus-top p:nth-of-type(2) {

		line-height: 26px;

		width: 53%;

	}



	.focus-middle span:nth-of-type(1) {

		font-size: 43px;

	}



	.focus-middle span:nth-of-type(3) {

		font-size: 16px;

		line-height: 16px;

	}



	.focus-middle span:nth-of-type(2), .focus-middle span:nth-of-type(4), .focus-middle span:nth-of-type(5) {

		font-size: 22px;

		line-height: 68px;

		padding: 0 3.1%;

	}



	.focus-bottom span:nth-of-type(1) {

		letter-spacing: 3px;

	}



	.focus-bottom span:nth-of-type(2) {

		width: 46%;

	}



	.focus-bottom span {

		font-size: 16px;

	}



	.atlas-icon-design ul li img {

		width: 70%;

	}



	.atlas-icon-design ul li p {

		font-size: 18px;

	}



	.logo-line-2 ul li p {

		width: 100%;

		font-size: 16px;

	}



	.con-thanks p {

		font-size: 16px;

	}

}



@media (min-width:414px) and (max-width:640px) {

	.branding-design-r img {

		margin: 27% 95% 0 0;

	}



	.branding-design-r span:nth-of-type(1) {

		font-size: 20px;

		line-height: 20px;

	}



	.branding-design-r span:nth-of-type(2) {

		font-size: 35px;

		line-height: 35px;

	}



	.branding-design-r span:nth-of-type(3) {

		font-size: 15px;

		line-height: 20px;

	}



	.about-project p {

		width: 100%;

		font-size: 14px;

		line-height: 18px;

	}



	.atlas-title {

		font-size: 22px;

		line-height: 28px;

	}



	.about-project > div {

		padding: 0 0 6% 0.5%;

	}



	.focus-advertsing {

		width: 94%;

		padding: 8.7% 0 10% 6%;

	}



	.focus-top p {

		font-size: 15px;

	}



	.focus-top p:nth-of-type(2) {

		line-height: 20px;

		width: 65%;

	}



	.focus-middle span:nth-of-type(1) {

		font-size: 36px;

	}



	.focus-middle span:nth-of-type(3) {

		font-size: 14px;

		line-height: 14px;

	}



	.focus-middle span:nth-of-type(2), .focus-middle span:nth-of-type(4), .focus-middle span:nth-of-type(5) {

		font-size: 20px;

		line-height: 56px;

		padding: 0 3.1%;

	}



	.focus-bottom span:nth-of-type(1) {

		letter-spacing: 3px;

	}



	.focus-bottom span:nth-of-type(2) {

		width: 49%;

	}



	.focus-bottom span {

		font-size: 14px;

	}



	.atlas-icon-design ul li img {

		width: 64%;

	}



	.atlas-icon-design ul li p {

		font-size: 14px;

	}



	.logo-line-2 ul li p {

		width: 100%;

		font-size: 13px;

	}



	.con-thanks p {

		font-size: 15px;

	}



	.casestudy-intro_row p.vert {

		font-size: 16px;

	}



	.casestudy-intro_row p.horz {

		font-size: 14px;

	}

}



@media (min-width:375px) and (max-width:413px) {

	.branding-design-r img {

		margin: 27% 95% 0 0;

	}



	.branding-design-r span:nth-of-type(1) {

		font-size: 20px;

		line-height: 20px;

	}



	.branding-design-r span:nth-of-type(2) {

		font-size: 35px;

		line-height: 35px;

	}



	.branding-design-r span:nth-of-type(3) {

		font-size: 15px;

		line-height: 20px;

	}



	.about-project p {

		width: 100%;

		font-size: 14px;

		line-height: 18px;

	}



	.atlas-title {

		font-size: 22px;

		line-height: 28px;

	}



	.about-project > div {

		padding: 0 0 6% 0.5%;

	}



	.focus-advertsing {

		width: 94%;

		padding: 8.7% 0 10% 6%;

	}



	.focus-top p {

		font-size: 15px;

	}



	.focus-top p:nth-of-type(2) {

		line-height: 20px;

		width: 65%;

	}



	.focus-middle span:nth-of-type(1) {

		font-size: 28px;

		line-height: 60px;

	}



	.focus-middle span:nth-of-type(3) {

		font-size: 14px;

		line-height: 14px;

	}



	.focus-middle span:nth-of-type(2), .focus-middle span:nth-of-type(4), .focus-middle span:nth-of-type(5) {

		font-size: 20px;

		line-height: 56px;

		padding: 0 3.1%;

	}



	.focus-bottom span:nth-of-type(1) {

		letter-spacing: 3px;

	}



	.focus-bottom span:nth-of-type(2) {

		width: 50%;

	}



	.focus-bottom span {

		font-size: 14px;

	}



	.atlas-icon-design ul li img {

		width: 64%;

	}



	.atlas-icon-design ul li p {

		font-size: 13px;

		font-weight: normal;

	}



	.logo-line-2 ul li p {

		width: 100%;

		font-size: 13px;

	}



	.con-thanks p {

		font-size: 14px;

	}



	.casestudy-intro_row p.vert {

		font-size: 16px;

	}



	.casestudy-intro_row p.horz {

		font-size: 14px;

	}



	.focus-middle img:nth-of-type(2) {

		width: 13.5%;

	}

}



@media (min-width:320px) and (max-width:374px) {

	.branding-design-r img {

		margin: 27% 95% 0 0;

	}



	.branding-design-r span:nth-of-type(1) {

		font-size: 20px;

		line-height: 20px;

	}



	.branding-design-r span:nth-of-type(2) {

		font-size: 28px;

		line-height: 28px;

	}



	.branding-design-r span:nth-of-type(3) {

		font-size: 15px;

		line-height: 20px;

	}



	.about-project p {

		width: 100%;

		font-size: 14px;

		line-height: 18px;

	}



	.atlas-title {

		font-size: 22px;

		line-height: 28px;

	}



	.about-project > div {

		padding: 0 0 6% 0.5%;

	}



	.focus-advertsing {

		width: 94%;

		padding: 8.7% 0 10% 6%;

	}



	.focus-top p {

		font-size: 15px;

	}



	.focus-top p:nth-of-type(2) {

		line-height: 20px;

		width: 65%;

	}



	.focus-middle span:nth-of-type(1) {

		font-size: 26px;

		line-height: 60px;

	}



	.focus-middle span:nth-of-type(3) {

		font-size: 14px;

		line-height: 14px;

	}



	.focus-middle img:nth-of-type(1) {

		padding: 5.1% 0;

	}



	.focus-middle span:nth-of-type(2), .focus-middle span:nth-of-type(4), .focus-middle span:nth-of-type(5) {

		font-size: 18px;

		line-height: 60px;

		padding: 0 2%;

	}



	.focus-bottom span:nth-of-type(1) {

		letter-spacing: 3px;

	}



	.focus-bottom span:nth-of-type(2) {

		width: 53%;

	}



	.focus-bottom span {

		font-size: 13px;

	}



	.atlas-icon-design ul li img {

		width: 64%;

	}



	.atlas-icon-design ul li p {

		font-size: 13px;

		font-weight: normal;

	}



	.logo-line-2 ul li p {

		width: 100%;

		font-size: 13px;

	}



	.con-thanks p {

		font-size: 13px;

	}



	.casestudy-intro_row p.vert {

		font-size: 16px;

	}



	.casestudy-intro_row p.horz {

		font-size: 14px;

	}



	.focus-middle img:nth-of-type(2) {

		width: 13.5%;

		padding: 7.5% 0;

	}

}



body.casestudy-mirror .hero-casestudy_title {

	background: #000;

	color: #fff;

}



body.casestudy-mirror .hero-casestudy_title img {

	width: 63%;

	margin: 24% auto;

}



.jlmj-video {

	width: 42%;

}



@media (min-width:992px) and (max-width:1360px) {

	.jlmj-video {

		width: 60%;

	}

}



@media (min-width:640px) and (max-width:992px) {

	.jlmj-video {

		width: 72%;

	}

}



@media (min-width:320px) and (max-width:414px) {

	.jlmj-video {

		width: 72%;

	}

}



.ty-logo {

	width: 20%;

	margin: 0 auto;

	display: block;

}



body.casestudy-fairy .hero-casestudy_title {

	background: #ff3849;

	color: #fff;

}



body.casestudy-dft .hero-casestudy_title {

	background: #000;

	color: #fff;

}



/* Helpers */

.bg-grey {

	background: #F4F4F4;

}



.bg-red {

	background: #F24535;

}



.section-row {

	display: flex;

	flex-wrap: wrap;

}



.section-row.cols {

	margin-left: -20px;

	margin-right: -20px;

}



.col-sm-3,

.col-sm-4,

.col-sm-6 {

	width: 100%;

	height: 100%;

}



.col-sm-3.padded,

.col-sm-4.padded,

.col-sm-6.padded {

	padding-left: 20px;

	padding-right: 20px;

	box-sizing: border-box;

	margin-bottom: 25px;

}



@media (min-width: 768px) {

	.col-sm-3.padded,

  .col-sm-4.padded,

  .col-sm-6.padded {

		margin-bottom: 0;

	}



	.col-sm-3 {

		width: 25%;

	}



	.col-sm-4 {

		width: 33.3333%;

	}



	.col-sm-6 {

		width: 50%;

	}

}



.mobile-hide {

	display: none;

}



@media (min-width: 768px) {

	.mobile-hide {

		display: block;

	}

}



.mobile-show {

	display: block;

}



@media (min-width: 768px) {

	.mobile-show {

		display: none;

	}

}



.tablet-hide {

	display: none;

}



@media (min-width: 992px) {

	.tablet-hide {

		display: block;

	}

}



.tablet-show {

	display: block;

}



@media (min-width: 992px) {

	.tablet-show {

		display: none;

	}

}



.flex-nowrap {

	flex-wrap: nowrap;

}



.section-col-6 {

	width: 100%;

	margin: 10px 0;

}



@media (min-width: 768px) {

	.section-col-6 {

		width: calc(50% - 20px);

		margin: 0 20px;

	}



	.section-col-6:first-child {

		margin-left: 0;

	}



	.section-col-6:last-child {

		margin-right: 0;

	}

}



.mt-0 {

	margin-top: 0;

}



.mt-1 {

	margin-top: 10px;

}



.mt-2 {

	margin-top: 20px;

}



.mt-3 {

	margin-top: 30px;

}



.mt-4 {

	margin-top: 40px;

}



.mt-5 {

	margin-top: 50px;

}



.mt-8 {

	margin-top: 80px;

}



.mb-0 {

	margin-bottom: 0;

}



.mb-1 {

	margin-bottom: 10px;

}



.mb-2 {

	margin-bottom: 20px;

}



.mb-3 {

	margin-bottom: 30px;

}



.mb-4 {

	margin-bottom: 40px;

}



.mb-5 {

	margin-bottom: 50px;

}



.pt-0 {

	padding-top: 0 !important;

}



.pb-0 {

	padding-bottom: 0 !important;

}



.pb-large {

	padding-bottom: 120px;

}



@media (min-width: 768px) {

	.pb-large {

		padding-bottom: 200px;

	}

}



@media (min-width: 1200px) {

	.pb-large {

		padding-bottom: 300px;

	}

}



.margin-bottom_180 {

	margin-bottom: 60px;

}



.margin-top_180 {

	margin-top: 60px;

}



.margin-top_250 {

	margin-top: 100px;

}



.margin-bottom_250 {

	margin-bottom: 100px;

}



.margin-top_400 {

	margin-top: 120px;

}



.margin-bottom_400 {

	margin-bottom: 120px;

}



@media (min-width: 768px) {

	.margin-bottom_180 {

		margin-bottom: 100px;

	}



	.margin-top_180 {

		margin-top: 100px;

	}



	.margin-top_250 {

		margin-top: 160px;

	}



	.margin-bottom_250 {

		margin-bottom: 160px;

	}



	.margin-top_400 {

		margin-top: 250px;

	}



	.margin-bottom_400 {

		margin-bottom: 250px;

	}

}



@media (min-width: 1200px) {

	.margin-bottom_180 {

		margin-bottom: 180px;

	}



	.margin-top_180 {

		margin-top: 180px;

	}



	.margin-top_250 {

		margin-top: 250px;

	}



	.margin-bottom_250 {

		margin-bottom: 250px;

	}



	.margin-top_400 {

		margin-top: 400px;

	}



	.margin-bottom_400 {

		margin-bottom: 400px;

	}

}



.media-shadow {

	box-shadow: 0 30px 40px rgba(0,0,0,0.05);

}



.index-5 {

	z-index: 5;

}



/* Footer */

footer {

	position: relative;

}



footer.simple {

	position: absolute;

	left: 0;

	bottom: 0;

	right: 0;

	width: 100%;

	background: #FBFBFB;

	padding: 30px 0 30px;

}



@media (min-width: 640px) {

	footer.simple {

		padding: 10vh 0 30px;

	}

}



@media (min-width: 1680px) {

	footer.simple {

		padding: 215px 0 30px;

	}

}



footer.simple:before {

	content: '';

	position: absolute;

	top: -60px;

	right: 0;

	width: 50%;

	height: 60px;

	background: #FBFBFB;

}



@media (min-width: 1200px) {

	footer.simple:before {

		width: 360px;

		height: 90px;

		top: -90px;

	}

}



@media (min-width: 1680px) {

	footer.simple:before {

		width: calc((100% - 1680px) / 2 + 360px);

	}

}



.footer.simple p {

	color: #656565;

	margin: 0;

	font-size: 14px;

}



@media (max-width: 640px) {

	footer.simple p {

		text-align: center;

		margin: 5px 0;

	}

}



@media (min-width: 640px) {

	footer.simple .footer-copy {

		display: flex;

		justify-content: space-between;

		align-items: center;

	}

}



.footer-main {

	background: #000000;

	padding: 40px 0;

}



@media (min-width: 768px) {

	.footer-main {

		padding: 60px 0;

	}

}



@media (min-width: 1200px) {

	.footer-main {

		padding: 65px 0 0px;

	}

}



.footer-main .footer-title {

	display: flex;

	align-items: flex-start;

	flex-direction: column;

	margin: 35px 0;

}



@media (min-width: 768px) {

	.footer-main .footer-title {

		justify-content: space-between;

		align-items: center;

		flex-direction: row;

		margin: 0 0 60px;

	}

}



@media (min-width: 1200px) {

	.footer-main .footer-title {

		margin: 0 0 55px;

	}

}



.footer-main .footer-title h2 {

	color: white;

	margin: 0;

	line-height: 1;

	order: 2;

	text-align: center;

}



@media (min-width: 768px) {

	.footer-main .footer-title h2 {

		order: 1;

		text-align: left;

	}

}



.footer-main .footer-title strong {

	color: white;

	margin: 0;

	line-height: 1;

	order: 2;

	text-align: center;

}



@media (min-width: 768px) {

	.footer-main .footer-title strong {

		order: 1;

		text-align: left;

	}

}



.footer-main .footer-title strong {

	font-size: 38px;

}



@media (min-width: 640px) {

	.footer-main .footer-title strong {

		font-size: 46px;

	}



	h1.small {

		font-size: 38px;

	}

}



@media (min-width: 768px) {

	.footer-main .footer-title strong {

		font-size: 48px;

	}



	h1.small {

		font-size: 46px;

	}

}



@media (min-width: 1200px) {

	.footer-main .footer-title strong {

		font-size: 62px;

	}



	h1.small {

		font-size: 46px;

	}

}



@media (min-width: 1440px) {

	.footer-main .footer-title strong {

		font-size: 76px;

	}



	h1.small {

		font-size: 60px;

	}

}



.footer-main .footer-title .icon {

	display: none;

}



@media (min-width: 768px) {

	.footer-main .footer-title .icon {

		position: relative;

		display: block;

		background-image: url("../image/logo-9.svg");

		background-size: contain;

		width: 30px;

		height: 36px;

		order: 1;

		margin-bottom: 25px;

	}

}



@media (min-width: 768px) {

	.footer-main .footer-title .icon {

		order: 2;

		margin: 0;

	}

}



@media (min-width: 1200px) {

	.footer-columns {

		display: flex;

		justify-content: space-between;

	}

}



@media (min-width: 768px) {

	.footer-columns .footer-columns-left {

		display: flex;

		justify-content: space-between;

	}

}



@media (min-width: 1200px) {

	.footer-columns .footer-columns-left {

		justify-content: flex-start;

	}

}



.footer-locales {

	display: flex;

	flex-wrap: wrap;

	margin-left: -20px;

	margin-right: -20px;

}



@media (min-width: 768px) {

	.footer-locales {

		margin: 0;

		margin-left: 50px;

		flex-wrap: nowrap;

	}

}



@media (min-width: 1200px) {

	.footer-locales {

		margin-left: 50px;

	}

}



@media (min-width: 1680px) {

	.footer-locales {

		display: flex;

		margin-left: 200px;

		margin-right: 200px;

	}

}



.footer-locales .col {

	margin: 0 20px;

	

}



@media (min-width: 576px) {

	.footer-locales .col {

		

	}

}



@media (min-width: 1200px) {

	.footer-locales .col {

		margin: 0 30px;

	}

}



@media (min-width: 1680px) {

	.footer-locales .col {

		margin: 0 25px;

	}

}



@media (min-width: 576px) {

	.footer-locales .col:first-child {

		margin-left: 0;

	}



	.footer-locales .col:last-child {

		margin-right: 0;

	}

}



.footer-locales .col > div {

	margin: 0 0 25px;

}



.footer-locales strong {

	display: block;

	font-size: 14px;

	color: #B8B8B8;

	margin: 0 0 20px;

	font-weight: 600;

}



@media (min-width: 768px) {

	.footer-locales strong {

		font-size: 16px;

	}

}



.footer-locales p {

	margin: 0 0 5px;

	font-size: 14px;

	color: #656565;

}



@media (min-width: 768px) {

	.footer-locales p {

		font-size: 16px;

	}

}



.footer-locales.col a,

.footer-locales a,

.footer-locales p a {

	font-size: 14px;

	color: #B8B8B8;

	text-decoration: none;

}



@media (min-width: 768px) {

	.footer-locales a,

  .footer-locales p a {

		font-size: 16px;

	}

}



@media (max-width: 1440px) {

	.footer-locales a,

  .footer-locales p a {

		display: block;

	}

}



.footer-locales a:hover,

.footer-locales p a:hover {

	color: white;

}



.footer-locales ul {

	margin: 0;

	padding: 0;

}



.footer-locales ul li {

	margin: 0 0 10px;

}



.footer-contact {

	margin: 40px 0 0;

	position: relative;

}



@media (min-width: 1200px) {

	.footer-contact {

		margin: 0;

		margin-left: 40px;

	}

}



.footer-contact-links {

	margin: 0 0 20px;

	padding: 0;

	display: flex;

	justify-content: center;

}



@media (min-width: 1200px) {

	.footer-contact-links {

		margin: 0 0 40px;

	}

}



@media (min-width: 1200px) {

	.footer-contact-links {

		margin: 0 0 80px;

		justify-content: flex-end;

	}

}



.footer-contact-links li {

	margin: 0 10px;

}



@media (min-width: 768px) {

	.footer-contact-links li {

		margin: 0 30px;

	}

}



.footer-contact-links li a {

	color: #656565;

	font-size: 20px;

	text-decoration: none;

}



.footer-contact-links li a:hover {

	color: #ffffff;

}



.footer-contact-links li:first-child {

	margin-left: 0;

}



.footer-contact-links li:last-child {

	margin-right: 0;

}



.footer-contact-social {

	display: flex;

	justify-content: center;

	margin: 0;

	padding: 0;

	text-align: center;

}

.footer-contact p{

	width: auto;

	text-align: center;

	color: rgba(184,184,184,0.5);

	font-size: 12px;

}

.footer-slogan h5{

	font-size: 16px;

	color: rgba(246,246,246,0.8)

}

.footer-slogan p{

	font-size: 12px;

	color: rgba(184,184,184,0.5);

	margin-top: -20px;

}



@media (min-width: 1200px) {

	.footer-contact-social,

  .footer-contact-links {

		justify-content: flex-end;

	}

}



.footer-contact-social li {

	display: block;

	margin: 0 30px;

}



.footer-contact-social li:first-child {

	margin-left: 0;

}



.footer-contact-social li:last-child {

	margin-right: 0;

}



.footer-contact-social li a {

	position: relative;

	display: block;

	overflow: hidden;

	width: 50px;

	height: 50px;

}



@media (min-width: 768px) {

	.footer-contact-social li a {

		width: 60px;

		height: 60px;

	}

}



.footer-contact-social li a.dribbble {

	background-image: url("../image/ball-lager.svg");

	background-size: contain;

}



.footer-contact-social li a.dribbble:hover {

	background-image: url("../image/ball-lager-hover.svg");

	background-size: contain;

}



.footer-contact-social li a.station {

	background-image: url("../image/zcool-lager.svg");

	background-size: contain;

}



.footer-contact-social li a.station:hover {

	background-image: url("../image/zcool-lager-hover.svg");

	background-size: contain;

}



.footer-contact-social li a.instagram {

	background-image: url("../image/pane-lager.svg");

	background-size: contain;

}



.footer-contact-social li a.instagram:hover {

	background-image: url("../image/pane-lager-hover.svg");

	background-size: contain;

}



.footer-contact-social li a.behance {

	background-image: url("../image/be-lager.svg");

	background-size: contain;

}



.footer-contact-social li a.behance:hover {

	background-image: url("../image/be-lager-hover.svg");

	background-size: contain;

}



.footer-logo {

	position: relative;

	width: 90px;

	height: 55px;

	overflow: hidden;

	text-indent: -999px;

	background-image: url("../image/foot_logo.png");

	background-size: contain;

	background-repeat: no-repeat;

	background-position: center;

	margin: 0;

}



@media (min-width: 768px) {

	.footer-logo {

		margin: 0;

		width: 152px;

		height: 95px;

	}

}



.footer-columns .footer-logo {

	position: relative;

	display: block;

	width: 120px;

	height: 75px;

	overflow: hidden;

	text-indent: -999px;

	background-image: url("../image/foot_logo.png");

	background-repeat: no-repeat;

	background-position: center;

	margin: 0 auto 30px;

}



@media (min-width: 768px) {

	.footer-columns .footer-logo {

		margin: 0;

		width: 152px;

		height: 95px;

	}

}



.footer-bottom {

	background: #1A1A1A;

	padding: 20px 0;

}



.footer-bottom p, .footer-bottom a {

	color: #656565;

	margin: 0;

	font-size: 14px;

}



@media (max-width: 640px) {

	.footer-bottom p, .footer-bottom a {

		text-align: center;

		margin: 5px 0;

	}



	.footer-columns .footer-logo {

		display: none;

	}

}



@media (min-width: 640px) {

	.footer-bottom {

		padding: 20px 0;

	}



	.footer-bottom .footer-copy {

		display: flex;

		justify-content: space-between;

		align-items: center;

	}

}









.show.fade-in,

.show.fade-up,

.show.fade-left {

	opacity: 0;

	transition: all .35s ease;

	-o-transition: all .35s ease;

	-moz-transition: all .35s ease;

	-webkit-transition: all .35s ease;

	

}



.show.fade-in.in-view {

	animation-duration: .5s;

	animation-timing-function: ease-in-out;

	animation-name: fadeIn;

	animation-fill-mode: forwards;

	animation-delay: .25s;

}



.show.fade-up.in-view {

	animation-duration: .4s;

	animation-timing-function: ease-in-out;

	animation-name: fadeUp;

	animation-fill-mode: forwards;

	animation-delay: .25s;

}



.show.fade-up.in-view[data-delay="0.4"] {

	animation-delay: .4s;

}



.show.fade-up.in-view[data-delay="0.5"] {

	animation-delay: .5s;

}



.show.fade-left.in-view {

	animation-duration: .35s;

	animation-timing-function: ease;

	animation-name: fadeLeft;

	animation-fill-mode: forwards;

	animation-delay: .25s;

}



.show.fade-in.in-view[data-delay="0.5"] {

	animation-delay: .5s;

}



.fadeIn {

	opacity: 0;

	transform: translateY(50px);

	transition: all 1s cubic-bezier(.19,1,.22,1);

	-o-transition: all 1s cubic-bezier(.19,1,.22,1);

	-moz-transition: all 1s cubic-bezier(.19,1,.22,1);

	-webkit-transition: all 1s cubic-bezier(.19,1,.22,1);

	transition-delay: 0.15s;

	-o-transition-delay: 0.15s;

	-moz-transition-delay: 0.15s;

	-webkit-transition-delay: 0.15s;

}



.fadeIn[data-delay="2"] {

	transition-delay: 0.3s;

	-o-transition-delay: 0.3s;

	-moz-transition-delay: 0.3s;

	-webkit-transition-delay: 0.3s;

}



.fadeIn[data-delay="3"] {

	transition-delay: 0.45s;

	-o-transition-delay: 0.45s;

	-moz-transition-delay: 0.45s;

	-webkit-transition-delay: 0.45s;

}



.fadeIn.in-view {

	opacity: 1;

	transform: translateY(0);

}



/* Animations */

@-webkit-keyframes swipeFull {

	from {

		width: 0%;

	}



	to {

		width: 100%;

	}

}



@keyframes swipeFull {

	from {

		width: 0%;

	}



	to {

		width: 100%;

	}

}



@-webkit-keyframes fadeIn {

	from {

		opacity: 0;

	}



	to {

		opacity: 1;

	}

}



@keyframes fadeIn {

	from {

		opacity: 0;

	}



	to {

		opacity: 1;

	}

}



@-webkit-keyframes fadeUp {

	from {

		opacity: 0;

		-webkit-transform: translateY(35px);

		transform: translateY(35px);

	}



	to {

		opacity: 1;

		-webkit-transform: translateY(0);

		transform: translateY(0);

	}

}



@keyframes fadeUp {

	from {

		opacity: 0;

		-webkit-transform: translateY(35px);

		transform: translateY(35px);

	}



	to {

		opacity: 1;

		-webkit-transform: translateY(0);

		transform: translateY(0);

	}

}



@-webkit-keyframes fadeLeft {

	from {

		opacity: 0;

		-webkit-transform: translateX(-35px);

		transform: translateX(-35px);

	}



	to {

		opacity: 1;

		-webkit-transform: translateX(0);

		transform: translateX(0);

	}

}



@keyframes fadeLeft {

	from {

		opacity: 0;

		-webkit-transform: translateX(-35px);

		transform: translateX(-35px);

	}



	to {

		opacity: 1;

		-webkit-transform: translateX(0);

		transform: translateX(0);

	}

}



@-webkit-keyframes fadeOut {

	from {

		opacity: 1;

	}



	to {

		opacity: 0;

	}

}



@keyframes fadeOut {

	from {

		opacity: 1;

	}



	to {

		opacity: 0;

	}

}



@-webkit-keyframes projectIn {

	0% {

		opacity: 0;

	}



	50% {

		opacity: 1;

		-webkit-transform: scale(1.1) translate3d(0,0,0);

		transform: scale(1.1) translate3d(0,0,0);

	}



	100% {

		-webkit-transform: scale(1) translate3d(0,0,0);

		transform: scale(1) translate3d(0,0,0);

	}

}



@keyframes projectIn {

	0% {

		opacity: 0;

	}



	50% {

		opacity: 1;

		-webkit-transform: scale(1.1) translate3d(0,0,0);

		transform: scale(1.1) translate3d(0,0,0);

	}



	100% {

		-webkit-transform: scale(1) translate3d(0,0,0);

		transform: scale(1) translate3d(0,0,0);

	}

}



@-webkit-keyframes projectOut {

	0% {

		opacity: 1;

		-webkit-transform: scale(1) translate3d(0,0,0);

		transform: scale(1) translate3d(0,0,0);

	}



	100% {

		opacity: 0;

		-webkit-transform: scale(1) translate3d(0,0,0);

		transform: scale(1) translate3d(0,0,0);

	}

}



@keyframes projectOut {

	0% {

		opacity: 1;

		-webkit-transform: scale(1) translate3d(0,0,0);

		transform: scale(1) translate3d(0,0,0);

	}



	100% {

		opacity: 0;

		-webkit-transform: scale(1) translate3d(0,0,0);

		transform: scale(1) translate3d(0,0,0);

	}

}



@-webkit-keyframes scaleUp {

	0% {

		-webkit-transform: scale(1) translate3d(0,0,0);

		transform: scale(1) translate3d(0,0,0);

	}



	100% {

		-webkit-transform: scale(1.1) translate3d(0,0,0);

		transform: scale(1.1) translate3d(0,0,0);

	}

}



@keyframes scaleUp {

	0% {

		-webkit-transform: scale(1) translate3d(0,0,0);

		transform: scale(1) translate3d(0,0,0);

	}



	100% {

		-webkit-transform: scale(1.1) translate3d(0,0,0);

		transform: scale(1.1) translate3d(0,0,0);

	}

}





/* IE Styling */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

	.page-hero.indent:before {

		display: none;

	}

}





/* Fonts */

@font-face {

	font-family: "PingFang SC";

  font-weight: 500;

  src: local(".PingFang-SC-Medium");

}



@font-face {

	font-family: "PingFang SC";

  font-weight: 600;

  src: local(".PingFang-SC-SemiBold");

}



@font-face {

	font-family: 'Bebas';

  src: url('../image/BebasNeueBold.eot') format('embedded-opentype'), url('../image/BebasNeueBold.woff') format('woff'), url('../image/BebasNeueBold.ttf') format('truetype');

  font-weight: 700;

  font-style: normal;

}



@font-face {

	font-family: 'Poppins';

    src: url('../image/Poppins-Medium.woff2') format('woff2'),

        url('../image/Poppins-Medium.woff') format('woff');

    font-weight: 500;

    font-style: normal;

}



@font-face {

	font-family: 'Poppins';

    src: url('../image/Poppins-Bold.woff2') format('woff2'),

        url('../image/Poppins-Bold.woff') format('woff');

    font-weight: bold;

    font-style: normal;

}



@font-face {

	font-family: 'Poppins';

    src: url('../image/Poppins-Black.woff2') format('woff2'),

        url('../image/Poppins-Black.woff') format('woff');

    font-weight: 900;

    font-style: normal;

}



/* custom BEGIN */

.cursor-wrap {

	position: absolute;

	pointer-events: none;

	z-index: 1000000;

	top: 0;

	left: 0;

}



.cursor {

	position: fixed;

	display: block;

	transform: translate(-100%, -100%);

	width: 25px;

	height: 25px;

	border: 2px solid #d8d8d8;

	border-radius: 50%;

	pointer-events: none;

	opacity: 0;

}



.js-slogan strong,  

.js-slogan h1,

.js-slogan .hr-block {

	opacity: 0;

}



.word {

	font-style: normal;

	position: relative;

	color: rgba(0,0,0,0);

}



.word em {

	font-style: normal;

	position: absolute;

	transition: 1s transform, 1.5s opacity;

	color: #000;

	left: 0;

	top: 0;

}



.word--left em {

	content: 'CREATIVE';

	transform: translateY(-45%);

	opacity: 0;

}



.word--right em {

	content: 'BUSINESS';

	transform: translateY(45%);

	opacity: 0;

}



.word--visible em {

	transform: translateY(0);

	opacity: 1;

}



/* @media (max-width: 480px) {

  .nav-fixed-contact .nav-contact {

    flex-direction: column;

  }

  .nav-fixed-contact .nav-contact .col {

    width: auto;

  }

} */

@media (max-width: 480px) {

	.nav-fixed-contact .nav-contact {

		-webkit-box-orient: vertical;

		-webkit-box-direction: normal;

		-ms-flex-direction: column;

		flex-direction: column;

	}



	.nav-fixed-contact .nav-contact .col {

		width: auto;

	}

}

/* custom END */

.section-news .container{

	margin-bottom: 60px;

}



.index-about-right{

	width: 50%;

	overflow: hidden;

	position: relative;

}



.index-about-right-font{

	float: right;

	position: absolute;

	right: 65%;

	top: 30%;

	text-align: right;

}



.index-about-right-font h3{

	font-size: 26px;

	color: #000;

	line-height: 36px;

}



.index-about-right-font p{

	font-size: 22px;

	color: #333;

	margin-top: 10px;

	line-height: 36px;

}



.index-about-right-font span{

	font-size: 18px;

	line-height: 36px;

	color: #666;

}



.index-about-right-img{

	max-width: 60%;

	float: right;

	max-height: 530px;

	overflow: hidden;

}

.index-about-right-img img{

	width: 100%;

}

@media screen and (max-width: 1400px){

	.footer-locales .col{

		margin: 0 10px;

	}

	.footer-contact-social li{

		margin: 0 20px;

	}

}

@media screen and (max-width: 1180px){

	.footer-locales .col{

		margin: 0 10px;

	}

	.footer-contact{

		margin-left: 10px;

	}



}



@media screen and (max-width: 1180px){

	.footer-locales .col{

		margin: 0 10px;

	}

}