@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,700,900);
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,700);
/* line 5, ../../../../../Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

/* line 22, ../../../../../Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1; }

/* line 24, ../../../../../Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none; }

/* line 26, ../../../../../Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0; }

/* line 28, ../../../../../Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

/* line 30, ../../../../../Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none; }
  /* line 103, ../../../../../Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

/* line 32, ../../../../../Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none; }

/* line 116, ../../../../../Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

/* line 48, icon/*.png */
.icon-sprite, .icon-shopclose {
  background-image: url('../../images/icon-s1a6dee8928.png');
  background-repeat: no-repeat; }

/* line 84, ../../../../../Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */
.icon-shopclose {
  background-position: 0 0;
  height: 28px;
  width: 28px; }

/* line 37, ../component/sass/style.scss */
* {
  margin: 0;
  padding: 0; }

/* line 43, ../component/sass/style.scss */
.Noto {
  font-family: "notos"; }

/* line 47, ../component/sass/style.scss */
.Notolite {
  font-family: "notolight";
  font-size: 14px; }

/* line 52, ../component/sass/style.scss */
.small {
  font-size: 11px; }

/* line 58, ../component/sass/style.scss */
.imgbtn {
  cursor: pointer; }

/* line 65, ../component/sass/style.scss */
html,
body {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  letter-spacing: .04rem;
  line-height: 20px;
  /* The html and body elements cannot have any padding or margin. */ }

/* line 77, ../component/sass/style.scss */
body {
  font-family: "Helvetica Neue", "Heiti TC", "Microsoft JhengHei", "Arial", sans-serif;
  font-size: 0.8rem; }

/* line 89, ../component/sass/style.scss */
h1 {
  font-size: 1.6rem;
  line-height: 1.8rem; }

/* line 94, ../component/sass/style.scss */
a {
  text-decoration: none; }

/* line 99, ../component/sass/style.scss */
a:hover {
  text-decoration: none; }

/* line 102, ../component/sass/style.scss */
.osmfont {
  font-family: "Oswald", sans-serif; }

/* line 106, ../component/sass/style.scss */
.black {
  color: black; }

/* line 110, ../component/sass/style.scss */
.wrapper {
  position: relative;
  min-height: 100%;
  height: auto;
  font-size: 14px;
  line-height: 1.4rem; }

/* line 124, ../component/sass/style.scss */
.container {
  position: relative;
  min-width: 1024px; }

/* line 130, ../component/sass/style.scss */
.fullbk {
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

/* line 152, ../component/sass/style.scss */
.cenI {
  margin-left: auto;
  margin-right: auto; }

/* line 158, ../component/sass/style.scss */
.grey {
  color: #818181; }

/* line 162, ../component/sass/style.scss */
.animate {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Chrome and Safari */
  -moz-backface-visibility: hidden;
  /* Firefox */
  -ms-backface-visibility: hidden;
  /* Internet Explorer */ }

/* line 174, ../component/sass/style.scss */
.bold {
  font-weight: bold; }

/*
ul { 
   list-style-type: disc; 
   list-style-position: inside; 
}
ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}

ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: outside; 
   margin-left: 15px; 
}
*/
/* line 199, ../component/sass/style.scss */
hr {
  border-top: 1px solid rgba(119, 97, 74, 0.3); }

/* line 203, ../component/sass/style.scss */
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px; }

/* line 213, ../component/sass/style.scss */
.col-xs-15 {
  width: 20%;
  float: left; }

@media (min-width: 768px) {
  /* line 218, ../component/sass/style.scss */
  .col-sm-15 {
    width: 20%;
    float: left; } }
@media (min-width: 992px) {
  /* line 224, ../component/sass/style.scss */
  .col-md-15 {
    width: 20%;
    float: left; } }
@media (min-width: 1200px) {
  /* line 230, ../component/sass/style.scss */
  .col-lg-15 {
    width: 20%;
    float: left; } }
/* line 1, ../component/sass/_modules.scss */
.wrapper {
  background: #180817 url(../../images/bodybk.jpg) repeat-y;
  margin: 0;
  color: white;
  min-width: 1024px; }
  /* line 7, ../component/sass/_modules.scss */
  .wrapper a {
    color: #d46940; }

/* line 12, ../component/sass/_modules.scss */
#loginform {
  padding-top: 15px; }
  /* line 14, ../component/sass/_modules.scss */
  #loginform .container {
    max-width: 350px;
    min-width: 350px; }
  /* line 19, ../component/sass/_modules.scss */
  #loginform .btn {
    color: white !important; }
  /* line 24, ../component/sass/_modules.scss */
  #loginform .color_fb {
    background: #1d3d83;
    color: white; }

/* line 30, ../component/sass/_modules.scss */
section {
  padding: 30px 0; }
  /* line 35, ../component/sass/_modules.scss */
  section h2 {
    font-size: 25px;
    margin-bottom: 25px; }

/* line 41, ../component/sass/_modules.scss */
#upload_cardCover {
  max-width: 250px; }

/* line 45, ../component/sass/_modules.scss */
#popup_cardCoverUrl {
  margin: 0 auto; }

/* line 51, ../component/sass/_modules.scss */
.tempalteItem:hover .tempThumb img {
  border: 1px solid #de6e46; }

/* line 56, ../component/sass/_modules.scss */
.italic {
  font-style: italic; }

/* line 60, ../component/sass/_modules.scss */
.mainKV, .whatisGohoops {
  padding-bottom: 50px; }

/* line 65, ../component/sass/_modules.scss */
.unLogged h2 {
  color: #ffa200; }

/* line 70, ../component/sass/_modules.scss */
.mainKV {
  min-height: 924px;
  background: url(../../images/sec1_bk.jpg) top center;
  background-size: cover; }
  /* line 75, ../component/sass/_modules.scss */
  .mainKV header {
    margin-top: 28px; }
  /* line 79, ../component/sass/_modules.scss */
  .mainKV .registBtn {
    color: #dbd0ae;
    cursor: pointer; }
  /* line 84, ../component/sass/_modules.scss */
  .mainKV .kv_title, .mainKV .kv_subtitle {
    position: relative; }
  /* line 88, ../component/sass/_modules.scss */
  .mainKV .kv_title {
    top: 20px; }
  /* line 92, ../component/sass/_modules.scss */
  .mainKV .kv_subtitle {
    top: -30px; }

/* line 97, ../component/sass/_modules.scss */
.cmenu {
  position: relative;
  z-index: 9; }
  /* line 100, ../component/sass/_modules.scss */
  .cmenu li {
    display: inline-block;
    padding: 0 20px; }
    /* line 104, ../component/sass/_modules.scss */
    .cmenu li a {
      color: #ffee81; }

/* line 111, ../component/sass/_modules.scss */
.kvArea img {
  position: relative; }

/* line 117, ../component/sass/_modules.scss */
#owl-works .item img {
  border: 1px #403230 solid;
  padding: 3px; }

/* line 124, ../component/sass/_modules.scss */
.DockSample .cardDeck {
  padding: 4px;
  border: 1px solid #403230;
  display: inline-block;
  position: relative; }
  /* line 129, ../component/sass/_modules.scss */
  .DockSample .cardDeck:first-child {
    left: 40px;
    top: -30px; }
    /* line 130, ../component/sass/_modules.scss */
    .DockSample .cardDeck:first-child img {
      width: 100px; }
  /* line 140, ../component/sass/_modules.scss */
  .DockSample .cardDeck:nth-child(2) {
    left: 20px;
    top: -20px; }
    /* line 141, ../component/sass/_modules.scss */
    .DockSample .cardDeck:nth-child(2) img {
      width: 140px; }
  /* line 148, ../component/sass/_modules.scss */
  .DockSample .cardDeck:nth-child(3) {
    z-index: 3; }
  /* line 152, ../component/sass/_modules.scss */
  .DockSample .cardDeck:nth-child(4) {
    left: -20px;
    z-index: 2;
    top: -20px; }
    /* line 153, ../component/sass/_modules.scss */
    .DockSample .cardDeck:nth-child(4) img {
      width: 140px; }
  /* line 161, ../component/sass/_modules.scss */
  .DockSample .cardDeck:nth-child(5) {
    left: -40px;
    z-index: 0;
    top: -30px; }
    /* line 162, ../component/sass/_modules.scss */
    .DockSample .cardDeck:nth-child(5) img {
      width: 100px; }

/* line 179, ../component/sass/_modules.scss */
.leftb {
  border-left: 1px solid #f57a4b;
  font-style: italic;
  padding-left: 25px; }

/* line 185, ../component/sass/_modules.scss */
.imgBtn {
  cursor: pointer; }

/* line 190, ../component/sass/_modules.scss */
.gameBlock .custom-file {
  border: 1px solid #f57a4b;
  border-radius: 10px;
  padding: 7px;
  margin: 5px 0;
  display: block; }
  /* line 196, ../component/sass/_modules.scss */
  .gameBlock .custom-file label {
    color: grey; }
/* line 201, ../component/sass/_modules.scss */
.gameBlock #imgPreview {
  width: 150px; }

/* line 206, ../component/sass/_modules.scss */
.rankBlock {
  height: 883px;
  background: url(../../images/sec3_bk_before.jpg) top center no-repeat; }

/* line 211, ../component/sass/_modules.scss */
.rankBlock_after {
  height: 883px;
  background: url(../../images/sec3_bk.jpg) top center no-repeat; }

/* line 217, ../component/sass/_modules.scss */
.rulesContent ul {
  list-style-type: disc;
  list-style-position: inside; }
/* line 221, ../component/sass/_modules.scss */
.rulesContent ol {
  list-style-type: decimal;
  list-style-position: inside; }
/* line 225, ../component/sass/_modules.scss */
.rulesContent ul ul, .rulesContent ol ul {
  list-style-type: circle;
  list-style-position: inside;
  margin-left: 15px; }
/* line 231, ../component/sass/_modules.scss */
.rulesContent ol ol, .rulesContent ul ol {
  list-style-type: lower-latin;
  list-style-position: outside;
  margin-left: 15px; }
/* line 236, ../component/sass/_modules.scss */
.rulesContent h2, .rulesContent h3 {
  color: #f57a4b; }

/* line 242, ../component/sass/_modules.scss */
.shadowR {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #b2b2b2; }

/* line 249, ../component/sass/_modules.scss */
.leaderBlock {
  position: relative; }
  /* line 252, ../component/sass/_modules.scss */
  .leaderBlock .styleBlock {
    position: absolute;
    top: 202px;
    left: 177px; }
    /* line 256, ../component/sass/_modules.scss */
    .leaderBlock .styleBlock .scoreNum {
      color: #ffbb33;
      font-style: italic;
      font-weight: bold;
      font-size: 24px; }
    /* line 262, ../component/sass/_modules.scss */
    .leaderBlock .styleBlock .userImg {
      width: 213px;
      height: 213px; }
    /* line 268, ../component/sass/_modules.scss */
    .leaderBlock .styleBlock .cardName {
      color: #ffbb33; }
  /* line 273, ../component/sass/_modules.scss */
  .leaderBlock .workBlock {
    width: 405px;
    height: 540px;
    position: absolute;
    left: 480px;
    top: 220px; }
    /* line 281, ../component/sass/_modules.scss */
    .leaderBlock .workBlock .item {
      width: 124px;
      text-align: center;
      font-size: 12px;
      overflow: hidden;
      float: left;
      margin-right: 4px;
      margin-bottom: 4px; }
      /* line 292, ../component/sass/_modules.scss */
      .leaderBlock .workBlock .item .name {
        width: 100%;
        overflow: hidden;
        height: 20px; }
      /* line 298, ../component/sass/_modules.scss */
      .leaderBlock .workBlock .item .score {
        color: #ffbb33; }
      /* line 301, ../component/sass/_modules.scss */
      .leaderBlock .workBlock .item img {
        width: 100%;
        border: 2px solid #bc9247; }
        /* line 304, ../component/sass/_modules.scss */
        .leaderBlock .workBlock .item img:hover {
          border-color: white; }
  /* line 311, ../component/sass/_modules.scss */
  .leaderBlock .navBlock {
    position: absolute;
    width: 515px;
    top: 430px;
    left: 420px; }

/* line 322, ../component/sass/_modules.scss */
.whiteText {
  color: white; }

/* line 326, ../component/sass/_modules.scss */
.spinner {
  position: fixed;
  z-index: 999;
  left: 50%;
  top: 50%;
  margin-top: -100px;
  margin-left: -100px;
  display: none; }

/* line 336, ../component/sass/_modules.scss */
.closeBtn {
  position: absolute;
  top: -20px;
  right: -20px; }

/* line 342, ../component/sass/_modules.scss */
.tucloseBtn {
  position: absolute;
  top: 10px;
  right: 10px; }

/* line 349, ../component/sass/_modules.scss */
#owl-works .item {
  font-style: italic;
  width: 225px;
  height: 285px;
  margin: 0 auto;
  color: white;
  text-align: center; }
  /* line 357, ../component/sass/_modules.scss */
  #owl-works .item img {
    width: 100%; }
  /* line 361, ../component/sass/_modules.scss */
  #owl-works .item .money {
    color: #f4f0a9; }

/* line 367, ../component/sass/_modules.scss */
.awardsbox {
  position: fixed;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0; }
  /* line 379, ../component/sass/_modules.scss */
  .awardsbox a {
    color: #ffa200; }
  /* line 383, ../component/sass/_modules.scss */
  .awardsbox h2 {
    font-size: 25px;
    margin-bottom: 25px;
    color: #ffa200; }
  /* line 389, ../component/sass/_modules.scss */
  .awardsbox .popup {
    padding-top: 5%;
    height: 400px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    border: solid 3px #d56a44;
    margin-top: 7%;
    position: relative; }

/* line 400, ../component/sass/_modules.scss */
.lightbox {
  display: none;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0; }
  /* line 412, ../component/sass/_modules.scss */
  .lightbox .container {
    max-width: 800px; }
  /* line 416, ../component/sass/_modules.scss */
  .lightbox .popup {
    height: 500px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    border: solid 3px #d56a44;
    margin-top: 7%;
    position: relative; }
  /* line 425, ../component/sass/_modules.scss */
  .lightbox .workMeta {
    font-size: 15px; }
  /* line 429, ../component/sass/_modules.scss */
  .lightbox #fbSuccess, .lightbox #workView {
    display: none; }

/* line 434, ../component/sass/_modules.scss */
.tutorialBox {
  display: none;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  color: white;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0; }

/* line 447, ../component/sass/_modules.scss */
.fixed {
  position: fixed; }

@media screen and (max-width: 740px) {
  /* line 5, ../component/sass/_responsive.scss */
  .sec01 .container {
    height: 100vh; }

  /* line 10, ../component/sass/_responsive.scss */
  .garrow {
    -webkit-transform: rotate(90deg);
    /* Safari */
    transform: rotate(90deg); } }
@media screen and (max-width: 768px) {
  /* line 18, ../component/sass/_responsive.scss */
  .showMid {
    display: none; } }
@media screen and (min-width: 768px) {
  /* line 26, ../component/sass/_responsive.scss */
  .hideMid {
    display: none; } }
@media screen and (max-width: 1024px) {
  /* line 32, ../component/sass/_responsive.scss */
  .showLarge {
    display: none; } }
@media screen and (min-width: 1024px) {
  /* line 41, ../component/sass/_responsive.scss */
  .hideLarge {
    display: none; }

  /* line 45, ../component/sass/_responsive.scss */
  .remargin {
    margin-left: 0; } }