/* A A A : A : A : A : */ #exhibitions_View { width : 100%; height : auto; display : flex; justify-content : center; padding-top : 120px; font-family : "SUIT"; padding-bottom : 8em; background-image : url("../../../../Image/viewWrapBack.png"); background-size : contain; background-position : center top; background-repeat : no-repeat;} #exhibitions_View .wrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; } #exhibitions_View .wrap .mainImgWrap { width : 100%; height : auto; aspect-ratio : 16 / 9; max-width : 1600px; margin-top : 90px; } #exhibitions_View .wrap .mainImgWrap img { width : 100%; height : 100%; object-fit : cover;} #exhibitions_View .wrap .mainImgWrap .iframeWrap { width : 100%; height : 100%; object-fit : cover;} #exhibitions_View .wrap .titBox { font-size : 35px; font-weight : 800; line-height : 1em; color : #000; padding : 70px 0 70px; display : flex; flex-direction : column; align-items : center; width : 95%; max-width : 1200px;} #exhibitions_View .wrap .titBox .tit { margin : 1em 0 0.7em; width : 100%; font-family : "Noto Sans Kr"; word-break : keep-all; text-align : center;} #exhibitions_View .wrap .titBox .cate { font-size : 0.5em; color : #999; font-weight : 500; letter-spacing : 0.05em; margin-bottom : 0.3em;} #exhibitions_View .wrap .titBox .line { width : 1.5em; height : 4px; background : #777777; font-size : inherit;} #exhibitions_View .wrap .titBox .date { font-size : 0.5em; color : #999; font-weight : 500; letter-spacing : 0.05em;} #exhibitions_View .wrap .viewNavWrap { width : 90%; display : flex; justify-content : center; position : sticky; top : -1px; background : #fff; height : 4em; transition : .2s; z-index : 10;} #exhibitions_View .wrap .viewNavWrap.on { width : 100%;} #exhibitions_View .wrap .navListWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : flex-start; border-bottom : 1px solid #767777; max-width : 1200px; transition : .2s; position : relative;} #exhibitions_View .wrap .navListWrap .absoluteWrap { width : auto; height : 100%; display : flex; align-items : center; position : absolute; left : 0; transition : .2s; white-space : nowrap;} #exhibitions_View .wrap .viewNavWrap p { width : auto; font-size : 16px; color : #555; display : flex; line-height : 1em; font-weight : 300; text-align : center; justify-content : center; height : 100%; align-items : center; padding : 0 2em; cursor : pointer;} #exhibitions_View .wrap .viewNavWrap p.on { color : #000; font-weight : 500; position : relative; } #exhibitions_View .wrap .viewNavWrap p.on::after { content : ""; width : 100%; height : 3px; background : #767777; position : absolute; bottom : -1.5px; left : 0; display : block; } #exhibitions_View .wrap .viewNavWrap.on .navListWrap .absoluteWrap { left : 50%; transform : translateX(-50%); transition : .2s;} #exhibitions_View .wrap .contWrap { width : 90%; height : auto; max-width : 960px; display : flex; justify-content : space-between; align-items : flex-start; } #exhibitions_View .wrap .contWrap img { max-width : 100%;} #exhibitions_View .wrap .contWrap .contBox { width : 100%; height : auto; display : flex; flex-direction : column; align-items : flex-start;} #exhibitions_View .wrap .contWrap #contTextBox { width : 100%;} #exhibitions_View .wrap .contWrap .contBox #contTextBox img { width : 100%; height : auto;} #exhibitions_View .wrap .contWrap .contBox .contBotWrap { width : 100%; height : auto; font-size : 16px; margin-top : 3em; display : flex; justify-content : space-between; align-items : flex-end;} #exhibitions_View .wrap .contWrap .contBox .shareWrap { display : flex; font-size : 16px; color : #777; flex-direction : column;} #exhibitions_View .wrap .contWrap .contBox .shareWrap p { line-height : 1em; font-weight : 500; margin-bottom : 0.9em;} #exhibitions_View .wrap .contWrap .contBox .shareWrap .linkWrap { display : flex; align-items : center;} #exhibitions_View .wrap .contWrap .contBox .shareWrap .linkWrap a { display : flex; align-items : center;} #exhibitions_View .wrap .contWrap .contBox .shareWrap .linkWrap a:nth-child(2) { margin : 0 1em;} #exhibitions_View .wrap .contWrap .contBox .shareWrap img { font-size : inherit; height : 1.8em;} #exhibitions_View .wrap .contWrap .contBox .listBtn { font-size : 15px; font-family : "Noto Sans Kr"; font-weight : 600; color : #fff; line-height : 1em; background : #888889; border-radius : 17px; padding : 0.8em 1.6em; transition : .2s;} #exhibitions_View .wrap .contWrap .contBox .listBtn:hover { background : #333; transition : .2s;} #exhibitions_View .wrap .contWrap .artistBox { width : 30%; display : flex; flex-direction : column; align-items : center;} #exhibitions_View .wrap .contWrap .artistBox .imgWrap { width : 100%; height : auto;} #exhibitions_View .wrap .contWrap .artistBox .imgWrap img { width : 100%; height : auto;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap { width : 100%; height : auto; } #exhibitions_View .wrap .contWrap .artistBox .connectWrap.b { margin-top : 2em;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap .wrapTit { color : #000; line-height : 1em; font-weight : 500; margin-bottom : 0.9em;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap .listWrap { width : 100%; display : flex; align-items : center; padding-left : 0.3em;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap .listWrap a { display : flex; align-items : center; margin-right : 1em;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap .listWrap a img { font-size : inherit; height : 1.8em;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap .listWrap a:last-child { margin-right : 0;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap p { color : #000; margin-bottom : 0.3em;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap p.common { padding-left : 0.3em;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap p.text { color : #333; font-family : "Noto Sans Kr";} #exhibitions_View .wrap .contWrap .artistBox .connectWrap a.tel { background : #777; color : #fff; border-radius : 17px; padding : 0.5em 1em; display : inline-block; margin-top : 0.5em; font-family : "Noto Sans Kr"} #exhibitions_View .wrap .contWrap .artistBox .connectWrap a.tel svg { transform : rotate(-45deg); margin-right : 0.3em;} #exhibitions_View .wrap .contWrap .readMore { font-size : 16px; background : #fff; color : #555; border : 1px solid #9F9FA0; width : auto; padding : 0.8em 1em; line-height : 1em; margin-top : 1em; cursor : pointer; display : none;} #exhibitions_View .wrap .worksWrap { width : 100%; height : auto; padding-top : 140px;} #exhibitions_View .wrap .worksWrap .innerWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; background : #EEEFEF; padding : 6em 0;} #exhibitions_View .wrap .worksWrap .wrapName { font-size : 30px; font-weight : 600; line-height : 1em; margin : 0 0 1.5em; color : #555;} #exhibitions_View .wrap .worksWrap .itemsWrap { width : 90%; height : auto; display : grid; grid-template-columns : repeat(4,1fr); gap : min(3vw,30px); } #exhibitions_View .wrap .worksWrap .itemsWrap .itemBox { width : 100%; height : auto; aspect-ratio : 1 / 1; position : relative; } #exhibitions_View .wrap .worksWrap .itemsWrap .itemBox img { width : 100%; height : 100%; object-fit : cover;} #exhibitions_View .wrap .worksWrap .itemsWrap .itemBox .hoverWrap { width : 100%; height : 100%; position : absolute; top : 0; left : 0; display : flex; align-items : center; justify-content : center; background : #00000099; opacity : 0; transition : .2s;} #exhibitions_View .wrap .worksWrap .itemsWrap .itemBox:hover .hoverWrap { opacity : 1; transition : .2s;} #exhibitions_View .wrap .worksWrap .itemsWrap .itemBox .hoverWrap p { font-size : 20px; color : #fff; font-weight : 800;} #exhibitions_View .wrap #worksLoadMore { font-size : 16px; color : #777; border : 1px solid #9F9FA0; width : auto; padding : 0.8em 2.4em; line-height : 1em; margin-top : 1em; cursor : pointer; display : flex; margin-top : 2.5em;} /* fancyBox CSS */ .pancyContBox { width : 85vw; height : auto; display : none; flex-direction : column; align-items : center; max-width : 1080px!important; font-family : "SUIT";} .pancyContBox .imgBox { width : 100%; height : auto;} .pancyContBox .imgBox img { width : 100%; max-height : min(40vh,400px); object-fit : contain;} .pancyContBox .shareWrap { width : 100%; height : auto; display : flex; justify-content : flex-end; align-items : center; font-size : 16px; color : #777; margin : 1em 0;} .pancyContBox .shareWrap p, .pancyContBox .shareWrap svg { line-height : 1em; } .pancyContBox .shareWrap svg { margin : 0 0.7em;} .pancyContBox .shareWrap .linkWrap { display : flex; align-items : center; } .pancyContBox .shareWrap .linkWrap a { display : flex; align-items : center; margin-right : 0.7em;} .pancyContBox .shareWrap .linkWrap a img { height : 1.3em;} .pancyContBox .infoWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; font-size : 18px;} .pancyContBox .infoWrap .date { color : #777777; line-height : 1em; font-weight : 500; margin-bottom : 0.8em;} .pancyContBox .infoWrap .name { font-weight : 600; line-height : 1em; font-size : 1.45em;} .pancyContBox .infoWrap .smallTit { color : #555; line-height : 1em; margin : 0.5em 0 1em; font-weight : 500;} .pancyContBox .infoWrap .size { color : #999; line-height : 1em; font-weight : 500;} @media(max-width:1024px){ #exhibitions_View { padding-top : 70px;} #exhibitions_View .wrap .mainImgWrap { margin-top : 0;} #exhibitions_View .wrap .titBox { padding : 90px 0 40px; font-size : 34px;} #exhibitions_View .wrap .contWrap .artistBox { width : 32%; max-width : 280px;} #exhibitions_View .wrap .contWrap { padding : 2.5em 0;} #exhibitions_View .wrap .contWrap .textBox { overflow : hidden; } #exhibitions_View .wrap .viewNavWrap, #exhibitions_View .wrap .contWrap { width : 95%;} #exhibitions_View .wrap .contWrap .readMore { display : block;} #exhibitions_View .wrap .worksWrap .itemsWrap { grid-template-columns : repeat(3,1fr);} /* fancyBox CSS */ .pancyContBox .infoWrap { font-size : 16px;} } @media(max-width:767px){ #exhibitions_View .wrap .titBox { font-size : 30px;} #exhibitions_View .wrap .contWrap { flex-direction : column-reverse;} #exhibitions_View .wrap .contWrap .contBox, #exhibitions_View .wrap .contWrap .artistBox { width : 100%; max-width : unset;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap { width : 100%; padding-left : 0; } #exhibitions_View .wrap .contWrap .artistBox .connectWrap .listWrap { flex-direction : column; padding-left : 0.3em; margin-top:0.5em; align-items : flex-start;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap .listWrap a { margin-bottom : 0.7em;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap .listWrap a:last-child { margin-bottom : 0;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap .listWrap a img { height : 1.25em;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap .listWrap a p { display : block; font-size : 16px; color : #555; margin-left : 0.6em; font-weight :300;} #exhibitions_View .wrap .viewNavWrap { width : 90%;} #exhibitions_View .wrap .contWrap { width : 100%; align-items : center; padding-top : 0;} #exhibitions_View .wrap .contWrap .contBox { width : 90%;} #exhibitions_View .wrap .contWrap .artistBox { background : #ddd; padding : 2em 0; margin : 1.5em 0;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap { width : 90%;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap.b { margin-top : 1.3em;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap .wrapTit { font-size : 16px;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap p { color : #777777;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap p.common { font-size : 14px;} #exhibitions_View .wrap .worksWrap .itemsWrap { grid-template-columns : repeat(2,1fr); gap : min(3vw,20px);} } @media(max-width:640px){ #exhibitions_View { padding-top : 60px;} #exhibitions_View .wrap .mainImgWrap { aspect-ratio : unset; height : calc(100vh - 60px); margin-top : 0;} #exhibitions_View .wrap .titBox { font-size : 26px; padding : 70px 0 30px;} #exhibitions_View .wrap .viewNavWrap { display : block; overflow-x : scroll; overflow-y : hidden; height : 3.5em; text-align:center; -ms-overflow-style: none; scrollbar-width: none; } #exhibitions_View .wrap .viewNavWrap::-webkit-scrollbar { display : none; } #exhibitions_View .wrap .navListWrap { display : inline-flex; width : auto; height : 100%; min-width : 100%;} #exhibitions_View .wrap .navListWrap .absoluteWrap { position : static; transform : unset!important; left : unset; min-width :100%; justify-content : center;} #exhibitions_View .wrap .viewNavWrap p { font-size : 14px; padding : 0 1.5em;} #exhibitions_View .wrap .contWrap { width : 100%; align-items : center; padding-top : 0;} #exhibitions_View .wrap .contWrap .contBox { align-items : center; width : 90%;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap { font-size : 14px; width : 90%;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap .listWrap a p { font-size : 14px;} #exhibitions_View .wrap .contWrap .contBox .shareWrap { font-size : 17px; justify-content : center; margin : 0;} #exhibitions_View .wrap .contWrap .readMore { font-size : 14px; margin : 2em 0;} #exhibitions_View .wrap .worksWrap { padding-top : 60px;} #exhibitions_View .wrap .contWrap .artistBox { background : #ddd; padding : 2em 0; margin : 1em 0;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap.b { margin-top : 1.5em;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap .wrapTit { font-size : 16px;} #exhibitions_View .wrap .contWrap .artistBox .connectWrap p { color : #777777;} #exhibitions_View .wrap .contWrap .contBox .shareWrap .linkWrap a:nth-child(2) { margin : 0 0.7em;} #exhibitions_View .wrap .contWrap .contBox .shareWrap img { height : 1.3em;} /* fancyBox CSS */ .pancyContBox { padding-left : 0; padding-right : 0; } .pancyContBox .shareWrap { order : 3; margin : 0; margin-top : 2em; justify-content : center; font-size : 14px;} .pancyContBox .infoWrap { font-size : 14px; order : 2; margin-top : 1.5em;} } @media(max-width:374px){ #exhibitions_View .wrap .tit { flex-direction : column; margin : 1em 0; font-size : 22px;} #exhibitions_View .wrap .tit span { text-align : center;} #exhibitions_View .wrap .tit span:first-child { margin-right : 0;} #exhibitions_View .wrap .viewNavWrap { height : 3em;} #exhibitions_View .wrap .worksWrap .itemsWrap { grid-template-columns : repeat(1,1fr); gap : min(7vw,20px);} }