@charset "UTF-8"; .contentBox ul.newsList li .item .Img, .contentBox ul.newsList li .item .Txt .btnMore, .contentBox ul.newsList 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; } /*新訊列表*/ ul.newsList li { /*訊息分隔線*/ padding: 25px 0; /*訊息間距*/ } ul.newsList li:first-child { border: none; } .newsDate { /*發布日期*/ padding: 5px 0; font-size: 12px; color: #818181; letter-spacing: 1px; text-transform: uppercase; } .newsDate strong { font-weight: normal; } .newsDate strong i { margin-right: 2px; font-size: 14px; color: #AE4233; } .newsDate b { margin-left: 3px; } .newIcon { /*分類小圖示*/ padding: 3px 5px; padding: 5px 5px 2px 5px\9; margin-right: 3px; display: inline-block; font-family: 新細明體; font-size: 12px; font-weight: normal; color: #FFF; border-radius: 3px; } ul.newsList li .Img { /*訊息圖片*/ } ul.newsList li .Img img { display: block; width: 100%; } ul.newsList li .Txt h3 { /*訊息標題*/ font-size: 19px; font-weight: normal; color: #2f2f2f; margin-bottom: 3px; } ul.newsList li .Txt h3 a { /*訊息標題*/ display: inline-block; vertical-align: middle; color: #000; } ul.newsList li .Txt h3 a:hover { /*訊息標題滑過效果*/ color: #F80E2B; } ul.newsList li .Txt p { /*列表說明*/ margin-top: 7px; font-size: 13px; color: #909090; line-height: 1.8; } /*內頁*/ /****分享*****/ .shareBox { float: right; } .shareBox .btn-fb { margin-right: 5px; display: inline-block; vertical-align: middle; } .shareBox a.back { cursor: pointer; display: inline-block; vertical-align: middle; padding: 3px 5px; font-size: 12px; color: #FFF; border-radius: 3px; background: #ae4233; /* Old browsers */ /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ae4233), color-stop(100%, #c44c4c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ae4233 0%, #c44c4c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ae4233 0%, #c44c4c 100%); /* Opera 11.10+ */ /* IE10+ */ background: -webkit-gradient(linear, left top, left bottom, from(#ae4233), to(#c44c4c)); background: linear-gradient(to bottom, #ae4233 0%, #c44c4c 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ae4233', endColorstr='#c44c4c',GradientType=0 ); /* IE6-9 */ -webkit-transition: none; -o-transition: none; transition: none; } .shareBox a.back:hover { background: #398cb1; } /********標題區*******/ .titleArea { clear: both; margin-bottom: 30px; border-bottom: 1px solid #F2F2F2; /*下邊線*/ padding: 15px 10px; /*下邊線與標題距離*/ } .titleArea h1 { /*標題區左-訊息標題*/ font-size: 20px; font-weight: 300; color: #111; overflow: hidden; } .titleArea h1 strong { display: block; font-weight: normal; } .titleArea h1 b { /*標題區左-訊息日期*/ font-size: 12px; color: #A3A3A3; font-weight: normal; margin-left: 5px; } .titleArea .btn-fb { /*fb*/ float: left; } .titleArea a.back { /*回上頁*/ cursor: pointer; display: block; float: right; margin-left: 5px; color: #06F; font-size: 10pt; } @media (max-width: 1023px) { .contentBox .leftBox { padding: 0 30px 0 0; } } .contentBox .rightBox { padding-top: 45px; } .contentBox ul.newsList { position: relative; z-index: 1; } .contentBox ul.newsList li { padding: 0 13px 230px; } .contentBox ul.newsList li:hover .Img { opacity: .6; } .contentBox ul.newsList li .item { position: relative; } .contentBox ul.newsList li .item .Img { position: relative; } .contentBox ul.newsList li .item .Txt { background-color: #fff; position: absolute; max-width: 300px; width: 100%; padding: 0 40px 0 15px; top: 200px; } .contentBox ul.newsList li .item .Txt h3 { margin-top: 10px; letter-spacing: 1.2px; font-weight: 300; font-size: 16px; height: 50px; } .contentBox ul.newsList 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.newsList 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.newsList 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.newsList li .item .Txt .date { color: #888; font-size: 14px; letter-spacing: 1px; margin-top: 10px; } .contentBox ul.newsList 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.newsList li .item .Txt .btnMore:before { content: ''; top: 50%; left: 120%; position: absolute; display: block; width: 35px; height: 1px; background-color: #aaa; } .contentBox ul.newsList li .item .Txt:hover h3 a::before { opacity: 1; } .contentBox ul.newsList li .item .Txt:hover .btnMore { color: #5A734A; } .contentBox ul.newsList li .item .Txt:hover .btnMore:before { background-color: #5A734A; } .contentBox ul.newsList li:nth-of-type(3n+1) { padding-left: 0; padding-right: 26px; } .contentBox ul.newsList li:nth-of-type(3n+3) { padding-left: 26px; padding-right: 0px; } @media (max-width: 1366px) { .contentBox ul.newsList li .item .Txt .btnMore { margin-top: 15px; } } @media (max-width: 1200px) { .contentBox ul.newsList li { padding: 0 15px 100px !important; } .contentBox ul.newsList li .item .Txt { top: auto; bottom: -60px; } } @media (max-width: 860px) { .contentBox ul.newsList li { padding-bottom: 30px !important; } .contentBox ul.newsList 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.newsList li .item .Txt { position: relative; bottom: auto; max-width: none; padding-left: 20px; padding-right: 20px; } .contentBox ul.newsList li .item .Txt .date { margin-top: 0; padding-top: 10px; } .contentBox ul.newsList li .item .Txt .btnMore { margin-bottom: 15px; } } @media (max-width: 480px) { .contentBox ul.newsList li .item .Txt h3 { margin-bottom: 0; } .contentBox ul.newsList li .item .Txt h3 a { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .contentBox ul.newsList li .item .Txt h3 a:before { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .contentBox ul.newsList li .item .Txt .btnMore { margin-top: 5px; } } .textEditor { padding: 10px; }