@charset "UTF-8";
/*
* @data 2016-1-8
* Author: Linda Lu
*
*/

html, body, div, span, p, ul, li, input, table, thead, tr, th, td, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0;}
body { line-height: 100%; font-size: 100%; font-weight: normal; font-family: "Microsoft JhengHei", "Arial"; color: #333; }
ul, li, .list-style-none { list-style: none; }
.filter-gray.fancyform { padding-bottom: 1px; }
.list-box { padding: 26.6666666667px; }

.list-action { width: 65%; margin-left: 15px; }
.list-action h3 { text-align: left; padding: 5px 0; margin: 0; }
.list-action h3.tac { text-align: center; }
.list-action li { display: block; width: 49%; }
.list-action li a { display: block;border: 1px solid #009d98; padding: 10px 0;}
@media screen and (max-width: 375px) {
	.list-box { padding: 25px 16px; }
	.list-action { width: 60%; }
	.list-action h3 { margin: 10px 0; }
	.list-action li { width: 48%; }
}

.list-msg li {
    padding: 16px 0;
    line-height: 24px;
    border-bottom: 1px solid #eeeeee;
}
.list-msg li:last-child {
	border-bottom: none;
}

.display-inlineBlock {
  display: inline-block;
}
/*-------- 共用寬度設定 ----------*/
.w100-h100 { width: 100px; height: 100px; }

/*-------- padding  ----------*/
.pb-5 { padding-bottom: 5px; }

/*-------- background ----------*/
.bg-green { background-color: #009d98; }
.bg-lighterGray { background-color: #eee; }
.border-lightGray { border: 1px solid #bababa; }
.border-bottom-lightGray { border-bottom: 1px solid #d4d5d5; }

/*-------- margin ----------*/
.mr-12 { margin-right: 12px; }
.mh-auto { margin-left: auto; margin-right: auto; }
/*-------- 共用字形設定 ----------*/
.f-white { color: #fff; }
.f-lightGray { color: #999; }
.f-lightSeaGreen { color: #26b8bb; }
.f-summerSkyBlue { color: #28a5e5; }
.f-lochmaraBlue { color: #216fa0; }


.f-style-normal { font-style: normal; }
.lineheight-26 { line-height: 26px !important; }
.lineheight-28 { line-height: 28px !important; }
.letterspacing-6 { letter-spacing: 0.06em; }
.word-break { overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }	

/*-------- text-align ----------*/
.taj { text-align: justify; }

/*-------- 其他共用class ----------*/
.circle { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; }
.borderRadius-4 { border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }

.icon-triangle:before { content: ''; display: inline-block; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; margin-right: 8px; }
.icon-triangle.upWards:before { border-bottom: 12px solid #ed1164; }
.icon-triangle.downWards:before { border-top: 12px solid #009900; }
.upWards { color: #ed1164; }
.downWards { color: #009900; }

.pos-relative { position: relative; }
.pos-absolute { position: absolute; }
.pos-bottom-0 { bottom: 0; }
.breakDesktop { display: block; }
@media screen and (max-width: 532px) {
	.breakDesktop { display: none; }
	.w532-display-block { display: block; } /*表格標題斷行用*/
}
@media screen and (max-width: 414px) {
	.w414-display-block { display: block; } /*fhc斷行用*/
}

/*-------- icons ----------*/
.icon-ir-esunlogo, .icon-ir-coin, .icon-ir-shareholder, .icon-ir-investor { display: inline-block; width: 47px; height: 47px; background-size: 47px; background-repeat: no-repeat; vertical-align: bottom; background-image: url(/holding/images/esunfhc_m/icon-ir-index.png); }
.icon-ir-esunlogo { background-position: 0 0; }
.icon-ir-coin { background-position: 0 -47px; position: relative; top: 5px; }
.icon-ir-shareholder { background-position: 0 -94px; }
.icon-ir-investor { background-position: 0 -141px; position: relative; top: 5px; }

/*-------- 表單類共用設定 ----------*/
.btn-white-line { padding: 10px 0; border: 1px solid #fff; position: relative; }

@media screen and (max-width: 320px) {
	/*table.f-16 { font-size: 14px; letter-spacing: 0.01em; }*/
}	

/*=====================================================
   Index
=====================================================*/
.page-index .gradient-content.pb-0 { padding-bottom: 0; }
.page-index .gradient-content.fhc { background: #24abed; }
.page-index .gradient-content.fhc h2 { padding-top: 60px; }
.page-index .gradient-content.fhc div { margin-bottom: 30px; }

/*-------- 關於玉山金控 ----------*/
.f-faceGreen { color: #39b54a; }
.f-faceOrange { color: #e99825; }
.f-faceBlue { color: #1d76bc; }
.f-faceBrown { color: #c49b6c; }
.page-index .gradient-content.sky { background: url("/holding/images/esunfhc_m/index/banner_1200x300_sky.jpg") #fbfbf6 no-repeat top left; background-size: 100% auto; }
.csrList li { position: relative; margin-top: 15px; margin-bottom: 45px; }
.csrList li .highlight { width: 95%; max-width: 300px; padding: 5px 0 35px 0; margin: auto; }
.csrList li .highlight .num { font-size: 43px; font-style: normal; }
.csrList li .face { position: absolute; bottom: 0; left: 50%; width: 90px; margin-bottom: -40px; margin-left: -45px; background-color: #fbfbf6; }
.csrList li.part-1 .highlight { border: 2px solid #39b54a; }
.csrList li.part-2 .highlight { border: 2px solid #e99825; }
.csrList li.part-3 .highlight { border: 2px solid #1d76bc; }
.csrList li.part-4 .highlight { border: 2px solid #c49b6c; }
@media screen and (max-width: 360px) {
	.csrList li { width: 100%; }
	.csrList li .highlight { width: 90%; margin: auto; }
}

/*-------- 榮耀與肯定 ----------*/
.page-index .gradient-content.award { background: url("/holding/images/esunfhc_m/index/bg_award.jpg") no-repeat top center; background-size: 100% 100%; }
.page-index .gradient-content.award a.f-white { color: #fff; }
.awardList li.border-bottom-white { border-bottom: 1px solid #fff; padding-bottom: 10px; margin-bottom: 15px; }
.awardList div { display: inline-block; vertical-align: middle; }
.awardList div.txt { width: 65%; color: #1f3c5b; margin-left: 8px; }
@media screen and (min-width: 768px) {
	.awardList div.txt { width: 80%; }
}
@media screen and (max-width: 360px) {
	.awardList div.txt { width: 60%; }
}
/*-------- 關於金控/與銀行的差異只有圖片 ----------*/

.page-index .gradient-content { background: url("/holding/images/esunfhc_m/bg-index-content.png") repeat-x top left; background-size: 100% 62px; padding-bottom: 35px; }
.page-index .gradient-content.bg-green { background: #009d98; }
.page-index .gradient-content h2 { text-align: center; padding: 20px 0; margin: 0; }
.page-index .gradient-content.bg-green h2 a { color: #fff; }
.page-index .online-service li { float: left; width: 33.33%; text-align: center; }
.page-index .online-service li a { display: block; width: 95px; height: 117px; color: #fff; margin: 10px auto; border: 1px solid #fff; }
.page-index .online-service li a i { display: block; margin: 18px auto 12px; }
.page-index .online-service li a img { display: block; margin: 18px auto 12px;width:47px;height:47px; }

/*-------- 玉山事業群/與銀行的差異只有space ----------*/
.page-index .gradient-content.bg-lighterGray { background: #eee; }
.page-index .login-content li { margin-bottom: 20px; }

/*=====================================================
   Header & Menu
=====================================================*/
.patternHeader { position: fixed; z-index: 999; top: 0; right: 0; left: 0; opacity: .95; background: #009d98; text-align: center; }
.patternHeader .menuIcon { position: absolute; display: inline-block; height: 53px; top: 10px; left: 15px; text-align: center; }
.patternHeader .menuIcon img { vertical-align: middle; }
.patternHeader a { display: inline-block; width: 100%; color: #fff; padding: 15px; }
.patternHeader a:before { display: inline-block; content: url(/holding/images/esunfhc_m/patterns/icon-esun.png); margin-right: 7px; }
#menu a { display: block; width: 95%; line-height: 20px; text-decoration: none; }
#menu > li { list-style: none;  padding: 10px 0; cursor: pointer; }
.show .contentArea, .menuArea { display: none; }
.show .menuArea { display: block; }