@media (max-width: 600px) {
  #body-wrap .main .addit-wrap {
    padding: 10px 0px; }
  #body-wrap .main .btn {
    margin: 10px auto; }
  #body-wrap .main .result-info {
    text-align: center; } }

.main {
  margin-top: 30px; }
  .main .addit-wrap {
    width: 100%;
    margin-top: 10px;
    border-radius: 8px;
    padding: 15px 20px;
    background: #f8f8f8;
    box-shadow: -5px -5px 12px rgba(255, 255, 255, 0.5), 7px 7px 24px rgba(203, 208, 220, 0.5);
    box-sizing: border-box; }
    .main .addit-wrap h3 {
      cursor: pointer; }
    .main .addit-wrap i {
      font-size: 16px;
      transition: all 0.3s ease;
      transform: rotate(0deg); }
    .main .addit-wrap .form-wrap {
      overflow: hidden;
      opacity: 0;
      height: 0;
      transition: height 0.3s ease; }
      .main .addit-wrap .form-wrap .input {
        width: 97%; }
      .main .addit-wrap .form-wrap .result {
        margin-top: 20px;
        color: #24577B;
        font-weight: 600; }
  .main .open i {
    transform: rotate(180deg); }
  .main .open .form-wrap {
    margin-top: 10px;
    display: flex;
    flex-flow: column;
    opacity: 1;
    height: 240px; }
    .main .open .form-wrap i {
      transform: rotate(0deg); }
  .main .open .view-tier {
    width: 100%;
    max-width: 500px;
    margin: 40px auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px; }
  .main .tiers-item-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    position: relative;
    animation: ssss 0.5s cubic-bezier(0.14, 0.29, 1, -0.12) 0s 1 backwards; }
    .main .tiers-item-wrap .info {
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      display: flex;
      flex-flow: column nowrap;
      bottom: 0;
      width: 100%;
      z-index: 10;
      color: #24577B;
      height: 50px;
      font-size: 12px; }
      .main .tiers-item-wrap .info i {
        transform: none; }

@keyframes ssss {
  0% {
    transform: translateY(-80px);
    opacity: 0; }
  100% {
    transform: translateY(0px);
    opacity: 1; } }
  .main .tiers {
    position: absolute;
    height: 100%;
    top: -40%; }
    .main .tiers i {
      opacity: 0.6; }
    .main .tiers .ellipse, .main .tiers .ellipse2 {
      width: 100px;
      height: 100px;
      background: #24577B;
      -moz-border-radius: 100px / 50px;
      -webkit-border-radius: 100px / 50px;
      border-radius: 100% / 100%;
      border: 2px solid #fbfbfb;
      box-sizing: border-box; }
    .main .tiers .rectangle {
      width: 100px;
      height: 400px;
      position: absolute;
      opacity: 1;
      background: #24577B;
      top: 18%;
      z-index: -1;
      border-bottom: 4px solid white;
      box-sizing: border-box;
      position: absolute;
      border-radius: 10%; }
    .main .tiers .ellipse2 {
      bottom: -18%;
      position: absolute;
      border: none;
      border-bottom: 1px solid #fbfbfb; }