.bkbox.casebox { margin-top: 100px; } .secbar_case { text-align: center; } /* 妗堜緥鍒楄〃 */ a.caseli { display: block; width: 32%; height: 600px; background: #fff; margin-left: 2%; margin-bottom: 40px; overflow: hidden; float: left; } a.caseli.projli { height: 450px; margin-bottom: 60px; } .caseli:hover { -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); } .caseli:nth-child(3n+1) { margin-left: 0; } .caseli p { width: 100%; height: 360px; overflow: hidden; } .projli p { height: 330px; } .caseli span { display: block; text-align: center; line-height: 180%; height: auto; } .caseli span:nth-child(2) { margin: 60px 20px 15px 20px; font-size: 1.5rem; font-weight: bold; padding-bottom: 15px; position: relative; } .caseli span:nth-child(2)::after { content: ''; width: 30px; height: 1px; background: #666; position: absolute; left: 50%; margin-left: -15px; bottom: 0; } .caseli span:nth-child(3) { font-size: 1.1rem; margin: 0 20px; } .caseli.projli span:nth-child(2) { margin: 30px 20px; } /* 妗堜緥璇︽儏 */ .caset { height: auto; overflow: hidden; } .caset span { display: block; line-height: 180%; } .caset span:nth-child(1) { font-size: 2rem; font-weight: bold; margin-top: 30px; } .caset span:nth-child(2) { font-size: 1rem; color: #666; margin-top: 5px; } .dalislide.casep { margin-top: 10px; padding-bottom: 100px; } .dalislide.casep .slideb { bottom: 40px; text-align: center; padding-right: 0; } .casec { width: 90%; margin: 10px 0 40px 0; overflow: hidden; font-size: 1rem; line-height: 200%; } .casec img { max-width: 100%; } .viewli { height: auto; overflow: hidden; padding: 40px 0; } .viewli a { display: block; width: 15%; height: 200px; float: left; margin-left: 2%; margin-bottom: 20px; } .viewli a:nth-child(6n+1) { margin-left: 0; } .viewli a img { display: block; width: 100%; height: 150px; } .viewli a span { display: block; font-size: 1rem; line-height: 50px; text-align: center; } @media screen and (max-width: 1680px) { .bkbox.casebox { margin-top: 80px; } a.caseli { height: 480px; } a.caseli.projli { height: 380px; margin-bottom: 50px; } .caseli p { height: 280px; } .projli p { height: 260px; } .caseli span:nth-child(2) { margin: 50px 20px 15px 20px; padding-bottom: 10px; } .caseli span:nth-child(3) { font-size: 1rem; } .caset span:nth-child(1) { font-size: 1.8rem; margin-top: 20px; } .viewli a { height: 170px; } .viewli a img { height: 120px; } } @media screen and (max-width: 1440px) { .bkbox.casebox { margin-top: 70px; } a.caseli { height: 440px; } a.caseli.projli { height: 340px; margin-bottom: 50px; } .caseli p { height: 260px; } .projli p { height: 230px; } .caseli span:nth-child(2) { margin: 40px 20px 15px 20px; font-size: 1.4rem; } } @media screen and (max-width: 1280px) { .bkbox.casebox { margin-top: 60px; } a.caseli { height: 400px; } .caseli p { height: 240px; } .caseli span:nth-child(2) { margin: 40px 20px 15px 20px; font-size: 1.4rem; } .viewli a { height: 150px; } .viewli a img { height: 100px; } } @media screen and (max-width: 1024px) { .bkbox.casebox { margin-top: 50px; } a.caseli { height: 340px; } a.caseli.projli { height: 280px; margin-bottom: 40px; } .caseli p { height: 200px; } .caseli span:nth-child(2) { margin: 30px 20px 15px 20px; font-size: 1.3rem; } }