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

/*----------------------------------------------------------------------*/
/* 共用 */
.inner { max-width:1280px; margin:0 auto; position:relative; }

.IndexMoreBtn { text-align: center; padding: 10px 0 30px; }
.IndexMoreBtn a { border: 1px solid #ccc; box-shadow: 0 1px 0 #ccc; color: #999; text-decoration: none; height: 40px; line-height: 40px; display: inline-block; width: 120px; font-size: 0.9375em; letter-spacing: .075em; }
.IndexMoreBtn a:hover { color: #ff7f30; border-color: #ff7f30; box-shadow: 0 1px 0 #ff7f30; }
.IndexMoreBtn a {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;    
}

/*----------------------------------------------------------------------*/
/* 首頁產品 */
.IndexProduct { background: #eeeeee; position: relative; }
.IndexProduct::before {
    content: ""; position: absolute; bottom: 0; left: 0; z-index: 0; width: 100%; height: 240px;
    background: linear-gradient(to bottom, #eeeeee 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
}

.IndexProductList > div { position: relative; }
.IndexProductList:after { content: ""; clear: both; display: block; }
.IndexProductList .item { float:left; box-sizing:border-box; overflow:hidden; position:relative; }
.IndexProductList .item > div { width:100%; height:100%; box-sizing:border-box; overflow:hidden; padding: 10px; }
.IndexProductList a { position: relative; height: 100%; text-decoration: none; color: #666; display: block; overflow: hidden; }
.IndexProductList a:hover { color:#ff7f30; }
.IndexProductList a:hover .img { transform:scale(1.03); }
.IndexProductList .img { background-size:cover; background-repeat:no-repeat; background-position:center center; position:relative; width:100%; padding-bottom:100%; background-color: #fff; }
.IndexProductList .title { padding: 0 10px; box-sizing: border-box; width:100%; letter-spacing: .025em; }
.IndexProductList .title .more {
    position: absolute; right: 0; bottom: 0;
    width: 0; height: 0; border-style: solid; border-width: 0 0 35px 35px; border-color: transparent transparent #aaaaaa transparent;
}
.IndexProductList .title .more::before, .IndexProductList .title .more::after { content: ""; position: absolute; background: #fff; }
.IndexProductList .title .more::before { top: 20px; right: 9px; width: 2px; height: 10px; }
.IndexProductList .title .more::after { top: 24px; right: 5px; width: 10px; height: 2px; }
.IndexProductList a:hover .title .more { border-color: transparent transparent #ff7f30 transparent; }
.IndexProductList a,
.IndexProductList .img,
.IndexProductList .title .more {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;    
}

/* 兩種樣式分隔 */
.IndexProductList.four_item .title .more { display: none; }
.IndexProductList.six_item .title { background: #fff; padding: 0 40px 0 10px; }
.IndexProductList.six_item a { background: #fff; }
.IndexProductList.six_item a:hover { box-shadow: 0 0 10px rgba(0,0,0,.25); }

/*----------------------------------------------------------------------*/
/* 首頁最新消息 */
.IndexNewsList { overflow:hidden; }
.IndexNewsList .item { position:relative; overflow:hidden; }
.IndexNewsList .img { padding-bottom:66.667%; background-size:cover; background-position:center; background-repeat: no-repeat; position:relative; }
.IndexNewsList .img a { position:absolute; left:0; top:0; width:100%; height:100%; }
.IndexNewsList .imgBox { width: 50%; padding: 10px; box-sizing: border-box; }
.IndexNewsList .textBox { position: absolute; right: 0; top: 0; height: 100%; width: 50%; padding: 10px; box-sizing: border-box; }
.IndexNewsList .textBox::before { content: ''; position: absolute; left: 0; top: 50%; width: 20px; height: 1px; background: #aaa; }
.IndexNewsList .textBox > div { display: table; width: 100%; height: 100%; border: 1px solid #aaa; text-align: center; }
.IndexNewsList .textBox .title { display: table-cell; vertical-align: middle; padding: 5px 20px; }
.IndexNewsList .textBox .title a { max-width: 200px; display: block; margin: 0 auto; text-decoration: none; font-size: 1.25em; color: #333; line-height: 1.6em; letter-spacing: .05em; max-height: 4.8em; overflow: hidden; }

/* hover */
.IndexNewsList .item:hover .img { transform:scale(1.03); }
.IndexNewsList .item:hover .textBox > div { border: 1px solid #ffbf97; }
.IndexNewsList .item:hover .textBox::before { background: #ffbf97; }
.IndexNewsList .item:hover .textBox .title a { color:#ff7f30; }

.IndexNewsList .img,
.IndexNewsList .textBox > div,
.IndexNewsList .textBox::before,
.IndexNewsList .textBox .title a {
    -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/*----------------------------------------------------------------------*/
/* 首頁案例 */
.IndexCaseList { overflow: hidden; }
.IndexCaseList .item > div { padding: 0 10px; }
.IndexCaseList .imgBox { overflow: hidden; }
.IndexCaseList .img { padding-bottom:66.667%; background-size:cover; background-position:center; background-repeat: no-repeat; position:relative; }
.IndexCaseList .img a { position:absolute; left:0; top:0; width:100%; height:100%; }
.IndexCaseList .textBox .title a { display: block; text-decoration: none; color: #333; line-height: 1.6em; letter-spacing: .05em; }

/* hover */
.IndexCaseList .item:hover .img { transform:scale(1.03); }
.IndexCaseList .item:hover .textBox .title a { color:#ff7f30; }

.IndexCaseList .img,
.IndexCaseList .textBox,
.IndexCaseList .textBox > div,
.IndexCaseList .textBox::before,
.IndexCaseList .textBox .title a {
    -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/*----------------------------------------------------------------------*/
/* 首頁影音 */
.IndexVideo { position: relative; padding: 25px 0; }
.IndexVideo .item { position:relative; overflow:hidden; }
.IndexVideo .img { padding-bottom:56.25%; background-size:cover; background-position:center; background-repeat: no-repeat; position:relative; }
.IndexVideo .img a { position:absolute; left:0; top:0; width:100%; height:100%; }
.IndexVideo .imgBox { padding: 10px; box-sizing: border-box; }
.IndexVideo .textBox { padding: 10px; box-sizing: border-box; }
.IndexVideo .textBox::before { content: ''; position: absolute; background: #aaa; }
.IndexVideo .textBox > div { display: table; width: 100%; height: 100%; border: 1px solid #aaa; }
.IndexVideo .textBox > div > div { display: table-cell; vertical-align: middle; padding: 5px 25px; }
.IndexVideo .textBox .title { max-width: 522px; margin: 0 auto; text-align: center; padding-bottom: 15px; font-size: 1.625em; font-weight: bold; color: #333; text-decoration: none; letter-spacing: .05em; line-height: 1.25em; overflow: hidden; }
.IndexVideo .textBox .desc { max-width: 522px; margin: 0 auto; letter-spacing: .05em; line-height: 1.6em; overflow: hidden; }

.IndexVideo .imgBox a { position: relative; display: block; }
.IndexVideo .mark { color:#fff; background-color:rgba(0,0,0,0.6); height:100%; top:0; position:absolute; left:0; width:100%; box-sizing:border-box; }
.IndexVideo .imgBox:hover .mark { background-color:rgba(0,0,0,0.4); }
.IndexVideo .mark:after { content:""; display:block; width:64px; height:64px; background:url(../images/icon_play.png) no-repeat center center; position:absolute; left:50%; top:50%; margin:-32px auto auto -32px; opacity:.7; }
.IndexVideo .imgBox:hover .mark:after { opacity:1; }

/* hover效果 */
.IndexVideo .mark, .IndexVideo .mark:after { 
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/*----------------------------------------------------------------------*/
/* 首頁留言板 */
.IndexContact { position: relative; padding: 25px 0 70px; }
.IndexContact::before {
    content: ""; position: absolute; bottom: 60px; left: 0; z-index: 0; width: 100%; height: 280px;
    background: linear-gradient(to bottom, #eeeeee 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
}

.IndexForm label { display: none; }
.IndexForm.FormElmt input[type="text"], .IndexForm.FormElmt textarea { border: 1px solid #fff; margin-bottom: 0px; font-size: 1em; }
.IndexForm.FormElmt input[type="text"]:focus, .IndexForm.FormElmt textarea:focus { border: 1px solid #ff7f30; }
.IndexForm { padding: 10px; background-color: #fff; }
.IndexForm > div { overflow: hidden; background-image: url(../images/index_contact_bg.jpg); padding: 33px 10px; }
.IndexForm::after { content:''; display:block; width:100%; clear:both; }
.IndexForm .item { width:25%; padding:10px; float:left; box-sizing:border-box; font-size:0.9375em; }
.IndexForm .item.fullwidth { width:100%; float:none; clear:both; }
.IndexForm .item.last { width:50%; }
.IndexForm .BtnCommon { text-align: right; }
.IndexForm .BtnCommon input { width: 140px; }
.IndexForm.FormElmt .randomcode .input input[type="text"] { width: 140px; }