@import url("https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css");

::-webkit-scrollbar {display: none;}
::-webkit-scrollbar-track {display: none;}
::-webkit-scrollbar-thumb {display: none;}
select::-ms-expand {display: none;}

*{padding:0; margin:0; border:0; box-sizing:border-box; font-family:"Times New Roman", "Sans-serif"; outline:none;}
a{color:inherit; text-decoration: none;}
video {max-width: 100%;max-height: 100%;vertical-align: bottom;}
.font-hansans{font-family:"Spoqa Han Sans";}
.skip{font-size:0;position:absolute; top:-100px; left:-100px;}
.mauto{margin-left:auto; margin-right:auto; }
.ofh{overflow:hidden;}
.ellipsis{ white-space: nowrap;  overflow: hidden; text-overflow: ellipsis; }
.clearfix-a:after{content:""; clear:both; display:table;}
.clearfix-b:before{content:""; clear:both; display:table;}
.text-ellipsis{ white-space: nowrap;  overflow: hidden; text-overflow: ellipsis; }

html {font-size:10px; font-family:"Times New Roman", "Sans-serif"; }
body{color:#000; background-color:#f7f7f7; position:relative; letter-spacing:-1px; word-break: keep-all;}
select{ display:block; width:100%; height:30px; line-height:30px; border:1px solid #CCC; border-radius:4px; padding-left:10px; color:#666; background: #FFF url(../images/arrow_select.png) calc(100% - 15px) no-repeat; appearance: none;    -moz-appearance: none;    -webkit-appearance: none;}
.container{max-width:1580px;}
header{width:100%;}
header .gnb{max-width:1600px; margin:0 auto; padding:80px 10px 0;}
header .gnb:after{display:table; content:"";}
header .gnb .gnb-top{padding:0 10px; position:fixed; width:100%; height:0px; top:25px; left:0; z-index:1900; }
header .gnb .gnb-top.content{position:absolute; }
header .gnb .gnb-top > .container{height:0;}

header .gnb .gnb-top .select-box{display:inline-block; width:35%; height:30px; max-width:200px; margin-left:10px; margin-right:0; font-size:10px; position:relative; top:0; opacity:1; transition: all 1s; -webkit-transition: all 1s; }
header .gnb .gnb-top .select-box + .select-box{margin-left:20px; position:relative; }
header .gnb .gnb-top .select-box + .select-box:before{position:absolute; top:0; left:-20px; content:"/"; display:inline-block; width:20px; height:30px; line-height:30px; text-align:center; font-size:12px;}
header .gnb .gnb-top .select-box select{font-size:10px;}
header .gnb .gnb-mid{position:relative; margin:7.5% 0;}
header ul{list-style:none;}
header h1 {text-align:center;}
header h1 img.logo{width:50%; max-width:600px; height:auto; margin:0 auto; padding-right:45px; }
header h2{font-style:italic; font-size:120px; line-height:120%; vertical-align:text-top; color:#231916; letter-spacing:-1px;}
header h2.artist{text-align:center; font-weight:normal;  color:#231916; line-height:85%;}
header h2.subTitle{text-align:left; color:#231916; line-height:85%;}
header h2.project{text-align:left; color:#231916; font-size:60px; padding-right:100px;}
header p.artist{font-style:italic; color:#767272; font-size:24px; padding-bottom:1rem; letter-spacing:0;}

@media  (max-width:1279px){	
	header h2 {font-size:80px;}
	header h2.project{font-size:50px;}
	header p.artist{font-size:20px;}
}
@media  (max-width:992px){
	header h2 {font-size:50px; }
	header h2.project{font-size:30px;}
	header p.artist{font-size:18px;}
}

@media  (max-width:419px){
	header h2 {font-size:30px; }
	header h2.project{font-size:22px;}
	header p.artist{font-size:12px;}
}

header button.btn-menu{max-width:110px; min-width:49px; width:10%; background-color:transparent; z-index:900; padding:0;}
header .gnb .gnb-mid button.btn-menu{position:absolute; right:0; bottom:0; opacity:1; cursor:pointer;}
header button.btn-menu img{display:block;  width:100%;}

body.connect-open,
body.menu-open{overflow:hidden;}
body.connect-open .gnb .gnb-top .select-box,
body.menu-open .gnb .gnb-top .select-box{top:-60px; opacity:0;}

nav{position:fixed; top:0; left:0; height:0; max-height:100vh; width:100%; background-color:rgba(0,0,0,0.95); color:#FFF; overflow-y:auto; z-index:1000;}
nav{ -webkit-transition: height 0.5s cubic-bezier(0.74, 0.08, 0.19, 0.92);  -moz-transition: height 0.5s cubic-bezier(0.74, 0.08, 0.19, 0.92); transition: height 0.5s cubic-bezier(0.74, 0.08, 0.19, 0.92);}
body.connect-open nav#contact,
body.menu-open nav#menu{ height: 600px; }

@media  (max-width:992px){	
	body.connect-open nav#contact,
	body.menu-open nav#menu{ height: 100vh; }
}

nav >.inner{padding:10.5% 0 3.8125%; }
nav .nav-main-menu{display:block; overflow:hidden; position:relative; padding-right: 110px;}
nav .nav-main-menu hr{display:none; width:100%;}
nav .nav-main-menu hr:before,
nav .nav-main-menu hr:after{content:""; display:table; }
nav .nav-main-menu .nav-menu{float:left; width:calc((100% - 220px)/4);}
nav .nav-main-menu .nav-menu.h2List{float:right; width:220px;}
nav#contact .nav-main-menu .nav-menu{float:none; width:100%;}
nav  .btn-menu{position: absolute; top:0; right:0; cursor:pointer;}
nav .nav-main-menu .nav-menu dl{padding:0 20px 5rem;}
nav .nav-main-menu .nav-menu dl dt{color:#767272; font-size:1.2rem; min-height:5rem; font-family:"Spoqa Han Sans"; font-weight:700;}
nav .nav-main-menu .nav-menu dl dd{font-size:2.8rem; font-style:italic; min-height:5rem; display:block; overflow:hidden; line-height:100%;}
nav .nav-main-menu .nav-menu h2{font-size:4rem; font-weight:700;  font-style:italic; padding:0 20px;}
nav .nav-main-menu .nav-menu a{color:#FFF; text-decoration:none;}

@media  (max-width:1279px){	
	nav .nav-main-menu .nav-menu{width:calc(100% / 2);}
	nav .nav-main-menu .nav-menu.h2List{float:none; width:100%; clear:both; margin-bottom:5rem;}
	nav .nav-main-menu .nav-menu hr{display:block;}
	nav .nav-main-menu .nav-menu dl dt{min-height:3rem;}
	nav .nav-main-menu .nav-menu dl dd{font-size: 2rem; min-height:3rem;}
	nav .nav-main-menu .nav-menu h2{font-size:3rem;}
	nav .nav-main-menu .btn-menu{right:10px; top:10px; bottom:unset;}
}

footer{ height: 80px; background-color:#231916; text-align:center;}
footer cite{ color:#666666; line-height:80px; font-size:12px; font-family:"Spoqa Han Sans";  font-style:normal;  text-transform: uppercase;}
#contents {padding-bottom:20px;}
#contents:after{content:""; display:table; clear:both;}
#contents .content-head{ height:65px;	overflow:hidden;}

#contents .content-head .btn-project{display:block; height:45px; width:148px; margin-top:10px; padding-top:11px; background-repeat:no-repeat; font-family:"Spoqa Han Sans";  font-size:12px; color:#767272; letter-spacing:0; font-weight:700; text-decoration:none;  text-transform: uppercase; line-height:100%; vertical-align:top;}
#contents .content-head .btn-prev{float:left; padding-left:22px; background-position:0 15px; text-align:left; background-image:url(../images/arrow_prev.png);}
#contents .content-head .btn-next{float:right; padding-right:22px; background-position:100% 15px; text-align:right; background-image:url(../images/arrow_next.png);}

#contents .content-head .tab-wrap{display:table; text-align:center; margin:0 auto;}
#contents .content-head .tab-wrap .tab{display:table-cell; padding:1rem 2rem;  vertical-align:middle;}
#contents .content-head .tab-wrap .tab a{position:relative; display:inline-block; padding-bottom:8px; color:#999; font-size:16px; font-family:"Spoqa Han Sans";  letter-spacing:0; text-transform: uppercase; font-weight:700; line-height:120%;}
#contents .content-head .tab-wrap .tab a.active{color:#000; }
#contents .content-head .tab-wrap .tab a.active:after{content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; background-color:#000;}
@media  (max-width:992px){
	#contents .content-head .tab-wrap .tab{padding:1rem;}
	#contents .content-head .tab-wrap .tab a{font-size:14px;}
}

.cell{display:table-cell; overflow:hidden; padding-left:10px; padding-right:10px; vertical-align:bottom; }
.row{display:table; margin-left:-10px; margin-right:-10px; min-width:100%;}
.row:after{content:""; display:table; width:100%;}
@media  (max-width:1599px){
	.row{display:table; margin-left:0px; margin-right:0px;}
}
.w3{width:calc(100% / 4);}
.w4{width:calc(100% / 3);}
.w5{width:calc(125% / 3);}
.w6{width:50%;}
.w7{width:calc(700% / 12);}
.w8{width:calc(200% / 3);}
.w12{width:100%;}
.main{margin-bottom:55px;}
.main .cell figure{margin-top:55px;}
.main .cell figure video,
.main .cell figure img{display:block; width:100%; height:auto;}
.main .cell a{color:inherit; text-decoration: none;}
.main .cell .title{margin-top:13px; line-height:150%; font-size:24px; font-weight:700; letter-spacing:0;  font-style:italic;  }
.main .cell .author{line-height:120%; font-size:24px; letter-spacing:0;  font-style:italic; }

.production .cell figure{margin-top:20px;}
.production .cell figure video,
.production .cell figure img{display:block; width:100%; height:auto;}

.artistList{ padding-top:35px; padding-bottom:80px;}
.artistList .cell figure{margin-top:55px;}
.artistList .cell figure video,
.artistList .cell figure img{display:block; width:100%; height:auto;}
.artistList .cell .author{line-height:120%; font-size:32px; font-style:italic;  font-weight:700; padding:1.5rem 0;}

@media  (max-width:992px){	
	.row{display:block; width:100%;}
	.cell{display:block; width:100%; padding-left:30px; padding-right:30px;}
	.main .cell figure{margin-top:30px;}
	.main{margin-bottom:30px;}
	.artistList .cell .author{font-size:25px;}
}

@media  (max-width:419px){
	.artistList .cell .author{font-size:20px; padding:1.2rem 0;}
}

.projectList{ padding-top:60px; padding-bottom:50px; list-style:none;}
.projectList li{width:100%; padding:0 10px; margin-bottom:80px;}
.projectList li .img-box{position: relative; width: 100%;}
.projectList li .img-box .wrap{width: 100%; overflow:hidden;}
.projectList li .img-box .wrap img{max-width:100%; height:auto; display:block; margin:0 auto;}
.projectList li .text-box{display:table; height:68px; width:100%; margin-top:4px; }
.projectList li .text-box .wrap{display:table-cell; text-align:left; vertical-align:middle; text-align:center; line-height:100%; font-size:32px; font-style:italic;  font-weight:700; }

@media  (max-width:992px){
	.projectList li{margin-bottom:50px;}
	.projectList li .text-box{height:58px;}
	.projectList li .text-box .wrap{font-size:25px;}
}
@media  (max-width:419px){
	.projectList li{margin-bottom:15px;}
	.projectList li .text-box{height:45px;}
	.projectList li .text-box .wrap{font-size:20px;}	
}

.production-wrap{padding:0 10px 80px 10px;}
.production-wrap p{ line-height:150%;  padding-bottom:20px; font-size:32px; font-style:italic; } 

@media  (max-width:992px){
	.production-wrap p{font-size:25px;}
}
@media  (max-width:419px){
	.production-wrap p{font-size:20px;}	
}

.projectSlides{ height: calc(100vh - 25rem);}
.swiper-container{ width: 100%; height: 100%;}
.swiper-container-horizontal{ cursor: ew-resize;}
.swiper-slide {width:70vw; max-height:100%; margin: auto; text-align: center; font-size: 18px;
	/* Center slide text vertically */
	display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
}

@media (max-width: 900px) and (orientation: portrait){
	.swiper-slide {width:80vw;height:  100%;}
}
.slide-content{display:block; max-width:100%; max-height:100%;}
.project-video{position: absolute; bottom: 7.5rem; left: 1.5rem; right: 1.5rem; top: 4.5rem; text-align: center;}
.project-video video {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s;transition: opacity 0.5s; height: 1080px;}



/* swiper prev & next Add 2019-06-10 */


.projectSlides .swiper-container-horizontal{
	cursor: pointer;
}

.swiper-container .swiper-button-prev{background-image: none; background-color: rgba(0,0,0,.5);width: 120px; height: 120px; left: 0;}
.swiper-container .swiper-button-prev:before{
	content: "";
	width: 40px;
	height: 40px;
	border: 3px solid #fff;
	transform: rotate(45deg);
	border-top: 0;
	border-right: 0;
	display: block;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	position: absolute;
}
.swiper-container .swiper-button-next{background-image: none; background-color: rgba(0,0,0,.5);width: 120px; height: 120px; right: 0;}
.swiper-container .swiper-button-next:before{
	content: "";
	width: 40px;
	height: 40px;
	border: 3px solid #fff;
	transform: rotate(-135deg);
	border-top: 0;
	border-right: 0;
	display: block;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	position: absolute;
}

.view-imgs,
.view-slide{
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: ease all .4s;
}
.view-imgs.active,
.view-slide.active{z-index: 9999;visibility: visible;opacity: 1;}
.view-imgs .view-imgs-bg,
.view-slide .view-slide-bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.7);
	z-index: 3;
}
.view-imgs .slide-imgs{
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 5;
	max-width: 100%;
}
.view-imgs .slide-imgs img{
	max-width: 100%;
}

.view-slide > .projectSlides{
	position: relative;
	z-index: 10;
	height: 100vh;
}

.view-slide >.closed{
	text-decoration: none;
	z-index: 12;
	position: absolute;
	top: 20px;
	right: 20px;
	width: 100px;
	height: 100px;
	background-color: transparent;
}
.view-slide >.closed:before{
	display: block;
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background-color: #fff;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform: rotate(45deg);
}
.view-slide >.closed:after{
	display: block;
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background-color: #fff;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform: rotate(-45deg);
}
.view-slide .projectSlides .swiper-container-horizontal{
	cursor: ew-resize;
}
@media  (max-width:992px){
	.swiper-container .swiper-button-prev,
	.swiper-container .swiper-button-next{
		width: 60px;
		height: 60px;
	}
	.swiper-container .swiper-button-prev:before,
	.swiper-container .swiper-button-next:before{
		width: 20px;
		height: 20px;
		border-width: 1px;
	}
	.view-slide >.closed{
		text-decoration: none;
		z-index: 12;
		position: absolute;
		top: 20px;
		right: 20px;
		width: 50px;
		height: 50px;
		background-color: transparent;
	}
}