* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Noto Sans TC', sans-serif;
}

html {
    background-color: #F2F6F9;
    font-size: 62.5%;
    letter-spacing: 2px;
}

h3 {
    color: #3E3A39;
    font-size: 5em;
    text-align: center;
    line-height: 55px;
    font-weight: 700;
    margin: 0 0 15px;
}

h4 {
    font-size: 3.2em;
    color: #0070C0;
}

h5 {
    color: #0070C0;
    font-size: 3em;
    text-align: center;
}

p {
    color: #3E3A39;
    font-size: 1.8em;
    font-weight: 500;
    line-height: 25px;
}

span {
    color: #7F8080;
    font-size: 1.5em;
    text-align: center;
}

img {
    vertical-align: middle;
}

.item1 .title {
    margin-bottom: 10px;
}

.item1 .title img {
    width: 67px;
    margin: 0 10px 40px 0;
}

.item1,
.item1 .title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.item1 .title h3::after {
    content: '';
    max-width: 150px;
    height: 5px;
    display: block;
    background-color: #3E3A39;
    margin: 20px auto 0;
}

.item1 h3 img {
    padding: 0 10px 20px 0;
}

.wrap {
    width: 100%;
    margin: auto;
    height: auto;
    overflow: hidden;
}

.table {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 30px 0;
    text-align: left;
}

.table thead,
.thead {
    background-color: #0070C0;
}

th,
td {
    border: 1px solid #7F8080;
    padding: 0 10px;
}

.table th,
.thead {
    font-size: 2.2em;
    font-weight: 500;
    color: #fff;
    padding: 15px 10px;
}

.table td {
    font-size: 1.8em;
    font-weight: 500;
}

@media screen and (max-width:650px) {
    .item1 .title img {
        margin: 0 0 15px;
    }
}

@media screen and (max-width:450px) {
    h3 {
        font-size: 3.5em;
        line-height: 40px;
        margin: 0;
    }

    h4 {
        font-size: 2.2em;
    }

    .item1 .title h3::after {
        max-width: 100px;
    }

    h5 {
        font-size: 3em;
    }

    p {
        font-size: 1.5em;
        line-height: 21px;
    }

    span {
        font-size: 1em;
    }

    th,
    td {
        padding: 5px;
    }

    .table th {
        font-size: 1.5em;
    }

    .table td {
        font-size: 1.3em;
        line-height: 16px;
        letter-spacing: 0.5px;
    }
}

a.water{
    background: url(../img/water.png) no-repeat;
    background-size: contain;
    width: 150px;
    height: 150px;
    position: fixed;
    bottom: 50px;
    right: 30px;
    z-index: 1000;
    transition: .3s ease-in-out;
    animation-name: button;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}
a.water:hover{
    transform: translateX(-7px);
}
@keyframes button{
        0%  {filter: brightness(1.0);}
        75% {filter: brightness(1.1);}
        100%{filter: brightness(1.0);}
}
@media screen and (max-width:1250px){
    a.water{
    right: 10px;
}
}
@media screen and (max-width:750px){
    a.water{
        bottom: 40px;
        width: 105px;
        height: 105px;
}
}
/* header */
.header {
    width: 100%;
    margin: auto;
    position: fixed;
    transition: background-color 0.3s ease;
    background-color: transparent;
    z-index: 500;
}

.header.scrolled {
    background-color: rgba(241, 245, 249, 0.9);
}

.header .item {
    max-width: 1200px;
    margin: auto;
}

.header .item img {
    width: 370px;
    margin: 25px 0 25px 4px;
}

@media screen and (max-width:450px) {
    .header .item img {
        width: 280px;
    }
}

/* kv */
.kv {
    background: url(../img/kv-bg.png) #fff no-repeat bottom center;
    width: 100%;
    height: 690px;
    position: relative;
    overflow: hidden;
}

.kv > div{
    position: absolute;
}

.kv .metro{
    background: url(../img/kv-metro.png) no-repeat center center;
    background-size: contain;
    width: 604px;
    height: 157px;
    top: 514px;
    left: calc(50% + 356px);
}


.kv .cont{
    display: flex;
    justify-content: center;
    width: 100%;
    top: 111px;
    padding-left: 62px;
}

/* part1 */
.kv .part1{
    max-width: 387px;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.kv .kv_effect{
    position: absolute;
    width: 100%;
}
.kv .kv_effect .effect1{
    background: url(../img/kv-effect-1.svg) no-repeat center center;
    background-size: contain;
    width: 21px;
    height: 24px;
    position: absolute;
    top: 15px;
    left: calc(50% - 198px);
    filter: drop-shadow(0px 3px 9px #8fd4f7);
    animation: star 1.2s infinite;
}
.kv .kv_effect .effect2{
    background: url(../img/kv-effect-2.svg) no-repeat center center;
    background-size: contain;
    width: 100%;
    max-width: 151px;
    height: 141px;
    position: absolute;
    left: 1%;
    filter: drop-shadow(0px 3px 13px #b9e9fc);
}

.kv .fade{
    position: absolute;
    width: 100%;
    height: 100%;
}

.kv .fade .kv_t1_effect{
    background: url(../img/kv-effect-1.svg) no-repeat center center;
    background-size: contain;
    width: 15px;
    height: 17px;
    position: absolute;
    top: 95px;
    left: calc(50% + 120px);
    animation: star 1.5s infinite;
}
.kv .kv_t1{
    background: url(../img/kv-t1-2.png) no-repeat center center;
    background-size: contain;
    width: 290px;
    height: 209px;
    margin: 45px 0 0 20px;
}
.kv .kv_icon{
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
}
.kv .kv_icon img{
    filter: drop-shadow(0px 3px 4px #72caf7);
    width: 100%;
}
.kv .kv_icon .icon1{
    width: 106px;
    height: auto;
}
.kv .kv_icon .icon2{
    width: 115px;
    height: auto;
    padding: 20px 15px 0 25px;
}

.kv .kv_icon .icon3{
    width: 124px;
    height: auto;
}

/* part2 */
.kv .part2{
    max-width: 509px;
    margin-left: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.kv .part2 .annotation{
    padding: 0 26px 8px;
    border-radius: 99px;
    color: #7f8080;
    background-color: #f9f9f9;
}
.kv .part2 .annotation ul li{
    font-size: 1.1rem;
    line-height: 1.2;
    letter-spacing: 1.5px;
    margin-left: 10px;
}
.kv .part2 .annotation ul li::marker{
    content: "∗";
    font-size: 1.8rem;
    color: #7f8080;
}

.kv .kv_t2{
    background: url(../img/kv-t2.png) no-repeat center center;
    background-size: contain;
    width: 100%;
    max-width: 292px;
    height: 76px;
}

.kv .part2_cont{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 509px;
    padding:6px 10px 10px 10px;
    margin-top: 14px;
    border-radius: 33px;
    background-color: #fff;
    filter: drop-shadow(0px 3px 4px #72caf7);
}

.kv .detail{
    display: flex;
    align-items: center;
    margin:4px 0 10px;
}

.kv .box{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 155px;
    padding: 15px 0;
    border-radius: 29px;
    background-color: #fdffd7;
}
.kv .box:nth-child(2){
    margin: 0 10px;
}

.kv .kv_t3{
    background: url(../img/kv-t3.png) no-repeat center center;
    background-size: contain;
    width: 377px;
    height: 94px;
}
.kv .kv_t4{
    background: url(../img/kv-t4.png) no-repeat center center;
    background-size: contain;
    width: 134px;
    height: 61px;
}
.kv .kv_t5{
    background: url(../img/kv-t5.png) no-repeat center center;
    background-size: contain;
    width: 91px;
    height: 38px;
}
.kv .kv_t6{
    background: url(../img/kv-t6.png) no-repeat center center;
    background-size: contain;
    width: 152px;
    height: 61px;
}
.kv .kv_t7{
    background: url(../img/kv-t7.png) no-repeat center center;
    background-size: contain;
    width: 93px;
    height: 38px;
}
.kv .kv_t8{
    background: url(../img/kv-t8.png) no-repeat center center;
    background-size: contain;
    width: 134px;
    height: 61px;
}
.kv .kv_t9{
    background: url(../img/kv-t9.png) no-repeat center center;
    background-size: contain;
    width: 108px;
    height: 38px;
}
.kv .kv_t10{
    background: url(../img/kv-t10.png) no-repeat center center;
    background-size: contain;
    width: 298px;
    height: 34px;
    margin-top: 10px;
}

@media screen and (max-width:1440px) {
    .kv .cont{
        padding-left: 0px;
    }
}
@media screen and (max-width:1024px) {
    .kv .cont{
        padding-left: 0px;
    }
}
@media screen and (max-width:820px) {
    .header .item img{
        margin: 25px 0 25px 20px;
    }
    .kv {
        background: url(../img/kv-bg-m.png) #fff no-repeat bottom center;
        background-size: cover;
        width: 100%;
        height: 1029px;
    }
    .kv .metro{
        top: 851px;
        left: calc(50% + 158px);
    }
    .kv .cont{
        flex-direction: column;
        align-items: center;
        top: 80px;
    }
    .kv .part1{
        padding-top: 0;
    }
    .kv .part2{
        margin: 55px 0 0 0;
    }
}
@media screen and (max-width:600px) {
    .kv{
        height: 1200px;
    }
    .kv .metro{
        display: none;
    }
    .kv .kv_icon{
        width: 85%;
        padding-top: 10px;
    }
    .kv .kv_icon .icon2{
        padding: 0px 15px 0 25px;
    }
    .kv .kv_t2{
        width: 80%;
    }
    .kv .kv_t3{
        width: 90%;
    }
    .kv .part2_cont{
        max-width: 310px;
    }
    .kv .detail{
        flex-direction: column;
    }
    .kv .box{
        flex-direction: row;
        justify-content: center;
        width: 290px;
        padding: 15px 10px 15px 0;
    }
    .kv .box:nth-child(2){
        margin: 10px 0;
    }
    .kv .part2 .annotation ul li::marker{
        content: "＊";
        font-size: 1rem;
        line-height: 2.2;
    }
    .kv .kv_effect{
        top: -1%;
    }
    .kv .kv_effect .effect2{
        left: calc(50% - 160px);
        width: 30%;
    }
    .kv .kv_effect .effect1{
        left: calc(50% - 165px);
    }
    
}
@media screen and (max-width:425px) {
    .kv{
        height: 1200px;
    }
    .kv .car2{
        display: none;
    }
    .kv .kv_icon{
        width: 85%;
        padding-top: 10px;
    }
    .kv .kv_icon .icon2{
        padding: 0px 15px 0 25px;
    }
    .kv .kv_t2{
        width: 80%;
    }
    .kv .kv_t3{
        width: 90%;
    }
    .kv .part2_cont{
        max-width: 310px;
    }
    .kv .detail{
        flex-direction: column;
    }
    .kv .box{
        flex-direction: row;
        justify-content: center;
        width: 290px;
        padding: 15px 10px 15px 0;
    }
    .kv .box:nth-child(2){
        margin: 10px 0;
    }
    .kv .part2 .annotation ul li::marker{
        content: "＊";
        font-size: 1rem;
        line-height: 2.2;
    }
    .kv .kv_effect{
        top: -1%;
    }
    .kv .kv_effect .effect2{
        left: calc(50% - 160px);
        width: 30%;
    }
    .kv .kv_effect .effect1{
        left: calc(50% - 165px);
    }
    
}

/* content */
.content {
    max-width: 1100px;
    margin: auto;
    padding: 0 20px;
}

.content2 {
    width: 100%;
    background: url(../img/p2-bg.png)no-repeat bottom center, rgba(255, 255, 255, 1);
}

.content3 {
    width: 100%;
    height: auto;
    background: url(../img/p3-bg.png)no-repeat top center;
}

.content4 {
    width: 100%;
    background-color: #0091BC;
}

/* p1 */
/* .p1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto;
    padding: 70px 0;
} */
.p1 {
    position: relative;
    width: 100%;
    padding: 4rem 0 10rem;
}

/* .p1_t {
    max-width: 386px;
    height: 74px;
    background: url(../img/p1_t.png) no-repeat center center / contain;
    margin: 35px auto 30px;
} */

/* send */
.send .item2 {
    width: 100%;
    background-color: #fff;
    border-radius: 0 40px 0 40px;
    box-shadow: 1px 2px 15px 4px rgba(27, 177, 201, 0.2);
    padding: 40px 0 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.send .detail {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.send .detail .enter form {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.send input::placeholder {
    color: #DCDDDD;
}

.send .detail .enter .name {
    width: 100%;
    display: block;
}

.send .detail .enter .text {
    width: 45%;
    display: inline-block;
}

.send .detail .enter .text2 {
    width: 60%;
    display: inline-block;
}


.send .detail .enter input {
    border: 1px solid #0070C0;
    padding: 20px 8px;
    margin: 8px 0;
    width: 100%;
}

.send .name input,
.send .text input,
.send .text2 input {
    font-size: 1.7em;
}

.send .detail #name,
.send .detail .name {
    width: 100%;
}

.send .detail #text,
.send .detail .text,
.send .detail .verification {
    width: 100%;
}

/*#verification {*/
#CaptchaVer{
margin: 8px 0;
    display: inline-block;
    width: 48%;
}

.flex {
    display: flex;
}

canvas {
    margin: 8px 10px;
    padding: 0;
    width: 25%;
    height: 65px;
    display: inline;
    border: 1px solid #0070C0;
    vertical-align: top;
}

#login {
    clear: both;
    position: absolute;
    top: -30px;
}

.send .detail .bt2 {
    border: none;
    background-color: #E38100;
    border-radius: 50px;
    padding: 18px 60px;
    opacity: 1;
    cursor: pointer;
}

.send .detail .bt2:hover {
    opacity: 0.8;
}

.send .detail .bt2 p {
    color: #fff;
    letter-spacing: 1.5px;
}

.send .detail .bt3 {
    width: 15%;
    border: none;
    background-color: transparent;
    /* padding: 30px 10px; */
    cursor: pointer;
}

.send .detail .bt3 p {
    color: #0070C0;
    letter-spacing: 1.5px;
    font-size: 1.6rem;
}

.send .detail .hook {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 25px 0 20px;
}

.send .detail .hook form {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.send .detail .hook #male {
    width: 15px;
}

.send .detail .hook input {
    appearance: none;
}

.send .detail .hook input[type="checkbox"] {
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid #3E3A39;
    background-color: #fff;
    color: #fff;
}

.send .detail .hook input[type="checkbox"]:checked {
    background-color: #0070C0;
    color: #fff;
}

.send .detail .hook input[type="checkbox"]:checked::before {
    content: "✓";
    display: block;
    color: #fff;
    text-align: center;
    font-weight: 900;
    line-height: 1;
}

#checkbox1,
#checkbox2 {
    color: #fff;
}

.send .detail .hook label {
    width: 100%;
    margin: -6px 5px 12px 3px;
    letter-spacing: .5px;
}

.send .detail .hook label p {
    font-size: 1.6em;
}

.send .detail .hook label a {
    color: #0070C0;
    text-decoration: none;
}

.send .detail .text .bday {
    width: 100%;
    display: flex;
}

.send .detail .text select {
    width: 100%;
    border: 1px solid #0070C0;
    padding: 20px 8px;
    margin: 8px 10px 8px 0;
    font-size: 1.7em;
}

@media screen and (max-width:640px) {
    canvas {
        width: 35%;
        height: 45px;
        margin-top: 10px;
    }

    .send .detail .enter form {
        flex-direction: column;
    }

    .send .detail .enter .text {
        width: 100%;
    }

    .send .detail .enter .text2 {
        width: 100%;
    }

    .send .detail .bt1 p,
    .send .detail .bt2 p {
        font-size: 1.5em;
    }

    .send .detail .bt1 img {
        width: 25px;
    }

    .send .detail .bt3 {
        width: 20%;
    }

    .send .detail .hook {
        width: 90%;
    }
    canvas {
    width: 20%;
}
}

@media screen and (max-width:450px) {
    .send .item2 {
        box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.2);
        padding: 30px 0px;
    }

    .send .detail {
        width: 75%;

    }

    .send .detail .bt1 {
        padding: 10px;
    }

    .send .detail .bt1 p,
    .send .detail .bt2 p {
        font-size: 1.4em;
    }

    .send .detail .enter form {
        justify-content: center;
        flex-direction: column;
    }

    .send .detail .enter .text {
        width: 100%;
        display: block;
    }

    .send .name input,
    .send .text input,
    .send .verification input {
        font-size: 1.5em;
    }

    .send .detail .enter input {
        padding: 15px 8px;
    }

    .send .detail .text select {
        width: 100%;
        border: 1px solid #0070C0;
        background-color: #fff;
        padding: 20px 8px;
        margin: 8px 5px 8px 0;
        font-size: 1.5em;
    }

    .send .detail .hook label p {
        font-size: 1.4em;
    }

    .send .detail .hook form {
        width: 110%;
    }
}

/* p2 */
.p2 {
    width: 100%;
    padding: 70px 0;
}

.p2 span {
    font-size: 1.7rem;
    margin-top: 10px;
}

.p2 .cont {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
}

.p2 .part1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}

.p2 .item2,
.p2 .item3 {
    margin-top: 40px;
}

.p2 .item2 h4,
.p2 .item3 h4 {
    text-align: center;
    position: relative;
    z-index: 2;
    font-size: 3em;
    font-weight: 500;
    max-width: 441px;
    margin: auto;
    padding: 10px 7px;
    background-color: #0070C0;
    color: #fff;
    border-radius: 99px;
    margin-bottom: -25px;
}

.p2 .item2 p,
.p2 .item3 p {
    letter-spacing: 0;
}

.p2 .item2 .text,
.p2 .item3 .text {
    position: relative;
    z-index: 1;
    border: 2px solid #0070C0;
    background-color: #fff;
    box-shadow: 0px 4px #DAF2FE;
    border-radius: 20px;
    padding: 35px 30px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.p2 .item3 h4 {
    background-color: #e38100;
}

.p2 .item3 .text {
    border: 2px solid #e38100;
    box-shadow: 0px 4px #ffedbb;
}

.p2 .part1 .item2 {
    width: 49%;
    text-align: justify;
}

.p2 .part1 .item2:nth-child(2) h4 {
    margin-bottom: -45px;
}

.p2 .part2 .item2,
.p2 .part2 .item3 {
    width: 100%;
}

.p2 .part1 .item2 .text {
    min-height: 150px;
}

.p2 .part2 .item2 .text,
.p2 .part2 .item3 .text {
    min-height: 93px;
    padding: 35px 40px 20px;
}

.p2 .part2 .item3 .text p {
    text-align: justify;
    font-size: 2.2rem;
    line-height: 1.5;
}

@media screen and (max-width:950px) {
    .p2 .cont {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .p2 .part1 .item2 .text {
        min-height: 170px;
    }
}

@media screen and (max-width:650px) {
    .p2 .cont {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

    }
    .p2 .part1 {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .p2 .part1 .item2 {
        width: 100%;
    }
    .p2 .part1 .item2 .text {
        min-height: 150px;
    }
}

@media screen and (max-width:450px) {
    .p2 {
        padding: 40px 0;
    }

    .p2 .cont {
        justify-content: space-between;
    }

    .p2 span {
        font-size: 1.2rem;
        text-align: start;
        width: 90%;
    }

    .p2 .item2 h4,.p2 .item3 h4 {
        font-size: 2em;
        max-width: 300px;
    }
    .p2 .part1 .item2:nth-child(2) h4 {
        margin-bottom: -25px;
    }

    .p2 .part1 {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .p2 .part1 .item2 {
        width: 100%;
    }
    .p2 .part1 .item2 .text {
        min-height: 110px;
    }
    .p2 .part2 .item3 .text p {
        font-size: 1.5rem;
    }
}

/* p6 */
.p6 {
    width: 100%;
    padding-top: 70px;
}

.p6 .not,.p7 .not {
    background-color: #fff;
    border-radius: 30px;
    padding: 20px 20px;
}

.p6 p,.p7 p {
    font-size: 2rem;
}

.p6 p b {
    font-size: 2.4rem;
    color: #02569b;
}

/* 重置數字標號 */
.p6 ol {
    counter-reset: item;
}

.p6 ol li {
    counter-increment: item;
    position: relative;
    margin-left: 4%;
    color: #02569b;
    font-size: 2rem;
    font-weight: 500;
    line-height: 25px;
}

.p6 ol li::before {
    content: counter(item) ". ";
    position: absolute;
    left: -4%;
    width: 2rem;
    text-align: left;
    
}

.p6 ol li:nth-child(1),
.p6 ol li:nth-child(7) {
    font-size: 2.4rem;
    font-weight: bolder;
}

.p6 ol li:nth-child(5),
.p6 ol li:nth-child(14) {
    color: #3E3A39;
}

@media screen and (max-width:768px) {
    .p6 ol li {
        margin-left: 6%;
    }
    .p6 ol li::before {
        left: -7%;
    }
}
@media screen and (max-width:450px) {
    .p6 {
        padding-top: 40px;
    }
    .p6 p,.p7 p {
        font-size: 1.5rem;
    }

    .p6 ol li {
        font-size: 1.5em;
        line-height: 20px;
        letter-spacing: 1px;
    }

    .p6 ol li {
        margin-left: 8%;
    }
    .p6 ol li::before {
        left: -8%;
    }

    .p6 p b,
    .p6 ol li:nth-child(1),
    .p6 ol li:nth-child(7) {
        font-size: 1.7rem;
    }

    .p6 .not {
        background-color: #fff;
        border-radius: 30px;
        padding: 20px 10px 20px 10px;
    }
}

/* p7 */
.p7 {
    width: 100%;
    padding: 70px 0;
}
.p7 ul li{
    list-style: decimal;
    margin-left: 3.5%;
    color: #3E3A39;
    font-size: 2rem;
    font-weight: 500;
    line-height: 25px;
}
@media screen and (max-width:450px) {
    .p7 {
        padding:40px 0;
    }

    .p7 ul li {
        font-size: 1.5em;
        line-height: 20px;
        letter-spacing: 1px;
    }
}

/* footer */
.footer {
    padding: 30px 0;
}

.footer p {
    font-size: 1.5em;
    font-weight: 400;
    text-align: center;
    color: #fff;
}