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


/*////////////////////////////// 首頁 //////////////////////////////*/

html,
body {
    overflow-x: hidden;
    font-family: Arial, 'Noto Sans TC', sans-serif;
    font-weight: 300;
    height: 100%;
}

* {
    /* outline: 1px solid red; */
}

.wrapper {
    min-height: 70%;
    display: flex;

    flex-direction: column;
    margin: 0;
    overflow: hidden;

    position: relative;
}

button {
    cursor: pointer;
}



/* 首頁標題 */
.title_box {
    text-align: center;
    /* margin: 20px 0; */
    padding: 20px 0;
    position: relative;
}

.title_box::before {
    content: "";
    display: inline-block;
    width: 80%;
    height: 3px;
    background-color: #E1BE84;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: linear-gradient(to right, #E1BE84 30%, transparent 30%, transparent 70%, #E1BE84 70%);
}

/* 20241017 h1換h2 */
.title_box h2 {
    font-size: 1.5rem;
    color: #1D3244;
    margin-top: 10px;
}

@media (max-width: 767.98px) {

    .title_box::before {
        width: 200%;
        /* background: linear-gradient(to right , #E1BE84 35% , transparent 35% , transparent 65% , #E1BE84 65% ); */
    }

    /* 20241017 h1換h2 */
    .title_box h2 {
        font-size: 1.3rem;
    }
}

/* 首頁 MORE按鈕 */
.more_btn {
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.more_btn:after {
    content: "";
    display: inline-block;
    width: calc(100% - 200px);
    height: 4px;
    border: 1px solid #1D3244;
    border-radius: 50px;

    position: absolute;
    left: 0;
    bottom: 38px;

    transition: 0.3s;
}

.more_btn .more {
    display: inline-block;
    border: 2px solid #E1BE84;
    border-radius: 50px;
    padding: 3px;
    background-color: #fff;

    position: relative;
}

.more_btn .more::after {
    content: "";
    display: inline-block;
    width: 200px;
    height: 200px;

    background-image: url(../img/bg_3.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1);

    animation: ss 15s infinite;
    z-index: -1;
}

@keyframes ss {
    50% {
        transform: translateX(-50%) translateY(-50%) rotate(360deg) scale(1.5);
    }

    100% {
        transform: translateX(-50%) translateY(-50%) rotate(720deg) scale(1);
    }

}

.more_btn .more button {
    display: inline-block;
    color: #fff;
    background-color: #1D3244;
    width: 70px;
    height: 70px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;

    background-position: -20px center;

    /* border: 3px solid transparent; */
    transition: 0.3s;
}

.more_btn .more button:hover {
    transform: scale(1.3);

    color: #1D3244;
    font-size: 0.2rem;
    background-image: url(../img/arrow.svg);
    background-repeat: no-repeat;
    background-position: 19px center;
    background-size: 30px;

    /* border: 3px solid #E1BE84; */
}




/* 1201 */
.navbar {
    border-bottom: 3px solid #E1BE84;
    /* padding-bottom: 0; */
    padding: 0;
}

/* 1201 */
.navbar .container {
    display: flex;
    flex-direction: column;
    position: relative;

    align-items: flex-start;
    margin-top: 10px;
}

/* 20241017 */
.navbar .logo_box {
    margin: 0;
}

/* 1201 */
.navbar .navbar-brand {
    /* margin-top: 35px; */
    margin-bottom: 10px;
}

.navbar .navbar-brand img {
    width: 100%;
}

/* 次選單 */
/* 1201 */
.navbar .submenu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;

    position: absolute;
    right: 20px;
    top: 15px;
}

.navbar .submenu li a {
    color: #1D3244;
    font-size: 1rem;
    margin: 2px 10px;
    font-weight: 400;
}

.navbar .submenu li a:hover {
    opacity: 0.9;
    text-decoration: none;
}

/* 1108 登入按鈕 */
.navbar .submenu .btn_box {
    border-left: 1px solid #E1BE84;
    border-right: 1px solid #E1BE84;
    padding: 0 8px;
}

.navbar .submenu .btn_box button {
    background-color: #1D3244;
    border-radius: 20px;
    border: 1px solid #1D3244;
    color: #fff;
    padding: 0px 15px;
    padding-top: 1px;
    margin: 0 3px;
    font-size: 0.9rem;
    transition: 0.3s;
}

.navbar .submenu .btn_box button:hover {
    background-color: transparent;
    color: #E1BE84;
    border: 1px solid #E1BE84;
}

/* 1108 */

.navbar .submenu li.language_box a {
    background-image: url(../img/language.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;

    padding: 13px 18px;
    padding-top: 11px;

    transition: 0.3s;
}

.navbar .submenu li.language_box a:hover {
    background-image: url(../img/language_g.svg);
    color: #d3a760;
}

.navbar .submenu li.language_box a p {
    margin: 0;
    display: inline-block;

    transform: translateX(5px) translateY(-5px);
}



/* 20240410 新增 搜尋 */
/* 搜尋按鈕 */
.navbar .submenu .search_button {
    border-left: 1px solid #E1BE84;
    height: 25px;
}

.navbar .submenu .search_button button {
    background-image: url(../img/search_icon.svg);
    background-repeat: no-repeat;
    background-size: 25px;

    width: 25px;
    height: 25px;
    background-color: transparent;
    border: none;

    padding: 0;
    margin-left: 10px;

    transition: 0.3s;
}

.navbar .submenu .search_button button:hover {
    background-image: url(../img/search_icon_y.svg);
    transform: scale(1.2);
}

.navbar .submenu .search_button button img {
    width: 25px;
}

/* 搜尋彈跳視窗 */
.modal.search .modal-content {
    background-color: #ffffffce;
}

.modal.search .modal-body .search_box {
    display: flex;
    align-items: stretch;
}

.modal.search .modal-body button.close {
    margin-left: 30px;
}

.modal.search .modal-body .search_box .form-group {
    margin: 0;
    flex-grow: 1;
}

.modal.search .modal-body .search_box .form-group .form-control {
    color: #4d4d4d;
    font-size: 0.95rem;
    border: 1px solid #e6e6e6;
    box-shadow: inset 2px 2px 3px rgba(228, 228, 228, 0.338);
    transition: 0.3s;
}

.modal.search .modal-body .search_box .form-group .form-control::placeholder {
    color: #4d4d4d;
    font-weight: 300;
    font-size: 0.95rem;
}

.modal.search .modal-body .search_box .search_btn button {
    margin-left: 10px;

    background-color: #1D3244;
    border-radius: 5px;
    border: 1px solid #1D3244;
    color: #fff;
    padding: 5px 15px;
    font-size: 1rem;
    transition: 0.3s;
}

.modal.search .modal-body .search_box .search_btn button:hover {
    background-color: transparent;
    color: #1D3244;
}

@media (max-width: 991.98px) {

    .navbar .submenu .search_button button {
        background-image: url(../img/search_icon_w.svg);
        margin-right: 10px;
    }
}

@media (max-width: 575.98px) {
    .navbar .submenu .search_button {
        border: none;
        padding-top: 3px;
    }

    .navbar .submenu .search_button button {
        margin-left: 3px;
    }

    .navbar .submenu li:nth-last-child(3) {
        margin-left: 130px;
    }

    .modal.search .modal-body {
        padding: 10px;
    }

    .modal.search .modal-body .search_box .form-group {
        flex-grow: initial;
        flex-basis: calc(100% - 98px);
    }

    .modal.search .modal-body button.close {
        margin-left: 10px;
    }
}




/* 主選單 */
.navbar .collapse {
    width: 100%;
    align-items: stretch;
}

.navbar .menu {
    width: 100%;
    align-items: flex-start;
}

.navbar .menu .nav-item {
    flex-grow: 1;
    text-align: center;
    position: relative;
    height: 100%;
}

.navbar .menu .nav-link {
    color: #1D3244;
    padding: 8px 5px;
    padding-top: 12px;
    font-size: 1.2rem;
    font-weight: 500;

    transition: 0.3s;
    position: relative;

    height: 100%;
}

.navbar .menu .nav-link:hover {
    color: #fff;
    transform: translateY(-5px);
}

.navbar .menu .nav-link:before {
    content: "";
    display: inline-block;
    width: 100%;
    height: calc(100% + 5px);
    border-radius: 10px 10px 0 0;
    background-color: transparent;
    position: absolute;
    bottom: -5px;
    left: 0;

    transition: 0.3s;
    z-index: -1;
}

.navbar .menu .nav-link:hover:before {
    background-color: #d3a760;
    bottom: -5px;

    background-image: url(../img/menu_bg1.svg);
    background-position: center;
    background-size: 100%;
}


/* 主選單 第二層選單 */
/* 1110 */
.navbar .menu .dropdown-menu {
    background-color: rgba(250, 250, 250, 0.966);
    border: none;
    padding: 0;
    left: 50%;
    top: calc(100% + 1px);

    transform: translateX(-50%);

    box-shadow: 2px 2px 3px #00000017;
}

.navbar .menu .dropdown-menu .dropdown-item {
    padding: 12px 20px;
    text-align: center;
    font-size: 1.1rem;

    transition: 0.3s;
}

.navbar .menu .dropdown-menu .dropdown-item:hover {
    background-color: #1D3244;
    color: #fff;
    font-weight: 500;

    background-image: url(../img/menu_bg2.svg);
    background-position: center;
    background-size: 100%;
}



@media (max-width: 991.98px) {

    /* 1201 */
    /* 1211 */
    .navbar .navbar-brand {
        margin-right: 0;
        /* margin-top: 35px; */
        margin-top: 10px;
        margin-left: 15px;
    }

    /* 漢堡紐 */
    /* 1201 */
    /* 1211 */
    .navbar .navbar-toggler {
        background-image: url(../img/menu_bg1.svg);
        background-size: 100%;

        position: absolute;
        right: 28px;
        /* top: 55px; */
        top: 20px;

        width: 45px;
        height: 45px;
        border-radius: 10px;
    }

    .navbar .navbar-toggler span {
        display: inline-block;
        width: 25px;
        height: 2px;
        background-color: #E1BE84;
        border-radius: 50px;

        position: absolute;
        top: 0;
        left: 10px;

        transition: 0.3s;
    }

    .navbar .navbar-toggler .line1 {
        top: 12px;
        width: 22px;
    }

    .navbar .navbar-toggler .line2 {
        top: 20px;
        width: 16px;
    }

    .navbar .navbar-toggler .line3 {
        top: 29px;
    }

    .navbar .navbar-toggler .line1.add {
        top: 21px;
        width: 22px;
        transform: rotate(45deg);
    }

    .navbar .navbar-toggler .line2.add {
        left: 20px;
        opacity: 0;
    }

    .navbar .navbar-toggler .line3.add {
        top: 21px;
        left: 9px;
        transform: rotate(-45deg);
    }

    /* 1201 */
    .navbar {
        /* justify-content: center; */
    }

    .navbar .container {
        margin: 0;
        position: initial;
    }

    /* 1201 */
    /* 1211 */
    nav .navbar-collapse {
        position: absolute;
        /* top: 127px; */
        top: 88px;
        width: 100%;
        z-index: 555;

        background-color: #1D3244;
    }

    .navbar .menu {
        margin: 10px 0;
    }

    .navbar .menu .nav-item {
        width: 100%;
        text-align: left;
        padding: 0 10px;
    }

    .navbar .menu .nav-link {
        display: inline-block;
        color: #fff;
        width: 100%;
        padding: 15px 20px;
        border-radius: 10px;
    }

    .navbar .menu .nav-link::before {
        content: none;
    }

    .navbar .menu .nav-link:hover {
        transform: none;
        background-color: #E1BE84;
    }

    .navbar .menu .dropdown-menu {
        background-color: transparent;
        transform: none;
        float: left;
        padding-left: 15px;
        margin: 10px 0;

        border-radius: 0;
        border-bottom: 1px solid #fff;
        width: 100%;
    }

    .navbar .menu .dropdown-menu .dropdown-item {
        color: #fff;
        text-align: left;
        display: inline-block;
        border-radius: 10px;
    }

    .navbar .menu .dropdown-menu .dropdown-item:hover {
        background-color: #fff;
        color: #1D3244;
        padding-left: 25px;
        background-image: none;
    }

    /* 1211 ↓ */
    .navbar .submenu {
        position: initial;
        top: initial;
        right: initial;
        justify-content: flex-end;
        align-items: center;
        margin: 15px 0;
    }

    .navbar .submenu li a {
        color: #fff;
    }

    .navbar .submenu .btn_box button {
        border-color: #fff;
    }

    .navbar .submenu li.language_box a {
        background-image: url(../img/language_w.svg);
        font-size: 0.9rem;
    }

    /* 1211 ↑ */

}

@media (max-width: 575.98px) {

    .navbar {
        padding: 0;
    }

    /* .navbar .container{
        align-items: flex-start;
    } */

    /* 1108 1201 1211 */
    .navbar .navbar-brand {
        /* margin-top: 70px; */
        padding-right: 20px;
        margin-left: 5px;
    }

    /* 1211 */
    .navbar .navbar-brand img {
        /* width: 100%; */
        width: 86%;
    }

    /* 1211 */
    .navbar .submenu {
        /* right: 15px; */
        flex-wrap: wrap;
    }

    /* 1211 */
    .navbar .submenu li {
        padding-top: 5px;
        order: 2;
    }

    /* 1211 */
    .navbar .submenu li a {
        /* margin: 2px 0px; */
        /* margin-left: 8px; */
        margin: 2px 8px;
    }

    /* 1211 */
    .navbar .submenu li.language_box {
        order: 1;
    }

    /* 1108 1211 */
    .navbar .submenu .btn_box {
        border-left: none;
        border-right: none;
        /* padding: 0 2px; */

        /* position: absolute; */
        /* top: 35px; */
        /* right: 0; */
    }

    /* 1108 */
    .navbar .submenu .btn_box button {
        margin: 0px;
        /* margin-left: 5px; */
    }

    /* 1108 1201 1211 */
    .navbar .navbar-toggler {
        right: 5px;
        /* top: 90px; */
    }

    /* 1108 1201 1211 */
    nav .navbar-collapse {
        top: 80px;
    }
}


/* 1121 新增 回到頂端 ↓ */
.top_box {
    position: fixed;
    z-index: 55;
    right: 20px;
    bottom: 2%;
    transition: 0.3s;

    display: none;
}

.top_box .top {
    border: 3px solid #1D3244;
    background-color: #fff;
    border-radius: 100px;
    margin: 3px;
    width: 40px;
    height: 40px;
}

.top_box .top .circle {
    width: 35px;
    height: 35px;
    border-radius: 100px;

    background-color: #1D3244;
    border: 2px solid #fff;
    position: relative;
}

.top_box .top img {
    width: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-52%) translateY(-55%) rotate(-90deg);
}

.top_box:hover {
    transform: scale(1.05);
}

@media (max-width: 991.98px) {
    .top_box {
        right: 10px;
        bottom: 1%;
    }
}

/* 1121 新增 回到頂端 ↑ */



/* banner */
.banner .marquee .box img {
    width: 100%;
}

.slick-prev {
    left: 20px;
    top: initial;
    bottom: 50px;
    z-index: 5;
}

.slick-prev:before {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #ffffff61;
    border: 3px solid #fff;
    background-image: url(../img/arrow.svg);
    background-position: center;
    background-size: 23px;
    transform: rotate(180deg);
}

.slick-next {
    right: 50px;
    top: initial;
    bottom: 50px;
    z-index: 5;
}

.slick-next:before {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #ffffff61;
    border: 3px solid #fff;
    background-image: url(../img/arrow.svg);
    background-position: center;
    background-size: 23px;
}

.slick-prev:hover:before,
.slick-next:hover:before {
    background-color: #ffffffa2;
}

/* 點點 */
.slick-dots {
    position: absolute;
    transform: translateY(-40px);
}

.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.slick-dots li button:before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    opacity: 1;
    background-color: #fff;
    border-radius: 50px;
    border: 1px solid #ccc;
    opacity: 0.8;
}

.slick-dots li.slick-active button:before {
    background-color: #1D3244;
    border: 1px solid #ccc;
    opacity: 1;
}

@media (max-width: 767.98px) {

    .slick-prev {
        bottom: 20px;
        left: 10px;
    }

    .slick-prev:before {
        width: 30px;
        height: 30px;
        border: 2px solid #fff;
        background-size: 15px;
        transform: rotate(180deg);
    }

    .slick-next {
        bottom: 20px;
        right: 20px;
    }

    .slick-next:before {
        width: 30px;
        height: 30px;
        border: 2px solid #fff;
        background-size: 15px;
    }

    .slick-dots {
        transform: translateY(-25px);
    }
}






/* 最新消息 news */
section.news {
    background-image: url(../img/bg_1.svg), url(../img/bg_2.svg);
    background-repeat: no-repeat;
    background-position: calc(100% + 100px) -100px, -100px calc(100% + 150px);
    background-size: 550px, 400px;

    padding-bottom: 60px;
    padding-top: 20px;
}

.news .btn_box {
    display: flex;
    flex-wrap: wrap;

    margin: 0 -8px;
}

.news .btn_box button {
    border: 1px solid #E1BE84;
    border-radius: 15px 5px 15px 5px;
    background-color: transparent;
    color: #1D3244;
    font-weight: 500;
    padding: 5px 10px;
    margin: 8px 8px;
    flex-basis: calc(100% / 5 - 16px);

    transition: 0.3s;

    position: relative;
}

.news .btn_box button p {
    margin: 0;
    position: relative;
}

.news .btn_box button.active {
    background-color: #d3a760;
    color: #fff;
    position: relative;
}

.news .btn_box button::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: calc(100% + 25px);
    background-image: url(../img/news_btn_bg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;

    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotateX(90deg);
    transition: 0.3s;
}

.news .btn_box button.active::before {
    transform: translateY(-50%) rotateX(0deg);
}

.news .btn_box button:focus {
    outline: #E1BE84;
}

.news .btn_box button:hover {
    background-color: #d3a760;
    color: #fff;
}

.news .list {
    margin: 0;
    padding: 0;
    list-style: none;
    margin: 20px 0;

    position: relative;

    display: none;
}

.news .list.show {
    display: block;
}

.news .list li a {
    width: 100%;
    display: inline-block;
    color: #1D3244;
    padding: 18px 30px;
    border-radius: 10px;
    font-weight: 400;

    position: relative;
    transition: 0.3s;
}

.news .list li a:after {
    content: "";
    display: inline-block;
    width: 95%;
    height: 4px;
    border: 1px solid transparent;
    border-radius: 50px;

    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    transition: 0.3s;
}

.news .list li a:hover:after {
    border: 1px solid #E1BE84;
}

.news .list li a .tag_box {
    display: flex;
    align-items: center;
}

.news .list li a .tag_box div {
    background-color: #1D3244;
    color: #fff;
    padding: 2px 15px;
    border-radius: 10px 5px 10px 5px;
    font-size: 0.9rem;
}

.news .list li a .tag_box img {
    width: 50px;
    margin-left: 5px;
    transform: translateY(-2px);
}

.news .list li a .text_box {
    display: flex;
    margin-top: 5px;
}

.news .list li a .text_box p {
    margin: 0;
    font-size: 1.2rem;

    flex-basis: calc(100% - 110px);
}

.news .list li a .text_box p.time {
    /* margin-right: 10px; */
    flex-basis: 110px;
}


.news .list li a:hover {
    background-color: #1d324406;
    text-decoration: none;
}

@media (max-width: 1199.98px) {

    section.news {
        background-position: calc(100% + 100px) -100px, -100px calc(100% + 150px);
        background-size: 500px, 350px;
    }
}

@media (max-width: 991.98px) {

    .news .btn_box button {
        flex-basis: calc(100% / 3 - 16px);
    }
}

@media (max-width: 767.98px) {

    .news .list li a .text_box {
        flex-direction: column;
    }

    .news .list li a .text_box p {
        font-size: 1rem;
    }

    .news .list li a .text_box p.time {
        flex-basis: initial;
        border-bottom: 1px solid #1d32444f;
        margin-bottom: 2px;
    }
}


@media (max-width: 575.98px) {
    section.news {
        background-position: calc(100% + 100px) -100px, -100px calc(100% + 150px);
        background-size: 400px, 250px;
    }

    .news .btn_box button {
        flex-basis: calc(100% / 2 - 16px);
    }

    .news .list li a {
        padding: 18px 15px;
    }
}




/* services */
.services {
    width: 100%;
    background-image: url(../img/services_bg.png);
    background-position: center;
    background-attachment: fixed;
}

.services .bg {
    background-color: #1d32444f;
    padding-bottom: 30px;
}

.services .title_box {
    flex-basis: 50%;
}

.services .title_box::before {
    background: linear-gradient(to right, #E1BE84 15%, transparent 15%, transparent 85%, #E1BE84 85%)
}

/* 20241017 h1換h2 */
.services .title_box h2 {
    color: #fff;
}

.services .btn_box {
    margin: 0;
    padding: 0;
    list-style: none;
    flex-basis: 40%;

    display: flex;
    border-radius: 20px;
}

.services .btn_box li {
    flex-basis: calc(100% /3);
    padding: 20px;
}

.services .btn_box li a {
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 40px 0;

    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 110%;

    transition: 0.3s;

    background-color: #1d3244e9;
    border-radius: 50px 10px 50px 10px;
    position: relative;
}

.services .btn_box li a::after {
    /* content: ""; */
    display: inline-block;
    width: 2px;
    height: 50%;
    background-color: #E1BE84;

    position: absolute;
    top: 25%;
    right: 0;
}

.services .btn_box li a:hover {
    text-decoration: none;
    background-image: url(../img/services_btn_bg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 120%;
    background-color: #e1bd84d3;
}

.services .btn_box li a img {
    width: 150px;
    padding-bottom: 10px;
}

.services .btn_box li a p {
    margin: 0;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 500;
}








/* 20250724 修改樣式1 */
.services .title_box h2 span {
    display: inline-block;
    width: 100%;
}

.services .btn_box li a p {
    display: flex;
    flex-direction: column;
    font-size: 1.4rem;
}

.services .btn_box li a p span {
    font-size: 1.1rem;
}



/* 20250724 修改樣式2 */
/* .services .bg {
    padding-top: 30px;
}

.services .btn_box {
    align-items: flex-end;
    flex-direction: column;
    position: relative;
}

.services .btn_box li {
    padding: 10px;
}

.services .btn_box li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;

    width: 450px;
}

.services .title_box h2 span {
    display: inline-block;
    width: 100%;
}

.services .btn_box li a img {
    width: 70px;
    padding-bottom: 0;
}

.services .btn_box li a p {
    text-align: left;
    display: flex;
    flex-direction: column;
    font-size: 1.4rem;
    padding-right: 10px;
}

.services .btn_box li a p span {
    font-size: 1.1rem;
}

.aa {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50px;
    width: calc(100% - 600px);
}

.aa img {
    width: 100%;
} */


/* @media (max-width: 991.98px) {

    .aa {
        width: calc(100% - 410px);
        left: 0;
    }

    .services .btn_box li a {
        width: 370px;
    }

    .services .bg .btn_box li a img {
        width: 70px;
    }
}

@media (max-width: 767.98px) {

    .aa {
        display: none;
    }

    .services .btn_box li {
        width: 100%;
    }

    .services .btn_box li a {
        width: 100%;
    }

    .services .bg .btn_box li a img {
        width: 100px;
        margin-right: 10px;
    }
}

@media (max-width: 575.98px) {

    .services .bg .btn_box li{
        padding: 10px 0;
    }

    .services .bg .btn_box li a{
        padding: 25px 5px;
        border-radius: 40px 10px 40px 10px;
    }

    .services .bg .btn_box li a img {
        width: 60px;
        margin-right: 0px;
    }

    .services .btn_box li a p span{
        font-size: 1rem;
    }
} */







@media (max-width: 1199.98px) {
    .services .btn_box li a {
        padding: 20px 0;
        background-size: 120%;
    }
}


@media (max-width: 991.98px) {

    .services .btn_box li {
        padding: 10px 5px;
    }

    .services .btn_box li a {
        padding: 15px 15px;
        background-size: 130%;
        padding-bottom: 20px;
    }

    .services .btn_box li a:hover {
        background-size: 140%;
    }

    .services .btn_box li a img {
        width: 125px;
        /* padding-bottom: 3px; */
    }

    .services .btn_box li a p {
        font-size: 1.2em;
    }
}

@media (max-width: 767.98px) {

    .services .title_box::before {
        width: 150%;
        background: linear-gradient(to right, #E1BE84 20%, transparent 20%, transparent 80%, #E1BE84 80%);
    }

    .services .btn_box {
        flex-wrap: wrap;
        flex-direction: column;
    }

    .services .btn_box li a {
        background-size: 100%;
        padding: 25px 10px;
    }

    .services .btn_box li a:hover {
        background-size: 110%;
    }
}







/* international 國際交流 */
.international {
    background-color: #FFF9FC;
    padding-top: 40px;
    padding-bottom: 40px;
}

.international .container {
    max-width: 1000px;
}

.international .title_box::before {
    background: linear-gradient(to right, #E1BE84 15%, transparent 15%, transparent 85%, #E1BE84 85%);
}

/* 20241017 修改class h1換h2 */
.international .title_box+h2 {
    color: #1D3244;
    font-size: 1.3rem;
    text-align: center;
    border-bottom: 1px solid #E1BE84;
    margin: 0 30px;
    padding-bottom: 2px;
    margin-top: 40px;
    margin-bottom: 30px;
}

.international .box {
    display: flex;
    position: relative;
    /* z-index: 0; */
    margin: 0 30px;
}

.international .box::after {
    content: "";
    display: inline-block;
    width: 200px;
    height: 200px;

    background-image: url(../img/bg_3.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;

    position: absolute;
    top: initial;
    left: initial;
    right: -90px;
    bottom: -110px;
    transform: rotate(0deg);

    animation: ff 15s infinite;
    /* z-index: 0; */
}

@keyframes ff {

    50% {
        transform: rotate(360deg) scale(1.3);
    }

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

.international .box .text {
    flex-basis: 50%;
    padding-right: 15px;
    color: #1D3244;
}

.international .box .text p {
    margin: 0;
    font-weight: 400;
}

.international .box .img_box {
    flex-basis: 50%;
    border-radius: 10px;
    overflow: hidden;

    z-index: 1;
}

.international .box .img_box .img {
    border-radius: 5px;
    overflow: hidden;

    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}

.international .box .img_box img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-position: center; */

    transition: 0.2s;
}

.international .more_btn {
    z-index: 1;
    transform: translateY(-25px);
    /* margin: 0 30px; */
}


.international .more_btn:after {
    width: calc(50% - 50px);
    left: 30px;
}

.international .more_btn .more::after {
    content: none;
}



@media (max-width: 991.98px) {
    .international .container {
        max-width: 720px;
    }

    .international .box {
        flex-direction: column;
    }

    .international .box .text {
        padding-right: 0;
        padding-bottom: 15px;
    }

    .international .more_btn:after {
        width: calc(100% - 200px);
    }
}

@media (max-width: 767.98px) {

    .international .title_box::before {
        width: 110%;
        background: linear-gradient(to right, #E1BE84 10%, transparent 10%, transparent 90%, #E1BE84 90%);
    }

    .international h2 {
        font-size: 1.2rem;
    }

    .international .box .text p {
        /* font-size: 0.9rem; */
    }
}

@media (max-width: 575.98px) {

    .international h2 {
        margin: 0 0px;
        margin-top: 20px;
        margin-bottom: 30px;

    }

    .international .box {
        margin: 0 0px;
    }

    .international .more_btn:after {
        left: 0;
    }

    .international .box::after {
        right: -60px;
    }
}






/* newsletter 電子報 */
.newsletter {
    padding-top: 40px;
    padding-bottom: 40px;

    background-image: url(../img/bg_4.svg);
    background-repeat: no-repeat;
    background-position: -160px calc(100% + 180px);
    background-size: 500px;
}

/* 輪播 */
#carousel {
    position: relative;
    height: 560px;
    margin-top: 20px;
}

#carousel div {
    position: absolute;
    transition: transform 1s, left 1s, opacity 1s, z-index 0s;
    opacity: 1;
}

#carousel div img {
    width: 380px;
    transition: width 1s;
}

#carousel div.hideLeft {
    left: 0%;
    opacity: 0;
    transform: translateY(120px) translateX(-50%);
}

#carousel div.hideLeft img {
    width: 150px;
}

#carousel div.hideRight {
    left: 100%;
    opacity: 0;
    transform: translateY(120px) translateX(-50%);
}

#carousel div.hideRight img {
    width: 150px;
}

#carousel div.prev {
    z-index: 5;
    left: 30%;
    transform: translateY(40px) translateX(-50%);
}

#carousel div.prev img {
    width: 300px;
}

#carousel div.prevLeftSecond {
    z-index: 4;
    left: 15%;
    transform: translateY(90px) translateX(-50%);
    opacity: 0.7;
}

#carousel div.prevLeftSecond img {
    width: 200px;
}

#carousel div.selected {
    z-index: 10;
    left: 50%;
    transform: translateY(0px) translateX(-50%);
}

#carousel div.next {
    z-index: 5;
    left: 70%;
    transform: translateY(40px) translateX(-50%);
}

#carousel div.next img {
    width: 300px;
}

#carousel div.nextRightSecond {
    z-index: 4;
    left: 85%;
    transform: translateY(90px) translateX(-50%);
    opacity: 0.7;
}

#carousel div.nextRightSecond img {
    width: 200px;
}

/* 內容 */
.newsletter #carousel div a {
    display: inline-block;
    padding: 0 25px;

    pointer-events: none;
    opacity: 0.9;
    filter: blur(3px);
}

.newsletter #carousel .selected a {
    pointer-events: initial;
    opacity: 1;
    filter: blur(0px);
}

.newsletter #carousel a img {
    /* width: 100%; */
    border-radius: 20px 20px 0 0;
}

.newsletter #carousel a .bg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    height: 85%;
    background-color: #1D3244;

    border-radius: 20px 20px;

    border: 5px solid #fff;
    z-index: -1;
}

.newsletter #carousel a p {
    margin: 0;
    color: #fff;
    text-align: center;
    padding: 8px 0;
    padding-bottom: 12px;
    font-size: 1.2rem;
}

/* 左右按鈕 */
.newsletter .buttons {
    /* position: relative; */
    display: flex;
    justify-content: space-between;
    width: 43%;
    margin: 0 auto;

    transform: translateY(-45px);
    position: relative;
    z-index: 15;
}

.newsletter .buttons #prev {
    width: 75px;
    height: 75px;

    background-color: #1D3244;
    border-radius: 50px;
    border: 3px solid #fff;

    background-image: url(../img/arrow.svg);
    background-repeat: no-repeat;
    background-position: 17px center;
    background-size: 40px;

    transition: 0.3s;
    transform: rotate(180deg);
}

.newsletter .buttons #prev:hover {
    transform: rotate(180deg) scale(1.3);
}

.newsletter .buttons #next {
    width: 75px;
    height: 75px;

    background-color: #1D3244;
    border-radius: 50px;
    border: 3px solid #fff;

    background-image: url(../img/arrow.svg);
    background-repeat: no-repeat;
    background-position: 17px center;
    background-size: 40px;

    transition: 0.3s;
}

.newsletter .buttons #next:hover {
    transform: scale(1.3);
}

/* MORE 按鈕 */
.newsletter .more_btn {
    width: 78%;
    margin: 0 auto;
    transform: translateY(-160px);
    z-index: 11;
    /* position: absolute; */
    /* bottom: 135px; */
}

.newsletter .more_btn:after {
    width: 26%;
    left: initial;
    right: 0;
    z-index: -1;
}

.newsletter .more_btn .more::after {
    content: none;
}

.newsletter .more_btn .more button:hover {
    transform: scale(1.3) rotate(360deg);

    border: 3px solid #fff;

    color: #fff;
    font-size: 1rem;
    background-image: none;
}


@media (max-width: 1199.98px) {

    .newsletter .buttons {
        width: 50%;
    }

    .newsletter .more_btn:after {
        width: 22%;
    }
}


@media (max-width: 991.98px) {

    .newsletter .more_btn {
        width: 100%;
    }

    .newsletter .buttons {
        width: 70%;
        transform: translateY(-20px);
    }
}




@media (max-width: 767.98px) {

    .newsletter .more_btn {
        width: 110%;
    }

    .newsletter .more_btn:after {
        width: 18%;
    }

    .newsletter .buttons {
        width: 100%;
        transform: translateY(-20px);
    }
}


@media (max-width: 575.98px) {

    .newsletter .more_btn {
        width: 100%;
        transform: translateY(-20px);
    }

    .newsletter .more_btn .more button {
        width: 60px;
        height: 60px;
        font-size: 0.9rem;
    }

    .newsletter .more_btn:after {
        width: 100%;
    }

    .newsletter .buttons {
        width: 73%;
        margin: 0;

        transform: translateY(42px);
    }


    .newsletter .buttons #prev {
        width: 60px;
        height: 60px;

        background-position: 14px center;
        background-size: 30px;
    }

    .newsletter .buttons #next {
        width: 60px;
        height: 60px;

        background-position: 14px center;
        background-size: 30px;
    }

    #carousel {
        height: 360px;
    }

    #carousel div img {
        width: 260px;
    }

    #carousel div.hideLeft img {
        width: 50px;
    }

    #carousel div.hideRight img {
        width: 50px;
    }

    #carousel div.prev img {
        width: 200px;
    }

    #carousel div.prevLeftSecond img {
        width: 150px;
    }

    #carousel div.next img {
        width: 200px;
    }

    #carousel div.nextRightSecond img {
        width: 150px;
    }

}












/* 世界地圖 world map */
.world {
    padding-top: 40px;
    padding-bottom: 40px;
}

.world .map {
    position: relative;
}

.world .map img {
    width: 100%;
    margin: 20px 0;
}

/* 1215 新增 地圖動畫 */
.www svg {
    width: 100%;
}

svg .svg-elem-1 {
    stroke-dashoffset: 2697.32080078125px;
    stroke-dasharray: 2697.32080078125px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
}

svg.active .svg-elem-1 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-2 {
    stroke-dashoffset: 3050.89990234375px;
    stroke-dasharray: 3050.89990234375px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.56s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.55s;
}

svg.active .svg-elem-2 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-3 {
    stroke-dashoffset: 376.4460754394531px;
    stroke-dasharray: 376.4460754394531px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.62s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
}

svg.active .svg-elem-3 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-4 {
    stroke-dashoffset: 988.61474609375px;
    stroke-dasharray: 988.61474609375px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6799999999999999s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.65s;
}

svg.active .svg-elem-4 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-5 {
    stroke-dashoffset: 137.00868225097656px;
    stroke-dasharray: 137.00868225097656px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.74s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
}

svg.active .svg-elem-5 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-6 {
    stroke-dashoffset: 30.214658737182617px;
    stroke-dasharray: 30.214658737182617px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.75s;
}

svg.active .svg-elem-6 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-7 {
    stroke-dashoffset: 352.37939453125px;
    stroke-dasharray: 352.37939453125px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.86s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-7 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-8 {
    stroke-dashoffset: 711.373291015625px;
    stroke-dasharray: 711.373291015625px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9199999999999999s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8500000000000001s;
}

svg.active .svg-elem-8 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-9 {
    stroke-dashoffset: 312.474365234375px;
    stroke-dasharray: 312.474365234375px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.98s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg-elem-9 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-10 {
    stroke-dashoffset: 774.3724975585938px;
    stroke-dasharray: 774.3724975585938px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.04s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.95s;
}

svg.active .svg-elem-10 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-11 {
    stroke-dashoffset: 219.11891174316406px;
    stroke-dasharray: 219.11891174316406px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg-elem-11 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-12 {
    stroke-dashoffset: 1539.17041015625px;
    stroke-dasharray: 1539.17041015625px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.16s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.05s;
}

svg.active .svg-elem-12 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-13 {
    stroke-dashoffset: 153.06773376464844px;
    stroke-dasharray: 153.06773376464844px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.22s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .svg-elem-13 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-14 {
    stroke-dashoffset: 119.9597396850586px;
    stroke-dasharray: 119.9597396850586px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.28s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.15s;
}

svg.active .svg-elem-14 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-15 {
    stroke-dashoffset: 717.130615234375px;
    stroke-dasharray: 717.130615234375px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3399999999999999s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .svg-elem-15 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-16 {
    stroke-dashoffset: 205.2263946533203px;
    stroke-dasharray: 205.2263946533203px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.25s;
}

svg.active .svg-elem-16 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-17 {
    stroke-dashoffset: 378.68804931640625px;
    stroke-dasharray: 378.68804931640625px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.46s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .svg-elem-17 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-18 {
    stroke-dashoffset: 717.81591796875px;
    stroke-dasharray: 717.81591796875px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.52s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.35s;
}

svg.active .svg-elem-18 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-19 {
    stroke-dashoffset: 622.9791870117188px;
    stroke-dasharray: 622.9791870117188px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.58s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s;
}

svg.active .svg-elem-19 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-20 {
    stroke-dashoffset: 197.9552764892578px;
    stroke-dasharray: 197.9552764892578px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.64s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4500000000000002s;
}

svg.active .svg-elem-20 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-21 {
    stroke-dashoffset: 398.0856018066406px;
    stroke-dasharray: 398.0856018066406px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.active .svg-elem-21 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-22 {
    stroke-dashoffset: 3032.989013671875px;
    stroke-dasharray: 3032.989013671875px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.76s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.55s;
}

svg.active .svg-elem-22 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-23 {
    stroke-dashoffset: 1041.9189453125px;
    stroke-dasharray: 1041.9189453125px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8199999999999998s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

svg.active .svg-elem-23 {
    stroke-dashoffset: 0;
    fill: rgb(29, 83, 129);
}

svg .svg-elem-24 {
    stroke-dashoffset: 66.44898223876953px;
    stroke-dasharray: 66.44898223876953px;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.88s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6500000000000001s;
}

svg.active .svg-elem-24 {
    stroke-dashoffset: 0;
}

svg .svg-elem-25 {
    stroke-dashoffset: 54.50297927856445px;
    stroke-dasharray: 54.50297927856445px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.94s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
}

svg.active .svg-elem-25 {
    stroke-dashoffset: 0;
    fill: rgb(224, 163, 64);
}

svg .svg-elem-26 {
    stroke-dashoffset: 94.04501342773438px;
    stroke-dasharray: 94.04501342773438px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.75s;
}

svg.active .svg-elem-26 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-27 {
    stroke-dashoffset: 107.6501235961914px;
    stroke-dasharray: 107.6501235961914px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.06s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}

svg.active .svg-elem-27 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-28 {
    stroke-dashoffset: 76.79707336425781px;
    stroke-dasharray: 76.79707336425781px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.12s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.85s;
}

svg.active .svg-elem-28 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-29 {
    stroke-dashoffset: 52.35253143310547px;
    stroke-dasharray: 52.35253143310547px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1799999999999997s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
}

svg.active .svg-elem-29 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-30 {
    stroke-dashoffset: 67.51728057861328px;
    stroke-dasharray: 67.51728057861328px;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.24s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9500000000000002s;
}

svg.active .svg-elem-30 {
    stroke-dashoffset: 0;
}

svg .svg-elem-31 {
    stroke-dashoffset: 53.667179107666016px;
    stroke-dasharray: 53.667179107666016px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

svg.active .svg-elem-31 {
    stroke-dashoffset: 0;
    fill: rgb(224, 163, 64);
}

svg .svg-elem-32 {
    stroke-dashoffset: 34.782867431640625px;
    stroke-dasharray: 34.782867431640625px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.36s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.05s;
}

svg.active .svg-elem-32 {
    stroke-dashoffset: 0;
    fill: rgb(241, 241, 241);
}

svg .svg-elem-33 {
    stroke-dashoffset: 85.34892272949219px;
    stroke-dasharray: 85.34892272949219px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.42s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}

svg.active .svg-elem-33 {
    stroke-dashoffset: 0;
    fill: rgb(61, 131, 190);
}

svg .svg-elem-34 {
    stroke-dashoffset: 102.3194351196289px;
    stroke-dasharray: 102.3194351196289px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.48s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1500000000000004s;
}

svg.active .svg-elem-34 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-35 {
    stroke-dashoffset: 136.33663940429688px;
    stroke-dasharray: 136.33663940429688px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.54s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
}

svg.active .svg-elem-35 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-36 {
    stroke-dashoffset: 90.52076721191406px;
    stroke-dasharray: 90.52076721191406px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.25s;
}

svg.active .svg-elem-36 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-37 {
    stroke-dashoffset: 76.3095703125px;
    stroke-dasharray: 76.3095703125px;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.66s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
}

svg.active .svg-elem-37 {
    stroke-dashoffset: 0;
}

svg .svg-elem-38 {
    stroke-dashoffset: 61.561851501464844px;
    stroke-dasharray: 61.561851501464844px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7199999999999998s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.35s;
}

svg.active .svg-elem-38 {
    stroke-dashoffset: 0;
    fill: rgb(224, 163, 64);
}

svg .svg-elem-39 {
    stroke-dashoffset: 95.73519897460938px;
    stroke-dasharray: 95.73519897460938px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.78s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
}

svg.active .svg-elem-39 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-40 {
    stroke-dashoffset: 107.04344177246094px;
    stroke-dasharray: 107.04344177246094px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.84s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.45s;
}

svg.active .svg-elem-40 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-41 {
    stroke-dashoffset: 116.5130615234375px;
    stroke-dasharray: 116.5130615234375px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
}

svg.active .svg-elem-41 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-42 {
    stroke-dashoffset: 93.96329498291016px;
    stroke-dasharray: 93.96329498291016px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.96s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5500000000000003s;
}

svg.active .svg-elem-42 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-43 {
    stroke-dashoffset: 60.53083801269531px;
    stroke-dasharray: 60.53083801269531px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.02s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
}

svg.active .svg-elem-43 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-44 {
    stroke-dashoffset: 81.96520233154297px;
    stroke-dasharray: 81.96520233154297px;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.08s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.65s;
}

svg.active .svg-elem-44 {
    stroke-dashoffset: 0;
}

svg .svg-elem-45 {
    stroke-dashoffset: 64.79083251953125px;
    stroke-dasharray: 64.79083251953125px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1399999999999997s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
}

svg.active .svg-elem-45 {
    stroke-dashoffset: 0;
    fill: rgb(224, 163, 64);
}

svg .svg-elem-46 {
    stroke-dashoffset: 125.87110137939453px;
    stroke-dasharray: 125.87110137939453px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1999999999999997s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.75s;
}

svg.active .svg-elem-46 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-47 {
    stroke-dashoffset: 135.22872924804688px;
    stroke-dasharray: 135.22872924804688px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.26s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8000000000000003s;
}

svg.active .svg-elem-47 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-48 {
    stroke-dashoffset: 131.38449096679688px;
    stroke-dasharray: 131.38449096679688px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.32s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.85s;
}

svg.active .svg-elem-48 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-49 {
    stroke-dashoffset: 136.39541625976562px;
    stroke-dasharray: 136.39541625976562px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.38s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
}

svg.active .svg-elem-49 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-50 {
    stroke-dashoffset: 109.42044830322266px;
    stroke-dasharray: 109.42044830322266px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.44s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.95s;
}

svg.active .svg-elem-50 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-51 {
    stroke-dashoffset: 100.40172576904297px;
    stroke-dasharray: 100.40172576904297px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
}

svg.active .svg-elem-51 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-52 {
    stroke-dashoffset: 52.019187927246094px;
    stroke-dasharray: 52.019187927246094px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.56s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.0500000000000003s;
}

svg.active .svg-elem-52 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-53 {
    stroke-dashoffset: 112.31612396240234px;
    stroke-dasharray: 112.31612396240234px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.62s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1s;
}

svg.active .svg-elem-53 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-54 {
    stroke-dashoffset: 92.8840560913086px;
    stroke-dasharray: 92.8840560913086px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6799999999999997s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1500000000000004s;
}

svg.active .svg-elem-54 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-55 {
    stroke-dashoffset: 92.32343292236328px;
    stroke-dasharray: 92.32343292236328px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.7399999999999998s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
}

svg.active .svg-elem-55 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-56 {
    stroke-dashoffset: 105.0895004272461px;
    stroke-dasharray: 105.0895004272461px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.25s;
}

svg.active .svg-elem-56 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-57 {
    stroke-dashoffset: 91.66316223144531px;
    stroke-dasharray: 91.66316223144531px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.86s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3000000000000003s;
}

svg.active .svg-elem-57 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-58 {
    stroke-dashoffset: 60.3059196472168px;
    stroke-dasharray: 60.3059196472168px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.92s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.35s;
}

svg.active .svg-elem-58 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-59 {
    stroke-dashoffset: 62.60356140136719px;
    stroke-dasharray: 62.60356140136719px;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.98s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s;
}

svg.active .svg-elem-59 {
    stroke-dashoffset: 0;
}

svg .svg-elem-60 {
    stroke-dashoffset: 49.91017150878906px;
    stroke-dasharray: 49.91017150878906px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.04s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.45s;
}

svg.active .svg-elem-60 {
    stroke-dashoffset: 0;
    fill: rgb(224, 163, 64);
}

svg .svg-elem-61 {
    stroke-dashoffset: 94.3009033203125px;
    stroke-dasharray: 94.3009033203125px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.1s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s;
}

svg.active .svg-elem-61 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-62 {
    stroke-dashoffset: 97.60565185546875px;
    stroke-dasharray: 97.60565185546875px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.16s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5500000000000003s;
}

svg.active .svg-elem-62 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-63 {
    stroke-dashoffset: 101.36199951171875px;
    stroke-dasharray: 101.36199951171875px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.22s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s;
}

svg.active .svg-elem-63 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-64 {
    stroke-dashoffset: 28.079936981201172px;
    stroke-dasharray: 28.079936981201172px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.279999999999999s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6500000000000004s;
}

svg.active .svg-elem-64 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-65 {
    stroke-dashoffset: 103.88589477539062px;
    stroke-dasharray: 103.88589477539062px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.34s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.7s;
}

svg.active .svg-elem-65 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-66 {
    stroke-dashoffset: 75.39605712890625px;
    stroke-dasharray: 75.39605712890625px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.4s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.75s;
}

svg.active .svg-elem-66 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-67 {
    stroke-dashoffset: 69.55884552001953px;
    stroke-dasharray: 69.55884552001953px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.46s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8000000000000003s;
}

svg.active .svg-elem-67 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-68 {
    stroke-dashoffset: 60.26124572753906px;
    stroke-dasharray: 60.26124572753906px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.52s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.85s;
}

svg.active .svg-elem-68 {
    stroke-dashoffset: 0;
    fill: rgb(211, 167, 96);
}

svg .svg-elem-69 {
    stroke-dashoffset: 78.59608459472656px;
    stroke-dasharray: 78.59608459472656px;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.58s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.9000000000000004s;
}

svg.active .svg-elem-69 {
    stroke-dashoffset: 0;
}

svg .svg-elem-70 {
    stroke-dashoffset: 65.7078857421875px;
    stroke-dasharray: 65.7078857421875px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.64s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.95s;
}

svg.active .svg-elem-70 {
    stroke-dashoffset: 0;
    fill: rgb(224, 163, 64);
}

svg .svg-elem-71 {
    stroke-dashoffset: 41.96788787841797px;
    stroke-dasharray: 41.96788787841797px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.7s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4s;
}

svg.active .svg-elem-71 {
    stroke-dashoffset: 0;
    fill: rgb(241, 241, 241);
}

svg .svg-elem-72 {
    stroke-dashoffset: 103.62464904785156px;
    stroke-dasharray: 103.62464904785156px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.76s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.050000000000001s;
}

svg.active .svg-elem-72 {
    stroke-dashoffset: 0;
    fill: rgb(61, 131, 190);
}

svg .svg-elem-73 {
    stroke-dashoffset: 66.3363037109375px;
    stroke-dasharray: 66.3363037109375px;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.82s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.1s;
}

svg.active .svg-elem-73 {
    stroke-dashoffset: 0;
}

svg .svg-elem-74 {
    stroke-dashoffset: 52.630313873291016px;
    stroke-dasharray: 52.630313873291016px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.88s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.15s;
}

svg.active .svg-elem-74 {
    stroke-dashoffset: 0;
    fill: rgb(224, 163, 64);
}

svg .svg-elem-75 {
    stroke-dashoffset: 37.8144645690918px;
    stroke-dasharray: 37.8144645690918px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.9399999999999995s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.2s;
}

svg.active .svg-elem-75 {
    stroke-dashoffset: 0;
    fill: rgb(241, 241, 241);
}

svg .svg-elem-76 {
    stroke-dashoffset: 93.05679321289062px;
    stroke-dasharray: 93.05679321289062px;
    fill: transparent;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.25s;
}

svg.active .svg-elem-76 {
    stroke-dashoffset: 0;
    fill: rgb(61, 131, 190);
}



.world .map .box {
    margin: 0;
    padding: 0;
    list-style: none;
}

.world .map .box div {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 100px;
    border: 5px solid #E7E9EB;

    transition: 0.3s;
}

.world .map .box .circle {
    width: 100%;
    height: 100%;
    border: 5px solid #fff;
    background-color: #F2F4F4;
    padding: 30px 15px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.world .map .box .circle h2 {
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px dotted #1D3244;
    padding-bottom: 12px;
    margin-bottom: 7px;
    line-height: 30px;
}

.world .map .box .circle .list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.world .map .box .circle .list li {
    display: flex;
    align-items: center;
    justify-content: center;

    transition: 0.3s;
}

.world .map .box .circle .list li img {
    width: 15px;
}

.world .map .box .circle .list li p {
    margin: 0;
    font-weight: 500;
    font-size: 1.1rem;
}

.world .map .box .circle .list li p:nth-last-child(1) {
    font-size: 1.6rem;
    color: #d3a760;
    padding-left: 5px;
    font-weight: 600;

    transform: translateY(-1px);

    background-image: none;
}

/* 1211 1214 */
.world .map div.europe {
    top: 0px;
    left: 50px;

    transform: scale(0);
    transition: 0.5s 0.5s;
}

/* 1211 1214 */
.world .map div.asia {
    top: 50px;
    left: 350px;

    transform: scale(0);
    transition: 0.5s 1.3s;
}

/* 1211 1214 */
.world .map div.oceania {
    bottom: 0px;
    left: 220px;

    transform: scale(0);
    transition: 0.5s 1.9s;
}

.world .map .north {
    top: 10px;
    right: 50px;
}

/* 1211 1214 */
.world .map div.central {
    top: 220px;
    right: 120px;

    transform: scale(0);
    transition: 0.5s 2.5s;
}

.world .map .box li>div.active {
    transform: scale(1);
}

.world .map .box li>div.active.add {
    transition: 0.3s;
}

/* 20240328 */
.world .map .box li a {
    color: #000;
}

.world .map .south {
    bottom: 30px;
    right: 80px;
}

.world .map .box div:hover {
    transform: scale(1.05);
    border: 5px solid #E1BE84;
}

.world .map div .list li:hover {
    background-position: left 10px;
    background-size: 15px;
    color: #E1BE84;
}

.world .map div .list li:hover p:nth-last-child(1) {
    font-weight: 600;
}

.world .statistics_box .list {
    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 80px;
    align-items: center;

    background-color: #fefefecf;
    border: 1px solid #ececec;
    box-shadow: 2px 2px 3px #1d324413;
    border-radius: 10px;
}

.world .statistics_box .list li {
    padding: 0px 20px;
    margin: 20px 0px;

    flex-basis: calc(100% / 4);

    border-right: 2px solid #E1BE84;
}

.world .statistics_box .list li:nth-last-child(1) {
    border-right: none;
}

.world .statistics_box .list li p {
    margin: 0;
    text-align: center;

    font-size: 1.1rem;
    font-weight: 400;
}

.world .statistics_box .list li p.number {
    color: #d3a760;
    font-size: 1.8rem;
    font-weight: 600;
}

.world .bg_box .bg {
    width: 300px;
    height: 300px;
    background-image: url(../img/bg_3.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;

    position: absolute;
    left: -130px;
    bottom: -180px;

    animation: bg 15s infinite linear;
    transform: rotate(0deg) scale(1);

    z-index: -1;
}

@keyframes bg {

    50% {
        transform: rotate(360deg) scale(1.5);
    }

    100% {
        transform: rotate(720deg) scale(1);
    }
}

.world .bg_box .bg:nth-last-child(1) {
    width: 150px;
    height: 150px;

    left: 60px;
    bottom: 60px;

    animation: ww 15s infinite linear;
}

@keyframes ww {

    50% {
        transform: rotate(-360deg) scale(1.2);

        left: 40px;
    }

    100% {
        transform: rotate(-720deg) scale(1);
    }
}




@media (max-width: 991.98px) {
    .world .container {
        max-width: initial;
    }

    .world .map {
        margin: 0 auto;
    }

    /* 1211 */
    .world .map div.europe {
        left: 10px;
    }

    /* 1211 */
    .world .map div.asia {
        top: 20px;
        left: 240px;
    }

    /* 1211 */
    .world .map div.oceania {
        left: 170px;
    }

    /* 1211 */
    .world .map div.central {
        top: 170px;
        right: 100px;
    }
}


@media (max-width: 767.98px) {

    /* 1211 */
    .world .map div.europe {
        top: -10px;
    }

    /* 1211 */
    .world .map div.asia {
        top: 10px;
        left: 205px;
    }

    /* 1211 */
    .world .map div.oceania {
        left: 100px;
    }

    /* 1211 */
    .world .map div.central {
        top: 140px;
        right: 45px;
    }

    .world .statistics_box .list {
        flex-wrap: wrap;
        position: relative;

        background-color: transparent;
        box-shadow: none;
        border: none;
    }

    .world .statistics_box .list:before {
        /* content: ""; */
        display: inline-block;
        width: 1px;
        height: 90%;
        background-color: #E1BE84;
        position: absolute;
        top: 5%;
        left: 50%;
    }

    .world .statistics_box .list::after {
        /* content: ""; */
        display: inline-block;
        width: 95%;
        height: 2px;
        background-color: #E1BE84;
        position: absolute;
        top: 50%;
        left: 2.5%;
    }

    .world .statistics_box .list li {
        flex-basis: calc(100% /2);
        border-right: none;

        border-radius: 50px;
        padding: 20px 15px;
        margin: 0;
        margin: 5px 0;

        background-color: #fefefecf;
        box-shadow: 2px 2px 3px #1d324413;
    }

    .world .map .box>li {
        padding: 5px 5px;
    }

    .world .map .box>li.active {
        z-index: 1;
    }

    .world .map .box li>div {
        width: 170px;
        height: 170px;
    }

    .world .map .box .circle {
        padding: 18px 10px;
    }

    .world .map .box .circle h2 {
        padding-bottom: 5px;
        margin-bottom: 0px;
    }

    .world .map .box .circle .list li p {
        font-size: 1rem;
    }

    .world .statistics_box .list {
        margin-bottom: 30px;
    }
}



@media (max-width: 575.98px) {
    .world .map .box>li {
        padding: 5px 0;
    }

    .world .map .box li>div {
        width: 95px;
        height: 95px;
        border: 3px solid #E7E9EB;
    }

    .world .map .box div:hover {
        transform: scale(1.2);
        border: 2px solid #E1BE84;
    }

    .world .map .box .circle {
        padding: 26px 5px;
        border: 3px solid #fff;
    }

    .world .map .box .circle h2 {
        font-size: 1.2rem;
        border-bottom: none;
        padding-bottom: 7px;
        transition: 0.2s;
        line-height: 20px;
    }

    .world .map .box .circle .list {
        display: none;
    }

    .world .map .box .circle .list li {
        background-image: none;
        padding-left: 0;
    }

    .world .map .box .circle .list li p {
        font-size: 0.6rem;
    }

    .world .map .box div:hover .circle {
        padding: 12px 7px;
    }

    .world .map .box div:hover .list {
        display: block;
    }

    .world .map .box div:hover h2 {
        font-size: 0.8em;
        padding-bottom: 2px;
        margin: 0;
        border-bottom: 1px dotted #1D3244;
        line-height: 14px;
    }

    .world .map .box div:hover .list li p {
        font-size: 0.6rem;
    }

    .world .map .box div:hover .list li p:nth-last-child(1) {
        font-size: 0.8rem;
    }

    .world .statistics_box .list {
        margin-top: 30px;
    }

    .world .bg_box .bg:nth-last-child(1) {
        left: 20px;
        bottom: 30px;
    }

    /* 1211 */
    .world .map div.europe {
        left: 10px;
    }

    /* 1211 */
    .world .map div.asia {
        top: 0px;
        left: 150px;
    }

    /* 1211 */
    .world .map div.oceania {
        left: 15vw;
        bottom: 3vw;
    }

    /* 1211 */
    .world .map div.central {
        top: 32vw;
        right: 8vw;
    }
}





/* 20241104 新增影片區塊 */
.video_box .video_ul {
    margin: 0;
    padding: 0 0px;
    list-style: none;

    display: flex;
    justify-content: space-between;
    margin: 10px -8px;
    margin-bottom: 80px;
}

.video_box .video_ul li {
    width: 80%;
    margin: 0 auto;
    padding: 8px;
}

.video_box .video_ul li .video {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    border-radius: 5px;
}

.video_box .video_ul li .video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

@media (max-width: 991.98px) {

    .video_box .video_ul li {
        width: 100%;
    }
}





/* footer */
footer {
    background-color: #1D3244;
}

/* 1201 */
footer .logo_box {
    width: 500px;
    height: 200px;
    margin-right: 20px;
    border-radius: 10px;
    overflow: hidden;
}

/* 1201 */
footer .logo_box iframe {
    width: 100%;
    height: 100%;
}

/* 1201 */
footer .text_box {
    /* text-align: center; */
    color: #fff;
    padding: 20px 0;

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

/* 1201 */
footer .text_box p {
    /* margin-top: 20px; */
    line-height: 1.8em;
    font-size: 1.2rem;

    margin: 0;
}

/* 1201 */
footer .text_box p span img {
    width: 30px;
    margin-right: 5px;
}

footer .social_btn {
    margin: 0;
    padding: 0;
    list-style: none;

    position: fixed;
    right: 20px;
    bottom: 12%;

    z-index: 5;
}

/* 1121 動畫 */
footer .social_btn a {
    display: inline-block;
    background-color: #fff;
    border: 3px solid #1D3244;
    border-radius: 50px;
    padding: 2px;
    margin: 3px;

    transition: 0.3s;
}

footer .social_btn a img {
    width: 30px;
}

footer .social_btn a:hover {
    opacity: 0.9;
    transform: scale(0.95);
}

@media (max-width: 991.98px) {

    /* 1201 */
    footer .text_box {
        flex-direction: column;
        align-items: flex-start;
    }

    /* 1201 */
    footer .logo_box {
        margin-right: 0;
        margin-bottom: 20px;
        width: 100%;
        height: 250px;
    }

    footer .social_btn {
        right: 10px;
    }
}


@media (max-width: 767.98px) {

    /* 1201 */
    footer .text_box p {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    /* 1201 */
    footer .social_btn {
        position: initial;
        display: flex;
        justify-content: center;

        margin: 0 -2px;
    }

    footer .social_btn a img {
        width: 25px;
    }

}

@media (max-width: 575.98px) {

    /* 1201 */
    footer .text_box p span img {
        width: 20px;
        margin-right: 0;
    }
}





/* 內頁 */

/* 麵包屑 */
.breadcrumb_box .container {
    /* padding-left: 45px; */
}

.breadcrumb_box .breadcrumb {
    background-color: transparent;
    margin: 25px 0;
    margin-top: 10px;
    padding: 0px;
    font-size: 0.9rem;
}

.breadcrumb_box .breadcrumb .breadcrumb-item a {
    display: inline-block;
    color: #000;
    font-weight: 300;
    transition: 0.2s;
}

.breadcrumb_box .breadcrumb .breadcrumb-item a:hover {
    text-decoration: none;
    font-weight: 400;
    color: #E1BE84;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: ">";
}

@media (max-width: 1199.98px) {
    .breadcrumb_box .container {
        padding-left: 35px;
    }
}

@media (max-width: 991.98px) {
    .breadcrumb_box .container {
        padding-left: 15px;
    }
}

@media (max-width: 767.98px) {
    .breadcrumb_box .breadcrumb .breadcrumb-item a {
        font-size: 0.9rem;
        transform: translateY(-3px);
    }

    .breadcrumb-item.active {
        font-size: 0.9rem;
    }
}


/* 頁碼 */
.pagination {
    /* display: flex; */
    justify-content: center;
    width: 100%;
    margin: 0;
    margin: 50px 0;
}

.pagination .page-link {
    background-color: transparent;
    border: 1px solid #1D3244;
    color: #1D3244;
    border-radius: 20px;
    padding: 4px 10px;
    padding-top: 5px;
    margin: 0 5px;

    transition: 0.2s;
}

.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border: none;
}

.pagination .page-link:hover {
    background-color: #E1BE84;
    border: 1px solid #E1BE84;
    color: #fff;
    border-radius: 50px;
}

.pagination .page-link.active {
    background-color: #1D3244;
    border: 1px solid #1D3244;
    color: #fff;
    border-radius: 50px;
}





/* list 列表 */
.list_1 section.news {
    background-size: 300px, 350px;
    background-position: calc(100% + 100px) -50px, -120px calc(100% + 150px);
    padding-bottom: 80px;
    padding-top: 0;
}

.list_1 .title_box {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #E1BE84;
    padding: 0;
    margin: 20px 0;
    /* margin-top: 0; */
}

.list_1 .title_box::before {
    content: none;
}

.list_1 .title_box img {
    width: 30px;
}

/* 20241017 h1換h2 */
.list_1 .title_box h2 {
    width: 100%;
    text-align: left;
    margin: 0;
    margin-top: 5px;
}

.list_1 .list {
    min-height: 350px;
}

.list_1 .more_btn {
    margin-top: 20px;
}

.list_2 .list li a {
    display: flex;
    flex-direction: column;
}

.list_2 .list li a .tag_box {
    transform: translateX(5px) translateY(10px);
    z-index: 5;
}

.list_2 .box {
    display: flex;
    align-items: center;
}

.list_2 .box .img_box {
    flex-basis: 30%;
    margin-right: 10px;
    /* padding-right: 10px; */
    border-radius: 10px;
    overflow: hidden;
}

.list_2 .box .img_box .img {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;

    z-index: -1;
}

.list_2 .box .img_box img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-position: center; */

    transition: 0.3s;
}

.list_2 .box .text_box {
    flex-basis: 70%;
    flex-direction: column;

    transition: 0.3s;
}

.list_2 .list li a .text_box p.time {
    flex-basis: initial;
}

.list_2 .list li a:hover:after {
    content: none;
}

.list_2 .list li a:hover .text_box {
    border-bottom: 1px solid #E1BE84;
}

.list_2 .list li a:hover .img_box img {
    transform: scale(1.05);
}



@media (max-width: 767.98px) {

    .list_1 section.news {
        background-size: 300px, 200px;
        background-position: calc(100% + 100px) -50px, -80px calc(100% + 50px);
    }

    .list_2 .box {
        flex-direction: column;
        align-items: flex-start;
    }

    .list_2 .box .img_box {
        width: 80%;
        margin: 0;
        margin-bottom: 10px;
    }

    .list_2 .list li a .text_box p.time {
        border-bottom: none;
    }

}

@media (max-width: 575.98px) {

    .list_2 .box .img_box {
        width: 100%;
    }
}


/* list_main 列表內頁 */
.list_main .title_box {
    align-items: flex-start;
}

/* 20241017 h1換h2 */
.list_main .title_box h2 {
    font-size: 1.3rem;
    /* transform: translateY(-1px); */
}

.list_main .title_box img {
    width: 20px;
    margin-right: 3px;
    transform: translateY(8px);
}

.list_main .link_btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 20px 0;
}

.list_main .link_btn .time {
    margin: 0;
    margin-right: 5px;
    font-size: 1.1rem;
}

.list_main .link_btn .link {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.list_main .link_btn .link a {
    margin: 0 5px;
}

.list_main .link_btn .link a img {
    transition: 0.3s;
    width: 25px;
}

.list_main .link_btn .link a:hover img {
    opacity: 0.9;
    transform: scale(1.05);
}

.list_main .carousel_box {
    margin: 20px 0;
}

.list_main .carousel_box .carousel {
    width: 80%;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    /* background-color: #1D3244; */
}

.list_main .carousel_box .box {
    border-radius: 10px;
    overflow: hidden;
    /* height: 400px; */
}

.list_main .box a {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}

.list_main .carousel_box .box img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-position: center; */


    transition: 0.3s;
}

.list_main .text_box {
    margin: 30px auto;
    width: 80%;
    font-weight: 400;
}

.list_main .download_box {
    margin: 20px auto;
    width: 80%;
}

.list_main .download_box h2 {
    font-size: 1.3rem;
    padding-left: 20px;
    background-image: url(../img/arrow_m.svg);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: left 5px;

    border-bottom: 1px solid #E1BE84;
    margin-bottom: 15px;
}

.list_main .download_box .download {
    margin: 0;
    padding: 0;
    list-style: none;
}

.list_main .download_box .download li {
    display: flex;
    align-items: center;
    margin: 12px 0;
}

.list_main .download_box .download li p {
    margin: 0;
    font-weight: 400;
}

.list_main .download_box .download li p span {
    border-bottom: 1px dotted #1D3244;
    padding-bottom: 1px;
}

.list_main .download_box .download li p a {
    color: #fff;
    background-color: #1D3244;
    border-radius: 5px;
    padding: 2px 15px;
    margin-left: 5px;

    transform: translateY(-1px);

    transition: 0.3s;
}

.list_main .download_box .download li p a:hover {
    text-decoration: none;
    background-color: #E1BE84;
    transform: translateY(-1px) scale(1.1);
}


@media (max-width: 991.98px) {

    .list_main .carousel_box .carousel {
        width: 100%;
    }

    .list_main .text_box {
        width: 100%;
    }

    .list_main .download_box {
        width: 100%;
    }
}

@media (max-width: 767.98px) {

    /* 20241017 h1換h2 */
    .list_main .title_box h2 {
        font-size: 1.1rem;
    }

    .list_main .title_box img {
        width: 15px;
    }

    .list_main .slick-dots {
        transform: translateY(-35px);
    }
}








/* form 表單樣式 */
/* 標題 */
/* 20241017 改class h1換h2 */
.form .container>div>h2 {
    font-size: 1.5rem;
    border-bottom: 2px solid #E1BE84;
    padding-bottom: 2px;
    margin-bottom: 5px;

    padding-left: 25px;
    background-image: url(../img/arrow_m_2.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: left 5px;

    margin-top: 20px;
}

/* 20241017 改class h1換h2 */
.form .container>div>h2>p {
    font-size: 1.2rem;

    margin-bottom: 30px;
}

/* 分隔框 */
.form .box {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;

    background-color: #f8f8f8;
    border: 1px solid #f4f4f4;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 2px 2px 3px #0000000b;

    justify-content: center;
}

.form .box h2 {
    font-size: 1.2rem;
    margin: 15px 15px;
    width: 100%;
    border-bottom: 2px dotted #E1BE84;
    /* color: #000; */
    color: #d3a760;
}

.form .box .form-group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-basis: 50%;
    padding: 0 15px;
}

.form .box .form-group.full {
    flex-basis: 100%;
}

.form .box .personal_box {
    flex-basis: calc(100% - 300px);
}

.form .box .form-group label {
    display: flex;
    flex-wrap: wrap;

    transform: translateY(14px) translateX(-3px);
    padding: 0 5px;
    font-weight: 400;
    font-size: 1rem;
    color: #1D3244;

    transition: 0.3s;
}

.form .box .form-group label.Program {
    font-size: 1.2rem;
}

.form .box .form-group label span {
    margin-right: 5px;
}

.form .box .form-group .required {
    color: #d3a760;
    font-weight: 800;
    margin-right: 2px;
}

.form .box .form-group .form-control {
    border: 1px solid #e6e6e6;
    box-shadow: inset 2px 2px 3px rgba(228, 228, 228, 0.338);
    /* background-color: #fcfcfc; */
    transition: 0.3s;
    order: 2;
}

.form .box .form-group .form-control:focus-visible {
    border: 1px solid #E1BE84;
    box-shadow: none;
    background-color: #fff;
}

.form .box .form-group .form-control:focus~label {
    color: #d3a760;
    transform: translateY(14px) translateX(5px);
}

.form .box .form-group .form-control::placeholder {
    color: #4d4d4d;
    font-weight: 300;
    font-size: 0.95rem;
}

.form .box .form-group .form-control {
    color: #4d4d4d;
    /* font-weight: 300; */
    font-size: 0.95rem;
}

.form .box .form-group.code_box {
    text-align: center;
    margin: 20px 0;
}

/* 按鈕 */
.form .btn_box {
    text-align: center;
    /* margin-top: 25px; */
    margin: 60px;
    margin-bottom: 150px;
}

.form .btn_box button {
    background-color: #1D3244;
    border-radius: 20px;
    border: 1px solid #1D3244;
    color: #fff;
    min-width: 120px;
    padding: 3px 20px;
    margin: 5px;
    font-size: 1rem;
    transition: 0.3s;
}

.form .btn_box button:hover {
    background-color: #fff;
    color: #1D3244;
}

/* 上傳大頭照 */
.form .box .file_box {
    margin: 20px 0;
    transform: translateY(10px);
}

.form .box .file_box .custom_file {
    display: inline-block;
    width: 300px;
    height: 100%;
    background-image: url(../img/picture_img.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 150px;
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid #F5F5F5;
    border-radius: 10px;
    background-color: #fff;

    overflow: hidden;

    position: relative;
}

.form .box .file_box .custom_file input {
    height: 100%;
    opacity: 0;

    cursor: pointer;
}

.form .box .file_box .upload {
    display: inline-block;
    background-color: #1D3244;
    color: #fff;
    border-radius: 8px;
    padding: 3px 15px;
    padding-top: 6px;
    width: 85%;
    text-align: center;

    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);

    transition: 0.3s;

    pointer-events: none;
    z-index: 2;
}

.form .box .file_box .custom_file:hover .upload {
    background-color: #E1BE84;
}

.form .box .file_box #preview_progressbarTW_img {
    position: absolute;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.form .box .file_box .custom_file p {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 0.9rem;
    color: #9d9d9d;
    padding: 0 15px;

    pointer-events: none;
}

.form .box .file_box .custom_file p span {
    font-weight: 400;
    font-size: 1rem;
    color: #1D3244;
}

/* 登入 login_box */
.form .login {
    max-width: 500px;
    margin: 50px auto;
    margin-bottom: 100px;
}

.form.login_box .box {
    background-color: transparent;
    border: none;
    padding: 10px 0;
    box-shadow: none;
    margin-bottom: 0;
}

.form.login_box .btn_box {
    margin: 0px;
    margin-bottom: 0px;
}

.form.login_box hr.line {
    border-top: 1px dotted rgba(0, 0, 0, 0.267);
}

.form.login_box hr {
    width: 100%;
    border-top: 2px solid #E1BE84;
}

.form.login_box .box .form-group {
    order: initial;
}

.form.login_box .forget {
    display: block;
    background-color: transparent;
    color: #1D3244;
    border: none;
    font-weight: 300;

    text-align: right;
    margin-bottom: 15px;
    font-size: 0.9rem;

    transition: 0.3s;
}

.form.login_box .forget:hover {
    opacity: 0.8;
    text-decoration: none;
}

.form.login_box .text_box {
    border-top: 2px solid #E1BE84;
    padding: 20px 3px;
}

.form.login_box .text_box p {
    margin: 0;
    font-size: 1.1rem;
}

/* 1212 註冊 register */
.form.register .form-check label {
    transform: translate(0);
    padding-left: 25px;
}

.form.register .form-check input {
    transform: translateX(25px);
}

.form.register .form-check label a {
    color: #E1BE84;
    padding: 0 2px;
    font-weight: 500;
}

.form.register .form-check label a:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* 1212 */


/* exchange_student_form_1 來校交換生申請系統 */
/* 語言能力 */
.form .box .language {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin: 10px 0px;

    position: relative;
}

.form .box .language::after {
    content: "";
    display: inline-block;
    width: calc(100% - 30px);
    height: 1px;
    border-top: 1px solid #E1BE84;

    position: absolute;
    left: 15px;
    bottom: 18px;
}

.form .box .language div {
    z-index: 1;
}

.form .box .language input:disabled {
    background-color: #fff;
    box-shadow: none;
}

.form .box .language .form-group {
    margin: 0;
}

.form .language .form-group {
    flex-basis: calc(100% /5);
}

.form .language .form-group:nth-child(1) {
    /* display: flex; */
    /* flex-direction: row; */
    /* align-items: center; */
}

.form .language .form-group .required {
    /* transform: translateX(-3px) translateY(10px); */
    /* position: absolute; */
    /* top: 0; */
    transform: translateY(9px);

}

.form .box .language .form-group .form-control {
    padding: 5px;
}

/* international_students_form_1 外國學位生申請系統 */
/* 就學期間 */
.international_students_form_1 .box .month_box {
    flex-direction: initial;
    flex-wrap: wrap;
    position: relative;
}

.international_students_form_1 .box .month_box label {
    width: 100%;
}

.international_students_form_1 .box .month_box .form-control {
    margin-right: 15px;
    flex-basis: calc(50% - 15px);
}

.international_students_form_1 .box .month_box .form-control:nth-child(2) {
    margin-left: 15px;
    margin-right: 0;
    position: relative;
}

.international_students_form_1 .box .month_box .form-control:nth-child(2):before {
    content: "至";
    position: absolute;
    left: -23px;
}






/* 20231123 out_exchange_form_1 出國交換生申請系統 */
.out_exchange_form_1 .box .personal_box .form-group {
    margin-bottom: 10px;
}

/* 兩個欄位並排樣式 */
.out_exchange_form_1 .box .two {
    flex-direction: initial;
    flex-wrap: wrap;
    position: relative;
}

.out_exchange_form_1 .box .two label {
    width: 100%;
}

.out_exchange_form_1 .box .two .form-control {
    /* margin-right: 15px; */
    flex-basis: calc(50% - 10px);
}

/* 字顏色 */
.out_exchange_form_1 .box .form-group .form-control::placeholder {
    color: #6b6b6b;
}

/* 日期樣式 */
.out_exchange_form_1 .box .month_box {
    flex-direction: initial;
    flex-wrap: wrap;
    position: relative;
}

.out_exchange_form_1 .box .month_box label {
    width: 100%;
}

.out_exchange_form_1 .box .month_box .form-control {
    margin-right: 15px;
    flex-basis: calc(50% - 15px);
}

.out_exchange_form_1 .box .month_box .form-control:nth-child(2) {
    margin-left: 15px;
    margin-right: 0;
    position: relative;
}

.out_exchange_form_1 .box .month_box .form-control:nth-child(2):before {
    content: "至";
    position: absolute;
    left: -23px;
}

/* 成績 */
.out_exchange_form_1 .score_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    margin-bottom: 16px;
    order: 3;
}

/* 標題 */
.out_exchange_form_1 .score_box .title {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    padding: 0 15px;
    margin-top: 25px;
}

.out_exchange_form_1 .score_box h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #1D3244;
}

/* 分隔線 */
.out_exchange_form_1 .score_box hr {
    width: 100%;
    margin: 0 15px;
    margin-bottom: 5px;
}

.out_exchange_form_1 .score_box hr:nth-last-child(1) {
    margin: 15px 15px;
    margin-bottom: 5px;
}

/* 欄位樣式 */
.out_exchange_form_1 .box .score_box .form-group {
    margin: 0;
    justify-content: initial;
}

.out_exchange_form_1 .box .score_box .form-group .form-control {
    height: initial;
}

/* 打勾樣式 */
.out_exchange_form_1 .box .score_box .title .form-check {
    margin-left: 20px;
    flex-basis: initial;
}

.out_exchange_form_1 .box .score_box .form-group .form-check {
    order: 3;
    margin-left: 10px;
}

.out_exchange_form_1 .box .score_box .form-check label {
    padding: 0;
    transform: translateY(1px);
    font-size: 0.95rem;
}

.out_exchange_form_1 .box .form-group label {
    z-index: 5;
}

.out_exchange_form_1 .box .form-group .instructions a {
    background-color: #E1BE84;
    padding: 3px 15px;
    border-radius: 50px;
    color: #fff;
    margin-left: 5px;
    font-size: 0.9rem;

    transition: 0.3s;
}

.out_exchange_form_1 .box .form-group .instructions a:hover {
    text-decoration: none;
    background-color: #1D3244;
}

/* 20231124 預覽 */
.out_exchange_form_3 .box h2+p {
    color: #1D3244;
    font-weight: 600;
    margin-bottom: 0;
    width: 100%;
    padding: 0 15px;
}

.out_exchange_form_3 .box .file_box #preview_progressbarTW_img {
    opacity: 1;
}

.out_exchange_form_3 .box .form-group {
    margin-bottom: 0;
}

.out_exchange_form_3 .box .form-group .form-control {
    margin-bottom: 5px;
}


/* 20231127 列印 */
.out_exchange_form_4 .container {
    min-width: 992px !important;
}

/* 20241017 修改class h1換h2 */
.form.out_exchange_form_4 .container h2 {
    margin-bottom: 15px;
}

.out_exchange_form_4 .box {
    padding: 15px;
    margin-bottom: 15px;
    width: 100%;
}

.out_exchange_form_4 .box h2 {
    margin: 0 15px;
}

/* 欄位 */
.out_exchange_form_4 .box .form-group {
    flex-basis: calc(100% / 3);
    padding: 0 5px;
    margin-bottom: 0;

    height: 65px;
}

.out_exchange_form_4 .box .personal_box {
    display: flex;
    flex-wrap: wrap;
    flex-basis: calc(100% / 3);
}

.out_exchange_form_4 .box .print_box {
    flex-basis: calc(100% / 3);
    height: 100%;

    flex-basis: calc((100% - 250px) / 2);
}

.out_exchange_form_4 .box .print_box:nth-child(2) {
    flex-basis: 250px;
}

.out_exchange_form_4 .box .personal_box .form-group {
    padding: 0 10px;
    margin-bottom: 0;
    flex-basis: 100%;
}

.out_exchange_form_4 .box .form-group label {
    margin-bottom: 3px;
    transform: translateY(10px) translateX(-3px);
}

/* 出生 性別 欄位 */
.out_exchange_form_4 .box .print_box .dd {
    display: flex;
}

.out_exchange_form_4 .box .print_box .dd .form-group:nth-child(1) {
    flex-basis: calc(100% / 3 * 2);
}

/* 照片 */
.out_exchange_form_4 .box .file_box {
    margin: 0;
    margin-top: 9px;
    margin-left: 5px;
    margin-right: 5px;
}

.out_exchange_form_4 .box .file_box .custom_file {
    width: 100%;
    height: 244px;
}

/* 學號 */
.out_exchange_form_4 .box .form-group.student label {
    justify-content: space-between;
}

.out_exchange_form_4 .box .form-group.student label .form-check {
    padding: 0;
    transform: translateX(15px);
    height: initial;
    flex-basis: 100px;
}

.out_exchange_form_4 .box .form-group.student label .form-check label {
    transform: initial;
    padding: 0;
    transform: translateY(0px) translateX(-3px);
    width: 100%;
}

/* 欄位寬度 */
.out_exchange_form_4 .box .form-group.basis_2 {
    flex-basis: calc(100% /3 * 2);
}

.out_exchange_form_4 .box .form-group.basis_1 {
    flex-basis: 100%;
}

/* 成績 */
.out_exchange_form_4 .box .score_box {
    margin-bottom: 0;
}

.out_exchange_form_4 .box .score_box .form-group {
    flex-basis: calc(100% / 3);
}

.out_exchange_form_4 .box .score_box:nth-last-child(4) .form-group {
    flex-basis: calc(100% / 3 * 2 / 3);
}

.out_exchange_form_4 .box .score_box:nth-last-child(4) .form-group:nth-child(3) {
    flex-basis: calc(100% / 6 * 2);
}

.out_exchange_form_4 .score_box .title {
    margin-top: 12px;
    padding: 0 8px;
}

.out_exchange_form_4 .score_box hr {
    margin: 0 8px;
    margin-bottom: 5px;
}

.out_exchange_form_4 .box .score_box .title .form-check {
    height: initial;
}

/* 簽核 */
.out_exchange_form_4 .box .list {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    width: 100%;
    padding: 0 5px;

    border-top: 1px solid rgba(0, 0, 0, .1);
    padding-top: 10px;
}

.out_exchange_form_4 .box .list li {
    flex-basis: calc(100% / 3);
    padding: 0 5px;
}

.out_exchange_form_4 .box .list li p {
    margin-bottom: 40px;
    padding: 5px 5px;
    font-size: 0.9rem;
}

.out_exchange_form_4 .box .list li p:nth-last-child(1) {
    margin-bottom: 30px;
}

.out_exchange_form_4 .box .list li p.title {
    margin-bottom: 0;
    padding: 0px 5px;
    padding-top: 5px;
    color: #1D3244;
    font-weight: 500;
    border-bottom: 1px solid #1D3244;
    font-size: 0.9rem;
}

.out_exchange_form_4 .box .list li p.small {
    color: #E1BE84;
    margin: 0;
    font-weight: 500;
    font-size: 0.8rem;
    padding: 0 5px;
}

.out_exchange_form_4 .box .list li p.small+p {
    padding-top: 0;
    margin-bottom: 20px;
}

/* *本表資料填寫不全者，視為資格不符 */
.out_exchange_form_4 .box .notice {
    order: 3;
    width: 100%;
    text-align: right;
    position: relative;
}

.out_exchange_form_4 .box .notice p {
    color: #E1BE84;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0;

    position: absolute;
    right: 5px;
    bottom: -35px;
}

/* 本人簽名 */
.out_exchange_form_4 .box .text {
    display: flex;
    align-items: flex-end;
    width: 100%;
    justify-content: space-between;

    order: 3;

    border-top: 1px solid rgba(0, 0, 0, .1);
    margin: 0 8px;
    margin-top: 20px;
    padding-top: 15px;
}

.out_exchange_form_4 .box .text p {
    margin: 0;
    margin-left: 2px;
    font-weight: 400;
    line-height: 30px;
}

.out_exchange_form_4 .box .text p span {
    margin-left: 45px;
}

.out_exchange_form_4 .box .blank_box {
    height: 300px;
    width: 100%;
}

.out_exchange_form_4 .nn {
    height: 20px;
}

/* 列印 */
@media print {

    body {
        height: auto;
    }

    .breadcrumb_box,
    .details_box,
    .form .btn_box,
    .form .btn_box+hr,
    footer {
        display: none;
    }

    .container {
        min-width: 992px !important;
    }

    /* 20241017 修改class h1換h2 */
    .form.out_exchange_form_4 .container h2 {
        font-size: 1.2rem;
        margin-top: 5px;
    }

    .out_exchange_form_4 .box {
        padding: 5px 0px;
        background-color: transparent;
        box-shadow: none;
        border: none;
    }

    .out_exchange_form_4 .box h2 {
        font-size: 1.1rem;
        border-bottom: 1px dotted #E1BE84;
        margin: 0;
    }

}

@page {
    /* size: 21cm 29.7cm; */
    size: A4;
}

/* 列印按鈕 */
.out_exchange_form_4 .print_btn {
    text-align: right;
    margin: 0px;
    margin-bottom: 10px;
    width: 100%;
}

.out_exchange_form_4 .print_btn button {
    margin-right: 0;
}

.out_exchange_form_4 .print_btn .download {
    border-bottom: 2px dotted #E1BE84;
    margin-bottom: 150px;
}

.out_exchange_form_4 .print_btn .download p {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 400;
    color: #1D3244;
    display: inline-block;

    background-image: url(../img/arrow_m_2.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: right 4px;
    padding-right: 25px;
}

.out_exchange_form_4 .print_btn .download button {
    padding: 0px 25px;
    padding-top: 1px;
    transform: translateY(-1px);
}




/* 上傳 */
.form .form-group .custom_file {
    transition: 0.3s;
    position: relative;

    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #e6e6e6;
    order: 2;
}

.form .form-group .custom_file:hover {
    border: 1px solid #E1BE84;
}

.form .form-group .custom_file input {
    background-color: #fff;
    width: calc(100% + 81px);
    height: 100%;
    padding: 3px 0;

    transform: translateX(-81px);
    box-shadow: inset 2px 2px 3px rgba(228, 228, 228, 0.338);

    cursor: pointer;
}

.form .form-group .custom_file .upload {
    position: absolute;
    bottom: 0px;
    right: 0;
    background-color: #1D3244;
    color: #fff;
    font-weight: 100;
    padding: 6px 22px;
    font-size: 1rem;
    pointer-events: none;
    z-index: 5;
    transition: 0.3s;
}

.form .form-group .custom_file:hover .upload {
    background-color: #E1BE84;
}

.form .form-group .custom_file:hover~label {
    color: #E1BE84;
    transform: translateY(14px) translateX(0px);
}

/* 範本下載 按鈕 */
.form .form-group .custom_file~.download_box {
    order: 3;
    margin-top: 5px;
    margin-left: 1px;
}

.form .form-group .custom_file~.download_box .download {
    background-color: #1D3244;
    border-radius: 5px;
    color: #fff;
    padding: 5px 20px;
    font-size: 0.9rem;
    text-align: center;
    transition: 0.3s;
}

.form .form-group .custom_file~.download_box .download:hover {
    background-color: #E1BE84;
    text-decoration: none;
}

/* 其他補充 */
.form .form-group.other_box>input {
    margin-top: 10px;
}

.form .box .form-group.other_box .form-control:focus~label {
    transform: translateY(14px) translateX(0px);
}


/* 完成 */
.form .box.done {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 30px 100px;
    margin: 50px 0;
}

.form .box.done h2 {
    text-align: center;
    margin: 15px 0;
}

.form .box.done .btn_box {
    margin: 0;
    margin-top: 20px;
}


@media (max-width: 991.98px) {
    .form .box .form-group {
        flex-basis: 100%;
    }

    .form .box .language {
        margin: 10px 0px;
        margin-bottom: 30px;
    }

    .form .box .language::after {
        bottom: -20px;
        border-top: 1px dotted #E1BE84;
    }

    .form .box .language:nth-last-child(1):after {
        content: none;
    }

    .form .box .language .form-group:nth-child(1) {
        flex-basis: 100%;
    }

    .form .box .language .form-group {
        flex-basis: calc(100% / 2);
        margin: 0;
        padding: 0 10px;
    }

    .form .box.done {
        padding: 30px;
    }

    .out_exchange_form_4 .box .form-group {
        flex-basis: calc(100% / 3);
    }
}


@media (max-width: 767.98px) {

    /* 20241017 修改class h1換h2 */
    .exchange_student_form_1.form .container h2 {
        padding-left: 0;
        background-image: none;
        font-size: 1.2rem;
    }

    .form .box .personal_box {
        flex-basis: 100%;
        order: 2;
    }

    .form .box .file_box {
        flex-basis: 100%;
        padding: 0 15px;
        margin-top: 0;

        order: 1;
    }

    .form .box .form-group {
        order: 3;
    }

    .form .box .file_box .custom_file {
        width: 100%;
        height: 300px;
    }

    .form .box .file_box .custom_file input {
        width: 100%;
    }

    .form .box .file_box .custom_file p {
        padding: 0 50px;
    }

    .out_exchange_form_4 .box .personal_box {
        order: initial;
        flex-basis: calc((100% - 250px) / 2);
    }

    .out_exchange_form_4 .box .file_box {
        flex-basis: initial;
        padding: 0px;
    }

    .out_exchange_form_4 .box .file_box .custom_file {
        height: 252px;
    }

}


@media (max-width: 575.98px) {
    .form .box {
        padding: 10px;
    }

    .form .box .form-group label.Program {
        font-size: 1rem;
    }

    .form .box .language .form-group {
        flex-basis: calc(100%);
    }

    .form .box .file_box .custom_file p {
        padding: 0 15px;
    }

    .international_students_form_1 .box .month_box .form-control {
        margin: 0;
        margin-bottom: 10px;
        flex-basis: 100%;
    }

    .international_students_form_1 .box .month_box .form-control:nth-child(2) {
        margin-left: 25px;
    }

    .form .box.done {
        padding: 10px;
    }


    .out_exchange_form_1 .score_box .title {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .out_exchange_form_1 .score_box .title h3 {
        width: 100%;
    }

    .out_exchange_form_1 .box .month_box .form-control {
        margin: 0;
        margin-bottom: 10px;
        flex-basis: 100%;
    }

    .out_exchange_form_1 .box .month_box .form-control:nth-child(2) {
        margin-left: 25px;
    }


    .out_exchange_form_4 .score_box .title {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .out_exchange_form_4 .score_box .title h3 {
        width: initial;
    }
}



/* sister_schools 姊妹校 */
.sister_schools .world {
    padding-top: 0;
}

/* 標題 */
.sister_schools .world .title_box {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #E1BE84;
    padding: 0;
    margin: 20px 0;
    margin-top: 10px;
}

.sister_schools .world .title_box::before {
    content: none;
}

.sister_schools .world .title_box img {
    width: 30px;
}

/* 20241017 h1換h2 */
.sister_schools .world .title_box h2 {
    width: 100%;
    text-align: left;
    margin: 0;
    margin-top: 5px;
}

/* 地圖 */
.sister_schools .world .map {
    max-width: 980px;
    margin: 0 auto;
}

.sister_schools .world .map img {
    margin: 10px 0;
    margin-top: 0;
}

.sister_schools .world .map .box .circle .list li {
    background-image: none;
    padding-left: 0;
}

.sister_schools .world .map div {
    box-shadow: 2px 2px 3px #00000030;
}

.sister_schools .world .map .box .circle {
    background: linear-gradient(-45deg, #fff 0%, #e8e8e8 100%);
    position: relative;
}

.sister_schools .world .map .box .circle::after {
    content: "";
    display: block;
    width: 22px;
    height: 18px;
    background-image: url(../img/arrow_m_bottom.svg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 22px;

    position: absolute;
    left: 50%;
    bottom: 3px;
    transform: translateX(-50%);

    transition: 0.3s;
}

.sister_schools .map .box li {
    cursor: pointer;
}

/* 20240327 新增 */
.sister_schools .map .box li div {
    transform: scale(1);
    transition: 0.3s;
}

.sister_schools .map .box li.active div {
    border: 5px solid #E1BE84;
    box-shadow: inset 2px 2px 3px #00000013;
}

.sister_schools .world .map .box li.active .circle {
    border: 5px solid #fff;
    background: linear-gradient(-45deg, #fff 0%, #e8e8e8 100%);

}

.sister_schools .world .map .box li.active div:hover {
    border: 5px solid #E1BE84;
}

.sister_schools .world .map .box li.active div .circle::after {
    background-position: center bottom, center bottom;
    background-size: 32px;
    width: 32px;
    height: 32px;
    bottom: 8px;

    animation: vv 1.2s infinite;
}

@keyframes vv {

    100% {
        bottom: -2px;
        opacity: 0;
    }
}

.sister_schools .world .map .box li div:hover .circle::after {
    background-position: center bottom, center bottom;
    bottom: 5px;

    animation: none;
}

.sister_schools .world .map .airplane {
    box-shadow: none;
}

/* 20240328 新增 締約學校內頁的數據樣式 */
.sister_schools .statistics_box .list {
    margin: 10px 0;
    box-shadow: none;
    border: none;
}

.sister_schools .statistics_box .list li {
    margin: 15px 0;
}


/* 20240328 */
.sister_schools .text {
    margin: 20px 40px;
    margin-bottom: 40px;
}

.sister_schools .text p {
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.8rem;
}


/* 20240329 搜尋欄 */
.sister_schools .search_box {
    display: flex;
    align-items: center;
    margin-top: 20px;
    justify-content: flex-end;
}

.sister_schools .search_box .form-group {
    margin: 0;
    margin-right: 10px;
}

.sister_schools .search_box .form-group .form-control {
    border: 1px solid #e6e6e6;
    box-shadow: inset 2px 2px 3px rgba(228, 228, 228, 0.338);
    font-size: 0.95rem;
}

.sister_schools .search_box .form-group .form-control::placeholder {
    color: #4d4d4d;
    font-weight: 300;
    font-size: 0.95rem;
}

.sister_schools .search_box .search_btn button {
    background-color: #1D3244;
    border-radius: 5px;
    border: 1px solid #1D3244;
    color: #fff;
    padding: 5px 15px;
    font-size: 1rem;
    transition: 0.3s;
}

.sister_schools .search_box .search_btn button:hover {
    background-color: #fff;
    color: #1D3244;
}

/* 列表 */
.sister_schools .school_list {
    display: none;
}

.sister_schools .school_list.show {
    display: block;
}

/* 列表標題 */
/* 20240328 */
.sister_schools .school_list .title {
    position: relative;
    text-align: center;
    margin: 30px 0;
    margin-top: 30px;
}

.sister_schools .school_list .title::before {
    content: "";
    width: 100%;
    height: 1px;
    border-top: 1px dotted #E1BE84;

    position: absolute;
    left: 0;
    top: 17px;

    z-index: -1;
}

.sister_schools .school_list h2 {
    display: inline-block;
    font-weight: 600;
    background-color: #fff;
    margin: 0;
    padding: 0 5px;
}

.sister_schools .map .box .circle .list li p {
    background-image: none;
    padding-left: 0;
}

/* 列表按鈕 */
.school_list .btn_box {
    display: flex;
    flex-wrap: wrap;

    margin: 0 -8px;
    margin-bottom: 20px;
}

.school_list .btn_box button {
    border: 1px solid #1D3244;
    border-radius: 15px 5px 15px 5px;
    background-color: transparent;
    color: #1D3244;
    font-weight: 500;
    padding: 5px 10px;
    margin: 8px 8px;
    flex-basis: calc(100% / 5 - 16px);

    transition: 0.3s;

    position: relative;
}

.school_list .btn_box button p {
    margin: 0;
    position: relative;
}

.school_list .btn_box button.active {
    border: 1px solid #E1BE84;
    background-color: #d3a760;
    color: #fff;
    position: relative;
}

.school_list .btn_box button::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: calc(100% + 25px);
    background-image: url(../img/news_btn_bg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;

    position: absolute;
    top: 50%;
    left: 0;

    transform: translateY(-50%) rotateX(90deg);
    transition: 0.3s;
}

.school_list .btn_box button.active::before {
    transform: translateY(-50%) rotateX(0deg);
}

.school_list .btn_box button:focus {
    outline: #E1BE84;
}

.school_list .btn_box button:hover {
    background-color: #d3a760;
    color: #fff;
    border: 1px solid #E1BE84;
}

/* 列表表格 */
.school_list .list {
    display: none;
}

.school_list .list.show {
    padding-bottom: 0;
    padding: 15px 0px;
    display: block;
}

.school_list .list table {
    width: 100%;
}

/* 標題標籤 */
.school_list .list table thead th {
    background-color: #1D3244;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    padding: 8px 5px;
}

/* 條列內容 */
.school_list .list tr {
    border-bottom: 1px solid #1D3244;
    display: flex;
    align-items: stretch;
}

.school_list .list td {
    padding: 10px 5px;
    font-size: 1.1em;
    font-weight: 500;
}

.school_list .list td a {
    display: inline-block;
    width: 100%;
    color: #1D3244;
    font-weight: 500;
    padding: 10px 0;

    transition: 0.3s;

    display: flex;
    flex-direction: column;
    text-decoration: underline;
}

.school_list .list td a:hover {
    text-decoration: none;
    color: #E1BE84;
    padding-left: 0;
    transform: translateY(-3px);
}


/* 每個項目寬度 */
.school_list .list td,
.school_list .list th {
    flex-basis: 250px;
    flex-grow: 1;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.school_list .list .basis_100 {
    /* flex-basis: 150px; */
    flex-grow: 0;
    text-align: center;
    justify-content: center;

    flex-basis: 170px;
}

/* 新增 */
.school_list .list th:nth-child(2),
.school_list .list td:nth-child(2) {
    padding-right: 20px;
}


@media (max-width: 991.98px) {

    .sister_schools .school_list .title {
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .school_list .btn_box button {
        flex-basis: calc(100% / 4 - 16px);
    }
}

@media (max-width: 767.98px) {
    /* 20240327 刪掉 */
    /* .sister_schools .world .map .box .circle{
        padding: 20px 10px;
    } */

    .school_list .btn_box {
        margin-bottom: 0;
    }

    .school_list .btn_box button {
        flex-basis: calc(100% / 3 - 16px);
    }

    .sister_schools .school_list thead {
        display: none;
    }

    .sister_schools .school_list .list tr {
        flex-direction: column;
        align-items: initial;
        margin: 15px 0;
        border-top: 1px solid #1D3244;
    }

    .sister_schools .school_list .list td {
        flex-basis: initial;
        border-bottom: 1px solid #f8f8f8;
        padding: 15px 10px;
        padding-left: 120px;
        position: relative;
        justify-content: flex-start;
        min-height: 57px;
    }

    .sister_schools .school_list .list td:nth-last-child(1) {
        border-bottom: none;
    }

    .sister_schools .school_list .list td:before {
        content: attr(data-th)"";
        font-weight: 500;
        width: 110px;
        font-size: 1rem;
        position: absolute;
        left: 0px;

        background-color: #1D3244;
        color: #fff;
        height: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .school_list .list .basis_100 {
        text-align: left;
    }

    .school_list .list td a {
        padding: 0;
    }


    /* 20240328 新增 締約學校內頁的數據樣式 */
    .sister_schools .statistics_box .list li {
        margin: 5px 0;
        padding: 8px;

        flex-basis: calc(100% /4);
        border-radius: 0;
        border-right: 2px solid #E1BE84;
        box-shadow: none;
    }

    /* 20240328 */
    .sister_schools .text {
        margin: 20px 20px;
    }

}



@media (max-width: 575.98px) {

    /* 20240327 刪掉 */
    .sister_schools .world .map .box>li {
        /* padding: 12px 0; */
    }

    .sister_schools .world .map .box li.active div {
        /* border: 3px solid #E1BE84; */
    }

    .sister_schools .world .map .box .circle {
        /* padding: 22px 5px; */
    }

    .sister_schools .world .map .box div:hover .circle {
        padding: 12px 5px;
    }

    .sister_schools .world .map .box li.active div .circle {
        /* border: 2px solid #E1BE84; */
    }

    .sister_schools .world .map .box li div .circle::after {
        background-size: 15px;
        width: 15px;
        height: 18px;

        bottom: 5px;
    }

    .sister_schools .world .map .box li.active div .circle::after {
        background-size: 22px;
    }

    .sister_schools .world .map .box li div:hover .circle::after {
        bottom: 0px;
        background-size: 15px;
    }


    .school_list .btn_box button {
        flex-basis: calc(100% / 2 - 16px);
    }

    /* 20240328 新增 締約學校內頁的數據樣式 */
    .sister_schools .statistics_box .list li {
        flex-basis: calc(100% /2);
        border-radius: 0;
        border-right: none;
        box-shadow: none;

        margin: 0;

        position: relative;
    }

    .sister_schools .statistics_box .list li::before {
        content: "";
        display: inline-block;
        width: 60%;
        height: 2px;
        background-color: #E1BE84;
        position: absolute;
        top: 54%;
        left: 50%;
        transform: translateX(-50%);
    }

    /* 20240328 */
    .sister_schools .school_list .title {
        margin-top: 10px;
    }

    /* 20240329 */
    .sister_schools .search_box {
        flex-wrap: wrap;
    }

    .sister_schools .search_box .form-group:nth-child(1) {
        flex-basis: 100%;
        margin: 0;
        margin-bottom: 10px;
    }

    .sister_schools .search_box .form-group:nth-child(2) {
        flex-basis: calc(100% - 74px);
    }
}






/* member 個人 */
/* 上方切換按鈕 */
.member .container>.btn {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
    padding: 10px 0;

    /* justify-content: center; */
}

.member .container>.btn button {
    border: 1px solid #E1BE84;
    border-radius: 15px 5px 15px 5px;
    background-color: transparent;
    color: #1D3244;
    font-weight: 500;
    padding: 5px 10px;
    margin: 8px 8px;
    flex-basis: calc(100% / 5 - 16px);
    transition: 0.3s;

    position: relative;
}

.member .container>.btn button::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100px;
    background-image: url(../img/news_btn_bg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    position: absolute;
    top: -100%;
    left: 0;
    transform: rotateX(90deg);
    transition: 0.3s;
}

.member .container>.btn button:hover {
    background-color: #d3a760;
    color: #fff;
}

.member .container>.btn button.active {
    background-color: #d3a760;
    color: #fff;
}

.member .container>.btn button.active::before {
    transform: rotateX(30deg);
}

.member .container>.btn button:focus {
    outline: #E1BE84;
}

.member .container>.btn button p {
    margin: 0;
    position: relative;
}


/* 切換內容 */
.member .box {
    display: none;
    margin-bottom: 100px;
}

.member .box.show {
    display: block;
}

/* 個人資料 */
.member .box .personal {
    max-width: 600px;
    margin: 20px auto;
    /* margin-bottom: 100px; */
}

.member .box .personal .form-control:disabled {
    background-color: #f5f5f5;
    /* color: #1D3244; */
    font-weight: 600;
}

.member .box .personal hr {
    margin-top: 35px;
}

.member .box .personal .code_box .btn {
    display: flex;
    padding: 0;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;
}

.member .box .personal .code_box .btn input {
    flex-basis: calc(100% - 125px);
}

.member .box .personal .code_box .btn button {
    order: 2;
    /* flex-basis: 80px; */
    margin: 5px 0;
    margin-left: 5px;
    border-radius: 5px;
    height: 100%;
    padding: 5px 5px;

    font-size: 0.9rem;
}

/* 按鈕 */
.member .box .personal .btn {
    text-align: center;
    width: 100%;
}

.member .box .personal button {
    background-color: #1D3244;
    border-radius: 20px;
    border: 1px solid #1D3244;
    color: #fff;
    min-width: 120px;
    padding: 3px 20px;
    margin: 5px;
    font-size: 1rem;
    transition: 0.3s;
}

.member .box .personal button:hover {
    background-color: transparent;
    border: 1px solid #1D3244;
    color: #1D3244;
}

/* 申請查詢結果 */
.member .box .apply_box {
    margin-bottom: 50px;
    border-bottom: 2px solid #E1BE84;
}

.member .box .apply_box:nth-last-child(1) {
    margin-bottom: 20px;
}

.member .box .apply {
    display: flex;
    margin: 20px 0;
}

/* 進度表 */
.member .box .progress_box {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;

    position: relative;
}

.member .box .progress_box li {
    text-align: center;
    border-radius: 50px;
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    position: relative;
}

.member .box .progress_box li::after {
    content: "";
    width: 20px;
    height: 20px;
    background-image: url(../img/arrow_b_2.svg);
    background-repeat: no-repeat;
    background-size: 20px;

    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-100%);
}

.member .box .progress_box li:nth-last-child(1):after {
    content: none;
}

.member .box .progress_box li .circle {
    border: 2px solid #1D3244;
    border-radius: 100px;
    padding: 3px;
}

.member .box .progress_box li .img_box {
    border-radius: 100px;
    padding: 10px;
    width: 100px;
    height: 100px;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    background-color: #1d3244be;
    color: #fff;
}

.member .box .progress_box li .img_box img {
    width: 100%;
}

.member .box .progress_box li p {
    font-weight: 400;
    margin: 5px 0;
}

/* 被選到的進度樣式 */
.member .box .progress_box li.active .circle {
    border: 2px solid #d3a760;
}

.member .box .progress_box li.active .img_box {
    background-color: #d3a760;
}

.member .box .progress_box li.active p {
    color: #d3a760;
    font-weight: 600;
    font-size: 1.1rem;
}

/* 文字內容 */
.member .box .list {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 100%;
    margin: 0 20px;
}

.member .box .list li {
    display: flex;
    margin-bottom: 10px;
}

.member .box .list li:nth-last-child(1) {
    margin-bottom: 0;
}

.member .box .list li p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 400;
    flex-basis: calc(100% - 90px);
}

.member .box .list li p:nth-child(1) {
    flex-basis: 90px;
}

/* 補件按鈕 */
.member .box .list li .btn {
    width: 100%;
    border-radius: 0;
    text-align: right;
    border-top: 1px dotted rgba(0, 0, 0, 0.267);
    padding-top: 5px;
}

.member .box .list li .success_btn button {
    padding: 2px 20px;
    padding-top: 3px;
}

.member .box .list li button {
    border: 1px solid #d3a760;
    background-color: #d3a760;
    color: #fff;
    padding: 2px 30px;
    padding-top: 3px;
    border-radius: 50px;

    margin-top: 5px;

    transition: 0.3s;
}

.member .box .list li button:hover {
    border: 1px solid #1D3244;
    background-color: #1D3244;
}


/* 1128 */
/* 在國外聯絡資訊 */

/* 20241017 刪掉 */
/* .member h1{
    margin-bottom: 20px;
} */

/* 20241017 新增 */
.member .container>h2 {
    font-size: 1.5rem;
    border-bottom: 2px solid #E1BE84;
    padding-bottom: 2px;
    margin-bottom: 5px;
    padding-left: 25px;
    background-image: url(../img/arrow_m_2.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: left 5px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.member .box .contact_box {
    display: flex;
    flex-wrap: wrap;
}

.member .box .contact_box .form-group {
    flex-basis: 50%;
}

.member .box .contact_box .btn {
    flex-basis: 100%;
}

/* 按鈕 */
.member .box .contact_box .btn {
    text-align: center;
    width: 100%;
    order: 3;
}

.member .box .contact_box button {
    background-color: #1D3244;
    border-radius: 20px;
    border: 1px solid #1D3244;
    color: #fff;
    min-width: 120px;
    padding: 3px 20px;
    margin: 5px;
    font-size: 1rem;
    transition: 0.3s;
}

.member .box .contact_box button:hover {
    background-color: transparent;
    border: 1px solid #1D3244;
    color: #1D3244;
}

/* 回國報告 */
.member .box .return_box {
    display: flex;
    flex-wrap: wrap;
}

.member .box .return_box .questionnaire {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    margin: 0 15px;
    padding: 15px 0;
    padding-left: 3px;
}

.member .box .return_box .questionnaire a {
    display: inline-block;
    color: #1D3244;
    font-size: 1.1rem;
    font-weight: 400;
    border-bottom: 1px dotted #1D3244;
    transition: 0.3s;
}

.member .box .return_box .questionnaire a:hover {
    text-decoration: none;
    color: #E1BE84;
    border-bottom: 1px dotted #E1BE84;
    font-weight: 500;
}

.member .box .return_box .questionnaire p {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 400;
    margin: 0;
}

.member .box .return_box .questionnaire img {
    width: 18px;
    margin: 0 5px;
}

.member .box .return_box .form-group p {
    order: 3;
    font-weight: 400;
    font-size: 0.9rem;
    margin: 0;
    padding-left: 5px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.member .box .return_box .form-group p button {
    padding: 1px 15px;
    padding-top: 2px;
    font-size: 0.9rem;
    border: none;
    margin: 3px 3px;
}

.member .box .return_box .form-group p button:hover {
    background-color: #E1BE84;
    color: #fff;
}

/* 按鈕 */
.member .box .return_box .btn {
    text-align: center;
    width: 100%;
    order: 3;
}

.member .box .return_box button {
    background-color: #1D3244;
    border-radius: 20px;
    border: 1px solid #1D3244;
    color: #fff;
    min-width: 120px;
    padding: 3px 20px;
    margin: 5px;
    font-size: 1rem;
    transition: 0.3s;
}

.member .box .return_box button:hover {
    background-color: transparent;
    border: 1px solid #1D3244;
    color: #1D3244;
}

/* 上傳照片 */
.member .box #preview_imgs {
    order: 3;
}

.member .box #preview_imgs.add {
    border-top: 1px dotted #1D3244;
    border-bottom: 1px dotted #1D3244;
    margin-top: 10px;
    padding: 5px 0;

    position: relative;
}

.member .box #preview_imgs img {
    height: 120px;
    padding: 3px;
}



@media (max-width: 991.98px) {
    .member .container>.btn button {
        flex-basis: calc(100% / 3 - 16px);
    }

    .member .box .apply {
        flex-direction: column;
    }

    .member .box .list {
        margin: 0;
        margin-top: 10px;
        padding-top: 15px;
        border-top: 1px dotted rgba(0, 0, 0, 0.267);
    }

    .member .box .progress_box li:nth-child(1) {
        margin-left: 0;
    }

    .member .box .progress_box {
        width: 100%;
        justify-content: space-between;
    }

    .member .box .progress_box li::after {
        right: -75px;
    }

    .member .box #preview_imgs img {
        height: 80px;
    }
}


@media (max-width: 767.98px) {

    .member .container>.btn button {
        flex-basis: calc(100% / 2 - 16px);
    }

    .member .box .progress_box li::after {
        right: -35px;
    }

    .member .box .contact_box .form-group {
        flex-basis: 100%;
        order: initial;
    }

    .member .box .return_box .questionnaire a {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {

    .member .box.personal .code_box .btn input {
        flex-basis: 100%;
    }

    .member .box .progress_box li {
        margin: 0 0px;
    }

    .member .box .progress_box li::after {
        content: none;
    }

    .member .box .progress_box li .img_box {
        width: 20vw;
        height: 20vw;
    }
}





/* 常見問題 faqs */
.faqs {
    padding-bottom: 60px;
}


.faqs .btn_box {
    display: flex;
    flex-wrap: wrap;

    margin: 0 -8px;
}

.faqs .btn_box button {
    border: 1px solid #E1BE84;
    border-radius: 15px 5px 15px 5px;
    background-color: transparent;
    color: #1D3244;
    font-weight: 500;
    padding: 5px 10px;
    margin: 8px 8px;
    flex-basis: calc(100% / 5 - 16px);

    transition: 0.3s;

    position: relative;
}

.faqs .btn_box button p {
    margin: 0;
    position: relative;
}

.faqs .btn_box button.active {
    background-color: #d3a760;
    color: #fff;
    position: relative;
}

.faqs .btn_box button::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: calc(100% + 25px);
    background-image: url(../img/news_btn_bg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;

    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotateX(90deg);
    transition: 0.3s;
}

.faqs .btn_box button.active::before {
    transform: translateY(-50%) rotateX(0deg);
}

.faqs .btn_box button:focus {
    outline: #E1BE84;
}

.faqs .btn_box button:hover {
    background-color: #d3a760;
    color: #fff;
}


.faqs .list {
    margin: 0;
    padding: 0;
    list-style: none;

    display: none;
}

.faqs .list.show {
    display: block;
}

.faqs .list li {
    margin: 20px 0;

    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 2px 2px 3px #0000000b;

    transition: 0.3s;
}

.faqs .list li:hover {
    transform: scale(1.03);
}

.faqs .list li div {
    display: flex;
    margin: 10px 0;

    position: relative;
}

.faqs .list li div img {
    margin-right: 5px;
    width: 25px;
}

.faqs .list li div p {
    margin: 0;
    width: 100%;
    font-size: 1.1rem;
    color: #1D3244;
    font-weight: 400;
}

.faqs .list li div.answer {
    display: none;
}

.faqs .list li div.answer .ans {
    display: flex;
    align-items: flex-start;
    margin: 0;
}

.faqs .list li div.answer hr {
    border-top: 1px dotted #9b9b9b;
    margin: 0;
    padding-top: 15px;
}


@media (max-width: 991.98px) {

    .faqs .btn_box button {
        flex-basis: calc(100% / 3 - 16px);
    }
}

@media (max-width: 575.98px) {

    .faqs .btn_box button {
        flex-basis: calc(100% / 2 - 16px);
    }
}


/* 網站導覽 Sitemap */
.sitemap .list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    margin: 0 -10px;
}

.sitemap .list li {
    flex-basis: calc(100% / 4);
    padding: 0 10px;
    margin-bottom: 30px;

    display: flex;
    flex-direction: column;
}

.sitemap .list li a {
    padding: 6px 10px;
    border-radius: 5px;
    color: #1D3244;
    margin: 2px 0;
    font-weight: 400;

    transition: 0.3s;
}

.sitemap .list li a:hover {
    text-decoration: none;
    background-color: #E1BE84;
    color: #fff;
    padding-left: 15px;
}

.sitemap .list li .title {
    background-color: #1D3244;
    color: #fff;
}




@media (max-width: 991.98px) {

    .sitemap .list li {
        flex-basis: calc(100% / 2);
    }
}

@media (max-width: 575.98px) {

    .sitemap .list li {
        flex-basis: calc(100%);
    }
}




/* 1219 exchange_school 交換學生計畫學校一覽表 */
.exchange_school .container {
    margin-bottom: 60px;
}

.exchange_school .search_box {
    padding: 15px 15px;
    margin-top: 30px;
}

.exchange_school .search_box .form-group {
    flex-basis: calc((100% - 120px) / 2);
}

.exchange_school .search_box .form-group:nth-last-child(1) {
    flex-basis: 120px;
    justify-content: flex-end;
}

.exchange_school .search_box .form-group .btn_box {
    margin: 0;
    text-align: right;
    width: 90px;
}

.exchange_school .search_box .form-group .btn_box button {
    margin: 0;
    margin-bottom: 5px;
    min-width: 100%;
}

.exchange_school .search_box .form-group .btn_box button:hover {
    background-color: #E1BE84;
    border: 1px solid #E1BE84;
    color: #fff;
}


/* 列表表格 */
.exchange_school .box table {
    width: 100%;
}

/* 標題標籤 */
.exchange_school .box table thead tr {
    border-radius: 5px;
    overflow: hidden;
}

.exchange_school .box table thead th {
    background-color: #1D3244;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    padding: 8px 15px;
    border-right: 1px dashed #949494;
}

.exchange_school .box th:nth-last-child(1) {
    border-right: none;
}

/* 條列內容 */
.exchange_school .box tr {
    border-bottom: 1px solid #1D3244;
    display: flex;
    align-items: stretch;
    color: #1D3244;
}

.exchange_school .box td {
    padding: 15px 15px;
    font-size: 1.1em;
    font-weight: 500;

    border-right: 1px dashed #e6e6e6;
}

.exchange_school .box td:nth-last-child(1) {
    border-right: none;
}

.exchange_school .box td p {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.exchange_school .box td a {
    display: inline-block;
    width: 100%;
    color: #1D3244;
    font-weight: 500;
    padding: 10px 0;

    transition: 0.3s;

    display: flex;
    flex-direction: column;
    text-decoration: underline;
}

.exchange_school .box td a:hover {
    text-decoration: none;
    color: #E1BE84;
    padding-left: 0;
    transform: translateY(-3px);
}


/* 每個項目寬度 */
.exchange_school .box td,
.exchange_school .box th {
    flex-basis: 250px;
    flex-grow: 1;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.exchange_school .box .basis_80 {
    flex-grow: 0;
    text-align: center;
    justify-content: center;

    flex-basis: 80px;
    font-size: 1rem;

    padding: 8px 5px;
}

.exchange_school .box .basis_90 {
    flex-grow: 0;
    text-align: center;
    justify-content: center;

    flex-basis: 90px;
    font-size: 1rem;

    padding: 8px 5px;
}

.exchange_school .box .basis_75 {
    flex-grow: 0;
    text-align: center;
    justify-content: center;

    flex-basis: 75px;

    padding: 8px 5px;
}

/* 詳細說明 */
/* 按鈕 */
.exchange_school .box table .circle {
    border: 1px solid #E1BE84;
    border-radius: 100px;
    width: 36px;
    height: 36px;

    position: relative;
    transform: rotate(90deg);
    transition: 0.3s;

    cursor: pointer;
}

.exchange_school .box table .circle img {
    width: 20px;

    position: absolute;
    top: 50%;
    left: 52%;
    transform: translateX(-50%) translateY(-50%) rotateY(45deg);
    /* padding: 5px; */
}

.exchange_school .box table .circle:hover {
    transform: rotate(90deg) scale(1.1);
    border: 1px solid #d3a760;
}

.exchange_school .box table .circle.add {
    transform: rotate(90deg) scale(0.8);
}

.exchange_school .box table .circle.add img {
    transform: translateX(-50%) translateY(-50%) rotateY(60deg) rotate(180deg);
}

/* 內容 */
.exchange_school .box table tr.main {
    border: none;
}

.exchange_school .box table tr.main.add {
    border-bottom: 1px solid #1D3244;
}

.exchange_school .box table tr.main td {
    padding: 0 10px;
}

.exchange_school .box table tr.main .list {
    margin: 0;
    padding: 0;
    list-style: none;

    display: none;
}

.exchange_school .box table tr.main .list li {
    border-bottom: 1px solid #d3a760;
    padding: 10px 0;
}

.exchange_school .box table tr.main .list li:nth-last-child(1) {
    border-bottom: none;
}

.exchange_school .box table tr.main .list li p {
    font-weight: 400;
    font-size: 1rem;
}

.exchange_school .box table tr.main .list li p:nth-child(1) {
    color: #d3a760;
    font-weight: 500;
    font-size: 1.1rem;
}


/* 總計 */
.exchange_school .box .total_box {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.exchange_school .box .total_box p {
    margin: 0;
    margin-left: 15px;
    font-weight: 400;
    color: #1D3244;
}



@media (max-width: 991.98px) {

    .exchange_school .box .basis_75 {
        flex-basis: 90px;
    }

    .exchange_school .box .basis_75:nth-child(1) {
        flex-basis: 60px;
    }
}


@media (max-width: 767.98px) {

    .exchange_school .box thead {
        display: none;
    }

    .exchange_school .box tr {
        flex-direction: column;
        align-items: initial;
        margin: 15px 0;
        border-top: 1px solid #1D3244;
    }

    .exchange_school .box table tbody tr td {
        flex-basis: initial;
        border-bottom: 1px dashed #e6e6e6;
        padding: 15px 10px;
        padding-left: 120px;
        position: relative;
        justify-content: flex-start;
        min-height: 20px;
        border-right: none;
    }

    .exchange_school .box .basis_75 {
        flex-basis: initial;
        justify-content: flex-start;
        padding: 15px 10px;
        padding-left: 120px;
    }

    .exchange_school .box .basis_80 {
        flex-basis: initial;
        justify-content: flex-start;
        padding: 15px 10px;
        padding-left: 120px;
    }

    .exchange_school .box .basis_90 {
        flex-basis: initial;
        justify-content: flex-start;
        padding: 15px 10px;
        padding-left: 120px;
    }

    .exchange_school .box td:nth-last-child(1) {
        border-bottom: none;
    }

    .exchange_school .box td:before {
        content: attr(data-th)"";
        font-weight: 400;
        width: 100px;
        font-size: 0.9rem;
        position: absolute;
        left: 0px;

        background-color: #1D3244;
        color: #fff;
        height: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .exchange_school .box tr.main td:before {
        content: none;
    }

    .exchange_school .box td a {
        padding: 0;
        padding-top: 5px;
    }

    .exchange_school .box table .circle {
        transform: rotate(90deg) scale(0.8) translateY(5px);
    }

    .exchange_school .box table .circle:hover {
        transform: rotate(90deg) scale(1) translateY(5px);
    }

}


@media (max-width: 575.98px) {

    .exchange_school .search_box {
        flex-direction: column;
    }

    .exchange_school .search_box .form-group:nth-last-child(1) {
        flex-basis: initial;
        margin-top: 20px;
    }

    .exchange_school .search_box .form-group .btn_box {
        width: 100%;
    }
}





@media (max-width: 575.98px) {}

@media (max-width: 767.98px) {}

@media (max-width: 991.98px) {}

@media (max-width: 1199.98px) {}








/* 20241230 */
.accesskey_c,
.accesskey_u {
    position: absolute;
    z-index: 5;
    padding: 2px;
}

.accesskey_u {
    top: 0;
}

.accesskey:hover {
    text-decoration: none;
}











.form .box .rule {
    margin: 0;
    padding: 0;
    padding-left: 30px;
    list-style: cjk-ideographic;
}

.form_china .box .rule {
    padding-left: 48px;
}

.form .box .rule li {
    padding: 3px 0;
}

.form .box .note {
    font-size: 0.9rem;
    font-weight: 400;
    margin: 0;
    margin-top: 3px;
    margin-left: 3px;
    color: #6b6b6b;

    order: 3;
}


.exchange_student_form_1 .box .china_note{
    display: none;
}




.form_china .box .form-group {
    justify-content: flex-start;
}

.form_china .box .line {
    width: 100%;
    margin: 15px 15px;
}

.form_china .box .check_group {
    margin: 12px 5px;
    margin-bottom: 0;
}

.form_china .box .check_group label {
    transform: translateX(0) translateY(0);
}

.form_china .box .other_nationalities {
    display: none;
}

.form_china .box .address_group {
    display: flex;
    order: 2;
}

.form_china .box .address_group input:nth-child(1) {
    width: 90px;
    margin-right: 10px;
}


.form_china .box .check_group .form-control {
    display: none;
}



@media (max-width: 767.98px) {
    .form_china .box .form-group {
        order: initial;
    }

    .form_china .box .address_group {
        flex-direction: column;
    }

    .form_china .box .address_group input:nth-child(1) {
        margin-bottom: 5px;
    }
}