*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root{
  /* display */
  --display-height: calc(100vh - (8.5rem / 1.8));

  /* font */
  --Xl-header-font-size: clamp(1.5rem, 2.5vw, 3rem);
  --Xl-des-font-size: clamp(1rem, 1.5vw, 1.55rem);
  --Xl-button-font-size: clamp(0.85rem, 0.95vw, 1.85rem);

  --L-header-font-size: clamp(1.5rem, 2.25vw, 2.5rem);
  --L-des-font-size: clamp(0.75rem, 1.25vw, 1.5rem);
  --L-button-font-size: clamp(0.85rem, 0.95vw, 1.85rem);

  --M-header-font-size: clamp(1.25rem, 1.75vw, 2.25rem);
  --M-des-font-size: clamp(0.75rem, 1.25vw, 1.5rem);
  --M-button-font-size: clamp(0.85rem, 0.95vw, 1.85rem);

  --S-header-font-size: clamp(1rem, 1.5vw, 2rem);
  --S-des-font-size: clamp(0.5rem, 1vw, 1.25rem);

  --main-font: "Nanum Myeongjo", serif;
  --des-font: "Urbanist", sans-serif;

  --light-font-w: 300;
  --normal-font-w: 500;
  --bold-font-w: 700;

  /* color */
  --whiteS: whitesmoke;
  --darkBlue0: #000845;
  --darkBlue1: #030b3f;
  --darkBlue2: #00020d;
  --lightGrey0: #ededed;
  --lightGrey1: #c6c6c6;
  --lightGrey2: #a2a2a2;
  --black: #000;
  --gladient-darkblue: linear-gradient(90deg, #030b3f 40%, #010629 60%, #00020d 100%);
}

::-webkit-scrollbar {
  width: 5px; /* Width of the scrollbar */
  height: 5px; /* Height of the horizontal scrollbar */
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--whiteS); /* Background of the scrollbar track */
  border-radius: 10px;  /* Rounded corners of the track */
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: var(--darkBlue0); /* Color of the scrollbar handle */
  border-radius: 10px;     /* Rounded corners of the handle */
  /* border: 2px solid #f1f1f1;  */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--darkBlue1); /* Darker color when hovered */
  /* border: solid var(--whiteS) 2px; */
}

main{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-top: calc(8.5rem / 1.8);
}

.mainContainer{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

section.supcon{
  width: 100%;
  height: var(--display-height);
}

.supcon .container{
  width: 100%;
  height: 100%;
}

video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section.missionVision{
  width: 100%;
  height: var(--display-height);
  background-color: var(--whiteS);
  color: var(--whiteS);
}

.mVContainer{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 2fr 1.25fr;
  grid-template-rows: 1fr;
  grid-template-rows: var(--display-height);
}

.gridImg{
  width: 100%;
  height: 100%;
  grid-column: 2/3;
  grid-row: 1/2;
}

.imgCon{
  width: 100%;
  height: 100%;
}

.imgShadow{
  display: none;
}

img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

article.gridArticle{
  background: var(--gladient-darkblue);
  padding-left: 4vw;
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.articleCon{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  width: 100%;
}

section.missionVision .header,
section.product .header,
section.service .header,
section.pressureGauge .header{
  font-size: var(--Xl-header-font-size);
  margin-bottom: 2.5vw;
  font-family: var(--main-font);
  h2{
    font-weight: var(--normal-font-w) !important;
  } 
}

section.missionVision .header,
section.product .header,
section.service .header{
  width: max(65%, 50vw);
}

section.missionVision .description,
section.product .description,
section.service .description,
section.pressureGauge .description{
  font-size: var(--L-des-font-size);
  margin-bottom: 2vw;
  font-family: var(--des-font);
  /* display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden; */
  p{
    font-weight: var(--light-font-w) !important;
  }
}

section.product .description,
section.service .description{
  width: max(65%, 42vw);
}

section.missionVision .description,
section.service .description{
  width: max(70%, 50vw);
}

section.missionVision button,
section.product button,
section.service button,
section.pressureGauge button{
  cursor: pointer;
  font-size: var(--Xl-button-font-size);
  color: var(--whiteS);
  border-radius: 0.25rem;
  /* border-radius: 3rem !important; */
  padding: 0.5rem 1.5rem;
  background-color: transparent;
  font-family: var(--des-font);
  font-weight: var(--light-font-w) !important;
  a{
    text-decoration: none;
    color: var(--whiteS);
  }
}

section.missionVision button,
section.product button,
section.service button{
  border: solid whitesmoke 2.5px !important; 
}

section.product{
  width: 100%;
  background-color: var(--whiteS);
  /* height: fit-content; */
  height: var(--display-height);
  padding: 0 3vw;
  /* border: solid red 3px; */
}

.product img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product .productContainer{
  width: 100%;
  height: 100%;
  /* border: solid red 3px; */
  padding: 1vw;
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  grid-template-rows: 0.5fr 1.25fr 0.25fr 1fr;
}

#mainHeader{
  display: none;
  align-items: center;
  /* padding-left: 3rem; */
  grid-column: 1/2;
  /* border: solid red 3px; */
  grid-row: 1/2;
  width: 100%;
  height: 100%;
  height: 8rem;
  font-family: var(--main-font);
  font-size: var(--Xl-header-font-size);
  color: var(--darkBlue0);
  h2{
    font-weight: var(--normal-font-w) !important;
  }
}

.productArticle{
  grid-column: 1/2;
  grid-row: 1/3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* padding-left: 3rem; */
  /* border: solid red 3px; */
  height: 100%;
  position: inherit;
  z-index: 222;
}

section.product button,
section.service button{
  background-color: var(--darkBlue1);
  border-color: var(--darkBlue1) !important;
  border-radius: 0.25rem;
  a{
    font-size: var(--Xl-button-font-size);
    text-decoration: none;
    color: var(--whiteS);
  }
}

.productBox.active{
  display: block;
  width: 100%;
  height: 100%;
}

.productBox{
  display: none;
  width: 100%;
  height: 100%;
}

.productImgBox{
  grid-column: 2/3;
  grid-row: 1/3;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  /* border: solid red 3px; */
  align-items: center;
}

.productImgBox i{
  border-radius: 50%;
  padding: 0.25rem;
  color: var(--darkBlue1);
  font-size: var(--L-header-font-size);
}

.productImgBox i:hover{
  background-color: rgb(151, 151, 151);
  color: whitesmoke;
}

.productImgBox img{
  width: auto;
}

.imgItem{
  width: 100%;
  height: 100%;
  display: none;
}

.imgItem.active{
  display: flex;
  width: auto;
}

.indicator{
  grid-column: 1/3;
  grid-row: 3/4;
  height: 5rem;
  width: 100%;
}

.indicatorContainer{
  display: flex;
  gap: 1rem;
  height: 100%;
  justify-content: center;
  align-items: center;
  li{
    list-style: none;
    background-color: var(--darkBlue1);
    width: 1.5rem;
    height: 0.175rem;
    border-radius: 2rem;
    opacity: 0.2;
    transition: 0.3s all ease;
  }
}

.indicator li.active{
  opacity: 1;
}

.thumbnail{
  grid-column: 1/3;
  grid-row: 4/5;
  width: 100%;
  height: 100%;
  display: flex;
  /* border: solid red 3px; */
  padding: 0.15vw;
}

section.product .thumbnail .description{
  font-size: var(--M-des-font-size);
} 

.thumbnailContainer{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  padding: 0.25vw;
  overflow: auto;
  /* flex-wrap: wrap; */
  /* border: solid red 3px; */
}

.thumbItem{
  min-width: 12rem;
  height: 8rem;
  border-radius: 1rem;
  cursor: pointer;
  padding: 0.35rem;
  transition: all 0.3s ease;
  border: none;
  img{
    padding: 0.5rem;
    margin-bottom: 0.25rem;
    transition: all 0.3s ease;
    border-radius: 0.75rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
}

.thumbItem:last-child{
  img{
    padding: 0;
  }
}

.thumbItem.active {
  border: solid var(--darkBlue1) 3.5px;
}

.thumbItem img:hover{
  scale: 102%;
  img{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 30px 0 rgba(0, 0, 0, 0.19);
  }
} 

section.service{
  height: var(--display-height);
  width: 100%;
  /* border: solid red 3px; */
  button{
    background-color: var(--darkBlue1);
    border-radius: 2rem;
  }
}

.serviceContainer{
  width: 100%;
  height: 100%;
  /* border: solid red 3px; */
  display: flex;
  position: relative;
  overflow: hidden;
}

.list{
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  transition: all ease .5s;
}

.imgSlide{
  width: 100vw;
  height: 100%;
}

.imgSlide img{
  width: 100vw;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

section.service .articleCon{
  width: 70%;
  height: fit-content;
  position: absolute;
  /* border: solid red 3px; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--whiteS);
}

.buttons{
  display: flex;
  /* border: solid red 3px; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  justify-content: space-between;
  display: none;
}

i#prev,
i#next{
  border: none;
  background-color: var(--whiteS);
  color: var(--darkBlue1);
  padding: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-family: var(--des-font);
  font-size: var(--Xl-des-font-size);
  font-weight: var(--normal-font-w) !important;
}

i#prev:hover,
i#next:hover{
  scale: 110%;
}

.indicator2 .indicatorContainer{
  display: flex;
  position: absolute;
  bottom: 0;
  margin-bottom: 5rem;
  gap: 2.5rem;
  /* border: solid red 3px; */
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
  height: fit-content;
  justify-content: center;
  align-items: center;
  display: none;
}

.indicator2 li{
  list-style: none;
  background-color  : var(--whiteS);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 2rem;
  transition: 0.3s all ease;
  opacity: 1;
}

.indicator2 li.active{
  width: 2.5rem;
}

@media screen and (max-width: 1024px){
  .mVContainer{
    grid-template-columns: 1fr !important;
    width: 100%;
  }
  .gridImg{
    grid-column: 1/2;
    width: 100%;
    position: relative !important;
    /* border: solid red 3px; */
  }
  .imgShadow{
    top: 0;
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.352);
    /* border: solid red 3px; */
  }
  .gridArticle{
    grid-column: 1/2;
    padding: 0 !important;
    z-index: 222;
    background: transparent !important;
    /* border: solid red 3px; */
  }
  section.missionVision .articleCon{
    align-items: center;
    justify-content: flex-end !important;
    padding-bottom: 2rem;
  }
  section.missionVision .header,
  section.product .header{
    text-align: center;
  }
  section.missionVision .description,
  section.product .description{
    text-align: center;
  }


  .product .productContainer{
    display: grid;
    height: 100%;
    grid-template-columns: 1fr !important;
    grid-template-rows: 0.15fr 0.5fr 0.25fr 0.25fr 0.5fr 0.15fr!important;
  }

  section.product{
    padding: 0;
    height: 100% !important;
  }
  
  #mainHeader{
    grid-column: 1/2;
    grid-row: 2/3;
    /* height: 8rem; */
    justify-content: center;
    padding: 0;
    display: flex;
    /* border: solid red 3px; */
  }

  .productImgBox{
    grid-column: 1/2;
    /* border: solid red 3px; */
    grid-row: 3/4;
    width: auto;
    /* height: 50vw; */
    height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .indicator{
    grid-column: 1/2;
    grid-row: 4/5;
  }

  .productArticle{
    grid-column: 1/2;
    grid-row: 5/6;
    padding: 0;
  }
  
  .productBox{
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .productBox.active{
    display: flex;
  }

  .thumbnail{
    grid-column: 1/2;
    grid-row: 2/3;
    height: 50vw;
    width: 100%;
    display: none;
  }

  .thumbItem{
    width: 100%;
    height: 100%;
  }F

  section.service .articleCon{
    align-items: center;
    h2{
      text-align: center; 
    }
  }
  
}