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

.insideWrap{ padding:80px 0 0 0;}
.insideWrap .titleWrap .titleBox{ background:url(../images/title_case.jpg) no-repeat;}



/*==case==*/
.caseWrap{ width:100%; box-sizing:border-box; position:relative;} 
/*.caseWrap:after{ content:""; position:absolute; right:180px; bottom:0; width:200px; height:99px; background:url(../images/img_bg03.png) no-repeat;}*/
.caseWrap .wrap{ padding:40px 20px;}

/*submenu*/
.caseWrap .wrap .submenuBox{ float:left; width:20%; box-sizing:border-box;}
.caseWrap .wrap .submenuBox .title{ width:100%; border-bottom:2px #333 solid; text-align:center; padding:12px 0;}
.caseWrap .wrap .submenuBox .title h3{ font-size:22px; color:#333; background:url(../images/icon_case.png) no-repeat right top;}
.caseWrap .wrap .submenuBox ul li{ width:100%; box-sizing:border-box; padding:20px 0; border-bottom:1px #999 dotted; text-align:center;}
.caseWrap .wrap .submenuBox ul li a{ display:block; font-size:16px; color:#666; transition:all 0.4s ease;}
.caseWrap .wrap .submenuBox ul li a:hover{ color:#4c9900;}
.caseWrap .wrap .submenuBox ul li a.active{ color:#4c9900; font-weight:bold;}

/*content*/
.caseWrap .wrap .caseBox{ float:left; width:80%; box-sizing:border-box; padding-left:40px;}
.caseWrap .wrap .caseBox ul{ margin:0 -7px;}
.caseWrap .wrap .caseBox ul li{ float:left; width:33.33%; box-sizing:border-box; padding:0 7px 20px;}
.caseWrap .wrap .caseBox ul li .itemBox{ width:100%; background:#fff; box-sizing:border-box; box-shadow:0px 2px 5px rgba(20%,20%,40%,0.2);}
.caseWrap .wrap .caseBox ul li .itemBox .imgBox{ width:100%;}
.caseWrap .wrap .caseBox ul li .itemBox .imgBox img{display:block; width:100%;}
.caseWrap .wrap .caseBox ul li .itemBox .imgBox a{ display:block; transition:all 0.4s ease;}
.caseWrap .wrap .caseBox ul li .itemBox .imgBox a:hover{ opacity:0.8;}
.caseWrap .wrap .caseBox ul li .itemBox .txtBox{ width:100%; box-sizing:border-box; padding:25px 15px;}
.caseWrap .wrap .caseBox ul li .itemBox .txtBox h3{ font-size:20px; color:#333; margin-bottom:8px; height:30px; overflow:hidden; text-align:center;}
.caseWrap .wrap .caseBox ul li .itemBox .txtBox p{ font-size:14px; color:#666; text-align:justify; line-height:1.6; height:90px; overflow:hidden;}
.caseWrap .wrap .caseBox ul li .itemBox .txtBox .more{ text-align:center; margin-top:20px;}
.caseWrap .wrap .caseBox ul li .itemBox .txtBox .more a{ display:inline-block; font-size:12px; color:#888; text-align:center; border-radius:30px; border:1px #d2d2d2 solid; padding:5px 15px; margin-top:0; transition:all 0.4s ease;}
.caseWrap .wrap .caseBox ul li .itemBox .txtBox .more a:hover{ background:#aaa; color:#fff; border:1px #aaa solid;}




/*手機板選單*/
.submenu_m{ display:none; width:100%; cursor:pointer; position:relative;}
.submenu_m a.submain{ display:block; font-size:15px; color:#fff; background:#81bb48; padding:10px 20px; border-radius:4px 4px 0 0; position: relative;}
.submenu_m a.submain b{ color:#fff; letter-spacing:2px;}
.submenu_m a.submain i{ display:block; color:#fff; font-size:15px; position:absolute; right:10px; top:50%; margin-top:-6px;}
.submenu_m ul{ display:none; width:100%; background:#fff; border:1px #ddd solid; position:absolute; left:0; top:100%; z-index:99; box-sizing:border-box; padding:5px 0; border-bottom:2px #ddd solid;}
.submenu_m ul li a{ display:block; font-size:15px; color:#333; padding:8px 20px; border-top:1px #ddd solid; transition:all 0.4s ease;}
.submenu_m ul li a.active{color:#4c9900; font-weight:bold;}
.submenu_m ul li:first-child a{ border-top:0;}
.submenu_m ul li a:hover{color:#4c9900; padding:5px 25px;}

/* 下方按鈕 */
.outerWrap .shareBox{ width:100%; text-align:right; margin-top:40px; border-top:1px #ddd solid; padding:20px 20px 0; box-sizing: border-box;}
.outerWrap .shareBox a{ display:inline-block; background:#65AB27; color:#fff; text-align:center; padding:10px 20px; font-size:13px; transition:all 0.4s ease;}
.outerWrap .shareBox a:hover{ background:#65AB27;}

@media (max-width:1034px){

}

@media (max-width:980px){
.caseWrap .wrap .caseBox{ padding-left:25px;}
}

@media (max-width:768px){
.submenu_m{ display:block;}	
.caseWrap .wrap .submenuBox{ float:none; display:none;}
.caseWrap .wrap .caseBox{ float:none; width:100%; padding:0; margin-top:25px;}
	
}

@media (max-width:640px){
.caseWrap .wrap .caseBox ul li{ width:50%;}	
.images {display:block; width:100%;}
}

@media (max-width:480px){
.caseWrap .wrap .caseBox ul li{ width:100%;}		
.caseWrap .wrap{ padding:40px 15px 20px;}
.caseWrap .wrap .caseBox ul li .itemBox .txtBox p{ height:auto;}
.images {display:block; width:100%;}
}

@media (max-width:420px){
.caseWrap .wrap{ padding:30px 15px 15px;}	
.caseWrap .wrap .caseBox{ margin-top:15px;}	
.images {display:block; width:100%;}
}


@media (max-width:375px){
	.images {display:block; width:100%;}
}


@media (max-width:320px){
.caseWrap .wrap{ padding:20px 10px 10px;}	
.images {display:block; width:100%;}
}