@media screen and (max-width: 800px) {
    main .col-margin-one {
        margin-top: -28px;
        margin-left: -10px;
    }

    main .col-margin-two {
        margin-top: -28px;
        margin-left: -10px;
    }

    main .col-margin-three {
        margin-left: 9%;
    }

    main .col-margin-four {
        margin-left: 8%;
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}

@-ms-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}

main a {
    background-color: transparent;
}

main a:active,
main a:hover {
    outline: 0;
}

main abbr[title] {
    border-bottom: 1px dotted;
}

main b,
main strong {
    font-weight: bold;
}

main dfn {
    font-style: italic;
}

main h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

main mark {
    background: #ff0;
    color: #000;
}

main small {
    font-size: 80%;
}

main sub,
main sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

main sup {
    top: -0.5em;
}

main sub {
    bottom: -0.25em;
}

main img {
    border: 0;
}

main svg:not(:root) {
    overflow: hidden;
}

main figure {
    margin: 1em 40px;
}

main hr {
    box-sizing: content-box;
    height: 0;
}

main pre {
    overflow: auto;
}

main code,
main kbd,
main pre,
main samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

main button,
main input,
main optgroup,
main select,
main textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

main button {
    overflow: visible;
}

main select {
    text-transform: none;
}

main button,
main html input[type="button"],
main input[type="reset"],
main input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

main button[disabled],
main html input[disabled] {
    cursor: default;
}

main button::-moz-focus-inner,
main input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

main input {
    line-height: normal;
}

main input[type="checkbox"],
main input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

main input[type="number"]::-webkit-inner-spin-button,
main input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

main input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
}

main input[type="search"]::-webkit-search-cancel-button,
main input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

main fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

main legend {
    border: 0;
    padding: 0;
}

main textarea {
    overflow: auto;
}

main optgroup {
    font-weight: bold;
}

main table {
    border-collapse: collapse;
    border-spacing: 0;
}

main td,
main th {
    padding: 0;
}

@media print {

    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    main a,
    main a:visited {
        text-decoration: underline;
    }

    main a[href]:after {
        content: " ("attr(href) ")";
    }

    main abbr[title]:after {
        content: " ("attr(title) ")";
    }

    main a[href^="#"]:after,
    main a[href^="javascript:"]:after {
        content: "";
    }

    main pre,
    main blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    main thead {
        display: table-header-group;
    }

    main tr,
    main img {
        page-break-inside: avoid;
    }

    main img {
        max-width: 100% !important;
    }

    main p,
    main h2,
    main h3 {
        orphans: 3;
        widows: 3;
    }

    main h2,
    main h3 {
        page-break-after: avoid;
    }

    main .navbar {
        display: none;
    }

    main .btn>.caret,
    main .dropup>.btn>.caret {
        border-top-color: #000 !important;
    }

    main .label {
        border: 1px solid #000;
    }

    main .table {
        border-collapse: collapse !important;
    }

    main .table td,
    main .table th {
        background-color: #fff !important;
    }

    main .table-bordered th,
    main .table-bordered td {
        border: 1px solid #ddd !important;
    }
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


main {
    background-color: white;
}

main a {
    color: #125598;
    text-decoration: none;
}

main a:hover,
main a:focus {
    color: #125598;
    text-decoration: none;
}

main a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.age0to1-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
}

@media (max-width: 767px) {
    .age0to1-wrapper {
        grid-template-columns: 1fr;
        gap: 8rem;
    }
}

.age0to1-title {
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}

.age0to1-img-box {
    overflow: hidden;
    /* 限制圖片不要超出容器 */
    border-radius: 3rem;
    /* 跟圖片一樣的圓角，避免放大後露角 */
}

.age0to1-img {
    border-radius: 3rem;
    width: 100%;
    transition: transform 0.3s ease;
    /* 平滑縮放 */
}

.age0to1-img-box:hover .age0to1-img {
    transform: scale(1.05);
    /* 放大一點點 */
}

.age0to1-btn-box {
    display: flex;
    width: -webkit-fill-available;
    gap: 2rem;
    justify-content: space-between;
    /* 預設兩個以上時 */
}

.age0to1-btn-box:has(.btn-to-link:only-child) {
    justify-content: center;
    /* 只有一個時置中 */
}

.btn-to-link {
    flex: 1;
    /* 每個按鈕等分寬度 */
    max-width: 20rem;
    /* 限制每個按鈕最大寬度 */
}

.btn-to-link a {
    display: block;
    width: 100%;
    /* 撐滿 flex 份額 */
    text-align: center;
    padding: 1rem 0;
    /* 改成上下 padding，避免字太少過寬 */
    border: 2px solid var(--blue-color);
    border-radius: 50rem;
    background: white;
    color: var(--blue-color);
    box-sizing: border-box;
    position: relative;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

.btn-to-link a .btn-text {
    display: block;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-to-link a .arrow-icon {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.btn-to-link .arrow-icon img {
    height: 16px;
}

.btn-to-link a:hover .arrow-icon {
    transform: translateY(-50%) translateX(2px);
    filter: brightness(0) saturate(100%) invert(100%);
}

.btn-to-link a:hover {
    background: var(--blue-color);
    color: white;
}

:root {
    --blue-color: #04358a;
    /* 藍色 */
    --bright-blue-color: #dde9ff;
    /* 淺藍色 */
    --gray-color: #333333;
    /* 灰色 */
    --middle-gray-color: #bdbdbd;
    /* 中灰色 */
    --bright-gray-color: #f8f8f8;
    /* 淺灰色 */
    --white-color: #ffffff;
    /* 白色 */
    --bright-yellow-color: #fcefde;
    /* 淡黃色 */
    --bright-pink-color: #ffe6eb;
    /* 淡粉色 */
    --pink-color: #b0466a;
    /* 深粉色 */
}

.color-blue {
    color: var(--blue-color) !important;
}

.color-white {
    color: #fff !important;
}

.color-gray {
    color: var(--gray-color) !important;
}

.color-pink {
    color: var(--pink-color) !important;
}

.bg-blue {
    background-color: var(--blue-color) !important;
}

.bg-bright-blue {
    background-color: var(--bright-blue-color) !important;
}

.bg-bright-gray {
    background-color: var(--bright-gray-color) !important;
}

.bg-bright-yellow {
    background-color: var(--bright-yellow-color) !important;
}

.px-primary {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 50px 20px;
}

.px-sub-primary {
    padding-left: 18vw !important;
    padding-right: 18vw !important;
}

.fs-title {
    letter-spacing: 0.2em !important;
    font-size: 48pt !important;
    text-align: center !important;
    padding: 8rem !important;
}

.fs-1 {
    font-size: 20pt !important;
    letter-spacing: 0.05em !important;
    font-weight: bold !important;
}

.fs-2 {
    font-size: 18pt !important;
    letter-spacing: 0.05em !important;
}

.fs-3 {
    font-size: 15pt !important;
    letter-spacing: 0.05em !important;
}

.fs-4 {
    font-size: 12pt !important;
    letter-spacing: 0.05em !important;
}

.fs-5 {
    font-size: 9pt !important;
    letter-spacing: 0.05em !important;
}

.fw-bold {
    font-weight: bold !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

/* 平板 */
@media (min-width: 768px) and (max-width: 1024px) {
    .px-primary {
        padding-left: 8vw !important;
        padding-right: 8vw !important;
    }

    .px-sub-primary {
        padding-left: 11vw !important;
        padding-right: 11vw !important;
    }

    .fs-title {
        letter-spacing: 0.15em !important;
        font-size: 34pt !important;
        padding-bottom: 4rem !important;
    }

    .fs-1 {
        font-size: 20pt !important;
        letter-spacing: 0.05em !important;
    }

    .fs-2 {
        font-size: 18pt !important;
        letter-spacing: 0.05em !important;
    }

    .fs-3 {
        font-size: 16pt !important;
        letter-spacing: 0.05em !important;
    }

    .fs-4 {
        font-size: 12pt !important;
        letter-spacing: 0.05em !important;
    }

    .fs-5 {
        font-size: 9pt !important;
        letter-spacing: 0.05em !important;
    }
}

/* 手機 */
@media (max-width: 767px) {
    .px-primary {
        padding-left: 6vw !important;
        padding-right: 6vw !important;
    }

    .px-sub-primary {
        padding-left: 9vw !important;
        padding-right: 9vw !important;
    }

    .fs-title {
        letter-spacing: 0.1em !important;
        font-size: 30pt !important;
        padding: 4rem 2rem 4rem 2rem !important;
    }

    .fs-1 {
        font-size: 18pt !important;
        letter-spacing: 0.05em !important;
    }

    .fs-2 {
        font-size: 14pt !important;
        letter-spacing: 0.05em !important;
    }

    .fs-3 {
        font-size: 11pt !important;
        letter-spacing: 0.05em !important;
    }

    .fs-4 {
        font-size: 9pt !important;
        letter-spacing: 0.05em !important;
    }

    .fs-5 {
        font-size: 6pt !important;
        letter-spacing: 0.05em !important;
    }

    .age0to1-img-box {
        width: 60%;
        margin: 0 auto;
    }
}