@charset "UTF-8";
/*思源黑體*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,iframe,button,a{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	letter-spacing: 0.7px;
	vertical-align: baseline;
	text-decoration: none;
	box-sizing: border-box;
	line-height: 100%;
	font-weight: 400;
}

body {color: #ffffff;font: 18px/100% "Noto Sans TC",sans-serif; background-color: #171717; }

html, body { height: 100%; }

a{
	color:#ffffff;
	text-decoration:none;
}
button{	background: none; }

h1, h2, h3, h4, h5, h6{ font-weight: 300; font-size:1rem; }

ol, ul {
	list-style: none;
}

table {width:auto; 	border-collapse: collapse; border-spacing: 0; }

input, button, textarea,select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  outline: none;
}
/*reset end*/

/*Input*/
input[type="text"],
input[type="password"] { width: 100%; min-width: 100px; padding: 10px 10px; height: 40px; line-height: 32px; border: solid 1px #ddd; }

/*select*/
select { width: 100%; min-width: 60px; height: 40px; line-height: 32px; padding: 0 35px 0 10px; vertical-align:middle; color: #434343;
 appearance:none; -moz-appearance:none; -webkit-appearance:none;
 background-image:url(../images/icon_select.png); background-repeat: no-repeat; background-size: auto 12px; background-position: calc(100% - 10px) center; border: solid 1px #ddd;  }
select::-ms-expand { display: none; }

/*checkbox*/
input[type="checkbox"]{ display: none; appearance: none; outline:none; opacity: 0; line-height: 22px; }
input[type="checkbox"] + label { line-height: 32px; cursor: pointer; }
input[type="checkbox"] + label span { display: inline-block; width: 22px; height: 22px;  margin: 0 10px 0 0; padding: 0; vertical-align: middle; cursor: pointer; background: url(../images/icon_check.png) left top no-repeat; background-size: 22px auto;}
input[type="checkbox"]:checked + label span { background: url(../images/icon_check.png) left bottom no-repeat; background-size: 22px auto; }
input[type="checkbox"] + label span.reverse { margin: 0 0 0 10px; }

textarea { width: 100%; min-height: 120px; padding: 10px 10px; border: solid 1px #ddd; overflow-y: auto; resize: none; }

.smallT { font-size: 14px; }
.bigT { font-size: 21px; }
.biggerT { font-size: 24px; }
.biggestT { font-size: 28px; }

.tL{ text-align:left; }
.tR{ text-align:right; }
.tC{ text-align:center; }
.tB{ font-weight:bold; }

.fL{ float:left; }
.fR{ float:right; }

.inline{display: inline-block}
.clr{clear:both;}

.web{ display:block; }
.pad, .mobile{ display:none; }

.tMid{font-size: 16px;}
.tBig { font-size: 18px; }
.tBigger { font-size: 21px; }
.tBigger01 { font-size: 40px; }
.tBigger02 { font-size: 44px; }
.botM0 { margin-bottom: 0; }
.botM { margin-bottom: 15px !important; }
.botM2 { margin-bottom: 30px !important; }

.focus{color: #ffca3c;}
.red { color: #e60012; }
.redlight { color: #ed6a62; }
.orange { color: #ea9214; }
.green { color: #22ac38; }
.blue { color: #3e8abe; }
.gray { color: #818290; }
.tiffany{color: #c09400;}

a.lgtYellow{border-bottom: 1px solid #ffca3c; color: #ffca3c;}
a.lgtYellow:hover{border-color: transparent;}

.bg_blue { background-color: #eff6fa; }
.bg_gray { background-color: #f8f8f8; }

.po-re {position: relative; }

/*-----------------頁面-----------------*/
.wrapper { position: relative; padding-top: 90px; background: linear-gradient(to right,  #4f4651 0%,#686061 100%);}
.pagesize { max-width: 1200px; margin: 0 auto; }
.container{position: relative;}
.contentInner { height: 100%; background: #fff; border-radius: 10px; }
.contentInner .innerBox { padding: 20px; }

/*header*/
.header { width: 100%; height: 90px; padding: 25px 0;position: fixed; top: 0; left: 0; 
background: linear-gradient(to bottom,  #333439 0%,#171717 100%); z-index: 9999;transition: 0.2s;}
.headerIn { display: flex; justify-content: space-between; align-items: center; position: relative;  }
.headerIn .logo a { display: block; width:150px; height:30px; background: url(../images/logo.svg) left center no-repeat; background-size: 100% auto; }
#pageMenu { display: none;}

/*選單*/
.headerNav { display: flex; align-items: center; }
.headerMenu { display: inline-flex; align-items: center; margin-right: 20px; }
.headerMenu > li { padding: 0 10px; font-size: 16px; border-right: solid 1px #999797; }
.headerMenu > li:nth-last-child(1) { padding-right: 0; border-right: 0; }
.headerMenu a{ color: #fff;}
.headerMenu a:hover, .headerMenu a.on{ color: #ffca3c; font-weight: bold;transition-duration: 0.3s}
.headerNav .btn-buy {font-size: 14px; line-height: 22px; color: #333; background-color: #ffca3c; border-radius: 40px; padding: 4px 12px; margin-left: 12px; font-weight: 700; }

/*聯繫icon*/
.contactLink a {display: inline-block;width: 40px;height: 40px;margin-right: 8px;}
.contactLink a:nth-last-child(1) {margin: 0;}
.contactLink a.link01 {background: url(../images/btn_link01_01.png) center no-repeat;background-size: 100%;}
.contactLink a.link02 {background: url(../images/btn_link01_02.png) center no-repeat;background-size: 100%;}
.contactLink a.link03 {background: url(../images/btn_link01_03.png) center no-repeat;background-size: 100%;}
.contactLink a.link04 {background: url(../images/btn_link01_04.png) center no-repeat;background-size: 100%;}
.header .contactLink a {width: 30px;height: 30px;}
.header .contactLink a:hover {opacity: 0.8;}



/*header 捲動*/
.header.sticky { height: 60px; padding:0; }
.header.sticky .headerIn { height: 60px; }
.header.sticky .headerMenu > li { font-size: 18px; }
.header.sticky .patentCode { display: none; }

/*footer*/
.footer { 
  margin: 0;
  padding: 0;
  background: #2A292C;
  border-top: 4px solid #5C556C;
}

.footer .footerIn {
  padding: 36px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  .footer .footerIn {
    padding: 40px 30px 52px 30px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
  }
}

.footer .footerIn .logo_and_nav {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 24px;
}

.footer .footerIn .logo_and_nav .logo-box {
  width: 128px;
  height: 128px;
  border-radius: 24px;
  flex: 0 0 auto;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .footer .footerIn .logo_and_nav .logo-box {
    width: 100px;
    height: 100px;
    border-radius: 18px;
  }
}

.footer .footerIn .logo_and_nav .logo-box img {
  width: 100%;
  height: 100%;
}

.footer .footerIn .logo_and_nav .txt_and_socialMedia {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  .footer .footerIn .logo_and_nav .txt_and_socialMedia {
    justify-content: flex-start;
    gap: 10px;
  }
}

.footer .footerIn .logo_and_nav .txt {
  font-size: 20px;
  line-height: 1.5;
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .footer .footerIn .logo_and_nav .txt {
    font-size: 18px;
  }
}

.footer .footerIn .logo_and_nav .socialMedia {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}

.footer .footerIn .logo_and_nav .link {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
}

.footer .footerIn .logo_and_nav .link img {
  width: 100%;
  height: 100%;
}

/* @media screen and (max-width: 767px) */

.footer .footerIn .downloadQrcode {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
}
@media screen and (max-width: 767px) {
  .footer .footerIn .downloadQrcode {
    width: 100%;
    justify-content: space-between;
  }
}

.footer .footerIn .downloadQrcode .qrcodeBox {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}

.footer .footerIn .downloadQrcode .imgBox {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .footer .footerIn .downloadQrcode .imgBox {
    width: 120px;
    height: 120px;
  }
}

.footer .footerIn .downloadQrcode .imgBox img {
  width: 100%;
  height: auto;
}

.footer .footerIn .downloadQrcode .txt {
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

.footer .copyright {
  background-color: #191919;
  padding: 28px 0;
  text-align: center;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .footer .copyright p {
    font-size: 18px;
    line-height: 1.5;
  }
}


/*swiper*/
.swiper-button-prev ,
.swiper-button-next { outline: none; }

/*popup*/
/* .area_popup { } */
.popup_bg { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 10000; background: rgba(0, 0, 0, 0.5); }
.popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 30px)); width: calc(100% - 20px); max-width: 720px; z-index: 10001;  }
.popup_close { display: block; width: 21px; height: 21px; margin: 0 0 10px auto; background: url(../images/btn_popup_close.png) center no-repeat; }
.popup_box { width: 100%; padding: 60px 40px 40px; background: #fff; border-radius: 10px; }
/*聯絡*/
.formbox { display: flex; margin-bottom: 20px; font-weight: 400; }
.formbox > p { flex: 1 0 5em; margin-right: 20px; line-height: 40px; font-size: 21px; }
.formbox .formInner { flex: 1 1 100%; }
/*按鈕*/
.btnMain { text-align: center; }
.btnMain a { display: inline-block; width: 100%; max-width: 300px; line-height: 48px; font-size: 21px; text-align: center; color: #fff; background: #448aca; }


/*分享*/
/* .reviewBox {  } */
.reviewImg { margin-bottom: 16px; }
.reviewImg img { max-width: 100%; }
.reviewBox h4 { margin-bottom: 20px; font-size: 21px; font-weight: 400; }
.reviewBox p { font-size: 18px; line-height: 1.2em; }


@media screen and (max-width: 1220px) {
	.pagesize { padding: 0 20px; }
	.header .patentCode { right: 20px; }
	.headerMenu > li { padding: 0 6px; }
}

@media screen and (max-width: 1100px) {
	.headerIn .logo { flex: 0 1 180px; margin-right: 20px; }
	.headerIn .logo a { width: 100%; }

	.headerNav { flex: 1 0 auto; justify-content: flex-end; }
	.headerMenu { margin-right: 10px; }
	.headerMenu > li { line-height: 17px; }
	.headerMenu a { display: block; vertical-align: baseline; font-size: 17px; }

	.footer_app .pagesize { flex-wrap: wrap; justify-content: center;}

}

@media screen and (max-width: 1024px) {
	.pad-none{display: none;}
	.pad{ display:block; }
	.headerMenu a { font-size: 15px; }
}

@media screen and (max-width: 800px) {
	.web{ display:none; }
	.pad{ display:none; }
	.mobile{ display:block; }

	body { font-size: 16px; }

	.wrapper { padding-top: 60px; }
	.pagesize { padding: 0 10px; }

	/* page */
	.wrapper { border-top: 0;}

	.bigT { font-size: 18px; }
	.biggerT { font-size: 21px; }
	.biggestT { font-size: 24px; }

	/* header */
	.header { height: 60px; position: fixed; top: 0; left: 0; padding: 0 0 0 10px;  display: flex; justify-content: space-between; align-items: center;  border-bottom: 0; z-index: 1000; transition: 0.2s;  }
	.header .logo a { display: block; width: 120px; height: 24px; background: url(../images/logo.svg) center no-repeat; background-size: contain; }
	.headerNav{display: none;}
	.header .btnNav{ display: block; width: 60px; height: 60px; }
  .header .btnNav a { display: block; width: 60px; height: 60px; background: url(../images/btn_mmenu_01.png) center no-repeat; background-size: auto 20px; }
  .header.mobile .btn-buy { font-size: 14px; line-height: 22px; color: #333; background-color: #ffca3c; border-radius: 40px; padding: 4px 12px; margin-right: 60px; font-weight: 700; }
	/*popup*/
	.popup_box { padding: 20px; }
	/*聯絡*/
	.formbox { display: block; }
	.formbox > p { font-size: 18px; }
	.formbox .formInner { flex: 1 1 100%; }
	/*按鈕*/
	.btnMain a { font-size: 18px; }




/* --------------------------------------- */
/*#pageMenu */
/* --------------------------------------- */
#pageMenu .hasSub button, .pageMenu-btn .line, #pageMenu, .page {
  transition: 0.2s;
}
.page {
  width: 100vw;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
}
.page_cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: -2;
}
.openmenu {
  position: fixed;
}
.page.openmenu .page_cover {
  z-index: 1001;
}




/* --------------------------------------- */
/* menu */
/* --------------------------------------- */
#pageMenu {
  position: fixed;
  z-index: 9999;
  width: 280px; 
  min-height: 100vh; box-sizing: border-box;
  /*height: 100vh;*/
  background: #171717;
  padding: 20px; display: block;
}

/* menu_清單 */
#pageMenu ul {
  list-style: none;
}

#pageMenu ul a {
  display: block;
  height: 50px;
  line-height: 50px;
  border-bottom: solid 1px #666;
  color: inherit;
  text-decoration: none;
}

#pageMenu ul a.color-focus {
  color: #ffca3c;
}

/* menu_按鈕 */
.pageMenu-btn {
  display: block;
  position: absolute;
 right: 15px;
  top: 15px;
  width: 30px;
  height: 30px;
  background-size: 24px;
  outline: none;
  border: none;
}

.pageMenu-btn .line {
  display: block;
  position: absolute;
  left: 4px;
  width: 20px;
  height: 2px;
  background-color: #ffca3c;
  border-radius: 2px;
}

.pageMenu-btn .line01 {
  top: 7px;
}

.pageMenu-btn .line02 {
  top: 14px;
}

.pageMenu-btn .line03 {
  top: 21px;
}

/* menu_按鈕_展開 */
.openmenu .pageMenu-btn .line01 {
  width: 24px;
  top: 14px;
  left: 2px;
  transform: rotate(-45deg);
}

.openmenu .pageMenu-btn .line02 {
  display: none;
}

.openmenu .pageMenu-btn .line03 {
  width: 24px;
  top: 14px;
  left: 2px;
  transform: rotate(45deg);
}

/* --------------------------------------- */
.show-left.openmenu {
  transform: translateX(280px);
}

.show-left ~ #pageMenu {
  top: 0;
  left: -280px;
}

.show-left.openmenu ~ #pageMenu {
  left: 0;
}

.show-right.openmenu {
  transform: translateX(-280px);
}

.show-right ~ #pageMenu {
  left: auto;
  right: -280px;
}

.show-right.openmenu ~ #pageMenu {
  right: 0;
}

.show-up ~ #pageMenu {
  top: -100%;
  left: 0;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.show-up.openmenu ~ #pageMenu {
  top: 0;
}

.show-up.openmenu {
  transform: translateX(0);
}

/* --------------------------------------- */

#pageMenu .hasSub {
  position: relative;
}
#pageMenu .hasSub button {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background: url(../images/arrow.svg) center center no-repeat;
  background-size: auto 32px;
  cursor: pointer;
  outline: none;
  border: none;
}
#pageMenu .hasSub.open > button {
  transform: scaleY(-1);
}

}