/* A A A : A : A : A : */ html.with-fancybox body.hide-scrollbar { width: auto; margin-right: 0 !important; overflow: auto !important; overscroll-behavior-y: none; } #review_list .writeWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; margin : 2em 0 3em;} #review_list .writeWrap a { line-height : 1em; color : #fff; background : #00a0e8; padding : 0.5em 1em; border-radius : 7px; transition : .2s;} #review_list .writeWrap a:hover { background : #006fa1; transition : .2s;} #review_list .first { background : #f7f7f7; padding : 4em 0 6em; margin : 0;} #review_list .first form { width : 90%; height : auto; display : flex; flex-direction : column; align-items : center; justify-content : center; gap : 3em;} #review_list .first form .listWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; justify-content : center; gap : 2em; } [data-list-box] { width : 100%; height : auto; display : flex; align-items : stretch; justify-content : center; gap : 3.5%; position : relative; padding : 1em 3em 1.2em; transition : .2s; cursor : pointer; max-width : 850px; background : none; outline : none;} [data-list-box]:hover { filter : drop-shadow(2px 4px 6px #0000007a); transition : .2s;} [data-list-box] .back { width : 76.5%; height : 100%; background : #dff1f4; position : absolute; top : 0; right : 0; z-index : 1; border-radius : 40px; pointer-events : none;} [data-list-box] .imgWrap, [data-list-box] .reviewWrap { z-index : 1; position : relative;} [data-list-box] .imgWrap { width : 40%; height : auto; display : flex; flex-direction : column; align-items : center; justify-content : center; gap : 0.5em; } [data-list-box] .imgWrap .star { width : auto; height : 1.5em;} [data-list-box] .imgWrap .thumWrap { width : 100%; height : auto; border-radius : 17px; overflow : hidden; aspect-ratio : 290 / 236;} [data-list-box] .imgWrap .thumWrap img { width : 100%; height : 100%; object-fit : cover;} [data-list-box] .reviewWrap { width : calc(100% - 43.5%); height : auto; display : flex; flex-direction : column; align-items : center; justify-content : flex-start; gap : 0.5em; padding-top : 2em;} [data-list-box] .reviewWrap .infoWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : space-between; padding-right : 0.7em;} [data-list-box] .reviewWrap .infoWrap p:nth-child(1) { max-width : 49%; overflow : hidden; text-overflow : ellipsis; white-space : nowrap;} [data-list-box] .reviewWrap .reveiwTextWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : flex-start; justify-content : center; gap : 0.3em; padding-left : 1.5em; padding-right : 0.7em; background : #00a0e8; color : #fff; border-radius : 17px; flex-grow : 1; margin-bottom : 0.5em; position : relative;} [data-list-box] .reviewWrap .reveiwTextWrap .balloonTail { height : 2.3em; position : absolute; top : 3em; right : 99.5%;} [data-list-box] .reviewWrap .reveiwTextWrap .subject { width : 100%; height : auto; font-size : 1.2em; font-weight : 800; word-break : keep-all; text-overflow : ellipsis; overflow : hidden; -webkit-line-clamp: 2; display : -webkit-box; -webkit-box-orient: vertical;} [data-list-box] .reviewWrap .reveiwTextWrap .content { word-break : keep-all; text-overflow : ellipsis; overflow : hidden; -webkit-line-clamp: 3; display : -webkit-box; -webkit-box-orient: vertical;} /* 디테일 박스 */ /* A A A : A : A : A : */ [data-list-box].detail { width : 70%; flex-direction : column; align-items : center; justify-content : center; max-width : 1000px; gap : 1em; padding : 0em 0 1.5em; font-family : "nanum";} [data-list-box].detail .back { width : 100%; height : 72%; top : unset; bottom : 0;} [data-list-box].detail .imgWrap, [data-list-box].detail .reviewWrap { width : 90%; max-width : 750px;} [data-list-box].detail .reviewWrap { flex-direction : column-reverse; padding-top : 0; } [data-list-box].detail .imgWrap .thumWrap { width : 80%; max-width : 300px;} [data-list-box].detail .reviewWrap .reveiwTextWrap { padding : 2em 0.7em 2em 1.5em; width : auto; max-width : 100%; min-width : 30%;} [data-list-box].detail .reviewWrap .reveiwTextWrap .balloonTail { top : unset; bottom : 98.5%; right : 50%; transform : translateX(50%) rotate(90deg);} [data-list-box].detail .reviewWrap .infoWrap { flex-direction : column; align-items : flex-start; justify-content : flex-start; gap : 0.5em; padding-right : 0;} [data-list-box].detail .reviewWrap .reveiwTextWrap .overflowWrap { width : 100%; height : auto; max-height : 20vh; overflow : auto; padding-right : 0.3em;} [data-list-box].detail .reviewWrap .reveiwTextWrap .overflowWrap::-webkit-scrollbar { width : 8px; /* 세로 스크롤바 너비 */ height : 8px; /* 가로 스크롤바 너비 */ } /* 스크롤바 트랙(배경) */ [data-list-box].detail .reviewWrap .reveiwTextWrap .overflowWrap::-webkit-scrollbar-track { background : #f1f1f1; border-radius : 4px; } /* 스크롤바 핸들(움직이는 부분) */ [data-list-box].detail .reviewWrap .reveiwTextWrap .overflowWrap::-webkit-scrollbar-thumb { background : #483d8b; border-radius : 4px; } /* 스크롤바 핸들 hover 시 */ [data-list-box].detail .reviewWrap .reveiwTextWrap .overflowWrap::-webkit-scrollbar-thumb:hover { background: #2c2557; } [data-list-box].detail .reviewWrap .reveiwTextWrap .subject { width : 100%; height : auto; font-size : 1.2em; font-weight : 800; word-break : keep-all; text-overflow : unset; overflow : unset; -webkit-line-clamp: unset; display : block; -webkit-box-orient: unset;} [data-list-box].detail .reviewWrap .reveiwTextWrap .content { word-break : keep-all; text-overflow : unset; overflow : unset; -webkit-line-clamp: unset; display : block; -webkit-box-orient: unset; margin-top : 0.3em;} [data-list-box].detail .optWrap { width : 100%; height : auto; display : flex; justify-content : flex-end; align-items : center; gap : 0.5em; z-index : 2; } [data-list-box].detail .optWrap .opt { line-height : 1em; padding : 0.5em 1em; transition : .2s; color : #fff; border-radius : 7px;} [data-list-box].detail .optWrap .opt.edit { background : #00008b; } [data-list-box].detail .optWrap .opt.edit:hover { background : #6363ff; transition : .2s;} [data-list-box].detail .optWrap .opt.del { background : #980000;} [data-list-box].detail .optWrap .opt.del:hover { background : #ed0606; transition : .2s;} .f-button { font-size : min(1.8vw,30px); width : auto !important; height : auto!important; font-family : "nanum"; opacity : .5;} .f-button:hover { opacity : 1;} .f-button:disabled { opacity : 0 !important;} .f-button .btn { width : auto; height : auto; display : flex; flex-direction : column; align-items : center; justify-content : center; font-size : inherit;} .f-button .btn .arrow { font-size : 1.3em; line-height : 1em;} .f-button .btn .arrow svg { font-size : inherit ! important; width : 1em ! important; height : 1em ! important;} .f-button .btn .name { font-weight : 800; line-height : 1em;} .f-button.f-button.is-next { right : 5% !important;} .f-button.f-button.is-prev { left : 5% !important;} .f-button .noPc { display : none;} /* 페이징 */ #review_list .pagingWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; } #review_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; border-radius : 50%; line-height : 1em; } #review_list .pagingWrap .pagingBtn.btns.on { background : #00b3ff; color : #fff; pointer-events : none;} #review_list .pagingWrap .pagingBtn:hover { background : #999; color : #fff; transition : .2s;} #review_list .pagingWrap .pagingBtn svg { pointer-events : none;} #review_list .pagingWrap .pagingBtn.first { margin : 0; margin-right : 0.2em; background : #fff; color : #999999; border-radius : 0;} #review_list .pagingWrap .pagingBtn.before { margin-left : 0; color : #999999; border-radius : 0; background : #fff; margin-right : 1em;} #review_list .pagingWrap .pagingBtn.last { margin : 0; margin-left : 0.2em; background : #fff; color : #999999; border-radius : 0; } #review_list .pagingWrap .pagingBtn.first:hover, #review_list .pagingWrap .pagingBtn.last:hover { background : #999999; color : #fff;} #review_list .pagingWrap .pagingBtn.next { margin-right : 0; background : #fff; color : #999; border-radius : 0; margin-left : 1em;} #review_list .pagingWrap .pagingBtn.before:hover, #review_list .pagingWrap .pagingBtn.next:hover { background : #999; color : #fff;} #review_list .pagingWrap .pagingBtn.first svg, #review_list .pagingWrap .pagingBtn.before svg, #review_list .pagingWrap .pagingBtn.next svg, #review_list .pagingWrap .pagingBtn.last svg { font-size : 0.8em; } @media(max-width : 1024px) { /* A A A : A : A : A : */ .f-button .noPc { display : block;} .f-button .btn { display : none;} } @media(max-width : 767px) { /* A A A : A : A : A : */ #review_list .first form .listWrap { gap : 4em;} [data-list-box] { flex-direction : column; align-items : center; justify-content : center; max-width : 450px; gap : 1em; padding : 0em 3em 1.5em;} [data-list-box] .back { width : 100%; height : 72%; top : unset; bottom : 0;} [data-list-box] .imgWrap, [data-list-box] .reviewWrap { width : 100%;} [data-list-box] .reviewWrap { flex-direction : column-reverse; padding-top : 0; } [data-list-box] .imgWrap .thumWrap { width : 80%;} [data-list-box] .reviewWrap .reveiwTextWrap { padding : 2em 0.7em 2em 1.5em;} [data-list-box] .reviewWrap .reveiwTextWrap .balloonTail { top : unset; bottom : 99%; right : 50%; transform : translateX(50%) rotate(90deg);} [data-list-box] .reviewWrap .infoWrap { flex-direction : column; align-items : flex-start; justify-content : flex-start; gap : 0.5em;} } @media(max-width : 640px) { /* A A A : A : A : A : */ #review_list .first form { width : 95%;} [data-list-box] { padding : 0em 2em 1.5em;} [data-list-box].detail { width : 90%;} [data-list-box].detail .back { border-radius : 17px;} [data-list-box].detail .reviewWrap .reveiwTextWrap .overflowWrap::-webkit-scrollbar { width : 5px; height : 5px; } }