@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "DFHeiStd7", "Microsoft JhengHei", 'Noto Sans TC', "Font Awesome 5 Free", "Font Awesome 5 Brands", sans-serif !important;
}

a {
    cursor: pointer;
}

a,
a:hover {
    text-decoration: none !important;
}

ul,
li {
    list-style-type: none;
    padding: 0px;
}

p {
    margin: 0px !important;
    padding: 0px !important;
}

.fa-solid {
    /* font-family: "Font Awesome 6 Pro" !important; */
    font-weight: 900;
}

body {
    --box-width: 85%;
}

.maxline {
    padding: 1em 0em;
    max-width: 1000px;
    margin: 0 auto;
}

@media all and (max-width:768px) {
    body {
        --box-width: 90%;
    }

}

@media all and (max-width:576px) {}

@media all and (max-width:425px) {}

@media all and (max-width:375px) {}


/*--------------------------------------nav---------------------------------------*/
.menu {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 888;
    box-shadow: inset 0px -2px 2px 0px #afafaf;
}

.menu .nav {
    width: 90%;
    justify-content: space-between;
    align-items: center;
    padding: .5em;
    margin: 0 auto;
}

.nav-L {
    width: 30%;
    max-width: 300px;
}

.nav-R {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.nav-link {
    font-size: 1.3rem;
    padding: 0 .5rem;
    color: #000;
    text-align: center;
}

.menu a,
.nav-link:focus,
.nav-link:hover {
    color: #000;
}

.hvr-underline-from-center:before {
    background: #fcc80e;
}

.hvr-underline-from-center.active:before {
    left: 0;
    right: 0;
}

@media all and (max-width:768px) {
    .menu .nav {
        width: 95%;
    }
}

@media all and (max-width:576px) {
    .menu .nav {
        width: 100%;
        justify-content: center;
    }

    .nav-L {
        width: 50%;
        max-width: 300px;
    }

    .nav-R {
        width: 100%;
        justify-content: space-around;
    }

    .nav-link {
        padding: 0 4px;
        font-size: 1.3rem;
    }
}

@media all and (max-width:425px) {}

@media all and (max-width:375px) {}

/*--------------------------------------#nav---------------------------------------*/


/*--------------header---------------*/
.bg_banner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: #fcc80e;
}


.bg_banner .headerimg {
    width: 40%;
}

.headerL {
    width: 15%;
}

@media all and (max-width:1200px) {
    .bg_banner .headerimg {
        width: 60%;
    }

    .headerL {
        width: 25%;
    }
}

@media all and (max-width:768px) {
    .bg_banner .headerimg {
        width: 90%;
    }
}

@media all and (max-width:576px) {}

@media all and (max-width:425px) {}

@media all and (max-width:375px) {}

/*--------------#header---------------*/

/*--------------------------------------title-------------------------------------------------*/
.title1 {
    position: relative;
    width: 80%;
    margin: 1em auto;
    z-index: 2;
}

.titletext {
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    color: #000;

}

.titletext h2 {
    width: fit-content;
    background: #fff100;
    padding: 5px 1.5em;
    border: 3px solid #000;
    border-radius: 40px;
    margin: 0 auto;
}

.titletext h2 span {
    color: #e94c2d;
}

.titletext h3 {
    padding: .3em 0;
    margin: 0;
}

.titletext h3 span {
    position: relative;
    color: #fff;
    font-family: "FolkPro-H" !important;
    font-size: 1.4em;
    /* vertical-align: sub; */
    z-index: 0;
    line-height: 1;
    filter: drop-shadow(3px 3px 0px black);
}

.titletext h3 span:nth-child(2) {
    color: #fff100;
}

.titletext h3 span::before {
    content: attr(data-storke);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    z-index: -1;
    -webkit-text-stroke: 4px #000;
}

@media all and (max-width:1280px) {}

@media all and (max-width:1024px) {}

@media all and (max-width:768px) {}

@media all and (max-width:576px) {
    .title1 {
        width: 90%;
    }
}

@media all and (max-width:425px) {}

@media all and (max-width:375px) {}

/*--------------------------------------#title-------------------------------------------------*/

/*--------------------------------------pt1-------------------------------------------------*/
.pt1 {
    background-color: #fcc80e;
    overflow: hidden;
}

.a01 .titletext h2 {
    font-family: "DFYuanStd8" !important;
}

.a01top {
    width: var(--box-width);
    margin: -3px auto 0;
    border: 3px solid #000;
    border-radius: 10px;
    overflow: hidden;
}

.top-1 {
    position: relative;
    padding: 1em 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url(../img/a01-1.png) center bottom/cover no-repeat;
    z-index: 0;
    overflow: hidden;
}

.top-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    transform: translate(-50%, -50%);
    z-index: -1;
    transform-origin: center;
    animation: topbg 15s linear infinite;
}

@keyframes topbg {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(720deg);
    }
}

.top-p {
    font-family: "DFYuanStd8" !important;
    text-align: center;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0px 0px 3px #fff;
}

.top-p span {
    font-family: "DFYuanStd8" !important;
    font-size: 1.5em;
}

.top-I {
    width: 15%;
}

.a01top h4 {
    background: #a61f24;
    margin: 0;
    color: #fff;
    text-align: center;
    padding: .5em 0;
    font-family: "DFYuanStd8" !important;
}

@media all and (max-width:991px) {}

@media all and (max-width: 991px) and (min-width: 576px) {}

@media all and (max-width:575px) {
    .top-I {
        width: 22%;
    }
}

@media all and (max-width:425px) {}

/* ------------------------- */
.a01box {
    width: var(--box-width);
    margin: 1em auto;
}

.a01box>p {
    text-align: center;
    color: #fff;
    margin: 1em auto !important;
}

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: white;
    bottom: -2em;
    left: 50%;
    height: 95%;
    transform: translateX(-50%);
    margin-left: -3px;
    z-index: 0;
}

/* 文字框 */
.a01-1 {
    position: relative;
    background-color: inherit;
    width: 50%;
    z-index: 1;
}

.a01-L {
    left: 0;
}

.a01-R {
    left: 50%;
    /* margin-left: auto; */
}

.a01-2 {
    width: 85%;
    position: relative;
    border-radius: 6px;
    background-color: white;
    overflow: hidden;
}

.a01-1:nth-child(odd) .a01-2 {
    border: 2px solid #e94c2d;
}

.a01-1:nth-child(even) .a01-2 {
    border: 2px solid #000;
}

.a01-R .a01-2 {
    margin-left: auto;
}

/* 圓圈 */
.a01-1::after {
    content: '';
    position: absolute;
    width: 75px;
    height: 75px;
    /* right: -2.2em; */
    right: -35px;
    background: url(../img/a01-4.png) center/100% no-repeat;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    z-index: 1;
}

.a01-1:nth-child(2):after {
    background: url(../img/a01-5.png) center/100% no-repeat;
}

.a01-1:nth-child(3):after {
    background: url(../img/a01-6.png) center/100% no-repeat;
}

.a01-1:nth-child(4):after {
    background: url(../img/a01-7.png) center/100% no-repeat;
}

.a01-1:nth-child(5):after {
    background: url(../img/a01-8.png) center/100% no-repeat;
}

.a01-1:nth-child(6):after {
    background: url(../img/a01-9.png) center/100% no-repeat;
}

.a01-1:nth-child(7):after {
    background: url(../img/a01-10.png) center/100% no-repeat;
}

.a01-R::after {
    /* left: -2.4em; */
    left: -40px;
}

/* 三角形 */
.a01-L::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    right: 3em;
    border: medium solid #e94c2d;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #e94c2d;
}

.a01-R::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    left: 3em;
    border: medium solid black;
    border-width: 15px 15px 15px 0;
    border-color: transparent black transparent transparent;
}

/* ----- */
.a01-T {
    display: flex;
    padding: .5em;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.a01-T h4 {
    width: 40%;
    padding: 2px 5px;
    margin: 0;
    border-radius: 40px;
    text-align: center;

}

.a01-1:nth-child(odd) .a01-T h4 {
    background: #ed7100;
    color: #fff;
}

.a01-1:nth-child(even) .a01-T h4 {
    background: #fff100;
    color: #000;
}

.a01-T h5 {
    width: 58%;
    margin: 0;
}

.a01-1:nth-child(odd) .a01-T h5 {
    color: #ed7100;
}

.a01-B {
    text-align: center;
    padding: 5px 0;
}

.a01-1:nth-child(odd) .a01-B {
    border-top: 2px solid #e94c2d;
    background: #ed7100;
    color: #fff;
}

.a01-1:nth-child(even) .a01-B {
    border-top: 2px solid #000;
    background: #fff100;
    color: #000;
}

.a01-I {
    position: absolute;
    width: 35%;
    top: 100%;
    left: 35%;
    /* transform: translateX(-50%); */
    z-index: 1;
    filter: drop-shadow(0px 0px 6px white);
}

@media screen and (max-width: 575px) {
    .timeline::after {
        left: 31px;
    }

    .a01-1 {
        width: 100%;
        padding-left: 5em;
        margin: .5em 0;
    }

    .a01-1::before {
        left: 4.1em;
        right: unset;
    }

    .a01-L::before {
        border: medium solid #e94c2d;
        border-width: 15px 15px 15px 0;
        border-color: transparent #e94c2d transparent transparent;
    }

    .a01-2 {
        width: 100%;
    }

    .a01-L::after,
    .a01-R::after {
        left: -10px;
        right: unset;
        width: 70px;
        height: 70px;
    }

    .a01-R {
        left: 0%;
    }

    .a01-I {
        width: 50%;
        top: 102%;
        left: -6%;
        transform: unset;
    }
}

@media all and (max-width:425px) {
    .a01-1::before {
        left: 5.1em;
        right: unset;
    }

    .a01-2 {
        width: 95%;
        margin-left: auto;
    }
}

/* ------------------------a02--------------------------- */
.a02 .titletext h3 span {
    margin: 0 .2em;
}

.tit-I {
    position: absolute;
    bottom: 0;
    width: 20%;
}

.tit-L {
    left: 0;
}

.tit-R {
    right: 0;
}

.a02box {
    width: var(--box-width);
    margin: 0 auto;
    background: #fff;
}

.a02-1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    font-size: 1.2em;
    border: 2px solid #000;
    margin-bottom: -2px;
}

.a02-L {
    width: 45%;
    padding: .5em;
    display: flex;
    align-items: center;
}

.a02-C {
    position: relative;
    width: 10%;
    text-align: center;
    padding: .5em 0;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    background: #fdd46e;
    color: #e94c2d;
    line-height: 1;
    font-family: 'DFHeiStd9' !important;
}

.a02-1:not(.a02T) .a02-C:before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: -1.5em;
    transform: rotate(15deg);
    width: 1.8em;
    height: 1.8em;
    background: url(../img/a02-3.png) center/100% no-repeat;
    z-index: 1;
}

/* thead */
.a02T .a02-L {
    background: #fdcf00;
    color: #e94c2d;
    text-align: center;
    line-height: 1;
    font-family: "DFHeiStd9" !important;
    justify-content: center;
}

.a02T .a02-L:last-child {
    color: #004ea2;
}

.a02T .a02-C {
    font-family: "DFHeiStd9" !important;
    background: #1068ac;
    color: #fff;
    line-height: 1.4;
    padding: 0;
}

@media all and (max-width:991px) {}

@media all and (max-width: 991px) and (min-width: 576px) {}

@media all and (max-width:575px) {

    .tit-L,
    .tit-R {
        display: none;
    }
}

@media all and (max-width:425px) {}

/* --------------------------------- */
.a02Bott {
    width: var(--box-width);
    margin: 1em auto 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.a02BottI {
    width: 35%;
}

.a02line {
    position: relative;
    width: 65%;
    margin-bottom: .5em;
    background: #fff;
    padding: 1em 1.5em;
    border-radius: 15px;
    border: 2px solid #000;
    filter: drop-shadow(3px 2px 0px black);
    z-index: 1;
}

.a02line::before {
    content: '';
    position: absolute;
    left: 99.5%;
    top: 2em;
    border: medium solid white;
    border-width: 15px 0px 15px 30px;
    border-color: transparent white;
    z-index: 1;
    filter: drop-shadow(3px -2px 0px black);
}

.a02line h4 {
    width: fit-content;
    margin: 0 auto;
    font-family: 'DFHeiStd9' !important;
}

.a02line h4>span {
    display: inline-block;
    font-size: 1.2em;
    font-family: 'DFHeiStd9' !important;
}

.a02line mark {
    display: block;
    background: linear-gradient(to top, #fff100 30%, transparent 0%)bottom/100% 1.5em;
    line-height: 1;
    font-family: 'DFHeiStd9' !important;
}

.a02line mark span {
    font-family: 'DFHeiStd9' !important;
    color: #e94c2d;
}

.linebut {
    width: fit-content;
    margin: 1em auto 0;
}

.linebut:hover {
    animation: forwards;
}

.linebut a {
    display: block;
    background: #fff100;
    font-size: 1.5em;
    padding: 2px 1em;
    border: 1px solid #e94c2d;
    color: #e94c2d;
    box-shadow: 2px 2px 0px 0px #e94c2d;
    font-family: 'DFHeiStd9' !important;
}

.linebut:hover a {
    box-shadow: 0px 0px 0px 2px #e94c2d;
    transform: scale(.9);
    transition: all .15s ease-in-out;
}

@media all and (max-width:991px) {}

@media all and (max-width: 991px) and (min-width: 576px) {}

@media all and (max-width:575px) {
    .a02Bott {
        align-items: flex-end;
    }

    .a02line::before {
        top: 6em;
    }
}

@media all and (max-width:425px) {}

/*--------------------------------------#pt1-------------------------------------------------*/

/*--------------------------------------pt2-------------------------------------------------*/
.pt2 {
    background:
        url(../img/bg-1.png) center top/100% no-repeat,
        url(../img/bg-2.png) center bottom/100% no-repeat, #ffdb3f;
    overflow: hidden;
}

.b01 .titletext h3 span {
    vertical-align: unset;
}

.pt2 .titletext h3 i {margin-left: .2em;}

.b01box {
    width: var(--box-width);
    margin: 0 auto;
}

.b01-1 {
    background: #fff;
    padding: 1em;
    margin: 1em 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 4px 4px 0px #e94c2d;
}

.b01-L {
    width: 35%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.b01-I {
    width: 25%;
    margin: 0 1em;
}

.b01-T {
    flex-grow: 1;
    text-align: center;
}

.b01-T h4 {
    font-family: 'DFHeiStd9' !important;
    background: #e94c2d;
    padding: 2px .5em;
    border-radius: 40px;
    margin: 0;
    color: #fff;
}

.b01-T p {
    position: relative;
    color: #fff100;
    font-family: 'DFHeiStd9' !important;
    z-index: 0;
    transform: rotate(-10deg);
    filter: drop-shadow(2px 2px 0px #e94c2d);
}

.b01-T p::before {
    content: attr(data-storke);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: -1;
    -webkit-text-stroke: 3px #e94c2d;
}

.b01-R {
    flex-grow: 1;
    margin: 0;
}

.b01-R li {
    position: relative;
    padding-left: 1em;
    margin-left: 1em;
}

.b01-R li::before {
    content: '•';
    position: absolute;
    top: 0;
    left: 0;
}

.b01-R li span {
    position: relative;
    color: #e94c2d;
    font-family: 'DFHeiStd9' !important;
}

.b01-R .lisp small {
    position: absolute;
    width: max-content;
    top: 100%;
    right: 0%;
    color: #000;
    font-size: .8em;
}

@media all and (max-width:991px) {}

@media all and (max-width: 991px) and (min-width: 576px) {}


@media all and (max-width:575px) {
    .b01-L {
        width: 35%;
    }

    .b01-I {
        width: 45%;
        margin: 0;
    }

    .b01-R {
        width: 65%;
    }

    .b01-R li {
        margin: 0 0.2em;
    }

    .b01-R .lisp small {
        position: relative;
        display: block;
    }
}


@media all and (max-width:425px) {}

/* ------------------b02----------------- */
.b02box {
    width: var(--box-width);
    margin: 1em auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.b02-1 {
    margin: .5em;
    padding: .5em .8em 0;
    width: calc((100% - 2em)/2);
    background: #fff;
    border-radius: 10px;
    box-shadow: 4px 4px 0px #e94c2d;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.b02-L {
    width: 30%;
}

.b02-R {
    width: 68%;
}

.b02-R h4 {
    width: fit-content;
    background: #fff100;
    padding: 5px 1em;
    border-radius: 40px;
    font-family: 'DFHeiStd9' !important;
    color: #000;
}

/* .b02-R p {} */

.b02-R p span {
    color: #e94c2d;
    font-family: 'DFHeiStd9' !important;
}

@media all and (max-width:991px) {}

@media all and (max-width: 991px) and (min-width: 576px) {}

@media all and (max-width:575px) {
    .b02-1 {
        width: calc((100% - 2em)/1);
    }
}

@media all and (max-width:425px) {}

/*--------------------------------------#pt2-------------------------------------------------*/



/*--------------------------------------pt3-------------------------------------------------*/
.pt3 {
    background-color: #fcc80e;
    overflow: hidden;
}

/* ------------------------ */
.c01box {
    width: calc(var(--box-width) + 5%);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.c01-1 {
    margin: .5em;
    width: calc((100% - 3em)/3);
    background: #fff;
    padding: 1em;
    border: 2px solid #e94c2d;
    border-radius: 10px;
}

.c01-1>h4 {
    text-align: center;
    font-size: 1.8em;
    font-family: "DFHeiStd9" !important;
    color: #e94c2d;
}

/* .c01-1 ul {} */

.c01-1 li {
    position: relative;
    font-size: .9em;
    margin: .5em 0;
    padding: 5px 0 5px 1.4em;
    border-bottom: 1px dashed #e60012;
}

.c01-1 li::before {
    content: '\f164';
    position: absolute;
    top: 5px;
    left: 0em;
    font-weight: 600;
    color: #e60012;
}

/* .c01-1 li i {
    margin-right: 5px;
} */

.c01-a {
    width: fit-content;
    margin: 0 auto;
}

.c01-a a {
    display: block;
    background: #005ca2;
    font-size: 1.5em;
    padding: 2px .5em;
    color: #fff;
    box-shadow: 3px 3px 0px #7ecef4;
}

.c01-a:hover a {
    box-shadow: 0px 0px 0px #7ecef4;
    transform: scale(.9);
    transition: all .15s ease-in-out;
}

.c01-a a i {
    margin-left: .5em;
    animation: c01-a 1s linear infinite;
}

@keyframes c01-a {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-15deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@media all and (max-width:768px) {
    .c01-1 {
        width: calc((100% - 3em)/2);
    }

    .c01-1 li {
        font-size: 1em;
    }
}

@media all and (max-width:576px) {
    .c01-1 {
        width: calc((100% - 3em)/1);
    }
}

@media all and (max-width:425px) {}

@media all and (max-width:375px) {}


/* ----------c02------------ */

.c02 .titletext h3 span {
    display: block;
    color: #fff100;
}

.c02 .titletext h3 span:nth-child(2) {
    color: #fff;
    margin-top: .2em;
}

.vidbox {
    width: var(--box-width);
    margin: 1em auto;
    padding: 1em 0;
}

.vid>h3 {
    width: fit-content;
    margin: .5em auto;
    padding: 5px 1em;
    color: #000;
    text-align: center;
    background: #fff100;
    border-radius: 30px;
    font-size: 1.5em;
    font-family: 'DFHeiStd9' !important;
    border: 1px solid #000;
}

/*------------ YouTube嵌入 -----------------*/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

/*padding-bottom:56.25%; 為影片高度與寬度的比例16:9計算得來，9除以16=0.5625換算高度比0.5625=56.25% */
/*padding-top: 30px; 用於修正的高度，可用25px或30px */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*------------ #YouTube嵌入 -----------------*/

@media all and (max-width:1024px) {}

@media all and (max-width:768px) {
    .vidbox {
        width: 90%;
    }
}

@media all and (max-width:576px) {
    .vid>h3 {
        font-size: 1.4em;
        padding: 0 .5em;
    }
}

@media all and (max-width:425px) {}

@media all and (max-width:375px) {}



/* ---------------c03----------------- */
.c03-T {
    position: relative;
    width: fit-content;
    margin: 0 auto;
    background: #fff100;
    padding: 0px 1em;
    border-radius: 40px;
    text-align: center;
}

.c03-T::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: medium solid #fff100;
    border-width: 15px 15px 0px 15px;
    border-color: #fff100 transparent transparent transparent;
}

.form {
    width: var(--box-width);
    margin: 0 auto;
}


.ifr {
    margin: 2vh auto;
    background: rgb(255, 255, 255, 0.9);
    border-radius: 30px;
}

.ifr iframe {
    height: 490px;
}

@media all and (max-width:576px) {
    .form {
        width: 90%;
    }

    .ifr {
        border-radius: 10px;
    }

    .c03-T {
        border-radius: 10px;
    }
}

/* <!-- ------------FB LINE 按鈕---------------- --> */
.imgbox {
    width: var(--box-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.imgbox .form-1 {
    width: calc((80% - 4vw)/2);
    margin: 1vh 1vw;
}

.imgbox .form-1:hover {
    transform: scale(.9);
    transition: all .15s ease-in-out;
}

@media all and (max-width:575px) {
    .imgbox .form-1 {
        width: calc((100% - 4vw)/2);
    }
}

/*--------------------------------------#pt3-------------------------------------------------*/


/*--------------------------------------footer-------------------------------------------------*/
footer {
    background-color: #005CA2;
    color: #fff;
    padding: 2em;

}

.footerline {
    max-width: 1000px;
    margin: 0 auto;
    display: flex !important;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    line-height: 2em;
}

footer h2 {
    text-align: center;
    width: 100%;
}

footer a {
    color: #fff;
}

footer a:hover {
    color: #ffbf6c;
}

/* ------------- */
.me {
    width: 35%;
}

.me h3,
.me h4 {
    border-bottom: 2px solid #fff;
    line-height: 2em;
}

.me .fab {
    font-size: 1.5em;
    margin: 0.5em;
}

/* ----------- */
.add {
    width: 42%;
    /*  max-width: 400px; */
}

.add-1 {
    display: flex;
}

.add-1 span {
    width: 25%;
    text-align: left;
}

.add-1 a {
    width: 50%;
}

@media all and (max-width:768px) {
    .add {
        width: 46%;
    }
}

@media all and (max-width:576px) {

    .me,
    .add {
        width: 100%;
    }
}

@media all and (max-width:375px) {}

/*--------------------------------------#footer-------------------------------------------------*/


/*------------------talk--------------------------*/

#talk {
    position: fixed;
    top: 10vh;
    left: 2px;
    z-index: 999;
    display: flex;
    flex-direction: column;
}


.talk-1 {
    cursor: pointer;
    font-size: 2em;
    text-align: center;
    padding: 2px !important;
    font-weight: 600;
    color: #00a1ff;
}

.talk-1:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
}

.fab {
    font-family: "Font Awesome 5 Brands" !important;
}


.talk-1:nth-child(1):hover {
    color: #00ff0d;
}

.talk-1:nth-child(2):hover {
    color: #00e1ff;
}

.talk-1:nth-child(3):hover {
    color: #f700ff;
}

.talk-1:nth-child(4):hover {
    color: #ff0000;
}

@media all and (max-width:575px) {
    #talk {
        width: 100%;
        background-color: rgb(26 26 26 / 80%);
        bottom: 0px;
        left: 0px;
        top: auto;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .talk-1 {
        width: 23%;
        text-align: center;
        padding: 0em !important;
        display: inline-block;
        font-size: 1.8em;
    }

    .talk-1:hover {
        transform: none;
    }
}

/*------------------#talk--------------------------*/

/*-----------TOP按鈕------------------*/
#goTop {
    position: fixed;
    bottom: 1em;
    right: 1em;
    width: 3em;
    height: 3em;
    padding: 0.5em;
    z-index: 999;
    color: #fff;
    border-radius: 50%;
}

#goTop .fas {
    font-family: "Font Awesome 5 Free" !important;
}

@media all and (max-width: 575px) {}

/*-----------TOP按鈕------------------*/