@charset "UTF-8";


/* 썸네일 공통부분 */
.thumb {position:relative; width:100%; overflow:hidden;}
.thumb span {display:block; position:absolute; left:0; top:0; right:0; bottom:0; background:#f8f8f8; overflow:hidden;}
.thumb:before {content:''; display:block; position:relative; padding-top:124%;  overflow:hidden;}
.thumb img {display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:none; max-height:100%; height:100%;}


/* ******************************************
	// 문화장인 리스트
****************************************** */

/* 리스트 페이지 */
[class*="master-"] .name {font-size:1.333333em; font-weight:700;}
[class*="master-"] .nameE {font-family:'Paperozi'; font-weight:400; font-size:.888889em; color:#777; margin:.222222em 0 .888889em;}
[class*="master-"] .field {font-weight:700; color:#a57234;}

.master-list .tabs {position:absolute; top:0; right:0;}
.master-list .tabs ul {display:flex; justify-content:right;}
.master-list .tabs li + li {margin-left:.222222em;}
.master-list .tabs li button {width:2.666667em; height:2.666667em; border:1px solid #222; background-color:#fff; background-repeat:no-repeat; background-position:center center; background-size:100% auto; text-indent:-9999px; overflow:hidden;}
.master-list .tabs li button.on {border-color:#a57234; background-color:#a57234;}
.master-list .tabs li button[data-tab="액자"] {background-image:url(../img/program/view_thumb.svg);}
.master-list .tabs li button[data-tab="리스트"] {background-image:url(../img/program/view_list.svg);}
.master-list .tabs li button.on[data-tab="액자"] {background-image:url(../img/program/view_thumb_w.svg);}
.master-list .tabs li button.on[data-tab="리스트"] {background-image:url(../img/program/view_list_w.svg);}

.master-list .tab-con {text-align:center;}
.master-list .tab-con ul {margin-bottom:1.111111em;}
.master-list .tab-con li {float:left; width:25%; padding:.888889em; text-align:left;}
.master-list .tab-con li a {position:relative; display:block; }
.master-list .tab-con li a:hover,
.master-list .tab-con li a:focus {text-decoration:none;}
.master-list .tab-con li a:after {content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:#a57234; transition:ease .5s;}
.master-list .tab-con li a:hover:after,
.master-list .tab-con li a:focus:after {width:100%; transition:ease .5s;} 

.master-list .tab-con .txt {position:relative; padding:1.333333em 0;}
.archive-list .tab-con .txt span {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.master-list .tab-con[data-content="리스트"] li a {display:table; width:100%; padding:.888889em 0;}
.master-list .tab-con[data-content="리스트"] .thumb {display:table-cell; width:6.666667em; vertical-align:middle;}
.master-list .tab-con[data-content="리스트"] .thumb span {background-size:80% auto;}
.master-list .tab-con[data-content="리스트"] .thumb:before {padding-top:100%;}
.master-list .tab-con[data-content="리스트"] .txt {display:table-cell; width:calc(100% - 6.666667em); vertical-align:middle; padding:.666667em 0 .666667em 2.222222em;}

@media all and (max-width:1200px) {
	.master-list .tab-con li {width:33.333333%; padding:.666667em;}
}

@media all and (max-width:768px) {
	.master-list .tabs {position:relative; top:auto; right:auto; padding:0; padding-bottom:1.666667em;}
	.master-list .tab-con li {padding:.444444em;}
	.master-list .tab-con .thumb {background-size:80%;}
	
	.master-list .tab-con[data-content="리스트"] li {width:50%;}
	.master-list .tab-con[data-content="리스트"] .txt {padding-left:1.333333em;}
}

@media all and (max-width:640px) {
	.master-list .tab-con li {width:50%;}
	.master-list .tab-con[data-content="리스트"] li {width:100%;}
}

/* 상세 페이지 */

.master-view {position:relative;}
.master-view > div {border-bottom:1px solid #222;}
.master-view .intro > div {padding:1.777778em 0;}
.master-view .intro .top-box {position:relative; display:table; width:100%; padding-top:0; border-bottom:1px solid #ccc;}
.master-view .intro .top-box .pic {display:table-cell; vertical-align:top; width:26.666667em;}
.master-view .intro .top-box .thumb span img {display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:none; max-height:100%;}
.master-view .intro .top-box .info {display:table-cell; vertical-align:top; width:calc(100% - 26.666667em); padding-left:3.555556em;}
.master-view .intro .top-box .tit {display:block; padding:.666667em 0; border-bottom:1px solid #ccc; font-size:1.555556em;}
.master-view .intro .top-box .tit span {display:inline-block; margin:0;}
.master-view .intro .top-box .tit span + span {margin-left:.5em;}
.master-view .intro .top-box .tit .nameE,
.master-view .intro .top-box .tit .field {font-size:.8em;}
.master-view .intro .top-box .sns {position:absolute; right:0; top:1.444444em; display:flex; align-items:center; justify-content:center;}
.master-view .intro .top-box .sns a {display:block; width:2em; height:2em; margin:0 .25em; overflow:hidden; text-indent:-9999px; background-repeat:no-repeat; background-position:center center; background-size:100% auto;}
.master-view .intro .top-box .sns a.homepage {background-image:url(../img/program/master_homepage.svg);}
.master-view .intro .top-box .sns a.instagram {background-image:url(../img/program/master_instagram.svg);}
.master-view .intro .top-box .sns a.facebook {background-image:url(../img/program/master_facebook.svg);}
.master-view .intro .top-box .sns a.homepage:hover,
.master-view .intro .top-box .sns a.homepage:focus {background-image:url(../img/program/master_homepage_on.svg);}
.master-view .intro .top-box .sns a.instagram:hover,
.master-view .intro .top-box .sns a.instagram:focus {background-image:url(../img/program/master_instagram_on.svg);}
.master-view .intro .top-box .sns a.facebook:hover,
.master-view .intro .top-box .sns a.facebook:focus {background-image:url(../img/program/master_facebook_on.svg);}
.master-view .intro .top-box .txt {padding:1.333333em 0;}
.master-view .intro .detail {position:relative; padding:2.222222em 0; text-align:center; border-bottom:1px solid #ccc;}
.master-view .intro .detail .con {position:relative; text-align:initial; height:33.333333em; margin-bottom:2.222222em; overflow:hidden;}
.master-view .intro .detail .con img {display:block; margin:0 auto 1.111111em;}
.master-view .intro .detail .con:before {content:''; position:absolute; left:0; right:0; bottom:0; width:100%; height:16.666667em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 21.46%, #FFF 100%);}
.master-view .intro .detail .con.on {height:auto;}
.master-view .intro .detail .con.on:before {display:none;}

.master-view dl {display:flex; width:100%; align-items:start;}
.master-view dt {width:13.333333em; padding:1.333333em 0;}
.master-view dd {width:calc(100% - 13.333333em);  padding:1.333333em 0;}
.master-view .item .swiper-slide {width:auto !important; height:25em; margin-right:2em;}
.master-view .item .swiper-slide img {height:100%;}
.master-view .craft-item .swiper-slide {padding-bottom:1.111111em; border-bottom:1px solid #ccc;}
.master-view .craft-item .swiper-slide p {margin-top:.555556em; font-size:1.333333em; text-align:left; font-weight:700;}
/* .master-view .craft-item .control {justify-content:left;} */
.master-view .no-data {padding:3em 2em; text-align:center; width:100%;}
.master-view .no-data span {display:inline-block; padding-top:5em; background:url(../img/common/no_data.svg) no-repeat top center; background-size:4em auto;}

.master-view .tab-box {border-top:0;}

@media all and (max-width:1024px) {
	.master-view .tab-box {padding:1.111111em 0;}
	.master-view .intro .top-box {display:block;}
	.master-view .intro .top-box .pic {display:block; margin:0 auto;}
	.master-view .intro .top-box .info {display:block; width:100%; padding-left:0; padding-top:1.777778em;}
	.master-view dl {display:block;}
	.master-view dt {width:100%; padding-bottom:1.111111em;}
	.master-view dd {width:100%;}
	.master-view dt br {display:none;}
}

@media all and (max-width:640px) {
	.master-view > div {padding:1.555556em 0;}
	.master-view .tab-box {padding:1.555556em 0;}
}

@media all and (max-width:480px) {
	.master-view .intro .top-box .pic {width:100%;}
}

/* ******************************************
	// 문화장인 공예품
****************************************** */

/* 리스트 페이지 */
[class*="craft-"] .name {font-size:1.333333em; font-weight:700;}
[class*="craft-"] .nameE {font-family:'Paperozi'; font-weight:400; font-size:.444444em; color:#777; margin:.222222em 0 .888889em;}
[class*="craft-"] .field {font-weight:700; color:#a57234;}


.craft-list .bod-list ul {margin-bottom:1.111111em;}
.craft-list .bod-list li {float:left; width:25%; padding:.888889em; text-align:left;}
.craft-list .bod-list li a {position:relative; display:block;}
.craft-list .bod-list li .thumb span {background:#f8f8f8;}
.craft-list .bod-list li a .name {font-size:1em;  color:#a57234;}
.craft-list .bod-list li a .field {font-size:1.333333em; font-weight:700; color:#222;}
.craft-list .bod-list li a:hover,
.craft-list .bod-list li a:focus {text-decoration:none;}
.craft-list .bod-list li a:after {content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:#a57234; transition:ease .5s;}
.craft-list .bod-list li a:hover:after,
.craft-list .bod-list li a:focus:after {width:100%; transition:ease .5s;}


.craft-list .bod-list .thumb:before {padding-top:100%;}
.craft-list .bod-list .txt {position:relative; padding:1.333333em 0;}
.craft-list .bod-list .txt span {display:block;}

@media all and (max-width:1200px) {
	.craft-list .bod-list li {width:33.333333%; padding:.666667em;}
}

@media all and (max-width:768px) {
	.craft-list .bod-list li {padding:.444444em;}
	.craft-list .bod-list .thumb span {background-size:80%;}
}

@media all and (max-width:640px) {
	.craft-list .bod-list li {width:50%;}
}

/* 상세 페이지 */
.craft-view {position:relative; padding-top:2.888889em; border-top:1px solid #222; border-bottom:1px solid #222;}
.craft-view .price-box {position:sticky; width:40%; float:right; top:2.888889em; }
.craft-view .price-box > div {border-bottom:1px solid #ccc; padding:1.555556em 0;}
.craft-view .price-box > div:last-child {border-bottom:0;}
.craft-view .price-box .tit h4 {margin:.333333em 0 .555556em;}
.craft-view .price-box .tit .cate {color:#a57243; font-size:1.333333em; font-weight:700;}
.craft-view .price-box ul li + li {margin-top:.444444em;}
.craft-view .price-box ul li strong {display:inline-block; font-weight:700; width:4.444444em; margin-right:.222222em;}
.craft-view .price-box .price {display:table; width:100%;}
.craft-view .price-box .price p {display:table-cell; width:40%; font-weight:700; vertical-align:middle; font-size:1.555556em;}
.craft-view .price-box .price strong {display:table-cell; width:60%; font-weight:700; vertical-align:middle; font-size:2.222222em; text-align:right;}
.craft-view .price-box .price span {font-weight:400; font-size:.888889em;}
.craft-view .price-box .btnBox {text-align:center;}


/* .craft-view .price-box.fixed {position:fixed; top:2em; right:3em; background:#fff; padding-left:2.5em; z-index:10;} */

.craft-view .detail-box {width:55%; float:left;}

.craft-view .detail-box .photo {position:relative; display:flex;/*  height:41.666667em;  */}
.craft-view .detail-box .photo .bigView {position:relative; width:76%; overflow:hidden;}
.craft-view .detail-box .photo .smallView {width:24%; padding-left:4%; overflow:hidden;}
.craft-view .detail-box .photo .swiper-slide {position:relative; width:100%; border:1px solid #f8f8f8; overflow:hidden;}
.craft-view .detail-box .photo .swiper-slide span {display:block; position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden; background:#f4f0ec url(../img/common/logo.svg) no-repeat center center;}
.craft-view .detail-box .photo .swiper-slide:before {content:''; display:block; position:relative; padding-top:100%;  overflow:hidden;}
.craft-view .detail-box .photo .swiper-slide img {display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:none; max-height:100%; width:100%;}

/* .craft-view .detail-box .photo .smallView .swiper-slide {height:auto !important; width:100% !important;} */
.craft-view .detail-box .photo .smallView .swiper-slide span {background-size:60% auto;}
.craft-view .detail-box .photo .control button {width:2.666667em; height:2.666667em; text-indent:-9999px; background-repeat:no-repeat; background-position:center center; background-size:100% auto; overflow:hidden;}
.craft-view .detail-box .photo .control button.prev {background-image:url(../img/common/prev.svg);}
.craft-view .detail-box .photo .control button.next {background-image:url(../img/common/next.svg);}
.craft-view .detail-box .photo .control button:hover {background-color:#a57234;}
.craft-view .detail-box .photo .control button.prev:hover {background-image:url(../img/common/prev_w.svg);}
.craft-view .detail-box .photo .control button.next:hover {background-image:url(../img/common/next_w.svg);}

.craft-view .detail-box .photo .swiper-slide-thumb-active {border:1px solid #a57234;}


.craft-view .detail-box .desc {margin-top:2.888889em; padding:2.888889em 0; border-top:1px solid #222;}
.craft-view .detail-box .desc h4 {margin-bottom:.555556em;}
.craft-view .detail-box .desc img {display:block;}

@media all and (max-width:1024px) {
	.craft-view .price-box {position:relative; top:auto;}
	.craft-view .price-box,
	.craft-view .detail-box {float:none; width:100%;} 
	.craft-view .detail-box {padding-top:2.222222em;}
	.craft-view .price-box .btnBox {position:fixed; left:0; bottom:0; right:0; background:#fff; z-index:10;}
}

.modal-box {position:fixed; top:0; right:0; left:0; bottom:0; background:rgba(0, 0, 0, .7); z-index:99;}
.modal-box .modal {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:20em; background:#fff; padding-bottom:3.333333em; padding-left:1.555556em; padding-right:1.555556em;}
.modal-box .modal > div {padding:1.111111em 0;}
.modal-box .modal .tit {position:relative; border-bottom:1px solid #222;}
.modal-box .modal .tit h5 {margin-bottom:0;}
.modal-box .modal a.close {position:absolute; bottom:0; left:0; right:0; display:block; margin:0;}




/* ******************************************
	// 문화캘린더
****************************************** */
/* 캘린더 */
.event .multiBox {display:flex; align-items:center;}
.event .multiBox * + * {margin-left:0;}
.event .multiBox .year {position:relative; margin:0; padding:0 3.333333em; width:12.222222em;}
.event .multiBox .year .slider {height:auto;} 
.event .multiBox .year .swiper-slide {font-size:1.777778em; font-weight:700; height:auto; text-align:center;}
.event .multiBox .year .control {position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); width:100%; margin:0;}
.event .multiBox .year .control button {position:absolute; }
.event .multiBox .year .control .prev {left:0;}
.event .multiBox .year .control .next {right:0;}
.event .multiBox .month {margin-left:1.111111em; margin-right:7.222222em;}
.event .multiBox .month ul {display:flex; flex-wrap:nowrap;}
.event .multiBox .month li button {width:2.333333em; height:2.333333em; font-size:1.333333em; font-weight:700; text-align:center; border-radius:3.333333em;}
.event .multiBox .month button.on {background:#a57243; color:#fff;}

.event .tabs {position:absolute; top:0; right:0;}
.event .tabs ul {display:flex; justify-content:right;}
.event .tabs li + li {margin-left:.222222em;}
.event .tabs li button {width:2.666667em; height:2.666667em; border:1px solid #222; background-color:#fff; background-repeat:no-repeat; background-position:center center; background-size:100% auto; text-indent:-9999px; overflow:hidden;}
.event .tabs li button.on {border-color:#a57234; background-color:#a57234;}
.event .tabs li button[data-tab="캘린더"] {background-image:url(../img/program/view_thumb.svg);}
.event .tabs li button[data-tab="리스트"] {background-image:url(../img/program/view_list.svg);}
.event .tabs li button.on[data-tab="캘린더"] {background-image:url(../img/program/view_thumb_w.svg);}
.event .tabs li button.on[data-tab="리스트"] {background-image:url(../img/program/view_list_w.svg);}

@media all and (max-width:1024px) {
	.event .multiBox .month {overflow-x:scroll;}
}

@media all and (max-width:768px) {
	.event .tabs {position:relative; top:auto; right:auto; padding:0; padding-bottom:1.666667em;}
	.event .multiBox .month {margin-right:0;}
}

@media all and (max-width:640px) {
	.event .multiBox {display:block;}
	.event .multiBox .year {margin:0 auto 1.111111em;}
	.event .multiBox .month {margin-left:0;}
}


.event .festival {background:#FF6A00;}
.event .recruit {background:#1CA988;}
.event .exhibition {background:#6a48d0;}
.event .etc {background:#6c6c6c;}

.calendar-view {position:relative; width:60%; float:left;}
.calendar-view .tag ul {display:flex; padding-bottom:.555556em;}
.calendar-view .tag li + li {margin-left:1.111111em;}
.calendar-view .tag li {position:relative; padding-left:1.333334em;  background:transparent;}
.calendar-view .tag li:before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); width:.888889em; height:.888889em; }
.calendar-view .tag .fL li:before {border-radius:1.111111em;}
.calendar-view .tag .festival:before {background:#FF6A00;}
.calendar-view .tag .recruit:before {background:#1CA988;}
.calendar-view .tag .exhibition:before {background:#6a48d0;}
.calendar-view .tag .etc:before {background:#6c6c6c;}
.calendar-view .tag .today:before {background:url(../img/common/ico_cal_today.svg) no-repeat center center; background-size:100% auto;}
.calendar-view .tag .select:before {background:url(../img/common/ico_cal_select.svg) no-repeat center center; background-size:100% auto;}

.calendar-view table {color:#222;}
.calendar-view table th {position:relative; border-top:1px solid #222; border-bottom:1px solid #222; padding:.666667em; font-weight:700;}
.calendar-view table td {position:relative; height:6.666667em; padding:.666667em; border-bottom:1px solid #ccc; cursor:pointer;}
.calendar-view table th:first-child,
.calendar-view table td:first-child em,
.calendar-view table td.holiday em {color:#CD2449;}
.calendar-view table th:last-child,
.calendar-view table td:last-child em{color:#2863E0;}
.calendar-view table td em {font-size:.888889em;}
.calendar-view table td.holiday p {position:absolute; left:.555556em; top:.888889em; font-size:.888889em; padding-left:1.333333em; color:#cd2449;}
.calendar-view td ul {padding:.555556em 0; display:flex;}
.calendar-view td li {position:relative; width:.666667em; height:.666667em; border-radius:.333333em; text-indent:-9999px; overflow:hidden;}
.calendar-view td li + li {margin-left:.444444em;}

.calendar-view td.today:before {content:''; position:absolute; top:-1px; left:0; right:0; bottom:-1px; border:2px solid #a57234;}
.calendar-view td.today:after {content:''; position:absolute; top:0; right:0; width:1.111111em; height:1.111111em; background:url(../img/common/ico_cal_today.svg) no-repeat center center; background-size:100% auto;}
.calendar-view td.select:before {content:''; position:absolute; top:-1px; left:0; right:0; bottom:-1px; border:2px solid #222;}
.calendar-view td.select:after {content:''; position:absolute; top:0; right:0; width:1.111111em; height:1.111111em; background:url(../img/common/ico_cal_select.svg) no-repeat center center; background-size:100% auto;}

.calendar-list {position:relative; width:35%; float:right;}
.calendar-list h4 {padding:.666667em 0; padding-left:2.222222em; background:url(../img/common/ico_calendar.svg) no-repeat left center; background-size:1.777778em auto; border-bottom:1px solid #222;}
.calendar-list ul {margin-top:0;}
.calendar-list li{position:relative; display:table; width:100%; padding:1.111111em 0; border-bottom:1px solid #ccc;}
.calendar-list div {position:relative; display:table-cell; vertical-align:middle; width:4.444444em; height:4.444444em; font-size:.888889em; border-radius:2.222222em; background:#6c6c6c; text-align:center; color:#fff; line-height:1.2;}
.calendar-list a {position:relative; display:table-cell; vertical-align:middle; width:calc(100% - 4em); padding-left:1.111111em;}
.calendar-list p {font-size:1.111112em; font-weight:700; margin-bottom:.111111em;}
.calendar-list span {font-size:.888889em; color:#777;}


@media all and (max-width:1024px) {
	.calendar-view {width:100%; float:none;}
	.calendar-list {width:100%; float:none; margin-top:2.222222em;}
}

@media all and (max-width:640px) {
	.calendar-view .tag ul {text-align:center; justify-content:center; float:none !important;}
	.calendar-view table td em {display:block;}
	.calendar-view table td.holiday p {display:none;}
	.calendar-view td ul {display:block;}
	.calendar-view td ul:after {content:''; clear:both; display:block;}
	.calendar-view td ul li {display:block; float:left;  margin:.222222em; }
	.calendar-view td ul li + li {margin-left:.222222em;}
	
}
/* 리스트 */

.event [data-content="리스트"] li > a {display:table; width:100%; text-decoration:none; padding:1.666667em 0; border-bottom:1px solid #ccc;}
.event [data-content="리스트"] .thumb {display:table-cell; width:17.77778em; vertical-align:top; border:1px solid #ddd;}
.event [data-content="리스트"] .thumb:before {padding-top:142%;}
.event [data-content="리스트"] .info {display:table-cell; width:calc(100% - 17.77778em); padding-left:1.66667em; vertical-align:top;}
.event [data-content="리스트"] .tit {position:relative; padding:1.222223em 0; padding-left:4.444444em; margin-bottom:1.666667em; border-bottom:1px solid #222;}
.event [data-content="리스트"] .tit div {position:absolute; left:0; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); display:block; width:3.11111em; height:3.11111em; border-radius:2.222222em; color:#fff; line-height:3.11111em; text-align:center;}
.event [data-content="리스트"] .tit div i {display:inline-block; font-size:.888889em; vertical-align:middle; line-height:1.2;}
.event [data-content="리스트"] dl {display:table; width:100%;}
.event [data-content="리스트"] dt {position:relative; display:table-cell; width:3.333333em; vertical-align:top; padding:.222222em .666667em; padding-right:0; font-weight:700; }
.event [data-content="리스트"] dt:before {content:''; position:absolute; left:0; top:.777778em; width:4px; height:4px; background:#a57243;}
.event [data-content="리스트"] dd {display:table-cell; width:calc(100% - 10em); padding:0.222222em 1.111111em; vertical-align:top;}
.event [data-content="리스트"] dl.desc,
.event [data-content="리스트"] dl.desc dt {display:block; width:100%;}
.event [data-content="리스트"] dl.desc dd {display:block; width:100%; padding:0; text-align:center;}
.event [data-content="리스트"] dl.desc .txt-box {display:block; width:100%; background:#f8f8f8; height:14em; text-align:left; padding:1.111111em; margin-bottom:0.666667em; overflow: auto;}

.event .calendar-list li.no-data,
.event [data-content="리스트"] li.no-data {text-align:center; padding:3em 2em;}
.event .calendar-list .no-data span,
.event [data-content="리스트"] li.no-data span {display:inline-block; padding-top:5em; background:url(../img/common/no_data.svg) no-repeat top center; background-size:4em auto;}

@media all and (max-width:768px) {
	.event [data-content="리스트"] li > a,
	.event [data-content="리스트"] .thumb {display:block; width:100%;}
	.event [data-content="리스트"] .info {display:block; width:100%; padding-left:0;}
}


.modal.event {width:55.55556em;}
.modal.event .tit {padding:1.222223em 0; padding-left:4.444444em;}
.modal.event .tit div {position:absolute; left:0; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); display:block; width:3.111111em; height:3.111111em; border-radius:2.222222em; color:#fff; line-height:3.11111em; text-align:center;}
.modal.event .tit div i {display:inline-block; font-size:.888889em; vertical-align:middle; line-height:1.2;}
.modal.event .txt {display:table; width:100%;}
.modal.event .thumb {display:table-cell; width:20em; vertical-align:top; border:1px solid #ddd;}
.modal.event .thumb:before {padding-top:142%;}
.modal.event .info {display:table-cell; width:calc(100% - 22em); padding-left:1.666667em; vertical-align:top;}
.modal.event dl {display:table; width:100%;}
.modal.event dt {position:relative; display:table-cell; width:3.333333em; vertical-align:top; padding:.222222em .666667em; padding-right:0; font-weight:700; }
.modal.event dt:before {content:''; position:absolute; left:0; top:.777778em; width:4px; height:4px; background:#a57243;}
.modal.event dd {display:table-cell; width:calc(100% - 10em); padding:0.222222em 1.111111em; vertical-align:top;}
.modal.event dl.desc,
.modal.event dl.desc dt {display:block; width:100%;}
.modal.event dl.desc dd {display:block; width:100%; padding:0;}
.modal.event dl.desc .txt-box {display:block; width:100%; background:#f8f8f8; height:20em; text-align:left; padding:1.111111em 1.111111em; padding-right:0; margin-bottom:0.666667em; overflow:auto;}
.modal.event dl.desc .txt-box div {height:100%; line-height:1.5; padding-right:1.111111em; padding-bottom:1.111111em; overflow:auto;} 


@media all and (max-width:1024px) {
	.modal.event {width:96%; }
	
}

@media all and (max-width:768px) {
	.modal.event .box {height:70vh; overflow:auto; margin:1em 0; padding:0;}
	.modal.event .txt {display:block;}
	.modal.event .thumb {display:block; margin:0 auto 1.333333em;}
	.modal.event .info {display:block; width:100%; padding-left:0;}
	.modal.event dl.desc .txt-box {padding-right:1.111111em; height:auto;}
	.modal.event dd a.link {word-break:keep-all;}
}

@media all and (max-width:380px) {

	.modal.event .thumb {width:100%;}

}

/* ******************************************
	// 추진현황
****************************************** */
[class*="state-"] {border-top:1px solid #222;}
[class*="state-"] .pic {display:table-cell; width:13.333333em; vertical-align:top;}
[class*="state-"] .thumb {border:1px solid #ddd;}
[class*="state-"] .thumb:before {padding-top:142%;}
[class*="state-"] .info {display:table-cell; width:calc(100% - 17.777778em); padding:0 1.66667em; vertical-align:top;}
[class*="state-"] .tit {position:relative; padding:.888889em 0; margin-bottom:.888889em; border-bottom:1px solid #ccc;}
[class*="state-"] dl {display:table; width:100%;}
[class*="state-"] dt {position:relative; display:table-cell; width:3.333333em; vertical-align:top; padding:.222222em .666667em; padding-right:0; font-weight:700; }
[class*="state-"] dt:before {content:''; position:absolute; left:0; top:.777778em; width:4px; height:4px; background:#a57243;}
[class*="state-"] dd {display:table-cell; width:calc(100% - 10em); padding:0.222222em 1.111111em; vertical-align:top;}

.state-list {position:relative;}
.state-list li {width:48%; margin:1%; float:left;}
.state-list li a {position:relative; display:table; width:100%; text-decoration:none; padding:1.666667em 0;}
.state-list li a:hover,
.state-list li a:focus {text-decoration:none;}
.state-list li a:after {content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:#a57234; transition:ease .5s;}
.state-list li a:hover:after,
.state-list li a:focus:after {width:100%; transition:ease .5s;} 

.state-view {display:table; width:100%;  border-bottom:1px solid #222; padding:1.666667em 0;}
.state-view .pic {width:22.222222em;}
.state-view .info {width:calc(100% - 22.222222em); padding-left:2.222222em;}
.state-view dl.desc,
.state-view dl.desc dt {display:block; width:100%;}
.state-view dl.desc dd {display:block; width:100%; padding:0; text-align:center;}
.state-view dl.desc .txt-box {display:block; width:100%; background:#f8f8f8; min-height:14em; text-align:left; padding:1.111111em; margin-bottom:0.666667em; line-height:1.5;}

@media all and (max-width:1024px) {
	.state-list li {width:98%; margin:1%; float:none;}
}

@media all and (max-width:768px) {
	.state-view li > a,
	.state-view .thumb {display:block; width:100%;}
	.state-view .info {display:block; width:100%; padding-left:0;}
}



/* ******************************************
	// 문화자원 아카이브
****************************************** */

/* 리스트 페이지 */
[class*="archive-"] .name {font-size:1.333333em; font-weight:700;}
[class*="archive-"] .desc {font-size:.888889em; color:#777; margin:.222222em 0 .888889em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
[class*="archive-"] .field {font-weight:700; color:#a57234;}

.archive-list .page-num {right:6.666667em;}

.archive-list .tabs {position:absolute; top:0; right:0;}
.archive-list .tabs ul {display:flex; justify-content:right;}
.archive-list .tabs li + li {margin-left:.222222em;}
.archive-list .tabs li button {width:2.666667em; height:2.666667em; border:1px solid #222; background-color:#fff; background-repeat:no-repeat; background-position:center center; background-size:100% auto; text-indent:-9999px; overflow:hidden;}
.archive-list .tabs li button.on {border-color:#a57234; background-color:#a57234;}
.archive-list .tabs li button[data-tab="액자"] {background-image:url(../img/program/view_thumb.svg);}
.archive-list .tabs li button[data-tab="리스트"] {background-image:url(../img/program/view_list.svg);}
.archive-list .tabs li button.on[data-tab="액자"] {background-image:url(../img/program/view_thumb_w.svg);}
.archive-list .tabs li button.on[data-tab="리스트"] {background-image:url(../img/program/view_list_w.svg);}

.archive-list .tab-box .selectBox {display:none; }
.archive-list .tab-box .selectBox select {width:100%; border:none; font-size:1.333333em; font-weight:700;}
.archive-list .tab-box ul {flex-wrap:wrap;}
.archive-list .tab-box li {word-break:keep-all;}

.archive-list .tab-con {text-align:center;}
.archive-list .tab-con ul {margin-bottom:1.111111em;}
.archive-list .tab-con li {float:left; width:25%; padding:.888889em; text-align:left;}
.archive-list .tab-con li a {position:relative; display:block; }
.archive-list .tab-con li a:hover,
.archive-list .tab-con li a:focus {text-decoration:none;}
.archive-list .tab-con li a:after {content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:#a57234; transition:ease .5s;}
.archive-list .tab-con li a:hover:after,
.archive-list .tab-con li a:focus:after {width:100%; transition:ease .5s;} 

.archive-list .tab-con .txt {position:relative; padding:1.333333em 0;}
.archive-list .tab-con .txt span {display:block;}


.archive-list .tab-con[data-content="리스트"] li a {display:table; width:100%; padding:.888889em 0; table-layout:fixed;}
.archive-list .tab-con[data-content="리스트"] .thumb {display:table-cell; width:6.666667em; vertical-align:middle;}
.archive-list .tab-con[data-content="리스트"] .thumb span {background-size:80% auto;}
.archive-list .tab-con[data-content="리스트"] .thumb:before {padding-top:100%;}
.archive-list .tab-con[data-content="리스트"] .txt {display:table-cell; width:100%; vertical-align:middle; padding:.666667em 0 .666667em 2.222222em;}

@media all and (max-width:1200px) {
	.archive-list .tab-con li {width:33.333333%; padding:.666667em;}	
	.archive-list .tab-box li {width:calc(100% / 8); padding:.25em .75em .25em 1.333333em; }
	.archive-list .tab-box li:after {content:''; position:absolute; left:.5em; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:8px; background:#bbb;}
	
	.archive-list.place .tab-box li {width:calc(100% / 5);} 
}

@media all and (max-width:820px) {
	.archive-list .tab-box li {width:calc(100% / 5); }
	.archive-list.place .tab-box li {width:calc(100% / 4);} 
	.archive-list.place .tab-box li:nth-child(9) {width:50%;}
	.archive-list .tab-box li a {font-size:1.111111em;}
}

@media all and (max-width:768px) {
	.archive-list .tabs {position:relative; top:auto; right:auto; padding:0; padding-bottom:1.666667em;}
	.archive-list .page-num {right:auto;}
	.archive-list .tab-box {overflow:hidden; padding:0;}
	.archive-list .tab-box .selectBox {display:block;}
	.archive-list .tab-box ul {display:none;}
	
	.archive-list .tab-con li {padding:.444444em;}
	.archive-list .tab-con .thumb {background-size:80%;}
	
	.archive-list.place .tab-con li,
	.archive-list.item .tab-con li,
	.archive-list .tab-con[data-content="리스트"] li {width:50%;}
	.archive-list .tab-con[data-content="리스트"] .txt {padding-left:1.333333em;}
	
}

@media all and (max-width:640px) {
	.archive-list .tab-con[data-content="리스트"] li {width:100%;}
}

/* 상세 페이지 */

.archive-view {position:relative; border-bottom:1px solid #222;}
.archive-view .intro > div {padding:1.777778em 0;}
.archive-view .intro {position:relative; display:table; width:100%; padding-top:0; border-bottom:1px solid #222; table-layout:fixed;}
.archive-view .intro .pic {display:table-cell; vertical-align:top; width:26.666667em;}
.archive-view .intro .thumb span img {display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:none; max-height:100%;}
.archive-view .intro .info {display:table-cell; vertical-align:top; width:calc(100% - 26.666667em); padding-left:3.555556em;}
.archive-view .intro .tit {display:block; padding:.666667em 0; border-bottom:1px solid #ccc; font-size:1.555556em;}
.archive-view .intro .tit span {display:inline-block; margin:0;}
.archive-view .intro .tit span + span {margin-left:.5em;}
.archive-view .intro .tit .nameE,
.archive-view .intro .tit .field {font-size:.8em;}
.archive-view .intro .list-ul{padding:1.333333em 0; border-bottom:1px solid #ccc;}
.archive-view .intro .list-ul strong {display:inline-block; width:4em;}
.archive-view .intro .txt {padding:1.333333em 0; line-height:1.6;}
.archive-view .intro .txt > strong {display:block; font-size:1.111111em; font-weight:700; margin-bottom:.25em;}
.archive-view .intro .tags {padding:.666667em 0;}
.archive-view .intro .tags span {display:inline-block; color:#777; background:#f8f8f8; padding:.1em .5em;}
.archive-view .intro .tags span + span {margin-left:.5em;}


.archive-view dl {display:flex; width:100%; align-items:start;}
.archive-view dt {width:13.333333em; padding:1.777778em 0;}
.archive-view dd {width:calc(100% - 13.333333em);  padding:1.777778em 0; line-height:1.5;}

.archive-view .relatedImg .swiper-slide {width:auto !important; height:25em; margin-right:2em;}
.archive-view .relatedImg .swiper-slide img {height:100%;}


@media all and (max-width:1200px) {

	.archive-view .intro {display:block;}
	.archive-view .intro .pic {display:block; margin:0 auto;}
	.archive-view .intro .info {display:block; width:100%; padding-left:0; padding-top:1.777778em;}
	.archive-view dl {display:block;}
	.archive-view dt {width:100%; padding-bottom:1.111111em;}
	.archive-view dd {width:100%;}
	.archive-view dt br {display:none;}
}

@media all and (max-width:768px) {
	.archive-view.place .intro .pic,
	.archive-view.item .intro .pic {width:100%;}
}

@media all and (max-width:640px) {
	.archive-view > div {padding:1.555556em 0;}
	.archive-view .tab-box {padding:1.555556em 0;}
	
}

@media all and (max-width:480px) {
	.archive-view .intro .pic {width:100%;}
}

.archive-list.place .tab-con .thumb:before,
.archive-view.place .intro .thumb:before,
.archive-list.item .tab-con .thumb:before,
.archive-view.item .intro .thumb:before {padding-top:65%;}


[class*="archive-"] .no-data {padding:3em 2em; text-align:center !important; width:100% !important;}
[class*="archive-"] .no-data span {display:inline-block; padding-top:5em; background:url(../img/common/no_data.svg) no-repeat top center; background-size:4em auto;}





/* 문화자원 아카이빙 문화유산 페이지 */
#culture-heritage .heritage {display:flex; }
#culture-heritage .heritage > div {position:relative;}
#culture-heritage .heritage .imgBox img {display:block;}
#culture-heritage .heritage .imgBox span {display:inline-block; position:absolute; right:1em; bottom:1em; padding:.25em .5em; background:rgba(0, 0, 0, .75); color:#fff; font-size:.8em;}
#culture-heritage .heritage .bod-btn {align-items:center; justify-content:center; flex-grow:1;}
#culture-heritage .heritage .bod-btn a {display:block;}