@charset "utf-8";

/*提醒：綜合指定使用CSS運算函數，在這版Dreamweaver v18.2滑鼠hover時可能會造成死當*/

html,body {
  height: 100%;
  width: 100%;
}

.zh-tw-font{
	font-family: "微軟正黑體";	
}

#myBackTop{
	background:gray;
	height: 40px;
	width: 40px;
	opacity: 0;
	position: fixed;
	right: 0px;
	bottom: 0px;
}

/*************************
********Color Pair********
**************************/
.bg-nav {
    /*文字色 紫藍*/
    color: rgba(35,20,105,1.00);
	/*底色 淺粉藍*/
    background-color: rgba(158,201,242,1.00); 
/*
    color: #AEEAFC;  /*文字色
    background-image: url(../images/SILVER%20BLUE.jpg);  /*底圖，測試期間
    background-size: cover;
    background-position: center center;
*/
}
.cp-remocon {
    /*文字色 紫藍*/
    color: rgba(35,20,105,1.00);
	/*底色 淺粉藍*/
    background-color: rgba(158,201,242,1.00); 
}
.cp-navy {
    /*文字色 小孩藍 HEX:6CA0DC CMYK:56,28,0,0 RGB:108,160,220 PANTONE:16-4132 Little Boy Blue*/
    color: #6CA0DC;
	/*底色 海軍藍 HEX#3F5277 CMYK:N/A RGB#63,82,119 PANTONE:19-4030 True Navy*/
    background-color: #3F5277; 
}
.cp-violet {
	/*文字色 番紅花 HEX:BC6CA7 CMYK:26,69,3,0 RGB:188,108,167 PANTONE:17-3020 Spring Crocus*/
    color: #D3A1E6;  
    /*底色 紫羅蘭 HEX:#645394 CMYK:72,77,11,1 RGB:100,83,148 PANTONE:18-3838 Ultra Violet*/
	background-color: #645394;
}
.bg-lgray {
    background-color: #D2D4D6;
}
.bg-cyan {
	background-color: #0CE3F6;
}

.bg-coconutmilk {
	/*椰奶 HEX#F0EDE5 CMYK:5,4,8,0 RGB#239,237,229 PANTONE:11-0608 Coconut Milk*/
	background-color: #F0EDE5;
}
.text-coconutmilk {
    /*椰奶 HEX#F0EDE5 CMYK:5,4,8,0 RGB#239,237,229 PANTONE:11-0608 Coconut Milk*/
    color: #F0EDE5;
}

.bg-navy {
	/*海軍藍 HEX#3F5277 CMYK:N/A RGB#63,82,119 PANTONE:19-4030 True Navy*/
    background-color: #3F5277;  
}
a.bg-navy:hover, a.bg-navy:focus,
button.bg-navy:hover,
button.bg-navy:focus {
    background-color: #344464;
}
.text-navy {
    /*海軍藍 HEX#3F5277 CMYK:N/A RGB#63,82,119 PANTONE:19-4030 True Navy*/
    color: #344362;
}
a.text-navy:hover, a.text-navy:focus {
 	color: #344464; 
}

.bg-sailorblue {
	/*水手藍 HEX:#2E4A62 CMYK:87,66,42,27 RGB:46,74,97 PANTONE:19-4034 Sailor Blue*/
    background-color: #2E4A62;  
}
a.bg-sailorblue:hover, a.bg-sailorblue:focus,
button.bg-sailorblue:hover,
button.bg-sailorblue:focus {
    background-color: #253B4F;
}
.text-sailorblue { 
  /*水手藍 HEX:#2E4A62 CMYK:87,66,42,27 RGB:46,74,97 PANTONE:19-4034 Sailor Blue*/
	color: #2E4A62;   
}
a.text-sailorblue:hover, a.text-sailorblue:focus {
	color: #253B4F;
}


.myFS050{
	font-size: 0.5em;	
}
.myFS075{
	font-size: 0.75em;	
}
.myFS100{
	font-size: 1.0em;	
}
.myFS110{
	font-size: 1.10em;	
}
.myFS115{
	font-size: 1.15em;	
}
.myFS120{
	font-size: 1.20em;	
}
.myFS125{
	font-size: 1.25em;	
}
.myFS130{
	font-size: 1.30em;	
}
.myFS135{
	font-size: 1.35em;	
}
.myFS140{
	font-size: 1.40em;	
}
.myFS150{
	font-size: 1.50em;	
}
.myFS200{
	font-size: 2.0em;	
}
.myFS300{
	font-size: 3.0em;	
}
.myFS400{
	font-size: 4.0em;	
}

.col-250, .col-175, .col-150, .col-125, 
.col-sm-250, .col-sm-175, .col-sm-150, .col-sm-125, 
.col-md-250, .col-md-175, .col-md-150, .col-md-125, 
.col-lg-250, .col-lg-175, .col-lg-150, .col-lg-125, 
.col-xl-250, .col-xl-175, .col-xl-150, .col-xl-125 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-250 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 20.833333%;
	flex: 0 0 20.833333%;
	max-width: 20.833333%;
}
.col-175 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 14.583333%;
	flex: 0 0 14.583333%;
	max-width: 14.583333%;
}
.col-150 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 12.500000%;
	flex: 0 0 12.500000%;
	max-width: 12.500000%;
}
.col-125 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 10.416667%;
	flex: 0 0 10.416667%;
	max-width: 10.416667%;
}
/* 
** Mobile first觀念下，Media Query建議用 min-width 尺寸由小設定到大 。 
** min-width 表示這個數字以上(包含)的尺寸都適用，( >= )。
** @media (min-width: 576px) { ... }
** @media (min-width: 768px) { ... }
** @media (min-width: 992px) { ... }
** @media (min-width: 1200px) { ... }
*/
/* 當螢幕寬度>=768px含以上適用 */
@media (min-width: 576px) {
	.col-ms-250 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 20.833333%;
		flex: 0 0 20.833333%;
		max-width: 20.833333%;
	}
	.col-ms-175 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 14.583333%;
		flex: 0 0 14.583333%;
		max-width: 14.583333%;
	}
	.col-ms-150 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 12.500000%;
		flex: 0 0 12.500000%;
		max-width: 12.500000%;
	}
	.col-ms-125 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 10.416667%;
		flex: 0 0 10.416667%;
		max-width: 10.416667%;
	}
}
@media (min-width: 768px) {
	.col-md-250 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 20.833333%;
		flex: 0 0 20.833333%;
		max-width: 20.833333%;
	}
	.col-md-175 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 14.583333%;
		flex: 0 0 14.583333%;
		max-width: 14.583333%;
	}
	.col-md-150 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 12.500000%;
		flex: 0 0 12.500000%;
		max-width: 12.500000%;
	}
	.col-md-125 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 10.416667%;
		flex: 0 0 10.416667%;
		max-width: 10.416667%;
	}	
}
@media (min-width: 992px) {
	.col-lg-250 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 20.833333%;
		flex: 0 0 20.833333%;
		max-width: 20.833333%;
	}
	.col-lg-175 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 14.583333%;
		flex: 0 0 14.583333%;
		max-width: 14.583333%;
	}
	.col-lg-150 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 12.500000%;
		flex: 0 0 12.500000%;
		max-width: 12.500000%;
	}
	.col-lg-125 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 10.416667%;
		flex: 0 0 10.416667%;
		max-width: 10.416667%;
	}	
}
@media (min-width: 1200px) {
	.col-xl-250 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 20.833333%;
		flex: 0 0 20.833333%;
		max-width: 20.833333%;
	}
	.col-xl-175 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 14.583333%;
		flex: 0 0 14.583333%;
		max-width: 14.583333%;
	}
	.col-xl-150 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 12.500000%;
		flex: 0 0 12.500000%;
		max-width: 12.500000%;
	}
	.col-xl-125 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 10.416667%;
		flex: 0 0 10.416667%;
		max-width: 10.416667%;
	}	
}

/*************************
*******Header Page********
**************************/
.bg-toggler{
	background-color: #18bc9c;
}

#mainNav{
	font-weight: 700;
}
#mainNav .navbar-nav{
	margin-top: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}
#mainNav .navbar-brand{
	color: rgba(35,20,105,1.00);  /*請配合文字色修改*/
}
#mainNav .navbar-nav li.nav-item a.nav-link{
	color: rgba(35,20,105,1.00);  /*請配合文字色修改*/
}
#mainNav .navbar-nav li.nav-item a.nav-link:hover{
	color: #15E032;
}
#mainNav .navbar-nav li.nav-item a.nav-link:active{
    color: #18bc9c;
}
#mainNav .navbar-nav li.nav-item a.nav-link:focus{
	color: #fff;
	border-radius: 15px;
	background-color: #18bc9c;
}

.h-menu {
    height: 100px;
	width: 100%;
}
.h-menu-inner {
	height: 100px;
	width: 100%;
	margin-left: 0px;
	margin-right: auto;
}
.h-menu .h-menu-inner ul {
	height: 100px;	
	margin: 0;
	padding: 0 10px 0;	
}
.h-menu-inner ul li {
	float: left;	
	font-size: 1.25em;	
	list-style-type: none;
	width: 100px;	
	font-weight: 700;	
}
.h-menu-inner ul li a {
	display: block;
	color: rgba(35,20,105,1.00);  /*請配合文字色修改*/
	line-height: 25px;
	text-align: center;
	text-decoration: none;
	/*border-right: 1px dashed #F9F3F3;*/
}
.h-menu-inner ul li a:hover {
	background-color: #2166F1;	
	color: #F9F9F9;
}
.h-menu-inner ul li a:focus {
	background-color: #EBEF60;
	color: #1E41C7;	
}
.h-menu-inner ul li a:active {
  background-color: transparent;
  color: #F4060A;	
  text-decoration: underline;	
}
.h-menu-fab {
    /*background-color: #fff;*/
    /*border: 1px solid #fff;*/
	font-size: 1.50em;		
}
.h-menu-logo{
  width: 300px;
  height: auto;
}
.h-menu-flag-li{
	margin-left: 3px;
	width: 50px;
    max-width: 50px;
}	
.h-menu-flag-img{
	height: 30px;
	width: 45px;
}
/* 
** 傳統桌機網頁觀念下，Media Query習慣用 max-width 尺寸由大設定到小 。 
** max-width 表示這個數字以下(包含)的尺寸都適用，( <= )。
** @media (max-width: 1200px) {...}
** @media (max-width: 992px) {...}
** @media (max-width: 768px) {...}
** @media (max-width: 576px) {...}
** @media (max-width: 480px) {...}
*/
/* 當螢幕寬度<=992px含以下適用 */
@media (max-width:992px){
	.h-menu .h-menu-inner ul {
		height: 50px;		
		margin: 0;
		padding: 0 7px 0;	
	}
	.h-menu-inner ul li {
		float: left;	
		font-size: 1.25em;		
		list-style-type: none;
		width: 80px;
		font-weight: 700;
	}
    .h-menu-inner ul li a {
        display: block;
        color: rgba(35,20,105,1.00);  /*請配合文字色修改*/
        line-height: 25px;
        text-align: center;
        text-decoration: none;
        /*border-right: 1px dashed #F9F3F3;*/
    }    
	.h-menu-logo{
	  width: 300px;
	  height: auto;
	}	
	.h-menu-flag-li{
		margin-left: 5px;
		width: 50px;

	}	
	.h-menu-flag-img{
		height: 30px;
		width: 45px;
	}		
}
/* 當螢幕寬度<=768px含以下適用，故意，為了解決iPad尺寸768*1024 */
@media (max-width:768px){
	.h-menu .h-menu-inner ul {
		height: 50px;		
		margin: 0;
		padding: 0 3px 0;	
	}
	.h-menu-inner ul li {
		float: left;	
		font-size: 1.75em;
		list-style-type: none;
		width: 50px;
		font-weight: 700;		
	}
    .h-menu-inner ul li a {
        display: block;
        color: rgba(35,20,105,1.00);  /*請配合文字色修改*/
        line-height: 25px;
        text-align: center;
        text-decoration: none;
        /*border-right: 0px;*/
    } 
	.h-menu-logo{
	  width: 250px;
	  height: auto;
	}	
	.h-menu-flag-li{
		margin-left: 3px;
		width: 50px;

	}	
	.h-menu-flag-img{
		height: 30px;
		width: 45px;
	}	
}
/* 當螢幕寬度<=570px含以下適用 */
@media (max-width:570px){
	.h-menu .h-menu-inner ul {
		height: 50px;		
		margin: 0;
		padding: 0 1px 0;	
	}
	.h-menu-inner ul li {
		float: left;	
		font-size: 1.75em;
		list-style-type: none;
		width: 45px;
		font-weight: 700;		
	}
    .h-menu-inner ul li a {
        display: block;
        color: rgba(35,20,105,1.00);  /*請配合文字色修改*/
        line-height: 25px;
        text-align: center;
        text-decoration: none;
        /*border-right: 0px;*/
    }  
	.h-menu-logo{
	  width: 200px;
	  height: auto;
	}	
	.h-menu-flag-li{
		margin-left: 3px;
		width: 45px;

	}	
	.h-menu-flag-img{
		height: 27px;
		width: 40px;
	}			
}
/* 當螢幕寬度<=480px含以下適用 */
@media (max-width:480px){
	.h-menu .h-menu-inner ul {
		height: 50px;		
		margin: 0;
		padding: 0 0px 0;	
	}
	.h-menu-inner ul li {
		float: left;	
		font-size: 1.75em;
		list-style-type: none;
		width: 40px;
		font-weight: 700;		
	}
    .h-menu-inner ul li a {
        display: block;
        color: rgba(35,20,105,1.00);  /*請配合文字色修改*/
        line-height: 25px;
        text-align: center;
        text-decoration: none;
        /*border-right: 0px;*/
    }  
	.h-menu-logo{
	  width: 175px;
	  height: auto;
	}
	.h-menu-flag-li{
		margin-left: 2px;
		width: 40px;

	}	
	.h-menu-flag-img{
		height: 27px;
		width: 40px;
	}		
}


/*************************
*******Footer Page********
**************************/

/*************************
*******Main Page**********
**************************/

.top-container{
	height: 100px;
}
.foot-container{
    height: 300px;
}
/* 當螢幕寬度>=480px含以上適用 */
@media (min-width:480px){
	.top-container{
		height: 100px;
	}
	.foot-container{
		height: 300px;
	}
}
/* 當螢幕寬度>=576px含以上適用 */
@media (min-width:576px){
	.top-container{
		height: 100px;
	}
	.foot-container{
		height: 300px;
	}
}
/* 當螢幕寬度>=768px含以上適用 */
@media (min-width:768px){
	.top-container{
		height: 100px;
	}
	.foot-container{
		height: 250px;
	}
}
/* 當螢幕寬度>=992px含以上適用 */
@media (min-width:992px){
	.top-container{
		height: 100px;
	}
	.foot-container{
		height: 150px;
	}
}
/* 當螢幕寬度>=1200px含以上適用 */
@media (min-width:1200px){
	.top-container{
		height: 100px;
	}
	.foot-container{
		height: 100px;
	}
}


.no-margin {
  margin: 0;
  padding: 0;
}

.carousel{
	height:50%;
}

.carousel-caption {
	position: absolute;
	top: 0;
	display: flex;
	align-items: center;
	height: 100%;
}

.carousel-item, .active, .carousel-inner {
	height:100%; 
}

.fill {
	width:100%;
	height:100%;
	background-position: center;
	background-size: cover;
}

.carousel-indicators .active {
	background-color: rgba(248,109,27,0.70);
}

.carousel-indicators li {
	position: relative;
	-webkit-box-flex: 0;
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	width: 20px;
	height: 20px;
	margin-right: 3px;
	margin-left: 3px;
	text-indent: -999px;
	border-radius: 10px;
	background-color: rgba(255,255,255,0.30);
}

/*左右箭頭圖*/
.carousel-control-prev img,.carousel-control-next img{
	position: absolute;
	top: 50%;
	/*圖高一半*/
	margin-top: -25px;
}
.carousel-control-prev img{
	right:50%
}
.carousel-control-next img{
	left:50%
}

/* 
** 傳統桌機網頁觀念下，Media Query習慣用 max-width 尺寸由大設定到小 。 
** max-width 表示這個數字以下(包含)的尺寸都適用，( <= )。
** @media (max-width: 1200px) {...}
** @media (max-width: 992px) {...}
** @media (max-width: 768px) {...}
** @media (max-width: 576px) {...}
** @media (max-width: 480px) {...}
*/
@media (max-width:992px){
	.carousel-control-prev img,.carousel-control-next img{
		transform: scale(0.8)
	}
	.carousel-control-prev img{
		right:30%
	}
	.carousel-control-next img{
		left:30%
	}	
}

@media (max-width:768px){
	.carousel-control-prev img,.carousel-control-next img{
		transform: scale(0.6)/
	}
	.carousel-control-prev img{
		right:20%
	}
	.carousel-control-next img{
		left:20%
	}	
}

@media (max-width:576px){
	.carousel-control-prev img,.carousel-control-next img{
		transform: scale(0.4)
	}
	.carousel-control-prev img{
		right:10%
	}
	.carousel-control-next img{
		left:10%
	}	
}


/*************************
*******Products Page******
**************************/
.mybreadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: rgba(158,201,242,1.00);  /*請配合底色修改*/
  border-radius: 0.25rem;
  height: 40px;
}
.mybreadcrumb-item + .mybreadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  color: rgba(35,20,105,1.00);  /*請配合文字色修改*/
  content: "/";
}
.mybreadcrumb-item + .mybreadcrumb-item:hover::before {
  text-decoration: underline;
}
.mybreadcrumb-item + .mybreadcrumb-item:hover::before {
  text-decoration: none;
}
.mybreadcrumb-item.active {
  color: rgba(35,20,105,1.00);  /*請配合文字色修改*/
}
.mybreadcrumb-item a {
  color: rgba(35,20,105,1.00);  /*請配合文字色修改*/
}
.mybreadcrumb-item a:hover {
	color: #F9F9F9;
	background-color: #2166F1;	
}

.portfolio{
	/*background-color: #a6e8a1;*/
	margin-bottom:-15px; 
}
.portfolio .portfolio-item{
	position: relative;
	display: block;
	max-width: 25rem;
	margin-bottom: 15px
}
.portfolio .portfolio-item .portfolio-item-caption{
	transition: all ease .5s;
	opacity: 0;
	background-color: rgba(24,188,156,.9);
	-webkit-box-align: center;
	-ms-flex-align: center;  /*IE要加這列，否則垂直不會置中*/
	align-items: center;		
}
.portfolio .portfolio-item .portfolio-item-caption:hover{
	opacity: 0.6;
}
.portfolio .portfolio-item .portfolio-item-caption .portfolio-item-caption-content{
	font-size: 1.5rem;
}

/* 當螢幕寬度>=576px含以上適用 */
@media (min-width:576px){
	.portfolio{
		margin-bottom: -15px;
	}
	.portfolio .portfolio-item{
		margin-bottom: 15px;
	}
}


hr.header-line,hr.portfolio-line,hr.products-line,hr.about-line,hr.support-line,hr.contact-line,ht.faq-line{
	max-width: 25rem;
	padding: 0;
	text-align: center;
	border: 1px solid #FFFFFF; /*hr線條顏色*/
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
	margin-right: auto;  /*IE要加這列，否則水平不會置中*/
	margin-left: auto;  /*IE要加這列，否則水平不會置中*/
}
hr.portfolio-line:after{
	color: #FFFFFF;  /*請配合上述hr線條顏色修改*/
	background-color: rgba(158,201,242,1.00);  /*請配合底色修改，這是產品放大鏡符號底色顏色*/
	position: relative;
	top: -.8em;
	display: inline-block;
	padding: 0 .25em;
	font-size: 3em;
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
	content: '\f002';
}
hr.about-line:after{
	color: #FFFFFF;  /*請配合上述hr線條顏色修改*/
	background-color: rgba(158,201,242,1.00);  /*請配合底色修改，這是產品放大鏡符號底色顏色*/
	position: relative;
	top: -.8em;
	display: inline-block;
	padding: 0 .25em;
	font-size: 3em;
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
	content: '\f559';
}
hr.support-line:after{
	color: #FFFFFF;  /*請配合上述hr線條顏色修改*/
	background-color: rgba(158,201,242,1.00);  /*請配合底色修改，這是產品放大鏡符號底色顏色*/
	position: relative;
	top: -.8em;
	display: inline-block;
	padding: 0 .25em;
	font-size: 3em;
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
	content: '\f013';
}
hr.contact-line:after{
	color: #FFFFFF;  /*請配合上述hr線條顏色修改*/
	background-color: rgba(158,201,242,1.00);  /*請配合底色修改，這是產品放大鏡符號底色顏色*/
	position: relative;
	top: -.8em;
	display: inline-block;
	padding: 0 .25em;
	font-size: 3em;
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
	content: '\f2bb';
}

h2.section-subheading{
	font-size: 16px;
	font-weight: 300;
	font-style: italic;
	margin-bottom: 75px;
}


/*************************
*******Suppourt Page******
**************************/


/*************************
**********Faq Page********
**************************/
.myFaqcard {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	/*background-color: #fff;*/
	color: rgba(35,20,105,1.00);  /*請配合文字色修改*/
	background-clip: border-box;
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: 0.25rem;	
}
.myFaqcard-header {
	/*background-color: rgba(0, 0, 0, 0.03);*/
	border-bottom: 1px solid rgba(0, 0, 0, 0.125);	
	padding: 0.75rem 1.25rem;
	margin-bottom: 0;
}
.myFaqcard-body {
	background-color: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(0, 0, 0, 1);	
	color: #FFF;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	padding: 1.25rem;
    font-size: 1.1em;
    font-weight: 700;
    line-height: 25px;	
}
.myFaqcard-Link {
    display: block;
    color: rgba(35,20,105,1.00);  /*請配合文字色修改*/
    font-size: 0.9em;
    font-weight: 400;
    line-height: 25px;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    text-align: left;
}
.myFaqcard-Link span{
    font-size: 1.2em;
    font-weight: 700;
    line-height: 25px;	
}
.myFaqcard-Link:hover {
	background-color: #2166F1;	
	color: #F9F9F9;
  	text-decoration: underline;	
}
.myFaqcard-Link:focus {
	background-color: #EBEF60;
	color: #1E41C7;	
}
.myFaqcard-Link:active {
	background-color: transparent;
	color: #F4060A;	
	text-decoration: underline;	
}
.myFaqcard-Link-Active {
	background-color: transparent;
	color: #F4060A;		
}

/*************************
*********About Page********
**************************/
.myAboutcard {
	/*background-color: #fff;*/
	color: rgba(35,20,105,1.00);  /*請配合文字色修改*/
	background-clip: border-box;
	/*border: 1px solid rgba(0, 0, 0, 0.125);*/
	border-radius: 0.25rem;	
	min-width: 0;
	height: 300px;
	word-wrap: break-word;
	position: relative;	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;	
    /*圖水平垂直置中做法三<div>
	display: table;
	*/		
	/*圖水平垂直置中做法四<div>
	width: 182px;
	height: 182px;	
	display: block;
	position: relative;*/
	/*圖水平垂直置中做法五<div>次簡單
	display: flex;
	align-items: center;
	justify-content: center;
	*/
	/*圖水平垂直置中做法六<div>
	width: 182px;
	height: 182px;	
    position: relative;
    font-size: 0;
	*/
}
.myAboutcard-img {
	border-top-left-radius: calc(0.25rem - 1px);  /*提醒：綜合指定使用CSS運算函數，在這版Dreamweaver v18.2滑鼠hover時可能會造成死當*/
	border-top-right-radius: calc(0.25rem - 1px);
	border-bottom-right-radius: calc(0.25rem - 1px);
	border-bottom-left-radius: calc(0.25rem - 1px);
	width: 50%;
	max-width: 100%;
	/*圖水平垂直置中做法一<img>最簡單*/
	display: block;  
	margin: auto;	
    /*圖水平垂直置中做法三<img>
	display: table-cell;
	vertical-align:middle;
	text-align: center;
	*/
	/*圖水平垂直置中做法四<img>
	top: calc(50% - 25px);
	left: calc(50% - 25px);
	position: absolute;
	*/
}
.myAboutcard-img:hover {
	width: 80%;
}
.myAboutcard-header {
	color: #FFF;
	padding: 0.75rem 1.25rem;
	margin-bottom: 0;
}
.myAboutcard-footer {
	color: #FFF;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}

/*圖水平垂直置中做法六，比較複雜，好處是，裡面的圖片可以自適應外面的框架
    .ex6-box{
     width: 150px;
     height: 150px;
     max-width:  100%;
     background-color:  #eb9700;
     position: relative;
     font-size: 0;
    }
    .ex6-img{
     width:100%; 
     height: 100%;
     position: absolute;
     text-align: center;
    }
    .ex6-img:before{
     content: ' '; 
     display: inline-block;
     height: 100%;
     width: 0;
     vertical-align: middle;
    }
    .ex6-img img{
     max-width: 100%; 
     max-height: 100%;
     width: auto;
     height: auto;
     display: inline-block;
     vertical-align: middle;
    }
*/

/*************************
*******Contact Page*******
**************************/
.vert-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.vert-text h1 {
	padding: 0;
	margin: 0;
	/*font-size: 4em;*/
	font-weight: 700;
}
.myCallout1 {
    color: #fff;
    display: table;
    height: 250px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../images/callout3.jpg);
    background-attachment: fixed;
    background-size: cover;
    margin: 50px 0px;
    padding: 0;
}
.myCallout2 {
    color: #fff;
    display: table;
    height: 250px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../images/callout2.jpg);
    background-attachment: fixed;
    background-size: cover;
    margin: 50px 0px;
    padding: 0;
}
.myForm1{
	background-color: #fff;	
	color: #000;
	font-size: 1.2em;
	height: 1200px;	
	width: 100%;
    margin-right: 0;
    margin-left: 0;	
}
.myMap1 {
    height: 100%;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    background-color: rgba(249,249,249,0.50);
    border: 5px solid rgba(61,100,167,1.00);
    border-radius: 30px;
    padding: 0px;
    -webkit-box-shadow: 0px 10px 10px rgba(118,118,118,1.00);	
    box-shadow: 0px 10px 10px rgba(118,118,118,1.00);
}
/* 當螢幕寬度>=768px含以上適用 */
@media (min-width:768px){
	.myForm1{
		background-color: #fff;	
		color: #000;
		font-size: 1.2em;
		height: 650px;	
		width: 100%;
		margin-right: 0;
		margin-left: 0;		
	}	
	.myMap1 {
		height: 80%;
		width: 80%;
		margin-right: 10%;
		margin-left: 10%;
		background-color: rgba(249,249,249,0.50);
		border: 5px solid rgba(61,100,167,1.00);
		border-radius: 30px;
		padding: 20px;
		-webkit-box-shadow: 0px 10px 10px rgba(118,118,118,1.00);	
		box-shadow: 0px 10px 10px rgba(118,118,118,1.00);
	}
}
/* 當螢幕寬度>=992px含以上適用 */
@media (min-width:992px){
	.myForm1{
		background-color: #fff;	
		color: #000;
		font-size: 1.2em;
		height: 550px;	
		width: 100%;
		margin-right: 0;
		margin-left: 0;		
	}	
	.myMap1 {
		height: 80%;
		width: 80%;
		margin-right: 10%;
		margin-left: 10%;
		background-color: rgba(249,249,249,0.50);
		border: 5px solid rgba(61,100,167,1.00);
		border-radius: 30px;
		padding: 20px;
		-webkit-box-shadow: 0px 10px 10px rgba(118,118,118,1.00);	
		box-shadow: 0px 10px 10px rgba(118,118,118,1.00);
	}
}
.myFormBody {
	background-image: url(../images/QAbg.png);
	background-repeat: repeat;
}

/*************************
***RWD Youtube 以及 Video***
**************************/
.video-container{
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;height:0;overflow:hidden;
} 

.video-container iframe,.video-container object,.video-container embed{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}