@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
* {
  margin: 0;
  padding: 0;
  color: #262525;
  font-style: normal;
  font-weight: 400;
  font-family: 'Noto Sans TC', sans-serif; }

*:focus {
  outline: none; }

a {
  text-decoration: none; }

a:focus {
  -moz-outline-style: none;
  outline: none; }

a img {
  border: none; }

ul, li {
  list-style-type: none; }

input {
  border: none;
  outline: none; }

.gotop {
  width: 206px;
  height: 73px;
  background-image: url(../images/gotop.png?t=202504);
  background-color: #132742;
  background-position: center center;
  background-repeat: no-repeat;
  position: fixed;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  right: 0;
  bottom: 120px;
  z-index: 10;
  padding: 20px 40px;
  cursor: pointer; }
  @media only screen and (max-height: 900px) {
    .gotop {
      width: 60px;
      height: 20px;
      background-size: 50px;
      bottom: 20px; } }
  @media only screen and (max-width: 1400px) {
    .gotop {
      width: 120px;
      height: 40px;
      background-size: 70px; } }
  @media only screen and (max-width: 750px) {
    .gotop {
      width: 60px;
      height: 20px;
      background-size: 50px; } }

header, footer, article {
  display: none; }

header {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 57px;
  background-color: #132742; }
  @media only screen and (max-width: 1100px) {
    header {
      height: 60px; } }
  @media only screen and (max-width: 750px) {
    header {
      position: fixed; } }
  header .inner {
    position: relative;
    width: 1350px;
    margin: 0 auto; }
    @media only screen and (max-width: 1400px) {
      header .inner {
        width: 100%; } }
    header .inner::after {
      content: "";
      clear: both;
      display: block; }
    header .inner .logo {
      float: left;
      margin-left: 25px;
      position: relative;
      z-index: 12; }
      @media only screen and (max-width: 1100px) {
        header .inner .logo {
          margin-left: 20px; } }
      header .inner .logo figure {
        width: 139px; }
        @media only screen and (max-width: 1100px) {
          header .inner .logo figure {
            width: 70px; } }
        header .inner .logo figure img {
          width: 100%; }
    header .inner .ham {
      position: absolute;
      z-index: 20;
      right: 25px;
      top: 18px;
      width: 30px;
      height: 30px;
      cursor: pointer;
      background-image: url(../images/ham.png?t=202504141231);
      background-repeat: no-repeat;
      background-size: contain;
      display: none; }
      header .inner .ham.active {
        background-image: url(../images/ham_close.png?t=202504141231); }
      @media only screen and (max-width: 1100px) {
        header .inner .ham {
          display: block; } }
    header .inner nav {
      float: right;
      margin-top: 5px;
      position: relative;
      z-index: 11; }
      @media only screen and (max-width: 1100px) {
        header .inner nav {
          float: none;
          margin-top: 0;
          background-image: url(../images/kv.jpg);
          background-size: cover;
          width: 100%;
          height: 100vh;
          text-align: center;
          position: fixed;
          left: 0;
          top: 0; } }
      header .inner nav ul {
        display: inline-block;
        vertical-align: middle; }
        @media only screen and (max-width: 1100px) {
          header .inner nav ul {
            width: 180px;
            display: block;
            margin: 0 auto;
            padding-top: 95px; } }
        @media only screen and (max-width: 376px) {
          header .inner nav ul {
            padding-top: 85px; } }
        header .inner nav ul li {
          display: inline-block;
          vertical-align: middle;
          margin: 0 25px;
          cursor: pointer;
          position: relative; }
          @media only screen and (max-width: 1400px) {
            header .inner nav ul li {
              margin: 0 15px; } }
          @media only screen and (max-width: 1100px) {
            header .inner nav ul li {
              display: block;
              margin: 0 0 20px; } }
          @media only screen and (max-width: 376px) {
            header .inner nav ul li {
              display: block;
              margin: 0 0 20px; } }
          header .inner nav ul li p, header .inner nav ul li a {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.5);
            -webkit-transition: .5s;
            -o-transition: .5s;
            transition: .5s; }
            @media only screen and (max-width: 1100px) {
              header .inner nav ul li p, header .inner nav ul li a {
                font-size: 16px;
                color: #132742; } }
          header .inner nav ul li.museum {
            display: none; }
          header .inner nav ul li:after {
            content: "";
            width: 0%;
            height: 7px;
            background-color: #a5232a;
            position: absolute;
            bottom: -18px;
            left: 50%;
            -webkit-transform: translate(-50%, 0);
            -ms-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
            -webkit-transition: .5s;
            -o-transition: .5s;
            transition: .5s;
            padding: 0px; }
            @media only screen and (max-width: 1100px) {
              header .inner nav ul li:after {
                bottom: -5px;
                height: 2px; } }
          @media only screen and (min-width: 751px) {
            header .inner nav ul li:hover p, header .inner nav ul li:hover a {
              color: white; } }
  @media only screen and (min-width: 751px) and (max-width: 1100px) {
    header .inner nav ul li:hover p, header .inner nav ul li:hover a {
      color: #132742; } }
          @media only screen and (min-width: 751px) {
            header .inner nav ul li:hover:after {
              padding: 0 15px;
              width: 100%; } }
  @media only screen and (min-width: 751px) and (max-width: 1100px) {
    header .inner nav ul li:hover:after {
      width: 90%; } }
      header .inner nav .social {
        display: inline-block;
        vertical-align: middle;
        margin-top: 5px; }
        @media only screen and (max-width: 1100px) {
          header .inner nav .social {
            display: block;
            width: 180px;
            margin: 0 auto; } }
        header .inner nav .social a {
          display: inline-block;
          vertical-align: middle;
          margin: 0 7px;
          width: 34px;
          height: 34px;
          border-radius: 100%;
          background-color: #264062;
          border: solid 1px #264062;
          background-repeat: no-repeat;
          background-position: center center;
          -webkit-transition: .5s;
          -o-transition: .5s;
          transition: .5s; }
          @media only screen and (max-width: 1100px) {
            header .inner nav .social a {
              margin: 0 12px; } }
          header .inner nav .social a.fb {
            background-image: url(../images/icon_fb.png?t=202504141231); }
          header .inner nav .social a.ig {
            background-image: url(../images/icon_ig.png?t=202504141231); }
          header .inner nav .social a.cart {
            background-image: url(../images/icon_cart.png?t=202504141231);
            background-color: #a5232a;
            border: solid 1px #a5232a; }
          @media only screen and (min-width: 751px) {
            header .inner nav .social a:hover {
              background-color: #FFF; }
              header .inner nav .social a:hover.fb {
                background-image: url(../images/icon_fb_h.png?t=202504141231); }
              header .inner nav .social a:hover.ig {
                background-image: url(../images/icon_ig_h.png?t=202504141231); }
              header .inner nav .social a:hover.cart {
                background-image: url(../images/icon_cart_h.png?t=202504141231); } }
      header .inner nav a.museum {
        display: inline-block;
        vertical-align: middle;
        margin-right: 60px;
        font-size: 18px;
        color: rgba(255, 255, 255, 0.5);
        margin-left: 25px;
        background-color: transparent;
        float: right;
        margin-top: 8px;
        position: relative;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s; }
        header .inner nav a.museum:after {
          content: "";
          width: 0%;
          height: 7px;
          background-color: #a5232a;
          position: absolute;
          bottom: -18px;
          left: 50%;
          -webkit-transform: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
          -webkit-transition: .5s;
          -o-transition: .5s;
          transition: .5s;
          padding: 0px; }
          @media only screen and (max-width: 1100px) {
            header .inner nav a.museum:after {
              bottom: -5px;
              height: 2px; } }
        @media only screen and (min-width: 751px) {
          header .inner nav a.museum:hover {
            color: white; } }
  @media only screen and (min-width: 751px) and (max-width: 1100px) {
    header .inner nav a.museum:hover {
      color: #132742; } }
        @media only screen and (min-width: 751px) {
            header .inner nav a.museum:hover:after {
              padding: 0 15px;
              width: 100%; } }
    @media only screen and (min-width: 751px) and (max-width: 1100px) {
      header .inner nav a.museum:hover:after {
        width: 90%; } }
        @media only screen and (max-width: 1100px) {
          header .inner nav a.museum {
            display: block;
            font-size: 16px;
            color: #132742;
            margin-top: 0;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 35px;
            float: none;
            width: 180px; } }

footer {
  background-color: #132742;
  text-align: center;
  width: 100%;
  padding: 25px 0; }
  @media only screen and (max-width: 500px) {
    footer {
      padding: 15px 0; } }
  footer p {
    display: inline-block;
    margin: 0 18px;
    vertical-align: top;
    letter-spacing: 1px; }
    @media only screen and (max-width: 1100px) {
      footer p {
        margin: 0 10px 5px; } }
    @media only screen and (max-width: 500px) {
      footer p {
        margin: 0 10px 0px; } }
    footer p a {
      color: #FFF;
      font-size: 18px;
      font-weight: 300; }
      @media only screen and (max-width: 1100px) {
        footer p a {
          font-size: 16px; } }
      @media only screen and (max-width: 500px) {
        footer p a {
          font-size: 14px; } }

#loading {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-image: url(../images/kv.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  z-index: 101;
  top: 0;
  left: 0; }
  #loading .main {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    #loading .main .txt {
      width: 611px;
      margin: 0 auto 35px; }
      @media only screen and (max-width: 1400px) {
        #loading .main .txt {
          width: 465px;
          height: 170px; } }
      @media only screen and (max-width: 750px) {
        #loading .main .txt {
          width: 232px;
          height: 90px;
          margin: 0 auto 15px; } }
      #loading .main .txt img {
        width: 100%; }
    #loading .main .num_box {
      width: 640px;
      height: 38px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0px auto;
      background-image: url(../images/loading_img02.png?t=202504141231);
      background-repeat: no-repeat;
      background-size: contain;
      position: relative; }
      @media only screen and (max-width: 1400px) {
        #loading .main .num_box {
          width: 470px; } }
      @media only screen and (max-width: 750px) {
        #loading .main .num_box {
          width: 235px;
          height: 20px; } }
      #loading .main .num_box .num {
        width: 640px;
        height: 38px;
        border-radius: 42px;
        overflow: hidden;
        position: relative; }
        @media only screen and (max-width: 1400px) {
          #loading .main .num_box .num {
            width: 460px; } }
        @media only screen and (max-width: 750px) {
          #loading .main .num_box .num {
            width: 230px;
            height: 20px; } }
        #loading .main .num_box .num span {
          position: absolute;
          width: 0%;
          top: 13px;
          height: 18px;
          left: 10px;
          background-image: url(../images/loading_img03.png?t=202504141231);
          background-repeat: no-repeat;
          background-size: static;
          -webkit-transform: skewX(-25deg);
          -ms-transform: skewX(-25deg);
          transform: skewX(-25deg); }
          @media only screen and (max-width: 1400px) {
            #loading .main .num_box .num span {
              top: 8px;
              height: 10px;
              left: 5px; } }
          @media only screen and (max-width: 750px) {
            #loading .main .num_box .num span {
              height: 5px;
              top: 4px; } }

.video_pp {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none; }
  .video_pp .main {
    text-align: center;
    position: relative;
    z-index: 3;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    @media only screen and (max-width: 1300px) {
      .video_pp .main {
        width: calc(100% - 40px); } }
    @media only screen and (max-height: 900px) {
      .video_pp .main {
        width: 550px; } }
    @media only screen and (max-width: 500px) {
      .video_pp .main {
        width: calc(100% - 40px);
        padding: 15px 0 30px; } }
    .video_pp .main::after {
      content: "";
      display: block;
      position: absolute;
      border: solid 1px #655507;
      width: calc(100% - 15px);
      height: calc(100% - 15px);
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
    .video_pp .main .xx {
      position: absolute;
      z-index: 101;
      right: -15px;
      top: -15px;
      width: 37px;
      height: 43px;
      background-repeat: no-repeat;
      background-image: url(../images/close.png?t=202504141231);
      background-size: contain;
      cursor: pointer; }
      @media only screen and (max-width: 1300px) {
        .video_pp .main .xx {
          right: 0px; } }
      @media only screen and (max-width: 500px) {
        .video_pp .main .xx {
          right: 5px;
          top: 5px;
          width: 25px; } }
    .video_pp .main iframe {
      width: 1193px;
      height: 665px;
      position: relative;
      z-index: 100; }
      @media only screen and (max-width: 1300px) {
        .video_pp .main iframe {
          width: calc(100% - 40px);
          max-width: 100%;
          margin: 0 auto; } }
      @media only screen and (max-height: 900px) {
        .video_pp .main iframe {
          width: 500px;
          height: 300px; } }
      @media only screen and (max-width: 500px) {
        .video_pp .main iframe {
          width: calc(100% - 40px);
          height: 200px; } }

.product_pp {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none; 
}
  .product_pp .main {
    width: 1193px;
    height: 756px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    @media only screen and (max-width: 1400px) {
      .product_pp .main {
        width: 950px;
        height: 600px; } }
    @media only screen and (max-width: 1000px) {
      .product_pp .main {
        width: 376px;
        height: 600px; } }
    .product_pp .main .xx {
      background-image: url(../images/close02.png?t=202504141231);
      background-repeat: no-repeat;
      background-size: contain;
      width: 50px;
      height: 49px;
      position: absolute;
      right: 40px;
      top: 20px;
      cursor: pointer; }
      @media only screen and (max-width: 1000px) {
        .product_pp .main .xx {
          width: 30px;
          right: 20px; 
        } 
      }
    .product_pp .main .item_box [class^="item"] {
      width: 1193px;
      height: 756px;
      -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);
      box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);
      background-image: url(../images/product_border.png?t=202504141231);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: 2px 5px;
      background-color: #e9e6d8;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 100px;
      display: none; }
      @media only screen and (max-width: 1400px) {
        .product_pp .main .item_box [class^="item"] {
          width: 970px;
          height: 615px;
          padding: 80px 50px; } }
      @media only screen and (max-width: 1000px) {
        .product_pp .main .item_box [class^="item"] {
          width: 376px;
          height: 636px;
          padding: 40px 22px;
          background-image: url(../images/product_border_m.png?t=202504141231); 
        }
        /* .product_pp .main .item_box [class^="item"].item09,
        .product_pp .main .item_box [class^="item"].item10,
        .product_pp .main .item_box [class^="item"].item11 {
          width: 400px;
          height: 648px;
        } */
      }
      .product_pp .main .item_box [class^="item"].active {
        display: block; }
      .product_pp .main .item_box [class^="item"].item01, .product_pp .main .item_box [class^="item"].item02, .product_pp .main .item_box [class^="item"].item07, .product_pp .main .item_box [class^="item"].item08 {
        background-color: #e6ee9c; }
      .product_pp .main .item_box [class^="item"].item07 .man {
        -webkit-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        transform: rotate(10deg); }
      .product_pp .main .item_box [class^="item"].item08 .man {
        left: -160px; }
        @media only screen and (max-width: 1000px) {
          .product_pp .main .item_box [class^="item"].item08 .man {
            left: 50%;
            margin-left: -60px; } }
      .product_pp .main .item_box [class^="item"]::after {
        content: "";
        clear: both;
        display: block; }
      .product_pp .main .item_box [class^="item"] .man {
        position: absolute;
        left: -120px;
        bottom: -50px;
        z-index: 2;
        width: 331px; }
        @media only screen and (max-width: 1400px) {
          .product_pp .main .item_box [class^="item"] .man {
            width: 220px; } }
        @media only screen and (max-width: 1000px) {
          .product_pp .main .item_box [class^="item"] .man {
            width: 120px;
            bottom: -40px;
            left: 50%;
            margin-left: -60px; } }
        .product_pp .main .item_box [class^="item"] .man img {
          width: 100%; }
      .product_pp .main .item_box [class^="item"] .man2 {
        position: absolute;
        left: -200px;
        bottom: -80px;
        z-index: 2;
        width: 336px; }
        @media only screen and (max-width: 1400px) {
          .product_pp .main .item_box [class^="item"] .man2 {
            width: 250px;
            left: -150px; } }
        @media only screen and (max-width: 1000px) {
          .product_pp .main .item_box [class^="item"] .man2 {
            width: 120px;
            bottom: -50px;
            left: 50%;
            margin-left: -60px; } }
        .product_pp .main .item_box [class^="item"] .man2 img {
          width: 100%; }
      .product_pp .main .item_box [class^="item"] .left {
        float: left;
        margin-right: 110px; }
        @media only screen and (max-width: 1400px) {
          .product_pp .main .item_box [class^="item"] .left {
            margin-right: 80px; } }
        @media only screen and (max-width: 1000px) {
          .product_pp .main .item_box [class^="item"] .left {
            float: none;
            margin-right: 0; } }
        .product_pp .main .item_box [class^="item"] .left figure {
          margin-left: 80px;
          position: relative;
          z-index: 2;
          width: 295px; }
          @media only screen and (max-width: 1400px) {
            .product_pp .main .item_box [class^="item"] .left figure {
              width: 250px;
              margin-left: 40px; } }
          @media only screen and (max-width: 1000px) {
            .product_pp .main .item_box [class^="item"] .left figure {
              width: 120px;
              margin: 0 auto; } }
          .product_pp .main .item_box [class^="item"] .left figure img {
            width: 100%; }
        .product_pp .main .item_box [class^="item"] .left .shadow {
          position: absolute;
          z-index: 1;
          top: 180px;
          left: 60px;
          width: 488px; }
          @media only screen and (max-width: 1400px) {
            .product_pp .main .item_box [class^="item"] .left .shadow {
              width: 350px;
              left: 40px; } }
          @media only screen and (max-width: 1000px) {
            .product_pp .main .item_box [class^="item"] .left .shadow {
              width: 180px;
              left: 95px;
              top: 50px; } }
          .product_pp .main .item_box [class^="item"] .left .shadow img {
            width: 100%; }
      .product_pp .main .item_box [class^="item"] .right {
        float: left;
        width: 500px;
        margin-top: 15px;
        position: relative; }
        @media only screen and (max-width: 1400px) {
          .product_pp .main .item_box [class^="item"] .right {
            margin-top: 0;
            width: 480px; } }
        @media only screen and (max-width: 1000px) {
          .product_pp .main .item_box [class^="item"] .right {
            width: 100%; } }
        .product_pp .main .item_box [class^="item"] .right .name {
          background-image: url(../images/line03.png?t=202504141231);
          background-repeat: no-repeat;
          background-position: 0 bottom;
          padding-bottom: 30px;
          margin-bottom: 40px; }
          @media only screen and (max-width: 1400px) {
            .product_pp .main .item_box [class^="item"] .right .name {
              margin-bottom: 30px; } }
          @media only screen and (max-width: 1000px) {
            .product_pp .main .item_box [class^="item"] .right .name {
              width: 100%;
              text-align: center;
              margin-top: 20px;
              padding-bottom: 10px;
              margin-bottom: 20px;
              background-size: contain; }
              .product_pp .main .item_box [class^="item"] .right .name img {
                width: 120px;
                margin: 0 auto; } }
        .product_pp .main .item_box [class^="item"] .right .icon {
          position: absolute;
          right: 10px;
          top: -70px;
          width: 148px; }
          @media only screen and (max-width: 1400px) {
            .product_pp .main .item_box [class^="item"] .right .icon {
              width: 100px;
              top: -20px;
              right: 50px; } }
          @media only screen and (max-width: 1000px) {
            .product_pp .main .item_box [class^="item"] .right .icon {
              width: 60px;
              top: 0px;
              right: 0px; } }
          .product_pp .main .item_box [class^="item"] .right .icon img {
            width: 100%; }
        .product_pp .main .item_box [class^="item"] .right .info_box {
          /* height: 265px;  */
          height: 325px;
        }
          @media only screen and (max-width: 1400px) {
            .product_pp .main .item_box [class^="item"] .right .info_box {
              height: 260px; 
            } 
          }
          @media only screen and (max-width: 1000px) {
            .product_pp .main .item_box [class^="item"] .right .info_box {
              height: auto;
              margin-bottom: 20px; } }
          .product_pp .main .item_box [class^="item"].item03 .right .info_box,
          .product_pp .main .item_box [class^="item"].item04 .right .info_box {
            height: 265px;
          }
          @media only screen and (max-width: 1400px) {
            .product_pp .main .item_box [class^="item"].item03 .right .info_box,
            .product_pp .main .item_box [class^="item"].item04 .right .info_box {
              height: 220px;
            } 
          }
          @media only screen and (max-width: 1000px) {
            .product_pp .main .item_box [class^="item"].item03 .right .info_box,
            .product_pp .main .item_box [class^="item"].item04 .right .info_box  {
              height: auto;
              margin-bottom: 20px; } }
          .product_pp .main .item_box [class^="item"] .right .info_box p {
            font-size: 20px;
            font-weight: 500;
            padding-left: 25px;
            background-repeat: no-repeat;
            background-position: 5px 12px; }
            @media only screen and (max-width: 1400px) {
              .product_pp .main .item_box [class^="item"] .right .info_box p {
                font-size: 17px; } }
            @media only screen and (max-width: 1000px) {
              .product_pp .main .item_box [class^="item"] .right .info_box p {
                font-size: 12px;
                background-size: 5px;
                padding-left: 15px;
                background-position: 5px 8px; } }
            .product_pp .main .item_box [class^="item"] .right .info_box p.i01 {
              background-image: url(../images/pp_dot01.png?t=202504141231); }
            .product_pp .main .item_box [class^="item"] .right .info_box p.i02 {
              background-image: url(../images/pp_dot02.png?t=202504141231); }
            .product_pp .main .item_box [class^="item"] .right .info_box p.i03 {
              background-image: url(../images/pp_dot03.png?t=202504141231); }
            .product_pp .main .item_box [class^="item"] .right .info_box p.i04 {
              background-image: url(../images/pp_dot04.png?t=202504141231); }
              .product_pp .main .item_box [class^="item"] .right .info_box span {
                padding-left: 25px;
                display: block;
              }
              @media only screen and (max-width: 1400px) {
                .product_pp .main .item_box [class^="item"] .right .info_box span {
                  font-size: 15px; 
                } 
              }
              @media only screen and (max-width: 1000px) {
                .product_pp .main .item_box [class^="item"] .right .info_box span {
                  font-size: 11px;
                  padding-left: 15px; } }
        .product_pp .main .item_box [class^="item"] .right .links {
          position: relative;
          display: inline-block;
          vertical-align: top;
          width: 500px; }
          @media only screen and (max-width: 1000px) {
            .product_pp .main .item_box [class^="item"] .right .links {
              width: 100%; } }
          .product_pp .main .item_box [class^="item"] .right .links a {
            text-align: center;
            border-radius: 50px;
            background-color: #fff;
            position: relative;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 225px;
            height: 50px;
            display: inline-block;
            margin-right: 25px;
            margin-bottom: 15px;
            background-image: url(../images/p_cart.png?t=202504141231);
            background-repeat: no-repeat;
            background-position: 95% center; }
            @media only screen and (max-width: 1000px) {
              .product_pp .main .item_box [class^="item"] .right .links a {
                background-size: 25px;
                margin-left: 10px;
                margin-right: 10px;
                height: 40px;
                margin-bottom: 10px;
                width: calc(50% - 25px); } }
            .product_pp .main .item_box [class^="item"] .right .links a img {
              position: absolute;
              top: 50%;
              left: 50%;
              -webkit-transform: translate(-60%, -50%);
              -ms-transform: translate(-60%, -50%);
              transform: translate(-60%, -50%);
              width: 100%; }

.product_pp .main .item_box [class^="item"].item09,.product_pp .main .item_box [class^="item"].item10,.product_pp .main .item_box [class^="item"].item11{background-color: #f6d3a2; }

.product_pp .main .item_box [class^="item"].item09 .left figure,
.product_pp .main .item_box [class^="item"].item10 .left figure,
.product_pp .main .item_box [class^="item"].item11 .left figure {
    margin-left: 60px;
    position: relative;
    z-index: 2;
    width: 315px;
}
@media only screen and (max-width: 1400px){
    .product_pp .main .item_box [class^="item"].item09 .left figure,
    .product_pp .main .item_box [class^="item"].item10 .left figure,
    .product_pp .main .item_box [class^="item"].item11 .left figure {
        width: 280px;
    margin-left: 30px;
    margin-right: -20px;
    }
}
@media only screen and (max-width: 1000px){
    .product_pp .main .item_box [class^="item"].item09 .left figure,
    .product_pp .main .item_box [class^="item"].item10 .left figure,
    .product_pp .main .item_box [class^="item"].item11 .left figure {
        width: 120px;
        margin: 0 auto;
    }
}




.dis_pp {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none; }
  .dis_pp .main {
    text-align: center;
    position: relative;
    z-index: 3;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    @media only screen and (max-width: 1300px) {
/*      .dis_pp .main {
        width: calc(100% - 40px); } */
      }
    @media only screen and (max-height: 900px) {
      .dis_pp .main {
        /*width: 550px; */
      } 
      }
    @media only screen and (max-width: 500px) {
      .dis_pp .main {
        width: calc(100% - 40px);
        padding: 15px 0 30px; } 
      }
    
    .dis_pp .main .xx {
      position: absolute;
      z-index: 101;
      right: -15px;
      top: -15px;
      width: 37px;
      height: 43px;
      background-repeat: no-repeat;
      background-image: url(../images/close.png?t=202504141231);
      background-size: contain;
      cursor: pointer; }


/*      @media only screen and (max-width: 1300px) {
        .dis_pp .main .xx {
          right: 0px; } */
        /* } */
      @media only screen and (max-width: 500px) {
        .dis_pp .main .xx {
          right: 5px;
          top: 5px;
          width: 25px; } }
    .dis_pp .main iframe {
      width: 1193px;
      height: 665px;
      position: relative;
      z-index: 100; }
      @media only screen and (max-width: 1300px) {
        .dis_pp .main iframe {
          width: calc(100% - 40px);
          max-width: 100%;
          margin: 0 auto; } }
      @media only screen and (max-height: 900px) {
        .dis_pp .main iframe {
          width: 500px;
          height: 300px; } }
      @media only screen and (max-width: 500px) {
        .dis_pp .main iframe {
          width: calc(100% - 40px);
          height: 200px; } }

.dis_pp .main img{
  width: auto;
  height: 80vh;
  max-height: 733px;
}

@media only screen and (max-width: 1000px) {
  .dis_pp .main img{
    width: 100%;
    height: auto;
    max-height: initial;
  }
}