/* 
* Amazium V1.3
* Copyright 2012, Mike Ballan
* www.amazium.co.uk
*/

/* Testing Border */



/***** Screen 960px *****/

/***** Logo, Btn & Phone Menu Btn *****/
.header 										{margin:0; padding:0; width:100%; height:180px; text-align:center; background:url('../img/header.jpg') repeat;}


.footer											{margin:80px 0 0 0; padding:0; width:100%; height:auto; display:inline-block;background:#460034;color:#fff;}
img.bio-logo									{margin:16px 0 16px 0; width:280px; height:auto;}

a.navigation-btn 								{ display:none; float:right; }
a.navigation-btn img 							{ margin:0 0 0 16px; padding:0; width:35px; height:auto; cursor:pointer; float:right; }
/*
a.btn-download, .btn-download 					{ margin:34px 0 0 0; padding:8px 28px 9px 12px; display:inline-block; color:#fff; border:1px solid #000; background:#000 url(../images/btn-arrow.png) no-repeat right; cursor:pointer; float:right; }
a:hover.btn-download 							{ text-decoration:none; border:1px solid #000; color:#666; background:#000 url(../images/btn-arrow.png) no-repeat right; }
*/


/*** sumj Default ***/
.top-corner										{float:right; position:relative; clear:all; float:right;margin:20px 0 0 0; height:80px; width:100%; display:block;cursor:default;}

.right											{float:right; width:100%;text-align:right;}
.float-r										{float:right;}
.gird-top										{margin-top:10px;}
.screen-rounded									{-moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px;}
.float-left {
    shape-outside: polygon(0% 50%, 50% 100%, 0 100%);
    transform: skewX(-55.98deg);
  }




/*** main ***/
.banner 				{margin:0 0 0 0; padding:0; width:100%; height:300px; text-align:center; display:inline-block; background:#dadada;}
img.s-mask 				{-webkit-mask-image: url(../img/mask-screen.png);}
.cont					{font: normal 15px/28px Arial, Helvetica, sans-serif; color:#666; letter-spacing:2px; display:block; max-width:500px; cursor:default;}
.title					{ display:inline-block; width:241px;}
.abt-icon				{ display:inline-block; width:336px;}
.timeline				{ margin:100px 0 0 0; width:450px;}
.paully					{width:445px;}

/*** scope ***/
.scp-icon				{ display:inline-block; width:350px; height:auto;}
a.more-btn				{ display:inline-block; width:103px; height:40px; background:url(../img/more.png) no-repeat; color:#fff; line-height:18px; text-align:center; letter-spacing:1px;  margin:0 0 50px 0; padding:7px 0 0 0px; text-decoration:none;cursor:pointer;}
a.more-btn:hover 		{ text-decoration:none; color:#ddd;}
.floarR					{ float:right;}

/*** Train ***/
.setCenter				{text-align:center;}
.train					{width:250px;}
.gird-footer			{margin-top:200px;}

/*** training ***/
.cont2					{font: normal 15px/28px Arial, Helvetica, sans-serif; color:#666; letter-spacing:2px; display:block;  cursor:default;}

/*** product ***/
.pd-title				{font: normal 15px/18px Arial, Helvetica, sans-serif; color: #662D80; letter-spacing: 3px; display: block; margin:10px 0;}
.en						{letter-spacing:1px;}
.pd						{cursor:pointer;}
.pdBox					{width:250px;}
.pd-cont h4				{font: normal 20px/28px Arial, Helvetica, sans-serif; color:#662D80; letter-spacing:5px;}
.price					{font: normal 16px/20px Arial, Helvetica, sans-serif; color:#662D80; letter-spacing:2px;}
.ml						{font: normal 14px/20px Arial, Helvetica, sans-serif; color:#666; letter-spacing:2px;}
.pd-cont				{font: normal 13px/25px Arial, Helvetica, sans-serif; color:#666; letter-spacing:2px; display:block; cursor:default;cursor:default; margin:70px 0 200px; 0;}
.pd-cont h5				{font: bolder 13px/25px Arial, Helvetica, sans-serif; color:#666;margin:20px 0 0 0;}
.pd-cont ol				{margin:10px 0 0 0px; padding:0 0 0 30px; list-style:none; padding:0; margin:0;}
.pd-cont ol.onlyone		{margin:10px 0 0 0px; padding:0 0 0 0px; list-style:none;}
.pd-cont ol li			{font: normal 13px/25px Arial, Helvetica, sans-serif; color:#666;}
.pd-cont-pic			{width:347px;}
.pd-detail				{display:inline-block; position:relative;}

/*** recruit ***/
h3 						{font: normal 25px/28px Arial, Helvetica, sans-serif; color: #662D80; letter-spacing: 5px; cursor:default;}

/*** contact ***/
.h500					{height:600px;}
.r-logo					{display:block; margin:50px 0 0px 0;}


/*.pd-effect			{background:url(../img/pd-bg) no-repeat; background-size: 100% 100%; background-position:center center;}*/
.pd-effect:hover		{background:url(../img/pd-bg) no-repeat; background-size: 100% 120%; background-position:center center;}

/*** recruit ***/
.gird-top50				{margin-top:50px;}
ul.recruit 				{font: normal 15px/28px Arial, Helvetica, sans-serif; color:#666; letter-spacing:2px; cursor:default;}
ul.recruit ul li		{display:inline-block; float:left; width:200px;}
ul.recruit ul li.rLast	{width:60%;}


/*OLD*/
	.sub-border	{margin:4px 0 8px 0; height:5px; background:#4b306f; width:100%}
	.sub-fb-border {margin:4px 0 8px 0; height:5px; background:url(../img/sub-fb-border.png);background-position: 0px 2px; width:100%}
	.sub-pic {border:1px solid #8E8E8E; width:284px;}
	.sub-title {width:180px;}
	ul.sub-box {margin:5px 0 0 0; padding:0; cursor:default;min-height:80px;}
	ul.sub-box li{display:inline-block; width:42%; maring: 3px 0 0 0; color:#808080; font-size:10px; background-image:url(../img/arrow.gif);background-repeat: no-repeat; background-position: 0px 3px; padding:0 0 0 12px; }
	.btn-more { float:right; margin:10px 0 10px 0;}
	.fb-news{margin:10px 0 0 0; width:100%;}
	.poster{width:250px; background:#45286a; padding:0 10px 10px 0;margin:10px 0 0 10px;}
	.sub-icon{width:12; margin:20px 0 0 10px; display:block; width:262px;height:55px; border-top:1px solid #a8a8a8; border-left:1px solid #a8a8a8; border-right:1px solid #a8a8a8; border-bottom:2px solid #45286a; background:url(../img/sub-bg.jpg) no-repeat;}
	.sub-icon h4{margin:18px 0 0 10px; font: normal 14px / 16px Arial, Helvetica, sans-serif; letter-spacing:5px; color:#464647; text-decoration:none;}
	a.sub-icon:hover{ text-decoration:none;}
/*OLD*/
 

.footer-nav {width:100%; text-align:left; margin:10px 0 0 0; padding:0 0 10px 0;}
.footer-nav a{color:#fff; font: normal 11px / 14px Arial, Helvetica, sans-serif; margin:0 15px 0 0; text-decoration:none; letter-spacing:3px;}
.footer-nav a:hover,.footer-nav a.current{ text-decoration:underline;}
.caring { float:right; margin: 15px 20px 0 0;}
.f-logo { float:left; margin:0 30px 0 0;}
.copyright {display:block;width:100%;margin:0px 0 20px 0; font: normal 11px / 18px Arial, Helvetica, sans-serif; letter-spacing:0px; cursor:default;}

.cs-box {margin:15px 0 0 0; border:0px solid #fff; cursor:default;}
ul.f-box{margin:0; padding:0; list-style:none;}
ul.f-box li{float:left; margin:0 20px 0 0;}

.icon-logo{margin:0 0 0 -18px;}
.f-right{text-align:right;}
.t-300	{margin-top:100px;}
.f-logo-box {margin:15px 0 0 0; text-align:right;}
.f-logo-box img{display:inline-block; margin:5px 0 0 30px;}


/***** Navigation *****/
#lang-menu										{display:block; position:absolute; right:-20px; width:150px; height:18px; margin:10px 20px 0 0; z-index:99999;}
#lang-menu a									{padding:0; text-decoration:none; color:#fff; font-size:12px; letter-spacing:2px;}
#lang-menu a:hover, #lang-menu a.current		{ padding:0; text-decoration:none; color:#bbb; }

.beauty-logo									{width:163px; height:163px; background:url('../img/beauty-logo.png') no-repeat; margin:0; padding:0;}
.topmenu										{ text-align:center; padding:0; margin:0; overflow:hidden; display:inline-block;color:#fff;}


ul.menu											{list-style:none; padding:0; height:180px; margin: 0 auto; font-size:12px;}
ul.menu li										{display:inline-block; margin:0; padding:0; text-align:center; border-right:1px solid #fff;}
ul.menu li span									{font: normal 13px / 13px Arial, Helvetica, sans-serif; letter-spacing:5px;}
ul.menu li span.en								{font: normal 12px / 13px Arial, Helvetica, sans-serif; letter-spacing:2px;}
ul.menu li a									{display:inline-block; width:120px; padding:0; text-decoration:none; color:#fff; font-size:8px; letter-spacing:1px;}
ul.menu li.nb									{border-right:0px solid #fff;}
ul.menu li a:hover,
ul.menu li a.current							{ padding:0; text-decoration:none; color:#bf639c; }


.navigation										{text-align:center; padding:0; margin:0; overflow:hidden; display:inline-block;color:#fff;}
ul.nav											{list-style:none; padding:0; height:180px; margin: 0 auto; font-size:12px;}
ul.nav li										{display:inline-block; margin:0 0 0 0px; padding:0; text-align:center; border-right:1px solid #fff;}
ul.nav li span									{font: normal 13px / 18px Arial, Helvetica, sans-serif; letter-spacing:5px;}
ul.nav li a										{display:inline-block; width:120px; padding:0; text-decoration:none; color:#fff; font-size:8px; letter-spacing:1px; line-height:3em;}
ul.nav li.nb									{border-right:0px solid #fff;}
ul.nav li a:hover,
ul.nav li a.current								{ padding:0; text-decoration:none; color:#bf639c; }

/***** Example *****/
.top			 								{ margin:0 auto; margin-top:30px; }	
.base											{ margin:0 auto; margin-bottom:40px; }	
span.example									{ margin-bottom:5px; padding:5px 0 5px 0; background-color:#eee; text-align:center; width:100%; display:block; }




/***** Screen Bigger than 960px *****/
/*
@media only screen and (min-width:1200px) {
.example										{ margin:0; padding:0; }


.sub-pic {border:1px solid #8E8E8E; width:358px;}
.sub-title {width:220px;}
ul.sub-box li{display:inline-block; width:28%; maring:3px 0 0 0;}
}
*/


/***** Tablet (Smaller than 959px) *****/
@media only screen and (min-width: 768px) and (max-width: 959px) {

/***** Logo, Btn & Phone Menu Btn *****/

img.bio-logo									{ margin:16px 0 0 0; width:230px; height:auto; }
a.btn-download, .btn-download 					{ margin:24px 0 0 0; }
.poster img										{width:220px;}
.sub-icon										{width:215px;}

/***** Navigation *****/
#lang-menu										{right:-50px;}
.beauty-logo									{width:163px; height:163px; background:url('../img/beauty-logo.png') no-repeat; float:left;}
.navigation										{text-align:center; padding:0; margin:0; overflow:hidden; display:inline-block;color:#fff;}
ul.nav											{list-style:none; padding:0; height:180px; margin:30px auto; font-size:12px;}
ul.nav li										{display:inline-block; margin:25px 0 0 0px; width:150px; padding:0; text-align:center; border-right:1px solid #fff;  border:0px solid #eee;}
ul.nav li span									{font: normal 13px / 13px Arial, Helvetica, sans-serif; letter-spacing:5px;}
ul.nav li span.en								{font: normal 12px / 13px Arial, Helvetica, sans-serif; letter-spacing:2px;}
ul.nav li a										{display:inline-block; width:120px; padding:0; text-decoration:none; color:#fff; font-size:8px; letter-spacing:1px; line-height:2em;}
ul.nav li.nb									{border-right:0px solid #fff;}

/*** main ***/
.banner 				{margin:0; padding:0; width:100%; height:239px; text-align:center; display:inline-block; background:#dadada;}
img.t-mask 				{-webkit-mask-image: url(../img/mask-tablet.png);}
.cont					{font: normal 15px/28px Arial, Helvetica, sans-serif; color:#666; letter-spacing:2px; display:block; max-width:500px;}
.title					{ display:inline-block; width:241px;}
.abt-icon				{ display:inline-block; width:336px;}
.timeline				{ margin:100px 0 0 0; width:356px;}
.paully					{width:356px;}
/*** Train ***/
.train					{width:220px;}
.gird-footer			{margin-top:200px;}
/*** Product ***/
.pdBox					{width:220px;}
.pd-effect:hover		{background:url(../img/pd-bg) no-repeat; background-size: 109% 115%; background-position:center center;}
.pd-cont-pic			{width:300px;}

}



/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 767px) {

/***** Logo, Btn & Phone Menu Btn *****/
.copyright {margin:10px 0 20px 0;}
.footer {height:auto;}
img.bio-logo								{ margin:6px 0 16px 0;  width:216px; height:auto;  float:left;}

a.navigation-btn 								{ margin:10px 10px 0 0; display:inline-block;}

a.btn-download, .btn-download 					{ margin:0; }

/***** Navigation *****/
#lang-menu										{top:260px; right:-55px;}
.header 										{height:300px; text-align:center;  background:url('../img/header.jpg') repeat;}
.beauty-logo									{margin:0 0 0 70px; width:163px; height:163px; background:url('../img/beauty-logo.png') no-repeat;}
.navigation										{text-align:center; padding:0; margin:0; overflow:hidden; display:inline-block;color:#fff;	}
ul.nav											{inlist-style:none; padding:0; margin:10px 0 0 0; height:160px;  font-size:12px;}
ul.nav li										{display:inline-block; margin:20px 5px 0 0;  padding:0; text-align:center; border-right:0px solid; border:0px solid #333;}
ul.nav li span									{font: normal 11px / 11px Arial, Helvetica, sans-serif; letter-spacing:5px;}
ul.nav li span.en								{font: normal 12px / 13px Arial, Helvetica, sans-serif; letter-spacing:2px;}
ul.nav li a										{display:inline-block; width:90px; padding:0; text-decoration:none; color:#fff; font-size:8px; letter-spacing:1px; line-height:1.5em;}
ul.nav li.nb									{border-right:0px solid #fff;}

/*** main ***/
.banner					{height:198px;}
.cont					{font: normal 15px/28px Arial, Helvetica, sans-serif; color:#666; letter-spacing:2px; display:block; max-width:500px;}
.title					{ display:inline-block; width:150px;}
.abt-icon				{ display:inline-block; width:280px; float:left; margin:0 0 30px 20px;}
.gird-top				{margin-top:30px;}

/*** scope ***/
.scp-icon				{ display:inline-block; width:300px; height:auto;}
.box img				{ margin:0 10px 0 0; float:left; width:80px; height:auto; }
/*** Train ***/
.train					{width:220px; margin:0 0 80px 0;}
.gird-footer			{margin-top:20px;}
/*** Product ***/
.pdBox					{width:220px;margin:80px 0 0 0;}
.pd-effect:hover		{background:url(../img/pd-bg) no-repeat; background-size: 105% 105%; background-position:80% -180%;}
.pd-cont-pic			{width:280px; margin:100px 0 0 0;}

/*** main ***/
.sub-pic {border:1px solid #8E8E8E; width:300px;}
.sub-title {width:200px; margin:20px 0 0 10px;}
ul.sub-box li{display:inline-block; width:42%; maring: 3px 0 0 0}
.gird-top				{margin-top:30px;}
.timeline				{margin:20px 0 0 0; width:300px;}
.paully					{margin:40px 0 0 0; width:300px;}
}


	
/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px){
.copyright {margin:0 0 20px 0;}
.footer {height:auto;}
/***** Navigation *****/
#lang-menu										{top:145px; right:-58px; }
.header 										{margin:0; padding:0; width:100%; height:180px; text-align:center;  background:url('../img/header.jpg') repeat;}
.beauty-logo									{margin:0; width:163px; height:158px; background:url('../img/beauty-logo.png') no-repeat; float:left;}
.navigation										{text-align:center; padding:0; margin:0; overflow:hidden; display:inline-block;color:#fff;}
ul.nav											{list-style:none; padding:0; height:180px; margin:25px auto; font-size:12px;}
												
ul.nav li										{display:inline-block; margin:15px 0 0 0px; padding:0; text-align:center; border-bottom:0px solid #888; border-right:0px solid;}
ul.nav li span									{font: normal 12px / 13px Arial, Helvetica, sans-serif; letter-spacing:5px;}
ul.nav li span.en								{font: normal 12px / 13px Arial, Helvetica, sans-serif; letter-spacing:2px;}											
ul.nav li a										{display:inline-block; width:100px;  padding:0; text-decoration:none; color:#fff; font-size:8px; letter-spacing:1px; line-height:1.6em;}
ul.nav li.nb									{border-bottom:0px solid #fff;}

/*** main ***/
.banner					{height:300px;}
.cont					{font: normal 15px/28px Arial, Helvetica, sans-serif; color:#666; letter-spacing:2px; display:block; max-width:500px;}
.title					{margin:20px 0 0 0; display:inline-block; width:241px;}
.abt-icon				{ display:inline-block; width:336px; float:left; margin:0 0 10px 60px;}
.gird-top				{margin-top:30px;}
.timeline				{margin:20px 0 0 0; width:356px;}
.paully					{margin:80px 0 0 0; width:356px;}
/*** scope ***/
.scp-icon				{ display:inline-block; width:350px; height:auto;}
/*** Product ***/
.pd-effect:hover		{background:url(../img/pd-bg) no-repeat; background-size: 70% 105%; background-position:50% -180%;}
}



/***** Retina *****/
@media only screen and (-webkit-min-device-pixel-ratio:1.5) {

.example										{ margin:0; padding:0; }

}