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

body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans TC', sans-serif, arial,"微軟正黑體","蘋果儷黑體", Verdana, Helvetica;
  font-size: 16px;
  background-color: #FFFCF6;
  background-size: 2000px auto;
  overflow-x: hidden; /* 防止滿版背景色塊在某些瀏覽器產生水平滾動條 */
}
img {
    vertical-align: bottom;
    max-width: 100%;
    width: auto;
    height: auto;
    border: 0;
}
.wrapper{
  background-color: #fdf6ef;  
}
.box_pop{
  background-color: hsl(32.49deg 30.63% 48.47% / 60%);
  position: fixed;
  z-index: 20;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  padding: 10px;
  display: flex;
  
}
.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: #640000;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 5px;
}
.box_pop .com{
  height: 350px;
  overflow-y: scroll;
  padding: 20px;
  color: #333333;
  font-size: 15px;
}
.box_pop .com span{
  color: #003eb3;
  font-weight: bold;
}
.box_pop .com strong{
  color: #ad0000;
}
.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: #ae5f00;
  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: #cd1a00;
}
.box {
  background-color: hsla(0,0%,0%,0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 11;
  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: 34px;
  border-radius: 10px;
  border: 10px solid #AE964D;
  text-align: center;
  display: none;
  min-width: 270px;
  font-size: 18px;
}
.box .title{
  color: #A25E2A;
  font-size: 26px;
  font-weight: bold;
  padding-bottom: 10px;
}
.box img{
  width: 180px;  
}
.font_weight{
  font-weight: 900 !important;
}
.font_size{
  font-size: 12px;
}
.left_box{
  position: fixed;
  right: 0px;
  bottom: 5px;
  z-index: 10;
}
.left_box div{
  background-color: #FFFFFF;
  width: 70px;
  height: 70px;
  margin: 15px;
  border-radius: 10px;
  text-align: center;
  color: #a25e2a;
  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: #a25e2a;
  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: 9;
  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;
  margin-top: 40px;
  margin-bottom: 40px;
  font-weight: bold;
  color: #393939;
  font-size: 19px;
  font-weight: 900;
  font-family: 'Noto Serif TC', serif;
}
.header{
  position: fixed;
  width: 100%;
  background-color: hsla(0,0%,100%,0.85);
  box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0.1);
  z-index: 10;
  backdrop-filter: blur(10px);
}
.header_w{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  max-width: 2000px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.header_w img{
  width: 160px;
  padding-left: 20px;
}
.banner{
  text-align: center;
  padding-top: 70px;
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
}
.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: #393939;
  font-size: 19px;
  font-weight: 900;
  font-family: 'Noto Serif TC', serif;
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  transition: all 0.5s ease 0s;
  cursor: pointer;
  text-align: center;
}
.menu a:hover{
  color: #976425;
}
.footer{
  background-color: #e8e8e8;
}
.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: #595959;
  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: 80px;
  text-align: justify;
}
.footer .warning_box strong{
  color: #bf700e;
}
.footer .warning_box span{
  color: #219bff;
  font-weight: bold;
}
.footer .url_box{
  text-align: left;
  font-size: 12px;
}
.footer .warning_box a{
  color: #640000;
}
.us{
  text-align: center;
  margin-top: 100px;
  margin-bottom: 100px;
}
.download{
  margin-top: 50px;
}
.download a{
  background-color: rgb(177 129 67);
  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: #783f34;
}
.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: #640000;
  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{
  position: relative;
}

.remark_a1{
  padding-right: 110px;  
}
.remark_a2{
  min-height: 130px;
}
.remark_a3{
  min-height: 170px;
}
.remark_a4{
  min-height: 170px;
}

.title_a2{
  padding-right: 80px;
  text-align: right;
}
.title_a3{
  text-align: left;
  padding-left: 80px;
}
.title_a4{
  text-align: left;
  padding-left: 80px;
}
.but_a2{
  padding-right: 130px;
  display: flex;
  justify-content: flex-end;
}

.box_c.a1{
  padding-top: 100px;
  padding-bottom: 90px;
  background-image: url(../images/pc/bg/bg1.jpg);
  background-repeat: no-repeat;
  background-position: center top;
}
.box_c.a2{
  margin-top: -340px;
  margin-bottom: -385px;
  padding-top: 450px;
  padding-bottom: 100px;
  background-image: url(../images/pc/bg/bg2.png);
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 5;
  position: relative;
}
.box_c.a3{
  padding-top: 340px;
  background-image: url(../images/pc/bg/bg3.png);
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 4;
  position: relative;
}
.box_c.a4{
  margin-top: -340px;
  padding-top: 360px;
  padding-bottom: 60px;
  background-image: url(../images/pc/bg/bg4.png);
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 3;
  position: relative;
}
.box_c.a5{
  margin-top: -340px;
  padding-top: 360px;
  padding-bottom: 10px;
  background-image: url(../images/pc/bg/bg5.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  position: relative;
}

.box_c .frame{
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}
.box_c .swiper-slide-active .slide-inner{
  background-image: -webkit-linear-gradient(147deg,rgba(249,243,236,1.00) 0%,rgba(254,251,245,1.00) 100%);
  background-image: -moz-linear-gradient(147deg,rgba(249,243,236,1.00) 0%,rgba(254,251,245,1.00) 100%);
  background-image: -o-linear-gradient(147deg,rgba(249,243,236,1.00) 0%,rgba(254,251,245,1.00) 100%);
  background-image: linear-gradient(303deg,rgba(249,243,236,1.00) 0%,rgba(254,251,245,1.00) 100%);
  border-radius: 30px;
  -webkit-box-shadow: 0px 0px 20px hsla(32,100%,24%,0.58);
  box-shadow: 0px 0px 20px hsla(32,100%,24%,0.58);
  overflow: hidden;
  padding: 20px;
}
.box_c .title{
  font-size: 40px;
}
.box_c .title2{
  font-size: 28px;
  font-weight: 900;
  text-align: left;
  color: #D38300;
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}
.box_c .title2 span {
  font-size: 32px;
  color: #464646;
}
.box_c .com{
  max-width: 1290px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.box_c .com2{
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}

.box_c .but{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 0px;
  margin-left: 0px;
  padding: 0px;
}
.box_c .but li{
  list-style-type: none;
  color: #854626;
  font-size: 26px;
  font-weight: bold;
  font-weight: 700;
  background-image: -webkit-linear-gradient(270deg,rgba(252,250,246,1.00) 0%,rgba(248,238,227,1.00) 100%);
  background-image: -moz-linear-gradient(270deg,rgba(252,250,246,1.00) 0%,rgba(248,238,227,1.00) 100%);
  background-image: -o-linear-gradient(270deg,rgba(252,250,246,1.00) 0%,rgba(248,238,227,1.00) 100%);
  background-image: linear-gradient(180deg,rgba(252,250,246,1.00) 0%,rgba(248,238,227,1.00) 100%);
  -webkit-box-shadow: 0px 0px 6px hsla(32,100%,24%,0.58);
  box-shadow: 0px 0px 6px hsla(32,100%,24%,0.58);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 30px;
}

.box_c .remark{
  padding: 20px;
  text-align: justify;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  font-size: 14px;
  line-height: 25px;
}
.box_c .remark span{
  font-size: 11px;
  font-weight: normal;
}
.box_c .remark strong{
  color: #bf2000;
}
.f_box{
  color: #313131;
  font-size: 18px;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  background-color: #FFFFFF;
}
.img_shadow {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.pc_show{
  display: inline-block;
}
.m_show{
  display: none;
}
/* Swiper 自定義箭頭 */
.swiper-container {
  position: relative;
  overflow: visible;
}
.swiper-container .arr-left,
.swiper-container .arr-right {
  position: absolute;
  top: 320px;
  transform: translateY(-50%);
  z-index: 10;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 45px;
  height: 45px;
  cursor: pointer;
}
.swiper-container .arr-left {
  background-image: url(../images/pc/arr-left.svg);
  left: 0px;
}
.swiper-container .arr-right {
  background-image: url(../images/pc/arr-right.svg);
  right: 0px;
}
.swiper-container .arr-left::after,
.swiper-container .arr-right::after {
  display: none;
}

/* Tab 按鈕 active 樣式 */
.box_c .but li {
  cursor: pointer;
  transition: all 0.3s ease;
}
.box_c .but li.active {
  background-image: -webkit-linear-gradient(270deg,rgba(232,166,73,1.00) 0.52%,rgba(170,105,25,1.00) 100%);
  background-image: -moz-linear-gradient(270deg,rgba(232,166,73,1.00) 0.52%,rgba(170,105,25,1.00) 100%);
  background-image: -o-linear-gradient(270deg,rgba(232,166,73,1.00) 0.52%,rgba(170,105,25,1.00) 100%);
  background-image: linear-gradient(180deg,rgba(232,166,73,1.00) 0.52%,rgba(170,105,25,1.00) 100%);
  color: #FFFFFF;
}

@media screen and (min-width: 1065px) and (max-width: 1640px) {
.gear_box {
  display: none;
}

}

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

}

@media screen and (max-width: 800px) {
.menu {
  display: none;  
}
.m_menu_icon {
  display: block;
}

}

@media screen and (max-width: 768px) {
.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: 45px;
  height: 45px;
  margin: 6px;
  font-size: 11px;
}
.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: 0px;
  margin-bottom: 0px;
  padding-bottom: 40px;
}
.align_items {
  margin-top: 40px;
  margin-bottom: 0px;
  flex-direction: column;
  align-items: flex-start;
}
.section-info-content {
  flex-direction: row;
}
.section-info img{
  width: 30px;  
}
.box_c {
  padding-top: 80px;
}
.left_box .i_open img {
    width: 25px;
}
.left_box .i_trust img {
    width: 25px;
}
.left_box .i_dm img {
    width: 25px;
}
.yt{
  height: 250px;
}  
.box_pop{
  width: auto;  
}
.gear_box {
  display: none;
}
.pc_show{
  display: none;
}
.m_show{
  display: block; 
}
.f_box {
  font-size: 16px;
}
.box_pop .com {
  padding: 15px;
}
.box_pop .box_com {
  padding-right: 10px;
  padding-left: 10px;
}
.footer .warning_box{
  text-align: left;
}
.box_c .but li {
  font-size: 17px;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 8px;
  border-radius: 10px;
}
.box_c .but {
  flex-wrap: wrap;
}
.but_a2 {
  padding-right: 0px;
  display: flex;
  justify-content: center;
}
.remark_a1 {
    padding-right: 0px;
}
.box_c .but {
  margin-top: 0px;
  margin-bottom: 0px;
}
.box_c .remark {
  padding: 15px;
  font-size: 13px;
  line-height: 20px;
}
.box_c .swiper-slide-active .slide-inner {
  border-radius: 15px;
  padding: 15px;
}
.title_a2 {
  padding-right: 0px;
  text-align: center;
}
.title_a3 {
  padding-left: 0px;
  text-align: center;
}
.title_a4 {
  padding-left: 0px;
  text-align: center;
}

.swiper-container .arr-left, .swiper-container .arr-right {
  top: 300px;
  width: 30px;
  height: 30px;
}
.remark_a3 {
    min-height: auto;
}
.remark_a4 {
    min-height: auto;
}
.box_c.a1 {
  padding-top: 30px;
  padding-bottom: 20px;
  background-image: url(../images/mobile/bg/bg1.jpg);
  background-position: center top;
  background-size: cover;
}
.box_c.a2 {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 40px;
  padding-bottom: 0px;
  background-image: url(../images/mobile/bg/bg2.jpg);
  background-size: cover;
}
.box_c.a3 {
  padding-top: 30px;
  background-image: url(../images/mobile/bg/bg3.jpg);
  background-size: cover;
}
.box_c.a4 {
  padding-top: 30px;
  margin-top: 0px;
  padding-bottom: 0px;
  background-image: url(../images/mobile/bg/bg4.jpg);
  background-size: cover;
}
.box_c.a5 {
  margin-top: 0px;
  padding-top: 30px;
  padding-bottom: 0px;
  background-image: url(../images/mobile/bg/bg5.jpg);
  background-size: cover;
}
.box_c .title2 {
    font-size: 24px;
    font-weight: 700;
    margin-top: 20px;
}
.box_c .title2 span {
    font-size: 26px;
}
.swiper-container-fade .swiper-wrapper {
  height: auto !important;
}
.swiper-container-fade .swiper-slide {
  height: auto !important;
}
.swiper-container .arr-right {
  right: 5px;
}
.swiper-container .arr-left {
  left: 5px;
}
  

}