@charset "utf-8";

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



/* **************************************** *
 * global
 * **************************************** */
.main_icon_pic {position: absolute;z-index: 1;}
.main_icon_pic img {display: block;max-width: 100%;height: auto;}



/* **************************************** *
 * visual
 * **************************************** */
.main_visual {position: relative;width: 1712px;height: 789px;}

.main_visual .jt_full_video_outer:after {display: none;}

.main_visual_pic_01 {right: 152px;top: -116px;}
.main_visual_pic_02 {left: 386px;bottom: -45px;}

.main_visual_slider {position: relative;width: 100%;height: 100%;background: #fff;z-index: 1;}
.main_visual_item {display: none;width: 100%;height: 100%;position: relative;overflow: hidden;}
.main_visual_item:first-child {display: block;}

.main_visual_item_bg {position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: no-repeat center center;background-size: cover;}

.main_visual_content {display: table;width: 100%;height: 100%;position: relative;z-index: 4;}
.main_visual_content_inner {display: table-cell;vertical-align: middle;padding: 0 192px 17px;}
.main_visual_content b {display: block;margin-left: -0.1em;font-size: 80px;font-weight: 400;letter-spacing: 0.2em;line-height: 1.12;color: #fff;}
.main_visual_content p {margin: 6px 0 43px;font-size: 16px;font-weight: 300;letter-spacing: 0.05em;line-height: 1.62;color: rgba(255,255,255,0.5);}

.main_visual_autoplay {width: 19px;height: 19px;position: absolute;left: 134px;bottom: 72px;z-index: 2;cursor: pointer;}
.main_visual_autoplay > span {display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;font-size: 0;opacity: 0;transition: opacity 300ms;}
.main_visual_autoplay > span:after {display: block;font-family: 'jt-font';font-size: 10px;font-weight: normal;text-align: center;line-height: 19px;color: #fff;}
.main_visual_autoplay > span.play_icon:after {content: '\e90e';}
.main_visual_autoplay > span.pause_icon:after {content: '\e90f';}
.main_visual_autoplay:not(.play) > span.play_icon {opacity: 1;}
.main_visual_autoplay.play > span.pause_icon {opacity: 1;}

.main_visual_item_01 .jt_full_video_poster {background-image: url(../images/main/main-visual-01.jpg);}
.main_visual_item_02 .main_visual_item_bg {background-image: url(../images/main/main-visual-02.jpg);}



/* **************************************** *
 * product
 * **************************************** */
.main_product {padding: 187px 0 270px;position: relative;}

.main_product_pic_01 {right: 118px;top: 137px;}
.main_product_pic_02 {left: 493px;bottom: 108px;}

.main_product_title {position: relative;font-size: 60px;font-weight: 300;letter-spacing: 0.2em;line-height: 1.33;color: #222;z-index: 1;}
.main_product_list {margin-top: 144px;margin-bottom: -135px;}
.main_product_list:after {content: '';display: table;clear: both;}

.main_product_item {float: left;width: 480px;margin-right: 40px;margin-bottom: 160px;}
.main_product_item:nth-child(3n) {margin-right: 0;}
.main_product_item:nth-child(3n+1) {clear: both;}
.main_product_item:nth-child(3n+2) {margin-top: -217px;}
.main_product_item > a {display: block;}
.main_product_thumb {position: relative;}
.main_product_thumb img {display: block;max-width: 100%;height: auto;}
.main_product_thumb_primary {position: relative;z-index: 1;}
.main_product_thumb_secondary {position: absolute;top: 0;left: 0;opacity: 0;z-index: 2;transition: .3s cubic-bezier(0, 0, 0.58, 0.32);}
.main_product_content {margin-top: -17px;padding: 0 28px;position: relative;z-index: 3;}
.main_product_content b {display: block;font-size: 32px;font-weight: 400;letter-spacing: 0.05em;line-height: 1.25;color: #222;text-transform: uppercase;}
.main_product_content p {margin-top: 13px;font-size: 16px;font-weight: 300;letter-spacing: 0.05em;line-height: 1.62;color: #666;}
.main_product_item > a:hover .main_product_thumb_secondary {opacity: 1;}

.main_product_more {position: relative;}
.main_product_more > a {display: block;width: 200px;height: 160px;margin: 0 auto;color: #fff;background: var(--color-primary);}



/* **************************************** *
 * brand story
 * **************************************** */
.main_brand {width: 1712px;margin: 0 0 0 auto;position: relative;z-index: 2;}
.main_brand_title {display: block;position: absolute;right: -18px;top: -116px;font-size: 200px;font-weight: 300;letter-spacing: 0.05em;color: #ddd;z-index: 2;}
.main_brand_inner {width: 100%;height: 954px;position: relative;z-index: 1;}

.main_brand_bg {position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: #f8f8f8 url(../images/main/main-banner-01.jpg) no-repeat center center;background-size: cover;z-index: 1;}

.main_brand_slide_area {width: 1483px;padding-left: 10px;height: 100%;margin-left: 219px;position: relative;z-index: 2;overflow: hidden;}
.main_brand_slider {width: 1300px;height: 100%;}
.main_brand_slider .slick-list {overflow: visible;}
.main_brand_item {display: none;width: 100%;height: 100%;}
.main_brand_item:first-child {display: block;}

.main_brand_content {display: table;width: 100%;height: 100%;position: relative;}
.main_brand_content_inner {display: table-cell;vertical-align: middle;padding-right: 40px;}
.main_brand_content_inner b,
.main_brand_content_inner p,
.main_brand_content_inner a{opacity:0.3; transition: opacity 300ms}
.slick-current .main_brand_content_inner b,
.slick-current .main_brand_content_inner p,
.slick-current .main_brand_content_inner a{opacity:1;}
.main_brand_content b {display: block;margin-left: -0.1em;font-size: 45px;font-weight: 400;letter-spacing: 0.1em;line-height: 1.33;color: #fff;text-transform: uppercase;}
.main_brand_content p {margin: 10px 0 65px;font-size: 16px;font-weight: 300;letter-spacing: 0.05em;line-height: 1.62;color: #fff;}

.slick-dots {position: absolute;left: 0;bottom: 138px;z-index: 3;}
.slick-dots > li {float: left;width: 218px;height: 5px;position: relative;margin-right: 30px;font-size: 0;border: 1px solid #ced6d9;cursor: pointer;}
.slick-dots > li:last-child {margin-right: 0;}
.slick-dots > li button {display: block;width: 0px;position: absolute;top: -1px;bottom: -1px;left: -1px;background: #fff;border:none;text-indent:-9999px;padding: 0;}





/* **************************************** *
 * intro
 * **************************************** */
.main_intro {height: 1723px;margin-top: -299px;margin-bottom: -585px;position: relative;background: #066d78 url(../images/main/main-ex-bg.jpg) no-repeat center center;background-size: cover;z-index: 1;}

.main_intro_pic_01 {right: 0;bottom: 124px;}
.main_intro_pic_02 {right: 356px;bottom: 680px;}
.main_intro_pic_03 {right: 344px;bottom: 671px;}
.main_intro_pic_04 {right: 212px;bottom: 544px;}
.main_intro_pic_05 {right: 228px;bottom: 470px;}
.main_intro_pic_06 {right: 295px;bottom: 1217px;}
.main_intro_pic_07 {right: 312px;bottom: 921px;}
.main_intro_pic_08 {right: 479px;bottom: 870px;}
.main_intro_pic_09 {right: 400px;bottom: 826px;}
.main_intro_pic_10 {right: 769px;bottom: 833px;}
.main_intro_pic_11 {right: 1039px;bottom: 730px;}
.main_intro_pic_12 {right: 881px;bottom: 698px;}

.filter_svg {position: absolute;bottom: 0;left: 0;}

.main_product_more { position: relative; filter: url(#goo); padding: 50px 0; margin: -50px 0; }
.main_product_more > a.gooey_btn { display: block; width: 165px; height: 165px; margin: 0 auto; color: #fff; background: var(--color-primary); border-radius: 900px; position: relative; }
.gooey_btn_text { position: absolute; top: 50%; left: 0; width: 100%; text-align: center; transform: translate(0, -50%); }
.gooey_btn_metaball { width: 165px; height: 165px; }
.gooey_btn_metaball i { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; transform: translate(-50%, -50%); border-radius: 500px; background: var(--color-primary); }
.gooey_btn_metaball i:nth-child(1) { left: 0px; top: -10px; width: 165px; height: 190px; transform: none; border-radius: 50%; }
.gooey_btn_metaball i:after { content: ""; position: absolute; width: 40px; height: 40px; top: 110px; background: var(--color-primary); border-radius: 50%; }
.gooey_btn_metaball i:nth-child(2):after { width: 90px; height: 90px; left: 20px; top: -47px; }
.gooey_btn_metaball i:nth-child(3):after { width: 110px; height: 110px; left: -50px; top: 5px; }
.gooey_btn_metaball i:nth-child(4):after { width: 120px; height: 120px; left: 7px; top: 5px; }
.gooey_btn_metaball i:nth-child(5) { width: 120px; height: 120px; left: 80px; top: 80px; }
.gooey_btn_metaball i:nth-child(1):after,
.gooey_btn_metaball i:nth-child(5):after { display: none }
.main_product_more > a.gooey_btn,
 a.gooey_btn .gooey_btn_metaball i,
 a.gooey_btn .gooey_btn_metaball i:after { transition: background 300ms }
.main_product_more > a.gooey_btn:hover,
 a.gooey_btn:hover .gooey_btn_metaball i,
 a.gooey_btn:hover .gooey_btn_metaball i:after { background: #059aab; }

.main_intro_item {width: 100%;height: 100%;position: relative;z-index: 2;}
.main_intro_item > div {position: absolute;}
.main_intro_item > div > a {display: block;}
.main_intro_img {position: relative;}
.main_intro_img > img {display: block;margin: 0 auto;max-width: 100%;height: auto;}
.main_intro_txt {margin-top: 31px;text-align: center;}
.main_intro_txt > b {display: block;margin-left: -0.05em;font-size: 32px;font-weight: 400;letter-spacing: 0.1em;color: #fff;}
.main_intro_txt > p {margin-top: 16px;font-size: 16px;font-weight: 300;line-height: 1.62;letter-spacing: 0.05em;color: rgba(255,255,255,0.5);}
.main_intro_design {top: 519px;left: 401px;}
.main_intro_design .main_intro_txt {margin-right: -18px;}
.main_intro_material {top: 395px;right: 356px;}
.main_intro_material .main_intro_txt {margin-left: -181px;}

.main_intro_item a:hover{ animation: squigglevision 0.3s infinite; animation-timing-function: cubic-bezier(0, 0, 0.8, 0.9);}

@keyframes squigglevision {
    0% {   -webkit-filter: url('#squiggly_01'); filter: url('#squiggly_01');}
    25% {  -webkit-filter: url('#squiggly_02');filter: url('#squiggly_02'); }
    50% {  -webkit-filter: url('#ssquiggly_03'); filter: url('#squiggly_03');}
    75% {  -webkit-filter: url('#squiggly_04');filter: url('#squiggly_04'); }
    100% { -webkit-filter: url('#squiggly_05'); filter: url('#squiggly_05');}
}



/* **************************************** *
 * review
 * **************************************** */
.main_review {padding-top: 326px;position: relative;z-index: 2;}
.main_review_inner {position: relative;background: #fff;z-index: 2;}

.main_review_pic_01 {top: -124px;left: 81px;}
.main_review_pic_02 {top: -145px;left: 0;}
.main_review_pic_03 {right: 409px;top: 149px;}
.main_review_pic_04 {left: 404px;bottom: -287px; z-index:3;}

.main_review_title {position: absolute;top: 110px;left: 184px;font-size: 60px;font-weight: 300;letter-spacing: 0.2em;line-height: 1.33;color: #aaa;z-index: 2;}
.main_review_title > span {color: #222;}

.main_review_content {width: 100%;position: relative;z-index: 1;}

.main_review_slider_wrap {width: 1131px;padding-left: 150px;position: relative;overflow: hidden;}
.main_review_fake {position: absolute;top: 0;bottom: 0;right: 0;left: 0;}
.main_review_fake img {display: block;margin-left: auto;margin-right: 0;max-width: 100%;height: auto;}
.main_review_slider {width: 100%;position: relative;}
.main_review_slider .slick-list {overflow: visible;}
.main_review_item {width: 100%;position: relative;}
.main_review_item img {display: block;margin-left: auto;margin-right: 0;max-width: 100%;height: auto;}

.main_review_note {display: table;width: 450px;height: 350px;position: absolute;right: 350px;top: 72px;z-index: 2;}
.main_review_note_inner {display: table-cell;vertical-align: middle;}
.main_review_note_quto {margin-bottom: 40px;text-align: center;}
.main_review_note_quto:before, .main_review_note_quto:after {display: block;font-family: 'jt-font';content: '\e90d';font-size: 13px;font-weight: 400;line-height: 1;letter-spacing: 0.05em;color: #666;}
.main_review_note_quto:before {margin-bottom: 22px;}
.main_review_note_quto:after {margin-top: 22px;transform: rotate(180deg);}
.main_review_note_quto b {display: block;font-size: 24px;font-weight: 400;letter-spacing: 0.05em;line-height: 1.33;color: #222;}
.main_review_note_quto p {margin-top: 12px;font-size: 16px;font-weight: 300;letter-spacing: 0.05em;line-height: 1.62;color: #666;}

.main_review_content .jt_btn {margin: 0 auto;}

.main_review_control {display: block;width: 100px;height: 164px;position: absolute;right: 142px;top: 144px;z-index: 2;}
.main_review_btn {width: 100%;height: 54px;position: relative;font-size: 0;text-align: center;cursor: pointer;}
.main_review_btn:before, .main_review_btn:after {position: absolute;top: 0;left: 0;right: 0;font-family: 'jt-font';font-weight: normal;font-size: 54px;text-align: center;color: #222;}
.main_review_btn:after {opacity: 0;}
.main_review_prev:after {transform: translateX(20px);}
.main_review_prev:before, .main_review_prev:after {content: '\e902';}
.main_review_next:after {transform: translateX(-20px);}
.main_review_next:before, .main_review_next:after {content: '\e903';}
.main_review_btn:hover:before {opacity: 0;transition: all .3s ease 0s;}
.main_review_prev:hover:before {transform: translateX(-20px);}
.main_review_next:hover:before {transform: translateX(20px);}
.main_review_btn:hover:after {opacity: 1;transform: translateX(0);transition: transform .3s ease .35s, opacity .5s ease .35s;}

.main_review_count {margin: 28px 0;font-size: 0;}
.main_review_count > span {display: inline-block;height: 50px;vertical-align: middle;position: relative;font-size: 50px;line-height: 1;font-weight: 300;text-align: center;color: #222;overflow: hidden;}
.main_review_count > span.main_review_count_line {width: 28px;}
.main_review_count > span.main_review_count_current,
.main_review_count > span.main_review_count_total {width: 36px;}
.main_review_count > span.main_review_count_current > i {display: block;width: 100%;position: absolute;left: 0;top: 0;font-style: normal;}
.main_review_count > span.main_review_count_current > i.next_el {opacity: 0;}