:root{
    --e-global-color-text:#031440;
    --blue1:#32d6ff;
    --gray1:#737373;
    --gray2:#3b3b3b;
    --purple1:#6734fe;
}
html{
    font-size: 18px;
    overflow-x: hidden;
}
body{
    width:100%;
    overflow-x: hidden;
}
*{
    font-size: clamp(1rem,calc(0.17vw + 0.96rem),1.13rem);
    font-family: "Noto Sans TC", sans-serif;
    color: var(--e-global-color-text);
    font-weight: 500;
}
section{
    width:100%;
    max-width: 1280px;
    margin:0 auto;
}
.text-shadow{
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}
header{
    background: url('../img/header_bg.jpg') no-repeat center;
    background-size: cover;
    border-bottom: 1rem #3017b0 solid;
    padding: 1.8rem 0 6.6rem 0;
}
header section{
    width:calc(100% - 50px);
    max-width: 870px;
}
header *{
    font-size: 1.17rem;
}
header .logo img{
    height: 3rem;
}
header .txt img{
    height: 1.2rem;
}
header h1{
    font-size: 2.3rem;
}
header .breathing-element img{
    height: 3.6rem;
}
footer{
    background: #131b40;
    padding: 0.5rem 0;
}
footer section{
    font-size: 0.8rem;
}
.gray1{
    color:var(--gray1);
}
.gray2{
    color:var(--gray2);
}
.blue1{
    color:var(--blue1);
}
.purple1{
    color:var(--purple1);
}
.info1{
    max-width: 14.3rem;
}
.info1:has(img.w-100){
    max-width: 20rem;
    margin-top:-2.5rem;
}
.info1 .img1{
    height: 2rem;
}
.info1 .subtitle{
    font-size: 1.18rem;
}
.iconWithTxt{
    display: flex;
    gap:0.5rem;
    margin-top:0.4rem;
}
.iconWithTxt .img{
    display: flex;
    align-items: start;
    margin-top:5px;
}
.iconWithTxt .img img{
    max-width: 1.18rem;
}
.iconWithTxt .txt{
    color:var(--gray1);
    font-size: 0.66rem;
}
.iconWithTxt .title{
    color:var(--gray2);
    font-weight: 700;
    line-height: 1.1;
}
#bgstyle1{
    background-color: #fff;
    background-image: linear-gradient(174deg, transparent 35%, #d1e0fd 35%, #d1e0fd 65%, transparent 65%);
    background-repeat: no-repeat;
    background-position: 0 0.5rem;
    padding: 2rem 0;
}
#bgstyle1 .imgs img{
    height: 7.3rem;
}
#bgstyle2{
    background-image: linear-gradient(180deg, transparent 0%, #f3efff 30%);
    position: relative;
}
#bgstyle2:after{
    position: absolute;
    left:0;
    bottom:-6rem;
    content: '';
    display: block;
    border-style: solid;
    border-width: 6rem 50vw 0 50vw;
    border-color: #f3efff transparent transparent transparent;
}
#bgstyle2 .icon{
    transform: translate(-5.8rem, -5rem); height:7rem;
}
#bgstyle2 .imgs img{
    max-width: 18rem;
}
#bgstyle3{
    background: url('../img/bg1.jpg') no-repeat center;
    background-size: cover;
    padding:10rem 10px 3rem 10px;
}
#bgstyle3 .fw-bold{
    text-shadow:
            0px 0px 2px rgba(0, 4, 72, 1),
            0px 0px 2px rgba(0, 4, 72, 1),
            0px 0px 4px rgba(0, 4, 72, 1),
            0px 0px 4px rgba(0, 4, 72, 1),
            0px 0px 12px rgba(0, 4, 72, 1),
            0px 0px 12px rgba(0, 4, 72, 1);
}
#bgstyle4{
    position: relative;
}
#bgstyle4:after{
    position: absolute;
    left:0;
    bottom:calc(-6rem  + 1px);
    z-index: 2;
    content: '';
    display: block;
    border-style: solid;
    border-width: 6rem 50vw 0 50vw;
    border-color: #fff transparent transparent transparent;
}
#bgstyle5{
    position: relative;
    padding:8rem 10px 0rem 10px;
}
#bgstyle5 .imgs{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin:3rem 0;
}
#bgstyle5 .imgs img{
    width: 100%;
    max-width:15rem;
}
#bgstyle6{
    background: url('../img/footer_bg.png') no-repeat center bottom,
    url('../img/footer_bg1.png') no-repeat center;
    background-size: 100% auto, 100% auto;
    padding: 8rem 10px 3rem 10px;
}
#bgstyle6 form{
    width:96%;
    max-width: 21rem;
}
#bgstyle6 form .form-control, #bgstyle6 form .form-select{
    margin-bottom: 1rem;
}
#bgstyle6 form .checktxt{
    margin-bottom: 2rem;
}
#bgstyle6 form .checktxt, #bgstyle6 form .checktxt a{
    font-size: 0.8rem;
}
#bgstyle6 form .checktxt a{
    border-bottom: 1px #fff solid;
}
#bgstyle6 button img{
    height: 3rem;
}
button.nostyle{
    border:none;
    background: none;
     border-radius: 0;
}
#floatBox{
    width: 7rem;
    position: fixed;
    z-index: 11;
    right: 10px;
    bottom:7rem;
}
#floatBox a{
    cursor: pointer;
}
#floatBox img{
    width: 100%;
}
.breathing-element {
    position: absolute;
    animation: breathe 2s ease-in-out infinite;
}
@keyframes breathe {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0.8;
        transform: scale(1);
    }
}

@media screen and (max-width:768px) {
    html{
        font-size: 14px;
    }
    header{
        background-position: center right;
    }
    header .breathing-element img{
        height: 3rem;
    }
    .info1{
        max-width: 96%;
    }
    .info1 .img1{
        height: 3rem;
    }
    .info1 .fs-2{
        font-size: 3.1rem !important;
    }
    .info1 .subtitle{
        font-size: 1.84rem;
    }
    .iconWithTxt .img img{
        max-width: 1.3rem;
    }
    .iconWithTxt .txt{
        font-size: 1rem;
    }
    .iconWithTxt .title{
        font-size: 1.4rem;
    }
    #bgstyle2:after, #bgstyle4:after, #bgstyle5:after, #bgstyle6:after{
        bottom:calc(-3rem + 1px);
        border-top-width: 3rem;
    }
    #bgstyle2 .icon{
        transform: translate(-5.8rem, -5.8rem);
    }
    #bgstyle2 .purple1{
        display: block;
    }
    #bgstyle3, #bgstyle5{
        padding-top:7rem;
    }
    #bgstyle5 .imgs img{
        max-width: none;
    }
    #bgstyle6{
        background-size: 100% auto, auto 100%;
        padding: 6rem 10px 2rem 10px;
    }
}