@charset "utf-8";

/* CSS GLOBAL */
html, body { background: #fff; overflow-x: hidden; font-size:14px; line-height:normal }
div, span, table, tr, td, sup, sub { color: #555; }
b{ font-weight:bold}
p { color: #555; font-size: 14px; line-height: 28px; margin-bottom: 20px; text-align: justify; }
h1 { color: #4e98a5; font-size: 24px; font-weight: bold; margin: 30px 0 20px; line-height: 32px; }
h2 { color: #4e98a5; font-size: 20px; font-weight: bold; margin: 20px 0 20px; line-height: 28px; }
h3 { color: #4e98a5; font-size: 16px; font-weight: bold; margin: 20px 0 20px; line-height: 28px; }
h4 { color: #4e98a5; font-size: 16px; font-weight: bold; margin: 5px 0 ; line-height: 28px; }
sup{ vertical-align:super; font-size:10px}
.highlight { background-color: #eaf0f1; padding: 8px; }
.center { text-align: center; }
.bold { font-weight: bold; }
.remark { font-size: 12px; }
.img-responsive { max-width: 100%; }
.full-width { width: 100%; }
.img-right { float: right; margin: 0 0 20px 20px; }
.body { width: 100%; background: url("../images/global/bg.png"); background-repeat: repeat-y; }
.mainWrapper { width: 100%; max-width: 1366px; margin: 0 auto; background: #fff; box-shadow: 0px 0px 25px 2px #ccc; }

ul li { line-height: 28px; color: #555; }
ul.listNum { counter-reset: number; margin-bottom: 20px; }
ul.listNum li { position: relative; padding-left: 30px; margin-bottom: 20px; font-size: 14px; }
ul.listNum > li:before { content: counter(number) ". "; counter-increment: number; display: inline-block; width: 30px; position: absolute; left: 3px; }
ul.listSquare { margin-bottom: 20px; }
ul.listSquare li { position: relative; padding-left: 30px; margin-bottom: 10px; font-size: 14px; }
ul.listSquare > li:before { content: "\220E"; position: absolute; top: -1px; left: 5px; font-size: 10px; color: #4e98a5; }

.sectionBanner img { width: 100%; display: block; }

.mainContent { background: #fcf9f3; padding: 30px 0 80px; }
.contentWrapper { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.row { margin: 0 -20px; }
.row:before, .row:after, .contentWrapper:before, .contentWrapper:after { content: ''; display: table; clear: both; }
.leftNav { width: 20%; float: left; padding-left: 20px; overflow: hidden; }
.leftNav .sectionName { line-height: 50px; color: #4e98a5; font-size: 24px; padding-right: 20px; border-bottom: 1px solid #e1e1e1; }
.leftNav .leftnav-list li { border-bottom: 1px dashed #e5e5e5; }
.leftNav .leftnav-list li a { display: block; padding: 13px 20px 13px 40px; line-height: 22px; font-size: 16px; color: #555; position: relative; }
.leftNav .leftnav-list li a:before { content: ''; width: 6px; height: 22px; display: block; background: url("../images/global/icon_leftnav.png") no-repeat center; position: absolute; left: 18px; }
.leftNav .leftnav-list li.act a { background: #4e98a5; color: #fff; }
.leftNav .leftnav-list li.act a:before { background: url("../images/global/icon_leftnav_white.png") no-repeat center; }
.leftNav .leftnav-list li .sub-leftnav-list { display: none; }
.leftNav .leftnav-list li .sub-leftnav-list a { background: #eaefeb; font-size: 14px; border-bottom: 1px dashed #fff; color: #555; }
.leftNav .leftnav-list li .sub-leftnav-list a:before { display: none; }
.leftNav .leftnav-list li .sub-leftnav-list li.act > a { color: #4e98a5; }
.leftNav .leftnav-list li .sub-leftnav-list .sub-sub-leftnav-list li a { padding-left: 55px; background: rgba(234, 239, 235, 0.6); }
.leftNav .leftnav-list li.act .sub-leftnav-list { display: block; }
.leftNav .leftnav-list li .sub-leftnav-list.productionBases > li > a { font-weight: bold; }
.rightContent { width: 80%; min-height: 550px; float: left; padding: 0 20px; border-left: 1px solid #e1e1e1; padding-left: 30px; }
.rightContent .pageTitle { position: relative; margin-left: -30px; padding-left: 30px; padding-bottom: 4px; background: url("../images/global/divider.png") no-repeat bottom right; line-height: 50px; }
.rightContent .pageName { font-size: 14px; color: #555; position: relative; padding-left: 20px; display: inline-block; }
.rightContent .pageName:before { content: ''; display: block; position: absolute; left: 0;  width: 11px; height: 100%; background: url("../images/global/icon_page.png") no-repeat center; }
.rightContent .breadcrumbs { position: absolute; top: 0; right: 0; font-size: 12px; color: #999; z-index: 3; line-height: 20px; }
.rightContent .breadcrumbs a { color: #999; }
.rightContent .breadcrumbs span.current { color: #555; display: inline-block; }
.rightContent .pageContent { padding: 0; }

.content-with-img { display: table; width: 100%; }
.content-with-img > div  { display: table-cell; vertical-align: top; }
.content-with-img .imgDiv { width: 20%; }
.content-with-img .imgDiv img { width: 100%; margin: 10px 0; }
.content-with-img .contentDiv { width: 80%; padding: 10px 0 0 20px; }

.yearWrapper { background: rgba(153,153,153,0.5); margin: 40px 0; position: relative; }
.yearWrapper .slideBar { padding: 0 40px; }
.yearWrapper .slideBar a { display: block; text-align: center; padding: 15px; color: #fff; font-size: 16px; }
.yearWrapper .slideBar a:hover, .yearWrapper .slideBar a.act { background: rgba(153,153,153,0.4); }
.yearWrapper .control-prev { position: absolute; top: 0; left: 0; display: block; width: 40px; height: 100%; background: url("../images/global/icon_prev.png") no-repeat center; cursor: pointer; z-index: 5; }
.yearWrapper .control-next { position: absolute; top: 0; right: 0; display: block; width: 40px; height: 100%; background: url("../images/global/icon_next.png") no-repeat center; cursor: pointer; z-index: 5; }


/* Header */
.header .top { background: url("../images/global/lang_bg.png"); background-size: 840px 30px; background-repeat: no-repeat; background-position: bottom right ; }
.header .top-wrapper { width: 100%; max-width: 1240px; margin: 0 auto; }
.header .top-wrapper:after { content: ''; display: table; clear: both; }
.header .top-left { float: left; width: 40%; padding-left: 20px; }
.header .top-right { float: left; width: 60%; padding-right: 20px; }
.header .logo a { display: inline-block; margin-top: 25px; }
.header .logo img { display: inline-block; vertical-align: bottom; max-height: 59px; }
.header .search { z-index: 10; margin: 12px 0; }
.header .search .input-group { position: relative; text-align: right; }
.header .search .form-control { border: 1px solid #f0f0f0; background: #f0f0f0; border-radius: 30px; height: 30px; line-height: 30px; margin: 0; padding: 0 40px 0 10px; width: 246px; position: relative; }
.header .search .btn-default { background: transparent; border: 0 none; color:#fff; position: absolute; right: 10px; top: 0; z-index: 3; }
.header .search .btn-default span { background: url("../images/global/icon_search.png") no-repeat; background-size: 18px 19px; width: 18px; height: 19px; display: inline-block; cursor: pointer; margin-top: 4px; }
.header .tool { text-align: right; line-height: 30px; font-size: 14px; }
.header .tool > div { display: inline-block; position: relative; vertical-align: top; }
.header .tool a { display: inline-block; color: #fff; position: relative; vertical-align: top; }
.header .contact { margin: 0 20px 0 30px; }
.header .contact > a:before { content: ''; display: block; width: 30px; height: 100%; background: url("../images/global/icon_contact.png") 16px 14px no-repeat; background-position: center; position: absolute; left: -30px; }
.header .contact > a:after { content: ''; width: 1px; height: 10px; background: #fff; top: 10px; right: -12px; position: absolute; }
.header .lang { margin: 0 20px; }
.header .lang > a:before { content: ''; display: block; width: 14px; height: 100%; background: url("../images/global/icon_lang.png") 14px 14px no-repeat; background-position: center; position: absolute; left: -20px; }
.header .lang > a:after { content: ''; display: block; width: 7px; height: 100%; background: url("../images/global/icon_dropdown.png") 7px 4px no-repeat; background-position: center; position: absolute; right: -15px; top: 0; }
.header .lang-wrapper { position: absolute; width: 60px; text-align: center; top: 102%; left: -20px; background: #fff; display: none; z-index: 20; }
.header .lang-wrapper a { display: block; width: 100%; }
.header .lang-wrapper a:hover { background: #4e98a5; }
.header .lang-wrapper a:hover span { color: #fff; }
.header .lang.act .lang-wrapper { display: block; }
.header .bottom-wrapper { width: 100%; max-width: 1240px; margin: 0 auto; padding: 35px 20px 0; text-align: right; }
.header .header-nav { vertical-align: middle; z-index: 30; }
.header .header-nav .nav-btn { display: inline-block; position: relative; padding: 0 30px; margin-left: -4px; }
.header .header-nav .nav-btn:after { content: ''; background: url("../images/global/nav_bg.png") no-repeat center; width: 1px; height: 15px; position: absolute; top: 0px; right: 0; }
.header .header-nav .nav-btn:last-child:after { display: none; }
.header .header-nav .nav-btn > a { font-weight: bold; font-size: 15px; display: block; height: 40px; border-bottom: none; }
.header .header-nav .nav-btn .nav-list { position: absolute; z-index: 20; padding: 20px 10px 0; line-height: normal; width: 100%; background: #fff; font-size: 14px; text-align: center; left: 0; display: none; }
.header .header-nav .nav-btn .nav-list a { display: block; margin-bottom: 10px; line-height:26px }
.header .header-nav .nav-btn .nav-list .sub-nav-list { background: rgba(240,240,240,0.8); }


/* Footer */
.footer { width: 100%; background: #007A8F; font-size: 12px; line-height: 16px; }
.footer-wrapper { width: 100%; max-width: 1240px; margin: 0 auto; padding: 10px 20px; }
.footer-wrapper:after { content: ''; display: table; clear: both; }
.footer-wrapper > div { float: left; margin: 5px 0; }
.footer-nav a { position: relative; display: inline-block; margin-right: 15px; color: #6EAEBA; }
.footer-nav a:after { content: ''; position: absolute; right: -8px; width: 1px; height: 80%; top: 10%; background-color: #6EAEBA; }
.footer-nav a:hover { color: #fff; }
.footer-copywrite, .footer-copywrite span { color: #6EAEBA; }
.footer .share{ clear:both; overflow:hidden; float:right; margin:-5px 0 0}
.footer .share a{ width: 22px; height: 22px; background: url(../images/global/sy_share.png) no-repeat; border-radius: 50%; transition: background-image .3s ease-out,background-color .3s ease-out;}
.footer .share a:hover{ background-image: url(../images/global/sy_share.png); background-color: #007A8F;}
.footer .share a.weixin{ background-position: 0px 0px;}
.footer .share a.sina{ background-position: -28px 0px;}
.footer .share a.qq{ background-position: -56px 0px;}
@media (max-width:768px) {
	.footer .share{ float:none; margin-top:0}
}

/* 首頁 */
.homeBanner { position:relative; overflow:hidden; max-height:500px}
.homeBanner .item{position:relative}
.slick-slide .desktopBannerImg{ display:block; width:100%}
.slick-slide .mobileBannerImg{ display:none; width:100%}
@media (max-width:768px) {
	.slick-slide .desktopBannerImg{ display:none}
	.slick-slide .mobileBannerImg{ display:block}
}

.slick-disabled{ visibility:hidden}
.homeBanner-prev, .homeBanner-next{ position:absolute; z-index:100; cursor:pointer}
.homeBanner-prev{width: 30px; height: 30px; left: 30px;top: 50%; margin-top: -15px; border-left: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(-45deg);}
.homeBanner-next{width: 30px; height: 30px; right: 30px; top: 50%; margin-top: -15px;  border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg);}

.homeBanner .item .con{ position:absolute;  overflow: hidden; top:0; z-index:10; width:100%; height:inherit}
.homeBanner .item .con img{ width: auto; }

.homeBanner .item .con1{}
.homeBanner .item .con1 .txt1{  position:absolute; right:9%; top:40%; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 3s; opacity:0}
.homeBanner .item.slick-active .con1 .txt1{-webkit-transform:scale(1, 1); transform:scale(1, 1);opacity:1}

.homeBanner .item .con2{}
.homeBanner .item .con2 .txt1{  position:absolute; right:-20%; top:25%; transition: all 3s; opacity:0}
.homeBanner .item.slick-active .con2 .txt1{right:15%;top:30%;opacity:1}
.homeBanner .item .con2 .txt2{  position:absolute; right:-30%; top:70%; transition: all 3s; opacity:0}
.homeBanner .item.slick-active .con2 .txt2{right:12%;top:42.5%; opacity:1}

.homeBanner .item .con3{}
.homeBanner .item .con3 .txt1{  position:absolute; left:-20%; top:25%;  transition: all 3s; opacity:0}
.homeBanner .item.slick-active .con3 .txt1{left:31%;top:43%; opacity:1}
.homeBanner .item .con3 .txt2{  position:absolute; left:-30%; top:70%; transition: all 3s; opacity:0}
.homeBanner .item.slick-active .con3 .txt2{left:39%;top:56%; ; opacity:1}

.homeBanner .item .con4{}
.homeBanner .item .con4 .txt1{  position:absolute; right:5%; top:5%; transition: all 3s; opacity:0}
.homeBanner .item.slick-active .con4 .txt1{right:8%;top:34%;opacity:1}
.homeBanner .item .con4 .txt2{  position:absolute; right:5%; top:20%; transition: all 3s; opacity:0}
.homeBanner .item.slick-active .con4 .txt2{right:5%;top:50%; ; opacity:1}

@media screen and (max-width: 1200px) {
	.homeBanner .item .con1 .txt1 img{ /*height:70px;*/}
	.homeBanner .item .con2 .txt1 img{ height:57px;}
	.homeBanner .item .con2 .txt2 img{ height:30px;}
	.homeBanner .item .con3 .txt1 img{ height:34px;}
	.homeBanner .item .con3 .txt2 img{ height:30px;}
	.homeBanner .item .con4 .txt1 img{ height:30px;}
	.homeBanner .item .con4 .txt2 img{ height:30px;}
}

@media screen and (max-width: 768px) {
	.homeBanner-prev{left: 10px;}
	.homeBanner-next{right: 10px;}
	
	.homeBanner .item .con1 .txt1 img{ height:35px;}
	.homeBanner .item .con2 .txt1 img{ height:42px;}
	.homeBanner .item .con2 .txt2 img{ height:25px;}
	.homeBanner .item .con3 .txt1 img{ height:30px;}
	.homeBanner .item .con3 .txt2 img{ height:25px;}
	.homeBanner .item .con4 .txt1 img{ height:25px;}
	.homeBanner .item .con4 .txt2 img{ height:25px;}
	.homeBanner .item.slick-active .con2 .txt2{top:42.5%;}
	.homeBanner .item.slick-active .con3 .txt2{top:55%;}
	.homeBanner .item.slick-active .con4 .txt2{top:44%;}
}

.homeMainContent { padding: 20px 80px ; background: #fff; font-size:14px; line-height:26px}
.homeMainContent .newItem .cat{ width:80px; float:left;}
.homeMainContent .newItem .cat:after{ content:"|"; color:#E1E1E1; margin:0 20px}
.homeMainContent .newItem .link{ padding-left:80px}
.homeMainContent .newItem .link a{margin-right:20px;}
.homeMainContent .newItem .date{ display:inline-block;  color:#b6b6b6}
@media screen and (max-width: 768px) {
	.homeMainContent { padding: 10px}
	.homeMainContent .newItem .cat{ float:none;}
	.homeMainContent .newItem .cat:after{ display:none}
	.homeMainContent .newItem .link{ padding-left:0; padding-bottom:10px}
	.homeMainContent .newItem .date{ display:block}
}


/* About Us */
.chairmanPhoto{ margin-top:50px}
.chairman .img-right { width: 33.3333%; }
@media (max-width: 767px) {
	.chairman .img-right { width: auto; }
}

.hiddenBox{ display:none}
.mb_title{ cursor:pointer}
.mb_title:before{ content:""; width:10px; height:10px; display:inline-block; margin-right:10px; background-image:url(../images/global/arrow.png); background-size:100%; transition:transform 0.5s }
.mb_title.open:before{ transform:rotate(-180deg)}

.milestoneinfo{ padding-left:60px; padding-top:4%;}
.milestoneinfo ul{ padding-left:40px; padding-bottom:10px; position:relative; background:url(../images/global/line.png) repeat-y 38px center;  }
.milestoneinfo ul ol{ width:20px; height:20px; display:block; background:url(../images/global/point.png) no-repeat center;    position: absolute; /*top: -12px;*/left: 29px;}
.milestoneinfo li{ padding-left:115px; position:relative; margin-bottom:20px; background:url(../images/global/line2.png) no-repeat left center}
.milestoneinfo li .line{position: absolute; left:-11px;top:0; width: 20px; height: 100%;; background:url(../images/global/point.png) no-repeat  center left}
.milestoneinfo li .box{ background:#fff; border-radius:10px; border:1px solid #f2eee7; overflow:hidden;}
.milestoneinfo li .box .txt{ padding-top:25px; padding-bottom:25px; padding-left:25px; display:inline-block;    width: 74%;}
.milestoneinfo li .box .txt.fullbox{ width: 100%;}
.milestoneinfo li .box .txt .title{ font-size:16px; color:#4e98a5; line-height:26px; margin-bottom:10px; font-weight: bold; }
.milestoneinfo li .box .txt .cons{ font-size:14px; color:#555555; line-height:24px;}
.milestoneinfo li .box > img{ /*border-radius:50%;*/ float:right; display:inline-block; width:23.5%}
.milestoneinfo li .box > .imgBox{ /*border-radius:50%;*/ float:right; display:inline-block; width:23.5%}
.milestoneinfo li .box > .imgBox img{ width:100%}
.milestoneinfo li:nth-child(odd) .box { background: #eaf0f1; }
.milestoneinfo li.leftImage .box{ border-radius: 10px 90px 90px 10px;padding: 5px;}
.milestoneinfo li.rightImage .box img{ float:left;}
.milestoneinfo li.rightImage .box{ border-radius: 90px 10px 10px 90px;padding: 5px;}
.milestoneinfo li.noImage .box { width: 100%; }
.milestoneinfo li.noImage .box img{ float:left; display:none}
.milestoneinfo li.noImage .box .txt{ width:100%;    padding-right: 25px;}
.milestoneinfo li.anniu { padding:0; background:url(../images/global/line_arrow.png) no-repeat center; height:22px; width:30px; position:absolute; margin:0; left:24px; }
.milestoneinfo li.anniu.on{transform:rotate(180deg);
-ms-transform:rotate(180deg); 	/* IE 9 */
-moz-transform:rotate(180deg); 	/* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg); } 
.milestoneinfo li .year { position: absolute; width: 80px; padding: 10px; left: -90px; height: 100%; }
.milestoneinfo li .year span { color: #4e98a5; position: absolute; top: 50%; transform: translateY(-50%); }
@media (max-width:1024px) {
.milestoneinfo li .box .txt{    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;}
}
@media (max-width:768px) {
.milestoneinfo { padding-left: 60px; }	
.milestoneinfo ul{ padding-left:20PX; margin-right:15px;background: url(../images/global/line.png) repeat-y 18px center;}
.milestoneinfo ul ol{left:9px ;}
.milestoneinfo li{ padding-left:30px;}
.milestoneinfo li.noImage .box{ width:100%}
}
@media (max-width:640px) {
.milestoneinfo li .box{ border-radius:10px !important }
.milestoneinfo li .box > img, .milestoneinfo li .box > .imgBox{ display:none}
.milestoneinfo li .box .txt{ padding:10px; width:auto}
.milestoneinfo li.anniu {left:4px;}
}

.brandvalues .brandValueContent { float: left; width: 75%; padding-right: 20px; }
.brandvalues .brandValueImg { float: right; width: 25%; margin-top: 10px; }
.brandvalues .brandValueImg img { width: 100%; display: block; margin: 20px 0; }
@media (max-width: 767px) {
	.brandvalues .brandValueContent { float: none; width: 100%; padding-right: 0; }
	.brandvalues .brandValueImg { float: none; width: 100%; }
	.brandvalues .brandValueImg img { width: auto; margin: 20px auto; }
}


/* 公司業務 */
.facilities .title { font-size: 36px; }
.facilities .details { margin: 0; padding: 20px 0; }
.facilities .details > div { float: right; }
.facilities .details .imgWrapper { width: 45%; margin-right: 20px; }
.facilities .details .imgWrapper img { width: 100%; max-width: 550px; margin: 0 0 20px 20px; box-shadow: 0px 0px 20px #999; }
.facilities .details a { color: #88b8bf; }
.facilities .details h4 { margin-top: 0; margin-bottom: 20px; }

.productWrapper { display: block; float: left; padding: 0 20px; margin-bottom: 20px; width:270px }
.productWrapper .imgBg { position: relative; margin-bottom: 20px; }
.productWrapper .name{ line-height:28px;}
.productWrapper .product { position: absolute; width: 100%; height: 100%; padding: 10px; top: 0; }
.productWrapper .product .productImg { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: contain; }
.productDetail:after { content: ''; display: table; clear: both; }
.productDetail > div { float: left; margin-right: 20px; margin-bottom: 20px;  }
.corrupatedsheet .productWrapper img { width: 100%; background: #fff; }

.tableProducts{ margin: 0; font-size: 15px;}
.tableProducts table { border: 1px solid #fff; margin-bottom: 50px; }
.tableProducts table tr td { line-height: 28px; padding: 5px 15px; border: 1px solid #fff; }
.tableProducts table tr:nth-child(odd) { background: #eaf0f1; }
.tableProducts table tr:nth-child(even) { background: #faf8f5; }

.docArea{ display:none; transition:all 0.5; opacity:0; background-color:#EAEFEB; padding:15px 10px 1px; max-width:420px; margin-top:10px; float:none!important;}
.docArea.active{ display:block; opacity:1}
.docArea p { line-height:normal}

/* ESG */
.esg .rightContent { width: 100%; border-left: none; padding-left: 20px; }
.esg .esgBox{ padding:20px; margin-bottom:20px}
.esg .esgReport{ /*background-color:#B9F2D6 */}
.esg .esgEnvironment{ /*background-color:#6FC49B*/ }
.esg .esgEmployment{ /*background-color:#D1BA77*/ }
.esg .esgCommunity{ /*background-color:#61BCCE*/ }

.esg .esgEnvironment h4 { color: #6FC49B; font-size: 20px; margin-bottom: 15px; }
.esg .esgEmployment h4 { color: #D1BA77; font-size: 20px; margin-bottom: 15px; }
.esg .esgCommunity h4 { color: #61BCCE; font-size: 20px; margin-bottom: 15px; }
.esg .esgEnvironment p, .esg .esgEmployment p, .esg .esgCommunity p { }
.esg .esgReportWrapper { margin: 10px 0; }
.esg .esgReportWrapper:after { display: table; clear: both; content: ''; }
.esg .reportSelect { display: inline-block; float: left; position: relative; width: 260px; height: 36px; padding: 8px 25px 8px 12px; border: 2px solid #4e98a5; cursor: pointer; font-weight: bold; background: #fcf9f3; line-height: 18px; }
.esg .reportSelect:after { content: ''; display: block; width: 34px; height: 100%; position: absolute; top: 0; right: 0; background: url("../images/esg/icon_dropdown.png") no-repeat center; }
.esg .reportSelect span { color: #333; }
.esg .reportSelect .dropdown { position: absolute; top: 100%; left: -2px; width: 260px; border: 2px solid #4e98a5; max-height: 200px; overflow: auto; background: #fcf9f3; z-index: 5; display: none; }
.esg .reportSelect .dropdown li a { display: block; background: #fcf9f3; width: 100%; color: #333; height: 32px; padding: 9px 12px; line-height: 1; }
.esg .reportSelect .dropdown li a:hover { background: #4e98a5; color: #fff; }
.esg .reportSelect.act .dropdown { display: block; }
.esg .reportBtn { display: inline-block; margin-left: 10px; }
.esg .reportBtn a { display: block; padding: 10px 40px 10px 16px; background: #4e98a5; height: 36px; border-radius: 3px; line-height: 1; }
.esg .reportBtn a span { display: inline-block; color: #fff; position: relative; }
.esg .reportBtn a span:after { content: ''; width: 20px; height: 36px; background: url("../images/esg/icon_download.png") no-repeat center; display: block; top: -10px; right: -28px; position: absolute; }



/* IR */
.reportWrapper { float: left; width: 50%; padding: 0 20px; text-align: center; margin-bottom: 40px; }
.reportWrapper .cover { display: inline-block }
.reportWrapper .cover img { margin-bottom: 20px; }
.reportWrapper .title { display: inline; color: #555; line-height: 20px; }

.pdfLink { margin-left: -30px; padding-left: 30px; padding-bottom: 10px; border-bottom: 1px solid #e1e1e1; }
.pdfLink > div { display: table-cell; }
.pdfLink .date { width: 120px; }
.pdfLink .date, .pdfLink a { font-size: 14px; color: #555; }
.pdfLink a:hover { color: #4e98a5; }

.tableDetails { margin: 50px 0; }
.tableDetails table { border: 1px solid #fff; margin-bottom: 50px; }
.tableDetails table tr td { line-height: 28px; padding: 5px 15px; border: 1px solid #fff; }
.tableDetails table tr:nth-child(odd) { background: #eaf0f1; }
.tableDetails table tr:nth-child(even) { background: #faf8f5; }
.tableDetails table tr td:nth-child(1) { color: #4e98a5; }
.tableDetails table.tableData td { text-align:right }
.tableDetails table.tableData td:nth-child(1) { text-align:left }
.tableDetails table.table_fininfo tr td { font-size: 15px; }
.tableDetails table.table_fininfo tr td.finHighlight { font-weight: bold; }

/*.calendar .tableDetails table { margin-bottom: 30px; }
.calendar .tableDetails table tr td { padding: 0px 15px; line-height: 34px; border-top: none; border-bottom: none; }
.calendar .tableDetails table tr td span { display: inline-block; color: #4e98a5; position: relative; padding-left: 13px; }
.calendar .tableDetails table tr td span:before { content: ''; display: block; width: 2px; height: 100%; background: #4e98a5; position: absolute; left: 3px; }*/
.calendar .event { margin-left: -30px; padding-left: 30px; padding-bottom: 10px; border-bottom: 1px solid #e1e1e1; }
.calendar .event > div { display: table-cell; }
.calendar .event .date { width: 150px; }
.calendar .event .date, .calendar .event .title { font-size: 14px; color: #555; }

.finSumBox {  width:50%; float:left; box-sizing:border-box; padding:20px; text-align:center}
.finSumBox img { width:80%;}
.finSumBox h3{ text-align:left}

.analyst .remark { line-height: 22px; }
.analyst .table_info tbody tr:first-child { background: #cde1e4; font-weight: bold; }

.cg .pageContent a { color: #88b8bf; }

/* 聯絡我們 */
.contactUs .rightContent { width: 100%; border-left: none; padding-left: 20px; }

.contactUsBox{ padding:2% 0; font-size:14px;}
.contactUsBox .mailBox{ /*border:1px solid #e7e7e7; padding:2%; text-align: center; background: #eaf0f1;*/width: 50%; float: left; }
.contactUsBox .mailBox span{ display: block; margin:10px 5px; font-size: 14px; font-weight: bold; line-height: 20px; }
.contactUsBox .mailBox span > span.label { display: inline-block; margin: 0; width: 70px; }
.contactUsBox .mailBox span a { font-weight: normal; }
.contactUsBox .mailBox.irContactBox span { font-weight: normal; }
.contactUsBox .mailBox.irContactBox span.title, .contactUsBox .mailBox.irContactBox span.label { font-weight: bold; }
.contactUsBox .mailBox.irContactBox span.label { width: 40px; }
.contactUsBox dd{ border:1px solid #e7e7e7; margin-bottom:2%; padding-right:53%; background-color:#fff; position:relative;}
.contactUsBox .map *{ max-width:none;}
.contactUsBox figure{ padding:3% 0 3% 3%;}
.contactUsBox figure h1{font-size: 22px;color: #b71e23; font-weight:normal;padding: 16px 0; margin:0;border-bottom: dashed 1px #ccc;}
.contactUsBox ul{ padding-top:25px;}
.contactUsBox li{line-height:25px; margin-bottom:15px; padding-left:36px; background-repeat:no-repeat; background-position:0 0;}
.contactUsBox li.address{background-image:url(../images/contact/icon_address.png)}
.contactUsBox li.mail{background-image:url(../images/contact/icon_mail.png);}
.contactUsBox li.tel{background-image:url(../images/contact/icon_tel.png);}
.contactUsBox li.fax{background-image:url(../images/contact/icon_fax.png);}
.contactUsBox li.email{background-image:url(../images/contact/icon_email.png);}
.contactUsBox li.web{background-image:url(../images/contact/icon_web.png);}

.contactUs .contactBoxWrapper .contactTitle { border-bottom: 1px solid #ccc; margin-top: 20px; }
.contactUs .contactBoxWrapper .contactTitle a { display: block; color: #4e98a5; font-size: 20px; font-weight: bold; line-height: 28px; margin-bottom: 20px; position: relative; }
.contactUs .contactBoxWrapper .contactTitle a:after { content: '\002B'; display: inline-block; position: absolute; right: 15px; color: #bbb; line-height: 24px; }
.contactUs .contactBoxWrapper.act .contactTitle a:after { content: '\2212'; }

@media (max-width: 768px) {
	.contactUsBox .mailBox { width: 100%; float: none; margin-bottom: 30px; }
}
@media(min-width:641px){
.contactUsBox .map{ position:absolute !important; width:50%; right:0; height:100%; top:0;}
}
@media(max-width:640px){
.contactUsBox dd{ padding:3%;}
.contactUsBox .map{ height:300px; position:relative !important;}
.contactUsBox figure{ padding:0;}
.contactUsBox .mailBox span > span.label { width: 100%; }
.contactUsBox .mailBox.irContactBox span > span.label { width: 40px; }
}
@media(max-width:480px){
.contactUsBox figure h1{ font-size:20px;}
}



/* 網站指南 */
.sitemap .rightContent { width: 100%; border-left: none; padding-left: 20px; }
.sitemap .pageContent ul li { position: relative; padding-left: 30px; font-size: 16px; }
.sitemap .pageContent ul > li:before { content: "\220E"; position: absolute; top: -1px; left: 5px; font-size: 10px; color: #4e98a5; }
.sitemap .pageContent h4 + ul { margin-bottom:20px}
.sitemap .pageContent .fleft{ width:50%; margin-top:30px}


/* Disclaimer */
.disclaimer .rightContent { width: 100%; border-left: none; padding-left: 20px; }


@media screen and (max-width: 1200px) {
	.header .top { background: none; }
	.header .top-right { background: url("../images/global/lang_bg.png") no-repeat; background-position: left bottom; }
	.leftNav .sectionName { font-size: 20px; }
	.rightContent { padding-left: 20px; }
	.rightContent .pageTitle { margin-left: -20px; padding-left: 20px; }
}

@media screen and (max-width: 1024px) {
	.header .top-left { float: none; width: 100%; }
	.header .logo a { margin: 20px 0; }
	.header .logo img { max-height: 40px; }
	.header .top-right { float: none; width: 100%; background: #4e98a5; padding: 5px 20px; }
	.header .search { position: absolute; margin: 0; right: 20px; overflow: hidden; z-index: -1; }
	.header .search #searchForm { position: relative; right: -246px; }
	.header .search.act { z-index: 10; }
	.header .search.act #searchForm { right: 0; transition: 0.5s; }
	.header .mobile-search-btn { margin-left: 10px; }
	.header .mobile-search-btn img { margin-left: 5px; vertical-align: text-bottom; }
	.header .mobile-nav { width: 52px; height: 40px; background: #007A8F; position: absolute; top: 21px; right: 20px; border-radius: 5px; cursor: pointer; }
	.header .mobile-nav .mobile-nav-icon { position: relative; padding: 9px 11px; }
	.header .mobile-nav .mobile-nav-icon .line { display: block; background: #fff; width: 30px; height: 3px; position: relative; left: 0; transition: all 0.3s; -webkit-transition: all 0.3s; }
	.header .mobile-nav .mobile-nav-icon .line.line1 { top: 0; }
	.header .mobile-nav .mobile-nav-icon .line.line2 { top: 6px; }
	.header .mobile-nav .mobile-nav-icon .line.line3 { top: 13px; }
	.header .mobile-nav.act .mobile-nav-icon .line1 { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 9px; transition: transform 0.3s; }
	.header .mobile-nav.act .mobile-nav-icon .line2 { opacity: 0; }
	.header .mobile-nav.act .mobile-nav-icon .line3 { -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 3px; transition: transform 0.3s; }
	.header .bottom-wrapper { padding: 0; }
	.header .header-nav { position: absolute; width: 100%; background: rgba(255,255,255,1); display: none; border-bottom:5px solid #4E98A5; padding-bottom:30px }
	.header .header-nav .nav-btn { padding: 0; margin-left: 0; width: 100%; text-align: left; display: block; }
	.header .header-nav .nav-btn:after { display: none; }
	.header .header-nav .nav-btn > a { height: auto; padding: 20px; }
	.header .header-nav .nav-btn > a.act { background: #4e98a5; color: #fff !important; }
	.header .header-nav .nav-btn .nav-list { position: relative; padding: 0; background: #eaefeb; display: block; max-height: 0; transition: all 0.3s linear; overflow: hidden; text-align: left; }
	.header .header-nav .nav-btn .nav-list.act { max-height: 9000px; }
	.header .header-nav .nav-btn .nav-list a { margin: 0 20px; padding: 15px 0; border-bottom: 1px solid #ddd; }
	.header .header-nav .nav-btn.act > a { color: #4e98a5; }
	.header .header-nav .nav-btn .nav-list .sub-nav-list { background: #fff; }
	.header .header-nav .nav-btn .nav-list .sub-nav-list > li { background: rgba(240,240,240,0.8); }
	.header .header-nav .nav-btn .nav-list .sub-nav-list > li .sub-sub-nav-list { background: #fff; padding-left: 10px; }
	
	.footer-wrapper > div { float: none; }
	.footer-nav a:last-child:after { display: none; }
	
	.leftNav { display: none; }
	.rightContent { width: 100%; float: none; border-left: none; }
	.rightContent .pageTitle { margin-left: 0; padding-left: 0; }
	.rightContent .breadcrumbs { position: relative; width: 100%; }
}

@media screen and (max-width: 767px) {
	.img-right { float: none; margin: 0 auto 20px; display: block; }
	
	.content-with-img > div  { display: block; vertical-align: top; }
	.content-with-img .imgDiv { width: 100%; text-align: center; }
	.content-with-img .imgDiv img { width: auto; }
	.content-with-img .contentDiv { width: 100%; padding: 10px 0 0; }

	.facilities .details { padding: 10px 0 }
	.facilities .details .imgWrapper { float: none; width: 100%; text-align: center; margin: 0; }
	.facilities .details .imgWrapper img { margin: 0 auto 30px; }
	
	.productDetail > div { float: none; margin-right: 0; }
	
	.reportWrapper { float: none; width: 100%; }
	
	.pdfLink > div { display: block; }
	.pdfLink .date { width: 100%; }
	
	.hScrollArea { width: 100%; position: relative; }
	.hScrollArea.rightScroll:after { content: ''; display: block; position: absolute; right: 0; top: 0; height: 100%; width: 20px; background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.3)); }
	.hScrollArea .hScroll { overflow: auto; width: 100%; }
	.hScrollArea table { min-width: 300px; margin-bottom: 50px; }
	.tableProducts, .tableDetails table tr td{font-size: 11px; }
	.tableProducts table tr td ,.tableDetails table tr td, .calendar .tableDetails table tr td { }
	/*.calendar .tableDetails table tr td{font-size: 11px; line-height: 18px; vertical-align:top}*/
	.calendar .event > div { display: block; }
	.calendar .event .date { width: 100%; }
	
	.finSumBox {  width:100%; float:none; padding:0;}	
	
	.esg .reportSelect { display: block; float: none; }
	.esg .reportBtn { margin: 10px 0; }
	
	.sitemap .pageContent .fleft{ width:100%;  margin-top:0}
	.sitemap .pageContent .fleft:nth-child(1){ margin-top:30px}
}

@media screen and (min-width: 1025px) {
	.header .mobile-search-btn { display: none !important; }
	.header .mobile-nav { display: none; }
	.header .header-nav { display: block !important; }
	.header .header-nav .nav-btn:hover > a, .header .header-nav .nav-btn > a.act { color: #007A8F; border-bottom: 2px solid #007A8F; }
	.header .header-nav .nav-btn:hover .nav-list { display: block; }
	.header .header-nav .nav-btn .nav-list { padding: 10px 10px 0; text-align: left; }
	.header .header-nav .nav-btn .nav-list.nav-ir { width: 180%; left: -40%; }
	.header .header-nav .nav-btn .nav-list ul li:not(:last-child) { border-bottom: 1px solid #efefef; }
	.header .header-nav .nav-btn .nav-list a { margin: 12px 10px; line-height: 20px; }
	.header .header-nav .nav-btn .nav-list a:hover { color: #007A8F; }
	.header .header-nav .nav-btn .nav-list .sub-nav-list { display: none; }
	
	.rightContent .breadcrumbs { top: calc(50% - 3px); transform: translateY(-50%); max-width: 50%; text-align: right; }
	
	.ir .rightContent { min-height: 800px; }
}