@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: #1b1b1b;
	/*background:#f4fcff;*/
	font: 18px/100% "Noto Sans TC",sans-serif;
}

html, body { height: 100%; }

a{
	color:#1b1b1b;
	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; }

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

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

/*-----------------頁面-----------------*/
.wrapper { height: 100vh; min-height: 100vh; position: relative; padding-top: 90px; }
.pagesize { max-width: 1200px; margin: 0 auto; }
.container.container02 { padding: 20px 0 40px; background: #f6f6f6; }
.contentInner { height: 100%; background: #fff; border-radius: 10px; }
.contentInner .innerBox { padding: 20px; }

/*header*/
.header { width: 100%; height: 90px; padding: 20px 0;position: fixed; top: 0; left: 0; background-color: #fff;z-index: 9999;transition: 0.2s;
}
.headerIn { display: flex; justify-content: space-between; align-items: center; position: relative; height: 90x; }
.headerIn .logo a { display: block; width: 208px; height: 50px; background: url(../images/logo.png) left center no-repeat; background-size: 100% auto; }
/*選單*/
.headerNav { display: flex; align-items: center; }
.headerMenu { display: inline-flex; align-items: center; margin-right: 20px; }
.headerMenu > li { padding: 0 10px; font-size: 20px; border-right: solid 1px #bababa; }
.headerMenu > li:nth-last-child(1) { padding-right: 0; border-right: 0; }
.headerMenu a{ color: #666666;}
.headerMenu a:hover, .headerMenu a.on{ font-weight: bold;transition-duration: 0.3s}

/*專利號*/
.header .patentCode { position: absolute; bottom: 6px; right: 0; font-size: 12px; color: #787878; }
/*header 捲動*/
.header.sticky { height: 60px; padding:0; }
.header.sticky .headerIn { height: 60px; }
.header.sticky .headerIn .logo a { width: 140px; height: 30px; }
.header.sticky .headerMenu > li { font-size: 18px; }
.header.sticky .patentCode { display: none; }

/*footer*/
.footer { margin: 0; padding: 0; background: #fffef9; }
.footer_app { border-top: solid 4px #ffe895; }
.footer_app .pagesize { display: flex; justify-content: space-between; align-items: center; padding: 50px 0; }
.footer_app img { max-width: 100%; height: auto; }
.footer .copyright { padding: 20px 10px; text-align: center; font-size: 15px; color: #292000; background: #ffc501; }
.footer .copyright .patentCode { margin-bottom: 10px; font-size: 13px; }

/*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; }

#pageMenu{display: none;}

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

@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 10px;  border-bottom: 0; z-index: 1000; transition: 0.2s; border-bottom: solid 1px #e5e5e5; }
	.header .logo a { display: block; width: 150px; height: 60px; background: url(../images/logo.png) center no-repeat; background-size: auto 30px; }


	/* footer */
	.footer { border-top: solid 1px #e5e5e5; }
	/*下載*/
	.footer_app02 { text-align: center; padding: 20px 0 0; }
	.footer_app02 .title { margin-bottom: 20px; font-size: 30px; font-weight: bold; color: #c09400; }
	.footer_app02 .desc { margin-bottom: 20px; font-size: 18px; color: #1b1b1b; }
	.footer_app02_link { display: flex; }
	.footer_app02_link a { flex: 1 1 auto; height: 48px; }
	.footer_app02_link .link01 { background: #191a1a url(../images/btn_link_ios.png) center no-repeat; background-size: auto 36px; }
	.footer_app02_link .link02 { background: #000 url(../images/btn_link_android.png) center no-repeat; background-size: auto 36px; }
	.footer_app02_link .link03 { background: #3b5998 url(../images/btn_link_fb.png) center no-repeat; background-size: auto 36px; }
	.footer_app02_link .link04 { background: #e71f19 url(../images/btn_link_yt.png) center no-repeat; background-size: auto 36px; }

	/*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: 300px; 
  min-height: 100vh; box-sizing: border-box;
  background: #f3f3f3;display: block;
}

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

#pageMenu ul a {
  display: block;
    padding: 0 10px; font-size: 18px;
  line-height: 50px; text-align: center;
  border-bottom: solid 1px #ccc;
  color:#333;
  text-decoration: none;
}
#pageMenu ul a.on{
 color: #c09400;font-weight: bold;
}
/* 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: #c09400;
  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(300px);
}

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

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

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

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

.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);
}

}