@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: top;
  list-style: none;
  text-decoration: none; }

ol, ul span {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

/* remember to define focus styles! */
:focus {
  outline: 0; }

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none; }

del {
  text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  height: auto; }

body {
  overflow-x: hidden; }

a {
  cursor: pointer; }

.header_bk {
  width: 100%;
  height: 70px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20; }

.header_block {
  width: 100%;
  max-width: 1060px;
  height: 70px;
  padding: 10px 20px;
  margin: 0 auto;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.header-logo {
  width: 146px;
  height: 31px;
  margin-top: 10px;
  margin-right: 10px;
  float: left;
  /* 綠色(logo_g.png) . 白色(logo_w.png)  */
  background-image: url(../images/logo_g.png);
  background-size: 100%;
  background-repeat: no-repeat; }
  .header-logo a {
    width: 100%;
    height: 100%;
    display: block; }

.header-btn01 {
  display: block;
  margin: 16px 6px 0px 0px;
  float: left; }

.header-btn01 a:link,
.header-btn01 a:visited,
.header-btn01 a:hover,
.header-btn01 a:active {
  font-size: 15px;
  text-align: center;
  line-height: 15px;
  padding: 4px 15px;
  border-radius: 15px; }

.header-btn01 a:link,
.header-btn01 a:visited {
  /* 綠色(#61953f) . 白色(#FFFFFF) */
  color: #0a76d4;
  /* 綠色(97,149,63,1) . 白色(255,255,255,1) */
  border: 1px solid #0a76d4; }

.header-btn01 a:hover,
.header-btn01 a:active {
  /* 白色(#FFFFFF自訂) */
  color: #0460b0;
  /* 綠色(#0f87f2) . 白色(#FFFFFF) */
  border: 1px solid #0a76d4; }

.header-share {
  float: right;
  margin: 15px 6px 0px 20px; }

/*** 活動頁分享按鈕 stert***/
.resp-sharing-button {
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 22px;
  -webkit-transition: 25ms ease-out;
  -o-transition: 25ms ease-out;
  transition: 25ms ease-out;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif; }

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: top; }

.resp-sharing-button--small svg {
  margin: 0;
  vertical-align: middle; }

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #fff;
  stroke: none; }

.resp-sharing-button--facebook {
  background-color: #3b5998;
  border-color: #3b5998; }

.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
  background-color: #2d4373;
  border-color: #2d4373; }

.i-amphtml-element:focus {
  outline: none !important;
  outline-offset: 0; }

.hamibook_event_share_btn {
  width: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 10px;
  position: absolute;
  top: 10px;
  right: 10px; }

/*** 活動頁分享按鈕 end***/
.index_visual_bk {
  width: 100%;
  height: auto;
  background-image: url(../images/index_visual_bk.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  padding: 70px 0 0 0; }

.index_visual_bk_left_top {
  width: 8%;
  max-width: 152px;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 0; }
  @media all and (max-width: 1146px) {
    .index_visual_bk_left_top {
      display: none; } }

.index_visual_bk_left {
  width: 20.471%;
  max-width: 217px; }

.index_visual_bk_right_top {
  width: 8%;
  max-width: 152px;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 0; }
  @media all and (max-width: 1146px) {
    .index_visual_bk_right_top {
      display: none; } }

.index_visual_bk_right {
  width: 20.471%;
  max-width: 217px; }

.index_visual_main {
  width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 50px;
  left: 0; }
  .index_visual_main .index_visual {
    width: 89.528%;
    max-width: 949px;
    margin: 0 auto; }

.index_menu_list {
  width: 100%;
  background-color: #eb5b2d;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 8px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.index_menu_btn01 {
  width: 35.472%;
  max-width: 376px; }

.index_menu_pic01 {
  width: 17.264%;
  max-width: 183px;
  margin: 0 4.1%; }

.index_menu_btn02 {
  width: 35.366%;
  max-width: 377px; }

.index_block01_bk {
  width: 100%;
  background-color: #ffb3db;
  position: relative; }

.index_block01_main {
  width: 70.283%;
  max-width: 745px;
  margin: 0 auto;
  position: relative; }

.index_block01_bk_left {
  width: 16.515%;
  max-width: 174px;
  max-height: 330px;
  position: absolute;
  top: 0;
  left: 0; }

.index_block01_bk_right {
  width: 15.283%;
  max-width: 162px;
  max-height: 330px;
  position: absolute;
  top: 0;
  right: 0; }

.index_block02_bk {
  width: 100%;
  position: relative;
  background-image: url("../images/index_block02_bk.jpg");
  background-size: 216px auto;
  background-repeat: repeat;
  overflow: hidden; }

.index_block02_main {
  width: 96%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 23px 0; }

.index_block02_title {
  width: 90.283%;
  max-width: 957px;
  margin: 0 auto 25px auto; }

.index_block02_content01 {
  width: 100%;
  max-width: 872px;
  background-color: #00b295;
  margin: 0 auto 30px auto;
  position: relative;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-image: url(../images/index_block02_content01_bk01.png);
  background-repeat: repeat-x;
  background-size: auto 19px;
  background-position: 0 8px;
  display: block; }

.index_block02_content01_decorate {
  width: 100%;
  height: 19px;
  background-image: url(../images/index_block02_content01_bk01.png);
  background-repeat: repeat-x;
  background-size: auto 19px;
  background-position: 0;
  margin: 0 0 8px 0; }

.index_block02_content01_title {
  width: 69.711%;
  max-width: 573px;
  margin: -23px auto 24px auto; }

.index_block02_content01_list01 {
  width: 100%;
  height: 550px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch; }

.index_block02_content01_list_decorate {
  width: 8%;
  background-image: url("../images/index_block02_content01_list_decorate.png");
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat; }

.index_block02_content01_main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  max-width: 730px; }

.celeb_card_avatar {
  width: 60px;
  height: 60px;
  margin: 0 auto 5px auto;
  border: 3px solid #fdc875;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden; }
  .celeb_card_avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }

.celeb_card_title {
  width: 100%;
  height: 19px;
  font-size: 17px;
  line-height: 19px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.celeb_card_top_block {
  width: 100%; }

.celeb_card_top {
  width: 100%;
  border: 3px solid #fdc875;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 15px 10px 15px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 0 19px 0; }

.celeb_card_top_left {
  width: 145px; }

.celeb_card_top_right {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1; }

.celeb_card_top_avatar {
  width: 90px;
  height: 90px;
  margin: 0 auto 5px auto;
  border: 3px solid #fdc875;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden; }
  .celeb_card_top_avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }

.celeb_card_top_title {
  width: 100%;
  height: 17px;
  font-size: 15px;
  line-height: 17px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.celeb_card_top_right_title {
  width: 100%;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 8px 0; }

.celeb_card_top_right_text {
  width: 100%;
  color: #fff;
  font-size: 16px;
  line-height: 1.5em;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-all;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; }

.celeb_card_content {
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.celeb_card_content02 {
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around; }

.index_block01_card {
  width: 19%;
  background-color: #fff;
  -webkit-transition: -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
  transition: -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
  -o-transition: transform 0.1s ease, box-shadow 0.1s ease;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  transition: transform 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease; }
  .index_block01_card:hover {
    -webkit-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px); }
  .index_block01_card a {
    width: 100%;
    height: 100%;
    display: block; }
  .index_block01_card img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }

.swiper-pagination {
  height: 13px;
  position: relative !important;
  padding: 20px 0 0 0; }

.index_block02_content02 {
  width: 100%;
  max-width: 872px;
  background-color: #ffc7d3;
  margin: 0 auto 30px auto;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 0;
  position: relative;
  box-sizing: border-box; }

.index_block02_content02_line {
  width: 100%;
  height: 19px;
  background-image: url(../images/index_block02_content01_bk02.png);
  background-repeat: repeat-x;
  background-size: auto 19px;
  background-position: 0; }

.index_block02_content02_main {
  width: 82%;
  margin: 0 auto; }

.index_block02_content02_title {
  width: 429px;
  margin: 19px auto; }

.index_block02_content02_text {
  width: 100%;
  color: #7f4f21;
  font-size: 15px;
  line-height: 17px;
  text-align: center; }

.index_block02_content02_left {
  width: 7.158%;
  height: 100%;
  background-image: url("../images/index_block02_content02_decorate.png");
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10; }

.index_block02_content02_right {
  width: 7.158%;
  height: 100%;
  background-image: url("../images/index_block02_content02_decorate.png");
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10; }

.index_block02_content02_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 0 20px 0; }

.index_block02_content02_box02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin: 0 0 20px 0; }

.index_block02_card {
  width: 19%;
  background-color: #fff;
  -webkit-transition: -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
  transition: -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
  -o-transition: transform 0.1s ease, box-shadow 0.1s ease;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  transition: transform 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease; }
  .index_block02_card:hover {
    -webkit-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px); }
  .index_block02_card a {
    width: 100%;
    height: 100%;
    display: block; }
  .index_block02_card img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }

.index_block02_card02 {
  width: 19%;
  max-height: 267.28px;
  background-color: #fff;
  -webkit-transition: -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
  transition: -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
  -o-transition: transform 0.1s ease, box-shadow 0.1s ease;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  transition: transform 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease; }
  .index_block02_card02:hover {
    -webkit-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px); }
  .index_block02_card02 a {
    width: 100%;
    height: 100%;
    display: block; }
  .index_block02_card02 img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }

.index_block02_content03 {
  width: 100%;
  max-width: 872px;
  background-color: #ffe94a;
  margin: 0 auto 30px auto;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 0;
  position: relative; }

.index_block02_content03_title {
  width: 643px;
  margin: 19px auto; }

.index_block02_content03_text {
  width: 100%;
  color: #7f4f21;
  font-size: 15px;
  line-height: 17px;
  text-align: center; }

.index_block02_content03_line {
  width: 100%;
  height: 19px;
  background-image: url(../images/index_block02_content03_bk01.png);
  background-repeat: repeat-x;
  background-size: auto 19px;
  background-position: 0; }

.index_block02_content03_left {
  width: 7.158%;
  height: 100%;
  background-image: url("../images/index_block02_content03_decorate.png");
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10; }

.index_block02_content03_right {
  width: 7.158%;
  height: 100%;
  background-image: url("../images/index_block02_content03_decorate.png");
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10; }

.index_block02_content04 {
  width: 100%;
  max-width: 872px;
  background-color: #ff8500;
  margin: 0 auto 30px auto;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 0;
  position: relative; }

.index_block02_content04_line {
  width: 100%;
  height: 19px;
  background-image: url(../images/index_block02_content04_bk01.png);
  background-repeat: repeat-x;
  background-size: auto 19px;
  background-position: 0; }

.index_block02_content04_title {
  width: 407px;
  margin: 19px auto; }

.index_block02_content04_text {
  width: 100%;
  color: #7f4f21;
  font-size: 15px;
  line-height: 17px;
  text-align: center; }

.index_block02_content04_left {
  width: 7.158%;
  height: 100%;
  background-image: url("../images/index_block02_content04_decorate.png");
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10; }

.index_block02_content04_right {
  width: 7.158%;
  height: 100%;
  background-image: url("../images/index_block02_content04_decorate.png");
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10; }

.index_block03_bk {
  width: 100%;
  background-color: #f8f3da; }

.index_block03_main {
  width: 96%;
  max-width: 872px;
  margin: 0 auto;
  padding: 50px 0; }

.index_block03_title {
  font-size: 22px;
  line-height: 27px;
  font-weight: bold;
  color: #3e3a39;
  margin: 0 0 30px 0; }

.index_block03_content {
  width: 100%; }

.index_block03_list {
  width: 100%;
  padding: 0 0 0 17px;
  color: #3d3d3d;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-indent: -17px;
  font-size: 16px;
  line-height: 2em;
  font-weight: 400;
  margin: 0 0 5px 0;
  word-wrap: break-word;
  word-break: break-all; }
  .index_block03_list span {
    color: #e85d5d; }

/*** 腳 footer ***/
.footer_block {
  width: 96%;
  max-width: 1060px;
  font-size: 13px;
  height: 100px;
  padding: 20px 10px;
  border-top: 0px solid #ffff;
  margin: 35px auto 0 auto; }

.footer-nav {
  width: 100%;
  margin-bottom: 10px;
  text-align: center; }

.footer-nav ul {
  list-style: none; }

.footer-nav li {
  margin: 0px 4px 0px 0px;
  display: inline; }

/* hover動態樣式 - 淡入淡出 */
.footer-nav li a {
  /* 綠色(#656565) . 白色(#b4b4b4自訂) */
  color: #000;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  -webkit-transition: border 0.2s ease-in-out 0s;
  -moz-transition: border 0.2s ease-in-out 0s;
  -o-transition: border 0.2s ease-in-out 0s;
  transition: border 0.2s ease-in-out 0s; }

.footer-nav li a:hover,
.footer-nav li a:focus {
  /* 綠色(#656565) . 白色(#b4b4b4自訂) */
  color: #001720;
  border-color: #001720; }

/*  hover li 樣式 - 隱藏前後  */
.footer-nav li:after {
  /* 綠色(#dddddd) . 白色(#4a4a4a自訂) */
  color: #000;
  content: "|";
  top: -1px;
  right: -4px;
  margin: 0px 6px;
  position: relative; }

.footer-nav li:lang(ar):after,
.footer-nav li:last-child:after {
  display: none; }

.footer-copyright {
  /* 綠色(#b4b4b4) . 白色(#676767自訂) */
  color: #000;
  text-align: center;
  margin: 0 auto; }

.index_block02_content01_main .swiper {
  width: 100%;
  height: 100%; }

.index_block02_content01_main .swiper-slide {
  font-size: 18px;
  cursor: pointer; }

.index_block02_content01_main .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover; }

.index_block02_content01_main .swiper-slide {
  width: 100% !important;
  background-size: cover;
  background-position: center;
  cursor: pointer; }

.index_block02_content01_main .mySwiper2 {
  height: 360px;
  width: 100%; }

.index_block02_content01_main .mySwiper {
  height: 100px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer; }

.index_block02_content01_main .mySwiper .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4; }

.index_block02_content01_main .mySwiper .swiper-slide-thumb-active {
  opacity: 1; }

.index_block02_content01_main .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover; }

.index_block02_content01_main .top-swiper-wrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.index_block02_content01_main .top-swiper-slide {
  width: 100px !important;
  font-size: 18px;
  margin-right: 10px;
  display: block !important;
  background-color: #00b295 !important; }

.icon01 {
  width: 171px;
  position: absolute;
  right: -80px;
  bottom: 7px;
  z-index: 10; }

.icon02 {
  width: 114px;
  position: absolute;
  left: -132px;
  top: 59px;
  z-index: 10; }

.index_block02_btn_list {
  width: 100%;
  height: 36px;
  position: relative; }

.index_block02_btn {
  width: 180px;
  height: 36px;
  position: absolute;
  right: 26px;
  bottom: 0; }
  .index_block02_btn a {
    width: 100%;
    height: 100%;
    display: block;
    border: 1px solid #fff;
    border-radius: 18px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    line-height: 34px; }

.ph_index_visual_bk {
  width: 100%;
  background-image: url("../images/ph/index_visual_bk.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 64px 0 0 0;
  display: none; }

.ph_index_visual {
  width: 100%; }

.ph_index_block01 {
  width: 100%;
  position: relative;
  display: none; }

.ph_index_block02_content01_main {
  width: 566px;
  background-color: #00b295;
  border: 1px solid #000;
  margin: -3% auto 0 auto;
  padding: 3% 0 0 0;
  position: relative; }

.ph_index_block02_content01_decorate_left {
  width: 20px;
  height: 100%;
  background-image: url("../images/ph/index_block02_content01_bk01.png");
  background-repeat: repeat-y;
  background-size: 20px auto;
  position: absolute;
  top: 0;
  left: 10px; }

.ph_index_block02_content01_decorate_right {
  width: 20px;
  height: 100%;
  background-image: url("../images/ph/index_block02_content01_bk01.png");
  background-repeat: repeat-y;
  background-size: 20px auto;
  position: absolute;
  top: 0;
  right: 10px; }

.ph_index_block02_content01_title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100; }

.ph_index_block02_content01_center {
  width: 470px;
  height: 1240px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.ph_index_block02_content01_main .swiper {
  width: 100%; }

.ph_index_block02_content01_main .swiper-slide {
  font-size: 18px;
  cursor: pointer; }

.ph_index_block02_content01_main .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover; }

.ph_index_block02_content01_main .swiper-slide {
  width: 100% !important;
  background-size: cover;
  background-position: center;
  cursor: pointer; }

.ph_index_block02_content01_main .mySwiper3 {
  height: 115px;
  width: 100%; }

.ph_index_block02_content01_main .mySwiper4 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer; }

.ph_index_block02_content01_main .mySwiper3 .swiper-slide {
  height: 100%;
  opacity: 0.4; }

.ph_index_block02_content01_main .mySwiper3 .swiper-slide-thumb-active {
  opacity: 1; }

.ph_index_block02_content01_main .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover; }

.ph_index_block02_content01_main .top-swiper-wrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.ph_index_block02_content01_main .top-swiper-slide {
  width: 70px !important;
  font-size: 18px;
  margin-right: 10px;
  display: block !important;
  background-color: #00b295 !important; }

.ph_index_block02_content01_main .swiper-pagination2 {
  height: 13px;
  position: relative !important;
  padding: 20px 0 0 0;
  text-align: center;
  margin: 0 0 20px 0; }

.ph_celeb_card {
  width: 48%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-line-pack: center;
  align-content: center;
  margin: 0 0 15px 0;
  cursor: auto; }

.ph_celeb_card02 {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 0 30px 0;
  cursor: auto; }

.ph_celeb_card_avatar01 {
  width: 60px;
  min-width: 60px;
  height: 60px;
  margin: 0 auto 10px auto;
  border: 3px solid #fdc875;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden; }
  .ph_celeb_card_avatar01 img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }

.ph_celeb_card_avatar02 {
  width: 80px;
  min-width: 80px;
  height: 80px;
  margin: 0 auto 10px auto;
  border: 3px solid #fdc875;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden; }
  .ph_celeb_card_avatar02 img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }

.ph_celeb_card_avatar03 {
  width: 80px;
  min-width: 80px;
  height: 80px;
  margin: 0 auto;
  border: 3px solid #fdc875;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden; }
  .ph_celeb_card_avatar03 img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }

.ph_celeb_card_name {
  width: 100%;
  color: #fff;
  text-align: center;
  font-size: 23px;
  margin: 0 0 10px 0;
  font-weight: 500; }

.ph_celeb_card_name02 {
  color: #fff;
  font-size: 23px;
  line-height: 1.2em;
  margin: 0 0 10px 0;
  font-weight: 500; }

.ph_celeb_card_text {
  color: #fff;
  text-align: left;
  font-size: 17px;
  line-height: 1.3em; }

.ph_celeb_card_avatar_right {
  width: calc(100% - 85px);
  margin: 0 0 0 10px;
  word-wrap: break-word;
  word-break: break-all; }

.ph-swiper-main {
  height: 861.5px !important; }

.ph_index_block02_title_card {
  width: 48%;
  margin: 0 0 15px 0;
  display: none; }

.ph_index_block02_title_card_icon01 {
  width: 115px;
  margin: 0 auto 5px auto; }

.ph_index_block02_title_card_text01 {
  width: 100%;
  font-size: 48px;
  font-weight: 500;
  text-align: center;
  line-height: 1.3em;
  color: #45200a;
  margin: 0 0 13px 0; }

.ph_index_block02_title_card_text02 {
  width: 100%;
  font-size: 23px;
  text-align: center;
  line-height: 1.3em;
  color: #864c13; }