@charset "utf-8";
.wrapper_pagebanner.bannerabout{
	background-size:cover;
	overflow: hidden;}
.wrapper-vi{
	float:left;
	clear:both;
	width:100%;
	height:100vh;
	overflow:hidden}
.col-vi-L{
	flex: 0 0 25%;
	background-image: url(../img/about/vi-bg.svg);
	background-repeat: no-repeat;
	background-position: right center;
	 align-self: flex-end;
	 text-align:right
}
.box-ceo{
	margin-right:-50%}
.box-ceo img{
	height:95vh}
.col-vi-C{
	flex: 0 0 50%;
  -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
	}
.col-vi-R{flex: 0 0 25%;
	background-image: url(../img/about/vi-bg.svg);
	background-repeat: no-repeat;
	background-position: left center;}
.vi-w1 img,.vi-w2 img{
	width:70%;
	float:right}
/*SVG*/
#vimain{
	width:100%}
@media screen and (max-width: 1200px) {	
.box-ceo img{height:85vh}
.box-ceo{
	margin-left:20%;}
}
@media screen and (max-width: 1024px) {	
.box-ceo{
	margin-left:0%;}
}
@media screen and (max-width: 800px) {	
.col-vi-L{flex: 0 0 10%;}
.box-ceo{
	margin-left:-10%;
	text-align:left}
.box-ceo img{max-height:75vh;
width:auto}
.col-vi-C{
	flex: 0 0 70%;
	margin-top:50px;
	}
.col-vi-R{flex: 0 0 0%;}
.vi-w1 img,.vi-w2 img{
	max-width:100%;
	float:left}
.wrapper-vi .col-vi-C .clearfix.txt_center.svgimg{
	text-align:left}
.wrapper-vi .col-vi-C .clearfix.txt_center svg{
	margin-left:-100px;
	transform:scale(1.2)}
}
@media screen and (max-width: 450px) {
	.box-ceo{
	margin-left:-20%;
	margin-right:auto}
	.box-ceo img{max-height:60vh;
width:auto}	
.col-vi-L {
    flex: 0 0 5%;
	 align-self: flex-end;
}
.col-vi-C{
	flex: 0 0 70%;
	margin-left:-30%;
	}

}
/*ipad*/
@media only screen and (device-width: 820px) and (device-height: 1180px) and (orientation:portrait) {
  .box-ceo{
	margin-right:0%;
	margin-left:0px;}
	.box-ceo img{max-height:65vh;
width:auto}	
.col-vi-L{flex: 0 0 10%;}
.col-vi-C{
	flex: 0 0 70%;
	}
.col-vi-R{flex: 0 0 0%;}
.vi-w1 img,.vi-w2 img{
	width:70%;
	float:left}
.wrapper-vi .col-vi-C .clearfix.txt_center.svgimg{
	text-align:left}
.wrapper-vi .col-vi-C .clearfix.txt_center svg{
	margin-left:-100px;
	transform:scale(1.2)}

}
@media only screen and (device-width: 810px) and (device-height: 1080px) and (orientation:portrait) {
 .box-ceo{
	margin-right:0%;
	margin-left:0px;}
	.box-ceo img{max-height:65vh;
width:auto}	
.col-vi-L{flex: 0 0 10%;}
.col-vi-C{
	flex: 0 0 70%;
	}
.col-vi-R{flex: 0 0 0%;}
.vi-w1 img,.vi-w2 img{
	width:70%;
	float:left}
.wrapper-vi .col-vi-C .clearfix.txt_center.svgimg{
	text-align:left}
.wrapper-vi .col-vi-C .clearfix.txt_center svg{
	margin-left:-100px;
	transform:scale(1.2)}
}

/*w1=========================*/
.wrapper-about1{
	float: left;
	clear: both;
	width: 90%;
	margin-right: 5%;
	margin-left: 5%;
	margin-top:var( --blcokb-padding-tb)
}
.box-about-bigT{
	float: left;
	width: 100%;
	clear: both;
	font-family: 'Noto Serif TC', serif;
	font-size: var(--txt-subigtitle);
	color: var(--main-color);
	margin: var(--blcokin-padding-tb) 0px;
	font-weight: bold;
	letter-spacing: 0.3em;	
	}
.box-about-subT{
	float: left;
    width: 100%;
    clear: both;
	color: var(--dark-gray);
	font-size: var(--txt-stitle);
	margin-bottom:30px}
.box-about-p1{
	width:60%;
	text-align:center;
	margin:0px auto}
@media screen and (max-width: 414px)  {  
	.wrapper-about1{
	    margin-top:-5vh;}	
		}
/*wrapper-about2===========================*/
.wrapper-about2{
	float: left;
	clear: both;
	width: 100%;
	background-image: url(../img/about/bg2.svg);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 0px;
	padding-right: 0%;
	padding-bottom: 0px;
	padding-left: 0%;
	background-size:70% auto
}
.article-about2-1{
	width: 100%;
	float: left;
	clear: both;
	margin-top:var(--section-padding-tb);
}
.box-2-t{
    float:right;
	width:30%;
	font-family: 'Noto Serif TC', serif;
	margin-right:5%
}
.box-2-p{
	float: left;
	clear: both;
	width: 60%;
	margin: 0px 20%;
	margin-top: -100px;
	z-index: 2;
}
.article-about2-2{
	width: 100%;
	float: left;
	clear: both;
	margin-top: -400px;
	background-color: rgba(209,213,215,0.5);
	padding-top:var(--section-padding-tb);
	padding-bottom:var(--section-padding-tb);
}
.articlein-about2-2{
	float: left;
	clear: both;
	width: 80%;
	margin: 0px 10%;
	z-index: 3;
}
.col-artin-1{flex: 0 0 35%;}
.col-artin-2{flex: 0 0 30%; align-self: center;}
.col-artin-3{flex: 0 0 35%;}
.box-about-name{
	font-family: 'Noto Serif TC', serif;
	color: #0f1766;
	font-size: 3em;
	font-weight: bold;
	text-align:center
	}
.box-about-name span{font-size: 0.8em;}
.box-do{
	width: 100%;
	float: left;
	clear: both;
	margin-bottom: var( --blcokb-padding-tb);
}
.box-do h1{
	width: 100%;
	float: left;
	clear: both;
	background-color: #a1a2a4;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	color:#ffffff;
	font-size:var( --txt-stitle);
	font-family: 'Noto Serif TC', serif;
}
	.box-do h1 span{
	background-color: #131c69;
	font-size: 1.1em;
	margin-right: 3px;
	padding: 10px;
}
.box-do ul{
	float: left;
	clear: both;
	width: calc(100% - 63px);
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #131c69;
	margin-left: 43px;
	font-size: var( --txt-h3);
	font-weight: bold;
	padding-top: 10px;
	padding-left: 10px;
}
.box-do li{
	float: left;
	clear: both;
	width: calc(100% - 21px);
	background-image: url(../img/about/dot.png);
	background-repeat: no-repeat;
	background-position: left 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	margin-left: 10px;
}

@media screen and (max-width: 1460px) {
.articlein-about2-2 {
    width: 90%;
    margin: 0px 5%;
}
}
@media screen and (max-width: 1280px) {
.box-2-p {
	width: 50%;
	margin-top: -250px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: 5%;
}
.article-about2-1 {
	margin-bottom:250px  
}
.col-artin-1{flex: 0 0 auto;
width:calc(50% - 65px)}
.col-artin-2{flex: 0 0 100px; align-self: start;
margin:0px 30px}
.col-artin-3{flex: 0 0 auto;
width:calc(50% - 65px)}

}
@media screen and (max-width: 1200px) {
.article-about2-2 {
      margin-top: -200px;
}
}
@media screen and (max-width: 1000px) {
.wrapper-about2{
	background-position: center 200px;
}
}
@media screen and (max-width: 800px) {
.box-about-p1 {
    width: 90%;
}
}
@media screen and (max-width: 700px) {
.articlein-about2-2{flex-wrap:wrap}
.col-artin-1 {
	width: calc(100% - 0px);
	margin-right: 0px;
	margin-left: 0px;order: 2;
}
.col-artin-3 {width: calc(100% - 0px);
	margin-right: 0px;
	margin-left: 0px;order: 3;}
.col-artin-2 {
	flex: 0 0 100%;
	order: 1;
	margin: 0px;
}
.article-about2-2{
	background-color: rgba(209,213,215,0);
	margin-top: -300px;
}
/*.box-about-name{
	text-align:left}*/
}
@media screen and (max-width: 600px) {
.box-2-t{
    float:left;
	width:100%;
	margin-right:0%;
	text-align:center;
	margin-bottom:100px
}
.box-2-t .box_pagetitle:before {
    background-position: center top;
}
.box-2-p{
	width: 90%;
	margin: 0px 5%;
	margin-top: 0px;
}
}
/*wrapper-effort=========================*/
.wrapper-effortT{
	float: left;
	clear: both;
	width: 100%;
	padding-top: var(--blcokb-padding-tb);
	margin-bottom:50px;
	font-family: 'Noto Serif TC', serif;
}
.wrapper-effort{
	float: left;
	clear: both;
	width: 80%;
	background-color: #122c66;
	padding: var(--blcokb-padding-tb) 10%;
}
.list-effort{float: left;
	clear: both;
	width: 100%;
	 counter-reset:li;
	 flex-wrap: wrap;}
.list-effort li{flex: 0 0 44%;
padding:0px 3%;
margin-bottom:var(--blcok-padding-tb);
margin-top:var(--blcok-padding-tb);
}
.list-effort li:nth-child(2n+1){
	background-image: url(../img/about/line.png);
	background-repeat: repeat-y;
	background-position: right top;
	}
.box-effort{
	float:left;
	clear:both;
	width:100%}
.col-e-p{flex: 0 0 30%;}
.col-e-p .circle{
	background-size: cover;
}
.col-e-p .circle.c{background-position: center center;}
.col-e-p .circle.l{
	background-position: center center
}
.col-e-w{flex: 0 0 65%;margin-left:5%;}
.col-e-w:after{
	counter-increment: li;
	content: counter(li, decimal-leading-zero);
	position: absolute;
	top: -50px;
	right: 0px;
	color: rgba(255,255,255,.05);
	font-size: 3em;
	font-weight: bold;
}
.box-e-t{
	float:left;
	clear:both;
	width:100%;
	margin-bottom:var(--blcokm-padding-tb);
	font-size: var(--txt-title);
    font-weight: bold;
	color:#eb6100;
	font-family: 'Noto Serif TC', serif;
}
.box-e-des{
	float:left;
	clear:both;
	width:100%;
	color:#ffffff}
	
@media screen and (max-width: 1400px) {	
.list-effort li{
	flex: 0 0 46%;
	padding-right: 2%;
	padding-left: 2%;
}
}
@media screen and (max-width: 1000px) {	
.box-effort{
	flex-wrap:wrap}
.col-e-p{flex: 0 0 50%;}
.col-e-w{flex: 0 0 100%;margin-left:0%;
text-align:center}
}
@media screen and (max-width: 650px) {	
.box-effort{
	flex-wrap:no-wrap}
.col-e-p{flex: 0 0 30%;}
.col-e-w{flex: 0 0 65%;margin-left:5%;
text-align:left}

.list-effort li{
	flex: 0 0 100%;
	padding-right: 0%;
	padding-left: 0%;
}
}