html {min-width: 1024px;}
@keyframes pzv-icon-animation {
	    0%, 50%, 100% {transform: rotate(0deg);}
	    10%, 30% {transform: rotate(-30deg);}
	    20%, 40% {transform: rotate(30deg);}
}
@keyframes pzv-inner-animation {
	    from {background-position: 0 0;}
	    to {background-position: 100% 0;}
}
.modal-open {overflow: hidden !important; padding-right: 17px;}
p {font-size: 0.8em; font-weight: 400; line-height: 1.5;}
.button {font-size: 0.8em; font-weight: 400; line-height: 1; text-align: center; padding: 1em 1.5em 0.9em; border: 1px solid var(--bgcolorD); border-radius: 0.5em;}
.button:hover, .onactive {color: var(--bgcolor2); border-color: var(--bgcolor2);}
.mobile {display: none;}
.vievport {scroll-snap-type: x proximity; scroll-behavior: smooth;}
.vievtrack {width: 100%; position: relative; scroll-snap-align: start; scroll-snap-stop: always;}
.container {width: 70%; min-width: 1280px; max-width: 1771px; padding: 0 2em;}
a {color: var(--bgcolorD);}
a:hover {color: var(--color-main);}
.pro-but::after {font-family: FontAwesome; content: "\f178"; font-size: 1em; font-weight: normal; vertical-align: middle; margin-left: 0.5em;}
li.submenu a::after {font-family: FontAwesome; content: "\f0d7"; font-size: 0.6em; margin-left: 0.5em; color: inherit; vertical-align: middle;}
span.separator::after {font-family: FontAwesome; content: "\f0da"; font-size: 0.6em; color: inherit; vertical-align: middle;}
h1 {font-size: 2.5em;}
h2 {font-size: 2em;}
h3 {font-size: 1em;}
.art-content {padding: 1em 0;}
.product-content .flex {flex-direction: row; flex-wrap: wrap; gap: 2em;}
.product-content .flex section {width: calc(33.33% - 1.5em); display: flex; flex-direction: column; border-radius: 0.5em; transition: all 0.35s ease-out; box-shadow: 0 0.25em 0.25em var(--bgcolor4);}
.product-content .flex section figure {height: 20.12em; border-radius: 0.5em 0.5em 0 0; overflow: hidden;}
.product-content .flex section figure img {height: 100%; object-fit: contain; object-position: center; transition: all 0.6s ease-out;}
.product-content .flex section .text-item {font-size: 0.8em; padding: 1em 1em 6em;}
.product-content .flex section .text-item p.bid {font-size: 2em; font-weight: 600; transition: all 0.25s ease-out;}
.product-content .flex section .text-item h2 {font-size: 1em; font-weight: 400; line-height: 1.3;}
.product-content .flex section > a.sector {left: 0; width: 100%; top: 0; height: 100%; z-index: 1;}
.product-content .flex section .legal {font-size: 0.8em; display: flex; align-items: center; position: absolute; left: 0; width: 100%; bottom: 0; padding: 0 1em 1.5em; z-index: 2;}
.product-content .flex section .legal a {flex: 1 1 auto;}
.product-content .flex section .legal .button {color: var(--bgcolorW); background-color: var(--color-main); border-color: var(--color-main);}
.product-content .flex section .legal .button:hover {color: var(--bgcolorD); background-color: var(--bgcolorW); border-color: var(--bgcolorD);}
.product-content .flex section:hover {box-shadow: 0 0.15em 0.15em var(--bgcolor4);}
.product-content .flex section:hover figure img {transform: scale(1.1);}
.product-content .flex section:hover .text-item p.bid {color: var(--color-main);}

.usertext .content {width: 80%; margin: 0 auto;}
.usertext .content p {margin-bottom: 1em; text-align: justify;}

.product-body .flex {flex-direction: row; position: relative; padding: 1em; border-radius: 0.5em; box-shadow: 0 0 1em var(--bgcolor4);}
.product-body .flex .favorite {position: absolute; right: 0; top: -3.5em; color: var(--bgcolorW); background-color: var(--color-main); border-color: var(--color-main);}
.product-body .flex .favorite:hover {color: var(--bgcolorD);}
.product-body .flex .favorite::after {font-family: FontAwesome; content: "\f006"; font-size: 1em;}
.product-body .flex .items {width: 50%; position: relative; display: flex; flex-direction: column;}
.product-body .flex .items .slide-track {display: flex; flex-direction: column;}
.product-body .flex .items .slide-track figure {width: 100%; padding: 0 1em 1em 0;}
.product-body .flex .items .slide-track figure img {height: 100%; object-fit: cover; object-position: center;}
.product-body .flex .items .slide-track figure a {position: absolute;}
.product-body .flex .items .lot-inner {position: sticky; top: 6em; padding: 1em; max-height: 100vh; border-radius: 0.5em; background-color: var(--bgcolor3);}
.product-body .flex .items .lot-inner .lot-body {font-size: 0.8em; padding: 1em 2em;}
.product-body .flex .items .lot-inner .lot-body h2 {margin-bottom: 1em;}
.product-body .flex .items .lot-inner .lot-body .unit {font-size: 1em; line-height: 1.5;}
.product-body .flex .items .lot-inner .lot-body .bid {font-size: 2em; font-weight: 600; color: var(--color-main); margin-bottom: 0.5em;}
.product-body .flex .items .lot-inner .lot-body .text-item {font-size: 1em; line-height: 1.5; display: flex; flex-direction: row;}
.product-body .flex .items .lot-inner .lot-body .text-item div {width: 50%; padding: 0 1em 0 0;}
.product-body .flex .items .lot-inner .lot-body h4 {min-width: 100%; font-size: 1em; margin: 0 0 0.5em;}
.product-body .flex .items .lot-inner .lot-body .text-item p {font-size: 0.9em;}
.product-body .flex .items .lot-inner .lot-body .form-content {padding: 2em 0 1em;}
.product-body .flex .items .lot-inner .lot-body .form-content .form-group .flex {background-color: var(--bgcolor3); box-shadow: none;}
.product-body .usertext {font-size: 0.8em; padding: 2em 2em 1em;}
.product-body .usertext h1, .product-body .usertext h2, .product-body .usertext h3, .product-body .usertext h4 {margin: 1em 0 0.5em;}

.map {position: relative;}
.map .ramc {position: absolute; display: flex; justify-content: center; align-items: center; background-color: rgba(255,255,255,0.5); opacity: 0;}
.map .ramc:hover {opacity: 1;}

.modal-content {display: inline-block; width: 30vw; line-height: 1; text-align: left; vertical-align: middle; padding: 0 2.5em 2.5em; background-color: #f7f7f7; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.3); overflow: hidden; transition: all 0.4s ease-out; transform: scale(0);}
.modal-content .close {font-size: 1.8em; position: absolute; top: 1em; right: 1em; color: #333; opacity: 0.3;}
.modal-content .modal-body {width: 100%; text-align: center; padding-top: 2.5em;}
.modal-content .modal-body span {font-size: 3.5em; color: var(--bgcolor2); margin: 20px 0;}
.modal-content .modal-body p {font-weight: 600; font-size: 1em; line-height: 1; color: var(--bgcolorD);}
.modal-content .close:hover {opacity: 1;}
.form-content {font-size: 1em;}
.form-content p {font-size: 0.8em;}
.form-content .title {width: 100%; padding: 4em 0 1em; font-weight: normal;}
.form-content .title h4 {font-size: 2em; font-weight: 600; line-height: 1;}
.product-content .item-smal form .title {padding: 1em 0 2em;}
.product-content .item-smal form .title h4 {font-size: 1.6em;}
.form-content .form-group, .form-content .policy-note, .form-content .file-body {width: 100%; position: relative; margin-bottom: 1.5em;}
.form-content .form-group > label {position: absolute; left: 0; white-space: nowrap; max-width: 100%; overflow: hidden; top: 0; height: 3em; margin: 0; cursor: text; pointer-events: none; display: flex; align-items: center; color: #777; transition: all 0.2s ease;}
.form-content .form-group > label > span {margin: 0 0.4em; padding: 0 0.4em;}
.form-content .form-group > label > span.required::after {content: "*"; color: #ff0000; margin-left: 0.15em;}
.form-content .input-filled > label {top: -1.2em; height: 1em; line-height: 1em; font-size: 0.75em; color: inherit;}
.form-content .form-group i {position: absolute; right: 0; width: 2.5em; font-size: 1em; font-style: normal; text-align: center; top: 50%; line-height: 2em; height: 2em; color: var(--bgcolor1); margin-top: -1em; opacity: 0.3; transition: all 0.3s ease; pointer-events: none;}
.form-content .form-group .form-control {display: block; width: 100%; height: 3em; font-size: 1em; color: #55595c; padding: 0.5em 1.5em 0.5em 0.5em; background: #fff; border: 1px solid #ddd; border-radius: 0.5em;}
.form-content .form-group textarea.form-control {height: auto;}
.form-content .form-group i.textarea {top: 1.5em;}
.form-content .form-group i.name::after {font-family: FontAwesome; content: "\f007";}
.form-content .form-group i.tel::after  {font-family: FontAwesome; content: "\f095";}
.form-content .form-group i.email::after {font-family: FontAwesome; content: "\f0e0";}
.form-content .form-group i.password {pointer-events: auto; cursor: pointer;}
.form-content .form-group i.password::after {font-family: FontAwesome; content: "\f070";}
.form-content .form-group i.openpassword::after {font-family: FontAwesome; content: "\f06e";}
.form-content .form-group i.textarea::after {font-family: FontAwesome; content: "\f040";}
.form-content .form-group i.search::after, .form-content .form-group button.search::after {font-family: FontAwesome; content: "\f002";}
.form-content .form-group i.price::after {font-family: FontAwesome; content: "\f158";}
.form-content .button {width: 100%; font-size: 1em; padding: 1em 1.5em 0.75em; margin-bottom: 2.5em; transform: skewX(0); color: var(--bgcolorW); background-color: var(--color-main); border: 2px solid var(--color-main); transition: all 0.25s ease-out;}
.form-content .button:hover {color: var(--color-main); background-color: var(--bgcolorW);}
.form-content .form-group .flex {flex-direction: row; flex-wrap: wrap; padding: 1em 0; gap: 0.5em; background-color: inherit;}
.form-content .form-group .flex label {font-size: 0.8em; display: flex; flex-direction: column; text-align: center; cursor: pointer;}
.form-content .form-group .flex label input[type=radio] {display: none;}
.form-content .form-group .flex label span {display: block; padding: 1.5em; background-color: var(--bgcolorW); border: 1px solid var(--bgcolor4); border-radius: 0.5em; cursor: inherit;}
.form-content .form-group .flex label input:checked + span {border: 2px solid var(--bgcolorD);}
.form-content .form-group .count-selector {display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.5em;}
.form-content .form-group .count-selector * {display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 auto;}
.form-content .form-group .count-selector a.label {height: 3em; font-size: 1em; color: var(--bgcolorW); padding: 0 1.5em; background: var(--bgcolor1); border: 1px solid var(--bgcolor1); border-radius: 0.5em}
.form-content .form-group .count-selector .form-control {width: 7em; text-align: center;}
.form-content .form-group .count-selector .button {margin: 0;}
.form-content .policy-note label span {font-size: 0.8em;}
.form-content .file-body label {display: block; font-size: 0.8em; padding: 1.25em 1.5em 1em; text-align: center; background-color: #ddd; cursor: pointer;}
.form-content .file-body label span {cursor: pointer;}
.form-content .file-body label span::before {font-family: FontAwesome; content: "\f0c6"; font-size: 110%; margin-right: 0.5em;}
.form-content .file-body input {display: none;}
.art-content iframe {width: 100%; height: 35em;}
.popup {text-align: center; line-height: 100vh; background-color: rgba(0,0,0,0.5);}

.cart-content .flex {flex-direction: row; gap: 1.5em;}
.cart-content .flex .item-big {width: 70%;}
.cart-content .flex .item-big table {font-size: 0.8em;}
.cart-content .flex .item-big table td {line-height: 1.3;}
.cart-content .flex .item-big table td span > label {display: inline-block; vertical-align: middle; width: 1em; height: 1em; border: 1px solid #ddd;}
.cart-content .flex .item-big table td .bid {font-style: normal;}
.cart-content .flex .item-big table td .count-selector {display: flex; flex-direction: row; gap: 0.25em;}
.cart-content .flex .item-big table td .count-selector .item {font-size: 0.8em; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; text-align: center; padding: 0.25em; border: 1px solid #ccc;}
.cart-content .flex .item-big table td .count-selector label {cursor: pointer;}
.cart-content .flex .item-big table td .count-selector input {width: 4em;}
.cart-content .flex .item-smal {width: calc(30% - 1.5em);}
.cart-content .flex .item-smal .form-content {font-size: 0.8em;}
.cart-content .flex .item-smal .form-content .title {padding: 0 0 1em; margin-top: -2.5em;}
.cart-content .flex .item-smal .form-content .title h4 {font-size: 1.5em; text-align: center;}
.cart-content .flex .item-smal .form-content p {text-align: center;}
.cart-content .flex .item-middle {width: calc(50% - 0.75em);}
.cart-content .flex .item-middle .form-content {font-size: 0.8em;}
.cart-content .flex .item-middle .form-content .title {padding: 1em 0;}
.cart-content .flex .item-middle .form-content .title h4 {font-size: 1.5em;}
.cart-content .flex .item-middle .form-content .policy-note label span {font-size: 0.8em;}

.fancybox-inner {position: fixed; left: 0; width: 100%; top: 0; height: 100%; background-color: rgba(0,0,0,0.8);}
.fancybox-infobar {color: #ccc; font-size: 13px; -webkit-font-smoothing: subpixel-antialiased; height: 44px; left: 0; line-height: 44px; min-width: 44px; mix-blend-mode: difference; padding: 0 10px; pointer-events: none; top: 0;}
.fancybox-toolbar {right: 0; top: 0; z-index: 9999;}
.fancybox-toolbar .fancybox-button {color: #eee; background: rgba(30,30,30,.6); border: 0; cursor: pointer; display: inline-block; height: 44px; padding: 10px; position: relative; transition: color .2s; vertical-align: top; width: 44px;}
.fancybox-toolbar .fancybox-button i {font-size: 1.6em; font-style: normal;}
.fancybox-button-arrow {position: absolute; height: 100px; top: calc(50% - 50px); width: 70px; color: #eee; background: none; border: 0; cursor: pointer; z-index: 999;}
.fancybox-arrow-left {left: 0; padding: 31px 26px 31px 6px;}
.fancybox-arrow-right {right: 0; padding: 31px 6px 31px 26px;}
.fancybox-button-arrow i {font-size: 1.6em; font-style: normal; padding: 10px; background: rgba(30,30,30,.6);}
.fancybox-inner .container {height: 100%; padding: 44px 0;}
.fancybox-slide {width: 100%; height: 0; text-align: center; opacity: 0; visibility: collapse; transition: opacity 0.2s ease-out; transition: transform 0.35s ease-out; z-index: -1;}
.wish {height: 100%; opacity: 1; visibility: visible; z-index: 999;}
.zoom {transform: scale(1.5);}
.fancybox-slide img {width: auto; height: 100%; object-fit: contain; object-position: center; cursor: zoom-in;}
.zoom img {cursor: grab;}

.disclaimer {position: fixed; width: 40%; right: 1.5em; bottom: 1em; background-color: #ebebeb; border-radius: 0.25em; transform: translateY( calc(100% + 1em) ); transition: transform 0.6s ease-out; z-index: 8888;}
.disclaimer .flex {padding: 1.5em; flex-direction: row;}
.disclaimer .flex .text-item {display: flex; flex-direction: column; width: 95%; padding-right: 1em;}
.disclaimer .flex .text-item p {font-size: 0.8em; color: #111;}
.disclaimer .flex .text-item a {color: #7c69ef;}
.disclaimer .flex .but-item {display: flex; flex-direction: column; width: 5%;}
.disclaimer .flex .but-item .close {text-align: center; padding: 1em;}
.disclaimer-active {transform: translateY(0);}

@media(max-width:760px) {

html {min-width: 320px;}
.modal-open {padding-right: 0;}
p {font-size: 14px; font-weight: 400; line-height: 1.5;}
.button {font-size: 12px;}
.mobile {display: block;}
.desctop {display: none;}
.container {width: 100%; min-width: 320px; padding: 0 2em;}
li.submenu::after {content: "";}
	
.art-content {font-size: 130%;}
.product-content .flex section {width: calc(50% - 1em);}
.product-content .flex section figure {height: calc(50vw - 2.5em); border-radius: 0.5em 0.5em 0 0; overflow: hidden;}
.product-content .flex section .text-item p.bid {font-size: 14px;}
.product-content .flex section .text-item h2 {font-size: 12px;}

.usertext .content {width: 100%;}
	
.product-body {font-size: 150%;}
.product-body .container {padding: 0;}
.product-body .flex {flex-direction: column;}
.product-body .flex .favorite {font-size: 14px; top: 0; z-index: 2;}
.product-body .flex .items {width: 100%;}
.product-body .flex .items .slide-track {flex-direction: row; width: 100%; height: 90vw; overflow-y: hidden; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;}
.product-body .flex .items .slide-track figure {width: calc(100% + 1em); min-width: calc(100% + 1em); height: 100%; position: relative; scroll-snap-align: start; scroll-snap-stop: always;}
.product-body .flex .items .lot-inner {margin-top: 1em; padding: 0;}
.product-body .usertext {width: 100%; overflow: hidden;}
.product-body .usertext table {font-size: 10px;}
.product-body .usertext table tbody {max-width: 100vw; overflow-x: auto;}
	
.cart-content {font-size: 130%;}
.cart-content .flex {flex-direction: column;}
.cart-content .flex .item-big {width: 100%;}
.cart-content .flex .item-big table td .count-selector {flex-direction: column-reverse; gap: 0.25em;}
.cart-content .flex .item-big table td .count-selector .item {max-width: 3rem;}
.cart-content .flex .item-big table td .count-selector label {width: auto;}
.cart-content .flex .item-big table td .count-selector input {width: auto;}
.cart-content .flex .item-smal {width: 100%;}
.cart-content .flex .item-smal .form-content {font-size: 12px;}
.cart-content .flex .item-smal .form-content .title {margin-top: 0;}
.cart-content .flex .item-middle {width: 100%;}
.cart-content .flex .item-middle .form-content {font-size: 12px;}

.modal-content {width: 90%; font-size: 130%; padding: 0 25px 25px;}
.form-content {font-size: 14px;}

.fancybox-slide img {width: 100%; height: 100%; object-fit: contain; object-position: center;}

table.table {width: 150%;}
	

.disclaimer {width: 100%; right: 0; bottom: 0; border-radius: 0; transform: translateY(100%);}
.disclaimer .flex .text-item p {font-size: 12px;}
.disclaimer .flex .but-item .close {font-size: 14px;}
.disclaimer-active {transform: translateY(0);}
}