@charset "UTF-8";
@font-face {
  font-family: 'Eurosteal';
  src: url("../fonts/Eurosteal.eot");
  src: url("../fonts/Eurosteal.eot#iefix") format("embedded-opentype"), url("../fonts/Eurosteal.ttf") format("truetype"), url("../fonts/Eurosteal.woff") format("woff"), url("../fonts/Eurosteal.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

html, body {
  /*width:100%;
    height:100%;*/
  margin: 0;
  padding: 0;
}

body {
  background-color: #000;
  color: #ccc;
  background-image: url(../images/v160921/bg.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: fixed;
}

button:focus {
  outline: 0;
}

a, a:hover, a:visited, a:active, a:focus {
  color: #fff;
  text-decoration: none;
}

a._linkstyle {
  text-decoration: underline;
}

a._linkstyle:hover {
  color: #ffff99;
}

a._linkstyle02 {
  text-decoration: none;
  color: #ffff00;
}

a._linkstyle02:hover {
  color: #ffff99;
}

._boxbtn {
  border: 2px #ffffff solid;
  padding-top: 1em;
  padding-bottom: 1em;
  /*._btn:before{
            background-image: url(../images/nav_cta_icon4.png);
    }*/
}

._boxbtn:hover {
  border-color: #ffff99;
  color: #ffff99;
  /*._btn:before{
            background-image: url(../images/nav_cta_icon4_hover.png);
        }*/
}

._table {
  display: table;
  width: 100%;
}

._table._hfull {
  height: 100%;
}

._va-m, ._td._center {
  vertical-align: middle;
}

._t-c, ._boxbtn, ._td._center, .spakerbox:after {
  text-align: center;
}

._t-r {
  text-align: right;
}

._td {
  display: table-cell;
}

._td._center {
  width: 100%;
}

._d-n, #posmenu {
  display: none;
}

._d-b, ._boxbtn, ._rwdimg, ._btn, #posmenu a, #menuicon, #menuicon ._svgbox, a.hoverstyle01:before, .defaulthotzone:before, .hotitem, .hotlist .item, .docbg:after, ._hrstyle02, .spakerbox:before, .spakerbox:after {
  display: block;
}

._d-ib, ._btn:before, #posmenu a:before, #sectitle span, .eventname, .eventdate, .speakerimg .item {
  display: inline-block;
}

._flex, .speakerset {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

._al-it-st {
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-align-content: stretch;
  align-content: stretch;
}

._flw-w, .speakerset {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

._pos-a, .svgchild, .svgchild svg, #menuicon, #posmenu, .docbg:after {
  position: absolute;
}

._m0p0, ._clear_ul {
  margin: 0;
  padding: 0;
}

._bxz-bb, .spakerbox, .spakerbox:before, .spakerbox:after, .speakerimg .item {
  box-sizing: border-box;
}

._clear_ul {
  display: block;
  list-style: none;
}

._rwdimg {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

._svgbox {
  position: relative;
}

.svgchild, .svgchild svg {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

._btn:before, #posmenu a:before {
  font-family: 'Eurosteal';
  content: '\276D';
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  background-position: left center;
  background-repeat: no-repeat;
  position: relative;
  left: 0.2em;
}

/*._btn:after{
    content:'_';
}*/
._fm-e {
  font-family: 'Eurosteal';
}

._titlestyle {
  font-weight: 400;
  font-size: calc(130% + 1.022222vw);
  color: #ccfc8d;
}

._titlestyle span {
  padding-left: 1em;
  font-size: 50%;
  color: #abece8;
}

._comingsoon, #posmenu a.comingsoon {
  opacity: 0.4;
}

.website--title {
  display: none;
}

.titleimg {
  margin-top: 50px;
}

#loadmsg {
  text-align: center;
}

#kvsize {
  margin: 0 auto;
  position: relative;
}

#kvparent {
  width: 100%;
  height: 0;
  padding-bottom: 66.5496%;
}

#kkv {
  width: 100%;
  height: 100%;
  position: absolute;
}

#sectitle {
  font-family: 'Eurosteal';
  font-size: calc(1em + 1.122222vw);
  position: relative;
  width: 100%;
  overflow: hidden;
  text-align: center;
  opacity: 0.6;
  margin-bottom: 4vh;
}

#sectitle span {
  margin: 0 auto;
  position: relative;
}

#sectitle span:before, #sectitle span:after {
  content: '';
  position: absolute;
  width: 1000%;
  height: 50%;
  box-sizing: border-box;
  border-bottom: 4px #fff solid;
  top: 0;
}

#sectitle span:before {
  left: -1005%;
}

#sectitle span:after {
  right: -1005%;
}

#menuicon {
  top: 10px;
  left: 10px;
  width: 70px;
  height: 70px;
  box-sizing: border-box;
  background-color: transparent;
  padding: 15px;
  border: 1px #ccc solid;
  transition: background-color 900ms,border-bottom-color 900ms;
  z-index: 10;
}

#menuicon.open {
  border-bottom-color: #000;
}

#menuicon ._svgbox {
  width: 100%;
  height: 100%;
}

.cityline {
  display: block;
  border: 0;
  height: 134px;
  width: 100%;
  background-image: url(../images/herobanner_city.png);
  background-position: center center;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .cityline {
    height: 20vw;
  }
}

@media screen and (max-height: 880px) {
  #kvsize {
    max-width: 110vh;
  }
}

#posmenu {
  top: 79px;
  left: 10px;
  background-image: url(../images/docbg.png);
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px #ccc solid;
  padding: 20px;
  z-index: 9;
}

#posmenu a {
  transition: all 0.5s;
  position: relative;
  left: -1em;
}

#posmenu a:before {
  left: 110%;
  transition: left 0.5s;
  color: #999;
}

#posmenu a.comingsoon {
  left: 0.3em;
}

#posmenu a.comingsoon:before {
  display: none;
}

#posmenu a.comingsoon:hover {
  color: #fff;
}

#posmenu a:hover {
  color: #e3b7f0;
  left: 0.3em;
}

#posmenu a:hover:before {
  left: 0.2em;
  color: #fff;
}

#posmenu li + li {
  margin-top: 2vh;
}

.conset01 {
  line-height: 2em;
}

.hitconeventlist {
  line-height: 1.8em;
}

.hitcon_event_title_bg {
  height: 64px;
  background-image: url(../images/hitcon_event_title_s.png);
  background-position: center top;
  background-repeat: no-repeat;
}

.colorstyle01 {
  color: #ffca92;
}

.colorstyle02 {
  color: #ffe57b;
}

.colorstyle03 {
  color: #ff8989;
}

.eventname {
  width: 8em;
}

.eventdate {
  width: 8em;
}

@media screen and (max-width: 991px) {
  .hitconeventlist div {
    text-align: center;
    margin-top: 0.5em;
  }
  .hitconeventlist .eventname, .hitconeventlist .eventline, .hitconeventlist .eventdate {
    text-align: left;
  }
}

a.hoverstyle01:before {
  content: '';
  position: absolute;
  width: 0%;
  height: 0%;
  margin: auto;
  top: 5%;
  left: 5%;
  bottom: 5%;
  right: 5%;
  background-color: rgba(255, 255, 255, 0.1);
  border: 0px rgba(255, 255, 255, 0.2) solid;
  transition: width 500ms,height 500ms;
}

a.hoverstyle01:hover:before, .select:before {
  width: 90%;
  height: 90%;
  border-width: 1px;
}

.defaulthotzone {
  border: 2px #ffffff solid;
  box-sizing: border-box;
  background-image: url(../images/defaulthotzone_bg.jpg);
  position: relative;
  box-shadow: 5px 5px 20px black inset;
}

.defaulthotzone:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 50%, rgba(50, 50, 50, 0.6) 50%);
  background-size: 2px 2px;
}

.defaulthotzone .title {
  font-size: calc(26px + 0.1111111111vw);
}

.defaulthotzone ._btn:before, .defaulthotzone #posmenu a:before, #posmenu .defaulthotzone a:before {
  background-image: url(../images/nav_cta_icon2.png);
}

.hotcell_left, .hotcell_right {
  width: 50%;
  vertical-align: middle;
  text-align: center;
  position: relative;
}

.hotcell_right {
  border-left: 2px #ffffff solid;
}

.hotitem {
  position: relative;
  width: 100%;
  padding-top: 1em;
  padding-bottom: 1em;
  vertical-align: middle;
  text-align: center;
}

.hotitem:nth-child(1) {
  background-color: rgba(12, 90, 123, 0.15);
}

.hotitem:nth-child(2) {
  background-color: rgba(181, 232, 2, 0.15);
}

.hotitem + .hotitem {
  border-top: 2px #ffffff solid;
}

.hotlist .item {
  width: 100%;
  box-sizing: border-box;
  padding-left: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border-left: 6px #ffffff solid;
  position: relative;
  margin-top: 4em;
  margin-bottom: 4em;
}

.hotlist .item:before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  left: 0;
  top: 0;
  z-index: -2;
  transition: width 0.5s;
}

.hotlist .item:hover .title {
  color: #fff;
}

.hotlist .item:hover:before {
  width: 100%;
}

.hotlist .hotcolor01 {
  border-left-color: #00FFFF;
}

.hotlist .hotcolor02 {
  border-left-color: #FF99FF;
}

.hotlist .hotcolor03 {
  border-left-color: #66FF66;
}

.hotlist .title {
  font-family: 'Eurosteal';
  font-size: 2em;
  line-height: calc(1em);
  color: #999;
  transition: color 0.5s;
}

.hotlist .msg {
  font-size: calc(12px + 0.0222vw);
  color: #00CCFF;
}

.hotlist .msg02 {
  font-size: calc(12px + 0.0222vw);
  color: #ffff00;
}

.hotlist .msg03 {
  font-size: calc(18px + 0.0222vw);
  color: #ffff00;
}

.hotlist .msg04 {
  font-size: calc(18px + 0.01vw);
  color: #ffff00;
}

.hotlist .msg05 {
  font-size: calc(34px + 0.0222vw);
  color: #ffff00;
}

@media screen and (max-width: 991px) and (min-width: 561px) {
  .hotlist {
    display: flex;
  }
  .hotlist .item {
    display: inline-block;
    margin: 0.5em;
    width: 33%;
  }
  .hotlist .title {
    font-size: calc(1em + 0.5vw);
  }
}

@media screen and (max-width: 561px) {
  .hotlist .item {
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
  }
}

.sharezone {
  text-align: center;
  margin-top: 2em;
  margin-bottom: 1em;
}

.sharezone ._table {
  max-width: 20em;
  margin: 0 auto;
}

.sharezone .msg {
  margin-top: 0.5em;
}

.sharezone .msg02 {
  margin-top: 0.5em;
}

.sharezone .msg03 {
  margin-top: 0.5em;
}

.sharezone .msg04 {
  margin-top: 0.5em;
}

.sharezone a {
  position: relative;
  top: 0;
  transition: all 300ms;
}

.sharezone a:hover {
  top: -2px;
}

.docbg {
  position: relative;
}

.docbg:after {
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url(../images/docbg.png);
}

._hrstyle01 {
  height: 0;
  border: 0;
  border-bottom: 1px #666 solid;
  margin-top: 1em;
  margin-bottom: 1em;
}

._hrstyle02 {
  border: 0;
  height: 1em;
}

.footpoint {
  margin-top: 4em;
  margin-bottom: 2em;
}

.footpoint .item {
  width: 22%;
  box-sizing: border-box;
}

.footpoint .item:hover .title {
  color: #fff;
}

.footpoint .item._comingsoon:hover .title, .footpoint #posmenu a.item.comingsoon:hover .title, #posmenu .footpoint a.item.comingsoon:hover .title {
  color: #999;
}

.footpoint .title {
  font-family: 'Eurosteal';
  font-size: 1.2em;
  line-height: 0.1em;
  color: #999;
  transition: color 0.5s;
}

.footpoint .msg {
  font-size: calc(12px + 0.0222vw);
  color: #00CCFF;
}

.footpoint .msg02 {
  font-size: calc(12px + 0.0222vw);
  color: #ffff00;
}

.footpoint .msg03 {
  font-size: calc(18px + 0.0222vw);
  color: #ffff00;
}

.footpoint .msg04 {
  font-size: calc(18px + 0.0222vw);
  color: #ffff00;
}

@media screen and (max-width: 768px) {
  .footpoint {
    flex-wrap: wrap;
    justify-content: center;
  }
  .footpoint .item {
    width: 8em;
    margin: 0.5em;
  }
}

.spakerbox {
  width: 30%;
  border: 1px #ccc solid;
  padding: 0.5em;
  padding-bottom: 2.5em;
  position: relative;
  margin: 15px;
}

.spakerbox:before {
  content: '';
  position: absolute;
  background-color: rgba(255, 255, 255, 0.1);
  width: 0;
  height: 0;
  margin: auto;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  transition: width 500ms,height 500ms;
}

.spakerbox:after {
  content: 'More';
  position: absolute;
  background-color: #9c3;
  color: #000;
  padding: 0.2em;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: background-color 500ms;
}

.spakerbox:hover:before {
  width: 95%;
  height: 95%;
}

.spakerbox:hover:after {
  background-color: #add65c;
}

.speakerimg .item {
  vertical-align: top;
  width: 49%;
}

.speakerimg._three .item {
  width: 32%;
}

.speakertitle {
  margin-top: 0.5em;
  padding-top: 0.5em;
  border-top: 1px #ccc dotted;
  font-weight: bold;
}

.moinbox {
  padding: 1em;
}

.moinbox .speakerimg .item {
  width: 100%;
  margin-bottom: 2em;
}

.moinbox .speakerimg .item .detail {
  text-align: left;
}

.circle {
  border-radius: 50%;
}

.gcomesoon {
  text-align: center;
  margin: 15px;
  padding: 0.5em;
  -webkit-flex: 1;
  flex: 1;
}

@media screen and (max-width: 991px) {
  .spakerbox {
    width: auto;
    -webkit-flex: 1 30%;
    flex: 1 30%;
  }
  .gcomesoon {
    -webkit-flex: 1 30%;
    flex: 1 30%;
  }
}

@media screen and (max-width: 768px) {
  .spakerbox {
    width: auto;
    -webkit-flex: 1 48%;
    flex: 1 48%;
  }
  .gcomesoon {
    -webkit-flex: 1 48%;
    flex: 1 48%;
  }
}

/*** coco update 20161014 ***/
html.backgroundsize body {
  background: #000 url(../images/v160921/bg.jpg) no-repeat top center fixed;
}

/*** Training ***/
.seminar_nav {
  margin: 0 auto;
}

.seminar_nav ul {
  list-style-type: none;
  margin: 0;
}

.seminar_nav ul li {
  display: inline-block;
  color: #999;
  font-size: 1.2em;
  font-weight: 300;
  margin-right: 1.5em;
}

.seminar_nav ul li:before {
  font-family: "Eurosteal";
  content: "\276D";
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
}

.seminar_nav ul li a {
  color: #ccc;
}

.seminar_nav ul li:hover, .seminar_nav ul li a:hover {
  color: #FF99FF;
}

.seminar_title {
  margin: 40px auto 20px;
  width: 90%;
  overflow: auto;
}

.seminar_title > div {
  padding: 0;
}

.seminar_title h3 {
  margin: 0;
}

.seminar_title a {
  font-size: 0.7em;
}

.seminar {
  background-color: rgba(255, 255, 255, 0);
  margin: 20px auto;
  width: 90%;
  overflow: auto;
  transition: background-color 0.5s;
}

.seminar:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.seminar .wrapper {
  padding: 20px;
  border-width: 1px 1px 1px 6px;
  border-style: solid;
  border-color: #999;
  overflow: auto;
}

.seminar .wrapper:hover {
  border-top-color: #FFF;
  border-right-color: #FFF;
  border-bottom-color: #FFF;
}

.seminar .hotcolor01 {
  border-left-color: #00FFFF;
}

.seminar .hotcolor02 {
  border-left-color: #FF99FF;
}

.seminar .hotcolor03 {
  border-left-color: #66FF66;
}

.seminar .CTA a:hover, .seminar .CTA span:hover {
  color: #FFFF99;
  border-color: #FFFF99;
}

.semicontent {
  color: #FFF;
  font-family: "Helvetica Neue", SegoeLight, "Segoe UI", Segoe, Arial, Verdana, sans-serif, 微軟正黑體, "Microsoft JhengHei";
}

.semicontent h2 {
  font-size: 1.4em;
  margin: 20px 0 10px;
}

.semicontent p {
  color: #ddd;
  margin-top: 0;
  font-size: 1.1em;
  font-weight: 200;
}

.semicontent span.fee_hour {
  color: #ccfc8d;
  font-size: 0.9em;
  margin-right: 1.5em;
}

.semicontent span.go_view {
  color: #2aff00;
  /*#FFFF99;*/
  font-size: 0.8em;
  display: inline-block;
}

.semicontent span.place_time {
  color: #ddd;
  font-size: 0.8em;
}

.semicontent span.go_view:before {
  font-family: "Eurosteal";
  content: "\276D \276D";
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.3em;
}

.CTA a {
  background-color: #ff9900;
  border-radius: 5px;
  color: #fff;
  font-size: 1.2em;
  font-weight: 300;
  display: block;
  width: 200px;
  height: 100px;
  margin: 20px auto;
  padding: 40px;
  text-align: center;
  line-height: 1;
}

.CTA a._open {
  background-color: #00d76a;
}

.CTA span.btn_l:before {
  font-family: "Eurosteal";
  content: "\276D";
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.3em;
}

.CTA span.btn_s {
  font-size: 0.6em;
  font-weight: normal;
}

.course .row {
  margin: 0 3px 20px 3px;
  overflow: auto;
}

.course .b_top {
  border: 1px solid #FFF;
  margin-top: 20px;
  padding: 10px 20px;
}

.course .b_bottom {
  border: 1px solid #FFF;
  border-top: 0;
  padding: 10px 20px;
}

.course h3 {
  color: #ccfc8d;
  /*#d1cc80;*/
  margin: 0;
}

.course h4 {
  color: #FFF;
  margin: 0;
}

.course p {
  color: #FFF;
  display: block;
  font-weight: 300;
  margin: 0 0 10px;
}

.course ol, .course ul {
  color: #FFF;
  font-weight: 300;
  margin-left: -1em;
}

.course ol ol {
  list-style-type: lower-alpha;
}

.course span.item {
  display: block;
  font-weight: 500;
  margin-top: 20px;
  margin-bottom: 10px;
  text-decoration: underline;
}

.course span.first {
  margin-top: 10px;
}

.course span.focus {
  font-weight: 500;
}

.course span.obli {
  font-weight: oblique;
}

/*** Location ***/
.location p {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}

.location span.focus {
  color: #FFF;
  font-weight: bold;
  font-size: 1.2em;
}

.location span.focus_s {
  color: #FFF;
  font-weight: 500;
  font-size: 1em;
}

.location p._t-m-l {
  line-height: 1.8;
}

.location ol {
  margin-left: auto;
  margin-right: auto;
  max-width: 850px;
  line-height: 1.8;
}

/*** Agenda ***/
.day1 {
  border: 1px #b5d100 solid;
  color: #b5d100;
  text-align: center;
}

.day1 h2 {
  margin: 5px 0 5px 0;
  font-size: 22px;
}

.gotoday1 {
  font-size: 14px;
  margin-left: 10px;
  color: #ffffff;
}

.gotoday2 {
  font-size: 14px;
  margin-left: 10px;
  color: #ffffff;
}

.agenda_time {
  font-weight: bold;
}

.agenda_bold {
  font-weight: bold;
}

.agenda_title {
  color: #ccf473;
}

.r0 {
  display: inline-block;
  padding: 3px 10px;
  background: #66ffff;
  color: #000000;
  font-weight: bold;
}

.r1 {
  display: inline-block;
  padding: 3px 10px;
  background: #ff99ff;
  color: #000000;
  font-weight: bold;
}

.r2 {
  display: inline-block;
  padding: 3px 10px;
  background: #99ff99;
  color: #000000;
  font-weight: bold;
}

/*** coupon ***/
.coupon-title {
  text-align: center;
  color: #ccfc8d;
}

.coupon-txt {
  text-align: left;
}

/*** download ***/
.daystyle {
  font-size: 21px;
  font-weight: bold;
}

._pdficon {
  padding-top: 15px;
  padding-bottom: 15px;
}

@media screen and (min-width: 481px) and (max-width: 991px) {
  ._pdficon {
    width: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

@media screen and (max-width: 480px) {
  ._pdficon {
    width: 40px;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .daystyle {
    font-size: 18px;
  }
}