@charset "utf-8";
/*latestzone*/
#middler.main .latestzone{background:#5BB432; overflow:hidden;}
#middler.main .latestzone .subtitle{float:left; width:170px; height:160px; align-content:center;  position:relative;}
#middler.main .latestzone .subtitle::after{content:""; right:0px; top:50%; transform:translate(0, -50% ); width:2px; height:100px; background:#8CCC6E; position:absolute;}
#middler.main .latestzone .subtitle .title{color:white; font-size:20pt; font-weight:500; padding-left:20px; max-width:130px; word-break:break-all;}
#middler.main .latestzone .doc{float:left; width:calc(100% - 170px); height:160px; position:relative;}
#middler.main .latestzone .doc .control{position:absolute; right:0px; top:50%; transform:translate(0,-50%); }
#middler.main .latestzone .doc .control .controlBtn{position:relative; z-index:2; right:unset; top:unset; transform:unset; left:unset; margin:5px 0px;}
#middler.main .latestzone .doc .control .controlBtn:after{display:none;}
#middler.main .latestzone .doc .swiper{width:90%; height:160px; margin:0px;}
#middler.main .latestzone .doc .menu{margin:0px 20px;}
#middler.main .latestzone .doc .menu li{width:calc(100%/1); }
#middler.main .latestzone .doc .menu li .box{float:left; width:calc(100%/2); height:160px;  padding:30px 30px;}
#middler.main .latestzone .doc .menu li .box .title{color:white; font-weight:400; font-size:1.3em;}
#middler.main .latestzone .doc .menu li .box .title{overflow:hidden; white-space:normal;  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical;}
#middler.main .latestzone .doc .menu li .box .summary{color:white; margin:5px 0px; max-height:50px;}
#middler.main .latestzone .doc .menu li .box .summary{overflow:hidden; white-space:normal;  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
#middler.main .latestzone .doc .menu li .box .date{color:#B6E4A4; font-weight:400;}
@media(max-width:768px){
	#middler.main .latestzone .subtitle{display:none;}
	#middler.main .latestzone .doc .control{right:10px; display:none;}
	#middler.main .latestzone .doc{width:100%; height:140px;}
	#middler.main .latestzone .doc .swiper{width:100%;}
	#middler.main .latestzone .doc .menu{margin:0px 5px;}
	#middler.main .latestzone .doc .menu li{overflow:hidden;}
	#middler.main .latestzone .doc .menu li .box{padding:30px 10px;}
	#middler.main .latestzone .doc .menu li .box .title{font-size:0.9em;}
	#middler.main .latestzone .doc .menu li .box .summary{font-size:0.75em;}
	#middler.main .latestzone .doc .menu li .box .date{font-size:0.75em;}

}
/*productzone*/
#middler.main .productzone{overflow:hidden; padding:100px 0px;}
#middler.main .productzone .subtitle .title{font-size:38pt; font-weight:600; line-height:1.2em;}
#middler.main .productzone .subtitle .title > p{font-weight:inherit;}
#middler.main .productzone .subtitle .summary{padding:30px 0px;}
#middler.main .productzone .menu{display:flex; flex-wrap:wrap;}
#middler.main .productzone .menu li{width:calc(100%/4); cursor:pointer;}
#middler.main .productzone .menu li .box{margin:0px 20px; box-shadow:0px 0px 15px rgba(0,0,0,0.3); position:relative; overflow:hidden;}
#middler.main .productzone .menu li .box .thumb img{width:100%;}
#middler.main .productzone .menu li .box .info{position:absolute; bottom:-130px; width:100%; text-align:center; padding:0px 10px; background:rgba(91, 180, 50, 0); height:220px; align-content:center; transition:0.3s;}
#middler.main .productzone .menu li:hover .box .info{bottom:0px;  transition:0.3s; background:rgba(91, 180, 50, 0.85); }
#middler.main .productzone .menu li .box .info .title{color:white; font-size:16pt; font-weight:500;}
#middler.main .productzone .menu li .box .info .summary{transition:0.3s; color:white; margin-top:10px; opacity:0; height:100px;}
#middler.main .productzone .menu li .box .info .summary{overflow:hidden; white-space:normal;  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; line-height:1.6em;}
#middler.main .productzone .menu li:hover .box .info .summary{transition:0.3s; opacity:1;}
#middler.main .productzone .menu li .box .info .more{border:1px solid white; color:white; padding:5px 20px;}
#middler.main .productzone .menu li .box .info .summary > p{color:inherit;}
@media(max-width:768px){
	#middler.main .productzone{overflow:hidden; padding:50px 10px;}
	#middler.main .productzone .subtitle .title{font-size:1.4em;}
	#middler.main .productzone .subtitle .title > p{display:inline;}
	#middler.main .productzone .subtitle .summary{padding:10px 0px; font-size:0.9em;}
	#middler.main .productzone .menu{gap:0px 20px;}
	#middler.main .productzone .menu li{width:calc(100%/2 - 10px);}
	#middler.main .productzone .menu li .box{margin:10px 0px;}
	#middler.main .productzone .menu li .box .info{height:170px;  bottom:-110px; }
	#middler.main .productzone .menu li .box .info .title{font-size:1em;}
	#middler.main .productzone .menu li .box .info .summary{font-size:0.75em; height:75px;}
}

/*aboutzone*/
#middler.main .aboutzone{overflow:hidden; height:558px;  background:url('/images/beo_bg.png') top center no-repeat; background-size:cover;  color:white; text-align:center; align-content:center;}
#middler.main .aboutzone .title{font-size:28pt; font-weight:500;}
#middler.main .aboutzone .summary{font-size:16pt; margin-top:50px;}
#middler.main .aboutzone .summary > p{font-weight:inherit;}
#middler.main .aboutzone .more{color:white; padding:15px 50px; border:2px solid white; margin-top:50px;; font-weight:400; font-size:14pt;}
@media(max-width:768px){
	#middler.main .aboutzone{height:auto; padding:50px 10px;}
	#middler.main .aboutzone .title{font-size:1.4em;}
	#middler.main .aboutzone .summary{font-size:0.75em; margin-top:20px;}
	#middler.main .aboutzone .summary > p{display:inline;}
	#middler.main .aboutzone .more{font-size:0.9em; padding:10px 30px; margin-top:20px;}
}


/*moviezone*/
#middler.main .moviezone{overflow:hidden; padding:100px 0px;}
#middler.main .moviezone .subtitle{text-align:center;}
#middler.main .moviezone .subtitle > .title{font-size:28pt; font-weight:600;}
#middler.main .moviezone .subtitle .summary{margin:20px 0px;}
#middler.main .moviezone .menu{margin:50px 0px 0px 0px}
#middler.main .moviezone .menu li .box{text-align:center;}
#middler.main .moviezone .menu li .box .video{width:1000px; margin:auto;}
#middler.main .moviezone .menu li .box .info{margin:50px 0px;}
#middler.main .moviezone .menu li .box .info > .title{font-size:1.8em; font-weight:400;}
#middler.main .moviezone .menu li .box .info > .summary{font-size:1.1em; line-height:1.8em;}
@media(max-width:768px){
	#middler.main .moviezone{padding:50px 10px;}
	#middler.main .moviezone .subtitle > .title{font-size:1.2em;}
	#middler.main .moviezone .subtitle .summary{margin:10px 0px; font-size:0.75em;}
	#middler.main .moviezone .menu li .box .video{width:100%; margin:auto;}
	#middler.main .moviezone .menu li .box .info{margin:20px 0px;}
	#middler.main .moviezone .menu li .box .info > .title{font-size:1.2em}
	#middler.main .moviezone .menu li .box .info > .summary{font-size:0.8em; line-height:1.8em;}
	#middler.main .moviezone .menu li .box .info > .summary > p{display:inline;}

}


/*companyzone*/
#middler.main .companyzone{overflow:hidden; padding-bottom:100px;}
#middler.main .companyzone .subtitle{float:left; width:30%;}
#middler.main .companyzone .subtitle .summary{font-size:16pt; font-weight:600; color:#5BB432;}
#middler.main .companyzone .subtitle .title{font-size:36pt; font-weight:800;}
#middler.main .companyzone .menu{display:flex; flex-wrap:wrap; float:right; width:70%;}
#middler.main .companyzone .menu li{width:calc(100%/2);}
#middler.main .companyzone .menu li .box{background:#F4F9F2; margin:10px; text-align:center; align-content:center; height:200px; overflow:hidden; padding:0px 50px;}
#middler.main .companyzone .menu li .box .info{float:left; text-align:left;}
#middler.main .companyzone .menu li .box .info .title{font-size:16pt; font-weight:600; margin-top:10px;}
#middler.main .companyzone .menu li .box .info .summary{font-size:16pt; font-weight:600; color:#5BB432;}
#middler.main .companyzone .menu li .box .thumb{float:right; margin-top:20px;}
@media(max-width:768px){
	#middler.main .companyzone{padding:0px 10px 50px 10px;}
	#middler.main .companyzone .subtitle{float:unset; width:100%; text-align:center;}
	#middler.main .companyzone .subtitle .summary{font-size:1.2em;}
	#middler.main .companyzone .subtitle .title{font-size:1.8em}
	#middler.main .companyzone .menu{display:flex; flex-wrap:wrap; float:unset; width:100%; gap:0px 20px;}
	#middler.main .companyzone .menu li{width:calc(100%/2 - 10px);}
	#middler.main .companyzone .menu li .box{margin:10px 0px;  padding:0px 20px; height:100px; position:relative;}
	#middler.main .companyzone .menu li .box .info .title{font-size:1em; margin:0px;}
	#middler.main .companyzone .menu li .box .info .summary{font-size:0.9em;}
	#middler.main .companyzone .menu li .box .thumb{float:unset; position:absolute; top:50%; right:20px; margin:0px; transform:translate(0%, -50%);}
	#middler.main .companyzone .menu li .box .thumb img{width:30px;}
}


/* partnerzone */
#middler.main .partnerzone{overflow:hidden; padding-bottom:50px;}
#middler.main .partnerzone .subtitle{ width:30%;}
#middler.main .partnerzone .subtitle .summary{font-size:16pt; font-weight:600; color:#5BB432;}
#middler.main .partnerzone .subtitle .title{font-size:36pt; font-weight:800;}

#middler.main .partnerzone .partner{margin-top:40px;}
#middler.main .partnerzone .partner li{border:1px solid #ddd; border-radius:5px; margin:10px; background-color:#fbfbfb;}
#middler.main .partnerzone .partner li div{ width:80%; margin:auto;}
#middler.main .partnerzone .partner li div img {width:100%;}

@media(max-width:768px){
	#middler.main .partnerzone{padding:0px 10px 50px 10px;}
	#middler.main .partnerzone .subtitle{float:unset; width:100%; text-align:center;}
	#middler.main .partnerzone .subtitle .summary{font-size:1.2em;}
	#middler.main .partnerzone .subtitle .title{font-size:1.8em}
}
@media(max-width:480px){
	#middler.main .partnerzone .partner li div{ width:80%; margin:0px auto;}
}