/* ========== 鍘熸湁PC绔牱寮忥紙淇濈暀涓嶅彉锛� ========== */
.w1200{
	margin: 0 auto;
	width: 1200px;
}
html,body{
	width: 100%;
	min-width: 1200px; /* 鎵嬫満绔細瑕嗙洊姝ゅ睘鎬� */
}
#header{
	position: relative;
	height: 822px;
	background: url(/static/tf/images/banner.jpg) center 0 no-repeat;
}
#main{
	margin: 0 auto;
	width: 1200px;
}
.head{
	position: absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
}
.head-relative{
	position: relative;
}
.head span{
	display: inline-block;
	width: 204px;
	height: 74px;
	text-indent: -9999px;
	background: url(../images/head.jpg) no-repeat;
}
.load{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 164px;
	height: 44px;
	line-height: 44px;
	color: #fff;
	font-size: 22px;
	border-radius: 6px;
	text-align: center;
	background: #157fd5;
}
#desc{
	padding-bottom: 80px;
	font-size: 18px;
	line-height: 42px;
	color: #585858;
	text-indent: 2em;
	background: #f6f6f6;
}
.list-title{
	height: 76px;
	line-height: 76px;
	color: #fff;
	border-radius: 76px;
	background: #157fd5;
}
.list-title h2{
	font-weight: bold;
	padding-left: 110px;
	font-size: 40px;
	background: url(../images/list-title.png) 40px 20px no-repeat;
}
.list-title span{
	font-weight: bold;
	padding-left: 15px;
	font-size: 30px;
}
.list-title .more{
	padding-right: 40px;
	font-size: 12px;
	color: #fff;
}
.list{
	padding-top: 45px;
}
.list ul{
	margin-left: -12px;
	width: 1224px;
}
.list li{
	float: left;
	margin: 30px 12px 0px;
    width: 280px;
	padding-bottom: 20px;
}
.list-line li:nth-of-type(1), .list-line li:nth-of-type(2), .list-line li:nth-of-type(3), .list-line li:nth-of-type(4){
	border-bottom: 1px solid #f1f1f1;
}
.list-liwrap{
    border: 1px solid #dbdbdb;
}
.list a{
	color: #000;
}
.img_height{
    overflow: hidden;
    width: 278px;
    height: 180px;
    background-color: #f1f1f1;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.img_height img{
    padding: 5px 10px;
    max-width: 258px;
    max-height: 170px;
}
.img_chart{    
    width: 278px;
    overflow: hidden;
	line-height: 40px;
    height: 40px;    
    text-align: center;
    cursor:pointer;
    background-color: #f1f1f1;
}
#footer{
	margin-top: 50px;
	text-align: center;
	line-height: 32px;
	padding: 50px 0;
	color: #fff;
	background: #157fd5;
}
.list .list-page li{
	padding-bottom: 0;
}
#content{
	margin: 0 auto;
	padding-top: 20px;
	width: 1100px;
	line-height: 36px;
	color: #343434;
}
.content-img{
	padding: 50px 0 20px;
	text-align: center;
}
.content-img img{
	margin-bottom: 30px;
	max-width: 1100px;
}

/* ========== 鏂板鎵嬫満绔€傞厤鏍峰紡锛堟牳蹇冿級 ========== */
@media (max-width: 768px) {
    /* 1. 鍩虹閲嶇疆锛氬彇娑堟渶灏忓搴﹂檺鍒讹紝閫傞厤鎵嬫満灞忓箷 */
    html,body{
        min-width: unset; /* 瑕嗙洊PC绔殑min-width:1200px */
        width: 100%;
        overflow-x: hidden; /* 绂佹妯悜婊氬姩 */
    }

    /* 2. 瀹瑰櫒瀹藉害閫傞厤锛氭墍鏈夊浐瀹氬搴﹀鍣ㄦ敼涓�100%锛屼繚鐣欏唴杈硅窛 */
    .w1200, #main, #content{
        width: 100% !important; /* 寮哄埗瑕嗙洊鍘熸湁瀹藉害 */
        padding: 0 10px; /* 宸﹀彸鐣欒竟锛岄伩鍏嶅唴瀹硅创杈� */
        box-sizing: border-box; /* 鍐呰竟璺濅笉褰卞搷瀹藉害 */
    }

    /* 3. 澶撮儴閫傞厤锛氶檷浣庨珮搴︼紝浼樺寲鎸夐挳/鍥炬爣澶у皬 */
    #header{
        height: auto; /* 鍙栨秷鍥哄畾楂樺害锛岄€傞厤鎵嬫満 */
        min-height: 200px; /* 淇濊瘉鍩虹楂樺害 */
        background-size: cover; /* 鑳屾櫙鍥捐嚜閫傚簲灞忓箷 */
    }
    .head{
        bottom: 10px; /* 缂╁皬搴曢儴闂磋窛 */
    }
    .head span{
        width: 150px; /* 缂╁皬鍥炬爣瀹藉害 */
        height: 55px; /* 缂╁皬鍥炬爣楂樺害 */
        background-size: 100% 100%; /* 鑳屾櫙鍥鹃€傞厤缂╁皬鍚庣殑灏哄 */
    }
    .load{
        width: 120px; /* 缂╁皬鎸夐挳瀹藉害 */
        height: 38px; /* 缂╁皬鎸夐挳楂樺害 */
        line-height: 38px; /* 琛岄珮閫傞厤楂樺害 */
        font-size: 16px; /* 缂╁皬鎸夐挳瀛椾綋 */
        right: 10px; /* 鎸夐挳鍙崇Щ锛岄伩鍏嶈创杈� */
    }

    /* 4. 鎻忚堪鍖哄煙閫傞厤锛氱缉灏忓瓧浣撳拰琛岄珮 */
    #desc{
        padding-bottom: 40px; /* 缂╁皬搴曢儴闂磋窛 */
        font-size: 14px; /* 閫傞厤鎵嬫満瀛椾綋 */
        line-height: 30px; /* 浼樺寲琛岄珮锛屾彁鍗囧彲璇绘€� */
        text-indent: 1em; /* 缂╁皬棣栬缂╄繘 */
    }

    /* 5. 鍒楄〃鏍囬閫傞厤锛氱缉灏忛珮搴︺€佸瓧浣擄紝浼樺寲鑳屾櫙鍥炬爣 */
    .list-title{
        height: 50px; /* 缂╁皬鏍囬鏍忛珮搴� */
        line-height: 50px; /* 琛岄珮閫傞厤楂樺害 */
        border-radius: 25px; /* 鍦嗚閫傞厤楂樺害 */
    }
    .list-title h2{
        padding-left: 60px; /* 缂╁皬宸﹁竟璺� */
        font-size: 20px; /* 缂╁皬鏍囬瀛椾綋 */
        background-size: 30px auto; /* 鑳屾櫙鍥炬爣缂╁皬 */
        background-position: 20px center; /* 鍥炬爣浣嶇疆璋冩暣 */
    }
    .list-title span{
        padding-left: 10px; /* 缂╁皬闂磋窛 */
        font-size: 18px; /* 缂╁皬瀛椾綋 */
    }
    .list-title .more{
        padding-right: 20px; /* 缂╁皬鍙宠竟璺� */
        font-size: 12px; /* 淇濇寔灏忓瓧浣� */
    }

    /* 6. 鍒楄〃甯冨眬閫傞厤锛氫粠4鍒楁敼涓�1鍒楋紝浼樺寲闂磋窛 */
    .list{
        padding-top: 20px; /* 缂╁皬椤堕儴闂磋窛 */
    }
    .list ul{
        width: 100%; /* 鍒楄〃瀹藉害100% */
        margin-left: 0; /* 鍙栨秷宸﹀亸绉� */
        padding: 0 5px;
    }
    .list li{
        float: none; /* 鍙栨秷娴姩锛屾敼涓哄崟鍒� */
        width: 100% !important; /* 瀹藉害100% */
        margin: 15px 0 0 !important; /* 缂╁皬涓婁笅闂磋窛锛屽彇娑堝乏鍙抽棿璺� */
        padding-bottom: 15px;
    }
    /* 鍒楄〃椤瑰唴鍏冪礌閫傞厤 */
    .img_height{
        width: 100%; /* 鍥剧墖瀹瑰櫒瀹藉害100% */
        height: auto; /* 鍙栨秷鍥哄畾楂樺害 */
        min-height: 150px; /* 淇濊瘉鍥剧墖鍖哄煙楂樺害 */
        display: block; /* 鍙栨秷table-cell锛岄伩鍏嶅吋瀹归棶棰� */
    }
    .img_height img{
        max-width: 100%; /* 鍥剧墖鍏ㄥ睆鏄剧ず */
        max-height: unset; /* 鍙栨秷楂樺害闄愬埗 */
        padding: 5px;
    }
    .img_chart{
        width: 100%; /* 鍥捐〃瀹瑰櫒瀹藉害100% */
        line-height: 35px; /* 浼樺寲琛岄珮 */
        height: 35px; /* 缂╁皬楂樺害 */
        font-size: 14px;
    }

    /* 7. 鍐呭鍖哄煙閫傞厤锛氫紭鍖栧浘鐗囧拰琛岄珮 */
    #content{
        line-height: 30px; /* 缂╁皬琛岄珮 */
        padding-top: 15px;
    }
    .content-img{
        padding: 20px 0 10px; /* 缂╁皬涓婁笅闂磋窛 */
    }
    .content-img img{
        max-width: 100%; /* 鍥剧墖閫傞厤鎵嬫満瀹藉害 */
        margin-bottom: 15px; /* 缂╁皬鍥剧墖闂磋窛 */
    }

    /* 8. 搴曢儴閫傞厤锛氱缉灏忛棿璺� */
    #footer{
        margin-top: 30px;
        padding: 30px 10px; /* 缂╁皬涓婁笅鍐呰竟璺濓紝淇濈暀宸﹀彸杈硅窛 */
        line-height: 28px; /* 浼樺寲琛岄珮 */
        font-size: 14px;
    }
}