@import"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";

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

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

body {
    line-height: 1
}

blockquote,
q {
    quotes: none
}

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

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

ul {
    list-style: none
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 0
}

a {
    text-decoration: none
}

.wrap {
    font-family: "Segoe UI", "Noto Sans SC", Helvetica, sans-serif, "Microsoft Jhenghei", "微軟正黑";
    position: relative;
    overflow: hidden;
    background-color: #01182a
}

.container {
    max-width: 1000px
}

p,
ul {
    line-height: 1.75;
    color: #fff
}

.tit {
    position: relative;
    font-size: 2rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 2rem;
    color: #22cbe8;
    line-height: 1.25
}

.cta {
    margin-top: 2rem;
    text-align: center
}

.cta .bttn {
    background-color: #22cbe8;
    border-radius: 100px;
    padding: 1.25rem 4rem;
    color: #fff;
    letter-spacing: .12rem;
    font-size: 1.5rem;
    display: inline-block;
    border: 2px solid rgba(0, 0, 0, 0);
    transition: all .3s ease-in-out;
    font-weight: 700;
    margin-top: .5rem;
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, .1)
}

.cta .bttn:hover {
    background-color: #fff;
    border: 2px solid #07162d;
    box-shadow: 0 0 10px 2px rgba(7, 22, 45, .25);
    color: #07162d;
    transform: scale(1.05)
}

.modal .modal-dialog {
    max-width: 800px
}

.modal .modal-content {
    position: relative;
    padding: 20px;
    border-radius: .5rem
}

.modal .btn-close {
    position: absolute;
    z-index: 1;
    top: 25px;
    right: 30px;
    transform: rotate(0deg);
    transition: all .3s ease-in-out;
    cursor: pointer
}

.modal .modal-header {
    position: relative;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0
}

.modal .modal-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #919191
}

.modal .modal-header .modal-title {
    font-size: 24px;
    font-weight: bold;
    display: block
}

.modal .modal-body {
    font-size: 20px;
    font-weight: 300;
    color: #231f20;
    line-height: 1.6;
    text-align: left
}

.modal .modal-body p {
    color: #01182a
}

.modal .modal-body .bold {
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.5rem
}

.modal .modal-body span {
    font-weight: bold
}

.modal .modal-body ol {
    list-style: decimal;
    padding: 0 0 0 20px
}

.modal .modal-body ul {
    font-size: 18px;
    list-style: disc;
    padding: 0 0 0 20px
}

@media(max-width: 768px) {
    p {
        line-height: 1.5
    }

    .container {
        max-width: 720px
    }

    .tit {
        font-size: 1.5rem;
        margin-top: 0;
        line-height: 1.5;
        margin-bottom: 1rem
    }

    .cta {
        margin-top: 1rem
    }

    .cta p {
        font-size: 1rem
    }

    .cta .date {
        margin-bottom: .2rem
    }

    .cta .date span {
        font-size: 1.25rem
    }

    .cta .date .tue {
        font-size: 1.125rem
    }

    .cta .date .line {
        display: none
    }

    .cta .time {
        margin-bottom: .2rem
    }

    .cta .bttn {
        padding: 1rem 3.75rem;
        font-size: 1.25rem;
        letter-spacing: 3px;
        font-weight: 500;
        margin-top: .25rem;
        box-shadow: 0 0 4px 2px rgba(0, 0, 0, .25)
    }

    .cta .bttn:hover {
        background-color: #fff;
        border: 2px solid #07162d;
        box-shadow: 0 0 10px 2px rgba(7, 22, 45, .25);
        color: #07162d;
        transform: scale(1.05)
    }

    .modal .modal-header {
        padding: 0 0 .75rem 0
    }

    .modal .modal-header .modal-title {
        font-size: 1.1rem;
        text-align: left
    }

    .modal .modal-body {
        font-size: 1rem;
        line-height: 1.75;
        padding: .5rem
    }

    .modal .modal-body .bold {
        font-size: 1.25rem
    }

    .modal .btn-close {
        top: 12px;
        right: 12px;
        width: 6px;
        height: 6px
    }
}

.fix_aside {
    position: fixed;
    z-index: 99;
    bottom: 1%;
    right: -20%;
    display: flex;
    flex-direction: column;
    transition: all 1s
}

.fix_aside.is_active {
    right: .5%
}

.fix_aside .item {
    width: 64px;
    height: 64px;
    background-color: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
    border-radius: .5rem;
    margin: .35rem;
    cursor: pointer;
    transition: all .3s ease-in-out
}

.fix_aside .item.signup {
    background-color: #22cbe8;
    position: relative
}

.fix_aside .item.signup p {
    position: absolute;
    top: 20%;
    left: 25%;
    color: #fff;
    line-height: 1.25
}

.fix_aside .item.scrollTop {
    background-image: url(../../assets/images/icons/arrow_top.png);
    background-repeat: no-repeat;
    background-position: center center
}

.fix_aside .item:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0)
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 999;
    transition: all .2s ease-out
}

nav.is_active {
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(120, 135, 145, .15)
}

nav.is_active .nav_area {
    align-items: center
}

nav.is_active .nav_area .logos {
    margin: .75rem 1rem
}

nav.is_active .nav_area .logos .logos-inner {
    background-image: url(../../assets/images/kv/logo.svg);
    height: 40px
}

nav.is_active .nav_area ul {
    height: 50px;
    display: flex
}

nav.is_active .nav_area ul li a {
    color: #01182a;
    font-size: 1.15rem
}

nav.is_active .nav_language {
    display: block
}

nav .nav_area {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

nav .nav_area .logos {
    transition: all .3s ease-in-out;
    margin: 2.25rem 3rem
}

nav .nav_area .logos .logos-inner {
    background-size: contain;
    background-repeat: no-repeat;
    width: 131px;
    max-width: 131px;
    height: 72px
}

nav .nav_area ul {
    position: relative;
    width: auto;
    height: 60px;
    margin: 0 5rem 0 0;
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transition: all .2s ease-out
}

nav .nav_area ul li {
    position: relative;
    width: auto;
    height: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px
}

nav .nav_area ul li a {
    position: relative;
    width: auto;
    height: auto;
    box-sizing: border-box;
    padding: 3px;
    color: #07162d;
    font-weight: 500;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease-out
}

nav .nav_area ul li a:hover {
    transform: translateY(-2px)
}

nav .nav_mobile {
    display: none
}

nav .nav_language {
    position: absolute;
    top: 50%;
    right: 2rem;
    cursor: pointer;
    text-align: right;
    transform: translateY(-50%);
    display: none;
    transition: all .3s ease-in-out
}

nav .nav_language .hover {
    display: inline-block;
    position: relative
}

nav .nav_language .hover:hover .hover_menu {
    display: block
}

nav .nav_language .hover img {
    width: 32px;
    line-height: 0
}

nav .nav_language .hover_holder {
    cursor: pointer
}

nav .nav_language .hover_menu {
    position: absolute;
    padding: .25em 0;
    display: none;
    right: 0%
}

nav .nav_language .hover_menu .hover_item {
    cursor: pointer;
    display: block;
    margin-top: .5em;
    background-color: #e1000f;
    text-align: center;
    padding: .5rem .75rem;
    border-radius: 100px;
    color: #fff;
    transition: all .3s ease-in-out;
    min-width: 90px
}

nav .nav_language .hover_menu .hover_item:hover {
    background-color: rgba(225, 0, 15, .8);
    transform: translateY(-2px)
}

header {
    /* height: min(56.25vw, 100vh); */
    width: 100%;
    position: relative
}

header .kv {
    position: relative;
    /* height: min(56.25vw, 100vh) */
}

header .bg {
    width: 100%;
    /* height: min(56.25vw, 100vh); */
    position: relative;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    /* animation-name: kv-ani; */
    animation-duration: 12s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite
}

@keyframes kv-ani {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1)
    }

    60% {
        transform: translate(-50%, -50%) scale(1.1)
    }
}

header .logo1 {
    position: absolute;
    z-index: 1;
    top: 5%;
    left: 3%;
    width: 7.9166666667%
}

header .logo2 {
    position: absolute;
    z-index: 1;
    top: 8%;
    right: 3.5%;
    width: 12.7604166667%
}

header .title {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 85%);
    width: 93.4375%;
    mix-blend-mode: luminosity
}

header .title-inner {
    position: relative
}

header .title-inner .t1 {
    position: absolute;
    width: 17.8372352285%;
    top: -120%;
    left: 0%
}

header .title-inner .t2 {
    position: absolute;
    width: 29.988851728%;
    top: -72%;
    left: 0%
}

header .title-inner .t3 {
    position: absolute;
    width: 30.7134894091%;
    top: -72%;
    right: 0%
}

header .title-inner .t4 {
    position: relative;
    width: 100%
}

header .title-inner .t5 {
    position: absolute;
    width: 99.5540691193%;
    top: 112%;
    left: 0%
}

.main {
    position: relative;
    z-index: 1;
    background: linear-gradient(to right, #00000A 55%, rgba(0, 31, 59, 0.5), #000D18)
}

.sc_intro {
    position: relative;
    z-index: 1;
    padding: 3rem 0 1rem 0;
    text-align: center
}

.sc_intro h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #22cbe8;
    line-height: 1.5;
    letter-spacing: .75px
}

.sc_intro h3 {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 2rem 0;
    line-height: 1.75;
    color: #fff;
    padding: .25rem;
    letter-spacing: .75px;
    border-bottom: 1px solid #fff
}

.sc_intro p {
    margin-bottom: 1rem;
    font-size: 1.125rem
}

.sc_intro ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-size: 1.125rem;
    margin-bottom: 1.25rem
}

.sc_intro ul li {
    position: relative;
    width: 33%;
    padding: .125rem;
    margin-bottom: .5rem;
    text-align: center;
    font-size: 1.125rem
}

.sc_intro ul li .highlight {
    position: absolute;
    z-index: 1;
    top: -10px;
    left: 50%;
    transform: translate(-52%);
    width: 85%;
    font-weight: 600;
    font-size: 1.175rem;
    letter-spacing: .75px;
    background-color: #2880b8;
    color: #fff;
    margin-bottom: 0rem;
    clip-path: polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)
}

.sc_intro ul li .text {
    background-color: #fff;
    color: #01182a;
    padding: 1.5rem 1.25rem .75rem 1.5rem;
    line-height: 1.5;
    clip-path: polygon(7% 0%, 100% 0%, 93% 100%, 0% 100%);
    min-height:120px;
}

.sc_form {
    padding: 2rem 0 5rem 0
}

.sc_form .tit {
    font-size: 1.5rem;
    line-height: 2;
    margin-bottom: 1.75rem;
    text-align: center
}

.sc_form .tit span {
    color: #fff;
    line-height: 1.75
}

.sc_form .book {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 3.5rem
}

.sc_form .book .pic {
    width: 20%
}

.sc_form .book .pic img {
    box-shadow: 0 0 24px 4px hsla(0, 0%, 100%, .25)
}

.sc_form .book .desc {
    width: 75%;
    text-align: center
}

.sc_form .book .desc p {
    color: #fff
}

.sc_form .book .desc .tit {
    position: relative;
    color: #fff;
    font-size: 1.625rem;
    letter-spacing: 2px;
    padding-bottom: .5rem;
    margin-bottom: .25rem;
    margin-top: 0
}

.sc_form .book .desc .tit::after {
    content: "";
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%);
    height: .5px;
    width: 80%;
    margin: 0 auto;
    background-color: #fff
}

.sc_form .book .desc .subtit {
    font-weight: 300;
    font-size: 1.125rem;
    letter-spacing: 12px;
    margin-bottom: 1rem
}

.sc_form .book .desc .text {
    letter-spacing: 1px;
    margin: 0 2rem
}

.sc_form .book .desc .text span {
    font-weight: 700
}

.sc_form .book .desc .bttn {
    display: block;
    background-color: #007285;
    border-radius: 100px;
    color: #fff;
    padding: 1rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 8px;
    margin-top: 1.5rem;
    transition: all .3s ease-in-out
}

.sc_form .book .desc .bttn:hover {
    background-color: #22cbe8
}

.sc_form .others {
    margin-bottom: 4rem
}

.sc_form .others p {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 18px
}

.sc_form .others p span {
    color: #e1000f;
    font-weight: 700;
    font-size: 22px
}

.sc_form .others .cnt {
    display: flex;
    gap: 1rem
}

.sc_form .others .cnt .item {
    background-color: #000
}

.sc_form .others .cnt .item p {
    padding: .5rem .25rem;
    margin-bottom: 0;
    font-size: 14px
}

.sc_form .form-tit {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.75;
    color: #fff;
    padding: .25rem;
    letter-spacing: .75px;
    border-bottom: 1px solid #fff
}

.sc_form .form-inner.company .list .list-item {
    width: 100%
}

.sc_form .form-inner.statement {
    display: flex
}

.sc_form .form-inner.statement .checkbox {
    margin-right: .5rem;
    height: 20px;
    width: 20px
}

.sc_form .form-inner.statement label {
    line-height: 1.5;
    width: 100%
}

.sc_form .form-inner.time-select .form-tit {
    font-size: 1.25rem
}

.sc_form .form-inner.time-select .list .list-item {
    width: 32%
}

.sc_form .form-inner a {
    text-decoration: underline;
    color: #22cbe8
}

.sc_form .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 2rem
}

.sc_form .list-item {
    width: 49%;
    margin-bottom: 1rem
}

.sc_form .list-item p {
    font-size: .9rem;
    color: #919191
}

.sc_form label {
    display: block;
    margin-bottom: .5rem;
    color: #fff
}

.sc_form label span {
    color: #e1000f
}

.sc_form .input,
.sc_form select {
    width: 100%;
    background-color: #fff;
    border: 0;
    border-bottom: 1px solid rgba(1, 24, 42, .5);
    padding: .5rem
}

.sc_form .form-btn {
    text-align: center;
    margin-top: 3rem
}

.sc_form .form-btn .btn {
    display: inline-block;
    background-color: #e1000f;
    color: #fff;
    border: 0;
    border-radius: 100px;
    padding: 1rem 3rem;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-align: center
}

@media(max-width: 768px) {
    nav {
        height: 35px
    }

    nav .nav_area {
        position: absolute;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: #e1000f;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    nav .nav_area .logos {
        display: none
    }

    nav .nav_area ul {
        position: relative;
        width: auto;
        height: auto;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        top: 0%;
        left: 0%
    }

    nav .nav_area ul li {
        position: relative;
        width: 100%;
        height: auto;
        padding: 15px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    nav .nav_area ul li a {
        position: relative;
        width: auto;
        height: auto;
        box-sizing: border-box;
        padding: 3px;
        color: #fff;
        font-size: 1rem;
        font-weight: 500;
        overflow: hidden;
        text-decoration: none;
        cursor: pointer;
        transition: all .3s ease-in-out
    }

    nav .nav_area ul li a:hover {
        transform: translateY(-4px)
    }

    nav .nav_mobile {
        position: relative;
        display: block
    }

    nav .nav_mobile-btn {
        position: absolute;
        top: 5px;
        right: 12px;
        width: 35px;
        height: 35px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    nav .nav_mobile-btn-line {
        position: relative;
        display: block;
        width: 25px;
        height: 2px;
        background: #cbcbcb;
        border-radius: 4px;
        margin: 2.5px 0
    }

    nav .nav_language {
        display: block;
        position: absolute;
        top: 60px;
        right: 0px;
        cursor: pointer;
        padding: 0 12px;
        text-align: right;
        transform: translateY(0)
    }

    header .bg {
        height: auto
    }

    header .logo1 {
        width: 10%
    }

    header .logo2 {
        width: 30%
    }

    .sc_intro {
        padding: 30px 8px 0px 8px
    }

    .sc_intro h2 {
        font-size: 1.25rem;
        margin-bottom: 1rem
    }

    .sc_intro p {
        margin-bottom: .75rem;
        font-size: 1rem;
        line-height: 1.75
    }

    .sc_intro ul {
        flex-direction: column
    }

    .sc_intro ul li {
        width: 100%
    }

    .sc_intro ul li .highlight {
        transform: translate(-55%);
        width: 85%;
        font-size: 1.125rem;
        letter-spacing: .75px;
        clip-path: polygon(2% 0%, 100% 0%, 98% 100%, 0% 100%)
    }

    .sc_intro ul li .text {
        background-color: #fff;
        color: #01182a;
        padding: 1.5rem 1.5rem .75rem 1.5rem;
        line-height: 1.5;
        clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
        min-height:100%;
    }

    .sc_form {
        padding: 1rem 0 5rem 0
    }

    .sc_form .tit {
        font-size: 1.075rem
    }

    .sc_form .tit span {
        color: #fff;
        line-height: 1.75
    }

    .sc_form .book {
        flex-direction: column;
        margin-bottom: 1rem
    }

    .sc_form .book .pic {
        width: 80%;
        margin: 0 auto 2rem auto
    }

    .sc_form .book .desc {
        width: 100%
    }

    .sc_form .book .desc .tit {
        font-size: 1.15rem;
        letter-spacing: 0px;
        padding-bottom: .5rem
    }

    .sc_form .book .desc .tit::after {
        width: 100%
    }

    .sc_form .book .desc .subtit {
        font-size: 1rem;
        letter-spacing: 10px
    }

    .sc_form .book .desc .text {
        letter-spacing: 1px;
        line-height: 1.75;
        margin: 0 0 1.5rem 0
    }

    .sc_form .others {
        margin-bottom: 2rem
    }

    .sc_form .others p {
        font-size: 16px
    }

    .sc_form .others p span {
        font-size: 18px
    }

    .sc_form .others .cnt {
        flex-direction: column
    }

    .sc_form .others .cnt .item {
        width: 80%;
        margin: 0 auto
    }

    .sc_form .others .cnt .item p {
        padding: .5rem
    }

    .sc_form .form-inner.time-select .form-tit {
        font-size: 1rem
    }

    .sc_form .form-inner.time-select .list .list-item {
        width: 100%
    }

    .sc_form .form-tit {
        font-size: 1.25rem
    }

    .sc_form .list {
        margin-bottom: 1rem
    }

    .sc_form .list-item {
        width: 100%
    }
}

/*# sourceMappingURL=all.min.css.map */