@import url(../css/common/root.css);
@import url(../css/common/fonts.css);
@import url(../css/common/reset.css);
@import url(../css/common/header.css);
@import url(../css/common/footer.css);

/* *******************************************************
 * 파일이름 : index.css
 * 설명 : 메인Index 공통 CSS
 * 업데이트 : 2023-01-16
 ******************************************************** */

/* *********************
 * 설명: main wrap
 ************************ */
#wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.m-contents {
  width: 100%;
  height: 100%;
}

/* *********************
 * 설명: main : 공통
 ************************ */
.section {
  position: relative;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  justify-content: end;
}

.section > * {
  width: 100%;
  height: 100%;
  justify-content: end;
}

#pagepiling {
  width: 100%;
  height: 100%;
}

/* *********************
 * 설명: Section_1 메인
 ************************ */

.ag-1 .visual {
  position: relative;
  width: 100%;
  height: 100%;
  scroll-snap-type: x mandatory;
}

.ag-1 .visual .item {
  width: 100%;
  height: 100%;
}

.ag-1 .visual .item .v-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ag-1 .visual .item .v-box > img {
  display: block;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
}

html[data-fullscreen-mode="Y"] .ag-1 .visual .item .v-box > img {
  height: 100vh !important;
}

.ag-1 .visual .item .v-box .m-video {
  width: 100%;
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  object-fit: cover;
}

html[data-fullscreen-mode="Y"] .ag-1 .visual .item .v-box .m-video {
  height: 100vh !important;
}

.ag-1 .visual .item .v-box .txt-box {
  position: absolute;
  top: 50vh;
  top: calc(var(--vh, 1vh) * 50);
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: var(--bigTxt);
  width: 90%;
  font-family: var(--suit-500);
  max-width: var(--maxWid);
}

.ag-1 .visual .item .v-box .txt-box p {
  line-height: 1.5;
}
.ag-1 .visual .item .v-box .txt-box .small {
  color: #ff8000;
  font-size: var(--smallTxt);
  letter-spacing: -0.5px;
  font-weight: bold;
  font-family: var(--suit-300);
}

.ag-1 .scrBox {
  position: absolute;
  bottom: 5vh;
  bottom: calc(var(--vh, 1vh) * 5);
  left: 50%;
  transform: translateX(-50%);
}
.ag-1 .iconmouse {
  z-index: 1;
  width: 20px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 20px;
}

/* --- 스크롤아이콘 애니메이션 --- */

@keyframes Mouse-act {
  0% {
    transform: translateY(5px);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(5px);
  }
}
.ag-1 .iconmouse::before {
  content: "SCROLL";
  display: block;
  position: absolute;
  top: -25px;
  left: -60%;
  width: 60px;
  font-size: 0.8rem;
  color: #fff;
  letter-spacing: 1px;
  font-weight: 600;
  opacity: 0.5;
}
.ag-1 .iconmouse .ball {
  position: absolute;
  top: 8px;
  left: 10px;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  animation: Mouse-act 1s ease-out infinite;
}

/* *********************
 * 설명: Section_2,3,4,5 공통
 ************************ */

.m-container {
  width: calc(100% - 4rem);
  height: calc(100% - var(--headerHeight) - 2rem);
  max-width: var(--maxWid);
  margin: 0 auto;
  padding: 0 2rem;
}

.m-container > .fl-col {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.ag-2,
.ag-3,
.ag-4 {
  position: relative;
  overflow: hidden;
}

.ani {
  position: absolute;
  opacity: 0.6;
  z-index: -1;
}

.color {
  color: var(--main-color);
}

/* *********************
 * 설명: Section_2, Section4
 ************************ */
.m-container {
  justify-content: center;
}
.m-container .frcon {
  width: 100%;
  max-width: var(--maxWid);
  height: 100%;
  justify-content: center;
  align-items: center;
}
.m-container .frcon .one {
  width: 55%;
}

.m-container .frcon .one .title {
  width: 100%;
  font-size: var(--bigTxt);
  font-family: var(--suit-500);
  display: inline-block;
  word-break: keep-all;
}

.m-container .frcon .one .txtCont {
  font-size: calc(var(--bigTxt) - 5px);
  font-family: var(--suit-100);
  padding-top: 0.2rem;
  width: 100%;
  display: inline-block;
  word-break: keep-all;
}

.m-container .frcon .two {
  position: relative;
  width: 65%;
  height: 75%;
}

.m-container .frcon .two .animationItem {
  width: 100%;
  height: 100%;
  overflow: visible !important;
}

.m-container .frcon .two .ani-box {
  position: relative;
  width: 100%;
  height: 100%;
}

.m-container .frcon .two .ani-box img {
  position: absolute;
}

/* *********************
 * 설명: 버튼공통
 ************************ */
@keyframes moveUp {
  0% {
    transform: translate(-50%, -50%);
  }

  50% {
    transform: translate(-50%, -35%);
  }

  100% {
    transform: translate(-50%, -50%);
  }
}

.about-btn {
  width: 100%;
  margin-top: 3rem;
}
.about-btn a {
  position: relative;
  display: block;
  width: 130px;
  height: 100px;
}

.about-btn a::after {
  content: "View More";
  position: absolute;
  color: #fff;
  white-space: nowrap;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--suit-400);
  animation: moveUp 1s ease-out infinite;
}
.about-btn a:hover::after {
  color: #ff8000;
  top: 50%;
  font-family: var(--suit-500);
  text-decoration: underline;
}

.about-btn svg {
  position: absolute;
  overflow: visible;
}

.about-btn svg .hover-1,
.about-btn svg .hover-2 {
  transition: all 0.4s ease-in-out;
}

.about-btn a:hover svg .hover-1 {
  fill: rgba(255, 128, 0, 0.2);
  transform: rotate(-15deg) translateX(-10px) translateY(20px);
  transition: all 0.28s ease-in-out;
}

.about-btn a:hover svg .hover-2 {
  transition: all 0.28s ease-in-out;
  transform: rotate(20deg) translateX(20px) translateY(-20px);
  opacity: 0.5;
}

/* *********************
 * 설명: Section_2 회사소개
 ************************ */
@keyframes robot1 {
  0% {
    transform: translateX(0px);
  }

  50% {
    transform: translateX(-10px);
  }

  100% {
    transform: translateX(0px);
  }
}

@keyframes robot2 {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.ag-2 .ind-1 {
  height:100%;
  top: 0;
  left: 0;
}

.ag-2 .ind-1 > img {
    display: block;
    height: 100%;
}

.ag-2 .ind-2 {
  top: 20%;
  left: auto;
  right: 12%;
}

.ag-2 .frcon .two .ani-box .sect_1 {
  bottom: 0;
  top: auto;
  left: 0;
  width: 100%;
  z-index: 1 !important;
  animation: robot1 4s ease-in-out infinite;
}

.ag-2 .frcon .two .ani-box .sect_2 {
  bottom: 3.85rem;
  left: -1%;
  width: 30%;
  animation: robot1 3s ease-in-out infinite;
  z-index: -1;
}

.ag-2 .frcon .two .ani-box .sect_3 {
  right: 20px;
  bottom: 12rem;
  top: auto;
  width: 26%;
  animation: robot2 3s ease-in-out infinite;
  z-index: -1;
}
.ag-2 .frcon .two .ani-box .sect_4 {
  bottom: 9rem;
  left: auto;
  right: 18%;
  width: 50%;
  animation: rotate 12s linear infinite;
  opacity: 0.7;
  z-index: -2;
}

/* *********************
 * 설명: Section_4 뉴스
 ************************ */

@keyframes down {
  0% {
    transform: translateY(5px);
  }

  50% {
    transform: translateY(15px);
  }

  100% {
    transform: translateY(5px);
  }
}

.ag-4 .ind-1 {
  bottom: 0;
  left: 0;
}

.ag-4 .ind-2 {
  bottom: 0;
  right: 0;
}

.ag-4 .frcon .two .ani-box .sect_1 {
  top: 45%;
  left: -10%;
  z-index: 1;
}

.ag-4 .frcon .two .ani-box .sect_2 {
  top: 45%;
  right: 0%;
  z-index: 1;
}

.ag-4 .frcon .two .ani-box .sect_3 {
  bottom: 20%;
  left: 10%;
  animation: down 3s ease-in-out infinite;
}

/* *********************
 * 설명: Section_3 서비스
 ************************ */
.ag-3 {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../images/index/service.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.ag-3 .i-service {
  position: relative;
  width: 100%;
  height: 100%;
}
.ag-3 .i-service .title {
  position: absolute;
  top: 20%;
  left: auto;
  width: 100%;
  color: #fff;
  display: inline-block;
  text-align: center;
  font-size: var(--bigTxt);
}
.ag-3 .i-service .s-box-pc {
  width: 100%;
  height: 100%;
  display: block;
}
.ag-3 .i-service .s-box-mb {
  display: none;
}

.ag-3 .i-service .s-box-pc .f-box {
  width: 100%;
  height: 100%;
}

.ag-3 .i-service .title .color {
  font-family: var(--suit-500);
}
.ag-3 .i-service .serv {
  width: calc(100% / 4);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  justify-content: center;
  align-items: center;
}

.ag-3 .i-service .serv .frcon {
  width: 100%;
  justify-content: center;
  align-items: center;
  padding-top: 3rem;
}
.ag-3 .i-service .tit {
  color: #ffc284;
  font-size: var(--midTxt);
  display: inline-block;
  width: 150px;
  text-align: center;
  font-family: var(--suit-500);
}

.ag-3 .i-service .icon {
  padding: 4rem 0;
}
.ag-3 .i-service .txt {
  text-align: center;
}

.ag-3 .about-btn {
  position: absolute;
  width: auto;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
}

.ag-3 .about-btn:hover a::after {
  color: #fff;
}
/* *********************
 * 설명: Section_5 문의
 ************************ */
.ag-5 {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../images/index/contact.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.ag-5 .m-container {
  justify-content: center;
}
.ag-5 .ctact-box {
  width: 100%;
  height: 100%;
  padding-top: var(--headerHeight);
  max-width: var(--maxWid);
  margin: 0 auto;
  justify-content: center;
  color: #fff;
}
.ag-5 .ctact-box .title {
  font-size: var(--bigTxt);
  font-family: var(--suit-500);
  padding-left: 3rem;
}
.ag-5 .ctact-box .title div:nth-child(2) {
  font-family: var(--suit-100);
}
.ag-5 .ctact-box .ctact-box-2 {
  width: 100%;
}
.ag-5 .ctact-box .ctact-box-2 .ct {
  position: relative;
  width: 50%;
  margin-top: 5rem;
  padding: 2rem 3rem;
  cursor: pointer;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.ag-5 .ctact-box .ctact-box-2 .ct:last-child {
  border-right: 0px;
}

.ag-5 .ctact-box .ctact-box-2 .ct:hover {
  border-radius: 30px;
  background: rgba(255, 128, 0, 0.7);
  transition: all 1s;
  width: 70%;
}

.ag-5 .ctact-box .ctact-box-2:hover .ct {
  border-right: 0px !important;
}
.ag-5 .ctact-box .ctact-box-2 .ct .tit {
  font-size: var(--midTxt);
  font-family: var(--suit-500);
}
.ag-5 .ctact-box .ctact-box-2 .ct .txt {
  font-size: var(--midTxt);
  font-family: var(--suit-100);
  padding: 1.5rem 0 3rem;
}

.ag-5 .ctact-box .ctact-box-2 .ct .butt {
  width: 100px;
  height: 36px;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 35px;
  transition: all 1s;
}
.ag-5 .ctact-box .ctact-box-2 .ct:hover .butt {
  width: 150px;
}
.ag-5 .ctact-box .ctact-box-2 .ct .butt {
  justify-content: center;
  align-items: center;
}

.ag-5 .ctact-box .ctact-box-2 .ct .butt img {
  width: 40px;
}

/* *********************
 * 설명: 애니메이션 동작 감소
 ************************ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: smooth;
  }
  .ani {
    animation: none;
  }
}
/* Wide Screen Desktop (해상도 1440px) */
@media screen and (max-width: 1440px) {
  /* *********************
 * 설명: Section_2, Section_4
 ************************ */
  .m-container .frcon {
    width: 90%;
    max-width: var(--maxWid);
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  /* *********************
 * 설명: Section_1 메인
 ************************ */
  .ag-1 .visual .item .v-box .txt-box {
    max-width: inherit;
  }
  /* *********************
 * 설명: Section_5 문의
 ************************ */
  .ag-5 .ctact-box {
    width: 90%;
  }
}
/* Desktop (해상도 1280px) */
@media screen and (max-width: 1280px) {
  /* *********************
 * 설명: Section_2 회사소개
 ************************ */
  .ag-2 .frcon .two .ani-box .sect_2 {
    bottom: 2.9rem;
  }
  .ag-2 .frcon .two .ani-box .sect_3 {
    bottom: 9rem;
  }
  /* *********************
 * 설명: Section_5 문의
 ************************ */
  .ag-5 .ctact-box {
    width: 90%;
  }
}
/* PC (해상도 800px ~ 1024px)*/
@media screen and (max-width: 1024px) {
  /* *********************
 * 설명: Section_1 메인
 ************************ */
  /* 문구 */
  .ag-1 .visual .item .v-box .txt-box {
    text-align: center;
    top: calc(var(--vh, 1vh) * 40);
  }
  .ag-1 .visual .item .v-box .txt-box p {
    word-break: break-all;
  }
  /* 스크롤 */
  .ag-1 .scrBox {
    position: absolute;
    bottom: 10vh;
    bottom: calc(var(--vh, 1vh) * 10);
    left: 50%;
    transform: translateX(-50%);
  }
  /* *********************
 * 설명: Section_2 , Section_4
 ************************ */
  .m-container .frcon .one .txtCont {
    font-size: calc(var(--bigTxt) - 10px);
  }
  .m-container .frcon .two .ani-box {
    position: relative;
    width: 100%;
    height: 80%;
  }
  /* *********************
 * 설명: Section_4 뉴스
 ************************ */
  .ag-4 .frcon .two .ani-box .sect_1 {
    left: -25%;
  }

  .ag-4 .frcon .two .ani-box .sect_2 {
    right: -10%;
  }

  .ag-4 .frcon .two .ani-box .sect_3 {
    left: -10%;
  }
  /* *********************
 * 설명: Section_5 문의
 ************************ */
  .ag-5 .cont-box {
    width: 80%;
  }
}
/* 태블릿, 모바일 가로 (해상도 768px ~ 830px)*/
@media screen and (max-width: 830px) {
  /* *********************
 * 설명: 버튼
 ************************ */
  .about-btn svg {
    position: absolute;
    overflow: visible;
    width: 108px;
    height: 65px;
  }
  .about-btn svg:nth-of-type(2) {
    height: 76px;
  }
  .about-btn a {
    width: 105px;
    height: 80px;
  }
  .about-btn a::after {
    content: "View More";
    position: absolute;
    color: #fff;
    white-space: nowrap;
    top: 42%;
    left: 48%;
    font-size: 14px;
    transform: translate(-50%, -50%);
    font-family: var(--suit-400);
    animation: moveUp 1s ease-out infinite;
  }
  /* *********************
 * 설명: Section_1 메인
 ************************ */
  .ag-1 .visual .item .v-box .txt-box {
    font-size: 2.8rem;
  }
  /* *********************
 * 설명: Section_2 회사소개
 ************************ */
  .ag-2 .frcon .two .ani-box .sect_4 {
    bottom: 35%;
    width: 45%;
  }
  /* *********************
 * 설명: Section_2 , Section_4
 ************************ */
  .m-container > .fl-col {
    justify-content: start;
  }
  .m-container .frcon {
    height: 100%;
    /* height: 75vh;
    height: calc(var(--vh, 1vh) * 75); */
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    gap: 0rem;
  }

  .m-container .frcon .one {
    width: 100%;
    height: 30%;
    justify-content: space-evenly;
  }
  .m-container .frcon .two {
    width: 85%;
    height: 60%;
  }
  .m-container .frcon .one > div:nth-child(1) {
    text-align: center;
  }
  .about-btn {
    width: 100%;
    margin-top: 0rem;
  }
  .about-btn a {
    margin: 0 auto;
  }
  /* *********************
 * 설명: Section_3 서비스
 ************************ */
  .ag-3 .i-service .s-box-pc {
    display: none;
  }
  .ag-3 .i-service .s-box-mb {
    width: 100%;
    height: 100%;
    display: block;
  }
  .ag-3 .i-service .title {
    top: 13%;
  }
  .ag-3 .i-service .s-box-mb .f-box {
    width: 100%;
    height: 100%;
    justify-content: center;
  }
  .ag-3 .i-service .s-box-mb .f-box .jus-mid {
    width: 100%;
    height: 55%;
    padding-top: 2rem;
  }
  .ag-3 .i-service .f-box .jus-mid .serv {
    width: 100%;
    height: calc(100% / 4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 0px;
    color: #fff;
    justify-content: center;
    align-items: center;
  }
  .ag-3 .i-service .f-box .jus-mid .serv:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
  }
  .ag-3 .i-service .serv .frcon {
    padding-top: 0rem;
    width: 55%;
    justify-content: space-between;
  }
  .ag-3 .i-service .icon {
    padding: 0rem 0;
    display: inline-block;
    width: 10%;
    text-align: center;
  }
  .ag-3 .i-service .icon img {
    display: block;
    width: 100%;
  }
  .ag-3 .i-service .serv:nth-child(2) .icon img {
    display: block;
    width: 65%;
    margin: 0 auto;
  }

  .ag-3 .i-service .tit {
    text-align: center;
  }
  .ag-3 .i-service .txt {
    width: 45%;
    text-align: left;
  }
  .ag-3 .about-btn {
    bottom: 5%;
  }

  /* *********************
 * 설명: Section_4 뉴스
 ************************ */
  .m-container .frcon.news .two {
    width: 75%;
  }

  .ag-4 .frcon .two .ani-box .sect_1 {
    top: 40%;
    left: -20%;
    width: 50%;
  }

  .ag-4 .frcon .two .ani-box .sect_2 {
    top: 40%;
    right: -25%;
    width: 50%;
  }
  .ag-4 .frcon .two .ani-box .sect_3 {
    left: 0%;
    width: 100%;
  }
}
/* 테블릿 세로 (해상도 600px ~ 767px)*/
@media screen and (max-width: 768px) {
  /* *********************
 * 설명: 버튼
 ************************ */
  .about-btn a::after {
    left: 48%;
  }
  /* *********************
 * 설명: 사이드메뉴
 ************************ */
  .menuBox .sideTit {
    font-size: 2rem;
    margin: 3rem 0;
    display: none;
  }

  /* *********************
 * 설명: Section_3
 ************************ */
  .ag-3 .i-service .serv .frcon {
    padding-top: 0rem;
    width: 60%;
    justify-content: space-between;
  }
  /* *********************
 * 설명: Section_5 문의
 ************************ */
  .ag-5 .ctact-box .ctact-box-2 .ct .tit {
    font-size: 1.3rem;
  }
  .ag-5 .ctact-box .ctact-box-2 .ct .txt {
    font-size: 1.1rem;
  }
  .ag-5 .ctact-box .ctact-box-2 {
    padding-top: 1rem;
  }
}
/* Small 태블릿 (해상도 480px ~ 600px)*/
@media screen and (max-width: 600px) {
  /* *********************
 * 설명: Section_2 회사소개
 ************************ */
  .ag-2 .frcon .two .ani-box .sect_2 {
    bottom: 2.8rem;
  }
  .ag-2 .frcon .two .ani-box .sect_3 {
    bottom: 9rem;
  }
  /* *********************
 * 설명: Section_5 문의
 ************************ */
  .ag-5 .ctact-box .title {
    text-align: center;
    margin-bottom: 2rem;
    padding-left: 0rem;
  }
  .ag-5 .ctact-box .ctact-box-2 {
    flex-direction: column !important;
  }
  .ag-5 .ctact-box .ctact-box-2 .ct {
    position: relative;
    width: calc(100% - 4rem);
    margin-top: 0rem;
    padding: 2rem 2rem;
    cursor: pointer;
    border-right: 0px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }
  .ag-5 .ctact-box .ctact-box-2 .ct:last-child {
    border-bottom: 0px solid rgba(255, 255, 255, 0.5);
  }
  .ag-5 .ctact-box .ctact-box-2 .ct:hover {
    width: calc(100% - 4rem);
  }
  .ag-5 .ctact-box .ctact-box-2:hover .ct {
    border-bottom: 0px !important;
  }
}
/* 모바일 가로, 모바일 세로 (해상도 320px ~ 480px)*/
@media screen and (max-width: 480px) {
  /* *********************
 * 설명: Section_1 메인
 ************************ */
  .ag-1 .visual .item .v-box .txt-box {
    font-size: 2rem;
  }
  /* *********************
 * 설명: Section_2 회사소개index
 ************************ */
  .ag-2 .ind-2 {
    top: 20%;
    left: auto;
    right: 0%;
  }
  .ag-2 .frcon .two .ani-box .sect_2 {
    bottom: 2rem;
  }
  .ag-2 .frcon .two .ani-box .sect_3 {
    bottom: 6rem;
  }
  /* *********************
 * 설명: Section_2, Section_4
 ************************ */
  .m-container .frcon .one {
    height: calc(var(--vh, 1vh) * 50);
  }
  .m-container .frcon .two {
    height: calc(var(--vh, 1vh) * 30);
    width: 100%;
  }
  .m-container .frcon .one .txtCont {
    font-size: calc(var(--bigTxt) - 7px);
  }
  /* *********************
 * 설명: Section_3 서비스
 ************************ */
  .ag-3 .i-service .title {
    top: 18%;
    font-size: calc(var(--bigTxt) - 5px);
  }
  .ag-3 .i-service .serv .frcon {
    width: 77%;
  }
  .ag-3 .i-service .s-box-mb .f-box .jus-mid {
    padding-top: 3rem;
  }
  .ag-3 .i-service .txt {
    font-size: 0.83rem;
  }
  .ag-3 .about-btn {
    bottom: 4%;
  }
  /* *********************
 * 설명: Section_5 문의
 ************************ */
  .ag-5 .ctact-box {
    justify-content: start;
  }
  .ag-5 .ctact-box .title {
    margin-top: 3rem;
    margin-bottom: 0rem;
  }
  .ag-5 .ftft {
    font-size: calc(var(--bigTxt) - 7px);
  }
  .ag-5 .ctact-box .ctact-box-2 {
    padding-top: 10%;
  }
  .ag-5 .ctact-box .ctact-box-2 .ct {
    padding: 1rem 1rem;
  }
}
/* 아이폰(해상도 375px 이하)*/
@media screen and (max-width: 375px) {
  /* *********************
 * 설명: Section_2 회사소식
 ************************ */
  .ag-2 .frcon .two .ani-box .sect_2 {
    bottom: 1.8rem;
  }
  .ag-2 .frcon .two .ani-box .sect_3 {
    bottom: 5.5rem;
  }
  .ag-2 .frcon .two .ani-box .sect_4 {
    bottom: 4rem;
  }
  /* *********************
 * 설명: Section_3 서비스
 ************************ */
  .ag-3 .i-service .title {
    top: 17%;
  }
  .ag-3 .i-service .serv .frcon {
    padding-top: 0rem;
    width: 85%;
    justify-content: space-between;
  }
  .ag-3 .i-service .txt {
    font-size: 0.7rem;
  }
  .ag-3 .about-btn {
    bottom: 3%;
  }
  /* *********************
 * 설명: Section_5 문의
 ************************ */
  .ag-5 .ctact-box .title {
    font-size: 1.5rem;
    margin-top: 3rem 0 0;
  }
  .ag-5 .ctact-box {
    justify-content: start;
  }
  .ag-5 .ctact-box .title {
    margin-bottom: 0rem;
  }
  .ag-5 .ctact-box .ctact-box-2 .ct .txt {
    padding: 1.5rem 0 1.5rem;
  }
}
/* 갤럭시 fold(해상도 280px 이하)*/
@media screen and (max-width: 320px) {
  :root {
    --bigTxt: 1.5rem;
  }
  /* *********************
 * 설명: Section_1 메인
 ************************ */
  .ag-1 .visual .item .v-box .txt-box {
    font-size: 1.8rem;
    word-break: keep-all;
  }
  .ag-1 .visual .item .v-box .txt-box p.last {
    padding: 0 3rem;
  }
  /* *********************
 * 설명: Section_2 회사소개
 ************************ */
  .ag-2 .frcon .two .ani-box .sect_2 {
    bottom: 1rem;
  }
  .ag-2 .frcon .two .ani-box .sect_3 {
    bottom: 3rem;
  }
  /* *********************
 * 설명: Section_2, Section_4
 ************************ */
  .m-container .frcon .one {
    height: calc(var(--vh, 1vh) * 30);
  }
  .m-container .frcon .two {
    height: calc(var(--vh, 1vh) * 20);
    width: 100%;
  }
  .m-container .frcon .one .txtCont {
    font-size: calc(var(--bigTxt) - 12px);
  }
  /* *********************
 * 설명: Section_5 문의
 ************************ */
  .ag-5 .ctact-box .title {
    font-size: 1.1rem;
    margin-top: 5rem;
  }
  .ag-5 .ctact-box .ctact-box-2 .ct .txt {
    font-size: var(--smallTxt);
  }
  .ag-5 .ctact-box .ctact-box-2 {
    padding-top: 30%;
  }
}
/* 갤럭시 fold , flip */
@media screen and (max-height: 586px) {
  /* *********************
 * 설명: Section_2 , Section_4
 ************************ */
  .m-container .frcon .one {
    height: 35%;
  }
  /* *********************
 * 설명: Section_5 문의
 ************************ */
  .ag-5 .ctact-box {
    justify-content: start;
  }
  .ag-5 .ctact-box .title {
    margin-bottom: 0rem;
  }
  .ag-5 .ctact-box .ctact-box-2 .ct .txt {
    padding: 1rem 0 1rem;
  }
}