@charset "UTF-8";

@media screen and (min-width: 751px) {

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

      I N F O B O X

*******************************************/
	#infoBox {
		height: 219px;
		width: 480px;
		overflow-y: scroll;
	}

	.jspContainer {
		overflow: hidden;
		position: relative;
	}

	.jspPane {
		position: absolute;
	}

	.jspVerticalBar {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 7px;
	}

	.jspHorizontalBar {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 16px;
	}

	.jspVerticalBar *,
	.jspHorizontalBar * {
		margin: 0;
		padding: 0;
	}

	.jspCap {
		display: none;
	}

	.jspHorizontalBar .jspCap {
		float: left;
	}

	.jspTrack {
		width: 3px;
		margin-left: 2px;
		background: #dddddd;
		position: relative;
	}

	.jspDrag {
		background: #7f7f7f;
		position: relative;
		top: 0;
		left: -2px;
		width: 7px;
		cursor: pointer;
	}

	.jspHorizontalBar .jspTrack,
	.jspHorizontalBar .jspDrag {
		float: left;
		height: 100%;
	}

	.jspArrow {
		text-indent: -20000px;
		display: block;
		cursor: pointer;
	}

	.jspArrow.jspDisabled {
		cursor: default;
	}

	.jspVerticalBar .jspArrow {
		height: 9px;
	}

	.jspHorizontalBar .jspArrow {
		width: 16px;
		float: left;
		height: 100%;
	}

	.jspVerticalBar .jspArrow:focus {
		outline: none;
	}

	.jspCorner {
		background: #eeeef4;
		height: 100%;
		float: left;
	}

	/* Yuk! CSS Hack for IE6 3 pixel bug :( */
	* html .jspCorner {
		margin: 0 -3px 0 0;
	}


	#infoBox dt {
		clear: both;
		float: left;
		padding: 10px 0px;
	}

	#infoBox dt:nth-of-type(1) {
		padding: 0 0 10px 0px;
	}

	#infoBox dd {
		padding: 10px 10px 10px 125px;
		position: relative;
		display: block;
	}

	#infoBox dd:nth-of-type(1) {
		padding: 0 10px 10px 125px
	}

	#information dd.info {
		background: url(/img/ico_info.png) 80px 15px no-repeat;
	}

	#information dd.blog {
		background: url(/img/ico_blog.png) 80px 15px no-repeat;
	}

	#information dd.info:nth-of-type(1) {
		background: url(/img/ico_info.png) 80px 5px no-repeat;
	}

	#information dd.blog:nth-of-type(1) {
		background: url(/img/ico_blog.png) 80px 5px no-repeat;
	}




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

      C O N T E N T S

*******************************************/
	#content,
	#shopping ul,
	#brand ul {
		overflow: hidden;
	}

	#content:after,
	#shopping ul:after,
	#brand ul:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
	}

	html.ha-header-large #top #header {
		background: none !important;
		z-index: 10000;
		position: fixed;
		top: 0;
		width: 100%;
		-webkit-transition: background-color 500ms ease, opacity 500ms ease;
		-moz-transition: background-color 500ms ease, opacity 500ms ease;
		-ms-transition: background-color 500ms ease, opacity 500ms ease;
		-o-transition: background-color 500ms ease, opacity 500ms ease;
		transition: background-color 500ms ease, opacity 500ms ease;
	}

	html.ha-header-small body#top {
		/*padding-top: 130px !important;*/
		padding: 0 !important;
	}

	html.ha-header-large body#top {
		padding: 0 !important;
	}

	#lo #content {
		background: url(/img/bg_separator_line.png) center 132px no-repeat;
	}

	#leftCol {
		float: left;
		width: 480px;
		padding-right: 20px;
	}

	#rightCol {
		float: right;
		width: 480px;
		padding-left: 20px;
	}

	h1 {
		margin: 0 0 15px;
	}

	#shopping,
	#information {
		margin: 0 0 100px;
	}

	#shopping a:hover img {
		filter: alpha(opacity=60);
		-moz-opacity: 0.6;
		opacity: 0.6;
	}

	#shopping ul {
		width: 500px;
		margin-right: -20px;
	}

	#shopping ul li {
		float: left;
		margin: 0 19px 10px 0;
	}

	#brand ul {
		width: 500px;
		margin-right: -20px;
	}

	#brand ul li {
		float: left;
		margin: 0 20px 10px 0;
		position: relative;
	}

	#brand ul li .brandImg img {
		display: block;
	}

	#brand ul li:hover .brandImg {
		background: #444;
	}

	#brand ul li:hover .brandImg img {
		display: block;
		opacity: 0.2;
		filter: alpha(opacity=20);
		-ms-filter: alpha(opacity=20);
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-ms-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}

	#brand ul li:hover .btnWrap {
		position: absolute;
		opacity: 1;
		filter: alpha(opacity=100);
		-ms-filter: alpha(opacity=100);
		z-index: 10;
		transform: scale(1);
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1)
	}

	#brand ul li .btnWrap {
		position: absolute;
		top: 55px;
		left: 0;
		width: 100%;
		text-align: center;
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		opacity: 0;
		filter: alpha(opacity=0);
		-ms-filter: "alpha(opacity=0)";
		-webkit-transition: all .2s linear;
		-moz-transition: all .2s linear;
		-ms-transition: all .2s linear;
		-o-transition: all .2s linear;
		transition: all .2s linear
	}

	#brand ul li .btnWrap a {
		margin: 0 0 15px;
		display: inline-block;
		height: 50px;
		width: 190px;
		-webkit-transition: all .2s linear;
		-moz-transition: all .2s linear;
		-ms-transition: all .2s linear;
		-o-transition: all .2s linear;
		transition: all .2s linear
	}

	#brand ul li .btnWrap a.concept {
		background: url(/img/btn_concept_off.png) no-repeat center top;
	}

	#brand ul li .btnWrap a.concept:hover {
		background: url(/img/btn_concept_on.png) no-repeat center top;
	}

	#brand ul li .btnWrap a.shopping {
		background: url(/img/btn_online_off.png) no-repeat center top;
	}

	#brand ul li .btnWrap a.shopping:hover {
		background: url(/img/btn_online_on.png) no-repeat center top;
	}

	#brand ul li .btnWrap a.brand {
		background: url(/img/btn_lookbook_off.png) no-repeat center top;
	}

	#brand ul li .btnWrap a.brand:hover {
		background: url(/img/btn_lookbook_on.png) no-repeat center top;
	}

	#feature ul li {
		margin: 0 0 10px;
		position: relative;
	}

	#feature ul li .featureImg img {
		display: block;
	}

	#feature ul li:hover .featureImg {
		background: #444;
	}

	#feature ul li:hover .featureImg img {
		display: block;
		opacity: 0.2;
		filter: alpha(opacity=20);
		-ms-filter: alpha(opacity=20);
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-ms-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}

	#feature ul li:hover .featureTxt {
		position: absolute;
		opacity: 1;
		filter: alpha(opacity=100);
		-ms-filter: alpha(opacity=100);
		z-index: 10;
	}

	#feature ul li .featureTxt {
		padding: 30px;
		height: 190px;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		filter: alpha(opacity=0);
		-ms-filter: "alpha(opacity=0)";
		-webkit-transition: all .2s linear;
		-moz-transition: all .2s linear;
		-ms-transition: all .2s linear;
		-o-transition: all .2s linear;
		transition: all .2s linear
	}

	#feature ul li:hover .featureTxt {
		color: #ffffff;
		padding: 30px;
	}

}





















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

	#shopping ul,
	#brand ul {
		overflow: hidden;
	}

	#shopping ul:after,
	#brand ul:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
	}

	#content {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-box;
		display: -o-box;
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		box-orient: vertical;
	}

	#leftCol {
		-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		-ms-box-ordinal-group: 2;
		-o-box-ordinal-group: 2;
	}

	#rightCol {
		-webkit-box-ordinal-group: 1;
		-moz-box-ordinal-group: 1;
		-ms-box-ordinal-group: 1;
		-o-box-ordinal-group: 1;
	}

	#information dl {
		border-bottom: 1px solid #cccccc;
	}

	#information dt {
		border-top: 1px solid #cccccc;
		padding: 10px 0 0 0;
	}

	/*
#information dt:nth-child(n+11){
	display: none;}
#information dd:nth-child(n+12){
	display: none;}
*/
	#information dt.info:before {
		content: "INFO";
		color: #ffffff;
		background: #A57F10;
		padding: 2px 3px;
		margin-right: 5px;
		font-size: 70%;
	}

	#information dt.blog:before {
		content: "BLOG";
		color: #ffffff;
		background: #10456A;
		padding: 2px 3px;
		margin-right: 5px;
		font-size: 70%;
	}

	#information dd {
		padding: 0 0 10px 0;
		font-size: 80%;
	}

	h1 {
		margin: 0 0 10px;
	}

	#content section {
		margin: 0 0 40px;
	}

	#feature h2 {
		font-size: 1.1em;
		font-weight: 800;
	}

	#feature ul li {
		margin: 0 0 20px;
	}

	#brand {
		margin: 0 !important;
	}

	#shopping ul,
	#brand ul {
		display: table;
	}

	#shopping ul li,
	#brand ul li {
		display: table-cell;
		width: 48%;
		float: left;
	}

	#shopping ul li:nth-child(1),
	#shopping ul li:nth-child(2),
	#shopping ul li:nth-child(5),
	#shopping ul li:nth-child(6),
	#shopping ul li:nth-child(9),
	#shopping ul li:nth-child(10) {
		margin: 0 4% 4% 0;
	}

	#shopping ul li:nth-child(3),
	#shopping ul li:nth-child(4),
	#shopping ul li:nth-child(7),
	#shopping ul li:nth-child(8),
	#shopping ul li:nth-child(11),
	#shopping ul li:nth-child(12) {
		margin: 0 0 4% 0;
	}

	#brand ul li:nth-child(odd) {
		margin: 0 4% 4% 0;
	}

	#brand ul li:nth-child(even) {
		margin: 0 0 4% 0;
	}

	#brand ul li p:before {
		content: "- ";
	}

	.jspContainer {
		height: 240px !important;
		overflow: scroll;
	}

}