@font-face {
  font-family: 'Century Gothic';
  src: url('../fonts/GOTHIC.eot'); /* IE9 Compat Modes */
  src: url('../fonts/GOTHIC.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/GOTHIC.woff') format('woff'),
       url('../fonts/GOTHIC.ttf')  format('truetype'), 
       url('../fonts/GOTHIC.svg#svgFontName') format('svg');
}
@font-face {
  font-family: 'MyriadSetPro';
  src: url('../fonts/MyriadSetPro.eot'); /* IE9 Compat Modes */
  src: url('../fonts/MyriadSetPro.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/MyriadSetPro.woff') format('woff'), 
       url('../fonts/MyriadSetPro.ttf')  format('truetype'), 
       url('../fonts/MyriadSetPro.svg#svgFontName') format('svg'); 
}
.contentMD5 {
    background-image: url("../images/contentMD5.jpg");
    background-size: cover;
    background-position: center bottom;
    left: 0;
    top: 60px;
    width: 100%;
    height: 100%;
    position: fixed;
    overflow-y: scroll;
    z-index: 1;
}

.content {
    padding: 0 24px;
    background: #fff;
    width: 942px;
    margin: 0 auto 8px;
/* position: absolute;top: 60px;left: 50%;margin-left: -495px; */
    min-width: 942px;
    opacity: 0.9;
}

.title {
    width: 990px;
    margin: 0 auto 10px;
    background: #000;
    opacity: 0.6;
}

.title h2 {
    font-size: 20px;
    font-family: "Century Gothic";
    line-height: 42px;
    color: #fff;
    margin-left: 26px;
}

.MD5Scroll {
    padding-bottom: 42px;
    padding-top: 12px;
    position: relative;
}

.MD5Scroll .MD5InfoBtn {
    border: 2px solid #dadada;
    font-size: 15px;
    color: #595757;
    font-family: "Century Gothic";
    line-height: 28px;
    padding: 0 8px;
    margin-left: 4px;
}

.MD5Scroll .MD5InfoBtn:hover {
    border: 2px solid #4a453f;
    font-size: 15px;
    color: #fff;
    font-family: "Century Gothic";
    line-height: 28px;
    padding: 0 8px;
    background: #4a453f;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}


.MD5Scroll h3 {
    width: 100px;
    height: 0;
    text-indent: 9999px;
    overflow: hidden;
}

.chooClr {
    width: 90px;
    height: 38px;
    float: right;
}
.chooClr a{
    height: 26px;
}
.chooClr li {
    float: left;
    width: 28px;
    height: 26px;
    background-image: url("../images/btnBg2.jpg");
}
.chooClr01 li {
    float: right;
    width: 28px;
    height: 26px;
}


.chooClr1,.chooClr2,.chooClr4,.chooClr3 {
    margin-right: 16px;
}

.chooClr2 {
    background-position: 0 -52px;
}
.chooClr21 {
    background:url(../images/12.jpg) no-repeat; 
}
.chooClr21 a{ display:block;}
.chooClr11 a{ display:block;}
.chooClr11 {
    background:url(../images/11.jpg) no-repeat;margin-right:15px;
}

.chooClr3 {
    background-position: 0 -26px;
}

.chooClr4 {
    background-position: 0 -78px;
}
.chooClr5 {
    background-position: 0 -104px;
    margin-left: 40px;
}
/* 
.chooClr li:hover {
    background-image: url("../images/btnBgH.jpg");
}

.chooClr1:hover,.chooClr2:hover,.chooClr3:hover,.chooClr4:hover {
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.chooClr2:hover {
    background-position: 0 -32px;
}

.chooClr3:hover {
    background-position: 0 -16px;
}

.chooClr4:hover {
    background-position: 0 -48px;
}
 */
.selWarp {
    width: 942px;
    border-bottom: 2px solid #ebebeb;
    height: 125px;
    margin-bottom: 74px;
}

.chooSel {
    margin: 0 82px 0 260px;
}

.chooSel li {
    float: left;
    margin: 0 15px;
    cursor: pointer;
    height: 125px;
}

.chooSel p {
    width: 100px;
    margin: 0 auto;
    height: 117px;
    cursor: pointer;
    position: relative;
    top: -109px;
}

.chooSel .chopH {
    border-bottom: 2px solid #999;
}

.video {
    width: 564px;
    height: 318px;
    margin: 0 auto 174px;
}

.display,.battery,.performance,.derailleur {
    width: 880px;
    margin: 0 auto;
}

.display {
    margin-bottom: 320px;
    position: relative;
}

.display a {
    position: absolute;
    bottom: 0;
    left: 0;
}

.battery {
    margin-bottom: 248px;
}

.performance {
    margin-bottom: 212px;
}

.derailleur {
    margin-bottom: 60px;
}

.MD5Info {
    margin-bottom: 50px;
}
.footerTx {
    margin: 0 0 24px 28px;
}

.footer {
    margin-bottom: 60px;
}
.choord{    
    width: 942px;
    height: 38px;
    margin-top: -12px;
}
.chooClr {
    width: 90px;
    height: 38px;
}
.chooClr  li a{
    display: block;
}
.view{
    color: #c1c1c1;
    font-size: 14px;
    font-family: "Century Gothic";
}
.view:hover{
    text-decoration: underline;
}