@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((30rem / 18)); background: #ffffff; border: 2px solid #000000; -webkit-box-shadow: calc((0rem / 18)) calc((20rem / 18)) 0px #000000; -moz-box-shadow: calc((0rem / 18)) calc((20rem / 18)) 0px #000000; box-shadow: calc((0rem / 18)) calc((20rem / 18)) 0px #000000; }

.box-m { border-radius: calc((30rem / 18)); background: #ffffff; border: 2px solid #000000; -webkit-box-shadow: calc((0rem / 18)) calc((15rem / 18)) 0px #000000; -moz-box-shadow: calc((0rem / 18)) calc((15rem / 18)) 0px #000000; box-shadow: calc((0rem / 18)) calc((15rem / 18)) 0px #000000; }

.box-s { border-radius: calc((20rem / 18)); background: #ffffff; border: 2px solid #000000; -webkit-box-shadow: calc((0rem / 18)) calc((10rem / 18)) 0px #000000 !important; -moz-box-shadow: calc((0rem / 18)) calc((10rem / 18)) 0px #000000 !important; box-shadow: calc((0rem / 18)) calc((10rem / 18)) 0px #000000 !important; }

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

.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-t-100 { padding-top: calc((100rem / 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-gray9 { color: #999999 !important; }

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

.font-green { color: #0cafa3 !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 #0cafa3 !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; color: #ffffff; background: #0cafa3; 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: #0cafa3; 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; color: #ffffff; background: #0cafa3; transition: .5s; transition: .5s; }
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; }
@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; }
.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; }
.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: #0cafa3; }
.menu li a:hover::after, .menu li a:focus::after { width: 100%; background: #0cafa3; }
@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; }
.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: #0cafa3; 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: #0cafa3; 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((35rem / 18)); font-size: calc((32rem / 18)); font-weight: bold; line-height: calc((75rem / 18)); letter-spacing: calc((1rem / 18)); color: #ffffff !important; background: #0cafa3; transition: .5s; text-decoration: none; }
.btn a:hover { background: #f56e3d; transition: .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 { background: #0cafa3; } }

.btn-line { display: inline-block; margin: auto; text-align: center; }
.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 #0cafa3; color: #0cafa3; background: #ffffff; text-decoration: none; margin-left: 0.5rem; transition: .5s; }
.btn-line a:hover { color: #ffffff !important; border: 1px solid #0cafa3; background: #0cafa3; transition: .5s; }
@media only screen and (max-width: 640px) { .btn-line a { font-size: calc((22rem / 18)); line-height: calc((65rem / 18)); color: #0cafa3 !important; border: 1px solid #0cafa3; background: #ffffff; width: calc((150rem / 18)); height: calc((65rem / 18)); border-radius: calc((10rem / 18)); } }

.btn-m { display: block; margin: 0; text-align: center; }
.btn-m 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; }
@media only screen and (max-width: 640px) { .btn-m a { width: calc((180rem / 18)); height: calc((55rem / 18)); border-radius: calc((35rem / 18)); font-size: calc((22rem / 18)); } }

.btn-m-line { display: block; margin: 0; text-align: center; }
.btn-m-line 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: #0cafa3 !important; background: #ffffff; border: 1px solid #0cafa3; }
.btn-m-line a:hover { color: #ffffff !important; border: 1px solid #f56e3d; background: #f56e3d; }
@media only screen and (max-width: 640px) { .btn-m-line a { width: calc((180rem / 18)); height: calc((55rem / 18)); border-radius: calc((35rem / 18)); font-size: calc((22rem / 18)); }
  .btn-m-line a:hover { color: #ffffff !important; border: 1px solid #f56e3d; background: #f56e3d; } }

.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: .5s; text-decoration: none; font-weight: bold; }
.btn-gray a:hover { background: #f56e3d; transition: .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: #0cafa3; } }

.btn-margin-auto a { margin: auto; }

.btn-s { display: block; margin: auto; text-align: center; }
.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: #0cafa3; border-radius: calc((40rem / 18)); margin: 1rem auto; }

.btn-b { display: inline-block; margin: 0; text-align: center; width: 100%; }
.btn-b 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: #0cafa3; transition: .5s; text-decoration: none; font-weight: bold; }
@media only screen and (max-width: 640px) { .btn-b 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-b a:hover { background: #0cafa3; } }

.btn-100 a { display: block; width: 100%; height: calc((75rem / 18)); }
@media only screen and (max-width: 640px) { .btn-100 a { display: block; width: 100%; height: calc((65rem / 18)); line-height: calc((65rem / 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: #0cafa3; 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-select-type { cursor: pointer; }
.btn-select-type a { display: block; width: calc((210rem / 18)); height: calc((75rem / 18)); position: relative; font-size: calc((27rem / 18)); line-height: calc((75rem / 18)); letter-spacing: calc((1rem / 18)); font-weight: bold; text-align: center; color: #999999; background: #ffffff; text-decoration: none; cursor: pointer; border: 1px solid #999999; border-top-left-radius: calc((30rem / 18)); border-top-right-radius: calc((30rem / 18)); min-width: calc((180rem / 18)); border-bottom: 0px solid #999999; }
.btn-select-type a:hover { color: #ffffff; background: #0cafa3; transition: .5s; }
@media only screen and (max-width: 640px) { .btn-select-type a { font-size: calc((22rem / 18)); line-height: calc((65rem / 18)); display: block; width: calc((155rem / 18)); height: calc((60rem / 18)); min-width: calc((135rem / 18)); border-top-left-radius: calc((15rem / 18)); border-top-right-radius: calc((15rem / 18)); } }

.btn-select-type-green a:hover { color: #ffffff; background: #0cafa3; }

.active-color-green a { color: #ffffff; opacity: 1; pointer-events: none; background: #0cafa3; }

.add-event-none a { pointer-events: none; opacity: 0.3; }

/* 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: 0.3rem; 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.3); height: calc((56rem / 18)* 1.3); top: 45%; } }

.slick-prev { left: calc((50rem / 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: 0.4rem; background: url(../images/icon/slick-arrow-left-m.svg) no-repeat center top; background-size: 100% 100%; } }

.slick-next { right: calc((50rem / 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: 0.4rem; background: url(../images/icon/slick-arrow-right-m.svg) no-repeat center top; background-size: 100% 100%; } }

/* Dots */
.slick-dots { position: absolute; bottom: calc((50rem / 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: 15px; width: 15px; margin: 0 16px; padding: 0; cursor: pointer; }
.slick-dots li button { border: 0; background: #ffffff; display: block; width: 15px; height: 15px; border-radius: 15px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; border: 1px solid #48bc7b; }
.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: 15px; height: 15px; border-radius: 15px; content: '•'; text-align: center; opacity: 1; color: #48bc7b; background: transparent; }
.slick-dots li.slick-active button:before { opacity: 1; background: #48bc7b; }
@media only screen and (max-width: 1280px) { .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; display: block; width: 10px; height: 10px; border-radius: 10px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; }
  .slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
  .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
  .slick-dots li button:before { 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: #48bc7b; } }

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

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 { position: relative; overflow-y: hidden; margin-bottom: -2px; } }

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

body, html { display: block; height: 100%; min-width: 1280px; outline: none; font-weight: normal; background: #ffffff; font-size: 16px !important; 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: table; text-align: center; clear: both; font-weight: bold; font-size: calc((60rem / 18)); line-height: calc((60rem / 18)); margin: auto; margin-bottom: calc((40rem / 18)); color: #0cafa3; letter-spacing: calc((5rem / 18)); }
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((42rem / 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 p, html p { font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); letter-spacing: calc((1rem / 18)); color: #000000; }
body .sub-menu, html .sub-menu { justify-content: space-around; width: calc((640rem / 18)); max-width: calc((720rem / 18)); height: auto; margin: calc((25rem / 18)) auto; }
body .pop-btn-flex, html .pop-btn-flex { display: flex; width: 100%; justify-content: center; }
@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 .sub-menu, html .sub-menu { justify-content: space-around; width: calc((450rem / 18)); height: calc((70rem / 18)); margin: calc((10rem / 18)) auto; overflow: hidden; flex-wrap: wrap; justify-content: center; }
  body .sub-m-m, html .sub-m-m { width: calc((400rem / 18)); height: calc((100rem / 18)); position: relative; z-index: 3; }
  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((32rem / 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 .font-s-18, html .font-s-18 { font-size: calc((18rem / 18)); line-height: calc((28rem / 18)); color: #000000; }
  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)); color: #000000; }
  body .font-s-32, body .font-s-36, html .font-s-32, html .font-s-36 { font-size: calc((32rem / 18)); line-height: calc((32rem / 18)); color: #000000; } }

.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: 8% !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%; } }

.object-cloud1 { display: block; width: calc((400rem / 18)); height: calc((225rem / 18)); background: url(../images/common/object-cloud1.png) no-repeat; background-size: 100%; }

.object-cloud2 { display: block; width: calc((350rem / 18)); height: calc((250rem / 18)); background: url(../images/common/object-cloud2.png) no-repeat; background-size: 100%; }

.object-money { display: block; width: calc((120rem / 18)); height: calc((120rem / 18)); background: url(../images/common/object-money.png) no-repeat; background-size: 100%; }

.object-round { display: block; width: calc((155rem / 18)); height: calc((155rem / 18)); position: absolute; background: url(../images/common/object-round.png) no-repeat; background-size: 100%; }

.object-money-160 { display: block; width: calc((160rem / 18)); height: calc((160rem / 18)); background: url(../images/common/object-money.png) no-repeat; background-size: 100%; }

#main { display: block; width: 100%; height: auto; margin: auto; position: relative; padding: 0 !important; background: #ffffff; }
#main .kv-con { display: block; width: 100%; height: auto; position: relative; }
#main .object-round { display: block; width: calc((155rem / 18)); height: calc((155rem / 18)); position: absolute; top: 5rem; right: 35%; z-index: 1; }
#main .object-cloud1 { display: none; z-index: 1; }
#main .slogan { display: block; position: absolute; z-index: 3; top: 15%; right: 8%; width: calc((720vw / 1920)*100); height: calc((400vw / 1920)*100); }
#main .slogan img { display: block; width: calc((720vw / 1920)*100); height: calc((400vw / 1920)*100); overflow: hidden; }
@media only screen and (max-width: 1100px) { #main { margin-top: 2rem; } }
@media only screen and (max-width: 767px) { #main { margin-top: 3.5rem; } }
@media only screen and (max-width: 640px) { #main { display: block !important; display: block; width: calc((640vw / 640)*100) !important; height: calc((800rem / 18)); }
  #main .object-round { display: block; width: calc((115rem / 18)); height: calc((115rem / 18)); position: absolute; top: 5rem; right: auto; left: 3%; }
  #main .object-cloud1 { display: block; width: calc((200rem / 18)); height: calc((112rem / 18)); position: absolute; bottom: 1rem; left: 6%; }
  #main .kv-con { height: calc((800rem / 18)); }
  #main .slogan { display: block; position: absolute; z-index: 3; top: 12%; right: 0; left: 0; margin: auto; width: calc((370rem / 18)); height: auto; }
  #main .slogan img { width: 100%; height: auto; } }

#event { display: table; width: 100%; height: auto; margin: auto; background: #ffffff;}
#event h1 { position: relative; }
#event h1 header { position: relative; }
#event h1 .object-round { display: block; width: calc((155rem / 18)); height: calc((155rem / 18)); position: absolute; bottom: -0.5rem; left: -6rem; }
#event .content { width: calc((1200rem / 18)); margin: auto; display: flex; justify-content: space-around; align-items: center; padding: 0; }
#event .event-woman { display: block; width: calc((600rem / 18)); height: calc((600rem / 18)); position: relative; }
#event .event-woman .event-alert { display: block; width: calc((200rem / 18)); height: calc((180rem / 18)); position: absolute; background: url(../images/event/event-alert.png) no-repeat; background-size: 100%; right: 0rem; top: 7.5rem; }
#event .event-cscdog { display: block; width: calc((320rem / 18)); height: calc((320rem / 18)); position: absolute; bottom: -2.5rem; left: -6.6rem; }
#event .txt { display: flex; flex-direction: column; justify-content: center; align-items: center; }
@media only screen and (max-width: 640px) { #event h1 { position: relative; }
  #event h1 header { position: relative; }
  #event h1 .object-round { width: calc((100rem / 18)); height: calc((100rem / 18)); bottom: 1rem; left: -1rem; }
  #event .content { width: 100%; flex-direction: column; }
  #event .event-woman { display: block; width: calc((420rem / 18)); height: calc((420rem / 18)); position: relative; }
  #event .event-woman .event-alert { display: block; width: calc((200rem / 18)* 0.7); height: calc((180rem / 18)* 0.7); position: absolute; background: url(../images/event/event-alert.png) no-repeat; background-size: 100%; right: 0rem; top: 4.5rem; }
  #event .event-cscdog { display: block; width: calc((200rem / 18)); height: calc((200rem / 18)); position: absolute; bottom: -2rem; left: -1rem; }
  #event .txt { display: flex; flex-direction: column; justify-content: center; align-items: center; } }

#share { display: block; margin: auto; position: relative; padding-top: 0% !important; }
#share h1 { position: relative; }
#share h1 header { position: relative; }
#share .bg-top-cover { display: block; width: 100%; height: calc((1360rem / 18)); background: url(../images/share/bg-top-cover.png) no-repeat bottom; background-size: 100% 100%; position: absolute; top: 0; left: 0; right: 0; margin: auto; }
#share .content { margin: auto; position: relative; }
#share .content-login { display: block; margin: auto; width: 95%; height: calc((1100rem / 18)); background: url(../images/share/content-login-bg.png) no-repeat bottom; background-size: 100% 100%; position: relative; }
#share .content-login .object-cloud1 { display: block; width: calc((400rem / 18)); height: calc((225rem / 18)); position: absolute; top: 3%; left: -15%; background: url(../images/common/object-cloud1.png) no-repeat; background-size: 100%; }
#share .content-login .object-cloud2 { display: block; width: calc((350rem / 18)); height: calc((250rem / 18)); position: absolute; bottom: -20%; right: -5%; background: url(../images/common/object-cloud2.png) no-repeat; background-size: 100%; z-index: 1; }
#share .content-login .object-money-160 { display: block; width: calc((120rem / 18)); height: calc((120rem / 18)); position: absolute; bottom: 7.5rem; left: 12%; background: url(../images/common/object-money.png) no-repeat; background-size: 100%; transform: rotate(-40deg); }
#share .content-login .object-money-130 { display: block; width: calc((100rem / 18)); height: calc((100rem / 18)); position: absolute; top: 18.5rem; right: 16%; background: url(../images/common/object-money.png) no-repeat; background-size: 100%; transform: rotate(50deg); }
#share .content-share { display: block; margin: auto; width: 100%; height: calc((1100em / 18)); background: url(../images/share/content-share-bg.png) no-repeat bottom; background-size: 100% 100%; position: relative; }
#share .content-share .object-cloud1 { display: block; width: calc((400rem / 18)); height: calc((225rem / 18)); position: absolute; top: 3rem; left: -15rem; background: url(../images/common/object-cloud1.png) no-repeat; background-size: 100%; }
#share .content-share .object-round { display: block; width: calc((145rem / 18)); height: calc((145rem / 18)); position: absolute; top: 25rem; right: -6rem; }
#share .content-share .share-front { display: block; width: calc((1920vw / 1920)*100) !important; height: calc((780vw / 1920)*100) !important; position: absolute; bottom: 0rem; left: 0; right: 0; background: url(../images/share/share-front.png) no-repeat bottom; background-size: 100%; }
#share .content-prize { display: block; margin: auto; width: 100%; height: auto; background: url(../images/share/prize-bg.png) no-repeat top #fff399; background-size: 100% auto; position: relative; margin-top: -2px; padding-bottom: 12%; }
#share .content-prize .share-prize-cover-bottom { display: block; width: 100%; height: calc((540rem / 18)); position: absolute; bottom: 0rem; left: 0; right: 0; margin: auto; background: url(../images/share/share-prize-cover-bottom.png) no-repeat; background-size: 100% 100%; }
#share .content-prize .share-cscdog { display: block; width: calc((300rem / 18)); height: calc((300rem / 18)); position: absolute; top: 0rem; left: 5rem; background: url(../images/share/share-cscdog.png) no-repeat; background-size: 100%; }
#share .content-prize .object-cloud2 { display: block; width: calc((350rem / 18)*0.7); height: calc((250rem / 18)*0.7); position: absolute; top: 45rem; right: 5%; background: url(../images/common/object-cloud2.png) no-repeat; background-size: 100%; z-index: 1; }
#share .content-prize .mydeal, #share .content-prize .myshare { margin-top: calc((60rem / 18)) !important; z-index: 1; position: relative; }
#share .content-prize .myshare { min-height: calc((400rem / 18)); }
#share .content-prize .font-m-c { padding-top: 0.5rem; }
#share .content-prize .prize-list { display: block; max-width: calc((960rem / 18)); width: 100%; margin: auto; }
#share .content-prize .prize-list li { width: 33%; float: left; }
#share .content-prize .prize-list li a { color: #f56e3d; }
#share .content-prize .prize-list ul:nth-child(even) { font-size: calc((24rem / 18)); line-height: calc((60rem / 18)); background: #fff; color: #333333; text-align: center; height: calc((60rem / 18)); }
#share .content-prize .prize-list ul:nth-child(odd) { font-size: calc((24rem / 18)); line-height: calc((60rem / 18)); color: #333333; background: #efefef; height: calc((60rem / 18)); text-align: center; }
#share .content-prize .prize-list ul:nth-child(1) { background: #f56e3d; font-size: calc((24rem / 18)); line-height: calc((60rem / 18)); letter-spacing: calc((0.5rem / 18)); color: #fff; text-align: center; font-weight: bold; height: calc((60rem / 18)); clear: both; border-top-left-radius: calc((30rem / 18)); border-top-right-radius: calc((30rem / 18)); }
#share .content-prize .prize-list-green li a { color: #0cafa3; }
#share .content-prize .prize-list-green ul:nth-child(even) { background: #e6fffd; color: #333333; }
#share .content-prize .prize-list-green ul:nth-child(odd) { color: #333333; background: #ffffff; }
#share .content-prize .prize-list-green ul:nth-child(1) { color: #fff; background: #0cafa3; }
#share .con { display: block; width: calc((1200rem / 18)); height: calc((1000rem / 18)); margin: auto; position: absolute; left: 0; right: 0; bottom: 0; }
#share .share-woman-green { display: block; width: calc((400rem / 18)); height: calc((820rem / 18)); position: absolute; background: url(../images/share/share-woman-green.png) no-repeat; background-size: 100%; top: 5rem; left: 5rem; }
#share .share-woman-green .share-woman-green-alert { display: block; width: calc((200rem / 18)); height: calc((180rem / 18)); position: absolute; background: url(../images/share/share-woman-green-alert.png) no-repeat; background-size: 100%; right: -3.5rem; top: -1rem; }
#share .share-woman-yellow { display: block; width: calc((400rem / 18)); height: calc((820rem / 18)); position: absolute; background: url(../images/share/share-woman-yellow.png) no-repeat; background-size: 100%; top: 5rem; left: 5rem; }
#share .share-woman-yellow .share-woman-yellow-alert { display: block; width: calc((200rem / 18)); height: calc((180rem / 18)); position: absolute; background: url(../images/share/share-woman-yellow-alert.png) no-repeat; background-size: 100%; right: -3.5rem; top: -1rem; }
#share .form { display: flex; width: calc((500rem / 18)); justify-content: center; align-items: center; flex-direction: column; position: absolute; left: 26rem; margin: auto; top: 15rem; }
#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: #0cafa3; }
#share .form li .icon-input { position: absolute; right: 1rem; font-size: calc((28rem / 18)); color: #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: #0cafa3; }
#share .form .li-two-btn { width: 58%; margin: auto; }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #share .form .input { padding: 0 2.5%; } }
#share .form-share { top: 10rem; }
#share .header-share { display: flex; width: 95%; color: #999999; align-items: center; justify-content: space-between; margin-top: 1rem; margin-bottom: 1rem; }
#share .header-share:before, #share .header-share:after { content: ""; width: 30%; height: 1px; background: #999999; }
#share .header-share p { width: 30%; color: #999999; text-align: center; }
#share .a_line { line-height: calc((35rem / 18)) !important; color: #0cafa3; border-bottom: 1px solid #0cafa3; margin-bottom: 1rem; margin-top: 0.5rem; }
#share .a_line:hover { line-height: calc((35rem / 18)) !important; color: #f56e3d; border-bottom: 1px solid #f56e3d; }
#share .btn-copy a .input-copy { display: block; width: calc((450rem / 18)); height: calc((75rem / 18)); background: #fff; border: 1px solid #0cafa3; position: relative; padding: 0 calc((20rem / 18)); font-size: calc((26rem / 18)); font-weight: bold; line-height: calc((75rem / 18)); color: #000000; text-align: left; padding-left: calc((20rem / 18)); margin: 1rem auto; margin-bottom: 3.5rem; cursor: pointer; pointer-events: none; border-radius: calc((75rem / 18)); overflow: hidden; }
#share .btn-copy a .input-copy a { text-decoration: none; }
#share .btn-copy a .input-copy span { height: calc((75rem / 18)); width: calc((120rem / 18)); position: absolute; top: 0; right: 0; font-size: calc((24rem / 18)); text-align: center; letter-spacing: 0.1rem; color: #ffffff; background: #0cafa3; transition: .5s; }
#share .btn-copy a:hover .input-copy { border: 1px solid #f56e3d; transition: .5s; }
#share .btn-copy a:hover .input-copy span { line-height: calc((75rem / 18)); background: #f56e3d; transition: .5s; }
#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"] { display: none; }
#share .select-stock-btn input[type="radio"] + label { display: flex; width: calc((155rem / 18)); height: calc((105rem / 18)); border-radius: calc((15rem / 18)); background: top right #ffffff; margin: 0; font-size: calc((26rem / 18)); line-height: calc((32rem / 18)) !important; letter-spacing: calc((1rem / 18)); color: #999999; border: 1px solid #999999; text-align: center; cursor: pointer; transition: all .5s; position: relative; justify-content: center; align-items: center; }
#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 .5s; }
#share .select-stock-btn input[type="radio"] + label .icon-check:before { display: none; }
#share .select-stock-btn input[type="radio"]:checked + label { color: #0cafa3; border: 1px solid #0cafa3; transition: all .5s; }
#share .select-stock-btn input[type="radio"]:checked + label .icon-check { opacity: 1; transition: all .5s; }
#share .pagination { display: flex; }
@media only screen and (max-width: 1366px) { #share .content-prize { padding-top: 3%; } }
@media only screen and (max-width: 1100px) { #share .content-prize { padding-top: 8%; } }
@media only screen and (max-width: 640px) { #share { display: block; padding-top: 15% !important; }
  #share .bg-top-cover { display: none; }
  #share .share-woman-green { display: none; }
  #share .share-woman-green .share-woman-green-alert { display: none; }
  #share .share-woman-yellow { display: none; }
  #share .share-woman-yellow .share-woman-yellow-alert { display: none; }
  #share .con { display: block; width: 100%; height: auto; position: relative; padding-bottom: 2rem; padding-top: 2.5rem; z-index: 1; }
  #share .content-login { margin: auto; width: 100%; height: auto; background: #faf3b1; background-size: 100% 100%; position: relative; }
  #share .content-login .object-cloud1, #share .content-login .object-cloud2, #share .content-login .object-money-160, #share .content-login .object-money-130 { display: none; }
  #share .content-login .cover-top-yellow { width: 100%; height: calc((150rem / 18)); background: url(../images/share/cover-top-yellow.png) no-repeat top; background-size: 100%; position: absolute; top: -2rem; }
  #share .content-login .cover-bottom-yellow { width: 100%; height: calc((150rem / 18)); background: url(../images/share/cover-bottom-yellow.png) no-repeat bottom; background-size: 100%; position: absolute; bottom: -2rem; }
  #share .form { display: flex; width: 100%; justify-content: center; align-items: center; flex-direction: column; position: static; padding: 0 10%; }
  #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 a { font-size: calc((22rem / 18)); line-height: calc((65rem / 18)); color: #0cafa3; }
  #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%; }
  #share .form-share { padding: 0 8%; }
  #share .content-share { display: block; margin: auto; width: 100%; height: auto; background: #e6fffd; position: relative; padding-bottom: 2rem; }
  #share .content-share .object-cloud1, #share .content-share .object-round { display: none; }
  #share .content-share .cover-top-blue { width: 100%; height: calc((150rem / 18)); background: url(../images/share/cover-top-blue.png) no-repeat top; background-size: 100%; position: absolute; top: -2rem; }
  #share .content-share .share-front { display: block; width: 100%; height: calc((360rem / 18)); position: absolute; bottom: 0rem; left: 0; right: 0; background: url(../images/share/share-front-m.png) no-repeat bottom; background-size: 100%; }
  #share .header-share { display: flex; width: 100%; color: #999999; align-items: center; justify-content: space-between; margin-top: 1rem; margin-bottom: 1rem; }
  #share .header-share:before, #share .header-share:after { content: ""; width: 30%; height: 1px; background: #999999; }
  #share .header-share p { width: 30%; color: #999999; text-align: center; }
  #share .a_line { line-height: calc((35rem / 18)) !important; color: #0cafa3; border-bottom: 1px solid #0cafa3; margin-bottom: 1rem; margin-top: 0.5rem; }
  #share .a_line:hover { line-height: calc((35rem / 18)) !important; color: #f56e3d; border-bottom: 1px solid #f56e3d; }
  #share .btn-copy a .input-copy { display: block; width: calc((420rem / 18)); height: calc((65rem / 18)); background: #fff; border: 1px solid #0cafa3; position: relative; padding: 0 calc((20rem / 18)); font-size: calc((22rem / 18)); font-weight: bold; line-height: calc((65rem / 18)); color: #000000; text-align: left; padding-left: calc((20rem / 18)); margin: 1rem auto; margin-bottom: 3.5rem; cursor: pointer; pointer-events: none; border-radius: calc((65rem / 18)); overflow: hidden; }
  #share .btn-copy a .input-copy a { text-decoration: none; }
  #share .btn-copy a .input-copy span { height: calc((65rem / 18)); width: calc((100rem / 18)); position: absolute; top: 0; right: 0; font-size: calc((22rem / 18)); text-align: center; letter-spacing: 0.1rem; color: #ffffff; background: #0cafa3; transition: .5s; }
  #share .btn-copy a:hover .input-copy { border: 1px solid #f56e3d; transition: .5s; }
  #share .btn-copy a:hover .input-copy span { line-height: calc((65rem / 18)); background: #f56e3d; transition: .5s; }
  #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((125rem / 18)); height: calc((85rem / 18)); border-radius: calc((15rem / 18)); background: top right #ffffff; margin: 0; font-size: calc((22rem / 18)); line-height: calc((28rem / 18)) !important; letter-spacing: calc((1rem / 18)); color: #999999; border: 1px solid #999999; text-align: center; cursor: pointer; transition: all .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)); 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 .5s; }
  #share .select-stock-btn input[type="radio"] + label .icon-check:before { display: none; }
  #share .select-stock-btn input[type="radio"]:checked + label { color: #0cafa3; border: 1px solid #0cafa3; transition: all .5s; }
  #share .select-stock-btn input[type="radio"]:checked + label .icon-check { opacity: 1; transition: all .5s; }
  #share .content-prize { display: block; margin: auto; width: 100%; padding: 0 5%; padding-top: 3rem; padding-bottom: 5rem; height: auto; background: #faf3b1; margin-top: -2px; }
  #share .content-prize .share-prize-cover-bottom { display: block; width: 100%; height: calc((150rem / 18)); background: url(../images/share/cover-bottom-yellow.png) no-repeat bottom; background-size: 100%; position: absolute; bottom: -2rem; }
  #share .content-prize .share-cscdog { display: block; width: calc((300rem / 18)*0.6); height: calc((300rem / 18)*0.6); position: absolute; top: 2.5rem; left: 0rem; background: url(../images/share/share-cscdog.png) no-repeat; background-size: 100%; }
  #share .content-prize p { text-align: left !important; width: 65%; margin-left: 8rem; }
  #share .content-prize .font-m-c { text-align: center !important; width: 100%; margin: auto; }
  #share .content-prize .object-cloud2 { display: none; }
  #share .content-prize .mydeal, #share .content-prize .myshare { margin-top: calc((60rem / 18)) !important; z-index: 1; position: relative; }
  #share .content-prize .myshare { min-height: calc((250rem / 18)); }
  #share .content-prize .prize-list { display: block; max-width: calc((960rem / 18)); width: 100%; margin: auto; }
  #share .content-prize .prize-list li { width: 33%; float: left; }
  #share .content-prize .prize-list ul:nth-child(even) { font-size: calc((20rem / 18)); line-height: calc((50rem / 18)); background: #fff; color: #333333; text-align: center; height: calc((50rem / 18)); }
  #share .content-prize .prize-list ul:nth-child(odd) { font-size: calc((20rem / 18)); line-height: calc((50rem / 18)); color: #333333; background: #efefef; height: calc((50rem / 18)); text-align: center; }
  #share .content-prize .prize-list ul:nth-child(1) { background: #f56e3d; font-size: calc((20rem / 18)); line-height: calc((50rem / 18)); letter-spacing: calc((0.5rem / 18)); color: #fff; text-align: center; font-weight: bold; height: calc((50rem / 18)); clear: both; border-top-left-radius: calc((20rem / 18)); border-top-right-radius: calc((20rem / 18)); }
  #share .content-prize .prize-list-green ul:nth-child(even) { background: #e6fffd; color: #333333; }
  #share .content-prize .prize-list-green ul:nth-child(odd) { color: #333333; background: #ffffff; }
  #share .content-prize .prize-list-green ul:nth-child(1) { color: #fff; background: #0cafa3; }
  #share .content-prize .prize-list-green .ps-prize-list { height: calc((100rem / 18)) !important; } }

#step { display: block; margin: auto; padding-top: 12rem !important; margin-top: -1px; position: relative; }
#step .bg-top-bottom { display: block; width: 100%; height: calc((1360rem / 18)); background: url(../images/share/bg-bottom-cover.png) no-repeat bottom; background-size: 100% 100%; position: absolute; top: 0; left: 0; right: 0; margin: auto; }
#step .content { width: calc((1040rem / 18)); margin: auto; padding: 0; height: calc((640rem / 18)); display: block; position: relative; }
#step h1 { position: relative; }
#step h1 header { position: relative; }
#step h1 .object-round { display: block; width: calc((155rem / 18)); height: calc((155rem / 18)); position: absolute; bottom: -0.5rem; right: -6rem; }
#step h1 .step-cscdog { display: block; width: calc((180rem / 18)); height: calc((200rem / 18)); position: absolute; bottom: -2rem; left: -11rem; background: url(../images/step/step-cscdog.png) no-repeat; background-size: 100%; }
#step .step-list { display: flex; justify-content: space-between; margin-top: 5rem; clear: both; align-items: center; }
#step .step { display: flex; width: calc((280rem / 18)); height: calc((280rem / 18)); border-radius: calc((280rem / 18)); background: #b9eeea; background-size: 100%; position: relative; flex-direction: column; justify-content: center; align-items: center; }
#step .step span { display: block; width: calc((105rem / 18)); height: calc((105rem / 18)); margin-bottom: 1rem; }
#step .step .number { display: block; width: calc((80rem / 18)); height: calc((80rem / 18)); position: absolute; top: -1rem; left: 0; 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 .object-green { display: block; width: calc((500rem / 18)); height: calc((250rem / 18)); background: url(../images/step/object-green.png) no-repeat; background-size: 100%; position: absolute; left: -36rem; bottom: 6rem; z-index: 1; }
#step .object-money-green { display: block; width: calc((600rem / 18)); height: calc((400rem / 18)); background: url(../images/step/object-money-green.png) no-repeat; background-size: 100%; position: absolute; right: -38rem; bottom: -6rem; z-index: 1; }
#step .object-round-mobile { display: none; }
@media only screen and (max-width: 1100px) { #step .object-money-green, #step .object-green { display: none; } }
@media only screen and (max-width: 640px) { #step { display: block !important; height: auto; padding-top: 25% !important; margin-top: 0; }
  #step .content { width: 100%; padding: 5% 8% 5%; height: auto; }
  #step .bg-top-bottom { display: none; }
  #step h1 { position: relative; }
  #step h1 header { position: relative; }
  #step h1 .object-round { display: block; width: calc((110rem / 18)); height: calc((110rem / 18)); bottom: 0.5rem; right: 1.5rem; }
  #step h1 .step-cscdog { display: block; width: calc((180rem / 18)*0.7); height: calc((200rem / 18)*0.7); bottom: -2rem; left: -1rem; }
  #step .step-list { display: flex; justify-content: space-between; margin-top: 3rem; clear: both; align-items: center; width: 100%; }
  #step .step { display: flex; width: calc((120rem / 18)); height: calc((220rem / 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); }
  #step .object-green { display: none; }
  #step .object-money-green { display: none; }
  #step .object-round-mobile { display: block; width: calc((55rem / 18)); height: calc((55rem / 18)); bottom: -0.5rem; left: 1rem; } }

#qa { display: table; width: 100%; height: calc((1000rem / 18)); margin: auto; background: #ffffff; font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); color: #333333; overflow: hidden; position: relative; }
#qa .sub-m-m { display: flex; width: calc((560rem / 18)); position: relative; z-index: 3; margin: auto; justify-content: space-evenly; border-bottom: 1px solid #999; margin-bottom: 2rem; padding: 0 3rem; }
#qa .content { width: calc((1000rem / 18)); margin: auto; padding: 0% 0% 5%; padding-bottom: 0%; position: relative; z-index: 3; }
#qa .cover-bottom { display: block; width: calc((1920vw / 1920)*100); height: calc((640vw / 1920)*100); background: url(../images/qa/cover-bottom.png) no-repeat; background-size: 100%; position: absolute; z-index: 1; }
#qa h1 { position: relative; }
#qa .qa-list { display: block; clear: both; margin-bottom: calc((30rem / 18)); }
#qa .qa-list * a { color: #0cafa3; }
#qa .qa-list .question { display: block; width: 100%; min-height: calc((70rem / 18)); position: relative; padding: calc((30rem / 18)); font-weight: 500; border: 1px solid #989898; border-radius: calc((10rem / 18)); margin-bottom: 1rem; background: #ffffff; }
#qa .qa-list .qa-txt-con { display: flex; width: 100%; padding-right: calc((50rem / 18)); position: relative; cursor: pointer; }
#qa .qa-list .qa-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; top: calc((5rem / 18)); right: 0; transition: .5s; margin: auto; color: #989898; }
#qa .qa-list .qa-txt-con .icon-chevron-down-180 { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); position: absolute; transition: .5s; }
#qa .qa-list .qa-txt-con span { display: flex; min-width: calc((50rem / 18)); max-width: calc((50rem / 18)); }
#qa .qa-list .answer-txt-con { margin: calc((10rem / 18)) 0; padding: 0 calc((50rem / 18)); width: 100%; color: #666666; }
@media only screen and (max-width: 640px) { #qa { display: block !important; padding-top: 10%; font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); padding-bottom: 5% !important; min-height: auto; height: auto; }
  #qa .sub-m-m { display: flex; width: calc((425rem / 18)); height: calc((60rem / 18)); justify-content: space-between; margin-bottom: 1rem; }
  #qa .content { width: 100%; margin: auto; padding: 0 5%; padding-bottom: 10%; }
  #qa .cover-bottom { display: none; }
  #qa .qa-list * { height: 100%; }
  #qa .qa-list .question { display: block; width: 100%; min-height: calc((70rem / 18)); position: relative; padding: calc((20rem / 18)); }
  #qa .qa-list .qa-txt-con { padding-right: calc((40rem / 18)); }
  #qa .qa-list .answer-txt-con { font-size: calc((22rem / 18)); padding-right: 0; } }

#ativities { display: table; width: 100%; height: auto; margin: auto; background: #e6fffd; font-size: calc((28rem / 18)); line-height: calc((42rem / 18)); color: #333333; overflow: hidden; position: relative; }
#ativities .ps { margin: 5rem auto; }
#ativities h1 { position: relative; }
#ativities .btn-down { display: flex; width: calc((40rem / 18)); height: calc((40rem / 18)); background: #0cafa3; border-radius: calc((40rem / 18)); align-items: center; justify-content: center; text-align: center; position: absolute; top: 0.5rem; right: -3rem; cursor: pointer; }
#ativities .btn-down i { color: #fff; font-size: calc((28rem / 18)); margin-left: 0.5rem; }
#ativities .content { width: calc((1200rem / 18)); margin: auto; padding: 0%; }
#ativities .cover-top-blue { display: none; }
@media only screen and (max-width: 640px) { #ativities { display: block !important; padding-top: 10%; font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); padding-bottom: 0% !important; min-height: auto; }
  #ativities .cover-top-blue { display: block; width: 100%; height: calc((150rem / 18)); background: url(../images/share/cover-top-blue.png) no-repeat top; background-size: 100%; position: absolute; top: 0rem; }
  #ativities .ps { margin: 5rem auto; margin-top: 1rem; }
  #ativities .content { width: 100%; padding: 5% 8% 5%; }
  #ativities .btn-down { top: 0.4rem; right: 4rem; } }

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: #333333; clear: both; background: #fff; 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: 100%; margin-top: 4%; padding: 4% 1%; margin-bottom: 0% !important; font-size: calc((14rem / 18)); line-height: calc((24rem / 18)); height: calc((90rem / 18)); }
  footer br { display: block; } }

.precautions { width: 100%; }
.precautions p { font-size: calc((22rem / 18)); line-height: calc((36rem / 18)); }
.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((560rem / 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-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 { max-width: calc((560rem / 18)); width: 100%; background: #ffffff; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: calc((15rem / 18)); padding: 2.5%; margin: auto; z-index: 2; position: relative; }
.popup .popup-content-page { width: calc((840rem / 18)); max-width: calc((1000rem / 18)); }
.popup .popup-content-page .content-text { height: calc((540rem / 18)); padding-left: 0.5rem; padding-right: 1rem; }
.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)); }
@media only screen and (max-width: 640px) { .popup { overflow-y: auto; }
  .popup .popup-content { width: calc((400rem / 18)); padding: 5.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 .margin-left_10 { margin-left: 0rem; margin-top: 0rem; }
  .popup .margin-left_10 ul li { padding-right: calc((0rem / 18)); } }

.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: #ffffff; border-radius: calc((10rem / 18)); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); padding: 2% 2%; padding-top: 4%; 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-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; } }

.right-block-all { display: block; position: fixed; right: 1vw; bottom: 13vw; z-index: 99; }
@media only screen and (max-width: 1280px) { .right-block-all { bottom: 20vw; } }
@media only screen and (max-width: 768px) { .right-block-all { bottom: 30vw; } }
@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((20rem / 18)); padding: 0; background: #0cafa3; transition: .5s; }
.right-block-btn-base-0 a:hover, .right-block-btn-base-1 a:hover { padding: 0vw; border-radius: calc((20rem / 18)); background: #0cafa3; transition: .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: #0cafa3; transition: .5s; }
  .right-block-btn-base-0 a:hover, .right-block-btn-base-1 a:hover { padding: 0vw; border-radius: calc((10rem / 18)); background: #0cafa3; color: #ffffff; transition: .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: #f56e3d; }
@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; } }

#page { display: block; margin: auto; position: relative; padding-top: 0 !important; width: calc((540rem / 18)); }
#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 #e0e0e0; 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: #0cafa3; }
@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 #e0e0e0; 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: #0cafa3; } }

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