/** RESET AND LAYOUT
===================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
li {list-style-type: none;}
a {text-decoration: none;}
textarea {
   resize: none; overflow: hidden;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   border: 0;
   background: transparent;
   font-family: 'ProximaNovaRegular',Arial, Calibri, Geneva, sans-serif;
}

*:focus {outline: none;}
input[type="color"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="text"], input[type="submit"], input[type="search"], button[type="submit"],
textarea {
   margin: 0;
   padding: 0;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   font-family: 'ProximaNovaRegular',Arial, Calibri, Geneva, sans-serif;
   -webkit-appearance: none;
   border-radius: 0;
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
}
.input-wrap {
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}
button[type="submit"],
input[type="submit"] {
   border: 0;
   cursor: pointer;
   border-radius: 0;
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   -webkit-appearance: none;
}
input::-moz-focus-inner, 
button::-moz-focus-inner { 
   border:0;   
   padding:0;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
/** Default Text
===================================*/
/**Font Face**/
@font-face {
   font-family: 'ProximaNovaRegular';
   src: url('fonts/ProximaNova-Regular.eot');
   src: url('fonts/ProximaNova-Regular.woff2') format('woff2'),
         url('fonts/ProximaNova-Regular.woff') format('woff'),
         url('fonts/ProximaNova-Regular.ttf') format('truetype'),
         url('fonts/ProximaNova-Regular.svg#ProximaNova-Regular') format('svg'),
         url('fonts/ProximaNova-Regular.eot?#iefix') format('embedded-opentype');
   font-weight: normal;
   font-style: normal;
}

@font-face {
  font-family: 'ProximaNovaSemibold';
  src: url('fonts/ProximaNova-Semibold.eot');
  src: url('fonts/ProximaNova-Semibold.woff2') format('woff2'),
       url('fonts/ProximaNova-Semibold.woff') format('woff'),
       url('fonts/ProximaNova-Semibold.ttf') format('truetype'),
       url('fonts/ProximaNova-Semibold.svg#ProximaNova-Semibold') format('svg'),
       url('fonts/ProximaNova-Semibold.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ProximaNovaBold';
  src: url('fonts/ProximaNova-Bold.eot');
  src: url('fonts/ProximaNova-Bold.woff2') format('woff2'),
       url('fonts/ProximaNova-Bold.woff') format('woff'),
       url('fonts/ProximaNova-Bold.ttf') format('truetype'),
       url('fonts/ProximaNova-Bold.svg#ProximaNova-Semibold') format('svg'),
       url('fonts/ProximaNova-Bold.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ProximaNova-LightIt';
  src: url('fonts/ProximaNova-LightIt.eot');
  src: url('fonts/ProximaNova-LightIt.woff2') format('woff2'),
       url('fonts/ProximaNova-LightIt.woff') format('woff'),
       url('fonts/ProximaNova-LightIt.ttf') format('truetype'),
       url('fonts/ProximaNova-LightIt.svg#ProximaNova-LightIt') format('svg'),
       url('fonts/ProximaNova-LightIt.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}


html {
   margin: 0;
   padding: 0;
   font-size: 62.5%;
   width: 100%;
   height: 100%;
}
body {
   margin: 0;
   padding: 0 0 0 0;
   font-family: 'ProximaNovaRegular', Arial, Calibri, Geneva, sans-serif;
   color: #333;
   line-height: 1.45em;
   width: 100%;
   height: 100%;
   overflow-x: hidden;
   -webkit-text-size-adjust: 100%;
}
a, a:visited {
   color: #333;
   text-decoration: none;
   -webkit-transition: color 0.3s ease-out;
   -o-transition: color 0.3s ease-out;
   -moz-transition: color 0.3s ease-out;
   -ms-transition: color 0.3s ease-out;
   transition: color 0.3s ease-out;
}
a:hover {
   color: #f7921e;
   cursor: pointer;
}

b em, 
b i, 
strong em, 
strong i, 
em b, 
i b, 
em strong, 
i strong {
   font-family: Geneva, sans-serif;
}
ul,
li {
   margin: 0;
   padding: 0;
}
input[type="radio"] {
   margin: 0;
}
h1,h2,h3,h4,h5,h6 {
   font-family: 'ProximaNovaSemibold',Arial, Geneva, sans-serif;
   font-weight: normal;
   line-height: 1em;
}
.page-header-title, p {
   line-height: 1.35em;
}
img {
   max-width: 100%;
   vertical-align: bottom;
   height: auto !important;
   border: 0;
}
/* all */
::-webkit-input-placeholder { color:#919191; font-family: 'ProximaNovaRegular', Arial, Calibri, Geneva, sans-serif;}
::-moz-placeholder { color:#919191; font-family: 'ProximaNovaRegular', Arial, Calibri, Geneva, sans-serif;} /* firefox 19+ */
:-ms-input-placeholder { color:#919191; font-family: 'ProximaNovaRegular', Arial, Calibri, Geneva, sans-serif;} /* ie */
input:-moz-placeholder { color:#919191; font-family: 'ProximaNovaRegular', Arial, Calibri, Geneva, sans-serif;}
.btn-default {
   background: #1b1b1b;
   color: #fff;
   padding: 6px;
   text-align: center;
   margin: 0;
   border: 0;
   text-transform: uppercase;
   text-align: center;
   font-size: 14px;
   font-size: 1.4rem;
   letter-spacing: 1px;
   cursor: pointer;
}
/* clearfix */
.clr:before,  
.clr:after {  
    content: " ";  
    display: table;  
}  
.clr:after {  
    clear: both;  
}  
/* For IE 6/7 only */  
.clr {  
    *zoom: 1;  
}

p {
   margin-bottom: 1em;
}
/** CSS3 Animation
===================================*/
@keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
}

@keyframes fadebutton {
    0% {
      background: #99cc00;
    }
    50% {
      background: #f7921e;
    }
    100% {
      background: #99cc00;
    }
}
@-moz-keyframes fadebutton {
    0% {
      background: #99cc00;
    }
    50% {
      background: #f7921e;
    }
    100% {
      background: #99cc00;
    }
}
@-webkit-keyframes fadebutton {
    0% {
      background: #99cc00;
    }
    50% {
      background: #f7921e;
    }
    100% {
      background: #99cc00;
    }
}
@-o-keyframes fadebutton {
    0% {
      background: #99cc00;
    }
    50% {
      background: #f7921e;
    }
    100% {
      background: #99cc00;
    }
}
/**=====ICON-STYLE=====**/
.icon-contact {
   width: 32px;
    height: 32px;
    display: block;
    background: url(../images/list-icon-contact.png) no-repeat;
}
.icon-yahoo {
   background-position: -32px 0px;
}
.icon-skype {
   background-position: 0px 0px;
}
/**=====MAIN-STYLE=====**/
#wrapper {
   /*max-width: 1920px;*/
   margin: 0 auto;
   background-size: cover;
}
.wrap {
   width: 1160px;
   margin: 0px auto;
   position: relative;
}
/**==HEADER-STYLE==**/

/**==CONTAINER-STYLE==**/
.wrap-banner{
	background: url(../images/top-banner.jpg) no-repeat center center;
	background-size:cover;
	width:100%;
	height:18.42vw;
	min-height:150px;
}
.container {
   padding-bottom: 40px;
   padding-top: 12px;
}
.container .left-content {
   float: left;
   width: 50%;
   text-align: center;
}
.container .right-content {
   overflow: hidden;
   padding-left: 20px;
   text-align: center;
}
.container .ranking li {
   position: relative;
   margin-top: 20px;
}
.container .ranking .rank-item {
   position: relative;
   padding: 7px 40px;
   background: url('../images/bg-3.png') 0 0 no-repeat;
   background-size:cover;
}
.rank-item .places-number {
   position: absolute;
   top: -5px;
   left: 40px;
}
.rank-item .hero-info {
   float: left;
   margin-left: 60px;
   position: relative;
}
.rank-item .hero-info .hero-img {
   position: absolute;
   top: 50%;
   left: 0;
   margin-top: -28px;
   width:56px;
}
.rank-item .hero-info p {
   font-size: 16px;
   font-size: 1.6rem;
   margin: 0px;
   color: #ffffff;
   margin-left: 85px;
   padding-top: 4px;
}
.rank-item .achievement {
   float: right;
   font-size: 0px;
   word-spacing: 0px;
   letter-spacing: 0px;
}
.rank-item .achievement p {
   display: inline-block;
   font-size: 16px;
   font-size: 1.6rem;
   vertical-align: middle;
   margin: 0px;
}
.rank-item .achievement p.date-time {
   font-size: 14px;
   font-size: 1.4rem;
   color: #b2b2b2;
   margin-right: 30px;
   font-family: 'ProximaNova-LightIt';
}
.rank-item .achievement img {
   margin-right: 8px;
}
.rank-item .achievement p.total-price {
   color: #ffde00;
   font-family: 'ProximaNovaSemibold';
}
.right-content {

}
.right-content .evt-content {
   padding: 25px;
   background-color: rgba(3,30,40,0.8);
   border: 1px solid #398da8;
   margin-top: -7px;
}
.right-content .evt-content h1 {
   font-size: 23px;
   margin-bottom: 10px;
   text-align: center;
   color: #ffde00;
}
.right-content .evt-content h3 {
   color: #ff997a;
   font-size: 16px;
   font-size: 1.6rem;
   text-align: left;
   font-family: 'ProximaNovaRegular';
   margin-bottom: 10px;
}
.right-content .evt-content h4 {
   color: #ffffff;
   font-size: 16px;
   font-size: 1.6rem;
   text-align: left;
   font-family: 'ProximaNovaRegular';
   margin-bottom: 10px;
   line-height: 1.15em;
}
.right-content .evt-content  a {
   color: #ff997a;
   text-decoration: underline;
}
.right-content .evt-content span {
   margin-right: 8px;
}
.right-content .evt-content p {
   color: #ffffff;
   font-size: 16px;
   font-size: 1.6rem;
   text-align: left;
}
.right-content .evt-content p:last-child {
   margin-bottom: 0px;
}
.right-content .evt-content ul {
   list-style-type: decimal;
   color: #ffffff;
   font-size: 16px;
   padding-left: 20px;
}
.right-content .evt-content li {
   margin-bottom: 10px;
   list-style-type: initial;
}
.right-content .evt-content i.blue {
   color: #89c9fb;
   font-style: normal;
}
/**==FOOTER-STYLE==**/
#footer {
   background-color: rgba(2, 15, 21, 0.8);
   padding-top: 25px;
   border-top: 1px solid #4aa3c1;
}
#footer .col-4 {
   float: left;
   width: 40%;
}
#footer .col-4 ul > li {
   float: left;
   width: 50%;
   margin-bottom: 10px;
   /*list-style: inside url(../images/list-style.png);*/
}
#footer .col-4 ul > li a:before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0px;
   margin-top: -4px;
   background: url(../images/list-style.png) 0 0 no-repeat;
   width: 6px;
   height: 6px;
}

#footer .col-2 {
   float: left;
   width: 20%;
}
#footer .list-item {
   margin-top: 18px;
}
#footer .list-game li > a {
   font-size: 14px;
   font-size: 1.4rem;
   color: #adadad;
   position: relative;
   padding-left: 20px;
   display: block;
   line-height: 1.1em;
}
#footer .list-game li > a:hover {
   color: #f7921e;
}
#footer .title {
   font-size: 16px;
   font-size: 1.6rem;
   color: #ffffff;
   text-transform: uppercase;
}
#footer .addr-contact ul > li {
   float: left;
}
#footer .addr-contact ul > li:first-child {
   margin-right: 10px;
}
#footer .fb-like-area {
   margin-top: 10px;
}
#footer .copy-right {
   background-color: #000000;
   margin-top: 10px;
   padding: 8px;
   border-top: 1px solid #4aa3c1;
}
#footer .copy-right p {
   font-size: 12px;
   font-size: 1.2rem;
   text-align: center;
   color: #797979;
   margin: 0px;
}
/**==RESPONSIVE-STYLE==**/
@media all and (max-width: 1024px) {
   .wrap {
      width: auto;
      margin: 0px 15px;
   }
   .container .left-content {
      width: 100%;
     /* overflow: auto;*/
      padding-left: 0px;
      float: none;
   }
   .container .right-content {
      overflow: auto;
      padding-left: 0px;
      width: 100%;
      margin-top: 15px;
   }
   #footer .copy-right p {
      font-size: 14px;
      font-size: 1.4rem;
   }
   .container .ranking .rank-item {
      background: none;
      background-color: rgba(3,30,40,0.8);
      position: relative;
      border: 1px solid #398da8;
      padding: 7px 40px;
  }
}
@media all and (max-width: 768px) {
   #footer .col-4 {
      width: 100%;
      float: none;
      margin-bottom: 10px;
   }
   #footer .col-2 {
      float: none;
      width: 100%;
   }
   #footer .list-game li > a {
      font-size: 16px;
   }
   #footer .addr-contact {
      display: inline-block;
      vertical-align: top;
   }
   #footer .fb-like-area {
      margin-top: 18px;
      margin-left: 10px;
      display: inline-block;
      vertical-align: top;
   }
}
@media all and (max-width: 568px) {
   .right-content .evt-content {
      padding: 10px;
      padding-top: 20px;
   }
   .container .ranking .rank-item {
      padding-left: 0px;
      padding-right: 15px;
   }
   .rank-item .places-number {
      left: 0;
   }
   .rank-item .hero-info .hero-img {
      display: none;
   }
   .rank-item .hero-info {
      margin-left: 50px;
      float: none;
      width: 100%;
   }
   .rank-item .hero-info p {
      margin-left: 0px;
      text-align: left;
   }
   .rank-item .achievement {
      float: none;
      width: 100%;
      text-align: right;
      margin-top: 5px;
   }
   .right-content .evt-content h1 {
      font-size: 19px;
      font-size: 1.9rem;
   }
   .right-content .evt-content p,.right-content .evt-content h4, .right-content .evt-content h3 {
      font-size: 14px;
      font-size: 1.4rem;
   }
   .rank-item .achievement p.date-time {
      margin-right: 10px;
   }
}