@charset "utf-8";
/* CSS Document */
.visual-wrap { width: 100%; height: 100vh; overflow: hidden; position: fixed; left: 0; top: 0; } 
.visual-wrap .image-wrap { width: 100%; height: 100%; position: relative; } 
.visual-wrap .image-wrap img { object-fit: cover; object-position: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; z-index: 1; transition: opacity 1s ease-in-out; } 
.visual-wrap .image-wrap img.show { opacity: 1; z-index: 2; }

.visual-wrap .controller{display:flex; align-items: center; position:absolute; bottom:var(--gap-80);  left:50%; transform: translate(-50%,0); z-index: 4;}
.visual-wrap .controller > li{margin-right:11px; cursor: pointer;}
.visual-wrap .controller > li:last-child{margin-right:0;}
.visual-wrap .controller > li > svg > path{fill:#fff;}
.visual-wrap .controller > li.on > svg > path{fill:#D40000;}

.visual-wrap .txt-box{position:absolute; transform: translate(-50%,-50%); top:50%; left:50%; z-index: 4; width:calc(100% - var(--layout-flax-margin)); }
.visual-wrap .txt-box > p{color:#fff; text-align: center;}
.visual-wrap .txt-box > .slogun1{font-size:var(--font-size-huge); line-height: 120%;}
.visual-wrap .txt-box > .slogun2{font-size:var(--font-size-medium); line-height: 170%;}


.exhibition-wrap{width:100%; padding:var(--gap-140) 0; position:relative; margin-top:100vh; background-color: #fff;}
.exhibition-wrap > .inner-wrap{max-width:var(--layout-width); width:calc(100% - var(--layout-flax-margin)); margin:0 auto; display:flex; justify-content: space-between; flex-wrap: wrap;}
.exhibition-wrap > .inner-wrap .image-wrap{width:100%; max-width:391px; position:relative; }
.exhibition-wrap > .inner-wrap .image-wrap:after{content:""; display:block; padding-top:142%;}
.exhibition-wrap > .inner-wrap .image-wrap .inner-image{overflow: hidden; position:absolute;}
.exhibition-wrap > .inner-wrap .image-wrap img{object-fit: cover; object-position: center;  position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); }
.exhibition-wrap .info-box{display:flex; flex-direction: column; justify-content: space-between; height: inherit; }
.exhibition-wrap .info-box > .top-box > .tlt{font-size:var(--font-size-xxxxlarge); color:#000; font-weight:800; margin-bottom:var(--gap-40);}
.exhibition-wrap .info-box > .top-box > .stlt{font-size:var(--font-size-large); color:#000; font-weight:500;  margin-bottom:var(--gap-15);}
.exhibition-wrap .info-box > .top-box > .info{font-size:var(--font-size-normal); color:var(--color-font);}

.exhibition-wrap .info-box > .bottom-box > .tlt{font-size:var(--font-size-normal); color:var(--color-font); margin-bottom:var(--gap-5);}
.exhibition-wrap .info-box > .bottom-box > .info{font-size:var(--font-size-normal); margin-bottom:var(--gap-5); font-weight: 600;}

.iconic-wrap{width:100%; height: auto; background-color:#fff;  position:relative; overflow: hidden;}
.iconic-wrap > .container{width:100%; height: auto; background-color:#EBEDF1;  padding:var(--gap-140) 0;}
.iconic-wrap > .container > .inner-wrap{width:calc(100% - var(--layout-flax-margin)); max-width:var(--layout-width); height: auto; margin:0 auto; display:flex; flex-wrap:wrap; position:relative; justify-content: space-between;}
.iconic-wrap > .container > .inner-wrap > .text-box{width:100%; max-width:400px;}
.iconic-wrap > .container > .inner-wrap > .text-box > .tlt{font-size:var(--font-size-xxxxlarge); font-weight: 700; line-height: 120%; margin-bottom:var(--gap-40); text-transform: uppercase;}
.iconic-wrap > .container > .inner-wrap > .text-box > .cont{font-size:var(--font-size-normal); color:var(--color-font);}
.iconic-wrap .right-wrap{position:absolute;  right:40px; top:0; width:calc(100% - var(--layout-flax-margin));  max-width:640px; padding:var(--gap-140) 0;}
.iconic-wrap .right-wrap .obj-box{display:flex; margin-bottom:var(--gap-40); flex-wrap:wrap;}
.iconic-wrap .right-wrap .obj-box > .txt-box{width:28%; margin-right:var(--gap-20);}
.iconic-wrap .right-wrap .obj-box > .txt-box > .tlt{font-size:var(--font-size-large); font-weight: 500; margin-bottom:5px; line-height: 120%; text-align: right;}
.iconic-wrap .right-wrap .obj-box > .txt-box > .info{font-size:var(--font-size-medium); color:var(--color-font); text-align: right;}
.iconic-wrap .right-wrap .obj-box > .image-wrap{width:calc(72% - var(--gap-20)); max-width:428px; position:relative;}
.iconic-wrap .right-wrap .obj-box > .image-wrap:after{content:""; display:block; padding-top:63%;}
.iconic-wrap .right-wrap .obj-box > .image-wrap > .inner-wrap{overflow: hidden; position:absolute; background-size:cover; background-position: center;}
.iconic-wrap .right-wrap .obj-box > .image-wrap > .inner-wrap img{object-fit: cover; object-position: center;  position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);}

@media only screen and (max-width:1065px){
	.iconic-wrap .right-wrap{max-width:428px;}
	.iconic-wrap .right-wrap{left:50%; transform: translate(-50%,0);}
	.iconic-wrap .right-wrap .obj-box{flex-direction: column-reverse;}
	.iconic-wrap .right-wrap .obj-box > .image-wrap{width:100%;}
	.iconic-wrap .right-wrap .obj-box > .txt-box{margin-top:10px; width:100%;}
	.iconic-wrap .right-wrap .obj-box > .txt-box > .tlt{text-align: left;}
	.iconic-wrap .right-wrap .obj-box > .txt-box > .info{text-align: left;}
	.iconic-wrap .right-wrap .obj-box > .txt-box{margin-right:0;}
	
	
}

@media only screen and (max-width:768px){
	.exhibition-wrap > .inner-wrap{display:block;}
	.exhibition-wrap > .inner-wrap .image-wrap{margin:var(--gap-80) 0;}
	.exhibition-wrap .info-box > .bottom-box{margin-top:var(--gap-20);}
}

@media only screen and (max-width:640px){
	.visual-wrap{height: 600px;}
	.exhibition-wrap{margin-top:600px;}
	.visual-wrap .txt-box > .slogun1{line-height: 100%; margin-bottom:var(--gap-10);}
	.controller{height: 25px; overflow: hidden;}
}