@charset "utf-8";
/* ERUSAM 메인 페이지 CSS - main.css */

/* 외부 CSS 불러오기 */
@import url(./reset.css);
@import url(./core.css);
/* 12그리드 CSS */
@import url(./grid_12_flex.css);
/* 공통 CSS */
@import url(./common.css);

/* 공사중 표시 */
/* body * {
    outline: 2px dashed #ccc;
} */

/***************** 메인 CSS *****************/

/***************** 2. 메인영역 *****************/

/* 공통 클래스  */
.tit {
  width: calc(100% / 3);
  height: 100vh;
  line-height: 100vh;
  background-color: #0000007e;
  color: #fff;
  text-align: center;
  font-size: 7rem;
  font-weight: normal;
}

/***************** 2-1. 배너영역 *****************/
.banner-part {
  height: 100vh;
}
/* 배너박스 */
.banner-box {
  position: relative;
  /* 부모자격 */

  /* 배너이미지크기 */
  height: 100%;
  /* 넘치는 배너 숨기기 */
  overflow: hidden;
}
/* 배너슬라이드 */
.banner-slide {
  /* 플렉스박스 */
  display: flex;
  /* 슬라이드 개수만큼 크기를 설정해준다! */
  width: 100%;
  /* 배너이미지크기 */
  height: 100%;
}
/* 배너 슬라이드 li */
.banner-slide li {
  position: relative;
  /* 부모자격 */
  /* 늘어나게 설정 */
  flex-shrink: 0;
  width: 100%;
  overflow: hidden;
}

/* 배너이미지 */
.banner-slide img {
  width: 100%;
  height: 100%;
  /* object-fit: cover
    일반 이미지를 배경처럼 처리해준다!
    비율에 맞게 박스를 가득 채움! */
  object-fit: cover;
  scale: 1.3;
  transition: 4s ease-in-out;
}
.banner-slide li.on img {
  scale: 1;
}

/* 배너타이틀 */
.banner-slide h2 {
  position: absolute;
  bottom: 18vh;
  left: 9.6vw;
  font-size: 50px;
  color: #fff;
  text-shadow: 2px 2px 2px #666;
  font-weight: 100;
}
.banner-slide h2 b {
  font-size: 60px;
}

/* 이동버튼 그룹 */
.abtn-grp {
  position: absolute;
  bottom: 11vh;
  width: 10vw;
  height: 9vh;
  display: flex;
  justify-content: space-between;
  left: 7.5%;
  /* outline: 1px solid red; */
}
/*이동버튼*/
.abtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /*Y축 중앙이동*/
}
.abtn img {
  width: 20px;
}

/*왼쪽버튼*/
.ab1 {
  left: 50px;
}

/*오른쪽버튼*/
.ab2 {
  left: 150px;
}

/***************** 2-2. product영역 *****************/
.product-part {
  position: relative;
  height: 100vh;
  background: url(../images/banner/product_bg.png) no-repeat center/cover;
}

.product-part .icon-box {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  right: 25vw;
  width: 10vw;
  aspect-ratio: 1.2;
  /* outline: 1px solid red; */
}
.product-part .icon-box li {
  position: absolute;
  top: -66%;
  left: 85%;
  translate: -50% 0;
  width: 180%;
  aspect-ratio: 0.9;
  background-color: rgba(6, 77, 120, 0.39);
  padding-top: 2vh;
  text-align: center;
  border-radius: 70px;
  box-sizing: border-box;
  transition: 0.4s;
}
.product-part .icon-box li:nth-child(1) {
  translate: -50% -300%;
  scale: 0.3;
  opacity: 0%;
}
.product-part .icon-box li:nth-child(2) {
  translate: -50% -100%;
  scale: 0.6;
  opacity: 0%;
}
.product-part .icon-box li:nth-child(3) {
  translate: -50% 0%;
}
.product-part .icon-box li:nth-child(4) {
  translate: -50% 100%;
  scale: 0.6;
  opacity: 0%;
}
/* 4번li 이후의 모든 li 디자인 */
.product-part .icon-box li:nth-child(4) ~ li {
  translate: -50% 300%;
  scale: 0.3;
  opacity: 0;
}
/* 4번li 이후의 모든 li 이미지 예외 디자인 */
.product-part .icon-box li.ex img {
  top: 35%;
  height: auto;
  width: 50%;
}
.product-part .icon-box img {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  /* width: 100%; */
  height: 40%;
  transition: 0.4s ease-in-out;
}
.btn-grp {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  right: 10vw;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* outline: 1px solid red */
}
/* Product 위아래 이동버튼 */
.btn-grp button {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #ffffff7b;
  border: none;
  font-size: 30px;
  color: #555;
  cursor: pointer;
}

/* 아이콘 텍스트 박스 */
.icon-txt-bx {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30%;
  /* outline: 1px solid red; */
}

/* 아이콘 타이틀 */
.product-part .icon-box li h2 {
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
  font-size: 1vw;
  color: #fff;
  text-shadow: 2px 2px 2px #666;
  opacity: 0;
  white-space: nowrap;
  /* 트랜지션 */
  transition: 0.8s 0.5s;
}
/* 아이콘 타이틀 설명 */
.product-part .icon-box li h3 {
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
  font-size: 1.5vw;
  color: #fff;
  text-shadow: 2px 2px 2px #666;
  opacity: 0;
  /* 트랜지션 */
  transition: 0.8s 0.8s;
}

.product-part .icon-box li:nth-child(3) img {
  top: 45%;
  left: 50%;
  translate: -50% -50%;
  width: 45%;
  height: auto;
}

.product-part .icon-box li:nth-child(3) h2 {
  bottom: 50%;
  opacity: 1;
}
.product-part .icon-box li:nth-child(3) h3 {
  bottom: 10%;
  opacity: 1;
}

/***************** 2-3. About Us 영역 *****************/
.aboutus-part {
  position: relative;
  /* 부모자격 */
  height: 100vh;

  background: url(../images/aboutus5.png) no-repeat right/cover;
}
.aboutus-part .icon-box {
  position: absolute;
  top: 56%;
  right: 28vw;
  translate: 0 -50%;
  width: 165px;
  height: 165px;
  /* outline: 1px dashed red; */
}
.aboutus-part .icon-box li {
  position: absolute;
  top: -25px;
  width: 100%;
  height: 100%;
}
.aboutus-part .icon-box li img {
  width: 100%;
  height: 100%;
}
.aboutus-part .icon-box li:nth-child(1) {
  translate: 0 -24vmin;
}
.aboutus-part .icon-box li:nth-child(2) {
  translate: 21vmin 0;
}
.aboutus-part .icon-box li:nth-child(3) {
  translate: 0 24vmin;
}
.aboutus-part .icon-box li:nth-child(4) {
  translate: -21vmin 0;
}

/* About us 아이콘박스 글자 */
.aboutus-part .icon-box li h4 {
  text-align: center;
  font-size: 2.5rem;
  color: #000;
  text-shadow: 2px 2px 2px #fff;
}
/***************** 2-4. 미리보기영역 *****************/
.view-part {
  height: 660px;
}
/***************** 2-5. 현장포토영역 *****************/
.real-part {
  height: 906px;
}
/***************** 2-6. 대표포스터영역 *****************/
.poster-part {
  height: 654px;
}
/***************** 2-7. 최신동영상영역 *****************/
.video-part {
  height: 409px;
}