@charset "UTF-8";
@font-face{
    font-family:"Barlow";
    src:url(/static/font/Barlow.ttf)
}
article{float:left;width:100%}
article h1{color:#333;font-size:1.8rem;line-height: 2.8rem;}
article .info{margin-bottom:20px;border-bottom:1px solid #e6e6e6;color:grey;line-height:60px}
article time{margin-right:80px;padding-left:25px;display:none}
article time::before{margin-right:8px}
article img,article p{margin-bottom:15px}
article img{width:100% !important; height:auto !important;}
article p a{border-bottom:1px dashed;transition:all .2s}
article p a:hover{color:#77b917;border-bottom-style:solid}
article h2 {font-size: 1.5rem;background: #f6f6f6;border-left: 4px solid #77b917;line-height: 2rem;padding:.5rem 0 .5rem 10px;margin-bottom: 15px;text-transform: capitalize;color: #333;}
article h3{font-size:1.3rem; color:#333;margin-bottom:1rem}
article h4{font-size:1.1rem; color:#333; line-height: 2.5rem;}
article h5{font-size:1rem; color:#333; line-height:2rem}
article .table{width:100%; }
article table{width:100%; box-sizing:border-box; border-collapse:collapse; margin-bottom:1.5rem;border:none}
article table td,article table th{border:1px solid #ddd; padding:.5rem 1rem; text-align:center; line-height:1.5rem; color:#333; font-size:1rem}
article table tr:nth-child(2n+1){background:#f1f8e7}
article table th,article table th a{color:#fff; background:#77b917}
article table td a{color:#333}
article ul,article ol{padding-left:3rem;margin-bottom:1.5rem}
article ul li,article ol li{list-style:disc; line-height:1.5rem;color:#808080; margin-bottom:1rem}
article ol li{list-style:decimal-leading-zero}
article ul.bg,article ol.bg{background:#f1f8e7; padding:1rem 1rem 1rem 3rem}

article .bottomTxt{background:#f2fde2; border:1px solid #a0c865; width:100%; padding:5px 3rem; position:relative; box-sizing:border-box}
article .bottomTxt:before{display:block; content:"";width:14%; height:4px; background:#a0c865; position:absolute; left:43%; top:-2px}
article .bottomTxt p{margin-bottom:0; }
article a.bottomButton{display:block;font-family:"Barlow";width:300px; height:52px; line-height:40px; background:url(/static/img/media/news_article_bottomButton.png) no-repeat; color:#fff; font-size:1.2rem;text-align:center;text-shadow:0 -2px 2px #333; margin:1.4rem auto 0;transition:all .1s}
article a.bottomButton:hover{background:url(/static/img/media/news_article_bottomButton_hover.png) no-repeat left bottom;line-height:50px; transition:all .1s}

.case .left,.news .left{width:72%}
.case .right,.news .right{width:26%;min-width: 300px;}
.news .left h4{margin-top:5rem}
.news .right dl.list{margin-bottom:40px;width:100%;border-top:2px solid #77b917}
.news .right dt{width:100%;border-bottom:1px solid #e5e5e5;background:#f2f4f5;color:#333;text-align:center;line-height:46px}
.news .right dd{box-sizing:border-box;width:100%;border:1px solid #e5e5e5;border-top:none;padding:10px;line-height:2rem;}
.news .right dd:before{display:none}
.news .btn_inquiry{display:block;margin-bottom:25px;width:100%;border-radius:4px;background:#77b917;color:#fff;text-align:center;font-size:1.3rem;line-height:50px}
.hotkey{width:100%;}
.hotkey a{margin-right:40px}
.hotkey p{padding:1rem 0}
.hotkey p:before{content:"Tag:"}
.hotkey a,.pan a{color:grey;transition:all .2s}
.hotkey a:hover,.pan a:hover{color:#77b917}
.pan{width:100%;border-top:1px solid #e6e6e6;color:grey;line-height:50px;padding-top:1rem;overflow:hidden}
.pan span{float:left;display:block;overflow:hidden;max-width:46%;text-overflow:ellipsis;white-space:nowrap}
.pan span:nth-child(2){float:right}
.pro_recom{display:flex;flex-wrap: wrap; margin:2.5rem 0 5rem;width:100%;justify-content:space-around}
.pro_recom dl{width:32%;min-width:270px;margin-bottom: 1rem;}
.pro_recom dl dt{overflow:hidden;padding:20px 0;width:100%;border:1px solid #b3b3b3}
.pro_recom dl dt img{margin:0 auto;transition:all .2s}
.pro_recom dl dd{text-align:center;line-height:2rem;font-size: 1rem;}
.pro_recom dl:hover dt{border-color:#77b917}
.pro_recom dl:hover dt img{transform:scale(1.05)}
.case h1{font-family:Poppins}
.case .caseinfo{display:flex;flex-wrap: wrap; margin:20px auto;width:100%;justify-content:space-around;padding-left:0}
.case .caseinfo li{display:table;box-sizing:border-box;padding:10px;width:280px;border-radius:4px;background:#f5f5f5}
.case .caseinfo p{display:table-cell;vertical-align:middle;font-size:1rem}
.case .caseinfo span{display:block;color:#77b917}
.case .right{padding-top:120px}
.case .right dl{width:100%;text-align:center}
.case .right dd,.case .right dt{box-sizing:border-box;width:100%;border:1px solid #ccc}
.case .right dt{border-radius:4px;color:#333;font-size:1rem;line-height:2.5rem}
.case .right img{margin-bottom:10px;width:100%;height:auto}
.case .right dd{margin-top:10px;padding:20px}
.case .right a:hover{color:#77b917}
.case .pan{box-sizing:border-box;padding:0 20px;height:40px;border:none;background:#f5f5f5;line-height:40px}
.otline{display:flex;flex-wrap: wrap; margin:40px 0 80px;width:100%;justify-content:space-around}
.otline dl{overflow:hidden;width:49%;min-width:300px;border-radius:4px;background:url(/static/img/solution/case_line.jpg);background-size: cover; transition:all .2s;margin-bottom: 2rem;}
.otline dl:hover{box-shadow:0 0 8px 1px #ccc}
.otline dl:hover dt{background:rgba(0,0,0,.8)}
.otline dl:nth-child(2){background:url(/static/img/solution/case_line2.jpg);background-size: cover;}
.otline dl dt{box-sizing:border-box;padding:20px;width:100%;height:100%;background:rgba(0,0,0,.5);color:#fff;transition:all .2s}
.otline dl h6{font-size:1.8rem;font-family:Poppins;line-height:2.8rem}
.otline dl p{margin-bottom:20px;color:#fff}
.otline dl a{display:inline-block;padding:0 25px;border:1px solid #fff;border-radius:20px;color:#fff;line-height:40px;transition:all .2s}
.otline dl a:hover{border-color:#77b917;background:#77b917}

.news .left>dl{border-top:1px #ccc solid; padding-top:5rem;}
.art_list{display:flex;margin-bottom:5rem;padding-top:5rem;justify-content:space-between; flex-wrap:wrap}
.art_list dl{width:48%;min-width:300px;color:#333; margin-bottom:5rem}
.art_list dt,.news .left>dl dt{margin-bottom:2rem;width:100%;border-bottom:1px solid #333;font-size:1.5rem;line-height:2.5rem}
.art_list dt a,.news .left>dl dt a{float:right;font-size:1rem}
.art_list dt a::before,.news .left>dl dt a:before{margin-right:5px;content:"▶";font-size:10px}
.art_list dd,.news .left>dl dd{line-height:2rem;font-size: 1rem;}
.art_list dd a,.news .left>dl dd a{display:block;transition:all .2s}
.art_list dl.img dd{display:flex;flex-wrap:wrap; justify-content:space-between}
.art_list dl.img dd a{width:49%}
.art_list dl.img dd a img{width:100%}
.art_list dl.img dd a:before{display:none}
.art_list dd a:hover,.news .left>dl dd a:hover,.art_list dl.img dd a:hover p{color:#77b917}
.art_list dd a::before,.news .left>dl dd a:before{margin-right:5px;content:"▶";font-size:10px}
.art_list dd span,.news .left>dl dd span{float:right}
@media screen and (max-width:1200px) {
    .case .left,.news .left{width: 100%;}
    .news .right,.case .right{width:100%;padding-top:0;margin-bottom:5rem}
    .case .right dl{display:flex;flex-wrap:wrap;justify-content:space-around}
    .case .right dd{width:24%;min-width:300px}
}
@media screen and (max-width:768px) {
    .art_list dl{width: 100%;}
    .news .left>dl dd{margin-bottom: 1rem;}
    .case .pan{height:auto;overflow:hidden}
    .pan span{width:100%;max-width:unset}
    article table{display:block;overflow-x:scroll}
}