@charset "UTF-8";
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, strong, sub, sup, tt, ar, 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%; }

@-webkit-keyframes effects-indexbtn01 { 0% { -webkit-transform: scale(1); transform: scale(1); }
  25% { -webkit-transform: scale(0.95); transform: scale(0.95); }
  50% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1); transform: scale(1); } }

@keyframes effects-indexbtn01 { 0% { -webkit-transform: scale(1); transform: scale(1); }
  25% { -webkit-transform: scale(0.95); transform: scale(0.95); }
  50% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1); transform: scale(1); } }

@-webkit-keyframes effects-indexbtn02 { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  50% { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); } }

@keyframes effects-indexbtn02 { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  50% { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); } }

@-webkit-keyframes effects-indexbtn02-sm { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  50% { -webkit-transform: translateX(-3px); transform: translateX(-3px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); } }

@keyframes effects-indexbtn02-sm { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  50% { -webkit-transform: translateX(-3px); transform: translateX(-3px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); } }

@-webkit-keyframes effects-indexeye { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  50% { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); } }

@keyframes effects-indexeye { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  50% { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); } }

@-webkit-keyframes effects-indexeye-sm { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  50% { -webkit-transform: translateX(-2px); transform: translateX(-2px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); } }

@keyframes effects-indexeye-sm { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  50% { -webkit-transform: translateX(-2px); transform: translateX(-2px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); } }

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

@keyframes effects-opacity { 0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; } }

.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

.animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; }

@-webkit-keyframes fadeInLeft { 0% { opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% { opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInLeft { 0% { opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% { opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }

@-webkit-keyframes fadeInRight { 0% { opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }
  100% { opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInRight { 0% { opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }
  100% { opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }

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

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

.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }

@-webkit-keyframes fadeInDownBig { from { opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  to { opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes fadeInDownBig { from { opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  to { opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; }

@-webkit-keyframes zoomIn { from { opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; }
  100% { opacity: 1; } }

@keyframes zoomIn { from { opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; }
  100% { opacity: 1; } }

.zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; }

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

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

.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }

@-webkit-keyframes bounce { from, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
            transform: translate3d(0, -30px, 0) scaleY(1.1); }
  70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
            transform: translate3d(0, -15px, 0) scaleY(1.05); }
  80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
            transform: translate3d(0, 0, 0) scaleY(0.95); }
  90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02); } }

@keyframes bounce { from, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
            transform: translate3d(0, -30px, 0) scaleY(1.1); }
  70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
            transform: translate3d(0, -15px, 0) scaleY(1.05); }
  80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
            transform: translate3d(0, 0, 0) scaleY(0.95); }
  90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02); } }

.bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; }

@-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }
  40% { -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }
  60% { -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  80% { -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  to { -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }

@keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }
  40% { -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }
  60% { -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  80% { -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  to { -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }

.swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; }

body { font-family: "Noto Sans TC", "微軟正黑體", sans-serif; color: #222222; margin: 0 auto; font-weight: 400; line-height: 1.2; position: relative; overflow-x: hidden; background: url("../images/common/bg.jpg"), #ecedf0; background-size: auto; background-repeat: repeat; background-position: left top 15px; padding-top: 122px; }

@media (max-width: 1699px) { body { padding-top: 110px; } }

@media (max-width: 1399px) { body { padding-top: 85px; } }

@media (max-width: 991px) { body { padding-top: 62px; } }

select, button, textarea, input { font-family: "Noto Sans TC", "微軟正黑體", sans-serif; outline: none; }

* { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

table { border-collapse: collapse; }

a, a:focus { cursor: pointer; text-decoration: none; -webkit-transition: color 300ms; transition: color 300ms; }

a:active { outline: none; }

img { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; max-width: 100%; }

.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }

@media (min-width: 768px) { .container { width: 750px; padding-right: 0px; padding-left: 0px; } }

@media (min-width: 992px) { .container { width: 970px; } }

@media (min-width: 1200px) { .container { width: 1140px; } }

@media (min-width: 1400px) { .container { width: 1350px; } }

.container--sm { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }

@media (min-width: 768px) { .container--sm { width: 750px; padding-right: 0px; padding-left: 0px; } }

@media (min-width: 992px) { .container--sm { width: 970px; } }

@media (min-width: 1200px) { .container--sm { width: 1140px; } }

.navbar { position: absolute; top: 0; left: 0; z-index: 1030; width: 100%; background: url("../images/common/navbar-bg.png"); background-size: auto; background-repeat: no-repeat; background-position: left 18% top; }

@media (max-width: 1699px) { .navbar { background-size: 110px auto; background-position: left 15% top; } }

@media (max-width: 991px) { .navbar { position: fixed; } }

@media (max-width: 991px) { .navbar--active .navbar__toggle-item:first-child { top: 17px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
  .navbar--active .navbar__toggle-item:nth-child(2) { display: none; }
  .navbar--active .navbar__toggle-item:last-child { top: 17px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } }

.navbar--active .navbar__overlay { display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 2; }

@media (max-width: 991px) { .navbar--active .navbar__body { top: 62px; } }

.navbar__hidden { display: none; }

.navbar__block { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-left: 75px; padding-right: 75px; }

@media (max-width: 1699px) { .navbar__block { padding-left: 15px; padding-right: 15px; } }

@media (max-width: 991px) { .navbar__head { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; min-height: 43px; z-index: 11; padding-top: 11px; padding-bottom: 11px; position: relative; }
  .navbar__head::before { content: ""; display: block; width: calc(100% + 30px); margin-left: -15px; margin-right: -15px; height: 62px; background: url("../images/common/navbar-bg.png"), #005bab; background-size: auto; background-repeat: no-repeat; background-position: left 30% top -10px; position: absolute; top: 0; left: 0; z-index: 2; } }

@media (max-width: 767px) { .navbar__head::before { background-size: 120px auto; background-position: right 15% top; } }

.navbar__logo { position: relative; z-index: 5; display: inline-block; width: 206px; }

@media (max-width: 1199px) { .navbar__logo { width: 190px; } }

@media (max-width: 374px) { .navbar__logo { width: 140px; } }

.navbar__logo img { width: 100%; max-width: 100%; display: block; }

.navbar__toggle { width: 30px; height: 40px; cursor: pointer; position: relative; z-index: 5; display: none; }

@media (max-width: 991px) { .navbar__toggle { display: block; } }

.navbar__toggle-item { display: block; width: 30px; height: 2px; background: #ffffff; position: absolute; top: 9px; left: 0; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; }

.navbar__toggle-item:nth-child(2) { top: 20px; }

.navbar__toggle-item:last-child { top: 32px; }

.navbar__body { padding-top: 25px; padding-bottom: 25px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

@media (max-width: 1399px) { .navbar__body { padding-top: 20px; padding-bottom: 15px; } }

@media (max-width: 991px) { .navbar__body { position: absolute; top: -100vh; right: 0; z-index: 3; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; background: #005bab; overflow-x: hidden; overflow-y: auto; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-height: calc(100vh - 100px); border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 0 0 10px 0; }
  .navbar__body::before { display: none; } }

.navbar__links { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 1; }

@media (max-width: 991px) { .navbar__links { -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; } }

.navbar__link { display: block; position: relative; height: 72px; margin-left: 8px; margin-right: 8px; text-indent: -9999px; }

@media (max-width: 1699px) { .navbar__link { height: 60px; } }

@media (max-width: 1399px) { .navbar__link { height: 48px; } }

@media (max-width: 1199px) { .navbar__link { height: 40px; margin-left: 4px; margin-right: 4px; } }

@media (max-width: 991px) { .navbar__link { width: 100%; height: 45px; margin-top: 10px; margin-left: 0; margin-right: 0; } }

@media (max-width: 374px) { .navbar__link { height: 35px; } }

.navbar__link--1 { background-image: url("../images/common/navbar-img_1-1.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.navbar__link--1:hover { background-image: url("../images/common/navbar-img_1-2.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.navbar__link--2 { background-image: url("../images/common/navbar-img_2-1.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.navbar__link--2:hover { background-image: url("../images/common/navbar-img_2-2.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.navbar__link--3 { background-image: url("../images/common/navbar-img_3-1.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.navbar__link--3:hover { background-image: url("../images/common/navbar-img_3-2.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.navbar__link--4 { background-image: url("../images/common/navbar-img_4-1.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.navbar__link--4:hover { background-image: url("../images/common/navbar-img_4-2.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.navbar__link--5 { background-image: url("../images/common/navbar-img_5-1.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.navbar__link--5:hover { background-image: url("../images/common/navbar-img_5-2.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.navbar__link--6 { background-image: url("../images/common/navbar-img_6-1.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.navbar__link--6:hover { background-image: url("../images/common/navbar-img_6-2.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.navbar__link--7 { background-image: url("../images/common/navbar-img_7-1.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.navbar__link--7:hover { background-image: url("../images/common/navbar-img_7-2.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.navbar__link::before { content: ""; display: inline-block; width: 7px; height: 30px; background-image: url("../images/common/navbar-link-bg.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: center top; position: absolute; top: calc(50% - 15px); left: -12px; }

@media (max-width: 1199px) { .navbar__link::before { width: 4px; height: 20px; top: calc(50% - 10px); left: -7px; } }

@media (max-width: 991px) { .navbar__link::before { width: 7px; height: 30px; top: -18px; left: calc(50% - 7px); -webkit-transform: rotate(90deg); transform: rotate(90deg); } }

@media (min-width: 992px) { .navbar__link--1 { width: 62px; }
  .navbar__link--2 { width: 111px; }
  .navbar__link--3, .navbar__link--4 { width: 111px; }
  .navbar__link--5, .navbar__link--7 { width: 108px; }
  .navbar__link--6 { width: 118px; } }

@media (min-width: 1200px) { .navbar__link--1 { width: 73px; }
  .navbar__link--2 { width: 131px; }
  .navbar__link--3, .navbar__link--4 { width: 132px; }
  .navbar__link--5, .navbar__link--7 { width: 129px; }
  .navbar__link--6 { width: 139px; } }

@media (min-width: 1400px) { .navbar__link--1 { width: 91px; }
  .navbar__link--2 { width: 163px; }
  .navbar__link--3, .navbar__link--4 { width: 164px; }
  .navbar__link--5, .navbar__link--7 { width: 161px; }
  .navbar__link--6 { width: 173px; } }

@media (min-width: 1700px) { .navbar__link--1 { width: 108px; }
  .navbar__link--2 { width: 193px; }
  .navbar__link--3, .navbar__link--4 { width: 194px; }
  .navbar__link--5, .navbar__link--7 { width: 192px; }
  .navbar__link--6 { width: 205px; } }

.navbar__link:first-child { margin-left: 0; }

@media (max-width: 991px) { .navbar__link:first-child { margin-top: 0; } }

.navbar__link:first-child::before { display: none; }

.navbar__link:last-child { margin-right: 0; }

.navbar__link:last-child::before { display: none; }

.navbar__socials { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 30px; }

@media (max-width: 1399px) { .navbar__socials { margin-left: 15px; } }

@media (max-width: 1199px) { .navbar__socials { margin-left: 5px; } }

@media (max-width: 991px) { .navbar__socials { margin-left: 0; margin-top: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } }

.navbar__social { display: inline-block; width: 50px; height: 50px; margin-left: 8px; border-radius: 15px; overflow: hidden; text-indent: -9999px; }

@media (max-width: 1199px) { .navbar__social { -webkit-transform: scale(0.8); transform: scale(0.8); margin-left: 0; } }

@media (max-width: 991px) { .navbar__social { margin-left: 0; margin-top: 10px; -webkit-transform: scale(1); transform: scale(1); } }

.navbar__social:hover { -webkit-box-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff; box-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff; }

.navbar__social:first-child { margin-left: 0; }

@media (max-width: 991px) { .navbar__social:first-child { margin-top: 0; } }

.navbar__social.ig { background-size: 150px 150px; background-repeat: no-repeat; background-image: url("../images/icon.png?0506"); background-position: 0 0; }

.navbar__social.fb { background-size: 150px 150px; background-repeat: no-repeat; background-image: url("../images/icon.png?0506"); background-position: -50px 0; }

.footer { background-color: #005bab; padding: 40px 0; }

@media (max-width: 767px) { .footer { padding: 20px 0; } }

.footer__text { font-size: 1em; font-weight: 400; color: white; line-height: 1.4; text-align: center; }

@media (max-width: 360px) { .footer__text { font-size: 0.875em; } }

.footer__text .show--sm { display: none; }

@media (max-width: 767px) { .footer__text .show--sm { display: block; } }

/* lightbox */
.pop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1050; overflow: auto; }

.pop__backup { background-color: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1; }

.pop__con { position: absolute; top: 50%; left: 0; right: 0; margin: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 10; text-align: center; width: 1350px; }

@media (max-width: 1399px) { .pop__con { width: 1140px; } }

@media (max-width: 1199px) { .pop__con { width: 970px; } }

@media (max-width: 991px) { .pop__con { width: 750px; } }

@media (max-width: 767px) { .pop__con { width: 100%; padding: 0 15px; } }

.pop__con-close { position: absolute; top: -45px; right: 30px; z-index: 10; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; cursor: pointer; }

@media (max-width: 480px) { .pop__con-close { right: 15px; } }

.pop__con-close:hover { -webkit-transform: scale(1.03); transform: scale(1.03); }

.pop__con-shine { position: absolute; top: 50%; left: 0; right: 0; margin: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; text-align: center; }

.pop__con-pic { position: relative; z-index: 5; width: 378px; margin: 0 auto; }

@media (max-width: 480px) { .pop__con-pic { width: 220px; } }

.pop__con-info1 { position: absolute; left: -145px; top: 55px; }

@media (max-width: 767px) { .pop__con-info1 { left: -20px; top: -45px; } }

@media (max-width: 480px) { .pop__con-info1 { left: -30px; top: -55px; width: 185px; } }

.pop__con-point { position: absolute; bottom: 22px; right: -15px; }

@media (max-width: 767px) { .pop__con-point { bottom: -50px; right: 35%; } }

@media (max-width: 480px) { .pop__con-point { bottom: -40px; width: 40px; } }

.pop__con-info2 { position: absolute; right: -250px; bottom: 65px; }

@media (max-width: 991px) { .pop__con-info2 { right: -55px; bottom: -80px; } }

@media (max-width: 767px) { .pop__con-info2 { right: -30px; bottom: -80px; } }

.pop__con-decora { position: absolute; top: -25px; right: -10px; }

@media (max-width: 767px) { .pop__con-decora { top: 0px; right: -35px; width: 180px; } }

@media (max-width: 480px) { .pop__con-decora { top: auto; right: 0; bottom: 0; } }

.pop.pop__notcie { display: block; }

.pop.pop__notcie .pop__con-pic { width: auto; max-width: 190%; }

.tab { background: url("../images/winning/tab-bg.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; min-height: 770px; padding-top: 110px; }

@media (max-width: 1199px) { .tab { background-size: 100% 100%; padding-left: 30px; padding-right: 30px; min-height: 720px; } }

@media (max-width: 767px) { .tab { background: #fff; padding: 30px 5px; border-radius: 50px; margin-top: 20px; } }

.tab__head { width: 900px; margin-left: auto; margin-right: auto; text-align: center; }

@media (max-width: 1199px) { .tab__head { width: 100%; } }

.tab__head-item { display: inline-block; vertical-align: top; padding-left: 30px; padding-right: 30px; }

@media (max-width: 767px) { .tab__head-item { padding-left: 5px; padding-right: 5px; } }

.tab__head-item:first-child { padding-left: 0; }

.tab__head-item:last-child { padding-right: 0; }

.tab__head-item.active .tab__head-title { background: #fcd043; }

.tab__head-item.disable .tab__head-title { cursor: not-allowed; }

.tab__head-title { font-size: 1.5625em; font-weight: 700; color: #333333; background: #fff; border: 2px solid #fcd043; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5px 15px; border-radius: 5px; cursor: pointer; }

@media (max-width: 1199px) { .tab__head-title { font-size: 1.375em; } }

@media (max-width: 767px) { .tab__head-title { font-size: 1.125em; } }

@media (max-width: 374px) { .tab__head-title { font-size: 1em; } }

.tab__head-title::before { content: ""; display: block; width: 14px; height: 10px; background-size: 150px 150px; background-repeat: no-repeat; background-image: url("../images/icon.png?0506"); background-position: 0 -50px; margin-right: 10px; }

.tab__head-text { font-size: 1.25em; font-weight: 700; color: #a6a6a6; margin-top: 10px; }

@media (max-width: 1199px) { .tab__head-text { font-size: 1.125em; } }

@media (max-width: 767px) { .tab__head-text { font-size: 1em; } }

@media (max-width: 374px) { .tab__head-text { font-size: 0.875em; } }

.tab__body { width: 900px; margin-left: auto; margin-right: auto; padding-top: 25px; }

@media (max-width: 1199px) { .tab__body { width: 100%; } }

@media (max-width: 767px) { .tab__body { padding-top: 10px; } }

.tab__body-item { display: none; }

.index { position: relative; background: url("../images/index/index-bg.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: center bottom; height: 1317px; padding-left: 29%; overflow: hidden; }

@media (max-width: 1699px) { .index { padding-left: 24%; } }

@media (max-width: 1399px) { .index { padding-left: 15%; } }

@media (max-width: 1199px) { .index { padding-left: 22%; padding-top: 30px; height: 980px; } }

@media (max-width: 991px) { .index { padding-left: 5%; } }

@media (max-width: 768px) { .index { padding-left: 2%; } }

@media (max-width: 767px) { .index { height: auto; padding-top: 20px; padding-left: 0; padding-bottom: 270px; } }

@media (max-width: 480px) { .index { padding-bottom: 160px; } }

.index::before { content: ""; display: block; width: 100%; height: 1317px; position: absolute; top: 0; left: 0; z-index: 1; background: url("../images/index/index-bg02.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: center bottom; -webkit-animation: effects-indexeye 0.5s ease infinite; animation: effects-indexeye 0.5s ease infinite; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; }

@media (max-width: 1199px) { .index::before { height: 980px; } }

@media (max-width: 767px) { .index::before { -webkit-animation: effects-indexeye-sm 1.2s ease infinite; animation: effects-indexeye-sm 1.2s ease infinite; height: 100%; } }

.index::after { content: ""; display: block; width: 100%; height: 1317px; position: absolute; top: 0; left: 0; z-index: 1; background: url("../images/index/index-bg03.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: center bottom; opacity: 0; -webkit-animation: effects-opacity 0.5s ease infinite; animation: effects-opacity 0.5s ease infinite; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }

@media (max-width: 1199px) { .index::after { height: 980px; } }

@media (max-width: 767px) { .index::after { opacity: 1; -webkit-animation: none; animation: none; height: 100%; -webkit-animation: effects-opacity 0.8s ease infinite; animation: effects-opacity 0.8s ease infinite; } }

.index__role { position: fixed; right: 0; z-index: 5; top: 510px; width: 205px; z-index: 5; display: block; -webkit-transition: width .3s; transition: width .3s; }

@media (max-width: 767px) { .index__role { width: 150px; } }

@media (max-width: 767px) { .index__role { top: auto; bottom: 2%; } }

@media (max-width: 480px) { .index__role { width: 110px; bottom: 5%; right: -10px; } }

.index__role:hover { width: 215px; }

@media (max-width: 767px) { .index__role:hover { width: 160px; } }

@media (max-width: 480px) { .index__role:hover { width: 120px; } }

.index__role-pic { width: 100%; height: 0; padding-bottom: 104%; background-image: url("../images/index/seagull.png"); background-size: cover; display: block; }

.index__block { position: relative; display: inline-block; z-index: 2; }

@media (max-width: 767px) { .index__block { display: block; text-align: center; } }

.index__img { display: block; width: 589px; height: 549px; background: url("../images/index/index-img.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: center top; position: absolute; top: 40px; right: -520px; z-index: 3; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; }

@media (max-width: 1199px) { .index__img { width: 320px; background-size: auto 100%; background-position: left top; height: 419px; right: -270px; } }

@media (max-width: 767px) { .index__img { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; position: relative; top: auto; right: auto; margin-left: auto; margin-right: auto; margin-top: 20px; } }

@media (max-width: 480px) { .index__img { width: 220px; height: 280px; } }

.index__title { width: 560px; height: 338px; background: url("../images/index/index-title.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: center top; text-indent: -9999px; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }

@media (max-width: 1199px) { .index__title { width: 460px; height: 278px; } }

@media (max-width: 767px) { .index__title { -webkit-animation-delay: 0s; animation-delay: 0s; margin: 0 auto; } }

@media (max-width: 480px) { .index__title { width: 310px; height: 187px; } }

.index__text { width: 562px; height: 170px; background: url("../images/index/index-text.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: center top; text-indent: -9999px; margin-top: 10px; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; }

@media (max-width: 1199px) { .index__text { width: 450px; height: 136px; } }

@media (max-width: 767px) { .index__text { -webkit-animation-delay: 1s; animation-delay: 1s; margin-left: auto; margin-right: auto; } }

@media (max-width: 480px) { .index__text { width: 360px; height: 109px; max-width: 100%; } }

.index__btn { width: 318px; height: 90px; background: url("../images/index/index-btn01.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: center top; text-indent: -9999px; display: inline-block; margin-top: 15px; margin-left: 200px; position: relative; -webkit-animation: effects-indexbtn01 1.5s ease infinite; animation: effects-indexbtn01 1.5s ease infinite; -webkit-animation-delay: 3.5s; animation-delay: 3.5s; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-box-shadow; transition-property: -webkit-box-shadow; transition-property: box-shadow; transition-property: box-shadow, -webkit-box-shadow; border-radius: 45px; overflow: hidden; }

@media (max-width: 1199px) { .index__btn { width: 250px; height: 71px; } }

@media (max-width: 767px) { .index__btn { margin-left: 0; } }

@media (max-width: 480px) { .index__btn { width: 180px; height: 51px; } }

.index__btn::before { content: ""; display: block; width: 100%; height: 100%; background: url("../images/index/index-btn02.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: center top; position: absolute; top: 0; left: 0; z-index: 1; }

@media (max-width: 767px) { .index__btn::before { -webkit-animation: effects-indexbtn02-sm 1.5s ease infinite; animation: effects-indexbtn02-sm 1.5s ease infinite; } }

@media (min-width: 768px) { .index__btn:hover { -webkit-animation-play-state: paused; animation-play-state: paused; }
  .index__btn:hover::before { -webkit-animation: effects-indexbtn02 1s ease infinite; animation: effects-indexbtn02 1s ease infinite; } }

.index__btn-block { -webkit-animation-delay: 3.2s; animation-delay: 3.2s; }

@media (max-width: 767px) { .index__btn-block { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; } }

.act { background-color: #cfeaf2; }

.act__title { text-align: center; max-width: 90%; margin: 0 auto; }

.act-detail { margin-top: -475px; position: relative; z-index: 1; }

@media (max-width: 1699px) { .act-detail { margin-top: -400px; } }

@media (max-width: 1500px) { .act-detail { margin-top: -320px; } }

@media (max-width: 1300px) { .act-detail { margin-top: -280px; } }

@media (max-width: 991px) { .act-detail { margin-top: -170px; } }

@media (max-width: 767px) { .act-detail { margin-top: -110px; padding-top: 20px; } }

@media (max-width: 480px) { .act-detail { margin-top: -70px; } }

.act-detail__con { position: relative; padding: 0 170px; }

@media (max-width: 991px) { .act-detail__con { padding: 0 20px; } }

@media (max-width: 767px) { .act-detail__con { padding: 20px; background-color: white; border-radius: 20px; margin-top: 10px; } }

.act-detail__con:after { content: ''; display: block; background-image: url("../images/index/act-detail-bg.png"); background-size: contain; background-position: center; background-repeat: no-repeat; width: 100%; height: 0; padding-bottom: 58%; position: absolute; top: -60px; left: 0; right: 0; margin: auto; z-index: 0; }

@media (max-width: 1199px) { .act-detail__con:after { padding-bottom: 65%; } }

@media (max-width: 767px) { .act-detail__con:after { display: none; } }

.act-detail__info { position: relative; z-index: 2; margin-top: 40px; }

@media (max-width: 767px) { .act-detail__info { margin-top: 0; } }

.act-detail__info-lists { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin-top: 20px; }

@media (max-width: 480px) { .act-detail__info-lists { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 12px; } }

.act-detail__info-lists:nth-child(1) { margin-top: 0; }

.act-detail__info-head { font-size: 1.25em; font-weight: 700; color: #333333; width: 120px; margin-right: 25px; padding: 3px 0; text-align: center; background-color: #fcd043; border-radius: 5px; }

@media (max-width: 991px) { .act-detail__info-head { font-size: 1.125em; padding: 4px 0 2px; } }

@media (max-width: 767px) { .act-detail__info-head { width: 105px; margin-right: 15px; } }

.act-detail__info-body { width: calc(100% - 145px); }

@media (max-width: 480px) { .act-detail__info-body { width: 100%; margin-top: 6px; } }

.act-detail__info-text { font-size: 1.25em; font-weight: 500; color: #333333; line-height: 1.4; }

@media (max-width: 991px) { .act-detail__info-text { font-size: 1em; } }

.act-detail__info-sub { list-style: none; }

.act-detail__info-sublist { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1.25em; font-weight: 500; color: #333333; line-height: 1.4; }

@media (max-width: 991px) { .act-detail__info-sublist { font-size: 1em; } }

.act-detail__info-sublist__head { width: 80px; }

@media (max-width: 991px) { .act-detail__info-sublist__head { width: 70px; } }

.act-detail__info-sublist__head::after { content: ''; display: inline-block; vertical-align: middle; margin: -2px 0px 0 5px; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fcd043; }

.act-detail__info-sublist__body { width: calc( 100% - 75px); }

@media (max-width: 991px) { .act-detail__info-sublist__body { width: calc( 100% - 66px); } }

.act-detail__time { position: relative; z-index: 2; margin-top: 35px; }

@media (max-width: 991px) { .act-detail__time { margin-top: 20px; } }

@media (max-width: 480px) { .act-detail__time { margin-top: 12px; } }

.act-detail__time-title { font-size: 1.25em; font-weight: 700; color: #333333; background-color: #fcd043; border-radius: 5px; text-align: center; padding: 4px 0; }

@media (max-width: 991px) { .act-detail__time-title { font-size: 1.125em; padding: 4px 0 2px; } }

.act-detail__time-con { padding: 0 35px; }

@media (max-width: 767px) { .act-detail__time-con { padding: 0 24px; } }

@media (max-width: 480px) { .act-detail__time-con { padding: 0; } }

.act-detail__time-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 25px; }

@media (max-width: 991px) { .act-detail__time-list { margin-top: 18px; } }

@media (max-width: 480px) { .act-detail__time-list { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 12px; } }

.act-detail__time-head { font-size: 1.25em; font-weight: 700; color: #e99a01; width: 80px; margin-right: 30px; }

@media (max-width: 991px) { .act-detail__time-head { font-size: 1.125em; } }

@media (max-width: 767px) { .act-detail__time-head { margin-right: 15px; } }

.act-detail__time-body { width: calc(100% - 110px); }

@media (max-width: 480px) { .act-detail__time-body { width: 100%; margin-top: 8px; } }

.act-detail__time-sub { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; }

.act-detail__time-sub--line { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; height: 2px; background-color: #d3d3d4; z-index: 1; }

.act-detail__time-sublist { width: 125px; margin: 0 52px; text-align: center; position: relative; z-index: 2; }

@media (max-width: 767px) { .act-detail__time-sublist { width: 50%; margin: 0 10px; } }

.act-detail__time-text { font-size: 1.25em; font-weight: 400; color: #333333; }

@media (max-width: 991px) { .act-detail__time-text { font-size: 1.125em; } }

@media (max-width: 767px) { .act-detail__time-text { font-size: 1em; } }

.act-detail__time-circle { width: 15px; height: 15px; background-color: #f8b73d; border-radius: 99em; display: block; margin: 8px auto; position: relative; }

@media (max-width: 480px) { .act-detail__time-circle { margin: 4px auto; } }

.act-detail__time-circle:before { content: ''; display: block; width: 7px; height: 7px; background-color: white; border-radius: 99em; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

.act-detail__time-date { font-size: 1.25em; font-weight: 700; color: #e85298; }

@media (max-width: 991px) { .act-detail__time-date { font-size: 1.125em; } }

.act-detail__time-bottom { font-size: 0.9375em; font-weight: 400; color: #333333; margin-top: 28px; }

@media (max-width: 991px) { .act-detail__time-bottom { margin-top: 15px; } }

@media (max-width: 767px) { .act-detail__time-bottom { margin-top: 12px; font-size: 0.875em; } }

.act-gift { margin-top: 170px; }

@media (max-width: 1199px) { .act-gift { margin-top: 95px; } }

@media (max-width: 991px) { .act-gift { margin-top: 75px; } }

@media (max-width: 767px) { .act-gift { margin-top: 55px; } }

@media (max-width: 480px) { .act-gift { margin-top: 45px; } }

.act-gift__con { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0 205px; width: 100%; position: relative; }

@media (max-width: 1199px) { .act-gift__con { padding: 0 125px; } }

@media (max-width: 991px) { .act-gift__con { padding: 0 20px; } }

@media (max-width: 767px) { .act-gift__con { padding: 20px; background-color: white; border-radius: 20px; margin-top: 10px; text-align: center; } }

@media (max-width: 360px) { .act-gift__con { padding: 10px; } }

.act-gift__con:after { content: ''; display: block; background-image: url("../images/index/act-gift-bg.png"); background-size: contain; background-position: center; background-repeat: no-repeat; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 100%; height: 0; padding-bottom: 19%; }

@media (max-width: 1199px) { .act-gift__con:after { padding-bottom: 23%; } }

@media (max-width: 991px) { .act-gift__con:after { padding-bottom: 29%; } }

@media (max-width: 767px) { .act-gift__con:after { display: none; } }

.act-gift__info { position: relative; z-index: 2; width: calc( 100% - 191px); margin-top: 55px; }

@media (max-width: 767px) { .act-gift__info { width: calc( 100% - 110px); margin-top: 20px; } }

@media (max-width: 480px) { .act-gift__info { width: 100%; } }

.act-gift__pic { position: relative; z-index: 2; width: 191px; margin: -35px 0 0 -35px; }

@media (max-width: 767px) { .act-gift__pic { margin: 0; width: 110px; } }

@media (max-width: 480px) { .act-gift__pic { width: 130px; margin: 12px auto 0; } }

.act-gift__text { font-size: 1.25em; font-weight: 400; color: #333333; display: inline-block; vertical-align: middle; }

@media (max-width: 767px) { .act-gift__text { font-size: 1em; } }

@media (max-width: 360px) { .act-gift__text { font-size: 1em; } }

.act-gift__text--mark { background-color: #333333; border-radius: 99em; color: white; padding: 2px 16px; margin-left: 3px; }

@media (max-width: 767px) { .act-gift__text--mark { padding: 2px 8px; } }

.act-gift__quota { font-size: 1.25em; font-weight: 700; color: #e85298; display: inline-block; vertical-align: middle; margin-top: -20px; }

@media (max-width: 767px) { .act-gift__quota { margin-top: -5px; display: block; } }

@media (max-width: 480px) { .act-gift__quota { margin-top: 0px; font-size: 1.125em; } }

.act-gift__quota:before { content: ''; display: inline-block; vertical-align: middle; margin: -2px 0px 0 5px; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fcd043; }

@media (max-width: 767px) { .act-gift__quota:before { margin: -2px 0px 0 0px; } }

.act-gift__quota--mark { font-size: 2.25em; display: inline-block; -webkit-transform: translateY(8px); transform: translateY(8px); }

@media (max-width: 480px) { .act-gift__quota--mark { font-size: 1.875em; -webkit-transform: translateY(5px); transform: translateY(5px); } }

.act-gift__bottom { font-size: 0.9375em; font-weight: 400; color: #333333; display: block; width: 100%; text-align: center; margin-top: 15px; }

@media (max-width: 767px) { .act-gift__bottom { margin-top: 12px; } }

@media (max-width: 480px) { .act-gift__bottom { margin-top: 6px; } }

.act-method { margin-top: 50px; padding-bottom: 150px; }

@media (max-width: 767px) { .act-method { padding-bottom: 75px; } }

@media (max-width: 480px) { .act-method { padding-bottom: 30px; margin-top: 45px; } }

.act-method__con { margin-top: 20px; }

@media (max-width: 767px) { .act-method__con { margin-top: 10px; } }

.act-method__lists { padding-left: 18px; }

.act-method__list { font-size: 1.125em; font-weight: 500; color: #5b5e65; line-height: 1.4; margin-top: 6px; }

@media (max-width: 767px) { .act-method__list { font-size: 1em; } }

@media (max-width: 480px) { .act-method__list { margin-top: 4px; font-size: 0.9375em; } }

.act-method__title { margin-top: 40px; font-size: 1.125em; font-weight: 700; color: #22459b; }

@media (max-width: 767px) { .act-method__title { margin-top: 20px; } }

.act-method__text { font-size: 1.125em; font-weight: 500; color: #5b5e65; line-height: 1.4; margin-top: 6px; }

@media (max-width: 767px) { .act-method__text { font-size: 1em; } }

@media (max-width: 480px) { .act-method__text { margin-top: 4px; font-size: 0.9375em; } }

.album { position: relative; }

.album .title { background: url("../images/common/title-album.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.album__block { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: calc( 100% + 24px); margin-left: -12px; margin-right: -12px; margin-top: 40px; -ms-flex-wrap: wrap; flex-wrap: wrap; }

@media (max-width: 991px) { .album__block { margin-top: 30px; } }

@media (max-width: 480px) { .album__block { width: calc( 100% + 10px); margin-left: -5px; margin-right: -5px; } }

.album__item { width: calc(20% - 54px); margin-left: 12px; margin-right: 12px; background: white; padding: 12px; -webkit-box-shadow: 0 0 18px #007fab; box-shadow: 0 0 18px #007fab; margin-top: 24px; height: 440px; position: relative; }

.album__item:nth-child(1) { margin-top: 0; }

.album__item:nth-child(2) { margin-top: 0; }

.album__item:nth-child(3) { margin-top: 0; }

.album__item:nth-child(4) { margin-top: 0; }

.album__item:nth-child(5) { margin-top: 0; }

@media (max-width: 991px) { .album__item { width: calc(33.33% - 24px); }
  .album__item:nth-child(4), .album__item:nth-child(5) { width: calc(50% - 24px); margin-top: 24px; } }

@media (max-width: 767px) { .album__item { width: calc(50% - 24px); }
  .album__item:nth-child(3) { margin-top: 24px; }
  .album__item:last-child { width: 100%; } }

@media (max-width: 480px) { .album__item { width: 100%; margin-left: 5px; margin-right: 5px; margin-top: 10px; }
  .album__item:nth-child(2), .album__item:nth-child(3) { margin-top: 10px; }
  .album__item:nth-child(4), .album__item:nth-child(5) { margin-top: 10px; }
  .album__item:nth-child(1) { width: 100%; }
  .album__item:nth-child(2) { width: 100%; }
  .album__item:nth-child(3) { width: 100%; }
  .album__item:nth-child(4) { width: 100%; } }

.album__item-img { width: 100%; height: 440px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; right: 0; padding: 1px; text-align: center; }

.album__item-img img { max-height: 100%; padding: 15px; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; right: 0; margin: auto; }

.form { position: relative; }

.form .title { background: url("../images/common/title-form.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.form__block { width: 570px; margin: 0 auto; padding: 20px 0 35px; }

@media (max-width: 991px) { .form__block { width: 530px; } }

@media (max-width: 767px) { .form__block { width: 100%; padding: 20px 15px 35px; } }

.form__lists { margin-top: 15px; }

@media (max-width: 480px) { .form__lists { margin-top: 12px; } }

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

.form__list-shape { color: #005bac; width: 20px; text-align: center; }

.form__list-text { font-size: 0.9375em; font-weight: 700; color: #005bac; width: calc( 100% - 20px); line-height: 1.5; }

@media (max-width: 480px) { .form__list-text { font-size: 0.875em; } }

.form__btn { max-width: 100%; width: 270px; height: 50px; margin: 22px auto 0; border: none; background-color: #00b4ed; border-radius: 6px; font-size: 1.125em; font-weight: 700; color: white; letter-spacing: 5px; cursor: pointer; -webkit-transition: background-color .3s; transition: background-color .3s; }

.form__btn:hover { background-color: #08c3ff; }

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

.form__row .form__item:nth-child(1) { margin-right: 20px; }

@media (max-width: 767px) { .form__row .form__item:nth-child(1) { margin-right: 0; } }

.form__item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-top: 18px; }

@media (max-width: 767px) { .form__item { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; width: 100%; } }

@media (max-width: 480px) { .form__item { margin-top: 12px; } }

@media (max-width: 767px) { .form__item.hide-767 { display: none; } }

.form__label { font-size: 1em; font-weight: 700; color: #333333; margin-bottom: 10px; display: block; }

@media (max-width: 480px) { .form__label { margin-bottom: 6px; } }

.form__input { width: 100%; height: 48px; border: solid 1px #e1e2e4; border-radius: 4px; background-color: #f5f6f7; padding: 8px 12px; -webkit-transition: border .3s; transition: border .3s; font-size: 1em; font-weight: 700; color: #333; }

.form__input:focus, .form__input.active { border: solid 1px #22459b; }

.form__input.error { border: solid 1px red; background-color: white; }

.form__radio { display: none; }

.form__radio:not(:disabled) ~ label { cursor: pointer; }

.form__radio-label { display: block; float: left; width: 50%; height: 48px; line-height: 48px; background-color: #f5f6f7; border: solid 1px #e1e2e4; font-size: 1.125em; font-weight: 500; color: #a5a5a5; text-align: center; }

@media (max-width: 480px) { .form__radio-label { font-size: 1em; } }

.form__radio-label.border-left { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }

.form__radio-label.border-right { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.form__radio:checked + .form__radio-label { background-color: #22459b; border: solid 1px #22459b; color: white; }

.form__select { width: 100%; height: 48px; border: solid 1px #e1e2e4; border-radius: 4px; background-color: #f5f6f7; padding: 8px; -webkit-transition: border .3s; transition: border .3s; font-size: 1em; font-weight: 700; color: #333; }

.form__select:focus, .form__select.active { border: solid 1px #22459b; }

.form__address { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.form__address-item:nth-child(1), .form__address-item:nth-child(2) { width: 127.5px; }

@media (max-width: 767px) { .form__address-item:nth-child(1), .form__address-item:nth-child(2) { width: calc(50% - 8px); } }

.form__address-item:nth-child(1) { margin-right: 20px; }

@media (max-width: 767px) { .form__address-item:nth-child(1) { margin-right: 16px; } }

.form__address-item:nth-child(3) { margin-left: 20px; width: calc(100% - 295px); }

@media (max-width: 767px) { .form__address-item:nth-child(3) { margin-left: 0; margin-top: 10px; width: 100%; } }

.form__check { padding-left: 20px; }

.form__checkbox { display: none; }

.form__checkbox:checked + .form__checklabel::after { content: "\f00c"; font-family: FontAwesome; display: block; width: 18px; height: 18px; font-size: 1.125em; color: #22459b; position: absolute; left: -18px; top: 2px; z-index: 2; }

@media (max-width: 374px) { .form__checkbox:checked + .form__checklabel::after { left: -16px; } }

.form__checklabel { position: relative; cursor: pointer; text-align: left; padding-left: 6px; }

.form__checklabel::before { content: ""; display: inline-block; width: 20px; height: 20px; border: solid 1px #e1e2e4; border-radius: 3px; background-color: white; position: absolute; top: 0px; left: -20px; z-index: 1; }

@media (max-width: 480px) { .form__checklabel span { display: inline-block; vertical-align: top; margin-left: 2px; width: calc(100% - 16px); } }

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

.form__file-label { display: block; width: 115px; height: 46px; margin-right: 18px; padding: 12px 14px; background-color: #22459b; border-radius: 6px; font-size: 1em; font-weight: 700; color: white; cursor: pointer; }

@media (max-width: 480px) { .form__file-label { width: 130px; text-align: center; } }

.form__file-label.error { background-color: red; }

.form__file-label img { display: inline-block; -webkit-transform: translateY(3px); transform: translateY(3px); }

.form__file-content { width: calc(100% - 133px); }

@media (max-width: 480px) { .form__file-content { width: 100%; margin-top: 8px; } }

.form__file-text, .form__file-descript { font-size: 0.9375em; font-weight: 700; color: #333; line-height: 1.4; }

@media (max-width: 480px) { .form__file-text, .form__file-descript { font-size: 0.8125em; } }

.form__file-descript { color: #ee3030; }

.form__file-filename { word-break: break-all; }

.success { position: relative; }

.success .title { background: url("../images/common/title-success.png"); background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }

.success__block { padding: 60px 15px; text-align: center; }

@media (max-width: 767px) { .success__block { padding: 30px 15px; } }

@media (max-width: 480px) { .success__block { padding: 20px 12px; } }

.success__title { font-size: 1.875em; font-weight: 700; color: #22459b; }

@media (max-width: 480px) { .success__title { font-size: 1.5em; } }

.success__title:after { content: ''; width: 213px; height: 13px; background-image: url("../images/success/title-decora.png"); background-size: cover; display: block; margin: 15px auto; }

@media (max-width: 767px) { .success__title:after { margin: 10px auto; } }

.success__text { font-size: 1.125em; font-weight: 700; color: #333333; line-height: 1.4; margin-top: 15px; }

@media (max-width: 767px) { .success__text { font-size: 1em; margin-top: 10px; } }

@media (max-width: 480px) { .success__text { font-size: 0.875em; } }

.success__text--mark { background-color: #fff21d; display: inline-block; padding: 0 10px; }

@media (max-width: 480px) { .success__text--mark { padding: 0; } }

.success__text .block-480 { display: none; }

@media (max-width: 480px) { .success__text .block-480 { display: block; } }

.success__lists { margin-top: 20px; font-size: 0; }

@media (max-width: 360px) { .success__lists { margin-top: 12px; } }

.success__list { display: inline-block; vertical-align: top; width: 148px; height: 148px; background-color: #fff4d4; border-radius: 10px; padding: 20px 8px; -webkit-transition: all .3s; transition: all .3s; }

@media (max-width: 767px) { .success__list { width: 105px; height: 105px; padding: 15px 5px; } }

@media (max-width: 480px) { .success__list { width: 85px; height: 85px; padding: 7px 3px; } }

@media (max-width: 360px) { .success__list { width: 70px; height: 70px; padding: 4px 3px; } }

.success__list:hover { background-color: #ffedbb; }

.success__list:hover .success__list-pic { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); }

.success__list:nth-child(2) { margin: 0 25px; }

@media (max-width: 767px) { .success__list:nth-child(2) { margin: 0 6px; } }

.success__list-pic { -webkit-transition: all .3s; transition: all .3s; }

@media (max-width: 767px) { .success__list-pic { width: 50px; margin: 0 auto; } }

@media (max-width: 480px) { .success__list-pic { width: 35px; } }

@media (max-width: 360px) { .success__list-pic { width: 30px; } }

.success__list-text { font-size: 16px; font-weight: 700; color: #005bac; margin-top: 10px; line-height: 1.1; }

@media (max-width: 767px) { .success__list-text { font-size: 13px; margin-top: 5px; } }

@media (max-width: 360px) { .success__list-text { font-size: 12px; } }

.success__list-text .show-480 { display: none; }

@media (max-width: 480px) { .success__list-text .show-480 { display: block; } }

.winning { position: relative; }

@media (max-width: 991px) { .winning { padding-top: 40px; } }

@media (max-width: 767px) { .winning { padding-top: 20px; } }

.winning__title { width: 560px; height: 338px; background: url("../images/index/index-title.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: center top; text-indent: -9999px; }

@media (max-width: 1199px) { .winning__title { width: 460px; height: 278px; } }

@media (max-width: 767px) { .winning__title { margin: 0 auto; } }

@media (max-width: 480px) { .winning__title { width: 310px; height: 187px; } }

.winning__subtitle { text-align: center; max-width: 90%; margin: 0 auto; }

.winning__subtitle img { width: 225px; }

@media (max-width: 767px) { .winning__pen { display: none; } }

.winning__head { background: url("../images/winning/winning-head-bg.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: center bottom; padding-bottom: 140px; }

@media (max-width: 480px) { .winning__head { padding-bottom: 80px; } }

.winning__head-block { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; }

@media (max-width: 767px) { .winning__head-block { -ms-flex-wrap: wrap; flex-wrap: wrap; } }

.winning__body { background: #cfeaf2; padding-bottom: 40px; }

@media (max-width: 767px) { .winning__body { padding-top: 20px; } }

.winning__list { list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 100%; padding: 10px; border-radius: 40px; }

@media (max-width: 767px) { .winning__list { -ms-flex-wrap: wrap; flex-wrap: wrap; } }

.winning__list:nth-child(odd) { background: #fff8e1; }

.winning__list li { width: 10%; font-size: 1.25em; font-weight: 500; color: #525252; text-align: center; position: relative; }

@media (max-width: 1199px) { .winning__list li { font-size: 1.125em; } }

@media (max-width: 991px) { .winning__list li { font-size: 1em; } }

@media (max-width: 991px) and (max-width: 767px) { .winning__list li { width: 20%; padding-top: 5px; padding-bottom: 5px; }
  .winning__list li:nth-child(6)::before { display: none; } }

@media (max-width: 991px) and (max-width: 374px) { .winning__list li { font-size: 0.875em; } }

.winning__list li:first-child::before { display: none; }

.winning__list li::before { content: "|"; position: absolute; top: 0; left: 0; z-index: 1; }

@media (max-width: 767px) { .winning__list li::before { top: 5px; } }

.bg--lightblue { background: #cfeaf2; }

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

.title { text-indent: -9999px; height: 65px; margin-left: auto; margin-right: auto; }

@media (max-width: 767px) { .title { height: 50px; } }

@media (max-width: 480px) { .title { height: 45px; } }

.inside { background: url("../images/common/title-bg.png"), url("../images/common/inside-bg.png"); background-size: auto,auto 382px; background-repeat: no-repeat,no-repeat; background-position: center top,center bottom; margin-top: 45px; padding-bottom: 420px; min-height: 800px; }

@media (max-width: 991px) { .inside { background-size: auto,auto 280px; margin-top: 30px; padding-bottom: 300px; min-height: auto; } }

@media (max-width: 767px) { .inside { background-size: 400px auto,auto 200px; padding-bottom: 240px; } }

@media (max-width: 480px) { .inside { background-size: 350px auto,auto 130px; padding-bottom: 170px; } }

.content { background-image: url("../images/common/content-bg.jpg"); background-repeat: repeat; background-position: center; margin-top: 40px; padding: 40px 80px; position: relative; }

@media (max-width: 767px) { .content { padding: 40px 25px; } }

@media (max-width: 480px) { .content { padding: 40px 22px; } }

.content::before { content: ''; display: block; position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); padding: 10px; border: solid 2px #dcdddf; -webkit-box-sizing: border-box; box-sizing: border-box; }

.content__circle1, .content__circle2, .content__circle3, .content__circle4 { position: absolute; width: 12px; height: 12px; background-color: #dedee0; border-radius: 99em; }

.content__circle1 { top: 24px; left: 24px; }

@media (max-width: 767px) { .content__circle1 { top: 18px; left: 18px; } }

.content__circle2 { top: 24px; right: 24px; }

@media (max-width: 767px) { .content__circle2 { top: 18px; right: 18px; } }

.content__circle3 { bottom: 24px; left: 24px; }

@media (max-width: 767px) { .content__circle3 { bottom: 18px; left: 18px; } }

.content__circle4 { bottom: 24px; right: 24px; }

@media (max-width: 767px) { .content__circle4 { bottom: 18px; right: 18px; } }

.content__block { position: relative; z-index: 5; background-color: white; border-radius: 15px; -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.02); box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.02); }

.page { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 40px; }

@media (max-width: 767px) { .page { margin-top: 25px; } }

.page__list { font-family: 'Arial', 'Noto Sans TC', '微軟正黑體', sans-serif; font-size: 1.0625em; font-weight: 400; color: white; border-radius: 4px; margin: 0 2px; padding: 0 4px; min-width: 42px; height: 42px; line-height: 42px; text-align: center; }

@media (max-width: 767px) { .page__list { margin: 5px 1px 0px; font-size: 0.9375em; min-width: 32px; height: 32px; line-height: 32px; } }

@media (max-width: 480px) { .page__list { min-width: 28px; height: 28px; line-height: 28px; } }

.page__list:hover, .page__list.active { background-color: #50d1fa; }

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

.page__list--dot { line-height: 32px; }

@media (max-width: 767px) { .page__list--dot { line-height: 24px; } }

.page__list--prev, .page__list--next { width: auto; padding: 1px 12px; background-color: #50d1fa; }

@media (max-width: 767px) { .page__list--prev, .page__list--next { padding: 1px 4px; } }

.page__list--prev:before { content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 6px 9px 6px 0; border-color: transparent #ffffff transparent transparent; margin-right: 8px; }

@media (max-width: 767px) { .page__list--prev:before { margin-right: 0px; border-width: 4px 7px 4px 0; top: -1px; position: relative; } }

.page__list--next:after { content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #ffffff; margin-left: 8px; }

@media (max-width: 767px) { .page__list--next:after { margin-left: 0px; border-width: 4px 0 4px 7px; top: -1px; position: relative; } }

.gopage { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; margin-top: 10px; color: #fff; display: none; }

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

.gopage .form__select { width: 5em; height: 42px; margin-right: 10px; }

@media (max-width: 767px) { .gopage .form__select { font-size: 1em; height: 32px; line-height: 32px; margin-top: 5px; padding: 0 8px; } }

@media (max-width: 480px) { .gopage .form__select { height: 28px; line-height: 28px; } }

.gopage .form__input { width: 2.8em; height: 42px; margin-right: 10px; }

@media (max-width: 767px) { .gopage .form__input { font-size: 1em; height: 32px; margin-top: 5px; padding: 5px 8px; } }

@media (max-width: 480px) { .gopage .form__input { height: 28px; } }