@import url("common.css");


/* 슬릭 CSS */
.slick-slider{position: relative;display: block;box-sizing: border-box;
		-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;
			touch-action: pan-y;-webkit-tap-highlight-color: transparent; outline: 0 !important;}
.slick-list{position: relative;display: block;overflow: visible;margin: 0; padding:0 !important;  outline: 0 !important;}
.slick-slide{float: left; outline: 0 !important; border:0;}
.slick-initialized .slick-slide{display: block; outline: 0 !important;}



/* 인트로 */
#background video{position:relative;
    top: 50%;
    /*left: 50%;
    min-width: 100%;
    min-height: 100%;*/
    width: 100%;
    height: auto;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);}
	video[poster]{ /* 포스터 이미지의 크기를 비디오 영상에 꽉차도록 */ height:100%; width:100%;}

#background  iframe {position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);}



#intro_wrap{opacity:1; max-width:640px; margin:0 auto; width:100%;  min-width:320px; position:relative; overflow:hidden;}
#intro_wrap.action{animation: fadeIin 2s linear forwards; }
#intro_wrap {background:#000;  width:100%; height:100%; }
#intro_wrap .gallery{position:absolute; width:100%; height:100%; background:url('/img/intro_bg.jpg') no-repeat; background-size:cover; z-index:0;}
#intro_wrap .cont_in {height:100%; opacity:0;}
#intro_wrap.action .cont_in {animation: fadeIin .5s linear forwards; animation-delay:1s;}
#intro_wrap .logo {position:absolute; width:100%; z-index:999; padding:15px 0; text-align:right; opacity:1;}
#intro_wrap .logo img{width:90px; margin-right:4%}
#intro_wrap .gallery .logo {opacity:1; text-align:left; margin-left:4%}


#background {position:absolute; width:100%; height:100vh; top:0; left:0; overflow:hidden; z-index:0; height: -webkit-fill-available; opacity:1; max-width:640px; }
#intro_wrap.action #background {animation: fadeOut 0.6s linear forwards; animation-delay:19s;}
#background .jarallax{width:100%; height:100%;}

/* .intro_mute{z-index:99; position:absolute; right:3%; bottom:3%;}
#intro_wrap.action .intro_mute{animation: fadeOut2 0.6s linear forwards; animation-delay:19s;} */

.intro_mute{z-index:99; position:absolute; right:3%; bottom:3%;}
#intro_wrap.action2 .logo {animation: fadeIin 0.6s linear forwards; animation-delay:19s;}
#intro_wrap.action2 .intro_mute{animation: fadeOut2 0.6s linear forwards; animation-delay:19s;}
#intro_wrap .intro_mute.on{animation: fadeOut2 0.6s linear forwards; animation-delay:1s;}


.intro_mute p{display:inline-block; vertical-align:middle; padding-left:10px; position:relative; top:-2px;}
.intro_mute p a{display:block; color:#fff; font-family: "Outfit", serif; font-size:15px; color:#fff; letter-spacing:0.3pt; text-decoration: underline}

	.unmute{display:inline-block; vertical-align:middle; background:url('/img/speaker_on.png') no-repeat; width:30px; height:30px; border:0; font-size:0; cursor:pointer; background-size:100% !important;}
	.unmute.on{background:url('/img/speaker_off.png') no-repeat}



#intro_wrap .intro_main{width:100%; text-align:left; left:0; position:absolute; opacity:0; top:50%; height:auto; padding:0 3%; box-sizing:border-box; text-align:center;}
#intro_wrap.action .intro_main{animation: fadeIin 0.6s linear forwards; animation-delay:19s;}
#intro_wrap .intro_main h1{position:relative; font-family: "freight-big-pro", serif; font-size:80px; color:#fff; letter-spacing:0.8pt; line-height:0.95; margin-bottom:20px}
#intro_wrap .intro_main h1 img{width:160px;}
#intro_wrap .intro_main .homeBtn2{display:inline-block; background:#222; color:#fff; font-family: "Outfit", serif; font-size:13px; padding:0 15px; color:#fff; letter-spacing:0.3pt; line-height:40px; font-weight:400; transition: all 0.5s;}
#intro_wrap .intro_main .homeBtn2:hover{background:#fff; color:#222; transition: all 0.5s;}

@keyframes fadeIin {
0% {opacity:0;}
100% {opacity:1;}
}

@keyframes fadeOut {
0% {opacity:1;}
100% {opacity:.6;}
}

@keyframes fadeOut2 {
0% {opacity:1;}
100% {opacity:0;}
}

@keyframes ani_motion {
0% {opacity:0; top:50px;}
100% {opacity:1; top:0;}
}
/* 인트로 */


/* Exhibitions */
.exhibitionWrap {position:absolute; top:50%; width:94%; left:50%; transform:translate(-50%,-50%);}
.exhibitionWrap .slick-list {overflow:hidden; width:100%; }
.exhibitionWrap .slick-track {display:flex;justify-content: center;align-items: center; margin:0 auto;}
.exhibition_cont {margin-left:-10px;}

.exhibition_cont .slick-dots {font-size:0; text-align:center; position:absolute; bottom:30px; left:0; width:100%;}
.exhibition_cont .slick-dots li {display:inline-block; margin-right:10px;}
.exhibition_cont .slick-dots li:last-child {margin-right:0;}
.exhibition_cont .slick-dots li button {border:0; background:none; font-size:0.882rem; cursor:pointer; padding:0; margin:0; color:#999;}
.exhibition_cont .slick-dots li.slick-active button {font-weight:bold; color:#fff;}

.exhibition_cont .slick-arrow {width:6px; height:12px; font-size:0; position:absolute; bottom:35px; border:0; background-repeat:no-repeat; background-position:center; cursor:pointer; z-index:99;}
.exhibition_cont .slick-prev {left:10px; background:url('/img/prev_w.png') center no-repeat}
.exhibition_cont .slick-next {right:0; background:url('/img/next_w.png') center no-repeat}

.intro_exhibition dl {}
.intro_exhibition dl dd {padding-bottom:30px !important; text-align:center;}
.intro_exhibition dl dd h4 {}
.intro_exhibition dl dd h4 span {}
.intro_exhibition dl dd p {}
.intro_exhibition dl:hover dd p {}

.homeBtn {position:relative; font-family: "Outfit", serif; font-size:13px; color:#111; letter-spacing:0.3pt; line-height:1; font-weight:400; display:inline-block; margin:50px 0 0; left:50%; transform:translateX(-50%); transition:all 0.5s}
.homeBtn:after {content:''; width:100%; height:1px; background:#111; position:absolute; bottom:-1px; left:0;}
.homeBtn:hover {letter-spacing:2pt; transition:all 0.5s;}
#intro_wrap.action .homeBtn {animation: fadeIin 0.6s linear forwards; animation-delay:8s;}


#exhibition {overflow:hidden;}
#exhibition .exhibition_cont {position:relative; /* margin-left:100px;  */opacity:0; top:-50px; text-align:center;}
#exhibition.action .exhibition_cont {opacity:1; top:0; transition:all 1s; transition-delay:1s;}
#exhibition .exhibition_cont .mCustomScrollBox {}
#exhibition .exhibition_cont:after {content:''; display:block; clear:both;}
.exhibition_cont{width:100%; box-sizing:border-box; overflow:hidden; font-size:0; padding-bottom:60px; margin-left:-10px;}
.exhibition_cont dl {float:none;  vertical-align:bottom; position:relative; overflow:hidden; margin-left:20px; align-self:center;}
.exhibition_cont dl dt {overflow:hidden; vertical-align:bottom;  box-sizing:border-box;}
.exhibition_cont dl img {display:inline-block; background-repeat:no-repeat; background-size:cover; background-position:center bottom; transition:all 0.3s; width:100%;  vertical-align:bottom;}
.exhibition_cont dl dd {position:relative; text-align:center;}
.exhibition_cont dl dd h3 {font-size:15px; letter-spacing:-0.5pt; font-weight:500; color:#fff; margin:15px 0 0; transition:all 0.3s;}
.exhibition_cont dl dd h4 {font-size:15px; font-weight:500; color:#fff; margin:0 0 0; transition:all 0.3s;}
.exhibition_cont dl dd span {font-size:13px; display:block; color:rgba(255,255,255,0.7); font-weight:300;}
.exhibition_cont dl dd p {font-family: "Outfit", serif; font-size:13px; color:rgba(255,255,255,.7); letter-spacing:0.3pt; line-height:1; transition:all 0.3s; margin:6px 0 0;}

.exhibition_cont dl dd .sp{position:absolute; top:3px; right:0; font-size:12px; font-weight:normal; background:#fe9a44; color:#fff; line-height:20px; padding:0 4px; letter-spacing:-0.5pt;}
.exhibition_cont dl dd .sp.past{background:#888}

/* Exhibitions */


/* 인트로 */
#intro{position:absolute; top:0; width:100%; height:100%; background:#000; z-index:1000000; text-align:center; overflow:hidden}
#intro .intro_in{position:absolute; width:100%; top:50%; transform:translateY(-50%);}
#intro .intro_in .intro_btn{position:relative; display:inline-block; width:450px; cursor:pointer; transition: all 0.5s}
#intro .intro_in .intro_btn:hover{opacity:.4; transition: all 0.5s;}


/* 인트로 */
#intro{position:absolute; top:0; width:100%; height:100%; background:#000; z-index:1000000; text-align:center; overflow:hidden}
#intro .intro_in{position:absolute; width:100%; top:50%; transform:translateY(-50%);}
#intro .intro_in .intro_btn{position:relative; display:inline-block; width:300px; cursor:pointer; transition: all 0.5s}
#intro .intro_in .intro_btn:hover{opacity:.4; transition: all 0.5s;}

#intro_wrap .intro_main2{opacity:0; z-index:999}
#intro_wrap.action2 .intro_main2{animation: fadeIin 0.8s linear forwards; animation-delay:19s;}
#intro_wrap .intro_main2.on{animation: fadeIin 0.8s linear forwards; animation-delay:0;}
.tit_wrap{text-align:center; padding-bottom:30px;}
h3.title {position:relative; font-family: "freight-big-pro", serif; font-size:28px; font-weight:300; color:#fff; line-height:1;}
h3.title b {font-family:inherit; font-size:inherit; color:inherit; line-height:inherit; font-weight:800;}
p.stxt {position:relative; font-size:1rem; color:#fff; letter-spacing:-0.7pt; line-height:1.7; margin:4px 0 0;}


/* 220419 */
#intro_wrap .intro_main3{opacity:1; z-index:90;}
#intro_wrap.action2 .intro_main3{animation: fadeIin 0.8s linear forwards; animation-delay:19s;}
#intro_wrap .intro_main3.on{animation: fadeIin 0.8s linear forwards; animation-delay:0;}
#intro_wrap .intro_main3.on .logo {animation: fadeIin 0.8s linear forwards; animation-delay:0;}

.intro_main3{position:relative; width:100%; background:#f1e9e3;}
.intro_main3 .intro_main3_bg {width:100%; position:relative; overflow:hidden;}
.intro_main3 .intro_main3_bg:after {content:''; width:100%; height:100%; background:#fd9944; position:absolute; top:0; right:0; transition:all 1s;}
.intro_main3 .intro_main3_bg img {width:100%;  background-size:cover; background-position:center; background-repeat:no-repeat;}
#intro_wrap .intro_main3 .intro_main3_bg.active:after {width:0; transition:all 1s; transition-delay:0.3s !important;}
#intro_wrap .intro_main3.on .intro_main3_bg:after {width:0; transition:all 1s; transition-delay:0s !important;}
.intro_main3 dl {font-size:0; padding:30px 3%; box-sizing:border-box; background:#f1e9e3;}

.intro_main3 dl dt {display:block; margin:0 0 30px;opacity:0; visibility:hidden; transition:all 1s; position:relative; top:-50px;}
.intro_main3 dl.active dt {opacity:1; visibility:visible; transition:all 1.5s; top:0; transition-delay:1s;}

.intro_main3 dl dt h1 {width:120px;}
.intro_main3 dl dt h2 {font-size:17px; color:#222; line-height:1; letter-spacing:0.4pt;}
.intro_main3 dl dt p.lnb {color:#666; line-height:1.35; font-weight:300; display:inline-block; position:relative;  margin:15px 0 20px;font-size:1rem;}
.intro_main3 dl dt .btn_gallery {width:160px; height:42px; box-sizing:border-box; }
.intro_main3 dl dt .btn_gallery a {display:block; padding:0 15px;  line-height:40px;color:#222; box-sizing:border-box; letter-spacing:-0.3pt; background:#fff url('/img/intro_arrow.png')no-repeat center right 15px; border:1px solid #222;  transition:all 0.3s; font-size:1rem; animation: btn_gallery 1.5s ease-in-out infinite; background-size:12px !important;}
/*.intro_main3 dl dt .btn_gallery:hover a {background:#f9f9f9 url('/img/intro_arrow.png')no-repeat center right 24px; transition:all 0.3s;}*/

.intro_main3 dl dd {position:relative;}

.intro_main3 dl li p {position:relative; top:-30px; opacity:0; visibility:hidden; transition:all 1.6s;}
.intro_main3 dl.active li p {opacity:1; visibility:visible; transition:all 1.6s; top:0;}
.intro_main3 dl li.delay1 p {transition-delay:2s;}
.intro_main3 dl li.delay2 p {transition-delay:3.5s;}
.intro_main3 dl li.delay3 p {transition-delay:5s;}

.intro_main3 dl dd h3 {font-size:20px; color:#222; line-height:1;}
.intro_main3 dl dd h5 {font-weight:500; color:#222; letter-spacing:0.2pt; line-height:1; font-size:17px; margin:20px 0 10px;}
.intro_main3 dl dd p {color:Rgba(34,34,34,0.7); letter-spacing:-0.2pt; line-height:1.7; font-weight:normal; font-size:13px;}

.intro_main3 dl .v_txt span {display:inline-block;}
.intro_main3 dl .vtit .word {line-height:1;}
.intro_main3 dl .vtit .char {line-height:1;}
.intro_main3 dl .vtit,.intro_main3 dl .sub-txt{overflow:hidden; opacity:0; line-height:1;}
.intro_main3 dl .vtit .char,.intro_main3 dl .sub-txt .word{display:inline-block; opacity:0;}
.intro_main3 dl .vtit.splitting,.intro_main3 dl .sub-txt.splitting{opacity:1.0;}

.intro_main3 dl.active .vtit.splitting .char {animation: slide-up 1.25s cubic-bezier(.5,.2,0,1); animation-fill-mode: both; animation-delay: calc(1.5s + (.03s * var(--char-index)) );}
.intro_main3 dl.active .delay2 .vtit.splitting .char {animation-delay: calc(3s + (.03s * var(--char-index)) );}
.intro_main3 dl.active .delay3 .vtit.splitting .char {animation-delay: calc(4.5s + (.03s * var(--char-index)) );}
.whitespace {height:0; width:10px;}

.video_btn {position:absolute; top:0; right:0}
.video_btn a{display:block; padding:0 20px; font-weight:normal; font-size:13px; line-height:35px;color:#fff; background:rgba(34,34,34,.5); box-sizing:border-box; letter-spacing:-0.3pt;}


@keyframes slide-up {
	from{opacity:0; transform: translateY(125%);}
	to{opacity:1.0; transform: translateY(0);}
}


@keyframes btn_gallery {
0% {background:#222 url('/img/intro_arrow_w.png')no-repeat center right 24px; color:#fff}
50% {background:#fff url('/img/intro_arrow.png')no-repeat center right 24px; color:#222}
100% {background:#222 url('/img/intro_arrow_w.png')no-repeat center right 24px; color:#fff}
}



.intro_foot{position:absolute; bottom:0; z-index:999; width:100%; text-align:center;}
.intro_foot .cont_in{border-top:1px solid rgba(255,255,255,.2); padding:20px 0 30px 0; }
.intro_foot h2{color:#ff9b45; font-weight:400; font-size:1.2rem}
.intro_foot p{padding-top:0px;}
.intro_foot p span{display:block; margin:0 auto; color:rgba(255,255,255,.6);}



/*******************************************************************************
	@media ~1620px
*******************************************************************************/
@media all and (max-width:1500px) { 


}
/*******************************************************************************
	@media ~1280px
*******************************************************************************/
@media all and (max-width:1280px) { 


}