@charset "utf-8";

html, body { width:100%; position: relative; }
body { min-width: 320px; background-color: #fff; word-break: keep-all; }

@media screen and (min-width: 425px){
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
  }
  ::-webkit-scrollbar-thumb {
    background: #000;
    border: 0px none #fff;
    border-radius: 3px;
  }
  ::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.5);
    border: 0px none #fff;
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
}

.char-text { line-height: 1.15; }
.char-text .splitting { overflow: hidden; display: inline-block; vertical-align: middle; }
.char-text .char { position: relative; display: inline-block; }
.char-text .char:before { content: attr(data-char); position: absolute; top: 0; left: 0; visibility: hidden; transition: inherit; 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.char-text .char:after { content: attr(data-char); position: absolute; top: 100%; left: 0; visibility: visible; transition: transform .6s; 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

[data-lazy='parent'] [data-lazy] {
  opacity: 0;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: 1500ms;
  transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}
[data-lazy='parent'].notScale [data-lazy] {
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
}

@media (max-width: 767px) {
  [data-lazy='parent'] [data-lazy] {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
  }
}

[data-lazy='parent'] [data-lazy='1'] {
  transition-delay: 0ms;
}

[data-lazy='parent'] [data-lazy='2'] {
  transition-delay: 300ms;
}

[data-lazy='parent'] [data-lazy='3'] {
  transition-delay: 600ms;
}

[data-lazy='parent'] [data-lazy='4'] {
  transition-delay: 900ms;
}

[data-lazy='parent'] [data-lazy='5'] {
  transition-delay: 1200ms;
}

[data-lazy='parent'] [data-lazy='6'] {
  transition-delay: 1500ms;
}

[data-lazy='parent'] [data-lazy='7'] {
  transition-delay: 1800ms;
}

[data-lazy='parent'] [data-lazy='8'] {
  transition-delay: 2100ms;
}

[data-lazy='parent'] [data-lazy='9'] {
  transition-delay: 2400ms;
}

[data-lazy='parent'] [data-lazy='10'] {
  transition-delay: 2700ms;
}

[data-lazy='parent'].is-show [data-lazy] {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}


#wrap { overflow:hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Site Loading */
#site-loading { display: none; z-index: 1000; position: relative; }
/*#site-loading .first { z-index: 3; position: fixed; top: 0; left: 0;  width: 100%; height: 100%; overflow: hidden; background: #fff; }
#site-loading .first > .inner { position: absolute; top: 0; left: 0;  width: 100%; height: 100%; background: url(../images/common/site-logo2_g.svg) center 30% no-repeat; background-size: 250px;  }
#site-loading .second { z-index: 2; position: fixed; top: 0; left: 0;  width: 100%; height: 100%; overflow: hidden; background: #fff url(../images/common/cover_st_02.jpg) center no-repeat; background-size: cover; }
#site-loading .second > .inner { position: absolute; top: 0; left: 0;  width: 100%; height: 100%; background: url(../images/common/site-logo2.svg) center 30% no-repeat; background-size: 250px; }*/
#site-loading .first { z-index: 1; position: fixed; top: 0; left: 0;  width: 100%; height: 100%; overflow: hidden; background-color: #fff; }
#site-loading .first > .inner { position: absolute; top: 0; left: 0;  width: 100%; height: 100%; background: #fff url(../images/common/cover_st_02.jpg) center no-repeat; background-size: cover;  }
#site-loading .first > .inner:before { content: ''; position: absolute; top: 0; left: 0;  width: 100%; height: 100%; background: url(../images/common/site-logo2_g.svg) center 30% no-repeat; background-size: 250px; }
#site-loading .second { z-index: 2; position: fixed; top: 0; left: 0;  width: 100%; height: 100%; overflow: hidden;  }
#site-loading .second > .inner { position: absolute; top: 0; left: 0;  width: 100%; height: 100%; background: url(../images/common/site-logo2.svg) center 30% no-repeat; background-size: 250px; }

#site-loading.leave .first > .inner { background-image: url(../images/common/cover_st_03.jpg); }
#site-loading.leave .first > .inner:before { display: none; }
#site-loading.leave .second > .inner { display: none; }

#site-loading.st1 .first > .inner { background-image: url(../images/common/cover_st_03.jpg); }
#site-loading.st2 .first > .inner { background-image: url(../images/common/cover_st_04.jpg); }

#site-header { position: fixed; top: 0; left: 0; z-index: 50; width: 100%; height: 80px; background-color: #fff; border-bottom: 1px solid #dfdfdf; box-sizing: border-box;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#site-header > .inner { width: 96%; height: 100%; margin: 0 auto; display: table; position: relative; }
#site-header > .inner:after { content: 'OROOM'; position: absolute; top: 0; left: 0; width: 100%; text-align: center; font-size: 16px; color: #585858; line-height: 80px; z-index: -1; letter-spacing: 4.8px; 
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#site-header > .inner > * { display: table-cell; vertical-align: middle; width: 50%; }
#site-header .logo { transform-origin: left; width: 280px; height:100%; display: flex; align-items: center; 
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#site-header .logo a { display: inline-block; line-height: 0; transform-origin: left; vertical-align: middle; position: relative; margin-right: 15px; }
#site-header .logo a .logoImg { width: 120px; opacity: 1;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#site-header .logo a .logoImg2 { width: 120px; opacity: .5;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#site-header .logo a.gateway { width: 27px; height: 27px; background: url(../images/ico/ico_arrow_right_g.png) center no-repeat; border: 1px solid #e9e9e9; box-sizing: border-box; font-size: 0; border-radius: 100%; transform-origin: center; }


#site-header .right { text-align: right; }
#site-header .right > * { display: inline-block; vertical-align: middle; }
#site-header .right .search {  }
#site-header .right .search button { width: 25px; height: 25px; padding: 0; border: 0; font-size: 0; outline: none; cursor: pointer; background-color: transparent; background-size: 15px; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg id='ico_search' data-name='ico_search' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 493.66 494.53'%3E%3Cpath fill='%23b9b9b9' d='M741,713.16,596.25,567.61c61.64-75.8,57.18-187.82-13.38-258.38-75.32-75.32-197.88-75.33-273.21,0s-75.32,197.88,0,273.21A193.46,193.46,0,0,0,568,595.88L712.65,741.37A20,20,0,1,0,741,713.16Zm-403.07-159c-59.73-59.73-59.73-156.91,0-216.64a153.36,153.36,0,0,1,216.64,0c59.73,59.73,59.73,156.91,0,216.64S397.67,613.88,337.95,554.15Z' transform='translate(-253.17 -252.74)'/%3E%3C/svg%3E"); }
#site-header .right .lang { margin-left: 10px; }
#site-header .right .lang > li { display: inline-block; vertical-align: middle; padding: 0 10px; position: relative; }
#site-header .right .lang > li > a { display: block; font-size: 12px; color: #949494; letter-spacing: 2.4px; }
#site-header .right .lang > li.active > a { color: #000; }

#site-header .sidemenu { display: none; }

#site-header .menu { font-family: 'Spoqa Han Sans', sans-serif; width: 55px; }
#site-header .menu ul { display: table; margin-left: auto; }
#site-header .menu ul > li { display: table-cell; vertical-align: middle; padding: 0 10px; }
#site-header .menu ul > li > a { display: block; font-size: 18px; color: #333; width: 55px; height: 55px; background-size: 50%; background-repeat: no-repeat; background-position: center; }
#site-header .menu ul > li > a.search { background-image: url("../images/ico/ico_search_b.png"); }
#site-header .menu ul > li > a.login { background-image: url("../images/ico/ico_login_b.png"); }

[data-barba-namespace="viewingrooms"] #site-header { background-color: transparent; border-color: transparent; }
[data-barba-namespace="viewingrooms"] #site-header > .inner:after { color: #333; }
[data-barba-namespace="viewingrooms"] #site-header .right .search button { background-image: url("data:image/svg+xml,%3Csvg id='ico_search' data-name='ico_search' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 493.66 494.53'%3E%3Cpath fill='%23222222' d='M741,713.16,596.25,567.61c61.64-75.8,57.18-187.82-13.38-258.38-75.32-75.32-197.88-75.33-273.21,0s-75.32,197.88,0,273.21A193.46,193.46,0,0,0,568,595.88L712.65,741.37A20,20,0,1,0,741,713.16Zm-403.07-159c-59.73-59.73-59.73-156.91,0-216.64a153.36,153.36,0,0,1,216.64,0c59.73,59.73,59.73,156.91,0,216.64S397.67,613.88,337.95,554.15Z' transform='translate(-253.17 -252.74)'/%3E%3C/svg%3E"); }
[data-barba-namespace="viewingrooms"] #site-header .logo a.gateway { border-color: rgba(0,0,0,0.35); }
[data-barba-namespace="viewingrooms"] #page-contents { padding-top: 0; }

[data-barba-namespace="viewingrooms"] #site-header.white { background-color: #fff; border-color: #dfdfdf; }
[data-barba-namespace="viewingrooms"] #site-header.white > .inner:after { color: #585858; }
[data-barba-namespace="viewingrooms"] #site-header.white .right .search button { background-image: url("data:image/svg+xml,%3Csvg id='ico_search' data-name='ico_search' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 493.66 494.53'%3E%3Cpath fill='%23b9b9b9' d='M741,713.16,596.25,567.61c61.64-75.8,57.18-187.82-13.38-258.38-75.32-75.32-197.88-75.33-273.21,0s-75.32,197.88,0,273.21A193.46,193.46,0,0,0,568,595.88L712.65,741.37A20,20,0,1,0,741,713.16Zm-403.07-159c-59.73-59.73-59.73-156.91,0-216.64a153.36,153.36,0,0,1,216.64,0c59.73,59.73,59.73,156.91,0,216.64S397.67,613.88,337.95,554.15Z' transform='translate(-253.17 -252.74)'/%3E%3C/svg%3E"); }
[data-barba-namespace="viewingrooms"] #site-header.white .logo a.gateway { border-color: #e9e9e9; }
[data-barba-namespace="viewingrooms"] #page-contents { padding-top: 0; }

#site-body { max-width: 100%; margin: 0 auto; box-sizing: border-box; 
  -webkit-transition: transform 0.5s ease;
  -moz-transition: transform 0.5s ease;
  -o-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
}
#site-body > .inner { max-width: 1920px; margin: 0 auto; }

#site-footer { background-color: #fff; width: 100%; margin: 0 auto; border-top: 1px solid #e0e0e0; position: relative; z-index: 1;  }
#site-footer > .inner { width: 96%; height: 130px; margin: 0 auto; box-sizing: border-box; display: grid; grid-template-columns: repeat(2,1fr); align-items: center; }
#site-footer > .inner > .left { text-align: left; order: -1; }
#site-footer > .inner > .mid { text-align: center; }
#site-footer > .inner > .right { text-align: right; }
#site-footer > .inner > * > * { display: inline-block; vertical-align: middle; }
#site-footer > .inner .logo { width: 153px; padding-right: 30px; box-sizing: border-box; }
#site-footer > .inner .copy { font-size: 13px; color: #838383; letter-spacing: 0.65px; }
#site-footer > .inner .sns { width: 110px; }
#site-footer > .inner .sns ul { text-align: right; }
#site-footer > .inner .sns ul > li { display: inline-block; vertical-align: middle; }
#site-footer > .inner .sns ul > li + li { padding-left: 30px; }
#site-footer > .inner .sns ul > li a { display: block; width: 20px; height: 20px;background-position: center; background-repeat: no-repeat; }
#site-footer > .inner .sns ul > li a.facebook { background-image: url(../images/ico/ico_footer_menu1.png); }
#site-footer > .inner .sns ul > li a.instagram { background-image: url(../images/ico/ico_footer_menu2.png); }
#site-footer > .inner .subscribe .ipt_group { width: 370px; margin-left: auto; }
#site-footer > .inner .subscribe .ipt_group .ipt { border: 1px solid #e4e4e4; height: 40px; font-size: 13px; }
#site-footer > .inner .subscribe .ipt_group .btn { background-color: #e2e2e2; border: 0; color: #727272; font-size: 13px; width: 90px; height: 40px; line-height: 38px; }
#site-footer > .inner .menu { text-align: center; }
#site-footer > .inner .menu > li { display: inline-block; padding: 0 10px; }
#site-footer > .inner .menu > li + li { border-left: 1px solid #afafaf; line-height: 1; }
#site-footer > .inner .menu > li a { font-size: 13px; color: #666; letter-spacing: 0.325px; }
#site-footer > .inner .menu > li.active a { color: #333; font-weight: bold; }

#page-contents { width: 100%; max-width: 1920px; margin: 0 auto; padding-top: 80px; padding-bottom: 80px; box-sizing: border-box; position: relative; overflow: hidden; }


#floatingBtn { position: fixed; bottom: 50px; right: 90px; width: 141px; height: 141px; background: url(../images/ico/floating_btn.png); border-radius: 100%; z-index: 1; box-shadow: 4px 14px 27px 0px rgba(0, 0, 0, 0.15); }
#floatingBtn.abs { position: absolute; bottom: 260px; }

#newsletterModal { width: 96%; max-width: 600px; }
#newsletterModal .searchIpt { max-width: 500px; margin: 0 auto; }
#newsletterModal .searchIpt .btn { background-color: #333; color: #fff; border-color: #333; padding: 0 20px; height: 40px; border-radius: 3px; }
#newsletterModal .text { text-align: center; margin-top: 20px; }

/*#searchModal { width: 96%; max-width: 600px; }
#searchModal .searchIpt { max-width: 500px; margin: 0 auto; }
#searchModal .searchIpt .btn { background-color: #333; color: #fff; border-color: #333; padding: 0 20px; height: 40px; border-radius: 3px; }
#searchModal .filter { border-top: 1px solid #e0e0e0; margin-top: 30px; padding-top: 30px; }
#searchModal .filter .title { font-size: 18px; color: #333; margin-bottom: 20px; font-weight: bold; }
#searchModal .filter > ul {  }
#searchModal .filter > ul > li { border-top: 1px solid #e0e0e0; padding: 15px 0; }
#searchModal .filter > ul > li > a { display: block; font-size: 13px; position: relative; padding: 5px 0; }
#searchModal .filter > ul > li > a:after { content: ''; width: 8px; height: 8px; position: absolute; right: 4px; top: 50%; margin-top: -6px; border-bottom: 1px solid #333; border-left: 1px solid #333; box-sizing: border-box; transform: rotate(-45deg); }
#searchModal .filter > ul > li > ul { display: none; margin-top: 5px; }
#searchModal .filter > ul > li.active > ul { display: block; }
#searchModal .filter > ul > li.active > ul:after { content: ''; display: block; clear: both; }
#searchModal .filter > ul > li > ul > li { width: 33.333%; float: left; }*/


.artworks_list_temp { position: relative; display: grid; grid-template-columns: 15% auto; }
.artworks_list_temp .temp_left { position: absolute; top: 0; left: 0; width: 15%; height: 100%; background-color: #fff; overflow: hidden; }
.main .artworks_list_temp .temp_left { position: fixed; top: 80px;
  -webkit-transition: top 0.5s ease;
  -moz-transition: top 0.5s ease;
  -o-transition: top 0.5s ease;
  transition: top 0.5s ease;
}
.artworks_list_temp .temp_left.fix { position: fixed; top: 80px;  }
.artworks_list_temp .temp_left > .inner { position: relative; padding: 40px 0; }
.artworks_list_temp .temp_left .search { padding: 0 40px; margin-bottom: 40px; }
.artworks_list_temp .temp_left .search .close { display: none; font-size: 0; position: absolute; top: 0; right: 0; width: 33px; height: 33px; background: url(../images/ico/ico_close.png) center no-repeat; background-size: 35%; }
.artworks_list_temp .temp_left .search.active .close { display: block; }
.artworks_list_temp .temp_left .searchForm { position: relative; }
.artworks_list_temp .temp_left .searchForm input { border: 0; border-bottom: 1px solid #d4d4d4; font-size: 12px; width: 100%; height: 30px; padding: 0; outline: 0; }
.artworks_list_temp .temp_left .searchForm input:focus + .line { width: 100%; }
.artworks_list_temp .temp_left .searchForm input:focus + .line + .btn { background-image: url("data:image/svg+xml,%3Csvg id='ico_search' data-name='ico_search' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 493.66 494.53'%3E%3Cpath fill='%23000000' d='M741,713.16,596.25,567.61c61.64-75.8,57.18-187.82-13.38-258.38-75.32-75.32-197.88-75.33-273.21,0s-75.32,197.88,0,273.21A193.46,193.46,0,0,0,568,595.88L712.65,741.37A20,20,0,1,0,741,713.16Zm-403.07-159c-59.73-59.73-59.73-156.91,0-216.64a153.36,153.36,0,0,1,216.64,0c59.73,59.73,59.73,156.91,0,216.64S397.67,613.88,337.95,554.15Z' transform='translate(-253.17 -252.74)'/%3E%3C/svg%3E"); }
.artworks_list_temp .temp_left .searchForm .line { position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: #222; 
  -webkit-transition: width 0.3s ease;
  -moz-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  transition: width 0.2s ease;
}
.artworks_list_temp .temp_left .searchForm .btn { font-size: 0; width: 15px; height: 15px; position: absolute; top: 50%; right: 0; margin-top: -7.5px; border: 0; outline: 0; cursor: pointer; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg id='ico_search' data-name='ico_search' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 493.66 494.53'%3E%3Cpath fill='%23d4d4d4' d='M741,713.16,596.25,567.61c61.64-75.8,57.18-187.82-13.38-258.38-75.32-75.32-197.88-75.33-273.21,0s-75.32,197.88,0,273.21A193.46,193.46,0,0,0,568,595.88L712.65,741.37A20,20,0,1,0,741,713.16Zm-403.07-159c-59.73-59.73-59.73-156.91,0-216.64a153.36,153.36,0,0,1,216.64,0c59.73,59.73,59.73,156.91,0,216.64S397.67,613.88,337.95,554.15Z' transform='translate(-253.17 -252.74)'/%3E%3C/svg%3E"); }

.artworks_list_temp .temp_left .menu { position: absolute; background-color: #fff; width: 100%; z-index: 1; padding: 0 40px; box-sizing: border-box; }
.artworks_list_temp .temp_left .menu > ul > li + li { margin-top: 20px; }
.artworks_list_temp .temp_left .menu > ul > li > a { display: inline-block; font-size: 14px; color: #a7a7a7; letter-spacing: 1.4px; padding-left: 20px; position: relative; line-height: 1; }
.artworks_list_temp .temp_left .menu > ul > li.active > a { color: #000; }
.artworks_list_temp .temp_left .menu > ul > li.active > a:before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background-color: #000; }
.artworks_list_temp .temp_left .menu > ul > li > ul { padding-left: 20px; display: none; }
.artworks_list_temp .temp_left .menu > ul > li > ul > li { margin-top: 15px; }
.artworks_list_temp .temp_left .menu > ul > li > ul > li > a {  display: block; line-height: 1; font-size: 11px; color: #a7a7a7; letter-spacing: 1.1px; }
.artworks_list_temp .temp_left .menu > ul > li > ul > li.active > a { color: #000; }

.artworks_list_temp .temp_left .filter { position: absolute; background-color: #fff; width: 100%; z-index: 2; overflow: hidden; display: none; box-sizing: border-box; }
.artworks_list_temp .temp_left .filter > ul > li > a { display: block; margin: 0 40px; height: 55px; font-size: 14px; color: #333; line-height: 55px; font-weight: 500; position: relative; }
.artworks_list_temp .temp_left .filter > ul > li > a:after { content: ''; width: 17px; height: 100%; position: absolute; top: 0; right: 0; background: url(../images/ico/ico_acc_arrow.png) center no-repeat; }
.artworks_list_temp .temp_left .filter > ul > li > div { background-color: #f4f4f4; display: none; overflow: hidden; display: }
.artworks_list_temp .temp_left .filter > ul > li > div > ul { padding: 20px 40px; }
.artworks_list_temp .temp_left .filter > ul > li > div > ul > li + li { margin-top: 20px; }
.artworks_list_temp .temp_left .filter > ul > li.active > a:after { transform: rotate(180deg); }

.artworks_list_temp .temp_list { grid-column: 2; }


/* Main */
.viewingrooms_list {  }
.viewingrooms_list .item { width: 100%; }
.viewingrooms_list .item + .item { margin-top: 50px; }
.viewingrooms_list .item > .inner { display: block; position: relative; width: 100%; height: 0; padding-top: 46%; background-color: #dedede; overflow: hidden; }
.viewingrooms_list .item > .inner:after { content: ''; position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background: linear-gradient(180deg,hsla(0,0%,100%,0) 0,rgba(0,0,0,.06) 60%,rgba(0,0,0,.4) 100%); }
.viewingrooms_list .item .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-size: cover; background-repeat: no-repeat; background-position: center;
  -webkit-transition: transform 5.5s ease;
  -moz-transition: transform 5.5s ease;
  -o-transition: transform 5.5s ease;
  transition: transform 5.5s ease;
}
.viewingrooms_list .item .img img { width: 100%; }
.viewingrooms_list .item .dec { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 3; padding: 50px; box-sizing: border-box; }
.viewingrooms_list .item .dec .tit { font-size: 35px; color: #fff; line-height: 45px; font-weight: 500; letter-spacing: 0.875px; }
.viewingrooms_list .item .dec .date { font-size: 28px; color: #fff; font-weight: lighter; letter-spacing: 0.7px; }
.viewingrooms_list .item.none { text-align: center; font-size: 16px; line-height: 750px; padding-right: 20%; box-sizing: border-box; }



/* Viewing Rooms */
.view_visual { width: 100%; margin: 0 auto; position: relative; overflow: hidden; }
.view_visual .swiper-slide { width: 100%; height: 100%; overflow: hidden; }
.view_visual .swiper-slide > .inner { position: relative; width: 100%; height: 0; padding-top: 40%; /*height: calc(100vh - 80px);*/ }
.view_visual .swiper-slide .bg { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: contain; }
.view_visual .swiper-nav { width: 100%; text-align: center; margin-top: 20px; }
.view_visual .swiper-nav > * { display: inline-block; vertical-align: middle; }
.view_visual .swiper-pagination { position: static; width: auto; margin: 0 30px; line-height: 20px; color: #000; font-size: 14px; }
.view_visual .swiper-pagination span { display: inline-block; color: #333; margin: 0 10px; }
.view_visual .swiper-prev,
.view_visual .swiper-next { width: 22px; height: 20px; font-size: 0; background-position: center; background-repeat: no-repeat; cursor: pointer; }
.view_visual .swiper-prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44.41 36.65'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000000;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='18.32 36.65 19.73 35.24 2.83 18.33 19.75 1.41 18.33 0 0 18.33 18.32 36.65'/%3E%3Crect class='cls-1' x='1.41' y='17.33' width='43' height='2'/%3E%3C/svg%3E"); }
.view_visual .swiper-next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44.41 36.65'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000000;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='26.09 0 24.68 1.41 41.59 18.32 24.67 35.24 26.08 36.65 44.41 18.32 26.09 0'/%3E%3Crect class='cls-1' y='17.32' width='43' height='2'/%3E%3C/svg%3E"); }
.view_visual .swiper-button-disabled { visibility: hidden; }



.view_visual .VR { position: absolute; top: 50%; left: 0; width: 100%; height: 0; z-index: 1; background-color: #fff; overflow: hidden;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
.view_visual .VR iframe { width: 100%; height: 100%; position: relative; }
.view_visual .VR > .inner { position: relative; width: 100%; height: 0; padding-top: 40%; transform: translateY(-50%); 
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
.view_visual .VR.show { top: 0; height: 100%; }
.view_visual .VR.show > .inner { transform: translateY(0%); }
.view_visual .VR > .inner > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.view_visual .VR_btn { position: absolute; bottom: 20px; right: 20px; z-index: 10; background-color: rgba(255,255,255,0.5); color: #333; }

.view_top { width: auto; max-width: 1550px; margin-left: 15%; position: relative; padding-top: 70px; padding-bottom: 120px; display: grid; grid-template-columns: auto 24%; grid-gap: 70px; box-sizing: border-box; }
.view_top .title { grid-column: 1/span 2; font-size: 45px; font-weight: bold; color: #000; letter-spacing: -1.25px; }
.view_top .text { font-size: 16px; line-height: 30px; color: #646464; max-width: 960px; white-space: pre-line; text-align: justify; }
.view_top .info { font-size: 13px; line-height: 30px; color: #646464; }
.view_top .info > li + li { margin-top: 30px; }
.view_top .info .tit { font-weight: 500; }
.view_top .info .txt { font-family: 'Noto Sans KR', sans-serif; color: #666; }
.view_top .info .txt a { color: #666; }
.view_top .info > li.sns > span { display: inline-block; vertical-align: middle; }
.view_top .info > li.sns > span a { display: block; opacity: 0.75; }
.view_top .info > li.sns > span a img { width: 25px; }

.search_result > .inner { width: 94%; max-width: 1550px; margin: 0 auto; }
.search_result .artworks_list { width: 100%; max-width: 1600px; margin: 0 auto; }

.result_artworks { padding: 15px 5px; padding-top: 40px; font-size: 15px; color: #a0a0a0; margin-bottom: 50px; font-weight: 400; border-bottom: 1px solid #7c7c7c; }
.result_artworks span { color: #333; }
.artworks_list { width: 98%; max-width: 1550px; position: relative; display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 70px 20px; padding: 0; box-sizing: border-box; }
.artworks_list .item { box-sizing: border-box; }
.artworks_list .item .img { width: 100%; height: 0; padding-top: 130%; position: relative; overflow: hidden; background-color: #f2f2f2; 
  -webkit-transition: background 1s ease;
  -moz-transition: background 1s ease;
  -o-transition: background 1s ease;
  transition: background 1s ease;
}
.artworks_list .item .img > .inner { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 100%; background-repeat: no-repeat; background-position: center; }
.artworks_list .item .img img { display: none; }

.artworks_list .item .dec { padding: 25px 12px; box-sizing: border-box; position: relative; }
.artworks_list .item .dec .artist { font-size: 12px; color: #646464; font-weight: 500; }
.artworks_list .item .dec .tit { font-size: 18px; color: #000; font-weight: 500; height: 27px; overflow: hidden;text-overflow: ellipsis; -webkit-line-clamp: 1; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-break: break-word; }
.artworks_list .item .dec .txt { font-size: 12px; color: #666; font-weight: 500; height: 110px; line-height: 22px; margin-top: 10px; overflow: hidden; }
.artworks_list .item .dec .txt .t { max-height: 66px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap:break-word; }
.artworks_list .item .dec .btns { margin-top: 10px; }

.outlineBtn { display: inline-block; outline: none; position: relative; width: 160px; height: 35px; background-color: #fff; color: #999; font-size: 14px; font-weight: 500; line-height: 35px; text-align: center; cursor: pointer; border: 0; box-sizing: border-box; }
.outlineBtn  [class*='line_'] { background-color: #dfdfdf; position: absolute; }
.outlineBtn  [class*='line_']:before { content: ''; background-color: #000; position: absolute; 
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.outlineBtn .line_1 { width: 1px; height: 100%; left: 0; bottom: 0; }
.outlineBtn .line_1:before { width: 1px; height: 0; left: 0; bottom: 0; transition-delay: 0.2s;  }
.outlineBtn .line_2 { width: 100%; height: 1px; left: 0; bottom: 0; }
.outlineBtn .line_2:before { width: 0; height: 1px; left: 0; bottom: 0; transition-delay: 0.2s; }
.outlineBtn .line_3 { width: 100%; height: 1px; left: 0; top: 0; }
.outlineBtn .line_3:before { width: 0; height: 1px; left: 0; top: 0;  }
.outlineBtn .line_4 { width: 1px; height: 100%; right: 0; bottom: 0; }
.outlineBtn .line_4:before { width: 1px; height: 0; right: 0; bottom: 0; }
.outlineBtn:disabled { background-color: #dfdfdf; cursor: default; }


/* Artwork */
#artwork_view { background-color: #fff; }
#artwork_view > .inner { position: relative; width: 100%; }
#artwork_view .artwork_close { position: absolute; top: 20px; right: 70px; z-index: 10; width: 50px; height: 50px; font-size: 0; background-size: 50%; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.82 31.82'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23646464;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='30.41 0 0 30.41 1.41 31.82 31.82 1.42 31.82 1.41 30.41 0'/%3E%3Cpolygon class='cls-1' points='1.41 0 0 1.41 30.41 31.82 31.82 30.41 31.82 30.41 1.41 0'/%3E%3C/svg%3E"); }
#artwork_view .artwork_share { position: absolute; top: 20px; right: 140px; z-index: 10; }
#artwork_view .artwork_share > a { display: block; font-size: 13px; color: #7b7b7b; letter-spacing: 1.3px; line-height: 50px; }
#artwork_view .artwork_share > a:before { content: ''; display: inline-block; vertical-align: middle; width: 21px; height: 21px; margin-right: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%237b7b7b;stroke-miterlimit:10;stroke-width:2px;%7D%3C/style%3E%3C/defs%3E%3Ccircle class='cls-1' cx='7' cy='18' r='6'/%3E%3Ccircle class='cls-1' cx='29' cy='7' r='6'/%3E%3Ccircle class='cls-1' cx='29' cy='29' r='6'/%3E%3Cline class='cls-1' x1='13' y1='21' x2='23' y2='26'/%3E%3Cline class='cls-1' x1='23' y1='10' x2='13' y2='15'/%3E%3C/svg%3E"); }
#artwork_view .artwork_share > ul { position: absolute; top: 100%; left: -40px; background-color: #fff; border: 1px solid #e0e0e0; padding: 30px; width: 170px; box-sizing: border-box; display: none; }
#artwork_view .artwork_share.active > ul { display: block; }
#artwork_view .artwork_share > ul > li + li { margin-top: 20px; }
#artwork_view .artwork_share > ul > li > a { font-size: 14px; color: #666; }
#artwork_view .artwork_share > ul > li > a:before { content: ''; display: inline-block; vertical-align: middle; width: 21px; height: 21px; margin-right: 15px; background-position: center; background-repeat: no-repeat; }
#artwork_view .artwork_share > ul > li.kakao > a:before { background-image: url(../images/ico/ico_share_kakao.png); }
#artwork_view .artwork_share > ul > li.email > a:before { background-image: url(../images/ico/ico_share_email.png); }
#artwork_view .artwork_share > ul > li.url > a:before { background-image: url(../images/ico/ico_share_url.png); }
#artwork_view .artwork_share > ul > li > a span { border-bottom: 1px solid #666; }


#artwork_view .artwork_temp { width: 100%; height: 100vh; display: grid; grid-template-rows: auto 125px; }
#artwork_view .artwork_temp .img { overflow: hidden; position: relative; }
#artwork_view .artwork_temp .img .prev,
#artwork_view .artwork_temp .img .next { position: absolute; top: 0; width: 50%; height: 100%; z-index: 9; }
#artwork_view .artwork_temp .img .prev { left: 0; }
#artwork_view .artwork_temp .img .next { right: 0; }
/*#artwork_view .artwork_temp .img .prev:hover { cursor: url(../images/ico/ico_arrow_left2.png), auto; }
#artwork_view .artwork_temp .img .next:hover { cursor: url(../images/ico/ico_arrow_right2.png), auto; }*/

#artwork_view .artwork_temp .dec { width: 92%; max-width: 840px; margin: 0 auto; position: relative; box-sizing: border-box; padding-right: 180px; }
#artwork_view .artwork_temp .dec .artist { font-size: 12px; color: #646464; font-weight: 500; }
#artwork_view .artwork_temp .dec .title { font-size: 18px; color: #000; font-weight: 500; line-height: 27px; }
#artwork_view .artwork_temp .dec .info { font-size: 12px; color: #666; font-weight: 500; line-height: 22px; margin-top: 10px; }
#artwork_view .artwork_temp .dec .info span { color: #bebebe; margin: 0 5px; }

#artwork_view .artwork_temp .dec .sns { display: inline-block; vertical-align: top; margin-left: 15px; }
#artwork_view .artwork_temp .dec .sns > li { display: inline-block; vertical-align: middle; }
#artwork_view .artwork_temp .dec .sns > li a { display: block; opacity: 0.75; }
#artwork_view .artwork_temp .dec .sns > li a img { width: 25px; }

#artwork_view .artwork_temp .dec .btns { position: absolute; top: 0; right: 0; }
#artwork_view .artwork_temp .dec .btns .btn { display: block; }
#artwork_view .artwork_temp .dec .btns .btn + .btn { margin-top: 10px; }
#artwork_view .artwork_temp .dec .btn.vr_menu { position: relative; }
#artwork_view .artwork_temp .dec .btn.vr_menu span { font-weight: 500; position: relative; display: block; z-index: 2; }
#artwork_view .artwork_temp .dec .btn.vr_menu span:before { content: ''; width: 19px; height: 12px; display: inline-block; vertical-align: middle; margin-right: 13px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 53.36 34.42'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;%7D.cls-2%7Bclip-path:url(%23clip-path);%7D.cls-3%7Bfill:%23999999;%7D%3C/style%3E%3CclipPath id='clip-path' transform='translate(0 0)'%3E%3Crect class='cls-1' width='53.36' height='34.42'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='cls-2'%3E%3Cpath class='cls-3' d='M53.28,16.74a25.42,25.42,0,0,0-5.57-8.42,26.72,26.72,0,0,0-8.19-5.73A31,31,0,0,0,26.68,0,31,31,0,0,0,13.84,2.59,27,27,0,0,0,3.07,11.38a23.1,23.1,0,0,0-3,5.36,1.43,1.43,0,0,0,0,.91,24.26,24.26,0,0,0,5.41,8.44,26,26,0,0,0,8.18,5.74,31.57,31.57,0,0,0,13,2.59,31.57,31.57,0,0,0,13-2.59A26.1,26.1,0,0,0,50.42,23a22.1,22.1,0,0,0,2.87-5.38,1.43,1.43,0,0,0,0-.91m-50.52,0ZM45.67,24.3a23.18,23.18,0,0,1-7.27,5,28.83,28.83,0,0,1-11.72,2.28,28.75,28.75,0,0,1-11.86-2.34,23.27,23.27,0,0,1-9.56-7.85,22.45,22.45,0,0,1-2-3.32c-.17-.35-.28-.62-.37-.84A24.16,24.16,0,0,1,15.15,5.11,28.18,28.18,0,0,1,26.68,2.83,28.15,28.15,0,0,1,38.36,5.18,24.13,24.13,0,0,1,48,13a23.52,23.52,0,0,1,2,3.34c.17.35.3.63.39.85a22.58,22.58,0,0,1-4.75,7.07' transform='translate(0 0)'/%3E%3Cpath class='cls-3' d='M26.51,7.91a9.36,9.36,0,1,0,9.36,9.36,9.36,9.36,0,0,0-9.36-9.36m0,15.89a6.53,6.53,0,1,1,4.62-1.91,6.5,6.5,0,0,1-4.62,1.91' transform='translate(0 0)'/%3E%3C/g%3E%3C/svg%3E"); }
#artwork_view .artwork_temp .dec .btn.vr_menu ul { display: none; position: absolute; bottom: -1px; left: -1px; z-index: 1; width: 100%; padding-bottom: 35px; line-height: 35px; background-color: #fff; border: 1px solid #dfdfdf; }
#artwork_view .artwork_temp .dec .btn.vr_menu ul li { margin: 0 10px; }
#artwork_view .artwork_temp .dec .btn.vr_menu ul li:first-child { padding-top: 5px; }
#artwork_view .artwork_temp .dec .btn.vr_menu ul li:last-child { border-bottom: 1px solid #dfdfdf; padding-bottom: 5px; }
#artwork_view .artwork_temp .dec .btn.vr_menu ul li a { color: #999; }
#artwork_view .artwork_temp .dec .btn.vr_menu.active span { color: #333; }
#artwork_view .artwork_temp .dec .btn.vr_menu.active span:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 53.36 34.42'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;%7D.cls-2%7Bclip-path:url(%23clip-path);%7D.cls-3%7Bfill:%23333333;%7D%3C/style%3E%3CclipPath id='clip-path' transform='translate(0 0)'%3E%3Crect class='cls-1' width='53.36' height='34.42'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='cls-2'%3E%3Cpath class='cls-3' d='M53.28,16.74a25.42,25.42,0,0,0-5.57-8.42,26.72,26.72,0,0,0-8.19-5.73A31,31,0,0,0,26.68,0,31,31,0,0,0,13.84,2.59,27,27,0,0,0,3.07,11.38a23.1,23.1,0,0,0-3,5.36,1.43,1.43,0,0,0,0,.91,24.26,24.26,0,0,0,5.41,8.44,26,26,0,0,0,8.18,5.74,31.57,31.57,0,0,0,13,2.59,31.57,31.57,0,0,0,13-2.59A26.1,26.1,0,0,0,50.42,23a22.1,22.1,0,0,0,2.87-5.38,1.43,1.43,0,0,0,0-.91m-50.52,0ZM45.67,24.3a23.18,23.18,0,0,1-7.27,5,28.83,28.83,0,0,1-11.72,2.28,28.75,28.75,0,0,1-11.86-2.34,23.27,23.27,0,0,1-9.56-7.85,22.45,22.45,0,0,1-2-3.32c-.17-.35-.28-.62-.37-.84A24.16,24.16,0,0,1,15.15,5.11,28.18,28.18,0,0,1,26.68,2.83,28.15,28.15,0,0,1,38.36,5.18,24.13,24.13,0,0,1,48,13a23.52,23.52,0,0,1,2,3.34c.17.35.3.63.39.85a22.58,22.58,0,0,1-4.75,7.07' transform='translate(0 0)'/%3E%3Cpath class='cls-3' d='M26.51,7.91a9.36,9.36,0,1,0,9.36,9.36,9.36,9.36,0,0,0-9.36-9.36m0,15.89a6.53,6.53,0,1,1,4.62-1.91,6.5,6.5,0,0,1-4.62,1.91' transform='translate(0 0)'/%3E%3C/g%3E%3C/svg%3E"); }
#artwork_view .artwork_temp .dec .btn.vr_menu.active ul { display: block; }

#artwork_view .artwork_slider { position: relative; width: 100%; height: 100%; margin: 0 auto; box-sizing: border-box; padding-top: 40px; padding-bottom: 70px; }
#artwork_view .artwork_slider .swiper-slide { background-color: #fff; }
#artwork_view .artwork_slider .swiper-slide img { display: inline-block; max-height: 100%; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#artwork_view .artwork_slider .swiper-nav { width: 100%; text-align: center; padding: 25px 0; position: relative; z-index: 10; }
#artwork_view .artwork_slider .swiper-nav > * { display: inline-block; vertical-align: middle; }
#artwork_view .artwork_slider .swiper-pagination { position: static; width: auto; margin: 0 30px; line-height: 20px; color: #000; font-size: 14px; }
#artwork_view .artwork_slider .swiper-pagination span { display: inline-block; color: #333; margin: 0 10px; }
#artwork_view .artwork_slider .swiper-prev,
#artwork_view .artwork_slider .swiper-next { width: 22px; height: 20px; font-size: 0; background-position: center; background-repeat: no-repeat; cursor: pointer; }
#artwork_view .artwork_slider .swiper-prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44.41 36.65'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000000;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='18.32 36.65 19.73 35.24 2.83 18.33 19.75 1.41 18.33 0 0 18.33 18.32 36.65'/%3E%3Crect class='cls-1' x='1.41' y='17.33' width='43' height='2'/%3E%3C/svg%3E"); }
#artwork_view .artwork_slider .swiper-next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44.41 36.65'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000000;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='26.09 0 24.68 1.41 41.59 18.32 24.67 35.24 26.08 36.65 44.41 18.32 26.09 0'/%3E%3Crect class='cls-1' y='17.32' width='43' height='2'/%3E%3C/svg%3E"); }


#artwork_view_in_room { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; display: none; }
#artwork_view_in_room .bg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: #e7eaf3; background-size: cover; background-repeat: no-repeat; background-position: bottom; transform-origin: bottom; }
#artwork_view_in_room .bg:before { content: ''; opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; right: 0; z-index: 1; background-size: cover; background-repeat: no-repeat; background-position: bottom right; 
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
#artwork_view_in_room .bg.scaleOn:before { opacity: 1; }
#artwork_view_in_room.type_A .bg { background-image: url(../images/artworks/view_in_room_bg_B.jpg); }
#artwork_view_in_room.type_B .bg { background-image: url(../images/artworks/view_in_room_bg_B.jpg); }
#artwork_view_in_room.type_C .bg { background-image: url(../images/artworks/view_in_room_bg_B.jpg); }
#artwork_view_in_room.type_A .bg:before { background-image: url(../images/artworks/view_in_room_bg_A_scale.png); }
#artwork_view_in_room.type_B .bg:before { background-image: url(../images/artworks/view_in_room_bg_B_scale.png); }
#artwork_view_in_room.type_C .bg:before { background-image: url(../images/artworks/view_in_room_bg_B_scale.png); }
#artwork_view_in_room.type_A .bg.man:before { background-image: url(../images/artworks/view_in_room_bg_A_scale_man.png); }
#artwork_view_in_room.type_B .bg.man:before { background-image: url(../images/artworks/view_in_room_bg_B_scale_man.png); }
#artwork_view_in_room.type_C .bg.man:before { background-image: url(../images/artworks/view_in_room_bg_B_scale_man.png); }
#artwork_view_in_room .close { font-size: 0; position: absolute; top: 20px; right: 70px; z-index: 2; width: 50px; height: 50px; background-size: 50%; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.82 31.82'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23646464;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='30.41 0 0 30.41 1.41 31.82 31.82 1.42 31.82 1.41 30.41 0'/%3E%3Cpolygon class='cls-1' points='1.41 0 0 1.41 30.41 31.82 31.82 30.41 31.82 30.41 1.41 0'/%3E%3C/svg%3E"); }
#artwork_view_in_room .artwork { position: absolute; }
#artwork_view_in_room.showIn .artwork { box-shadow: -11px 11px 3px 0px rgba(0, 0, 0, 0.12); transform-origin: center center; }
#artwork_view_in_room.showIn.type_C .artwork { transform-origin: bottom center; }
#artwork_view_in_room.showIn .artwork.noShadow { box-shadow: none; }

#artwork_view_in_room .scale { font-size: 14px; letter-spacing: 0.7px; color: #333; position: absolute; bottom: 14%; left: 50%; z-index: 2; transform: translateX(-50%); }
#artwork_view_in_room .scale:before { content: ''; display: inline-block; vertical-align: middle; width: 28px; height: 28px; margin-right: 15px; background-repeat: no-repeat; background-position: center; background-image: url(../images/ico/ico_scale_guide.svg); }
#artwork_view_in_room .scale span { border-bottom: 1px solid #333; }

#artwork_view_in_room.type_C .scale { top: 4%; bottom: auto; }

#artwork_view_in_room  [class*='box_'] { background-color: #fff; position: absolute; z-index: 1; }
#artwork_view_in_room .box_top { width: 100%; height: 20px; top: 0; }
#artwork_view_in_room .box_right { width: 540px; height: 100%; left: 0; }
#artwork_view_in_room .box_bottom { width: 100%; height: 165px; bottom: 0; }
#artwork_view_in_room .box_left { width: 540px; height: 100%; right: 0; }



#artwork_view_zoom { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; background-color: #000; visibility: hidden; opacity: 0; 
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#artwork_view_zoom.showIn { visibility: visible; opacity: 1; }
#artwork_view_zoom .close { font-size: 0; position: absolute; top: 20px; right: 70px; z-index: 2; width: 50px; height: 50px; background-size: 50%; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.82 31.82'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ffffff;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='30.41 0 0 30.41 1.41 31.82 31.82 1.42 31.82 1.41 30.41 0'/%3E%3Cpolygon class='cls-1' points='1.41 0 0 1.41 30.41 31.82 31.82 30.41 31.82 30.41 1.41 0'/%3E%3C/svg%3E"); }
#artwork_view_zoom .zoomController { position: absolute; bottom: 20px; left: 50%; z-index: 2; transform: translateX(-50%); border-radius: 2px; background-color: rgba(0, 0, 0, 0.6); padding: 10px; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; display: flex; }
#artwork_view_zoom .zoomController .range { -webkit-appearance: none; appearance: none; width: 100%; height: 1px; background: #fff; margin: 0px 10px; outline: none; }
#artwork_view_zoom .zoomController .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px;  height: 20px; background: #fff; border-radius: 100%; cursor: pointer; }
#artwork_view_zoom .zoomController .minus,
#artwork_view_zoom .zoomController .plus { height: 32px; width: 32px; padding: 10px; flex-shrink: 0; cursor: pointer; }
#artwork_view_zoom #openseadragon { width: 100%; height: 100%; position: relative; overflow: hidden; }



/* Inquiry Modal */
#inquiryModal { width: 96%; max-width: 600px; }
#inquiryModal .works_info { display: table; width: 100%; margin-bottom: 30px; }
#inquiryModal .works_info > * { display: table-cell; vertical-align: middle; }
#inquiryModal .works_info .img { width: 150px; }
#inquiryModal .works_info .img img { max-height: 120px; margin: 0 auto; }
#inquiryModal .works_info .dec { padding: 10px 0; padding-left: 20px; }
#inquiryModal .works_info .dec .tit { font-size: 18px; color: #000; font-weight: 500; }
#inquiryModal .works_info .dec .artist { font-size: 12px; color: #646464; font-weight: 500; }
#inquiryModal .works_info .dec .txt { font-size: 12px; color: #666; font-weight: 500; margin-top: 10px; }
#inquiryModal .sendBtn { display: block; margin: 0 auto; margin-top: 30px; }

/*#viewLayerModal { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
#viewLayerModal.modal > .inner { border-radius: 0; }
#viewLayerModal.modal > .inner .modal_content { height: 100%; }
#viewLayerModal.modal > .inner .modal_content > .inner { height: 100%; box-sizing: border-box; }
#viewLayerModal .img { width: 100%; height: 90%; background-position: center; background-repeat: no-repeat; background-size: contain; }
#viewLayerModal .dec  { width: 100%; height: 10%; text-align: center; padding-top: 30px; box-sizing: border-box; }
#viewLayerModal .dec > * { display: inline-block; }
#viewLayerModal .dec > * + * { margin-left: 10px; }
#viewLayerModal .dec .tit { font-size: 16px; color: #222; }
#viewLayerModal .dec .name { font-size: 14px; color: #666; }
#viewLayerModal .dec .txt { font-size: 12px; color: #999; margin-top: 5px; }*/


#searchLayer { position: fixed; top: 80px; left: 0; z-index: 5; width: 100%;background-color: #fff; overflow: hidden; visibility: hidden; height: 0; 
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);

}
#searchLayer > .inner { width: 94%; max-width: 1100px; margin: 0 auto; padding: 50px 0; padding-bottom: 80px; }
#searchLayer .close { display: none; }
#searchLayer .searchForm { position: relative; }
#searchLayer .searchForm input { border: 0; border-bottom: 1px solid #222; font-size: 12px; width: 100%; height: 40px; padding: 0; outline: 0; box-sizing: border-box; padding-left: 5px; padding-right: 55px; }
#searchLayer .searchForm .btn { font-size: 0; width: 22px; height: 22px; position: absolute; top: 50%; right: 18px; margin-top: -11px; border: 0; outline: 0; cursor: pointer; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg id='ico_search' data-name='ico_search' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 493.66 494.53'%3E%3Cpath fill='%23333333' d='M741,713.16,596.25,567.61c61.64-75.8,57.18-187.82-13.38-258.38-75.32-75.32-197.88-75.33-273.21,0s-75.32,197.88,0,273.21A193.46,193.46,0,0,0,568,595.88L712.65,741.37A20,20,0,1,0,741,713.16Zm-403.07-159c-59.73-59.73-59.73-156.91,0-216.64a153.36,153.36,0,0,1,216.64,0c59.73,59.73,59.73,156.91,0,216.64S397.67,613.88,337.95,554.15Z' transform='translate(-253.17 -252.74)'/%3E%3C/svg%3E"); }
#searchLayer .filter { width: 100%; padding: 40px 15px 0; box-sizing: border-box; }
#searchLayer .filter > ul {  }
#searchLayer .filter > ul > li { display: grid; grid-template-columns: 80px auto; }
#searchLayer .filter > ul > li + li { margin-top: 30px; }
#searchLayer .filter > ul > li > .title { font-size: 14px; color: #333; font-weight: 500; }
#searchLayer .filter > ul > li > ul { display: flex; flex-flow: wrap; }
#searchLayer .filter > ul > li > ul > li { white-space: nowrap; padding-right: 30px; }
#searchLayer .filter > ul > li > ul > li:last-child { padding-right: 0; }

body.searchOn #searchLayer { visibility: visible; height: 284px; }
body.searchOn #site-header .right .search button { background-size: 25px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.82 31.82'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23646464;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='30.41 0 0 30.41 1.41 31.82 31.82 1.42 31.82 1.41 30.41 0'/%3E%3Cpolygon class='cls-1' points='1.41 0 0 1.41 30.41 31.82 31.82 30.41 31.82 30.41 1.41 0'/%3E%3C/svg%3E") !important; }


#gatewayBar { position: fixed; left: -15%; top: 79px; bottom: 0; width: 15%; background-color: #fff; z-index: 90; 
  -webkit-transition: left 0.5s ease;
  -moz-transition: left 0.5s ease;
  -o-transition: left 0.5s ease;
  transition: left 0.5s ease;
}
#gatewayBar > .inner { position: relative; width: 100%; height: 100%; box-sizing: border-box; border-right: 1px solid #e6e2e0; padding-top: 40px; padding-left: 40px; }
#gatewayBar > .inner:after { content: ''; width: 1px; height: 80px; background-color: #e6e2e0; position: absolute; bottom: 100%; right: -1px; }
#gatewayBar .close { width: 50px; height: 100%; position: absolute; top: 0; right: 0; background-color: #e6e2e0; cursor: pointer; overflow: hidden; }
#gatewayBar .close span { display: inline-block; font-size: 13px; color: #666; letter-spacing: 1.3px; transform: rotate(-90deg); line-height: 50px; text-align: center; box-sizing: border-box; width: 71px; position: absolute; left: 50%; top: 20px; margin-left: -35px; }
#gatewayBar .close span:after { content: ''; display: inline-block; width: 11px; height: 7px; background: url(../images/ico/ico_arrow_up_g.png) center no-repeat; background-size: contain; padding-left: 20px; }
#gatewayBar .logo { padding-left: 40px; padding-top: 20px; }
#gatewayBar .logo .logoImg { width: 120px; }
#gatewayBar ul {  }
#gatewayBar ul li + li { margin-top: 20px; }
#gatewayBar ul li a { display: inline-block; padding-right: 40px; padding-top: 30px; background-color: #fff; position: relative; 
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#gatewayBar ul li a:after { content: ''; position: absolute; top: 40px; right: 40px; width: 12px; height: 12px; opacity: 0; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 56.2 56.2'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;%7D.cls-2%7Bclip-path:url(%23clip-path);%7D.cls-3%7Bfill:%23333333;%7D%3C/style%3E%3CclipPath id='clip-path' transform='translate(0 0)'%3E%3Crect class='cls-1' width='56.21' height='56.21'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='cls-2'%3E%3Cpath class='cls-3' d='M56.2,3.3A3.3,3.3,0,0,0,52.9,0H12.28a3.3,3.3,0,0,0,0,6.6H44.94l-44,44a3.3,3.3,0,0,0,4.67,4.67l44-44V43.92a3.3,3.3,0,1,0,6.6,0Z' transform='translate(0 0)'/%3E%3C/g%3E%3C/svg%3E"); 
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#gatewayBar ul li a .logoImg { width: 120px; opacity: 0.3; 
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
body.open_gate #site-header .logo a.gateway { transform: rotate(-180deg); }
body.open_gate #gatewayBar { left: 0; }
/*body.open_gate #site-header { transform: translateX(50px); }
body.open_gate #site-body { transform: translateX(50px); overflow: hidden;  }*/
/*body.open_gate #gatewayOverlay { visibility: visible; opacity:1; }*/


/* Scroll Top Btn */
#scrollTop { display: none; position: fixed; bottom: 40px; right: 40px; width: 36px; height: 36px; background-size: contain; cursor: pointer; z-index: 45; visibility: hidden; background: url(../images/common/top_btn.png) center no-repeat; }
#scrollTop.abs { position: absolute; bottom: 170px; }


#gateway { width: 100%; height: 100vh; }
#gateway > .inner { position: relative; width: 100%; height: 100%; max-width: 1200px; margin: 0 auto; }
#gateway .site_logo { position: absolute; top: 15%; left: 50%; margin-left: -115px; z-index: -1; }
#gateway .site_logo .logoImg { width: 230px; }
#gateway .list { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 140px; height: 100vh; }
#gateway .list > li { position: relative; display: table; width: 100%; height: 100%; }
#gateway .list > li:before { content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background-color: #f0f0f0; z-index: -2; }
#gateway .list > li > .inner { display: table-cell; vertical-align: middle; }
#gateway .list > li .titArea { display: block; text-align: center; position: relative; margin-top: 50px; z-index: 1; }
#gateway .list > li .titArea .tit1 { font-size: 254px; color: #333; opacity: 0.2; font-weight: 900; font-family: 'Montserrat', sans-serif; position: absolute; top: 0; left: 0; width: 100%; line-height: 190px; }
#gateway .list > li .titArea .tit2 { font-size: 45px; color: #333; line-height: 190px; font-weight: 500; font-family: 'Montserrat', sans-serif; }
#gateway .list > li .titArea .url { font-size: 15px; color: #8396a3; margin-top: 20px; }
#gateway .list > li .bg { position: absolute; top: 0; left: 50%; width: 0; height: 100%; background-color: #999; background-position: center; background-repeat: no-repeat; z-index: -1; 
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}


#urlCopyModal { width: 96%; max-width: 600px; text-align: center; }
#urlCopyModal .title { font-size: 16px; letter-spacing: 3.2px; color: #999; margin-bottom: 30px; }
#urlCopyModal .text { font-size: 13px; line-height: 24px; color: #646464; }
#urlCopyModal .text strong { font-size: 15px; font-weight: 500; color: #333; }

#alertModal { width: 96%; max-width: 300px; text-align: center; }
#alertModal .title { font-size: 16px; letter-spacing: 3.2px; color: #999; margin-bottom: 30px; }
#alertModal .url { font-size: 15px; font-weight: 500; color: #333; margin-bottom: 30px; }
#alertModal .text { font-size: 15px; line-height: 24px; color: #646464; }

#landscape { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; color: #000; z-index: 1000; line-height: 100vh; text-align: center; font-size: 1em; }


/* Hover Event */
@media (hover: hover) {

  .char-text:hover .char { transition: transform .6s; transition-delay: calc(0.01s*var(--char-index)); transform: translateY(-100%); }

  .outlineBtn:hover .line_1:before { height: 100%; transition-delay: 0s; }
  .outlineBtn:hover .line_2:before { width: 100%; transition-delay: 0s; }
  .outlineBtn:hover .line_3:before { width: 100%; transition-delay: 0.2s; }
  .outlineBtn:hover .line_4:before { height: 100%; transition-delay: 0.2s; }

  .artworks_list_temp .temp_left .menu > ul > li > a:hover { color: #000; }

  #artwork_view .artwork_temp .dec .btns .btn:hover { border-color: #000; }
  #artwork_view .artwork_temp .dec .btns .btn:disabled:hover { border-color: #dfdfdf; }
  #artwork_view .artwork_temp .dec .btn.vr_menu ul a:hover { color: #333; }

  .artworks_list .item .img:hover { background-color: #fff; }

  #inquiryModal .sendBtn:hover { border-color: #000; }

  #site-header .right .search button:hover { background-image: url("data:image/svg+xml,%3Csvg id='ico_search' data-name='ico_search' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 493.66 494.53'%3E%3Cpath fill='%23646464' d='M741,713.16,596.25,567.61c61.64-75.8,57.18-187.82-13.38-258.38-75.32-75.32-197.88-75.33-273.21,0s-75.32,197.88,0,273.21A193.46,193.46,0,0,0,568,595.88L712.65,741.37A20,20,0,1,0,741,713.16Zm-403.07-159c-59.73-59.73-59.73-156.91,0-216.64a153.36,153.36,0,0,1,216.64,0c59.73,59.73,59.73,156.91,0,216.64S397.67,613.88,337.95,554.15Z' transform='translate(-253.17 -252.74)'/%3E%3C/svg%3E") !important; }

  #gatewayBar ul:hover .logoImg { opacity: 0.2; }
  #gatewayBar ul li a:hover:after { opacity: 1; top: 30px; right: 0; }
  #gatewayBar ul li a:hover .logoImg { opacity: 1; margin-left: 10px; }

  #gateway .list > li .titArea:hover + .bg { width: 100%; left: 0; }
  #gateway .list > li .titArea:hover .tit1 { opacity: 0; }
  #gateway .list > li .titArea:hover .tit2 { color: #fff; }
  #gateway .list > li .titArea:hover .url { color: #fff; }

  .viewingrooms_list .item > .inner:hover .img { transform: scale(1.1); }

  .view_top .info > li.sns > span a:hover { opacity: 1; }
  #artwork_view .artwork_temp .dec .sns > li a:hover { opacity: 1; }

  .view_top .info .txt a:hover { text-decoration: underline; color: #000; }

  #artwork_view .artwork_slider .swiper-slide img:hover { cursor: zoom-in; }

}

/* 1024 */
@media screen and (max-width: 1024px){
  .artworks_list_temp { display: block; min-height: 60vh; }
  .artworks_list_temp .temp_left { display: none; width: 100%; height: auto; }
  .artworks_list_temp .temp_left > .inner { padding: 25px 0; }
  .artworks_list_temp .temp_left .menu { position: static; padding: 0; }
  .artworks_list_temp .temp_left .menu > ul { display: flex; justify-content: center; }
  .artworks_list_temp .temp_left .menu > ul > li + li { margin-top: 0; margin-left: 30px; }
  .artworks_list_temp .temp_left .menu > ul > li > a { padding: 0; font-size: 13px; padding-bottom: 5px; border-bottom: 1px solid transparent; }
  .artworks_list_temp .temp_left .menu > ul > li > a:before { display: none; }
  .artworks_list_temp .temp_left .menu > ul > li.active > a { border-color: #333; }

  .main .artworks_list_temp .temp_left { display: block; position: static; }

  .artworks_list { grid-template-columns: repeat(3,1fr); margin: 0 auto; }

  #gatewayBar { position: fixed; left: -200px; top: 79px; bottom: 0; width: 200px; background-color: #fff; z-index: 90; }

  #searchLayer > .inner { padding: 20px 0; }

  #artwork_view_in_room.type_A .bg:before { background-image: url(../images/artworks/view_in_room_bg_A_scale_m.png) !important; }
  #artwork_view_in_room.type_B .bg:before { background-image: url(../images/artworks/view_in_room_bg_B_scale_m.png) !important; }
  #artwork_view_in_room.type_C .bg:before { background-image: url(../images/artworks/view_in_room_bg_B_scale_m.png) !important; }

  #artwork_view_in_room.showIn .artwork { box-shadow: -5px 5px 3px 0px rgba(0, 0, 0, 0.12); }

  .view_top { width: 92%; margin: 0 auto; }
}