@charset "utf-8"; /* css document */ .mainarea{ padding:0px 0;} .headertitle { position: relative; padding-bottom: 15px; margin-bottom: 15px; text-align: center; } .headertitle:after { content: ''; position: absolute; left: 50%; bottom: 0; margin-left: -17.5px; width: 35px; height: 1px; background: #c1c1c1; } .headertitle b { display: block; font-size: 15px; font-weight: normal; color: #9a9a9a; margin-bottom: 8px; letter-spacing: .08em; } .headertitle em { display: block; font-size: 35px; letter-spacing: .35em; font-family: "montserrat", sans-serif; color: #2e363a; text-transform: uppercase; } /*推薦商品/房型*/ .featurearea{ background:url(/uploads/image/eimages/pbg.jpg) repeat; padding:60px 0 } .featurearea ul{ margin:0 -31px;} .featurearea ul li{ padding:0 31px;} .featurearea h2{ font-size:24px; text-align:center; margin-bottom:40px;} .featurearea h2 strong{ display:block; font-size: 25px; color: #222; font-weight:normal; } .featurearea h2 em{ display:inline-block; font-size:32px; color:#222; font-weight:normal; position:relative; padding:0 60px 0 65px; margin-top:-8px;} .featurearea h2 em:before{ content:""; position:absolute; left: 15px; top: 50%; width: 36px; height:1px; background:#222; } .featurearea h2 em:after{ content:""; position:absolute; right: 15px; top:50%; width: 36px; height:1px; background:#222; } .featurearea ul li .item{ } .featurearea ul li .img{ position:relative; overflow:hidden; background:#000;} .featurearea ul li .img a{ display:block; position:relative;} .featurearea ul li .img a:after{ content:"read more"; position:absolute; top:50%; left:50%; text-align:center; font-size:18px; color:#edc14a; padding:10px; margin-left:-70px; margin-top:-15px; border-top:1px solid #edc14a; border-bottom:1px solid #edc14a; opacity:0; transition:all 0.6s ease;} .featurearea ul li .item:hover .img a:after{ opacity:1; margin-top:15px;} .featurearea ul li .img a:before{ position:absolute; left:50%; margin-left:-32px; top:35%; margin-top:-5px; opacity:0; transition:all 0.6s ease;} .featurearea ul li .item:hover .img a:before{ opacity:1; transform:rotatey(360deg);} .featurearea ul li .img img{ display:block; width:100%; transition:all 0.6s ease;} .featurearea ul li .item:hover .img img{ opacity:0.4; transform:scale(1.06);} .featurearea ul li .txt{ padding: 30px; text-align:center;} .featurearea ul li .txt h3 strong{ font-weight:normal;} .featurearea ul li .txt h3 strong a{ position:relative; display:block; font-size:17px; color:#222;} .featurearea ul li .txt .price{ margin-top:10px;} .featurearea ul li .txt .price strong{ display:inline-block; margin:0 5px;} .featurearea ul li .txt strong b{ font-size:14px; color:#333; font-weight:normal;} .featurearea .slick-prev { left: -10px;} .featurearea .slick-next { right: -10px;} .featurearea .slick-prev{ position: absolute; top: 50%; width: 18px; height: 33px; margin-top:-43px; text-align: center; background:url(/uploads/image/eimages/prev.png) no-repeat; cursor: pointer; } .featurearea .slick-next { position: absolute; top: 50%; width: 18px; height: 33px; margin-top:-43px; text-align: center; background:url(/uploads/image/eimages/next.png) no-repeat; cursor: pointer; } .featurearea .slick-prev:before, .featurearea .slick-next:before{ display:none;} /*--recipesarea--*/ .recipesarea { position: relative; padding: 70px 0 ; background: #ffffff; /* old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* ff3.6-15 */ background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* chrome10-25,safari5.1-6 */ background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* w3c, ie10 , ff16 , chrome26 , opera12 , safari7 */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#ffffff', endcolorstr='#e5e5e5',gradienttype=0 ); /* ie6-9 */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition:all 0.4s ease; } .recipesarea .wrap { box-sizing: border-box; } .recipesarea h2{ font-size:24px; text-align:center; margin-bottom:40px;} .recipesarea h2 strong{ display:block; font-size: 25px; color: #222; font-weight:normal; } .recipesarea h2 em{ display:inline-block; font-size:32px; color:#222; font-weight:normal; position:relative; padding:0 60px 0 65px; margin-top:-8px;} .recipesarea h2 em:before{ content:""; position:absolute; left: 15px; top: 50%; width: 36px; height:1px; background:#222; } .recipesarea h2 em:after{ content:""; position:absolute; right: 15px; top:50%; width: 36px; height:1px; background:#222; } .recipesarea .wrap .note { text-align: center; font-size: 15px; letter-spacing: .05em; color: #6e6e6e; margin-bottom: 65px; } .recipesarea .wrap ul { position: relative; margin: 0 -10px; } .recipesarea .wrap ul li { padding: 0 10px; box-sizing: border-box; } .recipesarea .wrap .img img { display: block; width: 100%; } .recipesarea .wrap h3 { margin-top: 15px; } .recipesarea .wrap h3 a { display: block; font-size: 17px; font-weight: normal; color: #222; text-align:center; letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recipesarea .wrap h3 a:hover { color: #f39800; } /**最新消息**/ .newsarea{ position:relative; padding:80px 0 ;} .newsarea ul{} .newsarea ul li{ padding:20px 80px; position:relative; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -o-transition:all 0.4s ease; transition:all 0.4s ease;} .newsarea ul li:hover{ } .newsarea ul li:last-child:before{ content:""; display:block; width:30px; height:50px; background:url(/uploads/image/eimages/newsline.png) no-repeat; left:-15px; top:0; position:absolute; } .newsarea ul li .img{ display:none;} .newsarea ul li .txt div.date{ float:left; width:25%; } .newsarea ul li .txt div.date strong{ display:block; float:left; color:#f00; font-size:45px; line-height:50px; font-weight:normal; } .newsarea ul li .txt div.date b{ display:block; float:left; font-size:15px; color:#000; font-weight:normal; line-height:20px; padding:3px; } .newsarea ul li .txt h3{ float:right; font-size:17px; color:#666; width:75%; } .newsarea ul li .txt h3 a{ color:#666; line-height:28px; } .newsarea ul li .txt h3 a:hover{ color:#000;} .newsdate{/*發布日期*/ font-size:12px; color:#999999; text-transform:uppercase;} .newicon{/*分類小圖示*/ padding:3px 5px; display:inline-block; font-family:新細明體; font-size:12px; font-weight:normal; color:#fff; border-radius:3px;} .newicon_blue{ background: #00b7ea; background: ; background: -moz-linear-gradient(-45deg, #00b7ea 0%, #009ec3 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); background: -webkit-linear-gradient(-45deg, #00b7ea 0%,#009ec3 100%); background: -o-linear-gradient(-45deg, #00b7ea 0%,#009ec3 100%); background: -ms-linear-gradient(-45deg, #00b7ea 0%,#009ec3 100%); background: linear-gradient(135deg, #00b7ea 0%,#009ec3 100%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#00b7ea', endcolorstr='#009ec3',gradienttype=1 ); } .newicon_burgundyred{ background: rgb(169,3,41); background: ; background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#a90329', endcolorstr='#6d0019',gradienttype=0 ); } @media (max-width: 1710px){ .newsarea ul li .txt div.date{ width:30%; } .newsarea ul li .txt h3{ width:70%; } } @media (max-width: 1160px){ .featurearea{ padding:40px 0 ;} .featurearea ul{ margin:0px;} .featurearea ul li{ padding:0 10px;} .featurearea h2{ margin-bottom:30px;} } @media(max-width:960px;){ .featurearea{ padding:50px 0 } .recipesarea .wrap:before { display: none; } .recipesarea .wrap { padding: 0px ; } .newsarea{ position:relative; padding:40px 0 ;} .newsarea ul li{ padding:20px 0px; } .newsarea ul li:hover{ padding:20px ; } .newsarea ul li:last-child:before{ display:none; } } @media (max-width: 480px) { .newsarea{ position:relative; padding:20px 0 ;} .newsarea ul li .txt div.date{ width:22%; } .newsarea ul li .txt h3{ width:78%; } .newsarea ul li .txt div.date strong{ display:block; float:left; color:#f00; font-size:30px; line-height:50px; font-weight:normal; } .newsarea ul li .txt div.date b{ display:block; float:left; font-size:14px; color:#000; font-weight:normal; line-height:20px; padding:3px; } .newsarea ul li:last-child:before{ display:none; } .newsarea ul li{ padding:20px 0 ; } .newsarea ul li:hover{ padding:20px 0; } .featurearea{ padding:30px 0 20px 0;} .featurearea ul li .img a:after{ content:"read more"; position:absolute; top:50%; left:50%; text-align:center; font-size:13px; color:#edc14a; padding:10px; margin-left:-50px; margin-top:-15px; border-top:1px solid #edc14a; border-bottom:1px solid #edc14a; opacity:0; transition:all 0.6s ease;} .featurearea ul li .txt{ padding: 10px; text-align:center;} .featurearea h2{ margin-bottom:20px;} .featurearea h2 strong{ display:block; font-size: 20px; color: #222; font-weight:normal; } .recipesarea { position: relative; padding: 20px 0 30px 0;} .recipesarea .wrap { padding:0px ; } .recipesarea .wrap:after { display: none; } .recipesarea .arrow_prev, .recipesarea .arrow_next { display: none; } .recipesarea h2{ font-size:24px; text-align:center; margin-bottom:20px;} .recipesarea h2 strong{ display:block; font-size: 20px; color: #222; font-weight:normal; } }