@charset "utf-8";
/* CSS Document */
#about{ padding:80px 0px;}
#about .left{ float:left; width:40%;}
#about .left img{ width:100%;}
#about .right{ float:right; width:56%; margin-top:10px;}
#about .right .p1{ color:#3370ff; padding-left:15px; font-size:14px; border-left:2px solid #3370ff;}
#about .right .p2{ font-weight:600; font-size:32px; color:#333; line-height:200%;}
#about .right .p3{ color:#4a4a4a; margin-bottom:20px;}
#about .right .p4{ font-size:14px; color:#4a4a4a; line-height:200%; margin-bottom:30px;}
#about .more{ background:#3370ff; color:#fff; padding:10px 40px; border-radius:5px;}
#about .more:hover{ background:#4E83FD;}

#youshi{ background:#f5f5f5; padding:40px 0px;}
#youshi .title{ text-align:center; color:#383838; font-weight:600; line-height:200%; font-size:32px;}
#youshi .description{ text-align:center; color:#7d7d7d; margin-bottom:20px;}
#youshi .product{ float:left; width:calc(100% / 5); position:relative; overflow:hidden;}
#youshi .product img{ width:100%;}
#youshi .product .product_position{ background:rgba(51,112,255,0.97); bottom:100%; left:0px; height:100%; width:100%; position:absolute; transition:0.5s;}
#youshi .product .product_position p{ color:#fff; font-size:12px; line-height:200%; margin:40px;}
#youshi .product .product_title{ position:absolute; top:50%; text-align:center; width:100%; color:#fff; font-size:20px; z-index:1;}
#youshi .more{ text-align:center; margin:40px 0px;}
#youshi .more a{ color:#fff; background:#3370ff; padding:10px 60px; font-size:14px; border-radius:5px;}
#youshi .product:hover .product_position{ bottom:0px;}
#youshi .more a:hover{ background:#4E83FD;}

#index_show{ background:url(../img/index_show.jpg) no-repeat; background-size:cover;}
#index_show .index_show_position{ float:right; margin:100px 15%; width:400px;}
#index_show .index_show_position p{ font-size:34px; color:#fff; font-weight:600;}
#index_show .product{ float:left; width:calc(100% / 3); margin:40px 0px;}
#index_show .product .p1{ font-size:40px; float:left;}
#index_show .product .icon{ color:#fff; float:left; font-size:12px; margin-top:8px; margin-left:5px;}
#index_show .product .p2{ font-size:14px; color:#fff; font-weight:100;}
#index_show .more{ font-size:14px; color:#fff; border:1px solid #fff; border-radius:5px; padding:10px 40px;}
#index_show .more:hover{ background-color:#3370ff; border-color:#3370ff;}

#example{ padding:60px 0px;}
#example .title{ text-align:center; color:#383838; font-weight:600; line-height:200%; font-size:32px;}
#example .description{ text-align:center; color:#7d7d7d; margin-bottom:20px;}
#example .product{ float:left; margin:15px; width:calc(100% / 3 - 30px);}
#example .product .product_img{border:1px solid #ddd; height:260px; position:relative; overflow:hidden;}
#example .product .product_img img{ width:100%; height:100%; object-fit:cover;}
#example .product .product_img .product_position{ position:absolute; top:100%; left:0px; background:rgba(51,112,255,0.97); width:100%; height:100%; transition:0.5s; color:#fff;}
#example .product .product_img .product_position .p1{ margin:40px 40px 20px 40px;}
#example .product .product_img .product_position .p2{ font-size:12px; margin:0px 40px 40px 40px; line-height:200%;}
#example .product .product_description{ line-height:200%;}
#example .product .product_description a{color:#5a5a5a; font-size:14px;}
#example .more{ margin:50px 0px 30px; text-align:center;}
#example .more a{ color:#fff; background:#3370ff; border-radius:5px; padding:10px 60px; font-size:14px;}
#example .product .product_img:hover .product_position{ top:0px;}
#example .product_description a:hover{ color:#3370ff;}
#example .more a:hover{ background:#4E83FD;}

#news{ background:url(../img/news_bg.jpg) no-repeat; background-size:cover; padding:40px 0px;}
#news .title{ text-align:center; color:#383838; font-weight:600; line-height:200%; font-size:32px;}
#news .product_type{ text-align:center; margin:20px 0px 50px;}
#news .product_type a{ font-size:14px; padding:10px 40px; margin:0px -3px; color:#888;}
#news .left{ float:left; width:36%;}
#news .left img{ width:100%; height:320px; margin-bottom:10px;}
#news .left .p1{ color:#5a5a5a; font-size:14px; line-height:200%;}
#news .left .p2{ color:#929292; font-size:12px; line-height:200%;}
#news .left .p3{ color:#999; font-size:12px; line-height:200%; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#news .right{ float:right; width:60%;}
#news .right .news{ list-style:none; margin-bottom:18px; border-bottom:1px solid #dbdbdb; padding-bottom:15px;}
#news .right .news img{ float:left; margin-right:15px; width:180px; height:120px;}
#news .right .news .p1{ color:#5a5a5a; font-size:14px; line-height:200%;}
#news .right .news .p2{ color:#929292; font-size:12px; line-height:200%;}
#news .right .news .p3{ color:#999; font-size:12px; line-height:200%; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#news .more{ margin:60px 0px 30px; text-align:center;}
#news .more a{ color:#fff; background:#3370ff; border-radius:5px; padding:10px 60px; font-size:14px;}
#news .product_type a:hover{ color:#fff; background-color:#4e83fd; }

#links{ padding:40px 0px;}
#links #list table tr td{ padding:0px 20px;}
#links #list table tr td img{ width:150px; height:100px; object-fit:contain;}
#links #list table tr td p{ text-align:center; color:#666; font-size:14px; line-height:200%;}



@media screen and (max-width: 980px) {

#about .left{ display:none;}
#about .right{ width:100%; margin:0 auto; float:none;}
#about .right .p1{ border-left:3px solid #3370ff; padding-left:20px;}
#about .right .p2{ margin:10px 0px;}
#about .right .p3:after{ display:block; content:''; background:url(../img/about.jpg) center no-repeat; height:260px; width:100%; background-size:cover; margin:10px 0px;}
#about .right .p4{ font-family:'宋体'; font-weight:600; font-size:10px;}
#about .more{ font-size:12px;}
#youshi .product{ width:calc(100% - 40px); margin:10px 0px; background:#fff; padding:20px;}
#youshi .product img{ width:40%; height:220px; float:left; margin-right:20px; object-fit:cover; object-position:0 25%;}
#youshi .product .product_title{ position:inherit; color:#5a5a5a; text-align:left; font-size:22px; margin-bottom:10px;}
#youshi .product .product_position{ position:inherit; background:none; height:auto;}
#youshi .product .product_position p{ color:#5a5a5a; margin:0px; font-size:16px;}
#index_show .index_show_position{ float:left; width:700px;}
#index_show .more{ font-size:18px;}
#example .product{ width:calc(100% / 2 - 30px);}
#example .product .product_description{ text-align:center;}
#example .product .product_description a{ font-size:22px; line-height:200%;}
#example .more a{ font-size:12px;}
#news .product_type a{ color:#5a5a5a; background:#fff; margin:0px 5px; font-size:18px;}
#news .left{ width:100%; margin-bottom:20px;}
#news .left img{ height:500px;}
#news .left .p1{ font-size:22px;}
#news .left .p2{ font-size:18px;}
#news .left .p3{ font-size:18px;}
#news .right{ width:100%;}
#news .right .news img{ width:300px; height:180px;}
#news .right .news .p1{ font-size:22px;}
#news .right .news .p2{ font-size:18px;}
#news .right .news .p3{ font-size:18px;}
#links #list table tr td p{ font-size:20px;}

}