@charset "utf-8";

/*
 * File       : sub-portfolio.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 01) LAYOUT
 * 02) PROLOGUE
 * 03) PROTOCOL
 * 04) BACKERS
 */



/* **************************************** *
 * LAYOUT
 * **************************************** */
/* CLEAR */
body.page-template-portfolio .main-container {padding-top: 0;}

/* PAGE */
body.page-template-portfolio .article-title span {display: inline-block;position: relative;padding-right: 134rem;font-size: 102rem;}
body.page-template-portfolio .article-title span:after {display: block;width: 70rem;height: 70rem;position: absolute;right: 45rem;top: 50%;margin-top: -35rem;font-family: 'jt-font';content: '\e90f';font-size: 70rem;line-height: 1;font-weight: normal;font-style: normal;color: #fff;}

.portfolio-constellation {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 2;}
.portfolio-constellation #particles-js {width: 100%;height: 100%;}

/* GLOBAL */
.portfolio-section {padding-top: 250rem;}
.portfolio-section__title {margin-bottom: 100rem;text-align: center;}
.portfolio-section__title span {display: block;margin-bottom: 27rem;font-size: 26rem;font-weight: 700;line-height: 1.45;letter-spacing: 0.03em;color: #fff;}
.portfolio-section__title h2 {font-size: 80rem;font-weight: 700;line-height: 1.25;color: #fff;}
.portfolio-section__title p {margin-top: 26rem;font-size: 20rem;font-weight: 300;line-height: 1.6;color: #fff;}



/* **************************************** *
 * PROLOGUE
 * **************************************** */
.portfolio-prologue {padding-top: 80rem;}
.portfolio-prologue p {margin-bottom: 220rem;font-size: 42rem;font-weight: 500;line-height: 1.66;color: #fff;}



/* **************************************** *
 * PROTOCOL
 * **************************************** */
.portfolio-protocol__list {margin-bottom: 480rem;}
.portfolio-protocol__item {position: relative;z-index: 1;}
.portfolio-protocol__name {width: 48.7%;position: relative;text-align: right;z-index: 1;}
.portfolio-protocol__name:after {content: '';width: 10rem;height: 10rem;position: absolute;right: -96rem;top: 50%;margin-top: -8rem;background: #fff;border-radius: 50%;opacity: 0;-webkit-transition: opacity .4s cubic-bezier(0.22, 0.61, 0.36, 1);transition: opacity .4s cubic-bezier(0.22, 0.61, 0.36, 1);}
.portfolio-protocol__name b {display: inline-block;padding: 45rem 0 30rem;position: relative;font-size: 100rem;font-weight: 500;line-height: 1.25;color: #fff;opacity: 0.3;cursor: pointer;-webkit-transition: opacity .4s cubic-bezier(0.22, 0.61, 0.36, 1);transition: opacity .4s cubic-bezier(0.22, 0.61, 0.36, 1);}
.portfolio-protocol__data {width: 51.3%;padding-left: 174rem;position: absolute;right: 0;top: 70rem;opacity: 0;-webkit-transition: opacity .4s cubic-bezier(0.22, 0.61, 0.36, 1);transition: opacity .4s cubic-bezier(0.22, 0.61, 0.36, 1);z-index: 2;}
.portfolio-protocol__data figure {display: block;width: 264rem;margin-left: 2rem;}
.portfolio-protocol__data figure img {display: block;width: 100%;height: auto;}
.portfolio-protocol__data b {display: block;margin-top: 40rem;font-size: 24rem;font-weight: 700;line-height: 1.33;letter-spacing: 0.05em;color: #fff;}
.portfolio-protocol__data p {margin-top: 31rem;font-size: 20rem;font-weight: 500;line-height: 1.6;color: #fff;}
.portfolio-protocol__data .jt-btn--underline {margin-top: 34rem;}
html.desktop .portfolio-protocol__name b:hover {opacity: 1;}

.portfolio-protocol__item.portfolio-protocol__item--active {z-index: 2;}
.portfolio-protocol__item.portfolio-protocol__item--active .portfolio-protocol__name:after {opacity: 1;}
.portfolio-protocol__item.portfolio-protocol__item--active .portfolio-protocol__name b {-webkit-text-stroke: 1px;-webkit-text-stroke-color: #ffffff;-webkit-text-fill-color: transparent;opacity: 1;}
.portfolio-protocol__item.portfolio-protocol__item--active .portfolio-protocol__data {opacity: 1;}



/* **************************************** *
 * BACKERS
 * **************************************** */
.portfolio-backers__partners-list {margin: -34rem 0;font-size: 0;text-align: center;}
.portfolio-backers__partners-list > li {display: inline-block;vertical-align: top;width: 33.33%;padding: 34rem 0;opacity: 0;}
.portfolio-backers__logo {width: 430rem;margin: 0 auto;}
.portfolio-backers__logo .jt-lazyload {padding-top: 39.53%;}