@charset "utf-8";

/*
 * File       : b-main.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 1) global
 */



/* **************************************** *
 * global
 * **************************************** */
.main_section {position: relative;}

.main_section_title {font-size: 30px;letter-spacing: -0.05em;line-height: 1.6;font-weight: 500;color: #000;}
.main_section_desc {font-size: 16px;letter-spacing: -0.05em;line-height: 1.87;font-weight: 400;color: #000;}
.main_section_typo {display: block;font-size: 18px;letter-spacing: -0.05em;font-weight: 700;color: #222;}



/* **************************************** *
 * visual
 * **************************************** */
.main_visual {height: 100vh;max-height: 954px;}

.main_visual_bg {width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: url(../images/type-b/visual-gradient.jpg) no-repeat;z-index: 1;}
.main_visual_bg_overlay {width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: url(../images/type-b/visual-gradient-overlay.png) no-repeat center center;z-index: 2;}

.main_visual_slider_wrap {width: 100%;height: 100%;}
.main_visual_slider {width: 100%;height: 100%;position: relative;z-index: 3;}
.main_visual_item {width: 100%;height: 100%;}
.main_visual_item > .wrap {height: 100%;}
.main_visual_item_content {display: table;width: 100%;height: 100%;}
.main_visual_item_content_inner {display: table-cell;vertical-align: middle;}
.main_visual_item b {display: block;font-size: 20px;letter-spacing: -0.05em;font-weight: 700;color: #222;}
.main_visual_item h2 {margin-left: -6px;padding: 43px 0 15px;font-size: 50px;letter-spacing: -0.05em;line-height: 1.6;font-weight: 500;color: #000;}
.main_visual_item p {margin-bottom: 53px;font-size: 16px;letter-spacing: -0.05em;line-height: 1.87;font-weight: 500;color: #000;}

.main_visual_prod {position: absolute;opacity: 0;}

.main_visual_pager {height: 81px;position: absolute;left: 0;right: 0;bottom: 0;font-size: 0;line-height: 1;text-align: center;border-top: 1px solid rgba(255,255,255,0.3);z-index: 4;}
.main_visual_pager > li {display: inline-block;width: 300px;cursor: pointer;opacity: 0.3;transition: opacity 300ms;}
.main_visual_pager > li > span {display: inline-block;padding-left: 31px;position: relative;font-size: 16px;font-weight: 600;letter-spacing: -0.05em;line-height: 80px;color: #222;}
.main_visual_pager > li > span:before {content: '';display: block;width: 40px;height: 40px;position: absolute;left: -20px;top: 50%;margin-top: -20px;background: no-repeat right center;}
.main_visual_pager > li:nth-child(1) > span:before {background-image: url(../images/type-b/visual-icon-01.png);background-position: 80% center;}
.main_visual_pager > li:nth-child(2) > span:before {background-image: url(../images/type-b/visual-icon-02.png);}
.main_visual_pager > li:nth-child(3) > span:before {background-image: url(../images/type-b/visual-icon-03.png);background-position: 74% center;}
.main_visual_pager > li:nth-child(4) > span:before {background-image: url(../images/type-b/visual-icon-04.png);background-position: 74% center;}
.main_visual_pager > li.cycle-pager-active {opacity: 1;}

.main_visual_item_01 .main_visual_prod {top: 0px;right: -133px;}
.main_visual_item_02 .main_visual_prod {top: 85px;right: -140px;}
.main_visual_item_03 .main_visual_prod {top: 0;right: -21px;}
.main_visual_item_04 .main_visual_prod {top: 37px;right: -16px;}



/* **************************************** *
 * best
 * **************************************** */
.main_best {padding-top: 180px;}

.main_best_pos {margin-top: 73px;padding-left: 352px;overflow: hidden;}

.main_best_item {transition: opacity 300ms;}
.main_best_txt {margin-top: 32px;text-align: center;}
.main_best_txt b {display: block;font-size: 16px;font-weight: 500;letter-spacing: -0.05em;color: #000;}
.main_best_txt p {margin-top: 15px;font-size: 14px;line-height: 1.71;font-weight: 400;letter-spacing: -0.05em;color: #8a8d8f;}

.main_best_img {position: relative;}
.main_best_hover_data {position: absolute;top: 0;bottom: 0;left: 0;right: 0;padding-top: 69px;text-align: center;background: rgba(255,255,255,0.8);opacity: 0;transition: all 300ms;}
.main_best_hover_star {font-size: 0;}
.main_best_hover_star > i {display: inline-block;vertical-align: middle;width: 21px;height: 20px;margin: 0 3px;background: url(../images/type-b/main-best-star.png);}
.main_best_hover_data > p {margin: 23px 0 17px;font-size: 18px;line-height: 1.67;letter-spacing: -0.05em;font-weight: 500;color: #000;}
.main_best_hover_data > b {display: block;font-size: 18px;font-weight: 500;color: #000;}
.main_best_hover_btn {margin-top: 57px;font-size: 0;}
.main_best_hover_btn > a {display: inline-block;margin: 0 5px;}
.main_best_img:hover .main_best_hover_data {opacity: 1;transition: all 600ms;}

.main_best_slider.swiper-container {overflow: visible;}
.main_best_item.swiper-slide-prev {opacity: 0.6;}
.main_best .swiper-container-horizontal>.swiper-scrollbar {width: 100%;height: 2px;margin-top: 86px;position: relative;left: 0;bottom: 0;border-radius: 0;}
.main_best .swiper-scrollbar-drag {background: var(--color-primary);border-radius: 0;}



/* **************************************** *
 * new
 * **************************************** */
.main_new {margin-top: -8px;}
.main_new_bg {width: 1327px;height: 600px;position: absolute;left: 0;bottom: 17px;background: url(../images/type-b/new-bg.jpg) no-repeat center center;}

.main_new_grid {width: 100%;position: relative;overflow: hidden;}
.main_new_grid > div {float: left;}
.main_new_head {width: 352px;padding-top: 535px;}
.main_new_img {width: 497px;}
.main_new_txt {position: absolute;right: -8px;bottom: 189px;}
.main_new_txt > p {margin: 45px 0;font-size: 30px;letter-spacing: -0.05em;line-height: 1.2;font-weight: 500;color: #000;}



/* **************************************** *
 * solution
 * **************************************** */
.main_solution {padding: 206px 0 232px;text-align: center;}

.main_solution_pic {position: absolute;z-index: -1;}
.main_solution_pic_01 {top: -63px;right: 150px;}
.main_solution_pic_02 {bottom: -72px;left: 150px;}

.main_solution .main_section_title {margin-bottom: 37px;}
.main_solution .jt_btn {margin: 0 auto;}



/* **************************************** *
 * event
 * **************************************** */
.main_event {background: url(../images/type-b/event-bg-base.jpg) no-repeat center center;overflow: hidden;}

.main_event_active_bg {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: url(../images/type-b/event-bg.jpg) no-repeat center center;z-index: 1;}

.main_event_banner {padding: 146px 0;position: relative;z-index: 2;}
.main_event_banner .main_section_title {padding: 34px 0 44px;line-height: 1.2;}



/* **************************************** *
 * story
 * **************************************** */
.main_story {padding: 180px 0 211px;}
.main_story > .wrap {padding-bottom: 204px;}

.main_story_head {margin-bottom: 60px;text-align: center;}
.main_story_head .main_section_desc {margin: 13px 0 43px;}
.main_story_head .jt_btn.secondary {width: 176px;margin: 0 auto;}

.main_story_item {width: 100%;height: 550px;position: relative;background: no-repeat center center;}
.main_story_item p {position: absolute;left: 21px;bottom: 15px;font-size: 18px;line-height: 1.2;font-weight: 400;color: #000;}

.main_story_item_01 {background-image: url(../images/type-b/story-bg.jpg);}
.main_story_item_02 {background-image: url(../images/type-b/story-bg-02.jpg);}

.main_story_sub_data {width: 100%;position: absolute;left: 0;bottom: 0;z-index: 2;}
.main_story_sub_data ul {width: 100%;position: absolute;left: 0;bottom: 0;font-size: 0;text-align: center;opacity: 0;visibility: hidden;}
.main_story_sub_data ul:first-child {opacity: 1;visibility: visible;}
.main_story_sub_data li {width: 300px;display: inline-block;vertical-align: top;}
.main_story_sub_data a {display: block;width: 100%;}
.main_story_sub_data img {margin: 0 auto;}
.main_story_sub_data span {display: block;margin-top: 36px;font-size: 16px;letter-spacing: -0.05em;font-weight: 500;color: #000;}



/* **************************************** *
 * how
 * **************************************** */
.main_how_pos {padding-left: 562px;position: relative;}

.main_how_head {position: absolute;left: 350px;top: 95px;z-index: 2;}
.main_how_head .main_section_title {margin-bottom: 106px;line-height: 1.2;}
.main_how_head .jt_btn.secondary {width: 189px;}

.main_how_list:after {content: '';display: table;clear: both;}
.main_how_list > li {float: left;width: 33.33%;}
.main_how_list a {display: block;position: relative;}
.main_how_list figure {position: relative;}
.main_how_list figure:after {content: '';width: 48px;height: 52px;position: absolute;left: 50%;top: 50%;margin-top: -24px;margin-left: -26px;background: url(../images/type-b/icon-play.png);transition: all 300ms;z-index: 3;}
.main_how_list p {display: block;margin-top: 32px;font-size: 16px;letter-spacing: -0.05em;font-weight: 500;color: #000;}
.main_how_list img.main_how_hover {position: absolute;top: 0;left: 0;opacity: 0;z-index: 1;transition: opacity .3s cubic-bezier(0, 0, 0.58, 0.32);}
.main_how_list a:hover img.main_how_hover {opacity: 1;}
.main_how_list a:hover figure:after {opacity: 0;}



/* **************************************** *
 * insta
 * **************************************** */
.main_insta {padding-top: 421px;}

.main_insta_typo {width: 100%;position: absolute;left: 67px;top: 184px;font-size: 164px;font-weight: 300;white-space: nowrap;z-index: 2;}

.main_insta_head {margin-bottom: 38px;text-align: center;}
.main_insta_head > span {display: block;margin-bottom: 23px;font-size: 18px;font-weight: 500;letter-spacing: -0.05em;color: #000;}

.main_insta_list:after {content: '';display: table;clear: both;}
.main_insta_list > li {float: left;width: 25%;}
.main_insta_list a {display: block;position: relative;}
.main_insta_list img.main_insta_hover {position: absolute;top: 0;left: 0;opacity: 0;z-index: 1;transition: opacity .3s cubic-bezier(0, 0, 0.58, 0.32);}
.main_insta_list a:hover img.main_insta_hover {opacity: 1;}