@charset "utf-8";

/* 콘텐츠 */
.container .contents{position:relative; padding-top:14rem; font-size: 1.6rem; font-weight: 400;}
.container .contents:after{position: relative; content:''; display:block; clear:both;}
@media(max-width:1200px){
	.container .contents{padding-top:12rem;}
}
@media(max-width:768px){
	.container .contents{padding-top:10rem;}
}

/* button */
.btn-more{position: absolute; bottom: 0; right: 0; display: inline-block; padding: 2rem 5rem; color:#111; font-weight: 500; font-size: 1.9rem; background-color: #fff; transition:all 0.3s ease-out 0.3s;}
.btn-more02{display:block; position:absolute; top:0px; right:0px; width:3.2rem; height:3.2rem; text-indent:100%; font-size:0; background: #111 url(../img/main/icon_more.svg) no-repeat 50% 50%; background-size: 10px 10px; transition:all .5s ease 0s;}
@media(max-width:768px){
	.btn-more{padding:1.6rem 3rem; font-size: 1.6rem;}
}

/* area- 공통 마진 */
[class^="area-"]{margin-bottom: 16rem;}
@media(max-width:1200px){
	[class^="area-"]{margin-bottom: 12rem;}
}
@media(max-width:768px){
	[class^="area-"]{margin-bottom: 10rem;}
}

/* 타이틀 */
h3{margin-bottom: 5rem; font-family: 'Oswald', sans-serif; text-align: center; font-size: 5rem; font-weight:600; color:#111; text-transform: uppercase;}
h3 > i{display: inline-block; margin-left:1rem; font-weight: 700; color:#111; font-size: 1.8rem; font-family: 'Noto Sans KR', sans-serif;}
@media(max-width:768px){
	h3{font-size: 4rem;}
}
@media(max-width:480px){
	h3 > i{display: block; margin-left: 0; margin-top: 1.6rem;}
}

/* 메인 비주얼 */
.visual{position:relative;}
.visual .visual-txt{position: absolute; left:0px; bottom:0px; width: 100%; height:60%; color:#fff; text-align: center;}
.visual .visual-txt::after{position: absolute; z-index: 1;   display:block; width:100%; height:100%; left:0; bottom:0;   background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 90%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 90%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.visual .visual-txt .txt-inner{position: absolute; top:-8rem; width:100%;}
.visual .visual-txt .txt-inner span{display: block; font-weight:500; line-height: 1.6; font-size: 2.2rem; transition:all 0.3s ease-out 0.1s;}
.visual .visual-txt .txt-inner em{margin:1rem 0 5rem; display: block; line-height:1.25; font-weight:700; font-size: 6.5rem; transition:all 0.3s ease-out 0.2s;}
.visual .visual-txt .txt-inner p{display: block; font-weight: 500; font-size: 2.2rem; transition:all 0.3s ease-out 0.3s;}
.visual .visual-txt .txt-inner span,
.visual .visual-txt .txt-inner em,
.visual .visual-txt .txt-inner p,
.visual .visual-txt .txt-inner .btn-more{position: relative; z-index: 2; display:block; opacity:0; transform:translateY(-1rem);}
.visual .visual-txt .txt-inner .btn-more{left:0px; display: inline-block; margin-top:6rem}
.visual .show{opacity:1 !important; transform:translateY(0px) !important;}
.visual .swiper-container{height:86.1rem; margin: 0 4.6rem; cursor:inherit !important;}
.visual .swiper-slide{overflow: hidden;}
.visual .slide-inner{position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;}
.visual .swiper-pagination{position: relative; z-index: 2; bottom:5rem;}
.visual .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 0.5rem; width:4rem; height: 0.3rem; background: #fff; border-radius:0;}
.visual .swiper-pagination-bullet{opacity: 0.2;}
.visual .swiper-pagination-bullet-active{opacity: 1;}
@media(max-width:1660px){
	.visual .swiper-container{height:76rem;}
    .visual .swiper-container{margin:0 2rem;}
	.visual .visual-txt .txt-inner span,
	.visual .visual-txt .txt-inner p{font-size: 2.2rem;}
	.visual .visual-txt .txt-inner em{font-size: 6rem;}
}
@media(max-width:1200px){
	.visual .swiper-container{height:56rem;}
    .visual .swiper-container{margin:0 2rem;}
	.visual .visual-txt .txt-inner{bottom:8rem;}
	.visual .visual-txt .txt-inner span,
	.visual .visual-txt .txt-inner p{font-size: 2rem;}
	.visual .visual-txt .txt-inner em{margin:2rem 0 3rem; font-size: 5rem;}
}
@media(max-width:1024px){
	.visual{padding-top: 7rem;}
}
@media(max-width:768px){
	.visual .swiper-pagination{bottom:4rem;}
	.visual .swiper-container{height:46rem;}
	.visual .visual-txt .txt-inner{bottom:6rem;}
	.visual .visual-txt .txt-inner p{font-size: 1.8rem;}
	.visual .visual-txt .txt-inner em{margin:1rem 0 2rem; font-size: 4rem;}
	.visual .visual-txt::after{
		background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	}
	.visual .visual-txt .txt-inner .btn-more{margin-top: 3rem;}
	.visual .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{width:2rem;}
}
@media(max-width:480px){
	.visual .visual-txt .txt-inner p{font-size: 1.6rem;}
	.visual .visual-txt .txt-inner em{margin:1rem 0 1.5rem; font-size: 3rem;}
	.visual .visual-txt .txt-inner .btn-more{margin-top:3rem;}
}

/* tab */
.tabWrap{position: absolute; right:0px; top:-1rem; width: 100%; max-width: 37rem;}
.tabBtn{width:100%; display:flex;}
.tabBtn > li{position:relative; flex: 1 1 33.33%;}
.tabBtn > li a{display:block; font-size:1.8rem; font-weight:500; text-align:center; color:#111; padding:2rem 0; border-bottom:3px solid #ddd; transition:all 0.3s ease 0s;}
.tabBtn > li:first-child{margin-left:0;}
.tabBtn > li.on a{font-weight: 700; border-bottom-color:#111;}
@media(max-width:1200px){
	.tabWrap{position: relative; margin-bottom: 3rem; right:inherit; left:0px; max-width: inherit;}
}

/* 전시정보 */
.area-exhibition{position: relative; height: auto; overflow: hidden;}
.area-exhibition em{display: block; margin: 4rem 2rem 1.6rem; font-size: 2rem; color:#111; font-weight: 700;}
.area-exhibition span{display: block; margin:0 2rem; font-size: 1.6rem; color:#111; font-weight: 300; line-height: 1.6;}
.area-exhibition .swiper-container{position: relative; width:100%; height:100%;}
.area-exhibition .swiper-container .swiper-slide .thumbs{height: 54rem;}
.area-exhibition .swiper-control{position:absolute; width: 100%; height: 100%; transform:translateY(35%);}
.area-exhibition .exhibition-swiper-button-prev,
.area-exhibition .exhibition-swiper-button-next{position:absolute; z-index: 9; left:0px; top:0; right:0; margin-top: 0px; width:4rem; height: 4rem; font-size:0; color:transparent; cursor:pointer; background:url(../img/main/icon_control_arrow.svg) no-repeat 50% 50%; background-size: 3.6rem 3.2rem;}
.area-exhibition .exhibition-swiper-button-next{left:inherit; right:0; transform:rotate(-180deg);}
@media(max-width:1700px){
    .area-exhibition .swiper-control{display: none;}
	.area-exhibition .swiper-container .swiper-slide .thumbs{height: 46rem;}
}
@media(max-width:1024px){
	.area-exhibition em{margin:3rem 0 1.6rem;}
	.area-exhibition span{margin:0;}
	.area-exhibition .swiper-container .swiper-slide .thumbs{height: 40rem;}
}
@media(max-width:768px){
	.area-exhibition .swiper-container .swiper-slide .thumbs{height: 50rem;}
}
@media(max-width:768px){
	.area-exhibition .swiper-container .swiper-slide .thumbs{height: 40rem;}
}
@media(max-width:520px){
	.area-exhibition .swiper-container .swiper-slide .thumbs{height: 32rem;}
}
@media(max-width:400px){
	.area-exhibition .swiper-container .swiper-slide .thumbs{height: 26rem;}
}

/* 공지사항 */
.area-notice-education{position:relative;}
.area-notice-education h4{margin-bottom: 6rem; font-size: 2.6rem; font-weight: 700; color: #111;}
.area-notice-education .notice{position:relative; margin-right:4rem;}
.area-notice-education .notice ul{}
.area-notice-education .notice ul li{border-bottom:1px solid #f0f0f0;}
.area-notice-education .notice ul li:first-child{margin-bottom: 3.8rem;}
.area-notice-education .notice ul li a{position:relative; display:block; padding:3rem 14rem 3rem 2rem;}
.area-notice-education .notice ul li a::after{display:inline-block; content:attr(data-date); right:2rem; top:3.4rem; font-size: 1.6rem; font-weight: 300; color:#777;}
.area-notice-education .notice ul li a span{display: block; font-size:2rem; font-weight: 700;}
.area-notice-education .notice ul li a p{margin-top: 3rem; font-size: 1.6rem; font-weight: 300; color:#777; line-height: 1.6;}
@media(max-width:1600px){
	.area-notice-education h4{margin-bottom: 4rem;}
	.area-notice-education .notice ul li:first-child{margin-bottom: 3.4rem;}
}
@media(max-width:1200px){
	.area-notice-education .notice ul li:first-child{margin-bottom: 3.2rem;}
}
@media(max-width:1024px){
	.area-notice-education h4{margin-bottom: 2rem;}
	.area-notice-education .notice{margin-right:0; margin-bottom:50px;}
	.area-notice-education .notice ul li:first-child{margin-bottom:2rem;}
	.area-notice-education .notice ul li a{padding:2rem 14rem 2rem 0;}
	.area-notice-education .notice ul li a::after{top:2rem; right:0;}
}

/* 교육정보 */
.area-notice-education .education{position:relative;}
.area-notice-education .education dl dd + dd{position: relative; margin-top: 40px;}
.area-notice-education .education dl dd a{position: relative; z-index: 1; width:100%; padding:3rem; background-color: #f7f7f7;}
.area-notice-education .education dl dd a span{display: block; margin-bottom: 2rem; font-size:2rem; font-weight: 700; line-height: 1.6em;}
.area-notice-education .education dl dd a ul li{font-size: 1.6rem; font-weight: 300; color:#777; line-height: 1.6;}
.area-notice-education .education dl dd a ul li + li{margin-top: 0.5rem;}
.area-notice-education .education dl dd a .thumbs{position: relative; height: 14rem;}
.area-notice-education .education dl dd a .thumbs::after{background:#fff url(../img/common/no_image02.png) no-repeat 50% 50%;}
.area-notice-education .education dl dd a .edu-img{position: relative; display: inline-block; vertical-align: middle; width: 17rem; overflow: hidden;}
.area-notice-education .education dl dd a .edu-text{display: inline-block; vertical-align: middle; padding-left:3rem; width:calc(100% - 17rem - 3rem);}
.area-notice-education .education dl dd a ul li strong{position: relative; display: inline-block; margin-right: 1.6rem; font-weight: 700; color:#111;}
.area-notice-education .education dl dd a ul li strong::before{position: relative; content: ""; display: inline-block; margin:-1.5px 0.5rem 0 0; width:3px; height: 3px; vertical-align: middle; background-color: #222; border-radius: 50%;}
.area-notice-education .education dl dd a.state{width:100%; overflow: hidden;}
.area-notice-education .education dl dd a::after{display:inline-block; content:attr(data-state); right:0; bottom:0; font-size: 1.6rem; padding:1rem 1.5rem; font-weight: 500; color:#fff; background-color: #111;}
.area-notice-education .education dl dd a[data-state="종료"]::after{color:#111; background-color: #fff;}
@media(max-width:1200px){
	.area-notice-education .education dl dd + dd{margin-top: 30px;}
	.area-notice-education .education dl dd a .edu-text{padding-bottom:1.4rem;}
}
@media(max-width:1200px){
	.area-notice-education .education dl dd a{padding:2rem 2rem 3rem;}
}
@media(max-width:768px){
	.area-notice-education .education dl dd + dd{margin-top: 20px;}
}
@media(max-width:480px){
	.area-notice-education .education dl dd a .edu-img{width: 14rem;}
	.area-notice-education .education dl dd a .edu-text{padding-left:2rem; width:calc(100% - 14rem - 2rem);}
}

/* 작품검색 */
.area-search{position: relative; height: auto; overflow: hidden;}
.area-search em{display: block; margin: 2rem 0; font-size: 2rem; color:#111; font-weight: 500;}
.area-search span{display: block; font-size: 1.4rem; color:#777; font-weight: 300;}
.area-search .swiper-container{position: relative; width:100%; height:100%;}
.area-search .swiper-container .thumbs img{width:100%;}
.area-search .swiper-container .thumbs::after{display: none; opacity: 0;}
.area-search .swiper-control{position:relative; top:20rem; width: 100%; height: 100%;}
.area-search .search-swiper-button-prev,
.area-search .search-swiper-button-next{position:absolute; z-index: 9; left:0px; top:0; right:0; margin-top: 0px; width:4rem; height: 4rem; font-size:0; color:transparent; cursor:pointer; background:url(../img/main/icon_control_arrow.svg) no-repeat 50% 50%; background-size: 3.6rem 3.2rem;}
.area-search .search-swiper-button-next{left:inherit; right:0; transform:rotate(-180deg);}
@media(max-width:1700px){
  .area-search .swiper-control{display: none;}
	.search{position: relative; margin-bottom: 4rem; right:inherit; left:0px; max-width: inherit;}
}

/* 소셜네트워크 */
.area-social{position: relative;}
.area-social .thumbs{height: 100%;}
.area-social > ul{position: relative; display: flex; flex-wrap: wrap;}
.area-social > ul > li{position: relative; flex:1 1 calc(25% - 40px); height: 37rem;}
.area-social > ul > li + li{margin-left:40px;}
.area-social > ul > li > a span{z-index: 3; opacity: 0; position:absolute; top:0px; left:0; display: block; width:100%; height: 100%; padding:13rem 6.6rem 0 6.6rem; font-size: 2rem; font-weight: 300; line-height: 1.5; color:#fff; text-align: center; background-color: rgba(0,0,0,0.5); transition:all 0.35s ease-out 0s;}
.area-social > ul > li > a span::before{position: relative; z-index: 3; display: block; margin:0 auto 2rem; width:3.6rem; height: 3.2rem; background:url(../img/main/icon_blank.svg) no-repeat 50% 50%; background-size: 100% 100%;}
.area-social > ul > li:hover::before,
.area-social > ul > li > a:hover span{opacity: 1; z-index: 1;}
@media(max-width:1660px){
	.area-social > ul > li > a span{padding:0; font-size: 0; text-indent: 100%;}
	.area-social > ul > li > a span::before{top:50%; margin-top:-1.8rem;}
	.area-social > ul > li{height: 28rem;}
}
@media(max-width:1200px){
	.area-social > ul > li{flex:1 1 calc(25% - 30px);}
	.area-social > ul > li + li{margin-left:30px;}
	.area-social > ul > li{height: 22rem;}
}
@media(max-width:768px){
	.area-social > ul > li + li{margin-left:0;}
	.area-social > ul > li:nth-child(2n){margin:0 0 20px 20px;}
	.area-social ul{flex-wrap: wrap; align-content: stretch;}
	.area-social > ul > li{flex:1 1 calc(50% - 20px);}
	.area-social > ul > li{height: 30rem;}
}
@media(max-width:540px){
	.area-social > ul > li{height: 22rem;}
}
@media(max-width:420px){
	.area-social > ul > li{height: 20rem;}
}

/* 푸터 패밀리사이트 */
.family-swiper{position: relative; background: #f1f1f1;}
.family-swiper .swiper-slide a{position: relative; opacity: 0.8; display: block; height: 18rem; line-height: 18rem; text-align: center; font-size: 0; -webkit-filter: grayscale(100%); filter: grayscale(100%); transition:all 300ms;}
.family-swiper .swiper-slide a:hover{opacity:1; -webkit-filter: grayscale(0); filter: grayscale(0);}
.family-swiper .swiper-slide a img{vertical-align: middle}
.family-swiper .init{position: absolute; top: 50%; margin-top: -1rem; width:100%; z-index: 10;}
.family-swiper .init button{position: absolute; display: block; width: 2.8rem; height: 2.8rem; font-size: 0}
.family-swiper .init button img{vertical-align: middle}
.family-swiper .init button:nth-child(2){left:inherit; right:0;}
@media(max-width: 1024px) {
  .family-swiper{padding:0 2rem}
  .family-swiper .swiper-slide a{height:10rem; line-height: 10rem}
  .family-swiper .swiper-slide a img{max-width: 20rem;}
  .family-swiper .init{width:100%; height: 0; border-radius: 0; border: 0}
  .family-swiper .init button{position: absolute}
  .family-swiper .init button.family-prev{left: -1rem}
  .family-swiper .init button.family-next{right: -1rem}
}