@charset "UTF-8";
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
.col-container, .main-container, .box, .face .respect-list li, .index .index-content-container, .result .result-container {
  zoom: 1; }
  .col-container:before, .main-container:before, .box:before, .face .respect-list li:before, .index .index-content-container:before, .result .result-container:before, .col-container:after, .main-container:after, .box:after, .face .respect-list li:after, .index .index-content-container:after, .result .result-container:after {
    content: "";
    display: table; }
  .col-container:after, .main-container:after, .box:after, .face .respect-list li:after, .index .index-content-container:after, .result .result-container:after {
    clear: both; }

.container {
  float: none;
  margin-left: auto;
  margin-right: auto; }

.full-parent {
  display: block;
  width: 100%;
  height: 100%; }

@media (min-width: 991px) {
  .hidden-l {
    display: none !important; } }

@media (max-width: 991px) {
  .hidden-sm {
    display: none !important; } }

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; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

a img {
  border: none; }

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

*:focus {
  outline: none; }

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/* ==|====================
layout/_container
======================= */
.container {
  max-width: 1200px;
  min-height: 1px; }

.row {
  min-width: 320px;
  margin-left: -15px;
  margin-right: -15px; }

/* ==|====================
layout/footer
======================= */
footer {
  position: absolute;
  bottom: 0;
  width: 100%; }

#footer {
  position: relative;
  width: 100%; }
  #footer > .footer-bg {
    position: absolute;
    width: 100%; }
  #footer > .footer-cup {
    position: absolute;
    right: 0px;
    bottom: 0px; }
    @media (min-width: 992px) {
      #footer > .footer-cup {
        right: 18px;
        bottom: 12px; } }

.footer-rule {
  position: relative;
  width: 100%;
  min-width: 320px;
  height: 60px;
  background: url('img/footer-logo.jpg?1436928075') no-repeat center center #fff;
  background-size: contain; }
  .footer-rule .footer-links {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 620px;
    min-width: 320px;
    height: 100%; }
    .footer-rule .footer-links > a {
      position: relative;
      height: 100%;
      display: inline-block;
      background-image: url("about:blank"); }
  .footer-rule .uni-link {
    float: left;
    width: 14%; }
  .footer-rule .pecos-link {
    float: right;
    right: 1%;
    width: 20%; }

.col-container {
  width: 100%; }

.col-1 {
  width: 20%;
  float: left; }

.col-2 {
  width: 40%;
  float: left; }

/* ==|====================
layout/_header
======================= */
#header {
  position: relative;
  width: 100%;
  height: 40px;
  background: transparent url("img/top.png") left top repeat-x; }
  @media (min-width: 992px) {
    #header {
      height: 60px; } }

.header-logo {
  position: absolute;
  top: 21%;
  left: 3%;
  width: 48px;
  height: 22px;
  background: url('img/logo.png?1436340172') left top no-repeat;
  background-size: contain;
  display: inline-block; }
  @media (min-width: 992px) {
    .header-logo {
      top: 9px;
      left: 20px;
      width: 96px;
      height: 44px; } }

html {
  width: 100%;
  height: 100%; }

/*body {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: none;
  font-size: 16px;
  font-family: "微軟正黑體", "Microsoft Jhenghei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #000; }*/

.main-container {
  position: relative;
  width: 100%;
  height: calc(100% - 88px); }
  @media (min-width: 992px) {
    .main-container {
      padding-bottom: 0;
      height: calc(100% - 108px); } }
  .main-container .main-gallery__wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: top center;
    background-repeat: no-repeat;
    overflow: hidden; }
  .main-container .main-gallery__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top center; }
    .main-container .main-gallery__bg.face {
      background-image: url("img/index-img3.jpg"); }
    .main-container .main-gallery__bg.love {
      background-image: url("img/love-bg.jpg"); }
    .main-container .main-gallery__bg.friend {
      background-image: url("img/index-img5.jpg"); }
    .main-container .main-gallery__bg.self {
      background-image: url("img/self-bg.jpg"); }
    .main-container .main-gallery__bg.video {
      background-image: url("img/index-img2.jpg"); }
  .main-container .content-container {
    position: relative;
    margin: 0 auto;
    top: 50%;
    width: 284px;
    height: 315px;
    z-index: 1;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); }
   /* @media (min-width: 786px) {
      .main-container .content-container {
        width: 740px;
        height: 550px; } }*/
    @media (min-width: 992px) {
      .main-container .content-container {
        width: 960px; } }

.next-sprite, .next-btn {
  background-image: url('img/next-s684ddc3b68.png');
  background-repeat: no-repeat; }

.next-btn {
  background-position: 0 -73px;
  height: 73px;
  width: 192px; }
  .next-btn:hover, .next-btn.btn-hover {
    background-position: 0 0; }

.done-sprite, .done-btn {
  background-image: url('img/done-s15b7200562.png');
  background-repeat: no-repeat; }

.done-btn {
  background-position: 0 -73px;
  height: 73px;
  width: 192px; }
  .done-btn:hover, .done-btn.btn-hover {
    background-position: 0 0; }

.share-sprite, .share-btn {
  background-image: url('img/share-s620e82e7d6.png');
  background-repeat: no-repeat; }

.share-btn {
  background-position: 0 -73px;
  height: 73px;
  width: 319px; }
  .share-btn:hover, .share-btn.btn-hover {
    background-position: 0 0; }

.back-sprite, .back-btn {
  background-image: url('img/back-sac33c8ab8c.png');
  background-repeat: no-repeat; }

.back-btn {
  background-position: 0 -73px;
  height: 73px;
  width: 155px; }
  .back-btn:hover, .back-btn.btn-hover {
    background-position: 0 0; }

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden; }

#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  max-width: none; }

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%; }

#cboxMiddleLeft, #cboxBottomLeft {
  clear: left; }

#cboxContent {
  position: relative; }

#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

#cboxTitle {
  margin: 0; }

#cboxLoadingOverlay, #cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
  cursor: pointer; }

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
  -ms-interpolation-mode: bicubic; }

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px; }

#colorbox, #cboxContent, #cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; }

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
  background: #000; }

#colorbox {
  outline: 0; }

#cboxTopCenter {
  height: 28px; }

#cboxContent {
  background: transparent;
  overflow: hidden; }

.cboxIframe {
  background: transparent; }

#cboxError {
  padding: 50px;
  border: 1px solid #ccc; }

#cboxTitle {
  position: absolute;
  bottom: 4px;
  left: 0;
  text-align: center;
  width: 100%;
  color: #949494; }

#cboxCurrent {
  position: absolute;
  bottom: 4px;
  left: 58px;
  color: #949494; }

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  width: auto;
  background: none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
  outline: 0; }

#cboxSlideshow {
  position: absolute;
  bottom: 4px;
  right: 30px;
  color: #0092ef; }

#cboxPrevious {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 25px;
  text-indent: -9999px; }
  #cboxPrevious:hover {
    background-position: -75px -25px; }

#cboxNext {
  position: absolute;
  bottom: 0;
  left: 27px;
  width: 25px;
  height: 25px;
  text-indent: -9999px; }
  #cboxNext:hover {
    background-position: -50px -25px; }

#cboxClose {
  position: absolute;
  top: -8px;
  right: 8%;
  width: 117px;
  height: 42px;
  background-image: url('img/close.png?1436340175');
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: -9999px;
  z-index: 1000; }

.article #cboxClose {
  top: 56px; }

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF); }

/* =======================
   modules/cover
   ======================= */
.main-cover {
  position: absolute;
  width: 100%;
  height: 100%; }
  .main-cover.cover-index {
    background: url('img/cover-bg.png?1436340173') left top repeat; }
  .main-cover.cover-sub {
    background: url('img/cover-bg2.png?1436340175') left top repeat; }

/* =======================
   modules/img
   ======================= */
/*.logo {
  width: 100%;
  max-width: 96px;
  max-height: 44px; }
  @media (min-width: 992px) {
    .logo {
      width: auto; } }
*/
.nav-wrapper {
  position: absolute;
  top: 20%;
  right: 20px;
  width: 200px; }
  @media (min-width: 992px) {
    .nav-wrapper {
      top: 20px;
      right: 17px;
      width: 255px; } }
  .nav-wrapper li {
    position: relative;
    margin-right: 4%;
    display: inline-block; }
    .nav-wrapper li:nth-child(3) {
      margin-right: 0; }
    @media (min-width: 992px) {
      .nav-wrapper li {
        margin-right: 17px; }
        .nav-wrapper li:hover > a {
          will-change: top;
          top: -3px; } }
  .nav-wrapper a {
    position: relative;
    top: 0;
    background-size: contain;
    display: inline-block;
    -moz-transition: top 0.2s linear;
    -o-transition: top 0.2s linear;
    -webkit-transition: top 0.2s linear;
    transition: top 0.2s linear; }
  .nav-wrapper .nav-more {
    width: 95.5px;
    height: 19.5px;
    background: transparent url('img/time.png?1436340173') left top no-repeat;
    background-size: contain;
    display: inline-block; }
    @media (min-width: 992px) {
      .nav-wrapper .nav-more {
        width: 110px;
        height: 23px; } }
  .nav-wrapper .nav-home {
    width: 70px;
    height: 18.5px;
    background: transparent url('img/home.png?1436340173') left top no-repeat;
    background-size: contain;
    display: inline-block; }
    @media (min-width: 992px) {
      .nav-wrapper .nav-home {
        width: 80px;
        height: 21px; } }
  .nav-wrapper .nav-fb {
    width: 8px;
    height: 15px;
    background: transparent url('img/fb.png?1436340174') left top no-repeat;
    background-size: contain;
    display: inline-block; }
    @media (min-width: 992px) {
      .nav-wrapper .nav-fb {
        width: 16px;
        height: 18px; } }

.box {
  position: relative;
  /*margin-top: 20px;*/ }
  .box .video-frame {
    position: absolute;
    width: 100%;
	height: 100%;}
  .box .yu-wrapper {
    position: relative;
    margin: 4% 11%;
    width: 78%; }
    @media (min-width: 786px) {
      .box .yu-wrapper {
        margin: 4% 6%;
        width: 88%; } }
  .box .yu-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden; }
    .box .yu-container iframe, .box .yu-container object, .box .yu-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }

/* ==|====================
   pages/face
   ======================= */
.face {
  position: relative; }
  @media (max-height: 450px) {
    .face {
      height: 550px; } }
  @media (min-width: 786px) and (max-height: 820px) {
    .face {
      height: 900px; } }
  .face .content-container {
    min-width: 320px;
    width: 78%;
    height: auto; }
    @media (min-width: 786px) {
      .face .content-container {
        width: 770px; } }
    @media (min-width: 992px) {
      .face .content-container {
        width: 93%;
        max-width: 996px; } }
  .face .respect-list {
    position: relative;
    margin: 0 auto;
    width: 89%; }
    @media (min-width: 786px) {
      .face .respect-list {
        width: 96%; } }
    @media (min-width: 992px) {
      .face .respect-list {
        width: 100%;
        max-width: 930px; } }
    .face .respect-list li {
      margin: 0 0 10px 0;
      display: inline-block;
      width: 100%;
      min-width: 284px; }
      @media (min-width: 786px) {
        .face .respect-list li {
          min-width: 225px;
          width: 225px;
          margin: 0 15px 0 0;
          height: 544px; } }
      @media (min-width: 992px) {
        .face .respect-list li {
          width: 293px; } }
      .face .respect-list li:last-child {
        margin: 0; }
      .face .respect-list li > a {
        float: left;
        position: relative;
        width: 100%;
        height: 100%;
        background-size: cover;
        opacity: .8;
        -moz-transition: opacity 0.3s linear;
        -o-transition: opacity 0.3s linear;
        -webkit-transition: opacity 0.3s linear;
        transition: opacity 0.3s linear; }
        .face .respect-list li > a:hover {
          will-change: opacity;
          opacity: 1; }
        @media (min-width: 786px) {
          .face .respect-list li > a {
            min-width: 205px;
            width: 100%; } }
        @media (min-width: 992px) {
          .face .respect-list li > a {
            max-width: 293px; } }
        .face .respect-list li > a img {
          position: absolute; }
  .face .respect-love {
    width: 284px;
    height: 97.5px;
    background: transparent url('img/love-pic-s.png?1435892245') left top no-repeat;
    background-size: contain;
    display: inline-block; }
    @media (min-width: 786px) {
      .face .respect-love {
        background: url('img/love-pic.png?1435890428') no-repeat;
        width: 293px;
        height: 544px;
        display: block; } }
  .face .respect-friend {
    width: 284px;
    height: 97.5px;
    background: transparent url('img/friend-pic-s.png?1436340173') left top no-repeat;
    background-size: contain;
    display: inline-block; }
    @media (min-width: 786px) {
      .face .respect-friend {
        background: url('img/friend-pic.png?1436340175') no-repeat;
        width: 293px;
        height: 544px;
        display: block; } }
  .face .respect-self {
    width: 284px;
    height: 97.5px;
    background: transparent url('img/self-pic-s.png?1435892324') left top no-repeat;
    background-size: contain;
    display: inline-block; }
    @media (min-width: 786px) {
      .face .respect-self {
        background: url('img/self-pic.png?1435891799') no-repeat;
        width: 293px;
        height: 544px;
        display: block; } }
  .face .respect-item__love {
    top: 57px;
    left: -10px;
    width: 42px; }
    @media (min-width: 786px) {
      .face .respect-item__love {
        bottom: -23px;
        left: -23px;
        width: 84px; } }
  .face .respect-item__friend {
    top: -19px;
    right: 9px;
    width: 31px; }
    @media (min-width: 786px) {
      .face .respect-item__friend {
        top: -29px;
        right: 24px;
        width: 63px; } }
  .face .respect-item__self {
    top: 16px;
    right: -14px;
    width: 60px; }
    @media (min-width: 786px) {
      .face .respect-item__self {
        top: 43px;
        right: -19px;
        width: 120px; } }
  .face .respect-word__love {
    bottom: 5px;
    right: 9px;
    width: 90px; }
    @media (min-width: 786px) {
      .face .respect-word__love {
        bottom: 38px;
        right: 7px;
        width: 181px; } }
  .face .respect-word__friend {
    top: 38px;
    left: 9px;
    width: 89px; }
    @media (min-width: 786px) {
      .face .respect-word__friend {
        top: 25px;
        left: 4px;
        width: 179px; } }
  .face .respect-word__self {
    top: 47px;
    right: 8px;
    width: 89px; }
    @media (min-width: 786px) {
      .face .respect-word__self {
        top: 102px;
        right: 14px;
        width: 178px; } }

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) {
  .face {
    height: 200%; } }
/* ==|====================
   pages/index
   ======================= */
.index {
  position: relative; }
  @media (max-height: 450px) {
    .index {
      height: 550px; } }
  @media (min-width: 786px) and (max-height: 820px) {
    .index {
      height: 900px; } }
  .index .index-video__wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .index #index-gallery {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: top center;
    background-repeat: no-repeat;
    overflow: hidden; }
    .index #index-gallery > div {
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center center; }
      .index #index-gallery > div.gallery-1 {
        -webkit-animation: fade 20s 20s infinite;
        background-image: url('img/index-img1.jpg?1436340172'); }
      .index #index-gallery > div.gallery-2 {
        -webkit-animation: fade 20s 16s infinite;
        background-image: url('img/index-img2.jpg?1436340172'); }
      .index #index-gallery > div.gallery-3 {
        -webkit-animation: fade 20s 12s infinite;
        background-image: url('img/index-img3.jpg?1436340172'); }
      .index #index-gallery > div.gallery-4 {
        -webkit-animation: fade 20s 8s infinite;
        background-image: url('img/index-img4.jpg?1436340172'); }
      .index #index-gallery > div.gallery-5 {
        -webkit-animation: fade 20s 4s infinite;
        background-image: url('img/index-img5.jpg?1436340172'); }
      .index #index-gallery > div.gallery-6 {
        -webkit-animation: fade 20s 0s infinite;
        background-image: url('img/index-img6.jpg?1436340172'); }
    @media (min-width: 992px) {
      .index #index-gallery {
        display: none; } }
  .index #index-player {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: top center;
    background-repeat: no-repeat;
    overflow: hidden; }
    .index #index-player > .replace-img {
      position: absolute;
      width: 100%; }
    .index #index-player .ytplayer-container {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      min-width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 0; }
    .index #index-player .ytplayer-player {
      position: absolute; }
  .index .index-content-container {
    position: relative;
    margin: 0 auto;
    top: 50%;
    width: 80%;
    height: 325px;
    z-index: 1;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); }
    @media (min-width: 786px) {
      .index .index-content-container {
        width: 594px;
        height: 560px; } }
  .index .index-title {
    position: relative;
    margin: 0 auto;
    width: 100%;
    display: inline-block; }
  .index .index-slogan {
    position: relative;
    margin: 0 auto;
    width: 320px;
    color: #F1DBA9;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 20px;
    text-align: center;
    text-shadow: 0px 0px 3px #000,0px 0px 3px #000,0px 0px 4px #000,0px 0px 5px #000,0px 0px 6px #000; }
    @media (min-width: 320px) {
      .index .index-slogan {
        margin: 0 0 0 -11%; } }
    @media (min-width: 375px) {
      .index .index-slogan {
        margin: 0 auto; } }
    @media (min-width: 786px) {
      .index .index-slogan {
        margin: 0 auto;
        width: 425px;
        font-size: 17px;
        line-height: 25px; } }
  .index .go-test {
    position: relative;
    margin: 0 auto 0;
    background: url('img/btn.png?1436340173') no-repeat;
    width: 154px;
    height: 144px;
    display: block;
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    background-size: contain; }
    .index .go-test > img {
      position: absolute;
      top: 90px;
      left: 70px; }
      @media (min-width: 786px) {
        .index .go-test > img {
          top: 75px;
          left: 60px; } }
    @media (min-width: 786px) {
      .index .go-test {
        margin: 20px auto 0;
        width: 136px;
        height: 134px;
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1); } }

@-webkit-keyframes fade {
  0% {
    opacity: 1; }
  15% {
    opacity: 1; }
  25% {
    opacity: 0; }
  90% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) {
  .index {
    height: 166%; }

  .index .index-content-container {
    margin: -10px auto;
    top: 0;
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }
/* ==|====================
   pages/face
   ======================= */
.question {
  position: relative; }
  @media (max-height: 440px) {
    .question {
      height: 470px; } }
  .question .content-container {
    height: 430px; }
  .question .question-block {
    position: absolute;
    width: 100%;
    height: 430px;
    opacity: 0;
    visibility: hidden;
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -moz-transition: opacity 0.65s linear, visibility 0.6s;
    -o-transition: opacity 0.65s linear, visibility 0.6s;
    -webkit-transition: opacity 0.65s linear, visibility 0.6s;
    transition: opacity 0.65s linear, visibility 0.6s; }
    @media (min-width: 786px) {
      .question .question-block {
        left: 26px;
        width: 760px;
        height: 540px; } }
    @media (min-width: 992px) {
      .question .question-block {
        width: 920px; } }
    .question .question-block.show {
      will-change: opacity, visibility;
      opacity: 1;
      visibility: visible;
      z-index: 1; }
    .question .question-block .q-title {
      position: relative;
      margin: 29px auto 0;
      width: 246px;
      display: block; }
      @media (min-width: 786px) {
        .question .question-block .q-title {
          width: 492px; } }
    .question .question-block .q-number {
      position: relative;
      margin: 20px auto 0;
      width: 41px;
      display: block; }
      @media (max-height: 440px) {
        .question .question-block .q-number {
          margin: 10px auto 0; } }
      @media (min-width: 786px) {
        .question .question-block .q-number {
          width: 82px; } }
    .question .question-block .q-container {
      position: relative;
      margin: 30px auto 0;
      width: 100%; }
      @media (max-height: 440px) {
        .question .question-block .q-container {
          margin: 22px auto 0; } }
      @media (min-width: 786px) {
        .question .question-block .q-container {
          width: 650px; } }
    .question .question-block .q-list-title {
      position: relative;
      color: #fff;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 1px;
      text-shadow: 0px 0px 3px #000,0px 0px 3px #000,0px 0px 4px #000,0px 0px 5px #000,0px 0px 6px #000; }
      @media (min-width: 786px) {
        .question .question-block .q-list-title {
          font-size: 24px;
          line-height: 30px; } }
    .question .question-block .q-list {
      position: relative;
      margin-top: 20px;
      margin-left: 35px; }
      @media (min-width: 786px) {
        .question .question-block .q-list {
          margin-top: 42px; } }
    .question .question-block input[type="radio"] {
      display: none; }
      .question .question-block input[type="radio"]:checked + label {
        will-change: background-color;
        background-color: #fff; }
    .question .question-block .rb-label {
      float: left;
      width: 20px;
      height: 20px;
      background-color: transparent;
      border: 2px solid #fff;
      border-radius: 50%;
      cursor: pointer;
      -moz-transition: background-color 0.3s linear;
      -o-transition: background-color 0.3s linear;
      -webkit-transition: background-color 0.3s linear;
      transition: background-color 0.3s linear; }
    .question .question-block .q-wrap {
      position: relative;
      margin-bottom: 16px; }
    .question .question-block .q-label {
      display: inline; }
    .question .question-block .q-content {
      position: relative;
      width: 220px;
      margin-left: 8px;
      color: #fff;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 1px;
      display: inline-block;
      text-shadow: 0px 0px 3px #000,0px 0px 3px #000,0px 0px 4px #000,0px 0px 5px #000,0px 0px 6px #000; }
      @media (min-width: 786px) {
        .question .question-block .q-content {
          top: 0;
          width: initial;
          font-size: 22px; } }
    .question .question-block .next-btn, .question .question-block .done-btn {
      position: relative;
      margin: 0px auto 0;
      width: 96px;
      height: 36px;
      display: block;
      background-size: cover;
      background-position: 0 -36px; }
      .question .question-block .next-btn:hover, .question .question-block .done-btn:hover {
        background-position: 0 0; }
      @media (min-width: 786px) {
        .question .question-block .next-btn, .question .question-block .done-btn {
          margin: 6% auto 0;
          width: 192px;
          height: 73px;
          background-position: 0 -73px; } }
    .question .question-block .q-element {
      position: absolute;
      display: none; }
      @media (min-width: 786px) {
        .question .question-block .q-element {
          display: block; } }
      .question .question-block .q-element.teapot-1 {
        width: 112px;
        height: 134px;
        background-image: url('img/item1-2.png?1436340173'); }
      .question .question-block .q-element.teapot-2 {
        width: 92px;
        height: 111px;
        background-image: url('img/item3-3.png?1436340172'); }
      .question .question-block .q-element.book-1 {
        width: 120px;
        height: 73px;
        background-image: url('img/item1-3.png?1436340174'); }
      .question .question-block .q-element.book-2 {
        width: 120px;
        height: 73px;
        background-image: url('img/item2-2.png?1436340175'); }
      .question .question-block .q-element.cup-1 {
        width: 64px;
        height: 69px;
        background-image: url('img/item1-1.png?1436340173'); }
      .question .question-block .q-element.cup-2 {
        width: 64px;
        height: 68px;
        background-image: url('img/item2-3.png?1436340174'); }
      .question .question-block .q-element.cup-3 {
        width: 65px;
        height: 68px;
        background-image: url('img/item3-2.png?1436340172'); }
      .question .question-block .q-element.shirt-1 {
        width: 63px;
        height: 118px;
        background-image: url('img/item2-1.png?1436340175'); }
      .question .question-block .q-element.shirt-2 {
        width: 63px;
        height: 118px;
        background-image: url('img/item3-1.png?1436340172'); }
    @media (min-width: 786px) {
      .question .question-block .item-pos-1 {
        top: 120px;
        left: 6px; } }
    @media (min-width: 992px) {
      .question .question-block .item-pos-1 {
        left: 32px; } }
    @media (min-width: 786px) {
      .question .question-block .item-pos-2 {
        top: 109px;
        right: 23px; } }
    @media (min-width: 992px) {
      .question .question-block .item-pos-2 {
        right: 50px; } }
    @media (min-width: 786px) {
      .question .question-block .item-pos-3 {
        right: 111px;
        bottom: 26px; } }
    @media (min-width: 992px) {
      .question .question-block .item-pos-3 {
        right: 138px; } }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .question-block {
    max-height: 530px; } }
@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) {
  .question {
    height: 166%; } }
/* ==|====================
   pages/result
   ======================= */
.result {
  position: relative;
  height: 890px; }
  @media (min-width: 992px) {
    .result {
      height: inherit; } }
  .result .content-container {
    margin: 20px auto 0;
    top: 0;
    width: 320px;
    height: auto;
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
    @media (min-width: 992px) {
      .result .content-container {
        top: 50%;
        width: 960px;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%); } }
  .result .result-banner {
    position: relative;
    border: 1px solid #8D8175;
    width: 100%;
    height: 102px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 992px) {
      .result .result-banner {
        margin: 0 auto;
        width: 799px;
        height: 204px;
        background-size: inherit; } }
    .result .result-banner__content {
      position: relative;
      top: 142px;
      color: #fff;
      font-size: 24px;
      line-height: 30px;
      letter-spacing: 2px;
      text-align: center;
      display: none; }
      @media (min-width: 992px) {
        .result .result-banner__content {
          display: block; } }
    .result .result-banner.love-banner-1 {
      background-image: url('img/love-header1.png?1435895817'); }
    .result .result-banner.love-banner-2 {
      background-image: url('img/love-header2.png?1435896334'); }
    .result .result-banner.love-banner-3 {
      background-image: url('img/love-header3.png?1435896365'); }
    .result .result-banner.friend-banner-1 {
      background-image: url('img/friend-header1.png?1435896444'); }
    .result .result-banner.friend-banner-2 {
      background-image: url('img/friend-header2.png?1435896578'); }
    .result .result-banner.friend-banner-3 {
      background-image: url('img/friend-header3.png?1436340174'); }
    .result .result-banner.self-banner-1 {
      background-image: url('img/self-header1.png?1435896809'); }
    .result .result-banner.self-banner-2 {
      background-image: url('img/self-header2.png?1435896849'); }
    .result .result-banner.self-banner-3 {
      background-image: url('img/self-header3.png?1435897333'); }
  .result .result-banner-title {
    position: relative;
    color: #fff;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 2px;
    text-align: left; }
    @media (min-width: 992px) {
      .result .result-banner-title {
        display: none; } }
  .result .result-container {
    position: relative;
    margin: 0 auto;
    width: 320px; }
    @media (min-width: 992px) {
      .result .result-container {
        width: 800px; } }
  .result .result-content__wrapper {
    float: left;
    position: relative;
    margin-top: 15px;
    left: 3px; }
    @media (min-width: 992px) {
      .result .result-content__wrapper {
        margin-top: 32px;
        width: 495px; } }
  .result .result-video-frame {
    margin-top: 14px;
    float: right;
    position: relative;
    width: 320px;
    height: 223px;
    display: block; }
    .result .result-video-frame > img {
      width: 100%;
      border: 1px solid #8D8175; }
    @media (min-width: 992px) {
      .result .result-video-frame {
        margin-top: 70px;
        width: 275px;
        height: 192px; } }
  .result .result-slogan {
    margin-top: 10px;
    color: #F8E3B9;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 2px;
    text-shadow: 0px 0px 3px #000,0px 0px 3px #000,0px 0px 4px #000,0px 0px 5px #000,0px 0px 6px #000; }
    @media (min-width: 992px) {
      .result .result-slogan {
        margin: 0;
        font-size: 16px;
        line-height: 25px;
        letter-spacing: 4px; } }
  .result .result-content__text {
    margin-top: 20px;
    color: #F8E3B9;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 1px;
    text-shadow: 0px 0px 3px #000,0px 0px 3px #000,0px 0px 4px #000,0px 0px 5px #000,0px 0px 6px #000; }
    @media (min-width: 992px) {
      .result .result-content__text {
        line-height: 25px;
        font-size: 15px; } }
  .result .share-btn {
    position: relative;
    margin: 15px auto 0;
    width: 160px;
    height: 37px;
    display: block;
    background-size: cover;
    background-position: 0 -36px; }
    .result .share-btn:hover {
      background-position: 0 0; }
    @media (min-width: 992px) {
      .result .share-btn {
        top: 20px;
        margin: 0;
        width: 319px;
        height: 73px;
        background-position: 0 -72px;
        display: inline-block; } }
  .result .back-btn {
    position: relative;
    margin: 10px auto 0;
    width: 78px;
    height: 37px;
    display: block;
    background-size: cover;
    background-position: 0 -36px; }
    .result .back-btn:hover {
      background-position: 0 0; }
    @media (min-width: 992px) {
      .result .back-btn {
        margin: 0 0 0 10px;
        top: 20px;
        width: 155px;
        height: 73px;
        background-position: 0 -72px;
        display: inline-block; } }

/* ==|====================
   pages/face
   ======================= */
.video {
  position: relative; }
  @media (max-height: 450px) {
    .video {
      /*height: 550px;*/ } }
  @media (min-width: 786px) and (max-height: 820px) {
    .video {
      /*height: 900px;*/ } }
  .video .content-container {
    min-width: 320px;
    width: 78%;}
    @media (min-width: 786px) {
      .video .content-container {
        width: 770px; } }
    @media (min-width: 992px) {
      .video .content-container {
        width: 960px; } }
  .video .video-list {
    position: relative;
    margin: 0 auto;
    width: 89%; background-color: #FFDDC7; padding:10px 0;}
    @media (min-width: 100px) {
      .video .video-list {
        width: 100%; } }
    .video .video-list li {
      margin: 0 0 10px 0;
      display: inline-block;
      width: 100%;
      min-width: 284px; }
      @media (min-width: 786px) {
        .video .video-list li {
          margin: 0 15px 0 0;
          min-width: 178px;
          width: 178px; } }
      @media (min-width: 100px) {
        .video .video-list li {
          margin: 0;
min-width: 118px;
    width: 118px; } }
      @media (min-width: 801px) {
        .video .video-list li {
          width: 220px; } }
      .video .video-list li:last-child {
        margin: 0; }
      .video .video-list li > a {
        float: left;
        position: relative;
        background-size: cover;
        opacity: .8;
        width: 100%;
        min-height: 75px;
        height: 100%;
        -moz-transition: opacity 0.3s linear;
        -o-transition: opacity 0.3s linear;
        -webkit-transition: opacity 0.3s linear;
        transition: opacity 0.3s linear; }
        .video .video-list li > a:hover {
          will-change: opacity;
          opacity: 1; }
        /*@media (min-width: 786px) {
          .video .video-list li > a {
            width: 178px;
            height: 554px; } }*/
      @media only screen and (min-width: 320px) and (max-width: 801px){
      .video .video-list li > a {
        min-height: 25px;
        height: 100%;
		  }}
        @media (min-width: 992px) {
          .video .video-list li > a {
            width: 220px; } }
        .video .video-list li > a > span {
          position: absolute; }
        .video .video-list li > a .video-word {
          bottom: 24px;
          left: 24px; }
        .video .video-list li > a .video-word-s {
          bottom: 0px;
          left: 3px; }
  .video .video-1 {
    width: 284px;
    height: 75px;
    background: transparent url('img/v1-s.png?1435893092') left top no-repeat;
    background-size: contain;
    display: inline-block; }
/*    @media (min-width: 786px) {
      .video .video-1 {
        background: url('img/v1.png?1435892386') no-repeat;
        width: 220px;
        height: 544px;
        display: block; } }*/
  .video .video-2 {
    width: 284px;
    height: 75px;
    background: transparent url('img/v2-s.png?1436340174') left top no-repeat;
    background-size: contain;
    display: inline-block; }
/*    @media (min-width: 786px) {
      .video .video-2 {
        background: url('img/v2.png?1436340173') no-repeat;
        width: 220px;
        height: 544px;
        display: block; } }*/
  .video .video-3 {
    width: 284px;
    height: 75px;
    background: transparent url('img/v3-s.png?1436340173') left top no-repeat;
    background-size: contain;
    display: inline-block; }
/*    @media (min-width: 786px) {
      .video .video-3 {
        background: url('img/v3.png?1435892483') no-repeat;
        width: 220px;
        height: 544px;
        display: block; } }*/
  .video .video-4 {
    width: 284px;
    height: 75px;
    background: transparent url('img/v4-s.png?1436340173') left top no-repeat;
    background-size: contain;
    display: inline-block; }
/*    @media (min-width: 786px) {
      .video .video-4 {
        background: url('img/v4.png?1436340173') no-repeat;
        width: 220px;
        height: 544px;
        display: block; } }*/
  .video .video-1-word {
    display: none; }
    /*@media (min-width: 786px) {
      .video .video-1-word {
        background: url('img/v1-w.png?1436340174') no-repeat;
        width: 25px;
        height: 253px;
        display: block;
        display: block; } }*/
    .video .video-1-word-s {
      width: 156.5px;
      height: 34.5px;
      background: transparent url('img/v1-w-s.png?1436340172') left top no-repeat;
      background-size: contain;
      display: inline-block; }
     /* @media (min-width: 786px) {
        .video .video-1-word-s {
          display: none; } }*/
  .video .video-2-word {
    display: none; }
   /* @media (min-width: 786px) {
      .video .video-2-word {
        background: url('img/v2-w.png?1436340174') no-repeat;
        width: 25px;
        height: 253px;
        display: block;
        display: block; } }*/
    .video .video-2-word-s {
      width: 156px;
      height: 34.5px;
      background: transparent url('img/v2-w-s.png?1436340174') left top no-repeat;
      background-size: contain;
      display: inline-block; }
     /* @media (min-width: 786px) {
        .video .video-2-word-s {
          display: none; } }*/
  .video .video-3-word {
    display: none; }
    /*@media (min-width: 786px) {
      .video .video-3-word {
        background: url('img/v3-w.png?1436340172') no-repeat;
        width: 25px;
        height: 253px;
        display: block;
        display: block; } }*/
    .video .video-3-word-s {
      width: 166px;
      height: 35px;
      background: transparent url('img/v3-w-s.png?1436340172') left top no-repeat;
      background-size: contain;
      display: inline-block; }
     /* @media (min-width: 786px) {
        .video .video-3-word-s {
          display: none; } }*/
  .video .video-4-word {
    display: none; }
  /*  @media (min-width: 786px) {
      .video .video-4-word {
        background: url('img/v4-w.png?1436340172') no-repeat;
        width: 25px;
        height: 213px;
        display: block;
        display: block; } }*/
    .video .video-4-word-s {
      width: 147.5px;
      height: 35px;
      background: transparent url('img/v4-w-s.png?1436340174') left top no-repeat;
      background-size: contain;
      display: inline-block; }
     /* @media (min-width: 786px) {
        .video .video-4-word-s {
          display: none; } }*/

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) {
.box .yu-wrapper {
    position: relative;
    margin: 3% 17%;
    width: 68%;
} 
/*.video {
    height: 200%; } */
}