/* .testFont { font-family:"Times New Roman"; font-size:2rem; } */
/* 共用 */
.title { color:#000; font-size:2.5rem; line-height:50px; }
.titlebd { padding:20px 0px; }
.areabd { position: absolute; top:0px; left:50%; transform:translate(-10%,0); width:1px; height:70px; background-color:#72b32b; }
.more { display: inline-block; padding:15px 70px; color:#106536; border:1px solid #106536; }
.more:hover { background-color:#106536; color:#fff; }
.nodata { color:#919191; }

.mhhome { height:100px; }

.loading { background-color:#fff; position: fixed; top:0; left:0; width:100%; height:100%; z-index:10000; }
.loading img { width:auto; padding-top:30vh; }

.searchRes .staff { margin-bottom:40px; position: relative; }    
.searchRes .staff .colBG { background-color:#f3f3f3; }
.searchRes .staff .area { padding:20px; }
.searchRes .staff .area .tit { padding-bottom:10px; }
.searchRes .staff .area .name { font-size:1.125rem; }
.searchRes .moreRes a { display: inline-block; color:#106536; border-bottom:1px solid #106536; }
.searchRes .moreRes a:hover { color:#72b32b; border-bottom:1px solid #72b32b; }

.gallery1 { display: flex; position: relative; }
.gallery1 > a { display:block; flex:1; }
.gallery1 a .txt { position: absolute; left:40px; bottom:40px; z-index:2; display: none; text-align:left; color:#fff; }
.gallery1 a .txt .comp { font-size:1.125rem; }
.gallery1 a .txt .name { font-size:2rem; }
.gallery1 a .mask { background:url("./images/img_namebg.png")repeat-x center bottom; position: absolute; left:0px; right:0px; top:0px; bottom:0px; display: none; background-size:100%; }

.about .content { padding:40px 15px; }
.about .content .cont { padding-bottom:30px; color:#474747; }

.count { padding:120px 0px; background:url("./images/img_spbg.jpg") no-repeat center center; background-size:cover; }
.count .items { display: flex; padding:0px 50px; justify-content: space-between; }
.count .icon { margin-right:20px; }
.count .icon img { width:80px; }
.count .item { color:#fff; font-size:1.25rem; }
.count .item .num { font-size:3.75rem; line-height: 48px; }

.gd { background-color:#0b4123; }
.gd .ytembed { max-width:924px; margin:0px auto; }

.news .new { padding:30px; text-align:left; }
.news .new .tit { color:#72b32b; font-size:0.875rem; margin-bottom:20px; }
.news .new a { display: block; color:#474747; margin-bottom:50px; }
.news .new a:hover { color:#106536; }

.gallery2 { display: flex; position: relative; }
.gallery2 > a { display: block; flex:1; }
.gallery2 a .txt { color:#fff; font-size:2rem; width:100%; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index:2; }
.gallery2 a .mask { background-color:#000; opacity: 0.3; position: absolute; left:0px; right:0px; top:0px; bottom:0px; }

/* 圖片淡入淡出 */
@keyframes showin {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes showout {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.top { position: relative; }
.top .topbnr .bnr { width:100%; height:100vh; }

form input:not(.search) , form select { width:100%; background-color:#f1f1f1; border:1px solid #c6c6c6; padding:8px 10px; color:#000; }
::-webkit-input-placeholder{ color:#777777; }
/* select 改變按鈕圖示 */
select { -webkit-appearance: none; -moz-appearance: none; background: url("./images/arrow.png") no-repeat center center; background-position:calc(100% - 8px) 50%; background-size:8px; }
select.none { background-image:none; }

/* ie remove arrow */
select::-ms-expand { display: none; }


/************************** video rwd **************************/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

.video-container-4by3 {
	position: relative;
	padding-bottom: 75%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.video-container-4by3 iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}
/************************** video rwd **************************/

/* amination area init */
/* .cont, .prod,.btmbnr, .newcont { transform:translateY(100px); opacity: 0; } */
.upslideAni { animation:upslide 2s; transform:translateY(0px); opacity: 1; }
/* animation */
@keyframes upslide {
    0% { transform:translateY(100px); opacity: 0; }
    100% { transform: translateY(0px); opacity: 1; }
}

@media (min-width:1200px){
    .gallery1 > a:hover .mask , .gallery1 > a:hover .txt  { display: block; }
    .gallery2 > a:hover .mask { background-color:#0b4123; opacity: 0.7; }
}

@media (max-width:1199.98px){
    .searchForm .ssel > * { padding-bottom:25px; }

    .gallery1 a .txt { display: block; left:20px; bottom:20px; }
    .gallery1 a .txt .comp { font-size:0.875rem; }
    .gallery1 a .txt .name { font-size:1.25rem; }
    .gallery1 a .mask { display: block; }

    .count .items { padding:0px 20px; }
    .count .icon { margin-right:15px; }
    .count .item { font-size:1.25rem; }
    .count .item .num { font-size:3.5rem; line-height: 50px; }

    .gallery2 a .txt { font-size:2rem; }
}

@media (max-width:1199.98px) and (min-width:992px){
    /* .top .topbnr .bnr { height:50vh; } */

}

@media (min-width:992px){
    
}

@media (max-width:991.98px){
    
}



@media (min-width:768px) and (max-width:991.98px){
    /* .top .topbnr .bnr { height:50vh; } */

    .count .icon img { width:65px; }
    .count .item { font-size:1rem; }
    .count .item .num { font-size:3rem; line-height: 40px; }
}

/* 手機橫寬991.98內 banner全版 */
/* @media (max-width:991.98px) and (orientation: landscape){
    .top .topbnr .bnr { height:100vh; }
} */

@media (min-width:768px){


}

@media (max-width:767.98px){
    .title { font-size:1.5rem; }
    .areabd { height:50px; }
    .mhhome { height:60px; }
    .more { padding:10px 40px; }
    
    .gallery1 { flex-wrap: wrap; }
    .gallery1 > a { flex:0 0 50%; }
    .gallery1 a .txt .comp { font-size:0.75rem; }
    .gallery1 a .txt .name { font-size:1.125rem; }
    .gallery1 a .txt { left:0px; right:0px; text-align:center; }
    
    .count { padding:60px 0px; }
    .count .items { flex-direction: column; max-width:230px; margin:0px auto; }
    .count .items > div:not(:last-child) { margin-bottom:30px; }
    .count .icon img { width:60px; padding:10px 0px; }
    .count .item { font-size:1rem; }
    .count .item .num { font-size:2.5rem; }

    .news .new { padding:0px; }
    .news .new .tit { margin-bottom:10px; }
    .news .new .cont { margin-bottom:40px; }

    .gallery2 { display: block; }
    .gallery2 .SquareBase { padding-top:0px; height:480px; }
    .gallery2 a .txt { font-size:1.5rem; }

    .loading img { width:80px; }
}

@media (max-width:575.98px){
    .gallery2 .SquareBase { height:240px; }
}