@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.css"); @import url("footer.css"); @import url("banner.css"); /*======================================================== 標題設定 =========================================================*/ .s-header { text-align: center; overflow: hidden; margin-bottom: 40px; color: #000; } .s-header h2 { display: inline-block; font-size: 2rem; font-weight: bold; font-family: 'Noto Serif TC', serif; margin: 0; } .s-header h2+p { font-size: 1rem; font-family: Arial, "微軟正黑體", Verdana, Helvetica, sans-serif; margin: 0; } .h3-title { color: #000; font-size: 1.5rem; font-weight: bold; margin: 0; font-family: 'Noto Serif TC', serif; margin-bottom: 20px; } .h3-title i { color: #06457e; display: inline-block; margin-right: 6px; } .h4-title { color: #000; font-size: 1.4rem; font-weight: bold; margin-bottom: 20px; font-family: 'Noto Serif TC', serif; } .h5-title { font-weight: bold; font-size: 1.2rem; } .h5-title i { color: #e96424; display: inline-block; margin-right: 6px; font-size: 0.9rem; } /*======================================================== 內頁框架 =========================================================*/ .content-wrap { padding-top: 60px; padding-bottom: 60px; min-height: 400px; } .img-100 { width: 100%; vertical-align: bottom; } /* 麵包屑 */ .breadcrumbs { text-align: center; font-size: 1rem; padding-top: 10px; padding-bottom: 10px; color: #000; background-color: #f7f2ec; } .breadcrumbs a { display: inline-block; color: #000; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs a.home i { display: inline-block; color: #000; } .breadcrumbs span { display: inline-block; margin: 0 7px; color: #000; } /*======================================================== 回目錄頁 =========================================================*/ .btn-back { text-align: right; margin-top: 30px; margin-bottom: 30px; } .btn-back a { background-color: #e27a14; padding: 5px 20px; color: #fff; border-radius: 5px; } .btn-back a:hover { background-color: #da9c2d; color: #fff; text-decoration: none; } @media (max-width: 1199px) { .btn-back { text-align: center; margin-bottom: 0; } .btn-back a { display: block; } .btn-back a i { display: none; } } /*======================================================== 塔塔故事 =========================================================*/ .about-01-a img, .about-01-b img { width: 100%; vertical-align: bottom; } .about-01-a .Img { background: url(../img/about-01-a01.jpg) no-repeat center center / cover; } .about-01-a .Info { padding: 20px 0; } .about-01-a .Info h3 { color: #b56b2f; font-weight: bold; font-size: 1.6rem; margin: 1.5rem 0; } .about-01-a .Info p span { display: inline-block; color: #b56b2f; font-weight: bold; padding: 0 2px; } .about-01-b { padding-top: 60px; background: url(../img/text-01.png) no-repeat right top; background-size: 80% auto; } @media (min-width: 768px) { .about-01-a .Info { padding: 10px 0 40px 40px; } .about-01-b { background-size: 60% auto; } } @media (min-width: 992px) { .about-01-a .Info { padding: 10px 0 40px 40px; } .about-01-b { margin-top: 30px; background-size: 50% auto; } } @media (min-width: 1600px) { .about-01-a .Info { padding: 10px 0 40px 60px; } .about-01-b { margin-top: 40px; padding-top: 90px; } } /*======================================================== 原料與烘焙 =========================================================*/ .material-item { border: 1px solid #dadada; padding: 20px; color: #111; /* height: 100%; */ } .material-item img { width: 100%; vertical-align: bottom; } .material-item-info { margin: 20px; } .material-item-info h3 { font-weight: bold; margin-bottom: 2rem; font-size: 1.6rem; } .material-item-info p { font-size: 0.9rem; } @media (min-width: 480px) and (max-width: 767px) { .material-item-img { margin: 0 40px 20px; } } @media (min-width: 992px) and (max-width: 1199px) { .material-item { padding: 40px; } } /*======================================================== 主廚介紹 =========================================================*/ .chef-detail { text-align: left; } .chef-detail .slider-for > div { position: relative; margin: 5px 5px 20px 5px; } .chef-detail .slider-for > div a:after { content: ''; position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; } .chef-detail .slider-for > div img { width: 100%; vertical-align: bottom; margin: 0 auto; border: 1px solid #ddd; } .chef-detail .slider-nav .slick-slide { margin: 0 5px; } .chef-detail .slider-nav > div img { vertical-align: bottom; cursor: pointer; margin: 0 auto; } .chef-detail .slider-nav .slick-prev { left: -20px; } .chef-detail .slider-nav .slick-next { right: -20px; } .chef-detail-info h3 { font-size: 1.4rem; margin-bottom: 1rem; font-weight: bold; } .chef-detail-info h3 span, .chef-detail-info p span { color: #cf6a0d; } .awards-list > div { border-bottom: 1px solid rgba(231,162,26,0.5); padding: 5px 0; } .awards-list > div > div i { display: inline-block; margin-right: 5px; color: #e7a21a; font-size: 0.6rem; } @media (max-width: 639px) { .awards-list > div > div { padding-left: 20px; position: relative; } .awards-list > div > div:nth-of-type(1) { font-weight: bold; } .awards-list > div > div:nth-of-type(n+2) { display: inline-block; } .awards-list > div > div i { position: absolute; left: 0; top: 10px; z-index: 5; } } @media (max-width: 1199px) { .chef-detail .slider-nav { margin-bottom: 30px; } } @media (min-width: 992px) and (max-width: 1199px) { .chef-wrap .container { max-width: 880px; } } @media (min-width: 640px) { .awards-list > div { display: flex; justify-content: space-between; } .awards-list > div > div:nth-of-type(1) { flex: 0 0; flex-basis: 260px; } .awards-list > div:nth-of-type(n+2) > div:nth-of-type(2) { flex: 0 0; flex-basis: 150px; text-align: left; } } @media (min-width: 1600px) { .chef-detail { background: url(../img/text-01.png) no-repeat right bottom; background-size: 36% auto; } } /*======================================================== 甜品訂購 =========================================================*/ .products-item { margin-bottom: 3rem; } .products-item > a { display: block; overflow: hidden; } .products-item-img { position: relative; overflow: hidden; } .products-item-img:hover { color: #fff } .products-item-img:hover .products-item-mask { opacity: 1; visibility: visible } .products-item-img:hover .products-item-mask::after { height: 100% } .products-item-img img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: all 0.5s ease 0s; transform: scale(1); } .products-item-img:hover img { transform: scale(1.1); } .products-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 } .products-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 } .products-item-mask span { position: relative; display: block; z-index: 2; padding: 6px 30px 4px; border: 1px solid #111; } .products-item .info { margin-left: 20px; padding: 30px 40px 20px 30px; border-left: 1px solid #b9b9b9; } .products-item .info h3 { font-family: 'Noto Serif TC', serif; font-size: 1.6rem; font-weight: bold; } .products-item .info .price span { font-size: 1.6rem; font-weight: bold; color: #E90003; } .products-item .info .buy-btn a { display: block; width: 100%; background-color: #353535; color: #fff; padding: 5px 20px; text-align: center; } .products-item .info .buy-btn a:hover { background-color: #da9c2d; } /*======================================================== 甜品訂購內頁 =========================================================*/ .products-detail { text-align: left; } .products-detail .slider-for > div { position: relative; margin: 5px 5px 20px 5px; } .products-detail .slider-for > div a:after { content: ''; position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; } .products-detail .slider-for > div img { max-width: 100%; vertical-align: bottom; margin: 0 auto; max-height: 252px; border: 1px solid #ddd; } .products-detail .slider-nav { margin-bottom: 30px; } .products-detail .slider-nav .slick-slide { margin: 0 5px 0 5px; border: 1px solid #ccc; height: 56px; background-color: #ededed; } .products-detail .slider-nav > div img { vertical-align: bottom; cursor: pointer; margin: 0 auto; height: 56px; } .products-detail .slider-nav .slick-prev { left: 0; } .products-detail .slider-nav .slick-next { right: 0; } .products-detail-info h2 { font-family: 'Noto Serif TC', serif; color: #b22b30; font-size: 1.8rem; font-weight: bold; } .products-detail-info ul { list-style: none; margin: 0; padding: 0; } .products-detail-info ul li { display: block; position: relative; padding: 9px 4px 9px 120px; border-bottom: 1px dashed #ccc; } .products-detail-info ul li b { position: absolute; left: 0; top: 9px; z-index: 3; width: 104px; font-weight: bold; margin-left: 4px; background-color: #eedcc8; text-align: center; color: #111; } .products-detail-info ul li span:nth-of-type(1) { display: none; } .products-detail-info ul li span:nth-of-type(2) { display: inline-block; margin: 0 15px; font-size: 1.3rem; font-weight: bold; color: #DD0003; } .products-detail-info ul li input { height: calc(2rem + 2px); } /* 尺寸設定 */ @media (min-width: 400px) { .products-detail .slider-for > div img { max-height: 281px; } .products-detail .slider-nav .slick-slide, .products-detail .slider-nav > div img { height: 63px; } } @media (min-width: 540px) { .products-detail .slider-for > div img { max-height: 375px; } .products-detail .slider-nav .slick-slide, .products-detail .slider-nav > div img { height: 87px; } } @media (min-width: 768px) { .products-detail .slider-for > div img { max-height: 510px; } .products-detail .slider-nav .slick-slide, .products-detail .slider-nav > div img { height: 121px; } } @media (min-width: 992px) { .products-detail .slider-nav .slick-slide { margin: 0 5px 10px 5px; } .products-detail .slider-for > div img { max-height: 450px; } .products-detail .slider-nav .slick-slide, .products-detail .slider-nav > div img { height: 106px; } } @media (min-width: 1200px) { .products-detail .slider-for > div img { max-height: 398px; } .products-detail .slider-nav .slick-slide, .products-detail .slider-nav > div img { height: 92px; } } @media (min-width: 1600px) { .products-detail .slider-for > div img { max-height: 525px; } .products-detail .slider-nav .slick-slide, .products-detail .slider-nav > div img { height: 124px; } } /*======================================================== 會員專區 =========================================================*/ .member-login { width: 100%; max-width: 90%; margin: auto; } .member-login .member-login-items { position: relative; padding: 0; margin-top: 20px; margin-bottom: 10px; } .member-login .member-login-items .form-control { height: auto; font-size: 1rem; border-radius: 0; padding: 10px 10px 10px 56px; border: 1px solid #dadada; background-color: #fff; } .member-login .member-login-items i { display: block; font-size: 1.4rem; color: #fff; width: 46px; line-height: 46px; text-align: center; background-color: #d0a57f; position: absolute; left: 0; top: 0; border-radius: 0; transition: all 0.4s ease; } .member-login-link { text-align: right; } .member-login-link a { font-family: 'Noto Serif TC', serif; color: #000; padding: 0 10px; } .member-login-link a:hover { color: #d0a57f; } .member-login-btn a { background-color: #d0a57f; color: #fff; text-align: center; padding: 7px; } .member-login-btn a:hover { background-color: #e5b35c; } @media (min-width: 540px) { .member-login { max-width: 400px; } } @media (min-width: 768px) { .member-login { max-width: 500px; } } @media (min-width: 1200px) { .member-login { max-width: 600px; padding: 0 50px; } } /*======================================================== 購物說明 =========================================================*/ /* 訂購說明 */ .buy-info { color: #e84708; font-size: 1.2rem; margin-bottom: 50px; font-weight: bold; border-bottom: 2px dashed #404040; padding: 10px 10px 20px 10px; } .cart-info { } .cart-info h4 { text-align: center; font-weight: bold; color: #e2210b; font-size: 1.6rem; } .cart-info img { margin-bottom: 20px; } .cart-info a { color: #fff; text-decoration: underline; } .cart-info h3 { font-weight: bold; margin: 0 0 6px 0; } /* .shopping-list { position: relative; max-width: 1170px; margin: 0 auto; } .shopping-info { border-bottom: 2px dashed #bb4c15; color: #333; padding: 20px 0; } .shopping-info img { margin-bottom: 20px; } .shopping-info a { color: #fff; text-decoration: underline; } .shopping-info h3 { font-weight: bold; margin: 0 0 6px 0; } .shopping-info2 { background-color: #bb4c15; color: #fff; padding: 20px 0; } .shopping-info2 img { margin-bottom: 20px; } .shopping-info2 a { color: #fff; text-decoration: underline; } .shopping-info2 h3 { font-weight: bold; margin: 0 0 6px 0; } .shopping-style .col-md-5 { background-color: #f7dedb; padding: 10px 30px; margin-top: 10px; } .shopping-style .col-md-5 h4 { color: #a32618; } .shopping-style a { color: #333; text-decoration: underline; }*/ /* 數量加減 */ .qty-box { position: relative; display: inline-block; width: calc(100% - 100px); max-width: none; padding: 0 25px; box-sizing: border-box; border: 1px solid #ccc; } .qty-box .form-control { position: relative; text-align: center; height: 24px; line-height: 22px; font-size: 1rem; color: #e95b5a; font-weight: bold; background: #fff; border: none; margin: 0 0; padding: 0; z-index: 1; border-radius: 0; } .qty-box .form-control:focus { border-color: #FFA395; } .qty-box .btnOrder { width: 24px; height: 24px; line-height: 22px; font-size: 1.2rem; font-weight: bold; color: #58483F; position: absolute !important; background: #fff; z-index: 0; top: 0; } .qty-box .btnOrder:hover { color: #FFA395; background: #fff; z-index: 2; } .qty-box .less { left: 0; border-right: 1px solid #ccc; } .qty-box .add { right: 0; border-left: 1px solid #ccc; } /* 總價計算 */ .total { background-color: #e6e6e6; text-align: right; padding: 10px; } .total a { color: #861d11; } .total b { display: inline-block; margin-right: 20px; } .total span { font-size: 1.4rem; color: #861d11; } @media (max-width: 539px) { .total { text-align: left; } .total b { display: block; } } .order-total { list-style-type: none; margin: 3rem 0 0 0; padding: 0; } .order-total li { display: flex; justify-content: space-between; padding: 5px 10px; border-bottom: 1px solid #ccc; } .order-total li:last-of-type { background-color: #e5b35c; color: #fff; } /* 訂購按鈕 */ .shopping-btn { } .shopping-btn > div a { background-color: #d3762b; color: #fff; display: block; text-align: center; padding: 8px 10px; font-size: 20px; margin-top: 10px; } .shopping-btn > div a:hover, .shopping-btn > div a.active { background-color: #bb4c15; } /* 加入詢價列表 */ .add-price { text-align: center; margin-top: 20px; } .add-price a { display: block; margin-bottom: 10px; } .add-price a { background-color: #da9c2d; color: #fff; padding: 5px 20px; } .add-price a:hover { background-color: #bb4c15; } @media (min-width: 480px) { .add-price a { display: inline-block; margin-bottom: 0; } } /* 訂購小視窗 */ #inline { min-width: 360px; } #inline h2 { margin: 0 0 10px 0; padding: 5px 10px; background-color: #a32618; color: #fff; font-size: 24px; } #inline p { text-align: center; font-size: 24px; } #inline p:last-of-type { margin-top: 20px; font-size: 16px; } #shopping_info1 h2, #shopping_info2 h2, #shopping_info3 h2 { margin: 0 0 10px 0; color: #a32618; font-size: 24px; } /* 尺寸設定 */ /*@media (min-width: 768px) { .pic-640 { display: none; } .pic-768 { display: block; } .shopping-info img { margin-bottom: 0px; } .shopping-info2 img { margin-bottom: 0px; } } @media (min-width: 992px) { .shopping-style { border-bottom: 3px dashed #d4d4d4; padding-bottom: 20px; } .shopping-style .col-md-5 { background-color: #fff; padding: 0; margin-top: 20px; } }*/ /*======================================================== 購物流程 =========================================================*/ /* 訂購步驟 */ #breadcrumbs-two { overflow: hidden; width: 100%; margin: 40px 0 40px 0; padding: 0; list-style: none; } #breadcrumbs-two li { float: left; } #breadcrumbs-two li b { display: block; width: 100%; background: #e6e6e6; padding: .4em 1.2em .6em 1.2em; float: left; text-decoration: none; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,.5); position: relative; } #breadcrumbs-two li b::before { content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-width: 1.5em 0 1.5em 1em; border-style: solid; border-color: #e6e6e6 #e6e6e6 #e6e6e6 transparent; left: -1em; } #breadcrumbs-two li b::after{ content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid #e6e6e6; right: -1em; } #breadcrumbs-two li.active b { background: #e5b35c; color: #fff; text-shadow: none; } #breadcrumbs-two li.active b::before { border-color: #e5b35c #e5b35c #e5b35c transparent; } #breadcrumbs-two li.active b::after { border-left-color: #e5b35c; } @media (max-width: 767px) { #breadcrumbs-two li { margin-bottom: 6px; } #breadcrumbs-two li b::before { border-color: #e6e6e6 #e6e6e6 #e6e6e6 #e6e6e6; } #breadcrumbs-two li b::after{ border-top: 1.5em solid #e6e6e6; border-bottom: 1.5em solid #e6e6e6; } #breadcrumbs-two li.active b::before { border-color: #e5b35c #e5b35c #e5b35c #e5b35c; } #breadcrumbs-two li.active b::after { border-color: #e5b35c; } } @media (min-width: 992px) { #breadcrumbs-two li span { display: inline-block; margin-left: 5px; } } .process-wrap ul { list-style: none; margin: 0; padding: 0; } .process-wrap ul li { background-color: #fff; border-width: 3px; border-style: solid; border-color: #4b9ec0; border-radius: 10px; width: 100%; height: 60px; position: relative; margin-bottom: 20px; } .process-wrap ul li:last-of-type { margin-right: 0; } .process-wrap ul li:last-of-type:after { background: none; } .process-wrap ul li span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 80%; text-align: center; font-size: 1.2rem; color: #000; } @media (max-width: 767px) { .process-wrap ul li:after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); z-index: 10; display: block; width: 30px; height: 30px; bottom: -30px; } } @media (min-width: 768px) { .process-wrap ul { display: flex; justify-content: space-between; } .process-wrap ul li { border-radius: 20px; border-width: 3px; margin-right: 30px; width: 25%; } .process-wrap ul li:after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; display: block; right: -30px; width: 30px; height: 30px; } } /* 樣式設定 */ .process-1 ul li { border-color: #f08848; } .process-1 ul li.active { background-color: #f08848; } .process-1 ul li.active span { color: #fff; } .process-1 ul li:after { background: url(../img/process-1-arrow1.jpg) no-repeat left center; background-size: contain; } @media (max-width: 767px) { .process-1 ul li:after { background: url(../img/process-1-arrow2.jpg) no-repeat center top; background-size: contain; } } /*======================================================== 最新消息 =========================================================*/ .news-post { padding-top: 20px; text-align: center; font-size: 1rem; } .news-post .post-minimal { position: relative; overflow: hidden; padding-bottom: 30px; margin-bottom: 40px; text-align: left; border-bottom: 1px solid #e9e9e9; } .news-post .post-minimal .post-body { padding: 0 30px; } .news-post .post-minimal * + .post-text { margin-top: 8px; } .news-post .post-minimal .post-meta { font-size: 0.9rem; } .news-post .post-minimal .post-meta time { display: inline-block; color: #fff; margin-right: 10px; width: 100px; min-height: 26px; line-height: 26px; text-align: center; background-color: #e5b35c; } .news-post .post-minimal .post-meta span a { color: #333; } .news-post .post-minimal .post-meta span a:hover { color: #e5b35c; } .news-post .post-minimal .post-body h2 a { font-size: 1.4rem; color: #333; font-weight: bold; margin: 10px 0; } .news-post .post-minimal .post-body h2 a:hover { color: #e5b35c; } .news-post .post-minimal .more a { display: inline-block; margin-top: 10px; font-weight: bold; color: #e5b35c; } @media (max-width: 991px) { .news-post .post-minimal { display: inline-block; width: 100%; max-width: 600px; background-color: #f1f1f1; } .news-post .post-minimal .post-body { padding: 10px 30px 0; } .news-post .post-minimal .post-image img { width: 100%; vertical-align: bottom; } } @media (min-width: 992px) { .news-post .post-minimal { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: top; -ms-flex-align: top; align-items: top; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .news-post .post-minimal .post-left img { width: 280px; } .news-post .post-minimal .post-body { padding: 0 30px; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } .news-post .post-minimal .post-left img { width: 320px; } .news-post .post-minimal .post-body { padding: 0 30px; } } @media (min-width: 1200px) { .news-post .post-minimal { -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } @media (min-width: 1600px) { .news-post .post-minimal .post-left img { width: 260px; } } /*======================================================== 媒體報導 =========================================================*/ .video-item { position: relative; margin-bottom: 3rem; } .video-item-img { position: relative; margin: 0; display: block; width: 100%; text-decoration: none; color: #fff; } .video-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; } .video-item-img:hover { color: #fff } .video-item-img:hover .video-item-mask { opacity: 1; visibility: visible } .video-item-img:hover .video-item-mask::after { height: 100% } .video-item-img img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .video-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 } .video-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 } .video-item-mask span { position: relative; display: block; z-index: 2; padding: 6px 30px 4px; } .video-item-mask span i { display: block; font-size: 2.4rem; color: #D30003; } .video-item-info { padding: 40px 40px 30px; background-color: #fff; border: 1px solid #d6d6d6; color: #111; } .video-item-info h4 { font-weight: bold; font-size: 1.4rem; } .video-item-info p { font-size: 0.9rem; line-height: 24px; } .video-item-info time { color: #e5b35c; font-weight: bold; } @media (min-width: 1600px) { .video-item { padding: 0 20px; } } /*======================================================== 最新消息內頁 =========================================================*/ .news-detail { text-align: left; border-bottom: 2px dashed #adadad; } .news-detail img { max-width: 100%; height: auto; margin-bottom: 20px; } .news-detail .sort { margin-bottom: 20px; } .news-detail .sort time { font-weight: bold; } .news-detail .sort span { display: inline-block; background-color: #769511; color: #fff; margin-right: 10px; border-radius: 15px; line-height: 28px; padding: 1px 20px; font-size: 0.9rem; } .news-detail-title { text-align: left; margin: 0 0 20px 0; color: #333; font-weight: bold; font-size: 1.8rem; } .news-detail-content { margin-bottom: 40px; } .news-detail-link { border-top: 2px dashed #adadad; padding: 1rem; font-size: 0.9rem; background-color: #ededed; } .news-detail-link h4 { font-size: 1.1rem; font-weight: bold; } .news-detail-link a { display: inline-block; color: #333; text-decoration: underline; margin-left: 10px; } .news-detail-link a:hover { text-decoration: none; } /* 分類+外連 */ .news .news-detail-row { display: flex; font-size: 1rem; color: #63636b; margin: 0 2px 6px 2px; } .news .news-detail-row a { color: #63636b; } .news .news-detail-row a:hover { text-decoration: underline; } .news .news-detail-row { line-height: 24px; margin-bottom: 14px; } .news .news-detail-row .news-detail-sort { color: #fff; padding: 0 10px; border-radius: 3px; font-size: 0.8rem; } .news .news-detail-row .news-detail-date { background-color: #c5880d; color: #fff; padding: 0 10px; border-radius: 3px; font-size: 1rem; } .news .news-detail-row .news-detail-date i { margin-right: 6px; } /*======================================================== 聯絡我們 =========================================================*/ .contact-info { } .contact-info ul { list-style: none; margin: 0; padding: 0; } .contact-info ul li { list-style: none; /* padding: 5px 0 5px 60px;*/ position: relative; margin-bottom: 10px; } .contact-info ul li i { display: inline-block; width: 20px; text-align: center; margin: 0 5px; padding: 5px 0; } .contact-info ul li:nth-of-type(1) i { color: #e71c30; } .contact-info ul li:nth-of-type(2) i { color: #028ad3; } .contact-info ul li:nth-of-type(3) i { color: #2e9876; } .contact-info ul li:nth-of-type(4) i { color: #cd7f0c; } .contact-info ul li [class^="flaticon-"]:before, .contact-info ul li [class*=" flaticon-"]:before, .contact-info ul li [class^="flaticon-"]:after, .contact-info ul li [class*=" flaticon-"]:after { margin-right: 0px; } /*======================================================== 各類表單 =========================================================*/ /* 表單設定 */ .form-horizontal { margin-bottom: 40px; } .form-horizontal label { margin-bottom: 0; font-weight: bold; color: #666; } .form-horizontal [class*="col-md-"] label:before, .form-horizontal .mb-3 label:before { font-family: 'Font Awesome 5 free'; content: "\f044"; font-weight: 900; display: inline-block; margin-right: 5px; color: #111; } .form-horizontal .form-control { border: 1px solid #ddd; background-color: #fff; } .form-control::-moz-placeholder { color: #999; opacity: 1; font-size: 16px; font-weight: bold; } .form-control:-ms-input-placeholder { color: #999; } .form-control::-webkit-input-placeholder { color: #999; } /* 意見表單 */ .contact-form { margin-bottom: 20px; } .contact-form [class *= col-] { position: relative; margin-bottom: 10px; } .form-group { padding: 10px 15px; margin-bottom: 0 !important; } .form-group:nth-of-type(2n+2) { background-color: #ededed; } .form-group b { display: block; font-size: 15px; } .input { text-decoration: none; border: 1px solid #c7c7c7; width: 100%; padding: 2px 2px; } /* 尺寸設定 */ @media (min-width: 768px) { .form-info { padding: 20px 20px 20px 70px; } .form-info { margin-right: 15px; } .input { width: 40%; } .form-group b { display: inline-block; } } /*======================================================== 表格 =========================================================*/ .table1 { border-collapse: collapse; text-align: left; margin: 0 0 20px 0; border: 1px solid #ccc; } .table1 th { /* background-color: #0da4bf; color: #fff; font-size: 1.1rem; font-weight: bold; padding: 10px 10px !important; text-align: center; */ padding: 10px 10px; text-align: center; border-right: 1px solid #ddd; background-color: #f1f1f1; } .table1 td { padding: 10px 15px; text-align: left; } .table1 td i { display: inline-block; margin-right: 5px; color: #e7a21a; font-size: 0.6rem; } .table-order { border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed; } .table-order tr { background-color: #f8f8f8; border: 1px solid #ddd; padding: 5px; } .table-order th, .table-order td { padding: 10px 1px; text-align: center; } .table-order td img { max-width: 60px; max-height: 60px; } .table-order tr td:last-of-type a { color: #861d11; } @media screen and (max-width: 1199px) { .table-order { border: 0; } .table-order thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .table-order tr { border-bottom: 3px solid #ddd; display: block; margin-bottom: 20px; } .table-order td { border-bottom: 1px solid #ddd; display: block; text-align: left; position: relative; } .table-order td::before { content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; width: 80px; margin-right: 10px; color: #000; font-size: 0.9rem; position: relative; z-index: 2; background-color: #d6d6d6; text-align: center; } .table-order td:last-child { border-bottom: 0; } .table-order td img { max-width: 100px; max-height: 100px; } } /*======================================================== ul設定 =========================================================*/ .ul-s1 { list-style: none; margin: 20px 0; padding: 0; text-align: left; } .ul-s1 > li { padding: 0 0 0 40px; margin-bottom: 10px; position: relative; } .ul-s1 > li span { width: 30px; height: 30px; border-radius: 15px; font-size: 1rem; color: #000; line-height: 30px; text-align: center; background-color: #9abdd2; position: absolute; left: 0; top: 2px; z-index: 9; } .ul-s2 { list-style: none; margin: 0 0 30px 0; padding: 0; } .ul-s2 li { border-bottom: 1px solid #ddd; padding: 3px 10px; } .ul-s2 li span { font-weight: bold; color: #548235; } .ul-s2 li:before { font-family: 'Font Awesome 5 free'; content: "\f0da"; font-weight: 900; display: inline-block; margin-right: 6px; } /*======================================================== 圖片效果 =========================================================*/ a.figure { display: block; position: relative; } a.figure:hover:before { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } a.figure:before { position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; content: ''; display: inline-block; background: rgba(255,255,255,0.15) url(../img/magnifier.png) no-repeat center center; opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); transition: .3s; } .picture-effect { position: relative; overflow: hidden; z-index: 1; } .picture-effect img { transform: scale(1); transition: .3s ease-out all; } .picture-effect a { display: inline-block; position: relative; } .picture-effect a:before { content: '了解更多'; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(206, 26, 26, 0.4); pointer-events: none; z-index: 1; opacity: 0; transition: .3s ease-out all; color: #fff; text-align: center; vertical-align: middle; } .picture-effect a:hover:before { opacity: 1; } .picture-effect a:hover img { transform: scale(1.1); }