@charset "UTF-8";
/*========== Init ==========*/
/*==================================================*\
        SCSS Variables
\*==================================================*/
/*==================== Fonts ====================*/
/*==================== Color ====================*/
/***** 主色系 *****/
/***** 對比色系 *****/
/***** 特殊色系 *****/
/***** 灰色系 *****/
/***** 黑白 *****/
/*==================== Duration ====================*/
/*==================================================*\
        Functions
\*==================================================*/
/*** PX to REM ***/
/**
 * example:
 * .site-header {
 *     width: size-rem(500);
 * }
 */
/*** PX to vw ***/
/**
 * example:
 * .site-header {
 *     width: size-vw(500);
 * }
 */
/*** Color Opacity ***/
/**
 *	example:
 *	.element {
 *      @include colorOpacity($colorWhite, 0.25);
 *	}
 */
/*==================================================*\
        Mixins
\*==================================================*/
/*** Pseudo Class ***/
/** 
 * div:after{
 *     @include pseudo;
 *     top: -1rem; left: -1rem;
 *     width: 1rem; height: 1rem;
 * }
 */
/*** Media Queries (Mobile First) ***/
/**
 * .site-header {
 *     padding: 2rem;
 *     font-size: 1.8rem;
 *
 *     @include mq('tablet-wide') {
 *         padding-top: 4rem;
 *         font-size: 2.4rem;
 *     }
 * }
 */
/*** Input Placeholder Style ***/
/**
 * input,  
 * textarea {  
 *     @include placeholderStyle {
 *         color: $grey;
 *     }
 * }
 */
/*** Flexbox Setting ***/
/**
 *	example:
 *	.element {
 *      @include setFlex(stretch, space-between);
 *	}
 */
/*** Responsive Ratio ***/
/**
 * .ifr-wrap{
 *     @include responsive-ratio(16,9);
 * }
 */
/*** z-index Setting ***/
/**
 * example:
 * .site-header {
 *     z-index: z("lightbox");
 * }
 */
/*** Width && Height ***/
/**
 *	example:
 *	.element {
 *      @include wh(100%);
 *	}
 */
/*** Full Page Popup ***/
/**
 *	example:
 *	.element {
 *      @include fullPopup();
 *	}
 */
/*** Arrow ***/
/**
 *  $direction:
 *    1: ↑
 *    2: →
 *    3: ↓
 *    4: ←
 *	example:
 *	.element {
 *      @include arrow($bdc: #000000);
 *	}
 */
/*** Triangle ***/
/**
 *  $direction:
 *    1: ↑
 *    2: →
 *    3: ↓
 *    4: ←
 *	example:
 *	.element {
 *      @include artrianglerow($bdc: #000000);
 *	}
 */
/*** Text Indent ***/
/**
 *  有前綴符號或文字，但又需要文字對齊時使用
 *	example:
 *	.element {
 *      @include textIndent(7px);
 *	}
 */
/*==================================================*\
        Extends
\*==================================================*/
/*==================== Close Btn ====================*/
/*
 * 自行設定於 全域(此處) 或 私用(自訂) 需定義：
 *   1. ._mod_closeBtn { "寬高" }
 *   2. ._mod_closeBtn:before, 
 *      ._mod_closeBtn:after { "線條高度"、"線條顏色" }
 */
/***** Hover: ._mod_closeBtn *****/
/*==================== Hamburger ====================*/
/*
* HTML at "/includes/_site_header.html" 中加入:
* <div class="hamburger">
*     <div></div>
*     <div></div>
*     <div></div>
* </div>
*
* 自行設定於 全域(此處) 或 私用(自訂) 需定義:
*   1. .hamburger { "寬高" }
*   2. .hamburger div { "線條高度" }
*   3. .hamburger div:before,
*      .hamburger div:after { "線條顏色" }
*/
/*==================================================*\
        Browser Style Reset
\*==================================================*/
html, body, div, span, applet, object, iframe, h1, h2,
h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, img, ins, kbd,
q, s, samp, small, strike, strong, sub, sup, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr,
th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, nav, output, ruby,
section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: inherit;
  vertical-align: baseline;
  background-color: transparent; }

body {
  line-height: 1.5; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

a, ins {
  text-decoration: none; }

del {
  text-decoration: line-through; }

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

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

canvas, audio, video {
  display: inline-block; }

abbr[title] {
  border-bottom: 1px dotted; }

hr {
  height: 0;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

dfn {
  font-style: italic; }

code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em; }

pre {
  white-space: pre-wrap; }

sub, sup {
  font-size: 12px;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

b, strong {
  font-weight: bold; }

a {
  color: inherit;
  display: block; }

img {
  max-width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: block; }

button,
select,
input,
label,
textarea {
  margin: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  resize: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  background-color: transparent; }

input[type="checkbox"], input[type="radio"] {
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0; }

input[type="reset"], input[type="submit"] {
  cursor: pointer; }

button, input {
  line-height: normal; }

button, select {
  text-transform: none; }

button, select, label {
  cursor: pointer; }

textarea {
  overflow: auto;
  vertical-align: top; }

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

*:focus, *:active, *:hover {
  outline: 0; }

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

*:before, *:after {
  pointer-events: none; }

select::-ms-expand {
  display: none; }

select::-ms-value {
  color: inherit;
  background: transparent; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/*========== mod ==========*/
/*========== Vendor ==========*/
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide img {
    display: block; }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat; }

/* Icons */
@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal; }

/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none; }
  .slick-prev:hover, .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    outline: none;
    background: transparent;
    color: transparent; }
    .slick-prev:hover:before, .slick-prev:focus:before,
    .slick-next:hover:before,
    .slick-next:focus:before {
      opacity: 1; }
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: 0.25; }
  .slick-prev:before,
  .slick-next:before {
    font-family: "slick";
    font-size: 20px;
    line-height: 1;
    color: white;
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

.slick-prev {
  left: -25px; }
  [dir="rtl"] .slick-prev {
    left: auto;
    right: -25px; }
  .slick-prev:before {
    content: "←"; }
    [dir="rtl"] .slick-prev:before {
      content: "→"; }

.slick-next {
  right: -25px; }
  [dir="rtl"] .slick-next {
    left: -25px;
    right: auto; }
  .slick-next:before {
    content: "→"; }
    [dir="rtl"] .slick-next:before {
      content: "←"; }

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px; }

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%; }
  .slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer; }
    .slick-dots li button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0px;
      font-size: 0px;
      color: transparent;
      padding: 5px;
      cursor: pointer; }
      .slick-dots li button:hover, .slick-dots li button:focus {
        outline: none; }
        .slick-dots li button:hover:before, .slick-dots li button:focus:before {
          opacity: 1; }
      .slick-dots li button:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "•";
        width: 20px;
        height: 20px;
        font-family: "slick";
        font-size: 6px;
        line-height: 20px;
        text-align: center;
        color: black;
        opacity: 0.25;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
    .slick-dots li.slick-active button:before {
      color: black;
      opacity: 0.75; }

/*========== Lightbox ==========*/
/*========== layout ==========*/
/*==================================================*\
        Layout
\*==================================================*/
/*==================== Document ====================*/
html,
body {
  width: 100%;
  max-width: 1920px;
  font-family: Arial, Helvetica, sans-serif, "微軟正黑體", "蘋果儷黑體", "新細明體"; }

html {
  height: 100%;
  font-size: 16px; }

body {
  min-height: 100%; }

@media only screen and (max-width: 768px) {
  ._pc {
    display: none !important; } }

._mb {
  display: block !important; }
  @media only screen and (min-width: 769px) {
    ._mb {
      display: none !important; } }

._mbinline {
  display: inline !important; }
  @media only screen and (min-width: 769px) {
    ._mbinline {
      display: none !important; } }

.hide {
  display: none; }

/*==================== Container ====================*/
main {
  margin: auto;
  overflow: hidden;
  background-color: #e0e1e5; }
  main section {
    padding: 12vw 0; }
    @media only screen and (min-width: 769px) {
      main section {
        padding: 80px 0; } }
  main .secWrapper {
    position: relative;
    max-width: 673px;
    width: 95%;
    margin: auto;
    z-index: 1; }
    @media only screen and (min-width: 769px) {
      main .secWrapper {
        max-width: 1220px; } }
    main .secWrapper .listTop {
      position: relative;
      z-index: 3; }
      main .secWrapper .listTop .secTitle {
        max-width: 712px;
        margin: auto;
        width: 95%;
        margin-left: 3.8%; }
        @media only screen and (min-width: 769px) {
          main .secWrapper .listTop .secTitle {
            width: 100%;
            max-width: 754px;
            margin-left: auto; } }
    main .secWrapper .listWrapper {
      margin-top: -7vw;
      background-color: #f0f0f0;
      background-image: url("../images/list_mid.png");
      background-repeat: repeat-y;
      background-position: center top;
      background-size: 100% auto; }
      @media only screen and (min-width: 769px) {
        main .secWrapper .listWrapper {
          margin-top: -5vw; } }
      @media only screen and (min-width: 1367px) {
        main .secWrapper .listWrapper {
          margin-top: -20px; } }
      main .secWrapper .listWrapper:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: -3vw;
        left: 0;
        background: url("../images/list_top.png") center top no-repeat;
        background-size: 100% auto; }
        @media only screen and (min-width: 1367px) {
          main .secWrapper .listWrapper:before {
            top: -40px; } }
      main .secWrapper .listWrapper:after {
        content: "";
        display: block;
        width: 100%;
        height: 40%;
        position: absolute;
        bottom: -3vw;
        left: 0;
        background: url("../images/list_bottom.png") center bottom no-repeat;
        background-size: 100% auto; }
        @media only screen and (min-width: 1367px) {
          main .secWrapper .listWrapper:after {
            bottom: -40px; } }
      main .secWrapper .listWrapper .bg {
        border-radius: 0;
        padding: 7vw 4vw 3vw;
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1; }
        @media only screen and (min-width: 769px) {
          main .secWrapper .listWrapper .bg {
            padding: 50px 35px 20px; } }
  main .deco {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  main .mainBg {
    position: relative;
    z-index: 2; }
    main .mainBg section {
      padding: 10vw 0 11vw;
      position: relative; }
      @media only screen and (min-width: 1367px) {
        main .mainBg section {
          padding: 120px 0; } }
      main .mainBg section:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-position: center top;
        background-repeat: repeat-y;
        background-size: 100% auto;
        z-index: 0; }
        @media only screen and (min-width: 769px) {
          main .mainBg section:after {
            display: block; } }
      main .mainBg section.sec-1, main .mainBg section.sec-3, main .mainBg section.sec-5, main .mainBg section.sec-7, main .mainBg section.sec-9 {
        background: -webkit-gradient(linear, left top, left bottom, from(#f8e3ce), color-stop(25%, #f6d3aa), color-stop(50%, #f4c089), color-stop(75%, #e7a968), to(#d89358));
        background: -webkit-linear-gradient(top, #f8e3ce 0%, #f6d3aa 25%, #f4c089 50%, #e7a968 75%, #d89358 100%);
        background: -o-linear-gradient(top, #f8e3ce 0%, #f6d3aa 25%, #f4c089 50%, #e7a968 75%, #d89358 100%);
        background: linear-gradient(to bottom, #f8e3ce 0%, #f6d3aa 25%, #f4c089 50%, #e7a968 75%, #d89358 100%); }
        main .mainBg section.sec-1::after, main .mainBg section.sec-3::after, main .mainBg section.sec-5::after, main .mainBg section.sec-7::after, main .mainBg section.sec-9::after {
          background-image: url("../images/m_sec_bg_item_1.png");
          background-size: 100% auto;
          background-position: center top;
          background-repeat: repeat-y; }
          @media only screen and (min-width: 769px) {
            main .mainBg section.sec-1::after, main .mainBg section.sec-3::after, main .mainBg section.sec-5::after, main .mainBg section.sec-7::after, main .mainBg section.sec-9::after {
              background-image: url("../images/sec_bg_item_1.png"); } }
      main .mainBg section.sec-2, main .mainBg section.sec-4, main .mainBg section.sec-6, main .mainBg section.sec-8 {
        background: -webkit-gradient(linear, left top, left bottom, from(#5b0000), color-stop(20%, #7a0000), color-stop(50%, #990000), color-stop(75%, #b8000b), to(#d21122));
        background: -webkit-linear-gradient(top, #5b0000 0%, #7a0000 20%, #990000 50%, #b8000b 75%, #d21122 100%);
        background: -o-linear-gradient(top, #5b0000 0%, #7a0000 20%, #990000 50%, #b8000b 75%, #d21122 100%);
        background: linear-gradient(to bottom, #5b0000 0%, #7a0000 20%, #990000 50%, #b8000b 75%, #d21122 100%); }
        main .mainBg section.sec-2::after, main .mainBg section.sec-4::after, main .mainBg section.sec-6::after, main .mainBg section.sec-8::after {
          background-image: url("../images/m_sec_bg_item_2.png");
          background-size: 100% auto;
          background-position: center top;
          background-repeat: repeat-y; }
          @media only screen and (min-width: 769px) {
            main .mainBg section.sec-2::after, main .mainBg section.sec-4::after, main .mainBg section.sec-6::after, main .mainBg section.sec-8::after {
              background-image: url("../images/sec_bg_item_2.png"); } }
      main .mainBg section.sec-10 .secWrapper .listWrapper {
        background-color: transparent;
        position: relative; }

.anchor {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  visibility: hidden; }
  .anchor .article {
    position: absolute;
    top: 0;
    display: block;
    width: 100%; }
  .anchor#anchor11 {
    position: relative;
    top: auto; }

/*==================================================*\
        Page Loading
\*==================================================*/
.page-loading {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #96080e;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  z-index: 9999;
  color: #000; }
  .page-loading > * {
    -ms-flex-negative: 0;
    flex-shrink: 0; }
  .page-loading > div {
    width: 100%;
    position: relative; }
  .page-loading img {
    width: 140px;
    margin: auto;
    margin-bottom: 25px;
    -webkit-transform: translateX(-6px);
    -ms-transform: translateX(-6px);
    transform: translateX(-6px);
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0; }
  .page-loading .loader {
    width: 100%;
    height: 20px;
    background-color: transparent;
    position: relative; }
  .page-loading .progress-bar {
    width: 0;
    height: 20px;
    -webkit-transition: all 100ms;
    -o-transition: all 100ms;
    transition: all 100ms;
    background-color: #dbaa6c;
    position: absolute;
    top: 0;
    left: 0; }

/*==================================================*\
        Page Header
\*==================================================*/
.main-logo {
  width: 100px; }
  @media only screen and (min-width: 769px) {
    .main-logo {
      width: 139px; } }

.page-header {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  -webkit-transition: opacity .8s;
  -o-transition: opacity .8s;
  transition: opacity .8s;
  opacity: 0;
  z-index: 999;
  background: #fff; }
  @media only screen and (min-width: 769px) {
    .page-header {
      background: none;
      width: 225px;
      bottom: auto;
      top: 50%;
      left: 0.5%;
      -webkit-transform: translateY(-53%);
      -ms-transform: translateY(-53%);
      transform: translateY(-53%); } }
  @media only screen and (min-width: 1367px) {
    .page-header {
      width: 239px;
      left: 3%; } }

.header-gotop {
  cursor: pointer;
  position: fixed;
  max-width: 120px;
  width: 15%;
  right: 1.5%;
  bottom: 18vw;
  z-index: 5; }
  @media only screen and (min-width: 480px) {
    .header-gotop {
      width: 12vw;
      -webkit-transform: translate(0%, 0%);
      -ms-transform: translate(0%, 0%);
      transform: translate(0%, 0%); } }
  @media only screen and (min-width: 769px) {
    .header-gotop {
      position: absolute;
      width: 69px;
      left: 50%;
      -webkit-transform: translateX(-59%);
      -ms-transform: translateX(-59%);
      transform: translateX(-59%);
      bottom: -4.5%; } }

.header-top {
  display: none; }
  @media only screen and (min-width: 769px) {
    .header-top {
      display: block;
      position: relative;
      z-index: 1; } }

.header-nav {
  position: relative;
  width: 100%;
  height: 17vw;
  margin: auto;
  overflow-x: auto;
  overflow-y: hidden; }
  @media only screen and (min-width: 769px) {
    .header-nav {
      width: 100%;
      height: auto;
      margin: auto;
      top: -1px;
      background-image: url("../images/nav_mid_1.png"), url("../images/nav_mid_2.png");
      background-repeat: no-repeat, repeat-y;
      background-position: top center, top center;
      background-size: 100% auto, 100% auto;
      overflow-x: hidden; } }
  .header-nav > .secWrapper {
    width: 78%;
    height: 100%; }
    @media only screen and (min-width: 769px) {
      .header-nav > .secWrapper {
        margin: auto; } }
  .header-nav ul {
    width: 180vw;
    height: 100%;
    padding: 0 1vw;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    position: relative; }
    .header-nav ul > * {
      -ms-flex-negative: 0;
      flex-shrink: 0; }
    .header-nav ul::before, .header-nav ul::after {
      content: '';
      display: block;
      width: 100%;
      height: 1.4vw;
      position: absolute;
      left: 0;
      background-color: #f9d39c; }
    .header-nav ul::before {
      top: 0; }
    .header-nav ul::after {
      bottom: 0; }
    @media only screen and (min-width: 400px) {
      .header-nav ul {
        width: 300vw; } }
    @media only screen and (min-width: 560px) {
      .header-nav ul {
        width: 280vw; } }
    @media only screen and (min-width: 769px) {
      .header-nav ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 88%;
        padding: 0; }
        .header-nav ul::before, .header-nav ul::after {
          display: none; } }
  .header-nav li {
    position: relative;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: .5vw 1vw; }
    @media only screen and (min-width: 769px) {
      .header-nav li {
        width: 100%;
        padding: 0; }
        .header-nav li:first-child::before {
          opacity: 0; } }
    .header-nav li.active p {
      color: #fff; }
      .header-nav li.active p:before {
        opacity: 1; }
      @media only screen and (min-width: 769px) {
        .header-nav li.active p {
          color: #fff; }
          .header-nav li.active p:before {
            opacity: 1; } }
  .header-nav a {
    position: relative;
    width: unset; }
    @media only screen and (min-width: 769px) {
      .header-nav a {
        width: 100%;
        -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
        margin-top: 0;
        padding: 0;
        z-index: 1; }
        .header-nav a:hover p {
          color: #fff; }
          .header-nav a:hover p:before {
            opacity: 1; } }
    @media only screen and (max-width: 767px) {
      .header-nav a {
        display: block; } }
  .header-nav p {
    position: relative;
    min-width: 18vw;
    padding: 2vw 4vw 2vw;
    font-size: 3.8vw;
    line-height: 1.2;
    font-weight: bold;
    text-align: center;
    color: #000;
    overflow: visible;
    z-index: 1; }
    @media only screen and (min-width: 480px) {
      .header-nav p {
        min-width: 21vw;
        font-size: 3vw; } }
    @media only screen and (min-width: 560px) {
      .header-nav p {
        min-width: unset;
        padding: 2vw 35px 2vw; } }
    @media only screen and (min-width: 769px) {
      .header-nav p {
        width: 100%;
        padding: 6px;
        font-size: 0.9375rem; } }
    @media only screen and (min-width: 1367px) {
      .header-nav p {
        padding: 10px 6px; } }
    @media only screen and (max-width: 767px) {
      .header-nav p {
        display: block; } }
    .header-nav p span {
      position: relative;
      z-index: 1; }
    .header-nav p:before {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      margin: auto;
      background: #e94443;
      border-radius: 50px;
      -webkit-transition: all 300ms;
      -o-transition: all 300ms;
      transition: all 300ms;
      opacity: 0;
      z-index: -1; }
      @media only screen and (min-width: 769px) {
        .header-nav p:before {
          width: 100%; } }

.header-bottom {
  margin-top: -20px; }
  @media only screen and (max-width: 768px) {
    .header-bottom {
      display: none; } }

.hamburger {
  width: 28px;
  height: 24px;
  padding: 4px;
  position: relative; }
  .hamburger > div {
    width: 100%;
    height: 4px;
    margin: auto;
    opacity: 1;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
    border-radius: 100px;
    background-color: #153379;
    position: absolute;
    left: 0;
    right: 0; }
  .hamburger .top {
    top: 0; }
  .hamburger .middle {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    background-color: transparent;
    top: 0;
    bottom: 0; }
    .hamburger .middle:before, .hamburger .middle:after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-transition: inherit;
      -o-transition: inherit;
      transition: inherit;
      border-radius: inherit;
      background-color: #153379;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0; }
  .hamburger .bottom {
    bottom: 0; }
  @media only screen and (min-width: 769px) {
    .hamburger {
      display: none; } }

/*==================================================*\
        Page Footer
\*==================================================*/
.page-footer {
  padding: 2.1875rem 0;
  background-color: #153379; }
  @media only screen and (min-width: 769px) {
    .page-footer {
      padding: 3.4375rem 0; } }
  .page-footer p {
    color: #ffffff;
    font-size: 12px;
    line-height: 1.83; }
    .page-footer p strong {
      color: #ffea00;
      font-weight: normal; }
  .page-footer .info {
    margin-bottom: 1.875rem; }
    @media only screen and (min-width: 769px) {
      .page-footer .info {
        margin-bottom: 1.25rem; } }
    @media only screen and (min-width: 1024px) {
      .page-footer .info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start; }
        .page-footer .info > * {
          -ms-flex-negative: 0;
          flex-shrink: 0; } }
    .page-footer .info p {
      font-size: 15px; }
      @media only screen and (min-width: 769px) {
        .page-footer .info p {
          font-size: 12px; } }

#footer {
  background-color: #ff7e25;
  padding-bottom: 32vw; }
  @media only screen and (min-width: 480px) {
    #footer {
      padding-bottom: 14vw; } }
  @media only screen and (min-width: 769px) {
    #footer {
      padding-bottom: 0; } }
  #footer a {
    display: inline-block; }

/*========== Pages ==========*/
/*==================================================*\
        Index Page Style
\*==================================================*/
.kv {
  position: relative;
  max-width: 1920px;
  width: 100%;
  margin: auto;
  z-index: 1; }
  .kv .main-logo {
    position: absolute;
    max-width: 278px;
    width: 22.5vw;
    top: 3.5vw;
    left: 3.5vw;
    z-index: 11; }
    @media only screen and (min-width: 769px) {
      .kv .main-logo {
        width: 12.5vw;
        top: 2.5vw;
        left: 2.5vw; } }
    @media only screen and (min-width: 1680px) {
      .kv .main-logo {
        width: 210px;
        top: 35px;
        left: 35px; } }
  .kv .slogan {
    position: relative;
    max-width: 1920px;
    width: 100%;
    margin: auto; }
    .kv .slogan .slogan_kv {
      width: 100%; }
    .kv .slogan .canvasWrapper,
    .kv .slogan .canvasWrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .kv .slogan .canvasWrapper iframe {
      overflow: hidden; }
  .kv .kvBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    max-width: 1220px;
    width: 95%;
    margin: auto;
    z-index: 1;
    position: absolute;
    bottom: 3%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
    @media only screen and (min-width: 769px) {
      .kv .kvBox {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        bottom: 2%;
        width: 70%; } }
    @media only screen and (min-width: 1367px) {
      .kv .kvBox {
        width: 65%;
        bottom: 3%; } }
    @media only screen and (min-width: 1680px) {
      .kv .kvBox {
        width: 100%;
        bottom: 5%; } }
    .kv .kvBox .spBox {
      cursor: pointer;
      position: relative;
      width: auto; }
      @media only screen and (min-width: 769px) {
        .kv .kvBox .spBox {
          width: 100%; } }
      .kv .kvBox .spBox.spBox1 .end {
        -webkit-transform: translate(21%, 13%);
        -ms-transform: translate(21%, 13%);
        transform: translate(21%, 13%); }
        .kv .kvBox .spBox.spBox1 .end > * {
          margin-left: 1vw; }
          @media only screen and (min-width: 769px) {
            .kv .kvBox .spBox.spBox1 .end > * {
              margin-left: 0.95%; } }
        @media only screen and (min-width: 769px) {
          .kv .kvBox .spBox.spBox1 .end {
            -webkit-transform: translate(17.1%, 7.3%);
            -ms-transform: translate(17.1%, 7.3%);
            transform: translate(17.1%, 7.3%); } }
      .kv .kvBox .spBox.spBox1._disabled {
        pointer-events: auto; }
      .kv .kvBox .spBox.spBox2 .end {
        -webkit-transform: translate(21%, 9.5%);
        -ms-transform: translate(21%, 9.5%);
        transform: translate(21%, 9.5%); }
        .kv .kvBox .spBox.spBox2 .end > * {
          margin-left: 1vw; }
          @media only screen and (min-width: 769px) {
            .kv .kvBox .spBox.spBox2 .end > * {
              margin-left: 0.9%; } }
        @media only screen and (min-width: 769px) {
          .kv .kvBox .spBox.spBox2 .end {
            -webkit-transform: translate(13.9%, 7.5%);
            -ms-transform: translate(13.9%, 7.5%);
            transform: translate(13.9%, 7.5%); } }
      @media only screen and (min-width: 769px) {
        .kv .kvBox .spBox.spBox2 {
          margin-top: 0;
          margin-left: -1px; } }
      .kv .kvBox .spBox.spBox2._disabled .spCTA {
        pointer-events: auto; }
      .kv .kvBox .spBox._abled1 .end div:nth-of-type(1) {
        opacity: 1; }
      .kv .kvBox .spBox._abled2 .end div:nth-of-type(1),
      .kv .kvBox .spBox._abled2 .end div:nth-of-type(2) {
        opacity: 1; }
      .kv .kvBox .spBox._abled3 .end div:nth-of-type(1),
      .kv .kvBox .spBox._abled3 .end div:nth-of-type(2),
      .kv .kvBox .spBox._abled3 .end div:nth-of-type(3) {
        opacity: 1; }
      .kv .kvBox .spBox._abled4 .end div:nth-of-type(1),
      .kv .kvBox .spBox._abled4 .end div:nth-of-type(2),
      .kv .kvBox .spBox._abled4 .end div:nth-of-type(3),
      .kv .kvBox .spBox._abled4 .end div:nth-of-type(4) {
        opacity: 1; }
      .kv .kvBox .spBox._disabled {
        pointer-events: none; }
        .kv .kvBox .spBox._disabled .end div {
          opacity: 1; }
      .kv .kvBox .spBox .spImg {
        position: relative; }
      .kv .kvBox .spBox .cta:hover .box {
        -webkit-filter: hue-rotate(20deg);
        filter: hue-rotate(20deg); }
      .kv .kvBox .spBox .cta {
        position: absolute;
        max-width: 161px;
        width: 24.25%;
        z-index: 3; }
        .kv .kvBox .spBox .cta._1 {
          left: 50%;
          bottom: 0;
          -webkit-transform: translate(90%, -90%);
          -ms-transform: translate(90%, -90%);
          transform: translate(90%, -90%); }
          @media only screen and (min-width: 769px) {
            .kv .kvBox .spBox .cta._1 {
              -webkit-transform: translate(80%, -123%);
              -ms-transform: translate(80%, -123%);
              transform: translate(80%, -123%); } }
        .kv .kvBox .spBox .cta._2 {
          left: 50%;
          bottom: 0;
          -webkit-transform: translate(90%, -120%);
          -ms-transform: translate(90%, -120%);
          transform: translate(90%, -120%); }
          @media only screen and (min-width: 769px) {
            .kv .kvBox .spBox .cta._2 {
              -webkit-transform: translate(67%, -120%);
              -ms-transform: translate(67%, -120%);
              transform: translate(67%, -120%); } }
        .kv .kvBox .spBox .cta._3 {
          left: 0;
          bottom: 0;
          -webkit-transform: translate(63%, -64%);
          -ms-transform: translate(63%, -64%);
          transform: translate(63%, -64%); }
          @media only screen and (min-width: 769px) {
            .kv .kvBox .spBox .cta._3 {
              -webkit-transform: translate(65%, -65%);
              -ms-transform: translate(65%, -65%);
              transform: translate(65%, -65%); } }
        .kv .kvBox .spBox .cta .txt {
          position: absolute;
          max-width: 104px;
          width: 15vw;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -62%);
          -ms-transform: translate(-50%, -62%);
          transform: translate(-50%, -62%);
          z-index: 1; }
          .kv .kvBox .spBox .cta .txt img {
            margin: auto; }
          @media only screen and (min-width: 769px) {
            .kv .kvBox .spBox .cta .txt {
              max-width: 92px;
              width: 7.5vw;
              -webkit-transform: translate(-50%, -55%);
              -ms-transform: translate(-50%, -55%);
              transform: translate(-50%, -55%); } }
        .kv .kvBox .spBox .cta .box {
          position: relative; }
      .kv .kvBox .spBox .end {
        pointer-events: none;
        position: absolute;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        width: 100%;
        height: 100%;
        top: 50%;
        left: -50%; }
        .kv .kvBox .spBox .end div {
          width: 14.5vw;
          opacity: 0;
          -webkit-transition: all .3s ease;
          -o-transition: all .3s ease;
          transition: all .3s ease; }
          @media only screen and (min-width: 769px) {
            .kv .kvBox .spBox .end div {
              width: 4.8vw; } }
          @media only screen and (min-width: 1367px) {
            .kv .kvBox .spBox .end div {
              width: 13.7%; } }

.mainBg {
  position: relative; }

.secWrapper .listWrapper {
  position: relative;
  width: 100%;
  margin: auto; }
  @media only screen and (min-width: 769px) {
    .secWrapper .listWrapper {
      max-width: 1220px;
      width: 100%; } }
  .secWrapper .listWrapper .listCont {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    margin: auto; }
    .secWrapper .listWrapper .listCont:before {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0; }
    .secWrapper .listWrapper .listCont > p {
      color: #fff;
      font-size: 15px;
      font-weight: 600; }
    .secWrapper .listWrapper .listCont .listItem {
      position: relative;
      max-width: auto;
      width: 48%;
      margin-top: 8px;
      margin-bottom: 8px;
      background-color: #fff;
      -webkit-box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
      box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
      -webkit-transition: .3s;
      -o-transition: .3s;
      transition: .3s;
      overflow: hidden; }
      @media only screen and (min-width: 769px) {
        .secWrapper .listWrapper .listCont .listItem {
          -webkit-box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.1); } }
      .secWrapper .listWrapper .listCont .listItem:not(:nth-child(4n)) {
        margin-right: 0%; }
      .secWrapper .listWrapper .listCont .listItem:not(:nth-child(2n)) {
        margin-right: 3%; }
      .secWrapper .listWrapper .listCont .listItem .pdPic {
        width: 100%; }
        .secWrapper .listWrapper .listCont .listItem .pdPic img {
          width: 100%;
          height: auto; }
      .secWrapper .listWrapper .listCont .listItem .pdTxt {
        position: relative;
        padding: 2vw 2.25vw;
        line-height: 1;
        min-height: 29vw; }
        .secWrapper .listWrapper .listCont .listItem .pdTxt > span {
          font-size: 2vw;
          color: #848484; }
          .secWrapper .listWrapper .listCont .listItem .pdTxt > span.letter {
            letter-spacing: -1px; }
            @media only screen and (min-width: 769px) {
              .secWrapper .listWrapper .listCont .listItem .pdTxt > span.letter {
                letter-spacing: -1px; } }
            @media only screen and (min-width: 1367px) {
              .secWrapper .listWrapper .listCont .listItem .pdTxt > span.letter {
                letter-spacing: -2.4px; } }
          .secWrapper .listWrapper .listCont .listItem .pdTxt > span.letter-s {
            letter-spacing: -1px; }
        .secWrapper .listWrapper .listCont .listItem .pdTxt > p {
          display: -webkit-box;
          width: 100%;
          font-size: 3.5vw;
          color: #000;
          font-weight: 700;
          height: 7.8vw;
          line-height: 1.2;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis; }
          .secWrapper .listWrapper .listCont .listItem .pdTxt > p.letter-s {
            letter-spacing: -1px; }
        .secWrapper .listWrapper .listCont .listItem .pdTxt .pdPrice {
          position: absolute;
          left: 2vw;
          bottom: 3vw;
          text-align: left;
          line-height: 1;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: reverse;
          -ms-flex-direction: column-reverse;
          flex-direction: column-reverse; }
          .secWrapper .listWrapper .listCont .listItem .pdTxt .pdPrice em {
            font-weight: 600;
            font-size: 3vw;
            color: #ce151f;
            font-style: normal; }
            .secWrapper .listWrapper .listCont .listItem .pdTxt .pdPrice em font {
              font-family: Arial, serif;
              font-size: 4.5vw;
              font-weight: 600; }
          .secWrapper .listWrapper .listCont .listItem .pdTxt .pdPrice span {
            font-family: Arial, serif;
            font-size: 2vw;
            color: #848484;
            text-decoration: line-through;
            display: inline-block;
            margin-left: 0; }
      .secWrapper .listWrapper .listCont .listItem .buyBtn {
        width: 16vw;
        position: absolute;
        right: 1.75vw;
        bottom: 1.5vw; }
      @media only screen and (min-width: 480px) {
        .secWrapper .listWrapper .listCont .listItem .pdTxt {
          padding: 2vw;
          min-height: 22vw; }
          .secWrapper .listWrapper .listCont .listItem .pdTxt > span {
            font-size: 2vw; }
          .secWrapper .listWrapper .listCont .listItem .pdTxt > p {
            font-size: 2.6vw;
            height: 7.4vw;
            line-height: 1.4; }
          .secWrapper .listWrapper .listCont .listItem .pdTxt .pdPrice {
            display: block;
            left: 2vw;
            bottom: 1.5vw; }
            .secWrapper .listWrapper .listCont .listItem .pdTxt .pdPrice em {
              font-size: 3vw; }
              .secWrapper .listWrapper .listCont .listItem .pdTxt .pdPrice em font {
                font-size: 4.2vw; }
            .secWrapper .listWrapper .listCont .listItem .pdTxt .pdPrice span {
              font-size: 2vw; }
        .secWrapper .listWrapper .listCont .listItem .buyBtn {
          width: 11vw;
          right: 1.5vw;
          bottom: 1.5vw; } }
      @media only screen and (min-width: 769px) {
        .secWrapper .listWrapper .listCont .listItem {
          max-width: 275px;
          width: 23.5%; }
          .secWrapper .listWrapper .listCont .listItem:not(:nth-child(4n)) {
            margin-right: 2%; }
          .secWrapper .listWrapper .listCont .listItem .pdTxt {
            padding: 0.8vw;
            min-height: 12vw;
            line-height: 1.4; }
            .secWrapper .listWrapper .listCont .listItem .pdTxt > span {
              font-size: 0.9vw; }
            .secWrapper .listWrapper .listCont .listItem .pdTxt > p {
              font-size: 1.2vw;
              height: 3.2vw;
              line-height: 1.4; }
            .secWrapper .listWrapper .listCont .listItem .pdTxt .pdPrice {
              left: 1vw;
              bottom: 1.25vw; }
              .secWrapper .listWrapper .listCont .listItem .pdTxt .pdPrice em {
                font-size: 1.2vw; }
                .secWrapper .listWrapper .listCont .listItem .pdTxt .pdPrice em font {
                  font-size: 1.8vw; }
              .secWrapper .listWrapper .listCont .listItem .pdTxt .pdPrice span {
                font-size: 0.8vw;
                margin-left: 5px;
                display: inline; }
          .secWrapper .listWrapper .listCont .listItem .buyBtn {
            width: 6.25vw;
            right: 1vw;
            bottom: 1vw; }
          .secWrapper .listWrapper .listCont .listItem:hover {
            -webkit-transform: translateY(-2%);
            -ms-transform: translateY(-2%);
            transform: translateY(-2%);
            -webkit-box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
            box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2); } }
      @media only screen and (min-width: 1367px) {
        .secWrapper .listWrapper .listCont .listItem {
          width: 23.85%; }
          .secWrapper .listWrapper .listCont .listItem:not(:nth-child(4n)) {
            margin-right: 1.5%; }
          .secWrapper .listWrapper .listCont .listItem .pdTxt {
            padding: 15px 13px;
            min-height: 175px; }
            .secWrapper .listWrapper .listCont .listItem .pdTxt > span {
              font-size: 15px; }
            .secWrapper .listWrapper .listCont .listItem .pdTxt > p {
              font-size: 18px;
              height: 49px;
              line-height: 1.4; }
            .secWrapper .listWrapper .listCont .listItem .pdTxt .pdPrice {
              left: 13px;
              bottom: 17px; }
              .secWrapper .listWrapper .listCont .listItem .pdTxt .pdPrice em {
                font-size: 16px;
                letter-spacing: -1px; }
                .secWrapper .listWrapper .listCont .listItem .pdTxt .pdPrice em font {
                  font-size: 30px; }
              .secWrapper .listWrapper .listCont .listItem .pdTxt .pdPrice span {
                font-size: 14px; }
          .secWrapper .listWrapper .listCont .listItem .buyBtn {
            width: 75px;
            height: auto;
            right: 13px;
            bottom: 18px; } }

.fixedBtn {
  width: 10.6%;
  display: none; }
  @media only screen and (min-width: 769px) {
    .fixedBtn {
      display: block;
      position: fixed;
      right: 0;
      top: 12%;
      width: 7%;
      top: 11.25rem; } }
  @media only screen and (min-width: 1024px) {
    .fixedBtn {
      width: auto;
      top: 11.25rem; } }

.sec-0 {
  padding-top: 40px;
  padding-bottom: 40px;
  background: -webkit-gradient(linear, left top, left bottom, from(#012e0f), to(#94b0a6));
  background: -webkit-linear-gradient(top, #012e0f 0%, #94b0a6 100%);
  background: -o-linear-gradient(top, #012e0f 0%, #94b0a6 100%);
  background: linear-gradient(180deg, #012e0f 0%, #94b0a6 100%);
  position: relative;
  z-index: 2; }
  @media only screen and (min-width: 769px) {
    .sec-0 {
      background: url("../images/sec0_bg.png"), -webkit-gradient(linear, left top, left bottom, from(#012e0f), to(#94b0a6));
      background: url("../images/sec0_bg.png"), -webkit-linear-gradient(top, #012e0f 0%, #94b0a6 100%);
      background: url("../images/sec0_bg.png"), -o-linear-gradient(top, #012e0f 0%, #94b0a6 100%);
      background: url("../images/sec0_bg.png"), linear-gradient(180deg, #012e0f 0%, #94b0a6 100%);
      background-repeat: no-repeat;
      background-position: center top;
      background-size: 100% auto; } }
  .sec-0 .secWrapper .listWrapper {
    background: url("../images/sec0_box_bg.png") left top repeat; }
    .sec-0 .secWrapper .listWrapper::before {
      display: none; }
    .sec-0 .secWrapper .listWrapper::after {
      display: none; }
  .sec-0 .reels {
    position: relative;
    width: 88px;
    height: 36px;
    margin: auto;
    margin-top: 20px;
    z-index: 5; }
    @media only screen and (min-width: 769px) {
      .sec-0 .reels {
        width: 100px;
        height: 38px;
        margin-top: 2%; } }
    @media only screen and (min-width: 1367px) {
      .sec-0 .reels {
        width: 120px;
        height: 45px; } }
  .sec-0 .reelsVoice {
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 100%;
    background: #5a6caf;
    border-radius: 50px; }
    .sec-0 .reelsVoice.muted .bar {
      height: 12px;
      width: 2px;
      background: #fff;
      -webkit-animation: unset;
      animation: unset; }
    .sec-0 .reelsVoice.muted .bar:nth-child(1) {
      height: 16px; }
    .sec-0 .reelsVoice.muted .bar:nth-child(2) {
      height: 10px; }
    .sec-0 .reelsVoice.muted .bar:nth-child(3) {
      height: 8px; }
    .sec-0 .reelsVoice.muted .bar:nth-child(4) {
      height: 19px; }
    .sec-0 .reelsVoice.muted .bar:nth-child(5) {
      height: 13px; }
    .sec-0 .reelsVoice.muted .bar:nth-child(6) {
      height: 7px; }
    @media only screen and (min-width: 769px) {
      .sec-0 .reelsVoice.muted .bar {
        height: 10px;
        width: 2.8px; }
      .sec-0 .reelsVoice.muted .bar:nth-child(1) {
        height: 1.8vw; }
      .sec-0 .reelsVoice.muted .bar:nth-child(2) {
        height: 1.3vw; }
      .sec-0 .reelsVoice.muted .bar:nth-child(3) {
        height: .9vw; }
      .sec-0 .reelsVoice.muted .bar:nth-child(4) {
        height: 1.7vw; }
      .sec-0 .reelsVoice.muted .bar:nth-child(5) {
        height: .9vw; }
      .sec-0 .reelsVoice.muted .bar:nth-child(6) {
        height: .6vw; } }
    @media only screen and (min-width: 1367px) {
      .sec-0 .reelsVoice.muted .bar {
        height: 12px;
        width: 3px; }
      .sec-0 .reelsVoice.muted .bar:nth-child(1) {
        height: 16px; }
      .sec-0 .reelsVoice.muted .bar:nth-child(2) {
        height: 10px; }
      .sec-0 .reelsVoice.muted .bar:nth-child(3) {
        height: 8px; }
      .sec-0 .reelsVoice.muted .bar:nth-child(4) {
        height: 19px; }
      .sec-0 .reelsVoice.muted .bar:nth-child(5) {
        height: 13px; }
      .sec-0 .reelsVoice.muted .bar:nth-child(6) {
        height: 8px; } }
    .sec-0 .reelsVoice #bars {
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
    .sec-0 .reelsVoice .bar {
      background: #fff;
      bottom: 1px;
      height: 3px;
      width: 2px;
      margin: 0px 1.5px;
      border-radius: 5px;
      -webkit-animation: soundMB 0ms -600ms linear infinite alternate;
      animation: soundMB 0ms -600ms linear infinite alternate; }
      .sec-0 .reelsVoice .bar:nth-child(1) {
        left: 1px;
        -webkit-animation-duration: 474ms;
        animation-duration: 474ms; }
      .sec-0 .reelsVoice .bar:nth-child(2) {
        left: 7px;
        -webkit-animation-duration: 433ms;
        animation-duration: 433ms; }
      .sec-0 .reelsVoice .bar:nth-child(3) {
        left: 14px;
        -webkit-animation-duration: 407ms;
        animation-duration: 407ms; }
      .sec-0 .reelsVoice .bar:nth-child(4) {
        left: 21px;
        -webkit-animation-duration: 458ms;
        animation-duration: 458ms; }
      .sec-0 .reelsVoice .bar:nth-child(5) {
        left: 28px;
        -webkit-animation-duration: 400ms;
        animation-duration: 400ms; }
      .sec-0 .reelsVoice .bar:nth-child(6) {
        left: 35px;
        -webkit-animation-duration: 427ms;
        animation-duration: 427ms; }
      @media only screen and (min-width: 769px) {
        .sec-0 .reelsVoice .bar {
          bottom: 1px;
          height: 3px;
          width: 3.5px;
          margin: 0px 2px;
          border-radius: 5px;
          -webkit-animation: soundMID 0ms -600ms linear infinite alternate;
          animation: soundMID 0ms -600ms linear infinite alternate; }
          .sec-0 .reelsVoice .bar:nth-child(1) {
            left: 1px;
            -webkit-animation-duration: 474ms;
            animation-duration: 474ms; }
          .sec-0 .reelsVoice .bar:nth-child(2) {
            left: 7px;
            -webkit-animation-duration: 433ms;
            animation-duration: 433ms; }
          .sec-0 .reelsVoice .bar:nth-child(3) {
            left: 14px;
            -webkit-animation-duration: 407ms;
            animation-duration: 407ms; }
          .sec-0 .reelsVoice .bar:nth-child(4) {
            left: 21px;
            -webkit-animation-duration: 458ms;
            animation-duration: 458ms; }
          .sec-0 .reelsVoice .bar:nth-child(5) {
            left: 28px;
            -webkit-animation-duration: 400ms;
            animation-duration: 400ms; }
          .sec-0 .reelsVoice .bar:nth-child(6) {
            left: 35px;
            -webkit-animation-duration: 427ms;
            animation-duration: 427ms; } }
      @media only screen and (min-width: 1367px) {
        .sec-0 .reelsVoice .bar {
          bottom: 1px;
          height: 3px;
          width: 3.5px;
          margin: 0px 2px;
          border-radius: 5px;
          -webkit-animation: soundPC 0ms -600ms linear infinite alternate;
          animation: soundPC 0ms -600ms linear infinite alternate; }
          .sec-0 .reelsVoice .bar:nth-child(1) {
            left: 1px;
            -webkit-animation-duration: 474ms;
            animation-duration: 474ms; }
          .sec-0 .reelsVoice .bar:nth-child(2) {
            left: 7px;
            -webkit-animation-duration: 433ms;
            animation-duration: 433ms; }
          .sec-0 .reelsVoice .bar:nth-child(3) {
            left: 14px;
            -webkit-animation-duration: 407ms;
            animation-duration: 407ms; }
          .sec-0 .reelsVoice .bar:nth-child(4) {
            left: 21px;
            -webkit-animation-duration: 458ms;
            animation-duration: 458ms; }
          .sec-0 .reelsVoice .bar:nth-child(5) {
            left: 28px;
            -webkit-animation-duration: 400ms;
            animation-duration: 400ms; }
          .sec-0 .reelsVoice .bar:nth-child(6) {
            left: 35px;
            -webkit-animation-duration: 427ms;
            animation-duration: 427ms; } }

@-webkit-keyframes soundPC {
  0% {
    opacity: .35;
    height: 3px; }
  100% {
    opacity: 1;
    height: 22px; } }

@keyframes soundPC {
  0% {
    opacity: .35;
    height: 3px; }
  100% {
    opacity: 1;
    height: 22px; } }

@-webkit-keyframes soundMID {
  0% {
    opacity: .35;
    height: 2px; }
  100% {
    opacity: 1;
    height: 2.1vw; } }

@keyframes soundMID {
  0% {
    opacity: .35;
    height: 2px; }
  100% {
    opacity: 1;
    height: 2.1vw; } }

@-webkit-keyframes soundMB {
  0% {
    opacity: .35;
    height: 3px; }
  100% {
    opacity: 1;
    height: 16px; } }

@keyframes soundMB {
  0% {
    opacity: .35;
    height: 3px; }
  100% {
    opacity: 1;
    height: 16px; } }
  .sec-0 .listCont ._slick {
    position: relative; }
  .sec-0 .listCont .slickReels {
    position: relative;
    width: 100%;
    margin: auto;
    margin-top: 8px;
    margin-bottom: 5px;
    visibility: visible;
    overflow: visible;
    opacity: 0;
    -webkit-transition: all 1.2s ease;
    -o-transition: all 1.2s ease;
    transition: all 1.2s ease; }
    @media only screen and (min-width: 769px) {
      .sec-0 .listCont .slickReels {
        margin-top: 10px;
        margin-bottom: 6px; } }
    .sec-0 .listCont .slickReels.slick-initialized {
      opacity: 1;
      visibility: visible; }
    .sec-0 .listCont .slickReels .slick-list {
      position: relative; }
    .sec-0 .listCont .slickReels .item {
      position: relative;
      height: 90vw;
      margin: 0 3.5vw 0 0;
      border-radius: 12px;
      -webkit-filter: brightness(0.3) saturate(0.3);
      filter: brightness(0.3) saturate(0.3);
      overflow: hidden;
      -webkit-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out; }
      @media only screen and (min-width: 480px) {
        .sec-0 .listCont .slickReels .item {
          height: 52vw;
          margin: 0 31vw 0 -29vw; } }
      @media only screen and (min-width: 769px) {
        .sec-0 .listCont .slickReels .item {
          height: 47vw;
          margin: 0 -140px 0 150px; } }
      @media only screen and (min-width: 1024px) {
        .sec-0 .listCont .slickReels .item {
          height: 46.5vw;
          margin: 0 -140px 0 150px; } }
      @media only screen and (min-width: 1235px) {
        .sec-0 .listCont .slickReels .item {
          height: 600px;
          margin: 0 -150px 0 160px; } }
      .sec-0 .listCont .slickReels .item video {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: 100%;
        height: 100%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -o-object-fit: fill;
        object-fit: fill; }
      .sec-0 .listCont .slickReels .item p {
        position: absolute;
        top: 0;
        left: 0;
        padding: 8px 15px;
        font-size: 15px;
        font-weight: bold;
        color: #fff;
        text-shadow: 0 0 3px #666;
        opacity: 0; }
        @media only screen and (min-width: 769px) {
          .sec-0 .listCont .slickReels .item p {
            opacity: 1; } }
      .sec-0 .listCont .slickReels .item.slick-current.slick-active.item {
        -webkit-filter: brightness(1) saturate(1);
        filter: brightness(1) saturate(1); }
  .sec-0 .listCont .slick-current,
  .sec-0 .listCont .slick-arrow {
    opacity: 1;
    z-index: 99; }
  .sec-0 .listCont .slick-arrow {
    width: auto;
    height: 100%;
    margin: 0 40px;
    opacity: 0.8; }
    .sec-0 .listCont .slick-arrow:before {
      width: 40px;
      height: 40px;
      padding: 5px;
      border-radius: 50%; }
    @media only screen and (min-width: 769px) {
      .sec-0 .listCont .slick-arrow {
        margin: 0 2vw; }
        .sec-0 .listCont .slick-arrow:before {
          width: 6.4vw;
          height: 6.4vw;
          padding: 1vw; } }
    @media only screen and (min-width: 1367px) {
      .sec-0 .listCont .slick-arrow {
        margin: 0 40px; }
        .sec-0 .listCont .slick-arrow:before {
          width: 80px;
          height: 80px;
          padding: 40px; } }
  .sec-0 .listCont .slick-prev {
    left: 0;
    right: initial; }
    .sec-0 .listCont .slick-prev:before {
      background: url("../images/icons/slick-prev.svg") #ffc30b center no-repeat;
      background-size: contain; }
    .sec-0 .listCont .slick-prev:hover:before {
      background: url("../images/icons/slick-prev.svg") #ffc30b center no-repeat;
      background-size: contain; }
  .sec-0 .listCont .slick-next {
    right: 0;
    left: initial; }
    .sec-0 .listCont .slick-next:before {
      background: url("../images/icons/slick-next.svg") #ffc30b center no-repeat;
      background-size: contain; }
    .sec-0 .listCont .slick-next:hover:before {
      background: url("../images/icons/slick-next.svg") #ffc30b center no-repeat;
      background-size: contain; }

.sec-10 {
  background-image: url("../images/m_rule_bg.png");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
  padding-bottom: 15vw !important; }
  .sec-10::after {
    display: none; }
  @media only screen and (min-width: 769px) {
    .sec-10 {
      background-image: url("../images/rule_bg.png");
      background-size: 100% auto;
      padding-bottom: 200px !important; } }
  @media only screen and (min-width: 560px) {
    .sec-10 {
      background-size: auto; } }
  .sec-10 .listTop .secTitle {
    width: 50% !important;
    margin-left: auto !important; }
    @media only screen and (min-width: 560px) {
      .sec-10 .listTop .secTitle {
        width: 40% !important;
        max-width: 346px !important;
        margin: auto !important; } }
  .sec-10 .secWrapper {
    position: relative; }
    .sec-10 .secWrapper::after {
      content: '';
      display: block;
      position: absolute;
      width: 29vw;
      height: 25.6vw;
      background-image: url("../images/rule_deco_2.png");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center top;
      bottom: -12vw;
      left: -16%; }
      @media only screen and (min-width: 1024px) {
        .sec-10 .secWrapper::after {
          width: 405px;
          height: 357px;
          bottom: -3%; } }
    .sec-10 .secWrapper .listWrapper {
      margin-top: -14.5vw;
      background-image: url("../images/rule_list_top.png"), url("../images/rule_list_bot.png"), url("../images/rule_list_bg.png");
      background-repeat: no-repeat, no-repeat, repeat-y;
      background-position: center top, center bottom, center top;
      background-size: 100% auto, 100% auto, 100% auto;
      position: relative;
      z-index: 1; }
      @media only screen and (min-width: 769px) {
        .sec-10 .secWrapper .listWrapper {
          margin-top: -120px; } }
      .sec-10 .secWrapper .listWrapper::before, .sec-10 .secWrapper .listWrapper::after {
        content: '';
        display: block;
        position: absolute;
        width: 24.5vw;
        height: 16.4vw;
        background-image: url("../images/rule_deco_1.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center top; }
        @media only screen and (min-width: 1024px) {
          .sec-10 .secWrapper .listWrapper::before, .sec-10 .secWrapper .listWrapper::after {
            width: 344px;
            height: 228px; } }
      .sec-10 .secWrapper .listWrapper::before {
        top: -5vw;
        left: auto;
        right: -1.5%; }
        @media only screen and (min-width: 1024px) {
          .sec-10 .secWrapper .listWrapper::before {
            top: -3%; } }
      .sec-10 .secWrapper .listWrapper::after {
        bottom: -5vw;
        left: -3%; }
        @media only screen and (min-width: 1024px) {
          .sec-10 .secWrapper .listWrapper::after {
            bottom: -3%; } }
      .sec-10 .secWrapper .listWrapper .bg {
        padding: 18vw 8vw 12vw; }
        @media only screen and (min-width: 769px) {
          .sec-10 .secWrapper .listWrapper .bg {
            padding: 150px 120px 180px; } }
        @media only screen and (max-width: 1366px) {
          .sec-10 .secWrapper .listWrapper .bg::before, .sec-10 .secWrapper .listWrapper .bg::after {
            width: 20.93704vw;
            height: 12.66471vw; }
          .sec-10 .secWrapper .listWrapper .bg::before {
            top: -2.92826vw;
            left: -6.58858vw; }
          .sec-10 .secWrapper .listWrapper .bg::after {
            bottom: -2.92826vw;
            right: -6.58858vw; } }
  .sec-10 .ruleTitle {
    position: relative;
    max-width: 627px;
    width: 100%;
    padding: 1% 0 1.2%; }
    @media only screen and (min-width: 769px) {
      .sec-10 .ruleTitle {
        max-width: 1040px;
        width: auto; } }
  .sec-10 .ruleCont {
    position: relative;
    color: #000;
    font-size: 3.6vw;
    padding-left: 20px; }
    .sec-10 .ruleCont strong {
      position: relative;
      display: inline-block;
      white-space: nowrap;
      color: #fff;
      padding: 2px 10px 0;
      margin: 10px 12.5px 3px -4px;
      letter-spacing: 2px;
      z-index: 1; }
      .sec-10 .ruleCont strong:before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: -0.5px;
        left: 0;
        background-color: #ffb414;
        -webkit-transform: skew(-16deg);
        -ms-transform: skew(-16deg);
        transform: skew(-16deg);
        z-index: -1; }
    .sec-10 .ruleCont .flex {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      @media only screen and (min-width: 769px) {
        .sec-10 .ruleCont .flex {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
          -ms-flex-direction: row;
          flex-direction: row;
          -webkit-box-align: baseline;
          -ms-flex-align: baseline;
          align-items: baseline; } }
      .sec-10 .ruleCont .flex span {
        display: inline-block;
        padding-right: 5px; }
    .sec-10 .ruleCont ul {
      padding: 0 0 0 1.5em; }
      .sec-10 .ruleCont ul.disc {
        list-style: disc; }
        .sec-10 .ruleCont ul.disc li::marker {
          color: #ffb414;
          font-size: 1.25em; }
      .sec-10 .ruleCont ul.circle {
        list-style: circle; }
      .sec-10 .ruleCont ul.decimal {
        list-style: decimal; }
      .sec-10 .ruleCont ul.lower-latin {
        list-style: lower-latin; }
      .sec-10 .ruleCont ul > li:not(:last-of-type) {
        margin-bottom: 0.5em; }
      .sec-10 .ruleCont ul ol:not(:last-of-type) {
        margin-bottom: 0.5em; }
      .sec-10 .ruleCont ul ol > p {
        margin-bottom: 0.25em; }
      .sec-10 .ruleCont ul ol > li {
        margin-bottom: 0.175em; }
  .sec-10 .ruleBottom {
    width: 90%;
    margin: auto;
    font-size: 3.5vw;
    color: #000;
    line-height: 1.5;
    border-top: 2px solid #ae191b;
    margin-top: 7vw;
    padding-top: 7vw; }
    @media only screen and (min-width: 769px) {
      .sec-10 .ruleBottom {
        font-size: 16px;
        margin-top: 30px;
        padding-top: 30px; } }
  @media only screen and (min-width: 480px) {
    .sec-10 .ruleCont strong {
      line-height: 34px; } }
  @media only screen and (min-width: 769px) {
    .sec-10 .ruleCont {
      font-size: 20px; }
      .sec-10 .ruleCont strong {
        line-height: 1.65; }
    .sec-10 ul {
      padding: 0.75em 0 0.75em 1.35em; } }

.lightbox ._slick {
  width: 100%; }
  .lightbox ._slick > div {
    width: 100%; }
    .lightbox ._slick > div .tutorialItem {
      width: 100%;
      margin: 0; }
      @media only screen and (min-width: 769px) {
        .lightbox ._slick > div .tutorialItem {
          margin: 0 0.5%; } }

.lightbox .slick-dots {
  bottom: -30px; }

.lightbox .slick-dots li button:before {
  font-size: 40px; }

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