@charset "UTF-8";
#page-container {
  overflow-x: hidden;
}

body {
  font-family: 微軟正黑體;
  width: 100%;
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}
body.index {
  background: url(../img/bg.png);
}
body.story {
  background: url(../img/story/inside_bg.png);
}
body.sport {
  background: url(../img/story/sports/sport_bg.png);
}
body.art {
  background: url(../img/story/art/art_bg01.png);
}
body.care {
  background: url(../img/story/care/care_bg01.png);
}
body.music {
  background: url(../img/story/music/music_bg01.png);
}
body.learn {
  background: url(../img/story/learning/learn_bg01.png);
}
body.integrated {
  background: url(../img/story/integrated/integrated_bg01.png);
}
body.dream {
  background: url(../img/story/dream/dream_bg01.png);
}
body.index-header-fix {
  padding-top: 120px;
}

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

.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 {
  display: inline-block;
  color: #fff !important;
  box-shadow: none !important;
  border: none;
  border-radius: 30px;
  overflow: hidden;
  font-size: 16px;
  padding: 0px 20px;
  line-height: 40px;
  position: relative;
}
.btn span {
  display: block;
  width: 100%;
  position: relative;
  z-index: 2;
}
.btn:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transition: 0.3s;
  position: absolute;
  top: 0;
  left: -100%;
}
.btn:hover:after {
  left: 0;
}
.btn.blue {
  background: #0082C0;
}
.btn.blue:after {
  background-color: #036fa2;
}
.btn.yellow {
  background: #ffbb54;
}
.btn.yellow:after {
  background-color: #f1a739;
}
.btn.pink {
  background: #F05775;
}
.btn.pink:after {
  background-color: #d83a5a;
}
.btn.gray {
  background: #828282;
}
.btn.gray:after {
  background: #6b6b6b;
}
.btn.green {
  background: #71ccb3;
}
.btn.green:after {
  background: #61b9a1;
}
.btn.line-green {
  background: #01bb01;
}
.btn.line-green:after {
  background: #01b301;
}
.btn.dark-orange {
  background: #ff862d;
}
.btn.dark-orange:after {
  background: #f98027;
}
.btn.donate span {
  display: inline-block;
  padding-left: 33px;
  position: relative;
}
.btn.donate span:before {
  content: "";
  display: block;
  width: 25px;
  height: 26px;
  background: url(../img/story/sports/donate_btn_icon_2x.png) no-repeat;
  background-size: 25px;
  position: absolute;
  top: 6px;
  left: 0;
}
@media screen and (min-width: 768px) {
  .btn.donate span:before {
    background: url(../img/story/sports/donate_btn_icon.png) no-repeat;
    background-size: 25px;
  }
}

[data-toggle=animation-appear] {
  visibility: hidden;
}

#tinymce [data-toggle=animation-appear] {
  visibility: visible;
}

#to-top {
  display: none;
  width: 48px;
  height: 48px;
  background: url(../img/common/top_btn_2x.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 1499;
}
@media screen and (min-width: 768px) {
  #to-top {
    right: 50px;
  }
}

input, select, button, li, a {
  outline: none !important;
}

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

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

.donate-thank-page .left-area .share-btn-area:after, .work-detail-box.integrated .box-body .media-list-area:after, .work-detail-box.music .box-body .media-list-area:after, .work-detail-box.sport .box-body .media-list-area:after, .work-detail-box.art .box-body .media-list-area:after, div.pc-header-nav.index .header-btn:after {
  content: "";
  display: block;
  clear: both;
}

.d-inline-block {
  display: inline-block;
}

/*
=================================================================
(#m02-1hds) HEADER
=================================================================
*/
.fixed-height {
  height: 54px;
}
@media screen and (min-width: 992px) {
  .fixed-height {
    height: 89px;
  }
}

header {
  position: relative;
  z-index: 5;
  border-bottom: 6px solid #FF9B37;
}
header.index {
  border-bottom: none;
}
header div.mb-title {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  padding: 0px 0px;
  background-color: #fff;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  transition: 0.5s;
}
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: 10px;
  margin-left: 5px;
  margin-bottom: 2px;
}
header div.mb-title .mb-logo-area img {
  height: 32px;
}
header div.mb-title .mb-marquee-area {
  float: left;
  width: calc(100% - 150px);
  font-size: 17px;
  padding: 17px 0 8px 10px;
}
header div.mb-title .mb-marquee-area .num {
  display: inline-block;
  color: #F67965;
  font-family: Arial;
  padding: 0 5px;
  font-size: 18px;
}
header div.mb-title .button-area {
  float: right;
  margin-top: 2px;
}
header div.mb-title div.xs-menu {
  width: 50px;
  height: 50px;
  padding-top: 15px;
  text-align: center;
  cursor: pointer;
}
header div.mb-title div.xs-menu .icon-wrapper {
  margin: 0px auto 5px;
  width: 30px;
  height: 30px;
  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: 4px;
  width: 100%;
  background: #000;
  border-radius: 30px;
  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: 10px;
}
header div.mb-title div.xs-menu .icon-wrapper span:nth-child(4) {
  top: 20px;
}
header div.mb-title div.xs-menu.active span:nth-child(1) {
  top: 10px;
  opacity: 0;
}
header div.mb-title div.xs-menu.active span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
header div.mb-title div.xs-menu.active span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
header div.mb-title div.xs-menu.active span:nth-child(4) {
  top: 10px;
  opacity: 0;
}
header div.mb-title .mb-donate-area {
  float: right;
  margin-top: 4px;
}
header div.mb-title .mb-donate-area .mb-donate-btn {
  display: block;
  width: 50px;
  height: 50px;
  font-size: 0;
  padding: 0px;
  background: url(../img/header/header_donate_2x.png) center center no-repeat;
  background-size: 32px;
}
header div.is-sticky div.xs-title {
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
}

div.pc-header-area {
  position: relative;
}
div.pc-header-area.sticky {
  background-color: #fff;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  animation: slidedown 0.5s;
}
div.pc-header-area.sticky:before {
  display: none;
}
div.pc-header-area.sticky.page {
  animation: none;
}

@keyframes slidedown {
  0% {
    top: -50%;
  }
  100% {
    top: 0;
  }
}
div.pc-header-nav {
  position: relative;
  padding: 6px 0;
  display: flex;
  gap: 100px;
  justify-content: space-between;
  align-items: center;
}
div.pc-header-nav .logo-area {
  display: block;
}
div.pc-header-nav .logo-area img {
  height: 40px;
}
div.pc-header-nav .header-nav {
  list-style: none;
  padding: 0;
  margin: 0px;
  position: relative;
  display: flex;
  gap: 15px;
}
@media screen and (min-width: 1200px) {
  div.pc-header-nav .header-nav {
    gap: 30px;
  }
}
div.pc-header-nav .header-nav > li {
  display: inline-block;
  position: relative;
}
div.pc-header-nav .header-nav > li > a {
  display: inline-block;
  font-size: 16px;
  text-decoration: none;
  position: relative;
  padding: 50px 18px 0 18px;
}
@media screen and (min-width: 1200px) {
  div.pc-header-nav .header-nav > li > a {
    font-size: 17px;
    padding: 50px 18px 0 18px;
  }
}
div.pc-header-nav .header-nav > li > a:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 63px;
  height: 54px;
  background: url(../img/header/icon_donate_steady.png);
  background-size: 63px;
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -32px;
}
div.pc-header-nav .header-nav > li.news > a:before {
  background: url(../img/header/animate/news.png) 0px 0px no-repeat;
  background-size: 378px;
}
div.pc-header-nav .header-nav > li.news > a:hover:before {
  animation: mnewshover 3s steps(6) infinite;
}
div.pc-header-nav .header-nav > li.story > a:before {
  background: url(../img/header/animate/story.png) 0px 0px no-repeat;
  background-size: 252px;
}
div.pc-header-nav .header-nav > li.story > a:hover:before {
  animation: mstoryhover 2s steps(4) infinite;
}
div.pc-header-nav .header-nav > li.story:after {
  content: "";
  display: block;
  width: 100%;
  height: 20px;
  background-color: rgba(255, 255, 255, 0);
  position: absolute;
  bottom: -20px;
  left: 0;
}
div.pc-header-nav .header-nav > li.story:hover > ul {
  display: block;
}
div.pc-header-nav .header-nav > li.plan > a:before {
  background: url(../img/header/animate/plan.png) 0px 0px no-repeat;
  background-size: 252px;
}
div.pc-header-nav .header-nav > li.plan > a:hover:before {
  animation: mplanhover 2s steps(4) infinite;
}
div.pc-header-nav .header-nav > li.partner > a:before {
  background: url(../img/header/animate/partner.png) 0px 0px no-repeat;
  background-size: 252px;
}
div.pc-header-nav .header-nav > li.partner > a:hover:before {
  animation: mpartnerhover 2s steps(4) infinite;
}
div.pc-header-nav .header-nav > li.donate > a:before {
  background: url(../img/header/animate/donate.png) 0px 0px no-repeat;
  background-size: 315px;
}
div.pc-header-nav .header-nav > li.donate > a:hover:before {
  animation: mdonatehover 2.5s steps(5) infinite;
}
div.pc-header-nav .header-nav > li.dream > a:before {
  background: url(../img/header/animate/dream.png) 0px 0px no-repeat;
  background-size: 315px;
}
div.pc-header-nav .header-nav > li.dream > a:hover:before {
  animation: mdreamhover 2.5s steps(5) infinite;
}
div.pc-header-nav .header-nav > li ul.header-sub-nav {
  display: none;
  background-color: #fffbf0;
  padding: 10px 0 10px;
  margin: 0;
  list-style: none;
  width: 170px;
  position: absolute;
  top: calc(100% + 10px);
  left: -32px;
}
div.pc-header-nav .header-nav > li ul.header-sub-nav li a {
  display: block;
  padding: 10px 5px;
  font-size: 18px;
  color: #363636;
  text-align: center;
}
div.pc-header-nav .header-nav > li ul.header-sub-nav li a:hover {
  color: #f49505;
}
div.pc-header-nav .header-btn {
  display: none;
}
div.pc-header-nav .header-btn li a {
  display: block;
  text-decoration: none;
}
div.pc-header-nav .header-btn li a:before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
div.pc-header-nav .header-btn li a span {
  display: none;
  vertical-align: middle;
}
div.pc-header-nav .header-board {
  width: 223px;
  height: 103px;
  padding: 15px 20px 20px;
  text-align: center;
  line-height: 2;
  color: #fff;
  background: url(../img/header/blackboard.png) no-repeat;
  position: absolute;
  top: 0;
  right: 40px;
}
@media screen and (min-width: 1200px) {
  div.pc-header-nav .header-board {
    right: 65px;
  }
}
div.pc-header-nav .header-board .number-area {
  vertical-align: middle;
  padding: 0 3px;
}
div.pc-header-nav.index {
  padding: 16px 0 20px 0;
  margin-top: 0;
  display: flex;
  gap: 100px;
  justify-content: center;
  align-items: center;
}
div.pc-header-nav.index .logo-area {
  display: none;
}
div.pc-header-nav.index .header-nav {
  display: flex;
}
div.pc-header-nav.index .header-nav.line-event {
  display: flex;
  gap: 60px;
}
div.pc-header-nav.index .header-nav.line-event > li > a {
  white-space: nowrap;
  font-size: 18px;
}
@media screen and (min-width: 1200px) {
  div.pc-header-nav.index .header-nav.line-event > li {
    gap: 60px;
  }
  div.pc-header-nav.index .header-nav.line-event > li > a {
    font-size: 19px;
  }
}
div.pc-header-nav.index .header-nav > li {
  width: 15.5%;
}
div.pc-header-nav.index .header-nav > li > a {
  width: 100%;
  padding: 75px 0 0;
  font-size: 19px;
  text-align: center;
}
div.pc-header-nav.index .header-nav > li > a:before {
  content: "";
  display: block;
  width: 88px;
  height: 77px;
  background: url(../img/header/icon_news.png);
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -44px;
}
div.pc-header-nav.index .header-nav > li.news > a:before {
  background: url(../img/header/animate/news.png) 0px 0px no-repeat;
  background-size: 528px;
}
div.pc-header-nav.index .header-nav > li.news > a:hover:before {
  animation: newshover 3s steps(6) infinite;
}
div.pc-header-nav.index .header-nav > li.story > a:before {
  background: url(../img/header/animate/story.png) 0px 0px no-repeat;
  background-size: 352px;
}
div.pc-header-nav.index .header-nav > li.story > a:hover:before {
  animation: storyhover 2s steps(4) infinite;
}
div.pc-header-nav.index .header-nav > li.story:hover > ul {
  display: none;
}
div.pc-header-nav.index .header-nav > li.plan > a:before {
  background: url(../img/header/animate/plan.png) 0px 0px no-repeat;
  background-size: 352px;
}
div.pc-header-nav.index .header-nav > li.plan > a:hover:before {
  animation: planhover 2s steps(4) infinite;
}
div.pc-header-nav.index .header-nav > li.partner > a:before {
  background: url(../img/header/animate/partner.png) 0px 0px no-repeat;
  background-size: 352px;
}
div.pc-header-nav.index .header-nav > li.partner > a:hover:before {
  animation: partnerhover 2s steps(4) infinite;
}
div.pc-header-nav.index .header-nav > li.donate > a:before {
  background: url(../img/header/animate/donate.png) 0px 0px no-repeat;
  background-size: 440px;
}
div.pc-header-nav.index .header-nav > li.donate > a:hover:before {
  animation: donatehover 2.5s steps(5) infinite;
}
div.pc-header-nav.index .header-nav > li.dream > a {
  margin-right: 0;
}
div.pc-header-nav.index .header-nav > li.dream > a:before {
  background: url(../img/header/animate/dream.png) 0px 0px no-repeat;
  background-size: 440px;
  margin-left: -50px;
}
div.pc-header-nav.index .header-nav > li.dream > a:hover:before {
  animation: dreamhover 2.5s steps(5) infinite;
}
div.pc-header-nav.index .header-btn {
  margin-bottom: 0;
  list-style: none;
  padding: 0;
  position: relative;
  display: flex;
  gap: 15px;
}
div.pc-header-nav.index .header-btn li {
  display: block;
}
div.pc-header-nav.index .header-btn li.home {
  display: none;
}
div.pc-header-nav.index .header-btn li a:before {
  width: 36px;
  height: 36px;
  vertical-align: middle;
}
div.pc-header-nav.index .header-btn li a span {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
}
div.pc-header-nav.index .header-btn li.facebook a:before {
  background: url(../img/header/icon_fb@2x.png) no-repeat;
  background-size: 36px;
}
div.pc-header-nav.index .header-btn li.line a:before {
  background: url(../img/header/icon_line@2x.png) no-repeat;
  background-size: 36px;
}
div.pc-header-nav.index .header-btn li.instagram a:before {
  background: url(../img/header/icon_ig@2x.png) no-repeat;
  background-size: 36px;
}
div.pc-header-nav.index .header-btn li.faq a:before {
  background: url(../img/header/icon_faq.png) #5dc1cc no-repeat;
  background-size: 36px;
}
div.pc-header-nav.index .header-board {
  display: none;
}

@keyframes newshover {
  100% {
    background-position: -528px;
  }
}
@keyframes storyhover {
  100% {
    background-position: -352px;
  }
}
@keyframes planhover {
  100% {
    background-position: -352px;
  }
}
@keyframes partnerhover {
  100% {
    background-position: -352px;
  }
}
@keyframes donatehover {
  100% {
    background-position: -440px;
  }
}
@keyframes dreamhover {
  100% {
    background-position: -440px;
  }
}
@keyframes mnewshover {
  100% {
    background-position: -378px;
  }
}
@keyframes mstoryhover {
  100% {
    background-position: -252px;
  }
}
@keyframes mplanhover {
  100% {
    background-position: -252px;
  }
}
@keyframes mpartnerhover {
  100% {
    background-position: -252px;
  }
}
@keyframes mdonatehover {
  100% {
    background-position: -315px;
  }
}
@keyframes mdreamhover {
  100% {
    background-position: -314px;
  }
}
.number-area {
  display: inline-block;
  vertical-align: bottom;
  font-size: 0;
  letter-spacing: 1px;
}

.number {
  display: inline-block;
  font-size: 0;
  height: 24px;
}
.number.number_0, .number.number_5, .number.number_6 {
  width: 12px;
}
.number.number_1 {
  width: 6px;
}
.number.number_2 {
  width: 15px;
}
.number.number_3, .number.number_7, .number.number_8 {
  width: 13px;
}
.number.number_4 {
  width: 14px;
}
.number.number_9 {
  width: 11px;
}
.number.b.number_0 {
  background: url(../img/index/number/b_0.png);
}
.number.b.number_1 {
  background: url(../img/index/number/b_1.png);
}
.number.b.number_2 {
  background: url(../img/index/number/b_2.png);
}
.number.b.number_3 {
  background: url(../img/index/number/b_3.png);
}
.number.b.number_4 {
  background: url(../img/index/number/b_4.png);
}
.number.b.number_5 {
  background: url(../img/index/number/b_5.png);
}
.number.b.number_6 {
  background: url(../img/index/number/b_6.png);
}
.number.b.number_7 {
  background: url(../img/index/number/b_7.png);
}
.number.b.number_8 {
  background: url(../img/index/number/b_8.png);
}
.number.b.number_9 {
  background: url(../img/index/number/b_9.png);
}
.number.b.point {
  width: 7px;
  background: url(../img/index/number/b_point.png);
}
.number.g.number_0 {
  background: url(../img/index/number/g_0.png);
}
.number.g.number_1 {
  background: url(../img/index/number/g_1.png);
}
.number.g.number_2 {
  background: url(../img/index/number/g_2.png);
}
.number.g.number_3 {
  background: url(../img/index/number/g_3.png);
}
.number.g.number_4 {
  background: url(../img/index/number/g_4.png);
}
.number.g.number_5 {
  background: url(../img/index/number/g_5.png);
}
.number.g.number_6 {
  background: url(../img/index/number/g_6.png);
}
.number.g.number_7 {
  background: url(../img/index/number/g_7.png);
}
.number.g.number_8 {
  background: url(../img/index/number/g_8.png);
}
.number.g.number_9 {
  background: url(../img/index/number/g_9.png);
}
.number.g.point {
  width: 7px;
  background: url(../img/index/number/g_point.png);
}
.number.r.number_0 {
  background: url(../img/index/number/r_0.png);
}
.number.r.number_1 {
  background: url(../img/index/number/r_1.png);
}
.number.r.number_2 {
  background: url(../img/index/number/r_2.png);
}
.number.r.number_3 {
  background: url(../img/index/number/r_3.png);
}
.number.r.number_4 {
  background: url(../img/index/number/r_4.png);
}
.number.r.number_5 {
  background: url(../img/index/number/r_5.png);
}
.number.r.number_6 {
  background: url(../img/index/number/r_6.png);
}
.number.r.number_7 {
  background: url(../img/index/number/r_7.png);
}
.number.r.number_8 {
  background: url(../img/index/number/r_8.png);
}
.number.r.number_9 {
  background: url(../img/index/number/r_9.png);
}
.number.r.point {
  width: 7px;
  background: url(../img/index/number/r_point.png);
}
.number.y.number_0 {
  background: url(../img/index/number/y_0.png);
}
.number.y.number_1 {
  background: url(../img/index/number/y_1.png);
}
.number.y.number_2 {
  background: url(../img/index/number/y_2.png);
}
.number.y.number_3 {
  background: url(../img/index/number/y_3.png);
}
.number.y.number_4 {
  background: url(../img/index/number/y_4.png);
}
.number.y.number_5 {
  background: url(../img/index/number/y_5.png);
}
.number.y.number_6 {
  background: url(../img/index/number/y_6.png);
}
.number.y.number_7 {
  background: url(../img/index/number/y_7.png);
}
.number.y.number_8 {
  background: url(../img/index/number/y_8.png);
}
.number.y.number_9 {
  background: url(../img/index/number/y_9.png);
}
.number.y.point {
  width: 7px;
  background: url(../img/index/number/y_point.png);
}

.marquee {
  width: 100%;
  height: 20px;
  overflow: hidden;
}
.marquee .marquee-item {
  height: 20px;
}
.marquee#marquee-head {
  height: auto;
}
.marquee#marquee-head .marquee-item {
  height: auto;
}

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

div#mb-sidebar {
  display: none;
  position: fixed;
  width: 100%;
  top: -100%;
  z-index: 5;
}
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: 54px;
  -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 {
  position: relative;
}
div.main-area.index {
  padding-top: 20px;
}
@media screen and (min-width: 992px) {
  div.main-area.index {
    padding-top: 0px;
  }
}

/* Chrome, Safari, Opera */
@-webkit-keyframes hiddensidebar {
  0% {
    top: 70px;
  }
  100% {
    top: -100%;
  }
}
/* Standard syntax */
@keyframes hiddensidebar {
  0% {
    top: 70px;
  }
  100% {
    top: -100%;
  }
}
/* Chrome, Safari, Opera */
@-webkit-keyframes showsidebar {
  0% {
    top: -100%;
  }
  100% {
    top: 70px;
  }
}
/* Standard syntax */
@keyframes showsidebar {
  0% {
    top: -100%;
  }
  100% {
    top: 70px;
  }
}
div.slimScrollDiv {
  min-height: calc(100vh + 200px);
}

div#sidebar-scroll {
  min-height: calc(100vh + 200px);
}

div.sidebar-content {
  padding-top: 30px;
  padding-bottom: 70px;
  min-height: calc(100vh + 200px);
  background: url(../img/inside_bg.png);
}

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

.title-btn-area {
  padding: 30px 0px 0;
  text-align: center;
}
.title-btn-area .title-btn {
  display: inline-block;
  padding: 0 10px;
  text-align: center;
}
.title-btn-area .title-btn a {
  display: inline-block;
  font-size: 17px;
  padding: 10px 5px 0px;
  position: relative;
}
@media screen and (min-width: 480px) {
  .title-btn-area .title-btn a {
    padding: 11px 10px 11px 49px;
  }
}
.title-btn-area .title-btn a:before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
@media screen and (min-width: 480px) {
  .title-btn-area .title-btn a:before {
    position: absolute;
    top: 5px;
    left: 0px;
  }
}
.title-btn-area .title-btn a > span {
  display: none;
}
@media screen and (min-width: 480px) {
  .title-btn-area .title-btn a > span {
    display: inline-block;
  }
}
.title-btn-area .title-btn.facebook a:before {
  background: url(../img/header/icon_share_sidebar_xs.png) no-repeat center bottom 0 #1877f2;
  background-size: 36px;
}
.title-btn-area .title-btn.faq a:before {
  background: url(../img/header/icon_qa_xs.png) no-repeat center #ffba54;
  background-size: 36px;
}
.title-btn-area .title-btn.home a:before {
  background: url(../img/header/icon_home_xs.png) no-repeat center #5dc1cc;
  background-size: 36px;
}

.footer-btn {
  position: relative;
  display: flex;
  margin-top: 30px;
  gap: 15px;
  list-style: none;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.footer-btn li a {
  display: block;
  text-decoration: none;
}
.footer-btn li a:before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.footer-btn li a span {
  display: none;
  vertical-align: middle;
}
.footer-btn li.facebook a:before {
  background: url(../img/header/icon_fb@2x.png) no-repeat;
  background-size: 36px;
}
.footer-btn li.line a:before {
  background: url(../img/header/icon_line@2x.png) no-repeat;
  background-size: 36px;
}
.footer-btn li.instagram a:before {
  background: url(../img/header/icon_ig@2x.png) no-repeat;
  background-size: 36px;
}

.sidebar-nav {
  list-style: none;
  margin: 0px 0 0;
  padding: 0px 0 0;
}
.sidebar-nav li > a {
  display: block;
  text-decoration: none;
  padding: 20px 10px;
  font-size: 20px;
  text-align: center;
}
.sidebar-nav li > a span {
  display: inline-block;
  padding: 0px 10px 0px 10px;
  position: relative;
}
.sidebar-nav li > a span:before {
  content: "";
  display: block;
  width: 88px;
  height: auto;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0px;
}
.sidebar-nav li > a span:after {
  content: "";
  display: none;
  width: 100%;
  height: 5px;
  position: absolute;
  bottom: -10px;
  left: 0px;
}
.sidebar-nav li:hover > a span:after, .sidebar-nav li.active > a span:after {
  display: block;
}
.sidebar-nav li:nth-child(1) a span:after {
  background-color: #AFDDE5;
}
.sidebar-nav li:nth-child(2) a span:after {
  background-color: #F8E195;
}
.sidebar-nav li:nth-child(3) a span:after {
  background-color: #B3DC89;
}
.sidebar-nav li:nth-child(4) a span:after {
  background-color: #F7C2BA;
}
.sidebar-nav li:nth-child(5) a span:after {
  background-color: #F7C19C;
}
.sidebar-nav li:nth-child(6) a span:before {
  background: url(../img/header/icon_integrated.png) no-repeat;
  background-size: 100%;
}
.sidebar-nav li:nth-child(6) a span:after {
  background-color: #8ddcd2;
}
.sidebar-nav li.story > a span i {
  font-size: 16px;
  color: #ffba54;
  transform: rotate(0deg);
  transition: 0.5s;
  position: absolute;
  top: 10px;
  right: -35px;
}
.sidebar-nav li.story > a.open span i {
  transform: rotate(90deg);
}
.sidebar-nav li ul.sidebar-sub-nav {
  display: none;
  padding: 15px 0;
  margin: 0;
  list-style: none;
  background-color: #ffe6b3;
}
.sidebar-nav li ul.sidebar-sub-nav li a {
  padding: 15px 10px;
  font-size: 16px;
}

.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%;
  padding-top: 280px;
  overflow: hidden;
}
footer .footer-content {
  background: #A9E0C9;
  position: relative;
}
footer .footer-content:before {
  content: "";
  display: block;
  width: 1621px;
  height: 238px;
  background: url(../img/footer/footer_pic_bg.png) no-repeat;
  position: absolute;
  top: -238px;
  left: -250px;
}
@media screen and (min-width: 992px) {
  footer .footer-content:before {
    left: 50%;
    margin-left: -710px;
  }
}
@media screen and (min-width: 1200px) {
  footer .footer-content:before {
    margin-left: -810.5px;
  }
}
footer .footer-content:after {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  background: url(../img/footer/footer_line.png) repeat-x;
  position: absolute;
  top: -5px;
  left: 0;
}
footer .footer-info {
  position: relative;
  padding: 33px 0 20px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 8px 15px;
}
@media screen and (min-width: 768px) {
  footer .footer-info {
    padding: 60px 0 15px;
  }
}
@media screen and (min-width: 992px) {
  footer .footer-info {
    flex-direction: row;
  }
}
footer .footer-info .footer-girls {
  display: none;
  width: 157px;
  height: 124px;
  background: url(../img/footer/footer_pic01.png) no-repeat;
  background-size: 157px;
  position: absolute;
  top: -89px;
  left: -115px;
  z-index: 2;
}
@media screen and (min-width: 992px) {
  footer .footer-info .footer-girls {
    display: block;
  }
}
footer .footer-info .footer-boys {
  display: none;
  width: 235px;
  height: 157px;
  background: url(../img/footer/footer_pic02.png) no-repeat;
  background-size: 235px;
  position: absolute;
  top: -136px;
  left: 50%;
  margin-left: -52px;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  footer .footer-info .footer-boys {
    display: block;
  }
}
@media screen and (min-width: 1200px) {
  footer .footer-info .footer-boys {
    margin-left: -152px;
  }
}
footer .footer-info .footer-papers {
  width: 85px;
  height: 141px;
  background: url(../img/footer/footer_pic03.png) no-repeat;
  background-size: 85px;
  position: absolute;
  top: -88px;
  right: 55px;
  z-index: 2;
}
footer .footer-info .footer-logo {
  display: inline-block;
  margin-bottom: 10px;
}
@media screen and (min-width: 992px) {
  footer .footer-info .footer-logo {
    margin-bottom: 0;
  }
}
footer .footer-info .footer-box {
  display: flex;
  flex-direction: column;
  gap: 2px 15px;
}
footer .footer-info .footer-box .info-area {
  display: flex;
  flex-direction: column;
  gap: 2px 15px;
}
@media screen and (min-width: 768px) {
  footer .footer-info .footer-box .info-area {
    flex-direction: row;
  }
}
footer .footer-info .footer-acart {
  font-size: 14px;
  color: #000;
  display: flex;
  flex-direction: column;
  gap: 2px 15px;
}
@media screen and (min-width: 992px) {
  footer .footer-info .footer-acart {
    margin-left: auto;
    text-align: right;
  }
}
footer .footer-info .footer-acart .info-area {
  display: flex;
  flex-direction: column;
  gap: 2px 15px;
}
@media screen and (min-width: 360px) {
  footer .footer-info .footer-acart .info-area {
    flex-direction: row;
  }
}
footer .footer-info .footer-acart .footer-btn {
  position: relative;
  display: flex;
  justify-content: flex-start;
  gap: 15px;
  list-style: none;
  padding: 0;
}
footer .footer-info .footer-acart .footer-btn li a {
  display: block;
  text-decoration: none;
}
footer .footer-info .footer-acart .footer-btn li a:before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
footer .footer-info .footer-acart .footer-btn li a span {
  display: none;
  vertical-align: middle;
}
footer .footer-info .footer-acart .footer-btn li.facebook a:before {
  background: url(../img/header/icon_fb@2x.png) no-repeat;
  background-size: 36px;
}
footer .footer-info .footer-acart .footer-btn li.line a:before {
  background: url(../img/header/icon_line@2x.png) no-repeat;
  background-size: 36px;
}
footer .footer-info .footer-acart .footer-btn li.instagram a:before {
  background: url(../img/header/icon_ig@2x.png) no-repeat;
  background-size: 36px;
}
footer.sport .footer-content:before {
  background: url(../img/footer/footer_sport_bg.png) no-repeat;
}
footer.art .footer-content:before {
  background: url(../img/footer/footer_art_bg.png) no-repeat;
}
footer.care .footer-content:before, footer.story .footer-content:before {
  background: url(../img/footer/footer_care_bg.png) no-repeat;
}
footer.music .footer-content:before {
  background: url(../img/footer/footer_music_bg.png) no-repeat;
}
footer.learn .footer-content:before {
  background: url(../img/footer/footer_learn_bg.png) no-repeat;
}
footer.integrated .footer-content:before {
  background: url(../img/footer/footer_integrated_bg.png) no-repeat;
}
footer.dream .footer-content:before {
  background: url(../img/footer/footer_dream_bg.png) no-repeat;
}

/*
=================================================================
(#m03mcs) MAIN CONTENT
=================================================================
*/
/*
* @Author: ansen
* @Date:   2017-10-05 16:22:32
* @Last Modified by:   ansen
* @Last Modified time: 2018-08-14 11:46:56
*/
.index-banner-area {
  width: 100%;
  padding-top: 54px;
  background: #6FBBAF;
}
@media screen and (min-width: 992px) {
  .index-banner-area {
    padding-top: 0;
  }
}
.index-banner-area > div {
  width: 100%;
  height: 103vw;
  max-width: 1920px;
  margin: auto;
}
@media screen and (min-width: 600px) {
  .index-banner-area > div {
    height: 42vw;
  }
}
@media screen and (min-width: 1170px) {
  .index-banner-area > div {
    height: 490px;
  }
}
.index-banner-area img {
  max-width: 100%;
}

.index-top-area {
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
}
.index-top-area .index-marquee-area {
  padding: 7px 15px 10px 30px;
  margin-left: -5px;
  margin-right: -15px;
  position: relative;
}
@media screen and (min-width: 992px) {
  .index-top-area .index-marquee-area {
    float: left;
    width: 570px;
    padding: 10px 20px 10px 30px;
    margin-left: 0px;
    margin-right: 0px;
  }
}
@media screen and (min-width: 1200px) {
  .index-top-area .index-marquee-area {
    width: 760px;
  }
}
.index-top-area .index-marquee-area:before {
  content: "";
  display: block;
  width: 25px;
  height: 18px;
  background: url(../img/index/speaker.png) no-repeat;
  position: absolute;
  top: 12px;
  left: 0;
}
.index-top-area .index-marquee-area .marquee-area {
  display: inline-block;
  width: 100%;
  height: 21px;
  padding-left: 5px;
  overflow: hidden;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
@media screen and (min-width: 992px) {
  .index-top-area .index-marquee-area .marquee-area {
    top: -5px;
  }
}
.index-top-area .index-marquee-area .marquee-area ul, .index-top-area .index-marquee-area .marquee-area ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.index-top-area .index-marquee-area .marquee-area ul {
  position: absolute;
  width: 100%;
}
.index-top-area .index-marquee-area .marquee-area a {
  display: block;
}
.index-top-area .index-account-area {
  display: none;
  float: right;
  padding: 10px 20px;
}
@media screen and (min-width: 992px) {
  .index-top-area .index-account-area {
    display: block;
  }
}

.index-sky-area {
  display: block;
  width: 100%;
  height: 153px;
  position: relative;
  overflow: hidden;
  z-index: -1;
}
.index-sky-area:before {
  content: "";
  display: block;
  width: 185px;
  height: 153px;
  background: url(../img/index/sun.png) no-repeat;
  position: absolute;
  top: 10px;
  right: 50%;
  margin-right: -92px;
}
@media screen and (min-width: 992px) {
  .index-sky-area:before {
    top: 40px;
    right: 50%;
    margin-right: -860px;
  }
}
@media screen and (min-width: 768px) {
  .index-sky-area {
    display: none;
  }
}
@media screen and (min-width: 992px) {
  .index-sky-area {
    display: block;
    height: 318px;
    margin-bottom: -318px;
    background: url(../img/index/menu_bg.jpg) center 0 no-repeat;
    background-size: 3000px;
    top: -144px;
  }
}

.index-intro-area {
  padding-bottom: 210px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 640px) {
  .index-intro-area {
    padding-bottom: 50px;
  }
}
@media screen and (min-width: 768px) {
  .index-intro-area {
    padding-top: 176px;
    background: url(../img/index/grass.png) center 160px no-repeat;
    background-size: 3000px;
  }
}
.index-intro-area:before {
  content: "";
  display: none;
  width: 1732px;
  height: 488px;
  background: url(../img/index/playground.png);
  background-size: 1732px;
  position: absolute;
  top: 173px;
  left: 50%;
  margin-left: -841px;
}
@media screen and (min-width: 768px) {
  .index-intro-area:before {
    display: block;
  }
}
.index-intro-area:after {
  content: "";
  display: none;
  width: 3000px;
  height: 166px;
  background: url(../img/index/school_door.png);
  background-size: 3000px;
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -1500px;
}
@media screen and (min-width: 768px) {
  .index-intro-area:after {
    display: block;
  }
}
.index-intro-area .kid-flower {
  width: 208px;
  height: 188px;
  background: url(../img/index/kid_01.png) no-repeat;
  background-size: 208px;
  position: absolute;
  bottom: 0px;
  right: 50%;
  margin-right: -855px;
}
.index-intro-area .kid-book {
  width: 90px;
  height: 114px;
  background: url(../img/index/kid_02.png) no-repeat;
  background-size: 90px;
  position: absolute;
  bottom: 0px;
  right: 30px;
}
@media screen and (min-width: 640px) {
  .index-intro-area .kid-book {
    right: 0;
  }
}
@media screen and (min-width: 768px) {
  .index-intro-area .kid-book {
    width: 116px;
    height: 148px;
    background-size: 116px;
    top: 193px;
    bottom: auto;
    right: 50%;
    margin-right: -410px;
  }
}
@media screen and (min-width: 1200px) {
  .index-intro-area .kid-book {
    margin-right: -550px;
  }
}
.index-intro-area .kid-guitar {
  display: none;
  width: 137px;
  height: 195px;
  background: url(../img/index/kid_03.png) no-repeat;
  background-size: 137px;
  position: absolute;
  top: 193px;
  left: 50%;
  margin-left: -467px;
}
@media screen and (min-width: 992px) {
  .index-intro-area .kid-guitar {
    display: block;
  }
}
.index-intro-area .kid-sing {
  width: 155px;
  height: 172px;
  background: url(../img/index/kid_04.png) no-repeat;
  background-size: 155px;
  position: absolute;
  bottom: 0px;
  left: 20px;
}
@media screen and (min-width: 640px) {
  .index-intro-area .kid-sing {
    left: 0px;
  }
}
@media screen and (min-width: 768px) {
  .index-intro-area .kid-sing {
    width: 212px;
    height: 236px;
    background-size: 212px;
  }
}
@media screen and (min-width: 992px) {
  .index-intro-area .kid-sing {
    left: 50%;
    margin-left: -500px;
  }
}
@media screen and (min-width: 1200px) {
  .index-intro-area .kid-sing {
    margin-left: -715px;
  }
}
.index-intro-area .kid-run {
  display: none;
  width: 181px;
  height: 235px;
  background: url(../img/index/kid_05.png) no-repeat;
  background-size: 181px;
  position: absolute;
  bottom: 145px;
  right: 50%;
  margin-right: -500px;
}
@media screen and (min-width: 992px) {
  .index-intro-area .kid-run {
    display: block;
  }
}
.index-intro-area .index-intro-title {
  margin-top: 0px;
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  .index-intro-area .index-intro-title {
    margin-top: 50px;
  }
}
.index-intro-area .index-intro-content {
  font-size: 18px;
  line-height: 1.6;
  position: relative;
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .index-intro-area .index-intro-content.slogan {
    color: #fff;
    margin-top: 46px;
  }
}
.index-intro-area .index-intro-content.slogan span {
  display: block;
  font-size: 24px;
}
.index-intro-area .index-intro-btn {
  padding-top: 20px;
  position: relative;
}
.index-intro-area .index-intro-btn .btn {
  width: 140px;
}

.index-classroom-area {
  padding-top: 50px;
  padding-bottom: 50px;
  overflow: hidden;
}
.index-classroom-area .index-classroom-box {
  border: 1px solid #cbe3da;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 1px 1px 5px #c5efde;
  padding: 110px 20px 120px;
  position: relative;
  visibility: hidden;
}
@media screen and (min-width: 480px) {
  .index-classroom-area .index-classroom-box {
    padding: 110px 20px 50px;
  }
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box {
    padding: 110px 25px 50px;
  }
}
@media screen and (min-width: 768px) {
  .index-classroom-area .index-classroom-box {
    padding: 110px 50px 50px;
  }
}
@media screen and (min-width: 992px) {
  .index-classroom-area .index-classroom-box {
    padding: 100px 50px 50px;
  }
}
.index-classroom-area .index-classroom-box .classroom-photo-area {
  display: none;
  width: 178px;
  height: 178px;
  border-radius: 50%;
  border: 1px solid #b5b5b5;
  overflow: hidden;
  position: absolute;
  top: 35px;
  z-index: 2;
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box .classroom-photo-area {
    display: block;
  }
}
@media screen and (min-width: 992px) {
  .index-classroom-area .index-classroom-box .classroom-photo-area {
    top: -52px;
  }
}
.index-classroom-area .index-classroom-box .classroom-photo-area img {
  width: 100%;
}
.index-classroom-area .index-classroom-box .classroom-board-area {
  width: 227px;
  height: 106px;
  color: #fff;
  padding: 55px 10px 20px;
  font-size: 22px;
  text-align: center;
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 480px) {
  .index-classroom-area .index-classroom-box .classroom-board-area {
    transform: translateX(0%);
  }
}
.index-classroom-area .index-classroom-box .index-classroom-content {
  font-size: 17px;
  line-height: 1.75;
  text-align: justify;
  margin-bottom: 25px;
}
@media screen and (min-width: 768px) {
  .index-classroom-area .index-classroom-box .index-classroom-content {
    min-height: 140px;
  }
}
@media screen and (min-width: 992px) {
  .index-classroom-area .index-classroom-box .index-classroom-content {
    min-height: 116px;
  }
}
@media screen and (min-width: 1200px) {
  .index-classroom-area .index-classroom-box .index-classroom-content {
    min-height: 87px;
  }
}
.index-classroom-area .index-classroom-box .index-classroom-btn-area.pc {
  display: none;
}
@media screen and (min-width: 992px) {
  .index-classroom-area .index-classroom-box .index-classroom-btn-area.pc {
    display: block;
  }
  .index-classroom-area .index-classroom-box .index-classroom-btn-area.mb {
    display: none;
  }
}
.index-classroom-area .index-classroom-box .index-classroom-btn-area .btn + .btn {
  margin-left: 20px;
}
.index-classroom-area .index-classroom-box + .index-classroom-box {
  margin-top: 100px;
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.left {
    padding-right: 300px;
  }
}
@media screen and (min-width: 992px) {
  .index-classroom-area .index-classroom-box.left {
    padding-right: 350px;
  }
}
.index-classroom-area .index-classroom-box.left .classroom-photo-area {
  right: 35px;
}
@media screen and (min-width: 992px) {
  .index-classroom-area .index-classroom-box.left .classroom-photo-area {
    right: 85px;
  }
}
@media screen and (min-width: 480px) {
  .index-classroom-area .index-classroom-box.left .classroom-board-area {
    left: 50px;
  }
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.right {
    padding-left: 300px;
  }
}
@media screen and (min-width: 992px) {
  .index-classroom-area .index-classroom-box.right {
    padding-left: 350px;
  }
}
.index-classroom-area .index-classroom-box.right .classroom-photo-area {
  left: 35px;
}
@media screen and (min-width: 992px) {
  .index-classroom-area .index-classroom-box.right .classroom-photo-area {
    left: 85px;
  }
}
@media screen and (min-width: 480px) {
  .index-classroom-area .index-classroom-box.right .classroom-board-area {
    left: 50px;
  }
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.right .classroom-board-area {
    left: 300px;
  }
}
@media screen and (min-width: 768px) {
  .index-classroom-area .index-classroom-box.right .classroom-board-area {
    left: 350px;
  }
}
.index-classroom-area .index-classroom-box.learning .classroom-board-area {
  background: url(../img/index/class_learn.png) no-repeat;
}
.index-classroom-area .index-classroom-box.learning:before {
  content: "";
  display: block;
  width: 180px;
  height: 108px;
  background: url(../img/index/pic_learn.png) no-repeat;
  background-size: 180px;
  position: absolute;
  bottom: -31px;
  right: 7px;
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.learning:before {
    width: 309px;
    height: 186px;
    background-size: 309px;
    bottom: -31px;
    right: -10px;
  }
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.learning.right:before {
    right: auto;
    left: -10px;
  }
}
.index-classroom-area .index-classroom-box.care .classroom-board-area {
  width: 270px;
  background: url(../img/index/class_care.png) no-repeat;
}
.index-classroom-area .index-classroom-box.care:before {
  content: "";
  display: block;
  width: 174px;
  height: 130px;
  background: url(../img/index/pic_care01.png) no-repeat;
  background-size: 174px;
  position: absolute;
  bottom: -40px;
  right: 5px;
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.care:before {
    width: 303px;
    height: 228px;
    background-size: 309px;
    bottom: -40px;
    left: -10px;
    right: auto;
  }
}
.index-classroom-area .index-classroom-box.care:after {
  content: "";
  display: none;
  width: 168px;
  height: 85px;
  background: url(../img/index/pic_care02.png) no-repeat;
  position: absolute;
  bottom: -14px;
  right: 22px;
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.care:after {
    display: block;
  }
}
.index-classroom-area .index-classroom-box.care.left:before {
  left: auto;
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.care.left:before {
    right: -5px;
  }
}
.index-classroom-area .index-classroom-box.music .classroom-board-area {
  background: url(../img/index/class_music.png) no-repeat;
}
.index-classroom-area .index-classroom-box.music:before {
  content: "";
  display: block;
  width: 252px;
  height: 149px;
  background: url(../img/index/pic_music.png) no-repeat;
  background-size: 252px;
  position: absolute;
  bottom: -40px;
  right: 10px;
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.music:before {
    width: 330px;
    height: 195px;
    background-size: 330px;
    bottom: -15px;
    right: 10px;
  }
}
@media screen and (min-width: 800px) {
  .index-classroom-area .index-classroom-box.music:before {
    width: 436px;
    height: 258px;
    background-size: 436px;
  }
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.music.right:before {
    right: auto;
    left: -174px;
  }
}
.index-classroom-area .index-classroom-box.art .classroom-board-area {
  background: url(../img/index/class_art.png) no-repeat;
}
.index-classroom-area .index-classroom-box.art:before {
  content: "";
  display: block;
  width: 210px;
  height: 163px;
  background: url(../img/index/pic_art01.png) no-repeat;
  background-size: 210px;
  position: absolute;
  bottom: -57px;
  right: 10px;
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.art:before {
    width: 322px;
    height: 250px;
    background-size: 322px;
    bottom: -57px;
    left: -47px;
    right: auto;
  }
}
.index-classroom-area .index-classroom-box.art:after {
  content: "";
  display: none;
  width: 307px;
  height: 76px;
  background: url(../img/index/pic_art02.png) no-repeat;
  position: absolute;
  bottom: -35px;
  right: -18px;
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.art:after {
    display: block;
  }
}
.index-classroom-area .index-classroom-box.art.left:before {
  left: auto;
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.art.left:before {
    right: -5px;
  }
}
.index-classroom-area .index-classroom-box.art.left:after {
  display: none;
}
.index-classroom-area .index-classroom-box.sport {
  padding-bottom: 100px;
}
@media screen and (min-width: 992px) {
  .index-classroom-area .index-classroom-box.sport {
    padding-bottom: 50px;
  }
}
.index-classroom-area .index-classroom-box.sport .classroom-board-area {
  background: url(../img/index/class_sport.png) no-repeat;
}
.index-classroom-area .index-classroom-box.sport:before {
  content: "";
  display: block;
  width: 380px;
  height: 124px;
  background: url(../img/index/pic_sport.png) no-repeat;
  background-size: 380px;
  position: absolute;
  bottom: -44px;
  right: -2px;
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.sport:before {
    width: 525px;
    height: 172px;
    background-size: 525px;
    position: absolute;
    bottom: -27px;
    right: -32px;
  }
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.sport.right:before {
    right: auto;
    left: -230px;
  }
}
.index-classroom-area .index-classroom-box.integrated {
  padding-bottom: 100px;
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.integrated {
    padding-bottom: 160px;
  }
}
@media screen and (min-width: 768px) {
  .index-classroom-area .index-classroom-box.integrated {
    padding-bottom: 50px;
  }
}
.index-classroom-area .index-classroom-box.integrated .classroom-board-area {
  background: url(../img/index/class_integrated.png) no-repeat;
  width: 270px;
}
.index-classroom-area .index-classroom-box.integrated:before {
  content: "";
  display: block;
  width: 242px;
  height: 131px;
  background: url(../img/index/pic_integrated01.png) no-repeat;
  background-size: 100% auto;
  position: absolute;
  bottom: -50px;
  right: 10px;
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.integrated:before {
    width: 364px;
    height: 196px;
    bottom: -30px;
    left: -80px;
    right: auto;
  }
}
@media screen and (min-width: 992px) {
  .index-classroom-area .index-classroom-box.integrated:before {
    left: -46px;
  }
}
.index-classroom-area .index-classroom-box.integrated:after {
  content: "";
  display: none;
  width: 197px;
  height: 92px;
  background: url(../img/index/pic_integrated02.png) no-repeat;
  position: absolute;
  bottom: -18px;
  right: -20px;
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.integrated:after {
    display: block;
  }
}
@media screen and (min-width: 992px) {
  .index-classroom-area .index-classroom-box.integrated:after {
    right: 25px;
  }
}
.index-classroom-area .index-classroom-box.integrated.left:before {
  left: auto;
}
@media screen and (min-width: 640px) {
  .index-classroom-area .index-classroom-box.integrated.left:before {
    right: -5px;
  }
}
.index-classroom-area .index-classroom-box.integrated.left:after {
  display: none;
}

/*
* @Author: ansen
* @Date:   2018-07-16 15:11:12
* @Last Modified by:   ansen
* @Last Modified time: 2018-08-14 13:56:24
*/
.page-banner-area {
  width: 100%;
  height: 430px;
  background: url(../img/story/all_line_pic.png) 76% -68px no-repeat, url(../img/story/all_bg_color.png) 76% -68px no-repeat;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .page-banner-area {
    background: url(../img/story/all_line_pic.png) 75% -68px no-repeat, url(../img/story/all_bg_color.png) 75% -68px no-repeat;
  }
}
@media screen and (min-width: 992px) {
  .page-banner-area {
    background: url(../img/story/all_line_pic.png) center -68px no-repeat, url(../img/story/all_bg_color.png) center -68px no-repeat;
  }
}

.page-story-area.dream {
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  .page-story-area.dream {
    margin-bottom: 115px;
  }
}
.page-story-area.dream .page_list {
  margin-bottom: -40px;
}
@media screen and (min-width: 768px) {
  .page-story-area.dream .page_list {
    margin-bottom: -115px;
  }
}
.page-story-area .header {
  padding-bottom: 20px;
  position: relative;
}
.page-story-area .header:after {
  display: block;
  content: "";
  clear: both;
}
.page-story-area .header .title {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .page-story-area .header .title {
    width: 50%;
    float: left;
  }
}
.page-story-area .header .title h2 {
  padding-left: 35px;
  font-size: 28px;
  position: relative;
}
.page-story-area .header .title h2:before {
  width: 245px;
  height: 50px;
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/story/title_bg.png) 0 8px;
  background-repeat: no-repeat;
  z-index: -1;
}
.page-story-area .header .title h2.dream:before {
  width: 247px;
  height: 68px;
  display: block;
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  background: url(../img/dream/dream_title_bg_2x.png) center no-repeat;
  background-size: 100%;
  z-index: -1;
}
.page-story-area .header .page-story-choice {
  padding-top: 20px;
  display: flex;
  gap: 15px;
}
@media screen and (min-width: 768px) {
  .page-story-area .header .page-story-choice {
    padding-top: 0;
    position: absolute;
    top: 20px;
    right: 0;
  }
}
.page-story-area .header .page-story-choice .story-select {
  display: none;
  width: 100%;
  height: 42px;
  border-radius: 20px;
  border: 1px solid #AAAAAA;
  padding: 5px 15px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .page-story-area .header .page-story-choice .story-select {
    width: 178px;
  }
}
.page-story-area .header .page-story-choice .story-select .classroom {
  padding-left: 8px;
}
.page-story-area .header .page-story-choice .story-select .classroom:before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2BABD8;
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
}
.page-story-area .header .page-story-choice .story-class-select {
  cursor: pointer;
  position: relative;
  width: 40%;
}
.page-story-area .header .page-story-choice .story-class-select.cat {
  width: 60%;
}
.page-story-area .header .page-story-choice .story-class-select .active-class {
  padding: 10px 30px 10px 15px;
  background-color: #fff;
  border: 1px solid #a5a5a5;
  border-radius: 20px;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .page-story-area .header .page-story-choice .story-class-select .active-class {
    width: 110px;
  }
  .page-story-area .header .page-story-choice .story-class-select .active-class.cat {
    width: 175px;
  }
}
.page-story-area .header .page-story-choice .story-class-select .active-class.cat {
  padding: 10px 30px;
}
.page-story-area .header .page-story-choice .story-class-select .active-class.cat:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: #ffbb54;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 16px;
  margin-top: -4px;
}
.page-story-area .header .page-story-choice .story-class-select .active-class.cat.learn:before {
  background-color: #a1c44c;
}
.page-story-area .header .page-story-choice .story-class-select .active-class.cat.care:before {
  background-color: #eaa5a8;
}
.page-story-area .header .page-story-choice .story-class-select .active-class.cat.music:before {
  background-color: #a884bd;
}
.page-story-area .header .page-story-choice .story-class-select .active-class.cat.art:before {
  background-color: #f16952;
}
.page-story-area .header .page-story-choice .story-class-select .active-class.cat.sport:before {
  background-color: #2da5d7;
}
.page-story-area .header .page-story-choice .story-class-select .active-class.cat.integrated:before {
  background-color: #ed9956;
}
.page-story-area .header .page-story-choice .story-class-select .active-class:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid #585858;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -3px;
}
.page-story-area .header .page-story-choice .story-class-select .class-list {
  display: none;
  width: 100%;
  background-color: #fff;
  border: 1px solid #a5a5a5;
  position: absolute;
  top: 51px;
  left: 0;
  z-index: 3;
}
.page-story-area .header .page-story-choice .story-class-select .class-list a.select-class {
  display: block;
  padding: 10px 30px 10px 15px;
  position: relative;
}
.page-story-area .header .page-story-choice .story-class-select .class-list a.select-class.def {
  padding: 10px 30px;
}
.page-story-area .header .page-story-choice .story-class-select .class-list a.select-class.def:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: #ffbb54;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 16px;
  margin-top: -4px;
}
.page-story-area .header .page-story-choice .story-class-select .class-list a.select-class:hover {
  background-color: #f4f4f4;
}
.page-story-area .header .page-story-choice .story-class-select .class-list a.select-class.learn:before {
  background-color: #a1c44c;
}
.page-story-area .header .page-story-choice .story-class-select .class-list a.select-class.care:before {
  background-color: #eaa5a8;
}
.page-story-area .header .page-story-choice .story-class-select .class-list a.select-class.music:before {
  background-color: #a884bd;
}
.page-story-area .header .page-story-choice .story-class-select .class-list a.select-class.art:before {
  background-color: #f16952;
}
.page-story-area .header .page-story-choice .story-class-select .class-list a.select-class.sport:before {
  background-color: #2da5d7;
}
.page-story-area .header .page-story-choice .story-class-select .class-list a.select-class.integrated:before {
  background-color: #ed9956;
}
.page-story-area .content {
  padding: 20px 0;
}
.page-story-area .content:before, .page-story-area .content:after {
  display: block;
  content: "";
  clear: both;
}
.page-story-area .content .child-story {
  width: 100%;
  padding: 0 10px 20px;
  visibility: hidden;
  float: left;
  height: 100%;
}
@media screen and (min-width: 480px) {
  .page-story-area .content .child-story {
    width: 50%;
    padding: 0 8px 20px 8px;
  }
}
@media screen and (min-width: 768px) {
  .page-story-area .content .child-story {
    width: 33.33%;
  }
}
@media screen and (min-width: 992px) {
  .page-story-area .content .child-story {
    height: 340px;
    padding: 0 14px 45px 14px;
  }
}
@media screen and (min-width: 1200px) {
  .page-story-area .content .child-story {
    width: 25%;
  }
}
.page-story-area .content .child-story .img-area {
  width: 100%;
  padding: 5px;
  background: #FEFEFE;
  border: 1px solid #E1E2E2;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.page-story-area .content .child-story .img-area img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  overflow: hidden;
}
.page-story-area .content .child-story .img-area img.img-frame {
  opacity: 0;
}
.page-story-area .content .child-story .img-area img.img-main {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  position: absolute;
  top: 5px;
  left: 5px;
}
.page-story-area .content .child-story .img-area .video-frame {
  width: calc(100% - 10px);
  border-radius: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.page-story-area .content .child-story .img-area .video-frame > div {
  border-radius: 15px;
}
.page-story-area .content .child-story .img-area .video-frame > div > iframe {
  border-radius: 15px;
}
.page-story-area .content .child-story .subtitle {
  display: inline-block;
  padding: 8px 10px 0 10px;
  position: relative;
}
.page-story-area .content .child-story .subtitle .detail {
  padding-left: 25px;
  font-size: 16px;
  display: flex;
}
.page-story-area .content .child-story .subtitle .detail span {
  display: inline-block;
  padding: 0px 8px 0 2px;
}
.page-story-area .content .child-story .subtitle .detail span + span {
  position: relative;
  padding: 0px 8px 0 8px;
}
.page-story-area .content .child-story .subtitle .detail span + span:after {
  content: "";
  position: absolute;
  top: 6px;
  /* 往下縮 2px */
  bottom: 5px;
  /* 往上縮 2px */
  left: 0;
  width: 0;
  border-left: 1px solid #A5A5A5;
  /* 定義邊框寬度和顏色 */
}
.page-story-area .content .child-story .subtitle .detail:before {
  width: 22px;
  height: 22px;
  display: block;
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  border-radius: 50%;
}
.page-story-area .content .child-story .subtitle .detail.sport:before {
  background: url(../img/story/type_sport.png) 0 2px #2BABD8 no-repeat;
}
.page-story-area .content .child-story .subtitle .detail.care:before {
  background: url(../img/story/type_care.png) 0 2px #FFCF63 no-repeat;
}
.page-story-area .content .child-story .subtitle .detail.learn:before {
  background: url(../img/story/type_learn.png) 0 1px #A4BE53 no-repeat;
}
.page-story-area .content .child-story .subtitle .detail.music:before {
  background: url(../img/story/type_music.png) 0 1px #A984B8 no-repeat;
}
.page-story-area .content .child-story .subtitle .detail.art:before {
  background: url(../img/story/type_art.png) 0 1px #F26655 no-repeat;
}
.page-story-area .content .child-story .subtitle .detail.integrated:before {
  background: url(../img/story/type_integrated.png) 0 1px #ed9956 no-repeat;
}
.page-story-area .content .child-story .subtitle .detail + .detail {
  padding-left: 13px;
}
.page-story-area .content .child-story .title {
  line-height: 1.75;
  padding: 0 10px;
  font-size: 17px;
}
.page-story-area .page-story-button {
  width: 100%;
  display: inline-block;
  text-align: center;
}
.page-story-area .page-story-button .btn {
  width: 142px;
}

.clearfix.mb-fix {
  display: none;
}
@media screen and (min-width: 480px) {
  .clearfix.mb-fix {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .clearfix.mb-fix {
    display: none;
  }
}
.clearfix.pc-fix {
  display: none;
}
@media screen and (min-width: 768px) {
  .clearfix.pc-fix {
    display: block;
  }
}
@media screen and (min-width: 992px) {
  .clearfix.pc-fix {
    display: none;
  }
}

.story-deatail-area {
  border-bottom: 1px solid #96CCE4;
  margin-bottom: 50px;
}
.story-deatail-area .story-deatail-header-area {
  padding: 30px 0 40px;
  margin-bottom: 30px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .story-deatail-area .story-deatail-header-area {
    padding: 30px 20px 40px;
  }
}
.story-deatail-area .story-deatail-header-area:after {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  background: url(../img/story/sports/partition_line_sport.png);
  position: absolute;
  bottom: 0;
  left: 0;
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box {
  position: relative;
  padding-left: 0;
}
@media screen and (min-width: 768px) {
  .story-deatail-area .story-deatail-header-area .story-deatail-header-box {
    padding-left: 300px;
  }
}
@media screen and (min-width: 992px) {
  .story-deatail-area .story-deatail-header-area .story-deatail-header-box {
    padding-left: 360px;
  }
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-photo {
  width: 300px;
  height: 229px;
  padding: 8px;
  border: 1px solid #B1B2B4;
  border-radius: 10px;
  background-color: #fff;
  position: relative;
  top: 0;
  left: 50%;
  margin-left: -150px;
}
@media screen and (min-width: 768px) {
  .story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-photo {
    position: absolute;
    left: 0;
    margin-left: 0;
  }
}
@media screen and (min-width: 992px) {
  .story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-photo {
    width: 360px;
    height: 274px;
  }
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-photo img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-photo .video-frame > div {
  border-radius: 10px;
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content {
  padding: 20px 10px 0 10px;
}
@media screen and (min-width: 768px) {
  .story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content {
    min-height: 270px;
  }
}
@media screen and (min-width: 992px) {
  .story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content {
    padding-left: 30px;
    padding-top: 0;
  }
}
@media screen and (min-width: 992px) {
  .story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content {
    padding-left: 50px;
  }
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-top-area {
  position: relative;
  padding: 20px 0 15px 75px;
  margin-bottom: 18px;
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-top-area:before {
  content: "";
  display: block;
  width: 79px;
  height: 93px;
  background: url(../img/story/detail/title_icon_sport.png) no-repeat;
  position: absolute;
  top: 0;
  left: -5px;
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-top-area .story-deatail-name {
  font-size: 18px;
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-top-area .story-deatail-name span {
  display: inline-block;
  padding: 0px 8px 0 2px;
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-top-area .story-deatail-name span + span {
  position: relative;
  padding: 0px 5px 0 12px;
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-top-area .story-deatail-name span + span:after {
  content: "";
  position: absolute;
  top: 6px;
  /* 往下縮 2px */
  bottom: 5px;
  /* 往上縮 2px */
  left: 0;
  width: 0;
  border-left: 1px solid #A5A5A5;
  /* 定義邊框寬度和顏色 */
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-top-area .story-deatail-slogan {
  font-size: 24px;
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-medal {
  font-size: 18px;
  position: relative;
  padding: 8px 5px 8px 55px;
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-medal:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url(../img/story/sports/icon_experience.png) center no-repeat #FFBB2C;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 10px;
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-medal.experience:before {
  background: url(../img/story/detail/icon_experience_2x.png) center no-repeat #FFBB2C;
  background-size: 14px;
}
@media screen and (min-width: 768px) {
  .story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-medal.experience:before {
    background: url(../img/story/detail/icon_experience.png) center no-repeat #FFBB2C;
    background-size: 14px;
  }
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-medal.talent:before {
  background: url(../img/story/detail/icon_talent_2x.png) center no-repeat #FFBB2C;
  background-size: 20px;
}
@media screen and (min-width: 768px) {
  .story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-medal.talent:before {
    background: url(../img/story/detail/icon_talent.png) center no-repeat #FFBB2C;
    background-size: 20px;
  }
}
.story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-medal.describe:before {
  background: url(../img/story/detail/icon_description_2x.png) center no-repeat #FFBB2C;
  background-size: 16px;
}
@media screen and (min-width: 768px) {
  .story-deatail-area .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-medal.describe:before {
    background: url(../img/story/detail/icon_description.png) center no-repeat #FFBB2C;
    background-size: 16px;
  }
}
.story-deatail-area.learn {
  background: url(../img/story/learning/learn_bg02.png);
  border-bottom: 1px solid #abc767;
}
.story-deatail-area.learn .story-deatail-header-area:after {
  background: url(../img/partner/partition_line_learn_2x.png);
  background-size: 200px;
}
@media screen and (min-width: 768px) {
  .story-deatail-area.learn .story-deatail-header-area:after {
    background: url(../img/partner/partition_line_learn.png);
    background-size: 200px;
  }
}
.story-deatail-area.learn .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-top-area:before {
  background: url(../img/partner/partner_icon_learn.png) no-repeat;
}
.story-deatail-area.care {
  background: url(../img/story/care/care_bg02.png);
  border-bottom: 1px solid #e1c975;
}
.story-deatail-area.care .story-deatail-header-area:after {
  background: url(../img/partner/partition_line_care_2x.png);
  background-size: 200px;
}
@media screen and (min-width: 768px) {
  .story-deatail-area.care .story-deatail-header-area:after {
    background: url(../img/partner/partition_line_care.png);
    background-size: 200px;
  }
}
.story-deatail-area.care .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-top-area:before {
  background: url(../img/partner/partner_icon_care.png) no-repeat;
}
.story-deatail-area.music {
  background: url(../img/story/music/music_bg02.png);
  border-bottom: 1px solid #c4a1d8;
}
.story-deatail-area.music .story-deatail-header-area:after {
  background: url(../img/partner/partition_line_music_2x.png);
  background-size: 200px;
}
@media screen and (min-width: 768px) {
  .story-deatail-area.music .story-deatail-header-area:after {
    background: url(../img/partner/partition_line_music.png);
    background-size: 200px;
  }
}
.story-deatail-area.music .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-top-area:before {
  background: url(../img/partner/partner_icon_music.png) no-repeat;
}
.story-deatail-area.art {
  background: url(../img/story/art/art_bg02.png);
  border-bottom: 1px solid #dfab95;
}
.story-deatail-area.art .story-deatail-header-area:after {
  background: url(../img/partner/partition_line_art_2x.png);
  background-size: 200px;
}
@media screen and (min-width: 768px) {
  .story-deatail-area.art .story-deatail-header-area:after {
    background: url(../img/partner/partition_line_art.png);
    background-size: 200px;
  }
}
.story-deatail-area.art .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-top-area:before {
  background: url(../img/partner/partner_icon_art.png) no-repeat;
}
.story-deatail-area.sport {
  background: url(../img/story/sports/sport_bg02.png);
  border-bottom: 1px solid #96CCE4;
}
.story-deatail-area.sport .story-deatail-header-area:after {
  background: url(../img/partner/partition_line_sport_2x.png);
  background-size: 200px;
}
@media screen and (min-width: 768px) {
  .story-deatail-area.sport .story-deatail-header-area:after {
    background: url(../img/partner/partition_line_sport.png);
    background-size: 200px;
  }
}
.story-deatail-area.sport .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-top-area:before {
  background: url(../img/partner/partner_icon_sport.png) no-repeat;
}
.story-deatail-area.integrated {
  background: url(../img/story/integrated/integrated_bg02.png);
  border-bottom: 1px solid #e6b89f;
}
.story-deatail-area.integrated .story-deatail-header-area:after {
  background: url(../img/partner/partition_line_integrated_2x.png);
  background-size: 200px;
}
@media screen and (min-width: 768px) {
  .story-deatail-area.integrated .story-deatail-header-area:after {
    background: url(../img/partner/partition_line_integrated.png);
    background-size: 200px;
  }
}
.story-deatail-area.integrated .story-deatail-header-area .story-deatail-header-box .story-deatail-header-content .story-deatail-top-area:before {
  background: url(../img/partner/partner_icon_integrated.png) no-repeat;
  width: 80px;
  height: 73px;
  top: 15px;
  left: -8px;
}

.deatail-description-area .deatail-description {
  padding-bottom: 35px;
  word-break: break-all;
}
.deatail-description-area .deatail-description p {
  padding-bottom: 20px;
  margin: 0;
  line-height: 1.7;
}
.deatail-description-area .deatail-description iframe, .deatail-description-area .deatail-description img, .deatail-description-area .deatail-description table {
  max-width: 100%;
}
.deatail-description-area .deatail-description img {
  height: auto;
}
.deatail-description-area .deatail-description-bottom-area {
  margin-bottom: 60px;
  position: relative;
}
.deatail-description-area .deatail-description-bottom-area .donate-btn-area {
  text-align: center;
  margin-bottom: 20px;
}
@media screen and (min-width: 640px) {
  .deatail-description-area .deatail-description-bottom-area .donate-btn-area {
    margin-bottom: 0;
    position: absolute;
    bottom: 0;
    right: 165px;
  }
}
.deatail-description-area .deatail-description-bottom-area .back-btn-area .btn {
  width: 140px;
}
.deatail-description-area .deatail-description-bottom-area .social-area {
  position: absolute;
  bottom: -6px;
  right: 0;
}

.time-area {
  margin-bottom: 82px;
}
.time-area .time-select {
  padding: 0px;
  text-align: right;
  position: relative;
  margin-top: 30px;
}
.time-area .time-select:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #363636;
  position: absolute;
  top: 17px;
  right: 14px;
}
@media screen and (min-width: 768px) {
  .time-area .time-select:after {
    top: 31px;
    right: 30px;
  }
}
@media screen and (min-width: 768px) {
  .time-area .time-select {
    padding: 15px;
    margin-top: 0;
  }
}
.time-area .time-select select {
  width: auto;
  background-color: #fff;
  padding: 5px 30px 5px 20px;
  border-radius: 50px;
  cursor: pointer;
  -webkit-appearance: none;
  position: relative;
}
.time-area .time-line-win {
  position: relative;
}
.time-area .time-line-win:before {
  width: 330px;
  height: 155px;
  display: none;
  content: "";
  background: url(../img/story/sports/progress_icon_sport.png) no-repeat;
  position: absolute;
  right: 0px;
  top: 0;
}
@media screen and (min-width: 992px) {
  .time-area .time-line-win:before {
    display: block;
    position: absolute;
    right: 0px;
    top: 30px;
  }
}
.time-area .time-line-win.learn:before {
  background: url(../img/story/learning/progress_icon_learn.png) no-repeat;
}
.time-area .time-line-win.care:before {
  background: url(../img/story/care/progress_icon_care.png) no-repeat;
}
.time-area .time-line-win.music:before {
  background: url(../img/story/music/progress_icon_music.png) no-repeat;
}
.time-area .time-line-win.art:before {
  background: url(../img/story/art/progress_icon_art.png) no-repeat;
}
.time-area .time-line-win.sport:before {
  background: url(../img/story/sports/progress_icon_sport.png) no-repeat;
}
.time-area .time-line-win.integrated:before {
  background: url(../img/story/integrated/progress_icon_integrated.png) no-repeat;
}
.time-area .time-line-area {
  margin-top: 25px;
  padding: 0 0 0 80px;
  position: relative;
}
@media screen and (min-width: 700px) {
  .time-area .time-line-area {
    padding: 0 0 0 90px;
  }
}
@media screen and (min-width: 768px) {
  .time-area .time-line-area {
    padding: 0 15px 0 120px;
  }
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area {
    margin-top: 200px;
    padding: 0 20px;
  }
}
@media screen and (min-width: 1200px) {
  .time-area .time-line-area {
    margin-top: 226px;
    padding: 0 90px;
  }
}
.time-area .time-line-area:before {
  width: 160px;
  height: 260px;
  display: block;
  content: "";
  position: absolute;
  margin-left: -25px;
  top: -95px;
  left: 0;
  background: url(../img/story/sports/progress_line_foot.png) no-repeat;
  background-size: 85px;
  z-index: 2;
}
@media screen and (min-width: 700px) {
  .time-area .time-line-area:before {
    background-size: 100px;
    margin-left: -25px;
  }
}
@media screen and (min-width: 768px) {
  .time-area .time-line-area:before {
    margin-left: -12px;
  }
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area:before {
    background-size: 160px;
    left: 50%;
    top: -240px;
    margin-left: -90px;
  }
}
@media screen and (min-width: 1200px) {
  .time-area .time-line-area:before {
    top: -255px;
  }
}
.time-area .time-line-area .time-line-bg {
  position: relative;
}
.time-area .time-line-area .time-line-bg:before {
  width: 100px;
  height: calc(100% - 175px);
  display: block;
  content: "";
  position: absolute;
  margin-left: -113px;
  left: 0;
  bottom: 160px;
  background: url(../img/story/sports/progress_line_reapet.png) center repeat-y;
  background-size: 85px;
}
@media screen and (min-width: 700px) {
  .time-area .time-line-area .time-line-bg:before {
    margin-left: -115px;
    background-size: 100px;
    bottom: 155px;
  }
}
@media screen and (min-width: 768px) {
  .time-area .time-line-area .time-line-bg:before {
    margin-left: -132px;
    bottom: 215px;
  }
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area .time-line-bg:before {
    width: 160px;
    margin-left: -90px;
    left: 50%;
    bottom: 335px;
    background-size: 160px;
  }
}
@media screen and (min-width: 1200px) {
  .time-area .time-line-area .time-line-bg:before {
    bottom: 275px;
  }
}
.time-area .time-line-area .time-line-bg:after {
  display: block;
  content: "";
  clear: both;
}
.time-area .time-line-area .time-line-bg .time-line-box {
  display: inline-block;
  width: 100%;
  padding: 20px;
  background: #FFF;
  border: 1px solid #ADD6E8;
  border-radius: 5px;
  position: relative;
  float: left;
}
@media screen and (min-width: 768px) {
  .time-area .time-line-area .time-line-bg .time-line-box {
    width: 100%;
    padding: 20px 30px;
  }
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area .time-line-bg .time-line-box {
    width: 100%;
    max-width: 350px;
  }
}
.time-area .time-line-area .time-line-bg .time-line-box:before, .time-area .time-line-area .time-line-bg .time-line-box:after {
  display: block;
  content: "";
  clear: both;
  position: absolute;
  width: 0;
  height: 0;
}
.time-area .time-line-area .time-line-bg .time-line-box:before {
  z-index: -1;
  top: 20%;
  left: -20px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #ADD6E8;
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area .time-line-bg .time-line-box:before {
    top: 50%;
    margin-top: -24px;
    left: -30px;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid #ADD6E8;
  }
}
.time-area .time-line-area .time-line-bg .time-line-box:after {
  z-index: 1;
  top: 20%;
  left: -18px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #FFF;
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area .time-line-bg .time-line-box:after {
    top: 50%;
    margin-top: -24px;
    left: -29px;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid #FFF;
  }
}
.time-area .time-line-area .time-line-bg .time-line-box + .time-line-box {
  margin-top: 30px;
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area .time-line-bg .time-line-box + .time-line-box {
    margin-top: 60px;
  }
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area .time-line-bg .time-line-box:nth-child(odd) {
    margin-right: 200px;
  }
  .time-area .time-line-area .time-line-bg .time-line-box:nth-child(odd):before {
    left: 348px;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #ADD6E8;
    border-right: 0 solid #ADD6E8;
  }
  .time-area .time-line-area .time-line-bg .time-line-box:nth-child(odd):after {
    left: 347px;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #FFF;
    border-right: 0 solid #FFF;
  }
}
@media screen and (min-width: 1200px) {
  .time-area .time-line-area .time-line-bg .time-line-box:nth-child(odd) {
    margin-right: 260px;
  }
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area .time-line-bg .time-line-box:nth-child(even) {
    margin-top: 150px;
  }
  .time-area .time-line-area .time-line-bg .time-line-box:nth-child(even):before {
    right: 348px;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid #ADD6E8;
  }
  .time-area .time-line-area .time-line-bg .time-line-box:nth-child(even):after {
    right: 347px;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid #FFF;
  }
}
@media screen and (min-width: 1200px) {
  .time-area .time-line-area .time-line-bg .time-line-box:nth-child(even) {
    margin-top: 180px;
  }
}
.time-area .time-line-area .time-line-bg .time-line-box.learn {
  border: 1px solid #cad9a0;
}
.time-area .time-line-area .time-line-bg .time-line-box.learn:nth-child(odd):before, .time-area .time-line-area .time-line-bg .time-line-box.learn:nth-child(even):before {
  border-right-color: #cad9a0;
  border-left-color: #cad9a0;
}
.time-area .time-line-area .time-line-bg .time-line-box.care {
  border: 1px solid #ead795;
}
.time-area .time-line-area .time-line-bg .time-line-box.care:nth-child(odd):before, .time-area .time-line-area .time-line-bg .time-line-box.care:nth-child(even):before {
  border-right-color: #ead795;
  border-left-color: #ead795;
}
.time-area .time-line-area .time-line-bg .time-line-box.sports {
  border: 1px solid #ADD6E8;
}
.time-area .time-line-area .time-line-bg .time-line-box.art {
  border: 1px solid #f2d3c5;
}
.time-area .time-line-area .time-line-bg .time-line-box.art:nth-child(odd):before, .time-area .time-line-area .time-line-bg .time-line-box.art:nth-child(even):before {
  border-right-color: #f2d3c5;
  border-left-color: #f2d3c5;
}
.time-area .time-line-area .time-line-bg .time-line-box.music {
  border: 1px solid #e1c8ef;
}
.time-area .time-line-area .time-line-bg .time-line-box.music:nth-child(odd):before, .time-area .time-line-area .time-line-bg .time-line-box.music:nth-child(even):before {
  border-right-color: #e1c8ef;
  border-left-color: #e1c8ef;
}
.time-area .time-line-area .time-line-bg .time-line-box.integrated {
  border: 1px solid #fbc1a1;
}
.time-area .time-line-area .time-line-bg .time-line-box.integrated:nth-child(odd):before, .time-area .time-line-area .time-line-bg .time-line-box.integrated:nth-child(even):before {
  border-right-color: #fbc1a1;
  border-left-color: #fbc1a1;
}
.time-area .time-line-area .time-line-bg .time-line-box .time-date {
  font-size: 14px;
  margin-bottom: 5px;
  padding-left: 0;
  display: block;
  position: relative;
}
@media screen and (min-width: 560px) {
  .time-area .time-line-area .time-line-bg .time-line-box .time-date {
    margin-bottom: 0;
    padding-left: 175px;
  }
}
@media screen and (min-width: 768px) {
  .time-area .time-line-area .time-line-bg .time-line-box .time-date {
    font-size: 14px;
  }
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area .time-line-bg .time-line-box .time-date {
    padding-left: 0;
    margin-bottom: 10px;
    font-size: 15px;
  }
}
.time-area .time-line-area .time-line-bg .time-line-box .time-date .time-name {
  font-size: 14px;
  position: absolute;
  top: 0;
  right: 0;
}
.time-area .time-line-area .time-line-bg .time-line-box .time-line-pic {
  width: 100%;
  max-width: 250px;
  overflow: hidden;
  border: 1px solid #B3B5B2;
  border-radius: 5px;
  margin: 0 auto 5px;
  position: relative;
  left: 0;
  top: 0;
}
@media screen and (min-width: 560px) {
  .time-area .time-line-area .time-line-bg .time-line-box .time-line-pic {
    width: 160px;
    max-width: 100%;
    margin: 0;
    position: absolute;
    left: 20px;
    top: 20px;
  }
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area .time-line-bg .time-line-box .time-line-pic {
    width: 280px;
    margin: 0 0 10px;
    position: relative;
    left: 0;
    top: 0;
  }
}
.time-area .time-line-area .time-line-bg .time-line-box .time-line-pic img {
  width: 100%;
}
.time-area .time-line-area .time-line-bg .time-line-box .time-line-description {
  padding-left: 0;
  display: block;
}
@media screen and (min-width: 560px) {
  .time-area .time-line-area .time-line-bg .time-line-box .time-line-description {
    padding-left: 175px;
    display: inline-block;
    min-height: 140px;
  }
}
@media screen and (min-width: 625px) {
  .time-area .time-line-area .time-line-bg .time-line-box .time-line-description {
    min-height: 140px;
  }
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area .time-line-bg .time-line-box .time-line-description {
    padding-left: 0;
    display: block;
    min-height: 0;
  }
}
.time-area .time-line-area .time-line-bg .time-line-box .time-line-description .time-line-title {
  font-size: 16px;
  margin-bottom: 5px;
}
@media screen and (min-width: 768px) {
  .time-area .time-line-area .time-line-bg .time-line-box .time-line-description .time-line-title {
    font-size: 18px;
  }
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area .time-line-bg .time-line-box .time-line-description .time-line-title {
    font-size: 20px;
  }
}
.time-area .time-line-area .time-line-bg .time-line-box .time-line-description .time-line-info {
  font-size: 14px;
  line-height: 1.7;
  color: #838584;
  margin-bottom: 10px;
  text-align: justify;
}
.time-area .time-line-area .time-line-bg .time-line-box .time-line-description .time-line-info img, .time-area .time-line-area .time-line-bg .time-line-box .time-line-description .time-line-info iframe {
  max-width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .time-area .time-line-area .time-line-bg .time-line-box .time-line-description .time-line-info {
    font-size: 16px;
  }
}
.time-area .time-line-area .time-line-bg .footprint-bot {
  width: 100px;
  height: 260px;
  display: block;
  content: "";
  position: absolute;
  margin-left: -105px;
  bottom: -100px;
  left: 0;
  z-index: 2;
  background: url(../img/story/sports/progress_line_star.png) no-repeat;
  background-size: 85px;
}
@media screen and (min-width: 700px) {
  .time-area .time-line-area .time-line-bg .footprint-bot {
    background-size: 100px;
    margin-left: -115px;
  }
}
@media screen and (min-width: 768px) {
  .time-area .time-line-area .time-line-bg .footprint-bot {
    margin-left: -132px;
    bottom: -15px;
  }
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area .time-line-bg .footprint-bot {
    width: 160px;
    left: 50%;
    bottom: 115px;
    margin-left: -90px;
    background-size: 160px;
  }
}
@media screen and (min-width: 1200px) {
  .time-area .time-line-area .time-line-bg .footprint-bot {
    bottom: 15px;
  }
}
.time-area .time-line-area.less1:before {
  top: -90px;
}
@media screen and (min-width: 768px) {
  .time-area .time-line-area.less1:before {
    top: -120px;
  }
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area.less1:before {
    top: -262px;
  }
}
.time-area .time-line-area.less1 .time-line-bg:before {
  bottom: 130px;
}
@media screen and (min-width: 560px) {
  .time-area .time-line-area.less1 .time-line-bg:before {
    bottom: 55px;
  }
}
@media screen and (min-width: 680px) {
  .time-area .time-line-area.less1 .time-line-bg:before {
    bottom: 20px;
  }
}
@media screen and (min-width: 768px) {
  .time-area .time-line-area.less1 .time-line-bg:before {
    bottom: 10px;
  }
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area.less1 .time-line-bg:before {
    bottom: 190px;
  }
}
.time-area .time-line-area.less1 .time-line-bg .footprint-bot {
  bottom: -130px;
}
@media screen and (min-width: 560px) {
  .time-area .time-line-area.less1 .time-line-bg .footprint-bot {
    bottom: -100px;
  }
}
@media screen and (min-width: 680px) {
  .time-area .time-line-area.less1 .time-line-bg .footprint-bot {
    bottom: -120px;
  }
}
@media screen and (min-width: 768px) {
  .time-area .time-line-area.less1 .time-line-bg .footprint-bot {
    bottom: -110px;
  }
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area.less1 .time-line-bg .footprint-bot {
    bottom: 0px;
  }
}
@media screen and (min-width: 1200px) {
  .time-area .time-line-area.less1 .time-line-bg .footprint-bot {
    bottom: 15px;
  }
}
@media screen and (min-width: 560px) {
  .time-area .time-line-area.less2 .time-line-bg:before {
    bottom: 160px;
  }
}
@media screen and (min-width: 992px) {
  .time-area .time-line-area.less2 .time-line-bg:before {
    bottom: 290px;
  }
}
@media screen and (min-width: 1200px) {
  .time-area .time-line-area.less2 .time-line-bg:before {
    bottom: 275px;
  }
}

.contact-area {
  width: 90%;
  height: auto;
  background: #FFF;
  border: 1px solid #B3D4E5;
  padding: 10px 20px 50px;
  position: relative;
  margin: 0 auto 30px;
}
@media screen and (min-width: 768px) {
  .contact-area {
    padding: 60px;
  }
}
@media screen and (min-width: 1230px) {
  .contact-area {
    width: 1142px;
  }
}
.contact-area:after {
  width: 134px;
  height: 89px;
  display: block;
  content: "";
  position: absolute;
  background: url(../img/story/detail/bag.png);
  bottom: -22px;
  right: -31px;
}
.contact-area.learn {
  border: 1px solid #cad9a0;
}
.contact-area.sports {
  border: 1px solid #B3D4E5;
}
.contact-area.care {
  border: 1px solid #ead795;
}
.contact-area.art {
  border: 1px solid #f2d3c5;
}
.contact-area.music {
  border: 1px solid #e1c8ef;
}
.contact-area.integrated {
  border: 1px solid #e6b89f;
}
.contact-area.dream {
  border: 1px solid #bae8e2;
}
.contact-area iframe {
  width: 100% !important;
}

/*
* @Author: ansen
* @Date:   2018-07-16 15:11:12
* @Last Modified by:   ansen
* @Last Modified time: 2018-08-14 11:14:50
*/
.breadcrumbs {
  font-size: 14px;
  color: #000;
  padding: 10px 20px;
}
.breadcrumbs .path_alert {
  color: #000;
}

.social-area a.social-btn {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 10px;
}
.social-area a.social-btn.facebook {
  background: url(../img/story/sports/share_fb_2x.png) center no-repeat #1877f2;
  background-size: 40px;
}
@media screen and (min-width: 768px) {
  .social-area a.social-btn.facebook {
    background: url(../img/story/sports/share_fb.png) center no-repeat #1877f2;
    background-size: 40px;
  }
}
.social-area a.social-btn.google {
  background: url(../img/story/sports/share_google_2x.png) center no-repeat #DA4B3D;
  background-size: 23px;
}
@media screen and (min-width: 768px) {
  .social-area a.social-btn.google {
    background: url(../img/story/sports/share_google.png) center no-repeat #DA4B3D;
    background-size: 23px;
  }
}
.social-area a.social-btn.line {
  background: url(../img/story/sports/share_line_2x.png) center no-repeat #00C402;
  background-size: 30px;
}
@media screen and (min-width: 768px) {
  .social-area a.social-btn.line {
    background: url(../img/story/sports/share_line.png) center no-repeat #00C402;
    background-size: 30px;
  }
}
.social-area a.social-btn:hover.facebook {
  background-color: #316cb6;
}
.social-area a.social-btn:hover.google {
  background-color: #ec5748;
}
.social-area a.social-btn:hover.line {
  background-color: #05d707;
}

.pagelist-title-story {
  text-align: center;
}
.pagelist-title-story span {
  display: inline-block;
  font-size: 28px;
  padding: 0 40px 5px;
  position: relative;
  z-index: 2;
}
.pagelist-title-story span:after {
  content: "";
  display: block;
  width: 247px;
  height: 34px;
  background: url(../img/story/sports/story_title_bg_sport.png) no-repeat;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.pagelist-title-story.sports span:after {
  background: url(../img/story/sports/story_title_bg_sport_2x.png) no-repeat;
  background-size: 186px;
}
@media screen and (min-width: 768px) {
  .pagelist-title-story.sports span:after {
    background: url(../img/story/sports/story_title_bg_sport.png) no-repeat;
    background-size: 186px;
  }
}
.pagelist-title-story.sports.long span:after {
  background: url(../img/story/sports/progress_title_bg_sport_2x.png) no-repeat;
  background-size: 247px;
}
@media screen and (min-width: 768px) {
  .pagelist-title-story.sports.long span:after {
    background: url(../img/story/sports/progress_title_bg_sport.png) no-repeat;
    background-size: 247px;
  }
}
.pagelist-title-story.art span:after {
  background: url(../img/story/art/story_title_bg_art_2x.png) no-repeat;
  background-size: 186px;
}
@media screen and (min-width: 768px) {
  .pagelist-title-story.art span:after {
    background: url(../img/story/art/story_title_bg_art.png) no-repeat;
    background-size: 186px;
  }
}
.pagelist-title-story.art.long span:after {
  background: url(../img/story/art/progress_title_bg_art_2x.png) no-repeat;
  background-size: 247px;
}
@media screen and (min-width: 768px) {
  .pagelist-title-story.art.long span:after {
    background: url(../img/story/art/progress_title_bg_art.png) no-repeat;
    background-size: 247px;
  }
}
.pagelist-title-story.care span:after {
  background: url(../img/story/care/story_title_bg_care_2x.png) no-repeat;
  background-size: 186px;
}
@media screen and (min-width: 768px) {
  .pagelist-title-story.care span:after {
    background: url(../img/story/care/story_title_bg_care.png) no-repeat;
    background-size: 186px;
  }
}
.pagelist-title-story.care.long span:after {
  background: url(../img/story/care/progress_title_bg_care_2x.png) no-repeat;
  background-size: 247px;
}
@media screen and (min-width: 768px) {
  .pagelist-title-story.care.long span:after {
    background: url(../img/story/care/progress_title_bg_care.png) no-repeat;
    background-size: 247px;
  }
}
.pagelist-title-story.care.line-event span:after {
  left: 7px;
  width: 294px;
  background: url(../img/story/line_title_bg_news.png) no-repeat;
  background-size: 294px;
}
@media screen and (min-width: 768px) {
  .pagelist-title-story.care.line-event span:after {
    background: url(../img/story/line_title_bg_news_2x.png) no-repeat;
    background-size: 294px;
  }
}
.pagelist-title-story.music span:after {
  background: url(../img/story/music/story_title_bg_music_2x.png) no-repeat;
  background-size: 186px;
}
@media screen and (min-width: 768px) {
  .pagelist-title-story.music span:after {
    background: url(../img/story/music/story_title_bg_music.png) no-repeat;
    background-size: 186px;
  }
}
.pagelist-title-story.music.long span:after {
  background: url(../img/story/music/progress_title_bg_music_2x.png) no-repeat;
  background-size: 247px;
}
@media screen and (min-width: 768px) {
  .pagelist-title-story.music.long span:after {
    background: url(../img/story/music/progress_title_bg_music.png) no-repeat;
    background-size: 247px;
  }
}
.pagelist-title-story.learn span:after {
  background: url(../img/story/learning/story_title_bg_learn_2x.png) no-repeat;
  background-size: 186px;
}
@media screen and (min-width: 768px) {
  .pagelist-title-story.learn span:after {
    background: url(../img/story/learning/story_title_bg_learn.png) no-repeat;
    background-size: 186px;
  }
}
.pagelist-title-story.learn.long span:after {
  background: url(../img/story/learning/progress_title_bg_learn_2x.png) no-repeat;
  background-size: 247px;
}
@media screen and (min-width: 768px) {
  .pagelist-title-story.learn.long span:after {
    background: url(../img/story/learning/progress_title_bg_learn.png) no-repeat;
    background-size: 247px;
  }
}
.pagelist-title-story.donate {
  padding: 40px 0 30px;
}
.pagelist-title-story.donate span:after {
  width: 292px;
  height: 34px;
  background: url(../img/donate/title_bg_normal_2x.png) no-repeat;
  background-size: 292px;
}
@media screen and (min-width: 768px) {
  .pagelist-title-story.donate span:after {
    background: url(../img/donate/title_bg_normal.png) no-repeat;
    background-size: 292px;
  }
}
.pagelist-title-story.integrated span:after {
  background: url(../img/story/integrated/story_title_bg_integrated_2x.png) no-repeat;
  background-size: 186px;
}
@media screen and (min-width: 768px) {
  .pagelist-title-story.integrated span:after {
    background: url(../img/story/integrated/story_title_bg_integrated.png) no-repeat;
    background-size: 186px;
  }
}
.pagelist-title-story.integrated.long span:after {
  background: url(../img/story/integrated/progress_title_bg_integrated_2x.png) no-repeat;
  background-size: 247px;
}
@media screen and (min-width: 768px) {
  .pagelist-title-story.integrated.long span:after {
    background: url(../img/story/integrated/progress_title_bg_integrated.png) no-repeat;
    background-size: 247px;
  }
}
.pagelist-title-story.news {
  padding-top: 20px;
  padding-bottom: 30px;
}
@media screen and (min-width: 992px) {
  .pagelist-title-story.news {
    padding-top: 20px;
  }
}
.pagelist-title-story.padding-bottom {
  padding-bottom: 55px;
}

.story-banner-area {
  background: url(../img/story/sports/sport_bg_line.png) center -85px no-repeat;
  border-bottom: 1px solid #96CCE4;
  margin-bottom: 50px;
  position: relative;
  overflow: hidden;
}
.story-banner-area .story-intro-area {
  padding: 285px 0px 65px;
}
@media screen and (min-width: 768px) {
  .story-banner-area .story-intro-area {
    padding: 285px 20px 65px;
  }
}
@media screen and (min-width: 992px) {
  .story-banner-area .story-intro-area {
    padding: 250px 20px 65px;
  }
}
.story-banner-area .story-intro-area .story-intro-box {
  padding: 15px 20px 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  position: relative;
}
@media screen and (min-width: 768px) {
  .story-banner-area .story-intro-area .story-intro-box {
    padding: 40px 50px 40px;
  }
}
.story-banner-area .story-intro-area .story-intro-box .story-intro-title {
  font-size: 20px;
  text-align: center;
  margin-bottom: 10px;
}
.story-banner-area .story-intro-area .story-intro-box .story-intro-title span {
  display: inline-block;
  color: #F67965;
  padding: 0 5px;
  font-family: Arial;
  font-size: 24px;
}
.story-banner-area .story-intro-area .story-intro-box .story-intro-content {
  font-size: 17px;
  text-align: justify;
  line-height: 1.75;
}
.story-banner-area .story-intro-area .story-intro-box .story-intro-btn-area {
  padding-top: 20px;
  margin: 0 auto;
  text-align: center;
}
.story-banner-area .story-intro-area .story-intro-box .story-intro-btn-area .btn span {
  width: auto;
  display: inline-block;
  position: relative;
  vertical-algin: middle;
}
.story-banner-area .story-intro-area .story-intro-box .story-intro-btn-area .btn span:before {
  content: "";
  display: block;
  left: 0;
  position: absolute;
}
.story-banner-area .story-intro-area .story-intro-box .story-intro-btn-area .btn.pen span {
  padding-left: 40px;
}
.story-banner-area .story-intro-area .story-intro-box .story-intro-btn-area .btn.pen span:before {
  top: 6px;
  width: 30px;
  height: 27px;
  background: url(../img/story/integrated/icon_dream_btn.png) no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 768px) {
  .story-banner-area .story-intro-area .story-intro-box .story-intro-btn-area .btn.pen span:before {
    background: url(../img/story/integrated/icon_dream_btn_2x.png) no-repeat;
    background-size: 100% auto;
  }
}
.story-banner-area .story-intro-area .story-intro-box .story-intro-btn-area .btn.dollar span {
  padding-left: 33px;
}
.story-banner-area .story-intro-area .story-intro-box .story-intro-btn-area .btn.dollar span:before {
  background: url(../img/story/sports/donate_btn_icon_2x.png) no-repeat;
  background-size: 100% auto;
  top: 7px;
  width: 25px;
  height: 26px;
}
@media screen and (min-width: 768px) {
  .story-banner-area .story-intro-area .story-intro-box .story-intro-btn-area .btn.dollar span:before {
    background: url(../img/story/sports/donate_btn_icon.png) no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (min-width: 992px) {
  .story-banner-area .story-intro-area .story-intro-box .story-intro-btn-area .btn {
    min-width: 250px;
  }
}
@media screen and (min-width: 1200px) {
  .story-banner-area .story-intro-area .story-intro-box .story-intro-btn-area .btn {
    min-width: 260px;
  }
}
.story-banner-area .story-intro-area .story-intro-box.has-dream {
  padding: 15px 20px 40px;
}
@media screen and (min-width: 768px) {
  .story-banner-area .story-intro-area .story-intro-box.has-dream {
    padding: 40px 50px 40px;
  }
}
@media screen and (min-width: 992px) {
  .story-banner-area .story-intro-area .story-intro-box.has-dream {
    padding: 40px 50px 85px;
  }
}
.story-banner-area .story-intro-area .story-intro-box.has-dream .story-intro-btn-area {
  text-align: center;
  padding-top: 20px;
  position: relative;
  bottom: 0;
  left: 0;
  transform: none;
}
.story-banner-area .story-intro-area .story-intro-box.has-dream .story-intro-btn-area .btn {
  max-width: 250px;
  min-width: 250px;
  display: block;
  margin: 0 auto;
}
.story-banner-area .story-intro-area .story-intro-box.has-dream .story-intro-btn-area .btn + .btn {
  margin-top: 15px;
}
@media screen and (min-width: 640px) {
  .story-banner-area .story-intro-area .story-intro-box.has-dream .story-intro-btn-area .btn {
    display: inline-block;
  }
  .story-banner-area .story-intro-area .story-intro-box.has-dream .story-intro-btn-area .btn + .btn {
    margin-top: 0;
    margin-left: 20px;
  }
}
@media screen and (min-width: 992px) {
  .story-banner-area .story-intro-area .story-intro-box.has-dream .story-intro-btn-area {
    white-space: nowrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -21px;
  }
  .story-banner-area .story-intro-area .story-intro-box.has-dream .story-intro-btn-area .btn + .btn {
    margin-left: 40px;
  }
}
.story-banner-area .story-intro-area .story-intro-box .social-area {
  position: absolute;
  bottom: -23px;
  right: 10px;
}
@media screen and (min-width: 768px) {
  .story-banner-area .story-intro-area .story-intro-box .social-area {
    right: 50px;
  }
}
.story-banner-area.learn {
  background: url(../img/story/learning/learn_pic.png) 5% -41px no-repeat, url(../img/story/learning/learn_bg_color.png) 5% -41px no-repeat, url(../img/story/learning/learn_bg02.png);
  border-bottom: 1px solid #abc767;
}
@media screen and (min-width: 992px) {
  .story-banner-area.learn {
    background: url(../img/story/learning/learn_line_pic.png) center -57px no-repeat, url(../img/story/learning/learn_bg_color.png) center -57px no-repeat, url(../img/story/learning/learn_bg02.png);
  }
}
.story-banner-area.care {
  background: url(../img/story/care/care_pic.png) 79% -40px no-repeat, url(../img/story/care/care_bg_color.png) 79% -40px no-repeat, url(../img/story/care/care_bg02.png);
  border-bottom: 1px solid #e1c975;
}
@media screen and (min-width: 992px) {
  .story-banner-area.care {
    background: url(../img/story/care/care_line_pic.png) center -57px no-repeat, url(../img/story/care/care_bg_color.png) center -57px no-repeat, url(../img/story/care/care_bg02.png);
  }
}
.story-banner-area.sports {
  background: url(../img/story/sports/sport_pic.png) 24% -64px no-repeat, url(../img/story/sports/sport_bg_color.png) center center no-repeat, url(../img/story/sports/sport_bg02.png);
  border-bottom: 1px solid #7ebdd7;
}
@media screen and (min-width: 992px) {
  .story-banner-area.sports {
    background: url(../img/story/sports/sport_line_pic.png) center -57px no-repeat, url(../img/story/sports/sport_bg_color.png) center -57px no-repeat, url(../img/story/sports/sport_bg02.png);
  }
}
.story-banner-area.art {
  background: url(../img/story/art/art_pic.png) 55% -70px no-repeat, url(../img/story/art/art_bg_color.png) 55% -70px no-repeat, url(../img/story/art/art_bg02.png);
  border-bottom: 1px solid #dfab95;
}
@media screen and (min-width: 768px) {
  .story-banner-area.art {
    background: url(../img/story/art/art_pic.png) 50% -100px no-repeat, url(../img/story/art/art_bg_color.png) 50% -100px no-repeat, url(../img/story/art/art_bg02.png);
  }
}
@media screen and (min-width: 992px) {
  .story-banner-area.art {
    background: url(../img/story/art/art_line_pic.png) center -100px no-repeat, url(../img/story/art/art_bg_color.png) center -100px no-repeat, url(../img/story/art/art_bg02.png);
  }
}
.story-banner-area.music {
  background: url(../img/story/music/music_pic.png) 87% 0 no-repeat, url(../img/story/music/music_bg_color.png) 87% 0 no-repeat, url(../img/story/music/music_bg02.png);
  border-bottom: 1px solid #c4a1d8;
}
@media screen and (min-width: 992px) {
  .story-banner-area.music {
    background: url(../img/story/music/music_line_pic.png) 50% -71px no-repeat, url(../img/story/music/music_bg_color.png) 50% -71px no-repeat, url(../img/story/music/music_bg02.png);
  }
}
.story-banner-area.integrated {
  background: url(../img/story/integrated/integrated_pic.png) 87% 0 no-repeat, url(../img/story/integrated/integrated_bg_color.png) 87% 0 no-repeat, url(../img/story/integrated/integrated_bg02.png);
  border-bottom: 1px solid #e6b89f;
}
@media screen and (min-width: 992px) {
  .story-banner-area.integrated {
    background: url(../img/story/integrated/integrated_line_pic.png) 60% -87px no-repeat, url(../img/story/integrated/integrated_bg_color.png) 60% -200px no-repeat, url(../img/story/integrated/integrated_bg02.png);
  }
}
.story-banner-area.dream {
  background: url(../img/story/dream/dream_line_pic.png) 87% 0 no-repeat, url(../img/story/dream/dream_bg_color.png) 87% 0 no-repeat, url(../img/story/dream/dream_bg02.png);
  border-bottom: 1px solid #96d7ce;
}
.story-banner-area.dream .story-intro-area {
  padding-top: 370px;
}
@media screen and (min-width: 768px) {
  .story-banner-area.dream .story-intro-area .story-intro-box {
    padding: 50px 50px 75px;
  }
}
@media screen and (min-width: 992px) {
  .story-banner-area.dream {
    background: url(../img/story/dream/dream_line_pic.png) 50% -14px no-repeat, url(../img/story/dream/dream_bg_color.png) 50% -14px no-repeat, url(../img/story/dream/dream_bg02.png);
  }
}
.pagelist-banner-area {
  position: relative;
}
.pagelist-banner-area:after {
  content: "";
  width: 100%;
  height: 8px;
  background: url(../img/story/sports/partition_line_sport.png);
  background-size: 200px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.pagelist-banner-area .pagelist-banner {
  padding: 20px 40px 50px;
}
@media screen and (min-width: 768px) {
  .pagelist-banner-area .pagelist-banner {
    padding: 50px 20px 80px;
  }
}
@media screen and (min-width: 992px) {
  .pagelist-banner-area .pagelist-banner {
    padding: 50px 40px 80px;
  }
}
.pagelist-banner-area .pagelist-banner .owl-box {
  position: relative;
}
@media screen and (min-width: 768px) {
  .pagelist-banner-area .pagelist-banner .owl-box {
    padding-left: 260px;
  }
}
@media screen and (min-width: 992px) {
  .pagelist-banner-area .pagelist-banner .owl-box {
    padding-left: 360px;
  }
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-photo {
  max-width: 360px;
  padding: 8px;
  margin: auto;
  border: 1px solid #B5B2AB;
  border-radius: 5px;
  background-color: #fff;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-photo img {
  max-width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-photo img {
    height: 100%;
  }
}
@media screen and (min-width: 768px) {
  .pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-photo {
    width: 260px;
    height: 199px;
    max-width: none;
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media screen and (min-width: 992px) {
  .pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-photo {
    width: 360px;
    height: 274px;
  }
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-photo.learn {
  border: 1px solid #cad9a0;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-photo.care {
  border: 1px solid #ead795;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-photo.sports {
  border: 1px solid #AFD6E5;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-photo.art {
  border: 1px solid #f2d3c5;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-photo.music {
  border: 1px solid #e1c8ef;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content {
  padding-right: 10px;
}
@media screen and (min-width: 768px) {
  .pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content {
    min-height: 205px;
    padding-left: 20px;
  }
}
@media screen and (min-width: 992px) {
  .pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content {
    min-height: 283px;
    padding-left: 50px;
  }
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content .pagelist-banner-name {
  font-size: 16px;
  padding: 10px 0;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content .pagelist-banner-name span {
  display: inline-block;
  padding: 0px 8px 0 2px;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content .pagelist-banner-name span + span {
  position: relative;
  padding: 0px 5px 0 12px;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content .pagelist-banner-name span + span:after {
  content: "";
  position: absolute;
  top: 6px;
  /* 往下縮 2px */
  bottom: 5px;
  /* 往上縮 2px */
  left: 0;
  width: 0;
  border-left: 1px solid #A5A5A5;
  /* 定義邊框寬度和顏色 */
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content .pagelist-banner-slogan {
  display: block;
  margin-bottom: 10px;
  font-size: 22px;
  color: #363636;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content .pagelist-banner-slogan span {
  display: inline-block;
  position: relative;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content .pagelist-banner-slogan span:before {
  content: "";
  display: block;
  width: 0%;
  height: 10px;
  border-radius: 10px;
  position: absolute;
  left: -4px;
  bottom: 0;
  transition: 0.5s;
  z-index: -1;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content .pagelist-banner-slogan:hover span:before {
  width: calc(100% + 8px);
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content .pagelist-banner-gold {
  margin-bottom: 20px;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content .pagelist-banner-gold .goldicon {
  display: inline-block;
  margin-right: 10px;
  padding: 10px 10px 10px 38px;
  position: relative;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content .pagelist-banner-gold .goldicon:before {
  width: 30px;
  height: 30px;
  display: block;
  content: "";
  position: absolute;
  border-radius: 50%;
  top: 5px;
  left: 0;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content .pagelist-banner-gold .goldicon.medal:before {
  background: url(../img/story/sports/icon_experience.png) center center #FFBA38 no-repeat;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content .pagelist-banner-gold .goldicon.star:before {
  background: url(../img/story/sports/icon_talent.png) center center #FFBA38 no-repeat;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content .pagelist-banner-intro {
  padding: 0 5px 15px;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content .pagelist-banner-description {
  padding: 15px 5px 5px;
  border-top: 1px dashed #C6D5D8;
  text-align: justify;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content .pagelist-banner-description .more-btn {
  font-size: 18px;
  font-family: Arial;
  color: #000;
  display: inline-block;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.learn .pagelist-banner-slogan span:before {
  background-color: #a9dc9b;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.learn .pagelist-banner-description {
  border-top-color: #bed586;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.learn .pagelist-banner-description .more-btn {
  color: #90a45f;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.care .pagelist-banner-slogan span:before {
  background-color: #ffdb97;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.care .pagelist-banner-description {
  border-top-color: #ead691;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.care .pagelist-banner-description .more-btn {
  color: #b19b50;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.sports .pagelist-banner-slogan span:before {
  background-color: #a7d6fb;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.sports .pagelist-banner-description {
  border-top-color: #a7d6fb;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.sports .pagelist-banner-description .more-btn {
  color: #6d99bb;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.art .pagelist-banner-slogan span:before {
  background-color: #ffc7c7;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.art .pagelist-banner-description {
  border-top-color: #e7bead;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.art .pagelist-banner-description .more-btn {
  color: #bb8d7a;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.music .pagelist-banner-slogan span:before {
  background-color: #f7caf7;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.music .pagelist-banner-description {
  border-top-color: #d3b7e3;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.music .pagelist-banner-description .more-btn {
  color: #9d7bb1;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.integrated .pagelist-banner-slogan span:before {
  background-color: #ffcd90;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.integrated .pagelist-banner-description {
  border-top-color: #f1c4a1;
}
.pagelist-banner-area .pagelist-banner .owl-box .pagelist-banner-content.integrated .pagelist-banner-description .more-btn {
  color: #d08659;
}
.pagelist-banner-area .pagelist-banner .owl-nav > button {
  width: 26px;
  height: 32px;
  position: absolute;
  top: 50%;
  margin-top: -40px;
  border: 0;
}
.pagelist-banner-area .pagelist-banner .owl-nav > button.owl-prev {
  color: transparent;
  background: url(../img/story/sports/turn_btn_sport_left_2x.png) no-repeat;
  background-size: 26px;
  left: -10px;
}
@media screen and (min-width: 768px) {
  .pagelist-banner-area .pagelist-banner .owl-nav > button.owl-prev {
    background: url(../img/story/sports/turn_btn_sport_left.png) no-repeat;
  }
}
@media screen and (min-width: 992px) {
  .pagelist-banner-area .pagelist-banner .owl-nav > button.owl-prev {
    left: -20px;
  }
}
.pagelist-banner-area .pagelist-banner .owl-nav > button.owl-next {
  color: transparent;
  background: url(../img/story/sports/turn_btn_sport_right_2x.png) no-repeat;
  background-size: 26px;
  right: -10px;
}
@media screen and (min-width: 768px) {
  .pagelist-banner-area .pagelist-banner .owl-nav > button.owl-next {
    background: url(../img/story/sports/turn_btn_sport_right.png) no-repeat;
  }
}
@media screen and (min-width: 992px) {
  .pagelist-banner-area .pagelist-banner .owl-nav > button.owl-next {
    right: -20px;
  }
}

.sports .pagelist-banner-area:after {
  background: url(../img/partner/partition_line_sport_2x.png);
  background-size: 200px;
}
@media screen and (min-width: 768px) {
  .sports .pagelist-banner-area:after {
    background: url(../img/partner/partition_line_sport.png);
    background-size: 200px;
  }
}

.art .pagelist-banner-area:after {
  background: url(../img/partner/partition_line_art_2x.png);
  background-size: 200px;
}
@media screen and (min-width: 768px) {
  .art .pagelist-banner-area:after {
    background: url(../img/partner/partition_line_art.png);
    background-size: 200px;
  }
}

.care .pagelist-banner-area:after {
  background: url(../img/partner/partition_line_care_2x.png);
  background-size: 200px;
}
@media screen and (min-width: 768px) {
  .care .pagelist-banner-area:after {
    background: url(../img/partner/partition_line_care.png);
    background-size: 200px;
  }
}

.music .pagelist-banner-area:after {
  background: url(../img/partner/partition_line_music_2x.png);
  background-size: 200px;
}
@media screen and (min-width: 768px) {
  .music .pagelist-banner-area:after {
    background: url(../img/partner/partition_line_music.png);
    background-size: 200px;
  }
}

.learn .pagelist-banner-area:after {
  background: url(../img/partner/partition_line_learn_2x.png);
  background-size: 200px;
}
@media screen and (min-width: 768px) {
  .learn .pagelist-banner-area:after {
    background: url(../img/partner/partition_line_learn.png);
    background-size: 200px;
  }
}

.integrated .pagelist-banner-area:after {
  background: url(../img/partner/partition_line_integrated_2x.png);
  background-size: 200px;
}
@media screen and (min-width: 768px) {
  .integrated .pagelist-banner-area:after {
    background: url(../img/partner/partition_line_integrated.png);
    background-size: 200px;
  }
}

.time-line {
  margin-top: 75px;
}
.time-line .time-select:after {
  width: 330px;
  height: 155px;
  display: block;
  content: "";
  position: absolute;
  top: 682px;
  right: 47px;
  background: url(../img/story/sports/progress_icon_sport.png) no-repeat;
}

.marquee > div:after {
  content: "";
  display: block;
  clear: both;
}

.box-label {
  position: relative;
  display: block;
  padding-left: 35px;
}
.box-label:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  left: 0;
  top: 2px;
}
.box-label.birth:after {
  background: url("../img/dream/icon_birthday_2x.png") center no-repeat;
  background-size: 20px auto;
}
.box-label.name:after {
  background: url("../img/dream/icon_name_2x.png") center no-repeat;
  background-size: 20px auto;
}

.works-list-area {
  margin-top: 25px;
}
.works-list-area .works-box + .works-box {
  margin-top: 40px;
}
.works-list-area .works-box .box-head {
  position: relative;
}
.works-list-area .works-box .box-head .box-label + .box-label {
  margin-top: 15px;
}
.works-list-area .works-box .box-body {
  padding: 30px 50px 30px 50px;
  position: relative;
}
.works-list-area .works-box.art .box-head {
  padding: 25px 25px 30px 120px;
  background: url("../img/dream/art_pic01_2x.png") center left 24.69px no-repeat, url("../img/dream/art_bg.jpg") center repeat;
  background-size: 70.62px 83.16px, auto auto;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
@media screen and (min-width: 400px) {
  .works-list-area .works-box.art .box-head {
    padding: 25px 25px 30px 180px;
    background: url("../img/dream/art_pic01_2x.png") center left 36.5px no-repeat, url("../img/dream/art_bg.jpg") center repeat;
    background-size: 107px 126px, auto auto;
  }
}
.works-list-area .works-box.art .box-head:before {
  content: "";
  display: block;
  width: 13px;
  height: 26px;
  left: 0;
  bottom: -13px;
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
  z-index: 1;
  background: #D4F7F3;
  position: absolute;
}
.works-list-area .works-box.art .box-head:after {
  content: "";
  display: none;
  position: absolute;
  width: 107px;
  height: 126px;
  background: url("../img/dream/art_pic01_2x.png") center no-repeat;
  background-size: 100% auto;
  z-index: 3;
}
.works-list-area .works-box.art .box-head .box-label:after {
  background-color: #f9937b !important;
}
.works-list-area .works-box.art .box-head .box-label.art:after {
  background: url("../img/story/type_art.png") center no-repeat;
  background-size: 100% auto;
}
.works-list-area .works-box.art .box-body {
  background-color: #efe6db;
  border: 3px dashed #e6cab5;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-top: none;
}
.works-list-area .works-box.art .box-body:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  height: 14px;
  width: 100%;
  right: 0;
  top: -7px;
  background: url("../img/dream/separate_art02_2x.png") left -16px center repeat-x;
  background-size: auto 14px;
}
.works-list-area .works-box.art .box-body:before {
  content: "";
  display: block;
  position: absolute;
  width: 62px;
  height: 42px;
  background: url("../img/dream/art_pic02_2x.png") center no-repeat;
  background-size: 100% auto;
  z-index: 2;
  right: -30px;
  top: -21px;
}
@media screen and (min-width: 768px) {
  .works-list-area .works-box.art .box-head {
    padding: 28px 30px 28px 18px;
    border-radius: 0;
    border-bottom-left-radius: 12px;
    border-top-left-radius: 12px;
    background: url("../img/dream/art_bg.jpg") center repeat;
  }
  .works-list-area .works-box.art .box-head:after {
    display: block;
    right: -53.5px;
    bottom: -30px;
  }
  .works-list-area .works-box.art .box-head:before {
    width: 26px;
    height: 13px;
    top: 0;
    left: auto;
    left: unset;
    right: -13px;
    border-radius: 0;
    border-bottom-right-radius: 13px;
    border-bottom-left-radius: 13px;
    z-index: 2;
  }
  .works-list-area .works-box.art .box-body {
    border: 3px dashed #e6cab5;
    border-radius: 0;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
    border-left: none;
  }
  .works-list-area .works-box.art .box-body:after {
    width: 14px;
    height: 100%;
    right: auto;
    right: unset;
    left: -7px;
    bottom: 0;
    background: url("../img/dream/separate_art01_2x.png") center top -16px repeat-y;
    background-size: 14px auto;
  }
  .works-list-area .works-box.art .box-body:before {
    top: auto;
    top: unset;
    right: -30px;
    bottom: -18px;
  }
}
.works-list-area .works-box.sport .box-head {
  padding: 25px 25px 30px 120px;
  background: url("../img/dream/sport_pic01_2x.png") center left 15.45px no-repeat, url("../img/dream/sport_bg.jpg") center repeat;
  background-size: 89.1px 83.16px, auto auto;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
@media screen and (min-width: 400px) {
  .works-list-area .works-box.sport .box-head {
    padding: 25px 25px 30px 180px;
    background: url("../img/dream/sport_pic01_2x.png") center left 22.5px no-repeat, url("../img/dream/sport_bg.jpg") center repeat;
    background-size: 135px 126px, auto auto;
  }
}
.works-list-area .works-box.sport .box-head:before {
  content: "";
  display: block;
  width: 13px;
  height: 26px;
  left: 0;
  bottom: -13px;
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
  z-index: 1;
  background: #D4F7F3;
  position: absolute;
}
.works-list-area .works-box.sport .box-head:after {
  content: "";
  display: none;
  position: absolute;
  width: 135px;
  height: 126px;
  background: url("../img/dream/sport_pic01_2x.png") center no-repeat;
  background-size: 100% auto;
  z-index: 3;
}
.works-list-area .works-box.sport .box-head .box-label:after {
  background-color: #599fd2 !important;
}
.works-list-area .works-box.sport .box-head .box-label.sport:after {
  background: url("../img/story/type_sport.png") center no-repeat;
  background-size: 100% auto;
}
.works-list-area .works-box.sport .box-body {
  background-color: #bfebf4;
  border: 3px dashed #a6d5e0;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-top: none;
}
.works-list-area .works-box.sport .box-body:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  height: 14px;
  width: 100%;
  right: 0;
  top: -7px;
  background: url("../img/dream/separate_sport02_2x.png") left -16px center repeat-x;
  background-size: auto 14px;
}
.works-list-area .works-box.sport .box-body:before {
  content: "";
  display: block;
  position: absolute;
  width: 75px;
  height: 72px;
  background: url("../img/dream/sport_pic02_2x.png") center no-repeat;
  background-size: 100% auto;
  z-index: 2;
  right: -30px;
  top: -36px;
}
@media screen and (min-width: 768px) {
  .works-list-area .works-box.sport .box-head {
    padding: 28px 30px 28px 18px;
    border-radius: 0;
    border-bottom-left-radius: 12px;
    border-top-left-radius: 12px;
    background: url("../img/dream/sport_bg.jpg") center repeat;
  }
  .works-list-area .works-box.sport .box-head:after {
    display: block;
    right: -67.5px;
    bottom: -30px;
  }
  .works-list-area .works-box.sport .box-head:before {
    width: 26px;
    height: 13px;
    top: 0;
    left: auto;
    left: unset;
    right: -13px;
    border-radius: 0;
    border-bottom-right-radius: 13px;
    border-bottom-left-radius: 13px;
    z-index: 2;
  }
  .works-list-area .works-box.sport .box-body {
    border: 3px dashed #a6d5e0;
    border-radius: 0;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
    border-left: none;
  }
  .works-list-area .works-box.sport .box-body:after {
    width: 14px;
    height: 100%;
    right: auto;
    right: unset;
    left: -7px;
    bottom: 0;
    background: url("../img/dream/separate_sport01_2x.png") center top -16px repeat-y;
    background-size: 14px auto;
  }
  .works-list-area .works-box.sport .box-body:before {
    top: auto;
    top: unset;
    right: -30px;
    bottom: -18px;
  }
}
.works-list-area .works-box.music .box-head {
  padding: 25px 25px 30px 120px;
  background: url("../img/dream/music_pic01_2x.png") center left 26.34px no-repeat, url("../img/dream/music_bg.jpg") center repeat;
  background-size: 67.32px 77.88px, auto auto;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
@media screen and (min-width: 400px) {
  .works-list-area .works-box.music .box-head {
    padding: 25px 25px 30px 180px;
    background: url("../img/dream/music_pic01_2x.png") center left 39px no-repeat, url("../img/dream/music_bg.jpg") center repeat;
    background-size: 102px 118px, auto auto;
  }
}
.works-list-area .works-box.music .box-head:before {
  content: "";
  display: block;
  width: 13px;
  height: 26px;
  left: 0;
  bottom: -13px;
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
  z-index: 1;
  background: #D4F7F3;
  position: absolute;
}
.works-list-area .works-box.music .box-head:after {
  content: "";
  display: none;
  position: absolute;
  width: 102px;
  height: 118px;
  background: url("../img/dream/music_pic01_2x.png") center no-repeat;
  background-size: 100% auto;
  z-index: 3;
}
.works-list-area .works-box.music .box-head .box-label:after {
  background-color: #b37fd1 !important;
}
.works-list-area .works-box.music .box-head .box-label.music:after {
  background: url("../img/story/type_music.png") center no-repeat;
  background-size: 100% auto;
}
.works-list-area .works-box.music .box-body {
  background-color: #e2e4f3;
  border: 3px dashed #c7c6e1;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-top: none;
}
.works-list-area .works-box.music .box-body:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  height: 14px;
  width: 100%;
  right: 0;
  top: -7px;
  background: url("../img/dream/separate_music02_2x.png") left -16px center repeat-x;
  background-size: auto 14px;
}
.works-list-area .works-box.music .box-body:before {
  content: "";
  display: block;
  position: absolute;
  width: 70px;
  height: 60px;
  background: url("../img/dream/music_pic02_2x.png") center no-repeat;
  background-size: 100% auto;
  z-index: 2;
  right: -30px;
  top: -30px;
}
@media screen and (min-width: 768px) {
  .works-list-area .works-box.music .box-head {
    padding: 28px 30px 28px 18px;
    border-radius: 0;
    border-bottom-left-radius: 12px;
    border-top-left-radius: 12px;
    background: url("../img/dream/music_bg.jpg") center repeat;
  }
  .works-list-area .works-box.music .box-head:after {
    display: block;
    right: -51px;
    bottom: -30px;
  }
  .works-list-area .works-box.music .box-head:before {
    width: 26px;
    height: 13px;
    top: 0;
    left: auto;
    left: unset;
    right: -13px;
    border-radius: 0;
    border-bottom-right-radius: 13px;
    border-bottom-left-radius: 13px;
    z-index: 2;
  }
  .works-list-area .works-box.music .box-body {
    border: 3px dashed #c7c6e1;
    border-radius: 0;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
    border-left: none;
  }
  .works-list-area .works-box.music .box-body:after {
    width: 14px;
    height: 100%;
    right: auto;
    right: unset;
    left: -7px;
    bottom: 0;
    background: url("../img/dream/separate_music01_2x.png") center top -16px repeat-y;
    background-size: 14px auto;
  }
  .works-list-area .works-box.music .box-body:before {
    top: auto;
    top: unset;
    right: -30px;
    bottom: -18px;
  }
}
.works-list-area .works-box.integrated .box-head {
  padding: 25px 25px 30px 120px;
  background: url("../img/dream/integrated_pic01_2x.png") center left 11.82px no-repeat, url("../img/dream/integrated_bg.jpg") center repeat;
  background-size: 96.36px 54.78px, auto auto;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
@media screen and (min-width: 400px) {
  .works-list-area .works-box.integrated .box-head {
    padding: 25px 25px 30px 180px;
    background: url("../img/dream/integrated_pic01_2x.png") center left 17px no-repeat, url("../img/dream/integrated_bg.jpg") center repeat;
    background-size: 146px 83px, auto auto;
  }
}
.works-list-area .works-box.integrated .box-head:before {
  content: "";
  display: block;
  width: 13px;
  height: 26px;
  left: 0;
  bottom: -13px;
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
  z-index: 1;
  background: #D4F7F3;
  position: absolute;
}
.works-list-area .works-box.integrated .box-head:after {
  content: "";
  display: none;
  position: absolute;
  width: 146px;
  height: 83px;
  background: url("../img/dream/integrated_pic01_2x.png") center no-repeat;
  background-size: 100% auto;
  z-index: 3;
}
.works-list-area .works-box.integrated .box-head .box-label:after {
  background-color: #ed9956 !important;
}
.works-list-area .works-box.integrated .box-head .box-label.integrated:after {
  background: url("../img/story/type_integrated.png") center no-repeat;
  background-size: 100% auto;
}
.works-list-area .works-box.integrated .box-body {
  background-color: #e8e9d8;
  border: 3px dashed #dccebd;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-top: none;
}
.works-list-area .works-box.integrated .box-body:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  height: 14px;
  width: 100%;
  right: 0;
  top: -7px;
  background: url("../img/dream/separate_integrated02_2x.png") left -16px center repeat-x;
  background-size: auto 14px;
}
.works-list-area .works-box.integrated .box-body:before {
  content: "";
  display: block;
  position: absolute;
  width: 83px;
  height: 77px;
  background: url("../img/dream/integrated_pic02_2x.png") center no-repeat;
  background-size: 100% auto;
  z-index: 2;
  right: -30px;
  top: -38.5px;
}
@media screen and (min-width: 768px) {
  .works-list-area .works-box.integrated .box-head {
    padding: 28px 30px 28px 18px;
    border-radius: 0;
    border-bottom-left-radius: 12px;
    border-top-left-radius: 12px;
    background: url("../img/dream/integrated_bg.jpg") center repeat;
  }
  .works-list-area .works-box.integrated .box-head:after {
    display: block;
    right: -73px;
    bottom: -30px;
  }
  .works-list-area .works-box.integrated .box-head:before {
    width: 26px;
    height: 13px;
    top: 0;
    left: auto;
    left: unset;
    right: -13px;
    border-radius: 0;
    border-bottom-right-radius: 13px;
    border-bottom-left-radius: 13px;
    z-index: 2;
  }
  .works-list-area .works-box.integrated .box-body {
    border: 3px dashed #dccebd;
    border-radius: 0;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
    border-left: none;
  }
  .works-list-area .works-box.integrated .box-body:after {
    width: 14px;
    height: 100%;
    right: auto;
    right: unset;
    left: -7px;
    bottom: 0;
    background: url("../img/dream/separate_integrated01_2x.png") center top -16px repeat-y;
    background-size: 14px auto;
  }
  .works-list-area .works-box.integrated .box-body:before {
    top: auto;
    top: unset;
    right: -30px;
    bottom: -18px;
  }
}
@media screen and (min-width: 768px) {
  .works-list-area .works-box {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .works-list-area .works-box .box-head, .works-list-area .works-box .box-body {
    display: table-cell;
    vertical-align: top;
  }
  .works-list-area .works-box .box-head {
    width: 179px;
  }
  .works-list-area .works-box .box-body {
    padding: 30px 60px;
  }
  .works-list-area .works-box + .works-box {
    margin-top: 60px;
  }
}
@media screen and (min-width: 992px) {
  .works-list-area .works-box {
    min-height: 261px;
  }
}
.works-list-area .works-carousel {
  webkit-backface-visibility: hidden;
}
.works-list-area .works-carousel .owl-controls {
  height: 0;
  margin: 0;
}
.works-list-area .works-carousel .owl-controls .owl-nav [class^=owl-] {
  margin: 0;
  position: absolute;
  top: 50%;
  margin-top: -13px;
  width: 10px;
  height: 26px;
  z-index: 4;
}
.works-list-area .works-carousel .owl-controls .owl-nav .owl-next {
  right: -30px;
  background: url("../img/dream/dream_btn_right_2x.png") center no-repeat;
  background-size: 100% auto;
}
.works-list-area .works-carousel .owl-controls .owl-nav .owl-prev {
  left: -30px;
  background: url("../img/dream/dream_btn_left_2x.png") center no-repeat;
  background-size: 100% auto;
}
.works-list-area .works-carousel .owl-box {
  border-radius: 18px;
  border: 5px solid #FFF;
  webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  overflow: hidden;
  position: relative;
  transform: translateZ(0px);
}
.works-list-area .works-carousel .owl-box .media-box {
  width: 100%;
}
.works-list-area .works-carousel .owl-box.no-border {
  border-radius: 0;
  border: none;
}
.works-list-area .works-carousel .owl-box.no-border .media-box {
  padding-bottom: calc(75% - 24px);
}
@media screen and (max-width: 767px) {
  .works-list-area .works-carousel .owl-box.no-border .media-box {
    padding-bottom: 0;
  }
}

.work-detail-box.integrated .box-body .media-list-area .media-box, .work-detail-box.music .box-body .media-list-area .media-box, .work-detail-box.sport .box-body .media-list-area .media-box, .work-detail-box.art .box-body .media-list-area .media-box, .works-list-area .works-carousel .owl-box .media-box {
  padding-bottom: 75%;
  position: relative;
  border-radius: 18px;
}
.work-detail-box.integrated .box-body .media-list-area .media-box img, .work-detail-box.music .box-body .media-list-area .media-box img, .work-detail-box.sport .box-body .media-list-area .media-box img, .work-detail-box.art .box-body .media-list-area .media-box img, .works-list-area .works-carousel .owl-box .media-box img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.work-detail-box.integrated .box-body .media-list-area .media-box iframe, .work-detail-box.music .box-body .media-list-area .media-box iframe, .work-detail-box.sport .box-body .media-list-area .media-box iframe, .work-detail-box.art .box-body .media-list-area .media-box iframe, .works-list-area .works-carousel .owl-box .media-box iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 18px;
}

.work-detail-box .box-label + .box-label {
  margin-top: 15px;
}
.work-detail-box.art .box-head-bg {
  background: url("../img/dream/dream_bg02.png") center repeat;
  background-size: 200px auto, 100px auto;
  position: relative;
}
.work-detail-box.art .box-head-bg:after {
  content: "";
  display: block;
  position: absolute;
  height: 8px;
  width: 100%;
  background: url("../img/dream/partition_line_dream_2x.png") bottom center repeat-x;
  background-size: auto 100%;
  bottom: -5px;
  left: 0;
}
.work-detail-box.art .box-head {
  max-width: 970px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 25px 30px 160px;
  background: url("../img/dream/art_qrcode_pic_2x.png") bottom 17.4px left 26.9px no-repeat, url("../img/dream/pic_bg.png") bottom 17.4px left 26.9px no-repeat;
  background-size: 106.2px 85.2px, 98.4px auto;
}
@media screen and (min-width: 540px) {
  .work-detail-box.art .box-head {
    padding: 65px 25px 60px 265px;
    background: url("../img/dream/art_qrcode_pic_2x.png") bottom 24px left 56.5px no-repeat, url("../img/dream/pic_bg.png") bottom 24px left 56.5px no-repeat;
    background-size: 177px 142px, 164px auto;
  }
}
.work-detail-box.art .box-head .box-label:after {
  background-color: #f9937b !important;
}
.work-detail-box.art .box-head .box-label.art:after {
  background: url("../img/story/type_art.png") center no-repeat;
  background-size: 100% auto;
}
.work-detail-box.art .box-body {
  padding: 0 20px;
}
.work-detail-box.art .box-body .media-list-area {
  margin-left: -10px;
  margin-right: -10px;
  margin-top: 30px;
}
.work-detail-box.art .box-body .media-list-area .media-list {
  display: inline-block;
  float: left;
  width: 50%;
}
.work-detail-box.art .box-body .media-list-area .media-list .media-outer-box {
  padding: 0 10px;
}
.work-detail-box.art .box-body .media-list-area .media-list + .media-list {
  margin-bottom: 25px;
}
.work-detail-box.art .box-body .media-list-area .media-border-box {
  border-radius: 20px;
  border: 5px solid #FFF;
  webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  overflow: hidden;
  position: relative;
  transform: translateZ(0px);
}
@media screen and (min-width: 600px) {
  .work-detail-box.art .box-body {
    padding: 0 70px;
  }
  .work-detail-box.art .box-body .media-list-area {
    margin-left: -35px;
    margin-right: -35px;
    margin-top: 45px;
  }
  .work-detail-box.art .box-body .media-list-area .media-list .media-outer-box {
    padding: 0 35px;
  }
  .work-detail-box.art .box-body .media-list-area .media-list + .media-list {
    margin-bottom: 45px;
  }
}
@media screen and (min-width: 768px) {
  .work-detail-box.art .box-body {
    max-width: 970px;
    margin-left: auto;
    margin-right: auto;
  }
  .work-detail-box.art .box-body .media-list-area .media-list {
    width: 33.33%;
  }
}
.work-detail-box.sport .box-head-bg {
  background: url("../img/dream/dream_bg02.png") center repeat;
  background-size: 200px auto, 100px auto;
  position: relative;
}
.work-detail-box.sport .box-head-bg:after {
  content: "";
  display: block;
  position: absolute;
  height: 8px;
  width: 100%;
  background: url("../img/dream/partition_line_dream_2x.png") bottom center repeat-x;
  background-size: auto 100%;
  bottom: -5px;
  left: 0;
}
.work-detail-box.sport .box-head {
  max-width: 970px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 25px 30px 160px;
  background: url("../img/dream/sport_qrcode_pic_2x.png") bottom 22.2px left 39.5px no-repeat, url("../img/dream/pic_bg.png") bottom 22.2px left 39.5px no-repeat;
  background-size: 81px 75.6px, 98.4px auto;
}
@media screen and (min-width: 540px) {
  .work-detail-box.sport .box-head {
    padding: 65px 25px 60px 265px;
    background: url("../img/dream/sport_qrcode_pic_2x.png") bottom 32px left 77.5px no-repeat, url("../img/dream/pic_bg.png") bottom 32px left 77.5px no-repeat;
    background-size: 135px 126px, 164px auto;
  }
}
.work-detail-box.sport .box-head .box-label:after {
  background-color: #599fd2 !important;
}
.work-detail-box.sport .box-head .box-label.sport:after {
  background: url("../img/story/type_sport.png") center no-repeat;
  background-size: 100% auto;
}
.work-detail-box.sport .box-body {
  padding: 0 20px;
}
.work-detail-box.sport .box-body .media-list-area {
  margin-left: -10px;
  margin-right: -10px;
  margin-top: 30px;
}
.work-detail-box.sport .box-body .media-list-area .media-list {
  display: inline-block;
  float: left;
  width: 50%;
}
.work-detail-box.sport .box-body .media-list-area .media-list .media-outer-box {
  padding: 0 10px;
}
.work-detail-box.sport .box-body .media-list-area .media-list + .media-list {
  margin-bottom: 25px;
}
.work-detail-box.sport .box-body .media-list-area .media-border-box {
  border-radius: 20px;
  border: 5px solid #FFF;
  webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  overflow: hidden;
  position: relative;
  transform: translateZ(0px);
}
@media screen and (min-width: 600px) {
  .work-detail-box.sport .box-body {
    padding: 0 70px;
  }
  .work-detail-box.sport .box-body .media-list-area {
    margin-left: -35px;
    margin-right: -35px;
    margin-top: 45px;
  }
  .work-detail-box.sport .box-body .media-list-area .media-list .media-outer-box {
    padding: 0 35px;
  }
  .work-detail-box.sport .box-body .media-list-area .media-list + .media-list {
    margin-bottom: 45px;
  }
}
@media screen and (min-width: 768px) {
  .work-detail-box.sport .box-body {
    max-width: 970px;
    margin-left: auto;
    margin-right: auto;
  }
  .work-detail-box.sport .box-body .media-list-area .media-list {
    width: 33.33%;
  }
}
.work-detail-box.music .box-head-bg {
  background: url("../img/dream/dream_bg02.png") center repeat;
  background-size: 200px auto, 100px auto;
  position: relative;
}
.work-detail-box.music .box-head-bg:after {
  content: "";
  display: block;
  position: absolute;
  height: 8px;
  width: 100%;
  background: url("../img/dream/partition_line_dream_2x.png") bottom center repeat-x;
  background-size: auto 100%;
  bottom: -5px;
  left: 0;
}
.work-detail-box.music .box-head {
  max-width: 970px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 25px 30px 160px;
  background: url("../img/dream/music_qrcode_pic_2x.png") bottom 24.6px left 38px no-repeat, url("../img/dream/pic_bg.png") bottom 24.6px left 38px no-repeat;
  background-size: 84px 70.8px, 98.4px auto;
}
@media screen and (min-width: 540px) {
  .work-detail-box.music .box-head {
    padding: 65px 25px 60px 265px;
    background: url("../img/dream/music_qrcode_pic_2x.png") bottom 36px left 75px no-repeat, url("../img/dream/pic_bg.png") bottom 36px left 75px no-repeat;
    background-size: 140px 118px, 164px auto;
  }
}
.work-detail-box.music .box-head .box-label:after {
  background-color: #b37fd1 !important;
}
.work-detail-box.music .box-head .box-label.music:after {
  background: url("../img/story/type_music.png") center no-repeat;
  background-size: 100% auto;
}
.work-detail-box.music .box-body {
  padding: 0 20px;
}
.work-detail-box.music .box-body .media-list-area {
  margin-left: -10px;
  margin-right: -10px;
  margin-top: 30px;
}
.work-detail-box.music .box-body .media-list-area .media-list {
  display: inline-block;
  float: left;
  width: 50%;
}
.work-detail-box.music .box-body .media-list-area .media-list .media-outer-box {
  padding: 0 10px;
}
.work-detail-box.music .box-body .media-list-area .media-list + .media-list {
  margin-bottom: 25px;
}
.work-detail-box.music .box-body .media-list-area .media-border-box {
  border-radius: 20px;
  border: 5px solid #FFF;
  webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  overflow: hidden;
  position: relative;
  transform: translateZ(0px);
}
@media screen and (min-width: 600px) {
  .work-detail-box.music .box-body {
    padding: 0 70px;
  }
  .work-detail-box.music .box-body .media-list-area {
    margin-left: -35px;
    margin-right: -35px;
    margin-top: 45px;
  }
  .work-detail-box.music .box-body .media-list-area .media-list .media-outer-box {
    padding: 0 35px;
  }
  .work-detail-box.music .box-body .media-list-area .media-list + .media-list {
    margin-bottom: 45px;
  }
}
@media screen and (min-width: 768px) {
  .work-detail-box.music .box-body {
    max-width: 970px;
    margin-left: auto;
    margin-right: auto;
  }
  .work-detail-box.music .box-body .media-list-area .media-list {
    width: 33.33%;
  }
}
.work-detail-box.integrated .box-head-bg {
  background: url("../img/dream/dream_bg02.png") center repeat;
  background-size: 200px auto, 100px auto;
  position: relative;
}
.work-detail-box.integrated .box-head-bg:after {
  content: "";
  display: block;
  position: absolute;
  height: 8px;
  width: 100%;
  background: url("../img/dream/partition_line_dream_2x.png") bottom center repeat-x;
  background-size: auto 100%;
  bottom: -5px;
  left: 0;
}
.work-detail-box.integrated .box-head {
  max-width: 970px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 25px 30px 160px;
  background: url("../img/dream/integrated_qrcode_pic_2x.png") bottom 33px left 32px no-repeat, url("../img/dream/pic_bg.png") bottom 33px left 32px no-repeat;
  background-size: 96px 54px, 98.4px auto;
}
@media screen and (min-width: 540px) {
  .work-detail-box.integrated .box-head {
    padding: 65px 25px 60px 265px;
    background: url("../img/dream/integrated_qrcode_pic_2x.png") bottom 50px left 65px no-repeat, url("../img/dream/pic_bg.png") bottom 50px left 65px no-repeat;
    background-size: 160px 90px, 164px auto;
  }
}
.work-detail-box.integrated .box-head .box-label:after {
  background-color: #ed9956 !important;
}
.work-detail-box.integrated .box-head .box-label.integrated:after {
  background: url("../img/story/type_integrated.png") center no-repeat;
  background-size: 100% auto;
}
.work-detail-box.integrated .box-body {
  padding: 0 20px;
}
.work-detail-box.integrated .box-body .media-list-area {
  margin-left: -10px;
  margin-right: -10px;
  margin-top: 30px;
}
.work-detail-box.integrated .box-body .media-list-area .media-list {
  display: inline-block;
  float: left;
  width: 50%;
}
.work-detail-box.integrated .box-body .media-list-area .media-list .media-outer-box {
  padding: 0 10px;
}
.work-detail-box.integrated .box-body .media-list-area .media-list + .media-list {
  margin-bottom: 25px;
}
.work-detail-box.integrated .box-body .media-list-area .media-border-box {
  border-radius: 20px;
  border: 5px solid #FFF;
  webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  overflow: hidden;
  position: relative;
  transform: translateZ(0px);
}
@media screen and (min-width: 600px) {
  .work-detail-box.integrated .box-body {
    padding: 0 70px;
  }
  .work-detail-box.integrated .box-body .media-list-area {
    margin-left: -35px;
    margin-right: -35px;
    margin-top: 45px;
  }
  .work-detail-box.integrated .box-body .media-list-area .media-list .media-outer-box {
    padding: 0 35px;
  }
  .work-detail-box.integrated .box-body .media-list-area .media-list + .media-list {
    margin-bottom: 45px;
  }
}
@media screen and (min-width: 768px) {
  .work-detail-box.integrated .box-body {
    max-width: 970px;
    margin-left: auto;
    margin-right: auto;
  }
  .work-detail-box.integrated .box-body .media-list-area .media-list {
    width: 33.33%;
  }
}

.donate-thank-page {
  padding: 30px 0;
  position: relative;
}
@media screen and (min-width: 992px) {
  .donate-thank-page {
    padding: 80px 0 0 0;
    margin-bottom: 40px;
  }
}
.donate-thank-page .left-area {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .donate-thank-page .left-area {
    width: 570px;
    margin: auto;
  }
}
@media screen and (min-width: 992px) {
  .donate-thank-page .left-area {
    margin: 0;
  }
}
.donate-thank-page .left-area .thank-page-title {
  font-size: 18px;
  font-weight: bold;
  color: #f8767a;
  margin-bottom: 28px;
}
.donate-thank-page .left-area .thank-page-title span {
  display: inline-block;
  vertical-align: middle;
}
.donate-thank-page .left-area .thank-page-title img {
  display: none;
}
@media screen and (min-width: 500px) {
  .donate-thank-page .left-area .thank-page-title img {
    display: inline-block;
    vertical-align: middle;
  }
}
.donate-thank-page .left-area .thank-page-content {
  font-size: 16px;
  color: #363636;
  text-align: center;
}
.donate-thank-page .left-area .share-btn-area {
  margin-top: 25px;
}
@media screen and (min-width: 992px) {
  .donate-thank-page .left-area .share-btn-area {
    margin-top: 50px;
  }
}
.donate-thank-page .left-area .share-btn-area .share-btn {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  width: 150px;
  border-radius: 40px;
  padding: 7px 0;
  height: 40px;
  text-align: center;
  margin: auto;
}
@media screen and (min-width: 600px) {
  .donate-thank-page .left-area .share-btn-area .share-btn {
    display: inline-block;
    float: left;
    margin: 0;
    width: calc((100% - 40px) / 3);
  }
}
@media screen and (min-width: 768px) {
  .donate-thank-page .left-area .share-btn-area .share-btn {
    display: inline-block;
    float: left;
    margin: 0;
    width: calc((100% - 60px) / 3);
  }
}
.donate-thank-page .left-area .share-btn-area .share-btn + .share-btn {
  margin-top: 15px;
}
@media screen and (min-width: 600px) {
  .donate-thank-page .left-area .share-btn-area .share-btn + .share-btn {
    margin-top: 0;
    margin-left: 20px;
  }
}
@media screen and (min-width: 768px) {
  .donate-thank-page .left-area .share-btn-area .share-btn + .share-btn {
    margin-top: 0;
    margin-left: 30px;
  }
}
.donate-thank-page .left-area .share-btn-area .share-btn.fb {
  background-color: #1877f2;
}
.donate-thank-page .left-area .share-btn-area .share-btn.line {
  background-color: #00b900;
}
.donate-thank-page .left-area .share-btn-area .share-btn.ig {
  background: url("../img/page/thank_donate/btn_ig_bg_2x.jpg") center no-repeat;
  background-size: 338px 90px;
}
.donate-thank-page .img-area {
  width: 593px;
  max-width: 100%;
  height: auto;
  margin: auto;
  margin-bottom: 40px;
  text-align: center;
}
.donate-thank-page .img-area img {
  max-width: 100%;
}
@media screen and (min-width: 992px) {
  .donate-thank-page .img-area {
    margin-bottom: 0;
    position: absolute;
    bottom: -35px;
    right: -85px;
    transform: scale(0.8);
  }
}
@media screen and (min-width: 1200px) {
  .donate-thank-page .img-area {
    transform: scale(0.9);
    bottom: -35px;
    right: 4px;
  }
}

/*
* @Author: ansen
* @Date:   2018-07-24 14:35:01
* @Last Modified by:   ansen
* @Last Modified time: 2018-08-13 10:08:09
*/
.page_list .pagination {
  width: 100%;
  text-align: center;
  margin: 50px 0 20px;
}
.page_list .pagination > li {
  display: inline-block;
}
.page_list .pagination a, .page_list .pagination span {
  display: inline-block;
  font-family: Arial;
  font-size: 18px;
  width: 40px;
  height: 39px;
  background: none;
  border: none;
  padding: 0;
  margin: 0 3px;
  text-align: center;
  line-height: 39px;
  color: #363636;
}
.page_list .pagination a.selected, .page_list .pagination a:hover, .page_list .pagination span.selected, .page_list .pagination span:hover {
  background: url(../img/news/page_bg.png) no-repeat;
  color: #fff;
}

.news-list-area .news-list {
  visibility: hidden;
  position: relative;
}
@media screen and (min-width: 480px) {
  .news-list-area .news-list {
    padding-left: 200px;
  }
}
@media screen and (min-width: 560px) {
  .news-list-area .news-list {
    padding-left: 270px;
  }
}
.news-list-area .news-list .news-img {
  margin-bottom: 5px;
  padding: 5px;
  background: #FEFEFE;
  border: 1px solid #E1E2E2;
  border-radius: 20px;
}
@media screen and (min-width: 480px) {
  .news-list-area .news-list .news-img {
    width: 200px;
    max-width: auto;
    margin-bottom: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media screen and (min-width: 560px) {
  .news-list-area .news-list .news-img {
    width: 270px;
  }
}
.news-list-area .news-list .news-img img {
  width: 100%;
  border-radius: 15px;
}
.news-list-area .news-list .list-content-area {
  padding: 0 5px;
}
@media screen and (min-width: 480px) {
  .news-list-area .news-list .list-content-area {
    min-height: 159px;
    padding: 0 0px 0 20px;
  }
}
@media screen and (min-width: 560px) {
  .news-list-area .news-list .list-content-area {
    min-height: 210px;
  }
}
.news-list-area .news-list .list-content-area .news-list-head {
  margin-bottom: 10px;
}
.news-list-area .news-list .list-content-area .news-list-head .news-date {
  display: inline-block;
  vertical-align: middle;
  color: #EC755F;
  font-family: Arial;
  font-size: 16px;
  padding-top: 2px;
}
.news-list-area .news-list .list-content-area .news-list-head .news-label {
  display: inline-block;
  vertical-align: middle;
  width: 55px;
  height: 28px;
}
.news-list-area .news-list .list-content-area .news-list-head .news-label.top {
  background: url(../img/news/type_top_2x.png) no-repeat;
  background-size: 55px;
}
@media screen and (min-width: 768px) {
  .news-list-area .news-list .list-content-area .news-list-head .news-label.top {
    background: url(../img/news/type_top.png) no-repeat;
    background-size: 55px;
  }
}
.news-list-area .news-list .list-content-area .news-list-head .news-label.hot {
  background: url(../img/news/type_hot_2x.png) no-repeat;
  background-size: 55px;
}
@media screen and (min-width: 768px) {
  .news-list-area .news-list .list-content-area .news-list-head .news-label.hot {
    background: url(../img/news/type_hot.png) no-repeat;
    background-size: 55px;
  }
}
.news-list-area .news-list .list-content-area .news-list-head .news-label + .news-label {
  margin-left: 10px;
}
.news-list-area .news-list .list-content-area .news-list-head .news-label + .news-date {
  padding-left: 10px;
}
.news-list-area .news-list .list-content-area .news-title {
  margin: 0 0 20px;
  font-size: 20px;
}
.news-list-area .news-list .list-content-area .news-title span {
  display: inline-block;
  position: relative;
}
.news-list-area .news-list .list-content-area .news-title span:before {
  content: "";
  display: block;
  width: 0%;
  height: 10px;
  border-radius: 10px;
  background-color: #ffdb97;
  position: absolute;
  left: -4px;
  bottom: 0;
  transition: 0.5s;
  z-index: -1;
}
.news-list-area .news-list .list-content-area .news-title:hover span:before {
  width: calc(100% + 8px);
}
.news-list-area .news-list .list-content-area .news-info {
  display: none;
}
@media screen and (min-width: 600px) {
  .news-list-area .news-list .list-content-area .news-info {
    display: block;
  }
}
.news-list-area .news-list + .news-list {
  margin-top: 30px;
}
@media screen and (min-width: 560px) {
  .news-list-area .news-list + .news-list {
    margin-top: 40px;
  }
}

.news-header-area {
  background: url(../img/story/care/care_bg02.png);
  padding: 0 20px 40px;
  position: relative;
}
.news-header-area:after {
  content: "";
  display: block;
  width: 1380px;
  height: 8px;
  background: url(../img/partner/partition_line_care.png);
  background-size: 200px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.news-header-area .news-header-box {
  position: relative;
}
@media screen and (min-width: 640px) {
  .news-header-area .news-header-box {
    padding-left: 270px;
  }
}
.news-header-area .news-header-box .news-img-area {
  width: 100%;
  max-width: 360px;
  padding: 5px;
  background: #FEFEFE;
  border: 1px solid #E1E2E2;
  border-radius: 20px;
  margin: 0 auto 20px;
}
@media screen and (min-width: 640px) {
  .news-header-area .news-header-box .news-img-area {
    width: 270px;
    max-width: auto;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.news-header-area .news-header-box .news-img-area img {
  width: 100%;
  border-radius: 15px;
}
@media screen and (min-width: 640px) {
  .news-header-area .news-header-box .news-header-content {
    min-height: 210px;
    padding-left: 20px;
  }
}
.news-header-area .news-header-box .news-header-content .news-content-head {
  margin-bottom: 10px;
}
.news-header-area .news-header-box .news-header-content .news-content-head .news-date {
  display: inline-block;
  vertical-align: middle;
  color: #EC755F;
  font-family: Arial;
  font-size: 16px;
  padding-top: 2px;
  padding-left: 3px;
}
.news-header-area .news-header-box .news-header-content .news-content-head .news-label {
  display: inline-block;
  vertical-align: middle;
  width: 55px;
  height: 28px;
}
.news-header-area .news-header-box .news-header-content .news-content-head .news-label.top {
  background: url(../img/news/type_top_2x.png) no-repeat;
  background-size: 55px;
}
@media screen and (min-width: 768px) {
  .news-header-area .news-header-box .news-header-content .news-content-head .news-label.top {
    background: url(../img/news/type_top.png) no-repeat;
    background-size: 55px;
  }
}
.news-header-area .news-header-box .news-header-content .news-content-head .news-label.hot {
  background: url(../img/news/type_hot_2x.png) no-repeat;
  background-size: 55px;
}
@media screen and (min-width: 768px) {
  .news-header-area .news-header-box .news-header-content .news-content-head .news-label.hot {
    background: url(../img/news/type_hot.png) no-repeat;
    background-size: 55px;
  }
}
.news-header-area .news-header-box .news-header-content .news-content-head .news-label + .news-label {
  margin-left: 10px;
}
.news-header-area .news-header-box .news-header-content .news-content-head .news-label + .news-date {
  padding-left: 10px;
}
.news-header-area .news-header-box .news-header-content .news-title {
  margin: 0 0 20px;
  font-size: 20px;
}
.news-content-area {
  padding-top: 60px;
}
.news-content-area h3 {
  font-size: 18px;
  color: #ea795b;
  margin: 0 0 20px;
}
.news-content-area h4 {
  font-size: 16px;
  color: #4d9cd9;
  margin: 0 0 10px;
}
.news-content-area p {
  font-size: 15px;
  color: #5a5a5a;
  line-height: 1.5;
}
.news-content-area iframe, .news-content-area img, .news-content-area table {
  max-width: 100%;
}
.news-content-area img {
  height: auto;
}
.news-content-area .social-area {
  padding-top: 30px;
  text-align: right;
}

/*
* @Author: ansen
* @Date:   2018-07-26 12:05:27
* @Last Modified by:   ansen
* @Last Modified time: 2018-08-14 11:47:35
*/
.donate-main-area .donate-top-area {
  position: relative;
}
.donate-main-area .donate-top-area:after {
  content: "";
  display: block;
  width: 1380px;
  border-bottom: 1px dashed #ead691;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.donate-main-content .slogan-title {
  font-size: 17px;
  text-align: center;
  margin-bottom: 10px;
}
.donate-main-content .donate-feedback-text {
  text-align: center;
  font-size: 17px;
  color: #ea795b;
  line-height: 1.75;
  margin-bottom: 10px;
}
.donate-main-content .donate-feedback-text a {
  color: #d4241a;
}
.donate-main-content .donate-feedback-text a:hover {
  color: #ff3500;
}

.donate-tabs .donate-tabs-menu {
  margin: 30px 0 40px;
  padding: 0;
  list-style: none;
  text-align: center;
}
.donate-tabs .donate-tabs-menu > li {
  display: inline-block;
  font-size: 0;
  width: 100%;
  padding: 4px;
  margin: 0 auto 10px;
  background-color: #ffc498;
  border-radius: 10px;
}
@media screen and (min-width: 640px) {
  .donate-tabs .donate-tabs-menu > li {
    width: 40%;
    margin: 0 15px;
  }
}
@media screen and (min-width: 768px) {
  .donate-tabs .donate-tabs-menu > li {
    width: auto;
  }
}
@media screen and (min-width: 992px) {
  .donate-tabs .donate-tabs-menu > li {
    margin: 0 40px;
  }
}
.donate-tabs .donate-tabs-menu > li a.donate-tabs-btn {
  display: inline-block;
  width: 100%;
  font-size: 20px;
  color: #000;
  text-align: center;
  background-color: #FEF1C7;
  border-radius: 10px;
  padding: 20px 15px;
  outline: none;
  overflow: hidden;
  position: relative;
}
@media screen and (min-width: 768px) {
  .donate-tabs .donate-tabs-menu > li a.donate-tabs-btn {
    width: 320px;
    padding: 20px 50px;
    font-size: 25px;
  }
}
@media screen and (min-width: 992px) {
  .donate-tabs .donate-tabs-menu > li a.donate-tabs-btn {
    width: 340px;
  }
}
.donate-tabs .donate-tabs-menu > li a.donate-tabs-btn span {
  display: block;
  font-size: 16px;
  color: #363636;
  padding-top: 10px;
}
@media screen and (min-width: 768px) {
  .donate-tabs .donate-tabs-menu > li a.donate-tabs-btn span {
    font-size: 18px;
  }
}
.donate-tabs .donate-tabs-menu > li a.donate-tabs-btn:before {
  content: "";
  display: block;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background-color: #f07068;
  position: absolute;
  top: -70px;
  left: -70px;
  transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.donate-tabs .donate-tabs-menu > li a.donate-tabs-btn:after {
  content: "";
  display: block;
  width: 41px;
  height: 30px;
  background: url(../img/donate/Tick_xs_2x.png) no-repeat;
  background-size: 41px;
  position: absolute;
  top: 6px;
  left: 5px;
  transform: scale(0);
  transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media screen and (min-width: 768px) {
  .donate-tabs .donate-tabs-menu > li a.donate-tabs-btn:after {
    background: url(../img/donate/Tick.png) no-repeat;
    background-size: 41px;
  }
}
.donate-tabs .donate-tabs-menu > li.ui-state-active {
  background-color: #fff;
  box-shadow: 0px 0px 10px #ffc498;
}
.donate-tabs .donate-tabs-menu > li.ui-state-active:hover {
  background-color: #fff;
}
.donate-tabs .donate-tabs-menu > li.ui-state-active a.donate-tabs-btn {
  color: #e23131;
  background-color: #ffc498;
}
.donate-tabs .donate-tabs-menu > li.ui-state-active a.donate-tabs-btn:before {
  top: -30px;
  left: -20px;
}
.donate-tabs .donate-tabs-menu > li.ui-state-active a.donate-tabs-btn:after {
  transform: scale(1);
}
.donate-tabs .donate-tabs-menu > li:hover {
  background-color: #ef8a84;
}
.donate-tabs .social-area {
  text-align: right;
  padding-top: 20px;
}

.donate-tabs-area .donate-tabs {
  text-align: center;
}
.donate-tabs-area .donate-tabs .donate-input-area {
  margin-bottom: 20px;
  font-size: 0;
}
.donate-tabs-area .donate-tabs .donate-input-area:after {
  content: "";
  display: block;
  clear: both;
}
@media screen and (min-width: 992px) {
  .donate-tabs-area .donate-tabs .donate-input-area.has-integrated label {
    width: 16.666%;
  }
}
.donate-tabs-area .donate-tabs .donate-input-area label {
  width: 50%;
  margin: 0;
  padding: 0 10px 50px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
@media screen and (min-width: 640px) {
  .donate-tabs-area .donate-tabs .donate-input-area label {
    width: 33.33%;
  }
}
@media screen and (min-width: 992px) {
  .donate-tabs-area .donate-tabs .donate-input-area label {
    width: 20%;
  }
}
.donate-tabs-area .donate-tabs .donate-input-area label .class-tpye-img {
  max-width: 202px;
  border-radius: 50%;
  padding: 4px;
  background-color: #fff;
  overflow: hidden;
  transition: 0.3s cubic-bezier(0.24, -0.81, 0.74, 1.67);
  opacity: 0.4;
  margin: 0 auto 5px;
  transform: scale(1) rotateY(0deg);
}
@media screen and (min-width: 992px) {
  .donate-tabs-area .donate-tabs .donate-input-area label .class-tpye-img {
    margin: 0 auto 20px;
  }
}
.donate-tabs-area .donate-tabs .donate-input-area label .class-tpye-img img {
  max-width: 100%;
  border-radius: 50%;
}
.donate-tabs-area .donate-tabs .donate-input-area label .class-tpye-img:hover {
  transform: scale(1.1);
}
.donate-tabs-area .donate-tabs .donate-input-area label .class-tpye-img.checked {
  transform: scale(1) rotateY(360deg);
}
.donate-tabs-area .donate-tabs .donate-input-area label input.input_type {
  display: inline-block;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 992px) {
  .donate-tabs-area .donate-tabs .donate-input-area label input.input_type {
    bottom: 15px;
  }
}
.donate-tabs-area .donate-tabs .donate-input-area label input.input_type:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #ffbb54;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: -2px;
  left: 50%;
  margin-left: -10px;
}
.donate-tabs-area .donate-tabs .donate-input-area label input.input_type:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffbb54;
  position: absolute;
  top: 3px;
  left: 50%;
  margin-left: -5px;
  transition: 0.5s;
  transform: scale(0);
}
.donate-tabs-area .donate-tabs .donate-input-area label input.input_type:checked:after {
  transform: scale(1);
}
.donate-tabs-area .donate-tabs .donate-input-area label input.input_type:checked + .class-tpye-img {
  box-shadow: 0px 0px 10px #c5ab54;
  opacity: 1;
}
.donate-tabs-area .donate-tabs .donate-input-area label .class-type-name {
  display: block;
  font-weight: normal;
  font-size: 20px;
  color: #363636;
}
.donate-tabs-area .donate-tabs .donate-input-area label .class-type-name-intro {
  display: block;
  height: 44px;
  overflow: hidden;
  font-weight: normal;
  font-size: 16px;
  color: #363636;
  margin-top: 0px;
}
@media screen and (min-width: 640px) {
  .donate-tabs-area .donate-tabs .donate-input-area label .class-type-name-intro {
    height: auto;
    font-size: 18px;
    margin-top: 15px;
  }
}
.donate-tabs-area .donate-tabs .donate-intro {
  text-align: center;
  font-size: 20px;
  color: #6f6b5b;
  margin-bottom: 35px;
}
.donate-tabs-area .donate-tabs .donate-intro #default_amount {
  display: inline-block;
  border: 1px solid #ffbb54;
  border-radius: 5px;
  box-shadow: none;
  text-align: center;
  margin: 0 5px;
  max-width: 90px;
}
.donate-tabs-area .donate-tabs .btn {
  width: 140px;
}
.donate-tabs-area .donate-tabs.once .donate-input-area label {
  width: 50%;
  padding: 0 10px 20px;
}
@media screen and (min-width: 640px) {
  .donate-tabs-area .donate-tabs.once .donate-input-area label {
    width: 25%;
    padding: 0 10px 10px;
  }
}
.donate-tabs-area .donate-tabs.once .donate-input-area label .class-tpye-img {
  margin-bottom: 30px;
}
@media screen and (min-width: 640px) {
  .donate-tabs-area .donate-tabs.once .donate-input-area label .class-tpye-img {
    margin-bottom: 45px;
  }
}
.donate-tabs-area .donate-tabs.once .donate-input-area label span.class-type-name {
  position: relative;
}
.donate-tabs-area .donate-tabs.once .donate-input-area label span.class-type-name:before, .donate-tabs-area .donate-tabs.once .donate-input-area label span.class-type-name:after {
  content: "";
  display: block;
  border-radius: 50%;
  position: absolute;
  left: 50%;
}
.donate-tabs-area .donate-tabs.once .donate-input-area label span.class-type-name:before {
  width: 20px;
  height: 20px;
  border: 1px solid #ffbb54;
  background-color: #fff;
  top: -25px;
  margin-left: -10px;
}
@media screen and (min-width: 640px) {
  .donate-tabs-area .donate-tabs.once .donate-input-area label span.class-type-name:before {
    top: -35px;
  }
}
.donate-tabs-area .donate-tabs.once .donate-input-area label span.class-type-name:after {
  width: 10px;
  height: 10px;
  background-color: #ffbb54;
  top: -20px;
  margin-left: -5px;
  transition: 0.5s;
  transform: scale(0);
}
@media screen and (min-width: 640px) {
  .donate-tabs-area .donate-tabs.once .donate-input-area label span.class-type-name:after {
    top: -30px;
  }
}
.donate-tabs-area .donate-tabs.once .donate-input-area label input.select_amount {
  display: none;
}
.donate-tabs-area .donate-tabs.once .donate-input-area label input.select_amount:checked + .regular-choose .class-tpye-img {
  opacity: 1;
}
.donate-tabs-area .donate-tabs.once .donate-input-area label input.select_amount:checked + .regular-choose .class-type-name:after {
  transform: scale(1);
}
.donate-tabs-area .donate-tabs.once .diy-donate {
  display: inline-block;
  border: 1px solid #ffbb54;
  border-radius: 5px;
  text-align: center;
  margin: 0 9px 0 5px;
  max-width: 90px;
}
.donate-tabs-area .donate-tabs .donate-intro {
  color: #e26e4f;
}

.donate-feedback-area .donate-thanks {
  display: table;
  margin: auto;
  font-size: 17px;
  color: #363636;
}
@media screen and (min-width: 768px) {
  .donate-feedback-area .donate-thanks {
    margin-bottom: 12px;
    font-size: 20px;
  }
}
.donate-feedback-area .donate-thanks .donate-thanks-title {
  text-align: center;
  margin-bottom: 15px;
}
@media screen and (min-width: 768px) {
  .donate-feedback-area .donate-thanks .donate-thanks-title {
    display: table-cell;
    width: 250px;
    text-align: right;
    margin-bottom: 0;
  }
}
.donate-feedback-area .donate-thanks .donate-thanks-title span.text {
  display: inline-block;
  position: relative;
}
.donate-feedback-area .donate-thanks .donate-thanks-title span.text:after {
  content: "";
  display: block;
  width: calc(100% + 2px);
  height: 4px;
  background-color: #ffeaa3;
  position: absolute;
  bottom: -4px;
  left: 0;
}
.donate-feedback-area .donate-thanks .donate-thanks-text {
  text-align: center;
  margin-bottom: 5px;
}
@media screen and (min-width: 768px) {
  .donate-feedback-area .donate-thanks .donate-thanks-text {
    display: table-cell;
    text-align: left;
    padding-left: 40px;
    margin-bottom: 0;
  }
}
.donate-feedback-area .donate-feedback-gift {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 20px;
}
.donate-feedback-area .donate-feedback-gift .gift-box {
  display: inline-block;
  border-radius: 10px;
  border: 4px solid #fff;
  background-color: #fff;
  position: relative;
}
.donate-feedback-area .donate-feedback-gift .gift-box img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.donate-feedback-area .donate-feedback-gift .gift-box .gift-kid {
  display: none;
  position: absolute;
  z-index: -1;
  bottom: 20px;
}
@media screen and (min-width: 768px) {
  .donate-feedback-area .donate-feedback-gift .gift-box .gift-kid {
    display: block;
  }
}
.donate-feedback-area .donate-feedback-gift .gift-box .gift-kid.left {
  width: 124px;
  height: 252px;
  background: url(../img/donate/gift_pic01.png) no-repeat;
  background-size: 124px;
  left: -129px;
}
.donate-feedback-area .donate-feedback-gift .gift-box .gift-kid.right {
  width: 84px;
  height: 249px;
  background: url(../img/donate/gift_pic02.png) no-repeat;
  background-size: 84px;
  right: -89px;
}
.donate-feedback-area .donate-feedback-gift .gift-box-text {
  font-size: 17px;
  text-align: center;
  color: #e8554c;
  line-height: 1.75;
  margin-bottom: 25px;
}
.donate-feedback-area .donate-feedback-gift .gift-box-text a {
  color: #d4241a;
}
.donate-feedback-area .btn-area {
  padding-top: 35px;
  text-align: center;
}
.donate-feedback-area .btn-area .btn {
  width: 140px;
}

.donate-form-main-area {
  padding: 10px 0px 20px;
  position: relative;
}
@media screen and (min-width: 560px) {
  .donate-form-main-area {
    padding: 10px 15px 20px;
  }
}
@media screen and (min-width: 768px) {
  .donate-form-main-area {
    padding: 10px 140px 10px 30px;
  }
}
@media screen and (min-width: 992px) {
  .donate-form-main-area {
    padding: 10px 280px 10px 15px;
  }
}
@media screen and (min-width: 1200px) {
  .donate-form-main-area {
    padding: 10px 350px 10px 80px;
  }
}
.donate-form-main-area:before {
  content: "";
  display: none;
  width: 160px;
  height: 190px;
  background: url(../img/donate/donate_p2_pic.png) no-repeat;
  background-size: 160px;
  position: absolute;
  bottom: 20px;
  right: 50%;
  margin-right: -80px;
}
@media screen and (min-width: 768px) {
  .donate-form-main-area:before {
    display: block;
    bottom: 30px;
    right: -24px;
    margin: 0;
    z-index: -1;
  }
}
@media screen and (min-width: 992px) {
  .donate-form-main-area:before {
    width: 259px;
    height: 300px;
    background: url(../img/donate/donate_p2_pic.png) no-repeat;
    background-size: 259px;
    bottom: 50px;
    right: 5px;
    z-index: 0;
  }
}
@media screen and (min-width: 1200px) {
  .donate-form-main-area:before {
    right: 20px;
  }
}
.donate-form-main-area .donate-group {
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: 10px;
}
@media screen and (min-width: 560px) {
  .donate-form-main-area .donate-group {
    margin-bottom: 24px;
  }
}
.donate-form-main-area .donate-group:after {
  content: "";
  display: block;
  clear: both;
}
.donate-form-main-area .donate-group .donate-input {
  float: left;
  width: 100%;
  padding: 0 10px;
}
@media screen and (min-width: 560px) {
  .donate-form-main-area .donate-group .donate-input.half {
    width: 50%;
  }
}
.donate-form-main-area .donate-group .donate-input.half + .half {
  margin-top: 10px;
}
@media screen and (min-width: 560px) {
  .donate-form-main-area .donate-group .donate-input.half + .half {
    margin-top: 0;
  }
}
.donate-form-main-area .donate-group .label-area {
  padding: 0 10px;
}
@media screen and (min-width: 560px) {
  .donate-form-main-area .donate-group .label-area {
    float: left;
    width: 160px;
  }
}
.donate-form-main-area .donate-group .label-area label {
  line-height: 40px;
  margin-bottom: 0;
  font-size: 17px;
  font-weight: normal;
  color: #363636;
}
.donate-form-main-area .donate-group .input-area {
  padding: 0 10px;
}
@media screen and (min-width: 560px) {
  .donate-form-main-area .donate-group .input-area {
    float: left;
    width: calc(100% - 160px);
  }
}
.donate-form-main-area .donate-group .input-area.inline {
  padding: 0;
}
@media screen and (min-width: 560px) {
  .donate-form-main-area .donate-group .input-area.push-label {
    margin-left: 160px;
  }
}
.donate-form-main-area .donate-group .form-control {
  font-size: 16px;
  height: 40px;
  color: #757575;
  border: 1px solid #ffbb54;
  box-shadow: none;
}
.donate-form-main-area .donate-group .text-right-lg {
  text-align: right;
  font-size: 17px;
  color: #ea795b;
}
.donate-form-main-area .donate-group .text-right-lg a {
  color: #ea795b;
}

.donate-form-btn-area {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  position: relative;
}
@media screen and (min-width: 360px) {
  .donate-form-btn-area {
    padding-top: 60px;
  }
}
.donate-form-btn-area:before {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  background: url(../img/partner/partition_line_care_2x.png);
  background-size: 200px;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (min-width: 768px) {
  .donate-form-btn-area:before {
    background: url(../img/partner/partition_line_care.png);
    background-size: 200px;
  }
}
.donate-form-btn-area .btn {
  display: block;
  width: 140px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 360px) {
  .donate-form-btn-area .btn {
    display: inline-block;
  }
}
.donate-form-btn-area .btn + .btn {
  margin-top: 10px;
}
@media screen and (min-width: 360px) {
  .donate-form-btn-area .btn + .btn {
    margin-top: 0;
    margin-left: 20px;
  }
}

/*
* @Author: ansen
* @Date:   2018-07-27 14:56:50
* @Last Modified by:   ansen
* @Last Modified time: 2018-08-10 14:21:58
*/
.partner-tabs-area .partner-tabs .desc-text {
  text-align: center;
  font-size: 16px;
  color: #363636;
}
.partner-tabs-area .partner-tabs .partner-content {
  text-align: left;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title {
  font-size: 22px;
  font-weight: normal;
  color: #363636;
  padding: 35px 0 25px 85px;
  margin-bottom: 20px;
  position: relative;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title:before {
  content: "";
  display: block;
  width: 79px;
  height: 93px;
  position: absolute;
  top: 0;
  left: 0;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title:after {
  content: "";
  display: block;
  width: calc(100% - 79px);
  height: 8px;
  position: absolute;
  bottom: 0;
  left: 79px;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title.sport:before {
  background: url(../img/partner/partner_icon_sport.png) no-repeat;
  background-size: 100%;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title.sport:after {
  background: url(../img/partner/partition_line_sport.png) repeat-x;
  background-size: 200px;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title.art:before {
  background: url(../img/partner/partner_icon_art.png) no-repeat;
  background-size: 100%;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title.art:after {
  background: url(../img/partner/partition_line_art.png) repeat-x;
  background-size: 200px;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title.learn:before {
  background: url(../img/partner/partner_icon_learn.png) no-repeat;
  background-size: 100%;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title.learn:after {
  background: url(../img/partner/partition_line_learn.png) repeat-x;
  background-size: 200px;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title.music:before {
  background: url(../img/partner/partner_icon_music.png) no-repeat;
  background-size: 100%;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title.music:after {
  background: url(../img/partner/partition_line_music.png) repeat-x;
  background-size: 200px;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title.care:before {
  background: url(../img/partner/partner_icon_care.png) no-repeat;
  background-size: 100%;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title.care:after {
  background: url(../img/partner/partition_line_care.png) repeat-x;
  background-size: 200px;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title.integrated:before {
  background: url(../img/partner/partner_icon_integrated.png) no-repeat;
  background-size: 100%;
  width: 80px;
  height: 73px;
  top: 10px;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title.integrated:after {
  background: url(../img/partner/partner_line_integrated.png) repeat-x;
  background-size: 200px;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title.undefined:before {
  background: url(../img/partner/partner_icon_normal.png) no-repeat;
  background-size: 100%;
}
.partner-tabs-area .partner-tabs .partner-content .partner-class-title.undefined:after {
  background: url(../img/partner/partition_line_care.png) repeat-x;
  background-size: 200px;
}
.partner-tabs-area .partner-tabs .partner-content .partner-content-item {
  position: relative;
  margin-bottom: 20px;
}
@media screen and (min-width: 600px) {
  .partner-tabs-area .partner-tabs .partner-content .partner-content-item {
    padding: 10px 0px 10px 233px;
  }
}
@media screen and (min-width: 768px) {
  .partner-tabs-area .partner-tabs .partner-content .partner-content-item {
    padding: 0;
  }
}
@media screen and (min-width: 1200px) {
  .partner-tabs-area .partner-tabs .partner-content .partner-content-item {
    padding: 10px 0px 10px 233px;
  }
}
.partner-tabs-area .partner-tabs .partner-content .partner-content-item .partner-photo {
  text-align: center;
}
@media screen and (min-width: 600px) {
  .partner-tabs-area .partner-tabs .partner-content .partner-content-item .partner-photo {
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media screen and (min-width: 768px) {
  .partner-tabs-area .partner-tabs .partner-content .partner-content-item .partner-photo {
    position: static;
  }
}
@media screen and (min-width: 1200px) {
  .partner-tabs-area .partner-tabs .partner-content .partner-content-item .partner-photo {
    position: absolute;
    top: 0;
    left: 0;
  }
}
.partner-tabs-area .partner-tabs .partner-content .partner-content-item .partner-photo img {
  width: 100%;
  max-width: 233px;
}
.partner-tabs-area .partner-tabs .partner-content .partner-content-item .partner-content-box {
  min-height: 105px;
  padding: 0 10px;
}
@media screen and (min-width: 600px) {
  .partner-tabs-area .partner-tabs .partner-content .partner-content-item .partner-content-box {
    padding: 0 0 0 30px;
  }
}
@media screen and (min-width: 768px) {
  .partner-tabs-area .partner-tabs .partner-content .partner-content-item .partner-content-box {
    padding: 0;
  }
}
@media screen and (min-width: 1200px) {
  .partner-tabs-area .partner-tabs .partner-content .partner-content-item .partner-content-box {
    padding-left: 30px;
  }
}
.partner-tabs-area .partner-tabs .partner-content .partner-content-item .partner-content-box .partner-name {
  font-size: 17px;
  font-weight: bold;
  color: #363636;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 5px;
}
.partner-tabs-area .partner-tabs .partner-content .partner-content-item .partner-content-box .partner-name a {
  color: #363636;
}
@media screen and (min-width: 600px) {
  .partner-tabs-area .partner-tabs .partner-content .partner-content-item .partner-content-box .partner-name {
    margin-top: 0px;
    text-align: left;
  }
}
@media screen and (min-width: 768px) {
  .partner-tabs-area .partner-tabs .partner-content .partner-content-item .partner-content-box .partner-name {
    margin-top: 10px;
    text-align: center;
  }
}
@media screen and (min-width: 1200px) {
  .partner-tabs-area .partner-tabs .partner-content .partner-content-item .partner-content-box .partner-name {
    margin-top: 0px;
    text-align: left;
  }
}
.partner-tabs-area .partner-tabs .partner-content .partner-content-item .partner-content-box .partner-text {
  font-size: 15px;
  color: #818181;
  text-align: justify;
}
.partner-tabs-area .partner-tabs .partner-content + .partner-content {
  margin-top: 30px;
}

.guide-area {
  text-align: center;
  line-height: 1.6;
  margin-bottom: 75px;
}
.guide-area .guide-title {
  font-size: 18px;
  font-weight: bold;
  color: #f8767a;
  margin-bottom: 15px;
}
.guide-area .guide-text {
  font-size: 16px;
  color: #363636;
  margin-bottom: 3px;
}

@media screen and (min-width: 1200px) {
  .donate-step-area {
    padding-left: 100px;
  }
}
.donate-step-area:after {
  content: "";
  display: block;
  clear: both;
}
.donate-step-area .donate-step {
  padding: 0 15px 50px;
  text-align: center;
}
@media screen and (min-width: 640px) {
  .donate-step-area .donate-step {
    float: left;
    width: 50%;
  }
}
@media screen and (min-width: 768px) {
  .donate-step-area .donate-step {
    padding: 0 15px 80px;
  }
}
.donate-step-area .donate-step .donate-step-text {
  font-size: 16px;
  color: #363636;
  position: relative;
}
@media screen and (min-width: 768px) {
  .donate-step-area .donate-step .donate-step-text {
    font-size: 18px;
  }
}
.donate-step-area .donate-step .donate-step-text a {
  font-weight: bold;
  color: #f59503;
  text-decoration: underline;
}
.donate-step-area .donate-step .donate-step-text:before {
  content: "";
  display: block;
  width: 180px;
  height: 53px;
  position: absolute;
  top: 0;
  left: 0;
}
.donate-step-area .donate-step .donate-step-text:after {
  content: "";
  display: block;
  width: 380px;
  height: 257px;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -190px;
  z-index: -1;
}
@media screen and (min-width: 640px) {
  .donate-step-area .donate-step .donate-step-text:after {
    width: 320px;
    height: 216px;
    margin-left: 0;
  }
}
@media screen and (min-width: 768px) {
  .donate-step-area .donate-step .donate-step-text:after {
    width: 380px;
    height: 257px;
  }
}
@media screen and (min-width: 992px) {
  .donate-step-area .donate-step .donate-step-text:after {
    width: 512px;
    height: 346px;
  }
}
.donate-step-area .donate-step.step1 .donate-step-text {
  padding-top: 225px;
}
@media screen and (min-width: 640px) {
  .donate-step-area .donate-step.step1 .donate-step-text {
    padding-top: 210px;
  }
}
@media screen and (min-width: 768px) {
  .donate-step-area .donate-step.step1 .donate-step-text {
    padding-top: 250px;
  }
}
@media screen and (min-width: 992px) {
  .donate-step-area .donate-step.step1 .donate-step-text {
    padding-top: 305px;
  }
}
.donate-step-area .donate-step.step1 .donate-step-text:before {
  background: url(../img/partner/title_step1.png) no-repeat;
  background-size: 180px;
}
.donate-step-area .donate-step.step1 .donate-step-text:after {
  background: url(../img/partner/partner_pic01.png) no-repeat;
  background-size: 380px;
  top: 20px;
  left: 50%;
}
@media screen and (min-width: 640px) {
  .donate-step-area .donate-step.step1 .donate-step-text:after {
    background: url(../img/partner/partner_pic01.png) no-repeat;
    background-size: 320px;
    left: -10px;
  }
}
@media screen and (min-width: 768px) {
  .donate-step-area .donate-step.step1 .donate-step-text:after {
    background: url(../img/partner/partner_pic01.png) no-repeat;
    background-size: 380px;
  }
}
@media screen and (min-width: 992px) {
  .donate-step-area .donate-step.step1 .donate-step-text:after {
    background: url(../img/partner/partner_pic01.png) no-repeat;
    background-size: 512px;
    top: 10px;
    left: -50px;
  }
}
.donate-step-area .donate-step.step2 .donate-step-text {
  padding-top: 240px;
}
@media screen and (min-width: 640px) {
  .donate-step-area .donate-step.step2 .donate-step-text {
    padding-top: 210px;
  }
}
@media screen and (min-width: 768px) {
  .donate-step-area .donate-step.step2 .donate-step-text {
    padding-top: 250px;
  }
}
@media screen and (min-width: 992px) {
  .donate-step-area .donate-step.step2 .donate-step-text {
    padding-top: 305px;
  }
}
.donate-step-area .donate-step.step2 .donate-step-text:before {
  background: url(../img/partner/title_step2.png) no-repeat;
  background-size: 180px;
}
.donate-step-area .donate-step.step2 .donate-step-text:after {
  background: url(../img/partner/partner_pic02.png) no-repeat;
  background-size: 380px;
  top: 30px;
  left: 50%;
}
@media screen and (min-width: 640px) {
  .donate-step-area .donate-step.step2 .donate-step-text:after {
    background: url(../img/partner/partner_pic02.png) no-repeat;
    background-size: 320px;
    left: 0;
  }
}
@media screen and (min-width: 768px) {
  .donate-step-area .donate-step.step2 .donate-step-text:after {
    background: url(../img/partner/partner_pic02.png) no-repeat;
    background-size: 380px;
  }
}
@media screen and (min-width: 992px) {
  .donate-step-area .donate-step.step2 .donate-step-text:after {
    background: url(../img/partner/partner_pic02.png) no-repeat;
    background-size: 512px;
    top: 10px;
  }
}
.donate-step-area .donate-step.step3 .donate-step-text {
  padding-top: 260px;
}
@media screen and (min-width: 768px) {
  .donate-step-area .donate-step.step3 .donate-step-text {
    padding-top: 330px;
  }
}
@media screen and (min-width: 992px) {
  .donate-step-area .donate-step.step3 .donate-step-text {
    padding-top: 370px;
  }
}
.donate-step-area .donate-step.step3 .donate-step-text:before {
  background: url(../img/partner/title_step3.png) no-repeat;
  background-size: 180px;
}
.donate-step-area .donate-step.step3 .donate-step-text:after {
  background: url(../img/partner/partner_pic03.png) no-repeat;
  background-size: 380px;
  top: 45px;
  left: 50%;
}
@media screen and (min-width: 640px) {
  .donate-step-area .donate-step.step3 .donate-step-text:after {
    background: url(../img/partner/partner_pic03.png) no-repeat;
    background-size: 320px;
    top: 60px;
    left: 0;
  }
}
@media screen and (min-width: 768px) {
  .donate-step-area .donate-step.step3 .donate-step-text:after {
    background: url(../img/partner/partner_pic03.png) no-repeat;
    background-size: 380px;
  }
}
@media screen and (min-width: 992px) {
  .donate-step-area .donate-step.step3 .donate-step-text:after {
    background: url(../img/partner/partner_pic03.png) no-repeat;
    background-size: 512px;
  }
}
.donate-step-area .donate-step.step4 .donate-step-text {
  padding-top: 240px;
}
@media screen and (min-width: 768px) {
  .donate-step-area .donate-step.step4 .donate-step-text {
    padding-top: 305px;
  }
}
@media screen and (min-width: 992px) {
  .donate-step-area .donate-step.step4 .donate-step-text {
    padding-top: 345px;
  }
}
.donate-step-area .donate-step.step4 .donate-step-text:before {
  background: url(../img/partner/title_step4.png) no-repeat;
  background-size: 180px;
}
.donate-step-area .donate-step.step4 .donate-step-text:after {
  background: url(../img/partner/partner_pic04.png) no-repeat;
  background-size: 380px;
  top: 50px;
  left: 50%;
}
@media screen and (min-width: 640px) {
  .donate-step-area .donate-step.step4 .donate-step-text:after {
    background: url(../img/partner/partner_pic04.png) no-repeat;
    background-size: 320px;
    left: 15px;
  }
}
@media screen and (min-width: 768px) {
  .donate-step-area .donate-step.step4 .donate-step-text:after {
    background: url(../img/partner/partner_pic04.png) no-repeat;
    background-size: 380px;
  }
}
@media screen and (min-width: 992px) {
  .donate-step-area .donate-step.step4 .donate-step-text:after {
    background: url(../img/partner/partner_pic04.png) no-repeat;
    background-size: 512px;
    left: 0;
  }
}

.note-area {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px 25px;
}
@media screen and (min-width: 640px) {
  .note-area {
    padding: 30px 40px;
  }
}
.note-area .note-title {
  font-size: 18px;
  font-weight: bold;
  color: #363636;
  margin-bottom: 15px;
}
.note-area .note-content {
  font-size: 16px;
  color: #363636;
  line-height: 1.5;
}
.note-area .note-content ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: item;
}
.note-area .note-content ol li {
  position: relative;
  margin-bottom: 5px;
  padding-left: 20px;
}
.note-area .note-content ol li:before {
  top: 0px;
  left: 0px;
  position: absolute;
  content: counter(item) ".";
  counter-increment: item;
  width: 15px;
  text-align: right;
}
.note-area .note-content a {
  font-size: 16px;
  color: #f59503;
}

/*
* @Author: ansen
* @Date:   2018-07-27 18:19:22
* @Last Modified by:   ansen
* @Last Modified time: 2018-08-09 16:56:34
*/
.plan-main-content h4.plan-title {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 18px;
  text-align: center;
}
.plan-main-content h4.plan-title.pink {
  color: #EF7477;
}
.plan-main-content h4.plan-title.yellow {
  color: #F89100;
}
.plan-main-content h4.plan-title.faq {
  text-align: left;
}
.plan-main-content p {
  font-size: 16px;
  color: #363636;
  line-height: 1.65;
}
.plan-main-content .social-area {
  text-align: right;
  padding-top: 50px;
}

.donate-plan-title {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
.donate-plan-title span {
  display: inline-block;
  padding: 0 10px 22px;
  position: relative;
}
.donate-plan-title span:after {
  content: "";
  display: block;
  width: 185px;
  height: 25px;
  background: url(../img/plan/plan_title_line.png) no-repeat;
  background-size: 185px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.donate-plan-title.short span {
  padding: 0 25px 22px;
}

.how-help-area {
  padding: 50px 0px 60px;
}
.how-help-area .how-help-box {
  margin-left: -15px;
  margin-right: -15px;
}
@media screen and (min-width: 1200px) {
  .how-help-area .how-help-box {
    margin-left: -20px;
    margin-right: -20px;
  }
}
.how-help-area .how-help-box:after {
  content: "";
  display: block;
  clear: both;
}
.how-help-area .how-help-box .how-help-item {
  float: left;
  width: 100%;
  padding: 0 15px 30px;
}
@media screen and (min-width: 992px) {
  .how-help-area .how-help-box .how-help-item {
    width: 50%;
  }
}
@media screen and (min-width: 1200px) {
  .how-help-area .how-help-box .how-help-item {
    padding: 0 20px 40px;
  }
}
.how-help-area .how-help-box .how-help-item.full {
  width: 100%;
}
.how-help-area .how-help-box .how-help-item .how-help {
  min-height: 192px;
  border-radius: 10px;
  box-shadow: 0px 3px 10px #f5ecd0;
  background-color: #fff;
  padding: 20px;
  text-align: justify;
  position: relative;
}
@media screen and (min-width: 640px) {
  .how-help-area .how-help-box .how-help-item .how-help {
    padding: 40px 30px 40px 205px;
  }
}
@media screen and (min-width: 992px) {
  .how-help-area .how-help-box .how-help-item .how-help {
    min-height: 225px;
    padding: 40px 30px 40px 230px;
  }
}
@media screen and (min-width: 1200px) {
  .how-help-area .how-help-box .how-help-item .how-help {
    padding: 40px 30px 40px 250px;
  }
}
.how-help-area .how-help-box .how-help-item .how-help:before {
  content: "";
  display: block;
  margin: 0 auto 20px;
}
@media screen and (min-width: 640px) {
  .how-help-area .how-help-box .how-help-item .how-help:before {
    margin: 0px;
    position: absolute;
  }
}
.how-help-area .how-help-box .how-help-item .how-help p {
  font-size: 16px;
  line-height: 1.65;
}
.how-help-area .how-help-box .how-help-item .how-help .help-btn-area {
  padding-top: 10px;
  text-align: center;
}
.how-help-area .how-help-box .how-help-item .how-help .help-btn-area .btn {
  display: block;
  margin: 0 auto;
}
.how-help-area .how-help-box .how-help-item .how-help .help-btn-area .btn + .btn {
  margin-top: 10px;
}
@media screen and (min-width: 640px) {
  .how-help-area .how-help-box .how-help-item .how-help .help-btn-area {
    text-align: left;
  }
  .how-help-area .how-help-box .how-help-item .how-help .help-btn-area .btn {
    display: inline-block;
    margin-bottom: 8px;
    margin-right: 10px;
  }
  .how-help-area .how-help-box .how-help-item .how-help .help-btn-area .btn + .btn {
    margin-top: 0;
  }
  .how-help-area .how-help-box .how-help-item .how-help .help-btn-area .btn:last-child {
    margin-right: 0;
  }
}
@media screen and (min-width: 1200px) {
  .how-help-area .how-help-box .how-help-item .how-help .help-btn-area {
    text-align: left;
  }
  .how-help-area .how-help-box .how-help-item .how-help .help-btn-area .btn {
    margin-right: 15px;
  }
  .how-help-area .how-help-box .how-help-item .how-help .help-btn-area .btn:last-child {
    margin-right: 0;
  }
}
.how-help-area .how-help-box .how-help-item .how-help .help-btn-area .btn {
  width: 140px;
}
.how-help-area .how-help-box .how-help-item .how-help .help-btn-area .line-green {
  width: 170px;
  padding-left: 26px;
  padding-right: 18px;
  text-align: right;
}
.how-help-area .how-help-box .how-help-item .how-help .help-btn-area .line-green:before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 31px;
  height: 33px;
  left: 18px;
  top: 6px;
  z-index: 1;
}
.how-help-area .how-help-box .how-help-item .how-help .help-btn-area .line-green.ios:before {
  background: url("../img/plan/btn_icon_ios_2x.png") center no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 992px) {
  .how-help-area .how-help-box .how-help-item .how-help .help-btn-area .line-green.ios:before {
    background: url("../img/plan/btn_icon_ios.png") center no-repeat;
    background-size: 100% auto;
  }
}
.how-help-area .how-help-box .how-help-item .how-help .help-btn-area .line-green.android:before {
  background: url("../img/plan/btn_icon_android_2x.png") center no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 992px) {
  .how-help-area .how-help-box .how-help-item .how-help .help-btn-area .line-green.android:before {
    background: url("../img/plan/btn_icon_android.png") center no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (min-width: 992px) {
  .how-help-area .how-help-box .how-help-item .how-help.pig {
    padding: 40px 70px 40px 370px;
  }
}
.how-help-area .how-help-box .how-help-item .how-help.pig:before {
  width: 199px;
  height: 157px;
  background: url(../img/plan/plan_pic01.png) no-repeat;
  background-size: 199px;
  top: 15px;
  left: 0px;
}
@media screen and (min-width: 992px) {
  .how-help-area .how-help-box .how-help-item .how-help.pig:before {
    width: 251px;
    height: 199px;
    background: url(../img/plan/plan_pic01.png) no-repeat;
    background-size: 251px;
    left: 40px;
  }
}
.how-help-area .how-help-box .how-help-item .how-help.pig:after {
  content: "";
  display: none;
  width: 97px;
  height: 45px;
  background: url(../img/plan/plan_pic01-2.png) no-repeat;
  position: absolute;
  right: 35px;
  bottom: 15px;
}
@media screen and (min-width: 992px) {
  .how-help-area .how-help-box .how-help-item .how-help.pig:after {
    display: block;
  }
}
.how-help-area .how-help-box .how-help-item .how-help.bag:before {
  width: 182px;
  height: 156px;
  background: url(../img/plan/plan_pic02.png) no-repeat;
  background-size: 182px;
  top: 10px;
  left: 15px;
}
@media screen and (min-width: 992px) {
  .how-help-area .how-help-box .how-help-item .how-help.bag:before {
    width: 222px;
    height: 191px;
    background: url(../img/plan/plan_pic02.png) no-repeat;
    background-size: 222px;
  }
}
.how-help-area .how-help-box .how-help-item .how-help.heart:before {
  width: 161px;
  height: 155px;
  background: url(../img/plan/plan_pic03.png) no-repeat;
  background-size: 161px;
  top: 20px;
  left: 20px;
}
@media screen and (min-width: 992px) {
  .how-help-area .how-help-box .how-help-item .how-help.heart:before {
    width: 191px;
    height: 184px;
    background: url(../img/plan/plan_pic03.png) no-repeat;
    background-size: 191px;
  }
}

.money-use-area {
  padding: 10px 0 0px;
  margin-bottom: 105px;
}
@media screen and (min-width: 992px) {
  .money-use-area {
    padding: 160px 0 150px;
  }
}
.money-use-area .playground {
  text-align: center;
  position: relative;
}
.money-use-area .playground .row {
  margin: auto;
}
@media screen and (min-width: 992px) {
  .money-use-area .playground {
    margin-left: -15px;
    margin-right: -15px;
    background: url(../img/plan/plan_playground.png) center center no-repeat;
    background-size: 799px;
    background: none;
    margin-left: 0px;
    margin-right: 0px;
  }
}
.money-use-area .playground:after {
  content: "";
  display: block;
  clear: both;
}
.money-use-area .playground img {
  max-width: 100%;
  display: none;
}
@media screen and (min-width: 992px) {
  .money-use-area .playground img {
    display: inline-block;
  }
}
.money-use-area .playground .money-used-box {
  text-align: left;
  position: relative;
  width: 300px;
  margin: 0 auto 30px;
  padding-top: 120px;
}
@media screen and (min-width: 560px) {
  .money-use-area .playground .money-used-box {
    padding-top: 0;
    margin: 0;
    min-height: 150px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 185px;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .money-use-area .playground .money-used-box {
    float: left;
    width: 48%;
    min-height: auto;
    padding-right: 0;
  }
}
@media screen and (min-width: 992px) {
  .money-use-area .playground .money-used-box {
    width: 300px;
    position: absolute;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0;
  }
}
.money-use-area .playground .money-used-box:before {
  content: "";
  display: block;
  margin: 0 auto 10px;
  left: 0;
  top: 0;
  width: 160px;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 560px) {
  .money-use-area .playground .money-used-box:before {
    left: 0;
    transform: none;
  }
}
@media screen and (min-width: 768px) {
  .money-use-area .playground .money-used-box:before {
    position: absolute;
    margin: 0;
  }
}
.money-use-area .playground .money-used-box .money-used-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}
@media screen and (min-width: 560px) {
  .money-use-area .playground .money-used-box .money-used-title {
    text-align: left;
  }
}
.money-use-area .playground .money-used-box .money-used-title span.number {
  font-size: 24px;
}
@media screen and (min-width: 560px) {
  .money-use-area .playground .money-used-box .money-used-title span.number {
    font-size: 30px;
  }
}
@media screen and (min-width: 992px) {
  .money-use-area .playground .money-used-box.edu {
    padding-top: 158px;
    top: -65px;
    left: 30px;
  }
}
@media screen and (min-width: 1200px) {
  .money-use-area .playground .money-used-box.edu {
    top: -100px;
    left: 45px;
  }
}
.money-use-area .playground .money-used-box.edu:before {
  width: 170px;
  background: url(../img/plan/plan_hat.png) no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 992px) {
  .money-use-area .playground .money-used-box.edu:before {
    width: 265px;
    height: 151px;
    background-size: 265px;
    top: 0;
    left: 0;
  }
}
.money-use-area .playground .money-used-box.edu .money-used-title {
  color: #6cb55e;
}
@media screen and (min-width: 992px) {
  .money-use-area .playground .money-used-box.skill {
    padding-top: 145px;
    bottom: -207px;
    left: 175px;
  }
}
@media screen and (min-width: 1200px) {
  .money-use-area .playground .money-used-box.skill {
    bottom: -172px;
    left: 250px;
  }
}
.money-use-area .playground .money-used-box.skill:before {
  background: url(../img/plan/plan_drum.png) no-repeat;
  background-size: 100% auto;
  width: 147px;
}
@media screen and (min-width: 560px) {
  .money-use-area .playground .money-used-box.skill:before {
    top: 20px;
    left: 10px;
  }
}
@media screen and (min-width: 992px) {
  .money-use-area .playground .money-used-box.skill:before {
    width: 202px;
    height: 113px;
    background-size: 202px;
    top: 0;
    left: 40px;
  }
}
.money-use-area .playground .money-used-box.skill .money-used-title {
  color: #ff9d12;
}
@media screen and (min-width: 992px) {
  .money-use-area .playground .money-used-box.material {
    padding-top: 169px;
    top: -80px;
    right: -45px;
  }
}
@media screen and (min-width: 1200px) {
  .money-use-area .playground .money-used-box.material {
    top: -120px;
    right: 10px;
  }
}
.money-use-area .playground .money-used-box.material:before {
  background: url(../img/plan/plan_ruler.png) no-repeat;
  background-size: 100% auto;
  width: 130px;
}
@media screen and (min-width: 560px) {
  .money-use-area .playground .money-used-box.material:before {
    top: -15px;
  }
}
@media screen and (min-width: 768px) {
  .money-use-area .playground .money-used-box.material:before {
    top: 0;
  }
}
@media screen and (min-width: 992px) {
  .money-use-area .playground .money-used-box.material:before {
    width: 182px;
    height: 169px;
    background-size: 182px;
    margin: 0;
    top: 0;
    left: -20px;
  }
}
.money-use-area .playground .money-used-box.material .money-used-title {
  color: #fe7363;
}
@media screen and (min-width: 992px) {
  .money-use-area .playground .money-used-box.visit {
    padding-top: 190px;
    top: -145px;
    right: 292px;
  }
}
@media screen and (min-width: 1200px) {
  .money-use-area .playground .money-used-box.visit {
    top: -150px;
    right: 35%;
  }
}
.money-use-area .playground .money-used-box.visit:before {
  background: url(../img/plan/plan_board.png) no-repeat;
  background-size: 100% auto;
  width: 130px;
}
@media screen and (min-width: 560px) {
  .money-use-area .playground .money-used-box.visit:before {
    left: 10px;
    top: -8px;
  }
}
@media screen and (min-width: 768px) {
  .money-use-area .playground .money-used-box.visit:before {
    top: 0;
  }
}
@media screen and (min-width: 992px) {
  .money-use-area .playground .money-used-box.visit:before {
    width: 209px;
    height: 179px;
    background-size: 209px;
    top: 0;
    left: 15px;
  }
}
.money-use-area .playground .money-used-box.visit .money-used-title {
  color: #3f9ed0;
}
@media screen and (min-width: 992px) {
  .money-use-area .playground .money-used-box.cost {
    padding-top: 185px;
    right: 100px;
    top: 210px;
  }
}
@media screen and (min-width: 1200px) {
  .money-use-area .playground .money-used-box.cost {
    right: 200px;
    top: 175px;
  }
}
.money-use-area .playground .money-used-box.cost:before {
  background: url(../img/plan/plan_cost.png) no-repeat;
  background-size: 100% auto;
  width: 170px;
}
@media screen and (min-width: 992px) {
  .money-use-area .playground .money-used-box.cost:before {
    width: 287px;
    height: 179px;
    background-size: 287px;
    top: 0;
    left: 0;
  }
}
.money-use-area .playground .money-used-box.cost .money-used-title {
  color: #8E75D3;
}

.planning-use-area {
  margin-left: -10px;
  margin-right: -10px;
}
@media screen and (min-width: 1200px) {
  .planning-use-area {
    margin-left: -20px;
    margin-right: -20px;
  }
}
.planning-use-area:after {
  content: "";
  display: block;
  clear: both;
}
.planning-use-area .planning-use-item {
  padding: 0 10px 10px;
}
@media screen and (min-width: 992px) {
  .planning-use-area .planning-use-item {
    float: left;
    width: 33.33%;
  }
}
@media screen and (min-width: 1200px) {
  .planning-use-area .planning-use-item {
    padding: 0 20px 10px;
  }
}
.planning-use-area .planning-use-item .planning-use-box {
  border-radius: 10px;
  box-shadow: 0px 3px 10px #f5ecd0;
  background-color: #fff;
  padding: 20px;
  position: relative;
}
@media screen and (min-width: 640px) {
  .planning-use-area .planning-use-item .planning-use-box {
    padding: 30px 25px 30px 265px;
  }
}
@media screen and (min-width: 992px) {
  .planning-use-area .planning-use-item .planning-use-box {
    min-height: 500px;
    padding: 265px 30px 25px;
  }
}
.planning-use-area .planning-use-item .planning-use-box:before {
  content: "";
  display: block;
  margin: 0 auto 20px;
}
@media screen and (min-width: 640px) {
  .planning-use-area .planning-use-item .planning-use-box:before {
    margin: 0;
    position: absolute;
    left: 20px;
  }
}
@media screen and (min-width: 992px) {
  .planning-use-area .planning-use-item .planning-use-box:before {
    left: 50%;
  }
}
.planning-use-area .planning-use-item .planning-use-box h5 {
  font-size: 18px;
  color: #f8767a;
  font-weight: bold;
  margin-bottom: 15px;
}
.planning-use-area .planning-use-item .planning-use-box p {
  font-size: 16px;
  color: #363636;
  line-height: 1.65;
}
.planning-use-area .planning-use-item .planning-use-box.style1:before {
  width: 215px;
  height: 154px;
  background: url(../img/plan/plan_stage.png) no-repeat;
  background-size: 215px;
  top: 8px;
}
@media screen and (min-width: 992px) {
  .planning-use-area .planning-use-item .planning-use-box.style1:before {
    width: 292px;
    height: 210px;
    background: url(../img/plan/plan_stage.png) no-repeat;
    background-size: 292px;
    top: 35px;
    margin-left: -146px;
  }
}
.planning-use-area .planning-use-item .planning-use-box.style2:before {
  width: 220px;
  height: 165px;
  background: url(../img/plan/plan_telephone.png) no-repeat;
  background-size: 220px;
  top: 16px;
}
@media screen and (min-width: 992px) {
  .planning-use-area .planning-use-item .planning-use-box.style2:before {
    width: 279px;
    height: 210px;
    background: url(../img/plan/plan_telephone.png) no-repeat;
    background-size: 279px;
    top: 40px;
    margin-left: -139.5px;
  }
}
.planning-use-area .planning-use-item .planning-use-box.style3:before {
  width: 193px;
  height: 150px;
  background: url(../img/plan/plan_keyboard.png) no-repeat;
  background-size: 193px;
  top: 11px;
}
@media screen and (min-width: 992px) {
  .planning-use-area .planning-use-item .planning-use-box.style3:before {
    width: 279px;
    height: 217px;
    background: url(../img/plan/plan_keyboard.png) no-repeat;
    background-size: 279px;
    top: 30px;
    margin-left: -139.5px;
  }
}

.faq-area {
  padding-top: 20px;
  padding-bottom: 20px;
}
.faq-area .faq-question-box {
  margin-bottom: 25px;
}
.faq-area .faq-question-box .faq-question-title {
  font-size: 18px;
  font-weight: bold;
  color: #EF7477;
  margin-bottom: 10px;
}
.faq-area .faq-question-box .faq-question-answer {
  font-size: 16px;
  color: #363636;
}
.faq-area .faq-question-box + .faq-question-box {
  padding-top: 25px;
  border-top: 1px dashed #ead691;
}

/*
* @Author: ansen
* @Date:   2018-07-24 17:20:53
* @Last Modified by:   ansen
* @Last Modified time: 2018-07-25 10:10:00
*/
.error-area {
  padding: 90px 0px 40px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .error-area {
    padding: 130px 20px 40px;
  }
}
@media screen and (min-width: 992px) {
  .error-area {
    padding: 130px 120px 40px;
  }
}
.error-area .error-box {
  display: inline-block;
  width: 100%;
  max-width: 653px;
  padding: 35px 35px 40px;
  background-color: #F9EAE5;
  position: relative;
}
@media screen and (min-width: 768px) {
  .error-area .error-box {
    width: auto;
    padding: 35px 120px 40px;
  }
}
.error-area .error-box:before {
  content: "";
  display: none;
  width: 60px;
  height: 67px;
  background: url(../img/error/flower.png) no-repeat;
  background-size: 60px;
  position: absolute;
  bottom: 20px;
  left: 30px;
}
.error-area .error-box:after {
  content: "";
  display: none;
  width: 109px;
  height: 75px;
  background: url(../img/error/handprint.png) no-repeat;
  background-size: 109px;
  position: absolute;
  bottom: 10px;
  right: 11px;
}
@media screen and (min-width: 768px) {
  .error-area .error-box:before, .error-area .error-box:after {
    display: block;
  }
}
.error-area .error-box .error-img {
  margin-bottom: 12px;
}
.error-area .error-box .error-img img {
  max-width: 100%;
}
.error-area .error-box .error-img img.pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .error-area .error-box .error-img img.pc {
    display: inline-block;
  }
  .error-area .error-box .error-img img.mb {
    display: none;
  }
}
.error-area .error-box .error-text {
  font-size: 18px;
}
@media screen and (min-width: 768px) {
  .error-area .error-box .error-text {
    font-size: 21px;
    font-weight: bold;
  }
}
.error-area .error-box .border-top {
  width: 100%;
  height: 9px;
  background: url(../img/error/border/line_straight.png) repeat-x;
  background-size: 170px;
  position: absolute;
  top: -7px;
  left: 0;
}
.error-area .error-box .border-top:before {
  content: "";
  display: block;
  width: 68px;
  height: 68px;
  background: url(../img/error/border/corner_left_up.png) no-repeat;
  background-size: 68px;
  position: absolute;
  top: 0;
  left: -4px;
}
.error-area .error-box .border-top:after {
  content: "";
  display: block;
  width: 68px;
  height: 68px;
  background: url(../img/error/border/corner_right_up.png) no-repeat;
  background-size: 68px;
  position: absolute;
  top: 0;
  right: -4px;
}
.error-area .error-box .border-bottom {
  width: 100%;
  height: 9px;
  background: url(../img/error/border/line_straight.png) repeat-x;
  background-size: 170px;
  position: absolute;
  bottom: -7px;
  left: 0;
}
.error-area .error-box .border-bottom:before {
  content: "";
  display: block;
  width: 68px;
  height: 68px;
  background: url(../img/error/border/corner_left_down.png) no-repeat;
  background-size: 68px;
  position: absolute;
  bottom: -2px;
  left: -4px;
}
.error-area .error-box .border-bottom:after {
  content: "";
  display: block;
  width: 68px;
  height: 68px;
  background: url(../img/error/border/corner_right_down.png) no-repeat;
  background-size: 68px;
  position: absolute;
  bottom: -2px;
  right: -4px;
}
.error-area .error-box .border-left {
  width: 8px;
  height: 100%;
  background: url(../img/error/border/line_across.png) repeat-y;
  background-size: 8px;
  position: absolute;
  top: 0;
  left: -4px;
}
.error-area .error-box .border-right {
  width: 8px;
  height: 100%;
  background: url(../img/error/border/line_across.png) repeat-y;
  background-size: 8px;
  position: absolute;
  top: 0;
  right: -3px;
}
.error-area .error-box .kid-left {
  display: none;
  width: 102px;
  height: 170px;
  background: url(../img/error/kid_01.png) no-repeat;
  background-size: 102px;
  position: absolute;
  top: 55px;
  left: -102px;
}
@media screen and (min-width: 992px) {
  .error-area .error-box .kid-left {
    display: block;
  }
}
.error-area .error-box .kid-topleft {
  width: 127px;
  height: 66px;
  background: url(../img/error/kid_03.png) no-repeat;
  background-size: 127px;
  position: absolute;
  top: -56px;
  left: 10px;
}
@media screen and (min-width: 768px) {
  .error-area .error-box .kid-topleft {
    left: 56px;
  }
}
.error-area .error-box .kid-topright {
  width: 140px;
  height: 99px;
  background: url(../img/error/kid_04.png) no-repeat;
  background-size: 140px;
  position: absolute;
  top: -86px;
  right: 10px;
}
@media screen and (min-width: 768px) {
  .error-area .error-box .kid-topright {
    right: 35px;
  }
}
.error-area .error-box .kid-right {
  display: none;
  width: 84px;
  height: 249px;
  background: url(../img/error/kid_02.png) no-repeat;
  background-size: 84px;
  position: absolute;
  top: 0;
  right: -85px;
}
@media screen and (min-width: 992px) {
  .error-area .error-box .kid-right {
    display: block;
  }
}
.error-area .error-box .success-btn-area {
  margin-top: 15px;
}
.error-area .error-box .success-btn-area .btn {
  width: 146px;
  margin: 10px 25px 0;
}
/*# sourceMappingURL=public/e_17_016_planet/maps/base.css.map */