@charset "UTF-8";
/* CSS Document */
body {
	font-family:  Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 14px;
	font-weight: 300;
	color: black;
}
h4 {
    font-family:  Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 12px;
	font-weight: 300;
	color: black;
	text-align: center;
}
a {
    font-family:  Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 14px;
	font-weight: 300;
	text-decoration: none;
	color: black;
}
a:hover {
	text-decoration: underline;
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24
}
h2 {
	margin-top: -25px !important;
}

@font-face {
	font-family: 'Bellevue';
	src: url('/misc/bellevue-webfont.eot');
	src: url('/misc/bellevue-webfont.eot?#iefix') format('embedded-opentype'), url('/misc/bellevue-webfont.woff') format('woff'), url('/misc/bellevue-webfont.ttf') format('truetype'), url('/misc/bellevue-webfont.svg#bellevueregular') format('svg');
	font-weight: normal;
	font-style: normal;
}


 header {
	height: 100px;
}

nav {
	width: 100%;
	position: fixed;
	z-index: 1 !important;
}

.nav-container {
	backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.90);
	width: 100%;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
}
.nav-container-black {
 	backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, 1); 
	width: 100%;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
}
.header-left{
	display:flex;
	align-items: center;
	height: 100%;
}

.header-left .header-icon{
	margin-right: 10px;
}

.header-center{
	width: 240px;
	position: absolute;
    left: 50%;
    transform: translate(-50%);
}

.header-right{
	height: 100%;
	display: flex;
    align-items: center;
}

.header-icon{
    margin: 40px;
	cursor: default;
}

.logo {
    width: 100%;
}
footer{
clear: all !important;
    display: block;
	width: 100%;
	background-color: white;
	height: 400px;
	clear: all !important;
}

.footer-container{
	display: block;
	height: 100%;
}

 .footer-container ul{
	padding: 50px 0 0;
	margin: 0 auto;
	display: grid;
 	width: fit-content;
  	column-gap: 6em;
  	grid-template-columns: repeat(2, auto);
} 

.footer-container ul li {
	margin-bottom: 10px !important;
}

.social{
	padding: 100px 0 0;
	margin: 0 auto;
	width: 100%;
    height: 30px;
	display: flex;
    align-items: center;
    justify-content: center;
}

.main-area{
    width: 90% !important;
    margin: 0 auto;
	min-height: calc(100vh - 500px);
}


#content {
	width:100%;
	/*position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	*/
	align-content:center;
	text-align:center;
}
/*div stuff*/
#container {
	position: fixed;
	width: 100%;
	bottom: 0;
	background-image: url(/images/complexbg.png);
	background-size: contain;
	text-align: center;
	padding-top: 0.5em;
	z-index:100;
}

.container{
	display: flex;
	padding: 0 50px 50px;
	
}
.container-item-img{
	text-align: center;
    width: 50%;
}

.container-item-text{
	width: 50%;
}
.container-item-text p {
	padding: 0 50px;
}

.img-sizing {
	margin: 0 auto;
    width: 60%;
}
.img-sizing img{
	width: 100%;
}

.mobile-img{
	display: none;
}

/*end*/
* {
	margin: 0;
	padding: 0;
}
ul {
	width: 100%;
	margin-left: auto;/*	clear:both;*/
	margin-right:auto;
	list-style: none;
}
br {
	clear: both;
}
nav ul li {
	flex: 1 0 auto;
}
li:last-child {
	border-right: none;
}
ul li a {
	text-align: left;
	display: block;
	text-decoration: none;
	color: #000;
	white-space: nowrap;
}

ul li a:hover {
	color: #999;
	cursor: default;
}
ul li a:active {
	color: #FFFFFF;
}

a:visited {
    color: #000;
}


.main-sidebar{
	left: -100%;
	position: fixed;
	background: #FFFFFF;
	width: 25%;
	height: 100vh;
	box-shadow: 0 3px 15px rgba(0,0,0,.35);
	overflow-y: scroll;
	transition: .7s ease-out;
	z-index: 1;
}

.close-icon{
	margin: 40px;
	cursor: default;
}

.main-sidebar ul{
	display: flex;
	flex-direction: column;
	margin: 0;
    padding-left: 0;
}

.main-sidebar ul li{
	padding-left: 40px;
}

.main-sidebar ul li a{
	text-align: left;
	display: block;
	text-decoration: none;
	color: #000;
	white-space: nowrap;
}

.main-sidebar li a:hover {
	color:#999;
	cursor: default;
}
.main-sidebar li a:active {
	color: #FFFFFF;
}

.sidebar-cover{
	display: none;
	position: fixed;
	width: 100%;
    height: 100%;
    background: rgba(200,200,200,0.7) !important;
	z-index: 1;
}

.sidebar-bottom{
	margin-top: 100px;
    padding-bottom: 20px;
}

.title{
	font-weight: 200;
    text-align: center;
	padding: 25px;
	font-size: 30px;
}

.copy-right{
/* 	font-size: 12px;
	left: 50%;
    transform: translate(-50%); */
}
header.logo {
	padding: 1em;
	padding-top:35px;
	text-align: center;
}
a.logoimg img {
	width:21.65%;
}
#cart {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1001;
	background-color: #FFF;
	display: none;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	-webkit-border-bottom-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 15px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	-moz-box-shadow: 2px 2px 3px 3px #666;
	-webkit-box-shadow: 2px 2px 3px 3px #666;
	box-shadow: 2px 2px 3px 3px #666;
}
#basket {
	width: 320px;
}
#contents {
	width: 320px;
}
th {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	text-align: left;
}
#contents td {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	text-align: left;
	border-bottom: #CCC thin solid;
	padding-bottom: 1em;
}
#fsub {
	background-color: #FCF;
	border: #000 thin solid;
	border-radius: 3px;
}
@media screen and (max-width: 1290px) {
/*
a.logoimg img {
	width:29%;
}
*/
aside {
	width:60%;
}

}

@media screen and (max-width: 1024px) {
	
.header-left p{
	display:none;
}
	
.header-center{
	width: 200px;
	}

.main-sidebar{
		width: 40%;
	}
	
	
aside {
	width:60%;
}

}


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

	
#banner {
	position:absolute;
	top:0;
	left:0;
	width:30%;
	height:30%;
	max-width: 146px;
	max-height: 157px;
	z-index: 49;
}
#banner img {
	
	width:100%;
	height:auto;

}
#menu {
	width: 1.4em;
	display: block;
	background: #000;
	color: #FFFFFF;
	font-size: 1.35em;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	opacity: 0.75;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.search {
	display:none;
}
.srch_btn {
	display:none;
}
#nav.js {
	display: none;
}
ul {
	
}
li {
	
}
li a {
	
}
#nav li.short, #nav li.medium, #nav li.long {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	text-align: center;
	width: 100%;
	padding: 0.5em 0 0.25em 0;/*0.5 0.25*/
	font-size: 1.15em;
}
div.copy {
	width: 200px;
	margin: auto;
}
aside {
	width: 90%;
	float: none;
	margin-top: 20%;
}
article img {
	width: 95%;
	height: auto;
}
article.press img {
	width: 25%;
	height: auto;
	padding-bottom:4px;
}
/*
a.logoimg img {
	width:46%;
}
*/
#container {
	padding-top: 0.5em;
	padding-left: 0;
	padding-right: 0;
	background-image: none;
}
#searchicon {
	display:none;
}
#searchitem {
	/*display: block;
	width: 50px;
	height: 30px;*/
	position: absolute;
	top: 6px;
	right: 100px;
	z-index: 19;
	color: #FFF;
}
.searchBtn {
	background-color:FFCCFF;
	font-size:small;
}
.ltcol  { display:none;}
       .rtcol { display:none;}
	   .ctcol {width:100%;}
}
@media screen and (min-device-height: 1080px){
.showsearch {
	position: absolute;
	top:  -5px;
	right: 120px;
}
.search {
  width: 200px;
  margin-top: 0px;
  padding-top: 5px;
} 
.searchak {
	background: white;border: solid thin black;float:left;height: 25px;font-size:14px;padding-left:5px;width: 100%;
}
.citem {
	position: absolute;
	top:  0px;
	right: 5px !important;
	z-index: 10;
}
.itemnum {
	position: absolute;
	top:  0px;
	right: 5px !important;
	z-index: 12;
}
}

@media screen and (min-width: 769px) {
#menu {
	display: none;
}
}
@media only screen and (max-width : 768px) and (min-width : 481px) {
	li {
}
	
li a {
/*	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
	font-weight: 300;
	text-align: center;
	width: 100%;
	padding: 0.25em 0 0.25em 0;
	font-size: 1em;
}
	
}
@media screen and (max-width: 600px) {
.itemnum {
	display: none;
}
.menutxt {
	display: none;
}
	header{
		height: 75px;
	}
	
	nav {
		height: 75px;
	}
	
	.nav-container{
		height: 75px;
	}
	
	.header-center{
	width: 160px;
	}
	
	.header-icon{
		margin: 10px;
	}
	
	
	.main-sidebar{
		width: 75% !important;
	}
	
	.close-icon{
		margin: 23px 0 23px 10px;
	}
	
	.main-area{
	min-height: calc(100vh - 355px);
}

	.title {
		font-size: 25px;
		padding: 20px;
	}
	
	.container{
		display: block;
		padding: 0 30px 50px;
	}
	
	.container-item-img {
    width: 100%;
	padding-bottom: 50px;
}
	
	.img-sizing{
		width: 100%;
	}
	
	.desktop-img{
		display: none;
	}
	
	.mobile-img{
		display: block;
	}
	
	.container-item-text{
		width: 100%;
	}
	
	.container-item-text p{
		padding: 0;
	}
	
	.footer-container ul {
    padding: 50px 0 0;
	}
	
	.social {
    padding-top: 60px;
	}
	
	.pageimg{
		width: 100%;
	}
	

	
#banner {
	display:none;
	/*position:absolute;
	top:0;
	left:0;
	width:30%;
	height:30%;
	max-width: 146px;
	max-height: 157px;
	z-index: 49;*/
}
#banner img {
	
	width:100%;
	height:auto;

}
/*
a.logoimg img {
	width:80%;
}
*/
#container {
background-image: url(/images/navbg.png);
}
aside {
	margin-top:20%;
	margin-bottom: 10%;
}
#searchicon {
	display:none;
}
#searchitem {
	display: none; 
	position: absolute;
	top: 45px;
	right: 45px;
	z-index: 19;
	color: #FFF;
}
article.press img {
	width:50%;
	height: auto;
	padding-bottom:4px;
}
#citem {
	right:1px;
}

span.fa {
	font-size:small;
	width: 22px;
	line-height: 22px;
}
.searchBtn {
	background-color:FFCCFF;
	font-size:small;
}
#basket {
	width: 100%;
}
#contents {
	width: 100%;
}
ul {
	
}
li {
	
}
	#nav li.short, #nav li.medium, #nav li.long {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	text-align: center;
	width: 100%;
	padding: 0.25em 0 0.25em 0;/*0.25 0.25*/
	font-size: 1em;
}
li a {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	text-align: center;
	width: 100%;
	padding: 0.25em 0 0.25em 0;/*0.25 0.25*/
	font-size: 1em;
}
}
h2 {
    font-family:  Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 18px;
	font-weight: 200 !important;
	color: black !important;
	text-align: center;
	margin-top: 0 !important;
	padding-top: 0 !important;
}