@charset "UTF-8";
@import url(common.css);

/* ------------------------------------------------------------------------- */
/* CSS Table of Contents
/* ------------------------------------------------------------------------- */
/*
1. Cover

2. Introduction

3. Model

4. Location

5. Factory

6. Process



/* ------------------------------------------------------------------------- */
/* 1. Cover
/* ------------------------------------------------------------------------- */
.cover {
  height: 65dvh; min-height: 780px; 
  padding: 80px 0;
  background-color: var(--gray-0);
  transition: height 0.5s ease, padding 0.3s ease;
}
.cover .inner {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 100px;
  height: 100%;
  transition: gap 0.3s ease;
}
.cover .sec_tit {font-size: 52px;}


/***** MediaQuery *****/
@media (max-width : 1024px) {
  .cover {
    min-height: 700px;
    padding: 70px 0;
  }
  .cover .inner {gap: 60px;}
  .cover .sec_tit {font-size: 44px;}
}

@media (max-width : 768px) {
  .cover {
    min-height: 600px; height: 80dvh;
    padding: 60px 0;
  }
  .cover .inner {gap: 32px;}
  .cover .sec_tit {font-size: 32px;}
}





/* ------------------------------------------------------------------------- */
/* 2. Introduction
/* ------------------------------------------------------------------------- */
.intro {
  display: flex; align-items: center; justify-content: center;
  min-height: 1080px; 
  padding: calc(50dvh - 250px) 0;
  margin-bottom: 100px;
  position: relative;
  transition: padding 0.3s ease, margin 0.3s ease;
}
.intro .sec_header {
  margin-bottom: 120px;
  position: relative; z-index: 10;
}
.intro .sec_tit {font-size: 52px; color: var(--gray-0);}
.intro .sec_cont {position: relative; z-index: 10;}
.intro_list {
  display: flex; gap: 24px;
  transition: gap 0.3s ease;
}
.intro_list li {
  width: 100%;
  padding: 36px 0;
  border-top: 1px solid rgba(255,255,255,0.24);
  color: var(--gray-0);
  transition: width 0.3s ease, padding 0.3s ease;
}
.intro_list li .tit {
  padding-top: 52px;
  margin-bottom: 12px;
  font-weight: 500; color: var(--gray-0);
  background-repeat: no-repeat; background-position: left top; background-size: 32px 32px;
}
.intro_list li:first-child .tit {background-image: url(../img/main/ico_main1.svg);}
.intro_list li:nth-child(2) .tit {background-image: url(../img/main/ico_main2.svg);}
.intro_list li:nth-child(3) .tit {background-image: url(../img/main/ico_main3.svg);}
.intro_list li:nth-child(4) .tit {background-image: url(../img/main/ico_main4.svg);}
.intro_bg {
  width: 100%; height: 100%;
  background-color: var(--gray-100);
  position: absolute; left: 0; top: 0;
}
.intro_bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.4;
}


/***** MediaQuery *****/
@media (max-width : 1280px) {
  .intro_list li .tit {font-size: 22px;}
  .intro_list li p span {display: none;}
}

@media (max-width : 1024px) {
  .intro {
    height: auto;
    padding: calc(50dvh - 300px) 0;
    margin-bottom: 60px;
  }
  .intro .sec_header {margin-bottom: 80px;}
  .intro .sec_tit {font-size: 44px;}
  .intro_list {flex-wrap: wrap; gap: 20px;}
  .intro_list li {
    width: calc(50% - 10px);
    padding: 32px 0;
  }
  .intro_list li .tit {
    margin-bottom: 8px;
    font-size: 20px;
  }
}

@media (max-width : 768px) {
  .intro {
    min-height: 900px;
    padding: 100px 0;
    margin-bottom: 54px;
  }
  .intro .sec_header {margin-bottom: 36px;}
  .intro .sec_tit {font-size: 32px;}
  .intro_list {gap: 10px;}
  .intro_list li {
    width: 100%;
    padding: 24px 0;
  }
  .intro_list li .tit {
    margin-bottom: 4px;
    font-size: 18px;
  }
}





/* ------------------------------------------------------------------------- */
/* 3. Model
/* ------------------------------------------------------------------------- */
.model {overflow: hidden;}
.model_list li {width: auto;}
.model_list li a {
  display: flex; flex-direction: column; gap: 24px;
  width: 100%;
  transition: gap 0.3s ease;
}
.model_list .img {
  width: 580px; height: auto;
  aspect-ratio: 29/18;
  position: relative;
  transition: width 0.3s ease, height 0.3s ease;
  overflow: hidden;
}
.model_list .img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.33, 1, 0.68, 1);
}
.model_list .txt {
  display: flex; flex-direction: column; gap: 16px;
  transition: gap 0.3s ease;
}
.model_list .txt .flexCenter {gap: 8px;}
.model_list .txt .tit {
  margin-bottom: 0;
  font-weight: 700;
}
.model_list .txt .desc {
  margin-top: -12px;
  color: var(--text-sub1);
  transition: margin 0.3s ease;
}
.model_list .txt .price {font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--text-main);}
.model_list .txt .price strong {
  display: inline-block;
  margin-right: 3px;
  font-weight: 700; font-size: 24px; vertical-align: -2px;
}
.model_list .txt .btn {width: fit-content;}

/* hover */
.model_list li:hover .img img {transform: scale(1.06);}


/***** MediaQuery *****/
@media (max-width : 1024px) {
  .model_list .img {width: 348px;}
  .model_list .txt {gap: 12px;}
  .model_list .txt .desc {margin-top: -8px;}
  .model_list li:hover .img img {transform: scale(1);}
}

@media (max-width : 768px) {
  .model_list li a {gap: 20px;}
  .model_list .img {width: 308px;}
  .model_list .txt .price strong {font-size: 18px; vertical-align: -1px;}
}





/* ------------------------------------------------------------------------- */
/* 4. Location
/* ------------------------------------------------------------------------- */
.location .sec_header {
  flex-direction: column; align-items: flex-start; gap: 36px;
  margin-bottom: 0;
}
.location .sec_header .btn {width: fit-content;}
.location .inner {display: flex; align-items: flex-start; justify-content: space-between; gap: 32px;}
.location .sec_cont {
  flex-shrink: 0;
  width: 70%; max-width: 660px;
  transition: width 0.3s ease, max-width 0.3s ease;
}
.location_map {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 400px;
  background-color: var(--gray-10);
  transition: height 0.3s ease;
}
.location_map iframe {width: 100%; height: 100%; border: 0;}


/***** MediaQuery *****/
@media (max-width : 1024px) {
  .location .sec_header {gap: 24px;}
  .location .sec_cont {width: 65%; max-width: 480px;}
  .location_map {height: 280px;}
}

@media (max-width : 768px) {
  .location .sec_header {
    gap: 16px;
    width: 100%;
  }
  .location .inner {flex-direction: column;}
  .location .sec_cont {width: 100%; max-width: 100%;}
  .location_map {
    height: auto; max-height: 400px;
    aspect-ratio: 3 / 2;
  }
}





/* ------------------------------------------------------------------------- */
/* 5. Factory
/* ------------------------------------------------------------------------- */
.factory {
  margin-bottom: 100px;
  transition: padding 0.3s ease, margin 0.3s ease;
}
.factory_list {
  display: flex; gap: 24px;
  transition: gap 0.3s ease;
}
.factory_list li {
  display: flex; flex-direction: column; gap: 24px;
  width: 100%; 
  transition: gap 0.3s ease;
}
.factory_list .img {
  width: 100%; height: auto; max-height: 400px;
  aspect-ratio: 3 / 2;
}
.factory_list .img img {
  width: 100%; height: 100%; max-height: 400px;
  object-fit: cover;
}
.factory_list .txt {display: flex; flex-direction: column; gap: 4px;}
.factory_list .txt .tit {
  margin-bottom: 0;
  font-weight: 700;
}


/***** MediaQuery *****/
@media (max-width : 1024px) {
  .factory {margin-bottom: 60px;}
  .factory_list {gap: 20px;}
}

@media (max-width : 768px) {
  .factory {margin-bottom: 54px;}
  .factory_list {flex-direction: column; gap: 48px;}
  .factory_list li {gap: 20px;}
}





/* ------------------------------------------------------------------------- */
/* 6. Process
/* ------------------------------------------------------------------------- */
.process {
  display: flex; align-items: center;
  padding: 186px 0;
  background: url(../img/main/process_bg.png) no-repeat center / cover;
  background-attachment: fixed;
  position: relative;
}
.process::before {content: "";
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.3);
  position: absolute; left: 0; top: 0;
}
.process .inner {position: relative; z-index: 10;}
.process .sec_tit {color: var(--gray-0);}


/***** MediaQuery *****/
@media (max-width : 1024px) {
  .process {background-attachment: initial;}
}

@media (max-width : 768px) {
  .process {
    min-height: 500px;
    padding: 134px 0;
  }
}