@charset "utf-8";

/*
 * File       : main.css
 * Author     : STUDIO-JT (HREE)
 * Guideline  : JTstyle.2.0
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) HEADER
 * 2) MAIN
 * 3) VIDEO
 * 4) MODAL
 * 5) FOOTER
 */

 /* **************************************** *
 * HEADER
 * **************************************** */
#header {width: 100%; position: fixed; top: 0; left: 0;z-index: 500;}
.header__inner {position: relative; display: flex; justify-content: space-between;}
.jtin-logo { position: fixed; top: 36rem; left: 49rem; text-decoration: none; }
.jtin-logo img {width: 126rem;}
.jtin-logo .jtin-appname { display: none; font-size: 18rem;color: #000;text-decoration: none;font-weight: 700;}
.jtin-shop {padding: 41rem 51rem;}
.jtin-shop a{color: rgba(255,255,255,0.7); display: inline-block; position: relative; padding-right: 20rem; -webkit-transition: 0.2s;transition: 0.2s;}
.jtin-shop a:hover {color: #fff; padding-right: 21rem;}
.jtin-shop a::after {position: absolute; content: ''; top:3rem; right: 0rem; background: no-repeat center url(../images/main/icon-link70.svg); width: 12rem; height: 12rem; background-size: 12rem; -webkit-transform: translate(0rem,0rem);-ms-transform: translate(0rem,0rem);transform: translate(0rem,0rem);-webkit-transform-origin:  right top;-ms-transform-origin:  right top;transform-origin:  right top;-webkit-transition: transform 0.2s; transition: transform 0.2s;}
.jtin-shop a:hover:after {background: no-repeat center url(../images/main/icon-link100.svg); width: 12rem; height: 12rem; background-size: 12rem; -webkit-transform: translate(2rem,-2rem); -ms-transform: translate(2rem,-2rem); transform: translate(2rem,-2rem);}



 /* **************************************** *
 * MAIN
 * **************************************** */
.jt-main-content-container {padding: 0 208rem;}
.jt-main-content {position: absolute; top: 50%; transform: translateY(-50%);}
.jt-main-content .jt-main-content__title h1{color: #fff; font-size: 72rem; line-height: 88rem; font-weight: 600; margin-top: -20rem;}
.jt-main-content__start a {display: inline-block; margin: 35rem 0 65rem 0; padding: 19rem 0; width: 200rem; height: 55rem; background: #fff; color: #000; font-size: 15rem; font-weight: 600; border-radius: 100rem; text-align: center; transition: background .3s;}
.jt-main-content__start a:hover {background: #eee;}
.jt-main-content__inquiry p {color: #fff; font-size: 18rem;}
.jt-main-content__inquiry p a {color: rgba(255,255,255,0.7); margin-left: 6rem; font-weight: 600;}
.jt-main-content__inquiry p a:hover {color: #fff;}

.jt-btn__line {display: inline-block;position: relative;}
.jt-btn__line span {display: block; padding-bottom: 2rem;}
.jt-btn__line span:before, .jt-btn__line span:after {content: '';display: block;height: 1rem;position: absolute;bottom: 0;z-index: 1;background: rgba(255,255,255,0.7);}
.jt-btn__line span:before {width: 100%;right: 0;-webkit-transition: none;transition: none; -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; }
.jt-btn__line span:after {width: 0;left: 0;-webkit-transition: width .5s cubic-bezier(.215, .61, .355, 1);transition: width .5s cubic-bezier(.215, .61, .355, 1);-webkit-transform-origin: right;-ms-transform-origin: right;transform-origin: right; }
.jt-btn__line:hover span:before {width: 0;-webkit-transition: width .5s cubic-bezier(.215, .61, .355, 1);transition: width .5s cubic-bezier(.215, .61, .355, 1);}
.jt-btn__line:hover span:after {width: 100%;-webkit-transition-delay: .3s;transition-delay: .3s;}



 /* **************************************** *
 * VIDEO
 * **************************************** */
.jt-fullvid-container-wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.jt-fullvid-container {width: 100%;height: 100%; position: relative; overflow: hidden;}
.jt-fullvid-container:after {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
.jt-fullvid__poster {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.jt-fullvid__poster-bg {display: block; position: relative; width: 100%; height: 100% ;background: no-repeat center center; background-size: cover; z-index: -1;}
.jt-fullvid-overlay {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.2));}



 /* **************************************** *
 * MODAL
 * **************************************** */
.jt-modal {position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden;}
.jt-modal__overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5;}
.jt-modal__content {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; min-width: 560rem;}
.jt-modal__close {position: absolute; top: 28rem; right: 28rem; cursor: pointer;}
.jt-modal__close span {font-size: 0;}
.jt-modal__close span::after {position: absolute;content: ''; background: no-repeat center center url(../images/main/modal-close.svg); background-size: 20rem; width: 20rem; height: 20rem; top: 0; right: 0; transform-origin: center; -webkit-transition: 1s -webkit-transform cubic-bezier(.075,.82,.165,1);transition: 1s -webkit-transform cubic-bezier(.075,.82,.165,1);transition: 1s transform cubic-bezier(.075,.82,.165,1);transition: 1s transform cubic-bezier(.075,.82,.165,1), 1s -webkit-transform cubic-bezier(.075,.82,.165,1);}
.jt-modal__close:hover span:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg);transform: rotate(180deg);}
.jt-modal__inner { padding: 70rem 60rem;}
.jt-modal__inner h1 {font-size: 24rem; font-weight: 700; line-height: 36rem;}
.jt-modal__inner p {font-size: 14rem; color: #666; line-height: 26rem; margin: 10rem 0;}
.jt-modal__inner input {background: #f6f6f6; border-radius: 50rem; height: 60rem; width: 100%; border: none; margin-top: 20rem; padding: 0 35rem; font-size: 16rem; font-weight: 600;}
.jt-modal__inner input::placeholder {font-weight: 500;}
.jt-modal__inner .jtin-valid-tip {color: #f52f23; font-size: 13rem; position: absolute; bottom: 108rem; left: 95rem; display: none}
.jt-modal__sand {width: 100%; display: block; background: var(--color-primary); border: 1rem solid var(--color-primary); max-height: 70rem; padding: 25rem; color: #fff; text-align: center;bottom: 0rem; position: relative; transition: background .3s; font-weight: 600;}
.jt-modal__sand:hover {background: var(--color-secondary); border: 1rem solid var(--color-secondary);}



 /* **************************************** *
 * FOOTER
 * **************************************** */
 #footer {width: 100%;}
 #footer p {color: rgba(255,255,255,0.7); position: absolute; bottom: 41rem; left: 53rem; font-size: 14rem;}