@charset "utf-8";

/*
 * File       : main.css
 * Author     : STUDIO-JT (JSH)
 * Guideline  : JTstyle.2.0
 *
 * SUMMARY:
 * 1) LAYOUT
 * 2) MAIN VISUAL
 * 3) BUSINESS 
 * 4) BANNER 
 * 5) PORTFOLIO 
 * 6) PARTNER 
 * 7) NEWS 
 * 8) MEDIA 
 * 9) FAQ 
 * 10) SUPPORT 
 * 11) KEYFRAMES 
 */


 
 /* **************************************** *
 * LAYOUT
 * **************************************** */
body.home .main-container { margin-top: 0; background: #fff; padding:0; }
.main-section { padding: 160rem 0; }
.main-section__title { text-align: center; margin-bottom: 80rem; }
.main-section__more { text-align: center; margin-top: 80rem; }



/* **************************************** *
 * MAIN VISUAL
 * **************************************** */
.main-visual { width: 100%; margin-top: 117rem; }
.main-visual__slider { width: 1500rem; overflow: visible; }
.main-visual__item { max-width: 1500rem; border-radius: 20rem; overflow: hidden; }
.main-visual__bg { position: relative; overflow: hidden; }
.main-visual__bg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0)); z-index: 1; }
.main-visual__bg.main-visual__bg--media::after { background: rgba(0,0,0,0.5); }
.main-visual__picture { padding-top: 45.3%; position: relative; width: 100%; height: 100%; background: no-repeat center center; background-size: cover; }
.main-visual__bg .jt-fullvid-container { padding-top: 45.3%; width: 100%; height: auto; }
.main-visual__content { position: absolute; top: 50%; left: 120rem; transform: translateY(-50%); z-index: 2; }
.main-visual__content-title { color: #fff; margin-bottom: 10rem; display: block; overflow: hidden; }
.main-visual__content-title span { opacity: 0; display: inline-block; }
.main-visual__content-desc { color: #fff; overflow: hidden; }
.main-visual__content-desc span { opacity: 0; display: inline-block; }
.main-visual__content-btn-wrap { margin-top: 36rem; }
.main-visual__content-btn { opacity: 0; display: inline-block; padding: 14rem 32rem; color: #fff; box-shadow: inset 0 0 0 2px #fff; border-radius: 50rem; transition: background .3s, color .3s, box-shadow .2s; }
.main-visual__content-btn span { font-size: 16rem; line-height: 1.6; font-weight: 700; letter-spacing: -0.02em; vertical-align: middle; }
.main-visual__content-btn .jt-guide--icon { margin-right: 8rem; vertical-align: middle; transform: translateY(-1rem) }
.main-visual__content-btn .jt-guide--icon svg path { fill: #fff; transition: fill .3s; }
html.desktop .main-visual__content-btn:hover { background: #fff; color: var(--color-base); box-shadow: none; }
html.desktop .main-visual__content-btn:hover .jt-guide--icon svg path { fill: var(--color-base); }

.main-visual__item:not(.swiper-slide-active) { pointer-events: none; }
html.desktop .main-visual__slider:hover .swiper-navigation .swiper-button { opacity: 1; }
.main-visual__slider .swiper-navigation .swiper-button { opacity: 0; width: 40rem; height: 40rem; border-radius: 50%; background: rgba(255,255,255,0.7); transition: transform .3s, background .3s, opacity .3s; transform-origin: center; }
.main-visual__slider .swiper-navigation .swiper-button .jt-guide--icon { width: 16rem; height: 16rem; }
.main-visual__slider .swiper-navigation .swiper-button .jt-guide--icon path { stroke: var(--color-base); }
html.desktop .main-visual__slider .swiper-navigation .swiper-button:hover { transform: scale(1.3); background: rgba(255,255,255,1); }
.main-visual__slider .swiper-navigation .swiper-button-prev { left: 32rem; }
.main-visual__slider .swiper-navigation .swiper-button-next { right: 32rem; }
.main-visual__slider .swiper-control { width: auto; left: auto; right: 20rem; bottom: 17rem; }
.main-visual__slider .swiper-control .swiper-pagination { position: relative; }
.main-visual__slider .swiper-control .swiper-pagination::before { position: absolute; content: ''; width: 3rem; height: 3rem; background: rgba(255,255,255,0.5); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.main-visual__slider .swiper-state { margin-left: 32rem; }
.main-visual--uninit .main-visual__item { pointer-events: inherit; }
.main-visual--uninit .swiper-control { opacity: 0; }

/* .main-visual__slider { width: 100%; height: calc(var(--vh, 1vh) * 100); margin:0 auto; }
html.ios .main-visual__slider { height: 100vh; min-height: 100svh; max-height: -webkit-fill-available; }

.main-visual__bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }
.main-visual__bg:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, .2); z-index: 1; }
.main-visual__picture { position: relative; width: 100%; height: 100%; background: no-repeat center center; background-size: cover; }

.main-visual__content { width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.main-visual__title { display: block; margin-left: -8rem; color: #fff; }
.main-visual__desc { margin-top: 20rem; color: #fff; } */

/* SCROLL DOWN */
/* .main-visual__scroll { position: absolute; width: 38rem; bottom: 64rem; left:50%; margin-left: -19rem; z-index: 1; color:#fff; font-weight: 700; text-align: center; }
.main-visual__scroll .jt-guide--icon { display: block; width: 12rem; height: 8rem; margin:0 auto; }
.main-visual__scroll .jt-guide--icon:nth-child(1) { opacity: 1; animation: twinkle 1.5s infinite; }
.main-visual__scroll .jt-guide--icon:nth-child(2) { opacity: 1; animation: twinkle 1.5s .15s infinite; }
.main-visual__scroll svg { vertical-align: top; width: 12rem; }
.main-visual__scroll svg path { stroke: #fff; }
.main-visual__scroll span { display: block; margin-top: 4rem; font-size: 13rem; line-height: 24rem; } */

/* CONTROLLER */
/* .main-visual .swiper-navigation,
.main-visual .swiper-control { opacity: 0; bottom: 57rem; padding:0 40rem; text-align: left; }
.main-visual .swiper-button { opacity: 0; transition: opacity .3s; }
.main-visual .swiper-state { margin-left: 4rem; }

.main-visual .swiper-button__wrap { position: absolute; top:0; height: 100%; width: 200rem; z-index: 1; }
.main-visual .swiper-button__wrap-prev { left:0; }
.main-visual .swiper-button__wrap-next { right:0; }
html.desktop .main-visual .swiper-button__wrap:hover .swiper-button { opacity: 1; }
html.desktop .main-visual .swiper-button__wrap .swiper-button:hover .jt-guide--icon path { stroke: #fff; }

.main-visual .swiper-pagination.swiper-pagination-fraction { bottom: auto; margin-left: 27rem; margin-right: 27rem; }
.main-visual .swiper-progress__hidden-space {display: inline-block;vertical-align: middle;width: 150rem;height: 3rem; position: relative;}
.main-visual .swiper-progress__hidden-space:before {display:none;}
.main-visual .swiper-progress__wrap {display: block;width: 150rem;height: 3rem;position: absolute;left: 22rem;top: 50%;margin-top: -1rem;background: #fff;overflow: hidden;}
.main-visual .swiper-progress {display: block;width: 0;height: 100%;}

.main-visual--uninit .swiper-control__arrow,
.main-visual--uninit .swiper-state { display: none !important; } */



/* **************************************** *
 * BUSINESS
 * **************************************** */
.main-section.main-business { padding-top: 120rem; }
.main-business__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 -36rem; }
.main-business__item { position: relative; overflow: hidden; border-right: 1px solid var(--color-base-line); text-align: center; }
.main-business__item:last-child { border-right: 0; }
.main-business__item > a { display: inline-block; margin: 0 36rem; }
.main-business__item:after { content:""; display: block; position: absolute; top:0; bottom: 0; right: -36rem; width: 1rem; background: var(--color-base-line); }
.main-business__item:last-child:after { display: none; }
.main-business__item-pic figure { width:64rem; height:64rem; margin: 0 auto; }
.main-business__item-pic .jt-lazyload__color-preview { background: transparent; }
.main-business__item-title { position: relative; text-align: center; margin-top: 24rem; font-size: 0; transition: color .3s; }
.main-business__item-title span { vertical-align: middle; }
.main-business__item-title .jt-guide--icon { display:inline-block; vertical-align: middle; margin-left: 10rem; position: relative; top: -1rem;}
.main-business__item-title .jt-guide--icon svg { width: 10rem; }
.main-business__item-title .jt-guide--icon path { transition: stroke .3s; }
.main-business__item-desc { text-align: center; color:var(--color-secondary); margin-top: 6rem; }
html.desktop .main-business__item > a:hover .main-business__item-title { color:var(--color-primary); }
html.desktop .main-business__item > a:hover .main-business__item-title svg path { stroke: var(--color-primary); }

/* QUOTATION */
.main-quotation { display: grid; align-items: center; grid-template-columns: 387rem minmax(0, auto); column-gap: 125rem; padding:85rem 128rem 81rem; background-color: var(--color-base-bg); border-radius: 0 400rem 400rem 0; margin-top: 100rem; overflow: hidden; }
.main-quotation__proportion-item { margin-bottom: 34rem; }
.main-quotation__proportion-progress { position: relative; width:306rem; height: 10rem; }
.main-quotation__proportion-progress:before { content:""; display: inline-block; vertical-align: top; width: 100%; height: 100%; background-color: var(--color-base-line); border-radius:5rem;}
.main-quotation__proportion-progress--bar { position: absolute; left:0; width: 100%; height:100%; background: linear-gradient(90deg, #3178E4, #B263A2); border-radius: 5rem; }
.main-quotation__proportion-progress--state { position: absolute; top:-17rem; left:100%; padding-left:16rem; color:var(--color-base) }
.main-quotation__proportion-title { color:var(--color-secondary); margin-top: 12rem; }

.main-quotation__proportion-item--answer .main-quotation__proportion-progress--bar { width: 95%; }
.main-quotation__proportion-item--matching { margin-bottom: 0; }
.main-quotation__proportion-item--matching  .main-quotation__proportion-progress--bar { width: 90%; }

.main-quotation__review-list { padding: 0 68rem 45rem; }
.main-quotation__review-item { text-align: center; }
.main-quotation__review-content { margin-top: 10rem; color:var(--color-secondary); }

html.ios .main-quotation__review .swiper-wrapper { z-index: -1; }
.main-quotation__review .swiper-control { text-align: center; bottom:0; left:0; }
.main-quotation__review .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { width: 20rem; height: 20rem; margin:0; vertical-align: middle; }
.main-quotation__review .swiper-navigation .swiper-button__wrap { position: absolute; top:0; height: 100%; width: 68rem; background: var(--color-base-bg); z-index: 2; }
.main-quotation__review .swiper-navigation .swiper-button__wrap-prev { left: 0; }
.main-quotation__review .swiper-navigation .swiper-button__wrap-next { right: 0; }
html.safari .main-quotation__review .swiper-navigation .swiper-button__wrap { -webkit-transform: translateZ(0); }
.main-quotation__review .swiper-navigation .swiper-button { width: 32rem; height: 32rem; margin-top: -33rem; }
.main-quotation__review .swiper-navigation .swiper-button-prev { left: 0; }
.main-quotation__review .swiper-navigation .swiper-button-next { right: 0; }
.main-quotation__review .swiper-navigation .swiper-button .jt-guide--icon { width:20rem; height: 32rem; }
.main-quotation__review .swiper-navigation .swiper-button svg path { stroke: #bbb; transition: stroke .3s; }
html.desktop .main-quotation__review .swiper-navigation .swiper-button:hover svg path { stroke: var(--color-base); }
html.ios .main-quotation__review .swiper-navigation .swiper-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }



/* **************************************** *
 * BANNER
 * **************************************** */
.main-banner { padding:0; }
.main-banner__item { background: var(--color-primary); color: #fff; padding: 59rem 0; text-align: center; }
.main-banner__item-bg { position: absolute; top: 50%; left: calc(50% - 315rem); transform: translate(-50%, -50%); width: 288rem; }
.main-banner__item-bg  figure { width: 100%; padding-top: 95.4%; }
.main-banner__item-bg  figure .jt-lazyload__color-preview { background: transparent; }
.main-banner__item-desc-logo { display: inline-block; width: 96rem; height: 36rem; background: url(/@resource/images/main/banner-hidipl.svg)no-repeat center; background-size: contain; vertical-align: middle; margin-right: 3rem; transform: translateY(-2rem); }
.main-banner__item-btn { color: #fff; margin-top: 16px; display: block; }
.main-banner__item-btn .jt-guide--icon { width: 12rem; height: 12rem; }
.main-banner__item-btn .jt-guide--icon svg { height: 100%; }
.main-banner__item-btn .jt-guide--icon svg path { stroke: #fff; }
.main-banner__item-btn span { position: relative; }
.main-banner__item-btn span::after { content: ''; display: block; width: 100%; height: 1rem; position: absolute; left: 0; bottom: -1rem; background: #fff; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; }
html.desktop .main-banner__item-btn:hover span::after { -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}
/* .main-banner__item figure { width:100%; padding-top: 16%; }
.main-banner__item .main-banner--mobile { display: none; padding-top: 28.2%; }
.main-banner__item .jt-lazyload__color-preview { background: transparent; } */



/* **************************************** *
 * PORTFOLIO
 * **************************************** */
.main-portfolio { background: var(--color-base-bg); }
.main-portfolio__content { position: relative; }
.main-portfolio__more { display: none; }



/* **************************************** *
 * PARTNER
 * **************************************** */
.main-partner__group { white-space: nowrap; }
.main-partner__group:nth-child(2) { margin-top: 36rem; }
.main-partner__item { position:relative; display: inline-block; vertical-align: top; background:var(--color-base-bg); width: 220rem; height: 220rem; border-radius: var(--border-radius); margin:0 18rem; }
.main-partner__item > a { display: block; padding:28rem; width: 100%; height: 100%; }
.main-partner__item-ci { margin-top: 12rem; width: 100%; max-width: 164rem; }
.main-partner__item-ci figure { padding-top: 30.48%; }
.main-partner__item-ci .jt-lazyload__color-preview { background: transparent; }
.main-partner__item-title { position: absolute; bottom: 28rem; color:var(--color-base); }
.main-partner__more { text-align: center; margin-top: 80rem; }
.main-partner--black { background:var(--color-base); }
.main-partner--gray { background:#f3f3f3; }
.main-partner--primary { background: var(--color-primary); }
.main-partner--black .main-partner__item-title,
.main-partner--primary .main-partner__item-title { color:#fff; }



/* **************************************** *
 * NEWS
 * **************************************** */
.main-news { background: #fff; }
.main-news__title { display: block; margin-bottom: 40rem; }

.main-plannews__content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36rem; }

.main-trends { padding-top: 100rem; margin-top: 100rem; border-top: 1px solid var(--color-base-line); }
.main-trends__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 36rem; }

.main-subscript { margin-top:100rem; background-color: var(--color-primary); border-radius: 0 200rem 200rem 0; padding:56rem; text-align: center; }
.main-subscript__title { color:#fff; }
.main-subscript__title .jt-guide--icon,
.main-subscript__title span { vertical-align: middle; }
.main-subscript__title .jt-guide--icon { position: relative; width: 264rem; }
.main-subscript__title .jt-guide--icon path { fill: #fff !important; }
.main-subscript__btn { display: inline-block; margin-top: 8rem; color:#fff; }
.main-subscript__btn .jt-guide--icon { width: 8rem; }
.main-subscript__btn .jt-guide--icon path { stroke: #fff; }
.main-subscript__btn > a { opacity: .8; transition: opacity .3s; }
html.desktop .main-subscript__btn > a:hover { opacity: 1; }

/* 기획기사 영역 임시 숨김처리 */
.main-trends { padding-top: 0 !important; margin-top: 0 !important; border-top: none !important }



/* **************************************** *
 * MEDIA
 * **************************************** */
.main-media__content { border-radius: var(--border-radius); overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); }
.main-media__content .jt-embed-video__poster .jt-embed-video__bg { background-size: 100%; }



/* **************************************** *
 * FAQ
 * **************************************** */
.main-faq { background-color: var(--color-base-bg); }
.main-faq .main-section__more { padding-top: 16rem; }
.main-faq__content { margin-top: -36rem; } 

 

/* **************************************** *
 * SUPPORT
 * **************************************** */
.main-support { padding:0; }
.main-support a { display: flex; gap: 57rem; align-items: center; }
.main-support__content { padding: 49rem 0 47rem; }
.main-support__title { transition: color .3s; font-size: 0; }
.main-support__title span { vertical-align: middle; }
.main-support__title .jt-guide--icon {display: inline-block; vertical-align: middle; margin-left: 4rem; width: 12rem; height: 12rem; margin-top: -2rem; }
.main-support__title .jt-guide--icon svg { height: 100%; }
.main-support__title .jt-guide--icon path { transition: stroke .3s; }
.main-support__desc { font-size: 0; color:var(--color-secondary); }
.main-support__desc > a { color: inherit; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0; }
.main-support__desc h3 { display: inline; }
.main-support__notice { padding-right: 146rem; }
.main-support__qna { padding-left: 146rem; border-left: 1px solid var(--color-base-line); padding-right: 0; }
.main-support__date { display: inline-block; position:relative; }
.main-support__date:after { content:""; display:inline-block; width: 3px; height:3px; background:#bbb; border-radius: 50%; margin:0 6rem; vertical-align: middle; margin-top: -1rem; }
html.ios .main-support__date:after { margin-top: -2rem; }
html.desktop .main-support__notice > a:hover { color:var(--color-primary); }
html.desktop .main-support__notice > a:hover .jt-guide--icon path { stroke: var(--color-primary); }
html.desktop .main-support__qna > a:hover .main-support__title { color: var(--color-primary); }
html.desktop .main-support__qna > a:hover .main-support__title .jt-guide--icon path { stroke: var(--color-primary); }



/* **************************************** *
 * MAIN POPUP
 * **************************************** */
.jt-main-popup__overlay { display: flex; align-items: center; justify-content: center; text-align: center; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 10000; padding: 20rem 20rem 0; background: rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; overflow: auto; }
.jt-main-popup__scroll { max-height: 100%; }
.jt-main-popup__container { /* max-width: 486rem; */ padding-bottom: 20rem; }
.jt-main-popup__image img { display: inline-block; vertical-align: top; max-width: 100%; }
.jt-main-popup__btn-wrap{ font-size: 0; }
.jt-main-popup__btn { display: inline-block; vertical-align: top; width: 50%; border:0; padding:14rem 0; margin:0; cursor: pointer; }
.jt-main-popup--close { background: var(--color-base); color:#fff; }
.jt-main-popup--today { background: #ebebeb; color: var(--color-secondary); }



/* **************************************** *
 * KEYFRAMES
 * **************************************** */
@keyframes twinkle {
    0% { opacity: 1; }
    50% { opacity: 0; }
}