/*=================================*/
/*============ 預設區塊 ============*/
/*=================================*/
.MOBILE_JPFATE {
  width: 100vw;
  color: var(--color-black-a2);
  font-size: var(--font-primary);
  font-family: var(--font-family-tw);
  box-sizing: border-box;
  background-color: var(--color-section-jpa1);
}

/* 連結 */
/* a {
    text-decoration: none;
} */

/* 字級：一般內文 1.1rem */
.PC_JPFATE .txt-primary {
  font-size: var(--font-primary);
}

.MOBILE_JPFATE .txt-primary {
  font-size: var(--font-secondary);
}

/* 字級：一般內文 1rem */
.PC_JPFATE .main_body .txt-secondary {
  font-size: var(--font-secondary);
}

.MOBILE_JPFATE .main_body .txt-secondary {
  font-size: var(--font-note);
}

/* 字級：一般內文 0.9rem */
.PC_JPFATE .main_body .txt-note {
  font-size: var(--font-note);
}

.MOBILE_JPFATE .main_body .txt-note {
  font-size: var(--font-note);
}

/* 字級：標題樣式(常用)1.1rem、行高1.6rem */
.PC_JPFATE .main_body .txt-title-a1 {
  font-size: var(--font-primary);
  line-height: var(--line-height-secondary);
}

.MOBILE_JPFATE .main_body .txt-title-a1 {
  font-size: var(--font-secondary);
  line-height: var(--line-height-normal);
}

/* 字級：標題樣式 1.3rem */
.PC_JPFATE .main_body .txt-title-h5 {
  font-size: var(--font-h5);
}

.MOBILE_JPFATE .main_body .txt-title-h5 {
  font-size: var(--font-h6);
}

/* 字級：標題樣式 1.2rem */
.PC_JPFATE .main_body .txt-title-h6 {
  font-size: var(--font-h6);
}

.MOBILE_JPFATE .main_body .txt-title-h6 {
  font-size: var(--font-primary);
}

/* 字級：標題樣式 1.2rem */
.main_body .txt-title-a2 {
  font-size: 1.2rem;
}

/* 字級：標題樣式 1.5rem、行高2.2rem */
.main_body .txt-title-b1 {
  font-size: var(--font-h4);
  line-height: var(--line-height-h3);
}

/* 字級：粗體 */
.main_body .txt-bold {
  font-weight: var(--font-weight-bold);
}

/* 自訂顏色：日本命理館 */
.main_body .jp-color-blue {
  color: var(--color-blue-jpa1);
}

.main_body .jp-color-pink {
  color: var(--color-pink-jpa3);
}

.main_body .jp-color-gray {
  color: var(--color-gray-jpa1);
}

.main_body .jp-color-orange {
  color: var(--color-orange-jpa1);
}

.main_body .jp-color-red {
  color: var(--color-red-jpa1);
}

.main_body .jp-color-purple {
  color: var(--color-purple-jpa1);
}

.main_body .jp-color-green {
  color: var(--color-green-jpa1);
}

/* 間距 */
.blank_br {
  height: var(--blank-lv40);
}

/* 消失區塊 */
.PC_JPFATE .for_mb {
  display: none;
}

.MOBILE_JPFATE .for_pc {
  display: none;
}

.PC_JPFATE .main_body .card_board_frame .for_mb {
  display: block;
}

.MOBILE_JPFATE .main_body .card_board_frame .for_mb {
  display: none;
}

/* 控制單行文字超過顯示⋯ */
.main_body .multiline-ellipsis-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* 控制雙行文字超過顯示⋯ */
.main_body .multiline-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 控制三行文字超過顯示⋯ */
.main_body .multiline-ellipsis-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/*=====================================*/
/*============ 整體框架 區塊 ============*/
/*=====================================*/
/* 01、主體區塊 */
.PC_JPFATE .main_body {
  width: 100%;
  height: auto;
}

.PC_JPFATE .main_body .main_case {
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 40px;
}

.MOBILE_JPFATE .main_body .main_case {
  width: 100%;
  height: auto;
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 40px;
}

/*=====================================*/

/* 02、章節區塊 */
.PC_JPFATE .main_body section.stage_case {
  width: 100%;
  height: auto;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px 0px 0px 20px;
}

.MOBILE_JPFATE .main_body section.stage_case {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding-bottom: 35px;
}

/* 首頁：輪播區塊 */
.PC_JPFATE .main_body .box_content_slide {
  width: 100%;
  height: auto;
}

.MOBILE_JPFATE .main_body .box_content_slide {
  width: 100%;
  height: auto;
  padding: 0% 4%;
  box-sizing: border-box;
}

/* flex樣式 */
.main_body .flex_row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/*=====================================*/

/* 03、包裝主題背景區塊 */
/* 章節背景底色：#F8F4E9 */
.main_body .bgcolor-a1 {
  background-color: var(--color-section-jpa1);
}

/* 章節背景底色：#F7EED7(日本全館章節使用) */
.main_body .bgcolor-a2 {
  background-color: var(--color-section-jpa2);
}

/* 章節背景底色：#B29079(手機版表尾：品牌追蹤與APP下載使用) */
.main_body .bgcolor-a3 {
  background-color: var(--color-section-jpa3);
}

/* 章節背景底色：#D6E4ED(表尾：品牌綁定LINE使用) */
.main_body .bgcolor-brand-a1 {
  background-color: var(--color-blue-jpa2);
}

/* 章節背景底色：#E4D6EA(表尾：關於科技紫微網使用) */
.main_body .bgcolor-brand-a2 {
  background-color: var(--color-purple-jpa2);
}

/*=====================================*/

/* 04、背景底色區塊(標籤使用)*/
/* 背景紅色：#D86A6A */
.main_body .bgcolor-red {
  background-color: var(--color-red-jpa1);
}

/* 背景紫色：#A475D1 */
.main_body .bgcolor-purple {
  background-color: var(--color-purple-jpa1);
}

/* 背景綠色：#7AB75A */
.main_body .bgcolor-green {
  background-color: var(--color-green-jpa1);
}

/*====================================*/
/*============ 章節段落區塊 ============*/
/*====================================*/
.PC_JPFATE .main_body .section_block {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 40px 0px;
}

.MOBILE_JPFATE .main_body .section_block {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding-bottom: 30px;
}

/*=====================================*/
/*============ 主體內容 區塊 ============*/
/*=====================================*/
/* 主體盒子 */
.main_body .case_box {
  width: 100%;
  height: auto;
}

/* 主體欄位寬度：PC左欄MENU */
.PC_JPFATE .main_body .width_side_a {
  width: 15%;
  padding: 20px 0px 0px 0px;
  box-sizing: border-box;
}

.MOBILE_JPFATE .main_body .width_side_a {
  display: none;
}

/* 主體欄位寬度：PC右欄舞台區塊 */
.PC_JPFATE .main_body .width_side_b {
  width: 85%;
}

.MOBILE_JPFATE .main_body .width_side_b {
  width: 100%;
}

/*====================================*/
/*============ PC 瀏覽紀錄 ============*/
/*====================================*/
.main_body .track_case {
  width: 40px;
  height: 135px;
  overflow: hidden;
  position: fixed;
  right: 0px;
  top: 200px;
  background-color: var(--color-blue-jpa1);
  border-top-left-radius: var(--border-radius-small);
  border-bottom-left-radius: var(--border-radius-small);
  z-index: 100;
  transition: all var(--trans-effect-e3);
}

.main_body .track_case a {
  display: block;
  width: 100%;
  height: 135px;
  line-height: 40px;
  writing-mode: vertical-lr;
  color: white;
  font-size: var(--font-h6);
  letter-spacing: 3px;
  text-align: center;
}

.main_body .track_case:hover {
  filter: brightness(1.2);
  transition: all var(--trans-effect-e3);
}

.main_body .track_case span.track_iconph {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../image/function_bt_white.png) no-repeat center;
  background-size: cover;
  transform: rotate(180deg);
}

/*=====================================*/
/*============= PC MENU區塊 ============*/
/*=====================================*/
.PC_JPFATE .main_body .menu_pc {
  width: 100%;
  height: auto;
}

.MOBILE_JPFATE .main_body .menu_pc {
  display: none;
}

.PC_JPFATE .main_body .menu_pc nav {
  width: 100%;
  height: auto;
  background-color: white;
  border-radius: var(--border-radius-small);
  overflow: hidden;
}

.MOBILE_JPFATE .main_body .menu_pc nav {
  display: none;
}

.main_body .menu_titlebar {
  font-size: var(--font-h4);
  font-weight: var(--font-weight-bold);
  color: white;
  padding: 3% 10%;
  box-sizing: border-box;
  background-color: var(--color-blue-jpa1);
  margin-bottom: 5%;
}

.main_body .menu_pc nav ul {
  margin-bottom: 5%;
}

.main_body .menu_pc nav li {
  width: 100%;
  padding: 0% 10%;
  box-sizing: border-box;
}

.main_body .menu_pc nav li a {
  display: block;
  width: 100%;
  color: var(--color-gray-jpa1);
  font-size: var(--font-h6);
  line-height: var(--line-height-secondary);
  padding: 7% 0%;
  transition: all var(--trans-effect-e3);
}

.main_body .menu_pc nav li a:hover {
  transform: translateX(10px);
}

/*=====================================*/

/* MENU被選擇樣式 */
.main_body .menu_pc nav li.active_link,
.main_body .menu_pc nav li.active_link a {
  background-color: var(--color-blue-jpa3);
  color: var(--color-pink-jpa1);
  font-weight: var(--font-weight-bold);
}

.main_body .menu_pc nav li:hover {
  background-color: var(--color-blue-jpa3);
}

/*=======================================*/
/*============ 手機：置頂MENU ============*/
/*=======================================*/
.main_body .menu_top_mb {
  position: relative;
  width: 100%;
  height: auto;
  position: fixed;
  left: 0;
  top: 45px;
  z-index: 100;
  box-shadow: var(--box-shadow-topmenu-mb);
}

.main_body .nav_topbar {
  width: 100%;
  height: auto;
  background-color: white;
}

.main_body .nav_top_item {
  width: 2000px;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.main_body .nav_top_item li {
  position: relative;
  width: auto;
  height: auto;
  padding: 0px 10px;
}

.main_body .nav_top_item li.nav_top_active a {
  display: block;
  font-weight: var(--font-weight-bold);
  background-color: var(--color-blue-jpa2);
  color: var(--color-pink-jpa1);
  width: 100%;
  padding: 5px 10px;
  border-radius: var(--border-radius-round);
}

.main_body .nav_top_item li::after {
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(-50%, -50%);
  content: '';
  display: inline-block;
  width: 1px;
  height: 18px;
  border-right: 1px solid var(--color-black-b2);
}

.main_body .nav_top_item li:last-child::after {
  display: none;
}

.main_body .nav_top_item li a {
  display: block;
  font-size: var(--font-primary);
  color: var(--color-gray-jpa1);
}

/*=====================================*/

.main_body .nav_top_arrow {
  position: absolute;
  top: 0%;
  right: 0%;
  width: 50px;
  height: 50px;
}

.main_body .nav_top_arrow a {
  display: block;
  width: 100%;
  height: 50px;
  background: url(../image/function_bt_white.png) no-repeat center;
  background-size: 25px 25px;
  background-color: var(--color-blue-jpa1);
  transform: rotate(90deg);
}

/*=======================================*/
/*============ 手機：置底MENU ============*/
/*=======================================*/
.MOBILE_JPFATE .main_body .menu_mb {
  width: 100%;
  height: 60px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
}

.MOBILE_JPFATE .main_body .nav_bar {
  width: 100%;
  height: 60px;
  background-color: var(--color-blue-jpa1);
  box-shadow: var(--box-shadow-menu-mb);
}

.MOBILE_JPFATE .main_body .nav_bar ul.nav_item {
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 2% 5%;
  box-sizing: border-box;
}

.MOBILE_JPFATE .main_body .nav_bar ul.nav_item a {
  display: block;
  width: calc(100% / 5);
  height: auto;
}

.MOBILE_JPFATE .main_body .nav_bar ul.nav_item li {
  width: 100%;
  height: auto;
}

.MOBILE_JPFATE .main_body .nav_bar ul.nav_link_area {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.MOBILE_JPFATE .main_body .nav_bar ul.nav_link_area li {
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 0.7rem;
  color: white;
}

.MOBILE_JPFATE .main_body .nav_bar ul.nav_link_area li.nav_iconph {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto;
}

/*=====================================*/

/*  置底MENU icon */
.MOBILE_JPFATE .main_body .icon_item01 {
  background: url(../image/menu_icon_m1.png) no-repeat center;
  background-size: 25px auto;
}

.MOBILE_JPFATE .main_body .icon_item02 {
  background: url(../image/menu_icon_m2.png) no-repeat center;
  background-size: 25px auto;
}

.MOBILE_JPFATE .main_body .icon_item03 {
  background: url(../image/menu_icon_m3.png) no-repeat center;
  background-size: 25px auto;
}

.MOBILE_JPFATE .main_body .icon_item04 {
  background: url(../image/menu_icon_m4.png) no-repeat center;
  background-size: 25px auto;
}

.MOBILE_JPFATE .main_body .icon_item05 {
  background: url(../image/menu_icon_m5.png) no-repeat center;
  background-size: 25px auto;
}

/*=============================================*/
/*============ 手機：中間頁籤MENU區塊 ============*/
/*=============================================*/
.MOBILE_JPFATE .main_body .sec_menu {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  background-color: #f2f2f2;
}

.PC_JPFATE .main_body .sec_menu nav {
  display: none;
}

.MOBILE_JPFATE .main_body .sec_menu nav {
  width: 2000px;
  height: auto;
  box-sizing: border-box;
}

.MOBILE_JPFATE .main_body .sec_menu ul {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.MOBILE_JPFATE .main_body .sec_menu li {
  width: auto;
  height: auto;
  position: relative;
}

.MOBILE_JPFATE .main_body .sec_menu li::after {
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(-50%, -50%);
  content: '';
  display: inline-block;
  width: 1px;
  height: 30px;
  border-right: 1px solid #D4D4D4;
}

.MOBILE_JPFATE .main_body .sec_menu li:last-child::after {
  display: none;
}

.MOBILE_JPFATE .main_body .sec_menu li:first-child::after {
  display: none;
}

.MOBILE_JPFATE .main_body .sec_menu li a {
  display: block;
  width: 100%;
  height: auto;
  text-align: center;
  font-size: var(--font-h6);
  color: var(--color-gray-jpa1);
  box-sizing: border-box;
  padding: 10px 15px;
}

.MOBILE_JPFATE .main_body .sec_menu li.active_secmenu a {
  font-size: var(--font-h6);
  color: var(--color-pink-jpa1);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-blue-jpa2);
}

/*=====================================*/
/*============ 主體舞台 區塊 ============*/
/*=====================================*/
.PC_JPFATE .main_body .main_stage {
  width: 100%;
  height: auto;
}

.MOBILE_JPFATE .main_body .main_stage {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: 45px;
}

/* 階段區塊 */
.PC_JPFATE .main_body .slide_case {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
}

.MOBILE_JPFATE .main_body .slide_case {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
}

/* 輪播區塊 */
.PC_JPFATE .main_body .slide_box {
  width: 10000px;
  height: 400px;
}

.MOBILE_JPFATE .main_body .slide_box {
  width: 100%;
  height: auto;
}

.PC_JPFATE .main_body .slide_box ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
}

.MOBILE_JPFATE .main_body .slide_box ul {
  width: 100%;
  height: 0px;
  padding-bottom: 52.3333%;
  background-size: cover;
  overflow: hidden;
}

.PC_JPFATE .main_body .slide_box li {
  width: 765px;
  height: 100%;
  margin-right: 20px;
  border-radius: var(--border-radius-small);
  overflow: hidden;
}

.MOBILE_JPFATE .main_body .slide_box li {
  float: left;
  width: 100%;
  height: 0px;
  padding-bottom: 52.3333%;
  background-size: cover;
  border-radius: var(--border-radius-small);
  overflow: hidden;
}

.PC_JPFATE .main_body .slide_box li a {
  display: block;
  width: 100%;
  height: auto;
  transition: all var(--trans-effect-e3);
}

.MOBILE_JPFATE .main_body .slide_box li a {
  display: block;
  width: 100%;
  height: 0px;
  padding-bottom: 52.3333%;
  background-size: cover;
  transition: all var(--trans-effect-e3);
}

.PC_JPFATE .main_body .slide_box li a:hover {
  filter: brightness(1.2);
}

.main_body .slide_box li a img {
  display: block;
  width: 100%;
  height: auto;
}

/* 輪播按鈕樣式：左 */
.PC_JPFATE .main_body .slide_arrow_pre {
  position: absolute;
  left: 2%;
  top: 50%;
  transform: translate(-2%, -50%);
  width: 60px;
  height: 60px;
  background-color: var(--color-pink-jpa1);
  border-radius: var(--border-radius-round);
  box-shadow: var(--box-shadow);
  opacity: 0.9;
  transition: all var(--trans-effect-e3);
}

.MOBILE_JPFATE .main_body .slide_arrow_pre {
  display: none;
}

/* 輪播按鈕樣式：右 */
.PC_JPFATE .main_body .slide_arrow_next {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translate(-2%, -50%);
  width: 60px;
  height: 60px;
  background-color: var(--color-pink-jpa1);
  border-radius: var(--border-radius-round);
  box-shadow: var(--box-shadow);
  opacity: 0.9;
  transition: all var(--trans-effect-e3);
}

.MOBILE_JPFATE .main_body .slide_arrow_next {
  display: none;
}

/* 輪播按鈕樣式：圖片箭頭(左) */
.PC_JPFATE .main_body .slide_arrow_pre a {
  display: block;
  width: 100%;
  height: 60px;
  background: url(../image/icon_slider_bt.png) no-repeat center;
  background-size: 40px 40px;
  transform: rotate(180deg);
  filter: brightness(0) invert(1);
  opacity: 1;
}

.MOBILE_JPFATE .main_body .slide_arrow_pre a {
  display: none;
}


/* 輪播按鈕樣式：圖片箭頭(右) */
.PC_JPFATE .main_body .slide_arrow_next a {
  display: block;
  width: 100%;
  height: 60px;
  background: url(../image/icon_slider_bt.png) no-repeat center;
  background-size: 40px 40px;
  transform: rotate(0deg);
  filter: brightness(0) invert(1);
  opacity: 1;
}

.MOBILE_JPFATE .main_body .slide_arrow_next a {
  display: none;
}

.PC_JPFATE .main_body .slide_arrow_pre:hover,
.PC_JPFATE .main_body .slide_arrow_next:hover {
  filter: brightness(1.1);
  transition: all var(--trans-effect-e3);
  box-shadow: var(--box-shadow-2);
}

/*=====================================*/

/* 輪播按鈕：圓形控制點 */
.main_body .slide_dot {
  width: 100%;
  height: auto;
}

.PC_JPFATE .main_body .slide_dot ul {
  width: 20%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  padding: 10px 0px;
}

.MOBILE_JPFATE .main_body .slide_dot ul {
  width: 65%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  padding: 10px 0px;
}

/* 輪播按鈕：圓形控制點樣式 */
.main_body .slide_dot li {
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-black-c1);
  border-radius: var(--border-radius-round);
  background-color: transparent;
  box-sizing: border-box;
}

.main_body .slide_dot li a {
  display: block;
  width: 100%;
  height: 12px;
}

.PC_JPFATE .main_body .slide_dot li:hover {
  filter: brightness(1.2);
  background-color: var(--color-pink-jpa1);
  border: 1px solid var(--color-pink-jpa1);
}

/* 輪播按鈕：圓形控制點被選擇到樣式 */
.main_body .slide_dot li.active_dot {
  width: 12px;
  height: 12px;
  background-color: var(--color-pink-jpa1);
  border: 1px solid var(--color-pink-jpa1);
  border-radius: var(--border-radius-round);
}

/*====================================================*/
/*============ 排行榜：熱門推薦、新品上市 區塊 ============*/
/*====================================================*/
.PC_JPFATE .main_body .ranking_board {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.MOBILE_JPFATE .main_body .ranking_board {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

/* 舞台區塊：熱門推薦、新品上市外框 */
.PC_JPFATE .main_body .box_content {
  width: 49%;
  height: auto;
}

.MOBILE_JPFATE .main_body .box_content {
  width: 100%;
  height: auto;
  padding: 0% 4%;
  box-sizing: border-box;
}

/* 舞台區塊：單欄框架 */
.PC_JPFATE .main_body .box_content .rank_case {
  width: 100%;
  height: auto;
  background-color: white;
  border-radius: var(--border-radius-small);
  box-sizing: border-box;
  overflow: hidden;
}

.MOBILE_JPFATE .main_body .rank_case {
  width: 100%;
  height: auto;
  background-color: white;
  border-radius: var(--border-radius-small);
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 20px;
}

/* 排行標題 */
.main_body .norm_titlebar {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  padding: 4% 4% 0% 4%;
  box-sizing: border-box;
}

.main_body .norm_titlebar ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.MOBILE_JPFATE .main_body .norm_titlebar h4 {
  font-size: var(--font-h5);
}

.MOBILE_JPFATE .main_body .rank_case .pd_0_4_4_4 {
  padding: 0% 4% 0% 4%;
  margin-bottom: 5px;
}

.MOBILE_JPFATE .main_body ul.mb_style li {
  margin-left: auto;
}

/*=====================================*/

/* 舞台區塊：看更多按鈕(手機版使用) */
.main_body li.read_more {
  width: auto;
}

.main_body li.read_more a {
  display: block;
  width: 100%;
  height: auto;
  text-align: center;
  color: var(--color-pink-jpa1);
  font-size: var(--font-secondary);
  font-weight: var(--font-weight-bold);
}

/* 舞台區塊：熱門推薦、新品上市單項項目框架 */
.main_body .rank_box {
  position: relative;
  width: 100%;
  height: auto;
}

/* 舞台區塊：熱門推薦、新品上市，控制左右欄位 */
.main_body .double_case {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

/* 舞台區塊：熱門推薦、新品上市，控制左右欄位四邊間距 */
.main_body .double_content {
  padding: 0% 4%;
  box-sizing: border-box;
}

/* 熱門推薦、新品上市區塊：老師頭像 */
.PC_JPFATE .main_body .mods_photo {
  position: relative;
  width: 22%;
  height: 100%;
  border-radius: var(--border-radius-smaller);
  overflow: hidden;
}

.MOBILE_JPFATE .main_body .mods_photo {
  position: relative;
  width: 20%;
  height: 100%;
  border-radius: var(--border-radius-smaller);
  overflow: hidden;
}

.main_body .mods_photo img {
  display: block;
  width: 100%;
  height: auto;
  transition: all var(--trans-effect-e3);
}

/* 舞台區塊：熱門推薦、新品上市，排行截角 */
.main_body .ribbon_item {
  position: absolute;
  top: 0;
  left: -40px;
  background-color: var(--color-pink-jpa1);
  transform: rotate(-45deg);
  width: 100px;
  height: 25px;
  line-height: 25px;
}

.main_body .ribbon_item p {
  color: white;
  text-align: center;
  transform: rotate(45deg);
  text-indent: 5px;
  font-weight: var(--font-weight-bold);

}

/*================================*/
/*============ 模組區塊 ============*/
/*================================*/
/* 舞台區塊：熱門推薦、新品上市，文字資訊 */
.PC_JPFATE .main_body .mods_info {
  width: 78%;
  height: auto;
  padding: 0% 0% 0% 3%;
  box-sizing: border-box;
}

.MOBILE_JPFATE .main_body .mods_info {
  width: 80%;
  height: auto;
  padding: 0% 0% 0% 3%;
  box-sizing: border-box;
}

/* 模組區塊：整體框架 */
.PC_JPFATE .main_body .mods_area {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.MOBILE_JPFATE .main_body .mods_area {
  width: 100%;
  height: 25px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* 模組區塊：外盒 */
.PC_JPFATE .main_body .mods_box {
  width: 100%;
  height: 25px;
}

.MOBILE_JPFATE .main_body .mods_box {
  width: auto;
  height: 25px;
  line-height: 25px;
}

/* 折價、新品、馬上算框架 */
.main_body .mods_box ul.mods_list {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.main_body .mods_box ul.mods_list li {
  margin-right: 5px;
}

.main_body .mods_box ul.mods_list li:last-child {
  margin-right: 0px;
}

/* 模組區塊：按鈕 */
.PC_JPFATE .main_body .button_mods {
  width: 100%;
  height: auto;
  font-size: var(--font-primary);
}

.MOBILE_JPFATE .main_body .button_mods {
  width: 100%;
  height: auto;
  font-size: var(--font-primary);
}

/* 模組區塊：按鈕箭頭 */
.main_body .arrow {
  border: solid var(--color-blue-jpa1);
  border-width: 0px 2px 2px 0px;
  display: inline-block;
  padding: 4px;
  margin-left: 2px;
}

/* 模組區塊：按鈕箭頭(右) */
.main_body .right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-bottom: 1px;
}

/*=====================================*/

/* 分類區塊 */
.PC_JPFATE .main_body .category_area {
  width: 100%;
  height: auto;
  /* overflow: hidden; */
  padding: 5px 0px 0px 0px;
}

.MOBILE_JPFATE .main_body .category_area {
  width: auto;
  height: auto;
}

.PC_JPFATE .main_body .category_area ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.MOBILE_JPFATE .main_body .category_area ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 3px 0px 5px 0px;
}

.PC_JPFATE .main_body .category_area li {
  margin-right: 5px;
  height: 20px;
  line-height: 20px;
  font-size: var(--font-note);
}

.MOBILE_JPFATE .main_body .category_area li {
  margin-right: 5px;
  height: 20px;
  line-height: 20px;
  font-size: var(--font-note);
  padding: 0px 0px 0px 0px;
}

.main_body .category_area li.mr_0 {
  margin-right: 0px;
}

/* 分類標籤樣式顏色 */
.main_body .category_area .cate_txtmark {
  color: var(--color-pink-jpa1);
}

.main_body .category_area li:last-child {
  margin-right: 1px;
}

/* 分類項目標籤：icon 樣式 */
.main_body li span.items_tagph {
  display: inline-block;
  width: 20px;
  height: auto;
  vertical-align: middle;
  margin-right: 3px;
}

.main_body li span.items_tagph img {
  display: block;
  width: 100%;
  height: auto;
}

/*=====================================*/
/*============ 標籤顏色區塊 ============*/
/*=====================================*/
/* 標籤顏色 */
.main_body .tagbg-blue {
  line-height: 20px;
  background-color: var(--color-blue-jpa1);
  border-radius: var(--border-radius-round);
}

.main_body .tagbg-pink {
  line-height: 20px;
  background-color: var(--color-pink-jpa1);
  border-radius: var(--border-radius-round);
}

.main_body .tagbg-purple {
  line-height: 20px;
  background-color: var(--color-purple-jpa1);
  border-radius: var(--border-radius-round);
}

.main_body .tagbg-brown {
  line-height: 20px;
  background-color: var(--color-brown-jpa1);
  border-radius: var(--border-radius-round);
}

.main_body .tagbg-gray {
  line-height: 20px;
  background-color: var(--color-gray-jpa2);
  border-radius: var(--border-radius-round);
}

/* 標籤樣式 */
.main_body .mods_box li.mini_tag,
.main_body .category_area ul.price_group li.mini_tag,
.main_body .dou_mark span {
  display: inline-block;
  min-width: 35px;
  height: auto;
  color: white;
  text-align: center;
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
}

/*=====================================*/

/* 模組區塊：整塊按鈕區域 */
.main_body .rank_box a.frame_bt {
  width: 100%;
  height: auto;
  display: block;
  color: var(--color-black-a2);
  transition: all var(--trans-effect-e3);
  padding: 4% 0%;
  overflow: hidden;
}

.PC_JPFATE .main_body .rank_box a.frame_bt:last-child:hover {
  background-color: var(--color-blue-jpa3);
}

.main_body .rank_box .mods_info p,
.main_body .price_style .mods_info p {
  padding: 0px 0px 2px 0px;
}

/* 模組區塊：當滑鼠移過，rank_box出現底線 */
.main_body .rank_case .rank_box:not(:nth-last-child(1))::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid var(--color-black-c2);
}

.main_body .rank_case .rank_box:last-child {
  margin-bottom: 0px;
}

/* 模組區塊：控制熱門推薦的第一項padding */
/* .main_body .rank_box:not(:nth-child(n+3)) a.frame_bt{
    padding:0% 0% 4% 0%;
} */

/* 模組區塊：控制新品上市的第一項padding */
.main_body .right_block .rank_box .first_pd {
  padding: 0% 0% 4% 0%;
}

/*=========================================*/
/*============ 項目控制圓點(手機)============*/
/*=========================================*/
.PC_JPFATE .main_body .norm_dot {
  width: 100%;
  height: auto;
}

.MOBILE_JPFATE .main_body .norm_dot {
  width: 100%;
  height: auto;
}

.main_body .norm_dot ul {
  width: 25%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  padding: 15px 0px 0px 0px;
}

.main_body .norm_dot li {
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-black-c1);
  border-radius: var(--border-radius-round);
  background-color: transparent;
  box-sizing: border-box;
}

.main_body .norm_dot li a {
  display: block;
  width: 100%;
  height: 12px;
}

.main_body .norm_dot li.active_normdot {
  width: 12px;
  height: 12px;
  background-color: var(--color-pink-jpa1);
  border: 1px solid var(--color-pink-jpa1);
  border-radius: var(--border-radius-round);
}

/*==================================*/
/*=========== 包裝主題區塊 ===========*/
/*==================================*/
.PC_JPFATE .main_body .card_board {
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}

.MOBILE_JPFATE .main_body .card_board {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0% 4%;
  box-sizing: border-box;
  overflow: hidden;
}

/* 包裝主題區塊：標題樣式 */
.main_body .norm_titlebar_card {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 15px;
}

.PC_JPFATE .main_body .one_row {
  margin-bottom: 20px;
}

.MOBILE_JPFATE .main_body .one_row {
  margin-bottom: 12px;
}

/* 包裝主題區塊：控制標題樣式間隔 */
.PC_JPFATE .main_body .tarea_content {
  padding: 2% 2% 0% 2%;
  box-sizing: border-box;
}

.MOBILE_JPFATE .main_body .tarea_content {
  padding: 4% 4% 0% 4%;
  box-sizing: border-box;
}

.main_body .title_area {
  width: 100%;
  height: auto;
}

.PC_JPFATE .main_body .title_area h4 {
  font-size: var(--font-h4);
}

.MOBILE_JPFATE .main_body .title_area h4 {
  font-size: var(--font-h5);
}

/*==============================================*/
/*=========== 包裝主題區塊：標題右側按鈕 ===========*/
/*==============================================*/
.PC_JPFATE .main_body .function_arrow {
  width: 100%;
  max-width: 150px;
  height: 40px;
  margin: 0 auto;
}

.MOBILE_JPFATE .main_body .function_arrow {
  display: none;
}

/* 標題右側：粉色功能按鈕 */
.main_body ul.group_button {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.main_body ul.group_button li {
  width: 40px;
  height: 40px;
  margin: 0% 3%;
  box-sizing: border-box;
}

.main_body ul.group_button li a {
  display: block;
  width: 100%;
  height: 40px;
  background: url(../image/function_bt_white.png) no-repeat center;
  background-size: 26px 26px;
  background-color: var(--color-pink-jpa1);
  border: 1px solid var(--color-pink-jpa1);
  border-radius: var(--border-radius-round);
  box-sizing: border-box;
}

.main_body ul.group_button li a:hover {
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-pink-jpa1);
  border-radius: var(--border-radius-round);
  background: url(../image/function_bt_white.png) no-repeat center;
  background-color: var(--color-pink-jpa1);
  background-size: 26px 26px;
  filter: brightness(1.1);
}

/* 包裝主題區塊：標題右側功能按鈕 */
.main_body .pre_bt_arrow {
  transform: rotate(180deg);
}

.main_body .next_bt_arrow {
  transform: rotate(0deg);
}

/* 包裝主題區塊：標題右側功能按鈕無法點擊樣式 */
.main_body .pre_bt_arrow_x {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-round);
  background: url(../image/function_bt_white.png) no-repeat center;
  background-size: 26px 26px;
  background-color: var(--color-gray-jpa4);
  border: 1px solid var(--color-black-c1);
}

/* 包裝主題區塊：標題右側功能按鈕，旋轉樣式 */
.main_body .pre_item {
  transform: rotate(-180deg);
}


/*==========================================*/
/*=========== 包裝主題區塊：卡片主體 ===========*/
/*==========================================*/
/* 版塊卡片主體區塊 */
.main_body .card_frame {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
}

/* 版塊卡片本體 */
.main_body .card_box {
  position: relative;
  width: 170px;
  height: auto;
  border-radius: var(--border-radius-small);
  background-color: white;
  margin-right: 15px;
  transition: all var(--trans-effect-e3);
}

.main_body .card_box:last-child {
  margin-right: 0px;
}

.main_body .card_box .button_card,
.main_body .card_box_triple .button_card {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-black-a2);
  overflow: hidden;
}

/* 版塊卡片主體區塊：產品圖像 */
.main_body .card_photo {
  width: 100%;
  height: auto;
  overflow: hidden;
  border-top-left-radius: var(--border-radius-small);
  border-top-right-radius: var(--border-radius-small);
}

.main_body .card_photo img {
  display: block;
  width: 100%;
  height: auto;
  transition: all var(--trans-effect-e3);
}

/* 版塊卡片主體區塊：標籤整體區塊 */
.main_body .mark_case {
  height: auto;
  position: absolute;
  top: 6px;
  left: 6px;
}

/* 版塊卡片主體區塊：文字資訊 */
.main_body .card_box .mods_info {
  width: 100%;
  height: auto;
  min-height: 160px;
  padding: 5% 8%;
  box-sizing: border-box;
}

/* 版塊卡片：發燒文章文字區塊 */
.main_body .mods_info2 {
  width: 100%;
  height: auto;
  padding: 4% 5%;
  box-sizing: border-box;
}

.main_body .mark_case ul.mods_list {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

/* 定位版塊卡片主體區塊：N人算、馬上算 */
.main_body .card_box .mods_area {
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -95%);
  width: 85%;
}

/*==============================================*/
/*=========== 包裝主題區塊：花凜靈繪塔羅 ===========*/
/*==============================================*/
/* 版塊卡片主體區塊 */
.main_body .double_content2 {
  width: 100%;
  padding: 4%;
  box-sizing: border-box;
}

.PC_JPFATE .main_body .double_content3 {
  width: 100%;
  padding: 4%;
  box-sizing: border-box;
}

.MOBILE_JPFATE .main_body .double_content3 {
  width: 100%;
  padding: 4% 4% 0% 4%;
  box-sizing: border-box;
}

/* 版塊卡片：左圖右文版型 */
.PC_JPFATE .main_body .card_frame_square {
  width: 100%;
  display: grid;
  /* fr為切割等分 */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
  justify-items: center;
}

.MOBILE_JPFATE .main_body .card_frame_square {
  width: 100%;
  height: auto;
}

/* 版塊卡片本體：占術為主題(左圖、右文) */
.MOBILE_JPFATE .main_body .card_frame_square .card_box_square {
  margin-bottom: 10px;
}

/* 版塊卡片本體：占術為主題(左圖、右文)，控制倒數第二個div標籤上下間距 */
.MOBILE_JPFATE .main_body .card_frame_square .card_box_square:nth-last-child(-n+2) {
  margin-bottom: 0px;
}

/* 版塊卡片本體：占術為主題(左圖、右文) */
.main_body .card_box_square {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-small);
  background-color: white;
  transition: all var(--trans-effect-e3);
  box-sizing: border-box;
}

.main_body .card_box_square:last-child {
  margin-right: 0px;
}

.main_body .card_box_square a {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-black-a2);
}

.main_body .card_box_square .mods_info {
  width: 78%;
  height: auto;
  padding: 0% 3%;
  box-sizing: border-box;
}

/* 版塊卡片：占術盒老師頭像 */
.main_body .card_photo_square {
  /* width:22%; */
  width: 80px;
  height: 80px;
}

.main_body .card_photo_square img {
  display: block;
  width: 100%;
  height: auto;
}

/* 控制分類頁：卡片文字間距 */
.PC_JPFATE .main_body .card_board_frame .mods_info p {
  padding: 0px 0px 5px 0px;
}

.MOBILE_JPFATE .main_body .card_board_frame .mods_info p {
  padding: 0px 0px 3px 0px;
}

.MOBILE_JPFATE .main_body .card_board_frame .t_name p {
  padding: 0px 0px 0px 0px;
}

.main_body .card_box_square .mods_info p:last-child {
  color: var(--color-gray-jpa1);
}

/* 版塊卡片：馬上算區塊 */
.main_body .mods_area_square {
  width: 100%;
  height: auto;
}

.main_body .mods_area_square li {
  text-align: right;
  padding: 0% 3% 3% 0%;
}

/*=================================*/
/*============ 人氣名師 ============*/
/*=================================*/
/* 版塊卡片本體：老師頭像、小字說明、標籤標題 */
.main_body .card_box_norm {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-small);
  background-color: white;
  margin-right: 15px;
  transition: all var(--trans-effect-e3);
}

.main_body .card_box_norm:last-child {
  margin-right: 0px;
}

/* 版塊卡片：人氣名師老師頭像 */
.main_body .card_box_norm .card_photo {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}

.main_body .card_box_norm .card_photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* 版塊卡片：人氣名師整塊按鈕區域 */
.main_body .card_box_norm a.button_card {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-black-a2);
}

/* 版塊卡片：人氣名師，標籤整體區塊 */
.main_body .card_box_norm .mark_case {
  height: auto;
  position: absolute;
  top: 2%;
  left: 3%;
}

/* 版塊卡片：人氣名師標題與說明小字 */
.main_body .card_box_norm .caption_box {
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 0%;
  left: 0%;
  padding: 4%;
  box-sizing: border-box;
  z-index: 20;
}

/* 版塊卡片：人氣名師圖片底遮罩 */
.main_body .card_box_norm .caption_box::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0));
  z-index: -10;
}

.main_body .card_box_norm .caption_box p {
  color: white;
  text-shadow: 1px 1px 1px #000000,
    -1px -1px 1px #000000,
    -1px 1px 1px #000000,
    1px -1px 1px #000000;
}

.main_body .card_box_norm .caption_box p:first-child {
  font-size: var(--font-secondary);
}

/* 版塊卡片：人氣名師白底標籤與文字區塊 */
.main_body .card_box_norm .mods_info_double {
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 4% 5%;
  box-sizing: border-box;
}

/* 版塊卡片：人氣名師白底標籤 */
.main_body .dou_mark {
  width: 20%;
  margin-right: 5px;
}

/* 版塊卡片：人氣名師白底文字 */
.main_body .card_box_norm .dou_textarea {
  width: 80%;
}

/*=================================*/
/*============ 精選活動 ============*/
/*=================================*/
.PC_JPFATE .main_body .feature_box {
  width: 100%;
  height: auto;
}

.MOBILE_JPFATE .main_body .feature_box {
  width: 3400px;
  height: auto;
}

.PC_JPFATE .main_body .PC_JPFATE100 {
  width: 100%;
}

.MOBILE_JPFATE .main_body .PC_JPFATE100 {
  width: auto;
}

.main_body .feature_box ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
}

.PC_JPFATE .main_body .feature_box li {
  width: 100%;
  height: auto;
  margin-right: 15px;
  transition: all var(--trans-effect-e3);
  border-radius: var(--border-radius-small);
}

.MOBILE_JPFATE .main_body .feature_box li {
  width: 320px;
  height: 100px;
  margin-right: 15px;
  transition: all var(--trans-effect-e3);
}

.PC_JPFATE .main_body .feature_box li:last-child {
  margin-right: 0px;
}

.main_body .feature_box li a {
  display: block;
  width: 100%;
  height: auto;
}

.main_body .feature_box li a img {
  display: block;
  width: 100%;
  height: auto;
}

.main_body .feature_box .f_banner {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-small);
  overflow: hidden;
}

/*=====================================*/
/*============ 100%免費測算 ============*/
/*=====================================*/
/* 版塊卡片本體：三欄，高度撐滿 */
.PC_JPFATE .main_body .card_box_triple {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: var(--border-radius-small);
  overflow: hidden;
}

.MOBILE_JPFATE .main_body .card_box_triple {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-small);
}

.PC_JPFATE .main_body .card_box_triple .rank_case {
  width: 100%;
  height: auto;
  height: fit-content;
  overflow: hidden;
}

.MOBILE_JPFATE .main_body .card_box_triple .rank_case {
  width: 100%;
  height: auto;
  margin-bottom: 0px;
}

/*=============================================*/
/*============ 宣傳版位：方形素材區塊 ============*/
/*=============================================*/
/* 宣傳版位：方形素材區塊，1080x1080素材 */
.PC_JPFATE .main_body .card_box_triple a.promo_ph_bt {
  display: block;
  width: 100%;
  height: 100%;
}

.MOBILE_JPFATE .main_body .card_box_triple a.promo_ph_bt {
  display: block;
  width: 100%;
  height: auto;
  padding-bottom: 100%;
  background-color: white;
  border-radius: var(--border-radius-small);
  overflow: hidden;
}

/* 宣傳版位：方形素材區塊，1080x1080素材 hover 效果 */
.PC_JPFATE .main_body .card_box_triple a.promo_ph_bt div:hover {
  filter: brightness(1.2);
  transition: all var(--trans-effect-e3);
}

.main_body .card_box_triple a.promo_ph_bt div {
  transition: all var(--trans-effect-e3);
}

.PC_JPFATE .main_body .no_bg {
  background-color: transparent;
}

/* 宣傳版位：方形素材本體 */
.PC_JPFATE .main_body .promo_square {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: auto;
  border-radius: var(--border-radius-small);
  overflow: hidden;
}

.MOBILE_JPFATE .main_body .promo_square {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-small);
  overflow: hidden;
}

.main_body .promo_square img {
  display: block;
  width: 100%;
  height: auto;
}

/*=======================================*/
/*===========  版位：標籤分類區塊 ==========*/
/*=======================================*/
/* 版位：標籤分類區塊，標題樣式 */
.PC_JPFATE .main_body .tag_title {
  font-size: var(--font-h4);
  font-weight: var(--font-weight-bold);
  margin-bottom: 10px;
}

.MOBILE_JPFATE .main_body .tag_title {
  font-size: var(--font-h5);
  font-weight: var(--font-weight-bold);
  margin-bottom: 10px;
}

/* 版位：標籤分類內容區塊 */
.main_body .tag_block {
  width: 100%;
  height: auto;
}

.PC_JPFATE .main_body .tag_block ul {
  width: 80%;
}

.MOBILE_JPFATE .main_body .tag_block ul {
  width: 100%;
}

.main_body .tag_block ul li {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 3%;
}

.MOBILE_JPFATE .main_body .tag_block ul li:nth-last-child(-n+3) {
  margin-bottom: 0%;
}

.MOBILE_JPFATE .mg_bottom_20 .card_box_triple:last-child {
  margin-bottom: 0px;
}

/*=====================================*/

/* 版位：標籤分類區塊，標籤樣式 */
.main_body .tag_block ul a {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  border-radius: var(--border-radius-round);
  border: 1px solid var(--color-brown-jpa2);
  color: var(--color-brown-jpa2);
  font-size: var(--font-primary);
  text-align: center;
  padding: 0px 8px;
  box-sizing: border-box;
}

.PC_JPFATE .main_body .tag_block ul a:hover {
  background-color: var(--color-brown-jpa2);
  color: white;
}

/* 版位：標籤分類區塊，控制手機版不出現2、3項 */
.MOBILE_JPFATE .main_body .card_frame_square .card_box_triple:nth-child(2),
.MOBILE_JPFATE .main_body .card_frame_square .card_box_triple:nth-child(3) {
  display: none;
}

/* 版位：首頁100%免費算區塊，控制手機版出現2、3項 */
.MOBILE_JPFATE .main_body .in_block .card_frame_square .card_box_triple:nth-child(2),
.MOBILE_JPFATE .main_body .in_block .card_frame_square .card_box_triple:nth-child(3) {
  display: block;
}

.MOBILE_JPFATE .main_body .in_block .card_frame_square .card_box_triple:nth-child(3) {
  margin-bottom: 0px;
}

.MOBILE_JPFATE .main_body .in_block .card_box_triple {
  margin-bottom: 15px;
}

/*====================================*/
/*============ 分類頁 區塊 ============*/
/*====================================*/
/* 分類頁：標題樣式 */
.PC_JPFATE .main_body .cate_titlebar {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.MOBILE_JPFATE .main_body .cate_titlebar {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  padding: 0% 3%;
  box-sizing: border-box;
}

.main_body .cate_titlebar ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  border-bottom: 1px solid var(--color-blue-jpa1);
}

.PC_JPFATE .main_body .cate_titlebar li {
  font-size: var(--font-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-pink-jpa1);
  background-color: var(--color-black-a2);
  padding: 5px 40px;
  box-sizing: border-box;
  border-top-left-radius: var(--border-radius-small);
  border-top-right-radius: var(--border-radius-small);
  background-color: var(--color-blue-jpa2);
}

.MOBILE_JPFATE .main_body .cate_titlebar li {
  font-size: var(--font-h5);
  font-weight: var(--font-weight-bold);
  color: var(--color-pink-jpa1);
  background-color: var(--color-black-a2);
  padding: 5px 45px;
  box-sizing: border-box;
  border-top-left-radius: var(--border-radius-small);
  border-top-right-radius: var(--border-radius-small);
  background-color: var(--color-blue-jpa2);
}

/* 老師名五字：顏色 */
.main_body .t_name {
  color: var(--color-pink-jpa1);
}

/* ============================== */
/* ========= 控制分類頁區塊 ========*/
/* ============================== */
/* 分類頁：版塊卡片主體區塊，文字資訊高度 */
.main_body .price_style .mods_info {
  min-height: 190px;
}

/* 分類頁：版塊卡片主體區塊，文字資訊 */
.PC_JPFATE .main_body .card_board_frame .mods_info {
  width: 89%;
  padding: 0% 0% 0% 2%;
}

.MOBILE_JPFATE .main_body .card_board_frame .mods_info {
  width: 75%;
  padding: 0% 0% 0% 3%;
}

/* 分類頁：模組區塊，整體框架(原價、特價、GO按鈕) */
.PC_JPFATE .main_body .price_style .card_box .mods_area {
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -95%);
  width: 85%;
}

.MOBILE_JPFATE .main_body .price_style .card_box .mods_area {
  position: absolute;
  top: 95%;
  right: 0%;
  justify-content: flex-end;
}

/* 分類頁：模組區塊(原價、特價、GO按鈕) */
.PC_JPFATE .main_body .category_area ul.price_group {
  width: 99%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.MOBILE_JPFATE .main_body .card_board_frame .category_area ul.price_group {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  padding: 5px 1px 0px 0px;
}

/* 分類標籤：N人用、價格區塊-文字樣式*/
.main_body .category_area ul.price_group li {
  font-size: var(--font-primary);
  font-weight: var(--font-weight-bold);
}

/* 分類標籤：N人用、價格區塊-原價格樣式 */
.PC_JPFATE .main_body .category_area ul.price_group span.original_price {
  font-size: var(--font-note);
  font-weight: normal;
  text-decoration: line-through;
}

.MOBILE_JPFATE .main_body .category_area ul.price_group span.original_price {
  font-size: var(--font-primary);
  font-weight: normal;
  text-decoration: line-through;
}

/* 分類頁：商品清單(10組)，原價格樣式 */
.PC_JPFATE .main_body .card_board_frame .category_area ul.price_group span.original_price {
  font-size: var(--font-note);
  font-weight: normal;
  text-decoration: line-through;
}

.MOBILE_JPFATE .main_body .card_board_frame .category_area ul.price_group span.original_price {
  font-size: var(--font-primary);
  font-weight: normal;
  text-decoration: line-through;
}

/* 當iphone寬度375px的時候 */
@media screen and (max-width: 375px) {
  .MOBILE_JPFATE .main_body .category_area ul.price_group span.original_price {
    font-size: var(--font-note);
    font-weight: normal;
    text-decoration: line-through;
  }

  .MOBILE_JPFATE .main_body .card_board_frame .category_area ul.price_group span.original_price {
    font-size: var(--font-note);
    font-weight: normal;
    text-decoration: line-through;
  }
}

/* 分類標籤：N人用、價格區塊-主要價格樣式*/
.PC_JPFATE .main_body .category_area ul.price_group span.topic_price {
  font-size: var(--font-h5);
  font-weight: var(--font-weight-bold);
}

.MOBILE_JPFATE .main_body .category_area ul.price_group span.topic_price {
  font-size: var(--font-primary);
  font-weight: var(--font-weight-bold);
}

.MOBILE_JPFATE .main_body .card_board_frame .category_area {
  margin-left: auto;
}

/*=====================================*/

/* 分類頁：商品列表區塊 */
.PC_JPFATE .main_body .card_board_frame {
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  background-color: white;
  border-radius: var(--border-radius-small);
  box-sizing: border-box;
  padding: 2%;
}

.MOBILE_JPFATE .main_body .card_board_frame {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background-color: white;
  border-radius: var(--border-radius-small);
  padding: 4%;
  box-sizing: border-box;
}

/* 控制padding */
.main_body .card_board_frame .double_content {
  padding: 0%
}

/* 熱門推薦、新品上市區塊：老師頭像 */
.PC_JPFATE .main_body .card_board_frame .rank_box .mods_photo {
  width: 11%;
}

.MOBILE_JPFATE .main_body .card_board_frame .rank_box .mods_photo {
  width: 25%;
}

.main_body .card_board_frame .rank_box::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid var(--color-black-c2);
}

/*=====================================*/

/* 模組區塊：整體框架 */
.MOBILE_JPFATE .main_body .card_board_frame .mods_area {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

/* 整塊按鈕區域：控制padding */
.main_body .card_board_frame .rank_box .frame_bt {
  padding: 0%;
}

.PC_JPFATE .main_body .card_board_frame .rank_box a.frame_bt {
  width: 100%;
  height: auto;
  display: block;
  color: var(--color-black-a2);
  transition: all var(--trans-effect-e3);
  padding: 2% 0%;
}

.MOBILE_JPFATE .main_body .card_board_frame .rank_box a.frame_bt {
  width: 100%;
  height: auto;
  display: block;
  color: var(--color-black-a2);
  transition: all var(--trans-effect-e3);
  padding: 4% 0%;
}

.main_body .card_board_frame .one_row {
  margin-bottom: 0px;
}

/*==================================*/
/*============= 公版按鈕  ============*/
/*==================================*/
.PC_JPFATE .main_body .norm_button {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 2% 0% 0% 0%;
  box-sizing: border-box;
}

.MOBILE_JPFATE .main_body .norm_button {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 5% 0% 0% 0%;
}

.PC_JPFATE .main_body .norm_button a {
  display: block;
  max-width: 240px;
  height: 45px;
  line-height: 45px;
  color: var(--color-pink-jpa1);
  border: 1px solid var(--color-pink-jpa1);
  border-radius: var(--border-radius-round);
  box-sizing: border-box;
  text-align: center;
  font-size: var(--font-h5);
  font-weight: var(--font-weight-bold);
  margin: 0 auto;
  transition: all var(--trans-effect-e3);
}

.MOBILE_JPFATE .main_body .norm_button a {
  display: block;
  max-width: 200px;
  height: 40px;
  line-height: 40px;
  color: var(--color-pink-jpa1);
  border: 1px solid var(--color-pink-jpa1);
  border-radius: var(--border-radius-round);
  box-sizing: border-box;
  text-align: center;
  font-size: var(--font-h6);
  font-weight: var(--font-weight-bold);
  margin: 0 auto;
  transition: all var(--trans-effect-e3);
}

.PC_JPFATE .main_body .norm_button a:hover {
  transition: all var(--trans-effect-e3);
  background-color: var(--color-pink-jpa1);
  color: white;
}

/*=========================================*/
/*============  分類頁：下拉式選單 ===========*/
/*=========================================*/
.PC_JPFATE .main_body .select_case select {
  width: 200px;
  padding: 10px 10px;
  border: 1px solid var(--color-black-c1);
  border-radius: var(--border-radius-round);
  color: var(--color-black-b2);
  font-size: var(--font-primary);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  background-image: url(../image/select_icon_down_line.png);
  background-position: right 0.7rem top 50%;
  background-size: 20px auto;
  background-repeat: no-repeat;
}

.MOBILE_JPFATE .main_body .select_case select {
  width: 140px;
  padding: 7px 10px;
  border: 1px solid var(--color-black-c1);
  border-radius: var(--border-radius-round);
  color: var(--color-black-b2);
  font-size: var(--font-note);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  background-image: url(../image/select_icon_down_line.png);
  background-position: right 5px top 50%;
  background-size: 20px auto;
  background-repeat: no-repeat;
}

/*====================================*/
/*============  名師特輯區塊 ===========*/
/*====================================*/
/* 名師特輯區塊：整體框架 */
.main_body .collection_case {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 0px 20px 20px 20px;
  box-sizing: border-box;
}

/* 名師特輯區塊：整塊點擊按鈕 */
.PC_JPFATE .main_body .master_list a.master_button {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-black-a2);
}

.MOBILE_JPFATE .main_body .master_list a.master_button {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-black-a2);
  margin-top: 30px;
}

.MOBILE_JPFATE .main_body .master_list:nth-child(1) a.master_button {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-black-a2);
  margin-top: 0px;
}

.PC_JPFATE .main_body .master_list a.master_button::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid var(--color-black-c2);
  padding: 25px 0px 0px 0px;
}

.MOBILE_JPFATE .main_body .master_list a.master_button::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid var(--color-black-c2);
  margin: 25px 0px 0px 0px;
}

.main_body .master_list a.master_button:hover .goto_master li {
  filter: brightness(1.2);
  transition: all var(--trans-effect-e3);
}

.main_body .master_list:last-child {
  display: block;
  margin-bottom: 0px;
}

.PC_JPFATE .main_body .master_list {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  clear: both;
  margin-bottom: 30px;
}

.MOBILE_JPFATE .main_body .master_list {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  clear: both;
  margin-bottom: 15px;
}

/* 名師特輯區塊：大師頭像 */
.PC_JPFATE .main_body .master_itemph {
  width: 150px;
  height: auto;
  float: left;
  border-radius: var(--border-radius-small);
  overflow: hidden;
  margin-right: 15px;
  position: relative;
}

.MOBILE_JPFATE .main_body .master_itemph {
  width: 130px;
  height: auto;
  float: left;
  border-radius: var(--border-radius-small);
  overflow: hidden;
  margin-right: 15px;
  position: relative;
}

.main_body .master_itemph::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0));
}

.main_body .master_itemph img {
  display: block;
  width: 100%;
  height: auto;
}

.main_body .master_name {
  width: 100%;
  height: auto;
  text-align: center;
  color: white;
  font-size: var(--font-secondary);
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, -30%);
  z-index: 80;
  text-shadow: 1px 1px 1px #000000,
    -1px -1px 1px #000000,
    -1px 1px 1px #000000,
    1px -1px 1px #000000;
}

/* 名師特輯區塊：文字介紹 */
.main_body .master_info {
  width: 100%;
  height: auto;
  position: relative;
}

.PC_JPFATE .main_body .master_info .m_title {
  font-size: var(--font-h5);
  font-weight: bold;
  line-height: 1.8rem;
  padding: 0px 0px 2px 0px;
}

.MOBILE_JPFATE .main_body .master_info .m_title {
  font-size: var(--font-h6);
  font-weight: bold;
  line-height: 1.4rem;
  padding: 0px 0px 5px 0px;
}

/* 名師特輯區塊：小區塊連結 */
.PC_JPFATE .main_body .master_link_list {
  width: 100%;
  height: auto;
  margin-top: 20px;
}

.MOBILE_JPFATE .main_body .master_link_list {
  width: 100%;
  height: auto;
  margin-top: 35px;
}

.main_body .master_link_list ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.main_body .master_link_list li {
  width: 100%;
}

.MOBILE_JPFATE .main_body .master_link_list li:last-child {
  display: none;
}

.PC_JPFATE .main_body .master_link_list li:hover {
  text-decoration: underline;
}

/* 藍色線框 */
.main_body .line_icon_blue {
  border: 1px solid var(--color-blue-jpa4);
  border-radius: var(--border-radius-round);
  color: var(--color-blue-jpa4);
  box-sizing: border-box;
}

/* 藍色線框 */
.main_body .line_icon_pink {
  border: 1px solid var(--color-pink-jpa1);
  border-radius: var(--border-radius-round);
  color: var(--color-pink-jpa1);
  box-sizing: border-box;
}

.main_body .master_link_list span.m_markicon {
  display: inline-block;
  float: left;
  min-width: 50px;
  padding: 0px 0px;
  height: auto;
  text-align: center;
  font-size: var(--font-note);
  margin-right: 5px;
}

/* 名師特輯區塊：進入專頁 */
.PC_JPFATE .main_body .goto_master {
  width: 100%;
  height: auto;
}

.MOBILE_JPFATE .main_body .goto_master {
  display: none;
}

.main_body .goto_master ul {
  width: auto;
  height: auto;
  position: absolute;
  top: 0%;
  right: 0%;
}

.main_body .goto_master li {
  font-size: var(--font-primary);
  width: 110px;
  height: 30px;
  line-height: 30px;
  border-radius: var(--border-radius-round);
  background-color: var(--color-blue-jpa1);
  color: white;
  text-align: center;
  box-sizing: border-box;
  transition: all var(--trans-effect-e3);
  padding-right: 10px;
  position: relative;
}

/* 名師特輯區塊：右欄進入專頁按鈕，箭頭樣式 */
.main_body .goto_master li::after {
  position: absolute;
  top: 0%;
  right: 0%;
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../image/function_bt_white.png) no-repeat center;
  background-size: 15px 15px;
}

/*=================================*/
/*============  占術推薦 ===========*/
/*=================================*/
.PC_JPFATE .main_body .card_frame_square2 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
  justify-items: center;
}

.MOBILE_JPFATE .main_body .card_frame_square2 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 10px;
  align-items: start;
  justify-items: center;
}

/* 僅顯示三項目 */
/* .MOBILE_JPFATE .main_body .card_frame_square2 a.fate_category:not(:nth-last-child(n+4)) {
  display: none;
} */

/* 版塊卡片本體：占術 */
.main_body .card_box_fate {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  border-radius: var(--border-radius-small);
  overflow: hidden;
  transition: all var(--trans-effect-e3);
}

.main_body .card_frame_square2 a.fate_category {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-black-a2);
}

/* 版塊卡片本體：左圖 */
.PC_JPFATE .main_body .card_photo_f {
  width: 80%;
  height: auto;
}

.MOBILE_JPFATE .main_body .card_photo_f {
  width: 88%;
  height: auto;
}

.main_body .card_photo_f img {
  display: block;
  width: 100%;
  height: auto;
}

/* 版塊卡片本體：右文 */
.main_body .card_info_f {
  width: 100%;
  height: auto;
  padding: 1% 3% 1% 3%;
  box-sizing: border-box;
}

.main_body .m_taglink_case {
  width: 100%;
  height: auto;
}

.PC_JPFATE .main_body .m_content {
  padding: 0%;
}

.MOBILE_JPFATE .main_body .m_content {
  padding: 0%;
}

/*===========================================*/
/*============  輸入頁、結果頁：MENU ===========*/
/*===========================================*/
.PC_JPFATE .main_body .items_menu {
  width: 100%;
  height: auto;
  padding: 0px 0px 20px 0px;
}

.MOBILE_JPFATE .main_body .items_menu {
  width: 100%;
  height: auto;
  padding: 0px 0px 15px 0px;
  margin-top: 60px;
}

.main_body .items_menu ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.PC_JPFATE .main_body .items_menu li {
  width: 100px;
  height: 30px;
  border-radius: var(--border-radius-round);
  background-color: var(--color-blue-jpa2);
  box-sizing: border-box;
  margin-right: 15px;
}

.MOBILE_JPFATE .main_body .items_menu li {
  width: auto;
  height: 30px;
  border-radius: var(--border-radius-round);
  background-color: var(--color-blue-jpa2);
  margin-right: 10px;
}

.main_body .items_menu li a {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: var(--color-pink-jpa1);
  font-size: var(--font-primary);
  border-radius: var(--border-radius-round);
  transition: all var(--trans-effect-e3);
  padding: 0px 10px;
}

.PC_JPFATE .main_body .items_menu li a:hover {
  transition: all var(--trans-effect-e3);
  background-color: var(--color-pink-jpa1);
  color: white;
}

.main_body ul.items_type li a {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: var(--color-blue-jpa1);
  font-size: var(--font-primary);
  border-radius: var(--border-radius-round);
  transition: all var(--trans-effect-e3);
}

.main_body ul.items_type li.items_m_active a {
  display: block;
  width: 100%;
  color: white;
  background-color: var(--color-pink-jpa1);
  font-weight: var(--font-weight-bold);
}

.main_body .items_menu li.items_menutitle {
  width: auto;
  height: 30px;
  line-height: 30px;
  background-color: transparent;
  font-size: var(--font-secondary);
  color: var(--color-black-a2);
}

/* 示意日本產品結果頁 */
.PC_JPFATE .main_body .jp_itemblock {
  background-color: var(--color-gray-jpa4);
  width: 100%;
  height: 100px;
  line-height: 100px;
}

.MOBILE_JPFATE .main_body .jp_itemblock {
  background-color: var(--color-gray-jpa4);
  width: 100%;
  height: 100px;
  line-height: 100px;
  margin-top: 95px;
}

.main_body .jp_itemblock p {
  text-align: center;
  font-size: var(--font-primary);
}

/*==================================*/
/*===========  更多推薦區塊 ==========*/
/*==================================*/
.PC_JPFATE .main_body .card_frame_double {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
  justify-items: center;
}

.MOBILE_JPFATE .main_body .card_frame_double {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 10px;
  align-items: start;
  justify-items: center;
}

/* 更多推薦區塊：控制左右欄位 */
.PC_JPFATE .main_body .card_frame_double .double_case {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.MOBILE_JPFATE .main_body .card_frame_double .double_case {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.MOBILE_JPFATE .main_body .card_frame_double .text_more .double_case {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

/* 更多推薦區塊：控制四邊間距 */
.main_body .card_frame_double .double_content2 {
  padding: 2% 2% 2% 2%;
}

/* 版塊卡片本體：更多推薦區塊 */
.main_body .card_box_more {
  width: 100%;
  height: auto;
  background-color: white;
  border-radius: var(--border-radius-small);
  overflow: hidden;
  position: relative;
  transition: all var(--trans-effect-e3);
}

.main_body .card_box_more a {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-black-a2);
  position: relative;
}

/* 版塊卡片本體：更多推薦區塊，控制只出現前4個 */
/* .MOBILE_JPFATE .main_body .card_box_more:not(:nth-last-child(n+7)) {
    display: none;
} */

/* 版塊卡片本體：更多推薦區塊，大師頭像 */
.main_body .card_box_more .card_photo_more {
  /* width: 80px; */
  width: 70px;
  /* height: 80px; */
  height: 70px;
  border-radius: var(--border-radius-small);
  overflow: hidden;
}

.main_body .card_box_more .card_photo_more img {
  display: block;
  width: 100%;
  height: auto;
}

/* 版塊卡片本體：更多推薦區塊，標籤區塊 */
.main_body .more_category {
  position: absolute;
  /* top: 8px; */
  top: 5px;
  left: 5px;
  /* width: 35px; */
  width: 30px;
  height: auto;
  color: white;
  text-align: center;
  /* font-size: 0.7rem; */
  font-size: 0.5rem;
  font-weight: var(--font-weight-bold);
}

/* 版塊卡片本體：更多推薦區塊，標籤樣式 */
.main_body .more_category span {
  padding: 5% 18%;
  border-radius: var(--border-radius-round);
}

/* 版塊卡片本體：更多推薦區塊，控制標籤位置 */
.MOBILE_JPFATE .main_body .text_more .more_category {
  position: absolute;
  /* top: 8px; */
  top: 5px;
  left: 5px;
  /* width: 35px; */
  width: 30px;
  height: auto;
  color: white;
  text-align: center;
  /* font-size: 0.7rem; */
  font-size: 0.5rem;
  font-weight: var(--font-weight-bold);
}

/* 版塊卡片本體：更多推薦區塊，控制文字寬度 */
.PC_JPFATE .main_body .card_frame_double .mods_info {
  width: 72%;
}

.MOBILE_JPFATE .main_body .card_frame_double .mods_info {
  width: 71%;
}

.main_body .card_frame_double .mods_info p {
  padding: 0px 0px 3px 0px
}

.main_body .card_frame_double .mods_info p:last-child {
  padding: 0px;
}

/* 版塊卡片本體：更多推薦區塊，圓形GO按鈕 */
.PC_JPFATE .main_body .more_go {
  position: absolute;
  bottom: 46%;
  right: 2%;
  transform: translate(-50%, -0%);
}

.MOBILE_JPFATE .main_body .more_go {
  position: absolute;
  bottom: 46%;
  right: 2%;
  transform: translate(-50%, -0%);
}

.PC_JPFATE .main_body .more_go .arrow {
  border: solid var(--color-blue-jpa1);
  border-width: 0px 2px 2px 0px;
  display: inline-block;
  padding: 4px;
  margin-left: 0px;
}

.PC_JPFATE .main_body .more_go .right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-bottom: 0px;
}

/*======================================*/
/*===========  顧客意見調查 區塊 ==========*/
/*======================================*/
/* 顧客意見調查區塊 */
.PC_JPFATE .main_body .customer_survey {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: white;
  margin: 0 auto;
}

.MOBILE_JPFATE .main_body .customer_survey {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  margin: 0 auto;
}

/* 顧客意見調查區塊：整塊按鈕 */
.main_body .customer_survey a.survey_a_block {
  display: block;
  width: 100%;
  height: auto;
}

/* 顧客意見調查區塊：標題 */
.PC_JPFATE .main_body .survey_title {
  position: relative;
  width: 40%;
  height: 80px;
  line-height: 80px;
  font-size: var(--font-h2);
  font-weight: var(--font-weight-bold);
  padding: 0% 2%;
  box-sizing: border-box;
  text-align: right;
}

.MOBILE_JPFATE .main_body .survey_title {
  position: relative;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: var(--font-h3);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin: 0px 0px 20px 0px;
  box-sizing: border-box;
}

/* 顧客意見調查區塊：標題線段 */
.PC_JPFATE .main_body .survey_title::after {
  position: absolute;
  top: 0%;
  right: 0%;
  content: '';
  width: 1px;
  height: 100%;
  display: inline-block;
  border-right: 1px solid white;
}

.MOBILE_JPFATE .main_body .survey_title::after {
  position: absolute;
  bottom: -10px;
  left: 0px;
  content: '';
  width: 100%;
  height: 1px;
  display: inline-block;
  border-bottom: 1px solid white;
}

/* 顧客意見調查區塊：icon */
.main_body .survey_title span.survey_iconph {
  display: inline-block;
  width: 45px;
  height: auto;
  vertical-align: middle;
  padding-right: 2%;
}

.main_body .survey_title span.survey_iconph img {
  display: block;
  width: 100%;
  height: auto;
}

/*=====================================*/

/* 顧客意見調查區塊：內容區塊 */
.PC_JPFATE .main_body .survey_info {
  width: 60%;
  height: auto;
  padding: 0% 2%;
  box-sizing: border-box;
}

.MOBILE_JPFATE .main_body .survey_info {
  width: 100%;
  height: auto;
}

/* 顧客意見調查區塊：控制雙欄 */
.main_body .survey_info .double_case {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.main_body .survey_info li:last-child {
  margin-left: 1%;
}

.main_body .survey_info span.survey_br {
  display: block;
}

/*=====================================*/

.PC_JPFATE .main_body .survey_info .survey_button {
  display: block;
  width: 140px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #B29079;
  font-size: var(--font-h4);
  font-weight: var(--font-weight-bold);
  background-color: white;
  border-radius: var(--border-radius-smaller);
  transition: all var(--trans-effect-e3);
}

.MOBILE_JPFATE .main_body .survey_info .survey_button {
  display: block;
  width: 110px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #B29079;
  font-size: var(--font-secocndary);
  font-weight: var(--font-weight-bold);
  background-color: white;
  border-radius: var(--border-radius-smaller);
  transition: all var(--trans-effect-e3);
}


.MOBILE_JPFATE .main_body .survey_info p {
  font-size: var(--font-secondary);
}

.PC_JPFATE .main_body a.survey_a_block:hover li.survey_button {
  transition: all var(--trans-effect-e3);
  background-color: #7F5E47;
  border: 1px solid white;
  color: white;
}

/*=========================================*/
/*============  手機版：下拉功能列 ===========*/
/*=========================================*/
/* 下拉功能列整體框架 */
.MOBILE_JPFATE .main_body .dropdown_case {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  z-index: 100;
}

.MOBILE_JPFATE .main_body .drop_frame {
  width: 100%;
  max-height: 70vh;
  margin-top: 45px;
  background-color: white;
  overflow: scroll;
}

.MOBILE_JPFATE .main_body .drop_box {
  width: 100%;
  height: auto;
}

.MOBILE_JPFATE .main_body .drop_bg {
  background-color: #F8F8F8;
}

.MOBILE_JPFATE .main_body .drop_bg2 {
  background-color: white;
}

/*=====================================*/

/* 下拉功能列：標題樣式1、2 */
.MOBILE_JPFATE .main_body .drop_titlebar,
.MOBILE_JPFATE .main_body .drop_titlebar2 {
  width: 100%;
  height: 45px;
  line-height: 45px;
}

.MOBILE_JPFATE .main_body .drop_titlebar ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.MOBILE_JPFATE .main_body .drop_titlebar li {
  font-size: var(--font-h5);
  font-weight: var(--font-weight-bold);
}

.MOBILE_JPFATE .main_body .drop_titlebar2 ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0% 4%;
}

.MOBILE_JPFATE .main_body .drop_titlebar2 li:first-child {
  color: white;
  font-size: var(--font-h5);
  font-weight: var(--font-weight-bold);
}

/*=====================================*/

.MOBILE_JPFATE .main_body .drop_titlebar li a,
.MOBILE_JPFATE .main_body .drop_titlebar2 li a {
  display: block;
  width: 30px;
  height: 30px;
  position: relative;
}

.MOBILE_JPFATE .main_body .drop_titlebar2 li a img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-90deg);
}

.MOBILE_JPFATE .main_body .drop_titlebar li a::before {
  content: "";
  position: absolute;
  height: 30px;
  width: 2px;
  top: 0%;
  left: 40%;
  background-color: var(--color-black-b2);
  color: var(--color-black-b2);
  transform: translate(50%) rotate(45deg);
}

.MOBILE_JPFATE .main_body .drop_titlebar li a::after {
  content: "";
  position: absolute;
  height: 30px;
  width: 2px;
  top: 0%;
  left: 40%;
  background-color: var(--color-black-b2);
  color: var(--color-black-b2);
  transform: translate(50%) rotate(315deg);
}

/*=====================================*/

.MOBILE_JPFATE .main_body .drop_titlebar .close {
  width: 30px;
  height: 30px;
  overflow: hidden;
}

.MOBILE_JPFATE .main_body .bgcolor_blue {
  background-color: #5C92BF;
}

.MOBILE_JPFATE .main_body .bgcolor_blue2 {
  background-color: #D6E4ED;
}

.MOBILE_JPFATE .main_body .drop_titlebar2 li.color_black {
  color: #5C92BF;
}

/*=======================================*/
/*============  手機版：搜尋區塊 ===========*/
/*=======================================*/
.MOBILE_JPFATE .main_body .drop_content {
  padding: 2% 4%;
  box-sizing: border-box;
}

/* 搜尋欄位區塊 */
.MOBILE_JPFATE .main_body .drop_info .main_search {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

/* 手機版下拉功能列：搜尋區塊，輸入框 */
.MOBILE_JPFATE .main_body .drop_info .input_itembox {
  width: 100%;
  margin-bottom: 10px;
  box-sizing: border-box;
}

/* 手機版下拉功能列：搜尋區塊，控制第2、3輸入框寬度 */
.MOBILE_JPFATE .main_body .drop_info .input_itembox:nth-child(2),
.MOBILE_JPFATE .main_body .drop_info .input_itembox:nth-child(3) {
  width: 49%;
}

/* 手機版下拉功能列：搜尋區塊，控制最後一欄輸入框寬度 */
.MOBILE_JPFATE .main_body .drop_info .input_itembox:last-child {
  width: 40%;
  margin: 0 auto;
  margin-bottom: 10px;
}

/* 手機版下拉功能列：搜尋欄位 */
.MOBILE_JPFATE .main_body .drop_info .search_wrapper {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

/* 手機版下拉功能列：搜尋欄位輸入框樣式 */
.MOBILE_JPFATE .main_body .drop_info .search_wrapper .search-box {
  width: 100%;
  height: 40px;
  outline: 0;
  border: 1px solid #C7C7C7;
  border-radius: 25px;
  font-size: 1.1rem;
  box-sizing: border-box;
  padding: 0% 3%;
  text-indent: 30px;
}

/* 手機版下拉功能列：搜尋欄位提示詞 */
.MOBILE_JPFATE .main_body .drop_info .search-box::placeholder {
  font-size: 1rem;
  color: #666666;
}

/* 手機版下拉功能列：搜尋欄位 icon */
.MOBILE_JPFATE .main_body .drop_info .search_wrapper span.search-icon {
  position: absolute;
  top: 0%;
  left: 2%;
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url(../image/icon_search.png) no-repeat center;
  background-size: 20px 20px;
}

/* 輸入欄位樣式：當文字鍵入時，移除按鈕樣式 */
.MOBILE_JPFATE .main_body .drop_info .search_wrapper .clear-icon {
  position: absolute;
  right: 0%;
  top: 50%;
  transform: translate(-75%, -50%);
  border: 1px solid transparent;
  background-color: #b4b4b4;
  display: inline-block;
  outline: 0;
  cursor: pointer;
  width: 20px;
  height: 20px;
  animation: fade-in .3s ease-in-out;
  border-radius: 15px;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* 輸入欄位：移除小按鈕X線段樣式 */
.MOBILE_JPFATE .main_body .drop_info .search_wrapper .clear-icon::before {
  display: inline-block;
  position: absolute;
  content: '';
  height: 15px;
  width: 2px;
  top: 7%;
  right: 50%;
  background-color: white;
  -webkit-transform: translate(50%) rotate(45deg);
  transform: translate(50%) rotate(45deg);
}

/* 輸入欄位：移除小按鈕X線段樣式 */
.MOBILE_JPFATE .main_body .drop_info .search_wrapper .clear-icon::after {
  display: inline-block;
  position: absolute;
  content: '';
  height: 15px;
  width: 2px;
  top: 7%;
  right: 50%;
  background-color: white;
  -webkit-transform: translate(50%) rotate(315deg);
  transform: translate(50%) rotate(315deg);
}

/* 輸入欄位：當文字還沒鍵入時，不出現移除按鈕 */
.MOBILE_JPFATE .main_body .drop_info .search_wrapper .search-box:not(:valid)~.clear-icon {
  display: none;
}


/*=========================================*/
/*===============  下拉式選單 ==============*/
/*=========================================*/
/* 下拉選單樣式 */
.MOBILE_JPFATE .main_body .drop_info .select_case select {
  width: 100%;
  height: 40px;
  padding: 7px 10px;
  border: 1px solid #C7C7C7;
  border-radius: 999px;
  color: #828282;
  font-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
  background: white;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  background-image: url(../image/select_icon_down_line2.png);
  background-position: right 5px top 50%;
  background-size: 20px auto;
  background-repeat: no-repeat;
}

/*=====================================*/

/* 搜尋按鈕 */
.MOBILE_JPFATE .main_body .drop_info .select_button {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  background-color: #C029FF;
  border-radius: 999px;
  overflow: hidden;
}

/* 搜尋按鈕樣式 */
.MOBILE_JPFATE .main_body .drop_info .select_button a {
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: white;
  text-align: center;
  font-size: 1.1rem;
}

/* 下拉功能列：標籤區塊 */
.MOBILE_JPFATE .main_body .drop_info2 {
  width: 100%;
  height: auto;
  background-color: white;
  padding: 4%;
  box-sizing: border-box;
}

/* 下拉功能列：標籤區塊，選到樣式 */
.MOBILE_JPFATE .main_body .drop_info2 .keywords_block ul li a:focus-within {
  color: #F48787;
  font-size: 1rem;
  font-weight: bold;
  border: 1px solid #D6E4ED;
  background-color: #D6E4ED;
}

/* 下拉功能列：標籤區塊，關鍵字區塊 */
.MOBILE_JPFATE .main_body .keywords_block {
  width: 100%;
  height: auto;
}

.MOBILE_JPFATE .main_body .keywords_block ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.MOBILE_JPFATE .main_body .keywords_block li {
  width: auto;
  height: 30px;
  line-height: 30px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.MOBILE_JPFATE .main_body .keywords_block li.drop_key_active a {
  display: block;
  color: #F48787;
  border: 1px solid #D6E4ED;
  background-color: #D6E4ED;
  font-weight: bold;
}

.MOBILE_JPFATE .main_body .keywords_block li a {
  display: block;
  color: #666666;
  font-size: 1rem;
  border: 1px solid #666666;
  border-radius: 999px;
  padding: 0px 8px;
  box-sizing: border-box;
}

/* 下拉功能列：標籤區塊，按鈕顏色 */
.MOBILE_JPFATE .main_body .keywords_block li.key_purple a {
  display: block;
  color: #C029FF;
  border: 1px solid #C029FF;
}

/*====================================*/
/*============  控制上下間距 ===========*/
/*====================================*/
/* 控制第一區塊padding */
.PC_JPFATE .main_body section.pd_itemmenu_0 {
  padding: 0px;
}

.PC_JPFATE .main_body .mgm_5 {
  margin-bottom: 5px;
}

.MOBILE_JPFATE .main_body .mgm_5 {
  margin-bottom: 0px;
}

.MOBILE_JPFATE .main_body section.pd_itemmenu_0 {
  padding: 0%;
}

.MOBILE_JPFATE .main_body section.pd_0 {
  padding-top: 0px;
}

.MOBILE_JPFATE .main_body section.s_content {
  padding: 0% 4% 4% 4%;
}

.MOBILE_JPFATE .main_body .pd_10_0_20_0 {
  padding: 10px 0px 20px 0px;
}

.PC_JPFATE .main_body .pd_15 {
  padding-top: 20px;
}

.MOBILE_JPFATE .main_body .pd_15 {
  padding-top: 15px;
}

.MOBILE_JPFATE .main_body .pdm_15 {
  margin-bottom: 15px;
}

.MOBILE_JPFATE .main_body .pdm_0 {
  margin-bottom: 0px;
}

.MOBILE_JPFATE .main_body .mgt_0 {
  margin-top: 0px;
}

.PC_JPFATE .main_body .pd_survey {
  padding: 25px 0px;
}

.MOBILE_JPFATE .main_body .pd_survey {
  padding: 5% 0%;
}

/* 控制第一區輪播區塊 padding */
.MOBILE_JPFATE .main_body section.pd_first {
  padding: 65px 0px 35px 0px;
}

.MOBILE_JPFATE .main_body section.pd_first_slide {
  padding: 65px 0px 15px 0px;
}

.MOBILE_JPFATE .main_body .norm_firstbox {
  margin-top: 20px;
}

/*====================================*/
/*============  滑鼠移過效果 ===========*/
/*====================================*/
.PC_JPFATE .main_body .card_box:hover,
.PC_JPFATE .main_body .card_box_square:hover,
.PC_JPFATE .main_body .card_box_norm:hover,
.PC_JPFATE .main_body .card_box_fate:hover,
.PC_JPFATE .main_body .feature_box li:hover,
.PC_JPFATE .main_body .card_box_more:hover {
  transition: all var(--trans-effect-e3);
  transform: translateY(-10px);
  box-shadow: var(--box-shadow);
  z-index: 20;
}

/* 版塊卡片：寬度 */
.main_body .width-170 {
  width: 170px;
}

.main_body .width-190 {
  width: 190px;
}

.main_body .width-200 {
  width: 200px;
}

.main_body .width-49 {
  width: 49%;
}

.main_body .align-center {
  align-items: center;
}

/*====================================*/
/*============  修正部分css ===========*/
/*====================================*/
.main_body .slide_dot,
.main_body .norm_dot {
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 10px 0px;
  margin-top: 7px;
}

.slide_dot .swiper-pagination-bullet-active,
.norm_dot .swiper-pagination-bullet-active {
  width: 8px;
  height: 8px;
  background-color: var(--color-pink-jpa1);
  border: 1px solid var(--color-pink-jpa1);
  border-radius: var(--border-radius-round);
}

/* 
==============================================================================
==============================================================================
*/
/* 消失區塊 */
.PC_JPFATE .for_mb {
  display: none;
}

.MOBILE_JPFATE .for_pc {
  display: none;
}

.main_body .jp-color-blue {
  color: var(--color-blue-jpa1);
}

.main_body .jp-color-pink {
  color: var(--color-pink-jpa3);
}

.main_body .jp-color-gray {
  color: var(--color-gray-jpa1);
}

.main_body .jp-color-orange {
  color: var(--color-orange-jpa1);
}

.main_body .jp-color-red {
  color: var(--color-red-jpa1);
}

.main_body .jp-color-purple {
  color: var(--color-purple-jpa1);
}

.main_body .jp-color-green {
  color: var(--color-green-jpa1);
}

/* 間距 */
.blank_br {
  height: var(--blank-lv20);
}

/*=====================================*/

/* 包裝主題背景區塊 */
/* 章節背景底色：#F8F4E9 */
.main_body .bgcolor-a1 {
  background-color: var(--color-section-jpa1);
}

/* 章節背景底色：#F7EED7(日本全館章節使用) */
.main_body .bgcolor-a2 {
  background-color: var(--color-section-jpa2);
}

/* 章節背景底色：#B29079(手機版表尾：品牌追蹤與APP下載使用) */
.main_body .bgcolor-a3 {
  background-color: var(--color-section-jpa3);
}

/* 章節背景底色：#D6E4ED(表尾：品牌綁定LINE使用) */
.main_body .bgcolor-brand-a1 {
  background-color: var(--color-blue-jpa2);
}

/* 章節背景底色：#E4D6EA(表尾：關於科技紫微網使用) */
.main_body .bgcolor-brand-a2 {
  background-color: var(--color-purple-jpa2);
}

/*=====================================*/

/* 背景底色區塊(標籤使用)*/
/* 背景紅色：#D86A6A */
.main_body .bgcolor-red {
  background-color: var(--color-red-jpa1);
}

/* 背景紫色：#A475D1 */
.main_body .bgcolor-purple {
  background-color: var(--color-purple-jpa1);
}

/* 背景綠色：#7AB75A */
.main_body .bgcolor-green {
  background-color: var(--color-green-jpa1);
}

/*=====================================*/
.main_body {
  width: 100%;
  height: auto;
  overflow: hidden;
}

/*====================================*/
/*============ 章節段落區塊 ============*/
/*====================================*/
.PC_JPFATE .main_body .section_block {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 40px 0px;
}

.MOBILE_JPFATE .main_body .section_block {
  padding: 5% 0%;
}

.main_body .bgcolor-brand-a1 {
  background-color: var(--color-blue-jpa2);
}

.PC_JPFATE .main_body .card_board {
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}

.MOBILE_JPFATE .main_body .card_board {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0% 4%;
  box-sizing: border-box;
  overflow: hidden;
}

/*==========================================*/
/*===========  表尾：科技紫微日本命理 ==========*/
/*==========================================*/
/* 手機版：日本命理LINE官方帳號區塊 */
.MOBILE_JPFATE .main_body .jp108_footarea_c {
  width: 100%;
  height: auto;
  color: var(--color-black-a2);
}

/* 手機：追蹤、APP下載區塊 */
.MOBILE_JPFATE .main_body .sns_case {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.MOBILE_JPFATE .main_body .sns_case p {
  color: white;
}

.MOBILE_JPFATE .main_body .sns_itembox,
.MOBILE_JPFATE .main_body .app_itembox {
  width: 100%;
  height: auto;
}

.MOBILE_JPFATE .main_body .sns_itembox ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.MOBILE_JPFATE .main_body .sns_itembox li {
  width: 75px;
  height: 75px;
}

.MOBILE_JPFATE .main_body .sns_itembox li a {
  display: block;
  width: 100%;
  height: 65px;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 65% auto;
  margin: 0 auto;
  position: relative;
  color: white;
}

.MOBILE_JPFATE .main_body .sns_itembox li a p {
  width: 100%;
  font-size: var(--font-note);
  text-align: center;
  position: absolute;
  bottom: 0;
}

.MOBILE_JPFATE .main_body .txt-title-sns {
  font-size: var(--font-h5);
  font-weight: var(--font-weight-bold);
  margin-bottom: 10px;
  text-align: center;
}

/* APP 下載區塊 */
.MOBILE_JPFATE .main_body .app_itembox ul {
  width: 98%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

.MOBILE_JPFATE .main_body .app_itembox li {
  width: 48%;
  height: 55px;
  background-color: black;
  border-radius: var(--border-radius-smaller);
  overflow: hidden;
}

.MOBILE_JPFATE .main_body .app_itembox li a {
  display: block;
  width: 100%;
  height: 55px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  border-radius: 10px;
}

/* 社群與APP下載 logo */


/* 版權區塊 */
.MOBILE_JPFATE .main_body .footer_box {
  width: 100%;
  height: auto;
  margin: 25px 0px 0px 0px;
  box-sizing: border-box;
  text-align: center;
}

.MOBILE_JPFATE .main_body .footer_box::before {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1px;
  border-top: 1px solid white;
  padding: 0px 0px 15px 0px;
}

.MOBILE_JPFATE .main_body .footer_box p {
  font-size: 0.8rem;
  line-height: var(--line-height-note);
  color: white;
}

.MOBILE_JPFATE .main_body .footer_box a.back {
  display: block;
  color: white;
  font-size: var(--font-note);
  margin: 0px 0px 10px 0px;
}

.MOBILE_JPFATE .main_body .link_f_area {
  width: 100%;
  height: auto;
}

.MOBILE_JPFATE .main_body .link_f_area ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.MOBILE_JPFATE .main_body .link_f_area li {
  width: auto;
  height: 20px;
  line-height: 20px;
  margin-bottom: 3px;
  box-sizing: border-box;
  color: white;
}

.MOBILE_JPFATE .main_body .link_f_area li a {
  display: block;
  width: 100%;
  height: auto;
  font-size: 0.8rem;
  color: white;
}

/* 
===============================================================================================
===============================================================================================
*/

/* 電腦版：日本命理LINE官方帳號區塊 */

/* 底色 */
.main_body .bgcolor_LINE {
  background-color: var(--color-LINE);
}

.main_body .bgcolor_BRAND {
  background-color: var(--color-orange-jpa1);
}

/* 熱門推薦、新品上市區塊：控制左右欄位 */
.main_body .jp108_footarea_a .double_case {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

/* 電腦版：日本命理LINE官方帳號區塊 */
.main_body .text_block {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-small);
  overflow: hidden;
  padding: 2%;
  box-sizing: border-box;
}

.main_body .text_block h4 {
  line-height: 3rem;
}

.main_body .text_block p {
  font-size: var(--font-primary);
}

/* LINE 右側區塊 */
.main_body .line_block {
  position: relative;
  width: 100%;
  height: auto;
  background-color: white;
  border-radius: var(--border-radius-small);
}

/* LINE 標題區塊 */
.main_body .line_titlebar {
  width: 100%;
  height: auto;
  color: white;
  padding: 3%;
  box-sizing: border-box;
  border-top-left-radius: var(--border-radius-small);
  border-top-right-radius: var(--border-radius-small);
}

.main_body .line_titlebar h3,
.main_body .line_titlebar h4 {
  line-height: 2.2rem;
}

/* QRcode */
.main_body .qrcode_ph {
  position: absolute;
  top: 8%;
  right: 4%;
  width: 130px;
  height: auto;
  background-color: white;
  border-radius: var(--border-radius-small);
  box-shadow: var(--box-shadow);
  overflow: hidden;
}

.main_body .qrcode_ph img {
  display: block;
  width: 100%;
  height: auto;
}

/* LINE 內容*/
.main_body .line_info {
  width: calc(100% - 28%);
  height: auto;
  padding: 3%;
  box-sizing: border-box;
}

.main_body .mark_list_block {
  width: 100%;
  height: auto;
}

.main_body .mark_list_block li {
  width: 100%;
  height: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

.main_body .mark_list_block li:last-child {
  margin-bottom: 0px;
}

.main_body .mark_list_block li span.line_mark {
  border: 1px solid var(--color-LINE);
  color: var(--color-LINE);
  box-sizing: border-box;
  padding: 1% 1%;
  border-radius: 5px;
  margin-right: 5px;
  font-size: var(--font-note);
}

.main_body .mark_list_block li span.price_tag {
  font-size: 0.8rem;
}

/* 手機版：日本命理LINE官方帳號區塊 */
/* LINE 顏色 */
.main_body .bgcolor-line {
  background-color: var(--color-LINE);
}

.main_body .jp108_footarea_a {
  width: 100%;
  height: auto;
  color: var(--color-black-a2);
}

.MOBILE_JPFATE .main_body .jp108_footarea_a a.jp_footbt {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-black-a2);
}

.MOBILE_JPFATE .main_body .jp108_footarea_a h4 {
  font-size: var(--font-h4);
}

.MOBILE_JPFATE .main_body .footer_itembox {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-small);
  overflow: hidden;
}

.MOBILE_JPFATE .main_body .footer_itembox .c_title {
  color: white;
  text-align: center;
  padding: 2%;
  box-sizing: border-box;
}

.MOBILE_JPFATE .main_body .line_doublecase {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 2% 2%;
  box-sizing: border-box;
  border-top-left-radius: var(--border-radius-small);
  border-top-right-radius: var(--border-radius-small);
}

.MOBILE_JPFATE .main_body .brand_bar {
  width: 100%;
  height: auto;
  margin-top: 15px;
}

.MOBILE_JPFATE .main_body ul.prewords_box {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.MOBILE_JPFATE .main_body ul.prewords_box li {
  font-size: var(--font-h4);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.MOBILE_JPFATE .main_body .line_titlebar_m {
  width: 80%;
  height: auto;
  color: white;
}

.main_body .line_titlebar_m h3,
.main_body .line_titlebar_m h4 {
  text-align: left;
}

.MOBILE_JPFATE .main_body .line_m_bt {
  width: 35%;
  height: auto;
  background-color: var(--color-black-a2);
  border-radius: 10px;
  color: white;
  text-align: center;
  font-size: var(--font-h5);
  font-weight: var(--font-weight-bold);
  background-color: #009300;
  border: 1px solid white;
  padding: 2% 0%;
}

.MOBILE_JPFATE .main_body .line_info_mb {
  width: 100%;
  height: auto;
  padding: 3%;
  box-sizing: border-box;
  background-color: white;
  color: var(--color-black-a2);
}

.MOBILE_JPFATE .main_body .jp108_footarea_a .mark_list_block {
  width: 100%;
  height: auto;
}

.MOBILE_JPFATE .main_body .jp108_footarea_a .mark_list_block li {
  width: 100%;
  height: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: var(--font-secondary);
  line-height: 1.4rem;
}

.MOBILE_JPFATE .main_body .jp108_footarea_a .mark_list_block li span.line_mark {
  border: 1px solid var(--color-LINE);
  color: var(--color-LINE);
  box-sizing: border-box;
  padding: 1%;
  border-radius: 5px;
  margin-right: 5px;
  font-size: var(--font-note);
}

</style><style>

/* 手機版：日本命理LINE官方帳號區塊 */
.main_body .bgcolor-LINE {
  background-color: var(--color-LINE);
}

.main_body .bgcolor-BRAND {
  background-color: var(--color-orange-jpa1);
}

.main_body .bgcolor-red {
  background-color: var(--color-red-jpa1);
}

.main_body .bgcolor-purple {
  background-color: var(--color-purple-jpa1);
}

.main_body .bgcolor-green {
  background-color: var(--color-green-jpa1);
}

.main_body .jp108_footarea_b {
  width: 100%;
  height: auto;
  color: var(--color-black-a2);
}

.main_body .jp108_footarea_b h4 {
  font-size: var(--font-h4);
}

.PC_JPFATE .main_body .jp108_footarea_b .double_case {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.MOBILE_JPFATE .main_body .jp108_footarea_b .double_case {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.PC_JPFATE .main_body .width-49 {
  width: 49%;
}

.MOBILE_JPFATE .main_body .width-49 {
  width: 100%;
}

.MOBILE_JPFATE .main_body .jp108_footarea_b h4 {
  font-size: var(--font-h4);
  line-height: normal;
  text-align: center;
}

.MOBILE_JPFATE .main_body .text_br {
  display: block;
}

/* 電腦版：日本命理LINE官方帳號區塊 */
.MOBILE_JPFATE .main_body .text_block {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-small);
  overflow: hidden;
  box-sizing: border-box;
  padding: 0%;
}

.MOBILE_JPFATE .main_body .text_block p {
  margin-top: 10px;
}

/* 品牌區塊 */
.PC_JPFATE .main_body .brand_block {
  height: auto;
  background-color: white;
  border-radius: var(--border-radius-small);
  overflow: hidden;
}

.MOBILE_JPFATE .main_body .brand_block {
  height: auto;
  background-color: white;
  border-radius: var(--border-radius-small);
  overflow: hidden;
  margin-top: 15px;
}

/* 品牌三重點 */
.PC_JPFATE .main_body .brand_case {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.PC_JPFATE .main_body .brand_info {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 3% 3%;
  box-sizing: border-box;
}

.MOBILE_JPFATE .main_body .brand_info {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4%;
  box-sizing: border-box;
}

.PC_JPFATE .main_body .brand_info .b_box li {
  font-size: var(--font-secondary);
}

/* 品牌標題區塊 */
.PC_JPFATE .main_body .brand_titlebar {
  width: 100%;
  height: auto;
  color: white;
  padding: 3%;
  box-sizing: border-box;
  border-top-left-radius: var(--border-radius-small);
  border-top-right-radius: var(--border-radius-small);
}

.MOBILE_JPFATE .main_body .brand_titlebar {
  width: 100%;
  height: auto;
  color: white;
  padding: 2%;
  box-sizing: border-box;
  border-top-left-radius: var(--border-radius-small);
  border-top-right-radius: var(--border-radius-small);
}

.PC_JPFATE .main_body .brand_titlebar h4 {
  line-height: 2.2rem;
}

.MOBILE_JPFATE .main_body .brand_titlebar h4 {
  font-size: var(--font-h5);
}

.PC_JPFATE .main_body .b_box {
  width: 33.3333%;
  background-color: #F5F5F5;
  padding: 1.5%;
  margin-right: 3%;
  border-radius: var(--border-radius-small);
  box-sizing: border-box;
}

.PC_JPFATE .main_body .b_box:last-child {
  margin-right: 0%;
}

.MOBILE_JPFATE .main_body .b_box {
  width: 100%;
  background-color: #F5F5F5;
  border-radius: var(--border-radius-small);
  box-sizing: border-box;
  padding: 4%;
  margin-bottom: 15px;
}

.MOBILE_JPFATE .main_body .b_box:last-child {
  margin-bottom: 0px;
}

.MOBILE_JPFATE .main_body .box_row {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.MOBILE_JPFATE .main_body .box_row li:first-child {
  width: 30%;
}

.MOBILE_JPFATE .main_body .box_row li:last-child {
  width: 70%;
  margin-left: 2%;
}

.PC_JPFATE .main_body .b_box li.box_mark {
  width: 90px;
  height: 90px;
  border-radius: var(--border-radius-round);
  text-align: center;
  font-size: var(--font-h6);
  color: white;
  margin: 0 auto;
  position: relative;
  margin-bottom: 10px;
}

.MOBILE_JPFATE .main_body .b_box li.box_mark {
  width: 70px;
  height: 70px;
  border-radius: var(--border-radius-round);
  text-align: center;
  font-size: var(--font-h6);
  color: white;
  margin: 0 auto;
  position: relative;
}

.PC_JPFATE .main_body .b_box li.box_mark p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.MOBILE_JPFATE .main_body .b_box li.box_mark p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.main_body .box_mark_br {
  display: block;
}

/* 
========================================================================================
========================================================================================
*/
.MOBILE_JPFATE .main_body {
  display: flex;
  flex-direction: column;
}

.PC_JPFATE .main_body {
  display: flex;
  flex-direction: column;
}

.main_body .TWOLINE_ELLIPSIS {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.MOBILE_JPFATE .main_body .items_menu::-webkit-scrollbar {
  display: none;
}

.MOBILE_JPFATE .main_body .items_menu {
  overflow-x: scroll
}

.main_body .items_menu ul {
  width: max-content;
}

.MOBILE_JPFATE .main_body .price_style .mods_info {
  min-height: 170px;
}

.PC_JPFATE {
  background-color: var(--color-section-jpa1);
}

.PC_JPFATE .main_body .width-968 {
  width: 968px;
}

.PC_JPFATE .main_body .items_menu li {
  height: 35px;
  width: auto;
}

.PC_JPFATE .main_body ul.items_type li a {
  height: 35px;
  line-height: 35px;
  width: auto;
}

.PC_JPFATE a {
  cursor: pointer;
  text-decoration: none;
}

.PC_JPFATE .main_body .card_box_more .card_photo_more {
  width: 80px;
  height: 80px;
}

.PC_JPFATE .main_body .more_category {
  top: 8px;
  width: 35px;
  font-size: 0.7rem;
}

.PC_JPFATE .main_body .feature_box li {
  width: 32.5% !important;
}

.PC_JPFATE h4 {
  font-size: var(--font-h4);
}

.PC_JPFATE section .bgcolor-LINE {
  background-color: var(--color-LINE);
}

.LINE_ELLIPSIS {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.TWOLINE_ELLIPSIS {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.THREELINE_ELLIPSIS {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.PC_JPFATE h4 {
  color: #333333;
}

.MOBILE_JPFATE .main_body h4 {
  font-weight: 500;
}

/* 297使用的css不同 */
.PC_JPFATE {
  font-family: "微軟正黑體","蘋果儷黑體","新細明體",'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Tahoma,Verdana,sans-serif;
}

.PC_JPFATE p, .MOBILE_JPFATE p {
  margin-top: 0;
  text-indent: 0;
}

.PC_JPFATE .main_body h4, .MOBILE_JPFATE .main_body h4 {
  font-weight: 500;
  font-family: Arial,華康粗黑體,"Microsoft JhengHei",sans-serif;
}