@charset "euc-kr";
@import url("common.css");

/* VISUAL */
#visual {position:relative; width:100%; min-width:320px; overflow:hidden; padding-top:60px;}
#visual .cont_in {height:100%;}
#visual .slick-slider {position: relative; display: block; outline:none; height:100%;}
#visual .slick-track {overflow:hidden; display:block; width:100%;}
#visual .slick-list {position: relative; display: block; height:100%; overflow:hidden;}
#visual .slick-slide {display: none; float: left;}
#visual .slick-initialized .slick-slide{display: block}
#visual .slick-vertical .slick-slide{display: block;}

/* Dots */
#visual .slick-dots{position: absolute;  z-index:100; bottom:25px; width:100%; text-align:center;}
#visual .slick-dots li{position: relative; display: inline-block; cursor: pointer; width:35px; height:1px;  overflow:hidden; margin-right:3px; vertical-align:bottom; background:rgba(255,255,255,0.5);}
#visual .slick-dots li:last-child {margin-right:0;}
#visual .slick-dots li button{display:none;}
#visual .slick-dots li.slick-active {height:3px; background:#fff;}

.b_btn {position:relative; z-index:9999; bottom:-14px; right:-10px; width:10px; height:20px; background-repeat:no-repeat; background-position:center; background:url('/m/img/main/btn-play.png')no-repeat center; cursor:pointer; display:inline-block;}
#visual.play .b_btn {background:url('/m/img/main/btn-stop.png')no-repeat center;}

#visual .section { width: 100%;}
#visual .section .cover {width:100%; background-repeat:no-repeat; background-size:cover; background-position:center;  min-height:340px}
#visual .section div {
background-repeat: no-repeat; width: 100%; height: 100%; 
background-size: cover; background-position: 50%;  border:0;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
transition-delay: 0s;
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
}
#visual .sub_imgbox li.action .section div {transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}

#visual .text_area {position:absolute; top:25%; left:0;  width:100%;  z-index:50; opacity:0; padding:0 3%; box-sizing:border-box; text-align:center;}
		#visual .text_area span {display:block; font-family: "freight-big-pro", serif; font-size:13px; color:#fff; letter-spacing:0.3pt; line-height:1;}
		#visual .text_area h2 {font-family: "freight-big-pro", serif; font-size:28px; color:#fff; line-height:1.05; font-weight:300; text-transform:uppercase; margin:15px 0;}
		#visual .text_area h2 b {font-family:inherit; font-size:inherit; color:inherit; line-height:inherit; font-weight:900; text-transform:inherit;}
		#visual .text_area p {letter-spacing:-0.6pt; line-height:1.8; color:rgba(255,255,255,0.75);}

		#visual li.action .text_area {transition:all 2s; opacity:1;}


#visual .img_area {position:absolute; top:22%; left:3%; width:94%; z-index:50;  box-sizing:border-box; font-size:0; box-shadow:7px 0px 15px rgb(0 0 0 / 24%); margin-top:140px; opacity:0; }
#visual .img_area li {display:inline-block; width:50%;}
#visual .img_area li img {width:100%; background-size:cover; background-repeat:no-repeat; background-position:center;}
#visual .img_area .more {display:block; width:40px; height:40px; border:1px solid rgba(255,255,255,0.5); background:url('/img/moreArrow.png')no-repeat; position:absolute; left:50%; top:50%; background-position:center; transition:all 0.3s; transform:translate(-50%,-50%); background-size:12px;}
		#visual li.action .img_area {transition:all 1s; transition-delay:0.6s; opacity:1;}
/* VISUAL */



/**** °ψΕλ CSS ****/
.tit_wrap {text-align:center; position:relative; margin:0 0 25px;}
/* .tit_wrap:before {content:''; width:0; height:1px; background:#222; position:absolute; left:0; top:50%;}
.tit_wrap:after {content:''; width:0; height:1px; background:#222; position:absolute; right:0; top:50%;} */

.action .tit_wrap:before {width:20%; transition:all 1s; transition-delay:0.3s; background:#ddd;}
.action .tit_wrap:after {width:20%; transition:all 1s; transition-delay:0.3s; background:#ddd;}

h3.title {position:relative; font-family: "freight-big-pro", serif; font-size:2.231rem; font-weight:300; color:#222; line-height:1; opacity:0; top:-50px;}
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:#888; letter-spacing:-0.7pt; line-height:1.7; margin:3px 0 0; opacity:0; top:-50px;}

.action h3.title {opacity:1; top:0px; transition:all 1s;}
.action p.stxt {opacity:1; top:0px; transition:all 1s; transition-delay:0.2s;}


.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {width:35px !important; height:35px !important; background:#fff url('/m/img/main/s_arrow_next.png')no-repeat center; z-index:90; display:block; border-radius:100%; opacity:1 !important; background-size:6px !important;}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {width:35px !important; height:35px !important; background:#fff url('/m/img/main/s_arrow_prev.png')no-repeat center; z-index:90; display:block; border-radius:100%; opacity:1 !important; background-size:6px !important;}
/**** °ψΕλ CSS ****/




/* Artworks of the week */
#week .tit_wrap:before {width:20%;background:#ddd;}
#week .tit_wrap:after {width:20%;background:#ddd;}

#week .slick-dots {font-size:0; text-align:center; padding:15px 0 0;}
#week .slick-dots li {display:inline-block; margin-right:10px;}
#week .slick-dots li:last-child {margin-right:0;}
#week .slick-dots li button {border:0; background:none; font-size:0.882rem; cursor:pointer; padding:0; margin:0; color:#999;}
#week .slick-dots li.slick-active button {font-weight:bold; color:#222;}

#week .slick-arrow {width:6px; height:12px; font-size:0; position:absolute; bottom:60px; border:0; background-repeat:no-repeat; background-position:center; cursor:pointer;}
#week .slick-prev {left:10px; background:url('/img/prev.png') center no-repeat}
#week .slick-next {right:0; background:url('/img/next.png') center no-repeat}

#week {padding:50px 0 60px; overflow:hidden; position:relative;}
#week .slick-list {overflow:hidden;}
#week .week_cont {position:relative; opacity:0; /* transform:translateX(3%); */ margin-left:-10px;}
#week.action .week_cont{opacity:1;}
#week .week_cont:after {content:''; display:block; clear:both;}
#week .week_cont dl {float:left; margin-left:10px; width:280px;}
#week .week_cont dl dt {overflow:hidden;}
#week .week_cont dl img {background-repeat:no-repeat; background-size:contain; background-position:center bottom; transition:all 0.3s; width:100%;}
#week .week_cont dl dd {padding:12px 0 30px;}
#week .week_cont dl dd h4 {font-size:1.077rem; color:#222; letter-spacing:-0.3pt; line-height:1.5; font-weight:500; margin:0 0 0;transition:all 0.3s;}
#week .week_cont dl dd p {font-size:1rem; font-weight:400; color:rgba(34,34,34,0.7); line-height:1; letter-spacing:-0.2pt; transition:all 0.3s; margin:2px 0 7px;}
#week .week_cont dl dd ul {font-size:0;}
#week .week_cont dl dd li {position:relative; font-size:1rem; font-weight:400; color:rgba(34,34,34,0.7); line-height:1; letter-spacing:-0.2pt; transition:all 0.3s; margin:0 0 0;}
#week .week_cont dl dd li:last-child {margin:0 0 0;}


#week .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {top:-270px;}
#week .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {top:-270px;}
/* Artworks of the week */


.mCSB_scrollTools.mCSB_scrollTools_horizontal a+.mCSB_draggerContainer {margin:0 auto !important;}
.mCSB_scrollTools.mCSB_scrollTools_horizontal {width:calc(100% - 6%) !important; }
.mCSB_scrollTools .mCSB_draggerRail {background:#dfdfdf !important;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background:#808080 !important; border-radius:50px;}



/* About Meta Gallery */
#about {position:relative; text-align:center; padding:50px 3%; box-sizing:border-box; overflow:hidden; text-align:left;}
#about:after {content:''; width:100%; height:100%; background:url('/img/about_bg.jpg')no-repeat center; background-size:cover; position:absolute; top:0; left:0; z-index:-1; transform:scale(1.1);}
#about.action:after {transform:scale(1); transition:all 2s;}
#about .title {color:#fff; top:0; opacity:1;}
#about span {font-size:1.154rem; color:#fff; font-weight:200; letter-spacing:-0.5pt; line-height:1.3; margin:11px 0 6px; display:block; position:relative; top:0; opacity:1;}
#about .stxt {line-height:1.8; margin:0; color:rgba(255,255,255,0.6); top:0; opacity:1;}

/* #about.action span {transition-delay:0.2s; opacity:1; top:0px; transition:all 1s;}
#about.action .stxt {transition-delay:0.4s;} */
/* About Meta Gallery */



/* Exhibitions */
#exhibition {overflow:hidden;}
#exhibition h3.title {opacity:1; top:0px;}
#exhibition p.stxt {opacity:1; top:0px;}
#exhibition .slick-list {overflow:hidden;}
#exhibition .slick-dots {font-size:0; text-align:center;}
#exhibition .slick-dots li {display:inline-block; margin-right:10px;}
#exhibition .slick-dots li:last-child {margin-right:0;}
#exhibition .slick-dots li button {border:0; background:none; font-size:0.882rem; cursor:pointer; padding:0; margin:0; color:#999;}
#exhibition .slick-dots li.slick-active button {font-weight:bold; color:#222;}

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

#exhibition .exhibition_cont {position:relative; top:0;  /* transform:translateX(3%); */ margin-left:-10px;}
#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 .slick-track {display:flex;justify-content: center;align-items: center; margin:0 auto;}
.exhibition_cont dl {float:left; margin-left:10px;}
.exhibition_cont dl dt {overflow:hidden; background:#222;}
.exhibition_cont dl img {background-repeat:no-repeat; background-size:cover; background-position:center; transition:all 0.3s;  width:100%; transform:scale(1); width:100%;}
.exhibition_cont dl dd {position:relative; text-align:center; padding-bottom:30px;}
.exhibition_cont dl dd h3 {font-size:15px; letter-spacing:-0.5pt; font-weight:500; color:#222; margin:15px 0 0; transition:all 0.3s;}
.exhibition_cont dl dd h4 {font-size:15px; font-weight:500; color:#222; margin:0 0 0; transition:all 0.3s;}
.exhibition_cont dl dd span {font-size:13px; display:block; color:rgba(34,34,34,0.7); font-weight:300;}
.exhibition_cont dl dd p {font-family: "Outfit", serif; font-size:13px; color:rgba(34,34,34,0.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}

#exhibition .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {top:-190px;}
#exhibition .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {top:-190px;}
/* Exhibitions */



/* Artists */
#artist {background:#222; overflow:hidden;}
#artist .slick-list {overflow:hidden;}
		#artist .slick-arrow {position:absolute; border:0; font-size:0; width:16px; height:23px; display:block; z-index:99; top:-60px; background-position:center !important; background-repeat:no-repeat !important; cursor:pointer; background-size:100% !important;}
		#artist .slick-prev {left:0; background:url('/img/prevArrow.png');}
		#artist .slick-next {right:0; background:url('/img/nextArrow.png');}

#artist .cont_in {position:relative;}
#artist .cont_in:after {content:''; width:50%; height:50%; background:url('/img/artist_bg.jpg')no-repeat center; position:absolute; top:-60px; right:0; opacity:0; background-size:100% !important;}
#artist.action .cont_in:after {opacity:1; transition:all 2s;}
#artist .tit_cont {position:relative; z-index:50; text-align:center; margin:0 0 25px;}
#artist .tit_cont .title {color:#fff;}
#artist .tit_cont .stxt {color:#fff;}
#artist .tit_cont a {display:block; width:80px; height:80px; border:1px solid rgba(255,255,255,0.5); background:url('/img/moreArrow.png')no-repeat; background-position:center left 28px; transition:all 0.3s; margin-top:55px; opacity:0;}
#artist .tit_cont a:hover {background-position:center left 38px; transition:all 0.3s; border:1px solid #fff;}
#artist.action .tit_cont a {opacity:1; transition:all 1s; transition-delay:0.8s;}
#artist .artist_cont {position:relative; z-index:50; opacity:0;}
#artist.action .artist_cont {opacity:1; transition:all 1s; transition-delay:1s;}
#artist .artist_cont dl {float:left; position:relative; font-size:0;}
#artist .artist_cont dl dt {position:relative;}
#artist .artist_cont dl dt img {background-repeat:no-repeat; background-position:center; background-size:cover;  width:100%;}
#artist .artist_cont dl dd {box-sizing:border-box; position:absolute; width:100%; height:100%; position:absolute; top:0; left:0;}
#artist .artist_cont dl dd h3 {font-family: "freight-big-pro", serif; font-size:1.538rem; color:#fff; line-height:1; font-weight:400; text-transform:uppercase; position:absolute; top:15px; right:15px;  transition:all 1s;}
		#artist .artist_cont dl dd p {font-size:1rem; color:#fff; letter-spacing:-0.7pt; line-height:1.5; font-weight:400; word-break: keep-all; position:absolute; bottom:20px; left:20px;}


#artist .artist_cont dl.slick-active dt:after {height:calc(100% - 15px); transition:all 1s;}
#artist .artist_cont dl.slick-active dt h3 {}
/* Artists */





/* Artworks */
#artwork  .title {text-align:center; margin:0 0 30px;}
#artwork .artwork_cont {position:relative; opacity:0; top:-50px;}
#artwork.action .artwork_cont {opacity:1; top:0; transition:all 1s; transition-delay:1s;}
#artwork .artwork_cont dl {width: calc(51% - 15px);}
#artwork .artwork_cont dl dt {background:#222; overflow:hidden;}
#artwork .artwork_cont dl img {width:100%; background-repeat:no-repeat; background-size:100% auto; background-position:center; transition:all 0.3s;}
#artwork .artwork_cont dl dd {padding:10px 0 30px;}
#artwork .artwork_cont dl dd h4 {font-size:1.077rem; color:#222; letter-spacing:-0.3pt; font-weight:500;  line-height:1.5; margin:0 0 5px;}
#artwork .artwork_cont dl dd ul {font-size:0;}
#artwork .artwork_cont dl dd li {position:relative; display:inline-block; font-size:1.077rem; font-weight:400; color:rgba(34,34,34,0.7); line-height:1; margin-right:15px; letter-spacing:-0.2pt;}
#artwork .artwork_cont dl dd li:nth-child(3) {display:none;}
#artwork .artwork_cont dl dd li:after {content:''; width:1px; height:10px; background:#c9c9c9; position:absolute; right:-10px; top:2px;}
#artwork .artwork_cont dl dd li:nth-child(2) {margin-right:0;}
#artwork .artwork_cont dl dd li:nth-child(2):after {display:none;}

#artwork .moreBtn {display:block; width:150px; height:42px; border:1px solid #222; box-sizing:border-box; line-height:40px; text-align:center; 
font-size:13px; color:#222; font-weight:400; letter-spacing:-0.5pt; margin:0 auto; position:relative; overflow:hidden; transition:all 0.6s; }

#artwork .artwork_cont dl:hover img {transform:scale(1.1); transition:all 0.3s; opacity:0.8;}
#artwork .artwork_cont dl:hover dd h4 {color:#0f4f7b; transition:all 0.3s;}
#artwork .artwork_cont dl:hover dd li {color:#0f4f7b; transition:all 0.3s;}
/* Artworks */




/* App */
#app {position:relative;}
#app .imgCont {position:relative; padding:25px 5% 30px;}
#app .imgCont:after {content:''; width:100%; height:60%; background:#f5f5f5; position:absolute; top:0; left:0; z-index:-1;}
#app .imgCont img {display:block; margin:0 auto; max-width:100%;}
#app .txtCont { box-sizing:border-box; text-align:center;}
#app .txtCont .stxt {margin:15px 0 25px;}
.btnCont {font-size:0; opacity:0; position:relative; top:-50px;}
.btnCont a {font-family: "Outfit", serif; width:127px; height:42px; display:inline-block; border:1px solid #aaa; box-sizing:border-box; font-size:13px; color:#666; letter-spacing:0.3pt; line-height:40px; margin-right:3px; transition:all 0.3s; background-size:15px !important;}
.btnCont a:hover {border:1px solid #222; transition:all 0.3s; color:#222;}
.btnCont a.google {padding-left:20px; background:url("/img/app_icon01.png")no-repeat center left 13px;}
.btnCont a.apple {padding-left:20px; background:url("/img/app_icon02.png")no-repeat center left 13px;}

#app.action .btnCont {opacity:1; top:0; transition:all 1s; transition-delay:0.6s;}
/* App */




/*******************************************************************************
	media
*******************************************************************************/
@media all and (max-width:640px) {





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



/* VISUAL */

/* VISUAL */


.action .tit_wrap:before {width:12%;}
.action .tit_wrap:after {width:12%;}


/* Artworks of the week */
#week .week_cont dl {width:200px;}
/* Artworks of the week */



/* About Meta Gallery */
#about .stxt br {display:none;}
/* About Meta Gallery */



/* Exhibitions */
.exhibition_cont dl {width:280px;}

#exhibition .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {top:-160px;}
#exhibition .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {top:-160px;}
/* Exhibitions */


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

/* VISUAL */
/* #visual .slick-slide {padding-bottom:60%;} */
/* VISUAL */

#visual .section { width: 100%;}
#visual .section .cover {width:100%;}


}