/* all-style */
/* font family - Noto */
@font-face {
    font-family: 'Noto';
    font-style: normal;
    font-weight: 900;
    src: url('https://www.ite2.com/imgs/font/NotoSansTC-Black.otf') format('opentype');
    font-display: fallback
}

* {
    --dark: #000000;
    --secondary-dark: #1c1c1c;
    --secondary-blue: #e6f0fa;
    --text-main: #333333;
    --text-light: #666666;
    --bg-gray: #f8f9fa;
    --border-color: #e0e0e0;
    --Fontfamily900: "Noto", "Microsoft JhengHei", sans-serif, Arial !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)
}

body{
    overflow-x: hidden;
}

h1,
h2 {
    font-size: 55px;
    font-weight: 900;
    margin-bottom: 20px;
}

@media (max-width: 787px) {

    h1,
    h2 {
        font-size: 40px;
    }
}

h3 {
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 20px;
}

@media (max-width: 787px) {
    h3 {
        font-size: 22px;
    }
}

.stitle {
    font-size: 24px;
    color: #475569;
    margin-bottom: 50px;
    text-align: center;
}

@media (max-width: 787px) {
    .stitle {
        font-size: 18px;
    }
}

.dis-flex {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* nav */
.navbar {
    background: rgb(255, 255, 255, 0.7);
    position: relative;
    padding-top: 20px;
    padding-bottom: 5px;
    border-radius: 0;
    margin: 0;
    border-bottom: 1px solid #eee;
}


@media (max-width: 768px) {
    .navbar {
        background: rgb(255, 255, 255, 0.9);
    }

}

.navbar>div {
    max-width: 1380px;
    margin: auto;
    display: flex;
    flex-direction: column;
}

@media(min-width: 768px) {
    .navbar>div {
        display: block;
    }
}

.navbar-brand {
    padding: 0 15px;
}

.navbar .top-link {
    float: none;
    position: absolute;
    right: 15px;
    top: 0;
    margin: 0;
}

@media (max-width: 768px) {
    .navbar .top-link {
        display: none;
    }
}

.nav.navbar-nav a {
    color: #595959;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav.navbar-nav a:hover,
.nav.navbar-nav a:focus {
    background: #f6faff;
    box-shadow: inset 0 -4px 0px 0px #1358d2;
    color: #0a3075;
}

.navbar .top-link.navbar-nav>li>a {
    line-height: 1;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.nav.navbar-nav a:hover,
.nav.navbar-nav a:focus {
    background: #f3f3f3;
}


.page-nav .nav.navbar-nav li {
    text-align: center;
    padding-bottom: 10px;
}

@media(min-width: 768px) {
    .page-nav .nav.navbar-nav li {
        text-align: left;
    }
}


.navbar-header {
    position: relative;
}

.navbar-header::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background-color: #fff3b8;
    z-index: -1;
    left: -550px;
    top: -200px;
    border-radius: 100%;
}

@media (max-width: 1850px) {
    .navbar-header::after {
    left: -25vw;
    top: -100px;
}
}


.navbar-header::before {
    content: "";
    position: fixed;
    width: 300px;
    height: 300px;
    background-color: #fff7ed;
    z-index: -1;
    left: 400px;
    top: 700px;
    border-radius: 100%;
}

.navbar-toggle {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

.navbar-toggle svg {
    height: 30px;
    width: 30px;
}

/* breadcrum */
.breadcrumb-page {
    max-width: 1400px;
    width: 95%;
    margin: auto;
    display: flex;
    align-items: center;
    padding-top: 5px;
}

.breadcrumb-page a {
    color: #757575;
    padding-left: 2px;
    padding-right: 2px;
}


/* footer */
footer {
    background: #2d3139;
    padding: 30px;
    color: #fff;
    z-index: 1;
    position: relative;
}

.footer {
    display: flex;
    justify-content: center;
    min-height: 200px;
    width: 95%;
    max-width: 1300px;
    margin: auto;
}

@media (max-width: 987px) {
    .footer {
        flex-direction: column;
    }
}

.footer .left {
    padding-right: 30px;
    flex: 1;
}


@media (max-width: 987px) {
    .footer .left {
        padding-right: 0px;
        padding-bottom: 50px;
    }

}

.footer .left .footer-item {
    margin-bottom: 20px;
}

.footer .left .footer-item a {
    padding: 10px 0;
}

.footer .left a,
.footer .left a:visited,
.footer .left a:focus,
.footer .right a,
.footer .right a:visited,
.footer .right a:focus {
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

.footer .right {
    width: 300px;
}

.footer .right .social-row {
    gap: 10px;
}