.work-page {}
.btn-top {display:flex;justify-content:flex-end;gap:10px;}
.btn-top a {display:inline-block;padding:8px 18px;border:1px solid #3e3a39;}
.work-list {margin:0 -30px;padding:0;}
.grid-item {width:33.333%;padding:0 30px;margin-bottom:90px;box-sizing:border-box;}
.grid-item .item {position:relative;overflow:hidden;border-radius:20px;box-shadow:0 25px 30px -15px rgba(0,0,0,.35);transition:all .3s;}
.grid-item .item:before {content:"";position:absolute;inset:0;background:linear-gradient(45deg, rgba(255,255,255, 0.05) 55%, rgba(255,255,255, 0.15) 55%, rgba(255,255,255, 0.1) 100%);z-index:1;}
.grid-item .item img {width:100%;display:block;filter:grayscale(1);transition:all .3s;}
.grid-item .item:hover img {transform:scale(1.05);filter:grayscale(0);}
.item-info {position:absolute;left:0;right:0;bottom:0;padding:15px 30px;background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.45));color:#3e3a39;border-radius:0 20px 20px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 -15px 15px -15px rgba(0,0,0,0.35);backdrop-filter:blur(6px);z-index:2;}
.item-info h4 {position:absolute;left:0;top:-40px;padding:5px 30px 0;height:40px;border-radius:20px 20px 0 0;background:rgba(255,255,255,.95);color:#3e3a39;display:flex;align-items:center;font-size:18px;box-shadow:0 -15px 15px -15px rgba(0,0,0,0.35);backdrop-filter:blur(6px);}
.item-info h4:before {content:"";position:absolute;left:100%;bottom:0;width:15px;height:15px;background:radial-gradient(circle 15px at top right,transparent 0 15px,rgba(255,255,255,.95) 15px 100%) no-repeat top right/60px 60px;backdrop-filter:blur(6px);}

.grid-item .item:hover .item-info {background:linear-gradient(180deg, rgba(105,69,200,.95), rgba(105,69,200,.45));}
.grid-item .item:hover .item-info h4 {background:rgba(105,69,200,.95);color:#fff;}
.grid-item .item:hover .item-info h4:before {background:radial-gradient(circle 15px at top right,transparent 0 15px,rgba(105,69,200,.95) 15px 100%) no-repeat top right/60px 60px;}
.grid-item .item:hover .scope-list span {background:#3e3a39;}

.scope-list {display:flex;flex-wrap:wrap;gap:5px;width:100%;margin-bottom:15px;}
.scope-list span {padding:5px 10px;border-radius:20px;background:#6945c8;color:#fff;font-size:13px;transition:all .3s;}
.item-info .item-btn {display:flex;gap:10px;width:100%;}
.item-info .item-btn a {display:flex;align-items:center;gap:5px;padding:10px 15px;font-size:14px;color:#3e3a39;border:1px solid #3e3a39;background:#fff;border-radius:30px;font-weight:600;transition:all .3s;}
.item-info .item-btn a:hover {background:#3e3a39;color:#fff;}
.item-info .item-btn a span {font-size:16px;}
.no-data {text-align:center;padding:60px 0;color:#888;width:100%;}

.work-page .work-pn {position:relative;}
.work-page .work-pn a {position:absolute;font-size:14px;display:flex;align-items:center;}
.work-page .work-pn a.work-prev {top:0;left:0;}
.work-page .work-pn a.work-next {top:0;right:0;}
.work-page .submit-btn {display:flex;gap:5px;justify-content:center;align-items:center;padding:30px 0;}
.work-page .submit-btn a {padding:8px 20px;background:#3e3a39;color:#fff;}
.work-page .submit-btn button {padding:8px 20px;border:0;background:#3e3a39;color:#fff;}
.work-page .gallery-exist button {border:0;padding:5px 15px;background:#3e3a39;color:#fff;}

.view-box {max-width:1200px;margin:0 auto;}
.view-box p.cate {font-size:18px;margin-bottom:15px;font-weight:500;}
.view-box h2 {font-size:40px;display:flex;justify-content:space-between;align-items:end;padding-bottom:45px;margin-bottom:45px;border-bottom:1px solid #ddd;}
.view-box h2 span.tit {line-height:1em;font-weight:800;}
.view-box h2 a {font-size:22px;line-height:1em;display:flex;align-items:center;gap:5px;}
.view-box h2 a span {position:relative;top:-2px;}
.view-box .overview {margin-bottom:60px;}
.view-box .overview h4 {font-size:24px;margin-bottom:30px;font-weight:700;}
.view-box .overview p {font-size:24px;margin-bottom:45px;line-height:1.5em;}
.view-box .overview dl {font-size:20px;display:flex;line-height:1.75em;}
.view-box .overview dl dt {width:10%;min-width:120px;font-weight:700;}
.view-box .overview dl dd {flex:1;display:flex;gap:0 10px;flex-wrap:wrap;}
.view-box .overview dl dd span {}
.view-box .display {position:relative;border:2px solid #adadad;padding:15px;border-radius:30px;background:#333;background:linear-gradient(45deg, #333 0%, #444 45%, #4d4d4d 45%, #333 100%);box-shadow:0 50px 30px -40px rgba(0, 0, 0, 0.65);margin-bottom:150px;}
.view-box .display:before {content:"";position:absolute;top:7px;left:calc(50% - 7px);width:14px;height:14px;background:rgba(255,255,255,0.05);border-radius:30px;z-index:10;}
.view-box .display:after {content:"";position:absolute;top:11px;left:calc(50% - 3px);width:6px;height:6px;background:rgba(0,0,0,0.30);border-radius:30px;z-index:10;}
.view-box .display .inner {position:relative;border-radius:18px;width:100%;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;user-select:none;background:#ccc;}
.view-box .display .inner:before {content:"";position:absolute;inset:0;background:linear-gradient(45deg, rgba(255, 255, 255, 0.01) 45%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.01) 100%);pointer-events:none;z-index:100;}
.view-box .display .inner:after {content:"";position:absolute;inset:0;background:radial-gradient(transparent 50%, rgba(71,71,71,.05));pointer-events:none;z-index:100;}
.view-box .display .inner .img {overflow:hidden;aspect-ratio:6/3.6;}
.view-box .display .inner::-webkit-scrollbar {display:none;}   /* Chrome 등 */
.view-box .display .inner.grabbing {cursor:grabbing;}
.view-box .display .inner .camera-bg {position:absolute;top:0;left:calc(50% - 45px);width:90px;height:12px;background:#3d3d3d;border-radius:0 0 15px 15px;z-index:5;}
.view-box .display .inner .camera-bg:before {content:"";position:absolute;top:0;left:-5px;width:5px;height:5px;background:url("/img/sub/camera_bg_left.svg") no-repeat center / cover;}
.view-box .display .inner .camera-bg:after {content:"";position:absolute;top:0;right:-5px;width:5px;height:5px;background:url("/img/sub/camera_bg_right.svg") no-repeat center / cover;}
.view-box .display .inner img {width:100%;height:auto;display:block;-webkit-user-drag:none;user-drag:none;}

.view-box .more-page {}
.view-box .more-page h5 {font-size:18px;margin-bottom:15px;font-weight:500;}
.view-box .more-page h3 {font-size:32px;margin-bottom:30px;font-weight:800;}
.view-box .more-page p {font-size:24px;margin-bottom:45px;line-height:1.5em;}
.view-box .more-page p.no-data {font-size:16px;}
.view-box .more-page .inner {display:flex;gap:30px;}
.view-box .more-page .inner .img {flex:0 0 calc((100% - 30px)/2)}
.view-box .more-page .inner .img img {max-width:100%;border:1px solid #eee;border-radius:15px;}

.upload-form {max-width:1200px;margin:0 auto;border:1px solid #eee;padding:20px;}
.upload-form h3 {margin-bottom:15px;text-align:center;}
.upload-form label {display:block;margin-bottom:5px;font-weight:bold;}
.upload-form input[type=text],.upload-form input[type=url] {width:100%;padding:8px;border:1px solid #ccc;margin-bottom:15px;}
.upload-form textarea {width:100%;padding:8px;border:1px solid #ccc;}
.load-more-btn {display:block;width:200px;margin:0 auto;padding:15px 0;text-align:center;border:1px solid #3e3a39;border-radius:30px;background:#fff;font-weight:600;cursor:pointer;transition:all .3s;}
.load-more-btn:hover {background:#3e3a39;color:#fff;}
.end-msg {display:none;text-align:center;padding:30px 0;color:#666;font-size:16px;}
.category-nav {margin-bottom:30px;font-weight:600;position:relative;display:flex;justify-content:center;align-items:center;}
.category-nav .scroll-arrow {position:absolute;top:0;bottom:0;width:30px;justify-content:center;align-items:center;border:none;background:#fff;color:#b3b3b3;cursor:pointer;display:none;z-index:10;padding:0;}
.category-nav .scroll-arrow.left {left:0;}
.category-nav .scroll-arrow.right {right:0;}
.category-nav ul {display:flex;gap:15px;overflow-x:auto;scroll-behavior:smooth;white-space:nowrap;-ms-overflow-style:none;scrollbar-width:none;}
.category-nav ul li {}
.category-nav ul li a {position:relative;color:#3e3a39;padding:0 5px;display:flex;align-items:center;height:30px;font-size:15px;}
.category-nav ul li.on a {color:#5b1cbd;}
.category-nav ul li.on a:before {content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;border-radius:5px;background:#5b1cbd;}
.drag-tooltip {position:fixed;z-index:9999;top:0;left:0;padding:5px 10px;background:rgba(0, 0, 0, 0.75);color:#fff;border-radius:0;font-size:13px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.15s;}

@media (max-width:1500px){
    .work-list {margin:0 -15px;}
    .grid-item {width:50%;padding:0 15px;}
}
@media (max-width:991px){
    .work-page {padding:0;background:transparent;}
    .work-list {margin:0;}
    .grid-item {width:100%;padding:0;margin-bottom:45px;}
    .grid-item .item {border-radius:15px;}
    .item-info {padding:10px 15px;border-radius:0 15px 15px 15px;}
    .item-info h4 {font-size:16px;padding:5px 15px 0;top:-35px;height:35px;border-radius:15px 15px 0 0;}
    .item-info h4:before {width:10px;height:10px;background:radial-gradient(circle 10px at top right, transparent 0 10px, rgba(105, 69, 200, .95) 10px 100%) no-repeat top right}
    .item-info .item-btn {gap:5px;}
    .item-info .item-btn a {gap:3px;padding:5px 10px;}
    .scope-list {margin-bottom:10px;}
    .scope-list span {padding:3px 8px;font-size:12px;}
}
@media (max-width:767px){
    .work-page .work-pn {display:none;}
    .view-box p.cate {font-size:16px;}
    .view-box h2 {font-size:24px;align-items:start;flex-direction:column;gap:10px;padding-bottom:30px;margin-bottom:30px;}
    .view-box h2 span.tit {}
    .view-box h2 a {font-size:18px;}
    .view-box .overview h4 {font-size:20px;}
    .view-box .overview p {font-size:18px;}
    .view-box .overview dl {font-size:18px;}
    .view-box .more-page h5 {font-size:16px;}
    .view-box .more-page h3 {font-size:22px;}
    
    .view-box .display {padding:5px;border:1px solid #adadad;border-radius:15px;margin-bottom:90px;}
    .view-box .display:before {top:2px;left:calc(50% - 3px);width:6px;height:6px;}
    .view-box .display:after {top:5px;left:calc(50% - 1px);width:2px;height:2px;}
    .view-box .display .inner {border-radius:10px;}
    .view-box .display .inner .camera-bg {left:calc(50% - 25px);width:50px;height:5px;}
    .view-box .display .inner .camera-bg:before {left:-2px;width:2px;height:2px;}
    .view-box .display .inner .camera-bg:after {right:-2px;width:2px;height:2px;}
    .view-box .display .inner .img {aspect-ratio:6 / 6;}
    .view-box .more-page .inner {flex-direction:column;}
}