@charset "utf-8";

.spaceInDown {
	animation-name: spaceInDown;
}
.fadeInRight {
	animation-name: fadeInRight;
}
@keyframes spaceInDown {
	0% {
		opacity: 0;
		transform-origin: 50% 100%;
		transform: scale(.2) translate3d(0%, 200%, 0);
	}
	100% {
		opacity: 1;
		transform-origin: 50% 100%;
		transform: scale(1) translate3d(0%, 0%, 0);
	}
}
@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform-origin: 100% 50%;
		transform: translate3d(200%, 0%, 0);
	}
	100% {
		opacity: 1;
		transform-origin: 100% 50%;
		transform: translate3d(0%, 0%, 0);
	}
}



#header {
	position: fixed;
}

#article {
	position: relative;
}
#article .block {
	transform: translateZ(0);
	visibility: hidden;
	position: relative;
}
#article.ready .block {
	visibility: visible;
}
.csstransitions #article .block {
	opacity: 0;
}
.csstransitions #article.ready .block {
	transition: opacity 1s ease .5s;
	opacity: 1;
}
#article .bg {
	background: no-repeat center center;
	background-size: cover;
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}

#article .highlight {
	font-weight: 300;
	color: #a67f6c;
}
#article .head {
	color: #a67f6c;
}
#article .text {
	backface-visibility: hidden;
}
#article .text .eng {
	letter-spacing: -1.8px;
	line-height: 48px;
	font-weight: 300;
	font-size: 40px;
}
#article .text .tch {
	margin-top: 12px;
	font-size: 22px;
}
#article .text .content {
	line-height: 34px;
	margin-top: 46px;
	font-size: 18px;
}

#article .full>.inner {
	white-space: nowrap;
	position: absolute;
	font-size: 0;
	height: 100%;
	width: 440px;
	right: 120px;
	top: 0;
}
#article .full>.inner:before {
	vertical-align: middle;
	display: inline-block;
	content: ' ';
	height: 100%;
}
#article .full .text {
	vertical-align: middle;
	display: inline-block;
	white-space: normal;
	color: #444;
}



#readOn {
	transform: scale(.2) translate3d(0%, 200%, 0);
	backface-visibility: hidden;
	transform-origin: 50% 100%;
	animation-fill-mode: both;
	animation-duration: 1s;
	text-align: center;
	position: fixed;
	bottom: 58px;
	width: 100%;
	opacity: 0;
	left: 0;
}
#readOn>.inner {
	display: inline-block;
	perspective: 600px;
	position: relative;
	padding-top: 50px;
}
#readOn>.inner:before {
	background: url('/skin/images/plus.png') no-repeat center center;
	position: absolute;
	display: block;
	margin: 0 auto;
	content: ' ';
	height: 36px;
	width: 100%;
	left: 0;
	top: 0;
}
#readOn>.inner:hover:before {
	background-image: url('/skin/images/plus_brown.png');
}
#readOn.pinwheel>.inner:before {
	animation: pinwheel 2.2s linear 0s infinite alternate;
}
@keyframes pinwheel {
    0% { transform: rotateY(0deg) translateZ(0); }
    35% { transform: rotateY(90deg) translateZ(0); }
    70% { transform: rotateY(180deg) translateZ(0); }
    100% { transform: rotateY(180deg) translateZ(0); }
}



#nav {
	transform: translate3d(200%, 0%, 0);
	transform-origin: 100% 50%;
	animation-fill-mode: both;
	animation-duration: 1s;
	white-space: nowrap;
	position: fixed;
	font-size: 0;
	height: 100%;
	right: 40px;
	z-index: 1;
	opacity: 0;
	top: 0;
}
#nav:before {
	vertical-align: middle;
	display: inline-block;
	content: ' ';
	height: 100%;
}
#nav.at-bottom {
	position: absolute;
	height: auto;
	top: auto;
}
#nav>.inner {
	vertical-align: middle;
	display: inline-block;
}
#nav .item {
	display: block;
	margin: 0 auto;
	padding: 11px;
}
#nav .item>span {
	transition: background-color 1s;
	background-color: black;
	border-radius: 50%;
	display: block;
	content: ' ';
	height: 8px;
	width: 8px;
}
#nav .item.active>span, #nav .item:hover>span { background-color: #a67f6c }
#nav .sound {
	background: url('/skin/images/sound_on.png') no-repeat center center;
	margin: 42px auto 0;
	display: block;
	height: 22px;
	width: 24px;
}
#nav .sound.off { background-image: url('/skin/images/sound_off.png'); }



#gigi_ma>.inner {
	white-space: nowrap;
	position: absolute;
	overflow: hidden;
	height: 100%;
	width: 50%;
	right: 0;
	top: 0;
}
#gigi_ma>.inner:before {
	vertical-align: middle;
	display: inline-block;
	content: ' ';
	height: 100%;
}
#gigi_ma .text {
	text-transform: uppercase;
	vertical-align: middle;
	letter-spacing: -1.4px;
	display: inline-block;
	white-space: normal;
	padding-top: 22%;
	font-weight: 300;
	font-size: 45px;
}



#slogan {
	text-align: center;
	font-size: 0;
}
#slogan:after {
	vertical-align: middle;
	display: inline-block;
	content: ' ';
	height: 100%;
}
#slogan .text {
	vertical-align: middle;
	display: inline-block;
	position: relative;
	text-align: left;
	color: white;
}
#slogan .text:before, #slogan .text:after {
	background: url('/skin/images/open_quote.png') no-repeat center center;
	position: absolute;
	content: ' ';
	height: 60px;
	width: 60px;
}
#slogan .text:before {
	left: -116px;
}
#slogan .text:after {
	background-image: url('/skin/images/close_quote.png');
	bottom: -20px;
	right: -80px;
}
#slogan .sign {
	position: absolute;
	bottom: -146px;
	right: -20px;
	width: 159px;
}
#slogan .text * {
	font-weight: 300;
	font-size: 55px;
}
#slogan .text .eng {
	text-transform: uppercase;
	letter-spacing: -1.8px;
}
#slogan .text .tch {
	line-height: 42px;
	margin-top: 34px;
	font-size: 30px;
}
#slogan .display-mobile{
		display: none;
	}


#our_clinic>.inner {
	position: absolute;
	height: 100%;
	width: 55%;
	right: 0;
	top: 0;
}
#our_clinic>.inner:before {
	vertical-align: middle;
	display: inline-block;
	content: ' ';
	height: 100%;
}
#our_clinic .head {
	color: white;
}
#our_clinic .text {
	vertical-align: middle;
	display: inline-block;
	max-width: 790px;
	color: white;
	width: 80%;
}
#our_clinic .text .eng {
	letter-spacing: -1.8px;
	font-weight: 300;
	font-size: 50px;
}
#our_clinic .text .tch {
	margin-top: 12px;
	font-size: 22px;
}
#our_clinic .text .content {
	line-height: 34px;
	margin-top: 46px;
	font-size: 18px;
}/*
.csstransforms3d #article .tied .text .eng {
	transition: transform 1.2s cubic-bezier(.455, .03, .515, .955) .7s, opacity 1.2s cubic-bezier(.455, .03, .515, .955) .7s;
	transform: translateX(-40%) translateZ(0);
	opacity: 0;
}
.csstransforms3d #article .tied.active .text .eng {
	transform: translateX(0) translateZ(0);
	opacity: 1;
}
.csstransforms3d #article .tied .text .tch {
	transition: transform 1.2s cubic-bezier(.455, .03, .515, .955) .9s, opacity 1.2s cubic-bezier(.455, .03, .515, .955) .9s;
	transform: translateX(-40%) translateZ(0);
	opacity: 0;
}
.csstransforms3d #article .tied.active .text .tch {
	transform: translateX(0) translateZ(0);
	opacity: 1;
}
.csstransforms3d #article .tied .text .content {
	transition: transform 1.2s cubic-bezier(.455, .03, .515, .955) 1.1s, opacity 1.2s cubic-bezier(.455, .03, .515, .955) 1.1s;
	transform: translateX(-40%) translateZ(0);
	opacity: 0;
}
.csstransforms3d #article .tied.active .text .content {
	transform: translateX(0) translateZ(0);
	opacity: 1;
}*/



#article .tied .text {
	text-align: center;
	height: 100%;
	width: 37.5%;
}
#article .tied .text:before {
	vertical-align: middle;
	display: inline-block;
	content: ' ';
	height: 100%;
}
#article .tied .inside {
	vertical-align: middle;
	display: inline-block;
	text-align: left;
	width: 65%;
}
#article .tied .photo {
	position: relative;
	height: 100%;
	width: 62.5%;
}



#passion .text { float: left }
#passion .photo { float: right }/*
#passion .head .eng, #passion .head .tch, #passion .content {
	transform: rotateY(15deg);
	transform-origin: '50% 0';
	perspective: 500px;
	opacity: 0;
}
#passion.active .head .eng, #passion.active .head .tch, #passion.active .content {
	transition: all .4s ease-out 1s;
	transform: rotateY(0);
	opacity: 1;
}*/



#lifestyle.tied .text {
	float: right;
	width: 41.7%;
}
#lifestyle.tied .photo {
	background-position-x: left;
	width: 58.3%;
	float: left;
}



#analysis {
	text-align: center;
}
#analysis .holder {
	padding-right: 80px;
	white-space: nowrap;
	padding-left: 80px;
	max-width: 1286px;
	height: 100%;
}
#analysis .holder:before {
	vertical-align: middle;
	display: inline-block;
	content: ' ';
	height: 100%;
}
#analysis .text {
	vertical-align: middle;
	display: inline-block;
	white-space: normal;
}
#analysis .photo {
	margin-top: 68px;
}
#analysis .mobile {
	margin-bottom: 30px;
	margin-top: 0;
	display: none;
}



#prescription .text { float: left }
#prescription .photo { float: right }




#technology .text { float: left }
#technology .photo { float: right; }
#technology .photo .img {
	position: relative;
	overflow: hidden;
	height: 100%;
	float: left;
	width: 25%;
}
#technology .photo .img>.inner {
	position: absolute;
	overflow: hidden;
	height: 60%;
	width: 100%;
	left: 0;
	top: 0;
}
#technology .photo .img img {
	min-width: 240px;
	width: 100%;
}
#technology .photo .img.bottom img {
	position: absolute;
	bottom: 0;
}
#technology .photo .img.bottom>.inner {
	bottom: 0;
	top: auto;
}



#formula.full>.inner {
	width: 526px;
	left: 120px;
}



#experience>.holder {
	text-align: center;
	font-size: 0;
	height: 100%;
}
#experience>.holder:before {
	vertical-align: middle;
	display: inline-block;
	content: ' ';
	height: 100%;
}
#experience .head {
	color: #333;
}
#experience .book-now {
	padding: 14px 56px 14px 50px;
	border: 1px solid black;
	display: inline-block;
	position: relative;
	max-width: 256px;
	margin-top: 96px;
	font-size: 20px;
	color: #333;
	width: 34%;
}
#experience .book-now:after {
	background: url('/skin/images/arrow_right_black.png') no-repeat center center;
	position: absolute;
	content: ' ';
	height: 100%;
	width: 10px;
	right: 18px;
	top: 0;
}
#experience .book-now:hover {
	border-color: #a67f6c;
	color: #a67f6c;
}
#experience .book-now:hover:after {
	background-image: url('/skin/images/arrow_right_brown.png');
}
#experience .text {
	vertical-align: middle;
	display: inline-block;
}
#experience .text .eng {
	letter-spacing: -1.6px;
}
#experience .text .tch {
	font-size: 28px;
}

@media (max-height: 720px) {
	#readOn {
		display: none !important;
	}
}
@media (max-width: 1280px) {
	#nav {
		right: 34px;
	}
	
	
	
	#article .text .eng {
		letter-spacing: -1.6px;
		line-height: 46px;
		font-size: 42px;
	}
	#article .text .tch {
		margin-top: 8px;
		font-size: 18px;
	}
	#article .text .content {
		line-height: 30px;
		margin-top: 32px;
		font-size: 16px;
	}
	
	
	
	#article .tied .inside {
		margin-right: 5%;
	}
	
	
	
	#gigi_ma .text {
		font-size: 35px;
	}
	
	#formula.full>.inner {
		width: 440px;
	}
	
	#experience .book-now {
		padding: 10px 40px 10px 34px;
		display: inline-block;
		font-size: 18px;
		width: auto;
	}
}
@media (max-width: 960px) {
	#article .text .eng {
		letter-spacing: -1.2px;
		line-height: 40px;
		font-size: 34px;
	}
	
	
	
	#gigi_ma .text {
		font-size: 30px;
	}
	
	#slogan .text .eng {
		line-height: 54px;
		font-size: 40px;
	}
	#slogan .text .tch {
		line-height: 30px;
		margin-top: 40px;
		font-size: 26px;
	}
	#slogan .text:before, #slogan .text:after {
		zoom: .7;
	}
}
@media (min-width: 841px) {
	.no-touch.cssfilters .blur {
		-webkit-filter: blur(2px);
		-moz-filter: blur(2px);
		-o-filter: blur(2px);
		-ms-filter: blur(2px);
		filter: blur(2px);
	}
	.no-touch.cssfilters .active .blur {
		-webkit-filter: blur(0);
		-moz-filter: blur(0);
		-o-filter: blur(0);
		-ms-filter: blur(0);
		filter: blur(0);
	}
	
	
	
	.no-touch.csstransforms3d #gigi_ma .text {
		transition: all .9s ease 1s;
		transform: translateX(10%) translateZ(0);
		opacity: 0;
	}
	.no-touch.csstransforms3d #gigi_ma.active .text {
		transform: translateX(0) translateZ(0);
		opacity: 1;
	}
	
	
	
	.no-touch.csstransforms3d #slogan .text {
		backface-visibility: hidden;
		transition: all 2s ease 1s;
		transform: translateZ(0);
		opacity: 0;
	}
	.no-touch.csstransforms3d #slogan.active .text {
		transform: translateZ(0);
		opacity: 1;
	}
}
@media (max-width: 840px) {
	#nav {
		zoom: .8;
	}
	#nav .item:before {
		transition-duration: .4s;
	}
	
	
	
	#article .tied .inside, #article .full .text {
		padding: 30px 40px;
	}
	#article .tied .photo {
		width: 100%;
	}
	#article .block {
		height: auto !important;
	}
	#article .text .eng {
		letter-spacing: -.8px;
		line-height: 30px;
		font-size: 26px;
	}
	#article .text .tch {
		line-height: 22px;
		margin-top: 8px;
		font-size: 16px;
	}
	#article .text .content {
		line-height: 24px;
		margin-top: 20px;
		font-size: 14px;
	}
	#article .bg, #article .tied .photo {
		position: relative;
		height: 400px;
		float: none;
	}
	#article .tied .text {
		position: relative;
		float: none;
		width: 100%;
	}
	#article .tied .text:before {
		display: none;
	}
	#article .tied .inside {
		padding-right: 50px;
		margin-right: 0;
		min-width: 0;
		width: 100%;
	}
	
	
	
	.csstransforms3d #gigi_ma .text {
		transform: translateX(0) translateZ(0);
		opacity: 1;
	}
	
	#article #slogan .bg {
		position: absolute;
		height: 100%;
	}
	#slogan .text {
		margin-bottom: 120px;
		margin-top: 80px;
	}
	#slogan .text:before, #slogan .text:after {
		zoom: .3;
	}
	#slogan .text .eng {
		line-height: 32px;
		font-size: 28px;
	}
	#slogan .text .tch {
		line-height: 26px;
		margin-top: 26px;
		font-size: 20px;
	}
	#slogan .sign {
		bottom: -74px;
		width: 80px;
	}
	
	#analysis {
		padding: 60px 0;
	}
	#analysis .photo {
		display: none;
	}
	#analysis .mobile {
		display: block;
	}
	
	#experience .text {
		padding: 40px 0;
	}
	#experience .book-now {
		margin-top: 42px;
	}
	
	#formula.full>.inner {
		position: relative;
		width: 100%;
		left: 0;
	}
	
	#readOn {
		display: none !important;
	}
	#technology .photo .img.bottom img{
		transform: translate(-50%, -50%);
	    	left: 50%;
	    	top: 50%;
		position: absolute;
		min-width: 0;
	}
	#technology .photo .img img{
		transform: translate(-50%, -50%);
	    	left: 50%;
	    	top: 50%;
		position: absolute;
		min-width: 0;
	}
	#slogan .display-mobile{
		display: block;
	}
}
@media (max-width: 700px) {
	#nav {
		right: 20px;
	}
	
	
	
	#our_clinic .bg {
		background-position-x: -40px;
	}

}

@media screen and (max-width: 640px){
	#slogan .display-mobile{
		display: block;
	}
	#technology .photo .img.bottom img{
		transform: translate(-50%, -50%);
	    	left: 50%;
	    	top: 50%;
		position: absolute;
		min-width: 0;
	}
	#technology .photo .img img{
		transform: translate(-50%, -50%);
	    	left: 50%;
	    	top: 50%;
		position: absolute;
		min-width: 0;
	}
	
}


@media (max-width: 480px),
(-webkit-min-device-pixel-ratio: 1.25) and (max-width: 640px),
(min--moz-device-pixel-ratio: 1.25) and (max-width: 640px),
(-o-min-device-pixel-ratio: 1.25/1) and (max-width: 640px),
(min-device-pixel-ratio: 1.25) and (max-width: 640px),
(min-resolution: 200dpi) and (max-width: 640px),
(min-resolution: 1.25dppx) and (max-width: 640px) {
	#nav {
		right: 8px;
	}
	
	
	
	#article {
		padding-top: 54px;
	}
	
	
	
	#nav .sound,
	#our_clinic>.inner:before {
		display: none;
	}
	
	
	
	#article .bg, #article .tied .photo {
		height: 280px;
	}
	#article .full .text,
	#article .tied .inside,
	#our_clinic>.inner,
	#analysis .holder,
	#article #technology.tied .inside {
		padding: 40px;
		padding-left: 18px;
	}
	
	
	
	#gigi_ma .text {
		padding-right: 28px;
		font-size: 20px;
	}
	
	#slogan .text .eng {
		line-height: 26px;
		font-size: 20px;
	}
	#slogan .text .tch {
		line-height: 22px;
		margin-top: 8px;
		font-size: 16px;
	}
	
	#our_clinic .bg {
		background-position: left center;
	}
	#our_clinic>.inner {
		background-color: rgba(245, 245, 245, .95);
		position: relative;
		width: 100%;
	}
	#our_clinic .text {
		color: black;
		width: 100%;
	}
	#our_clinic .head {
		color: #a67f6c;
	}
	
	#analysis {
		text-align: left;
		padding: 0;
	}
	
	#technology .photo .img>img {
		min-width: 0;
	}
}
@media 
(-webkit-min-device-pixel-ratio: 1.25) and (max-width: 640px) and (orientation : landscape),
(min--moz-device-pixel-ratio: 1.25) and (max-width: 640px) and (orientation : landscape),
(-o-min-device-pixel-ratio: 1.25/1) and (max-width: 640px) and (orientation : landscape),
(min-device-pixel-ratio: 1.25) and (max-width: 640px) and (orientation : landscape),
(min-resolution: 200dpi) and (max-width: 640px) and (orientation : landscape),
(min-resolution: 1.25dppx) and (max-width: 640px) and (orientation : landscape) {
	#article .bg, #article .tied .photo {
		height: 190px;
	}
}