/* A A A : A : A : A : */ #artwork_view { width : 100%; height : auto; margin : 2em 0 5em; font-size : min(1.5vw,18px); } #artwork_view .wrap { width : 90%; height : auto; display : flex; flex-wrap : wrap; align-items : flex-start; justify-content : flex-start; gap : 3em; max-width : 1200px; } #artwork_view .wrap .referer { width : 100%; line-height : 1em; color : #666; display : flex; align-items : center; justify-content : flex-start; gap : 0.1em; margin-bottom : 1em; font-size : max(14px,0.85em); transition : .2s;} #artwork_view .wrap .referer:hover { color : #333; transition : .2s;} #artwork_view .wrapTit { width : 100%; height : auto; display : flex; align-items : center; justify-content : space-between; margin-bottom : 1em; gap : 1em; font-size : 1.1em;} #artwork_view .wrapTit p { line-height : 1em; font-weight : 600; color : #333;} #artwork_view .wrapTit a { line-height : 1em;} #artwork_view .artwork_infoWrap { width : calc(67% - 1.5em); height : auto; display : flex; align-items : stretch; justify-content : space-between; flex-direction : column; gap : 3em;} #artwork_view .artwork_infoWrap .imageWrap { width : 100%; flex-grow : 1; display : flex; flex-direction : column; align-items : flex-start; justify-content : flex-start; gap : 1em; } #artwork_view .artwork_infoWrap .imageWrap .swiper { width : 100%; height : 100%;} #artwork_view .artwork_infoWrap .imageWrap .mySwiper2 { max-height : 30em; aspect-ratio : 1 / 1;} #artwork_view .artwork_infoWrap .imageWrap .mySwiper2 .swiper-slide { aspect-ratio : 1 / 1; background : #fafafa;} #artwork_view .artwork_infoWrap .imageWrap .mySwiper2 .swiper-slide a { width : 100%; height : 100%; display : flex; align-items : center; justify-content : center; cursor: zoom-in; } #artwork_view .artwork_infoWrap .imageWrap .mySwiper2 .swiper-slide img { width : 90%; height : 90%; object-fit : contain;} #artwork_view .artwork_infoWrap .imageWrap .mySwiper2 .swiper-button-next, #artwork_view .artwork_infoWrap .imageWrap .mySwiper2 .swiper-button-prev { width : 2em; height : 2em; display : flex; align-items : center; justify-content : center; opacity : 0; transition : .2s; color : #555;} #artwork_view .artwork_infoWrap .imageWrap .mySwiper2:hover .swiper-button-next, #artwork_view .artwork_infoWrap .imageWrap .mySwiper2:hover .swiper-button-prev { opacity : 1; transition : .2s;} #artwork_view .artwork_infoWrap .imageWrap .mySwiper2:hover .swiper-button-disabled { opacity : 0.5;} #artwork_view .artwork_infoWrap .imageWrap .mySwiper2 .swiper-button-next:after, #artwork_view .artwork_infoWrap .imageWrap .mySwiper2 .swiper-button-prev:after { display : none;} #artwork_view .artwork_infoWrap .imageWrap .mySwiper { width : 100%; height : 5em; max-width : 400px;} #artwork_view .artwork_infoWrap .imageWrap .mySwiper .swiper-slide { aspect-ratio : 1 / 1; background : #fafafa; display : flex; align-items : center; justify-content : center; } #artwork_view .artwork_infoWrap .imageWrap .mySwiper .swiper-slide.swiper-slide-thumb-active { box-shadow : inset 0px 0px 0px 3px #333;} #artwork_view .artwork_infoWrap .imageWrap .mySwiper .swiper-slide img { width : 90%; height : 90%; object-fit : contain;} #artwork_view .infoWrap { width : calc(33% - 1.5em); height : auto; display : flex; align-items : flex-start; justify-content : flex-start; position : sticky; top : 110px;} #artwork_view .infoWrap .infoInnerWrap { width : 100%; display : flex; flex-direction : column; align-items : center; justify-content : center; } #artwork_view .infoWrap .infoInnerWrap .infoList { width : 100%; height : auto; display : flex; align-items : center; justify-content : flex-start; gap : 1em; padding : 1em 0; border-bottom : 1px solid #eee;} #artwork_view .infoWrap .infoInnerWrap .infoList .infoTit { width : 5em; height : auto; color : #888; font-weight : 500; line-height : 1em; } #artwork_view .infoWrap .infoInnerWrap .infoList .infoVal { width : calc(100% - 6em); height : auto; color : #333; line-height : 1em;} #artwork_view .infoWrap .infoInnerWrap .inquiryBtn { width : 100%; line-height : 1em; padding : 1em 0; border-radius : 7px; color : #4eb54e; font-weight : 500; transition : .2s; cursor : pointer; border : 2px solid #4eb54e; margin-top : 1.5em; text-align : center;} #artwork_view .infoWrap .infoInnerWrap .inquiryBtn:hover { background : #4eb54e; color : #fff; transition : .2s;} #artwork_view .infoWrap .infoInnerWrap .subName { line-height : 1em; } #artwork_view .infoWrap .infoInnerWrap .loc { font-size : max(14px,0.9em); line-height : 1em; color : #999; margin : 1.5em 0;} #artwork_view .infoWrap .infoInnerWrap .email { font-size : max(14px,0.9em); line-height : 1em; } #artwork_view .infoWrap .infoInnerWrap .snsWrap { width : 100%; height : auto; display : grid; gap : 0.7em; margin : 1em 0; grid-template-columns : repeat(4,calc(calc(100% - calc(0.7em * 3)) / 4)); } #artwork_view .infoWrap .infoInnerWrap .snsWrap a { width : 1.5em; height : 1.5em; display : flex; align-items : center; justify-content : center;} #artwork_view .infoWrap .infoInnerWrap .snsWrap a img { width : 100%; height : 100%; object-fit : contain; transition : .2s;} #artwork_view .infoWrap .infoInnerWrap .snsWrap a:hover img { filter : drop-shadow(0px 0px 3px #555); transition : .2s; } #artwork_view .infoWrap .infoInnerWrap .homepage { font-size : max(14px,0.9em); line-height : 1em; color : green; display : flex; align-items : center; gap : 0.3em;} #artwork_view .line { width : 90%; height : 1px; background : #ddd; max-width : 1200px; margin : 2em 0;} #artwork_view .artworkWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : flex-start; justify-content : flex-start; } #artwork_view .artworkWrap .artworkListWrap { width : 100%; height : auto; display : flex; flex-wrap : wrap; gap : 2em 1em; align-items : flex-start; justify-content : flex-start;} #artwork_view .artworkWrap .artworkListWrap .artworkBox { width : calc(calc(100% - calc(1em * 3)) / 4); height : auto; display : flex; flex-direction : column; align-items : flex-start; justify-content : flex-start; gap : 0.5em; transition : .2s;} #artwork_view .artworkWrap .artworkListWrap .artworkBox:hover { filter: drop-shadow(2px 4px 6px #ababab); transition : .2s;} #artwork_view .artworkWrap .artworkListWrap .artworkBox .imgWrap { width : 100%; height : auto; background : #f7f7f7; aspect-ratio : 1 / 1;} #artwork_view .artworkWrap .artworkListWrap .artworkBox .imgWrap img { width : 100%; height : 100%; object-fit : contain;} #artwork_view .artworkWrap .artworkListWrap .artworkBox .infoWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : flex-start; justify-content : flex-start; gap : 0.5em; } #artwork_view .artworkWrap .artworkListWrap .artworkBox .infoWrap .title { line-height : 1em; font-weight : 500; color : #333; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #artwork_view .artworkWrap .artworkListWrap .artworkBox .infoWrap .year { font-size : max(14px,0.9em); line-height : 1em; color : #999;} #artwork_view .infoWrap .introWrap { display : none;} /* 팝업 */ /* A A A : A : A : A : */ #artwork_view #popupBack { width : 100%; height : 100%; position : fixed; top : 0; left : 0; background : #00000026; z-index : 99; display : none; pointer-events : none;} #artwork_view #popupBack.on { display : block; pointer-events : auto;} #artwork_view #inquryPopup { width : auto; height : auto; display : none; align-items : center; justify-content : center; background : #fff; border-radius : 12px; border : 1px solid #ddd; position : fixed; top : 50%; left : 50%; transform : translate(-50%,-50%); z-index : 100; pointer-events : none;} #artwork_view #inquryPopup.on { display : flex; pointer-events : auto;} #artwork_view #inquryPopup.email { max-width : 1000px;} #artwork_view #inquryPopup .popuoWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; flex-direction : column; gap : 1em; padding : 2em 1em; } #artwork_view #inquryPopup .popuoWrap .innerWrap { width : 100%; height : auto; display : flex; align-items : flex-start; justify-content : center; flex-direction : column; gap : 1em;} #artwork_view #inquryPopup .popuoWrap .list { width : 100%; height : auto; display : flex; align-items : center; justify-content : space-between; gap : 1em; border : 1px solid #ddd; padding : 1em; border-radius : 13px;} #artwork_view #inquryPopup .popuoWrap .list .val { line-height : 1em; color : #555;} #artwork_view #inquryPopup .popuoWrap .list .val span { line-height : inherit; font-weight : 500; color : #333;} #artwork_view #inquryPopup .popuoWrap .list .icon { width : 2em; height : 2em; color : #4eb54e; cursor : pointer; transition : .2s; border-radius : 50%; border : 1px solid #4eb54e; display : flex; align-items : center; justify-content : center;} #artwork_view #inquryPopup .popuoWrap .list .icon:hover { background : #4eb54e; color : #fff; transition : .2s;} #artwork_view #inquryPopup .popuoWrap .close { line-height : 1em; padding : 0.5em 1em; border-radius : 7px; color : #fff; background : #777; cursor : pointer; transition : .2s;} #artwork_view #inquryPopup .popuoWrap .close:hover { background : #555; transition : .2s;} #artwork_view #inquryPopup .emailWrap { width : 100%; height : auto; display : flex; flex-direction : column; gap : 1em; align-items : flex-start; justify-content : flex-start; padding : 2em;} #artwork_view #inquryPopup .emailWrap .inputWrap { width : 100%; height : auto; display : flex; flex-direction : column; gap : 0.5em; align-items : flex-start; justify-content : flex-start;} #artwork_view #inquryPopup .emailWrap .inputWrap .inputTit { line-height : 1em; font-weight : 500; color : #333;} #artwork_view #inquryPopup .emailWrap .inputWrap input { width : 100%; height : 2.5em; border : 1px solid #ddd; border-radius : 7px; padding : 0 0.5em; background : #f7f7f7; color : #555;} #artwork_view #inquryPopup .emailWrap .inputWrap input:focus { background : #fff; border : 1px solid #4eb54e;} #artwork_view #inquryPopup .emailWrap .inputWrap textarea { width : 100%; height : auto; min-height : 10em; border : 1px solid #ddd; border-radius : 7px; outline : none; font-family : inherit; padding : 0.5em; background : #f7f7f7; color : #555;} #artwork_view #inquryPopup .emailWrap .inputWrap textarea:focus { background : #fff; border : 1px solid #4eb54e;} #artwork_view #inquryPopup .emailWrap .submitWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; gap : 1em; margin : 1em 0 0;} #artwork_view #inquryPopup .emailWrap .submitWrap p { line-height : 1em; padding : 0.5em 1em; border-radius : 7px; color : #fff; cursor : pointer; transition : .2s;} #artwork_view #inquryPopup .emailWrap .submitWrap p#emailSend { background : #4eb54e;} #artwork_view #inquryPopup .emailWrap .submitWrap p#emailSend:hover { background : #068d06; transition : .2s;} #artwork_view #inquryPopup .emailWrap .submitWrap p.close { background : #777;} #artwork_view #inquryPopup .emailWrap .submitWrap p.close:hover { background : #555; transition : .2s;} @media (max-width : 1024px){ /* A A A : A : A : A : */ #artwork_view { font-size : min(2.2vw,16px); margin : 2.5em 0;} #artwork_view .wrap { flex-direction : column; max-width : 800px;} #artwork_view .artwork_infoWrap, #artwork_view .infoWrap { width : 100%;} #artwork_view .artwork_infoWrap .introWrap { display : none;} #artwork_view .infoWrap .introWrap { width : 100%; padding : 1.5em 0; display : block;} } @media (max-width : 820px){ /* A A A : A : A : A : */ #artwork_view .wrap { gap : 2em;} #artwork_view .wrapTit { margin-bottom : 1em; font-size : 1.2em;} #artwork_view .artwork_infoWrap { flex-direction : column-reverse; gap : 2em;} #artwork_view .infoWrap .infoInnerWrap { width : 100%;} #artwork_view .infoWrap .infoInnerWrap .snsWrap { width : auto;} #artwork_view .artworkWrap .artworkListWrap .artworkBox { width : calc(calc(100% - calc(1em * 2)) / 3); } } @media (max-width : 640px){ /* A A A : A : A : A : */ #artwork_view { margin : 1.5em 0 4em;} #artwork_view { font-size : max(14px, 3.3vw);} #artwork_view .wrap .referer { margin-bottom : 0;} #artwork_view .artwork_infoWrap .imageWrap .mySwiper2 .swiper-button-next, #artwork_view .artwork_infoWrap .imageWrap .mySwiper2 .swiper-button-prev { display : none;} #artwork_view .artworkWrap .artworkListWrap .artworkBox { width : calc(calc(100% - calc(1em)) / 2); } }