@charset "utf-8";
/* CSS Document */

@import url('/fonts/fonts.css');

html, body {
  font-family: 'Archivo Narrow', Arial, sans-serif;
	font-size: 16px;
	color:#202020;
	background:#ffffff;
	
	margin:0px;
	padding:0px;
}

* {box-sizing: border-box;}
img {border:0px;}

#main_content_header {
	position:fixed;
	top:40px;
	left:0px;
	z-index: 100;
	
	width:100%;
	height:80px;
	background:#f8f8f8;
	
	border-bottom:1px solid #d7d7d7;
}

#main_content_header a.logo {
	float:left;
	margin-left:30px;
	margin-top:16px;
}

#main_content_header a.logo img {
	width:176px;
	height:87px;
}

#main_content_header div.search {
	float:left;
	margin-top:31px;
	margin-left:390px;
	
	color:#a1a1a1;
}

#main_content_header div.search input {
	display:block;
	float:left;
	width:300px;
	
	border:none;
	background:#f8f8f8;
	
	color:#a1a1a1;
	font-size:15px;
	font-weight:bold;
	line-height:18px;
	
	border-bottom:1px solid #f8f8f8;
		
	transition:border-color ease 0.2s;
}

#main_content_header div.search input:focus {
	color:#0072bb;
	border-bottom:1px solid #0072bb;
}

#main_content_header div.search div.icon {
	display:block;
	float:left;
	
	width:20px;
	height:20px;
	
	margin-top:2px;
	margin-right:15px;
	
	background:url(images/icon_search.png) no-repeat;
	background-position:top;
}

#main_content_header div.search div.icon.focus {
	background-position:bottom;
}

#main_content_header div.user_container {
	float:right;
	margin-right:155px;
	
	font-weight:500;
}

#main_content_header div.user_container a {
	float:left;
	margin-left:30px;
	margin-top:31px;
	color:#a1a1a1;
	text-decoration:none;
}

#main_content_header div.user_container a:first-child {
	margin-left:0px;
}

#main_content_header div.user_container a:hover {
	color:#333;
	text-decoration:none;
}

#main_content_header a.profile {
	float:left;
	display:block;
	height:26px;
	
	text-transform:uppercase;
		
	padding-left:37px;
	padding-top:6px;
	margin-top:25px !important;
	
	background:url(images/icon_profile.png) no-repeat;
	background-position:top left;
}

#main_content_header a.profile:hover {
	background-position:bottom left;
}

#main_content_header a.cart {
	float:left;
	display:block;
	width:23px;
	height:31px;
	overflow:hidden;
	
	color:#FFF !important;
	text-align:right;
	text-decoration:none;
	line-height:21px;
	
	margin-top:20px !important;
	
	padding-top:1px;
	padding-left:21px;
	
	background:url(images/icon_cart.png) no-repeat top right;
	background-position:top;
}

#main_content_header a.cart span {
	display:block;
	width:23px;
	text-align:center;
}

#main_content_header a.cart:hover {
	background-position:bottom;
}

div.main_wrapper {
  display: flex;
	justify-content:center;
  min-height: calc(100vh - 120px + 57px);
	
	padding-top:160px;
}

#main_content {
	width:100%;
	max-width: 1310px;
	
	padding:30px;
	
	transition:width ease 0.3s;
}

#main_content.cart_open {
	width:calc(100% - 650px);
}

/*//////////////////////*/
/*side cart*/
#side_cart {
	display:flex;
	float:right;
	
	background:#FFF;
	width:52px; /*cart open 370px*/
	overflow:hidden;
	
	margin-top:0px;
	
	transition:width ease 0.3s/*, margin-top 0.3s*/;
}

#side_cart div.title_lane {
	display:block;
	float:left;
	width:50px;
	
	font-weight:500;
	color:#a1a1a1;
	font-size:18px;
	cursor:pointer;
	
	border-left:1px solid #d7d7d7;
	border-right:1px solid #d7d7d7;
}

#side_cart div.title_lane span {
	display:inline-block;
	
	transform:rotate(-90deg);
	white-space: nowrap;
	margin-top:60px;
	margin-left:-32px;
}

#side_cart div.title_lane div.close_img {
	opacity:0;
	width:27px;
	height:0px;
	overflow:hidden;
	
	margin-top:15px;
	margin-left:11px;
	
	background:url(/images/icon_side_close.png) no-repeat;
	background-position:top;
	
	transition:height ease 0.3s, opacity ease 0.3s;
}

#side_cart div.title_lane:hover span {
	color:#333;
}

#side_cart div.title_lane:hover div.close_img {
	background-position:bottom;
}

#side_cart div.content {
	display:block;
	float:left;
	width:0px; /*cart close 270px*/
	overflow:hidden;
	
	padding:30px 20px;
	
	transition:width ease 0.3s;
}

#side_cart.cart_open {
	width:320px; /*cart close 52px*/
}

#side_cart.cart_open div.title_lane div.close_img {
	height:22px;
	opacity:1;
}

#side_cart.cart_open div.content {
	width:270px; /*cart close 0px*/
}

#side_cart div.content div.cart_empty,
#side_cart div.content div.cart_full {
	display:block;
	width:230px;
}

#side_cart div.content div.cart_empty {
	text-align:center;
}

#side_cart table.tbl_cart_art_list {
	border-collapse:collapse;
	width:100%;
	margin-bottom:20px;
}

#side_cart table.tbl_cart_art_list a {
	color:#232b3e;
}

#side_cart table.tbl_cart_art_list tr {
	border-bottom:1px solid #a4a4a4;
}

#side_cart table.tbl_cart_art_list td {
	padding:15px 0px;
}

#side_cart table.tbl_cart_art_list tr:last-child {
	border-bottom:none;
}

#side_cart table.tbl_cart_art_list td.title {
	
}

#side_cart table.tbl_cart_art_list td.icon {
	text-align:right;
}

#side_cart table.tbl_cart_art_list td.icon a {
	
}

#side_cart table.tbl_cart_art_list td.icon a:hover {
	
}
/*side cart*/
/*//////////////////////*/

#footer {
	background-color:#3a3a3a;
	color:#d8d8d8;
}

#footer a:link, #footer a:active, #footer a:visited{
	color:#d8d8d8;
	text-decoration:none;
}

#footer a:hover {
	color:#d8d8d8;
	text-decoration:underline;
}

#footer div.company {
	text-align: center;
}

#footer div.company img {
	margin:30px;
}

#footer div.wrapper {
	padding:60px 5% 60px 10%;
}

#footer div.box {
	float:left;
	width:20%;
}

#footer div.box div.title {
	margin-bottom:20px;
	font-weight: bold;
}
#footer div.box div {
	line-height:25px;
}

#footer div.signature_container {
	color:#9d9d9d;
	border-top:1px solid #9d9d9d;
	padding:20px 0px;
}

#footer div.copyright {
	float:left;
	padding-left:60px;
}

#footer div.production {
	float:right;
	padding-right:60px;
}

