@charset "UTF-8";
body {
  font-family: 微軟正黑體;
  width: 100%;
  font-size: 15px;
  background: url(../img/bg.jpg);
  line-height: 1.6; }

a {
  text-decoration: none;
  color: #4D4B45; }
  a:focus, a:hover, a:visited {
    text-decoration: none;
    color: #000;
    outline: none; }

.alert-text {
  color: red; }

.import-text {
  color: #EE8A19; }

.container {
  width: 100%; }
  .container.container-banner {
    padding-left: 0;
    padding-right: 0; }
    @media screen and (min-width: 992px) {
      .container.container-banner {
        padding-left: 15px;
        padding-right: 15px; } }
  @media screen and (min-width: 992px) {
    .container {
      width: 970px; } }
  @media screen and (min-width: 1200px) {
    .container {
      width: 1170px; } }

.btn {
  color: #fff; }
  .btn:focus, .btn:hover, .btn:visited {
    color: #fff; }
  .btn.red {
    background: #f47c64; }

#to-top {
  display: none;
  width: 45px;
  height: 45px;
  background-color: #f58009;
  border-radius: 50%;
  cursor: pointer;
  text-align: center;
  font-size: 20px;
  line-height: 40px;
  color: #fff;
  position: fixed;
  bottom: 126px;
  right: 10px;
  z-index: 4; }
  @media screen and (min-width: 380px) {
    #to-top {
      bottom: 100px; } }
  @media screen and (min-width: 992px) {
    #to-top {
      bottom: 20px;
      right: 50%;
      margin-right: -480px; } }
  @media screen and (min-width: 1085px) {
    #to-top {
      margin-right: -527px; } }
  @media screen and (min-width: 1200px) {
    #to-top {
      right: 50%;
      margin-right: -590px; } }
  @media screen and (min-width: 1300px) {
    #to-top {
      margin-right: -627px; } }
  #to-top.bot {
    position: absolute;
    bottom: auto;
    top: -170px; }
    @media screen and (min-width: 380px) {
      #to-top.bot {
        top: -142px; } }
    @media screen and (min-width: 992px) {
      #to-top.bot {
        right: 50%;
        top: -55px; } }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; }

/*firefox */
input[type=number] {
  -moz-appearance: textfield; }

header div.pc-header-nav:after, div.pc-header-nav.index:after, div.pc-header-nav.index .header-nav:after, .partner-main-area .partner-class-mb-area:after, .partner-box-area:after, .teach543-main-area:after, .quiz-input-main-area:after, .quiz-intro-area .quiz-intro-right:after, .time-line-area:after, .time-line-box:after, .picnic-main-area:after, .survey-vote-area:after, .survey-intro-area .intro-top-block.block-5:after, .survey-form-area .form-group:after, .survey-form-area .form-group .vcode-area:after, .survey-result-area:after, .child-angry-page .angry-block .step:after, .family-accout-page .fa-info-area:after, .family-accout-page .fa-info-area .account-info-area:after, .family-accout-page .fa-record-area:after, .family-accout-page .account-intro-box .intro-top-block.block-5:after {
  content: '';
  display: block;
  clear: both; }

.page-article-area h1 {
  line-height: 1.6; }

.page-article-area h2 {
  line-height: 1.6; }

.page-article-area h3 {
  line-height: 1.6; }

.page-article-area h4 {
  line-height: 1.6; }

.page-article-area h5 {
  line-height: 1.6; }

.page-article-area h6 {
  line-height: 1.6; }

/*
=================================================================
(#m02-1hds) HEADER
=================================================================
*/
header {
  position: relative;
  z-index: 5;
  background: url(../img/menu_bg.jpg);
  border-bottom: 6px solid #FF9B37; }
  header.index {
    background: url(../img/bg.jpg);
    border-bottom: none; }
  header div.pc-header-nav {
    padding: 20px 0; }
    header div.pc-header-nav .header-nav {
      list-style: none;
      padding: 0;
      margin: 0px;
      position: relative;
      float: left; }
      header div.pc-header-nav .header-nav li {
        display: inline-block;
        font-size: 0; }
        header div.pc-header-nav .header-nav li a {
          display: inline-block;
          text-decoration: none;
          font-size: 0;
          padding-right: 10px; }
          header div.pc-header-nav .header-nav li a img {
            width: auto; }
          @media screen and (min-width: 1200px) {
            header div.pc-header-nav .header-nav li a {
              padding-right: 30px; } }
    header div.pc-header-nav .header-btn {
      list-style: none;
      padding: 0;
      margin: 5px -15px 0;
      position: relative;
      float: right; }
      @media screen and (min-width: 1200px) {
        header div.pc-header-nav .header-btn {
          margin: 5px 0px 0; } }
      header div.pc-header-nav .header-btn li {
        display: inline-block;
        font-size: 0; }
        header div.pc-header-nav .header-btn li a {
          display: inline-block;
          text-decoration: none;
          font-size: 0;
          padding: 0 3px; }
          header div.pc-header-nav .header-btn li a img {
            width: 36px; }
      header div.pc-header-nav .header-btn .share-btn img {
        width: 36px; }
  header div.mb-title {
    position: fixed;
    z-index: 100;
    width: 100%;
    padding: 0px 0px;
    background-color: #fff;
    box-shadow: 1px 1px 10px -2px #aaa;
    margin-left: -15px; }
    header div.mb-title.open {
      border-bottom: 1px solid #ccc;
      box-shadow: none; }
    header div.mb-title img {
      max-width: 100%; }
    header div.mb-title .mb-logo-area {
      float: left;
      margin-top: 5px;
      margin-left: 15px; }
    header div.mb-title .button-area {
      float: right; }
    header div.mb-title div.xs-menu {
      width: 35px;
      height: 50px;
      padding-top: 15px;
      margin-right: 15px;
      text-align: center;
      cursor: pointer; }
      header div.mb-title div.xs-menu .icon-wrapper {
        margin: 0px auto 5px;
        width: 35px;
        position: relative;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: 400ms ease-in-out;
        transition: 400ms ease-in-out; }
        header div.mb-title div.xs-menu .icon-wrapper span {
          display: block;
          position: absolute;
          height: 5px;
          width: 100%;
          background: #f58009;
          opacity: 1;
          right: 0;
          -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
          -webkit-transition: 400ms ease-in-out;
          transition: 400ms ease-in-out; }
          header div.mb-title div.xs-menu .icon-wrapper span:nth-child(1) {
            top: 0px; }
          header div.mb-title div.xs-menu .icon-wrapper span:nth-child(2) {
            top: 10px; }
          header div.mb-title div.xs-menu .icon-wrapper span:nth-child(3) {
            top: 20px; }
      header div.mb-title div.xs-menu.active span:nth-child(1) {
        width: 50%; }
      header div.mb-title div.xs-menu.active span:nth-child(2) {
        width: 75%; }
      header div.mb-title div.xs-menu.active span:nth-child(3) {
        width: 100%; }
  header div.is-sticky div.xs-title {
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15); }

div.pc-header-nav.index {
  margin-top: 15px; }
  div.pc-header-nav.index .header-nav {
    list-style: none;
    padding: 0;
    margin: 0px;
    position: relative;
    display: flex; }
    div.pc-header-nav.index .header-nav li {
      flex: 1;
      display: flex;
      justify-content: center;
      font-size: 0; }
      div.pc-header-nav.index .header-nav li a {
        width: 100%;
        text-align: center;
        text-decoration: none;
        font-size: 0; }
  div.pc-header-nav.index .header-btn {
    list-style: none;
    padding: 0;
    margin: 0px 45px;
    position: relative;
    float: right; }
    div.pc-header-nav.index .header-btn li {
      display: block; }
      div.pc-header-nav.index .header-btn li a {
        display: inline-block;
        text-decoration: none;
        font-size: 0;
        padding: 5px 0; }
    div.pc-header-nav.index .header-btn li + li {
      margin-top: 8px; }

.upbring-call-index {
  display: none;
  background-color: #FF9B37;
  border-radius: 50px;
  border: 2px solid #fff;
  color: #000;
  font-weight: bold;
  padding: 30px 30px 15px;
  position: fixed;
  top: -25px;
  left: calc(50% + 50px);
  z-index: 101; }
  @media screen and (min-width: 992px) {
    .upbring-call-index {
      display: inline-block; } }
  @media screen and (min-width: 1200px) {
    .upbring-call-index {
      left: calc(50% + 155px); } }
  .upbring-call-index .frontText {
    font-size: 14px;
    vertical-align: middle; }
  .upbring-call-index .backText {
    font-size: 15px;
    vertical-align: middle; }
  .upbring-call-index img {
    vertical-align: middle; }

.upbring-call {
  display: none;
  background-color: #FF9B37;
  border-radius: 50px;
  border: 2px solid #fff;
  color: #000;
  font-weight: bold;
  padding: 30px 30px 15px;
  position: absolute;
  top: -25px;
  left: calc(50% + 50px);
  z-index: 4; }
  @media screen and (min-width: 992px) {
    .upbring-call {
      display: inline-block; } }
  @media screen and (min-width: 1200px) {
    .upbring-call {
      left: calc(50% + 155px); } }
  .upbring-call.fix {
    position: fixed; }
  .upbring-call .frontText {
    font-size: 14px;
    vertical-align: middle; }
  .upbring-call .backText {
    font-size: 15px;
    vertical-align: middle; }
  .upbring-call img {
    vertical-align: middle; }

.black-background.show {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 5;
  background: rgba(0, 0, 0, 0.6); }

div#mb-sidebar {
  display: none;
  position: fixed;
  width: 100%;
  top: -100%;
  z-index: 5;
  background: url("../img/bg.jpg"); }
  div#mb-sidebar.hidden-sidebar {
    display: none;
    top: -100%;
    -webkit-animation-name: hiddensidebar;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.5s;
    animation-name: hiddensidebar;
    animation-timing-function: ease-in;
    animation-duration: 0.5s; }
  div#mb-sidebar.show-sidebar {
    display: block;
    top: 50px;
    -webkit-animation-name: showsidebar;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.5s;
    animation-name: showsidebar;
    animation-timing-function: ease-in;
    animation-duration: 0.5s; }
  @media screen and (min-width: 992px) {
    div#mb-sidebar {
      display: none; }
      div#mb-sidebar.show-sidebar {
        display: none; } }

div.main-area {
  padding-top: 55px;
  position: relative; }
  @media screen and (min-width: 992px) {
    div.main-area {
      padding-top: 0; } }

/* Chrome, Safari, Opera */
@-webkit-keyframes hiddensidebar {
  0% {
    top: 50px; }
  100% {
    top: -100%; } }

/* Standard syntax */
@keyframes hiddensidebar {
  0% {
    top: 50px; }
  100% {
    top: -100%; } }

/* Chrome, Safari, Opera */
@-webkit-keyframes showsidebar {
  0% {
    top: -100%; }
  100% {
    top: 50px; } }

/* Standard syntax */
@keyframes showsidebar {
  0% {
    top: -100%; }
  100% {
    top: 50px; } }

div.sidebar-content {
  padding-bottom: 50px;
  background: url(../img/bg.jpg); }

div#a-cart-sticky-header {
  height: 50px; }

.title-btn-area {
  padding: 30px 30px 0; }
  .title-btn-area .title-btn-border {
    padding-bottom: 30px;
    border-bottom: 8px solid transparent;
    border-image: url(../img/header/line_2x.png) 12 round;
    border-top: 0px; }
  .title-btn-area .title-btn-box {
    margin: 0 auto;
    text-align: left; }
    .title-btn-area .title-btn-box:after {
      content: '';
      display: block;
      clear: both; }
    .title-btn-area .title-btn-box .title-btn {
      padding: 0 8px; }
      @media screen and (min-width: 480px) {
        .title-btn-area .title-btn-box .title-btn {
          padding: 0 25px; } }
      .title-btn-area .title-btn-box .title-btn a {
        display: inline-block; }
        .title-btn-area .title-btn-box .title-btn a img {
          display: block;
          margin: auto;
          width: 54px; }
      .title-btn-area .title-btn-box .title-btn.home a {
        width: 165px;
        height: 72px;
        background: url("../img/header/page_menu/home_xs_2x.png") center no-repeat;
        background-size: 165px 72px;
        position: relative;
        margin-left: calc(50% - 34px); }
        .title-btn-area .title-btn-box .title-btn.home a:before {
          content: '';
          position: absolute;
          top: 18px;
          left: -53px;
          background: url("../img/header/page_menu/home_btn.png") center no-repeat;
          background-size: 37px;
          width: 37px;
          height: 37px; }
      .title-btn-area .title-btn-box .title-btn.home:hover a {
        background: url("../img/header/page_menu/home_hover_2x.png") center no-repeat;
        background-size: 165px 72px; }

.sidebar-nav {
  list-style: none;
  margin: 30px 0 30px;
  padding: 0px 0 0; }
  .sidebar-nav li {
    padding: 20px 30px; }
    .sidebar-nav li a {
      display: block;
      width: 165px;
      height: 72px;
      margin-left: -32px;
      text-decoration: none;
      font-size: 0;
      position: relative;
      left: 50%; }
      .sidebar-nav li a:before {
        content: '';
        display: block;
        width: 92px;
        height: 72px;
        background-size: 100%;
        position: absolute;
        top: 0;
        left: -105px; }
    .sidebar-nav li:nth-child(1) a {
      background: url(../img/header/word01_xs_2x.png) no-repeat;
      background-size: 100%; }
      .sidebar-nav li:nth-child(1) a:before {
        background: url(../img/header/icon01_2x.png) no-repeat;
        background-size: 100%; }
      .sidebar-nav li:nth-child(1) a:hover, .sidebar-nav li:nth-child(1) a.active {
        background: url(../img/header/word01_hover_2x.png) no-repeat;
        background-size: 100%; }
    .sidebar-nav li:nth-child(2) a {
      background: url(../img/header/word02_xs_2x.png) no-repeat;
      background-size: 100%; }
      .sidebar-nav li:nth-child(2) a:before {
        background: url(../img/header/icon02_2x.png) no-repeat;
        background-size: 100%; }
      .sidebar-nav li:nth-child(2) a:hover, .sidebar-nav li:nth-child(2) a.active {
        background: url(../img/header/word02_hover_2x.png) no-repeat;
        background-size: 100%; }
    .sidebar-nav li:nth-child(3) a {
      background: url(../img/header/word03_xs_2x.png) no-repeat;
      background-size: 100%; }
      .sidebar-nav li:nth-child(3) a:before {
        background: url(../img/header/icon03_2x.png) no-repeat;
        background-size: 100%; }
      .sidebar-nav li:nth-child(3) a:hover, .sidebar-nav li:nth-child(3) a.active {
        background: url(../img/header/word03_hover_2x.png) no-repeat;
        background-size: 100%; }
    .sidebar-nav li:nth-child(4) a {
      background: url(../img/header/word04_xs_2x.png) no-repeat;
      background-size: 100%; }
      .sidebar-nav li:nth-child(4) a:before {
        background: url(../img/header/icon04_2x.png) no-repeat;
        background-size: 100%; }
      .sidebar-nav li:nth-child(4) a:hover, .sidebar-nav li:nth-child(4) a.active {
        background: url(../img/header/word04_hover_2x.png) no-repeat;
        background-size: 100%; }
    .sidebar-nav li:nth-child(5) a {
      background: url(../img/header/word05_xs_2x.png) no-repeat;
      background-size: 100%; }
      .sidebar-nav li:nth-child(5) a:before {
        background: url(../img/header/icon05_2x.png) no-repeat;
        background-size: 100%; }
      .sidebar-nav li:nth-child(5) a:hover, .sidebar-nav li:nth-child(5) a.active {
        background: url(../img/header/word05_hover_2x.png) no-repeat;
        background-size: 100%; }
    .sidebar-nav li:nth-child(5) a {
      background: url(../img/header/word05_xs_2x.png) no-repeat;
      background-size: 100%; }
      .sidebar-nav li:nth-child(5) a:before {
        background: url(../img/header/icon05_2x.png) no-repeat;
        background-size: 100%; }
      .sidebar-nav li:nth-child(5) a:hover, .sidebar-nav li:nth-child(5) a.active {
        background: url(../img/header/word05_hover_2x.png) no-repeat;
        background-size: 100%; }
    .sidebar-nav li:nth-child(6) a {
      background: url(../img/header/word06_xs_2x.png) no-repeat;
      background-size: 100%; }
      .sidebar-nav li:nth-child(6) a:before {
        background: url(../img/header/icon06_2x.png) no-repeat;
        background-size: 100%; }
      .sidebar-nav li:nth-child(6) a:hover, .sidebar-nav li:nth-child(6) a.active {
        background: url(../img/header/word06_xs_hover_2x.png) no-repeat;
        background-size: 100%; }

.is-sticky #a-cart-sticky-header {
  background: #ffffff;
  left: 0;
  margin-left: 0;
  opacity: 1;
  padding: 0px 15px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1100;
  display: block;
  /* transition: all 0.1s ease-in 0s; */ }

/*
=================================================================
(#m02-2fts) FOOTER
=================================================================
*/
footer {
  position: relative;
  width: 100%;
  background: #f58009; }
  footer .footer-info {
    position: relative;
    padding: 33px 0 20px; }
    @media screen and (min-width: 768px) {
      footer .footer-info {
        padding: 20px 0; } }
    footer .footer-info .footer-logo {
      display: inline-block;
      margin-bottom: 20px; }
      @media screen and (min-width: 992px) {
        footer .footer-info .footer-logo {
          margin-right: 40px;
          margin-bottom: 0; } }
      footer .footer-info .footer-logo .footer-logo-lg {
        display: none;
        width: 131px; }
        @media screen and (min-width: 768px) {
          footer .footer-info .footer-logo .footer-logo-lg {
            display: block; } }
      footer .footer-info .footer-logo .footer-logo-xs {
        display: block;
        width: 100%;
        width: 131px; }
        @media screen and (min-width: 768px) {
          footer .footer-info .footer-logo .footer-logo-xs {
            display: none; } }
    footer .footer-info .footer-box-area {
      margin-bottom: 40px; }
      @media screen and (min-width: 640px) {
        footer .footer-info .footer-box-area {
          margin-bottom: 0px; } }
      @media screen and (min-width: 992px) {
        footer .footer-info .footer-box-area {
          display: inline-block; } }
      footer .footer-info .footer-box-area .footer-box {
        color: #fff9f3;
        font-size: 14px; }
        footer .footer-info .footer-box-area .footer-box span {
          display: inline-block;
          line-height: 1.8em; }
        footer .footer-info .footer-box-area .footer-box a.tel {
          display: inline-block;
          line-height: 1.8em;
          color: #fff9f3; }
    footer .footer-info .footer-designer {
      font-size: 14px;
      color: #fedab6;
      margin-bottom: 10px; }
      footer .footer-info .footer-designer a {
        color: #fedab6; }
      @media screen and (min-width: 640px) {
        footer .footer-info .footer-designer {
          margin-bottom: 0px;
          position: absolute;
          bottom: 50px;
          right: 22px; } }
    footer .footer-info .footer-acart {
      font-size: 14px;
      color: #fedab6; }
      footer .footer-info .footer-acart a {
        color: #fedab6; }
      @media screen and (min-width: 640px) {
        footer .footer-info .footer-acart {
          position: absolute;
          bottom: 25px;
          right: 22px; } }

.upbring-call-xs {
  width: 100%;
  padding: 16px 20px;
  position: fixed;
  bottom: 0px;
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
  z-index: 2; }
  @media screen and (min-width: 992px) {
    .upbring-call-xs {
      display: none; } }
  .upbring-call-xs .phone-text {
    display: block;
    text-align: center;
    color: #000;
    font-size: 15px;
    vertical-align: middle;
    padding-right: 5px; }
    .upbring-call-xs .phone-text > div {
      display: inline-block;
      margin-bottom: 5px; }
      @media screen and (min-width: 380px) {
        .upbring-call-xs .phone-text > div {
          display: block;
          margin-bottom: 0; } }
      @media screen and (min-width: 460px) {
        .upbring-call-xs .phone-text > div {
          display: inline-block; } }
    @media screen and (min-width: 380px) {
      .upbring-call-xs .phone-text {
        display: inline-block;
        text-align: left; } }
    @media screen and (min-width: 500px) {
      .upbring-call-xs .phone-text {
        font-size: 18px; } }
  .upbring-call-xs .phone-call {
    display: inline-block;
    padding: 16px 16px;
    background-color: #FF9B37;
    border-radius: 50px; }
    .upbring-call-xs .phone-call img {
      width: 100%;
      max-width: 192px; }
  .upbring-call-xs.bot {
    position: absolute;
    bottom: auto;
    top: -118px; }
    @media screen and (min-width: 380px) {
      .upbring-call-xs.bot {
        top: -88px; } }

/*
=================================================================
(#m03mcs) MAIN CONTENT
=================================================================
*/
/*
* @Author: ansen
* @Date:   2017-10-06 18:00:42
* @Last Modified by:   ansen
* @Last Modified time: 2018-10-09 15:15:54
*/
.breadcrumbs {
  font-size: 14px;
  color: #7f4001;
  padding: 15px 0; }
  .breadcrumbs a {
    color: #7f4001; }
  .breadcrumbs .active {
    color: #f57b02; }

.page-title-area {
  text-align: center; }
  @media screen and (min-width: 992px) {
    .page-title-area {
      padding-top: 50px; } }
  .page-title-area .page-title-img {
    margin-bottom: 25px; }
    @media screen and (min-width: 768px) {
      .page-title-area .page-title-img {
        margin-bottom: 35px; } }
    @media screen and (min-width: 992px) {
      .page-title-area .page-title-img {
        margin-bottom: 40px; } }
    .page-title-area .page-title-img .pc {
      display: none; }
      @media screen and (min-width: 768px) {
        .page-title-area .page-title-img .pc {
          display: inline; } }
    .page-title-area .page-title-img .mb {
      display: inline;
      width: 100%; }
      @media screen and (min-width: 768px) {
        .page-title-area .page-title-img .mb {
          display: none; } }
  @media screen and (min-width: 768px) {
    .page-title-area.educate .page-title-img, .page-title-area.partner .page-title-img {
      margin-bottom: 25px; } }
  @media screen and (min-width: 992px) {
    .page-title-area.educate .page-title-img, .page-title-area.partner .page-title-img {
      margin-bottom: 40px; } }
  .page-title-area.partner img {
    width: 710px;
    max-width: 100%; }
  .page-title-area.quiz .pc, .page-title-area.quiz .mb {
    max-width: 645px; }
  .page-title-area.footprint img {
    width: 656px;
    max-width: 100%; }
  .page-title-area.picnic .pc, .page-title-area.picnic .mb {
    max-width: 656px; }
  .page-title-area.cloth .pc, .page-title-area.cloth .mb {
    max-width: 653px; }
  .page-title-area.531 .pc, .page-title-area.531 .mb {
    max-width: 649px; }
  .page-title-area.educate img {
    width: 649px;
    max-width: 100%; }
  .page-title-area.act2020-step1 img {
    width: 618px;
    max-width: 100%; }
  .page-title-area.act2021-step1 img {
    width: 602px;
    max-width: 100%; }
  .page-title-area.act2020-step2 img {
    width: 618px;
    max-width: 100%; }
  .page-title-area.act2020-step3 img {
    width: 618px;
    max-width: 100%; }
  .page-title-area.love-child-0-violence img {
    width: 585px;
    max-width: 100%; }
  .page-title-area.child-angry img {
    width: 630px;
    max-width: 100%; }
  .page-title-area.act2020-video img {
    width: 656px;
    max-width: 100%; }
  .page-title-area .page-sub-title {
    font-size: 18px;
    font-weight: bold;
    color: #724e45;
    line-height: 1.6; }
    @media screen and (min-width: 400px) {
      .page-title-area .page-sub-title {
        font-size: 20px; } }

.click-btn {
  display: inline-block;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  padding: 10px 65px;
  border: none;
  border-radius: 20px;
  background-color: #F47C64;
  box-shadow: 0 6px #E66B4A;
  outline: none;
  position: relative;
  text-align: center; }
  .click-btn:hover {
    top: -2px;
    box-shadow: 0 8px #E66B4A;
    color: #fff; }
  .click-btn:active {
    top: 4px;
    box-shadow: 0 4px #E66B4A;
    color: #fff; }
  .click-btn:focus, .click-btn:visited {
    color: #fff; }
  .click-btn.index-about {
    padding: 10px 65px;
    margin-top: 55px;
    color: #fff; }
  .click-btn.quiz-input-btn {
    padding: 10px 84px;
    margin-top: 20px;
    color: #fff;
    float: right;
    letter-spacing: 0.25em; }
    @media screen and (min-width: 768px) {
      .click-btn.quiz-input-btn {
        margin-top: 50px; } }
  .click-btn.quiz-next {
    width: 245px;
    text-align: center;
    padding: 10px 45px;
    color: #fff;
    letter-spacing: 0.25em; }
  .click-btn.quiz-again {
    padding: 10px 80px;
    background-color: #fb954a;
    box-shadow: 0 6px #ec7219;
    color: #fff;
    letter-spacing: 0.25em; }
    @media screen and (min-width: 920px) {
      .click-btn.quiz-again {
        padding: 10px 40px; } }
    @media screen and (min-width: 992px) {
      .click-btn.quiz-again {
        padding: 10px 55px; } }
    @media screen and (min-width: 1200px) {
      .click-btn.quiz-again {
        padding: 10px 80px; } }
    .click-btn.quiz-again:hover {
      top: -2px;
      box-shadow: 0 8px #ec7219; }
    .click-btn.quiz-again:active {
      top: 4px;
      box-shadow: 0 4px #ec7219; }
  .click-btn.share-fb {
    padding: 10px 76px;
    background-color: #4267b2;
    box-shadow: 0 6px #1a408c;
    color: #fff;
    letter-spacing: 0.25em; }
    @media screen and (min-width: 920px) {
      .click-btn.share-fb {
        padding: 10px 36px; } }
    @media screen and (min-width: 992px) {
      .click-btn.share-fb {
        padding: 10px 51px; } }
    @media screen and (min-width: 1200px) {
      .click-btn.share-fb {
        padding: 10px 76px; } }
    .click-btn.share-fb:hover {
      top: -2px;
      box-shadow: 0 8px #1a408c; }
    .click-btn.share-fb:active {
      top: 4px;
      box-shadow: 0 4px #1a408c; }

.pagination {
  display: block; }
  .pagination ul {
    text-align: center;
    padding: 0;
    margin: 0;
    list-style: none; }
    .pagination ul li {
      display: inline-block;
      margin: 0 7px; }
      .pagination ul li a, .pagination ul li span {
        display: inline-block;
        font-family: Arial;
        font-size: 20px;
        color: #000;
        padding: 0 10px;
        position: relative; }
        .pagination ul li a:after, .pagination ul li span:after {
          content: '';
          display: none;
          width: 100%;
          height: 12px;
          position: absolute;
          left: 0;
          bottom: 2px;
          z-index: -1;
          background-color: #FCE476; }
        .pagination ul li a:hover:after, .pagination ul li a.selected:after, .pagination ul li span:hover:after, .pagination ul li span.selected:after {
          display: block; }

.error-area {
  text-align: center; }
  @media screen and (min-width: 768px) {
    .error-area {
      height: calc( 100vh - 248px); } }
  .error-area .error-img {
    padding: 40px 15px 35px; }
    @media screen and (min-width: 530px) {
      .error-area .error-img {
        padding: 90px 0 35px; } }
    .error-area .error-img .pc {
      display: none; }
      @media screen and (min-width: 768px) {
        .error-area .error-img .pc {
          display: inline; } }
    .error-area .error-img .mb {
      display: inline;
      width: 100%;
      max-width: 466px; }
      @media screen and (min-width: 768px) {
        .error-area .error-img .mb {
          display: none; } }
  .error-area .error-text {
    font-weight: bold;
    font-size: 24px;
    color: #724e45;
    margin-bottom: 100px; }
    .error-area .error-text .counting {
      display: inline-block; }
    .error-area .error-text #error-time {
      font-family: Arial;
      font-weight: bold;
      font-size: 34px;
      color: #6fc2d7;
      padding-right: 5px; }

/*
* @Author: ansen
* @Date:   2017-10-05 16:22:32
* @Last Modified by:   ansen
* @Last Modified time: 2018-10-25 14:11:36
*/
.index-banner-area {
  width: 100%;
  margin-top: 50px;
  margin-bottom: 10px;
  border-bottom: 10px solid #FC9F5A; }
  @media screen and (min-width: 992px) {
    .index-banner-area {
      margin-top: 0;
      margin-bottom: 0; } }
  .index-banner-area .owl-carousel .item {
    display: block;
    position: relative;
    height: 280px; }
    @media screen and (min-width: 500px) {
      .index-banner-area .owl-carousel .item {
        height: 420px; } }
    @media screen and (min-width: 768px) {
      .index-banner-area .owl-carousel .item {
        height: 420px; } }
    @media screen and (min-width: 992px) {
      .index-banner-area .owl-carousel .item {
        height: 520px; } }
    .index-banner-area .owl-carousel .item.video {
      text-align: center; }
      .index-banner-area .owl-carousel .item.video iframe {
        width: 53.5vh;
        max-width: 100%;
        height: 280px;
        z-index: 2; }
        @media screen and (min-width: 480px) {
          .index-banner-area .owl-carousel .item.video iframe {
            height: 420px; } }
        @media screen and (min-width: 768px) {
          .index-banner-area .owl-carousel .item.video iframe {
            height: 420px; } }
        @media screen and (min-width: 992px) {
          .index-banner-area .owl-carousel .item.video iframe {
            width: 98vh;
            height: 520px; } }
      .index-banner-area .owl-carousel .item.video:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7); }
    .index-banner-area .owl-carousel .item .youtubeid {
      width: 100%;
      height: 100%;
      margin: auto;
      text-align: center;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      display: none; }
    .index-banner-area .owl-carousel .item .whiteboard {
      display: none;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0%;
      top: 0%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 3; }
      .index-banner-area .owl-carousel .item .whiteboard.on {
        display: block; }
      .index-banner-area .owl-carousel .item .whiteboard.loading {
        background: #000 !important; }
        .index-banner-area .owl-carousel .item .whiteboard.loading:after {
          content: '';
          display: inline-block;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -60px;
          margin-left: -60px;
          border: 16px solid #f3f3f3;
          /* Light grey */
          border-top: 16px solid #3498db;
          /* Blue */
          border-radius: 50%;
          width: 120px;
          height: 120px;
          animation: spin 2s linear infinite; }
        .index-banner-area .owl-carousel .item .whiteboard.loading img {
          transform: translateX(-50%) translateY(-50%) scale(1.5); }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
      .index-banner-area .owl-carousel .item .whiteboard img {
        width: auto;
        transition: .5s ease;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        cursor: pointer; }
        .index-banner-area .owl-carousel .item .whiteboard img:hover {
          transform: translateX(-50%) translateY(-50%) scale(1.5); }
  .index-banner-area .owl-carousel .owl-item.active .youtubeid {
    display: block; }
  .index-banner-area .owl-dots {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%); }
    @media screen and (min-width: 992px) {
      .index-banner-area .owl-dots {
        bottom: 5px; } }
    .index-banner-area .owl-dots .owl-dot span {
      width: 15px;
      height: 15px;
      margin: 5px;
      background-color: #FDF0B9 !important; }
      @media screen and (min-width: 992px) {
        .index-banner-area .owl-dots .owl-dot span {
          background-color: rgba(239, 237, 237, 0.3) !important; } }
    .index-banner-area .owl-dots .owl-dot.active span, .index-banner-area .owl-dots .owl-dot:hover span {
      background-color: #FBA043 !important; }
      @media screen and (min-width: 992px) {
        .index-banner-area .owl-dots .owl-dot.active span, .index-banner-area .owl-dots .owl-dot:hover span {
          background-color: #fff !important; } }

.index-response-area {
  padding-bottom: 25px; }
  @media screen and (min-width: 992px) {
    .index-response-area {
      padding-top: 90px;
      padding-bottom: 90px; } }
  @media screen and (min-width: 1200px) {
    .index-response-area {
      padding-bottom: 120px; } }
  .index-response-area .response-title {
    text-align: center;
    margin: 0 auto 15px; }
    @media screen and (min-width: 768px) {
      .index-response-area .response-title {
        margin: 0 auto 30px; } }
    @media screen and (min-width: 992px) {
      .index-response-area .response-title {
        margin: 0 auto 15px; } }
    @media screen and (min-width: 1200px) {
      .index-response-area .response-title {
        margin: 0 auto 70px; } }
    .index-response-area .response-title .response-title-pc {
      display: inline;
      width: 358px;
      max-width: 100%; }
      @media screen and (min-width: 768px) {
        .index-response-area .response-title .response-title-pc {
          display: inline; } }
  .index-response-area .response-box-area {
    text-align: center; }
    @media screen and (min-width: 768px) {
      .index-response-area .response-box-area .row [class^='col'] {
        margin-bottom: 15px; }
        .index-response-area .response-box-area .row [class^='col']:nth-child(1), .index-response-area .response-box-area .row [class^='col']:nth-child(3) {
          text-align: right; }
          .index-response-area .response-box-area .row [class^='col']:nth-child(1) .response-box, .index-response-area .response-box-area .row [class^='col']:nth-child(3) .response-box {
            margin-right: 30px; }
        .index-response-area .response-box-area .row [class^='col']:nth-child(2), .index-response-area .response-box-area .row [class^='col']:nth-child(4) {
          text-align: left; }
          .index-response-area .response-box-area .row [class^='col']:nth-child(2) .response-box, .index-response-area .response-box-area .row [class^='col']:nth-child(4) .response-box {
            margin-left: 30px; } }
    @media screen and (min-width: 992px) {
      .index-response-area .response-box-area .row [class^='col'] {
        margin-bottom: 0; }
        .index-response-area .response-box-area .row [class^='col']:nth-child(1), .index-response-area .response-box-area .row [class^='col']:nth-child(3) {
          text-align: left; }
          .index-response-area .response-box-area .row [class^='col']:nth-child(1) .response-box, .index-response-area .response-box-area .row [class^='col']:nth-child(3) .response-box {
            margin-right: 0px; }
        .index-response-area .response-box-area .row [class^='col']:nth-child(2), .index-response-area .response-box-area .row [class^='col']:nth-child(4) {
          text-align: left; }
          .index-response-area .response-box-area .row [class^='col']:nth-child(2) .response-box, .index-response-area .response-box-area .row [class^='col']:nth-child(4) .response-box {
            margin-left: 00px; } }
    @media screen and (min-width: 1200px) {
      .index-response-area .response-box-area {
        margin-left: -15px;
        margin-right: -15px; } }
  .index-response-area .response-box {
    display: inline-block;
    width: 260px;
    height: 365px;
    font-size: 0; }
    @media screen and (min-width: 992px) {
      .index-response-area .response-box {
        width: calc(260px * .8);
        height: calc(365px * .8); } }
    @media screen and (min-width: 1200px) {
      .index-response-area .response-box {
        width: 260px;
        height: 365px; } }
    @media screen and (min-width: 992px) {
      .index-response-area .response-box:hover {
        animation: shake 0.6s linear !important; } }

@keyframes shake {
  20% {
    transform: rotate(-3deg); }
  50% {
    transform: rotate(3deg); }
  70% {
    transform: rotate(-3deg); }
  100% {
    transform: rotate(0deg); } }
    .index-response-area .response-box.pic-1 {
      background: url(../img/act2020/2020orange_pic01_hover_2x.png) 0 0px no-repeat;
      background-size: 100%; }
      @media screen and (min-width: 768px) {
        .index-response-area .response-box.pic-1 {
          background: url(../img/act2020/2020orange_pic01_off_2x.png) 0 0px no-repeat;
          background-size: 100%; } }
      .index-response-area .response-box.pic-1:hover {
        background: url(../img/act2020/2020orange_pic01_hover_2x.png) 0 0px no-repeat;
        background-size: 100%; }
      @media screen and (min-width: 1200px) {
        .index-response-area .response-box.pic-1 {
          margin: 0; } }
    .index-response-area .response-box.pic-2 {
      background: url(../img/act2020/2020orange_pic02_hover_2x.png) 0 0px no-repeat;
      background-size: 100%; }
      @media screen and (min-width: 768px) {
        .index-response-area .response-box.pic-2 {
          background: url(../img/act2020/2020orange_pic02_off_2x.png) 0 0px no-repeat;
          background-size: 100%; } }
      .index-response-area .response-box.pic-2:hover {
        background: url(../img/act2020/2020orange_pic02_hover_2x.png) 0 0px no-repeat;
        background-size: 100%; }
      @media screen and (min-width: 1200px) {
        .index-response-area .response-box.pic-2 {
          margin-left: 35px;
          margin-left: 0; } }
    .index-response-area .response-box.pic-3 {
      background: url(../img/act2022/2022orange_pic03_hover_2x.png) 0 0px no-repeat;
      background-size: 100%; }
      @media screen and (min-width: 768px) {
        .index-response-area .response-box.pic-3 {
          background: url(../img/act2022/2022orange_pic03_2x.png) 0 0px no-repeat;
          background-size: 100%; } }
      .index-response-area .response-box.pic-3:hover {
        background: url(../img/act2022/2022orange_pic03_hover_2x.png) 0 0px no-repeat;
        background-size: 100%; }
      @media screen and (min-width: 1200px) {
        .index-response-area .response-box.pic-3 {
          margin-right: 35px;
          margin-right: 0; } }
    .index-response-area .response-box.pic-4 {
      background: url(../img/act2020/2020orange_pic04_hover_2x.png) 0 0px no-repeat;
      background-size: 100%; }
      @media screen and (min-width: 768px) {
        .index-response-area .response-box.pic-4 {
          background: url(../img/act2020/2020orange_pic04_off_2x.png) 0 0px no-repeat;
          background-size: 100%; } }
      .index-response-area .response-box.pic-4:hover {
        background: url(../img/act2020/2020orange_pic04_hover_2x.png) 0 0px no-repeat;
        background-size: 100%; }
      @media screen and (min-width: 1200px) {
        .index-response-area .response-box.pic-4 {
          margin: 0; } }

.index-about-area {
  padding: 160px 0 0px;
  background: url(../img/index/about/bg_pic01_2x.png) center -2px no-repeat;
  background-size: 384px;
  background-color: #FFF6CD;
  position: relative;
  overflow: hidden; }
  @media screen and (min-width: 768px) {
    .index-about-area {
      padding: 215px 0 0px;
      background: url(../img/index/about/bg_pic01.png) center -2px no-repeat;
      background-size: 384px;
      background-color: #FFF6CD; } }
  @media screen and (min-width: 992px) {
    .index-about-area {
      padding: 150px 0 0px; } }
  .index-about-area .index-about-box {
    width: 100%;
    display: table;
    table-layout: fixed;
    padding-bottom: 240px; }
    @media screen and (min-width: 992px) {
      .index-about-area .index-about-box {
        padding-bottom: 70px; } }
    .index-about-area .index-about-box .index-about-left {
      text-align: center;
      margin-bottom: 57px; }
      @media screen and (min-width: 992px) {
        .index-about-area .index-about-box .index-about-left {
          text-align: left;
          margin-bottom: 0;
          display: table-cell;
          vertical-align: top; } }
      .index-about-area .index-about-box .index-about-left .about-title {
        margin-bottom: 40px;
        text-align: center; }
        @media screen and (min-width: 992px) {
          .index-about-area .index-about-box .index-about-left .about-title {
            text-align: left; } }
        .index-about-area .index-about-box .index-about-left .about-title .about-title-pc {
          width: 279px;
          max-width: 100%; }
        .index-about-area .index-about-box .index-about-left .about-title .about-title-mb {
          display: inline;
          width: 279px; }
          @media screen and (min-width: 768px) {
            .index-about-area .index-about-box .index-about-left .about-title .about-title-mb {
              display: none; } }
      .index-about-area .index-about-box .index-about-left .index-about-text {
        display: inline-block;
        margin-bottom: 60px;
        line-height: 1.6em;
        font-size: 18px;
        color: #6e4b42;
        text-align: left; }
        @media screen and (min-width: 992px) {
          .index-about-area .index-about-box .index-about-left .index-about-text {
            margin-bottom: 30px; } }
        @media screen and (min-width: 1200px) {
          .index-about-area .index-about-box .index-about-left .index-about-text {
            margin-bottom: 60px; } }
      @media screen and (min-width: 992px) {
        .index-about-area .index-about-box .index-about-left .index-about-pic {
          padding-left: 20px; } }
      @media screen and (min-width: 1200px) {
        .index-about-area .index-about-box .index-about-left .index-about-pic {
          padding-left: 0; } }
      .index-about-area .index-about-box .index-about-left .index-about-pic .about-picA-pc {
        display: none; }
        @media screen and (min-width: 768px) {
          .index-about-area .index-about-box .index-about-left .index-about-pic .about-picA-pc {
            display: inline;
            margin: 0 20px; } }
        @media screen and (min-width: 992px) {
          .index-about-area .index-about-box .index-about-left .index-about-pic .about-picA-pc {
            margin: 0 20px 20px; } }
        @media screen and (min-width: 1200px) {
          .index-about-area .index-about-box .index-about-left .index-about-pic .about-picA-pc {
            margin: 0 20px; } }
      .index-about-area .index-about-box .index-about-left .index-about-pic .about-picA-mb {
        display: inline;
        width: 122px;
        margin: 0 10px; }
        @media screen and (min-width: 768px) {
          .index-about-area .index-about-box .index-about-left .index-about-pic .about-picA-mb {
            display: none; } }
      .index-about-area .index-about-box .index-about-left .index-about-pic .about-picB-pc {
        display: none; }
        @media screen and (min-width: 768px) {
          .index-about-area .index-about-box .index-about-left .index-about-pic .about-picB-pc {
            display: inline;
            margin: 0 20px; } }
        @media screen and (min-width: 992px) {
          .index-about-area .index-about-box .index-about-left .index-about-pic .about-picB-pc {
            margin: 0 20px; } }
        @media screen and (min-width: 1200px) {
          .index-about-area .index-about-box .index-about-left .index-about-pic .about-picB-pc {
            margin: 0 20px; } }
      .index-about-area .index-about-box .index-about-left .index-about-pic .about-picB-mb {
        display: inline;
        width: 122px;
        margin: 0 10px; }
        @media screen and (min-width: 768px) {
          .index-about-area .index-about-box .index-about-left .index-about-pic .about-picB-mb {
            display: none; } }
    .index-about-area .index-about-box .index-about-right {
      background: url(../img/index/about/about_pic03-1_2x.png) center center no-repeat;
      background-size: 567px;
      margin-left: -15px;
      margin-right: -15px; }
      @media screen and (min-width: 450px) {
        .index-about-area .index-about-box .index-about-right {
          background: url(../img/index/about/about_pic03_2x.png) center center no-repeat;
          background-size: 567px; } }
      @media screen and (min-width: 992px) {
        .index-about-area .index-about-box .index-about-right {
          background: url(../img/index/about/about_pic03.png) center center no-repeat;
          background-size: 567px;
          display: table-cell;
          width: 567px;
          vertical-align: top;
          margin-left: 0;
          margin-right: 0; } }
      .index-about-area .index-about-box .index-about-right .index-about-info {
        padding: 213px 10px 130px 10px;
        text-align: center;
        position: relative;
        overflow: hidden; }
        .index-about-area .index-about-box .index-about-right .index-about-info:before {
          content: '';
          display: block;
          width: 168.5px;
          height: 142px;
          background: url(../img/index/about/about_pic03-2_2x.png) center center no-repeat;
          background-size: 168.5px;
          position: absolute;
          top: 17px;
          right: -25px; }
          @media screen and (min-width: 450px) {
            .index-about-area .index-about-box .index-about-right .index-about-info:before {
              display: none; } }
        @media screen and (min-width: 480px) {
          .index-about-area .index-about-box .index-about-right .index-about-info {
            padding: 213px 20px 130px 50px; } }
        .index-about-area .index-about-box .index-about-right .index-about-info .index-about-info-title {
          font-size: 20px;
          font-weight: bold;
          color: #724e45;
          margin-bottom: 20px; }
        .index-about-area .index-about-box .index-about-right .index-about-info .index-about-info-text {
          font-size: 18px;
          color: #6e4b42;
          line-height: 1.6em; }
  .index-about-area .index-lion {
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -103.5px;
    width: 207px;
    height: 326px;
    background: url(../img/index/about/about_pic04_2x.png) 0px 0px no-repeat;
    background-size: 207px; }
    @media screen and (min-width: 768px) {
      .index-about-area .index-lion {
        background: url(../img/index/about/about_pic04.png) 0px 0px no-repeat;
        background-size: 207px;
        margin-left: -103.5px; } }
    @media screen and (min-width: 992px) {
      .index-about-area .index-lion {
        margin-left: -143px; } }
    @media screen and (min-width: 1200px) {
      .index-about-area .index-lion {
        margin-left: -103.5px; } }

.video-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  padding: 60px 30px;
  overflow-y: auto; }
  .video-modal .close {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 2em;
    color: #fff;
    opacity: 1; }
  .video-modal .iframe-table {
    display: table;
    width: 100%;
    height: 100%; }
    .video-modal .iframe-table .iframe-table-cell {
      display: table-cell;
      vertical-align: middle; }
      .video-modal .iframe-table .iframe-table-cell .iframe-box {
        max-width: 1170px;
        margin: 0px auto;
        border: 7px solid #fff;
        border-radius: 10px; }
        @media screen and (min-width: 768px) {
          .video-modal .iframe-table .iframe-table-cell .iframe-box {
            border: 10px solid #fff; } }

.orange-ribbon-area {
  width: 100%;
  padding: 50px 0 20px;
  text-align: center;
  overflow: hidden; }
  @media screen and (min-width: 768px) {
    .orange-ribbon-area {
      padding: 20px 0 50px; } }
  @media screen and (min-width: 850px) {
    .orange-ribbon-area {
      padding: 20px 0 90px; } }
  .orange-ribbon-area:after {
    content: '';
    display: block;
    clear: both; }

.orange-ribbon-title {
  width: auto;
  padding: 0 0px;
  display: inline-block;
  margin-bottom: 30px; }
  @media screen and (min-width: 992px) {
    .orange-ribbon-title {
      padding: 0 30px;
      display: block;
      float: right;
      margin-bottom: 30px;
      width: 50%; } }
  @media screen and (min-width: 992px) {
    .orange-ribbon-title {
      padding: 0 50px; } }
  @media screen and (min-width: 1200px) {
    .orange-ribbon-title {
      padding: 0 70px; } }
  .orange-ribbon-title img {
    width: 375px;
    max-width: 100%;
    height: auto; }
    .orange-ribbon-title img.pc {
      display: block;
      margin: auto; }
      @media screen and (min-width: 768px) {
        .orange-ribbon-title img.pc {
          display: block; } }
      @media screen and (min-width: 850px) {
        .orange-ribbon-title img.pc {
          margin: 0; } }

.orange-area {
  width: auto;
  margin: 0 auto 30px;
  display: inline-block; }
  @media screen and (min-width: 768px) {
    .orange-area {
      max-width: 750px; } }
  @media screen and (min-width: 992px) {
    .orange-area {
      width: 50%;
      margin: 0;
      display: block;
      float: left;
      padding: 0;
      max-width: none; } }
  .orange-area:after {
    content: '';
    display: block;
    clear: both; }
  .orange-area .box {
    float: left;
    width: 19px;
    height: 19px;
    padding: 1.5px; }
    @media screen and (min-width: 330px) {
      .orange-area .box {
        width: 20px;
        height: 20px; } }
    @media screen and (min-width: 380px) {
      .orange-area .box {
        width: 22px;
        height: 22px; } }
    @media screen and (min-width: 420px) {
      .orange-area .box {
        width: 24px;
        height: 24px; } }
    @media screen and (min-width: 440px) {
      .orange-area .box {
        width: 26px;
        height: 26px; } }
    .orange-area .box .item {
      width: 100%;
      height: 100%;
      background: none;
      border: none;
      border-radius: 3px; }
      .orange-area .box .item.diable {
        background-color: #ffce9f;
        border: 1px solid #f3a16b; }
      .orange-area .box .item.image {
        background: none;
        border: none; }
      .orange-area .box .item img {
        max-width: 100%;
        border-radius: 50%;
        transform: translateY(-3px); }
  .orange-area .left-img {
    width: 100%;
    max-width: 100%;
    height: auto; }

.orange-img-area img {
  max-width: 380px;
  height: auto; }

.orange-ribbon-content-area {
  width: auto;
  padding: 0 20px;
  position: relative;
  max-width: 750px;
  margin: auto; }
  @media screen and (min-width: 992px) {
    .orange-ribbon-content-area {
      padding: 0 30px;
      display: block;
      float: right;
      width: 50%; } }
  @media screen and (min-width: 992px) {
    .orange-ribbon-content-area {
      padding: 0 50px; } }
  @media screen and (min-width: 1200px) {
    .orange-ribbon-content-area {
      padding: 0 70px; } }
  .orange-ribbon-content-area .orange-ribbon-text {
    color: #6e4b42;
    font-size: 16px;
    margin-bottom: 35px;
    text-align: left;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both; }
    @media screen and (min-width: 850px) {
      .orange-ribbon-content-area .orange-ribbon-text {
        margin-bottom: 45px; } }
    .orange-ribbon-content-area .orange-ribbon-text .text-box + .text-box {
      margin-top: 25px; }
    .orange-ribbon-content-area .orange-ribbon-text .step-row {
      position: relative;
      padding-left: 64px; }
      .orange-ribbon-content-area .orange-ribbon-text .step-row:before {
        content: attr(data-step);
        display: block;
        color: #e47200;
        position: absolute;
        top: 0;
        left: 0; }
      .orange-ribbon-content-area .orange-ribbon-text .step-row + .step-row {
        margin-top: 5px; }
  .orange-ribbon-content-area .orange-ribbon-botton-area {
    text-align: center;
    margin-bottom: 50px;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both; }
    @media screen and (min-width: 1200px) {
      .orange-ribbon-content-area .orange-ribbon-botton-area {
        margin-bottom: 65px; } }
  .orange-ribbon-content-area .orange-ribbon-img-area {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both; }
    .orange-ribbon-content-area .orange-ribbon-img-area img {
      max-width: 100%;
      height: auto; }
      .orange-ribbon-content-area .orange-ribbon-img-area img.pc {
        display: none; }
        @media screen and (min-width: 850px) {
          .orange-ribbon-content-area .orange-ribbon-img-area img.pc {
            display: block; } }

/*
* @Author: ansen
* @Date:   2017-10-06 18:41:52
* @Last Modified by:   ansen
* @Last Modified time: 2017-10-20 10:47:36
*/
.partner-main-area {
  width: 100%;
  margin-top: 10px;
  position: relative; }
  @media screen and (min-width: 400px) {
    .partner-main-area {
      margin-top: 28px; } }
  @media screen and (min-width: 768px) {
    .partner-main-area {
      display: table;
      table-layout: fixed; } }
  @media screen and (min-width: 992px) {
    .partner-main-area {
      margin-top: 35px; } }
  .partner-main-area .partner-class-mb-area {
    padding: 50px 0 50px; }
    .partner-main-area .partner-class-mb-area .partner-class-mb {
      width: 200px;
      float: right;
      position: relative; }
      @media screen and (min-width: 768px) {
        .partner-main-area .partner-class-mb-area .partner-class-mb {
          display: none; } }
      .partner-main-area .partner-class-mb-area .partner-class-mb:before {
        content: '';
        display: block;
        width: 70px;
        height: 144px;
        background: url(../img/partner/balloon_xs_2x.png) no-repeat;
        background-size: 70px;
        position: absolute;
        top: -19px;
        left: -87px; }
      .partner-main-area .partner-class-mb-area .partner-class-mb .active-class {
        border-radius: 5px;
        border: 1px solid #000;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        z-index: 4; }
        .partner-main-area .partner-class-mb-area .partner-class-mb .active-class:after {
          content: '';
          display: block;
          width: 0;
          height: 0;
          border-top: 6px solid #585858;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          position: absolute;
          top: 12px;
          right: 10px; }
      .partner-main-area .partner-class-mb-area .partner-class-mb .partner-class-list {
        display: none;
        width: 100%;
        border: 1px solid #000;
        border-top: none;
        border-radius: 0 0 5px 5px;
        overflow: hidden;
        position: absolute;
        top: 32px;
        left: 0;
        z-index: 3; }
      .partner-main-area .partner-class-mb-area .partner-class-mb .select-class {
        display: block;
        padding: 6px 43px;
        background-color: #fff;
        position: relative; }
        .partner-main-area .partner-class-mb-area .partner-class-mb .select-class:before {
          content: '';
          display: block;
          width: 7px;
          height: 7px;
          background-color: #ccc;
          position: absolute;
          top: 13px;
          left: 23px;
          transform: rotate(45deg); }
        .partner-main-area .partner-class-mb-area .partner-class-mb .select-class.year:before {
          background-color: #ff9b36; }
        .partner-main-area .partner-class-mb-area .partner-class-mb .select-class.artist:before {
          background-color: #fe9e9b; }
        .partner-main-area .partner-class-mb-area .partner-class-mb .select-class.celebrity:before {
          background-color: #ffc700; }
        .partner-main-area .partner-class-mb-area .partner-class-mb .select-class.enterprise:before {
          background-color: #5abdd6; }
      .partner-main-area .partner-class-mb-area .partner-class-mb .select-class + .select-class {
        border-top: 1px solid #000; }
  .partner-main-area .partner-left-area {
    display: none;
    width: 112px; }
    @media screen and (min-width: 768px) {
      .partner-main-area .partner-left-area {
        display: table-cell; } }
  @media screen and (min-width: 768px) {
    .partner-main-area .partner-right-area {
      display: table-cell;
      width: 100%;
      padding-left: 15px;
      vertical-align: top; } }

.partner-class-area {
  width: 100%;
  height: 639px;
  background: url(../img/partner/balloon.png) no-repeat;
  padding-top: 185px; }
  .partner-class-area .partner-class-btn {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #8c8c8c;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    line-height: 80px;
    margin: 0 auto 18px;
    cursor: pointer; }
    .partner-class-area .partner-class-btn.year:hover, .partner-class-area .partner-class-btn.year.selected {
      background-color: #ff9b36; }
    .partner-class-area .partner-class-btn.artist:hover, .partner-class-area .partner-class-btn.artist.selected {
      background-color: #fe9e9b; }
    .partner-class-area .partner-class-btn.celebrity:hover, .partner-class-area .partner-class-btn.celebrity.selected {
      background-color: #ffc700; }
    .partner-class-area .partner-class-btn.enterprise:hover, .partner-class-area .partner-class-btn.enterprise.selected {
      background-color: #5abdd6; }

.partner-box-area {
  margin: 0 -10px; }
  .partner-box-area .lovepartner-box {
    float: left;
    width: 100%;
    padding: 0 10px;
    margin-bottom: 30px; }
    @media screen and (min-width: 570px) {
      .partner-box-area .lovepartner-box {
        width: 50%;
        margin-bottom: 35px; } }
    @media screen and (min-width: 992px) {
      .partner-box-area .lovepartner-box {
        width: 33.33%; } }
    @media screen and (min-width: 1200px) {
      .partner-box-area .lovepartner-box {
        margin-bottom: 50px; } }
    .partner-box-area .lovepartner-box .partner-pic {
      margin-bottom: 10px;
      padding: 10px;
      position: relative; }
      .partner-box-area .lovepartner-box .partner-pic .type-area {
        position: absolute;
        top: -20px;
        right: 10px;
        z-index: 2; }
        .partner-box-area .lovepartner-box .partner-pic .type-area .item-type {
          display: inline-block;
          width: 65px;
          height: 45px;
          margin: 0 3px; }
          .partner-box-area .lovepartner-box .partner-pic .type-area .item-type.more {
            background: url(../img/partner/type_more_2x.png) no-repeat;
            background-size: 65px; }
            @media screen and (min-width: 768px) {
              .partner-box-area .lovepartner-box .partner-pic .type-area .item-type.more {
                background: url(../img/partner/type_more.png) no-repeat;
                background-size: 65px; } }
      .partner-box-area .lovepartner-box .partner-pic img {
        width: 100%;
        height: auto; }
      .partner-box-area .lovepartner-box .partner-pic iframe {
        max-width: 100%; }
      .partner-box-area .lovepartner-box .partner-pic .white-bg {
        position: absolute;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        top: 10px;
        left: 10px;
        background-color: #fff;
        z-index: -1; }
      .partner-box-area .lovepartner-box .partner-pic:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        border: 15px solid #fff;
        border-image: url(../img/partner/outline_video01.png) 15 round;
        border-style: solid;
        border-width: 15px;
        position: absolute;
        top: 0;
        left: 0; }
      .partner-box-area .lovepartner-box .partner-pic.link {
        cursor: pointer; }
      .partner-box-area .lovepartner-box .partner-pic.video {
        border: 15px solid transparent;
        border-image: url(../img/partner/outline_video02.png) 15 round;
        padding: 0; }
        .partner-box-area .lovepartner-box .partner-pic.video .video-box {
          padding: 8px 13px;
          background-color: #000; }
          .partner-box-area .lovepartner-box .partner-pic.video .video-box .type-area {
            top: -35px; }
        .partner-box-area .lovepartner-box .partner-pic.video:before {
          display: none; }
      .partner-box-area .lovepartner-box .partner-pic .partner-more-area {
        position: absolute;
        top: -12px;
        right: 27px;
        z-index: 2; }
        .partner-box-area .lovepartner-box .partner-pic .partner-more-area .partner-more {
          display: inline-block;
          width: 65px;
          height: 45px;
          background: url(../img/partner/type_more_2x.png) no-repeat;
          background-size: 65px; }
          @media screen and (min-width: 768px) {
            .partner-box-area .lovepartner-box .partner-pic .partner-more-area .partner-more {
              background: url(../img/partner/type_more.png) no-repeat;
              background-size: 65px; } }
    .partner-box-area .lovepartner-box .partner-info {
      padding: 0px 10px; }
      .partner-box-area .lovepartner-box .partner-info.link {
        cursor: pointer; }
      .partner-box-area .lovepartner-box .partner-info .partner-name {
        display: block;
        font-size: 20px;
        font-weight: bold;
        color: #f57c03;
        margin-bottom: 5px; }
        @media screen and (min-width: 992px) {
          .partner-box-area .lovepartner-box .partner-info .partner-name {
            margin-bottom: 12px; } }
      .partner-box-area .lovepartner-box .partner-info .partner-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
        text-align: justify; }
      .partner-box-area .lovepartner-box .partner-info .partner-excerpt {
        font-size: 16px;
        color: #333;
        line-height: 1.6em;
        text-align: justify;
        overflow: hidden; }
        @media screen and (min-width: 630px) {
          .partner-box-area .lovepartner-box .partner-info .partner-excerpt {
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            /* number of lines to show */
            -webkit-box-orient: vertical;
            max-height: 72px;
            position: relative; } }
  .partner-box-area .clearfix.block3 {
    display: none; }
    @media screen and (min-width: 992px) {
      .partner-box-area .clearfix.block3 {
        display: block; } }
  .partner-box-area .clearfix.block2 {
    display: none; }
    @media screen and (min-width: 630px) {
      .partner-box-area .clearfix.block2 {
        display: block; } }
    @media screen and (min-width: 992px) {
      .partner-box-area .clearfix.block2 {
        display: none; } }

.partner-bottom-area {
  width: 100%;
  height: 200px;
  background: url(../img/partner/bottom_pic02_2x.png) center center no-repeat;
  background-size: 665px;
  overflow: hidden; }
  @media screen and (min-width: 480px) {
    .partner-bottom-area {
      background: url(../img/partner/bottom_pic02_2x.png) center center no-repeat;
      background-size: 100%; } }
  @media screen and (min-width: 768px) {
    .partner-bottom-area {
      background: url(../img/partner/bottom_pic02.png) center center no-repeat;
      background-size: 665px; } }
  @media screen and (min-width: 992px) {
    .partner-bottom-area {
      background: url(../img/partner/bottom_pic01.png) center center no-repeat;
      background-size: 1318px; } }

/*
* @Author: ansen
* @Date:   2017-10-16 11:36:08
* @Last Modified by:   ansen
* @Last Modified time: 2018-10-23 11:38:53
*/
.teach543-main-area {
  padding: 35px 0;
  margin-bottom: 100px; }
  @media screen and (min-width: 380px) {
    .teach543-main-area {
      margin-bottom: 80px; } }
  @media screen and (min-width: 768px) {
    .teach543-main-area {
      padding: 50px 0; } }
  @media screen and (min-width: 992px) {
    .teach543-main-area {
      padding: 60px 0;
      margin-bottom: 0; } }
  .teach543-main-area .teach543-item-box {
    width: 100%;
    padding: 0px 15px;
    margin-bottom: 30px; }
    @media screen and (min-width: 570px) {
      .teach543-main-area .teach543-item-box {
        width: 50%; } }
    @media screen and (min-width: 992px) {
      .teach543-main-area .teach543-item-box {
        width: 33.33333%; } }
    .teach543-main-area .teach543-item-box .teach543-item {
      position: relative;
      cursor: pointer; }
      .teach543-main-area .teach543-item-box .teach543-item .teach543-type-area {
        position: absolute;
        top: -32px;
        right: 10px;
        z-index: 2; }
        .teach543-main-area .teach543-item-box .teach543-item .teach543-type-area .item-type {
          display: inline-block;
          width: 65px;
          height: 45px;
          margin: 0 3px; }
          .teach543-main-area .teach543-item-box .teach543-item .teach543-type-area .item-type.hot {
            background: url(../img/543/type_hot_2x.png) no-repeat;
            background-size: 65px; }
            @media screen and (min-width: 768px) {
              .teach543-main-area .teach543-item-box .teach543-item .teach543-type-area .item-type.hot {
                background: url(../img/543/type_hot.png) no-repeat;
                background-size: 65px; } }
          .teach543-main-area .teach543-item-box .teach543-item .teach543-type-area .item-type.new {
            background: url(../img/543/type_new_2x.png) no-repeat;
            background-size: 65px; }
            @media screen and (min-width: 768px) {
              .teach543-main-area .teach543-item-box .teach543-item .teach543-type-area .item-type.new {
                background: url(../img/543/type_new.png) no-repeat;
                background-size: 65px; } }
      .teach543-main-area .teach543-item-box .teach543-item .teach543-pic-area {
        width: 100%;
        position: relative; }
        .teach543-main-area .teach543-item-box .teach543-item .teach543-pic-area img {
          width: 100%;
          height: auto; }
        .teach543-main-area .teach543-item-box .teach543-item .teach543-pic-area .teach543-date {
          width: 100%;
          padding: 22px 20px 0px;
          font-family: Arial;
          font-size: 15px;
          font-weight: bold;
          color: #fff;
          position: absolute;
          bottom: -2px;
          left: 0; }
          @media screen and (min-width: 1200px) {
            .teach543-main-area .teach543-item-box .teach543-item .teach543-pic-area .teach543-date {
              padding: 26px 20px 0px; } }
      .teach543-main-area .teach543-item-box .teach543-item .teach543-info-area {
        border-radius: 0 0 30px 30px;
        padding: 12px 20px 25px; }
        .teach543-main-area .teach543-item-box .teach543-item .teach543-info-area .teach543-title {
          display: inline-block;
          font-weight: bold;
          font-size: 18px;
          color: #333;
          margin-bottom: 5px;
          text-align: justify; }
        .teach543-main-area .teach543-item-box .teach543-item .teach543-info-area .teach543-detail {
          font-size: 16px;
          color: #333;
          line-height: 1.6em;
          text-align: justify; }
      .teach543-main-area .teach543-item-box .teach543-item.brown {
        border-top: 10px solid #de9a32; }
        .teach543-main-area .teach543-item-box .teach543-item.brown .teach543-pic-area .teach543-date {
          background: url(../img/543/543_bg01_2x.png) top center no-repeat;
          background-size: cover; }
        .teach543-main-area .teach543-item-box .teach543-item.brown .teach543-info-area {
          background-color: #ffd390; }
      .teach543-main-area .teach543-item-box .teach543-item.green {
        border-top: 10px solid #4ec2a1; }
        .teach543-main-area .teach543-item-box .teach543-item.green .teach543-pic-area .teach543-date {
          background: url(../img/543/543_bg02_2x.png) top center no-repeat;
          background-size: cover; }
        .teach543-main-area .teach543-item-box .teach543-item.green .teach543-info-area {
          background-color: #8ed7c2; }
      .teach543-main-area .teach543-item-box .teach543-item.blue {
        border-top: 10px solid #52b1c9; }
        .teach543-main-area .teach543-item-box .teach543-item.blue .teach543-pic-area .teach543-date {
          background: url(../img/543/543_bg03_2x.png) top center no-repeat;
          background-size: cover; }
        .teach543-main-area .teach543-item-box .teach543-item.blue .teach543-info-area {
          background-color: #afdde9; }
      .teach543-main-area .teach543-item-box .teach543-item.red {
        border-top: 10px solid #ff8b8b; }
        .teach543-main-area .teach543-item-box .teach543-item.red .teach543-pic-area .teach543-date {
          background: url(../img/543/543_bg04_2x.png) top center no-repeat;
          background-size: cover; }
        .teach543-main-area .teach543-item-box .teach543-item.red .teach543-info-area {
          background-color: #ffc2c2; }
      .teach543-main-area .teach543-item-box .teach543-item.orange {
        border-top: 10px solid #e55c1e; }
        .teach543-main-area .teach543-item-box .teach543-item.orange .teach543-info-area {
          background-color: #ffcc9a; }
  .teach543-main-area.education {
    padding: 0px; }
    @media screen and (min-width: 768px) {
      .teach543-main-area.education {
        padding: 60px 0; } }
    .teach543-main-area.education .teach543-item-box {
      padding: 0 15px; }
      @media screen and (min-width: 768px) {
        .teach543-main-area.education .teach543-item-box {
          padding: 0 10px; } }
      @media screen and (min-width: 992px) {
        .teach543-main-area.education .teach543-item-box {
          padding: 0 25px; } }
      @media screen and (min-width: 1200px) {
        .teach543-main-area.education .teach543-item-box {
          padding: 0 30px;
          margin-bottom: 60px; } }
      .teach543-main-area.education .teach543-item-box .edu-publish-date {
        text-align: right;
        font-size: 15px;
        font-family: Arial;
        font-weight: bold;
        color: #f6830e;
        margin-bottom: 5px; }
      .teach543-main-area.education .teach543-item-box .teach543-item {
        cursor: auto; }
        .teach543-main-area.education .teach543-item-box .teach543-item .teach543-pic-area .teach543-date {
          background: url(../img/543/diary_bg.png) 0 bottom no-repeat;
          background-size: 100%;
          font-size: 13px;
          font-weight: bold;
          font-family: '微軟正黑體';
          color: #846e59;
          padding: 10% 10px 10px; }
          @media screen and (min-width: 360px) {
            .teach543-main-area.education .teach543-item-box .teach543-item .teach543-pic-area .teach543-date {
              font-size: 15px; } }
          @media screen and (min-width: 390px) {
            .teach543-main-area.education .teach543-item-box .teach543-item .teach543-pic-area .teach543-date {
              font-size: 16px; } }
          @media screen and (min-width: 400px) {
            .teach543-main-area.education .teach543-item-box .teach543-item .teach543-pic-area .teach543-date {
              padding: 12% 15px 10px; } }
          @media screen and (min-width: 570px) {
            .teach543-main-area.education .teach543-item-box .teach543-item .teach543-pic-area .teach543-date {
              font-size: 13px;
              padding: 35px 9px 5px; } }
          @media screen and (min-width: 768px) {
            .teach543-main-area.education .teach543-item-box .teach543-item .teach543-pic-area .teach543-date {
              padding: 25px 9px 3px; } }
          @media screen and (min-width: 992px) {
            .teach543-main-area.education .teach543-item-box .teach543-item .teach543-pic-area .teach543-date {
              font-size: 14px;
              padding: 22px 20px 0px; } }
          @media screen and (min-width: 1200px) {
            .teach543-main-area.education .teach543-item-box .teach543-item .teach543-pic-area .teach543-date {
              padding: 35px 20px 0px; } }
          .teach543-main-area.education .teach543-item-box .teach543-item .teach543-pic-area .teach543-date span {
            color: #e55412; }
        .teach543-main-area.education .teach543-item-box .teach543-item .teach543-info-area {
          padding: 0 15px 15px; }
          @media screen and (min-width: 400px) {
            .teach543-main-area.education .teach543-item-box .teach543-item .teach543-info-area {
              padding: 12px 20px 20px; } }
          @media screen and (min-width: 992px) {
            .teach543-main-area.education .teach543-item-box .teach543-item .teach543-info-area {
              padding: 12px 20px 30px; } }
          .teach543-main-area.education .teach543-item-box .teach543-item .teach543-info-area .teach543-title {
            display: block;
            position: relative;
            padding-left: 54px; }
            .teach543-main-area.education .teach543-item-box .teach543-item .teach543-info-area .teach543-title:before {
              content: '';
              display: block;
              font-size: 18px;
              color: #333;
              position: absolute;
              top: 0;
              left: 0; }
            .teach543-main-area.education .teach543-item-box .teach543-item .teach543-info-area .teach543-title.target:before {
              content: '對象：'; }
            .teach543-main-area.education .teach543-item-box .teach543-item .teach543-info-area .teach543-title.situation:before {
              content: '情境：'; }
          .teach543-main-area.education .teach543-item-box .teach543-item .teach543-info-area .edu-btn-area {
            margin-top: 15px;
            text-align: center;
            margin-left: -20px;
            margin-right: -20px; }
            @media screen and (min-width: 992px) {
              .teach543-main-area.education .teach543-item-box .teach543-item .teach543-info-area .edu-btn-area {
                margin-left: 0;
                margin-right: 0; } }
            .teach543-main-area.education .teach543-item-box .teach543-item .teach543-info-area .edu-btn-area .edu-btn {
              display: inline-block;
              border: 2px solid #f47c64;
              background-color: #FEDAB6;
              border-radius: 20px;
              padding: 3px 15px;
              color: #f25839;
              font-weight: bold;
              font-size: 15px;
              margin: 0 10px 10px; }
              .teach543-main-area.education .teach543-item-box .teach543-item .teach543-info-area .edu-btn-area .edu-btn:hover {
                color: #fff;
                background-color: #f47c64; }
              @media screen and (min-width: 570px) {
                .teach543-main-area.education .teach543-item-box .teach543-item .teach543-info-area .edu-btn-area .edu-btn {
                  margin: 0 5px 10px; } }
              @media screen and (min-width: 768px) {
                .teach543-main-area.education .teach543-item-box .teach543-item .teach543-info-area .edu-btn-area .edu-btn {
                  margin: 0 5px 10px; } }
              @media screen and (min-width: 992px) {
                .teach543-main-area.education .teach543-item-box .teach543-item .teach543-info-area .edu-btn-area .edu-btn {
                  margin: 0 5px 10px; } }
              @media screen and (min-width: 1200px) {
                .teach543-main-area.education .teach543-item-box .teach543-item .teach543-info-area .edu-btn-area .edu-btn {
                  margin: 0 10px 10px; } }

.page-header-area.news .page-media-box {
  position: relative; }
  .page-header-area.news .page-media-box .teach543-type-area {
    position: absolute;
    top: -32px;
    right: 10px;
    z-index: 2; }
    .page-header-area.news .page-media-box .teach543-type-area .item-type {
      display: inline-block;
      width: 65px;
      height: 45px;
      margin: 0 3px; }
      .page-header-area.news .page-media-box .teach543-type-area .item-type.hot {
        background: url(../img/543/type_hot_2x.png) no-repeat;
        background-size: 65px; }
        @media screen and (min-width: 768px) {
          .page-header-area.news .page-media-box .teach543-type-area .item-type.hot {
            background: url(../img/543/type_hot.png) no-repeat;
            background-size: 65px; } }
      .page-header-area.news .page-media-box .teach543-type-area .item-type.new {
        background: url(../img/543/type_new_2x.png) no-repeat;
        background-size: 65px; }
        @media screen and (min-width: 768px) {
          .page-header-area.news .page-media-box .teach543-type-area .item-type.new {
            background: url(../img/543/type_new.png) no-repeat;
            background-size: 65px; } }

.fb-reply-area {
  padding: 50px;
  background-color: #fff;
  position: relative;
  margin-bottom: 150px;
  margin-top: 130px; }
  @media screen and (min-width: 992px) {
    .fb-reply-area {
      margin-bottom: 60px; } }
  .fb-reply-area:before {
    content: '';
    display: none;
    width: 110px;
    height: 68px;
    background: url(../img/543/fb_pic01_2x.png) no-repeat;
    background-size: 110px;
    position: absolute;
    top: -32px;
    left: 60px; }
    @media screen and (min-width: 550px) {
      .fb-reply-area:before {
        display: block; } }
    @media screen and (min-width: 768px) {
      .fb-reply-area:before {
        background: url(../img/543/fb_pic01.png) no-repeat;
        background-size: 110px; } }
  .fb-reply-area:after {
    content: '';
    display: block;
    width: 97px;
    height: 133px;
    background: url(../img/543/fb_pic02_2x.png) no-repeat;
    background-size: 97px;
    position: absolute;
    top: -93px;
    right: 37px; }
    @media screen and (min-width: 768px) {
      .fb-reply-area:after {
        background: url(../img/543/fb_pic02.png) no-repeat;
        background-size: 97px; } }
  .fb-reply-area.no-icon:before {
    display: none; }
  .fb-reply-area.no-icon:after {
    display: none; }

/*
* @Author: ansen
* @Date:   2017-10-11 16:38:06
* @Last Modified by:   ansen
* @Last Modified time: 2018-10-23 16:54:46
*/
.quiz-input-main-area {
  position: relative; }
  @media screen and (min-width: 768px) {
    .quiz-input-main-area {
      padding: 20px 30px 245px 47.38%; } }
  @media screen and (min-width: 992px) {
    .quiz-input-main-area {
      padding: 20px 30px 245px 470px; } }
  @media screen and (min-width: 1200px) {
    .quiz-input-main-area {
      padding: 20px 30px 245px 580px; } }
  .quiz-input-main-area:after {
    content: '';
    display: block;
    width: 100%;
    max-width: 486px;
    height: 340px;
    margin: 150px auto 0;
    background: url(../img/quiz/pic_2x.png) 0px 0px no-repeat;
    background-size: 100%; }
    @media screen and (min-width: 768px) {
      .quiz-input-main-area:after {
        width: 49%;
        height: 0;
        padding-bottom: 34.27%;
        background: url(../img/quiz/pic.png) 0px 0px no-repeat;
        background-size: 100%;
        margin: 0;
        position: absolute;
        top: 10px;
        left: 0; } }
    @media screen and (min-width: 992px) {
      .quiz-input-main-area:after {
        width: 486px;
        height: 340px;
        background: url(../img/quiz/pic.png) 0px 0px no-repeat;
        background-size: 486px; } }
    @media screen and (min-width: 1200px) {
      .quiz-input-main-area:after {
        left: 50px; } }
  .quiz-input-main-area .quiz-input-area .quiz-input-info {
    font-weight: bold;
    font-size: 20px;
    color: #e07205;
    margin-bottom: 37px; }
  .quiz-input-main-area .quiz-input-area .quiz-input-group {
    margin-bottom: 20px; }
    .quiz-input-main-area .quiz-input-area .quiz-input-group label {
      width: 80px;
      font-weight: bold;
      font-size: 18px;
      color: #724e45; }
    .quiz-input-main-area .quiz-input-area .quiz-input-group .form-control {
      display: inline-block;
      width: calc(100% - 90px);
      height: 40px;
      border: 1px solid #ead98c;
      box-shadow: none;
      border-radius: 6px; }

.main-area .ac-custom {
  padding: 0;
  max-width: none; }
  @media screen and (min-width: 768px) {
    .main-area .ac-custom {
      padding: 0 50px; } }

.quiz-box {
  padding-bottom: 50px;
  position: relative; }
  @media screen and (min-width: 992px) {
    .quiz-box {
      margin-bottom: 55px; } }
  .quiz-box .quiz-question {
    font-weight: bold;
    font-size: 22px;
    color: #e07205;
    position: relative;
    padding-left: 45px;
    line-height: 1.5em; }
    .quiz-box .quiz-question:before {
      content: '';
      display: block;
      width: 27px;
      height: 31px;
      position: absolute;
      top: 0;
      left: 0; }
    .quiz-box .quiz-question.q1:before {
      background: url(../img/quiz/nb01_2x.png) 0px 0px no-repeat;
      background-size: 100%; }
      @media screen and (min-width: 768px) {
        .quiz-box .quiz-question.q1:before {
          background: url(../img/quiz/nb01.png) 0px 0px no-repeat; } }
    .quiz-box .quiz-question.q2:before {
      background: url(../img/quiz/nb02_2x.png) 0px 0px no-repeat;
      background-size: 100%; }
      @media screen and (min-width: 768px) {
        .quiz-box .quiz-question.q2:before {
          background: url(../img/quiz/nb02.png) 0px 0px no-repeat; } }
    .quiz-box .quiz-question.q3:before {
      background: url(../img/quiz/nb03_2x.png) 0px 0px no-repeat;
      background-size: 100%; }
      @media screen and (min-width: 768px) {
        .quiz-box .quiz-question.q3:before {
          background: url(../img/quiz/nb03.png) 0px 0px no-repeat; } }
    .quiz-box .quiz-question.q4:before {
      background: url(../img/quiz/nb04_2x.png) 0px 0px no-repeat;
      background-size: 100%; }
      @media screen and (min-width: 768px) {
        .quiz-box .quiz-question.q4:before {
          background: url(../img/quiz/nb04.png) 0px 0px no-repeat; } }
    .quiz-box .quiz-question.qq:before {
      width: 36px;
      height: 34px;
      background: url(../img/quiz/title_word_2x.png) 0px 0px no-repeat;
      background-size: 100%; }
      @media screen and (min-width: 768px) {
        .quiz-box .quiz-question.qq:before {
          background: url(../img/quiz/title_word.png) 0px 0px no-repeat; } }
  .quiz-box .answe-list {
    max-width: none;
    padding: 0 0 50px;
    margin: 0; }
    @media screen and (min-width: 768px) {
      .quiz-box .answe-list {
        padding: 0 10px 50px; } }
    @media screen and (min-width: 992px) {
      .quiz-box .answe-list {
        padding: 0 10px;
        width: 50%; }
        .quiz-box .answe-list.act2018 {
          width: 70%; } }
    .quiz-box .answe-list li {
      padding: 1em 0 0 0;
      margin-top: 30px; }
    .quiz-box .answe-list li + li {
      margin-top: 0; }
    .quiz-box .answe-list input[type="radio"], .quiz-box .answe-list label::before {
      width: 20px;
      height: 20px;
      margin-top: 4px;
      top: 0; }
    .quiz-box .answe-list label {
      font-size: 18px;
      color: #724e45;
      padding: 0 0 0 45px; }
      @media screen and (min-width: 768px) {
        .quiz-box .answe-list label {
          padding: 0 0 0 50px; } }
      .quiz-box .answe-list label .label-question {
        display: inline-block;
        position: relative;
        padding-left: 25px;
        line-height: 1.6em;
        text-align: justify; }
        @media screen and (min-width: 768px) {
          .quiz-box .answe-list label .label-question {
            padding-left: 30px; } }
        .quiz-box .answe-list label .label-question .label-mark {
          position: absolute;
          top: 0;
          left: 0; }
      .quiz-box .answe-list label:before {
        background-color: #e8ddc0; }
      @media screen and (min-width: 480px) {
        .quiz-box .answe-list label {
          padding: 0 0 0 80px; } }
    .quiz-box .answe-list input[type="radio"]:checked + label, .quiz-box .answe-list label:hover {
      color: #f0ae00; }
    .quiz-box .answe-list svg {
      width: 40px;
      height: 40px;
      margin-top: 8px;
      left: 0;
      top: 0; }
    .quiz-box .answe-list svg path {
      stroke: #f0ae00;
      stroke-width: 7px; }
  @media screen and (min-width: 992px) {
    .quiz-box .quiz-pic {
      position: absolute;
      bottom: 48px;
      right: 0; } }
  .quiz-box .quiz-pic img {
    margin: auto; }
  .quiz-box .quiz-pic .pc {
    display: none; }
    @media screen and (min-width: 768px) {
      .quiz-box .quiz-pic .pc {
        display: block; } }
  .quiz-box .quiz-pic .mb {
    display: block;
    width: 100%;
    max-width: 261px; }
    @media screen and (min-width: 768px) {
      .quiz-box .quiz-pic .mb {
        display: none; } }

.quiz-next-btn-area {
  margin-bottom: 195px;
  text-align: center; }
  @media screen and (min-width: 380px) {
    .quiz-next-btn-area {
      margin-bottom: 170px; } }
  @media screen and (min-width: 992px) {
    .quiz-next-btn-area {
      margin-bottom: 120px; } }
  .quiz-next-btn-area .quiz-next-btn {
    width: 250px;
    text-align: center;
    padding: 10px 0; }

.quiz-result-area {
  position: relative;
  padding: 0 0px 15px; }
  @media screen and (min-width: 610px) {
    .quiz-result-area {
      padding: 0 0px 50px; } }
  @media screen and (min-width: 768px) {
    .quiz-result-area {
      padding: 0 15px 50px; } }
  @media screen and (min-width: 920px) {
    .quiz-result-area {
      padding: 30px 0px 50px 49.04%; } }
  @media screen and (min-width: 1200px) {
    .quiz-result-area {
      padding: 30px 40px 50px 467px; } }
  .quiz-result-area .quiz-result-pic {
    margin-bottom: 30px; }
    @media screen and (min-width: 920px) {
      .quiz-result-area .quiz-result-pic {
        width: 43.04%;
        max-width: 427px;
        margin-bottom: 0;
        position: absolute;
        top: 0;
        left: 40px; } }
    .quiz-result-area .quiz-result-pic img {
      margin: auto; }
    .quiz-result-area .quiz-result-pic .pc {
      display: none;
      width: 100%;
      max-width: 427px; }
      @media screen and (min-width: 768px) {
        .quiz-result-area .quiz-result-pic .pc {
          display: block; } }
    .quiz-result-area .quiz-result-pic .mb {
      display: block;
      width: 75%;
      min-width: 291px;
      max-width: 427px; }
      @media screen and (min-width: 600px) {
        .quiz-result-area .quiz-result-pic .mb {
          width: 100%;
          max-width: 427px; } }
      @media screen and (min-width: 768px) {
        .quiz-result-area .quiz-result-pic .mb {
          display: none; } }
  .quiz-result-area .quiz-result-content {
    padding-bottom: 15px; }
    @media screen and (min-width: 992px) {
      .quiz-result-area .quiz-result-content {
        padding-left: 20px;
        padding-bottom: 0; } }
    @media screen and (min-width: 1200px) {
      .quiz-result-area .quiz-result-content {
        padding-left: 50px; } }
    .quiz-result-area .quiz-result-content .quiz-result-sub {
      font-weight: bold;
      font-size: 20px;
      color: #724e45;
      margin-bottom: 15px;
      text-align: center; }
      @media screen and (min-width: 768px) {
        .quiz-result-area .quiz-result-content .quiz-result-sub {
          margin-bottom: 30px;
          text-align: left; } }
    .quiz-result-area .quiz-result-content .quiz-result-title {
      font-weight: bold;
      font-size: 22px;
      color: #e07205;
      margin-bottom: 15px;
      text-align: center; }
      @media screen and (min-width: 768px) {
        .quiz-result-area .quiz-result-content .quiz-result-title {
          text-align: left; } }
      .quiz-result-area .quiz-result-content .quiz-result-title span {
        display: inline-block;
        line-height: 1.5em; }
      .quiz-result-area .quiz-result-content .quiz-result-title .quiz-result-class {
        margin-right: 10px;
        font-size: 24px;
        line-height: 1.5em; }
        .quiz-result-area .quiz-result-content .quiz-result-title .quiz-result-class.whale {
          color: #458da5; }
        .quiz-result-area .quiz-result-content .quiz-result-title .quiz-result-class.elephant {
          color: #56b060; }
        .quiz-result-area .quiz-result-content .quiz-result-title .quiz-result-class.hippo {
          color: #5ea766; }
        .quiz-result-area .quiz-result-content .quiz-result-title .quiz-result-class.tiger {
          color: #ec624c; }
    .quiz-result-area .quiz-result-content .quiz-result-text {
      font-size: 18px;
      color: #724e45;
      text-align: justify;
      margin-bottom: 30px;
      line-height: 1.6em; }
      @media screen and (min-width: 1200px) {
        .quiz-result-area .quiz-result-content .quiz-result-text {
          margin-bottom: 50px; } }
    .quiz-result-area .quiz-result-content .quiz-result-btn-area {
      width: 100%;
      text-align: center; }
      @media screen and (min-width: 600px) {
        .quiz-result-area .quiz-result-content .quiz-result-btn-area {
          text-align: left; } }
      .quiz-result-area .quiz-result-content .quiz-result-btn-area:after {
        display: block;
        content: '';
        clear: both; }
      .quiz-result-area .quiz-result-content .quiz-result-btn-area .click-btn {
        width: 100%;
        padding: 10px 0;
        float: left;
        letter-spacing: 0.08em;
        font-size: 18px; }
        @media screen and (min-width: 450px) {
          .quiz-result-area .quiz-result-content .quiz-result-btn-area .click-btn {
            width: calc( 50% - 12px); } }
        @media screen and (min-width: 600px) {
          .quiz-result-area .quiz-result-content .quiz-result-btn-area .click-btn {
            width: calc( 33.33% - 16px);
            float: left; } }
        @media screen and (min-width: 920px) {
          .quiz-result-area .quiz-result-content .quiz-result-btn-area .click-btn {
            width: calc( 50% - 12px); } }
        @media screen and (min-width: 1200px) {
          .quiz-result-area .quiz-result-content .quiz-result-btn-area .click-btn {
            width: calc( 33.33% - 16px); } }
      @media screen and (min-width: 450px) {
        .quiz-result-area .quiz-result-content .quiz-result-btn-area .practice {
          width: 100%; } }
      @media screen and (min-width: 600px) {
        .quiz-result-area .quiz-result-content .quiz-result-btn-area .practice {
          width: calc( 33.33% - 16px); } }
      @media screen and (min-width: 920px) {
        .quiz-result-area .quiz-result-content .quiz-result-btn-area .practice {
          width: 100%; } }
      @media screen and (min-width: 1200px) {
        .quiz-result-area .quiz-result-content .quiz-result-btn-area .practice {
          width: calc( 33.33% - 16px); } }
      @media screen and (min-width: 450px) {
        .quiz-result-area .quiz-result-content .quiz-result-btn-area .share-fb {
          margin-left: 24px !important; } }
      @media screen and (min-width: 600px) {
        .quiz-result-area .quiz-result-content .quiz-result-btn-area .share-fb {
          margin-left: 0; } }
      @media screen and (min-width: 920px) {
        .quiz-result-area .quiz-result-content .quiz-result-btn-area .share-fb {
          margin-left: 24px !important; } }
      @media screen and (min-width: 1200px) {
        .quiz-result-area .quiz-result-content .quiz-result-btn-area .share-fb {
          margin-left: 0; } }
      .quiz-result-area .quiz-result-content .quiz-result-btn-area .click-btn + .click-btn {
        margin-top: 20px; }
        @media screen and (min-width: 450px) {
          .quiz-result-area .quiz-result-content .quiz-result-btn-area .click-btn + .click-btn {
            margin-left: 0; } }
        @media screen and (min-width: 600px) {
          .quiz-result-area .quiz-result-content .quiz-result-btn-area .click-btn + .click-btn {
            margin-top: 0;
            margin-left: 24px; } }
        @media screen and (min-width: 920px) {
          .quiz-result-area .quiz-result-content .quiz-result-btn-area .click-btn + .click-btn {
            margin-left: 0;
            margin-top: 20px; } }
        @media screen and (min-width: 1200px) {
          .quiz-result-area .quiz-result-content .quiz-result-btn-area .click-btn + .click-btn {
            margin-left: 24px;
            margin-top: 0; } }

.designer-main-area {
  background-color: #FFF6CD; }
  .designer-main-area .designer-wrap {
    background: url(../img/quiz/result/test_bg_2x.png) 50% -1px no-repeat;
    background-size: 420px;
    padding: 280px 0 80px; }
    @media screen and (min-width: 540px) {
      .designer-main-area .designer-wrap {
        padding: 230px 0 80px; } }
    @media screen and (min-width: 680px) {
      .designer-main-area .designer-wrap {
        padding: 190px 0 80px; } }
    @media screen and (min-width: 768px) {
      .designer-main-area .designer-wrap {
        background: url(../img/quiz/result/test_bg.png) 0px -1px no-repeat;
        background-size: 513px;
        padding: 180px 0 100px; } }
    @media screen and (min-width: 900px) {
      .designer-main-area .designer-wrap {
        padding: 150px 0 100px; } }
    @media screen and (min-width: 992px) {
      .designer-main-area .designer-wrap {
        background: url(../img/quiz/result/test_bg.png) 0px -1px no-repeat;
        background-size: 548px; } }
    @media screen and (min-width: 1200px) {
      .designer-main-area .designer-wrap {
        padding: 100px 0; } }
    .designer-main-area .designer-wrap .designer-box {
      min-height: 500px;
      padding: 127px 45px 100px 45px;
      position: relative;
      background: url(../img/quiz/result/bg02.png) 60% 0px no-repeat;
      background-size: 827px; }
      @media screen and (min-width: 480px) {
        .designer-main-area .designer-wrap .designer-box {
          background: url(../img/quiz/result/bg02.png) 75% 0px no-repeat;
          background-size: 827px; } }
      @media screen and (min-width: 660px) {
        .designer-main-area .designer-wrap .designer-box {
          padding: 140px 100px 100px 18%; } }
      @media screen and (min-width: 768px) {
        .designer-main-area .designer-wrap .designer-box {
          padding: 140px 140px 100px 29.23%; } }
      @media screen and (min-width: 992px) {
        .designer-main-area .designer-wrap .designer-box {
          background: url(../img/quiz/result/bg02.png) 50% 0px no-repeat;
          background-size: 827px;
          padding: 140px 280px 100px 290px; } }
      @media screen and (min-width: 1200px) {
        .designer-main-area .designer-wrap .designer-box {
          padding: 140px 390px 100px 400px; } }
      .designer-main-area .designer-wrap .designer-box .designer-pic {
        width: 230px;
        position: absolute;
        top: -135px;
        right: 9%;
        border-radius: 50%;
        border: 10px solid #fde477;
        overflow: hidden; }
        .designer-main-area .designer-wrap .designer-box .designer-pic img {
          width: 100%; }
        @media screen and (min-width: 540px) {
          .designer-main-area .designer-wrap .designer-box .designer-pic {
            top: -80px; } }
        @media screen and (min-width: 768px) {
          .designer-main-area .designer-wrap .designer-box .designer-pic {
            width: auto;
            top: -70px; } }
        @media screen and (min-width: 900px) {
          .designer-main-area .designer-wrap .designer-box .designer-pic {
            top: -40px; } }
        @media screen and (min-width: 992px) {
          .designer-main-area .designer-wrap .designer-box .designer-pic {
            top: 135px;
            right: 0px; } }
        @media screen and (min-width: 1200px) {
          .designer-main-area .designer-wrap .designer-box .designer-pic {
            right: 108px; } }
      .designer-main-area .designer-wrap .designer-box .designer-title {
        font-weight: bold;
        font-size: 20px;
        color: #724e45;
        margin-bottom: 22px; }
      .designer-main-area .designer-wrap .designer-box .designer-name {
        font-weight: bold;
        font-size: 18px;
        color: #724e45;
        margin-bottom: 5px; }
        .designer-main-area .designer-wrap .designer-box .designer-name .doctor-name {
          color: #fa6e6e; }
      .designer-main-area .designer-wrap .designer-box .designer-job {
        font-size: 18px;
        color: #724e45;
        margin-bottom: 20px; }
        @media screen and (min-width: 992px) {
          .designer-main-area .designer-wrap .designer-box .designer-job {
            margin-bottom: 33px; } }
      .designer-main-area .designer-wrap .designer-box .designer-info {
        font-size: 18px;
        color: #724e45;
        text-align: justify;
        line-height: 1.7em; }

.quiz-intro-title {
  text-align: center;
  margin-bottom: 10px; }
  @media screen and (min-width: 800px) {
    .quiz-intro-title {
      text-align: left;
      margin-bottom: 0; } }
  @media screen and (min-width: 900px) {
    .quiz-intro-title {
      padding-left: 5%; } }
  @media screen and (min-width: 992px) {
    .quiz-intro-title {
      padding-left: 0; } }
  .quiz-intro-title .quiz-intro-title-pic {
    position: relative;
    display: inline-block;
    padding-left: 32px; }
    @media screen and (min-width: 1200px) {
      .quiz-intro-title .quiz-intro-title-pic {
        padding-left: 132px; } }
    .quiz-intro-title .quiz-intro-title-pic .pc, .quiz-intro-title .quiz-intro-title-pic .mb {
      max-width: 319px; }
    .quiz-intro-title .quiz-intro-title-pic .pc {
      display: none; }
      @media screen and (min-width: 768px) {
        .quiz-intro-title .quiz-intro-title-pic .pc {
          display: inline; } }
    .quiz-intro-title .quiz-intro-title-pic .mb {
      display: inline;
      width: 100%; }
      @media screen and (min-width: 768px) {
        .quiz-intro-title .quiz-intro-title-pic .mb {
          display: none; } }
    .quiz-intro-title .quiz-intro-title-pic:before {
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      background-color: #e8684f;
      position: absolute;
      top: 6px;
      left: 10px;
      transform: rotate(45deg); }
      @media screen and (min-width: 1200px) {
        .quiz-intro-title .quiz-intro-title-pic:before {
          left: 110px; } }

.quiz-intro-area {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: auto;
  padding: 0px 0px 200px; }
  @media screen and (min-width: 380px) {
    .quiz-intro-area {
      padding: 0px 0px 170px; } }
  @media screen and (min-width: 600px) {
    .quiz-intro-area {
      padding: 40px 0px 190px; } }
  @media screen and (min-width: 800px) {
    .quiz-intro-area {
      padding: 60px 0px 200px; } }
  @media screen and (min-width: 900px) {
    .quiz-intro-area {
      width: 90%; } }
  @media screen and (min-width: 992px) {
    .quiz-intro-area {
      width: 100%;
      padding: 60px 0px 150px; } }
  @media screen and (min-width: 1200px) {
    .quiz-intro-area {
      padding: 60px 100px 190px; } }
  .quiz-intro-area .quiz-intro-left {
    width: 100%;
    max-width: 570px;
    margin: 0 auto 10px; }
    @media screen and (min-width: 600px) {
      .quiz-intro-area .quiz-intro-left {
        margin: 0 auto 15px; } }
    @media screen and (min-width: 800px) {
      .quiz-intro-area .quiz-intro-left {
        width: 450px;
        max-width: none;
        display: table-cell;
        margin: auto; } }
    @media screen and (min-width: 992px) {
      .quiz-intro-area .quiz-intro-left {
        width: 570px; } }
    @media screen and (min-width: 1200px) {
      .quiz-intro-area .quiz-intro-left {
        width: 570px; } }
    .quiz-intro-area .quiz-intro-left .quiz-intro-video {
      padding: 9px 12px;
      border: 14px solid transparent;
      border-image: url(../img/quiz/test_outline_video.png) 14 round;
      background-color: #000; }
  .quiz-intro-area .quiz-intro-right {
    vertical-align: top; }
    @media screen and (min-width: 600px) {
      .quiz-intro-area .quiz-intro-right {
        padding: 0 20px; } }
    @media screen and (min-width: 800px) {
      .quiz-intro-area .quiz-intro-right {
        display: table-cell;
        padding: 0 0 0 20px; } }
    @media screen and (min-width: 900px) {
      .quiz-intro-area .quiz-intro-right {
        padding: 0 0 0 5%; } }
    @media screen and (min-width: 1200px) {
      .quiz-intro-area .quiz-intro-right {
        padding: 0 0 0 68px; } }
    .quiz-intro-area .quiz-intro-right .quiz-intro-subtitle {
      font-weight: bold;
      font-size: 24px;
      color: #724e45;
      margin-bottom: 12px; }
    .quiz-intro-area .quiz-intro-right .quiz-intro-text {
      font-size: 18px;
      color: #724e45;
      line-height: 1.6em; }
  .quiz-intro-area .quiz-intro-center {
    text-align: center;
    font-size: 18px;
    color: #724e45;
    line-height: 1.6em; }
    .quiz-intro-area .quiz-intro-center .quiz-intro-content {
      padding: 10px 0 20px; }
      @media screen and (min-width: 768px) {
        .quiz-intro-area .quiz-intro-center .quiz-intro-content {
          padding: 0; } }
      .quiz-intro-area .quiz-intro-center .quiz-intro-content .quiz-intro-content-box {
        padding: 5px 40px;
        display: inline-block;
        position: relative; }
        .quiz-intro-area .quiz-intro-center .quiz-intro-content .quiz-intro-content-box:before {
          width: 24px;
          height: 19px;
          display: block;
          content: '';
          background: url(../img/quiz/2018/point_up_2x.png) no-repeat;
          background-size: 24px;
          position: absolute;
          top: 0;
          left: 0; }
          @media screen and (min-width: 768px) {
            .quiz-intro-area .quiz-intro-center .quiz-intro-content .quiz-intro-content-box:before {
              background: url(../img/quiz/2018/point_up.png) no-repeat;
              background-size: 24px; } }
        .quiz-intro-area .quiz-intro-center .quiz-intro-content .quiz-intro-content-box:after {
          width: 24px;
          height: 19px;
          display: block;
          content: '';
          background: url(../img/quiz/2018/point_down_2x.png) no-repeat;
          background-size: 24px;
          position: absolute;
          bottom: 0;
          right: 0; }
          @media screen and (min-width: 768px) {
            .quiz-intro-area .quiz-intro-center .quiz-intro-content .quiz-intro-content-box:after {
              background: url(../img/quiz/2018/point_down.png) no-repeat;
              background-size: 24px; } }
        .quiz-intro-area .quiz-intro-center .quiz-intro-content .quiz-intro-content-box .content-title {
          font-size: 22px;
          font-weight: bold;
          margin-bottom: 18px; }
  .quiz-intro-area .start-test-btn {
    display: inline-block;
    width: 200px;
    height: 55px;
    line-height: 55px;
    font-size: 24px;
    border-radius: 20px;
    margin-top: 30px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #fff;
    background-color: #F47C64;
    box-shadow: 0 13px #E66B4A;
    position: relative; }
    @media screen and (min-width: 600px) {
      .quiz-intro-area .start-test-btn {
        width: 200px;
        height: 55px;
        line-height: 55px;
        font-size: 24px;
        border-radius: 20px;
        margin-top: 60px; } }
    @media screen and (min-width: 800px) {
      .quiz-intro-area .start-test-btn {
        width: 200px;
        height: 55px;
        line-height: 55px;
        font-size: 24px;
        border-radius: 20px;
        margin-top: 80px; } }
    @media screen and (min-width: 992px) {
      .quiz-intro-area .start-test-btn {
        width: 260px;
        height: 75px;
        line-height: 70px;
        font-size: 30px;
        border-radius: 30px;
        margin-top: 70px; } }
    @media screen and (min-width: 1200px) {
      .quiz-intro-area .start-test-btn {
        margin-top: 75px; } }
    .quiz-intro-area .start-test-btn:hover {
      top: -2px;
      box-shadow: 0 15px #E66B4A; }
    .quiz-intro-area .start-test-btn:active {
      top: 9px;
      box-shadow: 0 4px #E66B4A; }

/*
* @Author: ansen
* @Date:   2017-10-12 13:42:12
* @Last Modified by:   ansen
* @Last Modified time: 2017-10-20 10:36:32
*/
.page-title-area.footprint .page-title-img.index {
  position: relative;
  margin-bottom: -57px;
  z-index: 2; }

.footprint-main-area {
  width: 100%;
  background: url(../img/footprint/01.jpg) 0px -5px no-repeat, url(../img/footprint/02.jpg) 100% -1px no-repeat, url(../img/footprint/03.jpg) 0px 100% no-repeat, url(../img/footprint/04.jpg) 100% calc(100% + 8px) no-repeat;
  background-size: 19.12%,17.02%,19.12%,17.02%;
  background-color: #FFEDA1; }
  @media screen and (min-width: 992px) {
    .footprint-main-area {
      background: url(../img/footprint/01.jpg) 0px -5px no-repeat, url(../img/footprint/02.jpg) 100% -1px no-repeat, url(../img/footprint/03.jpg) 0px 100% no-repeat, url(../img/footprint/04.jpg) 100% calc(100% + 14px) no-repeat;
      background-size: 19.12%,194px auto,19.12%,194px auto;
      background-color: #FFEDA1; } }
  @media screen and (min-width: 1200px) {
    .footprint-main-area {
      background: url(../img/footprint/01.jpg) 0px -5px no-repeat, url(../img/footprint/02.jpg) 100% -1px no-repeat, url(../img/footprint/03.jpg) 0px 100% no-repeat, url(../img/footprint/04.jpg) 100% calc(100% + 18px) no-repeat;
      background-size: 19.12%,194px auto,19.12%,194px auto;
      background-color: #FFEDA1; } }
  .footprint-main-area .footprint-box {
    width: 100%;
    padding: 80px 30px 100px;
    position: relative; }
    @media screen and (min-width: 768px) {
      .footprint-main-area .footprint-box {
        padding: 80px 80px 140px; } }
    @media screen and (min-width: 992px) {
      .footprint-main-area .footprint-box {
        padding: 80px 65px 140px 455px; } }
    .footprint-main-area .footprint-box .footprint-pic {
      overflow: hidden;
      text-align: center;
      margin-bottom: 20px;
      max-width: 375px;
      margin-left: auto;
      margin-right: auto; }
      .footprint-main-area .footprint-box .footprint-pic img {
        border-radius: 50%;
        width: 100%;
        max-width: 336px; }
        @media screen and (min-width: 540px) {
          .footprint-main-area .footprint-box .footprint-pic img {
            width: auto;
            max-width: 100%; } }
      @media screen and (min-width: 992px) {
        .footprint-main-area .footprint-box .footprint-pic {
          display: inline-block;
          position: absolute;
          top: 80px;
          left: 80px;
          margin-bottom: 0; } }
    @media screen and (min-width: 992px) {
      .footprint-main-area .footprint-box .footprint-content {
        padding-left: 40px; } }
    .footprint-main-area .footprint-box .footprint-content .footprint-content-title {
      font-weight: bold;
      font-size: 24px;
      color: #ec7700;
      line-height: 1.6em;
      margin-bottom: 20px; }
      @media screen and (min-width: 992px) {
        .footprint-main-area .footprint-box .footprint-content .footprint-content-title {
          margin-bottom: 28px; } }
    .footprint-main-area .footprint-box .footprint-content .footprint-content-text {
      font-size: 18px;
      color: #724e45;
      line-height: 1.7em;
      text-align: justify;
      word-break: break-all; }
    .footprint-main-area .footprint-box .footprint-content .footprint-content-text + .footprint-content-text {
      margin-top: 20px; }
      @media screen and (min-width: 992px) {
        .footprint-main-area .footprint-box .footprint-content .footprint-content-text + .footprint-content-text {
          margin-top: 30px; } }

.time-line-area {
  padding: 50px 0px 0 51px;
  margin-top: 75px;
  margin-bottom: 278px;
  position: relative;
  width: 100%;
  background: url(../img/footprint/orange_pic02_2x.png) 16px center repeat-y;
  background-size: 12px; }
  @media screen and (min-width: 380px) {
    .time-line-area {
      margin-bottom: 220px; } }
  @media screen and (min-width: 480px) {
    .time-line-area {
      padding: 30px 15px 0 90px;
      margin-top: 20px;
      background: url(../img/footprint/orange_pic02_2x.png) 31px center repeat-y;
      background-size: 18px; } }
  @media screen and (min-width: 768px) {
    .time-line-area {
      padding: 0 55px 0 137px;
      margin-top: 80px;
      margin-bottom: 290px;
      background: url(../img/footprint/orange_pic02.png) 60px center repeat-y; } }
  @media screen and (min-width: 992px) {
    .time-line-area {
      padding: 0 55px;
      background: url(../img/footprint/orange_pic02.png) center repeat-y; } }
  @media screen and (min-width: 1200px) {
    .time-line-area {
      padding: 0 155px; } }
  .time-line-area:before {
    content: '';
    display: block;
    width: 157.5px;
    height: 123.5px;
    background: url(../img/footprint/orange_pic01_2x.png) no-repeat;
    background-size: 157.5px;
    position: absolute;
    top: -123px;
    left: -14px; }
    @media screen and (min-width: 480px) {
      .time-line-area:before {
        width: 236.25px;
        height: 185.25px;
        background: url(../img/footprint/orange_pic01_2x.png) no-repeat;
        background-size: 236.25px;
        top: -82px; } }
    @media screen and (min-width: 768px) {
      .time-line-area:before {
        width: 315px;
        height: 247px;
        background: url(../img/footprint/orange_pic01.png) no-repeat;
        background-size: 315px;
        top: -147px;
        left: 0px; } }
    @media screen and (min-width: 992px) {
      .time-line-area:before {
        left: 50%;
        margin-left: -72px; } }
  .time-line-area .footprint-bot {
    display: block;
    width: 103.5px;
    height: 148px;
    background: url(../img/footprint/orange_pic03_2x.png) no-repeat;
    background-size: 103.5px;
    position: absolute;
    bottom: -123px;
    left: -34px; }
    @media screen and (min-width: 480px) {
      .time-line-area .footprint-bot {
        width: 145px;
        height: 222px;
        background: url(../img/footprint/orange_pic03_2x.png) no-repeat;
        background-size: 145px;
        bottom: -136px;
        left: -38px; } }
    @media screen and (min-width: 768px) {
      .time-line-area .footprint-bot {
        width: 205px;
        height: 296px;
        background: url(../img/footprint/orange_pic03.png) no-repeat;
        background-size: 205px;
        bottom: -174px;
        left: -38px; } }
    @media screen and (min-width: 992px) {
      .time-line-area .footprint-bot {
        left: 50%;
        margin-left: -110px; } }
  .time-line-area .row {
    margin-right: 0;
    margin-left: 0; }

.time-line-box {
  width: 100%;
  padding: 15px;
  border-radius: 20px;
  border: 3px solid #ffeda1;
  background-color: #fff;
  position: relative;
  cursor: pointer; }
  @media screen and (min-width: 480px) {
    .time-line-box {
      padding: 25px; } }
  @media screen and (min-width: 992px) {
    .time-line-box {
      width: 350px;
      padding: 35px; } }
  .time-line-box.first {
    margin-top: 0; }
  .time-line-box .time-point {
    width: 24px;
    height: 24px;
    background-color: #F5810A;
    border-radius: 50%;
    position: absolute;
    top: 36px;
    left: -44px; }
    @media screen and (min-width: 480px) {
      .time-line-box .time-point {
        width: 40px;
        height: 40px;
        top: 29px;
        left: -73px; } }
    @media screen and (min-width: 768px) {
      .time-line-box .time-point {
        top: 29px;
        left: -88px; } }
    .time-line-box .time-point span {
      display: block;
      width: 12px;
      height: 12px;
      background-color: #fff;
      border-radius: 50%;
      position: relative;
      top: 6px;
      left: 6px; }
      @media screen and (min-width: 480px) {
        .time-line-box .time-point span {
          width: 20px;
          height: 20px;
          top: 10px;
          left: 10px; } }
  .time-line-box .time-flag {
    width: 129px;
    height: 72px;
    background: url(../img/footprint/flag_2x.png) no-repeat;
    background-size: 129px;
    position: absolute;
    top: -75px;
    left: 14px; }
    @media screen and (min-width: 768px) {
      .time-line-box .time-flag {
        background: url(../img/footprint/flag.png) no-repeat;
        background-size: 129px; } }
    .time-line-box .time-flag span {
      font-weight: bold;
      font-size: 20px;
      color: #fff;
      position: relative;
      top: 26px;
      left: 45px; }
  .time-line-box .time-line-pic {
    width: 100%;
    margin-bottom: 20px; }
    @media screen and (min-width: 480px) {
      .time-line-box .time-line-pic {
        width: auto; } }
    @media screen and (min-width: 700px) {
      .time-line-box .time-line-pic {
        float: left;
        max-width: 280px;
        margin-right: 25px;
        margin-bottom: 0; } }
    @media screen and (min-width: 992px) {
      .time-line-box .time-line-pic {
        float: none;
        margin-bottom: 20px;
        margin-right: 0; } }
    .time-line-box .time-line-pic img {
      width: 100%; }
      @media screen and (min-width: 700px) {
        .time-line-box .time-line-pic img {
          width: auto;
          max-width: 100%; } }
  .time-line-box .time-line-title {
    font-weight: bold;
    font-size: 18px;
    text-align: justify;
    color: #333;
    margin-bottom: 8px;
    margin-top: 4px; }
    @media screen and (min-width: 992px) {
      .time-line-box .time-line-title {
        margin-top: 0; } }
  .time-line-box .time-line-info {
    font-size: 16px;
    color: #333;
    text-align: justify;
    margin-bottom: 30px; }
  .time-line-box .time-line-more {
    font-size: 16px;
    color: #f5800a;
    position: absolute;
    bottom: 20px;
    right: 25px; }
    @media screen and (min-width: 992px) {
      .time-line-box .time-line-more {
        bottom: 25px;
        right: 35px; } }
  .time-line-box:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #ffeda1;
    position: absolute;
    top: 40px;
    left: -11px; }
    @media screen and (min-width: 480px) {
      .time-line-box:before {
        top: 40px;
        left: -15px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 15px solid #ffeda1; } }
  .time-line-box:hover {
    border: 3px solid #ffdc47;
    background-color: #ffeda1; }
  .time-line-box:hover:before {
    border-right: 8px solid #ffdc47; }
    @media screen and (min-width: 480px) {
      .time-line-box:hover:before {
        border-right: 15px solid #ffdc47; } }
  @media screen and (min-width: 992px) {
    .time-line-box:nth-child(odd) {
      float: left; }
      .time-line-box:nth-child(odd):before {
        border-right: none;
        border-left: 15px solid #ffeda1;
        right: -18px;
        left: auto; }
      .time-line-box:nth-child(odd) .time-point {
        left: auto;
        right: -88px; }
      .time-line-box:nth-child(odd):hover:before {
        border-left: 15px solid #ffdc47; } }
  @media screen and (min-width: 992px) {
    .time-line-box:nth-child(even) {
      float: right; }
      .time-line-box:nth-child(even):before {
        border-right: 15px solid #ffeda1;
        left: -18px; }
      .time-line-box:nth-child(even) .time-point {
        left: -88px; }
      .time-line-box:nth-child(even):hover:before {
        border-right: 15px solid #ffdc47; } }

.time-line-box:nth-child(1) {
  margin-top: 120px; }
  @media screen and (min-width: 992px) {
    .time-line-box:nth-child(1) {
      margin-top: 100px; } }

.time-line-box:nth-child(2) {
  margin-top: 120px; }
  @media screen and (min-width: 992px) {
    .time-line-box:nth-child(2) {
      margin-top: 210px; } }

.time-line-box {
  margin-top: 100px; }
  @media screen and (min-width: 450px) {
    .time-line-box {
      margin-top: 120px; } }
  @media screen and (min-width: 768px) {
    .time-line-box {
      margin-top: 140px; } }

.time-line-box.first:nth-child(1) {
  margin-top: 0; }

.time-line-box.first:nth-child(2) {
  margin-top: 120px; }
  @media screen and (min-width: 992px) {
    .time-line-box.first:nth-child(2) {
      margin-top: 140px; } }

.time-line-box .story-pic {
  display: none; }
  @media screen and (min-width: 450px) {
    .time-line-box .story-pic {
      display: block; } }

.time-line-box:nth-child(4n-3) .story-pic {
  position: absolute;
  width: 98.25px;
  height: 107.25px;
  background: url(../img/footprint/story_pic01_2_2x.png) no-repeat;
  background-size: 98.25px;
  right: 15px;
  top: -95px; }
  @media screen and (min-width: 768px) {
    .time-line-box:nth-child(4n-3) .story-pic {
      width: 131px;
      height: 143px;
      background: url(../img/footprint/story_pic01_2_2x.png) no-repeat;
      background-size: 131px;
      right: 15px;
      top: -124px; } }
  @media screen and (min-width: 1200px) {
    .time-line-box:nth-child(4n-3) .story-pic {
      width: 131px;
      height: 143px;
      background: url(../img/footprint/story_pic01_2x.png) no-repeat;
      background-size: 131px;
      left: -140px;
      bottom: 5px;
      right: auto;
      top: auto; } }

.time-line-box:nth-child(4n-2) .story-pic {
  position: absolute;
  width: 54.75px;
  height: 66.75px;
  background: url(../img/footprint/story_pic02_2_2x.png) no-repeat;
  background-size: 54.75px;
  right: 15px;
  top: -65px;
  z-index: -1; }
  @media screen and (min-width: 768px) {
    .time-line-box:nth-child(4n-2) .story-pic {
      width: 73px;
      height: 89px;
      background: url(../img/footprint/story_pic02_2_2x.png) no-repeat;
      background-size: 73px;
      right: 15px;
      top: -83px; } }
  @media screen and (min-width: 1200px) {
    .time-line-box:nth-child(4n-2) .story-pic {
      width: 110px;
      height: 188px;
      background: url(../img/footprint/story_pic02_2x.png) no-repeat;
      background-size: 110px;
      right: -120px;
      bottom: 0;
      top: auto; } }

.time-line-box:nth-child(4n-1) .story-pic {
  position: absolute;
  width: 117.75px;
  height: 85.5px;
  background: url(../img/footprint/story_pic04_2_2x.png) no-repeat;
  background-size: 117.75px;
  right: 20px;
  top: -74px;
  z-index: -1; }
  @media screen and (min-width: 768px) {
    .time-line-box:nth-child(4n-1) .story-pic {
      width: 157px;
      height: 114px;
      background: url(../img/footprint/story_pic04_2_2x.png) no-repeat;
      background-size: 157px; } }
  @media screen and (min-width: 1200px) {
    .time-line-box:nth-child(4n-1) .story-pic {
      width: 104px;
      height: 167px;
      background: url(../img/footprint/story_pic04_2x.png) no-repeat;
      background-size: 104px;
      left: -58px;
      bottom: 55px;
      top: auto;
      right: auto;
      z-index: -1; } }

.time-line-box:nth-child(4n) .story-pic {
  position: absolute;
  width: 68.25px;
  height: 81px;
  background: url(../img/footprint/story_pic03_2x.png) no-repeat;
  background-size: 68.25px;
  right: 12px;
  top: -70px; }
  @media screen and (min-width: 768px) {
    .time-line-box:nth-child(4n) .story-pic {
      width: 91px;
      height: 108px;
      background: url(../img/footprint/story_pic03_2x.png) no-repeat;
      background-size: 91px;
      top: -87px; } }
  @media screen and (min-width: 1200px) {
    .time-line-box:nth-child(4n) .story-pic {
      right: -106px;
      bottom: 0;
      top: auto; } }

/*
* @Author: ansen
* @Date:   2017-10-13 12:14:49
* @Last Modified by:   ansen
* @Last Modified time: 2018-10-16 14:06:52
*/
.picnic-slogan-area {
  text-align: center;
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  opacity: 0; }
  .picnic-slogan-area .picnic-slogan {
    font-weight: bold;
    font-size: 30px;
    color: #e47200;
    line-height: 1.5em;
    margin-bottom: 37px; }
  .picnic-slogan-area .picnic-slogan-subtitle {
    font-weight: bold;
    font-size: 20px;
    color: #6e4b42;
    line-height: 1.5em;
    margin-bottom: 3px; }
  .picnic-slogan-area .picnic-slogan-info {
    font-size: 18px;
    color: #6e4b42;
    line-height: 1.5em;
    margin-bottom: 5px; }
    .picnic-slogan-area .picnic-slogan-info .special {
      color: #e77d19; }

.picnic-main-area {
  padding: 100px 0 330px;
  text-align: center;
  position: relative;
  border-bottom: 1px dashed #eddebf;
  overflow: hidden;
  margin-left: -15px;
  margin-right: -15px; }
  @media screen and (min-width: 768px) {
    .picnic-main-area {
      padding: 100px 0 380px;
      margin-left: 0;
      margin-right: 0; } }
  .picnic-main-area .picnic-left-area {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    background: url(../img/picnic/picnic_bg01.png) center no-repeat;
    background-size: 563px;
    position: relative;
    display: block;
    padding: 142px 15px 161px;
    min-height: 582px; }
    .picnic-main-area .picnic-left-area .schedule-area {
      margin-top: 0px;
      width: 300px;
      margin: 0px auto; }
    @media screen and (min-width: 580px) {
      .picnic-main-area .picnic-left-area {
        display: inline-block;
        padding: 0 105px 161px 105px;
        min-height: auto; }
        .picnic-main-area .picnic-left-area .schedule-area {
          margin-top: 142px;
          width: 359px; } }
    @media screen and (min-width: 768px) {
      .picnic-main-area .picnic-left-area {
        width: 563px;
        height: 551px;
        margin: 0 10px;
        padding: 0;
        position: absolute;
        left: 0;
        top: 98px; }
        .picnic-main-area .picnic-left-area .schedule-area {
          width: auto; } }
    @media screen and (min-width: 1200px) {
      .picnic-main-area .picnic-left-area {
        margin: 0 10px;
        position: relative;
        left: auto;
        top: auto; } }
    .picnic-main-area .picnic-left-area:before {
      content: '';
      display: block;
      width: 203px;
      height: 194px;
      background: url(../img/picnic/light_2x.png) no-repeat;
      background-size: 203px;
      position: absolute;
      right: 42px;
      top: -40px; }
      @media screen and (min-width: 768px) {
        .picnic-main-area .picnic-left-area:before {
          background: url(../img/picnic/light.png) no-repeat;
          background-size: 203px; } }
  .picnic-main-area .picnic-right-area {
    display: inline-block;
    vertical-align: top;
    margin: 130px 0px 0;
    text-align: left;
    background: url(../img/picnic/picnic_bg02.png) center no-repeat;
    background-size: 436px;
    padding: 0 7% 115px;
    position: relative; }
    @media screen and (min-width: 400px) {
      .picnic-main-area .picnic-right-area {
        padding: 0 50px 115px 50px; } }
    @media screen and (min-width: 768px) {
      .picnic-main-area .picnic-right-area {
        width: 436px;
        height: 426px;
        margin: 130px 10px 0;
        padding: 0;
        float: right;
        margin: 420px 10px 0; } }
    @media screen and (min-width: 1200px) {
      .picnic-main-area .picnic-right-area {
        margin: 227px 10px 0;
        float: none; } }
    .picnic-main-area .picnic-right-area:before {
      content: '';
      display: block;
      width: 181px;
      height: 78px;
      background: url(../img/picnic/switch_2x.png) no-repeat;
      background-size: 181px;
      position: absolute;
      left: 15px;
      bottom: 0; }
      @media screen and (min-width: 768px) {
        .picnic-main-area .picnic-right-area:before {
          background: url(../img/picnic/switch.png) no-repeat;
          background-size: 181px; } }
  .picnic-main-area .pic-camp {
    width: 311px;
    height: 186px;
    background: url(../img/picnic/picnic_pic01_2x.png) no-repeat;
    background-size: 311px;
    position: absolute;
    left: 50%;
    bottom: 75px;
    margin-left: -155.5px; }
    @media screen and (min-width: 768px) {
      .picnic-main-area .pic-camp {
        background: url(../img/picnic/picnic_pic01.png) no-repeat;
        background-size: 311px;
        margin-left: 0;
        left: 56%;
        bottom: 60px; } }
    @media screen and (min-width: 992px) {
      .picnic-main-area .pic-camp {
        left: 47px;
        bottom: 60px; } }
    @media screen and (min-width: 1200px) {
      .picnic-main-area .pic-camp {
        left: 47px;
        bottom: 60px; } }
  .picnic-main-area .pic-band {
    width: 282px;
    height: 243px;
    background: url(../img/picnic/picnic_pic02.png) no-repeat;
    background-size: 282px;
    position: absolute;
    display: none; }
    @media screen and (min-width: 768px) {
      .picnic-main-area .pic-band {
        display: block;
        left: 67px;
        bottom: 122px; } }
    @media screen and (min-width: 992px) {
      .picnic-main-area .pic-band {
        left: 191px;
        bottom: 240px; } }
    @media screen and (min-width: 1200px) {
      .picnic-main-area .pic-band {
        left: 325px;
        bottom: 120px; } }
  .picnic-main-area .pic-family {
    width: 181px;
    height: 139px;
    background: url(../img/picnic/picnic_pic03.png) no-repeat;
    background-size: 181px;
    position: absolute;
    right: 243px;
    bottom: 114px;
    display: none; }
    @media screen and (min-width: 992px) {
      .picnic-main-area .pic-family {
        display: block; } }
    @media screen and (min-width: 1200px) {
      .picnic-main-area .pic-family {
        right: 292px;
        bottom: 114px; } }
  .picnic-main-area .pic-picnic {
    width: 240px;
    height: 155px;
    background: url(../img/picnic/picnic_pic04.png) no-repeat;
    background-size: 240px;
    position: absolute;
    right: 0px;
    bottom: 53px;
    display: none; }
    @media screen and (min-width: 992px) {
      .picnic-main-area .pic-picnic {
        display: block; } }
    @media screen and (min-width: 1200px) {
      .picnic-main-area .pic-picnic {
        right: 12px;
        bottom: 53px; } }

.rainbow-pony {
  width: 148px;
  position: absolute;
  left: 96px;
  bottom: -29px; }
  .rainbow-pony img {
    width: 100%; }
  .rainbow-pony .rainbow-pony-title {
    font-size: 15px;
    color: #333;
    position: absolute;
    bottom: 43px;
    left: -90px;
    text-align: center; }

.schedule-area {
  margin-top: 142px; }
  @media screen and (min-width: 768px) {
    .schedule-area {
      padding-left: 102px; } }
  .schedule-area .schedule-title {
    font-weight: bold;
    font-size: 20px;
    color: #e47200;
    margin-bottom: 15px; }
  .schedule-area .schedule-info .schedule-table {
    color: #6e4b42;
    font-size: 16px;
    font-weight: bold; }
    .schedule-area .schedule-info .schedule-table td {
      line-height: 1.875em;
      vertical-align: top; }
    .schedule-area .schedule-info .schedule-table .time-td {
      text-align: right;
      padding: 0px 18px 0px 0px; }
    .schedule-area .schedule-info .schedule-table .act-td {
      text-align: left;
      padding: 0px 0 0px 18px;
      border-left: 2px solid #6e4b42; }
    .schedule-area .schedule-info .schedule-table tr:first-child .act-td {
      position: relative; }
      .schedule-area .schedule-info .schedule-table tr:first-child .act-td:before {
        content: '';
        display: block;
        width: 2px;
        height: 5px;
        background-color: #FFE6A3;
        position: absolute;
        top: 0;
        left: -2px; }
    .schedule-area .schedule-info .schedule-table tr:last-child .act-td {
      position: relative; }
      .schedule-area .schedule-info .schedule-table tr:last-child .act-td:before {
        content: '';
        display: block;
        width: 2px;
        height: 4px;
        background-color: #FFE6A3;
        position: absolute;
        bottom: 0;
        left: -2px; }

.love-angel {
  width: 220px;
  position: absolute;
  top: -72px;
  right: 20px; }
  .love-angel img {
    border-radius: 50%;
    border: 10px solid #FFE6A3;
    width: 100%; }
  .love-angel:before {
    content: '';
    display: block;
    width: 85px;
    height: 66px;
    background: url(../img/picnic/sign_2x.png) no-repeat;
    background-size: 85px;
    position: absolute;
    left: -45px;
    top: 100px; }
    @media screen and (min-width: 768px) {
      .love-angel:before {
        background: url(../img/picnic/sign.png) no-repeat;
        background-size: 85px; } }
  .love-angel .love-angel-title {
    font-size: 15px;
    color: #333;
    position: absolute;
    bottom: 22px;
    left: -30px; }

.time-place {
  margin-top: 166px; }
  @media screen and (min-width: 768px) {
    .time-place {
      padding-left: 50px; } }
  .time-place .time-place-title {
    font-weight: bold;
    font-size: 20px;
    color: #e47200;
    margin-bottom: 23px; }
  .time-place .time-place-info {
    font-size: 16px;
    color: #6e4b42;
    margin-bottom: 10px; }

.picnic-share-area.video {
  border-top: 1px dashed #eddebf; }

.picnic-share-area .page-share-area {
  text-align: right;
  padding: 20px 0 180px; }
  @media screen and (min-width: 380px) {
    .picnic-share-area .page-share-area {
      padding: 20px 0 155px; } }
  @media screen and (min-width: 992px) {
    .picnic-share-area .page-share-area {
      padding: 20px 0 75px; } }
  .picnic-share-area .page-share-area .share-icon, .picnic-share-area .page-share-area .share-btn {
    display: inline-block;
    width: 40px; }
    .picnic-share-area .page-share-area .share-icon.fb, .picnic-share-area .page-share-area .share-icon.line, .picnic-share-area .page-share-area .share-btn.fb, .picnic-share-area .page-share-area .share-btn.line {
      width: 36px; }
    .picnic-share-area .page-share-area .share-icon.line, .picnic-share-area .page-share-area .share-btn.line {
      margin-left: 5px; }
    .picnic-share-area .page-share-area .share-icon img, .picnic-share-area .page-share-area .share-btn img {
      width: 100%; }
  .picnic-share-area .page-share-area .share-icon {
    margin-right: 10px; }

.join-intro-area {
  margin: 60px 0 40px; }
  .join-intro-area .photo-area img {
    max-width: 100%;
    height: auto;
    margin: 0px auto; }
  .join-intro-area .photo-area {
    margin-bottom: 30px; }
  .join-intro-area .content-area .intro-title {
    font-weight: bold;
    font-size: 30px;
    color: #e47200;
    margin-bottom: 20px; }
  .join-intro-area .content-area .intro-subtitle {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.7em;
    color: #724e45;
    margin-bottom: 0px; }
  .join-intro-area .content-area .intro-content {
    font-size: 18px;
    line-height: 1.7em;
    color: #6e4b42; }
  @media screen and (min-width: 580px) {
    .join-intro-area {
      display: table;
      width: 100%; }
      .join-intro-area .photo-area, .join-intro-area .content-area {
        display: table-cell; }
      .join-intro-area .photo-area {
        width: 300px; }
      .join-intro-area .content-area {
        vertical-align: middle; } }
  @media screen and (min-width: 768px) {
    .join-intro-area .photo-area {
      width: 380px; } }

.join-illustration-area {
  max-width: 1052px;
  margin: 0px auto 70px; }
  .join-illustration-area .illustration-author {
    text-align: right;
    font-size: 15px;
    color: #333333;
    line-height: 1.7em;
    margin-bottom: 10px;
    padding-right: 5px; }
  .join-illustration-area .illustration-area {
    border: 3px solid #e1b015;
    border-radius: 3px;
    overflow: hidden; }
    .join-illustration-area .illustration-area img {
      max-width: 100%; }

.join-subscription-area {
  max-width: 1052px;
  margin: 0px auto 90px; }
  .join-subscription-area .photo-area {
    margin-bottom: 30px; }
    .join-subscription-area .photo-area .photo-bg {
      width: 300px;
      height: 291px;
      background: url(../img/join/cloth_bg.png) center no-repeat;
      background-size: 300px 291px;
      padding: 28px 14px 10px 39px;
      margin: 0px auto; }
      .join-subscription-area .photo-area .photo-bg img {
        border-radius: 50%;
        max-width: 100%;
        max-height: none;
        height: auto; }
  .join-subscription-area .content-area .intro-subtitle {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.7em;
    color: #e47200;
    margin-bottom: 0px; }
  .join-subscription-area .content-area .intro-content {
    font-size: 18px;
    line-height: 1.7em;
    color: #6e4b42; }
    .join-subscription-area .content-area .intro-content .alert-text {
      color: #e47200; }
  .join-subscription-area .content-area .btn-area {
    text-align: center; }
    .join-subscription-area .content-area .btn-area .click-btn {
      width: 100%;
      margin-top: 30px;
      padding: 13px 30px; }
  @media screen and (min-width: 400px) {
    .join-subscription-area .photo-area .photo-bg {
      width: 360px;
      height: 349px;
      background: url(../img/join/cloth_bg.png) center no-repeat;
      background-size: 360px 349px;
      padding: 28px 14px 10px 39px; }
    .join-subscription-area .content-area .btn-area {
      text-align: center; }
      .join-subscription-area .content-area .btn-area .click-btn {
        width: auto;
        margin-top: 30px;
        padding: 13px 65px; } }
  @media screen and (min-width: 500px) {
    .join-subscription-area .photo-area .photo-bg {
      width: 456px;
      height: 442px;
      background: url(../img/join/cloth_bg.png) center no-repeat;
      background-size: 456px 442px;
      padding: 30px 10px 20px 45px; } }
  @media screen and (min-width: 768px) {
    .join-subscription-area {
      position: relative;
      padding-right: 360px; }
      .join-subscription-area .photo-area, .join-subscription-area .iframe-area {
        right: 0px; }
      .join-subscription-area .content-area {
        padding-right: 45px; }
      .join-subscription-area .photo-area, .join-subscription-area .iframe-area {
        position: absolute;
        top: 0px;
        width: 360px;
        height: 442px; }
      .join-subscription-area .content-area {
        position: relative;
        min-height: 442px; } }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    .join-subscription-area {
      padding-right: 360px; }
      .join-subscription-area .photo-area, .join-subscription-area .iframe-area {
        right: 0px; }
      .join-subscription-area .content-area {
        padding-right: 45px; }
      .join-subscription-area .photo-area, .join-subscription-area .iframe-area {
        position: absolute;
        top: 0px;
        width: 360px;
        height: 442px; }
      .join-subscription-area .content-area {
        position: relative;
        min-height: 442px; } }
  @media screen and (min-width: 768px) {
      .join-subscription-area .photo-area img, .join-subscription-area .iframe-area img {
        max-width: 100%;
        max-height: 100%; }
      .join-subscription-area .photo-area iframe, .join-subscription-area .iframe-area iframe {
        max-width: 100%;
        max-height: 100%; }
      .join-subscription-area .photo-area .photo-bg {
        width: 360px;
        height: 349px;
        background: url(../img/join/cloth_bg.png) center no-repeat;
        background-size: 360px 349px;
        padding: 28px 14px 10px 39px; }
      .join-subscription-area .content-area .btn-area {
        text-align: left; } }
  @media screen and (min-width: 880px) {
    .join-subscription-area {
      position: relative;
      padding-right: 456px; }
      .join-subscription-area .photo-area, .join-subscription-area .iframe-area {
        right: 0px; }
      .join-subscription-area .content-area {
        padding-right: 45px; }
      .join-subscription-area .photo-area, .join-subscription-area .iframe-area {
        position: absolute;
        top: 0px;
        width: 456px;
        height: 442px; }
      .join-subscription-area .content-area {
        position: relative;
        min-height: 442px; } }
  @media screen and (min-width: 880px) and (min-width: 768px) {
    .join-subscription-area {
      padding-right: 456px; }
      .join-subscription-area .photo-area, .join-subscription-area .iframe-area {
        right: 0px; }
      .join-subscription-area .content-area {
        padding-right: 45px; }
      .join-subscription-area .photo-area, .join-subscription-area .iframe-area {
        position: absolute;
        top: 0px;
        width: 456px;
        height: 442px; }
      .join-subscription-area .content-area {
        position: relative;
        min-height: 442px; } }
  @media screen and (min-width: 880px) {
      .join-subscription-area .photo-area img, .join-subscription-area .iframe-area img {
        max-width: 100%;
        max-height: 100%; }
      .join-subscription-area .photo-area iframe, .join-subscription-area .iframe-area iframe {
        max-width: 100%;
        max-height: 100%; }
      .join-subscription-area .photo-area .photo-bg {
        width: 456px;
        height: 442px;
        background: url(../img/join/cloth_bg.png) center no-repeat;
        background-size: 456px 442px;
        padding: 30px 10px 20px 45px; } }
  @media screen and (min-width: 992px) {
    .join-subscription-area .content-area {
      padding-left: 5px; } }

.video-list {
  padding-bottom: 70px;
  margin-bottom: 35px;
  position: relative; }
  .video-list .video-box {
    position: relative;
    min-height: 270px;
    padding: 10px 0 40px; }
    .video-list .video-box + .video-box {
      margin-top: 20px; }
      @media screen and (min-width: 850px) {
        .video-list .video-box + .video-box {
          margin-top: 35px; } }
      @media screen and (min-width: 1200px) {
        .video-list .video-box + .video-box {
          margin-top: 45px; } }
    .video-list .video-box .video-img-area {
      position: relative;
      margin: 0 auto 20px; }
      @media screen and (min-width: 850px) {
        .video-list .video-box .video-img-area {
          width: 480px;
          position: absolute;
          left: 0;
          top: 0; } }
      .video-list .video-box .video-img-area .video-img {
        width: 100%;
        height: 0;
        padding-top: 56%;
        display: block; }
        .video-list .video-box .video-img-area .video-img img {
          max-width: 100%;
          width: 100%;
          height: auto;
          position: absolute;
          top: 0;
          left: 0; }
          .video-list .video-box .video-img-area .video-img img.mb {
            display: block; }
            @media screen and (min-width: 768px) {
              .video-list .video-box .video-img-area .video-img img.mb {
                display: none; } }
          .video-list .video-box .video-img-area .video-img img.pc {
            display: none; }
            @media screen and (min-width: 768px) {
              .video-list .video-box .video-img-area .video-img img.pc {
                display: block; } }
    .video-list .video-box .video-content {
      padding: 0 10px; }
      @media screen and (min-width: 850px) {
        .video-list .video-box .video-content {
          padding-left: 500px; } }
      @media screen and (min-width: 1200px) {
        .video-list .video-box .video-content {
          padding-left: 515px; } }
      .video-list .video-box .video-content .video-title {
        font-weight: bold;
        font-size: 20px;
        color: #e47200;
        margin-bottom: 12px; }
      .video-list .video-box .video-content .video-text {
        font-size: 16px;
        color: #6e4b42; }
      .video-list .video-box .video-content .video-btn {
        position: absolute;
        right: 10px;
        bottom: 0;
        padding: 5px 21px; }
        @media screen and (min-width: 850px) {
          .video-list .video-box .video-content .video-btn {
            bottom: 20px; } }
        @media screen and (min-width: 1200px) {
          .video-list .video-box .video-content .video-btn {
            bottom: 30px; } }
  .video-list .video-bottom-img {
    padding-top: 148px; }
    @media screen and (min-width: 370px) {
      .video-list .video-bottom-img {
        padding-top: 205px; } }
    .video-list .video-bottom-img .screen {
      width: 230px;
      height: 138px;
      display: inline-block;
      background: url(../img/act2018/video/screen_2x.png) no-repeat;
      background-size: 230px;
      position: absolute;
      right: 60px;
      bottom: 35px; }
      @media screen and (min-width: 370px) {
        .video-list .video-bottom-img .screen {
          width: 283px;
          height: 170px;
          background-size: 283px; } }
      @media screen and (min-width: 768px) {
        .video-list .video-bottom-img .screen {
          background: url(../img/act2018/video/screen.png) no-repeat;
          background-size: 283px;
          right: 195px; } }
    .video-list .video-bottom-img .whale {
      width: 150px;
      height: 91px;
      display: inline-block;
      background: url(../img/act2018/video/whale_2x.png) no-repeat;
      background-size: 150px;
      position: absolute;
      right: 0;
      bottom: 0; }
      @media screen and (min-width: 370px) {
        .video-list .video-bottom-img .whale {
          width: 163px;
          height: 100px;
          background-size: 163px; } }
      @media screen and (min-width: 768px) {
        .video-list .video-bottom-img .whale {
          background: url(../img/act2018/video/whale.png) no-repeat;
          background-size: 163px;
          right: 102px; } }
    .video-list .video-bottom-img .mother_daughter {
      width: 98px;
      height: 115px;
      display: none;
      background: url(../img/act2018/video/mother_daughter_2x.png) no-repeat;
      background-size: 98px;
      position: absolute;
      right: 310px;
      bottom: 2px; }
      @media screen and (min-width: 440px) {
        .video-list .video-bottom-img .mother_daughter {
          display: inline-block; } }
      @media screen and (min-width: 768px) {
        .video-list .video-bottom-img .mother_daughter {
          background: url(../img/act2018/video/mother_daughter.png) no-repeat;
          background-size: 98px;
          right: 528px; } }

/*
* @Author: ansen
* @Date:   2017-10-16 09:31:31
* @Last Modified by:   ansen
* @Last Modified time: 2017-10-20 10:40:42
*/
.page-header-area {
  width: 100%;
  display: table;
  table-layout: fixed;
  padding-top: 5px;
  padding-bottom: 25px; }
  @media screen and (min-width: 650px) {
    .page-header-area {
      padding-top: 50px; } }
  .page-header-area .page-media-area {
    width: 100%;
    max-width: 440px;
    margin: 0 auto 10px; }
    @media screen and (min-width: 768px) {
      .page-header-area .page-media-area {
        display: table-cell;
        width: 470px;
        padding-right: 20px;
        margin: 0; } }
    @media screen and (min-width: 992px) {
      .page-header-area .page-media-area {
        width: 500px;
        padding-right: 50px; } }
    .page-header-area .page-media-area .page-media-box {
      border: 2px solid #ffc68d;
      padding: 3px;
      background-color: #fff; }
      .page-header-area .page-media-area .page-media-box img {
        max-width: 100%;
        height: auto; }
  .page-header-area.news .page-media-area {
    max-width: 370px; }
    @media screen and (min-width: 768px) {
      .page-header-area.news .page-media-area {
        width: 390px;
        max-width: none; } }
    @media screen and (min-width: 992px) {
      .page-header-area.news .page-media-area {
        width: 420px; } }
  .page-header-area .page-info-area {
    border-bottom: 1px solid #f1e1bf;
    position: relative; }
    @media screen and (min-width: 768px) {
      .page-header-area .page-info-area {
        vertical-align: top;
        display: table-cell; } }
    .page-header-area .page-info-area .page-header-top {
      font-weight: bold;
      font-size: 20px;
      color: #f57c03;
      padding-left: 3px;
      margin-bottom: 6px; }
      .page-header-area .page-info-area .page-header-top.date {
        font-family: Arial;
        font-size: 15px; }
    .page-header-area .page-info-area .page-header-title {
      font-weight: bold;
      font-size: 20px;
      color: #333;
      padding-left: 3px;
      margin-bottom: 10px; }
    .page-header-area .page-info-area .page-header-info {
      font-size: 16px;
      color: #333;
      padding: 15px 3px 70px;
      text-align: justify;
      line-height: 1.6em;
      border-top: 1px solid #f1e1bf; }
  .page-header-area .page-share-area {
    position: absolute;
    right: 5px;
    bottom: 20px; }
    .page-header-area .page-share-area .share-icon, .page-header-area .page-share-area .share-btn {
      display: inline-block;
      width: 40px; }
      .page-header-area .page-share-area .share-icon.fb, .page-header-area .page-share-area .share-icon.line, .page-header-area .page-share-area .share-btn.fb, .page-header-area .page-share-area .share-btn.line {
        width: 36px; }
      .page-header-area .page-share-area .share-icon.line, .page-header-area .page-share-area .share-btn.line {
        margin-left: 5px; }
      .page-header-area .page-share-area .share-icon img, .page-header-area .page-share-area .share-btn img {
        width: 100%; }
    .page-header-area .page-share-area .share-icon {
      margin-right: 10px; }

.page-bottom-area .page-share-area {
  padding: 20px 0 180px; }
  @media screen and (min-width: 380px) {
    .page-bottom-area .page-share-area {
      padding: 20px 0 155px; } }
  @media screen and (min-width: 992px) {
    .page-bottom-area .page-share-area {
      padding: 20px 0 75px; } }

.page-share-area {
  text-align: right; }
  .page-share-area .share-icon, .page-share-area .share-btn {
    display: inline-block;
    width: 40px; }
    .page-share-area .share-icon.fb, .page-share-area .share-icon.line, .page-share-area .share-btn.fb, .page-share-area .share-btn.line {
      width: 36px; }
    .page-share-area .share-icon.line, .page-share-area .share-btn.line {
      margin-left: 5px; }
    .page-share-area .share-icon img, .page-share-area .share-btn img {
      width: 100%; }
  .page-share-area .share-icon {
    margin-right: 10px; }

.page-article-area {
  font-size: 16px;
  color: #777676;
  padding: 0 3px 25px;
  border-bottom: 1px dashed #eddebf; }
  @media screen and (min-width: 992px) {
    .page-article-area {
      min-height: 300px; } }
  .page-article-area h3 {
    font-weight: bold;
    font-size: 20px;
    color: #e47200;
    margin-top: 0;
    margin-bottom: 10px; }
  .page-article-area h4 {
    font-weight: bold;
    font-size: 18px;
    color: #724e45;
    margin-top: 0;
    margin-bottom: 10px; }
  .page-article-area h5 {
    font-size: 16px;
    color: #e47200;
    margin-top: 0;
    margin-bottom: 10px; }
  .page-article-area p {
    font-size: 16px;
    color: #777676;
    text-align: justify; }
  .page-article-area table {
    width: 100%;
    border: 2px solid #e7ab6f; }
    .page-article-area table thead {
      background: #ffc68d; }
      .page-article-area table thead td {
        border-bottom: 2px solid #e7ab6f; }
    .page-article-area table tr + tr td {
      border-top: 2px solid #e7ab6f; }
    .page-article-area table td + td {
      border-left: 2px solid #e7ab6f; }
    .page-article-area table td {
      padding: 8px 10px;
      line-height: 1.6em;
      vertical-align: top; }
  .page-article-area ul {
    list-style: none;
    padding-left: 0px; }
    .page-article-area ul li {
      position: relative;
      padding-left: 14px; }
      .page-article-area ul li:before {
        content: "";
        display: block;
        position: absolute;
        left: 2px;
        top: 9px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #e47200;
        /* or whatever color you prefer */ }
  .page-article-area iframe {
    max-width: 100%;
    border: 0; }
  .page-article-area img {
    height: auto;
    max-width: 100%; }

.go-back-area {
  margin-top: 30px;
  margin-bottom: 140px;
  text-align: center; }
  @media screen and (min-width: 380px) {
    .go-back-area {
      margin-bottom: 115px; } }
  @media screen and (min-width: 992px) {
    .go-back-area {
      margin-bottom: 90px; } }
  .go-back-area .go-back-btn {
    padding: 6px 14px;
    border-radius: 5px;
    border: none;
    background-color: #9e9e9e;
    font-size: 16px;
    color: #fff; }

.diary-input-main-area {
  margin-bottom: 230px; }
  @media screen and (min-width: 768px) {
    .diary-input-main-area {
      margin-top: 60px; } }
  @media screen and (min-width: 992px) {
    .diary-input-main-area {
      margin-top: 88px; } }
  @media screen and (min-width: 768px) {
    .diary-input-main-area .diary-input-area {
      padding: 0 25px; } }
  @media screen and (min-width: 992px) {
    .diary-input-main-area .diary-input-area {
      padding: 0 65px; } }
  .diary-input-main-area .diary-input-area .diary-input-group + .diary-input-group {
    margin-top: 30px; }
  .diary-input-main-area .diary-input-area .diary-input-group label {
    width: 100%;
    font-weight: bold;
    font-size: 20px;
    color: #724e45;
    padding: 5px 0 0; }
    @media screen and (min-width: 992px) {
      .diary-input-main-area .diary-input-area .diary-input-group label {
        width: 170px; } }
    .diary-input-main-area .diary-input-area .diary-input-group label:before {
      display: none; }
  .diary-input-main-area .diary-input-area .diary-input-group input {
    width: 100%;
    display: inline-block;
    height: 40px;
    border: 1px solid #ead98c;
    border-radius: 6px;
    box-shadow: none; }
    @media screen and (min-width: 992px) {
      .diary-input-main-area .diary-input-area .diary-input-group input {
        width: 533px; } }
    @media screen and (min-width: 1200px) {
      .diary-input-main-area .diary-input-area .diary-input-group input {
        width: 600px; } }
  .diary-input-main-area .diary-input-area .diary-input-group span {
    font-size: 16px;
    line-height: 35px; }
    @media screen and (min-width: 992px) {
      .diary-input-main-area .diary-input-area .diary-input-group span {
        padding-left: 13px; } }
  .diary-input-main-area .diary-input-btn {
    margin-top: 43px;
    padding: 10px 84px;
    float: right;
    letter-spacing: 0.25em; }
    @media screen and (min-width: 992px) {
      .diary-input-main-area .diary-input-btn {
        margin-right: 4px; } }
    @media screen and (min-width: 1200px) {
      .diary-input-main-area .diary-input-btn {
        margin-right: 137px; } }

.diary-box {
  padding-bottom: 0; }
  @media screen and (min-width: 992px) {
    .diary-box {
      padding-left: 174px; } }
  .diary-box .answe-list {
    width: 100%;
    padding: 0; }
    .diary-box .answe-list li {
      margin-top: 10px; }
      .diary-box .answe-list li input {
        width: 20px;
        height: 20px;
        margin-top: 0;
        top: 18px; }
      .diary-box .answe-list li label {
        padding-left: 30px;
        width: calc( 100% - 21px); }
        .diary-box .answe-list li label:before {
          width: 21px;
          height: 21px;
          display: inline-block;
          border: 1px solid #ead98c;
          border-radius: 4px;
          background: #fff;
          margin-top: 2px; }
        .diary-box .answe-list li label .label-diary {
          font-weight: normal;
          font-size: 16px;
          color: #724e45; }
      .diary-box .answe-list li svg {
        width: 25px;
        height: 35px; }
      .diary-box .answe-list li svg path {
        stroke-width: 15px; }

.diary-title {
  padding: 10px 10px 55px;
  border-bottom: 2px solid #f1e1bf;
  position: relative; }
  @media screen and (min-width: 400px) {
    .diary-title {
      padding: 10px 10px 55px 60px; } }
  @media screen and (min-width: 768px) {
    .diary-title {
      padding: 10px 190px 15px 60px; } }
  @media screen and (min-width: 992px) {
    .diary-title {
      padding: 10px 195px 35px 60px; } }
  .diary-title:before {
    content: '';
    display: none;
    width: 50px;
    height: 52px;
    background: url(../img/act2018/diary_title_pic.png) no-repeat;
    background-size: 50px;
    position: absolute;
    top: 0;
    left: 0; }
    @media screen and (min-width: 400px) {
      .diary-title:before {
        display: block; } }
  .diary-title.no-underline {
    border-bottom: none; }
  .diary-title span {
    font-size: 21px;
    font-weight: bold;
    color: #724e45; }
  .diary-title a.suggest-btn {
    display: inline-block;
    font-size: 15px;
    color: #fff;
    padding: 5px 35px;
    border: none;
    border-radius: 4px;
    background-color: #ff9d3b;
    box-shadow: 0 4px #f48e27;
    outline: none;
    position: absolute;
    bottom: 15px;
    right: 15px; }
    @media screen and (min-width: 768px) {
      .diary-title a.suggest-btn {
        bottom: 12px; } }
    @media screen and (min-width: 992px) {
      .diary-title a.suggest-btn {
        top: 5px;
        bottom: auto; } }
    .diary-title a.suggest-btn:hover {
      bottom: 17px;
      box-shadow: 0 6px #f48e27; }
      @media screen and (min-width: 768px) {
        .diary-title a.suggest-btn:hover {
          bottom: 14px; } }
      @media screen and (min-width: 992px) {
        .diary-title a.suggest-btn:hover {
          top: 3px;
          bottom: auto; } }
    .diary-title a.suggest-btn:active {
      bottom: 13px;
      box-shadow: 0 2px #f48e27; }
      @media screen and (min-width: 768px) {
        .diary-title a.suggest-btn:active {
          bottom: 10px; } }
      @media screen and (min-width: 992px) {
        .diary-title a.suggest-btn:active {
          top: 7px;
          bottom: auto; } }

.diary-header-area {
  display: none;
  padding-top: 13px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f1e1bf; }
  @media screen and (min-width: 650px) {
    .diary-header-area {
      display: block; } }
  .diary-header-area:after {
    content: '';
    display: block;
    clear: both; }

.title-text {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #e47200;
  line-height: 25px;
  margin-bottom: 5px; }
  @media screen and (min-width: 650px) {
    .title-text {
      margin-bottom: 0; }
      .title-text.pc-hidden {
        display: none; } }

.diary-row {
  padding-top: 15px;
  padding-bottom: 10px;
  position: relative; }
  .diary-row:after {
    content: '';
    display: block;
    clear: both; }
  .diary-row + .diary-row {
    border-top: 1px dashed #f1e1bf; }
  .diary-row .diary-education-text {
    display: inline-block;
    font-size: 16px;
    color: #724e45;
    padding-right: 30px; }
    @media screen and (min-width: 650px) {
      .diary-row .diary-education-text {
        display: block;
        padding-right: 0; } }
    .diary-row .diary-education-text.none {
      color: #777676; }
  .diary-row .diary-report-content {
    font-size: 16px;
    color: #777676;
    text-align: justify; }
  .diary-row .diary-btn {
    display: inline-block;
    font-size: 14px;
    color: #fff;
    border-radius: 5px;
    padding: 3px 19px;
    position: absolute;
    bottom: 55px;
    right: 15px; }
    @media screen and (min-width: 650px) {
      .diary-row .diary-btn {
        bottom: auto;
        top: 5px;
        right: 15px; } }
    .diary-row .diary-btn.share {
      bottom: 15px;
      right: 91px;
      background-color: #5877b5; }
      @media screen and (min-width: 650px) {
        .diary-row .diary-btn.share {
          bottom: auto;
          top: 5px;
          right: 15px; } }
      .diary-row .diary-btn.share:hover {
        background-color: #3e5e9d; }
    .diary-row .diary-btn.record {
      background-color: #f47c64; }
      .diary-row .diary-btn.record:hover {
        background-color: #c85e49; }
    .diary-row .diary-btn.edit {
      bottom: 15px;
      right: 15px;
      background-color: #f47c64; }
      @media screen and (min-width: 650px) {
        .diary-row .diary-btn.edit {
          bottom: auto;
          top: 45px;
          right: 15px; } }
      .diary-row .diary-btn.edit:hover {
        background-color: #c85e49; }

.diary-item.select {
  padding-right: 135px;
  margin-bottom: 30px; }

.diary-item.report {
  position: relative;
  padding-bottom: 70px; }

@media screen and (min-width: 650px) {
  .diary-item {
    float: left; }
    .diary-item.date {
      width: 90px;
      text-align: center; }
    .diary-item.select {
      width: 125px;
      padding-left: 25px;
      padding-right: 0;
      margin-bottom: 0; }
    .diary-item.report {
      width: calc( 100% - 215px);
      padding-left: 20px;
      padding-right: 120px;
      padding-bottom: 0; } }

.seal-area {
  display: inline-block;
  width: 70px;
  height: 70px;
  border: 2px dashed #ece5d5;
  background-color: #faf4e8;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  top: 20px;
  right: 15px; }
  @media screen and (min-width: 650px) {
    .seal-area {
      position: relative;
      top: auto;
      right: auto; } }
  .seal-area .seal-date {
    display: inline-block;
    font-size: 15px;
    font-family: Arial;
    font-weight: bold;
    color: #dfd7c5;
    line-height: 67px; }
  .seal-area.today {
    border: 2px dashed #fcae9e; }
    .seal-area.today .seal-date {
      color: #f69a87; }
  .seal-area.clear {
    width: 77px;
    height: 76px;
    border: none;
    background: url(../img/act2018/diary_stamp_pic.png) no-repeat;
    background-size: 77px;
    border-radius: 0px; }
    .seal-area.clear .seal-date {
      display: inline-block;
      font-size: 15px;
      font-family: Arial;
      font-weight: bold;
      color: #ff9b36;
      line-height: 30px;
      transform: rotate(-10deg);
      position: absolute;
      top: 45px;
      left: 23px; }
    .seal-area.clear.checked {
      animation: seal .35s 1s both;
      transform: scale(2);
      opacity: 0; }

@keyframes seal {
  100% {
    transform: scale(1);
    opacity: 1; } }

.diary-bottom-area {
  padding-top: 20px;
  padding-bottom: 300px;
  text-align: center;
  position: relative; }
  @media screen and (min-width: 992px) {
    .diary-bottom-area {
      padding-bottom: 200px; } }
  .diary-bottom-area:after {
    content: '';
    display: block;
    width: 288px;
    height: 169px;
    background: url(../img/act2018/diary_pic_2x.png) no-repeat;
    background-size: 288px;
    position: absolute;
    bottom: 105px;
    right: 50%;
    transform: translate(50%, 0); }
    @media screen and (min-width: 768px) {
      .diary-bottom-area:after {
        background: url(../img/act2018/diary_pic.png) no-repeat;
        background-size: 288px;
        right: 40px;
        bottom: 105px;
        transform: translate(0, 0); } }
    @media screen and (min-width: 992px) {
      .diary-bottom-area:after {
        right: 40px;
        bottom: 15px; } }
    @media screen and (min-width: 1240px) {
      .diary-bottom-area:after {
        right: 40px;
        bottom: 15px; } }
  .diary-bottom-area .back-btn {
    display: inline-block;
    font-size: 15px;
    color: #fff;
    background-color: #9E9E9E;
    border-radius: 5px;
    padding: 5px 20px; }
    .diary-bottom-area .back-btn:hover {
      background-color: #7e7e7e; }

@media screen and (min-width: 768px) {
  .diary-dialog .modal-dialog {
    width: 600px; } }

@media screen and (min-width: 992px) {
  .diary-dialog .modal-dialog {
    width: 800px; } }

.diary-dialog .modal-content {
  border-radius: 10px; }

.diary-dialog .modal-header {
  border: none;
  padding: 50px 15px 20px;
  position: relative; }
  @media screen and (min-width: 430px) {
    .diary-dialog .modal-header {
      padding: 30px 15px; } }
  @media screen and (min-width: 768px) {
    .diary-dialog .modal-header {
      padding: 60px 15px 30px; } }
  .diary-dialog .modal-header.diary-advice-header {
    padding: 30px 15px 15px; }
    @media screen and (min-width: 768px) {
      .diary-dialog .modal-header.diary-advice-header {
        padding: 50px 15px 15px; } }
  .diary-dialog .modal-header .modal-title {
    font-size: 26px;
    color: #e07205;
    text-align: center; }
    @media screen and (min-width: 430px) {
      .diary-dialog .modal-header .modal-title {
        font-size: 30px; } }
    .diary-dialog .modal-header .modal-title.text-bold {
      font-weight: bold; }
    .diary-dialog .modal-header .modal-title .date {
      display: inline-block;
      font-family: Arial; }
  .diary-dialog .modal-header .modal-sub-title {
    font-size: 18px;
    font-weight: bold;
    color: #724e45;
    text-align: center; }
  .diary-dialog .modal-header .close {
    font-size: 25px;
    color: #f57c64;
    opacity: 1;
    position: absolute;
    top: 20px;
    right: 20px; }

.diary-dialog .modal-body {
  padding: 0 15px; }
  @media screen and (min-width: 768px) {
    .diary-dialog .modal-body {
      padding: 0 60px 20px; } }
  @media screen and (min-width: 768px) {
    .diary-dialog .modal-body.diary-advice-body {
      padding: 0 50px 20px; } }
  .diary-dialog .modal-body .diary-modal-title {
    font-size: 18px;
    color: #724e45;
    margin-bottom: 15px; }
  .diary-dialog .modal-body .diary-option-area {
    padding: 0 10px 5px;
    border-bottom: 2px dashed #f1e1bf; }
    .diary-dialog .modal-body .diary-option-area .diary-option-list {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 0; }
      .diary-dialog .modal-body .diary-option-area .diary-option-list li {
        display: inline-block;
        padding: 0 19px 0 0;
        margin-bottom: 10px; }
        .diary-dialog .modal-body .diary-option-area .diary-option-list li input {
          width: 20px;
          height: 20px;
          margin-top: -14px; }
        .diary-dialog .modal-body .diary-option-area .diary-option-list li label {
          padding-left: 35px;
          color: #777676;
          font-size: 18px;
          font-weight: normal; }
          .diary-dialog .modal-body .diary-option-area .diary-option-list li label:before {
            width: 26px;
            height: 26px;
            display: inline-block;
            border: 2px solid #ead98c;
            border-radius: 3px;
            background: #fff;
            margin-top: -13px; }
        .diary-dialog .modal-body .diary-option-area .diary-option-list li svg {
          width: 20px;
          height: 20px;
          margin-top: 0px;
          left: 2px;
          top: 2px; }
        .diary-dialog .modal-body .diary-option-area .diary-option-list li svg path {
          stroke: #ead98c;
          stroke-width: 11px; }
  .diary-dialog .modal-body .diary-feedback-area {
    padding: 15px 10px 0; }
    .diary-dialog .modal-body .diary-feedback-area .form-control {
      border: 1px solid #ead98c;
      border-radius: 5px;
      box-shadow: none;
      resize: none; }
  .diary-dialog .modal-body .diary-quiz-area {
    font-size: 18px;
    font-weight: bold;
    color: #e47200;
    border-bottom: 1px dashed #e9e5c0;
    position: relative;
    padding: 7px 25px 15px 40px;
    margin-bottom: 18px; }
    @media screen and (min-width: 992px) {
      .diary-dialog .modal-body .diary-quiz-area {
        padding: 7px 25px 20px 40px;
        margin-bottom: 28px; } }
    .diary-dialog .modal-body .diary-quiz-area:before {
      width: 36px;
      height: 34px;
      display: block;
      content: '';
      background: url(../img/quiz/title_word_2x.png) no-repeat;
      background-size: 36px;
      position: absolute;
      top: 0;
      left: 0; }
      @media screen and (min-width: 768px) {
        .diary-dialog .modal-body .diary-quiz-area:before {
          background: url(../img/quiz/title_word.png) no-repeat;
          background-size: 36px; } }
  .diary-dialog .modal-body .diary-answer-area .answer-box + .answer-box {
    margin-top: 15px; }
    @media screen and (min-width: 768px) {
      .diary-dialog .modal-body .diary-answer-area .answer-box + .answer-box {
        margin-top: 20px; } }
    @media screen and (min-width: 992px) {
      .diary-dialog .modal-body .diary-answer-area .answer-box + .answer-box {
        margin-top: 25px; } }
  .diary-dialog .modal-body .diary-answer-area .answer-box .answer-item {
    font-size: 16px;
    font-weight: bold;
    color: #724e45;
    padding: 0 3px;
    margin-bottom: 8px; }
  .diary-dialog .modal-body .diary-answer-area .answer-box .answer-content {
    padding: 0 16px;
    margin: 0; }
    @media screen and (min-width: 992px) {
      .diary-dialog .modal-body .diary-answer-area .answer-box .answer-content {
        padding: 0 20px; } }
    @media screen and (min-width: 1200px) {
      .diary-dialog .modal-body .diary-answer-area .answer-box .answer-content {
        padding: 0 25px; } }

.diary-dialog .modal-footer {
  border: none;
  padding: 10px 25px 35px; }
  @media screen and (min-width: 768px) {
    .diary-dialog .modal-footer {
      padding: 10px 70px 50px; } }
  .diary-dialog .modal-footer .btn {
    width: 100%;
    font-size: 16px;
    color: #fff;
    border-radius: 5px;
    padding: 5px 10px; }
    .diary-dialog .modal-footer .btn.btn {
      margin-top: 10px;
      margin-left: 0; }
    @media screen and (min-width: 480px) {
      .diary-dialog .modal-footer .btn {
        width: 140px; }
        .diary-dialog .modal-footer .btn.btn {
          margin-top: 0;
          margin-left: 5px; } }
    .diary-dialog .modal-footer .btn.share {
      background-color: #5877b5; }
      .diary-dialog .modal-footer .btn.share:hover {
        background-color: #3e5e9d; }
    .diary-dialog .modal-footer .btn.finish {
      background-color: #f47c64; }
      .diary-dialog .modal-footer .btn.finish:hover {
        background-color: #c85e49; }

.diary-intro-area {
  margin-top: 20px;
  margin-bottom: 105px;
  padding-bottom: 80px;
  overflow: hidden; }
  @media screen and (min-width: 768px) {
    .diary-intro-area {
      margin-top: 55px;
      margin-bottom: 80px;
      padding: 0 20px 80px; } }
  @media screen and (min-width: 1200px) {
    .diary-intro-area {
      padding: 0 0 80px;
      margin-bottom: 105px; } }
  .diary-intro-area .diary-intro-box {
    position: relative; }
    .diary-intro-area .diary-intro-box:after {
      display: block;
      content: '';
      clear: both; }
    .diary-intro-area .diary-intro-box + .diary-intro-box {
      margin-top: 15px; }
      @media screen and (min-width: 768px) {
        .diary-intro-area .diary-intro-box + .diary-intro-box {
          margin-top: 20px; } }
      @media screen and (min-width: 992px) {
        .diary-intro-area .diary-intro-box + .diary-intro-box {
          margin-top: 40px; } }
      @media screen and (min-width: 1200px) {
        .diary-intro-area .diary-intro-box + .diary-intro-box {
          margin-top: 80px; } }
    .diary-intro-area .diary-intro-box .diary-intro-top-img {
      width: 100%;
      margin-top: 25px;
      text-align: center; }
      @media screen and (min-width: 768px) {
        .diary-intro-area .diary-intro-box .diary-intro-top-img {
          margin-top: 0;
          width: 35%;
          margin-top: -233px;
          display: block; } }
      @media screen and (min-width: 992px) {
        .diary-intro-area .diary-intro-box .diary-intro-top-img {
          width: 360px;
          margin-top: 0;
          position: absolute;
          left: 0;
          top: 0; } }
      .diary-intro-area .diary-intro-box .diary-intro-top-img img {
        max-width: 100%;
        height: auto; }
        .diary-intro-area .diary-intro-box .diary-intro-top-img img.pc {
          display: none; }
          @media screen and (min-width: 768px) {
            .diary-intro-area .diary-intro-box .diary-intro-top-img img.pc {
              display: block; } }
        .diary-intro-area .diary-intro-box .diary-intro-top-img img.mb {
          display: block;
          margin: auto; }
          @media screen and (min-width: 768px) {
            .diary-intro-area .diary-intro-box .diary-intro-top-img img.mb {
              display: none; } }
    .diary-intro-area .diary-intro-box .diary-intro-bottom-img {
      width: 47%;
      position: absolute;
      top: 0;
      right: 0; }
      @media screen and (min-width: 768px) {
        .diary-intro-area .diary-intro-box .diary-intro-bottom-img {
          position: relative;
          float: right;
          margin-top: -250px; } }
      @media screen and (min-width: 992px) {
        .diary-intro-area .diary-intro-box .diary-intro-bottom-img {
          width: 430px;
          top: 0;
          position: absolute;
          bottom: 55px;
          margin-top: 0; } }
      @media screen and (min-width: 1200px) {
        .diary-intro-area .diary-intro-box .diary-intro-bottom-img {
          width: 520px;
          bottom: 0;
          right: 70px; } }
      .diary-intro-area .diary-intro-box .diary-intro-bottom-img img {
        max-width: 100%;
        height: auto; }
        .diary-intro-area .diary-intro-box .diary-intro-bottom-img img.pc {
          display: none; }
          @media screen and (min-width: 768px) {
            .diary-intro-area .diary-intro-box .diary-intro-bottom-img img.pc {
              display: block; } }
    .diary-intro-area .diary-intro-box .diary-intro-content {
      padding-top: 13px; }
      @media screen and (min-width: 768px) {
        .diary-intro-area .diary-intro-box .diary-intro-content {
          padding-left: 10px; } }
      .diary-intro-area .diary-intro-box .diary-intro-content .diary-intro-title {
        color: #e47200;
        font-size: 25px;
        font-weight: bold;
        line-height: 1.5em;
        margin-bottom: 10px; }
        @media screen and (min-width: 992px) {
          .diary-intro-area .diary-intro-box .diary-intro-content .diary-intro-title {
            margin-bottom: 15px; } }
      .diary-intro-area .diary-intro-box .diary-intro-content .diary-intro-text {
        color: #6e4b42;
        font-size: 16px;
        line-height: 30px; }
        .diary-intro-area .diary-intro-box .diary-intro-content .diary-intro-text + .diary-intro-text {
          margin-top: 20px; }
          @media screen and (min-width: 768px) {
            .diary-intro-area .diary-intro-box .diary-intro-content .diary-intro-text + .diary-intro-text {
              margin-top: 45px; } }
        .diary-intro-area .diary-intro-box .diary-intro-content .diary-intro-text.important {
          color: #e47200;
          font-size: 18px;
          font-weight: normal; }
        .diary-intro-area .diary-intro-box .diary-intro-content .diary-intro-text span {
          font-weight: bold; }
  @media screen and (min-width: 768px) {
    .diary-intro-area .diary-intro-top-box .diary-intro-content {
      padding-left: 39%; } }
  @media screen and (min-width: 992px) {
    .diary-intro-area .diary-intro-top-box .diary-intro-content {
      padding-left: 400px;
      min-height: 360px; } }
  .diary-intro-area .diary-intro-button-area {
    margin-top: 45px;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .diary-intro-area .diary-intro-button-area {
        margin-top: 50px; } }
    @media screen and (min-width: 992px) {
      .diary-intro-area .diary-intro-button-area {
        text-align: left;
        margin-top: 45px; } }
    .diary-intro-area .diary-intro-button-area .click-btn {
      display: block; }
      @media screen and (min-width: 500px) {
        .diary-intro-area .diary-intro-button-area .click-btn {
          display: inline-block; } }
      .diary-intro-area .diary-intro-button-area .click-btn + .click-btn {
        margin-top: 25px; }
        @media screen and (min-width: 500px) {
          .diary-intro-area .diary-intro-button-area .click-btn + .click-btn {
            margin-top: 0;
            margin-left: 25px; } }
      .diary-intro-area .diary-intro-button-area .click-btn.blue {
        background-color: #5977B5;
        box-shadow: 0 6px #4466AD; }
        .diary-intro-area .diary-intro-button-area .click-btn.blue:hover {
          box-shadow: 0 8px #4466AD; }
        .diary-intro-area .diary-intro-button-area .click-btn.blue:active {
          box-shadow: 0 4px #4466AD; }

/* diary_share */
@media screen and (min-width: 768px) {
  .diary-share-container {
    padding: 0 20px; } }

@media screen and (min-width: 992px) {
  .diary-share-container {
    padding: 0 85px; } }

.diary-share-container .diary-title {
  padding: 10px 10px 15px; }
  @media screen and (min-width: 400px) {
    .diary-share-container .diary-title {
      padding: 10px 10px 35px 70px; } }
  .diary-share-container .diary-title:before {
    left: 10px; }

.diary-share-container .diary-share-area {
  border: 2px dashed #ead98c;
  padding: 20px; }
  @media screen and (min-width: 768px) {
    .diary-share-container .diary-share-area {
      padding: 30px 30px 40px; } }
  @media screen and (min-width: 992px) {
    .diary-share-container .diary-share-area {
      padding: 40px 50px 50px; } }
  .diary-share-container .diary-share-area .share-row {
    width: 100%; }
    @media screen and (min-width: 650px) {
      .diary-share-container .diary-share-area .share-row {
        display: table; } }
    .diary-share-container .diary-share-area .share-row + .share-row {
      margin-top: 20px; }
    .diary-share-container .diary-share-area .share-row .share-title {
      display: block;
      font-size: 18px;
      color: #e47200;
      font-weight: bold;
      width: 95px;
      margin-bottom: 5px; }
      @media screen and (min-width: 650px) {
        .diary-share-container .diary-share-area .share-row .share-title {
          display: table-cell;
          margin-bottom: 0; } }
    .diary-share-container .diary-share-area .share-row .share-text {
      display: block;
      font-size: 16px;
      color: #724e45; }
      @media screen and (min-width: 650px) {
        .diary-share-container .diary-share-area .share-row .share-text {
          display: table-cell; } }

.diary-share-container .diary-bottom-area {
  padding-bottom: 215px; }
  @media screen and (min-width: 768px) {
    .diary-share-container .diary-bottom-area {
      padding-bottom: 250px; } }
  .diary-share-container .diary-bottom-area:after {
    bottom: 15px; }
    @media screen and (min-width: 650px) {
      .diary-share-container .diary-bottom-area:after {
        right: 0;
        transform: translate(0, 0); } }
    @media screen and (min-width: 992px) {
      .diary-share-container .diary-bottom-area:after {
        right: -60px; } }
    @media screen and (min-width: 1300px) {
      .diary-share-container .diary-bottom-area:after {
        right: -120px; } }

/*
* @Author: ansen
* @Date:   2018-10-18 17:09:50
* @Last Modified by:   ansen
* @Last Modified time: 2018-10-19 11:21:10
*/
.workshop-board-area {
  padding: 20px 0 47px;
  text-align: center; }
  .workshop-board-area .workshop-board-box {
    display: inline-block;
    padding: 15px;
    border: 2px dashed #fde477;
    background-color: rgba(255, 255, 255, 0.5);
    animation-delay: 1.3s;
    -webkit-animation-delay: 1.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    border-radius: 10px; }
    @media screen and (min-width: 360px) {
      .workshop-board-area .workshop-board-box {
        padding: 30px; } }
    @media screen and (min-width: 768px) {
      .workshop-board-area .workshop-board-box {
        padding: 30px 63px 45px; } }
    .workshop-board-area .workshop-board-box .workshop-board-title {
      font-weight: bold;
      font-size: 18px;
      color: #e47200;
      margin-bottom: 10px; }
      @media screen and (min-width: 360px) {
        .workshop-board-area .workshop-board-box .workshop-board-title {
          margin-bottom: 15px; } }
      @media screen and (min-width: 768px) {
        .workshop-board-area .workshop-board-box .workshop-board-title {
          margin-bottom: 20px; } }
    .workshop-board-area .workshop-board-box .workshop-board-content {
      text-align: left;
      font-size: 16px;
      color: #6e4b42;
      line-height: 1.7; }

.workshop-parent-area {
  margin-bottom: 50px; }
  @media screen and (min-width: 600px) {
    .workshop-parent-area {
      margin-bottom: 74px; } }
  .workshop-parent-area .workshop-parent-row {
    padding: 85px 0 0; }
    @media screen and (min-width: 768px) {
      .workshop-parent-area .workshop-parent-row {
        padding: 85px 220px 0px 0px; } }
    @media screen and (min-width: 992px) {
      .workshop-parent-area .workshop-parent-row {
        padding: 85px 220px 0px 73px; } }
    .workshop-parent-area .workshop-parent-row + .workshop-parent-row {
      margin-top: 55px; }
    .workshop-parent-area .workshop-parent-row .workshop-parent-box {
      background-color: #FFE6A3;
      border-radius: 10px;
      position: relative; }
      .workshop-parent-area .workshop-parent-row .workshop-parent-box:before {
        content: '';
        display: block;
        position: absolute; }
      .workshop-parent-area .workshop-parent-row .workshop-parent-box .workshop-parent-photo {
        display: inline-block;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        overflow: hidden;
        border: 10px solid #FFE6A3;
        position: absolute;
        top: -90px;
        left: 50%;
        transform: translate(-50%, 0); }
        @media screen and (min-width: 992px) {
          .workshop-parent-area .workshop-parent-row .workshop-parent-box .workshop-parent-photo {
            left: -70px;
            transform: translate(0, 0); } }
      .workshop-parent-area .workshop-parent-row .workshop-parent-box .workshop-parent-content {
        padding: 163px 30px 30px;
        min-height: 200px; }
        @media screen and (min-width: 768px) {
          .workshop-parent-area .workshop-parent-row .workshop-parent-box .workshop-parent-content {
            padding: 160px 30px 30px; } }
        @media screen and (min-width: 992px) {
          .workshop-parent-area .workshop-parent-row .workshop-parent-box .workshop-parent-content {
            padding: 40px 30px 40px 200px; } }
        .workshop-parent-area .workshop-parent-row .workshop-parent-box .workshop-parent-content .workshop-parent-title {
          font-weight: bold;
          font-size: 20px;
          color: #e47200;
          margin-bottom: 10px; }
        .workshop-parent-area .workshop-parent-row .workshop-parent-box .workshop-parent-content .workshop-parent-text {
          font-size: 16px;
          color: #6e4b42;
          line-height: 1.7; }
  .workshop-parent-area .workshop-parent-row:nth-child(3n-2) .workshop-parent-box:before {
    width: 148px;
    height: 155px;
    background: url(../img/act2018/workshop/workshop_pic01_2x.png) 0px 0px no-repeat;
    background-size: 148px;
    bottom: 15px;
    right: 10px;
    display: none; }
    @media screen and (min-width: 768px) {
      .workshop-parent-area .workshop-parent-row:nth-child(3n-2) .workshop-parent-box:before {
        background: url(../img/act2018/workshop/workshop_pic01.png) 0px 0px no-repeat;
        background-size: 148px;
        top: -10px;
        bottom: auto;
        right: -255px;
        display: block; } }
    @media screen and (min-width: 768px) {
      .workshop-parent-area .workshop-parent-row:nth-child(3n-2) .workshop-parent-box:before {
        right: -195px; } }
    @media screen and (min-width: 1200px) {
      .workshop-parent-area .workshop-parent-row:nth-child(3n-2) .workshop-parent-box:before {
        right: -218px; } }
  .workshop-parent-area .workshop-parent-row:nth-child(3n-1) {
    padding: 85px 0 0; }
    @media screen and (min-width: 768px) {
      .workshop-parent-area .workshop-parent-row:nth-child(3n-1) {
        padding: 85px 0 0 190px; } }
    @media screen and (min-width: 992px) {
      .workshop-parent-area .workshop-parent-row:nth-child(3n-1) {
        padding: 85px 120px 0px 315px; } }
    .workshop-parent-area .workshop-parent-row:nth-child(3n-1) .workshop-parent-box:before {
      width: 152px;
      height: 115px;
      background: url(../img/act2018/workshop/workshop_pic02_2x.png) 0px 0px no-repeat;
      background-size: 152px;
      bottom: 15px;
      left: 10px;
      z-index: 2;
      display: none; }
      @media screen and (min-width: 768px) {
        .workshop-parent-area .workshop-parent-row:nth-child(3n-1) .workshop-parent-box:before {
          background: url(../img/act2018/workshop/workshop_pic02.png) 0px 0px no-repeat;
          background-size: 152px;
          bottom: -5px;
          left: -190px;
          display: block; } }
      @media screen and (min-width: 992px) {
        .workshop-parent-area .workshop-parent-row:nth-child(3n-1) .workshop-parent-box:before {
          left: -235px; } }
    .workshop-parent-area .workshop-parent-row:nth-child(3n-1) .workshop-parent-box .workshop-parent-photo {
      left: auto;
      right: 50%;
      transform: translate(50%, 0); }
      @media screen and (min-width: 992px) {
        .workshop-parent-area .workshop-parent-row:nth-child(3n-1) .workshop-parent-box .workshop-parent-photo {
          right: -70px;
          transform: translate(0, 0); } }
    .workshop-parent-area .workshop-parent-row:nth-child(3n-1) .workshop-parent-box .workshop-parent-content {
      padding: 163px 30px 30px; }
      @media screen and (min-width: 768px) {
        .workshop-parent-area .workshop-parent-row:nth-child(3n-1) .workshop-parent-box .workshop-parent-content {
          padding: 160px 30px 30px; } }
      @media screen and (min-width: 992px) {
        .workshop-parent-area .workshop-parent-row:nth-child(3n-1) .workshop-parent-box .workshop-parent-content {
          padding: 40px 200px 40px 30px; } }
  @media screen and (min-width: 600px) {
    .workshop-parent-area .workshop-parent-row:nth-child(3n) {
      padding-bottom: 0; } }
  .workshop-parent-area .workshop-parent-row:nth-child(3n) .workshop-parent-box:before {
    width: 207px;
    height: 154px;
    background: url(../img/act2018/workshop/workshop_pic03_2x.png) 0px 0px no-repeat;
    background-size: 207px;
    bottom: -185px;
    right: 10px;
    display: none; }
    @media screen and (min-width: 600px) {
      .workshop-parent-area .workshop-parent-row:nth-child(3n) .workshop-parent-box:before {
        display: none; } }
    @media screen and (min-width: 768px) {
      .workshop-parent-area .workshop-parent-row:nth-child(3n) .workshop-parent-box:before {
        background: url(../img/act2018/workshop/workshop_pic03.png) 0px 0px no-repeat;
        background-size: 207px;
        bottom: -60px;
        right: -225px;
        display: block; } }
    @media screen and (min-width: 992px) {
      .workshop-parent-area .workshop-parent-row:nth-child(3n) .workshop-parent-box:before {
        right: -225px; } }

.workshop-btn-area {
  text-align: center;
  margin-bottom: 50px;
  margin-bottom: 80px;
  padding-left: 10px; }
  @media screen and (min-width: 768px) {
    .workshop-btn-area {
      margin-bottom: 90px;
      padding-left: 0; } }
  .workshop-btn-area .click-btn {
    cursor: pointer;
    padding: 10px 65px; }
    .workshop-btn-area .click-btn:hover, .workshop-btn-area .click-btn:focus, .workshop-btn-area .click-btn:active {
      color: #fff; }

.survey-page {
  padding-bottom: 180px; }
  @media screen and (min-width: 992px) {
    .survey-page {
      padding-bottom: 50px; } }
  .survey-page .page-share-area {
    padding-bottom: 0; }

.survey-vote-area {
  margin-top: 60px; }
  .survey-vote-area .media-area {
    text-align: center; }
    .survey-vote-area .media-area img {
      max-width: 100%;
      width: 500px;
      height: auto; }
    @media screen and (min-width: 992px) {
      .survey-vote-area .media-area {
        float: left;
        width: 45%;
        display: inline-block; } }
  .survey-vote-area .content-area {
    text-align: center; }
    .survey-vote-area .content-area .question {
      font-size: 18px;
      font-weight: bold;
      color: #724e45;
      line-height: 1.5; }
      @media screen and (min-width: 992px) {
        .survey-vote-area .content-area .question {
          font-size: 22px; } }
    @media screen and (min-width: 992px) {
      .survey-vote-area .content-area {
        float: right;
        display: inline-block;
        width: 55%;
        padding-top: 60px; } }
    .survey-vote-area .content-area .survey-btn-area {
      margin-top: 60px;
      margin-bottom: 65px;
      text-align: center;
      line-height: 1.6em; }
  .survey-vote-area .click-btn {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.2rem;
    width: 140px;
    height: 45px;
    padding: 10px 0px 10px 56px; }
    @media screen and (min-width: 500px) {
      .survey-vote-area .click-btn {
        padding: 13px 0px 13px 45px;
        width: 195px;
        height: 50px; } }
    .survey-vote-area .click-btn.yes {
      background-color: #4c9b55;
      box-shadow: 0 8px #3D8946;
      background: #4c9b55 url("../img/act2020/btn_agree_icon_2x.png") left -3px top 50% no-repeat;
      background-size: auto 50px; }
      .survey-vote-area .click-btn.yes:hover {
        box-shadow: 0 10px #3D8946; }
      .survey-vote-area .click-btn.yes:active {
        box-shadow: 0 6px #3D8946; }
      @media screen and (min-width: 500px) {
        .survey-vote-area .click-btn.yes {
          background: #4c9b55 url("../img/act2020/btn_agree_icon_2x.png") left 0 top 50% no-repeat;
          background-size: auto 50px;
          box-shadow: 0 10px #3D8946; }
          .survey-vote-area .click-btn.yes:hover {
            box-shadow: 0 12px #3D8946; }
          .survey-vote-area .click-btn.yes:active {
            box-shadow: 0 8px #3D8946; } }
    .survey-vote-area .click-btn.no {
      background-color: #f16448;
      box-shadow: 0 8px #e74727;
      background: #f16448 url("../img/act2020/btn_disagree_icon_2x.png") left -3px top 50% no-repeat;
      background-size: auto 50px; }
      .survey-vote-area .click-btn.no:hover {
        box-shadow: 0 10px #e74727; }
      .survey-vote-area .click-btn.no:active {
        box-shadow: 0 6px #e74727; }
      @media screen and (min-width: 500px) {
        .survey-vote-area .click-btn.no {
          background: #f16448 url("../img/act2020/btn_disagree_icon_2x.png") left 0 top 50% no-repeat;
          background-size: auto 50px;
          box-shadow: 0 10px #e74727; }
          .survey-vote-area .click-btn.no:hover {
            box-shadow: 0 12px #e74727; }
          .survey-vote-area .click-btn.no:active {
            box-shadow: 0 8px #e74727; } }
    .survey-vote-area .click-btn + .click-btn {
      margin-left: 5px; }
      @media screen and (min-width: 500px) {
        .survey-vote-area .click-btn + .click-btn {
          margin-left: 40px; } }

.survey-intro-area {
  padding: 20px 20px 40px 20px;
  border: dashed 2px #ffdc47;
  background-color: #ffea8e;
  border-radius: 20px;
  line-height: 1.6;
  color: #6e4b42;
  font-size: 16px;
  margin-top: 10px; }
  @media screen and (min-width: 400px) {
    .survey-intro-area {
      margin-top: 28px; } }
  @media screen and (min-width: 992px) {
    .survey-intro-area {
      padding: 50px;
      margin-top: 35px; } }
  @media screen and (min-width: 1200px) {
    .survey-intro-area {
      padding: 100px; } }
  .survey-intro-area .title-area {
    font-weight: bold;
    font-size: 21px;
    color: #6e4b42;
    line-height: 1.5em;
    margin-bottom: 8px; }
  .survey-intro-area .intro-top-area img {
    height: auto;
    max-width: 100%; }
  .survey-intro-area .intro-top-area .block-1-pic {
    width: calc(786px * .8); }
    @media screen and (min-width: 992px) {
      .survey-intro-area .intro-top-area .block-1-pic {
        width: 786px; } }
  .survey-intro-area .intro-top-area .block-2-pic {
    width: calc(506px * .8); }
    @media screen and (min-width: 992px) {
      .survey-intro-area .intro-top-area .block-2-pic {
        width: 506px; } }
  .survey-intro-area .intro-top-area .block-2-word {
    width: calc(403px * .8); }
    @media screen and (min-width: 992px) {
      .survey-intro-area .intro-top-area .block-2-word {
        width: 403px; } }
  .survey-intro-area .intro-top-area .block-3-pic {
    width: calc(403px * .8); }
    @media screen and (min-width: 992px) {
      .survey-intro-area .intro-top-area .block-3-pic {
        width: 403px; } }
  .survey-intro-area .intro-top-area .block-3-word {
    width: calc(396px * .8); }
    @media screen and (min-width: 992px) {
      .survey-intro-area .intro-top-area .block-3-word {
        width: 396px; } }
  .survey-intro-area .intro-top-area .block-4-pic {
    width: calc(540px * .8); }
    @media screen and (min-width: 992px) {
      .survey-intro-area .intro-top-area .block-4-pic {
        width: 540px; } }
  .survey-intro-area .intro-top-area .block-4-word {
    width: calc(383px * .8); }
    @media screen and (min-width: 992px) {
      .survey-intro-area .intro-top-area .block-4-word {
        width: 383px; } }
  .survey-intro-area .intro-top-area .block-5-pic {
    width: calc(500px * .8); }
    @media screen and (min-width: 992px) {
      .survey-intro-area .intro-top-area .block-5-pic {
        width: 500px; } }
  .survey-intro-area .intro-top-area .desc-area {
    text-align: justify; }
  .survey-intro-area .intro-top-block .img-area {
    text-align: center;
    margin-bottom: 20px;
    font-size: 0; }
  .survey-intro-area .intro-top-block + .intro-top-block {
    margin-top: 48px; }
  .survey-intro-area .intro-top-block.block-2 .img-box {
    margin: auto; }
    .survey-intro-area .intro-top-block.block-2 .img-box.pic {
      margin-top: 20px; }
  @media screen and (min-width: 768px) {
    .survey-intro-area .intro-top-block.block-2 .img-area .img-box.pic {
      width: 60%; }
    .survey-intro-area .intro-top-block.block-2 .img-area .img-box.word {
      width: 40%; } }
  @media screen and (min-width: 992px) {
    .survey-intro-area .intro-top-block.block-2 .img-area {
      direction: rtl; }
      .survey-intro-area .intro-top-block.block-2 .img-area .img-box {
        display: inline-block;
        vertical-align: middle; }
    .survey-intro-area .intro-top-block.block-2 .text-area {
      display: inline-block; } }
  .survey-intro-area .intro-top-block.block-3 .img-box {
    margin: auto; }
    .survey-intro-area .intro-top-block.block-3 .img-box.pic {
      margin-top: 20px; }
  @media screen and (min-width: 768px) {
    .survey-intro-area .intro-top-block.block-3 .img-area .img-box.pic {
      width: 50%; }
    .survey-intro-area .intro-top-block.block-3 .img-area .img-box.word {
      width: 50%; } }
  @media screen and (min-width: 992px) {
    .survey-intro-area .intro-top-block.block-3 .img-area .img-box {
      display: inline-block;
      vertical-align: middle; }
    .survey-intro-area .intro-top-block.block-3 .text-area {
      display: inline-block; } }
  .survey-intro-area .intro-top-block.block-4 .img-box {
    margin: auto; }
    .survey-intro-area .intro-top-block.block-4 .img-box.pic {
      margin-top: 20px; }
  @media screen and (min-width: 768px) {
    .survey-intro-area .intro-top-block.block-4 .img-area .img-box.pic {
      width: 60%; }
    .survey-intro-area .intro-top-block.block-4 .img-area .img-box.word {
      width: 40%; } }
  @media screen and (min-width: 992px) {
    .survey-intro-area .intro-top-block.block-4 .img-area .img-box {
      display: inline-block;
      vertical-align: middle; }
    .survey-intro-area .intro-top-block.block-4 .text-area {
      display: inline-block; } }
  .survey-intro-area .intro-top-block.block-5 .block-5-more-area {
    margin-top: 25px; }
    .survey-intro-area .intro-top-block.block-5 .block-5-more-area .more-word {
      display: inline-block;
      margin-right: 10px;
      margin-bottom: 10px; }
    .survey-intro-area .intro-top-block.block-5 .block-5-more-area .click-btn {
      padding: 10px 20px;
      font-size: 16px; }
      @media screen and (min-width: 768px) {
        .survey-intro-area .intro-top-block.block-5 .block-5-more-area .click-btn {
          padding: 10px 40px;
          font-size: 20px; } }
  .survey-intro-area .intro-top-block.block-5 .block-5-title {
    font-weight: bold;
    font-size: 18px;
    color: #e47200;
    line-height: 1.5em;
    margin: 12px 0 6px 0; }
  .survey-intro-area .intro-top-block.block-5 .block-5-desc {
    position: relative;
    padding-left: 22px; }
    .survey-intro-area .intro-top-block.block-5 .block-5-desc:before {
      content: '';
      display: block;
      position: absolute;
      top: 3px;
      left: 0;
      width: 13px;
      height: 19px;
      background: url("../img/act2020/vote_description_icon_2x.png") center no-repeat;
      background-size: 100%; }
  @media screen and (min-width: 992px) {
    .survey-intro-area .intro-top-block.block-5 .img-area {
      float: left;
      display: inline-block;
      vertical-align: middle;
      width: 50%; }
    .survey-intro-area .intro-top-block.block-5 .text-area {
      float: left;
      display: inline-block;
      width: 50%;
      padding-left: 34px;
      padding-top: 50px; } }

.survey-form-area {
  margin-top: 45px;
  padding: 30px;
  border: 2px dashed #fde477;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  font-size: 16px;
  color: #724e45; }
  .survey-form-area .form-title-area {
    color: #724e45;
    font-weight: bold;
    font-size: 25px;
    text-align: center;
    margin-bottom: 50px;
    position: relative; }
    .survey-form-area .form-title-area .title {
      position: relative;
      display: inline-block;
      padding-left: 35px; }
      .survey-form-area .form-title-area .title:before {
        content: '';
        display: block;
        position: absolute;
        top: -1px;
        left: 0;
        width: 25px;
        height: 40px;
        background: url("../img/act2020/vote_step2_form_icon_2x.png") center no-repeat;
        background-size: 100%; }
  @media screen and (min-width: 992px) {
    .survey-form-area {
      padding: 30px 45px 45px 45px; } }
  @media screen and (min-width: 1200px) {
    .survey-form-area {
      padding: 30px 120px 45px 120px; } }
  .survey-form-area .form-group .form-control {
    border: 1px solid #f1d972;
    height: 40px; }
    .survey-form-area .form-group .form-control:focus {
      box-shadow: none !important; }
  .survey-form-area .form-group label.control-label {
    position: relative;
    margin-bottom: 4px; }
    .survey-form-area .form-group label.control-label .required {
      position: absolute;
      top: 0px;
      left: -11px; }
    @media screen and (min-width: 768px) {
      .survey-form-area .form-group label.control-label {
        float: left;
        width: 150px; }
        .survey-form-area .form-group label.control-label.mt {
          margin-top: 9px; } }
  @media screen and (min-width: 768px) {
    .survey-form-area .form-group .input-box {
      float: left;
      width: calc(100% - 150px); } }
  .survey-form-area .form-group .vcode-area input {
    float: left;
    width: 100%;
    margin-bottom: 15px; }
    @media screen and (min-width: 500px) {
      .survey-form-area .form-group .vcode-area input {
        margin-bottom: 0;
        width: calc(100% - 15px - 120px - 15px - 40px); } }
  .survey-form-area .form-group .vcode-area .vcode_img {
    float: left;
    width: 120px;
    height: 35px; }
    @media screen and (min-width: 500px) {
      .survey-form-area .form-group .vcode-area .vcode_img {
        margin-left: 12px; } }
  .survey-form-area .form-group .vcode-area .vcode_refresh {
    float: left;
    width: 40px;
    height: 40px;
    color: #FF9122;
    margin-left: 12px; }
    .survey-form-area .form-group .vcode-area .vcode_refresh i {
      font-size: 25px;
      padding-top: 9px; }
  .survey-form-area .customize-radio {
    width: 100px;
    margin-bottom: 6px; }
    .survey-form-area .customize-radio input {
      margin-right: 8px; }
  .survey-form-area .form-btn-area {
    text-align: center;
    margin-top: 35px; }
    .survey-form-area .form-btn-area .submit-btn {
      background-color: #f87d01;
      box-shadow: 0 6px #ee6500; }
      .survey-form-area .form-btn-area .submit-btn:hover {
        box-shadow: 0 8px #ee6500; }
      .survey-form-area .form-btn-area .submit-btn:active {
        box-shadow: 0 4px #ee6500; }

.survey-step3-page .fb-reply-area {
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 20px;
  border: 2px dashed #f1e1bf; }
  @media screen and (min-width: 992px) {
    .survey-step3-page .fb-reply-area {
      margin-top: 60px;
      margin-bottom: 60px; } }

.survey-result-area {
  font-size: 0;
  margin-bottom: 30px;
  line-height: 1.6em; }
  .survey-result-area .result-box {
    border-radius: 0px 20px 0 20px;
    margin: auto;
    position: relative;
    overflow: hidden; }
    .survey-result-area .result-box .proportion-box {
      height: 0;
      position: relative;
      padding-bottom: 53%; }
      .survey-result-area .result-box .proportion-box img.percent-bg {
        width: 100%;
        height: auto;
        max-height: 100%;
        position: absolute;
        top: 0;
        left: 0; }
    .survey-result-area .result-box .img-area {
      position: absolute;
      z-index: 1;
      width: 50%; }
      .survey-result-area .result-box .img-area img {
        height: auto;
        width: 100%; }
        @media screen and (min-width: 992px) {
          .survey-result-area .result-box .img-area img {
            width: calc(570px * .38); } }
        @media screen and (min-width: 1200px) {
          .survey-result-area .result-box .img-area img {
            width: calc(570px * .47); } }
    .survey-result-area .result-box.yes {
      background-color: #5fad68;
      border: 3px solid #3d8946; }
      .survey-result-area .result-box.yes .img-area {
        left: 0;
        bottom: 0; }
      .survey-result-area .result-box.yes .text-area {
        position: absolute;
        bottom: 16%;
        right: 10%; }
    .survey-result-area .result-box.no {
      background-color: #fb775d;
      border: 3px solid #e74727; }
      .survey-result-area .result-box.no .img-area {
        right: 0;
        bottom: 0; }
      .survey-result-area .result-box.no .text-area {
        position: absolute;
        bottom: 16%;
        left: 10%; }
    .survey-result-area .result-box .result {
      color: #fff; }
      .survey-result-area .result-box .result .number {
        font-size: 55px; }
      .survey-result-area .result-box .result .percent {
        font-size: 15px; }
    .survey-result-area .result-box .word {
      color: #FFDE5D;
      font-size: 25px;
      font-weight: bold;
      margin-top: 35px; }
    @media screen and (min-width: 600px) {
      .survey-result-area .result-box .result .number {
        font-size: 70px; }
      .survey-result-area .result-box .result .percent {
        font-size: 20px; }
      .survey-result-area .result-box .word {
        margin-top: 65px;
        font-size: 45px; } }
    @media screen and (min-width: 768px) {
      .survey-result-area .result-box {
        display: inline-block;
        width: calc( (100% - 30px) / 2); }
        .survey-result-area .result-box .result .number {
          font-size: 70px; }
        .survey-result-area .result-box .result .percent {
          font-size: 20px; }
        .survey-result-area .result-box .word {
          font-size: 45px; } }
    @media screen and (min-width: 992px) {
      .survey-result-area .result-box {
        width: calc( (100% - 50px) / 2); }
        .survey-result-area .result-box .result .number {
          font-size: 85px; }
        .survey-result-area .result-box .result .percent {
          font-size: 25px; }
        .survey-result-area .result-box .word {
          margin-top: 65px;
          font-size: 55px; } }
    @media screen and (min-width: 1200px) {
      .survey-result-area .result-box {
        width: calc( (100% - 90px) / 2); }
        .survey-result-area .result-box .result .number {
          font-size: 100px; }
        .survey-result-area .result-box .result .percent {
          font-size: 30px; }
        .survey-result-area .result-box .word {
          font-size: 65px; } }
    .survey-result-area .result-box + .result-box {
      margin-top: 20px; }
      @media screen and (min-width: 500px) {
        .survey-result-area .result-box + .result-box {
          margin-top: 20px; } }
      @media screen and (min-width: 768px) {
        .survey-result-area .result-box + .result-box {
          margin-top: 0;
          margin-left: 30px; } }
      @media screen and (min-width: 992px) {
        .survey-result-area .result-box + .result-box {
          margin-left: 50px; } }
      @media screen and (min-width: 1200px) {
        .survey-result-area .result-box + .result-box {
          margin-left: 90px; } }

.child-angry-page {
  margin-bottom: 180px; }
  @media screen and (min-width: 992px) {
    .child-angry-page {
      margin-bottom: 100px; } }
  .child-angry-page .angry-block {
    background-color: #ffeda1;
    border-radius: 20px;
    line-height: 1.6;
    color: #6e4b42;
    font-size: 16px;
    padding: 0 20px 20px 20px;
    margin-top: calc(40% + 30px); }
    @media screen and (min-width: 768px) {
      .child-angry-page .angry-block {
        margin-top: calc(32% + 48px);
        padding: 0 30px 30px 30px; } }
    @media screen and (min-width: 992px) {
      .child-angry-page .angry-block {
        padding: 0 50px 50px 50px;
        margin-top: calc(300px + 48px); } }
    @media screen and (min-width: 1200px) {
      .child-angry-page .angry-block {
        padding: 0 100px 50px 100px; } }
    .child-angry-page .angry-block .title-area {
      font-weight: bold;
      line-height: 1.5;
      color: #df615f;
      font-size: 21px;
      margin-bottom: 12px;
      margin-top: 50px; }
      @media screen and (min-width: 768px) {
        .child-angry-page .angry-block .title-area {
          font-size: 24px; } }
      @media screen and (min-width: 992px) {
        .child-angry-page .angry-block .title-area {
          font-size: 28px; } }
    .child-angry-page .angry-block .step-area {
      margin-top: 25px; }
    .child-angry-page .angry-block .step-tag {
      display: inline-block;
      text-align: center;
      padding: 5px 10px;
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      border-radius: 10px;
      background-color: #f17f22;
      margin-bottom: 12px; }
    .child-angry-page .angry-block .step .step-li {
      float: left;
      font-size: 16px;
      font-family: 'Arial';
      font-weight: bold;
      font-style: italic;
      color: #f17f22;
      margin-right: 5px; }
    .child-angry-page .angry-block .step .step-desc {
      padding-left: 21px;
      display: block; }
    .child-angry-page .angry-block .media-area {
      text-align: center; }
      .child-angry-page .angry-block .media-area img {
        max-width: 100%;
        height: auto;
        margin-top: -40%; }
        @media screen and (min-width: 768px) {
          .child-angry-page .angry-block .media-area img {
            margin-top: -32%; } }
        @media screen and (min-width: 992px) {
          .child-angry-page .angry-block .media-area img {
            margin-top: -300px; } }
  .child-angry-page .page-bottom-area .page-share-area {
    padding-bottom: 0; }

.family-accout-page {
  position: relative;
  padding-bottom: 180px;
  line-height: 1.6;
  color: #6e4b42;
  font-size: 16px; }
  @media screen and (min-width: 992px) {
    .family-accout-page {
      padding-bottom: 50px; } }
  .family-accout-page .page-share-area {
    padding-bottom: 0; }
  .family-accout-page .title-text {
    color: #6E4B42;
    font-size: 18px; }
    @media screen and (min-width: 992px) {
      .family-accout-page .title-text {
        font-size: 24px; } }
  .family-accout-page .income-text {
    color: #55B492;
    font-weight: bold;
    font-size: 20px; }
    .family-accout-page .income-text.small {
      font-size: 16px; }
  .family-accout-page .expenditure-text {
    color: #DF615F;
    font-weight: bold;
    font-size: 20px; }
    .family-accout-page .expenditure-text.small {
      font-size: 16px; }
  .family-accout-page .balance-text {
    color: #E47200;
    font-weight: bold; }
  .family-accout-page .income-area {
    color: #76BDA4; }
  .family-accout-page .expenditure-area {
    color: #FF8A73; }
  .family-accout-page .fa-info-area {
    border-radius: 20px;
    border: 2px dashed #FFDC47;
    background: url("../img/act2021/account_dashbord_img_2x.png") 0% 100% no-repeat #FFEA8E;
    background-size: auto 150px;
    padding: 30px 30px 130px;
    margin-bottom: 30px; }
    .family-accout-page .fa-info-area .account-info-area .info-box .title-area {
      padding-top: 3px;
      padding-bottom: 20px; }
    .family-accout-page .fa-info-area .account-info-area .info-box .account-data-area .item-area {
      padding: 0px 10px 0px 3px;
      border-bottom: 1px solid #E9D283; }
      .family-accout-page .fa-info-area .account-info-area .info-box .account-data-area .item-area p {
        margin: 0px auto 10px 0px; }
    .family-accout-page .fa-info-area .account-info-area .info-box .account-data-area .sum-area {
      font-size: 18px;
      padding: 20px 10px 0px 3px; }
    @media screen and (min-width: 992px) {
      .family-accout-page .fa-info-area .account-info-area {
        float: left;
        width: 60%;
        border-right: 1px solid #E9D283;
        padding: 10px 40px;
        min-height: 280px; }
        .family-accout-page .fa-info-area .account-info-area .info-box {
          width: 80%;
          margin: 0px auto; }
          .family-accout-page .fa-info-area .account-info-area .info-box .title-area {
            width: 40%;
            float: left; }
          .family-accout-page .fa-info-area .account-info-area .info-box .account-data-area {
            width: 60%;
            float: right; }
            .family-accout-page .fa-info-area .account-info-area .info-box .account-data-area .sum-area {
              font-size: 20px; } }
    .family-accout-page .fa-info-area .account-chart-area {
      position: relative; }
      .family-accout-page .fa-info-area .account-chart-area .chart-show-area {
        width: 220px;
        height: 220px;
        margin: 0px auto; }
      @media screen and (min-width: 375px) {
        .family-accout-page .fa-info-area .account-chart-area .chart-show-area {
          width: 250px;
          height: 250px;
          margin: 0px auto; } }
      @media screen and (min-width: 992px) {
        .family-accout-page .fa-info-area .account-chart-area {
          float: right;
          width: 40%;
          padding: 10px 10px; }
          .family-accout-page .fa-info-area .account-chart-area .chart-show-area {
            height: 250px;
            margin: 0px auto; } }
      @media screen and (min-width: 1200px) {
        .family-accout-page .fa-info-area .account-chart-area {
          min-height: 280px; }
          .family-accout-page .fa-info-area .account-chart-area .chart-show-area {
            height: 280px;
            margin: 0px auto; } }
    @media screen and (min-width: 992px) {
      .family-accout-page .fa-info-area {
        padding: 30px;
        background: url("../img/act2021/account_dashbord_img_2x.png") 0% 100% no-repeat #FFEA8E;
        background-size: auto 230px; } }
  .family-accout-page .fa-record-area {
    margin-bottom: 30px;
    border-bottom: 1px solid #E7E2D9; }
    .family-accout-page .fa-record-area.dashboard-list {
      border-radius: 20px;
      border: 2px dashed #FFDC47;
      background: #fff;
      padding: 15px 30px 15px; }
      .family-accout-page .fa-record-area.dashboard-list .record-list-area .list-row + .list-row .list-cell {
        border-top: 1px solid #F4F1F1; }
    .family-accout-page .fa-record-area .record-list-area {
      display: table;
      width: 100%; }
      .family-accout-page .fa-record-area .record-list-area .list-row {
        display: table-row; }
        .family-accout-page .fa-record-area .record-list-area .list-row .list-cell {
          padding: 15px 0px; }
        .family-accout-page .fa-record-area .record-list-area .list-row .list-icon {
          display: table-cell;
          width: 36px;
          vertical-align: top; }
          .family-accout-page .fa-record-area .record-list-area .list-row .list-icon img {
            width: 36px; }
        .family-accout-page .fa-record-area .record-list-area .list-row .list-title {
          display: table-cell;
          padding: 15px 5px 15px 5px;
          vertical-align: top; }
          .family-accout-page .fa-record-area .record-list-area .list-row .list-title p {
            margin: 0px;
            padding: 0px; }
        .family-accout-page .fa-record-area .record-list-area .list-row .list-value {
          display: table-cell;
          width: 30px;
          text-align: right;
          vertical-align: top; }
        .family-accout-page .fa-record-area .record-list-area .list-row .list-fun {
          display: table-cell;
          width: 50px;
          vertical-align: top;
          background: url("../img/act2021/btn_edit_2x.png") right 0px top 15px no-repeat;
          background-size: auto 36px; }
          .family-accout-page .fa-record-area .record-list-area .list-row .list-fun:hover {
            background: url("../img/act2021/btn_edit_hover_2x.png") right 0px top 15px no-repeat;
            background-size: auto 36px; }
          .family-accout-page .fa-record-area .record-list-area .list-row .list-fun:active {
            background: url("../img/act2021/btn_edit_hover_2x.png") right 0px top 15px no-repeat;
            background-size: auto 36px; }
        .family-accout-page .fa-record-area .record-list-area .list-row + .list-row .list-cell {
          border-top: 1px solid #E8E0D5; }
      @media screen and (min-width: 768px) {
        .family-accout-page .fa-record-area .record-list-area {
          dispaly: table; }
          .family-accout-page .fa-record-area .record-list-area .list-row .list-icon {
            width: 60px; }
            .family-accout-page .fa-record-area .record-list-area .list-row .list-icon img {
              width: 60px; }
          .family-accout-page .fa-record-area .record-list-area .list-row .list-title {
            padding-left: 15px; }
          .family-accout-page .fa-record-area .record-list-area .list-row .list-value {
            width: 50px;
            padding: 15px 0px 10px; }
          .family-accout-page .fa-record-area .record-list-area .list-row .list-fun {
            width: 55px; } }
  .family-accout-page .fa-chart-area {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px; }
    .family-accout-page .fa-chart-area .chart-area {
      text-align: center;
      padding-top: 15px; }
      .family-accout-page .fa-chart-area .chart-area .chart-show-area {
        min-height: 250px;
        width: 300px;
        text-align: center;
        margin: 0px auto; }
      .family-accout-page .fa-chart-area .chart-area .chart-value-list {
        display: table;
        width: 100%; }
        .family-accout-page .fa-chart-area .chart-area .chart-value-list .list-row {
          display: table-row; }
          .family-accout-page .fa-chart-area .chart-area .chart-value-list .list-row .list-cell {
            display: table-cell;
            padding: 10px 0px;
            vertical-align: top; }
            .family-accout-page .fa-chart-area .chart-area .chart-value-list .list-row .list-cell.color {
              width: 30px;
              padding-top: 12px; }
              .family-accout-page .fa-chart-area .chart-area .chart-value-list .list-row .list-cell.color .color-box {
                width: 20px;
                height: 20px;
                margin: 0px auto 0px 0px;
                border-radius: 50%; }
                .family-accout-page .fa-chart-area .chart-area .chart-value-list .list-row .list-cell.color .color-box.chart-value-color-1 {
                  background: #F98D50; }
                .family-accout-page .fa-chart-area .chart-area .chart-value-list .list-row .list-cell.color .color-box.chart-value-color-2 {
                  background: #E77BBC; }
                .family-accout-page .fa-chart-area .chart-area .chart-value-list .list-row .list-cell.color .color-box.chart-value-color-3 {
                  background: #9CBE71; }
                .family-accout-page .fa-chart-area .chart-area .chart-value-list .list-row .list-cell.color .color-box.chart-value-color-4 {
                  background: #6E97C8; }
                .family-accout-page .fa-chart-area .chart-area .chart-value-list .list-row .list-cell.color .color-box.chart-value-color-5 {
                  background: #A788CE; }
                .family-accout-page .fa-chart-area .chart-area .chart-value-list .list-row .list-cell.color .color-box.chart-value-color-6 {
                  background: #F6C562; }
                .family-accout-page .fa-chart-area .chart-area .chart-value-list .list-row .list-cell.color .color-box.chart-value-color-99 {
                  background: #76BD92; }
            .family-accout-page .fa-chart-area .chart-area .chart-value-list .list-row .list-cell.title {
              text-align: left; }
            .family-accout-page .fa-chart-area .chart-area .chart-value-list .list-row .list-cell.percent {
              width: 50px;
              text-align: right; }
            .family-accout-page .fa-chart-area .chart-area .chart-value-list .list-row .list-cell.value {
              width: 60px;
              text-align: right; }
          .family-accout-page .fa-chart-area .chart-area .chart-value-list .list-row + .list-row .list-cell {
            border-top: 1px solid #E8E0D5; }
    @media screen and (min-width: 375px) {
      .family-accout-page .fa-chart-area .chart-area .chart-show-area {
        min-height: 280px;
        width: 320px; } }
    @media screen and (min-width: 768px) {
      .family-accout-page .fa-chart-area .chart-area .chart-show-area {
        min-height: 280px;
        width: 420px; } }
    @media screen and (min-width: 992px) {
      .family-accout-page .fa-chart-area .chart-area .chart-show-area {
        min-height: 280px;
        width: 420px; }
      .family-accout-page .fa-chart-area .chart-area .chart-value-list {
        width: 80%;
        margin: 0px auto; }
        .family-accout-page .fa-chart-area .chart-area .chart-value-list .list-cell.value {
          width: 90px; } }
    @media screen and (min-width: 1200px) {
      .family-accout-page .fa-chart-area .chart-area .chart-show-area {
        min-height: 280px;
        width: 550px; } }
  .family-accout-page .fa-record-title {
    padding: 15px 0px 15px 0px;
    position: relative; }
    .family-accout-page .fa-record-title.all-list {
      border-bottom: 1px solid #E7E2D9; }
      .family-accout-page .fa-record-title.all-list a {
        float: right;
        font-size: 15px;
        position: relative;
        margin-left: 8px;
        margin-top: -3px;
        margin-bottom: 30px; }
        @media screen and (min-width: 768px) {
          .family-accout-page .fa-record-title.all-list a {
            font-size: 16px;
            margin-top: -5px; } }
    .family-accout-page .fa-record-title.chart-list {
      border-bottom: 1px solid #E7E2D9; }
      .family-accout-page .fa-record-title.chart-list .select-area {
        float: right;
        width: 200px; }
        .family-accout-page .fa-record-title.chart-list .select-area select {
          display: inline-block;
          padding: 2px 6px;
          border: 1px solid #E7E2D9;
          border-radius: 5px;
          webkit-box-shadow: none;
          box-shadow: none;
          height: 32px; }
          .family-accout-page .fa-record-title.chart-list .select-area select#report_year {
            width: 75px; }
          .family-accout-page .fa-record-title.chart-list .select-area select#report_month {
            width: 55px; }
        .family-accout-page .fa-record-title.chart-list .select-area button {
          background-color: #F7830E;
          height: 32px; }
          .family-accout-page .fa-record-title.chart-list .select-area button:hover {
            background-color: #E77604; }
          .family-accout-page .fa-record-title.chart-list .select-area button:active {
            background-color: #E77604; }
    @media screen and (min-width: 375px) {
      .family-accout-page .fa-record-title {
        padding: 15px 0px 15px 37px; }
        .family-accout-page .fa-record-title:before {
          content: '';
          display: block;
          width: 26px;
          height: 30px;
          background: url(../img/act2021/icon_list_2x.png) no-repeat;
          background-size: 26px;
          position: absolute;
          top: 13px;
          left: 0; } }
  .family-accout-page .record-btn-area {
    text-align: center; }
    .family-accout-page .record-btn-area .click-btn {
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      letter-spacing: 0.2rem;
      width: 155px;
      height: 45px;
      padding: 10px 0px 10px 56px; }
      @media screen and (min-width: 500px) {
        .family-accout-page .record-btn-area .click-btn {
          padding: 10px 0px 13px 45px;
          width: 195px;
          height: 50px;
          font-size: 20px; } }
      .family-accout-page .record-btn-area .click-btn.join {
        background-color: #1877F2;
        box-shadow: 0 8px #0866E0;
        background: #1877F2 url("../img/act2021/btn_fb_login_icon_2x.png") left -3px top 50% no-repeat;
        background-size: auto 50px;
        margin-bottom: 20px; }
        .family-accout-page .record-btn-area .click-btn.join:hover {
          box-shadow: 0 10px #0866E0; }
        .family-accout-page .record-btn-area .click-btn.join:active {
          box-shadow: 0 6px #0866E0; }
        @media screen and (min-width: 500px) {
          .family-accout-page .record-btn-area .click-btn.join {
            background: #1877F2 url("../img/act2021/btn_fb_login_icon_2x.png") left 0 top 50% no-repeat;
            background-size: auto 50px;
            box-shadow: 0 10px #0866E0; }
            .family-accout-page .record-btn-area .click-btn.join:hover {
              box-shadow: 0 12px #0866E0; }
            .family-accout-page .record-btn-area .click-btn.join:active {
              box-shadow: 0 8px #0866E0; } }
      .family-accout-page .record-btn-area .click-btn.record {
        background-color: #F7830E;
        box-shadow: 0 8px #E77604;
        background: #F7830E url("../img/act2021/btn_record_icon_2x.png") left -3px top 50% no-repeat;
        background-size: auto 50px; }
        .family-accout-page .record-btn-area .click-btn.record:hover {
          box-shadow: 0 10px #E77604; }
        .family-accout-page .record-btn-area .click-btn.record:active {
          box-shadow: 0 6px #E77604; }
        @media screen and (min-width: 500px) {
          .family-accout-page .record-btn-area .click-btn.record {
            background: #F7830E url("../img/act2021/btn_record_icon_2x.png") left 0 top 50% no-repeat;
            background-size: auto 50px;
            box-shadow: 0 10px #E77604; }
            .family-accout-page .record-btn-area .click-btn.record:hover {
              box-shadow: 0 12px #E77604; }
            .family-accout-page .record-btn-area .click-btn.record:active {
              box-shadow: 0 8px #E77604; } }
      .family-accout-page .record-btn-area .click-btn.back-my-fa {
        background-color: #F7830E;
        box-shadow: 0 8px #E77604;
        background: #F7830E url("../img/act2021/btn_record_icon_2x.png") left -3px top 50% no-repeat;
        background-size: auto 50px;
        width: 170px; }
        @media screen and (min-width: 500px) {
          .family-accout-page .record-btn-area .click-btn.back-my-fa {
            width: 230px; } }
        .family-accout-page .record-btn-area .click-btn.back-my-fa:hover {
          box-shadow: 0 10px #E77604; }
        .family-accout-page .record-btn-area .click-btn.back-my-fa:active {
          box-shadow: 0 6px #E77604; }
        @media screen and (min-width: 500px) {
          .family-accout-page .record-btn-area .click-btn.back-my-fa {
            background: #F7830E url("../img/act2021/btn_record_icon_2x.png") left 0 top 50% no-repeat;
            background-size: auto 50px;
            box-shadow: 0 10px #E77604; }
            .family-accout-page .record-btn-area .click-btn.back-my-fa:hover {
              box-shadow: 0 12px #E77604; }
            .family-accout-page .record-btn-area .click-btn.back-my-fa:active {
              box-shadow: 0 8px #E77604; } }
      .family-accout-page .record-btn-area .click-btn + .click-btn {
        margin-left: 5px; }
        @media screen and (min-width: 500px) {
          .family-accout-page .record-btn-area .click-btn + .click-btn {
            margin-left: 40px; } }
  .family-accout-page .record-btn {
    display: inline-block;
    color: #fff;
    border-radius: 18px;
    padding: 3px 19px;
    position: absolute;
    bottom: 0px;
    right: 0px; }
    .family-accout-page .record-btn.default {
      bottom: 0px;
      right: 0px;
      background-color: #F7830E; }
      .family-accout-page .record-btn.default:hover {
        background-color: #E97705; }
      @media screen and (min-width: 992px) {
        .family-accout-page .record-btn.default {
          bottom: 0px;
          right: 0px; } }
    .family-accout-page .record-btn.chart {
      bottom: -40px;
      right: 0px;
      background-color: #F7830E; }
      .family-accout-page .record-btn.chart:hover {
        background-color: #E97705; }
      @media screen and (min-width: 992px) {
        .family-accout-page .record-btn.chart {
          bottom: 0px;
          right: 0px; } }
    .family-accout-page .record-btn.record {
      background-color: #f47c64; }
      .family-accout-page .record-btn.record:hover {
        background-color: #c85e49; }
  .family-accout-page .account-intro-area {
    text-align: center;
    padding-bottom: 20px; }
  .family-accout-page .account-intro-box {
    padding: 20px 20px 40px 20px;
    border: dashed 2px #ffdc47;
    background-color: #ffea8e;
    border-radius: 20px;
    text-align: center;
    line-height: 1.6;
    color: #6e4b42;
    font-size: 16px;
    position: relative;
    margin-top: 10px; }
    @media screen and (min-width: 400px) {
      .family-accout-page .account-intro-box {
        margin-top: 28px; } }
    @media screen and (min-width: 992px) {
      .family-accout-page .account-intro-box {
        padding: 50px 50px 40px;
        margin-top: 35px; } }
    @media screen and (min-width: 1200px) {
      .family-accout-page .account-intro-box {
        padding: 60px 60px 40px; } }
    .family-accout-page .account-intro-box .record-btn-area {
      padding-top: 30px; }
    .family-accout-page .account-intro-box .actimg {
      margin: 0px auto;
      max-width: 100%; }
    .family-accout-page .account-intro-box .quest-title {
      margin-top: 35px;
      padding-left: 35px;
      text-align: left;
      position: relative; }
      .family-accout-page .account-intro-box .quest-title:before {
        content: '';
        display: block;
        position: absolute;
        top: -6px;
        left: 0;
        width: 28px;
        height: 34px;
        background: url("../img/act2021/icon_question_2x.png") center no-repeat;
        background-size: 100%; }
      .family-accout-page .account-intro-box .quest-title.notice {
        padding-left: 36px; }
        .family-accout-page .account-intro-box .quest-title.notice:before {
          top: -3px;
          width: 28px;
          height: 32px;
          background: url("../img/act2022/icon_notice_2x.png") center no-repeat;
          background-size: 100%; }
    .family-accout-page .account-intro-box .quest-desc-box {
      margin-bottom: 5px;
      text-align: left; }
      .family-accout-page .account-intro-box .quest-desc-box .quest-sub-title {
        margin-top: 30px;
        margin-bottom: 5px;
        color: #E47200;
        font-size: 20px;
        font-weight: bold;
        text-align: left; }
      .family-accout-page .account-intro-box .quest-desc-box ol {
        padding: 0;
        list-style: none !important;
        counter-reset: ol-item;
        margin-top: 35px;
        margin-bottom: 0; }
        .family-accout-page .account-intro-box .quest-desc-box ol > li {
          display: block;
          padding-left: 15px;
          position: relative; }
          .family-accout-page .account-intro-box .quest-desc-box ol > li:before {
            position: absolute;
            text-align: right;
            left: 0;
            top: 0;
            content: counter(ol-item) ".";
            counter-increment: ol-item;
            display: inline-block;
            padding-right: 15px;
            min-width: 21px; }
    .family-accout-page .account-intro-box .title-area {
      font-weight: bold;
      font-size: 21px;
      color: #6e4b42;
      line-height: 1.5em;
      margin-bottom: 8px; }
    .family-accout-page .account-intro-box .intro-top-area img {
      height: auto;
      max-width: 100%; }
    .family-accout-page .account-intro-box .intro-top-area .block-1-pic {
      width: calc(786px * .8); }
      @media screen and (min-width: 992px) {
        .family-accout-page .account-intro-box .intro-top-area .block-1-pic {
          width: 786px; } }
    .family-accout-page .account-intro-box .intro-top-area .block-2-pic {
      width: calc(506px * .8); }
      @media screen and (min-width: 992px) {
        .family-accout-page .account-intro-box .intro-top-area .block-2-pic {
          width: 506px; } }
    .family-accout-page .account-intro-box .intro-top-area .block-2-word {
      width: calc(403px * .8); }
      @media screen and (min-width: 992px) {
        .family-accout-page .account-intro-box .intro-top-area .block-2-word {
          width: 403px; } }
    .family-accout-page .account-intro-box .intro-top-area .block-3-pic {
      width: calc(403px * .8); }
      @media screen and (min-width: 992px) {
        .family-accout-page .account-intro-box .intro-top-area .block-3-pic {
          width: 403px; } }
    .family-accout-page .account-intro-box .intro-top-area .block-3-word {
      width: calc(396px * .8); }
      @media screen and (min-width: 992px) {
        .family-accout-page .account-intro-box .intro-top-area .block-3-word {
          width: 396px; } }
    .family-accout-page .account-intro-box .intro-top-area .block-4-pic {
      width: calc(540px * .8); }
      @media screen and (min-width: 992px) {
        .family-accout-page .account-intro-box .intro-top-area .block-4-pic {
          width: 540px; } }
    .family-accout-page .account-intro-box .intro-top-area .block-4-word {
      width: calc(383px * .8); }
      @media screen and (min-width: 992px) {
        .family-accout-page .account-intro-box .intro-top-area .block-4-word {
          width: 383px; } }
    .family-accout-page .account-intro-box .intro-top-area .block-5-pic {
      width: calc(500px * .8); }
      @media screen and (min-width: 992px) {
        .family-accout-page .account-intro-box .intro-top-area .block-5-pic {
          width: 500px; } }
    .family-accout-page .account-intro-box .intro-top-area .desc-area {
      text-align: justify; }
    .family-accout-page .account-intro-box .intro-top-block .img-area {
      text-align: center;
      margin-bottom: 20px;
      font-size: 0; }
    .family-accout-page .account-intro-box .intro-top-block + .intro-top-block {
      margin-top: 48px; }
    .family-accout-page .account-intro-box .intro-top-block.block-2 .img-box {
      margin: auto; }
      .family-accout-page .account-intro-box .intro-top-block.block-2 .img-box.pic {
        margin-top: 20px; }
    @media screen and (min-width: 768px) {
      .family-accout-page .account-intro-box .intro-top-block.block-2 .img-area .img-box.pic {
        width: 60%; }
      .family-accout-page .account-intro-box .intro-top-block.block-2 .img-area .img-box.word {
        width: 40%; } }
    @media screen and (min-width: 992px) {
      .family-accout-page .account-intro-box .intro-top-block.block-2 .img-area {
        direction: rtl; }
        .family-accout-page .account-intro-box .intro-top-block.block-2 .img-area .img-box {
          display: inline-block;
          vertical-align: middle; }
      .family-accout-page .account-intro-box .intro-top-block.block-2 .text-area {
        display: inline-block; } }
    .family-accout-page .account-intro-box .intro-top-block.block-3 .img-box {
      margin: auto; }
      .family-accout-page .account-intro-box .intro-top-block.block-3 .img-box.pic {
        margin-top: 20px; }
    @media screen and (min-width: 768px) {
      .family-accout-page .account-intro-box .intro-top-block.block-3 .img-area .img-box.pic {
        width: 50%; }
      .family-accout-page .account-intro-box .intro-top-block.block-3 .img-area .img-box.word {
        width: 50%; } }
    @media screen and (min-width: 992px) {
      .family-accout-page .account-intro-box .intro-top-block.block-3 .img-area .img-box {
        display: inline-block;
        vertical-align: middle; }
      .family-accout-page .account-intro-box .intro-top-block.block-3 .text-area {
        display: inline-block; } }
    .family-accout-page .account-intro-box .intro-top-block.block-4 .img-box {
      margin: auto; }
      .family-accout-page .account-intro-box .intro-top-block.block-4 .img-box.pic {
        margin-top: 20px; }
    @media screen and (min-width: 768px) {
      .family-accout-page .account-intro-box .intro-top-block.block-4 .img-area .img-box.pic {
        width: 60%; }
      .family-accout-page .account-intro-box .intro-top-block.block-4 .img-area .img-box.word {
        width: 40%; } }
    @media screen and (min-width: 992px) {
      .family-accout-page .account-intro-box .intro-top-block.block-4 .img-area .img-box {
        display: inline-block;
        vertical-align: middle; }
      .family-accout-page .account-intro-box .intro-top-block.block-4 .text-area {
        display: inline-block; } }
    .family-accout-page .account-intro-box .intro-top-block.block-5 .block-5-more-area {
      margin-top: 25px; }
      .family-accout-page .account-intro-box .intro-top-block.block-5 .block-5-more-area .more-word {
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 10px; }
      .family-accout-page .account-intro-box .intro-top-block.block-5 .block-5-more-area .click-btn {
        padding: 10px 20px;
        font-size: 16px; }
        @media screen and (min-width: 768px) {
          .family-accout-page .account-intro-box .intro-top-block.block-5 .block-5-more-area .click-btn {
            padding: 10px 40px;
            font-size: 20px; } }
    .family-accout-page .account-intro-box .intro-top-block.block-5 .block-5-title {
      font-weight: bold;
      font-size: 18px;
      color: #e47200;
      line-height: 1.5em;
      margin: 12px 0 6px 0; }
    .family-accout-page .account-intro-box .intro-top-block.block-5 .block-5-desc {
      position: relative;
      padding-left: 22px; }
      .family-accout-page .account-intro-box .intro-top-block.block-5 .block-5-desc:before {
        content: '';
        display: block;
        position: absolute;
        top: 3px;
        left: 0;
        width: 13px;
        height: 19px;
        background: url("../img/act2020/vote_description_icon_2x.png") center no-repeat;
        background-size: 100%; }
    @media screen and (min-width: 992px) {
      .family-accout-page .account-intro-box .intro-top-block.block-5 .img-area {
        float: left;
        display: inline-block;
        vertical-align: middle;
        width: 50%; }
      .family-accout-page .account-intro-box .intro-top-block.block-5 .text-area {
        float: left;
        display: inline-block;
        width: 50%;
        padding-left: 34px;
        padding-top: 50px; } }

@media screen and (min-width: 768px) {
  .far-dialog .modal-dialog {
    margin: 90px auto;
    width: 600px; } }

@media screen and (min-width: 992px) {
  .far-dialog .modal-dialog {
    width: 800px; } }

.far-dialog .modal-content {
  border-radius: 20px;
  border: 3px dashed #FFCB64;
  background: #FFEA8E;
  -webkit-box-shadow: none;
  box-shadow: none; }

.far-dialog .modal-header {
  border: none;
  padding: 20px 15px 20px;
  position: relative; }
  @media screen and (min-width: 430px) {
    .far-dialog .modal-header {
      padding: 30px 15px; } }
  @media screen and (min-width: 768px) {
    .far-dialog .modal-header {
      padding: 20px 60px 20px; } }
  .far-dialog .modal-header .modal-title {
    font-size: 20px;
    color: #724E45;
    text-align: left;
    font-weight: bold; }
  .far-dialog .modal-header .modal-sub-title {
    font-size: 18px;
    font-weight: bold;
    color: #724e45;
    text-align: center; }
  .far-dialog .modal-header .close {
    font-size: 25px;
    color: #f57c64;
    opacity: 1;
    position: absolute;
    top: 20px;
    right: 20px; }

.far-dialog .modal-body {
  padding: 0 15px; }
  @media screen and (min-width: 768px) {
    .far-dialog .modal-body {
      padding: 0 60px 20px; } }
  .far-dialog .modal-body select {
    border: 1px solid #FFDC47;
    border-radius: 5px;
    webkit-box-shadow: none;
    box-shadow: none;
    height: 36px; }
  .far-dialog .modal-body input[type='text'], .far-dialog .modal-body input[type='number'], .far-dialog .modal-body input[type='date'] {
    border: 1px solid #FFDC47;
    border-radius: 5px;
    webkit-box-shadow: none;
    box-shadow: none;
    height: 36px; }
  .far-dialog .modal-body textarea {
    border: 1px solid #FFDC47;
    border-radius: 5px;
    webkit-box-shadow: none;
    box-shadow: none; }
  .far-dialog .modal-body .form-group {
    margin-bottom: 8px; }
    .far-dialog .modal-body .form-group label {
      color: #724E45; }
    .far-dialog .modal-body .form-group .sec-column {
      margin-top: 8px; }
      @media screen and (min-width: 992px) {
        .far-dialog .modal-body .form-group .sec-column {
          margin-top: 0px; } }
  .far-dialog .modal-body .record-intro-temp-area {
    display: table;
    width: 100%;
    color: #724E45;
    margin-bottom: 20px; }
    .far-dialog .modal-body .record-intro-temp-area.title {
      margin-bottom: 0px;
      border-bottom: 1px solid #E8E0D5; }
    .far-dialog .modal-body .record-intro-temp-area .income-btn {
      background: #76BDA4;
      color: #fff;
      border-radius: 5px;
      font-size: 14px;
      padding: 4px;
      display: inline-block;
      margin-right: 8px; }
    .far-dialog .modal-body .record-intro-temp-area .expenditure-btn {
      background: #FF8A73;
      color: #fff;
      border-radius: 5px;
      font-size: 14px;
      padding: 4px;
      display: inline-block;
      margin-right: 8px; }
    .far-dialog .modal-body .record-intro-temp-area .income-text {
      color: #55B492;
      font-weight: bold;
      font-size: 20px; }
      .far-dialog .modal-body .record-intro-temp-area .income-text.small {
        font-size: 16px; }
    .far-dialog .modal-body .record-intro-temp-area .expenditure-text {
      color: #DF615F;
      font-weight: bold;
      font-size: 20px; }
      .far-dialog .modal-body .record-intro-temp-area .expenditure-text.small {
        font-size: 16px; }
    .far-dialog .modal-body .record-intro-temp-area .list-row {
      display: table-row; }
      .far-dialog .modal-body .record-intro-temp-area .list-row .list-cell {
        padding: 10px 0px; }
      .far-dialog .modal-body .record-intro-temp-area .list-row .list-title {
        display: table-cell;
        padding: 15px 0px;
        vertical-align: top; }
        .far-dialog .modal-body .record-intro-temp-area .list-row .list-title p {
          margin: 0px;
          padding: 0px; }
      .far-dialog .modal-body .record-intro-temp-area .list-row .list-value {
        display: table-cell;
        width: 30px;
        text-align: right;
        vertical-align: top; }
        .far-dialog .modal-body .record-intro-temp-area .list-row .list-value.title {
          width: 80px;
          padding-top: 20px; }
      .far-dialog .modal-body .record-intro-temp-area .list-row + .list-row .list-cell {
        border-top: 1px solid #E8E0D5; }
    @media screen and (min-width: 768px) {
      .far-dialog .modal-body .record-intro-temp-area {
        dispaly: table; }
        .far-dialog .modal-body .record-intro-temp-area .list-row .list-value {
          width: 50px; }
          .far-dialog .modal-body .record-intro-temp-area .list-row .list-value.title {
            width: 80px; } }

.far-dialog.temp-intro .modal-content {
  border-radius: 20px;
  border: 3px dashed #FFCB64;
  background: #ffffff;
  -webkit-box-shadow: none;
  box-shadow: none; }

@media screen and (min-width: 768px) {
  .far-dialog.temp-intro .modal-header {
    padding: 20px 30px 20px; } }

@media screen and (min-width: 768px) {
  .far-dialog.temp-intro .modal-body {
    padding: 0px 30px 30px; } }

.far-dialog .modal-footer {
  border: none;
  padding: 10px 25px 35px;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .far-dialog .modal-footer {
      padding: 10px 70px 50px; } }
  .far-dialog .modal-footer .btn {
    width: 100%;
    font-size: 16px;
    color: #fff;
    border-radius: 18px;
    padding: 5px 10px; }
    .far-dialog .modal-footer .btn.btn {
      margin-top: 10px;
      margin-left: 0; }
    @media screen and (min-width: 480px) {
      .far-dialog .modal-footer .btn {
        width: 140px; }
        .far-dialog .modal-footer .btn.btn {
          margin-top: 0;
          margin-left: 5px; } }
    .far-dialog .modal-footer .btn.share {
      background-color: #5877b5; }
      .far-dialog .modal-footer .btn.share:hover {
        background-color: #3e5e9d; }
    .far-dialog .modal-footer .btn.record-delete {
      background-color: #948B82; }
      .far-dialog .modal-footer .btn.record-delete:hover {
        background-color: #8E8276; }
    .far-dialog .modal-footer .btn.finish {
      background-color: #F7830E; }
      .far-dialog .modal-footer .btn.finish:hover {
        background-color: #E97705; }

.vr-page .vr-intro-area {
  margin-bottom: 50px; }
  @media screen and (min-width: 768px) {
    .vr-page .vr-intro-area {
      text-align: center; } }

.vr-page .record-btn-area {
  text-align: center; }
  .vr-page .record-btn-area .click-btn {
    padding: 8px 0px 7px 45px;
    font-size: 17px;
    width: 195px;
    height: 50px;
    display: block;
    margin: 0 auto; }
    @media screen and (min-width: 500px) {
      .vr-page .record-btn-area .click-btn {
        display: inline-block; } }
    .vr-page .record-btn-area .click-btn span.btn-note {
      display: block;
      font-size: 14px;
      line-height: 1;
      margin-top: 4px; }
    .vr-page .record-btn-area .click-btn.vr {
      background-color: #3d8aea;
      box-shadow: 0 10px #2d78d4;
      background: #3d8aea url("../img/act2022/btn_icon_vr_2x.png") left 0 top 50% no-repeat;
      background-size: auto 50px;
      margin-bottom: 20px;
      line-height: 1; }
      .vr-page .record-btn-area .click-btn.vr:hover {
        box-shadow: 0 12px #2d78d4; }
      .vr-page .record-btn-area .click-btn.vr:active {
        box-shadow: 0 8px #2d78d4; }
    .vr-page .record-btn-area .click-btn.video {
      background-color: #F58009;
      box-shadow: 0 10px #E17100;
      background: #F58009 url("../img/act2022/btn_icon_video_2x.png") left 0 top 50% no-repeat;
      background-size: auto 50px;
      line-height: 1; }
      .vr-page .record-btn-area .click-btn.video:hover {
        box-shadow: 0 12px #E17100; }
      .vr-page .record-btn-area .click-btn.video:active {
        box-shadow: 0 8px #E17100; }
    .vr-page .record-btn-area .click-btn + .click-btn {
      margin-left: auto; }
      @media screen and (min-width: 500px) {
        .vr-page .record-btn-area .click-btn + .click-btn {
          margin-left: 30px; } }

.orange-ribbon-area.vr-type .orange-ribbon-text {
  margin-bottom: 45px; }
  @media screen and (min-width: 992px) {
    .orange-ribbon-area.vr-type .orange-ribbon-text {
      margin-bottom: 35px; } }
  @media screen and (min-width: 1200px) {
    .orange-ribbon-area.vr-type .orange-ribbon-text {
      margin-bottom: 55px; }
      .orange-ribbon-area.vr-type .orange-ribbon-text .text-box p {
        margin: 0 0 20px; } }

.modal-video .modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  max-width: 880px;
  width: 100%;
  padding: 0 15px;
  margin: 0; }

.modal-video .modal-header {
  padding: 20px 15px; }

.modal-video .modal-body {
  padding: 0 15px 15px 15px; }

.modal-video .modal-video-area {
  height: 0;
  position: relative;
  padding-bottom: 56.25%; }
  .modal-video .modal-video-area .play-video-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    width: 100%;
    height: 100%; }
  .modal-video .modal-video-area iframe {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%; }

/*# sourceMappingURL=maps/base.css.map */