/* A A A : A : A : A : */ #listPage { font-family : "nanum"; display : flex; align-items : center; justify-content : center; flex-direction : column; margin-top : 145px;} #listPage .topImageWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; aspect-ratio : 1920 / 450; font-size : min(1.7vw,35px); position : relative; } #listPage .topImageWrap .subTitImage { width : 100%; height : 100%; position : absolute; top : 0; left : 0; object-fit : cover;} #listPage .topImageWrap .topTextWrap { width : 100%; height : 100%; position : relative; z-index : 1; display : flex; align-items : center; justify-content : center;} #listPage .topImageWrap .topTextWrap .inner { width : auto; height : auto; display : flex; align-items : center; justify-content : center; flex-direction : column; gap : 0.5em;} #listPage .topImageWrap .topTextWrap .inner .eng { font-size : max(14px,0.65em); font-weight : 400; line-height : 1em; color : #fff;} #listPage .topImageWrap .topTextWrap .inner .kor { font-weight : 800; line-height : 1em; color : #fff;} #listPage .topShadowWrap { width : 100%; height : auto; position : absolute; top : 100%; left : 0;} #listPage .topShadowWrap img { width : 100%; height : auto;} #listPage .articleWrap { width : 100%; padding : 6em 0 4em; background : #f7f7f7; gap : 3em; display : flex; flex-direction : column; align-items : center; justify-content : flex-start;} #listPage .listWrap { width : 95%; height : auto; display : grid; font-family : "nanum"; font-size : min(1.6vw,20px); grid-template-columns : repeat(3,calc(calc(100% - 2em) / 3)); gap : 1em; max-width : 1200px; } #listPage .listWrap .list { width : 100%; height : auto; aspect-ratio : 390 / 285; background : #fff; display : flex; flex-direction : column; align-items : center; justify-content : space-between; position : relative; overflow : hidden; } #listPage .listWrap .list .listHoverWrap { position : absolute; left : 50%; top : 50%; width : 0px; height : 0px; border-radius : 100%; transition : 0.6s; background-color : #fafafa; transform : translate(-50%, -50%); z-index : 0; } #listPage .listWrap .list:hover .listHoverWrap { width : 150%; height : 150%; transition : 1.3s; } #listPage .listWrap .list:hover { box-shadow : 0px 0px 15px 0px #bdbdbd; transition : 2s;} #listPage .listWrap .list .noticeMarkWrap { width : 100%; height : 2em; display : flex; justify-content : flex-end; z-index : 1;} #listPage .listWrap .list .noticeMark { width : auto; height : auto; line-height : 1em; padding : 0.7em 1.4em; background : #0086ffb3; font-weight : 700; color : #fff; font-size : 0.8em; overflow : hidden; position : relative;} #listPage .listWrap .list .noticeMark::after { content : ''; width : 20px; height : 100px; margin-top : -30px; right : 100%; top : 0%; transition : 0.3s; position : absolute; display : inline-block; background-color : #fff; transform : rotate(45deg); animation-name: button_ani_white; animation-duration: 2.7s; animation-delay: 0s; animation-timing-function: linear; animation-fill-mode: both; animation-iteration-count: infinite; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); } #listPage .listWrap .list .noticeMark.none { background : none; opacity : 0;} #listPage .listWrap .list .dateWrap { width : calc(100% - 3em); display : flex; align-items : center; justify-content : flex-start; z-index : 1;} #listPage .listWrap .list .dateWrap .date { font-size : 0.8em; color : #c4c4c4; font-weight : 200;} #listPage .listWrap .list .subjectWrap { width : calc(100% - 3em); display : flex; align-items : flex-start; justify-content : flex-start; height : 2.8em; margin : 1.2em 0 1.5em; z-index : 1;} #listPage .listWrap .list .subjectWrap .subject { width : 100%; height : auto; text-overflow : ellipsis; overflow : hidden; word-break : break-word; display : -webkit-box; -webkit-line-clamp : 2; -webkit-box-orient: vertical; font-size : 1.2em; word-break : keep-all;} #listPage .listWrap .list .contentWrap { width : calc(100% - 3em); display : flex; align-items : flex-start; justify-content : flex-start; height : 2em; z-index : 1;} #listPage .listWrap .list .contentWrap .content { font-size : 0.8em; font-weight : 200; color : #999; width : 100%; height : auto; text-overflow : ellipsis; overflow : hidden; word-break : keep-all; display : -webkit-box; -webkit-line-clamp : 2; -webkit-box-orient: vertical;} #listPage .listWrap .list .detailMark { width : 100%; display : flex; align-items : center; justify-content : flex-end; position : relative; overflow : hidden; height : 2em; z-index : 1;} #listPage .listWrap .list .detailMark .detail { width : auto; height : 100%; line-height : 1em; padding : 0em 1.5em; font-size : 0.8em; position : absolute; right : -100%; bottom : 0; background : #0068b8b3; color : #fff; display : flex; align-items : center; justify-content : center; transition : .4s; overflow : hidden;} #listPage .listWrap .list:hover .detailMark .detail { right : 0; transition : .4s;} #listPage .listWrap .list .detailMark .detail:hover { color : #fff000; transition : .2s;} #listPage .listWrap .list .detailMark .detail::after { content : ''; width : 20px; height : 200px; margin-top : -30px; right : 100%; bottom : 0%; transition : 0.3s; position : absolute; display : inline-block; background-color : #fff; transform : rotate(45deg); background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); } #listPage .listWrap .list:hover .detailMark .detail::after { animation-name: button_ani_white; animation-duration: 2.5s; animation-delay: 0s; animation-timing-function: linear; animation-fill-mode: both; animation-iteration-count: infinite; } @keyframes button_ani_white { 0% { right : 200%; bottom : -100%; } 50% { right : -200%; bottom : -100%; } 100% { right : -200%; bottom : -100%; } } #listPage .noneWrap { width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } #listPage .noneWrap img { height: 6.5em; opacity: .2; margin-bottom: 0.5em;} #listPage .noneWrap p { font-weight: 300; line-height: 1em;} #pagingWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; font-size : min(1.6vw,20px); } #pagingWrap .sound_only { display : none;} #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; } #pagingWrap .pagingBtn.btns.on { background : #00b3ff; color : #fff; pointer-events : none;} #pagingWrap .pagingBtn:hover { background : #999; color : #fff; transition : .2s;} #pagingWrap .pagingBtn svg { pointer-events : none;} #pagingWrap .pagingBtn.first { margin : 0; margin-right : 0.2em; background : #fff; color : #999999; border-radius : 0;} #pagingWrap .pagingBtn.before { margin-left : 0; color : #999999; border-radius : 0; background : #fff; margin-right : 1em;} #pagingWrap .pagingBtn.last { margin : 0; margin-left : 0.2em; background : #fff; color : #999999; border-radius : 0; } #pagingWrap .pagingBtn.first:hover, #pagingWrap .pagingBtn.last:hover { background : #999999; color : #fff;} #pagingWrap .pagingBtn.next { margin-right : 0; background : #fff; color : #999; border-radius : 0; margin-left : 1em;} #pagingWrap .pagingBtn.before:hover, #pagingWrap .pagingBtn.next:hover { background : #999; color : #fff;} #pagingWrap .pagingBtn.first svg, #pagingWrap .pagingBtn.before svg, #pagingWrap .pagingBtn.next svg, #pagingWrap .pagingBtn.last svg { font-size : 0.8em; } @media(max-width : 1024px){ /* A A A : A : A : A : */ #listPage { margin-top : 80px;} #listPage .listWrap { font-size : min(2.2vw,17px);} #listPage .topImageWrap { font-size : min(3.5vw,26px); aspect-ratio : 1920 / 600;} } @media(max-width : 820px){ /* A A A : A : A : A : */ #listPage .listWrap { grid-template-columns : repeat(2,calc(calc(100% - 1em) / 2));} #listPage .articleWrap {padding : 4em 0; } #listPage .listWrap .list { aspect-ratio : 1 / 0.6;} } @media(max-width : 640px){ #listPage { margin-top : 65px;} #listPage .topImageWrap { font-size : max(18px,3.5vw); aspect-ratio : 1920 / 900;} #listPage .listWrap { font-size : max(14px,3vw); grid-template-columns : 100%;} #listPage .listWrap .list { aspect-ratio : unset;} #listPage .listWrap .list .noticeMark { padding : 0 1em; display : flex; align-items : center; justify-content : center;} #listPage .listWrap .list .noticeMark, #listPage .listWrap .list .dateWrap .date, #listPage .listWrap .list .detailMark .detail, #listPage .listWrap .list .contentWrap .content { font-size : 1em;} #listPage .listWrap .list .detailMark { height : 2em;} }