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

html, body{
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	//font-family: Arial, "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", sans-serif;	
	font-size: 1rem; 
}


body{
	position: relative;
	background-size: cover;
	min-height:100%;
	color: #3c3c3c;
	line-height: 1.6;
}

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



.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;
}

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

/* .arrowDown img{
	width:100%;
	height:auto;
} */

#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: 5%;
	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;
	z-index: -1;
}

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;
}

.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:#fabe00!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;
}


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;
}



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

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

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

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

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

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

/* .headBanner .layer-bg .titleBox h2{
	color:#fff;
} */

.headBanner.home{
	height: 65vh;
	min-height:500px;
}

.headBanner.home .layer-bg {
/* 	background-image: url('../images/bg-index.jpg'); */
	height: inherit;
	background: #41579e;
	
}



.headBanner.news .layer-bg {
	background-image: url('../images/bg-News.jpg');
}

.headBanner.product .layer-bg {
	background-image: url('../images/bg-product-n-v2.jpg?v=33');
	background-position-y:top;
}

.headBanner.technology .layer-bg {
	background-image: url('../images/bg-technology-n.jpg?v=10');
	background-position-y:center;
}

.headBanner.aboutus .layer-bg{
	background-image: url('../images/bg-aboutus-n.jpg?v=3.2');
	background-position-y:center;
}

.headBanner.partnership .layer-bg{
	background-image: url('../images/bg-partnership-n.jpg?v=3.5');
	background-position-y:center;
}


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


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

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


.headBanner.home .carousel-caption{
	top: 40%;
	bottom: auto;
	text-align:left;
}

.headBanner.home .carousel-caption p{
	font-size: 1.2rem;
	font-weight: 300;
	color:#fff;
}

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

.headBanner.home .headContentTitle{
/* 	padding-left:15vw; */
	width:70%;
	margin:0 auto;
	max-width: 1100px;
}

.headBanner.home .headContentTitle p{
	font-size: 1.2rem;
	font-weight: 300;
	color:#fff;
}

.headBanner.home .headContentTitle p.lg{
	font-size: 2.5rem;
}


.headContentBody{
	width:100%;
	height:150px;
	display: block;
	position: absolute;
	bottom:0;
	background: rgba(03,10,38,.5);
	padding: 1.5rem 2rem;
}

.headBanner.product .headContentBody.mainSubMenu{
	background: rgba(33,108, 184,.5);
}

.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;
}

.headContentInfo p{
	text-align: center;
	font-size: .9rem;
	font-weight: 300;
	color:#fff;
}

.headContentMore{
	width:80%;
	margin:0 auto;
	text-align: right;
	font-weight: 300;
}

.headContentMore a:link, .headContentMore a:visited{
	width:100px;
	text-decoration: none;
	color:#fff;
	line-height: 1.4;
	font-size: .9rem;
}

/* mainWrapper */
.mainWrapper{
	width:100%;
}

.container-fluid{
	background: #fff;
}

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

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

.bgimg-ESG{
	position: absolute;
	width:100%;
	height:800px;
	background: url("../images/bg-ESG.jpg?v=7.1") no-repeat;
	background-size: cover;
	background-position-y: top;
}

.setBgColor{
	background: #e6ebf2;
}

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

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

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

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


section.index a.indexBtn{
	width: 100%;
	height:190px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	background-size: cover;
	text-decoration: none;
	transition: all .5s ease-in-out;
	position: relative;
}

section.index a.indexBtn:hover{
	background-size: 120%;
}

.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;
}

section.index a.indexBtn:hover .hoverMask{
	opacity: 0;
}

/* section.index a.indexBtn::after{
	content:'';
	width: 100%;
	height:100%;
	display: block;
	background: rgba(0,30,95,.8);
	position: absolute;
	top:0;
	left:0;
} */

section.index a.indexBtn .labelBox{
	width: fit-content;
	display: flex;
	align-items: flex-end;
	flex-direction: column;
	justify-content: center;
}

section.index a.indexBtn.tw .labelBox{
	align-items: center;
}

section.index a.indexBtn p{
	font-size: 1.3rem;
	line-height: 1.4;
	color: #fff;
	text-shadow: 0 0 0.2em #1a1a1a;
	position: relative;
	z-index: 1;
}



section.index a.indexBtn p.enLabel{
	text-align: center;
}

section.index a.indexBtn p.twLabel{
	font-size: .8rem;
	text-align: right;
}

section.index a.indexBtn.one{
	background-image:url("../images/img_indexBtn1-v2.jpg?v=2");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}



section.index a.indexBtn.two{
	background-image:url("../images/img_indexBtn2-v2.jpg?v=2");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	
}

section.index a.indexBtn.three{
	background-image:url("../images/img_indexBtn3-n-v2.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

section.index a.indexBtn.four{
	background-image:url("../images/img_indexBtn4.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}


.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: #3f8cbc;
	padding: 2.5rem .5rem;
	padding-top:1.5rem;
}

.contactUs-Content{
	width:1000px;
}

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

.contactUs-Content .contactusInfo h3{
	color:#fabe00;
	font-size: 1.5rem;
	line-height: 1.5;
	margin-bottom:0;
	font-weight: 300;
}

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

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


/* footer */
.footer{
	padding:1rem 0;
	width:100%;
	display: flex;
	background: #00397e;
	align-items: center;
	justify-content: center;
}

.footer p{
	font-size: .5rem;
	font-weight: 300;
	color:#fff;
	margin-bottom:0;
}

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

.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;
};


@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; 
   }

}