@import url("reset.css?v=8.3");
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500&family=Noto+Serif+TC:wght@400&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400&display=swap'); */

html, body{
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}


body{
	position: relative;
	/* background-size: cover; */
	/* min-height:100%; */
	color: #646158;
	line-height: 1.6;
	height: 100vh;
	width: 100vw;
}

p{
	font-weight: 400!important;
	margin-bottom:0;
	line-height: 1.7;
}

p.small{
	font-size: .8rem!important;
}

p.font-b{
	font-weight: bold!important;
}

a.moreBtn{
	text-decoration: none;
	width:auto;
	height:auto;
	color:#fff;
	background: #8e5fa2;
	border-radius: 5px;
	font-size: .8rem;
	font-weight: 300;
	display: flex;
	padding: 0.1rem 0.3rem;
	transition: .3s all ease-in-out;
	-webbkit-transition: .3s all ease-in-out;
	-moz-transition: .3s all ease-in-out;
}

a.moreBtn:hover{
	background: #a781b8;
}

a.card-linkBtn:hover{
	text-decoration: none;
	background: #fff;
}

a.card-linkBtn:hover h5.color-dBlue{
	color: #9C8DE8!important;
}


.pageContainer{
	padding-top:1rem;
}

.pageBreadcrumb{
	color: #999;
	margin: 0 auto;
	width: 100%;
	font-size: 13px;
	line-height: 40px;
	height: 40px;
	/* border-top: 1px solid #e0e0e0; */
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 1.5rem;
}

.pageBreadcrumb nav ol li a{
	color:#8e5fa2;
}

.breadcrumb-item+.breadcrumb-item::before{
	color:#8e5fa2!important;
}

.dropdown-menu{
	border-radius: 0!important;
}

.w-fitcnt{
	width: fit-content!important;
}

.border-top{
	border-top: 1px solid #cecece;
}

.border-bt{
	border-bottom: 1px solid #cecece;
}

.goDownBtn{
	width:100%;
	padding:.5rem 0;
	text-align: center;
	
}

.pageBody .pageTitle h2{
	line-height: 2;
	font-size: 1.5rem;
	color: #333;
}

#videoWrapper{
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
}

#videoWrapper iframe{
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
}

.bg-gold{
	background: #ac8f6a!important;
	color:#fff!important;
	
}

 a.bg-gold.btn{
	color:#fff!important;
}

ul.ul-linkList{
	margin: 0;
}

ul.ul-linkList li{
	border-bottom: 1px solid #d5d5d5;
}

ul.ul-linkList li:last-child{
	border-bottom:0;
}

ul.ul-linkList li a:link,
ul.ul-linkList li a:visited{
	padding:.35rem .5rem; 
	text-decoration: none;
	color:#000;
	font-size: 1rem;
	display: block;
	transition: .2s;
}

ul.ul-linkList li a:hover{
	color:#7a4891;
}


ul.ul-linkList li a span{
	font-size: .8rem;
	margin-right:.35rem;
	color:#777;
}

.title-row{
	align-items: center;
	justify-content: space-between;
	margin-bottom: .3rem;
}

.title-row h5:before{
	content:'';
	width:100%;
	height: 10px;
	display: block;	
	margin-bottom: 0.3rem;
	background: #8e5fa2;
}

.color-gold{
	color: #083356!important;
}

.color-gray{
	color: #8f9086!important;
}

.color-dBlue{
	color: #001e5f!important;
}

.indexHeaderWrapper{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	
}

.indexHeaderWrapper .indexHeaderBoder {
	width: 55%;
	height: auto;
	padding: 0 3rem;
	text-align: left;
	position: relative;
	top: 30%;
}

.indexHeaderWrapper .indexHeaderBoder p{
	color:#fff;
	margin-bottom: 1rem;
	font-size: .9rem;
}

.indexHeaderWrapper .indexHeaderBoder h5{
	color:#fff;
	font-size: 2.5rem;
	font-weight: 300;
}

.carousel-caption{
	position: relative;
	right: 0; 
	bottom: 0;
	left: 0;
}

.arrowDown{
	display: none;
	/* width:64px;
	height:64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius:32px;
	position: absolute;
	left:50%;
	bottom:5%; */
}


body.index .aboutUs p{
	line-height: 1.8;
}


#loading{
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 999999;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

#loading img{
	width: 10%;
	height: auto;
	position: absolute;
	top:0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}


.mainContent{
	width: 100%;
	padding:0;
}


.mainContent section{
	padding:2.5rem 0;
}

.mainContent .row{
	margin:0;
	margin-bottom: 1.5rem;
}

section h3{
	font-size: 1.75rem;
	line-height: 1.4;
	margin: 2rem auto;
	text-align: center;
	font-weight: 600;
}

section h4{
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.5;
	margin: .6rem auto;
	text-align: left;
	color:#3f8cbc;
}

section h4:before{
	content: '✢ ';
}

.pageSubMenu{
	padding-bottom: 1.5rem;
	display: flex;
	width: 100%;
	justify-content: center;
}

.pageSubMenu.forP3{
	width: 80%;
	margin:0 auto;
}


.breadcrumb{
	padding-left: 0;
}

.breadcrumb-row{
	display: block;
}


#hero {
	height: 800px;
	overflow: hidden;
	position: relative;
	max-width: 1920px;
	margin: 0 auto;
}

/* .layer {
	background-position: bottom center;
	background-size: auto;
	background-repeat: no-repeat;
	width: 100%;
	height: 800px;
	position: fixed;
} */

ol.carousel-indicators{
	list-style: none;
}


.for_m{
	display: none;
}

.for_pc{
	display: block;
}

.clearBoth{
	clear: both;
}

.ml-1{
	margin-left: 1rem;
}

.ml-2{
	margin-left: 2rem;
}

.mr-1{
	margin-right: 1rem;
}

.mr-2{
	margin-right: 2rem;
}

.mr-5{
	margin-right: 5rem;
}

.mx-auto{
	margin:0 auto!important;
}

.mb-1{
	margin-bottom: .5rem!important;
}

.mb-2{
	margin-bottom: 1rem!important;
}

/* .mb-3{
	margin-bottom: 1.5rem!important;
} */

.mb-4{
	margin-bottom: 2rem!important;
}


/* padding */
.pt-7{
	padding-top:7rem;
}

.pt-8{
	padding-top:8rem;
}

.pt-9{
	padding-top:9rem;
}

.pt-10{
	padding-top:10rem;
}

/* display */
.fontSize-5{
	font-size: 2rem;
}

.fontSize-6{
	font-size: 1.6rem;
}

.fontSize-7{
	font-size: 1.2rem;
}

.fontSize-8{
	font-size: 1rem;
}

h6.cnt-title{
	font-size: 1.2rem;
	color: #083356;
}

.cnt-txtBox .cnt-body h6{
	line-height: 1.3;
	margin-bottom:.25rem;
}

.cnt-txtBox .cnt-body p{
	line-height: 1.2;
}

.cnt-body a:link, .cnt-body a:visited{
	text-decoration: none;
	color:#333;
}

.cnt-body a:hover p{
	text-decoration: underline;
}

.text-center{
	text-align: center!important;
}

.flexBox{
	display: flex;
}

.flex-direction-column{
	flex-direction: column!important;
}

.flex-align-end{
	align-items: flex-end;
}

.flex-align-center{
	align-items: center;
}

.flex-align-start{
	align-items: flex-start;
}

.flex-align-baseline{
	align-items: baseline;
}

.flex-justify-content-sa{
	justify-content: space-around;
}

.flex-justify-content-sb{
	justify-content: space-between;
}

.flex-justify-content-fe{
	justify-content: flex-end;
}

.border-radius-8{
	border-radius: 8px;
}

.b6-swep3-img-pos1{
	z-index: 9;
	top:-65%;
	left: 0;
}

.b6-swep3-img-pos2{
	z-index: 9;
	right:-10px;
	top:-5%;
}

.b6-swep3-img-pos3{
	z-index: 1;
	left: 4%;
	top: 15%;
}

.b6-swep3-img-pos4{
	z-index: 1;
	right: 15%;
	bottom: 15%;
}

.b6-swep5-img-pos1{
	z-index: 1;
	left: 0;
	top: 0;
}

.px-5px{
	padding-left:5px!important;
	padding-right:5px!important;
}

.w-20{
	max-width:20%!important;
}

.w-50{
	width:50%!important;
}

.w-60{
	width:60%!important;
}

.w-70{
	width:70%!important;
}

.w-80{
	width:80%!important;
}

.w-100{
	width:100%!important;
}

.w-80-100{
	width:80%!important;
}

.w-10-img{
	width:10%;
	height:auto;
}

.w-15-img{
	width:15%;
	height:auto;
}

.w-20-img{
	width:20%;
	height:auto;
}

.w-25-img{
	width:25%;
	height:auto;
}

.w-30-img{
	width:30%;
	height:auto;
}

.w-40-img{
	width:40%;
	height:auto;
}

.w-50-img{
	width:50%;
	height:auto;
}

.w-60-img{
	width:60%;
	height:auto;
}

.w-70-img{
	width:70%;
	height:auto;
}


.w-80-img{
	width:80%!important;
	height:auto;
}

.w-100-img{
	width:100%;
	height:auto;
}


.fontWeight-300{
	font-weight: 300!important;
}

.fontWeight-500{
	font-weight: 400!important;
}

.p-10{
	padding: 10px!important;
}

.p-20{
	padding: 20px!important;
}

.py-1rem{
	padding-top:1rem!important;
	padding-bottom:1rem!important;
}

.py-2rem{
	padding-top:2rem!important;
	padding-bottom:2rem!important;
}

.py-3rem{
	padding-top:3.3rem!important;
	padding-bottom:3.3rem!important;
}

.py-4rem{
	padding-top:4rem!important;
	padding-bottom:4rem!important;
}

.py-5rem{
	padding-top:5rem!important;
	padding-bottom:5rem!important;
}

.pos-relative{
	position: relative!important;
}

.pos-absolute{
	position: absolute!important;
}

h4.cust-h4{
	line-height: 3.5;
}

h4.cust-h4-2{
	color:#001e5f;
	font-weight: bold;
	font-size: 1.3rem;
}

h4.fix_padding{
	padding-left:5.15rem;
}

a.current{
	color:#001e5f!important;
}

.rwd-center-left{
	text-align: center;
}

.borderLeft{
	border-left: 1px solid #333;
}

.lightBorder{
	width: 100%;
	border: 1px solid #cecece;
	padding: 1rem 0;
	margin-bottom:1.5rem!important;
}

.color-darkb{
	color:#001e5f!important;
}



.color-white{
	color:#fff!important;
}

.color-gray{
	color:#cecece!important;
}

.color-yellow{
	color:#fabe00!important;
}

.bgcolor-orange{
	background:#e2ab4f!important;
}

sup{
	font-size: .8rem!important;
}

.p2-subTitle{
	margin-bottom: 2rem;
}

.p2-subTitle h6{
	font-size: 1.5rem;
}


.border-b-1px{
	border-bottom: 1px solid #cecece;
}

table.tableStyle{
	width:100%;
	border-collapse: collapse;
	margin-bottom: .35rem;
}

table.tableStyle, th, td {
  border: 1px solid #fff;
  font-weight: 300;
}

table.tableStyle tr{}

table.tableStyle tr th{
	padding:.35rem;
	text-align: center;
	color:#fff;
	background: #666767;
	line-height: 1.5;
}

table.tableStyle tr td{
	background: #e0e0e0;
	color:#666767;
	text-align: center;
	padding: 1.2rem;
	line-height: 1.3;
}

table.tableStyle tr td.imgTd{
	padding: 2.3rem;
}

table.tableStyle.vp080 tr td.imgTd{
	padding: 3.6rem;
}

table.tableStyle tr td:first-child{
	
	width:12%;
}

p.tech-mark{
	width:100%;
	font-size: .8rem;
	color:#666767;
	line-height: 1.3;
}

a.custLink:link, a.custLink:visited{
	width:fit-content;
	border: 1px solid #c3c3c3;
	color:#666767;
	padding:.3rem .6rem;
	font-size: .9rem;
	line-height: 1;
	text-decoration: none;
	transition:all .3s ease-in-out;
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
}

a.custLink:hover{
	background: #666767;
	color:#fff!important;
}

a.custLink-2:link, a.custLink-2:visited{
	width:fit-content;
	border: 1px solid #c3c3c3;
	color:#666767;
	padding:.5rem 1rem;
	font-size: .9rem;
	line-height: 1;
	text-decoration: none;
	transition:all .3s ease-in-out;
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
}

a.custLink-2.videoall{
	border-right:1px solid #c3c3c3;
}

a.custLink-2.noborderL{
	border-left:0!important;
}

a.custLink-2:hover{
	background: #666767;
	color:#fff!important;
}

#carouselMainBanner .carousel-item{
	position: relative;
	text-align: center;
	/* top:2.5rem; */
}

#carouselMainBanner .carousel-caption{
	height: fit-content;
	position: absolute;
	top:70%;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	background: rgba(255,255,255,.7);
	padding: 1rem 2rem;
}

#carouselMainBanner .carousel-item img{
	width:100%;
	/* max-width: 900px;
	-webkit-box-shadow: 1px 4px 10px 1px #737373; 
	box-shadow: 1px 4px 10px 1px #737373; */
}

#carouselMainBanner .carousel-caption:after,
#carouselMainBanner .carousel-caption:before{
	position: absolute;
	font-size: 3rem;
	color:#dac8b3;
	font-weight: bolder;
}

#carouselMainBanner .carousel-caption:after{
	content:"「";
	top:-20px;
	left:-32px;
	font-weight: bold;
}

#carouselMainBanner .carousel-caption:before{
	content:"」";
	font-weight: bold;
	bottom:-17px;
	right:-34px;
}

#carouselMainBanner .carousel-caption p{
	margin-bottom:.5rem;
	font-size: 1rem;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 40px;
  width: 40px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 20%;
  /* border: 1px solid black; */
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '〉';
  font-size: 2rem;
  font-weight: bolder;
  color: #333;
}

.carousel-control-prev-icon:after {
  content: '〈';
  font-size: 2rem;
  font-weight: bolder;
  color: #333;
}

/* headBanner */
/* 
.carousel{
	width:100%;
	height:100%;
}

.carousel-inner{
	width:100%;
	height:100%;
}



.carousel-item img{
	width:100%;
	height:100%;
} 
*/

.carousel-inner{
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
}

.carousel-item{
	transition-duration: 2s;
}

.headBanner {
	height: 300px;
	overflow: hidden;
	position: relative;
	max-width: 100%;
	margin: 0 auto;
}

.headBanner .layer-bg .titleBox{
	width:100%;
	height:100%;
	display: none;
}

.carousel-indicators li{
	background-color: #7e8074;
}

.headBanner.home{
	height: 420px;
	margin-top:130px;
	/* min-height:500px; */
	/* background-image: url('../images/bannerBack_y1.jpg');  */
	background: #f3f3f3;
}

body.index .headBanner.home{
	margin-top:0;
}



.layer {
	background-position: bottom center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: inherit;
	/* position: fixed; */
	z-index: 1;
}


.headBanner .layer{
	display: flex;
	align-items: center;
	justify-content: center;
}

.headContentBlock{
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
}

#carouselMainBanner{
	width: 100%;
	height:100%;
}

.headBanner.home .carousel-caption{
	width:30%;
	margin:0 auto;
}

.headBanner.home #carouselMainBanner .carousel-caption{
	width:40%;
	margin:0 auto;
}

.headBanner.home .carousel-caption p{
	font-size: 1.1rem;
	font-weight: 300;
	color:#716f65;
}

.headBanner.home .carousel-caption h5{
	font-size: 2.5rem;
	font-weight: 300;
	color:#333;
}


.headContentBody.mainSubMenu{
	height: 40px!important;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height:40px;
}

.headContentBody.mainSubMenu a{
	text-decoration: none;
	text-align: center;
	color:#fff;
	font-size: .9rem;
	padding: 0 1.5rem;
}

.headContentBody.mainSubMenu span{
	text-decoration: none;
	text-align: center;
	color:#fff;
	font-size: 1.1rem;
}


.bgimg{
	position: absolute;
	z-index: 0;
	top:0;
	left:0;
}

.storyContent{
	position: relative;
	width:100%;
	height:auto;
	display: flex;
	justify-content: center;
}

.storyBody{
	position: absolute;
	padding:5rem;
	padding-left:6.5rem;
	width:90%;
}

.storyBody .storyImg{
	width:85%;
	margin:0 auto;
}

.storyBody .storyText{
	margin-bottom:2rem;
}

.storyImgIcon{
	width:140px;
	height:140px;
	margin:0 auto;
	margin-bottom:1.5rem;
	border-radius: 70px;
	overflow: hidden;
	display: flex;
	justify-content: center;
}

.storyImgIcon img{
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
}

.storyImgIcon img:hover{
	scale: 1.1;
}

.otherLink{
	width:230px;
	height:auto;
	display: block;
	/* border: 1px solid #706e65; */
	padding: .5rem;
	margin:0 1rem;
}



.otherLink p.marktxt{
	width:100%;
	text-align: center;
	font-size: .9rem;
	color:#706e65;
	margin-bottom: .5rem;
	padding-bottom:.5rem;
	border-bottom:1px solid #706e65;
}

.toStory{
	display: flex;
}

.toStory img{
	width:auto;
	height: 60px;
}

.toStory a:link,.toStory a:visited{
	color: #706e65;
	
}

#shareBtn{
	width:80px;
	height:auto;
	color:#fff;
	background: #3b6fa8;
	border-radius: .25rem;
	text-align: center;
	display: flex;
	justify-content: center;
	cursor: pointer;
}

#shareBtn span{
	font-size: 10px;
	vertical-align: top;
	display: inline-block;
	line-height: 20px;
	font-weight: 600;
}

.noborder{
	border: 0!important;
}

.nobgcolor{
	background-color: transparent!important;
}

/* .storyImg img{
	filter:sepia(70%);
} */

.storyText h5{
	font-weight: bold!important;
}

.storyText p{
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 1rem;
}

.pageBody p.text-date{
	font-size: .9rem!important;
	line-height: 1.8;
}


/* 首頁活動花絮區塊 */

#carouselAlbum{
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
}

#carouselAlbum::before {
	display: block;
	content: "";
	padding-top: 56.25%;
	box-sizing: border-box;
}

#carouselAlbum .carousel-inner{
	position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
		align-items: flex-start;
}

#carouselAlbum .carousel-inner .carousel-item{
	position: relative;
	overflow: hidden;
}

/* #carouselAlbum .carousel-inner .carousel-item img{
	
	
} */


#carouselAlbum .carousel-inner .carousel-item .carousel-caption{
	background: rgba(0,0,0,.5);
	padding: .25rem .5rem;
	position: absolute;
	z-index: 1;
	top:0;
	display: none;
}

#carouselAlbum .carousel-inner .carousel-item:hover .carousel-caption{
	display: block;
}

#carouselAlbum .carousel-inner .carousel-item .carousel-caption h3{
	width:100%;
	font-size: 1.2rem;
	line-height: 1.4;
	margin:0;
	position:absolute;
	top:25%;
	left:50%;
	transform:translate(-50%,-25%);
}


/* 內頁頁面 */
.pageBody.storyP .card-deck{
	justify-content: space-between;
}

.pageBody.storyP .card-deck .card{
	display: flex;
	flex: 0 0 18.6rem;
	flex-direction: column;
	margin-bottom: 1.5rem;
}

.pageBody.storyP .card-deck .card .cardCnt{
	display: flex;
	flex-direction: column;
}

.pageBody.storyP .card-deck .card img{
	width: 100%;
}

.pageBody.storyP .card-deck .card a:link,
.pageBody.storyP .card-deck .card a:visited,
.pageBody.worksP .card-deck .card a:link,
.pageBody.worksP .card-deck .card a:visited{
	text-decoration: none;
	color: #646158;
}

.pageWrapper .sidemenu{
	/* border-right: 3px solid #BBA1CB; */
}

.pageWrapper .sidemenu ul{
	margin-left:0;
}

.pageWrapper .sidemenu ul li{
	padding: .15rem 0;
}

.pageWrapper .sidemenu ul li a{
	font-size: 1rem;
	width: 100%;
	display: block;
	padding: 5px 30px 5px 35px;
	text-decoration: none;
	color: #fff;
	background: url("../images/listStyle.png") left no-repeat #b2b2b2;
}

.pageWrapper .sidemenu ul li a:hover{
	background: url("../images/listStyle.png") left no-repeat #9C8DE8;
	color:#fff!important;
}

.pageWrapper .sidemenu ul li a.current{
	text-decoration: none;
	background: url("../images/listStyle.png") left no-repeat #9C8DE8;
	color:#fff!important;
}

.pageBannerWrapper{
	width:100%;
	background: #9C8DE8;
}

.pageBannerWrapper .pageBanner{
	text-align: center;
	width: 1140px;	
	height: 100px;
	margin:0 auto;
	background: url("../images/pageBannerBg.png") center center no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pageBannerWrapper .pageBanner h3{
	font-size: 1.8rem;
	font-weight: 400;
	color:#163253;
}

/* 影片頁面 */
.pageBody.videoP .card-deck{
	justify-content: space-between;
}

.pageBody.videoP .card-deck .card{
	flex:0 0 18.6rem;
	width:100%;
	/* margin: 0 auto; */
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	margin-bottom: 1.2rem;
}

.pageBody.videoP .card-deck .card .imgBox{
	width:100%;
	height: auto;
	border-radius: 40px;
	overflow: hidden;
	border: 3px solid #9d7d57;
	position: relative;
	display: flex;
	justify-content: center;
}

.imgBox .videoMask{
	width:100%;
	height:100%;
	display: block;
	position: absolute;
	left:0;
	top:0;
	background: rgba(0,0,0,0.3);
	opacity: 1;
	z-index: 2;
	transition: all .3s ease-in-out;
}

.imgBox .videoMask:hover{
	opacity: 0;
}

.imgBox img{
	scale: 1.8;
}

.imgBox img.playBtnImg{
	width:80px;
	scale: none;
	z-index: 3;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	opacity: .7;
}

/* mainWrapper */
.mainWrapper{
	width:100%;
	min-height: 100vh;
	margin-bottom: 2rem;
	/* background: #f8f8ee; */
	/* height: 100vh; */
}

.footerWrapper{
	width:100%;
}

.footer.copyrightTxt p{
	font-size: .8rem!important;
}

/* body.index .mainWrapper{
	background: #fafaf0;
} */

/* 
.custPages-1{
	background-image: url("../images/bannerBack.jpg");
} */



.container-fluid{
	background: #fff;
}

.setWidth{
	width:1000px;
	margin:0 auto;
}

.setWidth2{
	width:900px;
	margin:0 auto;
}


.setBgColor{
	background: #e6ebf2;
}

.setBgColor2{
	background: #c5dbe9!important;
	color:#666767!important;
}

.setBgColor3{
	background: #989898!important;
	color:#fff!important;
}

.fix-breadcrumb{
	background: transparent!important;
/* 	border-bottom: 1px solid #cecece; */
	font-size: .9rem!important;
}

/* index */
section.index > .row > .col-12{
	width:20%!important;
}



.hoverMask{
	width: 100%;
	height:100%;
	display: block;
	opacity: 0.7;
	background: rgba(0, 30, 95, 1);
	position: absolute;
	top:0;
	left:0;
	transition: all .3s ease-in-out;
}




.contentBlock{
	margin-bottom:1.5rem;
}

/* news */
section h3{
	text-align: center!important;
	color:#001e5f;
}

section h3.h1{
	text-align: left!important;
}

section.news .pageNav ul li a:link,section.news .pageNav ul li a:visited{
	text-decoration: none;
	font-size: 1rem;
	font-weight: 300;
	color:#666767;
	padding:.3rem;
}

/* product */
section.product .linkBlock a{
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
}

section.product .linkBlock a p{
	position: absolute;
	left:0;
	right:0;
	bottom:20px;
	font-size: 1.2rem;
	color:#fff;
	text-align: center;
	text-shadow: 0 0 0.2em #1a1a1a;
}



.p1-1Box{
	width:80%;
	height:auto;
}

.p1-1Box .squareL{
	width: 100%;
	height:30px;
	display: block;
	line-height: 30px;
}

.p1-1Box .squareL.B1{
	background: #c7c5ec;
	padding-left:20%;
}

.p1-1Box .squareL.B1.s2{
	background: #ebdbda;
}

.p1-1Box .squareL.B2{
	background: #afd9dd;
	padding-left:40%;
}

.p1-1Box .squareL.B3{
	background: #b2b2b2;
	padding-left:60%;
}





/* partnership */
/* section.partnership .logoBox img{
	width:25%;
	height: auto;
} */

/* aboutus */

ul.custUl{
	list-style-position: outside;
}

ul.custUl.ulCenter{
	display: inline-block;
	width: fit-content;
	margin: 0 auto;
}

.serviceItem{
	display: flex;
		flex-direction: column;
}

ul.custUl li{
	list-style-type: square;
	color: #3c3c3c;
	line-height: 1.8;
	padding:0;
	font-weight: 400;
}


ul.custUl.ulCenter ul li{
	width: fit-content;
}

/* contactUs */
.contactUs{
	width:100%;
	background: #083356;
	padding: 2.5rem .5rem;
	padding-top:1.5rem;
}

.contactUs-Content{
	width:1140px;
}

.contactUs-Content h1{
	color:#fff;
	font-size: 2.3rem;
	font-weight: 300;
}

.contactUs-Content .contactusInfo h3{
	color:#8e5fa2;
	font-size: 18px;
	line-height: 1.4;
	margin-bottom:0;
	font-weight: 300;
}

/* .contactUs-Content .contactusInfo h3.compName{
	font-size: 1.1rem!important;
	line-height: 1.4;
} */

.contactUs-Content .contactusInfo p{
	color:#fff;
	font-size: 1.1rem;
	line-height: 1.5;
	font-weight: 300!important;
}

.contactusInfo .row img{
	width:70%;
	height: auto;
}


/* footer */
.socialicons{
	width:100%;
	height:auto;
	padding-bottom: 80px;
}

.socialiconsCol{
	display: flex;
	justify-content: center;
}

.socialicons a{
	width:36px;
	height:auto;
	display: block;
}

.socialicons a img{
	width:100%;
	height:auto;
}

.footerBox{
	width: 100%;
	position: fixed;
	bottom:0;
}
.footer{
	padding:.5rem 0;
	width:100%;
	display: flex;
	background: #083356;
	align-items: center;
	justify-content: center;
}

.footer p{
	font-size: .5rem!important;
	font-weight: 300!important;
	color:#8ca7bd;
	margin-bottom:0;
}

.footer p a.o-rangeLogo{
	color:#acc3d5;
}

.footer p a.o-rangeLogo:hover{
	color:#e8d443;
	text-decoration: none;
}

.mainContent .row.productmenu{
	
	width: 100%;
	display: flex;
	margin-bottom: 0;
	flex-basis: max-content;
	justify-content: center;
}

.mainContent .row.productmenu.leftFix{
	justify-content: left;
}


.productmenu a:link, .productmenu a:visited{
	
	/* background: #1779b6; */
	/* color:#fff;
	transition: all .3s ease-in-out; */
	color: #001e5f;
	transition: all .3s ease-in-out;
	border: 1px solid #001e5f;
	font-size: .8rem!important;
	padding: 0.3rem 1rem!important;
	border-radius: 2rem!important;
	display: flex;
	align-items: flex-end;
	width:fit-content;
	margin:0.5rem 0.3rem!important;
}

.productmenu.p2 a:link, .productmenu.p2 a:visited{
	margin:0 auto!important;
}	

.productmenu a:hover{
	border: 1px solid transparent;
	background: #a0c2e2;
	color:#fff;
}

.btn.disabled, .btn:disabled {
	opacity: 1!important;
	background: #a0c2e2;
	color:#fff!important;
	border: 2px solid #a0c2e2!important;
}

.productmenu .btn:focus { 
	outline: none!important;
	box-shadow: none;
};

.height-100{
	height: 100%!important;
}


/* bootstrap modal style */
#myModal .modal-body .wrapped img#modalPhoto{
	width:100%;
	height:auto;
}

/* 分頁頁碼 */
ul.pagination.cust-page-no li.page-item a.page-link{
	color: #9b8ee8;
}

ul.pagination.cust-page-no li.page-item.active a.page-link{
	color: #fff;
	background-color: #9b8ee8;
	border-color: #9b8ee8;
}

@media screen and (min-width:980px) and (max-width:1304px){   
   .headBanner.home{
		  height: 500px!important;
	  }
}

@media screen and (min-width:737px) and (max-width:979px){   
   .headBanner.home{
		  height: 400px!important;
	  }
}

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

   html,body { 
	  font-size: 1rem; 
   }
   
}

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

   html,body { 
	  font-size: .8rem; 
   }

}