@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(https://fonts.googleapis.com/earlyaccess/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-l-10 { margin-left: calc((10rem / 18)) !important; }

.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-purpledark { color: #071b7e !important; }

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

.font-yellow { color: #ebff00 !important; }

.font-green { color: #04fdbc !important; }

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

.font-white { color: #ffffff !important; }
.font-white a { text-decoration: underline; color: #ffffff !important; }
.font-white a:hover { text-decoration: underline; 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 #04fdbc !important; outline: none; transition: all .5s; }
body .input-red:focus, html .input-red:focus { border: 1px solid #ff6c8e !important; outline: none; transition: all .5s; }
body .page-link, html .page-link { 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: #ebff00; 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(104, 95, 254, 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: #071b7e; }
.menu li a:hover::after, .menu li a:focus::after { width: 100%; background: #071b7e; }
@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: #009650; 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: #009650; 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: flex; align-items: center; justify-content: center; width: calc((280rem / 18)); height: calc((84rem / 18)); background: #04fdbc; border-radius: 0 calc((12rem / 18)) 0 0; box-shadow: calc((-8rem / 18)) calc((8rem / 18)) 0 #071b7e; text-decoration: none; transition: 0.3s; position: relative; font-size: calc((36rem / 18)); font-weight: bold; border: calc((2rem / 18)) solid #071b7e; color: #071b7e; }
.btn a::before { content: ''; filter: drop-shadow(calc((36rem / 18)) 0 0 #071b7e) drop-shadow(calc((36rem / 18)) 0 0 #071b7e) drop-shadow(calc((36rem / 18)) 0 0 #071b7e); }
.btn a::after { content: ''; margin-left: calc((10rem / 18)); width: 0; height: 0; border-style: solid; border-width: calc((12rem / 18)) 0 calc((12rem / 18)) calc((20rem / 18)); border-color: transparent transparent transparent #071b7e; }
.btn a:hover { color: #071b7e; transform: translate(calc((-4rem / 18)), calc((4rem / 18))); background: #ebff00; box-shadow: calc((-4rem / 18)) calc((4rem / 18)) 0 #071b7e; }
@media only screen and (max-width: 640px) { .btn a { width: calc((180rem / 18)); height: calc((60rem / 18)); padding-left: calc((2rem / 18)); font-size: calc((28rem / 18)); }
  .btn a::before { filter: drop-shadow(calc((30rem / 18)) 0 0 #071b7e) drop-shadow(calc((30rem / 18)) 0 0 #071b7e) drop-shadow(calc((30rem / 18)) 0 0 #071b7e); }
  .btn a::after { margin-left: calc((4rem / 18)); border-width: calc((8rem / 18)) 0 calc((8rem / 18)) calc((14rem / 18)); } }

.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: #04fdbc; 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: #04fdbc; 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: #ebff00; border-radius: calc((40rem / 18)); margin: 1rem auto; }

.btn-red a { background: #ff6c8e; }

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

.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: #04fdbc; 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-focus a { background: #ff6c8e !important; pointer-events: none; }
.btn-red-focus a:hover { background: #ff6c8e !important; }

.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 #04fdbc; color: #04fdbc; 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 #04fdbc; 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: #04fdbc !important; border: 1px solid #04fdbc; background: #ffffff; width: calc((150rem / 18)); height: calc((65rem / 18)); border-radius: calc((10rem / 18)); } }

.btn-line-red a { border: 1px solid #ff6c8e; color: #ff6c8e; 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 #ff6c8e; 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 #ff6c8e; color: #ff6c8e !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: #04fdbc; 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: #04fdbc; } }

.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: #04fdbc; 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; } }

* { 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: #04fdbc; 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((48rem / 18)); line-height: calc((60rem / 18)); letter-spacing: calc((1rem / 18)); color: #071b7e; }
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-42, html .font-s-42 { font-size: calc((42rem / 18)); line-height: calc((42rem / 18)); letter-spacing: calc((3rem / 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; line-height: calc((48rem / 18)); }
body .font-s-28, html .font-s-28 { font-size: calc((28rem / 18)); line-height: calc((40rem / 18)); color: #000000; }
body .font-s-20, html .font-s-20 { font-size: calc((20rem / 18)); line-height: calc((27rem / 18)); color: #000000; }
body .font-s-18, html .font-s-18 { font-size: 1rem; line-height: calc((27rem / 18)); color: #000000; }
body a, html a { color: #ff6c8e; }
body a:hover, html a:hover { color: #04fdbc; }
body p, body small, html p, html small { font-size: calc((20rem / 18)); line-height: calc((36rem / 18)); letter-spacing: calc((1rem / 18)); color: #000000; }
body small, html small { display: block; }
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: #04fdbc; }
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 { height: calc((180rem / 18)); background: url(../images/common/title-event.png) no-repeat; background-size: 100% 100%; }
body .title-advantage, html .title-advantage { background: url(../images/common/title-advantage.png) no-repeat; background-size: 100% 100%; }
body .title-etf-fit, html .title-etf-fit { background: url(../images/common/title-etf-fit.png) no-repeat; background-size: 100% 100%; }
body .title-hot-etf, html .title-hot-etf { background: url(../images/common/title-hot-etf.png) no-repeat; background-size: 100% 100%; }
body .object-money, html .object-money { display: block; width: calc((120vw / 1920) * 100); height: calc((120vw / 1920) * 100); background: url(../images/common/icon-money.png) no-repeat; background-size: 100%; position: absolute; }
body .table-etf-list, html .table-etf-list { display: block; max-width: calc((960rem / 18)); width: 100%; margin: auto; }
body .table-etf-list ul, html .table-etf-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 .table-etf-list li, html .table-etf-list li { width: 33.3%; float: left; }
body .table-etf-list li br, html .table-etf-list li br { display: none; }
body .table-etf-list li a, html .table-etf-list li a { color: #000000; text-decoration: underline; font-weight: normal; }
body .table-etf-list ul:nth-child(even), html .table-etf-list ul:nth-child(even) { background: #f4f4f4; }
body .table-etf-list ul:nth-child(even) li, html .table-etf-list ul:nth-child(even) li { border-left: 1px solid #cccccc; }
body .table-etf-list ul:nth-child(even) li:first-child, html .table-etf-list ul:nth-child(even) li:first-child { border-left: 0px solid #cccccc; }
body .table-etf-list ul:nth-child(odd), html .table-etf-list ul:nth-child(odd) { background: #ffffff; }
body .table-etf-list ul:nth-child(odd) li, html .table-etf-list ul:nth-child(odd) li { border-left: 1px solid #cccccc; }
body .table-etf-list ul:nth-child(odd) li:first-child, html .table-etf-list ul:nth-child(odd) li:first-child { border-left: 0px solid #cccccc; }
body .table-etf-list ul:nth-child(1), html .table-etf-list ul:nth-child(1) { background: #071b7e; 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 .table-etf-list ul:nth-child(1) li, html .table-etf-list ul:nth-child(1) li { border: 0px; }
body .table-etf-list .red-head:nth-child(1), html .table-etf-list .red-head:nth-child(1) { background: #ff3369; }
body .table-etf-list .purple-head:nth-child(1), html .table-etf-list .purple-head:nth-child(1) { background: #685ffe; }
body .table-etf-list .green-head:nth-child(1), html .table-etf-list .green-head:nth-child(1) { background: #4fba09; }
body .table-etf-list ul:last-child, html .table-etf-list ul:last-child { border-bottom-left-radius: calc((30rem / 18)); border-bottom-right-radius: calc((30rem / 18)); }
body .highlight-text, html .highlight-text { color: #ebff00; /* 黃色填充顏色 */ position: relative; z-index: 1; /* 確保文字在圖示之上 */ text-shadow: -1px -1px 0 #0e1948, 1px -1px 0 #071b7e, -1px 1px 0 #071b7e, 1px 1px 0 #071b7e, -2px -2px 0 #071b7e, 2px -2px 0 #071b7e, -2px 2px 0 #071b7e, 2px 2px 0 #071b7e, 0px -2px 0 #071b7e, 0px 2px 0 #071b7e, -2px 0px 0 #071b7e, 2px 0px 0 #071b7e; /* 右 */ }
@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.7); height: calc((160rem / 18) * 0.7); }
  body .title-event, html .title-event { height: calc((180rem / 18) * 0.6); background: url(../images/common/title-event-m.png) no-repeat; background-size: 100% 100%; }
  body h1, html h1 { font-size: calc((42rem / 18)); line-height: calc((56rem / 18)); margin-bottom: 1rem; }
  body h2, html h2 { font-size: calc((32rem / 18)); line-height: calc((48rem / 18)); }
  body h6, html h6 { font-size: calc((28rem / 18)); line-height: calc((42rem / 18)); }
  body p, body small, html p, html small { 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-20, html .font-s-20 { font-size: calc((16rem / 18)); line-height: calc((24rem / 18)); }
  body .font-s-28, 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-42, html .font-s-42 { font-size: calc((28rem / 18)); line-height: calc((42rem / 18)); letter-spacing: calc((1rem / 18)); }
  body .font-s-32, html .font-s-32 { font-size: calc((24rem / 18)); line-height: calc((36rem / 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 .table-etf-list, html .table-etf-list { display: block; max-width: calc((960rem / 18)); width: 100%; margin: auto; }
  body .table-etf-list ul, html .table-etf-list ul { font-size: calc((18rem / 18)); line-height: calc((20rem / 18)); }
  body .table-etf-list li, html .table-etf-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 .table-etf-list p, html .table-etf-list p { font-size: calc((18rem / 18)); }
  body .table-etf-list li:nth-child(1), html .table-etf-list li:nth-child(1) { width: 25%; }
  body .table-etf-list li:nth-child(2), html .table-etf-list li:nth-child(2) { width: 50%; }
  body .table-etf-list li:nth-child(3), html .table-etf-list li:nth-child(3) { width: 25%; }
  body .table-etf-list ul:nth-child(1), html .table-etf-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)); } }

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

section, .section-content { padding: 0% !important; }
@media only screen and (max-width: 1280px) { section, .section-content { padding-top: 0% !important; } }
@media only screen and (max-width: 640px) { section, .section-content { width: 100%; padding: 8% 0% !important; padding-top: 16% !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%; height: auto; margin: auto; position: relative; padding: 0 !important; background: #685ffe center center; background-size: 100% 100%; overflow: hidden; }
#main .main-bg-top-left { display: block; width: calc((1920vw / 1920) * 100); height: calc((710vw / 1920) * 100); margin: auto; position: absolute; padding: 0 !important; background: url(../images/main/main-bg-top-left.png) no-repeat center center; background-size: cover; z-index: 2; }
#main .main-bg-top-right { display: block; width: calc((740vw / 1920) * 100); height: calc((1880vw / 1920) * 100); margin: auto; position: absolute; right: 0; padding: 0 !important; background: url(../images/main/main-bg-top-right.png) no-repeat center center; background-size: cover; z-index: 2; }
#main .kv-con { display: block; width: 100%; height: calc((1080vw / 1920) * 100); position: relative; z-index: 10; }
#main .kv-view { width: calc((1920vw / 1920) * 100); height: calc((1280vw / 1920) * 100); background: url(../images/main/main-kv.png) no-repeat; background-size: 100%; position: absolute; }
#main .kv-main { width: auto; height: calc((1080vw / 1920) * 100); position: absolute; z-index: 3; top: 15%; margin-left: 8%; }
#main .kv-main .slogan { display: block; width: calc((1060vw / 1920) * 100); height: calc((360vw / 1920) * 100); background: url(../images/main/slogan.png) no-repeat; background-size: 100%; margin: auto; }
#main .kv-main .img-man { display: block; width: calc((600vw / 1920) * 100); height: calc((700vw / 1920) * 100); background: url(../images/main/img-man.png) no-repeat; background-size: 100%; margin: auto; margin-top: calc((-24vw / 1920) * 100); margin-left: calc((256vw / 1920) * 100); position: relative; }
#main .kv-main .img-man .icon-star130 { display: block; width: calc((65vw / 1920) * 100); height: calc((65vw / 1920) * 100); background: url(../images/main/icon-star130.png) no-repeat; position: absolute; background-size: 100%; top: calc((164vw / 1920) * 100); left: calc((70vw / 1920) * 100); }
#main .kv-main .img-man .icon-star100 { display: block; width: calc((50vw / 1920) * 100); height: calc((50vw / 1920) * 100); background: url(../images/main/icon-star100.png) no-repeat; background-size: 100%; position: absolute; right: calc((160vw / 1920) * 100); top: calc((254vw / 1920) * 100); }
#main .object-money1 { display: block; right: 8%; top: 14%; transform: rotate(-8deg); z-index: 1; }
@media only screen and (max-width: 640px) { #main { display: block !important; display: block; width: calc((640vw / 640) * 100) !important; height: auto; }
  #main .main-bg-top-left { display: block; width: calc((720vw / 640) * 90); height: calc((580vw / 640) * 90); margin: auto; position: absolute; padding: 0 !important; background: url(../images/main/main-bg-top-left-m.png) no-repeat center center; background-size: cover; z-index: 2; top: 0; left: 0; }
  #main .main-bg-top-right { display: none; }
  #main .kv-con { display: block; width: 100%; height: calc((880vw / 640) * 100); position: relative; z-index: 10; }
  #main .kv-view { width: calc((720vw / 640) * 85); height: calc((1200vw / 640) * 85); background: url(../images/main/main-kv-m.png) no-repeat; background-size: 100%; position: absolute; right: 0; top: 0; }
  #main .kv-main { width: 100%; height: calc((1080vw / 640) * 70); position: absolute; z-index: 3; top: 5rem; left: 0; right: 0; margin-left: auto; margin: auto; }
  #main .kv-main .slogan { display: block; width: calc((1060vw / 640) * 60); height: calc((360vw / 640) * 60); background: url(../images/main/slogan.png) no-repeat; background-size: 100%; margin: auto; }
  #main .kv-main .img-man { display: block; width: calc((600vw / 640) * 70); height: calc((700vw / 640) * 70); background: url(../images/main/img-man.png) no-repeat; background-size: 100%; margin: auto; margin-top: calc((240vw / 640) * 70); margin-left: calc((0vw / 640) * 70); }
  #main .kv-main .img-man .icon-star130 { display: block; width: calc((65vw / 640) * 70); height: calc((65vw / 640) * 70); background: url(../images/main/icon-star130.png) no-repeat; position: absolute; background-size: 100%; top: calc((164vw / 640) * 70); left: calc((70vw / 640) * 70); }
  #main .kv-main .img-man .icon-star100 { display: block; width: calc((50vw / 640) * 70); height: calc((50vw / 640) * 70); background: url(../images/main/icon-star100.png) no-repeat; background-size: 100%; position: absolute; right: calc((160vw / 640) * 70); top: calc((254vw / 640) * 70); }
  #main .object-money1 { display: block; right: 4%; top: 30%; transform: rotate(-8deg); z-index: 1; } }

#event { display: block; width: 100%; height: auto; margin: auto; position: relative; z-index: 12; padding-top: 3rem !important; padding-bottom: 12rem !important; }
#event h1 { position: static; z-index: 1; top: 5rem; margin-bottom: 0; }
#event h1 header { position: relative; display: block; margin: unset; }
#event .prize-list { display: flex; justify-content: flex-start; width: 100%; max-width: 100%; margin: 3rem auto; }
#event .prize-list div { width: calc((460rem / 18)); height: calc((160rem / 18)); margin-right: calc((20rem / 18)); }
#event .flex { display: flex; justify-content: center; flex-direction: row; align-items: center; width: 70%; margin: auto; margin-top: 5rem; }
#event .content { display: block; width: 100%; align-items: flex-start; position: relative; z-index: 2; padding: 0% !important; }
#event .card-main { margin: auto; display: block; align-items: flex-start; position: relative; width: calc((1300rem / 18)); height: calc((900rem / 18)); z-index: 2; }
#event .card-main .card-bg_purple { width: calc((1300rem / 18)); height: calc((800rem / 18)); border-radius: calc((36rem / 18)); border: calc((2rem / 18)) solid #071b7e; position: absolute; margin: auto; background: #75a1ff; padding: calc((80rem / 18)) calc((160rem / 18)) calc((80rem / 18)); z-index: 2; top: 0; left: 0; }
#event .card-main::before { content: ""; position: absolute; z-index: 1; top: calc((-12rem / 18)); left: calc((-12rem / 18)); width: 100%; height: calc((800rem / 18)); background-color: #04fdbc; border: calc((2rem / 18)) solid #071b7e; border-radius: calc((36rem / 18)); }
#event .card-main .line_green { display: block; width: calc((300rem / 18)); height: calc((418rem / 18)); position: absolute; background: url(../images/event/line_green.png) no-repeat; background-size: 100%; position: absolute; right: 10%; z-index: 3; top: calc((540rem / 18)); right: calc((-200rem / 18)); }
#event .card-main .line_blue { display: block; width: calc((300rem / 18)); height: calc((560rem / 18)); position: absolute; background: url(../images/event/line_blue.png) no-repeat; background-size: 100%; position: absolute; z-index: 0; top: calc((-140rem / 18)); left: calc((-200rem / 18)); }
#event .card-main .object-money1 { display: block; top: 28%; right: -4%; transform: rotate(0deg); z-index: 3; }
#event .event_date { display: flex; width: calc((560rem / 18)); height: calc((100rem / 18)); background: url(../images/event/event_date.png) no-repeat center center; background-size: 100% 100%; }
#event .event_man { display: flex; width: calc((300rem / 18)); height: calc((320rem / 18)); background: url(../images/event/event_man.png) no-repeat center center; background-size: 100% 100%; position: absolute; z-index: 1; top: calc((40rem / 18)); left: calc((800rem / 18)); }
#event .cover-bottom { width: calc((1920vw / 1920) * 100); height: calc((100vw / 1920) * 100); background: url(../images/event/cover-bottom.png) no-repeat; background-size: 100%; position: absolute; bottom: 0; z-index: 1; }
@media only screen and (max-width: 640px) { #event .flex { width: 100%; margin: auto; margin-top: -0.4rem; }
  #event .card-main { margin: auto; display: block; align-items: flex-start; position: relative; width: 96%; height: calc((660rem / 18)); z-index: 2; margin-left: 6%; }
  #event .card-main .card-bg_purple { width: 94%; height: calc((700rem / 18)); border-radius: calc((18rem / 18)); border: calc((1rem / 18)) solid #071b7e; position: absolute; margin: auto; background: #75a1ff; padding: calc((40rem / 18)) calc((20rem / 18)) calc((40rem / 18)); z-index: 2; top: 0; left: 0; }
  #event .card-main::before { content: ""; position: absolute; z-index: 1; top: calc((-12rem / 18)); left: calc((-12rem / 18)); width: 94%; height: calc((700rem / 18)); background-color: #04fdbc; border: calc((1rem / 18)) solid #071b7e; border-radius: calc((18rem / 18)); }
  #event .card-main .line_green, #event .card-main .line_blue, #event .card-main .object-money1 { display: none; }
  #event .event_date { display: flex; width: calc((560rem / 18) * 0.6); height: calc((100rem / 18) * 0.6); margin: auto; }
  #event .font-s-42 { text-align: center; }
  #event .prize-list { display: flex; justify-content: flex-start; flex-direction: column; width: 100%; max-width: 100%; margin: 2rem auto; }
  #event .prize-list div { width: calc((460rem / 18) * 0.75); height: calc((160rem / 18) * 0.75); margin: auto; margin-left: calc((15rem / 18)); margin-bottom: calc((15rem / 18)); }
  #event .flex { display: flex; justify-content: center; flex-direction: row; align-items: center; width: 100%; margin: auto; margin-top: -0.2rem; }
  #event .cover-bottom { width: calc((640vw / 640) * 100); height: calc((100vw / 640) * 100); background: url(../images/event/cover-bottom-m.png) no-repeat; background-size: 100%; position: absolute; bottom: 0; z-index: 1; } }

#advantage { display: block; height: auto; margin: 0 auto; position: relative; background: #75a1ff; }
#advantage article { margin-bottom: calc((160rem / 18)); }
#advantage .card { margin: auto; display: block; align-items: flex-start; position: relative; width: calc((1200rem / 18)); height: calc((280rem / 18)); z-index: 2; margin-top: 10rem; margin-bottom: 8rem; }
#advantage .card .card-bg_purple { width: calc((1200rem / 18)); height: calc((280rem / 18)); border-radius: calc((36rem / 18)); border: calc((2rem / 18)) solid #071b7e; position: absolute; margin: auto; background: #75a1ff; z-index: 2; top: 0; left: 0; }
#advantage .card .etf-about { display: flex; width: calc((1100rem / 18)); height: calc((440rem / 18)); margin: auto; margin-top: -8rem; position: relative; }
#advantage .card .img-tree { display: block; width: calc((220rem / 18)); height: calc((160rem / 18)); background: url(../images/advantage/img-tree.png) no-repeat; background-size: cover; position: absolute; right: calc((-160rem / 18)); bottom: calc((-60rem / 18)); }
#advantage .card .etf-about-stock, #advantage .card .etf-about-etf { display: block; width: calc((360rem / 18)); height: calc((440rem / 18)); background: url(../images/advantage/etf-about-stock.png) no-repeat; background-size: cover; margin-right: -3rem; }
#advantage .card .etf-about-etf { background: url(../images/advantage/etf-about-etf.png) no-repeat; background-size: cover; margin-right: unset; margin-left: -3rem; }
#advantage .card .etf-about-man, #advantage .card .etf-about-man-m { display: block; width: calc((480rem / 18)); height: calc((440rem / 18)); background: url(../images/advantage/etf-about-man.png) no-repeat; background-size: cover; }
#advantage .card .etf-about-man-m { display: none; }
#advantage .card::before { content: ""; position: absolute; z-index: 1; top: calc((12rem / 18)); left: calc((-12rem / 18)); width: 100%; height: calc((280rem / 18)); background-color: #04fdbc; border: calc((2rem / 18)) solid #071b7e; border-radius: calc((36rem / 18)); }
#advantage .content { width: 100%; }
#advantage .etf-historical-data { display: block; width: calc((1240rem / 18)); height: calc((600rem / 18)); margin: auto; margin-top: 4rem; margin-bottom: 1rem; position: relative; }
#advantage .etf-historical-data .etf-data-ps { display: block; width: calc((660rem / 18)); height: calc((180rem / 18)); position: absolute; left: 0; right: 0; margin: auto; margin-top: -2rem; z-index: 3; }
#advantage .etf-historical-data .etf-data-img { display: block; width: calc((1240rem / 18)); height: calc((600rem / 18)); margin: auto; overflow: hidden; border-radius: calc((36rem / 18)); }
#advantage .etf-historical-data .line_green { display: block; width: calc((300rem / 18)); height: calc((240rem / 18)); position: absolute; background: url(../images/event/line_green.png) no-repeat; background-size: cover; position: absolute; right: 10%; z-index: 1; top: 0; bottom: 0; right: calc((-200rem / 18)); margin: auto; }
#advantage .etf-historical-data img { position: relative; z-index: 2; }
#advantage .cathay-advantages { display: flex; width: calc((1240rem / 18)); padding-bottom: calc((60rem / 18)); padding-top: calc((0rem / 18)); position: relative; z-index: 5; flex-direction: row; justify-content: space-evenly; margin: auto; margin-top: 6rem; }
#advantage .cathay-advantages .frame-w320 { display: flex; flex-direction: column; width: calc((320rem / 18)); height: calc((320rem / 18)); position: relative; }
#advantage .cathay-advantages .bubble-box { position: absolute; display: inline-block; top: -4rem; left: 0; right: 0; font-size: calc((32rem / 18)); line-height: calc((40rem / 18)); text-align: center; font-weight: bold; color: #071b7e; min-width: calc((280rem / 18)); min-height: calc((120rem / 18)); padding: calc((20rem / 18)); background-color: #ffffff; border: calc((2rem / 18)) solid #071b7e; border-radius: calc((15rem / 18)); }
#advantage .cathay-advantages .bubble-box::after { content: ""; position: absolute; bottom: calc((-11rem / 18)); left: 50%; transform: translateX(-50%) rotate(45deg); width: calc((18rem / 18)); height: calc((18rem / 18)); background-color: #ffffff; border-right: calc((2rem / 18)) solid #071b7e; border-bottom: calc((2rem / 18)) solid #071b7e; z-index: 1; }
#advantage .cover-bottom { display: block; width: calc((1920vw / 1920) * 100); height: calc((180vw / 1920) * 100); background: url(../images/advantage/cover-bottom.png) no-repeat #685ffe; background-size: 100%; position: absolute; z-index: 2; }
@media only screen and (max-width: 640px) { #advantage { display: block; height: calc((2940rem / 18)); }
  #advantage article { margin-bottom: calc((80rem / 18)); }
  #advantage .card { margin: auto; display: block; align-items: flex-start; position: relative; width: 96%; height: calc((240rem / 18)); z-index: 2; margin-top: 11rem; margin-bottom: 0; margin-left: 6%; }
  #advantage .card .card-bg_purple { width: 94%; height: calc((240rem / 18)); border-radius: calc((18rem / 18)); border: calc((2rem / 18)) solid #071b7e; position: absolute; margin: auto; background: #75a1ff; z-index: 2; top: 0; left: 0; }
  #advantage .card .etf-about { display: flex; width: 94%; height: calc((440rem / 18)); margin: auto; margin-top: -1rem; }
  #advantage .card .img-tree { display: none; }
  #advantage .card .etf-about-stock, #advantage .card .etf-about-etf { display: block; width: calc((360rem / 18) * 0.6); height: calc((440rem / 18) * 0.6); margin-right: unset; }
  #advantage .card .etf-about-etf { margin-right: unset; margin-left: unset; }
  #advantage .card .etf-about-man { display: none; }
  #advantage .card .etf-about-man-m { display: block; width: calc((480rem / 18) * 0.7); height: calc((440rem / 18) * 0.7); position: absolute; top: -10rem; left: 0; right: 0; margin: auto; }
  #advantage .card::before { content: ""; position: absolute; z-index: 1; top: calc((12rem / 18)); left: calc((-12rem / 18)); width: 94%; height: calc((240rem / 18)); background-color: #04fdbc; border: calc((2rem / 18)) solid #071b7e; border-radius: calc((18rem / 18)); }
  #advantage .etf-historical-data { display: block; width: 96%; height: calc((390rem / 18)); margin: auto; margin-top: 4rem; margin-bottom: 0; position: relative; }
  #advantage .etf-historical-data .etf-data-ps { display: block; width: calc((240rem / 18) * 1.4); height: calc((120rem / 18) * 1.4); position: absolute; left: 0; right: 0; margin: auto; margin-top: -4rem; z-index: 3; }
  #advantage .etf-historical-data .etf-data-img { display: block; width: 96%; height: calc((375rem / 18)); margin: auto; overflow: hidden; border-radius: calc((36rem / 18)); }
  #advantage .etf-historical-data .line_green { display: none; }
  #advantage .etf-historical-data img { position: relative; z-index: 2; }
  #advantage .cathay-advantages { display: flex; width: 100%; padding-bottom: calc((60rem / 18)); padding-top: calc((0rem / 18)); flex-direction: column; justify-content: center; align-items: center; margin: auto; margin-top: 6rem; }
  #advantage .cathay-advantages .frame-w320 { display: flex; flex-direction: column; width: calc((320rem / 18) * 0.8); height: calc((320rem / 18) * 0.8); position: relative; margin-bottom: 6rem; }
  #advantage .cathay-advantages .bubble-box { position: absolute; display: inline-block; top: -4.4rem; left: 0; right: 0; font-size: calc((24rem / 18)); line-height: calc((40rem / 18) * 0.8); text-align: center; font-weight: bold; color: #071b7e; width: calc((280rem / 18) * 0.8); min-width: calc((180rem / 18) * 0.8); min-height: calc((120rem / 18) * 0.8); padding: calc((20rem / 18) * 0.8); background-color: #ffffff; border: calc((2rem / 18)) solid #071b7e; border-radius: calc((15rem / 18)); margin: auto; }
  #advantage .cathay-advantages .bubble-box::after { content: ""; position: absolute; bottom: calc((-11rem / 18)); left: 50%; transform: translateX(-50%) rotate(45deg); width: calc((18rem / 18) * 0.8); height: calc((18rem / 18) * 0.8); background-color: #ffffff; border-right: calc((2rem / 18)) solid #071b7e; border-bottom: calc((2rem / 18)) solid #071b7e; z-index: 1; }
  #advantage .cover-bottom { width: calc((640vw / 640) * 100); height: calc((100vw / 640) * 100); background: url(../images/advantage/cover-bottom-m.png) no-repeat #685ffe; background-size: 100%; position: absolute; bottom: 0; z-index: 1; } }

#etf-fit { display: block; height: auto; margin: 0 auto; position: relative; background: #685ffe; }
#etf-fit .content { width: 100%; position: relative; z-index: 6; padding: 5% 0; }
#etf-fit article { margin-bottom: calc((120rem / 18)); }
#etf-fit .bg-top-right { display: block; width: calc((340vw / 1920) * 100); height: calc((470vw / 1920) * 100); position: absolute; padding: 0 !important; background: url(../images/etf-fit/bg-top-right.png) no-repeat center center; background-size: 100% 100%; z-index: 2; right: 0; top: 8%; }
#etf-fit .bg-bottom-left { display: block; width: calc((400vw / 1920) * 100); height: calc((300vw / 1920) * 100); position: absolute; background: url(../images/etf-fit/bg-bottom-left.png) no-repeat center center; background-size: 100% 100%; z-index: 2; left: 0; bottom: 16%; }
#etf-fit .etf-fit-object { display: block; width: calc((420vw / 1920) * 100); height: calc((1060vw / 1920) * 100); background: url(../images/etf-fit/etf-fit-object.png) no-repeat; background-size: cover; position: absolute; top: -24%; z-index: 3; }
#etf-fit .tab-all { display: flex; font-size: calc((28rem / 18)); align-items: center; justify-content: center; margin: auto; width: calc((720rem / 18)); border-bottom: 2px solid #071b7e; margin-bottom: calc((40rem / 18)); }
#etf-fit .tab-all .btn-tab a { display: block; width: calc((220rem / 18)); height: calc((64rem / 18)); font-size: calc((28rem / 18)); line-height: calc((68rem / 18)); font-weight: bold; color: #071b7e; letter-spacing: calc((1rem / 18)); border-top-left-radius: calc((28rem / 18)); border-top-right-radius: calc((28rem / 18)); margin: 0rem 0.2em; background: #efefef; border: 2px solid #071b7e; border-bottom: 0; text-align: center; }
#etf-fit .tab-all .btn-green-foucs a { background: #ff6c8e; pointer-events: none; position: relative; z-index: 2; }
#etf-fit .etf-fit-all { display: flex; width: 100%; padding-bottom: calc((60rem / 18)); padding-top: calc((0rem / 18)); position: relative; z-index: 5; flex-direction: row; margin: auto; margin-top: 4rem; }
#etf-fit .etf-fit-all .etf-fit-img { display: block; max-width: calc((720rem / 18)); min-width: calc((720rem / 18)); height: calc((420rem / 18)); position: relative; margin: 0 0rem; }
#etf-fit .swiper { display: block; list-style: none; margin-left: auto; margin-right: auto; overflow-x: hidden; padding: 0; position: relative; z-index: 1; margin-bottom: calc((80rem / 18)) !important; }
#etf-fit .swiper-pagination-bullet { width: calc((60rem / 18)); height: calc((4rem / 18)); border-radius: 0px; background: #999; opacity: 1; }
#etf-fit .swiper-pagination-bullet-active { background: #ff6c8e; }
@media only screen and (max-width: 640px) { #etf-fit article { width: 100%; padding: 0 3%; margin-bottom: calc((40rem / 18)); }
  #etf-fit .padding_0 { padding: 0; }
  #etf-fit .bg-top-right { display: block; width: calc((320vw / 640) * 87); width: calc((320vw / 640) * 87); height: calc((440vw / 640) * 87); position: absolute; padding: 0 !important; background: url(../images/etf-fit/bg-top-right-m.png) no-repeat center center; background-size: 100% 100%; z-index: 2; right: 0; top: 20%; }
  #etf-fit .etf-fit-object { display: block; width: calc((240vw / 640) * 100); height: calc((640vw / 640) * 100); background: url(../images/etf-fit/etf-fit-object-m.png) no-repeat; background-size: cover; position: absolute; top: -14%; z-index: 3; }
  #etf-fit .bg-bottom-left { display: none; }
  #etf-fit .tab-all { display: flex; font-size: calc((28rem / 18)); align-items: center; justify-content: center; margin: auto; width: 96%; border-bottom: 2px solid #071b7e; margin-bottom: calc((20rem / 18)); }
  #etf-fit .tab-all .btn-tab a { display: block; width: calc((140rem / 18)); height: calc((46rem / 18)); font-size: calc((20rem / 18)); line-height: calc((48rem / 18)); font-weight: bold; color: #071b7e; letter-spacing: calc((1rem / 18)); border-top-left-radius: calc((16rem / 18)); border-top-right-radius: calc((16rem / 18)); margin: 0rem 0.2em; background: #efefef; border: 2px solid #071b7e; border-bottom: 0; text-align: center; }
  #etf-fit .tab-all .btn-green-foucs a { background: #ff6c8e; pointer-events: none; position: relative; z-index: 2; }
  #etf-fit .etf-fit-all { display: flex; width: 100%; padding-bottom: calc((0rem / 18)); padding-top: calc((0rem / 18)); position: relative; z-index: 5; flex-direction: column; justify-content: space-evenly; margin: auto; left: 0; overflow: hidden; height: calc((300rem / 18)); }
  #etf-fit .etf-fit-all .etf-fit-img { display: block; max-width: calc((480rem / 18)); min-width: calc((480rem / 18)); height: calc((420rem / 18)); position: relative; margin: 0 4rem; }
  #etf-fit .swiper { margin-bottom: calc((20rem / 18)) !important; } }

#hot-etf { display: block; height: auto; margin: 0 auto; position: relative; background: #75a1ff; }
#hot-etf .content { width: 100%; position: relative; z-index: 6; }
#hot-etf article { margin-bottom: calc((120rem / 18)); }
#hot-etf .cover-top { display: block; width: calc((1920vw / 1920) * 100); height: calc((300vw / 1920) * 100); background: url(../images/hot-eft/cover-top.png) no-repeat #685ffe; background-size: cover; position: absolute; z-index: 2; top: 0; }
@media only screen and (max-width: 640px) { #hot-etf article { width: 100%; padding: 0 3%; margin-bottom: calc((80rem / 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: #ff6c8e; font-weight: bold; }
.precautions a:hover { color: #04fdbc; }
.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: scroll; 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((20rem / 18)); background: url(../images/popup/btn-close.png) 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: #ffffff; border: 1px solid #071b7e; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); border-radius: calc((24rem / 18)); padding: 2.5% 1.5%; margin: auto; z-index: 2; position: relative; }
.popup .popup-content-page { width: 100%; max-width: calc((1280rem / 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.png) 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; }

.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; }

.right-block-all { display: block; position: fixed; right: 0.8vw; bottom: 9vw; z-index: 99; }
@media only screen and (max-width: 1680px) { .right-block-all { bottom: 10vw; } }
@media only screen and (max-width: 1440px) { .right-block-all { bottom: 12vw; } }
@media only screen and (max-width: 1280px) { .right-block-all { bottom: 13vw; } }
@media only screen and (max-width: 768px) { .right-block-all { bottom: 13vw; } }
@media only screen and (max-width: 640px) { .right-block-all { bottom: 10vh; } }

.right-block-btn-base-0, .right-block-btn-base-1 { color: #ffffff; font-size: calc((24rem / 18)); font-weight: 600; line-height: calc((30rem / 18)); text-align: center; clear: both; margin-bottom: calc((6rem / 18)); }
.right-block-btn-base-0 a, .right-block-btn-base-1 a { display: block; width: calc((100rem / 18)); height: calc((100rem / 18)); color: #ffffff; border-radius: calc((15rem / 18)); padding: 0; background: #04fdbc; transition: 0.5s; border: 1px solid #071b7e; }
.right-block-btn-base-0 a:hover, .right-block-btn-base-1 a:hover { padding: 0vw; border-radius: calc((15rem / 18)); background: #04fdbc; transition: 0.5s; }
@media only screen and (max-width: 640px) { .right-block-btn-base-0, .right-block-btn-base-1 { width: calc((80rem / 18)); height: calc((80rem / 18)); font-size: calc((18rem / 18)); line-height: calc((20rem / 18)); clear: both; margin-bottom: calc((6rem / 18)); }
  .right-block-btn-base-0 a, .right-block-btn-base-1 a { width: calc((80rem / 18)); height: calc((80rem / 18)); font-size: calc((16rem / 18)); line-height: calc((20rem / 18)); border-radius: calc((10rem / 18)); padding: 0vw; background: #04fdbc; transition: 0.5s; }
  .right-block-btn-base-0 a:hover, .right-block-btn-base-1 a:hover { padding: 0vw; border-radius: calc((10rem / 18)); background: #04fdbc; color: #ffffff; transition: 0.5s; } }

.right-block-btn-base-1 { color: #ffffff; font-size: calc((24rem / 18)); font-weight: 600; line-height: calc((30rem / 18)); text-align: center; clear: both; margin-bottom: calc((6rem / 18)); }
.right-block-btn-base-1 a { background: #ebff00; }
.right-block-btn-base-1 a:hover { background: #ebff00; }
@media only screen and (max-width: 640px) { .right-block-btn-base-1 { width: calc((80rem / 18)); height: calc((80rem / 18)); font-size: calc((18rem / 18)); line-height: calc((20rem / 18)); clear: both; margin-top: 5px; }
  .right-block-btn-base-1 a { background: #ebff00; }
  .right-block-btn-base-1 a:hover { background: #ebff00; } }

/* ---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 */