/* A A A : A : A : A : */ #artist_View { width : 100%; height : auto; display : flex; justify-content : center; margin-top : 120px; font-family : "SUIT";} #artist_View .wrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; } #artist_View .wrap .mainImgWrap { width : 100%; height : auto; aspect-ratio : 16 / 9; max-width : 1600px; } #artist_View .wrap .mainImgWrap img { width : 100%; height : 100%; object-fit : cover;} #artist_View .wrap .tit { font-size : 40px; font-weight : 800; line-height : 1em; color : #333; padding : 100px 0 50px; display : flex; flex-wrap : wrap; } #artist_View .wrap .tit span:first-child { margin-right : 0.3em;} #artist_View .wrap .viewNavWrap { width : 100%; 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%;} #artist_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;} #artist_View .wrap .navListWrap .absoluteWrap { width : auto; height : 100%; display : flex; align-items : center; position : absolute; left : 0; transition : .2s; white-space : nowrap;} #artist_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;} #artist_View .wrap .viewNavWrap p.on { color : #000; font-weight : 500; position : relative; } #artist_View .wrap .viewNavWrap p.on::after { content : ""; width : 100%; height : 3px; background : #767777; position : absolute; bottom : -1.5px; left : 0; display : block; } #artist_View .wrap .viewNavWrap.on .navListWrap .absoluteWrap { left : 50%; transform : translateX(-50%); transition : .2s;} #artist_View .wrap .contWrap { width : 90%; height : auto; max-width : 1200px; display : flex; justify-content : space-between; align-items : flex-start; padding : 3em 0 0; margin-bottom : 3em;} #artist_View .wrap .contWrap .contBox { width : 60%; height : auto; display : flex; flex-direction : column; align-items : flex-start;} #artist_View .wrap .contWrap .contBox #contTextBox { font-family : "Times New Roman"; font-size : 16px; width : 100%;} #artist_View .wrap .contWrap .contBox #contTextBox img { width : 100%; height : auto;} #artist_View .wrap .contWrap .contBox .shareWrap { width : 100%; display : flex; align-items : center; justify-content : flex-end; font-size : 16px; color : #777; margin-top : 1.5em;} #artist_View .wrap .contWrap .contBox .shareWrap p { line-height : 1em; font-weight : 500;} #artist_View .wrap .contWrap .contBox .shareWrap svg { line-height : 1em; margin : 0 0.8em;} #artist_View .wrap .contWrap .contBox .shareWrap .linkWrap { display : flex; align-items : center;} #artist_View .wrap .contWrap .contBox .shareWrap .linkWrap a { display : flex; align-items : center; cursor : pointer;} #artist_View .wrap .contWrap .contBox .shareWrap .linkWrap a:nth-child(2) { margin : 0 0.8em;} #artist_View .wrap .contWrap .contBox .shareWrap img { font-size : inherit; height : 1.2em;} #artist_View .wrap .contWrap .artistBox { width : 30%; display : flex; flex-direction : column; align-items : center; } #artist_View .wrap .contWrap .artistBox .imgWrap { width : 100%; height : auto;} #artist_View .wrap .contWrap .artistBox .imgWrap img { width : 100%; height : auto;} #artist_View .wrap .contWrap .artistBox .connectWrap { width : 85%; height : auto; margin-top : 2em;} #artist_View .wrap .contWrap .artistBox .connectWrap .wrapTit { color : #555; line-height : 1em; font-weight : 500; margin-bottom : 0.8em;} #artist_View .wrap .contWrap .artistBox .connectWrap .listWrap { width : 100%; display : flex; align-items : center; padding-left : 0.3em;} #artist_View .wrap .contWrap .artistBox .connectWrap .listWrap a { display : flex; align-items : center; margin-right : 1em;} #artist_View .wrap .contWrap .artistBox .connectWrap .listWrap a:last-child { margin-right : 0;} #artist_View .wrap .contWrap .artistBox .connectWrap .listWrap a img { height : 1.5em;} #artist_View .wrap .contWrap .artistBox .connectWrap .listWrap a p { display : none;} #artist_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;} #artist_View .wrap .worksWrap { width : 100%; height : auto; background : #EEEFEF; padding : 120px 0;} #artist_View .wrap .worksWrap#story { border-top : 1px solid #dcdcdd;} #artist_View .wrap .worksWrap#exhibitions { background : none;} #artist_View .wrap .worksWrap#story { background : none;} #artist_View .wrap .worksWrap .innerWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; } #artist_View .wrap .worksWrap .wrapName { font-size : 30px; font-weight : 600; line-height : 1em; margin : 0 0 1.5em; color : #555;} #artist_View .wrap .worksWrap .itemsWrap { width : 90%; height : auto; display : grid; grid-template-columns : repeat(4,1fr); gap : min(3vw,30px); } #artist_View .wrap .worksWrap .itemsWrap .itemBox { width : 100%; height : auto; aspect-ratio : 1 / 1; position : relative; } #artist_View .wrap .worksWrap .itemsWrap .itemBox img { width : 100%; height : 100%; object-fit : cover;} #artist_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;} #artist_View .wrap .worksWrap#exhibitions .itemsWrap .itemBox .hoverWrap, #artist_View .wrap .worksWrap#story .itemsWrap .itemBox .hoverWrap { flex-direction : column; justify-content : center;} #artist_View .wrap .worksWrap .itemsWrap .itemBox:hover .hoverWrap { opacity : 1; transition : .2s;} #artist_View .wrap .worksWrap .itemsWrap .itemBox .hoverWrap p { font-size : 20px; color : #fff; font-weight : 800;} #artist_View .wrap .worksWrap .itemsWrap .itemBox .hoverWrap p.cate { font-size : 16px; color : #fff; font-weight : 500; margin-bottom : 0.4em;} #artist_View .wrap .worksWrap .itemsWrap .itemBox .hoverWrap .line { width : 30%; max-width : 50px; background : #fff; height : 4px;} #artist_View .wrap .worksWrap#exhibitions .itemsWrap .itemBox .hoverWrap p.hoverTit, #artist_View .wrap .worksWrap#story .itemsWrap .itemBox .hoverWrap p.hoverTit { margin : 0.7em 0 0.3em;} #artist_View .wrap .worksWrap .itemsWrap .itemBox .hoverWrap p.hoverTit { width : 95%; overflow : hidden; text-overflow : ellipsis; white-space : nowrap; text-align : center;} #artist_View .wrap .worksWrap .itemsWrap .itemBox .hoverWrap p.date { font-size : 15px; opacity : .8; font-weight : 500; color : #fff;} #artist_View .wrap .loadMore { 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;} #artist_View .wrap .bottom_button_menu { width : 100%; height : auto; display : flex; max-width : 1200px; align-items : center; justify-content : center; font-size : 15px; margin : 3em 0 4em;} #artist_View .wrap .bottom_button_menu a { 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;} #artist_View .wrap .bottom_button_menu a:hover { background : #333; transition : .2s;} /* 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){ #artist_View { margin-top : 70px;} #artist_View .wrap .tit { padding : 90px 0 40px; font-size : 34px;} #artist_View .wrap .contWrap .artistBox { width : 32%; max-width : 280px;} #artist_View .wrap .contWrap { padding : 2.5em 0;} #artist_View .wrap .contWrap .textBox { overflow : hidden; max-height : 30em; min-height : 5em;} #artist_View .wrap .viewNavWrap, #artist_View .wrap .contWrap { width : 95%;} #artist_View .wrap .viewNavWrap.on { width : 100%;} #artist_View .wrap .contWrap .readMore { display : block;} #artist_View .wrap .worksWrap { padding : 80px 0;} #artist_View .wrap .worksWrap .itemsWrap { grid-template-columns : repeat(3,1fr);} /* fancyBox CSS */ .pancyContBox .infoWrap { font-size : 16px;} } @media(max-width:767px){ #artist_View .wrap .tit { font-size : 30px;} #artist_View .wrap .contWrap { flex-direction : column-reverse; margin-bottom : 0;} #artist_View .wrap .contWrap .contBox, #artist_View .wrap .contWrap .artistBox { width : 100%; max-width : unset;} #artist_View .wrap .contWrap .artistBox { margin-bottom : 0;} #artist_View .wrap .contWrap .artistBox .connectWrap { width : 100%; padding-left : 0; margin : 1.5em 0 2em;} #artist_View .wrap .contWrap .artistBox .connectWrap.b { margin-bottom : 0;} #artist_View .wrap .contWrap .artistBox .connectWrap .listWrap { flex-direction : column; padding-left : 0.3em; margin-top:0.5em; align-items : flex-start;} #artist_View .wrap .contWrap .artistBox .connectWrap .listWrap a { margin-bottom : 0.7em;} #artist_View .wrap .contWrap .artistBox .connectWrap .listWrap a:last-child { margin-bottom : 0;} #artist_View .wrap .contWrap .artistBox .connectWrap .listWrap a img { height : 1.25em;} #artist_View .wrap .contWrap .artistBox .connectWrap .listWrap a p { display : block; font-size : 16px; color : #555; margin-left : 0.6em; font-weight :300;} #artist_View .wrap .viewNavWrap { width : 100%;} #artist_View .wrap .contWrap { width : 90%;} #artist_View .wrap .worksWrap .itemsWrap { grid-template-columns : repeat(2,1fr); gap : min(3vw,20px);} } @media(max-width:640px){ #artist_View { margin-top : 60px;} #artist_View .wrap .mainImgWrap { aspect-ratio : unset; height : calc(100vh - 60px);} #artist_View .wrap .tit { font-size : 26px; padding : 70px 0 30px;} #artist_View .wrap .viewNavWrap { display : block; overflow-x : scroll; overflow-y : hidden; height : 3.5em; text-align:center; -ms-overflow-style: none; scrollbar-width: none; } #artist_View .wrap .viewNavWrap::-webkit-scrollbar { display : none; } #artist_View .wrap .navListWrap { display : inline-flex; width : auto; height : 100%; min-width : 100%;} #artist_View .wrap .navListWrap .absoluteWrap { position : static; transform : unset!important; left : unset; min-width :100%; justify-content : center;} #artist_View .wrap .contWrap .contBox #contTextBox { font-size : 14px; } #artist_View .wrap .viewNavWrap a { font-size : 14px; padding : 0 1.5em;} #artist_View .wrap .contWrap .contBox { align-items : center;} #artist_View .wrap .contWrap .artistBox .connectWrap { font-size : 14px; margin : 1em 0 1.5em;} #artist_View .wrap .contWrap .artistBox .connectWrap .listWrap a p { font-size : 14px;} #artist_View .wrap .contWrap .contBox .shareWrap { font-size : 17px; justify-content : center; margin-top : 2em;} #artist_View .wrap .contWrap .readMore { font-size : 14px; margin : 2em 0;} #artist_View .wrap .worksWrap { padding : 50px 0;} #artist_View .wrap .worksWrap .wrapName { font-size : 25px}; #artist_View .wrap .worksWrap .itemsWrap .itemBox { aspect-ratio : unset; padding-top : 100%;} #artist_View .wrap .worksWrap .itemsWrap .itemBox img { position : absolute; top : 0; left : 0;} #artist_View .wrap .worksWrap .itemsWrap .itemBox .hoverWrap p.date { font-size : 13px;} #artist_View .wrap .worksWrap .itemsWrap .itemBox .hoverWrap p.cate { font-size : 14px;} #artist_View .wrap .worksWrap .itemsWrap .itemBox .hoverWrap .line { width : 10%; height : 3px;} #artist_View .wrap .worksWrap .itemsWrap .itemBox .hoverWrap p.hoverTit { font-size : 15px; } /* 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){ #artist_View .wrap .tit { flex-direction : column; margin : 1em 0; font-size : 22px;} #artist_View .wrap .tit span { text-align : center;} #artist_View .wrap .tit span:first-child { margin-right : 0;} #artist_View .wrap .viewNavWrap { height : 3em;} #artist_View .wrap .worksWrap .itemsWrap { grid-template-columns : repeat(1,1fr); gap : min(7vw,20px);} }