@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	font-family: "Noto Sans TC","Huninn", sans-serif;
	font-style: normal;
	vertical-align:baseline;
	text-decoration:none;
	color:#213168;
	letter-spacing: 1px;
}
.nav a,.kv p, .p3 p, .p4 li, .kv span,.btn,.p4 p{
    font-size: 22px; 
	line-height: 2.2rem;
    color: #283955;
}

.p3 .t1{
    font-size: 22px; 
	line-height: 2.2rem;
    color: #727478;
}

.p2 p, .p2 li, .qc ul, .qc li, table, .qc p,i {
    font-size: 19px; 
	line-height: 1.8rem;
    color: #283955;
}

h5, .p6 p{
    font-size: 36px;
    color: #f9ffff;
} 

button,.p3 .active h4{
    font-size: 30px;
}

h3{
    font-size: 28px;
    font-weight: bold;
}
h4, .qt p{
    font-size: 26px;
    font-weight: bold;
}
.qc i{
    display: inline-block;
    font-size: 19px;
    color: #727478;
}

h6{
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    padding: 15px;
    margin: 20px;
}

body{
    width: 100%;
    height: auto;
    font-weight: 500;
    overflow-x: hidden;
    background: #f9ffff;
    color: #213168;
}

.w1200{
	width: 100%;
	max-width: 1220px;
    height: auto;
	position: relative;
	margin: 0 auto;
}
.w1000{
	width: 100%;
	max-width: 1000px;
	position: relative;
	margin: 0 auto;
}
.btntop{
	position: fixed;
	bottom: 30px;
	right: 20px;
	z-index: 100;
    background-color: #1b2444;
    color: #fff;
    width: 65px;
    height: 65px;
    border-radius: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.top{
	width: 100%;
	height: 90px;
	position: fixed;
	z-index: 999;
    padding: 2%;
}

.topbg{
    height: 90px;
	background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    padding-top: 10px;
}


.toggle{
    display: none;
}

.logo{
    display: inline-block;
    background: url(../img/logo.png) no-repeat;
    background-size: contain;
    width: 100%;
    max-width: 153px;
    aspect-ratio: 153 / 45;
    margin-top: 5px;
}
.nav{
    position: absolute;
    top: 10px;
    right: 5%;
}
.nav ul{
    display: flex;
    align-items: center;
}

.nav a{
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
    color: #213168;
    font-family: "Huninn";
}

.nav a:hover{
    font-weight: 700;
    
}

.nav a:hover::before{
    content: "";
    width: 50px;
    height: 5px;
    border-radius: 10px;
    background: #213168;
    position: absolute;
    margin-left: 5%;
    bottom: -10px;
}

/*kv*/
.kv{
    background: url(../img/kvbg.png) no-repeat center center;
    background-size:cover ;
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: 757px;
}

.kv{
    .w1200{
        position: relative;
        top: 250px;
        display: flex;
    }
    .title{
        width: 50%;
    }

    .kvt1{
        position: relative;
        background: url(../img/kvt1.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width: 522px;
        aspect-ratio: 522 / 152;
    }
    .kvt1::before{
        content: "";
        display: block;
        background: url(../img/kvt1-1.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width: 265px;
        aspect-ratio: 265 / 48;
        position: absolute;
        top: -30%;
        left: 10px;
    }
    .kvt1::after{
        content: "";
        display: block;
        background: url(../img/kvt1-2.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width: 138px;
        aspect-ratio: 138 / 50;
        position: absolute;
        left: 85%;
    }
    .kvt2{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .kvt2 span{
        background: url(../img/liner.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width:71px;
        aspect-ratio: 71 / 34;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        color: #245ebc;
    }
    .kvt2 p{
        display: inline-block; 
        color: #000;
        padding: 1px 10px;
    }
    .kvt3{
        display: flex;
        align-items: center;
        margin-top: 30px;
    }

    .kvt3 .line{
        height: 1px;
        background-color: #3dbfdf;
        width: 45%;
        display: block;
        margin-right: 10px;
        position: relative;
        left: 0;
    }
    .kvpic{
        width: 50%;
        position: relative;
    }
    .a1 {
        background: url(../img/a1.png) no-repeat;
        background-size: contain;
        position: relative; 
        width: 100%;
        max-width: 239px;
        aspect-ratio: 239 / 323;
        z-index: 2; 
        left: 38%;
        bottom: -10%;
    }


    .a1::before{
        content: "";
        background: url(../img/a6.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width: 129px;
        aspect-ratio: 129 / 114;
        position: absolute;
        z-index: 1;
        left: -30px;
        animation: upp 2s ease infinite;
    }

    .a2{
       background: url(../img/a2.png) no-repeat;
       background-size: contain;
       width: 100%;
       max-width: 193px;
       aspect-ratio: 193 / 102;
       position: absolute;
       z-index: 2;
       left: 48%;
       bottom:2%;
       animation: upp1 1s ease infinite;
       animation-delay: 1s;
       opacity: 0;
    }
    .a3{
        background: url(../img/a3.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width: 176px;
        height: 85px;
        position: absolute;
        left: 50%;
        bottom: -15%;
    }
    .a4-1{
        background: url(../img/a4-1.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width:231px;
        height: 102px;
        position: absolute;
        left: -10%;
        bottom: 15%;
        z-index: 6;
    }
    .a4-2{
        background: url(../img/a4-2.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width:208px;
        height: 161px;
        position: absolute;
        left: 5%;
        bottom: -5%;
        z-index: 6;
    }
    .a4-3{
        background: url(../img/a4-3.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width:143px;
        height: 259px;
        position: absolute;
        left: 20%;
        bottom: -25%;
        z-index: 6;
    }
    .a5{
        background: url(../img/a5.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width: 85px;
        height: 80px;
        position: absolute;
        z-index: 1;
        top: 20%;
        left: 10%;
        animation: upp 2s ease infinite;
    }

}

@keyframes upp {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0) ;
    }
}

@keyframes upp1 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(-20px);
        opacity: 0;
    }
}

.p2{
    background: url(../img/02bg.png) no-repeat center;
    background-size: cover;
    width: 100%;
    max-width: 1920px;
    height: 950px;
    position: relative;
    z-index: 9;
    padding-top: 150px;
}
.p2::after{
    content: "";
    background: url(../img/a2a2.png)no-repeat;
    background-size: cover;
    width: 100%;
    max-width:197px ;
    aspect-ratio: 197 / 336;
    position: absolute;
    right: 20px;
    bottom: 200px;
    opacity: 0.5;
}
.p2::before{
    content: "";
    background: url(../img/a2a1.png)no-repeat;
    background-size: cover;
    width: 100px;
    max-width:118px ;
    aspect-ratio: 118 / 419;
    position: absolute;
    left: 0px;
    bottom: 0;
    z-index: -1;
    opacity: 0.5;
}

.p2{
    .p2t1{
        background: url(../img/p2t1.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width: 407px;
        height: 62px;
        position: relative;
        margin: 0 auto;
        padding-top:50px ;
    }
    .p2t1::after{
        content: "";
        background: url(../img/p2t2.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width: 282px;
        height: 118px;
        position: absolute;
        top: -110px;
        left: -10px;
    }
    .num{
        background: url(../img/num.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width: 113px;
        height: 45px;
        display: inline-block;
        vertical-align: middle;
        margin: 0 5px;
        display: inline-block;
    }

    .icon{
        background: url(../img/p2abg.png) no-repeat;
        background-size: cover;
        width: 100%;
        max-width: 242px;
        aspect-ratio: 242 / 255;
        display: flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
    }
    .p2list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 20px;
    }
    .p2list>div{
        width: 48%;
        display: flex;
    }
    
    .txt{
        width: 100%;
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .txt small{
        display: inline-block;
        color: #7c8593;
    }
    .txt ul{
        width: 100%;
    } 

    .txt li{
        width: 100%;
        display: flex;
        gap: 8px;
    }
    .txt li >span{
        width: 100%;
        max-width: 8px;
        height: 8px;
        position: relative  ;
        border-radius: 50%;
        margin-top: 10px;
        background: linear-gradient(to right, #209cff, #68e0cf);
    }
    sup{
        vertical-align: super;
        font-size: 14px;
    }
}

.p3{
    background: url(../img/03bg.png) no-repeat center;
    background-size: cover;
    width: 100%;
    max-width: 1920px;
    height: 1100px;
    position: relative;
    z-index: 9;
    padding-top: 150px;


    .p3t1{
        background: url(../img/p3t1.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width: 462px;
        height: 66px;
        position: relative;
        margin: 0 auto;
    }
    .p3t1::after{
        content: "";
        background: url(../img/p3t2.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width: 350px;
        height: 141px;
        position: absolute;
        top: -100px;
        left: -10px;
    }
    .container {
        display: flex;
        gap: 30px;
    }
    
    ul{
        width: 40%;
        display: flex;
        flex-direction: column;
        position: relative;
    }
    ul li{
        position: relative;
        border-bottom: 2px solid #fff;
        padding: 20px 5px;
        cursor: pointer;
    }
    .content{
        width: 71%;
        background-color: #a4e4fb ;
        border: 20px solid #c0f1ff;
    }
    .arr{
        background: url(../img/arr1.png)no-repeat;
        background-size: contain;
        width: 10px;
        height: 16px;
        padding: 0 10px;
    }
    .t1{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    h4,p{
        color: #6e6e6e;
    }

    .active {
        .t1>.arr{
            background: url(../img/arr2.png)no-repeat;
        }
        p{font-weight: bold;}
        h4,p{color: #00479e;}
    }
    .active::after{
        content: "";
        position: absolute;
        animation: line 3s ease forwards;
        left: 0;
        margin-top: 20px;
    }
    .swiper-slide{
        margin: 40px auto 0 auto ; 
    }
    .swiper-slide img{
        display: block;
        width: 85%;
        margin: 0 auto;
    }
    .steplis_mb{
        display: none;
    }
}

.swiper-button-next,.swiper-button-prev {
    color: #fff !important;
}
.swiper-button-next::after,.swiper-button-prev::after {
font-size: 18px !important; 
font-weight: bold;
}
		

@keyframes line{
    0%{
        width: 0%;
        border-bottom: 3px solid #0096ff;
        border-radius: 20px;
    }
    100%{
        width: 100%;
        border-bottom: 3px solid #0096ff;
    }
}


.p4 {
    padding-top: 150px;
    background: url(../img/04bg.png) no-repeat center;
    background-size: cover;
    width: 100%;
    max-width: 1920px;
    height: 1219px;
    position: relative;
    z-index: 10;

    .p4t1{
        background: url(../img/p4t1.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width: 282px;
        height: 78px;
        position: relative;
        margin: 0 auto;
    }
    .p4t1::after{
        content: "";
        background: url(../img/p4t2.png) no-repeat;
        background-size: contain;
        width: 100%;
        max-width: 329px;
        height: 102px;
        position: absolute;
        top: -80px;
        left: -10px;
    }
    .tab-btn,.tab-content {
        display: flex;
        justify-content: center;
        gap: 60px;
    }
    .tab-btn-all-pc{display: block;}
    .tab-btn-all-mb{display: none;}
    .tab-btn{
        gap: 150px;
        & > div{
            text-align: center;
        }
        
        button{
            padding: 18px 50px;
            border-radius: 34px;
            background-color: transparent;
            border: 1px solid #4cbfe0;
            color: #283955;
        }
        button:hover,button.active{
            background-color: #0d7ddc;
            color: #fff;
            transition: all 0.3s ease;
        }
        p{
            text-align: center;
            padding-top: 10px;
        }
    }

    .tab-content{
        margin: 10px auto;
        width: 100%;
        padding: 30px 30px 60px 30px;
        background-color: #a4e4fb ;
        border: 20px solid #c0f1ff;
        text-align: center;
        transition: all 0.3s ease;
        
        .item{
            width: 100%;
            background-color: #fff;
            border: 1px solid #3dbfdf;
            border-radius: 20px ;
            color: #fff;
            position: relative;
            overflow-x: hidden;
        }
        
        h5{
            width: 100%;
            background-color: #3dbfdf;
            padding: 10px 50px;
            display: inline-block;
            overflow-x: hidden;
            
        }
        .content{
            display: flex;
            width: 100%;
            justify-content: space-around
        }
        .content>div{
            display: flex;
            flex-direction: column;
            padding: 5px 0 10px 0;
        }
        p{
            background-color: #ebf8fc;
            width: 215px;
            padding: 5px 0px;
            margin-bottom: 5px;
            display: inline-block;
            overflow-x: hidden;
            border-radius: 34px ;
            font-weight: bold;

        }
        .hr{
            border: 1px solid #ebf8fc;
            height: 420px;
        }
        ul{
            padding: 2px 0 ;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        li{
            text-align: left;
            line-height: 30px;
            margin-left: 20px;
        }
    }
    i{
        display: inline-block;
        position: absolute;
        bottom: 40px;
        left: 60px;
        width: 90%;
    }
    
}
.p5{
    padding: 100px 0 ;
    background: linear-gradient(to bottom, #fff, #4af6fc3e);
    background-size: cover;
    width: 100%;
    max-width: 1920px;
    height: auto;
    position: relative;
    z-index: 10;

    .p5t1{
        background: url(../img/p5t1.png) no-repeat center;
        background-size: contain;
        width: 100%;
        max-width: 189px;
        height: 52px;
        position: relative;
        margin: 0 auto;
    }
    
    .arr{
        background: url(../img/arr3.png)no-repeat;
        background-size: contain;
        width: 25px;
        height: 12px;
        padding: 0 10px;
        transition: all 0.3s ease;

    }
    .qa{
        background: #fff;
        padding: 20px 40px;
        margin: 20px;
        border-radius: 20px;
        box-shadow: #00000016 0 2px 2px 
    }
    .qt{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px;
        cursor: pointer;

        &>div{
            display: flex;
            align-items: center;
        }
        img{
            margin: 0 10px 5px 10px;
        }
    }
    .qc {
       display: none;
       border-top: 2px solid #07c4d4;

        ul::before{
            content: "●";
            display: inline-block;
            clear: both;
            padding-right: 5px;
        }
        li {
        margin-left: 40px;
        list-style: none;       /* 拿掉原生符號 */
        position: relative;
        padding-left: 1.2em;    /* 空出符號位置 */
        }
        li::before {
        content: "–";           /* 自訂符號 */
        position: absolute;
        left: 0;
        color: #333;
        }
    }
    .qc.active{
        display: block;
    }
    .qt:has(+ .qc.active) .arr {
        rotate: 180deg;
    }

    table{
        width: 90%;
        margin-top: 20px;
    }
    thead{
        background-color: #5d697c ;
        th{color: #fff;}
    }
    th,td{
        padding: 10px;
        border: 1px solid #283955;
    }
    th{
        text-align: center;
    }
    td{
        text-align: left; 
    }
    td:nth-child(1){
        width:15%;
        text-align: center;
    }
    
}

.btn {
    padding: 10px 30px;
    height: 60px;
    border-radius: 30px;
    border: 1px solid transparent; 
    background: transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(to right, #245ebc, #00bcd4) border-box;

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn span{
    background: url(../img/arr4.png) center no-repeat;
    width: 38px;
    height: 38px;
    background-color: #1b2444;
    border-radius: 50px;
    display: inline-block;
    margin-left: 20px;
}

.btn:hover{
    background: #1b2444;
    color: #fff;
}	

@keyframes up {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-5px);
    }
}

.p6{
    padding: 150px 0;
    background: url(../img/06bg.png) no-repeat;
    background-size: cover;
    width: 100%;
    max-width: 1920px;
    max-height: 414px;
    position: relative;
    z-index: 10;
    >div{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
}

footer{
    width: 100%;
    background: #213168;
    padding: 20px 0;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    p,a{
        display: inline-block;
        color: #fff;
        margin-left: 8px;
    }
}
.brs{
    display: none;
}