/* A A A : A : A : A : */ #exhibition_view .articleWrap { flex-direction : column; gap : 4em;} #exhibition_view .innerWrap { max-width : 1200px; width : 90%; } #exhibition_view .viewWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; gap : 2em; flex-direction : column;} #exhibition_view .viewWrap .titleImgWrap { width : 80%; height : auto; aspect-ratio : 1 / 1; max-width : 800px;} #exhibition_view .viewWrap .titleImgWrap img { width : 100%; height : 100%; object-fit : cover;} #exhibition_view .viewWrap .infoWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; flex-direction : column; gap : 0.3em;} #exhibition_view .viewWrap .infoWrap .subject { font-weight : 600; width : 100%; text-align : left; padding-left : 0.5em; color : #333;} #exhibition_view .viewWrap .infoWrap .infoListWrap { width : 100%; height : auto; display : flex; flex-wrap : wrap; gap : 1em 1.5em; padding : 1.5em; border-top : 1px solid #ddd; border-bottom : 1px solid #ddd;} #exhibition_view .viewWrap .infoWrap .infoListWrap .infoList { width : calc(calc(100% - 1.5em) / 2); height : auto; display : flex; align-items : baseline; justify-content : flex-start;} #exhibition_view .viewWrap .infoWrap .infoListWrap .infoList.link { width : 100%; flex-direction : column; gap : 0.5em;} #exhibition_view .viewWrap .infoWrap .infoListWrap .infoList .name { width : 4em; line-height : 1em; font-weight : 500; color : #333;} #exhibition_view .viewWrap .infoWrap .infoListWrap .infoList .val { width : calc(100% - 4em); font-weight : 300; color : #333;} #exhibition_view .viewWrap .infoWrap .infoListWrap .infoList.link .name { width : 100%; margin-bottom : 0.1em;} #exhibition_view .viewWrap .infoWrap .infoListWrap .infoList.link .val { width : 100%; padding-left : 0.5em; line-height : 1em; display : flex; align-items : baseline; justify-content : flex-start; flex-wrap : wrap; gap : 0.3em;} #exhibition_view .viewWrap .infoWrap .infoListWrap .infoList.link .val .linkName { font-weight : 500; line-height : inherit; min-width : 3em;} #exhibition_view .viewWrap .infoWrap .infoListWrap .infoList.link .val .linkUrl { font-weight : 400; color : #3379ff; line-height : inherit; transition : .2s;} #exhibition_view .viewWrap .infoWrap .infoListWrap .infoList.link .val .linkUrl:hover { color : #0006fb; transition : .2s;} #exhibition_view .viewWrap .cateWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : flex-start; background : #f8f8f8; border : 1px solid #ddd; border-bottom : 2px solid #3e3a39; } #exhibition_view .viewWrap .cateWrap .cate { line-height : 1em; padding : 1em 0; width : 10em; max-width : 50%; text-align : center; font-size : max(12px,0.85em);} #exhibition_view .viewWrap .cateWrap .cate.on { color : #fff; background : #3e3a39;} #exhibition_view .viewWrap .contentWrap { padding : 1em 0; width : 100%; overflow : auto;} #exhibition_view .viewWrap .contentWrap img { max-width : 100%;} #exhibition_view .slideWrap { width : 100%; height : auto;} #exhibition_view .slideWrap .swiper { width : 90%; max-width : 500px;} #exhibition_view .slideWrap .swiper img { width : 100%; height : auto;} #exhibition_view .slideWrap .swiper .swiper-button-next::after, #exhibition_view .slideWrap .swiper .swiper-button-prev::after { content : unset;} #exhibition_view .slideWrap .swiper .swiper-button-next, #exhibition_view .slideWrap .swiper .swiper-button-prev { width : 2em; height : 2em; display : flex; align-items : center; justify-content : center; background : #000; opacity : 0; color : #fff; transition : .2s;} #exhibition_view .slideWrap .swiper .swiper-button-next svg, #exhibition_view .slideWrap .swiper .swiper-button-prev svg { font-size : 1.4em;} #exhibition_view .slideWrap .swiper:hover .swiper-button-next, #exhibition_view .slideWrap .swiper:hover .swiper-button-prev { opacity : .5; transition : .2s;} #exhibition_view .slideWrap .swiper .swiper-button-next:hover, #exhibition_view .slideWrap .swiper .swiper-button-prev:hover { opacity : 1; transition : .2s;} #exhibition_view .pageWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; padding : 4em 0 5em; background : #f7f7f7;} #exhibition_view .pageWrap .wrap { width : 90%; height : auto; display : flex; align-items : center; max-width : 1200px;} /* 페이지 버튼 PC 버전 */ #exhibition_view .pageWrap.pc .pageBtnWrap { width : calc(calc(90% - 5em) / 2); flex-grow : 1; display : flex; align-items : center;} #exhibition_view .pageWrap.pc .pageBtnWrap .linkBtn { width : 100%; height : auto; display : flex; align-items : center; justify-content : space-between;} #exhibition_view .pageWrap.pc .pageBtnWrap .linkBtn.no { cursor : default;} #exhibition_view .pageWrap.pc .pageBtnWrap .linkBtn .btnCircle { width : 5em; height : 5em; border : 1px solid #ccc; border-radius : 50%; display : flex; align-items : center; justify-content : center; flex-direction : column; transition : .2s;} #exhibition_view .pageWrap.pc .pageBtnWrap .linkBtn:hover .btnCircle, #exhibition_view .pageWrap.pc .listBtn:hover { background : #999; border : 1px solid #999; color : #fff; transition : .2s;} #exhibition_view .pageWrap.pc .pageBtnWrap .linkBtn .linkText { width : calc(95% - 5em); color : #999; word-break : keep-all; text-overflow : ellipsis; overflow : hidden; word-break : break-word; display : -webkit-box; -webkit-line-clamp : 2; -webkit-box-orient: vertical; transition : .2s;} #exhibition_view .pageWrap.pc .pageBtnWrap .linkBtn.nextBtn .linkText { text-align : right;} #exhibition_view .pageWrap.pc .pageBtnWrap .linkBtn:hover .linkText { color : #555555; transition : .2s;} #exhibition_view .pageWrap.pc .listBtn { width : 5em; height : 5em; margin : 0 5%; display : flex; align-items : center; justify-content : center; border : 1px solid #cccccc; flex-direction : column; transition : .2s;} #exhibition_view .pageWrap.pc .pageBtnWrap .linkBtn .btnCircle svg, #exhibition_view .pageWrap.pc .listBtn svg { font-size : 1.6em; color : #555; transition : .2s;} #exhibition_view .pageWrap.pc .pageBtnWrap .linkBtn:hover .btnCircle svg, #exhibition_view .pageWrap.pc .listBtn:hover svg { color : #fff; transition : .2s;} #exhibition_view .pageWrap.pc .pageBtnWrap .linkBtn .btnCircle svg { font-size : 1em;} #exhibition_view .pageWrap.pc .pageBtnWrap .linkBtn .btnCircle p, #exhibition_view .pageWrap.pc .listBtn p { font-size : 0.9em; line-height : 1em; margin-top : 0.2em; } #exhibition_view .pageWrap.pc .listBtn:hover p { color : #fff; transition : .2s;} /* 페이지 버튼 모바일 버전 */ #exhibition_view .pageWrap.mobile { display : none;} #exhibition_view .pageWrap.mobile .listBtn { width : auto; height : auto; display : flex; align-items : center; justify-content : center; line-height : 1em; padding : 0.6em 1.2em; color : #fff; background : #999999; margin-bottom : 1.2em;} #exhibition_view .pageWrap.mobile .listBtn p { line-height : 1em; margin-left : 0.3em;} #exhibition_view .pageWrap.mobile .pageBtnWrap, #exhibition_view .pageWrap.mobile .pageBtnWrap .linkBtn { width : 100%; height : auto; display : flex; align-items : center; justify-content : space-between;} #exhibition_view .pageWrap.mobile .pageBtnWrap .linkBtn.prevBtn { margin-bottom : 0.8em;} #exhibition_view .pageWrap.mobile .pageBtnWrap .linkBtn { border : 1px solid #999;} #exhibition_view .pageWrap.mobile .pageBtnWrap .linkBtn .btnCircle { width : 5em; height : auto; display : flex; align-items : center; justify-content : center; background : #999; color : #fff; padding : 0.5em 0;} #exhibition_view .pageWrap.mobile .pageBtnWrap .linkBtn .btnCircle p { line-height : 1em; margin-left : 0.5em;} #exhibition_view .pageWrap.mobile .pageBtnWrap .linkBtn .linkText { width : calc(100% - 5.8em); text-align : left; white-space : nowrap; overflow : hidden; text-overflow : ellipsis; color : #555;} @media(max-width : 640px) { /* A A A : A : A : A : */ #exhibition_view .viewWrap .infoWrap .infoListWrap .infoList { width : 100%;} #exhibition_view .pageWrap { padding : 3em 0;} #exhibition_view .pageWrap.pc { display : none;} #exhibition_view .pageWrap.mobile { display : flex;} #exhibition_view .pageWrap .wrap { flex-direction : column;} }