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

.mach_bg{ background-color: #f5f5f5; padding:80px 0px;}
.mach_bg .container_2{ max-width:1140px; margin:0px auto; padding-left:12px; padding-right:12px;}
.mach_bg .ma_title{ font-size:32px; text-align: center;font-weight: 600; margin-bottom:30px; line-height:1.2;}
.mach_bg .ma_list ul li{ display:flex; justify-content: space-between;align-items:flex-start;  border-bottom:1px rgb(34, 34, 34 ,0.25) solid; padding:20px 0px; }
.mach_bg .ma_list ul li .photo{ width:25%;}
.mach_bg .ma_list ul li .photo img{ width:100%; height:auto;}
.mach_bg .ma_list ul li .content{ width:68%;}
.mach_bg .ma_list ul li .content .title{ font-size:20px; margin-bottom:20px; font-weight:bold;display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;-webkit-text-overflow:ellipsis;}
.mach_bg .ma_list ul li .content .desc{ font-size:16px; display:-webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp:5;-webkit-box-orient:vertical; overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;}
.mach_bg .ma_list ul li .content .desc a{ color:#246fa8;}
.mach_bg .ma_list ul li .content .more{ margin-top:40px;}
.mach_bg .ma_list ul li .content .more a{  border: 1px solid #002E5B; background-color:#002E5B; color:#fff; font-size:14px; border-radius:8px; line-height:24px; padding:8px 16px;transition:all .5s;-webkit-transition:all .5s; white-space:nowrap; display: inline-block; width:auto; text-decoration:none;}
.mach_bg .ma_list ul li .content .more a:hover{ transform: scale(1.05); background-color:#fff; color:#002E5B;}
.mach_bg .ma_list ul li .content .more .fasicon{ width:24px; height:24px; line-height:24px;    display: block;
    position: relative;
    text-align: center;}
.mach_bg .ma_list ul li .content .more a .fasicon:before{ font-family: fontawesome;content: '\f105'; color:#fff; font-size:16px;}
.mach_bg .ma_list ul li .content .more a span{ display:inline-block; float:left;}
.mach_bg .ma_list ul li .content .more a:hover .fasicon:before{ color:#002E5B;}

.xf_frame{ background-color:#fff; max-width: 1140px;
    margin: 0px auto; width:100%; box-shadow: 0 7px 25px rgba(33, 37, 41, .1); position:fixed; left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%); bottom:48px;display: flex; border:1px rgb(222, 226, 230) solid;
    align-items: center; z-index:90; color:#000;}
.xf_frame.hide{ display:none;}
.xf_frame .content{ flex:1; padding:16px 24px; font-size:16px; line-height:24px;}
.xf_frame .tpright{display: flex;
    align-items: center;justify-content: flex-end; padding:0px 24px;flex-wrap: wrap; width:33.3%;}
.xf_frame .tpright .btn{ padding:8px 16px; border-radius:8px; color:#000; font-size:16px; line-height:24px; text-align:center; font-weight:bold; margin:0px;transition:all .5s;-webkit-transition:all .5s; white-space:nowrap; cursor:pointer; }
.xf_frame .tpright .btn:hover{ transform: scale(1.05); background-color:#000; color:#fff;}
.xf_frame .tpright .btn.active{background-color: #0095da;
    color: #fff;
    border: 1px solid #0095da; margin-left:8px;}
.xf_frame .tpright .btn.active:hover{background-color: #fff; color: #0095da;}

 @media screen and (max-width: 767px) {
	 .mach_bg .ma_title { font-size:22px; margin-bottom:20px;}
	 .mach_bg .ma_list ul li{ flex-direction: column;}
	 .mach_bg .ma_list ul li .photo{ width:100%; margin-bottom:15px;}
	 .mach_bg .ma_list ul li .content{ width:100%;}
	 .mach_bg .ma_list ul li .content .desc{ font-size:14px;}
	 .mach_bg .ma_list ul li .content .title{ font-size:18px; margin-bottom:15px;}
	 .mach_bg .ma_list ul li .content .more{ margin-top:20px;}
	 .mach_bg{ padding:50px 0px;}
	 
	 .xf_frame{flex-direction: column;}
	 .xf_frame .tpright{ padding:16px 24px; width:100%;}
 }