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

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

/*submenu*/
.submenuBox{float:left;width:100%;box-sizing: border-box;text-align: right;color: #FFF;margin-top: 20px;margin-bottom: 10px; height:450px;}
.submenuBox .title{width: 100%;border-bottom: 2px #1A264C 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 #B9B9C8 dotted; text-align:center;}
.submenuBox ul li a{ display:block; font-size:19px; color:#1F1F2E; transition:all 0.4s ease;}
.submenuBox ul li a:hover{color: #ff9000;}
.submenuBox ul li a.active{color: #D83500;font-weight: bold;}


/*==about==*/
.aboutWrap{ width:100%; box-sizing:border-box; position:relative;} 
/*.aboutWrap:after{ content:""; position:absolute; right:180px; bottom:0; width:200px; height:99px; background:url(../images/img_bg03.png) no-repeat;}*/
.aboutWrap .wrap{ padding:0 30px 50px 30px;}
.aboutWrap .wrap .photoBox{ float:left; width:20%; box-sizing:border-box; margin-right:50px;}
.aboutWrap .wrap .photoBox img{ display:block; width:70%; margin:0 auto;}
.aboutWrap .wrap .aboutBox{}
.aboutWrap .wrap .aboutBox{ margin-top:30px;}
.aboutWrap .wrap .aboutBox p{ font-size:19px; line-height:1.6; padding-bottom:10px;}
.titleWrap .wrap .TitleBox{text-align:center; padding-left:150px;}


/*==ecatalog==*/

.contentWrap .wrap{text-align:center; margin:0 auto;float:left; width:75%; box-sizing:border-box;}
.contentWrap .wrap .videoBox{ width:100%;}
.contentWrap .wrap .videoBox ul{ margin:0 -5px;}
.contentWrap .wrap .videoBox ul li{ float:left; width:33.33%; box-sizing: border-box; padding:0 5px 15px;}

.contentWrap .wrap .videoBox ul li .itemBox{ width:100%; height:265px;}
.contentWrap .wrap .videoBox ul li .itemBox .imgBox{ width:100%;}
.contentWrap .wrap .videoBox ul li .itemBox .imgBox img{display:block; width:100%;}
.contentWrap .wrap .videoBox ul li .itemBox .imgBox a{ display:block; transition:all 0.4s ease;}
.contentWrap .wrap .videoBox ul li .itemBox .imgBox a:hover{ opacity:0.5;}
.contentWrap .wrap .videoBox ul li .itemBox .txtBox{ width:100%; background:#fff; padding:15px 0;}
.contentWrap .wrap .videoBox ul li .itemBox .txtBox h3{ font-size:22px; color:#4c0065; font-weight:normal; font-family:微軟正黑體;}
.contentWrap .wrap .videoBox ul li .itemBox .txtBox p{ font-size:15px; color:#8254ae; line-height:1.6; font-family:微軟正黑體; text-align:left;}
.contentWrap .wrap .videoBox ul li .itemBox .txtBox span.text{ font-family:微軟正黑體; display:block; font-size:13px; color:#F88559; text-align:center; font-family:Arial, Helvetica, sans-serif; padding:10px 0; letter-spacing:2px;}


.contentWrap .wrap .navBox{text-align:center; margin:0 auto;}
.contentWrap .wrap .navBox ul{ display:block; margin:0 auto; text-align:center;}
.contentWrap .wrap .navBox ul li{ float:left; width:25%; padding:0 5px; box-sizing: border-box;}
.contentWrap .wrap .navBox ul li a{ display:block; font-size:18px; color:#8254ae; background:#fff; border:1px #8254ae solid; text-align:center; padding:10px 10px; transition:all 0.4s ease;}
.contentWrap .wrap .navBox ul li a:hover{ background:#8254ae; color:#eee;}
.contentWrap .wrap .navBox ul li a.active{ font-size:18px; color:#fff; background:#8254ae; font-weight:bold;}

@media (max-width:1034px){

.aboutWrap .wrap{ padding:100px 100px;}	
.aboutWrap:after{ right:0;}
}



@media (max-width:768px){
.aboutWrap .wrap{ padding:60px 50px; height:1300px;}
.aboutWrap .wrap .photoBox{ width:40%;}
.aboutWrap .wrap .aboutBox{ padding:0 0 0 40px; width:60%;}
.aboutWrap:after{ width:100px; height:50px; background-size:cover;}
	
}

@media (max-width:640px){
.aboutWrap .wrap .aboutBox .txtBox{ margin-top:0;}	
.aboutWrap .wrap .aboutBox .txtBox p{ font-size:14px;}
}

@media (max-width:480px){
.aboutWrap .wrap{ padding:40px 30px;}
.titleWrap .wrap .TitleBox{ padding-left:10px; padding-top:20px;}
.aboutWrap .wrap .photoBox{ display:none;}
.aboutWrap .wrap .aboutBox{ float:none; width:70%; margin:20px auto 0; padding:0;}
.aboutWrap .wrap .contentWrap .wrap { width:100%;}
.aboutWrap .wrap .contentWrap .wrap .videoBox{ width:100%;}
.aboutWrap .wrap .contentWrap .wrap .videoBox ul{}
.aboutWrap .wrap .contentWrap .wrap .videoBox ul li{width:50%;}
}

@media (max-width:420px){
.aboutWrap .wrap .aboutBox{ width:80%;}
}


@media (max-width:375px){
.aboutWrap .wrap .photoBox{ width:85%;}	
.aboutWrap .wrap .aboutBox{ width:90%;}
}


@media (max-width:320px){
.aboutWrap .wrap .aboutBox{ width:100%;}
}