@charset "utf-8";

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



/* **************************************** *
 * global
 * **************************************** */
.main_section {padding: 131px 0 120px;}

.main_section_title {font-size: 45px;font-weight: 500;letter-spacing: 0.2em;text-align: center;color: #222;text-transform: uppercase;}
.main_section_desc {margin-top: 22px;font-size: 16px;font-weight: 300;letter-spacing: 0.05em;line-height: 1.63;text-align: center;color: #666;}

.main_bg_wrap {padding-bottom: 540px;background: #f8f8f8;}

.main_table {display: table;width: 100%;}
.main_table_cell {display: table-cell;vertical-align: middle;}
.main_table_cell img {display: block;max-width: 100%;height: auto;}

.main_txt_demo > span {display: block;margin-bottom: 26px;font-size: 18px;font-weight: 500;letter-spacing: 0.1em;color: #666;}
.main_txt_demo > b {display: block;margin-left: -4px;font-size: 45px;font-weight: 400;letter-spacing: 0.1em;color: #222;}
.main_txt_demo > p {margin-top: 22px;margin-bottom: 24px;font-size: 16px;font-weight: 300;letter-spacing: 0.05em;line-height: 1.63;color: #666;}
.main_txt_demo > i {display: block;margin-bottom: 37px;font-size: 16px;font-weight: 300;letter-spacing: 0.05em;line-height: 1.63;font-style: normal;color: #666;}
.main_txt_demo > i > em {font-weight: 300;color: #222;}



/* **************************************** *
 * visual
 * **************************************** */
.main_visual {position: relative;width: 100%;height: 953px;}

.main_visual_slider {position: relative;width: 100%;height: 100%;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_slider .dis_slideshow_item{ display:none}
.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: 30px 192px 0;}
.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: #fff;}

.main_visual_autoplay {width: 19px;height: 19px;position: absolute;left: 159px;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 .main_visual_item_bg {background-image: url(../images/type-a/main-visual-01.jpg);}
.main_visual_item_02 .jt_full_video_poster {background-image: url(../images/type-a/main-visual-02.jpg);}
.main_visual_item_03 .main_visual_item_bg {background-image: url(../images/type-a/main-visual-03.jpg);}

/*
.main_page_a #dis_slideshow { position: absolute; top: 0;left: 0; width: 1903px; height: 953px; overflow:hidden }
.main_page_a .dis_slideshow_item,
#main_visual_video_poster{ opacity:0}
*/


/* **************************************** *
 * bset
 * **************************************** */
.main_bset_slider_wrap {margin-top: 53px;position: relative;}
.main_bset_slider {margin: 0 -24px;position: relative;}
.main_best_item {float: left;width: 25%;}
.main_best_item a {display: block;}
.main_best_item img {display: block;margin: 0 auto;height: auto;}
.main_best_txt {padding: 55px 23px;}
.main_best_txt b {display: block;margin-bottom: 16px;height: 2.66em;font-size: 24px;font-weight: 400;letter-spacing: 0.05em;line-height: 1.33;color: #222;}
.main_best_txt p {display: block;height: 3.26em;font-size: 16px;font-weight: 300;letter-spacing: 0.05em;line-height: 1.63;color: #666;}



/* **************************************** *
 * story
 * **************************************** */
.main_story.main_section {padding-bottom: 0;}

.main_story_wrap {width: 1340px;margin: 0 auto;position: relative;z-index: 2;}
.main_story_wrap .main_table_cell:first-child {width: 520px;}
.main_story_wrap .main_table_cell:last-child {width: calc(100% - 520px);padding-left: 128px;padding-bottom: 127px;}



/* **************************************** *
 * info
 * **************************************** */
.main_info {margin-top: -124px;position: relative;z-index: 1;}
.main_info > .wrap:after {content: '';display: table;clear: both;}

.main_info_box {float: left;height: 827px;position: relative;}
.main_info_box img {display: block;max-width: 100%;height: auto;}
.main_info_txt {position: absolute;bottom: 0;left: 0;right: 0;}
.main_info_txt b {display: block;margin-left: -4px;font-size: 36px;font-weight: 400;letter-spacing: 0.1em;color: #fff;}
.main_info_txt p {margin-top: 14px;font-size: 16px;font-weight: 400;letter-spacing: 0.05em;line-height: 1.63;color: #fff;}

.main_info_marine {width: 910px;}
.main_info_marine_video {position: absolute;top: 0;right: 0;left: 0;bottom: 0;overflow: hidden;z-index: 1;}
.main_info_marine .main_info_txt {padding: 112px 130px;z-index: 2;}
.main_info_design {width: calc(100% - 910px);}
.main_info_design .main_info_txt {padding: 125px 90px;background: rgba(0,122,136,0.9);}
.main_info_design .main_info_txt b {letter-spacing: 0.05em;}
.main_info_design .main_info_txt p {opacity: 0.5;}



/* **************************************** *
 * movie
 * **************************************** */
.main_movie_slider_wrap {position: relative;}
.main_movie_slider_wrap:after {content: '';display: table;clear: both;}

.main_movie_txt {float: left;width: calc(100% - 900px);padding-left: 130px;padding-right: 80px;padding-top: 106px;}
.main_movie_txt .main_txt_demo > span {margin-bottom: 19px;letter-spacing: 0.2em;}
.main_movie_txt .main_txt_demo > b {margin-left: -3px;font-size: 36px;line-height: 1.25;}
.main_movie_txt .main_txt_demo > p {margin-top: 12px;margin-bottom: 0;}

.main_movie_slider {float: right;width: 900px;}
.main_movie_img {position: relative;}
.main_movie_img img {display: block;max-width: 100%;height: auto;/*cursor: pointer;*/}
.main_movie_img:after {content: '';width: 25px;height: 30px;position: absolute;left: 70px;bottom: 56px;background: url(../images/layout/icon/icon-play.svg) no-repeat center center;background-size: cover;}
.main_movie_img:hover:after {animation: hoverbeat .5s ease-out;}

@keyframes hoverbeat {
   0% {
    transform: scale( 1);
   }
    50% {
    transform: scale( .8);
   }
    100% {
    transform: scale( 1);
   }
}

.main_movie_slider .slick-dots {margin-top: 0;position: absolute;left: -499px;bottom: 91px;}
.main_movie_slider .slick-dots li {width: 90px;height: 3px;margin: 0 10px;background: #ddd;}
.main_movie_slider .slick-dots li:after {width: 0px;height: 7px;top: 0;left: 0;background: var(--color-primary);border: none;border-radius: 0;transform: none;transition: width 150ms;}
.main_movie_slider .slick-dots li button {display: none;}
.main_movie_slider .slick-dots li.slick-active:after {width: 100%;transition: width 300ms;}



/* **************************************** *
 * now
 * **************************************** */
.main_now .main_table_cell:first-child {width: 962px;}
.main_now .main_table_cell:last-child {width: calc(100% - 962px);padding-left: 76px;}
.main_now .main_txt_demo > span {margin-bottom: 19px;letter-spacing: 0.2em;}
.main_now .main_txt_demo > b {margin-left: 0px;font-size: 36px;line-height: 1.25;}
.main_now .main_txt_demo > p {margin-top: 12px;margin-bottom: 20px;}



/* **************************************** *
 * product
 * **************************************** */
.main_prod {margin-top: -410px;position: relative;}

.main_prod_type {padding: 40px 0 34px;font-size: 0;text-align: center;}
.main_prod_type > a {display: inline-block;position: relative;font-size: 26px;font-weight: 500;letter-spacing: 0.2em;color: #666;}
.main_prod_type > a:before {display: block;position: absolute;top: 2px;font-family: 'jt-font';content: '\e909';font-size: 24px;line-height: 1;font-weight: normal;}
.main_prod_type > a:after {content: '';display: block;width: 1px;height: 20px;position: absolute;right: 0;top: 50%;margin-top: -11px;background: #ddd;}
.main_prod_type > a:first-child {padding-left: 20px;padding-right: 95px;}
.main_prod_type > a:first-child:before {right: 47px;}
.main_prod_type > a:last-child {padding-left: 60px;padding-right: 20px;}
.main_prod_type > a:last-child:before {right: -25px;}
.main_prod_type > a:last-child:after {display: none;}
.main_prod_type > a:hover {color: var(--color-primary);}

.main_prod_slider_wrap {position: relative;}
.main_prod_slider {max-width: 1340px;margin: 0 auto;}
.main_prod_item img {display: block;max-width: 100%;height: auto;margin: 0 auto;}

.main_prod_control {display: block;width: 100%;height: 54px;position: absolute;left: 0;top: 57%;}
.main_prod_btn {width: 54px;height: 100%;position: absolute;font-size: 0;cursor: pointer;}
.main_prod_btn:before, .main_prod_btn:after {position: absolute;top: 0;left: 0;right: 0;font-family: 'jt-font';font-weight: normal;font-size: 54px;line-height: 1;text-align: center;color: #000;}
.main_prod_btn:after {opacity: 0;}
.main_prod_prev {left: 0;}
.main_prod_prev:after {transform: translateX(20px);}
.main_prod_prev:before, .main_prod_prev:after {content: '\e902';}
.main_prod_next {right: 0;}
.main_prod_next:after {transform: translateX(-20px);}
.main_prod_next:before, .main_prod_next:after {content: '\e903';}
.main_prod_btn:hover:before {opacity: 0;transition: all .3s ease 0s;}
.main_prod_prev:hover:before {transform: translateX(-20px);}
.main_prod_next:hover:before {transform: translateX(20px);}
.main_prod_btn:hover:after {opacity: 1;transform: translateX(0);transition: transform .3s ease .35s, opacity .5s ease .35s;}