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

/*----------------------------------------------------------------------*/
/* KeyVisual */
#KeyVisual { clear:both; width:100%; margin:auto; z-index:9998; position:relative;}
#KeyVisual > div{ position:relative; z-index:998; overflow:hidden; }

#KeyVisual .bx-viewport { z-index:9998; position:relative; zoom:1; }
#KeyVisual .bx-wrapper { position: relative; margin: auto; padding:0; *zoom:1; }
#KeyVisual .bx-wrapper img { width:100%; }
	/* 修改Key visual圖片載入時Slider高度過高問題 */
	#KeyVisual .bxSlider_list { position:relative; }
	/* 不顯示子項目 */
	ul.bxSlider_list li { float:left; list-style:none; position:relative; display:none; }
	/* 顯示第一筆項目 */  
	ul.bxSlider_list li:first-child { display:block; }
	/* 當JS執行時顯示全部 */
	div.bx-viewport ul.bxSlider_list li { display:block; }
#KeyVisual .bxSlider_list li { width:100%; }
#KeyVisual .bxSlider_list li img { width:100%; height:auto; }
#KeyVisual .bxSlider_list li a { display:block; width:100%; }


/* DIRECTION CONTROLS (NEXT / PREV) */
#KeyVisual .bx-wrapper .bx-controls-direction a { 
	display: inline-block; position:absolute; top:50%; text-indent:10000px; z-index:9999; background-color:rgba(255,255,255,0.4); background-repeat:no-repeat;
	transition:all 0.25s ease-out;
}
#KeyVisual .bx-wrapper .bx-controls-direction a:hover { 
	background-color:rgba(255,255,255,0.6);
	-webkit-box-shadow:0 0 10px rgba(0,0,0,0.15);
	-moz-box-shadow:0 0 10px rgba(0,0,0,0.15);
	box-shadow:0 0 10px rgba(0,0,0,0.15);
	}
#KeyVisual .bx-wrapper .bx-prev { background-image:url("../images/icon_slider.png"); }
#KeyVisual .bx-wrapper .bx-next { background-image:url("../images/icon_slider.png"); }
#KeyVisual .bx-wrapper .bx-controls-direction a.disabled { display: none; }

/* PAGER */
#KeyVisual .bx-wrapper .bx-pager { position:absolute; bottom:15px; width:100%; z-index:9998; text-align:center; }
#KeyVisual .bx-wrapper .bx-pager .bx-pager-item,
#KeyVisual .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block;}
#KeyVisual .bx-wrapper .bx-pager.bx-default-pager a { 
	text-indent:-10000px; display:block; width:30px; height:6px; margin:0 5px; background:#fff; text-align:left; box-shadow:0 0 10px rgba(0,0,0,0.15);  border:1px solid #ccc;
}
#KeyVisual .bx-wrapper .bx-pager.bx-default-pager a:hover,
#KeyVisual .bx-wrapper .bx-pager.bx-default-pager a.active { background:#444; width:30px; height:6px; border:1px solid #444;}


/*----------------------------------------------------------------------*/
/*共用區塊*/
.IndexBlock > div{ max-width:1200px; margin:auto; position:relative; overflow:hidden; }
.IndexBlock > div::after{     
	content: '';
    position: absolute;
    left: 5.5rem;
    top: 0;
    bottom: 0;
    border-right: 1px solid #c0c0c0;
}
.IndexBlock .space-box{ padding-left:14rem; overflow:hidden;}


/*首頁標題*/
.indexTitle{ position:absolute; top:0; left:0; z-index:999; background:#fff; padding-left: 2.6rem; padding-top: .5rem; overflow:hidden;}
.indexTitle h3{ font-size:137.5%; font-weight:400; letter-spacing:.06em; margin-bottom:30px; color:#444;}
.indexTitle span{ display:block; position: absolute; left: 5.5rem; bottom: 0; margin-left:-4px; z-index:999; width:12px; height:20px; }
.indexTitle span::before{ display:block; content:''; width:8px; height:8px; background-color:#c40d1a; border-radius:50%; }


/*----------------------------------------------------------------------*/
/* IndexCenter */
#IndexCenter{ position:relative;}


/*----------------------------------------------------------------------*/
/*指標簡介*/
.IndexAbout{ margin-top:35px;}
.IndexAbout .indexTitle{ width: 100%; max-width:360px;  background-color:#f5f5f5; padding-top:4rem; padding-left:1.8rem;}
.IndexAbout .indexTitle h3{ font-size:125%; padding: 0px 15px;}
.IndexAbout > div{
	background-color:#f5f5f5;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius:10px;
	background-image: -webkit-linear-gradient(270deg,rgba(245,245,245,1.00) 0%,rgba(245,245,245,1.00) 80.84%,rgba(239,239,239,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(245,245,245,1.00) 0%,rgba(245,245,245,1.00) 80.84%,rgba(239,239,239,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(245,245,245,1.00) 0%,rgba(245,245,245,1.00) 80.84%,rgba(239,239,239,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(245,245,245,1.00) 0%,rgba(245,245,245,1.00) 80.84%,rgba(239,239,239,1.00) 100%);
}

.IndexAbout .space-box > div{ float:left;}
.IndexAbout .three-point{ overflow:hidden; padding-left:11rem; display:inline-block; margin-right:2.5rem;}
.IndexAbout .three-point ul li{ float:left; position:relative; padding:0 2rem;}
.IndexAbout .three-point ul li div{float:left;}
.IndexAbout .three-point ul li::after{ content:''; display:block; width:1px; height:70px; background-color:#ddd; position:absolute; top:0; right:0;}
.IndexAbout .three-point ul li:last-child::after{ display:none;}
.IndexAbout .three-point li .img{ width:70px; height:70px; border-radius:50%; border:1px solid #000; text-align:center; }
.IndexAbout .three-point li .img img{ border-radius:50%; width:100%; height:auto;}
	.three-point li.blue .img{ border-color:#4d82b3;}
	.three-point li.yellow .img{ border-color:#d79f19;}
	.three-point li.green .img{ border-color:#3da171;}
	
.IndexAbout .three-point li .pointTT { text-align:center; height:70px; display:table;}
	.three-point li .pointTT h4{ font-weight:normal; font-size:112.5%; width:50px; line-height:125%; display:table-cell;  vertical-align:middle;}
	.three-point li.blue h4{color:#4d82b3;}
	.three-point li.yellow h4{color:#d79f19;}
	.three-point li.green h4{color:#3da171;}
	
.IndexAbout .btn{ padding-top:1.2rem; padding-right:1rem;}



/*----------------------------------------------------------------------*/
/*王道指標(世界地圖)*/
.IndexGlobal > div, .IndexGlobal .space-box{ overflow:visible;}


/*----------------------------------------------------------------------*/
/*指標團隊*/
.IndexTeam{background:url(../images/img_ink1.png) no-repeat right center; background-color:#f5f5f5; background-attachment:fixed; position:relative;}
.IndexTeam::after{
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,0.00) 31.09%,rgba(0,0,0,0.03) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,255,255,0.00) 31.09%,rgba(0,0,0,0.03) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,255,255,0.00) 31.09%,rgba(0,0,0,0.03) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,0.00) 31.09%,rgba(0,0,0,0.03) 100%);
}

.IndexTeam .indexTitle{  background-color:#f5f5f5; }
.IndexTeam .space-box{ padding-top:10px; padding-bottom:10px; padding-right:10px;}
.IndexTeam .teamBox{ background-color:#fff; border-radius:10px; padding:10px; width:90%; max-width:90%; height:215px; display:table; 
	box-shadow: 0 0 10px rgba(0,0,0,0.15); margin-bottom:20px;}
.IndexTeam .teamBox::after{ content:''; display:block; clear:both;}
.IndexTeam .teamBox > div{ width:100%; height:100%; display:table-cell; vertical-align:middle; padding:0 3rem; position:relative;}
.IndexTeam .teamBox > div::before{ content:''; display:block; position:absolute; top:10px; left:10px; background-image:url(../images/img1.svg); width:22px; height:22px;}
.IndexTeam .teamBox > div::after{ content:''; display:block; position:absolute; bottom:10px; right:10px; background-image:url(../images/img2.svg); width:22px; height:22px;}
.IndexTeam .teamBox > div > div{ float:left;}
.teamBox .img{ width:20%;height:140px; border-radius:50%;} 
.teamBox .img img{ width:140px; height:auto; border-radius:50%;}
.teamBox .cont .name-title{ padding-left:1.5rem; position:relative;}
.teamBox .cont{ color:#777; font-style:italic; width:80%; padding-left:2rem; padding-top:1rem;} 
.teamBox .cont .name-title h4{ display:inline-block; color:#363636; font-size:125%; font-weight: 500; margin-bottom:20px; letter-spacing:1px; padding-right:10px; position:relative;} 
.teamBox .cont .name-title h4::before{ content:''; display:block; width:15px; height:2px; background-color:#c40d1a; position:absolute; top:15px; left:-20px;}
.teamBox .cont .name-title .other-title{ font-size:93.8%; color:#7d7d7d7; font-weight:700;} 
.teamBox .cont .name-title .other-title::before{ content:'/'; color:#cccccc; font-size:100%; padding-right:5px; font-style:normal; font-weight:400;}
.teamBox .cont .desc{ 
	letter-spacing:1px;
	line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 48px; 
}


/*----------------------------------------------------------------------*/
/*媒體關注*/
.IndexMedia{ position:relative;}
.IndexMedia::after{
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,0.00) 31.09%,rgba(0,0,0,0.05) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,255,255,0.00) 31.09%,rgba(0,0,0,0.05) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,255,255,0.00) 31.09%,rgba(0,0,0,0.05) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,0.00) 31.09%,rgba(0,0,0,0.05) 100%);
}
.MediaBox .tab_container{ overflow:hidden;}
.MediaBox .date{ color:#bababa; font-size:87.5%; font-family:'Century Gothic', serif; margin-bottom:5px; margin-top:10px;}
.MediaBox .item .title a, .MediaBox .item .desc a, .MediaBox .item a::before{ transition: all .3s ease;  -webkit-transition: all .3s ease; -moz-transition: all .3s ease;}
.MediaBox .title a{ display:block; font-size:106.3%; color:#444; position:relative; padding-left:22px; margin-bottom:10px;
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.MediaBox .title a::before{ content:''; display:block; width:15px; height:2px; background-color:#c40d1a; position:absolute; top:11px; left:0;}
.MediaBox .item:hover a::before{ left:5px;}
.MediaBox .item{ margin-bottom:2rem;}
.MediaBox .item:hover .title a{ color:#c40d1a; padding-left:27px;}
.MediaBox .desc a{ 
	display:block;
	font-family:'Yantramanav',"Heiti TC", "微軟正黑體", "Microsoft JhengHei", "黑體-繁",  sans-serif;
	color:#777; 
	font-size:93.8%;
	letter-spacing:0.8px;
	line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 48px; 
}
.MediaBox .item:hover .desc a{ color:#000;}


/*----------------------------------------------------------------------*/
/* 共用按鈕箭頭 */
.btn_arrow {
	position:absolute; top:50%; width:16px; height:16px;
	-moz-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%);
}
.btn_arrow::after, .btn_arrow::before {
	content:""; width:8px; height:2px; left:0; position:absolute;
	-moz-transition:all 0.3s ease 0s;
	-o-transition:all 0.3s ease 0s;
	transition:all 0.3s ease 0s;
	-moz-border-radius:2px;
	-o-border-radius:2px;
	border-radius:2px;
}
.btn_arrow::after {
	bottom:5px;
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.btn_arrow::before {
	top:5px;
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}