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

.insideWrap{padding:0;width:100%;}
#bgleft{background:#FF6801;}
/*background:#FF6801;*/

/*==case==*/
.caseWrap{ width:100%; box-sizing:border-box; position:relative;} 
.caseWrap .wrap{ padding:40px 20px;}

/*submenu*/
.submenuBox{float: right;width: 70%;box-sizing: border-box;text-align: right;color: #FFF;margin-top: 20px;margin-bottom: 10px;}
.submenuBox .title{width: 100%;border-bottom: 4px #ffc90e solid;text-align: center;padding: 12px 0;font-weight: bold;}
.submenuBox .title h3{font-size: 22px;color: #fff;right top;}
.submenuBox ul li{ width:100%; box-sizing:border-box; padding:20px 0; border-bottom:1px #fff dotted; text-align:center;}
.submenuBox ul li a{ display:block; font-size:16px; color:#fff; transition:all 0.4s ease;}
.submenuBox ul li a:hover{color: #ffc90e;}
.submenuBox ul li a.active{color: #ffc90e;font-weight: bold;}


.insideWrap{ width:100%; box-sizing:border-box; position:relative; margin:0 auto; box-sizing: border-box;}
.insideWrap .titleWrap{ width:100%; box-sizing:border-box;}


.insideWrap .proleft{background:#FF6801;width:30%;float:left;height:100%;}
.insideWrap .proleft .proleft1{margin: 0 auto;text-align:right;}
.insideWrap .proleft .proleft1 .proleft2{margin-right:20px;}

.insideWrap .proright{background:#FFf;width:70%;float:left;}

.insideWrap .proright .breadBox{float: right;margin:20px 20px 10px 0px;}
.insideWrap .proright .breadBox p{ font-size:14px; color:#FFCC5D;}
.insideWrap .proright .breadBox p a{ display:inline-block; color:#FFCC5D; transition:all 0.4s ease;}
.insideWrap .proright .breadBox p a i{ padding-right:2px;}
.insideWrap .proright .breadBox p a:hover{ color:#ffba14;}
.insideWrap .proright .breadBox p span{ padding:0 7px;}
.insideWrap .proright .titleBox{ width:100%; text-align: center;}
.insideWrap .proright .titleBox h2{font-size:30px; color:#FF968E;}


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


.insideWrap .proright .caseBox .title{width: 100%;border-bottom: 4px #ffc90e solid;text-align: left;padding: 12px 0;font-weight: bold;margin-top: -50px;}
.insideWrap .proright .caseBox .title h3{color:#FF6801;font-size: 20pt;}
.insideWrap .proright .caseBox .title p{color:#ffc90e;padding-top: 10px;margin-bottom: -5px;}
.insideWrap .proright .caseBox .slider {width:98%;overflow: hidden;text-align: center; margin-left: 5px;}
.insideWrap .proright .caseBox .contentBox{padding-left:20px;padding-top:10px;margin-bottom: 10px;}
.insideWrap .proright .caseBox .txtSales {width:100%; line-height:1.6;margin-bottom:8px;font-weight: bold; color:#6bb8ab;overflow:hidden;text-align: right;}
.insideWrap .proright .caseBox .contentBox img {width:100%;}

/*手機板選單*/
.submenu_m{ display:none; width:100%; cursor:pointer; position:relative;}
.submenu_m a.submain{ display:block; font-size:15px; color:#fff; background:#FF6801; 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:#ffc90e; font-weight:bold;}
.submenu_m ul li:first-child a{ border-top:0;}
.submenu_m ul li a:hover{color:#ffc90e; padding:5px 25px;}






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

@media (max-width:1034px){

}

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

@media (max-width:768px){
.insideWrap .proright .submenu_m{ display:block;margin:70px 10px 0px 10px; }
/*.insideWrap .proright .caseBox ul li{ width:30%;}		*/
.submenuBox{ float:none; display:none;}
.insideWrap .proleft {display:none;}
.insideWrap .proleft .proleft1{float:none;margin: 0 auto;text-align:center;width:100%;}
/*.insideWrap .proleft .proleft1 .proleft2{margin-right:20px;}*/
.insideWrap .proright .breadBox{display:none;}
.insideWrap .proright{background:#FFf;width:100%;margin:0px;}
.insideWrap .proright .caseBox{ padding:0; margin-top:20px;margin-left:10px;}
.submenu_m{ width:96%; }
}

@media (max-width:640px){
.insideWrap .proright .caseBox{margin-left:10px;}
.insideWrap .proright .caseBox ul li{ width:50%;}	
.images {display:block; width:100%;}

}

@media (max-width:480px){
.insideWrap .proright .caseBox{margin-left:10px;}
.insideWrap .proright .caseBox ul li{ width:100%;}		
.caseWrap .wrap{ padding:40px 15px 20px;}
.insideWrap .proright .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%;}
}