@charset "utf-8";


/*
 * File       : modules/artwork/style.css
 * Author     : STUDIO-JT (SUMI,HREE)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) JT ARTWORK LIST
 * 2) JT ARTWORK SINGLE
 * 3) RWD
 */



/* **************************************** *
 * JT ARTWORK LIST
 * **************************************** */
.jt-divide-list {position:relative;display: grid; grid-template-columns: repeat(4,1fr);grid-column-gap: 4.2rem; grid-row-gap: 6rem;}

.jt-divide-list__link { display: block; max-width: 28.8rem; margin: 0 auto; position: relative; }
html.desktop .jt-divide-list__link:hover .jt-divide-list__thumb:before,
html.desktop .jt-divide-list__link:hover .jt-divide-list__thumb:after,
html.desktop .jt-divide-list__link:focus .jt-divide-list__thumb:before,
html.desktop .jt-divide-list__link:focus .jt-divide-list__thumb:after  {opacity:1;}

.jt-divide-list__thumb {display: block;margin: 0 0 2.3rem;}
.jt-divide-list__thumb:before {width:100%;height:100%;background:#000000;background: rgba(0, 0, 0, .5);content:'';display:block;position: absolute;left: 0;right: 0;top: 0;bottom: 0;opacity:0;-webkit-transition: opacity 0.1s;transition: opacity 0.1s;z-index: 10;}
.jt-divide-list__thumb:after {font-family: 'jt-font';font-size: 4.6rem;color:#fff;font-weight:normal;content:'\e919';opacity:0;-webkit-transition: opacity 0.1s;transition: opacity 0.1s;z-index: 20;position: absolute;top: 50%;left: 50%;margin-top: -2.3rem;margin-left: -2.3rem;}
.jt_artwork_list_wrap .jt-divide-list__thumb img {display: block;width: 100%; max-width: 100%;}

.jt-divide-list__title {font-size: 0;}
.jt-divide-list__title span {line-height: 1.6;font-weight: 500;color: #000;font-size:1.8rem;vertical-align:middle;letter-spacing: -0.025em;}

.jt-divide-list__category {padding: 0.3rem 1rem;margin-right: 1rem;font-size:1.2rem;color:#fff;font-weight:400;border-radius:3rem;letter-spacing: 0.01em;display: inline-block;vertical-align: middle;}
.jt-divide-list__category--drama { background:#FF650F}
.jt-divide-list__category--movie { background:#013472;}
.jt-divide-list__category--etc { background:#aaa;}

/* Lazyload */
.jt-divide-list__thumb.jt-lazyload {padding-top: 143.5%;}



/* **************************************** *
  * JT ARTIST SINGLE
 * **************************************** */
.jt_single_artwork {margin-top:12rem;}
.jt_single_artwork .artist-topic__content-item {background: #e0e0e0;}

.jt-single__artwork-wrap {max-width: 101.4rem;margin:0 auto 10rem;font-size: 0;width: 100%; background: #e0e0e0;}
.jt-single__artwork-img {display: inline-block;vertical-align:top;width: 40.2%;max-width: 40.7rem;margin-right: 10rem;position:relative;}
.jt-single__artwork-img figure  {padding-top: 141%;}
.jt-single__artwork-img img {  max-width: inherit; width: 100%;}

.jt-single__artwork-slider {overflow: hidden;}
.jt-single__artwork-img .slick_additional { margin-top: 2rem; }
.jt-single__artwork-img .slick-dots > li:after {background: rgba(0, 0, 0, 0.3);}
.jt-single__artwork-img .slick-dots > li.slick-active:after {background: rgba(0, 0, 0, 1);}
.jt-single__artwork-img .slick_play_state_btn:after {color: #000; font-size: 2.6rem;}

.jt-single__artwork-info {display: inline-block;vertical-align:top;width: -webkit-calc(59.8% - 10rem);width: calc(59.8% - 10rem);padding-left: 2.1rem;}
.artwork-info__category {padding: 0.3rem 1rem;margin-right: 1rem;font-size:1.2rem;color:#fff;font-weight:400;border-radius:3rem;letter-spacing: 0.01em;display: inline-block;vertical-align: middle;}
html.ios .artwork-info__category {padding-top:0.3rem; padding-bottom:0.5rem;}
html.ie .artwork-info__category {padding-top:0.3rem; padding-bottom:0.5rem;}
.artwork-info__category--drama { background:#FF650F}
.artwork-info__category--movie { background:#013472;}
.artwork-info__category--etc { background:#aaa;}
.artwork-info__title { font-size: 3rem; font-weight: 500; letter-spacing: -0.025rem; margin-top: 0.6rem; line-height: 1.46;}
.jt-single__artwork-info ul {margin-top: 3rem;}
.jt-single__artwork-info li {font-size:1.6rem;letter-spacing:-0.025rem;display: table;width: 100%;margin-bottom: 1rem;}
.jt-single__artwork-info li b {color:#000;display: table-cell;width: 17.6%;font-weight: 500;line-height: 1.75;}
.jt-single__artwork-info li span {color:#444;display: table-cell;line-height: 1.75;}
.jt-single__artwork-info li.artwork-info__keyword a {color:#444;position:relative;margin-right: 0.5rem;}
.jt-single__artwork-info li.artwork-info__keyword a:last-child {margin-right:0;}
html.desktop .jt-single__artwork-info li.artwork-info__keyword a:hover span {color:#FF650F;}
html.desktop .jt-single__artwork-info li.artwork-info__keyword a:hover:before {opacity:1;}

.jt-single__artwork-info li.artwork-info__replay a {color: #444; position: relative; margin-right: 1.8rem; padding-right: 1.5rem; letter-spacing: 0; display: inline-block; text-transform: capitalize;-webkit-transition: color 0.1s;transition: color 0.1s;}
.jt-single__artwork-info li.artwork-info__replay a:last-child {margin-right:0;}
.jt-single__artwork-info li.artwork-info__replay a::after {content: '\e913'; font-family: 'jt-font'; position: absolute; right: 0; top:50%; transform: translateY(-50%); width: 1rem; height: 100%; font-size: 1rem; line-height: 2.8rem; color: #000;-webkit-transition: color 0.1s;transition: color 0.1s;}
.jt-single__artwork-info li:last-child {margin-bottom:0;}

html.desktop .jt-single__artwork-info li.artwork-info__replay a:hover ,
html.desktop .jt-single__artwork-info li.artwork-info__replay a:hover::after { color:#FF650F; }

/* artwork line */
.jt-single__artwork-line-wrap {background:#d9d9d9; padding:11.7rem 0 15rem;}
.jt-single__artwork-line-inner {max-width: 101.4rem;margin:0 auto;}
.jt-single__artwork-line-wrap h2 {margin-bottom:5rem; font-size:3.2rem; font-weight:500; color:#000;}
.artwork-line-wrap {font-size:0;margin: -2.1rem;}
.artwork-line-item {display:inline-block;vertical-align: middle;width: -webkit-calc(33.33% - 4.2rem);width: calc(33.33% - 4.2rem);margin: 2.1rem;}
.artwork-line-item > a {display:block; position:relative;}
.artwork-line-item > a:before {position:absolute; left:0; top:0; width:100%; height:100%; background:#000000; background:rgba(0, 0, 0, .5); content:''; display:block; opacity:0;-webkit-transition: opacity 0.1s;transition: opacity 0.1s;z-index: 10;}
.artwork-line-item > a:after {font-family: 'jt-font';font-size: 4.6rem;color:#fff;font-weight:normal;content:'\e919';opacity:0;-webkit-transition: opacity 0.1s;transition: opacity 0.1s;z-index: 20;position: absolute;top: 50%;left: 50%;margin-top: -2.3rem;margin-left: -2.3rem;}
.artwork-line-item > a.artwork-line-link__video:after { width: 5.2rem; height: 5.2rem; border-radius: 5rem; content: '\e948'; font-size: 2.6rem; background: #fff; color: #000; text-align: center; line-height: 5.2rem;}
html.desktop .artwork-line-item > a:hover:before,
html.desktop .artwork-line-item > a:hover:after,
html.desktop .artwork-line-item > a:focus:before,
html.desktop .artwork-line-item > a:focus:after  {opacity:1;}
.artwork-line-item figure {padding-top: 56%;}
.artwork-line-item figure img {width:100%;}

.work-line-popup__inner {max-width: 101.4rem;margin:0 auto; }
.work-line-popup__content figure {padding-top:50%;}

.work-line-popup-wrap button.mfp-arrow { opacity: 1;width: 7.8rem; height: 7.8rem; line-height: 7.8rem; margin-top: -3.9rem; -webkit-transition: background 0.1s; transition: background 0.1s;}
.work-line-popup-wrap button.mfp-arrow:before { border: none; opacity: 1; font-family: 'jt-font'; font-size: 6.4rem; color: #aaa; font-weight: normal; margin: 0; width: 100%;height: 100%; -webkit-transition: color 0.1s;transition: color 0.1s;}
html.desktop .work-line-popup-wrap button.mfp-arrow:hover:before,
html.desktop .work-line-popup-wrap button.mfp-arrow:focus:before {color: #fff;}
.work-line-popup-wrap .mfp-arrow-left {margin-left: 2rem;}
.work-line-popup-wrap .mfp-arrow-right {margin-right: 2rem;}
.work-line-popup-wrap .mfp-arrow-left:after,
.work-line-popup-wrap .mfp-arrow-right:after {display: none;}
.work-line-popup-wrap .mfp-arrow-left:before {content: '\e907';}
.work-line-popup-wrap .mfp-arrow-right:before {content: '\e917';}
.work-line-popup-wrap .mfp-image-holder .mfp-close,
.work-line-popup-wrap .mfp-close {width:3.6rem;height:3.6rem;padding: 0;right: -7.5rem;top: 0;}
html.desktop .work-line-popup-wrap button.mfp-close:hover:after {-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .work-line-popup-wrap .mfp-image-holder .mfp-close {cursor:pointer;}
.work-line-popup-wrap button.mfp-close:after {font-size:3.6rem;line-height: normal;}
.work-line-popup-wrap .mfp-counter {display:none;}
.work-line-popup-wrap img.mfp-img {padding:0;}
html.desktop .work-line-popup-wrap .mfp-close:focus {outline: #000 solid 2px;}

/* topic */
.jt-single__artwork-topic-wrap {padding:12rem 0 10.8rem; background: #e0e0e0;}
.jt-single__artwork-topic-inner {max-width: 101.4rem;margin:0 auto; position: relative;}
.jt-single__artwork-topic-wrap h2 {font-size: 3rem; margin-bottom: 2.3rem;}
.jt-single__artwork-topic-wrap h2 span[lang="en"] { font-size: 3.2rem; }
.jt-single__artwork-topic__more {position: absolute; top: 0; right: 0;}
.jt-single__artwork-topic-list__item {padding: 4.1rem 0; border-bottom:0.1rem solid #bbb;}
.jt-single__artwork-topic-list__item:last-child {border-bottom: 0;}
.jt-single__artwork-topic-list__item.one-item {border-bottom:0.1rem solid #bbb;}
.jt-single__artwork-topic-list__content {display: grid;grid-template-columns: 1fr 2.55fr 1fr; align-items: center;}
.jt-single__artwork-topic__category{color:#000; font-weight:400; font-size:1.8rem;letter-spacing:-0.02rem; line-height: 1.55; transition: color .1s;}
.jt-single__artwork-topic-list__item p {font-size:1.8rem;font-weight:500;color:#000;letter-spacing:-0.025em; line-height: 1.66; text-overflow: ellipsis;white-space: nowrap;overflow: hidden; transition: color .1s;}
.jt-single__artwork-topic-list__item time {font-size:1.6rem; color:#848484; font-weight:400; line-height: 1.5; text-align: right; transition: color .1s;}
.jt-single__artwork-topic-list__item figure {display: inline-block;width: 20.4rem;}
html.desktop .jt-single__artwork-topic-list__item:hover p{color:#FF650F;}

.jt_single_artwork .single-pagination {margin-top:0; background: #d9d9d9;}



/* **************************************** *
 * RWD
 * **************************************** */
/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){
	.single-artwork .mfp-container {padding-left:20rem; padding-right:20rem;}
}



/* **************************************** *
* 1200px (작업 @768px 1rem = 10px )
* **************************************** */
@media (max-width: 1200px){
    .jt-single__artwork-info li.artwork-info__replay a::after {line-height: 3rem;}

}

/* **************************************** *
 * 860px (작업 @768px 1rem = 10px )
 * **************************************** */
@media (max-width: 860px){

    /* LIST */
    .jt_artwork_list_wrap .jt-pagination {margin-top: 4rem;}
    .jt-divide-list {grid-template-columns: repeat(3,1fr); grid-column-gap: 2rem; grid-row-gap: 4.5rem;}
    .jt-divide-list__thumb {margin-bottom:1.8rem;}
    .jt-divide-list__category {margin-right:0.5rem;}

    /* SINGLE */
    .jt-single__artwork-wrap {width: inherit; margin:0 0 8rem;}
    .jt_single_artwork {margin-top:0;}
    .jt-single__artwork-img {width:calc(100% - 8rem); max-width:100%; margin:8rem 4rem 3.6rem; display:block;}
    .jt-single__artwork-img img {width:100%;}
    .jt-single__artwork-info {width: inherit;padding-left:0;  margin:0 4rem; display:block;}
    .jt-single__artwork-info li b { width: 15%;}
    .jt-single__artwork-info li.artwork-info__replay a::after {line-height: 2.8rem;}

    .single-artwork .mfp-container {padding-left:10rem; padding-right:10rem;}
    .jt-single__artwork-line-wrap { padding: 8rem 0 8.5rem;}
    .jt-single__artwork-line-inner  {width: inherit; margin:0 4rem;}
    .jt-single__artwork-line-wrap h2 {margin-bottom:3rem;}
    .work-line-popup-wrap .mfp-image-holder .mfp-close,
    .work-line-popup-wrap .mfp-close {width:2.5rem;height:2.5rem;padding: 0;right: 0rem;top:-3.5rem;}
    .work-line-popup-wrap button.mfp-arrow {width: 6rem; height: 6rem; line-height: 6rem; margin-top: -3rem;}
    .work-line-popup-wrap button.mfp-close:after {font-size:2rem;}

    .jt-single__artwork-topic-wrap {padding: 8rem 0;}
    .jt-single__artwork-topic-inner {margin: 0 4rem;}
    .jt-single__artwork-topic-wrap h2 {margin-bottom: 1rem;}
    .jt-single__artwork-topic-list__item {padding: 2.1rem 0;}
    .jt-single__artwork-topic__category {font-size: 1.5rem;}
    .jt-single__artwork-topic-list__item p {font-size: 1.5rem;}
    .jt-single__artwork-topic-list__item time {font-size: 1.4rem;}
    .jt-single__artwork-topic__more {top: 0.5rem;}

    /* scroll down */
    .scroll_down {display:none;}

}
/* **************************************** *
 * 540px (작업 @375px 1rem = 10px )
 * **************************************** */
@media (max-width: 540px){

    /* LIST */
    .jt-divide-list {grid-template-columns: repeat(2,1fr); grid-column-gap: 4%; grid-row-gap: 0;}
    .jt-divide-list__thumb {margin-bottom:1.5rem;}
    .jt-divide-list__item {margin-bottom: 3.5rem}
    .jt-divide-list__category { padding: 0.3rem 0.8rem; font-size:1.1rem; }
    .jt-divide-list__title span {font-size:1.6rem; line-height:1.5;display: block; margin-top: 0.5rem}
    html.ios .jt-divide-list__category {padding-top:0.18rem; padding-bottom:0.18rem;}

    .jt_artwork_list_wrap .jt-pagination {margin-top: 2.6rem}

    /* SINGLE */
    .artwork-line-wrap { margin:-0.75rem;}
    .artwork-line-item {width: -webkit-calc(50% - 1.5rem);width: calc(50% - 1.5rem); margin:0.75rem;}
    .jt-single__artwork-wrap {margin-bottom:5rem;}
    .artwork-info__title { margin-top: 1rem; font-size: 2.2rem; }
    .jt-single__artwork-img {width:calc(100% - 5rem); margin:2.5rem 2.5rem 3rem;}
    .jt-single__artwork-info {margin:0 2.5rem;}
    .jt-single__artwork-info:first-child {margin-top:4.5rem;}
    .jt-single__artwork-info ul { margin-top: 2rem;}
    .jt-single__artwork-info li {margin-bottom:0.8rem; font-size:1.5rem;}
    .jt-single__artwork-info li b {width:23%;}
	.jt-single__artwork-info li.artwork-info__replay a::after {line-height: 2.6rem;}

    .jt-single__artwork-line-wrap {padding: 5rem 0;}
    .jt-single__artwork-line-inner {margin:0 2.5rem;}
    .jt-single__artwork-line-wrap h2 { margin-bottom: 2rem; font-size: 3rem; }

    .jt-single__artwork-topic-wrap {padding: 5rem 0 11.8rem;}
    .jt-single__artwork-topic-inner {margin: 0 2.5rem;}
    .jt-single__artwork-topic-wrap h2 {font-size: 2.2rem; margin-bottom: 0;}
    .jt-single__artwork-topic-wrap h2 span[lang="en"] {font-size: 2.4rem;}
    .jt-single__artwork-topic-list__content {grid-template-columns: auto;}
    .jt-single__artwork-topic-list__item {padding-top: 2.1rem; padding-bottom: 2rem;}
    .jt-single__artwork-topic__category { font-size: 1.3rem;margin-bottom: 0rem;}
    .jt-single__artwork-topic-list__item p {font-size: 1.5rem;margin: 0.5rem 0;}
    .jt-single__artwork-topic-list__item time {text-align: left; font-size: 1.4rem;}
    .jt-single__artwork-topic__more.jt-btn__renewal {position: absolute; left: 50%; transform: translateX(-50%); bottom: -5.6rem; top: auto;}

	.single-artwork .mfp-container {padding-left:5rem; padding-right:5rem;}
	.work-line-popup-wrap button.mfp-arrow:before { font-size: 4rem;}
	.work-line-popup-wrap .mfp-arrow-left { margin-left: 0rem; }
	.work-line-popup-wrap .mfp-arrow-right { margin-right: 0rem; }

    html.ios .artwork-info__category { padding-bottom: 0.3rem; }

}