/* 主視覺
*****************************************/
header {
    width: 100%;
    height: 100%;
    background: #0b1e3c;
    background-image: url('../images/slide-bg-b1.webp'), linear-gradient(90deg, rgba(14, 29, 60, 1) 0%, rgba(14, 29, 60, 1) 30%, rgba(140, 178, 235, 0) 50%, rgba(140, 178, 235, 0) 100%), url('../images/slide-bg-a1.webp');
    background-position: right 13.021vw top 5.208vw /*250,100*/ , left top, right top;
    background-size: 36%, contain, 100%;
    background-repeat: no-repeat, no-repeat, no-repeat;
    display: flex;
    align-items: center;
    position: relative;
}
header .t-img {
    width: 45.833vw; /*880*/
}
header .logo {
    width: 14.538vw; /*280*/
    height: auto;
    position: absolute;
    top: 2.604vw; /*50*/
    left: 2.604vw;
}
header .ps {
    font-size: 0.938vw; /*18*/
    position: absolute;
    left: 2.604vw;
    bottom: 2.604vw;
    color: #fff;
}
header .dp-mob {
    display: none;
}
@media (max-width: 1199px) {
    header {
        background-image: url('../images/slide-bg-b1.webp'), linear-gradient(180deg, rgba(14, 29, 60, 1) 0%, rgba(14, 29, 60, 1) 45%, rgba(140, 178, 235, 0) 65%, rgba(140, 178, 235, 0) 100%), url('../images/slide-bg-a1.webp');
        background-position: left 11.719vw bottom -14.648vw, left top, right bottom;
        background-size: 70%, contain, 160%;
        background-repeat: no-repeat, no-repeat, no-repeat;
        align-items: flex-start;
        justify-content: center;
    }
    header .t-img {
        width: 66vw;
        margin-top: 16vw;
    }
    header .logo {
        width: 29.978vw;
        margin: 0 auto;
        top: 4.883vw;
        left: auto;
    }
    header .ps {
        width: 90%;
        font-size: 1.758vw; /*18*/
        left: 5%;
        bottom: 2.93vw;
        text-align: center;
    }
    header .dp-web {
        display: none;
    }
    header .dp-mob {
        display: block;
    }
}
@media (max-width: 575px) {
    header {
        background-image: url('../images/slide-bg-b1.webp'), linear-gradient(180deg, rgba(14, 29, 60, 1) 0%, rgba(14, 29, 60, 1) 45%, rgba(140, 178, 235, 0) 60%, rgba(140, 178, 235, 0) 100%), url('../images/slide-bg-a1.webp');
        background-position: left 8.889vw bottom -8.333vw, left top, right bottom;
        background-size: 80%, contain, 220%;
        background-repeat: no-repeat, no-repeat, no-repeat;
    }
    header .t-img {
        width: 77.778vw; /*280*/
        margin-top: 14vh;
    }
    header .logo {
        width: 50vw; /*180*/
        top: 8.333vw; /*30*/
    }
    header .ps {
        font-size: 14px;
        bottom: 15px;
    }
}
/* 單元標題
*****************************************/
.unit-title {
    width: 100%;
    display: grid;
    row-gap: clamp(0.625rem, 0.484rem + 0.625vw, 1rem); /*10/16*/
    place-content: start center;
    place-items: start center;
    margin-bottom: clamp(1.5rem, 0.938rem + 2.5vw, 3rem); /*24/48*/
    padding: 0 1rem;
}
.unit-title h2 {
    font-size: clamp(2.375rem, 1.859rem + 2.292vw, 3.75rem); /*38/60*/
    line-height: clamp(2.375rem, 1.859rem + 2.292vw, 3.75rem);
    font-weight: 700;
}
.unit-title h3 {
    font-size: clamp(1.125rem, 0.844rem + 1.25vw, 1.875rem); /*18/30*/
    line-height: 30px;
    color: #fff;
    background-color: #005bac;
    padding: 10px 15px;
    text-align: center;
}
.unit-title h4 {
    font-size: clamp(1rem, 0.813rem + 0.833vw, 1.5rem); /*16/24*/
    line-height: 26px;
    color: #fff;
    background-color: #005bac;
    padding: 10px 15px;
    text-align: center;
}
/* 特殊貸款物件
*****************************************/
.special {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    row-gap: 30px;
    column-gap: 30px;
}
.special div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1rem;
}
.special img {
    width: 90%;
}
.special p {
    font-size: clamp(1.125rem, 0.984rem + 0.625vw, 1.5rem); /*18/24*/
    line-height: clamp(1.125rem, 0.984rem + 0.625vw, 1.5rem);
    color: #fff;
    padding: 8px 12px;
    background-color: #0b1e3b;
    border-radius: 3px;
}
.special .nav {
    grid-column: 1 / 7;
    font-size: clamp(1rem, 0.953rem + 0.208vw, 1.125rem); /*16/18*/
    line-height: 24px;
}
@media (max-width: 1199px) {
    .special {
        column-gap: 15px;
    }
}
@media (max-width: 991px) {
    .special {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 60px;
    }
    .special .nav {
        grid-column: 1 / 4;
    }
}
@media (max-width: 767px) {
    .special {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 30px;
    }
    .special div {
        row-gap: 0.625rem;
    }
    .special img {
        width: 80%;
    }
    .special .nav {
        grid-column: 1 / 3;
    }
}
/* 申辦條件彈性
*****************************************/
.condition-bg {
    width: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url('../images/condition-bg.webp'); /*背景圖片上加一層半透明罩遮*/
    background-position: center center;
    background-size: cover;
    background-repeat: repeat-y;
    background-attachment: fixed;
}
.condition {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    row-gap: 30px;
    column-gap: 30px;
}
.condition .con {
    display: grid;
    place-content: start center;
    place-items: start center;
    row-gap: clamp(0.5rem, 0.313rem + 0.833vw, 1rem); /*8/16*/
}
.condition .con .img {
    width: 90%;
    margin-bottom: 6px;
    position: relative;
}
.condition .con .img img {
    border-radius: 100%;
}
.condition .con .img .block {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: clamp(0.625rem, 0.555rem + 0.313vw, 0.813rem) solid #00ffff;
    position: absolute;
    z-index: 3;
    opacity: .3;
}
.condition .con h6 {
    font-size: clamp(1.5rem, 1.219rem + 1.25vw, 2.25rem); /*24/36*/
    line-height: clamp(1.5rem, 1.219rem + 1.25vw, 2.25rem);
    font-weight: 600;
    color: #ffde5e;
}
.condition .con p {
    font-size: clamp(1rem, 0.906rem + 0.417vw, 1.25rem); /*16/20*/
    line-height: clamp(1.5rem, 1.313rem + 0.833vw, 2rem); /*24/32*/
    color: #fff;
    text-align: center;
}
@media (max-width: 1199px) {
    .condition {
        grid-template-columns: repeat(3, 1fr);
    }
    .condition .con .img {
        width: 80%;
    }
    .condition .con:nth-child(n+4) {
        position: relative;
        left: 56.25%;
    }
}
@media (max-width: 575px) {
    .condition {
        grid-template-columns: 1fr;
    }
    .condition .con:nth-child(n+4) {
        left: auto;
    }
    .condition .con .img {
        width: 50%;
    }
    .condition .con p {
        width: 86%;
    }
}
/* 穩穩信用優勢
*****************************************/
.advantages-bg {
    width: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url('../images/advantages-bg.webp'); /*背景圖片上加一層半透明罩遮*/
    background-position: center center;
    background-size: cover;
    background-repeat: repeat-y;
    background-attachment: fixed;
}
.advantages {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 30px;
    column-gap: 30px;
}
.advantages .con {
    display: grid;
    place-content: start center;
    place-items: start center;
    row-gap: clamp(0.5rem, 0.313rem + 0.833vw, 1rem); /*8/16*/
}
.advantages .con .img {
    width: 56%;
    margin-bottom: 6px;
    position: relative;
}
.advantages .con .img img {
    border-radius: 100%;
}
.advantages .con .img .block {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: clamp(0.5rem, 0.313rem + 0.833vw, 1rem) solid #00ffff;
    position: absolute;
    z-index: 3;
    opacity: .3;
}
.advantages .con h6 {
    font-size: clamp(1.5rem, 0.938rem + 2.5vw, 3rem); /*24/48*/
    line-height: clamp(1.5rem, 0.938rem + 2.5vw, 3rem);
    font-weight: 600;
    color: #ffde5e;
}
.advantages .con p {
    font-size: clamp(1rem, 0.813rem + 0.833vw, 1.5rem); /*16/24*/
    line-height: clamp(1.5rem, 1.219rem + 1.25vw, 2.25rem); /*24/36*/
    color: #fff;
    text-align: center;
}
@media (max-width: 1199px) {
    .advantages .con .img {
        width: 80%;
    }
}
@media (max-width: 575px) {
    .advantages {
        grid-template-columns: repeat(2, 1fr);
    }
    .advantages .con .img {
        width: 90%;
    }
}
/* 申辦流程便捷
*****************************************/
.process {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 30px;
}
.process .con {
    display: grid;
    place-content: start center;
    place-items: start center;
    row-gap: clamp(0.5rem, 0.313rem + 0.833vw, 1rem); /*8/16*/
    position: relative;
}
.process .con .img {
    width: 38%;
    margin-bottom: 6px;
}
.process .con .img img {
    width: 100%;
}
.process .con h6 {
    font-size: 36px;
    line-height: 36px;
    color: #0b1e3b;
    font-weight: 600;
}
.process .con p {
    font-size: 20px;
    line-height: 20px;
    text-align: center;
}
.process .con .step {
    font-family: "Jaro", sans-serif;
    font-size: 30px;
    line-height: 30px;
    background-color: #005bac;
    padding: 6px 12px;
    color: #fff;
    border-radius: 3px;
}
.process .con .arrow {
    width: 50px;
    height: 50px;
    background-color: #d9d9d9;
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    position: absolute;
    top: 36%;
    right: -30px;
    z-index: 3;
}
@media (max-width: 1199px) {
    .process {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 30px;
        column-gap: 0;
    }
    .process .con:nth-child(3) .arrow {
        display: none;
    }
    .process .con:nth-child(n+4) {
        position: relative;
        left: 56.25%;
    }
    .process .con .arrow {
        right: -25px;
    }
}
@media (max-width: 991px) {
    .process {
        column-gap: 15px;
    }
    .process .con h6 {
        font-size: 30px;
        line-height: 30px;
    }
    .process .con .arrow {
        width: 36px;
        height: 36px;
        top: 36%;
    }
}
@media (max-width: 575px) {
    .process {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 15px;
        column-gap: 0;
    }
    .process .con h6 {
        font-size: 24px;
        line-height: 24px;
    }
    .process .con p {
        width: 86%;
        font-size: 16px;
        line-height: 20px;
    }
    .process .con .step {
        font-size: 20px;
        line-height: 20px;
    }
    .process .con .arrow {
        display: none;
    }
    .process .con:nth-child(n+4) {
        left: auto;
    }
    .process .con:last-child {
        position: relative;
        left: 52%;
    }
}
/* 領航業界
*****************************************/
.c-sign {
    width: 100%;
    background-color: #002b60;
    display: flex;
    justify-content: center;
}
.c-sign .con {
    width: 100%;
    max-width: 1320px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.c-sign .con .txt {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    color: #fff;
}
.c-sign .con h6 {
    width: 100%;
    font-size: 66px;
    line-height: 86px;
    font-weight: 700;
    color: #ffde5e;
    margin-bottom: 30px;
}
.c-sign .con h6 span {
    font-family: "Manrope", sans-serif;
    font-size: 72px;
    letter-spacing: -3px;
    font-weight: 800;
    padding-right: 3px;
    position: relative;
    top: 3px;
}
.c-sign .con p {
    font-size: 36px;
    line-height: 36px;
    margin-bottom: 30px;
    color: #fff;
}
.c-sign .con .img {
    width: 100%;
    height: 480px;
    background-color: #fff;
    background: url(../images/c-sign.webp) no-repeat center center;
    background-size: cover;
}
.c-sign .con button {
    font-family: "Noto Serif TC", sans-serif;
    font-size: 36px;
    line-height: 36px;
    color: #ffde5e;
    font-weight: 800;
    background: transparent;
    border: 1px solid #ffde5e;
    padding: 15px 30px 18px;
    transition: .3s;
    cursor: pointer;
}
.c-sign .con button:hover, button:focus {
    color: #002b60;
}
.c-sign .con .slide:hover, .slide:focus {
    box-shadow: inset 8em 0 0 0 #ffde5e;
}
@media only screen and (max-width: 1199px) {
    .c-sign .con .txt {
        padding-left: 5.859vw;
    }
    .c-sign .con h6 {
        font-size: 4.688vw; /*48*/
        line-height: 6.641vw; /*68*/
        margin-bottom: 1.465vw; /*15*/
    }
    .c-sign .con h6 span {
        font-size: 5.859vw; /*60*/
    }
    .c-sign .con p {
        font-size: 2.93vw; /*30*/
        line-height: 2.93vw;
        margin-bottom: 1.465vw; /*15*/
    }
    .c-sign .con .img {
        height: 39.063vw; /*400*/
    }
    .c-sign .con button {
        font-size: 3.516vw;
        line-height: 3.516vw;
        padding: 1.465vw 2.93vw 1.758vw;
    }
}
@media only screen and (max-width: 767px) {
    .c-sign .con {
        grid-template-columns: 1fr;
    }
    .c-sign .con .txt {
        justify-content: center;
        padding: 30px 0 0;
        text-align: center;
    }
    .c-sign .con h6 {
        font-size: 34px;
        line-height: 46px;
        margin-bottom: 20px;
    }
    .c-sign .con h6 span {
        font-size: 42px;
        letter-spacing: -2px;
        padding-right: 2px;
    }
    .c-sign .con p {
        font-size: 20px;
        line-height: 20px;
        margin-bottom: 15px;
        text-align: center;
    }
    .c-sign .con .img {
        height: 160px;
    }
    .c-sign .con button {
        font-size: 30px;
        line-height: 30px;
        padding: 10px 25px 15px;
        margin-bottom: 30px;
    }
}
/* 表單
*****************************************/
form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
}
form .verify {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
}
form .verify button {
    font-size: 14px;
    color: #333;
    border-radius: 3px;
    border: 1px solid #ccc;
    position: relative;
    background-color: #f3f3f3;
    padding: 3px 10px;
    margin-left: 10px;
}
.okb {
    margin-top: 15px;
}
.form-sex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 15px;
    position: relative;
}
.two-f {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
}
.nav-a {
    grid-column: 1 / 3;
}
@media only screen and (max-width: 991px) {
    .nav-b {
        grid-column: 1 / 3;
    }
}
@media only screen and (max-width: 575px) {
    form {
        grid-gap: 15px;
        padding: 0 15px;
    }
    .okb {
        display: flex;
        justify-content: center;
    }
    .form-sex {
        column-gap: 10px;
    }
    .two-f {
        grid-template-columns: 1fr;
        grid-gap: 15px;
    }
}
/* footer
*****************************************/
footer {
    width: 100%;
    background-color: #0b1e3b;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
footer .logo {
    width: 260px;
}
footer .txt {
    font-size: 16px;
    line-height: 16px;
    color: #fff;
}
footer .txt br {
    display: none;
}
@media only screen and (max-width: 1199px) {
    footer {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        row-gap: 10px;
    }
}
@media only screen and (max-width: 991px) {
    footer .logo {
        width: 200px;
    }
    footer .txt {
        font-size: 14px;
        line-height: 14px;
    }
}
@media only screen and (max-width: 767px) {
    footer .txt {
        font-size: 14px;
        line-height: 24px;
    }
    footer .txt br {
        display: block;
    }
}
/* 浮水印
*****************************************/
.sing {
    position: fixed;
    z-index: 99;
    right: 30px;
    bottom: 30px;
}
.sing .aweb {
    width: clamp(6.25rem, 1.033rem + 10.87vw, 10rem); /*100/160*/
    display: block;
}
.sing .amob {
    display: none;
}
@media (max-width: 1199px) {
    .sing {
        right: 15px;
        bottom: 15px;
    }
}
@media (max-width: 575px) {
    .sing {
        width: 100%;
        z-index: 99;
        right: 0;
        bottom: 0;
        padding: 0.625rem;
        background: rgba(255, 255, 255, 0.3); /* 半透明背景 */
        backdrop-filter: blur(6px); /* 背後景物模糊 */
        -webkit-backdrop-filter: blur(6px); /* 兼容 Safari 瀏覽器 */
    }
    .sing .aweb {
        display: none;
    }
    .sing .amob {
        width: 100%;
        padding: 1rem 0;
        background: #0C1E3B;
        background: linear-gradient(0deg, rgba(12, 30, 59, 1) 0%, rgba(0, 117, 194, 1) 100%);
        color: #ffde5e;
        display: flex;
        justify-content: center;
        border-radius: 5px;
        font-weight: 600;
    }
	.sing .amob img {
		width: 66.667vw;/*240*/
	}	
}