@charset "UTF-8";
/*思源黑體*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,500,700&display=swap&subset=chinese-traditional');

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

body {
	color: #1b1b1b;
	background:#fff; 
	font: 18px/150% "Noto Sans TC","微軟正黑體","Helvetica Neue",sans-serif;
	font-weight: 400;
}

html, body { height: 100%; }

a{
	color:#1b1b1b;
	text-decoration:none;
	transition-duration: 0.3s;
}

button{	background: none; }

h1, h2, h3, h4, h5, h6{ font-weight: 500; 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: 20px; color: #1b1b1b; border: solid 1px #cccccc; }
input[type="text"]:disabled,
input[type="password"]:disabled { background: #ededed; }
input::-webkit-input-placeholder { color: #555555; }
input::-moz-placeholder { color: #555555; }
input:-ms-input-placeholder { color: #555555; }
input:-moz-placeholder { color: #555555; }
/*radio*/
input[type="radio"]{ display:none;}
input[type="radio"] + label{cursor: pointer;  margin: 0 10px 0 0;display: flex; align-items: center; }
input[type="radio"] + label .icon { display:inline-block; position: relative; width: 1.33em; height: 1.33em; box-sizing: border-box;  background:#fff; border: solid 1px #a0a0a0; border-radius:99em; margin: 0 5px 0 0;}
input[type="radio"]:checked + label .icon::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 60%; background: #3c8dbc; border-radius: 50%; }
/*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_01.png); background-repeat: no-repeat; background-size: auto 7px; background-position: right 10px center; border: solid 1px #ddd;  }
select::-ms-expand { display: none; }
.ui-datepicker-title select{padding: 0 20px 0 7px; background-image:url(../images/icon_select_02.png);background-position: right 7px center; border-radius: 5px;}

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

.smallestT { font-size: 12px; letter-spacing: 0.2px; }
.smallerT { font-size: 14px; }
.smallT { font-size: 16px; }
.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; }

.clr{clear:both;}

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

.tBig { font-size: 18px; }
.tBigger { font-size: 21px; }
.botM0 { margin-bottom: 0; }
.botM { margin-bottom: 15px; }
.botM2 { margin-bottom: 30px; }
.botM3 { margin-bottom: 32px; }

.red { color: #e60012; }
.orange { color: #ea9214; }
.green { color: #22ac38; }
.blue { color: #448aca; }
.gray { color: #818290; }

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

.nav {}
/*header*/
.header { width: 100%; height: 72px; position: fixed; top: 0; left: 0; z-index: 9999; transition: 0.2s; /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.7);*/ }
.header { position: fixed; top: 0; left: 0; background: linear-gradient(90deg,rgba(0, 170, 174, 1) 0%, rgba(55, 150, 204, 1) 50%, rgba(175, 135, 255, 1) 100%); }
.headerIn { display: flex; justify-content: space-between; align-items: center; position: relative; height: 72px; }
.headerIn a { color: #fff; }
.headerIn .logo a { display: block; width: 210px; height: 60px; background: url(../images/img_logo_02.png) left center no-repeat; background-size: 100% auto; }
/*選單*/
.headerNav { display: flex; align-items: center; }
.headerMenu { display: inline-flex; align-items: center; margin-right: 40px; }
.headerMenu > li { padding: 0 20px; border-right: solid 1px #fff; }
.headerMenu > li:nth-last-child(1) { padding-right: 0; border-right: 0; }
.headerMenu a { /*font-weight: 300;*/}
.headerMenu a:hover, .headerMenu a.on { /*font-weight: 500;*/ color: #59f1ff; }
.headerNav .contactLink { display: inline-flex; }

/*聯繫icon*/
.contactLink a { display: inline-block; width: 40px; height: 40px; margin-right: 12px; }
.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%; }
.contactLink a.link05 { background: url(../images/btn_link01_05.png) center no-repeat; background-size: 100%; }

.contactLink a:hover { opacity: 0.8;}

/*header 捲動*/
.header.sticky { height: 60px; background: linear-gradient(90deg,rgba(0, 170, 174, 0.9) 0%, rgba(55, 150, 204, 0.9) 50%, rgba(175, 135, 255, 0.9) 100%);} 
.header.sticky .headerIn { height: 60px; }
.header.sticky .headerIn .logo a { width: 342px; height: 54px; background: url(../images/logo_sticky.png) left center no-repeat; background-size: auto 54px;}
/*.header.sticky .contactLink a { width: 30px; height: 30px; }*/
.header.sticky .headerMenu > li { font-size: 18px; }

/*footer*/
.footer { margin: 0; padding: 0; background: #fff; }
.footer .copyright { padding: 20px 10px; text-align: center; font-size: 15px; color: #fff; background: #007fbc; }
.footer .copyright p { margin-bottom: 10px; font-size: 15px; font-weight: 500; }
.footer .copyright p.smallT { margin-bottom: 0; font-size: 12px; }
.footer .copyright a{ color: #fff;}

.footer .app_doawload_area{
	border-top: 1px solid #e5e5e5;
}
.footer .app_doawload_area_in{
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 30px 0;
}
.footer .app_doawload_area_in > div{
	flex: 1 1 100%;
}
.app_doawload_area_in .tt_left{
	display: flex;
	align-items: center;
	gap: 10px;
}
.app_doawload_area_in .top_tt{
	font-size: 3.12rem;
	font-weight: bold;
	color: #007fbd;
}
.app_doawload_area_in .top_bb{
	font-size: 1.25rem;
	font-weight: bold;
	color: #4f4f4f;
	
}
.app_doawload_area_in .btns_right{
	display: flex;
	justify-content: end;
	align-items: center;
	gap: 10px;
}
.app_doawload_area_in .btns_right .btn a{
	width: 200px;
	margin: 0;
}
.app_doawload_area_in .btns_right .btn a:nth-child(1){
	margin-right: 5px;
}


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


/*按鈕*/
.btn { text-align: center; }
.btn a { display: inline-block; width: 100%; max-width: 320px; line-height: 54px; text-align: center; font-weight: 500; color: #fff; background: #0db2cf; border-radius: 4px; transition: 0.2s; }
.btn a:hover { background: #04c5e8; }

.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; }
.btnMain2 { text-align: center;  display: flex;justify-content: space-between;} 
.btnMain2 a { display: inline-block; width: calc((100% - 20px)/2);  line-height: 48px; font-size: 21px; text-align: center; color: #fff; background: #448aca; }

a.btn_red { background: #ef2b37; }
a.btn_aqua { background: #0db2cf; }
a.btn_gray { background: #aaaaaa; }


/*分享*/
.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; }
	.headerIn { padding: 20px; }

	.headerIn { }
	.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: 20px; }
	

}

@media screen and (max-width: 1024px) {

	.headerMenu li { padding: 0 15px; }
}


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

	body { font-size: 16px; }

	.wrapper { padding-top: 60px; }
	.pagesize { padding: 0 20px; }
	
	/* page */
	.wrapper { border-top: 0;}

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

	.botM { margin-bottom: 10px; }
	.botM2 { margin-bottom: 20px; }

	/* header */
	.header { height: 60px; position: fixed; top: 0; left: 0; padding: 0 20px;  border-bottom: 0; z-index: 1000; transition: 0.2s; }
	.header .logo a { display: block; width: 200px; height: 60px; background: url(../images/img_logo_02.png) left center no-repeat; background-size: 90% auto; }
	.header .btnNav a { display: block; width: 60px; height: 60px; position: absolute; top: 0; right: 5px; background: url(../images/btn_mmenu_01.png) center no-repeat; background-size: auto 20px; }

	/* footer 
	.footer { border-top: solid 1px #e5e5e5; }*/
	.footer .app_doawload_area_in{
		flex-wrap: wrap;
		gap: 20px;
    }
	.app_doawload_area_in .tt_left{
		justify-content: center;
	}
	.app_doawload_area_in .top_tt{
		font-size: 2rem;
    }
    .app_doawload_area_in .top_bb{
		font-size: 1.125rem;
    }
	.app_doawload_area_in .btns_right .btn{
		width: 100%;
	}
	.app_doawload_area_in .btns_right .btn a, .app_doawload_area_in .btns_right .btn a:nth-child(1){
		width: 100%;
        max-width: 300px;
		margin: 0 auto 10px;
	}

	
	/*聯絡*/
	.formbox { display: block; }
	.formbox > p { font-size: 18px; }
	.formbox .formInner { flex: 1 1 100%; } 
	/*按鈕*/
	.btnMain a { font-size: 18px; }



	/* MMENU */
	.mm-menu { background: #eee; }
	/* 選單 */
	.mm-panel { padding: 0; }
	.mm-panels > .mm-panel > .mm-listview { margin: 0; }
	.mm-listitem::after { left: 0; }
	.mm-listitem__text { padding: 0 10px; line-height: 50px; text-align: left; font-size: 18px; font-weight: 400; }
}

@media screen and (max-width: 640px) {
	/*聯繫icon*/
	.contactLink{display: flex; align-items: center;height: 50px;}
	.contactLink a { display:block;}
}