964 lines
19 KiB
CSS
964 lines
19 KiB
CSS
|
|
@import url("../fonts/flaticon/flaticon.css");
|
|
@import url("../fonts/thin/thin.css");
|
|
@import url("../css/all.min.css");
|
|
@import url("revise.css");
|
|
@import url("header-index.css");
|
|
@import url("footer.css");
|
|
@import url("banner.css");
|
|
|
|
|
|
/*========================================================
|
|
標題設定
|
|
=========================================================*/
|
|
|
|
|
|
.h2-title {
|
|
font-size: 1.8rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 0px;
|
|
position: relative;
|
|
color: #000;
|
|
font-family: 'Noto Serif TC', serif;
|
|
}
|
|
.h2-title+p {
|
|
font-family: Arial, Verdana, Helvetica, sans-serif;
|
|
font-size: 1.2rem;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
color: #e3c4a2;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.h2-title {
|
|
font-size: 2rem;
|
|
}
|
|
.h2-title+p {
|
|
font-size: 1.6rem;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
}
|
|
|
|
/*========================================================
|
|
按鈕設定
|
|
=========================================================*/
|
|
|
|
.btn-more {
|
|
width: 100%;
|
|
}
|
|
.btn-more {
|
|
text-align: center;
|
|
color: #000;
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
padding: 30px;
|
|
display: block;
|
|
}
|
|
.btn-more a {
|
|
color: #000;
|
|
}
|
|
.btn-more a::before {
|
|
content: "+";
|
|
font-family: FontAwesome;
|
|
position: absolute;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
border: 2px solid #da9c2d;
|
|
color: #da9c2d;
|
|
bottom: 25px;
|
|
left: 49.5%;
|
|
-webkit-transform: translate(-50%, 100%);
|
|
transform: translate(-50%, 100%);
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
}
|
|
.btn-more a:hover {
|
|
color: #da9c2d;
|
|
-webkit-animation: upDown 1.2s ease-in-out infinite;
|
|
animation: upDown 1.2s ease-in-out infinite;
|
|
}
|
|
.btn-more a:hover::before {
|
|
background-color: #da9c2d;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
/*========================================================
|
|
關於我們
|
|
=========================================================*/
|
|
|
|
|
|
.about-wrap {
|
|
background: #fff url("../img/index/about-bg.jpg") no-repeat left bottom;
|
|
background-size: 100% auto;
|
|
padding-top: 60px;
|
|
padding-bottom: 60px;
|
|
}
|
|
.about-info h2 {
|
|
font-weight: bold;
|
|
}
|
|
.about-info p {
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.about-btn a {
|
|
display: inline-block;
|
|
background: linear-gradient(to bottom, #24afc0 0%,#1f68a4 100%);
|
|
color: #fff;
|
|
padding: 3px 20px;
|
|
border-radius: 20px;
|
|
}
|
|
.about-btn a:hover {
|
|
background: linear-gradient(to bottom, #2fe49e 0%,#2087a3 100%);
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.about-wrap {
|
|
padding-top: 100px;
|
|
}
|
|
}
|
|
|
|
|
|
/*========================================================
|
|
服務項目
|
|
=========================================================*/
|
|
|
|
.service-wrap {
|
|
padding-top: 0px;
|
|
padding-bottom: 60px;
|
|
}
|
|
.service-info h2 {
|
|
font-weight: bold;
|
|
}
|
|
.service-info h2 span {
|
|
display: block;
|
|
font-weight: normal;
|
|
padding-left: 20px;
|
|
font-size: 0.9rem;
|
|
color: #333;
|
|
}
|
|
|
|
.service-info p {
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.service-btn a {
|
|
display: inline-block;
|
|
background: linear-gradient(to bottom, #24afc0 0%,#1f68a4 100%);
|
|
color: #fff;
|
|
padding: 2px 15px;
|
|
border-radius: 15px;
|
|
font-size: 0.9rem;
|
|
}
|
|
.service-btn a:hover {
|
|
background: linear-gradient(to bottom, #2fe49e 0%,#2087a3 100%);
|
|
}
|
|
|
|
/*@media (min-width: 1200px) {
|
|
.service-wrap {
|
|
padding-top: 100px;
|
|
}
|
|
}*/
|
|
|
|
|
|
|
|
/*========================================================
|
|
消息與媒體
|
|
=========================================================*/
|
|
|
|
.news-wrap {
|
|
padding: 0 0 60px;
|
|
overflow: hidden;
|
|
}
|
|
.news-box h3 {
|
|
font-weight: bold;
|
|
margin-bottom: 40px;
|
|
}
|
|
.news-box h3 span {
|
|
display: block;
|
|
font-weight: normal;
|
|
padding-left: 20px;
|
|
font-size: 0.9rem;
|
|
color: #333;
|
|
}
|
|
|
|
.news-item {
|
|
padding: 10px;
|
|
border-bottom: 1px solid #b4b4b4;
|
|
font-size: 0.9rem;
|
|
line-height: 28px;
|
|
}
|
|
.news-item time {
|
|
color: #3368cb;
|
|
font-weight: bold;
|
|
}
|
|
.news-item h4 a {
|
|
display: block;
|
|
font-size: 1.1rem;
|
|
color: #000;
|
|
font-weight: bold;
|
|
}
|
|
.news-item p {
|
|
margin: 0;
|
|
color: #333;
|
|
}
|
|
.news-item h5 a {
|
|
display: block;
|
|
color: #000;
|
|
font-weight: bold;
|
|
position: relative;
|
|
padding-right: 60px;
|
|
font-size: 1.1rem;
|
|
}
|
|
.news-item h5 a:after {
|
|
font-family: 'Font Awesome 5 free';
|
|
content: "\f0a9";
|
|
font-weight: 900;
|
|
display: block;
|
|
position: absolute;
|
|
top: 10%;
|
|
right: 0;
|
|
transform: translateY(-10%);
|
|
z-index: 9;
|
|
color: #2bb39b;
|
|
font-size: 1.8rem;
|
|
}
|
|
.news-item h5 a:hover:after {
|
|
color: #3363cb;
|
|
}
|
|
.news-item h5 a:hover,
|
|
.news-item p a:hover {
|
|
color: #123c82;
|
|
}
|
|
.news-btn {
|
|
margin-top: 20px;
|
|
text-align: right;
|
|
}
|
|
.news-btn a {
|
|
display: inline-block;
|
|
background: linear-gradient(to bottom, #1fa3bb 0%,#1f68a4 100%);
|
|
color: #fff;
|
|
border-radius: 15px;
|
|
padding: 3px 20px;
|
|
font-weight: bold;
|
|
font-size: 0.9rem;
|
|
|
|
}
|
|
.news-btn a:hover {
|
|
background: linear-gradient(to bottom, #2fe49e 0%,#2087a3 100%);
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.news-wrap {
|
|
padding-top: 100px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/*========================================================
|
|
聯絡我們
|
|
=========================================================*/
|
|
|
|
.contact-wrap {
|
|
position: relative;
|
|
}
|
|
.contact-inner {
|
|
position: absolute;
|
|
top: 60%;
|
|
left: 50%;
|
|
transform: translate(-50%, -60%);
|
|
z-index: 2;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
.contact-inner h3 {
|
|
font-size: 2.6rem;
|
|
font-weight: bold;
|
|
}
|
|
.contact-inner p {
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
margin-top: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.contact-btn a {
|
|
display: inline-block;
|
|
background: linear-gradient(to bottom, #05c69f 0%,#2e8bdb 100%);
|
|
color: #fff;
|
|
border-radius: 30px;
|
|
padding: 10px 50px;
|
|
font-weight: bold;
|
|
}
|
|
.contact-btn a:hover {
|
|
background: linear-gradient(to bottom, #1fa3bb 0%,#1f68a4 100%);
|
|
}
|
|
|
|
@media (max-width: 1199px) {
|
|
.contact-wrap > img {
|
|
object-fit: cover;
|
|
height: 400px;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.contact-inner h3 {
|
|
font-size: 3rem;
|
|
}
|
|
.contact-inner p {
|
|
font-size: 1.2rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*========================================================
|
|
甜品介紹
|
|
=========================================================*/
|
|
|
|
.products-wrap {
|
|
padding: 0px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
background-image: url("../img/index/products_bg.jpg");
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
background-position: left bottom;
|
|
background-repeat: no-repeat;
|
|
}
|
|
@media (max-width: 1180px) {
|
|
.products-wrap {
|
|
background-attachment: unset;
|
|
background-size: cover;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: start;
|
|
-ms-flex-align: start;
|
|
align-items: flex-start;
|
|
-webkit-box-pack: justify;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
height: auto;
|
|
padding: 0 0 0px;
|
|
}
|
|
}
|
|
@media (max-width: 1023px) {
|
|
.products-wrap {
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.products-wrap .products-info {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
max-width: 655px;
|
|
height: 490px;
|
|
width: 100%;
|
|
}
|
|
@media (max-width: 1536px) {
|
|
.products-wrap .products-info {
|
|
max-width: unset;
|
|
width: 555px;
|
|
}
|
|
}
|
|
@media (max-width: 1180px) {
|
|
.products-wrap .products-info {
|
|
position: unset;
|
|
width: 50%;
|
|
max-width: unset;
|
|
height: auto;
|
|
}
|
|
}
|
|
@media (max-width: 1023px) {
|
|
.products-wrap .products-info {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.products-wrap .products-info > div {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
padding: 118px 80px;
|
|
z-index: 2;
|
|
background-color: #fff;
|
|
}
|
|
@media (max-width: 1536px) {
|
|
.products-wrap .products-info > div {
|
|
padding: 54px;
|
|
}
|
|
}
|
|
@media (max-width: 1180px) {
|
|
.products-wrap .products-info > div {
|
|
padding: 40px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.products-wrap .products-info > div {
|
|
padding: 60px 40px;
|
|
}
|
|
}
|
|
.products-wrap .products-info > div h2 {
|
|
color: #000;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
letter-spacing: 0.5px;
|
|
text-align: center;
|
|
margin: 0;
|
|
font-family: 'Noto Serif TC', serif;
|
|
}
|
|
.products-wrap .products-info > div h3 {
|
|
color: #e3c4a2;
|
|
font-size: 2rem;
|
|
letter-spacing: 0.5px;
|
|
margin-top: 10px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
.products-wrap .products-info > div p {
|
|
color: #000;
|
|
display: block;
|
|
letter-spacing: 0.5px;
|
|
margin-top: 20px;
|
|
font-size: 1rem;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
.products-wrap .products-info > div .more {
|
|
width: 100%;
|
|
}
|
|
.products-wrap .products-info > div .more a {
|
|
text-align: center;
|
|
color: #000;
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
padding: 30px;
|
|
display: block;
|
|
}
|
|
.products-wrap .products-info > div .more a::before {
|
|
content: "+";
|
|
font-family: FontAwesome;
|
|
position: absolute;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
border: 2px solid #da9c2d;
|
|
color: #da9c2d;
|
|
bottom: 25px;
|
|
left: 49.5%;
|
|
-webkit-transform: translate(-50%, 100%);
|
|
transform: translate(-50%, 100%);
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
}
|
|
.products-wrap .products-info > div .more a:hover {
|
|
color: #da9c2d;
|
|
-webkit-animation: upDown 1.2s ease-in-out infinite;
|
|
animation: upDown 1.2s ease-in-out infinite;
|
|
}
|
|
.products-wrap .products-info > div .more a:hover::before {
|
|
background-color: #da9c2d;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
.products-wrap .products-list {
|
|
width: 100%;
|
|
position: relative;
|
|
-webkit-transform: translateX(35%);
|
|
transform: translateX(35%);
|
|
margin: 0 -40px;
|
|
}
|
|
|
|
@media (max-width: 1536px) {
|
|
.products-wrap .products-list {
|
|
margin: 0;
|
|
}
|
|
}
|
|
@media (max-width: 1440px) {
|
|
.products-wrap .products-list {
|
|
-webkit-transform: translateX(37.3%);
|
|
transform: translateX(37.3%);
|
|
}
|
|
}
|
|
@media (max-width: 1366px) {
|
|
.products-wrap .products-list {
|
|
-webkit-transform: translateX(39.5%);
|
|
transform: translateX(39.5%);
|
|
}
|
|
}
|
|
@media (max-width: 1280px) {
|
|
.products-wrap .products-list {
|
|
-webkit-transform: translateX(42.1%);
|
|
transform: translateX(42.1%);
|
|
}
|
|
}
|
|
@media (max-width: 1180px) {
|
|
.products-wrap .products-list {
|
|
-webkit-transform: translate(0%, 0);
|
|
transform: translate(0%, 0);
|
|
width: 50%;
|
|
margin: 0;
|
|
}
|
|
}
|
|
@media (max-width: 1023px) {
|
|
.products-wrap .products-list {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.products-item {
|
|
padding: 0 30px;
|
|
}
|
|
.products-item .Img img {
|
|
width: 100%;
|
|
display: block;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
.products-item .Txt {
|
|
margin: 0 20px;
|
|
padding: 60px 40px;
|
|
border-left: 1px solid #dad9d7;
|
|
}
|
|
.products-item .Txt h3 {
|
|
font-family: 'Noto Serif TC', serif;
|
|
font-size: 1.8rem;
|
|
font-weight: bold;
|
|
}
|
|
.products-item .Txt ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #53320f;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.products-item .Txt .buy a {
|
|
display: inline-block;
|
|
background-color: #bb4c15;
|
|
color: #fff;
|
|
padding: 0 15px;
|
|
margin: 20px 0;
|
|
}
|
|
.products-item .Txt .buy a:hover {
|
|
background-color: #da9c2d;
|
|
}
|
|
|
|
|
|
.products-list .products-item:nth-of-type(4n+1) .Txt h3 {
|
|
color: #ffb14c;
|
|
}
|
|
.products-list .products-item:nth-of-type(4n+2) .Txt h3 {
|
|
color: #b22b30;
|
|
}
|
|
.products-list .products-item:nth-of-type(4n+3) .Txt h3 {
|
|
color: #7e832f;
|
|
}
|
|
.products-list .products-item:nth-of-type(4n+4) .Txt h3 {
|
|
color: #772d18;
|
|
}
|
|
|
|
|
|
|
|
@media (max-width: 1180px) {
|
|
.products-item {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
|
|
.products-wrap .slick-prev,
|
|
.products-wrap .slick-next {
|
|
border-radius: 0;
|
|
}
|
|
.products-wrap .slick-arrow {
|
|
position: absolute;
|
|
-webkit-transform: translate(100%, 100%);
|
|
transform: translate(100%, 100%);
|
|
top: 424px;
|
|
width: 100px;
|
|
height: 100px;
|
|
cursor: pointer;
|
|
background-color: #2f2f2f;
|
|
z-index: 2;
|
|
}
|
|
@media (max-width: 1536px) {
|
|
.products-wrap .slick-arrow {
|
|
top: 294px;
|
|
}
|
|
}
|
|
@media (max-width: 1180px) {
|
|
.products-wrap .slick-arrow {
|
|
top: 31%;
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
}
|
|
@media (max-width: 1023px) {
|
|
.products-wrap .slick-arrow {
|
|
top: 47%;
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.products-wrap .slick-arrow {
|
|
top: 42%;
|
|
}
|
|
}
|
|
@media (max-width: 650px) {
|
|
.products-wrap .slick-arrow {
|
|
top: 35%;
|
|
}
|
|
}
|
|
@media (max-width: 540px) {
|
|
.products-wrap .slick-arrow {
|
|
top: 30%;
|
|
}
|
|
}
|
|
@media (max-width: 480px) {
|
|
.products-wrap .slick-arrow {
|
|
top: 21%;
|
|
}
|
|
}
|
|
@media (max-width: 375px) {
|
|
.products-wrap .slick-arrow {
|
|
top: 17%;
|
|
}
|
|
}
|
|
.products-wrap .slick-arrow:hover {
|
|
background-color: #da9c2d;
|
|
}
|
|
.products-wrap .slick-arrow::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-left: 1px solid #fff;
|
|
border-bottom: 1px solid #fff;
|
|
}
|
|
.products-wrap .slick-arrow:focus {
|
|
background-color: #da9c2d;
|
|
}
|
|
.products-wrap .slick-arrow.slick-prev {
|
|
left: -269px;
|
|
}
|
|
@media (max-width: 1180px) {
|
|
.products-wrap .slick-arrow.slick-prev {
|
|
left: -180px;
|
|
}
|
|
}
|
|
@media (max-width: 1023px) {
|
|
.products-wrap .slick-arrow.slick-prev {
|
|
left: -60px;
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.products-wrap .slick-arrow.slick-prev {
|
|
left: -60px;
|
|
}
|
|
}
|
|
.products-wrap .slick-arrow.slick-prev::before {
|
|
left: 50%;
|
|
-webkit-transform: translateY(-50%) rotate(45deg);
|
|
transform: translateY(-50%) rotate(45deg);
|
|
}
|
|
.products-wrap .slick-arrow.slick-next {
|
|
left: -170px;
|
|
}
|
|
@media (max-width: 1180px) {
|
|
.products-wrap .slick-arrow.slick-next {
|
|
left: -120px;
|
|
}
|
|
}
|
|
@media (max-width: 1023px) {
|
|
.products-wrap .slick-arrow.slick-next {
|
|
left: 0px;
|
|
}
|
|
}
|
|
@media (max-width: 640px) {
|
|
.products-wrap .slick-arrow.slick-next {
|
|
left: 0px;
|
|
}
|
|
}
|
|
.products-wrap .slick-arrow.slick-next::before {
|
|
left: 40%;
|
|
-webkit-transform: translateY(-50%) rotate(-135deg);
|
|
transform: translateY(-50%) rotate(-135deg);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*========================================================
|
|
原料與烘焙 & 主廚開講
|
|
=========================================================*/
|
|
|
|
.data-wrap {
|
|
background: #fbf9f4 url("../img/index/data-bg.jpg") no-repeat right bottom;
|
|
background-size: 120% auto;
|
|
padding-top: 60px;
|
|
padding-bottom: 40px;
|
|
color: #fff;
|
|
}
|
|
.data-item {
|
|
position: relative;
|
|
padding: 20px;
|
|
}
|
|
.data-item-img {
|
|
position: relative;
|
|
margin: 0;
|
|
display: block;
|
|
width: 100%;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
}
|
|
.data-item-img h3 {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -20px;
|
|
z-index: 2;
|
|
display: inline-block;
|
|
color: #fff;
|
|
width: 20%;
|
|
min-width: 100px;
|
|
text-align: center;
|
|
padding: 5px 15px;
|
|
font-size: 0.9rem;
|
|
background-color: #e5b35c;
|
|
}
|
|
.data-item-img:hover {
|
|
color: #fff
|
|
}
|
|
.data-item-img:hover .data-item-mask {
|
|
opacity: 1;
|
|
visibility: visible
|
|
}
|
|
.data-item-img:hover .data-item-mask::after {
|
|
height: 100%
|
|
}
|
|
.data-item-img img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover
|
|
}
|
|
.data-item-mask {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: .625rem 1rem;
|
|
text-align: center;
|
|
color: #111;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
transition: all .3s
|
|
}
|
|
.data-item-mask::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
height: 50px;
|
|
width: 100%;
|
|
background-color: rgba(227,196,162,0.5);
|
|
transform: translateY(-50%);
|
|
transition: all .3s
|
|
}
|
|
.data-item-mask span {
|
|
position: relative;
|
|
display: block;
|
|
z-index: 2;
|
|
padding: 6px 30px 4px;
|
|
border: 1px solid #111;
|
|
}
|
|
|
|
.data-item-info {
|
|
position: relative;
|
|
padding: 40px 20px 10px;
|
|
margin: 0 20px;
|
|
color: #111;
|
|
}
|
|
.data-item-info:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 1px;
|
|
height: 100px;
|
|
background-color: #b3b3b3;
|
|
}
|
|
.data-item-info h4 {
|
|
font-weight: bold;
|
|
}
|
|
.data-item-info p span {
|
|
color: #d86a0a;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.data-wrap {
|
|
padding-top: 60px;
|
|
padding-bottom: 20px;
|
|
}
|
|
.data-item-info {
|
|
padding: 40px;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
.data-wrap {
|
|
background: #fbf9f4 url("../img/index/data-bg.jpg") no-repeat center bottom;
|
|
background-size: 100% auto;
|
|
padding-top: 100px;
|
|
padding-bottom: 20px;
|
|
}
|
|
.data-item-info {
|
|
padding: 40px;
|
|
margin: 0 20px;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.data-wrap {
|
|
padding-top: 120px;
|
|
padding-bottom: 60px;
|
|
}
|
|
.data-item-info {
|
|
padding: 40px;
|
|
margin: 0 40px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1600px) {
|
|
.data-wrap {
|
|
padding-top: 160px;
|
|
padding-bottom: 100px;
|
|
}
|
|
.data-item-info {
|
|
margin: 0 100px;
|
|
}
|
|
}
|
|
|
|
|
|
/*========================================================
|
|
圖片效果
|
|
=========================================================*/
|
|
|
|
a.figure {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
a.figure:before,a.figure:after {
|
|
position: absolute;
|
|
top: 10px;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
right: 10px;
|
|
z-index: 10;
|
|
content: '';
|
|
display: inline-block;
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.5);
|
|
transform: scale(0.5);
|
|
transition: .3s;
|
|
}
|
|
a.figure:before {
|
|
background: #fff;
|
|
}
|
|
a.figure:after {
|
|
background: url(../images/magnifier.png) no-repeat center center;
|
|
}
|
|
a.figure:hover:before, a.figure:hover:after {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
a.figure:hover:before {
|
|
opacity: 0.15;
|
|
}
|
|
a.figure:hover:after {
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
.picture-effect {
|
|
position: relative;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
.picture-effect img {
|
|
transform: scale(1);
|
|
transition: .3s ease-out all;
|
|
}
|
|
.picture-effect a {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
.picture-effect a:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: rgba(12, 56, 98, 0.4);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
transition: .3s ease-out all;
|
|
}
|
|
.picture-effect a:hover:before {
|
|
opacity: 1;
|
|
}
|
|
.picture-effect a:hover img {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|