/* CSS Document */ @import "default.css"; @import "ui.css"; /* 主要顏色 深咖啡 #3b1614 中咖啡 #8B2331 淺咖啡 #97625f LOGO色 #8B2331 灰線 #d7d7d7 文字深咖啡 #3b1614 文字灰 #c6c6c6 底色灰 #a8a8a8 底色灰2 #e6e6e6 */ body{font-family: "微軟正黑體", "新細明體", Arial, Helvetica, sans-serif;} /* -------------------------------- 促銷活動 -------------------------------- */ /* 促銷活動 20160426 */ .popup160426{ width:695px; height:640px; margin:0 auto; z-index:0; background:#fff; border:solid 2px #601c00; position:relative; z-index:0; } .popup160426 dl dt{ width:695px; height:480px; background:url(../Images/event180129/1.jpg) no-repeat; display:inline-block; } .popup160426 dl .pp1{ width:240px; height:250px; position:absolute; top:310px; right:-80px; background-image:url(../Images/event180129/bottle.png); background-position:0px 0px; background-size:240px auto; } .popup160426 dl .pp2{ margin:0 auto; z-index:0; display:block; } .popup160426 dl .pp2 a{ width:300px; height:50px; margin:0 auto; z-index:0; line-height:50px; background:url(../Images/event180129/2.png) no-repeat center; border:solid 1px #601c00; display:block; -moz-box-shadow:4px 4px 0 rgba(96,28,0,.4); -webkit-box-shadow:4px 4px 0 rgba(96,28,0,.4); box-shadow:4px 4px 0 rgba(96,28,0,.4); transition: background-color .5s; -moz-transition: background-color .5s; /* Firefox 4 */ -webkit-transition: background-color .5s; /* Safari 和 Chrome */ -o-transition: background-color .5s; /* Opera */ } .popup160426 dl .pp2 a:hover{ background:url(../Images/event180129/2a.png) no-repeat center; background-color:#601c00; } .popup160426 dl .pp3{ padding:20px 0; font-size:16px; line-height:25px; color:#601c00; text-align:center; } .popup160426 dl .pp3 input{ font-size:18px; color:#601c00; border:solid 2px #601c00; } /* 促銷活動 20180129 */ .popup180129{ width:750px; height:640px; margin:0 auto; z-index:0; background:url(../Images/event180129/1.jpg) no-repeat; position:relative; z-index:0; } .popup180129 dl{ width:95%; display:inline-block; padding:500px 0 0 40px; text-align:left; } .popup180129 dl .pp1{ width:240px; height:250px; position:absolute; top:350px; right:10px; background-image:url(../Images/event180129/bottle.png); background-position:0px 0px; background-size:240px auto; } .popup180129 dl .pp2{ margin:0 auto; z-index:0; display:block; } .popup180129 dl .pp2 a{ width:330px; height:60px; margin:0 auto; z-index:0; line-height:60px; background:url(../Images/event180129/2.png) no-repeat center; border:solid 1px #fff; display:inline-block; transition: background-color .5s;-moz-transition: background-color .5s;-webkit-transition: background-color .5s;-o-transition: background-color .5s; } .popup180129 dl .pp2 a:hover{ background-color:rgba(69, 22, 21, 0.9); } .popup180129 dl .pp3{ padding:20px 0; font-size:16px; line-height:25px; color:#fc9192; text-align:left; } .popup180129 dl .pp3 input{ font-size:18px; color:#3b1614; border:solid 2px #fc9192; } /* -------------------------------- 首頁部份 -------------------------------- */ /* mainPhotoIndex */ .mainPhotoIndex{ width:100%; height:417px; background:#fff; overflow:hidden; margin:0 auto; z-index:0; } .photoBoxIndex{ width:985px; height:417px; position:relative; left:50%; margin-left:-490px; /* margin-left:-683px; */} .bxslider{width:985px; height:417px; } .bxslider li{ width:985px; height:417px; } .bxslider li a{ height:417px; display:block;} /* mainPhotoIndex */ /*.mainPhotoIndex{ width:100%; height:635px; background:#fff; overflow:hidden; } .photoBoxIndex{ width:1366px; height:635px; position:relative; left:50%; margin-left:-683px; } .bxslider{width:1366px; height:635px; } .bxslider li{ width:1366px; height:635px; } .bxslider li a{ height:635px; display:block;}*/ .bx-pager{ position:relative; top:-95px; margin-right:10px; /*width: 980px; margin: 0 auto; */text-align: right; } .bx-pager a img{ border:solid 2px #3b1614;} .bx-pager a:hover img, #bx-pager a.active img{ border-color:#8B2331;} /* mainMiddleIndex */ .mainMiddleIndex { width:100%;} .middleBoxIndex { width:980px; height:400px; padding:30px 0 60px 0; margin:0 auto; z-index:888;} /* newsIndex */ .fb{ width:310px; height:160px; margin:0; overflow:hidden; float:left; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } .listB{ width:648px; text-align:left; margin:0 0 0 10px; float:left;} .listB ul{ width:310px; margin:0 14px 15px 0; float:left; } .listB .category{ width:300px; font-size:23px; line-height:30px; color:#3b1614; text-align:center; float:left;} .list{ width:310px; text-align:left; float:left;} .list ul{ width:310px; margin:0 7px 15px 0; } .list .category{ font-size:23px; line-height:30px; color:#3b1614; text-align:center; float:left;} /*.list{ width:310px; text-align:left; margin:0 7px 0 7px; float:left;} .list ul{ width:310px; margin:0 7px 20px 7px; } .list .category{ font-size:23px; line-height:30px; color:#3b1614; text-align:center; float:left;} */ /* 圖說文字效果CSS */ .photoitem { height:162px; margin-bottom:15px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; background:url(../Images/310x162.jpg) no-repeat center; overflow:hidden; } .photoitem li{ position:relative;} .photoitem .pic{ width:310px; height:162px;} .photoitem .pic img{ width:100%; height:100%;} .photoitem:hover { } .photoitem .txt{ width:285px; height:300px; padding:10px 15px; bottom:55px; background-color:rgba(0, 0, 0, 0.8); overflow:hidden; transition: bottom .5s; -moz-transition: bottom .5s; -webkit-transition: bottom .5s; -o-transition: bottom .5s;} .photoitem .txt a{ height:80px; color:#fff; display:block;} .photoitem:hover .txt{ bottom:162px;} .photoitem .txt .t1{ height:35px; overflow:hidden; } .photoitem .txt .t1 a{ height:35px; font-size:16px; line-height:35px; color:#fff; text-align:left; } .photoitem .txt .t2{ height:80px; margin-top:10px; overflow:hidden; } .photoitem .txt .t2 a{ height:80px; font-size:14px; line-height:20px; color:#c6c6c6; text-align:left; display:block;} /* -------------------------------- 內頁部份 -------------------------------- */ /* mainMiddle */ .mainMiddle { width:100%;} .middleBox { width:980px; margin:30px auto; z-index:888;} /* mainPhoto */ .mainPhoto{ width:100%; height:285px; z-index:1100; overflow:hidden; } .photoBox{ width:1366px; min-width:980px; height:285px; margin:0 auto; } .mainTxt { width:980px; padding:110px 0 0 0; text-align:left; margin:0 auto; z-index:0; } .mainTxt .category{ width:285px; padding-bottom:5px; font-size:45px; line-height:50px; color:#3b1614; font-weight:bold; text-align:center; text-shadow:1px 1px 1px #fff; } .mainTxt .category.w{ color:#fff; text-shadow:none; } .mainTxt .category span{ font-size:40px; } .mainTxt .intro{ width:285px; text-align:center; } .mainPhoto.img01{ background:url(../Images/News/photo.jpg) no-repeat center;} /* 最新消息 */ .mainPhoto.img02{ background:url(../Images/Stores/photo.jpg) no-repeat center;} /* 門市資訊 */ .mainPhoto.img03{ background:url(../Images/Product/photo.jpg) no-repeat center;} /* 嚴選商品 */ .mainPhoto.img04{ background:url(../Images/Coffee/photo.jpg) no-repeat center;} /* 咖啡豆專區 */ .mainPhoto.img05{ background:url(../Images/Lounge/photo.jpg) no-repeat center;} /* 伯朗Lounge卡 */ .mainPhoto.img06{ background:url(../Images/Brown/photo.jpg) no-repeat center;} /* 伯朗講堂 */ .mainPhoto.img07{ background:url(../Images/About/photo.jpg) no-repeat center;} /* 關於伯朗 */ .mainPhoto.img08{ background:url(../Images/Member/photo.jpg) no-repeat center;} /* 伯朗會員 */ .mainPhoto.img09{ background:url(../Images/About/photo01.jpg) no-repeat center;} /* 連絡我們 */ .mainPhoto.img10{ background:url(../Images/About/photo02.jpg) no-repeat center;} /* 網站地圖 */ .mainPhoto.img11{ background:url(../Images/App/photo.jpg) no-repeat center;} /* 伯朗行動APP */ .mainPhoto.img12{ background:url(../Images/App/photo2.png) no-repeat center #00c300; } /* LINE 禮品小舖 */ .mainPhoto.img1110{ background:url(../Images/About/photo1110.jpg) no-repeat center;} /* 關於伯朗 */ /* -------------------------------- 最新消息 -------------------------------- */ /* list 最新消息 */ #listBox.news{ width:100%;} #listBox.news .item{ width:230px; margin:0 40px 15px 40px; padding-bottom:30px; overflow:hidden;} #listBox.news .item li{ position:relative; } #listBox.news .item .pic{ width:230px; height:327px; background:url(../Images/310x162.jpg) no-repeat center; background-color:#d5d5d5; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow:hidden; } #listBox.news .item .pic img{ width:100%; height:100%; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;} #listBox.news .item .txt{ width:230px; height:50px; margin:10px 0; font-size:16px; line-height:25px; color:#000; text-align:left; overflow:hidden; float:left;} #listBox.news .item .btn{ width:100px; margin:0 2px; float:right;} #listBox.news .item .btn a{ font-size:16px; line-height:20px; color:#000; text-align:center; padding:5px 10px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} #listBox.news .item .btn a:hover{ color:#fff; background:#3b1614; } /* detail 最新消息 內頁 */ #detailBox.news{width:100%;} #detailBox.news .linebox{ width:100%; height:35px; background:url(../Images/linebox.png) repeat; margin:0 0 30px 0; float:left; } #detailBox.news .itemN{ padding:0 30px 0 0; text-align:left; float:left;} #detailBox.news .itemN .category{width:600px; font-size:23px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; float:left;} #detailBox.news .itemN .intro{ width:600px; padding:10px 0; font-size:15px; line-height:25px; color:#000; text-align:left; float:left;} #detailBox.news .itemN .pic{ width:320px; height:455px; margin:0 30px 30px 0; overflow:hidden; float:left;} #detailBox.news .itemN .pic img{ width:100%; height:100%;} #detailBox.news .itemN .b1{ width:100%; padding:5px 0; font-size:16px; line-height:25px; color:#8B2331; font-weight:bold; text-align:left; float:left;} #detailBox.news .itemN .b1 a{ color:#8B2331;} #detailBox.news .itemN .b1 a:hover{ color:#000; } /* -------------------------------- 門市資訊 -------------------------------- */ /* list 門市資訊 */ #listBox.stores{ width:100%;} #listBox.stores .item{ width:100%; } #listBox.stores .item .category{ width:100%; padding-top:20px; font-size:20px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; } #listBox.stores .item .title{ width:100%; font-size:20px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; } #listBox.stores .item .intro{ width:100%; padding:20px 0; font-size:15px; line-height:25px; color:#000; text-align:left;} #listBox.stores .item .intro a{ color:#8B2331;} #listBox.stores .item .pic{ width:340px; height:224px; margin:0 10px 10px 0; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow:hidden; float:left; } #listBox.stores .item .pic span{ font-size:15px; color:#fff; text-align:center; padding:10px 20px; background-color:rgba(0, 0, 0, 0.8); position:relative; bottom:34px; -moz-border-radius: 0 8px; -khtml-border-radius: 0 8px; -webkit-border-radius: 0 8px; border-radius: 0 8px; } #listBox.stores .item .pic img{ width:100%; } /* 門市資訊 地區 篩選器 */ .filtersBox{ width:100%;} .filtersBox .title{ width:100%; padding-bottom:10px; font-size:20px; line-height:25px; color:#3b1614; font-weight:bold; text-align:left; } .filtersBox .icon{ width:700px; height:90px;} .filtersBox .icon a{ width:60px; height:60px; margin-right:13px; background:#3b1614 no-repeat top center; float:left; position:relative; -moz-border-radius: 80px; -khtml-border-radius: 80px; -webkit-border-radius: 80px; border-radius: 80px; transition: bottom .5s; -moz-transition: bottom .5s; -webkit-transition: bottom .5s; -o-transition: bottom .5s; -moz-box-shadow: 1px 2px 2px rgba(0,0,0,.3); -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,.3); box-shadow: 1px 2px 2px rgba(0,0,0,.3);} .filtersBox .icon a:hover,.filtersBox .icon a.selected{ background-color:#8B2331; -moz-box-shadow:inset 1px 2px 2px rgba(0,0,0,.4); -webkit-box-shadow:inset 1px 2px 2px rgba(0,0,0,.4); box-shadow:inset 1px 2px 2px rgba(0,0,0,.4);} .filtersBox .icon a span{ width:60px; height:40px; font-size:11px; color:#000; text-align:center; position:absolute; bottom:-45px;} .filtersBox .icon .img01{ background-image:url(../Images/Stores/iconFilters.png); background-position:0;} /* Wifi */ .filtersBox .icon .img02{ background-image:url(../Images/Stores/iconFilters.png); background-position:-60px;} /* 近捷運 */ .filtersBox .icon .img03{ background-image:url(../Images/Stores/iconFilters.png); background-position:-120px;} /* 國民旅遊卡 */ .filtersBox .icon .img04{ background-image:url(../Images/Stores/iconFilters.png); background-position:-180px;} /* 刷卡 */ .filtersBox .icon .img05{ background-image:url(../Images/Stores/iconFilters.png); background-position:-240px;} /* 金車噶瑪蘭展售中心 */ .filtersBox .icon .img06{ background-image:url(../Images/Stores/iconFilters.png); background-position:-300px;} /* 包場 */ .filtersBox .icon .img07{ background-image:url(../Images/Stores/iconFilters.png); background-position:-360px;} /* 鄰近停車場 */ .filtersBox .icon .img08{ background-image:url(../Images/Stores/iconFilters.png); background-position:-420px;} /* 戶外區 */ /* 門市資訊 搜尋 */ .searchbox { width:100%; margin-bottom:30px;} .searchbox .input{ width:550px; float:left;} .searchbox .input .inputtxt{ width:100%; padding:10px; font-size:17px; color:#000; border:solid 1px #fff; background:#e6e6e6; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} .searchbox .btn{ width:100px; margin:0 2px; float:right;} .searchbox .btn a:hover{ color:#fff; background:#3b1614; } /* list 門市資訊 - 門市搜尋 inquirybox */ .inquirybox { width:95%; margin:40px 0 20px 0; padding:15px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} .inquirybox a{ color:#8B2331;} .inquirybox a:hover{ color:#3b1614;} .inquirybox .categoryL{ padding:10px; font-size:18px; font-weight:bold; color:#000; text-align:center;} .inquirybox .introB{ padding:0 10px 10px 10px; font-size:35px; line-height:55px; font-weight:bold; color:#8B2331; text-align:left; } .inquirybox .introL{ padding:10px; font-size:16px; line-height:25px; color:#000; text-align:left; } .inquirybox .btnL{ width:130px; margin:0 2px 20px 2px; float:left;} .inquirybox .btnL a{ font-size:16px; line-height:25px; color:#fff; background:#8B2331; text-align:center; padding:5px; border:solid 1px #d7d7d7; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} .inquirybox .btnL a:hover,.inquirybox .btnL .selected{ color:#fff; background:#3b1614; } .inquirybox .photo{ width:100%; margin-left:10px;} .inquirybox .photo a{ width:98px; height:65px; margin-right:5px; background-color:#d5d5d5; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; overflow:hidden; float:left;} .inquirybox .photo a img{ width:100%; height:100%; } .inquirybox .map{ padding:10px 0; } .inquirybox .introL span{ font-size:16px; color:#ff0000; } .inquirybox th{ font-size:18px; font-weight:bold; color:#000; text-align:center;} .inquirybox .introL li{ margin-right:10px; float:left; } .inquirybox .introL .in01{ width:30px; height:30px; background-color:#8B2331; background-image:url(../Images/Stores/iconFiltersS.png); -moz-border-radius: 34px; -khtml-border-radius: 34px; -webkit-border-radius: 34px; border-radius: 34px;} .inquirybox .introL .in02{ width:30px; height:30px; background-color:#8B2331; background-image:url(../Images/Stores/iconFiltersS.png); background-position:-30px; -moz-border-radius: 34px; -khtml-border-radius: 34px; -webkit-border-radius: 34px; border-radius: 34px;} .inquirybox .introL .in03{ width:30px; height:30px; background-color:#8B2331; background-image:url(../Images/Stores/iconFiltersS.png); background-position:-60px; -moz-border-radius: 34px; -khtml-border-radius: 34px; -webkit-border-radius: 34px; border-radius: 34px;} .inquirybox .introL .in04{ width:30px; height:30px; background-color:#8B2331; background-image:url(../Images/Stores/iconFiltersS.png); background-position:-90px; -moz-border-radius: 34px; -khtml-border-radius: 34px; -webkit-border-radius: 34px; border-radius: 34px;} .inquirybox .introL .in05{ width:30px; height:30px; background-color:#8B2331; background-image:url(../Images/Stores/iconFiltersS.png); background-position:-120px; -moz-border-radius: 34px; -khtml-border-radius: 34px; -webkit-border-radius: 34px; border-radius: 34px;} .inquirybox .introL .in06{ width:30px; height:30px; background-color:#8B2331; background-image:url(../Images/Stores/iconFiltersS.png); background-position:-150px; -moz-border-radius: 34px; -khtml-border-radius: 34px; -webkit-border-radius: 34px; border-radius: 34px;} .inquirybox .introL .in07{ width:30px; height:30px; background-color:#8B2331; background-image:url(../Images/Stores/iconFiltersS.png); background-position:-180px; -moz-border-radius: 34px; -khtml-border-radius: 34px; -webkit-border-radius: 34px; border-radius: 34px;} .inquirybox .introL .in08{ width:30px; height:30px; background-color:#8B2331; background-image:url(../Images/Stores/iconFiltersS.png); background-position:-210px; -moz-border-radius: 34px; -khtml-border-radius: 34px; -webkit-border-radius: 34px; border-radius: 34px;} /* list 門市資訊 - 推薦門市&新開幕 共用 */ #listBox.storesRecommend{ width:100%; margin-top:20px;} #listBox.storesRecommend .itemSR .p1 { width:218px; height:144px; margin:0 15px 15px 0; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; background:url(../Images/310x162.jpg) no-repeat center; background-color:#d5d5d5; overflow:hidden; float:left; } #listBox.storesRecommend .itemSR .p1 li{ position:relative;} #listBox.storesRecommend .itemSR .p1 .pic{ width:218px; height:144px;} #listBox.storesRecommend .itemSR .p1 .pic img{ width:100%; height:100%;} #listBox.storesRecommend .itemSR .p1 .txt{ width:218px; height:60px; padding:3px 15px; bottom:40px; background-color:rgba(0, 0, 0, 0.8); overflow:hidden; transition: bottom .5s; -moz-transition: bottom .5s; -webkit-transition: bottom .5s; -o-transition: bottom .5s;} #listBox.storesRecommend .itemSR .p1 .txt a{ height:144px; color:#fff; display:block;} #listBox.storesRecommend .itemSR .p1:hover .txt{ bottom:60px;} #listBox.storesRecommend .itemSR .p1 .txt .t1{ height:35px; font-size:16px; line-height:35px; color:#fff; text-align:left; overflow:hidden; } /* -------------------------------- 嚴選商品 -------------------------------- */ /* list 嚴選商品 */ #listBox.product{width:100%;} #listBox.product .category{ width:500px; padding-bottom:20px; font-size:30px; line-height:35px; color:#8B2331; text-align:left; font-weight:bold; float:left;} #listBox.product .itemPT{ width:200px; height:290px; margin:0 16px 20px 16px; padding-bottom:20px; border-bottom:dotted 1px #d7d7d7; float:left;} #listBox.product .itemPT .title{ width:100%; height:25px; font-size:17px; line-height:25px; color:#3b1614; text-align:center; overflow:hidden; } #listBox.product .itemPT .titleS{ width:100%; height:20px; font-size:14px; line-height:20px; color:#ff6702; text-align:center; overflow:hidden; } #listBox.product .itemPT .intro{ width:100%; max-height:35px; font-size:13px; line-height:18px; color:#8B2331; text-align:center; overflow:hidden;} #listBox.product .itemPT .pic{ width:200px; height:200px; margin-bottom:10px; float:left; } #listBox.product .itemPT .pic img{ width:100%;} #listBox.product .itemPT .new{ width:200px; height:200px; position:absolute; z-index:0;} #listBox.product .itemPT .new a{ width:200px; height:200px; border:solid 1px #fff; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow:hidden; display:block; } #listBox.product .itemPT .new a:hover, #listBox.product .itemPT .new .selected{ border:solid 1px #8B2331;} #listBox.product .itemPT .new.n01{ width:200px; height:200px; position:absolute; z-index:0;} #listBox.product .itemPT .new.n01 a{ width:200px; height:200px; background:url(../Images/Product/new.png) no-repeat; border:solid 1px #fff; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow:hidden; display:block; } #listBox.product .itemPT .new.n01 a:hover, #listBox.product .itemPT .new.n01 .selected{ border:solid 1px #8B2331;} #listBox.product .itemPT .bg{ width:200px; height:200px; background-repeat:no-repeat; } /* detail 嚴選商品 內頁 */ #detailBox.product{width:100%;} #detailBox.product .category{ padding-bottom:20px; font-size:30px; line-height:35px; color:#8B2331; text-align:left; font-weight:bold; } #detailBox.product .itemPT{ width:100%; text-align:left; border-bottom:dotted 1px #d7d7d7; margin-bottom:30px; padding-bottom:30px; float:left;} #detailBox.product .itemPT .pic{ width:300px; height:300px; margin:0 30px 0 0; border:solid 1px #d7d7d7; background:#fff; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow:hidden; float:left; } #detailBox.product .itemPT .pic img{ width:100%;} #detailBox.product .itemPT .category{ width:350px; font-size:20px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; padding-bottom:5px; float:left;} #detailBox.product .itemPT .title{ width:350px; margin-bottom:5px; font-size:15px; line-height:20px; color:#8B2331; text-align:left; float:left;} #detailBox.product .itemPT .titleS{ width:350px; margin-bottom:5px; font-size:14px; line-height:18px; color:#ff6702; text-align:left; float:left;} #detailBox.product .itemPT .intro{ width:350px; margin-bottom:10px; font-size:15px; line-height:25px; color:#000; text-align:left; float:left;} #detailBox.product .itemPT .new{ width:300px; height:300px; border:solid 1px #d7d7d7; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow:hidden; position:absolute; z-index:0;} #detailBox.product .itemPT .new.n01{ width:300px; height:300px; background:url(../Images/Product/new.png) no-repeat; border:solid 1px #d7d7d7; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow:hidden; position:absolute; z-index:0;} /*190326 新增 購物頁按鈕 */ #detailBox.product .itemPT .btn{width:52%;margin:30px 2px 20px 2px;display:inline-block;float:right;} #detailBox.product .itemPT .btn a{width:25%;height:34px;display:inline-block;font-size:16px;line-height:25px;color:#fff;background:#3b1614;text-align:center;padding:5px 11px;border:solid 1px #d7d7d7;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;transition:background-color .5s;-moz-transition:background-color .5s;-webkit-transition: background-color .5s;-o-transition:background-color .5s;margin-bottom:2px;} #detailBox.product .itemPT .btn a:hover{background:#e2e2e2;} #detailBox.product .itemPT .btn a{background-image:url(../Images/Product/LOGO.png);} #detailBox.product .itemPT .btn a:hover{background:#f5f5f5;background-image:url(../Images/Product/LOGO.png);} #detailBox.product .itemPT .btn a.pchome{background-position:0 3px;} #detailBox.product .itemPT .btn a.pchome:hover{background-position:-129px 3px;} #detailBox.product .itemPT .btn a.rakuten{background-image:url(../Images/Product/rakuten-LOGO1.svg);background-size:63%;background-repeat: no-repeat;background-position:center;} #detailBox.product .itemPT .btn a.rakuten:hover{background-image:url(../Images/Product/rakuten-LOGO2.svg);} #detailBox.product .itemPT .btn a.momo{background-image:url(../Images/Product/momo-logo01.svg);background-size:90%;background-repeat: no-repeat;background-position: center;} #detailBox.product .itemPT .btn a.momo:hover{background-image:url(../Images/Product/momo-logo02.svg);} #detailBox.product .itemPT .btn a.panda{background-position:0 -169px;} #detailBox.product .itemPT .btn a.panda:hover{background-position:-129px -169px;} /*#detailBox.product .itemPT .btn{width:130px;margin:30px 2px 20px 2px;float:right;} #detailBox.product .itemPT .btn a{font-size:16px;line-height:25px; color:#fff; background:#8B2331; text-align:center; padding:5px; border:solid 1px #d7d7d7; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition:background-color .5s; -o-transition: background-color .5s; display:block;} #detailBox.product .itemPT .btn a:hover, .btnL .selected{background:#3b1614;}*/ #detailBox.product .tablebox { width:95%; margin-bottom:20px; padding:15px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} #detailBox.product .tablebox .colorR{ width:15px; height:15px; background:url(../Images/Product/bean3.png) no-repeat; margin:0 auto; z-index:0;} #detailBox.product .tablebox .colorY{ width:15px; height:15px; background:url(../Images/Product/bean3.png) no-repeat -19px; margin:0 auto; z-index:0;} #detailBox.product .tablebox .colorG{ width:15px; height:15px; background:url(../Images/Product/bean3.png) no-repeat -38px; margin:0 auto; z-index:0;} #detailBox.product .tablebox .color{ width:15px; height:15px; margin:10px auto; z-index:0;} #detailBox.product .tablebox td:nth-child(11){ font-size:11px; text-align:center; } #detailBox.product .tablebox2 { width:95%; margin-bottom:20px; padding:15px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} #detailBox.product .tablebox2 .colorR{ width:15px; height:15px; background:url(../Images/Product/bean3.png) no-repeat; margin:0 auto; z-index:0;} #detailBox.product .tablebox2 .colorY{ width:15px; height:15px; background:url(../Images/Product/bean3.png) no-repeat -19px; margin:0 auto; z-index:0;} #detailBox.product .tablebox2 .colorG{ width:15px; height:15px; background:url(../Images/Product/bean3.png) no-repeat -38px; margin:0 auto; z-index:0;} #detailBox.product .tablebox2 .color{ width:15px; height:15px; margin:10px auto; z-index:0;} #detailBox.product .tablebox2 td:nth-child(10){ font-size:11px; text-align:center; } #detailBox.product .coffee_info{} #detailBox.product .coffee_info th, #detailBox.product .coffee_info td{ color:#000; text-align:center; } #detailBox.product .coffee_info th{font-size:15px; font-weight:bold;} #detailBox.product .coffee_info th span{font-size:11px;} #detailBox.product .coffee_info td{ padding:15px 0; font-size:13px; border-bottom: dotted 1px #d7d7d7;} #detailBox.product .coffee_info .left{ text-align:left;} .measuring{ width:95%; padding:20px; font-size:13px; line-height:25px; color:#000; background:#e6e6e6; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } .measuring span{ color:#8B2331; font-weight:bold; } .measuring .colorR{ width:15px; height:15px; margin:4px 10px 0 0; background:url(../Images/Product/bean3.png) no-repeat; float:left;} .measuring .colorY{ width:15px; height:15px; margin:4px 10px 0 0; background:url(../Images/Product/bean3.png) no-repeat -19px; float:left;} .measuring .colorG{ width:15px; height:15px; margin:4px 10px 0 0; background:url(../Images/Product/bean3.png) no-repeat -38px; float:left;} /* detail 嚴選商品 券 */ #detailBox.product .itemCC{ width:100%; text-align:left; float:left;} #detailBox.product .itemCC .pic{ width:700px; height:300px; margin-bottom:30px; border:solid 1px #d7d7d7; background:#fff; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow:hidden; float:left; } #detailBox.product .itemCC .pic img{ width:100%;} #detailBox.product .itemCC .title{ width:100%; font-size:20px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; padding-bottom:20px; float:left;} #detailBox.product .itemCC .intro{ width:100%; margin-bottom:30px; padding-bottom:30px; border-bottom:dotted 1px #d7d7d7; font-size:15px; line-height:25px; color:#000; text-align:left; float:left;} #detailBox.product .itemCC .intro a{ color:#8B2331; } #detailBox.product .itemCC .intro a:hover{ color:#ff6702; } /* -------------------------------- 咖啡豆專區 -------------------------------- */ /* list 咖啡豆專區 */ #listBox.coffee{ width:100%;} #listBox.coffee a.top{ margin-top:-80px; margin-bottom:80px; display:inline-block; } #listBox.coffee .intro{ width:100%; font-size:15px; line-height:25px; color:#000; text-align:left;} #listBox.coffee .intro span{ font-size:15px; color:#8B2331; } #listBox.coffee .intro a{ color:#8B2331; } #listBox.coffee .intro a:hover{ color:#ff6702; } #listBox.coffee .line{ padding:30px 0 0 0;} #listBox.coffee .line .category{ width:100%; font-size:25px; line-height:35px; color:#8B2331; font-weight:bold; text-align:left; } #listBox.coffee .line .category span{ font-size:18px;} #listBox.coffee .line .category2{ width:100%; font-size:23px; line-height:35px; color:#8B2331; font-weight:bold; text-align:left; } #listBox.coffee .line .intro{ width:100%; font-size:15px; line-height:25px; color:#000; text-align:left;} #listBox.coffee .line .intro a{ color:#8B2331; } #listBox.coffee .line .intro a:hover{ color:#ff6702; } #listBox.coffee .itemCF{ width:100%; display:inline-block; padding:20px 0; border-bottom:dotted 1px #d7d7d7; } #listBox.coffee .itemCF .maintitle{ width:540px; float:left; } #listBox.coffee .itemCF .maintitle .title{ width:100%; padding-top:10px; font-size:20px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; } #listBox.coffee .itemCF .maintitle .title span{ font-size:16px; padding-left:15px; line-height:30px; color:#8B2331;} #listBox.coffee .itemCF .maintitle .titleS{ width:100%; font-size:20px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; } #listBox.coffee .itemCF .maintitle .titleS span{ font-size:16px; padding-left:15px; line-height:30px; color:#8B2331;} #listBox.coffee .itemCF .maintitle .intro{ width:100%; padding:10px 0; font-size:15px; line-height:25px; color:#000; text-align:left;} #listBox.coffee .itemCF .maintitle .other{ width:100%; padding:10px 0; font-size:13px; line-height:25px; color:#8B2331; text-align:left;} #listBox.coffee .itemCF .pic{ width:150px; height:100%; display:inline-block; margin:0 10px 20px 0; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow:hidden; float:left; } #listBox.coffee .itemCF .pic img{ width:100%; } #listBox.coffee .itemCF a.btn{ width:auto; margin:15px 0 0 0; padding:5px 15px; font-size:15px; color:#fff; background-color:#8b2331; text-align:center; float:right; display:inline-block; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; } #listBox.coffee .itemCF a.btn:hover{ background-color:#3b1614; } /* 20190424 nancy 更改 */ /*#listBox.coffee .itemCF a.btn::before{ content:"線上購物"; }*/ #listBox.coffee .itemCF .btnall {text-align:right;display:block;clear:both;} #listBox.coffee .itemCF .btnall dd{display:inline-block;width:19%;} #listBox.coffee .itemCF .btnall a.btn{margin-left:5px;display:inline-block;float:none; width:78%;height:30px;line-height:25px;background:#3b1614;text-align:center;padding:5px 11px;border:solid 1px #d7d7d7;-webkit-border-radius: 8px;-moz-border-radius:8px;border-radius:8px;transition:background-color .5s;-moz-transition:background-color .5s;-webkit-transition:background-color .5s;-o-transition: background-color .5s;margin-bottom:2px;background-image:url(../Images/Coffee/LOGO.png);} #listBox.coffee .itemCF .btnall a.btn:hover{background:#f5f5f5;} #listBox.coffee .itemCF .btnall a.btn.b1{background-image:url(../Images/Coffee/rakuten-LOGO1.svg);background-size:63%;background-repeat:no-repeat;background-position:center;} #listBox.coffee .itemCF .btnall a.btn.b2{background-image:url(../Images/Coffee/LOGO.png);background-position:-4px 0;} #listBox.coffee .itemCF .btnall a.btn.b3{background-image:url(../Images/Coffee/momo-logo01.svg);background-size:90%;background-repeat: no-repeat;background-position:center;} #listBox.coffee .itemCF .btnall a.btn.b4{background-position:-4px -169px;} #listBox.coffee .itemCF .btnall a.btn.b5{background-position:-4px -227px;} #listBox.coffee .itemCF .btnall a.btn.b1:hover{background-image:url(../Images/Product/rakuten-LOGO2.svg);} #listBox.coffee .itemCF .btnall a.btn.b2:hover{background-position:-133px 0px;} #listBox.coffee .itemCF .btnall a.btn.b3:hover{background-image:url(../Images/Product/momo-logo02.svg);} #listBox.coffee .itemCF .btnall a.btn.b4:hover{background-position:-134px -169px;background-image:url(../Images/Coffee/LOGO.png);} #listBox.coffee .itemCF a.btn:hover{background-color:#3b1614;} /* 20190424 nancy 更改 END */ #listBox.coffee .itemCF6{ width:100%; padding:20px 0; border-bottom:dotted 1px #d7d7d7; } #listBox.coffee .itemCF6 .titleS{ width:100%; font-size:20px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; } #listBox.coffee .itemCF6 .titleS span{ font-size:16px; padding-left:15px; line-height:30px; color:#8B2331;} #listBox.coffee .itemCF6 .intro{ width:100%; padding:10px 0; font-size:15px; line-height:25px; color:#000; text-align:left;} #listBox.coffee .itemCF6 .pic{ width:150px; height:225px; margin:0 10px 20px 0; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow:hidden; float:left; } #listBox.coffee .itemCF6 .pic img{ width:100%; } /* 豆子lightbox用 */ .elementbox{ width:100%; font-size:13px; line-height:25px; color:#8B2331; text-align:left;} .elementbox dt{ padding:0 10px 0 0; float:left;} .elementbox dd{ margin:7px 2px 0 0; height:15px; text-align:left; background:url(../Images/Coffee/bean5.png) no-repeat; float:left;} .elementbox .been5{ width:91px; overflow:hidden;} .elementbox .been4{ width:75px; overflow:hidden;} .elementbox .been3{ width:55px; overflow:hidden;} .elementbox .been2{ width:35px; overflow:hidden;} .elementbox .been1{ width:15px; overflow:hidden;} /* right banner */ .bannerBox{ display: none; position:fixed; z-index:999; top:130px; right:30px; } .bannerBox a{ width:110px; height:560px; font-size:35px; line-height:40px; color:#fff; text-align:center; background:url(../Images/Coffee/banner.png) no-repeat; float:left;} .bannerBox a:hover{ background:url(../Images/Coffee/banner.png) no-repeat -110px; } /* 咖啡豆 篩選器 */ #coffeeBox{width:890px; overflow:hidden; background:#fff; margin:0 auto; z-index:0; display:block;} #coffeeBox h1{ font-size:25px; font-weight: bold; color:#8B2331; text-align:left; } #Container .mix{display: none;} #Container{ width:660px; height:640px; margin-bottom:25px; padding:50px 10px 50px 30px; font-size:15px; line-height:25px; color:#000; text-align:left; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; overflow:auto; float:left; } #Container:hover{background:#fff;} #Container p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;} #Container p:nth-child(3n+0){color:#c96;} #Container .mixfail{ font-size:18px; font-weight:bold; line-height:22px; color:#3b1614; text-align:center; } #coffeeMenu{ width:700px; margin-right:20px; float:left; } #coffeeMenu dl{ padding:7px 0; margin-bottom:2px; } #coffeeMenu .category{ width:100%; font-size:15px; line-height:18px; color:#fff; text-align:left; padding:10px; margin:5px 0; background:#3b1614 no-repeat top center; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #coffeeMenu .category span{ font-size:10px;} #coffeeMenu .BB{ width:220px; margin:0 5px 10px 5px; float: left; } #coffeeMenu .BB .title{ width:100%; font-size:18px; font-weight:bold; line-height:22px; color:#3b1614; text-align:left; padding:0 0 0 5px; margin:5px 0;} #coffeeMenu .BB .title span{ font-size:12px; line-height:18px; color:#3b1614; text-align:center; } #coffeeMenu .BB .intro{ width:100%; height:55px; padding:0 0 5px 5px; font-size:12px; line-height:18px; color:#8B2331; text-align:left; } #coffeeMenu .ALL{ margin-left:5px; float:left;} #coffeeMenu .ALL a{ padding:3px 10px; font-size:13px; color:#fff; text-align:center; background:#3b1614; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} #coffeeMenu .ALL a:hover{ background:#8B2331;} #coffeeMenu .txt{ width:auto; padding:3px 5px 0 10px; float:left;} #coffeeMenu .txt a{ font-size:14px; color:#000; font-weight:bold; text-align:left; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} #coffeeMenu .txt a:hover, #coffeeMenu .txt .selected{ color:#8B2331;} #coffeeMenu .bean{ width:21px; height:21px; padding-left:5px; margin:2px 0; float:left;} #coffeeMenu .bean a{ height:21px; background:url(../Images/Coffee/bean.png) no-repeat; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} #coffeeMenu .bean a:hover, #coffeeMenu .bean .selected{ background:url(../Images/Coffee/bean.png) no-repeat -21px; } #coffeeMenu .btn{ width: auto; margin: 0 auto 20px auto; z-index: 0; text-align: center; float: none; } #coffeeMenu .btn a{ padding:7px 40px; font-size:15px; color:#fff; text-align:center; background:#8B2331; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:inline-block; } #coffeeMenu .btn a:hover{ background:#3b1614;} .coffeeBox { width:210px; padding-bottom:20px; text-align:left; float:left;} .coffeeBox ul{ width:200px; margin:0 5px 10px 5px; float:left;} .coffeeBox .p1 { height:300px; margin-bottom:15px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; background-color:#d5d5d5; overflow:hidden; float:left; } .coffeeBox .p1 li{ position:relative;} .coffeeBox .p1 .pic{ width:200px; height:300px;} .coffeeBox .p1 .pic img{ width:100%; height:100%;} .coffeeBox .p1 .txt{ width:175px; height:300px; padding:8px 15px 10px 15px; bottom:60px; background-color:rgba(0, 0, 0, 0.8); overflow:hidden; transition: bottom .5s; -moz-transition: bottom .5s; -webkit-transition: bottom .5s; -o-transition: bottom .5s;} .coffeeBox .p1:hover .txt{ bottom:300px;} .coffeeBox .p1 .txt .t1{ /*height:40px;*/ font-size:16px; line-height:18px; color:#fff; text-align:left; } .coffeeBox .p1 .txt .t1 b{ width:auto; font-size:13px; color:#fff; } .coffeeBox .p1 .txt .t1 span{ font-size:11px; line-height:13px; color:#a8a8a8; text-align:left; display:block; } .coffeeBox .p1 .txt .t2{ height:220px; margin-top:10px; font-size:14px; line-height:20px; color:#c6c6c6; text-align:left; overflow:hidden; } /* -------------------------------- 伯朗Lounge卡 -------------------------------- */ /* list 伯朗Lounge卡 */ #listBox.Lounge{ width:100%;} #listBox.Lounge .item{ width:220px; margin:0 6px 15px 6px; padding-bottom:30px; overflow:hidden;} #listBox.Lounge .item li{ position:relative; } #listBox.Lounge .item .pic{ width:220px; height:313px; background:url(../Images/310x162.jpg) no-repeat center; background-color:#d5d5d5; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow:hidden; } #listBox.Lounge .item .pic img{ width:100%; height:100%; -moz-border-radius: 9px; -khtml-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px;} #listBox.Lounge .item .txt{ width:220px; height:50px; margin:10px 0; font-size:16px; line-height:25px; color:#000; text-align:left; overflow:hidden; float:left;} #listBox.Lounge .item .btn{ width:100px; margin:0 2px; float:right;} #listBox.Lounge .item .btn a{ font-size:16px; line-height:20px; color:#000; text-align:center; padding:5px 10px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} #listBox.Lounge .item .btn a:hover{ color:#fff; background:#3b1614; } /* detail 伯朗Lounge卡 最新活動 內頁 */ #detailBox.Lounge{width:100%;} #detailBox.Lounge .linebox{ width:100%; height:35px; background:url(../Images/linebox.png) repeat; margin:0 0 30px 0; float:left; } #detailBox.Lounge .itemN{ padding:0 30px 0 0; text-align:left; float:left;} #detailBox.Lounge .itemN .category{width:50%; font-size:23px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; float:left; } #detailBox.Lounge .itemN .intro{ width:50%; padding:10px 0; font-size:15px; line-height:25px; color:#000; text-align:left; float:left; } #detailBox.Lounge .itemN .pic{ width:300px; height:427px; margin-right:30px; overflow:hidden; float:left; } #detailBox.Lounge .itemN .pic img{ width:100%; height: auto;} /* detail 伯朗Lounge卡 使用說明 內頁 */ #detailBox.use{width:100%;} #detailBox.use .linebox{ width:100%; height:35px; background:url(../Images/linebox.png) repeat; margin:0 0 30px 0; float:left; } #detailBox.use .itemU{ width:100%; padding:0 30px 0 0; text-align:left; float:left;} #detailBox.use .itemU .category{ width:100%; margin-bottom:20px; font-size:23px; line-height:30px; color:#8b2331; font-weight:bold; text-align:left; float:left;} #detailBox.use .itemU .category::after{ content:"2016.11版"; width:auto; font-size:13px; text-align:right; float:right; } #detailBox.use .itemU .intro{ width:100%; padding:10px 0; font-size:15px; line-height:25px; color:#000; text-align:left; float:left;} #detailBox.use .itemM{ width:95%; padding:0 0 30px 0; text-align:left; float:left;} #detailBox.use .itemM .title{ font-size:18px; line-height:25px; color:#8b2331; text-align:left; } #detailBox.use .itemM a{ width:50%; padding:5px 0; font-size:15px; line-height:25px; color:#000; text-align:left; display:block; float:left;} #detailBox.use .itemM a:hover{ color:#8B2331;} #detailBox.use .itemW{ width:98%; padding:0 30px 0 0; text-align:left; float:left;} #detailBox.use .itemW .title{ width:100%; font-size:20px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; float:left;} #detailBox.use .itemW .title a{ display:block;height:50px;margin-top:-50px; } #detailBox.use .itemW .intro{ width:100%; padding:10px 0 30px 45px; margin-bottom:30px; border-bottom:dotted 1px #d7d7d7; font-size:15px; line-height:25px; color:#000; text-align:left; float:left;} #detailBox.use .itemW .intro a{ color:#8B2331;} #detailBox.use .itemW .intro span{ color:#ff0000;} /* detail 伯朗Lounge卡 換卡說明 內頁 */ #detailBox.card{width:100%;} #detailBox.card .linebox{ width:100%; height:35px; background:url(../Images/linebox.png) repeat; margin:0 0 30px 0; float:left; } #detailBox.card .itemM{ width:95%; padding:0 0 30px 0; text-align:left; float:left;} #detailBox.card .itemM .title{ font-size:18px; line-height:25px; color:#8B2331; text-align:left; padding-top:20px; } #detailBox.card .itemM a{ width:50%; padding:5px 0; font-size:15px; line-height:25px; color:#000; text-align:left; display:block; float:left;} #detailBox.card .itemM a:hover{ color:#8B2331;} #detailBox.card .itemW{ width:98%; padding:0 30px 0 0; text-align:left; float:left;} #detailBox.card .itemW .itemW .title a{ display:block;height:50px;margin-top:-50px; } #detailBox.card .itemW .title{ width:100%; font-size:20px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; float:left;} #detailBox.card .itemW .intro{ width:100%; padding:10px 0 30px 20px; margin-bottom:30px; border-bottom:dotted 1px #d7d7d7; font-size:15px; line-height:25px; color:#000; text-align:left; float:left;} #detailBox.card .itemW .intro a{ color:#8B2331;} #detailBox.card .itemW .intro span{ color:#ff0000;} /* 問與答 qa_title */ .qa_title{ width:100%; text-align:left;} .qa_title .title{ width:100%; margin-bottom:5px; cursor:pointer; display: inline-block; height:50px; font-size:18px; line-height:45px; font-weight:bold; color:#3b1614; text-align:left; border-bottom: dotted 1px #d7d7d7; } .qa_title .title span{ } .qa_title .intro{ margin:0 0 15px 15px; padding-left:20px; font-size:15px; line-height:30px; color:#565656; text-align:left; } .qa_title .intro img{ width:100%; height:auto; } .qa_title .intro a{ color:#fc6500; } .qa_title .qq{ width:50px; height:50px; margin-right:15px; float:left; } .qa_title dd{ display:none; } .qa_title dd .cq01{ font-size:15px; color:#565656; padding-bottom:15px; } /* -------------------------------- 二代卡專區 -------------------------------- */ /* list 二代卡專區 */ #listBox.count{ width:100%;} #listBox.count .category{ width:100%; padding-bottom:20px; font-size:30px; line-height:35px; color:#8B2331; text-align:left; font-weight:bold; } #listBox.count .title{ width:100%; padding-bottom:20px; font-size:20px; line-height:25px; color:#3b1614; text-align:left; font-weight:bold; } #listBox.count .title span{ font-size:15px; } /* 20151015 新增 */ #listBox.count .noteBox{ width:100%; font-size: 15px; line-height: 25px; color: #000; text-align: left; } #listBox.count .noteBox dl{ width:100%; padding:0 5px 20px 5px; float:left; } #listBox.count .noteBox dt{ font-size: 18px; line-height: 25px; color: #000; text-align: left; font-weight:bold; } #listBox.count .noteBox2{ width:50%; display:inline-block; float:left; } #listBox.count .noteBox2 .note_intro ul{ width: 100%; display:block; } #listBox.count .noteBox2 .note_intro dl dt{ margin-bottom:8px; } #listBox.count .noteBox2 .note_intro dd:first-child{ padding:25px 0 0 0; } #listBox.count .noteBox2 .note_intro dl dd{ width: 100%; padding:0 0 8px 0; font-size: 15px; line-height:20px; color: #000; } #listBox.count .note_title{ width:100%; padding-bottom:5px; font-size:20px; line-height:25px; color:#3b1614; text-align:left; font-weight:bold; } #listBox.count .note_intro{ width:100%; padding-bottom:40px; font-size: 15px; line-height: 25px; color: #000; text-align: left; } #listBox.count .note_intro ul{ width:50%; float:left; } #listBox.count .note_intro dl{ width: 100%; display:block; } #listBox.count .note_intro dt a{ font-size:16px; color:#fff; background:#3b1614; text-align:center; padding:8px 15px; border:solid 1px #fff; display:block; float:left; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; } #listBox.count .note_intro dt a:hover, .btn .selected{ color:#000; background:#fff; border:solid 1px #d7d7d7; } #listBox.count .note_intro .btn{ margin:0 15px 5px 0; } #listBox.count .note_intro dd{ padding-top:8px; font-size: 15px; color: #000; } #listBox.count .menuBoxCT { width:95%; padding-bottom:20px; } #listBox.count .menuBoxCT dt{ width:16%; font-size:17px; text-align:center; margin-bottom:10px; padding:15px; color:#fff; background:#3b1614; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; float:left; box-shadow:0 2px 3px rgba(0,0,0,.5); -moz-box-shadow:0 2px 3px rgba(0,0,0,.5); -webkit-box-shadow:0 2px 3px rgba(0,0,0,.5); } #listBox.count .menuBoxCT dt:first-child{ width:40%; } #listBox.count .menuBoxCT dt:nth-child(3){ width:25%; } #listBox.count .menuBoxCT dt:nth-child(5){ width:20%; } #listBox.count .menuBoxCT dt:nth-child(7){ width:20%; } #listBox.count .menuBoxCT dt:nth-child(9){ width:25%; font-size:19px; font-weight:bold; color:#fff; padding:14px 15px; } #listBox.count .menuBoxCT dd{ width:30px; height:30px; padding:12px 0; background:url(../Images/Lounge/icon_BB.png) no-repeat center; float:left;} #listBox.count .tableBox { width:95%; margin-bottom:20px; padding:15px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} #listBox.count .formBox { width:95%; margin-bottom:20px; padding:15px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} #listBox.count .formBox a{ color:#8b2331;} #listBox.count .formBox a:hover{ color:#3b1614;} #listBox.count .count_info th,#listBox.count .count_info td{ color:#000; text-align:center; } #listBox.count .count_info th{font-size:15px; font-weight:bold;} #listBox.count .count_info th span{font-size:11px;} #listBox.count .count_info td{ padding:15px 0; font-size:13px; border-bottom: dotted 1px #d7d7d7;} #listBox.count .count_info td span{font-size:17px; color:#ff0000;} #listBox.count .count_info .left{ text-align:left;} #listBox.count .count_info td .pic{ width:155px; height:155px; overflow:hidden; margin:0 auto; background-position:center center; background-repeat:no-repeat; background-size: contain; } #listBox.count .count_info td .pic img{ width:100% ; height:auto; } #listBox.count .count_info.CT td:first-child{ font-size:15px; font-weight:bold; text-align:center; background-color:#3b1614; color:#fff; } .popupBox{ width:auto; padding:30px 40px; margin:0 auto; z-index:0; background-color:#fff; } .popupBox .close{ margin:0 2px 20px 2px; float:right;} .popupBox a.close { font-size:12px; color:#000; background:#fff; text-align:center; padding:5px 10px; border:solid 1px #d7d7d7; display:block; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; } .popupBox a.close:hover{ color:#fff; background:#3b1614; } .popupBox .title{ width:100%; padding-bottom:20px; font-size:20px; line-height:25px; color:#3b1614; text-align:left; font-weight:bold; } .popupBox .formBox { width:95%; margin-bottom:20px; padding:15px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} .popupBox .formBox a{ color:#8b2331;} .popupBox .formBox a:hover{ color:#3b1614;} .popupBox .count_info th,.popupBox .count_info td{ color:#000; text-align:center; } .popupBox .count_info th{font-size:15px; font-weight:bold;} .popupBox .count_info th span{font-size:11px;} .popupBox .count_info td{ padding:15px 0; font-size:13px; border-bottom: dotted 1px #d7d7d7;} .popupBox .count_info td span{font-size:17px; color:#ff0000;} /* -------------------------------- 伯朗講堂 -------------------------------- */ /* list 伯朗講堂 - 近期活動 */ #listBox{ width:100%;} #listBox .category{ padding-bottom:10px; font-size:18px; line-height:30px; color:#3b1614; text-align:left; } #listBox .item{ width:324px; padding-bottom:30px; text-align:left; float:left;} #listBox .item ul{ width:310px; margin:0 7px 10px 7px;} #listBox .item .category{ font-size:23px; line-height:30px; color:#3b1614; text-align:center; float:left;} #listBox .item .i1{ height:85px; float:left; } #listBox .item .i1 .show{ font-size:18px; line-height:20px; color:#fff; text-align:center; width:85px; height:52px; margin-right:10px; padding-top:33px; -moz-border-radius: 85px; -khtml-border-radius: 85px; -webkit-border-radius: 85px; border-radius: 85px; background:#8B2331; float:left;} #listBox .item .i1 .full{ background:#a8a8a8;} #listBox .item .i1 .time{ width:200px; margin:6px 2px; font-size:30px; line-height:35px; color:#c6c6c6; text-align:center; float:left;} #listBox .item .i1 .btn{ width:100px; margin:0 2px; float:right;} #listBox .item .i1 .btn a{ font-size:16px; line-height:20px; color:#000; text-align:center; padding:5px 10px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} #listBox .item .i1 .btn a:hover{ color:#fff; background:#3b1614; } /* 圖說文字效果CSS */ #listBox .item .p1 { height:162px; margin-bottom:15px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; background:url(../Images/310x162.jpg) no-repeat center; background-color:#d5d5d5; overflow:hidden; float:left; } #listBox .item .p1 li{ position:relative;} #listBox .item .p1 .pic{ width:310px; height:162px;} #listBox .item .p1 .pic img{ width:100%; height:100%;} #listBox .item .p1:hover { } #listBox .item .p1 .txt{ width:285px; height:300px; padding:10px 15px; bottom:55px; background-color:rgba(0, 0, 0, 0.8); overflow:hidden; transition: bottom .5s; -moz-transition: bottom .5s; -webkit-transition: bottom .5s; -o-transition: bottom .5s;} #listBox .item .p1 .txt a{ height:80px; color:#fff; display:block;} #listBox .item .p1:hover .txt{ bottom:162px;} #listBox .item .p1 .txt .t1{ height:35px; font-size:16px; line-height:35px; color:#fff; text-align:left; overflow:hidden; } #listBox .item .p1 .txt .t1 a{ height:35px; font-size:16px; line-height:35px; color:#fff; text-align:left; } #listBox .item .p1 .txt .t2{ height:80px; margin-top:10px; font-size:14px; line-height:20px; color:#c6c6c6; text-align:left; overflow:hidden; } #listBox .item .p1 .txt .t2 a{ height:80px; font-size:14px; line-height:20px; color:#c6c6c6; text-align:left; display:block;} /* detail 伯朗講堂 - 近期活動 內頁 */ #detailBox{ } #detailBox .linebox{ width:100%; height:35px; background:url(../Images/linebox.png) repeat; margin:30px 0; float:left; } #detailBox .item{ width:440px; padding:0 30px 0 0; text-align:left; float:left;} #detailBox .item .show{ font-size:18px; line-height:20px; color:#fff; text-align:center; width:85px; height:52px; margin-right:10px; padding-top:33px; -moz-border-radius: 85px; -khtml-border-radius: 85px; -webkit-border-radius: 85px; border-radius: 85px; background:#8B2331; float:left;} #detailBox .item .full{ background:#a8a8a8;} #detailBox .item .time{ width:340px; margin:3px 2px; font-size:25px; line-height:35px; color:#c6c6c6; text-align:left; float:left;} #detailBox .item .category{ width:340px; padding-bottom:15px; font-size:23px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; float:left;} #detailBox .item .intro{ padding:10px 0; font-size:15px; line-height:25px; color:#000; text-align:left; float:left;} #detailBox .item .b1{ width:140px; margin:0 2px; float:right;} #detailBox .item .b1 a{ font-size:18px; line-height:25px; color:#fff; background:#3b1614; text-align:center; padding:10px; border:solid 1px #d7d7d7; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} #detailBox .item .b1 a:hover{ color:#fff; background:#a8a8a8; } #detailBox .itemP { height:259px; margin-bottom:15px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; background:url(../Images/310x162.jpg) no-repeat center; background-color:#d5d5d5; overflow:hidden; float:left; } #detailBox .itemP ul{ position:relative;} #detailBox .itemP .pic{ width:495px; height:259px;} #detailBox .itemP .pic img{ width:100%; height:100%;} #detailBox .itemW{ width:980px; text-align:left; float:left;} #detailBox .itemW .category{ font-size:23px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; float:left;} #detailBox .itemW .intro{ padding:10px 0; font-size:15px; line-height:25px; color:#000; text-align:left; float:left;} #detailBox .itemW .b1{ padding:10px 0; font-size:16px; line-height:25px; color:#8B2331; font-weight:bold; text-align:left;} #detailBox .itemW .b1 a{ color:#8B2331;} #detailBox .itemW .b1 a:hover{ color:#000; } /* list 伯朗講堂 - 活動花絮 */ #listBox.photobook .item{} #listBox.photobook .item ul{} #listBox.photobook .item .category{} #listBox.photobook .item .i1{ height:35px; } #listBox.photobook .item .i1 .time{ width:180px; margin:0 2px; font-size:25px; text-align:left; float:left; } #listBox.photobook .item .i1 .btn{ width:120px; } #listBox.photobook .item .i1 .btn a{ font-size:16px; line-height:20px; color:#000; text-align:center; padding:5px 10px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} #listBox.photobook .item .i1 .btn a:hover{ color:#fff; background:#3b1614; } /* 圖說文字效果CSS */ #listBox.photobook .item .p1 { height:230px; } #listBox.photobook .item .p1 .pic2{ height:230px; background-size:cover; margin:0 auto; overflow:hidden; text-align:center;} #listBox.photobook .item .p1 .pic2 p{ display:table-cell; vertical-align:middle; text-align:center; width:310px; height:230px;} #listBox.photobook .item .p1 .pic2 img{ min-width:100%; height:100%; display:inline-block; } #listBox.photobook .item .p1 .txt{ width:285px; height:300px; padding:10px 15px; bottom:55px; background-color:rgba(0, 0, 0, 0.8); overflow:hidden; transition: bottom .5s; -moz-transition: bottom .5s; -webkit-transition: bottom .5s; -o-transition: bottom .5s;} #listBox.photobook .item .p1 .txt a{ height:80px; color:#fff; display:block;} #listBox.photobook .item .p1:hover .txt{ bottom:230px;} #listBox.photobook .item .p1 .txt .t1{ height:35px; font-size:16px; line-height:35px; color:#fff; text-align:left; overflow:hidden; } #listBox.photobook .item .p1 .txt .t1 a{ height:35px; font-size:16px; line-height:35px; color:#fff; text-align:left; } #listBox.photobook .item .p1 .txt .t2{ height:143px; margin-top:10px; font-size:14px; line-height:20px; color:#c6c6c6; text-align:left; overflow:hidden; } #listBox.photobook .item .p1 .txt .t2 a{ height:143px; font-size:14px; line-height:20px; color:#c6c6c6; text-align:left; display:block;} /* detail 伯朗講堂 - 活動花絮 內頁 */ #detailBox.photobook .item{ width:300px; overflow:hidden;} #detailBox.photobook .item .time{ } #detailBox.photobook .item .category{ } #detailBox.photobook .item .intro{ height:370px; overflow:hidden; } /* 合成圖 */ .mixPhoto{ width:620px; margin-right:30px; float:left; } .mixPhoto .photo, .mixPhoto .bx-viewport{ width:620px; height:460px; /*background-color:#d5d5d5;*/ overflow:hidden; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;} .mixPhoto .photo li{ width:620px; height:460px; background:url(../Images/310x162.jpg) no-repeat center center; background-size:cover; margin:0 auto; overflow:hidden; text-align:center; } .mixPhoto .photo li p{ display:table-cell; vertical-align:middle; text-align:center; width:620px; height:460px;} .mixPhoto .photo img{ max-width:100%; height:100%; display:inline-block; } .mixPhoto .pic{ width:540px; height:76px; overflow:hidden; margin:0; float:left; } .mixPhoto .pic li{ width:103px; height:76px; margin-right:5px; float:left; } .mixPhoto .pic li a{ height:76px; display:block; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; background-position:center; background-size:cover; } .mixPhoto .pic li a:hover, .mixPhoto .pic li .active{ height:72px; border:solid 2px #8B2331; background-color:#3b1614; background-position:center; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;} .mixPhoto .pic a img{ max-width:100%; max-height:100%; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } .mixPhoto .L { width:30px; height:45px; margin:18px 5px 0 0; float:left;} .mixPhoto .L a{ height:45px; background:url(../Images/arrow.png) no-repeat; display:block; } .mixPhoto .L a:hover{ background:url(../Images/arrow.png) no-repeat -30px; } .mixPhoto .R { width:30px; height:45px; margin:18px 0 0 5px; float:left;} .mixPhoto .R a{ height:45px; background:url(../Images/arrow.png) no-repeat -60px; display:block; } .mixPhoto .R a:hover{ background:url(../Images/arrow.png) no-repeat -90px; } .mixPhoto .bx-caption { position: absolute; bottom:0; left:0; background: rgba(80, 80, 80, 0.75); width: 100%; } .mixPhoto .bx-caption span { width:600px; height:18px; overflow:hidden; display: block; font-size: 15px; padding:10px 5px 10px 10px; color:#FFF; white-space: nowrap;} /* -------------------------------- 伯朗行動APP -------------------------------- */ /* detail 伯朗行動APP */ #detailBox.app{ width:100%; } #detailBox.app .category{ width:75%; margin:100px 0 50px 0; font-size:20px; line-height:35px; color:#8B2331; text-align:left; float:left; } #detailBox.app .photo{ width:215px; height:605px; margin-right:30px; background:url(../Images/App/phone.png) no-repeat; float:left; } #detailBox.app .qrcode{ padding:0; } #detailBox.app .qrcode .i1{ width:75%; margin-bottom:30px; font-size:20px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; float:left; } #detailBox.app .qrcode .i1 a{ width:172px; height:75px; margin-right:20px; background:url(../Images/App/i1.png) no-repeat center; float:left; } #detailBox.app .qrcode .i2{ width:75%; font-size:20px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; float:left; } #detailBox.app .qrcode .i2 a{ width:172px; height:75px; margin-right:20px; background:url(../Images/App/i2.png) no-repeat center; float:left; } #detailBox.app .qrcode .i1 span, #detailBox.app .qrcode .i2 span{ font-size:15px; color:#000; } #detailBox.app .qrcode .i1 b, #detailBox.app .qrcode .i2 b{ height:75px; margin-right:20px; float:left; } /* detail LINE禮品小舖 */ #detailBox.online{ width:100%; } #detailBox.online dl{ margin-bottom:50px; padding-bottom:50px; border-bottom: dotted 1px #d7d7d7; } #detailBox.online dl dt{ width:100%; font-size:20px; line-height:35px; color:#8B2331; text-align:left; } #detailBox.online dl dd{ font-size:15px; color:#000; text-align:left; } #detailBox.online .w50 dt{ width:100%; font-size:20px; line-height:35px; color:#8B2331; text-align:left; } #detailBox.online .w50 dd{ width:340px; line-height:50px; display:inline-block; vertical-align:top; margin:0 140px 30px 0; font-size:15px; color:#000; text-align:left; } #detailBox.online .w50 dd img{ width:325px; height:auto; border:solid 1px #8B2331; } #detailBox.online .w50 b::before{ width:50px; line-height:50px; margin:0 10px 10px 0; border-radius:50px; background-color:#8B2331; font-size:14px; color:#fff; text-align:center; float:left; } #detailBox.online .w50 .s1::before{ content:"Step1"; } #detailBox.online .w50 .s2::before{ content:"Step2"; } #detailBox.online .w50 .s3::before{ content:"Step3"; } #detailBox.online .w50 .s4::before{ content:"Step4"; } #detailBox.online .w50 .s5::before{ content:"Step5"; } #detailBox.online .w50 dd span{ width:100%; margin-bottom:10px; display:block; } #detailBox.online .w50 .w100{ width:100%; display:block; } #detailBox.online .w50 .half{ line-height:25px; } /* -------------------------------- 關於伯朗 -------------------------------- */ /* detail 關於伯朗 */ #detailBox.about{width:100%;} #detailBox.about .linebox{ width:100%; height:35px; background:url(../Images/linebox.png) repeat; margin:0 0 30px 0; float:left; } #detailBox.about .itemA{ padding:0 30px 0 0; text-align:left; float:left;} #detailBox.about .itemA .category{ width:100%; font-size:20px; line-height:30px; color:#8B2331; text-align:left; padding-bottom:30px; float:left;} #detailBox.about .itemA .title{ width:100%; font-size:20px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; float:left;} #detailBox.about .itemA .intro{ width:100%; padding:10px 0 30px 20px; margin-bottom:30px; border-bottom:dotted 1px #d7d7d7; font-size:15px; line-height:25px; color:#000; text-align:left; float:left;} #detailBox.about .itemA .intro a{ color:#8B2331;} #detailBox.about .itemA .intro span{ color:#ff0000;} #detailBox.about .itemA .title.F450{ width:450px; float:left; } #detailBox.about .itemA .intro.F450{ width:450px; float:left; } #detailBox.about .itemA .intro.F450 img{ width:323px; margin-right:40px; float:left; } /* detail 企業徵才 */ #detailBox.about .arrowBox{ width:45%; display:inline-block; margin:0 20px; vertical-align:top; } #detailBox.about .arrowBox .title{ margin-bottom:10px; font-size:25px; line-height:30px; color:#3b1614; font-weight:bold; text-align:left; } #detailBox.about .arrowBox dl{ width:auto; display:inline-block; vertical-align:top; position:relative; } #detailBox.about .arrowBox dl.L::before{ content:""; width:auto; display:inline-block; font-size:15px; color:#000; text-align:center; position:absolute; top:40px; left:-10px; } #detailBox.about .arrowBox dl.R::after{ content:""; width:auto; display:inline-block; font-size:15px; color:#000; text-align:center; position:absolute; top:40px; right:-10px; } #detailBox.about .arrowBox dl.T::before, #detailBox.about .arrowBox dl.TD::before, #detailBox.about .arrowBox dl.D::after{ content:""; width:100%; display:inline-block; font-size:15px; color:#000; text-align:center; position:absolute; top:-10px; } #detailBox.about .arrowBox dl.L::before{ content:"←"; } #detailBox.about .arrowBox dl.R::after{ content:"→"; } #detailBox.about .arrowBox dl.T::before{ content:"↑"; } #detailBox.about .arrowBox dl.TD::before{ content:"↓"; } #detailBox.about .arrowBox dl.D::after{ content:"↓"; } #detailBox.about .arrowBox dl dt{ font-size:20px; line-height:30px; color:#3b1614; font-weight:bold; } #detailBox.about .arrowBox dl dd{ margin-bottom:10px; font-size:15px; line-height:25px; color:#000; } #detailBox.about .arrowBox .black, #detailBox.about .arrowBox .red, #detailBox.about .arrowBox .coffee{ width:190px; height:60px; display:inline-block; margin:10px; padding:10px 0; font-size:15px; line-height:20px; color:#fff; font-weight:normal; text-align:center; border-radius:8px; } #detailBox.about .arrowBox .black b, #detailBox.about .arrowBox .red b, #detailBox.about .arrowBox .coffee b{ width:100%; display:inline-block; font-size:20px; font-weight:bold; } #detailBox.about .arrowBox .black{ background-color:#000; } #detailBox.about .arrowBox .red{ background-color:#9e0029; } #detailBox.about .arrowBox .coffee{ background-color:#41220f; } #detailBox.about .arrowBox dl.w100{ width:100%; display:inline-block; vertical-align:top; } #detailBox.about .arrowBox .rd dd, #detailBox.about .arrowBox .ce dd{ width:45%; height:70px; display:inline-block; padding-top:20px; vertical-align:top; font-size:15px; color:#fff; text-align:center; border-radius:8px; } #detailBox.about .arrowBox .rd dd:nth-child(1), #detailBox.about .arrowBox .ce dd:nth-child(1){ font-size:20px; line-height:50px; font-weight:bold; } #detailBox.about .arrowBox .rd dd{ background-color:#9e0029; } #detailBox.about .arrowBox .ce dd{ background-color:#41220f; } /* -------------------------------- 伯朗會員 -------------------------------- */ /* 伯朗會員 加入會員 */ .memberbox{ width:93%; height:440px; margin-bottom:25px; padding:30px; font-size:15px; line-height:25px; color:#000; text-align:left; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; overflow:auto; float:left; } .memberbox a{ width:auto; display:inline-block; margin:0 5px; font-weight:bold; color:#8B2331; text-decoration:underline; } .memberbox a:hover{ color:#3b1614; } .memberbox:hover{background:#fff;} .memberbox p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;} .memberbox p:nth-child(3n+0){color:#c96;} .memberbox dt{ font-size:20px; line-height:30px; color:#3b1614; text-align:left;} .memberbox dd{ padding:10px 0 30px 0; font-size:15px; line-height:25px; color:#000; text-align:left; } .memberbox dd span{ font-weight:bold; } /* 伯朗會員 優惠券下載 */ .couponsbox{ width:93%; margin-bottom:25px; padding:30px; font-size:15px; line-height:25px; color:#000; text-align:left; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .couponsbox dt{ width:70%; font-size:16px; line-height:30px; color:#3b1614; text-align:left; float:left;} .couponsbox dd{ width:30%; font-size:16px; font-weight:bold; line-height:25px; color:#000; text-align:right; float:right;} .couponsbox img{ width:100%; height:100%;} /* -------------------------------- 網站地圖 -------------------------------- */ /* 網站地圖 */ .mapbox { margin:10px; padding:10px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .mapbox .menu{ margin-right:5px; float:left;} .mapbox .menu a{ font-size:16px; line-height:20px; color:#000; padding:13px 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} .mapbox .menu a:hover,.mapbox .menu .selected{ background-color:#3b1614; color:#fff;} .mapbox .menu.B{ width:137px; text-align:center; } .mapbox .menu.B a{ background-color:#3b1614; color:#fff; } /* -------------------------------- 購物網站 -------------------------------- .mainPhoto.img10{ background-image:url(../Images/Shopping/KV.png); background-repeat:no-repeat; background-position:center center; background-size:cover;}*/ .shopping{} .shopping .title{padding-bottom:70px;font-size: 30px;line-height: 35px;color: #8B2331;text-align: left;font-weight: bold;width: 750px;margin: 0 auto;} .shopping .icon{ width:750px; margin:0 auto;display:block; margin-bottom:180px;} .shopping .icon a{display:inline-block;margin-left:65px; text-align:center;} .shopping .icon a b:first-child{display:block; background-image:url(../Images/Shopping/icon.png); width:200px; height:200px; background-repeat:no-repeat; background-color:#3b1614;border-radius:20px; border:solid 1px #FFF;transition: background-color .5s ,border .5s;} .shopping .icon a:hover b:first-child{background-color:#f5f5f5; border:solid 1px #d7d7d7;} .shopping .icon a b:last-child{width: 100%;height: 25px;font-size: 17px;line-height: 25px; color: #3b1614;text-align:center; margin-top:15px; display:block; transition:color .5s;} .shopping .icon a:hover b:last-child{ color:#8b2331;} .shopping .icon a.btn4{margin-left:0;} .shopping .icon a.btn1{margin-left:0;} .shopping .icon a.btn1 b:first-child{background-position:center 17px;} .shopping .icon a.btn2 b:first-child{background-position:center -335px;} .shopping .icon a.btn3 b:first-child{background-position:center -680px;} .shopping .icon a.btn4 b:first-child{background-position:center -1055px;} .shopping .icon a.btn5 b:first-child{background-position:center -1435px;} .shopping .icon a.btn1:hover b:first-child{background-position:center -163px;} .shopping .icon a.btn2:hover b:first-child{background-position:center -510px;} .shopping .icon a.btn3{margin-left:0;} .shopping .icon a.btn3:hover b:first-child{background-position:center -855px;} .shopping .icon a.btn4:hover b:first-child{background-position:center -1254px;} .shopping .icon a.btn5:hover b:first-child{background-position:center -1617px;} /* 適應型網頁CSS */ @media screen and (max-width: 1160px) { .mainPhoto{ width:100%; min-width:980px;} #maintopmenu{ width:100%;} } @media screen and (max-width: 640px) { /* 套用無敵文章大標 font-size:28px; line-height:35px; 套用文章大標 font-size:25px; line-height:35px; 套用文章標題 font-size:28px; line-height:45px; 套用文章內文 font-size:23px; line-height:35px; 套用menu部份 font-size:22px; line-height:30px; */ /* -------------------------------- 首頁部份 -------------------------------- */ /* mainPhotoIndex OK! */ .mainPhotoIndex{ width:100%; height:417px; background:#fff; overflow:hidden; margin:0 auto; z-index:0; } .photoBoxIndex{ width:640px; height:417px; position:relative; left:50%; margin-left:-320px; } .bxslider{width:640px; height:417px; } .bxslider li{ width:640px; height:417px; } .bxslider li a{ height:417px;} #bx-pager{ top:-110px; margin-right:20px; } /* mainMiddleIndex OK! */ .mainMiddleIndex { width:100%;} .middleBoxIndex { width:600px; height:400px; padding:30px 20px 60px 20px; } /* newsIndex OK! */ .fb{ width:285px; height:270px; margin:0 0 0 22px; text-align:left; float:left; } .listB{ width:100%; } .listB ul{ width:290px; margin:0 10px 10px 0; } .listB .category{ width:290px; font-size:30px; margin-bottom:20px; } .list{ width:290px; margin:0;} .list ul{ width:290px; margin:0 10px 10px 0; } .list .category{ font-size:30px; margin:10px 0 20px 0; } /* 圖說文字效果CSS OK! */ .photoitem { height:162px; float:left; } .photoitem .txt .t1 a{ width:95%; font-size:23px; line-height:35px; } .photoitem .txt .t2{ height:96px; margin-top:5px; } .photoitem .txt .t2 a{ width:95%; height:96px; font-size:20px; line-height:30px; } /* -------------------------------- 內頁部份 -------------------------------- */ /* mainMiddle OK! */ .middleBox { width:600px; padding:0 20px; } /* mainPhoto OK! */ .mainPhoto{ width:100%; min-width:640px; height:180px; } .mainPhoto img{ width:auto; height:auto; } .photoBox{ width:100%; min-width:640px; height:180px; } .mainTxt { width:70%; padding:50px 0 0 0; text-align:left; float:left; } .mainTxt .category{ width:300px; font-size:43px; text-align:center; } .mainTxt .intro{ width:300px; text-align:center; } /* -------------------------------- 最新消息 -------------------------------- */ /* list 最新消息 OK! */ #listBox.news .item{ width:270px; margin:0 30px 15px 0; } #listBox.news .item li{ position:relative; } #listBox.news .item .pic{ width:270px; height:385px; } #listBox.news .item .txt{ width:270px; height:60px; font-size:23px; line-height:30px; } #listBox.news .item .btn{ width: auto; } #listBox.news .item .btn a{ font-size:22px; padding:15px 40px; } /* detail 最新消息 內頁 OK! */ #detailBox.news .itemN{ padding:0; } #detailBox.news .itemN .category{ width:100%; font-size:27px; line-height:35px; } #detailBox.news .itemN .intro{ width:100%; padding:10px 0; font-size:20px; line-height:30px; } #detailBox.news .itemN .pic{ width:600px; height: auto; margin:0 0 30px 0; } #detailBox.news .itemN .pic img{ width:100%; height: auto;} #detailBox.news .itemN .b1{ font-size:20px; line-height:30px; } /* -------------------------------- 門市資訊 -------------------------------- */ /* list 門市資訊 OK! */ #listBox.stores{ width:100%; } #listBox.stores .item{ width:100%; } #listBox.stores .item .category{ padding-top:20px; font-size:27px; line-height:35px; } #listBox.stores .item .title{ font-size:35px; line-height:450px; } #listBox.stores .item .intro{ padding:0 0 20px 0; font-size:20px; line-height:30px; } #listBox.stores .item .pic{ width:600px; height:395px; margin:0 0 20px 0; } #listBox.stores .item .pic span{ font-size:25px; padding:20px; bottom:55px; } #listBox.stores .item .pic img{ width:100%; height:100%; } /* 門市資訊 地區 篩選器 OK! */ .filtersBox{ width:100%; padding-bottom:40px; } .filtersBox .title{ padding:20px 0; font-size:27px; line-height:35px; } .filtersBox .icon{ width:100%; } .filtersBox .icon a span{ width:100%; font-size:18px; bottom:-45px; } /* 門市資訊 搜尋 OK! */ .searchbox { width:100%; margin-bottom:0;} .searchbox .input{ width:62%; margin-top:12px; } .searchbox .input .inputtxt{ font-size:20px; padding:15px; } .searchbox .btn{ width: auto; margin:0; font-size:22px; padding:15px 30px; } /* list 門市資訊 - 門市搜尋 inquirybox table需修改 */ .inquirybox { width:95%; margin:40px 0 20px 0; padding:15px; } .inquirybox .categoryL{ width:100%; font-size:22px; } .inquirybox .introB{ font-size:27px; line-height:35px; } .inquirybox .introL{ font-size:22px; line-height:35px; } .inquirybox .btnL{ width:32%; padding:15px 0; } .inquirybox .btnL a{ font-size:22px; line-height:35px; } .inquirybox .photo a{ width:18%; height:100%; } .inquirybox .map{ width:100%; height:auto; padding:10px 0; } .inquirybox .introL span{ font-size:20px; line-height:30px; } .inquirybox th{ font-size:22px; line-height:35px; } /* list 門市資訊 - 推薦門市&新開幕 共用 OK! */ #listBox.storesRecommend .itemSR .p1 { width:285px; height:188px; } #listBox.storesRecommend .itemSR .p1 .pic{ width:285px; height:188px; } #listBox.storesRecommend .itemSR .p1 .txt{ width:100%; height:100px; padding:10px 15px; bottom:55px; } #listBox.storesRecommend .itemSR .p1 .txt a{ height:188px; } #listBox.storesRecommend .itemSR .p1:hover .txt{ bottom:100px; } #listBox.storesRecommend .itemSR .p1 .txt .t1{ height:100px; font-size:22px; line-height:35px; } /* -------------------------------- 嚴選商品 -------------------------------- */ /* list 嚴選商品 OK! */ #listBox.product .category{ width:100%; padding:20px 0; font-size:30px; line-height:35px; } #listBox.product .itemPT{ width:260px; height:380px; } #listBox.product .itemPT .title{ height:33px; font-size:23px; line-height:35px; } #listBox.product .itemPT .titleS{ height:30px; font-size:20px; line-height:30px; } #listBox.product .itemPT .intro{ max-height:35px; font-size:15px; line-height:16px; } #listBox.product .itemPT .pic{ width:260px; height:260px; } #listBox.product .itemPT .pic img{ width:100%; height:auto; } #listBox.product .itemPT .new{ width:260px; height:260px; } #listBox.product .itemPT .new a{ width:260px; height:260px; } #listBox.product .itemPT .new.n01{ width:260px; height:260px; } #listBox.product .itemPT .new.n01 a{ width:260px; height:260px; } #listBox.product .itemPT .bg{ width:260px; height:260px; background-position:center bottom; } /* detail 嚴選商品 內頁 OK! */ #detailBox.product .category{ padding:20px 0; font-size:32px; line-height:40px; } #detailBox.product .itemPT{ width:100%; } #detailBox.product .itemPT .pic{ width:300px; height:300px; margin:0 30px 0 0; } #detailBox.product .itemPT .pic img{ width:100%; height:auto; } #detailBox.product .itemPT .category{ width:44%; padding:0 0 5px 0; font-size:27px; line-height:35px; } #detailBox.product .itemPT .title{ width:44%; max-height:35px; font-size:15px; line-height:16px; } #detailBox.product .itemPT .titleS{ width:44%; font-size:20px; line-height:30px; } #detailBox.product .itemPT .intro{ width:44%; font-size:20px; line-height:30px; } /* 未完成 配合table */ #detailBox.product .tablebox { width:95%; } #detailBox.product .tablebox .color{ width:15px; height:15px; margin:10px auto; z-index:0;} #detailBox.product .tablebox td:nth-child(11){ font-size:13px; text-align:left; padding-left:10px; } #detailBox.product .tablebox2 { width:95%; } #detailBox.product .tablebox2 .color{ width:15px; height:15px; margin:10px auto; z-index:0;} #detailBox.product .tablebox2 td:nth-child(10){ font-size:13px; text-align:left; padding-left:10px; } #detailBox.product .coffee_info{} #detailBox.product .coffee_info th, #detailBox.product .coffee_info td{ color:#000; text-align:center; } #detailBox.product .coffee_info th{ font-size:16px; font-weight:bold;} #detailBox.product .coffee_info th span{ font-size:13px; } #detailBox.product .coffee_info td{ padding:15px 0; font-size:14px; } #detailBox.product .coffee_info .left{ text-align:left;} /* 未完成 配合table end */ .measuring{ width:94%; font-size:18px; line-height:25px; } .measuring .colorR{ margin:10px 10px 0 0; } .measuring .colorY{ margin:10px 10px 0 0; } .measuring .colorG{ margin:10px 10px 0 0; } /* detail 嚴選商品 券 OK! */ #detailBox.product .itemCC{ margin-top:20px; } #detailBox.product .itemCC .pic{ width:100%; height:250px; } #detailBox.product .itemCC .pic img{ width:100%; height:auto; } #detailBox.product .itemCC .title{ font-size:27px; line-height:35px; padding-bottom:10px; } #detailBox.product .itemCC .intro{ font-size:20px; line-height:30px; } /* -------------------------------- 咖啡豆專區 -------------------------------- */ /* list 咖啡豆專區 OK! */ #listBox.coffee .intro{ margin-top:10px; font-size:20px; line-height:30px; } #listBox.coffee .intro span{ font-size:16px; } #listBox.coffee .line{ padding:20px 0 0 0; } #listBox.coffee .line .category{ font-size:32px; line-height:40px; padding:0; } #listBox.coffee .line .category span{ font-size:23px; padding-left:10px; } #listBox.coffee .line .intro{ font-size:20px; line-height:30px; } #listBox.coffee .line .intro span{ font-size:23px; line-height:35px; } #listBox.coffee .itemCF{ padding:20px 0 40px 0; } #listBox.coffee .itemCF .maintitle{ float:none; } #listBox.coffee .itemCF .maintitle .title{ width:50%; margin-top:20px; font-size:27px; line-height:35px; float:right; } #listBox.coffee .itemCF .maintitle .title img{ width:62%; height:auto; } #listBox.coffee .itemCF .maintitle .title span{ font-size:20px; line-height:30px; padding:0; } #listBox.coffee .itemCF .maintitle .titleS{ width:50%; font-size:20px; line-height:30px; float:right; } #listBox.coffee .itemCF .maintitle .titleS span{ font-size:20px; line-height:30px; } #listBox.coffee .itemCF .maintitle .intro{ width:50%; font-size:20px; line-height:30px; padding:0; float:right; } #listBox.coffee .itemCF .maintitle .other{ display:inline-block; padding:10px 0; font-size:17px; line-height:25px; } #listBox.coffee .itemCF .pic{ width:250px; height:375px; } #listBox.coffee .itemCF .pic img{ width:100%; height:auto; } #listBox.coffee .itemCF6{ padding:20px 0; } #listBox.coffee .itemCF6 .titleS{ font-size:27px; line-height:35px; padding-bottom:0; } #listBox.coffee .itemCF6 .titleS span{ font-size:23px; line-height:35px; } #listBox.coffee .itemCF6 .intro{ font-size:20px; line-height:30px; margin-bottom:20px; } #listBox.coffee .itemCF6 .pic{ width:250px; height:375px; } #listBox.coffee .itemCF6 .pic img{ width:100%; height:auto; } /* 豆子lightbox用 OK! */ .elementbox{ width:50%; margin:10px 0 0 0; display:inline-block; font-size:18px; line-height:25px; float:right; } .elementbox dt{ width:100%; float:none; display:inline-block; } .elementbox dd{ width:100%; float:none; display:inline-block; } /* right banner OK! */ .bannerBox{ right:10px; } /* 咖啡豆 篩選器 OK! */ #coffeeBox{width:100%; height: auto; } #coffeeBox h1{ font-size:45px; } #Container{ width:95%; padding:15px; height:450px; font-size:25px; line-height:30px; } #Container p:nth-child(even){ font-size:20px; } #Container p:nth-child(3n+0){color:#c96;} #coffeeMenu{ width:100%; display:inline-block; margin-right:20px; float:left; } #coffeeMenu dl{ width:95%; border-bottom:dotted 1px #d7d7d7; padding:7px 0; margin-bottom:2px; float:left;} #coffeeMenu .category{ font-size:27px; line-height:35px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #coffeeMenu .category span{ font-size:23px; } #coffeeMenu .BB{ width:29%; margin:0 10px; } #coffeeMenu .BB .title{ width:100%; font-size:23px; line-height:35px; float:left; } #coffeeMenu .BB .title span{ font-size:23px; line-height:35px; } #coffeeMenu .BB .intro{ width:100%; padding:0 0 10px 0; font-size:18px; line-height:25px; float:left; } #coffeeMenu .ALL { width:50%; display:inline-block; } #coffeeMenu .ALL a{ font-size:22px; } #coffeeMenu .txt{ width:250px; padding:3px 10px 0 10px; } #coffeeMenu .txt a{ font-size:22px; } #coffeeMenu .bean{ margin:10px 0; } #coffeeMenu .btn{ margin-left:5px; float:left;} #coffeeMenu .btn a{ font-size:25px; padding:10px 30px; } .coffeeBox { width:250px; } .coffeeBox ul{ width:240px; margin:0 5px 10px 5px; } .coffeeBox .p1 { height:360px; } .coffeeBox .p1 .pic{ width:240px; height:360px;} .coffeeBox .p1 .pic img{ width:100%; height: auto;} .coffeeBox .p1 .txt{ width:90%; height:360px; bottom:80px; } .coffeeBox .p1:hover .txt{ bottom:360px; } .coffeeBox .p1 .txt .t1{ height:60px; font-size:23px; line-height:35px; } .coffeeBox .p1 .txt .t1 span{ font-size:15px; line-height:20px; } .coffeeBox .p1 .txt .t2{ height:280px; font-size:18px; line-height:25px; } /* -------------------------------- 伯朗Lounge卡 -------------------------------- */ /* list 伯朗Lounge卡 OK! */ #listBox.Lounge .item{ width:270px; margin:20px 30px 15px 0; } #listBox.Lounge .item .pic{ width:270px; height:385px; } #listBox.Lounge .item .pic img{ width:100%; height: auto; } #listBox.Lounge .item .txt{ width:270px; height:60px; font-size:23px; line-height:30px; } #listBox.Lounge .item .btn{ width: auto; } #listBox.Lounge .item .btn a{ font-size:22px; padding:15px 40px;} /* detail 伯朗Lounge卡 最新活動 內頁 OK! */ #detailBox.Lounge .itemN{ padding:0; } #detailBox.Lounge .itemN .category{ width:100%; font-size:27px; line-height:35px; } #detailBox.Lounge .itemN .intro{ width:100%; padding:10px 0; font-size:20px; line-height:30px; } #detailBox.Lounge .itemN .pic{ width:600px; height: auto; margin:0 0 30px 0; } #detailBox.Lounge .itemN .pic img{ width:100%; height: auto;} /* detail 伯朗Lounge卡 使用說明 內頁 OK! */ #detailBox.use .itemU{ padding:0; } #detailBox.use .itemU .category{ font-size:30px; line-height:35px; padding:20px 0 0 0; } #detailBox.use .itemU .intro{ font-size:20px; line-height:30px; } #detailBox.use .itemM{ padding:0; } #detailBox.use .itemM .title{ font-size:23px; line-height:35px; } #detailBox.use .itemM a{ width:100%; margin:0 5px; font-size:20px; line-height:30px; font-weight:bold; } #detailBox.use .itemW{ width:96%; padding:30px 0 0 0; } #detailBox.use .itemW .title{ font-size:27px; line-height:35px; } #detailBox.use .itemW .intro{ margin-left:10px; font-size:20px; line-height:30px; } /* detail 伯朗Lounge卡 換卡說明 內頁 OK! */ /*#detailBox.card .itemM{ padding:0; } #detailBox.card .itemM .title{ font-size:25px; line-height:35px; } #detailBox.card .itemM a{ width:100%; margin:0 5px; font-size:20px; line-height:30px; font-weight:bold; } #detailBox.card .itemW{ width:96%; padding:30px 0 0 0; } #detailBox.card .itemW .title{ font-size:28px; line-height:35px; } #detailBox.card .itemW .intro{ font-size:23px; line-height:35px; }*/ /* 問與答 qa_title OK! */ .qa_title{ width:auto; padding:0; } .qa_title .title{ width:auto; margin-bottom:20px; padding-bottom:20px; height: auto; font-size:23px; line-height:35px; } .qa_title .intro{ margin:0 0 20px 20px; font-size:20px; line-height:30px; } .qa_title .intro img{ width:100%; height:auto; } .qa_title dd .cq01{ font-size:20px; line-height:30px; } /* -------------------------------- 二代卡專區 -------------------------------- */ /* list 二代卡專區 */ #listBox.count{ width:100%;} #listBox.count .category{ padding:20px 0; font-size:32px; line-height:40px; } #listBox.count .title{ padding:10px 0; font-size:25px; line-height:35px; } #listBox.count .title span{ font-size:20px; } /* 20151015 新增 */ #listBox.count .noteBox{ font-size: 20px; line-height: 30px; } #listBox.count .noteBox dt{ font-size:25px; line-height:40px; } #listBox.count .note_title{ font-size:25px; line-height:35px; } #listBox.count .note_intro{ font-size: 20px; line-height: 30px; } #listBox.count .note_intro dt a{ font-size:22px; padding:8px 30px;} #listBox.count .note_intro dd{ padding-top:0; font-size: 20px; line-height:25px; } #listBox.count .noteBox2{ width:45%; display:inline-block; float:left; } #listBox.count .noteBox2 .note_intro dl dd{ display:inline-block; font-size: 20px; line-height: 30px; } #listBox.count .menuBoxCT { width:95%; padding-bottom:20px; } #listBox.count .menuBoxCT dt{ font-size:25px; float:left; } #listBox.count .menuBoxCT dt:first-child{ width:70%; } #listBox.count .menuBoxCT dt:nth-child(3){ width:40%; } #listBox.count .menuBoxCT dt:nth-child(5){ width:30%; } #listBox.count .menuBoxCT dt:nth-child(7){ width:45%; } #listBox.count .menuBoxCT dt:nth-child(9){ width:30%; font-size:25px; padding:14px 15px 14px 15px; } #listBox.count .menuBoxCT dd{ height:45px; padding:12px 0; } #listBox.count .tableBox { width:100%; margin-bottom:20px; padding:15px; } #listBox.count .formBox { width:95%; margin-bottom:20px; padding:15px; } #listBox.count .formBox. th{ font-size:20px; } #listBox.count .formBox.f01 th:first-child{ width:33%; } #listBox.count .formBox.f01 th:nth-child(2){ width:60%; } #listBox.count .formBox.f01 th:nth-child(3){ width:50%; } #listBox.count .formBox.f02 th:first-child{ width:10%; } #listBox.count .formBox.f02 th:nth-child(2){ width:20%; } #listBox.count .formBox.f02 th:nth-child(3){ width:30%; } #listBox.count .formBox.f02 th:nth-child(4){ width:10%; } #listBox.count .formBox.f02 th:nth-child(5){ width:10%; } #listBox.count .formBox.f02 th:nth-child(6){ width:10%; } #listBox.count .formBox.f03 th:first-child{ width:30%; } #listBox.count .formBox.f03 th:nth-child(2){ width:20%; } #listBox.count .formBox.f03 th:nth-child(3){ width:10%; } #listBox.count .formBox.f03 th:nth-child(4){ width:8%; } #listBox.count .formBox.f03 th:nth-child(5){ width:10%; } #listBox.count .formBox.f03 th:nth-child(6){ width:8%; } #listBox.count .formBox.f04 th:first-child{ width:30%; } #listBox.count .formBox.f04 th:nth-child(2){ width:10%; } #listBox.count .formBox.f04 th:nth-child(3){ width:20%; } #listBox.count .formBox.f04 th:nth-child(4){ width:15%; } #listBox.count .formBox.f04 th:nth-child(5){ width:10%; } #listBox.count .formBox.f04 th:nth-child(6){ width:9%; } #listBox.count .formBox.f05 th:first-child{ width:8%; } #listBox.count .formBox.f05 th:nth-child(2){ width:20%; } #listBox.count .formBox.f05 th:nth-child(3){ width:20%; } #listBox.count .formBox.f05 th:nth-child(4){ width:8%; } #listBox.count .formBox.f05 th:nth-child(5){ width:6%; } #listBox.count .formBox.f05 th:nth-child(6){ width:8%; } #listBox.count .formBox.f06 th:first-child{ width:13%; } #listBox.count .formBox.f06 th:nth-child(2){ width:30%; } #listBox.count .formBox.f06 th:nth-child(3){ width:5%; } #listBox.count .formBox.f06 th:nth-child(4){ width:30%; } #listBox.count .formBox.f07 th:first-child{ width:8%; } #listBox.count .formBox.f07 th:nth-child(2){ width:20%; } #listBox.count .formBox.f07 th:nth-child(3){ width:20%; } #listBox.count .formBox.f07 th:nth-child(4){ width:8%; } #listBox.count .formBox.f07 th:nth-child(5){ width:6%; } #listBox.count .formBox.f07 th:nth-child(6){ width:8%; } #listBox.count .count_info th,#listBox.count .count_info td{ color:#000; text-align:center; } #listBox.count .count_info th{ font-size:20px; line-height:30px; font-weight:bold;} #listBox.count .count_info th span{ font-size:11px; } #listBox.count .count_info td{ font-size:20px; line-height:30px; } #listBox.count .count_info td span{ font-size:25px; } #listBox.count .count_info.CT td:first-child{ font-size:18px; padding:0 5px; } .popupBox{ width:auto; padding:30px 40px; margin:0 auto; z-index:0; background-color:#fff; } .popupBox .close{ margin:0 2px 20px 2px; float:right;} .popupBox a.close { font-size:20px; text-align:center; padding:5px 10px; } .popupBox .title{ width:100%; padding-bottom:20px; font-size:20px; line-height:25px; } .popupBox .formBox { width:95%; margin-bottom:20px; padding:15px; } .popupBox .count_info th,.popupBox .count_info td{ text-align:center; } .popupBox .count_info th{ font-size:20px; } .popupBox .count_info th:first-child{ width:8%; } .popupBox .count_info th:nth-child(2){ width:20%; } .popupBox .count_info th:nth-child(3){ width:20%; } .popupBox .count_info th:nth-child(4){ width:10%; } .popupBox .count_info th:nth-child(5){ width:10%; } .popupBox .count_info th:nth-child(6){ width:10%; } .popupBox .count_info th span{ font-size:11px;} .popupBox .count_info td{ padding:15px 0; font-size:20px; } .popupBox .count_info td span{font-size:20px; } /* -------------------------------- 伯朗講堂 -------------------------------- */ /* list 伯朗講堂 - 近期活動 OK! */ #listBox .category{ padding-bottom:10px; font-size:27px; } #listBox .item{ width:280px; margin:0 20px 30px 0; padding:0; } #listBox .item ul{ width:280px; margin:0;} #listBox .item .category{ font-size:28px; } #listBox .item .i1 .show{ width:70px; font-size:18px; height:45px; padding-top:25px; } #listBox .item .i1 .time{ width:180px; margin:0 0 6px 0; font-size:27px; text-align:right; } #listBox .item .i1 .btn{ width:auto; } #listBox .item .i1 .btn a{ font-size:18px; padding:10px; } /* 圖說文字效果CSS OK! */ #listBox .item .p1 { height:152px; } #listBox .item .p1 .pic{ width:280px; height:152px; } #listBox .item .p1 .txt{ width:90%; } #listBox .item .p1:hover .txt{ bottom:152px; } #listBox .item .p1 .txt .t1{ height:30px; } #listBox .item .p1 .txt .t1 a{ height:30px; font-size:23px; line-height:35px; } #listBox .item .p1 .txt .t2{ height:85px; } #listBox .item .p1 .txt .t2 a{ font-size:20px; line-height:30px; } /* detail 伯朗講堂 - 近期活動 內頁 OK! */ #detailBox .item{ width:100%; padding:0; text-align:left; float:left;} #detailBox .item .show{ width:70px; font-size:18px; height:45px; padding-top:25px; } #detailBox .item .time{ font-size:25px; } #detailBox .item .category{ width:80%; font-size:27px; line-height:35px; } #detailBox .item .intro{ font-size:20px; line-height:30px; } #detailBox .item .b1{ width:140px; margin:0 2px; float05px; } #detailBox .itemP { width:100%; height: auto; } #detailBox .itemP .pic{ width:100%; height: auto; } #detailBox .itemP .pic img{ width:100%; height: auto; } #detailBox .itemW{ width:100%; } #detailBox .itemW .category{ font-size:27px; line-height:35px; } #detailBox .itemW .intro{ font-size:20px; line-height:30px; } #detailBox .itemW .b1{ font-size:20px; line-height:30px; } /* list 伯朗講堂 - 活動花絮 OK! */ #listBox.photobook .item .i1 .time{ width:auto; font-size:20px; } #listBox.photobook .item .i1 .btn{ width:auto; } #listBox.photobook .item .i1 .btn a{ font-size:22px; padding:10px; } /* 圖說文字效果CSS OK! */ #listBox.photobook .item .p1 .txt .t1{ height:33px; } #listBox.photobook .item .p1 .txt .t1 a{ width:90%; font-size:23px; line-height:35px; } #listBox.photobook .item .p1 .txt .t2{ height:143px; } #listBox.photobook .item .p1 .txt .t2 a{ width:90%; font-size:20px; line-height:30px; } /* detail 伯朗講堂 - 活動花絮 內頁 OK! */ #detailBox.photobook .item{ width:98%; } #detailBox.photobook .item .intro{ height:auto; } #detailBox.photobook .item .time{ margin-top:20px; } /* 合成圖 OK! */ .mixPhoto{ width:100%; margin-right:0; } .mixPhoto .photo, .mixPhoto .bx-viewport{ width:100%; } .mixPhoto .photo li{ width:100%; height: auto; } .mixPhoto .photo li p{ width:100%; } .mixPhoto .pic{ width:500px; height:74px; } .mixPhoto .pic li{ width:100px; height:74px; } .mixPhoto .pic li a{ height:74px; } .mixPhoto .pic li a:hover, .mixPhoto .pic li .active{ height:70px; } .mixPhoto .L{ width:20px; height:25px; margin:18px 5px 0 0; } .mixPhoto .L a{ height:45px; background:url(../Images/arrow.png) no-repeat; } .mixPhoto .L a:hover{ background:url(../Images/arrow.png) no-repeat -30px; } .mixPhoto .R{ width:20px; height:25px; margin:18px 0 0 5px; } .mixPhoto .R a{ height:45px; background:url(../Images/arrow.png) no-repeat -70px; } .mixPhoto .R a:hover{ background:url(../Images/arrow.png) no-repeat -100px; } .mixPhoto .bx-caption { width: 100%; } .mixPhoto .bx-caption span { width:100%; font-size:20px; padding:10px 0 15px 0; } /* -------------------------------- 伯朗行動APP -------------------------------- */ /* detail 伯朗行動APP */ #detailBox.app{ width:100%; } #detailBox.app .category{ width:55%; margin:130px 0 30px 0; font-size:23px; line-height:40px; } #detailBox.app .qrcode { width:100%; margin-top:50px; display:inline-block; } #detailBox.app .qrcode .i1{ width:100%; margin-bottom:0; font-size:23px; line-height:35px; float:left; } #detailBox.app .qrcode .i1 a{ margin:0 30px 10px 30px; } #detailBox.app .qrcode .i2{ width:100%; font-size:23px; line-height:35px; float:left; } #detailBox.app .qrcode .i2 a{ margin:0 30px 10px 30px; } #detailBox.app .qrcode .i1 span, #detailBox.app .qrcode .i2 span{ font-size:18px; } /* detail LINE禮品小舖 */ #detailBox.online dl dt{ font-size:25px; } #detailBox.online dl dd{ font-size:20px; } #detailBox.online .w50 dt{ font-size:25px; } #detailBox.online .w50 dd{ width:100%; margin-bottom:30px; font-size:20px; line-height:80px; } #detailBox.online .w50 dd img{ width:600px; } #detailBox.online .w50 b::before{ width:80px; line-height:80px; border-radius:80px; font-size:20px; } #detailBox.online .w50 .w100{ line-height:30px; } #detailBox.online .w50 .half{ line-height:30px; } /* detail 企業徵才 */ #detailBox.about .arrowBox{ width:100%; margin:0 0 50px 0; } #detailBox.about .arrowBox .title{ font-size:27px; } #detailBox.about .arrowBox dl.L::before{ font-size:20px; position:absolute; top:40px; left:-15px; } #detailBox.about .arrowBox dl.R::after{ font-size:20px; position:absolute; top:40px; right:-15px; } #detailBox.about .arrowBox dl.T::before, #detailBox.about .arrowBox dl.TD::before, #detailBox.about .arrowBox dl.D::after{ font-size:20px; position:absolute; top:-15px; } #detailBox.about .arrowBox dl dt{ margin-bottom:10px; font-size:25px; } #detailBox.about .arrowBox dl dd{ margin-bottom:20px; font-size:20px; line-height:25px; } #detailBox.about .arrowBox .black, #detailBox.about .arrowBox .red, #detailBox.about .arrowBox .coffee{ width:250px; height:80px; margin:20px; padding:10px 0; font-size:20px; line-height:25px; } #detailBox.about .arrowBox .black b, #detailBox.about .arrowBox .red b, #detailBox.about .arrowBox .coffee b{ font-size:25px; } #detailBox.about .arrowBox .rd dd, #detailBox.about .arrowBox .ce dd{ font-size:20px; } #detailBox.about .arrowBox .rd dd:nth-child(1), #detailBox.about .arrowBox .ce dd:nth-child(1){ font-size:25px; } /* -------------------------------- 關於伯朗 -------------------------------- */ /* detail 關於伯朗 OK! */ #detailBox.about .itemA{ width:98%; } #detailBox.about .itemA .category{ font-size:25px; line-height:35px; padding-bottom:20px; } #detailBox.about .itemA .title{ font-size:27px; line-height:35px; } #detailBox.about .itemA .intro{ font-size:20px; line-height:30px; } #detailBox.about .itemA .intro img{ width:100%; height:auto; } #detailBox.about .itemA .title.F450{ width:100%; } #detailBox.about .itemA .intro.F450{ width:100%; } #detailBox.about .itemA .intro.F450 img{ width:96%; height:auto; margin-right:0; } /* -------------------------------- 伯朗會員 -------------------------------- */ /* 伯朗會員 加入會員 OK! */ .memberbox{ width:90%; height:370px; font-size:23px; line-height:30px; } .memberbox p:nth-child(even){ font-size:20px; } .memberbox dt{ font-size:28px; line-height:35px; } .memberbox dd{ font-size:23px; line-height:35px; } /* 伯朗會員 優惠券下載 OK! */ .couponsbox{ width:90%; margin:20px 0; font-size:23px; line-height:30px; } .couponsbox dt{ width:100%; margin-bottom:5px; font-size:27px; line-height:35px; float:none; } .couponsbox dd{ width:100%; margin-bottom:5px; font-size:20px; line-height:30px; text-align:left; float:none; } .couponsbox img{ width:100%; height: auto;} /* -------------------------------- 網站地圖 -------------------------------- */ /* 網站地圖 OK! */ .mapbox { margin:10px; padding:10px; } .mapbox .menu{ margin:0 5px 5px 0; } .mapbox .menu a{ width:auto; font-size:23px; line-height:30px; padding:15px 25px 15px 5px; } .mapbox .menu > a:before{ content:"．";} .mapbox .menu.B{ width: auto; } /* -------------------------------- 購物網站 -------------------------------- */ .shopping .title{ width:100%; font-size:30px; padding-bottom:40px;} .shopping .icon {width:85%;} .shopping .icon a {display: inline-block; margin:0 auto 0 50px;} .shopping .icon a:last-child{ margin-left:0;} .shopping .icon a b:first-child{ margin:auto;} .shopping .icon a b:last-child {font-size: 30px;margin: 15px 0 50px 0;display: block;} .shopping .icon {margin-bottom: 80px;} /* 購物內頁 */ #detailBox.product .itemPT .btn{width:100%;} #detailBox.product .itemPT .btn a{width:45%;height:125px;} #detailBox.product .itemPT .btn a.pchome {background-image:url(../Images/Product/LOGO3.png);} #detailBox.product .itemPT .btn a.panda {background-image:url(../Images/Product/LOGO4.png);background-position: 0 0px;} }