/* A A A : A : A : A : */ #otium_list { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; justify-content : center; font-family : "Noto Sans Kr"; font-size : min(1.6vw,20px); max-width : 1200px; } #otium_list form { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; flex-direction : column; } #otium_list .listWrap { width : 100%; height : auto; display : flex; align-items : flex-start; justify-content : flex-start; flex-direction : column; padding : 2em 0;} #otium_list .listWrap .list { width : 100%; height : auto; display : flex; align-items : stretch; justify-content : space-between; border-bottom : 1px solid #dddddd; padding : 2.3em 0 2.5em;} #otium_list .listWrap .list .numWrap { width : 12%; height : auto; display : flex; align-items : center; justify-content : center;} #otium_list .listWrap .list .numWrap .num { font-size : 1.5em; color : #cccccc; line-height : 1em;} #otium_list .listWrap .list .infoWrap { width : 60%; height : auto; display : flex; flex-direction : column; align-items : flex-start; justify-content : center; text-align : left;} #otium_list .listWrap .list .infoWrap .dateWrap, #otium_list .listWrap .list .infoWrap .infoNoteWrap, #otium_list .listWrap .list .infoWrap .subjectWrap, #otium_list .listWrap .list .infoWrap .placeWrap { width : 100%; height : auto; } #otium_list .listWrap .list .infoWrap .dateWrap span { line-height : inherit;} #otium_list .listWrap .list .infoWrap .noteWrap { display : none;} #otium_list .listWrap .list .small { font-size : max(13px,0.85em); line-height : 1em; color : #777; font-weight : 300; letter-spacing : 0.05em; word-break : keep-all;} #otium_list .listWrap .list .infoWrap .subjectWrap .subject { font-size : 1.2em; font-weight : 300; word-break : keep-all; margin : 0.55em 0; letter-spacing : 0.03em; line-height : 1.2em;} #otium_list .listWrap .list .noteWrap { width : 25%; height : auto; display : flex; flex-direction : column; align-items : flex-end; justify-content : center;} #otium_list .listWrap .list .noteWrap .note { background : #fff; line-height : 1em; padding : 0.5em 1em; color : #777; margin-bottom : 0.4em; font-weight : 300;} #otium_list .listWrap .list .noteWrap .note span { font-size : max(12px,0.7em);} #otium_list .listWrap .list .noteWrap .note:last-child { margin-bottom : 0;} #otium_list .listWrap .list .noteWrap .note:nth-child(2) {font-size : 0.85em; } #otium_list .noneWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; justify-content : center; padding : 4em 0;} #otium_list .noneWrap img { height : 6.5em; opacity : .2; margin-bottom : 0.5em;} /* 페이징 */ #otium_list .pagingWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; margin : 2em 0 4em;} #otium_list .pagingWrap .pagingBtn { width : 2em; height : 2em; margin : 0 0.2em; display : flex; align-items : center; justify-content : center; cursor : pointer; color : #999999; transition : .2s; font-size : max(14px,0.8em); border-radius : 50%; line-height : 1em; } #otium_list .pagingWrap .pagingBtn.btns.on { background : #00b3ff; color : #fff; pointer-events : none;} #otium_list .pagingWrap .pagingBtn:hover { background : #999; color : #fff; transition : .2s;} #otium_list .pagingWrap .pagingBtn svg { pointer-events : none;} #otium_list .pagingWrap .pagingBtn.first { margin : 0; margin-right : 0.2em; background : #fff; color : #999999; border-radius : 0;} #otium_list .pagingWrap .pagingBtn.before { margin-left : 0; color : #999999; border-radius : 0; background : #fff; margin-right : 1em;} #otium_list .pagingWrap .pagingBtn.last { margin : 0; margin-left : 0.2em; background : #fff; color : #999999; border-radius : 0; } #otium_list .pagingWrap .pagingBtn.first:hover, #otium_list .pagingWrap .pagingBtn.last:hover { background : #999999; color : #fff;} #otium_list .pagingWrap .pagingBtn.next { margin-right : 0; background : #fff; color : #999; border-radius : 0; margin-left : 1em;} #otium_list .pagingWrap .pagingBtn.before:hover, #otium_list .pagingWrap .pagingBtn.next:hover { background : #999; color : #fff;} #otium_list .pagingWrap .pagingBtn.first svg, #otium_list .pagingWrap .pagingBtn.before svg, #otium_list .pagingWrap .pagingBtn.next svg, #otium_list .pagingWrap .pagingBtn.last svg { font-size : 0.8em; } #otium_list .slideWrap { width : 100%; height : auto; } #otium_list .slideWrap .listSwiper { width : 100%; height : 100%;} #otium_list .slideWrap .listSwiper img { width : 100%; height : auto; aspect-ratio : 1920 / 800; object-fit : cover;} @media(max-width : 1024px){ /* A A A : A : A : A : */ #otium_list { font-size : min(2.2vw,17px);} #otium_list form #listHtmlWrap { grid-template-columns : repeat(3,calc(calc(100% - 2em) / 3)); gap : 1.2em 1em;} #otium_list form #listHtmlWrap .listBox .renew_code { font-size : 12px;} } @media(max-width : 640px){ /* A A A : A : A : A : */ #otium_list { font-size : max(14px,3vw);} #otium_list .listWrap .list .numWrap { width : 16%;} #otium_list .listWrap .list .numWrap .num { font-size : 15px;} #otium_list .listWrap .list .infoWrap { width : 82%;} #otium_list .listWrap .list .infoWrap .subjectWrap .subject { font-size : 15px;} #otium_list .listWrap .list .infoWrap .noteWrap { display : flex; width : 100%; justify-content : flex-start; align-items : center; flex-direction : row; margin-top : 0.5em;} #otium_list .listWrap .list .infoWrap .noteWrap .note { margin-bottom : 0; margin-right : 0.5em; padding : 0.5em; font-size : 13px;} #otium_list .listWrap .list .infoWrap .noteWrap .note:last-child { margin-right : 0;} #otium_list .listWrap .list .noteWrap { display : none;} #otium_list .pagingWrap { margin : 0 0 4em;} }