/*載入思源黑體*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');

body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans TC', sans-serif, arial,"微軟正黑體","蘋果儷黑體", Verdana, Helvetica;
  font-size: 16px;
  background-color: #f4f1ea;
  background-size: contain;
  animation-name: ani-circle;
  animation-duration: 3s;
  animation-iteration-count: infinite; 
  animation-direction: alternate; 
}

@keyframes ani-circle {
  0%   {background-position: center 0px;}
  100% {background-position: center 100px;}
}

img {
    vertical-align: bottom;
    max-width: 100%;
    width: auto;
    height: auto;
    border: 0;
}
.gb1{
  top: 0px;
  left: -300px;
}
.gb2{
  top: 1200px;
  left: -300px;
}
.gb3{
  top: 2400px;
  left: -300px;
}
.gb4{
  top: 3600px;
  left: -300px;
}
.gb5{
  top: 4800px;
  left: -300px;
}
.gb6{
  top: 6000px;
  left: -300px;
}
.gb7{
  top: 7200px;
  left: -300px;
}
.gb8{
  top: 8400px;
  left: -300px;
}
.gb9{
  top: 9600px;
  left: -300px;
}

.r_gb1{
  top: 600px;
  right: -200px;
}
.r_gb2{
  top: 1800px;
  right: -200px;
}
.r_gb3{
  top: 3000px;
  right: -200px;
}
.r_gb4{
  top: 4200px;
  right: -200px;
}
.r_gb5{
  top: 5400px;
  right: -200px;
}
.r_gb6{
  top: 6600px;
  right: -200px;
}
.r_gb7{
  top: 7800px;
  right: -200px;
}
.r_gb8{
  top: 9000px;
  right: -200px;
}
.r_gb9{
  top: 10200px;
  right: -200px;
}

.gear_box{
  position: absolute;
}
.gear_box .gear1{
  width: 200px;
  animation-name: an-rotate; /*動畫名稱*/
  animation-duration: 10s; /*一次完整動畫時間為4秒*/
  animation-iteration-count: infinite; /*播放次數為無限次*/
  animation-timing-function: linear;
}
.gear_box .gear2{
  width: 150px;
  animation-name: an-rotate2; /*動畫名稱*/
  animation-duration: 10s; /*一次完整動畫時間為4秒*/
  animation-iteration-count: infinite; /*播放次數為無限次*/
  animation-timing-function: linear;
  position: absolute;
  left: 145px;
  top: 110px;
}
@keyframes an-rotate {
  0%   {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}
@keyframes an-rotate2 {
  0%   {transform:rotate(0deg);}
  100% {transform:rotate(-360deg);}
}

.box {
  background-color: hsla(0,0%,0%,0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 5;
  display: none;
}
.box_2 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; 
  justify-content: center;
}
.box .box_w {
  background-color: #FFFFFF;
  padding: 25px;
  color: #1A1A1A;
  line-height: 24px;
  border-radius: 10px;
  border: 5px solid #006CFF;
  -webkit-box-shadow: 0px 0px 5px hsla(0,0%,0%,0.3);
  box-shadow: 0px 0px 5px hsla(0,0%,0%,0.3);
  text-align: center;
  display: none;
  min-width: 270px;
}
.box .title{
  color: #004aaf;
  font-size: 24px;
  font-weight: bold;
  padding-bottom: 10px;
}
.box img{
  width: 180px;  
}

.left_box{
  position: fixed;
  right: 0px;
  bottom: 5px;
  z-index: 2;
}
.left_box div{
  background-color: #FFFFFF;
  width: 70px;
  height: 70px;
  margin: 15px;
  border-radius: 10px;
  text-align: center;
  color: #7f642b;
  font-weight: bold;
  padding: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.5s ease 0s;
  font-size: 15px;
  -webkit-box-shadow: 0px 0px 5px hsla(30,100%,7%,0.50);
  box-shadow: 0px 0px 5px hsla(30,100%,7%,0.50);
}
.left_box div:hover{
  transform: translateY(-10px);
}
.left_box div a{
  color: #7f642b;
  text-decoration: none;
}

.left_box .sale img{
  width: 40px;  
}
.left_box .top img{
  width: 30px;  
}
.left_box .i_dm img{
  width: 40px;  
}
.left_box .i_open img{
  width: 40px;  
}
.left_box .i_trust img{
  width: 40px;  
}

/* 手機選單icon */
.m_menu_icon {
  width: 40px;
  height: 29px;
  background-size: 35px 25px;
  background-image: url(../images/mobile/menu_ban.svg);
  background-repeat: no-repeat;
  cursor: pointer;
  background-position: center center;
  display: none;
  margin-right: 10px;
}
.m_menu_w {
  width: 100%;
  height: 100%;
  padding-top: 50px;
  overflow-y: auto;
  background-color: hsla(0,0%,100%,0.9);
  backdrop-filter: blur(5px);
  position: fixed;
  z-index: 3;
  display: none;
}
.m_menu_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.m_menu_box .down{
  height: 200px;  
}

.m_menu_nav a{
  font-size: 20px;
  text-decoration: none;
  display: block;
  text-align: center;
  color: #65521b;
  margin-top: 40px;
  margin-bottom: 40px;
  font-weight: bold;
}
.header{
  position: fixed;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0.1);
  z-index: 4;
}
.header_w{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  max-width: 1300px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.header_w img{
  width: 160px;
  padding-left: 20px;
}
.banner{
  text-align: center;
  padding-top: 70px;
}
.banner img{
  width: 100%;  
}
.banner_m{
  text-align: center;
  display: none;
}
.banner_m img{
  width: 100%;  
}
.menu{
  display: flex;
  align-items: center; 
  justify-content: center;
}
.menu a{
  text-decoration: none;
  color: #7f642b;
  font-size: 19px;
  font-weight: bold;
  display: block;
  padding-left: 15px;
  padding-right: 15px;
  transition: all 0.5s ease 0s;
  cursor: pointer;
}
.menu a:hover{
  color: #38637d;
}
.footer{
  background-color: #0e2731;
  background-image: url(../images/pc/bg.svg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}
.footer .warning{
  background-color: #ae964d;
  color: #FFFFFF;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  padding: 10px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .41);
}
.footer .warning_box{
  color: #FFFFFF;
  font-weight: bold;
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
  line-height: 32px;
  padding-top: 40px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 140px;
}
.footer .warning_box span{
  color: #ffb300;
}
.footer .warning_box a{
  color: #00fff5;
}
.us{
  text-align: center;
  margin-top: 50px;
}
.download{
  margin-top: 50px;
}
.download a{
  background-color: #ae964d;
  color: #FFFFFF;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 40px;
  padding-right: 80px;
  margin: 10px;
  border-radius: 20px;
  box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0.3);
  transition: all 0.5s ease 0s;
  background-repeat: no-repeat;
  background-position: right 40px center;
  background-size: 25px auto;
  display: inline-block;
}
.download a:hover{
  background-color: #8e2aa0;
}
.dow{
  background-image: url(../images/pc/icon/icon-download.svg);
}
.link{
  background-image: url(../images/pc/icon/link.svg);
}
.align_items{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 60px;
  margin-bottom: 60px;
}
.align_items .logo{
  width: 130px;  
}
.align_items .logo_mega{
  width: 130px;  
}
.align_items .logo2{
  width: 130px;  
}
.col-xl{
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 10px;
}
.section-info{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #393939;
}
.section-info-content{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  margin-left: 10px;
  font-weight: bold;
}
.section-info-content a{
  color: #7f642b;
  text-decoration: none;
}
.section-info-content b{
  padding-right: 10px;  
}

.section-info-content-2{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  margin-left: 10px;
  font-weight: bold;
}
.section-info-content-2 a{
  color: #8e2aa0;
  text-decoration: none;
}

.main{
  max-width: 1011px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.box_c{
  margin-top: 60px;  
}
.box_c .title{
  background-image: url(../images/pc/title.png);
  background-repeat: no-repeat;
  background-position: left center;
  color: #FFFFFF;
  font-size: 34px;
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 40px;
  padding-left: 110px;
  background-size: auto 99px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  margin-bottom: 20px;
}
.box_c .title span{
  color: #ffde00;  
}
.box_c .title2{
  color: #333333;
  font-size: 26px;
  font-weight: bold;
  margin-left: 50px;
  padding: 20px;
  text-align: left;
}
.box_c .title2 span{
  color: #00a0d8;
}
.box_c .title3{
  background-image: url(../images/pc/icon/t1.svg);
  background-size: 35px auto;
  background-repeat: no-repeat;
  background-position: left 30px;
  color: #333333;
  font-size: 22px;
  font-weight: bold;
  margin-left: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 50px;
  padding-right: 10px;
  text-align: left;
}
.box_c .title4{
  background-image: url(../images/pc/title2.png);
  background-repeat: no-repeat;
  background-position: left center;
  color: #FFFFFF;
  font-size: 28px;
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 50px;
  background-size: auto 70px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  margin-bottom: 20px;
}
.box_c .com{
  text-align: center;
}
.box_c .com_2{
  display: flex;
  align-items: center; 
  justify-content: center;
}
.box_c .remark{
  padding: 20px;
  text-align: justify;
}
.box_c .remark strong{
  color: #ff7e00;  
}
.soon{
  color: #707070;
  font-size: 36px;
  font-weight: bold;
  padding: 60px;
}
.yt{
  width: 90%;
  height: 500px;
}
.f_box{
  color: #313131;
  font-size: 18px;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  background-color: #EBEBEB;
}
.box_pop{
  background-color: hsl(32.49deg 30.63% 48.47% / 60%);
  position: fixed;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  padding: 10px;
}
.box_pop .box_com{
  max-width: 1000px;
  height: 450px;
  background-color: #FFFFFF;
  padding-top: 20px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 40px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px hsla(0,0%,0%,0.40);
  box-shadow: 0px 0px 10px hsla(0,0%,0%,0.40);
}
.box_pop .title{
  color: #773026;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
}
.box_pop .com{
  height: 350px;
  overflow-y: scroll;
  padding: 20px;
  color: #333333;
  font-size: 15px;
}
.box_pop .com span{
  color: #9e300d;
}
.box_pop .com a{
  color: #9e300d;
}
.box_pop .box_close{
  text-align: center;
}
.box_pop .close{
  color: #FFFFFF;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  background-color: #560001;
  border-radius: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 10px;
  line-height: 30px;
  cursor: pointer;
}
.box_pop .close:hover{
  background-color: #38637d;
}

.pc_show{
  display: block;
}
.m_show{
  display: none;
}
@media screen and (min-width: 1065px) and (max-width: 1640px) {
body {
  background-image: url(../images/pc/bg_2.svg);
}
.gear_box {
  display: none;
}

}

@media screen and (min-width: 768px) and (max-width: 1065px) {
.m_menu_icon {
  display: block;
}
.menu {
  display: none;  
}
.yt{
  height: 400px;
}
.box_pop{
  width: auto;  
}
.gear_box {
  display: none;
}

}

@media screen and (max-width: 768px) {
.m_menu_icon {
  display: block;
}
.menu {
  display: none;  
}
.header_w img {
  width: 130px;
  padding-left: 10px;
}
.banner {
  padding-top: 55px;
  display: none;
}
.banner_m{
  padding-top: 55px;
  display: block;
}
.left_box div {
  width: 50px;
  height: 50px;
  margin: 10px;
  font-size: 12px;
}
.left_box .sale img {
    width: 30px;
}
.left_box .top img {
    width: 20px;
}
.download{
  display: flex;
  align-items: center; 
  justify-content: center;
  flex-direction: column;
}
.download a{
  width: 190px;  
}
.us {
  margin-top: 20px;
}
.align_items {
  margin-top: 40px;
  margin-bottom: 40px;
  flex-direction: column;
  align-items: flex-start;
}
.section-info-content {
  flex-direction: row;
}
.section-info img{
  width: 30px;  
}
.main {
  padding-top: 20px;
}
.box_c .title {
  font-size: 20px;
  background-image: url(), -webkit-linear-gradient(0deg,rgba(174,150,77,1.00) 0%,rgba(119,48,41,1.00) 81.35%,rgba(56,99,125,1.00) 100%);
  background-image: url(), -moz-linear-gradient(0deg,rgba(174,150,77,1.00) 0%,rgba(119,48,41,1.00) 81.35%,rgba(56,99,125,1.00) 100%);
  background-image: url(), -o-linear-gradient(0deg,rgba(174,150,77,1.00) 0%,rgba(119,48,41,1.00) 81.35%,rgba(56,99,125,1.00) 100%);
  background-image: url(), linear-gradient(90deg,rgba(174,150,77,1.00) 0%,rgba(119,48,41,1.00) 81.35%,rgba(56,99,125,1.00) 100%);
  text-align: center;
  padding: 10px;
  margin: 10px;
}
.box_c .title2{
  font-size: 18px;
  margin-left: 0px;
}
.box_c .com_2 {
  display: block;
}
.box_c .title3 {
  background-size: 25px auto;
  background-position: left 30px;
  font-size: 18px;
  margin-left: 15px;
  padding-left: 30px;
}
.box_c .title4{
  background-image: url();
  font-size: 20px;
  padding: 10px;
  margin: 20px;
  background-color: #3c93b8;
  text-align: center;
}
.box_c {
  margin-top: 20px;
}
.left_box .i_open img {
    width: 30px;
}
.left_box .i_trust img {
    width: 30px;
}
.left_box .i_dm img {
    width: 30px;
}
.yt{
  height: 250px;
}  
.box_pop{
  width: auto;  
}
.gear_box {
  display: none;
}
.pc_show{
  display: none;
}
.m_show{
  display: block; 
}
  

}