/**
 * AIO是什麼頁面樣式
 * page-what-is-aio.php
 *
 * @package mytheme
 */

/* AIO 是什麼? */
.what-is-aio-section {
 padding: 141px 0 122px;
}

.key-features-container {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 max-width: 876px;
 width: 100%;
 margin-top: 102px;
}

.what-item-title {
 font-size: 1.75rem;
 margin-bottom: 24px;
 padding: 10px 52px;
 color: #000;
 background: #F2F2F2;
 border-radius: 3rem;
 border: 2px solid #000;
}

.key-features-container p {
 display: flex;
 padding-left: 40px;
 gap: 40px;
}

/* AIO 行銷 */
.aio-marketing-section {
 padding: 60px 0 122px;
}

.aio-marketing-items {
 display: flex;
 flex-direction: column;
 margin-top: 110px;
 width: 100%;
 max-width: 1175px;
 gap: 52px;
}

.aio-marketing-item {
 display: flex;
 flex-direction: row;
}

.aio-title {
 display: flex;
 width: 100%;
 max-width: 470px;
 align-items: center;
}

.aio-item-title {
 position: relative;
 padding: 8px 45px;
 background: #fff;
 border-radius: 54px;
 border: 3px solid #000;
 z-index: 5;
 display: inline-block;
 white-space: nowrap;
}

.yellow-ball-img {
 position: relative;
 z-index: 1;
 right: 25px;
 height: 42px;
}

/* AIO SEO是什麼? */
.geo-seo-section {
 padding: 70px 0 145px;
}

.compare-container {
 display: flex;
 flex-direction: row;
 gap: 40px;
 max-width: 1480px;
 width: 100%;
 position: relative;
 justify-content: center;
 margin-top: 76px;
}

.VS-img {
 position: absolute;
 max-width: 192px;
 width: 100%;
 height: auto;
 top: 38%;
 z-index: 1;
}

.compare-seo {
 position: relative;
 display: flex;
 flex-direction: column;
 max-width: 720px;
 width: 100%;
 align-items: center;
 border: 3px solid #000;
}

.google-icon {
 position: absolute;
 bottom: 150px;
 right: 55px;
}

.compare-geo {
 position: relative;
 display: flex;
 flex-direction: column;
 max-width: 720px;
 width: 100%;
 align-items: center;
 border: 3px solid #000;
 padding-bottom: 40px;
}

.chatgpt-icon {
 position: absolute;
 bottom: 60px;
 right: 48px;
}

.compare-items {
 display: flex;
 flex-direction: column;
 margin-top: 40px;
 gap: 80px;
}

.compare-item {
 display: flex;
 flex-direction: column;
}

.compare-title {
 font-size: 2rem;
 padding: 30px 0 18px;
 width: 100%;
 text-align: center;
 background: #FFFcd7;
 white-space: nowrap;
 border-bottom: 18px solid #ffd036;
}

.item-red-title {
 font-size: 1.875rem;
 color: #960000;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 12px;
}

.item-red-title::before,
.item-red-title::after {
 content: "";
 flex: 1;
 /* 兩邊線會自動延伸，不會換行 */
 height: 1.5px;
 /* 線的粗度 */
 background-color: #960000;
 /* 線的顏色 */
 max-width: 60px;
 /* 線不要太長 */
}

.seo-compare-item-text {
 text-align: center;
 max-width: 510px;
 width: 100%;
}

.geo-compare-item-text {
 text-align: left;
 max-width: 490px;
 width: 100%;
}

/* 瓦吉 AIO說明 */
.aio-img-section {
 padding-bottom: 105px;
}

.aio-img-container {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.text-frame {
 position: absolute;
 margin-left: 45px;
}

.aio-img-text {
 font-size: 1.875rem;
 max-width: 486px;
 width: 100%;
 z-index: 1;
 padding-top: 27px;
 line-height: 1.5;
 margin-left: 45px;
}

.text-frame-bg {
 margin-top: -205px;
}

@media (max-width: 1440px) {
 .compare-container {
  gap: 65px;
 }

 .VS-img {
  max-width: 155px;
  height: 155px;
  top: 40%;
 }
}

@media (max-width: 1024px) {

 /* AIO 行銷 */
 .aio-marketing-item {
  gap: 15px;
  flex-direction: column;
 }

 /* AIO SEO */
 .compare-container {
  margin-top: 12px;
  flex-direction: column;
  gap: 125px;
  align-items: center;
 }

 .compare-seo {
  padding-bottom: 60px;
 }

 .VS-img {
  top: 44.4%;
 }
}

@media (max-width: 768px) {

 /* AIO SEO */
 .compare-container {
  gap: 105px;
 }

 .VS-img {
  top: 43.8%;
 }

 .chatgpt-icon {
  bottom: 35px;
  right: 30px;
 }

 .google-icon {
  bottom: 50px;
  right: 35px;
 }

 /* 瓦吉AIO說明 */
 .aio-img-text {
  font-size: 1.5rem;
  max-width: 360px;
  padding-top: 15px;
 }

 .text-frame {
  max-width: 435px;
 }

 .text-frame-bg {
  margin-top: -155px;
  max-width: 710px;
 }
}

@media (max-width: 480px) {

 /* AIO是什麼 */
 .what-is-aio-section {
  padding: 16px 0 95px;
 }

 .key-features-container {
  margin-top: 12px;
 }

 .what-item-title {
  padding: 6px 16px;
  border: 1px solid #000;
  margin-bottom: 9px;
 }

 .key-features-container p {
  padding-left: 22px;
  max-width: 255px;
 }

 /* AIO行銷 */
 .aio-marketing-section {
  padding: 0;
  padding-bottom: 24px;
  background-image: url('../../images/AIO行銷說明底圖_RWD.webp') !important;
  background-size: cover;
  background-position: center;
 }

 .aio-marketing-section .Pagination-section-title {
  margin-top: -14px;
 }

 .aio-marketing-items {
  gap: 16px;
  margin-top: 12px;
 }

 .aio-marketing-item {
  flex-direction: column;
  gap: 9px;
 }

 .aio-item-title {
  padding: 3px 15px;
  border: 1px solid #000;
 }

 .yellow-ball-img {
  height: 14px;
  width: auto;
  right: 8px;
 }

 /* AIO SEO */
 .geo-seo-section {
  padding: 56px 0;
 }

 .compare-items {
  gap: 18px;
  margin-top: 12px;
 }

 .item-red-title {
  gap: 4px;
 }

 .item-red-title::before,
 .item-red-title::after {
  height: 0.5px;
  max-width: 18px;
 }

 .compare-container {
  margin-top: 12px;
  flex-direction: column;
  gap: 36px;
  align-items: center;
  margin-top: 28px;
 }

 .compare-title {
  padding: 10px 6px;
  width: 100%;
  text-align: center;
  border-bottom: 6px solid #ffd036;
 }

 .seo-compare-item-text {
  text-align: center;
 }

 .geo-compare-item-text {
  max-width: 220px;
  text-align: left;
 }

 .compare-seo {
  padding-bottom: 24px;
  border: 1px solid #000;
 }

 .compare-geo {
  padding-bottom: 15px;
  border: 1px solid #000;
 }

 .VS-img {
  max-width: 48px;
  height: auto;
  top: 45.3%;
  left: 50%;
  transform: translate(-50%, -50%);
 }

 .google-icon {
  height: 30px;
  width: auto;
  bottom: 20px;
  right: 20px;
 }

 .chatgpt-icon {
  height: 30px;
  width: auto;
  bottom: 16px;
  right: 16px;
 }

 /* 瓦吉AIO說明 */
 .aio-img-section {
  padding: 0;
  padding-bottom: 6px;
 }

 .text-frame-bg {
  margin-top: -70px;
  width: 330px;
  max-width: 330px;
 }

 .text-frame {
  margin-left: 15px;
  max-width: 210px;
 }

 .aio-img-text {
  max-width: 185px;
  font-size: 12px !important;
  width: 100%;
  z-index: 1;
  padding-top: 6px;
  line-height: 1.45;
  margin-left: 15px;
 }
}