@charset "utf-8";
/* CSS Document */

html, body{font-family: "Roboto", Helvetica, Arial, "Apple LiGothic Medium", "微軟正黑體", "Microsoft JhengHei", sans-serif;}
a:hover{text-decoration:none;}
p{font-size:20px; line-height: 30px; margin-bottom: 20px; text-align: justify;}
h1{color:#008db5; margin-top:0; margin-bottom:40px; font-weight: bold;}
ul.listDot{margin-bottom:25px;}


.header{background:#ffffff;} 
.header .logo{padding:30px 0;}
.header .logo img{max-width:230px; height: auto;}
html .scroll-to-top.visible {
    opacity: 0.75;
}
html .scroll-to-top {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transition: opacity 0.3s;
    background: #404040;
    border-radius: 7px 7px 0 0;
    bottom: 0px;
    color: #FFF;
    display: block;
    height: 9px;
    opacity: 0;
    padding: 13px 10px 35px;
    position: fixed;
    right: 10px;
    text-align: center;
    text-decoration: none;
    min-width: 49px;
    z-index: 1040;
}

.topnavWrapper{height:auto; background:#ffffff; display: none; z-index: 98; width: 100%; position: absolute;}
.topnavWrapper.act{display:block;}
ul.topnav{padding-left: 0;}
ul.topnav li{float:left; position: relative; list-style: none;}
ul.topnav li a{color:#008eba; text-decoration: none; display: block; padding: 15px 25px 15px 25px; font-size: 18px;}
ul.topnav li ul.subnav {position: absolute; list-style: none; left: 20px; padding: 0; visibility: hidden; width: 100%; background:rgba(233,233,233,1.00); z-index: 99; min-width: 240px; display: block;}
ul.topnav li ul.subnav li{border-bottom:1px solid rgba(177,177,177,1.00);  display: block; width:100%;}
ul.topnav li ul.subnav li a{color:#333333; position: relative;}
ul.topnav li a.sub:after{content:">"; position:absolute; right: 25px;}
ul.topnav li:hover ul.subnav{visibility:visible;}
ul.topnav li ul.subnav li a:hover{background:rgba(204,204,204,1.00);}
ul.topnav li ul.subnav li{ position: relative; list-style: none;}
ul.topnav li ul.subnav li ul.subsubnav{position: relative; list-style: none; left: 0px; width: 100%; background:#E4E4E4; padding-left:20px; top: 0; border-left:0px solid #D5D5D5; visibility:visible;}
ul.topnav li ul.subnav li ul.subsubnav li:last-child{border-bottom:0px solid rgba(177,177,177,1.00);}
ul.topnav li ul.subnav li:hover ul.subsubnav{visibility:visible; position: relative;}
ul.topnav li ul.subnav li ul.subsubnav.sub3nav { width: calc(100% + 20px); margin-left: -20px; padding-left: 40px; background: #e0e0e0; }
.top-icon{text-align: right; margin-top: 48px;}
.top-icon a {
    color: #ffffff;
    background: #008eba;
    width: 41px;
    height: 41px;
    border-radius: 100%;
    display: inline-block;
    text-align: center;
    padding: 9px 0 0 0;
    margin: 0 4px;
	font-size:18px;
}
.table {font-size:18px;}
.highlights .table tbody tr td:nth-child(2), .table thead tr td:nth-child(2){background:#e5f6fa; font-weight: bold;}
.table thead tr td{border-top:0;}
.table thead tr td, .table tbody tr td{padding:12px;}
.panel-group{margin-bottom:50px;}

.table-business{margin-bottom:50px;}
.table-business thead td{ background:#ffffff !important; font-weight: bold;}
.table-business .city{background:#008db5; text-align: center; color:#ffffff;}
.table-business thead td, .table-business tbody td{text-align:right; vertical-align: middle !important;}
.table-business thead td:first-child, .table-business tbody td:first-child{text-align:left;}

/* Mobile Nav*/
.topnavWrapper.act ul.topnav li{float:none;}
.topnavWrapper.act ul.topnav li ul.subnav {position: relative; left: none; display: none;}
.topnavWrapper.act ul.topnav li.act ul.subnav {display: block; left: 0; visibility: visible;}
.topnavWrapper .top-icon{text-align:center; padding:30px 0; border-top:1px solid rgba(208,208,208,1.00);}
.topnavWrapper .top-icon a {
    color: #ffffff;
    background: #7f7f81;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: inline-block;
    text-align: center;
    padding: 10px 0 0 0;
    margin: 0 8px;
}
.topnavWrapper .searchWrapper button#searchSubmit {
    position: absolute;
    top: 25px;
    right: 10px;
    background: none;
    border: 0;
}
.topnavWrapper .searchWrapper {
    padding: 15px 0;
    background: none;
    margin-top: 10px;
    position: relative;
}
.topnavWrapper .searchWrapper input#search {
    width: 100%;
    padding: 0px 15px;
    line-height: 40px;
	border:1px solid #dddddd;
}
.hamburger{margin:30px 0 0 0; padding:15px 0 15px 15px;}

.sitempaWrapper{background:#f6f6f6; padding:75px 0 45px 0;}
.sitempaWrapper .title{font-size:24px; color:#666666; margin-bottom:20px;}
.sitempaWrapper .sitemap{list-style: none; padding-left: 10px; margin-bottom:30px;}
.sitempaWrapper .sitemap li{margin-bottom:12px;}
.sitempaWrapper .sitemap a{color:#008db5; font-size:16px;}
.sitempaWrapper ul.subsubnav{list-style:none; margin:20px 0; padding-left: 20px;}
footer{background:#f6f6f6;}
.footerWrapper{border-top:none; padding:35px 0;}
.footerWrapper .footerLogo img{max-width:145px; height:auto;}
.copyright{font-size:14px; color:#666666; margin-top: 15px; text-align: center;}
.copyright a{padding:0 15px;}
.table-responsive tbody tr:first-child td{font-weight:bold;}

/* Home */
.homeBanner{height: 300px; margin-top:0px;}
.homeBanner .banner00{background:url(../../tc/images/home/banner00.jpg) no-repeat; background-size: cover; background-position: center center; height: 300px;}
.homeBanner .banner01{background:url(../../tc/images/home/banner01.jpg) no-repeat; background-size: cover; background-position: center center; height: 300px;}
.homeBanner .banner02{background:url(../../tc/images/home/banner02.jpg) no-repeat; background-size: cover; background-position: center center; height: 300px;}
.homeBanner .banner03{background:url(../../tc/images/home/banner03.jpg) no-repeat; background-size: cover; background-position: center center; height: 300px;}
.homeBanner .banner04{background:url(../../tc/images/home/banner04.jpg) no-repeat; background-size: cover; background-position: center center; height: 300px;}
.homeBanner .owl-nav .owl-prev{left:10px; position: absolute; z-index: 200; width:30px; height: 30px; background:#008db5 !important; color: #ffffff !important; top: 50%; transform: translateY(-50%); visibility: hidden;}
.homeBanner .owl-nav .owl-next{right:10px; position: absolute; z-index: 200; width:30px; height: 30px; background:#008db5 !important; color: #ffffff !important; top: 50%; transform: translateY(-50%); visibility: hidden;}
.homeBanner:hover .owl-nav .owl-prev, .homeBanner:hover .owl-nav .owl-next{visibility: visible;}
.homeNewsWrapper{margin:65px 0;}
.home-news .more{margin-top:-15px; font-size:16px;}
.homeStockWrapper{padding:65px 0; background:url(../../tc/images/home/home-stock.jpg) no-repeat; background-size: cover; background-position: center top;}
.homeStock .nav-tabs{border-bottom:0;}
.homeStock .nav-tabs > li{float:right;}
.homeStock .nav-tabs > li.active > a, .homtStock .nav-tabs > li.active > a:hover, .homtStock .nav-tabs > li.active > a:focus{background-color:#ffffff; color:#008db5; }
.homeStock .nav-tabs > li > a{background-color:#00a38a; color:#ffffff; font-size:18px; padding:12px 25px; margin-right:0; margin-left: 10px;}
.homeStock .tab-content{background:#ffffff; padding:40px; border-radius: 5px 0 5px 5px;}
.homeStock h3{margin-top:5px; float:none;}
.homeStock .info{float:left;}
.homeStock .more{float:none; margin-top:10px;}
.homeStock .price{ font-size:20px; display: block; position: relative; padding:0 20px 0 0; margin-bottom: 10px;}
.homeStock .price:first-child{ padding-left: 0px; }
.homeStock .price:first-child:before{content:""; }
.homeStock .price:before{content:"";   position: absolute;  left: 0;}
.homeStock .price .dollars{font-size:36px;}
.homeStock .no{color:#008db5;}
.homeStock .time{font-size:16px;}
.homeStock .irasia{margin-left:0px; display: block; padding-bottom:15px;}
.homeStock .irasia a{color:#333333;}
.homeReportWrapper{margin-top:50px; margin-bottom:50px}
.homeReportWrapper .homeReport, .homeReportWrapper .homeEsg{position:relative; }
.homeReportWrapper .homeReport .title, .homeReportWrapper .homeEsg .title{position:absolute; top: 50%; left:30px; transform: translateY(-50%); color: #ffffff; font-size: 24px;}
.homeReportWrapper .homeReport .title span, .homeReportWrapper .homeEsg .title span{font-size: 36px;}
.homeReportWrapper .homeReport .bg{background:#008ab1; height: 240px; margin-top: 45px; width: 100%; z-index:49; margin-bottom: 20px;}
.homeReportWrapper .homeReport .btn{padding:12px 60px; color:#008db5; border-color:#008db5; border:2px solid;}
.homeReportWrapper .homeReport .btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.homeReportWrapper .homeReport .btn:hover, .btn:focus, .btn.focus {
    color: #333;
    text-decoration: none;
}
.homeReportWrapper .homeEsg .bg{background:#00a188; height: 240px; margin-top: 45px; width: 100%; z-index:49; margin-bottom: 20px;}
.homeReportWrapper .homeReport .cover{z-index:50; position: absolute; right: 25px; top: 50px; -webkit-box-shadow: -1px 6px 11px 4px rgba(0,0,0,0.18); box-shadow: -1px 6px 11px 4px rgba(0,0,0,0.18); max-width:100px; margin-bottom: 20px;}
.homeReportWrapper .homeEsg .cover{z-index:50; position: absolute; right: 25px; top: 50px; -webkit-box-shadow: -1px 6px 11px 4px rgba(0,0,0,0.18); box-shadow: -1px 6px 11px 4px rgba(0,0,0,0.18); max-width:100px; margin-bottom: 20px;}
.homeBusinessWrapper{margin:70px 0;}
.homeBusiness .item{font-size:16px; position: relative;}
.homeBusiness .item01{background:url(../../tc/images/home/homeBusiness01.png) no-repeat; background-size: cover; background-position: center; color: #ffffff; padding: 15px; height: 220px;}
.homeBusiness .item02{background:url(../../tc/images/home/homeBusiness02.png) no-repeat; background-size: cover; background-position: center; color: #ffffff; padding: 15px; height: 220px;}
.homeBusiness .item03{background:url(../../tc/images/home/homeBusiness03.png) no-repeat; background-size: cover; background-position: center; color: #ffffff; padding: 15px; height: 220px;}
.homeBusiness .item04{background:url(../../tc/images/home/homeBusiness04.png) no-repeat; background-size: cover; background-position: center; color: #ffffff; padding: 15px; height: 220px;}
.homeBusiness .item05{background:url(../../tc/images/home/homeBusiness05.png) no-repeat; background-size: cover; background-position: center; color: #ffffff; padding: 15px; height: 220px;}
.homeBusiness .item .text{position:absolute; left: 50%; transform: translateX(-50%); bottom: 10px; color: #008cb4; width: 100%; text-align: center;}

.ipo img{-webkit-box-shadow: -1px 6px 11px 4px rgba(0,0,0,0.18); box-shadow: -1px 6px 11px 4px rgba(0,0,0,0.18); margin: 0 auto;}

#videoWrapper { position: relative; width: 100% }
#videoWrapper img { width: 100%; }
#videoWrapper .homeVideoPop { position: absolute; cursor: pointer; z-index: 2; }

/* Content */
.homeStock .btn{padding:12px 60px; color:#008db5; border-color:#008db5; border:2px solid;}
.contentWrapper{min-height:700px; padding:60px 0; background:#ffffff;}
.contentWrapper h1{color:#008db5;}
.contentWrapper img{margin-bottom:20px;}
.subBanner{margin-top:0;}
.subBanner .container {height: 100%; position: relative;}
.subBanner .title { position: absolute; top: 50%; transform: translateY(-50%); font-size: 36px; color: #ffffff; font-weight: bold; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);}
.subBanner.about{background:url(../../tc/images/global/subBanner-about.jpg) no-repeat; background-size: cover; background-position: center center; height: 212px;}
.subBanner.ir{background:url(../../tc/images/global/subBanner-ir.jpg) no-repeat; background-size: cover; background-position: center center; height: 212px;}
.subBanner.career{background:url(../../tc/images/global/subBanner-career.jpg) no-repeat; background-size: cover; background-position: center center; height: 212px;}
.subBanner.csr{background:url(../../tc/images/global/subBanner-csr.jpg) no-repeat; background-size: cover; background-position: center center; height: 212px;}
.subBanner.business{background:url(../../tc/images/global/subBanner-business.jpg) no-repeat; background-size: cover; background-position: center center; height: 212px;}
.subBanner.media{background:url(../../tc/images/global/subBanner-media.jpg) no-repeat; background-size: cover; background-position: center center; height: 212px;}
.subBanner.culture{background:url(../../tc/images/global/subBanner-culture.jpg) no-repeat; background-size: cover; background-position: center center; height: 212px;}



.pageTitle h1{margin-top:0; margin-bottom:40px;}
.year-pulldown{margin-bottom:40px;}


.pdfItem .dateContainer {display: table-cell; padding: 0 20px 0 0;}
.pdfItem .dateContainer .date { width: 80px; height: 122px; background:url(../../tc/images/global/water.png) no-repeat; background-position: center center; text-align: center; padding: 10px 0; margin-bottom: 18px;}
.pdfItem .dateContainer .date .month { font-size: 14px; color: #008db5; margin-top:30px; font-weight: bold;}
.pdfItem .dateContainer .date .day {font-size:42px; font-weight: bold; line-height: normal; color: #008db5;}
.pdfItem .pdfLink {display: table-cell; vertical-align: middle; padding: 0; max-width: 780px;}
.pdfItem .pdfLink a {color:#333333; font-size:20px; display: block;}

/* About */
.cg .title a{color:#008db5; font-size:22px; font-weight: bold; margin-bottom:25px;}
.cg .cover{border:1px solid #dddddd; margin-bottom: 20px;}
.cg .cover img{margin-bottom:0;}

.directors .alert{padding:25px;}
.directors .alert .title{font-size:24px; margin:10px 0 20px 0;}
.directors .alert .btn{margin-bottom:25px; /*font-size:12px;*/}

.contact .details{font-size:18px;}
.contact .details .left{width:100px; display: table-cell;}
.contact .details .right{display: table-cell; padding-bottom:20px;}

/* Business */
.businessSection .section{border-bottom:1px solid #bbb; padding: 25px 0 5px 0; display: table; width:100%;}
.businessProject .imgDiv img { cursor: pointer; }


/* IR */
.contentWrapper .year{font-size:26px; font-weight:bold; margin-bottom: 20px; display: block; color:#333333; }
.year-pulldown {margin-bottom:50px;}
.report {position:relative; margin-bottom: 30px;}
.report a {position:absolute; width:100%; height: 100%; top: 0; left: 0;}
.report .cover{border:1px solid #dddddd; margin-bottom: 20px;}
.report .cover img{margin-bottom:0;}
.report .title{font-size:24px; color:#008db5; min-height: 70px;}

.milestones .section{ border-bottom:1px solid #bbb; padding: 25px 0 5px 0; display: table; width:100%;}
.milestones .section .month{display:table-cell; width:150px; color:#008db5; font-size:20px; font-weight: bold;}
.milestones .section .title{color:#008db5; font-size:22px; font-weight: bold; margin-bottom:25px;}
.milestones .section .item{display:table-cell;}
.milestones a {color:#333333; font-size:20px; display: block;}
.milestone-image { display: table; width: 100%; margin-bottom: 20px; }
.milestones .leftCol{display: table-cell; max-width: 700px; font-size: 20px; vertical-align: top; width: 65%; }
.milestones .rightCol{display: table-cell; font-size: 20px;}

/* Career */
.career .job{min-width:300px; max-width:300px; display:inline-block; padding:5px 0;}
.career .location{max-width:300px; display:inline-block; padding:5px 0;}


/* CSR */
.media .panel-heading { padding: 15px 20px; }
.media .panel-title a { font-size: 20px; font-weight: bold; }
.media .panel-body { padding: 20px 20px; }
.media .panel-body a { font-size: 20px; }
.media .panel-body .panel-group { margin-bottom: 0; }
.media .inner-panel { border: none; background: transparent; box-shadow: none; }
.media .inner-panel .panel-heading { padding: 0; margin-bottom: 20px; background: transparent; }
.media .inner-panel .panel-body { padding: 0 0 0 30px; border: none !important; }
.media .panel-body h3 { text-align: center; font-weight: bold; line-height: 1.3; margin-bottom: 20px; }
.media .panel-body p.bold { font-weight: bold; }
.full-width{width:100%;}

/* Media */
.gallery-tab.nav-tabs{border: 0;}
.gallery-tab.nav-tabs > li > a{border:2px solid #008db5; color:#008db5; border-radius:5px; margin-right: 5px;}
.gallery-tab.nav-tabs > li.active > a, .gallery-tab.nav-tabs > li.active > a:hover, .gallery-tab.nav-tabs > li.active > a:focus{border:2px solid #008db5; color:#ffffff; background: #008db5;}
.gallery-tab.nav-tabs .btn:focus, .gallery-tab.nav-tabs .btn:hover{border:0;}
.gallery-content{padding:30px 0;}
.gallery {margin-bottom:30px;}
.gallery-tab.nav-tabs > li {margin-bottom:15px;}

/* Culture */
.culture .section{border-bottom:1px solid #bbb; display: table; padding:25px 0px 25px 0px; width:100%;}
.culture .section .photo{display:block;}
.culture .section .text{display:block; vertical-align: top; padding:0 15px; position: relative; font-size:20px;}
.culture .section .text .heading{font-weight: bold; margin-bottom: 15px;}
.culture .section .text .sub-head{padding-bottom: 30px; text-align: justify;}
.culture .section .text .readmore{ position: relative; bottom: 0px; right: 15px; font-size:16px; margin-left: 15px;}
.culture .section .text .readmore a, a.culture-back{background:#008eba; padding: 8px 15px; border-radius: 5px; color: #ffffff;}
.culture .section .photo img{max-width:100%; padding: 0 10px;}
.culture-slide img{margin:20px 10px;}


@media (min-width: 768px){
	.homeStock h3{margin-top:5px; float:left;}
	.homeReportWrapper .homeReport .bg{margin-top: 45px;}
	.homeReportWrapper .homeEsg .bg{ margin-top: 45px;}
	.homeReportWrapper .homeReport .cover{max-width:220px; top: -45px;}
	.homeReportWrapper .homeEsg .cover{max-width:220px; top: -45px;}
	
	.content-with-img {
		display: table;
		direction: rtl;
		width: 100%;
	}
	.content-with-img > .imgDiv {
		width: 280px;
		padding-left: 20px;
	}
	.content-with-img > div {
		display: table-cell;
		vertical-align: middle;
		table-layout: fixed;
	}
	.content-with-img > .contentDiv {
		padding: 15px 15px 0;
		direction: ltr;
	}
	.content-with-img > div {
		display: table-cell;
		vertical-align: middle;
		table-layout: fixed;
	}
	.homeBusiness .item .text{position:absolute; left: 50%; transform: translateX(-50%); bottom: 25px; color: #008cb4; width: 100%; text-align: center;}
	
	/* Culture */
	.culture .section .photo{display:table-cell;}
	.culture .section .text{display:table-cell; }
	.culture .section .text .readmore{ position: absolute; bottom: 0px; right: 15px; font-size:16px;}
	.culture .section .photo img{max-width:200px; padding: 0 10px;}
}

@media (min-width:1024px){
	.homeStock .price{ display: inline-block; padding:0 20px 0 25px;}
	.homeStock .price:before{content:"|"; }
	.homeStock .irasia{margin-left:50px; display: inline;}
	.homeStock .more{float:right;}
	.homeReportWrapper{margin-top:130px; margin-bottom:100px}
	.homeReportWrapper .homeReport .cover{max-width:220px; top: -45px;}
	.homeReportWrapper .homeEsg .cover{max-width:220px; top: -45px;}
	.copyright{text-align: right;}
}
@media (min-width: 1200px){
	ul.topnav li ul.subnav li ul.subsubnav{visibility:hidden; position: absolute; left: 240px; background:rgba(233,233,233,1.00); padding-left:0px; border-left:2px solid #D5D5D5;}
	ul.topnav li ul.subnav li ul.subsubnav li:last-child{border-bottom:1px solid rgba(177,177,177,1.00);}
	ul.topnav li ul.subnav li:hover ul.subsubnav{visibility:visible; position: absolute;}
	ul.topnav li ul.subnav li ul.subsubnav.sub3nav { visibility: hidden; left: 236px; width: 100%; margin-left: 0; padding-left: 0px; background: rgba(233,233,233,1.00); }
	ul.topnav li ul.subnav li ul.subsubnav li:hover ul.sub3nav { visibility:visible; }
	.homeBanner{height: 300px; margin-top:75px;}
	.homeBanner .banner01{height: 300px;}
	.homeReportWrapper .homeReport .cover, .homeReportWrapper .homeEsg .cover{max-width:100%; right: 40px;}
	.homeReportWrapper .homeReport .cover{top: -45px;}
	.homeReportWrapper .homeEsg .cover{top: -110px;}
	.homeReportWrapper .homeReport .bg{margin-top: 45px;}
	.homeReportWrapper .homeEsg .bg{ margin-top: 110px;}
	.subBanner{margin-top:75px;}
	.header .logo{padding:30px 0 4px 0;}
	.topnavWrapper.act ul.topnav li{float:left !important;}
	.topnavWrapper.act ul.topnav li ul.subnav {display:inherit; position:absolute; left: 20px;}
	.topnavWrapper.act ul.topnav li.act ul.subnav{visibility: hidden; left: 20px;}
	.topnavWrapper.act ul.topnav li.act:hover ul.subnav{visibility: visible;}
	.topnavWrapper{height:55px; display: block !important;  margin-top:20px;}
}



.searchBox{
	display:none;
	position:absolute;
	border:1px solid #9e9e9e;
	width:280px;
	height:43px;
	right:122px;
	top:47px;
	background:#fff;
	border-radius: 14px;
}
#search{
	border:none;
	line-height:40px;
	padding:0px 10px;
	width:220px;
	font-size:18px;

}
#submitBtn{
	float:right;
	display:block;
	width:40px;
	height:40px;
	background:url(../images/global/search_submit.png) center center no-repeat;
	border:none;
	cursor:pointer;
}		


/* Supplier */
.supplier ul.listDot {
	margin-bottom: 20px;
}
.supplier ul.listDot li {
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 20px;
}
.supplier h3 {
	font-size: 22px;
	font-weight: bold;
	color: #008db5;
	margin-top: 25px;
	margin-bottom: 25px;
}


/* Communications */
ul.listNum {
	list-style: none;
	counter-reset: number;
	padding-left: 0;
}
ul.listNum li {
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 20px;
	counter-increment: number;
	padding-left: 40px;
	position: relative;
}
ul.listNum li:before {
	content: counter(number) ". ";
	position: absolute;
	left: 0;
}
ul.listLetter {
	list-style: none;
	counter-reset: letter;
	padding-left: 0;
}
ul.listLetter li {
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 20px;
	counter-increment: letter;
	padding-left: 40px;
	position: relative;
}
ul.listLetter li:before {
	content: "(" counter(letter, lower-alpha) ")";
	position: absolute;
	left: 0;
}
.communication {
	text-align: justify;
}
.communication a {
	word-wrap: break-word;
}
.communication .inline {
	display: inline-block;
}