@charset "UTF-8";
html{height:100%;}
html, button, input, select, textarea {color:#333;}
body{
	color:#333;
    font-weight:400;
	font-family:'Roboto Condensed', "Helvetica", "Helvetica Neue", "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
	font-display:swap;
	text-shadow:0 .3px .3px rgba(0,0,0,.08);
	text-rendering:auto;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	height:auto!important;min-height:100%;height:100%;
	overflow-x:hidden;
}
@media screen and (max-width:992px){
	html.menuOpened{
		overflow:hidden;
	}
}
*, ::after, ::before{
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}

/* 設置提示文字顏色 */
::-webkit-input-placeholder{color:#999;}
::-moz-placeholder{color:#999;}
:-ms-input-placeholder{color:#999;}
.placeholder{color:#999;}

hr{display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;}

/* 移除圖片底下間隙 */
img{vertical-align:middle;}

/* 移除fieldset預設樣式 */
fieldset{border:0; margin:0; padding:0;}

a{color:#00adff; text-decoration:none; }
a:hover, a:active, a:focus{color:#0097df;}

/*-------------------------------------------
Wrapper
-------------------------------------------*/
.wrapper{
	width:1024px; min-width:1024px;
    height:100%; 
	margin:0 auto;
	position:relative;
	/*box-shadow:inset 0 0 1px rgba(0,0,0,.9);*/
}
@media screen and (max-width:1024px){
    .wrapper{
        width:100%; min-width:100%;
        padding:0 20px;
    }
}
@media screen and (max-width:576px){
    .wrapper{
        padding:0 15px;
    }
}

/*-------------------------------------------
Clearfix: contain floats
-------------------------------------------*/
.clearfix:before,
.clearfix:after {
    content: ""; /* 1 */
    display: table; /* 2 */
}
.clearfix:after{clear: both;}
/* For IE 6/7 only */
.clearfix{*zoom: 1;}

/*-------------------------------------------
Header
-------------------------------------------*/
#headerContainer{
	border-top:2px solid #5fceb6;
	background-color:#fff;
	position:relative; z-index:99;
	height:138px;
	box-shadow:0 1px 3px rgba(0,0,0,.2);
}
    .headerInner{
        position:relative;
        height:100%;
    }
	#topLinks{
		font-size:14px; line-height:24px;
		position:absolute; right:5px; top:15px;
	}
		#topLinks .sayHello{
			
		}
		#topLinks a{
			color:#222;
			margin-left:8px;
		}
		#topLinks a:hover{
			color:#0097df;
		}
			#topLinks a i{
				display:inline-block;
				vertical-align:top;
				width:22px; height:22px;
				background-position:0 50%;
				background-repeat:no-repeat;
				background-size:contain;
				margin-right:3px;
			}
			#topLinks a .iconHome{background-image:url(../images/top_icon_home@2x.png);}
			#topLinks a .iconLogin{background-image:url(../images/top_icon_member@2x.png);}
			#topLinks a .iconLogout{background-image:url(../images/top_icon_logout@2x.png);}
			#topLinks a .iconContact{background-image:url(../images/top_icon_contact@2x.png);}
			#topLinks a .iconFB{background-image:url(../images/top_icon_fb@2x.png);}
			#topLinks a .iconGoogle{background-image:url(../images/top_icon_google@2x.png);}
	#googleSearch{
		position:absolute; right:5px; top:50px;
		text-align:right;
		overflow:hidden;
		height:0;
		transition:.2s;
	}
	#googleSearch.active{
		height:36px;
	}
		#googleSearch .inputKeyword{
			width:200px;
		}
		#googleSearch .btnSearch{
			border:none;
			box-shadow:none;
			background-color:transparent;
			position:absolute; top:0; right:0;
			background:url(../images/icon_search.png) 50% 50% no-repeat;
			width:28px; height:36px;
			text-indent:-99999em;
		}
	#headerContainer header{
		position:relative; z-index:99;
	}
		#headingLink{
			position:absolute; top:15px; left:0; z-index:100;
		}
			#heading{
				margin:0;
				width:450px;
				height:54px;
				background:url(../images/tsdas_heading@2x.png) no-repeat 0% 50%;
				background-size:contain;
				text-indent:-99999em;
			}
@media screen and (max-width:1024px){
    #headerContainer{
		height:125px;
	}
        #heading{
            width:400px;
            height:48px;
        }
			#topLinks a{
				margin-left:0;
			}
			#topLinks .btnGoogle{
				margin-left:10px;
			}
}
@media screen and (max-width:992px){
	#headerContainer{
		height:80px;
	}
		#heading{
			width:360px;
			height:48px;
			background-image:url(../images/tsdas_heading_360@2x.png);
		}
		#topLinks{
			display:none;
		}
}
@media screen and (max-width:667px){/* i6, i7, i8 Landscape */
	#headerContainer{
		height:60px;
	}
		#headingLink{
			top:7px;
		}
			#heading{
				width:330px;
				height:44px;
				background-image:url(../images/tsdas_heading_330@2x.png);
			}
}
@media screen and (max-width:440px){/* i16 Pro Max */
	#headingLink{
		top:12px;
	}
		#heading{
			width:230px;
			height:33px;
			background-image:url(../images/tsdas_heading_250@2x.png);
		}
}

/*-------------------------------------------
Nav
-------------------------------------------*/
#menuContainer{
	position:absolute; left:0; right:0; bottom:0; z-index:90;
}
	#menuContainer .isMobile{
		display:none;
	}
	#menu{
        list-style:none;
        margin:0 auto;
        padding:0;
		color:#000;
		font-size:1rem;
        line-height:50px;
        display:flex;
        justify-content:space-between;
	}
		#menu > li{
			flex:1 1 auto;
			position:relative;
			border-top-left-radius:3px; border-top-right-radius:3px;
			transition:.1s;
		}
		#menu > li:hover{
			background-color:#5fceb6;
		}
			#menu li a{
				display:block;
				color:#000;
				padding:0 5px;
				position:relative;
				transition:.1s;
                text-align:center;
			}
			#menu > li:hover a,
            #menu li.active:hover > a{
				color:#fff;
			}
			#menu li.active > a{
				color:#43b89d;
			}
@media screen and (max-width:1024px){
    #menu{
        line-height:45px;
    }
}
@media screen and (max-width:992px){
	#menuContainer{
		position:fixed; top:0px; left:auto; right:-100%; bottom:0; z-index:101;
		width:100%;
		height:auto; min-height:100vh;
		padding-top:80px;
		overflow-x:hidden;
		background-color:rgba(100%,100%,100%,1);
		transition:.5s ease;
	}
	#menuContainer.active{
		right:0;
	}
		#menuContainer .isMobile{
			display:block;
		}
			#menuContainer .mobileMember{
				position:absolute; top:0; left:0; right:0;
				height:80px;
				padding:20px 70px;
				line-height:45px;
				font-size:16px;
			}
				#menuContainer .mobileMember i{
					display:inline-block;
					vertical-align:top;
					width:24px; height:45px;
					background-position:0 50%;
					background-repeat:no-repeat;
					background-size:24px auto;
					margin-right:3px;
				}
				#menuContainer .iconLogin{background-image:url(../images/top_icon_member@2x.png);}
				#menuContainer .iconLogout{background-image:url(../images/top_icon_logout@2x.png);}
				#menuContainer .mobileMember .btnLogin{
					display:block;
					background:url(../images/arrow_next.png?v=20170915) no-repeat right 50%;
					background-size:24px auto;
					color:#000;
				}
	#menu{
        display:block;
        background-color:#fff;
		font-size:1.125rem;
        line-height:50px;
        color:#000;
        position:relative; z-index:0;
        padding:0 70px 70px;
	}
    #menu.animated{
        animation-duration:.5s;
    }
    #menu.active{
        display:block;
        height:auto;
        overflow:auto;
    }
        #menu > li{
            float:none;
            width:100%;
            border-radius:0;
        }
        #menu > li.isMobile{
            display:block;
        }
        #menu > li:first-child{
            border-top:2px solid #4ec9ae;
        }
        #menu > li:hover, 
        #menu > li:hover a{
            background-color:transparent;
            color:#4ec9ae;
        }
            #menu > li > a{
                padding:0;
                color:#000;
                line-height:45px;
                text-align:left;
                background:url(../images/nav_arrow.png) no-repeat right 50%;
                background-size:12px 18px;
                box-shadow:0 1px 0 rgba(0,0,0,.05);
            }
            #menu > li > a.active{
                background-image:url(../images/nav_arrow_active.png);
                background-size:18px 12px;
                font-weight:700;
            }
            #menu > li:hover a{
                color:#000;
            }
            #menu li.active:hover > a{
                color:#4ec9ae;
            }
    #menuContainer .iconFB{
        display:inline-block;
        vertical-align:top;
        width:24px;
        height:45px;
        margin-right:3px;
        background:url(../images/top_icon_fb@2x.png) no-repeat 0 50%;
        background-size:24px auto;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    #menu > li > a{
        line-height:45px;
    }
    #menuContainer .iconFB{
        height:45px;
    }
}
@media screen and (max-width:375px){/* i6, i7, i8, iX */
    #menu{
        font-size:1rem;
    }
}
@media screen and (max-width:320px){/* i5 */
	#menu > li > a{
		line-height:40px;
	}
	#menuContainer .iconFB{
		height:40px;
	}
}

/*-------------------------------------------
Nav Sub
-------------------------------------------*/
#menu .sub{
    margin:0; padding:0; list-style:none;
    position:absolute; left:0;
    min-width:100%;
    background-color:#fff;
    border:1px solid #5fceb6;
    border-bottom-left-radius:3px; border-bottom-right-radius:3px;
    box-shadow:0 2px 3px rgba(0,0,0,.2);
    display:none;
}
#menu li:hover .sub{
    display:block;
    animation-duration:.3s;
}
    #menu .sub li{
        display:block;
        text-align:left;
        line-height:18px;
        white-space:nowrap;
        box-shadow:0 1px 0 rgba(0,0,0,.1);
    }
        #menu .sub li a{
            color:#000;
            padding:12px 15px;
            text-align:left;
        }
        #menu .sub li a:hover{
            background-color:#5fceb6;
            color:#fff;
        }
        #menu .sub li a[href|='#']{
            color:#ccc;
        }
        #menu .sub li .icon{
            background-position:15px 50%;
            background-repeat:no-repeat;
            background-size:16px 16px;
            padding-left:35px;
        }
        #menu .sub li .iWord{background-image:url(../images/icon_word.png);}
        #menu .sub li .iPDF{background-image:url(../images/icon_pdf.png);}

@media screen and (max-width:992px){
    #menu .sub{
        position:relative;
        min-width:auto;
        padding:0 0 15px 12px;
        box-shadow:0 1px 0 rgba(0,0,0,.05);
        border:none;
        font-size:1rem;
        animation-duration:.3s;
        display:none !important;
    }
    #menu .sub.active{
        display:block !important;
    }
        #menu .sub li{
            display:block;
            line-height:18px;
            white-space:nowrap;
            box-shadow:none;
            border-left:1px solid #ddd; 
        }
        #menu .sub li:first-child{
            
        }
            #menu .sub li a{
                background:url(../images/nav_sub_arrow.png) no-repeat 12px 50%;
                padding:8px 15px 8px 32px;
                color:#000;
                text-align:left;
            }
            #menu .sub li a:hover{
                background-color:#4ec9ae;
                background-image:url(../images/nav_sub_arrow_active.png);
            }
            #menu .sub li.noLink a{
                text-align:center;
            }
}

/*-------------------------------------------
Toggle Menu
-------------------------------------------*/
@media screen and (max-width:992px){
	.memberButton, .memberLogout{
		display:inline-block;
		width:60px;
		height:60px;
		background-repeat:no-repeat;
		background-position:50% 50%;
		background-size:24px 24px;
		position:absolute; right:45px; top:8px; z-index:102;
	}
	.memberButton{
		background-image:url(../images/top_icon_member@2x.png);
	}
	.memberLogout{
		background-image:url(../images/top_icon_logout@2x.png);
	}
	.toggleMenu{
		display:inline-block;
		width:60px;
		height:60px;
		line-height:60px;
		text-align:center;
		padding:0;
		background-color:rgba(100%,100%,100%,.8);
		position:fixed; right:10px; top:10px; z-index:102;
		transition:.3s;
		/*box-shadow:0 0 1px #ddd;*/
	}
	.toggleMenu.active{
		/*background-color:rgba(100%,100%,100%,1);*/
	}
	.toggleMenu.activeTop{
		top:0;
	}
		#icon-menu{
			display:inline-block;
			width:24px;
			height:24px;
			margin-top:16px;
			position:relative;
			transform:rotate(0deg);
			transition:.5s ease-in-out;
			cursor:pointer;
		}
			#icon-menu span{
				display:block;
				position:absolute; left:0;
				height:3px;
				width:30px;
				background:#4ec9ae;
				opacity:1;
				transform:rotate(0deg);
				transition:.25s ease-in-out;
			}
			#icon-menu span:nth-child(1){top:15%;}
			#icon-menu span:nth-child(2){top:50%;}
			#icon-menu span:nth-child(3){top:85%;}

		#icon-menu.active span{
			transition-delay:0s;
		}
		#icon-menu.active span:nth-child(1){
			top:48%;
			background:#00adff;
			transform:rotate(-45deg);
		}
		#icon-menu.active span:nth-child(2){
			opacity:0;
		}
		#icon-menu.active span:nth-child(3){
			top:48%;
			background:#00adff;
			transform:rotate(45deg);
		}
	.menuMask{
		position:fixed; top:0; left:0; z-index:100;
		width:100%;
		background-color:rgba(100%,100%,100%,.8);
		transition:.2s;
		opacity:0;
	}
	.menuMask.active{
		height:100%;
		opacity:1;
	}
}
@media screen and (max-width:667px){/* i6, i7, i8 Landscape */
	.memberButton, .memberLogout{
		width:50px;
		height:50px;
		top:4px;
	}
	.toggleMenu{
		width:50px;
		height:50px;
		line-height:50px;
		top:6px;
	}
	.toggleMenu.activeTop{
		height:50px;
	}
		.toggleMenu #icon-menu{
			margin-top:12px;
		}
			.toggleMenu #icon-menu span{
				width:24px;
			}
}
@media screen and (max-width:440px){/* i16 Pro Max */
	.memberButton, .memberLogout{
		width:42px;
		right:38px;
	}
	.toggleMenu{
		right:0;
	}
}
@media screen and (max-width:320px){/* i5 */
	.memberButton, .memberLogout{
		display:none;
	}
}

/*-------------------------------------------
pageHeader
-------------------------------------------*/
#pageHeader{
	position:relative; z-index:2;
	background-color:#5fceb6;
	background-position:50% 0;
	background-repeat:no-repeat;
	background-image:url(../images/page_header_bg_about.jpg);
	height:100px;
	padding:45px 0;
	margin-bottom:20px;
}
    #pageHeader > .wrapper{
        height:auto;
    }
	#pageHeader .pageTitle{
		margin:0;
		font-family:'Roboto Condensed', "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		font-size:36px; line-height:36px; font-weight:400;
		color:#000;
		background-color:#fff;
		border:2px solid #5fceb6;
		width:100%;
		padding:30px 20px;
		border-radius:5px;
	}
		#pageHeader .pageTitle:after{
			display:block;
			content:"";
			width:70px;
			font-size:0;
			border-bottom:3px solid #5fceb6;
			margin:10px 0 0;
		}
@media screen and (max-width:992px){
    #pageHeader .pageTitle{
        border:none;
        text-align:center;
        font-size:30px; line-height:30px;
    }
        #pageHeader .pageTitle:after{
            width:60px;
            margin:10px auto 0;
        }
}
@media screen and (max-width:320px){/* i5 */
	#pageHeader .pageTitle{
		padding:25px 15px;
		font-size:24px; line-height:24px;
	}
}

/*-------------------------------------------
Sub Menu
-------------------------------------------*/
#subMenu{	/* ul */
	position:absolute; right:20px; top:39px; z-index:3;
	list-style:none;
	margin:0;
	padding:0;
	overflow:hidden;
	border:1px solid #17ba97;
	border-radius:5px;
	background-color:#fff;
	box-shadow:0 1px 3px rgba(0,0,0,.2);
}
	#subMenu li{
		float:left;
	}
		#subMenu a{
			display:block;
			padding:0 15px;
			color:#000;
			line-height:32px;
			text-align:center;
			box-shadow:1px 0 0 #17ba97;
			transition:.1s; 
		}
		#subMenu a:hover{
			background-color:#17ba97;
			color:#fff;
		}
		#subMenu .active a{
			background-color:#17ba97;
			color:#fff;
			cursor:default;
		}
		#subMenu a[href|='#']{
			color:#ccc;
		}
		#subMenu .icon{
			background-position:15px 50%;
			background-repeat:no-repeat;
			background-size:16px 16px;
			padding-left:35px;
		}
		#subMenu .iWord{background-image:url(../images/icon_word.png);}
		#subMenu .iPDF{background-image:url(../images/icon_pdf.png);}
@media screen and (max-width:1024px){
    #subMenu{
        font-size:.875rem;
        right:40px;
    }
}
@media screen and (max-width:992px){
	#subMenu{	/* ul */
		position:static; top:0; right:auto;
		overflow-x:auto;
		overflow-y:hidden;
		white-space:nowrap;
		border-radius:0;
		border:none; border-bottom:2px solid #17ba97;
		box-shadow:none;
	}
	#subMenu:before, #subMenu:after{
		content:"";
		display:block;
		position:absolute; top:10px; z-index:2;
		width:20px;
		height:calc(100% - 10px);
		background-repeat:repeat-y;
		background-image:url(../images/sub_menu_mask_left.png);
        /* display:none; */
	}
	 #subMenu:after{
		 right:20px;
		 background-image:url(../images/sub_menu_mask_right.png);
	 }
		#subMenu li{
			float:none;
			display:inline-block;
			position:relative;
		}
			#subMenu li:before{
				content:"";
				display:block;
				height:18px;
				border-left:1px solid #ddd;
				position:absolute; bottom:27%;
			}
			#subMenu a{
				padding:0 30px;
				line-height:40px;
				box-shadow:none;
			}
			#subMenu .active a{
				background-color:#fff;
				color:#17ba97;
				cursor:default;
			}
}
@media screen and (max-width:576px){
	 #subMenu:after{
		 right:15px;
	 }
}

/*-------------------------------------------
Container
-------------------------------------------*/
#contentContainer{
	height:auto!important;min-height:450px;height:450px;
	position:relative; z-index:0;
	background-color:#fff;
	padding:80px 0 60px;
	line-height:1.5;
}
#contentContainer article{
	position:relative;
}
	#contentContainer .partTitle{
		margin:0;
		font-family:'Roboto Condensed', "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		font-size:24px; line-height:24px; font-weight:400;
		color:#000;
		width:100%;
		padding:5px 0 30px;
	}
		#contentContainer .partTitle:after{
			display:block;
			content:"";
			width:48px;
			font-size:0;
			border-bottom:2px solid #5fceb6;
			margin:10px 0 0;
		}
	#contentContainer article p:nth-of-type(1){
		margin-top:0;
	}
@media screen and (max-width:992px){
	#contentContainer{
		height:auto!important;
		min-height:380px;
		height:380px;
		padding-top:100px;
	}
}
@media screen and (max-width:440px){/* i16 Pro Max */
	#contentContainer .partTitle{
		font-size:20px;
	}
}
@media screen and (max-width:320px){/* i5 */
	#contentContainer{
		padding-top:80px;
	}
}


/*-------------------------------------------
Input, Select, Textarea
-------------------------------------------*/
[type=radio], [type=checkbox]{
    vertical-align:-1px;
    margin:0 3px;
}
[type=text], [type=password], [type=email], [type=tel], [type=date], textarea, select{
	box-sizing:border-box; -webkit-box-sizing:border-box;
	-webkit-appearance:none; appearance:none;
	background-color:#fff;
	border:1px solid #aed4cc; 
	box-shadow:inset 0 1px 1px rgba(0,0,0,.05);
	font-family:inherit;
	font-size:16px;
    line-height:1;
	padding:8px 8px 7px; 
	margin:0 2px 2px 0; 
    vertical-align:middle;
	transition:.2s;
}
select{
	padding:9px 25px 9px 5px;
	background:url(../images/select_arrow@2x.png) 100% 50% no-repeat #fff;
	background-size:24px auto;
}
select::-ms-expand{
	display:none;
}
textarea{
    line-height:1.3;
    margin-left:0; margin-right:0;
    width:100%;
    resize:vertical;
}
.datepicker,
.date{
	background-image:url(../images/icon_date.png);
	background-size:24px auto;
	background-position:right center;
	background-repeat:no-repeat;
	width:115px;
}
[type=text]:focus, [type=password]:focus, [type=email]:focus, [type=date]:focus, textarea:focus, select:focus{
	outline:0;
	background-color:#fffcf1;
	border:1px solid #75d6ff !important; 
}
[type=radio], [type=checkbox]{
	display:none;
}
[type=radio] + label{
	display:inline-block;
	background:url(../images/icon-radio@2x.png) no-repeat 0 0;
	background-size:24px auto;
	padding-left:26px;
	margin-right:15px;
	transition:.1s;
}
[type=radio]:checked + label{
	background:url(../images/icon-radio-checked@2x.png) no-repeat 0 0;
	background-size:24px auto;
}
[type=radio]:disabled + label{
	background:url(../images/icon-radio@2x.png) no-repeat 0 0;
	background-size:24px auto;
	opacity:.4;
}
[type=checkbox] + label{
	display:inline-block;
	background:url(../images/icon-checkbox@2x.png) no-repeat 0 0;
	background-size:24px auto;
	padding-left:26px;
	margin-right:15px;
	transition:.1s;
}
[type=checkbox]:checked + label{
	background:url(../images/icon-checkbox-checked@2x.png) no-repeat 0 0;
	background-size:24px auto;
}
[type=checkbox]:disabled + label{
	background:url(../images/icon-checkbox@2x.png) no-repeat 0 0;
	background-size:24px auto;
	opacity:.4;
}

/*-------------------------------------------
Buttons
-------------------------------------------*/
[type=submit], [type=button], [type=reset], .btn, .field-file{
	box-sizing:border-box; -webkit-box-sizing: border-box;
	display:inline-block;
	-webkit-appearance:none; appearance:none;
	vertical-align:top; text-align:center;
	text-decoration:none;
	border:1px solid #17ba97;
	background-color:#fff;
	border-radius:5px;
	box-shadow:0 1px 3px rgba(0,0,0,.2);
	color:#17ba97;
	font-family:inherit;
    font-size:1rem; font-weight:700;
    line-height:1;
    margin:0 2px 2px;
	padding:9px 15px;
	transition:.1s;
	cursor:pointer; 
	outline:none;
}
[type=submit]:focus, [type=button]:focus, [type=reset]:focus, .btn:focus, .field-file:focus,
[type=submit]:hover, [type=button]:hover, [type=reset]:hover, .btn:hover, .field-file:hover{
	text-decoration:none;
	background-color:#17ba97;
	border-color:#17ba97;
	color:#fff !important;
}

.buttons{
	text-align:center; 
	margin:30px 0 0; 
	position:relative;
}
	.buttons [type=submit], .buttons [type=button], .buttons [type=reset], .buttons .btn{
		font-size:1.125rem;
		margin-left:10px; margin-right:10px;
		padding:14px 30px; 
	}
	.btnSecondary, .btn.btnSecondary{
		border-color:#aaa; 
		color:#333;
	}
	.btn.floatL{
		position:absolute; left:0;
	}
	.btn.floatR{
		position:absolute; right:0;
	}
@media screen and (max-width:440px){/* i16 Pro Max */
	.buttons [type=submit], .buttons [type=button], .buttons [type=reset], .buttons .btn{
		padding:12px 25px;
	}
}

/*-------------------------------------------
Common
-------------------------------------------*/
.floatL{float:left;}
.floatR{float:right;}
.hidden{display:none;}
.pcHidden{display:none;}
.explanation{
    color:#C60;
    font-size:.875rem; font-weight:400; 
    padding:3px 0;
}
.explanation.onlyRWD{
    display:none;
    background-color:#fdf8ea;
    text-align:center;
}
.required{
    color:#f00 !important;
    font-weight:400;
}
.paddingNone{
    padding:0 !important;
}
.important{
    color:#f00 !important;
}
#twzipcode{
    display:inline-block;
    vertical-align:top;
}
    #twzipcode div{
        float:left;
    }
.zipcode{
    padding-left:3px; padding-right:3px;
    width:75px;
}
.noneData{
    clear:both;
    background-color:#fdf8ea;
    color:#333;
    padding:15px; 
    text-align:center;
}
@media screen and (max-width:992px){
	.explanation{
		font-size:.75rem;
	}
	.explanation.onlyRWD{
        display:block;
    }
	#searchBlock{
		margin-top:0px;
	}
}

/*-------------------------------------------
Search Block
-------------------------------------------*/
#searchBlock{
	background-color:#f4f4f4;
	padding:20px;
	margin-top:-13px; margin-bottom:30px;
}
	#searchBlock ul{
		list-style:none;
		margin:0;
		padding:0;
	}
		#searchBlock ul li{
			float:left;
			padding:10px 10px;
		}
			#searchBlock ul li label{
				margin-right:5px;
			}
@media screen and (max-width:992px){
	#searchBlock{
		margin-top:0px;
	}
}
@media screen and (max-width:640px){/* Xiaomi 2S Landscape */
	#searchBlock{
		padding:15px;
	}
		#searchBlock ul li{
			padding:5px 8px;
		}
}
@media screen and (max-width:440px){/* i16 Pro Max */
	#searchBlock{
		position:relative;
	}
		#searchBlock ul li{
			width:100%;
			padding-left:0; padding-right:0;
		}
			#searchBlock ul li label{
				margin-right:10px;
			}
			#searchBlock ul li [type='submit']{
				position:absolute; right:15px; bottom:30px;
			}
}
@media screen and (max-width:360px){/* Xiaomi 2S */
	#searchBlock [type='text'], #searchBlock select{
		padding-left:5px;
	}
}

/*-------------------------------------------
Alert Information
-------------------------------------------*/
.alertInfo{
	background:#fdf8ea; 
	border:2px solid #f5c280;
	font-size:16px; color:#111;
	text-align:center; 
	padding:30px 20px 30px;
	margin:10px 0 20px;
}
	.alertInfo a{
        color:#09F;
    }
@media screen and (max-width:992px){
	.alertInfo{
		padding:20px;
		margin:5px 0 10px;
	}
}
@media screen and (max-width:640px){/* Xiaomi 2S Landscape */
	.alertInfo{
		padding:15px;
		margin:5px 0 10px;
	}
}


/*-------------------------------------------
table List
-------------------------------------------*/
.tableList{
	border-collapse:collapse;
}
	.tableList caption{
		border-bottom:2px solid #5fceb6;
		font-size:22px; font-weight:700;
		color:#000;
		text-align:left;
	}
		.tableList thead th{
			background-color:#5fceb6;
			border-right:1px solid rgba(0,0,0,.1);
			color:#fff;
			font-size:.875rem;
            line-height:1.2;
		}
        .tableList thead th:last-child{
            border-right:none;
        }
		.tableList th,
        .tableList td{
			padding:8px;
			border-bottom:1px solid #c6ddd8;
		}
		.tableList tbody th{
			background-color:#f7f7f7;
		}
		.tableList .btn{
			padding:6px 10px;
			font-size:.875rem;
		}

/*-------------------------------------------
table content
-------------------------------------------*/
.tableContent{
	border-collapse:collapse;
}
	.tableContent caption{
		border-bottom:2px solid #5fceb6;
		color:#000;
		font-size:1.5rem; font-weight:700;
		text-align:left;
	}
		.tableContent th,
        .tableContent td{
			padding:8px 10px;
		}
		.tableContent th{
			border-bottom:1px solid #c6ddd8;
			text-align:right;
			color:#000;
			font-size:.875rem;
			background-color:#f1f6f5;
		}
		.tableContent th:nth-child(1){
            width:15%;
        }
		.tableContent td{
			/*vertical-align:top;*/
			border-bottom:1px solid #c6ddd8;
		}
		.tableContent .btn{
			padding:6px 10px;
			font-size:.875rem;
		}
		.tableContent .before{
			font-size:13px;
			color:green;
		}
		.tableContent .after{
			font-size:13px;
			color:red;
		}
		.tableContent .surname{
			width:100px;
		}
		.tableContent .email,
		.tableContent .school,
		.tableContent .institutionName,
		.tableContent .addr{
			width:300px;
		}
		.tableContent .postalCode,
		.tableContent .zipcode{
			width:60px;
		}

/*-------------------------------------------
Files Format
-------------------------------------------*/
ul.fileFormat, ol.fileFormat{
	margin:0;
	padding:0;
	list-style:none;
}
.fileFormat a{
	display:inline-block;
	background-image:url(../images/icon_file.png);
	background-repeat:no-repeat;
	background-position:10px 50%;
	background-color:#fff;
	padding:8px; padding-left:32px;
	box-shadow:0 1px 2px rgba(0,0,0,.1);
	border-radius:3px;
	font-size:13px;
	color:#17ba97;
	border:1px solid #5fceb6;
	transition:.1s; 
}
.fileFormat a:hover{
	color:#fff;
	background-color:#5fceb6;
}
.fileFormat a[href *='.pdf']{background-image:url(../images/icon_pdf.png);}
.fileFormat a[href *='.xls'], .fileFormat a[href *='.xlsx']{background-image:url(../images/icon_excel.png);}
.fileFormat a[href *='.doc'], .fileFormat a[href *='.docx']{background-image:url(../images/icon_word.png);}
.fileFormat a[href *='.ppt'], .fileFormat a[href *='.pptx']{background-image:url(../images/icon_powerpoint.png);}
.fileFormat a[href *='.jpg'], .fileFormat a[href *='.png']{background-image:url(../images/icon_img.png);}
.fileFormat a[href *='.rar']{background-image:url(../images/icon_rar.png);}
.fileFormat a[href *='.zip']{background-image:url(../images/icon_zip.png);}


/*-------------------------------------------
Page
-------------------------------------------*/
.page{
	text-align:center;
	font-size:14px;
}
	.page span{
		margin:0 1px;
	}
	.page .current, .page a{
		box-sizing:border-box; -webkit-box-sizing: border-box;
		-webkit-appearance:none; appearance:none;
		text-decoration:none;
		display:inline-block; *display:inline; *zoom:1;
		vertical-align:top; text-align:center;
		font-family:'Roboto Condensed', "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		color:#000; 
		line-height:30px;
		padding:0 10px;
		margin-bottom:5px;
		border-radius:5px;
		transition:all .1s;
		cursor:pointer; 
		outline:none;
	}
	.page a{
		border:1px solid #aaa;
		background-color:#fff;
		box-shadow:0 1px 3px rgba(0,0,0,.2);
	}
	.page a:hover{
		border-color:#17ba97;
		background-color:#17ba97;
		color:#fff;
	}
	.page .current{
		border:1px solid #f4f4f4;
		background-color:#f4f4f4;
	}
	.page .pageTo select{
		padding:7px 28px 7px 8px;
		margin-left:3px; margin-right:3px;
	}
@media screen and (max-width:440px){/* i16 Pro Max */
	.page .current, .page a{
		line-height:25px;
		padding:0 9px;
	}
	.page .pageTo{
		display:block;
		margin-top:10px;
	}
		.page .pageTo select{
			padding:5px 24px 5px 5px;
		}
}
@media screen and (max-width:375px){/* i6, i7, i8, iX */
	.page span{
		margin:0;
	}
}
@media screen and (max-width:360px){/* Xiaomi 2S */
	.page .current, .page a{
		line-height:25px;
		padding:0 6px;
	}
}

/*-------------------------------------------
Social Share
-------------------------------------------*/
#socialShare{
	clear:both;
    padding:10px 5px;
    position:relative;
}
	#socialShare::before{
        content:"";
        display:inline-block;
        background:url(../images/icon-share.svg) no-repeat 0% 50%;
        background-size:contain;
        width:32px;
        height:32px;
    }
	#socialShare a{
		display:inline-block;
		width:32px; height:32px; 
		margin-left:7px; 
		background-image:url(../images/icons_social@2x.png); 
		background-size:32px auto;
		background-repeat:no-repeat;
		background-color:transparent;
		text-indent:-99999em;
		border:none !important;
		overflow:hidden; 
	}
	#socialShare .fb     {background-position:0 0;}
	#socialShare .gl     {background-position:0 -32px; display:none;}
	#socialShare .twitter{background-position:0 -64px;}
	#socialShare .plurk  {background-position:0 -96px; display:none;}
	#socialShare .line   {background-position:0 -128px;}
	#socialShare .pinterest{background-position:0 -160px !important;}
    
@media screen and (max-width:440px){/* i16 Pro Max */
	#socialShare{
		
	}
}
/*-------------------------------------------
Footer
-------------------------------------------*/
footer{
	margin:0 auto;
	padding:0 0 40px;
	font-size:13px; line-height:24px; font-weight:400;
	text-align:center;
}
	footer .contactInfo{
		background-color:#5fceb6;
		color:#000;
		line-height:24px;
		padding:30px 0;
		margin-bottom:30px;
	}
		footer .contactInfo a{
			color:#000;
		}
		footer .contactInfo a:hover{
			color:#fff;
		}
		footer i{
			display:inline-block;
			vertical-align:top;
			width:24px;
			height:24px;
			background-position:0 50%;
			background-size:24px 24px;
			background-repeat:no-repeat;
			margin-right:8px;
		}
		footer .iconAddr{background-image:url(../images/footer_icon_address@2x.png);}
		footer .iconTel{background-image:url(../images/footer_icon_tel@2x.png);}
		footer .iconFax{background-image:url(../images/footer_icon_fax@2x.png);}
		footer .iconEmail{background-image:url(../images/footer_icon_email@2x.png);}
		footer .contactInfo span strong{
			display:none;
		}
		footer .googlemap{
			background:url(../images/footer_icon_googlemap.png) 100% 0 no-repeat;
			background-size:16px 16px;
			padding-right:24px;
		}
			footer .areaCode{
				font-style:normal;
			}
	footer .copyright{
		color:#222;
	}
	footer .recommend{
		display:block;
		color:#17ba97;
	}
	footer .huaweb{
		color:#e3e3e3; 
	}
@media screen and (max-width:992px){
	footer .recommend{
		display:none;
	}
}
@media screen and (max-width:667px){/* i6, i7, i8 Landscape */
	footer .googlemap{
		background:none;
		padding-right:0;
	}
	footer .copyright{
		line-height:1.5;
	}
		footer .copyright .tw{
			display:block;
		}
}
@media screen and (max-width:640px){/* Xiaomi 2S Landscape */
	footer{
		text-align:left;
		padding-bottom:20px;
	}
		footer .contactInfo{
			margin-bottom:20px;
		}
			footer .contactInfo span{
				display:block;
				text-align:left;
				padding-left:20px;
			}
		footer .copyright, footer .huaweb{
			padding-left:20px;
		}
}

/*-------------------------------------------
Scroll Up
-------------------------------------------*/
.scrollUp{
	width:40px; height:40px; 
	position:fixed; bottom:40px; right:3%; z-index:50;
	background:url(../images/btn-top@2x.png) no-repeat;
	background-size:40px 40px;
	display:none;
}
	.scrollUp span{
		display:block;
		width:0; height:0; font-size:1;
		overflow:hidden;
	}
@media screen and (max-width:992px){
	.scrollUp{
		bottom:3%; right:3%;
	}
}

/*-------------------------------------------
JQuery UI
-------------------------------------------*/
#ui-datepicker-div{
	font-size:1rem !important;
	box-shadow:0 3px 10px rgba(0,0,0,.2);
}
	#ui-datepicker-div *{
		border-radius:0;
	}
	.ui-datepicker-month,
	.ui-datepicker-year{
		padding:8px;
	}
	.ui-datepicker-prev, 
	.ui-datepicker-next{
		top:8px !important;
	}
    .ui-datepicker .ui-datepicker-title select{
        font-size:1rem !important;
    }
    .ui-datepicker table{
        font-size:1rem !important;
    }