/*ul*/
.about h1 {  margin-bottom:5%; font-size:2.5rem; font-weight: 400;  display: block;}
.about h2 { margin-bottom:5%; font-size: 2rem; font-weight: 400;  }
.about h3 { font-size: 1.65rem; font-weight: 700;  margin:5% auto 2% auto; display: block;  }
.about p {	font-family: 'Noto Sans TC', sans-serif; font-size: 1rem;	font-weight: 400; margin-bottom: 2%; color: #424546; line-height: 1.95rem;}
.about h1 span{  display: block;  font-size:.75em; }

.about-wrap .edit{ display: block; margin:auto auto 15% auto; width:60%; padding:2vh 0 10vh 0; }
.about-wrap .edit-half{display: inline-block; width:48%; margin:0 auto; padding: 2em; vertical-align: top; }
.edit-half img{width:90%; height: auto; max-width:90%;  }
.text:after { content: '';  width: 35px;  height: 3px; background: #a09a8e; position: absolute;  bottom: 0;  left: 0;} 
.text { position: relative; width:100%;  margin-bottom:40px; padding-bottom: 25px;}

/*about us*/
.about-wrap{ display: -ms-flexbox; display: flex;  -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px;  margin-left: -15px;}
.box-7{  -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%;  }
.box-5 { -ms-flex: 0 0 41.666667%;  flex: 0 0 41.666667%;  max-width: 41.666667%; }
.box-6 {  -ms-flex: 0 0 50%; flex: 0 0 50%;  max-width: 50%;}
.about-bg-01{    background: url(../images/about/about-01.jpg) right center;  background-size: cover;}
.about-bg-02{    background: url(../images/about/about-02.jpg) left center;  background-size: cover;}
.about-bg-03{    background: url(../images/index/map-color.png) right center no-repeat;  background-size:30% auto;}
.mission-bg-01{    background: url(../images/about/about-05.jpg) right center;  background-size: cover;}
.management-bg-01{    background: url(../images/about/about-07.jpg) right center;  background-size: cover;}
.about-bg-04{ padding-bottom:150px;  background-image: url(../images/index/map.jpg), url(../images/about/about-08.jpg); background-position: left top,  right bottom; background-repeat: no-repeat; background-size: 50% auto,100% auto;}
/*---------------------------------------------------------------------
Title
-----------------------------------------------------------------------*/
.title-box { position: relative; }
.title-box .title { font-weight: bold; font-size: 32px; line-height: 46px; padding-left: 80px; position: relative; margin-bottom: 30px; color: #212529;vertical-align: top; }
.title-box .title:before { position: absolute; left: -100%; top: 45px; background: #dddddd; width: 100%; height: 1px; content: ""; z-index: -1; margin-left: -10px; }
.title-box .v-text { display: inline-block; position: absolute; left: 0; font-weight: 600; top: 20px; font-size: 20px; color: #dddddd; z-index: 9; border: 1px solid #dddddd; height: 50px; width: 50px; line-height: 50px; text-align: center; background: #ffffff; transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); -webkit-transform: rotate(135deg); }
.title-box .v-text span { position: absolute; left: 12px; top: 0; transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
.title-box.white .title { color: #ffffff; }
.title-box.white .title:before { background: rgba(255, 255, 255, 0.2); }
.title-box.white .v-text { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0); }
.hight-text { position: relative; }
.hight-text:before { position: absolute; background: rgba(0, 191, 253, 0.5); content: ""; left: 0; bottom: 3px; height: 5px; width: 100%; z-index: -1; }
.section { padding: 100px 0;}
.about-box-01 { padding:50px 60px 40px 60px; position: relative; }

.about-box { padding: 180px 60px 80px 60px; position: relative; }
.about-box h2 { font-size: 32px; line-height: 50px;  margin-bottom:5%;  }
.about-box p { margin: 0; }
.about-box strong {   margin:5% auto; padding-top:20px;   font-size:2rem; line-height: 2rem;  font-weight: 700; font-style: italic; color: #1f328c; }
.about-box:before { position: absolute; top: 50%; left: -20px; content: ""; width: 0; height: 0; border-top: 20px solid transparent; border-right: 20px solid #ffffff; border-bottom: 20px solid transparent; margin-top: -10px; }
.about-box.left:after { position: absolute; top: 50%; right: -20px; content: ""; width: 0; height: 0; border-top: 20px solid transparent; border-left: 20px solid #ffffff; border-bottom: 20px solid transparent; margin-top: -10px; z-index: 9; }
.about-box.left:before { content: none; }
.title-box { position: relative; left: 70px; top: 70px; }
.title-box:before {    position: absolute;left: -60px;top: 45px;background: #dddddd;width: 61px;height: 1px;content: "";z-index: -1;margin-left: -10px;}

/*---------------------------------------------------------------------
Smart Features
-----------------------------------------------------------------------*/
.smart-features{ display: -ms-flexbox; display: flex;  -ms-flex-wrap: wrap; flex-wrap: wrap; align-content: center; justify-content: flex-start;   margin-right: -15px;  margin-left: -15px; padding:30px 0 150px 0px;
 background: url(../images/about/about-06.jpg) no-repeat right bottom; background-size: 80% auto;
}
.smart-features .smart-box .title-box h3 { font-size: 32px; line-height: 50px;     }
.smart-features .smart-box .left { float: left; margin-right: 24px; }
.smart-features .smart-box img { width: 60px; }
.smart-features .smart-box .right { display: table-cell; margin-top: 10px; vertical-align: top; }
.smart-features .smart-box .right p { margin: 0px; }
.smart-features ul { padding: 0; margin: 0 auto; margin-top: 80px; width: 100%; max-width:1160px;  }
.smart-features ul li { list-style-type: none; width: 33.33%; float: left; padding: 40px 30px; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; }
.smart-features ul li:nth-child(3), .smart-features ul li:nth-child(6) { border-right: none; }
.smart-features ul li:nth-child(4), .smart-features ul li:nth-child(5), .smart-features ul li:nth-child(6) { border-bottom: none; }

/*---------------------------------------------------------------------
Video
-----------------------------------------------------------------------*/
.video{  display: block; margin: auto; background: url(../images/about/about-03.jpg) no-repeat left bottom  fixed;  background-size: cover;}
.video-list{ width: 100%; max-width:960px;  display: block; margin:2% auto 0 auto; padding: 150px 0px; }
.video-box-left{ width:33%; display: inline-block; vertical-align: top; padding-bottom:60px; }
.video-box-right{ width:60%; display: inline-block; vertical-align: top; }
.video video { width: 100%; }
.video .white { color: #ffffff; }

/*---------------------------------------------------------------------
World Branch
-----------------------------------------------------------------------*/
.branch{display: block; margin: auto; padding-bottom: 50px;  background-image:url(../images/index/about-01.png),url(../images/about/about-04.jpg), url(../images/index/map.jpg); background-position:left top , right top, left bottom; background-size: 60% auto,50% auto,  auto;  background-repeat:  no-repeat ;   }
.branch-list{ width: 100%; display: block; margin:80px auto; }
.branch-list ul { list-style-type: none; width: 33.33%; min-height:400px;  float: left; padding: 40px 20px; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;background-color: #FFF; }
.branch-list ul:nth-child(3n) { border-right: none; }
.branch-list ul:nth-child(10), .branch-list ul:nth-child(11) { border-bottom: none; }

.branch-list ul li{ width: 100%; display: block; margin-bottom: 5px; line-height:1.5rem;  }
.branch-list ul li:nth-child(1){ margin-bottom: 20px; font-size:1.25rem;  color: #1f328c; font-weight: 700;   }
span.filed{width:22%; display: inline-block; vertical-align: top; text-align: right; font-weight: 400; }
span.filed:after {  content: " :";   z-index: 9; }
span.type{width:76%; display: inline-block;  vertical-align: top;font-weight: 200;}
.branch-list ul li a{ color: #1f328c;}


/*---------------------------------------------------------------------
History 
-----------------------------------------------------------------------*/

ul.history { margin:0 auto; 	padding: 0; list-style: none;  width: 98%;  max-width:960px;     display: flex;
    flex-wrap: wrap;
    justify-content: center; }
ul.history li {	margin: 25px auto;	padding: 0;	clear: both; width: 98%;}
ul.history li h4 {margin: 0 0 -27px 0;padding: 0; }
ul.history li p { margin-left: 120px; color: #333; }
ul.history li .thumb {	background: transparent url(../images/about/history-thumb.png) no-repeat 0 0;	width: 227px;	height: 160px;	margin: 0 0 30px;	padding: 0;	float: left;}
ul.history li .thumb img { border-radius: 150px; 	margin: 7px 8px;	width: 145px; height: 145px;}
ul.history li .featured-box {	text-align: left;	margin-left: 225px;	margin-bottom: 20px;min-height: 80px;	width: 80%;}
.box-content { padding: 30px 40px 10px 40px;  border-radius: 8px;  border-bottom: 5px solid #1f328c;  border-top: 1px solid  #CCC; border-left: 1px solid  #CCC; border-right: 1px solid  #CCC; }




@media(max-width:1024px) {
.branch-list ul { list-style-type: none; width: 50%;  min-height:440px;   float: left; padding: 40px 20px; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; }
.branch-list ul:nth-child(2n) { border-right: none; }
.branch-list ul:nth-child(3n) { border-right: 1px solid #e2e2e2; }
.branch-list ul:nth-child(10){border-bottom: 1px solid #e2e2e2; }
}
@media(max-width:980px) {
 .about-box:before, .about-box.left:after { position: absolute; top: -23px; left: 50%; content: ""; width: 0; height: 0; border-left: 20px solid transparent; border-bottom: 20px solid #ffffff; border-right: 20px solid transparent; margin-top: 3px; margin-left: -10px; border-top: inherit; }
.box-7,.box-5 {  -ms-flex: 0 0 100%; flex: 0 0 100%;max-width: 100%;   min-height: 1px; }
.about-bg-03{     background-size: 50% auto;}
.video-box-left, .video-box-right { width:100%; display: block; }

	
}
@media(max-width:767px) {
.branch{  background-size:50% auto, 100% auto; }
.branch-list ul { list-style-type: none; width: 98%; min-height:auto;   display: block; margin: auto;  border-bottom: 1px solid #e2e2e2; border-right: none; }
.branch-list ul:nth-child(3n) { border-right: none; }
.smart-features ul li { width:100%; border-right: none; border-bottom: 1px solid #e2e2e2; }
ul.history li .featured-box {	text-align: left;	margin:0 auto;  	width: 80%;}
	
ul.history li .thumb {display: none;}	
}