* {margin: 0;padding: 0;list-style: none;}
body {color: #fff;font-size: 10px;background: linear-gradient(175deg, #1f252f, #39514b, #637a66, #ac6a3f);}
.toastText {position: fixed;left: 50%;top: 0;transform: translate(-50%, calc((100% + 10px) * -1));background-color: #3ebe57;font-size: 14px;text-align: center;padding: 8px 16px;border-radius: 8px;user-select: none;}
.toastText.fadein {animation: toast_in 3s ease-in-out forwards;}
/*  */
@keyframes toast_in {0% {transform: translate(-50%, calc((100% + 10px) * -1));opacity: 0;}
10% {transform: translate(-50%, calc((100% + 10px) + 0px));opacity: 1;}
90% {transform: translate(-50%, calc((100% + 10px) + 0px));opacity: 1;}
100% {transform: translate(-50%, calc((100% + 10px) * -1));opacity: 0;}}
.toastText .cont {}

.toastText .t {}

.toastText .icon {}

/*  */
.app {width: 100%;min-height: 100vh;display: flex;flex-direction: column;background: no-repeat center /cover;}
.container {max-width: 1440px;margin: 0 auto;padding: 0 10px;}
header {position: relative;padding: 3em 8em 1em;display: flex;align-items: center;flex-direction: row-reverse;}
header h1 {display: flex;align-items: center;justify-content: center;gap: 10px;flex-direction: row-reverse;}
header h1 img {max-height: 50px;}
header h1 p {font-size: 26px;}
.downBtn {display: flex;align-items: center;gap: 20px;}
.downBtn .item {border: 1px solid #fff;width: 160px;height: 50px;display: flex;align-items: center;justify-content: center;border-radius: 100px;font-size: 14px;cursor: pointer;padding: 5px 20px;box-sizing: border-box;gap: 10px;background-color: hsl(202.11deg 32.2% 23.14% / 55%);text-decoration: none;outline: none;user-select: none;color: #fff;transition: .3s;display: none;--kuosan: 20px;}
.pc .downBtn .item.apple, .pc .downBtn .item.google, .ios .downBtn .item.apple, .android .downBtn .item.google {display: flex;}
.downBtn .item:hover {box-shadow: 0 0 var(--kuosan) 0px #ccc;transform: scale(.95);}
.downBtn .item.google {}

.downBtn .item.apple {}

.downBtn .item i {width: 20px;height: 100%;display: flex;align-items: center;justify-content: center;transition: inherit;}
.downBtn .item i img {max-height: 100%;max-width: 100%;}
.downBtn .item .ico_google {}

.downBtn .item .ico_apple {}

.downBtn .item .txt {display: flex;align-items: center;/* justify-content: center; */flex: 1;}
/* fotter */
.fotter {color: #fff;font-size: 12px;text-align: center;padding-bottom: 10px;position: fixed;bottom: 0;width: 100%;display: flex;left: 0;flex-direction: column;justify-content: center;}
.fotter a {color: #fff;text-decoration: none;}
.copyright {margin-bottom: 1px;}
.ftLinks {display: flex;justify-content: end;align-items: center;gap: 10px;}
.ftLinks .line {display: block;width: 2px;height: 10px;background-color: rgb(255 255 255 / 50%);margin-top: 2px;}
.ftLinks a {display: inline-block;padding: 5px 8px;}
.ftLinks a:hover {text-decoration: underline;}
/* fotter */
/*  */
.headLink {flex: 1;display: flex;align-items: center;justify-content: start;gap: 2px 5px;flex-direction: row-reverse;}
.headLink a {color: #fff;font-size: 12px;padding: 5px;text-align: center;text-decoration: none;}
.headLink a:hover {text-decoration: underline;}
.headLink i {display: block;width: 2px;height: 10px;background-color: rgb(255 255 255 / 50%);margin-top: 4px;}
/*  */
main {flex: 1;padding: 10px 12px;position: relative;display: flex;align-items: center;overflow: hidden;}
main .container {display: flex;max-width: 88%;gap: 3em;flex-wrap: wrap;justify-content: space-between;height: 100%;}
.info {padding: 10px 0 10em;gap: 10px;flex: 1;width: 40%;order: 2;display: flex;flex-direction: column;justify-content: center;align-items: start;}
.info .content {font-size: 4em;line-height: 1.3;margin: 0em 0 1em;min-width: 13em;}
.info .btn {background-color: #007dff;font-size: 2.1em;display: flex;align-items: center;justify-content: center;border-radius: 10px;}
.info .btn .txt {color: #fff;text-decoration: none;font-size: 16px;display: flex;align-items: center;gap: 30px;border-radius: 10px;padding: 10px 20px;cursor: pointer;position: relative;user-select: none;}
.info .btn .txt .t {display: flex;flex-direction: column;gap: 3px;}
.info .btn .txt .t {}

.info .btn .txt .t p {}

.info .btn .txt .t .s {font-size: 12px;display: flex;gap: 10px;opacity: 0.8;}
.info .btn .ico_down {}

.info .btn .pop {background: #fff;border-radius: 10px;--w: 200px;--padding: 10px;position: absolute;left: calc(50% - var(--w) /2);top: calc(100% + 10px);width: var(--w);min-height: var(--w);z-index: 2;padding: var(--padding);box-sizing: border-box;box-shadow: 0px 2px 2px #ccc;transform: scale(0);transition: .3s;transform-origin: center top;}
.info .btn:hover .pop {transform: scale(1);}
.info .btn .pop .qrcode {width: 100%;height: calc(var(--w) - var(--padding) * 2);background: no-repeat center / contain;}
.info .btn .pop .qrcode::before {content: '';display: block;width: var(--w);height: var(--w);position: absolute;top: -20px;left: 0;}
.info .btn .pop .qrcode img {display: block;width: 100%;height: auto;}
.info .btn .pop .tips {color: #333;font-size: 14px;text-align: center;margin: 5px 0;}
.pic_swiper {cursor: pointer;padding-bottom: 40px;--radu: 10px;border-radius: var(--radu);animation: swp 1s linear forwards;width: 56%;max-width: 1100px;}
@keyframes swp {0% {transform: translateX(100vw);}
100% {transform: translateX(0);}}
.pic_swiper img {display: block;border-radius: var(--radu);user-select: none;object-fit: contain;width: 100%;}
.pic_swiper_in img {height: 0;opacity: 0;animation: slide_img 1s 0.5s forwards;}
@keyframes slide_img {0% {transform: calc(0);width: 0%;height: 0;opacity: 0;}
100% {transform: calc(1);width: 100%;height: auto;opacity: 1;}}
.pic_swiper .swiper-pagination {}

.pic_swiper .swiper-pagination .swiper-pagination-bullet {background-color: #fff;}
footer {position: relative;padding: 10px 0;}
.disclaimer {line-height: 1.8;font-size: 14px;}
/* media */
@media screen and (max-width: 1440px) {body {font-size: 7px;}}
@media screen and (max-width: 1200px) {body {font-size: 6px;}
#img_logo {height: 4em;}}
@media screen and (min-width: 1101px) {main .container {flex-direction: row-reverse;}
main .container .info {align-items: end;}
.info .content {text-align: right;}
.downBtn {flex-direction: column;}}
@media screen and (max-width: 1100px) {body {font-size: 8px;}
header h1 p {font-size: 22px;}
#img_logo {height: 3em;}
.pic_swiper {width: 100%;}
.info {orphans: 1;padding: 0;order: 0;flex-direction: row-reverse;align-items: center;justify-content: space-between;}
.info .content {margin: 0 0 0.4em;flex: 1;text-align: right;}}
@media screen and (max-width: 840px) {body {font-size: 7px;}
#img_logo {/* height: 2em; */}
.info {flex-wrap: wrap;}}
@media screen and (max-width: 750px) {body {font-size: 6px;}
header {padding: 3em 2em 1em;gap: 2rem;}
header h1 p {font-size: 18px;}
.headLink .line.last {display: none;}
.headLink {flex-wrap: wrap;flex: 1;}
.info .btn .pop {left: -2em;}
.disclaimer {font-size: 12px;line-height: 1.4;}
.info {flex-direction: column;align-items: end;}
.info .btn .txt {font-size: 14px;}
.info .btn .txt .s {font-size: 12px;}
.downBtn {gap: 16px;}
.downBtn .item {--kuosan: 10px;width: 124px;padding: 3px 13px;height: 35px;font-size: 12px;gap: 4px;text-decoration: none;outline: none;user-select: none;}
.downBtn .item i img {max-height: 70%;}}
@media screen and (max-width: 360px) {.headLink a {font-size: 10px;padding: 3px;}
.downBtn .item {width: 120px;font-size: 10px;}
}