@charset "UTF-8";
/**
* Gumby Framework
* ---------------
*
* Follow @gumbycss on twitter and spread the love.
* We worked super hard on making this awesome and released it to the web.
* All we ask is you leave this intact. #gumbyisawesome
*
* Gumby Framework
* http://gumbyframework.com
*
* Built with love by your friends @digitalsurgeons
* http://www.digitalsurgeons.com
*
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
@import url('notosanstc.css');
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

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

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

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

a img { border: none; }

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

/* Base Styles */
html { font-size: 100%; line-height: 1.625em; }

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; font-family: ""; font-weight: 400; color: #555555; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media only screen and (max-width: 640px) { body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; } }

html, body { height: 100%; }

.fixed { position: fixed; }
.fixed.pinned { position: absolute; }
@media only screen and (max-width: 768px) { .fixed { position: relative !important; top: auto !important; left: auto !important; } }

.unfixed { position: relative !important; top: auto !important; left: auto !important; }

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

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

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

.box { border-radius: calc((10rem / 18)); background: #ffffff; border: 1px solid #000000; }

.box-m { border-radius: calc((10rem / 18)); background: #ffffff; border: 2px solid #000000; }

.box-s { overflow: hidden; border-radius: calc((20rem / 18)); border: 1px solid #6ebacd; }
@media only screen and (max-width: 640px) { .box-s { border-radius: calc((10rem / 18)); } }

.display_table { display: table !important; }
@media only screen and (max-width: 640px) { .display_table { display: table !important; } }

.border-b-none { border-bottom: none !important; }

.font-italic { font-style: italic !important; }

.height-0 { display: block; height: 0 !important; overflow: hidden; position: fixed; padding: 0 !important; margin: 0 !important; }

.margin-top-100 { margin-top: -100% !important; }

.line-left-p { border-left: 2px solid #cccccc; padding-left: 2%; margin: 2% auto; font-style: italic; }
.line-left-p a { color: #999999 !important; text-decoration: none; }
.line-left-p a i { color: #999999 !important; }
.line-left-p a:hover { text-decoration: underline; }

.font-bold { font-weight: bold; }

.font-c { text-align: center !important; }

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

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

.font-verti-m { vertical-align: middle !important; }

.box-shadow { box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); }

.float-l { float: left; }

.float-r { float: right; }

.float-c { float: none; margin: 2% auto !important; display: table !important; }

.padding-t-0 { padding-top: calc((0rem / 18)) !important; }

.padding-r-10 { padding-right: calc((10rem / 18)) !important; }

.padding-t-100 { padding-top: calc((100rem / 18)); }

.padding-t-b-20 { padding: calc((20rem / 18)); }

.margin-t-10 { margin-top: calc((10rem / 18)) !important; }

.margin-t-20 { margin-top: calc((20rem / 18)) !important; }

.margin-t-40 { margin-top: calc((40rem / 18)) !important; }

.margin-t-80 { margin-top: calc((80rem / 18)) !important; }

.margin-t-100 { margin-top: calc((100rem / 18)) !important; }

.margin-t-160 { margin-top: calc((120rem / 18)) !important; }

.margin-t-0 { margin-top: 0 !important; }

.margin-b-0 { margin-bottom: 0 !important; }

.margin-b-10 { margin-bottom: calc((10rem / 18)) !important; }

.margin-b-20 { margin-bottom: calc((20rem / 18)) !important; }

.margin-b-40 { margin-bottom: calc((40rem / 18)) !important; }

.margin-b-60 { margin-bottom: calc((60rem / 18)) !important; }

.margin-b-80 { margin-bottom: calc((80rem / 18)) !important; }

.margin-b-120 { margin-bottom: calc((120rem / 18)) !important; }

.margin-b-180 { margin-bottom: calc((180rem / 18)) !important; }

.width-20 { width: 20%; }

.width-30 { width: 30%; }

.width-35 { width: 35%; }

.width-40 { width: 40%; }

.width-45 { width: 45%; }

.font-gray0 { color: #000000 !important; }

.font-gray3 { color: #333333 !important; }

.font-gray6 { color: #666666 !important; }

.font-gray9 { color: #999999 !important; }

.font-red { color: #ff6633 !important; }

.font-green { color: #49bfab !important; }

.font-underline { text-decoration: underline !important; }

.font-white { color: #ffffff !important; }

.font-orange { color: #f9882d !important; }

.img-bg-s { display: block; width: calc((480rem / 18)); height: calc((480rem / 18)); background: url(../images/common/img-bg-s.png) no-repeat bottom center; background-size: 100%; position: absolute; }

.img-bg-m { display: block; width: calc((660rem / 18)); height: calc((660rem / 18)); background: url(../images/common/img-bg-m.png) no-repeat bottom center; background-size: 100%; position: absolute; }

.img-bg-b { display: block; width: calc((720rem / 18)); height: calc((720rem / 18)); background: url(../images/common/img-bg-b.png) no-repeat bottom center; background-size: 100%; position: absolute; }

body .input, html .input { display: block; border-radius: calc((15rem / 18)); background: #ffffff; padding: 0 calc((20rem / 18)); font-size: calc((28rem / 18)); font-weight: normal; line-height: calc((75rem / 18)); color: #333333; cursor: pointer; width: calc((450rem / 18)); height: calc((75rem / 18)); }
body :-moz-placeholder, html :-moz-placeholder { color: #999999 !important; font-size: calc((28rem / 18)); font-weight: normal; }
body ::-moz-placeholder, html ::-moz-placeholder { color: #999999 !important; font-size: calc((28rem / 18)); font-weight: normal; }
body :-ms-input-placeholder, html :-ms-input-placeholder { color: #999999 !important; font-size: calc((28rem / 18)); font-weight: normal; }
body ::-webkit-input-placeholder, html ::-webkit-input-placeholder { color: #999999 !important; font-size: calc((28rem / 18)); font-weight: normal; }
body input, html input { border: 1px solid #ffffff; outline: none; transition: all .5s; }
body input:focus, html input:focus { border: 1px solid #49bfab !important; outline: none; transition: all .5s; }
body .input-red:focus, html .input-red:focus { border: 1px solid #ff6633 !important; outline: none; transition: all .5s; }
body .page-link, html .page-link {cursor: pointer;  position: relative; display: flex; padding: 0 0.5rem; margin: 0 0.5rem; font-size: calc((24rem / 18)); line-height: calc((45rem / 18)); height: calc((45rem / 18)); width: calc((45rem / 18)); border-radius: calc((45rem / 18)); text-decoration: none; color: #666666; background: #fff; text-align: center; justify-content: center; align-items: center; }
body .page-link i, html .page-link i { color: #666666; transition: .5s; text-decoration: none; }
body .page-link:hover, html .page-link:hover { z-index: 2; text-decoration: none; background: #fcb400; color: #ffffff; border: 1px solid #000000; transition: .5s; }
body .page-link:hover i, html .page-link:hover i { color: #ffffff; transition: .5s; text-decoration: none; }
body .page-link:focus, html .page-link:focus { z-index: 3; text-decoration: none; color: #ffffff; background: #ffda7d; border: 1px solid #000000; transition: .5s; }
body .page-link:focus i, html .page-link:focus i { color: #ffffff; transition: .5s; text-decoration: none; }
body .page-item:first-child .page-link, html .page-item:first-child .page-link { margin-left: 0; }
body .page-item.active .page-link, html .page-item.active .page-link { z-index: 3; text-decoration: none; background: #fcb400; border: 1px solid #000000; transition: .5s; color: #ffffff; }
body .page-item.disabled .page-link, html .page-item.disabled .page-link { pointer-events: none; cursor: auto; opacity: 0.2; }
body .justify-content-center, html .justify-content-center { display: flex; justify-content: center !important; margin-top: 2rem; width: 100%; }
@media only screen and (max-width: 640px) { body .input, html .input { display: block; width: 100%; height: calc((65rem / 18)); border-radius: calc((10rem / 18)); background: #ffffff; padding: 0 calc((20rem / 18)); font-size: calc((22rem / 18)); line-height: calc((65rem / 18)); }
  body :-moz-placeholder, html :-moz-placeholder { color: #999999 !important; font-size: calc((22rem / 18)); font-weight: normal; letter-spacing: 0.05rem; }
  body ::-moz-placeholder, html ::-moz-placeholder { color: #999999 !important; font-size: calc((22rem / 18)); font-weight: normal; letter-spacing: 0.05rem; }
  body :-ms-input-placeholder, html :-ms-input-placeholder { color: #999999 !important; font-size: calc((22rem / 18)); font-weight: normal; letter-spacing: 0.05rem; }
  body ::-webkit-input-placeholder, html ::-webkit-input-placeholder { color: #999999 !important; font-size: calc((22rem / 18)); font-weight: normal; letter-spacing: 0.05rem; }
  body .page-link, html .page-link { position: relative; display: flex; padding: 0 0.5rem; margin: 0 0.2rem; font-size: calc((20rem / 18)); line-height: calc((40rem / 18)); height: calc((40rem / 18)); width: calc((40rem / 18)); border-radius: calc((40rem / 18)); text-decoration: none; color: #666666; background: #fff; text-align: center; justify-content: center; align-items: center; } }

/* Loader--*/
#loading-page { position: fixed; width: 100%; height: 100%; background: white; z-index: 999999; top: 0; }
@media only screen and (max-width: 1024px) { #loading-page { display: block; background: rgba(255, 255, 255, 0); } }
@media only screen and (max-width: 640px) { #loading-page { background: white; } }

.loading-kv { display: block; width: 300px; height: 300px; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; animation-name: loading-ani; animation-duration: 0.5s; animation-iteration-count: infinite; animation-direction: alternate; }
@media only screen and (max-width: 640px) { .loading-kv { width: 200px; height: 200px; } }

.icon_loader { border: 5px solid #0cafa3; border-radius: 30px; height: 30px; left: 50%; opacity: 0; position: absolute; top: 50%; width: 30px; animation: pulsate 1s ease-out; animation-iteration-count: infinite; }

@keyframes pulsate { 0% { transform: scale(0.1); opacity: 0.0; }
  50% { opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; } }
.navbar { display: none; position: fixed; z-index: 99; width: calc((80rem / 18)); height: calc((80rem / 18)); left: 0; top: 0; padding-top: calc((25rem / 18)); padding-right: calc((27rem / 18)); }
.navbar input { display: none; }
.navbar .lower label:hover { cursor: pointer; }
.navbar .overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(12, 175, 163, 0.9); z-index: 9998; }
.navbar .overlay nav { text-align: left; padding: 0 10%; position: relative; top: 50%; height: 80%; font-size: 1rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.navbar .overlay ul { list-style: none; padding: 10% 0; margin: 0 auto; display: inline-block; height: 100%; position: relative; }
.navbar .overlay ul li { display: table; width: 100%; min-height: 4rem; }
.navbar .overlay ul li a { display: block; text-align: left; color: white; font-size: calc((28rem / 18)); line-height: calc((42rem / 18)); letter-spacing: calc((1rem / 18)); font-weight: 400; text-decoration: none; -webkit-transition: color 0.2s; transition: color 0.2s; text-transform: uppercase; letter-spacing: 0.1rem; }
.navbar .lower ~ .overlay-hugeinc { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; }
.navbar .overlay-hugeinc nav { -moz-perspective: 300px; }
.navbar .overlay-hugeinc nav ul { opacity: 0.4; -webkit-transform: translateY(-25%) rotateX(35deg); transform: translateY(-25%) rotateX(35deg); -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; }
.navbar #op:checked ~ .overlay-hugeinc { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; }
.navbar #op:checked ~ .overlay-hugeinc nav ul { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
.navbar #op:not(:checked) ~ .overlay-hugeinc nav ul { -webkit-transform: translateY(25%) rotateX(-35deg); transform: translateY(25%) rotateX(-35deg); }
@media only screen and (max-width: 767px) { .navbar { display: block; width: calc((35rem / 18)); height: calc((80rem / 18)); min-height: 55px; padding: 0; left: 16px; z-index: 99; } }

.navbar-open { z-index: 99999; }

.add-menubg { background: rgba(255, 255, 255, 0) !important; transition: all .5s; }

.menu { display: block; position: fixed; height: calc((80rem / 18)); min-height: 65px; width: 100%; background: white; border-bottom: 1px solid #dddddd; z-index: 99; top: 0; }
.menu .logo a { display: block; width: calc((250rem / 18)); height: calc((40rem / 18)); background: url(../images/logo.png) no-repeat; background-size: cover; padding: 0px 0px; margin-top: calc((20rem / 18)); margin-left: calc((20rem / 18)); float: left; }
.menu ul { display: table; float: right; margin-right: calc((20rem / 18)); margin-top: calc((10rem / 18)); }
.menu li { float: left; height: calc((60rem / 18)); line-height: calc((60rem / 18)); padding: 0 0.5rem; }
.menu li a { display: block; width: auto; height: calc((60rem / 18)); line-height: calc((60rem / 18)); text-align: left; color: #000000; font-size: calc((22rem / 18)); position: relative; text-decoration: none; font-weight: normal !important; }
.menu li a::after { position: absolute; top: calc((45rem / 18)); left: 0; right: 0; margin: auto; width: 0%; height: 1px; background: #000000; content: ''; opacity: 1; transition: transform 0.5s, width 0.5s; }
.menu li a:hover { color: #49bfab; }
.menu li a:hover::after, .menu li a:focus::after { width: 100%; background: #49bfab; }
@media only screen and (max-width: 1280px) { .menu { min-height: 55px; } }
@media only screen and (max-width: 1100px) { .menu { min-height: auto; }
  .menu .logo a { display: block; width: calc((250rem / 18)); height: calc((40rem / 18)); margin-top: calc((20rem / 18)); margin-left: calc((10rem / 18)); }
  .menu ul { display: table; float: right; margin-right: calc((20rem / 18)*0.5); margin-top: calc((10rem / 18)); }
  .menu li { padding: 0 0.6rem; }
  .menu li a { display: block; width: auto; height: calc((60rem / 18)); line-height: calc((60rem / 18)); text-align: left; color: #000000; font-size: calc((20rem / 18)); position: relative; text-decoration: none; } }
@media only screen and (max-width: 767px) { .menu { min-width: auto; min-height: 55px; }
  .menu .logo a { width: calc((200rem / 18)*1.2); height: calc((32rem / 18)*1.2); position: absolute; top: calc((10rem / 18)); bottom: 0px; top: 0px; left: 0px; right: 0px; margin: auto; z-index: 100; }
  .menu ul { display: none; } }

.page-top { display: block; position: fixed; height: calc((75rem / 18)); width: 100%; background: white; z-index: 99; top: 0; }
.page-top .logo a { display: block; width: calc((250rem / 18)*0.8); height: calc((40rem / 18)*0.8); background: url(../images/logo.png) no-repeat; background-size: cover; padding: 0px 0px; position: absolute; top: calc((10rem / 18)); bottom: 0px; top: 0px; left: 0px; right: 0px; margin: auto; z-index: 100; }
@media only screen and (max-width: 767px) { .page-top { min-width: auto; min-height: 55px; }
  .page-top .logo a { width: calc((200rem / 18)*1.2); height: calc((32rem / 18)*1.2); position: absolute; top: calc((10rem / 18)); bottom: 0px; top: 0px; left: 0px; right: 0px; margin: auto; z-index: 100; }
  .page-top ul { display: none; } }

#nav-icon { display: block; width: calc((35rem / 18)); height: calc((30rem / 18)); position: relative; float: right; z-index: 9999999; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; }
@media only screen and (max-width: 767px) { #nav-icon { margin: auto; display: block; float: none; position: absolute; top: 0; bottom: 0; } }

#nav-icon span { display: block; position: absolute; height: 2px; width: 100%; background: #49bfab; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }

#nav-icon.close { display: block; position: absolute; height: 2px; width: 100%; background: #49bfab; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }

#nav-icon span:nth-child(1) { top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; }

#nav-icon span:nth-child(2) { top: calc((12.5rem / 18)); width: calc((28rem / 18)); -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; }

#nav-icon span:nth-child(3) { top: calc((25rem / 18)); width: calc((35rem / 18)); -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; }

#nav-icon.open span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 0px; left: calc((8rem / 18)); background: #ffffff; width: calc((35rem / 18)); }

#nav-icon.open span:nth-child(2) { width: 0%; opacity: 0; }

#nav-icon.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: calc((24rem / 18)); left: calc((8rem / 18)); background: #ffffff; width: calc((35rem / 18)); }

.btn { display: inline-block; margin: auto; text-align: center; }
.btn a { display: block; width: calc((270rem / 18)); height: calc((75rem / 18)); border-radius: calc((45rem / 18)); font-size: calc((32rem / 18)); font-weight: bold; line-height: calc((75rem / 18)); letter-spacing: calc((1rem / 18)); color: #ffffff; background: #49bfab; transition: 0.5s; text-decoration: none; border: 1px solid #000000; }
.btn a:hover { color: #ffffff; background: #48A09A; transition: 0.5s; }
@media only screen and (max-width: 640px) { .btn a { width: calc((240rem / 18)); height: calc((65rem / 18)); border-radius: calc((35rem / 18)); font-size: calc((22rem / 18)); }
  .btn a:hover { color: #ffffff; background: #48A09A; } }

.btn-main-thick { display: flex; margin: auto; text-align: center; position: relative; width: 100%; justify-content: center; height: calc((75rem / 18)); }
.btn-main-thick a { display: block; width: calc((270rem / 18)); height: calc((75rem / 18)); border-radius: calc((45rem / 18)); font-size: calc((32rem / 18)); font-weight: bold; line-height: calc((75rem / 18)); letter-spacing: calc((1rem / 18)); color: #ffffff !important; background: #49bfab; transition: 0.5s; border: 2px solid #000000; }
.btn-main-thick a:hover { background: #48A09A; transition: 0.5s; color: #ffffff; }
@media only screen and (max-width: 640px) { .btn-main-thick a { width: calc((240rem / 18)); height: calc((65rem / 18)); border-radius: calc((35rem / 18)); font-size: alc(1.55556rem); line-height: calc((65rem / 18)); color: #ffffff; }
  .btn-main-thick a:hover { background: #48A09A; color: #ffffff; } }

.btn-main-thick-yellow a { background: #fcb400; }
.btn-main-thick-yellow a:hover { background: #de9f00; }
@media only screen and (max-width: 640px) { .btn-main-thick-yellow a { width: calc((240rem / 18)); height: calc((65rem / 18)); border-radius: calc((35rem / 18)); font-size: alc(1.55556rem); line-height: calc((65rem / 18)); color: #ffffff; }
  .btn-main-thick-yellow a:hover { background: #dd9900; color: #ffffff; } }

.btn-m-line-180 { margin: 0; text-align: center; }
.btn-m-line-180 a { width: calc((180rem / 18)); height: calc((55rem / 18)); position: relative; font-size: calc((22rem / 18)); line-height: calc((55rem / 18)); letter-spacing: calc((1rem / 18)); margin: 1rem 0.2em; background: #cccccc; color: #ffffff; }
.btn-m-line-180 a:hover { background: #999999; }
@media only screen and (max-width: 640px) { .btn-m-line-180 a { width: calc((150rem / 18)); height: calc((55rem / 18)); line-height: calc((55rem / 18)); border-radius: calc((35rem / 18)); font-size: calc((22rem / 18)); }
  .btn-m-line-180 a:hover { background: #999999; } }

.btn-m-180 a { width: calc((180rem / 18)); height: calc((55rem / 18)); position: relative; font-size: calc((22rem / 18)); line-height: calc((55rem / 18)); letter-spacing: calc((1rem / 18)); margin: 1rem 0.2em; color: #ffffff; }
@media only screen and (max-width: 640px) { .btn-m-180 a { width: calc((150rem / 18)); height: calc((55rem / 18)); line-height: calc((55rem / 18)); border-radius: calc((35rem / 18)); font-size: calc((22rem / 18)); color: #ffffff; }
  .btn-m-180 a:hover { color: #ffffff; } }

.btn-margin-auto a { margin: auto; color: #ffffff; }

.btn-b a { width: calc((280rem / 18)); height: calc((90rem / 18)); font-size: calc((32rem / 18)); line-height: calc((90rem / 18)); letter-spacing: calc((1rem / 18)); border-radius: calc((45rem / 18)); margin: 1rem 0.2em; color: #ffffff; }
@media only screen and (max-width: 640px) { .btn-b a { width: calc((290rem / 18)); height: calc((90rem / 18)); border-radius: calc((45rem / 18)); font-size: calc((22rem / 18)); color: #ffffff; }
  .btn-b a:hover { color: #ffffff; } }

.btn-large a { width: calc((420rem / 18)); height: calc((75rem / 18)); position: relative; font-size: calc((28rem / 18)); line-height: calc((75rem / 18)); letter-spacing: calc((1rem / 18)); margin: 1rem 0.2em; color: #ffffff; margin-top: 1.7rem; }
@media only screen and (max-width: 640px) { .btn-large a { width: calc((250rem / 18)); height: calc((75rem / 18)); border-radius: calc((45rem / 18)); color: #ffffff; margin-top: 0.5rem; }
  .btn-large a:hover { color: #ffffff; } }

.btn-m a { width: calc((250rem / 18)); height: calc((75rem / 18)); position: relative; font-size: calc((28rem / 18)); line-height: calc((75rem / 18)); letter-spacing: calc((1rem / 18)); margin: 1rem 0.2em; color: #ffffff; }
@media only screen and (max-width: 640px) { .btn-m a { width: calc((180rem / 18)); height: calc((65rem / 18)); line-height: calc((65rem / 18)); border-radius: calc((35rem / 18)); font-size: calc((22rem / 18)); color: #ffffff; }
  .btn-m a:hover { color: #ffffff; } }

.btn-s a { display: block; width: calc((160rem / 18)); height: calc((50rem / 18)); color: #ffffff; font-size: calc((22rem / 18)); line-height: calc((50rem / 18)); letter-spacing: calc((1rem / 18)); background: #49bfab; border-radius: calc((40rem / 18)); margin: 1rem auto; }

.btn-ps { display: block; margin: auto; text-align: center; }
.btn-ps a { display: block; width: calc((160rem / 18)); height: calc((50rem / 18)); color: #ffffff; font-size: calc((22rem / 18)); line-height: calc((50rem / 18)); letter-spacing: calc((1rem / 18)); background: #ffda7d; border-radius: calc((40rem / 18)); margin: 1rem auto; }

.btn-red a { background: #ff6633; }
.btn-red a:hover { background: #ff3600; }

.btn-yellow a { background: #ffda7d; }

.btn-grayd a { background: #dddddd; }

.btn-line-gray-b a { display: block; width: calc((280rem / 18)); height: calc((90rem / 18)); font-size: calc((32rem / 18)); line-height: calc((90rem / 18)); letter-spacing: calc((1rem / 18)); border-radius: calc((45rem / 18)); margin: 1rem 0.2em; border: 2px solid #989898; color: #989898; background: #ffffff; text-decoration: none; transition: 0.5s; }
.btn-line-gray-b a:hover { color: #ffffff !important; border: 2px solid #000000; background: #49bfab; transition: 0.5s; }
@media only screen and (max-width: 640px) { .btn-line-gray-b a { font-size: calc((22rem / 18)); line-height: calc((65rem / 18)); width: calc((200rem / 18)); height: calc((65rem / 18)); } }

.btn-line-gray-L a { width: calc((400rem / 18)); }
@media only screen and (max-width: 640px) { .btn-line-gray-L a { width: calc((240rem / 18)); letter-spacing: 0; } }

.btn-red-foucs a { color: #ffffff; background: #ff6633; pointer-events: none; border: 1px solid #ff6633; }

.btn-green-foucs a { color: #ffffff; background: #49bfab; pointer-events: none; border: 2px solid #000000; }
.btn-green-foucs a:hover { background: #49bfab; }

.btn-disabled a { opacity: 0.5; }

.btn-gray { display: inline-block; margin: auto; width: 100%; text-align: center; }
.btn-gray a { display: block; width: 95%; height: calc((75rem / 18)); border-radius: calc((35rem / 18)); font-size: calc((28rem / 18)); line-height: calc((75rem / 18)); letter-spacing: calc((1rem / 18)); color: #ffffff !important; background: #cccccc; transition: 0.5s; text-decoration: none; font-weight: bold; }
.btn-gray a:hover { background: #999999; transition: 0.5s; }
@media only screen and (max-width: 640px) { .btn-gray a { width: 95%; height: calc((65rem / 18)); line-height: calc((65rem / 18)); border-radius: calc((35rem / 18)); font-size: calc((22rem / 18)); }
  .btn-gray a:hover { background: #999999; } }

.btn-line a { display: block; width: calc((160rem / 18)); height: calc((75rem / 18)); border-radius: calc((15rem / 18)); font-size: calc((28rem / 18)); line-height: calc((75rem / 18)); letter-spacing: calc((1rem / 18)); border: 1px solid #49bfab; color: #49bfab; background: #ffffff; text-decoration: none; margin-left: 0.5rem; transition: 0.5s; text-align: center; }
.btn-line a:hover { color: #ffffff !important; border: 1px solid #49bfab; background: #48A09A; transition: 0.5s; }
@media only screen and (max-width: 640px) { .btn-line a { font-size: calc((22rem / 18)); line-height: calc((65rem / 18)); color: #49bfab !important; border: 1px solid #49bfab; background: #ffffff; width: calc((150rem / 18)); height: calc((65rem / 18)); border-radius: calc((10rem / 18)); } }

.btn-line-red a { border: 1px solid #ff6633; color: #ff6633; background: #ffffff; text-decoration: none; margin-left: 0.5rem; transition: 0.5s; text-align: center; }
.btn-line-red a:hover { color: #ffffff !important; border: 1px solid #ff6633; background: #ff3600; transition: 0.5s; }
@media only screen and (max-width: 640px) { .btn-line-red a { font-size: calc((22rem / 18)); line-height: calc((65rem / 18)); border: 1px solid #ff6633; color: #ff6633 !important; background: #ffffff; width: calc((150rem / 18)); height: calc((65rem / 18)); border-radius: calc((10rem / 18)); } }

.btn-b11 { display: inline-block; margin: 0; text-align: center; width: 100%; }
.btn-b11 a { display: block; width: calc((420rem / 18)); height: calc((75rem / 18)); border-radius: calc((35rem / 18)); font-size: calc((32rem / 18)); line-height: calc((75rem / 18)); letter-spacing: calc((1rem / 18)); color: #ffffff !important; background: #49bfab; transition: 0.5s; text-decoration: none; font-weight: bold; }
@media only screen and (max-width: 640px) { .btn-b11 a { width: calc((360rem / 18)); height: calc((65rem / 18)); line-height: calc((65rem / 18)); border-radius: calc((35rem / 18)); font-size: calc((24rem / 18)); }
  .btn-b11 a:hover { background: #49bfab; } }

.btn-100 { height: calc((120rem / 18)); }
.btn-100 a { display: block; width: 100%; height: calc((90rem / 18)); }
@media only screen and (max-width: 640px) { .btn-100 { height: calc((100rem / 18)); }
  .btn-100 a { display: block; width: 100%; height: calc((65rem / 18)); line-height: calc((65rem / 18)); font-size: calc((28rem / 18)); } }

.btn-bottom { display: none; }
@media only screen and (max-width: 640px) { .btn-bottom { display: inline-block; font-size: calc((22rem / 18)); line-height: calc((60rem / 18)); text-align: center; color: #ffffff; width: 50%; float: left; }
  .btn-bottom a { display: block; width: 100%; height: auto; background: #49bfab; margin: 0; text-decoration: none; font-size: calc((22rem / 18)); font-weight: 600; line-height: calc((60rem / 18)); letter-spacing: calc((1rem / 18)); color: #ffffff; } }

.btn-icon { display: inline; font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); color: #ffffff; background: #fcb400; text-decoration: none; transition: 0.5s; padding: 0.3rem; border-radius: 10rem; cursor: pointer; }
.btn-icon :hover { color: #ffffff !important; background: #dd9900; transition: 0.5s; }
@media only screen and (max-width: 640px) { .btn-icon { font-size: calc((18rem / 18)); line-height: calc((36rem / 18)); color: #ffffff; background: #fcb400; } }

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

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

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

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

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

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

/* Slider */
.slick-loading .slick-list { background: #fff center center no-repeat; }

/* Icons */
@font-face { font-weight: normal; font-style: normal; }
/* Arrows */
.slick-prev, .slick-next { position: absolute; display: block; width: calc((40rem / 18)); height: calc((80rem / 18)); line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; top: 45%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); padding: 0; border: none; outline: none; opacity: .9; transition: .5s; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; transition: .5s; opacity: 1; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled, .slick-next.slick-disabled { opacity: 0; }
.slick-prev:before, .slick-next:before { font-size: 20px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media only screen and (max-width: 640px) { .slick-prev, .slick-next { width: calc((21rem / 18)* 1); height: calc((56rem / 18)* 1); top: 45%; } }

.slick-prev { left: calc((-80rem / 18)); background: url(../images/icon/slick-arrow-left.svg) no-repeat center top; background-size: 100% 100%; z-index: 9; }
[dir="rtl"] .slick-prev { left: auto; right: -75px; }
@media only screen and (max-width: 640px) { .slick-prev { left: calc((-40rem / 18)); background: url(../images/icon/slick-arrow-left-m.svg) no-repeat center top; background-size: 100% 100%; } }

.slick-next { right: calc((-80rem / 18)); background: url(../images/icon/slick-arrow-right.svg) no-repeat center top; background-size: 100% 100%; z-index: 9; }
[dir="rtl"] .slick-next { left: -75px; right: auto; }
@media only screen and (max-width: 640px) { .slick-next { right: calc((-40rem / 18)); background: url(../images/icon/slick-arrow-right-m.svg) no-repeat center top; background-size: 100% 100%; } }

/* Dots */
.slick-dots { position: absolute; bottom: calc((-20rem / 18)); list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; z-index: 9; }
.slick-dots li { position: relative; display: inline-block; height: 10px; width: 10px; margin: 0 10px; padding: 0; cursor: pointer; }
.slick-dots li button { border: 0; background: #CCCCCC; display: block; width: 10px; height: 10px; border-radius: 10px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 3px; cursor: pointer; border: 0px solid #CCCCCC; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
.slick-dots li button:before { font-family: 'slick'; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 10px; content: '•'; text-align: center; opacity: 1; color: #48bc7b; background: transparent; }
.slick-dots li.slick-active button:before { opacity: 1; background: #48A09A; }

* { font-family: "Arial", "Noto Sans TC" !important; }

.font_family_Arial { font-family: "Arial" !important; }

.font_family_Noto { font-family: "Noto Sans TC" !important; }
.font_family_Noto span { font-family: "Noto Sans TC" !important; }

#mrawebIframe { position: fixed; top: 0; z-index: 9999; background: #ffffff; }

input, textarea { outline-color: invert; outline-style: none; outline-width: 0px; border: none; border-style: none; text-shadow: none; -webkit-appearance: none; -webkit-user-select: text; outline-color: transparent; box-shadow: none; }

.popup-scroll-no { overflow: hidden; }
@media only screen and (max-width: 640px) { .popup-scroll-no { overflow-y: hidden; margin-bottom: -2px; } }

.cover-bottom { pointer-events: none; bottom: -0.1rem !important; }

.add-event-none { pointer-events: none; }

body, html { display: block; height: 100%; min-width: 1280px; outline: none; font-weight: normal; background: #ffffff; font-size: 16px !important; color: #000000; letter-spacing: calc((1rem / 18)); height: 100%; }
body a, body a:hover, body :hover, html a, html a:hover, html :hover { -webkit-tap-highlight-color: transparent; text-decoration: none; }
body img, html img { width: 100%; }
body h1, html h1 { display: flex; text-align: center; clear: both; font-weight: bold; font-size: calc((60rem / 18)); line-height: calc((80rem / 18)); margin: auto; margin-bottom: calc((40rem / 18)); color: #49bfab; letter-spacing: calc((5rem / 18)); }
body h1 header, html h1 header { position: relative; display: block; margin: auto; }
body h2, html h2 { font-weight: bold; font-size: calc((42rem / 18)); line-height: calc((60rem / 18)); letter-spacing: calc((1rem / 18)); color: #000000; }
body h6, html h6 { font-size: calc((36rem / 18)); line-height: calc((54rem / 18)); letter-spacing: calc((1rem / 18)); font-weight: bold; color: #000000; }
body .font-s-18, html .font-s-18 { font-size: 1rem; line-height: calc((27rem / 18)); color: #000000; }
body .font-s-28, html .font-s-28 { font-size: calc((28rem / 18)); line-height: calc((40rem / 18)); color: #000000; }
body .font-s-36, html .font-s-36 { font-size: calc((36rem / 18)); line-height: calc((36rem / 18)); color: #000000; }
body .font-s-32, html .font-s-32 { font-size: calc((32rem / 18)); line-height: calc((32rem / 18)); color: #000000; }
body .font-line-h42, html .font-line-h42 { line-height: calc((42rem / 18)); }
body a, html a { color: #ff6633; }
body a:hover, html a:hover { color: #49bfab; }
body p, html p { font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); letter-spacing: calc((1rem / 18)); color: #000000; }
body .a_black_line, html .a_black_line { font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); letter-spacing: calc((1rem / 18)); color: #333333; }
body .a_black_line a, html .a_black_line a { color: #000000; }
body .a_black_line a:hover, html .a_black_line a:hover { color: #49bfab; }
body .pop-btn-flex, html .pop-btn-flex { display: flex; width: fit-content; justify-content: center; margin: 0rem auto; }
body .title, html .title { display: block; width: calc((640rem / 18)); height: calc((160rem / 18)); }
body .title-event, html .title-event { width: calc((1100rem / 18)); background: url(../images/common/title-event.png) no-repeat; background-size: 100% 100%; }
body .title-bonus, html .title-bonus { background: url(../images/common/title-bonus.png) no-repeat; background-size: 100% 100%; }
body .title-login, html .title-login { background: url(../images/common/title-login.png) no-repeat; background-size: 100% 100%; }
body .title-reward, html .title-reward { background: url(../images/common/title-reward.png) no-repeat; background-size: 100% 100%; }
body .title-step, html .title-step { background: url(../images/common/title-step.png) no-repeat; background-size: 100% 100%; }
body .title-faq, html .title-faq { background: url(../images/common/title-faq.png) no-repeat; background-size: 100% 100%; }
body .title-activities, html .title-activities { background: url(../images/common/title-activities.png) no-repeat; background-size: 100% 100%; }
body .object-money, html .object-money { display: block; width: calc((140vw / 1920) * 100); height: calc((140vw / 1920) * 100); background: url(../images/common/icon-money.png) no-repeat; background-size: 100%; position: absolute; }
body .mydeal, body .myshare, html .mydeal, html .myshare { margin-top: calc((20rem / 18)) !important; margin-bottom: calc((80rem / 18)); z-index: 1; position: relative; }
body .myshare, html .myshare { min-height: 300px; }
body .prize-list, html .prize-list { display: block; max-width: calc((960rem / 18)); width: 100%; margin: auto; }
body .prize-list ul, html .prize-list ul { display: flex; align-items: stretch; text-align: center; color: #000000; font-size: calc((22rem / 18)); line-height: calc((60rem / 18)); min-height: calc((60rem / 18)); height: auto; }
body .prize-list li, html .prize-list li { width: 25%; float: left; }
body .prize-list li br, html .prize-list li br { display: none; }
body .prize-list li a, html .prize-list li a { color: #000000; text-decoration: underline; font-weight: normal; }
body .prize-list ul:nth-child(even), html .prize-list ul:nth-child(even) { background: #f4f4f4; border-bottom: 1px solid #cccccc; }
body .prize-list ul:nth-child(even) li, html .prize-list ul:nth-child(even) li { border-left: 1px solid #cccccc; }
body .prize-list ul:nth-child(even) li:first-child, html .prize-list ul:nth-child(even) li:first-child { border-left: 0px solid #cccccc; }
body .prize-list ul:nth-child(odd), html .prize-list ul:nth-child(odd) { background: #ffffff; border-bottom: 1px solid #cccccc; }
body .prize-list ul:nth-child(odd) li, html .prize-list ul:nth-child(odd) li { border-left: 1px solid #cccccc; }
body .prize-list ul:nth-child(odd) li:first-child, html .prize-list ul:nth-child(odd) li:first-child { border-left: 0px solid #cccccc; }
body .prize-list ul:nth-child(1), html .prize-list ul:nth-child(1) { background: #41af9a; font-size: calc((24rem / 18)); line-height: calc((60rem / 18)); letter-spacing: calc((0.5rem / 18)); color: #fff; font-weight: bold; border-top-left-radius: calc((30rem / 18)); border-top-right-radius: calc((30rem / 18)); }
body .prize-list ul:nth-child(1) li, html .prize-list ul:nth-child(1) li { border: 0px; }
body .prize-list-month li, html .prize-list-month li { width: 20%; float: left; display: flex; flex-direction: column; justify-content: center; }
body .prize-list-month li p, html .prize-list-month li p { line-height: unset; }
body .prize-list-month li a, html .prize-list-month li a { width: 100%; display: block; border-bottom: 1px solid #cccccc; }
body .prize-list-month li a:last-child, html .prize-list-month li a:last-child { border-bottom: 0px solid #cccccc; }
@media only screen and (max-width: 1920px) { body, html { font-size: calc((18vw / 1920) * 100) !important; min-width: 100%; } }
@media only screen and (max-width: 1366px) { body, html { font-size: 14px !important; min-width: 100%; } }
@media only screen and (max-width: 1280px) { body, html { font-size: 12px !important; min-width: 100%; } }
@media only screen and (max-width: 1100px) { body, html { font-size: calc((18vw / 1440) * 100) !important; min-width: 100%; } }
@media only screen and (max-width: 767px) { body, html { font-size: calc((20vw / 1680) * 100) !important; min-width: 100%; } }
@media only screen and (max-width: 640px) { body, html { min-width: 100%; font-size: calc((24vw / 640) * 100) !important; }
  body header, html header { display: block; width: calc((420rem / 18)); height: calc((60rem / 18)); margin: auto; margin-bottom: 1rem; margin: auto; }
  body .title, html .title { display: block; width: calc((640rem / 18) * 0.6); height: calc((160rem / 18) * 0.6); }
  body h1, html h1 { font-size: calc((42rem / 18)); line-height: calc((56rem / 18)); margin-bottom: 1rem; }
  body h2, html h2 { font-size: calc((42rem / 18)); line-height: calc((56rem / 18)); }
  body h6, html h6 { font-size: calc((28rem / 18)); line-height: calc((42rem / 18)); }
  body p, html p { font-size: calc((22rem / 18)); line-height: calc((40rem / 18)); letter-spacing: calc((1rem / 18)); color: #000000; }
  body .a_black_line, html .a_black_line { letter-spacing: -0.05rem; }
  body .font-s-18, html .font-s-18 { font-size: calc((18rem / 18)); line-height: calc((28rem / 18)); }
  body .font-s-24, body .font-s-28, html .font-s-24, html .font-s-28 { font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); }
  body .font-s-36, html .font-s-36 { font-size: calc((32rem / 18)); line-height: calc((32rem / 18)); }
  body .font-s-32, html .font-s-32 { font-size: calc((28rem / 18)); line-height: calc((32rem / 18)); }
  body .font-line-h42, html .font-line-h42 { line-height: calc((42rem / 18)); }
  body .object-money, html .object-money { display: block; width: calc((65vw / 640) * 100); height: calc((65vw / 640) * 100); background: url(../images/common/icon-money.png) no-repeat; background-size: 100%; position: absolute; }
  body .mydeal, body .myshare, html .mydeal, html .myshare { margin-top: calc((40rem / 18)) !important; z-index: 1; position: relative; }
  body .prize-list, html .prize-list { display: block; max-width: calc((960rem / 18)); width: 100%; margin: auto; }
  body .prize-list ul, html .prize-list ul { font-size: calc((18rem / 18)); line-height: calc((20rem / 18)); }
  body .prize-list li, html .prize-list li { width: 33.3%; float: left; display: flex; align-items: center; justify-content: center; font-size: calc((18rem / 18)); line-height: calc((24rem / 18)); }
  body .prize-list p, html .prize-list p { font-size: calc((18rem / 18)); }
  body .prize-list li:nth-child(1), html .prize-list li:nth-child(1) { width: 35%; }
  body .prize-list li:nth-child(2), html .prize-list li:nth-child(2) { width: 15%; }
  body .prize-list li:nth-child(4), html .prize-list li:nth-child(4) { float: left; display: flex; align-items: center; justify-content: center; word-break: break-all; padding: 0 1rem; }
  body .prize-list ul:nth-child(1), html .prize-list ul:nth-child(1) { font-size: calc((18rem / 18)); line-height: calc((50rem / 18)); letter-spacing: calc((0.5rem / 18)); font-weight: bold; height: calc((50rem / 18)); min-height: calc((50rem / 18)); clear: both; border-top-left-radius: calc((20rem / 18)); border-top-right-radius: calc((20rem / 18)); }
  body .prize-list-month li, html .prize-list-month li { width: 20%; float: left; display: flex; flex-direction: column; justify-content: center; }
  body .prize-list-month li a, html .prize-list-month li a { line-height: calc((72rem / 18)); }
  body .prize-list-month li:nth-child(1), html .prize-list-month li:nth-child(1) { width: 10%; }
  body .prize-list-month li:nth-child(2), html .prize-list-month li:nth-child(2) { width: 18%; }
  body .prize-list-month li:nth-child(3), html .prize-list-month li:nth-child(3) { width: 20%; }
  body .prize-list-month li:nth-child(4), html .prize-list-month li:nth-child(4) { width: 32%; padding: 0; }
  body .prize-list-month li:nth-child(5), html .prize-list-month li:nth-child(5) { width: 20%; } }

.container { width: 100%; height: auto; position: relative; overflow: hidden; }

section { padding: 6% 0 !important; padding-bottom: 0 !important; }
@media only screen and (max-width: 1280px) { section { padding-top: 10% !important; } }
@media only screen and (max-width: 640px) { section { width: 100%; padding: 8% 0% !important; padding-top: 20% !important; } }

.content { width: calc((1240rem / 18)); margin: auto; padding: 5% 8% 5%; }
@media only screen and (max-width: 640px) { .content { width: 100%; padding: 0%; } }

.flex { display: flex; justify-content: space-between; flex-direction: row; align-items: center; }

.flex-center { justify-content: center !important; width: fit-content; margin: auto; }

#main { display: block; width: 100%; margin: auto; position: relative; padding: 0 !important; background: url(../images/main/main-bg.png) no-repeat #ffffff center center; background-size: 100% 100%; overflow: hidden; }
#main .kv-con, #main .kv-img { display: block; width: 100%; height: calc((1080vw / 1920) * 100); position: relative; }
#main .slogan_all { position: absolute; z-index: 3; top: 21%; left: 0; right: 0; margin: auto; }
#main .slogan_all .slogan { display: block; width: calc((1000vw / 1920) * 100); height: calc((450vw / 1920) * 100); background: url(../images/main/slogan.png) no-repeat; background-size: 100%; margin: auto; }
#main .slogan_all .img-plate { display: block; width: calc((400vw / 1920) * 100); height: calc((200vw / 1920) * 100); background: url(../images/main/img-plate.png) no-repeat; background-size: 100%; margin: auto; }
#main .img-man { display: block; width: calc((720vw / 1920) * 100); height: calc((1000vw / 1920) * 100); position: absolute; background: url(../images/main/img-man.png) no-repeat; background-size: 100%; top: 30%; left: 6%; }
#main .img-woman { display: block; width: calc((720vw / 1920) * 100); height: calc((1000vw / 1920) * 100); position: absolute; background: url(../images/main/img-woman.png) no-repeat; background-size: 100%; top: 29%; right: 7%; }
#main .object-money1 { display: block; top: auto; left: 12%; top: 14%; transform: rotate(-48deg); z-index: 1; }
#main .object-money2 { display: block; top: auto; right: 5%; bottom: 10%; left: auto; transform: rotate(26deg); z-index: 1; }
#main .icon-arrowdown { display: block; width: calc((60vw / 1920) * 100); height: calc((60vw / 1920) * 100); background: url(../images/main/icon-arrowdown.png) no-repeat; background-size: 100%; position: absolute; left: 0; right: 0; margin: auto; bottom: 5%; }
@media only screen and (max-width: 640px) { #main { display: block !important; display: block; width: calc((640vw / 640) * 100) !important; height: calc((650rem / 18)); background: url(../images/main/main-bg-m.png) no-repeat #ffffff; background-size: 100%; }
  #main .kv-con, #main .kv-img { height: calc((800rem / 18)); }
  #main .object-money2 { display: block; top: auto; right: 8%; top: 30%; left: auto; transform: rotate(-28deg); }
  #main .object-money1 { display: block; top: auto; left: 10%; top: 26%; transform: rotate(-48deg); z-index: 1; }
  #main .slogan_all { position: absolute; z-index: 3; top: 12%; left: 0; right: 3%; margin: auto; width: calc((640vw / 640) * 100); }
  #main .slogan_all .slogan { display: block; width: calc((1000vw / 640) * 50); height: calc((450vw / 640) * 50); background: url(../images/main/slogan.png) no-repeat; background-size: 100%; margin: auto; }
  #main .slogan_all .img-plate { display: block; width: calc((400vw / 640) * 50); height: calc((200vw / 640) * 50); background: url(../images/main/img-plate.png) no-repeat; background-size: 100%; margin: auto; }
  #main .icon-arrowdown { display: block; width: calc((50vw / 640) * 100); height: calc((50vw / 640) * 100); background: url(../images/main/icon-arrowdown.png) no-repeat; background-size: 100%; position: absolute; left: 0; right: 0; margin: auto; bottom: 20%; }
  #main .img-man { display: block; width: calc((720vw / 640) * 55); height: calc((1000vw / 640) * 55); position: absolute; background: url(../images/main/img-man.png) no-repeat; background-size: 100%; top: 34%; left: -6%; transform: rotate(12deg); }
  #main .img-woman { display: block; width: calc((720vw / 640) * 55); height: calc((1000vw / 640) * 55); position: absolute; background: url(../images/main/img-woman.png) no-repeat; background-size: 100%; top: 33%; right: -3%; transform: rotate(-1deg); } }

#event { display: block; width: 100%; height: calc((1170rem / 18)); margin: auto; position: relative; padding-top: 3rem !important; }
#event h1 { position: absolute; left: 0; right: 0; margin: auto; z-index: 1; top: 5rem; }
#event h1 header { position: relative; display: block; margin: auto; }
#event .content { width: 100%; margin: auto; display: flex; justify-content: center; align-items: flex-start; padding: 0 calc((50rem / 18)); position: relative; }
#event .content .bg-green { display: block; width: 50%; height: calc((1080rem / 18)); background: #49bfab; border-top-left-radius: calc((40rem / 18)); border-bottom-left-radius: calc((40rem / 18)); position: relative; }
#event .content .bg-yellow { display: block; width: 50%; height: calc((1080rem / 18)); background: #ffda7d; border-top-right-radius: calc((40rem / 18)); border-bottom-right-radius: calc((40rem / 18)); position: relative; }
#event .content .meal_A { display: block; width: calc((700rem / 18)); height: calc((600rem / 18)); background: url(../images/event/meal_A.png) no-repeat bottom center; background-size: cover; float: right; margin-top: calc((260rem / 18)); margin-right: calc((20rem / 18)); position: relative; z-index: 1; }
#event .content .meal_B { display: block; width: calc((700rem / 18)); height: calc((600rem / 18)); background: url(../images/event/meal_B.png) no-repeat bottom center; background-size: cover; float: left; margin-top: calc((260rem / 18)); margin-left: calc((20rem / 18)); position: relative; z-index: 1; }
#event .content .letter_A { display: block; width: calc((450rem / 18)); height: calc((450rem / 18)); background: url(../images/event/letter_A.png) no-repeat bottom center; background-size: cover; position: absolute; top: calc((250rem / 18)); left: calc((20rem / 18)); }
#event .content .letter_B { display: block; width: calc((450rem / 18)); height: calc((450rem / 18)); background: url(../images/event/letter_B.png) no-repeat bottom center; background-size: cover; position: absolute; top: calc((250rem / 18)); right: calc((-30rem / 18)); }
#event .content .img-man { display: block; width: calc((240rem / 18)); height: calc((700rem / 18)); background: url(../images/event/img_man.png) no-repeat bottom center; background-size: cover; position: absolute; left: 0; right: 0; top: calc((200rem / 18)); margin: auto; z-index: 3; }
#event .content .alert01 { display: block; width: calc((200rem / 18)); height: calc((100rem / 18)); position: absolute; background: url(../images/event/alert_01.png) no-repeat; background-size: cover; right: calc((-125rem / 18)); top: calc((20rem / 18)); }
#event .content .alert02 { display: block; width: calc((200rem / 18)); height: calc((100rem / 18)); position: absolute; background: url(../images/event/alert_02.png) no-repeat; background-size: cover; left: calc((-130rem / 18)); top: 0; }
#event .content .ps { display: block; width: calc((900rem / 18)); height: calc((80rem / 18)); background: url(../images/event/ps.png) no-repeat bottom center; background-size: cover; position: absolute; left: 0; right: 0; top: calc((950rem / 18)); margin: auto; }
#event .object-money1 { display: block; top: 60.5%; right: 5%; transform: rotate(140deg); z-index: 1; }
#event .object-money2 { display: block; left: 10%; top: 12.5%; position: absolute; transform: rotate(-40deg); z-index: 1; }
@media only screen and (max-width: 1100px) { #event .content .meal_A { width: calc((700rem / 18) * 0.8); height: calc((600rem / 18) * 0.8); margin-top: calc((360rem / 18)); margin-right: calc((20rem / 18)); }
  #event .content .meal_B { width: calc((700rem / 18) * 0.8); height: calc((600rem / 18) * 0.8); margin-top: calc((360rem / 18)); margin-left: calc((20rem / 18)); }
  #event .content .letter_A { display: block; width: calc((450rem / 18) * 0.8); height: calc((450rem / 18) * 0.8); top: calc((200rem / 18)); left: calc((70rem / 18)); }
  #event .content .letter_B { display: block; width: calc((450rem / 18) * 0.8); height: calc((450rem / 18) * 0.8); top: calc((200rem / 18)); right: calc((20rem / 18)); }
  #event .object-money2 { top: 20%; }
  #event .object-money1 { top: 75%; right: 10%; } }
@media only screen and (max-width: 640px) { #event { height: calc((1060rem / 18)); padding: 0 !important; margin-top: 0 !important; padding-top: 10% !important; }
  #event .title-event { width: calc((640rem / 18) * 0.7); height: calc((160rem / 18) * 0.7); background: url(../images/common/title-event-m.png) no-repeat; background-size: 100% 100%; margin: auto; }
  #event .object-money { display: none; }
  #event .content { width: 100%; margin: auto; display: flex; justify-content: center; align-items: flex-start; padding: 0 calc((30rem / 18)); position: relative; flex-direction: column; }
  #event .content .bg-green { display: block; width: 100%; height: calc((520rem / 18)); background: #49bfab; border-top-left-radius: calc((40rem / 18)); border-top-right-radius: calc((40rem / 18)); border-bottom-left-radius: 0; position: relative; }
  #event .content .bg-yellow { display: block; width: 100%; height: calc((490rem / 18)); background: #ffda7d; border-top-right-radius: 0; border-bottom-left-radius: calc((40rem / 18)); border-bottom-right-radius: calc((40rem / 18)); position: relative; }
  #event .content .meal_A { display: block; width: calc((700rem / 18) * 0.6); height: calc((600rem / 18) * 0.6); float: unset; margin: auto; margin-top: calc((130rem / 18)); position: relative; z-index: 1; }
  #event .content .meal_B { display: block; width: calc((700rem / 18) * 0.55); height: calc((600rem / 18) * 0.55); float: unset; margin: auto; margin-top: calc((50rem / 18)); position: relative; z-index: 10; }
  #event .content .letter_A { display: block; width: calc((450rem / 18) * 0.45); height: calc((450rem / 18) * 0.45); background: url(../images/event/letter_A.png) no-repeat bottom center; background-size: cover; position: absolute; bottom: -1rem; left: -1rem; top: unset; }
  #event .content .letter_B { display: block; width: calc((450rem / 18) * 0.45); height: calc((450rem / 18) * 0.45); background: url(../images/event/letter_B.png) no-repeat bottom center; background-size: cover; position: absolute; top: -0.4rem; right: calc((-30rem / 18)); }
  #event .content .img-man { display: block; width: calc((240rem / 18) * 0.6); height: calc((350rem / 18) * 0.6); background: url(../images/event/img_man.png) no-repeat top center; background-size: cover; position: absolute; left: 0; right: 0; top: calc((460rem / 18)); margin: auto; z-index: 3; }
  #event .content .alert01 { display: block; width: calc((200rem / 18) * 0.8); height: calc((100rem / 18) * 0.8); position: absolute; right: calc((-125rem / 18)); top: calc((20rem / 18)); }
  #event .content .alert02 { display: block; width: calc((200rem / 18) * 0.8); height: calc((100rem / 18) * 0.8); position: absolute; left: calc((-120rem / 18)); top: 0; }
  #event .content .ps { display: block; width: calc((600rem / 18) * 0.6); height: calc((180rem / 18) * 0.6); background: url(../images/event/ps-m.png) no-repeat bottom center; background-size: cover; position: absolute; left: 0; right: 0; top: calc((880rem / 18)); margin: auto; } }

#bonus { display: table; width: 100%; height: auto; margin: auto; position: relative; padding-top: 0rem !important; background: url(../images/bonus/bonus_bg.png) no-repeat bottom center; background-size: 100%; }
#bonus h1 { margin-bottom: 0; }
#bonus .content { width: 100%; margin: auto; display: flex; justify-content: center; align-items: flex-start; padding: 0 calc((50rem / 18)); position: relative; }
#bonus .content .bg-yellow { display: flex; width: 100%; max-height: calc((640rem / 18)); min-height: calc((550rem / 18)); background: #ffda7d; border-radius: calc((40rem / 18)); position: relative; align-items: center; overflow: hidden; }
#bonus .content .bg-lightyellow { width: calc((1840rem / 18)); height: calc((180rem / 18)); background: #ffe6ae; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; }
#bonus .content .box-all { display: flex; justify-content: center; flex-direction: column; width: calc((800rem / 18)); margin-left: 11%; margin-top: 3rem; margin-bottom: 4rem; }
#bonus .content .box { display: flex; width: calc((800rem / 18)); height: calc((165rem / 18)); background: #ffffff; border: 1px solid #000000; border-radius: calc((10rem / 18)); justify-content: left; flex-direction: row; flex-wrap: wrap; align-items: center; padding-left: 3rem; position: relative; margin-bottom: 1rem; }
#bonus .content .box .box-top { display: flex; justify-content: center; align-items: center; }
#bonus .content .box .box-bottom { display: flex; }
#bonus .content .box .box-bottom p { margin-right: 1rem; }
#bonus .content .box .box-bottom p a { color: #000000; }
#bonus .content .txt_bouns { display: block; width: calc((400rem / 18)); height: calc((200rem / 18)); background: url(../images/bonus/txt_bouns.png) no-repeat bottom center; background-size: cover; position: absolute; top: calc((120rem / 18)); left: 68%; }
#bonus .content .img-man { display: block; width: calc((500rem / 18)); height: calc((600rem / 18)); background: url(../images/bonus/img_man.png) no-repeat bottom center; background-size: cover; position: absolute; left: 61%; bottom: 0; margin: auto; z-index: 3; }
#bonus .content .title_major { display: block; width: calc((215rem / 18)); height: calc((60rem / 18)); background: url(../images/bonus/title_major.png) no-repeat bottom center; background-size: cover; margin-right: 2rem; }
#bonus .content .title_master { display: block; width: calc((215rem / 18)); height: calc((60rem / 18)); background: url(../images/bonus/title_master.png) no-repeat bottom center; background-size: cover; margin-right: 2rem; }
#bonus .content .img_iphone17 { display: block; width: calc((140rem / 18)); height: calc((160rem / 18)); background: url(../images/bonus/img_iphone17.png) no-repeat bottom center; background-size: cover; position: absolute; right: -3rem; top: -3rem; }
@media only screen and (max-width: 1100px) { #bonus .content .box-all { margin-left: 5%; }
  #bonus .content .img-man { left: 65%; width: calc((500rem / 18) * 0.8); height: calc((600rem / 18) * 0.8); } }
@media only screen and (max-width: 640px) { #bonus { display: table; height: auto; padding: 0 !important; background: url(../images/bonus/bonus_bg_m.png) no-repeat bottom center #ffffff; background-size: 100%; margin-top: 0 !important; padding-top: 6% !important; }
  #bonus .content { width: 100%; margin: auto; display: flex; justify-content: center; align-items: flex-start; padding: 0 calc((30rem / 18)); position: relative; }
  #bonus .content .bg-yellow { display: flex; width: 100%; max-height: calc((700rem / 18)); min-height: calc((400rem / 18)); background: #ffda7d; border-radius: calc((40rem / 18)); position: relative; align-items: flex-start; padding-top: calc((50rem / 18)); }
  #bonus .content .bg-lightyellow { height: calc((80rem / 18)); }
  #bonus .content .box-all { display: flex; justify-content: center; flex-direction: column; width: 100%; margin-left: 0; margin-top: 0; margin-bottom: 11rem; }
  #bonus .content .box { display: flex; width: calc((380rem / 18)); height: calc((165rem / 18)); border-radius: calc((10rem / 18)); justify-content: center; flex-direction: column; flex-wrap: wrap; align-items: center; padding-left: 0; position: relative; margin: auto; margin-bottom: 1rem; }
  #bonus .content .box .box-top { display: flex; width: 100%; justify-content: center; align-items: center; flex-direction: column; }
  #bonus .content .box .box-bottom { display: flex; }
  #bonus .content .box .box-bottom p { margin-right: 0.5rem; text-align: center; font-size: calc((16rem / 18)); line-height: calc((40rem / 18)); letter-spacing: calc((-0.5rem / 18)); }
  #bonus .content .box .box-bottom p a { color: #000000; }
  #bonus .content .box .font-s-32 { font-size: calc((24rem / 18)); }
  #bonus .content .img-man { display: block; width: calc((500rem / 18) * 0.55); height: calc((400rem / 18) * 0.55); background: url(../images/bonus/img_man.png) no-repeat top center; background-size: cover; position: absolute; left: 22%; bottom: 0; margin: auto; z-index: 3; transform: scaleX(-1); }
  #bonus .content .txt_bouns { display: block; width: calc((400rem / 18) * 0.55); height: calc((200rem / 18) * 0.55); top: unset; right: unset; left: 25%; bottom: calc((80rem / 18)); }
  #bonus .content .title_major { display: block; width: calc((215rem / 18) * 0.7); height: calc((60rem / 18) * 0.7); margin-right: 0; margin-bottom: 1rem; }
  #bonus .content .title_master { display: block; width: calc((215rem / 18) * 0.7); height: calc((60rem / 18) * 0.7); margin-bottom: 1rem; margin-right: 0; }
  #bonus .content .img_iphone17 { display: block; width: calc((140rem / 18) * 0.6); height: calc((160rem / 18) * 0.6); position: absolute; right: 0.1rem; top: -1.5rem; } }

#share { display: block; margin: auto; position: relative; padding-top: 0% !important; margin-top: -1px; }
#share h1 { margin-bottom: 0rem; margin-top: 0%; }
#share h1 header { position: relative; }
#share .content { margin: auto; position: relative; padding: 0; }
#share .con { display: block; width: calc((1440rem / 18)); height: calc((1050rem / 18)); margin: auto; position: relative; left: 0; right: 0; bottom: 0; top: calc((120rem / 18)); }
#share .login-share-bg { background: url(../images/share/share_bg.png) no-repeat bottom; background-size: 100% auto; }
#share .content-login { display: block; margin: auto; width: 100%; height: calc((1100rem / 18)); position: relative; }
#share .form { display: flex; width: calc((640rem / 18)); height: calc((760rem / 18)); border-radius: calc((10rem / 18)); justify-content: center; align-items: center; flex-direction: column; position: absolute; margin: auto; right: calc((50rem / 18)); top: 5rem; background: #ffffff; border: 2px solid #000000; padding-top: 3rem; z-index: 1; }
#share .form h1 { margin-top: -2rem; }
#share .form ul { display: table; float: left; position: relative; }
#share .form li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
#share .form li a { font-size: calc((28rem / 18)); line-height: calc((75rem / 18)); color: #49bfab; }
#share .form li .icon-input { position: absolute; right: 1rem; font-size: calc((28rem / 18)); color: #999999; }
#share .form .input { border: 1px solid #999999; }
#share .form .li-code { display: flex; width: 100%; height: calc((75rem / 18)); }
#share .form .li-code .input { width: calc((185rem / 18)); height: calc((75rem / 18)); }
#share .form .li-code .code { display: block; width: calc((185rem / 18)); height: calc((75rem / 18)); border-radius: calc((15rem / 18)); overflow: hidden; }
#share .form .li-code .code img { width: calc((185rem / 18)); height: calc((75rem / 18)); }
#share .form .li-code .icon-replay { display: flex; font-size: calc((54rem / 18)); color: #000000; }
#share .form .li-two-btn { width: 60%; margin: auto; }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #share .form .input { padding: 0 2.5%; } }
#share .share-login-people { display: block; width: calc((840rem / 18)); height: calc((840rem / 18)); position: absolute; top: 4rem; left: -4rem; }
#share .share-login-people .alert01 { display: block; width: calc((200rem / 18)); height: calc((100rem / 18)); position: absolute; background: url(../images/share/alert_01.png) no-repeat; background-size: cover; left: calc((310rem / 18)); top: calc((80rem / 18)); }
#share .a_line { line-height: calc((35rem / 18)) !important; color: #49bfab; border-bottom: 1px solid #49bfab; margin-bottom: 1rem; margin-top: 0.5rem; }
#share .a_line:hover { line-height: calc((35rem / 18)) !important; color: #ff6633; border-bottom: 1px solid #ff6633; }
#share .content-share { display: block; margin: auto; width: 100%; height: calc((1100rem / 18)); position: relative; }
#share .form-share-con { display: flex; width: calc((640rem / 18)); position: absolute; right: 0rem; margin: auto; padding-top: 2rem; top: -2rem; }
#share .form-share-con .tab-all { display: flex; position: absolute; top: calc((12rem / 18)); font-size: calc((28rem / 18)); align-items: center; left: calc((50rem / 18)); }
#share .form-share-con .tab-all .btn-tab a { display: block; width: calc((180rem / 18)); height: calc((64rem / 18)); font-size: calc((32rem / 18)); line-height: calc((64rem / 18)); letter-spacing: calc((1rem / 18)); border-top-left-radius: calc((20rem / 18)); border-top-right-radius: calc((20rem / 18)); margin: 1rem 0.2em; color: #999999; background: #ffffff; border: 2px solid #999999; border-bottom: 2px solid #000000; text-align: center; }
#share .form-share-con .tab-all .btn-green-foucs a { color: #ffffff; background: #49bfab; pointer-events: none; border: 2px solid #000000; border-bottom: 2px solid #ffffff; position: relative; z-index: 2; }
#share .form-share-con .tab-all .btn-yellow-foucs a { color: #ffffff; background: #fcb400; pointer-events: none; border: 2px solid #000000; border-bottom: 2px solid #ffffff; position: relative; z-index: 2; }
#share .form-share-con .form { height: auto; margin-left: 5rem; right: calc((50rem / 18)); }
#share .form-share-con .form .meal { display: block; width: calc((300rem / 18)); height: calc((120rem / 18)); }
#share .form-share-con .form .qrcode { display: block; width: calc((140rem / 18)); height: calc((140rem / 18)); }
#share .share-share-people { display: block; width: calc((840rem / 18)); height: calc((840rem / 18)); position: absolute; top: 4rem; left: -4rem; z-index: 1; }
#share .share-share-people .alert02 { display: block; width: calc((200rem / 18)); height: calc((100rem / 18)); position: absolute; background: url(../images/share/alert_02.png) no-repeat; background-size: cover; left: calc((80rem / 18)); top: calc((150rem / 18)); }
#share .content-prize { display: block; margin: auto; width: 100%; height: auto; background-size: 100% auto; position: relative; margin-top: -2px; padding-top: 5%; padding-bottom: 2%; min-height: calc((800rem / 18)); }
#share .content-prize .object-money { display: block; transform: rotate(-48deg); top: auto; left: 15%; top: 10%; }
#share .content-prize .object-money2 { display: block; top: auto; right: 12%; top: 34%; left: auto; transform: rotate(deg); }
#share .content-prize .share-prize-cover-bottom { display: block; width: 100%; height: calc((500rem / 18)); position: absolute; bottom: -1px; left: 0; right: 0; margin: auto; background: url(../images/share/share-prize-cover-bottom.png) no-repeat; background-size: 100% 100%; }
#share .content-prize .width-1000 { width: calc((1000rem / 18)); margin: auto; }
#share .content-prize .font-m-c { padding-top: 0.5rem; }
#share .header-share { display: flex; width: 90%; align-items: center; justify-content: center; margin-top: 2rem; margin-bottom: 1rem; }
#share .header-share p { color: #000000; text-align: center; }
#share .input-copy { display: block; width: calc((500rem / 18)); height: calc((80rem / 18)); background: #fff; border: 2px solid #000000; padding: 0 calc((20rem / 18)); font-size: calc((28rem / 18)); line-height: calc((80rem / 18)); color: #000000; text-align: left; margin-bottom: 1rem; cursor: pointer; text-align: left; border-radius: calc((10rem / 18)); position: relative; }
#share .input-copy .btn-copy a { position: absolute; top: -2px; right: -2px; width: calc((96rem / 18)); height: calc((80rem / 18)); margin: 0; border-radius: calc((10rem / 18)); font-size: calc((28rem / 18)); display: flex; align-items: center; justify-content: center; background: #49bfab; border: 2px solid #000000; }
#share .input-copy .btn-copy-yellow a { background: #fcb400; border: 2px solid #000000; }
#share .select-stock-btn { display: flex; margin: auto; margin-bottom: 1rem; width: 90%; justify-content: space-around; padding: 0 5%; }
#share .select-stock-btn p { text-align: left; font-size: calc((20rem / 18)); }
#share .select-stock-btn ul { display: flex; flex-wrap: wrap; }
#share .select-stock-btn li { margin: 0 calc((20rem / 18)); }
#share .select-stock-btn input[type="radio"] { display: none; }
#share .select-stock-btn input[type="radio"] + label { display: flex; width: calc((140rem / 18)); height: calc((110rem / 18)); border-radius: calc((15rem / 18)); background: top right #ffffff; margin: 0; font-size: calc((28rem / 18)); line-height: calc((32rem / 18)) !important; letter-spacing: calc((1rem / 18)); color: #999999; border: 2px solid #999999; text-align: center; cursor: pointer; transition: all 0.5s; position: relative; justify-content: center; align-items: center; font-weight: bold; }
#share .select-stock-btn input[type="radio"] + label .icon-check { display: block; width: calc((45rem / 18)); height: calc((45rem / 18)); background: url(../images/share/icon-check.svg) no-repeat; background-size: 100%; position: absolute; top: -1.5rem; left: -1.2rem; z-index: 3; opacity: 0; transition: all 0.5s; }
#share .select-stock-btn input[type="radio"] + label .icon-check:before { display: none; }
#share .select-stock-btn input[type="radio"] + label .icon-check-yellow { display: block; width: calc((45rem / 18)); height: calc((45rem / 18)); background: url(../images/share/icon-check-yellow.svg) no-repeat; background-size: 100%; position: absolute; top: -1.5rem; left: -1.2rem; z-index: 3; opacity: 0; transition: all 0.5s; }
#share .select-stock-btn input[type="radio"] + label .icon-check-yellow:before { display: none; }
#share .select-stock-btn input[type="radio"]:checked + label { color: #000000; border: 2px solid #000000; transition: all 0.5s; }
#share .select-stock-btn input[type="radio"]:checked + label .icon-check { opacity: 1; transition: all 0.5s; }
#share .pagination { display: flex; margin-bottom: 0 !important; }
#share .btn-popup-share-more a { color: #000000; }
#share .btn-popup-share-more a:hover { color: #ffda7d; }
@media only screen and (max-width: 1100px) { #share .content-prize .object-money { display: none; } }
@media only screen and (max-width: 640px) { #share { display: block; padding-top: 0% !important; margin-top: -2px; padding-bottom: 0 !important; margin-bottom: 0rem; }
  #share .con { display: block; width: 100%; height: auto; position: static; margin-left: 0; padding: 0; }
  #share .login-share-bg { background: url(../images/share/share_bg_m.png) no-repeat bottom; background-size: 100% auto; }
  #share .content-login { margin: auto; width: 100%; height: auto; position: relative; padding-bottom: 5%; padding-top: 10%; }
  #share .form { display: flex; width: 88%; justify-content: center; align-items: center; flex-direction: column; position: static; padding: 0 4%; padding-top: 12%; height: calc((560rem / 18)); }
  #share .form ul { display: table; width: 100%; }
  #share .form li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; position: relative; }
  #share .form li br { display: block; }
  #share .form li a { font-size: calc((22rem / 18)); line-height: calc((65rem / 18)); color: #49bfab; }
  #share .form .li-code { display: flex; width: 100%; height: calc((65rem / 18)); }
  #share .form .li-code .input { width: calc((155rem / 18)); height: calc((65rem / 18)); }
  #share .form .li-code .code { display: block; width: calc((155rem / 18)); height: calc((65rem / 18)); border-radius: calc((15rem / 18)); overflow: hidden; }
  #share .form .li-code .code img { width: calc((155rem / 18)); height: calc((65rem / 18)); }
  #share .form .li-two-btn { width: 54%; margin: auto; }
  #share .share-login-people { display: block; width: calc((840rem / 18) * 0.6); height: calc((840rem / 18) * 0.6); position: sticky; margin: auto; }
  #share .share-login-people .alert01 { width: calc((200rem / 18) * 0.8); height: calc((100rem / 18) * 0.8); left: calc((170rem / 18)); top: calc((30rem / 18)); }
  #share .a_line { line-height: calc((35rem / 18)) !important; color: #49bfab; border-bottom: 1px solid #49bfab; margin-bottom: 1rem; margin-top: 0.5rem; }
  #share .a_line:hover { line-height: calc((35rem / 18)) !important; color: #ff6633; border-bottom: 1px solid #ff6633; }
  #share .content-share { display: block; margin: auto; width: 100%; height: auto; position: relative; padding-bottom: 0rem; margin-top: -2px; background: url(../images/share/share_bg_m.png) no-repeat bottom; background-size: 100% auto; }
  #share .form-share-con { display: flex; width: 100%; height: calc((850rem / 18)); position: static; margin: auto; padding-top: 2rem; top: -2rem; }
  #share .form-share-con .tab-all { display: flex; position: absolute; top: calc((69rem / 18)); font-size: calc((18rem / 18)); align-items: center; left: calc((70rem / 18)); }
  #share .form-share-con .tab-all .font-s-32 { font-size: calc((22rem / 18)); }
  #share .form-share-con .tab-all .btn-tab a { display: block; width: calc((120rem / 18)); height: calc((50rem / 18)); font-size: calc((22rem / 18)); line-height: calc((50rem / 18)); letter-spacing: calc((1rem / 18)); border-top-left-radius: calc((20rem / 18)); border-top-right-radius: calc((20rem / 18)); margin: 1rem 0.2em; color: #999999; background: #ffffff; border: 2px solid #999999; border-bottom: 2px solid #000000; text-align: center; }
  #share .form-share-con .tab-all .btn-green-foucs a { color: #ffffff; background: #49bfab; pointer-events: none; border: 2px solid #000000; border-bottom: 2px solid #ffffff; position: relative; z-index: 2; }
  #share .form-share-con .tab-all .btn-yellow-foucs a { color: #ffffff; background: #fcb400; pointer-events: none; border: 2px solid #000000; border-bottom: 2px solid #ffffff; position: relative; z-index: 2; }
  #share .form-share-con .form { height: calc((660rem / 18)); margin-left: 0; margin: auto; width: 88%; padding-top: 10%; margin-top: calc((96rem / 18)); }
  #share .form-share-con .form .meal { display: block; width: calc((300rem / 18) * 0.7); height: calc((120rem / 18) * 0.7); }
  #share .form-share-con .form .qrcode { display: block; width: calc((140rem / 18) * 0.7); height: calc((140rem / 18) * 0.7); margin: 0.5rem auto; }
  #share .share-share-people { display: block; width: calc((840rem / 18) * 0.6); height: calc((840rem / 18) * 0.6); position: sticky; margin: auto; z-index: 1; }
  #share .share-share-people .alert02 { width: calc((200rem / 18) * 0.8); height: calc((100rem / 18) * 0.8); left: calc((12rem / 18)); top: calc((80rem / 18)); }
  #share .header-share { display: flex; width: 100%; margin-top: 1rem; margin-bottom: 1rem; }
  #share .input-copy { display: block; width: calc((360rem / 18)); height: calc((75rem / 18)); padding: 0 calc((20rem / 18)); font-size: calc((22rem / 18)); font-weight: bold; line-height: calc((75rem / 18)); margin: 1rem auto; margin-bottom: 1rem; }
  #share .input-copy .btn-copy a { position: absolute; width: calc((75rem / 18)); height: calc((75rem / 18)); font-size: calc((28rem / 18)); }
  #share .select-stock-btn { display: flex; margin: auto; margin-bottom: 1rem; width: 100%; justify-content: space-around; }
  #share .select-stock-btn p { text-align: left; font-size: calc((20rem / 18)); }
  #share .select-stock-btn ul { display: flex; flex-wrap: wrap; }
  #share .select-stock-btn li { margin: 0 calc((20rem / 18)); }
  #share .select-stock-btn input[type="radio"] + label { display: flex; width: calc((105rem / 18)); height: calc((95rem / 18)); border-radius: calc((15rem / 18)); background: top right #ffffff; margin: 0; font-size: calc((22rem / 18)); font-weight: bold; line-height: calc((28rem / 18)) !important; letter-spacing: calc((1rem / 18)); text-align: center; cursor: pointer; transition: all 0.5s; position: relative; justify-content: center; align-items: center; }
  #share .select-stock-btn input[type="radio"] + label .icon-check { display: block; width: calc((40rem / 18)); height: calc((40rem / 18)); }
  #share .select-stock-btn input[type="radio"] + label .icon-check:before { display: none; }
  #share .select-stock-btn input[type="radio"]:checked + label { transition: all 0.5s; }
  #share .select-stock-btn input[type="radio"]:checked + label .icon-check { opacity: 1; transition: all 0.5s; }
  #share .content-prize { display: block; margin: auto; width: 100%; padding: 0 5%; padding-top: 15%; padding-bottom: 0; height: auto; margin-top: -2px; min-height: calc((650rem / 18)); }
  #share .content-prize .object-money { display: none; }
  #share .content-prize .font-m-c { text-align: center !important; width: 100%; margin: auto; font-size: calc((18rem / 18)); line-height: calc((24rem / 18)); } }

#step { display: block; height: calc((940rem / 18)); margin: auto; margin-top: 8rem; position: relative; background: url(../images/step/bg.png) no-repeat bottom #49bfab; background-size: cover; }
#step .content { width: calc((1440rem / 18)); margin: auto; padding: 0; height: calc((640rem / 18)); display: flex; position: relative; }
#step h1 { position: relative; }
#step h1 header { position: relative; }
#step .step-list { display: flex; justify-content: space-between; margin-top: 3rem; clear: both; align-items: center; width: calc((850rem / 18)); }
#step .box-m { display: block; width: calc((220rem / 18)); height: calc((280rem / 18)); }
#step .step { display: flex; position: relative; flex-direction: column; justify-content: center; align-items: center; }
#step .step span { display: block; width: calc((80rem / 18)); height: calc((80rem / 18)); margin-bottom: 1rem; }
#step .step .number { display: block; width: calc((80rem / 18)); height: calc((80rem / 18)); position: absolute; top: -1.5rem; left: -1.5rem; z-index: 1; }
#step .step p { font-size: calc((28rem / 18)); text-align: center; }
#step .icon-left-arrow { display: block; width: calc((30rem / 18)); height: calc((50rem / 18)); background: url(../images/step/icon-left-arrow.svg) no-repeat; background-size: 100%; }
#step .img-people { display: block; width: calc((600rem / 18)); height: calc((600rem / 18)); background: url(../images/step/img_people_sofa.png) no-repeat; background-size: 100%; position: relative; }
#step .img-people .img-people-man { display: block; width: calc((600rem / 18)); height: calc((600rem / 18)); background: url(../images/step/img_people_man.png) no-repeat; background-size: 100%; position: absolute; left: 0; top: 0; transform-origin: left bottom; }
#step .img-people .img-people-woman { display: block; width: calc((600rem / 18)); height: calc((600rem / 18)); background: url(../images/step/img_people_woman.png) no-repeat; background-size: 100%; position: absolute; left: 0; top: 0; }
#step .img-people .alert01 { display: block; width: calc((200rem / 18)); height: calc((100rem / 18)); position: absolute; background: url(../images/step/alert_01.png) no-repeat; background-size: cover; left: calc((90rem / 18)); top: calc((100rem / 18)); }
#step .img-people .object-money { display: block; width: calc((60rem / 18)); height: calc((60rem / 18)); position: absolute; transform: rotate(18deg); top: calc((20rem / 18)); right: calc((170rem / 18)); }
#step .cover-top { display: block; width: calc((1920vw / 1920) * 100); height: calc((200vw / 1920) * 100); background: url(../images/step/cover_top.png) no-repeat top; background-size: 100%; position: absolute; top: -8rem; }
#step .cover-top-chagne { display: block; width: calc((1920vw / 1920) * 100); height: calc((450vw / 1920) * 100); position: absolute; top: -20rem; }
#step .cover-bottom { display: block; width: calc((1920vw / 1920) * 100); height: calc((180vw / 1920) * 100); background: url(../images/step/cover_bottom.png) no-repeat; background-size: 100%; position: absolute; z-index: 2; }
@media only screen and (max-width: 1100px) { #step .content { margin-left: calc((50rem / 18)); }
  #step .cover-top-chagne { display: block; width: calc((1920vw / 1920) * 100); height: calc((450vw / 1920) * 100); position: absolute; top: -18rem; } }
@media only screen and (max-width: 640px) { #step { display: block !important; background: url(../images/step/bg-m.png) no-repeat bottom #49bfab; background-size: cover; height: auto; padding-top: 10% !important; margin-top: -2px; }
  #step .content { width: 100%; padding: 5% 8% 5%; height: auto; flex-direction: column; margin: auto; }
  #step .cover-top { display: block; width: calc((640vw / 640) * 100); height: calc((130vw / 640) * 100); background: url(../images/step/cover_top_m.png) no-repeat top; background-size: 100%; position: absolute; top: -4.2rem; }
  #step .cover-top-chagne { display: block; width: calc((640vw / 640) * 100); height: calc((600vw / 640) * 100); background: url(../images/step/cover_top_m.png) no-repeat top; background-size: 100%; position: absolute; top: -15rem; }
  #step .img-people { display: block; width: calc((700rem / 18)*0.6); height: calc((700rem / 18)*0.6); background: url(../images/step/img_people_sofa.png) no-repeat; background-size: 100%; position: relative; }
  #step .img-people .img-people-man { display: block; width: calc((700rem / 18)*0.6); height: calc((700rem / 18)*0.6); background: url(../images/step/img_people_man.png) no-repeat; background-size: 100%; position: absolute; left: 0; top: 0; transform-origin: left bottom; }
  #step .img-people .img-people-woman { display: block; width: calc((700rem / 18)*0.6); height: calc((700rem / 18)*0.6); background: url(../images/step/img_people_woman.png) no-repeat; background-size: 100%; position: absolute; left: 0; top: 0; }
  #step .img-people .alert01 { display: block; width: calc((200rem / 18) * 0.8); height: calc((100rem / 18) * 0.8); position: absolute; background: url(../images/step/alert_01_m.png) no-repeat; background-size: cover; left: calc((5rem / 18)); top: calc((60rem / 18)); }
  #step .img-people .object-money { display: block; width: calc((50rem / 18)); height: calc((50rem / 18)); position: absolute; top: calc((10rem / 18)); right: calc((120rem / 18)); }
  #step h1 { position: relative; }
  #step h1 header { position: relative; }
  #step .step-list { display: flex; justify-content: space-between; margin-top: 2rem; margin-bottom: 2rem; clear: both; align-items: center; width: 100%; position: relative; z-index: 2; }
  #step .step { display: flex; width: calc((120rem / 18)); height: calc((200rem / 18)); border-radius: calc((15rem / 18)); }
  #step .step span { display: block; width: calc((85rem / 18) * 0.8); height: calc((85rem / 18) * 0.8); margin-bottom: 1rem; }
  #step .step .number { display: block; width: calc((80rem / 18) * 0.7); height: calc((80rem / 18) * 0.7); position: absolute; top: -1rem; left: -1rem; z-index: 1; }
  #step .step p { font-size: calc((22rem / 18)); line-height: calc((28rem / 18)); text-align: center; }
  #step .icon-left-arrow { display: block; width: calc((30rem / 18) * 0.5); height: calc((50rem / 18) * 0.5); position: relative; z-index: 1; } }

.step-change { margin-top: -3rem !important; }

.line-bg { display: block; background: url(../images/share/line.png) top center #ffe6ae; background-size: 100%; }
@media only screen and (max-width: 640px) { .line-bg { display: block; background: url(../images/share/line-m.png) top center #ffe6ae; background-size: 100%; } }

#faq { display: block; width: 100%; min-height: calc((1100rem / 18)); margin: auto; background: #ffe6ae; font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); color: #333333; overflow: hidden; position: relative; }
#faq .content { width: calc((1100rem / 18)); margin: auto; padding: 0% 0% 5%; padding-bottom: 0%; position: relative; z-index: 3; }
#faq .cover-bottom { display: block; width: calc((1920vw / 1920) * 100); height: calc((400vw / 1920) * 100); background: url(../images/faq/cover_bottom.png) no-repeat; background-size: 100%; position: absolute; z-index: 1; }
#faq h1 { position: relative; }
#faq .step-content { display: flex; width: calc((1000rem / 18)) !important; margin: auto; height: auto; }
#faq .faq-list { display: block; clear: both; margin-bottom: calc((30rem / 18)); }
#faq .faq-list * a { color: #49bfab; }
#faq .faq-list .question { display: block; width: 100%; min-height: calc((70rem / 18)); position: relative; font-weight: 500; border: 1px solid #000000; border-radius: calc((10rem / 18)); margin-bottom: 1rem; background: #ffffff; }
#faq .faq-list .faq-txt-con { display: flex; width: 100%; padding: calc((30rem / 18)); padding-right: calc((50rem / 18)); position: relative; cursor: pointer; }
#faq .faq-list .faq-txt-con .icon-chevron-down { display: block; width: calc((32rem / 18)); height: calc((32rem / 18)); font-family: "icon" !important; content: "\e919"; font-size: calc((32rem / 18)); line-height: calc((32rem / 18)); position: absolute; right: calc((8rem / 18)); transition: 0.5s; bottom: 0; top: 0; margin: auto; color: #000000; }
#faq .faq-list .faq-txt-con .icon-chevron-down-180 { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); position: absolute; transition: 0.5s; }
#faq .faq-list .faq-txt-con span { display: flex; min-width: calc((50rem / 18)); max-width: calc((50rem / 18)); }
#faq .faq-list .answer-txt-con { margin: calc((10rem / 18)) 0; padding: 0 calc((50rem / 18)); width: 100%; color: #666666; margin-top: -0.5rem; margin-bottom: calc((40rem / 18)); }
@media only screen and (max-width: 640px) { #faq { display: block !important; padding-top: 20% !important; font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); padding-bottom: 5% !important; min-height: auto; height: auto; }
  #faq .content { width: 100%; margin: auto; padding: 0 5%; padding-bottom: 10%; }
  #faq .cover-bottom { display: block; width: calc((640vw / 640) * 100); height: calc((600vw / 640) * 100); background: url(../images/faq/cover_bottom_m.png) no-repeat bottom center; background-size: cover; position: absolute; z-index: 1; }
  #faq .faq-list .question { display: block; width: 100%; min-height: calc((70rem / 18)); position: relative; }
  #faq .faq-list .faq-txt-con { padding: calc((20rem / 18)); padding-right: calc((40rem / 18)); }
  #faq .faq-list .answer-txt-con { font-size: calc((22rem / 18)); padding: 0 calc((70rem / 18)); padding-right: calc((40rem / 18)); }
  #faq .step-content { width: calc((300rem / 18)) !important; margin-bottom: 4rem; } }

#activities { display: table; width: 100%; height: auto; margin: auto; background: #c8ede6; font-size: calc((28rem / 18)); line-height: calc((42rem / 18)); color: #333333; overflow: hidden; position: relative; }
#activities .ps { margin: 5rem auto; }
#activities h1 { display: table; position: relative; cursor: pointer; }
#activities .btn-down { display: flex; width: calc((48rem / 18)); height: calc((48rem / 18)); background: #fcb400; border-radius: calc((48rem / 18)); border: 2px solid #000000; align-items: center; justify-content: center; text-align: center; position: absolute; top: 3rem; right: 6rem; cursor: pointer; }
#activities .btn-down i { color: #fff; font-size: calc((28rem / 18)); margin-left: 0.5rem; }
#activities .content { width: calc((1200rem / 18)); margin: auto; padding: 0%; }
#activities .cover-top-blue { display: none; }
@media only screen and (max-width: 640px) { #activities { display: block !important; font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); padding-bottom: 0% !important; min-height: auto; }
  #activities .ps { margin: 5rem auto; margin-top: 1rem; }
  #activities .content { width: 100%; padding: 5% 8% 5%; }
  #activities .btn-down { top: 1.2rem; right: 3rem; width: calc((40rem / 18)); height: calc((40rem / 18)); } }

footer { display: flex; width: 100%; height: calc((90rem / 18)); padding: 1.5% 0; font-size: calc((16rem / 18)); line-height: calc((30rem / 18)); letter-spacing: calc((1rem / 18)); text-align: center; color: #000000; clear: both; background: #ffffff; justify-content: center; align-items: center; }
footer span { display: block; margin-bottom: 0.5rem; }
footer .none_block { display: inline-block !important; }
footer br { display: none; }
@media only screen and (max-width: 1024px) { footer { width: 100%; margin-top: 4%; padding: 4% 1%; }
  footer .none_block { display: none !important; } }
@media only screen and (max-width: 640px) { footer { width: calc((480rem / 18)); margin-top: 4%; padding: 4% 1%; margin-bottom: 0% !important; font-size: calc((14rem / 18)); line-height: calc((24rem / 18)); height: calc((90rem / 18)); box-sizing: border-box; word-break: break-word; /* 避免文字溢出 */ }
  footer br { display: block; } }

.precautions { width: 100%; }
.precautions p { font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); }
.precautions a { color: #ff6633; font-weight: bold; }
.precautions a:hover { color: #49bfab; }
.precautions ul { list-style-type: decimal; list-style-position: outside; margin-left: calc((30rem / 18)); }
.precautions .ol_zero { list-style-type: Decimal-leading-zero; padding-left: calc((55rem / 18)); }
.precautions .ol_numbered-list { list-style: none; counter-reset: item; margin-left: 2.5rem; }
.precautions .ol_numbered-list > li { counter-increment: item; position: relative; }
.precautions .ol_numbered-list > li::before { content: "(" counter(item,decimal) ") "; position: absolute; left: -2em; }
.precautions .ol_upper_roman { list-style-type: upper-roman !important; padding-left: calc((50rem / 18)); }
.precautions .ol_upper_roman li::before { content: " "; }
.precautions .ul_disc { list-style-type: disc; }
.precautions .ul_article { color: #333333; }
.precautions .ul_article li { margin-bottom: calc((5rem / 18)); }
.precautions .ul_article li a { color: #333333 !important; text-decoration: none; }
.precautions .ul_article li a:hover { color: #333333 !important; text-decoration: underline; }
.precautions li { padding-right: calc((25rem / 18)); margin-bottom: calc((10rem / 18)); font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); float: none; text-align: left; width: 100%; }
@media only screen and (max-width: 640px) { .precautions { padding: 0; }
  .precautions li { padding-right: calc((0rem / 18)); font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); }
  .precautions .ul_article { color: #666666; font-size: calc((22rem / 18)); margin-bottom: calc((3rem / 18)); }
  .precautions .ul_article li a { font-size: calc((22rem / 18)); line-height: calc((22rem / 18)); color: #666666 !important; }
  .precautions .ol_zero { padding-left: calc((40rem / 18)); }
  .precautions .ol_upper_roman { padding-left: calc((40rem / 18)); } }

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

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

.pc_inline { display: inline-block !important; }
@media only screen and (max-width: 640px) { .pc_inline { display: none !important; } }

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

.popup { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; background: no-repeat center center rgba(0, 0, 0, 0.7); position: fixed; z-index: 999; min-height: calc((760rem / 18)); overflow:auto ; top: -200%; opacity: 0; }
.popup .btn-background, .popup .btn-background-i-know { position: fixed; width: 100%; height: 100%; background: no-repeat center center rgba(255, 255, 255, 0); }
.popup .btn-background-no-touch { position: fixed; width: 100%; height: 100%; background: no-repeat center center rgba(255, 255, 255, 0); pointer-events: auto; }
.popup .btn-close, .popup .btn-close-i-know { width: calc((60rem / 18)); height: calc((60rem / 18)); position: absolute; right: calc((10rem / 18)); top: calc((10rem / 18)); background: url(../images/popup/btn-close.svg) no-repeat center top; background-size: calc((60rem / 18)) calc((60rem / 18)); z-index: 11; cursor: pointer; }
.popup .popup-content { max-width: calc((560rem / 18)); width: 100%; background: #ffe6ae; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); border-radius: calc((15rem / 18)); padding: 2.5% 1.5%; padding-top: 3.5%; margin: auto; z-index: 2; position: relative; }
.popup .popup-content-page { width: calc((840rem / 18)); max-width: calc((1440rem / 18)); }
.popup .popup-content-page .content-text { height: calc((540rem / 18)); padding-left: 0.5rem; padding-right: 1rem; }
.popup .popup-content-share { width: calc((1024rem / 18)); max-width: 100%; height: calc((600rem / 18)); }
.popup .popup-content-share .content-text { height: calc((420rem / 18)); padding-left: 3rem; padding-right: 3rem; }
.popup .popup-content-message { width: calc((560rem / 18)); }
.popup .margin-left_10 { margin-left: 0.5rem; margin-top: 1.2rem; }
.popup .margin-left_10 ul li { padding-right: calc((15rem / 18)); }
.popup .mydeal, .popup .myshare { margin-top: calc((20rem / 18)) !important; margin-bottom: calc((20rem / 18)); }
@media only screen and (max-width: 640px) { .popup { overflow-y: auto; }
  .popup .btn-close, .popup .btn-close-i-know { width: calc((40rem / 18)); height: calc((40rem / 18)); position: absolute; right: calc((10rem / 18)); top: calc((10rem / 18)); background: url(../images/popup/btn-close.svg) no-repeat center top; background-size: calc((40rem / 18)) calc((40rem / 18)); z-index: 11; cursor: pointer; }
  .popup .popup-content { width: calc((400rem / 18)); padding: 5.8%; padding-top: 8%; }
  .popup .popup-content-page { width: calc((450rem / 18)); padding: 10% 4%; padding-bottom: 4%; }
  .popup .popup-content-page .content-text { height: calc((450rem / 18)); }
  .popup .popup-content-share { width: calc((450rem / 18)); max-width: 100%; height: calc((450rem / 18)); padding: 5.8% 4%; }
  .popup .popup-content-share .content-text { height: calc((340rem / 18)); width: calc((420rem / 18)); padding: 0; padding-right: 2rem; }
  .popup .margin-left_10 { margin-left: 0rem; margin-top: 0rem; }
  .popup .margin-left_10 ul li { padding-right: calc((0rem / 18)); }
  .popup .mydeal, .popup .myshare { margin-top: calc((0rem / 18)) !important; } }

.popup-alert { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; position: fixed; z-index: 999; left: 0; right: 0; top: -200%; opacity: 0; margin: auto; }
.popup-alert .alert-content { display: flex; flex-direction: column; justify-content: center; min-width: calc((400rem / 18)); max-width: calc((540rem / 18)); min-height: calc((250rem / 18)); background: #ffe6ae; border-radius: calc((15rem / 18)); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); padding: 2% 2%; padding-top: 3.5%; margin: auto; }
.popup-alert .alert-content .txt-con { text-align: center; font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); font-weight: normal; margin-bottom: 0.5rem; }
.popup-alert .alert-content-style2 { display: flex; flex-direction: column; justify-content: center; min-width: calc((420rem / 18)); max-width: calc((540rem / 18)); min-height: calc((250rem / 18)); background: #ffe6ae; border-radius: calc((15rem / 18)); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); padding: 2% 2%; padding-top: 3%; margin: auto; }
.popup-alert .alert-content-style2 .txt-con { text-align: center; font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); font-weight: normal; margin-bottom: 0.5rem; }
@media only screen and (max-width: 640px) { .popup-alert .alert-content { padding-top: 10%; border-radius: calc((15rem / 18)); }
  .popup-alert .alert-content-style2 { padding-top: 7%; padding-bottom: 3%; } }

.popup-i-know { opacity: 0; top: -200%; }
.popup-i-know .popup-content { display: table; width: calc((640rem / 18)); height: auto; padding: 3% 1%; }
@media only screen and (max-width: 640px) { .popup-i-know .popup-content { display: table; margin-top: 15vh; width: calc((420rem / 18)); padding: 10% 5%; }
  .popup-i-know .popup-content .txt { margin-top: 17%; padding-bottom: 40px; } }

.popup-alert-prize { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; position: fixed; z-index: 999; left: 0; right: 0; top: -200%; opacity: 0; margin: auto; }
.popup-alert-prize .alert-content { display: flex; flex-direction: column; justify-content: center; min-width: calc((400rem / 18)); max-width: calc((540rem / 18)); min-height: calc((250rem / 18)); background: #ffe6ae; border-radius: calc((15rem / 18)); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); padding: 2% 2%; padding-top: 3.5%; margin: auto; }
.popup-alert-prize .alert-content .txt-con { text-align: center; font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); font-weight: normal; margin-bottom: 0.5rem; }
.popup-alert-prize .content-text { height: calc((180rem / 18)); text-align: center; }
.popup-alert-prize .content-text p { margin-bottom: 1rem; }
@media only screen and (max-width: 640px) { .popup-alert-prize .alert-content { padding-top: 10%; border-radius: calc((15rem / 18)); } }

.popup-alert-open { top: 0; opacity: 1; }

.popup-open { top: 0 !important; opacity: 1; }

#page { display: block; margin: auto; position: relative; padding-top: 0 !important; width: calc((540rem / 18)); /* Hide the browser's default checkbox */ /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a blue background */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }
#page .main { width: calc((540rem / 18)); margin: auto; }
#page .main img { width: 100%; }
#page .content { width: calc((540rem / 18)); margin: auto; padding: 0%; padding-bottom: 5%; }
#page .line { border-bottom: 1px dashed #cccccc; width: calc((540rem / 18)); margin: 0.5rem auto; }
#page .ps { margin: 1rem auto; }
#page .form { display: flex; width: 100%; max-width: calc((540rem / 18)); justify-content: center; align-items: center; flex-direction: column; position: static; padding: 0 7%; margin: auto; margin-top: 1rem; }
#page .form .input { border: 1px solid #999999; width: 100%; }
#page .form ul { display: block; width: 100%; }
#page .form li { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
#page .form .li-code { display: flex; width: 100%; height: calc((75rem / 18)); }
#page .form .li-code .input { width: calc((210rem / 18)); height: calc((75rem / 18)); }
#page .form .li-code .code { display: block; width: calc((180rem / 18)); height: calc((75rem / 18)); border-radius: calc((15rem / 18)); overflow: hidden; border: 1px solid #e0e0e0; }
#page .form .li-code .code img { width: calc((180rem / 18)); height: calc((75rem / 18)); }
#page .form .li-code .icon-replay { display: flex; font-size: calc((54rem / 18)); color: #000000; }
#page .input_checkbox { display: block; position: relative; padding-left: calc((40rem / 18)); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; min-width: calc((40rem / 18)) !important; }
#page .input_checkbox b { margin-left: 1rem; display: flex; }
#page .input_checkbox input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
#page .checkmark { position: absolute; top: 0; left: 0; bottom: 0; margin: auto; height: calc((40rem / 18)); width: calc((40rem / 18)); background: #ffffff; border: 1px solid #999999; border-radius: calc((5rem / 18)); }
#page .input_checkbox:hover input[type="checkbox"] ~ .checkmark { background: #ffffff; border: 1px solid #999999; border-radius: calc((5rem / 18)); transition: all 0.2s ease-in-out; }
#page .input_checkbox input[type="checkbox"]:checked ~ .checkmark { background-color: #999999; border: 1px solid #999999; border-radius: calc((5rem / 18)); }
#page .checkmark:after { content: ""; position: absolute; display: none; }
#page .input_checkbox input[type="checkbox"]:checked ~ .checkmark:after { display: block; }
#page .checkmark:after { left: 0; top: 0.2rem; right: 0; margin: auto; width: calc((10rem / 18)); height: calc((20rem / 18)); border: solid white; border-width: 0 calc((6rem / 18)) calc((6rem / 18)) 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
@media only screen and (max-width: 640px) { #page { width: 100%; }
  #page .main { width: 100%; margin: auto; }
  #page .main img { width: 100%; }
  #page .ps { margin: 0.5rem auto; }
  #page .content { width: 100%; margin: auto; padding: 0%; padding-bottom: 5%; }
  #page .line { border-bottom: 1px dashed #cccccc; width: 100%; margin: 0.5rem auto; }
  #page .form { display: flex; width: 100%; width: 100%; justify-content: center; align-items: center; flex-direction: column; position: static; padding: 0 7%; margin: auto; margin-top: 1rem; }
  #page .form .input { border: 1px solid #999999; width: 100%; }
  #page .form ul { display: block; width: 100%; }
  #page .form li { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
  #page .form .li-code { display: flex; width: 100%; height: calc((65rem / 18)); }
  #page .form .li-code .input { width: calc((180rem / 18)); height: calc((65rem / 18)); }
  #page .form .li-code .code { display: block; width: calc((155rem / 18)); height: calc((65rem / 18)); border-radius: calc((10rem / 18)); overflow: hidden; border: 1px solid #e0e0e0; }
  #page .form .li-code .code img { width: calc((155rem / 18)); height: calc((65rem / 18)); }
  #page .form .li-code .icon-replay { display: flex; font-size: calc((54rem / 18)); color: #000000; } }

.step-content { display: flex; width: calc((1100rem / 18)); margin: auto; height: auto; }
.step-content br { display: block; }
@media only screen and (max-width: 640px) { .step-content { width: calc((300rem / 18)) !important; margin-bottom: 3rem; }
  .step-content br { display: none; } }

.qrcode { display: block; width: calc((185rem / 18)); height: calc((185rem / 18)); margin: 7% auto; }

.width100 { width: 100%; }
.width100 a { margin: auto; }

#toast-container { position: fixed; bottom: 0; left: 0; right: 0; top: -200%; margin: auto; z-index: 9999; max-width: calc((420rem / 18)); height: calc((100rem / 18)); pointer-events: none; }

.toast { min-width: calc((340rem / 18)); margin-top: calc((10rem / 18)); padding: calc((12rem / 18)) calc((40rem / 18)); color: #ffffff; background-color: #49bfab; border: 1px solid #000000; border-radius: 5rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); opacity: 1; transform: translateY(30px); transition: opacity 0.3s ease, transform 0.3s ease; text-align: center; font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); font-weight: bold; }
.toast .icon-check-ok { display: block; width: calc((50rem / 18)); height: calc((50rem / 18)); background: url(../images/popup/icon-check-ok.svg) no-repeat; background-size: 100% 100%; position: absolute; left: -1rem; top: 0; bottom: 0; margin: auto; }

.toast.show { opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease; }

/* ---reset.css--- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { padding: 0; margin: 0; }

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

.loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
    display: none;
    cursor: wait
}

.url-overflow-hidden {
    overflow: hidden;
}

.iframe-hidden {
    display: none;
    overflow: hidden;
}

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

.cert-iframe-fullheight {
    height: 100dvh;
}