@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
@import "compass/css3";

@keyframes fadeIn { 
  from { opacity: 0; } 
}
h2{
  /* font-size: 50px !important; */
  font-weight: 800 !important;
  /* line-height: 10px !important; */
  /* margin-bottom: -1rem !important; */
}
h3{
  font-size: 20px !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
  
}
h4{
 
}
p{
  margin-bottom: 100px !important;
}
.item h2{
  font-size: 30px !important;
  font-weight: 800 !important;
}
.slider_icon_blue svg{
  transition: transform 0.3s, fill 0.3s;
  width: 100%;
  height: auto;
  fill: #bfe2f8;
  
}
.slider_icon_blue svg:hover {
  fill: #0185d7;
  transform: scale(1.2);
}
.slider_icon_blue{
  margin: 0 auto;
  width: 5%;
  height: auto;
  position: relative;
  top: -50px;
  transition: 0.5s;
  z-index: 90000;
}

.slider_icon_green svg{
  transition: transform 0.3s, fill 0.3s;
  width: 100%;
  height: auto;
  fill: #beca97;
  
}
.slider_icon_green svg:hover {
  fill: #516B00;
  transform: scale(1.2);
}
.slider_icon_green{
  margin: 0 auto;
  width: 5%;
  height: auto;
  position: relative;
  top: -50px;
  transition: 0.5s;
  z-index: 90000;
}

.slider_icon_purple svg{
  transition: transform 0.3s, fill 0.3s;
  width: 100%;
  height: auto;
  fill: #c7a9e2;
  
}
.slider_icon_purple svg:hover {
  fill: #350068;
  transform: scale(1.2);
}
.slider_icon_purple{
  margin: 0 auto;
  width: 5%;
  height: auto;
  position: relative;
  top: -50px;
  transition: 0.5s;
  z-index: 90000;
}

/* pointme1 */
.pointme1 {
  position: fixed;
  top: 180px;
  left: 320px;
  font: italic bold 5em/1 Bodoni, serif;
  color: #555;
  text-align: center;
  animation: fadeIn 1s infinite alternate;
  background-color: rgb(253, 207, 1);
  border: 10px solid rgb(253, 207, 1);
  border-radius: 75px;
  width: 5px;
    height: 5px;
    cursor: pointer; /* 瘛餃�𣳇�䭾�蹱���脲見撘� */
}
.pointme1_content {
  display: none; 
  
}
.pointme1_content {
  display: none; /* ��嘥�钅黸��� */
  top: -750px;
  z-index: 10;
  width: 600px;
  height: 600px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  border: 4px solid #003444;
  border-radius: 10%;
  background-color: #F3F3F3;
}

.pointme1_content h2{
  color: black;
  font-size: 40px;
    margin: 40px;
}
.pointme1_content img{
  width: 60%;
  height: auto;
}
.pointme1_content span{
  font-size: 10px;
  padding-bottom: 50px;
  position: absolute; /* 蝯訫�滚�帋�� */
  top: 50px;
    right: 341px;
}
/* pointme1 摰� */

/* pointme2 */
.pointme2 {
  position: fixed;
  top: 450px;
    left: 450px;
  font: italic bold 5em/1 Bodoni, serif;
  color: #555;
  text-align: center;
  animation: fadeIn 1s infinite alternate;
  background-color: rgb(253, 207, 1);
  border: 10px solid rgb(253, 207, 1);
  border-radius: 75px;
  width: 5px;
    height: 5px;
    cursor: pointer; /* 瘛餃�𣳇�䭾�蹱���脲見撘� */
}
.pointme2_content {
  display: none; 
  
}
.pointme2_content {
  top: -750px;
  z-index: 10;
  display: none; /* ��嘥�钅黸��� */
  width: 600px;
  height: 600px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  border: 4px solid #003444;
  border-radius: 10%;
  background-color: #F3F3F3;
}

.pointme2_content h2{
  color: black;
  font-size: 40px;
    margin: 40px;
}
.pointme2_content img{
  width: 60%;
  height: auto;
}
.pointme2_content span{
  font-size: x-small;
  padding-bottom: 50px;
  position: relative;
  top: -24px;
}
/* pointme2 摰� */

/* pointme3 */
.pointme3 {
  position: fixed;
  top: 600px;
    left: 320px;
  font: italic bold 5em/1 Bodoni, serif;
  color: #555;
  text-align: center;
  animation: fadeIn 1s infinite alternate;
  background-color: rgb(253, 207, 1);
  border: 10px solid rgb(253, 207, 1);
  border-radius: 75px;
  width: 5px;
    height: 5px;
    cursor: pointer; /* 瘛餃�𣳇�䭾�蹱���脲見撘� */
}
.pointme3_content {
  display: none; 
  
}
.pointme3_content {
  display: none; /* ��嘥�钅黸��� */
  top: -750px;
  z-index: 10;
  width: 600px;
  height: 600px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  border: 4px solid #003444;
  border-radius: 10%;
  background-color: #F3F3F3;
}

.pointme3_content h2{
  color: black;
  font-size: 40px;
    margin: 40px;
}
.pointme3_content img{
  width: 60%;
  height: auto;
}
.pointme3_content span{
  font-size: 10px;
  padding-bottom: 50px;
  position: absolute; /* 蝯訫�滚�帋�� */
  top: 50px;
    right: 341px;
}
/* pointme3 摰� */

/* pointme4 */
.pointme4 {
  position: fixed;
  top: 700px;
    left: 170px;
  font: italic bold 5em/1 Bodoni, serif;
  color: #555;
  text-align: center;
  animation: fadeIn 1s infinite alternate;
  background-color: rgb(253, 207, 1);
  border: 10px solid rgb(253, 207, 1);
  border-radius: 75px;
  width: 5px;
    height: 5px;
    cursor: pointer; /* 瘛餃�𣳇�䭾�蹱���脲見撘� */
}
.pointme4_content {
  display: none; 
  
}
.pointme4_content {
  display: none; /* ��嘥�钅黸��� */
  top: -750px;
  z-index: 10;
  width: 600px;
  height: 600px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  border: 4px solid #003444;
  border-radius: 10%;
  background-color: #F3F3F3;
}

.pointme4_content h2{
  color: black;
  /* font-size: 38px !important; */
    margin: 40px;
}
.pointme4_content img{
  width: 60%;
  height: auto;
}
.pointme4_content span{
  font-size: 10px;
  padding-bottom: 50px;
  position: absolute; /* 蝯訫�滚�帋�� */
  top: 50px;
    right: 341px;
}
/* pointme4 摰� */

/* pointme5 */
.pointme5 {
  position: fixed;
  top: 1010px;
  left: 170px;
  font: italic bold 5em/1 Bodoni, serif;
  color: #555;
  text-align: center;
  animation: fadeIn 1s infinite alternate;
  background-color: rgb(253, 207, 1);
  border: 10px solid rgb(253, 207, 1);
  border-radius: 75px;
  width: 5px;
    height: 5px;
    cursor: pointer; /* 瘛餃�𣳇�䭾�蹱���脲見撘� */
}
.pointme5_content {
  display: none; 
  
}
.pointme5_content {
  display: none; /* ��嘥�钅黸��� */
  top: -750px;
  z-index: 10;
  width: 600px;
  height: 600px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  border: 4px solid #003444;
  border-radius: 10%;
  background-color: #F3F3F3;
}

.pointme5_content h2{
  color: black;
  font-size: 40px;
    margin: 40px;
}
.pointme5_content img{
  width: 60%;
  height: auto;
}
.pointme5_content span{
  font-size: 10px;
  padding-bottom: 50px;
  position: absolute; /* 蝯訫�滚�帋�� */
  top: 50px;
    right: 341px;
}
/* pointme5 摰� */
/* pointme6 */
.pointme6 {
  position: fixed;
  top: 1010px;
  left: 600px;
  font: italic bold 5em/1 Bodoni, serif;
  color: #555;
  text-align: center;
  animation: fadeIn 1s infinite alternate;
  background-color: rgb(253, 207, 1);
  border: 10px solid rgb(253, 207, 1);
  border-radius: 75px;
  width: 5px;
    height: 5px;
    cursor: pointer; /* 瘛餃�𣳇�䭾�蹱���脲見撘� */
}
.pointme6_content {
  display: none; 
  
}
.pointme6_content {
  display: none; /* ��嘥�钅黸��� */
  top: -750px;
  z-index: 10;
  width: 600px;
  height: 600px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  border: 4px solid #003444;
  border-radius: 10%;
  background-color: #F3F3F3;
}

.pointme6_content h2{
  color: black;
  font-size: 35px;
    margin: 40px;
}
.pointme6_content img{
  width: 60%;
  height: auto;
}
.pointme6_content span{
  font-size: 10px;
  padding-bottom: 50px;
  position: absolute; /* 蝯訫�滚�帋�� */
  top: 50px;
    right: 341px;
}
/* pointme6 摰� */

*{
  margin: 0px;
  padding: 0px;
  font-family: "Noto Sans TC", serif;
}
h2{
  color: #003444;
  font-size: 50px;
}
p{
  font-size: 18px;
  font-weight: 300;
}
a{
  text-decoration: none;
  color: blue;
}
a:hover{
  color: red;
}
.bigwrapper{
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.banner{
  width: 100%;
  height: auto;
  margin-bottom: 50px;
}
.banner img{
  width: 100%;
  height: auto;
}
.sticky-header {
  position: -webkit-sticky; /* �拍鍂�䲰 Safari */
  position: sticky;
  top: 0;
  background-color: white; /* �虾�賂�𡁶Ⅱ靽嘥�銝齿�����峕艶瘛瑕�� */
  z-index: 1000; /* 蝣箔�嘥�雿齿䲰�嗡�硋�批捆銋衤�� */
}
.section{
  text-align: center;
  /* position: relative; */
}
section::after {
  content: '';
  display: block;
  height: 1px;
  visibility: hidden;
}
.section2_1{
  width: 100%;
    height: auto;
  text-align: center;
  position: relative;
  margin-bottom: 100px;
}
section2_1::after {
  content: '';
  display: block;
  height: 1px;
  visibility: hidden;
}
.section2_2 {
  width: 100%;
  height: auto;
  /* position: absolute; */
  top: 1800px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 100px;
  justify-content: space-around;
}
.section4_1 {
  width: 100%;
  height: auto;
  /* position: absolute; */
  top: 1800px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 100px;
  justify-content: space-around;
}
.section3_1{
  text-align: center;
  position: relative;
}
section3_1::after {
  content: '';
  display: block;
  height: 1px;
  visibility: hidden;
}
.section5_1{
  text-align: center;
  position: relative;
}
section5_1::after {
  content: '';
  display: block;
  height: 1px;
  visibility: hidden;
}
.section6_1{
  text-align: center;
  position: relative;
}
section6_1::after {
  content: '';
  display: block;
  height: 1px;
  visibility: hidden;
}
.detailswithbuy h2{
  color: #6D0000;

}
.title_h2{
  margin-bottom: -2rem !important;
    margin-top: -1rem !important;
}
.big0{
  width: 40%;
  height: auto;
  overflow: hidden;
}
.detailswithbuy {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50px;
}
.detailswithbuy table{
  margin: 0 auto;
  width: 100%;
  height: auto;
  border-collapse: collapse;
  text-align: left;
  background: #fff;
    border: unset
}
/* td{
  background-color: #fff;
} */
.detailswithbuy td{
  width: -10%;
}
.detailswithbuy h3{
margin-bottom: 10px;
}
.price{
  color: #003444;
  font-size: 50px;
  font-weight: 800;
  margin-bottom: 20px;
}
.buynow {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 10px;
  width: 350px;
  color: #003444;
  border: #003444 solid 2px;
  border-radius: 16px;
  padding: 0px 20px;
  transition: 1.1s;
}
.buynow:hover {
  background-color: #003444;
  color: white;
}
.buynow_red {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 10px;
  width: 350px;
  color: #6D0000;
  border: #6D0000 solid 2px;
  border-radius: 16px;
  padding: 0px 20px;
  transition: 1.1s;
}
.buynow_red:hover {
  background-color: #6D0000;
  color: white;
}
.buynow_green {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 10px;
  width: 350px;
  color: #516B00;
  border: #516B00 solid 2px;
  border-radius: 16px;
  padding: 0px 20px;
  transition: 1.1s;
}
.buynow_green:hover {
  background-color: #516B00;
  color: white;
}
.buynow_purple {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 10px;
  width: 350px;
  color: #350068;
  border: #350068 solid 2px;
  border-radius: 16px;
  padding: 0px 20px;
  transition: 1.1s;
}
.buynow_purple:hover {
  background-color: #350068;
  color: white;
}
.main_image{
  width: 500px;
  /* height: 400px;
  overflow: hidden;
  margin: 0 auto;
  margin-bottom: 100px; */
}
.main_image img{
  margin-top: 20px;
  width: 100%;
  height: auto;
}
.main_image, .main_image_feature {
  transition: opacity 0.5s ease-in-out;
}

.main_image_feature {
  width: 100%;
  height: auto;
  opacity: 0;
  position: relative;
  /* left: 0; */
}
.pointme1, .pointme2, .pointme3, .pointme4, .pointme5, .pointme6 {
  position: absolute; /* 閮剔蔭�箇�訫�滚�帋�� */
  /* �覔��𡁻�閬�閮剔蔭�琿�𥪯�滨蔭嚗䔶�见�嚗� */
  /* top: 10px;
  left: 10px; */
}
.pointme1 {
  top: 30px;
  left: 50%;
}

.pointme2 {
  top: 290px;
  left: 54%;
}

.pointme3 {
  top: 470px;
  left: 50%;
}

.pointme4 {
  top: 560px;
  left: 44%;
}

.pointme5 {
  top: 860px;
  left: 44%;
}

.pointme6 {
  top: 860px;
  left: 61%;
}
.logo {
  width: 100px;
  height: auto;
  margin: 100px auto 50px;
  text-align: center;
}
.main_footer{
  /* position: relative; */
  width: 100%;
  height: auto;
}
.item_frankie{
  width: 316.667px;
  margin-right: 10px;
}
.spanme{
  font-size: smaller;
    vertical-align: baseline;
}
#myBtn {
  display: block;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 1000;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #ffffff00;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
  transition: 0.7s;
}

#myBtn:hover {
  background-color: #ffffff00;
  transform: scale(1.2);
}

.button {
  border: none;
  color: white;
  width: 228px;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 14px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px dashed #5B3413;
}

.button1:hover {
  background-color: #5B3413;
  color: white;
}


.socialmedia {
  margin-top: 50px;
  width: 100%;
  height: 100px;
}

.socialmedia ul {
  display: flex;
  justify-content: center;
}

.socialmedia li {
  width: 40px;
  list-style: none;
  margin: 0 30px;
  transition: 0.3s;
}

.socialmedia li:hover {
  transform: translatey(-3px);
}

#btn-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  padding: 0px;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}

ol,
ul {
  padding-left: 0rem !important;
}

footer {
  /* background: #ffffff; */
  color: #898989;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  /* margin-bottom: 30px; */
  padding-bottom: 100px;

}
@media (max-width: 1440px){
  .pointme1 {
    top: 30px;      
    left: 49.7%;
  }
  
  .pointme2 {
    top: 290px;
    left: 57%;
  }
  
  .pointme3 {
    top: 470px;
    left: 49.5%;
  }
  
  .pointme4 {
    top: 560px;
    left: 39.5%;
  }
  
  .pointme5 {
    top: 860px;
    left: 39.5%;
  }
  
  .pointme6 {
    top: 860px;
    left: 69%;
  }
}
@media (max-width: 1024px){
  .pointme1 {
    left: 500px;
  }
  .pointme2 {
    top: 290px;
    left: 620px;
}
  .pointme3 {
    top: 460px;
    left: 505px;
}
  .pointme4 {
    top: 550px;
    left: 360px;
}
.pointme5 {
  top: 860px;
  left: 360px;
}
  .pointme6 {
    top: 860px;
    left: 790px;
  }
}
@media (max-width: 1000px){
  .home-demo{
    width: 100%;
  }
  .item h2 {
    font-size: 26px !important;
  }
  .detailswithbuy {
    margin: 20px;
  }
  .big0 {
    width: 100%;
  }
  .buynow {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 10px;
    width: 350px;
    color: #003444;
    border: #003444 solid 2px;
    border-radius: 16px;
    padding: 0px 20px;
    transition: 1.1s;
}
.buynow,.buynow_red,.buynow_green,.buynow_purple {
  font-size: 35px;
  width: 250px;
}
.section2_1, .section3_1, .section4_1, .section5_1, .section6_1 {
  width: 100%;
  height: auto;
}
.pointme1 {
  left: 490px;
}
.pointme2 {
  top: 550px;
  left: 350px;
}
.pointme3 {
  top: 300px;
  left: 630px;
}
.pointme4 {
  top: 480px;
  left: 490px;
}
.pointme5 {
  top: 860px;
  left: 350px;
}
.pointme6 {
  top: 860px;
  left: 790px;
}
}
@media (max-width:768px){
  h2 {
    font-size: 30px !important;
  }
  .pointme1 {
    left: 380px;
}
.pointme2 {
  top: 280px;
        left: 470px;
}
.pointme3 {
  top: 470px;
  left: 378px;
}
.pointme4 {
  top: 557px;
        left: 226px;
}
.pointme5 {
  top: 860px;
        left: 230px;
}
  .pointme6 {
    top: 865px;
    left: 670px;
}
.pointme2_content span {
  font-size: x-small;
  padding-bottom: 50px;
  position: relative;
  top: -16px;
}
}
@media (max-width:480px){
  p {
    margin: 0 30px 30px !important;
}
  .pointme1 {
    left: 230px;
}
.pointme2 {
  top: 210px;
  left: 310px;
}
.pointme3 {
  top: 340px;
  left: 230px;
}
.pointme4 {
  top: 400px;
  left: 126px;
}
.pointme5 {
  top: 600px;
  left: 130px;
}
  .pointme6 {
    top: 600px;
    left: 440px;
}
h2 {
  font-size: 30px !important;
}
h4{
  margin-top: 2rem;
}
.pointme1_content, .pointme2_content, .pointme3_content, .pointme4_content, .pointme5_content, .pointme6_content {

  width: 90%;
  height: auto;
}
.section2_2, .section4_1 {

  flex-direction: column;
}

.slider_icon_blue, .slider_icon_green, .slider_icon_purple {
    width: 10%;
}
#myBtn img{
  width: 50px;
  height: auto;
}
}


@media (max-width:425px){
  .pointme1 {
    left: 200px;
    top: 20px;
}
.pointme2 {
  top: 190px;
  left: 270px;
}
.pointme3 {
  top: 310px;
  left: 209px;
}
.pointme4 {
  top: 360px;
  left: 116px;
}
.pointme5 {
  top: 550px;
  left: 120px;
}
.pointme6 {
  top: 550px;
  left: 390px;
}
.pointme1_content,.pointme2_content,.pointme3_content,.pointme4_content,.pointme5_content,.pointme6_content {
  top: -520px;
}
.pointme1_content img {
  padding-bottom: 30px;
}
.pointme2_content img {
  padding-bottom: 30px;
}
.pointme3_content img {
  padding-bottom: 30px;
}
.pointme4_content img {
  padding-bottom: 30px;
}
.pointme5_content img {
  padding-bottom: 30px;
}
.pointme6_content img {
  padding-bottom: 30px;
}
}

@media (max-width:375px){
  .pointme1 {
    left: 180px;
    top: 10px;
}
.pointme2 {
  top: 170px;
  left: 250px;
}
.pointme3 {
  top: 270px;
  left: 181px;
}
.pointme4 {
  top: 320px;
  left: 100px;
}
.pointme5 {
  top: 480px;
  left: 100px;
}
.pointme6 {
  top: 480px;
  left: 340px;
}
.pointme1_content,.pointme2_content,.pointme3_content,.pointme4_content,.pointme5_content,.pointme6_content {
  top: -480px;
}
.pointme1_content img {
  padding-bottom: 30px;
}
.pointme2_content img {
  padding-bottom: 30px;
}
.pointme3_content img {
  padding-bottom: 30px;
}
.pointme4_content img {
  padding-bottom: 30px;
}
.pointme5_content img {
  padding-bottom: 30px;
}
.pointme6_content img {
  padding-bottom: 30px;
}
}