@import"https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;700&display=swap";

:root {
    --colorPrimaryL: #5E434B;
    --colorPrimary: #5E434B;
    --colorPrimaryD: #5E434B;
    --colorSecondL: #FDBA4D;
    --colorSecond: #FDBA4D;
    --colorSecondD: #FDBA4D;
    --colorSubSecondaryL: color-mix(in srgb, var(--colorSecond) 50%, white);
    --colorSubSecondary: #FFE501;
    --colorSubSecondaryD: color-mix(in srgb, var(--colorSecond) 50%, black);
    --colorGreenL: #8EC31D;
    --colorGreen: #00B247;
    --colorGreenD: #0F873D;
    --colorPinkL: #ff88be;
    --colorPink: #FD5FA6;
    --colorPinkD: #e3297d;
    --colorGray100: #FBFCFC;
    --colorGray90: #F6F8FA;
    --colorGray80: #EDF1F4;
    --colorGray70: #E5EBEF;
    --colorGray60: #DCE4E9;
    --colorGray50: #D3DDE4;
    --colorGray40: #A9B1B6;
    --colorGray30: #7F8589;
    --colorGray20: #54585B;
    --colorGray10: #2A2C2E;
    --colorBlack: #0B0C0C;
    --colorWhite: #ffffff;
    --gradient-primary: linear-gradient(56deg, var(--colorPrimary) 0%, var(--colorPrimaryL) 100%);
    --gradient-secound: linear-gradient(56deg, var(--colorSecond) 0%, var(--colorSecondL) 100%);
    --gradient-black: linear-gradient(122deg, #181010 25%, #51515d 100%);
    --gradient-grey: linear-gradient(40deg, #adabab 25%, #777 100%);
    --gradient-silver: radial-gradient(91.77% 115.83% at 22.77% 18.75%, #fff 0%, #d9d9d9 100%);
    --baseFontsize: 16px --border: 1px solid;
    --gradientYellow: linear-gradient(180deg, #E86100 2.5%, #F9AF58 20.31%, #F19601 55.31%, #CA981A 90.62%, #CB9201 100%);




}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: initial
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

html {
    line-height: initial;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: rgba(0, 0, 0, 0);
    text-decoration: none
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

button {
    color: rgba(42, 44, 46, 1)
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

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,
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
}

ul,
ol {
    padding-inline-start: 1.5em
}

ul li::marker {
    font-size: 1em
}

ol,
ul,
li {
    margin: 0
}

hr {
    display: block;
    width: 100%;
    height: 1px;
    margin: 0;
    border: none;
    background-color: #000
}

section {
    position: relative
}

input[type=color],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select:focus,
textarea {
    font-size: 16px
}

.btn {
    font-size: 1rem;
    line-height: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    overflow: hidden;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    height: 44px;
    line-height: 44px;
    width: 100%;
    min-width: 120px;
    padding: 0 24px;
    color: var(--colorGray10);
    background-color: var(--colorSubSecondary);
    border: 2px solid var(--Gradient-stoke, #5e434b);
    box-shadow: 1px 2px 8px 0px rgba(0, 0, 0, .1), 0px 1px 2px 0px rgba(0, 0, 0, .2);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center
}

@media(min-width: 1024px) {
    .btn {
        height: 44px;
        line-height: 44px;
        min-width: 180px
    }
}

.btn:hover {
    color: var(--colorPrimary)
}

.btn.red {
    background: radial-gradient(11.94% 8.98% at 15.43% 20%, #fff 0%, rgba(255, 255, 255, 0) 50.77%), linear-gradient(180deg, #d00616 2.5%, #f53d4a 20.31%, #fd4d4d 55.31%, #fd4d4d 90.62%, #f10000 100%);
    border: none;
    box-shadow: none;
    color: #fff
}

.btn.outline {
    background: rgba(0, 0, 0, 0);
    color: var(--colorGray10);
    border: 2px solid var(--colorPrimary);
    box-shadow: 1px 2px 8px 0px rgba(0, 0, 0, .1)
}

.btn.outline.red {
    border-color: #f81e2f;
    color: #f81e2f
}

.btn.small {
    font-size: 1rem;
    line-height: 1em;
    font-weight: bold;
    min-width: 150px;
    height: 40px;
    line-height: 40px
}

.btn.disabled,
.btn:disabled {
    background: var(--colorGray80);
    color: var(--colorGray30);
    border-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    cursor: unset;
    pointer-events: none
}

.btn.facebook {
    background: #2081e2;
    border-color: #2081e2;
    color: #fff;
    font-weight: bold
}

.btn.facebook i {
    display: block;
    width: 24px;
    height: 24px;
    background: url(../img/ui/button/ico-fb.svg) center center no-repeat;
    background-size: auto 100%;
    margin-right: 10px
}

.btn.facebook:hover {
    background-color: #2e89ff;
    border-color: #2e89ff
}

.btn.download i {
    display: block;
    width: 24px;
    height: 24px;
    background: url(../img/ui/button/ico-download.svg) center center no-repeat;
    background-size: auto 100%;
    margin-right: 10px
}

.btnTop {
    color: #424242;
    display: flex;
    align-items: center
}

.btnTop:before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: url(../img/ui/button/ico-top.svg) center center no-repeat;
    background-size: 100% auto;
    margin-right: 8px;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease
}

.btnTop:hover {
    color: var(--colorPrimary)
}

.link {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    column-gap: 12px
}

.link:after {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    position: relative;
    content: "";
    display: block;
    right: 0;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    position: relative;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid;
    border-left: 2px solid;
    border-color: var(--colorPrimary);
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg)
}

.link:hover:after {
    right: -10px
}

.link.white {
    color: #fff
}

.link.gray {
    color: #929292
}

.link.gray:after {
    background-image: url(../img/ci/ico-arrow-r-gray.svg)
}

.link.down {
    font-size: 1rem
}

@media(min-width: 1024px) {
    .link.down {
        font-size: 1.25rem
    }
}

.link.down:after {
    right: inherit;
    background-image: url(../img/ci/ico-arrow-d.svg)
}

.link.down:hover {
    color: var(--colorPrimary)
}

a.btnBack {
    color: #424242;
    cursor: pointer;
    display: flex;
    align-items: center
}

a.btnBack:before {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    position: relative;
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid;
    border-left: 2px solid;
    border-color: #424242;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    margin-right: 10px;
    left: 0px
}

a.btnBack:hover {
    color: var(--colorPrimary)
}

a.btnBack:hover:before {
    left: -10px
}

#btnLoadmore:after {
    right: inherit;
    top: -2px;
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -o-transform: rotate(225deg)
}

#btnLoadmore:hover {
    color: var(--colorPrimary)
}

#btnFilter {
    cursor: pointer;
    overflow: hidden;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
    background-color: #fff;
    width: 52px;
    height: 52px;
    border: 1px solid #d6d6d6;
    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, .1), 0px 1px 2px 0px rgba(16, 24, 40, .06);
    display: flex;
    align-items: center;
    justify-content: center
}

#btnFilter span {
    display: flex;
    flex-direction: column;
    row-gap: 6px
}

#btnFilter i {
    display: block;
    width: 16px;
    height: 2px;
    background-color: #424242;
    position: relative
}

#btnFilter i:before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    content: "";
    display: block;
    overflow: hidden;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
    width: 7px;
    height: 7px;
    border: 2px solid #424242;
    background: #fff;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease
}

#btnFilter i:first-child:before {
    left: -1px
}

#btnFilter i:last-child:before {
    left: 11px
}

#btnFilter:hover {
    background-color: #ffd6d6
}

#btnFilter:hover i {
    background-color: var(--colorPrimary)
}

#btnFilter:hover i:before {
    border-color: var(--colorPrimary);
    background-color: #ffd6d6
}

#btnFilter:hover i:first-child:before {
    left: 11px
}

#btnFilter:hover i:last-child:before {
    left: -1px
}

#btnFilter.active {
    background-color: var(--colorPrimary)
}

#btnFilter.active i {
    background-color: #fff
}

#btnFilter.active i:before {
    border-color: #fff;
    background-color: var(--colorPrimary)
}

#btnFilter.active i:first-child:before {
    left: 11px
}

#btnFilter.active i:last-child:before {
    left: -1px
}

#btnCamera {
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 36px;
    -webkit-border-radius: 36px;
    -moz-border-radius: 36px;
    -ms-border-radius: 36px;
    -o-border-radius: 36px;
    border: 1px solid #e5e5e5;
    background: url(../img/ui/icon/camera.svg) center center no-repeat #fff
}

body {
    position: relative
}

body.openedMenu {
    width: 100%;
    height: 100vh;
    overflow: hidden
}

.bHideArea {
    display: none;
    position: fixed;
    z-index: 94036;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5)
}

.inputStyle,
.select>select,
input[list],
input[type=text],
input[type=password],
input[type=textarea],
textarea,
input[type=date],
input[type=month],
input[type=year],
input[type=email] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: "Noto Sans Thai", sans-serif;
    font-weight: normal;
    line-height: normal;
    position: relative;
    width: 100%;
    outline: 0;
    border: 0;
    background-color: #fff;
    color: var(--colorGray10);
    height: 36px;
    padding: 0 12px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    font-weight: 400
}

.inputStyle::placeholder,
.select>select::placeholder,
input[list]::placeholder,
input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=textarea]::placeholder,
textarea::placeholder,
input[type=date]::placeholder,
input[type=month]::placeholder,
input[type=year]::placeholder,
input[type=email]::placeholder,
.inputStyle:-ms-input-placeholder,
.select>select:-ms-input-placeholder,
input[list]:-ms-input-placeholder,
input[type=text]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=textarea]:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input[type=date]:-ms-input-placeholder,
input[type=month]:-ms-input-placeholder,
input[type=year]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
.inputStyle::-ms-input-placeholder,
.select>select::-ms-input-placeholder,
input[list]::-ms-input-placeholder,
input[type=text]::-ms-input-placeholder,
input[type=password]::-ms-input-placeholder,
input[type=textarea]::-ms-input-placeholder,
textarea::-ms-input-placeholder,
input[type=date]::-ms-input-placeholder,
input[type=month]::-ms-input-placeholder,
input[type=year]::-ms-input-placeholder,
input[type=email]::-ms-input-placeholder {
    color: var(--colorGray30);
    opacity: 1
}

input[list],
input[type=text],
input[type=password],
input[type=textarea],
textarea,
input[type=date],
input[type=month],
input[type=year],
input[type=email] {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    resize: none
}

input[list]:disabled,
input[type=text]:disabled,
input[type=password]:disabled,
input[type=textarea]:disabled,
textarea:disabled,
input[type=date]:disabled,
input[type=month]:disabled,
input[type=year]:disabled,
input[type=email]:disabled {
    color: var(--colorGray10);
    background-color: var(--colorGray80);
    border: 1px solid var(--colorGray60)
}

input[list]:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=textarea]:focus,
textarea:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=year]:focus,
input[type=email]:focus {
    border-color: var(--colorPrimaryL)
}

.control {
    display: block;
    position: relative;
    padding: 4px 14px;
    cursor: pointer;
    padding-left: 30px
}

@media(min-width: 1024px) {
    .control {
        padding-left: 30px
    }
}

.control input {
    z-index: -1;
    opacity: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0
}

.control--checkbox input {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%)
}

.control--checkbox .control__indicator {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    height: 16px;
    width: 16px;
    background: url(../img/ui/form/ico-check.svg) center center no-repeat no-repeat;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    left: 0px
}

.control--checkbox input:checked~.control__indicator {
    background-image: url(../img/ui/form/ico-checked.svg)
}

.control--checkbox input:disabled~.control__indicator {
    opacity: .6
}

.control--checkbox input:disabled~.control__indicator:after {
    opacity: .6
}

.control--radio {
    padding: 0;
    color: var(--colorGray30);
    height: 36px
}

.control--radio input {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%)
}

.control--radio span {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorGray10)
}

.control--radio .control__indicator {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    overflow: hidden;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    height: 36px;
    width: 100%;
    background-color: #fff;
    border: 1px solid var(--colorGray60);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    z-index: 0
}

.control--radio input:checked~span {
    color: #fff
}

.control--radio input:checked~.control__indicator {
    background-color: var(--colorPrimary)
}

.control--radio input:checked~.control__indicator:after {
    border: 5px solid var(--colorSecond)
}

.control--radio .control__indicator:after {
    content: "";
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--colorGray40);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    left: 10px
}

.control--radio input:disabled~.control__indicator {
    opacity: .6
}

.control--radio input:disabled~.control__indicator:after {
    opacity: .6
}

.select {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    background-color: #fff
}

.select>select {
    display: inline-block;
    cursor: pointer;
    border: 1px solid #e5e5e5;
    background-color: rgba(0, 0, 0, 0);
    padding-right: 40px;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease
}

.select>select::-ms-expand {
    display: none
}

.select>select:disabled {
    color: var(--colorGray10);
    background-color: var(--colorGray80);
    border: 1px solid var(--colorGray60);
    pointer-events: none
}

.select:before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    right: 4px;
    content: "";
    width: 32px;
    height: 100%;
    background: url(../img/ui/form/ico-arrow-select.svg) center center no-repeat !important;
    z-index: 0
}

@media(min-width: 1024px) {
    .select:before {
        width: 36px
    }
}

.datalist {
    line-height: 33px
}

datalist {
    display: none
}

input::-webkit-calendar-picker-indicator {
    display: none;
    opacity: 0
}

textarea {
    height: 120px;
    padding: 8px 12px;
    border-bottom: 1px solid #e5e5e5;
    overflow: scroll;
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px
}

input[type=date],
input[type=month],
input[type=year] {
    text-align: left;
    padding: 0 36px 0 16px
}

input[type=date]:after,
input[type=month]:after,
input[type=year]:after {
    content: "";
    display: block;
    z-index: 0;
    right: 16px;
    width: 32px;
    height: 100%;
    background: url(../img/ui/form/ico-calendar.svg) center center no-repeat !important;
    background-size: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    right: 4px
}

input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=year]::-webkit-calendar-picker-indicator {
    display: block;
    opacity: 1;
    width: 32px;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    z-index: 1;
    right: 4px
}

input[type=date]::-webkit-date-and-time-value,
input[type=month]::-webkit-date-and-time-value,
input[type=year]::-webkit-date-and-time-value {
    text-align: left
}

input[type=password] {
    padding-right: 36px
}

.controlPass {
    position: relative
}

.controlPass .btnshowPass {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    right: 7px;
    color: var(--colorGray70);
    width: 32px;
    height: 100%;
    overflow: hidden;
    text-indent: -999px;
    background: url(../img/ui/form/ico-invisible.svg) center center no-repeat !important
}

.controlPass .btnshowPass:hover {
    color: var(--colorPrimary)
}

.controlPass .btnshowPass.show {
    background-image: url(../img/ui/form/ico-visibility.svg) !important
}

.checkboxPDPA {
    display: flex;
    align-items: flex-start;
    flex-direction: column
}

.checkboxPDPA .control {
    line-height: 28px
}

.checkboxPDPA .control input {
    top: 50%
}

.checkboxPDPA .bText span {
    color: #ff2b1e;
    font-size: .8em
}

.checkboxPDPA .bText a:hover {
    color: var(--colorSecond)
}

.bCaptcha {
    margin-bottom: 25px
}

.bCaptcha>img {
    width: 100%;
    max-width: 300px;
    height: auto
}

@media(min-width: 1024px) {
    .bCaptcha>img {
        width: 360px
    }
}

.control-group [data-content]:after {
    content: attr(data-content);
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    right: 20px;
    color: var(--colorSecond)
}

.control-group [data-content] input {
    padding-right: 20%
}

.control-group .floating-label {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    display: block;
    position: absolute;
    opacity: 0;
    top: -10px;
    left: 0px;
    font-size: .75rem;
    line-height: 1em;
    color: var(--colorGray50);
    white-space: nowrap
}

.control-group .form-control:placeholder-shown+.floating-label {
    visibility: hidden;
    z-index: -1;
    transition: .2s ease-in-out;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -ms-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out
}

.control-group .form-control:not(:placeholder-shown)+.floating-label,
.control-group .form-control:focus:not(:placeholder-shown)+.floating-label {
    visibility: visible;
    z-index: 1;
    opacity: 1;
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out
}

.bForm {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-row-gap: 16px
}

.bForm>*:last-child {
    margin-bottom: 0
}

.bForm .bRow {
    display: flex;
    gap: 16px 8px
}

@media(min-width: 1024px) {
    .bForm .bRow {
        flex-direction: row
    }
}

.bForm .control-group {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 4px
}

.bForm .control-group [class*=tTitle] {
    font-size: .875rem;
    line-height: 1em;
    font-weight: 500;
    color: var(--colorGray10)
}

.bForm .control-group [class*=tTitle] span {
    display: inline
}

.bForm .control-group>p {
    margin-bottom: 4px
}

.bForm .control-group.validate [class*=tTitle]:after {
    content: "*";
    color: #ff2b1e;
    font-size: .8em
}

.bForm .control-group.error input,
.bForm .control-group.error select,
.bForm .control-group.error textarea {
    border-color: #ff2b1e !important;
    color: #ff2b1e !important
}

.bForm .control-group.error label.tError {
    display: flex
}

.bForm .control-group.error label.tError:before {
    display: none
}

.bForm .control-group.success input,
.bForm .control-group.success select,
.bForm .control-group.success textarea {
    border-color: #0bc753 !important;
    color: #0bc753 !important
}

.bForm .control-group.pdpa p {
    color: var(--colorGray30)
}

.bForm .control-group.pdpa p span {
    color: #ff2b1e;
    font-size: .8em
}

.bForm .control-group.pdpa p a {
    text-decoration: underline;
    font-weight: bold
}

.bForm .control-group.date .gDate {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 8px
}

.bForm .control-group.date .gDate .day select {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center
}

.bForm .control-group.date .gDate .month select {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center
}

.bForm .control-group.date .gDate .year select {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center
}

.bForm .control-group.sex .gSex {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 8px;
    flex-shrink: 1
}

.bForm .control-group.sex .gSex [data-icon] {
    padding-left: 16px
}

.bForm .control-group.sex .gSex [data-icon]:before {
    content: "";
    width: 16px;
    height: 16px;
    background: center center no-repeat;
    background-size: cover;
    position: relative;
    display: block;
    margin-right: 4px
}

.bForm .control-group.sex .gSex [data-icon][data-icon*=male]:before {
    background-image: url(../img/ui/icon/male.svg)
}

.bForm .control-group.sex .gSex [data-icon][data-icon*=female]:before {
    background-image: url(../img/ui/icon/female.svg)
}

.bForm .control-group.sex .gSex [data-icon][data-icon*=none]:before {
    background-image: url(../img/ui/icon/nosex.svg)
}

.bForm .control-group.sex .gSex input:checked~[data-icon*=male]:before {
    background-image: url(../img/ui/icon/male-active.svg)
}

.bForm .control-group.sex .gSex input:checked~[data-icon*=female]:before {
    background-image: url(../img/ui/icon/female-active.svg)
}

.bForm .control-group.sex .gSex input:checked~[data-icon*=none]:before {
    background-image: url(../img/ui/icon/nosex-active.svg)
}

.bForm .control-group .gCamera {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 8px
}

.bForm .control-group>p {
    font-size: .75rem;
    line-height: 1em;
    color: var(--colorGray30)
}

.bForm .tError {
    display: none;
    font-size: .75rem;
    line-height: 1em;
    color: #ff2b1e;
    font-weight: 300;
    display: none;
    align-items: center;
    column-gap: 8px
}

.bForm .tError:before {
    content: "";
    display: block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    background: url(../img/ui/form/ico-error.svg) center center no-repeat !important;
    background-size: contain
}

.bForm.error>.tError {
    display: flex
}

.btnClear {
    cursor: pointer;
    width: 44px;
    height: 44px;
    background: url(../img/ui/form/ico-clear.svg) center center no-repeat;
    background-size: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    right: 0
}

.btnAdd {
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: url(../img/ui/form/ico-add.svg) center center no-repeat
}

.jBox-wrapper {
    z-index: 99999 !important
}

.jBox-overlay {
    z-index: 99998 !important;
    background-color: rgba(0, 0, 0, .7)
}

.jBox-Modal .jBox-container {
    overflow: hidden;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    background-color: rgba(0, 0, 0, 0)
}

.jBox-Modal .jBox-container,
.jBox-Modal.jBox-closeButton-box:before {
    box-shadow: none
}

.jBox-Modal .jBox-content {
    padding: 0 !important;
    margin: 0 auto !important
}

.jBox-closeButton-box .jBox-closeButton {
    width: 30px;
    height: 30px;
    background: url(../img/ui/ico-close.svg) center center no-repeat;
    background-size: 70% auto;
    background-color: rgba(0, 0, 0, .25);
    position: absolute;
    right: 0px;
    top: 0px;
    overflow: hidden;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease
}

.jBox-closeButton-box .jBox-closeButton:hover {
    background-color: var(--colorSecond)
}

.jBox-closeButton-box .jBox-closeButton svg {
    display: none
}

.bModal {
    display: none;
    overflow: hidden;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    padding: 0px;
    background-color: rgba(0, 0, 0, 0);
    margin: 0px;
    -webkit-box-shadow: 0px 0px 10px rgba(16, 50, 90, .2);
    -moz-box-shadow: 0px 0px 10px rgba(16, 50, 90, .2);
    box-shadow: 0px 0px 10px rgba(16, 50, 90, .2)
}

.bModal.bCard {
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: #f9f9ee;
    padding: 24px 16px;
    overflow: hidden;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px
}

@media(min-width: 768px) {
    .bModal.bCard {
        padding: 32px
    }
}

.bModal.bCard img {
    display: block;
    width: 100%;
    height: auto
}

.btnModalHowToplay {
    margin-top: 15px;
    width: 104px;
}

.btnModalHowToplay.btnUnderstand {
    background-color: rgba(255, 229, 1, 1);
    border: 2px solid rgba(17, 15, 15, 1);
    color: rgba(17, 15, 15, 1);
}

.btnModalHowToplay:disabled {
    border: 2px solid var(--on-disble, rgba(169, 177, 182, 1))
}

.ant-modal .ant-modal-content {
    background-color: rgba(249, 249, 238, 1);
    padding: 0 0 30px 0;
    border-radius: 20px;
    font-family: "Noto Sans Thai", sans-serif;
}

.custom-howtoplay-modal .bHeader {
    width: 100%;
    height: 75px;
    background-color: rgba(253, 186, 77, 1);
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    padding-top: 17px;
}

.custom-howtoplay-modal .bHeader p {
    font-weight: bold;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    font-family: "Noto Sans Thai", sans-serif;
}

.custom-howtoplay-modal .bInner {
    padding: 30px 30px 0 30px;
}

.custom-howtoplay-modal .bBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 12px;
}

.custom-howtoplay-modal .bBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 12px;
}

.custom-howtoplay-modal .bDetails .sDetails {
    margin-top: 10px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    border-radius: 16px;
    background-color: white;
    padding: 10px;
}

.custom-howtoplay-modal .bDetails .sDetails .sDetailsInner {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23FDBA4DFF' stroke-width='3' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 12px;
    text-align: left;
    padding: 12px;

    h1 {
        font-weight: bold;
        font-size: 14px;
        line-height: 20px;
    }

    p {
        font-size: 14px;
        line-height: 20px;
    }
}


.bModal.bCard .bDetails {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 12px
}

.bModal.bCard .bDetails .icoAlert {
    display: block;
    width: 24px;
    height: 24px;
    background: url(../img/ui/modal/ico-alert.svg) center center no-repeat;
    background-size: auto
}

.bModal.bCard .bDetails .tTitle {
    font-size: 1.25rem;
    line-height: 1em;
    color: #f81e2f;
    font-weight: bold
}

.bModal.bCard .bDetails .tDetails {
    margin-bottom: 24px;
    text-align: center
}

.bModal.bCard .bDetails .tDetails p {
    font-size: 1.25rem;
    line-height: 1em
}

@media(min-width: 768px) {
    .bModal.bCard .bDetails .tDetails p {
        font-size: 1.5rem;
        line-height: 1em
    }
}



.bModal.bCard .bBtn {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 12px
}

.bModal.VDO .bYoutube {
    width: 70vw;
    padding-top: 56.25%
}

@media(min-width: 767px)and (max-width: 1366px)and (-webkit-min-device-pixel-ratio: 2) {
    .bModal.VDO .bYoutube {
        width: 80vw
    }
}

@media(max-width: 767px) {
    .bModal.VDO .bYoutube {
        width: 90vw;
        padding: 0 20px;
        padding-top: 56.25%
    }
}

.bModal.VDO iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block
}

.bModal.Image .bPic {
    width: 90vw
}

@media(min-width: 768px) {
    .bModal.Image .bPic {
        width: 80vw
    }
}

.bModal.Image a {
    color: #fff;
    margin-top: 16px
}

.bModal.Image img {
    height: auto;
    width: 100%;
    margin: 0 auto
}

@media(min-width: 768px) {
    .bModal.Image img {
        width: auto;
        max-height: 80vh
    }
}

a.btnCloseModal {
    width: 48px;
    height: 48px;
    background: url(../img/ui/ico-close.svg) center center no-repeat;
    background-size: 24px;
    position: absolute;
    top: 0px;
    right: 0px
}

a.btnCloseModal2 {
    width: 48px;
    height: 48px;
    background: url(../img/ui/ico-close-2.svg) center center no-repeat;
    background-size: 32px;
    position: absolute;
    top: 0px;
    right: 0px
}

a.btnCloseTips {
    width: 44px;
    height: 44px;
    background: url(../img/ui/ico-close.svg) center center no-repeat;
    background-size: 20px;
    position: absolute;
    top: 0px;
    right: 0px
}

.bModal#ModalQR {
    padding: 40px 0
}

.bModal#ModalQR .bQR {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 12px
}

.bModal#ModalQR .bQR .bPic {
    position: relative;
    background-color: var(--colorGreen);
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    overflow: inherit;
    border: 1px solid var(--colorPrimary);
    padding: 10px
}

.bModal#ModalQR .bQR .bPic img,
.bModal#ModalQR .bQR .bPic svg,
.bModal#ModalQR .bQR .bPic canvas {
    display: block;
    width: 160px;
    height: auto
}

.bModal#ModalQR .bQR .bPic:before {
    content: "";
    display: block;
    width: 54px;
    height: 54px;
    background: url(../img/ci/icon/ico-clip-yellow.svg) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: -16px;
    top: -16px
}

.bModal#ModalQR .bQR>div {
    font-size: .75rem;
    line-height: 1em;
    display: flex;
    align-items: center;
    gap: 4px
}

.bModal#ModalQR .bMemberDetails {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 40px 0
}

.bModal#ModalQR .bMemberDetails .bDisplay .bPic {
    width: 91px;
    height: 75px
}

.bModal#ModalQR .bMemberDetails .bDetails {
    gap: 8px;
    align-items: flex-start
}

.bModal#ModalQR .bMemberDetails .bDetails h2 {
    font-size: 1.25rem;
    line-height: 1em;
    font-weight: bold;
    margin-bottom: 4px
}

.bModal#ModalQR .bMemberDetails .bDetails p[data-icon*=birthday] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px
}

.bModal#ModalQR .bMemberDetails .bDetails p[data-icon*=birthday]:before {
    content: "";
    width: 16px;
    height: 16px;
    background: center center no-repeat;
    background-size: cover;
    position: relative;
    display: block;
    background-image: url(../img/ui/icon/birthday.svg);
    top: -2px
}

.bModal#ModalQR .bMemberDetails .bDetails p.bMemberID {
    display: flex;
    align-items: center;
    gap: 8px
}

.bModal#ModalQR .bBtn {
    display: flex;
    justify-content: center
}

.bModal#ModalQR .bBtn p {
    font-size: .75rem;
    line-height: 1em;
    color: var(--colorGray20);
    text-align: center;
    line-height: 150%
}

.bModal#ModalQR .bBtn a[data-icon*=download] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content
}

.bModal#ModalQR .bBtn a[data-icon*=download]:before {
    content: "";
    width: 16px;
    height: 16px;
    background: center center no-repeat;
    background-size: cover;
    position: relative;
    display: block;
    background-image: url(../img/ui/icon/download.svg)
}

.bModal#ModalQR i.btnTips {
    display: block;
    width: 16px;
    height: 16px;
    background: center center;
    background-image: url(../img/ui/icon/tips.svg);
    position: relative;
    font-style: normal
}

.bModal#ModalQR .bTips {
    display: none;
    position: absolute;
    bottom: 28px;
    right: -16px;
    z-index: 999999;
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    overflow: inherit;
    background-color: #fff;
    padding: 20px 12px 12px;
    width: 270px;
    box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, .03), 0px 12px 16px -4px rgba(16, 24, 40, .08)
}

.bModal#ModalQR .bTips:after {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 8px 8px 0 8px;
    border-color: #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    transform: rotate(0deg);
    position: absolute;
    bottom: -6px;
    right: 16px
}

.bModal#ModalQR .bTips span {
    font-weight: bold;
    margin-bottom: 4px
}

.bModal#ModalQR .bTips p {
    color: var(--colorGray30);
    margin-bottom: 4px
}

.bModal#ModalQR .bTips p:last-child {
    margin-bottom: 0
}

.bModal#ModalQR.tips:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 998
}

.bModal#ModalReceipt {
    padding: 0
}

.bModal#ModalConfirmExchange .tTitle,
.bModal#ModalConfirmLuckydraw .tTitle {
    color: var(--colorPrimary);
    text-align: center
}

#ModalRandom .bInner .bText {
    text-align: center;
    margin-top: 24px
}

#ModalRandom .bInner .bText .tHead {
    font-weight: 700;
    margin: 12px 0px
}

#ModalRandom .bInner .bText .bBtn a {
    overflow: hidden;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    color: #fbfcfc;
    padding: 8px 16px;
    background-color: #0f873d
}

#ModalRandom .bInner .bText p {
    color: #5e434b
}

#ModalLucky {
    padding: 32px;
    background: url(../img/ci/phase2/ico-collectpoint/img-bg-stk-lucky.png);
    background-size: cover;
    background-position: center;
    position: relative
}

#ModalLucky .btnCloseModal img {
    position: absolute;
    width: 7.22%;
    top: 4%;
    right: 4%
}

#ModalLucky .bInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 30px
}

#ModalLucky .bInner img {
    width: 52.1%
}

#ModalLucky .bInner p {
    font-size: 14px
}

#ModalLucky .bInner .bText {
    text-align: center
}

#ModalLucky .bInner .bText .tHead {
    font-weight: 700
}

#ModalLucky .bInner .bText .bBtn a {
    overflow: hidden;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    color: #fbfcfc;
    padding: 8px 16px;
    background-color: #0f873d
}

#ModalLucky .bInner .bText p {
    font-size: 20px;
    color: #2a2c2e
}

#ModalLucky .bInner .bText span {
    font-weight: 700
}

#ModalBanner .bCardBanner {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 24px 16px;
    overflow: hidden
}

#ModalBanner .popupImg {
    background-image: url(../img/ci/img-popup-game.png);
    display: block;
    background-size: 100%;
    width: 327px;
    height: 380px;
    background-repeat: none;
    position: relative
}

#ModalBanner .popupImg .btnCloseModal {
    position: absolute;
    width: 150px;
    height: 50px;
    bottom: 10%;
    left: 27%
}

section#pOtp {
    padding: 40px 0
}

.bOtpMain {
    display: flex;
    justify-content: center;
    padding: 20px 0 40px;
    border-bottom: 1px solid var(--colorGray60)
}

.bOtpMain .bOtp {
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 20px
}

.bOtpMain .bOtp .bTitle {
    text-align: center
}

.bOtpMain .bOtp .bTitle h2 {
    font-size: 2rem;
    line-height: 1em
}

.bOtpMain .bOtp .bTitle p {
    color: var(--colorGray10);
    font-size: 1rem;
    line-height: 1em
}

.bOtpMain .bOtp .bFrom {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 20px
}

.bOtpMain .bOtp .bFrom .control-group.otp {
    display: flex;
    column-gap: 10px;
    justify-content: center
}

.bOtpMain .bOtp .bFrom .control-group.otp input[type=text] {
    max-width: 48px;
    height: 48px;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1em;
    font-weight: bold;
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px
}

.bOtpMain .bOtp .bFrom .control-group.otp .p-inputotp {
    display: flex;
    gap: 8px
}

.bOtpMain .bOtp .bFrom .control-group.otp .p-inputotp .input-error {
    border: 1px solid #f81e2f !important
}

.bOtpMain .bOtp .bFrom .control-group.otp input::-webkit-outer-spin-button,
.bOtpMain .bOtp .bFrom .control-group.otp input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.bOtpMain .bOtp .bFrom .control-group.otp input[type=number] {
    -moz-appearance: textfield
}

.bOtpMain .bOtp .bFrom .bCountTime {
    color: var(--colorGray10);
    display: flex;
    align-items: center;
    justify-content: center
}

.bOtpMain .bOtp .bFrom .bCountTime span {
    color: var(--colorPrimary);
    font-weight: bold;
    margin: 0 5px
}

.bOtpMain .bOtp .bFrom .bTextSend {
    font-size: 1rem;
    line-height: 1em;
    text-align: center
}

.bOtpMain .bOtp .bFrom .bTextSend a {
    color: var(--colorPrimary);
    font-weight: bold;
    text-decoration: underline
}

.bOtpMain .bOtp .bFrom .bText {
    text-align: center;
    margin-bottom: 24px;
    color: #424242
}

.bOtpMain .bOtp .bFrom .bText a {
    text-decoration: underline
}

.bOtpMain .bOtp .bFrom .bText b {
    color: var(--colorGray10)
}

.bOtpMain .bOtp .bBtn {
    display: flex;
    align-content: center;
    flex-direction: column
}

.bOtpMain .bOtp .bBtn span {
    color: #424242;
    text-align: center;
    margin: 12px 0
}

.bOtpMain .bOtp .bBtn .btn {
    max-width: 260px;
    max-width: max-content;
    margin: 0 auto
}

body {
    background: #475467
}

#pageNews-event {
    padding-top: 0px;
    background-color: #fff;
    padding-bottom: 0px
}

#pageNews-event p {
    color: #475467
}

#pageNews-event .wrapContent {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0px
}

#pageNews-event .bHead {
    width: 100%;
    background-color: #f9f9ee;
    padding: 20px 28px;
    text-align: center
}

#pageNews-event .bHead .tHead {
    display: flex;
    justify-content: space-between
}

#pageNews-event .bHead .tHead a {
    cursor: pointer;
    height: 32px
}

#pageNews-event .bHead .tHead p {
    color: var(--colorPrimary);
    font-weight: 700
}

#pageNews-event .bHead .tHead .dummy {
    width: 32px;
    height: 32px
}

#pageNews-event #pAllNews {
    width: calc(100% - 48px)
}

#pageNews-event #pAllNews .bContent {
    margin-top: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid #dce4e9
}

#pageNews-event #pAllNews .bContent .newsImg img {
    overflow: hidden;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
    width: 100%
}

#pageNews-event #pAllNews .bContent .bText {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: start;
    row-gap: 8px
}

#pageNews-event #pAllNews .bContent .bText .tHead {
    font-weight: 700
}

#pageNews-event #pAllNews .bContent .bText p {
    font-size: 14px
}

#pageNews-event #pAllNews .bContent .bText .tHead {
    font-size: 700
}

#pageNews-event #pAllNews .bContent .bText a {
    font-size: 14px;
    color: #2a2c2e
}

#pageNews-event #pAllNews .bContent .bText a:after {
    content: url(../img/ci/phase2/news-event/ico-arrow.svg);
    margin-left: 12px
}

#pageNews-event #pAllNews .bContent:last-child {
    border: none;
    padding-bottom: 0
}

#pageNews-event #pContent {
    margin-inline: auto;
    width: calc(100% - 48px);
    padding: 20px 0 60px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media(min-width: 768px) {
    #pageNews-event #pContent {
        width: 90%
    }
}

@media(min-width: 1024px) {
    #pageNews-event #pContent {
        max-width: 1280px
    }
}

#pageNews-event #pContent .bPagination nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 0;
    align-items: center;
    width: 100%;
    padding-top: 16px;
    border-top: 1px solid var(--colorGray60)
}

#pageNews-event #pContent .bPagination nav p {
    justify-self: center;
    font-size: .875rem;
    line-height: 1em
}

#pageNews-event #pContent .bPagination nav a {
    display: block;
    cursor: pointer;
    width: 36px;
    height: 36px;
    background: center center no-repeat;
    background-size: 100%
}

#pageNews-event #pContent .bPagination nav a.btnPrev {
    background-image: url(../img/ui/pagiantion/ico-arrowL.svg)
}

#pageNews-event #pContent .bPagination nav a.btnNext {
    background-image: url(../img/ui/pagiantion/ico-arrowR.svg);
    justify-self: flex-end
}

html {
    font-size: var(--baseFontsize);
    scroll-behavior: smooth;
    scroll-padding-top: 0px;
    padding-top: 0px
}

@media(min-width: 1024px) {
    html {
        scroll-padding-top: 0px;
        padding-top: 0px
    }
}

body {
    font-family: "Noto Sans Thai", sans-serif;
    font-weight: normal;
    line-height: normal;
    font-size: 1rem;
    line-height: 1em;
    color: var(--colorGray10);
    min-height: -webkit-fill-available;
    background-color: var(--colorPrimary);
    overflow-x: hidden
}

sub {
    vertical-align: super;
    font-size: smaller
}

.container {
    margin-inline: auto;
    width: calc(100% - 48px)
}

@media(min-width: 768px) {
    .container {
        width: 90%
    }
}

@media(min-width: 1024px) {
    .container {
        max-width: 1280px
    }
}

.textCenter {
    align-items: center
}

a {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    color: var(--colorPrimary)
}

.bPreload {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .25);
    background-size: 100px auto;
    z-index: 94036
}

.bPreload img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    display: block;
    width: auto;
    height: 50px
}

div[id^=page] {
    width: 100%;
    max-width: 500px;
    margin-inline: auto;
    background-color: #f9f9ee;
    min-height: 100dvh;
    position: relative
}

div[id^=page] .wrapContent {
    position: relative;
    padding-bottom: 32px;
    min-height: calc(100dvh - 0px)
}

div[id^=page][data-isLoading="1"]::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0)
}

.hide {
    display: none !important
}

.pc {
    display: none
}

@media(min-width: 767px)and (max-width: 1366px)and (-webkit-min-device-pixel-ratio: 2) {
    .pc {
        display: none
    }
}

@media(min-width: 1024px) {
    .pc {
        display: block
    }
}

.pc-tablet {
    display: none
}

@media(min-width: 767px)and (max-width: 1366px)and (-webkit-min-device-pixel-ratio: 2) {
    .pc-tablet {
        display: block
    }
}

@media(min-width: 768px) {
    .pc-tablet {
        display: block
    }
}

.mobile-tablet {
    display: block
}

@media(min-width: 767px)and (max-width: 1366px)and (-webkit-min-device-pixel-ratio: 2) {
    .mobile-tablet {
        display: block
    }
}

@media(min-width: 768px) {
    .mobile-tablet {
        display: none
    }
}

.mobile {
    display: block
}

@media(min-width: 767px)and (max-width: 1366px)and (-webkit-min-device-pixel-ratio: 2) {
    .mobile {
        display: none
    }
}

@media(min-width: 1024px) {
    .mobile {
        display: none
    }
}

#pLoadmore .bLoadmore {
    border-top: 1px solid var(--colorGray70);
    text-align: center;
    padding-top: 32px
}

@media(min-width: 768px) {
    #pLoadmore .bLoadmore {
        padding-top: 48px
    }
}

#pLoadmore .bLoadmore p {
    color: var(--colorPrimary);
    font-weight: bold;
    font-size: 1.25rem;
    line-height: 1em
}

@media(min-width: 768px) {
    #pLoadmore .bLoadmore p {
        font-size: 1.5rem;
        line-height: 1em
    }
}

.bDisplay .bPic {
    position: relative;
    width: 120px;
    height: 100px;
    background: center center no-repeat #f9f9ee;
    background-size: 95%
}

.bDisplay .bPic:after {
    content: "";
    display: block;
    background: url(../img/ci/pic-koala-frame.svg) center center no-repeat;
    background-size: 100%;
    position: absolute;
    top: -1px;
    left: 0;
    width: 101%;
    height: 103%
}

.btnCopy {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--colorGray10)
}

.btnCopy:after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: center center no-repeat;
    background-size: cover;
    position: relative;
    display: block;
    background-image: url(../img/ui/icon/copy.svg);
    top: -1px
}

body.copy div[id^=page]:after {
    content: "Copy to Clipboard!";
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    position: fixed;
    z-index: 99999;
    top: 0;
    width: 100%;
    background-color: var(--colorGray100);
    padding: 12px 0;
    text-align: center;
    box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, .03), 0px 12px 16px -4px rgba(16, 24, 40, .08);
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px
}

section#pPointTop {
    color: var(--colorPrimary);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 20px
}

section#pPointTop .btnIconBack {
    position: absolute;
    left: 24px;
    top: 20px;
    width: 32px;
    height: 32px;
    background: url(../img/ui/button/ico-back.svg) no-repeat
}

section#pPointTop h1.bTitle {
    margin-inline: auto;
    width: calc(100% - 48px);
    font-size: 1rem;
    line-height: 1em;
    font-weight: bold
}

@media(min-width: 768px) {
    section#pPointTop h1.bTitle {
        width: 90%
    }
}

@media(min-width: 1024px) {
    section#pPointTop h1.bTitle {
        max-width: 1280px
    }
}

section#pPointTop .bPoint {
    margin-inline: auto;
    width: calc(100% - 48px);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 24px
}

@media(min-width: 768px) {
    section#pPointTop .bPoint {
        width: 90%
    }
}

@media(min-width: 1024px) {
    section#pPointTop .bPoint {
        max-width: 1280px
    }
}

section#pPointTop .bPoint p:first-child {
    font-size: .75rem;
    line-height: 1em
}

section#pPointTop .bPoint .bTotalPoint {
    background-color: var(--colorSecond);
    overflow: hidden;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    overflow: inherit;
    padding: 0 32px;
    font-size: 2rem;
    line-height: 1em;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorPrimary);
    position: relative
}

section#pPointTop .bPoint .bTotalPoint:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='white' stroke-width='3' stroke-dasharray='5%2c 10' stroke-dashoffset='24' stroke-linecap='square'/%3e%3c/svg%3e");
    overflow: hidden;
    border-radius: 48px;
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    -ms-border-radius: 48px;
    -o-border-radius: 48px
}

section#pPointTop .bPoint .bTotalPoint:before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background: url(../img/ci/icon/ico-clip-green.svg) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: -5px;
    top: -8px
}

section#pPointTop .bPoint .bTotalPoint span {
    display: flex;
    align-items: center;
    gap: 8px
}

section#pPointTop .bPoint .bTotalPoint span:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../img/ci/ico-coin.svg) center center no-repeat;
    background-size: 100%
}

section#pPointTop .bPoint .bTypePoint {
    display: flex;
    gap: 20px
}

section#pPointTop .bPoint .bTypePoint .bPointGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative
}

section#pPointTop .bPoint .bTypePoint .bPointGroup .tNote {
    position: relative
}

section#pPointTop .bPoint .bTypePoint .bPointGroup .tNote a {
    position: absolute;
    width: 14px;
    height: 14px;
    top: -30%;
    right: -29%
}

section#pPointTop .bPoint .bTypePoint .bPointGroup .tNote a img {
    width: 14px;
    height: 14px
}

section#pPointTop .bPoint .bTypePoint .bPointGroup .bTotalPoint {
    background-color: var(--colorSecond);
    overflow: hidden;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    overflow: inherit;
    padding: 0 32px;
    font-size: 2rem;
    line-height: 1em;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorPrimary);
    position: relative
}

section#pPointTop .bPoint .bTypePoint .bPointGroup .bTotalPoint:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='white' stroke-width='3' stroke-dasharray='5%2c 10' stroke-dashoffset='24' stroke-linecap='square'/%3e%3c/svg%3e");
    overflow: hidden;
    border-radius: 48px;
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    -ms-border-radius: 48px;
    -o-border-radius: 48px
}

section#pPointTop .bPoint .bTypePoint .bPointGroup .bTotalPoint:before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background: url(../img/ci/icon/ico-clip-green.svg) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: -5px;
    top: -8px
}

section#pPointTop .bPoint .bTypePoint .bPointGroup .bTotalPoint span {
    display: flex;
    align-items: center;
    gap: 8px
}

section#pPointTop .bPoint .bTypePoint .bPointGroup .bTotalPoint span:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../img/ci/ico-coin.svg) center center no-repeat;
    background-size: 100%
}

section#pPointTop .bPoint .bTypePoint .bPointGroup .bTotalPointHeart {
    overflow: inherit;
    padding: 0 32px;
    font-size: 2rem;
    line-height: 1em;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a2c2e;
    position: relative
}

section#pPointTop .bPoint .bTypePoint .bPointGroup .bTotalPointHeart:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    min-width: 128px;
    min-height: 44px;
    background-image: url(../img/ci/ico-bg-wood.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

section#pPointTop .bPoint .bTypePoint .bPointGroup .bTotalPointHeart span {
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5
}

section#pPointTop .bPoint .bTypePoint .bPointGroup .bTotalPointHeart span:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../img/ci/ico-heart.svg) center center no-repeat;
    background-size: 100%
}

#pTitlePage {
    background-color: #f9f9ee;
    padding: 16px 0
}

#pTitlePage .bTitlePage {
    margin-inline: auto;
    width: calc(100% - 48px);
    display: grid;
    grid-template-columns: 32px auto 32px;
    align-items: center
}

@media(min-width: 768px) {
    #pTitlePage .bTitlePage {
        width: 90%
    }
}

@media(min-width: 1024px) {
    #pTitlePage .bTitlePage {
        max-width: 1280px
    }
}

#pTitlePage .bTitlePage .btnIconBack {
    display: block;
    width: 32px;
    height: 32px;
    background: url(../img/ui/button/ico-back.svg) no-repeat
}

#pTitlePage .bTitlePage h2 {
    font-size: 1.25rem;
    line-height: 1em;
    font-weight: bold;
    color: var(--colorPrimary);
    justify-self: center
}

#info-upper {
    background: url(../img/ci/bg-textbox-upper.png) no-repeat;
    position: absolute;
    padding: 12px;
    display: block;
    width: 270px;
    height: 135px;
    z-index: 20;
    top: 32%;
    right: 12%;
    background-size: 100%
}

#info-upper .tHead {
    position: relative
}

#info-upper .tHead .tBold {
    font-weight: 700
}

#info-upper .tHead .closeBtn {
    position: absolute;
    background-image: url(../img/ci/ico-close.svg);
    display: block;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 40px;
    height: 40px;
    right: 0;
    top: -12px;
    opacity: 0;
    background-color: aqua
}

#info {
    background: url(../img/ci/bg-textbox.png) no-repeat;
    position: absolute;
    padding: 12px;
    display: block;
    width: 270px;
    height: 135px;
    z-index: 20;
    top: -185%;
    right: -17%;
    background-size: 100%
}

#info .tHead {
    position: relative
}

#info .tHead .tBold {
    font-weight: 700
}

#info .tHead .closeBtn {
    position: absolute;
    background-image: url(../img/ci/ico-close.svg);
    display: block;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 40px;
    height: 40px;
    right: 5%;
    top: 0%;
    opacity: 0
}

#bButton .bBtn .gameBtn {
    height: 61.45px
}

#bButton .bBtn .gameBtn img {
    width: 100%
}

section[id^=drawer] {
    display: none;
    background-color: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    height: 100dvh;
    width: 100%;
    max-width: 500px;
    z-index: 999;
    overflow: hidden
}

section[id^=drawer] article {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0dvh;
    overflow: hidden;
    background-color: #fff;
    border-radius: 20px 20px 0px 0px;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease
}

section[id^=drawer] article .bTop {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px
}

section[id^=drawer] article .bTop .btnCloseDrawer {
    display: block;
    width: 24px;
    height: 24px;
    background: url(../img/ci/icon/ico-drawer-close.svg) no-repeat
}

section[id^=drawer] article .bContent {
    padding: 0 24px;
    height: calc(100% - 48px);
    overflow-y: scroll
}

section[id^=drawer] article .bContent * {
    line-height: auto;
    margin-bottom: 16px;
    color: var(--colorGray20)
}

section[id^=drawer] article .bContent *:last-child,
section[id^=drawer] article .bContent * *>* {
    margin-bottom: 0
}

section[id^=drawer] article .bContent h1,
section[id^=drawer] article .bContent h2,
section[id^=drawer] article .bContent h3,
section[id^=drawer] article .bContent h4,
section[id^=drawer] article .bContent h5,
section[id^=drawer] article .bContent h6 {
    margin-bottom: 16px;
    color: var(--colorBlack)
}

section[id^=drawer] article .bContent img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto
}

section[id^=drawer] article .bContent span {
    color: var(--colorPrimary)
}

section[id^=drawer] article .bContent a {
    word-break: break-all;
    color: var(--colorPrimary);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease
}

section[id^=drawer] article .bContent a:hover {
    text-decoration: underline;
    color: var(--colorSecond)
}

section[id^=drawer] article .bContent blockquote {
    color: var(--colorGray10);
    background: #f9f9f9;
    border-left: 10px solid var(--colorSecond);
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "“" "”" "‘" "’"
}

section[id^=drawer] article .bContent blockquote:before {
    color: var(--colorPrimary);
    content: open-quote;
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -0.4em
}

section[id^=drawer] article .bContent blockquote p {
    display: inline
}

section[id^=drawer] article .bContent hr {
    width: 100%;
    height: 1px;
    background-color: var(--colorGray70)
}

section[id^=drawer] article .bContent table {
    width: 100%
}

section[id^=drawer] article .bContent table td {
    padding: 6px 6px
}

section[id^=drawer] article .bContent dl {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0
}

section[id^=drawer] article .bContent dl dt,
section[id^=drawer] article .bContent dl dd,
section[id^=drawer] article .bContent dl dt>*,
section[id^=drawer] article .bContent dl dd>* {
    margin-bottom: 18px
}

section[id^=drawer] article .bContent dl dt:last-child,
section[id^=drawer] article .bContent dl dd:last-child,
section[id^=drawer] article .bContent dl dt>*:last-child,
section[id^=drawer] article .bContent dl dd>*:last-child {
    margin-bottom: 0
}

section[id^=drawer] article .bContent ul li {
    list-style: disc;
    margin-bottom: 0
}

section[id^=drawer] article .bContent ul li::marker {
    font-size: .7em
}

section[id^=drawer] article .bContent b {
    font-weight: 500
}

section[id^=drawer] article .bContent strong {
    font-weight: bold
}

section[id^=drawer] article.active {
    height: 90dvh
}

div[id^=pageRegister] .bTitlePage,
div[id^=pageProfile] .bTitlePage,
div[id*=edit] .bTitlePage {
    padding: 32px 0;
    text-align: center
}

div[id^=pageRegister] .bTitlePage h1,
div[id^=pageRegister] .bTitlePage h2,
div[id^=pageProfile] .bTitlePage h1,
div[id^=pageProfile] .bTitlePage h2,
div[id*=edit] .bTitlePage h1,
div[id*=edit] .bTitlePage h2 {
    font-size: 1.5rem;
    line-height: 1em;
    color: var(--colorPrimary);
    font-weight: bold;
    margin-bottom: 8px
}

div[id^=pageRegister] .bTitlePage p,
div[id^=pageProfile] .bTitlePage p,
div[id*=edit] .bTitlePage p {
    font-size: .875rem;
    line-height: 1em;
    color: var(--colorGray20)
}

div[id^=pageRegister] .bTitlePage .tCondition,
div[id^=pageProfile] .bTitlePage .tCondition,
div[id*=edit] .bTitlePage .tCondition {
    font-size: .75rem;
    line-height: 1em;
    color: #f81e2f;
    margin-top: 6px
}

div[id^=pageRegister] .bTitlePage span,
div[id^=pageProfile] .bTitlePage span,
div[id*=edit] .bTitlePage span {
    font-weight: bold
}

div[id^=pageRegister] .bStepBtn .bStep,
div[id^=pageProfile] .bStepBtn .bStep,
div[id*=edit] .bStepBtn .bStep {
    padding: 32px 0 24px
}

div[id^=pageRegister] .bStepBtn .bStep .bBullet,
div[id^=pageProfile] .bStepBtn .bStep .bBullet,
div[id*=edit] .bStepBtn .bStep .bBullet {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 8px
}

div[id^=pageRegister] .bStepBtn .bStep .bBullet i,
div[id^=pageProfile] .bStepBtn .bStep .bBullet i,
div[id*=edit] .bStepBtn .bStep .bBullet i {
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    width: 8px;
    height: 8px;
    background-color: var(--colorGray60)
}

div[id^=pageRegister] .bStepBtn .bStep p,
div[id^=pageProfile] .bStepBtn .bStep p,
div[id*=edit] .bStepBtn .bStep p {
    font-size: .75rem;
    line-height: 1em;
    color: var(--colorGray30);
    text-align: center
}

div[id^=pageRegister] .bStepBtn .bBtn,
div[id^=pageProfile] .bStepBtn .bBtn,
div[id*=edit] .bStepBtn .bBtn {
    display: flex;
    flex-direction: column;
    gap: 16px
}

div[id^=pageRegister][id*=step1] .bBullet i:nth-child(1),
div[id^=pageProfile][id*=step1] .bBullet i:nth-child(1),
div[id*=edit][id*=step1] .bBullet i:nth-child(1) {
    background-color: var(--colorPrimary)
}

div[id^=pageRegister][id*=otp] .bBullet i:nth-child(1),
div[id^=pageRegister][id*=otp] .bBullet i:nth-child(2),
div[id^=pageProfile][id*=otp] .bBullet i:nth-child(1),
div[id^=pageProfile][id*=otp] .bBullet i:nth-child(2),
div[id*=edit][id*=otp] .bBullet i:nth-child(1),
div[id*=edit][id*=otp] .bBullet i:nth-child(2) {
    background-color: var(--colorPrimary)
}

div[id^=pageRegister][id*=step2] .bBullet i:nth-child(1),
div[id^=pageRegister][id*=step2] .bBullet i:nth-child(2),
div[id^=pageRegister][id*=step2] .bBullet i:nth-child(3),
div[id^=pageProfile][id*=step2] .bBullet i:nth-child(1),
div[id^=pageProfile][id*=step2] .bBullet i:nth-child(2),
div[id^=pageProfile][id*=step2] .bBullet i:nth-child(3),
div[id*=edit][id*=step2] .bBullet i:nth-child(1),
div[id*=edit][id*=step2] .bBullet i:nth-child(2),
div[id*=edit][id*=step2] .bBullet i:nth-child(3) {
    background-color: var(--colorPrimary)
}

div[id^=pageRegister][id*=step3] .bBullet i:nth-child(1),
div[id^=pageRegister][id*=step3] .bBullet i:nth-child(2),
div[id^=pageRegister][id*=step3] .bBullet i:nth-child(3),
div[id^=pageRegister][id*=step3] .bBullet i:nth-child(4),
div[id^=pageProfile][id*=step3] .bBullet i:nth-child(1),
div[id^=pageProfile][id*=step3] .bBullet i:nth-child(2),
div[id^=pageProfile][id*=step3] .bBullet i:nth-child(3),
div[id^=pageProfile][id*=step3] .bBullet i:nth-child(4),
div[id*=edit][id*=step3] .bBullet i:nth-child(1),
div[id*=edit][id*=step3] .bBullet i:nth-child(2),
div[id*=edit][id*=step3] .bBullet i:nth-child(3),
div[id*=edit][id*=step3] .bBullet i:nth-child(4) {
    background-color: var(--colorPrimary)
}

div[id^=pageRegister][id*=success],
div[id^=pageProfile][id*=success],
div[id*=edit][id*=success] {
    background: url(../img/ci/bg-forest-cloud.svg) bottom center no-repeat #effdec;
    background-size: 100%
}

div[id^=pageRegister][id*=success] .wrapContent,
div[id^=pageProfile][id*=success] .wrapContent,
div[id*=edit][id*=success] .wrapContent {
    padding-bottom: 70px
}

div[id^=pageRegister][id*=success] .bTitlePage h1,
div[id^=pageRegister][id*=success] .bTitlePage h2,
div[id^=pageProfile][id*=success] .bTitlePage h1,
div[id^=pageProfile][id*=success] .bTitlePage h2,
div[id*=edit][id*=success] .bTitlePage h1,
div[id*=edit][id*=success] .bTitlePage h2 {
    color: var(--colorGreenD)
}

div[id^=pageRegister] #pRegisterMain,
div[id^=pageProfile] #pRegisterMain,
div[id*=edit] #pRegisterMain {
    margin-inline: auto;
    width: calc(100% - 48px)
}

@media(min-width: 768px) {

    div[id^=pageRegister] #pRegisterMain,
    div[id^=pageProfile] #pRegisterMain,
    div[id*=edit] #pRegisterMain {
        width: 90%
    }
}

@media(min-width: 1024px) {

    div[id^=pageRegister] #pRegisterMain,
    div[id^=pageProfile] #pRegisterMain,
    div[id*=edit] #pRegisterMain {
        max-width: 1280px
    }
}

div[id^=pageRegister] #pRegisterMain .bRegister .bDisplay,
div[id^=pageProfile] #pRegisterMain .bRegister .bDisplay,
div[id*=edit] #pRegisterMain .bRegister .bDisplay {
    padding: 8px;
    display: flex;
    justify-content: center
}

div[id^=pageRegister] #pRegisterMain .bRegister .bForm,
div[id^=pageProfile] #pRegisterMain .bRegister .bForm,
div[id*=edit] #pRegisterMain .bRegister .bForm {
    padding-top: 20px;
    row-gap: 36px
}

div[id^=pageRegister] #pRegisterMain .bRegister .bForm .bGroup,
div[id^=pageProfile] #pRegisterMain .bRegister .bForm .bGroup,
div[id*=edit] #pRegisterMain .bRegister .bForm .bGroup {
    display: flex;
    gap: 16px 8px;
    flex-direction: column
}

div[id^=pageRegister] #pRegisterMain .bRegister .bForm .bGroup:last-child,
div[id^=pageProfile] #pRegisterMain .bRegister .bForm .bGroup:last-child,
div[id*=edit] #pRegisterMain .bRegister .bForm .bGroup:last-child {
    border: 1px solid var(--colorGray60);
    border-left: none;
    border-right: none;
    padding: 32px 0
}

div[id^=pageRegister] #pRegisterMain .bRegister .bForm [data-icon],
div[id^=pageProfile] #pRegisterMain .bRegister .bForm [data-icon],
div[id*=edit] #pRegisterMain .bRegister .bForm [data-icon] {
    position: relative
}

div[id^=pageRegister] #pRegisterMain .bRegister .bForm [data-icon][data-icon*=phone],
div[id^=pageProfile] #pRegisterMain .bRegister .bForm [data-icon][data-icon*=phone],
div[id*=edit] #pRegisterMain .bRegister .bForm [data-icon][data-icon*=phone] {
    padding-left: 36px;
    background: center center no-repeat #fff;
    background-position: 12px center;
    background-image: url(../img/ui/icon/phone.svg)
}

div[id^=pageRegister] #pRegisterMain .bRegister .bForm [data-icon][data-icon*=birthday],
div[id^=pageProfile] #pRegisterMain .bRegister .bForm [data-icon][data-icon*=birthday],
div[id*=edit] #pRegisterMain .bRegister .bForm [data-icon][data-icon*=birthday] {
    padding-left: 36px;
    background: center center no-repeat #fff;
    background-position: 12px center;
    background-image: url(../img/ui/icon/birthday.svg)
}

div[id^=pageRegister] #pRegisterMain .bRegister .bForm [data-icon][data-icon*=code],
div[id^=pageProfile] #pRegisterMain .bRegister .bForm [data-icon][data-icon*=code],
div[id*=edit] #pRegisterMain .bRegister .bForm [data-icon][data-icon*=code] {
    padding-left: 36px;
    background: center center no-repeat #fff;
    background-position: 12px center;
    background-image: url(../img/ui/icon/code.svg)
}

div[id^=pageRegister] #pServayMain .bServay,
div[id^=pageProfile] #pServayMain .bServay,
div[id*=edit] #pServayMain .bServay {
    margin-inline: auto;
    width: calc(100% - 48px)
}

@media(min-width: 768px) {

    div[id^=pageRegister] #pServayMain .bServay,
    div[id^=pageProfile] #pServayMain .bServay,
    div[id*=edit] #pServayMain .bServay {
        width: 90%
    }
}

@media(min-width: 1024px) {

    div[id^=pageRegister] #pServayMain .bServay,
    div[id^=pageProfile] #pServayMain .bServay,
    div[id*=edit] #pServayMain .bServay {
        max-width: 1280px
    }
}

div[id^=pageRegister] #pServayMain .bServay .bDisplay,
div[id^=pageProfile] #pServayMain .bServay .bDisplay,
div[id*=edit] #pServayMain .bServay .bDisplay {
    padding: 8px;
    display: flex;
    justify-content: center
}

div[id^=pageRegister] #pServayMain .bServay .bForm .bGroup,
div[id^=pageProfile] #pServayMain .bServay .bForm .bGroup,
div[id*=edit] #pServayMain .bServay .bForm .bGroup {
    display: flex;
    flex-direction: column
}

div[id^=pageRegister] #pServayMain .bServay .bForm .bGroup .bQuestion,
div[id^=pageProfile] #pServayMain .bServay .bForm .bGroup .bQuestion,
div[id*=edit] #pServayMain .bServay .bForm .bGroup .bQuestion {
    background-color: #fff;
    overflow: hidden;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    overflow: inherit;
    padding: 12px 24px;
    font-size: 1.25rem;
    line-height: 1em;
    font-weight: bold;
    text-align: center;
    line-height: 120%;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorPrimary);
    position: relative;
    margin-bottom: 8px
}

div[id^=pageRegister] #pServayMain .bServay .bForm .bGroup .bQuestion:after,
div[id^=pageProfile] #pServayMain .bServay .bForm .bGroup .bQuestion:after,
div[id*=edit] #pServayMain .bServay .bForm .bGroup .bQuestion:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='40' ry='40' stroke='%23FFC850FF' stroke-width='4' stroke-dasharray='10%2c 10' stroke-dashoffset='29' stroke-linecap='butt'/%3e%3c/svg%3e");
    border-radius: 40px
}

div[id^=pageRegister] #pServayMain .bServay .bForm .bGroup .bQuestion:before,
div[id^=pageProfile] #pServayMain .bServay .bForm .bGroup .bQuestion:before,
div[id*=edit] #pServayMain .bServay .bForm .bGroup .bQuestion:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background: url(../img/ci/icon/ico-clip-yellow.svg) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: -3px;
    top: -6px
}

div[id^=pageRegister] #pServayMain .bServay .bForm .bGroup .bCondition,
div[id^=pageProfile] #pServayMain .bServay .bForm .bGroup .bCondition,
div[id*=edit] #pServayMain .bServay .bForm .bGroup .bCondition {
    font-size: .75rem;
    line-height: 1em;
    color: var(--colorGray30);
    margin-bottom: 20px;
    padding: 0 24px
}

div[id^=pageRegister] #pServayMain .bServay .bForm .bGroup .bAnswer,
div[id^=pageProfile] #pServayMain .bServay .bForm .bGroup .bAnswer,
div[id*=edit] #pServayMain .bServay .bForm .bGroup .bAnswer {
    padding: 0 24px
}

div[id^=pageRegister] #pThemesMain .bThemes,
div[id^=pageProfile] #pThemesMain .bThemes,
div[id*=edit] #pThemesMain .bThemes {
    margin-inline: auto;
    width: calc(100% - 48px)
}

@media(min-width: 768px) {

    div[id^=pageRegister] #pThemesMain .bThemes,
    div[id^=pageProfile] #pThemesMain .bThemes,
    div[id*=edit] #pThemesMain .bThemes {
        width: 90%
    }
}

@media(min-width: 1024px) {

    div[id^=pageRegister] #pThemesMain .bThemes,
    div[id^=pageProfile] #pThemesMain .bThemes,
    div[id*=edit] #pThemesMain .bThemes {
        max-width: 1280px
    }
}

div[id^=pageRegister] #pThemesMain .bThemes .bSelectThemes,
div[id^=pageProfile] #pThemesMain .bThemes .bSelectThemes,
div[id*=edit] #pThemesMain .bThemes .bSelectThemes {
    padding: 16px 0
}

div[id^=pageRegister] #pThemesMain .bThemes .bSelectThemes .control-group,
div[id^=pageProfile] #pThemesMain .bThemes .bSelectThemes .control-group,
div[id*=edit] #pThemesMain .bThemes .bSelectThemes .control-group {
    width: 100%
}

div[id^=pageRegister] #pThemesMain .bThemes .bSelectThemes .control-group:last-child,
div[id^=pageProfile] #pThemesMain .bThemes .bSelectThemes .control-group:last-child,
div[id*=edit] #pThemesMain .bThemes .bSelectThemes .control-group:last-child {
    margin-bottom: 0
}

div[id^=pageRegister] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio,
div[id^=pageProfile] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio,
div[id*=edit] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio {
    display: flex;
    max-width: inherit;
    justify-content: space-evenly;
    flex-direction: row;
    width: auto
}

div[id^=pageRegister] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio,
div[id^=pageProfile] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio,
div[id*=edit] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio {
    width: 158px;
    height: 196px;
    padding: 0;
    margin-bottom: 0
}

div[id^=pageRegister] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio input,
div[id^=pageProfile] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio input,
div[id*=edit] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio input {
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0
}

div[id^=pageRegister] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio input~.control__indicator,
div[id^=pageProfile] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio input~.control__indicator,
div[id*=edit] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio input~.control__indicator {
    position: relative;
    background-color: rgba(0, 0, 0, 0);
    overflow: hidden;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border: none;
    padding: 0;
    width: 100%;
    height: inherit
}

div[id^=pageRegister] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio input~.control__indicator:after,
div[id^=pageProfile] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio input~.control__indicator:after,
div[id*=edit] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio input~.control__indicator:after {
    display: none
}

div[id^=pageRegister] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio input~.control__indicator .bPic,
div[id^=pageProfile] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio input~.control__indicator .bPic,
div[id*=edit] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio input~.control__indicator .bPic {
    width: 100%;
    padding-top: 124%;
    background: center center no-repeat;
    background-size: 100%;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease
}

div[id^=pageRegister] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio.green input~.control__indicator .bPic,
div[id^=pageProfile] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio.green input~.control__indicator .bPic,
div[id*=edit] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio.green input~.control__indicator .bPic {
    background-image: url(../img/ci/ico-green-themes.png)
}

div[id^=pageRegister] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio.green input:checked~.control__indicator .bPic,
div[id^=pageProfile] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio.green input:checked~.control__indicator .bPic,
div[id*=edit] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio.green input:checked~.control__indicator .bPic {
    background-image: url(../img/ci/ico-green-themes-active.png)
}

div[id^=pageRegister] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio.pink input~.control__indicator .bPic,
div[id^=pageProfile] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio.pink input~.control__indicator .bPic,
div[id*=edit] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio.pink input~.control__indicator .bPic {
    background-image: url(../img/ci/ico-pink-themes.png)
}

div[id^=pageRegister] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio.pink input:checked~.control__indicator .bPic,
div[id^=pageProfile] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio.pink input:checked~.control__indicator .bPic,
div[id*=edit] #pThemesMain .bThemes .bSelectThemes .control-group.imgRadio .control.control--radio.pink input:checked~.control__indicator .bPic {
    background-image: url(../img/ci/ico-pink-themes-active.png)
}

div[id^=pageRegister] #pSuccessMain .bSuccess,
div[id^=pageProfile] #pSuccessMain .bSuccess,
div[id*=edit] #pSuccessMain .bSuccess {
    margin-inline: auto;
    width: calc(100% - 48px)
}

@media(min-width: 768px) {

    div[id^=pageRegister] #pSuccessMain .bSuccess,
    div[id^=pageProfile] #pSuccessMain .bSuccess,
    div[id*=edit] #pSuccessMain .bSuccess {
        width: 90%
    }
}

@media(min-width: 1024px) {

    div[id^=pageRegister] #pSuccessMain .bSuccess,
    div[id^=pageProfile] #pSuccessMain .bSuccess,
    div[id*=edit] #pSuccessMain .bSuccess {
        max-width: 1280px
    }
}

div[id^=pageRegister] #pSuccessMain .bSuccess .bPicSuccess,
div[id^=pageProfile] #pSuccessMain .bSuccess .bPicSuccess,
div[id*=edit] #pSuccessMain .bSuccess .bPicSuccess {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    gap: 32px
}

div[id^=pageRegister] #pSuccessMain .bSuccess .bPicSuccess .bText,
div[id^=pageProfile] #pSuccessMain .bSuccess .bPicSuccess .bText,
div[id*=edit] #pSuccessMain .bSuccess .bPicSuccess .bText {
    color: var(--colorPrimary)
}

div[id^=pageRegister] #pSuccessMain .bSuccess .bPicSuccess .bText h2,
div[id^=pageProfile] #pSuccessMain .bSuccess .bPicSuccess .bText h2,
div[id*=edit] #pSuccessMain .bSuccess .bPicSuccess .bText h2 {
    font-size: 2rem;
    line-height: 1em;
    font-weight: bold;
    margin-bottom: 16px
}

div[id^=pageRegister] #pSuccessMain .bSuccess .bStepBtn,
div[id^=pageProfile] #pSuccessMain .bSuccess .bStepBtn,
div[id*=edit] #pSuccessMain .bSuccess .bStepBtn {
    padding: 40px 0
}

div[id^=pageProfile]#pageProfile .wrapContent {
    padding-bottom: 100px
}

div[id^=pageProfile]#pageProfile section#pProfileMain {
    margin-bottom: 20px
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile {
    padding-bottom: 100px
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup {
    margin-inline: auto;
    width: calc(100% - 48px);
    width: calc(100% - 32px);
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-top: 12px
}

@media(min-width: 768px) {
    div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup {
        max-width: 1280px
    }
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup .bMemberDetails {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup .bMemberDetails .bDisplay .bPic {
    width: 92px;
    height: 75px
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup .bMemberDetails .bDetails h1 {
    font-size: 1.25rem;
    line-height: 1em;
    font-weight: bold;
    margin-bottom: 4px;
    margin-top: 8px
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup .bMemberDetails .bDetails p[data-icon*=birthday] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup .bMemberDetails .bDetails p[data-icon*=birthday]:before {
    content: "";
    width: 16px;
    height: 16px;
    background: center center no-repeat;
    background-size: cover;
    position: relative;
    display: block;
    background-image: url(../img/ui/icon/birthday.svg);
    top: -2px
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup .bMemberDetails .bDetails p.bMemberID {
    display: flex;
    align-items: center;
    gap: 8px
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup .bQR #btnModalQR {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup .bQR #btnModalQR .bPic {
    position: relative;
    padding: 5px;
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    overflow: inherit;
    border: 1px solid var(--colorPrimary)
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup .bQR #btnModalQR .bPic img,
div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup .bQR #btnModalQR .bPic svg,
div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup .bQR #btnModalQR .bPic canvas {
    display: block;
    width: 70px;
    height: auto
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup .bQR #btnModalQR .bPic:before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url(../img/ci/icon/ico-clip-yellow.svg) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: -7px;
    top: -7px
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup .bQR #btnModalQR p {
    overflow: hidden;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 8px;
    font-size: .625rem;
    line-height: 1em;
    background-color: var(--colorGray100);
    box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, .08);
    white-space: nowrap
}

@media(max-width: 375px) {
    div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup {
        zoom: .9
    }
}

@media(max-width: 320px) {
    div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bGroup {
        zoom: .7
    }
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bBtn {
    margin-inline: auto;
    width: calc(100% - 48px);
    display: flex;
    justify-content: center
}

@media(min-width: 768px) {
    div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bBtn {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bBtn {
        max-width: 1280px
    }
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bProfile .bBtn .btn {
    width: initial;
    min-width: inherit
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 32px
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint p:first-child {
    font-size: .75rem;
    line-height: 1em
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bTypePoint {
    display: flex;
    gap: 20px
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bTypePoint .bPointGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bTypePoint .bPointGroup .tNote {
    position: relative
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bTypePoint .bPointGroup .tNote a {
    position: absolute;
    width: 14px;
    height: 14px;
    top: -30%;
    right: -29%
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bTypePoint .bPointGroup .tNote a img {
    width: 14px;
    height: 14px
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bTypePoint .bPointGroup .bTotalPoint {
    background-color: #fff;
    overflow: hidden;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    overflow: inherit;
    padding: 0 32px;
    font-size: 2rem;
    line-height: 1em;
    font-weight: bold;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorPrimary);
    position: relative
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bTypePoint .bPointGroup .bTotalPoint:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23FDBA4DFF' stroke-width='3' stroke-dasharray='5%2c 10' stroke-dashoffset='24' stroke-linecap='square'/%3e%3c/svg%3e");
    overflow: hidden;
    border-radius: 48px;
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    -ms-border-radius: 48px;
    -o-border-radius: 48px
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bTypePoint .bPointGroup .bTotalPoint:before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background: url(../img/ci/icon/ico-clip-yellow.svg) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: -5px;
    top: -8px
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bTypePoint .bPointGroup .bTotalPoint span {
    display: flex;
    align-items: center;
    gap: 8px
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bTypePoint .bPointGroup .bTotalPoint span:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../img/ci/ico-coin.svg) center center no-repeat;
    background-size: 100%
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bTypePoint .bPointGroup .bTotalPointHeart {
    overflow: inherit;
    padding: 0 32px;
    font-size: 2rem;
    line-height: 1em;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a2c2e;
    position: relative
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bTypePoint .bPointGroup .bTotalPointHeart:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    min-width: 128px;
    min-height: 44px;
    background-image: url(../img/ci/ico-bg-wood.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bTypePoint .bPointGroup .bTotalPointHeart span {
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bTypePoint .bPointGroup .bTotalPointHeart span:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../img/ci/ico-heart.svg) center center no-repeat;
    background-size: 100%
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bMatchaEvent {
    margin-inline: auto;
    width: calc(100% - 48px)
}

@media(min-width: 768px) {
    div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bMatchaEvent {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageProfile]#pageProfile section#pProfileMain .bPoint .bMatchaEvent {
        max-width: 1280px
    }
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bShortcut {
    margin-top: -16px;
    overflow: hidden;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    padding: 8px 0;
    background-color: var(--colorGreenD);
    box-shadow: 1px 2px 8px 0px rgba(0, 0, 0, .1)
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bShortcut .bGroup {
    background-color: var(--colorSubSecondary);
    display: flex;
    gap: 1px;
    align-items: center
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bShortcut .bGroup a {
    width: 100%;
    height: 64px;
    padding: 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    font-size: .75rem;
    line-height: 1em;
    color: var(--colorSubSecondary);
    background-color: var(--colorGreenD);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--colorPrimaryL);
    paint-order: stroke fill;
    font-weight: bold
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bShortcut .bGroup a:before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: center center no-repeat
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bShortcut .bGroup a.reward:before {
    background-image: url(../img/ci/menu/ico-reward2.svg)
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bShortcut .bGroup a.luckydraw:before {
    background-image: url(../img/ci/menu/ico-luckydraw2.svg)
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bShortcut .bGroup a.collection:before {
    background-image: url(../img/ci/menu/ico-character2.svg)
}

div[id^=pageProfile]#pageProfile section#pProfileMain .bShortcut .bGroup a.history:before {
    background-image: url(../img/ci/menu/ico-history2.svg)
}

div[id^=pageProfile]#pageProfile section#pEvent {
    margin-inline: auto;
    width: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media(min-width: 768px) {
    div[id^=pageProfile]#pageProfile section#pEvent {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageProfile]#pageProfile section#pEvent {
        max-width: 1280px
    }
}

div[id^=pageProfile]#pageProfile section#pEvent img {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px
}

div[id^=pageProfile][id*=details] section#pProfileDisplay {
    margin-inline: auto;
    width: calc(100% - 48px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--colorGray60)
}

@media(min-width: 768px) {
    div[id^=pageProfile][id*=details] section#pProfileDisplay {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageProfile][id*=details] section#pProfileDisplay {
        max-width: 1280px
    }
}

div[id^=pageProfile][id*=details] section#pProfileDisplay .bDisplay {
    margin-bottom: 24px
}

div[id^=pageProfile][id*=details] section#pProfileDisplay .bDisplay .bPic {
    width: 92px;
    height: 75px
}

div[id^=pageProfile][id*=details] section#pProfileDisplay .bDetails {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px
}

div[id^=pageProfile][id*=details] section#pProfileDisplay .bDetails h2 {
    font-size: 1.25rem;
    line-height: 1em;
    font-weight: bold;
    margin-bottom: 4px
}

div[id^=pageProfile][id*=details] section#pProfileDisplay .bDetails p[data-icon*=birthday] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px
}

div[id^=pageProfile][id*=details] section#pProfileDisplay .bDetails p[data-icon*=birthday]:before {
    content: "";
    width: 16px;
    height: 16px;
    background: center center no-repeat;
    background-size: cover;
    position: relative;
    display: block;
    background-image: url(../img/ui/icon/birthday.svg);
    top: -2px
}

div[id^=pageProfile][id*=details] section#pProfileDisplay .bDetails p.bMemberID {
    display: flex;
    align-items: center;
    gap: 8px
}

div[id^=pageProfile][id*=details] section#pProfileDisplay .bBtn {
    margin-inline: auto;
    width: calc(100% - 48px);
    display: flex;
    justify-content: center
}

@media(min-width: 768px) {
    div[id^=pageProfile][id*=details] section#pProfileDisplay .bBtn {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageProfile][id*=details] section#pProfileDisplay .bBtn {
        max-width: 1280px
    }
}

div[id^=pageProfile][id*=details] section#pProfileDisplay .bBtn .btn {
    width: initial;
    min-width: inherit
}

div[id^=pageProfile][id*=details] section#pProfileDisplay .btnEdit {
    position: absolute;
    right: 0;
    top: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold
}

div[id^=pageProfile][id*=details] section#pProfileDisplay .btnEdit:after {
    content: "";
    width: 16px;
    height: 16px;
    background: center center no-repeat;
    background-size: cover;
    position: relative;
    display: block;
    background-image: url(../img/ui/icon/edit.svg);
    top: -1px
}

div[id^=pageProfile][id*=details] section#pProfileDetails {
    margin-inline: auto;
    width: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 0 72px
}

@media(min-width: 768px) {
    div[id^=pageProfile][id*=details] section#pProfileDetails {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageProfile][id*=details] section#pProfileDetails {
        max-width: 1280px
    }
}

div[id^=pageProfile][id*=details] section#pProfileDetails article {
    position: relative;
    background-color: #fff;
    overflow: hidden;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    overflow: inherit;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%238EC31DFF' stroke-width='7' stroke-dasharray='12%2c 20' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    padding: 20px
}

div[id^=pageProfile][id*=details] section#pProfileDetails article:before {
    content: "";
    display: block;
    width: 36px;
    height: 36px;
    background: url(../img/ci/icon/ico-clip-green-2.svg) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: -12px;
    top: -12px
}

div[id^=pageProfile][id*=details] section#pProfileDetails article .tTitle {
    font-size: 1rem;
    line-height: 1em;
    margin-bottom: 24px;
    font-weight: bold
}

div[id^=pageProfile][id*=details] section#pProfileDetails article .bGroup {
    display: flex;
    flex-direction: column;
    padding: 0 8px
}

div[id^=pageProfile][id*=details] section#pProfileDetails article .bGroup p {
    display: grid;
    align-items: flex-start;
    justify-content: flex-start;
    grid-template-columns: auto 1fr;
    column-gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--colorGray60)
}

div[id^=pageProfile][id*=details] section#pProfileDetails article .bGroup p:first-child {
    padding-top: 0
}

div[id^=pageProfile][id*=details] section#pProfileDetails article .bGroup p:last-child {
    padding-bottom: 0;
    border: none
}

div[id^=pageProfile][id*=details] section#pProfileDetails article .bGroup p a {
    width: 100%;
    justify-content: space-between
}

div[id^=pageProfile][id*=details] section#pProfileDetails article .bGroup p a:after {
    width: 20px;
    height: 20px
}

div[id^=pageProfile][id*=details] section#pProfileDetails article .bGroup p:before {
    content: "";
    width: 20px;
    height: 20px;
    background: center center no-repeat;
    background-size: auto 100%;
    position: relative;
    display: block
}

div[id^=pageProfile][id*=details] section#pProfileDetails article .bGroup p[data-icon*=brand]:before {
    background-image: url(../img/ci/icon/brand.svg)
}

div[id^=pageProfile][id*=details] section#pProfileDetails article .bGroup p[data-icon*=male]:before {
    background-image: url(../img/ui/icon/male.svg)
}

div[id^=pageProfile][id*=details] section#pProfileDetails article .bGroup p[data-icon*=female]:before {
    background-image: url(../img/ui/icon/female.svg)
}

div[id^=pageProfile][id*=details] section#pProfileDetails article .bGroup p[data-icon*=none]:before {
    background-image: url(../img/ui/icon/nosex.svg)
}

div[id^=pageProfile][id*=details] section#pProfileDetails article .bGroup p[data-icon*=phone]:before {
    background-image: url(../img/ui/icon/phone.svg)
}

div[id^=pageProfile][id*=details] section#pProfileDetails article .bGroup p[data-icon*=birthday]:before {
    background-image: url(../img/ui/icon/birthday.svg)
}

div[id^=pageProfile][id*=details] section#pProfileDetails article .bGroup p[data-icon*=address]:before {
    background-image: url(../img/ui/icon/address.svg)
}

div[id^=pageProfile][id*=details] section#pProfileDetails article .bGroup p[data-icon*=user]:before {
    background-image: url(../img/ui/icon/user.svg)
}

div[id^=pageProfile][id*=edit] section#pEditProfileMain {
    margin-inline: auto;
    width: calc(100% - 48px)
}

@media(min-width: 768px) {
    div[id^=pageProfile][id*=edit] section#pEditProfileMain {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageProfile][id*=edit] section#pEditProfileMain {
        max-width: 1280px
    }
}

div[id^=pageProfile][id*=edit] section#pEditProfileMain .bDisplay {
    display: flex;
    justify-content: center;
    padding-top: 24px
}

div[id^=pageProfile][id*=edit] section#pEditProfileMain .bDisplay .bPic {
    width: 92px;
    height: 75px
}

div[id^=pageProfile][id*=edit] section#pEditProfileMain .bForm {
    gap: 0
}

div[id^=pageProfile][id*=edit] section#pEditProfileMain .bForm .bGroup {
    display: flex;
    gap: 16px 8px;
    flex-direction: column;
    padding: 24px 0;
    border-bottom: 1px solid var(--colorGray60)
}

div[id^=pageProfile][id*=edit] section#pEditProfileMain .bForm .bGroup h2 {
    font-size: 1.25rem;
    line-height: 1em;
    font-weight: bold;
    margin-bottom: 8px
}

div[id^=pageProfile][id*=edit] section#pEditProfileMain .bForm .bMemberID span {
    font-size: .875rem;
    line-height: 1em
}

div[id^=pageProfile][id*=edit] section#pEditProfileMain .bForm .bMemberID p {
    background-color: var(--colorGray80);
    border: 1px solid var(--colorGray60);
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    height: 36px;
    line-height: 36px;
    overflow: hidden;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px
}

div[id^=pageProfile][id*=edit] section#pEditProfileMain .bForm .bMemberID p:before {
    content: "";
    width: 20px;
    height: 20px;
    background: center center no-repeat;
    background-size: auto 100%;
    position: relative;
    display: block;
    background-image: url(../img/ci/icon/brand.svg);
    top: -2px
}

div[id^=pageProfile][id*=edit] section#pEditProfileMain .bForm .bMemberID p a {
    color: var(--colorGray10);
    width: 100%;
    justify-content: space-between
}

div[id^=pageProfile][id*=edit] section#pEditProfileMain .bForm [data-icon] {
    position: relative
}

div[id^=pageProfile][id*=edit] section#pEditProfileMain .bForm [data-icon][data-icon*=phone] {
    padding-left: 36px;
    background: center center no-repeat #fff;
    background-position: 12px center;
    background-image: url(../img/ui/icon/phone.svg)
}

div[id^=pageProfile][id*=edit] section#pEditProfileMain .bBtn {
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

div[id^=pageProfile][id*=themes] .bSelectThemes {
    padding: 40px 0 60px !important
}

div[id^=pageScan] section#pScanCode {
    background-color: var(--colorGreenL);
    border-radius: 0px 0px 20px 20px;
    -webkit-border-radius: 0px 0px 20px 20px;
    -moz-border-radius: 0px 0px 20px 20px;
    -ms-border-radius: 0px 0px 20px 20px;
    -o-border-radius: 0px 0px 20px 20px;
    margin-bottom: 20px
}

div[id^=pageScan] section#pScanCode .bLink {
    margin-inline: auto;
    width: calc(100% - 48px);
    display: flex;
    justify-content: center;
    margin-bottom: 12px
}

@media(min-width: 768px) {
    div[id^=pageScan] section#pScanCode .bLink {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageScan] section#pScanCode .bLink {
        max-width: 1280px
    }
}

div[id^=pageScan] section#pScanCode .bLink a {
    color: var(--colorGray10);
    font-weight: bold;
    text-decoration: underline
}

div[id^=pageScan] section#pScanCode .bScanCode {
    margin-inline: auto;
    width: calc(100% - 48px);
    padding: 0px 0px 20px
}

@media(min-width: 768px) {
    div[id^=pageScan] section#pScanCode .bScanCode {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageScan] section#pScanCode .bScanCode {
        max-width: 1280px
    }
}

div[id^=pageScan] section#pScanCode .bScanCode .tDetail {
    text-align: center;
    font-size: 13px;
    line-height: normal
}

div[id^=pageScan] section#pScanCode .bScanCode p {
    font-size: .75rem;
    line-height: 1em;
    margin-bottom: 20px
}

div[id^=pageScan] section#pScanCode .bScanCode h2 {
    font-size: 1rem;
    line-height: 1em;
    margin-bottom: 8px
}

div[id^=pageScan] section#pScanCode .bScanCode .bForm {
    grid-row-gap: 12px
}

div[id^=pageScan] section#pScanCode .bScanCode .bForm .btnScan {
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    cursor: pointer;
    border: 2px solid var(--colorGray10);
    width: 60px;
    height: 44px;
    background: url(../img/ci/menu/ico-scan.svg) center center no-repeat #fff;
    background-size: 20px
}

div[id^=pageScan] section#pScanCode .bScanCode .bForm .control-group>div {
    position: relative
}

div[id^=pageScan] section#pScanCode .bScanCode .bForm .control-group input[type=text] {
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border: 1px solid;
    border-color: var(--colorGray10);
    height: 44px;
    padding-right: 38px
}

div[id^=pageScan] section#pUploadReceipt {
    margin-inline: auto;
    width: calc(100% - 48px);
    padding-bottom: 80px
}

@media(min-width: 768px) {
    div[id^=pageScan] section#pUploadReceipt {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageScan] section#pUploadReceipt {
        max-width: 1280px
    }
}

div[id^=pageScan] section#pUploadReceipt .bAccord {
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    border: 5px solid var(--colorPrimary);
    box-shadow: 1px 2px 8px 0px rgba(0, 0, 0, .1);
    background-color: #fff
}

div[id^=pageScan] section#pUploadReceipt .bAccord:before {
    content: "";
    display: block;
    width: 33px;
    height: 33px;
    background: url(../img/ci/icon/ico-clip-pink.svg) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: -12px;
    top: -12px
}

div[id^=pageScan] section#pUploadReceipt .bAccord .btnAccord {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    cursor: pointer;
    padding: 12px 12px;
    font-weight: bold;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    text-align: center
}

div[id^=pageScan] section#pUploadReceipt .bAccord .btnAccord i {
    display: block;
    width: 20px;
    height: 20px;
    background: url(../img/ci/scan/ico-7.png) center center no-repeat
}

div[id^=pageScan] section#pUploadReceipt .bAccord .btnAccord:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: url(../img/ci/icon/ico-accord.svg) center center no-repeat;
    background-size: 10px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease
}

div[id^=pageScan] section#pUploadReceipt .bAccord .btnAccord.opened {
    padding: 18px 12px
}

div[id^=pageScan] section#pUploadReceipt .bAccord .btnAccord.opened:after {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg)
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord {
    display: none
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bForm {
    grid-row-gap: 20px;
    padding: 0 12px 16px
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bForm .bTitle {
    display: flex;
    flex-direction: column;
    gap: 8px
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bForm .bTitle div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bForm .bTitle div:first-child h2 {
    color: var(--colorGreenD);
    font-weight: bold;
    font-size: 1rem;
    line-height: 1em
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bForm .bTitle div:first-child a {
    color: var(--colorGray10);
    font-weight: bold;
    text-decoration: underline
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bForm .bTitle .bCondition p {
    font-size: .75rem;
    line-height: 1em;
    color: #f81e2f
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bForm .bBtnUpload {
    width: 100%
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bForm .bBtnUpload .btnUpload {
    cursor: pointer
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bForm .bBtnUpload .btnUpload input[type=file] {
    display: none
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bForm .bBtnUpload .btnUpload p {
    display: flex;
    gap: 12px;
    box-shadow: 1px 2px 8px 0px rgba(0, 0, 0, .1), 0px 1px 2px 0px rgba(0, 0, 0, .2)
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bForm .bBtnUpload .btnUpload p:before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: url(../img/ui/form/ico-upload.svg) center center no-repeat
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bForm .bBtnUpload .bTagFile {
    display: flex;
    gap: 12px;
    margin-top: 20px
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bForm .bBtnUpload .bTagFile .bTag {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 8px;
    overflow: hidden;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    color: #4589ff
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bForm .bBtnUpload .bTagFile .bTag:before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: url(../img/ui/form/ico-image.svg) center center no-repeat
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bForm .bBtnUpload .bTagFile .bTag .btnDelete {
    display: block;
    width: 16px;
    height: 16px;
    background: url(../img/ui/form/ico-delete.svg) center center no-repeat
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bBtn {
    padding: 28px 12px;
    background-color: var(--colorGreenL);
    display: flex;
    flex-direction: column;
    gap: 12px
}

div[id^=pageScan] section#pUploadReceipt .bAccord .contentAccord .bBtn .btn.outline {
    background: #fff
}

div[id^=pageScan][id*=characterRandom] p {
    font-weight: 700;
    color: #5e434b;
    padding: 20px 24px
}

div[id^=pageScan][id*=characterRandom] .bSticker {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 40px;
    margin-top: 20px
}

div[id^=pageScan][id*=characterRandom] .bSticker h2 {
    color: #0f873d
}

div[id^=pageScan][id*=characterRandom] .bSticker img {
    width: 48.98%
}

div[id^=pageScan][id*=characterRandom] #bButton {
    margin-top: 40px;
    padding: 0px 24px
}

div[id^=pageScan][id*=characterRandom] #bButton .bBtn {
    display: flex;
    flex-direction: column;
    row-gap: 12px
}

div[id^=pageScan][id*=characterRandom-process] .bProcess {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50%
}

div[id^=pageScan][id*=characterRandom-process] p {
    font-size: 16px;
    font-weight: normal;
    text-align: center
}

div[id^=pageScan][id*=characterRandom-process] img {
    width: 84.1%
}

div[id^=pageScan][id*=Collectpoint] {
    padding-bottom: 60px
}

div[id^=pageScan][id*=Collectpoint] section#pCollectpoint {
    background-color: var(--colorGreenL);
    border-radius: 0px 0px 20px 20px;
    -webkit-border-radius: 0px 0px 20px 20px;
    -moz-border-radius: 0px 0px 20px 20px;
    -ms-border-radius: 0px 0px 20px 20px;
    -o-border-radius: 0px 0px 20px 20px;
    margin-bottom: 20px
}

div[id^=pageScan][id*=Collectpoint] section#pCollectpoint .bCollectpoint {
    margin-inline: auto;
    width: calc(100% - 48px);
    padding: 20px 0
}

@media(min-width: 768px) {
    div[id^=pageScan][id*=Collectpoint] section#pCollectpoint .bCollectpoint {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageScan][id*=Collectpoint] section#pCollectpoint .bCollectpoint {
        max-width: 1280px
    }
}

div[id^=pageScan][id*=Collectpoint] section#pCollectpoint .bCollectpoint .bPoint p {
    text-align: center;
    font-weight: bold
}

div[id^=pageScan][id*=Collectpoint] section#pCollectpoint .bCollectpoint .bPoint .bTotalPoint {
    overflow: inherit;
    padding: 0 32px;
    font-size: 2.75rem;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorPrimary);
    position: relative
}

div[id^=pageScan][id*=Collectpoint] section#pCollectpoint .bCollectpoint .bPoint .bTotalPoint span {
    display: flex;
    align-items: center;
    gap: 8px;
    background: url(../img/ci/bg-point.svg) center center no-repeat;
    background-size: contain;
    padding: 16px 54px
}

div[id^=pageScan][id*=Collectpoint] section#pCollectpoint .bCollectpoint .bPoint .bTotalPoint span:before {
    content: "";
    width: 36px;
    height: 36px;
    background: url(../img/ci/ico-coin.svg) center center no-repeat;
    background-size: 100%
}

div[id^=pageScan][id*=Collectpoint] section#pCollectpoint .bLink {
    margin-inline: auto;
    width: calc(100% - 48px);
    display: flex;
    justify-content: center;
    margin-top: 20px
}

@media(min-width: 768px) {
    div[id^=pageScan][id*=Collectpoint] section#pCollectpoint .bLink {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageScan][id*=Collectpoint] section#pCollectpoint .bLink {
        max-width: 1280px
    }
}

div[id^=pageScan][id*=Collectpoint] section#pCollectpoint .bLink a {
    color: var(--colorGray10);
    font-weight: bold;
    text-decoration: underline
}

div[id^=pageScan][id*=Collectpoint] section#bButton {
    padding: 20px 0;
    margin-inline: auto;
    width: calc(100% - 48px)
}

@media(min-width: 768px) {
    div[id^=pageScan][id*=Collectpoint] section#bButton {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageScan][id*=Collectpoint] section#bButton {
        max-width: 1280px
    }
}

div[id^=pageScan][id*=Collectpoint] section#bButton .bBtn {
    display: flex;
    flex-direction: column;
    gap: 12px
}

div[id^=pageScan][id*=Collectpoint] section#bButton .bBtn a.outline {
    background-color: rgba(0, 0, 0, 0)
}

div[id^=pageScan][id*=Collectpoint] section#pBanner {
    padding: 20px 0;
    margin-inline: auto;
    width: calc(100% - 48px)
}

@media(min-width: 768px) {
    div[id^=pageScan][id*=Collectpoint] section#pBanner {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageScan][id*=Collectpoint] section#pBanner {
        max-width: 1280px
    }
}

div[id^=pageScan][id*=Collectpoint] section#pBanner .bBanner img {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px
}

div[id^=pageScan][id*=Collectpoint] #pCollectHeart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: inherit;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='%23E86100FF' stroke-width='2' stroke-dasharray='15%2c 20' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
    overflow: hidden;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
    margin: 24px;
    padding: 12px
}

div[id^=pageScan][id*=Collectpoint] #pCollectHeart .bContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #fff;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border: 1px solid #5e434b
}

div[id^=pageScan][id*=Collectpoint] #pCollectHeart .bContent .sym {
    display: flex;
    align-items: center;
    gap: 8px
}

div[id^=pageScan][id*=Collectpoint] #pCollectHeart .bContent .sym:after {
    content: "";
    display: block;
    background: url(../img/ci/ico-heart.svg) center center no-repeat;
    background-size: contain;
    width: 24px;
    height: 20px
}

div[id^=pageScan][id*=Collectpoint] #pCollectHeart .bContent p {
    color: #5e434b;
    font-size: 16px
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: inherit;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='%23E86100FF' stroke-width='2' stroke-dasharray='15%2c 20' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
    overflow: hidden;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
    margin: 24px;
    padding: 40px 46px
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker p {
    text-align: center;
    padding-bottom: 20px;
    color: var(--colorPrimary);
    font-weight: 400
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .logoAniverary {
    width: 100%;
    margin-bottom: 6%
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .logoAniverary p {
    padding-bottom: 4px;
    font-weight: 700;
    color: var(--colorGray10)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .logoAniverary img {
    width: 42.3%;
    margin-bottom: 8px;
    height: auto;
    margin: 0 auto;
    display: block
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto;
    text-align: center;
    row-gap: 16px;
    column-gap: 16px
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker {
    position: relative;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 111.5%
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-dup]:after {
    position: absolute;
    top: 11%;
    left: 11%;
    z-index: 2;
    display: block;
    width: 19%;
    height: 18%;
    background-color: red;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    z-index: 2;
    overflow: hidden;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    content: attr(data-dup)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-dup=""]:after {
    display: none
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="1"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/1.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="2"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/2.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="3"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/3.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="4"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/4.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="5"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/5.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="6"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/6.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="7"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/7.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="8"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/8.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="9"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/9.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="10"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/10.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="11"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/11.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="12"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/12.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="13"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/13.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="14"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/14.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="15"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/15.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="16"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/16.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="17"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/17.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="18"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/18.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="19"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/19.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="20"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/20.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="21"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/21.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="22"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/22.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="23"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/23.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="24"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/24.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="25"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/25.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="26"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/26.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="27"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/27.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="28"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/28.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="29"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/29.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="30"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/30.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="31"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/31.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="32"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/32.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="33"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/33.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="34"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/34.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="35"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/35.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="36"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/36.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="37"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/37.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="38"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/38.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="39"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/39.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="40"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/40.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="41"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/41.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="42"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/42.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="43"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/43.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="44"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/44.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="45"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/45.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="46"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/46.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="47"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/47.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="48"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/48.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="49"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/49.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="50"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/50.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="51"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/51.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="52"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/52.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="53"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/53.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="54"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/54.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="55"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/55.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="56"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/56.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="57"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/57.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="58"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/58.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="59"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/59.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="60"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/60.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="61"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/61.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="62"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/62.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="63"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/63.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="64"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/64.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="65"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/65.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="66"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/66.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="67"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/67.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="68"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/68.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="69"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/69.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="70"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/70.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="71"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/71.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="72"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/72.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="73"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/73.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="74"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/74.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="75"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/75.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="76"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/76.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="77"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/77.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="78"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/78.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="79"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/79.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="80"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/80.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="81"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/81.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="82"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/82.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="83"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/83.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="84"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/84.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="85"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/85.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="86"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/86.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="87"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/87.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="88"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/88.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="89"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/89.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="90"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/90.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="91"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/91.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="92"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/92.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="93"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/93.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="94"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/94.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="95"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/95.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="96"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/96.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="97"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/97.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="98"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/98.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="99"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/99.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="100"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/100.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="101"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/101.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="102"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/102.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="103"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/103.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="104"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/104.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="105"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/105.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="106"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/106.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="107"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/107.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="108"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/108.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="109"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/109.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="110"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/110.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="111"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/111.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="112"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/112.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="113"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/113.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="114"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/114.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="115"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/115.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="116"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/116.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="117"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/117.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="118"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/118.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="119"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/119.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="120"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/120.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="121"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/121.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="122"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/122.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="123"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/123.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="124"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/124.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="125"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/125.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="126"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/126.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="127"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/127.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="128"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/128.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="129"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/129.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="130"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/130.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="131"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/131.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="132"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/132.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="133"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/133.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="134"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/134.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="135"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/135.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="136"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/136.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="137"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/137.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="138"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/138.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="139"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/139.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="140"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/140.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="141"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/141.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="142"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/142.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="143"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/143.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="144"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/144.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="145"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/145.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="146"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/146.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="147"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/147.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="148"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/148.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="149"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/149.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="150"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/150.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="151"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/151.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="152"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/152.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="153"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/153.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="154"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/154.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="155"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/155.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="156"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/156.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="157"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/157.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="158"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/158.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="159"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/159.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="160"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/160.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="161"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/161.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="162"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/162.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="163"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/163.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="164"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/164.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="165"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/165.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="166"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/166.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="167"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/167.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="168"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/168.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="169"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/169.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="170"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/170.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="171"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/171.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="172"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/172.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="173"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/173.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="174"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/174.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="175"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/175.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="176"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/176.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="177"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/177.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="178"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/178.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="179"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/179.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="180"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/180.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="181"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/181.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="182"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/182.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="183"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/183.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="184"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/184.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="185"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/185.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="186"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/186.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="187"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/187.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="188"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/188.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="189"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/189.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="190"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/190.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="191"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/191.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="192"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/192.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="193"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/193.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="194"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/194.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="195"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/195.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="196"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/196.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="197"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/197.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="198"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/198.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="199"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/199.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="200"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/200.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="201"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/201.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="202"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/202.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="203"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/203.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="204"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/204.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="205"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/205.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="206"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/206.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="207"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/207.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="208"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/208.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="209"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/209.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="210"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/210.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="211"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/211.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="212"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/212.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="213"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/213.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-character="214"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/214.png)
}

div[id^=pageScan][id*=Collectpoint] #pCollectpointSticker .bCollectpointSticker .bSticker[data-collect="0"] {
    opacity: .4
}

div[id^=pageScan][id*=Receiptcomplete] {
    padding-bottom: 60px
}

div[id^=pageScan][id*=Receiptcomplete] section#pDetails {
    padding-bottom: 50px
}

div[id^=pageScan][id*=Receiptcomplete] section#pDetails .bTitle {
    margin-inline: auto;
    width: calc(100% - 48px);
    text-align: center;
    padding: 20px 0
}

@media(min-width: 768px) {
    div[id^=pageScan][id*=Receiptcomplete] section#pDetails .bTitle {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageScan][id*=Receiptcomplete] section#pDetails .bTitle {
        max-width: 1280px
    }
}

div[id^=pageScan][id*=Receiptcomplete] section#pDetails .bTitle p {
    font-size: 1.25rem;
    line-height: 1em;
    color: var(--colorPrimary);
    font-weight: bold
}

div[id^=pageScan][id*=Receiptcomplete] section#pDetails .bDetails {
    margin-inline: auto;
    width: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 12px
}

@media(min-width: 768px) {
    div[id^=pageScan][id*=Receiptcomplete] section#pDetails .bDetails {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageScan][id*=Receiptcomplete] section#pDetails .bDetails {
        max-width: 1280px
    }
}

div[id^=pageScan][id*=Receiptcomplete] section#pDetails .bDetails .bPic img {
    display: block
}

div[id^=pageScan][id*=Receiptcomplete] section#pDetails .bDetails h1 {
    font-size: 1.25rem;
    line-height: 1em;
    font-weight: bold;
    color: var(--colorGreenD)
}

div[id^=pageScan][id*=Receiptcomplete] section#pDetails .bDetails p span {
    display: block;
    margin-bottom: 8px
}

div[id^=pageScan][id*=Receiptcomplete] section#bButton {
    padding: 40px 0;
    margin-inline: auto;
    width: calc(100% - 48px)
}

@media(min-width: 768px) {
    div[id^=pageScan][id*=Receiptcomplete] section#bButton {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageScan][id*=Receiptcomplete] section#bButton {
        max-width: 1280px
    }
}

div[id^=pageScan][id*=Receiptcomplete] section#bButton .bBtn {
    display: flex;
    flex-direction: column;
    gap: 12px
}

div[id^=pageScan][id*=Receiptcomplete] section#bButton .bBtn a.outline {
    background-color: rgba(0, 0, 0, 0)
}

div[id^=pageScan] .apiScan {
    width: 100%;
    max-width: 500px;
    margin-inline: auto;
    background-color: #f9f9ee;
    min-height: 100dvh;
    position: fixed;
    height: 100%;
    top: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 35px 0;
    z-index: 9999
}

div[id^=pageScan] .apiScan .bCamera {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px
}

div[id^=pageScan] .apiScan .bCamera .bText {
    margin-inline: auto;
    width: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

@media(min-width: 768px) {
    div[id^=pageScan] .apiScan .bCamera .bText {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageScan] .apiScan .bCamera .bText {
        max-width: 1280px
    }
}

div[id^=pageScan] .apiScan .bCamera .bText span {
    width: fit-content;
    display: block;
    padding: 8px 12px;
    border: 1px solid rgba(255, 0, 0, .7);
    font-size: .875rem;
    line-height: 1em
}

div[id^=pageScan] .apiScan .bCamera .bRed {
    position: relative
}

div[id^=pageScan] .apiScan .bCamera .bRed video {
    height: 60vh;
    width: 80%;
    background-color: #000;
    z-index: 1;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    border: 4px solid var(--colorPrimary)
}

div[id^=pageScan] .apiScan .bCamera .bRed:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    display: block;
    width: 50%;
    height: 10%;
    border: 2px solid rgba(255, 0, 0, .7);
    margin: auto;
    z-index: 5
}

div[id^=pageScan] .apiScan .bCamera .bCondition {
    margin-inline: auto;
    width: calc(100% - 48px);
    text-align: center;
    padding: 0 22%;
    color: var(--colorGray30);
    font-size: .75rem;
    line-height: 1em;
    line-height: 120%
}

@media(min-width: 768px) {
    div[id^=pageScan] .apiScan .bCamera .bCondition {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageScan] .apiScan .bCamera .bCondition {
        max-width: 1280px
    }
}

div[id^=pageScan] .apiScan .bCamera button {
    font-size: 1rem;
    line-height: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    overflow: hidden;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    height: 44px;
    line-height: 44px;
    width: 100%;
    min-width: 120px;
    padding: 0 24px;
    color: var(--colorGray10);
    background-color: var(--colorSubSecondary);
    border: 2px solid var(--Gradient-stoke, #5e434b);
    box-shadow: 1px 2px 8px 0px rgba(0, 0, 0, .1), 0px 1px 2px 0px rgba(0, 0, 0, .2);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    width: fit-content;
    min-width: 140px !important
}

@media(min-width: 1024px) {
    div[id^=pageScan] .apiScan .bCamera button {
        height: 44px;
        line-height: 44px;
        min-width: 180px
    }
}

div[id^=pageScan] .apiScan>div {
    display: none
}

div[id^=pageScan] .apiScan .textLog {
    display: block;
    position: absolute;
    bottom: 0
}

div[id^=pageHistory] {
    background-color: var(--colorGreenL)
}

div[id^=pageHistory] #pSubmenu {
    background-color: #f9f9ee;
    padding: 24px 24px;
    border-radius: 0px 0px 20px 20px
}

div[id^=pageHistory] #pSubmenu .bSubmenu {
    overflow-x: auto
}

div[id^=pageHistory] #pSubmenu .bSubmenu::-webkit-scrollbar {
    display: none
}

div[id^=pageHistory] #pSubmenu .bSubmenu nav {
    width: 140%;
    display: flex;
    align-items: center;
    gap: 8px
}

@media(max-width: 767px) {
    div[id^=pageHistory] #pSubmenu .bSubmenu nav {
        width: 182%
    }
}

div[id^=pageHistory] #pSubmenu .bSubmenu nav a {
    display: flex;
    order: 2;
    padding: 0 8px;
    border-bottom: 3px solid rgba(0, 0, 0, 0);
    text-wrap: nowrap
}

div[id^=pageHistory] #pSubmenu .bSubmenu nav a.active {
    font-weight: bold;
    border-color: var(--colorPrimary);
    order: 1
}

div[id^=pageHistory] #pContent {
    margin-inline: auto;
    width: calc(100% - 48px);
    padding: 24px 0 60px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

@media(min-width: 768px) {
    div[id^=pageHistory] #pContent {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageHistory] #pContent {
        max-width: 1280px
    }
}

div[id^=pageHistory] #pContent h1 {
    font-size: 1.25rem;
    line-height: 1em;
    padding: 4px 0;
    text-align: center
}

div[id^=pageHistory] #pContent .bFilter {
    display: flex;
    justify-content: center
}

div[id^=pageHistory] #pContent .bFilter .control-group input[type=month] {
    width: fit-content;
    font-weight: bold;
    text-align: center;
    height: 44px;
    color: var(--colorGray10);
    background-color: var(--colorSubSecondary);
    border: 2px solid var(--Gradient-stoke, #5e434b)
}

div[id^=pageHistory] #pContent .bFilter .control-group input[type=month]:after {
    background: url(../img/ui/form/ico-arrow-select-black.svg) center center no-repeat !important
}

div[id^=pageHistory] #pContent .bCard {
    position: relative;
    background-color: var(--colorGray90);
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    overflow: inherit;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23FDBA4DFF' stroke-width='5' stroke-dasharray='5%2c 15' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    padding: 20px 16px
}

div[id^=pageHistory] #pContent .bCard:before {
    content: "";
    display: block;
    width: 36px;
    height: 36px;
    background: url(../img/ci/icon/ico-clip-yellow.svg) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: -12px;
    top: -12px
}

div[id^=pageHistory] #pContent .bCard .bTablePoint table {
    border-spacing: 0px;
    width: 100%;
    margin-bottom: 8px
}

div[id^=pageHistory] #pContent .bCard .bTablePoint table thead {
    position: relative
}

div[id^=pageHistory] #pContent .bCard .bTablePoint table thead tr {
    position: relative;
    text-align: center;
    background-color: var(--colorGray70)
}

div[id^=pageHistory] #pContent .bCard .bTablePoint table thead tr td {
    padding: 12px 0;
    font-weight: bold
}

div[id^=pageHistory] #pContent .bCard .bTablePoint table tbody tr td {
    padding: 12px
}

div[id^=pageHistory] #pContent .bCard .bTablePoint table tbody tr td:first-child {
    text-align: center
}

div[id^=pageHistory] #pContent .bCard .bTablePoint table tbody tr td i {
    font-style: normal;
    display: flex;
    align-items: center;
    gap: 8px
}

div[id^=pageHistory] #pContent .bCard .bTablePoint table tbody tr td i:before {
    content: "";
    width: 16px;
    height: 16px;
    background: url(../img/ci/ico-coin.svg) center center no-repeat;
    background-size: 100%
}

div[id^=pageHistory] #pContent .bCard .bPagination nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 0;
    align-items: center;
    width: 100%;
    padding-top: 16px;
    border-top: 1px solid var(--colorGray60)
}

div[id^=pageHistory] #pContent .bCard .bPagination nav p {
    justify-self: center;
    font-size: .875rem;
    line-height: 1em
}

div[id^=pageHistory] #pContent .bCard .bPagination nav a {
    display: block;
    cursor: pointer;
    width: 36px;
    height: 36px;
    background: center center no-repeat;
    background-size: 100%
}

div[id^=pageHistory] #pContent .bCard .bPagination nav a.btnPrev {
    background-image: url(../img/ui/pagiantion/ico-arrowL.svg)
}

div[id^=pageHistory] #pContent .bCard .bPagination nav a.btnNext {
    background-image: url(../img/ui/pagiantion/ico-arrowR.svg);
    justify-self: flex-end
}

div[id^=pageHistory] #pContent .bCard .textCenter {
    align-items: center
}

div[id^=pageHistory] #pContent .bCard .tStatus {
    color: #fff;
    padding: 4px 12px;
    overflow: hidden;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    width: fit-content
}

div[id^=pageHistory] #pContent .bCard .tStatus[data-status*=pending] {
    background-color: #e38d00
}

div[id^=pageHistory] #pContent .bCard .tStatus[data-status*=shipped] {
    background-color: #00b247
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails {
    display: flex;
    flex-direction: column;
    gap: 16px
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails .bDateStatus {
    display: flex;
    justify-content: space-between;
    align-items: center
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails .bDateStatus .tDate {
    color: var(--colorGreenD);
    font-size: .875rem;
    line-height: 1em
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails .bDateStatus .tDate span {
    display: block;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1em;
    margin-top: 4px
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails .bDateStatus *:last-child span {
    display: inline;
    margin: 0
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails .bDetailsMain {
    display: grid;
    grid-template-columns: 80px auto;
    gap: 20px;
    padding: 16px 0;
    border-top: 1px solid var(--colorGray60);
    border-bottom: 1px solid var(--colorGray60)
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails .bDetailsMain .bPic img {
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    display: block;
    width: 80px;
    height: auto
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails .bDetailsMain .bDetails .bText {
    display: flex;
    flex-direction: column;
    gap: 6px
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails .bDetailsMain .bDetails .bText h3 {
    font-size: 1rem;
    line-height: 1em
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails .bDetailsMain .bDetails .bText p {
    font-size: .875rem;
    line-height: 1em;
    color: var(--colorGray30)
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails .bDetailsMain .bDetails .bText span {
    font-size: .875rem;
    line-height: 1em
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails .bDetailsMain .bDetails .bPoint {
    margin-top: 12px
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails .bDetailsMain .bDetails .bPoint .point {
    background-color: var(--colorGreenL);
    overflow: hidden;
    border-radius: 36px;
    -webkit-border-radius: 36px;
    -moz-border-radius: 36px;
    -ms-border-radius: 36px;
    -o-border-radius: 36px;
    overflow: inherit;
    padding: 0 12px;
    font-weight: bold;
    text-align: center;
    display: flex;
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--colorPrimary);
    position: relative;
    width: fit-content
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails .bDetailsMain .bDetails .bPoint .point:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='white' stroke-width='1.3' stroke-dasharray='5%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    overflow: hidden;
    border-radius: 36px;
    -webkit-border-radius: 36px;
    -moz-border-radius: 36px;
    -ms-border-radius: 36px;
    -o-border-radius: 36px
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails .bDetailsMain .bDetails .bPoint .point:before {
    content: "";
    width: 16px;
    height: 16px;
    background: url(../img/ci/ico-coin.svg) center center no-repeat;
    background-size: 100%
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails .bDetailsMain .bDetails .bPoint p {
    font-size: .875rem;
    line-height: 1em;
    color: var(--colorGray30);
    margin-top: 4px
}

div[id^=pageHistory] #pContent .bCard .bHistoryDetails .bDetailsMain .bDetails .bPoint p span {
    font-weight: bold;
    color: var(--colorGray10);
    margin-left: 4px
}

div[id^=pageHistory] #pContent .bCard.bRewardMain {
    display: flex;
    flex-direction: column;
    gap: 24px
}

div[id^=pageHistory] #pContent .bCard.bRewardMain>.bTitle {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center
}

div[id^=pageHistory] #pContent .bCard.bRewardMain>.bTitle h2 {
    font-size: 1.25rem;
    line-height: 1em;
    color: var(--colorGray20);
    font-weight: normal;
    margin-bottom: 0
}

div[id^=pageHistory] #pContent .bCard.bRewardMain>.bTitle .fontWeight {
    font-weight: 700
}

div[id^=pageHistory] #pContent .bCard.bRewardMain>.bTitle .textCenter {
    text-align: center
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bRewardDetails {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 24px 0 0;
    border-top: 1px solid var(--colorGray60)
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bRewardDetails>.bPoint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bRewardDetails>.bPoint h2 {
    font-size: 1.25rem;
    line-height: 1em
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bRewardDetails>.bPoint span {
    font-size: .875rem;
    line-height: 1em;
    color: var(--colorGray20)
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bRewardDetails>.bPoint p {
    background-color: var(--colorGreenL);
    overflow: hidden;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    overflow: inherit;
    padding: 0 12px;
    font-size: 1.5rem;
    line-height: 1em;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorGray10);
    position: relative;
    gap: 5px;
    width: fit-content;
    min-width: 110px
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bRewardDetails>.bPoint p:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='white' stroke-width='3' stroke-dasharray='5%2c 10' stroke-dashoffset='24' stroke-linecap='square'/%3e%3c/svg%3e");
    overflow: hidden;
    border-radius: 48px;
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    -ms-border-radius: 48px;
    -o-border-radius: 48px
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bRewardDetails>.bPoint p:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../img/ci/ico-coin.svg) center center no-repeat;
    background-size: 100%
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bRewardDetails .bProductImg .bPic {
    display: flex;
    justify-content: center
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bRewardDetails .bProductImg .bPic img {
    display: block;
    max-width: 200px;
    height: auto;
    overflow: hidden;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bRewardDetails .bTotalPoint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bRewardDetails .bTotalPoint>p span {
    font-weight: bold;
    margin-left: 4px
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bRewardDetails .bTotalPoint .bPoint p {
    background-color: var(--colorGreenL);
    overflow: hidden;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    overflow: inherit;
    padding: 0 20px;
    line-height: 40px;
    text-align: center;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorGray10);
    position: relative;
    gap: 5px;
    width: fit-content;
    min-width: 110px
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bRewardDetails .bTotalPoint .bPoint p:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='white' stroke-width='3' stroke-dasharray='5%2c 10' stroke-dashoffset='24' stroke-linecap='square'/%3e%3c/svg%3e");
    overflow: hidden;
    border-radius: 48px;
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    -ms-border-radius: 48px;
    -o-border-radius: 48px
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bRewardDetails .bTotalPoint .bPoint p:before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background: url(../img/ci/icon/ico-clip-yellow.svg) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: -8px;
    top: -8px
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bRewardDetails .bTotalPoint .bPoint p span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1em;
    font-weight: bold;
    gap: 5px
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bRewardDetails .bTotalPoint .bPoint p span:before {
    content: "";
    width: 16px;
    height: 16px;
    background: url(../img/ci/ico-coin.svg) center center no-repeat;
    background-size: 100%
}

div[id^=pageHistory] #pContent .bCard.bRewardMain .bCodeDate .bRow {
    margin-bottom: 0 !important
}

div[id^=pageHistory] #pContent .bCard .bAddress .bRow,
div[id^=pageHistory] #pContent .bCard .bCodeDate .bRow {
    display: flex;
    justify-content: space-between
}

div[id^=pageHistory] #pContent .bCard .bAddress .bRow:first-child,
div[id^=pageHistory] #pContent .bCard .bCodeDate .bRow:first-child {
    margin-bottom: 16px
}

div[id^=pageHistory] #pContent .bCard .bAddress .bRow p span,
div[id^=pageHistory] #pContent .bCard .bCodeDate .bRow p span {
    display: block;
    color: var(--colorGray30);
    font-size: .875rem;
    line-height: 1em;
    margin-bottom: 4px
}

div[id^=pageHistory] #pContent .bCard .bAddress .bRow p:last-child,
div[id^=pageHistory] #pContent .bCard .bCodeDate .bRow p:last-child {
    text-align: right
}

div[id^=pageHistory] #pContent .bCard .bAddress .bRow p:first-child,
div[id^=pageHistory] #pContent .bCard .bCodeDate .bRow p:first-child {
    text-align: left
}

div[id^=pageHistory] #pContent .bCard.bShipped .bTrackingMain {
    display: flex;
    gap: 16px;
    justify-content: space-between
}

div[id^=pageHistory] #pContent .bCard.bShipped .bTrackingMain .bDetails .bTransport {
    display: flex;
    gap: 4px;
    align-items: center;
    font-size: .875rem;
    line-height: 1em;
    color: var(--colorGreenD);
    margin-bottom: 8px
}

div[id^=pageHistory] #pContent .bCard.bShipped .bTrackingMain .bDetails .bTransport img {
    height: 16px;
    width: auto
}

div[id^=pageHistory] #pContent .bCard.bShipped .bTrackingMain .bDetails .bTransport span {
    font-size: 1rem;
    line-height: 1em;
    color: var(--colorGray40)
}

div[id^=pageHistory] #pContent .bCard.bShipped .bTrackingMain .bDetails .bTrackingNumber {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .875rem;
    line-height: 1em;
    color: var(--colorGreenD);
    margin-bottom: 8px
}

div[id^=pageHistory] #pContent .bCard.bShipped .bTrackingMain .bDetails .bTrackingNumber p {
    font-size: 1rem;
    line-height: 1em;
    font-weight: bold
}

div[id^=pageHistory] #pContent .bCard.bShipped .bTrackingMain .bDetails .bTrackingNumber span {
    font-size: 1rem;
    line-height: 1em;
    color: var(--colorGray30);
    font-weight: bold
}

div[id^=pageHistory] #pContent .bCard.bShipped .bTrackingMain .bDetails .bCondition {
    color: var(--colorGray30);
    font-size: .75rem;
    line-height: 1em;
    line-height: normal
}

div[id^=pageHistory] #pContent .bCard.bShipped .bTrackingMain .bBtn .btnTracking {
    overflow: hidden;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    height: 32px;
    line-height: 32px;
    text-transform: uppercase;
    width: fit-content;
    padding: 0 12px;
    font-weight: bold;
    color: #fff;
    background: radial-gradient(11.94% 8.98% at 15.43% 20%, #fff 0%, rgba(255, 255, 255, 0) 50.77%), linear-gradient(180deg, #0f873d 2.5%, #48a46b 20.31%, #138941 55.31%, #2faf5f 90.62%, #0f873d 100%);
    border: 1px solid var(--Gradient-stoke, #5e434b);
    box-shadow: 1px 2px 8px 0px rgba(0, 0, 0, .1), 0px 1px 2px 0px rgba(0, 0, 0, .2);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px
}

div[id^=pageHistory] #pContent .bCard.bShipped .bTrackingMain .bBtn .btnTracking:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url(../img/ci/ico-car.svg) center center no-repeat
}

div[id^=pageHistory] #pContent .bCard.bShipped .bTrackingMain .bBtn .btnTracking:not([href]) {
    color: var(--colorGray40);
    background: var(--colorGray70);
    border: 2px solid var(--colorGray40);
    box-shadow: none
}

div[id^=pageHistory] #pContent .bCard.bShipped .bTrackingMain .bBtn .btnTracking:not([href]):before {
    background-image: url(../img/ci/ico-car-gray.svg)
}

div[id^=pageHistory] #pContent .bCard.bShipped .bCodeDate {
    margin: 16px 0;
    padding: 16px 0;
    border-top: 1px solid var(--colorGray60);
    border-bottom: 1px solid var(--colorGray60)
}

div[id^=pageHistory] #pContent .bCard.bShipped .bCodeDate .bRow {
    margin-bottom: 0
}

div[id^=pageHistory][id*=Details] #pContent {
    padding: 24px 0 60px
}

div[id^=pageHistory][id*=Details] #pContent .bCard {
    background-image: none
}

div[id^=pageHistory][id*=Details] #pContent .bCard:before {
    display: none
}

div[id^=pageHistory][id*=Luckydraw][id*=Details] #pContent .bCard.bRewardMain .bRewardDetails {
    padding: 24px 0;
    border-bottom: 1px solid var(--colorGray60)
}

div[id^=pageHistory][id*=Luckydraw][id*=Details] #pContent .bCard.bRewardMain .bRewardDetails .bTotalPoint .bPoint p {
    background-color: var(--colorSecondL)
}

div[id^=pageHistory][id*=Luckydraw][id*=Details] #pContent .bCard.bRewardMain .bRewardDetails .bTotalPoint .bPoint p:before {
    background-image: url(../img/ci/icon/ico-clip-green.svg)
}

div[id^=pageHistory][id*=Receipt] #pContent .bCard .bTablePoint {
    overflow-x: auto
}

div[id^=pageHistory][id*=Receipt] #pContent .bCard .bTablePoint table {
    width: 150%
}

div[id^=pageReward][id*=-All],
div[id^=pageLuckydraw][id*=-All],
div[id^=pageCharacter][id*=-All] {
    background-color: var(--colorGray100)
}

div[id^=pageReward][id*=-All] #pContent,
div[id^=pageLuckydraw][id*=-All] #pContent,
div[id^=pageCharacter][id*=-All] #pContent {
    margin-inline: auto;
    width: calc(100% - 48px);
    padding: 20px 0 60px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media(min-width: 768px) {

    div[id^=pageReward][id*=-All] #pContent,
    div[id^=pageLuckydraw][id*=-All] #pContent,
    div[id^=pageCharacter][id*=-All] #pContent {
        width: 90%
    }
}

@media(min-width: 1024px) {

    div[id^=pageReward][id*=-All] #pContent,
    div[id^=pageLuckydraw][id*=-All] #pContent,
    div[id^=pageCharacter][id*=-All] #pContent {
        max-width: 1280px
    }
}

div[id^=pageReward][id*=-All] #pContent .bSubmenu,
div[id^=pageLuckydraw][id*=-All] #pContent .bSubmenu,
div[id^=pageCharacter][id*=-All] #pContent .bSubmenu {
    padding: 12px 0;
    overflow-x: auto
}

div[id^=pageReward][id*=-All] #pContent .bSubmenu nav,
div[id^=pageLuckydraw][id*=-All] #pContent .bSubmenu nav,
div[id^=pageCharacter][id*=-All] #pContent .bSubmenu nav {
    width: 110%;
    overflow-x: auto;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 8px
}

div[id^=pageReward][id*=-All] #pContent .bSubmenu nav::-webkit-scrollbar,
div[id^=pageLuckydraw][id*=-All] #pContent .bSubmenu nav::-webkit-scrollbar,
div[id^=pageCharacter][id*=-All] #pContent .bSubmenu nav::-webkit-scrollbar {
    display: none
}

div[id^=pageReward][id*=-All] #pContent .bSubmenu nav a,
div[id^=pageLuckydraw][id*=-All] #pContent .bSubmenu nav a,
div[id^=pageCharacter][id*=-All] #pContent .bSubmenu nav a {
    padding: 0 8px;
    border-bottom: 3px solid rgba(0, 0, 0, 0);
    text-wrap: nowrap
}

div[id^=pageReward][id*=-All] #pContent .bSubmenu nav a.active,
div[id^=pageLuckydraw][id*=-All] #pContent .bSubmenu nav a.active,
div[id^=pageCharacter][id*=-All] #pContent .bSubmenu nav a.active {
    font-weight: bold;
    border-color: var(--colorPrimary)
}

div[id^=pageReward][id*=-All] #pContent .bBanner img,
div[id^=pageLuckydraw][id*=-All] #pContent .bBanner img,
div[id^=pageCharacter][id*=-All] #pContent .bBanner img {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px
}

div[id^=pageReward][id*=-All] #pContent .bTitle h2,
div[id^=pageLuckydraw][id*=-All] #pContent .bTitle h2,
div[id^=pageCharacter][id*=-All] #pContent .bTitle h2 {
    font-size: 1.5rem;
    line-height: 1em;
    font-weight: bold;
    color: var(--colorPrimary);
    margin-bottom: 4px
}

div[id^=pageReward][id*=-All] #pContent .bTitle p,
div[id^=pageLuckydraw][id*=-All] #pContent .bTitle p,
div[id^=pageCharacter][id*=-All] #pContent .bTitle p {
    color: var(--colorGray20)
}

div[id^=pageReward][id*=-All] #pContent .bBtn,
div[id^=pageLuckydraw][id*=-All] #pContent .bBtn,
div[id^=pageCharacter][id*=-All] #pContent .bBtn {
    display: flex;
    gap: 8px
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 8px;
    grid-row-gap: 20px
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a {
    color: var(--colorGray10);
    overflow: hidden;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    box-shadow: 1px 2px 8px 0px rgba(0, 0, 0, .05)
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bPic,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bPic,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bPic,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bPic,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bPic,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bPic {
    padding-top: 72%;
    background: center center no-repeat #fff;
    background-size: contain
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails {
    background-color: #f9f9ee;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .tTitle,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .tTitle,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .tTitle,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .tTitle,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .tTitle,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .tTitle {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75vw
}

@media(min-width: 429px) {

    div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .tTitle,
    div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .tTitle,
    div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .tTitle,
    div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .tTitle,
    div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .tTitle,
    div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .tTitle {
        max-width: 408px
    }
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .tDes,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .tDes,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .tDes,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .tDes,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .tDes,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .tDes {
    font-size: .875rem;
    line-height: 1em;
    line-height: normal;
    color: var(--colorGray30);
    margin-top: -8px
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .tDate,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .tDate,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .tDate,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .tDate,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .tDate,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .tDate {
    font-size: .75rem;
    line-height: 1em;
    color: var(--colorGray30)
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .tDate span,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .tDate span,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .tDate span,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .tDate span,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .tDate span,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .tDate span {
    display: block
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain,
div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .bPoint,
div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .bPoint,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .bPoint,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .bPoint,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .bPoint,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .bPoint,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .bPoint,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .bPoint,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .bPoint,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .bPoint,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .bPoint,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .bPoint {
    background-color: var(--colorGreenL);
    overflow: hidden;
    border-radius: 36px;
    -webkit-border-radius: 36px;
    -moz-border-radius: 36px;
    -ms-border-radius: 36px;
    -o-border-radius: 36px;
    overflow: inherit;
    padding: 0 12px;
    font-weight: bold;
    text-align: center;
    display: flex;
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--colorPrimary);
    position: relative
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .bPoint:after,
div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .bPoint:after,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .bPoint:after,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .bPoint:after,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .bPoint:after,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .bPoint:after,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .bPoint:after,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .bPoint:after,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .bPoint:after,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .bPoint:after,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .bPoint:after,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .bPoint:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='white' stroke-width='1.3' stroke-dasharray='5%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    overflow: hidden;
    border-radius: 36px;
    -webkit-border-radius: 36px;
    -moz-border-radius: 36px;
    -ms-border-radius: 36px;
    -o-border-radius: 36px
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .bPoint:before,
div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .bPoint:before,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .bPoint:before,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .bPoint:before,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .bPoint:before,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .bPoint:before,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .bPoint:before,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .bPoint:before,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .bPoint:before,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .bPoint:before,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .bPoint:before,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .bPoint:before {
    content: "";
    width: 16px;
    height: 16px;
    background: url(../img/ci/ico-coin.svg) center center no-repeat;
    background-size: 100%
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .tRemaining,
div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .tQuota,
div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .tRemaining,
div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .tQuota,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .tRemaining,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .tQuota,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .tRemaining,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .tQuota,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .tRemaining,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .tQuota,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .tRemaining,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .tQuota,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .tRemaining,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .tQuota,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .tRemaining,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .tQuota,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .tRemaining,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .tQuota,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .tRemaining,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .tQuota,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .tRemaining,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .tQuota,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .tRemaining,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .tQuota {
    font-size: .75rem;
    line-height: 1em;
    color: var(--colorPrimary);
    text-align: right
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .tRemaining span,
div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .tQuota span,
div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .tRemaining span,
div[id^=pageReward][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .tQuota span,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .tRemaining span,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .tQuota span,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .tRemaining span,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .tQuota span,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .tRemaining span,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .tQuota span,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .tRemaining span,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .tQuota span,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .tRemaining span,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .tQuota span,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .tRemaining span,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .tQuota span,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .tRemaining span,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .bPointRemain .tQuota span,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .tRemaining span,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article .bDetails .bPointQuota .tQuota span,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .tRemaining span,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .bPointRemain .tQuota span,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .tRemaining span,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a .bDetails .bPointQuota .tQuota span {
    display: block;
    font-weight: bold
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article.soldout .bPic,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a.soldout .bPic,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article.soldout .bPic,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a.soldout .bPic,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article.soldout .bPic,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a.soldout .bPic {
    position: relative
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article.soldout .bPic:after,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a.soldout .bPic:after,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article.soldout .bPic:after,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a.soldout .bPic:after,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article.soldout .bPic:after,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a.soldout .bPic:after {
    content: "สินค้าหมด";
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    background: rgba(239, 239, 239, .8);
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, .1);
    backdrop-filter: blur(5px);
    font-weight: bold;
    text-align: center;
    padding: 8px
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article.soldout .bDetails,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a.soldout .bDetails,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article.soldout .bDetails,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a.soldout .bDetails,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article.soldout .bDetails,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a.soldout .bDetails {
    background-color: var(--colorGray70)
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article.soldout .bDetails .tTitle,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a.soldout .bDetails .tTitle,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article.soldout .bDetails .tTitle,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a.soldout .bDetails .tTitle,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article.soldout .bDetails .tTitle,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a.soldout .bDetails .tTitle {
    color: var(--colorGray40)
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article.soldout .bDetails .bPointRemain .bPoint,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a.soldout .bDetails .bPointRemain .bPoint,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article.soldout .bDetails .bPointRemain .bPoint,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a.soldout .bDetails .bPointRemain .bPoint,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article.soldout .bDetails .bPointRemain .bPoint,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a.soldout .bDetails .bPointRemain .bPoint {
    background-color: var(--colorGray40)
}

div[id^=pageReward][id*=-All] #pContent .bGroupItem article.soldout .bDetails .bPointRemain .tRemaining,
div[id^=pageReward][id*=-All] #pContent .bGroupItem a.soldout .bDetails .bPointRemain .tRemaining,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article.soldout .bDetails .bPointRemain .tRemaining,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a.soldout .bDetails .bPointRemain .tRemaining,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem article.soldout .bDetails .bPointRemain .tRemaining,
div[id^=pageCharacter][id*=-All] #pContent .bGroupItem a.soldout .bDetails .bPointRemain .tRemaining {
    color: var(--colorGray40)
}

div[id^=pageReward][id*=-All] #pContent .bPagination nav,
div[id^=pageLuckydraw][id*=-All] #pContent .bPagination nav,
div[id^=pageCharacter][id*=-All] #pContent .bPagination nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 0;
    align-items: center;
    width: 100%;
    padding-top: 16px;
    border-top: 1px solid var(--colorGray60)
}

div[id^=pageReward][id*=-All] #pContent .bPagination nav p,
div[id^=pageLuckydraw][id*=-All] #pContent .bPagination nav p,
div[id^=pageCharacter][id*=-All] #pContent .bPagination nav p {
    justify-self: center;
    font-size: .875rem;
    line-height: 1em
}

div[id^=pageReward][id*=-All] #pContent .bPagination nav a,
div[id^=pageLuckydraw][id*=-All] #pContent .bPagination nav a,
div[id^=pageCharacter][id*=-All] #pContent .bPagination nav a {
    display: block;
    cursor: pointer;
    width: 36px;
    height: 36px;
    background: center center no-repeat;
    background-size: 100%
}

div[id^=pageReward][id*=-All] #pContent .bPagination nav a.btnPrev,
div[id^=pageLuckydraw][id*=-All] #pContent .bPagination nav a.btnPrev,
div[id^=pageCharacter][id*=-All] #pContent .bPagination nav a.btnPrev {
    background-image: url(../img/ui/pagiantion/ico-arrowL.svg)
}

div[id^=pageReward][id*=-All] #pContent .bPagination nav a.btnNext,
div[id^=pageLuckydraw][id*=-All] #pContent .bPagination nav a.btnNext,
div[id^=pageCharacter][id*=-All] #pContent .bPagination nav a.btnNext {
    background-image: url(../img/ui/pagiantion/ico-arrowR.svg);
    justify-self: flex-end
}

div[id^=pageReward][id*=-All] #pComingSoon,
div[id^=pageLuckydraw][id*=-All] #pComingSoon,
div[id^=pageCharacter][id*=-All] #pComingSoon {
    margin-inline: auto;
    width: calc(100% - 48px);
    padding: 20px 0 60px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    font-size: 1.25rem;
    line-height: 1em
}

@media(min-width: 768px) {

    div[id^=pageReward][id*=-All] #pComingSoon,
    div[id^=pageLuckydraw][id*=-All] #pComingSoon,
    div[id^=pageCharacter][id*=-All] #pComingSoon {
        width: 90%
    }
}

@media(min-width: 1024px) {

    div[id^=pageReward][id*=-All] #pComingSoon,
    div[id^=pageLuckydraw][id*=-All] #pComingSoon,
    div[id^=pageCharacter][id*=-All] #pComingSoon {
        max-width: 1280px
    }
}

div[id^=pageReward][id*=-Details],
div[id^=pageLuckydraw][id*=-Details],
div[id^=pageCharacter][id*=-Details] {
    background-color: var(--colorGreenL)
}

div[id^=pageReward][id*=-Details] #pContent,
div[id^=pageLuckydraw][id*=-Details] #pContent,
div[id^=pageCharacter][id*=-Details] #pContent {
    margin-inline: auto;
    width: calc(100% - 48px);
    padding: 24px 0 120px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

@media(min-width: 768px) {

    div[id^=pageReward][id*=-Details] #pContent,
    div[id^=pageLuckydraw][id*=-Details] #pContent,
    div[id^=pageCharacter][id*=-Details] #pContent {
        width: 90%
    }
}

@media(min-width: 1024px) {

    div[id^=pageReward][id*=-Details] #pContent,
    div[id^=pageLuckydraw][id*=-Details] #pContent,
    div[id^=pageCharacter][id*=-Details] #pContent {
        max-width: 1280px
    }
}

div[id^=pageReward][id*=-Details] #pContent .bCard,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCard,
div[id^=pageCharacter][id*=-Details] #pContent .bCard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--colorGray100);
    overflow: hidden;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 20px 16px
}

div[id^=pageReward][id*=-Details] #pContent .bTitle,
div[id^=pageLuckydraw][id*=-Details] #pContent .bTitle,
div[id^=pageCharacter][id*=-Details] #pContent .bTitle {
    text-align: center
}

div[id^=pageReward][id*=-Details] #pContent .bTitle h2,
div[id^=pageLuckydraw][id*=-Details] #pContent .bTitle h2,
div[id^=pageCharacter][id*=-Details] #pContent .bTitle h2 {
    font-size: 1.25rem;
    line-height: 1em;
    margin-bottom: 8px
}

div[id^=pageReward][id*=-Details] #pContent .bTitle p,
div[id^=pageLuckydraw][id*=-Details] #pContent .bTitle p,
div[id^=pageCharacter][id*=-Details] #pContent .bTitle p {
    color: var(--colorGray20)
}

div[id^=pageReward][id*=-Details] #pContent .bPointMain,
div[id^=pageLuckydraw][id*=-Details] #pContent .bPointMain,
div[id^=pageCharacter][id*=-Details] #pContent .bPointMain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border-top: 1px solid var(--colorGray60);
    border-bottom: 1px solid var(--colorGray60);
    padding: 20px 0
}

div[id^=pageReward][id*=-Details] #pContent .bPointMain .bPoint,
div[id^=pageLuckydraw][id*=-Details] #pContent .bPointMain .bPoint,
div[id^=pageCharacter][id*=-Details] #pContent .bPointMain .bPoint {
    display: flex;
    flex-direction: column;
    align-items: center
}

div[id^=pageReward][id*=-Details] #pContent .bPointMain .bPoint span,
div[id^=pageLuckydraw][id*=-Details] #pContent .bPointMain .bPoint span,
div[id^=pageCharacter][id*=-Details] #pContent .bPointMain .bPoint span {
    font-size: .875rem;
    line-height: 1em;
    color: var(--colorGray20);
    margin-bottom: 2px
}

div[id^=pageReward][id*=-Details] #pContent .bPointMain .bPoint p,
div[id^=pageLuckydraw][id*=-Details] #pContent .bPointMain .bPoint p,
div[id^=pageCharacter][id*=-Details] #pContent .bPointMain .bPoint p {
    background-color: var(--colorGreenL);
    overflow: hidden;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    overflow: inherit;
    padding: 0 12px;
    font-size: 1.5rem;
    line-height: 1em;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorGray10);
    position: relative;
    gap: 5px;
    width: fit-content;
    min-width: 110px
}

div[id^=pageReward][id*=-Details] #pContent .bPointMain .bPoint p:after,
div[id^=pageLuckydraw][id*=-Details] #pContent .bPointMain .bPoint p:after,
div[id^=pageCharacter][id*=-Details] #pContent .bPointMain .bPoint p:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='white' stroke-width='3' stroke-dasharray='5%2c 10' stroke-dashoffset='24' stroke-linecap='square'/%3e%3c/svg%3e");
    overflow: hidden;
    border-radius: 48px;
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    -ms-border-radius: 48px;
    -o-border-radius: 48px
}

div[id^=pageReward][id*=-Details] #pContent .bPointMain .bPoint p:before,
div[id^=pageLuckydraw][id*=-Details] #pContent .bPointMain .bPoint p:before,
div[id^=pageCharacter][id*=-Details] #pContent .bPointMain .bPoint p:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../img/ci/ico-coin.svg) center center no-repeat;
    background-size: 100%
}

div[id^=pageReward][id*=-Details] #pContent .bPointMain .bQuata,
div[id^=pageLuckydraw][id*=-Details] #pContent .bPointMain .bQuata,
div[id^=pageCharacter][id*=-Details] #pContent .bPointMain .bQuata {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

div[id^=pageReward][id*=-Details] #pContent .bPointMain .bQuata .bRemaining p,
div[id^=pageLuckydraw][id*=-Details] #pContent .bPointMain .bQuata .bRemaining p,
div[id^=pageCharacter][id*=-Details] #pContent .bPointMain .bQuata .bRemaining p {
    display: flex;
    align-items: flex-end;
    color: var(--colorGray30);
    font-size: .875rem;
    line-height: 1em;
    gap: 4px;
    margin-bottom: 8px
}

div[id^=pageReward][id*=-Details] #pContent .bPointMain .bQuata .bRemaining p span,
div[id^=pageLuckydraw][id*=-Details] #pContent .bPointMain .bQuata .bRemaining p span,
div[id^=pageCharacter][id*=-Details] #pContent .bPointMain .bQuata .bRemaining p span {
    font-weight: bold;
    color: var(--colorGray10);
    font-size: 1rem;
    line-height: 1em
}

div[id^=pageReward][id*=-Details] #pContent .bPointMain .bQuata .bRemaining .bBar,
div[id^=pageLuckydraw][id*=-Details] #pContent .bPointMain .bQuata .bRemaining .bBar,
div[id^=pageCharacter][id*=-Details] #pContent .bPointMain .bQuata .bRemaining .bBar {
    width: 100px;
    height: 8px;
    background-color: var(--colorGray40);
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    position: relative
}

div[id^=pageReward][id*=-Details] #pContent .bPointMain .bQuata .bRemaining .bBar span,
div[id^=pageLuckydraw][id*=-Details] #pContent .bPointMain .bQuata .bRemaining .bBar span,
div[id^=pageCharacter][id*=-Details] #pContent .bPointMain .bQuata .bRemaining .bBar span {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    background: linear-gradient(270deg, #8fc31f -4.39%, #1bcd5f -4.38%, #76f8a7 100%);
    height: 100%;
    width: 100%
}

div[id^=pageReward][id*=-Details] #pContent .bPointMain .bQuata .bDate,
div[id^=pageLuckydraw][id*=-Details] #pContent .bPointMain .bQuata .bDate,
div[id^=pageCharacter][id*=-Details] #pContent .bPointMain .bQuata .bDate {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--colorGray30);
    font-size: .875rem;
    line-height: 1em;
    gap: 4px
}

div[id^=pageReward][id*=-Details] #pContent .bPointMain .bQuata .bDate span,
div[id^=pageLuckydraw][id*=-Details] #pContent .bPointMain .bQuata .bDate span,
div[id^=pageCharacter][id*=-Details] #pContent .bPointMain .bQuata .bDate span {
    font-weight: bold;
    color: var(--colorGray10);
    font-size: 1rem;
    line-height: 1em
}

div[id^=pageReward][id*=-Details] #pContent .bProductImg .bPic,
div[id^=pageLuckydraw][id*=-Details] #pContent .bProductImg .bPic,
div[id^=pageCharacter][id*=-Details] #pContent .bProductImg .bPic {
    display: flex;
    justify-content: center;
    margin-bottom: 24px
}

div[id^=pageReward][id*=-Details] #pContent .bProductImg .bPic img,
div[id^=pageLuckydraw][id*=-Details] #pContent .bProductImg .bPic img,
div[id^=pageCharacter][id*=-Details] #pContent .bProductImg .bPic img {
    display: block;
    max-width: 200px;
    height: auto;
    overflow: hidden;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px
}

div[id^=pageReward][id*=-Details] #pContent .bProductImg .bTag,
div[id^=pageLuckydraw][id*=-Details] #pContent .bProductImg .bTag,
div[id^=pageCharacter][id*=-Details] #pContent .bProductImg .bTag {
    background-color: var(--colorPrimary);
    color: var(--colorGray100);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    height: 36px;
    padding: 0 20px;
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    margin-inline: auto
}

div[id^=pageReward][id*=-Details] #pContent .bProductImg .bTag:before,
div[id^=pageLuckydraw][id*=-Details] #pContent .bProductImg .bTag:before,
div[id^=pageCharacter][id*=-Details] #pContent .bProductImg .bTag:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url(../img/ci/ico-car.svg) center center no-repeat
}

div[id^=pageReward][id*=-Details] #pContent .bCondition,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition {
    border-top: 1px solid var(--colorGray60);
    padding-top: 20px
}

div[id^=pageReward][id*=-Details] #pContent .bCondition>h3,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition>h3,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition>h3 {
    font-size: 1rem;
    line-height: 1em;
    text-align: center;
    font-weight: bold;
    margin-bottom: 16px
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText *,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText *,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText * {
    line-height: auto;
    margin-bottom: 16px;
    color: var(--colorGray20)
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText *:last-child,
div[id^=pageReward][id*=-Details] #pContent .bCondition .bText * *>*,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText *:last-child,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText * *>*,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText *:last-child,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText * *>* {
    margin-bottom: 0
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText h1,
div[id^=pageReward][id*=-Details] #pContent .bCondition .bText h2,
div[id^=pageReward][id*=-Details] #pContent .bCondition .bText h3,
div[id^=pageReward][id*=-Details] #pContent .bCondition .bText h4,
div[id^=pageReward][id*=-Details] #pContent .bCondition .bText h5,
div[id^=pageReward][id*=-Details] #pContent .bCondition .bText h6,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText h1,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText h2,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText h3,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText h4,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText h5,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText h6,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText h1,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText h2,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText h3,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText h4,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText h5,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText h6 {
    margin-bottom: 16px;
    color: var(--colorBlack)
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText img,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText img,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText span,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText span,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText span {
    color: var(--colorPrimary)
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText a,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText a,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText a {
    word-break: break-all;
    color: var(--colorPrimary);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText a:hover,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText a:hover,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText a:hover {
    text-decoration: underline;
    color: var(--colorSecond)
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText blockquote,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText blockquote,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText blockquote {
    color: var(--colorGray10);
    background: #f9f9f9;
    border-left: 10px solid var(--colorSecond);
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "“" "”" "‘" "’"
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText blockquote:before,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText blockquote:before,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText blockquote:before {
    color: var(--colorPrimary);
    content: open-quote;
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -0.4em
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText blockquote p,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText blockquote p,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText blockquote p {
    display: inline
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText hr,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText hr,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText hr {
    width: 100%;
    height: 1px;
    background-color: var(--colorGray70)
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText table,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText table,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText table {
    width: 100%
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText table td,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText table td,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText table td {
    padding: 6px 6px
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText dl,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText dl,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText dl {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText dl dt,
div[id^=pageReward][id*=-Details] #pContent .bCondition .bText dl dd,
div[id^=pageReward][id*=-Details] #pContent .bCondition .bText dl dt>*,
div[id^=pageReward][id*=-Details] #pContent .bCondition .bText dl dd>*,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText dl dt,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText dl dd,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText dl dt>*,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText dl dd>*,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText dl dt,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText dl dd,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText dl dt>*,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText dl dd>* {
    margin-bottom: 18px
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText dl dt:last-child,
div[id^=pageReward][id*=-Details] #pContent .bCondition .bText dl dd:last-child,
div[id^=pageReward][id*=-Details] #pContent .bCondition .bText dl dt>*:last-child,
div[id^=pageReward][id*=-Details] #pContent .bCondition .bText dl dd>*:last-child,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText dl dt:last-child,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText dl dd:last-child,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText dl dt>*:last-child,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText dl dd>*:last-child,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText dl dt:last-child,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText dl dd:last-child,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText dl dt>*:last-child,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText dl dd>*:last-child {
    margin-bottom: 0
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText ul li,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText ul li,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText ul li {
    list-style: disc;
    margin-bottom: 0
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText ul li::marker,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText ul li::marker,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText ul li::marker {
    font-size: .7em
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText b,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText b,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText b {
    font-weight: 500
}

div[id^=pageReward][id*=-Details] #pContent .bCondition .bText strong,
div[id^=pageLuckydraw][id*=-Details] #pContent .bCondition .bText strong,
div[id^=pageCharacter][id*=-Details] #pContent .bCondition .bText strong {
    font-weight: bold
}

div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px
}

div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin-bottom: 8px
}

div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button,
div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a {
    width: 32px;
    height: 32px;
    background-color: #e0f1da;
    border: none;
    overflow: hidden;
    border-radius: 32px;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    -ms-border-radius: 32px;
    -o-border-radius: 32px;
    position: relative
}

div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:before,
div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:after,
div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:before,
div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:after,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:before,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:after,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:before,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:after,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:before,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:after,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:before,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:after {
    content: "";
    display: block;
    overflow: hidden;
    border-radius: 2.5px;
    -webkit-border-radius: 2.5px;
    -moz-border-radius: 2.5px;
    -ms-border-radius: 2.5px;
    -o-border-radius: 2.5px;
    width: 15px;
    height: 2.5px;
    background-color: #49a22d;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%)
}

div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:after,
div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:after,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:after,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:after,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:after,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:after {
    transform: rotate(90deg) translate(-7%, 280%);
    -webkit-transform: rotate(90deg) translate(-7%, 280%);
    -moz-transform: rotate(90deg) translate(-7%, 280%);
    -ms-transform: rotate(90deg) translate(-7%, 280%);
    -o-transform: rotate(90deg) translate(-7%, 280%)
}

div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button.disabled,
div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:disabled,
div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a.disabled,
div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:disabled,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button.disabled,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:disabled,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a.disabled,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:disabled,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button.disabled,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:disabled,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a.disabled,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:disabled {
    background-color: #f3f9ec
}

div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button.disabled:before,
div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button.disabled:after,
div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:disabled:before,
div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:disabled:after,
div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a.disabled:before,
div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a.disabled:after,
div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:disabled:before,
div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:disabled:after,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button.disabled:before,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button.disabled:after,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:disabled:before,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:disabled:after,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a.disabled:before,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a.disabled:after,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:disabled:before,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:disabled:after,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button.disabled:before,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button.disabled:after,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:disabled:before,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button:disabled:after,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a.disabled:before,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a.disabled:after,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:disabled:before,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a:disabled:after {
    background-color: #a9b1b6
}

div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button.btnMinus:after,
div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a.btnMinus:after,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button.btnMinus:after,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a.btnMinus:after,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl button.btnMinus:after,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl a.btnMinus:after {
    display: none
}

div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl span,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl span,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount .amountControl span {
    font-size: 1.5rem;
    line-height: 1em;
    font-weight: bold
}

div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bAmount p,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bAmount p,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bAmount p {
    color: var(--colorPrimary);
    text-align: center
}

div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bBtn,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bBtn,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bBtn {
    display: flex;
    flex-direction: column;
    gap: 8px
}

div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bBtn .bForm .control-group,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bBtn .bForm .control-group,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bBtn .bForm .control-group {
    align-items: center
}

div[id^=pageReward][id*=-Details] #pContent .bBtnPage>.bBtn .bForm .control-group .control,
div[id^=pageLuckydraw][id*=-Details] #pContent .bBtnPage>.bBtn .bForm .control-group .control,
div[id^=pageCharacter][id*=-Details] #pContent .bBtnPage>.bBtn .bForm .control-group .control {
    padding-top: 0;
    padding-bottom: 0
}

div[id^=pageReward][id*=-Details] #pBtnPage,
div[id^=pageLuckydraw][id*=-Details] #pBtnPage,
div[id^=pageCharacter][id*=-Details] #pBtnPage {
    background-color: #f9f9ee;
    width: 100%;
    max-width: 500px;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 16px 24px
}

div[id^=pageReward][id*=-Details] #pBtnPage .bBtn,
div[id^=pageLuckydraw][id*=-Details] #pBtnPage .bBtn,
div[id^=pageCharacter][id*=-Details] #pBtnPage .bBtn {
    display: flex;
    flex-direction: column;
    gap: 8px
}

div[id^=pageReward][id*=-Details] #pBtnPage .bBtn .bForm .control-group,
div[id^=pageLuckydraw][id*=-Details] #pBtnPage .bBtn .bForm .control-group,
div[id^=pageCharacter][id*=-Details] #pBtnPage .bBtn .bForm .control-group {
    align-items: center
}

div[id^=pageReward][id*=-Details] #pBtnPage .bBtn .bForm .control-group .control,
div[id^=pageLuckydraw][id*=-Details] #pBtnPage .bBtn .bForm .control-group .control,
div[id^=pageCharacter][id*=-Details] #pBtnPage .bBtn .bForm .control-group .control {
    padding-top: 0;
    padding-bottom: 0
}

div[id^=pageReward][id*=-Details] #pBtnPage p.tError,
div[id^=pageReward][id*=-Details] .bBtnPage p.tError,
div[id^=pageLuckydraw][id*=-Details] #pBtnPage p.tError,
div[id^=pageLuckydraw][id*=-Details] .bBtnPage p.tError,
div[id^=pageCharacter][id*=-Details] #pBtnPage p.tError,
div[id^=pageCharacter][id*=-Details] .bBtnPage p.tError {
    font-size: 1rem;
    line-height: 1em;
    color: #ff2b1e;
    text-align: center
}

div[id^=pageReward][id*=-Complete] #pTitlePage .bTitlePage,
div[id^=pageLuckydraw][id*=-Complete] #pTitlePage .bTitlePage,
div[id^=pageCharacter][id*=-Complete] #pTitlePage .bTitlePage {
    display: block;
    text-align: center
}

div[id^=pageReward][id*=-Complete] section#pAnnouncement,
div[id^=pageLuckydraw][id*=-Complete] section#pAnnouncement,
div[id^=pageCharacter][id*=-Complete] section#pAnnouncement {
    padding-bottom: 32px
}

div[id^=pageReward][id*=-Complete] section#pAnnouncement .bAnnouncement,
div[id^=pageLuckydraw][id*=-Complete] section#pAnnouncement .bAnnouncement,
div[id^=pageCharacter][id*=-Complete] section#pAnnouncement .bAnnouncement {
    margin-inline: auto;
    width: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px
}

@media(min-width: 768px) {

    div[id^=pageReward][id*=-Complete] section#pAnnouncement .bAnnouncement,
    div[id^=pageLuckydraw][id*=-Complete] section#pAnnouncement .bAnnouncement,
    div[id^=pageCharacter][id*=-Complete] section#pAnnouncement .bAnnouncement {
        width: 90%
    }
}

@media(min-width: 1024px) {

    div[id^=pageReward][id*=-Complete] section#pAnnouncement .bAnnouncement,
    div[id^=pageLuckydraw][id*=-Complete] section#pAnnouncement .bAnnouncement,
    div[id^=pageCharacter][id*=-Complete] section#pAnnouncement .bAnnouncement {
        max-width: 1280px
    }
}

div[id^=pageReward][id*=-Complete] section#pAnnouncement .bAnnouncement .bPic i,
div[id^=pageLuckydraw][id*=-Complete] section#pAnnouncement .bAnnouncement .bPic i,
div[id^=pageCharacter][id*=-Complete] section#pAnnouncement .bAnnouncement .bPic i {
    display: block;
    width: 68px;
    height: 68px;
    background: url(../img/ci/ico-check.svg) center center no-repeat
}

div[id^=pageReward][id*=-Complete] section#pAnnouncement .bAnnouncement .bDetails,
div[id^=pageLuckydraw][id*=-Complete] section#pAnnouncement .bAnnouncement .bDetails,
div[id^=pageCharacter][id*=-Complete] section#pAnnouncement .bAnnouncement .bDetails {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    color: var(--colorGreenD)
}

div[id^=pageReward][id*=-Complete] section#pAnnouncement .bAnnouncement .bDetails h3,
div[id^=pageLuckydraw][id*=-Complete] section#pAnnouncement .bAnnouncement .bDetails h3,
div[id^=pageCharacter][id*=-Complete] section#pAnnouncement .bAnnouncement .bDetails h3 {
    font-size: 1.25rem;
    line-height: 1em;
    font-weight: bold
}

div[id^=pageReward][id*=-Complete] section#pAnnouncement .bAnnouncement .bDetails span,
div[id^=pageLuckydraw][id*=-Complete] section#pAnnouncement .bAnnouncement .bDetails span,
div[id^=pageCharacter][id*=-Complete] section#pAnnouncement .bAnnouncement .bDetails span {
    color: var(--colorPrimary)
}

div[id^=pageReward][id*=-Complete] section#pContent,
div[id^=pageLuckydraw][id*=-Complete] section#pContent,
div[id^=pageCharacter][id*=-Complete] section#pContent {
    padding: 20px 0 80px
}

div[id^=pageReward][id*=-Complete] section#pContent .bContent,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bContent,
div[id^=pageCharacter][id*=-Complete] section#pContent .bContent {
    margin-inline: auto;
    width: calc(100% - 48px)
}

@media(min-width: 768px) {

    div[id^=pageReward][id*=-Complete] section#pContent .bContent,
    div[id^=pageLuckydraw][id*=-Complete] section#pContent .bContent,
    div[id^=pageCharacter][id*=-Complete] section#pContent .bContent {
        width: 90%
    }
}

@media(min-width: 1024px) {

    div[id^=pageReward][id*=-Complete] section#pContent .bContent,
    div[id^=pageLuckydraw][id*=-Complete] section#pContent .bContent,
    div[id^=pageCharacter][id*=-Complete] section#pContent .bContent {
        max-width: 1280px
    }
}

div[id^=pageReward][id*=-Complete] section#pContent .bPic,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bPic,
div[id^=pageCharacter][id*=-Complete] section#pContent .bPic {
    display: flex;
    justify-content: center;
    margin-bottom: 20px
}

div[id^=pageReward][id*=-Complete] section#pContent .bPic img,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bPic img,
div[id^=pageCharacter][id*=-Complete] section#pContent .bPic img {
    display: block;
    max-width: 200px;
    height: auto;
    overflow: hidden;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px
}

div[id^=pageReward][id*=-Complete] section#pContent .bDetails,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bDetails,
div[id^=pageCharacter][id*=-Complete] section#pContent .bDetails {
    margin-bottom: 16px
}

div[id^=pageReward][id*=-Complete] section#pContent .bDetails h3,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bDetails h3,
div[id^=pageCharacter][id*=-Complete] section#pContent .bDetails h3 {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--colorGray10);
    margin-bottom: 16px
}

div[id^=pageReward][id*=-Complete] section#pContent .bDetails .bRow,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bDetails .bRow,
div[id^=pageCharacter][id*=-Complete] section#pContent .bDetails .bRow {
    display: flex;
    justify-content: space-between
}

div[id^=pageReward][id*=-Complete] section#pContent .bDetails .bRow:first-child,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bDetails .bRow:first-child,
div[id^=pageCharacter][id*=-Complete] section#pContent .bDetails .bRow:first-child {
    margin-bottom: 16px
}

div[id^=pageReward][id*=-Complete] section#pContent .bDetails .bRow p,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bDetails .bRow p,
div[id^=pageCharacter][id*=-Complete] section#pContent .bDetails .bRow p {
    font-weight: bold
}

div[id^=pageReward][id*=-Complete] section#pContent .bDetails .bRow p span,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bDetails .bRow p span,
div[id^=pageCharacter][id*=-Complete] section#pContent .bDetails .bRow p span {
    font-weight: normal;
    display: block;
    color: var(--colorGray20);
    font-size: .875rem;
    line-height: 1em;
    margin-bottom: 4px
}

div[id^=pageReward][id*=-Complete] section#pContent .bDetails .bRow p:last-child,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bDetails .bRow p:last-child,
div[id^=pageCharacter][id*=-Complete] section#pContent .bDetails .bRow p:last-child {
    text-align: right
}

div[id^=pageReward][id*=-Complete] section#pContent .bDetails .bRow p:first-child,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bDetails .bRow p:first-child,
div[id^=pageCharacter][id*=-Complete] section#pContent .bDetails .bRow p:first-child {
    text-align: left
}

div[id^=pageReward][id*=-Complete] section#pContent .bAddressMain,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bAddressMain,
div[id^=pageCharacter][id*=-Complete] section#pContent .bAddressMain {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--colorGray100);
    overflow: hidden;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 20px 16px;
    margin-bottom: 40px
}

div[id^=pageReward][id*=-Complete] section#pContent .bAddressMain .bAddress .bRow,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bAddressMain .bAddress .bRow,
div[id^=pageCharacter][id*=-Complete] section#pContent .bAddressMain .bAddress .bRow {
    display: flex;
    justify-content: space-between
}

div[id^=pageReward][id*=-Complete] section#pContent .bAddressMain .bAddress .bRow:first-child,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bAddressMain .bAddress .bRow:first-child,
div[id^=pageCharacter][id*=-Complete] section#pContent .bAddressMain .bAddress .bRow:first-child {
    margin-bottom: 16px
}

div[id^=pageReward][id*=-Complete] section#pContent .bAddressMain .bAddress .bRow p span,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bAddressMain .bAddress .bRow p span,
div[id^=pageCharacter][id*=-Complete] section#pContent .bAddressMain .bAddress .bRow p span {
    display: block;
    color: var(--colorGray30);
    font-size: .875rem;
    line-height: 1em;
    margin-bottom: 4px
}

div[id^=pageReward][id*=-Complete] section#pContent .bAddressMain .bAddress .bRow p:last-child,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bAddressMain .bAddress .bRow p:last-child,
div[id^=pageCharacter][id*=-Complete] section#pContent .bAddressMain .bAddress .bRow p:last-child {
    text-align: right
}

div[id^=pageReward][id*=-Complete] section#pContent .bAddressMain .bAddress .bRow p:first-child,
div[id^=pageLuckydraw][id*=-Complete] section#pContent .bAddressMain .bAddress .bRow p:first-child,
div[id^=pageCharacter][id*=-Complete] section#pContent .bAddressMain .bAddress .bRow p:first-child {
    text-align: left
}

div[id^=pageReward][id*=-Complete] section#pBtn,
div[id^=pageLuckydraw][id*=-Complete] section#pBtn,
div[id^=pageCharacter][id*=-Complete] section#pBtn {
    padding: 24px 0;
    border-radius: 0 0 12px 12px;
    -webkit-border-radius: 0 0 12px 12px;
    -moz-border-radius: 0 0 12px 12px;
    -ms-border-radius: 0 0 12px 12px;
    -o-border-radius: 0 0 12px 12px
}

div[id^=pageReward][id*=-Complete] section#pBtn .bBtn,
div[id^=pageLuckydraw][id*=-Complete] section#pBtn .bBtn,
div[id^=pageCharacter][id*=-Complete] section#pBtn .bBtn {
    margin-inline: auto;
    width: calc(100% - 48px)
}

@media(min-width: 768px) {

    div[id^=pageReward][id*=-Complete] section#pBtn .bBtn,
    div[id^=pageLuckydraw][id*=-Complete] section#pBtn .bBtn,
    div[id^=pageCharacter][id*=-Complete] section#pBtn .bBtn {
        width: 90%
    }
}

@media(min-width: 1024px) {

    div[id^=pageReward][id*=-Complete] section#pBtn .bBtn,
    div[id^=pageLuckydraw][id*=-Complete] section#pBtn .bBtn,
    div[id^=pageCharacter][id*=-Complete] section#pBtn .bBtn {
        max-width: 1280px
    }
}

div[id^=pageReward][id*=-Complete] section#pBanner,
div[id^=pageLuckydraw][id*=-Complete] section#pBanner,
div[id^=pageCharacter][id*=-Complete] section#pBanner {
    margin-inline: auto;
    width: calc(100% - 48px);
    padding: 20px 0 60px
}

@media(min-width: 768px) {

    div[id^=pageReward][id*=-Complete] section#pBanner,
    div[id^=pageLuckydraw][id*=-Complete] section#pBanner,
    div[id^=pageCharacter][id*=-Complete] section#pBanner {
        width: 90%
    }
}

@media(min-width: 1024px) {

    div[id^=pageReward][id*=-Complete] section#pBanner,
    div[id^=pageLuckydraw][id*=-Complete] section#pBanner,
    div[id^=pageCharacter][id*=-Complete] section#pBanner {
        max-width: 1280px
    }
}

div[id^=pageReward][id*=-Complete] section#pBanner h3,
div[id^=pageLuckydraw][id*=-Complete] section#pBanner h3,
div[id^=pageCharacter][id*=-Complete] section#pBanner h3 {
    margin-bottom: 20px
}

div[id^=pageReward][id*=-Complete] section#pBanner .bBanner,
div[id^=pageLuckydraw][id*=-Complete] section#pBanner .bBanner,
div[id^=pageCharacter][id*=-Complete] section#pBanner .bBanner {
    display: flex;
    flex-direction: column;
    gap: 20px
}

div[id^=pageReward][id*=-Complete] section#pBanner .bBanner img,
div[id^=pageLuckydraw][id*=-Complete] section#pBanner .bBanner img,
div[id^=pageCharacter][id*=-Complete] section#pBanner .bBanner img {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px
}

div[id^=pageReward][id*=-Collection] .bMenu,
div[id^=pageLuckydraw][id*=-Collection] .bMenu,
div[id^=pageCharacter][id*=-Collection] .bMenu {
    background-color: #fff
}

div[id^=pageReward][id*=-Collection] .bMenu .bSubmenu,
div[id^=pageLuckydraw][id*=-Collection] .bMenu .bSubmenu,
div[id^=pageCharacter][id*=-Collection] .bMenu .bSubmenu {
    padding: 32px 0px;
    margin: 0px 25px;
    overflow-x: auto;
    background-color: #fff
}

div[id^=pageReward][id*=-Collection] .bMenu .bSubmenu nav,
div[id^=pageLuckydraw][id*=-Collection] .bMenu .bSubmenu nav,
div[id^=pageCharacter][id*=-Collection] .bMenu .bSubmenu nav {
    width: 120%;
    overflow-x: auto;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 8px
}

div[id^=pageReward][id*=-Collection] .bMenu .bSubmenu nav::-webkit-scrollbar,
div[id^=pageLuckydraw][id*=-Collection] .bMenu .bSubmenu nav::-webkit-scrollbar,
div[id^=pageCharacter][id*=-Collection] .bMenu .bSubmenu nav::-webkit-scrollbar {
    display: none
}

div[id^=pageReward][id*=-Collection] .bMenu .bSubmenu nav a,
div[id^=pageLuckydraw][id*=-Collection] .bMenu .bSubmenu nav a,
div[id^=pageCharacter][id*=-Collection] .bMenu .bSubmenu nav a {
    padding: 0 8px;
    border-bottom: 3px solid rgba(0, 0, 0, 0);
    text-wrap: nowrap
}

div[id^=pageReward][id*=-Collection] .bMenu .bSubmenu nav a.active,
div[id^=pageLuckydraw][id*=-Collection] .bMenu .bSubmenu nav a.active,
div[id^=pageCharacter][id*=-Collection] .bMenu .bSubmenu nav a.active {
    font-weight: bold;
    border-color: var(--colorPrimary)
}

div[id^=pageReward][id*=-Collection] #pContent,
div[id^=pageLuckydraw][id*=-Collection] #pContent,
div[id^=pageCharacter][id*=-Collection] #pContent {
    margin-inline: auto;
    width: calc(100% - 48px);
    width: 100%;
    padding: 0px 0 60px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media(min-width: 768px) {

    div[id^=pageReward][id*=-Collection] #pContent,
    div[id^=pageLuckydraw][id*=-Collection] #pContent,
    div[id^=pageCharacter][id*=-Collection] #pContent {
        width: 90%
    }
}

@media(min-width: 1024px) {

    div[id^=pageReward][id*=-Collection] #pContent,
    div[id^=pageLuckydraw][id*=-Collection] #pContent,
    div[id^=pageCharacter][id*=-Collection] #pContent {
        max-width: 1280px
    }
}

div[id^=pageReward][id*=-Collection] #pContent .bSubmenu,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bSubmenu,
div[id^=pageCharacter][id*=-Collection] #pContent .bSubmenu {
    padding: 32px 16px;
    background-color: #fff
}

div[id^=pageReward][id*=-Collection] #pContent .bSubmenu nav,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bSubmenu nav,
div[id^=pageCharacter][id*=-Collection] #pContent .bSubmenu nav {
    width: 100%;
    overflow-x: auto;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 8px
}

div[id^=pageReward][id*=-Collection] #pContent .bSubmenu nav::-webkit-scrollbar,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bSubmenu nav::-webkit-scrollbar,
div[id^=pageCharacter][id*=-Collection] #pContent .bSubmenu nav::-webkit-scrollbar {
    display: none
}

div[id^=pageReward][id*=-Collection] #pContent .bSubmenu nav a,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bSubmenu nav a,
div[id^=pageCharacter][id*=-Collection] #pContent .bSubmenu nav a {
    padding: 0 8px;
    border-bottom: 3px solid rgba(0, 0, 0, 0);
    text-wrap: nowrap
}

div[id^=pageReward][id*=-Collection] #pContent .bSubmenu nav a.active,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bSubmenu nav a.active,
div[id^=pageCharacter][id*=-Collection] #pContent .bSubmenu nav a.active {
    font-weight: bold;
    border-color: var(--colorPrimary)
}

div[id^=pageReward][id*=-Collection] #pContent .bContent,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent {
    padding: 0 24px 24px 24px
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .bTitle,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .bTitle,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .bTitle {
    border-bottom: 1px solid #dce4e9;
    padding-bottom: 20px;
    padding-top: 20px;
    margin-bottom: 20px
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .bTitle h2,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .bTitle h2,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .bTitle h2 {
    color: #5e434b
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .collect-success,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .collect-success,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .collect-success {
    position: relative
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .collect-success.redeem,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .collect-success.redeem,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .collect-success.redeem {
    background-image: url(../img/ci/phase2/character-collection/img-redeem-success.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding-top: 111.1%;
    margin-bottom: 20px
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .collect-success .btn,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .collect-success .btn,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .collect-success .btn {
    position: absolute;
    bottom: 20px;
    width: calc(100% - 40px);
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .collect-success h2,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .collect-success h2,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .collect-success h2 {
    color: var(--primary, #fdba4d);
    font-weight: 700;
    line-height: 100%
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .collect-success span,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .collect-success span,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .collect-success span {
    font-weight: 700
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .collect-success.out,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .collect-success.out,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .collect-success.out {
    background-image: url(../img/ci/phase2/character-collection/ico-no-redeem.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    padding-top: 62%;
    margin-bottom: 20px
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .collect-success.outstock,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .collect-success.outstock,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .collect-success.outstock {
    background-image: url(../img/ci/phase2/character-collection/img-redeem-timeout.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    padding-top: 54.2%;
    margin-bottom: 20px
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme {
    margin-bottom: 20px;
    position: relative
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.lucky a,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.lucky a,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.lucky a {
    width: calc(100% - 48px)
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.lucky a img,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.lucky a img,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.lucky a img {
    width: 100%
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme p,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme p,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme p {
    padding-bottom: 12px
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme p span,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme p span,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme p span {
    font-weight: 700
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker {
    display: flex;
    position: relative;
    justify-content: space-between;
    border-radius: 12px;
    background: var(--State-colour-subtle, #fff1db);
    padding: 15px 18px;
    aspect-ratio: 3/1;
    column-gap: 6px
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker .show-Sticker,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker .show-Sticker,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker .show-Sticker {
    display: flex;
    column-gap: 8px;
    width: 100%;
    flex: 3
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker .show-Sticker .bSticker img,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker .show-Sticker .bSticker img,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker .show-Sticker .bSticker img {
    height: 100%;
    width: 100%
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker .sumSticker,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker .sumSticker,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker .sumSticker {
    background-image: url(../img/ci/phase2/character-collection/ico-sum-stk.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    position: relative
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker .sumSticker p,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker .sumSticker p,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker .sumSticker p {
    position: absolute;
    text-align: center;
    padding-bottom: 0px;
    font-size: 8px
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker .sumSticker p span,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker .sumSticker p span,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme .bSumSticker .sumSticker p span {
    font-size: 12px
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="1"],
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="1"],
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="1"] {
    background: url(../img/ci/phase2/character-collection/img-bg-1.png);
    border: 2px solid var(--White, #fbfcfc);
    box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, .6), 1px 1px 0px 0px #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="2"],
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="2"],
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="2"] {
    background: url(../img/ci/phase2/character-collection/img-bg-2.png);
    border: 2px solid var(--White, #fbfcfc);
    box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, .6), 1px 1px 0px 0px #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="3"],
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="3"],
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="3"] {
    background: url(../img/ci/phase2/character-collection/img-bg-3.png);
    border: 2px solid var(--White, #fbfcfc);
    box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, .6), 1px 1px 0px 0px #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="4"],
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="4"],
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="4"] {
    background: url(../img/ci/phase2/character-collection/img-bg-4.png);
    border: 2px solid var(--White, #fbfcfc);
    box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, .6), 1px 1px 0px 0px #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="5"],
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="5"],
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="5"] {
    background: url(../img/ci/phase2/character-collection/img-bg-5.png);
    border: 2px solid var(--White, #fbfcfc);
    box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, .6), 1px 1px 0px 0px #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="6"],
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="6"],
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="6"] {
    background: url(../img/ci/phase2/character-collection/img-bg-6.png);
    border: 2px solid var(--White, #fbfcfc);
    box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, .6), 1px 1px 0px 0px #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="7"],
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="7"],
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme [data-theme="7"] {
    background: url(../img/ci/phase2/character-collection/img-bg-7.png);
    border: 2px solid var(--White, #fbfcfc);
    box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, .6), 1px 1px 0px 0px #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.complete .bSumSticker:after,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.complete .bSumSticker:after,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.complete .bSumSticker:after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    background-image: url(../img/ci/phase2/character-collection/ico-complete.svg);
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 130px);
    height: calc(100% - 20px);
    background-size: contain;
    z-index: 5
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="2"],
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="2"],
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="2"] {
    background: url(../img/ci/phase2/character-collection/img-bg-2-blur.png);
    border: 2px solid var(--White, #fbfcfc);
    box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, .6), 1px 1px 0px 0px #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="3"],
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="3"],
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="3"] {
    background: url(../img/ci/phase2/character-collection/img-bg-3-blur.png);
    border: 2px solid var(--White, #fbfcfc);
    box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, .6), 1px 1px 0px 0px #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="4"],
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="4"],
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="4"] {
    background: url(../img/ci/phase2/character-collection/img-bg-4-blur.png);
    border: 2px solid var(--White, #fbfcfc);
    box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, .6), 1px 1px 0px 0px #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="5"],
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="5"],
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="5"] {
    background: url(../img/ci/phase2/character-collection/img-bg-5-blur.png);
    border: 2px solid var(--White, #fbfcfc);
    box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, .6), 1px 1px 0px 0px #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="6"],
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="6"],
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="6"] {
    background: url(../img/ci/phase2/character-collection/img-bg-6-blur.png);
    border: 2px solid var(--White, #fbfcfc);
    box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, .6), 1px 1px 0px 0px #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="7"],
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="7"],
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon [data-theme="7"] {
    background: url(../img/ci/phase2/character-collection/img-bg-7-blur.png);
    border: 2px solid var(--White, #fbfcfc);
    box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, .6), 1px 1px 0px 0px #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .show-Sticker,
div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .sumSticker,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .show-Sticker,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .sumSticker,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .show-Sticker,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .sumSticker {
    opacity: .65
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="1"]:after,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="1"]:after,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="1"]:after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    background-image: url(../img/ci/phase2/character-collection/ico-comming-soon-1.svg);
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 130px);
    height: calc(100% - 20px);
    background-size: contain;
    z-index: 5;
    top: 25%
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="2"]:after,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="2"]:after,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="2"]:after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    background-image: url(../img/ci/phase2/character-collection/ico-comming-soon-2.svg);
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 130px);
    height: calc(100% - 20px);
    background-size: contain;
    z-index: 5;
    top: 25%
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="3"]:after,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="3"]:after,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="3"]:after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    background-image: url(../img/ci/phase2/character-collection/ico-comming-soon-3.svg);
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 130px);
    height: calc(100% - 20px);
    background-size: contain;
    z-index: 5;
    top: 25%
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="4"]:after,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="4"]:after,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="4"]:after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    background-image: url(../img/ci/phase2/character-collection/ico-comming-soon-4.svg);
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 130px);
    height: calc(100% - 20px);
    background-size: contain;
    z-index: 5;
    top: 25%
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="5"]:after,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="5"]:after,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="5"]:after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    background-image: url(../img/ci/phase2/character-collection/ico-comming-soon-5.svg);
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 130px);
    height: calc(100% - 20px);
    background-size: contain;
    z-index: 5;
    top: 25%
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="6"]:after,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="6"]:after,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="6"]:after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    background-image: url(../img/ci/phase2/character-collection/ico-comming-soon-6.svg);
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 130px);
    height: calc(100% - 20px);
    background-size: contain;
    z-index: 5;
    top: 25%
}

div[id^=pageReward][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="7"]:after,
div[id^=pageLuckydraw][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="7"]:after,
div[id^=pageCharacter][id*=-Collection] #pContent .bContent .sticker-theme.comming-soon .bSumSticker[data-theme="7"]:after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    background-image: url(../img/ci/phase2/character-collection/ico-comming-soon-7.svg);
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 130px);
    height: calc(100% - 20px);
    background-size: contain;
    z-index: 5;
    top: 25%
}

div[id^=pageReward][id*=-Character],
div[id^=pageLuckydraw][id*=-Character],
div[id^=pageCharacter][id*=-Character] {
    background-color: var(--colorGreenL)
}

div[id^=pageReward][id*=-Character] #pContent,
div[id^=pageLuckydraw][id*=-Character] #pContent,
div[id^=pageCharacter][id*=-Character] #pContent {
    margin-inline: auto;
    width: calc(100% - 48px);
    padding: 24px 0 120px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

@media(min-width: 768px) {

    div[id^=pageReward][id*=-Character] #pContent,
    div[id^=pageLuckydraw][id*=-Character] #pContent,
    div[id^=pageCharacter][id*=-Character] #pContent {
        width: 90%
    }
}

@media(min-width: 1024px) {

    div[id^=pageReward][id*=-Character] #pContent,
    div[id^=pageLuckydraw][id*=-Character] #pContent,
    div[id^=pageCharacter][id*=-Character] #pContent {
        max-width: 1280px
    }
}

div[id^=pageReward][id*=-Character] #pContent .bCard,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCard,
div[id^=pageCharacter][id*=-Character] #pContent .bCard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--colorGray100);
    overflow: hidden;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 20px 16px
}

div[id^=pageReward][id*=-Character] #pContent .bTitle,
div[id^=pageLuckydraw][id*=-Character] #pContent .bTitle,
div[id^=pageCharacter][id*=-Character] #pContent .bTitle {
    text-align: center
}

div[id^=pageReward][id*=-Character] #pContent .bTitle h2,
div[id^=pageLuckydraw][id*=-Character] #pContent .bTitle h2,
div[id^=pageCharacter][id*=-Character] #pContent .bTitle h2 {
    font-size: 1.25rem;
    line-height: 1em;
    margin-bottom: 8px
}

div[id^=pageReward][id*=-Character] #pContent .bTitle p,
div[id^=pageLuckydraw][id*=-Character] #pContent .bTitle p,
div[id^=pageCharacter][id*=-Character] #pContent .bTitle p {
    color: var(--colorGray20)
}

div[id^=pageReward][id*=-Character] #pContent .bPointMain,
div[id^=pageLuckydraw][id*=-Character] #pContent .bPointMain,
div[id^=pageCharacter][id*=-Character] #pContent .bPointMain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border-top: 1px solid var(--colorGray60);
    border-bottom: 1px solid var(--colorGray60);
    padding: 20px 0
}

div[id^=pageReward][id*=-Character] #pContent .bPointMain .bPoint,
div[id^=pageLuckydraw][id*=-Character] #pContent .bPointMain .bPoint,
div[id^=pageCharacter][id*=-Character] #pContent .bPointMain .bPoint {
    display: flex;
    flex-direction: column;
    align-items: center
}

div[id^=pageReward][id*=-Character] #pContent .bPointMain .bPoint span,
div[id^=pageLuckydraw][id*=-Character] #pContent .bPointMain .bPoint span,
div[id^=pageCharacter][id*=-Character] #pContent .bPointMain .bPoint span {
    font-size: .875rem;
    line-height: 1em;
    color: var(--colorGray20);
    margin-bottom: 2px
}

div[id^=pageReward][id*=-Character] #pContent .bPointMain .bPoint p,
div[id^=pageLuckydraw][id*=-Character] #pContent .bPointMain .bPoint p,
div[id^=pageCharacter][id*=-Character] #pContent .bPointMain .bPoint p {
    background-color: var(--colorGreenL);
    overflow: hidden;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    overflow: inherit;
    padding: 0 12px;
    font-size: 1.5rem;
    line-height: 1em;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorGray10);
    position: relative;
    gap: 5px;
    width: fit-content;
    min-width: 110px
}

div[id^=pageReward][id*=-Character] #pContent .bPointMain .bPoint p:after,
div[id^=pageLuckydraw][id*=-Character] #pContent .bPointMain .bPoint p:after,
div[id^=pageCharacter][id*=-Character] #pContent .bPointMain .bPoint p:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='white' stroke-width='3' stroke-dasharray='5%2c 10' stroke-dashoffset='24' stroke-linecap='square'/%3e%3c/svg%3e");
    overflow: hidden;
    border-radius: 48px;
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    -ms-border-radius: 48px;
    -o-border-radius: 48px
}

div[id^=pageReward][id*=-Character] #pContent .bPointMain .bPoint p:before,
div[id^=pageLuckydraw][id*=-Character] #pContent .bPointMain .bPoint p:before,
div[id^=pageCharacter][id*=-Character] #pContent .bPointMain .bPoint p:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../img/ci/ico-coin.svg) center center no-repeat;
    background-size: 100%
}

div[id^=pageReward][id*=-Character] #pContent .bPointMain .bQuata,
div[id^=pageLuckydraw][id*=-Character] #pContent .bPointMain .bQuata,
div[id^=pageCharacter][id*=-Character] #pContent .bPointMain .bQuata {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

div[id^=pageReward][id*=-Character] #pContent .bPointMain .bQuata .bRemaining p,
div[id^=pageLuckydraw][id*=-Character] #pContent .bPointMain .bQuata .bRemaining p,
div[id^=pageCharacter][id*=-Character] #pContent .bPointMain .bQuata .bRemaining p {
    display: flex;
    align-items: flex-end;
    color: var(--colorGray30);
    font-size: .875rem;
    line-height: 1em;
    gap: 4px;
    margin-bottom: 8px
}

div[id^=pageReward][id*=-Character] #pContent .bPointMain .bQuata .bRemaining p span,
div[id^=pageLuckydraw][id*=-Character] #pContent .bPointMain .bQuata .bRemaining p span,
div[id^=pageCharacter][id*=-Character] #pContent .bPointMain .bQuata .bRemaining p span {
    font-weight: bold;
    color: var(--colorGray10);
    font-size: 1rem;
    line-height: 1em
}

div[id^=pageReward][id*=-Character] #pContent .bPointMain .bQuata .bRemaining .bBar,
div[id^=pageLuckydraw][id*=-Character] #pContent .bPointMain .bQuata .bRemaining .bBar,
div[id^=pageCharacter][id*=-Character] #pContent .bPointMain .bQuata .bRemaining .bBar {
    width: 100px;
    height: 8px;
    background-color: var(--colorGray40);
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    position: relative
}

div[id^=pageReward][id*=-Character] #pContent .bPointMain .bQuata .bRemaining .bBar span,
div[id^=pageLuckydraw][id*=-Character] #pContent .bPointMain .bQuata .bRemaining .bBar span,
div[id^=pageCharacter][id*=-Character] #pContent .bPointMain .bQuata .bRemaining .bBar span {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    background: linear-gradient(270deg, #8fc31f -4.39%, #1bcd5f -4.38%, #76f8a7 100%);
    height: 100%;
    width: 100%
}

div[id^=pageReward][id*=-Character] #pContent .bPointMain .bQuata .bDate,
div[id^=pageLuckydraw][id*=-Character] #pContent .bPointMain .bQuata .bDate,
div[id^=pageCharacter][id*=-Character] #pContent .bPointMain .bQuata .bDate {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--colorGray30);
    font-size: .875rem;
    line-height: 1em;
    gap: 4px
}

div[id^=pageReward][id*=-Character] #pContent .bPointMain .bQuata .bDate span,
div[id^=pageLuckydraw][id*=-Character] #pContent .bPointMain .bQuata .bDate span,
div[id^=pageCharacter][id*=-Character] #pContent .bPointMain .bQuata .bDate span {
    font-weight: bold;
    color: var(--colorGray10);
    font-size: 1rem;
    line-height: 1em
}

div[id^=pageReward][id*=-Character] #pContent .bProductImg .bPic,
div[id^=pageLuckydraw][id*=-Character] #pContent .bProductImg .bPic,
div[id^=pageCharacter][id*=-Character] #pContent .bProductImg .bPic {
    display: flex;
    justify-content: center;
    margin-bottom: 24px
}

div[id^=pageReward][id*=-Character] #pContent .bProductImg .bPic img,
div[id^=pageLuckydraw][id*=-Character] #pContent .bProductImg .bPic img,
div[id^=pageCharacter][id*=-Character] #pContent .bProductImg .bPic img {
    display: block;
    max-width: 200px;
    height: auto;
    overflow: hidden;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px
}

div[id^=pageReward][id*=-Character] #pContent .bProductImg .bTag,
div[id^=pageLuckydraw][id*=-Character] #pContent .bProductImg .bTag,
div[id^=pageCharacter][id*=-Character] #pContent .bProductImg .bTag {
    background-color: var(--colorPrimary);
    color: var(--colorGray100);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    height: 36px;
    padding: 0 20px;
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    margin-inline: auto
}

div[id^=pageReward][id*=-Character] #pContent .bProductImg .bTag:before,
div[id^=pageLuckydraw][id*=-Character] #pContent .bProductImg .bTag:before,
div[id^=pageCharacter][id*=-Character] #pContent .bProductImg .bTag:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url(../img/ci/ico-car.svg) center center no-repeat
}

div[id^=pageReward][id*=-Character] #pContent .bCondition,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition {
    border-top: 1px solid var(--colorGray60);
    padding-top: 20px
}

div[id^=pageReward][id*=-Character] #pContent .bCondition>h3,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition>h3,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition>h3 {
    font-size: 1rem;
    line-height: 1em;
    text-align: center;
    font-weight: bold;
    margin-bottom: 16px
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText *,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText *,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText * {
    line-height: auto;
    margin-bottom: 16px;
    color: var(--colorGray20)
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText *:last-child,
div[id^=pageReward][id*=-Character] #pContent .bCondition .bText * *>*,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText *:last-child,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText * *>*,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText *:last-child,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText * *>* {
    margin-bottom: 0
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText h1,
div[id^=pageReward][id*=-Character] #pContent .bCondition .bText h2,
div[id^=pageReward][id*=-Character] #pContent .bCondition .bText h3,
div[id^=pageReward][id*=-Character] #pContent .bCondition .bText h4,
div[id^=pageReward][id*=-Character] #pContent .bCondition .bText h5,
div[id^=pageReward][id*=-Character] #pContent .bCondition .bText h6,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText h1,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText h2,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText h3,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText h4,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText h5,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText h6,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText h1,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText h2,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText h3,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText h4,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText h5,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText h6 {
    margin-bottom: 16px;
    color: var(--colorBlack)
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText img,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText img,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText span,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText span,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText span {
    color: var(--colorPrimary)
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText a,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText a,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText a {
    word-break: break-all;
    color: var(--colorPrimary);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText a:hover,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText a:hover,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText a:hover {
    text-decoration: underline;
    color: var(--colorSecond)
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText blockquote,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText blockquote,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText blockquote {
    color: var(--colorGray10);
    background: #f9f9f9;
    border-left: 10px solid var(--colorSecond);
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "“" "”" "‘" "’"
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText blockquote:before,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText blockquote:before,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText blockquote:before {
    color: var(--colorPrimary);
    content: open-quote;
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -0.4em
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText blockquote p,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText blockquote p,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText blockquote p {
    display: inline
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText hr,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText hr,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText hr {
    width: 100%;
    height: 1px;
    background-color: var(--colorGray70)
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText table,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText table,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText table {
    width: 100%
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText table td,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText table td,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText table td {
    padding: 6px 6px
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText dl,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText dl,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText dl {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText dl dt,
div[id^=pageReward][id*=-Character] #pContent .bCondition .bText dl dd,
div[id^=pageReward][id*=-Character] #pContent .bCondition .bText dl dt>*,
div[id^=pageReward][id*=-Character] #pContent .bCondition .bText dl dd>*,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText dl dt,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText dl dd,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText dl dt>*,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText dl dd>*,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText dl dt,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText dl dd,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText dl dt>*,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText dl dd>* {
    margin-bottom: 18px
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText dl dt:last-child,
div[id^=pageReward][id*=-Character] #pContent .bCondition .bText dl dd:last-child,
div[id^=pageReward][id*=-Character] #pContent .bCondition .bText dl dt>*:last-child,
div[id^=pageReward][id*=-Character] #pContent .bCondition .bText dl dd>*:last-child,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText dl dt:last-child,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText dl dd:last-child,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText dl dt>*:last-child,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText dl dd>*:last-child,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText dl dt:last-child,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText dl dd:last-child,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText dl dt>*:last-child,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText dl dd>*:last-child {
    margin-bottom: 0
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText ul li,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText ul li,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText ul li {
    list-style: disc;
    margin-bottom: 0
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText ul li::marker,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText ul li::marker,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText ul li::marker {
    font-size: .7em
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText b,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText b,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText b {
    font-weight: 500
}

div[id^=pageReward][id*=-Character] #pContent .bCondition .bText strong,
div[id^=pageLuckydraw][id*=-Character] #pContent .bCondition .bText strong,
div[id^=pageCharacter][id*=-Character] #pContent .bCondition .bText strong {
    font-weight: bold
}

div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px
}

div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin-bottom: 8px
}

div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button,
div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a {
    width: 32px;
    height: 32px;
    background-color: #e0f1da;
    border: none;
    overflow: hidden;
    border-radius: 32px;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    -ms-border-radius: 32px;
    -o-border-radius: 32px;
    position: relative
}

div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:before,
div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:after,
div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:before,
div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:after,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:before,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:after,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:before,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:after,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:before,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:after,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:before,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:after {
    content: "";
    display: block;
    overflow: hidden;
    border-radius: 2.5px;
    -webkit-border-radius: 2.5px;
    -moz-border-radius: 2.5px;
    -ms-border-radius: 2.5px;
    -o-border-radius: 2.5px;
    width: 15px;
    height: 2.5px;
    background-color: #49a22d;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%)
}

div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:after,
div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:after,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:after,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:after,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:after,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:after {
    transform: rotate(90deg) translate(-7%, 280%);
    -webkit-transform: rotate(90deg) translate(-7%, 280%);
    -moz-transform: rotate(90deg) translate(-7%, 280%);
    -ms-transform: rotate(90deg) translate(-7%, 280%);
    -o-transform: rotate(90deg) translate(-7%, 280%)
}

div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button.disabled,
div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:disabled,
div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a.disabled,
div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:disabled,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button.disabled,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:disabled,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a.disabled,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:disabled,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button.disabled,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:disabled,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a.disabled,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:disabled {
    background-color: #f3f9ec
}

div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button.disabled:before,
div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button.disabled:after,
div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:disabled:before,
div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:disabled:after,
div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a.disabled:before,
div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a.disabled:after,
div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:disabled:before,
div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:disabled:after,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button.disabled:before,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button.disabled:after,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:disabled:before,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:disabled:after,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a.disabled:before,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a.disabled:after,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:disabled:before,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:disabled:after,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button.disabled:before,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button.disabled:after,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:disabled:before,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button:disabled:after,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a.disabled:before,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a.disabled:after,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:disabled:before,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a:disabled:after {
    background-color: #a9b1b6
}

div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button.btnMinus:after,
div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a.btnMinus:after,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button.btnMinus:after,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a.btnMinus:after,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl button.btnMinus:after,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl a.btnMinus:after {
    display: none
}

div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl span,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl span,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount .amountControl span {
    font-size: 1.5rem;
    line-height: 1em;
    font-weight: bold
}

div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bAmount p,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bAmount p,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bAmount p {
    color: var(--colorPrimary);
    text-align: center
}

div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bBtn,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bBtn,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bBtn {
    display: flex;
    flex-direction: column;
    gap: 8px
}

div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bBtn .bForm .control-group,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bBtn .bForm .control-group,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bBtn .bForm .control-group {
    align-items: center
}

div[id^=pageReward][id*=-Character] #pContent .bBtnPage>.bBtn .bForm .control-group .control,
div[id^=pageLuckydraw][id*=-Character] #pContent .bBtnPage>.bBtn .bForm .control-group .control,
div[id^=pageCharacter][id*=-Character] #pContent .bBtnPage>.bBtn .bForm .control-group .control {
    padding-top: 0;
    padding-bottom: 0
}

div[id^=pageReward][id*=-Character] #pBtnPage,
div[id^=pageLuckydraw][id*=-Character] #pBtnPage,
div[id^=pageCharacter][id*=-Character] #pBtnPage {
    background-color: #f9f9ee;
    width: 100%;
    max-width: 500px;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 16px 24px
}

div[id^=pageReward][id*=-Character] #pBtnPage .bBtn,
div[id^=pageLuckydraw][id*=-Character] #pBtnPage .bBtn,
div[id^=pageCharacter][id*=-Character] #pBtnPage .bBtn {
    display: flex;
    flex-direction: column;
    gap: 8px
}

div[id^=pageReward][id*=-Character] #pBtnPage .bBtn .bForm .control-group,
div[id^=pageLuckydraw][id*=-Character] #pBtnPage .bBtn .bForm .control-group,
div[id^=pageCharacter][id*=-Character] #pBtnPage .bBtn .bForm .control-group {
    align-items: center
}

div[id^=pageReward][id*=-Character] #pBtnPage .bBtn .bForm .control-group .control,
div[id^=pageLuckydraw][id*=-Character] #pBtnPage .bBtn .bForm .control-group .control,
div[id^=pageCharacter][id*=-Character] #pBtnPage .bBtn .bForm .control-group .control {
    padding-top: 0;
    padding-bottom: 0
}

div[id^=pageReward][id*=-Character] #pBtnPage p.tError,
div[id^=pageReward][id*=-Character] .bBtnPage p.tError,
div[id^=pageLuckydraw][id*=-Character] #pBtnPage p.tError,
div[id^=pageLuckydraw][id*=-Character] .bBtnPage p.tError,
div[id^=pageCharacter][id*=-Character] #pBtnPage p.tError,
div[id^=pageCharacter][id*=-Character] .bBtnPage p.tError {
    font-size: 1rem;
    line-height: 1em;
    color: #ff2b1e;
    text-align: center
}

div[id^=pageReward][id*=-character-Details] #pContent .bCard {
    padding-top: 24px
}

div[id^=pageReward][id*=-character-Details] #pContent .bCard .bTitle {
    border-bottom: 1px solid #dce4e9
}

div[id^=pageReward][id*=-character-Details] #pContent .bCard .bTitle p {
    padding-bottom: 20px
}

div[id^=pageReward][id*=-Character-Confirm] #pContent .bDetailsMain.bCard {
    padding-top: 24px
}

div[id^=pageReward][id*=-Character-Confirm] #pContent .bDetailsMain.bCard .bTitle {
    border-bottom: 1px solid #dce4e9
}

div[id^=pageReward][id*=-Character-Confirm] #pContent .bDetailsMain.bCard .bTitle p {
    padding-bottom: 8px
}

div[id^=pageReward][id*=-Confirm] #pContent {
    padding-bottom: 80px
}

div[id^=pageReward][id*=-Confirm] #pContent .bCard {
    padding: 16px
}

div[id^=pageReward][id*=-Confirm] .bAddressMain .bTitle {
    display: flex;
    justify-content: space-between;
    align-items: center
}

div[id^=pageReward][id*=-Confirm] .bAddressMain .bTitle h3 {
    font-size: 1rem;
    line-height: 1em
}

div[id^=pageReward][id*=-Confirm] .bAddressMain .bTitle .btnEditAddress {
    cursor: pointer;
    display: block;
    width: 38px;
    height: 38px;
    background: url(../img/ui/button/ico-edit.svg) center center no-repeat
}

div[id^=pageReward][id*=-Confirm] .bAddressMain .bAddress .bRow {
    display: flex;
    justify-content: space-between
}

div[id^=pageReward][id*=-Confirm] .bAddressMain .bAddress .bRow:first-child {
    margin-bottom: 16px
}

div[id^=pageReward][id*=-Confirm] .bAddressMain .bAddress .bRow p span {
    display: block;
    color: var(--colorGray30);
    font-size: .875rem;
    line-height: 1em;
    margin-bottom: 4px
}

div[id^=pageReward][id*=-Confirm] .bAddressMain .bAddress .bRow p:last-child {
    text-align: right
}

div[id^=pageReward][id*=-Confirm] .bAddressMain .bAddress .bRow p:first-child {
    text-align: left
}

div[id^=pageReward][id*=-Confirm] .bAddressMain .bEditAddress {
    display: none
}

div[id^=pageReward][id*=-Confirm] .bAddressMain .bEditAddress .bGroup {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-row-gap: 16px;
    margin-bottom: 16px
}

div[id^=pageReward][id*=-Confirm] .bAddressMain .bEditAddress .bGroup .control-group [class*=tTitle] {
    color: var(--colorGray30)
}

div[id^=pageReward][id*=-Confirm] .bAddressMain .bEditAddress .bGroup input,
div[id^=pageReward][id*=-Confirm] .bAddressMain .bEditAddress .bGroup select,
div[id^=pageReward][id*=-Confirm] .bAddressMain .bEditAddress .bGroup textarea {
    background-color: rgba(0, 0, 0, 0)
}

div[id^=pageReward][id*=-Confirm] .bAddressMain .bEditAddress .bBtn {
    display: flex;
    flex-direction: column;
    gap: 12px
}

div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px
}

div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a {
    display: grid;
    grid-template-columns: 30% 70%
}

div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bPic,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bPic {
    padding-top: 0;
    height: 100%;
    width: 100%
}

div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails {
    width: 100%;
    padding: 12px 16px
}

div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem article .bDetails .tDate span,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem a .bDetails .tDate span {
    display: inline
}

div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem[data-event=matcha] article,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem[data-event=matcha] a {
    position: relative;
    overflow: inherit;
    margin: 4px;
    border: 1px solid #f3c346;
    outline: 4px solid #385a3a;
    background-color: #f7ffd6
}

div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem[data-event=matcha] article:after,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem[data-event=matcha] a:after {
    content: "";
    display: block;
    position: absolute;
    background: center center no-repeat;
    background-size: 100%;
    width: 52px;
    height: 60px;
    background-image: url(../img/ci/matcha-event/img-tag-matcha-small.png);
    top: -10px;
    left: -10px
}

div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem[data-event=matcha] article .bPic,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem[data-event=matcha] a .bPic {
    border-radius: 0 0 0 16px
}

div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem[data-event=matcha] article .bPointQuota .bPoint,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem[data-event=matcha] a .bPointQuota .bPoint {
    background-color: #385a3a;
    color: #f3c346
}

div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem[data-event=matcha] article .bPointQuota .bPoint:after,
div[id^=pageLuckydraw][id*=-All] #pContent .bGroupItem[data-event=matcha] a .bPointQuota .bPoint:after {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23F3C346FF' stroke-width='1.3' stroke-dasharray='5%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")
}

div[id^=pageLuckydraw][id*=-Details] #pContent {
    padding-bottom: 0px
}

div[id^=pageLuckydraw][id*=-Details] #pContent .bPointMain .bQuata .bRemaining p {
    flex-direction: column;
    align-items: flex-start
}

div[id^=pageLuckydraw][id*=-Details] #pContent[data-event=matcha] .bDetailsMain {
    position: relative;
    overflow: inherit;
    margin: 8px;
    border: 2px solid #f3c346;
    outline: 8px solid #385a3a
}

div[id^=pageLuckydraw][id*=-Details] #pContent[data-event=matcha] .bDetailsMain:after {
    content: "";
    display: block;
    position: absolute;
    background: center center no-repeat;
    background-size: 100%;
    width: 52px;
    height: 60px;
    background-image: url(../img/ci/matcha-event/img-tag-matcha-small.png);
    top: -16px;
    left: -16px
}

div[id^=pageLuckydraw][id*=-Details] #pContent[data-event=matcha] .bDetailsMain .bPoint p {
    background-color: #385a3a;
    color: #f3c346
}

div[id^=pageLuckydraw][id*=-Details] #pContent[data-event=matcha] .bDetailsMain .bPoint p:after {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23F3C346FF' stroke-width='3' stroke-dasharray='5%2c 10' stroke-dashoffset='24' stroke-linecap='square'/%3e%3c/svg%3e")
}

div[id^=pageLuckydraw][id*=-Complete] {
    background-color: var(--colorGray100)
}

#pageCharacter-detail {
    padding-bottom: 60px
}

#pageCharacter-detail .wrapContent {
    background: url(../img/ci/phase2/character-collection/ico-bg.svg), center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom
}

#pageCharacter-detail .bHead {
    background-color: #fff;
    padding: 20px 28px;
    text-align: center
}

#pageCharacter-detail .bHead .tHead {
    display: flex;
    justify-content: space-between
}

#pageCharacter-detail .bHead .tHead a {
    cursor: pointer;
    height: 32px
}

#pageCharacter-detail .bHead .tHead p {
    color: var(--colorPrimary);
    font-weight: 700
}

#pageCharacter-detail .bHead .tHead .dummy {
    width: 32px;
    height: 32px
}

#pageCharacter-detail section#bButton {
    padding: 20px 0;
    margin-inline: auto;
    width: calc(100% - 48px)
}

@media(min-width: 768px) {
    #pageCharacter-detail section#bButton {
        width: 90%
    }
}

@media(min-width: 1024px) {
    #pageCharacter-detail section#bButton {
        max-width: 1280px
    }
}

#pageCharacter-detail section#bButton .bBtn {
    display: flex;
    flex-direction: column;
    gap: 12px
}

#pageCharacter-detail section#bButton .bBtn a.outline {
    background-color: rgba(0, 0, 0, 0)
}

#pageCharacter-detail #pAllCharacter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    overflow: inherit;
    border-radius: 12px
}

#pageCharacter-detail #pAllCharacter p {
    text-align: center;
    font-size: 12px;
    color: #5e434b;
    font-weight: 400
}

#pageCharacter-detail #pAllCharacter p span {
    font-weight: 700
}

#pageCharacter-detail #pAllCharacter p:first-child {
    font-size: 16px;
    font-weight: 700;
    color: #2a2c2e;
    margin-top: 32px
}

#pageCharacter-detail #pAllCharacter .bAllCharacter {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto auto;
    text-align: center;
    margin-top: 8px;
    gap: 8px;
    margin-inline: auto;
    width: calc(100% - 48px)
}

@media(min-width: 768px) {
    #pageCharacter-detail #pAllCharacter .bAllCharacter {
        width: 90%
    }
}

@media(min-width: 1024px) {
    #pageCharacter-detail #pAllCharacter .bAllCharacter {
        max-width: 1280px
    }
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .collection {
    opacity: .65
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker {
    position: relative;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 111.5%
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-dup]:after {
    position: absolute;
    top: 11%;
    left: 11%;
    z-index: 2;
    display: block;
    width: 13px;
    height: 13px;
    background-color: red;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    z-index: 2;
    overflow: hidden;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    content: attr(data-dup)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-dup="0"]:after {
    display: none
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-dup="1"]:after {
    display: none
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-dup=""]:after {
    display: none
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="1"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/1.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="2"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/2.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="3"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/3.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="4"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/4.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="5"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/5.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="6"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/6.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="7"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/7.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="8"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/8.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="9"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/9.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="10"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/10.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="11"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/11.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="12"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/12.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="13"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/13.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="14"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/14.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="15"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/15.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="16"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/16.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="17"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/17.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="18"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/18.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="19"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/19.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="20"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/20.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="21"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/21.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="22"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/22.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="23"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/23.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="24"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/24.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="25"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/25.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="26"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/26.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="27"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/27.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="28"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/28.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="29"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/29.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="30"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/30.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="31"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/31.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="32"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/32.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="33"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/33.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="34"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/34.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="35"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/35.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="36"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/36.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="37"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/37.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="38"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/38.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="39"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/39.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="40"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/40.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="41"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/41.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="42"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/42.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="43"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/43.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="44"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/44.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="45"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/45.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="46"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/46.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="47"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/47.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="48"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/48.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="49"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/49.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="50"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/50.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="51"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/51.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="52"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/52.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="53"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/53.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="54"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/54.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="55"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/55.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="56"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/56.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="57"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/57.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="58"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/58.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="59"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/59.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="60"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/60.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="61"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/61.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="62"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/62.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="63"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/63.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="64"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/64.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="65"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/65.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="66"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/66.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="67"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/67.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="68"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/68.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="69"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/69.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="70"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/70.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="71"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/71.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="72"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/72.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="73"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/73.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="74"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/74.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="75"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/75.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="76"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/76.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="77"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/77.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="78"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/78.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="79"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/79.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="80"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/80.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="81"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/81.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="82"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/82.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="83"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/83.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="84"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/84.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="85"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/85.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="86"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/86.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="87"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/87.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="88"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/88.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="89"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/89.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="90"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/90.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="91"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/91.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="92"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/92.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="93"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/93.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="94"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/94.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="95"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/95.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="96"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/96.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="97"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/97.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="98"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/98.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="99"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/99.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="100"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/100.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="101"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/101.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="102"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/102.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="103"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/103.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="104"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/104.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="105"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/105.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="106"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/106.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="107"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/107.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="108"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/108.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="109"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/109.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="110"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/110.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="111"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/111.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="112"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/112.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="113"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/113.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="114"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/114.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="115"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/115.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="116"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/116.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="117"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/117.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="118"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/118.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="119"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/119.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="120"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/120.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="121"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/121.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="122"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/122.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="123"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/123.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="124"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/124.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="125"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/125.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="126"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/126.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="127"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/127.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="128"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/128.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="129"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/129.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="130"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/130.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="131"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/131.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="132"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/132.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="133"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/133.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="134"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/134.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="135"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/135.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="136"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/136.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="137"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/137.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="138"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/138.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="139"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/139.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="140"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/140.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="141"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/141.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="142"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/142.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="143"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/143.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="144"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/144.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="145"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/145.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="146"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/146.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="147"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/147.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="148"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/148.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="149"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/149.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="150"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/150.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="151"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/151.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="152"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/152.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="153"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/153.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="154"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/154.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="155"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/155.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="156"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/156.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="157"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/157.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="158"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/158.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="159"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/159.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="160"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/160.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="161"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/161.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="162"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/162.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="163"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/163.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="164"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/164.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="165"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/165.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="166"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/166.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="167"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/167.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="168"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/168.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="169"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/169.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="170"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/170.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="171"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/171.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="172"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/172.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="173"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/173.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="174"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/174.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="175"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/175.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="176"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/176.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="177"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/177.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="178"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/178.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="179"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/179.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="180"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/180.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="181"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/181.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="182"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/182.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="183"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/183.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="184"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/184.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="185"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/185.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="186"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/186.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="187"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/187.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="188"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/188.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="189"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/189.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="190"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/190.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="191"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/191.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="192"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/192.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="193"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/193.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="194"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/194.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="195"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/195.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="196"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/196.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="197"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/197.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="198"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/198.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="199"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/199.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="200"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/200.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="201"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/201.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="202"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/202.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="203"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/203.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="204"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/204.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="205"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/205.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="206"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/206.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="207"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/207.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="208"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/208.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="209"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/209.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="210"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/210.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="211"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/211.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="212"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/212.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="213"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/213.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-character="214"] {
    background-image: url(../img/ci/phase2/icon-sticker/all/214.png)
}

#pageCharacter-detail #pAllCharacter .bAllCharacter .bSticker[data-collect="0"] {
    opacity: .4
}

#pageCharacter-detail #pAllCharacter .bAllCharacter img {
    position: relative;
    width: 100%;
    height: 100%
}

div[id^=pagePolicy] #pContent {
    margin-inline: auto;
    width: calc(100% - 48px);
    padding: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 24px
}

@media(min-width: 768px) {
    div[id^=pagePolicy] #pContent {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pagePolicy] #pContent {
        max-width: 1280px
    }
}

div[id^=pagePolicy] #pContent .bContent {
    background-color: var(--colorGray90);
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    padding: 24px 16px
}

div[id^=pagePolicy] #pContent .bContent>h1 {
    font-size: 1.25rem;
    line-height: 1em;
    margin-bottom: 24px;
    text-align: center
}

div[id^=pagePolicy] #pContent .bContent .bDetails * {
    line-height: auto;
    margin-bottom: 16px;
    color: var(--colorGray20)
}

div[id^=pagePolicy] #pContent .bContent .bDetails *:last-child,
div[id^=pagePolicy] #pContent .bContent .bDetails * *>* {
    margin-bottom: 0
}

div[id^=pagePolicy] #pContent .bContent .bDetails h1,
div[id^=pagePolicy] #pContent .bContent .bDetails h2,
div[id^=pagePolicy] #pContent .bContent .bDetails h3,
div[id^=pagePolicy] #pContent .bContent .bDetails h4,
div[id^=pagePolicy] #pContent .bContent .bDetails h5,
div[id^=pagePolicy] #pContent .bContent .bDetails h6 {
    margin-bottom: 16px;
    color: var(--colorBlack)
}

div[id^=pagePolicy] #pContent .bContent .bDetails img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto
}

div[id^=pagePolicy] #pContent .bContent .bDetails span {
    color: var(--colorPrimary)
}

div[id^=pagePolicy] #pContent .bContent .bDetails a {
    word-break: break-all;
    color: var(--colorPrimary);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease
}

div[id^=pagePolicy] #pContent .bContent .bDetails a:hover {
    text-decoration: underline;
    color: var(--colorSecond)
}

div[id^=pagePolicy] #pContent .bContent .bDetails blockquote {
    color: var(--colorGray10);
    background: #f9f9f9;
    border-left: 10px solid var(--colorSecond);
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "“" "”" "‘" "’"
}

div[id^=pagePolicy] #pContent .bContent .bDetails blockquote:before {
    color: var(--colorPrimary);
    content: open-quote;
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -0.4em
}

div[id^=pagePolicy] #pContent .bContent .bDetails blockquote p {
    display: inline
}

div[id^=pagePolicy] #pContent .bContent .bDetails hr {
    width: 100%;
    height: 1px;
    background-color: var(--colorGray70)
}

div[id^=pagePolicy] #pContent .bContent .bDetails table {
    width: 100%
}

div[id^=pagePolicy] #pContent .bContent .bDetails table td {
    padding: 6px 6px
}

div[id^=pagePolicy] #pContent .bContent .bDetails dl {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0
}

div[id^=pagePolicy] #pContent .bContent .bDetails dl dt,
div[id^=pagePolicy] #pContent .bContent .bDetails dl dd,
div[id^=pagePolicy] #pContent .bContent .bDetails dl dt>*,
div[id^=pagePolicy] #pContent .bContent .bDetails dl dd>* {
    margin-bottom: 18px
}

div[id^=pagePolicy] #pContent .bContent .bDetails dl dt:last-child,
div[id^=pagePolicy] #pContent .bContent .bDetails dl dd:last-child,
div[id^=pagePolicy] #pContent .bContent .bDetails dl dt>*:last-child,
div[id^=pagePolicy] #pContent .bContent .bDetails dl dd>*:last-child {
    margin-bottom: 0
}

div[id^=pagePolicy] #pContent .bContent .bDetails ul li {
    list-style: disc;
    margin-bottom: 0
}

div[id^=pagePolicy] #pContent .bContent .bDetails ul li::marker {
    font-size: .7em
}

div[id^=pagePolicy] #pContent .bContent .bDetails b {
    font-weight: 500
}

div[id^=pagePolicy] #pContent .bContent .bDetails strong {
    font-weight: bold
}

div[id^=pagePolicy] #pContent .bContent .bDetails * {
    font-size: .875rem;
    line-height: 1em;
    line-height: normal
}

div[id^=pagePolicy] #pContent .bContent .bDetails h2 {
    font-size: 1rem;
    line-height: 1em;
    line-height: normal
}

section#pMenuMain {
    width: 100%;
    max-width: 500px;
    position: fixed;
    z-index: 99;
    bottom: 0
}

section#pMenuMain .bBack {
    background-color: #fff;
    padding: 24px;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 500px
}

section#pMenuMain .bBack .bBtn {
    width: 100%
}

section#pMenuMain .bMenu {
    border-top: 1px solid var(--colorGreenD);
    background-color: #fff;
    height: 68px;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 500px
}

section#pMenuMain .bMenu a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    font-weight: bold;
    font-size: .75rem;
    line-height: 1em;
    color: var(--colorGreenD)
}

section#pMenuMain .bMenu a:before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: center center no-repeat;
    background-color: var(--colorGreenD)
}

section#pMenuMain .bMenu a.active {
    background-color: var(--colorGreenD);
    color: #fff
}

section#pMenuMain .bMenu a.active:before {
    background-color: var(--colorGray90)
}

section#pMenuMain .bMenu a.scan:before {
    -webkit-mask: url("../img/ci/menu/ico-scan.svg") center center no-repeat;
    mask: url("../img/ci/menu/ico-scan.svg") center center no-repeat;
    mask-size: contain;
    display: block
}

section#pMenuMain .bMenu a.reward:before {
    -webkit-mask: url("../img/ci/menu/ico-reward.svg") center center no-repeat;
    mask: url("../img/ci/menu/ico-reward.svg") center center no-repeat;
    mask-size: contain;
    display: block
}

section#pMenuMain .bMenu a.luckydraw:before {
    -webkit-mask: url("../img/ci/menu/ico-luckydraw.svg") center center no-repeat;
    mask: url("../img/ci/menu/ico-luckydraw.svg") center center no-repeat;
    mask-size: contain;
    display: block
}

section#pMenuMain .bMenu a.profile:before {
    -webkit-mask: url("../img/ci/menu/ico-profile.svg") center center no-repeat;
    mask: url("../img/ci/menu/ico-profile.svg") center center no-repeat;
    mask-size: contain;
    display: block
}

.bMatchaEvent {
    overflow: hidden;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
    overflow: inherit;
    margin: 6px;
    border: 2px solid var(--colorGreenD);
    outline: 6px solid var(--colorGreenD);
    padding: 12px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    position: relative
}

.bMatchaEvent:before,
.bMatchaEvent:after {
    content: "";
    display: block;
    position: absolute;
    background: center center no-repeat;
    background-size: 100%
}

.bMatchaEvent .bPointGroup p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px
}

.bMatchaEvent .bPointGroup span {
    font-size: 2rem;
    line-height: 1em;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
    color: var(--colorGray10);
    display: flex;
    align-items: center;
    gap: 8px;
    color: #674c54
}

.bMatchaEvent .bPointGroup span:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../img/ci/ico-coin.svg) center center no-repeat;
    background-size: 100%
}

.bMatchaEvent .bGroupFlavor {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    align-items: flex-start
}

.bMatchaEvent .bGroupFlavor article {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.bMatchaEvent .bGroupFlavor article p {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #5e434b
}

.bMatchaEvent .bGroupFlavor article p span {
    font-weight: bold;
    font-size: .875rem;
    line-height: 1em
}

.bMatchaEvent .bGroupFlavor article:before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    background: center center no-repeat;
    background-size: 100%
}

.bMatchaEvent .bGroupFlavor article[data-flavor=matcha]:before {
    background-image: url(../img/ci/matcha-event/img-box-matcha.png)
}

.bMatchaEvent .bGroupFlavor article[data-flavor=original]:before {
    background-image: url(../img/ci/matcha-event/img-box-original.png)
}

.bMatchaEvent .bGroupFlavor article[data-flavor=strawberry]:before {
    background-image: url(../img/ci/matcha-event/img-box-strawberry.png)
}

.bMatchaEvent .bGroupFlavor article[data-flavor=darkchoc]:before {
    background-image: url(../img/ci/matcha-event/img-box-darkchoc.png)
}

.bMatchaEvent .bGroupFlavor article[data-flavor=whitechoc]:before {
    background-image: url(../img/ci/matcha-event/img-box-whitechoc.png)
}

.bMatchaEvent .bOtherPoint p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px
}

.bMatchaEvent .bOtherPoint span {
    font-size: 1rem;
    line-height: 1em;
    font-weight: bold;
    text-align: center;
    color: var(--colorGray10);
    display: flex;
    align-items: center;
    gap: 4px;
    color: #674c54
}

.bMatchaEvent .bOtherPoint span:before {
    content: "";
    width: 16px;
    height: 16px;
    background: url(../img/ci/ico-coin.svg) center center no-repeat;
    background-size: 100%
}

.bMatchaEvent[data-event=original]:before {
    width: 74px;
    height: 64px;
    background-image: url(../img/ci/matcha-event/img-koala.png);
    top: -30px;
    right: -20px
}

.bMatchaEvent[data-event=original]:after {
    width: 74px;
    height: 56px;
    background-image: url(../img/ci/matcha-event/img-star.png);
    bottom: -20px;
    left: -30px
}

.bMatchaEvent[data-event=matcha] {
    border: 2px solid #f3c346;
    outline: 8px solid #385a3a;
    background-color: #f7ffd6
}

.bMatchaEvent[data-event=matcha]:before {
    width: 68px;
    height: 79px;
    background-image: url(../img/ci/matcha-event/img-tag-matcha.png);
    top: -16px;
    left: -16px
}

.bMatchaEvent[data-event=matcha]:after {
    width: 28px;
    height: 28px;
    background-image: url(../img/ci/icon/ico-clip-yellow.svg);
    top: -16px;
    right: -10px
}

.bPic[data-flavor] {
    display: block;
    width: 100px;
    height: 100px;
    background: center center no-repeat;
    background-size: 100%
}

.bPic[data-flavor][data-flavor=matcha] {
    background-image: url(../img/ci/matcha-event/img-box-matcha.png)
}

.bPic[data-flavor][data-flavor=original] {
    background-image: url(../img/ci/matcha-event/img-box-original.png)
}

.bPic[data-flavor][data-flavor=strawberry] {
    background-image: url(../img/ci/matcha-event/img-box-strawberry.png)
}

.bPic[data-flavor][data-flavor=darkchoc] {
    background-image: url(../img/ci/matcha-event/img-box-darkchoc.png)
}

.bPic[data-flavor][data-flavor=whitechoc] {
    background-image: url(../img/ci/matcha-event/img-box-whitechoc.png)
}

body[data-theme=green] div#pageRegister-step3 .wrapContent,
body[data-theme=green] div#pageProfile-themes .wrapContent {
    padding-bottom: 35%;
    background: url(../img/ci/theme/img-footer-bear-green.svg) bottom center no-repeat;
    background-size: 100%
}

body[data-theme=green] div[id^=pageProfile] section#pProfileMain .bProfile {
    background: url(../img/ci/theme/img-footer-bear-green.svg) bottom center no-repeat;
    background-size: 100%
}

body[data-theme=green] div[id^=pageProfile] section#pProfileMain .bPoint {
    background-color: var(--colorGreenL)
}

body[data-theme=green] div[id^=pageProfile] .bProfile .bGroup .bQR #btnModalQR .bPic {
    background-color: var(--colorGreenL)
}

body[data-theme=green] #ModalQR {
    padding-bottom: 30%;
    background: url(../img/ci/theme/img-footer-bear-green-2.svg) bottom center no-repeat #f9f9ee;
    background-size: 100%
}

body[data-theme=green] #ModalQR .bQR .bPic {
    background-color: var(--colorGreenL)
}

body[data-theme=green] section#pPointTop {
    padding-bottom: 16px;
    background: url(../img/ci/theme/img-footer-bear-green-3.svg) bottom center no-repeat #f9f9ee;
    background-size: 100%
}

body[data-theme=green] div#pageScan section#pScanCode {
    background-color: var(--colorGreenL)
}

body[data-theme=green] div#pageScan section#pUploadReceipt .bAccord .contentAccord .bBtn {
    background-color: var(--colorGreenL)
}

body[data-theme=green] div#pageScan-Collectpoint #pCollectpoint {
    background: url(../img/ci/theme/bg-collectpoint-green.svg) bottom center no-repeat;
    background-color: var(--colorGreenL);
    background-size: 100%
}

body[data-theme=green] div#pageScan-Receiptcomplete #pDetails {
    background: url(../img/ci/theme/bg-receiptcomplete-green.svg) bottom center no-repeat;
    background-size: 100%
}

body[data-theme=green] div[id^=pageHistory],
body[data-theme=green] #pageReward-Details-Confirm,
body[data-theme=green] #pageReward-Character-Confirm,
body[data-theme=green] #pageReward-Details,
body[data-theme=green] #pageReward-character-Details,
body[data-theme=green] #pageReward-Complete #pContent,
body[data-theme=green] #pageLuckydraw-Details,
body[data-theme=green] #pageLuckydraw-Complete #pBtn,
body[data-theme=green] div[id^=pagePolicy] {
    background-color: var(--colorGreenL)
}

body[data-theme=green] section#pAnnouncement {
    background: url(../img/ci/theme/img-footer-bear-green-4.svg) bottom center no-repeat #f9f9ee;
    background-size: 100%
}

body[data-theme=pink] div#pageRegister-step3 .wrapContent,
body[data-theme=pink] div#pageProfile-themes .wrapContent {
    padding-bottom: 30%;
    background: url(../img/ci/theme/img-footer-bear-pink.svg) bottom center no-repeat;
    background-size: 100%
}

body[data-theme=pink] div[id^=pageProfile] section#pProfileMain .bProfile {
    background: url(../img/ci/theme/img-footer-bear-pink.svg) bottom center no-repeat;
    background-size: 100%
}

body[data-theme=pink] div[id^=pageProfile] section#pProfileMain .bPoint {
    background-color: var(--colorPink)
}

body[data-theme=pink] div[id^=pageProfile] .bProfile .bGroup .bQR #btnModalQR .bPic {
    background-color: var(--colorPink)
}

body[data-theme=pink] #ModalQR {
    padding-bottom: 30%;
    background: url(../img/ci/theme/img-footer-bear-pink-2.svg) bottom center no-repeat #f9f9ee;
    background-size: 100%
}

body[data-theme=pink] #ModalQR .bQR .bPic {
    background-color: var(--colorPink)
}

body[data-theme=pink] section#pPointTop {
    padding-bottom: 16px;
    background: url(../img/ci/theme/img-footer-bear-pink-3.svg) bottom center no-repeat #f9f9ee;
    background-size: 100%
}

body[data-theme=pink] div#pageScan section#pScanCode {
    background-color: var(--colorPink)
}

body[data-theme=pink] div#pageScan section#pScanCode .bScanCode .bForm .control-group.error input {
    border-color: #720f30 !important
}

body[data-theme=pink] div#pageScan section#pScanCode .bScanCode .bForm .control-group.error .tError {
    color: #720f30 !important
}

body[data-theme=pink] div#pageScan section#pUploadReceipt .bAccord .contentAccord .bBtn {
    background-color: var(--colorPink)
}

body[data-theme=pink] div#pageScan-Collectpoint #pCollectpoint {
    background: url(../img/ci/theme/bg-collectpoint-pink.svg) bottom center no-repeat;
    background-color: var(--colorPink);
    background-size: 100%
}

body[data-theme=pink] div#pageScan-Receiptcomplete #pDetails {
    background: url(../img/ci/theme/bg-receiptcomplete-pink.svg) bottom center no-repeat;
    background-size: 100%
}

body[data-theme=pink] div[id^=pageHistory],
body[data-theme=pink] #pageReward-Details-Confirm,
body[data-theme=pink] #pageReward-Character-Confirm,
body[data-theme=pink] #pageReward-Details,
body[data-theme=pink] #pageReward-character-Details,
body[data-theme=pink] #pageReward-Complete #pContent,
body[data-theme=pink] #pageLuckydraw-Details,
body[data-theme=pink] #pageLuckydraw-Complete #pBtn,
body[data-theme=pink] div[id^=pagePolicy] {
    background-color: var(--colorPink)
}

body[data-theme=pink] section#pAnnouncement {
    background: url(../img/ci/theme/img-footer-bear-pink-4.svg) bottom center no-repeat #f9f9ee;
    background-size: 100%
}

i.btnTips.titleForm {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: center center;
    background-image: url(../img/ui/icon/tips.svg);
    position: relative;
    font-style: normal;
    top: 3px
}

i.btnTips.titleForm .bTips {
    display: none;
    position: absolute;
    bottom: 28px;
    left: -16px;
    z-index: 999999;
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    overflow: inherit;
    background-color: #fff;
    padding: 20px 12px 12px;
    width: 270px;
    box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, .03), 0px 12px 16px -4px rgba(16, 24, 40, .08)
}

i.btnTips.titleForm .bTips:after {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 8px 8px 0 8px;
    border-color: #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    transform: rotate(0deg);
    position: absolute;
    bottom: -6px;
    left: 16px
}

i.btnTips.titleForm .bTips span {
    font-weight: bold;
    margin-bottom: 4px
}

i.btnTips.titleForm .bTips p {
    color: var(--colorGray30);
    margin-bottom: 4px
}

i.btnTips.titleForm .bTips p:last-child {
    margin-bottom: 0
}

div[id^="page"]#pageWordBookMain {
    background-image: url(../img/ci/bg-word-book.png);
    background-repeat: no-repeat;
    background-size: cover;
}

div[id^=page]#pageWordBookMain section#pEvent {
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media(min-width: 768px) {
    div[id^="page"]#pageWordBookMain section#pEvent {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^="page"]#pageWordBookMain section#pEvent {
        max-width: 1280px
    }
}

div[id^="page"]#pageWordBookMain section#pLogo {
    margin-bottom: 10px;
    text-align: center;


}

div[id^="page"]#pageWordBookMain section#pLogo img {
    display: block;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
}

/* div[id^="page"]#pageWordBookMain section#pEvent {
    padding-left: 5%;
    padding-right: 5%;
} */

div[id^="page"]#pageWordBookMain section#pEvent .bBanner {
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: end;
    margin-left: auto;
    margin-right: auto;
    width: 327px;
    height: 120px;
}

div[id^="page"]#pageWordBookMain section#pEvent .bBanner#myWordBookBanner {
    background-image: url(../img/ci/wordBook/myWordBookBanner.png);

}

div[id^="page"]#pageWordBookMain section#pEvent .bBanner#wordBookPrizeBanner {
    background-image: url(../img/ci/wordBook/wordBookPrizeBanner.png);
}

div[id^="page"]#pageWordBookMain section#pEvent .bBanner#wordBookQuizBanner {
    background-image: url(../img/ci/wordBook/wordBookQuizBanner.png);
}

div[id^="page"]#pageWordBookMain section#pEvent .bBanner#luckyWordPrizeBanner {
    background-image: url(../img/ci/wordBook/luckyWordPrizeBanner.png);
}

div[id^="page"]#pageWordBookMain section#pEvent .bBanner .countRewards {
    font-size: 10px;
    background-color: white;
    border: 1px solid var(--Brown, rgba(94, 67, 75, 1));
    box-shadow: 2px 2px 0px 0px rgba(74, 53, 59, 1);
    border-radius: 100px;
    height: 16px;
    width: 114px;
    text-align: center;
    margin-bottom: 17px;
    margin-left: 10px;

    .percectRewards {
        margin-top: -16px;
        border-radius: 100px;
        height: 14px;
        background: linear-gradient(270deg, #FF3D00 -4.39%, #FFC700 100%);
    }
}

div[id^="page"]#pageWordBookMain section#pEvent .bBanner button {
    border-radius: 30px;
    background-color: #FFE501;
    font-weight: bold;
    border: 2px solid #110F0F;
    /* border-image-source: linear-gradient(93.63deg, #5E434B 27.6%, #110F0F 77%); */
    width: 120px;
    margin-left: 195px;
    margin-bottom: 15px;
    font-family: "Noto Sans Thai", sans-serif;
}

div[id^="page"]#pageWordBookMain section#pEvent .bBanner.prize button {
    margin-left: 70px !important;
}

div[id^="page"]#pageWordBookMain section#pEvent .bBanner button:disabled {
    background-color: rgba(229, 235, 239, 1);
    border-color: rgba(169, 177, 182, 1);
}

div[id^="page"]#pageWordBookMain section#pEvent img {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
}

div[id^="pageWordBookMain"]#pageWordBookMain {
    .bTop {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px 0 12px;

        .btnGoHome {
            display: block;
            width: 58px;
            height: 58px;
            background: url(../img/ci/icon/ico-door.png) no-repeat;
            background-size: cover;
        }

        .howToPlay {
            width: 160px;
            font-weight: bold;
            text-decoration: underline;
            color: rgba(42, 44, 46, 1);
        }

        .divHeart {
            padding: 0 11px;
            width: 120px;
            display: flex;
            align-items: center;
            height: 44px;
            border: 2px solid var(--primary, rgba(253, 186, 77, 1));
            border-radius: 30px;
            box-shadow: 2px 2px 0px 0px rgba(202, 149, 62, 1);
            background-color: rgba(255, 255, 255, 1);

            .iconHeart {
                width: 25px;
                height: 22px;
                background: url(../img/ci/icon/ico-heart.svg) no-repeat;
            }

            .iconInfo {
                width: 15px;
                height: 16px;
                background: url(../img/ci/icon/ico-info.svg) no-repeat;
            }

            span {
                font-weight: bold;
                margin: 0 5px;

            }

            p.bold {
                font-weight: bold;
            }

            .bTips {
                margin-left: auto;
                margin-right: auto;
                left: 20%;
                right: 0;
                top: 9%;
                display: none;
                position: absolute;
                z-index: 999999;
                overflow: inherit;
                background-color: #ffffff;
                padding: 20px 12px 12px;
                width: 270px;
                border-radius: 8px;
                box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
                box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08);

                span {
                    font-weight: bold;
                    margin-bottom: 4px;
                }

                &:before {
                    content: "";
                    display: block;
                    width: 0px;
                    height: 0px;
                    border-style: solid;
                    border-width: 8px 8px 0 8px;
                    border-color: #ffffff transparent transparent transparent;
                    transform: rotate(180deg);
                    position: absolute;
                    top: -6px;
                    right: 16px;
                }
            }
        }
    }
}


.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
}

.swiper-pagination-bullet {
    display: inline-block;
    border-radius: 16px !important;
    transition: .3s opacity;
    border: 1px solid rgba(94, 67, 75, 1) !important;
    color: rgba(220, 228, 233, 1);
    background-color: rgba(220, 228, 233, 1) !important;
    margin-right: 5px;
}

.swiper-pagination-bullet-active {
    background-color: rgba(94, 67, 75, 1) !important;
    color: rgba(94, 67, 75, 1) !important;
    border: none !important;
}

.swiper-container {
    overflow: visible !important;
}

.swiper-pagination {
    position: absolute;
    bottom: 0 !important;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}

.swiper {
    width: 100%;
    height: 100%;
    padding-bottom: 10px !important;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#pageRandom .pLoading {
    text-align: center;
    padding-top: 280px;

    img {
        width: 60%;
    }
}

#pageRandom .pDetails {
    padding: 30px;
    text-align: center;
}

#pageRandom .pDetails .btn1 {
    margin-top: 20px;
    width: 299px;
    background: url(../img/ci/wordBook/toWordBookBtn.png) no-repeat;
    border: none;
    height: 42px;
    background-size: cover;
}

#pageRandom .pDetails .btn2 {
    width: 299px;
    border-radius: 100px;
    font-weight: bold;
    font-size: 16px;
    background-color: rgba(255, 229, 1, 1);
    font-family: "Noto Sans Thai", sans-serif;
    height: 42px;
    margin-top: 8px;
    border: 2px solid var(--Gradient-stoke, #5e434b)
}

#pageRandom .pDetails .btn3 {
    width: 299px;
    border-radius: 100px;
    font-weight: bold;
    font-size: 16px;
    background-color: white;
    font-family: "Noto Sans Thai", sans-serif;
    height: 42px;
    margin-top: 10px;
    border: 2px solid var(--Gradient-stoke, #5e434b)
}


#pageRandom .pDetails .koalaWord {
    padding: 24px;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='%23E2B72BFF' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 24px;

    p {
        margin-bottom: 15px;
        color: rgba(94, 67, 75, 1);
        font-size: 16px;
    }

    h2 {
        margin-bottom: 15px;
    }

}

#pageRandom .pDetails .koalaWord .pBiscuits {
    display: grid;
    grid-template-columns: auto auto auto;
}

#pageRandom .pDetails .koalaWord .pClover {
    margin-top: 25px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    height: 120px;
    width: 120px;
    background: url(../img/ci/wordBook/luckyClover.png) no-repeat;
    background-size: cover;
}

.border-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


div[id^=pageRandom]#pageRandom .wrapContent {
    padding-bottom: 100px
}

div[id^=pageRandom]#pageRandom section#pProfileMain {
    padding-top: 20px;
    text-align: center;
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bProfile {
    padding-bottom: 100px
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bProfile p:first-child {
    font-size: .75rem;
    line-height: 1em
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bProfile .bGroup {
    margin-inline: auto;
    width: calc(100% - 48px);
    width: calc(100% - 32px);
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-top: 12px
}

@media(min-width: 768px) {
    div[id^=pageRandom]#pageRandom section#pProfileMain .bProfile .bGroup {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageRandom]#pageRandom section#pProfileMain .bProfile .bGroup {
        max-width: 1280px
    }
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bPoint {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bShowPoint {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 138px;
    height: 50px;
    background-image: url(../img/ci/wordBook/point.png);
    background-size: cover;
    background-repeat: no-repeat;
}


div[id^=pageRandom]#pageRandom section#pProfileMain .bExpire {
    margin-top: -86px;
    margin-bottom: 62px
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bPoint {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bPoint p:first-child {
    font-size: .75rem;
    line-height: 1em
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bPoint .bTypePoint {
    display: flex;
    gap: 20px
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bPoint .bTypePoint {
    display: flex;
    gap: 20px
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bPoint .bTypePoint .bPointGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bPoint .bTypePoint .bPointGroup .tNote {
    position: relative
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bPoint .bTypePoint .bPointGroup .tNote a {
    position: absolute;
    width: 14px;
    height: 14px;
    top: -30%;
    right: -29%
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bPoint .bTypePoint .bPointGroup .tNote a img {
    width: 14px;
    height: 14px
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bPoint .bTypePoint .bPointGroup .bTotalPoint {
    background-color: #fff;
    overflow: hidden;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    overflow: inherit;
    padding: 0 32px;
    font-size: 2rem;
    line-height: 1em;
    font-weight: bold;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorPrimary);
    position: relative
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bPoint .bTypePoint .bPointGroup .bTotalPoint:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23FDBA4DFF' stroke-width='3' stroke-dasharray='5%2c 10' stroke-dashoffset='24' stroke-linecap='square'/%3e%3c/svg%3e");
    overflow: hidden;
    border-radius: 48px;
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    -ms-border-radius: 48px;
    -o-border-radius: 48px
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bPoint .bTypePoint .bPointGroup .bTotalPoint:before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background: url(../img/ci/icon/ico-clip-yellow.svg) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: -5px;
    top: -8px
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bPoint .bTypePoint .bPointGroup .bTotalPoint span {
    display: flex;
    align-items: center;
    gap: 8px
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bPoint .bTypePoint .bPointGroup .bTotalPoint span:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../img/ci/ico-coin.svg) center center no-repeat;
    background-size: 100%
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bPoint .bTypePoint .bPointGroup .bTotalPointHeart {
    overflow: inherit;
    padding: 0 32px;
    font-size: 2rem;
    line-height: 1em;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a2c2e;
    position: relative
}

div[id^=pageRandom]#pageRandom section#pProfileMain .bPoint .bMatchaEvent {
    margin-inline: auto;
    width: calc(100% - 48px);
}

body[data-theme=green] div[id^=pageRandom] section#pProfileMain .bProfile {
    background: url(../img/ci/theme/img-footer-bear-green-3.svg) bottom center no-repeat;
    background-size: 100%
}

body[data-theme=green] div[id^=pageRandom] section#pProfileMain .bPoint {
    background-color: var(--colorGreenL)
}

body[data-theme=green] div[id^=pageRandom] section#pProfileMain .bPointBg {
    height: 130px;
    background: url(../img/ci/theme/img-footer-bear-green-5.png) bottom center no-repeat;
    background-size: 100%
}

body[data-theme=pink] div[id^=pageRandom] section#pProfileMain .bProfile {
    background: url(../img/ci/theme/img-footer-bear-pink-3.svg) bottom center no-repeat;
    background-size: 100%
}

body[data-theme=pink] div[id^=pageRandom] section#pProfileMain .bPoint {
    background-color: var(--colorPink)
}

body[data-theme=pink] div[id^=pageRandom] section#pProfileMain .bPointBg {
    height: 130px;
    background: url(../img/ci/theme/img-footer-bear-pink-5.png) bottom center no-repeat;
    background-size: 100%
}

.custom-lucky-word-modal.ant-modal .ant-modal-content {
    height: 444px;
    background: url(../img/ci/wordBook/luckyBg.jpg) no-repeat;
    background-size: cover;
    text-align: center;
    color: #5E434B;

    h2 {
        font-size: 24px;
        font-weight: bold;
        line-height: 100%;
        margin-bottom: 10px;
    }

    h3 {
        font-size: 20px;
        line-height: 30px;

    }
}

.custom-lucky-word-modal.ant-modal .ant-modal-content .bInner {
    padding: 50px 30px 30px 30px;
}

.custom-lucky-word-modal.ant-modal .ant-modal-content .bInner .bClover {
    margin-top: 25px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    height: 150px;
    width: 150px;
    background: url(../img/ci/wordBook/luckyClover.png) no-repeat;
    background-size: cover;
}

section#pProfileMain .bProfile .bTotalPoint {
    background-color: var(--colorSecond);
    overflow: hidden;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    overflow: inherit;
    padding: 0 32px;
    font-size: 2rem;
    line-height: 1em;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorPrimary);
    position: relative;
    width: 33%;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
}

section#pProfileMain .bProfile .bTotalPoint:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='white' stroke-width='3' stroke-dasharray='5%2c 10' stroke-dashoffset='24' stroke-linecap='square'/%3e%3c/svg%3e");
    overflow: hidden;
    border-radius: 48px;
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    -ms-border-radius: 48px;
    -o-border-radius: 48px
}

section#pProfileMain .bProfile .bTotalPoint:before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background: url(../img/ci/icon/ico-clip-green.svg) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: -5px;
    top: -8px
}

section#pProfileMain .bProfile .bTotalPoint span {
    display: flex;
    align-items: center;
    gap: 8px
}

section#pProfileMain .bProfile .bTotalPoint span:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../img/ci/ico-coin.svg) center center no-repeat;
    background-size: 100%
}

div[id^="page"]#pageWordBookAll {
    background-image: url(../img/ci/bg-word-book.png);
    background-repeat: no-repeat;
    background-size: cover;
}


div[id^="pageWordBookAll"]#pageWordBookAll,
div[id^="pageWordBookQuiz"]#pageWordBookQuiz,
div[id^="pageWordBookAnswer"]#pageWordBookAnswer {
    .bTop {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px 0 12px;

        .btnGoHome {
            display: block;
            width: 58px;
            height: 58px;
            background: url(../img/ci/icon/ico-house.png) no-repeat;
            background-size: cover;
        }

        .btnGoBack {
            display: block;
            width: 58px;
            height: 58px;
            background: url(../img/ci/icon/ico-back.png) no-repeat;
            background-size: cover;
        }

        .divHeart {
            padding: 0 11px;
            width: 120px;
            display: flex;
            align-items: center;
            height: 44px;
            border: 2px solid var(--primary, rgba(253, 186, 77, 1));
            border-radius: 30px;
            box-shadow: 2px 2px 0px 0px rgba(202, 149, 62, 1);
            background-color: rgba(255, 255, 255, 1);

            .iconHeart {
                width: 25px;
                height: 22px;
                background: url(../img/ci/icon/ico-heart.svg) no-repeat;
            }

            .iconInfo {
                width: 15px;
                height: 16px;
                background: url(../img/ci/icon/ico-info.svg) no-repeat;
            }

            span {
                font-weight: bold;
                margin: 0 5px;

            }

            p.bold {
                font-weight: bold;
            }


            .bTips {
                margin-left: auto;
                margin-right: auto;
                left: 20%;
                right: 0;
                top: 9%;
                display: none;
                position: absolute;
                z-index: 999999;
                overflow: inherit;
                background-color: #ffffff;
                padding: 20px 12px 12px;
                width: 270px;
                border-radius: 8px;
                box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
                box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08);

                span {
                    font-weight: bold;
                    margin-bottom: 4px;
                }

                &:before {
                    content: "";
                    display: block;
                    width: 0px;
                    height: 0px;
                    border-style: solid;
                    border-width: 8px 8px 0 8px;
                    border-color: #ffffff transparent transparent transparent;
                    transform: rotate(180deg);
                    position: absolute;
                    top: -6px;
                    right: 16px;
                }
            }
        }
    }
}

div[id^="pageWordBookAll"]#pageWordBookAll section#pWordBook {
    background-color: rgba(249, 249, 238, 1);
    border: 2px solid var(--Brown, rgba(94, 67, 75, 1));
    box-shadow: 2px 2px 0px 0px rgba(74, 53, 59, 1);
    border-radius: 20px;
    padding: 20px 10px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

div[id^="pageWordBookAll"]#pageWordBookAll section#pWordBook .pContent {
    display: grid;
    grid-template-columns: auto auto auto auto;
}

div[id^="pageWordBookAll"]#pageWordBookAll section#pWordBook .pContent .wordCount {
    position: absolute;
    background-color: red;
    border-radius: 100px;
    font-size: 12px;
    color: white;
    width: 18px;
    height: 18px;
    margin-top: 5px;
    margin-left: 5px;
    z-index: 100;
}


div[id^="pageWordBookAll"]#pageWordBookAll section#pWordBook .pPaging,
div[id^="pageWordBookQuiz"]#pageWordBookQuiz .pPaging {
    text-align: center;
    display: flex;
    justify-content: space-between;
    padding: 10px;

    p {
        margin-top: 10px;
    }

    .btnPrevious {
        width: 44px;
        height: 44px;
        background-color: rgba(255, 229, 1, 1);
        border: 2px solid var(--Gradient-stoke, #5e434b);
        border-radius: 100px;

        span {
            margin-left: -4px;
            margin-top: 4px;
        }
    }

    .btnNext {
        width: 44px;
        height: 44px;
        background-color: rgba(255, 229, 1, 1);
        border: 2px solid var(--Gradient-stoke, #5e434b);
        border-radius: 100px;

        span {
            margin-top: 4.5px;
        }
    }

    .btnPrevious:disabled,
    .btnNext:disabled {
        border: 2px solid rgba(169, 177, 182, 1);
        background-color: rgba(249, 249, 238, 1);
    }
}

div[id^="pageWordBookQuiz"]#pageWordBookQuiz .pPaging {
    padding: 0 24px;
}

div[id^=pageRandom] section#pProfileMain .bLink {
    margin-inline: auto;
    width: calc(100% - 48px);
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

@media(min-width: 768px) {
    div[id^=pageRandom] section#pProfileMain .bLink {
        width: 90%
    }
}

@media(min-width: 1024px) {
    div[id^=pageRandom] section#pProfileMain .bLink {
        max-width: 1280px
    }
}

div[id^=pageRandom] section#pProfileMain .bLink a {
    color: var(--colorGray10);
    font-weight: bold;
    text-decoration: underline
}

div[id^="page"]#pageWordBookQuiz,
div[id^="page"]#pageWordBookAnswer {
    background-image: url(../img/ci/bg-word-book.png);
    background-repeat: no-repeat;
    background-size: cover;
}


div[id^="pageWordBookQuiz"]#pageWordBookQuiz,
div[id^="pageWordBookAnswer"]#pageWordBookAnswer {
    .bTop {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px 0 12px;

        .btnBack {
            width: 44px;
            height: 44px;
            background-color: rgba(255, 229, 1, 1);
            border: 2px solid var(--Gradient-stoke, #5e434b);
            border-radius: 100px;
            margin-right: 10px;

            span {
                margin-left: -3px;
            }
        }

        .btnHome {
            width: 44px;
            height: 44px;
            background-color: rgba(255, 229, 1, 1);
            border: 2px solid var(--Gradient-stoke, #5e434b);
            border-radius: 100px;
        }

        .divHeart {
            padding: 0 11px;
            width: 120px;
            display: flex;
            align-items: center;
            height: 44px;
            border: 2px solid var(--primary, rgba(253, 186, 77, 1));
            border-radius: 30px;
            box-shadow: 2px 2px 0px 0px rgba(202, 149, 62, 1);
            background-color: rgba(255, 255, 255, 1);

            .iconHeart {
                width: 25px;
                height: 22px;
                background: url(../img/ci/icon/ico-heart.svg) no-repeat;
            }

            .iconInfo {
                width: 15px;
                height: 16px;
                background: url(../img/ci/icon/ico-info.svg) no-repeat;
            }

            span {
                font-weight: bold;
                margin: 0 5px;

            }

            p.bold {
                font-weight: bold;
            }


            .bTips {
                margin-left: auto;
                margin-right: auto;
                left: 20%;
                right: 0;
                top: 9%;
                display: none;
                position: absolute;
                z-index: 999999;
                overflow: inherit;
                background-color: #ffffff;
                padding: 20px 12px 12px;
                width: 270px;
                border-radius: 8px;
                box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
                box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08);

                span {
                    font-weight: bold;
                    margin-bottom: 4px;
                }

                &:before {
                    content: "";
                    display: block;
                    width: 0px;
                    height: 0px;
                    border-style: solid;
                    border-width: 8px 8px 0 8px;
                    border-color: #ffffff transparent transparent transparent;
                    transform: rotate(180deg);
                    position: absolute;
                    top: -6px;
                    right: 16px;
                }
            }
        }
    }
}

div[id^="pageWordBookQuiz"]#pageWordBookQuiz section#wordBookQuiz {
    .pDropdown {
        margin: 12px 24px;
        color: rgba(94, 67, 75, 1);
        font-weight: bold;
        display: flex;
        justify-content: space-between;

        p {
            width: 250%;
        }
    }

    .pBanner {
        height: 112px;
        width: 343px;
        border: 2px solid var(--primary, rgba(253, 186, 77, 1));
        box-shadow: 2px 2px 0px 0px rgba(202, 149, 62, 1);
        border-radius: 16px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        background-color: rgba(249, 249, 238, 1);
        display: flex;
        position: relative;
    }

    .pBannerWait {
        height: 112px;
        width: 343px;
        border: 2px solid rgba(94, 67, 75, 1);
        border-radius: 16px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        background-color: rgba(229, 235, 239, 1);
        display: flex;
    }
}

div[id^="pageWordBookQuiz"]#pageWordBookQuiz section#wordBookQuiz {
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        /* semi-transparent gray */
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 14px;
    }

    .label {
        width: 120px;
        height: 70px;
        background-size: contain;
        background-image: url(../img/ci/wordBook/Badge.png);
        background-repeat: no-repeat;
    }
}


div[id^="pageWordBookQuiz"]#pageWordBookQuiz section#wordBookQuiz .pBanner .pQuestionImg {
    width: 110px;
    background-image: url(../img/ci/wordBook/wordBookQuizBg.png);
    background-size: cover;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    margin-left: -1px;

    .ant-image {
        display: flex;
        justify-content: center;
        align-items: center;
        vertical-align: middle;
        height: 108px;
    }

    img {
        width: 60%;
    }
}

div[id^="pageWordBookQuiz"]#pageWordBookQuiz section#wordBookQuiz .pBanner .pQuestionTxt {
    font-weight: bold;
    color: rgba(94, 67, 75, 1);
    font-size: 16px;
    margin-top: 8px;
    margin-left: 15px;
    width: 175px;
    position: relative;
}

div[id^="pageWordBookQuiz"]#pageWordBookQuiz section#wordBookQuiz .pBanner .pQuestionBtn {
    font-weight: bold;
    font-size: 16px;
    border-radius: 100px;
    background-color: rgba(255, 229, 1, 1);
    border: 2px solid var(--Gradient-stoke, #5e434b);
    padding: 8px 16px;
    position: absolute;
    bottom: 8px;
}

div[id^="pageWordBookQuiz"]#pageWordBookQuiz section#wordBookQuiz .pBanner .pStar {
    width: 29px;
    height: 28px;
    background-image: url(../img/ci/wordBook/wordBookQuizStar.svg);
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-top: 70px;

    p {
        margin-top: 4px;
    }
}

div[id^="pageWordBookQuiz"]#pageWordBookQuiz section#wordBookQuiz .pBannerWait .pQuestionImg {
    background-color: rgba(169, 177, 182, 1);
    width: 110px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;

    .ant-image {
        display: flex;
        justify-content: center;
        align-items: center;
        vertical-align: middle;
        height: 108px;
    }

    img {
        width: 70px;
    }
}

div[id^="pageWordBookQuiz"]#pageWordBookQuiz section#wordBookQuiz .pBannerWait .pQuestionTxt {
    font-weight: bold;
    color: rgba(84, 88, 91, 1);
    font-size: 16px;
    width: 233px;
    text-align: center;
    margin-top: 40px;
}

div[id^="pageWordBookQuiz"]#pageWordBookQuiz section#wordBookQuiz .myWordBtn {
    cursor: pointer;
    width: 83px;
    position: fixed;
    bottom: 80px;
    right: 5px;
    z-index: 99;
}

div[id^="pageWordBookAnswer"]#pageWordBookAnswer .pTop {
    height: 68px;
    background-color: white;
    text-align: center;
    border-radius: 100px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 24px;
    display: flex;
    position: relative;

}

div[id^="pageWordBookAnswer"]#pageWordBookAnswer .pImage {
    display: flex;
    justify-content: center;
    margin-top: 30px;

    img {
        height: 200px;
        width: auto;
    }

}

div[id^="pageWordBookAnswer"]#pageWordBookAnswer .pAnswer {
    background-color: rgba(255, 241, 219, 1);
    border: 2px solid var(--primary, rgba(253, 186, 77, 1));
    border-radius: 24px;
    height: 326px;
    margin: 0 24px;
    padding: 12px;

    .pInner {
        height: 100%;
        background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23FDBA4DFF' stroke-width='3' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
        border-radius: 12px;
        background-color: rgba(249, 249, 238, 1);
        text-align: center;
        position: relative;

        p {
            line-height: 16px;
            font-size: 12px;
            padding-top: 24px;
            padding-bottom: 10px;
        }
    }
}

div[id^="pageWordBookAnswer"]#pageWordBookAnswer .pAnswer .pInner .pBiscuit {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;

    img {
        width: 90px;
    }
}

div[id^="pageWordBookAnswer"]#pageWordBookAnswer .pAnswer .btnAns,
.ant-drawer-content.wordBookSelect .pInner .pAnswer .btnAns {
    font-weight: bold;
    font-size: 16px;
    border-radius: 100px;
    background-color: rgba(255, 229, 1, 1);
    border: 2px solid var(--Gradient-stoke, #5e434b);
    padding: 8px 16px;
    width: fit-content;
}

div[id^="pageWordBookAnswer"]#pageWordBookAnswer .pAnswer .btnAns {
    position: absolute;
    bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}

div[id^="pageWordBookAnswer"]#pageWordBookAnswer .btn:disabled,
.ant-drawer-content.wordBookSelect .pInner .pAnswer .btnAns:disabled,
div[id^="pageWordBookAnswer"]#pageWordBookAnswer .pAnswer .btnAns:disabled {
    font-weight: bold;
    font-size: 16px;
    border-radius: 100px;
    background-color: rgba(229, 235, 239, 1);
    border: 2px solid var(--on-disble, rgba(169, 177, 182, 1));
    padding: 8px 16px;
    color: rgba(169, 177, 182, 1);
    width: fit-content;
}

div[id^="pageWordBookAnswer"]#pageWordBookAnswer .pStar {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 30px;
    height: 29px;
    background-image: url(../img/ci/wordBook/wordBookQuizStar.svg);
    font-size: 14px;
    font-weight: bold;
    text-align: center;

    p {
        margin-top: 4px;
    }
}

div[id^="pageWordBookAnswer"]#pageWordBookAnswer .pQuestion {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}

.ant-drawer-content.wordBookSelect {
    font-family: "Noto Sans Thai", sans-serif;
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
    background-color: rgba(255, 241, 219, 1);
    border: 2px solid var(--primary, rgba(253, 186, 77, 1));
    padding: 12px;
}

.ant-drawer-content.wordBookSelect .ant-drawer-body {
    padding: 0px !important;
}

.ant-drawer-content.wordBookSelect .pInner {
    height: 100%;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23FDBA4DFF' stroke-width='3' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 12px;
    background-color: #f9f9ee;
    text-align: center;
    padding: 12px;

    h2 {
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0%;
        text-align: center;
        color: var(--Brown, rgba(94, 67, 75, 1));
    }

    p {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
    }
}

.ant-drawer-content.wordBookSelect .pInner .pWordAll {
    display: grid;
    grid-template-columns: auto auto auto auto;
    overflow: auto;
    height: 230px;
    margin-bottom: 15px;
}

.ant-drawer-content.wordBookSelect .pInner .pWordAll .wordCount {
    position: absolute;
    background-color: red;
    border-radius: 100px;
    font-size: 12px;
    color: white;
    width: 18px;
    height: 18px;
    margin-top: 5px;
    margin-left: 5px;
    z-index: 100;
}

.ant-drawer-content.wordBookSelect .pInner .pWordAll {
    img.selected {
        margin-top: 13px;
        width: 65%;
    }
}

.custom-wordbook-modal.ant-modal .ant-modal-content {
    background-color: rgba(249, 249, 238, 1);
    color: rgba(94, 67, 75, 1);
    text-align: center;
    padding: 24px;
    top: 150px;

    .bDetails {
        padding: 0 20px;

        .confirmBtn {
            margin-top: 30px;
            font-weight: bold;
            font-size: 16px;
            border-radius: 100px;
            background-color: rgba(255, 229, 1, 1);
            border: 2px solid var(--Gradient-stoke, #5e434b);
            padding: 8px 16px;
            width: 100%;
        }

        .cancelBtn {
            margin-top: 5px;
            font-weight: bold;
            font-size: 16px;
            border-radius: 100px;
            border: 2px solid var(--Gradient-stoke, #5e434b);
            padding: 8px 16px;
            width: 100%;
        }
    }
}

.custom-wordbook-success-modal.ant-modal .ant-modal-content {
    background-color: rgba(255, 241, 219, 1);
    color: rgba(94, 67, 75, 1);
    text-align: center;
    padding: 20px;
    top: 100px;
    border-radius: 24px;
    box-shadow: 2px 2px 0px 0px rgba(202, 149, 62, 1);

    .bDetails {
        padding: 24px;
        background-color: rgba(249, 249, 238, 1);
        background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23FDBA4DFF' stroke-width='3' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
        border-radius: 12px;

        h2 {
            margin-top: -10px;
        }

        .confirmBtn {
            margin-top: 30px;
            font-weight: bold;
            font-size: 16px;
            border-radius: 100px;
            background-color: rgba(255, 229, 1, 1);
            border: 2px solid var(--Gradient-stoke, #5e434b);
            padding: 8px 16px;
            width: 100%;
        }

        .cancelBtn {
            margin-top: 5px;
            font-weight: bold;
            font-size: 16px;
            border-radius: 100px;
            border: 2px solid var(--Gradient-stoke, #5e434b);
            padding: 8px 16px;
            width: 100%;
        }
    }
}

.select.wb {
    font-size: 14px;
    color: rgba(42, 44, 46, 1);
}