@charset "UTF-8";
/* CSS Document */


/* ================================================================ */
/*                           MEN & WOMEN                            */
/* ================================================================ */

/* ----------- Header ------------ */
.category_header{
	width:100%;
}

.categorytitle{
	width:100%;
	padding:40px 0 15px 0;
	position:relative;
	border-bottom:1px solid #000;
	margin-bottom:0px;
}
.categorytitle .sex{
	width:100%;
	max-width:1300px;
	margin: 0 auto;
	text-align:left;
	text-indent:2%;
	padding:0 0 15px 0;
}
.categorytitle .sex img{ width:auto; height:37px;}

.category_header h1{
	font-family: Helvetica , 'Helvetica Neue', 'Roboto', sans-serif;
	font-weight:300;
	font-size:3.5em;
	line-height:1.2;
	margin-top:60px;
	margin-bottom:25px;
}
.category_header h2{
	margin:5px 0 17px 0;
}
.category_header h3{
	line-height:1.7;
	font-size:1.2em;
		width:90%;
	margin:0 auto;
	
}

@media screen and (max-width: 768px) {
.category_header{margin-top:30px;}
.category_header h1{ font-size:3.2em;}
.categorytitle{ padding:30px 0 20px 0;}
.categorytitle .sex{padding:7px 0 8px 0; text-align:center; text-indent:0;}
.categorytitle .sex img{ width:auto; height:35px;}
}
@media screen and (max-width: 600px) {
.category_header{margin-top:30px;}
.category_header h1{ font-size:3.0em;}
}
@media screen and (max-width: 519px) {
.categorytitle .sex img{ width:auto; height:32px;}
.category_header h1{font-size:2.3em;margin-bottom:13px;}
.category_header h3{

	line-height:1.6;
	text-align:left;
	font-size:1.1em;
}
.category_header h3 br{ display:none;}
}



/* -------- CategoryMenu --------- */

.submenu{
	width:100%;
}

ul.productsmenu{
	width:95%;
	max-width:960px;
	margin:0 auto;
}

ul.productsmenu li{
	width:50%;
	float:left;
}



.womenNavi ul.productsmenu li{
	width:33.33333333% !important;
	float:left;
}

ul.productsmenu li.last{
	background:url(../../men/images/menu_line02.gif) right 0px no-repeat;
}

.productsmenu a{
	display:block;
	font-size:0.80em;
	line-height:1.4;
	color:#999;
	padding:10px 5px 6px 5px;
	background:url(../../men/images/menu_line02.gif) 0 0px no-repeat;
	
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	overflow: hidden;  
}
.productsmenu a:before {
	content: "";
	position:absolute;
	z-index: -1;
	left:50%;
	right:50%;
	top:0%;
	margin-top:1px;
	background:#666;
	height:1px;
	-webkit-transition-property: left, right;
	transition-property: left, right;
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
.productsmenu a.onmouse:before{
	left: 0;
	right: 0;
}
.productsmenu a span{
	font-family: Helvetica , 'Helvetica Neue', 'Roboto', sans-serif;
	font-size:1.5em;
	font-weight:400;
	color:#191919;
	-webkit-transition:color 0.2s;
	-moz-transition:color 0.2s;
	-ms-transition:color 0.2s;
	transition:color 0.2s;
}
.productsmenu a.onmouse span{
	color:#999;
}

.men_socks .itemlist,
.women_socks .itemlist{
	margin-top:40px;
}


/*current*/
/*
.men_compression .productsmenu .compression a,
.men_undewear .productsmenu .undewear a,
.men_socks .productsmenu .socks a,
.men_outer .productsmenu .outer a,
.men_acc .productsmenu .acc a,
.men_bike .productsmenu .bike a,
.men_golf .productsmenu .golf a,
.men_winter .productsmenu .winter a,
.women_compression .productsmenu .compression a,
.women_undewear .productsmenu .undewear a,
.women_socks .productsmenu .socks a,
.women_outer .productsmenu .outer a,
.women_acc .productsmenu .acc a,
.women_bike .productsmenu .bike a,
.women_golf .productsmenu .golf a,
.women_winter .productsmenu .winter a{
	border-top-color:#000;
}
*/


.mobilemenu{ display:none;}
.mb_subTrigger{ display:none;}


@media screen and (max-width: 820px) {
.productsmenu a span{ font-size:1.3em; }
.productsmenu a:before {margin-top:0px;}
}

@media screen and (max-width: 768px) {
.submenu{ display:none;}

/* mb submenu Trigger */
.mb_subTrigger{
	display:block;
	width:100%;
	background:#E6E6E6;
	position:fixed;
	z-index:1001;
	height:40px;
	top:65px;
	left:0;
	text-align:left;
	cursor:pointer;
}
.mb_subTrigger p{
	font-family: Helvetica , 'Helvetica Neue', 'Roboto', sans-serif;
	font-size:1.2em;
	font-weight:300;
	position:absolute;
	top:50%;
	margin-top:-0.6em;
	left:10px;
}
.mb_subTrigger span{
	height:0px;
	width:0px;
	border-top:#999 10px solid;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-bottom:10px solid transparent;
	position:absolute;
	top:15px;
	right:17px;
}
.mb_subTrigger.active span{
	border-top:10px solid transparent;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-bottom:#999 10px solid;
	top:0px;
}



/* mb submenu */

.mobilemenu{
	display:none;
	width:100%;
	background:#262626;
	position:fixed;
	top:105px;
	z-index:1000;
}
ul.mb_submenu{}
ul.mb_submenu li{
	width:100%;
	border-bottom:1px solid #666;
}
.mb_submenu a{
	display:block;
	padding:18px 0;
	font-size:0.9em;
	text-align:center;
	text-indent:10px;
	color:#FFF;
}
.mb_submenu a span{
	font-family: Helvetica , 'Helvetica Neue', 'Roboto', sans-serif;
	font-size:1.4em;
	font-weight:400;
}
.mb_submenu a:hover{
	background:#454545;
}

}


/* -------- Other menu --------- */

ul.othermenu{
	display:inline-block;
	width:90%;
	margin:0 auto;
	text-align:center;
	margin-top:50px;
}
ul.othermenu li{
	display:inline-block;
	margin:0;
	padding:0 10px 0 10px;
	margin-bottom:7px;
	line-height:1.2;
	border-right:1px solid #E6E6E6;
}
ul.othermenu li.top{
	border-left:1px solid #E6E6E6;
}
ul.othermenu li a{
	font-size:0.9em;
	line-height:1.2;
}
ul.othermenu li a:hover{
	color:#666;
}
@media screen and (max-width: 600px) {
.mb_subTrigger{top:50px;}
}

@media screen and (max-width: 519px) {
ul.othermenu li.mid{
	display:inline-block;
	border-left:1px solid #E6E6E6;
	margin:0 15%;
}
.men_socks .itemlist,
.women_socks .itemlist{
	margin-top:30px;
}
}





/* -------- Second Category Title --------- */

.second_catogry{
	width:100%;
	background:#F0F0F0;
	text-align:left;
	margin-top:60px;
	margin-bottom:1%;
	position:relative;
}
.second_catogry .categoryIn{
	width:100%;
	max-width:1320px;
	margin:0 auto;
	padding:15px 0;
}
.ie8 .second_catogry .categoryIn{
	max-width:1200px;
	min-width:1200px;
}

.second_catogry h2{
	margin-left:1%;
}
.second_catogry h2 span{
	font-family: Helvetica , 'Helvetica Neue', 'Roboto', sans-serif;
	font-size:2.5em;
	font-weight:300;
	vertical-align:sub;
}
.second_catogry h2 b{
	font-weight:normal;
	border-left:1px solid #000;
	margin-left:1em;
	padding-left:1em;
}


@media screen and (max-width: 768px) {
.second_catogry h2{ width:100%; text-align:center; margin:0;}
.second_catogry h2 span{ font-size:2.0em;}


}
@media screen and (max-width: 519px) {
.second_catogry{ text-align:center; margin-top:30px;}
.second_catogry h2 b{ border:none; margin:0; padding:0;}
}

.second_catogry:after,
.second_catogry .categoryIn:after{
	content: "";
	display: table;
	float:none;
	clear: both;
}




/* -------- Item List --------- */

.itemlist{
	width:100%;
	max-width:1320px;
	margin:0 auto;
	text-align:left;
}
.ie8 .itemlist{
	max-width:1200px;
	min-width:1200px;
}

.itemlist ul{
}
.itemlist ul li{
	text-align:center;
	width:18%;
	margin:1%;
	float:left;
	position:relative;
	font-size:1.0em;
	-moz-box-shadow: 0 0 0 1px #CCC inset;
	-o-box-shadow: 0 0 0 1px #CCC inset;
	-ms-box-shadow: 0 0 0 1px #CCC inset;
	box-shadow: 0 0 0 1px #CCC inset;
}
.ie8 .itemlist ul li{
	border:1px solid #CCC;
	width:17.83%;
}

.itemlist ul li a{
	width:100%;
	height:100%;
	display:block;
	-webkit-transition:opacity 0.2s;
	   -moz-transition:opacity 0.2s;
	        transition:opacity 0.2s;
}
.itemlist ul li a:hover{
	filter:alpha(opacity=60);
	-webkit-opacity:0.6;
	   -moz-opacity:0.6;
	        opacity:0.6;
	
}








.itemlist li .itemimg{
	width:85%;
	margin:5% auto;
}
.itemlist li .itemimg img{
	width:100%
}
.itemlist li h3{
	width:92%;
	height:4em;
	margin:0 auto;
	line-height:1.3;
	text-align:left;
}
.itemlist li h4{
	width:92%;
	margin:0 auto;
	line-height:1.0;
	padding:0 0 3% 0;
	text-align:left;
}
.itemlist li .itemsex{
	font-family: 'Roboto', sans-serif;
	font-size:1.6em;
	font-weight:100;
	line-height:1;
	position:absolute;
	bottom:0;
	right:2px;
}
.itemlist li .icon{
	line-height:1;
	position:absolute;
	top:0;
	right:0;
	z-index:100;
	width:25px;
}
.itemlist li .icon.warm{
	width:50px;
}
.itemlist li .madical{
	line-height:1;
	position:absolute;
	top:27px;
	right:3px;
	display:inline-block;
	border:1px solid #999;
	z-index:100;
	font-size:0.9em;
	padding:1px;
	text-align:center;
}


.itemlist .colortip{
	margin:0 auto;
	margin-bottom:5px;
	text-align:center;
	display:inline-block;
	line-height:1;

}
.itemlist .colortip li{
	width:16px;
	height:16px;
	border:none;
	margin:0 1px;
	float:left;
	-moz-box-shadow: 0 0 0 0px #CCC inset;
	-o-box-shadow: 0 0 0 0px #CCC inset;
	-ms-box-shadow: 0 0 0 0px #CCC inset;
	box-shadow: 0 0 0 0px #CCC inset;
}
.itemlist .colortip li img{
	width:100%;
	height:auto;
}





@media screen and (max-width: 1340px) {
.second_catogry .categoryIn{width:98%;}
.second_catogry h2{ margin-left:1%;}
.itemlist{width:98%;}
}
@media screen and (max-width: 1150px) {
.itemlist ul li{ width:23%; margin:1%;}
}
@media screen and (max-width: 890px) {
.itemlist ul li{ width:31.1%; margin:1.1%;}
}
@media screen and (max-width: 630px) {
.itemlist ul li{ width:47%; margin:1.5%;}
.itemlist li .itemsex{ font-size:1.4em;}
.itemlist .colortip li{ width:14px; height:14px;}
}

@media screen and (max-width: 400px) {
.itemlist h3.fontmini{ font-size:0.9em; height:3.4em;}
}
@media screen and (max-width: 330px) {
.itemlist h3.fontmini{ font-size:0.8em; height:3.6em; letter-spacing:-0.05em;}
}


/* -------- FancyBox Pup UP --------- */


#attention{
	text-align:left;
	padding:2.5%;
}
#attention h2{
	font-size:1.4em;
	padding-bottom:5px;
}
#attention h3{
	font-size:1.2em;
	color:#C00;
	padding:2% 0 1% 0;
}
#attention .note{
	font-size:0.85em;
	margin-top:1%;
}
#wash{
	width:400px;
	padding:8% 0;
	
	text-align:center;

}
#wash h2{
	font-size:1.4em;
	padding-bottom:5px;
}
#wash .image{
	margin:0 auto;
	margin-top:10px;
}


@media screen and (max-width: 768px) {
#attention{padding:4%;}
#attention .copy br{ display:none;}
#attention h3 br{ display:none;}
}

@media screen and (max-width: 519px) {
#attention{padding:5%;}
#attention h2{ width:100%; text-align:center; padding-bottom:4%;}
#wash{width:inherit;}
#wash .image{width:90%;}
#wash .image img{width:100%;}

}




ul.productsmenu:after,
.itemlist:after,
.itemlist ul:after,
.itemlist .colortip:after{
	content: "";
	display: table;
	float:none;
	clear: both;
}








/* -------- Type Info --------- */

.typeinfo{
	margin:0 auto;
	width:100%;
	max-width:850px;
	margin-top:50px;
}

.typeinfo .bar{
	width:98%;
	margin:0 auto;
	position:relative;
	font-size:1.1em;
	color:#FFF;
	font-weight:500;
	line-height:1;
}
.typeinfo .bar .barimg{
	position:relative;
	z-index:1;
}
.typeinfo .bar img{
	width:100%;
	height:25px;
}

.typeinfo .bar .comf{
	position:absolute;
	top:50%;
	margin-top:-0.5em;
	left:0.5em;
	z-index:10;
}

.typeinfo .bar .supp{
	position:absolute;
	top:50%;
	margin-top:-0.5em;
	right:0.5em;
	z-index:10;
}






.typeinfo ul{
	width:90%;
	margin:0 auto;
	margin-top:15px;
}

.typeinfo ul li{
	float:left;
	width:45%;
	margin-right:10%;
	text-align:left;
	position:relative;

}
.typeinfo ul li .left{
	width:57%;
	position:absolute;
	left:0;
	top:50%;
	margin-top:-3em;

	
}
.typeinfo ul li .right{
	width:47%;
	float:right;
}
.typeinfo ul li .left h3{
	font-weight:500;
	font-size:1.6em;
	line-height:1.1;
	padding-bottom:0.4em;
}
.typeinfo ul li .left p{
	font-size:1.2em;
	font-weight:300;
}


.typeinfo .ins{
	color:#59ADDE;
}
.typeinfo .foc{
	color:#38A985;
}
.typeinfo .ele{
	color:#FFD317;
}
.typeinfo .imp{
	color:#D01E32;
	margin-right:0 !important;
}




@media screen and (max-width: 1340px) {
.typeinfo{width:98%;}
}
@media screen and (max-width: 1150px) {


}
@media screen and (max-width: 890px) {
.typeinfo{margin-top:35px;}
.typeinfo{width:80%;}
.typeinfo .bar{ width:100%;}


.typeinfo ul li .left{
	width:100%;
	position:static;
	left:0;
	top:0%;
	margin-top:0em;
	text-align:center;
}

.typeinfo ul li .left p{ line-height:1.2; margin-top:0.2em; height:3.0em;}
.typeinfo ul li .right{width:70%;float:none; margin:0 auto;}

}
@media screen and (max-width: 630px) {
.typeinfo ul{
	width:100%;
}
.typeinfo ul li{
	width:50%;
	padding:0 10px;
	box-sizing: border-box;
	float:left;
	margin-right:0%;
	font-size:0.9em;
}

.typeinfo{width:100%;}
.typeinfo ul li .right{width:60%;}
}





.typeinfo:after,
.typeinfo ul:after,
.typeinfo ul li:after{
	content: "";
	display: table;
	float:none;
	clear: both;
}