.gray {transition:filter 0.425s cubic-bezier(0.7, 0, 0.3, 1);}

.container>.wrapper>.top_content {margin-top:230px; height:400px; margin-bottom:135px;}
.container>.wrapper>.top_content>div {height:100%;}
.container>.wrapper>.top_content>div:first-child {width:calc(50% + 60px); background-color:#22d0c5; position:relative;}

.container>.wrapper>.top_content>div:first-child>div {position:absolute; overflow:hidden; background-size:cover; background-repeat:no-repeat; filter:none;}
.container>.wrapper>.top_content>div:first-child>div.img1 {right:380px; top:-150px; width:195px; height:315px;}
.container>.wrapper>.top_content>div:first-child>div.img2 {right:210px; top:-30px; width:160px; height:160px; padding:3px; background-color:#11aea3; z-index:2;}
.container>.wrapper>.top_content>div:first-child>div.img2>div {width:100%; height:100%; background-size:cover;}
.container>.wrapper>.top_content>div:first-child>div.img3 {width:155px; height:155px; top:175px; right:380px;}
.container>.wrapper>.top_content>div:first-child>div.img4 {width:355px; height:245px; right:15px; top:140px;}

.container>.wrapper>.top_content>div:last-child {width:calc(50% - 60px);}
.container>.wrapper>.top_content>div:last-child>div {width:530px; padding:45px 60px 0 40px; height:100%;}
.container>.wrapper>.top_content>div:last-child>div>.category {font-size:18px; color:#ff1557; margin-bottom:20px;}
.container>.wrapper>.top_content>div:last-child>div>.title {font-size:26px; font-weight:500; margin-bottom:32px; letter-spacing:-1px; position:relative;}
.container>.wrapper>.top_content>div:last-child>div>.title::before {content:''; width:300px; left:-100%; left:-320px; top:0; bottom:0; margin:auto; position:absolute; height:1px; background-color:black;}
.container>.wrapper>.top_content>div:last-child>div>.content {padding-left:45px; position:relative; color:#818181; font-size:14px;}
.container>.wrapper>.top_content>div:last-child>div>.content>span {display:inline-block; position:absolute; color:black; left:38px; font-size:12px; font-weight:600; transform:rotate(90deg); -ms-transform:rotate(90deg); transform-origin:0 0; -ms-transform-origin:0 0; top:0; padding:6px 3px 6px 0; border-top:1px solid black;}

.container>.wrapper>.list {}
.container>.wrapper>.list>.item {height:410px; position:relative; padding-top:175px; width:1200px; margin:0 auto 50px;}
.container>.wrapper>.list>.item::after {content:''; position:absolute; top:175px; left:0; right:0; margin:auto; width:1px; height:100%; background-color:#e6e6e6; z-index:-1;}
.container>.wrapper>.list>.item:last-child {margin-bottom:150px;}
.container>.wrapper>.list>.item:last-child::after {content:none;}
.container>.wrapper>.list>.item>.img {position:absolute; top:0; width:400px; height:275px; background:black; background-size:cover; transition:filter 0.25s cubic-bezier(0.7, 0, 0.3, 1);}
.container>.wrapper>.list>.item:nth-child(odd)>.img {right:0px;}
.container>.wrapper>.list>.item:nth-child(even)>.img {left:0px;}
.container>.wrapper>.list>.item>.item_wrapper {position:absolute; width:500px; margin:auto; border:1px solid #e6e6e6; left:0; right:0; margin:auto; background-color:white; cursor:pointer;}
.container>.wrapper>.list>.item>.item_wrapper::before {content:''; position:absolute; top:0; bottom:0; left:0; right:0; background-color:#ff1557; background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_zoom.715a05853555.png); opacity:0; transition:opacity 0.25s cubic-bezier(0.7, 0, 0.3, 1); z-index:3; background-repeat:no-repeat; background-position:center center;}
.container>.wrapper>.list>.item>.item_wrapper:hover::before {opacity:0.9;}
.container>.wrapper>.list>.item>.item_wrapper.hover::before {opacity:0.9;}
.container>.wrapper>.list>.item>.item_wrapper>.date,
.container>.wrapper>.list>.item>.item_wrapper>.ordinal {position:absolute; left:0; right:0; margin:auto; top:-40px; text-align:center; color:#818181;}
.container>.wrapper>.list>.item>.item_wrapper>.content {font-size:14px; color:#818181; padding:40px 60px 0; height:150px; z-index:2;}
.container>.wrapper>.list>.item>.item_wrapper>.content>.title {font-size:16px; color:black; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:20px;}
.container>.wrapper>.list>.item>.item_wrapper>.content>div:not(.title) {line-height:22px; max-height:66px; min-height:22px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:3; -webkit-box-orient:vertical; display:block; display:-webkit-box; letter-spacing:-0.5px;}
.container>.wrapper>.list>.item>.item_wrapper>.show_detail {margin-top:30px; margin-bottom:35px; padding:0 60px; position:relative;}
.container>.wrapper>.list>.item>.item_wrapper>.show_detail::before {content:'詳細を見る'; color:#ff1557; font-weight:700;}
.container>.wrapper>.list>.item>.item_wrapper>.show_detail::after {content:''; position:absolute; height:1px; width:30px; left:130px; background-color:#ff1557; top:0; bottom:0; margin:auto;}
.container>.wrapper>.list>.item>.item_wrapper>.show_detail>div {float:right; margin-left:16px; padding-left:15px; position:relative;}
.container>.wrapper>.list>.item>.item_wrapper>.show_detail>div::before {content:''; width:12px; height:12px; position:absolute; left:0; top:0; bottom:0; margin:auto; background-repeat:no-repeat; background-size:100% auto; background-position:center center;}
.container>.wrapper>.list>.item>.item_wrapper>.show_detail>.like::before {background-image:url('https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_like.3bb6700095d5.png');}
.container>.wrapper>.list>.item>.item_wrapper>.show_detail>.comment::before {background-image:url('https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_comment.46187f2d91f4.png');}

.container>.wrapper>.list.ribbon>.item>.item_wrapper {height:180px;}
.container>.wrapper>.list.ribbon>.item>.item_wrapper>.content {padding:0; position:relative; height:100%;}
.container>.wrapper>.list.ribbon>.item>.item_wrapper>.content>.title {position:absolute; margin:auto; top:0; bottom:0; left:0; right:0; font-size:16px; line-height:25px; height:25px;}
.container>.wrapper>.list.ribbon>.item>.item_wrapper>.ordinal>span {color:#ff1557;}
.container>.wrapper>.list.ribbon>.item>.item_wrapper>.show_detail {position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:20px; line-height:20px; margin-bottom:45px; text-align:center;}
.container>.wrapper>.list.ribbon>.item>.item_wrapper>.show_detail::after {content:none;}


/* 글 상세보기 */
div#overlay.detail {z-index:12;}
div#overlay.detail>.wrapper {margin:230px auto 0; position:relative; width:1200px; height:500px;}
div#overlay.detail>.wrapper>.close {position:absolute; width:44px; height:44px; left:0; top:-72px; background:transparent url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/close.182f359b3ee6.png); cursor:pointer;}
div#overlay.detail>.wrapper>.like {position:absolute; top:-30px; left:550px; height:20px; width:50px; text-align:right; padding-right:3px; line-height:20px; color:white; cursor:pointer;}
div#overlay.detail>.wrapper>.like::before {content:''; display:inline-block; width:20px; height:20px; background:transparent url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_like.3bb6700095d5.png) no-repeat scroll center center; vertical-align:top;}
div#overlay.detail>.wrapper>.row {}
div#overlay.detail>.wrapper>.row>.img {}
div#overlay.detail>.wrapper>.row>.img>.detail {width:600px; height:400px; background-color:white; background-size:cover; background-repeat:no-repeat; transition:background 0.25s cubic-bezier(0.7, 0, 0.3, 1);}
div#overlay.detail>.wrapper>.row>.img>.thumb {margin-top:15px; width:100%; float:right; right:50%; position:relative;}
div#overlay.detail>.wrapper>.row>.img>.thumb>div {width:calc(20% - 8px); margin-left:10px; height:70px; background:transparent; left:50%; position:relative; background-size:cover; background-repeat:no-repeat; border:2px solid transparent;}
div#overlay.detail>.wrapper>.row>.img>.thumb>div.select {border-color:#ff1557;}
div#overlay.detail>.wrapper>.row>.img>.thumb>div:first-child {margin-left:0;}

div#overlay.detail>.wrapper>.row>.content {width:50%; height:340px; padding:0 30px 0 50px; overflow:hidden; overflow-y:auto;}
div#overlay.detail>.wrapper>.row>.content::-webkit-scrollbar {width:5px; background-color:black;}
div#overlay.detail>.wrapper>.row>.content::-webkit-scrollbar-thumb {background-color:#ff1557;}
div#overlay.detail>.wrapper>.row>.content>.text {padding:10px 0 20px; font-size:14px; color:#aaa; margin-bottom:20px; position:relative; line-height:24px;}
div#overlay.detail>.wrapper>.row>.content>.text::after {content:''; position:absolute; bottom:0; left:0; height:1px; width:120px; background-color:white;}
div#overlay.detail>.wrapper>.row>.content>.reply {list-style:none; padding:0; margin:0; font-size:13px; line-height:24px; color:#818181; font-weight:300;}
div#overlay.detail>.wrapper>.row>.content>.reply .name {color:white; margin-right:10px;}

div#overlay.detail>.wrapper>.row>.form {margin-top:25px; padding-right:30px; width:50%; padding-left:50px; }
div#overlay.detail>.wrapper>.row>.form input {font-size:13px; padding:8px 0; line-height:1; border:0; border-bottom:1px solid #818181; background-color:transparent; margin:0; display:inline-block; color:white;}
div#overlay.detail>.wrapper>.row>.form input.name {width:90px; margin-right:20px;}
div#overlay.detail>.wrapper>.row>.form input.text {width:calc(100% - 115px);}