/* index */

.all_main * {
   box-sizing: border-box;
   max-width: 100%;
}

.all_main {
   max-width: 2000px;
   width: 100%;
   margin: auto;
   font-family: 'Microsoft JhengHei', serif;
   border: 0;
   text-decoration: none;
   overflow: hidden;
}

.all_main img {
   width: auto;
   max-width: 100%;
   vertical-align: bottom;
}

.all_main ul {
   padding: 0 0;
   margin: 0;
}


.all_main li {
   list-style: none;
}

.all_main h6,
.all_main h5,
.all_main h4,
.all_main h3,
.all_main h2 {
   margin: 0;
}

.all_main u {
   text-decoration: none;
}

/*Animations*/
[data-animate-in] {
   opacity: 0;
   transition: transform 0.8s ease, opacity 0.8s ease;
}

[data-animate-in="up"] {
   transform: translate3d(0, 10%, 0);
}

/*由下往上*/
[data-animate-in="left"] {
   transform: translate3d(-50%, 0, 0);
}

/*由左往右*/
[data-animate-in="right"] {
   transform: translate3d(50%, 0, 0);
}

/*由右往左*/
[data-animate-in="down"] {
   transform: translate3d(0, -10%, 0);
}

/*由上往下*/
[data-animate-in="fadeIn"] {
   transform: translate3d(0, 0, 0);
}

/*淡入*/
[data-animate-in="scaleIn"] {
   transform: scale(.3);
}

/*放大淡入*/
[data-animate-in].in-view {
   opacity: 1;
   transform: translate3d(0, 0, 0);
   -webkit-transform: translate3d(0, 0, 0);
   transition: transform 0.6s ease, opacity 0.6s ease;
}

.fade-in {
   opacity: 0;
   transition: opacity 1s ease;
}

.all_main p {
   margin: 0;
}

.all_main em,
.all_main i {
   font-style: normal;
}

.all_main a {
   text-decoration: none;
}

.all_main dd,
.all_main dt {
   margin: 0 0;
}

.all_main_key_word {
   opacity: 0;
   position: absolute;
   left: 0;
   top: 0;
}

.animated15 {
   animation: none;
}

.main {
   max-width: 2000px;
   width: 100%;
   margin:auto;
   background-color: transparent;
}

.in01 {
   padding: 105px 20px;
   background-color: #F1F1F1;
}

.in02 {
   max-width: 1400px;
   margin: auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.in_bg {
   width: 32%;
}

.in03 {
   width: 63.7%;
}

.in03 p {
   width: 100%;
   padding-left: 100px;
   position: relative;
}

.in03 p img {
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
}

.in03 p b {
   display: block;
   color: black;
   font-size: 23px;
   font-weight: bold;
   line-height: 120%;
   letter-spacing: 0.15em;
   margin-bottom: 20px;
}

.in03 p span {
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

.in03 p span i {
   display: block;
   width: 12px;
   height: 12px;
   background-color: #3A867F;
   border-radius: 150px;
}

.in03 p span i+i {
   margin-left: 10px;
}

.in03 p span i:nth-of-type(2) {
   background-color: #E2BB41;
}

.in03 p span i:nth-of-type(3) {
   background-color: #D87F5D;
}

.in03 p a {
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   font-size: 17px;
   font-weight: bold;
   letter-spacing: 0.15em;
   text-indent: 0.15em;
   text-align: center;
   width: 103px;
   height: 34px;
   background-color: #3A867F;
   border: 1px #3A867F solid;
   border-radius: 10px;
   position: absolute;
   right: 0;
   bottom: 0;
   transition: 0.5s;
}

.in03 p a:hover {
   transition: 0.5s;
   background-color: white;
   color: #3A867F;
}

.in03 h4 {
   margin: 30px 0 40px 0;
}

.in03 h4 span {
   display: block;
   color: black;
   font-size: 17px;
   font-weight: 400;
   line-height: 120%;
   text-align: justify;
   word-break: break-all;
}

.in03 h4 span+span {
   margin-top: 18px;
}

.in04 {
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.in04 a {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 31.5%;
   padding: 15px;
   background-color: white;
   border: 1px #CCCCCC solid;
   transition: 0.5s;
}

.in04 a:nth-child(n+4) {
   margin-top: 25px;
}

.in04 a b {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   aspect-ratio: 1 / 1;
   transition: 0.5s;
}

.in04 a b>img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.in04 a b u {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 130px;
   height: 130px;
   background-color: rgba(0, 0, 0, 0.8);
   border-radius: 150px;
   position: absolute;
   opacity: 0;
   transition: 0.5s;
}

.in04 a i {
   display: block;
   color: black;
   font-size: 19px;
   font-weight: bold;
   line-height: 120%;
   text-align: justify;
   word-break: break-all;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   margin: 20px 5px 15px 5px;
}

.in04 a h5 {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
}

.in04 a h5 span {
   display: flex;
   justify-content: center;
   align-items: flex-end;
   color: #FA1D1D;
   font-size: 20px;
   font-weight: bold;
   line-height: 120%;
}

.in04 a h5 span u {
   color: #FA1D1D;
   font-size: 30px;
   font-weight: bold;
   line-height: 120%;
   margin-right: 10px;
   position: relative;
   bottom: -3px;
}

.in05 {
   padding: 105px 0 0 0;
}

.in05 h5 {
   max-width: 1710px;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: auto;
   position: relative;
   padding: 0 20px;
   margin-bottom: 45px;
}

.in05 h5 img:nth-of-type(1) {
   position: absolute;
   left: 20px;
   bottom: 40px;
}

.in05 h5 img:nth-of-type(2) {
   position: absolute;
   right: 20px;
   bottom: 40px;
}

.in05 h5 b {
   display: block;
   color: black;
   font-size: 25px;
   font-weight: 400;
   line-height: 120%;
   text-align: center;
}

.in05 h5 i {
   display: block;
   color: black;
   font-size: 23px;
   font-weight: bold;
   line-height: 120%;
   text-align: center;
   letter-spacing: 0.15em;
   text-indent: 0.15em;
   text-align: center;
   margin: 5px 0 20px 0;
}

.in05 h5 a {
   display: flex;
   justify-content: center;
   align-items: center;
}

.in05 h5 a u {
   display: block;
   width: 12px;
   height: 12px;
   background-color: #3A867F;
   border-radius: 150px;
}

.in05 h5 a u+u {
   margin-left: 10px;
}

.in05 h5 a u:nth-of-type(2) {
   background-color: #E2BB41;
}

.in05 h5 a u:nth-of-type(3) {
   background-color: #D87F5D;
}

.in05 h5 span {
   display: block;
   color: black;
   font-size: 17px;
   font-weight: 400;
   line-height: 120%;
   text-align: center;
   margin: 20px 0 15px 0;
}

.in05 h5 strong {
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   font-size: 23px;
   font-weight: bold;
   line-height: 120%;
   text-align: center;
   max-width: 380px;
   width: 100%;
   height: 40px;
   background-color: #3A867F;
}

.in05 h5 em {
   display: flex;
   justify-content: center;
   align-items: center;
   color: black;
   font-size: 17px;
   font-weight: 400;
   line-height: 180%;
   text-align: center;
   margin-top: 25px;
}

/* hover */
.in04 a:hover b u {
   transition: 0.5s;
   opacity: 1;
}

/* swiper */
.in_swiper {
   width: calc(100% - 50px);
   margin: auto;
   position: relative;
}

.swiper {
   width: 100%;
   height: 100%;
   margin: auto;
}

.swiper-slide {
   text-align: center;
   font-size: 18px;
   display: flex;
   justify-content: center;
   align-items: center;
}

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

.swiper-button-prev,
.swiper-button-next {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100px;
   height: 100px;
   background-color: rgba(68, 68, 68, 0.8);
   border-radius: 150px;
   top: 50%;
   transform: translateY(-50%);
   transition: 0.5s;
}

.swiper-button-prev {
   left: -45px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
   transition: 0.5s;
   background-color: #E2BB41;
}

.swiper-button-next {
   right: -45px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
   font-weight: bold;
   font-size: 39px;
}

.swiper-button-next,
.swiper-button-prev,
.swiper-button-next,
.swiper-button-next {
   color: white;
}

.in06 {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   transition: 0.5s;
}

.in06 em {
   display: block;
   width: 100%;
   overflow: hidden;
   transition: 0.5s;
}

.in06 em img{
   transition: 0.5s;
}

.in06:hover em img{
   transition: 0.5s;
   transform: scale(1.05);
}

.in06 p b {
   display: block;
   color: black;
   font-size: 19px;
   font-weight: bold;
   line-height: 120%;
   text-align: center;
   margin: 18px 0 15px 0;
}

.in06 p span {
   display: block;
   color: black;
   font-size: 17px;
   font-weight: 400;
   line-height: 120%;
   text-align: center;
}

a.more_btn_in {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   width: 200px;
   height: 200px;
   border-radius: 150px;
   background-color: #3A867F;
   color: white;
   font-size: 17px;
   font-weight: bold;
   line-height: 120%;
   letter-spacing: 0.15em;
   text-indent: 0.15em;
   text-align: center;
   padding-top: 35px;
   margin: auto;
   margin-top: 50px;
   margin-bottom: -125px;
   transition: 0.5s;
}

a.more_btn_in:hover {
   transition: 0.5s;
   background-color: #E2BB41;
}

.in07 {
   padding: 105px 20px;
   background-color: #F1F1F1;
}

.in07 h5 {
   max-width: 1710px;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: auto;
   position: relative;
   padding: 0 20px;
   margin-bottom: 45px;
}

.in07 h5 img:nth-of-type(1) {
   position: absolute;
   left: 20px;
   bottom: 40px;
}

.in07 h5 img:nth-of-type(2) {
   position: absolute;
   right: 20px;
   bottom: 40px;
}

.in07 h5 b {
   display: block;
   color: black;
   font-size: 25px;
   font-weight: 400;
   line-height: 120%;
   text-align: center;
}

.in07 h5 i {
   display: block;
   color: black;
   font-size: 23px;
   font-weight: bold;
   line-height: 120%;
   text-align: center;
   letter-spacing: 0.15em;
   text-indent: 0.15em;
   text-align: center;
   margin: 5px 0 20px 0;
}

.in07 h5 a {
   display: flex;
   justify-content: center;
   align-items: center;
}

.in07 h5 a u {
   display: block;
   width: 12px;
   height: 12px;
   background-color: #3A867F;
   border-radius: 150px;
}

.in07 h5 a u+u {
   margin-left: 10px;
}

.in07 h5 a u:nth-of-type(2) {
   background-color: #E2BB41;
}

.in07 h5 a u:nth-of-type(3) {
   background-color: #D87F5D;
}

.in10 {
   max-width: 1400px;
   margin: auto;
   display: flex;
   justify-content: space-between;
}

a.in08 {
   width: 49%;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
}

a.in08 p {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   position: absolute;
   transition: 0.5s;
   opacity: 0;
}

a.in08 p b {
   display: block;
   color: white;
   font-size: 23px;
   font-weight: bold;
   line-height: 120%;
   text-align: center;
   transition: 0.5s;
}

a.in08 p i {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 130px;
   height: 130px;
   background-color: rgba(58, 134, 127, 0.8);
   border-radius: 150px;
   margin-bottom: 15px;
}

a.in08 strong {
   color: white;
   font-size: 23px;
   font-weight: bold;
   line-height: 120%;
   text-align: center;
   padding: 10px 5px;
   background-color: rgba(0, 0, 0, 0.7);
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   transition: 0.5s;
}

a.in08:hover p {
   transition: 0.5s;
   opacity: 1;
}

a.in08:hover strong {
   transition: 0.5s;
   opacity: 0;
}

.in09 {
   width: 49%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
}

a.in11 {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
}

a.in11 p {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   position: absolute;
   transition: 0.5s;
   opacity: 0;
}

a.in11 p i {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 130px;
   height: 130px;
   background-color: rgba(58, 134, 127, 0.8);
   border-radius: 150px;
   margin-bottom: 15px;
}

a.in11 p b {
   display: block;
   color: white;
   font-size: 23px;
   font-weight: bold;
   line-height: 120%;
   text-align: center;
   transition: 0.5s;
}

a.in11 strong {
   color: white;
   font-size: 23px;
   font-weight: bold;
   line-height: 120%;
   text-align: center;
   padding: 10px 5px;
   background-color: rgba(0, 0, 0, 0.8);
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   transition: 0.5s;
}

a.in11:hover p {
   transition: 0.5s;
   opacity: 1;
}

a.in11:hover strong {
   transition: 0.5s;
   opacity: 0;
}

.in12 {
   padding: 80px 20px;
   background-image: url('../img/sxi_bg001.jpg');
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   position: relative;
   z-index: 1;
}

.in_img01 {
   position: absolute;
   left: -3vw;
   bottom: -110px;
   z-index: 60;
   width: 22vw;
}

.in_img02 {
   position: absolute;
   right: 0;
   bottom: -55px;
   z-index: 60;
   width: 17vw;
}

.in12::before {
   content: "";
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: 50;
}

.in13 {
   max-width: 1105px;
   width: 100%;
   margin: auto;
   position: relative;
   z-index: 100;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 44px 0;
}

.in13 a {
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
}

.in13 a::after {
   content: "";
   width: 1px;
   height: 65px;
   background-color: #888888;
   position: absolute;
   top: 12px;
   right: 0;
}

.in13 a:nth-child(5)::after,
.in13 a:nth-child(10)::after,
.in13 a:nth-child(15)::after,
.in13 a:last-child::after{
   display: none;
}

.in13 a i {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 60px;
}

.in13 a b {
   display: block;
   color: #F1F1F1;
   font-size: 19px;
   font-weight: 400;
   line-height: 120%;
   text-align: center;
   margin-top: 15px;
}

.in14 {
   padding: 175px 0 100px 0;
}

.in15 {
   max-width: 1720px;
   width: 100%;
   margin: 0 0 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 110px;
   padding-left: 20px;
}

.in16 {
   margin-right: 35px;
}

.in16 h5 {
   max-width: 1710px;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   margin: auto;
   position: relative;
   margin-bottom: 45px;
}

.in16 h5 img:nth-of-type(1) {
   position: absolute;
   left: 20px;
   bottom: 40px;
}

.in16 h5 img:nth-of-type(2) {
   position: absolute;
   right: 20px;
   bottom: 40px;
}

.in16 h5 b {
   display: block;
   color: black;
   font-size: 25px;
   font-weight: 400;
   line-height: 120%;
   text-align: center;
}

.in16 h5 i {
   display: block;
   color: black;
   font-size: 23px;
   font-weight: bold;
   line-height: 120%;
   text-align: center;
   letter-spacing: 0.15em;
   text-align: center;
   margin: 5px 0 20px 0;
}

.in16 h5 a {
   display: flex;
   justify-content: center;
   align-items: center;
}

.in16 h5 a u {
   display: block;
   width: 12px;
   height: 12px;
   background-color: #3A867F;
   border-radius: 150px;
}

.in16 h5 a u+u {
   margin-left: 10px;
}

.in16 h5 a u:nth-of-type(2) {
   background-color: #E2BB41;
}

.in16 h5 a u:nth-of-type(3) {
   background-color: #D87F5D;
}

.in16 h5 span {
   display: block;
   color: black;
   font-size: 17px;
   font-weight: 400;
   line-height: 120%;
   margin-top: 25px;
}

.in16 h6 {
   width: fit-content;
}

.in16 h6 a {
   display: block;
   position: relative;
   padding-left: 55px;
   transition: 0.5s;
}

.in16 h6 a+a {
   margin-top: 30px;
}

.in16 h6 a img {
   position: absolute;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
}

.in16 h6 a span {
   display: block;
   color: #000000;
   font-size: 17px;
   font-weight: 400;
   line-height: 140%;
   word-break: break-all;
   transition: 0.5s;
}

.in16 h6 a:hover span {
   transition: 0.5s;
   color: #E2BB41;
}

.in16 h4 {
   width: 100%;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   margin-top: 40px;
}

.in16 h4 a {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   position: relative;
   transition: 0.5s;
}

.in16 h4 a+a {
   margin-left: 15px;
}

.in16 h4 a b {
   color: black;
   font-size: 17px;
   font-weight: 400;
   line-height: 120%;
   display: none;
   margin-left: 10px;
   transition: 0.5s;
}

.in16 h4 a:hover b {
   transition: 0.5s;
   display: block;
}

.in_map {
   max-width: 980px;
   width: 100%;
   position: relative;
   display: flex;
   justify-content: flex-end;
   align-items: center;
}

.iu_map {
   max-width: 680px;
   width: 100%;
   position: relative;
}

.iu_map {
   position: absolute;
   left: 0;
   bottom: 40px;
}

.in17 {
   max-width: 1440px;
   margin: auto;
   padding: 0 20px;
}

.in17 h4 {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 30px;
}

.in17 h4::after {
   content: "";
   max-width: 1200px;
   width: 100%;
   height: 1px;
   background-color: #3A867F;
   display: block;
}

.in17 h4 img {
   min-width: 50px;
}

.in17 h4 b {
   display: block;
   color: #3A867F;
   font-size: 23px;
   font-weight: bold;
   line-height: 120%;
   letter-spacing: 0.15em;
   padding: 0 13px;
   white-space: nowrap;
}

.in17 h6 {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.in17 h6 a {
   display: block;
   width: 31%;
   transition: 0.5s;
}

.in17 h6 a:hover {
   transition: 0.5s;
   transform: translateY(-10px);
}

@media (max-width:1550px) {
   .in_img01 {
      left: -5vw;
   }
}

@media (max-width:1500px) {
   .in05 h5 img {
      width: 23vw;
   }
}

@media (max-width:1440px) {
   .in_map em {
      display: block;
      width: 57vw;
   }

   .iu_map {
      width: 46vw;
   }

   .iu_map iframe {
      height: 25vw;
   }

   .in_img01 {
      left: -7vw;
   }
}

@media (max-width:1350px) {
   .in_img01 {
      left: -10vw;
   }
}

@media (max-width:1300px) {
   .in05 h5 img {
      width: 18vw;
   }
}

@media (max-width:1250px) {
   .in13 {
      max-width: 800px;
   }

   .in13 a {
      padding: 0 13px;
   }

   .in13 a b {
      font-size: 17px;
   }

   .in_img01 {
      left: -5vw;
  }
}

@media (max-width:1200px) {


   .in03 p b,
   .in05 h5 i,
   .in05 h5 strong,
   a.in08 strong,
   a.in11 strong,
   a.in08 p b,
   a.in11 p b,
   .in07 h5 b,
   .in07 h5 i,
   .in16 h5 b,
   .in16 h5 i,
   .in17 h4 b {
      font-size: 20px;
   }

   .in03 h4 span,
   .in05 h5 span,
   .in05 h5 em,
   .in06 p span,
   .in16 h5 span,
   .in16 h6 a span,
   .in16 h4 a b {
      font-size: 16px;
   }

   .in04 a i,
   .in06 p b {
      font-size: 17px;
   }

   .in04 a h5 span {
      font-size: 18px;
   }

   .in04 a h5 span u {
      font-size: 26px;
   }

   .in05 h5 b {
      font-size: 22px;
   }

   /*  */

   .in01 {
      padding: 80px 20px;
   }

   .in04 a h5 span u {
      bottom: -1px;
   }

   .in04 a b u {
      width: 120px;
      height: 120px;
   }

   a.in08 p i,
   a.in11 p i {
      width: 90px;
      height: 90px;
   }

   a.in08 p i img,
   a.in11 p i img {
      width: 45px;
   }
}

@media (max-width:1090px) {

   .in05 h5 em,
   .in06 p span,
   .in16 h5 span,
   .in16 h6 a span,
   .in16 h4 a b {
      max-width: 400px;
   }

   .in05 h5 img {
      width: 25vw;
   }
}

@media (max-width:940px) {
   .in04 a b u {
      width: 80px;
      height: 80px;
   }

   .in04 a b u img {
      width: 45px;
   }

   .in05 {
      padding: 80px 0 0 0;
   }

   .in05 h5 img:nth-of-type(2) {
      display: none;
   }

   .in05 h5 img:nth-of-type(1) {
      position: static;
      margin: auto;
      margin-top: 30px;
      width: fit-content;
   }
}

@media (max-width:850px) {
   .in01 {
      padding: 80px 20px;
   }

   .in02 {
      flex-direction: column;
      align-items: center;
   }

   .in03,
   .in_bg {
      width: 100%;
   }

   .in_bg {
      padding: 50px 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url('../img/sxi_img061.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      margin-bottom: 60px;
   }

   .in_bg::before {
      content: "BEAT SELLER";
      color: white;
      font-size: 65px;
      font-weight: 400;
      line-height: 120%;
      text-align: center;
      display: block;
      text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
      word-break: normal;
   }

   .in_bg img {
      display: none;
   }

   .in13 {
      grid-template-columns: repeat(3, 1fr);
   }

   .in_img01 {
      bottom: -50px;
      width: 20vw;
   }

   .in_img02 {
      width: 26vw;
   }

   .in13 a:nth-child(n)::after {
      display: block;
   }

   .in13 a:nth-child(3n)::after,
   .in13 a:last-child::after {
      display: none;
   }

   .in14 {
      padding: 90px 0 80px 0;
   }

   .in15 {
      flex-direction: column;
      align-items: center;
      margin-bottom: 40px;
      padding: 0 20px;
   }

   .in16 {
      margin: 0;
      margin-bottom: 40px;
   }

   .iu_map {
      bottom: auto;
   }
}

@media (max-width:700px) {

   .in03 p b,
   .in05 h5 i,
   .in05 h5 strong,
   a.in08 strong,
   a.in11 strong,
   a.in08 p b,
   a.in11 p b,
   .in07 h5 b,
   .in07 h5 i,
   .in16 h5 b,
   .in16 h5 i,
   .in17 h4 b {
      font-size: 18px;
   }

   .in03 h4 span,
   .in05 h5 span,
   .in05 h5 em {
      font-size: 15px;
   }

   .in04 a i,
   .in06 p b {
      font-size: 16px;
   }

   .in04 a h5 span {
      font-size: 17px;
   }

   .in04 a h5 span u {
      font-size: 22px;
   }

   /*  */
   .in02 {
      max-width: 550px;
   }

   .in04 a {
      width: 48.5%;
   }

   .in04 a:nth-child(n+3) {
      margin-top: 35px;
   }

   .in07 {
      padding: 80px 20px;
   }

   .in10 {
      flex-direction: column;
      align-items: center;
      max-width: 450px;
   }

   a.in08,
   .in09 {
      width: 100%;
   }

   .in09>a:nth-child(1) {
      margin: 35px 0;
   }
}

@media (max-width:600px) {

   .swiper-button-prev,
   .swiper-button-next {
      width: 70px;
      height: 70px;
   }

   .swiper-button-next:after,
   .swiper-button-prev:after {
      font-size: 26px;
   }

   .swiper-button-prev {
      left: -40px;
   }

   .swiper-button-next {
      right: -40px;
   }

   .in07 {
      padding: 50px 20px;
   }

   .in12 {
      background-attachment: unset;
   }

   .in14 {
      padding: 50px 0;
   }

   .in_map em{
      display: none;
   }

   .iu_map{
      position: static;
      width: 100%;
   }

   .iu_map iframe {
      height: 300px;
   }

}

@media (max-width:600px) {

   .in_img01,
   .in_img02 {
      display: none;
   }

   .in13 {
      max-width: 400px;
      grid-template-columns: repeat(2, 1fr);
   }

   .in13 a:nth-child(n)::after {
      display: block;
   }

   .in13 a:nth-child(2n)::after {
      display: none;
   }

   .in13 a b {
      font-size: 15px;
   }
}

@media (max-width:450px) {
   .in16 h4 {
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
   }

   .in16 h4 a img {
      min-width: 55px;
   }

   .in16 h4 a:nth-child(2n+1) {
      width: 45%;
   }

   .in16 h4 a:nth-child(2n) {
      width: 53%;
   }

   .in16 h4 a:nth-child(n+3) {
      margin-top: 20px;
   }

   .in16 h4 a+a {
      margin-left: 0;
   }

   .in17 h6 {
      flex-wrap: wrap;
   }

   .in17 h6 a {
      width: 100%;
   }

   .in17 h6 a+a {
      margin-top: 25px;
   }
}

@media (max-width:425px) {
   .in_bg::before {
      font-size: 45px;
   }

   .in03 p a {
      font-size: 16px;
   }

   /*  */

   .in01 {
      padding: 50px 20px;
   }

   a.in08 p i,
   a.in11 p i {
      width: 65px;
      height: 65px;
   }

   a.in08 p i img,
   a.in11 p i img {
      width: 35px;
   }
}

@media (max-width:375px) {
   .in04 {
      max-width: 250px;
      margin: auto;
   }

   .in04 a {
      width: 100%;
   }

   .in04 a:nth-child(n+2) {
      margin-top: 35px;
   }

   .in03 p {
      padding-left: 60px;
   }

   .in03 p img {
      width: 50px;
   }
}

/*products*/
.accordion_header a.category_one_a {
   font-size: var(--font18);
}

.accordion_header {
   padding: 0;
}

a.no_category_a {
   line-height: 160%;
   padding: 2px 0;
   position: relative;
   overflow: hidden;
   transition: .4s;
}

a.no_category_a:before {
   content: url(../images/shin_img037.png);
   position: absolute;
   left: -10px;
   top: 8px;
   transition: .4s;
}

a.no_category_a:hover {
   padding: 2px 0 2px 13px;
}

a.no_category_a:hover:before {
   left: 0px;
}

.pd_i_lists {
   /* display: grid;
   grid-template-columns: repeat(4,1fr);
   column-gap: 15px;
   row-gap: 55px; */
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
}

.pd_i_lists li {
   width: 100%;
   padding: 0 0 50px;
   border: 1px solid #CCCCCC;
   background: #fff;
   transition: 0.5s;
   width: 23%;
   margin: 12.25px 1%;
}

.pd_i_lists li a {
   max-width: 100%;
}

.pd_i_lists li img {
   border: none;
}

.pd_i_lists p {
   width: 100%;
}

.pd_i_lists p:nth-of-type(3) {
   margin-top: 15px;
}

.pd_i_lists p u {
   font-size: 25px;
   font-style: normal;
   padding-right: 5px;
}

.pd_i_lists p.pd_name1 {
   font-size: var(--font18);
   color: #000000;
   font-weight: bold;
   overflow: hidden;
   display: -webkit-box;
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   word-break: break-all;
   line-height: 160%;
   margin-bottom: 10px;

}

.pd_i_lists p.pd_name2 {
   font-size: var(--font17);
   color: #666666;
}

.pd_i_lists p {
   font-size: var(--font25);
   font-family: 'Noto Sans TC', sans-serif;
   padding-left: 8px;
   padding-right: 8px;
}

.pd_i_lists p b {
   font-size: var(--font17);
   font-weight: bold;
}

.pd_i_lists li a span {
   background: #4BADA4;
   color: #fff;
   opacity: 1;
   border: none;
   position: absolute;
   transition: 0.5s;
}

.pd_i_lists li:hover {
   border: 1px solid #3A867F;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, .3);
   transition: 0.5s;
}

.pd_i_lists li:hover span {
   background: #3A867F;
   transition: 0.5s;
}

.pd_i_lists li a span::after {
   content: '+';
   position: absolute;
   right: calc(50% - 50px);
   top: 50%;
   transform: translateY(-50%);
   transition: .4s;
}

.le_prods_c {
   margin-top: 10px;
}

.pd_bottombox {
   max-width: 1190px;
   margin: auto;
}

/*products篩選*/
.por_search {
   flex-wrap: wrap;
   max-width: 1000px;
   margin: 10px auto 20px;
   list-style: none;
}

.por_search a {
   display: inline-block;
   padding: 5px;
   margin-right: 10px;
   margin-bottom: 10px;
   border: 1px solid #222;
   border-radius: 5px;
}

/*products內頁*/
.prod_info_show {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}

.prod_info_show .box_le {
   width: 600px;
   padding: 0;
}

.paper_body .box_ri {
   width: 565px;
   padding: 0;
   margin-left: 20px;
}

.prod_info_show:after {
   display: none;
}

.pd_i_box {
   margin: 0;
}

.pd_contitle {
   border: 1px solid #3A867F;
   /* background: #fff; */
}

.pd_contitle h4 {
   background: none;
   margin-bottom: 0;
   font-family: 'Noto Sans TC', sans-serif;
   font-size: var(--font17);
   text-align: left;
   width: 100%;
   letter-spacing: 2px;
   text-indent: 2px;
   text-align: center;
}

.pd_bottombox .pd_contitle h4 {
   text-align: center;
}

.click_buy a.goadd,
.click_buy a.goadd2 {
   position: relative;
}

.click_buy a.goadd2 {
   background-color: #3A867F;
}

.click_buy a.goadd::before,
.click_buy a.goadd02::before {
   display: none;
}

.click_buy a.goadd2 {
   margin: auto;
}

.pd_i_lists p.pd_name01 {
   font-size: var(--font25);
   color: #FF0000;
}

.pd_i_lists p.pd_name01 b {
   font-size: var(--font17);
}

/*products購物清單*/
.cart_list_item td {
   background: none;
   font-size: 12px;
}

.cart_list_item .cart_list_head td,
.product_cart h4,
.price_ri {
   font-size: 15px;
   background: #FFF;
   border: 1px solid var(--colorO);
   color: #222222;
   padding:10px 5px;
   border:1px #3A867F solid;
   font-weight: bold;
}

.cart_list_item h6 {
   font-size: 12px;
}

.pr_a01 {
   display: block;
   width: fit-content;
   color: #F23913;
   margin: 4px auto auto;
}

.cart_ps p {
   font-size: 15px;
   letter-spacing: 0;
}

.pd_bottombox .pd_contitle h4 {
   color: #3A867F;
}

/*會員登入*/
.member00 {
   max-width: 100%;
   padding: 50px 3%;
   background-color: #F1F1F1;
   min-height: 600px;
}

.member00 .path {
   max-width: 1400px;
   margin: auto;
}

.Shin_title {
   font-size: var(--font50);
   line-height: 100%;
   font-family: 'Noto Sans TC', sans-serif;
   text-align: center;
}

.Shin_title:before {
   content: "MEMBER";
   font-weight: bold;
   font-size: 25px;
   color: var(--colorO);
   line-height: 150%;
}

.Shin_title h4 {
   font-family: 'Noto Sans TC', sans-serif;
   letter-spacing: 3px;
   font-size: 23px;
   margin-top: 10px;
}

.Shin_title span {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   margin-top: 25px;
}

.Shin_title span i {
   display: block;
   width: 12px;
   height: 12px;
   background-color: #3A867F;
   border-radius: 150px;
}

.Shin_title span i+i {
   margin-left: 10px;
}

.Shin_title span i:nth-of-type(2) {
   background-color: #E2BB41;
}

.Shin_title span i:nth-of-type(3) {
   background-color: #D87F5D;
}

.mem_login li {
   text-align: right;
   padding-right: 10px;
}

.mem_login h3 {
   text-align: right;
}

.cart_center {
   display: flex;
   justify-content: space-between;
   align-items: stretch;
   max-width: 310px;
   margin: 30px auto 0;
}

.cart_center01 {
   width: fit-content;
}

.cart_center01 div {
   width: 190px;
   max-width: 100%;
}

.cart_center01 div img {
   left: 110px;
   -webkit-filter: brightness(1) !important;
}

.cart_center01:hover div img {
   left: 120px;
}

/* .cart_btn_reset,
.cart_btn_send,
.cart_btn_fb {
   padding: 10px 18px;
   margin: 0;
} */

/*訂單查詢*/
.pd_i_box {
   margin: 0 auto;
}

.box_history {
   margin-top: 30px;
}

.box_column_history li.a {
   box-shadow: none;
   border: 1px solid #BDBDAE;
   background: #fff;
}

.history_details {
   border-top: none;
   background: none;
}

.history_returned input[type="button"] {
   background: url(../images/X.png) no-repeat center left;
   border: none;
   padding: 0 15px 0 27px;
}

.history_pd_price {
   border-top: 1px solid #BBBBBB;
   border-bottom: 1px solid #BBBBBB;
   padding: 20px 0;
   margin-top: 20px;
}

.history_details td {
   padding: 5px;
}

.history_details td:first-child {
   width: 65px;
}

.cart_price_content td {
   padding: 0 5px 20px;
}

.cart_pay{
   margin-bottom: 20px;
}

/*加入會員*/
.join_ps p {
   background: none;
   padding: 7px 0;
   color: #FF4C4C;
   font-size: 13px;
   font-family: 'Noto Sans TC', sans-serif;
}

/*忘記密碼*/
.fontj01 p {
   color: #525252;
}

.fontj01 p:before {
   content: url(../images/notice.png);
   margin-right: 5px;
}

/*重發認證信*/
.box_mem_passwd {
   margin: 50px auto 0;
}

@media screen and (max-width:1300px) {

   .box_container,
   .pd_i_box,
   .pd_all,
   .prodc_page,
   .Shin_title,
   .member00 {
      --font60: 50px;
      --font50: 45px;
      --font30: 26px;
      --font25: 23px;
   }

   .Shin_title h4{
      margin-top: 0;
   }
   .Shin_title span{
      margin-top: 20px;
   }
}

@media screen and (max-width:1200px) {

   /*products內頁*/
   .pd_ri {
      max-width: 100%;
   }
}

@media (max-width:1080px) {

   /* product index */
   .pd_i_lists li {
      width: 31%;
   }
}

@media screen and (max-width:1024px) {

   .box_container,
   .pd_i_box,
   .pd_all,
   .prodc_page,
   .Shin_title,
   .member00 {
      --font60: 45px;
      --font50: 40px;
      --font30: 24px;
      --font25: 20px;
   }
}

@media screen and (max-width:980px) {}

@media screen and (max-width:820px) {
   .owl-carousel .owl-item img {
      height: auto;
   }

   /*products內頁*/
   .prod_info_show {
      max-width: 100%;
      flex-flow: wrap;
      justify-content: center;
   }

   /* .paper_body .box_ri {
      margin: 20px auto auto;
   } */

   .detail_list {
      max-width: 100%;
   }

   .pd_bottombox .detail_list li {
      margin-bottom: 0;
   }

   /* product index */
   .pd_i_lists p u {
      font-size: 22px;
   }

   .pd_i_lists p b {
      font-size: 16px;
   }

   /*會員登入*/
   .member00 {
      padding: 50px 5%;
      min-height: unset;
   }

}

@media screen and (max-width:768px) {

   .box_container,
   .pd_i_box,
   .pd_all,
   .prodc_page,
   .Shin_title,
   .member00 {
      --font60: 45px;
      --font50: 40px;
   }

   /*banner*/
   .ban {
      height: 250px;
   }

   /*products*/
   .pd_i_lists {
      grid-template-columns: repeat(3, 1fr);
   }

   /*會員登入*/
   .mem_login li:nth-child(2) {
      width: 100%;
   }

   .mem_login h3 {
      text-align: left;
   }

   .c1 {
      white-space: nowrap;
   }

   /*加入會員*/
   .box_join div:nth-child(2) {
      width: 100%;
   }

   .box_join div:nth-child(1) {
      text-align: left;
   }

   /*重發認證信*/
   .box_mem_passwd td {
      padding: 5px;
   }

   .box_mem_passwd td:nth-child(1) {
      width: 90px;
   }

   .box_mem_passwd td:nth-child(2)[type="text"] {
      width: 100%;
   }
   .in17 h6 a:hover{
      transition: 0.5s;
      transform: unset;
    }

}

@media (max-width:620px) {
   .pd_i_lists li {
      width: 46%;
   }
}

@media screen and (max-width:600px) {

   .box_container,
   .pd_i_box,
   .pd_all,
   .prodc_page,
   .Shin_title,
   .member00 {
      --font60: 40px;
      --font50: 35px;
      --font30: 22px;
   }

   /*products*/
   .pd_i_lists {
      grid-template-columns: repeat(2, 1fr);
   }

   /*products篩選*/
   .por_search {
      flex-wrap: wrap;
   }
}

@media screen and (max-width:480px) {

   .box_container,
   .pd_i_box,
   .pd_all,
   .prodc_page,
   .Shin_title,
   .member00 {
      --font60: 35px;
      --font50: 30px;
      --font30: 20px;
      --font25: 18px;
      --font20: 18px;
      --font18: 17px;
      --font17: 16px;
   }

   /*banner*/
   .ban {
      height: 200px;
   }

   /*products*/
   /* .pd_i_lists{column-gap: 10px; row-gap: 20px;} */
   .pd_i_lists li {
      margin-bottom: 0;
   }

   .pd_i_lists p.pd_name3 {
      font-size: 17px;
   }
}

@media (max-width:450px) {
   .pd_i_lists {
      max-width: 350px;
      width: 100%;
   }

   .pd_i_lists li {
      width: 100%;
      margin: 12.25px 0;
   }

   .pd_i_lists li img {
      width: 100%;
   }
}

@media screen and (max-width:350px) {

   .box_container,
   .pd_i_box,
   .pd_all,
   .prodc_page,
   .Shin_title,
   .member00 {
      --font60: 30px;
      --font50: 25px;
   }

   /*banner*/
   .ban {
      height: 170px;
   }

   /*products*/
   .pd_i_lists {
      column-gap: 5px;
   }

   .pd_i_lists li a span {
      padding: 10px;
   }

}

.iu_img {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   margin-top: 20px;
}

.iu_img b {
   display: block;
   font-size: 12px;
   display: block;
   margin-bottom: 10px;
   color: black;
}

#radio{
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   position: relative;
   left: -10px;
}

#radio label{
   width: 60px;
   margin:5px;
}

#radio input[type="radio"] {
   display: none;
}

#radio .button{
   display: block;
   width: 100%;
   height: 100%;
   padding:5px;
}

#radio input:checked+.button {
   border:3px #E2BB41 dashed;
   cursor: default;
}

#radio .button {
   cursor: pointer;
}

@media (max-width:600px) {
   #radio label{
      width: 45px;
   }
}