@charset "UTF-8";
/* base */
/*==================================================*\
        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);
*	}
*/
/*
*******************************************************************************************************************************
----------  RESET
*******************************************************************************************************************************
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
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,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

ol,
ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

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

:focus {
  outline: 0; }

ins {
  text-decoration: none; }

del {
  text-decoration: line-through; }

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

/* pc */
/* -------------
    $ scss
------------- */
/* font */
/* color */
/* mixin */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-moz-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-ms-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-o-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-moz-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-ms-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-o-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/* -------------
    ALL USE
------------- */
img {
  width: 100%;
  display: block; }

a {
  display: block;
  text-decoration: none; }

.c {
  clear: both; }

.table {
  display: table; }

.tr {
  display: table-row; }

.th, .td {
  display: table-cell;
  vertical-align: middle; }

.hide {
  display: none; }

.ab {
  position: absolute; }

.clearfix:after {
  content: "";
  display: block;
  clear: both; }

.float-l {
  float: left; }

.float-r {
  float: right; }

._m {
  display: none; }
  @media screen and (max-width: 768px) {
    ._m {
      display: block; } }

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

.autoW {
  width: auto; }

/* vw換算 */
@font-face {
  font-family: 'Samsung Sharp Sans';
  src: url("../font/SamsungSharpSans-Bold.eot"), url("../font/SamsungSharpSans-Bold.eot?#iefix") format("embedded-opentype") url("../font/SamsungSharpSans-Bold.woff2") format("woff2"), url("../font/SamsungSharpSans-Bold.woff") format("woff"), url("../font/SamsungSharpSans-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }

@-webkit-keyframes navbtnani {
  0% {
    top: -130%; }
  70% {
    top: -15%; }
  100% {
    top: -25%; } }

@-moz-keyframes navbtnani {
  0% {
    top: -130%; }
  70% {
    top: -15%; }
  100% {
    top: -25%; } }

@-ms-keyframes navbtnani {
  0% {
    top: -130%; }
  70% {
    top: -15%; }
  100% {
    top: -25%; } }

@-o-keyframes navbtnani {
  0% {
    top: -130%; }
  70% {
    top: -15%; }
  100% {
    top: -25%; } }

@keyframes navbtnani {
  0% {
    top: -130%; }
  70% {
    top: -15%; }
  100% {
    top: -25%; } }

@-webkit-keyframes aniPlay {
  from {
    background-position: 0 0; }
  to {
    background-position: 0 100%; } }

@-moz-keyframes aniPlay {
  from {
    background-position: 0 0; }
  to {
    background-position: 0 100%; } }

@-ms-keyframes aniPlay {
  from {
    background-position: 0 0; }
  to {
    background-position: 0 100%; } }

@-o-keyframes aniPlay {
  from {
    background-position: 0 0; }
  to {
    background-position: 0 100%; } }

@keyframes aniPlay {
  from {
    background-position: 0 0; }
  to {
    background-position: 0 100%; } }

@-webkit-keyframes btnovrani {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-moz-keyframes btnovrani {
  0% {
    transform: scale(0); }
  50% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }

@-ms-keyframes btnovrani {
  0% {
    -ms-transform: scale(0);
    transform: scale(0); }
  50% {
    -ms-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    -ms-transform: scale(1);
    transform: scale(1); } }

@-o-keyframes btnovrani {
  0% {
    transform: scale(0); }
  50% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }

@keyframes btnovrani {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes titleani {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-5%);
    transform: translateX(-5%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@-moz-keyframes titleani {
  0% {
    opacity: 0;
    transform: translateX(-5%); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@-ms-keyframes titleani {
  0% {
    opacity: 0;
    -ms-transform: translateX(-5%);
    transform: translateX(-5%); }
  100% {
    opacity: 1;
    -ms-transform: translateX(0);
    transform: translateX(0); } }

@-o-keyframes titleani {
  0% {
    opacity: 0;
    transform: translateX(-5%); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes titleani {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-5%);
    transform: translateX(-5%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@-webkit-keyframes wordani {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20%);
    transform: translateY(20%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-moz-keyframes wordani {
  0% {
    opacity: 0;
    transform: translateY(20%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@-ms-keyframes wordani {
  0% {
    opacity: 0;
    -ms-transform: translateY(20%);
    transform: translateY(20%); }
  100% {
    opacity: 1;
    -ms-transform: translateY(0);
    transform: translateY(0); } }

@-o-keyframes wordani {
  0% {
    opacity: 0;
    transform: translateY(20%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes wordani {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20%);
    transform: translateY(20%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes sqani1 {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@-moz-keyframes sqani1 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0%); } }

@-ms-keyframes sqani1 {
  0% {
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); }
  100% {
    -ms-transform: translateX(0%);
    transform: translateX(0%); } }

@-o-keyframes sqani1 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0%); } }

@keyframes sqani1 {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@-webkit-keyframes sqani2 {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@-moz-keyframes sqani2 {
  0% {
    transform: translateX(100%); }
  100% {
    transform: translateX(0%); } }

@-ms-keyframes sqani2 {
  0% {
    -ms-transform: translateX(100%);
    transform: translateX(100%); }
  100% {
    -ms-transform: translateX(0%);
    transform: translateX(0%); } }

@-o-keyframes sqani2 {
  0% {
    transform: translateX(100%); }
  100% {
    transform: translateX(0%); } }

@keyframes sqani2 {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@-webkit-keyframes sqani3 {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%); }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@-moz-keyframes sqani3 {
  0% {
    transform: translateY(100%); }
  100% {
    transform: translateY(0%); } }

@-ms-keyframes sqani3 {
  0% {
    -ms-transform: translateY(100%);
    transform: translateY(100%); }
  100% {
    -ms-transform: translateY(0%);
    transform: translateY(0%); } }

@-o-keyframes sqani3 {
  0% {
    transform: translateY(100%); }
  100% {
    transform: translateY(0%); } }

@keyframes sqani3 {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%); }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@-webkit-keyframes lineani1 {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@-moz-keyframes lineani1 {
  0% {
    transform: translateY(-100%); }
  100% {
    transform: translateY(0%); } }

@-ms-keyframes lineani1 {
  0% {
    -ms-transform: translateY(-100%);
    transform: translateY(-100%); }
  100% {
    -ms-transform: translateY(0%);
    transform: translateY(0%); } }

@-o-keyframes lineani1 {
  0% {
    transform: translateY(-100%); }
  100% {
    transform: translateY(0%); } }

@keyframes lineani1 {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@-webkit-keyframes lineani2 {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@-moz-keyframes lineani2 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0%); } }

@-ms-keyframes lineani2 {
  0% {
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); }
  100% {
    -ms-transform: translateX(0%);
    transform: translateX(0%); } }

@-o-keyframes lineani2 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0%); } }

@keyframes lineani2 {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@-webkit-keyframes lineani3 {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@-moz-keyframes lineani3 {
  0% {
    transform: translateX(100%); }
  100% {
    transform: translateX(0%); } }

@-ms-keyframes lineani3 {
  0% {
    -ms-transform: translateX(100%);
    transform: translateX(100%); }
  100% {
    -ms-transform: translateX(0%);
    transform: translateX(0%); } }

@-o-keyframes lineani3 {
  0% {
    transform: translateX(100%); }
  100% {
    transform: translateX(0%); } }

@keyframes lineani3 {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@-webkit-keyframes iceani {
  0% {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1); }
  50% {
    -webkit-transform: translateY(5%) scale(1.05);
    transform: translateY(5%) scale(1.05); }
  100% {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1); } }

@-moz-keyframes iceani {
  0% {
    transform: translateY(0) scale(1); }
  50% {
    transform: translateY(5%) scale(1.05); }
  100% {
    transform: translateY(0) scale(1); } }

@-ms-keyframes iceani {
  0% {
    -ms-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1); }
  50% {
    -ms-transform: translateY(5%) scale(1.05);
    transform: translateY(5%) scale(1.05); }
  100% {
    -ms-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1); } }

@-o-keyframes iceani {
  0% {
    transform: translateY(0) scale(1); }
  50% {
    transform: translateY(5%) scale(1.05); }
  100% {
    transform: translateY(0) scale(1); } }

@keyframes iceani {
  0% {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1); }
  50% {
    -webkit-transform: translateY(5%) scale(1.05);
    transform: translateY(5%) scale(1.05); }
  100% {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1); } }

@-webkit-keyframes jump {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-5%);
    transform: translateY(-5%); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-moz-keyframes jump {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-5%); }
  100% {
    transform: translateY(0); } }

@-ms-keyframes jump {
  0% {
    -ms-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -ms-transform: translateY(-5%);
    transform: translateY(-5%); }
  100% {
    -ms-transform: translateY(0);
    transform: translateY(0); } }

@-o-keyframes jump {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-5%); }
  100% {
    transform: translateY(0); } }

@keyframes jump {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-5%);
    transform: translateY(-5%); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes btnpopup {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0); }
  50% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02);
    transform: scale3d(1.02, 1.02, 1.02); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@-moz-keyframes btnpopup {
  0% {
    transform: scale3d(0, 0, 0); }
  50% {
    transform: scale3d(1.02, 1.02, 1.02); }
  100% {
    transform: scale3d(1, 1, 1); } }

@-ms-keyframes btnpopup {
  0% {
    transform: scale3d(0, 0, 0); }
  50% {
    transform: scale3d(1.02, 1.02, 1.02); }
  100% {
    transform: scale3d(1, 1, 1); } }

@-o-keyframes btnpopup {
  0% {
    transform: scale3d(0, 0, 0); }
  50% {
    transform: scale3d(1.02, 1.02, 1.02); }
  100% {
    transform: scale3d(1, 1, 1); } }

@keyframes btnpopup {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0); }
  50% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02);
    transform: scale3d(1.02, 1.02, 1.02); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@-webkit-keyframes boardani {
  0% {
    -webkit-transform: translateX(0) translateY(0) rotate(0);
    transform: translateX(0) translateY(0) rotate(0); }
  40% {
    -webkit-transform: translateX(2%) translateY(1%) rotate(2deg);
    transform: translateX(2%) translateY(1%) rotate(2deg); }
  70% {
    -webkit-transform: translateX(3%) translateY(0%) rotate(1deg);
    transform: translateX(3%) translateY(0%) rotate(1deg); }
  100% {
    -webkit-transform: translateX(0) translateY(0) rotate(0);
    transform: translateX(0) translateY(0) rotate(0); } }

@-moz-keyframes boardani {
  0% {
    transform: translateX(0) translateY(0) rotate(0); }
  40% {
    transform: translateX(2%) translateY(1%) rotate(2deg); }
  70% {
    transform: translateX(3%) translateY(0%) rotate(1deg); }
  100% {
    transform: translateX(0) translateY(0) rotate(0); } }

@-ms-keyframes boardani {
  0% {
    -ms-transform: translateX(0) translateY(0) rotate(0);
    transform: translateX(0) translateY(0) rotate(0); }
  40% {
    -ms-transform: translateX(2%) translateY(1%) rotate(2deg);
    transform: translateX(2%) translateY(1%) rotate(2deg); }
  70% {
    -ms-transform: translateX(3%) translateY(0%) rotate(1deg);
    transform: translateX(3%) translateY(0%) rotate(1deg); }
  100% {
    -ms-transform: translateX(0) translateY(0) rotate(0);
    transform: translateX(0) translateY(0) rotate(0); } }

@-o-keyframes boardani {
  0% {
    transform: translateX(0) translateY(0) rotate(0); }
  40% {
    transform: translateX(2%) translateY(1%) rotate(2deg); }
  70% {
    transform: translateX(3%) translateY(0%) rotate(1deg); }
  100% {
    transform: translateX(0) translateY(0) rotate(0); } }

@keyframes boardani {
  0% {
    -webkit-transform: translateX(0) translateY(0) rotate(0);
    transform: translateX(0) translateY(0) rotate(0); }
  40% {
    -webkit-transform: translateX(2%) translateY(1%) rotate(2deg);
    transform: translateX(2%) translateY(1%) rotate(2deg); }
  70% {
    -webkit-transform: translateX(3%) translateY(0%) rotate(1deg);
    transform: translateX(3%) translateY(0%) rotate(1deg); }
  100% {
    -webkit-transform: translateX(0) translateY(0) rotate(0);
    transform: translateX(0) translateY(0) rotate(0); } }

@-webkit-keyframes cloudani {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02);
    transform: scale3d(1.02, 1.02, 1.02); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@-moz-keyframes cloudani {
  0% {
    transform: scale3d(1, 1, 1); }
  50% {
    transform: scale3d(1.02, 1.02, 1.02); }
  100% {
    transform: scale3d(1, 1, 1); } }

@-ms-keyframes cloudani {
  0% {
    transform: scale3d(1, 1, 1); }
  50% {
    transform: scale3d(1.02, 1.02, 1.02); }
  100% {
    transform: scale3d(1, 1, 1); } }

@-o-keyframes cloudani {
  0% {
    transform: scale3d(1, 1, 1); }
  50% {
    transform: scale3d(1.02, 1.02, 1.02); }
  100% {
    transform: scale3d(1, 1, 1); } }

@keyframes cloudani {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02);
    transform: scale3d(1.02, 1.02, 1.02); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@-webkit-keyframes peoani {
  0% {
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
    opacity: 0; }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1; } }

@-moz-keyframes peoani {
  0% {
    transform: translate3d(10%, 0, 0);
    opacity: 0; }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1; } }

@-ms-keyframes peoani {
  0% {
    transform: translate3d(10%, 0, 0);
    opacity: 0; }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1; } }

@-o-keyframes peoani {
  0% {
    transform: translate3d(10%, 0, 0);
    opacity: 0; }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1; } }

@keyframes peoani {
  0% {
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
    opacity: 0; }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1; } }

@-webkit-keyframes smileani {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0); }
  70% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@-moz-keyframes smileani {
  0% {
    transform: scale3d(0, 0, 0); }
  70% {
    transform: scale3d(1.1, 1.1, 1.1); }
  100% {
    transform: scale3d(1, 1, 1); } }

@-ms-keyframes smileani {
  0% {
    transform: scale3d(0, 0, 0); }
  70% {
    transform: scale3d(1.1, 1.1, 1.1); }
  100% {
    transform: scale3d(1, 1, 1); } }

@-o-keyframes smileani {
  0% {
    transform: scale3d(0, 0, 0); }
  70% {
    transform: scale3d(1.1, 1.1, 1.1); }
  100% {
    transform: scale3d(1, 1, 1); } }

@keyframes smileani {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0); }
  70% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@-webkit-keyframes dotani {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0; } }

@-moz-keyframes dotani {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(2);
    opacity: 0; } }

@-ms-keyframes dotani {
  0% {
    -ms-transform: scale(1);
    transform: scale(1); }
  100% {
    -ms-transform: scale(2);
    transform: scale(2);
    opacity: 0; } }

@-o-keyframes dotani {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(2);
    opacity: 0; } }

@keyframes dotani {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0; } }

@-webkit-keyframes rightar {
  0% {
    left: 12%; }
  50% {
    left: 15%; }
  100% {
    left: 12%; } }

@-moz-keyframes rightar {
  0% {
    left: 12%; }
  50% {
    left: 15%; }
  100% {
    left: 12%; } }

@-ms-keyframes rightar {
  0% {
    left: 12%; }
  50% {
    left: 15%; }
  100% {
    left: 12%; } }

@-o-keyframes rightar {
  0% {
    left: 12%; }
  50% {
    left: 15%; }
  100% {
    left: 12%; } }

@keyframes rightar {
  0% {
    left: 12%; }
  50% {
    left: 15%; }
  100% {
    left: 12%; } }

@-webkit-keyframes leftar {
  0% {
    right: 12%; }
  50% {
    right: 15%; }
  100% {
    right: 12%; } }

@-moz-keyframes leftar {
  0% {
    right: 12%; }
  50% {
    right: 15%; }
  100% {
    right: 12%; } }

@-ms-keyframes leftar {
  0% {
    right: 12%; }
  50% {
    right: 15%; }
  100% {
    right: 12%; } }

@-o-keyframes leftar {
  0% {
    right: 12%; }
  50% {
    right: 15%; }
  100% {
    right: 12%; } }

@keyframes leftar {
  0% {
    right: 12%; }
  50% {
    right: 15%; }
  100% {
    right: 12%; } }

@-webkit-keyframes sidear {
  0% {
    top: 77%; }
  50% {
    top: 80%; }
  100% {
    top: 77%; } }

@-moz-keyframes sidear {
  0% {
    top: 77%; }
  50% {
    top: 80%; }
  100% {
    top: 77%; } }

@-ms-keyframes sidear {
  0% {
    top: 77%; }
  50% {
    top: 80%; }
  100% {
    top: 77%; } }

@-o-keyframes sidear {
  0% {
    top: 77%; }
  50% {
    top: 80%; }
  100% {
    top: 77%; } }

@keyframes sidear {
  0% {
    top: 77%; }
  50% {
    top: 80%; }
  100% {
    top: 77%; } }

/* main */
/* BODY,HTML
--------------------------------------------------------------------------------------*/
html, body {
  width: 100%;
  background: #fff;
  font-family: "微軟正黑體", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "新細明體", "蘋果儷黑體", Verdana, sans-serif;
  overflow-x: hidden; }

html {
  -webkit-text-size-adjust: 100%; }

#static_footer {
  line-height: 1.5; }
  #static_footer .gb-footer-2019__sitemap-items .gb-footer-2019__item-list li {
    line-height: 1.75; }

a:visited, a:active {
  background: transparent; }

input, button, select {
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  appearance: auto !important; }

.SamsungSharpSans {
  font-family: "Samsung Sharp Sans" ,"微軟正黑體","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"新細明體","蘋果儷黑體",Verdana,sans-serif; }

/* 架構
--------------------------------------------------------------------------------------*/
.wrapper {
  width: 100%;
  position: relative;
  background-color: #fff; }
  .wrapper a:focus {
    outline: 0; }

.sec {
  width: 100%;
  position: relative; }
  .sec .outer {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: auto; }
    @media screen and (max-width: 768px) {
      .sec .outer {
        width: 100%; } }
  .sec .inner {
    padding: 50px 150px 30px;
    position: relative; }
    @media screen and (max-width: 1366px) {
      .sec .inner {
        padding: 2.92826vw 10.98097vw; } }
    @media screen and (max-width: 768px) {
      .sec .inner {
        padding: 8vw 5vw 15vw; } }

.container {
  width: 92.5%;
  max-width: 1300px;
  margin: auto;
  position: relative;
  padding: 0; }
  @media screen and (max-width: 1366px) {
    .container {
      width: 98%; } }
  @media screen and (max-width: 768px) {
    .container {
      width: 100%; } }

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.mybtn {
  font-size: 19px;
  color: #fff;
  font-weight: bold;
  background-color: #000;
  padding: 15px 0;
  border-radius: 50px;
  position: relative;
  text-align: center;
  line-height: 1;
  cursor: pointer; }
  .mybtn:hover {
    background-color: #4187f9; }
  .mybtn a {
    color: inherit; }
  .mybtn span {
    position: relative;
    color: #fff !important;
    z-index: 1; }
  @media screen and (max-width: 1366px) {
    .mybtn {
      font-size: 1.53734vw;
      padding: 1.0981vw 0;
      border-radius: 3.66032vw; } }
  @media screen and (max-width: 768px) {
    .mybtn {
      font-size: 4vw;
      border: 1px solid #1428a0;
      border-radius: 5vw;
      padding: 2.5vw 0; } }
  .mybtn:hover {
    color: #fff; }
    .mybtn:hover:after {
      -webkit-animation: btnovrani .5s ease forwards;
      animation: btnovrani .5s ease forwards; }

/* 共用
--------------------------------------------------------------------------------------*/
.sectitle {
  font-size: 40px;
  text-align: center;
  position: relative;
  font-weight: bold;
  margin-bottom: 30px;
  font-family: 'Noto Sans TC', sans-serif;
  position: relative;
  z-index: 1;
  line-height: 1.2;
  letter-spacing: 2px; }
  @media screen and (max-width: 1366px) {
    .sectitle {
      font-size: 2.92826vw;
      margin-bottom: 2.19619vw; } }
  @media screen and (max-width: 768px) {
    .sectitle {
      font-size: 6.25vw;
      margin-bottom: 5vw; } }

.slick-dotted.slick-slider {
  margin-bottom: 0; }

.slick-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.08333vw; }
  @media screen and (max-width: 768px) {
    .slick-dots {
      bottom: 2vw; } }
  .slick-dots li {
    width: 5.46875vw;
    height: 0.57292vw;
    margin: 0 10px; }
    @media screen and (max-width: 768px) {
      .slick-dots li {
        width: 3.125vw;
        height: 3.125vw; } }
    .slick-dots li button {
      width: 100%;
      height: 100%;
      background: #d7d7d7;
      border-radius: 0.57292vw;
      padding: 0;
      -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
      -webkit-transition: .2s;
      -o-transition: .2s;
      transition: .2s; }
      .slick-dots li button:before {
        display: none; }
      @media screen and (max-width: 768px) {
        .slick-dots li button {
          border-radius: 50%; } }
    .slick-dots li.slick-active button {
      background: #ad6e54; }

.slick-arrow {
  width: 54px;
  height: 54px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;
  top: 50%;
  z-index: 15; }
  .slick-arrow.slick-prev {
    background-image: url("../images/arrow_l.png");
    left: -4%; }
  .slick-arrow.slick-next {
    background-image: url("../images/arrow_r.png");
    right: -4%; }
  .slick-arrow:before {
    display: none; }
  @media screen and (max-width: 1366px) {
    .slick-arrow {
      width: 3.95315vw;
      height: 3.95315vw;
      top: 60%; } }
  @media screen and (max-width: 768px) {
    .slick-arrow {
      width: 10vw;
      height: 10vw;
      top: 50%; }
      .slick-arrow.slick-prev {
        left: 2%; }
      .slick-arrow.slick-next {
        right: 2%; } }
  .slick-arrow:hover.slick-prev {
    left: -5%; }
  .slick-arrow:hover.slick-next {
    right: -5%; }
  @media screen and (max-width: 768px) {
    .slick-arrow:hover.slick-prev {
      left: 0; }
    .slick-arrow:hover.slick-next {
      right: 0; } }

.sidebtn {
  width: 72px;
  position: fixed !important;
  top: 45%;
  right: 0;
  cursor: pointer;
  z-index: 20; }
  .sidebtn a {
    color: inherit; }
  .sidebtn:after {
    background-image: url("../images/side_btn_ovr.gif"); }
  @media screen and (max-width: 1366px) {
    .sidebtn {
      width: 5.27086vw; } }
  @media screen and (max-width: 768px) {
    .sidebtn {
      width: 12.5vw; } }

.btnovr {
  position: relative; }
  .btnovr:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    opacity: 0; }
  .btnovr:hover img {
    opacity: 0; }
  .btnovr:hover:after {
    opacity: 1; }
  @media screen and (max-width: 768px) {
    .btnovr:hover img {
      opacity: 1; }
    .btnovr:hover:after {
      opacity: 0; } }

.canvasWrapper {
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden; }
  .canvasWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; }

.whitebox {
  -webkit-box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.2);
  background-color: #fff; }

.word {
  width: 14px;
  height: 469px;
  background-image: url("../images/word_1.png");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
  position: absolute; }
  .word.rotate {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg); }
  @media screen and (max-width: 1366px) {
    .word {
      width: 1.02489vw;
      height: 34.33382vw; } }
  @media screen and (max-width: 768px) {
    .word {
      width: 3vw;
      height: 86vw; } }

.line_b {
  background-color: #382f26;
  width: 4px;
  height: 26px;
  position: absolute; }
  @media screen and (max-width: 1366px) {
    .line_b {
      width: 0.29283vw;
      height: 1.90337vw; } }
  @media screen and (max-width: 768px) {
    .line_b {
      width: 0.6vw;
      height: 4vw; } }
  .line_b.rotate {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg); }

.line_s {
  background-color: #382f26;
  width: 1px;
  position: absolute; }
  .line_s.rotate {
    height: 1px; }

/* 動態
--------------------------------------------------------------------------------------*/
.sec {
  overflow: hidden; }
  .sec .sec .sq {
    overflow: hidden; }
  .sec.sec3 .sq img {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); }
  .sec.sec5 .sq img {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%); }
  .sec.sec5 .sq.p2 img {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); }
  .sec.sec6 .sq {
    overflow: hidden; }
    .sec.sec6 .sq img {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%); }
      @media screen and (max-width: 768px) {
        .sec.sec6 .sq img {
          -webkit-transform: translateY(100%);
          -ms-transform: translateY(100%);
          transform: translateY(100%); } }
    .sec.sec6 .sq.p2 img {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%); }
  .sec.sec7 .sq img,
  .sec.sec8 .sq img {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%); }
  .sec .line_s {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%); }
    .sec .line_s.rotate {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%); }
  .sec.sec5 .line_s.p2 {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%); }
  .sec.playani .line_s {
    -webkit-animation: lineani1 1s ease-in-out forwards;
    animation: lineani1 1s ease-in-out forwards; }
    .sec.playani .line_s.rotate {
      -webkit-animation: lineani2 1s ease-in-out forwards;
      animation: lineani2 1s ease-in-out forwards; }
  .sec.playani.sec3 .sq img {
    -webkit-animation: sqani1 1s ease-in-out forwards;
    animation: sqani1 1s ease-in-out forwards; }
  .sec.playani.sec5 .sq img {
    -webkit-animation: sqani3 1s ease-in-out forwards;
    animation: sqani3 1s ease-in-out forwards; }
  .sec.playani.sec6 .sq img {
    -webkit-animation: sqani2 1s ease-in-out forwards;
    animation: sqani2 1s ease-in-out forwards; }
    @media screen and (max-width: 768px) {
      .sec.playani.sec6 .sq img {
        -webkit-animation: sqani3 1s ease-in-out forwards;
        animation: sqani3 1s ease-in-out forwards; } }
  .sec.playani.sec6 .sq.p2 img {
    -webkit-animation: sqani1 1s ease-in-out forwards;
    animation: sqani1 1s ease-in-out forwards; }
  .sec.playani.sec7 .sq img,
  .sec.playani.sec8 .sq img {
    -webkit-animation: sqani2 1s ease-in-out forwards;
    animation: sqani2 1s ease-in-out forwards; }
  @media screen and (max-width: 768px) {
    .sec.playani.sec5 .line_s.p2 {
      -webkit-animation: lineani3 1s ease-in-out forwards;
      animation: lineani3 1s ease-in-out forwards; } }

/* header
--------------------------------------------------------------------------------------*/
.myheader, .myheader2 {
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 10;
  width: 100%;
  background: #000;
  z-index: 999;
  border-top: 1px solid #e5e5e5;
  -webkit-box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.1); }
  .myheader .container, .myheader2 .container {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    @media screen and (max-width: 768px) {
      .myheader .container, .myheader2 .container {
        width: 100%;
        margin: auto; } }
  .myheader .logo, .myheader2 .logo {
    float: left;
    width: 120px;
    padding: 18px 0; }
    @media screen and (max-width: 768px) {
      .myheader .logo, .myheader2 .logo {
        width: 31.75vw;
        float: none;
        margin: auto;
        padding: 4.5vw 0; } }
  .myheader .mainnav, .myheader2 .mainnav {
    float: right; }
    @media screen and (max-width: 768px) {
      .myheader .mainnav, .myheader2 .mainnav {
        float: none;
        background: rgba(0, 0, 0, 0.95);
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; } }
    .myheader .mainnav ul, .myheader2 .mainnav ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      @media screen and (max-width: 768px) {
        .myheader .mainnav ul, .myheader2 .mainnav ul {
          -ms-flex-wrap: wrap;
          flex-wrap: wrap; } }
    .myheader .mainnav li, .myheader2 .mainnav li {
      position: relative;
      cursor: pointer;
      padding: 20px 0; }
      .myheader .mainnav li:last-child > span, .myheader .mainnav li:last-child > a, .myheader2 .mainnav li:last-child > span, .myheader2 .mainnav li:last-child > a {
        border: none; }
      .myheader .mainnav li:hover > span, .myheader .mainnav li:hover > a, .myheader .mainnav li.select > span, .myheader .mainnav li.select > a, .myheader2 .mainnav li:hover > span, .myheader2 .mainnav li:hover > a, .myheader2 .mainnav li.select > span, .myheader2 .mainnav li.select > a {
        color: #000; }
        @media screen and (max-width: 768px) {
          .myheader .mainnav li:hover > span, .myheader .mainnav li:hover > a, .myheader .mainnav li.select > span, .myheader .mainnav li.select > a, .myheader2 .mainnav li:hover > span, .myheader2 .mainnav li:hover > a, .myheader2 .mainnav li.select > span, .myheader2 .mainnav li.select > a {
            color: #ec4b49; } }
      .myheader .mainnav li:hover:after, .myheader .mainnav li.select:after, .myheader2 .mainnav li:hover:after, .myheader2 .mainnav li.select:after {
        -webkit-animation: navbtnani .5s ease-in-out forwards;
        animation: navbtnani .5s ease-in-out forwards; }
      .myheader .mainnav li:hover:before, .myheader .mainnav li.select:before, .myheader2 .mainnav li:hover:before, .myheader2 .mainnav li.select:before {
        -webkit-animation: aniPlay 0.5s steps(6) forwards;
        animation: aniPlay 0.5s steps(6) forwards;
        z-index: 1; }
      .myheader .mainnav li:after, .myheader2 .mainnav li:after {
        content: "";
        display: block;
        width: 102%;
        height: 130%;
        background-color: #fff265;
        border-radius: 5px;
        position: absolute;
        top: -10%;
        left: -1%;
        -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.8);
        box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.8);
        top: -130%; }
        @media screen and (max-width: 768px) {
          .myheader .mainnav li:after, .myheader2 .mainnav li:after {
            display: none; } }
      .myheader .mainnav li:before, .myheader2 .mainnav li:before {
        content: "";
        width: 12px;
        height: 42px;
        position: absolute;
        top: 0;
        right: 2%;
        background-image: url("../images/nav_btn_ovr.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 0 0; }
        @media screen and (max-width: 768px) {
          .myheader .mainnav li:before, .myheader2 .mainnav li:before {
            display: none; } }
      .myheader .mainnav li > span, .myheader .mainnav li > a, .myheader2 .mainnav li > span, .myheader2 .mainnav li > a {
        font-size: 14px;
        font-weight: bold;
        position: relative;
        display: block;
        z-index: 10;
        color: #fff;
        border-right: 1px solid #e7e7e7;
        padding: 0 25px; }
        @media screen and (max-width: 768px) {
          .myheader .mainnav li > span, .myheader .mainnav li > a, .myheader2 .mainnav li > span, .myheader2 .mainnav li > a {
            font-size: 4.375vw;
            border-right: none; } }
      @media screen and (max-width: 768px) {
        .myheader .mainnav li, .myheader2 .mainnav li {
          width: 100%;
          margin-right: 0;
          text-align: center;
          padding: 4vw 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
          .myheader .mainnav li:last-child, .myheader2 .mainnav li:last-child {
            border-bottom: none; } }
  .myheader .subnav, .myheader2 .subnav {
    position: absolute;
    top: 170%;
    left: -20%;
    width: 140px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4d4d4d+0,2a2a2a+100 */
    background: #4d4d4d;
    /* Old browsers */
    background: -moz-linear-gradient(left, #4d4d4d 0%, #2a2a2a 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #4d4d4d 0%, #2a2a2a 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: -webkit-gradient(linear, left top, right top, from(#4d4d4d), to(#2a2a2a));
    background: -o-linear-gradient(left, #4d4d4d 0%, #2a2a2a 100%);
    background: linear-gradient(to right, #4d4d4d 0%, #2a2a2a 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#2a2a2a',GradientType=1 );
    /* IE6-9 */
    border-radius: 5px;
    padding: 12px;
    display: none; }
    @media screen and (max-width: 768px) {
      .myheader .subnav, .myheader2 .subnav {
        position: relative;
        left: auto;
        top: auto;
        background: none;
        width: 100%;
        padding: 5vw; } }
    .myheader .subnav dd, .myheader2 .subnav dd {
      padding-bottom: 12px; }
      @media screen and (max-width: 768px) {
        .myheader .subnav dd, .myheader2 .subnav dd {
          padding-bottom: 4vw; } }
      .myheader .subnav dd:last-child, .myheader2 .subnav dd:last-child {
        padding-bottom: 0; }
    .myheader .subnav a, .myheader2 .subnav a {
      font-size: 12px;
      color: #d6d6d6; }
      @media screen and (max-width: 768px) {
        .myheader .subnav a, .myheader2 .subnav a {
          font-size: 4.75vw; } }
      .myheader .subnav a:hover, .myheader2 .subnav a:hover {
        color: #fff; }
    .myheader .subnav font, .myheader2 .subnav font {
      padding-right: 5px; }
      @media screen and (max-width: 768px) {
        .myheader .subnav font, .myheader2 .subnav font {
          padding-right: 3vw; } }
  .myheader .burger, .myheader2 .burger {
    width: 5vw;
    position: absolute;
    top: 4.5vw;
    right: 4%;
    cursor: pointer;
    z-index: 9999; }
    @media screen and (max-width: 768px) {
      .myheader .burger._m, .myheader2 .burger._m {
        display: block !important; } }
    .myheader .burger .line, .myheader2 .burger .line {
      width: 100%;
      height: 0.8vw;
      background-color: #fff;
      position: absolute; }
      .myheader .burger .line:nth-child(2), .myheader2 .burger .line:nth-child(2) {
        top: 0;
        left: 0;
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        -webkit-transition: top 0.35s, left 0.35s, width 0.35s, opacity 0.35s;
        -o-transition: top 0.35s, left 0.35s, width 0.35s, opacity 0.35s;
        transition: top 0.35s, left 0.35s, width 0.35s, opacity 0.35s; }
      .myheader .burger .line:nth-child(3), .myheader .burger .line:nth-child(4), .myheader2 .burger .line:nth-child(3), .myheader2 .burger .line:nth-child(4) {
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        -webkit-transition: -webkit-transform 0.35s;
        transition: -webkit-transform 0.35s;
        -o-transition: transform 0.35s;
        transition: transform 0.35s;
        transition: transform 0.35s, -webkit-transform 0.35s; }
      .myheader .burger .line:nth-child(5), .myheader2 .burger .line:nth-child(5) {
        bottom: 0;
        left: 0;
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        -webkit-transition: bottom 0.35s, left 0.35s, width 0.35s, opacity 0.35s;
        -o-transition: bottom 0.35s, left 0.35s, width 0.35s, opacity 0.35s;
        transition: bottom 0.35s, left 0.35s, width 0.35s, opacity 0.35s;
        opacity: 1; }
    .myheader .burger.isclick .line:nth-child(2), .myheader .burger.isclick .line:nth-child(5), .myheader2 .burger.isclick .line:nth-child(2), .myheader2 .burger.isclick .line:nth-child(5) {
      width: 0;
      opacity: 0;
      left: 50%; }
    .myheader .burger.isclick .line:nth-child(2), .myheader2 .burger.isclick .line:nth-child(2) {
      top: 50%; }
    .myheader .burger.isclick .line:nth-child(5), .myheader2 .burger.isclick .line:nth-child(5) {
      bottom: 50%; }
    .myheader .burger.isclick .line:nth-child(3), .myheader2 .burger.isclick .line:nth-child(3) {
      opacity: 1;
      -webkit-transform: rotateZ(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotateZ(-45deg); }
    .myheader .burger.isclick .line:nth-child(4), .myheader2 .burger.isclick .line:nth-child(4) {
      opacity: 1;
      -webkit-transform: rotateZ(45deg);
      -ms-transform: rotate(45deg);
      transform: rotateZ(45deg); }

.myheader2 {
  position: fixed;
  top: 0;
  left: 0;
  border-top: none;
  z-index: 100;
  display: none; }
  .myheader2 .burger .line {
    background-color: #fff; }
  .myheader2 .mainnav li.select:after {
    -webkit-animation: none;
    animation: none;
    top: -25%; }
  .myheader2 .mainnav li.select:before {
    -webkit-animation: none;
    animation: none;
    background-position: 0 100%; }

.canvasWrapper {
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden; }

.canvasWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.cloud {
  position: absolute;
  -webkit-transform: scale3d(0, 0, 0);
  transform: scale3d(0, 0, 0); }
  .cloud.playitem {
    -webkit-animation-name: cloudani;
    animation-name: cloudani;
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  .cloud.c1 {
    width: 20.8%;
    position: absolute;
    top: 30px;
    left: -30px; }
    @media screen and (max-width: 1366px) {
      .cloud.c1 {
        top: 2.19619vw;
        left: -2.19619vw; } }
    @media screen and (max-width: 768px) {
      .cloud.c1 {
        width: 26vw;
        top: -3vw;
        left: -10vw; } }
  .cloud.c2 {
    width: 15.94%;
    position: absolute;
    top: 150px;
    left: -100px; }
    @media screen and (max-width: 1366px) {
      .cloud.c2 {
        top: 10.98097vw;
        left: -7.32064vw; } }
    @media screen and (max-width: 768px) {
      .cloud.c2 {
        width: 20vw;
        top: -11vw;
        left: -7vw; } }
  .cloud.c3 {
    width: 10.1%;
    position: absolute;
    top: 100px;
    right: -40px; }
    @media screen and (max-width: 1366px) {
      .cloud.c3 {
        top: 7.32064vw;
        right: -2.92826vw; } }
    @media screen and (max-width: 768px) {
      .cloud.c3 {
        width: 15vw;
        top: 150vw;
        right: -12vw; } }
  .cloud.c4 {
    width: 6.36%;
    position: absolute;
    top: 200px;
    right: -115px; }
    .cloud.c4.playitem {
      -webkit-animation-duration: 1.5s;
      animation-duration: 1.5s; }
    @media screen and (max-width: 1366px) {
      .cloud.c4 {
        top: 14.64129vw;
        right: -8.41874vw; } }
  .cloud.c5 {
    width: 14.6%;
    position: absolute;
    bottom: -30px;
    right: -60px; }
    @media screen and (max-width: 1366px) {
      .cloud.c5 {
        bottom: -2.19619vw;
        right: -4.39239vw; } }
    @media screen and (max-width: 768px) {
      .cloud.c5 {
        width: 22vw;
        bottom: -23vw;
        left: 6vw; } }
  .cloud.c6 {
    width: 20.96%;
    position: absolute;
    bottom: -150px;
    left: -60px; }
    @media screen and (max-width: 1366px) {
      .cloud.c6 {
        bottom: -10.98097vw;
        left: -4.39239vw; } }
    @media screen and (max-width: 768px) {
      .cloud.c6 {
        width: 26vw;
        bottom: -15vw;
        left: auto;
        right: 19vw; } }
  .cloud.c7 {
    width: 18%;
    position: absolute;
    bottom: -50px;
    left: -100px; }
    .cloud.c7.playitem {
      -webkit-animation-duration: 1.5s;
      animation-duration: 1.5s; }
    @media screen and (max-width: 1366px) {
      .cloud.c7 {
        bottom: -3.66032vw;
        left: -7.32064vw; } }
  .cloud.c8 {
    width: 16%;
    position: absolute;
    bottom: 15%;
    right: -10%;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }

/* sec1
--------------------------------------------------------------------------------------*/
.sec1 {
  max-width: 999999px;
  margin-bottom: 0;
  position: relative;
  z-index: 10;
  background-color: #f7f7f7;
  overflow: visible; }
  .sec1 .kv-slider {
    font-size: 0; }
    .sec1 .kv-slider .kv {
      position: relative; }
      .sec1 .kv-slider .kv .container {
        padding: 0;
        position: relative;
        height: 100%;
        max-width: 1400px; }
      .sec1 .kv-slider .kv .btnbox {
        position: absolute;
        top: 42%;
        left: 13%;
        text-align: center; }
        @media screen and (max-width: 768px) {
          .sec1 .kv-slider .kv .btnbox {
            top: 40.5%;
            left: 20%; } }
        .sec1 .kv-slider .kv .btnbox .mybtn {
          width: 150px;
          margin: auto;
          background-color: #000000;
          border: none;
          color: #fff;
          font-size: 18px;
          margin-left: 23%;
          position: relative; }
          .sec1 .kv-slider .kv .btnbox .mybtn:after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background-color: #ec4b49;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50px;
            -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
            box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
            -webkit-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0); }
          .sec1 .kv-slider .kv .btnbox .mybtn span {
            position: relative;
            z-index: 1; }
          @media screen and (max-width: 1366px) {
            .sec1 .kv-slider .kv .btnbox .mybtn {
              width: 10.98097vw;
              font-size: 1.31772vw; } }
          @media screen and (max-width: 768px) {
            .sec1 .kv-slider .kv .btnbox .mybtn {
              width: 37vw;
              font-size: 4vw;
              margin-left: 0;
              margin: auto;
              padding: 2.8vw 0; } }
          .sec1 .kv-slider .kv .btnbox .mybtn:hover:after {
            -webkit-animation: btnovrani .5s ease forwards;
            animation: btnovrani .5s ease forwards; }
    .sec1 .kv-slider li {
      font-size: 0;
      background-position: top center;
      background-size: auto 100%; }
  .sec1 .prod {
    width: 38.769%;
    position: absolute;
    bottom: 0;
    right: 6%; }
    .sec1 .prod .canvasWrapper {
      padding-bottom: 65%; }
    @media screen and (max-width: 768px) {
      .sec1 .prod {
        width: 69%;
        right: 11%; } }
  .sec1 .maintitle {
    width: 32.857%;
    position: absolute;
    top: 14%;
    left: 4.5%; }
    @media screen and (max-width: 768px) {
      .sec1 .maintitle {
        width: 66%;
        top: 21.4%;
        left: 6%; } }

/* sec2
--------------------------------------------------------------------------------------*/
.sec2 .inner, .sec3 .inner {
  position: relative;
  z-index: 10; }

.sec2 font.highlight, .sec3 font.highlight {
  color: #c90000; }

.sec2 font.highlight2, .sec3 font.highlight2 {
  color: #c90000; }

.sec2 .sub, .sec3 .sub {
  font-size: 20px;
  color: #000;
  font-weight: bold;
  margin-bottom: 10px;
  position: relative; }
  @media screen and (max-width: 1366px) {
    .sec2 .sub, .sec3 .sub {
      font-size: 1.46413vw;
      margin-bottom: 0.73206vw; } }
  @media screen and (max-width: 768px) {
    .sec2 .sub, .sec3 .sub {
      font-size: 3.75vw;
      margin-bottom: 2vw;
      line-height: 1.5; } }
  .sec2 .sub:after, .sec3 .sub:after {
    content: "";
    display: block;
    width: 6px;
    height: 30px;
    background-color: #4187f9;
    position: absolute;
    top: -22%;
    left: -2%; }
    @media screen and (max-width: 768px) {
      .sec2 .sub:after, .sec3 .sub:after {
        width: 1.2vw;
        height: 6vw;
        top: -8%;
        left: -5%; } }
  .sec2 .sub._txtonly, .sec3 .sub._txtonly {
    background: none;
    padding-left: 20px; }
    @media screen and (max-width: 1366px) {
      .sec2 .sub._txtonly, .sec3 .sub._txtonly {
        padding-left: 1.46413vw; } }
    @media screen and (max-width: 768px) {
      .sec2 .sub._txtonly, .sec3 .sub._txtonly {
        padding-left: 4vw; } }
  .sec2 .sub font, .sec3 .sub font {
    color: #ff574b;
    font-size: 14px;
    padding-left: 5px; }
    @media screen and (max-width: 1366px) {
      .sec2 .sub font, .sec3 .sub font {
        font-size: 0.87848vw;
        padding-left: 0.36603vw; } }
    @media screen and (max-width: 768px) {
      .sec2 .sub font, .sec3 .sub font {
        font-size: 2.625vw; } }

.sec2 .rulebox, .sec3 .rulebox {
  position: relative; }
  .sec2 .rulebox .inner, .sec3 .rulebox .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .sec2 .rulebox .con1, .sec3 .rulebox .con1 {
    width: 48%;
    margin-right: 2%; }
    @media screen and (max-width: 768px) {
      .sec2 .rulebox .con1, .sec3 .rulebox .con1 {
        width: 100%;
        margin-right: 0;
        margin-bottom: 5vw; } }
    @media screen and (max-width: 768px) {
      .sec2 .rulebox .con1 .box:last-child, .sec3 .rulebox .con1 .box:last-child {
        margin-bottom: 0vw; } }
  .sec2 .rulebox .con2, .sec3 .rulebox .con2 {
    width: 50%;
    padding-left: 15px; }
    @media screen and (max-width: 1366px) {
      .sec2 .rulebox .con2, .sec3 .rulebox .con2 {
        padding-left: 1.0981vw; } }
    @media screen and (max-width: 768px) {
      .sec2 .rulebox .con2, .sec3 .rulebox .con2 {
        width: 100%;
        padding-top: 0;
        padding-left: 0; } }
    @media screen and (max-width: 768px) {
      .sec2 .rulebox .con2 .box, .sec3 .rulebox .con2 .box {
        margin-bottom: 0; } }
    .sec2 .rulebox .con2 .txt .ps, .sec3 .rulebox .con2 .txt .ps {
      line-height: 1.5; }
  .sec2 .rulebox .con3, .sec3 .rulebox .con3 {
    width: 100%; }
  .sec2 .rulebox .box, .sec3 .rulebox .box {
    margin-bottom: 35px; }
    @media screen and (max-width: 1366px) {
      .sec2 .rulebox .box, .sec3 .rulebox .box {
        margin-bottom: 2.56223vw; } }
    @media screen and (max-width: 768px) {
      .sec2 .rulebox .box, .sec3 .rulebox .box {
        margin-bottom: 8vw; } }
  .sec2 .rulebox .ps, .sec3 .rulebox .ps {
    display: inline-block;
    font-size: 14px;
    line-height: 1.3;
    color: #989898;
    vertical-align: baseline;
    padding-left: 15px; }
    .sec2 .rulebox .ps._m, .sec3 .rulebox .ps._m {
      display: none; }
    @media screen and (max-width: 1366px) {
      .sec2 .rulebox .ps, .sec3 .rulebox .ps {
        font-size: 1.02489vw;
        padding-left: 1.0981vw; } }
    @media screen and (max-width: 768px) {
      .sec2 .rulebox .ps, .sec3 .rulebox .ps {
        font-size: 2.625vw;
        padding-left: 0; }
        .sec2 .rulebox .ps._pc, .sec3 .rulebox .ps._pc {
          display: none; }
        .sec2 .rulebox .ps._m, .sec3 .rulebox .ps._m {
          display: block; } }
  .sec2 .rulebox .txt, .sec3 .rulebox .txt {
    font-size: 16px;
    color: #000;
    font-weight: bold;
    line-height: 1.7;
    text-align: justify; }
    @media screen and (max-width: 1366px) {
      .sec2 .rulebox .txt, .sec3 .rulebox .txt {
        font-size: 1.1713vw; } }
    @media screen and (max-width: 768px) {
      .sec2 .rulebox .txt, .sec3 .rulebox .txt {
        font-size: 3.5vw; } }
    .sec2 .rulebox .txt.top, .sec3 .rulebox .txt.top {
      padding-left: 0;
      padding-bottom: 20px; }
    .sec2 .rulebox .txt._txtonly, .sec3 .rulebox .txt._txtonly {
      padding-left: 20px; }
      @media screen and (max-width: 1366px) {
        .sec2 .rulebox .txt._txtonly, .sec3 .rulebox .txt._txtonly {
          padding-left: 1.46413vw; } }
      @media screen and (max-width: 768px) {
        .sec2 .rulebox .txt._txtonly, .sec3 .rulebox .txt._txtonly {
          padding-left: 4vw; } }
    .sec2 .rulebox .txt table, .sec3 .rulebox .txt table {
      width: 48%;
      text-align: left; }
      .sec2 .rulebox .txt table._pc, .sec3 .rulebox .txt table._pc {
        display: table; }
      .sec2 .rulebox .txt table._m, .sec3 .rulebox .txt table._m {
        display: none; }
      @media screen and (max-width: 768px) {
        .sec2 .rulebox .txt table, .sec3 .rulebox .txt table {
          width: 100%; }
          .sec2 .rulebox .txt table._pc, .sec3 .rulebox .txt table._pc {
            display: none; }
          .sec2 .rulebox .txt table._m, .sec3 .rulebox .txt table._m {
            display: table; } }
      @media screen and (max-width: 768px) {
        .sec2 .rulebox .txt table tbody, .sec2 .rulebox .txt table tr, .sec3 .rulebox .txt table tbody, .sec3 .rulebox .txt table tr {
          width: 100%; } }
      .sec2 .rulebox .txt table.full, .sec3 .rulebox .txt table.full {
        width: 100%;
        margin-top: 30px;
        position: relative; }
        @media screen and (max-width: 1366px) {
          .sec2 .rulebox .txt table.full, .sec3 .rulebox .txt table.full {
            margin-top: 2.19619vw; } }
        @media screen and (max-width: 768px) {
          .sec2 .rulebox .txt table.full, .sec3 .rulebox .txt table.full {
            margin-top: 4vw; } }
        .sec2 .rulebox .txt table.full:after, .sec3 .rulebox .txt table.full:after {
          content: "";
          display: block;
          width: 100%;
          height: 1px;
          background-color: #939393;
          position: absolute;
          left: 0;
          bottom: 0; }
        .sec2 .rulebox .txt table.full tr:nth-child(2) td, .sec3 .rulebox .txt table.full tr:nth-child(2) td {
          padding-bottom: 25px; }
          @media screen and (max-width: 1366px) {
            .sec2 .rulebox .txt table.full tr:nth-child(2) td, .sec3 .rulebox .txt table.full tr:nth-child(2) td {
              padding-bottom: 1.83016vw; } }
        .sec2 .rulebox .txt table.full td, .sec3 .rulebox .txt table.full td {
          padding: 5px 0; }
          @media screen and (max-width: 1366px) {
            .sec2 .rulebox .txt table.full td, .sec3 .rulebox .txt table.full td {
              padding: 0.36603vw 0; } }
          @media screen and (max-width: 768px) {
            .sec2 .rulebox .txt table.full td, .sec3 .rulebox .txt table.full td {
              padding: 3vw 0; } }
          .sec2 .rulebox .txt table.full td:after, .sec3 .rulebox .txt table.full td:after {
            display: none; }
      .sec2 .rulebox .txt table._left, .sec3 .rulebox .txt table._left {
        float: left; }
        @media screen and (max-width: 768px) {
          .sec2 .rulebox .txt table._left, .sec3 .rulebox .txt table._left {
            float: none; } }
      .sec2 .rulebox .txt table._right, .sec3 .rulebox .txt table._right {
        float: right; }
        @media screen and (max-width: 768px) {
          .sec2 .rulebox .txt table._right, .sec3 .rulebox .txt table._right {
            float: none; } }
      .sec2 .rulebox .txt table .space1 td, .sec3 .rulebox .txt table .space1 td {
        padding: 43px 0; }
        @media screen and (max-width: 1366px) {
          .sec2 .rulebox .txt table .space1 td, .sec3 .rulebox .txt table .space1 td {
            padding: 3.14788vw 0; } }
      .sec2 .rulebox .txt table .space2 td, .sec3 .rulebox .txt table .space2 td {
        padding: 44px 0; }
        @media screen and (max-width: 1366px) {
          .sec2 .rulebox .txt table .space2 td, .sec3 .rulebox .txt table .space2 td {
            padding: 3.22108vw 0; } }
        @media screen and (max-width: 768px) {
          .sec2 .rulebox .txt table .space2 td, .sec3 .rulebox .txt table .space2 td {
            padding: 4vw 0; } }
      .sec2 .rulebox .txt table .space3 td, .sec3 .rulebox .txt table .space3 td {
        padding: 47px 0 48px; }
        @media screen and (max-width: 1366px) {
          .sec2 .rulebox .txt table .space3 td, .sec3 .rulebox .txt table .space3 td {
            padding: 3.4407vw 0 3.51391vw; } }
        @media screen and (max-width: 768px) {
          .sec2 .rulebox .txt table .space3 td, .sec3 .rulebox .txt table .space3 td {
            padding: 4vw 0; } }
      .sec2 .rulebox .txt table td, .sec3 .rulebox .txt table td {
        vertical-align: middle;
        padding: 25px 0;
        position: relative; }
        @media screen and (max-width: 1366px) {
          .sec2 .rulebox .txt table td, .sec3 .rulebox .txt table td {
            padding: 1.83016vw 0; } }
        @media screen and (max-width: 768px) {
          .sec2 .rulebox .txt table td, .sec3 .rulebox .txt table td {
            padding: 6vw 0; } }
        .sec2 .rulebox .txt table td:after, .sec3 .rulebox .txt table td:after {
          content: "";
          display: block;
          width: 100%;
          height: 1px;
          background-color: #939393;
          position: absolute;
          left: 0;
          bottom: 0; }
      .sec2 .rulebox .txt table .sqtxt, .sec3 .rulebox .txt table .sqtxt {
        display: inline-block;
        font-size: 14px;
        letter-spacing: 2px;
        text-align: center;
        background-color: #ff4337;
        color: #fff;
        line-height: 1.5;
        padding: 0px 5px; }
        @media screen and (max-width: 1366px) {
          .sec2 .rulebox .txt table .sqtxt, .sec3 .rulebox .txt table .sqtxt {
            font-size: 1.02489vw;
            padding: 0px 0.36603vw; } }
        @media screen and (max-width: 768px) {
          .sec2 .rulebox .txt table .sqtxt, .sec3 .rulebox .txt table .sqtxt {
            font-size: 2.875vw;
            padding: 0 1vw; } }
      .sec2 .rulebox .txt table .discount, .sec3 .rulebox .txt table .discount {
        color: #ff4337;
        font-size: 19px; }
        @media screen and (max-width: 1366px) {
          .sec2 .rulebox .txt table .discount, .sec3 .rulebox .txt table .discount {
            font-size: 1.39092vw; } }
        @media screen and (max-width: 768px) {
          .sec2 .rulebox .txt table .discount, .sec3 .rulebox .txt table .discount {
            font-size: 3.5vw; } }
      .sec2 .rulebox .txt table a, .sec3 .rulebox .txt table a {
        display: inline;
        color: #000; }
        .sec2 .rulebox .txt table a:hover, .sec3 .rulebox .txt table a:hover {
          color: #ff6000; }
      .sec2 .rulebox .txt table p, .sec3 .rulebox .txt table p {
        color: #989898;
        font-size: 14px;
        line-height: 1.2; }
        @media screen and (max-width: 1366px) {
          .sec2 .rulebox .txt table p, .sec3 .rulebox .txt table p {
            font-size: 1.02489vw; } }
        @media screen and (max-width: 768px) {
          .sec2 .rulebox .txt table p, .sec3 .rulebox .txt table p {
            font-size: 3vw; }
            .sec2 .rulebox .txt table p._hide, .sec3 .rulebox .txt table p._hide {
              display: none; } }
    .sec2 .rulebox .txt .list, .sec3 .rulebox .txt .list {
      list-style: decimal;
      padding-left: 20px; }
      @media screen and (max-width: 1366px) {
        .sec2 .rulebox .txt .list, .sec3 .rulebox .txt .list {
          padding-left: 1.46413vw; } }
      @media screen and (max-width: 768px) {
        .sec2 .rulebox .txt .list, .sec3 .rulebox .txt .list {
          padding-left: 3vw; } }
    .sec2 .rulebox .txt .link, .sec3 .rulebox .txt .link {
      display: inline;
      color: #c90000; }
      .sec2 .rulebox .txt .link:hover, .sec3 .rulebox .txt .link:hover {
        text-decoration: underline; }
    .sec2 .rulebox .txt .red, .sec3 .rulebox .txt .red {
      color: #e70000; }
  .sec2 .rulebox .btnbox, .sec3 .rulebox .btnbox {
    max-width: 450px;
    width: 78%;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    @media screen and (max-width: 768px) {
      .sec2 .rulebox .btnbox, .sec3 .rulebox .btnbox {
        width: 80%;
        margin: 4vw auto 0;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; } }
    .sec2 .rulebox .btnbox a, .sec3 .rulebox .btnbox a {
      text-align: center;
      position: relative;
      width: 42%; }
      .sec2 .rulebox .btnbox a:nth-child(1), .sec3 .rulebox .btnbox a:nth-child(1) {
        float: left; }
        .sec2 .rulebox .btnbox a:nth-child(1):after, .sec3 .rulebox .btnbox a:nth-child(1):after {
          background-image: url("../images/sec2_btn1_ovr.png"); }
      .sec2 .rulebox .btnbox a:nth-child(2), .sec3 .rulebox .btnbox a:nth-child(2) {
        float: right; }
        .sec2 .rulebox .btnbox a:nth-child(2):after, .sec3 .rulebox .btnbox a:nth-child(2):after {
          background-image: url("../images/sec2_btn2_ovr.png"); }
      @media screen and (max-width: 768px) {
        .sec2 .rulebox .btnbox a, .sec3 .rulebox .btnbox a {
          width: 47%; } }

.sec2 .container {
  background-color: #f9f9f9; }

.sec2 .outer .title {
  width: 380px;
  position: absolute;
  top: -9%;
  left: 29%; }
  .sec2 .outer .title .canvasWrapper {
    padding-bottom: 41%; }
  @media screen and (max-width: 1366px) {
    .sec2 .outer .title {
      width: 27.81845vw; } }
  @media screen and (max-width: 768px) {
    .sec2 .outer .title {
      width: 68vw;
      top: -8%;
      left: 11%; } }

.sec2 .outer .bottom {
  position: absolute;
  width: 100%;
  bottom: -100px;
  left: 0;
  z-index: 2; }
  @media screen and (max-width: 1366px) {
    .sec2 .outer .bottom {
      bottom: -7.32064vw; } }
  @media screen and (max-width: 768px) {
    .sec2 .outer .bottom {
      bottom: -5.7vw; } }

.sec2 .outer .peo1 {
  width: 70px;
  position: absolute;
  bottom: -10%;
  left: 3%;
  cursor: pointer;
  z-index: 5; }
  .sec2 .outer .peo1 .canvasWrapper {
    padding-bottom: 145%; }
  @media screen and (max-width: 1366px) {
    .sec2 .outer .peo1 {
      width: 5.12445vw; } }
  @media screen and (max-width: 768px) {
    .sec2 .outer .peo1 {
      width: 9vw;
      bottom: -5vw; } }

.sec2 .outer .peo2 {
  width: 80px;
  position: absolute;
  bottom: -8%;
  left: 20%;
  cursor: pointer;
  z-index: 5; }
  .sec2 .outer .peo2 .canvasWrapper {
    padding-bottom: 145%; }
  @media screen and (max-width: 1366px) {
    .sec2 .outer .peo2 {
      width: 5.85652vw; } }
  @media screen and (max-width: 768px) {
    .sec2 .outer .peo2 {
      width: 11vw;
      bottom: -3vw; } }

.sec2 .outer .peo3 {
  width: 110px;
  position: absolute;
  bottom: -8%;
  left: 67%;
  cursor: pointer;
  z-index: 5; }
  .sec2 .outer .peo3 .canvasWrapper {
    padding-bottom: 110%; }
  @media screen and (max-width: 1366px) {
    .sec2 .outer .peo3 {
      width: 8.05271vw; } }
  @media screen and (max-width: 768px) {
    .sec2 .outer .peo3 {
      width: 15vw;
      bottom: -3vw;
      left: 63%; } }

.sec2 .title {
  width: 247px; }
  .sec2 .title .canvasWrapper {
    padding-bottom: 27%; }
  @media screen and (max-width: 1366px) {
    .sec2 .title {
      width: 18.08199vw; } }
  @media screen and (max-width: 768px) {
    .sec2 .title {
      width: 30.375vw; } }

.sec2 .paper {
  width: 357px;
  position: absolute;
  top: -65px;
  left: 0; }
  @media screen and (max-width: 1366px) {
    .sec2 .paper {
      width: 27.45242vw;
      top: -4.75842vw; } }
  @media screen and (max-width: 768px) {
    .sec2 .paper {
      width: 26%;
      top: -9vw;
      left: 11vw; } }

.sec2 .smile {
  width: 17.3985%;
  max-width: 210px;
  position: absolute;
  bottom: -0.3%;
  right: 1.5%;
  -webkit-transform: scale3d(0, 0, 0);
  transform: scale3d(0, 0, 0); }
  @media screen and (max-width: 768px) {
    .sec2 .smile {
      width: 26.25vw;
      bottom: auto;
      top: 269.8vw; } }
  .sec2 .smile .canvasWrapper {
    padding-bottom: 85%; }
  .sec2 .smile.playitem {
    -webkit-animation: smileani .3s ease-in-out forwards;
    animation: smileani .3s ease-in-out forwards; }

.sec2 .smile2 {
  width: 16%;
  height: 250px;
  position: absolute;
  bottom: -33px;
  right: 1.5%;
  -webkit-mask: -webkit-linear-gradient(87deg, transparent 50px, #fff 0) bottom left;
  mask: linear-gradient(3deg, transparent 50px, #fff 0) bottom left;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-transform: scale3d(0, 0, 0);
  transform: scale3d(0, 0, 0); }
  @media screen and (max-width: 1024px) {
    .sec2 .smile2 {
      bottom: -38px; } }
  @media screen and (max-width: 768px) {
    .sec2 .smile2 {
      width: 26.25vw;
      bottom: auto;
      top: 264.4vw;
      right: 4%;
      height: 31.25vw;
      -webkit-mask: -webkit-linear-gradient(85deg, transparent 8vw, #fff 0) bottom left;
      mask: linear-gradient(5deg, transparent 8vw, #fff 0) bottom left; } }
  .sec2 .smile2 .in {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../images/smile.png") no-repeat center bottom;
    background-size: 100% auto;
    -webkit-animation: jump .5s ease infinite;
    animation: jump .5s ease infinite; }
  .sec2 .smile2.playitem {
    -webkit-animation: smileani .3s ease-in-out forwards;
    animation: smileani .3s ease-in-out forwards; }

/* sec3
--------------------------------------------------------------------------------------*/
.sec3 {
  margin-bottom: 0;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6; }
  @media screen and (max-width: 768px) {
    .sec3 {
      overflow: visible; } }
  .sec3 .container {
    padding: 70px 0 100px; }
    @media screen and (max-width: 1366px) {
      .sec3 .container {
        padding: 5.12445vw 0 7.32064vw; } }
    @media screen and (max-width: 768px) {
      .sec3 .container {
        padding: 15vw 0; } }
  .sec3 .sectitle {
    color: #000; }
    .sec3 .sectitle font {
      color: #964f4f; }
  .sec3 .inner {
    background-color: #f3f3f3;
    width: 95%;
    max-width: 1100px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 20px; }
    @media screen and (max-width: 768px) {
      .sec3 .inner {
        width: 92.5%;
        border-radius: 3vw;
        position: relative;
        z-index: 2;
        padding: 8vw 5vw 10vw 10vw; } }
  @media screen and (max-width: 768px) {
    .sec3 .box {
      margin-bottom: 3vw; }
      .sec3 .box:last-child {
        margin-bottom: 0; } }
  .sec3 .title {
    width: 396px;
    position: absolute;
    top: -7%;
    left: 37%; }
    @media screen and (max-width: 1366px) {
      .sec3 .title {
        width: 28.98975vw; } }
    @media screen and (max-width: 768px) {
      .sec3 .title {
        width: 75vw;
        top: -6.5%;
        left: 22%; } }
  .sec3 .formbox .txt {
    font-size: 25px;
    color: #000;
    font-weight: bold;
    margin-bottom: 40px; }
    @media screen and (max-width: 1366px) {
      .sec3 .formbox .txt {
        font-size: 1.83016vw;
        margin-bottom: 2.92826vw; } }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .txt {
        font-size: 3.75vw;
        line-height: 1.5;
        text-align: left; } }
  .sec3 .formbox .sub {
    margin-bottom: 20px; }
    @media screen and (max-width: 1366px) {
      .sec3 .formbox .sub {
        margin-bottom: 1.46413vw; } }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .sub {
        margin-bottom: 3vw; } }
    .sec3 .formbox .sub .step {
      background-color: #1428a0;
      color: #fff;
      border-radius: 5px;
      font-size: 22px;
      display: inline-block;
      padding: 5px 20px;
      line-height: 1;
      font-family: 'Samsung Sharp Sans';
      font-weight: 500;
      font-style: normal;
      font-display: swap;
      vertical-align: baseline;
      margin-right: 5px; }
      @media screen and (max-width: 1366px) {
        .sec3 .formbox .sub .step {
          border-radius: 0.36603vw;
          font-size: 1.61054vw;
          display: inline-block;
          padding: 0.36603vw 1.46413vw;
          margin-right: 0.36603vw; } }
      @media screen and (max-width: 768px) {
        .sec3 .formbox .sub .step {
          border-radius: 1vw;
          font-size: 4.125vw;
          display: inline-block;
          padding: 1vw 2vw;
          margin-right: 0.625vw; } }
  .sec3 .formbox .typeform {
    padding-bottom: 50px;
    padding-left: 37px; }
    @media screen and (max-width: 1366px) {
      .sec3 .formbox .typeform {
        padding-bottom: 3.66032vw; } }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .typeform {
        padding-left: 7.5vw;
        padding-bottom: 4vw; } }
    .sec3 .formbox .typeform a {
      display: inline;
      color: inherit;
      text-decoration: underline; }
      .sec3 .formbox .typeform a:hover {
        text-decoration: unset; }
    .sec3 .formbox .typeform p {
      font-size: 14px;
      color: #ff574b;
      font-weight: bold;
      padding-top: 10px; }
    .sec3 .formbox .typeform .item {
      display: inline-block;
      position: relative; }
      @media screen and (max-width: 768px) {
        .sec3 .formbox .typeform .item {
          margin-bottom: 5vw;
          display: block; } }
      .sec3 .formbox .typeform .item span {
        display: inline-block;
        font-size: 20px;
        color: #000;
        font-weight: bold; }
        @media screen and (max-width: 1366px) {
          .sec3 .formbox .typeform .item span {
            font-size: 1.46413vw; } }
        @media screen and (max-width: 768px) {
          .sec3 .formbox .typeform .item span {
            font-size: 3.75vw; } }
      .sec3 .formbox .typeform .item.space1 {
        margin-right: 100px; }
        @media screen and (max-width: 768px) {
          .sec3 .formbox .typeform .item.space1 {
            margin-right: 0; } }
      .sec3 .formbox .typeform .item.space2 {
        margin-right: 40px; }
        @media screen and (max-width: 768px) {
          .sec3 .formbox .typeform .item.space2 {
            margin-right: 0;
            width: 100%; } }
        .sec3 .formbox .typeform .item.space2.storage {
          margin-bottom: 0; }
      .sec3 .formbox .typeform .item:last-child {
        margin-right: 0; }
      .sec3 .formbox .typeform .item font {
        color: #ff4337;
        font-size: 14px;
        display: inline-block;
        line-height: 1.2;
        padding-top: 10px; }
        .sec3 .formbox .typeform .item font b {
          margin-left: -7px; }
          @media screen and (max-width: 1366px) {
            .sec3 .formbox .typeform .item font b {
              margin-left: -0.51245vw; } }
          @media screen and (max-width: 768px) {
            .sec3 .formbox .typeform .item font b {
              margin-left: -1.2vw; } }
        @media screen and (max-width: 768px) {
          .sec3 .formbox .typeform .item font {
            font-size: 2.5vw;
            padding-top: 0;
            padding-left: 6vw; } }
        .sec3 .formbox .typeform .item font.monitorPs {
          opacity: 0;
          position: absolute;
          top: 80%;
          left: 7px;
          width: 408%; }
          @media screen and (max-width: 1366px) {
            .sec3 .formbox .typeform .item font.monitorPs {
              left: 0.51245vw; } }
          @media screen and (max-width: 768px) {
            .sec3 .formbox .typeform .item font.monitorPs {
              width: 80%;
              top: 0;
              left: 10vw; } }
          @media screen and (max-width: 768px) {
            .sec3 .formbox .typeform .item font.monitorPs.p2 {
              left: 18vw;
              width: 75%; } }
    .sec3 .formbox .typeform .radiobox {
      position: relative;
      display: inline-block;
      font-size: 0; }
      .sec3 .formbox .typeform .radiobox input[type=radio] {
        display: none; }
        .sec3 .formbox .typeform .radiobox input[type=radio] + label.radiostyle {
          display: inline-block;
          width: 22px;
          height: 22px;
          background: url("../images/checkbox_bg.svg") no-repeat center center;
          background-size: 100% auto;
          position: relative;
          vertical-align: middle; }
          @media screen and (max-width: 1366px) {
            .sec3 .formbox .typeform .radiobox input[type=radio] + label.radiostyle {
              width: 1.61054vw;
              height: 1.61054vw; } }
          @media screen and (max-width: 768px) {
            .sec3 .formbox .typeform .radiobox input[type=radio] + label.radiostyle {
              width: 4.5vw;
              height: 4.5vw;
              margin-right: 1vw; } }
        .sec3 .formbox .typeform .radiobox input[type=radio]:checked + label.radiostyle:before {
          background: url("../images/checkbox_check.svg") no-repeat center center;
          background-size: 100% auto; }
      .sec3 .formbox .typeform .radiobox label {
        vertical-align: middle;
        display: inline-block;
        font-weight: bold; }
        .sec3 .formbox .typeform .radiobox label.radiostyle {
          display: inline-block;
          position: relative; }
          .sec3 .formbox .typeform .radiobox label.radiostyle:before {
            content: '';
            display: inline-block;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0; }
    .sec3 .formbox .typeform .mycheckbox {
      display: inline-block; }
      .sec3 .formbox .typeform .mycheckbox input[type=checkbox] {
        display: none; }
        .sec3 .formbox .typeform .mycheckbox input[type=checkbox] + label.checkstyle {
          display: inline-block;
          width: 22px;
          height: 22px;
          background: url("../images/checkbox_bg.svg") no-repeat center center;
          background-size: 100% auto;
          position: relative; }
          @media screen and (max-width: 1366px) {
            .sec3 .formbox .typeform .mycheckbox input[type=checkbox] + label.checkstyle {
              width: 1.61054vw;
              height: 1.61054vw; } }
          @media screen and (max-width: 768px) {
            .sec3 .formbox .typeform .mycheckbox input[type=checkbox] + label.checkstyle {
              width: 4.5vw;
              height: 4.5vw;
              margin-right: 1vw; } }
        .sec3 .formbox .typeform .mycheckbox input[type=checkbox]:checked + label.checkstyle:before {
          background: url("../images/checkbox_check.svg") no-repeat center center;
          background-size: 100% auto; }
      .sec3 .formbox .typeform .mycheckbox label {
        vertical-align: middle;
        display: inline-block; }
        .sec3 .formbox .typeform .mycheckbox label.checkstyle {
          display: inline-block;
          position: relative; }
          .sec3 .formbox .typeform .mycheckbox label.checkstyle:before {
            content: '';
            display: inline-block;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0; }
        .sec3 .formbox .typeform .mycheckbox label.labeltxt {
          width: 700px;
          vertical-align: top; }
          @media screen and (max-width: 1366px) {
            .sec3 .formbox .typeform .mycheckbox label.labeltxt {
              width: 51.24451vw; } }
          @media screen and (max-width: 768px) {
            .sec3 .formbox .typeform .mycheckbox label.labeltxt {
              width: 61vw; } }
    .sec3 .formbox .typeform .tablebox {
      padding-left: 30px; }
      @media screen and (max-width: 1366px) {
        .sec3 .formbox .typeform .tablebox {
          padding-left: 2.19619vw; } }
      @media screen and (max-width: 768px) {
        .sec3 .formbox .typeform .tablebox {
          padding-left: 3vw; } }
    .sec3 .formbox .typeform table {
      line-height: 1.5;
      color: #000;
      font-weight: bold;
      vertical-align: middle;
      padding-left: 40px; }
      @media screen and (max-width: 1366px) {
        .sec3 .formbox .typeform table {
          padding-left: 2.92826vw; } }
      @media screen and (max-width: 768px) {
        .sec3 .formbox .typeform table {
          width: 100%; } }
      .sec3 .formbox .typeform table tr:last-child td {
        border-bottom: none; }
      .sec3 .formbox .typeform table th {
        font-size: 20px;
        text-align: center; }
        .sec3 .formbox .typeform table th:nth-child(1) {
          width: 15%; }
        @media screen and (max-width: 1366px) {
          .sec3 .formbox .typeform table th {
            font-size: 1.46413vw; } }
        @media screen and (max-width: 768px) {
          .sec3 .formbox .typeform table th {
            font-size: 3vw; }
            .sec3 .formbox .typeform table th:nth-child(1) {
              width: 25%; } }
      .sec3 .formbox .typeform table td {
        border-bottom: 1px solid #e6e6e6;
        padding: 20px 0;
        text-align: center; }
        @media screen and (max-width: 1366px) {
          .sec3 .formbox .typeform table td {
            padding: 1.46413vw 0; } }
        @media screen and (max-width: 768px) {
          .sec3 .formbox .typeform table td {
            padding: 3vw 0; } }
      .sec3 .formbox .typeform table .txtsub {
        font-size: 20px;
        line-height: 1;
        text-align: left;
        position: relative; }
        .sec3 .formbox .typeform table .txtsub:after {
          content: "";
          width: 25px;
          height: 29px;
          background-repeat: no-repeat;
          background-size: auto 100%;
          background-position: left center;
          position: absolute;
          top: -5px;
          left: -40px; }
          @media screen and (max-width: 1366px) {
            .sec3 .formbox .typeform table .txtsub:after {
              width: 1.83016vw;
              height: 2.12299vw;
              left: -2.92826vw; } }
          @media screen and (max-width: 768px) {
            .sec3 .formbox .typeform table .txtsub:after {
              width: 3.625vw;
              height: 5vw;
              left: -5vw;
              background-size: 100% 100%; } }
        .sec3 .formbox .typeform table .txtsub.icon1:after {
          background-image: url("../images/typeform_icon1.png"); }
        .sec3 .formbox .typeform table .txtsub.icon2:after {
          background-image: url("../images/typeform_icon2.png"); }
        @media screen and (max-width: 1366px) {
          .sec3 .formbox .typeform table .txtsub {
            font-size: 1.46413vw; } }
        @media screen and (max-width: 768px) {
          .sec3 .formbox .typeform table .txtsub {
            font-size: 3vw; } }
      .sec3 .formbox .typeform table .ps {
        font-size: 12px;
        color: #d43b2e;
        position: absolute;
        top: 0;
        right: -155px;
        text-align: left; }
        @media screen and (max-width: 1366px) {
          .sec3 .formbox .typeform table .ps {
            font-size: 0.87848vw;
            right: -16.10542vw; } }
        @media screen and (max-width: 768px) {
          .sec3 .formbox .typeform table .ps {
            font-size: 2.75vw;
            right: -38vw;
            top: -1vw; } }
  .sec3 .formbox .form .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
    font-size: 20px;
    color: #000;
    font-weight: bold;
    line-height: 1.5;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    @media screen and (max-width: 1366px) {
      .sec3 .formbox .form .item {
        margin-bottom: 1.46413vw;
        font-size: 1.46413vw; } }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .form .item {
        font-size: 3.75vw;
        margin-bottom: 3vw;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; } }
    .sec3 .formbox .form .item.wrap {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      @media screen and (max-width: 768px) {
        .sec3 .formbox .form .item.wrap div {
          margin-bottom: 1vw; } }
      .sec3 .formbox .form .item.wrap div:nth-child(3) {
        padding-left: 18%; }
        @media screen and (max-width: 768px) {
          .sec3 .formbox .form .item.wrap div:nth-child(3) {
            padding-left: 0; } }
      .sec3 .formbox .form .item.wrap p {
        padding-left: 16%; }
        @media screen and (max-width: 768px) {
          .sec3 .formbox .form .item.wrap p {
            padding-left: 0;
            margin-left: 0; } }
    .sec3 .formbox .form .item.wrap2 {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      .sec3 .formbox .form .item.wrap2 p.color {
        width: 100%;
        padding-left: 16%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
        @media screen and (max-width: 768px) {
          .sec3 .formbox .form .item.wrap2 p.color {
            padding-left: 0; } }
      @media screen and (max-width: 768px) {
        .sec3 .formbox .form .item.wrap2 .t {
          width: 100%; }
        .sec3 .formbox .form .item.wrap2 p {
          display: inline-block;
          width: auto;
          padding-left: 0;
          margin-left: 0; } }
    .sec3 .formbox .form .item.w1 .t {
      width: 51%; }
      @media screen and (max-width: 768px) {
        .sec3 .formbox .form .item.w1 .t {
          width: 100%;
          padding-bottom: 1vw; } }
    .sec3 .formbox .form .item.w1 input {
      width: 30%; }
      @media screen and (max-width: 768px) {
        .sec3 .formbox .form .item.w1 input {
          width: 70%; } }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .form .item.w1 p {
        padding-left: 0vw;
        display: inline-block;
        width: auto;
        margin-left: 0; } }
    .sec3 .formbox .form .item.w2 .t {
      width: 23%; }
      @media screen and (max-width: 768px) {
        .sec3 .formbox .form .item.w2 .t {
          width: 100%;
          padding-bottom: 1vw; } }
    .sec3 .formbox .form .item.w2 input {
      width: 30%; }
      @media screen and (max-width: 768px) {
        .sec3 .formbox .form .item.w2 input {
          width: 70%; } }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .form .item.w2 p {
        padding-left: 0vw;
        display: inline-block;
        width: auto;
        margin-left: 0; } }
    .sec3 .formbox .form .item.nospace {
      margin-bottom: 5px; }
  .sec3 .formbox .form .t {
    width: 18%; }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .form .t {
        width: 30%; } }
  .sec3 .formbox .form p {
    font-size: 14px;
    color: #000;
    margin-left: 15px; }
    .sec3 .formbox .form p.color {
      color: #ff4337; }
    .sec3 .formbox .form p.wid {
      width: 43%; }
      @media screen and (max-width: 768px) {
        .sec3 .formbox .form p.wid {
          width: 100%; } }
    @media screen and (max-width: 1366px) {
      .sec3 .formbox .form p {
        font-size: 1.02489vw;
        margin-left: 1.0981vw; } }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .form p {
        width: 100%;
        font-size: 2.625vw;
        padding-top: 1vw;
        margin-left: 27vw; } }
    .sec3 .formbox .form p.fz {
      font-size: 13px; }
      @media screen and (max-width: 1366px) {
        .sec3 .formbox .form p.fz {
          font-size: 0.95168vw; } }
      @media screen and (max-width: 768px) {
        .sec3 .formbox .form p.fz {
          font-size: 3.42857vw; } }
  .sec3 .formbox .form input[type="text"] {
    background: transparent;
    border: 2px solid #000;
    padding: 0px 5px;
    width: 35%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 20px;
    line-height: 1.5; }
    @media screen and (max-width: 1366px) {
      .sec3 .formbox .form input[type="text"] {
        border: 0.07321vw solid #000;
        padding: 0px 0.36603vw;
        font-size: 1.46413vw; } }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .form input[type="text"] {
        width: 70%;
        padding: 1vw;
        font-size: 3vw; } }
  .sec3 .formbox .form .radiobox {
    margin-right: 50px; }
    @media screen and (max-width: 1366px) {
      .sec3 .formbox .form .radiobox {
        margin-right: 3.66032vw; } }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .form .radiobox {
        margin-right: 2.5vw; } }
    .sec3 .formbox .form .radiobox:nth-child(4) {
      margin-right: 0; }
    .sec3 .formbox .form .radiobox.w1 {
      width: 82%;
      margin-right: 0; }
      @media screen and (max-width: 768px) {
        .sec3 .formbox .form .radiobox.w1 {
          width: 100%; } }
    .sec3 .formbox .form .radiobox.pr {
      margin-right: 100px; }
      @media screen and (max-width: 1366px) {
        .sec3 .formbox .form .radiobox.pr {
          margin-right: 7.32064vw; } }
    .sec3 .formbox .form .radiobox input[type=radio] {
      display: none; }
      .sec3 .formbox .form .radiobox input[type=radio] + label.radiostyle {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url("../images/radio_bg2.svg") no-repeat center center;
        background-size: 100% auto;
        position: relative; }
        @media screen and (max-width: 1366px) {
          .sec3 .formbox .form .radiobox input[type=radio] + label.radiostyle {
            width: 1.46413vw;
            height: 1.46413vw; } }
        @media screen and (max-width: 768px) {
          .sec3 .formbox .form .radiobox input[type=radio] + label.radiostyle {
            width: 3.5vw;
            height: 3.5vw; } }
      .sec3 .formbox .form .radiobox input[type=radio]:checked + label.radiostyle:before {
        background: url("../images/radio_dot2.svg") no-repeat center center;
        background-size: 100% auto; }
    .sec3 .formbox .form .radiobox label {
      vertical-align: middle;
      display: inline-block; }
      .sec3 .formbox .form .radiobox label.radiostyle {
        display: inline-block;
        position: relative; }
        .sec3 .formbox .form .radiobox label.radiostyle:before {
          content: '';
          display: inline-block;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0; }
  .sec3 .formbox .form .mycheckbox {
    margin-right: 20px; }
    @media screen and (max-width: 1366px) {
      .sec3 .formbox .form .mycheckbox {
        margin-right: 1.46413vw; } }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .form .mycheckbox {
        margin-right: 2vw; } }
    .sec3 .formbox .form .mycheckbox:last-child {
      margin-right: 0;
      margin-top: 20px; }
    .sec3 .formbox .form .mycheckbox input[type=checkbox] {
      display: none; }
      .sec3 .formbox .form .mycheckbox input[type=checkbox] + label.checkstyle {
        display: inline-block;
        width: 22px;
        height: 22px;
        background: url("../images/checkbox_bg.svg") no-repeat center center;
        background-size: 100% auto;
        position: relative;
        vertical-align: middle; }
        @media screen and (max-width: 1366px) {
          .sec3 .formbox .form .mycheckbox input[type=checkbox] + label.checkstyle {
            width: 1.61054vw;
            height: 1.61054vw; } }
        @media screen and (max-width: 768px) {
          .sec3 .formbox .form .mycheckbox input[type=checkbox] + label.checkstyle {
            width: 4.5vw;
            height: 4.5vw; } }
      .sec3 .formbox .form .mycheckbox input[type=checkbox]:checked + label.checkstyle:before {
        background: url("../images/checkbox_check.svg") no-repeat center center;
        background-size: 100% auto; }
    .sec3 .formbox .form .mycheckbox label {
      vertical-align: middle;
      display: inline-block; }
      .sec3 .formbox .form .mycheckbox label.checkstyle {
        display: inline-block;
        position: relative; }
        .sec3 .formbox .form .mycheckbox label.checkstyle:before {
          content: '';
          display: inline-block;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0; }
      .sec3 .formbox .form .mycheckbox label.labeltxt {
        width: 700px;
        vertical-align: top; }
        @media screen and (max-width: 1366px) {
          .sec3 .formbox .form .mycheckbox label.labeltxt {
            width: 51.24451vw; } }
        @media screen and (max-width: 768px) {
          .sec3 .formbox .form .mycheckbox label.labeltxt {
            width: 68vw; } }
  .sec3 .formbox .form .radiobox2 {
    width: 82%; }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .form .radiobox2 {
        width: 100%; } }
  .sec3 .formbox .form input[type="radio"] {
    padding: 0;
    margin: 0;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px; }
    @media screen and (max-width: 1366px) {
      .sec3 .formbox .form input[type="radio"] {
        width: 1.46413vw;
        height: 1.46413vw;
        margin-right: 0.36603vw; } }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .form input[type="radio"] {
        width: 5vw;
        height: 5vw;
        margin-right: 1vw; } }
  .sec3 .formbox .form input[type="checkbox"] {
    padding: 0;
    margin: 0;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px; }
    @media screen and (max-width: 1366px) {
      .sec3 .formbox .form input[type="checkbox"] {
        width: 1.46413vw;
        height: 1.46413vw;
        margin-right: 0.36603vw; } }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .form input[type="checkbox"] {
        width: 5vw;
        height: 5vw;
        margin-right: 1vw; } }
  .sec3 .formbox .form span {
    display: inline-block;
    vertical-align: middle; }
  .sec3 .formbox .form select {
    padding: 2px 15px;
    border: 2px solid #000; }
    @media screen and (max-width: 1366px) {
      .sec3 .formbox .form select {
        padding: 0.14641vw 1.0981vw;
        border: 0.07321vw solid #000; } }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .form select {
        border: 1px solid #000;
        padding: 0.25vw 0.2vw; } }
  .sec3 .formbox .form .warn {
    font-size: 13px;
    line-height: 1.7;
    color: #000;
    font-weight: bold;
    margin-bottom: 30px; }
    @media screen and (max-width: 1366px) {
      .sec3 .formbox .form .warn {
        font-size: 0.95168vw;
        margin-bottom: 2.19619vw; } }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .form .warn {
        font-size: 2.375vw;
        margin-bottom: 0vw;
        padding-left: 0; } }
    .sec3 .formbox .form .warn a {
      color: #3578ff;
      display: inline;
      text-decoration: underline; }
      .sec3 .formbox .form .warn a:hover {
        color: #ff4337; }
  .sec3 .formbox .btnbox {
    margin: 30px auto 0;
    text-align: center; }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .btnbox {
        margin: 7vw auto 0; } }
    .sec3 .formbox .btnbox .mybtn {
      display: inline-block;
      width: 180px;
      margin: 0 40px; }
      @media screen and (max-width: 768px) {
        .sec3 .formbox .btnbox .mybtn {
          width: 35vw;
          margin: 0 4vw; } }
  .sec3 .formbox .btnDone {
    width: 180px;
    position: relative;
    z-index: 10;
    cursor: pointer; }
    @media screen and (max-width: 768px) {
      .sec3 .formbox .btnDone {
        width: 40%;
        margin: 8vw auto 0; } }
  .sec3 .word {
    top: 0;
    right: -4%; }
    @media screen and (max-width: 768px) {
      .sec3 .word {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        top: 81.5%;
        right: auto;
        left: 48%;
        height: 96vw; } }
  .sec3 .line_b.p1 {
    top: 48%;
    right: -3%; }
    @media screen and (max-width: 768px) {
      .sec3 .line_b.p1 {
        top: 100.5%;
        right: auto;
        left: 38%; } }
  .sec3 .line_b.p2 {
    bottom: -1%;
    right: -3%; }
    @media screen and (max-width: 768px) {
      .sec3 .line_b.p2 {
        bottom: -5.5%;
        right: 9%; } }
  .sec3 .line_b.p3 {
    right: 4.8%;
    bottom: 39%;
    height: 147px; }
    @media screen and (max-width: 768px) {
      .sec3 .line_b.p3 {
        display: none; } }
  .sec3 .line_s.p1 {
    right: 5%;
    bottom: 0;
    height: 700px; }
    @media screen and (max-width: 768px) {
      .sec3 .line_s.p1 {
        right: 7%;
        bottom: -6%;
        height: 30vw;
        z-index: 1; } }
  .sec3 .line_s.p2 {
    width: 795px;
    right: 0;
    bottom: 5%; }
    @media screen and (max-width: 768px) {
      .sec3 .line_s.p2 {
        display: none; } }
  .sec3 .sq {
    width: 453px;
    position: absolute;
    bottom: 2%;
    left: -41%; }
    @media screen and (max-width: 1366px) {
      .sec3 .sq {
        width: 33.16252vw; } }
    @media screen and (max-width: 768px) {
      .sec3 .sq {
        width: 26.375vw;
        bottom: -4%;
        left: 7%; } }

/* sec4
--------------------------------------------------------------------------------------*/
.sec4 .outer {
  background-image: url("../images/sec4_bg.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top; }

.sec4 .title img {
  width: 342px; }
  @media screen and (max-width: 1366px) {
    .sec4 .title img {
      width: 25.0366vw; } }
  @media screen and (max-width: 768px) {
    .sec4 .title img {
      width: 60vw; } }

.sec4 .inner {
  padding-bottom: 100px; }
  @media screen and (max-width: 1366px) {
    .sec4 .inner {
      padding-bottom: 7.32064vw; } }

.sec4 .lazybag .box {
  cursor: pointer; }
  .sec4 .lazybag .box .pic, .sec4 .lazybag .box .txtbox {
    display: inline-block;
    vertical-align: middle; }
    @media screen and (max-width: 768px) {
      .sec4 .lazybag .box .pic, .sec4 .lazybag .box .txtbox {
        display: block;
        width: 100%; } }
  .sec4 .lazybag .box.main {
    width: 90%;
    margin: auto;
    background-image: url("../images/lazybag_line.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    padding-bottom: 50px;
    margin-bottom: 30px; }
    @media screen and (max-width: 1366px) {
      .sec4 .lazybag .box.main {
        padding-bottom: 3.66032vw;
        margin-bottom: 2.19619vw; } }
    @media screen and (max-width: 768px) {
      .sec4 .lazybag .box.main {
        padding-bottom: 5vw;
        margin-bottom: 5vw;
        background-image: url("../images/login/lazybag_line.png"); } }
    .sec4 .lazybag .box.main .sub {
      font-size: 25px; }
      @media screen and (max-width: 1366px) {
        .sec4 .lazybag .box.main .sub {
          font-size: 1.83016vw; } }
      @media screen and (max-width: 768px) {
        .sec4 .lazybag .box.main .sub {
          font-size: 3.75vw; } }
    .sec4 .lazybag .box.main .pic {
      position: relative; }
      .sec4 .lazybag .box.main .pic:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("../images/btn_play.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 25% auto;
        position: absolute;
        top: 0;
        left: 0; }
  .sec4 .lazybag .box.small {
    margin-left: 7px;
    margin-bottom: 7px;
    margin-top: 7px; }
    @media screen and (max-width: 768px) {
      .sec4 .lazybag .box.small {
        margin: 1vw;
        padding-right: 2vw; } }
    .sec4 .lazybag .box.small .pic {
      margin-right: 3%; }
    .sec4 .lazybag .box.small .txtbox {
      width: 44%; }
      .sec4 .lazybag .box.small .txtbox p {
        display: none; }
      @media screen and (max-width: 768px) {
        .sec4 .lazybag .box.small .txtbox {
          width: 100%; } }
    .sec4 .lazybag .box.small .sub {
      font-size: 20px;
      padding-bottom: 0; }
      @media screen and (max-width: 1366px) {
        .sec4 .lazybag .box.small .sub {
          font-size: 1.46413vw; } }
      @media screen and (max-width: 768px) {
        .sec4 .lazybag .box.small .sub {
          font-size: 3.25vw; } }

.sec4 .lazybag .pic {
  width: 48.5%;
  margin-right: 5%;
  -webkit-box-shadow: 1px 1px 10px 0px rgba(50, 50, 50, 0.5);
  box-shadow: 1px 1px 10px 0px rgba(50, 50, 50, 0.5); }
  @media screen and (max-width: 1366px) {
    .sec4 .lazybag .pic {
      margin-right: 4%; } }
  @media screen and (max-width: 768px) {
    .sec4 .lazybag .pic {
      margin-right: 0;
      margin-bottom: 4vw;
      -webkit-box-shadow: 1px 1px 1vw 0px rgba(50, 50, 50, 0.5);
      box-shadow: 1px 1px 1vw 0px rgba(50, 50, 50, 0.5); } }

.sec4 .lazybag .txtbox {
  width: 46%;
  font-weight: bold;
  line-height: 1.5; }
  .sec4 .lazybag .txtbox .sub {
    color: #000;
    padding-bottom: 30px; }
    @media screen and (max-width: 1366px) {
      .sec4 .lazybag .txtbox .sub {
        padding-bottom: 2.19619vw; } }
    @media screen and (max-width: 768px) {
      .sec4 .lazybag .txtbox .sub {
        padding-bottom: 1vw; } }
  .sec4 .lazybag .txtbox p {
    font-size: 20px;
    color: #7e7e7e; }
    @media screen and (max-width: 1366px) {
      .sec4 .lazybag .txtbox p {
        font-size: 1.46413vw; } }
    @media screen and (max-width: 768px) {
      .sec4 .lazybag .txtbox p {
        font-size: 3vw; } }

.sec4 .lazybag .slide {
  width: 90%;
  margin: auto;
  display: none; }
  @media screen and (max-width: 768px) {
    .sec4 .lazybag .slide {
      width: 86%; } }
  .sec4 .lazybag .slide.slick-initialized {
    display: block; }
  .sec4 .lazybag .slide .slick-arrow.slick-prev {
    left: -6%; }
    @media screen and (max-width: 768px) {
      .sec4 .lazybag .slide .slick-arrow.slick-prev {
        left: -11%; } }
  .sec4 .lazybag .slide .slick-arrow.slick-next {
    right: -6%; }
    @media screen and (max-width: 768px) {
      .sec4 .lazybag .slide .slick-arrow.slick-next {
        right: -11%; } }

/* sec5
--------------------------------------------------------------------------------------*/
.sec5 {
  background-color: #f0ebd4; }
  @media screen and (max-width: 768px) {
    .sec5 {
      margin-top: -3vw; } }
  .sec5 .container {
    padding: 80px 0 100px; }
    @media screen and (max-width: 1366px) {
      .sec5 .container {
        padding: 5.85652vw 0 7.32064vw; } }
    @media screen and (max-width: 768px) {
      .sec5 .container {
        padding: 28vw 0 20vw; } }
  .sec5 .sectitle {
    color: #393110; }
    .sec5 .sectitle font {
      color: #837637; }
  .sec5 .inner {
    background-color: #fff;
    width: 75.769%;
    margin: auto;
    border-radius: 5px;
    -webkit-box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.2); }
    @media screen and (max-width: 768px) {
      .sec5 .inner {
        padding: 0;
        width: 100%;
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        background-color: transparent; } }
  .sec5 .title {
    width: 458px;
    position: absolute;
    top: -11%;
    left: 30%; }
    .sec5 .title .canvasWrapper {
      padding-bottom: 32%; }
    @media screen and (max-width: 1366px) {
      .sec5 .title {
        width: 33.52855vw; } }
    @media screen and (max-width: 768px) {
      .sec5 .title {
        width: 78vw;
        top: -15%;
        left: 14%; } }
  .sec5 .titletxt {
    padding-bottom: 30px; }
    @media screen and (max-width: 1366px) {
      .sec5 .titletxt {
        padding-bottom: 2.19619vw; } }
    @media screen and (max-width: 768px) {
      .sec5 .titletxt {
        padding-bottom: 5vw; } }
  .sec5 .mainslide {
    width: 100%;
    margin: auto;
    display: none; }
    @media screen and (max-width: 768px) {
      .sec5 .mainslide {
        width: 100%; } }
    .sec5 .mainslide.slick-initialized {
      display: block; }
    .sec5 .mainslide .slick-slide {
      opacity: 0.3;
      -webkit-transition: opacity 0.5s;
      -o-transition: opacity 0.5s;
      transition: opacity 0.5s; }
    .sec5 .mainslide .slick-current,
    .sec5 .mainslide .slick-current-clone-animate {
      opacity: 1; }
    .sec5 .mainslide .one {
      margin: 3vw 0;
      position: relative;
      cursor: pointer; }
      .sec5 .mainslide .one img {
        display: block; }
      .sec5 .mainslide .one .in {
        margin: 0 -7vw;
        position: relative; }
        .sec5 .mainslide .one .in:after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background: #fff;
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          -webkit-transition: all .3s ease;
          -o-transition: all .3s ease;
          transition: all .3s ease;
          z-index: 5; }
        .sec5 .mainslide .one .in:before {
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 6; }
        @media screen and (max-width: 768px) {
          .sec5 .mainslide .one .in {
            margin: 0; } }
      .sec5 .mainslide .one .link {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10; }
      .sec5 .mainslide .one .txtbox {
        width: 150%;
        position: absolute;
        left: 50%;
        margin-left: -75%;
        bottom: -100px;
        text-align: center;
        opacity: 0;
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease; }
        @media screen and (max-width: 1024px) {
          .sec5 .mainslide .one .txtbox {
            bottom: -16vw;
            padding-top: 0; } }
        .sec5 .mainslide .one .txtbox .new {
          display: inline-block;
          font-size: 14px;
          color: #fff;
          /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#07bcff+0,8777ff+79 */
          background: #07bcff;
          /* Old browsers */
          background: -moz-linear-gradient(left, #07bcff 0%, #8777ff 79%);
          /* FF3.6-15 */
          background: -webkit-linear-gradient(left, #07bcff 0%, #8777ff 79%);
          /* Chrome10-25,Safari5.1-6 */
          background: -webkit-gradient(linear, left top, right top, from(#07bcff), color-stop(79%, #8777ff));
          background: -o-linear-gradient(left, #07bcff 0%, #8777ff 79%);
          background: linear-gradient(to right, #07bcff 0%, #8777ff 79%);
          /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#07bcff', endColorstr='#8777ff',GradientType=1 );
          /* IE6-9 */
          border-radius: 5px;
          padding: 6px 10px 5px;
          vertical-align: middle;
          margin-right: 3px; }
          @media screen and (max-width: 1024px) {
            .sec5 .mainslide .one .txtbox .new {
              font-size: 2vw;
              padding: 1vw 2vw; } }
        .sec5 .mainslide .one .txtbox span {
          display: inline-block;
          font-size: 26px;
          color: #010101;
          line-height: 1.2;
          text-align: center;
          vertical-align: middle; }
          @media screen and (max-width: 1366px) {
            .sec5 .mainslide .one .txtbox span {
              font-size: 22px; } }
          @media screen and (max-width: 1024px) {
            .sec5 .mainslide .one .txtbox span {
              font-size: 4vw; } }
        .sec5 .mainslide .one .txtbox .btnbox {
          width: 60%;
          margin: auto;
          padding-top: 25px; }
          @media screen and (max-width: 1024px) {
            .sec5 .mainslide .one .txtbox .btnbox {
              width: 82%;
              padding-top: 4vw; } }
          .sec5 .mainslide .one .txtbox .btnbox .btn {
            width: 47%;
            padding: 1px;
            cursor: pointer; }
          .sec5 .mainslide .one .txtbox .btnbox p {
            font-size: 16px;
            padding: 15px 0; }
            @media screen and (max-width: 1024px) {
              .sec5 .mainslide .one .txtbox .btnbox p {
                font-size: 3.75vw;
                padding: 2vw 0; } }
    .sec5 .mainslide .slick-slide {
      position: relative;
      opacity: 0; }
    .sec5 .mainslide .slick-current {
      -webkit-transform: scale3d(1.2, 1.2, 1.2);
      transform: scale3d(1.2, 1.2, 1.2);
      z-index: 10;
      opacity: 1;
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease; }
      .sec5 .mainslide .slick-current a {
        z-index: 10;
        position: relative; }
        .sec5 .mainslide .slick-current a:after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-image: url("../images/vid_play.svg");
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 18% auto;
          z-index: 5; }
      .sec5 .mainslide .slick-current .txtbox {
        opacity: 1;
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease; }
      .sec5 .mainslide .slick-current.end .in:after {
        content: "";
        background: #303045;
        opacity: 0.8;
        font-size: 30px;
        color: #fff; }
      .sec5 .mainslide .slick-current.end .in:before {
        content: "活動已結束";
        font-size: 30px;
        color: #fff;
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        text-align: center;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 55%; }
      .sec5 .mainslide .slick-current:hover a:after {
        background-size: 20% auto; }
    .sec5 .mainslide .size1 {
      z-index: 4;
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
      opacity: 1; }
      .sec5 .mainslide .size1 .in:after {
        opacity: 0.4;
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease; }
    .sec5 .mainslide .size2 {
      z-index: 3;
      -webkit-transform: scale3d(0.8, 0.8, 0.8);
      transform: scale3d(0.8, 0.8, 0.8);
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
      opacity: 1; }
      .sec5 .mainslide .size2 .in:after {
        opacity: 0.85;
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease; }
    .sec5 .mainslide .size3 {
      z-index: 2;
      -webkit-transform: scale3d(0, 0, 0);
      transform: scale3d(0, 0, 0);
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
      opacity: 1; }
      .sec5 .mainslide .size3 .in:after {
        opacity: 1;
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease; }
    .sec5 .mainslide .size4 {
      z-index: 1;
      opacity: 0;
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease; }
      .sec5 .mainslide .size4 .in:after {
        opacity: 1;
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease; }
  .sec5 .subslide {
    text-align: center;
    width: 100%;
    margin: auto; }
    @media screen and (max-width: 1366px) {
      .sec5 .subslide {
        margin-top: 1vw; } }
    @media screen and (max-width: 768px) {
      .sec5 .subslide {
        width: 65%;
        margin: 0 auto;
        margin-top: 4vw; } }
    .sec5 .subslide .txt {
      display: inline;
      font-size: 14px;
      color: #818181;
      font-weight: bold;
      vertical-align: middle;
      line-height: 1.2;
      position: relative; }
      .sec5 .subslide .txt:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0; }
      @media screen and (max-width: 1366px) {
        .sec5 .subslide .txt {
          font-size: 1.31772vw;
          padding: 0.73206vw; } }
      @media screen and (max-width: 768px) {
        .sec5 .subslide .txt {
          padding: 2vw 3vw;
          padding: 0;
          font-size: 3.75vw;
          line-height: 1.5; } }
      .sec5 .subslide .txt a {
        color: inherit; }
    .sec5 .subslide .slick-slide {
      vertical-align: middle; }
    .sec5 .subslide .slick-list {
      overflow: hidden; }
    .sec5 .subslide .slick-current .txt {
      font-size: 20px;
      color: #000; }
      .sec5 .subslide .slick-current .txt:after {
        display: none; }
      @media screen and (max-width: 1366px) {
        .sec5 .subslide .slick-current .txt {
          font-size: 1.46413vw; } }
      @media screen and (max-width: 768px) {
        .sec5 .subslide .slick-current .txt {
          font-size: 4.125vw; } }
  .sec5 .word.p1 {
    right: -3.5%;
    bottom: -1%;
    height: 55%; }
    @media screen and (max-width: 768px) {
      .sec5 .word.p1 {
        display: none; } }
  .sec5 .word.p2 {
    right: 3.5%;
    bottom: -18%;
    height: 27%; }
    @media screen and (max-width: 768px) {
      .sec5 .word.p2 {
        right: auto;
        bottom: -103%;
        height: 96vw;
        left: 48%; } }
  .sec5 .line_b {
    bottom: -5%;
    left: -4%; }
    @media screen and (max-width: 768px) {
      .sec5 .line_b {
        bottom: auto;
        left: 4%;
        top: -25%; } }
    @media screen and (max-width: 768px) {
      .sec5 .line_b.p2 {
        left: 89%;
        top: -30%; } }
  .sec5 .line_s.p1 {
    top: -44%;
    right: -2.5%;
    height: 84%; }
  .sec5 .line_s.p2 {
    width: 72%;
    right: -66%;
    top: 6%; }
    @media screen and (max-width: 768px) {
      .sec5 .line_s.p2 {
        width: 27vw;
        right: 0;
        top: -32%; } }
  .sec5 .sq {
    width: 150px;
    position: absolute;
    bottom: -20%;
    left: -36%; }
    @media screen and (max-width: 1366px) {
      .sec5 .sq {
        width: 10.98097vw;
        left: -23%; } }

/* sec6
--------------------------------------------------------------------------------------*/
.sec6 {
  margin-bottom: 0;
  background-color: #f4f4f4; }
  .sec6 .container {
    padding: 80px 0; }
    @media screen and (max-width: 1366px) {
      .sec6 .container {
        padding: 5.85652vw 0; } }
    @media screen and (max-width: 768px) {
      .sec6 .container {
        padding: 20vw 0; } }
  .sec6 .sectitle {
    color: #000000; }
    .sec6 .sectitle font {
      color: #515151; }
  .sec6 .inner {
    padding: 0;
    width: 75.769%;
    margin: auto;
    margin-top: -30px; }
    @media screen and (max-width: 1366px) {
      .sec6 .inner {
        margin-top: -2.19619vw; } }
    @media screen and (max-width: 768px) {
      .sec6 .inner {
        width: 100%;
        background-color: #fff;
        margin-top: 0;
        -webkit-box-shadow: 0px 0px 4vw 0px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 0px 4vw 0px rgba(0, 0, 0, 0.3);
        border-radius: 3vw;
        padding: 5vw 0 17vw;
        position: relative;
        z-index: 1; } }
  .sec6 .titletxt {
    padding-bottom: 30px; }
    @media screen and (max-width: 1366px) {
      .sec6 .titletxt {
        padding-bottom: 2.19619vw; } }
    @media screen and (max-width: 768px) {
      .sec6 .titletxt {
        padding-bottom: 6vw; } }
  .sec6 .title {
    max-width: 629px;
    width: 59%;
    position: absolute;
    top: -16%;
    left: 20%; }
    @media screen and (max-width: 1366px) {
      .sec6 .title {
        width: 46.04685vw;
        top: -10%; } }
    @media screen and (max-width: 768px) {
      .sec6 .title {
        width: 72vw;
        top: -13%;
        left: 14.5%; } }
    .sec6 .title .duck {
      width: 22.73%;
      position: absolute;
      left: 12%;
      bottom: 3%; }
      .sec6 .title .duck .canvasWrapper {
        padding-bottom: 130%; }
      @media screen and (max-width: 768px) {
        .sec6 .title .duck {
          width: 26.73%;
          left: 1%; } }
  .sec6 .content {
    padding: 20px 0 0px; }
    @media screen and (max-width: 1366px) {
      .sec6 .content {
        padding: 1.46413vw 0 4.39239vw; } }
    @media screen and (max-width: 768px) {
      .sec6 .content {
        padding: 0; } }
  .sec6 .prodbox {
    position: relative;
    z-index: 2;
    margin-top: -50px; }
    @media screen and (max-width: 1366px) {
      .sec6 .prodbox {
        margin-top: -3.66032vw; } }
    @media screen and (max-width: 768px) {
      .sec6 .prodbox {
        margin-top: -1vw; } }
    .sec6 .prodbox .con {
      width: 82%;
      margin: auto;
      position: relative; }
    .sec6 .prodbox .city {
      width: 609px; }
      @media screen and (max-width: 1366px) {
        .sec6 .prodbox .city {
          width: 44.58272vw; } }
      @media screen and (max-width: 768px) {
        .sec6 .prodbox .city {
          width: 58.75vw;
          margin: auto; } }
    .sec6 .prodbox .prod {
      width: 547px;
      position: absolute;
      top: 50px;
      right: -50px;
      z-index: 5;
      display: none;
      -webkit-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
      transform-origin: left center; }
      @media screen and (max-width: 1366px) {
        .sec6 .prodbox .prod {
          width: 40.04392vw;
          top: 3.66032vw;
          right: -3.66032vw; } }
      @media screen and (max-width: 768px) {
        .sec6 .prodbox .prod {
          width: 46vw;
          top: 40vw;
          -webkit-transform-origin: center top;
          -ms-transform-origin: center top;
          transform-origin: center top;
          right: auto;
          left: 50%;
          margin-left: -23vw; } }
      .sec6 .prodbox .prod.active {
        display: block;
        -webkit-animation: prodscale .1s  linear forwards;
        animation: prodscale .1s  linear forwards; }
        @media screen and (max-width: 768px) {
          .sec6 .prodbox .prod.active {
            -webkit-animation: prodscale .1s 0s linear forwards;
            animation: prodscale .1s 0s linear forwards; } }
      .sec6 .prodbox .prod .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-animation: prodani 0.5s steps(2) infinite;
        animation: prodani 0.5s steps(2) infinite; }
      .sec6 .prodbox .prod .prodimg {
        position: relative;
        z-index: 1; }
  .sec6 .slidearea {
    display: none;
    position: relative; }
    @media screen and (max-width: 768px) {
      .sec6 .slidearea {
        width: 100%; } }
    .sec6 .slidearea.slick-initialized {
      display: block; }
    .sec6 .slidearea .one {
      text-align: center;
      color: #000;
      line-height: 1.5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      position: relative; }
      .sec6 .slidearea .one .pic {
        padding: 40px; }
        .sec6 .slidearea .one .pic img {
          -webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2); }
        @media screen and (max-width: 768px) {
          .sec6 .slidearea .one .pic {
            padding: 10vw; }
            .sec6 .slidearea .one .pic img {
              -webkit-box-shadow: none;
              box-shadow: none; } }
      .sec6 .slidearea .one .txtbox {
        display: inline-block;
        vertical-align: middle;
        width: 65%;
        margin-top: -20px; }
        @media screen and (max-width: 768px) {
          .sec6 .slidearea .one .txtbox {
            width: 80%;
            margin: auto;
            margin-top: -5vw; } }
      .sec6 .slidearea .one .sub {
        font-size: 50px;
        font-family: 'Samsung Sharp Sans';
        font-weight: 800;
        font-style: normal;
        display: inline-block;
        padding: 0 20px; }
        @media screen and (max-width: 1366px) {
          .sec6 .slidearea .one .sub {
            font-size: 2.48902vw;
            padding: 0 1.46413vw; } }
        @media screen and (max-width: 768px) {
          .sec6 .slidearea .one .sub {
            font-size: 6vw;
            padding: 0; } }
        .sec6 .slidearea .one .sub font {
          font-size: 50px;
          vertical-align: middle;
          position: relative;
          top: -4px; }
          @media screen and (max-width: 1366px) {
            .sec6 .slidearea .one .sub font {
              font-size: 3.66032vw;
              top: -0.29283vw; } }
          @media screen and (max-width: 768px) {
            .sec6 .slidearea .one .sub font {
              font-size: 5.625vw;
              top: -.5vw; } }
      .sec6 .slidearea .one .txt {
        font-size: 18px;
        font-weight: bold;
        padding-bottom: 50px; }
        @media screen and (max-width: 1366px) {
          .sec6 .slidearea .one .txt {
            font-size: 1.46413vw; } }
        @media screen and (max-width: 768px) {
          .sec6 .slidearea .one .txt {
            font-size: 3.125vw;
            padding-bottom: 8vw; } }
      .sec6 .slidearea .one .btnbox {
        width: 405px;
        margin: auto;
        margin-bottom: 20px; }
        @media screen and (max-width: 1366px) {
          .sec6 .slidearea .one .btnbox {
            margin-bottom: 1.46413vw; } }
        @media screen and (max-width: 768px) {
          .sec6 .slidearea .one .btnbox {
            width: 80%;
            margin-bottom: 0; } }
        .sec6 .slidearea .one .btnbox a {
          width: 40%;
          position: relative; }
          .sec6 .slidearea .one .btnbox a:nth-child(1) {
            float: left; }
          .sec6 .slidearea .one .btnbox a:nth-child(2) {
            float: right; }
          @media screen and (max-width: 768px) {
            .sec6 .slidearea .one .btnbox a {
              width: 44%; } }
    .sec6 .slidearea .slick-list {
      z-index: 1; }
    .sec6 .slidearea .slick-arrow.slick-prev {
      left: 2%; }
    .sec6 .slidearea .slick-arrow.slick-next {
      right: 2%; }
    @media screen and (max-width: 768px) {
      .sec6 .slidearea .slick-arrow {
        top: 26%; } }
    .sec6 .slidearea .slick-arrow:hover.slick-prev {
      left: 1%; }
    .sec6 .slidearea .slick-arrow:hover.slick-next {
      right: 1%; }
    @media screen and (max-width: 768px) {
      .sec6 .slidearea .slick-arrow:hover.slick-prev {
        left: 3%; }
      .sec6 .slidearea .slick-arrow:hover.slick-next {
        right: 3%; } }
    .sec6 .slidearea .slick-dots {
      position: relative;
      bottom: 0;
      z-index: 1; }
      @media screen and (max-width: 1366px) {
        .sec6 .slidearea .slick-dots {
          padding-top: 1.46413vw; } }
      @media screen and (max-width: 768px) {
        .sec6 .slidearea .slick-dots {
          padding-top: 10vw; } }
      .sec6 .slidearea .slick-dots li {
        width: 15px;
        height: 15px; }
        @media screen and (max-width: 1366px) {
          .sec6 .slidearea .slick-dots li {
            width: 1.0981vw;
            height: 1.0981vw; } }
        @media screen and (max-width: 768px) {
          .sec6 .slidearea .slick-dots li {
            width: 2.1vw;
            height: 2.1vw;
            margin: 0 1vw; } }
        .sec6 .slidearea .slick-dots li button {
          border: 1px solid #bebebe;
          background-color: transparent;
          -webkit-box-shadow: none;
          box-shadow: none; }
          @media screen and (max-width: 768px) {
            .sec6 .slidearea .slick-dots li button {
              border: 1px solid #bebebe; } }
        .sec6 .slidearea .slick-dots li.slick-active button {
          background-color: #bebebe; }
  .sec6 .bottom {
    width: 100%;
    position: absolute;
    left: 0;
    top: 77.5%;
    z-index: 2; }
    @media screen and (max-width: 1366px) {
      .sec6 .bottom {
        top: 77.5%; } }
    @media screen and (max-width: 768px) {
      .sec6 .bottom {
        top: 88.6%; } }
  .sec6 .word.p1 {
    top: 3%;
    left: 0%;
    height: 41%; }
    @media screen and (max-width: 768px) {
      .sec6 .word.p1 {
        display: none; } }
  .sec6 .word.p2 {
    top: -9%;
    left: 7%;
    height: 19%; }
    @media screen and (max-width: 768px) {
      .sec6 .word.p2 {
        top: 59%;
        left: 48%;
        height: 95vw; } }
  .sec6 .line_s.p1 {
    left: -29%;
    bottom: -13%;
    height: 73%; }
    @media screen and (max-width: 1366px) {
      .sec6 .line_s.p1 {
        left: -3%; } }
    @media screen and (max-width: 768px) {
      .sec6 .line_s.p1 {
        left: 15%;
        bottom: -16%;
        height: 31vw; } }
  .sec6 .line_s.p2 {
    left: -50%;
    bottom: 8%;
    width: 74%; }
    @media screen and (max-width: 768px) {
      .sec6 .line_s.p2 {
        display: none; } }
  .sec6 .line_b {
    left: -29%;
    bottom: 50%; }
    @media screen and (max-width: 768px) {
      .sec6 .line_b {
        left: 3%;
        bottom: auto;
        top: -27%; } }
    @media screen and (max-width: 768px) {
      .sec6 .line_b.p2 {
        top: auto;
        left: 22%;
        bottom: -10%; } }
  .sec6 .sq {
    width: 452px;
    position: absolute;
    top: 50%;
    right: -48%; }
    @media screen and (max-width: 1366px) {
      .sec6 .sq {
        width: 33.08931vw; } }
    @media screen and (max-width: 768px) {
      .sec6 .sq {
        width: 7.875vw;
        top: -18%;
        right: auto;
        left: 3%; } }
    .sec6 .sq.p2 {
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      top: auto;
      bottom: -16%;
      left: 44%; }

/* sec7
--------------------------------------------------------------------------------------*/
.sec7 {
  background-color: #e2f1f4;
  margin-bottom: 0; }
  @media screen and (max-width: 768px) {
    .sec7 {
      margin-top: -3vw;
      overflow: visible; } }
  .sec7 .container {
    padding: 80px 0; }
    @media screen and (max-width: 1366px) {
      .sec7 .container {
        padding: 5.85652vw 0; } }
    @media screen and (max-width: 768px) {
      .sec7 .container {
        padding: 30vw 0 0; } }
  .sec7 .sectitle {
    color: #123d44; }
    .sec7 .sectitle font {
      color: #2c5d66; }
  .sec7 .inner {
    width: 75.769%;
    margin: auto;
    padding: 0;
    margin-top: -30px; }
    @media screen and (max-width: 768px) {
      .sec7 .inner {
        background-color: #fff;
        width: 100%;
        margin-top: 0;
        -webkit-box-shadow: 0px 0px 4vw 0px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 0px 4vw 0px rgba(0, 0, 0, 0.3);
        border-radius: 3vw;
        padding-bottom: 23vw;
        position: relative;
        z-index: 1; } }
  .sec7 .titletxt {
    padding-bottom: 45px; }
    @media screen and (max-width: 1366px) {
      .sec7 .titletxt {
        padding-bottom: 3.29429vw; } }
    @media screen and (max-width: 768px) {
      .sec7 .titletxt {
        padding-bottom: 8vw; } }
  .sec7 .box1 {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    @media screen and (max-width: 768px) {
      .sec7 .box1 {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 4vw 3.5vw 0;
        margin-bottom: 5vw; } }
    .sec7 .box1 .slider img {
      -webkit-box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.2);
      box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.2); }
      @media screen and (max-width: 768px) {
        .sec7 .box1 .slider img {
          border-radius: 3vw;
          -webkit-box-shadow: 0 1vw 1.5vw 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 1vw 1.5vw 0 rgba(0, 0, 0, 0.2); } }
    .sec7 .box1 .slider .slick-slide {
      padding: 30px; }
      @media screen and (max-width: 768px) {
        .sec7 .box1 .slider .slick-slide {
          padding: 4vw; } }
    .sec7 .box1 .slider .slick-arrow.slick-prev {
      left: 0; }
    .sec7 .box1 .slider .slick-arrow.slick-next {
      right: 0; }
  .sec7 .box3 {
    padding: 0 30px;
    margin-bottom: 60px; }
    @media screen and (max-width: 1366px) {
      .sec7 .box3 {
        padding: 0 2.19619vw;
        margin-bottom: 2.19619vw; } }
    @media screen and (max-width: 768px) {
      .sec7 .box3 {
        padding: 0 3.5vw;
        margin-bottom: 8vw; } }
    .sec7 .box3 .sub {
      font-size: 19px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 10px;
      background-color: #1b4b3a;
      display: inline-block;
      position: relative;
      padding: 3px 25px 3px 20px; }
      @media screen and (max-width: 1366px) {
        .sec7 .box3 .sub {
          font-size: 1.39092vw;
          margin-bottom: 0.73206vw; } }
      @media screen and (max-width: 768px) {
        .sec7 .box3 .sub {
          font-size: 4vw;
          margin-bottom: 2vw;
          padding: 1vw 7vw 1vw 4vw; } }
      .sec7 .box3 .sub:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 11px 0 17px 14px;
        border-color: #e2f1f4 transparent; }
        @media screen and (max-width: 768px) {
          .sec7 .box3 .sub:after {
            border-color: #fff transparent;
            border-width: 3vw 0 4vw 3vw; } }
    .sec7 .box3 .txt {
      line-height: 1.5;
      font-size: 17px;
      word-break: break-all; }
      @media screen and (max-width: 1366px) {
        .sec7 .box3 .txt {
          font-size: 1.31772vw; } }
      @media screen and (max-width: 768px) {
        .sec7 .box3 .txt {
          font-size: 3.3vw; } }
      .sec7 .box3 .txt font {
        color: #1976d9; }
  .sec7 .btnbox {
    width: 405px;
    margin: auto; }
    @media screen and (max-width: 768px) {
      .sec7 .btnbox {
        width: 80%; } }
    .sec7 .btnbox .mybtn {
      width: 45%; }
      .sec7 .btnbox .mybtn:nth-child(1) {
        float: left; }
      .sec7 .btnbox .mybtn:nth-child(2) {
        float: right; }
  .sec7 .word.p1 {
    top: 4.5%;
    left: 0%;
    height: 43%; }
    @media screen and (max-width: 768px) {
      .sec7 .word.p1 {
        display: none; } }
  .sec7 .word.p2 {
    height: 94vw;
    top: auto;
    left: 48%;
    bottom: -30%; }
  .sec7 .line_b.p1 {
    top: 64.5%;
    right: -1%; }
    @media screen and (max-width: 768px) {
      .sec7 .line_b.p1 {
        display: none; } }
  .sec7 .line_s.p1 {
    height: 500px;
    right: 102%;
    bottom: -12%; }
    @media screen and (max-width: 1366px) {
      .sec7 .line_s.p1 {
        height: 36.60322vw; } }
    @media screen and (max-width: 768px) {
      .sec7 .line_s.p1 {
        display: none; } }
  .sec7 .line_s.p2 {
    right: 99%;
    bottom: 40%;
    width: 480px; }
    @media screen and (max-width: 1366px) {
      .sec7 .line_s.p2 {
        width: 35.13909vw; } }
    @media screen and (max-width: 768px) {
      .sec7 .line_s.p2 {
        display: none; } }
  .sec7 .sq {
    width: 452px;
    position: absolute;
    left: 80%;
    top: 6%; }
    @media screen and (max-width: 1366px) {
      .sec7 .sq {
        width: 33.08931vw; } }
    @media screen and (max-width: 768px) {
      .sec7 .sq {
        width: 23.25vw;
        left: 74%;
        top: 104%;
        z-index: 1; } }

/* sec8
--------------------------------------------------------------------------------------*/
.sec8 {
  margin-bottom: 0;
  background-color: #dee4f1;
  overflow: visible; }
  @media screen and (max-width: 768px) {
    .sec8 {
      background-color: #f7f7f7; } }
  .sec8 .arrow {
    width: 48px;
    position: absolute;
    top: -3%;
    left: 50%;
    margin-left: -24px;
    z-index: 99; }
    @media screen and (max-width: 1366px) {
      .sec8 .arrow {
        width: 3.51391vw;
        margin-left: -1.75695vw; } }
    @media screen and (max-width: 768px) {
      .sec8 .arrow {
        width: 9vw;
        margin-left: -4.5vw;
        top: 7%; } }
  @media screen and (max-width: 768px) {
    .sec8 .container {
      padding: 20vw 0 0; } }
  .sec8 .inner {
    width: 75.769%;
    max-width: 985px;
    margin: auto;
    padding: 80px 0 120px; }
    @media screen and (max-width: 1366px) {
      .sec8 .inner {
        padding: 5.85652vw 0 8.78477vw; } }
    @media screen and (max-width: 768px) {
      .sec8 .inner {
        width: 100%;
        -webkit-box-shadow: 0px 0px 6vw 0px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 0px 6vw 0px rgba(0, 0, 0, 0.3);
        border-radius: 3vw;
        padding: 8vw 0 30vw;
        position: relative;
        z-index: 1;
        background-color: #f9f9f9; } }
  .sec8 .tabbox {
    text-align: center;
    margin-bottom: 50px; }
    @media screen and (max-width: 1366px) {
      .sec8 .tabbox {
        margin-bottom: 3.66032vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center; } }
    @media screen and (max-width: 768px) {
      .sec8 .tabbox {
        margin-bottom: 7vw; } }
    .sec8 .tabbox li {
      display: inline-block;
      font-weight: bold;
      font-size: 20px;
      color: #1a4736;
      text-align: center;
      padding: 10px 0;
      cursor: pointer; }
      @media screen and (max-width: 1366px) {
        .sec8 .tabbox li {
          font-size: 1.46413vw;
          padding: 0.73206vw 0; } }
      @media screen and (max-width: 768px) {
        .sec8 .tabbox li {
          font-size: 3.75vw;
          line-height: 1.3;
          padding: 2vw 0;
          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; }
          .sec8 .tabbox li font {
            letter-spacing: 1vw; } }
      .sec8 .tabbox li:nth-child(2) {
        margin: 0 10%; }
      .sec8 .tabbox li:hover, .sec8 .tabbox li.select {
        color: #e75d4f;
        border-bottom: 1px solid #e75d4f; }
  .sec8 .allcon {
    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;
    padding: 30px 90px 50px;
    background-color: #fff;
    height: 600px;
    -webkit-box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    position: relative; }
    @media screen and (max-width: 1366px) {
      .sec8 .allcon {
        padding: 2.19619vw 6.58858vw 3.66032vw;
        height: 43.92387vw; } }
    @media screen and (max-width: 768px) {
      .sec8 .allcon {
        padding: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        background-color: #f6f6f6;
        height: auto; } }
  .sec8 .content {
    width: 100%;
    position: relative; }
    @media screen and (max-width: 768px) {
      .sec8 .content {
        overflow: hidden; } }
    .sec8 .content.c1 img {
      margin-bottom: 80px; }
      @media screen and (max-width: 1366px) {
        .sec8 .content.c1 img {
          margin-bottom: 5.85652vw; } }
      @media screen and (max-width: 768px) {
        .sec8 .content.c1 img {
          margin-bottom: 6vw; } }
    .sec8 .content.c2 .allbox {
      width: 100%;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      max-height: 450px;
      margin-bottom: 11px; }
      @media screen and (max-width: 1366px) {
        .sec8 .content.c2 .allbox {
          max-height: 32.57687vw;
          margin-bottom: 1.0981vw; } }
      @media screen and (max-width: 768px) {
        .sec8 .content.c2 .allbox {
          max-height: none;
          display: block;
          width: 80%;
          margin: auto;
          margin: 23.5vw auto; } }
      .sec8 .content.c2 .allbox .slick-track {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important; }
      .sec8 .content.c2 .allbox .slick-slide {
        height: inherit !important; }
        .sec8 .content.c2 .allbox .slick-slide:after {
          content: "";
          display: inline-block;
          width: 0;
          height: 100%;
          vertical-align: middle; }
        .sec8 .content.c2 .allbox .slick-slide > div {
          width: 100%;
          display: inline-block;
          vertical-align: middle; }
      .sec8 .content.c2 .allbox .slick-arrow {
        width: 2.625vw;
        height: 11vw;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto; }
        .sec8 .content.c2 .allbox .slick-arrow:before {
          display: none; }
        .sec8 .content.c2 .allbox .slick-arrow.slick-prev {
          background-image: url("../images/m/sec8_arrow_l.png");
          left: -5%; }
        .sec8 .content.c2 .allbox .slick-arrow.slick-next {
          background-image: url("../images/m/sec8_arrow_r.png");
          right: -5%; }
        .sec8 .content.c2 .allbox .slick-arrow.slick-disabled {
          opacity: 0; }
    .sec8 .content.c2 .m_menu {
      display: none;
      width: 100%;
      overflow-x: scroll;
      padding: 4vw 0;
      scroll-behavior: smooth; }
      @media screen and (max-width: 768px) {
        .sec8 .content.c2 .m_menu {
          display: block; } }
      .sec8 .content.c2 .m_menu ul {
        font-size: 0;
        margin-left: 5vw;
        width: 140%; }
      .sec8 .content.c2 .m_menu li {
        width: 26.25vw;
        display: inline-block;
        padding: 0 1.2vw; }
        .sec8 .content.c2 .m_menu li .in {
          position: relative; }
          .sec8 .content.c2 .m_menu li .in:after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-repeat: no-repeat;
            background-position: center top;
            background-size: 100% auto;
            opacity: 0; }
        .sec8 .content.c2 .m_menu li.m1 .in:after {
          background-image: url("../images/m/sec8_manu_1_ovr.png"); }
        .sec8 .content.c2 .m_menu li.m2 .in:after {
          background-image: url("../images/m/sec8_manu_2_ovr.png"); }
        .sec8 .content.c2 .m_menu li.m3 .in:after {
          background-image: url("../images/m/sec8_manu_3_ovr.png"); }
        .sec8 .content.c2 .m_menu li.m4 .in:after {
          background-image: url("../images/m/sec8_manu_4_ovr.png"); }
        .sec8 .content.c2 .m_menu li.m5 .in:after {
          background-image: url("../images/m/sec8_manu_5_ovr.png"); }
        .sec8 .content.c2 .m_menu li.select .in:after {
          opacity: 1; }
    .sec8 .content.c2 .box {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 48%;
      border-bottom: 1px solid #b5b5b5;
      padding: 20px 0; }
      @media screen and (max-width: 1366px) {
        .sec8 .content.c2 .box {
          padding: 1.46413vw 0; } }
      @media screen and (max-width: 768px) {
        .sec8 .content.c2 .box {
          border-bottom: none;
          width: 100%; } }
      .sec8 .content.c2 .box.tablet {
        padding-bottom: 30px; }
        @media screen and (max-width: 1366px) {
          .sec8 .content.c2 .box.tablet {
            padding-bottom: 2.19619vw; } }
      .sec8 .content.c2 .box.monitor {
        padding-top: 30px; }
        @media screen and (max-width: 1366px) {
          .sec8 .content.c2 .box.monitor {
            padding-top: 2.19619vw; } }
      .sec8 .content.c2 .box.watch {
        padding: 28px 0px; }
      .sec8 .content.c2 .box.earphone {
        padding: 28px 0px; }
      .sec8 .content.c2 .box.noline {
        border-bottom: none; }
      .sec8 .content.c2 .box.left {
        margin-right: 5%; }
        @media screen and (max-width: 768px) {
          .sec8 .content.c2 .box.left {
            margin-right: 0; } }
    .sec8 .content.c2 .icon {
      width: 20%; }
      .sec8 .content.c2 .icon img {
        width: 63px; }
        @media screen and (max-width: 1366px) {
          .sec8 .content.c2 .icon img {
            width: 4.61201vw; } }
    .sec8 .content.c2 .list {
      width: 70%;
      font-size: 16px;
      color: #000000;
      font-weight: bold;
      line-height: 1.5; }
      @media screen and (max-width: 1366px) {
        .sec8 .content.c2 .list {
          font-size: 1.1713vw; } }
      @media screen and (max-width: 768px) {
        .sec8 .content.c2 .list {
          font-size: 4vw;
          width: 85%;
          line-height: 1.7;
          display: inline-block;
          vertical-align: middle;
          padding-left: 2vw; } }
      .sec8 .content.c2 .list a {
        color: inherit; }
        .sec8 .content.c2 .list a:hover {
          text-decoration: underline; }
      .sec8 .content.c2 .list .ps {
        font-size: 14px;
        color: #757575;
        font-weight: bold; }
        @media screen and (max-width: 1366px) {
          .sec8 .content.c2 .list .ps {
            font-size: 1.02489vw; } }
        @media screen and (max-width: 768px) {
          .sec8 .content.c2 .list .ps {
            font-size: 3.25vw; } }
      .sec8 .content.c2 .list .red {
        font-size: 14px;
        color: #fff;
        font-weight: bold;
        letter-spacing: 2px;
        background-color: #ff4337;
        display: inline-block;
        padding: 0 10px; }
        @media screen and (max-width: 1366px) {
          .sec8 .content.c2 .list .red {
            font-size: 1.02489vw;
            padding: 0 0.73206vw; } }
        @media screen and (max-width: 768px) {
          .sec8 .content.c2 .list .red {
            font-size: 3.625vw;
            padding: 0 2vw; } }
    .sec8 .content.c2 .discount {
      width: 10%;
      font-size: 19px;
      color: #f04b39;
      font-weight: bold; }
      @media screen and (max-width: 1366px) {
        .sec8 .content.c2 .discount {
          font-size: 1.39092vw; } }
      @media screen and (max-width: 768px) {
        .sec8 .content.c2 .discount {
          width: auto;
          display: inline-block;
          font-size: 4.75vw;
          vertical-align: middle; } }
    .sec8 .content.c3 img {
      margin-bottom: 75px; }
      @media screen and (max-width: 1366px) {
        .sec8 .content.c3 img {
          margin-bottom: 5.49048vw; } }
      @media screen and (max-width: 768px) {
        .sec8 .content.c3 img {
          margin-bottom: 6vw; } }
    .sec8 .content.c3 .store {
      position: absolute;
      width: 17.06398%;
      right: 8.5%;
      top: 64%; }
      @media screen and (max-width: 768px) {
        .sec8 .content.c3 .store {
          right: auto;
          left: 28%;
          top: 76%;
          width: 37vw; } }
      .sec8 .content.c3 .store a {
        color: #232323;
        font-size: 18px;
        font-weight: bold;
        border: 1px solid #232323;
        text-align: center;
        padding: 6px 0;
        margin-bottom: 6px; }
        @media screen and (max-width: 1366px) {
          .sec8 .content.c3 .store a {
            font-size: 1.31772vw;
            padding: 0.43924vw 0;
            margin-bottom: 0.43924vw; } }
        @media screen and (max-width: 768px) {
          .sec8 .content.c3 .store a {
            font-size: 4.5vw;
            padding: 2vw 0;
            margin-bottom: 2.5vw; } }
        .sec8 .content.c3 .store a:hover {
          background-color: #232323;
          color: #fff; }
  .sec8 .btnbox {
    max-width: 450px;
    width: 78%;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    @media screen and (max-width: 768px) {
      .sec8 .btnbox {
        width: 80%;
        margin: 4vw auto 0;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; } }
    .sec8 .btnbox a {
      text-align: center;
      position: relative;
      width: 42%; }
      .sec8 .btnbox a:nth-child(1) {
        float: left; }
      .sec8 .btnbox a:nth-child(2) {
        float: right; }
      @media screen and (max-width: 768px) {
        .sec8 .btnbox a {
          width: 47%; } }
  .sec8 .word {
    bottom: 0%;
    left: -3%; }
    @media screen and (max-width: 768px) {
      .sec8 .word {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        left: 44%;
        bottom: -51%; } }
  .sec8 .line_b.p1 {
    bottom: -6%;
    left: -2%; }
  .sec8 .line_b.p2 {
    top: 0%;
    right: -2%; }
  .sec8 .line_s.p1 {
    height: 123px;
    bottom: -5%;
    left: 2%; }
    @media screen and (max-width: 768px) {
      .sec8 .line_s.p1 {
        height: 45vw;
        bottom: -41%;
        left: 93%; } }
  .sec8 .line_s.p2 {
    width: 760px;
    bottom: -5%;
    left: 2%; }
    @media screen and (max-width: 768px) {
      .sec8 .line_s.p2 {
        width: 75vw;
        bottom: -13%;
        left: 30%; } }
  .sec8 .sq {
    width: 604px;
    position: absolute;
    bottom: -12%;
    right: -39%; }
    @media screen and (max-width: 1366px) {
      .sec8 .sq {
        width: 44.21669vw; } }
    @media screen and (max-width: 768px) {
      .sec8 .sq {
        display: none; } }

/* lightbox
--------------------------------------------------------------------------------------*/
.lb {
  z-index: -1;
  opacity: 0;
  position: relative;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  text-align: center; }
  .lb::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%; }

.lbbox {
  width: 100%;
  max-width: 800px;
  margin: auto;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  background: #fff; }
  @media screen and (max-width: 1366px) {
    .lbbox {
      width: 90%; } }
  @media screen and (max-width: 768px) {
    .lbbox {
      width: 90%; } }
  .lbbox .btn_x {
    width: 53px;
    position: absolute;
    top: 2%;
    right: 1%; }
    @media screen and (max-width: 768px) {
      .lbbox .btn_x {
        width: 7vw;
        z-index: 2; } }
  .lbbox .con {
    width: 90%;
    margin: auto;
    padding: 40px 0; }
    @media screen and (max-width: 768px) {
      .lbbox .con {
        top: 40%;
        line-height: 1.5;
        padding: 5vw 0; } }
  .lbbox .title {
    font-size: 45px;
    color: #303030;
    font-weight: bold;
    text-align: center;
    padding-bottom: 30px; }
    @media screen and (max-width: 768px) {
      .lbbox .title {
        font-size: 5.625vw;
        padding-bottom: 3vw; } }
  .lbbox .txt {
    font-size: 19px;
    color: #122b24;
    line-height: 1.7;
    text-align: center;
    font-weight: bold;
    padding-bottom: 30px; }
    .lbbox .txt font {
      color: #ff4337; }
    @media screen and (max-width: 768px) {
      .lbbox .txt {
        font-size: 3.25vw;
        padding-bottom: 5vw; } }
  .lbbox .btnbox {
    width: 36.4%;
    margin: auto; }
    @media screen and (max-width: 768px) {
      .lbbox .btnbox {
        z-index: 2;
        width: 65%; } }

.lb-login-sus .lbbox {
  border: 2px solid #1327a4; }
  .lb-login-sus .lbbox:after {
    content: "";
    display: block;
    width: 7px;
    height: 310px;
    background-color: #1327a4;
    position: absolute;
    top: -14px;
    left: 10px; }
    @media screen and (max-width: 768px) {
      .lb-login-sus .lbbox:after {
        width: 1vw;
        height: 53vw;
        top: -4vw;
        left: 2vw; } }

.lb-login-sus .btnbox.w2 {
  width: 100%;
  max-width: 700px;
  margin: auto;
  text-align: center; }
  .lb-login-sus .btnbox.w2 a {
    width: 30%;
    display: inline-block;
    margin: 0 3%; }
  @media screen and (max-width: 768px) {
    .lb-login-sus .btnbox.w2 {
      z-index: 2;
      width: 100%;
      max-width: none; }
      .lb-login-sus .btnbox.w2 a {
        margin: 0 1%;
        width: 47%; } }

.lb-login-fail .con {
  top: 31%; }
  @media screen and (max-width: 768px) {
    .lb-login-fail .con {
      top: 35%; } }
  .lb-login-fail .con span {
    display: block;
    font-size: 25px;
    color: #122b24;
    font-weight: bold; }
    @media screen and (max-width: 1366px) {
      .lb-login-fail .con span {
        font-size: 1.83016vw; } }
    @media screen and (max-width: 768px) {
      .lb-login-fail .con span {
        font-size: 3vw; } }
  .lb-login-fail .con ul {
    padding: 25px 0 30px; }
    @media screen and (max-width: 768px) {
      .lb-login-fail .con ul {
        padding: 3vw 0 4vw; } }
    .lb-login-fail .con ul li {
      font-size: 25px;
      color: #cc2828;
      font-weight: bold; }
      @media screen and (max-width: 1366px) {
        .lb-login-fail .con ul li {
          font-size: 1.83016vw; } }
      @media screen and (max-width: 768px) {
        .lb-login-fail .con ul li {
          font-size: 3vw; } }
  .lb-login-fail .con p {
    font-size: 25px;
    color: #cc2828;
    font-weight: bold; }
    @media screen and (max-width: 1366px) {
      .lb-login-fail .con p {
        font-size: 1.83016vw; } }
    @media screen and (max-width: 768px) {
      .lb-login-fail .con p {
        font-size: 3.75vw; } }

@media screen and (max-width: 1366px) {
  .lb-video .lbbox {
    width: 80%; } }

@media screen and (max-width: 768px) {
  .lb-video .lbbox {
    width: 90%; } }

.lb-video .btn_x {
  width: 5%;
  top: 0;
  right: -70px; }
  @media screen and (max-width: 1366px) {
    .lb-video .btn_x {
      right: -5.12445vw; } }
  @media screen and (max-width: 1366px) {
    .lb-video .btn_x {
      top: -8vw;
      right: 0;
      width: 7%; } }

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0; }

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.backtop2 {
  width: 100%;
  background: #fff;
  text-align: right;
  padding: 15px 0; }
  @media screen and (max-width: 768px) {
    .backtop2 {
      text-align: center; } }
  .backtop2 p {
    display: inline-block;
    font-size: 13px;
    color: #000;
    cursor: pointer; }
    @media screen and (max-width: 768px) {
      .backtop2 p {
        font-size: mob(22); } }
    .backtop2 p:after {
      display: inline-block;
      content: '';
      width: 12px;
      height: 8px;
      margin-top: -4px;
      margin-left: 5px;
      background: url("../images/btn-gotop2.svg") center center/100% 100% no-repeat;
      vertical-align: middle; }

/* loading -----------------------------------------------------------*/
.loading {
  background: #fff;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  text-align: center; }
  .loading .inner {
    display: inline-block;
    vertical-align: middle; }
  .loading .line {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #c42d30; }
    @media screen and (max-width: 768px) {
      .loading .line {
        width: 3vw;
        height: 3vw; } }
  .loading:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle; }

.loading .line:nth-last-child(1) {
  -webkit-animation: loadingC 0.6s 0.1s linear infinite;
  animation: loadingC 0.6s 0.1s linear infinite; }

.loading .line:nth-last-child(2) {
  -webkit-animation: loadingC 0.6s 0.2s linear infinite;
  animation: loadingC 0.6s 0.2s linear infinite; }

.loading .line:nth-last-child(3) {
  -webkit-animation: loadingC 0.6s 0.3s linear infinite;
  animation: loadingC 0.6s 0.3s linear infinite; }

@-webkit-keyframes loadingC {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

@keyframes loadingC {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

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