/* common */
html, body {background:#fff;}
.is-pc {display:block;}
.is-m {display:none;}
.magnifier {display:none; position:fixed; width:250px; height:250px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 8px rgba(0,0,0,0.3); overflow:hidden; pointer-events:none; z-index:999;}
@media (max-width:991px){
.is-pc {display:none;}
.is-m {display:block;}
.magnifier {width:150px; height:150px;}
}

@keyframes pop {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.3);
    }

    60% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

/* container */
:root{
	--container-padding: 15px;
	--container-padding-minus: -15px;
}
.container {max-width: calc(1640px + (var(--container-padding) * 2)); margin:0 auto; padding:0 var(--container-padding); width:100%;}
.container-xxl {max-width: calc(1400px + (var(--container-padding) * 2));}
.container-xl {max-width: calc(1200px + (var(--container-padding) * 2));}
.container-lg {max-width: calc(991px + (var(--container-padding) * 2));}
.container-md {max-width: calc(767px + (var(--container-padding) * 2));}
.container-sm {max-width: calc(575px + (var(--container-padding) * 2));}
.container-xs {max-width: calc(400px + (var(--container-padding) * 2));}

/* modal-box */
.modal-box {pointer-events:none; opacity:0; position:fixed; left:0; top:0; width:100%; height:100%; transition:all ease 0.5s; z-index:9999999;}
.modal-box .box {pointer-events:none; opacity:0; position:absolute; transition:all ease 0.5s; display:flex; flex-direction:column; background:#fff;}
.modal-box .modal-head {width:100%; display:flex; flex-wrap:wrap; align-items:center;}
.modal-box .modal-head h2 {font-size:25px; font-weight:bold; word-break:keep-all; flex:1; min-width:0; padding:0 20px 0 0; line-height:1.3;}
.modal-box .modal-head .close {width:24px; height:24px; font-size:0; background:url('../images/icon_close.svg') no-repeat center / cover; filter:var(--filter-gray-600);}
.modal-box .modal-body {width:100%; height:100%; overflow-y:auto;}
.modal-box .modal-body .modal-text h3 {border-bottom:1px solid #ebebeb; padding:0 0 10px; margin:0 0 10px; font-size:20px; font-weight:600; word-break:keep-all;}
.modal-box .modal-body .modal-text p {font-size:15px; word-break:keep-all;}
.modal-box .modal-body .modal-text ul {margin:25px 0 0;}
.modal-box .modal-body .modal-text ul li {position:relative; display:flex; flex-wrap:wrap; padding:0 0 0 10px;}
.modal-box .modal-body .modal-text ul li:before {position:absolute; left:0; top:10px; width:4px; height:4px; background:#000; content:"";}
.modal-box .modal-body .modal-text ul li b {font-size:15px; font-weight:500; margin:0 5px 0 0;}
.modal-box .modal-body .modal-text ul li span {font-size:15px; font-weight:500; flex:1; min-width:0;}
.modal-box .modal-body .modal-list ul {display:flex; flex-wrap:wrap; margin:0 -12.5px -15px;}
.modal-box .modal-body .modal-list ul li {width:calc(50% - 25px); margin:0 12.5px 15px;}
.modal-box .modal-body .modal-list ul li a {display:block;}
.modal-box .modal-body .modal-list ul li a .list-image {position:relative; overflow:hidden;}
.modal-box .modal-body .modal-list ul li a .list-image:after {display:block; content:""; padding-bottom:100%;}
.modal-box .modal-body .modal-list ul li a .list-image img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; transition:all ease 0.5s;}
.modal-box .modal-body .modal-list ul li a .list-content {border-bottom:1px solid #d4d4d4; padding:10px 0 20px;}
.modal-box .modal-body .modal-list ul li a .list-content p {font-size:15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center;}
.modal-box .modal-body .modal-list ul li a:hover .list-image img {transform:scale(1.1);}
.modal-box .modal-body .modal-list ul li a:hover .list-content p {text-decoration:underline;}
.modal-box .box.right {width:345px; box-shadow:-5px 0 10px rgba(0,0,0,0.1); right:-20px; top:0; height:100%;}
.modal-box .box.right .modal-head {padding:20px 30px; background:#f5f5f5; justify-content:flex-end;}
.modal-box .box.right .modal-head h2 {flex:none; width:100%; order:2; margin:20px 0 0;}
.modal-box .box.right .modal-head .close {order:1;}
.modal-box .box.right .modal-body {padding:30px;}
.modal-box .box.center {width:calc(100% - 30px); max-width:650px; max-height:85%;left:50%; top:45%; transform:translate(-50%,-50%);}
.modal-box .box.center .modal-body {padding:50px;}
.modal-box.fixed {pointer-events:inherit; opacity:1;}
.modal-box.fixed .box {pointer-events:inherit; opacity:1;}
.modal-box.fixed .box.right {right:0;}
.modal-box.fixed .box.center {top:50%;}
.modal-box.black {background:rgba(0,0,0,0.6);}
@media (max-width:991px){
.modal-box .modal-head h2 {font-size:20px;}
.modal-box .modal-head .close {width:20px; height:20px;}
.modal-box .modal-body .modal-text h3 {font-size:16px;}
.modal-box .modal-body .modal-text p {font-size:14px;}
.modal-box .modal-body .modal-text ul li:before {width:3px; height:3px;}
.modal-box .modal-body .modal-text ul li b {font-size:14px;}
.modal-box .modal-body .modal-text ul li span {font-size:14px;}
.modal-box .modal-body .modal-list ul {margin:0 -5px -15px;}
.modal-box .modal-body .modal-list ul li {width:calc(50% - 10px); margin:0 5px 15px;}
.modal-box .modal-body .modal-list ul li a .list-content {padding:10px 0;}
.modal-box .modal-body .modal-list ul li a .list-content p {font-size:13px;}
.modal-box .box.right {width:100%; max-width:300px;}
.modal-box .box.right .modal-head {padding:15px;}
.modal-box .box.right .modal-head h2 {margin:10px 0 0;}
.modal-box .box.right .modal-body {padding:15px;}
.modal-box .box.center .modal-body {padding:20px;}
}

/* button-box */
.button-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.button-box .btn {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex:1; min-width:0; height:52px; border-radius:8px; font-size:16px; font-weight:500;}
.button-box .btn-black {color:#fff;}
.button-box .btn-gray {background:#333; color:#fff;}
.button-box .btn-white {border:1px solid #ccc;}
.button-box .btn-white.active {background:#000 !important; border-color:#000; color:#fff !important;}
@media (max-width:991px){
.button-box .btn {height:48px; font-size:15px;}
}

/* title-box */
.title-box {margin:0 0 60px;}
.title-box:after {display:block; content:""; margin:45px auto 0; width:2px; height:60px; background:#000;}
.title-box h2 {font-size:35px; font-weight:700; text-align:center; word-break:keep-all;line-height:initial;}
.title-box p {font-size:20px; font-weight:700; text-align:center; word-break:keep-all;}

@media (max-width:991px){
.title-box {margin:0 0 30px;}
.title-box:after {margin:15px auto 0; height:35px;}
.title-box h2 {font-size:25px;}
}

/* qa-box */
.qa-box .qa-head {margin:0 0 50px;}
.qa-box .qa-head small {display:block; text-align:center; font-size:15px; font-weight:700;}
.qa-box .qa-head h2 {font-size:35px; font-weight:800; text-align:center;}
.qa-box .qa-body .body-product {display:flex; flex-wrap:wrap; align-items:center;}
.qa-box .qa-body .body-product .product-image {width:120px;}
.qa-box .qa-body .body-product .product-image img {width:100%;}
.qa-box .qa-body .body-product .product-content {flex:1; min-width:0; padding:0 0 0 30px;}
.qa-box .qa-body .body-product .product-content p {margin:0 0 5px; font-size:16px; line-height:1.3; word-break:keep-all;}
.qa-box .qa-body .body-product .product-content p:last-of-type {margin:0;}
.qa-box .qa-body .body-list {margin:12px 0 0;}
.qa-box .qa-body .body-list ul li {border-bottom:1px solid #d9d9d9;}
.qa-box .qa-body .body-list ul li input {display:block; padding:24px 0; font-size:15px; width:100%;}
.qa-box .qa-body .body-list ul li input::placeholder {color:#333;}
.qa-box .qa-body .body-list ul li textarea {display:block; width:100%; height:110px; padding:24px 0 0; font-size:15px;}
.qa-box .qa-body .body-list ul li textarea::placeholder {color:#333;}
.qa-box .qa-body .body-check {margin:20px 0 0; position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
.qa-box .qa-body .body-check input {margin:0 0 0 5px; appearance:auto;}
.qa-box .qa-body .body-check label {font-size:14px; color:#666;}
.qa-box .qa-foot {margin:50px 0 0;}
.qa-box .qa-foot .button-box {max-width:370px; margin:0 auto;}
@media (max-width:991px){
.qa-box .qa-head {margin:0 0 30px;}
.qa-box .qa-head small {font-size:13px;}
.qa-box .qa-head h2 {font-size:25px;}
.qa-box .qa-body .body-product .product-image {width:90px;}
.qa-box .qa-body .body-product .product-content {padding:0 0 0 15px;}
.qa-box .qa-body .body-product .product-content p {font-size:15px;}
.qa-box .qa-body .body-list ul li input {padding:15px 0;}
.qa-box .qa-body .body-list ul li textarea {height:80px; padding:15px 0 0;}
.qa-box .qa-foot {margin:30px 0 0;}
}

/* paging-box */
.paging-box {margin:60px 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.paging-box ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border:1px solid #ccc; border-radius:5px; overflow:hidden;}
.paging-box ul li {border-right:1px solid #ccc;}
.paging-box ul li:last-of-type {border-right:0;}
.paging-box ul li a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:32px; height:32px;}
.paging-box ul li a:hover {background:#333; color:#fff;}
.paging-box ul li.active a {background:#333; color:#fff; font-weight:500;}
@media (max-width:991px){
.paging-box {margin:50px 0 0;}
.paging-box ul li a {width:28px; height:28px; font-size:13px;}
}

/* artist-list-box */
.artist-list-box {display:flex; flex-wrap:wrap; align-items:flex-start;}
.artist-list-box .list-left {width:410px; margin:0 90px 0 0; position:sticky; top:210px;}
.artist-list-box .list-left .left-image {position:relative; height:360px;overflow:hidden;}
.artist-list-box .list-left .left-image:after {display:block; content:""; padding-bottom:100%;}
.artist-list-box .list-left .left-image img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
.artist-list-box .list-left .left-content {margin:30px 0 0; padding:0 12px;}
.artist-list-box .list-left .left-content:before {display:block; content:""; width:29px; height:24px; background:url('../images/icon_artist_left_content.png') no-repeat center / cover; margin:0 0 12px;}
.artist-list-box .list-left .left-content .content-inner {padding:0 0 0 30px;}
.artist-list-box .list-left .left-content .content-inner h3 {font-size:22px; font-weight:600; line-height:1.3; word-break:keep-all;}
.artist-list-box .list-left .left-content .content-inner p {margin:25px 0 0; font-size:18px; font-weight:500; line-height:1.3; word-break:keep-all;}
.artist-list-box .list-right {flex:1; min-width:0; overflow:hidden;}
.artist-list-box .list-right > ul > li {margin:0 0 70px;}
.artist-list-box .list-right > ul > li:last-of-type {margin:0;}
.artist-list-box .list-right > ul > li h4 {display:flex; flex-wrap:wrap; align-items:center; font-size:20px; font-weight:600; margin:0 0 24px;}
.artist-list-box .list-right > ul > li h4:before {display:block; content:""; width:6px; height:6px; margin:0 10px 0 0; background:#000;}
.artist-list-box .list-right > ul > li > ul {padding:0 0 0 16px; display:flex; flex-wrap:wrap; margin:0 -8px -5px 0;}
.artist-list-box .list-right > ul > li > ul > li {width:calc(7.14% - 8px); margin:0 8px 5px 0;}
.artist-list-box .list-right > ul > li > ul > li .more {display:block; font-size:18px; color:#333; line-height:1.3;}
.artist-list-box .list-right > ul > li > ul > li .more:hover {text-decoration:underline;}
@media (max-width:1500px){
.artist-list-box .list-right > ul > li > ul > li {width:calc(10% - 8px);}
}
@media (max-width:1400px){
.artist-list-box .list-left {width:350px; margin:0 30px 0 0;}
}
@media (max-width:1200px){
.artist-list-box .list-left {width:300px;}
.artist-list-box .list-left .left-content .content-inner {padding:0;}
.artist-list-box .list-right > ul > li > ul > li {width:calc(12.5% - 8px);}
}
@media (max-width:991px){
.artist-list-box .list-left {width:100%; margin:0 0 40px; position:static;}
.artist-list-box .list-left .left-image {display:none;}
.artist-list-box .list-left .left-content {margin:20px 0 0; padding:0;}
.artist-list-box .list-left .left-content:before {width:25px; height:20px;}
.artist-list-box .list-left .left-content .content-inner h3 {font-size:18px;}
.artist-list-box .list-left .left-content .content-inner p {margin:10px 0 0; font-size:15px;}
.artist-list-box .list-right {flex:none; width:100%;}
.artist-list-box .list-right > ul > li {margin:0 0 40px;}
.artist-list-box .list-right > ul > li h4 {font-size:18px; margin:0 0 15px;}
.artist-list-box .list-right > ul > li h4:before {width:4px; height:4px; margin:0 8px 0 0;}
.artist-list-box .list-right > ul > li > ul {padding:0 0 0 12px; margin:0; gap:10px;}
.artist-list-box .list-right > ul > li > ul > li {width:auto; margin:0;}
.artist-list-box .list-right > ul > li > ul > li .more {font-size:14px;}
}

/* artist-view-box */
.artist-view-box {display:flex; flex-wrap:wrap; align-items:flex-start;}
.artist-view-box .view-left {flex:1; min-width:0; position:sticky; top:210px; display:flex; flex-wrap:wrap;}
.artist-view-box .view-left .left-thumb {width:300px; margin:0 30px 0 0;}
.artist-view-box .view-left .left-thumb .thumb-image {position:relative; overflow:hidden;}
.artist-view-box .view-left .left-thumb .thumb-image:after {display:block; content:""; padding-bottom:130%;}
.artist-view-box .view-left .left-thumb .thumb-image img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
.artist-view-box .view-left .left-thumb .thumb-social {margin:15px 0 0; padding:0 10px;}
.artist-view-box .view-left .left-thumb .thumb-social ul {display:flex; flex-wrap:wrap; align-items:center;}
.artist-view-box .view-left .left-thumb .thumb-social ul li {margin:0 10px 0 0;}
.artist-view-box .view-left .left-thumb .thumb-social ul li:last-of-type {margin:0;}
.artist-view-box .view-left .left-thumb .thumb-social ul li a {display:block; font-size:0; border-radius:50%; width:45px; height:45px; background-color:#fff; background-position:center; background-repeat:no-repeat; box-shadow:3px 3px 10px rgba(0,0,0,0.1);}
.artist-view-box .view-left .left-thumb .thumb-social ul li.youtube a {background-image:url('../images/icon_youtube.png'); background-size:23px auto;}
.artist-view-box .view-left .left-thumb .thumb-social ul li.instagram a {background-image:url('../images/icon_instagram.png'); background-size:23px auto;}
.artist-view-box .view-left .left-thumb .thumb-social ul li.facebook a {background-image:url('../images/icon_facebook.png'); background-size:12px auto;}
.artist-view-box .view-left .left-content {padding:24px 0 0; flex:1; min-width:0;}
.artist-view-box .view-left .left-content > ul > li {margin:0 0 30px;}
.artist-view-box .view-left .left-content > ul > li:last-of-type {margin:0 50px 30px 0;}
.artist-view-box .view-left .left-content > ul > li h3 {font-size:18px; font-weight:600; margin:0 0 4px;}
.artist-view-box .view-left .left-content > ul > li p {font-size:16px; color:#333; word-break:keep-all;}
.artist-view-box .view-left .left-content > ul > li ul li {position:relative; font-size:16px; color:#333; word-break:keep-all; padding:0 0 0 12px; margin:0 0 10px;}
.artist-view-box .view-left .left-content > ul > li ul li:last-of-type {margin:0;}
.artist-view-box .view-left .left-content > ul > li ul li:before {position:absolute; left:0; top:10px; width:6px; height:1px; background:#333; content:"";}
.artist-view-box .view-right {flex:1; min-width:0; padding:15px 0 0;}
.artist-view-box .view-right h3 {font-size:25px; font-weight:700; margin:0 0 15px;}
.artist-view-box .view-right ul {display:flex; flex-wrap:wrap; margin:0 -7.5px -15px;}
.artist-view-box .view-right ul li {width:calc(33.33% - 15px); margin:0 7.5px 15px; position:relative;}
.artist-view-box .view-right ul li:after {display:block; content:""; padding-bottom:100%; background:#f6f6f6;}
.artist-view-box .view-right ul li a {position:absolute; left:0; top:0; width:100%; height:100%; z-index:2;}
.artist-view-box .view-right ul li img {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:80%; max-height:80%;}
@media (max-width:1200px){
.artist-view-box .view-left .left-thumb {width:230px; margin:0 20px 0 0;}
}
@media (max-width:991px){
.artist-view-box .view-left {flex:none; width:100%; position:static;}
.artist-view-box .view-left .left-thumb .thumb-social {margin:10px 0 0; padding:0;}
.artist-view-box .view-left .left-thumb .thumb-social ul li {margin:0 7px 0 0;}
.artist-view-box .view-left .left-thumb .thumb-social ul li a {width:40px; height:40px;}
.artist-view-box .view-left .left-thumb .thumb-social ul li.youtube a {background-size:18px auto;}
.artist-view-box .view-left .left-thumb .thumb-social ul li.instagram a {background-size:18px auto;}
.artist-view-box .view-left .left-thumb .thumb-social ul li.facebook a {background-size:10px auto;}
.artist-view-box .view-left .left-content > ul > li p {font-size:16px;}
.artist-view-box .view-left .left-content > ul > li ul li {font-size:16px;}
.artist-view-box .view-left .left-content > ul > li ul li:before {top:10px; width:5px;}
.artist-view-box .view-right {flex:none; width:100%; margin:40px 0 0;}
.artist-view-box .view-right h3 {font-size:20px;}
}
@media (max-width:600px){
.artist-view-box .view-left .left-thumb {width:100%; margin:0;}
.artist-view-box .view-left .left-content {padding:20px 0 0; flex:none; width:100%;}
.artist-view-box .view-right ul {margin:0 -2.5px -5px;}
.artist-view-box .view-right ul li {width:calc(33.33% - 5px); margin:0 2.5px 5px;}
.artist-view-box .view-right ul li img {max-width:85%; max-height:85%;}
}

/* art-list-box */
.art-list-box {display:flex; flex-wrap:wrap; align-items:flex-start;}
.art-list-box .list-left {width:250px; margin:0 75px 0 0; position:sticky; top:210px;}
.art-list-box .list-left h2 {border-bottom:1px solid #d8d8d8; margin:0 0 50px; padding:0 0 25px; font-size:30px; font-weight:800; word-break:keep-all;}
.art-list-box .list-left ul {border-bottom:1px solid #d8d8d8; padding:0 0 50px;}
.art-list-box .list-left ul li {margin:0 0 24px;}
.art-list-box .list-left ul li:last-of-type {margin:0;}
.art-list-box .list-left ul li a {position:relative; display:block; line-height:1.3; word-break:keep-all; font-size:18px; padding:0 0 0 20px;}
.art-list-box .list-left ul li a:hover {text-decoration:underline;}
.art-list-box .list-left ul li a:before {position:absolute; left:0; top:8px; width:8px; height:8px; background:#000; content:"";}
.art-list-box .list-left ul li.active a {font-weight:600; text-decoration:underline;}
.art-list-box .list-right {flex:1; min-width:0;}
.art-list-box .list-right .right-sort {margin:0 0 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
.art-list-box .list-right .right-sort button {display:block; margin:0 3px 0 0; opacity:0.5; font-size:0; width:32px; height:32px; background-size:cover; background-position:center; border:1px solid #9a9a9a;}
.art-list-box .list-right .right-sort button:last-of-type {margin:0;}
.art-list-box .list-right .right-sort button:nth-of-type(1) {background-image:url('../images/item_layout1.gif');}
.art-list-box .list-right .right-sort button:nth-of-type(2) {background-image:url('../images/item_layout2.gif');}
.art-list-box .list-right .right-sort button:nth-of-type(3) {background-image:url('../images/item_layout3.gif');}
.art-list-box .list-right .right-sort button:nth-of-type(4) {background-image:url('../images/item_layout4.gif');}
.art-list-box .list-right .right-sort button.active {opacity:1;}
.art-list-box .list-right .right-sort button:hover {opacity:1;}
.art-list-box .list-right .right-item ul {transition:all ease 0.5s;}
.art-list-box .list-right .right-item ul li {transition:all ease 0.5s;}
.art-list-box .list-right .right-item ul li .inner {display:block;}
.art-list-box .list-right .right-item ul li .inner .list-image {transition:all ease 0.5s;}
.art-list-box .list-right .right-item ul li .inner .list-image:after {transition:all ease 0.5s;}
.art-list-box .list-right .right-item ul li .inner .list-image img {transition:all ease 0.5s;}
.art-list-box .list-right .right-item ul li .inner .list-content .name {border-bottom:1px solid #ccc; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.art-list-box .list-right .right-item ul li .inner .list-content .name p {font-size:15px; padding:10px 0; position:relative;}
.art-list-box .list-right .right-item ul li .inner .list-content .name p:after {position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:#000; content:""; transition:all ease 0.5s;}
.art-list-box .list-right .right-item ul li .inner .list-content .subject p {padding:10px; text-align:center; font-size:18px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:500;}
.art-list-box .list-right .right-item ul li .inner .list-content .content {margin:10px 0 0;}
.art-list-box .list-right .right-item ul li .inner .list-content .content p {text-align:center; font-size:14px; word-break:keep-all; line-height:1.3; margin:0 0 5px;}
.art-list-box .list-right .right-item ul li .inner .list-content .content p:last-of-type {margin:0;}
.art-list-box .list-right .right-item ul li .inner .list-content .detail {display:none;}
.art-list-box .list-right .right-item ul li .inner .list-content .detail p {padding:0 10px; text-align:center; font-size:14px; word-break:keep-all; color:#666; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis;}
.art-list-box .list-right .right-item ul li .inner:hover .list-content .name {position:relative;}
.art-list-box .list-right .right-item ul li .inner:hover .list-content .name p {position:static;}
.art-list-box .list-right .right-item ul.list-01 {column-count:4; column-gap:30px;}
.art-list-box .list-right .right-item ul.list-01 li {break-inside:avoid; margin:0 0 60px;}
.art-list-box .list-right .right-item ul.list-01 li .list-image img {width:100%; display:block;}
.art-list-box .list-right .right-item ul.list-02 {display:flex; flex-wrap:wrap; margin:0 -15px -60px;}
.art-list-box .list-right .right-item ul.list-02 li {width:calc(25% - 30px); margin:0 15px 60px;}
.art-list-box .list-right .right-item ul.list-02 li .list-image {position:relative; overflow:hidden;}
.art-list-box .list-right .right-item ul.list-02 li .list-image:after {display:block; content:""; padding-bottom:100%;}
.art-list-box .list-right .right-item ul.list-02 li .list-image img {max-width:100%; max-height:100%; object-fit:cover; display:block; margin:0 auto; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.art-list-box .list-right .right-item ul.list-03 {display:flex; flex-wrap:wrap; margin:0 -15px -60px;}
.art-list-box .list-right .right-item ul.list-03 li {width:calc(25% - 30px); margin:0 15px 60px;}
.art-list-box .list-right .right-item ul.list-03 li .list-image {position:relative; overflow:hidden;}
.art-list-box .list-right .right-item ul.list-03 li .list-image:after {display:block; content:""; padding-bottom:100%;}
.art-list-box .list-right .right-item ul.list-03 li .list-image img {width:100%; height:100%; object-fit:cover; display:block; margin:0 auto; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.art-list-box .list-right .right-item ul.list-04 {display:flex; flex-wrap:wrap; margin:0 -15px -60px;}
.art-list-box .list-right .right-item ul.list-04 li {width:calc(50% - 30px); margin:0 15px 60px;}
.art-list-box .list-right .right-item ul.list-04 li .inner {display:flex; flex-wrap:wrap; align-items:flex-start;}
.art-list-box .list-right .right-item ul.list-04 li .inner .list-image {width:225px; position:relative; overflow:hidden;}
.art-list-box .list-right .right-item ul.list-04 li .inner .list-image:after {display:block; content:""; padding-bottom:100%;}
.art-list-box .list-right .right-item ul.list-04 li .inner .list-image img {width:100%; height:100%; object-fit:cover; display:block; margin:0 auto; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.art-list-box .list-right .right-item ul.list-04 li .inner .list-content {flex:1; min-width:0;}
.art-list-box .list-right .right-item ul.list-04 li .inner .list-content .detail {display:block;}
@media (max-width:1300px){
.art-list-box .list-right .right-item ul.list-01 {column-count:3;}
.art-list-box .list-right .right-item ul.list-02 {margin:0 -7.5px -30px;}
.art-list-box .list-right .right-item ul.list-02 li {width:calc(33.33% - 15px); margin:0 7.5px 30px;}
.art-list-box .list-right .right-item ul.list-03 {margin:0 -7.5px -30px;}
.art-list-box .list-right .right-item ul.list-03 li {width:calc(33.33% - 15px); margin:0 7.5px 30px;}
.art-list-box .list-right .right-item ul.list-04 {margin:0;}
.art-list-box .list-right .right-item ul.list-04 li {width:100%; margin:0 0 60px;}
.art-list-box .list-right .right-item ul.list-04 li:last-of-type {margin:0;}
}
@media (max-width:991px){
.art-list-box .list-left {width:100%; margin:0 0 50px; position:static;}
.art-list-box .list-left h2 {margin:0 0 15px; padding:0 0 15px; font-size:24px;}
.art-list-box .list-left ul {display:flex; flex-wrap:wrap; gap:10px 15px; padding:0 0 15px;}
.art-list-box .list-left ul li {margin:0;}
.art-list-box .list-left ul li a {font-size:14px; padding:0 0 0 10px;}
.art-list-box .list-left ul li a:before {width:4px; height:4px; top:7px;}
.art-list-box .list-right {flex:none; width:100%;}
.art-list-box .list-right .right-item ul li .inner .list-content .name p {font-size:14px; padding:7px 0;}
.art-list-box .list-right .right-item ul li .inner .list-content .subject p {font-size:15px;}
.art-list-box .list-right .right-item ul li .inner .list-content .content {margin:5px 0 0;}
.art-list-box .list-right .right-item ul li .inner .list-content .content p {font-size:13px;}
.art-list-box .list-right .right-item ul li .inner .list-content .detail p {font-size:13px;}
}
@media (max-width:767px){
.art-list-box .list-right .right-item ul.list-01 {column-count:2; column-gap:10px;}
.art-list-box .list-right .right-item ul.list-01 li {margin:0 0 30px;}
.art-list-box .list-right .right-item ul.list-02 {margin:0 -5px -30px;}
.art-list-box .list-right .right-item ul.list-02 li {width:calc(50% - 10px); margin:0 5px 30px;}
.art-list-box .list-right .right-item ul.list-03 {margin:0 -5px -30px;}
.art-list-box .list-right .right-item ul.list-03 li {width:calc(50% - 10px); margin:0 5px 30px;}
.art-list-box .list-right .right-item ul.list-04 li {margin:0 0 30px;}
.art-list-box .list-right .right-item ul.list-04 li .inner .list-image {width:125px;}
.art-list-box .list-right .right-item ul.list-04 li .inner .list-content .detail {display:none;}
}


/* art-view-box */
.art-view-box {display:flex; flex-wrap:wrap; align-items:flex-start;}
.art-view-box .view-left {flex:1; min-width:0;}
.art-view-box .view-left .left-image {position:relative; background:#f5f5f5;}
.art-view-box .view-left .left-image .swiper {min-height:800px;display: flex;align-items: center;}
.art-view-box .view-left .left-image .swiper .swiper-container {width:100%; height:100%;}
.art-view-box .view-left .left-image .swiper .swiper-wrapper {height:100% !important;}
.art-view-box .view-left .left-image .swiper .swiper-slide {display:flex; align-items:center; justify-content:center;}
.art-view-box .view-left .left-image .swiper .swiper-slide img {max-width:100%; max-height:800px; width:auto; object-fit:contain; display:block; margin:0 auto;}
.art-view-box .view-left .left-image .swiper .swiper-pagination span {width:12px; height:12px;}
.art-view-box .view-left .left-image .swiper .swiper-pagination span.swiper-pagination-bullet-active {opacity:1; background:#333;}
.art-view-box .view-left .left-image .swiper .swiper-button-prev {width:22px; height:70px; background:rgba(0,0,0,0.5); left:0; opacity:1;}
.art-view-box .view-left .left-image .swiper .swiper-button-prev:after {width:24px; height:24px; background:url('../images/icon_arrow_left.svg') no-repeat center / cover; font-size:0; filter:var(--filter-white);}
.art-view-box .view-left .left-image .swiper .swiper-button-next {width:22px; height:70px; background:rgba(0,0,0,0.5); right:0; opacity:1;}
.art-view-box .view-left .left-image .swiper .swiper-button-next:after {width:24px; height:24px; background:url('../images/icon_arrow_right.svg') no-repeat center / cover; font-size:0; filter:var(--filter-white);}
.art-view-box .view-left .left-image .button {position:absolute; right:15px; top:15px; z-index:20;}
.art-view-box .view-left .left-image .button a {width:24px; height:24px; margin:0 8px 0 0; background-size:cover; background-position:center; font-size:0;}
.art-view-box .view-left .left-image .button a:last-of-type {margin:0;}
.art-view-box .view-left .left-image .button a.like {background-image:url('../images/icon_heart.svg');}
.art-view-box .view-left .left-image .button a.like.active {background-image:url('../images/icon_heart_on.svg'); animation:pop 0.4s ease, sparkle 0.6s ease;}
.art-view-box .view-left .left-image .button a.zoom {background-image:url('../images/icon_search.svg');}
.art-view-box .view-left .left-image .button a.screen {background-image:url('../images/icon_screen.svg');}
.art-view-box .view-left .left-subject {padding:20px 25px; margin:35px 0 0; background:#f2f2f2; display:flex; flex-wrap:wrap; align-items:center;}
.art-view-box .view-left .left-subject h2 {font-size:35px; font-weight:700; flex:1; min-width:0; padding:0 30px 0 0; word-break:keep-all;}
.art-view-box .view-left .left-subject a {font-size:16px;}
.art-view-box .view-left .left-content {padding:50px 30px 0;}
.art-view-box .view-left .left-content h3 {font-size:20px; font-weight:600; margin:0 0 30px;}
.art-view-box .view-left .left-content p {font-size:17px; color:#333; word-break:keep-all; margin:0 0 30px;}
.art-view-box .view-left .left-content p:last-of-type {margin:0;}
.art-view-box .view-right {width:450px; margin:0 0 0 90px; position:sticky; top:210px;}
.art-view-box .view-right .right-subject {padding:20px 10px; border-bottom:2px solid #000; display:flex; flex-wrap:wrap; align-items:center;}
.art-view-box .view-right .right-subject h2 {font-size:32px; font-weight:500; word-break:keep-all; flex:1; min-width:0; padding:0 30px 0 0;}
.art-view-box .view-right .right-subject .dropdown-box {position:relative; z-index:10;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-btn {width:22px; height:26px; font-size:0; display:block; background:url('../images/icon_share.png') no-repeat center / cover;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner {position:absolute; right:0; top:130%; background:#fff; border:1px solid #e9eaea; width:165px; border-radius:10px; padding:25px 12px;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner ul li {margin:0 0 40px;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner ul li:last-of-type {margin:0;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner ul li a {display:flex; flex-wrap:wrap; align-items:center; font-size:15px;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner ul li a:before {display:inline-block; content:""; width:19px; height:19px; margin:0 5px 0 0; background-position:center; background-repeat:no-repeat;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner ul li:nth-of-type(1) a:before {background-image:url('../images/icon_art_share_01.png'); background-size:15px auto;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner ul li:nth-of-type(2) a:before {background-image:url('../images/icon_art_share_02.png'); background-size:11px auto;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner ul li:nth-of-type(3) a:before {background-image:url('../images/icon_art_share_03.png'); background-size:15px auto;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner ul li:nth-of-type(4) a:before {background-image:url('../images/icon_art_share_04.png'); background-size:19px auto;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner ul li:hover a {text-decoration:underline;}
.art-view-box .view-right .right-text {margin:24px 0 0; padding:0 10px;}
.art-view-box .view-right .right-text p {font-size:17px; word-break:keep-all;}
.art-view-box .view-right .right-info {padding:0 10px; margin:50px 0 0;}
.art-view-box .view-right .right-info ul li {border-bottom:1px solid #e1e0dd; padding:20px; display:flex; flex-wrap:wrap; align-items:center;}
.art-view-box .view-right .right-info ul li > b {font-size:16px; font-weight:500; width:120px;}
.art-view-box .view-right .right-info ul li > div {flex:1; min-width:0;}
.art-view-box .view-right .right-info ul li > div p {font-size:16px; word-break:keep-all;}
.art-view-box .view-right .right-info ul li > div span {display:block; width:15px; height:15px; font-size:0; border:1px solid #000;}
.art-view-box .view-right .right-info ul li > div.color {display:flex; flex-wrap:wrap; align-items:center; gap:4px;}
.art-view-box .view-right .right-guide {padding:0 10px; margin:32px 0 0;}
.art-view-box .view-right .right-guide .inner {padding:40px 20px;}
.art-view-box .view-right .right-guide .inner h3 {font-size:18px; font-weight:700; margin:0 0 15px;}
.art-view-box .view-right .right-guide .inner p {font-size:15px; word-break:keep-all;}
.art-view-box .view-right .right-guide .guide-inner {margin:15px 0 0;}
.art-view-box .view-right .right-guide .guide-inner > div {border:1px solid #000; padding:30px; border-radius:5px; display:none;}
.art-view-box .view-right .right-guide .guide-inner > div h4 {font-size:15px; font-weight:600; word-break:keep-all; margin:0 0 15px;}
.art-view-box .view-right .right-guide .guide-inner > div ul li {margin:0 0 10px; display:flex; flex-wrap:wrap;}
.art-view-box .view-right .right-guide .guide-inner > div ul li em {font-size:15px; width:20px;}
.art-view-box .view-right .right-guide .guide-inner > div ul li p {flex:1; min-width:0; font-size:15px; word-break:keep-all;}
.art-view-box .view-right .right-guide .guide-inner > div ul li p.before {position:relative; padding:0 0 0 15px;}
.art-view-box .view-right .right-guide .guide-inner > div ul li p.before:before {position:absolute; left:0; top:10px; content:""; width:5px; height:1px; background:#000;}
.art-view-box .view-right .right-guide .guide-inner > div.active {display:block;}

.to-list-wrap {display:flex; justify-content:center;margin-top:30px;}
.to-list-wrap > a {padding: 10px 40px;background-color: black;color: white;font-size:16px;border-radius:8px;text-align:center;}

@media (max-width:1500px){
.art-view-box .view-right {margin:0 0 0 40px;}
}

@media (max-width:1200px){
.art-view-box .view-right {width:350px;}
}

@media (max-width:991px){
.art-view-box .view-left {flex:none; width:100%;}
.art-view-box .view-left .left-image .swiper {min-height:inherit;}
.art-view-box .view-left .left-image .swiper .swiper-slide img {max-height:inherit;}
.art-view-box .view-left .left-image .swiper .swiper-pagination span {width:10px; height:10px;}
.art-view-box .view-left .left-subject {padding:20px; margin:20px 0 0;}
.art-view-box .view-left .left-subject h2 {flex:none; width:100%; padding:0; font-size:25px; margin:0 0 10px;}
.art-view-box .view-left .left-subject a {font-size:15px;}
.art-view-box .view-left .left-image .button a.zoom { display: none; }
.art-view-box .view-left .left-content {padding:30px 0 0;}
.art-view-box .view-left .left-content h3 {margin:0 0 20px;}
.art-view-box .view-left .left-content p {font-size:14px; margin:0 0 20px;}
.art-view-box .view-right {width:100%; margin:60px 0 0; position:static;}
.art-view-box .view-right .right-subject {padding:0 0 10px;}
.art-view-box .view-right .right-subject h2 {font-size:24px;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-btn {width:18px; height:22px;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner {width:150px; border-radius:5px; padding:20px 10px;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner ul li {margin:0 0 10px;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner ul li a {font-size:14px;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner ul li a:before {width:15px; height:15px;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner ul li:nth-of-type(1) a:before {background-size:11px auto;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner ul li:nth-of-type(2) a:before {background-size:8px auto;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner ul li:nth-of-type(3) a:before {background-size:11px auto;}
.art-view-box .view-right .right-subject .dropdown-box .dropdown-inner ul li:nth-of-type(4) a:before {background-size:14px auto;}
.art-view-box .view-right .right-text {padding:0; margin:15px 0 0;}
.art-view-box .view-right .right-text p {font-size:15px;}
.art-view-box .view-right .right-info {padding:0; margin:30px 0 0;}
.art-view-box .view-right .right-info ul li {padding:10px 0;}
.art-view-box .view-right .right-info ul li > b {font-size:15px;}
.art-view-box .view-right .right-info ul li > div p {font-size:15px;}
.art-view-box .view-right .right-guide {padding:0; margin:30px 0 0;}
.art-view-box .view-right .right-guide .inner {padding:30px 0;}
.art-view-box .view-right .right-guide .inner h3 {font-size:16px;}
.art-view-box .view-right .right-guide .inner p {font-size:14px;}
.art-view-box .view-right .right-guide .guide-inner > div {padding:20px;}
.art-view-box .view-right .right-guide .button-box:first-of-type {position:fixed; left:0; bottom:0; width:100%; z-index:1001; padding:10px;}
}