@charset "utf-8";
@font-face {
  font-family: 'cwTeXHei';
  font-style: normal;
  font-weight: 500;

  src: url(../fonts/cwTeXHei-zhonly.woff2) format('woff2');
}
@import url(https://fonts.googleapis.com/css?family=Muli:400,300italic,300,400italic);
/* CSS Document */

body {
	margin: 0px;
	font-family:'cwTeXHei','微軟正黑體',Arial, Helvetica, sans-serif;
}
img {
	border:0px;
}
.main_container img {
	display:block;
	border:0px;
}
.wrapper {
	position:relative;
	margin:0 auto;
	width:100%;
	max-width:1000px;
}
  .border-red {
	 border-bottom: 1px solid #d92362 !important;
	 margin-bottom: 25px !important;
	 padding-bottom: 5px;
}

.bg-red {
	background-color: #ca0763;
}
.t-red {
	color: #d92362;
}
.t-bk {
	color: #000;
}
.t-w {
	color: #fff;
}
.backtotop {
	position: fixed;
    width: 100%;
    max-width: 1000px;
    top: 70%;
    bottom: 0;
    left: 0;
    right: 0;
    display: table;
    margin: auto;
    text-align: right;
    z-index: 99;
}
.backtotop img {
	right: -53px;
    position: absolute;
    top: 0;
}
.header {
	position:relative;
	margin:0 auto;
	width:100%;
}
.logo {
	position:relative;
	margin:25px auto;
	width:27%;
}
.head_slogan {
	position:relative;
	margin:0 auto 20px auto;
	width:40%;
	font-family:'cwTeXHei','微軟正黑體',Arial, Helvetica, sans-serif;
	font-size:26px;
	text-align:center;
	line-height:38px;
	color:#000;
}
.head_slogan span {
	font-size:46px;
	display:block;
}
#nav {
	width:100%;
	list-style:none;
	margin:0;
	padding:0;
}

#nav li {
	width:33.22%;
	height:36px;
	float:left;
	border-right: 1px solid #fff;
	text-align:center;
	background:url(../images/menu_bg.jpg) no-repeat;
}
#nav li a {
	display: block;
	width:100%;
	padding:2% 0;
	text-decoration: none;
	font-size:18px;
	line-height:28px;
	color:#000;
}
#extraordinary .content_left {
	content: url(../images/extra-01-d.jpg);
	width: 50%;
	height:auto
}
#extraordinary .content_right {
	content: url(../images/extra-02-d.jpg);
	width: 50%;
	height:auto
}
.destop-man-icon {
	background-image: url(../images/man-icon.png);
	background-position: right top;
	background-repeat:no-repeat;
}
.m-man-icon {

	display: none !important;
}

.m01{
	background-position:0 0 !important;
	-webkit-transition:all .2s ease-in;  
    -moz-transition:all .2s ease-in;  
    -o-transition:all .2s ease-in;  
    transition:all .2s ease-in; 
}
.m01:hover{
	opacity:0.7;
}
.m02{
	background-position:35% 0 !important;
	/*width: calc( 34% - 2px ) !important;*/
	-webkit-transition:all .2s ease-in;  
    -moz-transition:all .2s ease-in;  
    -o-transition:all .2s ease-in;  
    transition:all .2s ease-in;
}
.m02:hover{
	opacity:0.7;
}
.m03{
	background-position:70% 0 !important;
	/*width: calc( 34% - 2px ) !important;*/
	-webkit-transition:all .2s ease-in;  
    -moz-transition:all .2s ease-in;  
    -o-transition:all .2s ease-in;  
    transition:all .2s ease-in;
}
.m03:hover{
	opacity:0.7;
}
.m04{
	background-position:100% 0 !important;
	width: calc( 25% - 1px ) !important;
	border-right:0 !important;
	-webkit-transition:all .2s ease-in;  
    -moz-transition:all .2s ease-in;  
    -o-transition:all .2s ease-in;  
    transition:all .2s ease-in;
}
.m04:hover{
	opacity:0.7;
}
.m05{
	display:none;
}
#social_box {
	position:absolute; 
	top:58%;
	right:0%;
}
#social_box img {
	float:left;
}
.main_container {
	position:relative;
	width:100%;
}
.top01 {
	position:relative;
	width:100%;
}
.top01 .content_left {
	position:relative;
	float:left;
	width:50%;
}
.top01 .content_right {
	position:relative;
	float:right;
	width:50%;
}
.top02 {
	position:relative;
	margin-bottom:35px;
	padding:30px 35px;
	width: calc( 100% - 70px );
	background:url(../images/t03.jpg) no-repeat;
	background-size:100%;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.top02 .content01 {
	position:relative;
	margin:15px 0;
	width:100%;
}
.top02 .content01 .content_left {
	position:relative;
	float:left;
	width:16%;
	font-family: 'Century Gothic','Muli',Arial, Helvetica, sans-serif;
	font-size:20px;
	line-height:24px;
}
.top02 .content01 .content_left span {
	font-size:26px;	
}
.top02 .content01 .content_right {
	position:relative;
	float:right;
	width:84%;
}
.top02 .content01 .content_right .title {
	position:relative;
	margin-bottom:5px;
	width:100%;
	font-size:18px;
	border-bottom:1px solid #000;
}
.top02 .content01 .content_right .text {
	position:relative;
	width:100%;
	font-size:15px;
}
.top02 .content02 {
	position:relative;
	margin-bottom:25px;
	padding:25px 30px;
	width: calc( 100% - 60px );
	background:rgba(227,96,159,0.8);
	color:#fff;
}
.top02 .content02 .title {
	position:relative;
	padding-bottom:10px;
	font-size:48px;
	border-bottom:1px solid #fff;
}
.top02 .content02 .title span {
	font-family:'微軟正黑體', Arial, Helvetica, sans-serif;
}
.top02 .content02 .text {
	position:relative;
	margin-top:15px;
	font-size:16px;
}
.top02 .content03 {
	position:relative;
	padding:15px 15px;
	width: calc( 100% - 30px );
	background:rgba(227,96,159,0.8);
	color:#fff;
}
.top02 .content03 .left {
	position:relative;
	float:left;
	padding-right:30px;
	width: calc( 50% - 30px );
	text-align:center;
}
.top02 .content03 .left h1 {
	margin:0;
	font-size:48px;
	font-weight:300;
}
.top02 .content03 .left span {
	font-size:24px;
}
.top02 .content03 .left ul {
	margin:15px 0;
	text-align:left;
	padding-left:35px;
}
.top02 .content03 .left ul li {
	font-size:16px;
	margin-bottom:20px;
}
.top02 .content03 .right {
	position:relative;
	float:right;
	width:50%;
}
.top03 {
	position:relative;
	margin-bottom:30px;
	padding:20px 0 0 0;
	width: 100%;
	background:url(../images/t05.jpg) no-repeat #000;
	background-size:100%;
}
.top03 .content01 {
	position:relative;
	margin:0 35px 15px 35px;
	width: calc( 100% - 70px );
	color:#fff;
}
.top03 .content01 .title {
	font-size:48px;
	padding-bottom:5px;
	border-bottom:1px solid #fff;
}
.top03 .content01 .title span {
	font-family:'微軟正黑體', Arial, Helvetica, sans-serif;
}
.top03 .content01 .text {
	font-size:15px;
	width:76%;
	margin:10px 0;
}
.top03 .content02 {
	position:relative;
	margin:0 20px;
	width: calc( 100% - 40px );
	color:#fff;
}
.buy-red {
	margin-top: 50px;
	margin-bottom: 40px;
	width: 70px;
	padding: 5px 15px;
	text-align: center;
}
.buy-red-2 {
	margin-top: 25px;
	margin-bottom: 40px;
	width: 70px;
	padding: 5px 15px;
	text-align: center;
}
.buy-red a,
.buy-red-2 a ,
.buy-red a:hover,
.buy-red-2 a:hover {
	color: inherit;
	text-decoration:none;
}
		
.top03 .buynow {
  position:relative;
  display: block;
  margin:0 auto;
  padding:0 7%;
  width:86%;
  height:140px;
  line-height:140px;
  background:url(../images/t06.jpg) bottom left no-repeat #000;
  background-size:100%;
}
.top03 .buynow ul {
  font-size: 0px;
  text-align: center;
  margin:0;
  padding:0;
}
/* line 186, sass/style-desktop.scss */
.top03 .buynow ul li {
  background: url("../images/buy.jpg") top center no-repeat;
  padding: 30px 0 0 0;
  display: inline-block;
  margin: 0 2.2% 0 0;
  width: 14.7%;
  box-sizing: border-box;
  vertical-align: top;
  overflow: hidden;
  height: 30px;
  -moz-transition-duration: 0.15s;
  -o-transition-duration: 0.15s;
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
}
/* line 188, sass/style-desktop.scss */
.top03 .buynow ul li a {
  display: block;
  width: 100%;
  height: 24px;
  background: #e6a61a center center no-repeat;
  position: relative;
}
/* line 190, sass/style-desktop.scss */
.top03 .buynow ul li a.watsons {
  background-image: url("../images/buy-watsons.jpg");
}
/* line 191, sass/style-desktop.scss */
.top03 .buynow ul li a.hktv {
  background-image: url("../images/buy-hktv.jpg");
}
/* line 192, sass/style-desktop.scss */
.top03 .buynow ul li a.sasa {
  background-image: url("../images/buy-sasa.jpg");
}
/* line 194, sass/style-desktop.scss */
.top03 .buynow ul li a:hover:after {
  content: " ";
  display: block;
  width: 100%;
  height: 24px;
  background: rgba(255, 255, 255, 0.5);
}
/* line 197, sass/style-desktop.scss */
.top03 .buynow ul li:hover {
  height: 102px;
}
.slides .buy {
	display:none;
}
.top03 .mobile_products {
	display:none;
}
.top04 {
	position:relative;
	margin-bottom:35px;
	padding:25px 35px 35px 35px;
	width: calc( 100% - 70px );
	background:url(../images/t07.jpg) top left no-repeat #000;
	background-size:100%;
}
.top04 .title {
	position:relative;
	margin-bottom:20px;
	color:#fff;
	font-size:48px;
	text-align:center;
}
.top04 .c01 {
	position:relative;
	float:left;
	margin-right:1px;
	width: calc( 33.3% - 1px );
}
.top04 .c02 {
	position:relative;
	float:left;
	margin-right:1px;
	width: calc( 33.3% - 1px );
}
.top04 .c03 {
	position:relative;
	float:left;
	width:33.3%;
}
.top08 {
	position:relative;
	    margin: 0 35px 35px 35px;
	padding:0px 0px 0px 0px;
	
	background-image: url(../images/t08-right-b.png) #000;
	background-image: url(../images/t08-right-b.png) , linear-gradient(#000, #000);
	background-image: url(../images/t08-right-b.png), -moz-linear-gradient(#000, #000); /* For Firefox 3.6 to 15 */
	background-image: url(../images/t08-right-b.png) , o-linear-gradient(#000, #000); /* For Opera 11.1 to 12.0 */
	background-image: url(../images/t08-right-b.png) , -webkit-linear-gradient(#000, #000); /* For Safari 5.1 to 6.0 */
	background-size: auto;
	background-position:right  bottom;
	background-repeat: no-repeat;
	vertical-align: middle;
}
.top08 .bg {

		height: auto;
		background-image: url(../images/t08-left-b.png);
		background-position: left top;
		background-repeat: no-repeat;
		background-size: auto;
		    position: relative;
    overflow: hidden;
	padding-left: 200px;
		
	}
.top08 .title {
	
	margin-bottom:15px;
	font-size:28px;
		color: #fff;
		display:block;
   
		text-shadow: 2px 0 0 #ca0763, -2px 0 0 #ca0763, 0 2px 0 #ca0763, 0 -2px 0 #ca0763, 1px 1px #ca0763, -1px -1px 0 #ca0763, 1px -1px 0 #ca0763, -1px 1px 0 #ca0763;
	
}
.top08 .txt {
	color: #fff;
	font-size: 28px;
	text-transform: uppercase;
	font-stretch: expanded;
}
.top08 .c01 {
	position:relative;
	float:left;
	width: auto;
	
}
.top08 .c02 {
	
	float:left;
	width: auto;
		color: #fff;
	padding: 40px 0 30px 0;
	
}
.top08 .c03 {
	
	float:right;
	width: 133px;
	background-color: #ca0763;
	padding: 20px 20px;
	color: #fff;
	font-size:21px;
	    margin-top: 42px;
    margin-right: 53px;
	background: url(../images/download.png) no-repeat 130px 20px #ca0763;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}
.top08 .c03 a, .top08 .c03 a:hover,  .top08 .c03 a:focus {
	color : #fff;
	text-decoration: none;
}

.top08 .c04 {
	
 content:url(../images/5.png);
  position: relative;
width:60px;
  margin: 0 auto;
  float:left;
	padding:55px  0 0 5px;
}

@media screen and (max-width: 1010px) {
	.top08 .c02 {
	padding: 40px 0 0px 0;
	}
	.top08 .c03 {
		float:left;
		    margin-top: 10px;
			    margin-bottom: 40px;
				margin-right:100px;
	}
}
@media screen and (max-width: 820px) {
	.top08 {
		background-image: url(../images/t08-right-m.png) #000;
	background-image: url(../images/t08-right-mb.png) ,  linear-gradient(45deg,#000,#000,#d36a93);
	background-image: url(../images/t08-right-m.png), -moz-linear-gradient(45deg,#000,#000,#d36a93); /* For Firefox 3.6 to 15 */
	background-image: url(../images/t08-right-m.png) , o-linear-gradient(45deg,#000,#000,#d36a93); /* For Opera 11.1 to 12.0 */
	background-image: url(../images/t08-right-m.png) , -webkit-linear-gradient(45deg,#000,#000,#d36a93); /* For Safari 5.1 to 6.0 */


	}
	.top08 .bg {
		text-align:center;
		padding-left:0;
		background-image: url(../images/t08-left-m.png);
		background-position: left top;
	}
	.top08 .c02 {
		    width: 100%;
    text-align: center;
    margin: 75px auto 0px auto;
	}
	    .top08 .c03 {
			margin-top: 0px;
    margin-right: auto;
	margin-left: auto;
	margin-bottom: 70px;
	float:none;
	    text-align: left;
}
  .top08 .c04 { 
  content:url(../images/5-b.png);
  position: relative;
width:142px;
  margin: 0 auto;
  float:none;
	padding: 30px 0;
  }
.top08 .hide-txt {
	display: none;
}
.top08 .txt {
	font-size: 35px;
	line-height: 40px;
}

}
.top07 {
	position:relative;
	margin-bottom:30px;
	/*padding:35px 0;*/
	padding:5px 0;
	width:100%;
	background-image: url(../images/paris-bg.png), #d81d60;
	background-image: url(../images/paris-bg.png), linear-gradient(#d81d60, #ffffff);
	background-image: url(../images/paris-bg.png), -moz-linear-gradient(#d81d60, #ffffff); /* For Firefox 3.6 to 15 */
	background-image: url(../images/paris-bg.png), o-linear-gradient(#d81d60, #ffffff); /* For Opera 11.1 to 12.0 */
	background-image: url(../images/paris-bg.png), -webkit-linear-gradient(#d81d60, #ffffff); /* For Safari 5.1 to 6.0 */
	
}
.top05 {
	position:relative;
	margin-bottom:30px;
	padding:35px 0;
	width:100%;
	background:#000;
}
.top05 .content01, .top07 .content01 {
	position:relative;
	margin-right:35px;
	margin-bottom:30px;
	width: calc( 100% - 35px );
}
.top05 .content01 .left, .top07 .content01 .left {
	position:relative;
	float:left;
	width:51.8%;
}
.top05 .content01 .right, .top07 .content01 .right {
	position:relative;
	float:right;
	width:48.2%;
}
.top05 .content02, .top07 .content02  {
	position:relative;
	margin:30px 35px 0 35px;
	width: calc( 100% - 70px );
	background:#fff;
}
.top05 .content02 .left , .top07 .content02 .left {
	position:relative;
	float:left;
	width:32%;
}
.top05 .content02 .right  {
	position:relative;
	float:right;
	width:64%;
	margin-right:4%;
}
 .mid {
	padding-top: 65px;
}
@media screen and (max-width: 900px) {
.mid {
    margin-top: 3.5%;
}
}
@media screen and (max-width: 800px) {
.mid {
    margin-top: 5.5%;
}
}
@media screen and (max-width: 700px) {
.mid {
    margin-top: 10%;
}
}
@media screen and (max-width: 640px) {
.mid {
    margin-top: 0;
	padding-top: 0px;
}
}
 .top07 .content02 .right {
	position:relative;
	float:right;
	width:64%;
	margin-right:1%;
	margin-top:1%;
}
.top05 .content02 .right .title {
	position:relative;
	margin-top:30px;
	margin-bottom:15px;
	border-bottom:1px solid #b1b1b1;
	font-size:26px;
}
.top07 .content02 .right .title {
	position:relative;
	margin-top:30px;
	margin-bottom:15px;
	border-bottom:1px solid #b1b1b1;
	font-size:26px;
	margin-right: 4%;
}
.top05 .content02 .right .title span, .top07 .content02 .right .title span {
	font-size:19px;
}
.top05 .content02 .right .title .name, .top07 .content02 .right .title .name {
	position:relative;
	float:left;
	width:70%;
	font-weight: 700;
}
.top05 .content02 .right .title .price, .top07 .content02 .right .title .price {
	position:relative;
	float:right;
	margin-top:5px;
	width:30%;
	font-size:18px;
	text-align:right;
	color:#666;
}
.top05 .content02 .right .desc {
	position:relative;
	font-size:16px;
}
.top07 .content02 .right .desc {
	position:relative;
	font-size:16px;
	margin-right: 4%;
	margin-bottom: 30px;
}
.top05 .content02 .right .desc .buynow, .top07 .content02 .right .desc .buynow {
	position:relative;
	margin-top:40px;
	margin-bottom:30px;
	font-size:17px;
	display: none;
}
.top05 .content02 .right .desc ul, .top07 .content02 .right .desc ul {
	margin:0;
	padding-left:25px;
	font-size:17px;
}
.top05 .content02 .right .desc p, .top07 .content02 .right .desc p {
	margin:0;
	padding-left:0px;
	font-size:17px;
	margin-bottom: 10px;
	line-height: 24px;
}
.top05 .content02 .right .desc .buynow ul, .top07 .content02 .right .desc .buynow ul {
	list-style:none;
	margin:0;
	padding:0;
}
.top05 .content02 .right .desc .buynow ul li, .top07 .content02 .right .desc .buynow ul li {
	float:left;
	margin-right:4%;
	width:25%;
	max-width:90px;
}
.top05 .content02 .right .desc .buynow ul li a, .top07 .content02 .right .desc .buynow ul li a {
	padding:0 2%;
	display:block;
	background:#e6a61a;
}
.top05 .content02 .right .desc .buynow ul li a:hover, .top07 .content02 .right .desc .buynow ul li a:hover {
	opacity:0.7;
}

.top06 {
	position:relative;
	padding:10px 35px 30px 35px;
	width: calc( 100% - 70px );
	background:#000;
	font-size:12px;
	color:#fff;
}
.top06 .left {
	position:relative;
	float:left;
	width:40%;
}
.top06 .right {
	position:relative;
	float:right;
	width:60%;
	text-align:right;
}
#float_btn {
	position:fixed;
	top:45%;
	right:0;
}
#float_btn_mobile {
	display:none;
}
@media screen and (max-width: 1106px) {
.backtotop img {
	right: 3px;
    position: absolute;
    top: 0;
}
}

@media screen and (max-width: 885px) {
	#nav li a {
	font-size:16px;
	line-height:28px;
}
.m01, .m02 {
	width:  33.1% !important;
}
.m03{
	width:33.2% !important;
}
}

@media screen and (min-width: 640px) {
	.destop-hidden {
		display: none!important;
	}

}
@media screen and (max-width: 640px) {
	.top08 .txt {
	font-size: 35px;
	line-height: 45px;
}
	#extraordinary .content_left {
	content: url(../images/extra-01.jpg);
	width: 100%;
	margin-top: 120px;
	
}
#extraordinary .content_right {
	content: url(../images/extra-02.jpg);
	width: 100%;
}
	  .m-border-red {
	 border-bottom: 1px solid #d92362 !important;
	 padding-bottom: 5px;
	 margin-bottom: 5px;
}
	  .border-red {
	 border-bottom: 0px solid #d92362 !important;
	 padding-bottom: 0px!important;
	 margin-bottom: 15px!important;
}
	
	 .buy-red, .buy-red-2 {
	
	width: 50%;
	padding: 10px 15px;
	text-align: center;
	margin: 25px auto 40px auto;
	    font-size: 6vw;
}
.destop-man-icon {
	background-image: none;
}
.m-man-icon {
	padding-left: 10px; vertical-align:middle; display:inline-block !important;
}
	.m-hidden {
		display: none !important;
	}
	.m01, .m02 {
	width:  100% !important;
}
.m03{
	width:100%!important;
}
.wrapper {
	position:relative;
	margin:0 auto;
	margin-bottom:10%;
	width:100%;
	max-width:1000px;
}
#menu {
	position:relative;
	float:right;
	margin-top:-14%;
	margin-right:5%;
	width:8%;
	display: block;
	background:#fff;
	text-align: center;
}
#nav.js {
	display: none;
}
#nav {
	width:100%;
}
.logo {
	position:relative;
	float:left;
	margin:25px 5% 5px 5%;
	width:35%;
}
.header {
	position: fixed;
    top: 0;
    margin: 0 auto;
    width: 100%;
    background: #fff;
    z-index: 99999;
}
.head_slogan {
	position:relative;
	float:left;
	margin:5px 5% 10px 5%;
	width:68%;
	font-family:'cwTeXHei','微軟正黑體',Arial, Helvetica, sans-serif;
	font-size:4vw;
	text-align:left;
	line-height:38px;
	color:#000;
}
.head_slogan span {
	font-size:4vw;
	display:inline;
}
#nav li {
	width:100% !important;
	height:auto;
	float:left;
	border-right: 0px solid #fff;
	text-align:center;
	background:url(../images/menu_bg.jpg) no-repeat;
	background-size:280%;
	margin-bottom:2px;
}

#nav li a {
	display: block;
	width:80%;
	padding:3% 10%;
	text-decoration: none;
	font-size:5.5vw;
	color:#000;
}
.m01{
	background-position:100% 0 !important;
}
.m02{
	background-position:35% 0 !important;
	width: 100% !important;
}
.m03{
	background-position:70% 0 !important;
	border-right:0;
}
.m04{
	background-position:0% 0 !important;
	
}
.m05{
	background-position:0% 0 !important;
	background:#fff !important;
	display:block;
	text-align:center;
}
.m05 .s01{
	width:13% !important;
	padding: 3% 0% !important;
	display:inline !important;
}
.m05 .s02{
	width:21.3% !important;
	padding: 3% 0% !important;
	display:inline !important;
}
.m05 .s03{
	width:12.6% !important;
	padding: 3% 0% !important;
	display:inline !important;
}

#nav-icon4 {
  position: absolute;
  top:0;
  left:0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  display:block;
  width:100%;
  height:55px;
}

#nav-icon4 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 99%;
  background: #000;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon4 {
}

#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 20px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 40px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}


#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 5%;
  left: 30%;
  width:100%;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 70%;
  left: 30%;
  width:100%;
}
#social_box {
	display:none;
}
.top01 .content_left {
	position:relative;
	width:100%;
}
.top01 .content_right {
	position:relative;
	width:100%;
}
.top02 {
	position:relative;
	padding:0%;
	padding-bottom:5vw;
	width: calc( 100% - 0% );
	background:url(../images/t03_m.jpg) 0% 100% no-repeat;
	background-size:100%;
}
.top02 .content01 {
	position:relative;
	margin:30px 5%;
	width:90%;
}
.top02 .content01 .content_left {
	position:relative;
	float:left;
	margin-bottom:20px;
	width:100%;
	font-family: 'Century Gothic','Muli',Arial, Helvetica, sans-serif;
	font-size:6vw;
	line-height:6.5vw;
}
.top02 .content01 .content_left span {
	font-size:8vw;	
}
.top02 .content01 .content_right {
	position:relative;
	float:right;
	width:100%;
}
.top02 .content01 .content_right .title {
	position:relative;
	margin-bottom:10px;
	width:100%;
	font-size:5vw;
	border-bottom:1px solid #000;
}
.top02 .content01 .content_right .text {
	position:relative;
	width:100%;
	font-size:4.5vw;
}
.top02 .content02 {
	position:relative;
	margin:0 5% 30px 5%;
	padding:25px 30px;
	width: calc( 90% - 60px );
	background:rgba(227,96,159,0.8);
	color:#fff;
}
.top02 .content02 .title {
	position:relative;
	padding-bottom:10px;
	font-size:8vw;
	line-height:8vw;
	border-bottom:1px solid #fff;
}
.top02 .content02 .text {
	position:relative;
	margin-top:15px;
	font-size:5vw;
}
.top02 .content03 {
	position:relative;
	margin:0 5%;
	padding:30px;
	width: calc( 90% - 60px );
	background:rgba(227,96,159,0.8);
	color:#fff;
}
.top02 .content03 .left {
	position:relative;
	float:left;
	padding-right:0px;
	width:100%;
	text-align:center;
}
.top02 .content03 .left h1 {
	margin:0;
	font-size:8vw;
	font-weight:300;
}
.top02 .content03 .left span {
	font-size:6vw;
}
.top02 .content03 .left ul {
	margin:15px 0;
	text-align:left;
	padding-left:35px;
}
.top02 .content03 .left ul li {
	font-size:5vw;
	margin-bottom:20px;
}
.top02 .content03 .right {
	position:relative;
	float:right;
	width:100%;
}
.top03 {
	position:relative;
	margin-bottom:30px;
	padding:20px 0 0 0;
	width: 100%;
	background:url(../images/t05_m.jpg) no-repeat #000;
	background-size:106%;
}
.top03 .content01 {
	position:relative;
	margin:20px 35px 15px 35px;
	width: calc( 100% - 70px );
	color:#fff;
}
.top03 .content01 .title {
	font-size:8vw;
	padding-bottom:5px;
	border-bottom:1px solid #fff;
}
.top03 .content01 .title span {
	font-family:'微軟正黑體', Arial, Helvetica, sans-serif;
}
.top03 .content01 .text {
	font-size:5vw;
	width:100%;
	margin:10px 0;
}
.top03 .content02 {
	display:none;
}
.top03 .buynow {
  display:none;
}
.top03 .mobile_products {
	position:relative;
	display:block;
	width:100%;
}
.top03 .mobile_products .flexslider {
	width:100% !important;
	margin:0;
	background:none;
	border:0;
}
.slides .buy {
	position:relative;
	display:block;
	margin-top:-23%;
	margin-bottom:20px;
	text-align:center;
	color:#fff;
	font-size:4.5vw;
}
.slides .buy img {
	width: 26% !important;
    display: -webkit-inline-box !important;
}
.top04 {
	position:relative;
	margin-bottom:35px;
	padding:25px 35px 35px 35px;
	width: calc( 100% - 70px );
	background:url(../images/t07.jpg) top left no-repeat #000;
	background-size:100%;
}
.top04 .title {
	position:relative;
	margin-bottom:20px;
	color:#fff;
	font-size:8vw;
	text-align:center;
}
.top04 .c01 {
	position:relative;
	float:left;
	margin-right:0px;
	margin-bottom:1px;
	width: 100%;
}
.top04 .c02 {
	position:relative;
	float:left;
	margin-right:0px;
	margin-bottom:1px;
	width: 100%;
}
.top04 .c03 {
	position:relative;
	float:left;
	width:100%;
}
.top08 {
	position:relative;
	padding:0px 0px 0px 0px;
	    margin: 0 30px 35px 30px;
}
.top08 .c01 {
	display: none;
}
.top08 .c02 {
	
	font-size: 6vw;
}
.top08 .title {
	    position: relative;
    margin: 20px auto;
    color: #fff;
    font-size: 7vw;
    text-align: center;
    width: 70%;
}


.top08 .c03 {
	position:relative;
	margin-right: auto;
	margin-left: auto;
    width: 220px;
    font-size: 35px;
    background: url(../images/download.png) no-repeat 90% 30px #ca0763;
}
.top05 .content01, .top07 .content01{
	position:relative;
	margin-right:0px;
	width: 100%;
}
.top05 .content01 .left, .top07 .content01 .left {
	position:relative;
	float:left;
	width:100%;
	overflow:hidden;
}
.top05 .content01 .left img , .top07 .content01 .left img {
	width:110%;
    margin-left:-5%;
    margin-top:0%;
}
.top05 .content01 .right , .top07 .content01 .right{
	position:relative;
	float:right;
	margin:5%;
	width:90%;
	overflow:hidden;
	    margin-top: 0%;
}
.top05 .content01 .right img , top07 .content01 .right img{
	width: 115%;
    margin-left: -7.5%;
}
.top05 .content02 , .top07 .content02{
	position:relative;
	margin:30px 5% 0 5%;
	width: calc( 100% - 10% );
	background:#fff;
}
.top05 .content02 .left, .top07 .content02 .left {
	position:relative;
	float:left;
	width:100%;
}
.top05 .content02 .right, .top07 .content02 .right  {
	position:relative;
	float:right;
	width:90%;
	margin-right:5%;
	margin-left:5%;
}
.top05 .content02 .right .title , .top07 .content02 .right .title {
	position:relative;
	margin-top:30px;
	margin-bottom:15px;
	border-bottom:1px solid #b1b1b1;
	font-size:5.2vw;
	margin-right: 0%;
}

.top05 .content02 .right .title span , .top07 .content02 .right .title span {
	font-size:4vw;
}
.top05 .content02 .right .title .name {
	position:relative;
	float:left;
	width:100%;
}
.top07 .content02 .right .title .name {
	position:relative;
	float:left;
	width:100%;
	text-align:center;
}
.top05 .content02 .right .title .price {
	position:relative;
	float:right;
	margin-top:0px;
	margin-bottom:10px;
	width:100%;
	font-size:4.5vw;
	text-align:left;
	color:#666;
}
.top07 .content02 .right .title .price {
	position:relative;
	float:right;
	margin-top:0px;
	margin-bottom:10px;
	width:100%;
	font-size:4.2vw;
	text-align:center;
	color:#666;
}
 .top07 .content02 .right .desc {
	position:relative;
	font-size:16px;
	margin-right: 0%;
	margin-bottom:10px;
}
.top05 .content02 .right .desc {
	position:relative;
	font-size:16px;
	margin-right: 0%;
	margin-bottom:25px;
}
.top05 .content02 .right .desc ul, .top07 .content02 .right .desc ul  {
	margin:0;
	padding-left:5.5vw;
	font-size:5vw;
}
.top05 .content02 .right .desc p , .top07 .content02 .right .desc p {
	margin:0;
	padding-left:0;
	font-size:4.3vw;
	line-height: 32px;
	padding-bottom:15px;
	text-align: justify;
}
.top05 .content02 .right .desc .buynow , .top07 .content02 .right .desc .buynow {
	position:relative;
	margin-top:40px;
	margin-bottom:30px;
	font-size:5vw;
	text-align:center;
}
.top05 .content02 .right .desc .buynow ul, .top07 .content02 .right .desc .buynow ul  {
	list-style:none;
	margin:0;
	padding:0;
}
.top05 .content02 .right .desc .buynow ul li , .top07 .content02 .right .desc .buynow ul li{
	float:left;
	margin-right:1%;
	width:32.6%;
	max-width:1000px;
}
.top05 .content02 .right .desc .buynow ul li a , .top07 .content02 .right .desc .buynow ul li a {
	display:block;
	float:left;
	padding:1px 0;
	margin-right:0%;
	width:100%;
	max-width:1000px;
	background:#e6a61a;
}
.top06 {
	position:relative;
	padding:10px 35px 30px 35px;
	width: calc( 100% - 70px );
	background:#000;
	font-size:3.5vw;
	color:#fff;
	text-align:center;
}
.top06 .left {
	position:relative;
	float:left;
	width:100%;
}
.top06 .right {
	position:relative;
	float:none;
	margin:0 auto;
	width:60%;
	text-align:center;
}
#float_btn {
	display:none;
}
#float_btn_mobile {
	position:fixed;
	display:block;
	bottom:0;
	right:0;
}
.flex-direction-nav a  { text-decoration:none; display: block; width: 40px; height: 150px !important; margin: -20px 0 0; position: absolute; top: 40% !important; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-prev { opacity: 0.8; left: 10px; background:url(../images/btn_prev.png) center center no-repeat; background-size:100%; }
.flex-next { opacity: 0.8; right: 10px; background:url(../images/btn_next.png) center center no-repeat; background-size:100%; }
.flexslider:hover .flex-prev { opacity: 0.8; left: 5px; background:url(../images/btn_prev.png) center center no-repeat; background-size:100%; }
.flexslider:hover .flex-next { opacity: 0.8; right: 5px; background:url(../images/btn_next.png) center center no-repeat; background-size:100%; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
.flex-direction-nav a:before  { font-family: ""; font-size: 0px; display: inline-block; content: '' !important; }
.flex-direction-nav a.flex-next:before  { content: ''!important; }
.backtotop {
	display:none;
}
}

@media screen and (min-width: 641px) {
	#menu {
		display: none;
	}

}
@media screen and (max-width: 620px) {
   
.top08 .bg { 
padding: 0 30px;
}
}
@media screen and (max-width: 500px) {
.top07 .content02 .right .desc p {

	line-height: 26px !important ;
}

}
@media screen and (max-width: 420px) {
.top07 .content02 .right .desc p {

	line-height: 22px !important ;
}

}