html, body { width: 100%; height: 100%; overflow: hidden; }

#topBar { width: 100%; height: 80px; line-height: 60px; position: absolute; z-index: 99; top: 0; left: 0; background-color: #FFF; border-bottom: 20px solid #069fdb; }

#topBar .logoDiv { float: left; }

#topBar .logoDiv img { height: 50px; width: auto; margin-right: 10px; }

#topBar .frArea { float: right; }

#topBar .frArea div { font-size: 14px; margin-left: 12px; color: #000; display: inline-block; position: relative; }

#topBar .frArea .showUser span { font-size: 14px; }

#topBar .frArea .exitBtn { cursor: pointer; font-weight: bold; }

#topBar .frArea .setPro, #topBar .frArea .addSelfProBtn, #topBar .frArea .more { font-weight: bold; cursor: pointer; }

#topBar .frArea .setPro:hover, #topBar .frArea .addSelfProBtn:hover, #topBar .frArea .more:hover { color: #ffb606; }

#choiceArea { width: 100%; height: 100%; margin: 0 auto; position: relative; padding-top: 80px; padding-bottom: 70px; }

#choiceArea.longc { overflow-y: scroll; }

#choiceArea .ctitle { width: 100%; height: 50px; line-height: 50px; font-size: 18px; background-color: #f3f3f3; text-align: center; color: #3a89b0; }

#choiceArea .proColumn { position: relative; padding-top: 30px; padding-bottom: 30px; }

#choiceArea .vhmiddle { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

#choiceArea .choiceul { padding-bottom: 80px\9; }

#choiceArea .choiceul li { width: 21%; position: relative; display: inline-block; vertical-align: top; text-align: center; margin: 10px 2.5%; margin: 10px 2% \9; border-bottom: 10px solid #0088c4; overflow: hidden; }

#choiceArea .choiceul li a { display: block; text-align: center; position: relative; }

#choiceArea .choiceul li img, #choiceArea .choiceul li .title { display: block; }

#choiceArea .choiceul li img { padding-top: 20px; height: 80px; width: auto; margin: 0 auto; margin-bottom: 20px; }

#choiceArea .choiceul li .title { padding-bottom: 10px; padding-top: 10px; font-size: 15px; margin-top: 10px; background-color: #ededed; color: #000; }

#choiceArea .choiceul li .stepDesc { width: 100%; height: 100%; position: absolute; top: 0; right: 100%; -webkit-transition: right 0.5s ease; transition: right 0.5s ease; }

#choiceArea .choiceul li .stepDesc .mb { opacity: 0.6; filter: alpha(opacity=60); }

#choiceArea .choiceul li .stepDesc p, #choiceArea .choiceul li .stepDesc .showoh { position: relative; z-index: 3; }

#choiceArea .choiceul li .stepDesc .showoh { margin-top: -8px; }

#choiceArea .choiceul li .stepDesc p { margin: 5% auto; margin-bottom: 0; text-align: left; display: inline-block; }

#choiceArea .choiceul li .stepDesc span { display: block; font-size: 14px; color: #fff; }

#choiceArea .choiceul li.on { -webkit-animation: tada 1s linear infinite; animation: tada 1s linear infinite; }

#choiceArea .choiceul li:hover .stepDesc { right: 0; }

#choiceArea .choiceul li:nth-child(4n) { margin-right: 0; }

#choiceArea .choiceul li:nth-child(4n+1) { margin-left: 0; }

#footer { width: 100%; text-align: center; padding: 20px 0; position: absolute; bottom: 0; left: 0; z-index: 99; background-color: #333; }

#footer span { font-size: 14px; letter-spacing: 2px; padding-left: 2px; color: #fff; position: relative; z-index: 2; }

#setProArea { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 999; display: none; }

#setProArea .mb { opacity: 0.2; filter: alpha(opacity=20); }

#setProArea .closeA { font-size: 36px; position: absolute; top: 2; right: 16px; color: #ed1f37; cursor: pointer; z-index: 3; }

#setProArea #theSetF { height: 90%; margin-top: 2.5%; background-color: #FFF; position: relative; z-index: 2; padding: 0; }

.noContainer { width: 100%; text-align: center; display: none; }

.noContainer img, .noContainer span { display: block; }

.noContainer img { width: 70px; margin: 0 auto; margin-bottom: 20px; }

.noContainer span { font-size: 14px; color: #000; }

.fadeInUp { -webkit-animation: fadeInUp 1s ease; animation: fadeInUp 1s ease; }

@-webkit-keyframes fadeInUp { 0% { opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px); }
  100% { opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInUp { 0% { opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px); }
  100% { opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@media screen and (max-width: 768px) { #choiceArea .choiceul li { width: 100%; margin-left: 0; margin-right: 0; } }
/*# sourceMappingURL=index.css.map */