@charset "utf-8";

/*
 * File       : modules/data/style.css
 * Author     : STUDIO-JT (SUMI,HREE)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) JT ARCHIVE LIST
 * 2) JT ARCHIVE SINGLE
 * 3) RWD
 */


/* **************************************** *
 * JT ARCHIVE LIST
 * **************************************** */
.jt-data-list {position:relative; display: grid; grid-template-columns: repeat(4,1fr); grid-column-gap: 4.2rem; grid-row-gap: 6rem;}
.jt-data-list__link {display: block;position: relative;}
.jt-data-list__new {padding:0.4rem 1.5rem; background:#FF650F; color:#fff; font-size:1.3rem; letter-spacing:0.1em; position:absolute; left:0; top:0;z-index:10;}
.jt-data-list__video {display: block;position: absolute;color:#fff;right: 1.1rem;top: 1.8rem;z-index: 10;}
.jt-data-list__video:before {font-family: 'jt-font';font-size: 2.5rem;color:#fff;content:'\e948';width: 100%;height: 100%;margin-left:0.1rem;text-align: center;display: block;}
.jt-data-list__thumb {display: block;position: relative;}
.jt-data-list__thumb.jt-lazyload {padding-top: 100%;}
.jt_data_list_wrap .jt-data-list__thumb img {display: block;max-width: 100%; width:100%;}

.jt-data-list__link { max-width: 28.8rem; margin: 0 auto; }
.jt-data-list__content {margin-top:1.8rem;}
.jt-data-list__title {font-size: 1.6rem;font-weight: 500;line-height: 1.75;letter-spacing: -0.025em;color: #000;position: relative;  overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; transition: color .1s;}
html.desktop .jt-data-list__link:hover .jt-data-list__title {color: #FF650F;}
.jt-data-list__title span br {display: none;}
.jt-data-list__desc {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;max-height: 3.7em;margin-top: 1.3rem;font-size: 1.6rem;font-weight: 400;line-height: 1.85;color: #444;text-overflow: ellipsis;overflow: hidden;}



/* **************************************** *
 * JT ARCHIVE SINGLE
 * **************************************** */
.single-data .jt-single__title { text-align:left; line-height:1.4;}
.single-data .jt-single__header { padding-bottom:4rem;}
.single-data .jt-single__header-inner {border-bottom:0.1rem solid #bbb;position:relative;padding-bottom: 3.5rem;}
.single-data .jt-single__meta {text-align:left;margin-bottom:2rem;padding-top: 2.2rem;}
.single-data .jt-single__meta time {font-size: 1.4rem; font-weight: 400; color: #848484; margin-top: 1.8rem; line-height: 1.53;}
.single-data .jt-single__category {font-size:1.5rem;letter-spacing:0.01rem;padding:0;position:relative;padding-right: 0.8rem;}
.single-data .jt-single__category:after {width:0.1rem;height:0.7rem;background:#ddd;content:'';display:block;position:absolute;top:50%;right: 0;margin-top: -0.35rem;}
.single-data .jt-single__category--notice {color:#FF650F}
.single-data .jt-single__category--news {color:#013472}
.single-data .jt-single-share {top: 3.1rem;right: 0rem; height:3.7rem;}
.single-data .jt-single-share__button {display:block;}
.single-data .jt-single-share__button:before {display: block;line-height: normal;}
.single-data .jt-share {right: -1.8rem;left:auto;top: 0;}
.single-data .jt-share .jt-share__item:after {color:#bbb;}
.single-data .jt-share .jt-share__item:hover:after {color:#000;}
.single-data .wp-block-image:first-child img {margin-top:1rem;}
.single-data .narrow-wrap {position:relative;width: 100%;height: 100%;}

.jt-single-sticky {opacity:0; visibility:hidden; position:fixed;width:100%;height:6.7rem; line-height:6.7rem; top: -0.1rem;background: #fff; background:rgba(224,224,224,0.95); border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);z-index: 10; transform: matrix(1, 0, 0, 1, 0, 75); -webkit-transition: opacity .4s, visibility .4s, top .4s; transition: opacity .4s, visibility .4s, top .4s;}
.jt-single-sticky .narrow-wrap {display:block;}
.jt-single-sticky.jt-single-sticky--show { opacity:1; visibility:visible}
.jt-single-sticky__title {width:80%; font-size:1.5rem; color:#000; font-weight:500; letter-spacing:-0.025em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.jt-single-sticky .progress-bar {width:0%; height:0.3rem; background:#FF650F; position:absolute; bottom:-0.2rem; content:''; display:block;}
.jt-single-sticky .jt-single-share {position:absolute;right: -1.4rem;top:1.5rem; }
.jt-single-sticky .jt-single-share__button {width:4rem; height:4rem;}
.jt-single-sticky .jt-single-share__button:before {color:#848484;}
.jt-single-sticky .jt-share .jt-share__item:after {color:#bbb;}
.jt-single-sticky .jt-share {right:-1rem; top:-1.6rem;left:auto;}

.admin-bar .jt-single-sticky{ transform:matrix(1, 0, 0, 1, 0, 32) !important; }
.admin-bar .jt-single-sticky.jt-single-sticky--has-header{ transform:matrix(1, 0, 0, 1, 0, 107) !important; }
.admin-bar .single-data .article_visual_bg_container  {top:13.9rem;}
.admin-bar .single-data.minimize .article_visual_bg_container {top:10.7rem;}



/* **************************************** *
 * RWD
 * **************************************** */
/* **************************************** *
 * 2000px
 * **************************************** */

 @media(min-width:2000px){

    /* SINGLE */
    .jt-btn__icon.jt-btn--icon-zoom {padding: 1.2rem 3.3rem 1.1rem 2.5rem;}
    .jt-btn__icon.jt-btn--icon-zoom span:after {margin-top: -1rem}

}

/* **************************************** *
 * 1480px
 * **************************************** */

@media(max-width:1480px){

    /* SINGLE */
    .single-data .narrow-wrap {width:100%; max-width:75rem; margin:0 auto;}

}

/* **************************************** *
 * 860px (작업 @768px 1rem = 10px )
 * **************************************** */

@media (max-width: 860px){

    /* LIST */
    .jt-data-list {grid-template-columns: repeat(3,1fr); grid-column-gap: 2rem; grid-row-gap: 3.5rem;}
    .jt_data_list_wrap .jt-pagination {margin-top: 5rem;}

    /* SINGLE */
    .single-data .narrow-wrap { width: auto; max-width: inherit; margin-left: 4rem; margin-right: 4rem;}
    .jt-single-sticky__title {width:93%;}
    .single-data .jt-single__content {margin-left: 4rem; margin-right: 4rem;}
    .single-data .article_visual_bg_container {height:35.3rem;}
    .single-data .jt-single__title {font-size:3rem;}
    .jt-single-sticky > .narrow-wrap {width:-webkit-calc(100% - 8rem);width:calc(100% - 8rem)}
    .single-data .jt-single-sticky .jt-single-share {left:inherit; right:0; top:1.3rem; right:-1.3rem;}

    .jt-single__body .single-pagination:before {display: none;}
    .jt-single__body .single-pagination__inner {border-top: 0.1rem solid #bbb;}
    .jt-single__body .single-pagination__list {background: #d9d9d9; border-left: 0.1rem solid #bbb; border-right: 0.1rem solid #bbb;}

}

/* **************************************** *
 * 540px (작업 @375px 1rem = 10px )
 * **************************************** */

@media (max-width: 540px){

    /* LIST */
    .jt-data-list {grid-template-columns: repeat(2,1fr); grid-column-gap: 4%;grid-row-gap: 0;}
    .jt-data-list__title {font-size: 1.5rem; line-height: 1.55;}
    .jt-data-list__content {margin-top: 1rem;}
    .jt-data-list__item {margin-bottom: 3.5rem}
    .jt_data_list_wrap .jt-pagination {margin-top: 2.6rem;}

    .jt_data_list_wrap .jt-pagination .jt-pagination__numbers.jt-pagination--first:before,
    .jt_data_list_wrap .jt-pagination .jt-pagination__numbers.jt-pagination--prev:before,
    .jt_data_list_wrap .jt-pagination .jt-pagination__numbers.jt-pagination--next:before,
    .jt_data_list_wrap .jt-pagination .jt-pagination__numbers.jt-pagination--last:before {font-size: 2rem;}

    /* SINGLE */
    .single-data .narrow-wrap { margin-left: 2.5rem; margin-right: 2.5rem;}
    .jt_single_data .jt-single__header {padding-bottom:3rem;}
    .jt_single_data .jt-single__header-inner {padding-bottom:3rem;}
    .jt_single_data .jt-single__meta { margin-bottom: 1.5rem; padding-top: 1rem;}
    .single-data .jt-single__meta time { margin-top: 0; padding: 0}
    .jt_single_data .jt-single-share { top: 0.3rem; right: -2.6rem;}
    .jt_single_data .jt-single__title {font-size:2.2rem;}
    .single-data .jt-single__content {margin-left:0; margin-right:0; margin-top:0;}
    .single-data .jt-single__body .scroll-line-motion {display:none;}

    .jt-single-sticky {height:5.5rem; line-height:5.5rem; transform: matrix(1, 0, 0, 1, 0, 50);}
    .jt-single-sticky > .narrow-wrap {width: -webkit-calc(100% - 5rem);width: calc(100% - 5rem);}
    .single-data .jt-single-sticky .jt-single-share {top:1rem; right:-4rem;}
    .jt-data-list__video {bottom:1rem; right:0.7rem;}

}
