@charset "utf-8";


* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}
		
/* clear */
.clearfix {
  *zoom: 1;
  clear: both;
}
.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}
.clearfix:after {
  clear: both;
} 

/*======== all ====================================*/
html,body{ position:relative; display:block; width:100%; height:auto;background:#fffffe; background:url('../images/bg-backgroundcolor.jpg') top center repeat-x; 
font-family:"微軟正黑體",Verdana, Arial, Helvetica, sans-serif;}
a{ display:block; width:100%; height:100%;text-indent:-9999px; cursor:pointer; }
.l-body{ position:relative; display:block; width:100%; height:100%; min-width:1000px; min-height:700px; overflow:hidden;}
.l-body .wrapper{ position:relative; display:block; width:100%; height:100%;}
.l-body .p-abs{ position:absolute; display:block; }
.l-body .area{ position:relative; display:block; width:100%; height:100%; left:0; top:0;}
.l-body .main{ position:relative; display:block; width:1000px; height:auto; left:50%; margin-left:-500px; }
.l-body .obj{ position:absolute; display:block;}
.l-body .step{ position:absolute; display:block; width:100%;}


.l-body .logo{ width:80px; height:76px; left:10px; top:10px;  background:url('../images/logo.png') center center no-repeat; z-index:1;}
.l-body .try{ width:103px; height:118px; right:10px; top:10px; z-index:1; display: none;}
.l-body .try a{ background:url('../images/bt-trynow.png') left top no-repeat;}
.l-body .try a:hover{ background-position:left bottom; }

/* menu */
.l-body .p-abs.nav{  width:100%; height:134px; background:url('../images/bg-mainmenu.png') top center no-repeat; z-index:2000;}
.l-body .p-abs.nav .main{ height:100%;}
.l-body .p-abs.nav ul.navall { width:725px; height:57px; top:18px; left:119px;}
.l-body .p-abs .navall li{ display:block; height:100%; float:left;}
.l-body .p-abs .navall li a{ background:url('../images/bt-mainmenu.png') top center no-repeat;}
.l-body .p-abs .navall li.nav-theme{ width:93px; }
.l-body .p-abs .navall li.nav-theme a{ background-position:0 0;}
.l-body .p-abs .navall li.nav-theme a:hover,.l-body .p-abs.navall li.nav-theme a.on{ background-position:0 -57px;}
.l-body .p-abs .navall li.nav-bodycare{ width:182px;  }
.l-body .p-abs .navall li.nav-bodycare a{ background-position:-93px 0;}
.l-body .p-abs .navall li.nav-bodycare a:hover,.l-body .p-abs.navall li.nav-bodycare a.on{ background-position:-93px -57px;}
.l-body .p-abs .navall li.nav-skin{ width:125px;  }
.l-body .p-abs .navall li.nav-skin a{ background-position:-275px 0;}
.l-body .p-abs .navall li.nav-skin a:hover,.l-body .p-abs.navall li.nav-skin a.on{ background-position:-275px -57px;}
.l-body .p-abs .navall li.nav-tips{ width:148px;  }
.l-body .p-abs .navall li.nav-tips a{ background-position:-400px 0;}
.l-body .p-abs .navall li.nav-tips a:hover,.l-body .p-abs.navall li.nav-tips a.on{ background-position:-400px -57px;}
.l-body .p-abs .navall li.nav-recommend{ width:121px; }
.l-body .p-abs .navall li.nav-recommend a{ background-position:-548px 0;}
.l-body .p-abs .navall li.nav-recommend a:hover,.l-body .p-abs.navall li.nav-recommend a.on{ background-position:-548px -57px;}
.l-body .p-abs .navall li.nav-video{ width:56px; }
.l-body .p-abs .navall li.nav-video a{ background-position:-669px 0;}
.l-body .p-abs .navall li.nav-video a:hover,.l-body .p-abs.navall li.nav-video a.on{ background-position:-669px -57px;}


/* footer */
.l-body .footer{ width:100%; height:157px; text-indent:-9999px; background:url('../images/bg-footer.png') center center no-repeat; left:0; bottom:0; z-index:1;}
.l-body .obj-copyright{ background:url('../images/txt-copyright.png') no-repeat; width:526px; height:16px;left:190px; bottom:-141px;}
.l-body .obj.obj-btn-mail{ width:28px; height:28px;right:243px; bottom:-145px;}
.l-body .obj.obj-btn-mail a{ background:url('../images/bt-mail.png') left top no-repeat;}
.l-body .obj.obj-btn-mail a:hover{ background-position:left bottom; }
.l-body .obj.obj-btn-fb{ width:27px; height:28px;right:211px; bottom:-145px;}
.l-body .obj.obj-btn-fb a{ background:url('../images/bt-fb.png') left top no-repeat;}
.l-body .obj.obj-btn-fb a:hover{ background-position:left bottom; }
.l-body .obj.obj-btn-map{ width:27px; height:28px;right:178px; bottom:-145px;}
.l-body .obj.obj-btn-map a{ background:url('../images/bt-map.png') left top no-repeat;}
.l-body .obj.obj-btn-map a:hover{ background-position:left bottom; }


/* all-bg */
.wrapper.index{ background:url('../images/bg-index.jpg') center center no-repeat; height:100%;}
.wrapper.products{ background:url('../images/bg-products.jpg') center center no-repeat; }
.wrapper.preferential{ background:url('../images/bg-preferential.jpg') top center no-repeat; }

/* 共用文字 */
/*.l-body p.obj-txt01{ width: 255px; font-size: 15px; height:42px; overflow:hidden;color: #df7700;margin-top: 13px;line-height: 20px;font-weight: bold;}
.l-body p.obj-txt02{ width: 255px; font-size: 13px; height:65px;overflow:hidden;color: #6e6e6e;margin-top:55px;line-height:18px;}*/


/*======== 首頁 ====================================*/
html.index, body.index{ height:100%;}
.l-body .index .area-home .main{ position:absolute;height:730px; top:50%; margin-top:-365px;}
/*.l-body .index .area-home .obj-kv-slideshow{ left:20px; top:70px;}*/
.l-body .index .area-home .obj-kv-slideshow .maskbanner{ z-index: 5; cursor: pointer;}
.l-body .index .area-home .obj-kv-slideshow .bannerContent{ position: absolute; }
/*.l-body .index .area-home .obj-kv-slideshow .obj-kv{ left:-14px; top:-52px;}*/
.l-body .index .area-home .obj-kv-slideshow a.kvmouse{ position:absolute;width: 1000px; height: 674px;z-index: 6;}

.l-body .index .area-home ul.obj-kv-drop{ right:20px; bottom:80px; z-index: 1000; z-index: 5;}
.l-body .index .area-home ul.obj-kv-drop li{ width:16px; height:20px; float:left; margin-right:17px;}
.l-body .index .area-home ul.obj-kv-drop li a{ background:url('../images/bt-drop.png') left top no-repeat; }
.l-body .index .area-home ul.obj-kv-drop li:hover a,.l-body .index .area-home ul.obj-kv-drop li.on a{ background-position:left bottom; }

.l-body .obj.obj-index-flowers01{ left:-100px;bottom:100px;}
.l-body .obj.obj-index-flowers02 img{ width:60%;}
.l-body .obj.obj-index-flowers02{ left:-200px;top:200px; }
.l-body .obj.obj-index-flowers03 img{ width:80%;}
.l-body .obj.obj-index-flowers03{ right:-95px;top:165px; }
.l-body .obj.obj-index-water01{ left:-130px;top:240px;}
.l-body .obj.obj-index-water02{ left:-70px;top:420px;}
.l-body .obj.obj-index-water03{ right:-270px;top:300px;}
.l-body .obj.obj-index-water04{ right:-70px;top:490px;}





/*======== 產品介紹-pH5.5經典身體護膚系列 ====================================*/
.l-body .products .pro_top{ position: relative; width: 1000px; height: 926px; }
.l-body .products  ul.obj-kv-drop{position:absolute;left:480px;top:890px;z-index: 1000;z-index: 5;}
.l-body .products  ul.obj-kv-drop li{ width:16px; height:20px; float:left; margin-right:17px;}
.l-body .products  ul.obj-kv-drop li a{ background:url('../images/bt-drop.png') left top no-repeat; }
.l-body .products  ul.obj-kv-drop li:hover a,.l-body .products  ul.obj-kv-drop li.on a{ background-position:left bottom; }
.l-body .products .pro_top .pro_top_products, .l-body .products .pro_top .pro_top_products img{ position: absolute; }



.l-body .obj.obj-btn-buynow01{ width:158px; height:148px;left:715px; top:725px;}
.l-body .obj.obj-btn-buynow01 a{ background:url('../images/bt-buy01.png') left top no-repeat;}
.l-body .obj.obj-btn-buynow01 a:hover{ background-position:left bottom; }
.l-body .obj.obj-btn-buynow02{ width:170px; height:62px;left:135px; top:1609px;}
.l-body .obj.obj-btn-buynow03{ width:170px; height:62px;left:725px; top:1609px;}
.l-body .obj.obj-btn-buynow02 a,.l-body .obj.obj-btn-buynow03 a{ background:url('../images/bt-buy02.png') left top no-repeat;}
.l-body .obj.obj-btn-buynow02 a:hover,.l-body .obj.obj-btn-buynow03 a:hover{ background-position:left bottom; }


.l-body .obj.obj-products-flowers01{left:1060px;top:170px;}
.l-body .obj.obj-products-flowers02{left:-50px;top:510px;}
.l-body .obj.obj-products-flowers03 img{ width:50%;}
.l-body .obj.obj-products-flowers03{ left:-300px;top:350px; }
.l-body .obj.obj-products-flowers04 img{ width:80%;}
.l-body .obj.obj-products-flowers04{ right:-200px;top:950px;}
.l-body .obj.obj-products-flowers05 img{ width:80%;}
.l-body .obj.obj-products-flowers05{ left:10px;top:1030px; }
.l-body .obj.obj-products-flowers06 img{ width:50%;}
.l-body .obj.obj-products-flowers06{ left:-90px;top:1120px;}
.l-body .obj.obj-products-flowers07 img{ width:65%;}
.l-body .obj.obj-products-flowers07{ right:-180px;top:1540px; }
.l-body .obj.obj-products-flowers08{ right:-250px;top: 550px; transform:rotate(-20deg);}
.l-body .obj.obj-products-flowers09{ left:-350px;top:1380px; }
.l-body .obj.obj-products-water01{ right:-80px;top:290px;}
.l-body .obj.obj-products-water02{ left:-110px;top:400px;}
.l-body .obj.obj-products-water03{ right:-50px;top:520px;}
.l-body .obj.obj-products-water04{ right:-130px;top:1050px;}
.l-body .obj.obj-products-water05{ left:-130px;top:1520px;}





/*======== 測驗-膚質測驗 ====================================*/
.problem{ height:100%; min-height: 948px;}

.l-body .area-problem .qa{ display:block; }
.l-body .obj.obj-btn-result{ width:177px; height:78px;left:153px; top:757px; z-index:2;}
.l-body .obj.obj-btn-result a{ background:url('../images/bt-result.png') left top no-repeat;}
.l-body .obj.obj-btn-result a:hover{ background-position:left bottom; }

.l-body .area-problem ul.obj-test-tick{ position:relative; left:-25px;}
.l-body .area-problem ul.obj-test-tick li{ width:27px; height:28px; float:left; margin-left:55px; }
.l-body .area-problem ul.obj-test-tick li a{ background:url('../images/tick.png') left top no-repeat; }
.l-body .area-problem ul.obj-test-tick li a:hover,.l-body .area-problem ul.obj-test-tick li a.on{ background-position:left bottom; }
.l-body .area-problem .obj.qa01{ top:200px;}
.l-body .area-problem .obj.qa02{ top:300px;}
.l-body .area-problem .obj.qa03{ top:400px;}
.l-body .area-problem .obj.qa04{ top:500px;}
.l-body .area-problem .obj.qa05{ top:600px;}
.l-body .area-problem .obj.qa06{ top:700px;}

.l-body .area-problem .obj.qa03 li.tick02{margin-left: 133px;}
.l-body .area-problem .obj.qa03 li.tick03{margin-left: 70px;}
.l-body .area-problem .obj.qa03 li.tick04{margin-left: 57px;}


/* 測驗結果 */
/*.l-body .area-problem .result01{ display:none;}
.l-body .area-problem .result02{ display:none;}
.l-body .area-problem .result03{ display:none;}*/
.l-body .area-problem .result, .l-body .area-problem .result .result_img{display: none;}
.l-body .obj.obj-btn-lookmore{ width:170px; height:65px;left:235px; top:738px; z-index:2;}
.l-body .obj.obj-btn-lookmore a{ background:url('../images/bt-more.png') left top no-repeat;}
.l-body .obj.obj-btn-lookmore a:hover{ background-position:left bottom; }

.l-body .obj.obj-btn-retest{ width:170px; height:65px;left:422px; top:738px; z-index:2;}
.l-body .obj.obj-btn-retest a{ background:url('../images/bt-reresult.png') left top no-repeat;}
.l-body .obj.obj-btn-retest a:hover{ background-position:left bottom; }

.l-body .area-problem .obj-recommend{ width: 453px; height:256px; top:465px; left:180px; text-align: center;}
.l-body .area-problem .obj-recommend ul{ display: inline-block; overflow: hidden;}
.l-body .area-problem .obj-recommend ul li{ float:left; }

.l-body .obj.obj-problem-flowers01 img{ width:60%;}
.l-body .obj.obj-problem-flowers01{right:-150px;top:450px;}
.l-body .obj.obj-problem-flowers02{left:-200px;top:245px;}
.l-body .obj.obj-problem-water01{ left:-135px;top:350px;}
.l-body .obj.obj-problem-water02{ left:-170px;top:690px;}





/*======== 肌膚保養小常識 ====================================*/
.tips{ height: 100%;}
.tips .l-body{ height: auto;}

.l-body .area-tips ul.obj.skintips { width:800px; height:76px; top:160px; left:70px; z-index: 1; }
.l-body .area-tips .obj.skintips li{ position:relative; display:block; height:76px; float:left; }
.l-body .area-tips .obj.skintips li a{ background:url('../images/bt-maintips.png') top center no-repeat;}
.l-body .area-tips .obj.skintips li.obj.obj-understanding{ width:174px;}
.l-body .area-tips .obj.skintips li.obj.obj-understanding a{ background-position:0 0;}
.l-body .area-tips .obj.skintips li.obj.obj-understanding a:hover,.l-body .area-tips .obj.skintips li.obj.obj-understanding a.on{ background-position:0 -76px;}
.l-body .area-tips .obj.skintips li.obj.obj-remove{ width:282px;}
.l-body .area-tips .obj.skintips li.obj.obj-remove a{ background-position:-174px 0;}
.l-body .area-tips .obj.skintips li.obj.obj-remove a:hover,.l-body .area-tips .obj.skintips li.obj.obj-remove a.on{ background-position:-174px -76px;}
.l-body .area-tips .obj.skintips li.obj.obj-select{ width:344px;}
.l-body .area-tips .obj.skintips li.obj.obj-select a{ background-position:-456px 0;}
.l-body .area-tips .obj.skintips li.obj.obj-select a:hover,.l-body .area-tips .obj.skintips li.obj.obj-select a.on{ background-position:-456px -76px;}

.l-body .area-tips .tipsarea{ position: relative; display: block; width:100%;  height: auto; min-height: 560px; padding-top:267px; padding-left:65px;}
.l-body .area-tips .tips01{display: block;}
.l-body .area-tips .tips02{display: none;}
.l-body .area-tips .tips03{display: none;}

/* .l-body .area-tips .tips01,.l-body .area-tips .tips02,.l-body .area-tips .tips03{ padding-top:267px; padding-left:65px;} */

/* list列表 */
.l-body .area-tips .obj.tips-list { position:relative; display:block; width:1000px; height:auto; left:68px; }
.l-body .area-tips .obj.tips-list ul.obj.obj-content{ position: relative; display: block; width:900px; height: auto; overflow: hidden; min-height: 200px;}
.l-body .area-tips .obj.tips-list li{ position: relative; display: none; width: 255px; float: left; margin-right:35px;height:50px; margin:0 33px 265px 0;}
.l-body .area-tips .obj.tips-list li img{ border:#d8eb9b 1px solid;}

.l-body .area-tips .obj.tips-list a{ text-indent:0;text-decoration: none;}
.l-body .area-tips .obj.tips-list a p.obj-txt02 span{ color:#00743d; }
.l-body .area-tips .obj.tips-list a:hover p.obj-txt01{ text-decoration: underline;}
.l-body .area-tips .obj.tips-list a:hover p.obj-txt02 span{ text-decoration: underline}
.l-body .area-tips .obj.tips-list p.obj-txt01{ position: relative; width: 255px; font-size: 15px; height:auto; max-height: 42px; overflow:hidden;color: #df7700;margin-top: 13px;line-height: 20px;font-weight: bold;}
.l-body .area-tips .obj.tips-list p.obj-txt02{ position: relative;  width: 255px;font-size: 13px; height: 190px; overflow:hidden;color: #6e6e6e; line-height:18px; margin: 0;}


/* 頁碼 */
.l-body .area-tips .pagenumber-area{ position: relative; display:block; width:1000px; height:100px; text-align: center;margin-bottom:100px;top:15px;z-index:2;} 
.l-body .area-tips div.obj.pagenumber { position: relative; display: inline-block; width:auto; }
.l-body .area-tips div.obj.pagenumber a{position:relative;float:left;/*padding: 0 5px 0 0;*/ /*margin-right: -15px;*/}
.l-body .area-tips div.obj.pagenumber a{ text-indent:0;width:35px;color:#6c6c6c;font-size:13px;text-decoration:none; font-weight:bold; }
.l-body .area-tips div.obj.pagenumber a:hover,.l-body .area-tips div.obj.pagenumber a.on{ color:#df7700; font-weight:bold;}
.l-body .area-tips div.obj.pagenumber a.prev-prev{ width:22px; height:20px; background:url('../images/All_PageNumber_Prev00.png') 0 0 no-repeat;text-indent:-9999px; margin-top:-4px;}
.l-body .area-tips div.obj.pagenumber a.prev-prev:hover{ background-position:left bottom;}
.l-body .area-tips div.obj.pagenumber a.prev{ width:22px; height:20px; background:url('../images/All_PageNumber_Prev.png') 0 0 no-repeat;text-indent:-9999px;margin-top:-4px;}
.l-body .area-tips div.obj.pagenumber a.prev:hover{ background-position:left bottom;}
.l-body .area-tips div.obj.pagenumber a.next{ width:22px; height:20px; background:url('../images/All_PageNumber_Next.png') 0 0 no-repeat;text-indent:-9999px;margin-top:-4px;}
.l-body .area-tips div.obj.pagenumber a.next:hover{ background-position:left bottom;}
.l-body .area-tips div.obj.pagenumber a.next-next{ width:22px; height:20px; background:url('../images/All_PageNumber_Next00.png') 0 0 no-repeat;text-indent:-9999px;margin-top:-4px;}
.l-body .area-tips div.obj.pagenumber a.next-next:hover{ background-position:left bottom;}

.l-body .obj.obj-tips-flowers01 img{ width:50%;}
.l-body .obj.obj-tips-flowers01{left:-170px;top:390px;}
.l-body .obj.obj-tips-flowers02 img{ width:40%;}
.l-body .obj.obj-tips-flowers02{right:-160px;top:700px;}
.l-body .obj.obj-tips-flowers03 img{ width:70%;}
.l-body .obj.obj-tips-flowers03{right:-110px;top:755px;}
.l-body .obj.obj-tips-flowers04{left:-155px;;bottom:25px;}
.l-body .obj.obj-tips-flowers05 img{ width:50%;}
.l-body .obj.obj-tips-flowers05{left:-50px;;bottom:-20px;}

.l-body .obj.obj-tips-water01{ left:-145px;top:435px;}
.l-body .obj.obj-tips-water02{ right:-100px;top:280px;}
.l-body .obj.obj-tips-water03{ right:-50px;bottom:70px;}
.l-body .obj.obj-tips-water04{ right:-25px;top:597px;}





/*======== 好用推薦 ====================================*/
.recommend{ height: 100%;}
.recommend .l-body{ height: auto;}

.l-body .area-recommend{ padding-top:160px; }
.l-body .area-recommend ul.classification { position: relative; width:937px; height:77px; margin-left: 123px;}
.l-body .area-recommend .classification li{ position:relative; display:block;height:77px; float:left; }
.l-body .area-recommend .classification li a{ background:url('../images/bt-recommend-menu.png') top center no-repeat;}
.l-body .area-recommend .classification li.obj.obj-allclass{ width:232px;}
.l-body .area-recommend .classification li.obj.obj-allclass a{ background-position:0 0;}
.l-body .area-recommend .classification li.obj.obj-allclass a:hover,.l-body .area-recommend .classification li.obj.obj-allclass a.on{ background-position:0 -77px;}
.l-body .area-recommend .classification li.obj.obj-bloggers{ width:237px;}
.l-body .area-recommend .classification li.obj.obj-bloggers a{ background-position:-232px 0;}
.l-body .area-recommend .classification li.obj.obj-bloggers a:hover,.l-body .area-recommend .classification li.obj.obj-bloggers a.on{ background-position:-232px -77px;}
.l-body .area-recommend .classification li.obj.obj-doctors{ width:237px; display: none;}
.l-body .area-recommend .classification li.obj.obj-doctors a{ background-position:-469px 0;}
.l-body .area-recommend .classification li.obj.obj-doctors a:hover,.l-body .area-recommend .classification li.obj.obj-doctors a.on{ background-position:-469px -77px;}
.l-body .area-recommend .classification li.obj.obj-celebrity{ width:231px;}
.l-body .area-recommend .classification li.obj.obj-celebrity a{ background-position:-706px 0;}
.l-body .area-recommend .classification li.obj.obj-celebrity a:hover,.l-body .area-recommend .classification li.obj.obj-celebrity a.on{ background-position:-706px -77px;}
.area-recommend .main{ min-height: 720px; }
/* list列表 */
.l-body .area-recommend .recommend-list { position:relative; display:block; width:1000px; height:auto; margin-left:58px; margin-top:25px;  margin-bottom:100px; overflow: hidden;}
.l-body .area-recommend .recommend-list ul.obj.obj-easy{ display: block; width:900px; height: auto; overflow: hidden;}
.l-body .area-recommend .recommend-list li{width: 255px; float: left; margin-right:35px;height:50px; margin:0 33px 250px 0; list-style: none;}
.l-body .area-recommend .recommend-list li img{ border:#d8eb9b 1px solid;}
.l-body .area-recommend .recommend-list a{ text-indent:0;text-decoration: none;}
.l-body .area-recommend .recommend-list a p.obj-txt02 span{ color:#00743d; }
.l-body .area-recommend .recommend-list a:hover p.obj-txt01{ text-decoration: underline;}
.l-body .area-recommend .recommend-list a:hover p.obj-txt02 span{ text-decoration: underline}

.l-body .area-recommend .recommend-list .pic-people {position: relative;}
.l-body .area-recommend .recommend-list .obj-classification01{background:url('../images/recommend-classification01.png') no-repeat;width: 90px;
height: 27px;position: absolute;padding-top: -305px;margin-top: 145px;left: 167px;}
.l-body .area-recommend .recommend-list .obj-classification02{background:url('../images/recommend-classification02.png') no-repeat;width: 103px;
height: 27px;position: absolute;padding-top: -305px;margin-top: 145px;left: 155px;}
.l-body .area-recommend .recommend-list .obj-classification03{background:url('../images/recommend-classification03.png') no-repeat;width: 88px;
height: 27px;position: absolute;padding-top: -305px;margin-top: 145px;left: 169px;}
.l-body .area-recommend .recommend-list p.obj-txt01{ position: relative; width: 255px; font-size: 15px; height:auto; max-height: 42px; overflow:hidden;color: #df7700;margin-top: 13px;line-height: 20px;font-weight: bold;}
.l-body .area-recommend .recommend-list p.obj-txt02{ position: relative;  width: 255px;font-size: 13px; height: 190px; overflow:hidden;color: #6e6e6e; line-height:18px; margin: 0;}

.l-body .obj.obj-recommend-flowers01 img{ width:50%;}
.l-body .obj.obj-recommend-flowers01{left:-170px;top:390px;}
.l-body .obj.obj-recommend-flowers02 img{ width:40%;}
.l-body .obj.obj-recommend-flowers02{right:-260px;top:600px;}
.l-body .obj.obj-recommend-flowers03 img{ width:70%;}
.l-body .obj.obj-recommend-flowers03{right:-110px;top:755px;}
.l-body .obj.obj-recommend-flowers04{left:-155px;;bottom:25px;}
.l-body .obj.obj-recommend-flowers05 img{ width:50%;}
.l-body .obj.obj-recommend-flowers05{left:-50px;;bottom:-20px;}

.l-body .obj.obj-recommend-water01{ left:-145px;top:435px;}
.l-body .obj.obj-recommend-water02{ right:-100px;top:280px;}
.l-body .obj.obj-recommend-water03{ right:-50px;bottom:70px;}
.l-body .obj.obj-recommend-water04{ top:597px;}




/*======== 影片 ====================================*/
.video{ height: 100%;}
.video .l-body{ height: auto;}

.l-body .area-video{ padding-top:160px; }
.area-video .main{ min-height: 720px; }
/* list列表 */
.l-body .area-video .video-list { position:relative; display:block; width:1000px; height:auto; margin-left:58px; margin-top:25px;  margin-bottom:100px; overflow: hidden;}
.l-body .area-video .video-list ul.obj.obj-easy{ display: block; width:900px; height: auto; overflow: hidden;}
.l-body .area-video .video-list li{width: 255px; float: left; margin-right:35px;height:50px; margin:0 33px 250px 0; list-style: none;}
.l-body .area-video .video-list li img{ border:#d8eb9b 1px solid;}
.l-body .area-video .video-list a{ text-indent:0;text-decoration: none;}
.l-body .area-video .video-list a:hover p.obj-txt01{ text-decoration: underline;}
.l-body .area-video .video-list p.obj-txt01{ position: relative; width: 255px; font-size: 15px; height:auto; max-height: 42px; overflow:hidden;color: #df7700;margin-top: 13px;line-height: 20px;font-weight: bold;}

.l-body .area-video .video-list .pic-people {position: relative; width: 256px; height: 172px;}
.l-body .area-video .video-list .obj-play{position: absolute;background:url('../images/video-playicon') no-repeat;width:55px;height: 54px;margin-top: 65px;left: 98px;}

.l-body .obj.obj-video-flowers01 img{ width:50%;}
.l-body .obj.obj-video-flowers01{left:-170px;top:390px;}
.l-body .obj.obj-video-flowers02 img{ width:40%;}
.l-body .obj.obj-video-flowers02{right:-260px;top:600px;}
.l-body .obj.obj-video-flowers03 img{ width:70%;}
.l-body .obj.obj-video-flowers03{right:-180px;top:755px;}
.l-body .obj.obj-video-flowers04{left:-155px;;bottom:25px;}
.l-body .obj.obj-video-flowers05 img{ width:50%;}
.l-body .obj.obj-video-flowers05{left:-50px;;bottom:-20px;}

.l-body .obj.obj-video-water01{ left:-145px;top:435px;}
.l-body .obj.obj-video-water02{ right:-100px;top:280px;}
.l-body .obj.obj-video-water03{ right:-50px;bottom:70px;}
.l-body .obj.obj-video-water04{ top:597px;}

/* 影片播放PP視窗*/
.l-body .movies{ display:none; width:100%; height:100%; background:rgba(243,253,220,0.93); left:0; top:0; z-index:9899;  }
.l-body .movies iframe{border:#d5ed8a 5px solid; }
.l-body .movies .obj-moviesplay{width:780px;height:472px;left:50%;margin-left:-390px;top:50%;margin-top:-375px;padding-left: 81px;padding-top: 61px;}
.l-body .movies .obj-moviesplay .movies-btn-close{width:50px;height:42px;right: 69px;top: 19px;}
.l-body .movies .obj-moviesplay .movies-btn-close a{ background:url('../images/video-close.png') center center no-repeat; }

/*======== 填資料-免費試用 ====================================*/

.l-body .area-preferential{ display: block; }

.preferential{ height:100%; /*min-height: 1100px;*/}

.l-body .area-preferential .obj.Q1 { position: relative; padding-top:150px;padding-left:60px; z-index: 3; }
.l-body .area-preferential .obj.Q2 { position: relative; padding-top:0px;padding-left:60px; display: none; z-index: 3;}


.l-body .area-preferential ul.addproblem li{ /*padding-bottom:36px; line-height:27px;*/ clear:left; padding-top:8px; }

/* 文字 */

.l-body .area-preferential p.obj-txt01{ position: relative;font-size: 18px; color: #da8019; float: left;font-weight: bold;}
.l-body .area-preferential p.obj-txt02{ position: relative;width: 890px;font-size: 14px; line-height: 20px;color: #00743d;font-weight: bold; margin-bottom:0px;}
.l-body .area-preferential p.obj-txt03{ position: relative;font-size: 15px; color: #7e473a;font-weight: bold;line-height: 30px;}
.l-body .area-preferential p.obj-txt04{ position: relative;font-size: 15px; color: #7e473a; float: left;font-weight: bold;line-height: 30px;}


/* 表單 */

input[type=checkbox], input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}
input[type=radio] {
    bottom: 2px;
}


.l-body .area-preferential input.txtother{width:100px; height:25px;    font-family: "微軟正黑體",Arial, Helvetica, sans-serif;border-width: 1px;
border-style: solid;border-color: #b1d583;background: #e6f2bf; margin-left: 5px;font-size: 14px; padding-left:5px;}


.l-body .area-preferential a.bttick{ width:27px; height:28px;background:url('../images/tick.png') left top no-repeat; float:left; padding-left:8px;}
.l-body .area-preferential a.bttick:hover,.l-body .area-preferential a.bttick .on{ background-position:left bottom; }

.l-body .area-preferential ul.datatick{ position:relative; left:-25px;}
.l-body .area-preferential ul.datatick li{ width:27px; height:28px; float:left; margin-left:37px; }
.l-body .area-preferential ul.datatick li a{ background:url('../images/tick.png') left top no-repeat; }
/*.l-body .area-preferential ul.datatick li a:hover,*/.l-body .area-preferential ul.datatick li a.on{ background-position:left bottom; }


.l-body .area-preferential input.boxchick{ width:18px;height:18px; margin-left:8px;}


.l-body .area-preferential .datatick.obj-test-AA{ top:-27px; left:262px;}
.l-body .area-preferential .datatick.obj-test-BB{ top:50px; left:-165px;}

.l-body .area-preferential .obj.Q2 { position: relative; padding-top:0px;padding-left:60px; display: none; z-index: 3;}
.l-body .area-preferential .datatick.obj-test-BB{ top:50px; left:-130px}
.l-body .area-preferential ul.datatick li.BB-01{ margin-left:0px}
.l-body .area-preferential ul.datatick li.BB-02{ margin-left:70px}
.l-body .area-preferential ul.datatick li.BB-03{ margin-left:85px}
.l-body .area-preferential ul.datatick li.BB-04{ margin-left:74px}
.l-body .area-preferential ul.datatick li.BB-04{ margin-left:75px}
.l-body .area-preferential ul.datatick li.BB-04{ margin-left:74px}
.l-body .area-preferential ul.datatick li.BB-05{ margin-left:70px}
.l-body .area-preferential ul.datatick li.BB-06{ margin-left:54px}
.l-body .area-preferential ul.datatick li.BB-07{ margin-left:55px}
.l-body .area-preferential ul.datatick li.BB-08{ margin-left:73px}
.l-body .area-preferential ul.datatick li.BB-09{ margin-left:70px}


.l-body .area-preferential .obj.data { position: relative;top:0px;padding-left:60px; z-index:2;}
.l-body .area-preferential .obj.data .information{ height: 526px; overflow: hidden; clear: both; }
.l-body .area-preferential form{position:relative;width:600px;left:-15px;top:-592px;}
.l-body .area-preferential form input,.l-body .area-preferential form select{ position:relative; display:block; width:165px; height:33px; margin-bottom:13px; margin-left:80px;
 font-size:16px; color:#7e473a; line-height:33px; font-family:"微軟正黑體",Arial, Helvetica, sans-serif; padding-left:7px;}
.l-body .area-preferential form input{ border-color:#eb9b3d;border-width:1px;border-style:solid; background:#fff1c8;}
.l-body .area-preferential .datatick.obj-test-CC{ top:-46px; left:300px;}
.l-body .area-preferential form select{width: 100px;float:left;border-color:#eb9b3d;border-width:1px;border-style:solid;background:#fff1c8;padding:0 3px;}
.l-body .area-preferential form select.birthday,.l-body .area-preferential form select.month ,.l-body .area-preferential form select.day{ left:-128px;}
.l-body .area-preferential form select.birthday{ width:120px;}
.l-body .area-preferential form select.month,.l-body .area-preferential form select.day{ width:78px; margin-left:31px;}
.l-body .area-preferential form input.email{ width:370px; top:0px}
.l-body .area-preferential form select.city,.l-body .area-preferential form select.area,.l-body .area-preferential form select.area{top:21px;left: 100px;}
.l-body .area-preferential form select.area{left: 27px;}
.l-body .area-preferential form input.zipcode{
    left: -279px;
    top: 21px;
    width: 70px;
}
.l-body .area-preferential form input.address{t;top: -25px;left: 314px;width: 150px;}
.l-body .area-preferential .obj.copyright a{ position:relative; width:100px;top:0px; left:210px; height:28px;;}
.l-body .area-preferential .obj.copy-tick{position:relative;width:27px;height:28px;top: 0px;left:78px;}
.l-body .area-preferential .obj.copy-tick a{ background:url('../images/tick-orange.png') left top no-repeat;}
.l-body .area-preferential .obj.copy-tick a:hover,.l-body .area-preferential .obj.copy-tick a.on{ background-position:left bottom; }
.l-body .area-preferential .obj.exchange { position:relative; width:289px; height:293px; top:-293px; left:580px }
.l-body .area-preferential .obj.exchange img{border:#d8eb9b 1px solid; }
.l-body .area-preferential .obj.send{position:relative;width:139px;height:62px;top: -580px;left:270px;}
.l-body .area-preferential .obj.send a{ background:url('../images/bt-send.png') left top no-repeat;}
.l-body .area-preferential .obj.send a:hover{ background-position:left bottom; }
.l-body .area-preferential .obj.cancel{position:relative;width:139px;height:62px;left:427px;top: -643px;}
.l-body .area-preferential .obj.cancel a{ background:url('../images/bt-cancel.png') left top no-repeat;}
.l-body .area-preferential .obj.cancel a:hover{ background-position:left bottom; }

.l-body .obj.obj-preferential-flowers01 img{ width:78%;}
.l-body .obj.obj-preferential-flowers01{left:-170px;top:330px;}
.l-body .obj.obj-preferential-flowers02 img{ width:80%;}
.l-body .obj.obj-preferential-flowers02{right:-200px;top:440px;}
.l-body .obj.obj-preferential-flowers03 img{ width:50%;}
.l-body .obj.obj-preferential-flowers03{right:-160px;top:520px;}
.l-body .obj.obj-preferential-water01{ right:-145px;top:280px;}
.l-body .obj.obj-preferential-water02{ left:-150px;top:450px;}

/*======== fb share =========*/
.fb_share { position: fixed; width: 100%; height: 100%; z-index: 3000; display: none; } 
.fb_share .bg{ position: absolute; width: 100%; height: 100%; z-index: 1; background: #f1f7dd; opacity: 0.8; }
.fb_share .fb_content{ position: absolute; background: url(../images/fb-bg.png); width: 559px; height: 590px; top: 50%; left: 50%; margin: -285px 0 0 -280px; z-index: 5;}
.fb_share .fb_content .fb_close{ position: absolute; background: url(../images/fb-close.png) no-repeat; width: 61px; height: 61px; top: 40px; right: 45px; }
.fb_share .fb_content .fb_sahreBtn{ position: absolute; background: url(../images/fb-bt-share.png) no-repeat; width: 170px; height: 65px; top: 170px; left: 90px; }
.fb_share .fb_content .fb_cancelBtn{ position: absolute; background: url(../images/fb-bt-cancel.png) no-repeat; width: 170px; height: 65px; top: 170px; left: 280px; }
.fb_share .fb_content .fb_sahreBtn:hover, .fb_share .fb_content .fb_cancelBtn:hover{ background-position: 0 -65px; }