/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

body {
  font-family: '微軟正黑體'!important;
}

/*header*/

/*告訴搜尋引擎選單要在背景上*/

#site-header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

/*選單滑鼠下滑效果*/

/* .elementor-sticky--effects {
  background-image: linear-gradient(to right, #4441D7BD, #E54661B3);
  transition: 0.5s ease;
} */

/*footer自訂*/

.foot {
  color: #ffffff;
  font-size: 16px;
  text-align: center;
}

.foot-kw {
  font-size: 16px;
}

.foot a, .foot-kw a {
  font-size: 16px;
  color: #fff;
}

#scroll-top {
  bottom: 21%;
}

.foot-ip-address {
  text-align: right;
}

/*Youtube CSS*/

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  text-align: center;
}

.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*表單checkbox樣式*/

input[type="checkbox"] {
  -webkit-appearance: checkbox;
}

/*聯絡我們辦公室地址CSS*/

.office-addres {
  font-size: 16px;
}

/*懸浮按鈕*/

.line {
  position: fixed;
  right: 1%;
  bottom: 11%;
}

.phone {
  position: fixed;
  right: 1%;
  bottom: 1%;
}

/*SEO案例表格*/

.seo-table {
  width: 80%;
  border-collapse: collapse;
  margin: 20px auto;
}

.seo-header {
  background-color: #7D3C98;
  color: white;
  font-weight: bold;
  padding: 12px;
  text-align: center;
}

.seo-row {
  border: 1px solid #ccc;
}

.alt-row {
  background-color: #f2f2f2;
}

.seo-cell {
  padding: 12px;
  text-align: center;
}

/*WG文章內相關文章*/

.wg-post {
  width: 30%;
  display: inline-grid;
  margin-right: 2%;
}

.wg-post-title {
  font-size: 16px;
}

/*文章樣式*/

.wg-article h2 {
  border-left: solid 5px;
  padding-left: 10px;
  margin-top: 5%;
  font-size: 28px;
  color: #D8465D;
}

.wg-article h3 {
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 3px;
  padding-bottom: 1px;
  margin-top: 5px;
  background: #3A89C9;
  color: #FFFFFF;
  border-radius: 15px;
  font-size: 22px;
}

.wg-article p {
  font-size: 18px;
  color: #3D4146;
  line-height: 2em;
}

.wg-article li {
  font-size: 18px;
  color: #3D4146;
  line-height: 2em;
}

.wg-article strong {
  color: #2E2E2E;
  background-color: #FFE689DE;
}

/*文章內表格樣式*/

.wg-article thead th {
  background-color: #D8465D;
  color: white;
  text-align: center;
  font-size: 16px;
}

.wg-article td {
  color: black;
  font-size: 16px;
  vertical-align: middle;
}

.wg-article .column-1 {
  text-align: center;
}

.wg-article .column-2 {
  text-align: center;
}

@media (max-width: 767px) {
    /* 1. 強制彈性盒子換行與對齊，並補上兩側安全邊距 */
    header .elementor-container,
    .site-header .elementor-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 2. 精準控制 Logo 欄位：佔 65% 寬度，並限制圖片高度避免過大 */
    header .elementor-container > .elementor-column:nth-child(1),
    .site-header .elementor-container > .elementor-column:nth-child(1) {
        width: 65% !important;
        max-width: 65% !important;
    }
    header .elementor-container > .elementor-column:nth-child(1) img {
        max-height: 36px !important; /* 控制 Logo 在手機板的精緻度，可自行微調 */
        width: auto !important;
        object-fit: contain;
    }

    /* 3. 精準控制漢堡選單欄位：佔 35% 寬度 */
    header .elementor-container > .elementor-column:nth-child(2),
    .site-header .elementor-container > .elementor-column:nth-child(2) {
        width: 35% !important;
        max-width: 35% !important;
    }

    /* 4. 讓漢堡選單靠右，但與邊緣保持呼吸空間 */
    header .elementor-container > .elementor-column:nth-child(2) .elementor-widget-container,
    .site-header .elementor-container > .elementor-column:nth-child(2) .elementor-widget-container {
        display: flex !important;
        justify-content: flex-end !important;
        padding-right: 5px !important; /* 調整此數值，決定漢堡與右邊邊緣的距離 */
    }
}

@media only screen and (max-width: 480px) {
  /*懸浮按鈕*/
  .line {
    right: 4%;
    bottom: 2%;
  }
  .phone {
    right: 4%;
    bottom: 13%;
  }
  #scroll-top {
    bottom: 24%;
  }
  h1.wg-slogan {
    font-size: 40px;
  }
  /*WG文章內相關文章*/
  .wg-post {
    width: 100%;
    display: block;
    margin-right: 2%;
    margin-bottom: 5%;
  }
  .wg-post-img {
    width: 20%;
    display: inline-block;
  }
  .wg-post-title {
    width: 70%;
    display: inline-block;
    padding-left: 8%;
    font-size: 14px;
    vertical-align: middle;
  }
}

/* 玩構品牌漸層文字特效 */
.iwango-text-gradient {
    background: linear-gradient(90deg, #95419d 0%,#53729d 50%, #E54661 100%);
    -webkit-background-clip: text; /* 讓背景只顯示在文字範圍 */
    background-clip: text;
    color: transparent; 
    display: inline-block;
}

/* 有時候需要強制覆蓋 */
.iwango-text-gradient h1,
.iwango-text-gradient h2,
.iwango-text-gradient h3,
.iwango-text-gradient span {
    background: linear-gradient(90deg, #2b94f0 0%, #E54661 25%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

/* 定義全域卡片懸浮特效 Class */
.hover-card {
    position: relative !important; /*讓連結的覆蓋範圍以此為邊界 */
    transition: all 0.3s ease; 
    cursor: pointer; 
}
.hover-card .elementor-button-link::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
    display: block !important;

}
.hover-card .elementor-widget-button,
.hover-card .elementor-button-wrapper,
.hover-card .elementor-button {
    position: static !important; /* 解除按鈕層級的定位限制 */
}
.hover-card:hover {
    transform: translateY(-2px) !important; /* 向上浮動 (加 !important 確保覆蓋預設值) */
}

/* 1. 基本按鈕樣式 */
.hover-btn-2 .elementor-button {
    position: relative;
    overflow: hidden;
    background-color: #f1f1f1; /* 初始底色 */
    color: #ffff !important;
    z-index: 1;
    transition: color 0.3s;
}

/* 2. 建立感應發光層 */
.hover-btn-2 .elementor-button::before {
    content: '';
    position: absolute;
    /* 使用 JS 傳入的變數來定位圓心 */
    left: var(--x);
    top: var(--y);
    /* 讓圓心置中於滑鼠游標 */
    width: 0px;
    height: 0px;
    /* 這裡設定發光的半徑與顏色 */
    box-shadow: 0 0 20px 20px rgba(99, 102, 241, 0.6); 
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -1;
}

/* 3. 滑鼠移入時顯示發光層 */
.hover-btn-2 .elementor-button:hover::before {
    opacity: 1;
}

.hover-btn-2 .elementor-button:hover {
    color: #ffffff !important;
		box-shadow:1px 2px 5px gray;
}
/* faq對話框 */
.FAQ-01 .elementor-toggle-item {
    border-radius: 20px !important; 
    overflow: hidden;               
    margin-bottom: 15px !important;
    border: 1px solid #e0e0e0 !important;
}

/* 成功案例 */
.rounded-post-img .elementor-post__thumbnail {
    border-radius: 20px !important; 
    overflow: hidden !important;   
}