@charset 'UTF-8';
/** 
* reset
**/
:root {
  --blue: #4682b4;
  --bluetwo: #37B2EA;
  --bluethree: #4cbbc8;
  --orange: #ec8b19;
  --red: #e22373;
  --yellow: #f4aa07;
  --purple: #522173;
  --white: #e1e0de;
  --whitetwo : #ffffff;
}
/**
* common
**/
body {
  margin: 0;
  color: var(--whitetwo);
  font-family: sans-serif;
}
.wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
}
/**
* main
**/
.main {
  width: 404px;
  height: 417px;
  margin: 0 auto;
  top: 52%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  -webkit-animation: box_area 1s ease-in-out 2.5s infinite;
          animation: box_area 1s ease-in-out 2.5s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;  
}
@keyframes box_area {
  0% { top: 52%;}
  100% { top: 50%;}
}
/**
* title
**/
.c-title {
  position:
  absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 38%;
  opacity: 1;
}
.c-title-top {
  font-size: 24px;
  color: black;
  letter-spacing: -3px;
  line-height: 1;
  top: 12px;
  position: absolute;
  left: 15px;
  opacity: 0;
  -webkit-animation: title_top .3s ease-in-out 1s infinite;
          animation: title_top .3s ease-in-out 1s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
@keyframes title_top {
  0% { opacity: 0; transform: scale(0);}
  100% { opacity: 1; z-index: -1; transform: scale(1);}
}
.c-hexagon-box {
  --s: 52px;
  --r: 1.15; 
  --h: 0.5; 
  --v: 0.25; 
  --mv: 4px;
  --hc:calc(clamp(0,var(--h),0.5) * var(--s));
  --vc:calc(clamp(0,var(--v),0.5) * var(--s) * var(--r));
  --mh:calc(var(--mv) + (var(--s) - 2*var(--hc))/2);
  --f:calc(2*var(--s)*var(--r) + 4*var(--mv)  - 2*var(--vc) - 2px);
  grid-template-columns:
    repeat(
      auto-fit,
      calc(var(--s) + 2*var(--mh))
    );
  justify-content: center;
  margin: auto;
  border: 1px solid;
  resize: horizontal;
  font-size: 0;
}
.c-hexagon-box .c-hexagon {
  width: var(--s);
  margin: 0;
  height: calc(var(--s)*var(--r));
  display: inline-flex;
  font-size: 35px;
  clip-path: 
    polygon(var(--hc) 0,
      calc(100% - var(--hc)) 0,
      100% var(--vc),
      100% calc(100% - var(--vc)),
      calc(100% - var(--hc)) 100%,
      var(--hc) 100%,
      0 calc(100% - var(--vc)),
      0 var(--vc));
  background: var(--yellow);
  line-height: calc(var(--s)*var(--r));
  justify-content: center;
}
.c-title-middle {
  position: absolute;
  top: 40px;
  left: 64px;
  height: calc(var(--s)*var(--r));
  border: none;
}
.c-title-middle .c-hexagon {
  transform: scale(0);
  opacity: 0;
}
.c-title-middle .c-hexagon:nth-child(1) {
  top: 22px;
  left: 55px;
  -webkit-animation: hexagon_zoom .3s ease-in-out 1.2s infinite;
          animation: hexagon_zoom .3s ease-in-out 1.2s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
.c-title-middle .c-hexagon:nth-child(2) {
  top: 22px;
  left: 106px;
  -webkit-animation: hexagon_zoom .3s ease-in-out 1.6s infinite;
          animation: hexagon_zoom .3s ease-in-out 1.6s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
.c-title-middle .c-hexagon:nth-child(3) {
  top: 22px;
  left: 158px;
  -webkit-animation: hexagon_zoom .3s ease-in-out 1.5s infinite;
          animation: hexagon_zoom .3s ease-in-out 1.5s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
.c-title-middle .c-hexagon:nth-child(4) {
  top: 22px;
  left: 210px;
  -webkit-animation: hexagon_zoom .3s ease-in-out 1.1s infinite;
          animation: hexagon_zoom .3s ease-in-out 1.1s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
.c-title-bottom {
  position: absolute;
  top: 100px;
  left: 116px;
  height: calc(var(--s)*var(--r));
  border: none;
}
.c-title-bottom .c-hexagon {
  transform: scale(0);
  opacity: 0;
}
.c-title-bottom .c-hexagon:nth-child(1) {
  top: 50px;
  left: 55px;
  -webkit-animation: hexagon_zoom .3s ease-in-out 1.0s infinite;
          animation: hexagon_zoom .3s ease-in-out 1.0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1; 
}
.c-title-bottom .c-hexagon:nth-child(2) {
  top: 50px;
  left: 106px;
  -webkit-animation: hexagon_zoom .3s ease-in-out 1.7s infinite;
          animation: hexagon_zoom .3s ease-in-out 1.7s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1; 
}
.c-title-bottom .c-hexagon:nth-child(3) {
  top: 50px;
  left: 158px;
  -webkit-animation: hexagon_zoom .3s ease-in-out 1.4s infinite;
          animation: hexagon_zoom .3s ease-in-out 1.4s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1; 
}
.c-title-bottom .c-hexagon:nth-child(4) {
  left: 210px;
  top: 50px;
  -webkit-animation: hexagon_zoom .3s ease-in-out 1.3s infinite;
          animation: hexagon_zoom .3s ease-in-out 1.3s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;  
}
@keyframes hexagon_zoom {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; z-index: -1; transform: scale(1); }
}
/**
* c-box-left
**/
.c-box-left {
  position: absolute;
  top: 92px;
  left: 24px;
}
[class*=c-box-left-] {
  position:absolute;
}
.c-box-left .c-box-rhombus {
  position: absolute;
  width: 50px;
  height: 86px;
  transform: rotate(90deg);
}
.c-box-left .c-box-rhombus::before {
  content: "";
  width: 0;
  height: 0;
  border-right: 25px solid transparent;
  border-bottom: 43.3px solid var(--blue);
  border-left: 25px solid transparent;
  position: absolute;
}
.c-box-left .c-box-rhombus::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 43.3px solid var(--blue);
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  position: absolute;
  top: 50%;
}
.c-box-left-inner-one {
  -webkit-animation: c_box_down .2s ease-in-out 2.1s infinite;
          animation: c_box_down .2s ease-in-out 2.1s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
  opacity: 0;
  z-index: 4;
}
.c-box-left-inner-one .c-box-rhombus:nth-child(1){
  top: -14px;
  left: 15px;
}
.c-box-left-inner-one .c-box-rhombus:nth-child(1):before {
  border-bottom-color: var(--blue);
}
.c-box-left-inner-one .c-box-rhombus:nth-child(1):after {
  border-top-color: var(--bluetwo);
}
.c-box-left-inner-one .c-box-rhombus:nth-child(2){
  top: 23px;
  left: 37px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.c-box-left-inner-one .c-box-rhombus:nth-child(2):before {
  border-bottom-color: var(--orange);
}
.c-box-left-inner-one .c-box-rhombus:nth-child(2):after {
  border-top-color: var(--red);
}
.c-box-left-inner-one .c-box-rhombus:nth-child(3){
  top: 23px;
  left: -6px;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.c-box-left-inner-one .c-box-rhombus:nth-child(3):before {
  border-bottom-color: var(--bluethree);
}
.c-box-left-inner-one .c-box-rhombus:nth-child(3):after {
  border-top-color: var(--purple);
}
.c-box-left-inner-two {
  -webkit-animation: c_box_down .2s ease-in-out 2.0s infinite;
          animation: c_box_down .2s ease-in-out 2.0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
  opacity: 0;
  z-index: 3;
}
.c-box-left-inner-two .c-box-rhombus:nth-child(1){
  top: 35px;
  left: 15px;
}
.c-box-left-inner-two .c-box-rhombus:nth-child(1):before {
  border-bottom-color: var(--red);
}
.c-box-left-inner-two .c-box-rhombus:nth-child(1):after {
  border-top-color: var(--purple);
}
.c-box-left-inner-two .c-box-rhombus:nth-child(2){
  top: 72px;
  left: 37px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.c-box-left-inner-two .c-box-rhombus:nth-child(2):before {
  border-bottom-color: var(--bluetwo);
}
.c-box-left-inner-two .c-box-rhombus:nth-child(2):after {
  border-top-color: var(--blue);
}
.c-box-left-inner-two .c-box-rhombus:nth-child(3){
  top: 73px;
  left: -6px;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.c-box-left-inner-two .c-box-rhombus:nth-child(3):before {
  border-bottom-color: var(--blue);
}
.c-box-left-inner-two .c-box-rhombus:nth-child(3):after {
  border-top-color: var(--orange);
}
.c-box-left-inner-three {
  -webkit-animation: c_box_down .2s ease-in-out 1.9s infinite;
          animation: c_box_down .2s ease-in-out 1.9s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
  opacity: 0;
  z-index: 2;
}
.c-box-left-inner-three .c-box-rhombus:nth-child(1){
  top: 85px;
  left: 15px;
}
.c-box-left-inner-three .c-box-rhombus:nth-child(1):before {
  border-bottom-color: var(--bluethree);
}
.c-box-left-inner-three .c-box-rhombus:nth-child(1):after {
  border-top-color: var(--orange);
}
.c-box-left-inner-three .c-box-rhombus:nth-child(2){
  top: 122px;
  left: 37px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.c-box-left-inner-three .c-box-rhombus:nth-child(2):before {
  border-bottom-color: var(--purple);
}
.c-box-left-inner-three .c-box-rhombus:nth-child(2):after {
    border-top-color: var(--blue);
}
.c-box-left-inner-three .c-box-rhombus:nth-child(3){
  top: 123px;
  left: -6px;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.c-box-left-inner-three .c-box-rhombus:nth-child(3):before {
  border-bottom-color: var(--red);
}
.c-box-left-inner-three .c-box-rhombus:nth-child(3):after {
  border-top-color: var(--bluethree);
}
.c-box-left-inner-four {
  -webkit-animation: c_box_down .2s ease-in-out 1.8s infinite;
          animation: c_box_down .2s ease-in-out 1.8s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
  opacity: 0;
  z-index: 1;
}
.c-box-left-inner-four .c-box-rhombus:nth-child(1){
  top: 60px;
  left: 58px;
}
.c-box-left-inner-four .c-box-rhombus:nth-child(1):before {
  border-bottom-color: var(--blue);
}
.c-box-left-inner-four .c-box-rhombus:nth-child(1):after {
  border-top-color: var(--bluetwo);
}
.c-box-left-inner-four .c-box-rhombus:nth-child(2){
  top: 97px;
  left: 80px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.c-box-left-inner-four .c-box-rhombus:nth-child(2):before {
  border-bottom-color: var(--orange);
}
.c-box-left-inner-four .c-box-rhombus:nth-child(2):after {
  border-top-color: var(--red);
}
.c-box-left-inner-four .c-box-rhombus:nth-child(3){
  top: 97px;
  left: 37px;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.c-box-left-inner-four .c-box-rhombus:nth-child(3):before {
  border-bottom-color: var(--bluethree);
}
.c-box-left-inner-four .c-box-rhombus:nth-child(3):after {
  border-top-color: var(--purple);
}
/**
* c-box-right
**/
.c-box-right {
  position: absolute;
  top: 177px;
  left: 155px;
}
[class*=c-box-right-] {
  position:absolute;
}
.c-box-right .c-box-rhombus {
  position: absolute;
  width: 64px;
  height: 71px;
  opacity: 1;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.c-box-right .c-box-rhombus::before {
  content: "";
  width: 0;
  height: 0;
  border-right: 21px solid transparent;
  border-bottom: 36.4px solid var(--blue);
  border-left: 21px solid transparent;
  position: absolute;
}
.c-box-right .c-box-rhombus::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 36.4px solid var(--blue);
  border-right: 21px solid transparent;
  border-left: 21px solid transparent;
  position: absolute;
  top: 50%;
}
.c-box-right-inner-one {
  -webkit-animation: c_box_down .2s ease-in-out 1.9s infinite;
          animation: c_box_down .2s ease-in-out 1.9s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
  opacity: 0;
}
.c-box-right-inner-one .c-box-rhombus:nth-child(1){
  top: 3px;
  left: 72px;
}
.c-box-right-inner-one .c-box-rhombus:nth-child(1):before {
  border-bottom-color: var(--white);
}
.c-box-right-inner-one .c-box-rhombus:nth-child(1):after {
  border-top-color: var(--white);
}
.c-box-right-inner-one .c-box-rhombus:nth-child(2){
  top: 28px;
  left: 99px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.c-box-right-inner-one .c-box-rhombus:nth-child(2):before {
  border-bottom-color: var(--orange);
}
.c-box-right-inner-one .c-box-rhombus:nth-child(2):after {
  border-top-color: var(--red);
}
.c-box-right-inner-one .c-box-rhombus:nth-child(3){
  top: 17px;
  left: 63px;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.c-box-right-inner-one .c-box-rhombus:nth-child(3):before {
  border-bottom-color: var(--bluethree);
}
.c-box-right-inner-one .c-box-rhombus:nth-child(3):after {
  border-top-color: var(--purple);
}
.c-box-right-inner-two {
  -webkit-animation: c_box_down .2s ease-in-out 2.0s infinite;
          animation: c_box_down .2s ease-in-out 2.0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
  opacity: 0;
}
.c-box-right-inner-two .c-box-rhombus:nth-child(1){
  top: 44px;
  left: 0px;
}
.c-box-right-inner-two .c-box-rhombus:nth-child(1):before {
  border-bottom-color: var(--blue);
}
.c-box-right-inner-two .c-box-rhombus:nth-child(1):after {
  border-top-color: var(--bluetwo);
}
.c-box-right-inner-two .c-box-rhombus:nth-child(2){
  top: 69px;
  left: 27px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.c-box-right-inner-two .c-box-rhombus:nth-child(2):before {
  border-bottom-color: var(--orange);
}
.c-box-right-inner-two .c-box-rhombus:nth-child(2):after {
  border-top-color: transparent;
}
.c-box-right-inner-two .c-box-rhombus:nth-child(3){
  top: 58px;
  left: -9px;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.c-box-right-inner-two .c-box-rhombus:nth-child(3):before {
  border-bottom-color: var(--bluethree);
}
.c-box-right-inner-two .c-box-rhombus:nth-child(3):after {
  border-top-color: transparent;
}
.c-box-right-inner-three {
  -webkit-animation: c_box_down .2s ease-in-out 2.1s infinite;
          animation: c_box_down .2s ease-in-out 2.1s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
  opacity: 0;
}
.c-box-right-inner-three .c-box-rhombus:nth-child(1){
  top: 128px;
  left: -2px;
}
.c-box-right-inner-three .c-box-rhombus:nth-child(1):before {
  border-bottom-color: var(--blue);
}
.c-box-right-inner-three .c-box-rhombus:nth-child(1):after {
  border-top-color: var(--bluetwo);
}
.c-box-right-inner-three .c-box-rhombus:nth-child(2){
  top: 153px;
  left: 25px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.c-box-right-inner-three .c-box-rhombus:nth-child(2):before {
  border-bottom-color: var(--orange);
}
.c-box-right-inner-three .c-box-rhombus:nth-child(2):after {
  border-top-color: var(--red);
}
.c-box-right-inner-three .c-box-rhombus:nth-child(3){
  top: 142px;
  left: -11px;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.c-box-right-inner-three .c-box-rhombus:nth-child(3):before {
  border-bottom-color: var(--bluethree);
}
.c-box-right-inner-three .c-box-rhombus:nth-child(3):after {
  border-top-color: var(--purple);
}
.c-box-right-inner-four {
  -webkit-animation: c_box_down .2s ease-in-out 1.8s infinite;
          animation: c_box_down .2s ease-in-out 1.8s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
  opacity: 0;
}
.c-box-right-inner-four .c-box-rhombus:nth-child(1){
  top: 107px;
  left: 34px;
}
.c-box-right-inner-four .c-box-rhombus:nth-child(1):before {
  border-bottom-color: var(--red);
}
.c-box-right-inner-four .c-box-rhombus:nth-child(1):after {
  border-top-color: var(--purple);
}
.c-box-right-inner-four .c-box-rhombus:nth-child(2){
  top: 132px;
  left: 61px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.c-box-right-inner-four .c-box-rhombus:nth-child(2):before {
  border-bottom-color: var(--bluetwo);
}
.c-box-right-inner-four .c-box-rhombus:nth-child(2):after {
  border-top-color: var(--bluethree);
}
.c-box-right-inner-four .c-box-rhombus:nth-child(3){
  top: 121px;
  left: 25px;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.c-box-right-inner-four .c-box-rhombus:nth-child(3):before {
  border-bottom-color: var(--blue);
}
.c-box-right-inner-four .c-box-rhombus:nth-child(3):after {
  border-top-color: var(--orange);
}
.c-box-right-inner-five {
  -webkit-animation: c_box_down .2s ease-in-out 1.9s infinite;
          animation: c_box_down .2s ease-in-out 1.9s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
  opacity: 0;
}
.c-box-right-inner-five .c-box-rhombus:nth-child(1){
  top: 128px;
  left: 70px;
}
.c-box-right-inner-five .c-box-rhombus:nth-child(1):before {
  border-bottom-color: var(--blue);
}
.c-box-right-inner-five .c-box-rhombus:nth-child(1):after {
  border-top-color: var(--bluetwo);
}
.c-box-right-inner-five .c-box-rhombus:nth-child(2){
  top: 153px;
  left: 97px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.c-box-right-inner-five .c-box-rhombus:nth-child(2):before {
  border-bottom-color: var(--orange);
}
.c-box-right-inner-five .c-box-rhombus:nth-child(2):after {
  border-top-color: var(--red);
}
.c-box-right-inner-five .c-box-rhombus:nth-child(3){
  top: 142px;
  left: 61px;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.c-box-right-inner-five .c-box-rhombus:nth-child(3):before {
  border-bottom-color: var(--bluethree);
}
.c-box-right-inner-five .c-box-rhombus:nth-child(3):after {
  border-top-color: var(--purple);
}
.c-box-right-inner-six {
  -webkit-animation: c_box_down .2s ease-in-out 2.0s infinite;
          animation: c_box_down .2s ease-in-out 2.0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-transform: translateY(-100px);  
          transform: translateY(-100px);
  opacity: 0;
}
.c-box-right-inner-six .c-box-rhombus:nth-child(1){
  top: 87px;
  left: 141px;
}
.c-box-right-inner-six .c-box-rhombus:nth-child(1):before {
  border-bottom-color: var(--purple);
}
.c-box-right-inner-six .c-box-rhombus:nth-child(1):after {
  border-top-color: var(--blue);
}
.c-box-right-inner-six .c-box-rhombus:nth-child(2){
  top: 112px;
  left: 168px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.c-box-right-inner-six .c-box-rhombus:nth-child(2):before {
  border-bottom-color: var(--red);
}
.c-box-right-inner-six .c-box-rhombus:nth-child(2):after {
  border-top-color: transparent;
}
.c-box-right-inner-six .c-box-rhombus:nth-child(3){
  top: 101px;
  left: 132px;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.c-box-right-inner-six .c-box-rhombus:nth-child(3):before {
  border-bottom-color: var(--orange);
}
.c-box-right-inner-six .c-box-rhombus:nth-child(3):after {
  border-top-color: transparent;
}
@keyframes c_box_down{
  0% { opacity: 0; transform: translateY(-100px);}
  100% { opacity: 1; z-index: -1; transform: translateY(0px);}
}

@media (max-width: 767px) {
  .main {
    width: 375px;
    height: 403px;
    -webkit-transform: scale(.5) translate(-100%, -100%);
            transform: scale(.5) translate(-100%, -100%);
  }
}