:root {
  --vh : 1vh;
  --mainTitleTextHeight : 100%;
  --companyWidth : 65vw;
  --businessCenterHeight : 65rem;
  --businessBlockVarlu : 1.2;
  --newsValues : 1;
  --questionValues : 1;
}

.wrap {
  position:relative;
  top:0;
  width:100vw;
  height:100rem;
  overflow: hidden;
}
.main {
  width: 100vw;
  height: auto;
  transition: transform 1s ease-out;
}
.container {
  width:100vw;
  height: 100rem; /* CSS 변수 사용 */;
  overflow: hidden;
}

/* 스크롤바 없애는 style값 */
html::-webkit-scrollbar {
  display: none;  /* ( 크롬, 사파리, 오페라, 엣지 ) 동작 */
}
html {
  -ms-overflow-style: none; /* 인터넷 익스플로러 */
  scrollbar-width: none; /* 파이어폭스 */
  font-size: var(--vh);
  transition: transform 1s ease-in-out;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.mainPage {
  width: 100vw;
}
.main_image_field {
  width: 100vw;
  height: 100%;
  position: relative;
}
.main_image_field .main_image {
  will-change: transform, opacity; /* transform,opacity 그래픽 가속화 */
  position: absolute;
  background-size: cover;  /*화면을 여뱍없이 꽉 채움*/
  background-position: center;  /*백그라운드 기준점을 가운데로*/
  top: 0;
  left: 0;
  width: 100vw;
  height: 100rem;
  opacity: 0; /* 0으로 수정해야함 */
  display: block;
  transform: scale(1.3);
  transition: opacity 0.5s ease-in-out, transform 3s ease;
  object-fit: cover;
}
.main_image.visible {
  opacity: 1;
}
.main_image3.visible ~ .main_background .main_title_1_1,
.main_image3.visible ~ .main_background .main_title_1_2,
.main_image3.visible ~ .main_background .main_title_2_1,
.main_image3.visible ~ .main_background .main_title_2_2 {
  gap: 0;
}
.main_image.action {
  transform: scale(1);
}

.black_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background: url("../img/main/home-black30.png");
}
.main_background {
  background: rgba(0,0,0,0.1);
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
}
.main_texts {
  position: absolute;
  top: calc(calc(50rem - clamp(50px ,13vw, 220px)));
  width: 100vw;
  height: clamp(100px ,26vw, 440px);
  color: #FFFFFF;
}
.main_title {
  position: relative;
  font-size: clamp(48px, 6vw , 96px);
  text-align: center;
  line-height: clamp(48px, 6vw, 96px);
  width: 100%;
  height: clamp(111px ,6vw * 2.3, 240px);
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
  font-family: "acumin-pro", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.main_title_1 {
  display: flex;
  position: absolute;
  top: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  justify-content: center;
}
.main_title_2 {
  position: absolute;
  bottom: 0;
  margin: auto;
  display: flex;
  width: 100%;
  height: 50%;
  justify-content: center;
}
.main_title_1_1,
.main_title_1_2,
.main_title_2_1,
.main_title_2_2 {
  position: relative;
  display: flex;
  gap: clamp(6px, 1.6vw, 18px);
  top: 0;
  width: auto;
  height: var(--mainTitleTextHeight);
}
/* 추가 */
.main_title_1_2,
.main_title_2_2 {
  margin-left: clamp(6px, 1.6vw, 18px);;
}
.main_title_2_2 {
  text-align: left;
  font-weight: 600;
}
.main_title_1_1 span,
.main_title_1_2 span,
.main_title_2_1 span,
.main_title_2_2 span {
  position: relative;
  /*display: block;*/
}
.main_text {
  margin: clamp(32px ,6vw, 90px) auto 0 auto;
  overflow: hidden;
  text-align: center;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
  font-size: clamp(16px, 2vw, 32px);
  width: 100%;
  height: clamp(48px, 2vw * 3, 96px);
  letter-spacing: -0.026vw;
}
.main_text .main_text_content {
  margin: auto;
  overflow: hidden;
}
.main_title div {
  overflow: hidden;
}
.main_buttons { /* 첫번째 화면의 화면선택 버튼 */
  position: absolute;
  bottom: 5rem;
  left: calc(50vw - 6rem);
  display: flex;
  width: 12rem;
  height: 3rem;
  transition: transform 0.3s ease-in-out;
}
.main_button {
  margin-right: 1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 1.5rem;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.main_button.active {
  transform: scale(1.2);
  background: rgba(255,255,255,0.8);
}
.main_button:nth-last-child(1) {
  margin: 0;
}

.company_us {
  position: relative;
  display: flex;
  overflow: hidden;
}
.company_text{
  position: absolute;
  top: 0;
  left: 0;
  width: var(--companyWidth);
  height: 100%;
  font-family: 'Open Sans';
  font-weight: 150;
  letter-spacing : -0.1rem;
  background-color: #FFFFFF;
  box-shadow: 3rem 0 3rem rgba(0, 0, 0, 0.4);
}
.companyLines {
  position: absolute;
  width: var(--companyWidth);
  height: 10rem;
  background: linear-gradient(90deg, rgba(221,255,218,1) 0%, rgba(191,209,255,1) 100%);
}
.company_text .companyLines:nth-child(1) {
  top: 0;
}
.company_text .companyLines:nth-child(3) {
  bottom: 0;
}
.company_block {
  margin-top: 20rem;
  margin-left: 15vw;
  width: 40vw;
}
.company_image {
  position: absolute;
  top: 0;
  right: 0;
  background-size: cover;
  background-position: right center; /* 기본: 오른쪽 끝 */
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.company_handsImage {
  position: absolute;
  top: 0;
  right: 0;
  background-size: cover;
  background-position: right center; /* 기본: 오른쪽 끝 */
  background-repeat: no-repeat;
  width: 35vw;
  height: 100%;
  display: block;
  object-fit: cover;
  overflow: visible;
}
.company_block_1 {
  color:#189FFF;
  font-size: 8rem;
}
.company_block_2 {
  font-size: 8rem;
  font-weight: 100;
}
.company_block_3 {
  margin-top: 4rem;
  font-size: clamp(16px, 2.5rem, 2.5rem);
  font-weight: 100;
  width: 100%;
}
.view_more_button {
  padding: 1rem 1.5vw;
  font-family: 'Open Sans';
  font-weight: 150;
  font-size: 3rem;
  width: fit-content;
  height: fit-content;
  letter-spacing : -0.1rem;
  border: 1px solid black;
  margin-top: 8rem;
  cursor: pointer;
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

.business-type-up {
  position: absolute;
  top: 0;
  width: 100vw;
  height: calc(50rem - calc(var(--businessCenterHeight) / 2));
  background-color: #000000;
  opacity: 0.1;
}
.business-type-down {
  position: absolute;
  bottom: 0;
  width: 100vw;
  height: calc(50rem - calc(var(--businessCenterHeight) / 2));
  background-color: #000000;
  opacity: 0.1;
}
.business-center {
  position: absolute;
  width: 100vw;
  height: var(--businessCenterHeight);
  top: calc(50rem - calc(var(--businessCenterHeight) / 2));
  background : rgba(246,246,246,0.8);
}
.leaf_box {
  position: absolute;
  left: calc(-2.4rem * var(--businessBlockVarlu));
  top: calc(1.6rem * var(--businessBlockVarlu));
  width: calc(4.4rem * var(--businessBlockVarlu));
  height: calc(1.6rem * var(--businessBlockVarlu));
}
.leaf {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.business-area-1 {
  margin: auto;
  position: relative;
  overflow-wrap: break-word;
  font-weight: 300;
  font-size: calc(4.8rem * var(--businessBlockVarlu));
  letter-spacing: -0.16vw;
  color: #000000;
}
.business-text {
  position: relative;
  margin: calc(4rem * var(--businessBlockVarlu)) 0 calc(8rem * var(--businessBlockVarlu)) 0;
  display: flex;
  box-sizing: border-box;
}
.rectangle-132 {
  width: calc(13.5rem * var(--businessBlockVarlu));
  height: calc(8rem * var(--businessBlockVarlu));
  position: absolute;
  top: 0;
  right: calc(1.5rem * var(--businessBlockVarlu));
  transition: transform 0.2s ease-out;
}
.rectangle-132 ~ div {
  position: absolute;
}
.rectangle_color_green {
  background: #65de56;
}
.rectangle_color_blue {
  background: #FF7373;
}
.rectangle_color_sky {
  background: #73C5FF;
}
.rectangle_color_red {
  background: #FFC037;
}
.rectangle-131 {
  background: #FFFFFF;
  top: calc(1.5rem * var(--businessBlockVarlu));
  right: calc(3rem * var(--businessBlockVarlu));
  width: calc(20rem * var(--businessBlockVarlu));
  height: calc(20rem * var(--businessBlockVarlu));
}
.rectangle-133 {
  position: relative;
  right: 0;
  bottom: 0;
  width: calc(18rem * var(--businessBlockVarlu));
  height: calc(10rem * var(--businessBlockVarlu));
  transition: transform 0.2s ease-out;
}
.rectangle-133.green {
  background: rgba(101, 222, 86, 0.1);
}
.rectangle-133.red {
  background: rgba(255, 115, 115, 0.1);
}
.rectangle-133.blue {
  background: rgba(115, 197, 255, 0.1);
}
.rectangle-133.yellow {
  background: rgba(255, 192, 55, 0.1);
}
.text-1 {
  position: absolute;
  width: calc(20.5rem * var(--businessBlockVarlu));
  right: calc(1rem * var(--businessBlockVarlu));
  bottom: calc(2rem * var(--businessBlockVarlu));
  overflow-wrap: break-word;
  font-family: 'SpoqaHanSansNeo-Regular';
  font-weight: 300;
  font-size: calc(2rem * var(--businessBlockVarlu));
  letter-spacing: -0.12rem;
  color: #636363;
  transition: transform 0.2s ease-out;
}
.text-1.last {
  bottom: calc(1rem * var(--businessBlockVarlu));
}
.blockTexts {
  overflow-wrap: break-word;
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 350;
  font-size: calc(2.8rem * var(--businessBlockVarlu));
  letter-spacing: -0.18rem;
}
.consulting {
  left: 0;
  top: calc(5rem * var(--businessBlockVarlu));
  color: #2ec41b;
}
.blocks {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: calc(116rem * var(--businessBlockVarlu));
  height: auto;
}
.block {
  cursor: pointer;
  position: relative;
  top: 0;
  display: flex;
  width: calc(25.8rem * var(--businessBlockVarlu));
  height: calc(23rem * var(--businessBlockVarlu));
  transition: top 0.2s ease-out, height 0.2s ease-out, transform 0.2s ease-out;
}
.block span {
  position: absolute;
}
.system {
  left: 0;
  top: calc(3.5rem * var(--businessBlockVarlu));
  color: #ff6666;
}
.integration {
  left: calc(1rem * var(--businessBlockVarlu));
  top: calc(6.5rem * var(--businessBlockVarlu));
  color: #ff6666;
}
.operation-and {
  left: 0;
  top: calc(3.5rem * var(--businessBlockVarlu));
}
.maintenance {
  left: calc(1rem * var(--businessBlockVarlu));
  top: calc(6.5rem * var(--businessBlockVarlu));
}
.hw .operation-and {
  color: #51b0f4;
}
.hw .maintenance {
  color: #51b0f4;
}
.sw .operation-and {
  color: #e8a513;
}
.sw .maintenance {
  color: #e8a513;
}
.business-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  background-image: url("../img/main/home-background3.webp");
  background-size: cover;  /*화면을 여뱍없이 꽉 채움*/
  background-position: center;  /*백그라운드 기준점을 가운데로*/
}
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

.partner_page {
  background-color: #FFFFFF;
}
.partner_page_title {
  width: 100vw;
  height: 32rem;
  font-size: 4rem;
}
.partner_page_title div:nth-child(1) {
  height: 60%;
}
.partner_page_title div:nth-child(2) {
  width: fit-content;
  height: fit-content;
  margin: auto;
}
.partner_title {
  position: relative;
  overflow: hidden;
  top: 0;
}
.partner_title_text {
  position: relative;
  overflow: hidden;
  overflow-wrap: break-word;
}
.partner_block_area {
  position: relative;
  top: 0;
  width: 100vw;
  height: 68rem;
  overflow: hidden;
  background-color: #E8EDF6;
}
.blocksLine {
  overflow: hidden;
  margin-top: 8rem;
  width: 100vw;
  height: 20rem;
}
.partner_box {
  display: flex;
  width: 424.8vw; /* ((23.6 * 한줄의 블럭수) * 2) */
}
.rtl {
  animation: bannermoveRTL 30s linear infinite;
}
.ltr {
  animation: bannermoveLTR 30s linear infinite;
}
@keyframes bannermoveRTL {
  0% {transform: translate(0, 0);}
  100% {transform: translate(-50%, 0);}
}
@keyframes bannermoveLTR {
  0% {transform: translate(-50%, 0);}
  100% {transform: translate(0, 0);}
}
.partner_block {
  width: 20.8vw;+
  height: 20rem;
  margin: 0 1.4vw;
  border-radius: 10px;
  background-color: #FFFFFF;
  cursor: pointer;
}
.partner_block img {
  margin: 2.5rem 2.6vw;
  width: 15.6vw;
  height: 15rem;
  object-fit: contain;
}

.news_page {
  background: url("../img/main/home-background4.webp");
  background-size: cover;  /*화면을 여뱍없이 꽉 채움*/
  background-position: center;  /*백그라운드 기준점을 가운데로*/
  position: relative;
}
.news_area {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100%;
  opacity: 1;
}
.news_area_block {
  margin: auto;
  margin-top: calc(50rem - clamp(172px ,35.7rem * var(--newsValues), 386px));
  width: clamp(480px ,100rem * var(--newsValues), 1080px);
  height: clamp(344px ,71.5rem * var(--newsValues), 772px);
  display: flex;
}
.half {
  width: 50%;
}
.news_title {
  color: #FFFFFF;
  font-size: clamp(20px, 5rem * var(--newsValues), 48px);
  font-weight: 300;
  font-family: 'S-CoreDream-3Light';
  line-height: clamp(24px, 5.5rem * var(--newsValues), 54.8px);
  width: 100%;
  height: 10%;
  display: flex;
  position: relative;
  top: 0;
  overflow: hidden;
}
.news_title_name {
  overflow: hidden;
  position: relative;
  top: 0;
  margin: auto;
  width: fit-content;
  height: 80%;
}
.news_title_name br {
  content: " ";
  display: inline;
}
.news_title_more {
  position: absolute;
  font-size: clamp(20px, 4rem * var(--newsValues), 40px);
  right: 0;
  bottom: 0;
}
.news_void_left {
  height: 10%;
}
.news_void_right {
  height: 20%;
}
.news_blocks {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 70%;
}
.news_blocks .news_block {
  text-decoration: none;
  cursor: pointer;
  position: relative;
  width: 50%;
  height: 50%;
  color: #FFFFFF;
  overflow-wrap: break-word;
}
.left .news_block:nth-child(1) {
  background-color: rgba(186,230,255, 0.3);
}
.left .news_block:nth-child(2) {
  background-color: rgba(186,230,255, 0.2);
}
.left .news_block:nth-child(3) {
  background-color: rgba(186,230,255, 0.4);
}
.left .news_block:nth-child(4) {
  background-color: rgba(186,230,255, 0.5);
}
.right .news_block:nth-child(1) {
  background-color: rgba(217,217,217, 0.4);
}
.right .news_block:nth-child(2) {
  background-color: rgba(217,217,217, 0.5);
}
.right .news_block:nth-child(3) {
  background-color: rgba(217,217,217, 0.2);
}
.right .news_block:nth-child(4) {
  background-color: rgba(217,217,217, 0.3);
}
.news_block .news_block_text {
  width: 80%;
  height: 60%;
  margin: 20% 10% 20% 10%;
  color: rgba(255,255,255,0.8);
  text-decoration-line: none; /* a태그 밑줄 없애기 */
  overflow: hidden;
  font-weight: 300;
  font-size: clamp(12px, 2.77rem * var(--newsValues), 28px);
  line-height: clamp(20px, 5rem * var(--newsValues), 54.04px);
  letter-spacing: clamp(0px ,-0.06rem * var(--newsValues), 0.648px);
  text-overflow:ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.news_block .news_block_content {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  overflow-wrap: break-word;
  background: #FFF;
}
.news_block .news_block_content img {
  width: 100%;
  height: 100%;
}
.news_block_content_textBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 35%;
  margin-top: 100%;
  text-align: left;
  background: rgba(0, 0, 0, 0.5);
  transition: margin-top 0.3s ease;
}
.news_block .news_block_content_text {
  margin: 0.5rem;
  font-size: calc(2.4rem * var(--newsValues));
  line-height: calc(3.879375rem * var(--newsValues));
  overflow: hidden;
  text-overflow:ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  clip-path: inset(0px 0px 0px 0px);
}
/* news페이지의 초기 박스 높이 */
.news_void_left.boxBox,
.news_void_right.boxBox {
  height: calc(15% * var(--newsValues));
}

.Questions_page {
  position: relative;
}
.questions_img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100rem;
  transform: scale(1.3);
  transition: transform 2s ease;
  background-size: cover;  /*화면을 여뱍없이 꽉 채움*/
  background-position: center;  /*백그라운드 기준점을 가운데로*/
  background-repeat: no-repeat;
  object-fit: cover;
}
.questions_img.zoomIn {
  transform: scale(1);
}
.questions_block {
  position: absolute;
  left: calc(50vw - 580px);
  bottom: 10rem;
  width: 1160px;
  overflow-wrap: break-word;
  font-weight: 300;
  font-size: calc(4rem * var(--questionValues));
  letter-spacing: calc(-0.06vw * var(--questionValues));
  color: #FFFFFF;
}
.questions_italic_text {
  position: relative;
  width: 500px;
  height: auto;
  font-family: 'Open Sans';
  font-style: italic;
  letter-spacing: -0.09vw;
  cursor: pointer;
  overflow: hidden;
}
.questions_text_box br {
  content : " ";
  display: inline;
}
.questions_italic_text.blue {
  top: calc(-14rem * var(--questionValues));
  height: calc(15rem * var(--questionValues));
}
.questions_italic_text span  {
  position: relative;
  top: 0;
  left: 0;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.questions_italic_text.white {
  display: flex;
}
.questions_italic_text.white > div{
  position: relative;
  overflow: hidden;
}
.questions_italic_text.white > div > div {
  position: inherit;
}
.questions_block .blue {
  font-size: calc(10rem * var(--questionValues));
  color: #64B9FF;
  position: absolute;
}
.questions_italic_text div {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 4rem;
}
.questions_italic_text img {
  position: relative;
  top: 0;
  left: 0;
  width: 4rem;
  height: 100%;
  filter: brightness(0) invert(1);
}
.questions_text_box > div{
  position: relative;
  overflow: hidden;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.questions_text_box > div > div{
  position: relative;
}
.questions_italic_text.blue .back_box {
  background-color: #0095FF;
  opacity: 0.25;
  width: calc(40rem * var(--questionValues));
  height: calc(8rem * var(--questionValues));
  position: absolute;
  top: calc(4rem * var(--questionValues));
  left: 0;
  transform: rotate(-8deg);
  box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.5);
}
.questions_text_box {
  margin-left: calc(3vw * var(--questionValues));
}