@charset "utf-8";


/*
 * File       : main.css
 * Author     : STUDIO-JT (HREE)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) SECTION GLOBAL
 * 2) MAIN VISUAL
 * 3) STORY SECTION
 * 4) NOW SECTION
 * 5) ARTIST SECTION
 * 5) ARTWORK SECTION
 */



/* **************************************** *
 * SECTION GLOBAL
 * **************************************** */
.main-section {position: relative;}
.main-section .wrap {max-width: 128rem; overflow: hidden;}
.main-section__title {font-size: 5.4rem;line-height: 1.22;font-weight: 500;letter-spacing: -0.02em;color: #000;}

/* card list */
.card-list {margin: 0 -2rem;}
.card-list:after { content: ""; display: table; clear: both;}
.card-list__item {float: left;width: 25%;padding: 0 2rem;margin-bottom: 4rem; }
.card-list__item:nth-child(5){clear:both}
.card-list__item-figure {position: relative;padding-top: 100%;display: block;}
.card-list__item-figure-img { width: 100%; display: block; position: absolute; top: 0;height: 100%; object-fit: cover;}
.card-list__item-figcaption {position: absolute;top: 0;bottom:0;left: 0;text-align: left;z-index: 2;opacity: 0;-webkit-transition: opacity 0.1s;transition: opacity 0.1s;height: 100%;padding: 0 3rem;color: #fff; font-size: 1.6rem;display: grid;grid-auto-rows: max-content;}
.card-list__item-figure:before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #000;opacity: 0;z-index: 1;-webkit-transition: opacity 0.1s;transition: opacity 0.1s;}
html.desktop .card-list__item:hover .card-list__item-figure:before,
html.desktop .card-list__item:focus .card-list__item-figure:before { opacity: 0.6;}
html.desktop .card-list__item:hover .card-list__item-figcaption,
html.desktop .card-list__item:focus .card-list__item-figcaption { opacity: 1;}
.card-list__item-title {font-weight: 700;margin-bottom: 1.2rem;font-size: 1.8rem;letter-spacing: -0.025em;max-height: 3em;}
.card-list__item-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.5;}
.card-list__item-time {position: absolute;bottom: 3.8rem;left: 3rem;font-weight: 700;font-size: 1.4rem;color: #aaa;}
.card-list__item-cat {font-family: 'Poppins', 'Noto Sans KR', sans-serif;font-weight: 700;margin-bottom: 2rem;margin-top: 3.8rem;font-size: 1.5rem;}
.card-list__item-desc {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow:ellipsis;font-size: 1.5rem;letter-spacing: -0.025em;line-height: 1.6;max-height: 3.2em;}

.card-list__item--no-image {position: relative; padding-bottom: -webkit-calc(20% + 2.5rem); padding-bottom: calc(20% + 2.5rem);}
.card-list__item--no-image .card-list__item-inner {position: absolute;height: 100%;left: 2rem;right: 2rem;top: 0;-webkit-box-shadow: inset 0 0 0 0.1rem #ddd;box-shadow: inset 0 0 0 0.1rem #ddd;padding: 0 3rem;background: #fff; transition: box-shadow 0.1s; -webkit-transition: box-shadow 0.1s;}
.card-list__item--no-image .card-list__item-title{color: #000;}
.card-list__item--no-image .card-list__item-cat{color: #FF5B00;}
.card-list__item--no-image .card-list__item-desc{color: #666;}
html.desktop .card-list__item--no-image:hover .card-list__item-inner {box-shadow: inset 0 0 0 0.6rem #FF5B00;}
html.ipad .card-list__item--no-image .card-list__item-inner {-webkit-box-shadow: inset 0 0 0 0.2rem #ddd;box-shadow: inset 0 0 0 0.2rem #ddd;}
html.ie .card-list__item-figure {background-position: center center;}

.card-list__item--has-video .card-list__item-figure:after,
.now-slideshow__item-figure--has-video:after,
.card-list__item--no-image.card-list__item--has-video .card-list__item-inner:after {display: block;position: absolute;right: 2rem;bottom: 3.1rem;z-index: 10; font-family: 'jt-font';font-size: 2.5rem;color:#fff;content:'\e948';margin-left:0.1rem;text-align: center;display: block; text-shadow:0 0 3rem rgba(0,0,0,1);}



/* main slideshow */
.main-one-line__slide {margin-top: 5.5rem; margin-left: -2.1rem; margin-right: -2.1rem;}
.main-one-line__slide .main-slideshow__item {width: 25%; margin-bottom: 8rem; padding: 0 2.1rem;}

.main-two-line__slide { margin-top: 5.5rem; margin-left: -2.1rem; margin-right: -2.1rem; height: 100%; }
.main-two-line__slide .main-slideshow__item { width: 25%; padding: 0 2.1rem; margin-bottom: 8rem; }

.main-slideshow__images {display: block; width: 100%;}
.main-slideshow__images.jt-lazyload--loaded img { width: 100%; height: 100%; display: block; }
.main-slideshow__desc { padding: 2rem 0 0; }
.main-slideshow__cat {font-size: 1.4rem; line-height: 1.6; font-weight: 500; color: #848484;}
.main-slideshow__title {font-size: 2rem; line-height: 1.5; color: #000; letter-spacing: -0.01em; margin-top: 0.4rem; font-weight: 500; transition: color .1s;}
html.desktop .main-slideshow__item:hover .main-slideshow__title{color: #FF5B00;}

.main-slideshow__scrollbar {width: 100%; background: #C1BAB8;}
.swiper-scrollbar-drag {background-color: #000; border-radius: 0;}
.swiper-container-horizontal > .swiper-scrollbar {bottom: 0.1rem; height: 0.5rem; width: calc(100% - 4.2rem); left: 2.1rem; overflow: hidden; border-radius: 0;}

/* .main-slideshow__notinit{ justify-content: center;}
.main-slideshow__notinit .main-slideshow__item-images:before {width:calc(100% - 4rem);height:calc(100% - 0.1rem);background:#000000;background: rgba(0, 0, 0, .75);content:'';display:block;position: absolute;left: 2rem;right: 0;top: 0;bottom: 0;opacity:0;-webkit-transition: opacity 0.1s;transition: opacity 0.1s;z-index: 10;}
.main-slideshow__notinit .main-slideshow__item-images: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.1rem;margin-left: -2.1rem;}
html.desktop .main-slideshow__notinit .main-slideshow__item:hover .main-slideshow__item-images:before,
html.desktop .main-slideshow__notinit .main-slideshow__item:hover .main-slideshow__item-images:after {opacity:1;}
html.ie .main-slideshow__notinit .main-slideshow__item-images:before  {height:calc(100% - 0.4rem);} */



/* **************************************** *
 * MAIN VISUAL
 * **************************************** */
.main-visual { padding: 0 0 13rem 0; background: #E0E0E0;}
.main-visual__top { display: flex; justify-content: space-between; align-items: center; margin-top: 5.5rem; }
.main-visual__content { width: calc(100% - 73.2rem); padding-right: 10rem;}
.main-visual__cat {font-size: 1.4rem; font-weight: 500; color: #848484; line-height: 1.5; text-transform: uppercase;}
.main-visual__content .main-visual__cat {text-transform: inherit; font-size: 1.6rem; overflow: hidden; display: block;}
html.desktop .main-visual__cat,
html.desktop .main-visual__title,
html.desktop .main-visual__desc {color: #e0e0e0}
html.desktop .main-visual__cat.start {color: #848484}
html.desktop .main-visual__title.start,
html.desktop .main-visual__desc.start {color: #000}
html.desktop .main-visual__content .main-visual__cat span{display: block; opacity: 0;}
.main-visual__title {display: block; margin-top: 2.4rem; margin-bottom: 1.6rem; margin-left: -0.3rem; font-size: 5rem; letter-spacing: -0.01em; line-height: 1.29; font-weight: 500; overflow:hidden;}
html.desktop .main-visual__title span {display: block; opacity: 0;}
.main-visual__desc {font-size: 1.7rem; line-height: 1.66; letter-spacing: -0.04em; font-weight: 400; margin-bottom: 4.8rem; overflow: hidden;}
html.desktop .main-visual__desc span {display: block; opacity: 0;}
.main-visual__desc .line-wrapper {overflow: hidden;}
.main-visual__btn {overflow: hidden;}
html.safari .main-visual__btn {padding-bottom: 0.1rem;}
html.desktop .main-visual__btn .jt-btn__renewal {border: 0.1rem solid #e0e0e0; color: #e0e0e0}
html.desktop .main-visual__btn.start .jt-btn__renewal {border: 0.1rem solid #000; color: #000;}
html.desktop .main-visual__btn.start .jt-btn__renewal:hover {border: 0.1rem solid #FF5B00; color: #fff;}
.main-slideshow__title {margin-left: -0.1rem}
.main-visual__images {width: 46.8rem; height: 68rem;}
.main-visual__images img {width:100%; display: block; cursor: none;}
.main-visual .main-slideshow__images { padding-top: 145.11%; cursor: none }



/* **************************************** *
 * STORY SECTION
 * **************************************** */
.main-story {background: #d9d9d9; padding: 13rem 0 11rem;}
.main-story-archive {margin: 5.6rem 0 13rem;}
.main-story-archive__title { display: flex; justify-content: space-between;}
.main-story-archive__sub { font-size:3.2rem; line-height: 1.43; letter-spacing: -0.06em;}
.main-story-archive__list {margin-top: 4.1rem; display: grid; grid-template-columns: repeat(4,1fr); grid-column-gap: 4.2rem;}
.main-story-archive__images {padding-top: 100%;}
.main-story-archive__images img {width:100%; display: block; }
.main-story-archive__desc {width:100%; color: #000; margin-top: 2.4rem; font-weight: 500; font-size:2rem; line-height:1.6; letter-spacing: -0.02em; transition: color .1s; padding-right: 1rem;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
html.desktop .main-story-archive__item:hover .main-story-archive__desc {color: #FF5B00;}

.main-story-announce__title {display: flex; justify-content: space-between;}
.main-story-announce__sub { font-size:3.2rem; line-height: 1.43; letter-spacing: -0.06em;}
.main-story-announce__list {margin-top: 4.1rem;}
.main-story-announce__list li {border-bottom: 0.1rem solid #bbb;}
.main-story-announce__list li:last-child {border-bottom: none;}
.main-story-announce__item {padding: 4.2rem 0 4.1rem; display: grid; grid-template-columns: 1fr 3.85fr 1fr; color: #000; transition: color .1s; align-items: center;}
.main-story-announce__cat {font-size: 1.8rem; line-height: 1.5; letter-spacing: -0.02em; font-weight: 400;}
.main-story-announce__desc {font-size: 1.8rem; line-height: 1.6; letter-spacing: -0.01em; font-weight: 500; transition: color .1s; overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.main-story-announce__date {font-size: 1.6rem; line-height: 1.5; color: #848484; letter-spacing: -0.02em; text-align: right; }
html.desktop .main-story-announce__item:hover .main-story-announce__desc {color: #FF5B00;}



/* **************************************** *
 * NOW SECTION
 * **************************************** */
.main-now {background: #FF5B00; padding: 13rem 0 8rem;}
.main-now .main-section__title {color: #fff;}
.main-now-slideshow__item {float: left;width: 33.13%;padding: 0;}
.main-now-slideshow__item-figure {padding-top: 31.28%;position: relative;background: #f8f8f8; }
.main-now-slideshow__item-figure-link.custom-hover { cursor:none }
.main-now-slideshow__item-figure .main-now-slideshow__item-figure-link > img {display: block;width: 100%; height: 100%; object-fit: cover; position: absolute;top: 0;left: 0;}
.main-now-slideshow__item-inner { display: table; width: 100%;table-layout: fixed; height: 43rem;}
.main-now-slideshow__item-figure,
.main-now-slideshow__item-content { display: table-cell; width: 50%; vertical-align: middle;}
.main-now-slideshow__item-content  {padding: 2rem 9rem;background: #f6f6f6; }
.main-now-slideshow__item-cat {background: #FF5B00; display: inline-block; padding: 0.3rem 1rem; border-radius: 10rem; color: #fff;letter-spacing: 0.01em;font-size: 1.2rem;line-height: 1.66;}
.main-now-slideshow__item-cat.slideshow__item-cat--movie {background: #013472;}
.main-now-slideshow__item-cat.slideshow__item-cat--drama {background: #FF5B00;}
.main-now-slideshow__item-cat.slideshow__item-cat--etc {background: #848484;}

.main-now-slideshow__item-title {font-size: 2.8rem; font-weight: 500; color: #000; line-height: 1.46; margin: 0.8rem 0 2rem;}
.main-now-slideshow__item-desc { font-size: 1.6rem}
.main-now-slideshow__item-desc-list { display: table; width: 100%; table-layout: fixed;}
.main-now-slideshow__item-desc-list-item { display: block; padding-bottom: 1rem;}
.main-now-slideshow__item-desc-list-item:last-child { padding-bottom: 0rem;}
.main-now-slideshow__item-desc-list-item-title,
.main-now-slideshow__item-desc-list-item-text { display: table-cell;}
.main-now-slideshow__item-desc-list-item-title {width: 5.5rem;color: #000; padding-left: 0.2rem; font-weight: 500;line-height: 1.8em;}
.main-now-slideshow__item-desc-list-item-text {color: #666;letter-spacing: -0.02em;line-height: 1.8em;}
.main-now-slideshow .slick_control {margin-top: -5rem;}
.main-now-slideshow .slick_slider_wrap { margin-top: 5.6rem;}
.main-now-slideshow .slick_state_play:after { border-left: 0.8rem solid #fff;}
.main-now-slideshow .slick_state_pause:before ,
.main-now-slideshow .slick_state_pause:after {background: #fff}

.main-now-slideshow__item-desc-list-item-link {color: #666; position: relative; margin-right: 1.8rem; padding-right: 1.5rem; letter-spacing: 0; display: inline-block; transition: color .1s;}
.main-now-slideshow__item-desc-list-item-link::after {content: '\e913'; color: #000; font-family: 'jt-font'; position: absolute; right: 0;top:0rem; width: 1rem; font-size: 1rem;}
html.desktop .main-now-slideshow__item-desc-list-item-link:hover {color: #FF5B00;}
html.desktop .main-now-slideshow__item-desc-list-item-link:hover::after {color: #FF5B00;}

.now-slideshow__item-figure--has-video:after{right: 3rem; bottom: 3rem; display:none;}



/* **************************************** *
 * ARTIST SECTION
 * **************************************** */
.main-artist {background: #d9d9d9; padding: 13rem 0;}
.main-artist .main-slideshow__images {padding-top: 130%; cursor: none}



/* **************************************** *
 * ARTWORK SECTION
 * **************************************** */
.main-artwork {background: #E0E0E0; padding: 13rem 0;}
.main-artwork .main-slideshow__images {padding-top: 143.5%; cursor: none}