/* A A A : A : A : A : */ #viewPage { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; justify-content : center; font-size : min(1.6vw,18px); margin-top : 145px;} #viewPage .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; } #viewPage .topImageWrap .subTitImage { width : 100%; height : 100%; position : absolute; top : 0; left : 0; object-fit : cover;} #viewPage .topImageWrap .topTextWrap { width : 100%; height : 100%; position : relative; z-index : 1; display : flex; align-items : center; justify-content : center;} #viewPage .topImageWrap .topTextWrap .inner { width : auto; height : auto; display : flex; align-items : center; justify-content : center; flex-direction : column; gap : 0.5em;} #viewPage .topImageWrap .topTextWrap .inner .eng { font-size : max(14px,0.65em); font-weight : 400; line-height : 1em; color : #fff;} #viewPage .topImageWrap .topTextWrap .inner .kor { font-weight : 800; line-height : 1em; color : #fff;} #viewPage .topShadowWrap { width : 100%; height : auto; position : absolute; top : 100%; left : 0;} #viewPage .topShadowWrap img { width : 100%; height : auto;} #viewPage .wrap { width : 95%; max-width : 1200px; display : flex; flex-direction : column; align-items : flex-start; justify-content : center;} #viewPage .wrap.horizon { flex-direction : row; align-items : center; justify-content : center;} #viewPage .subjectWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; padding : 6em 0 1.5em; background : #f7f7f7;} #viewPage .subjectWrap .subject { color : #555555; font-size : 1.9em; line-height : 1.2em; word-break : keep-all; font-weight : 500; } #viewPage .subjectWrap .date { color : #999999; line-height : 1em; margin-top : 1.4em;} #viewPage .subjectWrap .date span { color : #555; line-height : inherit; margin-right : 0.3em; } #viewPage .contentWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; padding : 0 0 5em; } #viewPage .contentWrap .fileListWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : flex-start; justify-content : center; padding : 1.2em 0 1.3em; border-bottom : 1px solid #cccccc;} #viewPage .contentWrap .fileListWrap a { width : auto; height : auto; display : flex; align-items : center; justify-content : flex-start; font-size : 1.1em;} #viewPage .contentWrap .fileListWrap a:nth-child(2) { margin-top : 0.4em;} #viewPage .contentWrap .fileListWrap a .circle { width : 1.4em; height : 1.4em; border-radius : 50%; background : #cccccc; color : #fff; display : flex; align-items : center; justify-content : center; margin-right : 0.5em; transition : .2s;} #viewPage .contentWrap .fileListWrap a:hover .circle { background : #0080cc; transition : .2s;} #viewPage .contentWrap .fileListWrap a .circle svg { font-size : 0.7em; line-height : 1em;} #viewPage .contentWrap .fileListWrap a .fileName { color : #555555; line-height : 1em; transition : .2s;} #viewPage .contentWrap .fileListWrap a:hover .fileName { color : #0080cc; transition : .2s;} #viewPage .contentWrap .content { margin-top : 4em; width : 100%;} #viewPage .contentWrap .content img { max-width : 100%;} #viewPage .contentWrap .content a { color : #8f8fff !important; transition : .2s;} #viewPage .contentWrap .content a:hover { color : #2323ff !important; transition : .2s;} #viewPage .pageWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; padding : 4em 0 5em; background : #f7f7f7;} /* 페이지 버튼 PC 버전 */ #viewPage .pageWrap.pc .pageBtnWrap { width : calc(calc(90% - 5em) / 2); flex-grow : 1; display : flex; align-items : center;} #viewPage .pageWrap.pc .pageBtnWrap .linkBtn { width : 100%; height : auto; display : flex; align-items : center; justify-content : space-between;} #viewPage .pageWrap.pc .pageBtnWrap .linkBtn.no { cursor : default;} #viewPage .pageWrap.pc .pageBtnWrap .linkBtn .btnCircle { width : 5em; height : 5em; border : 1px solid #ccc; border-radius : 50%; display : flex; align-items : center; justify-content : center; flex-direction : column; transition : .2s;} #viewPage .pageWrap.pc .pageBtnWrap .linkBtn:hover .btnCircle, #viewPage .pageWrap.pc .listBtn:hover { background : #999; border : 1px solid #999; color : #fff; transition : .2s;} #viewPage .pageWrap.pc .pageBtnWrap .linkBtn .linkText { width : calc(95% - 5em); color : #999; word-break : keep-all; text-overflow : ellipsis; overflow : hidden; word-break : break-word; display : -webkit-box; -webkit-line-clamp : 2; -webkit-box-orient: vertical; transition : .2s;} #viewPage .pageWrap.pc .pageBtnWrap .linkBtn.nextBtn .linkText { text-align : right;} #viewPage .pageWrap.pc .pageBtnWrap .linkBtn:hover .linkText { color : #555555; transition : .2s;} #viewPage .pageWrap.pc .listBtn { width : 5em; height : 5em; margin : 0 5%; display : flex; align-items : center; justify-content : center; border : 1px solid #cccccc; flex-direction : column; transition : .2s;} #viewPage .pageWrap.pc .pageBtnWrap .linkBtn .btnCircle svg, #viewPage .pageWrap.pc .listBtn svg { font-size : 1.6em; color : #555; transition : .2s;} #viewPage .pageWrap.pc .pageBtnWrap .linkBtn:hover .btnCircle svg, #viewPage .pageWrap.pc .listBtn:hover svg { color : #fff; transition : .2s;} #viewPage .pageWrap.pc .pageBtnWrap .linkBtn .btnCircle svg { font-size : 1em;} #viewPage .pageWrap.pc .pageBtnWrap .linkBtn .btnCircle p, #viewPage .pageWrap.pc .listBtn p { font-size : 0.9em; line-height : 1em; margin-top : 0.2em; } #viewPage .pageWrap.pc .listBtn:hover p { color : #fff; transition : .2s;} /* 페이지 버튼 모바일 버전 */ #viewPage .pageWrap.mobile { display : none;} #viewPage .pageWrap.mobile .listBtn { width : auto; height : auto; display : flex; align-items : center; justify-content : center; line-height : 1em; padding : 0.6em 1.2em; color : #fff; background : #999999; margin-bottom : 1.2em;} #viewPage .pageWrap.mobile .listBtn p { line-height : 1em; margin-left : 0.3em;} #viewPage .pageWrap.mobile .pageBtnWrap, #viewPage .pageWrap.mobile .pageBtnWrap .linkBtn { width : 100%; height : auto; display : flex; align-items : center; justify-content : space-between;} #viewPage .pageWrap.mobile .pageBtnWrap .linkBtn.prevBtn { margin-bottom : 0.8em;} #viewPage .pageWrap.mobile .pageBtnWrap .linkBtn { border : 1px solid #999;} #viewPage .pageWrap.mobile .pageBtnWrap .linkBtn .btnCircle { width : 5em; height : auto; display : flex; align-items : center; justify-content : center; background : #999; color : #fff; padding : 0.5em 0;} #viewPage .pageWrap.mobile .pageBtnWrap .linkBtn .btnCircle p { line-height : 1em; margin-left : 0.5em;} #viewPage .pageWrap.mobile .pageBtnWrap .linkBtn .linkText { width : calc(100% - 5.8em); text-align : left; white-space : nowrap; overflow : hidden; text-overflow : ellipsis; color : #555;} @media(max-width : 1024px){ /* A A A : A : A : A : */ #viewPage { font-size : min(2.4vw,16px); margin-top : 80px;} #viewPage .topImageWrap { font-size : min(3.5vw,26px); aspect-ratio : 1920 / 600;} } @media(max-width : 640px){ /* A A A : A : A : A : */ #viewPage { font-size : max(2.4vw,14px); margin-top : 65px;} #viewPage .topImageWrap { font-size : max(18px,3.5vw); aspect-ratio : 1920 / 900;} #viewPage .subjectWrap { padding : 3em 0 2em;} #viewPage .subjectWrap .subject { font-size : 1.2em;} #viewPage .contentWrap { padding : 0 0 2em;} #viewPage .contentWrap .content { margin-top : 2em;} #viewPage .pageWrap { padding : 3em 0;} #viewPage .pageWrap.pc { display : none;} #viewPage .pageWrap.mobile { display : flex;} #viewPage .pageWrap .wrap { flex-direction : column;} }