:root {
   --bg-yellow: #fdd000;
   --bg-blue: rgb(34, 162, 233);
   --bg-red: rgb(228, 30, 132);
 }

 body {
   font-family: Arial, sans-serif;
   font-size: 20px;
   font-weight: 500;
 }

 /* header */

 .header-left {
   border: 3px solid var(--bg-yellow);
   color: #333;
   border-radius: 80px;

 }

 .ptchlogo {
   width: 500px;
 }

 .ytitle {
   font-size: 1.5rem;
 }

 .heatitle {
   font-size: 1.15rem;
   text-align: center;
 }

 .righttiSize {
   font-size: 1.5rem;
   color: #79194c;
   background-image: url('../img/boom.png');
   background-repeat: no-repeat;
   background-size: 150px auto;
   background-position: center left;
 }

 .heatitle02 {
   font-size: 1.35rem;
 }

 .header-bottom {
   background-color: var(--bg-red);
   color: white;
   padding: 15px 15px;
 }

 .booming {
   width: 15%;
 }

 .heatbooming {
   width: 50px;
   height: auto;
 }

 /* body */

 .ItemStyle {
   width: 130px;
   height: 110px;
   text-align: center;
   color: #fff;
   border-radius: 2.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 }

 .ationbtmstyle {
   border: #e41e84 solid 2px;
   border-radius: 2.5rem;
 }

 .ationstyle {
   background-color: #e41e84;
   color: #fff;
   width: 130px;
   height: 85px;
   text-align: center;
   border-radius: 2.35rem;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;

 }

 .iconsize {
   width: 45px;
   margin-top: 12px;
 }

 .Itemyellow {
   background-color: #ffcc00;
   height: 115px;
 }

 .ItembackYellow {
   background-color: #FEEDAB;
   height: 115px;

 }

 .Itemblue {
   background-color: #22A2E9;
   height: 115px;
 }

 .ItembackBlue {
   background-color: #CEE9F5;
   height: 115px;
 }

 .Itemgray {
   background-color: #53473D;
   height: 115px;
 }

 .ItembackGray {
   background-color: #D9D5D0;
   height: 115px;
 }

 .Itemred {
   background-color: #E41E84;
   height: 115px;
 }

 .ItembackRed {
   background-color: #F9CCDF;
   height: 115px;
 }

 .custom-card {
   border-radius: 2.5rem;
   box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
 }

 .form-field {
   border: 2px solid #0e4f74;
   border-radius: 2.5rem;
 }

 .blueback {
   background-color: #E2F5FF;
   border-radius: 2.5rem;
 }

 .form-hint-text {
   color: #0e4f74;

 }

 .form-input-container {
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .btncolor {
   background-color: var(--bg-blue);
   color: #fff;
   text-shadow: 2px 2px gray;
   width: 150px;
   border-radius: 2.5rem;
   font-size: 1.25rem;
   font-weight: 500;
 }

 .btncolor:hover {
   background-color: #55b8ec;
 }

 .btncolor:active {
   background-color: #4189af;
 }

 .foneSize {
   font-size: 1.45rem;
 }

 .tifontSize {
   font-size: 1.25rem;
 }

 .dcimgsize {
   width: 2rem;
 }

 .iconStyle {
   font-size: 1.65rem;
   color: #E41E84;
 }

 .fsred {
   color: #E41E84;
 }

 .fsblue {
   color: #0e4f74;
 }

 /* 提示按鈕 */
 .floating-btn {
   position: fixed;
   bottom: 5%;
   right: 20px;
   background: #E41E84;
   border: none;
   color: white;
   border-radius: 18%;
   width: 85px;
   height: 100px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
   justify-content: center;
   align-items: center;
 }

 .floating-btn:hover {
   background: #F9A8D4;
   color: white;
   text-decoration: none;
 }

 .bi-file-text {
   font-size: 2rem;
 }

 /* modal */
 .custom-modal-width {
   max-width: 1500px;
   height: 800px;
   width: 100%;
 }

 /* RWD */
 @media (max-width:500px) {
   .custom-modal-width {
     max-width: 550px;
     width: 98%;
   }
 }

 @media (max-width: 575.98px) {
   .ptchlogo {
     width: 480px;
   }

   .heatbooming {
     display: none;
   }

   .ytitle {
     font-size: 1rem;
   }

   .heatitle {
     font-size: 12px;
   }

   .righttiSize {
     font-size: 18px;
   }

   .heatitle02 {
     font-size: 16px;
   }

   .ItemStyle {
     width: 100px;
     height: 110px;
     text-align: center;
     color: #fff;
     border-radius: 2rem;
   }

   .ItembackGray {
     height: 150px;
   }

   .Itemgray {
     height: 150px;
     text-align: center;
   }

   .ItembackYellow {
     font-size: small;
   }

   .foneSize {
     font-size: 1rem;
   }
 }

 @media (min-width: 576px) and (max-width: 767.98px) {
   .ptchlogo {
     width: 400px;
   }

   .ytitle {
     font-size: 1.25rem;
   }

   .heatitle {
     font-size: 1.05rem;
   }

   .heatitle02 {
     font-size: 16px;
   }

   .ItemStyle {
     width: 100px;
     height: 90px;
     font-size: 0.85rem;
     padding: 0.75rem;
   }

   .ItemStyle h5 {
     font-size: 1rem;
   }

   .iconsize {
     width: 36px;
     margin-top: 0.2rem;
   }

   .custom-card {
     flex-direction: row;
     text-align: start;
     padding: 1rem;
   }

   .custom-card p {
     text-align: start;
   }

   .ItembackGray {
     height: 200px;
   }
 }

 @media (min-width: 768px) and (max-width: 992px) {
   .custom-modal-width {
     max-width: 800px;
     height: 600px;
     width: 85%;
   }

   .righttiSize {
     font-size: 1.3rem;
     background-image: url('../img/boom.png');
     background-repeat: no-repeat;
     background-size: 100px auto;
     background-position: 10px 20px;
   }

   .heatbooming {
     display: none;
   }

 }

 @media (min-width:992px) and (max-width:1200px) {
   .ItembackGray {
     height: 200px;
   }

   .Itemgray {
     height: 200px;
     text-align: center;
   }
 }