@import url("https://fonts.googleapis.com");
@import url("https://fonts.gstatic.com");
@import url("https://fonts.googleapis.com/css2?family=Anuphan:wght@100..700&display=swap");
* {
  outline: none !important;
  margin: 0;
  box-sizing: border-box; }

a {
  cursor: pointer;
  outline: none !important;
  text-decoration: none; }

a::focus, a::active {
  outline: none !important; }

img {
  display: block;
  width: 100%; }

body {
  margin: 0; }

ul, ol {
  list-style: none;
  padding: 0; }

table {
  width: 100%; }

.hide {
  visibility: hidden;
  height: 0;
  width: 0;
  display: block;
  overflow: hidden; }

.overflow-hidden {
  overflow: hidden; }

.align-center {
  text-align: center; }

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

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

.underline {
  text-decoration: underline; }

.bdrd-1r {
  border-radius: 1rem; }

.wd-auto {
  width: auto; }

.wd-100pr {
  width: 100%; }

.wd-30 {
  width: 30px; }

.wd-40 {
  width: 40px; }

.wd-60 {
  width: 60px; }

.wd-100 {
  width: 100px; }

.wd-140 {
  width: 140px; }

.wd-200 {
  width: 200px; }

.wd-240 {
  width: 240px; }

.wd-320 {
  width: 320px; }

.wd-420 {
  width: 100%;
  max-width: 420px; }

.wd-520 {
  width: 100%;
  max-width: 520px; }

.wd-580 {
  width: 100%;
  max-width: 580px; }

.wd-680 {
  width: 100%;
  max-width: 680px; }

.wd-960 {
  width: 100%;
  max-width: 960px; }

.h-full {
  height: 100vh; }

.mg-auto {
  margin-left: auto;
  margin-right: auto; }

.mg-0 {
  margin: 0; }

.mg-t0 {
  margin-top: 0; }

.mg-r0 {
  margin-right: 0; }

.mg-b0 {
  margin-bottom: 0; }

.mg-l0 {
  margin-left: 0; }

.mg-10 {
  margin: 10px; }

.mg-20 {
  margin: 20px; }

.mg-30 {
  margin: 30px; }

.mg-40 {
  margin: 40px; }

.mg-tb10 {
  margin: 10px 0; }

.mg-tb20 {
  margin: 20px 0; }

.mg-tb40 {
  margin: 40px 0; }

.mg-tb60 {
  margin: 60px 0; }

.mg-lr10 {
  margin: 0 10px; }

.mg-lr20 {
  margin: 0 20px; }

.mg-t10 {
  margin-top: 10px; }

.mg-t20 {
  margin-top: 20px; }

.mg-t30 {
  margin-top: 30px; }

.mg-t40 {
  margin-top: 40px; }

.mg-t60 {
  margin-top: 60px; }

.mg-r10 {
  margin-right: 10px; }

.mg-r20 {
  margin-right: 20px; }

.mg-r30 {
  margin-right: 30px; }

.mg-r40 {
  margin-right: 40px; }

.mg-b5 {
  margin-bottom: 5px; }

.mg-b10, ul.list-disc, ol.list-decimal {
  margin-bottom: 10px; }

.mg-b20 {
  margin-bottom: 20px; }

.mg-b30 {
  margin-bottom: 30px; }

.mg-b40 {
  margin-bottom: 40px; }

.mg-b60 {
  margin-bottom: 60px; }

.mg-b90 {
  margin-bottom: 90px; }

.mg-l10 {
  margin-left: 10px; }

.mg-l15 {
  margin-left: 15px; }

.mg-l20 {
  margin-left: 20px; }

.mg-l30, ul.list-disc, ol.list-decimal {
  margin-left: 30px; }

.mg-l40 {
  margin-left: 40px; }

.pd-0 {
  padding: 0; }

.pd-t0 {
  padding-top: 0; }

.pd-r0 {
  padding-right: 0; }

.pd-b0 {
  padding-bottom: 0; }

.pd-l0 {
  padding-left: 0; }

.pd-0 {
  padding: 0px; }

.pd-5 {
  padding: 5px; }

.pd-10 {
  padding: 10px; }

.pd-20 {
  padding: 20px; }

.pd-30 {
  padding: 30px; }

.pd-40 {
  padding: 40px; }

.pd-tb10 {
  padding: 10px 0; }

.pd-tb20 {
  padding: 20px 0; }

.pd-lr10 {
  padding: 0 10px; }

.pd-lr20 {
  padding: 0 20px; }

.pd-t10 {
  padding-top: 10px; }

.pd-t20 {
  padding-top: 20px; }

.pd-t30 {
  padding-top: 30px; }

.pd-t40 {
  padding-top: 40px; }

.pd-t60 {
  padding-top: 60px; }

.pd-r10 {
  padding-right: 10px; }

.pd-r20 {
  padding-right: 20px; }

.pd-r30 {
  padding-right: 30px; }

.pd-r40 {
  padding-right: 40px; }

.pd-b10 {
  padding-bottom: 10px; }

.pd-b20 {
  padding-bottom: 20px; }

.pd-b30 {
  padding-bottom: 30px; }

.pd-b40 {
  padding-bottom: 40px; }

.pd-l10 {
  padding-left: 10px; }

.pd-l20 {
  padding-left: 20px; }

.pd-l30 {
  padding-left: 30px; }

.pd-l40 {
  padding-left: 40px; }

.relative {
  position: relative; }

.absolute {
  position: absolute; }

.fixed {
  position: fixed; }

.none {
  display: none; }

.block, #logo a, .logo a {
  display: block; }

.inline {
  display: inline; }

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

.opacity-04 {
  opacity: 0.4 !important; }

.opacity-02 {
  opacity: 0.2 !important; }

.opacity-1 {
  opacity: 1; }

ul.list-disc {
  list-style: disc; }

ol.list-decimal {
  list-style: decimal; }

.float-left {
  float: left; }

.float-right {
  float: right; }

body {
  overflow-x: hidden; }

.scroll-non::-webkit-scrollbar {
  display: none; }

.anuphan, body, input, select, textarea {
  font-family: "Anuphan", sans-serif;
  font-optical-sizing: auto;
  font-style: normal; }

body, input, select, textarea {
  font-size: 16px;
  color: black; }

a {
  color: black; }

h1 {
  font-weight: 600; }

.fs-3r {
  font-size: 3rem; }

.fs-2r {
  font-size: 2rem; }

.fs-1r {
  font-size: 1rem; }

.fs-1-2r {
  font-size: 1.2rem; }

.fs-1-5r {
  font-size: 1.5rem; }

.fs-09r {
  font-size: 0.9rem; }

.fs-08r {
  font-size: 0.8rem; }

.fs-075r {
  font-size: 0.75rem; }

#main-navigation a {
  color: #0351B5;
  font-weight: 600; }

#main-navigation a.active {
  color: #E71984; }

[class^='card'] h1 {
  font-size: 20px;
  font-weight: 400; }
[class^='card'] h1 > small {
  display: block;
  color: #666; }
[class^='card'] .category {
  font-weight: 600;
  color: #0351B5; }
[class^='card'] time {
  color: #999; }
[class^='card'] time + span {
  color: #999; }
[class^='card'] .time-price {
  color: #999; }
[class^='card'] .direction-map a,
[class^='card'] .share-social a {
  font-size: 0; }
[class^='card'] .view-more {
  text-align: center;
  font-weight: bold; }
[class^='card'] .view-more a {
  color: #0351B5; }

.blue-link {
  text-align: center;
  font-weight: bold; }

.blue-link a {
  color: #0351B5; }

.blue-link.xs {
  font-weight: normal; }

#notics-panel {
  color: #785D03; }

[class*='card-large'] h1 {
  font-size: 32px;
  font-weight: 500; }

#reward-archive .container > h1 {
  text-align: center; }

.pink-button {
  text-align: center; }

.pink-button.left {
  text-align: left; }

#quiz-trip .container > h1 {
  text-align: center; }

.progress-bar {
  text-align: center; }

.view-all {
  text-align: center; }
  .view-all a {
    color: #FFF; }

.blue-button {
  text-align: center; }
  .blue-button a {
    color: #FFF; }

#content-popup h1,
#content-alert h1 {
  font-size: 32px;
  font-weight: 500; }
#content-popup .close a,
#content-alert .close a {
  font-size: 0; }
#content-popup .instruction,
#content-alert .instruction {
  text-align: center; }

#content-alert {
  text-align: center; }

#content-popup.medium {
  text-align: center; }
  #content-popup.medium .blue-link {
    font-weight: normal; }
  #content-popup.medium .blue-link a {
    font-weight: 600;
    text-decoration: underline; }

#content-popup.small {
  text-align: center; }

#mail-page {
  text-align: center; }
  #mail-page h1 {
    font-size: 32px; }

#article-highlight .content-entry h1,
#reward-highlight .content-entry h1 {
  font-size: 30px;
  font-weight: 400; }

#compettition-highlight .content-entry h1 {
  font-size: 32px;
  font-weight: 400; }

.get-coin {
  color: #785D03; }
  .get-coin strong em {
    font-style: normal;
    font-size: 50px; }

.instruction {
  color: #785D03; }

.msg-error {
  text-align: left;
  color: #E8308A; }

.instruction-alert {
  color: #E8308A; }

.message-alert {
  color: #E8308A; }

.countdown {
  font-size: 50px; }

.code {
  color: #785D03;
  font-size: 40px; }

#my-profile h1 {
  font-size: 24px; }
#my-profile .edit-profile > a {
  color: #FFF; }

.compettition-comming {
  text-align: center;
  color: #FFF; }
  .compettition-comming > * {
    margin-bottom: 16px; }
  .compettition-comming h1 {
    font-size: 48px; }
  .compettition-comming h2 {
    font-size: 32px; }
  .compettition-comming p {
    font-size: 24px; }

body > footer {
  color: #FFF; }
  body > footer strong {
    font-weight: 500; }
  body > footer a {
    color: #FFF; }

#quiz-trip h1 {
  font-size: 24px;
  font-weight: 500; }
#quiz-trip h1 strong {
  font-size: 32px;
  font-weight: 500; }
#quiz-trip .line-button a {
  font-size: 20px; }

@media (max-width: 1024px) {
  #article-highlight .content-entry h1,
  #reward-highlight .content-entry h1,
  #compettition-highlight .content-entry h1,
  #content-popup [class^='card'] .content-entry h1 {
    font-size: 24px; } }
@media (max-width: 620px) {
  #article-highlight .content-entry h1,
  #reward-highlight .content-entry h1,
  #compettition-highlight .content-entry h1 {
    font-size: 20px; }

  #quiz-trip h1 {
    font-size: 20px; }
  #quiz-trip h1 strong {
    font-size: 28px; }
  #quiz-trip .line-button a {
    font-size: 18px; }

  .compettition-comming h1 {
    font-size: 40px; }
  .compettition-comming h2 {
    font-size: 22px; }
  .compettition-comming p {
    font-size: 18px; } }
@media (max-width: 420px) {
  .compettition-comming p {
    font-size: 16px; } }
.container {
  width: 100%;
  max-width: 1460px;
  padding: 0 60px;
  margin-left: auto;
  margin-right: auto; }

.container-full {
  width: 100%;
  max-width: 1400px;
  padding: 0 60px;
  margin-left: auto;
  margin-right: auto; }

.cont-s {
  max-width: 360px; }

.cont-m {
  max-width: 480px; }

.container:after,
.container-full:after {
  content: '';
  display: block;
  height: 0;
  visibility: hidden;
  clear: both; }

.grdgp-10 {
  display: grid;
  grid-gap: 10px; }

.grdgp-20 {
  display: grid;
  grid-gap: 20px; }

.grdgp-30 {
  display: grid;
  grid-gap: 30px; }

.grdgp-32 {
  display: grid;
  grid-gap: 32px; }

.grdgp-40 {
  display: grid;
  grid-gap: 40px; }

.grdgp-60 {
  display: grid;
  grid-gap: 60px; }

[class*='grid'] {
  display: grid;
  grid-gap: 32px; }

[class*='grdgp-0'] {
  display: grid;
  grid-gap: 0px; }

[class*='grdgp-10'] {
  display: grid;
  grid-gap: 10px; }

[class*='grdgp-20'] {
  display: grid;
  grid-gap: 20px; }

[class*='grdgp-30'] {
  display: grid;
  grid-gap: 30px; }

[class*='grdgp-32'] {
  display: grid;
  grid-gap: 32px; }

[class*='grdgp-40'] {
  display: grid;
  grid-gap: 40px; }

[class*='grdgp-60'] {
  display: grid;
  grid-gap: 60px; }

[class*='grdgp-100'] {
  display: grid;
  grid-gap: 100px; }

[class*='grid-2c'] {
  grid-template-columns: repeat(2, 1fr); }

[class*='grid-3c'] {
  grid-template-columns: repeat(3, 1fr); }

[class*='grid-4c'] {
  grid-template-columns: repeat(4, 1fr); }

[class*='grid-5c'] {
  grid-template-columns: repeat(5, 1fr); }

[class*='grid-6c'] {
  grid-template-columns: repeat(6, 1fr); }

[class*='grid-2c-chd'] {
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 10px; }

[class*='grid-2c-chd'] > * {
  display: grid;
  grid-gap: 20px; }

[class*='grid-2c-chd'] > * {
  grid-template-columns: repeat(2, 1fr); }

[class^='grid-3c'][class*='layout-2c'][class*='layout-st-2c'] > *:first-child {
  grid-column-start: 1;
  grid-column-end: 3; }

[class^='grid-3c'][class*='layout-2c'][class*='layout-nd-2c'] > *:first-child + * {
  grid-column-start: 2;
  grid-column-end: 4; }

[class^='grid-4c'][class*='layout-2c'][class*='layout-st-3c'] > *:first-child {
  grid-column-start: 1;
  grid-column-end: 4; }

[class^='grid-4c'][class*='layout-2c'][class*='layout-nd-3c'] > *:first-child + * {
  grid-column-start: 2;
  grid-column-end: 5; }

[class^='grid-4c'][class*='layout-2c'][class*='layout-nd-2c'] > *:first-child + * {
  grid-column-start: 2;
  grid-column-end: 4; }

[class^='grid-5c'][class*='layout-2c'][class*='layout-st-3c'] > *:first-child {
  grid-column-start: 1;
  grid-column-end: 4; }

[class^='grid-5c'][class*='layout-2c'][class*='layout-nd-2c'] > *:first-child + * {
  grid-column-start: 4;
  grid-column-end: 6; }

[class^='grid-5c'][class*='layout-2c'][class*='layout-st-2c'] > *:first-child {
  grid-column-start: 1;
  grid-column-end: 3; }

[class^='grid-5c'][class*='layout-2c'][class*='layout-nd-3c'] > *:first-child + * {
  grid-column-start: 3;
  grid-column-end: 6; }

[class^='grid-4c'][class*='layout-3c'][class*='layout-nd-2c'] > *:first-child + * {
  grid-column-start: 2;
  grid-column-end: 4; }

[class^='grid-5c'][class*='layout-3c'][class*='layout-nd-3c'] > *:first-child + * {
  grid-column-start: 2;
  grid-column-end: 5; }

[class^='grid-5c'][class*='layout-4c'][class*='layout-st-2c'] > *:first-child {
  grid-column-start: 1;
  grid-column-end: 3; }

@media (max-width: 1200px) {
  .container {
    padding-left: 40px;
    padding-right: 40px; }

  [class^='grid-5c'][class*='mid-3c'] {
    grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) {
  [class^='grid-5c'] {
    grid-template-columns: repeat(4, 1fr); }

  [class^='grid-6c'] {
    grid-template-columns: repeat(4, 1fr); }

  [class*='mid-3c'] {
    grid-template-columns: repeat(3, 1fr); }

  [class^='grid-5c'][class*='layout-2c'] {
    grid-template-columns: repeat(5, 1fr); }

  [class^='grid-4c'][class*='layout-3c'] {
    grid-template-columns: repeat(4, 1fr); }

  [class^='grid-5c'][class*='layout-3c'] {
    grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 860px) {
  .container {
    padding-left: 20px;
    padding-right: 20px; }

  [class^='grid-5c'] {
    grid-template-columns: repeat(3, 1fr); }

  [class^='grid-6c'] {
    grid-template-columns: repeat(3, 1fr); }

  [class^='grid-4c'] {
    grid-template-columns: repeat(2, 1fr); }

  [class*='mid-2c'] {
    grid-template-columns: repeat(2, 1fr); }

  [class^='grid-5c'][class*='min-2c'] {
    grid-template-columns: repeat(2, 1fr); }

  [class^='grid-3c'][class*='layout-2c'] {
    grid-template-columns: repeat(1, 1fr); }

  [class^='grid-3c'][class*='layout-2c'][class*='layout-st-2c'] > *:first-child {
    grid-column-start: auto;
    grid-column-end: auto; }

  [class^='grid-3c'][class*='layout-2c'][class*='layout-nd-2c'] > *:first-child + * {
    grid-column-start: auto;
    grid-column-end: auto; }

  [class^='grid-4c'][class*='layout-2c'] {
    grid-template-columns: repeat(1, 1fr); }

  [class^='grid-4c'][class*='layout-2c'][class*='layout-st-3c'] > *:first-child {
    grid-column-start: auto;
    grid-column-end: auto; }

  [class^='grid-4c'][class*='layout-2c'][class*='layout-nd-3c'] > *:first-child + * {
    grid-column-start: auto;
    grid-column-end: auto; }

  [class^='grid-4c'][class*='layout-3c'] {
    grid-template-columns: repeat(1, 1fr); }

  [class^='grid-4c'][class*='layout-3c'][class*='layout-nd-2c'] > *:first-child + * {
    grid-column-start: auto;
    grid-column-end: auto; } }
@media (max-width: 680px) {
  [class^='grid-5c'] {
    grid-template-columns: repeat(2, 1fr); }

  [class^='grid-6c'] {
    grid-template-columns: repeat(2, 1fr); }

  [class*='mid-1c'] {
    grid-template-columns: repeat(1, 1fr); }

  [class*='grid'] {
    grid-gap: 20px; }

  [class^='grid-2c'][class*='layout-2c'] {
    grid-template-columns: repeat(1, 1fr); }

  [class^='grid-5c'][class*='layout-2c'] {
    grid-template-columns: repeat(1, 1fr); }

  [class^='grid-5c'][class*='layout-2c'][class*='layout-st-3c'] > *:first-child {
    grid-column-start: auto;
    grid-column-end: auto; }

  [class^='grid-5c'][class*='layout-2c'][class*='layout-nd-2c'] > *:first-child + * {
    grid-column-start: auto;
    grid-column-end: auto; }

  [class^='grid-5c'][class*='layout-2c'][class*='layout-st-2c'] > *:first-child {
    grid-column-start: auto;
    grid-column-end: auto; }

  [class^='grid-5c'][class*='layout-2c'][class*='layout-nd-3c'] > *:first-child + * {
    grid-column-start: auto;
    grid-column-end: auto; }

  [class^='grid-5c'][class*='layout-3c'] {
    grid-template-columns: repeat(1, 1fr); }

  [class^='grid-5c'][class*='layout-3c'][class*='layout-nd-3c'] > *:first-child + * {
    grid-column-start: auto;
    grid-column-end: auto; } }
@media (max-width: 520px) {
  [class*="min-1c"], [class*='mid-2c'], [class^='grid-3c'] {
    grid-template-columns: repeat(1, 1fr); }

  [class^='grid-5c'][class*='min-2c'] {
    grid-template-columns: repeat(1, 1fr); } }
#quiz-trip {
  background: url(../img/bg/quiz.jpg) center top no-repeat;
  background-size: cover; }
  #quiz-trip .card-quiz {
    position: absolute;
    left: 50%;
    top: 120px;
    transform: translate(-50%, 0);
    max-width: 600px;
    width: 100%;
    padding: 0 20px; }
  #quiz-trip .card-quiz.absolute {
    top: 50%;
    transform: translate(-50%, -50%); }
  #quiz-trip figure {
    margin: 32px 0; }
  #quiz-trip figure img {
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    max-width: 260px; }
  #quiz-trip h1 {
    margin-bottom: 30px; }

#quiz-trip.start {
  background: url(../img/bg/dsk.jpg) center top no-repeat;
  background-size: cover; }

#quiz-trip.start h1 strong {
  background: url(../img/bg/dsk-tx.png) center top no-repeat;
  background-size: 100%;
  font-size: 0;
  width: 100%;
  height: 300px;
  display: block; }

#quiz-trip.start .card-quiz {
  max-width: 960px; }

#quiz-trip.start .line-button a {
  background: url(../img/bg/btn.png) center top no-repeat;
  background-size: 100%;
  font-size: 0;
  border: 0;
  height: 100px; }

#quiz-trip.start .line-button a:hover {
  background: url(../img/bg/btn.png) center top no-repeat;
  background-size: 100%; }

#quiz-trip.result {
  height: 100vh;
  background-size: 150%;
  background-position: center; }

#quiz-trip.result .container {
  margin: 0 auto; }

#quiz-trip.result .card-quiz {
  position: static;
  top: 0;
  left: 0;
  transform: translate(0);
  margin: 0 auto;
  padding: 0; }

#quiz-trip.result .card-quiz h1 {
  margin-bottom: 16px; }

#quiz-trip.result .blue-button a {
  padding: 6px 16px; }

#quiz-trip.result .line-button a {
  padding: 6px 16px; }

.card-quiz[class*='grid'] {
  text-align: left; }

.card-article {
  border-radius: 16px;
  padding: 16px;
  background: #FFF;
  overflow: hidden;
  box-shadow: 0 0 3px #DDD; }
  .card-article h1, .card-article p {
    margin-bottom: 16px; }
  .card-article figure {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px; }
  .card-article .category {
    margin-bottom: 8px; }
  .card-article .category + p {
    display: none; }
  .card-article time {
    display: block; }
  .card-article time + span {
    display: block; }
  .card-article .time-price {
    float: left;
    width: 68%; }
    .card-article .time-price li {
      background-repeat: no-repeat;
      padding-left: 30px;
      font-size: 14px;
      line-height: 20px; }
  .card-article .map-address {
    background: url(../img/icn/map-g.png) left 3px;
    background-size: 17px;
    margin-bottom: 0;
    line-height: 24px;
    color: #999; }
  .card-article .time-service {
    background: url(../img/icn/clock.png) left center;
    background-size: 19px;
    margin-bottom: 4px; }
    .card-article .time-service time {
      margin-bottom: 0 !important; }
  .card-article .price-rate {
    background-image: url(../img/icn/price.png);
    margin-bottom: 8px; }
  .card-article .content-entry *:last-child {
    margin-bottom: 0; }
  .card-article nav {
    float: right;
    margin-top: 0; }
    .card-article nav p {
      margin-bottom: 0;
      float: left;
      margin-left: 16px; }
    .card-article nav p a {
      display: block;
      width: 40px;
      height: 40px;
      background: #0351B5;
      background-size: 20px;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 20px; }
    .card-article nav p.edit-button a {
      display: inline-block;
      border-radius: 0;
      padding: 4px;
      width: auto;
      height: auto;
      background: #FDC300;
      border-radius: 4px; }
    .card-article nav p.edit-button a + a {
      background: #f00;
      color: #FFF; }
    .card-article nav .direction-map a {
      background-image: url(../img/icn/map.png); }
    .card-article nav .share-social a {
      background-image: url(../img/icn/share.png); }

p.edit-button {
  display: inline-block; }

p.edit-button a {
  display: inline-block;
  border-radius: 0;
  padding: 4px;
  width: auto;
  height: auto;
  background: #FDC300;
  border-radius: 4px; }

p.edit-button a + a {
  background: #f00;
  color: #FFF; }

.quiz-regult {
  text-align: center; }
  .quiz-regult img {
    width: auto;
    height: 100vh;
    margin: 0 auto; }

.card-quiz .description {
  display: none; }

.card-large figure img {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px; }
.card-large figure.right-order {
  order: 2; }
.card-large .content-entry {
  position: relative; }
.card-large .content-entry > div {
  position: absolute;
  top: 45%;
  transform: translateY(-50%); }
.card-large h1 {
  margin-bottom: 16px; }
.card-large p {
  margin-bottom: 16px; }
.card-large ul {
  margin: -10px 0 16px; }
.card-large ul li {
  list-style: disc;
  margin-left: 20px; }
.card-large .line-button {
  margin-bottom: 0; }
.card-large .pink-button {
  text-align: left; }
.card-large ul li li {
  list-style: circle; }
.card-large h2 {
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 8px; }

#compettition-highlight nav {
  float: right; }
#compettition-highlight nav p {
  margin-left: 0; }
#compettition-highlight .user-owner {
  float: left;
  width: 75%; }
#compettition-highlight .user-owner p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; }
#compettition-highlight .blue-button {
  float: right;
  margin-top: 0; }

#compettition-archive .container > header {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto; }
#compettition-archive nav p {
  margin-left: 0; }
#compettition-archive .user-owner {
  float: left;
  width: 75%; }
#compettition-archive .user-owner p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; }

.card-article.compettition figure {
  position: relative; }
.card-article.compettition .vote-button {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1; }
.card-article.compettition .vote-button a {
  background: url(../img/icn/love-w.png) 10px center no-repeat rgba(64, 178, 230, 0.8);
  background-size: 24px;
  border-radius: 16px;
  padding: 16px;
  padding-left: 40px;
  color: #FFF; }
.card-article.compettition .user-owner {
  float: left; }
  .card-article.compettition .user-owner figure {
    float: left;
    width: 50px;
    border-radius: 50px;
    overflow: hidden;
    margin-right: 10px; }
  .card-article.compettition .user-owner p {
    margin-top: 13px; }

@media (max-width: 1200px) {
  .card-large .content-entry > div {
    position: static;
    transform: translateY(0); } }
@media (max-width: 680px) {
  .card-large figure.right-order {
    order: 0; }

  #quiz-trip.start {
    background: url(../img/bg/mob.png) center top no-repeat;
    background-size: cover; }

  #quiz-trip.start h1 strong {
    background: url(../img/bg/mob-tx.png) center top no-repeat;
    background-size: 80%;
    height: 400px; }

  #quiz-trip.start .line-button a {
    background: url(../img/bg/btn.png) center top no-repeat;
    background-size: 80%; }

  #quiz-trip.start .line-button a:hover {
    background: url(../img/bg/btn.png) center top no-repeat;
    background-size: 80%; } }
@media (max-width: 580px) {
  #quiz-trip.result .container {
    padding: 0; }

  .quiz-regult img {
    width: 100%;
    height: auto; } }
@media (max-width: 480px) {
  .card-article nav {
    margin-top: 0; }
  .card-article nav p {
    margin-left: 8px; } }
.reward-button-next {
  background: none;
  width: 48px;
  height: 48px;
  border: 2px solid #0351B5;
  border-radius: 40px;
  top: 50%;
  right: 0;
  position: absolute;
  z-index: 10; }

.reward-button-next:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-top: 2px solid #0351B5;
  border-right: 2px solid #0351B5;
  transform: rotate(45deg);
  top: 12px;
  left: 9px; }

.reward-button-prev {
  background: none;
  width: 48px;
  height: 48px;
  border: 2px solid #0351B5;
  border-radius: 40px;
  top: 50%;
  left: 0;
  position: absolute;
  z-index: 10; }

.reward-button-prev:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-top: 2px solid #0351B5;
  border-left: 2px solid #0351B5;
  transform: rotate(-45deg);
  top: 12px;
  left: 18px; }

.swiper-container .swiper-button-next {
  background: rgba(255, 255, 255, 0.6);
  width: 48px;
  height: 48px;
  border: 2px solid #0351B5;
  border-radius: 40px;
  top: 50%;
  right: 20px; }
.swiper-container .swiper-button-next:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-top: 2px solid #0351B5;
  border-right: 2px solid #0351B5;
  transform: rotate(45deg);
  top: 12px;
  left: 9px; }
.swiper-container .swiper-button-prev {
  background: rgba(255, 255, 255, 0.6);
  width: 48px;
  height: 48px;
  border: 2px solid #0351B5;
  border-radius: 40px;
  top: 50%;
  left: 20px; }
.swiper-container .swiper-button-prev:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-top: 2px solid #0351B5;
  border-left: 2px solid #0351B5;
  transform: rotate(-45deg);
  top: 12px;
  left: 18px; }

.swiper-button-disabled {
  opacity: 0.25; }

.swiper-container .swiper-popup-next {
  background: rgba(255, 255, 255, 0.6);
  width: 48px;
  height: 48px;
  border: 2px solid #0351B5;
  border-radius: 40px;
  top: 50%;
  right: 20px;
  position: absolute;
  z-index: 10; }
.swiper-container .swiper-popup-next:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-top: 2px solid #0351B5;
  border-right: 2px solid #0351B5;
  transform: rotate(45deg);
  top: 12px;
  left: 9px; }
.swiper-container .swiper-popup-prev {
  background: rgba(255, 255, 255, 0.6);
  width: 48px;
  height: 48px;
  border: 2px solid #0351B5;
  border-radius: 40px;
  top: 50%;
  left: 20px;
  position: absolute;
  z-index: 10; }
.swiper-container .swiper-popup-prev:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-top: 2px solid #0351B5;
  border-left: 2px solid #0351B5;
  transform: rotate(-45deg);
  top: 12px;
  left: 18px; }

.swiper-popup-disabled {
  opacity: 0.25; }

.swiper-pagination {
  left: 50%;
  margin-top: 24px;
  transform: translateX(-50%);
  z-index: 10;
  width: 100%; }
  .swiper-pagination .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    border-radius: 16px;
    margin: 0 4px; }
  .swiper-pagination .swiper-pagination-bullet-active {
    background: #0351B5;
    width: 40px; }

.category-filter {
  position: relative;
  z-index: 20; }
  .category-filter li {
    display: inline-block; }
  .category-filter a {
    display: inline-block;
    border: 1px solid #000;
    border-radius: 16px;
    margin: 6px 8px;
    padding: 8px 16px;
    cursor: pointer; }
  .category-filter .active {
    background: #444;
    color: #FFF; }
  .category-filter .view-all {
    margin-top: 0; }
  .category-filter .view-all a {
    background: none;
    border: 0;
    color: #000;
    border-bottom: 1px solid #000;
    border-radius: 0;
    padding: 0; }

.dropdown-filter {
  border: 1px solid #000;
  border-radius: 16px;
  min-width: 200px;
  float: left;
  height: 48px;
  position: relative;
  padding-top: 40px;
  margin-right: 16px;
  cursor: pointer; }
  .dropdown-filter ul {
    position: absolute;
    top: 45px;
    min-width: 100%; }
  .dropdown-filter li {
    visibility: hidden;
    display: none;
    text-wrap: nowrap; }
  .dropdown-filter li.active {
    visibility: visible;
    top: -40px;
    position: absolute;
    display: block; }
  .dropdown-filter a {
    display: block;
    padding: 8px 16px;
    cursor: pointer;
    text-wrap: nowrap; }

.dropdown-filter.expand {
  z-index: 10; }
  .dropdown-filter.expand ul {
    background: #FFF;
    border: 1px solid #000;
    border-radius: 16px;
    padding: 16px 0; }
  .dropdown-filter.expand li {
    visibility: visible;
    display: block; }
  .dropdown-filter.expand li a {
    transition: .1s all ease; }
  .dropdown-filter.expand li a:hover {
    color: #0351B5;
    font-weight: bold; }
  .dropdown-filter.expand li.active a:hover {
    font-weight: normal; }

.dropdown-select {
  float: left; }

select.filter {
  border: 1px solid #000;
  border-radius: 16px;
  padding: 8px 32px 8px 16px;
  margin: 0 16px 8px 0;
  height: 48px;
  display: inline-block;
  -webkit-appearance: none;
  background: url(../img/icn/arr-d.png) 95% center #FFF no-repeat;
  background-size: 20px; }

.search-filter {
  float: right;
  position: relative; }
  .search-filter input[type='text'] {
    border: 1px solid #000;
    border-radius: 16px;
    padding: 8px 32px 8px 16px;
    width: 100%;
    height: 48px;
    background: url(../img/icn/search.png) 95% center #FFF no-repeat;
    background-size: 24px; }

.blue-button,
.view-all {
  margin-top: 30px; }
  .blue-button a,
  .view-all a {
    background: #0351B5;
    border-radius: 8px;
    padding: 10px 24px;
    display: inline-block; }

.view-more a {
  display: inline-block;
  padding: 8px; }

.pink-button a {
  background: #E71984;
  color: #FFF;
  border-radius: 8px;
  display: inline-block;
  padding: 8px; }
.pink-button button {
  background: #E71984;
  color: #FFF;
  border-radius: 8px;
  display: inline-block;
  padding: 10px;
  border: 0;
  font-size: 16px; }

#notics-panel .pink-button a {
  background: #F48F13; }

.line-button a {
  border: 2px solid #000;
  border-radius: 8px;
  display: inline-block;
  padding: 8px; }

.blue-link a {
  display: inline-block;
  padding: 8px; }

.blue-link.xs {
  margin: 0; }

a.disable {
  background: #CCC;
  cursor: default; }

a.redemed {
  background: #000;
  cursor: default; }

#import-popup .close {
  position: absolute;
  right: -50px;
  top: 0;
  background: #0351B5;
  border-radius: 8px;
  z-index: 20; }
#import-popup .close a {
  display: block;
  width: 40px;
  height: 40px;
  position: relative;
  transform: rotate(45deg); }
#import-popup .close a:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 20px;
  background: #FFF;
  left: 19px;
  top: 10px; }
#import-popup .close a:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background: #FFF;
  left: 10px;
  top: 19px; }

@media (max-width: 1024px) {
  #article-archive.contain-swiper .category-filter {
    clear: both;
    float: left;
    width: 100%;
    margin-bottom: 20px; } }
@media (max-width: 960px) {
  .dropdown-filter {
    float: none;
    display: inline-block;
    margin: 0 8px; }

  .search-filter {
    clear: both;
    float: none;
    padding-top: 16px;
    max-width: 320px;
    margin: 0 auto; }

  .dropdown-select {
    float: none; } }
@media (max-width: 620px) {
  .dropdown-select .filter {
    max-width: 80%;
    width: 80%;
    padding-top: 8px;
    margin-right: 0; }

  .search-filter {
    max-width: 80%;
    width: 80%;
    padding-top: 8px; }

  .search-filter input[type='text'] {
    max-width: 100%;
    width: 100%; } }
#loading:after {
  background: white;
  content: '';
  position: fixed;
  top: -100px;
  left: -100px;
  z-index: 100;
  border-radius: 100px;
  width: 200px;
  height: 200px;
  transform: scale(100);
  transition: .5s ease; }

#loading.after-load:after {
  transform: scale(0); }

.curtain {
  background: white;
  position: fixed;
  top: -100px;
  left: -100px;
  z-index: 100;
  border-radius: 100px;
  width: 200px;
  height: 200px; }

.curtain {
  transform: scale(0);
  -webkit-animation: curtain 2s ease;
  animation: curtain 2s ease;
  transition: 2s all ease; }

@-webkit-keyframes curtain {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(100); } }
@keyframes curtain {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(100); } }
#loading span {
  position: fixed;
  transform: translateY(-50%);
  left: 0%;
  top: 40%;
  width: 100%;
  z-index: 1000;
  display: none; }
#loading span img {
  width: 260px;
  margin: 0 auto; }

.curtain span {
  position: fixed;
  transform: translateY(-50%);
  left: 0%;
  top: 40%;
  width: 100%;
  z-index: 1000; }
.curtain span img {
  width: 260px;
  margin: 0 auto; }

#billboard .swiper-slide figure {
  transition: .6s all ease;
  transform: scale(0.8);
  opacity: 0; }
#billboard .swiper-slide.swiper-slide-active figure {
  transform: scale(1);
  opacity: 1; }

.direction-map a, .share-social a, .pink-button a, .vote-button a, .line-button a,
.close {
  transition: .5s all ease; }

.direction-map a:hover,
.share-social a:hover,
.pink-button a:hover,
.vote-button a:hover,
.line-button a:hover,
.close:hover {
  transform: scale(1.1); }

.pink-button a {
  transition: .5s all ease; }

.pink-button a:hover {
  transform: scale(1.1); }

.language span, .membership span {
  opacity: 0;
  top: 30px;
  transition: .5s all ease; }

.language span.active, .membership span.active {
  opacity: 1;
  top: 40px;
  visibility: visible !important; }

.edit-profile span {
  opacity: 0;
  top: 10px;
  transition: .5s all ease; }

.edit-profile span.active {
  opacity: 1;
  top: 30px;
  visibility: visible !important; }

#secondary-navigation .pink-button a {
  -webkit-animation: pinkBtn 1s infinite ease;
  animation: pinkBtn 1s infinite ease;
  transition: 1s all infinite ease; }
@-webkit-keyframes pinkBtn {
  0% {
    transform: scale(0.95) rotate(1deg); }
  50% {
    transform: scale(1.02) rotate(-1deg); }
  100% {
    transform: scale(0.95) rotate(1deg); } }
@keyframes pinkBtn {
  0% {
    transform: scale(0.95) rotate(1deg); }
  50% {
    transform: scale(1.02) rotate(-1deg); }
  100% {
    transform: scale(0.95) rotate(1deg); } }
#floating-panel > div {
  -webkit-animation: fltDiv 1.5s infinite ease;
  animation: fltDiv 1.5s infinite ease;
  transition: 1.5s all infinite ease; }

@-webkit-keyframes fltDiv {
  0% {
    transform: scale(1.05); }
  50% {
    transform: scale(1); }
  100% {
    transform: scale(1.05); } }
@keyframes fltDiv {
  0% {
    transform: scale(1.05); }
  50% {
    transform: scale(1); }
  100% {
    transform: scale(1.05); } }
#floating-panel .toggle {
  -webkit-animation: fltTTg 1.3s infinite ease;
  animation: fltTTg 1.3s infinite ease;
  transition: 1.3s all infinite ease; }

@-webkit-keyframes fltTTg {
  0% {
    transform: scale(0.95); }
  50% {
    transform: scale(1); }
  100% {
    transform: scale(0.95); } }
@keyframes fltTTg {
  0% {
    transform: scale(0.95); }
  50% {
    transform: scale(1); }
  100% {
    transform: scale(0.95); } }
body {
  background: #f1f1f1; }

.bg-alpha {
  position: fixed;
  background: rgba(0, 0, 0, 0.4);
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100vh; }

section {
  overflow: hidden; }

section .container {
  margin-top: 60px;
  margin-bottom: 60px; }

section .container > h1 {
  font-size: 24px;
  margin-bottom: 32px; }

section header > h1 {
  font-size: 24px;
  margin-bottom: 32px; }

#notics-panel {
  text-align: center;
  overflow: hidden; }
  #notics-panel .container {
    margin-top: 30px;
    margin-bottom: 30px; }
  #notics-panel .container > div {
    background: #F9DF88;
    border: 1px solid #F48F13;
    padding: 12px 16px;
    border-radius: 16px;
    max-width: 980px;
    width: 100%;
    margin: 0 auto; }
  #notics-panel strong.typewrite {
    border-bottom: 1px solid;
    margin-right: 3px; }
  #notics-panel .pink-button {
    margin-left: 8px; }
    #notics-panel .pink-button a {
      padding: 6px 8px;
      font-size: 14px; }

#billboard {
  margin-top: 40px; }
  #billboard .container {
    margin-top: 0;
    margin-bottom: 0; }
  #billboard figure {
    border-radius: 16px;
    overflow: hidden; }

#floating-panel {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 30;
  color: #FFF; }
  #floating-panel div {
    position: absolute;
    bottom: 70px;
    background: rgba(0, 84, 151, 0.8);
    border: 1px solid #2B84CB;
    right: 0;
    padding: 30px 20px 20px;
    border-radius: 24px;
    width: 340px;
    transition: .5s all ease;
    transform: scale(0.8);
    opacity: 0;
    z-index: 1;
    visibility: hidden; }
  #floating-panel div.active {
    transform: scale(1);
    opacity: 1;
    visibility: visible; }
  #floating-panel h1 {
    font-size: 20px;
    margin-bottom: 16px; }
  #floating-panel p {
    margin-bottom: 16px;
    text-align: left; }
  #floating-panel p:first-child {
    margin-bottom: 0;
    position: relative;
    z-index: 2; }
  #floating-panel p:last-child {
    margin-bottom: 0; }
  #floating-panel .pink-button a {
    background: none;
    border: 1px solid #FFF; }
  #floating-panel .toggle a {
    background: rgba(0, 84, 151, 0.8);
    display: block;
    width: 160px;
    border: 1px solid #2B84CB;
    padding: 8px;
    text-align: center;
    border-radius: 16px;
    font-weight: 600;
    color: #FFF; }

.promotion-banner h1 {
  text-align: center; }
.promotion-banner figure {
  border-radius: 16px;
  overflow: hidden; }

section + .promotion-banner .container {
  margin-top: 0; }

#how-to .container > h1 {
  text-align: center; }
#how-to .left h1, #how-to .right-1 h1, #how-to .right-2 h1 {
  font-size: 24px;
  position: relative;
  padding-left: 70px; }
#how-to span {
  border: 1px solid #000;
  border-radius: 100px;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  text-align: center;
  line-height: 50px; }
#how-to p {
  border-top: 1px solid #000;
  padding-top: 24px; }
#how-to p strong {
  margin-top: -60px;
  position: absolute; }
#how-to .left {
  background: #FFE784;
  padding: 24px;
  border-radius: 16px;
  position: relative; }
#how-to .left h1 {
  margin-bottom: 100px; }
#how-to .left p {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px; }
#how-to .right-1 {
  background: #7DD6FF;
  padding: 24px;
  border-radius: 16px;
  margin-bottom: 30px; }
#how-to .right-1 h1 {
  margin-bottom: 60px; }
#how-to .right-2 {
  background: #FFC7EA;
  padding: 24px;
  border-radius: 16px; }
#how-to .right-2 h1 {
  margin-bottom: 60px; }

#reward-archive:last-child {
  margin-bottom: 40px; }

#reward-archive {
  position: relative; }
  #reward-archive .container {
    margin-bottom: 0; }
  #reward-archive .container .container-inner {
    padding-left: 60px;
    padding-right: 60px;
    background: #fc90;
    position: relative; }
  #reward-archive .swiper-slide {
    max-width: 290px;
    width: 100%; }
  #reward-archive .period-time {
    float: left;
    overflow: hidden;
    margin-bottom: 0; }
  #reward-archive .period-time time {
    margin-bottom: 6px; }
  #reward-archive [class^='card'] .pink-button {
    float: right;
    margin-top: 0; }

#article-archive.contain-swiper {
  background: #FFE784; }
  #article-archive.contain-swiper header {
    overflow: hidden;
    margin-bottom: 8px; }
  #article-archive.contain-swiper header > h1 {
    float: left; }
  #article-archive.contain-swiper .category-filter {
    float: right;
    margin-top: 0; }

#article-archive {
  position: relative; }
  #article-archive header {
    text-align: center;
    margin-bottom: 32px; }
  #article-archive header:after {
    content: '';
    display: block;
    clear: both;
    height: 0; }
  #article-archive .swiper-container {
    overflow: inherit !important; }
  #article-archive .swiper-slide {
    max-width: 290px;
    width: 100%; }
  #article-archive .pink-button {
    margin-top: 40px; }

#article-highlight header {
  overflow: hidden;
  text-align: center;
  margin-bottom: 32px; }
#article-highlight header > h1 {
  margin-bottom: 8px; }
#article-highlight .container .container-inner {
  padding-left: 60px;
  padding-right: 60px;
  background: #fc90;
  position: relative; }
#article-highlight .swiper-slide {
  max-width: 390px;
  width: 100%; }

#reward-archive {
  position: relative; }
  #reward-archive header {
    overflow: hidden;
    text-align: center;
    margin-bottom: 32px; }
  #reward-archive .pink-button {
    margin-top: 40px; }

#reward-highlight header {
  overflow: hidden;
  text-align: center;
  margin-bottom: 32px; }
#reward-highlight header > h1 {
  margin-bottom: 8px; }
#reward-highlight .period-time {
  float: left;
  overflow: hidden;
  margin-bottom: 0; }
#reward-highlight .period-time time {
  margin-bottom: 6px; }
#reward-highlight .pink-button {
  float: right; }

#form-field label {
  display: block;
  margin-bottom: 8px; }
#form-field input[type='text'] {
  border: 1px solid #000;
  border-radius: 16px;
  padding: 10px;
  width: 100%;
  height: 48px; }
#form-field input[type='password'] {
  border: 1px solid #000;
  border-radius: 16px;
  padding: 10px;
  width: 100%;
  height: 48px; }
#form-field input[type='email'] {
  border: 1px solid #000;
  border-radius: 16px;
  padding: 10px;
  width: 100%;
  height: 48px; }
#form-field textarea {
  border: 1px solid #000;
  border-radius: 16px;
  padding: 10px;
  width: 100%;
  height: 200px; }
#form-field .msg-error {
  display: block;
  margin-top: 4px; }

#mail-page {
  width: 480px;
  margin: 60px auto;
  height: 55vh; }
  #mail-page [class^="card"] {
    padding: 40px; }

#quiz-trip {
  text-align: center;
  position: relative;
  height: 100vh; }
  #quiz-trip .progress-bar {
    background: #7DD6FF;
    border: 1px solid #2096CD;
    width: 100%;
    border-radius: 16px;
    margin: 0 auto 24px;
    position: relative;
    height: 16px; }
    #quiz-trip .progress-bar em {
      font-style: normal;
      position: relative;
      z-index: 2;
      font-size: 0; }
    #quiz-trip .progress-bar span {
      position: absolute;
      height: 100%;
      left: 0;
      top: 0;
      background: #40B2E6;
      border-radius: 16px;
      z-index: 1; }
  #quiz-trip header {
    position: absolute;
    text-align: center;
    right: 0;
    left: 0;
    top: 20px; }
  #quiz-trip header p {
    font-size: 14px; }
  #quiz-trip .quiz-list li {
    margin-bottom: 16px; }
  #quiz-trip .line-button a:hover {
    background: #F9DF88;
    border-color: #F48F13; }
  #quiz-trip .result-box {
    border: 2px solid #000;
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 20px;
    overflow: hidden; }
  #quiz-trip .good {
    color: green; }
  #quiz-trip .bad {
    color: red; }
  #quiz-trip .result-group {
    clear: both;
    padding-top: 20px; }
    #quiz-trip .result-group .good, #quiz-trip .result-group .bad {
      width: 50%;
      float: left; }
    #quiz-trip .result-group figure {
      float: left;
      width: 30%;
      padding-right: 20px; }
    #quiz-trip .result-group figure + div {
      float: left;
      width: 70%; }
    #quiz-trip .result-group figure + div p {
      margin-bottom: 16px; }
  #quiz-trip .action-button {
    overflow: hidden;
    width: 380px;
    margin: 0 auto;
    position: relative;
    margin-top: -70px; }
    #quiz-trip .action-button > * {
      float: left;
      margin-top: 0;
      margin-left: 40px; }
    #quiz-trip .action-button > * + * {
      float: right;
      margin-right: 40px; }
    #quiz-trip .action-button .line-button {
      float: none;
      margin: 0 auto;
      clear: both; }
    #quiz-trip .action-button .line-button a {
      padding: 4px 14px;
      min-width: auto;
      font-size: 16px;
      border: 0 !important;
      margin-top: 5px; }
    #quiz-trip .action-button .line-button a:hover {
      background: none !important; }
  #quiz-trip .line-button a {
    padding: 8px 16px;
    min-width: 300px; }

#my-profile {
  background: #40B2E6;
  overflow: hidden;
  margin-top: 30px; }
  #my-profile .container {
    position: relative; }
  #my-profile figure {
    width: 45%;
    float: left;
    padding-right: 32px; }
  #my-profile figure img {
    border-radius: 200px; }
  #my-profile .content-entry {
    width: 55%;
    float: right; }
    #my-profile .content-entry h1 {
      margin-bottom: 8px; }
    #my-profile .content-entry h1, #my-profile .content-entry p {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden; }
  #my-profile [class^="card"] {
    padding: 40px;
    max-width: 560px;
    margin: 0 auto; }
  #my-profile ul.icon {
    margin-bottom: 8px; }
    #my-profile ul.icon li {
      margin-bottom: 8px;
      font-weight: bold; }
    #my-profile ul.icon img {
      width: 30px;
      display: inline;
      vertical-align: middle;
      margin-right: 8px; }
  #my-profile .edit-profile {
    position: absolute;
    right: 80px; }
    #my-profile .edit-profile > a {
      border-radius: 20px;
      display: block; }
    #my-profile .edit-profile span {
      background: #FFF;
      overflow: hidden;
      position: absolute;
      right: 0;
      border-radius: 4px;
      box-shadow: 0 1px 5px #CCC;
      visibility: hidden;
      width: max-content; }
    #my-profile .edit-profile span a {
      display: block;
      padding: 6px 16px; }
    #my-profile .edit-profile span a:hover {
      background: #DDD; }

#my-activity .activity-list {
  max-width: 768px;
  margin: 0 auto; }
  #my-activity .activity-list li {
    border: 1px solid #000;
    border-radius: 16px;
    overflow: hidden;
    padding: 16px 24px;
    margin-bottom: 16px; }
  #my-activity .activity-list p {
    float: left; }
  #my-activity .activity-list p span {
    display: block;
    margin-top: 8px;
    color: #666;
    font-size: 12px; }
  #my-activity .activity-list .right {
    float: right; }

#profile-nav {
  text-align: center;
  margin-top: 40px;
  margin-bottom: -30px;
  position: relative;
  z-index: 10; }
  #profile-nav li {
    display: inline-block;
    margin: 0 4px; }
  #profile-nav a.active {
    background: #000;
    color: #FFF; }

#compettition-navigation {
  text-align: center;
  overflow-x: auto;
  margin-bottom: 20px; }
  #compettition-navigation ul {
    padding: 50px 0 20px;
    margin: 0 auto;
    width: max-content; }
  #compettition-navigation li {
    display: inline-block;
    margin: 0 8px;
    text-align: left; }
  #compettition-navigation a {
    background: #CFCFCF;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    padding-right: 70px;
    position: relative;
    display: block; }
  #compettition-navigation li small {
    display: block; }
  #compettition-navigation span {
    background: #EBEBEB;
    color: #333;
    display: block;
    width: 55px;
    height: 55px;
    border-radius: 30px;
    border: 2px solid #CFCFCF;
    position: absolute;
    right: 10px;
    bottom: 10px;
    line-height: 50px;
    text-align: center; }
  #compettition-navigation .commimg a {
    background: #FDC300;
    color: #FFF; }
  #compettition-navigation .commimg span {
    border-color: #FDC300; }
  #compettition-navigation .active a {
    background: #E71984;
    color: #FFF; }
  #compettition-navigation .active span {
    border-color: #E71984; }

#compettition {
  background: #E71984; }

#top-ranking {
  text-align: center; }
  #top-ranking .first-row {
    margin-bottom: 40px;
    min-width: 1024px; }
  #top-ranking .first-in {
    transform: translateX(-50%);
    left: 50%;
    position: relative;
    transition: .5s all ease; }
  #top-ranking .scrolling {
    overflow-x: scroll; }
  #top-ranking .ranking-first {
    background: #FFF;
    border-radius: 24px;
    width: 100%;
    max-width: 300px;
    padding: 30px;
    display: inline-block;
    margin: 0 16px; }
    #top-ranking .ranking-first p:first-child {
      font-size: 32px;
      font-weight: bold;
      color: #E71984;
      margin: 20px 0; }
    #top-ranking .ranking-first figure {
      margin-bottom: 16px;
      border-radius: 300px;
      overflow: hidden; }
    #top-ranking .ranking-first h1 {
      font-size: 24px;
      margin-bottom: 16px; }
    #top-ranking .ranking-first h1 {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden; }
    #top-ranking .ranking-first .vote {
      background: url(../img/icn/love.png) no-repeat;
      background-size: 24px;
      padding-left: 35px;
      display: inline-block;
      line-height: 24px;
      color: #0351B5;
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 24px; }
  #top-ranking .ranking-secound {
    background: #FFF;
    border-radius: 24px;
    width: 100%;
    max-width: 300px;
    padding: 30px 40px;
    display: inline-block; }
    #top-ranking .ranking-secound p:first-child {
      font-size: 24px;
      font-weight: bold;
      color: #E71984;
      margin-bottom: 16px; }
    #top-ranking .ranking-secound figure {
      margin-bottom: 16px;
      border-radius: 300px;
      overflow: hidden; }
    #top-ranking .ranking-secound h1 {
      font-size: 20px;
      margin-bottom: 16px; }
    #top-ranking .ranking-secound h1 {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden; }
    #top-ranking .ranking-secound .vote {
      background: url(../img/icn/love.png) no-repeat;
      background-size: 20px;
      padding-left: 30px;
      display: inline-block;
      line-height: 20px;
      color: #0351B5;
      font-size: 20px;
      font-weight: 500; }
  #top-ranking .ranking-third {
    background: #FFF;
    border-radius: 16px;
    width: 100%;
    max-width: 460px;
    padding: 20px 20px 10px;
    display: inline-block;
    text-align: left;
    margin: 0 8px 30px; }
    #top-ranking .ranking-third p:first-child {
      font-size: 24px;
      font-weight: bold;
      color: #E71984;
      margin-bottom: 16px;
      float: left;
      width: 20%; }
    #top-ranking .ranking-third figure {
      margin-bottom: 16px;
      border-radius: 300px;
      width: 100px;
      float: left;
      margin: -40px 16px 0;
      overflow: hidden; }
    #top-ranking .ranking-third h1 {
      font-size: 16px;
      margin-bottom: 8px; }
    #top-ranking .ranking-third h1 {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden; }
    #top-ranking .ranking-third .vote {
      background: url(../img/icn/love.png) no-repeat;
      background-size: 20px;
      padding-left: 30px;
      display: inline-block;
      line-height: 20px;
      color: #0351B5;
      font-size: 20px;
      font-weight: 500; }

.compettition-comming {
  max-width: 720px;
  margin: 0 auto; }
  .compettition-comming > * {
    margin-bottom: 16px; }
  .compettition-comming .button-action {
    margin-bottom: 60px; }
    .compettition-comming .button-action > * {
      display: inline-block;
      font-size: 20px;
      margin: 0 6px; }
    .compettition-comming .button-action .line-button a {
      background: #FFF;
      border-color: #FFF;
      color: #000; }
    .compettition-comming .button-action .pink-button a {
      background: #FDC300;
      border: 2px solid #FDC300;
      color: #000;
      font-weight: 500; }

#compettition-highlight header,
#compettition-archive header {
  text-align: center;
  margin-bottom: 32px;
  overflow: hidden; }
#compettition-highlight .pink-button,
#compettition-archive .pink-button {
  margin-top: 40px; }
#compettition-highlight .blue-link,
#compettition-archive .blue-link {
  clear: both; }

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden; }

#article-compettition {
  margin-top: 30px; }
  #article-compettition .compettition-excerpt {
    background: #FFE784;
    text-align: center;
    padding-bottom: 40px;
    overflow: hidden; }
  #article-compettition .excerpt {
    max-width: 768px;
    margin: 0 auto 24px; }
    #article-compettition .excerpt h1 {
      margin-bottom: 16px; }
    #article-compettition .excerpt p {
      margin-bottom: 16px; }
  #article-compettition .card-article.compettition {
    background: #FFF;
    border-radius: 16px;
    overflow: hidden;
    max-width: 420px;
    padding: 20px;
    margin: -130px auto 40px;
    text-align: left; }
  #article-compettition .user-owner {
    position: relative; }
    #article-compettition .user-owner figure {
      width: 45%;
      float: left;
      margin-right: 16px;
      margin-bottom: 0; }
    #article-compettition .user-owner figure img {
      border-radius: 200px; }
    #article-compettition .user-owner p strong {
      font-size: 24px;
      font-weight: 500; }
    #article-compettition .user-owner p + p {
      margin-top: 0; }
    #article-compettition .user-owner .line-clamp {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden; }
    #article-compettition .user-owner nav {
      float: left; }
    #article-compettition .user-owner nav p {
      margin: 0 20px 0 0; }
    #article-compettition .user-owner .vote {
      background: url(../img/icn/love.png) left center no-repeat;
      background-size: 20px;
      padding-left: 30px;
      margin-top: 0;
      color: #E71984;
      font-weight: 500;
      float: left;
      width: 40%; }
    #article-compettition .user-owner .vote-button {
      position: static; }
    #article-compettition .user-owner .vote-button a {
      background-color: #E71984;
      width: auto;
      height: auto;
      padding-top: 10px;
      padding-bottom: 10px; }
    #article-compettition .user-owner .share-social {
      position: absolute;
      right: 0; }
  #article-compettition #photo-gallery {
    margin-bottom: 30px; }
    #article-compettition #photo-gallery figure {
      border-radius: 16px;
      overflow: hidden; }
    #article-compettition #photo-gallery .grid-1c:first-child {
      padding-top: 0; }
    #article-compettition #photo-gallery .grid-1c:last-child {
      padding-bottom: 0; }
  #article-compettition [class*='grid-1c'] {
    padding: 32px 0; }
  #article-compettition .compettition-foot {
    max-width: 768px;
    margin: 0 auto 24px;
    text-align: center; }
    #article-compettition .compettition-foot p {
      margin-bottom: 16px; }
    #article-compettition .compettition-foot nav {
      width: 280px;
      margin: 30px auto 0;
      padding-top: 30px;
      overflow: hidden; }
    #article-compettition .compettition-foot .vote-button {
      float: left; }
    #article-compettition .compettition-foot .vote-button a {
      background: url(../img/icn/love-w.png) 10px center no-repeat #E71984;
      background-size: 24px;
      border-radius: 16px;
      padding: 16px;
      padding-left: 40px;
      color: #FFF; }
    #article-compettition .compettition-foot .share-social {
      float: right; }
    #article-compettition .compettition-foot .share-social a {
      background: url(../img/icn/share.png) 10px center no-repeat #0351B5;
      padding: 16px;
      color: #FFF;
      width: auto;
      background-size: 20px;
      border-radius: 16px;
      padding-left: 40px; }
  #article-compettition #form-field .compettition-excerpt {
    background: none;
    margin-bottom: -130px; }
  #article-compettition #form-field figure {
    position: relative; }
  #article-compettition #form-field .file {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    text-align: center; }
  #article-compettition #form-field .inline {
    display: inline !important; }
  #article-compettition #form-field label a {
    border-bottom: 1px solid #000; }
  #article-compettition .template-layout {
    margin: 20px; }
    #article-compettition .template-layout li {
      display: inline-block; }
    #article-compettition .template-layout img {
      width: 40px;
      opacity: 0.4; }
    #article-compettition .template-layout .active img {
      opacity: 1; }

section.information-content .container {
  max-width: 1160px; }
section.information-content h1 {
  font-size: 32px;
  text-align: center;
  font-weight: 500; }
section.information-content h2 {
  font-size: 24px;
  margin-bottom: 8px;
  font-weight: 500; }
section.information-content p {
  margin-bottom: 16px;
  text-indent: 26px; }
section.information-content br + span {
  display: block;
  text-indent: 26px; }
section.information-content ul {
  margin-bottom: 16px; }
section.information-content a {
  text-decoration: underline; }
section.information-content li {
  list-style: disc;
  margin-left: 40px;
  margin-bottom: 16px; }

.content-info h2 {
  margin-bottom: 24px; }
.content-info li {
  list-style: disc;
  margin-left: 40px;
  margin-bottom: 16px; }

@media (max-width: 1024px) {
  #article-archive.contain-swiper header > h1 {
    float: none; } }
@media (max-width: 960px) {
  #article-highlight .swiper-container {
    overflow: visible; }
  #article-highlight .container .container-inner {
    padding-left: 20px;
    padding-right: 20px; }

  #reward-archive .swiper-container {
    overflow: visible; }
  #reward-archive .container .container-inner {
    padding-left: 20px;
    padding-right: 20px; } }
@media (max-width: 860px) {
  #how-to .grid-2c {
    grid-template-columns: repeat(1, 1fr); }
  #how-to .left p {
    position: static; } }
@media (max-width: 680px) {
  #highlight-archive .content-entry h1 {
    font-size: 24px; }

  #my-profile .edit-profile {
    top: -30px;
    right: 20px; }

  #notics-panel .pink-button a {
    margin-top: 10px; }

  #article-compettition [class*='grid-1c'] {
    padding: 20px 0; } }
@media (max-width: 480px) {
  #floating-panel div {
    width: 280px; } }
@media (max-height: 600px) and (orientation: landscape) {
  body {
    background: url(../img/icn/rotate.png) center no-repeat #fff;
    height: 100vh; }

  body > * {
    display: none; } }
@media (max-width: 520px) {
  #photo-gallery .grid-3c {
    grid-template-columns: repeat(3, 1fr); } }
#content-popup .category {
  margin-bottom: 0;
  display: none; }
#content-popup h1 {
  margin-bottom: 8px; }
#content-popup h1 br {
  display: none; }
#content-popup h1 small {
  display: none; }

.get-coin {
  background: #F9DF88;
  border: 1px solid #F48F13;
  border-radius: 16px;
  padding: 16px;
  margin: 50px 0 24px; }
  .get-coin img {
    width: 80px;
    margin: -40px auto -10px;
    display: block; }

.instruction {
  background: #F9DF88;
  border: 1px solid #F48F13;
  border-radius: 16px;
  padding: 16px; }

.redemption-code {
  margin-bottom: 24px; }
  .redemption-code .code {
    background: #F9DF88;
    border: 3px dashed #F48F13;
    display: block;
    padding: 8px;
    border-radius: 16px;
    margin-bottom: 8px; }

.instruction-alert {
  background: #FFC7EA;
  border: 1px solid #E71984;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px; }

.staff-only {
  border: 0;
  background: #EEE;
  margin: 0 -40px -40px;
  padding: 40px; }
  .staff-only input {
    background: none; }

.message-alert .countdown {
  display: block; }

#import-popup,
#alert-popup {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99; }
  #import-popup .close,
  #alert-popup .close {
    position: absolute;
    right: 3px;
    top: 3px;
    background: none;
    border-radius: 8px;
    z-index: 20; }
  #import-popup .close a,
  #alert-popup .close a {
    display: block;
    width: 35px;
    height: 35px;
    position: relative;
    transform: rotate(45deg); }
  #import-popup .close a:before,
  #alert-popup .close a:before {
    content: '';
    position: absolute;
    width: 2px;
    height: 28px;
    background: #666;
    left: 17px;
    top: 4px; }
  #import-popup .close a:after,
  #alert-popup .close a:after {
    content: '';
    position: absolute;
    width: 28px;
    height: 2px;
    background: #666;
    left: 4px;
    top: 17px; }
  #import-popup .close:hover,
  #alert-popup .close:hover {
    background: #FFF; }

#content-popup {
  position: fixed;
  max-width: 560px;
  width: 100%;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  transition: .5s all ease;
  opacity: 0; }
  #content-popup .swiper-button-next {
    right: 20px; }
  #content-popup .swiper-button-prev {
    left: 20px; }
  #content-popup [class^="card"] {
    padding: 30px;
    padding-bottom: 24px; }

#content-popup.medium {
  max-width: 480px; }
  #content-popup.medium [class^="card"] {
    padding: 40px; }
  #content-popup.medium .blue-link a {
    padding: 8px 4px; }

#content-popup.small {
  max-width: 480px; }
  #content-popup.small [class^="card"] {
    padding: 40px; }

.scroll-bar {
  overflow-y: scroll;
  max-height: 100px;
  padding-right: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 22px; }
  .scroll-bar p:empty {
    display: none; }

.scroll-bar::-webkit-scrollbar {
  width: 8px; }

/* Track */
.scroll-bar::-webkit-scrollbar-track {
  background: #FFF;
  border-radius: 8px; }

/* Handle */
.scroll-bar::-webkit-scrollbar-thumb {
  background: #0351B5;
  border-radius: 8px; }

/* Handle on hover */
.scroll-bar::-webkit-scrollbar-thumb:hover {
  background: #0351B5;
  border-radius: 8px; }

#content-popup.pop-in {
  top: 50%;
  opacity: 1; }

#content-alert {
  background: #FFF;
  max-width: 480px;
  width: 100%;
  padding: 40px;
  border-radius: 16px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 110;
  transition: .5s all ease;
  opacity: 0; }
  #content-alert h1 {
    margin-bottom: 24px; }
  #content-alert p {
    margin-bottom: 24px; }
  #content-alert p:last-child {
    margin-bottom: 0; }
  #content-alert .share-social {
    margin-bottom: 32px; }
    #content-alert .share-social li {
      display: inline-block;
      margin: 0 4px; }
    #content-alert .share-social li a {
      display: inline-block;
      width: 40px;
      height: 40px;
      background: #0351B5;
      background-size: 24px;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 20px;
      font-size: 0; }
    #content-alert .share-social .link a {
      background-image: url(../img/icn/link.png);
      background-size: 20px; }
    #content-alert .share-social .facebook a {
      background-image: url(../img/icn/facebook.png);
      background-size: 28px; }
    #content-alert .share-social .line a {
      background-image: url(../img/icn/line.png); }
    #content-alert .share-social .twitter-x a {
      background-image: url(../img/icn/twitter-x.png);
      background-size: 20px; }
  #content-alert .coin-step {
    font-size: 14px; }
    #content-alert .coin-step ul {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-gap: 10px; }
    #content-alert .coin-step li {
      position: relative;
      padding-top: 30px; }
    #content-alert .coin-step li:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 20px;
      border-radius: 20px;
      border: 1px solid #ccc;
      background: #FFF; }
    #content-alert .coin-step li:before {
      content: '';
      display: block;
      position: absolute;
      top: 11px;
      right: 50%;
      width: 100%;
      height: 1px;
      background: #CCC; }
    #content-alert .coin-step li:first-child:before {
      display: none; }
    #content-alert .coin-step li.active-day:before {
      background: #0351B5; }
    #content-alert .coin-step li.active-day:after {
      background: url(../img/icn/crt.png) center no-repeat #0351B5;
      background-size: 10px;
      border: 1px solid #0351B5; }
    #content-alert .coin-step li.next-day:before {
      background: #0351B5; }
    #content-alert .coin-step li.next-day:after {
      background: url(../img/icn/cyc.png) center no-repeat #FFF;
      background-size: 6px;
      border: 1px solid #0351B5; }
  #content-alert .banner-promo {
    border-radius: 8px;
    overflow: hidden; }

#content-alert.pop-inn {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1; }

.button-group *:first-child {
  float: left; }
.button-group *:first-child + * {
  float: right; }

@media (max-width: 620px) {
  #content-popup {
    left: 0;
    transform: translate(0);
    height: 100vh;
    background: #FFF; }

  #content-popup.pop-in {
    top: 0; }

  #content-popup.medium {
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    background: none; }

  #content-popup.medium.pop-in {
    top: 50%; }

  .scroll-bar {
    max-height: 160px; } }
@media (max-width: 480px) {
  #content-popup [class^="card"] {
    padding: 24px; }

  .scroll-bar {
    max-height: 160px; } }
body > header {
  height: 90px; }

body > header .container {
  position: fixed;
  z-index: 30;
  left: 50%;
  transform: translateX(-50%); }

body > header .bg-alpha {
  display: none; }

body > header .container > div {
  background: #FFF;
  height: 90px;
  padding: 24px 20px;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 1px 1px #DDD;
  position: relative; }

#logo {
  float: left;
  width: 190px;
  height: 50px;
  transition: .5s all ease; }
  #logo a {
    width: 100%;
    height: 100%;
    background: url(../img/logo.png) center no-repeat;
    background-size: 100%;
    transition: .5s all ease; }
  #logo a:hover {
    transform: scale(1.02); }

.logo {
  float: left;
  width: 140px;
  height: 90px;
  transition: .5s all ease; }
  .logo a {
    width: 100%;
    height: 100%;
    background: url(../img/logo-w.png) no-repeat;
    background-size: 100%;
    transition: .5s all ease; }
  .logo a:hover {
    transform: scale(1.02); }

.menu {
  position: absolute;
  z-index: 5;
  border-top: 3px solid #0351B5;
  width: 30px;
  height: 25px;
  cursor: pointer;
  top: 33px;
  right: 20px;
  margin-bottom: 0; }

.menu:before {
  content: '';
  position: absolute;
  width: 30px;
  top: 6px;
  left: 0;
  border-top: 3px solid #0351B5; }

.menu:after {
  content: '';
  position: absolute;
  width: 30px;
  top: 15px;
  left: 0;
  border-top: 3px solid #0351B5; }

.menu, .menu-close {
  display: none;
  font-size: 0; }

.menu-close {
  position: fixed;
  right: 10px;
  top: 10px;
  border-radius: 8px;
  z-index: 20;
  border-top: 0;
  transition: .1s all ease; }

.menu-close a {
  display: block;
  width: 40px;
  height: 40px;
  position: relative;
  transform: rotate(45deg); }

.menu-close a:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 20px;
  background: #0351B5;
  left: 19px;
  top: 10px; }

.menu-close a:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background: #0351B5;
  left: 10px;
  top: 19px; }

.menu-close:before,
.menu-close:after {
  display: none; }

#main-navigation {
  overflow: hidden;
  padding: 14px;
  float: left; }
  #main-navigation ul li {
    display: inline; }
  #main-navigation a {
    border: 2px solid transparent;
    padding: 8px 4px;
    border-radius: 16px;
    transition: .5s all ease; }
  #main-navigation a:hover {
    color: #e71984;
    -webkit-animation: act 3s infinite ease;
    animation: act 3s infinite ease;
    transition: 3s all infinite ease; }
@-webkit-keyframes act {
  0% {
    color: #e71984; }
  50% {
    color: rgba(231, 25, 132, 0.6); }
  100% {
    color: #e71984; } }
@keyframes act {
  0% {
    color: #e71984; }
  50% {
    color: rgba(231, 25, 132, 0.6); }
  100% {
    color: #e71984; } }
  #main-navigation a.dislink {
    color: #ccc; }
  #main-navigation a.dislink:hover {
    color: #ccc !important; }

.lang-member {
  display: inline; }

#secondary-navigation {
  float: right; }
  #secondary-navigation .pink-button {
    float: left;
    margin-top: 2px; }
  #secondary-navigation .language {
    float: left;
    margin-left: 16px;
    margin-top: 6px;
    position: relative;
    z-index: 10; }
    #secondary-navigation .language > a {
      width: 30px;
      height: 30px;
      border-radius: 20px;
      border: 1px solid #0351B5;
      padding: 1px;
      display: block;
      font-size: 0; }
    #secondary-navigation .language span {
      background: #FFF;
      overflow: hidden;
      position: absolute;
      right: 0;
      border-radius: 4px;
      box-shadow: 0 1px 5px #CCC;
      visibility: hidden; }
    #secondary-navigation .language span a {
      display: block;
      padding: 6px 16px; }
    #secondary-navigation .language span a:hover {
      background: #DDD; }
  #secondary-navigation .membership {
    float: left;
    margin-left: 16px;
    margin-top: 6px;
    position: relative;
    z-index: 10; }
    #secondary-navigation .membership > a {
      display: block;
      font-size: 0;
      overflow: hidden; }
    #secondary-navigation .membership img {
      width: 30px;
      height: 30px;
      border-radius: 100px;
      border: 1px solid #0351B5; }
    #secondary-navigation .membership span {
      background: #FFF;
      overflow: hidden;
      position: absolute;
      right: 0;
      border-radius: 4px;
      box-shadow: 0 1px 5px #CCC;
      visibility: hidden;
      width: max-content; }
    #secondary-navigation .membership span a {
      display: block;
      padding: 6px 16px; }
    #secondary-navigation .membership span a:hover {
      background: #DDD; }
  #secondary-navigation .membership.login img {
    float: left;
    margin-right: 5px; }
  #secondary-navigation .membership.login > a {
    font-size: 14px;
    width: 85px;
    display: block; }
  #secondary-navigation .membership.login em {
    float: left;
    padding-top: 6px;
    font-style: normal;
    color: #0351B5;
    width: 45px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden; }

#main-navigation > a.active {
  display: none; }

@media (max-width: 1400px) {
  .menu, .menu-close {
    display: block; }

  #main-navigation {
    transform: translateX(500px);
    transition: .5s all ease;
    position: fixed;
    right: 0;
    background: #fff;
    top: 0;
    height: 100vh;
    padding: 40px;
    z-index: 12;
    width: 320px; }
    #main-navigation a {
      display: block; }
    #main-navigation ul {
      transform: translateX(500px);
      transition: 1s all ease; }

  .lang-member {
    position: fixed;
    right: -500px;
    top: 300px;
    z-index: 20;
    opacity: 0;
    transition: 1s all ease; }

  header.expand {
    position: relative;
    z-index: 100; }
    header.expand #main-navigation {
      opacity: 1;
      transform: translateX(0px); }
      header.expand #main-navigation ul {
        transform: translateX(0px); }
    header.expand .lang-member {
      opacity: 1;
      right: 110px; }
    header.expand .bg-alpha {
      display: block; }

  #secondary-navigation {
    margin-right: 50px;
    z-index: 10; } }
@media (max-width: 520px) {
  header .pink-button {
    position: absolute;
    z-index: 20;
    top: 300px;
    opacity: 0;
    transform: translateX(500px);
    transition: 1s all ease;
    width: 260px; }

  header.expand .pink-button {
    opacity: 1;
    transform: translateX(0px);
    right: 0; }

  .lang-member {
    top: 360px; }

  body > header {
    height: 70px; }

  body > header .container > div {
    height: 70px; }

  #logo {
    margin-top: -10px; }

  .menu {
    top: 26px; }

  .menu-close {
    top: 10px; } }
body > footer {
  background: #0351B5;
  padding: 40px 0 100px; }
  body > footer .container > div {
    float: left;
    padding-left: 160px;
    position: relative; }
  body > footer .logo {
    position: absolute;
    left: 0; }
  body > footer address {
    font-style: normal;
    margin-bottom: 24px; }
  body > footer strong {
    font-size: 24px; }
  body > footer aside {
    float: right;
    text-align: right; }
  body > footer aside a {
    display: inline-block;
    margin: 0 8px; }
  body > footer p {
    margin-bottom: 24px; }
  body > footer .white-button a {
    background: #FFF;
    border-radius: 24px;
    color: #005497;
    display: inline-block;
    padding: 16px;
    margin: 0; }

@media (max-width: 1000px) {
  body > footer aside {
    float: left;
    text-align: left;
    clear: both;
    margin-left: 160px; } }
@media (max-width: 860px) {
  body > footer .logo {
    float: left;
    position: static;
    margin-right: 20px; }
  body > footer address {
    clear: both; }
  body > footer .container > div {
    padding-left: 0; }
  body > footer aside {
    margin-left: 0; } }

/*# sourceMappingURL=main.css.map */