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

@font-face {
 font-family:"titillium";
 font-weight:100;
 src:url('//web.softnyx.com/Font/titillium-regular-webfont.eot');
 src:url('//web.softnyx.com/Font/titillium-regular-webfont.eot?#iefix') format('embedded-opentype'), url('//web.softnyx.com/Font/titillium-regular-webfont.woff') format('woff'), url('//web.softnyx.com/Font/titillium-regular-webfont.ttf') format('truetype');
 url('//web.softnyx.com/Font/titillium-regular-webfont.svg#titillium') format('svg') src:local(※), url('//web.softnyx.com/Font/titillium-regular-webfont.woff') format('woff');
}

body, table, input, button, textarea, select, li, a, ul, p, div, h1, h2, h3, h4, h5, span {
 font-family:titillium, tahoma, Geneva, sans-serif
}

html {
 font-size:62.5%
}

body {
 font-size:18px;
 font-size:1.8rem
} /* 14px */

h1 {
 font-size:24px;
 font-size:2.4rem
} /* 24px */

body, div, ul, li, dl, dt, dd, ol, p, h1, h2, h3, h4, h5, h6, form {
 margin:0;
 padding:0
}

body {
 background-color:#000
}

ul, ol, dl, li {
 list-style:none
}

img {
 vertical-align:top
}

em {
 font-style:normal
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 display:block
}

img {
 max-width:100%;
 height:auto;
 border:0
}

html, body {
 min-height:100%;
 height:100%
}

a {
 cursor:pointer;
 text-decoration:none
}

a:link {
 color: #CCC;
}

a:hover {
 color: #F90;
}

a:active {
 color: #CCC;
}

a, img {
 border: none;
 border:0;
 outline:none
}

strong {
 font-weight: bold
}

.today {
 margin:10px auto;
 max-width:994px;
 min-height:30px;
}

.gotohomepage {
 font-size:14px;
 font-size:1.4rem;
 float:left;
}

.gotohomepage a {
 width:200px;
 height:26px;
 padding-top:6px;
 text-align:center;
 display:block;
 background:#333;
 color:#CCC;
 border-radius:5px;
}

.gotohomepage a:hover {
 background:#666
}

.nomoretoday {
 color:#999;
 padding-top:6px;
 font-size:14px;
 font-size:1.4rem;
 float:right;
 text-align:right;
 width:40%
}

.nomoretoday input {
 vertical-align:-1px
}

body {
 margin: 0;
 padding: 0; /*  Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections  */
 background: #333;
 background-attachment: fixed;
 background-size: cover;
}

#video-background { /*  making the video fullscreen  */
 position: fixed;
 right: 0;
 bottom: 0;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 z-index: -100;
}

.main_bg {
 background:rgba(0, 0, 0, 0.8) url(http://img.softnyx.com/3/sn2016/event/19copa/Index.png) bottom center repeat-x;
 width:100%;
 max-width:1300px;
 min-width:996px;
 margin:20px auto;
 height:840px;
 border:1px solid #C00;
 border-radius:50px
}

#main {
 padding:50px
}

#main h2 {
 color:#F60;
 font-size:36px;
 font-size:3.6rem;
 margin-bottom:20px
}

#main p {
 margin-bottom:20px
}

#left_menu, #right_area {
 display:inline-block;
 zoom:1;
*display:inline;
 width:49%;
 color:#CCC;
 text-align:center;
 vertical-align:top
}

.text-orange, .text-orange:link {
 color:#F60
}

#left_menu li {
 background:url(http://img.softnyx.com/3/sn2016/event/19copa/left_menu.png) no-repeat center -98px;
 font-size:18px;
 font-size:1.8rem;
 font-weight:bold;
 color:#CCC;
 text-transform:uppercase;
 height:55px;
 line-height:55px
}
#left_menu li>a{display:inline-block;zoom:1;*display:inline; margin:0 auto;width:500px;height:55px;}

#left_menu li:hover, #left_menu li.on {
 background:url(http://img.softnyx.com/3/sn2016/event/19copa/left_menu_over.png) no-repeat center -98px;
 color:#FF0
}

#left_menu li.logo, #left_menu li.logo:hover {
 background:url(http://img.softnyx.com/3/sn2016/event/19copa/logo.png) no-repeat 0 0;
 width:574px;
 height:440px; 
 -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#left_menu li.logo_s, #left_menu li.logo_s:hover {
 background:url(http://img.softnyx.com/3/sn2016/event/19copa/logo_2.png) no-repeat 0 0 !important;
 width:574px;
 height:280px;
 -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;}

#left_menu li.logo a {
 display:inline-block;
 zoom:1;
*display:inline;
 width:574px;
 height:440px
}

#right_area>div {
 height:825px;
 overflow:auto;
}

#right_area>div div {
 padding-bottom:50px
}

#layer2 p, #layer3 p, #layer4 p, #layer5 p {
 text-align:left
}

#layer1 { padding-top:100px}
#layer1 p{
 font-size:22px;
 font-size:2.2rem
}

#layer5 p{
 text-align:left;
 font-size:22px;
 font-size:2.2rem
}

.gamelist li {
 display:inline-block;
 zoom:1;
*display:inline;
 width:22%;
 opacity:.6;
 filter:alpha(opacity=60)
}

.gamelist li:hover, .gamelist li.on {
 opacity:1;
 filter:alpha(opacity=100)
}

@media screen and (max-width:1024px) { 
#left_menu li.logo, #left_menu li.logo:hover { 
margin-left:-70px}
#main { 
margin-left:-30px}
}