@charset "utf-8";

/*
 * File       : main.css
 * Author     : STUDIO-JT (SUMI)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) Demo Layout
 * 2) Main Visual
 * 3)
 * 4)
 */



/* **************************************** *
 * Demo Layout
 * **************************************** */
.main_section_title {margin-bottom: 60px;margin-left: 0.2em;font-size: 38px;line-height: 1.2;font-weight: 600;text-align: center;color: #222;}
.main_section_title h2 {font-size:20px;margin-bottom: 11px;color:#aaa;}
.main_section_title h3 {font-size:60px; color:#111;}
.main_section_title .sub_tit {font-size:24px;margin-top: 34px;line-height: 1.5;}
.main_section_title .desc {font-size:16px;font-weight:500;color:#666;line-height:1.5;margin-top: 7px;}

.main_inner_bg { position: fixed; top: 0; left: 0; width: 100%; text-align: center; z-index:-1;}
.main_inner_bg:before {font-family: 'jt-font';font-weight:normal;content: '\e93b';font-size: 772px;color: #e3e3e3;}


/* **************************************** *
 * Main Visual
 * **************************************** */
.main_visual {height: 100vh; padding-top: 97px; background:#000;}
.main_visual_wrap {width:100%; height:100%; position:relative; background:#000;}
.main_visual_wrap .wrap {z-index: 1000;}
.main_visual_slider {width: 100%;height: 100%;}
.main_visual_item {width: 100%;height: 100%;position: relative;overflow: hidden;}
.main_visual_item > figure {position:absolute;left: 50%;transform: translateX(-50%);width: 1188px;height: 100%;/* padding-top: 38.571%; */overflow: hidden;}
.main_visual_item > figure img {display:block; width:100%; height: 100%; object-fit: cover;}
.main_visual_content {width: auto;position: absolute;top: 51.4%; left: 50%; margin-left: -771px; bottom: auto; -webkit-transition: opacity .3s;transition: opacity .3s;}
.main_visual_content_inner > div > * { -webkit-transition: all 1s;  transition: all 1s;}
.main_visual_content_inner b > span,
.main_visual_content_inner p > span,
.main_visual_wrap .btn_wrap > a {opacity:0;}
.main_visual_item.swiper-slide-active .main_visual_content_inner > div > * { opacity: 1; -webkit-transform: none; transform: none;}
.main_visual_content b {display: block;font-size: 70px;font-weight: 600;letter-spacing:0;line-height: 1.07;color: #fff;overflow:hidden;}
.main_visual_content p {padding-top: 0;font-size: 24px;line-height: 1.5;font-weight: 500;letter-spacing: -0.01em;color: #fff;overflow:hidden;}
.main_visual_content b > span {display:block;}
.main_visual_content p > span {display:block;}

.main_visual_wrap .main_visual_state  {display: block;position: absolute;top: 43.4%;left: 50%;margin-left: -771px;bottom: auto;-webkit-transition: all 300ms;transition: all 300ms;z-index:100;}
.main_visual_wrap .swiper-pagination-fraction {color:rgba(255, 255, 255, .5);}
.main_visual_wrap .cycle_caption {color:#fff;}
.main_visual_wrap .cycle_control {right: 13%;left: auto;bottom: 50px;margin-top:0;top: auto;width: 200px;}
.main_visual_wrap .cycle_btn {opacity:1;}
.main_visual_wrap .cycle_next {right:0;}

.main_visual_wrap .btn_wrap {margin-top: 40px; overflow:hidden;}
.main_visual_wrap .btn_wrap span {color:#fff; letter-spacing:0.05em; vertical-align:middle;}
.main_visual_wrap .btn_wrap a {transition:none;}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
html.ios .main_visual_wrap .btn_wrap {padding-top:2px;}

.main_visual_wrap .swiper_navigation > button:after {line-height:50px}

.main_visual_item_video .main_visual_item_bg {position: absolute;overflow:hidden;width: 1188px;height: 100%;left: 50%;transform: translateX(-50%);overflow:hidden;}
.main_visual_item_video .main_visual_item_bg:after { content: ''; background: #000; background: rgba(0, 0, 0, .25); width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.main_visual_item_video .main_visual_item_bg_inner {height: 100%;}
.main_visual_item_video .jt_fullvid_container  {width: 100%;height: 100%;position: relative;overflow: hidden;}
.main_visual_item_video .jt_fullvid{opacity:0}
.main_visual_item_video .jt_fullvid_container .jt_fullvid{opacity:1}
.main_visual_item_video .main_visual_content {bottom:284px}
.ie9 .main_visual_item_video .jt_fullvid_container .jt_fullvid,
.ie10 .main_visual_item_video .jt_fullvid_container .jt_fullvid{opacity:0}
.main_visual_item_video .jt_fullvid_poster {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: no-repeat center center;background-size: cover;cursor: pointer;}

.main_visual_item_bg_video_wrap {width: 100%;padding-top: 77%;position: relative;overflow: hidden;}
.main_visual_item_bg_video_wrap video {display: block;width: auto;height: auto;min-width: 100%;min-height: 100%;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}

/* .main_visual_item:not(.main_visual_item_reels) b {font-size: 100px; line-height: 1.02; margin-bottom: 13px;} */
.main_visual_item_video .main_visual_item_bg::after {position: absolute; content: ''; width: 100%; height: 100%; left: 0; bottom: 0; background: rgba(0, 0, 0, .2);}
.main_visual_item > figure::after {position: absolute; content: ''; width: 100%; height: 100%; left: 0; bottom: 0; background: rgba(0, 0, 0, .2);}

/* **************************************** *
 * Insta Reels
 * **************************************** */
.main_visual_item_reels .main_visual_item_bg { position: relative; width: 700px; height: 100%; right: auto; left: 50%; transform: translateX(-50%); }
.main_visual_item_reels .main_visual_item_bg_inner {height: 100%; position: relative;}
.main_visual_item_reels .main_visual_item_bg_inner::after {position: absolute; content: ''; width: 200%; top:2px; height: 100%; left: 50%; transform: translateX(-50%); background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));}
.main_visual_item_reels .jt_fullvid_container {width: 100%;height: 100%;position: relative;overflow: hidden;}
.main_visual_item_reels .jt_fullvid_container .jt_fullvid { top: 0 }
.main_visual_item_reels .jt_fullvid_poster {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: no-repeat center center;background-size: cover;cursor: pointer;}

.main_reels { background: #000; padding-top: 122px; padding-bottom: 200px; }
.main_reels_inner { margin: 0 auto; width: calc(100% - 150px); }
.main_reels_slider { height: 100%; overflow: visible; position: relative; margin: 0 -21px;}
.main_reels_list {align-items: center; }
.main_reels_item { margin: 0 21px; width: 486px; position: relative; }
html.desktop .main_reels_item:hover .main_reels_item_bg { transform: scale(1.04); }
html.desktop .main_reels_item:hover .main_reels_profile_link { transform: translate(-7px, -12px); }
html.desktop .main_reels_item:hover .main_reels_item_tag { transform: translate(-7px, 12px); }

.main_reels_item img { width: 100%; }
.main_reels_item_bg { position: relative; width: 100%; height: auto; padding-top: 151%; overflow: hidden; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.main_reels_item_bg::after { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .4)) }
.main_reels_item_bg_inner {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.main_reels_profile_link { position: absolute; top: 0; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.main_reels_item_profile { display: flex; gap: 12px; align-items: center; padding: 24px 32px; }
.main_reels_item_figure { width: 38px; height: 38px; border-radius: 50px; overflow: hidden; }
.main_reels_item_figure img { width: 100%; height: 100%; }
.main_reels_item_name span { color: #fff; position: relative; }
.main_reels_item_name span::after {width: 0; left: 0;background: #fff;-webkit-transition-delay: 0ms;transition-delay: 0ms;content: '';display: block;height: 2px; position: absolute; bottom: -6px;z-index: 2;-webkit-transition: width 400ms, background 300ms; transition: width 400ms, background 300ms;-webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);}
html.desktop .main_reels_item_profile:hover span:after {width: 100%; }
.main_reels_item_tag { padding: 32px 40px 32px 32px; position: absolute; bottom: 0; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.main_reels_item_tag_wrap { max-height: 70px; overflow: hidden; transition: max-height .3s; will-change: max-height; }
.main_reels_item_tag_list {display: flex; flex-wrap: wrap; gap: 10px; }
.main_reels_item_tag_list li { border: 1px solid #fff; border-radius: 99px; padding: 3px 13px 4px; color: #fff; font-size: 14px; line-height: 1.5; }
.main_reels_item_tag_more { z-index: 100; display: none; padding-top: 14px; padding-right: 24px; padding-left: 10px; margin-left: -10px; padding-bottom: 10px; margin-bottom: -10px; opacity: .7; }
.main_reels_item_tag_more span { color: #fff; position: relative; font-size: 14px; line-height: 1.5; }
.main_reels_item_tag_more span::after {position: absolute; content: '\e910'; font-family: 'jt-font'; width: 12px; height: 12px; color: #fff; text-align: center; top: 3px; transform: rotate(0); margin-left: 6px; font-size: 8px; transition: transform .3s;}

.main_reels_item_tag.open .main_reels_item_tag_wrap {max-height: 110px}
.main_reels_item_tag.open .main_reels_item_tag_more span::after {transform: rotate(180deg);}

.main_reels_item .jt_fullvid_container  {width: 100%;height: 100%;position: relative;overflow: hidden;}
.main_reels_item .jt_fullvid{opacity:0}
.main_reels_item .jt_fullvid_container .jt_fullvid{opacity:1}
.ie9 .main_reels_item .jt_fullvid_container .jt_fullvid,
.ie10 .main_reels_item .jt_fullvid_container .jt_fullvid{opacity:0}
.main_reels_item .jt_fullvid_poster {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: no-repeat center center;background-size: cover;cursor: pointer;}
.main_reels_item .jt_fullvid_poster.reels-poster-01 {background-image:url(../images/main/reels-poster-01.jpg)}
.main_reels_item .jt_fullvid_poster.reels-poster-02 {background-image:url(../images/main/reels-poster-02.jpg)}
.main_reels_item .jt_fullvid_poster.reels-poster-03 {background-image:url(../images/main/reels-poster-03.jpg)}

html.mobile .main_reels_item .jt_fullvid_container {z-index: -1;}

/* **************************************** *
 * Service
 * **************************************** */
.main_service {padding: 197px 0 234px;}
.main_service_slider {padding-bottom:5px;overflow:hidden; padding-bottom:110px;}
.main_service_list {margin-left:-21px; margin-right:-21px;}
.main_service_list > div {margin-bottom:198px;}
.main_service_list > div:nth-child(3n+1) { top:134px}
.main_service_list > div:nth-child(3n-1) {  top: 296px;}
.main_service_list .main_service_item {float: left; width: -webkit-calc(33.33% - 42px); width: calc(33.33% - 42px); margin-left:21px; margin-right:21px; position: relative; padding-top: 46%}
.main_service_list figure {padding-top: 123%;position: relative;background: #ddd;}
.main_service_list img {display: block;width: 100%;position: absolute;top: 0;left: 0;}
.main_service_list .main_service_content {margin-top: 26px;}
.main_service_list .main_service_tit {font-size:26px; color:#111; text-transform:uppercase }
.main_service_list .main_service_txt {margin-top:5px; font-size:16px; color:#666;line-height: 1.75;}
.main_service_list .main_service_link {display:block; position:absolute;top:0;}
.main_service_list .main_service_thumb {position:relative;}
.main_service_list .main_service_thumb:before {border:0 solid #636a52; position:absolute; top:0; left:0; right:0; bottom:0; content:''; display:block; opacity:0; z-index:10; -webkit-transition: opacity .3s, border .3s;transition: opacity .3s, border .3s;}
html.desktop .main_service_list .main_service_link:hover .main_service_thumb:before {border-width:40px; opacity:1;}
.main_service_content .btn_wrap {clear:both;text-align:center; margin-top:118px;}


/* **************************************** *
 * Space
 * **************************************** */
.main_space_slider_wrap {position:relative;}
.main_space_slider {position:relative;}
.main_space_slider:before {width:100%;height:100%;background: #888;content:'';display:block;position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
.main_space {margin-right: 180px;position: relative;z-index:10;}
.main_space_typo_wrap {position:relative;margin-bottom: 68px;}
.main_space .main_space_typo { font-size:180px; font-weight:600; color:#111;line-height: 1;white-space: nowrap;}
.main_space_content {width: 100%;padding: 0 313px;position: absolute;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);z-index:10;}
.main_space_content_inner{margin-top:76px}
.main_space_content_inner b {display: block;font-size: 60px;font-weight: 600;letter-spacing:0;line-height: 1.1;color: #fff;}
.main_space_content_inner .btn_wrap {margin-top:32px}

.main_space_item {position:relative;}
.main_space_item figure {padding-top: 49.35%;position: relative;background: #ddd;overflow:hidden;}
.main_space_item img {display: block;width: 100%;position: absolute;top: 0;left: 0;}


/* **************************************** *
 * Brand Story
 * **************************************** */
.main_brand_story {padding: 430px 0 191px;margin-top:-233px;background:#fff;position: relative;}
.main_brand_story:before {width:100%;height: 50%;background:#fff;content:'';display:block;position:absolute;bottom: -50%;}
.main_brand_story_list_wrap {margin: 149px -20px 98px;}
.main_brand_story_list {font-size:0; text-align:center;}
.main_brand_story_list > li { width:33.33%; display:inline-block; vertical-align:top; position:relative;}
.main_brand_story_list > li:before {width:1px; height:100%; background:#ddd; content:''; display:block; position:absolute; left:0; top:0; display:block;}
.main_brand_story_list > li:first-child:before {display:none;}
.main_brand_story_icon {min-height: 102px;text-align:center;display:table; width:100%}
.main_brand_story_icon figure { display:table-cell; vertical-align:middle;}
.main_brand_story_txt {max-width:260px; display:inline-block;}
.main_brand_story_txt b {margin-top: 43px;font-size:24px;color:#111;display:block;}
.main_brand_story_txt p {margin-top: 16px;font-size:16px;line-height: 1.7;color:#666;letter-spacing:-0.01em;}
.main_brand_story .btn_wrap {text-align:center; }


/* **************************************** *
 * Miele
 * **************************************** */
.main_miele_slider_wrap {position:relative;}
.main_miele_slider {position:relative;}
.main_miele_slider:before {width:100%;height:100%;background: #888;content:'';display:block;position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
.main_miele {margin-right: 180px;position:relative;z-index:10;}
.main_miele_content {width: 100%;padding: 0 313px;position: absolute;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);z-index:10;}
.main_miele_content .wrap > span {font-size:20px;margin-bottom: 14px;color:#fff;opacity:0.52;display: block;}
.main_miele_content_inner{margin-top:76px}
.main_miele_content_inner b {display: block;font-size: 60px;font-weight: 600;letter-spacing:0;line-height: 1.1;color: #fff;}
.main_miele_content_inner p {font-size:16px;color:#fff;letter-spacing:-0.01em;margin-top: 10px;}
.main_miele_content_inner .btn_wrap {margin-top: 42px;}

.main_miele_item {position:relative;}
.main_miele_item figure {padding-top: 49.35%;position: relative;background: #ddd; overflow:hidden;}
.main_miele_item img {display: block;width: 100%;position: absolute;top: 0;left: 0;}

.progress {-webkit-transform: rotate(-90deg); transform: rotate(-90deg);position: absolute; top: 0; left: 0;width: 100%;height: 100%;}
.progress_meter,
.progress_value {fill: none;}
.progress_meter {stroke: #fff; opacity:0.3;}
.progress_value {stroke: #fff; stroke-linecap: round;}


/* **************************************** *
 * Resister
 * **************************************** */
.main_resister {padding: 400px 0 198px;position:relative;margin-top: -200px;z-index: 1;}
.main_resister:before {width:666px; height:100%; background:#767c69; position:absolute;right:0; bottom:0; content:''; display:block; z-index:-1;}
.main_resister_contents_wrap {display:table;padding:0 130px;width: 100%;}
.main_resister_contents_wrap > div {width:50%;display:table-cell;vertical-align:middle;}
.main_resister_contents_wrap .main_section_title {text-align:left;}
.main_resister_contents_wrap .main_section_title h2 {margin-bottom:15px}
.main_resister_contents_wrap .main_section_title h3 { line-height:1.09}
.main_resister_contents_wrap .main_section_title p {margin-top:10px; line-height:1.8}
.main_resister_contents_wrap .main_section_title .btn_wrap {margin-top:32px}
.main_resister_contents_wrap img {display:block;}
.main_resister_img_wrap {padding-left: 21px;}
.main_resister_img_wrap figure {padding-top: 115%;position: relative;background: #ddd;}
.main_resister_img_wrap img {display: block;width: 100%;position: absolute;top: 0;left: 0;}



/* **************************************** *
 * Instagram
 * **************************************** */
.main_section.main_instaram {padding: 147px 0 160px;background-color:#222;}
.main_instaram_contents_wrap {padding:0 130px;width: 100%;}
.main_instaram_contents_wrap .main_section_title {text-align:left;margin-left:0;margin-bottom: 43px;}
.main_instaram_contents_wrap .main_section_title h3 {color:#fff;text-indent: -3px;}
.main_instaram_wrap {margin:0 -21px -3.274%;}
.main_instaram_wrap:after { content: ""; display: table; clear: both;}

/* card list */
.card-list__item {float: left;width: 25%;padding: 0 1.51%;margin-bottom: 3.02%;}
.card-list__item:nth-child(5){clear:both}
.card-list__item-figure {position: relative;padding-top: 100%;}
.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;left: 0;width: 100%;height: 100%;}
.card-list__item-figcaption:after {content: '\e918';font-family: 'jt-font';font-size:20px; color:#fff; position:absolute; top:20px; right:20px;z-index:2;opacity:0;-webkit-transition: opacity 0.3s;transition: opacity 0.3s;}
.card-list__item-figcaption-inner {position: absolute;bottom: 26px;left: 0;text-align: left;z-index: 2;opacity: 0;-webkit-transition: opacity 0.3s;transition: opacity 0.3s;padding: 0 10.5%;color: #fff;font-size: 15px;line-height: 1.866;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;}
.card-list__item-figure:before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #000;opacity: .2;z-index: 1;-webkit-transition: opacity 0.3s;transition: opacity 0.3s;}
html.desktop .card-list__item:hover .card-list__item-figure:before { opacity: 0.75;}
html.desktop .card-list__item:hover .card-list__item-figcaption:after,
html.desktop .card-list__item:hover .card-list__item-figcaption-inner{ opacity: 1;}



/* svg style */
.circ {-webkit-transform:  scale(.5) rotate(-90deg);transform:  scale(.5) rotate(-90deg); -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease;}
.circ circle {stroke-dasharray: 440px;}
.circ1 {stroke-dashoffset: 440px;}

/* customize swiper */
.swiper-slide {/* padding: 0 15px; */}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0;}
.swiper-pagination {position: relative;}
.swiper-pagination-bullet {width: auto; height: auto; background: 0;}
.swiper-pagination-bullet-active .circ {-webkit-transform: scale(1) rotate(-90deg);transform: scale(1) rotate(-90deg);}
.swiper-pagination-bullet-active .circ1 {stroke-dashoffset: 220px; -webkit-transition: linear 2s stroke-dashoffset; transition: linear 2s stroke-dashoffset;}