:root {
    --h1-font: 'Poppins', 'Noto Sans TC', sans-serif;
    --h1-size: 6rem;
    --h1-weight: 900;
    
    --h2-font: 'Poppins', 'Noto Sans TC', sans-serif;
    --h2-size: 3rem;
    --h2-weight: 600;
    
    --p-font: 'Poppins', 'Noto Sans TC', sans-serif;
    --p-size: 1rem;
    --p-weight: 400;

    --header-bg-color: #111111;
    --nav-brand-height: 60px;
    --nav-item-color: #f5f5f5;
    --top-nav-item-color: #f5f5f5;
    --hero-bg-color: #111111;
    --footer-brand-height: 45px;

    --primary-color: #dd1e4b;
    --secondary-color: #E0040B;
    
    --white-color: #f9f9f9;
    --black-color: #040402;
    --dark-grey-color: #191919;

    --primary-t-color: #2f323a;
    --secondary-t-color: #f5f5f5; 
    --primary-p-color: #6f6f6f;
    --secondary-p-color: #8e8e8e;
    --primary-b-color: #f5f5f5;
    --primary-l-color: rgba(0, 0, 0, .25);
    --secondary-l-color: rgba(255, 255, 255, 0.25);

    --valid-color: #007a4d;
    --invalid-color: #e34f4f;

    --primary-bg-color: #f5f5f5;
    --primary-bg-color-2: #eeeeee;
    --primary-bg-color-3: #cbcbcb;

    --secondary-bg-color: #040402;
    --secondary-bg-color-2: #111111;
    --secondary-bg-color-3: #191919;

    --card-bg-color: #f5f5f5;

    --footer-bg-color: #111111;
}

/* #endregion Root */

/*----------------------------------------------
2. Button
----------------------------------------------*/

/* #region Button */

.primary-button,
.primary-button:visited, .primary-button:active {
    position: relative;
    z-index: 2;
    padding: 10px 25px;
    background-color: #782C83;
    border-radius: 2px;
    color: var(--primary-b-color);
    font-weight: 400;
}

.primary-button:hover, .primary-button:focus {
    background-color: #782C83;
    background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, #782C83 65%);
    background-image: linear-gradient(45deg, var(--secondary-color) 15%, #782C83 65%);
    color: var(--primary-b-color);
}

.dark-button,
.dark-button:visited, .dark-button:active {
    position: relative;
    z-index: 2;
    padding: 10px 25px;
    background-color: var(--hero-bg-color);
    border-radius: 0;
    color: var(--white-color);
    font-weight: 400;
}

.dark-button:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, #782C83 65%);
    background-image: linear-gradient(45deg, var(--secondary-color) 15%, #782C83 65%);
}

.dark-button:after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 2px;
    left: 2px;
    bottom: 0;
    right: 0;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 0;
    background-color: inherit;
}

.dark-button.inherit:after {
    background-color: inherit;
}

.dark-button:hover, .dark-button:focus,
.dark-button:hover:after, .dark-button:focus:after {
    background-color: #782C83!important;
    background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, #782C83 65%)!important;;
    background-image: linear-gradient(45deg, var(--secondary-color) 15%, #782C83 65%)!important;;
    color: var(--white-color)!important;;
}

footer .dark-button {
    background-color: var(--footer-bg-color);
}

/* #endregion Button */

/*----------------------------------------------
3. Effect
----------------------------------------------*/

/* #region Effect */

.effect-static-text {
    background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, #782C83 65%);
    background-image: linear-gradient(45deg, var(--secondary-color) 15%, #782C83 65%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
         background-clip: text;
    -webkit-text-fill-color: transparent;
}

.effect-static-text i {
    -webkit-text-fill-color: #782C83;
}

.effect-motion-text,
.effect-motion-hover:hover {
    background-image: linear-gradient(to right, #782C83 20%, var(--primary-t-color) 40%, var(--primary-t-color) 60%, #782C83 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -moz-background-clip: text;
         background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: effect 1s linear infinite;
    animation: effect 1s linear infinite;
}

.effect-motion-text i,
.effect-motion-hover:hover i {
    -webkit-text-fill-color: #782C83;
}

.effect-static-bg {
    background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, #782C83 65%);
    background-image: linear-gradient(45deg, var(--secondary-color) 15%, #782C83 65%);
}

.effect-motion-bg {
    background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, #782C83 65%);
    background-image: linear-gradient(45deg, var(--secondary-color) 15%, #782C83 65%);
    background-size: 200% auto;
    -webkit-animation: effect 1s linear infinite;
    animation: effect 1s linear infinite;
}



.products_con .side .medium{
  margin: 30px 0;
}

a#toggle_toc:link, a#toggle_toc:visited {
  display: block;  
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  padding: 5px 0;  
}
a#toggle_toc:hover{
  background: transparent;
}
a#toggle_toc i{
  display: inline-block;
  font-size: 12px;
  margin: 0 8px;
}

#toc_container {
  max-height: 360px;
  display: block;
  overflow-y: auto;
  color: #fff;
  
}
#toc_container::-webkit-scrollbar {
    width: 8px;
}
#toc_container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #b4b4b4;
}

#toc_container::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #505050;
}

.toc_container ul {
  list-style-position: outside;
  list-style-type: none;
  padding:0 0 0 15px;
}
.toc_container ul ul{
}
.toc_container > ul {
  padding:10px 10px 10px 0;
}

.toc_container ul li{
  margin: 0.6rem 0;
  line-height: 1.2;
}
.toc_container ul li:first-of-type{
  margin-top: 0;
}
.toc_container ul li:last-of-type{
  margin-bottom: 0;
}
#toc_container li{
  list-style-type: none;
}
#toc_container li::marker{
  display: none;
}
#toc_container li a,
.toc_container ul li a{
  display: block;
  position: relative;
  padding-left: 15px;
}
/*#toc_container li a::before,
.toc_container ul li a::before{
  content: "";
  width: 3px;
  height: 3px;
  display: inline-block;
  position: absolute;
  top: 7px;
  left: 0;
  background: #a1a1a1;
}*/


#toc_container a:link, #toc_container a:visited, #toc_container a:active ,
.toc_container ul a:link, .toc_container ul a:visited, .toc_container ul a:active {
  font-size: 14px;
  line-height: 150%;
  color: #cfcfcf;
  text-decoration: none;
}

.toc_container ul a:hover { text-decoration: underline; }





/* 首頁 */

@media (min-width: 1200px){
   .pr-xl-6, .px-xl-6 {
      padding-right: 5rem!important;
   }
}

.i_service{
   padding: 60px 0;
}
.i_service.offers .items .item {
   margin-bottom: 0;
}
.s_icon{
   width: 80px;
   display: block;
   margin: auto;
   opacity: 0.9;
}
.l_work{
   background-size: 20px;
}




.footer{
   padding: 80px 0 40px;
   border-top: 1px dashed var(--secondary-l-color);
}
.footer h4{
   margin-bottom: 1.1rem;
}

.f_service{
   margin: 0 0 1.1rem;
   padding: 0;
   list-style: none;
}
.f_service li{
   position: relative;
}
.f_service li a{
   padding: 0.3rem 1rem;
}
.f_service li::before{
   content: "\e606";
   display: inline-block;
   font-size: 12px;
   transform: scale(0.6);
   font-family: 'icons';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;

    position: absolute;
    top: 8px;
    left: 0;
}

@media(max-width: 1199px) {
   .f_service{
   }
   .f_service li{    
   }
}
@media(max-width: 479px) {
   .f_service li::before{
      display: none;
   }
   .f_service li a{
   }
}





.r_contact{
   position: fixed;
   right: 35px;
   bottom: 80px;
   z-index: 10;
}
.r_contact a{
   display: block;
}

.r_contact a svg{
   width: 35px;
}
.r_contact a .st0{ 
   fill:#1FC32E;
   transition: all 0.3s;
}
.r_contact a:hover .st0{ 
   fill:#51e25d; 
}





.copyright02{
   color: #838383;
   font-size: 13px;
}



/* 關於我們 */

.about{
   padding-top: 180px;
}
.about section{
   position: relative;
}
.about section:nth-of-type(1){
   padding: 0;
   margin-bottom: 100px;
}
.about section:nth-of-type(2){
   display: flex;
   justify-content: flex-end;
   padding:0;
}
.about section:nth-of-type(2) img{
   width: 100%;
   max-width: 1590px;
   object-fit: cover;
   aspect-ratio: 2/0.68;
}
.about .r_line{
   width: 15px;
   height: 300px;
   position: absolute;
   right: 0;
   top: -50px;
   opacity: 0.8;
   background: linear-gradient(-45deg, var(--secondary-color) 0%, #782C83 65%);
   z-index: 2;
}

.about h1{
   display: inline-block;
   font-size: 2rem;
   letter-spacing: 2px;
   font-weight: var(--h2-weight);
   background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, #782C83 65%);
   background-image: linear-gradient(45deg, var(--secondary-color) 15%, #782C83 65%);
   -webkit-background-clip: text;
   -moz-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}
.about h2{
   font-size: 3.5rem;
   margin-top: 0;
}
.about h3{
   color: #d1d1d1;
   font-weight: 300;
   font-size: 1.5rem;
   letter-spacing: 4px;

   
}
.about p{
   line-height: 2;
}



.about section:nth-of-type(3){
   overflow:visible;
   padding-top: 160px;
   padding-bottom: 80px;
   z-index: 3;
}
.about section:nth-of-type(3) .form02{
   display: grid;
   grid-template-columns: 0.8fr 2fr;
}
.about section:nth-of-type(3) .form02 > div:nth-of-type(1){
   min-height: 700px;
   position: relative;
}
.about section:nth-of-type(3) .form02 > div:nth-of-type(2){
   padding: 0 18%;
}
.about section:nth-of-type(3) .form02 h2{
   font-size: 1.6rem;
   letter-spacing: 2px;
}
.about section:nth-of-type(3) .form02 h3{
   font-size: 1.3rem;
   font-weight: 400;
   margin-top: 0;
   color: #782C83;
   letter-spacing: 2px;
   -webkit-text-fill-color:initial;
}
.about section:nth-of-type(3) .form02 h3 i{
   position: relative;
   top: 2px;
}
.about section:nth-of-type(3) .form02 p{
   margin-top: 0;
}



.about .pic{
   width: 800px;
   height: 100%;
   position: absolute;
   top: 0;
   right: 0;
}
.about .pic::after{
   content: "";
   display: block;
   width: 40%;
   height: 95%;
   position: absolute;
   bottom: -25px;
   right: -25px;
   opacity: 0.8;
   background: linear-gradient(-45deg, var(--secondary-color) 0%, #782C83 65%);
}
.about .pic img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
}
.about .pic02{
   display: none;
   position: relative;
   margin-bottom: 50px;
}
.about .pic02::after{
   content: "";
   display: block;
   width: 40%;
   height: 95%;
   position: absolute;
   bottom: -13px;
   right: -13px;
   opacity: 0.8;
   background: linear-gradient(-45deg, var(--secondary-color) 0%, #782C83 65%);
}
.about .pic02 img{
   aspect-ratio: 2/1.2;
   object-fit: cover;
   position: relative;
   z-index: 2;
}




@media(max-width: 1199px) {
   .about section:nth-of-type(3){
      padding-top: 90px;
      padding-bottom: 40px;
   }
   .about section:nth-of-type(3) .form02{
      grid-template-columns: 1fr 2fr;
   }
}
@media(max-width: 767px) {
   .about section:nth-of-type(3){
      padding-top: 40px;
      padding-bottom: 0px;
   }
   .about section:nth-of-type(3) .form02{
      grid-template-columns: 1fr ;
   }
   .about section:nth-of-type(3) .form02 > div:nth-of-type(1){
      min-height: initial;
      display: none;
   }
   .about section:nth-of-type(3) .form02 > div:nth-of-type(2){
      padding: 0 20px;
   }

   .about section:nth-of-type(3) .form02 h2{
      font-size: 1.5rem;
      margin-bottom: 15px;
   }
   .about section:nth-of-type(3) .form02 h3{
      font-size: 1.1rem;
      margin-bottom: 15px;
   }
   .about section:nth-of-type(3) .form02 p{
      margin-bottom: 15px;
   }


   .about .r_line{
      display: none;
   }
   .about .pic02{
      display: block;
   }


   .about{
      padding-top: 120px;
   }
   .about section:nth-of-type(1){
      margin-bottom: 80px;
   }
   .about section:nth-of-type(2) img{
      aspect-ratio: 2/1;
   }
   .about h1{
      font-size: 1.6rem;
   }
   .about h2{
      font-size: 2.5rem;
      margin-top: 0;
   }
   .about h3{
      font-size: 1.2rem;
      
   }
}








.pageswf{
   position: relative;
}
.pageswf .cht,
.pageswf h1{
   font-size: 26px;
   color: var(--white);
   font-weight: 400;
   letter-spacing: 4px;
}
@media(max-width: 767px) {
   .pageswf .cht,
   .pageswf h1{
      font-size: 26px;
   }
}



.products{
   padding:60px 80px 0;
}
@media(max-width: 991px) {
   .products{
      padding-right: 60px;
      padding-left: 60px;
   }
}
@media(max-width: 767px) {
   .products{
      padding-right: 0px;
      padding-left: 0px;
   }
}
.p_menu{
   margin: 0 0 60px;
   padding: 0;
   list-style: none;
   display: flex;
   justify-content: center;
   flex-flow: wrap;
   gap: 40px;
   border-bottom: 1px solid #404040;
}
.p_menu li{
   position: relative;
   margin: 0;
}
.p_menu li.active{
}
.p_menu li.active::after{
   content: "";
   display: block;
   width: 10px;
   height: 10px;
   position: absolute;
   left: 50%;
   bottom: -5px;
   transform: translateX(-50%) ;
   background: #782C83;
}
.p_menu li.active a{
   color: #782C83;
}
.p_menu li a{
   display: block;
   padding: 15px 0;
   font-size: 18px;
   letter-spacing: 2px;
}
.products img{
   width: 100%;
   object-fit: cover;
   aspect-ratio: 2/1.6;
   object-position: top !important;
}

@media(max-width: 1499px) {
   .products h2{
      font-size: 18px;
   }
   .products .keyword{
      margin-bottom: 10px;
   }
}
@media(max-width: 767px) {
   .p_menu{
      gap:0 20px;
      padding-bottom: 15px;
   }
   .p_menu li.active::after{
      display: none;
   }
   .p_menu li a{
      padding: 5px 0;
      font-size: 16px;
   }
}





.products_con{
   padding: 100px 0 40px;   
}
@media(max-width: 767px){
    .products_con{
       padding: 50px 0 20px; 
       margin-top: 50px!important;  
    }
}
.products_con .side{
   padding: 20px 30px;
   background: #282828;
   margin-bottom: 30px;
}
.products_con .side h1{
   font-size: 1.5rem;
   line-height: 150%;
   color: #fff;
   letter-spacing: 2px;
   font-weight: 600;
}
.products_con .side .keywords,
.products_con .side h2{
   font-size: 13px;
   font-weight: 300;
   line-height: 1.2;
   padding-bottom: 15px;
   letter-spacing: 2px;
   margin: 1.5rem 0;
   border-bottom: 1px solid #782C83;
}
.products_con .side > a{
   display: block;
   padding: 10px 15px;
   margin: 40px 0;
   text-align: center;
   border-radius: 4px;
   color: #782C83;
   border: 1px solid #782C83;
}
.products_con .side a:hover{
   color: var(--white);
   background: #782C83;
}

.products_con .side .bottom{
   margin: 0 0 20px;
   padding: 0;
   list-style: none;
   display: flex;
}
.products_con .side .bottom li{
   flex: 1;
   display: flex;
   justify-content: center;
}
.products_con .side .bottom li:before{
    display: none;
}
.products_con .side .bottom li a{
   width: 100%;
   display: block;
   font-size: 14px;
   text-align: center;
   padding:10px 5px;
   color: #878787;
   border-bottom: 1px solid #606060;
}
.products_con .side .bottom li.list a{
   color: #782C83;
   border-bottom: 1px solid #782C83;
}
.products_con .side .bottom li.list:hover a{
   color: var(--white);
}







.news{
   padding:60px 80px 0;
}
.inews h3,
.inews h4,
.news h2{
   min-height: 56px;
   font-size: 1.3rem;
   font-weight: 500;
   line-height: 1.3;
   margin-top: 0;
   margin-bottom: 10px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
}
.inews p,
.news p{
   color: var(--primary-bg-color-3) !important;
   font-size: 14px;
   font-weight: var(--p-weight);
   line-height: 1.6;
   margin-bottom: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
}
.inews .card-body,
.news .card-body {
   padding:30px 10px;
}
.inews .card-footer,
.news .card-footer{
   margin: 0 10px;
}
.inews .card-footer a,
.news .card-footer a{
   color: #f5f5f5 !important;
   font-size: 13px;
}
@media(max-width: 991px) {
   .news{
      padding-right: 60px;
      padding-left: 60px;
   }
}
@media(max-width: 767px) {
   .news{
      padding-right: 0px;
      padding-left: 0px;
   }
   .inews p,
   .news p{
      font-size: 1.1rem;
   }
}





.edit{
   letter-spacing: 1px;
   font-family: 'Poppins', "微軟正黑體", 'Noto Sans TC', sans-serif;
}
.edit::after{
   content: "";
   display: block;
   clear: both;
}
.edit h1, .edit h2, .edit h3,.edit h4, .edit h5, .edit h6{
   color: var(--white);
   font-weight: 500;
   line-height: 1.5;
   font-family: var(--p-font);
}
.edit h1{font-size: 32px;}
.edit h2{font-size: 28px;}
.edit h3{font-size: 24px;}
.edit h4{font-size: 20px;}
.edit h5{font-size: 18px;}
.edit h6{font-size: 15px;}
.edit strong{ color: #782C83; }

@media(max-width: 479px) {
   .edit h1{font-size: 28px;}
   .edit h2{font-size: 24px;}
   .edit h3{font-size: 20px;}
   .edit h4{font-size: 18px;}
}
.edit ul{
   list-style: none;
}
.edit ul:has(h1, h2, h3, h4, h5, h6){
   list-style: none;
}
.products_con  .breadcrumb{
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: center;

}

.products_con  .breadcrumb-item a.active{
   color: #782C83;
}


.newscon{
   position: relative;
   padding-top: 0;
}
.newscon .s_box{
   align-items: flex-start;
}
@media(min-width: 992px) {
   .newscon .s_box > .col-lg-3{
      position: sticky;
      top: 100px;
   }
}
.newscon .edit h2{
   padding-bottom: 3px; 
   border-bottom: 1px solid #782C83; 
   margin-top: 3rem;
}
.newscon .edit h2{
   position: relative;
   padding-left: 20px;
   color: #782C83;
}
.newscon .edit h2 a,.newscon .edit h2 strong{
   color: #782C83;
}
.newscon .edit h2::before{
   content: "";
   width: 1px;
   height: 27px;
   display: block;
   position: absolute;
   top: 6px;
   left: 0;
   border-left: 5px solid #782C83;
}
main #toc_container ul li{
    padding-left: 0;
}

main #toc_container ul li::before{
    display: none;
}
#toc_container li a::before, .toc_container ul li a::before {
    content: "";
    width: 3px;
    height: 3px;
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 0;
    background: #a1a1a1;
}
.newscon .edit h3{
   padding-left: 25px;
   color: #782C83;
   background: url(./img/icon01.png) no-repeat left 9px;
}
.newscon .edit h3 a,.newscon .edit h3 strong{
   color: #782C83;
}


.newscon .edit h4, .newscon .edit h5, .newscon .edit h6{
   position: relative;
   padding-left: 30px;
   color: #ededed;
}
.newscon .edit h4 a,.newscon .edit h4 strong, .newscon .edit h5 a, .newscon .edit h6 a{
   color: #ededed;
}

.newscon .edit h4::before{
   content: "";
   width: 13px;
   height: 1px;
   display: block;
   position: absolute;
   left: 5px;
   top: 13px;
   border-bottom: 2px solid #c9c9c9;
}



.service_con .edit table,
.newscon .edit table{
   width: 100%;
   border-collapse: collapse;
   margin:0 0 30px ;
   background: #303030;
}
.newscon .edit table tbody{}
.newscon .edit table tr{}
.service_con .edit table tr:nth-of-type(odd),
.newscon .edit table tr:nth-of-type(odd){
   background: #3e3e3e;
}

.service_con .edit table tr th,
.newscon .edit table tr th{
   padding: 12px 15px;
   text-align: center;
   font-weight: 500;
   color: #eee;
   vertical-align: middle;
   border: #17171c solid 2px;
}
.service_con .edit table tr td,
.newscon .edit table tr td{
   padding: 15px 15px;
   vertical-align: middle;
   color: #c3c3c3;
   border: #17171c solid 2px;
}










.always{
   position: relative;
   padding: 60px 0 60px;
   margin-top: 160px;
   margin-bottom: 40px;   
   border: 3px solid #782C83;
}
.always::before{
   content: "";
   width: 0;
   height: 0;
   position: absolute;
   top: 0;
   left: 0;
   border-style: solid;
   border-width: 20px 20px 0 0;
   border-color: #782C83 transparent transparent transparent;
}
.always::after{
   content: "";
   width: 0;
   height: 0;
   position: absolute;
   right: 0;
   bottom: 0;
   border-style: solid;
   border-width: 0 0 20px 20px;
   border-color: transparent transparent #782C83 transparent;
}
.always .top{
   width: 60%;
   position: absolute;
   top: -65px;
   left: 50%;
   transform: translateX(-50%);
   text-align: center;

   padding: 0 20px;   
   background: #17171c;
}
.always h2{
   font-weight: 500;
   font-size: 1.8rem;
   letter-spacing: 2px;
   margin: 0;
   text-align: center;
   color: #ff4b49;
   border-radius: 4px;   
}
.always .top span{
   font-size: 15px;
   display: inline-flex;
   align-items: center;
   color: #eee;
   background: #a51414;
   padding: 6px 30px;
   letter-spacing: 2px;
   margin-bottom: 15px;
   clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
}
.always ul{
   margin: 0;
   padding: 0 30px;
   list-style: none;

   display: grid;
   gap:0 30px;
   grid-template-columns: 1fr 1fr;
}
.always ul li{
   position: relative;
   padding:20px 15px;
   display: flex;
   gap: 10px;
   margin: 0;
   overflow: hidden;
   border-radius: 3px;
   color: rgb(202, 202, 202);
   border-bottom: 1px solid rgb(72 72 72);
}
.always ul li h3{
   font-size: 1.2rem;
   font-weight: var(--h2-weight);
   line-height: 1.2;
   font-weight: 500;
   margin-top: 0;
   margin-bottom: 1rem;
}
.always ul li i{
   font-size: 22px;
   color: #f95252;
   position: relative;
   top: 1px;
}
.always ul li > div{
   flex: 1;
}

.always .con{
   padding: 0 40px;
   margin: 10px 0 ;
}
.always .con p{
   color: #eee;
}
@media (min-width: 1025px){
    .products_con  .row>*{
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media(max-width: 1299px) {

}
@media(max-width: 991px) {   
   .always ul li{
      font-size: 16px;
   }
}
@media(max-width: 767px) {
   .always ul{
      gap:10px;
      grid-template-columns: 1fr;
   }
   .always h2{
      font-size: 1.4rem;
   }
   .always .top{
      top: -80px;
   }
   .always .top span{
      font-size: 14px;
      word-break: keep-all;
   }
}
@media(max-width: 479px) {
   .always{
      padding: 70px 0 40px;
   }
   .always .top{
      width: auto;
   }
   .always ul{
      padding: 0 10px;
   }
   .always h2{
   }
   .always .top span{
      font-size: 12px;
   }
}







.always02{
   display: grid;
   gap: 30px;
   grid-template-columns: 1fr 1fr;
}
.always02 h2{
   grid-column: 1/-1;
   text-align: center;
   font-size: 1.6rem;
   font-weight: 500;
   letter-spacing: 2px;
   color: #ff4b49;
}
.always02 h2 i{
   position: relative;
   top: 2px;
}
.always02 h3{
   font-size: 1.2rem;
   font-weight: var(--h2-weight);
   line-height: 1.2;
}
.always02 a{
   display: block;
   position: relative;
   padding: 40px;
   text-align: center;
   border-radius: 10px;
   background: #303030;
   border: 2px solid #4c4c4c;
}
.always02 a:hover{
   color: #eee;
   border: 2px solid #782C83;
}
.always02 .but{
   width: 80%;
   position: absolute;
   left: 50%;
   bottom: -20px;
   transform: translateX(-50%);
   padding: 10px 15px;
   border-radius: 20px;
   background: #782C83;
}
@media(max-width: 767px) {
   .always02 h2{
      font-size: 1.2rem;
      margin: 1rem 0;
   }
}
@media(max-width: 576px) {
   .always02{
      gap:40px;
      grid-template-columns: 1fr;
   }
   .always02 .but{
      bottom: -25px;
   }
}











.service{padding: 100px 0 0;}
.i_service div.card img,
.service div.card img{
   max-width: 60px;
   margin: 0 auto;
   transition: all 0.4s;
}
.i_service div.card:hover img,
.service div.card:hover img{
   filter: brightness(5);
}
.i_service h2,
.service h2{
   font-size: 1.3rem;
   font-weight: var(--h2-weight);
   line-height: 1.2;
   letter-spacing: 2px;
}





.service_con{   
}
.service_con .title{
   position: relative;
   border: #782C83 solid 1px;
   text-align: center;
   background: var(--hero-bg-color);
   margin-bottom: 50px;
}
.service_con .title::before{
   content: "";
   display: block;
   position: absolute;
   left: 50%;
   bottom: -12px;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 12px 20px 0 20px;
   border-color: #782C83 transparent transparent transparent;
}
.service_con .title::after{

}
.service_con .title span{
   position: relative;
   display: inline-flex;
   gap: 20px;
   justify-content: center;
   align-items: center;
   padding: 15px 40px;
   z-index: 3;
}
.service_con .title img{
   max-width: 45px;
}
.service_con h1{
   font-size: 1.8rem;
   color: var(--white);
   letter-spacing: 2px;
   font-weight: 500;
   margin: 0;
}
@media(max-width: 767px) {
   .service_con .title span{
      padding: 15px 20px;
   }
   .service_con h1{
      font-size: 1.5rem;
   }
}

.service_con .edit{}

.service_con .edit h2{
   display: inline-block;
   position: relative;
   padding: 25px 60px;
   margin-top: 0;
   margin-bottom: 5.5rem;
   background-size: 38px auto;
}

.service_con .edit h2::after{
   content: "";
   width: 2px;
   height: 40px;
   display: block;
   position: absolute;
   left: 50%;
   bottom: -40px;
   transform: translateX(-50%);
   background: #dc3e3c;
}
.service_con .edit h2 .en01{
   display: block;
   font-size: 14px;
   font-weight: 300;
   color: #999;
}

.service_con .edit h3{}

@media(max-width: 767px) {
   .service_con .edit h2{
      padding: 25px 40px;
      margin-bottom: 3rem;
      background-size: 30px auto;
   }
}





/* ============ 服務內頁css ============= */

.t_style01{}
.t_style01 > span{
   position: relative;
}
.t_style01 > span::after{
   content: " ";
   position: absolute;
   width: 100%;
   height: 13px;
   background: rgba(255, 211, 38, 0.6);
   bottom: 0;
   left: 0;
   z-index: -1;
}


.s_style01{
   margin: 30px 0;
}
.s_style01 h3{
   width: 100%;
   padding: 15px 10px;
   background: rgb(171 97 38);
   margin: 0;
   color: #fff;
   text-align: center;   
   border-radius: 10px 10px 0 0;
}
.s_style01 p{
   width: 100%;
   min-height: 150px;
   display: flex;
   align-items: center;
   padding: 20px 30px;
   background: rgba(255, 255, 255, 0.2);
   margin: 0;
   color: #f2f2f2;
   text-align: center;
   border-radius: 0 0 10px 10px;   
}



.tablestyle01{
   overflow-x: auto;
}




.s_style02{
   display: grid;
   gap: 0 30px;
   grid-template-columns: 1fr 1fr;
   margin-bottom: 30px;
}
.s_style02 h5{
   display: flex;
   gap: 10px;
   margin: 0;
   padding: 15px ;
   border-bottom: 1px solid #606060;
}
.s_style02 h5 i{
   position: relative;
   top: 2px;
   color: #ff5757;
}
@media(max-width: 479px) {
   .s_style02{
      gap: 0 30px;
      grid-template-columns: 1fr ;
   }
}




.s_style03{
   display: flex;
   gap: 20px;
   flex-flow: wrap;
   margin: 30px 0;
}
.s_style03 section{
   flex: 1;
   background: linear-gradient(155deg, #cd2561, #BD3F32); 
   padding: 30px;
}
.s_style03 section h4{
   margin-top: 0;
   padding-bottom: 15px;
   border-bottom: 1px dashed #ff8c8c;
}
.s_style03 .icon{
   width: 35px;
   background-size: contain;
}
.s_style03 ul{
}
.s_style03 ul li{
   color: #d7d7d7;
}

@media(max-width: 991px) {
   .s_style03 .icon{
      width: 25px;
   }
}
@media(max-width: 767px) {
   .s_style03{
      gap: 10px;
   }
   .s_style03 section{
      flex-basis: 100%;
   }
   .s_style03 .icon{
      width: 15px;
      background-size: contain;
   }
}






.s_style04{
}
.s_style04 h3{
   padding: 6px 15px;
   font-weight: 500;
   background: #782C83;
   border-radius: 4px;
}




.s_style05{}
.service_con .edit .s_style05 h2{
   margin-bottom: 0;
}
.service_con .edit .s_style05 h2::after{
   display: none;
}





.s_style06{}
.s_style06 > div{
   display: flex;
}
.s_style06 article{
   width: 100%;
   padding:40px 30px;
   border-radius: 5px;
   background: #282828;
}
.s_style06 h4{
   font-size: 52px;
   line-height: 110%;
   margin-top: 0;
   font-weight: 700;
   background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
   -webkit-background-clip: text;
   -moz-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}
.s_style06 p{
   color: #eee;
   font-size: 18px;
}





.s_style07{}
.s_style07 img{
   display: block;
   width: 100%;
   max-width: 350px;
   margin: 0 auto 15px;
}
.service_con .edit .s_style07 h2{
   display: block;
   text-align: center;
   background: none;
   padding: 0;
   margin: 0;
}
.service_con .edit .s_style07 h2::after{
   display: none;
}
.s_style07 hr{
   border-top: 1px dashed rgb(255 255 255 / 40%);
}