.b-info {
  background: #a7a9ac;
  padding: 80px 0 clamp(30px, 10vw, 120px);
}

.b-info__title {
  margin-bottom: 10px;
}

.b-info__text,
.b-info__text2 {
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.3;
}

.b-info__items {
  margin: clamp(30px, 5vw, 70px) 0;
}

.b-info__title2 {
  margin-top: clamp(30px, 3vw, 70px);
}

.b-info__bg--1 {
  left: 0;
  bottom: -50px;
}

.b-info__bg--1 * {
  transform: translateX(-80%);
}

.b-info__bg--2 {
  right: 0;
  top: 10%;
}

.b-info__bg--2 * {
  transform: translateX(90%);
}

.b-info__items {
  gap: 20px;
}

.b-info__item {
  flex: 1 1 100%;
}

.b-info__item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.b-info__item-content {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  gap: clamp(20px, 2vw, 30px);
  transition: 0.4s ease all;
  line-height: 1.2;
}

.b-info__item-content-in {
  max-width: 458px;
  flex: 1 1;
}

.b-info__item-text {
  font-size: clamp(16px, 2vw, 27px);
  transition: 0.4s ease all;
}

.b-info__item-title {
  transition: 0.4s ease all;
  font-family: 'Season Serif', 'Palatino Linotype', 'Georgia', 'Times New Roman', serif;
}

.b-info__item-btn {
  font-size: clamp(8px, 1vw, 13px);
  font-weight: bold;
  z-index: 2;
  padding: 1px 19px;
}

.b-info__item .ratio:before {
  padding-top: 61%;
}

@media screen and (min-width: 768px) {
  .b-info__item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(33.333% - 20px);
  }

  .b-info__item.full {
    flex: 1 1 100%;
    background: #3b3bf4;
    color: #fff;
    display: flex;
  }

  .b-info__item.full b,
  .b-info__item.full strong {
    color: #ffeb6c;
  }

  .b-info__item.full .b-info__item-content {
    padding: clamp(20px, 3vw, 50px);
    width: 50%;
  }

  .b-info__item.full .b-info__item-thumb {
    flex: 1 1;
  }

  .b-info__item.full .b-info__item-title {
    font-size: clamp(27px, 3.5vw, 83px);
    margin-bottom: 20px;
  }

  .b-info__item-btn {
    padding: 8px 25px;
  }

  .b-info__item .ratio:before {
    padding-top: 74%;
  }
}

@media screen and (min-width: 992px) {
  .b-info__text2 {
    margin-bottom: 40px;
  }

  .b-info__btn {
    margin-bottom: 32px;
  }

  .b-info__bg--1 * {
    transform: translateX(-30%);
  }

  .b-info__bg--2 {
    top: 20%;
  }

  .b-info__bg--2 * {
    transform: translateX(60%);
  }
}

@media screen and (min-width: 1200px) {
  .b-info__item.part .b-info__item-content {
    color: #fff;
    position: absolute;
    z-index: 1;
    background: rgba(0,0,0,0.44);
    padding: clamp(20px, 2vw, 40px);
  }

  .b-info__item.part .b-info__item-text {
    position: absolute;
    padding: clamp(20px, 2vw, 40px);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    max-width: 360px;
    opacity: 0;
  }

  .b-info__item.part .b-info__item-title {
    font-size: clamp(27px, 2vw, 34px);
  }

  .b-info__item.part .ratio:before {
    padding-top: 74%;
  }

  .b-info__item.part:hover .b-info__item-content {
    background: rgba(255,78,75,0.85);
  }

  .b-info__item.part:hover .b-info__item-text {
    opacity: 1;
  }

  .b-info__item.part:hover .b-info__item-title {
    opacity: 0;
  }
}

@media screen and (max-width: 991px) {
  .b-info__bg--1 * {
    width: 30vw;
  }

  .b-info__bg--2 * {
    width: 60vw;
  }

  .b-info__img {
    margin: 40px -90px;
  }
}

@media screen and (max-width: 767px) {
  .b-info__item-content {
    color: #fff;
    position: absolute;
    z-index: 1;
    background: rgba(0,0,0,0.44);
    padding: clamp(20px, 2vw, 40px);
  }

  .b-info__item-text {
    position: absolute;
    padding: clamp(20px, 2vw, 40px);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    max-width: 360px;
    opacity: 0;
  }

  .b-info__item-title {
    font-size: 34px;
  }

  .b-info__item:hover .b-info__item-content {
    background: rgba(255,78,75,0.85);
  }

  .b-info__item:hover .b-info__item-text {
    opacity: 1;
  }

  .b-info__item:hover .b-info__item-title {
    opacity: 0;
  }
}

@media screen and (max-width: 575px) {
  .b-info__btn {
    width: 100%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  .b-info__item.part {
    flex: 1 1 100%;
    background: #3b3bf4;
    color: #fff;
    display: flex;
  }

  .b-info__item.part:nth-child(even) {
    background: rgba(255,78,75,0.85);
    flex-direction: row-reverse;
  }

  .b-info__item.part .b-info__item-content {
    padding: clamp(20px, 3vw, 50px);
    width: 50%;
  }

  .b-info__item.part .b-info__item-thumb {
    flex: 1 1;
  }

  .b-info__item.part .b-info__item-title {
    font-size: clamp(27px, 3.5vw, 83px);
    margin-bottom: 20px;
  }
}


#typeformDynamicModal .btn-close {
  position: absolute; 
  right: 10px; 
  top: 10px; 
  z-index: 5; 
  opacity: 1;
}

#typeformDynamicModal .modal-body {
  padding: 0 0;
}



.b-info__img {
  height: clamp(440px, 20vw, 480px);
}

.b-info__img > img {
  opacity: 0;
  display: none;
}

.b-info__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-55%, -60%);
}

.b-info__icon svg {
  width: clamp(108px, 10vw, 168px);
  height: clamp(108px, 10vw, 168px);
  animation: rotate 200s linear infinite;
}

.b-info__logo1,
.b-info__logo2,
.b-info__logo3 {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
}

.b-info__logo1:before,
.b-info__logo2:before,
.b-info__logo3:before {
  content: '';
  display: block;
  position: absolute;
  background: #ffeb6c;
}

.b-info__logo1 img,
.b-info__logo2 img,
.b-info__logo3 img {
  object-fit: contain;
}

.b-info__circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 1;
}

.b-info__circle:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: inherit;
  z-index: -1;
}

.b-info__logo1 {
  width: clamp(110px, 13vw, 160px);
  height: clamp(110px, 13vw, 160px);
  transform: translate(-189%, -49%);
}

.b-info__logo1:before {
  left: 50%;
  top: 50%;
  height: 3px;
  width: 139%;
  z-index: -1;
  transform: rotate(-5deg);
  transform-origin: left;
}

.b-info__logo1 .b-info__circle:before {
  animation: pulse 2.5s ease-in-out infinite;
}

.b-info__logo2 {
  width: clamp(160px, 13vw, 220px);
  height: clamp(160px, 13vw, 220px);
  transform: translate(39%, -99%);
}

.b-info__logo2:before {
  right: 50%;
  top: 50%;
  height: 2px;
  width: 99%;
  z-index: -1;
  transform-origin: right;
  transform: rotate(-24.5deg);
}

.b-info__logo2 .b-info__circle:before {
  animation: pulse 4.5s ease-in-out infinite;
}

.b-info__logo3 {
  width: clamp(80px, 13vw, 120px);
  height: clamp(80px, 13vw, 120px);
  transform: translate(-4%, 73%);
}


.b-info__logo3:before {
  right: 50%;
  top: 50%;
  height: 1px;
  width: 147%;
  z-index: -1;
  transform-origin: right;
  transform: rotate(71deg);
}

.b-info__logo3 .b-info__circle:before {
  animation: pulse 5.5s ease-in-out infinite;
}

.b-info__logo1 img {
  max-height: 23%;
  max-width: 83%;
}

.b-info__logo2 img {
  max-height: 54%;
}

.b-info__logo3 img {
  max-height: 26%;
  max-width: 70%;
}


@-moz-keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@-o-keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@-moz-keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@-o-keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}