@charset "UTF-8"; .contentBox ul.facList li .item .Img, .contentBox ul.facList li .item .Txt .btnMore, .contentBox ul.facList li .item .Txt .btnMore:before { -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .contentBox .leftBox { padding: 0 50px 0 0; } .contentBox .rightBox { padding: 0; } .classNote { padding-bottom: 10px; font-size: 15px; color: #222; text-align: center; line-height: 1.8; } ul.facList li { padding: 0 10px 20px 10px; } ul.facList li .Img { position: relative; overflow: hidden; } ul.facList li .Img img { display: block; width: 100%; } ul.facList li .Txt { padding: 15px; background: #FFF; } ul.facList li .Txt h3 { color: #4d7ead; } ul.facList li .Txt h3 strong { font-weight: normal; } ul.facList li .Txt h3 strong a { font-size: 20px; color: #333; } ul.facList li .Txt h3 strong a:hover { color: #da2441; } ul.facList li .Txt p { height: 60px; } /******內頁******/ .contentBox .leftBox .Img img { width: 100%; } .contentBox .leftBox h3 { margin: 10px 0 20px 0; border: none; } .contentBox .rightBox .link { margin-bottom: 40px; } .contentBox .rightBox .link a { display: inline-block; padding: 10px 15px; font-size: 16px; color: #FFF; -webkit-box-shadow: 2px 2px 2px #CCC; box-shadow: 2px 2px 2px #CCC; border-radius: 3px; text-align: center; -webkit-transition: none; -o-transition: none; transition: none; } @media (max-width: 1023px) { .contentBox .leftBox { padding: 0 30px 0 0; } } .insfac { margin-top: 60px; } .contentBox ul.facList { position: relative; z-index: 1; } .contentBox ul.facList li { } .contentBox ul.facList li:hover .Img { opacity: .6; } .contentBox ul.facList li .item { position: relative; } .contentBox ul.facList li .item .Img { position: relative; } .contentBox ul.facList li .item .Txt { background-color: #fff; position: absolute; max-width: 300px; width: 100%; padding: 0 40px 0 15px; top: 200px; } .contentBox ul.facList li .item .Txt h3 { margin-top: 10px; letter-spacing: 1.2px; font-weight: 300; font-size: 16px; height: 50px; } .contentBox ul.facList li .item .Txt h3:before { content: ''; position: absolute; -webkit-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); transform: translate(0%, -50%); display: block; height: 110px; width: 330px; max-width: 120%; background: url(../images/textshadow.png) no-repeat center; z-index: -1; } .contentBox ul.facList li .item .Txt h3 a { position: relative; overflow: hidden; display: block; line-height: 20px; -webkit-text-fill-color: #111; text-fill-color: #111; color: #111; z-index: 1; } .contentBox ul.facList li .item .Txt h3 a:before { content: attr(data-abhover); position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; -webkit-text-fill-color: #5A734A; text-fill-color: #5A734A; color: #5A734A; -webkit-transition: all ease-in .3s; -o-transition: all ease-in .3s; transition: all ease-in .3s; text-shadow: 0px 0px 5px rgba(90, 74, 115, 0.2); opacity: 0; } .contentBox ul.facList li .item .Txt p.ellipsis { font-size: 15px; font-weight: 300; letter-spacing: .75px; line-height: 28px; color: #444; } .contentBox ul.facList li .item .Txt .date { color: #888; font-size: 14px; letter-spacing: 1px; margin-top: 10px; } .contentBox ul.facList li .item .Txt .btnMore { display: inline-block; color: #aaa; margin-top: 35px; font-size: 15px; font-weight: 400; letter-spacing: .75px; position: relative; } .contentBox ul.facList li .item .Txt .btnMore:before { content: ''; top: 50%; left: 120%; position: absolute; display: block; width: 35px; height: 1px; background-color: #aaa; } .contentBox ul.facList li .item .Txt:hover h3 a::before { opacity: 1; } .contentBox ul.facList li .item .Txt:hover .btnMore { color: #5A734A; } .contentBox ul.facList li .item .Txt:hover .btnMore:before { background-color: #5A734A; } @media (max-width: 1366px) { .contentBox ul.facList li .item .Txt .btnMore { margin-top: 15px; } } @media (max-width: 1200px) { .contentBox ul.facList li .item .Txt { top: auto; bottom: -60px; } } @media (max-width: 860px) { .contentBox ul.facList li { padding-bottom: 30px !important; } .contentBox ul.facList li .item { -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05); } .contentBox ul.facList li .item .Txt { position: relative; bottom: auto; max-width: none; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; } .contentBox ul.facList li .item .Txt h3 { margin-top: 0; padding-top: 10px; } .contentBox ul.facList li .item .Txt .btnMore { margin-bottom: 15px; } } @media (max-width: 640px) { .classBox { display: none; } } @media (max-width: 480px) { .contentBox ul.facList li .item .Txt h3 { margin-bottom: 0; } .contentBox ul.facList li .item .Txt h3 a { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .contentBox ul.facList li .item .Txt h3 a:before { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .contentBox ul.facList li .item .Txt .btnMore { margin-top: 5px; } }