@charset "utf-8";

body {
	background: #F2F2F2;
	color: #505050;
	cursor: default;
	font-family: Arial, "微軟正黑體";
	font-size: 16px;
	margin: 0px;
	overflow-x: hidden;
}
a, a:link, a:visited, a:hover, a:active {
	color: #505050;
	/* for IE */
	hlbr: expression(this.onFocus = this.blur());
	/* for Firefox */
	outline: none;
	text-decoration: none;
}
img { border: 0px; }
.img100{ width:100%;}
.first-section{margin-top: 60px;}

/* Bootstrap */
.container { width: 100%;  }
.container, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
	padding-left: 15px;
	padding-right: 15px;
}

.col-height {
	display: table-cell;
	float: none;
	height: 100%;
}

/* common */
.alignCenter { text-align: center; }
.alignRight { text-align: right; }
.borderRadius3px {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.borderLeftRadius3px {
	border-top-left-radius: 3px;
	-moz-border-top-left-radius: 3px;
	-webkit-border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	-moz-border-bottom-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
}
.borderRadius5px {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
}
.cursorPointer { cursor: pointer; }
.floatClear { clear: both; }
.floatLeft { float: left; }
.floatRight { float: right; }
.absoluteLeft{ position:absolute; left:10px;}
.absoluteRight{ position:absolute; right:10px;}
.inline { display: inline; }
.inlineBlock { display: inline-block; }
.nowrap { white-space: nowrap; }
.paddingBottom60px { padding-bottom: 60px; }
.paddingLeft45px { padding-left: 45px; }
.paddingLR15px { padding: 0px 15px; }
.paddingLR45px { /*padding: 0px 45px;*/padding: 0px 30px 0 45px; }
.paddingRight15px { padding-right: 15px; }
.positionAbsolute { position: absolute; }
.positionRelative { position: relative; }

/* background */
.backgroundGrayLight { background: #F2F2F2; }
.backgroundGreen { background: #009C84; }
.backgroundGreenActive { background: #017E72; }
.backgroundGreeneon { background: #74C5B8;}

.phbackgroundGrayLight { background: #EBEBEB; opacity:0.95; }
.phbackgroundGreen { background: #009C84; opacity:0.95; }
.phbackgroundGreenActive { background: #017E72; opacity:0.95 }
.phbackgroundGreeneon { background: #74C5B8; opacity:0.95;}

/* fontColor */
.colorBlack { color: #000000; }
.colorGreen { color: #009C84; }
.colorGreeneon { color: #74C5B8; }
.colorWhite { color: #FEFEFE; }

/* fontSize */
.fontSize13px { font-size: 0.813em; }
.fontSize15px { font-size: 0.938em; }
.fontSize17px { font-size: 1.063em; }
.fontSize19px { font-size: 1.188em; }

/* fontOther */
.fontWeightBold { font-weight: bold; }
.letterSpacing1px { letter-spacing: 1px; }
.lineHeight23px { line-height: 1.4375em; }
.lineHeight25px { line-height: 1.5625em; }
.lineHeight27px { line-height: 1.6875em; }

/* loading */
#loading {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	background: #FFFFFF;
	z-index: 2147483647;
}
#loading img { display: none; }

/* top */
#top {
	position: fixed;
	bottom: 20px;
	right: 0px;
	z-index: 2147483647;
	display: none;
}

/* header */
#header {
	width: 100%;
	height: 40px;
	background: #FFFFFF;
	padding: 7px 0px;
	position: fixed;
	z-index: 99;
}
#logo {
	top: -10px;
	left: 40px;
	z-index: 99;
}
#headerFunction {
	top: 2px;
	right: 3%;
}
#headerDelimiter { padding: 0px 10px; }
#searchFunction { margin-left: 55px; }
.websiteLink img { margin-top: -5px; }
#searchKeyword, #searchKeywordM {
	background: #F3F3F3;
	border: 0px #505050 solid;
	font-size: 0.9375em;
	padding: 2px 5px 1px;
}
#searchButtonSubmit img {
	width: 24px;
	margin: -3px 0px 0px -4px;
}
#searchButton {
	top: -10px;
	right: 75px;
	display: none;
}
#searchButtonM img {
	width: 24px;
	margin: -4px 0px 0px -4px;
}
#dropdownMenuButton {
	top: -10px;
	right: 15px;
	display: none;
}
#headerShadow {
	width: 100%;
	height: 3px;
	top: 40px;
	background: url(../img/header/shadow.png) bottom repeat-x;
	position: fixed;
	z-index: 98;
}
#headerBlank { height: 110px; }
#dropdownSearch {
	top: 60px;
	right: 0px;
	background: #009C84;
	padding: 10px;
	display: none;
	position: fixed;
	z-index: 97;
}
#dropdownMenu {
	top: 60px;
	right: 0px;
	display: none;
	position: fixed;
	z-index: 97;
}
.dropdownMenuPaddingTop3px { padding-top: 3px; }
.dropdownMenuItem { padding: 10px 15px 13px 15px; }
.dropdownMenuItem img { height: 18px; }
.dropdownMenuGlobal {
	background: #EBEBEB;
	padding: 20px 15px 13px 15px;
}
.dropdownMenuDelimiter { border-bottom: 1px #FEFEFE solid; }

/* menu */
#menu {
	width: 100%;
	height: 65px;
	position: fixed;
	top: 40px;
	z-index: 97;
	background: url(../img/menu/bg.png);
}
.menuButton { margin: 0px -4px; }
.menuButton img { width: 135px; }

/* pageInfo */
#pageInfo {
    padding: 0;
    margin-top: 6px;
    margin-bottom: 17px;
}
#pageTitle {
    font-size: 2.0625em;
    margin-top: 15px;
    padding-left: 15PX;
    position: relative;
    top: 7px;
}

/*breadcrumb*/
.breadcrumb {
    background-color: transparent;
    text-align: right;
    padding: 0;
    position: absolute;
    width: 100%;
    font-size: 0.938em;
	top:38px;
    right: 43px;
    margin-bottom: 2px;
    z-index: 2;
}
 /*平常顏色*/
a {
    color: #505050;
    text-decoration: none;
	cursor:pointer;
}
 /*滑過反應*/
a:focus, a:hover {
    color: #505050;
    text-decoration: underline;
}
 /*啟動顏色*/
.breadcrumb>.active {
    color: #505050;
}
.breadcrumb>li+li:before {
    padding: 0 5px;
    content: "\003e";
	color: #505050;
}

@media (max-device-width: 480px) {
	.breadcrumb {
    font-size: 0.075em;
    position: relative;
    top: 0;
    left: 0;
	}
}

/*coolies*/
#pageCookie {
    width: 100%;
    bottom: -46px;
    right: 0px;
    padding: 0 30px 0 0;
    position: relative;
}
.cookiemargin {
    margin-bottom: 5px;
}
#pageCookie img { margin-top: -2px; }


/* pageEmpty */
#pageEmptyS {
	width: 100%;
	height: 300px;
	text-align: center;
}
#pageEmptyInfoS {
	margin-top: 250px;
	font-size: 1.1875em;
}
#pageEmptyN {
	width: 100%;
	height: 180px;
	text-align: center;
}
#pageEmptyInfoN {
	margin-top: 200px;
	font-size: 1.1875em;
}

/* footer */
.sitemapMarginBottom5px { margin-bottom: 5px; }
.sitemapMarginTop10px { margin-top: 10px; }
.sitemapMarginTop15px { margin-top: 15px; }
.sitemapMarginTop20px { margin-top: 20px; }
.sitemapPaddingBottom15px { padding-bottom: 15px; }
.sitemapPaddingLeft60px { padding-left: 60px; }
.sitemapPaddingLeft80pxS, .sitemapPaddingLeft80pxN { padding-left: 80px; }
.sitemapPaddingRight20px { padding-right: 20px; }
.sitemapPaddingTop0px { padding-top: 0px; }
.sitemapPaddingTop30px { padding-top: 30px; }
#sitemap {
	background: #333333;
	color: #FEFEFE;
	padding: 30px 0px 35px 0px;
	z-index: 99;
}
.sitemapBorderRightWhite1px { border-right: 1px #FEFEFE solid; }
.sitemapItemS {
	bottom: -5px;
	margin-left: 15px;
}

.footerAnima:hover{
	opacity:0.6;
	text-decoration:underline;
}

#sitemapCloud {
	top: 30px;
	margin-left: 220px;
}
.sitemapItemN {
	float: left;
	margin: 10px 70px 0px 0px;
}

#copyright {
	background: #000000;
	color: #FEFEFE;
	height: 50px;
	text-align: center;
	z-index: 99;
}
#copyright div {
	padding-top: 18px;
	font-size: 0.8125em;
}


/*footer contact*/
#indexContactForm {
    margin: 0px 0 0 8px;
    width: 230px;
}

.indexContect{
/*	height:100px; */
	font-size:1.438em;
	font-weight:600;
	padding: 25px 0px;
/*	text-align: center; */
}

.indexContectTel, .indexContentWord {
    font-size: 1em;
    margin: 0 7px;
    /* float: left; */
    display: inline-block;
	vertical-align: middle;
}

.indexContectCenter{
/*	margin-left: 10% */
	width: 85%;
	margin-left: 8%;
	text-align:center;
}

/*table style*/
.grayTable{
    padding: 6px;
    border: 1px solid #909090;
}
.greenTable{
    padding: 6px;
    border: 1px solid ＃74C5B8;
}

/*video*/
.youtubebox{ width:100%; text-align:center;}
.youtubeVideo{ 
	width:100%;
	max-width:853px;
	display:inline-block;
}
/* Bootstrap */
@media screen and (max-width: 1023px) {
	/* fontSize 
	.fontSize13px { font-size: 0.6875em; }
	.fontSize15px { font-size: 0.8125em; }
	.fontSize17px { font-size: 0.9375em; }
	.fontSize19px { font-size: 1.0625em; }*/

	/* fontOther */
	.lineHeight23px { line-height: 1.3125em; }
	.lineHeight25px { line-height: 1.4375em; }

	/* top */
	#top img {
		width: 50px;
		height: 50px;
	}

	/* header */
	#header {
		height: 60px;
		padding: 10px 0px;
	}
	#logo { margin-left: 10px; }
	#logo img { height: 68px; }
	#headerFunction { display: none; }
	#searchButton, #dropdownMenuButton { display: block; }
	
	#headerShadow { top: 60px; }
	#headerBlank { height: 60px; }

	/* menu */
	#menu { display: none; }

	/* pageInfo */
	#pageTitle { font-size: 1.9375em; }

	/* pageEmpty */
	#pageEmptyS {
		width: 90%;
		height: 150px;
	}
	#pageEmptyInfoS { margin-top: 130px; }
	#pageEmptyN {
		width: 90%;
		height: 80px;
	}
	#pageEmptyInfoN { margin-top: 100px; }

	/* footer */
	.col-height {
		display: block;
		float: left;
	}
	#sitemap { padding: 0px; }
	.sitemapBorderRightWhite1px {
		width: 50%;
		border-right: none;
		border-bottom: navajowhite;
		margin-left: 0;
		padding: 0;
	}
	.sitemapPaddingBottom15px { padding-bottom: 30px; }
	.sitemapPaddingLeft60px, .sitemapPaddingLeft80pxS {
		padding-left: 20px;
	}	
	#sitemapCloud {
		position: relative;
		top: 0px;
		margin: 40px 0px 0px 0px;
	}
	.sitemapPaddingLeft80pxN { padding-left: 35px; }
	.sitemapItemS {
    margin-left: 10px;
	}
	.phsitemapPaddingLeft{     padding-left: 0;}
	
	/*copy right*/
	#copyright {
    height: 35px;
	}
	#copyright div {
    padding-top: 10px;
    font-size: 0.625em;
	}
}

/* Bootstrap */
@media (min-width: 1200px) {
}

@media (max-width: 1199px) and (min-width: 992px) {
}

@media (max-width: 991px) and (min-width: 768px) {
}

@media screen and (max-width: 767px) {
}

/* Responsive Web Design */
@media (min-width: 1441px) {
	/* Bootstrap */
	.container { width: 1440px; }

	/* pageInfo */
	
	
}

@media (max-width: 1440px) and (min-width: 1440px) {
	/* header */
	#headerBlank { height: 108px; }

	/* menu */
	#menu { height: 68px; }
	.menuDelimiter img { height: 68px; }
	.menuButton img { width: 135px; }
	.indexContectCenter {
		width: 86%;
		margin-left: 7.5%;
	}
}

@media (max-width: 1439px) and (min-width: 1280px) {
	/* fontSize 
	.fontSize13px { font-size: 0.6875em; }
	.fontSize15px { font-size: 0.8125em; }
	.fontSize17px { font-size: 0.9375em; }
	.fontSize19px { font-size: 1.0625em; }*/

	/* fontOther */
	.lineHeight23px { line-height: 1.3125em; }
	.lineHeight25px { line-height: 1.4375em; }

	/* header */
	#logo img { height: 114px; }
	#headerFunction { right: 3.2%; }
	#headerBlank { height: 101px; }

	/* menu */
	#menu { height: 61px; }
	.menuDelimiter img { height: 61px; }
	.menuButton img { width: 124px; }

	/* pageInfo */
	#pageTitle { font-size: 1.9375em; }

	/* footer */
	#sitemapCloud { margin-left: 170px; }
	.sitemapItemN { margin-right: 100px; }
	
	/*contact*/
	.indexContectTel, .indexContentWord {
		font-size: 1em;
		margin: 5px 10px;
	}
}

@media (max-width: 1279px) and (min-width: 1024px) {
	/* fontSize 
	.fontSize13px { font-size: 0.6875em; }
	.fontSize15px { font-size: 0.8125em; }
	.fontSize17px { font-size: 0.9375em; }
	.fontSize19px { font-size: 1.0625em; }*/

	/* fontOther */
	.lineHeight23px { line-height: 1.3125em; }
	.lineHeight25px { line-height: 1.4375em; }

	/* header */
	#logo img { height: 99px; }
	#headerFunction { right: 3.4%; }
	#headerBlank { height: 88px; }

	/* menu */
	#menu { height: 48px; }
	.menuDelimiter img { height: 48px; }
	.menuButton img { width: 95px; }

	/* pageInfo */
	#pageTitle { font-size: 1.9375em; }

	/* footer */
	.sitemapPaddingLeft80pxS, .sitemapPaddingLeft80pxN { padding-left: 50px; }
	#sitemapCloud { margin-left: 150px; }
	.sitemapItemN { margin-right: 30px; }
	
		/*contact*/
/*	.indexContect { height: 80px; padding-top: 10px; }
	.indexContectCenter { margin: 10px 0 0 10%;} */
	.indexContectCenter{
		width: 100%;
		margin-left: 0px;
	}
	#indexContactForm{ margin-left:10px;}
	
}

@media (max-width: 991px) and (min-width: 768px) {
	#dropdownMenu {
    width: 200px;}
	/*contact*/
	.indexContectCenter{
		width: 90%;
		margin-left: 5%;
	}
	.indexContectTel, .indexContentWord {
		margin: 0 5px 0 0;
    	font-size: 0.68em;
	}
	/*contact*/
	#indexContactForm {
    margin: 0px 0 0 8px;
    width: 160px;
	}
	.indexContect {
    /* height: 100px; */
    font-size: 1.438em;
    font-size: 26px;
    margin-bottom: 20px;}
	/*footer*/
	.footer-col-ph1{ width:55%;}
	.footer-col-ph2{ width:45%;}
	.footer-vertical-line {
    width: 1px;
    height: calc(100% - 50px);
    background-color: #FFF;
    position: absolute;
    top: 25px;
    right: 0;
	}
	.sitemapPaddingLeft60px, .sitemapPaddingLeft80pxS {
    padding-left: 17%;
	}
	.phsitemapPaddingLeft {
    padding-left: 0;
    margin-left: 0;
	}
	.sitemapItemS{
		font-size:0.938em;
	}
	.sitemapPaddingLeft60px img {
    height: 20px;
	}
	.footer .sitemapMarginTop20px{
		margin-top:15px;
	}
/*	.indexContect {padding-top: 10px;} */
}

@media screen and (max-width: 767px) {
	/*contact*/
	.indexContect{ /* height: 120px; */ font-size:1.6em; /* padding-top: 10px; */ }
	.indexContectTel, .indexContentWord{padding: 5px 0 0 15px;margin: 0;}
	#indexContactForm {
    margin: 10px 0 0 0;
    width: 60%;
	}
	.indexContectCenter{ width:auto;}

	.paddingLR45px {
    padding: 0px 2% 0px 2%;
	}
	/*.absoluteLeft{ right:10px;}*/
	
	/*page title & cookies & banner*/
	#pageCookie {padding:0;}
	#pageTitle {
		position: static;
		font-size: 1.563em;
		margin-top: 5px;
		padding-left: 0;
	}	
	/*phone Navigation*/	
	.phoneBtn{ width:40px; height:40px;}
	#searchButton {right: 60px;}
	#header { height: 40px;}
	#headerShadow {top: 40px;}
	#logo {
    left: 0px;
    MARGIN: 0;
	}
	#logo img {  height: 52px;}
	#dropdownMenu { top: 40px; width: 200px;}
	#dropdownSearch {
    top: 40px;}
	/*footer*/
	.footer-col-ph1{ width:54%;}
	.footer-col-ph2{ width:45%;}
	.footer-vertical-line {
    width: 1px;
    height: calc(100% - 50px);
    background-color: #FFF;
    position: absolute;
    top: 25px;
    right: 0;
	}
	.sitemapPaddingLeft60px, .sitemapPaddingLeft80pxS {
    padding-left: 17%;
	}
	.phsitemapPaddingLeft {
    padding-left: 0;
    margin-left: 0;
	}
	.sitemapItemS{
		font-size:0.938em;
	}
	.sitemapPaddingLeft60px img {
    height: 20px;
	}
	.footer .sitemapMarginTop20px{
		margin-top:15px;
	}
}

@media (max-device-width: 480px) {
	.first-section{margin-top: 0px;}
	#pageInfo {
    padding: 0;
    margin-top: 0;
    margin-bottom: 5px;
	}
	.paddingBottom60px {
    padding-bottom: 10px;
	}
	/* footer */
	#copyright #designer { display: none; }
	/*font*/
	.fontSize17px{ font-size:0.938em;}

	/*contact*/
	.indexContect {
		font-size: 19px;
		padding:15px 0px;
	}
	.indexContentWord {padding: 0;margin: 0;}
	
	.indexContectTel{padding: 0 0 0 15px;margin: 0;}
	
	.indexContectCenter {margin-left: 0; padding: 0 10%;}
	.paddingRight15px {padding-right: 3%}
	.paddingLeft45px {padding-left: 3%;	}
	#pageCookie {
		width: 100%;
		bottom: 5px;
		right: 0px;
		font-size: 0.750em;
	}
	#dropdownMenuButton {
		top: -10px;
		right: 0PX;}
	#searchButton {
		right: 37PX;
	}
	

}

@media (max-device-width: 414px) {
	.indexContectCenter {
		width: 92%;
		padding: 0 0 0 12%;;
	}
	
	
}

@media (max-device-width: 375px) {
	.indexContectCenter {
		width: 98%;
		margin-left: -5%;
	}
	
}

@media (max-device-width: 320px) {
	
}