﻿@charset "utf-8";
/* CSS Document */
#Wrap { padding-top:60px; }

/*----------------------------------------------------------------------*/
/* Header */
#Header { padding:0 10px 0 70px; position:fixed; }
#Header > div { height:60px; }

/* 關係企業 */
#Header div.conglomerate { display:none; }

/* logo */
#Header .logo h1 { margin:0 auto; }
#Header .logo a { width:180px; }
#Header .logo span { display:none; }

/* top_links */
.top_links { display:none; }


/*----------------------------------------------------------------------*/
/* Menu */
#Menu { display:none; }


/*----------------------------------------------------------------------*/
/* Center */


/*----------------------------------------------------------------------*/
/* Footer */
#Footer { display:none; }

#Copyright::before, #Copyright::after { content:''; display:block; position:absolute; }
#Copyright::before {
    top: 0;
    right: 0;
    border-left: 100vw solid #0467ff;
    border-bottom: 56px solid transparent;
    z-index: 2;
}
#Copyright::after { 
	top:0; left:0; border-right:100vw solid #def756; border-bottom:56px solid transparent; z-index:1; 
	}
#Copyright { padding-top:60px; font-size:12px; overflow:hidden; }
#Copyright .copyright, #Copyright .slogan { line-height:20px; }
#Copyright .btn_grandtech { position:absolute; top:20px; left:10px; }
@media screen and (max-width: 499px) {
#Copyright .copyright, #Copyright .slogan { padding-right:50px; }
#Copyright .slogan { padding-top:50px; }
}
@media screen and (min-width: 500px) {
#Copyright .copyright, #Copyright .slogan { margin-left:155px; }
#Copyright .copyright { padding-right:50px; }
}


/*----------------------------------------------------------------------*/
/* KeyVisual */
#KeyVisual .bx-wrapper .bx-pager { display:none; }
#KeyVisual .bx-wrapper .bx-controls-direction a { width:40px; height:40px; margin-top:-20px; }
#KeyVisual .bx-wrapper .bx-controls-direction a::after { width:12px; height:12px; margin-top:-6px; }
#KeyVisual .bx-wrapper .bx-controls-direction .bx-prev { left:5px; }
#KeyVisual .bx-wrapper .bx-controls-direction .bx-next { right:5px; }
#KeyVisual .bx-wrapper .bx-controls-direction .bx-prev::after { left:16px; }
#KeyVisual .bx-wrapper .bx-controls-direction .bx-next::after { right:16px; }
@media screen and (orientation: portrait) {
#KeyVisual .bx-wrapper { padding-bottom:120%; }
}

/*.down_arrow a { 
	margin-left:-24px; border-top:34px solid #fff; border-left:24px solid transparent; border-right:24px solid transparent; 
	}*/


/*----------------------------------------------------------------------*/
/* 首頁區塊 */
.block_title h2 { font-size:22px; letter-spacing:0; }

/* 活動訊息 */
.IndexEvent .block_title::before { display:none; }
.IndexEvent .block_title h2 { font-size:40px; }

.index_event_list .item { max-width:360px; padding:10px 5px; }
.index_event_list .item .cont { margin:-50px 15px 0; padding:30px 0 9px; overflow:hidden; }
.index_event_list .item .cont::before { top:36px; left:10px; width:40px; height:40px; }
.index_event_list .item .title  { padding:15px 15px 15px 25px; font-size:16px; font-weight:bold; }
.index_event_list .item .title::after { content:''; display:block; position:absolute; top:-20px; right:0; border-bottom:20px solid #; border-right:360px solid transparent; }
.index_event_list .item .desc { background-color:#; padding:0 15px 20px; }
.index_event_list .owl-carousel .owl-nav .owl-prev, .index_event_list .owl-carousel .owl-nav .owl-next { 
	width:40px; height:40px; margin-top:-20px; 
	}
	.index_event_list .owl-carousel .owl-nav .owl-prev { left:-36px; }
	.index_event_list .owl-carousel .owl-nav .owl-next { right:-36px; }
.index_event_list .owl-carousel .owl-nav .owl-prev::after, .index_event_list .owl-carousel .owl-nav .owl-next::after { 
	margin-top:-6px; width:12px; height:12px;
	}
	.index_event_list .owl-carousel .owl-nav .owl-prev::after { margin-left:-4px; }
	.index_event_list .owl-carousel .owl-nav .owl-next::after { margin-right:-4px; }
@media screen and (orientation: portrait) {
    .IndexEvent > div {
        padding-top: 5vh;
        background-image: url(/files/atts/0J079318659441130373/layout/images/index_event_bg.png);
        background-repeat: repeat;
        background-attachment: fixed;
        background-size: 80%;
    }
.index_event_list { padding-top:2vh; }
.index_event_list > div { padding-bottom:3vh; }
}
@media screen and (orientation: landscape) {
.IndexEvent > div { padding-top:15vh; }
.index_event_list { padding-top:6vh; }
.index_event_list > div { padding-bottom:10vh; }
}

/* 企業新聞 */
.IndexNews > div { padding-top:80px; padding-bottom:80px; }
.IndexNews::before, .IndexNews::after { border-bottom-width:56px; }
.IndexNews > div::before, .IndexNews > div::after { border-top-width:56px; }

.IndexNews .block_title::before { bottom:-20px; }
.IndexNews .block_title h2 { padding-left:10px; font-size:40px; }
.IndexNews .block_title h2 span { padding-left:11.5em; }

.index_news_list li { margin:24px 0; }
.index_news_list .date { top:10px; left:15px; font-size:14px; }
.index_news_list .title a { padding:40px 15px 10px; font-size:16px; }

.IndexNews .btn_more { padding-top:0; }

/* 事業群 */
@media screen and (orientation: portrait) {
.IndexConglomerate { padding-top:4vh; padding-bottom:6vh; }
}
@media screen and (orientation: landscape) {
.IndexConglomerate { padding-top:9.375vh; padding-bottom:8.4vh; }
}

.IndexConglomerate .block_title h2 { font-size:36px; }
.IndexConglomerate .block_title h2 span { font-size:14px; }

.index_conglomerate_block { padding-bottom:40px; }

.index_conglomerate_block {
    border-left: 10px solid #;
    border-right: 10px solid #;
    padding: 30px 10px 40px 20px;
}
.IndexConglomerate .index_conglomerate_block:nth-child(even) {
    border-top: 15px solid #;
    border-bottom: 15px solid #;
}
.index_conglomerate_block .img { max-width:360px; margin-left:auto; margin-right:auto; padding-right:10px; }
.index_conglomerate_block .img::before { display:none; }
.index_conglomerate_block .cont { margin-top:10px; }
.index_conglomerate_block .cont::before { display:none; }
.index_conglomerate_block .cont::after { top:10px; left:-10px; }
.index_conglomerate_block .cont > div { padding:20px 20px 20px 20px; }
.index_conglomerate_block .cont > div::after { display:none; }
.index_conglomerate_block .desc { font-size:16px; }

/* block1 */
.IndexConglomerate .index_conglomerate_block:nth-child(1) { padding-top:60px; }
.IndexConglomerate .index_conglomerate_block:nth-child(1)::before { left:-20px; border-left:60px solid #; border-bottom:60px solid transparent; }

/* block2 */

/* block3 */
	
/* block4 */
.IndexConglomerate .index_conglomerate_block:nth-child(4)::before { right:-20px; bottom:-25px; border-right:60px solid #; border-top:60px solid transparent; }


	/* 動畫效果 */
	.IndexConglomerate .index_conglomerate_block .img {
		transform:scale(1.2); transform-origin:center center;
		}
	.IndexConglomerate .index_conglomerate_block .block_title,
	.IndexConglomerate .index_conglomerate_block .desc {
		transform:translateY(-50px);
		}
	.IndexConglomerate .index_conglomerate_block .img.active {
		transform:scale(1);
		}
	.IndexConglomerate .index_conglomerate_block .cont.active .block_title,
	.IndexConglomerate .index_conglomerate_block .cont.active .desc {
		transform:translateY(0); 
		}
		
	.IndexConglomerate .index_conglomerate_block .btn_more { transform:translateX(80px); }
	.IndexConglomerate .index_conglomerate_block .btn_more.active { transform:translateX(0);}
	@media screen and (orientation: landscape) {
	.IndexConglomerate .index_conglomerate_block .block_title,
	.IndexConglomerate .index_conglomerate_block .desc {
		-webkit-transition:transform 0.5s ease, opacity 0.5s ease;
		-moz-transition:transform 0.5s ease, opacity 0.5s ease;
		transition:transform 0.5s ease, opacity 0.5s ease;
		}
	}


/*----------------------------------------------------------------------*/
/* 表單 */
.FormGroup, .FromSubGroup { padding:20px 10px 10px; }
.FormGroup .FormTable, FromSubGroup .FormTable { margin-left:-10px; margin-right:-10px; width:auto; }

table.FormTable { border-top:1px solid #e7e7e7; }
table.FormTable , table.FormTable > tbody, table.FormTable > tbody > tr, table.FormTable > tbody > tr > th, table.FormTable > tbody > tr > td { display:block; }
table.FormTable > tbody > tr { padding:10px 10px 4px 10px; border-bottom:1px solid #d4d0cd; }
table.FormTable > tbody > tr > th, .FormTable > tbody > tr > td { border-bottom:0; }
table.FormTable > tbody > tr > th { text-align:left; }

.FormElmt input[type="file"] { width:100%; }


/*----------------------------------------------------------------------*/
/* 內頁 */
#Center::before { width:90px; height:111px; }
#Center::after { width:110px; height:70px; }
#Content { padding-left:10px; padding-right:10px; }


/*----------------------------------------------------------------------*/
/* 內頁元素 */
/* 導覽列(麵包屑) */
#Breadcrumbs { margin-bottom:15px; }

/* 工具列 */
.ToolBar .colm_left a, .ToolBar dl.font_size, .ToolBar dl.share { line-height:40px; }
.ToolBar .colm_left a span, .ToolBar .colm_left a, .ToolBar dl.font_size a, .ToolBar dl.share a { width:40px; height:40px; }
.ToolBar .colm_left, .ToolBar dl.font_size dt, .ToolBar dl.share dt { display:none; }
@media screen and (max-width: 400px) {
.ToolBar dl.font_size + dl.share { float:none; clear:left; margin-left:0; }
}

/* 標題 */
.PageTitle { padding-top:10px; }
h3.title { font-size:1.5rem; }

/* 列表搜尋 */
.ListSearch { margin-top:30px; }
.ListSearch > div { 
	padding:15px 0 5px 0; border-right:0; border-left:0; 
	}
.ListSearch > div::before { 
	top:2px; right:8px; width:12px; height:6px; 
	-webkit-transform: rotate(90deg) skewY(30deg);
	-moz-transform: rotate(90deg) skewY(30deg);
	transform: rotate(90deg) skewY(30deg);
	}
.ListSearch .item { font-size:0.875rem; }
.ListSearch .title { 
	position:absolute; top:-30px; left:0; background-color:#ac8d5e; padding:0 10px; line-height:30px; color:#fff; font-size:0.875rem; 
	-webkit-border-radius:10px 10px 0 0;
	-moz-border-radius:10px 10px 0 0;
	border-radius:10px 10px 0 0;
	}
.ListSearch .BtnCommon input { padding-left:20px; padding-right:20px; font-size:0.875rem; }

/* 頁碼 */
#Pagination a { 
	background-color:#eeeeee; display:none; margin:0 3px; line-height:40px; font-size:0.8125rem; 
	}
#Pagination a:hover { background-color:#ff6699; color:#fff; }
#Pagination a.first, #Pagination a.prev, #Pagination a.next, #Pagination a.last { display:inline-block; padding:0 10px; }
#Pagination .setting { padding-top:10px; line-height:24px; }
#Pagination .dev-script-oper { display:none; }

/* 內頁顯示欄位 */
.content_info li { padding:5px 0; }
.content_info li span { display:block; }

/* 編輯器 */
.editable_content, .editable_content p, .editable_content li, .editable_content div, .editable_content blockquote { line-height:180%; }
.editable_content div, .editable_content table, .editable_content iframe { 
	margin-top:30px; margin-bottom:30px; 
	}
.editable_content p, .editable_content ul, .editable_content ol { 
	margin-top:20px; margin-bottom:20px; 
	}
.editable_content { font-size:1rem; }
.editable_content blockquote { padding:20px 30px; margin-left:0; margin-right:0; }
	.editable_content blockquote::before, .editable_content blockquote::after { font-size:48px; }
	.editable_content blockquote::before { content:'“'; left:8px; top:19px; }
	.editable_content blockquote::after { content:'”'; right:8px; bottom:-7px; }
.editable_content .district .imgleft, .editable_content .district .imgright { 
	float:none; clear:both; max-width:100%; text-align:center; margin-bottom:20px; margin-left:auto; margin-right:auto; 
	}
.editable_content ul.ext_list { margin-left:0; }
.MsgModule_Download + .MsgModule_Download, .MsgModule_Download + .MsgModule_Link, .MsgModule_Link + .MsgModule_Download, .MsgModule_Link + .MsgModule_Link { 
	margin-top:-20px; 
	}

/* colorbox */
#colorbox_thum a { width:120px; height:90px; margin:5px; }

/* 延伸閱讀 */
.related_articles .list { margin-left:20px; }
.related_articles .list li { padding:8px 0; font-size:1rem; }


/*----------------------------------------------------------------------*/
/* 文字列表 */
.ListTable table, .ListTable table tbody, .ListTable table tr, .ListTable table th, .ListTable table td { display:block; }
.ListTable { margin-top:60px; margin-bottom:60px; border-top:1px solid #dddddd; }
.ListTable table tr:first-child { position:absolute; left:-10000px; top:-10000px; }
.ListTable table tr { padding:15px 10px; border-bottom:1px solid #dddddd; }
.ListTable table tr:nth-child(even) { background-color:#fff; }

.ListTable table td { margin:5px 0; text-align:left; }
.ListTable table td.no { display:none; }
.ListTable table td:before { font-weight:bold; content: attr(data-th)"："; }
.ListTable table td.no:before, .ListTable table td:first-child.date:before, .ListTable table td.title:before { 
	content:""; 
	}
.ListTable table td.date { display:inline-block; font-weight:bold; font-size:0.875rem; position:relative; }
.ListTable table td.date::before { 
	content:''; display:block; position:absolute; top:14px; left:10px; width:80px; height:14px; background:url("../images/pattern1.png") repeat-x 0 0; 
	}
.ListTable table td.date br { display:none; }
.ListTable table td.title { padding-left:30px; line-height:180%; position:relative; }
.ListTable table td.title a::after { 
	content:''; display:block; position:absolute; top:9px; left:5px; 
	border-left:12px solid #5ad4d5; border-bottom:5px solid transparent; border-top:5px solid transparent; 
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}
.ListTable table td.title a:hover::after, .ListTable table td.title a:focus::after { left:10px; }


/*----------------------------------------------------------------------*/
/* 圖文列表 */
/* 639px~480px時 一律以圖上文下雙欄顯示,479以下時，一律以圖上文下單欄顯示 */
.ListPicText > div { margin-left:-10px; margin-right:-10px; }
.ListPicText .item { padding-left:10px; padding-right:10px; margin-bottom:20px; }
.ListPicText .item > div { padding-bottom:56px; }/* 預留按鈕的高度 */

.ListPicText .img { float:none; overflow:hidden; }
.ListPicText .cont { padding:10px; }
.ListPicText .date, .ListPicText .title a { padding-left:10px; }
.ListPicText .title { font-size:1.125rem; }
.ListPicText .date { font-size:0.8125rem; }
.ListPicText .desc { font-size:0.875rem; }
.ListPicText .btn { position:absolute; width:100%; bottom:20px; left:0; padding-left:15px; padding-right:15px; }

@media screen and (max-width: 540px) {
.ListPicText .item { width:100%; max-width:360px; margin-left:auto; margin-right:auto; }
}
@media screen and (min-width: 539px) {
.ListPicText .item { float:left; width:50%; }
}


/*----------------------------------------------------------------------*/
/* 商品列表 */
@media screen and (max-width: 439px) {
.ProductCat li { width:48%; margin-right:4%; padding-bottom:21.35%; }
	.ProductCat li:nth-child(2n+2) { margin-right:0; }
}
@media screen and (min-width: 440px) {
.ProductCat li { width:32%; margin-right:2%; padding-bottom:21.35%; }
	.ProductCat li:nth-child(3n+3) { margin-right:0; }
}

@media screen and (max-width: 479px) {
.ProductList .item { float:none; width:100%; max-width:360px; margin-left:auto; margin-right:auto; }
}
@media screen and (min-width: 480px) {
.ProductList .item { width:48.5%; margin-right:3%; }
.ProductList .item:nth-child(2n+2) { margin-right:0; }
}


/*----------------------------------------------------------------------*/
/* 經營團隊 */
.TeamList .item { padding-bottom:20px; }
.TeamList .nameplate .title { font-size:1rem; }
.TeamList .nameplate .name { font-size:1.5rem; }
.TeamList .info_list dd { font-size:0.875rem; }
@media screen and (max-width: 499px) {
.TeamList .item { max-width:320px; margin-left:auto; margin-right:auto; }
.TeamList .cont { padding:0 10px; }
.TeamList .info_list dl { margin-left:10px; margin-top:38px; }
.TeamList .info_list dt { left:-10px; top:-25px; }
}
@media screen and (min-width: 500px) {
.TeamList { }
.TeamList .item { float:left; width:50%; padding-left:2.5%; padding-right:2.5%; }
.TeamList .cont { padding:0 10px; }
.TeamList .info_list dl { margin-left:10px; margin-top:38px; }
.TeamList .info_list dt { left:-10px; top:-25px; }
}

/* popup box */
.team_box .box_wrap { width:96vw; height:96vh; margin:-48vh 0 0 -48vw; }
.team_box .box_wrap > div { padding:20px 20px 10px 20px; }
.team_box .brief .nameplate { padding:10px; margin-top:10px; text-align:center; }
.team_box .brief .nameplate .title { font-size:1rem; }
.team_box .brief .nameplate .name { font-size:1.375rem; }
@media screen and (max-width: 539px) {
.team_box .brief .colm_left { float:none; padding:20px; max-width:240px; margin-left:auto; margin-right:auto; }
.team_box .brief .colm_right { float:none; margin-top:20px; }
}
@media screen and (min-width: 540px) {
.team_box .brief .colm_left { width:42%; padding:10px; }
.team_box .brief .colm_right { width:54%; }
}


/*----------------------------------------------------------------------*/
/* 投資人專區 */
/* 首頁 */
.ContentIRKeyVisual .bx-wrapper .bx-pager { display:none; }
.ContentIRKeyVisual .bx-wrapper .bx-controls-direction a { width:30px; height:60px; margin-top:-30px; }
.ContentIRKeyVisual .bx-wrapper .bx-controls-direction a::after { width:12px; height:12px; margin-top:-6px; }
.ContentIRKeyVisual .bx-wrapper .bx-controls-direction .bx-prev::after { left:10px; }
.ContentIRKeyVisual .bx-wrapper .bx-controls-direction .bx-next::after { right:10px; }
@media screen and (orientation: portrait) {
.ContentIRKeyVisual .bx-wrapper { padding-bottom:120%; }
}

.ir_index_btns { margin-left:-5px; margin-right:-5px; }
.ir_index_btns .item {  padding:5px; }
.ir_index_btns .item > div { padding-bottom:100%; }
@media screen and (max-width: 479px) {
.ir_index_btns .item { width:50%; }
}
@media screen and (min-width: 480px) {
.ir_index_btns .item { width:33.3333%; }
.ir_index_btns .item4 { float:right; }
}
	
.ir_index_btns .item a { font-size:1.125rem; }

/* 投資人專區內頁 */
#ContentIR_Left { display:none; }

.ir_list_table table, .ir_list_table tbody, .ir_list_table tr, .ir_list_table th, .ir_list_table td { display:block; }
.ir_list_table { border-top:1px solid #e3e4e5; }
.ir_list_table tr:first-child { position:absolute; left:-10000px; top:-10000px; }
.ir_list_table tr { padding:10px 15px 5px 15px; border-bottom:1px solid #e3e4e5; }
.ir_list_table table tr:nth-child(even) { background-color:#ffffff; }
.ir_list_table table tr:nth-child(odd) { background-color:#f9f9f9; }
.ir_list_table table tr.total { background-color:#5ad4d5; color:#fff; font-weight:bold; }
.ir_list_table td { margin:5px 0; text-align:left; }
.ir_list_table td:before { font-weight:bold; content: attr(data-th)"："; }
.ir_list_table td.revenue_report_month { font-size:1.25rem; }
.ir_list_table td.revenue_report_month:before { display:none; }

/* 公司年報 */
.AnnualReport .img { float:none; width:100%; max-width:120px; margin-left:auto; margin-right:auto; margin-bottom:10px; }
.AnnualReport .cont { padding-left:0; text-align:center; }
.AnnualReport .title { padding-top:0; }
@media screen and (max-width: 479px) {
.AnnualReport .item { width:48%; margin-right:4%; margin-bottom:50px; }
.AnnualReport .item:nth-child(2n+2) { margin-right:0; }
}
@media screen and (min-width: 480px) {
.AnnualReport .item { width:32%; margin-right:2%; margin-bottom:50px; }
.AnnualReport .item:nth-child(3n+3) { margin-right:0; }
}

/* 財務報告 */
.dividend_info, .dividend_info caption, .dividend_info tbody, .dividend_info tr, .dividend_info th, .dividend_info td { display:block; }
.dividend_info tr { padding:15px 10px; margin-bottom:10px; background-color:#e8eef1; }
.dividend_info tr:nth-child(even) { background-color:#c9e1ea; }
.dividend_info th { text-align:left; }
.dividend_info th::after { content:'：'; }


/*----------------------------------------------------------------------*/
/* 活動報名 */
.EventList .btn { width:100%; text-align:center; }
.EventList.active .item { padding-left:0; padding-right:0; }
@media screen and (max-width: 479px) {
.EventList .item { float:none; max-width:360px; margin-left:auto; margin-right:auto; margin-bottom:30px; }
.EventList .date { font-size:0.875rem; }
.EventList .desc { font-size:0.875rem; }
}
@media screen and (min-width: 480px) {
.EventList .item { width:48%; margin-right:4%; margin-bottom:30px; }
	.EventList .item:nth-child(2n+2) { margin-right:0; }
.EventList .date { font-size:0.875rem; }
.EventList .desc { font-size:0.875rem; }
}

.EventList.active .desc { font-size:1rem; }