@charset "UTF-8";


/*-------------------------------------------------------------------
	분류그룹 : sub > 공통
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/* #container  {padding-top:80px;} */

#container .tit-01 {display: block; margin-top:70px; margin-bottom:50px; font-weight:500; font-size:3rem; color:#4A4A4A; text-align: center;}
#container .tit-02 {display: block; font-weight:300; font-size:4.5rem; color:#4A4A4A; text-align: center;}

#container .main-tit {display: block; margin-bottom:20px; font-weight:600; font-size:2rem; color:#4A4A4A; font-family:'Roboto','Pretendard',sans-serif;}
#container .main-tit.transat-400 {letter-spacing:5px;}
#container .sub-tit-01 {display: block; margin-bottom:20px; font-weight:500; font-size:2rem; color:#4A4A4A;}
#containar{position:relative;}

.con-area {display: block; max-width:1670px; width:100%; height:inherit; margin:0 auto;}
.main-con {display: block; max-width:1670px; width:100%; height:inherit; margin:0 auto;}
#con {padding:70px 0 0;}

#container .top-bg {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; overflow: auto; position:relative; width:100%; height:100%; min-height:585px; 
	background-image:url('../images/sub/04/img_top_bg2026.jpg'); background-size:cover; background-repeat: no-repeat; 
	background-position:top; -moz-box-justify-content: center;-ms-flex-pack: center;justify-content: center; justify-content: center; 
	-webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;
}

#container .top-bg .tit-02 {display: block; position:absolute; top:50%; left:50%; /* color:#4A4A4A; */ color:#fff; transform: translate(-50%,-50%);  letter-spacing:15px;}

/* 디테일 페이지 타이틀 */
#container .detail-tit {display: block; line-height:1.3;}
#container .detail-tit .sub-tit {display: block; margin-bottom:10px; font-weight:400; font-size:1.125rem; color:#4A4A4A; line-height:1.3; word-break:break-all;}
#container .detail-tit .tit {display: block; margin-bottom:20px; font-weight:700; font-size:3rem; color:#4A4A4A; line-height:1.3; word-break:break-all;}

/* 디테일 페이지 왼쪽 정보 */
#container .left-txt {display: block; max-width:330px;}
#container .left-txt .item {margin-bottom:20px;}
#container .left-txt .item:last-child {margin-bottom:0;}
#container .left-txt .item .subject {display: block; margin-bottom:8px; font-weight:700; font-size:1.125rem; color:#4A4A4A; word-break:break-all; line-height:1.3;}
#container .left-txt .item .txt {display: block; font-weight:500; font-size:1.125rem; color:#4A4A4A; word-break:break-all; line-height: 1.3; }
#container .left-txt .item .txt > p {line-height: 1.3; word-break:break-all;}

/* banner */
/* #container #banner {display: block; overflow: hidden; position:absolute; bottom:210px; left:0; width:100%; height:80px; background-color:#707070; color:#ffffff;}
#container #banner .banner-list {display: flex; height:100%; padding:0 50px; align-items: center; animation: roll 10s linear infinite;}
#container #banner .banner-list > li {display: block; padding:0 50px;}
#container #banner .banner-list > li .item {display: flex; align-items: center;}
#container #banner .banner-list > li .item .cell {margin-right:10px; white-space: nowrap;} */
/* #container #banner .banner-list.n1:last-child {animation-delay: 5s;} */

/* @keyframes roll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
} */

#container #banner {display: block; overflow: hidden; position:absolute; bottom:210px; left:0; width:100%; height:80px; background-color:#707070; color:#ffffff;}
#container #banner .banner-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height:100%; padding:0 50px; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; width: calc(100% + 10px); animation: banner-animation 50s linear infinite;}
#container #banner .banner-list > li {display: block; width:500px; margin-right:10px; padding:0 50px; flex-shrink: 0;}
#container #banner .banner-list > li .item {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
#container #banner .banner-list > li .item .cell {padding-right:10px; white-space: nowrap;}
/* #container #banner .banner-list.n1:last-child {animation-delay: 5s;} */

@keyframes banner-animation {
	0% {
	  transform: translateX(0);
	}
	100% {
	  transform: translateX(calc(-500px * 10 - 10px * 10));
	}
}


/* footer */
#footer.sub .main-con {height:100%;}
/*-------------------------------------------------------------------
	@media 
-------------------------------------------------------------------*/

@media screen and (max-width:1670px) {
	#container .con-area {padding:0 30px;}
}
@media screen and (max-width:1024px) {
	#container .left-txt {max-width:100%;}
}
@media screen and (max-width:800px) {
	#container .con-area {padding:0 20px;}
    #container .tit-01 {margin-top:50px; font-size:2.5rem;}
	#container .sponsor-wrap .main-tit {font-size:1.75rem;}
	#container .top-bg {min-height:460px; background-position:center;}
}
@media screen and (max-width:700px) {
	#container .tit-02 {font-size:4rem;}
}
@media screen and (max-width:600px) {
	#container .con-area {padding:0 20px;}
    #container .tit-01 {margin-top:30px; font-size:2rem;}
	#container .tit-02 {font-size:3rem;} 
	#container .top-bg {min-height:360px;}
}
@media screen and (max-width:425px) {
	#container .tit-02 {font-size:2.5rem;}
}

/*-------------------------------------------------------------------
	분류그룹 : header > sub
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#header {display: block; background-color:#ffffff;}
#header .header-wrap::after {box-shadow: 1px 2px 15px rgba(0,0,0,0.1);}
#header .header-wrap.active::after {content:''; display: block; position:absolute; top:100%; left:0; z-index: 98; width:100%; height:50px; border-top:1px solid #707070; background-color:#ffffff; }
#header .header-wrap .logo {display: block; flex-shrink: 0;}
/* #header .header-wrap .logo > .img-box {display: flex; overflow: hidden; height:30px; align-items: center;}
#header .header-wrap .logo > .img-box > img {display: inline-block; transform: translateY(-50%);} */
#header .header-wrap .logo > .img-box {display: block;  overflow: hidden; height:30px;}
#header .header-wrap .logo > .img-box > img {display: inline-block; height:60px; transform: translateY(-50%);}
#header .header-wrap .menu-lists .gnb .list-wrap > li .menu-01 .txt {color:#707070;}
#header .header-wrap .menu-lists .site-map .btn-site-map .ln {display: block; width:100%; height:2px; background-color:#707070;}

/*-------------------------------------------------------------------
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:800px) {
	#header {height:60px;}
	#header .header-wrap .logo > .img-box {height:24px;}
	#header .header-wrap .logo > .img-box > img {height:40px;}
	#header .header-wrap .menu-lists {flex-grow:0;}
}

/*-------------------------------------------------------------------
	분류그룹 : 교육 > 예술문화탐방
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .people-area {display: block; width:100%;}
#container .people-area .img-box {width:100%;}
#container .people-area .img-box img {width:100%;}
#container .people-area .txt-box {display: block; padding:100px 200px;}
#container .people-area .txt-box .txt {display: block; padding-bottom:100px; font-weight:500; font-size:1.125rem; color:#4A4A4A; line-height: 1.7;}
#container .people-area .txt-box .apply-con {display: block; padding:90px 55px; background-color:#F2E8E8;}
#container .people-area .txt-box .apply-con .label {display: block; padding:6px 0; background-color:transparent; font-size: 0.875rem; color:#333333;}
#container .people-area .txt-box .apply-con .intxt {width:100%; height:50px; border-color:#707070; background-color:#ffffff;}
#container .people-area .txt-box .apply-con .item {padding-right:30px; padding-bottom:20px;}
#container .people-area .txt-box .apply-con .item:last-child {padding-right:0;}
#container .people-area .txt-box .apply-con .btn-apply {display: block; position:relative;  height:50px; margin:0 auto; margin-top:90px; padding:4px 80px; border-radius: 0; border:1px solid #707070; background-color:transparent;}
#container .people-area .txt-box .apply-con .btn-apply::before {content:''; position:absolute; top:0; left:0; z-index: 1; width:0; height:100%; background-color:#ffffff;}
#container .people-area .txt-box .apply-con .btn-apply > span {display: block; position:relative; z-index: 4; font-weight:700; font-size:1.25rem; color:#4A4A4A;}

/*-------------------------------------------------------------------
	@interaction 
-------------------------------------------------------------------*/
#container .people-area .txt-box .apply-con .btn-apply::before {transition:width 0.3s;}
#container .people-area .txt-box .apply-con .btn-apply:focus::before,
#container .people-area .txt-box .apply-con .btn-apply:hover::before {width:100%;}

/*-------------------------------------------------------------------
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:1500px) {
	#container .people-area .txt-box {padding:100px 150px;}
}
@media screen and (max-width:1150px) {
	#container .people-area .txt-box {padding:100px;}
}
@media screen and (max-width:1024px) {
	#container .people-area .txt-box {padding:80px;}
}
@media screen and (max-width:800px) {
	#container .people-area .txt-box {padding:80px 60px;}
	#container .people-area .txt-box .apply-con .item {padding-right:20px;}
}
@media screen and (max-width:650px) {
	#container .people-area .txt-box {padding:70px 20px;}
	#container .people-area .txt-box .txt {padding-bottom:70px;}
	#container .people-area .txt-box .apply-con {padding:80px 35px;}
	#container .people-area .txt-box .apply-con .item {padding-right:20px;}
	#container .people-area .txt-box .apply-con .btn-apply {padding:4px 70px;}
}
@media screen and (max-width:600px) {
	#container .people-area .txt-box .apply-con.grid .col-4.info {width:50%;}
	#container .people-area .txt-box .apply-con.grid .col-4.job {padding-right:0;}
	#container .people-area .txt-box .apply-con.grid .col-4.tel {width:100%;}
}
@media screen and (max-width:475px) {
	#container .people-area .txt-box .apply-con {padding:40px 25px;}
	#container .people-area .txt-box .apply-con .item {padding-right:8px;}
}
@media screen and (max-width:375px) {
	#container .people-area .txt-box {padding:50px 10px;}
	#container .people-area .txt-box .apply-con.grid .col,   
	#container .people-area .txt-box .apply-con.grid .col-4, 
	#container .people-area .txt-box .apply-con.grid .col-8,
	#container .people-area .txt-box .apply-con.grid .col-4.info {width:100%; padding-right:0;}
	#container .people-area .txt-box .apply-con .btn-apply {width:100%; margin-top:30px; padding:4px 20px;}
}

/*-------------------------------------------------------------------
	분류그룹 : 교육 > 공통 
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .edu-wrap {display: block; padding-top:40px;}
#container .edu-wrap .course-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin:0 -30px; flex-wrap:wrap;}
#container .edu-wrap .course-list > li {overflow: hidden; width:33.3333%; padding:0 30px 100px;}
#container .edu-wrap .course-list > li .item {display: block; }
#container .edu-wrap .course-list > li .item .img-box {overflow: hidden; position:relative; background-color:#dfdfdf;}
#container .edu-wrap .course-list > li .item .img-box::before {content:''; display: block; padding-top:100%;}
#container .edu-wrap .course-list > li .item .img-box > img {display: block; position:absolute; top:50%; left:50%; width:100%; height:100%; transform: translate(-50%,-50%);}
#container .edu-wrap .course-list > li .item .txt-box {display: block; padding:20px 0; color:#4A4A4A;}
#container .edu-wrap .course-list > li .item .txt-box .sub-tit {display: block; overflow: hidden; font-weight:500; font-size:0.875rem; text-overflow: ellipsis; white-space: nowrap;}
#container .edu-wrap .course-list > li .item .txt-box .tit {display: inline-block; padding:6px 0 6px; font-weight:500; font-size:1.5rem;}
#container .edu-wrap .course-list > li .item .txt-box .tit.title-01 {display: block; overflow: hidden; padding-right:5px; text-overflow: ellipsis; white-space: nowrap;}
#container .edu-wrap .course-list > li .item .txt-box .tit.title-02 {font-weight:700;}
#container .edu-wrap .course-list > li .item .txt-box .date {display: block; overflow: hidden; font-weight:400; font-size:1.125rem; text-overflow: ellipsis; white-space: nowrap;}


/*-------------------------------------------------------------------
	@interaction 
-------------------------------------------------------------------*/
#container .edu-wrap .course-list > li .item .img-box > img {transition:transform 0.4s;}
#container .edu-wrap .course-list > li:focus .item .img-box > img,
#container .edu-wrap .course-list > li:hover .item .img-box > img {transform:translate(-50%,-50%) scale(1.1);}

/*-------------------------------------------------------------------  
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:1400px) {
	#container .edu-wrap .course-list {margin:0 -30px;}
	#container .edu-wrap .course-list > li {padding:0 30px 60px;}
}
@media screen and (max-width:1200px) {
	#container .edu-wrap .course-list {margin:0 -30px;}
	#container .edu-wrap .course-list > li {padding:0 30px 60px;}
	#container .edu-wrap .course-list > li .item .txt-box .tit {padding:4px 0;}
}
@media screen and (max-width:1024px) {
	#container .edu-wrap .course-list {margin:0 -20px;}
	#container .edu-wrap .course-list > li {padding:0 20px 60px;}
}
@media screen and (max-width:800px) {
	#container .edu-wrap .course-list {margin:0 -15px;}
	#container .edu-wrap .course-list > li {width:50%; padding:0 15px 60px;}	
	#container .edu-wrap .course-list > li .item .txt-box .tit {font-size:1.25rem;}
}
@media screen and (max-width:600px) {

}
@media screen and (max-width:475px) {
	#container .edu-wrap .course-list {margin:0 -15px;}
	#container .edu-wrap .course-list > li {width:100%; padding:0 15px 60px;}
}
@media screen and (max-width:375px) {
	#container .edu-wrap .course-list {margin:0 -10px;}
	#container .edu-wrap .course-list > li {width:100%; padding:0 10px 50px;}
}

/*-------------------------------------------------------------------
	분류그룹 : 후원 > 공통
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .top-bg.type-a {background-attachment : scroll;}
#container .sponsor-wrap .con-area {max-width:1038px;}

/*-------------------------------------------------------------------
	분류그룹 : 후원 > 미술관건립 
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .sponsor-wrap .spon-con {display: block; padding:100px 0;}
#container .sponsor-wrap .txt {line-height: 1.5; font-size:1.125rem;}

/*-------------------------------------------------------------------  
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:800px) {
	#container .sponsor-wrap .spon-con {display: block; padding:70px 0;}
}

/*-------------------------------------------------------------------
	분류그룹 : 후원 > 이미지 슬라이드  
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .sponsor-wrap .spon-img {display: block;}
#container .sponsor-wrap .spon-img .spon-slide {display: block; overflow:hidden; width:100%; position:relative; z-index: 10; width:100%;}
#container .sponsor-wrap .spon-img .spon-slide .spon-pagination {position:absolute; bottom:10px; left:50%; z-index: 20; transform: translateX(-50%); text-align: center;}
#container .sponsor-wrap .spon-img .spon-slide .swiper-pagination-bullet {margin:0 4px;}
#container .sponsor-wrap .spon-img .spon-slide .swiper-pagination-bullet-active {background:#ffffff;}

/*-------------------------------------------------------------------
	분류그룹 : 후원 > 멤버십  
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .sponsor-wrap .membership-con {display: block; padding:100px 0;}
#container .sponsor-wrap .membership-con .club-con {display: block; margin-top:30px;}
#container .sponsor-wrap .membership-con .club-con .club-list {display: block;}
#container .sponsor-wrap .membership-con .club-con .club-list > li {width:100%; border-top:1px solid #707070; }
#container .sponsor-wrap .membership-con .club-con .club-list > li:last-child {border-bottom:1px solid #707070;}
#container .sponsor-wrap .membership-con .club-con .club-list > li .item {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position:relative; padding:20px 15px 20px 0; padding-right:30px;  cursor: pointer; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
#container .sponsor-wrap .membership-con .club-con .club-list > li .item::before {content:''; position:absolute; top:50%; right:14px; width:15px; height:1px; background-color:#707070; transform: translateY(-50%) rotate(90deg);}
#container .sponsor-wrap .membership-con .club-con .club-list > li .item::after {content:''; position:absolute; top:50%; right:14px; width:15px; height:1px; background-color:#707070; transform: translateY(-50%);}
#container .sponsor-wrap .membership-con .club-con .club-list > li .item .tit {display:block; min-width:270px; font-weight:500; font-size:1.25rem; color:#4A4A4A; letter-spacing:1.5px;}
#container .sponsor-wrap .membership-con .club-con .club-list > li .item .sub-tit {display:block; font-weight:400; font-size:1.125rem; color:#4A4A4A;}
#container .sponsor-wrap .membership-con .club-con .club-list > li .club-sub-txt {display: none;}
#container .sponsor-wrap .membership-con .club-con .club-list > li .club-sub-txt .club-content {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding:35px 0; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content:space-between;}
#container .sponsor-wrap .membership-con .club-con .club-list > li .club-sub-txt .club-content > li:nth-child(1) {max-width:270px; }
#container .sponsor-wrap .membership-con .club-con .club-list > li .club-sub-txt .club-content > li:nth-child(3) {max-width:350px; }
#container .sponsor-wrap .membership-con .club-con .club-list > li .club-sub-txt .club-content > li {width:100%; padding-bottom:20px;}


#container .sponsor-wrap .membership-con .club-con .club-list > li .club-sub-txt .club-content > li .tit {display: block; margin-bottom:15px; font-weight:700; font-size:1rem; color:#4A4A4A;}
#container .sponsor-wrap .membership-con .club-con .club-list > li .club-sub-txt .club-content > li .txt {display: block; font-weight:500; font-size:1rem; color:#4A4A4A;}
 #container .sponsor-wrap .membership-con .club-con .caution {display: block; margin-top:15px; font-weight:500; font-size:0.9375rem; color:#4A4A4A; line-height:1.5;}

/*-------------------------------------------------------------------  
	@interaction 
-------------------------------------------------------------------*/
#container .sponsor-wrap .membership-con .club-con .club-list > li .item::before {transition:transform 0.4s;}
#container .sponsor-wrap .membership-con .club-con .club-list > li.active .item::before {transform: translateY(-50%) rotate(0);}

/*-------------------------------------------------------------------  
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:800px) {
	#container .sponsor-wrap .membership-con {display: block; padding:70px 0;}
	#container .sponsor-wrap .membership-con .club-con .club-list > li .item .tit {min-width:200px;}
	#container .sponsor-wrap .membership-con .club-con .club-list > li .club-sub-txt .club-content {padding:30px 0;}
}
@media screen and (max-width:650px) {
	#container .sponsor-wrap .membership-con .club-con .club-list > li .item {display: block;}
	#container .sponsor-wrap .membership-con .club-con .club-list > li .item .tit {width:100%; min-width:100%; margin-bottom:5px;}
	#container .sponsor-wrap .membership-con .club-con .club-list > li .item .sub-tit {font-size:0.9375rem;}
 }
@media screen and (max-width:600px) {
	#container .sponsor-wrap .membership-con {display: block; padding:70px 0;}
	#container .sponsor-wrap .membership-con .club-con .club-list > li .item .tit {min-width:200px;}
	#container .sponsor-wrap .membership-con .club-con .club-list > li .club-sub-txt .club-content {display: block; padding:20px 0;}
	#container .sponsor-wrap .membership-con .club-con .club-list > li .club-sub-txt .club-content > li {padding-bottom:30px;}
}

/*-------------------------------------------------------------------
	분류그룹 : 후원 > 기부참여  
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .sponsor-wrap .donation-con {display: block; padding:100px 0; border-top:1px solid #707070;}
#container .sponsor-wrap .donation-con .txt {line-height: 1.5; font-size:1.125rem;}
#container .sponsor-wrap .donation-con .btn-donation {margin-top:40px; padding:4px 40px;}

/*-------------------------------------------------------------------  
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:800px) {
	#container .sponsor-wrap .donation-con {padding:70px 0;}
}
@media screen and (max-width:325px) {
	#container .sponsor-wrap .donation-con .btn-donation {width:100%;}
}

/*-------------------------------------------------------------------
	분류그룹 : 소개 > 공통
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .top-bg.introduce .tab-box.intro {position:absolute; top:60%; left:50%; width: 100%; margin-bottom: 20px; transform:translate(-50%, -50%);}
#container .top-bg.introduce .tab-box.intro .list-wrap {overflow-x: auto; overflow-y: hidden;}
#container .top-bg.introduce .tab-box.intro .list-wrap > li {display: block;}
#container .top-bg.introduce .tab-box.intro .list-wrap > li .btn-tab {display:block; position:relative; width: 100%; min-height: 40px; padding:6px 25px; border:1px solid #4a4a4a; border-right:0; background-color:rgba(255,255,255,0.8); font-weight: 500; font-size: 1rem; color:#4a4a4a; line-height:40px; text-align: center; }
#container .top-bg.introduce .tab-box.intro .list-wrap > li:last-child .btn-tab {border-right:1px solid #4A4A4A;}

#container .top-bg.introduce.people {background-image:url('../images/sub/05/header_people.png');}
#container .top-bg.introduce.news {background-image:url('../images/sub/05/header_newsletter.png');}

#container .top-bg.introduce .tab-box.intro::-webkit-scrollbar {margin-top:15px; width: 3px; box-sizing: content-box;}


/*-------------------------------------------------------------------  
	@interaction
-------------------------------------------------------------------*/
#container .top-bg.introduce .tab-box.intro .list-wrap > li .btn-tab {transition:border 0.3s, background 0.3s;}
#container .top-bg.introduce .tab-box.intro .list-wrap > li:focus .btn-tab > span {transition: color 0.3s;}
#container .top-bg.introduce .tab-box.intro .list-wrap > li:focus .btn-tab,
#container .top-bg.introduce .tab-box.intro .list-wrap > li:hover .btn-tab,
#container .top-bg.introduce .tab-box.intro .list-wrap > li .btn-tab.active {border:1px solid #ccc; border-right:0; background-color:#000;}
#container .top-bg.introduce .tab-box.intro .list-wrap > li:focus:last-child .btn-tab,
#container .top-bg.introduce .tab-box.intro .list-wrap > li:hover:last-child .btn-tab {border-right:1px solid #ccc;}
#container .top-bg.introduce .tab-box.intro .list-wrap > li:focus .btn-tab > span,
#container .top-bg.introduce .tab-box.intro .list-wrap > li:hover .btn-tab > span,
#container .top-bg.introduce .tab-box.intro .list-wrap > li .btn-tab.active > span {color:#ccc;}


/*-------------------------------------------------------------------  
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:800px){
	#container .top-bg.introduce .tab-box.intro .list-wrap > li .btn-tab {padding:5px 20px;}
}
@media screen and (max-width:600px){
	#container .top-bg.introduce .tab-box.intro .list-wrap {text-align: center;}
	#container .top-bg.introduce .tab-box.intro .list-wrap {justify-content: flex-start;}
	#container .top-bg.introduce .tab-box.intro .list-wrap > li {width:33.3333%; min-width:150px;}
	#container .top-bg.introduce .tab-box.intro .list-wrap > li .btn-tab {padding:5px 10px;}
}

/*-------------------------------------------------------------------
	분류그룹 : 소개
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/

#container .top-bg.introduce {background-image:url('../images/sub/05/img_about_us.png');}
#container .top-bg.introduce .tit-02 {color:#ffffff;}

#container .about-wrap {display: block; padding:50px 0;}
#container .about-wrap .txt {line-height: 1.5; font-size:1.125rem;}
#container .about-wrap .con-box {max-width:1038px; margin:0 auto;}

#container .about-wrap .mission-con {display: block; padding-bottom:80px;}
#container .about-wrap .mission-con .diagram-box {overflow:hidden; position:relative;margin:100px 0; width:100%; min-height:511px;}
#container .about-wrap .mission-con .diagram-box .img-box {position:absolute; top:0; left:50%; width:548px; height:511px; transform: translateX(-50%); }
#container .about-wrap .mission-con .diagram-box .img-box > img {width:100%; height:100%;}

#container .about-wrap .gallery-con {display: block; padding-bottom:80px;}
#container .about-wrap .gallery-con .gal-tit {display: block; margin-bottom:10px; font-weight:600; font-size:1.25rem; }
#container .about-wrap .gallery-con .map-wrap {position:relative; max-width:1300px; width:100%; height:600px; margin:0 auto; margin-top:50px;}

.radius_border{border:1px solid #919191;border-radius:5px;}     
.custom_typecontrol {position:absolute;top:10px;right:10px;overflow:hidden;width:130px;height:30px;margin:0;padding:0;z-index:1;font-size:12px;font-family:'Malgun Gothic', '맑은 고딕', sans-serif;}
.custom_typecontrol span {display:block;width:65px;height:30px;float:left;text-align:center;line-height:30px;cursor:pointer;}
.custom_typecontrol .btn {background:#fff;background:linear-gradient(#fff,  #e6e6e6);}       
.custom_typecontrol .btn:hover {background:#f5f5f5;background:linear-gradient(#f5f5f5,#e3e3e3);}
.custom_typecontrol .btn:active {background:#e6e6e6;background:linear-gradient(#e6e6e6, #fff);}    
.custom_typecontrol .selected_btn {color:#fff;background:#425470;background:linear-gradient(#425470, #5b6d8a);}
.custom_typecontrol .selected_btn:hover {color:#fff;}   
.custom_zoomcontrol {position:absolute;top:50px;right:10px;width:36px;height:80px;overflow:hidden;z-index:1;background-color:#f5f5f5;} 
.custom_zoomcontrol span {display:block;width:36px;height:40px;text-align:center;cursor:pointer;}     
.custom_zoomcontrol span img {width:15px;height:15px;padding:12px 0;border:none;}             
.custom_zoomcontrol span:first-child{border-bottom:1px solid #bfbfbf;}            


#container .about-wrap .found-con {display: block;}
#container .about-wrap .found-con .btn-more {display: block; margin:50px 0; background-color:transparent; font-weight:500; font-size:1.125rem;}
#container .about-wrap .found-con .found-slide {display: block; overflow:hidden; position:relative; max-width:1300px; margin:0 auto 60px;}
#container .about-wrap .found-con .found-slide .swiper-slide {}
#container .about-wrap .found-con .found-slide .swiper-slide .img-box {display: block; overflow: hidden; width:100%; padding-top:56.615%;}
#container .about-wrap .found-con .found-slide .swiper-slide .img-box img {display: block; position: absolute; top: 0; left: 0; width: 100%; max-width: none; height: 100%; object-fit: cover;}
#container .about-wrap .found-con .found-pagination {position:absolute; bottom:10px; left:50%; z-index: 20; transform: translateX(-50%); text-align: center;}
#container .about-wrap .found-con .swiper-pagination-bullet {margin:0 4px;}
#container .about-wrap .found-con .swiper-pagination-bullet-active {background:#ffffff;}

/*-------------------------------------------------------------------  
	@interaction 
-------------------------------------------------------------------*/
#container .about-wrap .mission-con .diagram-box .img-box {transition:opacity 2s, transform 2s; opacity: 0;}
#container .about-wrap .mission-con .diagram-box .img-box.v1 {transform:translateX(-50%) translateY(-100%);}
#container .about-wrap .mission-con .diagram-box .img-box.v2 {transform:translateX(-100%);}
#container .about-wrap .mission-con .diagram-box .img-box.v3 {transform:translateX(100%);}
#container .about-wrap .mission-con .diagram-box .img-box.v4 {transform:translateX(-50%) translateY(20%); transition-delay:0.2s;}
#container .about-wrap .mission-con .diagram-box .img-box.on {opacity: 1;}
#container .about-wrap .mission-con .diagram-box .img-box.v1.on {transform:translateX(-50%) translateY(0);}
#container .about-wrap .mission-con .diagram-box .img-box.v2.on {transform:translateX(-50%);}
#container .about-wrap .mission-con .diagram-box .img-box.v3.on {transform:translateX(-50%);}
#container .about-wrap .mission-con .diagram-box .img-box.v4.on {transform:translateX(-50%) translateY(0);}
/*-------------------------------------------------------------------  
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:800px) {
	#container .about-wrap .mission-con .diagram-box {min-height: auto; margin:60px 0;}
	#container .about-wrap .mission-con .diagram-box .img-box {opacity:1;}
	#container .about-wrap .mission-con .diagram-box .img-box.part {display: none;}
	#container .about-wrap .mission-con .diagram-box .img-box.all {display: block; position:relative; width:100%; height:100%;}
	#container .about-wrap .gallery-con .map-box {height:500px; padding:0 30px;}
}

/*-------------------------------------------------------------------
	분류그룹 : map
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/

/* 카카오맵 */
#map {height: 100%;}
/* 카카오맵 -오버레이 */
#map .info {position: absolute; left: 30px; bottom: 40px; padding: 20px; border: 2px solid #c452bf; border-radius: 2px; background-color: #ffffff;}
#map .info::before {content:""; position: absolute; top: 100%; right: 100%; width: 30px; height: 40px; background-color: #c452bf; clip-path: path('M 0 39 L 1,40 L 30,1 L 29,0 Z');}
#map .info::after {content:""; position: absolute; top: calc(100% + 38px); right: calc(100% + 28px); width: 6px; height: 6px; border-radius: 6px; background-color: #c452bf;}
#map .info .tit {display: block; margin-bottom: 5px; font-weight: 400; font-size: 14px;}
#map .info .period {display: block; font-size: 14px;}
#map .info .btn-close {display: block; position: absolute; top: -5px; right: -5px; width: 30px; height: 30px; padding: 0; border: 0; background-color: transparent; cursor: pointer;}
#map .info .btn-close::before,
#map .info .btn-close::after {content:""; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; background-color: #000000;}
#map .info .btn-close::before {transform: translate(-50%, -50%) rotate(45deg);}
#map .info .btn-close::after {transform: translate(-50%, -50%) rotate(-45deg);}

/*-------------------------------------------------------------------
	분류그룹 : 디테일 공통
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .detail-slide {display: block; width:100%; margin:60px 0;}
#container .detail-slide .ex-active-swiper {display: block; height:auto !important;}  
#container .detail-slide .ex-active-swiper .swiper-slide {height: auto;}
#container .detail-slide .ex-active-swiper .swiper-slide img {display: block; width:100%;}
#container .detail-slide .thumb-swiper {margin:54px -10px 0;}
#container .detail-slide .thumb-swiper .swiper-slide {padding:0 10px;}
#container .detail-slide .thumb-swiper .swiper-slide .img-box {overflow: hidden; position:relative; padding-top:100%;}
#container .detail-slide .thumb-swiper .swiper-slide .img-box img {position:absolute; top:0; left:0; width:100%; height:100%;}


#container .detail-slide #thumb-swiper {position:relative; padding-bottom:20px;}
#container .detail-slide .thumb-swiper .thumb-scroll {padding-top:20px;}
#container .detail-slide .thumb-swiper .thumb-scroll .swiper-scrollbar {bottom:-20px;}

#container .detail-slide .swiper-pagination-progressbar-fill {background-color:#333;}

#container .detail-wrap .detail-box .youtube-con {overflow:hidden; position:relative; height:0; margin-top:100px; padding-bottom:56.25%;}
#container .detail-wrap .detail-box .youtube-con .iframe {position:absolute; top:0; left:0; width:100%; height:100%;}

/*-------------------------------------------------------------------  
	@interaction 
-------------------------------------------------------------------*/
/* #container .detail-slide #thumb-swiper .swiper-slide.swiper-slide-thumb-active {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);} */


/*-------------------------------------------------------------------
	분류그룹 : 전시 > 전시 디테일 
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .detail-wrap.ex {display: block;}
#container .detail-wrap.ex .detail-thumb {overflow: auto; width:100%; padding-top:545px; background-image:url('../images/sub/01/img_bg_01.png'); background-repeat: no-repeat; background-size:cover; background-position:top;}
#container .detail-wrap.ex .ex-area {padding:60px 0; background-color:#ffffff;}
#container .detail-wrap.ex .ex-area .con-area {max-width:1300px;}

#container .detail-wrap.ex .detail-box {padding-top:30px;} 
#container .detail-wrap.ex .detail-box::after {content:''; display: block; clear:both;} 
#container .detail-wrap.ex .detail-box .l-con {float:left; min-width:330px; padding-right:60px; flex-shrink:0;} 
#container .detail-wrap.ex .detail-box .r-con {display: block; overflow: hidden;} 
#container .detail-wrap.ex .detail-box .r-con .content {display: block; line-height:1.6; color:#4a4a4a; word-break:break-all;}
#container .detail-wrap.ex .detail-box .r-con .content .text {display: block; font-size:1.125rem; line-height: 1.7;}
#container .detail-wrap.ex .detail-box .r-con .content p {line-height:1.6; word-break:break-all;}


/*-------------------------------------------------------------------  
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:1024px) {
	#container .detail-wrap.ex .detail-box .l-con {float:none; min-width:100%; margin-bottom:40px; padding-right:0;} 
}
@media screen and (max-width:600px) {
	#container .detail-wrap.ex .detail-thumb {padding-top:325px;}
}
@media screen and (max-width:475px) {
	#container .detail-wrap.ex .detail-thumb {padding-top:345px;}
}
@media screen and (max-width:425px) {
	#container .detail-tit .tit {font-size:2.5rem;}
}
@media screen and (max-width:375px) {
	#container .detail-tit .tit {font-size:2.375rem;}
}

/*-------------------------------------------------------------------
	분류그룹 : 교육 > 교육 디테일 
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .detail-wrap.edu {display: block; font-family:'Noto Sans KR','Roboto','Pretendard', sans-serif;}
#container .detail-wrap.edu .ex-area {padding:100px 0 60px; background-color:#ffffff;}
#container .detail-wrap.edu .ex-area .con-area {max-width:1300px;}

#container .detail-wrap.edu .detail-box {padding-top:30px;} 
#container .detail-wrap.edu .detail-box::after {content:''; display: block; clear:both;} 
#container .detail-wrap.edu .detail-box .l-con {float:left; min-width:330px; padding-right:60px; flex-shrink:0;} 
#container .detail-wrap.edu .detail-box .r-con {display: block; overflow: hidden;} 
#container .detail-wrap.edu .detail-box .r-con .content {display: block; line-height:1.6; color:#4a4a4a; word-break:break-all;}
#container .detail-wrap.edu .detail-box .r-con .content .text {display: block; font-size:1.125rem; line-height: 1.7;}
#container .detail-wrap.edu .detail-box .r-con p {line-height:1.6;  word-break:break-all;}



/*-------------------------------------------------------------------  
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:1024px) {
	#container .detail-wrap.edu .detail-box .l-con {float:none; min-width:100%; margin-bottom:40px; padding-right:0;} 
}
@media screen and (max-width:425px) {
	#container .detail-tit .tit {font-size:2.5rem;}
}
@media screen and (max-width:375px) {
	#container .detail-tit .tit {font-size:2.375rem;}
}

/*-------------------------------------------------------------------
	분류그룹 : 뉴스레터 > 구독신청
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .news-wrap {display: block; padding:60px 0;}
#container .news-wrap .tit-01 {margin-bottom:20px; letter-spacing:4px;}
#container .news-wrap .sub-tit-01 {font-size:1.75rem; text-align: center;}
#container .news-wrap .newsletter-con {display: block;}
#container .news-wrap .newsletter-con .subscribe {max-width:600px; margin:120px auto;}
#container .news-wrap .newsletter-con .subscribe .input-box {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -moz-box-justify-content: center;-ms-flex-pack: center;justify-content: center; justify-content: center; margin-bottom:40px;}
#container .news-wrap .newsletter-con .subscribe .input-box .email {height:50px; border:1px solid #707070; background-color:#ffffff; color:#707070; flex-grow:1;}
#container .news-wrap .newsletter-con .subscribe .input-box .email::placeholder {font-weight:400; font-size:1.125rem; color:#B1B1B1; flex-shrink:0;}
#container .news-wrap .newsletter-con .subscribe .input-box .btn-subscribe {height:50px; padding:4px 24px; border-radius: 0; background-color:#707070; font-weight:600; font-size:1.125rem; color:#ffffff; letter-spacing:1.2px;}
#container .news-wrap .newsletter-con .subscribe .txt-box {text-align: center; font-weight:400; font-size:0.875rem; color:#4A4A4A;}

#container .news-wrap .newsletter-con .news-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin:0 -20px; flex-wrap:wrap;}
#container .news-wrap .newsletter-con .news-list > li {width:25%; padding:0 20px 90px;}
#container .news-wrap .newsletter-con .news-list > li .list-item {display: block;}
#container .news-wrap .newsletter-con .news-list > li .list-item .tit {display: block; font-weight:700; font-size:1rem; margin-bottom:15px;}
#container .news-wrap .newsletter-con .news-list > li .list-item .thumb-box {position:relative; overflow: hidden;}
#container .news-wrap .newsletter-con .news-list > li .list-item .thumb-box::after {content:''; display: block; padding-top:66.66%;}
#container .news-wrap .newsletter-con .news-list > li .list-item .thumb-box > img {display: block; position:absolute; top:50%; left:0; width:100%; transform: translateY(-50%);}

/*-------------------------------------------------------------------  
	@interaction                                                                                                    
-------------------------------------------------------------------*/
#container .news-wrap .newsletter-con .subscribe .input-box .btn-subscribe {transition:background 0.3s;}
#container .news-wrap .newsletter-con .subscribe .input-box .btn-subscribe:focus,
#container .news-wrap .newsletter-con .subscribe .input-box .btn-subscribe:hover {background-color:#000000;}

#container .news-wrap .newsletter-con .news-list > li .list-item .thumb-box > img {transition: transform 0.4s;}
#container .news-wrap .newsletter-con .news-list > li .list-item:focus .thumb-box > img,
#container .news-wrap .newsletter-con .news-list > li .list-item:hover .thumb-box > img {transform: translateY(-50%) scale(1.1);}

/*-------------------------------------------------------------------  
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:1024px) {
	#container .news-wrap .newsletter-con .news-list > li {width:33.3333%;}
}
@media screen and (max-width:800px) {
	#container .news-wrap .newsletter-con .news-list {margin:0 -15px;}
	#container .news-wrap .newsletter-con .news-list > li {padding:0 15px 60px;}
	#container .news-wrap .newsletter-con .news-list > li .list-item .tit {font-size:0.9375rem;}
}
@media screen and (max-width:600px) {
	#container .news-wrap .sub-tit-01 {font-size:1.5rem;}
	#container .news-wrap .newsletter-con .subscribe {margin:90px auto;}
	#container .news-wrap .newsletter-con .news-list > li {width:50%;}
	#container .news-wrap .newsletter-con .subscribe .input-box .btn-subscribe {max-width:100px; padding:4px 8px; font-size:0.9375rem;}
}
@media screen and (max-width:425px) {
	#container .news-wrap .newsletter-con .news-list {margin:0 -10px;}
	#container .news-wrap .newsletter-con .news-list > li {padding:0 10px 50px;}
}
@media screen and (max-width:375px) {
	#container .news-wrap .newsletter-con .news-list {margin:0;}
	#container .news-wrap .newsletter-con .news-list > li {width:100%; padding:0 0 50px;}
}


/*-------------------------------------------------------------------
	분류그룹 : 교육 > 창작공간
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .create-wrap {display: block; max-width:1300px; margin:0 auto;}
#container .create-wrap .txt-area {margin:80px auto 50px; padding:0 130px;}
#container .create-wrap .txt-area .tit {display: block; margin:0 auto 50px; font-weight:700; font-size:3rem; color:#4A4A4A; text-align: center;}
#container .create-wrap .txt-area .txt {display: block; margin-bottom:44px; line-height: 1.7;}
#container .create-wrap .txt-area .btn-apply {display: inline-block; padding:0 50px; }
#container .create-wrap .img-area {overflow:hidden; position:relative; margin-bottom:100px;}
#container .create-wrap .img-area .create-pagination {position:absolute; bottom:10px; left:50%; z-index: 20; transform: translateX(-50%); text-align: center;}
#container .create-wrap .img-area .swiper-pagination-bullet {margin:0 4px;}
#container .create-wrap .img-area .swiper-pagination-bullet-active {background:#ffffff;}
/*-------------------------------------------------------------------  
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:1300px) {
	#container .create-wrap .img-area {margin-bottom: 60px;}	
}
@media screen and (max-width:1024px) {
	#container .create-wrap .txt-area {padding:0 50px;}
	#container .create-wrap .txt-area .tit {font-size:2.5rem;}
}
@media screen and (max-width:750px) {
	#container .create-wrap .txt-area {margin:50px 0; padding:0 10px;}
	#container .create-wrap .txt-area .txt {margin-bottom:34px;}
}
@media screen and (max-width:475px) {
	#container .create-wrap .txt-area {padding:0;}
	#container .create-wrap .txt-area .tit {margin:0 auto 30px; font-size:2rem;}
}
@media screen and (max-width:375px) {
	#container .create-wrap .txt-area .btn-apply {width:100%;}
}


/* 후원 20260226 */
.donors {display: block;}
.donors .donors_tit {
  text-align: center;
  font-family: 'Transat Text', sans-serif;
  font-size: 20px;
  font-weight: 500; /* medium */
  letter-spacing: 0.1em; /* 자간 100 */
  margin: 60px 0 20px 0;
}

.donors .donors_name {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  border-top:2px solid #707070;
}
.donors .donors_name li {
  text-align: center;
  font-size:1.25rem;
  border-bottom: 1px solid #c7c7c7;
  padding:15px 0; color: #5e5e5e;
}

.mt50 { margin-top: 50px;}
.donors_info { margin-top:15px; font-weight:500; font-size: 0.9375rem; color:#4A4A4A}
.block_br {display: block;}
sup {font-size: 10px;color: #999; margin-left:5px;}


/* 반응형 처리 */
@media (max-width: 1024px) {
  .donors .donors_name {grid-template-columns: repeat(3, 1fr);}
  .block_br {display:inline-block;}

}

@media (max-width: 768px) {
  .donors .donors_name {grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .donors .donors_name {grid-template-columns: 1fr;}
}
#container .sponsor-wrap .con-area2026 {max-width: 1311px; margin:0 auto;}
/* 후원 끝 20260226 */