@charset "utf-8";
/* CSS Document */



@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);

body{background-color:#141414; margin:0; font-family:Arial, Helvetica, sans-serif; }

.keyboardPlayer{
	width:960px;
	height:441px;
	margin:0 auto;
	-webkit-transition: height 500ms ease-in-out;
	-moz-transition: height 500ms ease-in-out;
	-ms-transition: height 500ms ease-in-out;
	-o-transition: height 500ms ease-in-out;
	transition: height 500ms ease-in-out;
	}

.motion{
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}

#keyboardTop{
	width: 960px; 
	height: 471px;
	position: relative;
	top:-471px;
	z-index:999;	
	}


@keyframes waveEffect {
	from { background-position: 100% 0; }
	to { background-position: 0 0; }
}
@-webkit-keyframes waveEffect {
	from { background-position: 100% 0; }
	to { background-position: 0 0; }
}
@-ms-keyframes waveEffect {
	from { background-position: 100% 0; }
	to { background-position: 0 0; }
}
@-moz-keyframes waveEffect {
	from { background-position: 100% 0; }
	to { background-position: 0 0; }
}



#SectWave	{ 
	width: 960px; 
	height: 471px; 
	background-image: url(../img/light-01.png);
	background-position:100% 0;
	background-repeat: repeat-x;
	animation: waveEffect 3s linear infinite;
	-ms-animation: waveEffect 3s linear infinite;
	-moz-animation: waveEffect 3s linear infinite;
	-webkit-animation: waveEffect 3s linear infinite;
	position: relative;
	top:-942px;
	z-index:5;
	
	}

#SectAF	{ 
	width: 960px; 
	height: 471px; 
	background-image: url(../img/light-02.gif);
	background-position:100% 0;
	position:relative;
	top:-942px;
	z-index:6;
	display:none;
	}

#SectRipple	{ 
	width: 960px; 
	height: 471px; 
	background-image: url(../img/light-03.gif);
	background-position:100% 0;
	position:relative;
	top:-942px;
	z-index:7;
	display:none;
	}

#TitleWave	{ 
	width: 960px; 
	height: 100px; 
	background-image: url(../img/light-02.png);
	background-position:100% 0;
	background-repeat: repeat-x;
	animation: waveEffect 3s linear infinite;
	-ms-animation: waveEffect 3s linear infinite;
	-moz-animation: waveEffect 3s linear infinite;
	-webkit-animation: waveEffect 3s linear infinite;
	position:relative;
	z-index:1000;
	}
	
#keyboardBG{ background-color:#808080; width:960px; height: 341px;	position: relative;	top:0px;}	

.btnWrap{ margin:0 auto; width:960px; height:60px; padding-left:50px; font-family:Arial, Helvetica, sans-serif; position:relative;padding-bottom:60px; font-size:1rem;}	
.btnSect{ padding:15px 10px; margin:5px; color:#999; border:1px solid #999; cursor:pointer; display:inline-block; border-radius:10px; font-family: 'Oswald', sans-serif;}
.btnSectActive{ padding:15px 10px; margin:5px; color:#F00; border:1px solid #F00; cursor:pointer; display:inline-block; border-radius:10px; font-family: 'Oswald', sans-serif;}


.EffectWrap{ width:100%; padding-bottom:50px; background-color:#141414; padding-top:100px;}
.ProductInfoWrap{ width:100%; /*background-image:url(../img/sect_R.jpg); background-position:bottom right; background-repeat:no-repeat; */ }
#MoreInfo{ 
	width:100%; 
	border-top:1px solid #F00; 
	height:40px;  
	overflow:hidden;
	background-color:#141414;
	}

#MoreInfoBtn{ 
	margin:0 auto;
	width:169px; 
	height:32px; 
	background-image: url(../img/light-02.png);
	background-position:100% 0;
	background-repeat: repeat-x;
	animation: waveEffect 3s linear infinite;
	-ms-animation: waveEffect 3s linear infinite;
	-moz-animation: waveEffect 3s linear infinite;
	-webkit-animation: waveEffect 3s linear infinite;
	cursor:pointer;}
	
.ProductInfo { width:960px; color:#999; margin:0 auto; padding:20px 0 20px 50px; display:block; font-family: 'Oswald', sans-serif; overflow:hidden; display: none; }
.ProductInfo::after{ content:""; clear:both;display: block; height: 0; visibility: hidden; }
.ProductInfo > span{ width:420px; float:left; display:inline-block; padding:20px; font-size:1rem;}
.ProductInfo span >h1{ margin:10px 0; padding:10px 0; font-size:2.5rem; color:#FFF; display:block; letter-spacing:1px;}
.ProductInfo span >p{ margin:0; padding:10px 0; font-size:1rem; }
.ProductInfo span >li {  font-size:1rem; }

.ProductInfo2 { width:960px; color:#999; margin:0 auto; padding:20px 0 20px 50px; display:block; font-family: 'Oswald', sans-serif; overflow:hidden; display:none;}
.ProductInfo2::after{ content:""; clear:both;display: block; height: 0; visibility: hidden; }
.ProductInfo2 > span{ width:420px; float:right; display:inline-block; padding:20px; background-color:rgba(20,20,20,0.9);}
.ProductInfo2 span >h1{ margin:10px 0; padding:10px 0; font-size:2.5rem; color:#FFF; display:block; letter-spacing:1px;}
.ProductInfo2 span >p{ margin:0; padding:10px 0; font-size:1rem; }

.PicMar{ margin-top:30px;}
.PicMar2{ margin-top:150px;}

.EffectTitle { font-weight:bold; color:#FFF; display:inline-block;}

.ColorBar01{ border-bottom:2px solid #F00;}
.ColorBar02{ border-bottom:2px solid #F90;}
.ColorBar03{ border-bottom:2px solid #FF0;}
.ColorBar04{ border-bottom:2px solid #3F0;}
.ColorBar05{ border-bottom:2px solid #09F;}
.ColorBar06{ border-bottom:2px solid #33F;}
.ColorBar07{ border-bottom:2px solid #60F;}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

.covervid-wrapper {	
    width: 960px;
    height: 540px;
	margin:0 auto;

}


#top-menu {
    position: fixed;
    z-index: 1001;    
    right: 1%;
    top: 30%;
    text-align:center;
	list-style:none;
}

#top-menu li {    width:45px;   }

#top-menu a {
    display: block;    
    text-align: center;
    -webkit-transition: .5s all ease-out;
    -moz-transition: .5s all ease-out;
    transition: .5s all ease-out;
    text-decoration: none;
    border-radius:15px;
    width:10px;
    height:10px;
    border:1px solid #fff;  
    margin:10px auto;
	
}

#top-menu a:hover {    color: #000;}
#top-menu li.active a {  background-color:#Fff;  padding:5px;}

.infoSection{ width:100%}


.vid-Content{ top:-540px; position:relative; overflow:hidden; padding-top:120px; font-family: 'Oswald', sans-serif; }
.vid-ContentR > h1{ padding:0 ; margin:0; font-size:1.2rem; color:#FFF; display:block; }
.vid-ContentR > p{ font-size:1rem; color:#999; margin:0; padding:5px 0;}
.vid-ContentR { float:right; width:300px; padding-right:50px; display:none;}
.vid-ContentL { float:left;   width:330px; padding-left:30px; margin-top:-120px; display:none;}
.vid-ContentL > h1{ padding:0 ; margin:0 0 10px 0; font-size:1.5rem; color:#FFF; display:block; }
.vid-ContentL > p{ font-size:1rem; color:#999; margin:0; padding:10px; border:1px solid #f00;}
.vid-ContentL > p > span{ text-align: right; color:#fff; font-size:1rem; display:block; margin-top:5px;}
.vid-ContentL > p > span a{color:#f00;}
.vid-ContentL > h2{ padding:10px 0 ; margin:10px 0; font-size:2rem; color:#F00; display:block; border-bottom:10px solid #f00; }
.vid-ContentL > span { font-size:1rem; color:#999; margin:0;display:block;}

.spanWrapper{ border:5px solid #fff;}
.footer{ height:1000px;}

@media screen and (min-width: 2560px) {
#section2{ background-image:url(../img/sect2-BG.png); background-position:right; background-repeat:no-repeat; background-size:contain;}
#section3{ background-image:url(../img/sect8-BG.jpg); background-position:left bottom; background-repeat:no-repeat; background-size:cover;}
#section4{ background-image:url(../img/sect4-BG.png); background-position:left; background-repeat:no-repeat; background-size:contain;}
#section5{ background-image:url(../img/sect6-BG.png); background-position:right; background-repeat:no-repeat; background-size:contain;}
#section6{ background-image:url(../img/sect9-BG.png); background-position:bottom left; background-repeat:no-repeat; background-size:contain;}
.section{ height:1600px;}
#VidBuffer{ height:400px;}
.ProductInfo{ width:1000px;}
#textMargin{ margin-left:50px;}
#section6 .intro .ProductInfo > span:last-child { width:600px;}
#section6 .intro .ProductInfo { width:1160px;}
}


@media screen and (min-width: 1920px) and (max-width: 2559px)  {
#section2{ background-image:url(../img/sect2-BG.png); background-position:right; background-repeat:no-repeat; }
#section3{ background-image:url(../img/sect8-BG.jpg); background-position:left bottom; background-repeat:no-repeat; background-size:cover;}
#section4{ background-image:url(../img/sect4-BG.png); background-position:left; background-repeat:no-repeat;}
#section5{ background-image:url(../img/sect6-BG.png); background-position:right; background-repeat:no-repeat; }
#section6{ background-image:url(../img/sect9-BG.png); background-position:bottom left; background-repeat:no-repeat; }
.section{ height:1200px;}
#VidBuffer{ height:200px;}
.ProductInfo{ width:1000px;}
#textMargin{ margin-left:50px;} 
#section6 img{ width:420px;} 
}

@media screen and (min-width: 1200px) and (max-width: 1919px) {
  /* 如果使用者之視窗寬度 >= 1200px，將會再載入這裡的 CSS。*/
#section2{ background-image:url(../img/sect2-BG.png); background-position:right; background-repeat:no-repeat; }
#section3{ background-image:url(../img/sect8-BG.jpg); background-position:left bottom; background-repeat:no-repeat; background-size:cover;}
#section4{ background-image:url(../img/sect4-BG.png); background-position:left; background-repeat:no-repeat; }
#section5{ background-image:url(../img/sect6-BG.png); background-position:right; background-repeat:no-repeat; }
#section6{ background-image:url(../img/sect9-BG.png); background-position:bottom left; background-repeat:no-repeat; }
.section{ height:1024px;}
#VidBuffer{ height:100px;}
#section5 img {height:250px;}
#textMargin{ margin-left:20px;}
#section6 img{ width:420px;}    
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
#section2{ background-image:url(../img/sect2-BG-m.png); background-position:right; background-repeat:no-repeat;  background-size:contain; }
#section3{ background-image:url(../img/sect8-BG-m.jpg); background-position:left bottom; background-repeat:no-repeat; background-size:cover;}
#section4{ background-image:url(../img/sect4-BG-m.png); background-position:left; background-repeat:no-repeat;  background-size:contain;}
#section5{ background-image:url(../img/sect6-BG-m.png); background-position:right; background-repeat:no-repeat;   background-size:contain;}
#section6{ background-image:url(../img/sect9-BG-m.png); background-position:bottom left; background-repeat:no-repeat;  }
.section{ height:768px;}
#VidBuffer{ height:50px;}
#section5 img {height:250px;}
#section6 img{ width:420px;}
     
}

@media screen and (max-width: 1024px) {
#section2{ background-image:url(../img/sect2-BG-s.png); background-position:right; background-repeat:no-repeat; background-size:contain;  }
#section3{ background-image:url(../img/sect8-BG-s.jpg); background-position:left bottom; background-repeat:no-repeat; background-size:cover;}
#section4{ background-image:url(../img/sect4-BG-s.png); background-position:left; background-repeat:no-repeat;  background-size:contain; }
#section5{ background-image:url(../img/sect6-BG-s.png); background-position:right; background-repeat:no-repeat;  background-size:contain; }
#section6{ background-image:url(../img/sect9-BG-s.png); background-position:bottom left; background-repeat:no-repeat;   }   
.section{ height:768px;}
#section5 img {height:150px;}
#section6 img{ width:420px;}    
}


#learnMore a{ padding:10px; background-color:#F00; color:#FFF; text-decoration:none;}
	
.KeySizeNormal{ width:42px ; height:42px;  }
.KeySize82{  width:82px ; height:42px;}
.KeySize61{  width:61px ; height:42px; }
.KeySizeH81{  width:42px ; height:81px; }
.KeySize71{  width:71px ; height:42px; }
.KeySize91{  width:91px ; height:42px;  }
.KeySize110{  width:110px ; height:42px; }
.KeySize51{  width:51px ; height:42px;}
.KeySize275{  width:275px ; height:42px; }

.KeySizeNormal,.KeySize82,.KeySize61,.KeySizeH81,.KeySize71,.KeySize91,.KeySize110,.KeySize51,.KeySize275{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 1200ms cubic-bezier(0.000, 1, 0.635, 0.855); /* older webkit */
-webkit-transition: all 1200ms cubic-bezier(0.000, 1.050, 0.635, 0.855); 
   -moz-transition: all 1200ms cubic-bezier(0.000, 1.050, 0.635, 0.855); 
     -o-transition: all 1200ms cubic-bezier(0.000, 1.050, 0.635, 0.855); 
        transition: all 1200ms cubic-bezier(0.000, 1.050, 0.635, 0.855); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.000, 1, 0.635, 0.855); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.000, 1.050, 0.635, 0.855); 
   -moz-transition-timing-function: cubic-bezier(0.000, 1.050, 0.635, 0.855); 
     -o-transition-timing-function: cubic-bezier(0.000, 1.050, 0.635, 0.855); 
        transition-timing-function: cubic-bezier(0.000, 1.050, 0.635, 0.855); /* custom */
}

.colorPickerWrap{ width:40px ; height:40px; position:relative; top:-50px; left:450px; display:none;}
#section1,#section2,#section3,#section4,#section5,#section6{ display:none;}
.ProductMain{ margin-bottom:100px;}


/**
 * Tooltip Styles
 */

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
  position: relative;
  cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: 
      opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition:    
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition:         
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform:    translate3d(0, 0, 0);
  transform:         translate3d(0, 0, 0);
  pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
  z-index: 1200;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
  z-index: 1199;
  padding: 8px;
  width: 160px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  font-size: 1em;
  line-height: 1.2;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
  bottom: 100%;
  left: 50%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: #000;
  border-top-color: hsla(0, 0%, 20%, 0.9);
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
  margin-left: -80px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
  -webkit-transform: translateY(-12px);
  -moz-transform:    translateY(-12px);
  transform:         translateY(-12px); 
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
  right: 100%;
  bottom: 50%;
  left: auto;
}

.tooltip-left:before {
  margin-left: 0;
  margin-right: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-left-color: #000;
  border-left-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
  -webkit-transform: translateX(-12px);
  -moz-transform:    translateX(-12px);
  transform:         translateX(-12px); 
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
  top: 100%;
  bottom: auto;
  left: 50%;
}

.tooltip-bottom:before {
  margin-top: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-bottom-color: #000;
  border-bottom-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
  -webkit-transform: translateY(12px);
  -moz-transform:    translateY(12px);
  transform:         translateY(12px); 
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
  bottom: 50%;
  left: 100%;
}

.tooltip-right:before {
  margin-bottom: 0;
  margin-left: -12px;
  border-top-color: transparent;
  border-right-color: #000;
  border-right-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
  -webkit-transform: translateX(12px);
  -moz-transform:    translateX(12px);
  transform:         translateX(12px); 
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
  top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
  margin-left: 0;
  margin-bottom: -16px;
}

.colorpicker input{ width:auto;}