@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,300,400,500,700');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,500');
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400&display=swap');
@import url('https://web.archive.org/web/20230805160500/web.archive.org/web/20240227012309/d28btnt2z9x7nc.cloudfront.net/uploads/fonts/ms_gothic');
@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@100;200&display=swap');

/* only firefox */
@supports (scrollbar-width: thin) {
  html {
    scrollbar-color: black transparent;
    scrollbar-width: thin;
  }
}

html,
body,
p,
ul,
li,
a {
  margin: 0;
  padding: 0;
  font-size: 15px;
}

html,
body {
  width: 100%;
  scrollbar-base-color: #fff;
  scrollbar-face-color: #eaeaea;
  scrollbar-track-color: #fff;
  scrollbar-arrow-color: #fff;
  scrollbar-shadow-color: #fff;
  scrollbar-darkshadow-color: #fff;
}

#root.modal_on {
  overflow: hidden;
  max-height: 0px;
}

a {
  text-decoration: none;
  color: #000;
}

button {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-weight: 300;
}

img {
  width: 100%;
  height: auto;
  border: 0px;
  margin: 0;
  padding: 0;
}

iframe {
  border: none;
  outline: none;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.ReactModal__Overlay,
.ReactModal__Content {
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  z-index: 1000;
}

/* languages */
.lang-zho {
  font-family: 'Noto Sans SC', sans-serif !important;
}

.lang-rus {
  font-family: 'Raleway', sans-serif !important;
}

.lang-jpn {
  font-family: 'MS Gothic', sans-serif !important;
}

.lang-kor {
  font-family: 'Nanum Gothic', sans-serif !important;
}

.lang-eng {
  font-family: 'Work Sans', sans-serif !important;
}

/* width */
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 2px;
}

/* Track */
::-webkit-scrollbar-track {
  display: none;
}

/* Handle */
::-webkit-scrollbar-thumb,
.thumb-vertical {
  width: 2px !important;
  background: #000;
}

/* width */
::-ms-scrollbar {
  width: 2px;
}

/* Track */
::-ms-scrollbar-track {
  display: none;
}

/* Handle */
::-ms-scrollbar-thumb {
  background: #000;
}

input[type='text'],
input[type='email'],
input[type='password'] {
  border: 0;
  outline: 0;
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0;
  -webkit-appearance: none;
}
input[type='text'] ::-webkit-input-placeholder,
input[type='email'] ::-webkit-input-placeholder,
input[type='password'] ::-webkit-input-placeholder {
  /* Edge */
  color: #cccccc;
  font-weight: 300;
}
input[type='text'] :-ms-input-placeholder,
input[type='email'] :-ms-input-placeholder,
input[type='password'] :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #cccccc;
  font-weight: 300;
}
input[type='text'] ::placeholder,
input[type='email'] ::placeholder,
input[type='password'] ::placeholder {
  color: #cccccc;
  font-weight: 300;
}

input[type='checkbox'] {
  border: 1px solid #000;
  margin: 0;
  border-radius: 0;
  -webkit-appearance: none;
}

.container {
  width: 90%;
  margin-top: 12%;
  margin-left: 5%;
  margin-right: 5%;
  float: left;
  position: relative;
}

/* checkbox */
/* .input_block{
    position: relative;
    cursor: pointer;

    span{
        width:0.5vw;
        height: 0.5vw;
        border:1px solid #000;
        display: inline-block;
    }
    input{
        opacity: 0;
        top:0;
        left: 0;
        position: absolute;
        cursor: pointer;

    }
    &:hover{
        text-decoration: underline;
        text-decoration-color: #88beff;
        text-decoration-style: double;
    }

    input:checked ~ span{
        background: #88beff;
    }
}
 */
/* drag selected text */
::-moz-selection {
  background-color: #88beff;
  color: #fff;
}

::selection {
  background-color: #88beff;
  color: #fff;
}

/* textarea */
textarea {
  outline: none;
  border: none;
  font-weight: 300;
  overflow: auto;
  font-family: 'Work Sans', sans-serif;
  border-radius: 0;
  -webkit-appearance: none;
}

/* select */
.select {
  /* Handle */
}
.select ::-webkit-scrollbar {
  width: 2px;
}
.select ::-webkit-scrollbar-thumb,
.select .thumb-vertical {
  width: 2px !important;
  background: #000;
}
.select .select__control {
  min-height: 3.5vw;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 0.9vw;
  border-bottom: 1px solid #fff;
}
.select .select__control:hover {
  border-bottom: 1px solid #88beff;
}
.select .select__control:hover .select__clear-indicator .close_svg {
  opacity: 1;
}
.select .select__control .dropdown_svg {
  width: 1.1vw;
  height: 1.1vw;
  transition: all 0.3s;
}
.select .select__control .select__multi-value {
  background: none;
  font-size: 1.2vw;
  display: inline-block;
  vertical-align: middle;
}
.select .select__control .select__multi-value:hover .close_svg {
  opacity: 1;
}
.select .select__control .select__value-container,
.select .select__control .select__value-container--is-multi,
.select .select__control .select__value-container--has-value {
  width: 83%;
  display: inline-block;
  vertical-align: middle;
  padding: 1%;
}
.select .select__control .select__indicators {
  width: 17%;
  text-align: right;
  display: inline-block;
  vertical-align: middle;
}
.select .select__control .select__clear-indicator {
  display: inline-block;
  vertical-align: middle;
  padding: 0.5vw;
}
.select .select__control .select__clear-indicator .close_svg {
  width: 0.7vw;
  height: 0.7vw;
  opacity: 0;
}
.select .select__control .select__indicator-separator {
  height: 70%;
  display: inline-block;
  vertical-align: middle;
}
.select .select__control .select__dropdown-indicator {
  display: inline-block;
  vertical-align: middle;
  padding: 0.7vw;
}
.select .select__control .select__multi-value__label {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.8vw;
  font-weight: 400;
  line-height: 1.5em;
  text-overflow: initial;
  white-space: pre-line;
  overflow: initial;
  padding-right: 0;
  padding-left: 0;
}
.select .select__control .select__multi-value__remove {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
}
.select .select__control .select__multi-value__remove:hover {
  background: none;
}
.select .select__control .select__multi-value__remove .close_svg {
  width: 0.7vw;
  height: 0.7vw;
  opacity: 0;
}
.select .select__control .select__multi-value__remove .close_svg line {
  stroke-width: 4.5px;
}
.select .select__control .delete {
  width: 0.8vw;
  border-top: 2px solid #979797;
  opacity: 0;
  display: none;
}
.select .select__control .delete:hover {
  border-color: #000;
}
.select .select__control--is--focused,
.select .select__control--menu-is-open {
  box-shadow: none;
  border-bottom: 1px solid #88beff;
}
.select .select__control--is--focused:hover,
.select .select__control--menu-is-open:hover {
  border-bottom: 1px solid #88beff;
}
.select .select__control--is--focused .dropdown_svg,
.select .select__control--menu-is-open .dropdown_svg {
  transform: rotate(180deg);
  transition: all 0.3s;
}
.select .select__menu_list {
  max-height: 20vw;
}
.select .select__menu-list--is-multi {
  max-height: 20vw;
}
.select .select__menu {
  font-size: 0.9vw;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid #979797;
}
.select .select__menu .select__option {
  line-height: 1.6em;
}
.select .select__menu .select__option:hover {
  background: rgba(107, 167, 241, 0.5);
}
.select .select__menu .select__option--is-focused {
  background: rgba(107, 167, 241, 0.5);
}
.select .select__menu .select__option--is-selected {
  background: #88beff;
}

/* select sort */
.sort_select > p {
  width: 18%;
  margin-top: 3%;
  float: left;
  font-size: 1vw;
}
.sort_select .select__menu {
  z-index: 5;
}
.sort_select .select {
  width: 82%;
  margin-bottom: 5%;
  float: left;
}
.sort_select .select .select__control .dropdown_svg {
  width: 0.8vw;
  height: 0.8vw;
}
.sort_select .select .select__control .dropdown_svg:hover polyline {
  stroke: #88beff;
}
.sort_select .select .select__control .select__dropdown-indicator {
  padding: 0.5vw;
}
.sort_select .select .select__control .select__value-container,
.sort_select .select .select__control .select__value-container--is-multi,
.sort_select .select .select__control .select__value-container--has-value {
  width: 70%;
}
.sort_select .select .select__control .select__indicators {
  width: 30%;
}

/* slick */
.slick-slider .prev_svg,
.slick-slider .next_svg {
  width: 1.7vw;
  height: 1.7vw;
}
.slick-slider .slick-active {
  z-index: 1;
}

.slick-dots {
  z-index: 10;
}

.slick_range {
  list-style: none;
}
.slick_range li {
  height: 1px;
  display: inline-block;
  vertical-align: top;
  background: #cccccc;
  cursor: pointer;
  transition: all 0.3s;
}
.slick_range li:hover {
  height: 3px;
  background: #88beff;
  transition: all 0.3s;
}
.slick_range li.slick-active {
  height: 3px;
  background: #88beff;
  transition: all 0.3s;
}
.slick_range div {
  width: 100%;
  height: 3px;
}

/* css transition animation */
.fade-enter {
  opacity: 0;
  transition: opacity 1.5s;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 2s;
}

.fade-enter-done {
  opacity: 0;
  transition: opacity 2s;
}

/* css transition animation */
.display-enter {
  opacity: 0;
  transition: opacity 2s;
}

.display-enter-active {
  opacity: 1;
  transition: opacity 1s;
}

.display-enter-done {
  opacity: 1;
  transition: opacity 1s;
}

.ReactCollapse--collapse {
  transition: all 0.5s;
}

/* inquiry */
.artwork_inquiry_pop_up {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.1);
}
.artwork_inquiry_pop_up .artwork_inquiry_form {
  width: 35%;
}

.artwork_post_inquiry {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.1);
  z-index: 100;
}
.artwork_post_inquiry .artwork_inquiry_form {
  width: 35%;
}

@media only screen and (max-width: 480px) {
  .artwork_inquiry_pop_up {
    background: #fff;
  }
  .artwork_inquiry_pop_up .artwork_inquiry_form {
    width: 100%;
  }

  .artwork_post_inquiry .artwork_inquiry_form {
    width: 100%;
  }
}
/* ImageZoom */
body > div:last-child > div > div {
  touch-action: none;
}