.vh_wrap {
  overflow: hidden;
  height: 100vh;
  padding: 50px 0 164px;
}

.vh_wrap .center_wrap {
  position: relative;
  height: calc(100vh - 214px);
}

.vh_wrap .center_wrap .text_box {
  color: #fff;
  position: absolute;
  left: 40px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-animation: txt 3s 2.8s forwards;
          animation: txt 3s 2.8s forwards;
  opacity: 0;
  z-index: 4;
  width: calc(100% - 80px);
  max-width: 380px;
}

.vh_wrap .center_wrap .text_box h1 {
  font-size: 28px;
  margin-bottom: 20px;
}

.vh_wrap .center_wrap .text_box p {
  font-size: 14px;
}

.vh_wrap .center_wrap .text_box .pc_text {
  display: none;
}

@-webkit-keyframes txt {
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes txt {
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.vh_wrap .center_wrap .round_box {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.vh_wrap .center_wrap .round_box div {
  border-radius: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 80px;
  height: 80px;
}

.vh_wrap .center_wrap .round_box .round01 {
  z-index: 1;
  opacity: 0;
}

.vh_wrap .center_wrap .round_box .round01 .round02 {
  z-index: 2;
  opacity: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.vh_wrap .center_wrap .round_box .round01 .round02 .round03 {
  z-index: 3;
  opacity: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.vh_wrap.index_wrap {
  background-color: #F37321;
  height: 100vh !important;
}

.vh_wrap.index_wrap .center_wrap .text_box {
  width: auto;
}

.vh_wrap.index_wrap .center_wrap .text_box h1 {
  font-size: 20px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.vh_wrap.index_wrap .center_wrap .text_box h1::after {
  content: '';
  position: absolute;
  right: -20px;
  display: block;
  background: url(../img/icon_arrow_right.svg) no-repeat;
  width: 9px;
  height: 17px;
  background-size: contain;
}

.vh_wrap.index_wrap .center_wrap .round_box {
  right: -180px;
}

.vh_wrap.index_wrap .center_wrap .round_box div {
  right: -24%;
}

.vh_wrap.index_wrap .center_wrap .round_box .round01 {
  background-color: #FFB07A;
  -webkit-animation: index01 2.5s forwards;
          animation: index01 2.5s forwards;
}

.vh_wrap.index_wrap .center_wrap .round_box .round01 .round02 {
  background-color: #FF9461;
  -webkit-animation: index02 2.5s 1s forwards;
          animation: index02 2.5s 1s forwards;
}

.vh_wrap.index_wrap .center_wrap .round_box .round01 .round02 .round03 {
  background-color: #F37321;
  -webkit-animation: index03 2.5s 1.5s forwards;
          animation: index03 2.5s 1.5s forwards;
}

@-webkit-keyframes index01 {
  25% {
    width: 80px;
    height: 80px;
  }
  100% {
    width: 385px;
    height: 385px;
    opacity: 1;
  }
}

@keyframes index01 {
  25% {
    width: 80px;
    height: 80px;
  }
  100% {
    width: 385px;
    height: 385px;
    opacity: 1;
  }
}

@-webkit-keyframes index02 {
  25% {
    width: 80px;
    height: 80px;
  }
  100% {
    width: 272px;
    height: 272px;
    opacity: 1;
  }
}

@keyframes index02 {
  25% {
    width: 80px;
    height: 80px;
  }
  100% {
    width: 272px;
    height: 272px;
    opacity: 1;
  }
}

@-webkit-keyframes index03 {
  25% {
    width: 80px;
    height: 80px;
  }
  100% {
    width: 160px;
    height: 160px;
    opacity: 1;
  }
}

@keyframes index03 {
  25% {
    width: 80px;
    height: 80px;
  }
  100% {
    width: 160px;
    height: 160px;
    opacity: 1;
  }
}

.vh_wrap.hanwha_wrap .center_wrap .logo_img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 184px;
}

.vh_wrap.business_highlights_wrap {
  padding: 0;
  margin-top: 50px;
  background-color: #FCD4B5;
  height: calc(100vh - 50px);
}

.vh_wrap.business_highlights_wrap .center_wrap {
  height: inherit;
}

.vh_wrap.business_highlights_wrap .center_wrap .text_box {
  top: 46%;
  max-width: 340px;
}

.vh_wrap.business_highlights_wrap .center_wrap .round_box {
  top: 45%;
  left: -180px;
}

.vh_wrap.business_highlights_wrap .center_wrap .round_box div {
  left: 10%;
}

.vh_wrap.business_highlights_wrap .center_wrap .round_box .round01 {
  background-color: #FF9461;
  -webkit-animation: highlights01 2.5s forwards;
          animation: highlights01 2.5s forwards;
}

.vh_wrap.business_highlights_wrap .center_wrap .round_box .round01 .round02 {
  background-color: #F37321;
  -webkit-animation: highlights02 2.5s 1s forwards;
          animation: highlights02 2.5s 1s forwards;
}

@-webkit-keyframes highlights01 {
  25% {
    width: 80px;
    height: 80px;
  }
  100% {
    width: 604px;
    height: 604px;
    opacity: 1;
  }
}

@keyframes highlights01 {
  25% {
    width: 80px;
    height: 80px;
  }
  100% {
    width: 604px;
    height: 604px;
    opacity: 1;
  }
}

@-webkit-keyframes highlights02 {
  25% {
    width: 80px;
    height: 80px;
  }
  100% {
    width: 318px;
    height: 318px;
    opacity: 1;
  }
}

@keyframes highlights02 {
  25% {
    width: 80px;
    height: 80px;
  }
  100% {
    width: 318px;
    height: 318px;
    opacity: 1;
  }
}

.vh_wrap.hanwha_business_wrap {
  background-color: #FCD4B5;
  height: 100vh !important;
  padding: 50px 0 0 0;
}

.vh_wrap.hanwha_business_wrap .center_wrap {
  height: inherit;
}

.vh_wrap.hanwha_business_wrap .center_wrap .text_box {
  top: 25%;
}

.vh_wrap.hanwha_business_wrap .center_wrap .text_box .main_text {
  color: #F37321;
}

.vh_wrap.hanwha_business_wrap .center_wrap .text_box .sub_menu_box li {
  margin-bottom: 6px;
}

.vh_wrap.hanwha_business_wrap .center_wrap .text_box .sub_menu_box li a {
  font-size: 16px;
  color: #F37321;
}

.vh_wrap.hanwha_business_wrap .center_wrap .round_box {
  right: -180px;
  bottom: 180px;
  top: auto;
  -webkit-transform: translate(0);
          transform: translate(0);
}

.vh_wrap.hanwha_business_wrap .center_wrap .round_box div {
  right: -24%;
}

.vh_wrap.hanwha_business_wrap .center_wrap .round_box .round01 {
  background-color: #FFB07A;
  -webkit-animation: business01 2.5s forwards;
          animation: business01 2.5s forwards;
}

.vh_wrap.hanwha_business_wrap .center_wrap .round_box .round01 .round02 {
  background-color: #FF9461;
  -webkit-animation: business02 2.5s 1s forwards;
          animation: business02 2.5s 1s forwards;
}

.vh_wrap.hanwha_business_wrap .center_wrap .round_box .round01 .round02 .round03 {
  background-color: #F37321;
  -webkit-animation: business03 2.5s 1.5s forwards;
          animation: business03 2.5s 1.5s forwards;
}

@-webkit-keyframes business01 {
  25% {
    width: 80px;
    height: 80px;
  }
  100% {
    width: 475px;
    height: 475px;
    opacity: 1;
  }
}

@keyframes business01 {
  25% {
    width: 80px;
    height: 80px;
  }
  100% {
    width: 475px;
    height: 475px;
    opacity: 1;
  }
}

@-webkit-keyframes business02 {
  25% {
    width: 80px;
    height: 80px;
  }
  100% {
    width: 335px;
    height: 335px;
    opacity: 1;
  }
}

@keyframes business02 {
  25% {
    width: 80px;
    height: 80px;
  }
  100% {
    width: 335px;
    height: 335px;
    opacity: 1;
  }
}

@-webkit-keyframes business03 {
  25% {
    width: 80px;
    height: 80px;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 1;
  }
}

@keyframes business03 {
  25% {
    width: 80px;
    height: 80px;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 1;
  }
}

@media all and (min-width: 768px) {
  .vh_wrap {
    padding: 60px 0 80px;
  }
  .vh_wrap .center_wrap {
    height: calc(100vh - 140px);
  }
  .vh_wrap .center_wrap .text_box {
    left: 100px;
    width: calc(100% - 200px);
    max-width: 740px;
  }
  .vh_wrap .center_wrap .text_box h1 {
    font-size: 32px;
  }
  .vh_wrap .center_wrap .text_box p {
    font-size: 20px;
  }
  .vh_wrap.index_wrap {
    height: 100vh;
    margin: 0;
    padding: 60px 0 80px;
  }
  .vh_wrap.index_wrap .center_wrap .text_box {
    left: 60px;
  }
  .vh_wrap.index_wrap .center_wrap .text_box h1 {
    font-size: 32px;
  }
  .vh_wrap.index_wrap .center_wrap .text_box h1 span {
    font-size: inherit;
  }
  .vh_wrap.index_wrap .center_wrap .text_box h1::after {
    right: -30px;
    width: 16px;
    height: 24px;
  }
  .vh_wrap.index_wrap .center_wrap .round_box {
    right: -500px;
  }
  @-webkit-keyframes index01 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 1000px;
      height: 1000px;
      opacity: 1;
    }
  }
  @keyframes index01 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 1000px;
      height: 1000px;
      opacity: 1;
    }
  }
  @-webkit-keyframes index02 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 720px;
      height: 720px;
      opacity: 1;
    }
  }
  @keyframes index02 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 720px;
      height: 720px;
      opacity: 1;
    }
  }
  @-webkit-keyframes index03 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 440px;
      height: 440px;
      opacity: 1;
    }
  }
  @keyframes index03 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 440px;
      height: 440px;
      opacity: 1;
    }
  }
  .vh_wrap.hanwha_wrap .center_wrap .logo_img {
    width: 280px;
  }
  .vh_wrap.business_highlights_wrap {
    height: calc(100vh - 60px);
    margin-top: 60px;
  }
  .vh_wrap.business_highlights_wrap .center_wrap .text_box {
    top: 46%;
    max-width: 560px;
  }
  .vh_wrap.business_highlights_wrap .center_wrap .round_box {
    left: -220px;
  }
  @-webkit-keyframes highlights01 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 900px;
      height: 900px;
      opacity: 1;
    }
  }
  @keyframes highlights01 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 900px;
      height: 900px;
      opacity: 1;
    }
  }
  @-webkit-keyframes highlights02 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 600px;
      height: 600px;
      opacity: 1;
    }
  }
  @keyframes highlights02 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 600px;
      height: 600px;
      opacity: 1;
    }
  }
  .vh_wrap.hanwha_business_wrap {
    padding: 50px 0 0 0;
  }
  .vh_wrap.hanwha_business_wrap .center_wrap .text_box {
    top: 25%;
  }
  .vh_wrap.hanwha_business_wrap .center_wrap .text_box .sub_menu_box li a {
    font-size: 20px;
  }
  .vh_wrap.hanwha_business_wrap .center_wrap .round_box {
    right: -220px;
    bottom: 220px;
  }
  @-webkit-keyframes business01 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 820px;
      height: 820px;
      opacity: 1;
    }
  }
  @keyframes business01 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 820px;
      height: 820px;
      opacity: 1;
    }
  }
  @-webkit-keyframes business02 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 635px;
      height: 635px;
      opacity: 1;
    }
  }
  @keyframes business02 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 635px;
      height: 635px;
      opacity: 1;
    }
  }
  @-webkit-keyframes business03 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 420px;
      height: 420px;
      opacity: 1;
    }
  }
  @keyframes business03 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 420px;
      height: 420px;
      opacity: 1;
    }
  }
}

@media all and (min-width: 1200px) {
  .vh_wrap .center_wrap {
    height: calc(100vh - 140px);
  }
  .vh_wrap .center_wrap .text_box {
    left: 160px;
    width: calc(100% - 280px);
    max-width: none;
  }
  .vh_wrap .center_wrap .text_box h1 {
    font-size: 50px;
  }
  .vh_wrap .center_wrap .text_box p {
    font-size: 26px;
  }
  .vh_wrap.index_wrap .center_wrap .text_box {
    left: 120px;
  }
  .vh_wrap.index_wrap .center_wrap .text_box h1 {
    font-size: 58px;
  }
  .vh_wrap.index_wrap .center_wrap .text_box h1::after {
    right: -56px;
    width: 25px;
    height: 48px;
  }
  .vh_wrap.index_wrap .center_wrap .round_box {
    right: -500px;
  }
  @-webkit-keyframes index01 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 1362px;
      height: 1362px;
      opacity: 1;
    }
  }
  @keyframes index01 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 1362px;
      height: 1362px;
      opacity: 1;
    }
  }
  @-webkit-keyframes index02 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 962px;
      height: 962px;
      opacity: 1;
    }
  }
  @keyframes index02 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 962px;
      height: 962px;
      opacity: 1;
    }
  }
  @-webkit-keyframes index03 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 570px;
      height: 570px;
      opacity: 1;
    }
  }
  @keyframes index03 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 570px;
      height: 570px;
      opacity: 1;
    }
  }
  .vh_wrap.business_highlights_wrap {
    margin-top: 60px;
  }
  .vh_wrap.business_highlights_wrap .center_wrap .text_box {
    top: 46%;
    max-width: none;
  }
  .vh_wrap.business_highlights_wrap .center_wrap .text_box .mo_text {
    display: none;
  }
  .vh_wrap.business_highlights_wrap .center_wrap .text_box .pc_text {
    display: block;
  }
  .vh_wrap.business_highlights_wrap .center_wrap .round_box {
    left: -280px;
  }
  @-webkit-keyframes highlights01 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 1300px;
      height: 1300px;
      opacity: 1;
    }
  }
  @keyframes highlights01 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 1300px;
      height: 1300px;
      opacity: 1;
    }
  }
  @-webkit-keyframes highlights02 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 940px;
      height: 940px;
      opacity: 1;
    }
  }
  @keyframes highlights02 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 940px;
      height: 940px;
      opacity: 1;
    }
  }
  .vh_wrap.hanwha_business_wrap {
    padding: 50px 0 0 0;
  }
  .vh_wrap.hanwha_business_wrap .center_wrap .text_box {
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .vh_wrap.hanwha_business_wrap .center_wrap .text_box .sub_menu_box li a {
    font-size: 26px;
  }
  .vh_wrap.hanwha_business_wrap .center_wrap .round_box {
    right: -400px;
    top: 48%;
    -webkit-transform: translateY(-48%);
            transform: translateY(-48%);
    bottom: auto;
  }
  @-webkit-keyframes business01 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 1220px;
      height: 1220px;
      opacity: 1;
    }
  }
  @keyframes business01 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 1220px;
      height: 1220px;
      opacity: 1;
    }
  }
  @-webkit-keyframes business02 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 860px;
      height: 860px;
      opacity: 1;
    }
  }
  @keyframes business02 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 860px;
      height: 860px;
      opacity: 1;
    }
  }
  @-webkit-keyframes business03 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 510px;
      height: 510px;
      opacity: 1;
    }
  }
  @keyframes business03 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 510px;
      height: 510px;
      opacity: 1;
    }
  }
}

@media all and (min-width: 1400px) {
  .vh_wrap .center_wrap .text_box {
    left: 240px;
    width: calc(100% - 480px);
  }
  .vh_wrap.business_highlights_wrap .center_wrap .text_box {
    left: 240px;
    width: calc(100% - 480px);
  }
  .vh_wrap.business_highlights_wrap .center_wrap .round_box {
    left: -260px;
  }
  @-webkit-keyframes highlights01 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 1600px;
      height: 1600px;
      opacity: 1;
    }
  }
  @keyframes highlights01 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 1600px;
      height: 1600px;
      opacity: 1;
    }
  }
  @-webkit-keyframes highlights02 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 900px;
      height: 900px;
      opacity: 1;
    }
  }
  @keyframes highlights02 {
    25% {
      width: 80px;
      height: 80px;
    }
    100% {
      width: 900px;
      height: 900px;
      opacity: 1;
    }
  }
  .vh_wrap.hanwha_business_wrap {
    padding: 50px 0 0 0;
  }
  .vh_wrap.hanwha_business_wrap .center_wrap .text_box {
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .vh_wrap.hanwha_business_wrap .center_wrap .text_box .sub_menu_box li a {
    font-size: 26px;
  }
  .vh_wrap.hanwha_business_wrap .center_wrap .round_box {
    right: -220px;
  }
}