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

body {
    background-color: #0E0E0E;
    font-family: Calibri, Helvetica, Lucida Sans Unicode, Arial, sans-serif;
    font-size:14px;
    font-weight: 400;
    line-height:18px;
    color:#ffffff;
}
a:link {
    color: #00a0e9;
    text-decoration: underline;
}
a:visited {
    color: #00a0e9;
    text-decoration: none;
}
a:hover {
    color: #ff9c00;
    text-decoration: underline;
}
a:active {
    text-decoration: none;
    color: #00a0e9;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
#footer a{
    color: #35bfe4;
}
sub{ font-size: 11px; color: #898989; padding-left: 3px}
#wrapper {
    width:946px;
    margin:0 auto;
}
#header{
    height:621px;
    background:#000 url(../img/edm_banner01.jpg) no-repeat 0 0;
    position:relative;
}
#header a{
    display: inline-block;
}
div p{ line-height: 1.5em}
div b{ color: #000000; font-size: 16px; padding-bottom: 5px; display: inline-block;}

.logo{
    width: 135px;
    height: 50px;
    top: 20px;
    left: 20px;
    position: absolute;
    z-index: 98;
}
.txtstyle{
    position: absolute;
    line-height: 1.3em;
    font-size: 18px;
    color: #ffffff;
}
.txtstyle p{
    font-size: 14px
}
.note{
    position: absolute;
    line-height: 1.3em;
    font-size: 14px;
    color: #ffffff;
}
/*---sub01--- */
#sub01{
    margin:0 auto;
    position:relative;
    background:#000 url(../img/pic01.jpg) no-repeat 0 0;
    width:946px;
    height:619px;
    }

.sub01_txt1{
        left: 137px;
    width: 672px;
    top: 165px;
    }

/*---sub02--- */
#sub02{
    margin:0 auto;
    position:relative;
    background:#000 url(../img/pic02.jpg) no-repeat 0 0;
    width:946px;
    height:505px;
    }

.sub02_txt1{
        left: 137px;
    width: 672px;
    top: 105px;
    }
.sub02_txt2{
        left: 226px;
    width: 140px;
    top: 415px;
    }
.sub02_txt3{
        left: 494px;
    top: 415px;
    text-align: center;
    width: 302px;
    }

/*---sub03--- */
#sub03{
    margin:0 auto;
    position:relative;
    background:#000 url(../img/pic03.jpg) no-repeat 0 0;
    width:946px;
    height:810px;
    }

.sub03_txt1{
        left: 137px;
    width: 672px;
    top: 35px;
    }
#sub03 .hero {
    position: relative;
  z-index: 1;
  text-align: center;
  padding-top: 200px;
  margin: 0;
}
#sub03 .hero .screen {
    float: left;
    position: absolute;
    z-index: 2;
    width: 559px;
    height: 316px;
    left: 194px;
    margin-top: 11px;
}
#sub03 .hero .screen img {
    position: absolute;
    top: 0;
    left: 0;
    height: auto
}
#sub03 .hero .monitor {
    position: relative;
    z-index: 1;
    height: auto
}
#sub03 .row2 {
    position: relative;
  z-index: 2;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  left: 135px;
  margin-top: -18%;
}
#sub03 .row2:before, #sub03 .row2:after {
    content: "";
    display: table
}
#sub03 .row2:after {
    clear: both
}
#sub03 .row2 {
    zoom: 1
}
#sub03 .row2 .descr {
    margin-left: 334px
}
#sub03 .row2 .toggle {
    float: left;
    cursor: pointer;
    -webkit-transition: opacity 0.1s ease;
    -moz-transition: opacity 0.1s ease;
    -o-transition: opacity 0.1s ease;
    transition: opacity 0.1s ease
}
#sub03 .row2 .toggle img {
    display: block
}
#sub03 .row2 .toggle:hover {
    opacity: .7
}
#sub03 .row2 .toggle.on {
    -webkit-box-shadow: 0 0 20px red;
    -moz-box-shadow: 0 0 20px red;
    box-shadow: 0 0 20px red
}
#sub03 .row2 .n1 {
    margin-right: 12px
}
#sub03 .row2 .n2 {
    margin-right: 12px
}
#sub03 .row3{
    margin: 9em 0 3em
}
/*---sub04--- */
#sub04{
    margin:0 auto;
    position:relative;
    background:#000 url(../img/pic04.jpg) no-repeat 0 0;
    width:946px;
    height:550px;
    }
.sub04_txt1{
        left: 137px;
    width: 672px;
    top: 65px;
    }
/* gamevisual-g */
.gamevisual-box{
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 33% !important;
    top: 184px;
}
#sub04 .gamevisual-g{
    position: absolute;
    top: 0;
    opacity: 0;
    -webkit-transition: all 0.4s;
  -moz-transition   : all 0.4s;
  -ms-transition    : all 0.4s;
  -o-transition     : all 0.4s;
  transition        : all 0.4s;
  left        : 140px;
}
#sub04 .gamevisual-g .n1 .pic{
    margin-top: -30px 
}
#sub04 .gamevisual-g.on{
    opacity: 1;
    -webkit-transition: all 0.4s;
  -moz-transition   : all 0.4s;
  -ms-transition    : all 0.4s;
  -o-transition     : all 0.4s;
  transition        : all 0.4s;
}
ul.gamevisual-btns{
    display: inline-block;
    width: 100%;
}
.gamevisual-btns li{
    display: block;
    width: 16.666%;
    float: left;
}
#sub04 .row1 .n2{
  width: 38%;
  margin: 0 2.5%;
  top: 0;
  position: absolute;
  left: 465px; 
}
#sub04 .row1 .n2 p.note{
    font-size: 14px;
    line-height: 18px !important;
}
ul.gamevisual-btns{
    display: inline-block;
    margin-top: 90px;
    margin-left: 160px;
}
.gamevisual-btns li{
    display: block;
    width: 11%;
    float: left;
}
.gamevisual-btns li a{
    background: url(../img/gamevisual-btn.png) no-repeat 50% 50%;
    text-align: center;
    display: block;
    position: relative;
    padding: 3.5em 0;
    color: #000;
    text-decoration: none;
}
.gamevisual-btns li a:hover, .gamevisual-btns li a.active{
    background: url(../img/gamevisual-btn_h.png) no-repeat 50% 50% ;
    color: #eef60a;  
}
#sub04 .title-x {
    display: block;
    border: none;
    margin-bottom: 10PX;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1;
    font-size: 31px;
    color: #eef60a;
    text-align: left;
    background: none !important;
    font-weight: normal !important;
    font-family: Calibri, Helvetica, Lucida Sans Unicode, Arial, sans-serif;
}
#sub04 .descr{
    font-size: 16px;
}
/*---sub05--- */
#sub05{
    margin:0 auto;
    position:relative;
    background:#000 url(../img/pic05.jpg) no-repeat 0 0;
    width:946px;
    height:310px;
    }

.sub05_txt1{
        left: 137px;
    width: 315px;
    top: 80px;
    }
#sub05 .n2{
    position: absolute;
    left: 464px;
    top: 83px;
    width: 400px;
}
#sub05 .n2 img{
    float: left;
    width: 227px;
}
#sub05 .n2 ul.ergonomic-btns{
    display: inline-block;
    float: left;
    width: 19%;
    white-space: nowrap;
}
#sub05 .n2 ul li a{
    border: #fff100 1px solid;
    color: #eadd08;
    padding: 7px 30px 6px;
    display: inline-block;
    margin: 3% 0 3% 25%;
    white-space: nowrap;
    text-decoration: none;;
}
#sub05 .n2 ul li a:hover,
#sub05 .n2 ul li a.active{
    background: rgba(255,241,0,0.2);
}
#sub05 .n2 .ergonomic-pics {
    display: none;
}
#sub05 .n2 .ergonomic-pics.on {
    display: block;
}
#sub05 .descr{
    font-size: 16px;
}
/*---sub06--- */
#sub06{
    margin:0 auto;
    position:relative;
    background:#000 url(../img/pic06.jpg) no-repeat 0 0;
    width:946px;
    height:590px;
    }

.sub06_txt1{
        left: 137px;
    width: 672px;
    top: 60px;
    }
.sub06_txt2{
        left: 137px;
    width: 672px;
    top: 495px;
    text-align: center;
    }
/*---sub07--- */
#sub07{
    width:946px;
    margin:0 auto;
    position:relative;
    height:340px;
    background: #000 url(../img/pic07.jpg) no-repeat 0 0;
    }

.sub07_txt1{
    position: absolute;
    top:91px;
    left:0;
    width:100%;
    }
#sub07 ul.pd_link_a{
    position: absolute;
    width: 200px;
    display: inline-block;
    margin:0;
    left:140px;
    top:70px;
}
#sub07 ul.pd_link_a li{
    padding-bottom: 0;
    float: left;
    width: 100%;
    text-align: left;
}
#sub07 ul.pd_link_a li div{
    display: inline-block;
    width: 100%;
    text-align: center;
}
#sub07 ul.pd_link_a li a{
    width: 100%;
    font-size: 13px;
}

#sub07 ul.pd_link_b{
    position: absolute;
    width: 200px;
    display: inline-block;
    margin:0;
    left:360px;
    top:70px;
}
#sub07 ul.pd_link_b li{
    padding-bottom: 0;
    float: left;
    width: 100%;
    text-align: left;
}
#sub07 ul.pd_link_b li div{
    display: inline-block;
    width: 100%;
    text-align: center;
}
#sub07 ul.pd_link_b li a{
    width: 100%;
    font-size: 13px;
}
/*---sub08--- */
#sub08{
    margin:0 auto;
    position:relative;
    background:#000 url(../img/pic08.jpg) no-repeat 0 0;
    width:946px;
    height:735px;
    }
.learn_more_a{
    position: absolute;
    top: 487px;
    left: 363px;
}
.learn_more_b{
    position: absolute;
    top: 487px;
    left: 728px;
}
.spec_box_a{
    width: 320px;
  position: absolute;
  top: 535px;
  left: 135px;
}
.spec_box_b{
    width: 320px;
  position: absolute;
  top: 535px;
  left: 490px;
}
.spec_table tr td{
    border-bottom: 1px #333333 solid;
    text-align: left;
    font-size: 12px;
    color: #b2b2b2;
    padding: 0;
    font-family: Calibri;
}
.spec_table tr td.sub-t{
    text-align: left;
    font-weight: bold;
    color: #b2b2b2;
    width: 107px;
}
.spec_table tr td a{
    color: #ffc000;
}
/*---footer--- */
#footer {
    clear:both;
    _height:1%;
    margin:0 auto;
    width:946px;
    height:60px;
    text-align:center;
    padding-top:55px;
    padding-bottom:50px;
    background:#000 url(../img/footer-title.jpg) no-repeat 0 0;
}

#footer p{
    color: #848484;
    font-size: 12px;
    font-family: Arial
}