@charset "UTF-8";

*{ font-family: "Noto Serif TC", "Roboto Condensed", "Noto Sans TC", "微軟正黑體", sans-serif; letter-spacing: 1px; font-weight: normal; color: #081332;}
::selection {
	background: #fff5d3;
}
html{ margin: 0; padding: 0;}
body{ margin: 0; padding: 0;}
body.scrollhide{ overflow-y: hidden; height: 100vh;}
img{ display: block;}
a{ text-decoration: none;}
a.text{ position: relative; padding: 0 0 0 20px; color: #163bb5; text-decoration: none;}
a.text::before{ position: absolute; top: 4px; left: 7px; display: block; content: ""; width: 15px; height: 15px; background: url(../images/icon_link.png);}

::placeholder { color: #000;}

::-webkit-scrollbar { width: 8px; background-color: transparent;}
::-webkit-scrollbar-thumb { background-color: #160732;}

.main{ margin: 0 auto;}
body.scrollhide .main{ pointer-events: none;}

@media (max-width:500px){
html{ font-size: 12px;}
::-webkit-scrollbar{ width: 0;}
a.text::before{ top: 1; width: 11px; height: 11px; background-size: contain;}
}


.cut_01{ position: relative; display: flex; width: 100%; min-height: calc(100vh - 35px); padding: 35px; box-sizing: border-box; font-style: italic; z-index: 1;}
.cut_01::after{ position: absolute; top: 25px; left: 25px; width: calc(100% - 50px); height: calc(100% - 50px); display: block; content: ""; border: 1px solid #293d63;}
.cut_01_bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/bg_01.jpg) center no-repeat; background-size: cover; transition: .5s; opacity: 0;}
.cut_01_bg.active{ opacity: 1;}

.cut_01_white{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/bg_01_white.png) center no-repeat; background-size: cover; opacity: 0.9;}
.cut_01_main{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 35px; text-align: center; border: 2px solid #293d63; z-index: 1; box-sizing: border-box;}
.cut_01_main>div{ position: relative;}
.cut_01_main .slogan_a{ margin: 0 auto 50px; max-width: 100%; opacity: 0;}
.cut_01_main .slogan_a.active{ opacity: 1;}
.cut_01_main .slogan_b{ max-width: 100%; position: absolute; top: 50%; transform: translate(0,-50%); filter: brightness(0); transition: 1s;}
.cut_01_main .slogan_b.active{ filter: brightness(1);}
.cut_01_main .slogan_b.active2{ top: 0; transform: translate(0,0); transition: 0.5s;}
.cut_01_main span{ display: block; transform: translate(-10px,0); opacity: 0; transition: 1s;}
.cut_01_main span.active{ opacity: 1; transform: translate(0,0);}
.cut_01_main p{ display: flex; justify-content: center; margin: 35px 0 0;}
.cut_01_main p a{ display: flex; align-items: center; font-size: 3rem; font-weight: 500; transform: translate(0,10px); opacity: 0; pointer-events: none; transition: .5s; }
.cut_01_main p a.active{ transform: translate(0,0); opacity: 1; pointer-events: visible;}
.cut_01_main p a b{ display: inline-block; width: 0px; height: 1px; margin: 0 20px; background: #081332; transition: 0.3s;}
.cut_01_main p a.active b{ width: 100px;}
.cut_01_main p a:hover b{ margin: 0 30px;}
.cut_01_main .monster01{ width: 70px; margin: 0 20px 0 0; opacity: 0; transition: 1s;}
.cut_01_main .monster01.active{ animation: movemonster 1s infinite linear; opacity: 1;}
.cut_01_main .monster02{ width: 61px; margin: 0 30px 0 0; opacity: 0; transition: 1s;}
.cut_01_main .monster02.active{ animation: movemonster 1s infinite linear; opacity: 1;}
.cut_01_main .monster03{ width: 50px; opacity: 0; transition: 1s;}
.cut_01_main .monster03.active{ animation: movemonster 1s infinite linear; opacity: 1;}
@keyframes movemonster {
    0%{ transform: translateX(0) scaleY(1); transform-origin: bottom center;}
    25%{ transform: translateX(-5%) scaleY(1.05); transform-origin: bottom center;}
    30%{ transform: translateX(-10%) scaleY(1); transform-origin: bottom center;}
    70%{ transform: translateX(10%) scaleY(1); transform-origin: bottom center;}
    95%{ transform: translateX(5%) scaleY(1.05); transform-origin: bottom center;}
    100%{ transform: translateX(0) scaleY(1); transform-origin: bottom center;}
}


@media (max-width:768px){
.cut_01{ min-height: 100vh;}
.cut_01_bg{ background: url(../images/bg_01.jpg) 25% no-repeat;}
.cut_01_main p a{ font-size: 2rem;}
.cut_01_main p a b{ margin: 0 10px;}
.cut_01_main p a:hover b{ margin: 0 20px;}
.cut_01_main p a.active b{ width: 40px;}
}

@media (max-width:500px){
.cut_01{ padding: 20px;}
.cut_01::after{ top: 15px; left: 15px; width: calc(100% - 30px); height: calc(100% - 30px);}
.cut_01_main{ padding: 25px;}
.cut_01_main p{ margin: 20px 0 0;}
.cut_01_main p a b{ margin: 0 10px;}
.cut_01_main p a:hover b{ margin: 0 10px;}
.cut_01_main p a.active b{ width: 40px;}
.cut_01_main .monster01{ width: 35px; margin: 0 20px 0 0;}
.cut_01_main .monster02{ width: 30px; margin: 0 25px 0 0;}
.cut_01_main .monster03{ width: 25px;}
}

.white_light{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #fff; z-index: 100000000; pointer-events: none; opacity: 0;}
.white_light.active{ animation: white_light 1s forwards linear;}
@keyframes white_light {
    0%{ opacity: 0;}
    10%{ opacity: 1;}
    20%{ opacity: 1;}
    100%{ opacity: 0;}
}

.cut_02{ position: relative; background: url(../images/bg_02.jpg) center no-repeat; background-size: cover; overflow: hidden; z-index: 1;}
.cut_02 canvas{ max-width: 100%; animation: cut_02 1s forwards ease-in-out;}
@keyframes cut_02 {
    0%{ transform: scale(1) rotate(0deg);}
    30%{ transform: scale(0.9) rotate(0.5deg) translate(0,0);}
    40%{ transform: scale(0.9) rotate(0.5deg) translate(0,0);}
    100%{ transform: scale(0.9) rotate(0.5deg) translate(0,120%);}
}


.cut_02_main{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/bg_03.jpg) center no-repeat; background-size: cover; transform: scale(0.9) rotate(0.5deg) translate(0,120%); transition: .5s;}
.cut_02_main.active{ transform: scale(0.9) rotate(0.5deg) translate(0,20%);}
.cut_02_main::after{ position: absolute; top: 25px; left: 25px; width: calc(100% - 50px); height: calc(100% - 50px); display: block; content: ""; border: 1px solid #293d63;}
.cut_02_main::before{ position: absolute; top: 35px; left: 35px; width: calc(100% - 70px); height: calc(100% - 70px); display: block; content: ""; border: 2px solid #293d63;}
.cut_02 .top_zone{ position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; margin: 40px 0 0;}
.cut_02 .top_zone .slogan{ width: 620px; max-width: 60%; margin: 0 0 0 20px; transform: translate(0,-10px); filter: drop-shadow(0px 7px 2px rgba(0, 0, 0, 0)); opacity: 0; transition: .5s;}
.cut_02 .top_zone.active .slogan{ transform: translate(0,0); filter: drop-shadow(0px 7px 2px rgba(0, 0, 0, 0.2)); opacity: 1;}
.cut_02 .top_zone .logo{ transform: translate(0,-10px); filter: drop-shadow(0px 7px 2px rgba(0, 0, 0, 0)); opacity: 0; transition: .5s;}
.cut_02 .top_zone.active .logo{ transform: translate(0,0); filter: drop-shadow(0px 7px 2px rgba(0, 0, 0, 0.2)); opacity: 1;}
.cut_02 .btn_zone{ position: absolute; right: 10%; bottom: 30px; display: flex; align-items: center; flex-wrap: wrap; width: 600px; max-width: 90vw;}
.cut_02 .btn_01{ width: 55%; cursor: pointer;}
.cut_02 .btn_02{ width: 45%; cursor: pointer;}
.cut_02 .btn_03{ width: 100%; cursor: pointer;}
.cut_02 .btn_zone>div{ transition: .3s;}
.cut_02 .btn_zone>div:hover{ filter: brightness(1.1);}
.cut_02 .btn_zone img{ max-width: 100%; transform: translate(10px,0); opacity: 0; transition: .5s;}
.cut_02 .btn_03 img{ max-width: 50%; margin: 0 auto;}
.cut_02 .btn_zone img.active{ transform: translate(0,0); opacity: 1;}

@media (max-width:1024px){
.cut_02 .top_zone{ left: 5%; width: 90%;}
.cut_02 .top_zone .slogan{ width: 68%; margin: 0 0 0 2%;}
.cut_02 .top_zone .logo{ width: 100%;}
}

@media (max-width:700px){
.cut_02 .btn_zone{ right: 6%;}
}

@media (max-width:500px){
.cut_02_main{ background-position: 37%;}
.cut_02_main.active{ transform: scale(0.9) rotate(0.5deg) translate(0,10%);}
.cut_02_main::after{ top: 15px; left: 15px; width: calc(100% - 30px); height: calc(100% - 30px);}
.cut_02_main::before{ top: 25px; left: 25px; width: calc(100% - 50px); height: calc(100% - 50px);}
.cut_02 .top_zone{ margin: 20px 0 0 0;}
}


.ppair_01{ position: fixed; top: -100vh; left: -100vw; max-width: 37.1%; z-index: 1; pointer-events: none;}
.ppair_01.active{ animation: ppair_01 15s infinite linear;}
@keyframes ppair_01 {
    0%{ top: -100vh; left: -50vw; transform:rotate(25deg) scale(0.6); filter: drop-shadow(-100px 120px 50px rgba(0, 0, 0, 0.1));}
    10%{ top: 40vh; left: 0vw; transform:rotate(0deg) scale(0.8); filter: drop-shadow(-10px 10px 10px rgba(0, 0, 0, 0.5));}
    20%{ top: 120vh; left: 50vw; transform:rotate(-25deg) scale(1); filter: drop-shadow(-50px 60px 50px rgba(0, 0, 0, 0.2));}
    100%{ top: 120vh; left: 50vw; transform:rotate(-25deg) scale(1); filter: drop-shadow(-50px 60px 50px rgba(0, 0, 0, 0.2));}
}
.ppair_02{ position: fixed; bottom: 100vh; left: 100vw; max-width: 10.05%; z-index: 1; pointer-events: none;}
.ppair_02.active{ animation: ppair_02 7.5s infinite linear;}
@keyframes ppair_02 {
    0%{ bottom: 60vh; left: 100vw; transform:rotate(180deg); filter: drop-shadow(80px -100px 30px rgba(0, 0, 0, 0.1));}
    10%{ bottom: 80vh; left: 80vw; transform:rotate(185deg); filter: drop-shadow(10px -55px 20px rgba(0, 0, 0, 0.5));}
    20%{ bottom: 100vh; left: 60vw; transform:rotate(190deg); filter: drop-shadow(40px -10px 10px rgba(0, 0, 0, 0.2));}
    100%{ bottom: 100vh; left: 60vw; transform:rotate(190deg); filter: drop-shadow(40px -10px 10px rgba(0, 0, 0, 0.2));}
}
.ppair_03{ position: fixed; top: 100vh; left: 100vw; max-width: 16.5%;z-index: 1; pointer-events: none;}
.ppair_03.active{ animation: ppair_03 10s infinite linear;}
@keyframes ppair_03 {
    0%{ top: 50vh; left: 100vw; transform:rotate(10deg) scale(1); filter: drop-shadow(-50px 60px 30px rgba(0, 0, 0, 0.2));}
    10%{ top: 75vh; left: 75vw; transform:rotate(0deg) scale(0.8); filter: drop-shadow(-50px 60px 30px rgba(0, 0, 0, 0.2));}
    20%{ top: 100vh; left: 50vw; transform:rotate(-10deg) scale(0.6); filter: drop-shadow(-10px 25px 5px rgba(0, 0, 0, 0.5));}
    100%{ top: 100vh; left: 50vw; transform:rotate(-10deg) scale(0.6); filter: drop-shadow(-10px 25px 5px rgba(0, 0, 0, 0.5));}
}

@media (max-width:500px){
.ppair_01{ max-width: 74.2%;}
.ppair_02{ max-width: 20.1%;}
.ppair_03{ max-width: 33%;}
}


.overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(255,244,226,0.9); z-index: 100000001;}
.lightbox{ position: fixed; top: 10vh; left: 50%; transform: translate(-50%,0); width: 800px; max-width: 90%; height: 80vh; padding: 16px; box-sizing: border-box; background-image: url(../images/popup_bg02.png), url(../images/popup_bg01.jpg); background-repeat: no-repeat, repeat; background-position: bottom, top center; background-size: contain, auto; z-index: 100000002;}
.lightbox::after{ position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); display: block; content: ""; border: 1px solid #293d63; pointer-events: none;}
.lightbox .lightbox_main{ position: relative; height: calc(100% - 50px); margin: 0 0 10px; padding: 0 20px 50px; text-align: center; box-sizing: border-box; overflow: auto; z-index: 1;}
.lightbox .lightbox_btn{ display: flex; height: 40px; box-sizing: border-box;}
.lightbox .lightbox_btn a{ display: flex; align-items: center; justify-content: center; color: #fff; width: 100%; height: 100%; margin: 0 5px 0 0; background: #2e3c62; border-radius: 50px; transition: .3s;}
.lightbox .lightbox_btn a+a{ margin: 0 0 0 5px;}
.lightbox .lightbox_btn a:hover{ background: #081332;}
.lightbox_main h3{ display: flex; justify-content: center; align-items: center; margin: 50px 0 0 0; font-size: 1.625rem;}
.lightbox_main h3 img{ margin: 0 5px 0 0;}
.lightbox_main p{ margin: 20px 0 40px 0;}
.lightbox_main p span{ font-size: 0.875rem;}
.lightbox_main i{ font-style: normal;background: linear-gradient(to bottom, rgba(255, 221, 162, 0) 0%, rgba(255, 221, 162, 0) 50%, rgba(255, 221, 162, 1) 50%, rgba(255, 221, 162, 1) 100%);}
.lightbox_main p+img{ margin: -20px auto 0; max-width: 100%;}

.lightbox_main ol{ max-width: 600px; margin: 20px auto; padding: 0; list-style: none;}
.lightbox_main ol li{ position: relative; padding: 0 0 0 30px; line-height: 2em; list-style: none; counter-increment:li; text-align: left;}
.lightbox_main ol li::before{ position: absolute; left: 0; top: 7px; display: inline-block; width: 16px; line-height: 16px; content: counter(li); padding: 0; font-size: 0.75rem; background: #FFDDA2; color: #081332; text-align: center;}
.lightbox_main ol li a{ color: #163bb5;}
.lightbox_main ol li span{ color: #163bb5;}
.lightbox_main ol li+li{ margin: 10px 0 0 0;}

@media (max-width:500px){
.lightbox{ top: 5vh; height: 90vh; max-width: 95%;}
.lightbox .lightbox_main{ padding: 0 0 30px;}
.lightbox_main h3{ margin: 30px 0 0 0;}
.lightbox_main p{ margin: 10px 0 20px 0;}
.lightbox_main p+img{ margin: -10px auto 0;}
}