@charset "utf-8";
/*------------------------------------
	main common 
------------------------------------*/
.inner {margin:0 auto; max-width:1750px;}

@media (max-width: 1680px) {
	.inner{max-width:100%; width: auto; padding:0 5%;}
}


/*------------------------------------
	main_Layout
------------------------------------*/
#max_contanier {position: relative;}
#max_contanier section {}
/*------------------------------------
	Main-visaul
------------------------------------*/

#visual_wrap {position: relative; width: 100%; height: 100vh;}
#visual_wrap ul li {position: relative; background-repeat:no-repeat; background-position:center; background-size:cover;display: flex;  align-items: center;  justify-content: center;}
#visual_wrap ul li::before {content:''; width: 100%; height: 100%; background-color: var(--black); opacity:.2; position: absolute; left:0; top:0; z-index:1;}
#visual_wrap ul li p{font-family: var(--font); font-size: 3.8em; color:var(--white);z-index:2; opacity:0;}
#visual_wrap ul li.swiper-slide-active  {animation: kenburns-top 5s ease-in-out both;	}
#visual_wrap ul li.swiper-slide-active p  {opacity:1; transition: all 3s linear; }
#visual_wrap .swiper-container-horizontal > .swiper-scrollbar {height: .3rem !important; border-radius:0 !important;}

#visual_wrap .visual_down { position: absolute; bottom: 0; left: 50%; padding: 4rem; z-index: 1; transform: translateX(-50%); } 
#visual_wrap .visual_down .downicon { width: 36rem; height: 36rem; animation: scroll-down 2.5s ease-in-out infinite; }
#visual_wrap .visual_down .downicon svg path { fill: var(--white); }

@keyframes scroll-down { 0% { opacity: .2; } 50% {  opacity: 1; } 100% {opacity: .2; } }
@keyframes kenburns-top { 0% {	background-size:100%  }  100% {	background-size:105%  }}


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

}
@media screen and (max-width: 1024px) {
	#visual_wrap ul li.swiper-slide-active {animation:none;}
	#visual_wrap ul li.swiper-slide-active p  { transition: all 2s linear; }
	#visual_wrap ul li p {font-size: 3em;}
}
@media screen and (max-width: 768px) { 
	#visual_wrap ul li p {font-size: 2.5em;width: 80%; text-align: center;}
}
@media screen and (max-width: 568px) { 

}


/*------------------------------------
	main-con
------------------------------------*/
.main_content {}

.main_content{margin:20rem 0; position: relative; }
.main_content > div.inner {display:flex; }
.main_content .title_area {width: 30rem; position: relative; }
.main_content .title_area h2 { margin-top: 20rem; font-size: 12rem; font-family: var(--font); font-weight: normal;  transform: translateY(-50%) translateX(-30%) rotate( 270deg );   position: sticky; left: -40%;  top: 50%;  bottom:20rem;  }

#look_wrap .look_area {width: calc(100% - 30rem);}
#look_wrap .look_area ul {display:flex; flex-wrap: wrap;}
#look_wrap .look_area ul li {width: 50%;margin-bottom:3rem;}
#look_wrap .look_area .look_box {margin:2rem; }
#look_wrap .look_area .look_box .thumb {min-height:auto; max-height:40rem }
#look_wrap .look_area .look_box .thumb img {width: 100%; display: block;}
#look_wrap .look_area .look_box .title {margin-top:2rem;}
#look_wrap .look_area .look_box .title span {font-size: 1.125em; display: inline-block;margin-bottom:.5rem;}
#look_wrap .look_area .look_box .title p {font-size: 2em;		}

#item_wrap  {position: relative; height: 60rem; }
#item_wrap .title_area {height: 60rem;}
#item_wrap .item_area {position: absolute; right:0; width: calc(100% - 30rem - 4.5%); overflow:hidden;}
#item_wrap .item_area ul { height: 60rem;}
#item_wrap .item_area ul li {width: 35rem;}
#item_wrap .item_area .item_box {}	
#item_wrap .item_area .item_box .thumb {width: 100%; height: 45rem; background-color:var(--gray1);display:flex; flex-direction: column; justify-content: center;}
#item_wrap .item_area .item_box .thumb .tag {position: absolute; top:1rem; left:1rem; display: flex;}
#item_wrap .item_area .item_box .thumb .tag em {background:var(--black); margin:.2rem; color:var(--white); font-size: .7em; padding:.3rem .5rem;}
#item_wrap .item_area .item_box .thumb img {width: 100%; mix-blend-mode: multiply;} 
#item_wrap .item_area .item_box .title {text-align: center; margin-top:2rem;}
#item_wrap .item_area .item_box .title span {font-size: .9em; font-weight: bold;}
#item_wrap .item_area .item_box .title p {font-size: 1.25em; width: 100%; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}

@media screen and (max-width: 1400px) {
	.main_content .title_area h2 {font-size: 10rem;}
}
@media screen and (max-width: 1024px) {
	.main_content {margin:10rem 0;}
	.main_content > div.inner {flex-direction: column;}
	.main_content .title_area {margin-bottom: 1rem;}
	.main_content .title_area h2 {font-size: 4em; transform:none;margin: 0;  position: relative;right: auto; left: auto;  bottom: auto;}
	#look_wrap .look_area {width: 100%;}
	#look_wrap .look_area .look_box {margin:0; }
	#look_wrap .look_area ul li:nth-child(odd) .look_box {margin-right:3%;}
	#look_wrap .look_area ul li:nth-child(even) .look_box {margin-left:3%;}

	#item_wrap {height: auto;}
	#item_wrap .item_area {position: relative; width: 100%;}
	#item_wrap .title_area {height: auto;}
	#item_wrap .item_area ul {height: auto; padding-bottom:5rem	}
	#item_wrap .item_area .item_box .thumb {height: auto;padding:3rem 0;}
}
@media screen and (max-width: 768px) { 
	#look_wrap .look_area ul li {width: 100%;margin-bottom: 5rem;}
	#look_wrap .look_area ul li:nth-child(odd) .look_box {margin-right:0;}
	#look_wrap .look_area ul li:nth-child(even) .look_box {margin-left:0;}
	#look_wrap .look_area .look_box .title {margin-top: 1rem;}
	#look_wrap .look_area .look_box .title p {font-size: 1.5em;	}
	.main_content .title_area h2 {font-size: 2.5em;}
	#item_wrap .item_area .item_box .thumb {padding:0;}

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

}