/* * Jellymiind Combined Stylesheet * Order: jellyStyle.css -> boardStyle.2.1.css -> imgPopupStyle.css * Notes: Exact duplicate rule blocks across files were removed to reduce size. * Conflicting selectors kept in cascade order (later overrides earlier). */ @import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css'); @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap'); @import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700i&display=swap'); /* 나눔스퀘어 */ /* notosans */ /* SCDream */ @font-face { font-family : "SCDream1"; src:url("/css/fonts/S-Core_Dream_OTF/SCDream1.otf"); } @font-face { font-family : "SCDream2"; src:url("/css/fonts/S-Core_Dream_OTF/SCDream2.otf"); } @font-face { font-family : "SCDream3"; src:url("/css/fonts/S-Core_Dream_OTF/SCDream3.otf"); } @font-face { font-family : "SCDream4"; src:url("/css/fonts/S-Core_Dream_OTF/SCDream4.otf"); } @font-face { font-family : "SCDream5"; src:url("/css/fonts/S-Core_Dream_OTF/SCDream5.otf"); } @font-face { font-family : "SCDream6"; src:url("/css/fonts/S-Core_Dream_OTF/SCDream6.otf"); } @font-face { font-family : "SCDream7"; src:url("/css/fonts/S-Core_Dream_OTF/SCDream7.otf"); } @font-face { font-family : "SCDream8"; src:url("/css/fonts/S-Core_Dream_OTF/SCDream8.otf"); } @font-face { font-family : "SCDream9"; src:url("/css/fonts/S-Core_Dream_OTF/SCDream9.otf"); } :root{ --themeColor: rgba(99,98,231,0.70); --themeHoverColor: rgba(99,98,231,0.90); --themeColorDk: #777; --themeHoverColorDk: #999; --bgColor: rgba(99,98,231,0.10); --bgHoverColor: rgba(99,98,231,0.20); --bgColorDk: #1e1f21; --bgHoverColorDk: #1e1f21; --shadowColor: rgba(99,98,231,0.20); --shadowColorDk: rgba(0,0,0,0.20); --pointColor: #39cc45; --pointHoverColor: #32e040; --pointColorDk: #30a73a; --pointHoverColorDk: #34be4b; --pointBlue: #0d6efd; --leftMenuWidth: 220px; --rightPopWidth: 34%; } * {box-sizing:border-box; padding:0; margin:0;} body {padding:0; margin:0; width:100%; font-family:'Noto Sans KR',sans-serif; transition:all 0.2s;} body.dark {color:#d9d9d9; background-color:var(--bgColorDk);} div, ul, li, p, span, a, input, select {box-sizing:border-box; margin:0; padding:0; text-decoration:none; list-style:none; color:inherit;} input[type="checkbox"], input[type="radio"] {accent-color:var(--themeColor);} textarea {box-sizing:border-box; font-family:'Noto Sans KR',sans-serif; min-height:80px; vertical-align:middle;} .clearbox {display:block; clear:both; content:"";} .inlineBlock {display:inline-block;} @media screen and (max-width:600px) { .onlyweb {display:none;} } @media screen and (min-width:601px) { .onlymob {display:none;} } /*-------------------------------------- SCROLL */ ::-webkit-scrollbar {background-color:transparent; width:14px; height:14px;} ::-webkit-scrollbar-thumb {background-clip:padding-box; background-color:rgba(0,0,0,0.2); border:2px solid transparent; border-radius:7px; transition:all 0.2s;} ::-webkit-scrollbar-thumb:hover {background-color:rgba(0,0,0,0.4);} ::-webkit-scrollbar-track {background-color:transparent;} @media screen and (max-width:600px) { ::-webkit-scrollbar {width:10px; height:10px;} } .dark::-webkit-scrollbar-thumb, .dark ::-webkit-scrollbar-thumb {background-color:rgba(0,0,0,0.6);} .dark::-webkit-scrollbar-thumb:hover, .dark ::-webkit-scrollbar-thumb:hover {background-color:rgba(0,0,0,1.0);} /*-------------------------------------- SCROLL */ /*-------------------------------------- POPUP START */ #popup_box {display:none; position:fixed; width:100%; height:100%; z-index:11;} #popup_box.up {display:block;} #popup_box .popup_bg {width:100%; height:100%; opacity:0.6; background-color:#000;} #popup_box .contents_box {position:absolute; top:0px; left:0px; width:100%; height:100%;} #upload_popup_box {display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999;} #upload_popup_box.up {display:block;} #upload_popup_box .popup_bg {width:100%; height:100%; background-image:linear-gradient(to top, rgba(255,255,2550,0.8), rgba(255,255,255,0.4));} #upload_popup_box .contents_box {position:absolute; top:0px; left:0px; width:100%; height:100%;} .dark #upload_popup_box .popup_bg {background-image:linear-gradient(to top, rgba(0,0,0,1.0), rgba(0,0,0,0.4));} /*---------------------------- LOGIN START */ #popup_box .contents_box .login_box {box-sizing:border-box; position:relative; margin:0 auto; top:10%; width:100%; max-width:500px; min-width:240px; height:80%; min-height:400px; border-radius:20px; border:1px solid #000; background-color:rgba(255,255,255,0.8); background-image:linear-gradient(to top, rgba(255,255,255,1.0), rgba(255,255,255,0.0)); color:#000; overflow-y:auto;} .title_box {position:relative; width:100%; height:50px; line-height:50px; text-align:center; font-size:16px; font-weight:bold;} .title_box .title {} .title_box .close {position:absolute; top:0px; right:0px; padding:0px 20px; cursor:pointer;} #popup_box .info_box {display:table; position:relative; width:100%; min-width:160px; height:calc(100% - 50px); min-height:400px; text-align:center;} #popup_box .info_box .center_box {display:table-cell; width:100%; height:100%; vertical-align:middle;} #popup_box .info_box .center_box .input_box {position:relative; margin:0 auto 10px; width:80%; color:#000;} #popup_box .info_box .center_box .input_box input {float:right; padding:0 10px; background-color:transparent; border-radius:4px;} @media screen and (max-width:600px) { #popup_box .contents_box .login_box {width:94%;} #popup_box .info_box .center_box .input_box {position:relative; padding:0 20px; width:100%; min-height:60px; color:#000;} #popup_box .info_box .center_box .input_box ul {float:left; width:100%; height:30px; clear:both;} #popup_box .info_box .center_box .input_box ul li {display:block; height:30px; line-height:30px; text-align:left;} #popup_box .info_box .center_box .input_box ul li:nth-child(1) {width:100%;} #popup_box .info_box .center_box .input_box ul li:nth-child(2) {display:none;} #popup_box .info_box .center_box .input_box input {width:100%; height:30px; line-height:30px; border:1px solid #000;} #popup_box .info_box .input_box .cnfmtxt {float:left; position:relative; width:100%; height:22px; font-size:12px; color:var(--pointBlue);} } @media screen and (min-width:601px) { #popup_box .contents_box .login_box {width:80%;} #popup_box .info_box .center_box .input_box {position:relative; width:80%; min-height:30px; color:#000; clear:both;} #popup_box .info_box .center_box .input_box:last-child {margin:0 auto;} #popup_box .info_box .center_box .input_box ul {float:left; width:34%; height:30px;} #popup_box .info_box .center_box .input_box ul li {display:block; height:30px; line-height:30px; text-align:left;} #popup_box .info_box .center_box .input_box ul li:nth-child(1) {float:left; box-sizing:border-box; width:calc(100% - 20px);} #popup_box .info_box .center_box .input_box ul li:nth-child(2) {float:right; width:20px;} #popup_box .info_box .center_box .input_box input {width:66%; height:30px; line-height:30px; border:1px solid #000;} #popup_box .info_box .center_box .input_box .cnfmtxt {float:left; position:relative; width:100%; height:22px; font-size:12px; color:var(--pointBlue);} } #popup_box .info_box .join_btn {border:1px solid var(--pointBlue); transition:all 0.2s;} #popup_box .info_box .join_btn:hover {border:1px solid #0062cc;} #popup_box .info_box .input_box ul li:nth-child(2):after {clear:both;} #popup_box .info_box .input_box .login_btn {box-sizing:border-box; margin-bottom:10px; width:100%; height:30px; color:#fff; background-color:var(--themeColor); border-radius:4px; cursor:pointer;} #popup_box .info_box .input_box .login_btn:hover {background-color:var(--themeHoverColor);} #popup_box .info_box .input_box .join_btn {box-sizing:border-box; width:100%; height:30px; font-weight:600; color:var(--themeColor); background-color:#fff; border:1px solid var(--themeColor); border-radius:4px; cursor:pointer;} #popup_box .info_box .input_box .join_btn:hover {color:var(--themeHoverColor); border:1px solid var(--themeHoverColor);} .dark #popup_box .contents_box .login_box {border:1px solid #777; background-color:rgba(0,0,0,0.8); background-image:linear-gradient(to top, rgba(0,0,0,1.0), rgba(0,0,0,0.0)); color:#777;} .dark #popup_box .info_box .center_box .input_box {color:#777;} .dark #popup_box .info_box .center_box .input_box input {border:1px solid #777;} .dark #popup_box .info_box .center_box .input_box .login_btn {color:#000; background-color:#777; border:1px solid #000;} .dark #popup_box .info_box .center_box .input_box .login_btn:hover {background-color:#ccc;} .dark #popup_box .info_box .input_box .join_btn {color:#000; background-color:#444; border:1px solid #000;} .dark #popup_box .info_box .input_box .join_btn:hover {background-color:#777;} /*---------------------------- LOGIN END */ /*-------------------------------------- POPUP END */ #header_box {position:fixed; box-sizing:border-box; padding:0 10px; top:0; width:100%; font-size:14px; background-color:#fff; z-index:10; transition:all 0.4s;} #header_box.hide {opacity:0; box-shadow:0 0 10px 0 rgba(0,0,0,0.4);} #header_box.hide:hover {padding:5px 10px; opacity:1;} #header_box:after {display:block; clear:both; content:"";} #header_box .leftBox {float:left; padding:10px 0;} #header_box .leftBox > a:hover {background-color:rgba(0,0,0,0.06);} #header_box .leftBox .u_photo {display:inline-block; margin-right:4px; padding:15px; border-radius:15px; vertical-align:middle;} #header_box .leftBox .showLeftBarBtn {margin-left:2px; padding:0 4px; cursor:pointer;} #header_box .leftBox .showLeftBarBtn:hover {background-color:rgba(0,0,0,0.06);} #header_box .rightBox {float:right; position:relative; padding:10px 0;} #header_box .rightBox > span, #header_box .rightBox > a > span {display:inline-block; padding:4px 8px; border-radius:4px;} #header_box .rightBox > span:hover, #header_box .rightBox > a > span:hover {background-color:rgba(0,0,0,0.06);} #header_box .rightBox .topGuide {padding:4px 8px; color:#fff; background-image:linear-gradient(135deg, #ABF200, #00f26d); transition:background 0.2s;} #header_box .rightBox .topGuide:hover {background-image:linear-gradient(135deg, #59f200, #00e9af);} #header_box .rightBox i {vertical-align:middle;} #header_box .rightBox .u_photo {box-sizing:border-box; display:inline-block; padding:14px; border:1px solid #000; border-radius:15px; vertical-align:middle;} @media screen and (max-width:600px) { #header_box .rightBox .topMiniID {display:none;} } .dark #header_box {background-color:#1e1f21; color:#d9d9d9;} .dark #header_box .leftBox > a:hover, .dark #header_box .leftBox .showLeftBarBtn:hover {background-color:rgba(255,255,255,0.1);} .dark #header_box .rightBox > span:hover, .dark #header_box .rightBox > a > span:hover {background-color:rgba(255,255,255,0.1);} #header_box .rightBox .topMiniPop {display:none; position:absolute; top:46px; right:0; min-width:114px; background-color:rgba(0,0,0,0.8); border-radius:4px; box-shadow:2px 2px 10px 0 rgba(0,0,0,0.2); z-index:10;} #header_box .rightBox .topMiniPop.active {display:block;} #header_box .rightBox .topMiniPop ul {width:100%;} #header_box .rightBox .topMiniPop ul li {padding:6px 8px; width:100%; color:#fff;} #header_box .rightBox .topMiniPop ul li:hover {background-color:rgba(0,0,0,1);} #header_box .rightBox .topMiniPop ul li a {display:block; width:100%;} #header_box .openHeader {box-sizing:border-box; display:block; position:fixed; padding:17px 10px 7px; top:0; left:0; line-height:14px; color:#fff; background-color:rebeccapurple; border-radius:0 0 8px 0; box-shadow:2px 2px 10px 0 rgba(0,0,0,0.4); opacity:0; cursor:pointer; z-index:-1; transition:all 0.4s;} #header_box .openHeader:hover {opacity:1;} .head_back {width:100%; height:50px;} .head_back.hide {display:none;} #allBody {position:relative; width:100%; height:calc(100vh - 100px); overflow-x:hidden; overflow-y:auto; transition:all 0.2s;} #allBody:after {display:block; clear:both; content:"";} #footer_box {position:fixed; box-sizing:border-box; bottom:0; padding:0 10px; width:100%; height:50px; text-align:center; background-color:#fff; z-index:1; transition:all 0.4s;} #footer_box.hide {opacity:0; box-shadow:0 0 10px 0 rgba(0,0,0,0.4);} #footer_box.hide:hover {opacity:1;} #footer_box:after {display:block; clear:both; content:"";} #footer_box .btnSpace {display:inline-block; padding:2px; text-align:center; border:1px solid #444; border-radius:20px; cursor:pointer;} #footer_box .btnSpace:hover {background-color:rgba(0,0,0,0.06);} #footer_box .btnSpace .btn {display:inline-block; width:24px; height:24px; text-align:center; background-color:rgba(0,0,0,0.06); border-radius:20px;} #footer_box .btnSpace:hover .btn {background-color:rgba(0,0,0,0.12);} #footer_box .btnSpace .txt {padding-right:4px; font-size:14px;} #footer_box .openFooter {box-sizing:border-box; display:block; position:fixed; padding:7px 10px 17px; bottom:0; left:0; line-height:14px; font-size:14px; color:#fff; background-color:rebeccapurple; border-radius:0 8px 0 0; box-shadow:2px -2px 10px 0 rgba(0,0,0,0.4); opacity:0; cursor:pointer; z-index:1; transition:all 0.4s;} #footer_box .openFooter:hover {opacity:1;} .foot_back {position:relative; width:100%; height:50px;} .foot_back.hide {display:none;} #footer_box .jellysInfoBox .leftBox {float:left; display:inline-block; padding:10px 0; text-align:left;} #footer_box .jellysInfoBox .centerBox {display:inline-block; padding:10px 0; text-align:center;} #footer_box .jellysInfoBox .rightBox {float:right; display:inline-block; padding:10px 0; text-align:right;} #footer_box .jellysInfoBox .rightBox .darkMode {float:left; text-align:center; font-size:19px;} #footer_box .jellysInfoBox .darkMode .sun, #footer_box .jellysInfoBox .darkMode .moon {box-sizing:border-box; display:inline-block; width:26px; height:26px; border-radius:12px; cursor:pointer;} #footer_box .jellysInfoBox .darkMode .sun {color:#000;} #footer_box .jellysInfoBox .darkMode .moon {color:rgba(0,0,0,0.06);} #footer_box .jellysInfoBox .darkMode .sun:hover {color:#FBAD84;} #footer_box .jellysInfoBox .darkMode .moon:hover {color:#C8F363;} .dark #footer_box {background-color:#1e1f21; color:#d9d9d9;} .dark #footer_box .btnSpace {background-color:rgba(0,0,0,0.4); border:1px solid #000;} .dark #footer_box .darkMode .sun {color:#1e1f21;} .dark #footer_box .darkMode .sun:hover {color:#FBAD84;} .dark #footer_box .darkMode .moon {color:#d9d9d9;} #rightMiniPop {display:none; position:absolute; top:0; left:0; min-width:200px; color:#fff; background-color:rgba(0,0,0,0.8); box-shadow:2px 2px 10px rgba(0,0,0,0.4); z-index:100;} #rightMiniPop ul {width:100%;} #rightMiniPop ul li {padding:10px; width:100%; font-size:14px;} #rightMiniPop ul li:hover {background-color:rgba(0,0,0,1);} #magicPop {display:none; position:fixed; bottom:60px; right:10px; padding:8px; width:calc(100% - 20px); max-width:600px; font-size:14px; background-color:#fff; border-radius:23px; box-shadow:2px 2px 16px 0 rgba(0,0,0,0.3), 14px 14px 42px rgba(0,0,0,0.2); z-index:1000;} #magicPop.active {display:block;} #magicPop:after {display:block; clear:both; content:"";} #magicPop #magicPopPlus {float:left; display:inline-block; padding:4px; width:30px; height:30px; text-align:center; background-color:#eee; border-radius:15px; cursor:pointer;} #magicPop #magicPopPlus:hover {background-color:#ccc;} #magicPop #magicPopInp {float:left; margin:0 8px; padding:4px; width:calc(100% - 106px); height:30px; background-color:transparent; border:none; border-radius:15px;} #magicPop #magicPopBtn {float:left; display:inline-block; padding:4px; width:60px; height:30px; text-align:center; background-color:#eee; border-radius:15px; cursor:pointer;} #magicPop #magicPopBtn:hover {background-color:#ccc;} .dark #magicPop {background-color:#000;} .dark #magicPop #magicPopPlus {background-color:#222;} .dark #magicPop #magicPopPlus:hover {background-color:#444;} .dark #magicPop #magicPopBtn {background-color:#222;} .dark #magicPop #magicPopBtn:hover {background-color:#444;} /**** 갤러리 영역 ****/ ul.galleryList {position:relative; width:100%; border-radius:10px;} ul.galleryList.defaultBG {} ul.galleryList {transition-property:background; transition-duration:0.2s; transition-delay:0.0s;} ul.galleryList.loading {background-image:repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(255, 255, 255, 0.6) 20px, rgba(255, 255, 255, 0.6) 40px);} ul.galleryList > li {position:relative; padding:20px; min-height:100px; text-align:center; border-radius:26px; overflow:hidden; transition-property:padding,opacity; transition-duration:0.2s,0.2s;} ul.galleryList.loading > li {opacity:0; transition-duration:0.2s,0.0s;} ul.galleryList.padding0 > li {padding:0; border-radius:0;} ul.galleryList.padding10 > li {padding:10px; border-radius:24px;} ul.galleryList.padding20 > li {padding:20px; border-radius:26px;} ul.galleryList.padding30 > li {padding:30px; border-radius:38px;} ul.galleryList > li:has(.groupBox) {position:relative; margin:0; padding:0; transition:margin 0s;} ul.galleryList li .numberBox {position:absolute; top:14px; left:calc(50% - 32px); padding:0 6px; min-width:54px; font-size:14px; background-color:rgba(255,255,255,0.2); border-radius:16px; z-index:1; transition-property:top,left; transition-duration:0.2s;} ul.galleryList li .groupBox {display:block; width:100%; height:100%; min-height:80px;} ul.galleryList li .groupBox ul {display:block; position:relative; width:100%; height:100%;} ul.galleryList li .groupBox ul:after {display:block; clear:both; content:"";} ul.galleryList li .groupBox ul li {float:left; position:relative; padding:20px; width:100%; height:100%; transition:padding 0.2s;} ul.galleryList.padding0 li .groupBox ul li {padding:0; border-radius:0;} ul.galleryList.padding10 li .groupBox ul li {padding:10px;} ul.galleryList.padding20 li .groupBox ul li {padding:20px;} ul.galleryList.padding30 li .groupBox ul li {padding:30px;} ul.galleryList li .directL, ul.galleryList li .directR {position:absolute; top:calc(50% - 19px); line-height:22px; padding:4px 14px 12px; font-size:30px; font-weight:bold; background-color:rgba(255,255,255,0.2); border-radius:20px; cursor:pointer; box-shadow:2px 2px 4px 0 rgba(0,0,0,0.0);} ul.galleryList li .directL:hover, ul.galleryList li .directR:hover {background-color:rgba(255,255,255,0.8); box-shadow:2px 2px 4px 0 rgba(0,0,0,0.4);} ul.galleryList li .directL {left:4px;} ul.galleryList li .directR {right:4px;} ul.galleryList li .srcBox {display:block; position:relative; top:0; width:100%; height:100%; min-height:80px; border-radius:16px; background-color:rgba(0,0,0,0.04); background-repeat:no-repeat; background-position:center; opacity:1; cursor:pointer; transition:all 0.6s;} ul.galleryList.padding0 li .srcBox {border-radius:0;} ul.galleryList li .srcHoverBox {position:absolute; display:block; top:-40px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center; opacity:0; cursor:pointer; transition:0.6s;} ul.galleryList li .srcBox.soso {background-size:auto;} /***** 혼합형 소스 프리뷰 *****/ ul.galleryList li .mx_Preview {position:absolute; inset:0; overflow:hidden;} ul.galleryList li .mx_Preview .mx_Canvas {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);} ul.galleryList li .mx_Preview .mx_Canvas.portrait {width:100%; height:auto;} ul.galleryList li .mx_Preview .mx_Canvas.landscape {height:100%; width:auto;} ul.galleryList li .miniMark {display:none; position:absolute; top:20px; left:20px; width:calc(100% - 40px); height:calc(100% - 40px); font-size:13px; border:8px solid #fff; border-radius:14px; background-image:linear-gradient(0deg, rgba(255,255,255,0.6), rgba(255,255,255,0.0)); box-shadow:4px 4px 8px 0 var(--shadowColor); z-index:2;} ul.galleryList li .miniMark.active {display:block;} ul.galleryList li .miniMark:hover {background-image:linear-gradient(0deg, rgba(255,255,255,0.2), rgba(255,255,255,0.2));} ul.galleryList li .miniMark .miniTit {width:100%; text-align:left; background-color:#fff;} ul.galleryList li .miniMark .miniTit:after {display:block; clear:both; content:"";} ul.galleryList li .miniMark .miniTit .miniBtnArea {float:right; display:inline-block; margin:0; padding:0; vertical-align:middle;} ul.galleryList li .miniMark .miniTit .miniBtnArea .btn {display:inline-block; padding:3px; text-align:center; border-radius:16px; vertical-align:middle; cursor:pointer;} ul.galleryList li .miniMark .miniTit .miniBtnArea .btn.closeBtn:hover {color:red;} ul.galleryList li .miniMark .miniCon {width:100%; height:calc(100% - 70px); background-image:linear-gradient(0deg, transparent 0%, transparent 100%); border-radius:0 0 10px 10px; overflow-y:auto; transition-property:background; transition-duration:0.2s; transition-delay:0.2s;} ul.galleryList li .miniMark:hover .miniCon {background-image:linear-gradient(0deg, rgba(255,255,255,0.4) 0%, transparent 40%), linear-gradient(0deg, var(--bgColor) 0%, transparent 40%);} ul.galleryList li .miniMark .btw {margin:4px auto; width:100%; max-width:64px; height:4px; background-color:rgba(255,255,255,0.4); border-radius:4px;} ul.galleryList li .miniMark .miniEnt {padding-bottom:4px; width:100%;} ul.galleryList li .miniMark .miniEnt .enterBalloon {display:inline-block; padding:4px 10px; background-color:rgba(255,255,255,1.0); border:1px solid #000; border-radius:14px 0 14px 14px; cursor:pointer;} ul.galleryList li .miniMark .miniEnt .enterBalloon:hover {color:#fff; background-color:#000;} ul.galleryList li .miniMark .miniEnt .enterBalloon.active {color:#fff; background-color:#000;} ul.galleryList li .miniChat {display:none; position:absolute; top:20px; right:20px; width:calc(100% - 40px); height:calc(100% - 40px); font-size:13px; border:8px solid #fff; border-radius:14px; background-image:linear-gradient(0deg, rgba(255,255,255,0.6), rgba(255,255,255,0.0)); box-shadow:4px 4px 8px 0 var(--shadowColor); z-index:2;} ul.galleryList li .miniChat.active {display:block;} ul.galleryList li .miniChat:hover {background-image:linear-gradient(0deg, rgba(255,255,255,0.2), rgba(255,255,255,0.2));} ul.galleryList li .miniChat .miniTit {width:100%; text-align:left; background-color:#fff;} ul.galleryList li .miniChat .miniTit:after {display:block; clear:both; content:"";} ul.galleryList li .miniChat .miniTit .miniBtnArea {float:right; display:inline-block; margin:0; padding:0; vertical-align:middle;} ul.galleryList li .miniChat .miniTit .miniBtnArea .btn {display:inline-block; padding:3px; text-align:center; border-radius:16px; vertical-align:middle; cursor:pointer;} ul.galleryList li .miniChat .miniTit .miniBtnArea .btn.closeBtn:hover {color:red;} ul.galleryList li .miniChat .miniCon {width:100%; height:calc(100% - 70px); background-image:linear-gradient(0deg, transparent 0%, transparent 100%); border-radius:0 0 10px 10px; overflow-y:auto; transition-property:background; transition-duration:0.2s; transition-delay:0.2s;} ul.galleryList li .miniChat:hover .miniCon {background-image:linear-gradient(0deg, rgba(255,255,255,0.4) 0%, transparent 40%), linear-gradient(0deg, var(--bgColor) 0%, transparent 40%);} ul.galleryList li .miniChat .miniCon::-webkit-scrollbar {display:none;} ul.galleryList li .miniChat .btw {margin:4px auto; width:100%; max-width:64px; height:4px; background-color:rgba(255,255,255,0.4); border-radius:4px;} ul.galleryList li .miniChat .miniEnt {padding-bottom:4px; width:100%;} ul.galleryList li .miniChat .miniEnt .enterBalloon {display:inline-block; padding:4px 10px; background-color:rgba(255,255,255,1.0); border:1px solid #000; border-radius:14px 0 14px 14px; cursor:pointer;} ul.galleryList li .miniChat .miniEnt .enterBalloon:hover {color:#fff; background-color:#000;} ul.galleryList li .miniChat .miniEnt .enterBalloon.active {color:#fff; background-color:#000;} ul.galleryList li .txtBox {position:absolute; bottom:-40px; left:0px; padding:20px 10px 10px; width:100%; line-height:inherit; text-align:left; font-size:14px; opacity:0; transition-property:bottom, left, opacity, width; transition-duration:0.4s, 0.4s, 0.4s, 0.2s; transition-delay:0.0s;} ul.galleryList li:not(.over):hover .txtBox {background:linear-gradient(to top, rgba(255,255,255,1.0), rgba(255, 255, 255,0.0));} /** 미니챗영역 **/ ul.galleryList li .minCha {width:100%; padding:4px;} ul.galleryList li .minCha:after {display:block; clear:both; content:"";} ul.galleryList li .minCha li {display:block; margin-bottom:4px; padding:0; width:100%;} ul.galleryList li .groupBox ul.minCha li {height:auto;} ul.galleryList.padding0 li .groupBox ul li .minCha li {padding:0;} ul.galleryList.padding10 li .groupBox ul li .minCha li {padding:0;} ul.galleryList.padding20 li .groupBox ul li .minCha li {padding:0;} ul.galleryList.padding30 li .groupBox ul li .minCha li {padding:0;} ul.galleryList li .minCha li:after {display:block; clear:both; content:"";} ul.galleryList li .minCha li .oneChat {display:block; position:relative;} ul.galleryList li .minCha li .oneChat.you {text-align:left;} ul.galleryList li .minCha li .oneChat.me {text-align:right;} ul.galleryList li .minCha li .oneChat .chatUser {float:left; width:100%;} ul.galleryList li .minCha li .oneChat .chatUser a {display:inline-block; padding:2px 0; transition:padding 0.2s;} ul.galleryList li .minCha li .oneChat .chatUser a:hover {padding:2px; background-color:#eee; border-radius:16px;} ul.galleryList li .minCha li .oneChat .chatUser .chatFace {display:inline-block; padding:4px; width:20px; height:20px; text-align:center; background-color:#eee; border-radius:10px; vertical-align:middle;} ul.galleryList li .minCha li .oneChat .chatUser .chatFace i {font-size:10px; color:#444;} ul.galleryList li .minCha li .oneChat .chatUser i {font-size:8px; color:var(--pointBlue); vertical-align:text-top;} ul.galleryList li .minCha li .oneChat .chatBalloon {display:inline-block; padding:4px 10px; background-color:rgba(255,255,255,1.0); border:1px solid #000; white-space:pre-wrap; word-break:break-word;} ul.galleryList li .minCha li .oneChat.you .chatBalloon {float:left; border-radius:0 14px 14px 14px;} ul.galleryList li .minCha li .oneChat.me .chatBalloon {float:right; border-radius:14px 0 14px 14px;} ul.galleryList li .minCha li .oneChat.hide .chatBalloon {color:#ccc; background-color:#eee;} ul.galleryList li .minCha li .oneChat .chatCtrlBox {display:none; position:absolute; top:2px; left:2px; padding:2px; background-color:rgba(255,255,255,1.0); border-radius:16px; box-shadow:2px 2px 6px 0 rgba(0,0,0,0.2); vertical-align:middle;} ul.galleryList li .minCha li .oneChat .chatCtrlBox.active {display:inline-block;} ul.galleryList li .minCha li .oneChat .chatCtrlBox .chatCtrlBtn {display:inline-block; margin-right:2px; padding:3px; width:25px; text-align:center; color:#222; background-color:var(--bgColor); border-radius:16px; vertical-align:middle; cursor:pointer;} ul.galleryList li .minCha li .oneChat .chatCtrlBox .chatCtrlBtn:last-child {margin-right:0;} ul.galleryList li .minCha li .oneChat .chatCtrlBox .chatCtrlBtn:hover {color:#000; background-color:var(--bgHoverColor);} ul.galleryList li .minCha li .oneChat .chatCtrlBox .chatCtrlBtn.delBtn:hover {color:red;} ul.galleryList li .minCha li .oneChat .chatreg {display:inline-block; position:relative; bottom:-4px; padding:4px; font-size:12px; color:#999;} ul.galleryList li .minCha li .oneChat.you .chatreg {float:left;} ul.galleryList li .minCha li .oneChat.me .chatreg {float:right;} .dark ul.galleryList li .miniMark {border:8px solid #000; border-radius:16px; background-image:linear-gradient(0deg, rgba(0,0,0,0.4), rgba(0,0,0,0.0)); box-shadow:4px 4px 8px 0 var(--shadowColorDk);} .dark ul.galleryList li .miniMark:hover {background-image:linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1));} .dark ul.galleryList li .miniMark .miniTit {color:#fff; background-color:#000;} .dark ul.galleryList li .miniMark:hover .miniCon {background-image:linear-gradient(0deg, rgba(0,0,0,0.4) 0%, transparent 40%);} .dark ul.galleryList li .miniMark .btw {background-color:rgba(0,0,0,0.4);} .dark ul.galleryList li .miniMark .miniEnt .enterBalloon {color:#fff; background-color:rgba(0,0,0,1.0); border:1px solid #000;} .dark ul.galleryList li .miniMark .miniEnt .enterBalloon:hover {background-color:#222;} .dark ul.galleryList li .miniMark .miniEnt .enterBalloon.active {background-color:#222;} .dark ul.galleryList li .miniChat {border:8px solid #000; border-radius:16px; background-image:linear-gradient(0deg, rgba(0,0,0,0.4), rgba(0,0,0,0.0)); box-shadow:4px 4px 8px 0 var(--shadowColorDk);} .dark ul.galleryList li .miniChat:hover {background-image:linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1));} .dark ul.galleryList li .miniChat .miniTit {color:#fff; background-color:#000;} .dark ul.galleryList li .miniChat:hover .miniCon {background-image:linear-gradient(0deg, rgba(0,0,0,0.4) 0%, transparent 40%);} .dark ul.galleryList li .miniChat .btw {background-color:rgba(0,0,0,0.4);} .dark ul.galleryList li .miniChat .miniEnt .enterBalloon {color:#fff; background-color:rgba(0,0,0,1.0); border:1px solid #000;} .dark ul.galleryList li .miniChat .miniEnt .enterBalloon:hover {background-color:#222;} .dark ul.galleryList li .miniChat .miniEnt .enterBalloon.active {background-color:#222;} .dark ul.galleryList li .minCha li .oneChat .chatUser {color:#777;} .dark ul.galleryList li .minCha li .oneChat .chatUser a:hover {color:#ccc; background-color:#000;} .dark ul.galleryList li .minCha li .oneChat .chatBalloon {color:#ccc; background-color:rgba(0,0,0,1.0); border:1px solid #444;} .dark ul.galleryList li .minCha li .oneChat .chatCtrlBox {background-color:rgba(0,0,0,1.0);} .dark ul.galleryList li .minCha li .oneChat .chatCtrlBox .chatCtrlBtn {color:#d9d9d9; background-color:#222;} .dark ul.galleryList li .minCha li .oneChat .chatCtrlBox .chatCtrlBtn:hover {color:#d9d9d9; background-color:#444;} .dark ul.galleryList li .minCha li .oneChat .chatCtrlBox .chatCtrlBtn.delBtn:hover {color:red;} /***** li => hover *****/ @media (min-width:601px){ /** 100px기준 */ ul.galleryList > li:hover {padding:0; background-image:repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(255, 255, 255, 0.6) 20px, rgba(255, 255, 255, 0.6) 40px); border-radius:0; box-shadow:4px 4px 8px 0 var(--shadowColor);} ul.galleryList > li:has(.groupBox):hover {margin:0; padding:0; transition:margin 0s;} ul.galleryList li:hover .numberBox {top:4px;} ul.galleryList li:hover .srcBox {top:40px; border-radius:0; opacity:0;} ul.galleryList li:hover .srcHoverBox {top:0; opacity:1;} ul.galleryList li:hover .srcHoverBox.soso {background-size:auto;} ul.galleryList li:not(:has(.miniMark.active, .miniChat.active)):hover .txtBox {bottom:0; left:0; opacity:1; transition-delay:0.2s;} ul.galleryList li:not(:has(.miniMark.active, .miniChat.active)) .txtBox.show {bottom:0; width:calc(100% - 20px); opacity:1; transition-delay:0.0s;} ul.galleryList li:not(:has(.miniMark.active, .miniChat.active)):hover .txtBox.show {bottom:0; width:100%; opacity:1; transition-delay:0.0s;} } /***** li => over *****/ ul.galleryList li.over {padding:0;} ul.galleryList li.over:not(:has(.miniMark.active, .miniChat.active)) {background-image:repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(255, 255, 255, 0.6) 20px, rgba(255, 255, 255, 0.6) 40px); box-shadow:4px 4px 8px 0 var(--shadowColor);} ul.galleryList li:has(li.over) {box-shadow:4px 4px 8px 0 var(--shadowColor);} .dark ul.galleryList li.over {box-shadow:4px 4px 8px 0 var(--shadowColorDk);} .dark ul.galleryList li:has(li.over) {box-shadow:4px 4px 8px 0 var(--shadowColorDk);} ul.galleryList.padding0 > li.over {border-radius:0;} /** ul.galleryList.padding10 > li.over {border-radius:0;} ul.galleryList.padding20 > li.over {border-radius:0;} ul.galleryList.padding30 > li.over {border-radius:0;} **/ ul.galleryList > li:has(.groupBox).over {margin:0; padding:0; transition:margin 0s;} ul.galleryList li.over:not(:has(.miniMark.active, .miniChat.active)) .srcBox {top:40px; border-radius:0; opacity:0;} ul.galleryList li.over:not(:has(.miniMark.active, .miniChat.active)) .srcHoverBox {top:0; opacity:1;} ul.galleryList li.over .srcHoverBox.soso {background-size:auto;} ul.galleryList li.over:not(:has(.miniMark.active, .miniChat.active)) .txtBox {bottom:0; left:0; opacity:1; transition-delay:0.2s;} ul.galleryList li.over:not(:has(.miniMark.active, .miniChat.active)) .txtBox.show {bottom:0; width:100%; opacity:1; transition-delay:0.0s;} ul.galleryList li .txtBox .snsBox {position:relative; margin-bottom:2px; width:100%;} ul.galleryList li .txtBox .snsBox:after {display:block; clear:both; content:"";} ul.galleryList li .txtBox .snsBox .btn {float:left; display:inline-block; position:relative; margin-right:2px; width:24px; height:24px; text-align:center; background-color:rgba(255,255,255,1.0); border-radius:20px; vertical-align:middle; cursor:pointer;} ul.galleryList li .txtBox .snsBox .btn.srcLikeBtn {padding:2px;} ul.galleryList li .txtBox .snsBox .btn.srcMarkBtn {padding:1px 2px;} ul.galleryList li .txtBox .snsBox .btn.srcChatBtn {padding:2px;} ul.galleryList li .txtBox .snsBox .btn.srcLikeBtn .likeAction {display:inline-block; position:absolute; bottom:20px; left:0; padding:4px 8px; min-width:61px; font-weight:bold; color:#000; background-color:var(--pointColor); border-radius:20px;} ul.galleryList li .txtBox .snsBox .btn.srcMarkBtn .markAction {display:inline-block; position:absolute; bottom:20px; left:0; padding:4px 8px; min-width:66px; font-weight:bold; color:#000; background-color:var(--pointColor); border-radius:20px;} /***** ***** ellipsisBtn *****/ ul.galleryList li .txtBox .snsBox .ellipsisBtn {float:right; margin-right:0; padding:2px; border-radius:20px; cursor:pointer; z-index:1;} ul.galleryList li .txtBox .snsBox .menuBox {display:none; position:absolute; bottom:20px; right:0; padding:0; min-width:100px; color:#444; background-color:rgba(255,255,255,1.0); border-radius:4px; box-shadow:2px 2px 10px 0 rgba(0,0,0,0.2); z-index:1;} ul.galleryList li .txtBox .snsBox .menuBox.active {display:block;} ul.galleryList li .txtBox .snsBox .menuBox:after {display:block; clear:both; content:"";} ul.galleryList li .txtBox .snsBox .menuBox span {display:block; padding:4px; text-align:left; font-size:12px; font-weight:bold; border-radius:4px; vertical-align:middle; cursor:pointer;} ul.galleryList li .txtBox .snsBox .menuBox span:hover {color:#000; background-color:rgba(255,255,255,1.0);} ul.galleryList li .txtBox .snsBox .menuBox span i {font-size:14px;} /***** ***** ellipsisBtn *****/ ul.galleryList li .txtBox .snsBox .btn:hover {color:#fff; background-color:rgba(0,0,0,1.0);} ul.galleryList li .txtBox .snsBox .btn.active i {font-weight:bold;} /***** li => over *****/ ul.galleryList li .txtBox .fileName {display:inline-block; margin-bottom:1px; padding:0 4px; font-weight:bold; color:#000; background-color:rgba(255,255,255,1.0); border-radius:10px; transition:padding 0.2s;} ul.galleryList li .txtBox .fileName:hover {padding:0 8px; color:#fff; background-color:rgba(0,0,0,1.0);} ul.galleryList li .txtBox .categoryName {font-size:13px; font-weight:bold; background-color:rgba(255,255,255,1.0); border-radius:10px;} ul.galleryList li .txtBox .categoryName a {padding:0 4px; color:#000; border-radius:10px; transition:padding 0.2s;} ul.galleryList li .txtBox .categoryName a:hover {padding:0 6px; color:#fff; background-color:rgba(0,0,0,1.0);} ul.galleryList li .txtBox .categoryName i {display:none; padding:0 0 0 6px;} .dark .boardBox ul.loading {background:repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(0, 0, 0, 0.4) 20px, rgba(0, 0, 0, 0.4) 40px); opacity:0.1; transition-duration:0.8s;} .dark ul.galleryList > li:hover {background:repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(0,0,0,0.4) 20px,rgba(0,0,0,0.4) 40px); box-shadow:4px 4px 8px 0 var(--shadowColorDk);} .dark ul.galleryList li.over:not(:has(.miniMark.active, .miniChat.active)) {background:repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(0,0,0,0.4) 20px,rgba(0,0,0,0.4) 40px); box-shadow:4px 4px 8px 0 var(--shadowColorDk);} .dark ul.galleryList > li.popuped {background:linear-gradient(-10deg, var(--pointColor), deepskyblue, violet);} .dark ul.galleryList > li.popuped:hover {background:repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(0,0,0,0.4) 20px,rgba(0,0,0,0.4) 40px), linear-gradient(-10deg, var(--pointColor), deepskyblue, violet);} .dark ul.galleryList li .srcBox {background-color:rgba(255,255,255,0.1);} .dark ul.galleryList li:hover .txtBox {background:linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.0));} .dark ul.galleryList li .txtBox .snsBox .btn {color:#eee; background-color:rgba(0,0,0,0.9);} .dark ul.galleryList li .txtBox .snsBox .btn:hover {color:#000; background-color:rgba(255,255,255,1.0);} .dark ul.galleryList li .txtBox .fileName {color:#eee; background-color:rgba(0,0,0,0.9);} .dark ul.galleryList li .txtBox .fileName:hover {color:#000; background-color:rgba(255,255,255,1.0);} .dark ul.galleryList li .txtBox .categoryName {color:#eee; background-color:rgba(0,0,0,0.9);} .dark ul.galleryList li .txtBox .categoryName a {color:#eee;} .dark ul.galleryList li .txtBox .categoryName a:hover {color:#000; background-color:rgba(255,255,255,1.0);} ul.galleryList li .snsInfoBox {display:none; position:absolute; top:22px; left:22px; padding:4px 8px; text-align:left; font-size:12px; background-color:rgba(255,255,255,0.6); border-radius:12px; transition-property:top,left; transition-duration:0.2s;} .dashboard ul.galleryList li .snsInfoBox {display:block;} .dark ul.galleryList li .snsInfoBox {color:#eee; background-color:rgba(0,0,0,0.6);} .dashboard ul.galleryList li:hover .snsInfoBox {top:10px; left:10px;} ul.galleryList li .txtBox .fileName .delImgBtn {display:none; float:right; padding:2px; font-size:12px;} .dashboard ul.galleryList li .txtBox .fileName .delImgBtn {display:inline;} .dashboard ul.galleryList li .txtBox .fileName .delImgBtn:hover {color:red;} /** 믹스팝에 등록할 이미지 픽 상태적용 **/ ul.galleryList > li.popuped {background:linear-gradient(-10deg, var(--pointColor), deepskyblue, violet);} ul.galleryList > li.popuped:hover {background-image:repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(255, 255, 255, 0.6) 20px, rgba(255, 255, 255, 0.6) 40px), linear-gradient(-10deg, var(--pointColor), deepskyblue, violet);} @keyframes pickingGradient { 0% {background: 0% 50%;} 50% {background: 100% 50%;} 100% {background: 0% 50%;} } ul.galleryList li.picking {background-image:linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size:400% 400%; animation:pickingGradient 5s infinite alternate;} @media (max-width:600px){ /** 100px기준 */ ul.galleryList li {padding:6px;} ul.galleryList.padding0 li {padding:0;} ul.galleryList.padding10 li {padding:6px;} ul.galleryList.padding20 li {padding:6px;} ul.galleryList.padding30 li {padding:6px;} ul.galleryList li .groupBox ul li {padding:6px;} ul.galleryList.padding0 li .groupBox ul li {padding:0;} ul.galleryList.padding10 li .groupBox ul li {padding:6px;} ul.galleryList.padding20 li .groupBox ul li {padding:6px;} ul.galleryList.padding30 li .groupBox ul li {padding:6px;} } @media (max-width:150px){ /** 100px기준 */ #jellysBody li.jellimeterX1, #jellysBody li.jellimeterX2, #jellysBody li.jellimeterX3, #jellysBody li.jellimeterX4, #jellysBody li.jellimeterX5, #jellysBody li.jellimeterX6, #jellysBody li.jellimeterX7, #jellysBody li.jellimeterX8, #jellysBody li.jellimeterX9, #jellysBody li.jellimeterX10, #jellysBody li.jellimeterX11, #jellysBody li.jellimeterX12, #jellysBody li.jellimeterX13, #jellysBody li.jellimeterX14, #jellysBody li.jellimeterX15, #jellysBody li.jellimeterX16, #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:151px) and (max-width:250px){ /** 200px기준 */ #jellysBody li.jellimeterX1 {width:50vw;} #jellysBody li.jellimeterX2, #jellysBody li.jellimeterX3, #jellysBody li.jellimeterX4, #jellysBody li.jellimeterX5, #jellysBody li.jellimeterX6, #jellysBody li.jellimeterX7, #jellysBody li.jellimeterX8, #jellysBody li.jellimeterX9, #jellysBody li.jellimeterX10, #jellysBody li.jellimeterX11, #jellysBody li.jellimeterX12, #jellysBody li.jellimeterX13, #jellysBody li.jellimeterX14, #jellysBody li.jellimeterX15, #jellysBody li.jellimeterX16, #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:251px) and (max-width:350px){ /** 300px기준 */ #jellysBody li.jellimeterX1 {width:33.33vw;} #jellysBody li.jellimeterX2 {width:66.66vw;} #jellysBody li.jellimeterX3, #jellysBody li.jellimeterX4, #jellysBody li.jellimeterX5, #jellysBody li.jellimeterX6, #jellysBody li.jellimeterX7, #jellysBody li.jellimeterX8, #jellysBody li.jellimeterX9, #jellysBody li.jellimeterX10, #jellysBody li.jellimeterX11, #jellysBody li.jellimeterX12, #jellysBody li.jellimeterX13, #jellysBody li.jellimeterX14, #jellysBody li.jellimeterX15, #jellysBody li.jellimeterX16, #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:351px) and (max-width:450px){ /** 400px기준 */ #jellysBody li.jellimeterX1 {width:25vw;} #jellysBody li.jellimeterX2 {width:50vw;} #jellysBody li.jellimeterX3 {width:75vw;} #jellysBody li.jellimeterX4, #jellysBody li.jellimeterX5, #jellysBody li.jellimeterX6, #jellysBody li.jellimeterX7, #jellysBody li.jellimeterX8, #jellysBody li.jellimeterX9, #jellysBody li.jellimeterX10, #jellysBody li.jellimeterX11, #jellysBody li.jellimeterX12, #jellysBody li.jellimeterX13, #jellysBody li.jellimeterX14, #jellysBody li.jellimeterX15, #jellysBody li.jellimeterX16, #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:451px) and (max-width:550px){ /** 500px기준 */ #jellysBody li.jellimeterX1 {width:20vw;} #jellysBody li.jellimeterX2 {width:40vw;} #jellysBody li.jellimeterX3 {width:60vw;} #jellysBody li.jellimeterX4 {width:80vw;} #jellysBody li.jellimeterX5, #jellysBody li.jellimeterX6, #jellysBody li.jellimeterX7, #jellysBody li.jellimeterX8, #jellysBody li.jellimeterX9, #jellysBody li.jellimeterX10, #jellysBody li.jellimeterX11, #jellysBody li.jellimeterX12, #jellysBody li.jellimeterX13, #jellysBody li.jellimeterX14, #jellysBody li.jellimeterX15, #jellysBody li.jellimeterX16, #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:551px) and (max-width:650px){ /** 600px기준 */ #jellysBody li.jellimeterX1 {width:16.66vw;} #jellysBody li.jellimeterX2 {width:33.33vw;} #jellysBody li.jellimeterX3 {width:50vw;} #jellysBody li.jellimeterX4 {width:66.66vw;} #jellysBody li.jellimeterX5 {width:83.33vw;} #jellysBody li.jellimeterX6, #jellysBody li.jellimeterX7, #jellysBody li.jellimeterX8, #jellysBody li.jellimeterX9, #jellysBody li.jellimeterX10, #jellysBody li.jellimeterX11, #jellysBody li.jellimeterX12, #jellysBody li.jellimeterX13, #jellysBody li.jellimeterX14, #jellysBody li.jellimeterX15, #jellysBody li.jellimeterX16, #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:651px) and (max-width:750px){ /** 700px기준 */ #jellysBody li.jellimeterX1 {width:14.28vw;} #jellysBody li.jellimeterX2 {width:28.57vw;} #jellysBody li.jellimeterX3 {width:42.57vw;} #jellysBody li.jellimeterX4 {width:57.14vw;} #jellysBody li.jellimeterX5 {width:71.42vw;} #jellysBody li.jellimeterX6 {width:85.71vw;} #jellysBody li.jellimeterX7, #jellysBody li.jellimeterX8, #jellysBody li.jellimeterX9, #jellysBody li.jellimeterX10, #jellysBody li.jellimeterX11, #jellysBody li.jellimeterX12, #jellysBody li.jellimeterX13, #jellysBody li.jellimeterX14, #jellysBody li.jellimeterX15, #jellysBody li.jellimeterX16, #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:751px) and (max-width:850px){ /** 800px기준 */ #jellysBody li.jellimeterX1 {width:12.5vw;} #jellysBody li.jellimeterX2 {width:25vw;} #jellysBody li.jellimeterX3 {width:37.5vw;} #jellysBody li.jellimeterX4 {width:50vw;} #jellysBody li.jellimeterX5 {width:62.5vw;} #jellysBody li.jellimeterX6 {width:75vw;} #jellysBody li.jellimeterX7 {width:87.5vw;} #jellysBody li.jellimeterX8, #jellysBody li.jellimeterX9, #jellysBody li.jellimeterX10, #jellysBody li.jellimeterX11, #jellysBody li.jellimeterX12, #jellysBody li.jellimeterX13, #jellysBody li.jellimeterX14, #jellysBody li.jellimeterX15, #jellysBody li.jellimeterX16, #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:851px) and (max-width:950px){ /** 900px기준 */ #jellysBody li.jellimeterX1 {width:11.11vw;} #jellysBody li.jellimeterX2 {width:22.22vw;} #jellysBody li.jellimeterX3 {width:33.33vw;} #jellysBody li.jellimeterX4 {width:44.44vw;} #jellysBody li.jellimeterX5 {width:55.55vw;} #jellysBody li.jellimeterX6 {width:66.66vw;} #jellysBody li.jellimeterX7 {width:77.77vw;} #jellysBody li.jellimeterX8 {width:88.88vw;} #jellysBody li.jellimeterX9, #jellysBody li.jellimeterX10, #jellysBody li.jellimeterX11, #jellysBody li.jellimeterX12, #jellysBody li.jellimeterX13, #jellysBody li.jellimeterX14, #jellysBody li.jellimeterX15, #jellysBody li.jellimeterX16, #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:951px) and (max-width:1050px){ /** 1000px기준 */ #jellysBody li.jellimeterX1 {width:10vw;} #jellysBody li.jellimeterX2 {width:20vw;} #jellysBody li.jellimeterX3 {width:30vw;} #jellysBody li.jellimeterX4 {width:40vw;} #jellysBody li.jellimeterX5 {width:50vw;} #jellysBody li.jellimeterX6 {width:60vw;} #jellysBody li.jellimeterX7 {width:70vw;} #jellysBody li.jellimeterX8 {width:80vw;} #jellysBody li.jellimeterX9 {width:90vw;} #jellysBody li.jellimeterX10, #jellysBody li.jellimeterX11, #jellysBody li.jellimeterX12, #jellysBody li.jellimeterX13, #jellysBody li.jellimeterX14, #jellysBody li.jellimeterX15, #jellysBody li.jellimeterX16, #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:1051px) and (max-width:1150px){ /** 1100px기준 */ #jellysBody li.jellimeterX1 {width:9.09vw;} #jellysBody li.jellimeterX2 {width:18.18vw;} #jellysBody li.jellimeterX3 {width:27.27vw;} #jellysBody li.jellimeterX4 {width:36.36vw;} #jellysBody li.jellimeterX5 {width:45.45vw;} #jellysBody li.jellimeterX6 {width:54.54vw;} #jellysBody li.jellimeterX7 {width:63.63vw;} #jellysBody li.jellimeterX8 {width:72.72vw;} #jellysBody li.jellimeterX9 {width:81.81vw;} #jellysBody li.jellimeterX10 {width:90.90vw;} #jellysBody li.jellimeterX11, #jellysBody li.jellimeterX12, #jellysBody li.jellimeterX13, #jellysBody li.jellimeterX14, #jellysBody li.jellimeterX15, #jellysBody li.jellimeterX16, #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:1151px) and (max-width:1250px){ /** 1200px기준 */ #jellysBody li.jellimeterX1 {width:8.33vw;} #jellysBody li.jellimeterX2 {width:16.66vw;} #jellysBody li.jellimeterX3 {width:25vw;} #jellysBody li.jellimeterX4 {width:33.33vw;} #jellysBody li.jellimeterX5 {width:41.66vw;} #jellysBody li.jellimeterX6 {width:54.54vw;} #jellysBody li.jellimeterX7 {width:58.33vw;} #jellysBody li.jellimeterX8 {width:66.66vw;} #jellysBody li.jellimeterX9 {width:75vw;} #jellysBody li.jellimeterX10 {width:83.33vw;} #jellysBody li.jellimeterX11 {width:91.66vw;} #jellysBody li.jellimeterX12, #jellysBody li.jellimeterX13, #jellysBody li.jellimeterX14, #jellysBody li.jellimeterX15, #jellysBody li.jellimeterX16, #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:1251px) and (max-width:1350px){ /** 1300px기준 */ #jellysBody li.jellimeterX1 {width:7.69vw;} #jellysBody li.jellimeterX2 {width:15.38vw;} #jellysBody li.jellimeterX3 {width:23.07vw;} #jellysBody li.jellimeterX4 {width:30.76vw;} #jellysBody li.jellimeterX5 {width:38.46vw;} #jellysBody li.jellimeterX6 {width:46.15vw;} #jellysBody li.jellimeterX7 {width:53.84vw;} #jellysBody li.jellimeterX8 {width:61.53vw;} #jellysBody li.jellimeterX9 {width:69.23vw;} #jellysBody li.jellimeterX10 {width:76.92vw;} #jellysBody li.jellimeterX11 {width:84.61vw;} #jellysBody li.jellimeterX12 {width:92.30vw;} #jellysBody li.jellimeterX13, #jellysBody li.jellimeterX14, #jellysBody li.jellimeterX15, #jellysBody li.jellimeterX16, #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:1351px) and (max-width:1450px){ /** 1400px기준 */ #jellysBody li.jellimeterX1 {width:7.14vw;} #jellysBody li.jellimeterX2 {width:14.28vw;} #jellysBody li.jellimeterX3 {width:21.42vw;} #jellysBody li.jellimeterX4 {width:28.57vw;} #jellysBody li.jellimeterX5 {width:35.71vw;} #jellysBody li.jellimeterX6 {width:42.85vw;} #jellysBody li.jellimeterX7 {width:50vw;} #jellysBody li.jellimeterX8 {width:57.14vw;} #jellysBody li.jellimeterX9 {width:64.28vw;} #jellysBody li.jellimeterX10 {width:71.42vw;} #jellysBody li.jellimeterX11 {width:78.57vw;} #jellysBody li.jellimeterX12 {width:85.71vw;} #jellysBody li.jellimeterX13 {width:92.85vw;} #jellysBody li.jellimeterX14, #jellysBody li.jellimeterX15, #jellysBody li.jellimeterX16, #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:1451px) and (max-width:1550px){ /** 1500px기준 */ #jellysBody li.jellimeterX1 {width:6.66vw;} #jellysBody li.jellimeterX2 {width:13.33vw;} #jellysBody li.jellimeterX3 {width:20vw;} #jellysBody li.jellimeterX4 {width:26.66vw;} #jellysBody li.jellimeterX5 {width:33.33vw;} #jellysBody li.jellimeterX6 {width:40vw;} #jellysBody li.jellimeterX7 {width:46.66vw;} #jellysBody li.jellimeterX8 {width:53.33vw;} #jellysBody li.jellimeterX9 {width:60vw;} #jellysBody li.jellimeterX10 {width:66.66vw;} #jellysBody li.jellimeterX11 {width:73.33vw;} #jellysBody li.jellimeterX12 {width:80vw;} #jellysBody li.jellimeterX13 {width:86.66vw;} #jellysBody li.jellimeterX14 {width:93.33vw;} #jellysBody li.jellimeterX15, #jellysBody li.jellimeterX16, #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:1551px) and (max-width:1650px){ /** 1600px기준 */ #jellysBody li.jellimeterX1 {width:6.25vw;} #jellysBody li.jellimeterX2 {width:12.50vw;} #jellysBody li.jellimeterX3 {width:18.75vw;} #jellysBody li.jellimeterX4 {width:25vw;} #jellysBody li.jellimeterX5 {width:31.25vw;} #jellysBody li.jellimeterX6 {width:37.5vw;} #jellysBody li.jellimeterX7 {width:43.75vw;} #jellysBody li.jellimeterX8 {width:50vw;} #jellysBody li.jellimeterX9 {width:56.25vw;} #jellysBody li.jellimeterX10 {width:66.66vw;} #jellysBody li.jellimeterX11 {width:68.75vw;} #jellysBody li.jellimeterX12 {width:75vw;} #jellysBody li.jellimeterX13 {width:81.25vw;} #jellysBody li.jellimeterX14 {width:87.5vw;} #jellysBody li.jellimeterX15 {width:93.75vw;} #jellysBody li.jellimeterX16, #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:1651px) and (max-width:1750px){ /** 1700px기준 */ #jellysBody li.jellimeterX1 {width:5.88vw;} #jellysBody li.jellimeterX2 {width:11.76vw;} #jellysBody li.jellimeterX3 {width:17.64vw;} #jellysBody li.jellimeterX4 {width:23.52vw;} #jellysBody li.jellimeterX5 {width:29.41vw;} #jellysBody li.jellimeterX6 {width:35.29vw;} #jellysBody li.jellimeterX7 {width:41.17vw;} #jellysBody li.jellimeterX8 {width:47.05vw;} #jellysBody li.jellimeterX9 {width:52.94vw;} #jellysBody li.jellimeterX10 {width:58.82vw;} #jellysBody li.jellimeterX11 {width:64.70vw;} #jellysBody li.jellimeterX12 {width:70.58vw;} #jellysBody li.jellimeterX13 {width:76.47vw;} #jellysBody li.jellimeterX14 {width:82.35vw;} #jellysBody li.jellimeterX15 {width:88.23vw;} #jellysBody li.jellimeterX16 {width:94.11vw;} #jellysBody li.jellimeterX17, #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:1751px) and (max-width:1850px){ /** 1800px기준 */ #jellysBody li.jellimeterX1 {width:5.55vw;} #jellysBody li.jellimeterX2 {width:11.11vw;} #jellysBody li.jellimeterX3 {width:16.66vw;} #jellysBody li.jellimeterX4 {width:22.22vw;} #jellysBody li.jellimeterX5 {width:27.77vw;} #jellysBody li.jellimeterX6 {width:33.33vw;} #jellysBody li.jellimeterX7 {width:38.88vw;} #jellysBody li.jellimeterX8 {width:44.44vw;} #jellysBody li.jellimeterX9 {width:50vw;} #jellysBody li.jellimeterX10 {width:55.55vw;} #jellysBody li.jellimeterX11 {width:61.11vw;} #jellysBody li.jellimeterX12 {width:66.66vw;} #jellysBody li.jellimeterX13 {width:72.22vw;} #jellysBody li.jellimeterX14 {width:77.77vw;} #jellysBody li.jellimeterX15 {width:83.33vw;} #jellysBody li.jellimeterX16 {width:88.88vw;} #jellysBody li.jellimeterX17 {width:94.44vw;} #jellysBody li.jellimeterX18, #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:1851px) and (max-width:1950px){ /** 1900px기준 */ #jellysBody li.jellimeterX1 {width:5.26vw;} #jellysBody li.jellimeterX2 {width:10.52vw;} #jellysBody li.jellimeterX3 {width:15.78vw;} #jellysBody li.jellimeterX4 {width:21.05vw;} #jellysBody li.jellimeterX5 {width:26.31vw;} #jellysBody li.jellimeterX6 {width:31.57vw;} #jellysBody li.jellimeterX7 {width:36.84vw;} #jellysBody li.jellimeterX8 {width:42.10vw;} #jellysBody li.jellimeterX9 {width:47.36vw;} #jellysBody li.jellimeterX10 {width:52.63vw;} #jellysBody li.jellimeterX11 {width:57.89vw;} #jellysBody li.jellimeterX12 {width:63.15vw;} #jellysBody li.jellimeterX13 {width:68.42vw;} #jellysBody li.jellimeterX14 {width:73.68vw;} #jellysBody li.jellimeterX15 {width:78.94vw;} #jellysBody li.jellimeterX16 {width:84.21vw;} #jellysBody li.jellimeterX17 {width:89.47vw;} #jellysBody li.jellimeterX18 {width:94.73vw;} #jellysBody li.jellimeterX19, #jellysBody li.jellimeterX20 {width:100vw;} } @media (min-width:1951px) { /** 2000px기준 */ #jellysBody li.jellimeterX1 {width:100px;} #jellysBody li.jellimeterX2 {width:200px;} #jellysBody li.jellimeterX3 {width:300px;} #jellysBody li.jellimeterX4 {width:400px;} #jellysBody li.jellimeterX5 {width:500px;} #jellysBody li.jellimeterX6 {width:600px;} #jellysBody li.jellimeterX7 {width:700px;} #jellysBody li.jellimeterX8 {width:800px;} #jellysBody li.jellimeterX9 {width:900px;} #jellysBody li.jellimeterX10 {width:1000px;} #jellysBody li.jellimeterX11 {width:1100px;} #jellysBody li.jellimeterX12 {width:1200px;} #jellysBody li.jellimeterX13 {width:1300px;} #jellysBody li.jellimeterX14 {width:1400px;} #jellysBody li.jellimeterX15 {width:1500px;} #jellysBody li.jellimeterX16 {width:1600px;} #jellysBody li.jellimeterX17 {width:1700px;} #jellysBody li.jellimeterX18 {width:1800px;} #jellysBody li.jellimeterX19 {width:1900px;} #jellysBody li.jellimeterX20 {width:100vw;} } #jellysBody li.jellimeterY1 {height:100px;} #jellysBody li.jellimeterY2 {height:200px;} #jellysBody li.jellimeterY3 {height:300px;} #jellysBody li.jellimeterY4 {height:400px;} #jellysBody li.jellimeterY5 {height:500px;} #jellysBody li.jellimeterY6 {height:600px;} #jellysBody li.jellimeterY7 {height:700px;} #jellysBody li.jellimeterY8 {height:800px;} #jellysBody li.jellimeterY9 {height:900px;} #jellysBody li.jellimeterY10 {height:1000px;} #jellysBody li.jellimeterY11 {height:1100px;} #jellysBody li.jellimeterY12 {height:1200px;} #jellysBody li.jellimeterY13 {height:1300px;} #jellysBody li.jellimeterY14 {height:1400px;} #jellysBody li.jellimeterY15 {height:1500px;} #jellysBody li.jellimeterY16 {height:1600px;} #jellysBody li.jellimeterY17 {height:1700px;} #jellysBody li.jellimeterY18 {height:1800px;} #jellysBody li.jellimeterY19 {height:1900px;} #jellysBody li.jellimeterY20 {height:2000px;} /***** board Box *****/ .boardBox {box-sizing:border-box; margin:0 auto; padding:10px 0; color:#000; box-shadow:4px 4px 20px 0 var(--shadowColor) inset; overflow-y:auto;} .boardBox .blurBox {display:block; position:fixed; top:0; left:0; width:100%; height:100vh; background-color:var(--bgColor); background-image:linear-gradient(to top, #fff, transparent); filter:blur(4px); z-index:-1;} .boardBox .jellyListBox {box-sizing:border-box; width:100%; min-height:100%;} .boardBox > .titleBox {margin-bottom:10px; padding:10px; width:100%; font-size:14px; text-align:right;} @media screen and (max-width:1000px) { .boardBox > .titleBox {padding:0 10px;} } .boardBox > .titleBox a {border-radius:4px; transition:all 0.4s;} .boardBox > .titleBox a:hover {padding:0 4px; color:#fff; background-color:var(--themeColor);} .boardBox .showMoreBox {margin-top:15px; padding:10px; width:100%; text-align:center;} .boardBox .showMoreBox #showMoreBtn {display:inline-block; padding:6px 20px; font-size:14px; color:var(--themeColor); border-radius:20px; cursor:pointer; transition:all 0.2s;} .boardBox .showMoreBox #showMoreBtn:hover {color:#fff; background-color:var(--themeColor);} .dark .boardBox .blurBox {background-color:rgba(255,255,255,0.1); background-image:linear-gradient(to top, #1e1f21, transparent);} .dark .boardBox > .titleBox {color:#777;} .dark .boardBox > .titleBox a:hover {color:#000; background-color:#777;} /**** board > search Box ****/ .boardBox .searchBox {margin-bottom:15px; padding:10px; min-height:52px; text-align:left;} .boardBox .searchBox.defaultBG {background-color:rgba(255,255,255,0.8);} .boardBox .searchBox:after {display:block; clear:both; content:"";} .boardBox .searchBox .searchParam {display:inline-block; font-size:12px; border:1px solid var(--themeColor); border-radius:20px; vertical-align:middle; overflow:hidden; transition:all 0.2s;} .boardBox .searchBox .searchParam:hover {border:1px solid var(--themeHoverColor); box-shadow:2px 2px 10px 0 var(--shadowColor);} .boardBox .searchBox .searchParam:after {display:block; clear:both; content:"";} .boardBox .searchBox .searchParam > div {float:left;} .boardBox .searchBox .searchParam .paramTit {padding:6px 14px; height:34px; color:#fff; background-color:var(--themeColor);} .boardBox .searchBox .searchParam:hover .paramTit {background-color:var(--themeHoverColor);} .boardBox .searchBox .searchParam .paramCon {min-width:100px; color:var(--themeColor);} .boardBox .searchBox .searchParam .paramCon.long {width:200px;} .boardBox .searchBox .searchParam:hover .paramCon {color:var(--themeHoverColor);} .boardBox .searchBox .searchParam .paramCon input, .boardBox .searchBox .searchParam .paramCon select {padding:8px; width:100%; height:34px; background-color:#fff; border:none;} @media screen and (max-width:750px) { .boardBox .searchBox .searchParam .paramCon input, .boardBox .searchBox .searchParam .paramCon select {} } .boardBox .searchBox .searchParam .btn {font-size:14px; color:#fff; background-color:var(--themeColor); cursor:pointer; transition:all 0.2s;} .boardBox .searchBox .searchParam .btn:hover {background-color:var(--themeHoverColor);} .boardBox .searchBox .searchParam:has(.btn.addBtn) {margin-left:4px; float:right; border:1px solid var(--pointColor);} .boardBox .searchBox .searchParam .btn.addBtn {background-color:var(--pointColor);} .boardBox .searchBox .searchParam .btn.addBtn:hover {background-color:var(--pointHoverColor);} .boardBox .searchBox .searchParam:has(.btn.disabled) {border:1px solid #ccc;} .boardBox .searchBox .searchParam .btn.disabled {background-color:#ccc;} .boardBox .searchBox .searchParam .btn.disabled:hover {background-color:#ccc;} .boardBox .searchBox .searchParam:has(.btn.addBtn.disabled) {border:1px solid rgba(0,0,0,0.1);} .boardBox .searchBox .searchParam .btn.addBtn.disabled {background-color:rgba(0,0,0,0.1);} .boardBox .searchBox .searchParam .btn.addBtn.disabled:hover {background-color:rgba(0,0,0,0.1);} .dark .boardBox .searchBox.defaultBG {color:#000; background-color:rgba(0,0,0,0.4);} .dark .boardBox .searchBox .searchParam {border:1px solid rgba(0,0,0,0.4);} .dark .boardBox .searchBox .searchParam:hover {border:1px solid #000; box-shadow:2px 2px 10px 0 rgba(0,0,0,0.2);} .dark .boardBox .searchBox .searchParam .paramTit {color:#444; background-color:#000;} .dark .boardBox .searchBox .searchParam .paramCon {color:var(--themeColorDk);} .dark .boardBox .searchBox .searchParam .paramCon input, .dark .boardBox .searchBox .searchParam .paramCon select {background-color:rgba(0,0,0,0.4);} .dark .boardBox .searchBox .searchParam .btn {color:#444; background-color:#000;} .dark .boardBox .searchBox .searchParam .btn:hover {color:#777; background-color:#000;} .dark .boardBox .searchBox .searchParam:has(.btn.addBtn) {border:1px solid var(--pointColorDk);} .dark .boardBox .searchBox .searchParam .btn.addBtn {background-color:var(--pointColorDk);} .dark .boardBox .searchBox .searchParam .btn.addBtn:hover {background-color:var(--pointHoverColorDk);} .dark .boardBox .searchBox .searchParam:has(.btn.addBtn.disabled) {border:1px solid rgba(255,255,255,0.1);} .dark .boardBox .searchBox .searchParam .btn.addBtn.disabled {background-color:#444;} .dark .boardBox .searchBox .searchParam .btn.addBtn.disabled:hover {background-color:var(--themeHoverColorDk);} /**** board > birefBox(ctegory info) ****/ .boardBox .briefBox {margin-bottom:0; padding:10px; width:100%; text-align:center; font-size:14px;} .boardBox .briefBox > span {display:inline-block; padding:8px 8px 30px; min-width:340px; line-height:24px; color:#222; background:linear-gradient(to top, rgba(255,255,255, 0.0), rgba(255,255,255, 1.0)); border-radius:20px 20px 0 0; box-shadow:0 -14px 32px 0 var(--bgColor);} .dark .boardBox .briefBox > span {color:#fff; background:linear-gradient(to top,rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.6)); box-shadow:0 -12px 20px 0 rgba(255,255,255,0.02), 0 -36px 40px 0 rgba(255,255,255,0.04);} @media screen and (max-width:450px) { .boardBox .briefBox > span {min-width:240px;} } /**** board > chooseBox(category) ****/ .boardBox .chooseBox {margin-bottom:10px; padding:10px; width:100%;} .boardBox .chooseBox ul {width:100%;} .boardBox .chooseBox ul:after {display:block; clear:both; content:"";} .boardBox .chooseBox ul li {display:inline-block; position:relative; margin-bottom:4px; padding:4px; font-size:14px; color:var(--themeColor); background-color:#fff; border:1px solid #fff; border-radius:20px; cursor:pointer; transition:all 0.2s;} .boardBox .chooseBox ul li.floatRight {margin-left:6px; float:right;} .dark .boardBox .chooseBox ul li {color:#000; background-color:rgba(0,0,0,0.4); border:1px solid transparent; border-radius:20px; cursor:pointer; transition:all 0.2s;} .dark .boardBox .chooseBox.defaultBG ul li {color:#ccc;} .boardBox .chooseBox ul li:hover {color:var(--themeHoverColor); border:1px solid var(--themeColor);} .boardBox .chooseBox ul li.active {color:#fff; background-color:var(--themeColor); border:1px solid var(--themeColor);} .dark .boardBox .chooseBox ul li:hover {color:#777; border:1px solid rgba(0,0,0,0.8);} .dark .boardBox .chooseBox ul li.active {font-weight:bold; color:#fff; background-color:rgba(0,0,0,0.8); border:1px solid rgba(0,0,0,0.8);} .boardBox .chooseBox ul li.disabled {color:#ccc;} .dark .boardBox .chooseBox ul li.disabled {color:rgba(255,255,255,0.2);} .boardBox .chooseBox ul li#addCategory {display:inline-block;} .boardBox .chooseBox ul li.dashboardBtn {font-weight:800; color:#000; background-color:var(--pointColor); border:1px solid var(--pointColor);} .boardBox .chooseBox ul li.dashboardBtn:hover {background-color:var(--pointHoverColor); border:1px solid var(--pointHoverColor);} /** 팔로우버튼 마우스오버 **/ .boardBox .chooseBox ul li.followBtn {color:#fff; padding-right:10px; background-color:var(--pointColor); border:1px solid var(--pointColor);} /** 팔로우버튼 활성화 **/ .boardBox .chooseBox ul li.followBtn.disabled {color:#41e94f; background-color:var(--pointColor); border:1px solid var(--pointColor);} /** 팔로우버튼 비활성화 **/ .boardBox .chooseBox ul li.followBtn:hover {background-color:var(--pointHoverColor); border:1px solid var(--pointHoverColor);} /** 팔로우버튼 마우스오버 **/ .dark .boardBox .chooseBox ul li.dashboardBtn {color:#000;} .dark .boardBox .chooseBox ul li.followBtn {color:#222; background-color:var(--pointColorDk); border:1px solid var(--pointColorDk);} /** 팔로우버튼 활성화 **/ .dark .boardBox .chooseBox ul li.followBtn.disabled {color:#39cc45; background-color:var(--pointColorDk); border:1px solid var(--pointColorDk);} /** 팔로우버튼 비활성화 **/ .dark .boardBox .chooseBox ul li.followBtn:hover {background-color:var(--pointHoverColorDk); border:1px solid var(--pointHoverColorDk);} /** 팔로우버튼 마우스오버 **/ .boardBox .chooseBox ul li .outp {display:inline-block; padding:4px 10px; vertical-align:middle;} .boardBox .chooseBox ul li .inp {display:none; padding:6px 4px; min-width:60px; border:none; border-radius:6px; color:#000; background-color:transparent;} .boardBox .chooseBox ul li .inp:hover {background-color:rgba(255,255,255,0.4);} .boardBox .chooseBox ul li.edit .inp {display:inline-block; margin-left:10px;} .boardBox .chooseBox ul li i {box-sizing:border-box; padding:7px; width:28px; height:28px; text-align:center; border-radius:14px; transition:transform 0.2s; transition-delay:0.2s;} .boardBox .chooseBox ul li i:hover {background-color:rgba(0,0,0,0.1);} .boardBox .chooseBox ul li i#addCategoryBtn {display:none; color:#fff; background-color:var(--pointColor);} .boardBox .chooseBox ul li i#addCategoryBtn:hover {background-color:var(--pointHoverColor);} .dark .boardBox .chooseBox ul li i#addCategoryBtn {background-color:var(--pointColorDk);} .dark .boardBox .chooseBox ul li i#addCategoryBtn:hover {background-color:var(--pointHoverColorDk);} .boardBox .chooseBox ul li.edit i#addCategoryBtn {display:inline-block;} .boardBox .chooseBox ul li.edit i#openAddCategoryBtn {transform:rotate(-45deg);} .boardBox .chooseBox ul li .minus {display:none; position:absolute; top:-8px; right:-4px; padding:1px 4px; font-weight:bold; border-radius:10px; color:#fff; background-color:rgba(255,0,0,0.6);} .boardBox .chooseBox ul li .minus:hover {background-color:tomato;} .boardBox .detailInfoBox {margin:0 10px; padding:10px; width:calc(100% - 20px); min-height:52px; background-image:linear-gradient(to top, rgba(255,255,255,0.3), rgba(255,255,255,0.9)); border:1px solid #fff; border-radius:24px; opacity:0; box-shadow:2px 2px 10px 0 var(--shadowColor); transition:opacity 0.8s, margin 0.4s;} .boardBox .detailInfoBox.active {display:block;} .boardBox .detailInfoBox:after {display:block; clear:both; content:"";} .boardBox .detailInfoBox .accordion-header {display:block; margin:8px 0; font-size:18px; font-weight:800;} .dark .boardBox .detailInfoBox {color:#ccc; background-image:linear-gradient(to top, rgba(0,0,0,0.1), rgba(0,0,0,0.9)); border:1px solid #000; box-shadow:2px 2px 10px 0 var(--shadowColorDk);} .boardBox .detailInfoBox .breakTime {display:block; margin:10px 0; width:100%; height:4px; background-color:rgba(255,255,255,0.4); border-radius:3px;} .dark .boardBox .detailInfoBox .breakTime {background-color:rgba(0,0,0,0.2);} .boardBox .detailInfoBox .searchParam {display:inline-block; margin:0 4px 4px 0; font-size:12px; border:1px solid var(--themeColor); border-radius:20px; vertical-align:middle; overflow:hidden; transition:all 0.2s;} .boardBox .detailInfoBox .searchParam:has(.btn) {margin:0 0 4px 4px; float:right;} .boardBox .detailInfoBox .searchParam:hover {border:1px solid var(--themeHoverColor);} .boardBox .detailInfoBox .searchParam:last-child {margin-bottom:0;} .boardBox .detailInfoBox .searchParam:after {display:block; clear:both; content:"";} .boardBox .detailInfoBox .searchParam > div {float:left;} .boardBox .detailInfoBox .searchParam .paramTit {padding:6px 14px; height:30px; font-weight:800; color:#fff; background-color:var(--themeColor);} .boardBox .detailInfoBox .searchParam:hover .paramTit {background-color:var(--themeHoverColor);} .boardBox .detailInfoBox .searchParam .paramCon {min-width:100px;} .boardBox .detailInfoBox .searchParam .paramCon .inp {display:block; padding:6px 8px; width:100%; height:30px; background-color:rgba(255,255,255,0.6); border:none;} .boardBox .detailInfoBox .searchParam .paramCon .switchBtn {float:left; display:inline-block; margin-left:2px; padding:0; width:32px; height:26px; line-height:24px; font-size:24px; color:var(--themeColor); background-color:rgba(0,0,0,0.1); border-radius:16px; cursor:pointer; transition:all 0.1s;} .boardBox .detailInfoBox .searchParam .paramCon .switchBtn:hover {background-color:rgba(99,98,231,0.30);} .boardBox .detailInfoBox .searchParam .paramCon .switchTxt {float:left; display:inline-block; padding:0; min-width:30px; height:26px; line-height:26px; font-size:14px; font-weight:bold; color:var(--themeColor); border-radius:16px;} .dark .boardBox .detailInfoBox .searchParam {border:1px solid #111;} .dark .boardBox .detailInfoBox .searchParam:hover {border:1px solid #000;} .dark .boardBox .detailInfoBox .searchParam .paramTit {color:#777; background-color:#111;} .dark .boardBox .detailInfoBox .searchParam:hover .paramTit {background-color:#000;} .dark .boardBox .detailInfoBox .searchParam .paramCon .inp {color:#000; background-color:#444;} .dark .boardBox .detailInfoBox .searchParam:hover .paramCon .inp {background-color:#777;} .dark .boardBox .detailInfoBox .searchParam .paramCon .switchBtn {color:#777; background-color:rgba(0,0,0,0.4);} .dark .boardBox .detailInfoBox .searchParam .paramCon .switchBtn:hover {background-color:rgba(0,0,0,0.8);} .dark .boardBox .detailInfoBox .searchParam .paramCon .switchTxt {color:#777;} .dark .boardBox .detailInfoBox .searchParam:hover .paramCon .switchTxt {color:#000;} @media screen and (max-width:750px) { .boardBox .detailInfoBox .searchParam .paramCon .inp {max-width:100px;} } .boardBox .detailInfoBox .searchParam:has(.inp.inpL) {width:100%;} .boardBox .detailInfoBox .searchParam .paramCon:has(.inp.inpL) {width:100%; max-width:calc(100% - 64.16px);} .boardBox .detailInfoBox .searchParam .paramCon .inp.inpL {width:100%;} .boardBox .detailInfoBox .searchParam:has(.inpTXA) {width:100%;} .boardBox .detailInfoBox .searchParam .paramCon:has(.inpTXA) {width:100%;} .boardBox .detailInfoBox .searchParam .paramCon .inpTXA {padding:8px; width:100%; height:160px; background-color:rgba(255,255,255,0.6); border:none;} .dark .boardBox .detailInfoBox .searchParam .paramCon .inpTXA {color:#ccc; background-color:rgba(255,255,255,0.04); box-shadow:0 0 10px 0 rgba(255,255,255,0.1) inset;} .boardBox .detailInfoBox .searchParam .btn {cursor:pointer; transition:all 0.2s;} .boardBox .detailInfoBox .searchParam .btn#fixBtn {color:#fff; background-color:var(--pointColor);} .boardBox .detailInfoBox .searchParam:hover .btn#fixBtn {background-color:var(--pointHoverColor);} .boardBox .detailInfoBox .searchParam:has(.btn#fixBtn) {margin-left:4px; float:right; border:1px solid var(--pointColor);} .dark .boardBox .detailInfoBox .searchParam .btn#fixBtn {color:#000; background-color:var(--pointColorDk);} .dark .boardBox .detailInfoBox .searchParam:hover .btn#fixBtn {background-color:var(--pointHoverColorDk);} .dark .boardBox .detailInfoBox .searchParam:has(.btn#fixBtn) {border:1px solid var(--pointColorDk);} .boardBox .detailInfoBox .backgroundParam {float:left; margin-bottom:8px; width:100%; font-size:12px;} .boardBox .detailInfoBox .backgroundParam:after {display:block; clear:both; content:"";} .boardBox .detailInfoBox .backgroundParam .paramTit {float:left; padding:18px 7px; width:80px; height:80px; line-height:12px; border-right:4px solid rgba(255,255,255,0.4);} .boardBox .detailInfoBox .backgroundParam .paramTit .titBox {display:inline-block; padding:10px; color:#fff; background-color:var(--themeColor); border:px solid var(--themeColor); border-radius:14px;} .boardBox .detailInfoBox .backgroundParam ul.elements {float:left; margin-left:10px; width:calc(100% - 90px);} .boardBox .detailInfoBox .backgroundParam ul.elements li {display:inline-block; margin:2px; width:120px; height:80px; border-radius:6px; border:1px solid var(--themeColor); vertical-align:middle;} .boardBox .detailInfoBox .backgroundParam ul.elements li .tableBox {display:table; width:100%; height:100%; text-align:center;} .boardBox .detailInfoBox .backgroundParam ul.elements li .tableBox .wrapBox {display:table-cell; vertical-align:middle;} .boardBox .detailInfoBox .backgroundParam ul.elements li .tableBox .wrapBox .btn {position:relative; margin:2px; padding:6px 10px; top:4px; font-size:14px; color:#000; border-radius:16px; box-shadow:2px 2px 6px rgba(0,0,0,0.2); cursor:pointer; opacity:0; transition:top 0.4s, opacity 0.4s;} .boardBox .detailInfoBox .backgroundParam ul.elements li .tableBox .wrapBox .editBtn {background-color:#41e94f;} .boardBox .detailInfoBox .backgroundParam ul.elements li .tableBox .wrapBox .editBtn:hover {background-color:#39cc45;} .boardBox .detailInfoBox .backgroundParam ul.elements li .tableBox .wrapBox .delBtn {background-color:tomato;} .boardBox .detailInfoBox .backgroundParam ul.elements li .tableBox .wrapBox .delBtn:hover {background-color:rgb(226, 60, 31);} .boardBox .detailInfoBox .backgroundParam ul.elements li:hover .tableBox .wrapBox .btn {top:0; opacity:1;} .boardBox .detailInfoBox .backgroundParam ul.elements li.btn {margin-right:0; padding:20px; text-align:center; font-size:24px; color:var(--themeColor); background-color:rgba(255,255,255,0.4); border:2px dashed var(--themeColor); cursor:pointer;} .boardBox .detailInfoBox .backgroundParam ul.elements li.btn:hover {color:red; background-color:rgba(255,255,255,0.6); border:2px dashed red;} .dark .boardBox .detailInfoBox .backgroundParam .paramTit {border-right:4px solid rgba(0,0,0,0.2);} .dark .boardBox .detailInfoBox .backgroundParam .paramTit .titBox {color:#777; background-color:#111; border:1px solid #111;} .dark .boardBox .detailInfoBox .backgroundParam ul.elements li {border:1px solid #444;} .dark .boardBox .detailInfoBox .backgroundParam ul.elements li.btn {color:#444; background-color:rgba(0,0,0,0.4); border:2px dashed #444;} .dark .boardBox .detailInfoBox .backgroundParam ul.elements li.btn:hover {color:#ccc; background-color:rgba(0,0,0,0.6); border-color:#ccc;} /***** board edit info *****/ ul.userNavMenu {padding-bottom:30px; width:100%;} ul.userNavMenu li {display:inline-block; padding:4px; font-size:14px; border:1px solid #fff; border-radius:20px; color:var(--themeColor); background-color:#fff; transition:all 0.2s;} ul.userNavMenu li.floatRight {margin-left:10px; float:right;} ul.userNavMenu li.addBtn {font-weight:800; color:#000; background-color:var(--pointColor);} ul.userNavMenu li:hover {border:1px solid var(--themeColor);} ul.userNavMenu li.active {color:#fff; background-color: var(--themeColor); border: 1px solid var(--themeColor);} ul.userNavMenu li .outp {display:inline-block; padding:4px 10px; vertical-align:middle;} ul.editInfo {width:100%; font-size:13px;} ul.editInfo .infoLine {display:table; margin-bottom:10px; width:100%;} .betweenLine {margin:30px 0; border-bottom:1px solid #ccc;} ul.editInfo .infoLine .tit {display:table-cell; vertical-align:middle;} ul.editInfo .infoLine .con {display:table-cell; vertical-align:middle;} ul.editInfo .infoLine .con .categorySel {box-sizing:border-box; padding:10px; width:100%; height:100%; border:1px solid rgba(0,0,0,0.2);} ul.editInfo .infoLine .con .btn {text-align:center; color:#fff; background-color:var(--themeColor); cursor:pointer;} @media screen and (min-width:1001px) { ul.editInfo .infoLine .tit {width:18%;} ul.editInfo .infoLine .con {width:82%;} ul.editInfo .infoLine .con .u_photo_box {margin:0 auto; width:200px; height:100px;} ul.editInfo .infoLine .con .u_photo_box_img {box-sizing:border-box; float:left; width:100px; height:100px; background-color:#fff; border-radius:50%;} ul.editInfo .infoLine .con .u_photo_box_btn {box-sizing:border-box; float:left; padding:10px 0; width:100px; height:100px; text-align:center;} } @media screen and (max-width:1000px) { ul.editInfo .infoLine .tit {width:80px;} ul.editInfo .infoLine .con {width:calc(100% - 80px);} ul.editInfo .infoLine .con .u_photo_box {margin:0 auto; width:200px; height:100px;} ul.editInfo .infoLine .con .u_photo_box_img {box-sizing:border-box; float:left; width:100px; height:100px; background-color:#fff; border-radius:50%;} ul.editInfo .infoLine .con .u_photo_box_btn {box-sizing:border-box; float:left; padding:10px 0; width:100px; height:100px; text-align:center;} } ul.editInfo .infoLine .con .u_photo_box_btn span {box-sizing:border-box; display:inline-block; padding:8px 16px; width:70px; color:#fff; background-color:var(--themeColor); border-radius:4px; cursor:pointer; transition:all 0.2s; vertical-align:middle;} ul.editInfo .infoLine .con .u_photo_box_btn span:first-child {margin-bottom:10px;} ul.editInfo .infoLine .con .u_photo_box_btn span:hover {background-color:var(--themeHoverColor);} ul.editInfo .infoLine .con .inpBox {box-sizing:border-box; padding:10px; width:100%; height:40px; border:1px solid rgba(0,0,0,0.2);} ul.editInfo .infoLine .con .addrSearchBtn {display:inline-block; width:31%; max-width:100px; height:40px; line-height:40px; text-align:center; color:#fff; background-color:var(--themeColor); border-radius:4px; cursor:pointer; vertical-align:middle; transition:all 0.2s;} ul.editInfo .infoLine .con .addrSearchBtn:hover {background-color:var(--themeHoverColor);} .dark ul.userNavMenu li {color:var(--themeColorDk); background-color:rgba(0,0,0,0.2); border:1px solid transparent;} .dark ul.userNavMenu li:hover {border:1px solid #000;} .dark ul.userNavMenu li.active {background-color:#000; border:1px solid #000;} .dark ul.userNavMenu li.active:hover {color:#ccc;} .dark ul.userNavMenu li.addBtn {color:#000; background-color:var(--pointColor);} .dark .betweenLine {border-bottom:1px solid rgba(255,255,255,0.4);} .dark ul.editInfo .infoLine .tit {color:rgba(255,255,255,0.4);} .dark ul.editInfo .infoLine .con .u_photo_box_img {background-color:transparent; border:2px solid #000;} .dark ul.editInfo .infoLine .con .u_photo_box_btn span {background-color:var(--themeColorDk);} .dark ul.editInfo .infoLine .con .u_photo_box_btn span:hover {background-color:var(--themeHoverColorDk);} .dark ul.editInfo .infoLine .con .inpBox {color:rgba(255,255,255,0.6); background-color:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.4);} .dark ul.editInfo .infoLine .con .btn {background-color:var(--themeColorDk);} .dark ul.editInfo .infoLine .con .addrSearchBtn {background-color:var(--themeColorDk);} .dark ul.editInfo .infoLine .con .addrSearchBtn:hover {background-color:var(--themeHoverColorDk);} .typeBox {margin-bottom:20px; width:100%;} .typeBox:after {display:block; clear:both; content:"";} .typeBox .typeBtn {box-sizing:border-box; float:left; padding:10px; width:50%; max-width:200px; text-align:center; color:#fff; background-color:#ccc; cursor:pointer; transition:all 0.2s;} .typeBox .typeBtn:hover {background-color:rgba(0,0,0,0.3);} .typeBox .typeBtn:first-child {border-radius:4px 0 0 4px;} .typeBox .typeBtn:last-child {border-radius:0 4px 4px 0;} .typeBox .typeBtn.active {background-color:var(--themeColor);} .typeBox .typeBtn.active:hover {background-color:var(--themeHoverColor);} .dark .typeBox .typeBtn.active {background-color:var(--themeColorDk);} .dark .typeBox .typeBtn.active:hover {background-color:var(--themeHoverColorDk);} .typeBox .typeBtn a {display:block; width:100%; height:100%;} /***** board follow pallet *****/ ul.myfollowPallet {margin:0 auto; width:100%; max-width:1600px; text-align:center;} ul.myfollowPallet:after {display:block; clear:both; content:"";} ul.myfollowPallet li {box-sizing:border-box; float:left; width:50%; max-width:160px;} @media screen and (min-width:1001px) { ul.myfollowPallet li {padding:10px;} } @media screen and (max-width:1000px) { ul.myfollowPallet li {padding:4px;} } ul.myfollowPallet li .inBox {width:100%; height:100%; text-align:center; border-radius:8px; overflow:hidden; cursor:pointer;} ul.myfollowPallet li .inBox:hover {box-shadow:4px 4px 8px 2px rgba(0,0,0,0.06);} ul.myfollowPallet li .inBox .imgBox {box-sizing:border-box; padding:20px 0; width:100%; height:140px; background-color:rgba(255,255,255,0.4);} ul.myfollowPallet li .inBox .imgBox .photoBox {display:inline-block; margin:0 auto; width:100px; height:100px; background-color:#fff; border-radius:50%; overflow:hidden; transition:all 0.2s;} ul.myfollowPallet li .inBox:hover .imgBox .photoBox {transform:scale(1.06);} ul.myfollowPallet li .inBox .imgBox .photoBox span {display:table-cell; vertical-align:middle;} ul.myfollowPallet li .inBox .imgBox .photoBox span i {font-size:40px;} ul.myfollowPallet li .inBox .txtBox {display:table; width:100%; height:100px; background-color:rgba(0,0,0,0.04); transition:all 0.2s;} ul.myfollowPallet li .inBox .txtBox > div {display:table-cell; vertical-align:middle;} ul.myfollowPallet li .inBox .txtBox > div .userID {display:inline-block; margin-bottom:8px; font-size:14px; font-weight:bold;} ul.myfollowPallet li .inBox .txtBox > div .followBtn {display:inline-block; padding:4px 8px; font-size:13px; font-weight:bold; border-radius:12px; color:#fff; background-color:var(--pointColor);} ul.myfollowPallet li .inBox .txtBox > div .followBtn:hover {background-color:var(--pointHoverColor)} ul.myfollowPallet li .inBox .txtBox > div .followBtn.meToo {color:#fff; background-color:rgba(0,0,0,0.1);} ul.myfollowPallet li .inBox .txtBox > div .followBtn.meToo:hover {color:#fff; background-color:rgba(0,0,0,0.3);} /***** board data table *****/ ul.myDataTable {width:100%; border-bottom:4px solid #a8c1d5; border-left:1px solid #a8c1d5; border-right:1px solid #a8c1d5; border-radius:4px; font-size:13px;} ul.myDataTable li {display:table; width:100%; border-bottom:1px solid #ccc; transition:all 0.2s;} ul.myDataTable li.tit {display:table; background-color:#a8c1d5;} ul.myDataTable li:last-child {width:100%; border-bottom:none;} ul.myDataTable li:not(.tit):hover {background-color:#e8edf0;} ul.myDataTable li div {display:table-cell; text-align:center; vertical-align:middle;} ul.myDataTable li div a {display:block; width:100%; height:100%; min-height:20px;} ul.myDataTable li div a:hover {font-weight:bold; color:#213d52;} @media screen and (min-width:1001px) { ul.myDataTable li {padding:10px 0;} } @media screen and (max-width:1000px) { ul.myDataTable li {padding:20px 0;} } .boardBox .categoryBox {box-sizing:border-box; margin-bottom:20px; width:100%; height:40px;} .boardBox .categoryBox .categoryBox:after {display:block; clear:both; content:"";} .boardBox .categoryBox .categorySel {box-sizing:border-box; padding:10px; width:50%; max-width:200px; height:100%;} .boardBox .categoryBox .newCategoryBtn {float:right; box-sizing:border-box; padding:10px 16px; height:40px; font-size:14px; color:#fff; background-color:var(--themeColor); border-radius:4px; cursor:pointer; transition:all 0.2s;} .boardBox .categoryBox .newCategoryBtn:hover {background-color:var(--themeHoverColor);} .dark .boardBox .categoryBox .newCategoryBtn {background-color:var(--themeColorDk);} .dark .boardBox .categoryBox .newCategoryBtn:hover {background-color:var(--themeHoverColorDk);} .boardBox .addCatogoryBox {display:none; box-sizing:border-box; margin-bottom:20px; padding:10px; width:100%; border:2px dashed red; border-radius:4px;} .boardBox .addCatogoryBox:after {display:block; clear:both; content:"";} .boardBox .addCatogoryBox ul.myPrjList {} .boardBox .addCatogoryBox ul.myPrjList:after {display:block; clear:both; content:"";} .boardBox .addCatogoryBox ul.myPrjList li {float:left; display:inline; padding:4px; margin:4px; color:#213d52; background-color:#a8c1d5; border:1px solid #a8c1d5; border-radius:8px;} .boardBox .addCatogoryBox ul.myPrjList li.active {color:red; background-color:transparent; border:1px solid red;} .boardBox .addCatogoryBox ul.myPrjList li:not(#showAddInpBtn) i {margin-left:4px; padding:6px; font-size:12px; color:#a8c1d5; background-color:#213d52; border-radius:6px; cursor:pointer; transition:all 0.2s;} .boardBox .addCatogoryBox ul.myPrjList li:not(#showAddInpBtn) i:hover {background-color:red;} .boardBox .addCatogoryBox ul.myPrjList li.active:not(#showAddInpBtn) i {color:#fff; background-color:red;} .boardBox .addCatogoryBox ul.myPrjList li#showAddInpBtn {padding:6px 16px; background-color:var(--pointColor); border:none; cursor:pointer; transition:all 0.2s;} .boardBox .addCatogoryBox ul.myPrjList li#showAddInpBtn:hover {background-color:var(--pointHoverColor);} .boardBox .addCatogoryBox ul.myCategoryList {} .boardBox .addCatogoryBox ul.myCategoryList:after {display:block; clear:both; content:"";} .boardBox .addCatogoryBox ul.myCategoryList li {float:left; display:inline; padding:4px; margin:4px; color:#213d52; background-color:#a8c1d5; border:1px solid #a8c1d5; border-radius:8px;} .boardBox .addCatogoryBox ul.myCategoryList li.active {color:red; background-color:transparent; border:1px solid red;} .boardBox .addCatogoryBox ul.myCategoryList li:not(#showAddInpBtn) i {margin-left:4px; padding:6px; font-size:12px; color:#a8c1d5; background-color:#213d52; border-radius:6px; cursor:pointer; transition:all 0.2s;} .boardBox .addCatogoryBox ul.myCategoryList li:not(#showAddInpBtn) i:hover {background-color:red;} .boardBox .addCatogoryBox ul.myCategoryList li.active:not(#showAddInpBtn) i {color:#fff; background-color:red;} .boardBox .addCatogoryBox ul.myCategoryList li#showAddInpBtn {padding:6px 16px; background-color:var(--pointColor); border:none; cursor:pointer; transition:all 0.2s;} .boardBox .addCatogoryBox ul.myCategoryList li#showAddInpBtn:hover {background-color:var(--pointHoverColor);} .boardBox .addCatogoryBox .editCategoryBtn, .boardBox .addCatogoryBox .addCatogoryBtn {box-sizing:border-box; float:left; width:60px; height:40px; line-height:40px; color:#fff; background-color:#a8c1d5; text-align:center; cursor:pointer; transition:all 0.2s;} .boardBox .addCatogoryBox .editCategoryBtn:hover, .boardBox .addCatogoryBox .addCatogoryBtn:hover {background-color:#213d52;} @media screen and (min-width:1001px) { .boardBox .addCatogoryBox .editCategoryInp, .boardBox .addCatogoryBox .addCategoryInp {box-sizing:border-box; float:left; padding:10px; width:calc(50% - 60px); height:40px;} } @media screen and (max-width:1000px) { .boardBox .addCatogoryBox .editCategoryInp, .boardBox .addCatogoryBox .addCategoryInp {box-sizing:border-box; float:left; padding:10px; width:calc(100% - 60px); height:40px;} } /***** board data pallet *****/ ul.myDataPallet {margin:0 auto; width:100%; max-width:1600px; text-align:center;} ul.myDataPallet:after {display:block; clear:both; content:"";} ul.myDataPallet li {box-sizing:border-box; float:left; width:50%; max-width:200px;} @media screen and (min-width:1001px) { ul.myDataPallet li {padding:10px;} } @media screen and (max-width:1000px) { ul.myDataPallet li {padding:4px;} } ul.myDataPallet li .inBox {width:100%; height:100%; border-radius:8px; overflow:hidden; cursor:pointer;} ul.myDataPallet li .inBox:hover {box-shadow:4px 4px 8px 2px rgba(0,0,0,0.06);} .dark ul.myDataPallet li .inBox:hover {box-shadow:4px 4px 8px 2px rgba(0,0,0,0.2);} ul.myDataPallet li .inBox .bgBoxHidden {overflow:hidden;} ul.myDataPallet li .inBox .bgBoxHidden .bgBox {width:100%; height:180px; transition:all 0.2s;} ul.myDataPallet li .inBox:hover .bgBoxHidden .bgBox {transform:scale(1.06);} ul.myDataPallet li .inBox .txtBox {display:table; width:100%; height:100px; background-color:var(--bgColor); transition:all 0.2s;} .dark ul.myDataPallet li .inBox .txtBox {display:table; width:100%; height:100px; background-color:var(--bgColorDk); transition:all 0.2s;} ul.myDataPallet li .inBox:hover .txtBox {background-color:var(--pointColor);} .dark ul.myDataPallet li .inBox .txtBox {color:#777; background-color:rgba(0,0,0,0.4);} .dark ul.myDataPallet li .inBox:hover .txtBox {background-color:var(--pointHoverColor);} ul.myDataPallet li .inBox .txtBox div {display:table-cell; vertical-align:middle;} ul.myDataPallet li .inBox .txtBox div span:first-child {font-size:14px; font-weight:bold;} ul.myDataPallet li .inBox:hover .txtBox div span:first-child {color:#213d52;} ul.myDataPallet li .inBox .txtBox div span:last-child {font-size:13px; font-weight:bold; color:rgba(0,0,0,0.4);} .dark ul.myDataPallet li .inBox .txtBox div span:last-child {color:#444;;} .dark ul.myDataPallet li .inBox:hover .txtBox div span:last-child {color:rgba(0,0,0,0.4);} /***** board data pallet *****/ ul.myDataLine {margin:0 auto; width:100%; max-width:1600px; text-align:center;} ul.myDataLine:after {display:block; clear:both; content:"";} ul.myDataLine > li {box-sizing:border-box; margin-bottom:10px; width:100%; font-size:14px; background-color:#fff; border-radius:8px; transition:all 0.2s;} .dark ul.myDataLine > li {color:rgba(255,255,255,0.6); background-color:rgba(0,0,0,0.4);} ul.myDataLine > li:hover {box-shadow:4px 4px 20px 0 var(--shadowColor);} .dark ul.myDataLine > li:hover {box-shadow:4px 4px 20px 0 var(--shadowColorDk);} ul.myDataLine li:last-child {margin-bottom:0;} ul.myDataLine li:after {display:block; clear:both; content:"";} @media screen and (min-width:1001px) { ul.myDataLine li {padding:10px;} } @media screen and (max-width:1000px) { ul.myDataLine li {padding:4px;} } ul.myDataLine li .imgBox {float:left;} ul.myDataLine li .imgBox ul {width:100%; height:100%; text-align:left;} ul.myDataLine li .imgBox ul li {box-sizing:border-box; display:inline-block; margin:2px; width:100px; height:100px; text-align:center; border-radius:4px; vertical-align:middle;} ul.myDataLine li .imgBox ul li span {box-sizing:border-box; display:none; position:relative; padding:4px; top:20px; width:38px; font-size:20px; color:#000; background-color:var(--pointColor); box-shadow:2px 2px 20px 0 rgba(0,0,0,0.4); border-radius:20px; vertical-align:middle; cursor:pointer;} ul.myDataLine li .imgBox ul li:hover span {display:inline-block;} ul.myDataLine li .imgBox ul li:hover span:hover {background-color:var(--pointHoverColor);} ul.myDataLine li .txtBox {float:right; display:table; width:100%; max-width:100px; height:100px;} ul.myDataLine li .txtBox .wrapBox {display:table-cell; vertical-align:middle;} /***** board paging *****/ .boardBox ul.pagingBox {box-sizing:border-box; margin:20px auto 0; text-align:center;} .boardBox ul.pagingBox li {box-sizing:border-box; display:inline-block; margin:2px; font-size:14px; color:#fff; background-color:rgba(0,0,0,0.1); border-radius:10px; cursor:pointer; transition:all 0.2s;} .boardBox ul.pagingBox li:hover {color:var(--themeColor); background-color:#fff;} .boardBox ul.pagingBox li.on {color:#fff; background-color:var(--themeColor);} .boardBox ul.pagingBox li.on:hover {background-color:var(--themeHoverColor);} .dark .boardBox ul.pagingBox li {color:#ccc; background-color:rgba(0,0,0,0.4);} .dark .boardBox ul.pagingBox li:hover {background-color:rgba(0,0,0,0.6);} .dark .boardBox ul.pagingBox li.on {color:#fff; background-color:var(--bgColorDk);} .dark .boardBox ul.pagingBox li.on:hover {background-color:#000;} @media screen and (min-width:1001px) { .boardBox ul.pagingBox li {padding:4px 8px; min-width:28px;} } @media screen and (max-width:1000px) { .boardBox ul.pagingBox li {padding:2px 4px; min-width:20px;} } .boardBox .btnArea {box-sizing:border-box; margin:20px auto 0; width:100%; max-width:1600px; font-size:14px;} @media screen and (min-width:1001px) { .boardBox .btnArea {padding:10px;} } @media screen and (max-width:1000px) { .boardBox .btnArea {padding:10px 0;} } .boardBox .btnArea:after {display:block; clear:both; content:"";} .boardBox .btnArea .addBtn, .boardBox .btnArea .listBtn {padding:8px 16px; color:#fff; background-color:var(--themeColor); border-radius:4px; cursor:pointer; transition:all 0.2s;} .dark .boardBox .btnArea .addBtn, .boardBox .btnArea .listBtn {background-color:var(--themeColorDk);} .boardBox .btnArea .addBtn {float:left;} .boardBox .btnArea .listBtn {float:right;} .boardBox .btnArea .addBtn:hover, .boardBox .btnArea .listBtn:hover {background-color:var(--themeHoverColor);} .dark .boardBox .btnArea .addBtn:hover, .boardBox .btnArea .listBtn:hover {background-color:var(--themeHoverColorDk);} .boardBox .btnArea .editBtn {display:inline-block; padding:8px 16px; width:100%; max-width:200px; text-align:center; color:#fff; background-color:var(--themeColor); border-radius:4px; cursor:pointer; transition:all 0.2s;} .boardBox .btnArea .editBtn:hover {background-color:var(--themeHoverColor);} .dark .boardBox .btnArea .editBtn {background-color:var(--themeColorDk);} .dark .boardBox .btnArea .editBtn:hover {background-color:var(--themeHoverColorDk);} /***** allBody *****/ #allBody {position:relative; width:100%; height:calc(100vh - 100px); overflow-x:hidden; overflow-y:auto; transition:all 0.2s;} /***** left menu *****/ #allBody .mainLeftMenu {position:fixed; top:50px; width:var(--leftMenuWidth); height:calc(100vh - 100px); background-color:#fff; overflow-y:auto; z-index:2; transition:left 0.2s;} /***** mainContainer *****/ #allBody .mainContainer {float:right; display:flex; flex-direction:row; flex-grow: 1; width:calc(100% - var(--leftMenuWidth)); height:100%; transition:width 0.2s;} /***** img_popup_box *****/ #allBody .mainContainer #img_popup_box {display:none; position:relative; width:var(--rightPopWidth); height:calc(100vh - 100px); transition:all 0.2s; order:3;} /***** Resizer *****/ #allBody .mainContainer #rightResizer {flex:0 0 5px; width:5px; height:100%; background-color:var(--bgColor); cursor:col-resize; z-index:5; order:2;} #allBody .mainContainer #rightResizer:hover {background-color:var(--bgHoverColor);} /***** board Box *****/ #allBody .mainContainer .boardBox {margin:0 auto; padding:10px 0; flex:1 1 auto; min-width:0; color:#000; box-shadow:4px 4px 20px 0 var(--shadowColor) inset; overflow-y:auto; flex-grow:1; transition:width 0.2s; order: 1;} /***** left menu > childrens *****/ #allBody .mainLeftMenu::-webkit-scrollbar {display: none;} #allBody .mainLeftMenu .wrap {padding: 8px;} #allBody .mainLeftMenu ul {margin-bottom:24px; width:100%; height:100%; font-size:14px; border:1px solid var(--bgColor); border-radius:10px; overflow:hidden;} #allBody .mainLeftMenu ul li {display:table; width:100%; height:46px; text-align:left;} #allBody .mainLeftMenu ul li.ulTit {font-weight:bold;} #allBody .mainLeftMenu ul li .tableCell {display:table-cell; padding:0 6px; width:100%; height:100%; vertical-align:middle;} #allBody .mainLeftMenu ul li.active .tableCell {background-color: var(--bgColor);} #allBody .mainLeftMenu ul li:not(.ulTit, .active, .goboard) .tableCell:hover {background-image:linear-gradient(to top, var(--bgColor), transparent);} #allBody .mainLeftMenu ul li.active .tableCell:hover {background-color:var(--bgHoverColor);} #allBody .mainLeftMenu ul li .makersIcon {display:inline-block; width:30px; height:30px; text-align:center; border-radius:15px; vertical-align:middle;} #allBody .mainLeftMenu ul li span {display:inline; vertical-align:middle;} #allBody .mainLeftMenu ul li i {width:24px; height:24px; text-align:center; font-size:18px; vertical-align:sub;} #allBody .mainLeftMenu ul .btw {margin:0 20% 4px; width:60%; height:4px; background-color:var(--bgColor); border-radius:4px;} #allBody .mainLeftMenu ul li.goboard {text-align:center; font-weight:bold;} #allBody .mainLeftMenu ul li.goboard a {display:inline-block; padding:6px; width:48%; border-radius:6px;} #allBody .mainLeftMenu ul li.goboard a.active {background-color:var(--bgColor);} #allBody .mainLeftMenu ul li.goboard a:hover {background-image:linear-gradient(to top, var(--bgColor), transparent);} #allBody .mainLeftMenu ul li .subLink {float:right; display:inline-block; position:relative; top:-2px; padding:4px 8px; font-size:12px; color:#000; background-color:var(--bgColor); border-radius:8px;} #allBody .mainLeftMenu ul li .subLink:hover {background-color:var(--bgHoverColor);} #allBody .mainLeftMenu .menuBar {display:none; padding:16px 10%; width:100%;} #allBody .mainLeftMenu .menuBar span {display:block; width:100%; border-bottom:1px solid var(--bgColor);} .dark #allBody .mainLeftMenu {color:#777; background-color:var(--bgColorDk);} .dark #allBody .mainLeftMenu ul {border:1px solid rgba(255, 255, 255, 0.1);} .dark #allBody .mainLeftMenu ul .btw {background-color:rgba(255, 255, 255, 0.1);} .dark #allBody .mainLeftMenu ul li.active .tableCell {color:#ccc; background-color:rgba(255, 255, 255, 0.1);} .dark #allBody .mainLeftMenu ul li:not(.ulTit, .active, .goboard) .tableCell:hover {background-image:linear-gradient(to top, rgba(255,255,255,0.06), transparent);} .dark #allBody .mainLeftMenu ul li.active .tableCell:hover {background-color:rgba(255, 255, 255, 0.14);} .dark #allBody .mainLeftMenu ul li.goboard a.active {background-color:rgba(255, 255, 255, 0.1);} .dark #allBody .mainLeftMenu ul li.goboard a:hover {background-image:linear-gradient(to top, rgba(255, 255, 255, 0.1), transparent);} .dark #allBody .mainLeftMenu ul li .subLink {color:#999; background-color:rgba(255, 255, 255, 0.1);} .dark #allBody .mainLeftMenu ul li .subLink:hover {background-color:rgba(255, 255, 255, 0.14);} .dark #allBody .mainContainer .boardBox {color:#000; box-shadow:4px 4px 20px 0 var(--shadowColorDk) inset;} #allBody .mainContainer #rightResizer {display:none;} /* ===== 이미지팝과 동일한 도킹 레이아웃(클래스 atright/atfull) ===== */ #allBody .mainContainer #mix_popup_box.atright .mix-dim, #allBody .mainContainer #mix_popup_box.atfull .mix-dim {display:none;} #allBody .mainContainer #mix_popup_box.atright .mix-wrap, #allBody .mainContainer #mix_popup_box.atfull .mix-wrap { position: relative; inset: auto; width:100%; height:100%; border-radius:0; box-shadow:none; } /* ========== MIX POPUP 기본(오버레이) 스타일 ========== */ :root{ --mix-dock-w: 56px; --mix-gap: 12px; --mix-head-h: 48px; --mix-card-w: 300px; } #mix_popup_box {display:none; position:relative; color:#222; background-color:rgba(255,255,255,1); inset:auto; z-index:auto; order:3; transition:all 0.2s;} /* 인팝 모달 */ #mix_popup_box .mix_inpop {position:absolute; inset:0; display:none; z-index:999;} #mix_popup_box .mix_inpop.is-open {display:block;} #mix_popup_box .mix_inpop .bgBox {position:absolute; inset:0; background:rgba(255,255,255,0.4); backdrop-filter:blur(2px);} #mix_popup_box .mix_inpop .conBox{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:min(760px, calc(100% - 40px)); max-height:80vh; overflow:auto; background:#fff; color:#222; border-radius:16px; box-shadow:0 18px 36px rgba(0,0,0,.25); } #mix_popup_box .in-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(0,0,0,.08); } #mix_popup_box .tabs {display:flex; gap:6px;} #mix_popup_box .tab {padding:8px 12px; border:1px solid rgba(0,0,0,.12); border-radius:10px; background:#fff; cursor:pointer;} #mix_popup_box .tab.active {background:#111827; color:#fff; border-color:#111827;} #mix_popup_box .x {width:26px; height:26px; cursor:pointer;} #mix_popup_box .in-body {padding:14px;} #mix_popup_box .pane {display:none;} #mix_popup_box .pane.is-open {display:block;} #mix_popup_box .preset-grid {display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-bottom:12px;} #mix_popup_box .preset { padding:14px 12px; border:1px solid rgba(0,0,0,.12); border-radius:12px; background:#fff; cursor:pointer; text-align:center; font-weight:600; } #mix_popup_box .preset:hover {background:#f3f4f6;} #mix_popup_box .custom {display:flex; align-items:center; gap:8px; flex-wrap:wrap;} #mix_popup_box .custom input {width:110px; padding:8px; border:1px solid rgba(0,0,0,.15); border-radius:8px;} #mix_popup_box .recent-grid {display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px;} #mix_popup_box .recent-card {border:1px solid rgba(0,0,0,.12); border-radius:12px; overflow:hidden; cursor:pointer; background:#fff;} #mix_popup_box .recent-card .thumb {width:100%; padding-top:62%; background:#eee center/cover no-repeat;} #mix_popup_box .recent-card .meta {padding:8px 10px;} #mix_popup_box .recent-card .t {font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #mix_popup_box .recent-card .s {font-size:12px; color:#666;} /* 전체 틀 */ #mix_popup_box .mix-wrap {display:flex; flex-direction:column; height:100%; } #mix_popup_box .mix-header.minimal {display:block; padding:2px 0;} #mix_popup_box .mix-title {display:inline-block; margin-left:10px; padding:4px 0; font-weight:700;} #mix_popup_box .mix-title:after {display:block; clear:both; content:"";} #mix_popup_box .mix-title-btnArea {float:right;} #mix_popup_box .mix-title-btnArea .mix-title-btn {display:inline-block; width:32px; height:32px; font-size:16px; border:none; background-color:transparent; cursor:pointer;} #mix_popup_box .mix-title-btnArea .mix-title-btn:hover {background-color:#fff;} #mix_popup_box .mix-title-btnArea #mixCloseBtn:hover {color:red;} /* 헤더 오픈모드 버튼 */ #mix_popup_box.atright #mixOpenRightBtn {display:none;} #mix_popup_box.atfull #mixOpenFullBtn {display:none;} #mix_popup_box .mix-main {flex:1 1 auto; display:flex; min-height:0;} /* 좌측 아이콘 도크 */ #mix_popup_box .mix-dock{ flex:0 0 var(--mix-dock-w); min-width:var(--mix-dock-w); display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 6px; } #mix_popup_box .dock-btn{ width:36px; height:36px; border-radius:50%; border:none; background-color:transparent; font-size:16px; cursor:pointer; } #mix_popup_box .dock-btn:hover {background:rgba(0,0,0,0.1);} #mix_popup_box .dock-btn.active {background:rgba(0,0,0,0.1);} /* 작업영역(캔버스 + 패널) */ #mix_popup_box .mix-workarea {position:relative; flex:1 1 auto; min-width:0; overflow:hidden; background-image:repeating-linear-gradient(-45deg, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.04) 20px, transparent 20px, transparent 40px);} #mix_popup_box .mix-canvas-wrap {position:absolute; inset:0;} #mix_popup_box .mix-canvas-stage {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(1);} /* 캔버스 아이템의 배경 이미지 컨테이너 */ #mix_popup_box #mixCanvas .mix-item { position: absolute; } #mix_popup_box #mixCanvas .mix-item .mix-bg{ position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; /* 필요 시 repeat / repeat-x / repeat-y로 변경 */ background-size: contain; /* 필요 시 cover / 100% 100% 등으로 변경 */ pointer-events: none; /* 드래그/리사이즈는 바깥 .mix-item이 처리 */ user-select: none; } /* 조작 중인 아이템 하이라이트 */ /* (1) 선택 상태: 잔잔한 파란 점선 */ #mix_popup_box #mixCanvas .mix-item.selected::after{ content:""; position:absolute; inset:-1px; border:1px dashed rgba(0,128,255,.8); border-radius:4px; pointer-events:none; } /* (2) 조작 중: 빨간 실선 + HUD (active가 selected를 덮어씀) */ #mix_popup_box #mixCanvas .mix-item.is-active::before{ content: attr(data-w) "×" attr(data-h) " @ " attr(data-rot) "°"; position:absolute; right:0; top:-22px; font: 11px/1.6 system-ui, sans-serif; background: rgba(0,0,0,.75); color:#fff; padding:2px 6px; border-radius:4px; pointer-events:none; white-space:nowrap; } #mix_popup_box #mixCanvas .mix-item.is-active::after{ content:""; position:absolute; inset:-2px; /* 바깥으로 2px 정도 */ border:2px solid rgba(255,0,0,.9); border-radius:4px; pointer-events:none; /* 조작 방해 금지 */ box-shadow:0 0 0 1px rgba(255,255,255,.9) inset; /* 배경 밝을 때도 선명 */ } /* 패널 카드 스택 */ #mix_popup_box .panel-stack { position:absolute; left:var(--mix-gap); top:var(--mix-gap); width:100%; max-width:var(--mix-card-w); display:flex; flex-direction:column; gap:var(--mix-gap); z-index:3; pointer-events:none; /* 패널만 클릭되도록 */ } #mix_popup_box .panel-card { width:100%; max-width:var(--mix-card-w); background-color:rgba(255,255,255,0.4); background-image:linear-gradient(0deg,rgba(255,255,255,0.6),transparent); border:1px solid rgba(255,255,255,1.0); border-radius:8px; box-shadow:2px 2px 10px rgba(0,0,0,.20); pointer-events:auto; overflow:hidden; backdrop-filter:blur(2px); } #mix_popup_box .panel-card:not(.is-open) {display:none;} #mix_popup_box .panel-head {font-weight:700; padding:8px 8px 0;} #mix_popup_box .panel-body {padding:8px; max-height:40vh; overflow:auto;} #mix_popup_box .panel-body .row-2 {display:grid; grid-template-columns: 1fr 1fr; gap:8px;} #mix_popup_box .panel-body .w100 {width:100%;} /* === Settings 패널 === */ #mix_popup_box #mixSettingsPanel .panel-body {max-height:none; overflow:visible; padding:12px;} #mix_popup_box #mixSettingsPanel .field {display:flex; align-items:center; gap:8px; margin-bottom:10px;} #mix_popup_box #mixSettingsPanel .field > label {min-width:60px; font-size:14px; font-weight:600;} #mix_popup_box #mixSettingsPanel .grow {flex:1;} #mix_popup_box #mixSettingsPanel input.mix-input {padding:4px; width:100%;} #mix_popup_box #mixSettingsPanel select.mix-input {padding:4px; width:100%;} /* W×H 한 줄 */ #mix_popup_box #mixSettingsPanel .size-line {display:flex; align-items:center; gap:8px;} #mix_popup_box #mixSettingsPanel .size-line input {width:100%; max-width:120px;} #mix_popup_box #mixSettingsPanel .size-line .x {user-select:none; opacity:0.6;} /* 저장 버튼은 가로 가득, 위 여백 약간 */ #mix_popup_box #mixSettingsPanel .mix-btn.w100 {margin-top:4px; padding:4px; width:100%; color:#fff; background-color:#222; border:none; border-radius:4px; cursor:pointer;} #mix_popup_box #mixSettingsPanel .mix-btn.w100:hover {background-color:#000;} /* 숫자 인풋 스피너 제거(라이트 톤에서 깔끔) */ #mix_popup_box #mixSettingsPanel input[type="number"]::-webkit-outer-spin-button, #mix_popup_box #mixSettingsPanel input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;} #mix_popup_box #mixSettingsPanel input[type="number"] {-moz-appearance:textfield;} /* === Source 패널 === */ #mix_popup_box #mixSourcePanel .panel-body {min-height:180px; max-height:40vh;} #mix_popup_box #mixSourcePanel .src-tabs .mix-btn {padding:6px; min-width:60px; color:#222; background-color:#fff; border:none; border-radius:16px; cursor:pointer;} #mix_popup_box #mixSourcePanel .src-tabs .mix-btn:hover {background-color:#eee;} #mix_popup_box #mixSourcePanel .src-tabs .mix-btn.active {color:#eee; background-color:#222;} #mix_popup_box #mixSourcePanel .src-search {padding-top:10px; width:100%;} #mix_popup_box #mixSourcePanel .src-search .src-input {padding:4px; width:calc(100% - 65px); border:1px solid #eee; border-radius:4px; vertical-align:middle;} #mix_popup_box #mixSourcePanel .src-search .mix-btn {padding:2px 4px; width:60px; text-align:center; background-color:#eee; border:1px solid #eee; border-radius:4px; vertical-align:middle; cursor:pointer;} #mix_popup_box #mixSourcePanel .src-search .mix-btn:hover {background-color:#ccc; border:1px solid #ccc;} #mix_popup_box #mixSourcePanel .panel-body .src-grid {display:grid; gap:0; grid-auto-rows:44px; grid-auto-flow:dense; grid-template-columns:repeat(6, 1fr);} #mix_popup_box #mixSourcePanel .panel-body .src-grid .src-item {grid-column:span 2; grid-row:span 2; position:relative; padding:2px; min-width:40px; font-size:0; vertical-align:middle;} #mix_popup_box #mixSourcePanel .panel-body .src-grid .src-item:hover {background-image:repeating-linear-gradient(-45deg, transparent 0, transparent 10px, rgba(255,0,0,0.8) 10px, rgba(255,0,0,0.8) 20px);} #mix_popup_box #mixSourcePanel .panel-body .src-grid .src-item .pick {position:absolute; bottom:6px; right:6px; padding:2px 4px; font-size:12px; color:#fff; background-color:#222; border-radius:4px; cursor:pointer;} #mix_popup_box #mixSourcePanel .panel-body .src-grid .src-item .pick:hover {background-color:#444;} #mix_popup_box #mixSourcePanel .panel-body .src-grid .src-item .img {display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:6px;} /* === Layer 패널 === */ #mix_popup_box #mixLayerPanel .panel-body {min-height:180px; max-height:30vh;} #mix_popup_box #mixLayerPanel #layerList {width:100%;} #mix_popup_box #mixLayerPanel #layerList .layer-item {padding:2px; width:100%; font-size:14px; border-radius:4px; vertical-align:middle;} #mix_popup_box #mixLayerPanel #layerList .layer-item:hover {background-color:rgba(255,255,255,1.0);} #mix_popup_box #mixLayerPanel #layerList .layer-item .eye {display:inline-block; padding:4px; width:28px; text-align:center; border-radius:8px; cursor:pointer;} #mix_popup_box #mixLayerPanel #layerList .layer-item .lock {display:inline-block; padding:4px; width:28px; text-align:center; border-radius:8px; cursor:pointer;} #mix_popup_box #mixLayerPanel #layerList .layer-item .name {display:inline-block; width:calc(100% - 94px);} #mix_popup_box #mixLayerPanel #layerList .layer-item .del {display:inline-block; padding:4px; width:26px; border:none; background-color:transparent; border-radius:8px; cursor:pointer;} #mix_popup_box #mixLayerPanel #layerList .layer-item .eye:hover, #mix_popup_box #mixLayerPanel #layerList .layer-item .lock:hover, #mix_popup_box #mixLayerPanel #layerList .layer-item .del:hover {background-color:#eee;} /* === 하단 툴바 === */ #mix_popup_box .mix-toolbar {display:block; position:relative; text-align:center; padding:10px; background:#14171d} #mix_popup_box .mix-chip {padding:8px 10px; border-radius:999px; border:1px solid #2a2e36; color:#eee; background:#0f1217; cursor:pointer} #mix_popup_box .mix-chip.active {color:#fff; background-color:#222;} #mix_popup_box .muted {display:none; position:absolute; top:8px; left:8px;} /* === 다크모드 === */ .dark #mix_popup_box {color:#ccc; background-color:var(--bgColorDk);} .dark #mix_popup_box .mix_inpop .bgBox {background-color:rgba(0,0,0,0.4);} .dark #mix_popup_box .dock-btn {color:#ccc;} .dark #mix_popup_box .dock-btn:hover {background-color:rgba(0,0,0,0.2);} .dark #mix_popup_box .dock-btn.active {background-color:rgba(0,0,0,1.0);} .dark #mix_popup_box .mix-workarea {background-image:repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(0,0,0,0.4) 20px,rgba(0,0,0,0.4) 40px);} .dark #mix_popup_box .panel-card {background-color:rgba(0,0,0,0.4); background-image:linear-gradient(0deg, rgba(0,0,0,0.8), transparent); border:1px solid rgba(0,0,0,1.0);} .dark #mix_popup_box #mixSettingsPanel .mix-btn.w100 {color:#fff; background-color:#222;} .dark #mix_popup_box #mixSettingsPanel .mix-btn.w100:hover {background-color:#444;} .dark #mix_popup_box #mixSourcePanel .src-tabs .mix-btn {color:#ccc; background-color:#222;} .dark #mix_popup_box #mixSourcePanel .src-tabs .mix-btn:hover {background-color:#444;} .dark #mix_popup_box #mixSourcePanel .src-tabs .mix-btn.active {color:#000; background-color:#eee;} .dark #mix_popup_box #mixLayerPanel #layerList .layer-item:hover {background-color:rgba(0,0,0,1.0);} .dark #mix_popup_box #mixLayerPanel #layerList .layer-item .eye, .dark #mix_popup_box #mixLayerPanel #layerList .layer-item .lock, .dark #mix_popup_box #mixLayerPanel #layerList .layer-item .del {color:#ccc;} .dark #mix_popup_box #mixLayerPanel #layerList .layer-item .eye:hover, .dark #mix_popup_box #mixLayerPanel #layerList .layer-item .lock:hover, .dark #mix_popup_box #mixLayerPanel #layerList .layer-item .del:hover {color:#000;} /***** Responsive *****/ @media screen and (min-width: 1001px) { #allBody .mainLeftMenu {left:0; transition-delay:0.2s;} #allBody .mainLeftMenu.show {left:0; transition-delay:0.2s;} #allBody .mainLeftMenu.hide {left:calc(-1 * var(--leftMenuWidth)); transition-delay:0.0s;} #allBody .mainContainer {flex-direction:row; width:calc(100% - var(--leftMenuWidth)); transition-delay:0.0s;} #allBody:has(.mainLeftMenu.show) .mainContainer {width:calc(100% - var(--leftMenuWidth)); transition-delay:0.0s;} #allBody:has(.mainLeftMenu.hide) .mainContainer {width:100%; transition-delay:0.2s;} /* 팝업(이미지/믹스) 우측/전체 모드 */ #allBody .mainContainer :is(#img_popup_box,#mix_popup_box).atright {display:block; width:var(--rightPopWidth);} #allBody .mainContainer :is(#img_popup_box,#mix_popup_box).atfull {display:block; width:100%;} /* 어느 쪽이든 atright/atfull이면 boardBox 폭 연동 */ #allBody .mainContainer:has(:is(#img_popup_box,#mix_popup_box).atright) .boardBox {width:calc(100% - var(--rightPopWidth) - 5px);} #allBody .mainContainer:has(:is(#img_popup_box,#mix_popup_box).atfull) .boardBox {width:0;} /* 리사이저는 우측 모드일 때만 */ #allBody .mainContainer:has(:is(#img_popup_box,#mix_popup_box).atright) #rightResizer {display:block;} } @media screen and (min-width: 601px) and (max-width: 1000px) { #allBody .mainLeftMenu {left:calc(-1 * var(--leftMenuWidth)); transition-delay:0.0s;} #allBody .mainLeftMenu.show {left:0;} #allBody .mainLeftMenu.hide {left:calc(-1 * var(--leftMenuWidth));} #allBody .mainContainer {flex-direction:row; width:100%;} /* 기본 폭은 이미지팝에서 쓰던 규칙 유지 */ /* #allBody .mainContainer #img_popup_box {width:46%;} */ #allBody .mainContainer :is(#img_popup_box,#mix_popup_box).atright {display:block; width:var(--rightPopWidth);} #allBody .mainContainer :is(#img_popup_box,#mix_popup_box).atfull {display:block; width:100%;} #allBody .mainContainer:has(:is(#img_popup_box,#mix_popup_box).atright) .boardBox {width:calc(100% - var(--rightPopWidth) - 5px);} #allBody .mainContainer:has(:is(#img_popup_box,#mix_popup_box).atfull) .boardBox {width:0;} #allBody .mainContainer:has(:is(#img_popup_box,#mix_popup_box).atright) #rightResizer {display:block;} } @media screen and (max-width: 600px) { #allBody .mainLeftMenu {left:calc(-1 * var(--leftMenuWidth)); transition-delay:0.0s;} #allBody .mainLeftMenu.show {left:0;} #allBody .mainLeftMenu.hide {left:calc(-1 * var(--leftMenuWidth));} #allBody .mainContainer {flex-direction:column; width:100%;} #allBody .mainContainer :is(#img_popup_box,#mix_popup_box).atright {display:block; width:100%; height:50vh;} #allBody .mainContainer :is(#img_popup_box,#mix_popup_box).atfull {display:block; width:100%; height:100%;} #allBody .mainContainer .boardBox {width:100%; height:100%;} #allBody .mainContainer:has(:is(#img_popup_box,#mix_popup_box).atright) .boardBox {height:50vh;} #allBody .mainContainer:has(:is(#img_popup_box,#mix_popup_box).atfull) .boardBox {display:none;} } @keyframes loadingSpin { 0% {transform:rotate(0deg);} 25% {transform:rotate(90deg);} 50% {transform:rotate(180deg);} 75% {transform:rotate(270deg);} 100% {transform:rotate(360deg);} } /***** board img popup layout *****/ #img_popup_box {position:fixed; top:0; left:0; width:100%; height:100%; z-index:9;} #img_popup_box .popup_bg {position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.8);} #img_popup_box .contents_box {position:absolute; width:100%; height:100%; z-index:10;} #img_popup_box .contents_box .contents_cell {width:100%; height:100%; text-align:center; vertical-align:middle;} #img_popup_box .contents_box .contents_cell .contents_wrap {position:relative; margin:0 auto; width:100%; height:100%; background-color:rgba(255,255,255,1); border-radius:0; overflow:hidden;} #img_popup_box .contents_box .contents_cell .contents_wrap:after {display:block; clear:both; content:"";} #img_popup_box .contents_box .contents_cell .contents_wrap > ul.imgGroupList {position:absolute; top:0; left:0; width:100%; height:100%;} #img_popup_box .contents_box .contents_cell .contents_wrap > ul.imgGroupList:after {display:block; clear:both; content:"";} #img_popup_box .contents_box .contents_cell .contents_wrap > ul.imgGroupList > li {float:left; position:relative; width:100%; height:100%;} #img_popup_box .contents_box .contents_cell .contents_wrap .directL {position:absolute; top:calc(50% - 50px); left:10px; width:38px; height:38px; line-height:30px; font-size:30px; font-weight:bold; color:#000; background-color:rgba(255,255,255,0.4); border-radius:20px; box-shadow:2px 2px 4px 0 rgba(0,0,0,0.2); cursor:pointer;} #img_popup_box .contents_box .contents_cell .contents_wrap .directR {position:absolute; top:calc(50% - 50px); right:10px; width:38px; height:38px; line-height:30px; font-size:30px; font-weight:bold; color:#000; background-color:rgba(255,255,255,0.4); border-radius:20px; box-shadow:2px 2px 4px 0 rgba(0,0,0,0.2); cursor:pointer;} #img_popup_box .contents_box .contents_cell .contents_wrap .directL:hover, #img_popup_box .contents_box .contents_cell .contents_wrap .directR:hover {background-color:rgba(255,255,255,0.8); box-shadow:2px 2px 4px 0 rgba(0,0,0,0.4);} /** src box **/ #img_popup_box .contents_box .contents_wrap .imgSourceWrap {float:right; display:block; position:relative; width:100%; height:100%; text-align:center; white-space:nowrap; background:repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(0,0,0,0.04) 20px,rgba(0,0,0,0.04) 40px); overflow:auto; cursor:grab;} #img_popup_box .contents_box .contents_wrap .imgSourceWrap:active {cursor: grabbing;} /** info box **/ #img_popup_box .contents_box .contents_wrap .imgInfoWrap {position:absolute; padding:0; top:0; left:0; width:0; max-width:100%; height:100%; text-align:left;} #img_popup_box .contents_box .contents_wrap .imgInfoWrap .imgMarkBox:not(.active) {position:absolute; top:0;} #img_popup_box .contents_box .contents_wrap .imgInfoWrap .imgChatBox:not(.active) {position:absolute; top:0;} /** mark box **/ #img_popup_box .contents_box .contents_wrap .imgMarkBox {display:none; position:absolute; left:0; top:10px; width:400px; max-width:calc(100vw - 20px); min-height:200px; text-align:left; font-size:13px; background-color:rgba(255,255,255,0.1); background-image:linear-gradient(0deg, transparent 0px, rgba(255,255,255,0.8) 2px, transparent 98%);; border-top:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.2); border-radius:8px; color:#000; box-shadow: 2px 2px 8px 0 rgba(0,0,0,0.2); opacity:0; transition:height 0.6s; z-index:-1;} #img_popup_box .contents_box .contents_wrap .imgMarkBox:after {display:block; clear:both; content:"";} #img_popup_box .contents_box .contents_wrap .imgMarkBox.active {display:block; padding:10px; opacity:1; z-index:1;} #img_popup_box .contents_box .contents_wrap .imgMarkBox.active:hover {background-color:rgba(255,255,255,0.4); z-index:999;} #img_popup_box .contents_box .contents_wrap .imgMarkBox .blrBox {display:block; position:absolute; margin:0; top:0; left:0; width:100%; height:100%; backdrop-filter:blur(2px); z-index:-1;} #img_popup_box .contents_box .contents_wrap .imgMarkBox .tipWrap {width:100%; cursor:move;} #img_popup_box .contents_box .contents_wrap .imgMarkBox .tipWrap .titleLine {margin-bottom:10px; width:100%;} #img_popup_box .contents_box .contents_wrap .imgMarkBox .tipWrap .titleLine:after {display:block; clear:both; content:"";} #img_popup_box .contents_box .contents_wrap .imgMarkBox .tipWrap .titleLine .tit {float:left; display:inline-block; padding:4px 0;} #img_popup_box .contents_box .contents_wrap .imgMarkBox .tipWrap .closeBtn {float:right; display:inline-block; padding:3px; width:26px; height:26px; text-align:center; border-radius:16px; cursor:pointer;} #img_popup_box .contents_box .contents_wrap .imgMarkBox .tipWrap .closeBtn:hover {color:#fff; background-color:rgba(0,0,0,0.8);} #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent {display:block; margin-bottom:8px; padding:4px; width:100%; min-height:80px; border-radius:8px; overflow-y:auto;} #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent:after {display:block; clear:both; content:"";} #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent li {display:block; margin-bottom:4px; width:100%;} #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent li:after {display:block; clear:both; content:"";} #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent li .oneMark {display:block;} #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent li .oneMark.you {text-align:left;} #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent li .oneMark.me {text-align:right;} #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent li .oneMark .chatUser {float:left; width:100%;} #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent li .oneMark .chatUser i {font-size:8px; color:var(--pointBlue); vertical-align:text-top;} #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent li .oneMark .chatBalloon {display:inline-block; padding:4px 10px; background-color:rgba(255,255,255,1.0); border:1px solid #000;} #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent li .oneMark.you .chatBalloon {float:left; border-radius:0 14px 14px 14px;} #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent li .oneMark.me .chatBalloon {float:right; border-radius:14px 0 14px 14px;} #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent li .oneMark .chatreg {display:inline-block; position:relative; bottom:-4px; padding:4px; font-size:12px; color:#999;} #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent li .oneMark.you .chatreg {float:left;} #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent li .oneMark.me .chatreg {float:right;} #img_popup_box .contents_box .contents_wrap .imgMarkBox .popMarkControllBox {box-sizing:border-box; display:block; width:100%;} #img_popup_box .contents_box .contents_wrap .imgMarkBox .popMarkControllBox:after {display:block; clear:both; content:"";} #img_popup_box .contents_box .contents_wrap .imgMarkBox .popMarkControllBox .popMarkSubmitContent {box-sizing:border-box; display:block; padding:10px 12px; width:100%; min-height:80px; line-height:1.5; font-size:14px; color:#333; background-color:#fff; border:1px solid #ddd; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.05); resize: none; transition: border-color 0.2s, box-shadow 0.2s;} #img_popup_box .contents_box .contents_wrap .imgMarkBox .popMarkControllBox .popMarkSubmitContent:focus {border-color:var(--themeColor); box-shadow:0 0 0 2px rgba(0, 123, 255, 0.2); outline:none;} #img_popup_box .contents_box .contents_wrap .imgMarkBox .popMarkControllBox .submitBtn {display:inline-block; margin-top:8px; padding:6px 16px; text-align:center; font-size:13px; color:#fff; background-color:#000; border-radius:20px; cursor:pointer; transition: background-color 0.2s, box-shadow 0.2s;} #img_popup_box .contents_box .contents_wrap .imgMarkBox .popMarkControllBox .submitBtn:hover {background-color:#222; box-shadow:0 2px 8px rgba(0,0,0,0.15);} /** chat box **/ #img_popup_box .contents_box .contents_wrap .imgChatBox {display:none; position:absolute; left:0; top:10px; width:400px; max-width:calc(100vw - 80px); height:calc(100% - 53px); text-align:left; font-size:13px; color:#000; background-color:rgba(255,255,255,0.1); background-image:linear-gradient(0deg, transparent 0px, rgba(255,255,255,0.8) 2px, transparent 98%); border-top:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.2); border-radius:8px; box-shadow:2px 2px 8px 0 rgba(0,0,0,0.2); opacity:0; overflow: hidden; transition:height 0.6s; z-index:-1;} #img_popup_box .contents_box .contents_wrap .imgChatBox:after {display:block; clear:both; content:"";} #img_popup_box .contents_box .contents_wrap .imgChatBox.active {display:block; padding:10px; opacity:1; z-index:1;} #img_popup_box .contents_box .contents_wrap .imgChatBox.active:hover {background-color:rgba(255,255,255,0.6); z-index:999;} #img_popup_box .contents_box .contents_wrap .imgChatBox .blrBox {display:block; position:absolute; margin:0; top:0; left:0; width:100%; height:100%; backdrop-filter:blur(2px); z-index:-1;} #img_popup_box .contents_box .contents_wrap .imgChatBox .tipWrap {width:100%; height:100%; cursor:move;} #img_popup_box .contents_box .contents_wrap .imgChatBox .tipWrap .titleLine {margin-bottom:10px; width:100%;} #img_popup_box .contents_box .contents_wrap .imgChatBox .tipWrap .titleLine:after {display:block; clear:both; content:"";} #img_popup_box .contents_box .contents_wrap .imgChatBox .tipWrap .titleLine .tit {float:left; display:inline-block; padding:4px 0;} #img_popup_box .contents_box .contents_wrap .imgChatBox .tipWrap .closeBtn {float:right; display:inline-block; padding:3px; width:26px; height:26px; text-align:center; border-radius:16px; cursor:pointer;} #img_popup_box .contents_box .contents_wrap .imgChatBox .tipWrap .closeBtn:hover {color:#fff; background-color:rgba(0,0,0,0.8);} #img_popup_box .contents_box .contents_wrap .imgChatBox .tipWrap .con {display:block; width:100%; height:calc(100% - 37px);} #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent {display:block; margin-bottom:8px; padding:4px; width:100%; height:calc(100% - 128px); min-height:80px; border-radius:8px; overflow-y:auto;} #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent:after {display:block; clear:both; content:"";} #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent li {display:block; margin-bottom:4px; width:100%;} #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent li:after {display:block; clear:both; content:"";} #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent li .oneChat {display:block;} #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent li .oneChat.you {text-align:left;} #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent li .oneChat.me {text-align:right;} #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent li .oneChat .chatUser {float:left; width:100%;} #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent li .oneChat .chatUser i {font-size:8px; color:var(--pointBlue); vertical-align:text-top;} #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent li .oneChat .chatBalloon {display:inline-block; padding:4px 10px; background-color:rgba(255,255,255,1.0); border:1px solid #000;} #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent li .oneChat.you .chatBalloon {float:left; border-radius:0 14px 14px 14px;} #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent li .oneChat.me .chatBalloon {float:right; border-radius:14px 0 14px 14px;} #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent li .oneChat .chatreg {display:inline-block; position:relative; bottom:-4px; padding:4px; font-size:12px; color:#999;} #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent li .oneChat.you .chatreg {float:left;} #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent li .oneChat.me .chatreg {float:right;} #img_popup_box .contents_box .contents_wrap .imgChatBox .popChatControllBox {box-sizing:border-box; display:block; width:100%;} #img_popup_box .contents_box .contents_wrap .imgChatBox .popChatControllBox:after {display:block; clear:both; content:"";} #img_popup_box .contents_box .contents_wrap .imgChatBox .popChatControllBox .popChatSubmitContent {box-sizing:border-box; display:block; padding:10px 12px; width:100%; min-height:80px; line-height:1.5; font-size:14px; color:#333; background-color:#fff; border:1px solid #ddd; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.05); resize: none; transition: border-color 0.2s, box-shadow 0.2s;} #img_popup_box .contents_box .contents_wrap .imgChatBox .popChatControllBox .popChatSubmitContent:focus {border-color:var(--themeColor); box-shadow:0 0 0 2px rgba(0, 123, 255, 0.2); outline:none;} #img_popup_box .contents_box .contents_wrap .imgChatBox .popChatControllBox .submitBtn {display:inline-block; margin-top:8px; padding:6px 16px; text-align:center; font-size:13px; color:#fff; background-color:#000; border-radius:20px; cursor:pointer; transition: background-color 0.2s, box-shadow 0.2s;} #img_popup_box .contents_box .contents_wrap .imgChatBox .popChatControllBox .submitBtn:hover {background-color:#222; box-shadow:0 2px 8px rgba(0,0,0,0.15);} /** enter box **/ #img_popup_box .contents_box .contents_wrap .imgEnterBox {display:inline-block; margin:0; padding:10px; position:absolute; margin:0; left:0; bottom:10px; text-align:left; font-size:14px; color:#000; background-color:rgba(255,255,255,0.2); border-top:1px solid rgba(255,255,255,0.2); border-radius:30px; box-shadow:2px 2px 16px 0 rgba(0,0,0,0.1);} #img_popup_box .contents_box .contents_wrap .imgEnterBox:hover {background-color:rgba(255,255,255,0.6); z-index:999;} #img_popup_box .contents_box .contents_wrap .imgEnterBox:after {display:block; clear:both; content:"";} #img_popup_box .contents_box .contents_wrap .imgEnterBox .enterBtn {display:table; padding:6px; width:40px; height:40px; text-align:center; background:#fff; border:1px solid #fff; border-radius:20px; box-shadow:2px 2px 4px 0 rgba(0,0,0,0.2); cursor:pointer; transition:all 0.2s;} #img_popup_box .contents_box .contents_wrap .imgEnterBox .enterBtn:last-child {margin-bottom:0;} #img_popup_box .contents_box .contents_wrap .imgEnterBox .enterBtn:hover {border:1px solid #000; box-shadow: 0 0 5px rgba(0,0,0,0.2);} /* 오픈된 영역 indicator */ #img_popup_box .contents_box .contents_wrap .imgEnterBox .enterBtn.opened { background-image:linear-gradient(0deg, rgba(0,0,0,0.2), transparent); } #img_popup_box .contents_box .contents_wrap .imgEnterBox .enterBtn > span {display:table-cell; vertical-align:middle;} #img_popup_box .contents_box .contents_wrap .imgEnterBox .nametag {display:block; margin-bottom:6px; text-align:center;} /** text box **/ #img_popup_box .contents_box .contents_wrap .imgTxtBox {display:none; position:absolute; padding:10px; left:0; top:10px; width:400px; max-width:calc(100vw - 20px); text-align:left; font-size:13px; background-color:rgba(255,255,255,0.1); background-image:linear-gradient(0deg, rgba(255,255,255,0.8), transparent); border-top:1px solid rgba(255,2255,255,0.2); border-radius:8px; box-shadow:2px 2px 8px 0 rgba(0,0,0,0.2); overflow: hidden;} #img_popup_box .contents_box .contents_wrap .imgTxtBox:hover {background-color:rgba(255,255,255,0.4); z-index:999;} #img_popup_box .contents_box .contents_wrap .imgTxtBox.active {display:block;} #img_popup_box .contents_box .contents_wrap .imgTxtBox:after {display:block; clear:both; content:"";} #img_popup_box .contents_box .contents_wrap .imgTxtBox > div {display:inline-block; position:relative; margin-bottom:6px; width:100%; vertical-align:middle;} #img_popup_box .contents_box .contents_wrap .imgTxtBox > div:last-child {margin-bottom:0;} #img_popup_box .contents_box .contents_wrap .imgTxtBox .blrBox {display:block; position:absolute; margin:0; top:0; left:0; width:100%; height:100%; backdrop-filter:blur(2px); z-index:0;} #img_popup_box .contents_box .contents_wrap .imgTxtBox .imgName {box-sizing:border-box; position:relative; cursor:move;} #img_popup_box .contents_box .contents_wrap .imgTxtBox .imgName:after {display:block; clear:both; content:"";} #img_popup_box .contents_box .contents_wrap .imgTxtBox .fontL {float:left; font-size:16px; font-weight:bold;} #img_popup_box .contents_box .contents_wrap .imgTxtBox .tit {display:inline-block;} #img_popup_box .contents_box .contents_wrap .imgTxtBox .btnsArea {float:right;} #img_popup_box .contents_box .contents_wrap .imgTxtBox .popFollowBtn {margin-left:4px; padding:6px 16px; font-size:12px; color:#fff; background-color:rgba(0,0,0,0.8); border-radius:16px; cursor:pointer;} #img_popup_box .contents_box .contents_wrap .imgTxtBox .popFollowBtn:hover {background-color:rgba(0,0,0,1.0);} #img_popup_box .contents_box .contents_wrap .imgTxtBox .popFollowBtn.disabled {background-color:rgba(0,0,0,0.2);} #img_popup_box .contents_box .contents_wrap .imgTxtBox .popFollowBtn.active i {color:var(--pointColor);} #img_popup_box .contents_box .contents_wrap .imgTxtBox .popLikeBtn {display:inline-block; padding:3px; width:26px; text-align:center; font-size:14px; border-radius:16px; cursor:pointer;} #img_popup_box .contents_box .contents_wrap .imgTxtBox .popLikeBtn:hover {color:#fff; background-color:rgba(0,0,0,0.8);} #img_popup_box .contents_box .contents_wrap .imgTxtBox .popMarkBtn {display:inline-block; padding:3px; width:26px; text-align:center; font-size:14px; border-radius:16px; cursor:pointer;} #img_popup_box .contents_box .contents_wrap .imgTxtBox .popMarkBtn:hover {color:#fff; background-color:rgba(0,0,0,0.8);} #img_popup_box .contents_box .contents_wrap .imgTxtBox .txtara {box-sizing:border-box; padding:4px; width:100%; height:100px; border:1px solid #eee; border-radius:8px;} #img_popup_box .contents_box .contents_wrap .imgTxtBox #jellysUseImgList {display:none; box-sizing:border-box; font-size:12px; background-color:#fff; border:1px solid #000; border-radius:4px; overflow:hidden;} #img_popup_box .contents_box .contents_wrap .imgTxtBox #jellysUseImgList ul li {box-sizing:border-box; padding:8px 4px; width:100%; cursor:pointer;} #img_popup_box .contents_box .contents_wrap .imgTxtBox #jellysUseImgList ul li:first-child {position:relative; color:#fff; background-color:#000; border-bottom:1px solid #000;} #img_popup_box .contents_box .contents_wrap .imgTxtBox #jellysUseImgList ul li:first-child .jellyListcloseBtn {position:absolute; top:2px; right:4px; padding:6px 10px; font-weight:bold;} #img_popup_box .contents_box .contents_wrap .imgTxtBox #jellysUseImgList ul li:first-child .jellyListcloseBtn:hover {color:red;} #img_popup_box .contents_box .contents_wrap .imgTxtBox #jellysUseImgList ul li:not(:first-child):hover {color:#000; text-decoration:underline;} #img_popup_box.dashboard .contents_box .contents_wrap .imgTxtBox .tit {min-width:72px;} #img_popup_box.dashboard .contents_box .contents_wrap .imgTxtBox .inp {box-sizing:border-box; padding:4px; width:calc(100% - 86px); height:30px; border:1px solid #eee; border-radius:4px; vertical-align:middle;} /** dark mode **/ .dark #img_popup_box .contents_box .contents_cell .contents_wrap {background-color:var(--bgColorDk);} .dark #img_popup_box .contents_box .contents_wrap .imgSourceWrap {background:repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(0,0,0,0.4) 20px,rgba(0,0,0,0.4) 40px)} .dark #img_popup_box .contents_box .contents_wrap .imgEnterBox {background-color:rgba(0,0,0,0.4);} .dark #img_popup_box .contents_box .contents_wrap .imgEnterBox .enterBtn {color:#fff; background-color:#000; border:1px solid #000;} .dark #img_popup_box .contents_box .contents_wrap .imgMarkBox {color:#fff; background-color:rgba(0,0,0,0.4); background-image:linear-gradient(to top, rgba(0,0,0,0.8), transparent); border-top:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.1);} .dark #img_popup_box .contents_box .contents_wrap .imgMarkBox:hover {background-color:rgba(0,0,0,0.8);} .dark #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent {color:#000;} .dark #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent li .oneChat .chatUser {color:#ccc;} .dark #img_popup_box .contents_box .contents_wrap .imgMarkBox ul.popMarkListContent li .oneChat .chatBalloon {color:#ccc; background-color:rgba(0,0,0,0.8); border:1px solid #444;} .dark #img_popup_box .contents_box .contents_wrap .imgMarkBox .popMarkControllBox .submitBtn {color:#000; background-color:#fff;} .dark #img_popup_box .contents_box .contents_wrap .imgMarkBox .popMarkControllBox .submitBtn:hover {background-color:#ccc;} .dark #img_popup_box .contents_box .contents_wrap .imgMarkBox .popMarkControllBox .popMarkSubmitContent {color:#ccc; background-color:rgba(0,0,0,0.8); border:1px solid #444;} .dark #img_popup_box .contents_box .contents_wrap .imgChatBox {color:#fff; background-color:rgba(0,0,0,0.4); background-image:linear-gradient(to top, rgba(0,0,0,0.8), transparent); border-top:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.1);} .dark #img_popup_box .contents_box .contents_wrap .imgChatBox:hover {background-color:rgba(0,0,0,0.8);} .dark #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent {color:#000;} .dark #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent li .oneChat .chatUser {color:#ccc;} .dark #img_popup_box .contents_box .contents_wrap .imgChatBox ul.popChatListContent li .oneChat .chatBalloon {color:#ccc; background-color:rgba(0,0,0,0.8); border:1px solid #444;} .dark #img_popup_box .contents_box .contents_wrap .imgChatBox .popChatControllBox .submitBtn {color:#000; background-color:#fff;} .dark #img_popup_box .contents_box .contents_wrap .imgChatBox .popChatControllBox .submitBtn:hover {background-color:#ccc;} .dark #img_popup_box .contents_box .contents_wrap .imgChatBox .popChatControllBox .popChatSubmitContent {color:#ccc; background-color:rgba(0,0,0,0.8); border:1px solid #444;} .dark #img_popup_box .contents_box .contents_wrap .imgTxtBox {background-color:rgba(0,0,0,0.4); background-image:linear-gradient(to top, rgba(0,0,0,0.8), transparent);} .dark #img_popup_box .contents_box .contents_wrap .imgTxtBox:hover {background-color:rgba(0,0,0,0.8);} .dark #img_popup_box.dashboard .contents_box .contents_wrap .imgTxtBox .inp {background-color:#222; border:1px solid #444;} .dark #img_popup_box .contents_box .contents_wrap .imgTxtBox .txtara {color:#fff; background-color:#222; border:1px solid #444;} /* 오픈된 영역 indicator */ .dark #img_popup_box .contents_box .contents_wrap .imgEnterBox:hover {background-color:rgba(0,0,0,0.8);} .dark #img_popup_box .contents_box .contents_wrap .imgEnterBox .enterBtn:hover {border:1px solid #777;} .dark #img_popup_box .contents_box .contents_wrap .imgEnterBox .enterBtn.opened { background-image:linear-gradient(0deg, rgba(255,255,255,0.4), transparent); } .dark #img_popup_box .contents_box .contents_wrap .imgEnterBox .nametag {color:#fff;} /** @media screen and (min-width:1001px) { #img_popup_box .contents_box .contents_wrap .imgInfoWrap {position:absolute; padding:0; top:0; left:0; width:0; max-width:100%; height:100%; text-align:left;} #img_popup_box .contents_box .contents_wrap .imgInfoWrap .imgMarkBox:not(.active) {position:absolute; top:0;} #img_popup_box .contents_box .contents_wrap .imgInfoWrap .imgChatBox:not(.active) {position:absolute; top:0;} #img_popup_box .contents_box .contents_cell .contents_wrap {width:100%; height:100%;} #img_popup_box .contents_box .contents_wrap .imgSourceWrap {float:right; position:relative; width:100%; height:100%; overflow:auto;} #img_popup_box .contents_box .contents_wrap .imgMarkBox {position:absolute; left:0; top:10px; width:400px; min-height:200px;} #img_popup_box .contents_box .contents_wrap .imgChatBox {position:absolute; left:0; top:10px; width:400px; height:calc(100% - 43px);} #img_popup_box .contents_box .contents_wrap .imgTxtBox {position:absolute; padding:10px; left:0; top:10px; width:400px; text-align:left; font-size:13px; border-radius:8px; box-shadow:2px 2px 8px 0 rgba(0,0,0,0.2);} #img_popup_box .contents_box .contents_wrap .imgTxtBox > div {margin-bottom:6px;} #img_popup_box .contents_box .contents_wrap .imgTxtBox .getBtn {position:relative;} #img_popup_box .contents_box .contents_wrap .imgTxtBox #jellysUseImgList.active {display:table; width:100%;} #img_popup_box .contents_box .contents_wrap .imgTxtBox #jellysUseImgList ul {display:table-cell; width:100%; vertical-align:middle;} #img_popup_box .contents_box .contents_wrap .imgEnterBox {display:-webkit-inline-box; position:absolute; margin:0; left:10px; bottom:10px;} } **/ @media screen and (max-width:600px) { #img_popup_box .contents_box .contents_wrap .imgEnterBox .enterBtn {margin-bottom:6px;} #img_popup_box .contents_box .contents_wrap .imgEnterBox .nametag {display:none;} } #img_popup_box .contents_box .contents_wrap .imgTxtBox .getBtn {box-sizing:border-box; padding:10px; text-align:center; color:#fff; background-color:var(--themeColor); border-radius:4px; cursor:pointer;transition:all 0.2s;} #img_popup_box .contents_box .contents_wrap .imgTxtBox .getBtn:hover {background-color:var(--themeHoverColor);} #img_popup_box .contents_box .contents_wrap .imgTxtBox .saveBtn {margin:0; padding:10px; text-align:center; color:#fff; background-color:var(--themeColor); border-radius:4px; cursor:pointer; transition:all 0.2s;} #img_popup_box .contents_box .contents_wrap .imgTxtBox .saveBtn:hover {background-color:var(--themeHoverColor);} /** 우측상단 돋보기, 닫기 아이콘 **/ #img_popup_box .contents_box .contents_wrap .imgIconWrap {position:absolute; top:0; right:0; z-index:1;} #img_popup_box .contents_box .contents_wrap .imgIconWrap:after {display:block; clear:both; content:"";} #img_popup_box .contents_box .contents_wrap .imgIconWrap .popImgBtn {float:left; display:inline-block; position:relative; padding:0 4px; top:0; right:0; font-size:20px; background-color:rgba(255,255,255,0.2); vertical-align:middle; cursor:pointer; transition:all 0.2s;} #img_popup_box .contents_box .contents_wrap .imgIconWrap .popImgBtn:hover {color:#000; background-color:rgba(255,255,255,1.0); box-shadow:2px 2px 8px 0 rgba(0,0,0,0.2);} #img_popup_box .contents_box .contents_wrap .imgIconWrap .popImgBtn#popImgMixPickBtn {padding:2px 5px 2px 5px;} #img_popup_box .contents_box .contents_wrap .imgIconWrap .popImgBtn#popImgOpenRightBtn {padding:2px 8px 2px 8px;} #img_popup_box.atright .contents_box .contents_wrap .imgIconWrap .popImgBtn#popImgOpenRightBtn {display:none;} #img_popup_box .contents_box .contents_wrap .imgIconWrap .popImgBtn#popImgOpenFullBtn {padding:2px 8px 2px 8px;} #img_popup_box.atfull .contents_box .contents_wrap .imgIconWrap .popImgBtn#popImgOpenFullBtn {display:none;} #img_popup_box .contents_box .contents_wrap .imgIconWrap .popImgBtn#popImgSizeBtn {padding:2px 4px 2px 8px;} #img_popup_box .contents_box .contents_wrap .imgIconWrap .popImgBtn#popImgCloseBtn {position:relative; padding:2px 9px;} #img_popup_box .contents_box .contents_wrap .imgIconWrap .popImgBtn#popImgCloseBtn:hover {color:#fff; background-color:red;} #img_popup_box .contents_box .contents_wrap .imgIconWrap .popImgBtn .popImgBtnDtl {display:none; position:absolute; bottom:-30px; right:-10px;} #img_popup_box .contents_box .contents_wrap .imgIconWrap .popImgBtn .popImgBtnDtl.active {display:inline-block;} #img_popup_box .contents_box .contents_wrap .imgIconWrap .popImgBtn #imgZoomSelector {margin-left:5px; padding:3px 5px; font-size:12px;} #img_popup_box .contents_box .contents_wrap .imgSourceWrap.active {width:100%; height:100%;} #img_popup_box .contents_box .contents_wrap .imgSourceWrap .srcBox {display:inline-block; position:relative; margin:0 auto; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-origin:content-box; vertical-align: middle;}