.invisible { /* 안보이게 하는 공용 클래스 */
  opacity: 0;
}
.noneEvent { /* hover와 같은 이벤트를 못 하게하는 클래스 */
  pointer-events: none;
}

@keyframes opacity0 {
  0% {opacity: 0;}
  100% {opacity: 0;}
}
@keyframes step0_heightCenter {
  0% {transform: translateY(15%)}
  100% {transform: translateY(15%)}
}

@keyframes step1_height0_100 {
  0% {transform: translateY(100%);}
  100% {transform: translateY(0);}
}

@keyframes step2_heightdefault {
  0% {transform: translateY(15%)}
  100% {transform: translateY(0)}
}
@keyframes step2_opacity0_1 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes step2_textShow {
  0% {transform: translateY(100%);}
  100% {transform: translateY(0);}
}
/* 오프닝 애니메이션 */
.main_texts.opening .main_title {
  will-change: transform;
  animation-name: step0_heightCenter, step2_heightdefault;
  animation-duration: 2.5s, 1s;
  animation-delay: 0s, 2.5s;
}
.main_texts.opening .main_title_1_1 span:nth-child(1) {
  will-change: transform, opacity;
  animation-name: opacity0, step1_height0_100;
  animation-duration: 0.5s, 0.5s;
  animation-delay: 0s, 0.5s;
}
.main_texts.opening .main_title_1_1 span:nth-child(2) {
  will-change: transform, opacity;
  animation-name: opacity0, step1_height0_100;
  animation-duration: 0.8s, 0.5s;
  animation-delay: 0s, 0.8s;
}
.main_texts.opening .main_title_1_2 span:nth-child(1) {
  will-change: transform, opacity;
  animation-name: opacity0, step1_height0_100;
  animation-duration: 1.1s, 0.5s;
  animation-delay: 0s, 1.1s;
}
.main_texts.opening .main_title_1_2 span:nth-child(2) {
  will-change: transform, opacity;
  animation-name: opacity0, step1_height0_100;
  animation-duration: 1.6s, 0.5s;
  animation-delay: 0s, 1.6s;
}
.main_texts.opening .main_title_2_1 span:nth-child(1) {
  will-change: transform, opacity;
  animation-name: opacity0, step1_height0_100;
  animation-duration: 2s, 0.5s;
  animation-delay: 0s, 2s;
}
.main_texts.opening .main_title_2_1 span:nth-child(2) {
  will-change: transform, opacity;
  animation-name: opacity0, step1_height0_100;
  animation-duration: 2.3s, 0.5s;
  animation-delay: 0s, 2.3s;
}
.main_texts.opening .main_title_2_2 {
  will-change: transform, opacity;
  animation-name: opacity0, step1_height0_100;
  animation-duration: 3s, 0.5s;
  animation-delay: 0s, 3s;
}
.main_texts.opening .main_text_content {
  will-change: transform, opacity;
  animation-name: opacity0, step2_textShow;
  animation-duration: 3.3s, 0.5s;
  animation-delay: 0s, 3.3s;
}
.main_texts.opening ~ .main_buttons {
  will-change: opacity;
  animation-name: opacity0, step2_opacity0_1;
  animation-duration: 3.8s, 1s;
  animation-delay: 0s, 3.8s;
}
.main_texts.invisible ~ .main_buttons {
  opacity: 0;
}

@keyframes height100_0 {
  0% {transform: translateY(0)}
  100% {transform: translateY(-100%)}
}
@keyframes height0_0 {
  0% {transform: translateY(-100%)}
  100% {transform: translateY(-100%)}
}

/* 화면전환 애니메이션 */
.main_texts.viewChange .main_title_1_1 span:nth-child(1),
.main_texts.viewChange .main_title_1_1 span:nth-child(2),
.main_texts.viewChange .main_title_1_2 span:nth-child(1),
.main_texts.viewChange .main_title_1_2 span:nth-child(2),
.main_texts.viewChange .main_title_2_1 span:nth-child(1),
.main_texts.viewChange .main_title_2_1 span:nth-child(2),
.main_texts.viewChange .main_title_2_2 span:nth-child(1),
.main_texts.viewChange .main_text_content {
  animation-name: height100_0, height0_0, step1_height0_100;
}
.main_texts.viewChange .main_title_1_1 span:nth-child(1),
.main_texts.viewChange .main_title_1_1 span:nth-child(2),
.main_texts.viewChange .main_title_1_2 span:nth-child(1),
.main_texts.viewChange .main_title_1_2 span:nth-child(2),
.main_texts.viewChange .main_title_2_1 span:nth-child(1),
.main_texts.viewChange .main_title_2_1 span:nth-child(2) {
  animation-duration: 0.5s, 0.5s, 0.5s;
  animation-delay: 0s, 0.5s, 1s;
}
.main_texts.viewChange .main_title_2_2 span:nth-child(1) {
  animation-duration: 0.5s, 0.8s, 0.5s;
  animation-delay: 0s, 0.5s, 1.3s;
}
.main_texts.viewChange .main_text_content {
  animation-duration: 0.3s, 1.3s, 0.5s;
  animation-delay: 0s, 0.3s, 1.6s;
}

/*@media screen and (max-width: 780px) {*/
/*  .main_texts.viewChange .main_title_1_1 span:nth-child(1),*/
/*  .main_texts.viewChange .main_title_1_1 span:nth-child(2),*/
/*  .main_texts.viewChange .main_title_1_2 span:nth-child(1),*/
/*  .main_texts.viewChange .main_title_1_2 span:nth-child(2),*/
/*  .main_texts.viewChange .main_title_2_1 span:nth-child(1),*/
/*  .main_texts.viewChange .main_title_2_1 span:nth-child(2),*/
/*  .main_texts.viewChange .main_title_2_2,*/
/*  .main_texts.viewChange .main_text_content {*/
/*    animation-name: step1_height50_0_mobile, height0_0, step1_height0_50_mobile;*/
/*  }*/
/*}*/

/*ㅡㅡ 회사소개 애니메이션 ㅡㅡ*/
@keyframes step0_left68 {
  0% {transform: translateX(calc(var(--companyWidth) * -1));}
  100% {transform: translateX(calc(var(--companyWidth) * -1));}
}
@keyframes company_step1_openRight {
  0% {transform: translateX(calc(var(--companyWidth) * -1));}
  100% {transform: translateX(0);}
}
@keyframes step2_visibleButton {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.company_us.action .company_text {
  animation: company_step1_openRight 2s ease;
}
.company_us.action .view_more_button {
  animation: opacity0 2s 0s, step2_visibleButton 1s ease 2s;
}
/*ㅡㅡ 회사소개 애니메이션 ㅡㅡ*/

/*ㅡㅡㅡ 사업영역 애니메이션 ㅡㅡㅡ*/
@keyframes step1_upDownBlock {
  0% {transform: translateY(-50%); opacity: 0;}
  100% {}
}
@keyframes stpe2_visibleText {
  0% {opacity: 0;}
  100% {}
}
@keyframes top50 {
  0% {transform: translateY(-50%); opacity: 0;}
  100% {transform: translateY(-50%); opacity: 0;}
}

@keyframes leafBoxMove {
  0% {transform: translateX(calc(-7.6rem * var(--businessBlockVarlu)));}
  40% {transform: translateX(calc(-2.4rem * var(--businessBlockVarlu)));}
  60% {transform: translateY(calc(0.4rem * var(--businessBlockVarlu)));}
  80% {transform: translateY(calc(-0.6rem * var(--businessBlockVarlu)));}
  100% {}
}
@keyframes leafMove {
  0% {transform: rotate(-30deg); opacity: 0;}
  40% {}
  60% {transform: rotate(-30deg);}
  80% {transform: rotate(10deg);}
  100% {}
}

.business-area.action .block:nth-child(1),
.business-area.action .block:nth-child(2),
.business-area.action .block:nth-child(3),
.business-area.action .block:nth-child(4) {
  animation-name: step1_upDownBlock, top50, opacity0;
  animation-duration: 1s, 0s, 0s;
}
.business-area.action .block:nth-child(2) {
  animation-duration: 1s, 0.1s, 0.1s;
  animation-delay: 0.1s, 0s, 0s;
}
.business-area.action .block:nth-child(3) {
  animation-duration: 1s, 0.2s, 0.2s;
  animation-delay: 0.2s, 0s, 0s;
}
.business-area.action .block:nth-child(4) {
  animation-duration: 1s, 0.3s, 0.3s;
  animation-delay: 0.3s, 0s, 0s;
}
.business-area.action .business-text {
  animation: stpe2_visibleText 0.3s 1s ease-in, opacity0 1s 0s ease;
}
.business-area.action .leaf_box {
  animation: leafBoxMove 0.5s 1.3s ease-out;
}
.business-area.action .leaf {
  animation: leafMove 0.5s 1.3s ease-out, opacity0 1.3s 0s ease;
}

/* 마우스 호버시 적용 */
.blocks.hoverEvent .block:hover {
  transform: translateY(-7rem);
  padding-bottom: 10rem;
  height: 40rem;
}
.blocks.hoverEvent .block:hover .rectangle-132 {
  transform: translateY(-3rem);
}
.blocks.hoverEvent .block:hover .rectangle-133 {
  transform: translateY(-7rem);
}
.blocks.hoverEvent .block:hover .text-1 {
  transform: translateY(-9rem);
}
/*ㅡㅡㅡ 사업영역 애니메이션 ㅡㅡㅡ*/

/*ㅡㅡㅡ 파트너사 애니메이션 ㅡㅡㅡ*/
@keyframes step1_openheight {
  0% {transform: translateY(100%)}
  100% {}
}
@keyframes height0Top100 {
  0% {transform: translateY(100%)}
  100% {transform: translateY(100%)}
}
@keyframes step2_invisible_visible {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.partner_page.action .partner_title {
  animation: step1_openheight 1s 0s;
}
.partner_page.action .partner_block_area {
  animation: step1_openheight 1s 0.5s, height0Top100 0.5s 0s;
}
.partner_page.action .blocksLine {
  animation: step2_invisible_visible 1s 1s, opacity0 1s 0s;
}
/*ㅡㅡㅡ 파트너사 애니메이션 ㅡㅡㅡ*/

/*ㅡㅡㅡ 뉴스페이지 애니메이션 ㅡㅡㅡ*/
@keyframes step0_boxbox {
  0% {height: calc(15% * var(--newsValues));}
  100% {height: calc(15% * var(--newsValues));}
}
@keyframes step1_titleVisible {
  0% {transform: translateY(calc(-5rem * var(--newsValues)));}
  100% {}
}
@keyframes step2_UpBoxDownBox {
  0% {height: calc(15% * var(--newsValues));}
  100% {}
}
@keyframes step3_visibleText {
  0% {opacity: 0;}
  100% {}
}

.news_page.action .news_void_left,
.news_page.action .news_void_right {
  animation: step0_boxbox 0.8s 0s, step2_UpBoxDownBox 0.3s 0.8s;
}
.news_page.action .news_title_name {
  animation: step1_titleVisible 0.5s 0s;
}
.news_page.action .news_block_text,
.news_page.action .news_title_more,
.news_page.action .news_blocks.left .news_block_content {
  animation: opacity0 0.8s 0s, step3_visibleText 0.3s 0.8s;
}

/* hover효과 영역 */
.news_blocks.hoverEvent .left .news_block:hover {
  transition: background 0.2s ease;
  background-color: rgba(0,0,0,0.0);
  transition-delay: 0s;
}
.news_blocks.hoverEvent .right .news_block:hover {
  transition: background 0.2s ease;
  background-color: rgba(0,0,0,0.0);
  transition-delay: 0s;
}
.news_blocks.hoverEvent .news_block:hover .news_block_content {
  z-index: 2;
  transform: scale(1.2);
  opacity: 1;
  transition: transform 0.5s ease, opacity 0.5s ease, box-shadow 0.5s ease;
  transition-delay: 0.2s, 0.2s, 0.2s, 0.2s, 0.15s;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.news_blocks.hoverEvent .news_block:hover .news_block_content_textBox {
  margin-top: 66%;
  transition: margin-top 0.6s ease;
  transition-delay: 0.4s;
}
.news_blocks.hoverEvent .news_block:hover .news_block_text {
  transition: opacity 0.3s ease, color 0.2s ease;
  color: rgba(0,0,0,0.0);
  opacity: 0;
  transition-delay: 0s, 0s;
}

.news_block {
  transition: background 0.5s ease, color 0.5s ease;
  transition-delay: 0.15s, 0.4s;
}
.news_block .news_block_text {
  transition: opacity 0.3s ease, color 0.5s ease;
  transition-delay: 0s, 0.4s;
}
.news_block .news_block_content {
  overflow: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.news_block .news_block_content_text {
  transition: margin-top 0.2s ease;
}
/*ㅡㅡㅡ 뉴스페이지 애니메이션 ㅡㅡㅡ*/

/*ㅡㅡ 문의하기 페이지 애니메이션 ㅡㅡ*/

@keyframes step1_openRight {
  0% {transform: translateX(-45rem);}
  100% {}
}
@keyframes step2_openUp {
  0% {transform: translateY(14rem)}
  100% {transform: translateY(0rem)}
}
@keyframes top7 {
  0% {transform: translateY(14rem)}
  100% {transform: translateY(14rem)}
}
@keyframes step3_opacity0_025 {
  0% {opacity: 0;}
  100% {opacity: 0.25;}
}
@keyframes step4_upArrow {
  0% {transform: rotate(90deg) translateX(10rem);}
  100% {transform: rotate(90deg) translateX(0rem);}
}
@keyframes step4_rotateArrow {
  0% {transform: rotate(90deg);}
  100% {transform: rotate(0deg);}
}
@keyframes defaultTop {
  0% {transform: rotate(90deg) translateX(10rem);}
  100% {transform: rotate(90deg) translateX(10rem);}
}
.Questions_page span {
  display: block;
}
.Questions_page.action .back_box {
  animation: opacity0 2.5s, step3_opacity0_025 0.5s ease 2.5s;
}
.Questions_page.action .questions_italic_text.blue span {
  animation: step1_openRight 1s ease;
}
.Questions_page.action .questions_text_box > div:nth-child(1) > div {
  animation: step2_openUp 0.5s ease 1s, top7 1s;
}
.Questions_page.action .questions_italic_text.white > div:nth-child(1) {
  animation: step4_upArrow 1s ease 1s, defaultTop 1s ease 0s, step4_rotateArrow 0.5s ease 2s;
}
.Questions_page.action .questions_italic_text.white > div:nth-child(2) > div {
  animation: step1_openRight 1s ease 1.8s, opacity0 1.8s;
}
/*ㅡㅡ 문의하기 페이지 애니메이션 ㅡㅡ*/