小米首页
效果图
html代码
由于代码过多，上传困难。请访问链接：https://share.weiyun.com/5BWIENo小米商城源文件里面附带完整的源码文件
css代码
*{margin: 0;padding: 0;}ul,ol,li{ list-style: none;}img{ display: block;width: 100%;}a{ text-decoration: none;}h1,h2,h3,h4{ font-size:16px;}body{ font-size:14px; color:#000000; font-family: 宋体 , 微软雅黑;}html, body{width:100%;}
/* css common */.l{ float:left;}.r{ float:right;}.clear:after{ content:""; display: block; clear:both;}.container{ width:1226px; margin:0 auto; position: relative;}.container-fluid{ position: relative;}
/* css flex-nav */
#flex-nav{width: 82px;height:560px;display: flex;flex-direction: column;position: fixed;right: 0;top:50%;transform: translateY(-50%);}#flex-nav div{height: 90px;background-color: white;display: flex;flex-direction: column;align-items: center;justify-content: center;border: 1px solid gainsboro;}#flex-nav div:last-of-type{margin-top: 20px;}#flex-nav a:first-of-type{font-size: 26px;color: grey;margin-bottom: 6px;}#flex-nav a:last-of-type{font-size: 14px;color: grey;}
/* css header */
#header{width: 100%;height: 120px;border-top: 1px solid white;background: linear-gradient(to right, #fea604 , #ffc83b);}#header h1{font-size: 54px;color: white;text-align: center;line-height: 120px;}
/* css nav */
#nav{height: 40px;background: #333333;}#nav .nav-list{}#nav .nav-list ul{float: left;display: flex;width: 698px;justify-content: space-between;height: 40px;text-align: center;align-items: center;}#nav .nav-list ul li{flex-grow: 1;font-size: 12px;}#nav .nav-list ul li:not(:last-of-type){border-right: 1px solid #a09e8f;}#nav .nav-list ul li a{color: #a09e8f;}#nav .nav-list ol{float: right;width: 280px;height: 40px;display: flex;text-align: center;align-items: center;}#nav .nav-list ol li{font-size: 12px;}#nav .nav-list ol li:nth-of-type(1){border-right: 1px solid #a09e8f;}#nav .nav-list ol li:nth-of-type(2){border-right: 1px solid #a09e8f;}#nav .nav-list ol li:not(:last-of-type){flex-grow: 1;}#nav .nav-list ol li:last-of-type{width: 120px;height: 40px;line-height: 40px;background: #424242;}#nav .nav-list ol li:last-of-type i{margin-right: 4px;}#nav .nav-list ol li a{color: #a09e8f;}
/* css mainbav */
#mainbav{height: 100px;display: flex;justify-content: space-between;align-items: center;}#mainbav .mainbav-logo{}#mainbav .mainbav-logo img{}#mainbav .mainbav-list{width: 600px;display: flex;}#mainbav .mainbav-list li{flex-grow: 1;text-align: center;}#mainbav .mainbav-list li a{color: #52323f;}#mainbav .mainbav-sousuo{width: 296px;height: 50px;border: 1px solid gainsboro;display: flex; position: relative;}/* #logo .logo-search{ margin-top:15px; width:294px; height:48px; border:1px #e0e0e0 solid; display: flex; position: relative;} */#mainbav .mainbav-sousuo input{ flex:1; border:none; outline: none; font-size:18px; text-indent: 5px;}#mainbav .mainbav-sousuo .mainbav-sousuo-btn{ width:50px; height:48px; text-align: center; line-height: 48px; border-left:1px #e0e0e0 solid;}#mainbav .mainbav-sousuo .mainbav-sousuo-btn i{font-size: 26px;}#mainbav .mainbav-sousuo .mainbav-sousuo-tip{ position: absolute; left:50px; top:15px;}#mainbav .mainbav-sousuo-tip a{ background:#ccc; padding:3px 4px;color: gray;}
/* css banner */
#banner{height: 460px;overflow: hidden;position: relative;}#banner .banner-pic{}#banner .banner-list{width: 235px;position: absolute;left: 0;top: 0;height: 100%; background: rgba(0,0,0,.5);display: flex;flex-direction: column;justify-content: center;cursor: pointer;}#banner .banner-list li{color: white;padding-left: 30px; line-height: 42px;height: 42px;}#banner .banner-list li span{float: right;margin-right: 25px;}#banner .banner-list li div{background: white;position: absolute;top: 0;left: 235px;z-index: 1; /* width: auto; */width: 991px; height: 460px;display: none;}#banner .banner-list li:nth-of-type(1) div{background-color: red;}#banner .banner-list li:nth-of-type(2) div{}#banner .banner-list li:nth-of-type(3) div{background-color: blue;}#banner .banner-list li:nth-of-type(4) div{}#banner .banner-list li:nth-of-type(5) div{background-color: chartreuse;}#banner .banner-list li:nth-of-type(6) div{}#banner .banner-list li:nth-of-type(7) div{background-color: rosybrown;}#banner .banner-list li:nth-of-type(8) div{}#banner .banner-list li:nth-of-type(9) div{background-color: orange;}#banner .banner-list li:nth-of-type(10) div{}#banner .banner-list li:hover div{display: block;}#banner .banner-list li:hover {background-color: orangered;}#banner .banner-left-btn , #banner .banner-right-btn{ width:38px; height:38px; position: absolute; top:50%; text-align: center; line-height: 38px;}#banner .banner-left-btn i , #banner .banner-right-btn i{ font-size:30px; color:gray;}#banner .banner-left-btn{ left:234px;}#banner .banner-right-btn{ right:0; }#banner .banner-dot{ position: absolute; bottom:10px; right:10px;}#banner .banner-dot li{ float:left; width:10px; height:10px; background:white; border-radius: 50%; margin:5px 3px;}#banner .banner-dot li.active{background-color: gray;}
/* css hot */
#hot{margin-top: 14px; display: flex;justify-content: space-between;}#hot .hot-infer{width: 234px;background-color: #605750; display: grid;grid-template-columns: 3;grid-template-rows: 2;grid-template:"a1 a2 a3""a4 a5 a6";align-items: center;justify-items: center;}#hot .hot-infer div{display: flex;flex-direction: column;align-items: center;}#hot .hot-infer div:nth-of-type(1){grid-area: a1;}#hot .hot-infer div:nth-of-type(2){grid-area: a2;}#hot .hot-infer div:nth-of-type(3){grid-area: a3;}#hot .hot-infer div:nth-of-type(4){grid-area: a4;}#hot .hot-infer div:nth-of-type(5){grid-area: a5;}#hot .hot-infer div:nth-of-type(6){grid-area: a6;}#hot .hot-infer div a{color: #d1ccd2;}#hot .hot-infer div i{font-size:22px; display: block;color: white;margin-bottom: 4px;}#hot .hot-pic{width: 317px;}#hot .hot-pic img{width: 100%;}
/* css main main-case-1 */
#main{background-color: #f5f5f5;margin-top: 26px;}#main .main-case-1{}#main .main-case-1 .case-title{height: 62px;display: flex;justify-content: space-between;align-items: center;}#main .main-case-1 .case-title h3{font-size: 22px;}#main .main-case-1 .case-title a{}#main .main-case-1 .case-title div a{align-self: flex-end; padding:5px 12px; border:1px #ccc solid;}
#main .main-case-1 .case-pic{width: 100%;display: flex;justify-content: space-between;}#main .main-case-1 .case-pic div{/* width: 234px; *//* float: left; */height: 340px;transition: .5s;}#main .main-case-1 .case-pic div:nth-of-type(1){}#main .main-case-1 .case-pic div:not(:first-of-type){background-color: white;}#main .main-case-1 .case-pic div:nth-of-type(2){border-top: 1px solid #ffac12;}#main .main-case-1 .case-pic div:nth-of-type(2) > a{display: block;margin: 50px 47px 44px 46px;width: 142px;}#main .main-case-1 .case-pic div:nth-of-type(2) ul{text-align: center;font-weight: bold;}#main .main-case-1 .case-pic div:nth-of-type(2) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-1 .case-pic div:nth-of-type(2) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-1 .case-pic div:nth-of-type(2) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 28px;}#main .main-case-1 .case-pic div:nth-of-type(2) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-1 .case-pic div:nth-of-type(3){border-top: 1px solid #84c34e;}#main .main-case-1 .case-pic div:nth-of-type(3) > a{display: block;margin: 50px 47px 44px 46px;width: 142px;}#main .main-case-1 .case-pic div:nth-of-type(3) ul{text-align: center;font-weight: bold;}#main .main-case-1 .case-pic div:nth-of-type(3) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-1 .case-pic div:nth-of-type(3) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-1 .case-pic div:nth-of-type(3) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 28px;}#main .main-case-1 .case-pic div:nth-of-type(3) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-1 .case-pic div:nth-of-type(4){border-top: 1px solid #2196f3;}#main .main-case-1 .case-pic div:nth-of-type(4) > a{display: block;margin: 50px 47px 44px 46px;width: 142px;}#main .main-case-1 .case-pic div:nth-of-type(4) ul{text-align: center;font-weight: bold;}#main .main-case-1 .case-pic div:nth-of-type(4) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-1 .case-pic div:nth-of-type(4) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-1 .case-pic div:nth-of-type(4) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 28px;}#main .main-case-1 .case-pic div:nth-of-type(4) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-1 .case-pic div:nth-of-type(5){border-top: 1px solid #e33a33;}#main .main-case-1 .case-pic div:nth-of-type(5) > a{display: block;margin: 50px 47px 44px 46px;width: 142px;}#main .main-case-1 .case-pic div:nth-of-type(5) ul{text-align: center;font-weight: bold;}#main .main-case-1 .case-pic div:nth-of-type(5) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-1 .case-pic div:nth-of-type(5) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-1 .case-pic div:nth-of-type(5) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 28px;}#main .main-case-1 .case-pic div:nth-of-type(5) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-1 .case-banner{margin: 22px 0;}#main .main-case-1 .case-banner img{width: 100%;}
#main .main-case-1 .case-pic div:hover { transform:translateY(-3px); box-shadow: 0 5px 5px 5px lightgray;}
/* css main main-case-2 */
#main .main-case-2{/* width: 1226px; */padding-bottom: 36px;}#main .main-case-2 .case-title{height: 58px;display: flex;justify-content: space-between;align-items: center;}#main .main-case-2 .case-title h3{font-size: 22px;}#main .main-case-2 .case-title a{color: black;font-size: 16px;}#main .main-case-2 .case-title span{ background:#b0b0b0; color:white; padding:3px; border-radius: 50%;margin-left: 4px;}
#main .main-case-2 .case-pic div{width: 234px;background-color: white;transition: .5s;}#main .main-case-2 .case-pic{ display: grid;grid-template-columns: 5;grid-template-rows: 2;justify-content: space-between; grid-template: "a1 a2 a3 a4 a5" "a1 a6 a7 a8 a9";}#main .main-case-2 .case-pic div:nth-of-type(1){grid-area: a1;width: 234px;overflow: hidden;}/* #main .main-case-2 .case-pic div:nth-of-type(1) a{width: 100%;display: block;}#main .main-case-2 .case-pic div:nth-of-type(1) a img{width: 100%;} */#main .main-case-2 .case-pic div:nth-of-type(2){grid-area: a2;margin-bottom: 14px;}#main .main-case-2 .case-pic div:nth-of-type(2) > a{margin-left: 45px;display: block;}#main .main-case-2 .case-pic div:nth-of-type(2) a img{width: 142px;height: 201px; display: block;text-align: center;}#main .main-case-2 .case-pic div:nth-of-type(2) ul{text-align: center;font-weight: bold;}#main .main-case-2 .case-pic div:nth-of-type(2) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-2 .case-pic div:nth-of-type(2) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 32px;}#main .main-case-2 .case-pic div:nth-of-type(2) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 26px;}
#main .main-case-2 .case-pic div:nth-of-type(3){grid-area: a3;margin-bottom: 14px;}#main .main-case-2 .case-pic div:nth-of-type(3) > a{margin-left: 45px;display: block;}#main .main-case-2 .case-pic div:nth-of-type(3) a img{width: 142px;height: 201px; display: block;text-align: center;}#main .main-case-2 .case-pic div:nth-of-type(3) ul{text-align: center;font-weight: bold;}#main .main-case-2 .case-pic div:nth-of-type(3) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-2 .case-pic div:nth-of-type(3) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 32px;}#main .main-case-2 .case-pic div:nth-of-type(3) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 26px;}
#main .main-case-2 .case-pic div:nth-of-type(4){grid-area: a4;margin-bottom: 14px;}#main .main-case-2 .case-pic div:nth-of-type(4) > a{margin-left: 45px;display: block;}#main .main-case-2 .case-pic div:nth-of-type(4) a img{width: 142px;height: 201px; display: block;text-align: center;}#main .main-case-2 .case-pic div:nth-of-type(4) ul{text-align: center;font-weight: }#main .main-case-2 .case-pic div:nth-of-type(4) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-2 .case-pic div:nth-of-type(4) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 32px;}#main .main-case-2 .case-pic div:nth-of-type(4) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 26px;}
#main .main-case-2 .case-pic div:nth-of-type(5){grid-area: a5;margin-bottom: 14px;}#main .main-case-2 .case-pic div:nth-of-type(5) > a{margin-left: 45px;display: block;}#main .main-case-2 .case-pic div:nth-of-type(5) a img{width: 142px;height: 201px; display: block;text-align: center;}#main .main-case-2 .case-pic div:nth-of-type(5) ul{text-align: center;font-weight: bold;}#main .main-case-2 .case-pic div:nth-of-type(5) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-2 .case-pic div:nth-of-type(5) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 32px;}#main .main-case-2 .case-pic div:nth-of-type(5) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 26px;}
#main .main-case-2 .case-pic div:nth-of-type(6){grid-area: a6;}#main .main-case-2 .case-pic div:nth-of-type(6) > a{margin-left: 45px;display: block;}#main .main-case-2 .case-pic div:nth-of-type(6) a img{width: 142px;height: 201px; display: block;text-align: center;}#main .main-case-2 .case-pic div:nth-of-type(6) ul{text-align: center;font-weight: bold;}#main .main-case-2 .case-pic div:nth-of-type(6) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-2 .case-pic div:nth-of-type(6) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 32px;}#main .main-case-2 .case-pic div:nth-of-type(6) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 26px;}
#main .main-case-2 .case-pic div:nth-of-type(7){grid-area: a7;}#main .main-case-2 .case-pic div:nth-of-type(7) > a{margin-left: 45px;display: block;}#main .main-case-2 .case-pic div:nth-of-type(7) a img{width: 142px;height: 201px; display: block;text-align: center;}#main .main-case-2 .case-pic div:nth-of-type(7) ul{text-align: center;font-weight: bold;}#main .main-case-2 .case-pic div:nth-of-type(7) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-2 .case-pic div:nth-of-type(7) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 32px;}#main .main-case-2 .case-pic div:nth-of-type(7) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 26px;}
#main .main-case-2 .case-pic div:nth-of-type(8){grid-area: a8;}#main .main-case-2 .case-pic div:nth-of-type(8) > a{margin-left: 45px;display: block;}#main .main-case-2 .case-pic div:nth-of-type(8) a img{width: 142px;height: 201px; display: block;text-align: center;}#main .main-case-2 .case-pic div:nth-of-type(8) ul{text-align: center;font-weight: bold;}#main .main-case-2 .case-pic div:nth-of-type(8) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-2 .case-pic div:nth-of-type(8) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 32px;}#main .main-case-2 .case-pic div:nth-of-type(8) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 26px;}
#main .main-case-2 .case-pic div:nth-of-type(9){grid-area: a9;}#main .main-case-2 .case-pic div:nth-of-type(9) > a{margin-left: 45px;display: block;}#main .main-case-2 .case-pic div:nth-of-type(9) a img{width: 142px;height: 201px; display: block;text-align: center;}#main .main-case-2 .case-pic div:nth-of-type(9) ul{text-align: center;font-weight: bold;}#main .main-case-2 .case-pic div:nth-of-type(9) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-2 .case-pic div:nth-of-type(9) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 32px;}#main .main-case-2 .case-pic div:nth-of-type(9) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 26px;}
#main .main-case-2 .case-banner{margin-top: 36px;}#main .main-case-2 .case-banner img{width: 100%;}
#main .main-case-2 .case-pic div:hover { transform:translateY(-3px); box-shadow: 0 5px 5px 5px lightgray;}
/* css main main-case-3 */
#main .main-case-3{padding-bottom: 36px;}#main .main-case-3 .case-title{height: 58px;display: flex;justify-content: space-between;align-items: center;}#main .main-case-3 .case-title h3{font-size: 22px;}#main .main-case-3 .case-title a{color: black;font-size: 16px;}#main .main-case-3 .case-title a:nth-of-type(1){color:orange;text-decoration: underline orange;margin-right: 20px;}#main .main-case-3 .case-title a:nth-of-type(2){}
#main .main-case-3 .case-pic div{background-color: white;width: 234px;transition: .5s;}#main .main-case-3 .case-pic{ display: grid;grid-template-columns: 5;grid-template-rows: 4;justify-content: space-between; grid-template: "a1 a2 a3 a4 a5" "a1 a2 a3 a4 a5" "a6 a7 a8 a9 a10" "a6 a7 a8 a9 a11";}#main .main-case-3 .case-pic div:nth-of-type(1){grid-area: a1;margin-bottom: 14px;}#main .main-case-3 .case-pic div:nth-of-type(1) a img{height: 100%;}#main .main-case-3 .case-pic div:nth-of-type(2){grid-area: a6;}#main .main-case-3 .case-pic div:nth-of-type(3){grid-area: a2;margin-bottom: 14px;}#main .main-case-3 .case-pic div:nth-of-type(3) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-3 .case-pic div:nth-of-type(3) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-3 .case-pic div:nth-of-type(3) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-3 .case-pic div:nth-of-type(3) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-3 .case-pic div:nth-of-type(3) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-3 .case-pic div:nth-of-type(3) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-3 .case-pic div:nth-of-type(4){grid-area: a3;margin-bottom: 14px;}#main .main-case-3 .case-pic div:nth-of-type(4) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-3 .case-pic div:nth-of-type(4) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-3 .case-pic div:nth-of-type(4) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-3 .case-pic div:nth-of-type(4) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-3 .case-pic div:nth-of-type(4) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-3 .case-pic div:nth-of-type(4) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-3 .case-pic div:nth-of-type(5){grid-area: a4;margin-bottom: 14px;}#main .main-case-3 .case-pic div:nth-of-type(5) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-3 .case-pic div:nth-of-type(5) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-3 .case-pic div:nth-of-type(5) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-3 .case-pic div:nth-of-type(5) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-3 .case-pic div:nth-of-type(5) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-3 .case-pic div:nth-of-type(5) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-3 .case-pic div:nth-of-type(6){grid-area: a5;margin-bottom: 14px;}#main .main-case-3 .case-pic div:nth-of-type(6) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-3 .case-pic div:nth-of-type(6) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-3 .case-pic div:nth-of-type(6) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-3 .case-pic div:nth-of-type(6) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-3 .case-pic div:nth-of-type(6) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-3 .case-pic div:nth-of-type(6) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-3 .case-pic div:nth-of-type(7){grid-area: a7;}#main .main-case-3 .case-pic div:nth-of-type(7) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-3 .case-pic div:nth-of-type(7) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-3 .case-pic div:nth-of-type(7) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-3 .case-pic div:nth-of-type(7) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-3 .case-pic div:nth-of-type(7) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-3 .case-pic div:nth-of-type(7) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-3 .case-pic div:nth-of-type(8){grid-area: a8;}#main .main-case-3 .case-pic div:nth-of-type(8) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-3 .case-pic div:nth-of-type(8) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-3 .case-pic div:nth-of-type(8) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-3 .case-pic div:nth-of-type(8) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-3 .case-pic div:nth-of-type(8) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-3 .case-pic div:nth-of-type(8) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-3 .case-pic div:nth-of-type(9){grid-area: a9;}#main .main-case-3 .case-pic div:nth-of-type(9) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-3 .case-pic div:nth-of-type(9) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-3 .case-pic div:nth-of-type(9) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-3 .case-pic div:nth-of-type(9) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-3 .case-pic div:nth-of-type(9) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-3 .case-pic div:nth-of-type(9) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-3 .case-pic div:nth-of-type(10){grid-area: a10;clear: both;padding: 33px 0 32px 0;margin-bottom: 14px;}#main .main-case-3 .case-pic div:nth-of-type(10) ul{float: left;margin-left: 29px;}#main .main-case-3 .case-pic div:nth-of-type(10) ul li:first-of-type a{color: black;font-size: 12px;line-height: 20px;}#main .main-case-3 .case-pic div:nth-of-type(10) ul li:last-of-type a{color: orangered;font-size: 12px;line-height: 29px;}#main .main-case-3 .case-pic div:nth-of-type(10) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-3 .case-pic div:nth-of-type(11){grid-area: a11;height: 143px;display: flex;}#main .main-case-3 .case-pic div:nth-of-type(11) ul{text-align: left;margin-left: 29px;align-self: center;}#main .main-case-3 .case-pic div:nth-of-type(11) ul li:first-of-type a{color: black;font-size: 18px;}#main .main-case-3 .case-pic div:nth-of-type(11) ul li:last-of-type a{color: orangered;font-size: 12px;}#main .main-case-3 .case-pic div:nth-of-type(11) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-3 .case-banner img{width: 100%;}#main .main-case-3 .case-banner{margin-top: 36px;}
#main .main-case-3 .case-pic div:hover { transform:translateY(-3px); box-shadow: 0 5px 4px 4px lightgray;}
/* css main-case-4 */
#main .main-case-4{padding-bottom: 36px;}#main .main-case-4 .case-title{height: 58px;display: flex;justify-content: space-between;align-items: center;}#main .main-case-4 .case-title h3{font-size: 22px;}#main .main-case-4 .case-title a{color: black;font-size: 16px;}#main .main-case-4 .case-title a:nth-of-type(1){color:orange;text-decoration: underline orange;margin-right: 20px;}#main .main-case-4 .case-title a:nth-of-type(2){margin-right: 20px;}
#main .main-case-4 .case-pic div{background-color: white;width: 234px;transition: .5s;}#main .main-case-4 .case-pic{ display: grid;grid-template-columns: 5;grid-template-rows: 4;justify-content: space-between; grid-template: "a1 a2 a3 a4 a5" "a1 a2 a3 a4 a5" "a6 a7 a8 a9 a10" "a6 a7 a8 a9 a11";}#main .main-case-4 .case-pic div:nth-of-type(1){grid-area: a1;margin-bottom: 14px;}#main .main-case-4 .case-pic div:nth-of-type(1) a img{height: 100%;}#main .main-case-4 .case-pic div:nth-of-type(2){grid-area: a6;}#main .main-case-4 .case-pic div:nth-of-type(3){grid-area: a2;margin-bottom: 14px;}#main .main-case-4 .case-pic div:nth-of-type(3) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-4 .case-pic div:nth-of-type(3) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-4 .case-pic div:nth-of-type(3) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-4 .case-pic div:nth-of-type(3) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-4 .case-pic div:nth-of-type(3) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-4 .case-pic div:nth-of-type(3) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-4 .case-pic div:nth-of-type(4){grid-area: a3;margin-bottom: 14px;}#main .main-case-4 .case-pic div:nth-of-type(4) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-4 .case-pic div:nth-of-type(4) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-4 .case-pic div:nth-of-type(4) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-4 .case-pic div:nth-of-type(4) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-4 .case-pic div:nth-of-type(4) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-4 .case-pic div:nth-of-type(4) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-4 .case-pic div:nth-of-type(5){grid-area: a4;margin-bottom: 14px;}#main .main-case-4 .case-pic div:nth-of-type(5) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-4 .case-pic div:nth-of-type(5) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-4 .case-pic div:nth-of-type(5) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-4 .case-pic div:nth-of-type(5) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-4 .case-pic div:nth-of-type(5) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-4 .case-pic div:nth-of-type(5) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-4 .case-pic div:nth-of-type(6){grid-area: a5;margin-bottom: 14px;}#main .main-case-4 .case-pic div:nth-of-type(6) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-4 .case-pic div:nth-of-type(6) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-4 .case-pic div:nth-of-type(6) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-4 .case-pic div:nth-of-type(6) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-4 .case-pic div:nth-of-type(6) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-4 .case-pic div:nth-of-type(6) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-4 .case-pic div:nth-of-type(7){grid-area: a7;}#main .main-case-4 .case-pic div:nth-of-type(7) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-4 .case-pic div:nth-of-type(7) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-4 .case-pic div:nth-of-type(7) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-4 .case-pic div:nth-of-type(7) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-4 .case-pic div:nth-of-type(7) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-4 .case-pic div:nth-of-type(7) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-4 .case-pic div:nth-of-type(8){grid-area: a8;}#main .main-case-4 .case-pic div:nth-of-type(8) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-4 .case-pic div:nth-of-type(8) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-4 .case-pic div:nth-of-type(8) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-4 .case-pic div:nth-of-type(8) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-4 .case-pic div:nth-of-type(8) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-4 .case-pic div:nth-of-type(8) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-4 .case-pic div:nth-of-type(9){grid-area: a9;}#main .main-case-4 .case-pic div:nth-of-type(9) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-4 .case-pic div:nth-of-type(9) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-4 .case-pic div:nth-of-type(9) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-4 .case-pic div:nth-of-type(9) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-4 .case-pic div:nth-of-type(9) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-4 .case-pic div:nth-of-type(9) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-4 .case-pic div:nth-of-type(10){grid-area: a10;clear: both;padding: 33px 0 32px 0;margin-bottom: 14px;}#main .main-case-4 .case-pic div:nth-of-type(10) ul{float: left;margin-left: 29px;}#main .main-case-4 .case-pic div:nth-of-type(10) ul li:first-of-type a{color: black;font-size: 12px;line-height: 20px;}#main .main-case-4 .case-pic div:nth-of-type(10) ul li:last-of-type a{color: orangered;font-size: 12px;line-height: 29px;}#main .main-case-4 .case-pic div:nth-of-type(10) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-4 .case-pic div:nth-of-type(11){grid-area: a11;height: 143px;display: flex;}#main .main-case-4 .case-pic div:nth-of-type(11) ul{text-align: left;margin-left: 29px;align-self: center;}#main .main-case-4 .case-pic div:nth-of-type(11) ul li:first-of-type a{color: black;font-size: 18px;}#main .main-case-4 .case-pic div:nth-of-type(11) ul li:last-of-type a{color: orangered;font-size: 12px;}#main .main-case-4 .case-pic div:nth-of-type(11) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-4 .case-banner img{width: 100%;}#main .main-case-4 .case-banner{margin-top: 36px;}
#main .main-case-4 .case-pic div:hover { transform:translateY(-3px); box-shadow: 0 5px 5px 5px lightgray;}
/* css main-case-5 */
#main .main-case-5{padding-bottom: 36px;}#main .main-case-5 .case-title{height: 58px;display: flex;justify-content: space-between;align-items: center;}#main .main-case-5 .case-title h3{font-size: 22px;}#main .main-case-5 .case-title a{color: black;font-size: 16px;}#main .main-case-5 .case-title a:nth-of-type(1){color:orange;text-decoration: underline orange;margin-right: 20px;}#main .main-case-5 .case-title a:nth-of-type(2){/* margin-right: 20px; */}
#main .main-case-5 .case-pic div{background-color: white;width: 234px;transition: .5s;}#main .main-case-5 .case-pic{ display: grid;grid-template-columns: 5;grid-template-rows: 4;justify-content: space-between; grid-template: "a1 a2 a3 a4 a5" "a1 a2 a3 a4 a5" "a6 a7 a8 a9 a10" "a6 a7 a8 a9 a11";}#main .main-case-5 .case-pic div:nth-of-type(1){grid-area: a1;margin-bottom: 14px;}#main .main-case-5 .case-pic div:nth-of-type(1) a img{height: 100%;}#main .main-case-5 .case-pic div:nth-of-type(2){grid-area: a6;}#main .main-case-5 .case-pic div:nth-of-type(3){grid-area: a2;margin-bottom: 14px;}#main .main-case-5 .case-pic div:nth-of-type(3) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-5 .case-pic div:nth-of-type(3) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-5 .case-pic div:nth-of-type(3) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-5 .case-pic div:nth-of-type(3) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-5 .case-pic div:nth-of-type(3) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-5 .case-pic div:nth-of-type(3) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}#main .main-case-5 .case-pic div:nth-of-type(4){grid-area: a3;margin-bottom: 14px;}#main .main-case-5 .case-pic div:nth-of-type(4) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-5 .case-pic div:nth-of-type(4) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-5 .case-pic div:nth-of-type(4) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-5 .case-pic div:nth-of-type(4) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-5 .case-pic div:nth-of-type(4) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-5 .case-pic div:nth-of-type(4) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-5 .case-pic div:nth-of-type(5){grid-area: a4;margin-bottom: 14px;}#main .main-case-5 .case-pic div:nth-of-type(5) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-5 .case-pic div:nth-of-type(5) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-5 .case-pic div:nth-of-type(5) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-5 .case-pic div:nth-of-type(5) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-5 .case-pic div:nth-of-type(5) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-5 .case-pic div:nth-of-type(5) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-5 .case-pic div:nth-of-type(6){grid-area: a5;margin-bottom: 14px;}#main .main-case-5 .case-pic div:nth-of-type(6) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-5 .case-pic div:nth-of-type(6) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-5 .case-pic div:nth-of-type(6) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-5 .case-pic div:nth-of-type(6) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-5 .case-pic div:nth-of-type(6) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-5 .case-pic div:nth-of-type(6) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}#main .main-case-5 .case-pic div:nth-of-type(7){grid-area: a7;}#main .main-case-5 .case-pic div:nth-of-type(7) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-5 .case-pic div:nth-of-type(7) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-5 .case-pic div:nth-of-type(7) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-5 .case-pic div:nth-of-type(7) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-5 .case-pic div:nth-of-type(7) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-5 .case-pic div:nth-of-type(7) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-5 .case-pic div:nth-of-type(8){grid-area: a8;}#main .main-case-5 .case-pic div:nth-of-type(8) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-5 .case-pic div:nth-of-type(8) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-5 .case-pic div:nth-of-type(8) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-5 .case-pic div:nth-of-type(8) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-5 .case-pic div:nth-of-type(8) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-5 .case-pic div:nth-of-type(8) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-5 .case-pic div:nth-of-type(9){grid-area: a9;}#main .main-case-5 .case-pic div:nth-of-type(9) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-5 .case-pic div:nth-of-type(9) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-5 .case-pic div:nth-of-type(9) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-5 .case-pic div:nth-of-type(9) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-5 .case-pic div:nth-of-type(9) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-5 .case-pic div:nth-of-type(9) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-5 .case-pic div:nth-of-type(10){grid-area: a10;clear: both;padding: 33px 0 32px 0;margin-bottom: 14px;}#main .main-case-5 .case-pic div:nth-of-type(10) ul{float: left;margin-left: 29px;}#main .main-case-5 .case-pic div:nth-of-type(10) ul li:first-of-type a{color: black;font-size: 12px;line-height: 20px;}#main .main-case-5 .case-pic div:nth-of-type(10) ul li:last-of-type a{color: orangered;font-size: 12px;line-height: 29px;}#main .main-case-5 .case-pic div:nth-of-type(10) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-5 .case-pic div:nth-of-type(11){grid-area: a11;height: 143px;display: flex;}#main .main-case-5 .case-pic div:nth-of-type(11) ul{text-align: left;margin-left: 29px;align-self: center;}#main .main-case-5 .case-pic div:nth-of-type(11) ul li:first-of-type a{color: black;font-size: 18px;}#main .main-case-5 .case-pic div:nth-of-type(11) ul li:last-of-type a{color: orangered;font-size: 12px;}#main .main-case-5 .case-pic div:nth-of-type(11) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-5 .case-pic div:nth-of-type(10){grid-area: a10;clear: both;padding: 33px 0 32px 0;margin-bottom: 14px;}#main .main-case-5 .case-pic div:nth-of-type(10) ul{float: left;margin-left: 29px;padding-top: 10px;}#main .main-case-5 .case-pic div:nth-of-type(10) ul li:first-of-type a{color: black;font-size: 12px;line-height: 20px;}#main .main-case-5 .case-pic div:nth-of-type(10) ul li:last-of-type a{color: orangered;font-size: 12px;line-height: 29px;}#main .main-case-5 .case-pic div:nth-of-type(10) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-5 .case-pic div:nth-of-type(11){grid-area: a11;height: 143px;display: flex;}#main .main-case-5 .case-pic div:nth-of-type(11) ul{text-align: left;margin-left: 29px;align-self: center;}#main .main-case-5 .case-pic div:nth-of-type(11) ul li:first-of-type a{color: black;font-size: 18px;}#main .main-case-5 .case-pic div:nth-of-type(11) ul li:last-of-type a{color: orangered;font-size: 12px;}#main .main-case-5 .case-pic div:nth-of-type(11) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-5 .case-banner img{width: 100%;}#main .main-case-5 .case-banner{margin-top: 36px;}
#main .main-case-5 .case-pic div:hover { transform:translateY(-3px); box-shadow: 0 5px 5px 5px lightgray;}
/* css main-case-5 */
#main .main-case-6{padding-bottom: 36px;}#main .main-case-6 .case-title{height: 58px;display: flex;justify-content: space-between;align-items: center;}#main .main-case-6 .case-title h3{font-size: 22px;}#main .main-case-6 .case-title a{color: black;font-size: 16px;}#main .main-case-6 .case-title a:nth-of-type(1){color:orange;text-decoration: underline orange;margin-right: 20px;}#main .main-case-6 .case-title a:nth-of-type(2){margin-right: 20px;}
#main .main-case-6 .case-pic div{background-color: white;width: 234px;transition: .5s;}#main .main-case-6 .case-pic{ display: grid;grid-template-columns: 5;grid-template-rows: 4;justify-content: space-between; grid-template: "a1 a2 a3 a4 a5" "a1 a2 a3 a4 a5" "a6 a7 a8 a9 a10" "a6 a7 a8 a9 a11";}#main .main-case-6 .case-pic div:nth-of-type(1){grid-area: a1;margin-bottom: 14px;}#main .main-case-6 .case-pic div:nth-of-type(1) a img{height: 100%;}#main .main-case-6 .case-pic div:nth-of-type(2){grid-area: a6;}#main .main-case-6 .case-pic div:nth-of-type(3){grid-area: a2;margin-bottom: 14px;}#main .main-case-6 .case-pic div:nth-of-type(3) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-6 .case-pic div:nth-of-type(3) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-6 .case-pic div:nth-of-type(3) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-6 .case-pic div:nth-of-type(3) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-6 .case-pic div:nth-of-type(3) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-6 .case-pic div:nth-of-type(3) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-6 .case-pic div:nth-of-type(4){grid-area: a3;margin-bottom: 14px;}#main .main-case-6 .case-pic div:nth-of-type(4) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-6 .case-pic div:nth-of-type(4) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-6 .case-pic div:nth-of-type(4) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-6 .case-pic div:nth-of-type(4) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-6 .case-pic div:nth-of-type(4) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-6 .case-pic div:nth-of-type(4) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-6 .case-pic div:nth-of-type(5){grid-area: a4;margin-bottom: 14px;}#main .main-case-6 .case-pic div:nth-of-type(5) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-6 .case-pic div:nth-of-type(5) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-6 .case-pic div:nth-of-type(5) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-6 .case-pic div:nth-of-type(5) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-6 .case-pic div:nth-of-type(5) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-6 .case-pic div:nth-of-type(5) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-6 .case-pic div:nth-of-type(6){grid-area: a5;margin-bottom: 14px;}#main .main-case-6 .case-pic div:nth-of-type(6) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-6 .case-pic div:nth-of-type(6) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-6 .case-pic div:nth-of-type(6) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-6 .case-pic div:nth-of-type(6) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-6 .case-pic div:nth-of-type(6) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-6 .case-pic div:nth-of-type(6) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}#main .main-case-6 .case-pic div:nth-of-type(7){grid-area: a7;}#main .main-case-6 .case-pic div:nth-of-type(7) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-6 .case-pic div:nth-of-type(7) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-6 .case-pic div:nth-of-type(7) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-6 .case-pic div:nth-of-type(7) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-6 .case-pic div:nth-of-type(7) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-6 .case-pic div:nth-of-type(7) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-6 .case-pic div:nth-of-type(8){grid-area: a8;}#main .main-case-6 .case-pic div:nth-of-type(8) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-6 .case-pic div:nth-of-type(8) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-6 .case-pic div:nth-of-type(8) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-6 .case-pic div:nth-of-type(8) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-6 .case-pic div:nth-of-type(8) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-6 .case-pic div:nth-of-type(8) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-6 .case-pic div:nth-of-type(9){grid-area: a9;}#main .main-case-6 .case-pic div:nth-of-type(9) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-6 .case-pic div:nth-of-type(9) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-6 .case-pic div:nth-of-type(9) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-6 .case-pic div:nth-of-type(9) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-6 .case-pic div:nth-of-type(9) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-6 .case-pic div:nth-of-type(9) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-6 .case-pic div:nth-of-type(10){grid-area: a10;display: flex;height: 143px;}#main .main-case-6 .case-pic div:nth-of-type(10) ul{text-align: left;margin-left: 29px;align-self: center;}#main .main-case-6 .case-pic div:nth-of-type(10) ul li:first-of-type a{color: black;font-size: 18px;}#main .main-case-6 .case-pic div:nth-of-type(10) ul li:last-of-type a{color: orangered;font-size: 12px;}#main .main-case-6 .case-pic div:nth-of-type(10) > a{display: block;width: 78px;float: right;margin-right:22px;}
/* #main .main-case-6 .case-pic div:nth-of-type(11){grid-area: a11;display: flex;}#main .main-case-6 .case-pic div:nth-of-type(11) ul{text-align: left;margin-left: 29px;align-self: center;}#main .main-case-6 .case-pic div:nth-of-type(11) ul li:first-of-type a{color: black;font-size: 18px;}#main .main-case-6 .case-pic div:nth-of-type(11) ul li:last-of-type a{color: orangered;font-size: 12px;}#main .main-case-6 .case-pic div:nth-of-type(11) > a{display: block;width: 78px;float: right;margin-right:22px;} */
#main .main-case-6 .case-banner img{width: 100%;}#main .main-case-6 .case-banner{margin-top: 36px;}
#main .main-case-6 .case-pic div:hover { transform:translateY(-3px); box-shadow: 0 5px 5px 5px lightgray;}
/* css main-case-7 */
#main .main-case-7{padding-bottom: 36px;}#main .main-case-7 .case-title{height: 58px;display: flex;justify-content: space-between;align-items: center;}#main .main-case-7 .case-title h3{font-size: 22px;}#main .main-case-7 .case-title a{color: black;font-size: 16px;}#main .main-case-7 .case-title a:nth-of-type(1){color:orange;text-decoration: underline orange;margin-right: 20px;}#main .main-case-7 .case-title a:nth-of-type(2){/* margin-right: 20px; */}
#main .main-case-7 .case-pic div{background-color: white;width: 234px;transition: .5s;}#main .main-case-7 .case-pic{ display: grid;grid-template-columns: 5;grid-template-rows: 4;justify-content: space-between; grid-template: "a1 a2 a3 a4 a5" "a1 a2 a3 a4 a5" "a6 a7 a8 a9 a10" "a6 a7 a8 a9 a11";}#main .main-case-7 .case-pic div:nth-of-type(1){grid-area: a1;margin-bottom: 14px;}#main .main-case-7 .case-pic div:nth-of-type(1) a img{height: 100%;}#main .main-case-7 .case-pic div:nth-of-type(2){grid-area: a6;}#main .main-case-7 .case-pic div:nth-of-type(3){grid-area: a2;margin-bottom: 14px;}#main .main-case-7 .case-pic div:nth-of-type(3) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-7 .case-pic div:nth-of-type(3) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-7 .case-pic div:nth-of-type(3) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-7 .case-pic div:nth-of-type(3) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-7 .case-pic div:nth-of-type(3) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-7 .case-pic div:nth-of-type(3) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}#main .main-case-7 .case-pic div:nth-of-type(4){grid-area: a3;margin-bottom: 14px;}#main .main-case-7 .case-pic div:nth-of-type(4) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-7 .case-pic div:nth-of-type(4) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-7 .case-pic div:nth-of-type(4) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-7 .case-pic div:nth-of-type(4) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-7 .case-pic div:nth-of-type(4) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-7 .case-pic div:nth-of-type(4) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-7 .case-pic div:nth-of-type(5){grid-area: a4;margin-bottom: 14px;}#main .main-case-7 .case-pic div:nth-of-type(5) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-7 .case-pic div:nth-of-type(5) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-7 .case-pic div:nth-of-type(5) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-7 .case-pic div:nth-of-type(5) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-7 .case-pic div:nth-of-type(5) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-7 .case-pic div:nth-of-type(5) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-7 .case-pic div:nth-of-type(6){grid-area: a5;margin-bottom: 14px;}#main .main-case-7 .case-pic div:nth-of-type(6) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-7 .case-pic div:nth-of-type(6) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-7 .case-pic div:nth-of-type(6) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-7 .case-pic div:nth-of-type(6) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-7 .case-pic div:nth-of-type(6) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-7 .case-pic div:nth-of-type(6) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}#main .main-case-7 .case-pic div:nth-of-type(7){grid-area: a7;}#main .main-case-7 .case-pic div:nth-of-type(7) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-7 .case-pic div:nth-of-type(7) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-7 .case-pic div:nth-of-type(7) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-7 .case-pic div:nth-of-type(7) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-7 .case-pic div:nth-of-type(7) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-7 .case-pic div:nth-of-type(7) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-7 .case-pic div:nth-of-type(8){grid-area: a8;}#main .main-case-7 .case-pic div:nth-of-type(8) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-7 .case-pic div:nth-of-type(8) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-7 .case-pic div:nth-of-type(8) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-7 .case-pic div:nth-of-type(8) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-7 .case-pic div:nth-of-type(8) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-7 .case-pic div:nth-of-type(8) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-7 .case-pic div:nth-of-type(9){grid-area: a9;}#main .main-case-7 .case-pic div:nth-of-type(9) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-7 .case-pic div:nth-of-type(9) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-7 .case-pic div:nth-of-type(9) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-7 .case-pic div:nth-of-type(9) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-7 .case-pic div:nth-of-type(9) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-7 .case-pic div:nth-of-type(9) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-7 .case-pic div:nth-of-type(10){grid-area: a10;clear: both;padding: 33px 0 32px 0;margin-bottom: 14px;}#main .main-case-7 .case-pic div:nth-of-type(10) ul{float: left;margin-left: 29px;}#main .main-case-7 .case-pic div:nth-of-type(10) ul li:first-of-type a{color: black;font-size: 12px;line-height: 20px;}#main .main-case-7 .case-pic div:nth-of-type(10) ul li:last-of-type a{color: orangered;font-size: 12px;line-height: 29px;}#main .main-case-7 .case-pic div:nth-of-type(10) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-7 .case-pic div:nth-of-type(11){grid-area: a11;height: 143px;display: flex;}#main .main-case-7 .case-pic div:nth-of-type(11) ul{text-align: left;margin-left: 29px;align-self: center;}#main .main-case-7 .case-pic div:nth-of-type(11) ul li:first-of-type a{color: black;font-size: 18px;}#main .main-case-7 .case-pic div:nth-of-type(11) ul li:last-of-type a{color: orangered;font-size: 12px;}#main .main-case-7 .case-pic div:nth-of-type(11) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-7 .case-banner img{width: 100%;}#main .main-case-7 .case-banner{margin-top: 36px;}
#main .main-case-7 .case-pic div:hover { transform:translateY(-3px); box-shadow: 0 5px 5px 5px lightgray;}
/* css main-case-8 */
#main .main-case-8{/* width: 1226px; */}#main .main-case-8 .case-title{height: 58px;display: flex;justify-content: space-between;align-items: center;}#main .main-case-8 .case-title h3{font-size: 22px;}#main .main-case-8 .case-title a{color: black;font-size: 16px;}
#main .main-case-8 .case-pic{display: flex;justify-content: space-between;padding-bottom: 27px;}#main .main-case-8 .case-pic div{background-color: white;}#main .main-case-8 .case-pic div ul{height: 78px;text-align: center;}#main .main-case-8 .case-pic div ul a{line-height: 78px;display: block;color: black;font-weight: bold;font-size: 12px;}
/* css footer */
#footer{width: 100%;background-color: white;}#footer .footer-list{height: 80px;border-bottom: 1px solid #dfdfdf;}#footer .footer-list ul{display: flex;width: 100%;height: 80px;align-items: center;font-weight: bold;}#footer .footer-list ul li{flex-grow: 1;text-align: center;}#footer .footer-list ul li:not(:last-of-type){border-right: 1px solid #dfdfdf;}#footer .footer-list ul li a{font-size: 16px;color: #5f6269;}#footer .footer-list ul li a span{}
#footer .footer-infer{padding-top: 18px;display: flex;}#footer .footer-infer .footer-infer-one{}#footer .footer-infer .footer-infer-one dl{width: 160px;float: left;text-align: left;}#footer .footer-infer .footer-infer-one dl dt{font-size: 12px;color: #3d4641;line-height: 60px;font-weight: bold;}#footer .footer-infer .footer-infer-one dl dd{line-height: 28px;}#footer .footer-infer .footer-infer-one dl dd a{font-size: 12px;color: #6c6f76;}#footer .footer-infer .footer-infer-two{flex-grow: 1;margin-left: 15px;height: 114px;align-self: center;text-align: center;}#footer .footer-infer .footer-infer-two p{font-size: 24px;color: #ff6412;}#footer .footer-infer .footer-infer-two li{font-size: 12px;line-height: 20px;color: #636456;}#footer .footer-infer .footer-infer-two a{display: block;height: 28px;width: 118px;font-size: 12px;color: #fb6900;border: 1px solid #fb6900;line-height: 28px;margin: 15px auto 0 auto;}#footer .footer-infer .footer-infer-two a span{}
/* css logo-bottom */
#logo-bottom{height: 230px;background-color: #fafafa;overflow: hidden;position: relative;}#logo-bottom .logo-bottom-1{margin-top: 30px;display: flex;}#logo-bottom .logo-bottom-1 .logo{width: 57px;}#logo-bottom .logo-bottom-1 .list{width: 963px;margin-left: 10px;}#logo-bottom .logo-bottom-1 .list p{line-height: 18px;}
#logo-bottom .service{position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);margin-bottom: 30px;}#logo-bottom .service li{font-size: 20px;color: #bdbdbd;}
来源：CSDN
作者：王 濤
链接：https://blog.csdn.net/Anber_wang/article/details/104671186