@charset "UTF-8";
/* MAIN VISUAL */
.visual-wrap {
	background:var(--bs-gray-200);
	height: 45vw;	
	height: 45vw;
	max-height:400px;
	position:relative;
}
.visuals {
	height:100%;
}
.visuals .swiper-slide{
	display: flex;
	justify-content: center;
	align-items:center;
}
.visuals .swiper-slide h1  {
	color:#fff;
	text-shadow: 4px 4px 10px #00000029;
	text-align:center;
	font-weight: bold;	
	animation: first-slide 0.6s;
	animation-delay: 0.6s;
	opacity:0;
	transition:.3s;
	transition-delay:1s;
	z-index:1;	
}

.swiper-slide-active h1 { 
	opacity:1 !important;
}


.visuals .swiper-slide img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
}

.visual-wrap .page-control {
	position:absolute;
	bottom:40px;
	left:10%;
	z-index:10;
	width:270px;
	display:flex;
	justify-content: space-between;
	align-items:center;
	color:#fff; 
}
.page-control .swiper-pagination-total {
	padding-left:240px;
}

.page-control .swiper-progress-bar {
  position: absolute;
  width: 0px;
  display: block;
  z-index: 1;
  height: 3px;
  background:#fff;
}

.swiper-progress-bar .slide_progress-bar {
  position: absolute;
  height: 3px;
  width:200px;
  background:rgba(249,249,250,.5);
  width: auto;
  clear: both;
  opacity: 0;
  top:0;
  left: 32px;
}
.swiper-progress-bar .slide_progress-bar:after {
  position: absolute;
  top:0;
  left:0;;
  content: "";
  width:0; height:3px; background: #fff;
  transition: 0.1s height linear;
}
.swiper-progress-bar.active .slide_progress-bar {
  opacity: 1;
  width:200px;
}
.swiper-progress-bar.animate .slide_progress-bar:after {
  transition: all linear;
  transition-delay: unset;
  width:100%;
  transition-duration: 4s;
}

@keyframes barMove {
	0 {width:0}
	100% {width::100%;}
}

.visual-wrap .swiper-button-prev{
	left: 3% !important;
}
.visual-wrap .swiper-button-next {
	right: 3% !important;
}

.visual-wrap .swiper-button-next:after,
.visual-wrap .swiper-button-prev:after {
	display: none;
}

.visual-wrap .swiper-button-next img,
.visual-wrap .swiper-button-prev img {height: 88px;}

.m-view{
	display: none;
}
.pc-view{
	display: block;
}

/* NOTICE & MOVIE */
.notice-wrap {
	height: 65px;
	display: flex;
	justify-content: center;
	align-items: center;
	position:relative;
}
.notice-wrap .notice {
	display: flex;
	align-items: center;
}
.notice-wrap .notice a {
	position: relative;
	padding-left:36px;
}
.notice-wrap .notice a::before {
	content:url('/images/assets/main/i-volume.svg');
	position: absolute;
	left:0;
	top:4px;
}
.notice-wrap .bg-right {
	width: 30%;
	height: 160px;
	background-color: #6743C5;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
}
.notice-wrap .bg-right .proVideo {
	width: 285px;
	position: relative;
}
.notice-wrap .bg-right .proVideo img{
	width: 100%;
}
.notice-wrap .bg-right .proVideo::before {
	content:url(/images/assets/main/i-play.svg);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

#videoModal {
    background: rgba(0,0,0,.8);
}
#videoModal .modal-fullscreen {
	width: 80vw;
	height: auto;
	margin: auto;
	display: flex;
	align-items: center;
	min-height: 100%;	
}
#videoModal .modal-content {
	background: transparent;
}

#videoModal .modal-content .btn-close {
	position: absolute;
	right:0;
	top:0;
	z-index: 1;	
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/2em auto no-repeat;
}

#videoModal .modal-body {
	padding:0 3rem;
}

/* EXHIBITION */
.exhibition-wrap {
	padding:5rem .75rem 1rem;
	position: relative;
}
.exhibition-wrap h3 {
	position:relative;
}
.exhibition-wrap h3 > a {
	display: flex;
	align-items:center;
	position:absolute;
	top: 50%;
	transform: translateY(calc(-50% - 0.5rem));
	right:0;
	font-weight:normal !important
}
.exhibition-wrap .card{
	border:none;
}
.exhibition-wrap .card .imbWrap {
	background:var(--bs-gray-100);
	/* padding:2.5rem; */
    max-height: 240px;
	border-radius: 0.375rem;
}

.exhibition-wrap .card .card-body {
	padding: 1.5rem 0 0 0;
}
.exhibition-wrap .card .card-body .classify{
	background:var(--bs-dark);
	color:#fff;
	min-width:70px;
	height:55px;
	padding: 0 1rem;
	display:flex;
	justify-content:center;
	align-items:center;
	position: absolute;
	bottom:28%;	
}

/* swiper customizing */
.exhibition-wrap .swiper-button-prev{
	left: -7% !important;
}
.exhibition-wrap .swiper-button-next {
	right: -7% !important;
}
.exhibition-wrap .swiper-button-next,
.exhibition-wrap .swiper-button-prev {
	width:auto;
	height:auto;
	margin-top:calc(0px - (115px/ 2));}

.exhibition-wrap .swiper-button-next:after,
.exhibition-wrap .swiper-button-prev:after {
	display: none;
}

.swiper-button-prev,
.swiper-button-next {
	transition: .3s;
}
.swiper-pagination-bullet-active {
	background-color:var(--bs-dark) !important;
	border-radius: 5px !important;
	width:30px !important;
	height:10px !important;
}

.line-banner {padding-bottom:5rem;}
.line-banner a {
	display: block;
	height: 160px;
	text-indent: -99999px;
	background:#B4E8EE url(/images/assets/main/video-guide.svg) no-repeat center / cover;
}
	

/* ART */
.art-wrap {
	background: linear-gradient(142deg, #262129 0%, #342263 100%) 0% 0% no-repeat padding-box;
	padding:5rem .75rem 0;
	margin-bottom:5rem;
}

.art-wrap .art-title {
	border:1px solid #D0A0FF;
	text-align: center;
	margin: 0 auto;
	width: 160px;
	padding: 1.5rem 0;
}
.art-wrap .arts .swiper-wrapper {
	display: flex; 
	flex-wrap: wrap; 
	justify-content:space-between;
}

.art-wrap .arts .art-list {
	position: relative; 
	display: block; 
	margin: 5rem 5% 0 5%; 
	max-width: 416px;
	width:40%
}

.art-wrap .arts .art-list:nth-child(2n) {
	top: 80px; 
	margin-top: 80px;
}
.art-wrap .arts .art-list:nth-child(2n-1){top: 0;}

.art-wrap .arts .art-list:last-child {
	margin-bottom: 80px;
}

.art-wrap .arts .art-list .card {
	position: relative;
	top: 0;
	border:none;
	background:transparent;
	text-align: center;
}

.art-wrap .arts .art-list .card .card-body img {
	border-radius: .375rem;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
	margin-bottom:1.5rem
}

.art-wrap .arts .swiper-pagination {display: none;}
.art-wrap .arts .swiper-pagination-bullet-active {
	background-color:var(--bs-white) !important;
}

/* ART-v2 */
.art-wrap-v2 {margin-bottom: 4rem;}
.art-wrap-v2 .art-title h3 {
	border-top: 4px solid var(--bs-black);
	padding: 1.5rem 0;
}

.art-wrap-v2 .art-title .btn {
	border: 1px solid var(--bs-gray-300);
	padding: 0.275rem 0.75rem;
	margin-bottom: 0.5rem;
}

.art-wrap-v2 .art-title a {
	display: flex;
	align-items: center;
}

/* AUTHOR */

.author-wrap {
	padding: 2.5rem;
}
.author-wrap .authors {
	display:flex;
	justify-content: space-between;
	align-items:center	
} 

.author-wrap .authors .swiper-btn {
	width:40%;
}
.author-wrap .authors .swiper-btn h3 {
	margin-bottom: 3.75rem;	
}
.author-wrap .authors .swiper-btn .swiper-pagination-bullet {
	width: 80% !important;
	height: 3.75rem !important;
	margin-bottom: 0.625rem !important;
	display: flex;
	align-items: center;
	padding: 0 1.875rem;
	border-radius: 0.375rem !important;
	background: white;
	opacity: 1;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.author-wrap .authors .swiper-btn .swiper-pagination-bullet:only-child {
	display:flex !important;
}
.author-wrap .authors .swiper-btn .swiper-pagination-bullet p {
	display: flex;
	justify-content: space-between;
	align-items:center;
	width: 100%;
	font-size:var(--fs-p18)
}

.author-wrap .authors .swiper-btn .swiper-pagination-bullet-active {
	background-color:var(--bs-primary) !important;
	color: #fff;
}

.author-wrap .authors .swiper {
	width:60% !important;
}
.author-wrap .authors .swiper a {width: 100%; height: 100%}
.author-wrap .authors .swiper img {
    width: 100%;
    height: 400px;
    object-fit: cover;
	transition: .3s;    
}

/* B2B */
.b2bs{padding: 0;}
.b2bs, 
.b2bs .swiper {height:400px;}
.b2bs .swiper-slide img {
	position: relative;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
}
.b2bs .swiper-slide ul {
	position: absolute;
	width:80%;
	left: 50%;
	top: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	margin-bottom: 0;
}
 
.b2bs .swiper-slide ul li{
	opacity: 0; 
	transform: translateY(20px);
	word-break: keep-all;
	word-wrap: break-word;	
}

.b2bs .swiper-slide-active ul .t01 { 
	animation: hero-text-ani 0.8s .5s forwards;
}
.b2bs .swiper-slide-active ul .t02 { 
	animation: hero-text-ani  0.8s .5s forwards;
}
.b2bs .swiper-slide-active ul .t03 { 
	animation: hero-text-ani  0.8s 1s forwards;
}

@keyframes hero-text-ani {
	0% {transform: translateY(20px); opacity: 0;}
	100% {transform: translateY(0px); opacity: 1;}
}

.b2bs .btn{
	display: flex;
	width: 200px;
	height: 60px;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
}

.cscenter {
	background: url(/images/assets/main/cscenter.png) no-repeat center / cover;
	background-attachment: fixed;
	height:440px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.cscenter .btn{
	display:flex;
	justify-content: center;
	align-items: center;
	width:306px;
	height:70px;
	text-align:center;
	background: #fff;
	border-radius:.375rem;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
	margin: 0 0.75rem;
	border:0;
}

/* 3dvr */
.vr-wrap {padding: 5rem .75rem;}
.vr-wrap .card {border:none;}
.vr-wrap .card .imbWrap {border-radius: 0.375rem;}
.vr-wrap .card .card-body {
    padding: 1.5rem 0 0 0;
}

@media (max-width: 1440px) {
	/* swiper customizing */
	.exhibition-wrap .swiper-button-prev,
	.exhibition-wrap .swiper-button-next {
		display:none
	}
	.notice-wrap .bg-right {
		width: auto;
	}	
}

@media (max-width: 1199.98px) {
	.visual-wrap .page-control {
		left: 50%;
    	transform: translateX(-50%);
	}
	.notice-wrap .bg-right {
		display:none
	}
	
	.exhibition-wrap .card .imbWrap {max-height: 180px;}

	.line-banner a {height:130px;}

	
	.cscenter .btn{
		width:200px;
	}	
	
		
}

@media (max-width: 991.98px) {
	
	.exhibition-wrap .card .imbWrap {max-height: 140px;}
	.line-banner a {height:100px;}
	
	.author-wrap .authors {
	    flex-direction: column;
	}
	.author-wrap .authors .swiper-btn,
	.author-wrap .authors .swiper {
		width: 100% !important;
	}
	.author-wrap .authors .swiper-btn h3 {
		text-align:center;
		margin-bottom: 2rem;
	}
	.author-wrap .author-pagination {
		display:flex;
	}
	.author-wrap .authors .swiper-btn .swiper-pagination-bullet {
		width: 33.3% !important;
		margin-bottom: 2rem !important;
		padding: 0;
	}	
	.author-wrap .authors .swiper-btn .swiper-pagination-bullet p {
		padding: 0 1rem;
		display: block;
		text-align: center;
		word-break: keep-all;
/* 		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; */
		width: 100%;
	}
	.author-wrap .authors .swiper-btn .swiper-pagination-bullet p i {
		display:none;
	} 
	.b2bs .btn{
		width: 210px;
		height: 60px;
	}
		
}


@media (max-width:768px) {

	.art-wrap .arts .swiper-wrapper {
		flex-direction: unset; 
		flex-wrap: nowrap; 
		justify-content:flex-start;
	}
	.art-wrap .arts .art-list {
		top: 0; 
		margin-top: 0; 
		margin-left: 0; 
		width: 100%;
		max-width:100%
	}
	.art-wrap .arts .art-list:nth-child(2n) {
		top: 0;
		margin-top: 0;
	}	
	.art-wrap .arts .swiper-pagination {
		display: block; 
		bottom: 0; 
	}
	.art-wrap .arts .swiper-pagination .swiper-pagination-bullet {
		vertical-align: top;
		background-color: rgba(199, 199, 199, 0.5);
		opacity: 1;
	}
	.art-wrap .arts .swiper-pagination .swiper-pagination-bullet-active {
		background-color: #fff;
	}
	
	.b2bs, .b2bs .swiper {height: 320px;}
	.b2bs .btn{
		width: 150px;
		height: 46px;
	}		
		
}

@media (max-width: 767.98px) {
	.art-wrap-v2 {margin-bottom: 1rem;}	
	.visual-wrap {
		height:260px
	}
	
	.visual-wrap .swiper-button-prev,
	.visual-wrap .swiper-button-next {
		display:none
	}
	
	.visual-wrap .page-control {
		width:100px;
		bottom: 5%;
	}
	
	.swiper-progress-bar .slide_progress-bar { 
		width:60px !important;
		left:16px;
	}	
	.page-control .swiper-pagination-total {
	    padding-left: 80px;
	}
	
	.notice-wrap {
		height:55px
	}
	.notice-wrap .notice a {
		display:block;
		height:18px;		
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;	
	}
	.notice-wrap .notice a::before {
		top:0;
	}
	.exhibition-wrap {
		padding: 3rem 0.75rem 1rem;
		position: relative;
	}	
	.line-banner {padding-bottom:3rem;}
	.line-banner a {
		height: 20vw;
		background-size: 140%
	}
	.vr-wrap {padding: 3rem 0.75rem}
	.art-wrap {
    	padding: 3rem 0.75rem 1.5rem;
    	margin-bottom: 3rem;
	}
	
	.art-wrap .arts {
		height: auto;
		margin-top: 1.5rem;
		padding-bottom:2.5rem;
	}
	
	.author-wrap {
		padding: 2.5rem 1rem;
	}
	.author-wrap .authors .swiper img {
	    height: 240px;
	}
	
	.cscenter {
		height: auto;
		padding:3rem 0;
	}
	.cscenter h2 + div {
		width: 94%;
		justify-content: space-evenly;
		align-items: center;
	}	
	.cscenter .btn{
		width:30%;
		height:60px;
		margin: 0.75rem 0;
		word-break: keep-all;
		font-size: .875rem !important;
	}
}

@media (max-width: 575.98px) {
	.m-view{display: block;}
	.pc-view{display: none;}
	
	.art-wrap-v2 .art-title {position:relative;}
	.art-wrap-v2 .art-title h3 {
		border-top: none;
		padding: 0;
	}
	.art-wrap-v2 .art-title ul {display: flex;}
	.art-wrap-v2 .art-title ul li {padding-right:.5rem}
	.art-wrap-v2 .art-title ul li:last-child {padding-right:0}
	.art-wrap-v2 .art-title a {
		position:absolute;
		top: 3px;
		right: 0.75rem;
	}
	.b2bs img.objPos {object-position: left;}
		
	.exhibition-wrap .card .imbWrap {max-height: 120px;}	
	.vr-wrap .card .imbWrap {max-height: 140px;}
	.vr-wrap .card .imbWrap img{object-fit: cover}
	.vr-wrap .card .card-body {padding:.75rem 0 1.5rem 0}
	.vr-wrap .card:last-child .card-body {padding-bottom:0}
	.vr-wrap .card .card-title {margin-bottom:0}
}