@charset "utf-8";

*, *::after, *::before{ box-sizing: border-box;}
html *{ padding:0; margin:0; position:relative; outline:0;}
h1, h2, h3, h4, h5, h6{ font-weight: 100;}
body{ font:100 15px/1 Arial, "微軟正黑體", "細明體"; background:#e9eaed url(../images/bg.png) 0 55px repeat-x;}
a{ text-decoration:none;}
a:hover{ text-decoration:underline;}
img{ display: block; border:0;}


/* helper --------------------------------------------- */
.img-resp{
    width: 100%;
    height: auto;
    display: block;}
.mx-auto{ margin-left: auto; margin-right: auto;}

/* Layout ------------------------------------------ */
.row{ margin-left: -15px; margin-right: -15px;}
.container{
    width: 1200px;
    margin: 15px auto;
}
.l-grid > li{ float: left;}
.l-grid-1-2 > li{ padding: 15px; width: 50%;}
.l-grid-1-3 > li{ padding: 15px; width: 33.3333%}
.l-grid-1-4 > li{ padding: 15px; width: 25%;}
.l-grid-1-5 > li{ padding: 15px; width: 20%;}


/*===Main area===*/
.branding-wrap{ height:57px; margin-bottom: 2rem; z-index: 1;}
.branding{ width: 1200px; margin:0 auto;}
.main{ margin-bottom: 2em;}
.main:after{ content:''; display:block; clear:both;}

/*===Header===*/
.site-info h2{ position:absolute;}
.site-info h2 a{ display:block; background:url(../images/logo.png); width:65px; height:79px; text-indent:-9999px;}
.site-info h2 a:hover{ background-position:0 -76px;}
.site-info h3{ font-size:13px; color: rgba(255,255,255,.8); position:absolute; left:100px; top:1em; font-weight:100; line-height:1.3; width:212px;}
.site-info h3 span{ display:block; margin-left:2em;}
.site-info h3:before, .site-info h3:after{ content:''; position:absolute;}
.site-info h3:before{ border:solid 4px transparent; border-right:solid 13px rgba(255,255,255,.8); left:-37px; top:5px;}
.site-info h3:after{ border-top:solid 1px rgba(255,255,255,.8); width:1em; top:9px; left:-20px;}

/*===Navigation===*/
.navi{ position:absolute; right:0;}
.navi .menu > li{ float:left; list-style:none;}
.navi .menu > li > a{ line-height:57px; display:inline-block; color:#fff; padding:0 20px; text-decoration:none;}

.navi .menu > li:hover .sub-menu{
	display:block;
			animation:fadeIn .5s 1;
	-webkit-animation:fadeIn .5s 1;
	   -moz-animation:fadeIn .5s 1;
		 -o-animation:fadeIn .5s 1;
		-ms-animation:fadeIn .5s 1;}

		@keyframes fadeIn{ from {opacity:0;} to {opacity:1;}}
@-webkit-keyframes fadeIn{ from {opacity:0;} to {opacity:1;}}
   @-moz-keyframes fadeIn{ from {opacity:0;} to {opacity:1;}}
	 @-o-keyframes fadeIn{ from {opacity:0;} to {opacity:1;}}
	@-ms-keyframes fadeIn{ from {opacity:0;} to {opacity:1;}}

.sub-menu{ display:none; position:absolute; top:57px; left:auto; list-style:none;}
ul.sub-menu{ border-top: none;}
.sub-menu a{ display: block; color:#fff; line-height:2.5; padding:0 20px; white-space: nowrap; text-decoration: none;}

/* Module ------------------------------------ */
.tab{ margin-bottom: 1em;}
.tab-ls{
	padding: 0; margin: 0;
	list-style-type: none;
}
.tab-content{ display: none;}
.tab-content p{ line-height: 1.5;}

/* tab-bi -------------------------- */
.tab-bi:after{
	content: ''; display: block; clear: both;
}
.tab-bi .tab-ls{
	float: right; width: 30%;
}
.tab-bi .tab-body{
	float: left; width: 70%;
}
.tab-bi .img-resp{
	width: 100%; height: auto; display: block;
}
.tab-bi .tab-item{
	padding: 0 15px;
	line-height: 3.5;
	background-color: #fff;
}
.tab-bi .tab-item:hover{
	background-color: #eee;
}
.tab-bi .tab-item{
	margin-bottom: -1px;
	border: solid 1px #ddd;
}
.tab-bi .is-tab-active,
.tab-bi .is-tab-active:hover{
	color: #fff;
}

/* Module ------------------------------------------------ */
.boxLs{
    list-style-type: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}
.boxLs-item-title{
    font-size: 1em;
    line-height: 1.5;
    height: 3em;
    overflow: hidden;
    margin: 0;
}
.boxLs-item-desc{
    line-height: 1.5;
    font-size: .9em;
    height: 60px;
    overflow: hidden;
    margin: 0;
}

/* boxLs-base ------------------------------------------------------ */
.boxLs-base > li{ padding: 15px;}
.boxLs-base .boxLs-item-head{ margin: 15px 0;}

/* boxLs-border ------------------------------------------------------ */
.boxLs-border .l-box{
    border: solid 1px #ccc;
}
.boxLs-border .boxLs-item-inner{ background-color: #fff; padding: 15px;}
.boxLs-border .boxLs-item-head{ margin-bottom: 15px;}

/* boxLs-ovl ------------------------------------------------------ */
.boxLs-ovl > li{ padding: 15px;}
.boxLs-ovl .l-box{
    position: relative;
    overflow: hidden;
}
.boxLs-ovl .boxLs-item-inner{
    background-color: rgba(0,0,0,.7);
    position: absolute; top: 100%; left: 0;
    padding: 15px; height: 100%;
    opacity: 0;
    transition: all .5s ease;
}
.boxLs-ovl > li:hover .boxLs-item-inner{ opacity: 1; top: 0;}
.boxLs-ovl .boxLs-item-desc{ color: #fff;}
.boxLs-ovl .boxLs-item-head{ margin-bottom: 15px;}

/* boxLs-ovl2 -------------------------------- */
.boxLs-ovl2 .l-box{
    position: relative; overflow: hidden;
}

.boxLs-ovl2 .boxLs-item-imgWrap{ position: relative;}
.boxLs-ovl2 .boxLs-item-imgWrap:after{
   content: '';
   position: absolute; top: 0; left: 0;
   height: 100%; width: 100%;
   background: linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,.8) 100%);}
.boxLs-ovl2 .boxLs-item-imgWrap{ overflow: hidden;}
.boxLs-ovl2 .img-resp{ transition: transform .3s ease;}
.boxLs-ovl2 > li:hover .img-resp{ transform: scale(2);}
.boxLs-ovl2 .boxLs-item-inner{
   position: absolute; bottom: -85px; z-index: 1;
   padding: 15px;
   transition: bottom .3s ease;}
.boxLs-ovl2 > li:hover .boxLs-item-inner{ bottom: 0;}
.boxLs-ovl2 .boxLs-item-head{ margin-bottom: 15px;}
.boxLs-ovl2 .boxLs-item-title a{}
.boxLs-ovl2 .boxLs-item-desc{ color: #ddd; margin-bottom: 0;}

/* Other ---------------------------------------------- */
.mainBlk{ background-color: #fff;}
.mainBlk-head{ padding: 15px; border-bottom: solid 1px #ddd;}
.mainBlk-title{ font-size: 1.5em; display: inline-block;}
.mainBlk-more{ float: right; line-height: 27px;}
.mainBlk-body{ padding: 0 15px;}