body {
     margin: 0px;
     padding: 0px;
     font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif, "微軟正黑體";
     background: #000;
     color: #fff;
 }

 a {
     text-decoration: none;
     color: #fff;
 }

 a:active {
     color: #fff;
 }

 a img {
     border: 0;
 }
 /*=============logo bar=============*/

 .header {
     width: 100%;
     height: 130px;
     position: absolute;
     top: 0;
     z-index: 999;
 }

 .logo_bar {
     width: 100%;
     max-width: 1280px;
     height: 130px;
     margin: 0 auto;
 }


 .philips_logo {
     width: 185px;
     height: 130px;
     margin:20px 0 0 20px; 
     background: url(../images/philips_logo.png) no-repeat;
     float: left;
     transition: 0.3s;
 }

 .philips_logo:hover {
     background: url(../images/philips_logo_hover.png) no-repeat;
 }


 .logo_01 {
     width: 136px;
     height: 30px;
     margin: 25px 20px 0;
     background: url(../images/logo_01.png) no-repeat;
     float: right;
     transition: 0.3s;
 }

 .logo_01:hover {
     opacity: 0.8;
 }

 .btn_fb {
     width: 35px;
     height: 35px;
     margin-top: 25px;
     background: url(../images/fb_icon.png) no-repeat center;
     float: right;
     transition: 0.3s;
 }

 .btn_fb:hover {
     background: url(../images/fb_icon_hover.png) no-repeat center;
 }

 .clear_both {
     clear: both;
 }
 /*=============wrap=============*/

 .wrap {
     position: relative;
     width: 100%;
     height: auto;
 }

 .bg1 {
     background: url(../images/kv-bg.jpg) no-repeat top center;
 }

 .bg2 {
     background: url(../images/bg.jpg) no-repeat top center;
 }
 /*=============kv=============*/

 .kv {
     width: 900px;
     height: 950px;
     margin: 0 auto;
     position: relative;
 }

 .kv_content {
     width: 510px;
     height: 610px;
     position: absolute;
     top: 160px;
     text-align: center;
     transition: initial;
 }

 .kv_title {
     height: 180px;
     margin-bottom: 8px;
 }

 .kv_feature {
     height: 401px;
 }


 .kv_img {
     width: 350px;
     height: 765px;
     position: absolute;
     top: 90px;
     right: 0px;
 }

 .toothbrush2 {
     width: 130px;
     height: 374px;
     position: absolute;
     left: 5px;
     bottom: 0;
     background: url(../images/toothbrush2.png) no-repeat;
     transition: initial;
 }

 .toothbrush1 {
     width: 220px;
     height: 680px;
     right: 30px;
     position: absolute;
     background: url(../images/toothbrush.png) no-repeat;
     transition: initial;
 }

 .light_dot {
     width: 99px;
     height: 94px;
     right: 30px;
     position: absolute;
     top: 185px;
     right: 55px;
     background: url(../images/lightdot.png) no-repeat;
 }

 .kv_btn {
     width: 900px;
     height: 100px;
     position: absolute;
     bottom: 55px;
     font-size: 0;
     box-sizing: border-box;
 }

 .tobuy {
     padding: 0 0 20px 470px;
 }

 .store {
     float: right;
     width: 196px;
     height: 37px;
     margin: -10px 5px 0 0;
     background: url(../images/store.png) no-repeat;
     transition: 0.3s;
 }

 .store:hover {
     background: url(../images/store_hover.png) no-repeat;
 }


 .btn_left {
     width: 218px;
     height: 65px;
     margin-right: 11px;
     display: inline-block;
     cursor: pointer;
 }

 .article {
     background: url(../images/btn_article.png) no-repeat;
     transition: 0.3s;
 }

 .watch {
     background: url(../images/btn_video.png) no-repeat;
     transition: 0.3s;
 }

 .article:hover {
     background: url(../images/btn_article_hover.png) no-repeat;
 }

 .watch:hover {
     background: url(../images/btn_video_hover.png) no-repeat;
 }

 .btn_pchome {
     width: 152px;
     height: 65px;
     display: inline-block;
     background: url(../images/btn_pchome.png) no-repeat;
     transition: 0.3s;
 }

 .btn_pchome:hover {
     background: url(../images/btn_pchome_hover.png) no-repeat;
 }

 .btn_right {
     width: 132px;
     height: 65px;
     margin-left: 10px;
     display: inline-block;
 }

 .yahoo {
     background: url(../images/btn_yahoo.png) no-repeat;
     transition: 0.3s;
 }

 .yahoo:hover {
     background: url(../images/btn_yahoo_hover.png) no-repeat;
 }

 .momo {
     background: url(../images/btn_momo.png) no-repeat;
     transition: 0.3s;
 }

 .momo:hover {
     background: url(../images/btn_momo_hover.png) no-repeat;
 }
 /*=============container=============*/

 .container {
     width: 900px;
     height: auto;
     margin: 0 auto;
 }
 /*=============video=============*/

 #video_box {
     height: 560px;
     position: relative;
     margin-bottom: 60px;
 }

 .video_border {
     height: 506px;
     background: #000;
     border: 2px solid transparent;
     -moz-border-image: -moz-linear-gradient(left, #efefef, #898989, #efefef, #727171, #b5b5b6);
     -webkit-border-image: -webkit-linear-gradient(left, #efefef, #898989, #efefef, #727171, #b5b5b6);
     border-image: linear-gradient(to right, #efefef, #898989, #efefef, #727171, #b5b5b6);
     border-image-slice: 1;
     overflow: hidden;
 }


 .video.a {
     left: 0px;
 }


 .video.b {
     left: 0px;
 }


 .video.c {
     left: 0px;
 }


 .circle_bar {
     /*width: 95px;*/
     height: 15px;
     margin: 0 auto;
 }

 .circle {
     width: 15px;
     height: 15px;
     border-radius: 50%;
     background-color: #fff;
     opacity: 0.5;
     display: inline-block;
     margin: 0 7px;
     cursor: pointer;
 }

 .circle.active {
     opacity: 1;
 }

 .slide_btn {
     width: 66px;
     height: 66px;
     position: absolute;
     top: 230px;
     cursor: pointer;
 }

 .slide_btn.r {
     background: url(../images/slide_r.png) no-repeat;
     right: -85px;
 }

 .slide_btn.l {
     background: url(../images/slide_l.png) no-repeat;
     left: -85px;
 }
 /*=============article=============*/

 .article_box {
     height: auto;
     margin-bottom: 50px;
 }



 #title01 {
     height: 80px;
     text-align: center;
 }

 .editor_bg {
     height: 300px;
     background: url(../images/editor_img.jpg) no-repeat top left;
     position: relative;
     margin-top: 20px;
     border: 2px solid transparent;
     border-radius: 14px;
 }

 .editor_content {
     width: 370px;
     height: 200px;
     position: absolute;
     top: 40px;
     right: 40px;
 }


 .editor_title {
     font-size: 30px;
     font-weight: bold;
     letter-spacing: 0.5px;
     padding-bottom: 15px;
     border-bottom: solid 1px #fff;
 }

 .editor_text {
     font-size: 16px;
     line-height: 26px;
     letter-spacing: 1px;
 }

 .more {
     width: 48px;
     height: 20px;
     border-radius: 20px;
     background: #fff;
     position: absolute;
     right: 20px;
     bottom: 20px;
     color: #005780;
     font-size: 19px;
     padding: 0px 10px 5px;
     overflow: hidden;
     transition: 0.3s;
 }

 .more img {
     display: none;
 }


 .editor_border {
     width: 900px;
     height: 302px;
     background: url(../images/border01.png) no-repeat;
     position: absolute;
     border-radius: 10px;
     left: -2px;
     top: -2px;
     z-index: 5;
     transition: 0.3s;
 }

 .editor_border:hover {
     background-color: rgba(255, 255, 255, 0.25);
 }

 .editor_border:hover .more {
     width: 75px;
 }

 .editor_border:hover .more img {
     display: inline;
 }

 .mark {
     font-size: 15px;
     margin-top:10px; 
     letter-spacing: 1px;
     display: block;
     text-align: center;

 }
 /*=============Ucer=============*/

 #title02 {
     height: 80px;
     text-align: center;
 }

 .box {
     width: 287px;
     height: 302px;
     margin: 15px 19px 15px 0;
     border-radius: 10px;
     float: left;
     position: relative;
 }

 .box.r {
     margin-right: 0px;
 }

 .article01 {
     background: url(../images/a1.jpg) no-repeat;
 }

 .article02 {
     background: url(../images/a2.jpg) no-repeat;
 }

 .article03 {
     background: url(../images/a3.jpg) no-repeat;
 }

 .article04 {
     background: url(../images/a4.jpg) no-repeat;
 }

 .article05 {
     background: url(../images/a5.jpg) no-repeat;
 }

 .article06 {
     background: url(../images/a6.jpg) no-repeat;
 }

 .article07 {
     background: url(../images/a7.jpg) no-repeat;
 }

 .article08 {
     background: url(../images/a8.jpg) no-repeat;
 }

 .article09 {
     background: url(../images/a9.jpg) no-repeat;
 }

 .article10 {
     background: url(../images/a10.jpg) no-repeat;
 }

 .white {
     width: 287px;
     height: 302px;
     border-radius: 10px;
     position: absolute;
     background: url(../images/border02.png) no-repeat;
     transition: 0.3s;
 }


 .title_box {
     width: 283px;
     height: 100px;
     background-color: rgba(0, 0, 0, 0.75);
     background-color: #000 \9;
     position: absolute;
     left: 2px;
     bottom: 2px;
     font-size: 18px;
     font-weight: bold;
     letter-spacing: 0.5px;
     padding: 8px 20px 0px 20px;
     line-height: 25px;
     box-sizing: border-box;
     transition: 0.4s;
     border-bottom-right-radius: 10px;
     border-bottom-left-radius: 10px;
 }

 .username {
     width: 220px;
     background: url(../images/id_icon.png) no-repeat left center;
     padding: 0 0 2px 20px;
     margin-bottom: 5px;
     font-size: 16px;
     font-weight: normal;
     border-bottom: solid 1px #fff;
     display: block;
 }

 .box:hover .white {
     background-color: rgba(255, 255, 255, 0.25);
 }

 .box:hover .title_box {
     background-color: rgba(0, 120, 160, 0.75);
 }
 /*=============gotop=============*/

 #gotop {
     width: 80px;
     height: 80px;
     position: fixed;
     bottom: 85px;
     left: 50%;
     margin-left: 475px;
     background: url(../images/top.png) no-repeat 0 0;
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     transition: 0.5s;
 }

 #gotop.show {
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     opacity: 1;
 }