@charset "euc-jp";
.l-main a:hover{
  text-decoration: none;
}


/******************************/
/* SLIDER */
/******************************/
#slider.slick-slider{
  width: 100%;
  margin-bottom: 0;
  padding-bottom: 169px;
  background: #fff;
}

#slider a > div{
  position: relative;
}

#slider a:hover{
  opacity: .5;
}

#slider a > div div{
  position: absolute;
  padding: 0 4%;
  bottom: 8.5%;
  width: 100%;
  text-align: center;
  color: /*#ccc;*/#666;
  box-sizing: border-box;
}

#slider .txt-w h3 , #slider .txt-w p , #slider .txt-w span{
  color:#fff;
}

#slider a div h3{
  margin: 0 0 .35em;
  font-size: 1.78vw;
  font-weight: normal;
  line-height: 1.2;
  font-family:'Amiri',sans-seri,f"游明朝", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;;
  color:/*#8f9b9b*/#666666;
}
#slider a div h3 span{
  font-family:"Cormorant Garamond",sans-serif;
  font-size: 80%;
   line-height: 2;
}

#slider a div p{
  margin: 0 0 1.5em ;
  color: /*#8f9b9b*/#666666;
  line-height: 1.4;
  font-size: max(0.73vw, 10px);
}

#slider a div span{
  font-family: 'Jost', Arial, sans-serif;
  font-size: max(0.73vw, 10px);
  color: /*#909b9b;*/#666666
  letter-spacing: 0.01em;
  line-height: 1;
}

#slider img{
  width: 100%;
}

#slider .slick-dots{
  bottom: 5px;
}

#slider .slick-dots li{
  margin: 0;
  width: 25px;
  height: 2px;
}

#slider .slick-dots li button{
  width: 25px;
  height: 2px;
}

#slider .slick-dots li button:before{
  content: '';
  width: 25px;
  height: 2px;
  opacity: 1 !important;
  background: #b5d1d5;
  line-height: 1;
}

#slider .slick-dots li.slick-active button:before{
  opacity: 1 !important;
  background: #096875;
}

@media screen and (min-width: 769px){
  #slider .slick-dots{
    bottom: 145px;
    width: 86.458%;
    padding-right: 13.542%;
    text-align: right;
  }
	#slider a div h3{
		margin: 0 0 .15em;
		font-size: 1.9vw;
	}
	#slider a div p{
      margin:0 0 0.9em;
      font-size: max(1.132vw, 12px);
	}
	#slider a div span{
		font-size: max(1.1vw,11px);
	}
	.slide .catTitleWrap a:before{width:90.45%;}
	#collection1.slide .catTitleWrap a:before{left:0;}
	#collection2.slide .catTitleWrap a:before{right:0;}
  .carousel .slick-arrow:after,
	#new .slick-arrow:after,
	#Coordinate .slick-arrow:after{
		content:"";
		display:block;
		width:calc(100% + 60px);
		height:calc(100% + 100px);
		position:absolute;
		top:-50px;
		left:-30px;
	}
}
/*@media screen and (min-width:1400px) and (max-width:1919.98px){
	#slider .slick-slide{
		width:505px;
		transform:translateX(252px);
	}
	#slider a div h3{
		margin-bottom:4px;
		font-size:26px;
	}
	#slider a div p{
		margin-bottom:17px;
		font-size:16px;
	}
	#slider a div span{font-size:15px;}
}*/
@media screen and (min-width:1400px){
	#slider .slick-slide{
		width:700px;
		transform:translateX(350px);
	}
	#slider a div h3{
		margin-bottom:8px;
		font-size:36px;
	}
	#slider a div p{
		margin-bottom:24px;
		font-size:22px;
	}
	#slider a div span{font-size:16px;}
}
@media screen and (max-width: 768px){
  #slider img{
    display: block;
    height: auto;
    object-fit: cover;
    aspect-ratio: 75 / 76;
  }
  #slider a > div div{
    bottom:6%;
  }
  #slider a div h3{
    margin-bottom:0.1em;
    font-size: 6.2vw;
  }
  #slider a div p{
    margin:0 0 0.9em;
    font-size:4.6vw;
    font-size: max(3.858vw,12px);
  }
  #slider a div span{
    font-size: 3.2vw;
    font-size: max(3.2vw, 10px);
  }
  #slider.slick-slider{
    padding-bottom:75px;
  }
  #slider .slick-dots{
    bottom:58px;
  }
	#collection1{
		display:flex;
		flex-direction:column;
	}
	.carousel .slick-slide{padding:0 .5%;}
	.viewmoreSp{padding-top:18px;}
	.bannerWrap > div a span{font-size:11px;}
}


/******************************/
/* collection slide */
/******************************/
.slide{
  width: 100%;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding-bottom: 130px;
  background: #fff;
}

.slick-prev,
.slick-next{
  z-index: 100;
}

.carousel .slick-slider{
  margin-bottom: 0;
}

.carousel .slick-prev{
  height: 40px !important;
}

.carousel a:hover{
  opacity: .5;
}

.carousel .slick-arrow:before,
#new .slick-arrow:before,
#Coordinate .slick-arrow:before{
  display: block;
  width: 20px !important;
  height: 38px;
  content: '';
  background: url(https://file003.shop-pro.jp/PA01497/438/img/arrowL2.png) no-repeat;
  opacity: 1;
  transition: .8s;
}

#collection1 .slick-prev:before,
#new .slick-prev:before{
  transform: scale(-1, 1);
}
#collection1.slide .catTitleWrap a:before{
	background:linear-gradient(90deg,#8a8a8a 0%,#8a8a8a 30%,#fff 33%,#fff 66%,#0D6977 70%,#0D6977 100%);
	background-position:1% 50%;
	background-size:350% auto;
}
#collection1.slide .catTitleWrap a:hover:before{background-position: 99% 50%;}
#collection2.slide .catTitleWrap a:before{
	background:linear-gradient(270deg,#0D6977 0%,#0D6977 30%,#fff 33%,#fff 66%,#8a8a8a 70%,#8a8a8a 100%);
	background-position:1% 50%;
	background-size:350% auto;
}
#collection2.slide .catTitleWrap a:hover:before{background-position: 99% 50%;}
.carousel .slick-prev:hover:before,
.carousel .slick-next:hover:before,
#new .slick-prev:hover:before,
#new .slick-next:hover:before{
  opacity: .5;
}
#new .slick-slide{
  padding: 0 20px;
  padding: 0 0.22%;
}
#new .slick-slide img{
  max-width: initial;
  width: 100%;
}
.collectionGr h2{display:none;}
.slide .catTitleWrap h2{display:none;}
.slide .catTitleWrap:before{content:none;}
.slide .catTitleWrap h3{
  line-height: 1.2;
  font-size: 40px;
  font-weight: 300;
}
.slide .catTitleWrap h2,
.slide .catTitleWrap h3,
.c-ttl-main, #concept .conceptTxt h3{
  font-weight:400;
  font-family:'Cormorant Garamond', serif;
}
.slide .catTitleWrap span,
.viewmoreSp a{
  font-family: 'Jost', Arial, sans-serif;
  font-size: 14px;
  color: #909b9b;
  letter-spacing: 0.01em;
  transition: .5s;
}
.slide .catTitleWrap a:before{
	content:"";
	display:block;
	position:absolute;
	top:50%;
	height:1px;
	transition: all 0.3s ease-out;
}
.slide .catTitleWrap a span{color:#8a8a8a;}
.slide .catTitleWrap a:hover span{
  color: #0d6977;
}
@media screen and (min-width: 769px){
  .carousel{
    width: 70%;
  }

  .slide .catTitleWrap{
    position: relative;
    width: 30%;
    display: flex;
    align-items: center;
    background: #fff;
    z-index:100;
  }

  .slide .catTitleWrap:before{
    position: absolute;
    top: 50%;
    content: '';
    width: 90.45%;
    height: 1px;
    background: #909b9b;
  }

  .slide .catTitleWrap:after{
    position: absolute;
    top: 0;
    right: -8px;
    content: '';
    width: 8px;
    height: 100%;
    background: #fff;
  }
  .slide .catTitleWrap h3{margin: -20px 0 12px;}
  .slide .catTitle{width: 90.45%;}
  .slide .catTitle div{
    padding-right: 6.53%;
    float: right;
    text-align: center;
  }
  #collection2 .catTitleWrap:after{
    right: auto;
    left: -8px;
  }
  #collection2 .catTitleWrap:before{
    left: 9.5%;
  }
  #collection2 .catTitleWrap{
    width: 576px;
    width: 30%;
  }
  #collection2 .catTitle div{
    padding: 0 0 0 19%;
    float: left;
  }
  .carousel .slick-slide{width:320px;}
  #collection1 .slick-list{padding: 0 221px 0 47px !important;}
  #collection1 .slick-slide{padding-right: 40px;}
  #collection1 .slick-prev{left: 12px;}
  #collection1 .slick-next{left: 1100px;}
  #collection2 .slick-list{padding: 0 40px 0 220px !important;}
  #collection2 .slick-slide{padding-right: 40px;}
  #collection2 .slick-prev{right: 10px;}
	#collection2 .slick-next{right: 1090px;}
  #collection2 .slick-next:before{transform: scale(-1, 1);}
  .viewmoreSp{display: none;}
}
@media screen and (max-width:1600px){
  #collection1 .slick-next{
    left: auto;
    right: 20px;
  }
  #collection2 .slick-next{
    right: auto;
    left: 20px;
  }
}

@media screen and (max-width: 768px) {
  .slide{
    display: block;
    padding-bottom: 60px
  }
  #collection2.slide{
    padding-bottom: 85px;
  }
  .slide .catTitleWrap,
  .carousel{
    width: 100%;
  }
  .catTitleWrap{
    text-align: center;
  }
  .carousel.slick-slider{
    padding: 0 4.5% !important;
  }
  .carousel .slick-list{
    overflow: visible;
  }
  #collection2{
    display: flex;
    flex-direction: column-reverse;
  }
  #collection2 .carousel{
    flex-grow: 1;
  }
  .catTitle a{
    display: none;
  }
  .slide .catTitleWrap h3{
		margin: 0 0 30px;
		font-size:25px;
	}
  .viewmoreSp{
    padding-top: 35px;
    text-align: center;
  }
  .viewmoreSp a{
    font-size: 12px;
  }
  .carousel .slick-prev.slick-disabled:before,
  .carousel .slick-next.slick-disabled:before{
    opacity: 0;
  }
  .carousel .slick-arrow:before,
  #new .slick-arrow:before{
    width: 9px !important;
    height: 18px;
    background-size: 9px 18px;
  }
  #collection1 .slick-prev,
  #collection2 .slick-prev,
  #new .slick-prev{
    left: 4%;
  }
  #collection1 .slick-next,
  #collection2 .slick-next,
  #new .slick-next{
    left: auto;
    right: 2.5%;
  }
  #collection2 .slick-prev:before{
    transform: scale(-1, 1);
  }
}
@media screen and (max-width: 460px){
  #collection1 .slick-prev,
  #collection2 .slick-prev,
  #new .slick-prev{
    left: 3.5%;
  }
  #collection1 .slick-next,
  #collection2 .slick-next,
  #new .slick-next{
    right: .5%;
  }
}



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

/******************************/
/* new products */
/******************************/

#new{
  text-align: center;
  padding-top: 60px;  
  padding-bottom:0px;
  background: #fff;
}

#new a:hover{
  opacity: .5;
}

#new .slick-arrow{
  margin-top: -36px !important;
  height: 38px !important;
}

#new .slick-next{
  margin-top: -36px !important;
  height: 38px !important;
}

#new h3{
  margin: 0;
}


@media screen and (min-width: 769px) {
  #new .slick-slide{
    width: 320px;
    padding: 0 20px;
  }
  #new .slick-track{
    left: -180px;
  }
  #new .slick-prev{
    right: auto;
    left: calc(50% - 370px);
  }
  #new .slick-next{
    right: auto;
    left: calc(50% + 350px);
  }
}

@media screen and (min-width: 1483px) {
  #new .slick-prev{
    right: auto;
    left: calc(50% - 730px);
  }
  #new .slick-next{
    right: auto;
    left: calc(50% + 710px);
  }
}

@media screen and (min-width: 1866px){
  #new .slick-prev{
    right: auto;
    left: calc(50% - 730px);
  }
  #new .slick-next{
    right: auto;
    left: calc(50% + 710px);
  }
}

@media screen and (max-width: 768px) {
  #new .slick-slide{
    padding: 0 .5%;
  }
}


/******************************/
/* parallax */
/******************************/
#para{
  position: relative;
  width: 100%;
  height: 360px;
  padding-bottom: 100px;
  background: #fff;
  z-index: -10;
}

#para.is-show:before{
  content: '';
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -100;
  background: url(https://file003.shop-pro.jp/PA01497/438/img/paraDay_pc.jpg) no-repeat 0 50% / cover;
}

#para.night.is-show:before{
  background-image: url(https://file003.shop-pro.jp/PA01497/438/img/paraNight_pc.jpg);
}


@media screen and (max-width: 768px) {
  #para{
    height: 225px;
    padding: 0;
  }
  #para.is-show:before{
    background: url(https://file003.shop-pro.jp/PA01497/438/img/paraDay_sp.jpg) no-repeat 50% 50% / auto 100%;
  }
  #para.night.is-show:before{
    background-image: url(https://file003.shop-pro.jp/PA01497/438/img/paraNight_sp.jpg);
  }
}


/******************************/
/* 3 banners */
/******************************/
#banner{
  padding:92px 0;
  background:#f5f3f0;
}

.bannerWrap{
  margin: 0 auto;
  width: 1400px;
  display: flex;
  justify-content: space-between;
}
.bannerWrap > div{
  position: relative;
  width: 430px;
  display: flex;
  background: #fff;
  transition: .5s;
}
.bannerWrap a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  z-index: 100;
}
.bannerWrap > div a:before{
	content:"";
	display:block;
	position:absolute;
	top:-1px;
	left:-1px;
	width:calc(100% + 2px);
	height:calc(100% + 2px);
	background:url("https://file003.shop-pro.jp/PA01497/438/img/bnr-mask.svg") no-repeat center center;
	background-size:contain;
}
.bannerWrap a div{
  text-align: center;
}

.bannerWrap div img{opacity:0.5;}
.bannerWrap div.linkInstagram img{opacity:0.3;}
.bannerWrap h3{
  margin: 0 0 8px;
  font-size: 34px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
}

.bannerWrap .linkInstagram {
 background:#f5f3f0;
}
.bannerWrap div.linkInstagram h3{margin-bottom:0;}/*add 08/24*/
.bannerWrap .linkInstagram h3{font-size:36px;}
.bannerWrap > div.linkInstagram a span{font-size:16px;}
.bannerWrap > div a span{
  padding-bottom:0;
  font-family: 'Jost', Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.01em;
}

.bannerWrap > div:last-of-type svg{
  padding-right: 10px;
  transition: .5s;
}

@media screen and (min-width: 769px) {
  .bannerWrap > div:hover{
    background: #418993;
  }
  .bannerWrap > div:hover a{
    color: #fff;
    transition: .5s;
  }

  .bannerWrap > div:hover svg{
    fill: #fff;
  }
}

@media screen and (max-width: 768px) {
  .bannerWrap > div img{
    display: block;
    height: auto;
    object-fit: cover;
    aspect-ratio: 12 / 12;
  }
  .bannerWrap > div.info img{
    aspect-ratio: 2 / 1;
  }
	.bannerWrap > div.info a:before{
		background-image:url("https://file003.shop-pro.jp/PA01497/438/img/bnr-mask2.svg");/*add 08/24*/
		background-size:cover;
	}
}

@media screen and (max-width: 1439px) {
    .bannerWrap{
      width: 72.92%;
    }
    .bannerWrap > div{
      width: 30.8%;
    }
    .bannerWrap h3{
      margin-bottom: .25em;
      font-size: 1.77vw;
      line-height: 1;
    }
    .bannerWrap div.linkInstagram h3{margin-bottom:0.2em;}/*add 08/24*/
    .bannerWrap > div a span{
      font-size: max(10px, 0.73vw);
    }
    .bannerWrap > div:last-of-type svg{
      padding-right: .5em;
      width: 1.77vw;
      height: auto;
      vertical-align: middle;
    }
	.bannerWrap .linkInstagram h3{font-size:1.9vw;}
	.bannerWrap > div.linkInstagram a span{font-size:max(11px,0.9vw);}
}

@media screen and (max-width: 768px) {
  #news > div{font-size: 13px;}
  #banner{padding:90px 6.6%;}
  .bannerWrap{
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .bannerWrap img{
    max-width: initial;
    width: 100%;
  }
  .bannerWrap > div{
    width: calc((100% - 25px) / 2);
  }
  .bannerWrap > div:first-of-type{
    order: 2;
  }
  .bannerWrap > div:last-of-type{
    order: 3;
  }
  .bannerWrap > div:nth-of-type(2){
    order: 1;
    width: 100%;
    margin-bottom: 25px;
  }
  .bannerWrap h3{
    margin: 0 0 8px;
    font-size: 20px;
  }
  .bannerWrap > div a span{
    padding: 0;
    font-size: 12px;
  }
  .bannerWrap > div:last-of-type svg{
    width: 14px;
    height: auto;
    padding-right: 5px;
  }
	.bannerWrap .linkInstagram h3{
		font-size:22px;
		margin-bottom:0.4em;
	}
	.bannerWrap > div.linkInstagram a span{font-size:13px;}
}


/******************************/
/* news */
/******************************/
#news{
  padding: 60px 0;
  display: flex;
  align-items: center;
  color: #8a8a8a;
  background: #fff;
}
#news > div{
  margin: 0 auto;
  width: 1400px;
  font-size:15px;
}

#news .date{
  margin-right: 30px;
}
#news a{
	text-decoration:underline;
}
#news a:hover{
	color: #096875;
	text-decoration:none;
}
.viewmoreSp a{color:#384141;}

@media screen and (max-width: 1439px) {
  #news > div{
    width: 72.92%;
  }
}

@media screen and (min-width: 769px) {
  #news .txt{
    display: flex;
  }
}

@media screen and (max-width: 768px) {
  #news{
    padding: 55px 0;
  }
  #news > div{
    width: 86.65%;
    font-size: 13px;
    line-break: normal;
  }
  #news .date{
    display: block;
    margin: 0;
  }
}


/******************************/
/* concept */
/******************************/
#concept{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 36.45vw;
  display: flex;
  align-items: center;
  background: #000;
  z-index: 100;
}

#concept .video{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  opacity: .5;
  z-index: -10;
}
#concept .conceptTxt{
  width: 96%;
  margin: 0 auto;
  color: #fff;
  text-align: center;
}
#concept .conceptTxt h3{
  margin: 0 0 25px;
  font-weight: 300;
  line-height: 1.2;
}
#concept .conceptTxt p{
  margin: 0 0 20px;
  line-height: 2;
}
@media screen and (min-width: 769px) {
  #concept .brSp{display: none;}
	#concept .conceptTxt h3{font-size: 30px;}
	#concept .conceptTxt p{font-size: 16px;}
}

@media screen and (max-width: 768px) {
  #concept{height: 133vw;}
  #concept .spacePc{display: none;}
	#concept .conceptTxt h3{font-size:26px;}
	#concept .conceptTxt p{font-size:14px;}
}


/******************************/
/* #Coordinate products */
/******************************/
#Coordinate{
  padding-bottom:145px;
  padding-top: 145px;
  text-align: center;
  background: #fff;
}
#Coordinate a:hover{
  opacity:0.5;
}
#Coordinate h3{
  margin: 0;
}
.modalOpen{overflow:hidden;}
#coordinateModal,
#coordinateModal .modalItem{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	pointer-events:none;
	z-index:-1;
	transition:all 0.8s;
}
#coordinateModal{background-color:rgba(245,243,240,0.8);}
#coordinateModal.show,
#coordinateModal .modalItem.open{
	opacity:1;
	pointer-events:auto;
	z-index:10001;
	cursor:pointer;
}
#coordinateModal:after{
	content:"×";
	display:block;
	position:fixed;
	top:20px;
	right:20px;
	color:#333;
	font-size:36px;
	line-height:1.0;
}
#coordinateModal .modalItem img{
	object-fit:contain;
	object-position:center center;
}
#Coordinate .slick-arrow{
  height: 38px !important;
}
#Coordinate .slick-next{
  height: 38px !important;
}
#Coordinate .slick-arrow:before{
  display: block;
  width: 20px !important;
  height: 38px;
  content: '';
  background: url(https://file003.shop-pro.jp/PA01497/438/img/arrowL2.png) no-repeat;
  opacity: 1;
  transition: .8s;
}
#Coordinate .slick-prev:before{
  transform: scale(-1, 1);
}
#Coordinate .slick-prev:hover:before,
#Coordinate .slick-next:hover:before{
  opacity: .5;
}
#Coordinate .slick-slide{
  padding: 0 20px;
  padding: 0 0.22%;
}
#Coordinate .slick-slide img{
  max-width: initial;
  width: 100%;
}
#coordinateModalPrev,
#coordinateModalNext{
	display:flex;
	justify-content:center;
	align-items:center;
	height:50vh;
	position:fixed;
	top:25vh;
	background-color:transparent;
	border:none;
	pointer-events:none;
	opacity:0;
	z-index:10002;
}
#coordinateModalPrev:hover,
#coordinateModalNext:hover{opacity:0.5;}
#coordinateModalPrev img,
#coordinateModalNext img{
	display:block;
	width:20px;
}
#coordinateModalPrev img{
	transform-origin:center center;
	transform:rotate(180deg);
}
#coordinateModal.show #coordinateModalPrev,
#coordinateModal.show #coordinateModalNext{
	pointer-events:auto;
	opacity:1;
}
@media screen and (min-width: 769px) {
	#Coordinate .slick-track{left: -180px;}
  #Coordinate .slick-slide{
    width: 320px;
    padding: 0 20px;
  }
  #Coordinate .slick-prev{
    right: auto;
    left: calc(50% - 370px);
  }
  #Coordinate .slick-next{
    right: auto;
    left: calc(50% + 350px);
  }
	#coordinateModal .modalItem img{
		width:560px;
		height:700px;
	}
	#coordinateModalPrev,
	#coordinateModalNext{width:180px;}
	#coordinateModalPrev{left:calc(50% - 420px);}
	#coordinateModalNext{right:calc(50% - 420px);}
}

@media screen and (min-width: 1483px) {
  #Coordinate .slick-prev{
    right: auto;
    left: calc(50% - 730px);
  }
  #Coordinate .slick-next{
    right: auto;
    left: calc(50% + 710px);
  }
}

@media screen and (min-width: 1866px){
  #Coordinate .slick-prev{
    right: auto;
    left: calc(50% - 730px);
  }
  #Coordinate .slick-next{
    right: auto;
    left: calc(50% + 710px);
  }
}

@media screen and (max-width: 768px) {
  #Coordinate{
		padding-top:83px;
		padding-bottom:58px;
	}
  #Coordinate .slick-slide{
    padding: 0 .5%;
  }
	#coordinateModal .modalItem img{
		width:80%;
		height:80%;
	}
  #Coordinate .slick-arrow:before{
    width: 9px !important;
    height: 18px;
    background-size: 9px 18px;
  }
  #Coordinate .slick-prev{
    left: 4%;
  }
  #Coordinate .slick-next{
    left: auto;
    right: 2.5%;
  }
	#coordinateModalPrev,
	#coordinateModalNext{width:50px;}
	#coordinateModalPrev{left:0;}
	#coordinateModalNext{right:0;}
}
@media screen and (max-width: 460px){
  #Coordinate .slick-prev{
    left: 3.5%;
  }
  #Coordinate .slick-next{
    right: .5%;
  }
}

/******************************/
/* category */
/******************************/
#category {
    text-align: center;
    padding-top:60px;
    padding-bottom: 0px;
    background: #fff;
}
#category a:hover {
    opacity: .5;
}
#category nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#category nav ul li {
    display: block;
    list-style: none;
  line-height:1em;
    margin-bottom: 40px;
}
#category nav ul li img {
    display: block;
}

@media screen and (max-width: 768px) {
#category nav ul{
    width: 90%;
  margin:0 5%;
}
#category nav ul li {
    display: block;
    width: 33.333%;
    height: auto;
}
#category nav ul li img {
    width: 90%;
    height: auto;
 	margin:0 5%;
}
}
@media screen and (min-width: 769px) {
#category {
  padding-top:135px;
}
#category nav ul {
    max-width: 1400px;
    margin: 0 auto;
}
#category nav ul li {
    display: block;
    width: 20%;
    height: auto;
}
#category nav ul li img {
    width: 90%;
    height: auto;
}
@media screen and (max-width: 1866px) {
#category nav ul li {
display:block;
width: 20%;
height: auto;
}
#category nav ul li img {
width: 90%;
height:auto;
}
}