/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

html, body {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray; /* IE 6-9 */
}

body {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    overflow-x: hidden;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
    font-weight: 700;
    line-height: 1.3;
}

h1,
.h1 {
    font-size: 2.5rem;
}

h2,
.h2 {
    font-size: 1.9rem;
}

h3,
.h3 {
    font-size: 1.3rem;
}

a {
    color: #000000;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

a:hover {
    color: #4280cf;
    text-decoration: none;
}

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

.text-right {
    text-align: right;
}

.img-fluid {
    max-width: 100%;
}

.btn-more {
    display: inline-block;
    line-height: 1;
    font-size: 1rem;
    background-color: #5399e5;
    color: #ffffff;
    border-radius: 100px;
    padding: 0.4625rem 1.5rem;
    cursor: pointer;
    border: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn-more:hover {
    background-color: #1963b3;
    color: #ffffff;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

.album-item {
    background-color: #ffffff;
    display: block;
    position: relative;
    padding: 0.625rem 0.625rem 1.875rem 0.625rem;
    -webkit-box-shadow: 2px 2px 13px 0px rgba(0, 0, 0, 0.38);
    box-shadow: 2px 2px 13px 0px rgba(0, 0, 0, 0.38);
}

.album-item .item-featured {
    position: relative;
    overflow: hidden;
    background-color: #000000;
    margin-bottom: 15px;

    /*john 2020-6-16 add*/
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.album-item .item-featured img {
    width: 100%;
}
/*john 2020-6-16 delete
.album-item .item-featured img {
    width: 100%;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 200ms ease-in;
    transition: -webkit-transform 200ms ease-in;
    -o-transition: transform 200ms ease-in;
    transition: transform 200ms ease-in;
    transition: transform 200ms ease-in, -webkit-transform 200ms ease-in;
}
.album-item .item-featured:hover img {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
*/
.album-item .item-featured:hover{
    background-size: 120%;
}
.album-item h3 {
    margin-bottom: 15px;
    /*john 2020-6-16 add*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-item span {
    display: block;
    font-weight: 700;
    color: #4892e3;
    line-height: 1;
}

.page-banner {
    padding-top: 30px;
}

.page-banner img {
    width: 100%;
    border: 4px solid rgba(255, 255, 255, 0.5);
    border-bottom: none;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    -webkit-box-shadow: 2px 2px 13px 0px rgba(0, 0, 0, 0.38);
    box-shadow: 2px 2px 13px 0px rgba(0, 0, 0, 0.38);
}

.page-title {
    background-color: #fd9f3f;
    padding: 1rem 0;
    line-height: 1;
}

.page-subheading {
    line-height: 1;
    padding: 0 0 1rem 0;
    border-bottom: 3px dashed #ffffff;
    margin-bottom: 16px;
}

.page-subheading h3 {
    font-size: 2.1rem;
    color: #ffffff;
}

.page-subheading select {
    margin: 0 auto;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 200px;
    flex: 0 0 200px;
    width: 200px;
    height: 35px;
    background-color: #ffffff;
    border: 1px solid #efefef;
}

.sidebar-nav {
    background-color: #fed17c;
    padding: 0 1rem;
}

.sidebar-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1;
}

.sidebar-nav ul ul {
    display: none;
    padding: 10px 10px 10px 30px;
}

.sidebar-nav>ul>li>a {
    display: block;
    position: relative;
    padding: 1rem;
    border-bottom: 2px dashed #fd833f;
}

.sidebar-nav>ul>li>a::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    position: absolute;
    left: 0;
    right: 0;
    font-size: 20px;
    color: #34ccf3;
}

.sidebar-nav>ul>li>a.active::before {
    content: "\f107";
}

.sidebar-nav ul li a:hover {
    color: #ff3300;
}

.sidebar-nav ul ul li a {
    display: block;
    padding: 0.4rem 0;
}

.pagination {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.pagination .page-link {
    display: block;
    line-height: 1;
    padding: 5px 9px;
    background-color: transparent;
    color: #000000;
    -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out;
    -o-transition: background 300ms ease-in-out, color 300ms ease-in-out;
    transition: background 300ms ease-in-out, color 300ms ease-in-out;
}

.pagination .page-link:hover {
    background-color: #5bcaff;
    color: #ffffff;
}

.pagination .prev a,
.pagination .next a {
    padding: 3px 9px;
}

.pagination .prev a:hover,
.pagination .next a:hover {
    background: transparent;
}

.sidenav-toggle {
    display: block;
    width: 100%;
    text-transform: uppercase;
    background-color: #34ccf3;
    color: #ffffff;
    padding: 15px;
    line-height: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    border: none;
    text-align: left;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.sidenav-toggle .fas {
    margin-right: 6px;
}

.back-btn {
    display: inline-block;
    font-size: 1.5rem;
}

.back-btn .fas {
    color: #fd9f3f;
    font-size: 2rem;
    line-height: 1;
    position: relative;
    top: 4px;
    margin-right: 8px;
}


/*========Header=======*/

.site-header {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1rem 0;
    line-height: 1;
}

.site-header .site-logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.site-header .site-logo a {
    padding-right: 15px;
}

.top-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.top-links a {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 110px;
    flex: 0 0 110px;
    width: 110px;
    padding: 25px 10px;
    background-color: #f8be5c;
    color: #ffffff;
    border: 5px solid #ffffff;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    margin: 0 4px;
    text-align: center;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

.top-links a:nth-child(2) {
    background-color: #f884c3;
}

.top-links a:nth-child(3) {
    background-color: #72c5f7;
}
.top-links a:nth-child(4) {
    background-color: #ff1313;
}
.top-links .fas {
    font-size: 1.3rem;
    display: block;
    margin-bottom: 5px;
}

.top-links a:hover {
    -webkit-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.13);
    box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.13);
}

.lang-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.lang-menu li a {
    display: block;
    position: relative;
    color: #689fe4;
    padding: 0 .5rem;
}

.lang-menu li a::after {
    content: '';
    display: inline-block;
    position: absolute;
    right: 0;
    top: 2px;
    width: 1px;
    height: 14px;
    background-color: #689fe4;
}

.lang-menu li:last-child a::after {
    display: none;
}

.lang-menu li a:hover {
    color: #000000;
}

.menu-toggle,
.menu-close,
.sidenav-close {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 40px;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background: #000000;
    color: #ffffff;
    border: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.menu-toggle {
    background: #fd833f;
    margin-left: auto;
}

.site-main-nav {
    background: #fd833f;
    line-height: 1;
}

.site-main-nav .nav-ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-main-nav .nav-ul>li>a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    background-color: #fd833f;
    color: #ffffff;
    font-size: 1rem;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    padding: 0.3125rem 0.737rem;
    -webkit-transition: color 300ms ease-in-out, background 300ms ease-in-out;
    -o-transition: color 300ms ease-in-out, background 300ms ease-in-out;
    transition: color 300ms ease-in-out, background 300ms ease-in-out;
}

.site-main-nav .nav-ul>li>a img {
    margin-right: 3px;
    width: 35px;
    height: 35px;
}

.site-main-nav .nav-ul>li>a:hover {
    background-color: #21b7dc;
}

.site-main-nav .has-submenu,
.site-main-nav .has-submenu>a {
    position: relative;
}

.site-main-nav .has-submenu>a::after {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f107";
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.site-main-nav .submenu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-main-nav .submenu li a {
    display: block;
    padding: 0.5125rem 0.737rem;
    font-size: 1rem;
    background-color: #fd833f;
    border-bottom: 1px solid #d86525;
    color: #ffffff;
}

.site-main-nav .submenu .submenu li a {
    padding: 0.5125rem 0.937rem;
}

.site-main-nav .submenu li a:hover {
    background-color: #21b7dc;
}

@media screen and (min-width:1200px) {
    .menu-toggle,
    .menu-close {
        display: none;
    }
    .site-header .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .site-header .top-links {
        margin-left: auto;
    }
    .site-main-nav .lang-menu,
    .site-main-nav .top-links {
        display: none;
    }
    .site-main-nav .nav-ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: flex-start;
    }
    .site-main-nav .nav-ul>li {
        flex: 1 1 auto;
    }
    .site-main-nav .nav-ul .submenu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        min-width: 200px;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: visibility 300ms ease-in-out, opacity 300ms ease-in-out;
        -o-transition: visibility 300ms ease-in-out, opacity 300ms ease-in-out;
        transition: visibility 300ms ease-in-out, opacity 300ms ease-in-out;
    }
    .site-main-nav .submenu .submenu {
        position: absolute;
        left: 100%;
        top: 0;
        z-index: 1000;
    }
    .site-main-nav .has-submenu:hover>.submenu {
        opacity: 1;
        visibility: visible;
    }
    .site-main-nav .nav-ul>.has-submenu>a {
        padding: 0.3125rem 1.2rem 0.3125rem 0.437rem;
    }
    .site-main-nav .has-submenu>a::after {
        right: 6px;
    }
    .site-main-nav .submenu .has-submenu>a::after {
        right: 8px;
        -webkit-transform: translateY(-50%) rotate(-90deg);
        -ms-transform: translateY(-50%) rotate(-90deg);
        transform: translateY(-50%) rotate(-90deg);
    }
}

@media screen and (max-width:1199px) {
    .site-header .top-links,
    .site-header .lang-menu {
        display: none;
    }
    .page-wrap {
        position: relative;
        top: 0;
        left: 0;
        -webkit-transition: left 610ms cubic-bezier(0, .8, .55, 1);
        -o-transition: left 610ms cubic-bezier(0, .8, .55, 1);
        transition: left 610ms cubic-bezier(0, .8, .55, 1);
    }
    .page-wrap.menu-active {
        left: 300px;
    }
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        opacity: 0;
        visibility: hidden;
        z-index: 999;
        -webkit-transition: opacity 300ms ease-in-out;
        -o-transition: opacity 300ms ease-in-out;
        transition: opacity 300ms ease-in-out;
    }
    .site-main-nav {
        position: fixed;
        width: 300px;
        height: 100%;
        top: 0;
        left: -300px;
        z-index: 1000;
        overflow: auto;
        -webkit-box-shadow: 17px 2px 40px 0px rgba(0, 0, 0, 0.19);
        box-shadow: 17px 2px 40px 0px rgba(0, 0, 0, 0.19);
        -webkit-transition: all 610ms cubic-bezier(0, .8, .55, 1);
        -o-transition: all 610ms cubic-bezier(0, .8, .55, 1);
        transition: all 610ms cubic-bezier(0, .8, .55, 1);
    }
    .site-main-nav .container {
        padding: 0;
    }
    .site-main-nav.menu-active {
        left: 0;
    }
    .site-main-nav .menu-close {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
    }
    .site-main-nav .nav-ul {
        padding-top: 40px;
    }
    .site-main-nav .nav-ul>li>a {
        border-bottom: 1px solid #d86525;
        padding: 0.3125rem 1.37rem 0.3125rem 0.737rem;
    }
    .site-main-nav .top-links {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .site-main-nav .top-links a {
        border-radius: 0;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 50%;
        flex: 1 0 50%;
        width: auto;
        padding: 8px;
        border: 2px solid #ffffff;
        margin: 0;
    }
    .site-main-nav .lang-menu {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 15px 0;
    }
    .site-main-nav .lang-menu a {
        color: #ffffff;
    }
    .site-main-nav .lang-menu a::after {
        background-color: #ffffff;
    }
    .site-main-nav .submenu {
        display: none;
    }
}


/*===Homepage=====*/

.top-wrap {
    background: url('../images/bg-1.jpg') no-repeat center center;
    background-size: cover;
}

.slider-wrap {
    padding: 1.5625rem 0 0 0;
}

.slider .slick-slide {
    border: 5px solid rgba(255, 255, 255, 0.5);
    -webkit-box-shadow: 2px 2px 13px 0px rgba(0, 0, 0, 0.38);
    box-shadow: 2px 2px 13px 0px rgba(0, 0, 0, 0.38);
    overflow: hidden;
}

.slider .slick-slide img {
    width: 100%;
}

.slider .slick-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 1;
    font-size: 2rem;
    color: #ffffff;
    background-color: #fa9b33;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.slider .slick-arrow:hover {
    background-color: #689fe4;
}

.slider .prev {
    left: -60px;
}

.slider .next {
    right: -60px;
}

.slider .slick-dots {
    position: absolute;
    bottom: 10px;
    right: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    z-index: 10;
}

.slider .slick-dots button {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #ffffff;
    border-radius: 50%;
    text-indent: -99999px;
    cursor: pointer;
    border: none;
    margin-right: 20px;
}

.slider .slick-dots button:hover {
    background-color: #efefef;
}

.slider .slick-dots .slick-active button {
    background-color: #3491f6;
}


/*=========Home========*/

#homepage {
    padding-top: 10rem;
    margin-top: -150px;
}

.site-main-content {
    background: #fe8340 url('../images/bg-2.png') no-repeat;
    background-size: contain;
}

.sec-1-heading,
.sec-2-heading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.sec-1-heading img,
.sec-2-heading img {
    margin-bottom: 15px;
}

.sec-1-heading {
    padding: 1rem 0;
}

.albums-carousel .slick-dots {
    margin: 0;
    padding: 1rem 0;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 10;
}

.albums-carousel .slick-dots button {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #ffffff;
    border-radius: 50%;
    text-indent: -99999px;
    cursor: pointer;
    border: none;
    margin-right: 20px;
}

.albums-carousel .slick-dots button:hover {
    background-color: #efefef;
}

.albums-carousel .slick-dots .slick-active button {
    background-color: #3491f6;
}

.albums-carousel .slick-slide {
    padding: 1rem 0.5rem;
}

.latest-news {
    background: #ffffff;
    line-height: 1;
    -webkit-box-shadow: 2px 2px 13px 0px rgba(0, 0, 0, 0.38);
    box-shadow: 2px 2px 13px 0px rgba(0, 0, 0, 0.38);
}

.latest-news {
    padding: 1rem;
}

.latest-news ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.latest-news li {
    position: relative;
    padding: 10px 0 15px 15px;
    border-bottom: 1px solid #50cdff;
    line-height: 1.3;
}

.latest-news li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.latest-news li span {
    display: block;
    font-weight: 700;
    color: #5c9ce5;
}

.latest-news li::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 15px;
    left: 0;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #fd833f;
}

.sec-3-heading {
    position: relative;
    text-align: center;
    z-index: 1;
    margin: 50px 0 30px 0;
}

.sec-3-heading img {
    padding: 0 1rem;
    background-color: #fd833f;
}

.sec-3-heading::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: transparent;
    border-bottom: 4px dashed #ffffff;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    z-index: -1;
}

.prix-card {
    width: 100%;
    height: 540px;
    overflow: hidden;
    padding: 20px 0;
    margin-bottom: 30px;
}

.prix-card .prix-name,
.prix-card .prix-winner {
    width: 100%;
    height: 250px;
    padding: 1.875rem;
}

.prix-card .prix-name {
    background: #ffffff url('../images/red-trophy-icon.png') no-repeat center center;
    color: #000000;
    font-size: 1.2rem;
}

.prix-card .prix-winner a,
.prix-card .prix-winner {
    font-size: 1.2rem;
    color: #ffffff;
}

.prix-card#first {
    border-top-right-radius: 100px;
    border-bottom-left-radius: 100px;
    background: rgba(148, 21, 4, 1);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(148, 21, 4, 1)), color-stop(100%, rgba(240, 77, 62, 1)));
    background: -o-linear-gradient(left, rgba(148, 21, 4, 1) 0%, rgba(240, 77, 62, 1) 100%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(148, 21, 4, 1)), to(rgba(240, 77, 62, 1)));
    background: linear-gradient(to right, rgba(148, 21, 4, 1) 0%, rgba(240, 77, 62, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#941504', endColorstr='#f04d3e', GradientType=1);
}

.prix-card#first .prix-name,
.prix-card#third .prix-name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border-top-right-radius: 100px;
}

.prix-card#second {
    border-top-left-radius: 100px;
    border-bottom-right-radius: 100px;
    background: rgba(252, 186, 2, 1);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252, 186, 2, 1)), color-stop(100%, rgba(254, 222, 52, 1)));
    background: -o-linear-gradient(left, rgba(252, 186, 2, 1) 0%, rgba(254, 222, 52, 1) 100%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(252, 186, 2, 1)), to(rgba(254, 222, 52, 1)));
    background: linear-gradient(to right, rgba(252, 186, 2, 1) 0%, rgba(254, 222, 52, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fcba02', endColorstr='#fede34', GradientType=1);
}

.prix-card#second .prix-name {
    background: #ffffff url('../images/yellow-trophy-icon.png') no-repeat center center;
    border-bottom-right-radius: 100px;
}

.prix-card#third .prix-name {
    background: #ffffff url('../images/green-trophy-icon.png') no-repeat center center;
}

.prix-card#fourth .prix-name {
    background: #ffffff url('../images/purple-trophy-icon.png') no-repeat center center;
}

.prix-card#second .prix-name,
.prix-card#fourth .prix-name {
    border-bottom-right-radius: 100px;
}

.prix-card#second .prix-name,
.prix-card#second .prix-winner,
.prix-card#fourth .prix-name,
.prix-card#fourth .prix-winner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.prix-card#third {
    border-top-right-radius: 100px;
    border-bottom-left-radius: 100px;
    background: rgba(82, 151, 0, 1);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(82, 151, 0, 1)), color-stop(100%, rgba(197, 239, 5, 1)));
    background: -o-linear-gradient(left, rgba(82, 151, 0, 1) 0%, rgba(197, 239, 5, 1) 100%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(82, 151, 0, 1)), to(rgba(197, 239, 5, 1)));
    background: linear-gradient(to right, rgba(82, 151, 0, 1) 0%, rgba(197, 239, 5, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#529700', endColorstr='#c5ef05', GradientType=1);
}

.prix-card#fourth {
    border-top-left-radius: 100px;
    border-bottom-right-radius: 100px;
    background: rgba(125, 3, 138, 1);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(125, 3, 138, 1)), color-stop(100%, rgba(221, 73, 232, 1)));
    background: -o-linear-gradient(left, rgba(125, 3, 138, 1) 0%, rgba(221, 73, 232, 1) 100%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(125, 3, 138, 1)), to(rgba(221, 73, 232, 1)));
    background: linear-gradient(to right, rgba(125, 3, 138, 1) 0%, rgba(221, 73, 232, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7d038a', endColorstr='#dd49e8', GradientType=1);
}


/*=======News=======*/

.news-item {
    background-color: #ffffff;
    margin-bottom: 10px;
    padding: 15px;
    -webkit-box-shadow: 0px 0px 12px -1px rgba(0, 0, 0, 0.21);
    box-shadow: 0px 0px 12px -1px rgba(0, 0, 0, 0.21);
    -webkit-transition: -webkit-box-shadow 300ms ease-in-out;
    transition: -webkit-box-shadow 300ms ease-in-out;
    -o-transition: box-shadow 300ms ease-in-out;
    transition: box-shadow 300ms ease-in-out;
    transition: box-shadow 300ms ease-in-out, -webkit-box-shadow 300ms ease-in-out;
}

.news-item:hover {
    -webkit-box-shadow: 0px 0px 12px -1px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 0px 12px -1px rgba(0, 0, 0, 0.05);
}

.news-item .news-item-thumb {
    position: relative;
    background-color: #222222;
}

.news-item .news-item-thumb img {
    width: 100%;
    opacity: 1;
    -webkit-transition: opacity 300ms ease-in-out;
    -o-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
}

.news-item .news-item-thumb:hover img {
    opacity: 0.5;
}

.news-item h3 {
    font-size: 1.2rem;
}

.news-item span {
    display: block;
    color: #5499e6;
}

.news-item .read-more {
    display: inline-block;
    background-color: #5499e6;
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    line-height: 1;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: background-color 300ms ease-in-out;
    -o-transition: background-color 300ms ease-in-out;
    transition: background-color 300ms ease-in-out;
}

.news-item .read-more:hover {
    background-color: #377dca;
    color: #ffffff;
}

.single-page-wrap {
    background-color: #ffffff;
    border-top: 10px solid #3491f6;
    padding: 1.5rem;
    -webkit-box-shadow: 2px 2px 13px 0px rgba(0, 0, 0, 0.38);
    box-shadow: 2px 2px 13px 0px rgba(0, 0, 0, 0.38);
    margin-bottom: 40px;
}

.single-page-wrap h3 {
    margin-bottom: 0;
}

.single-page-wrap span {
    display: block;
    font-weight: 700;
    color: #5499e6;
    padding-bottom: 10px;
    border-bottom: 2px dashed #fd9f3f;
    /*john 2020-4-13 delete margin-bottom*/
    /*margin-bottom: 25px;*/
}

.single-gallery {
    margin-bottom: 30px;
}

.single-gallery .slick-slide {
    padding: 0 23px;
}

.single-gallery-thumbs {
    position: relative;
    padding: 0 20px;
    margin-bottom: 20px;
}

.single-gallery-thumbs .slick-slide {
    padding: 0 2.5px;
}

.single-gallery img,
.single-gallery-thumbs img {
    width: 100%;
}

.single-gallery .next-arrow,
.single-gallery .prev-arrow,
.single-gallery-thumbs .next-arrow,
.single-gallery-thumbs .prev-arrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    border: none;
    font-size: 30px;
    z-index: 100;
    -webkit-transition: background 300ms ease-in-out;
    -o-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

.single-gallery .next-arrow,
.single-gallery .prev-arrow {
    width: 45px;
    height: 45px;
    background: #fd9f3f;
    color: #ffffff;
    border-radius: 50%;
    border: 3px solid #ffffff;
}

.single-gallery-thumbs .next-arrow,
.single-gallery-thumbs .prev-arrow {
    width: 45px;
    height: 100%;
    background: transparent;
    color: #5f95ce;
    -webkit-transition: color 300ms ease-in-out;
    -o-transition: color 300ms ease-in-out;
    transition: color 300ms ease-in-out;
}

.single-gallery .next-arrow {
    right: 0;
}

.single-gallery .prev-arrow {
    left: 0;
}

.single-gallery-thumbs .next-arrow {
    right: -20px;
}

.single-gallery-thumbs .prev-arrow {
    left: -20px;
}


/*======School-calendar=======*/

#schoolCalendar {
    max-width: 900px;
    margin: 0 auto 30px auto;
}

#schoolCalendar .fc-view {
    background: #e6f3f9;
}

#schoolCalendar .fc-today {
    background: #d8eaf2;
}

#schoolCalendar .fc-toolbar {
    position: relative;
    padding: 5px;
}

#schoolCalendar .fc-toolbar::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #318fff;
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    transform: skew(-30deg);
    z-index: 1;
}

#schoolCalendar .fc-toolbar h2 {
    font-family: 'Mukta', Arial, sans-serif;
    color: #ffffff;
    font-size: 1.5rem;
    position: relative;
    z-index: 3;
}

#schoolCalendar .fc-toolbar .fc-right {
    position: relative;
    z-index: 3;
    margin-right: 50px;
}

#schoolCalendar .fc-toolbar .fc-button {
    background: #ffffff;
    background: -o-linear-gradient(top, #ffffff 0%, #e9e9e9 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e9e9e9));
    background: linear-gradient(to bottom, #ffffff 0%, #e9e9e9 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9e9', GradientType=0);
    border-color: #e7e7e7;
    color: #000000;
    padding: 3px 10px;
}

#schoolCalendar .fc-toolbar .fc-button:hover,
.fc-toolbar .fc-button:active {
    border-color: #e7e7e7;
    color: #000000;
    background: #e9e9e9;
    /* Old browsers */
    background: -o-linear-gradient(top, #e9e9e9 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#ffffff));
    background: linear-gradient(to bottom, #e9e9e9 0%, #ffffff 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#ffffff', GradientType=0);
}

#schoolCalendar .fc-toolbar .fc-button:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

#schoolCalendar .fc-event {
    background: #19b376;
    border: none;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.91rem;
}

.calendar-bottom {
    margin-bottom: 25px;
}

.calendar-bottom ul {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin: 10px 0 0 auto;
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.calendar-bottom ul li {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    font-size: 1.1rem;
    font-weight: 700;
    color: #333333;
    padding: 0 0 0 26px;
}
.calendar-bottom>ul>li>i{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: red;
    vertical-align: middle;
    margin-right: 5px;
    margin-bottom: 2px;
}
/*.calendar-bottom ul li::before {*/
/*    content: '';*/
/*    width: 19px;*/
/*    height: 19px;*/
/*    display: inline-block;*/
/*    position: absolute;*/
/*    top: 2px;*/
/*    left: 0;*/
/*    border: 1px solid #ffffff;*/
/*    background: #006fc7;*/
/*}*/

/*.calendar-bottom ul li:first-child::before {*/
/*    background: #7d15b4;*/
/*}*/

/*.calendar-bottom ul li:nth-child(2)::before {*/
/*    background: #fb361a;*/
/*}*/

/*.calendar-bottom ul li:nth-child(3)::before {*/
/*    background: #18b376;*/
/*}*/

/*.calendar-bottom ul li:last-child::before {*/
/*    background: #cb58b0;*/
/*}*/

#downloadPDF {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    background: #318fff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.4rem;
    padding: .5rem 1rem;
    color: #ffffff;
    margin: 0 0 15px 0;
    -webkit-box-shadow: -7px 10px 9px -6px rgba(0, 0, 0, 0.38);
    box-shadow: -7px 10px 9px -6px rgba(0, 0, 0, 0.38);
    -webkit-transition: -webkit-box-shadow 400ms ease-in-out;
    transition: -webkit-box-shadow 400ms ease-in-out;
    -o-transition: box-shadow 400ms ease-in-out;
    transition: box-shadow 400ms ease-in-out;
    transition: box-shadow 400ms ease-in-out, -webkit-box-shadow 400ms ease-in-out;
    cursor: pointer;
}

#downloadPDF:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.cal-events-list h3 {
    font-size: 2rem;
    color: #ffffff;
}

.event-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 1;
    padding: 1rem;
    background-color: #ffffff;
    border: 3px solid #dd8452;
    margin-bottom: 10px;
}

.event-item .date {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 120px;
    flex: 0 0 120px;
    font-weight: 700;
    font-size: 1.3rem;
    color: #2d5498;
    line-height: 1.4;
    text-align: center;
    border-right: 1px solid #ddf2f6;
}

.event-item .date span {
    display: block;
}

.event-item .content {
    padding: 0 0 0 1rem;
}

.event-item .content h4 a {
    color: #3090fe;
}

.event-item .content h4 a:hover {
    color: #000000;
}

.event-item .content p {
    font-size: 0.9rem;
    margin-bottom: 0;
}


/*======Footer=======*/

.site-footer {
    padding: 2.5rem 0 1.5625rem 0;
    background-color: #315199;
    color: #ffffff;
    line-height: 1;
}

.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.1rem;
}

.site-footer ul li {
    margin-bottom: 17px;
}

.site-footer ul li a {
    color: #ffffff;
}

.site-footer ul li .fas {
    display: inline-block;
    font-size: 1.3rem;
    margin-right: 7px;
}

.site-footer small {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
}

.mapouter {
    position: relative;
    text-align: right;
    height: 200px;
    width: 100%;
}

.gmap_canvas {
    overflow: hidden;
    background: none!important;
    height: 200px;
    width: 100%;
}

@media screen and (min-width:1200px) {
    .calendar-bottom {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .calendar-bottom ul {
        margin-left: auto;
        padding-left: 4rem;
    }
}

@media screen and (min-width:768px) {
    .sidenav-toggle,
    .sidenav-close {
        display: none;
    }
    .sidebar-nav {
        padding: 0 1rem 3rem 1rem;
    }
    .news-item .d-md-flex {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
    .sidebar-nav {
        padding: 7rem 1rem 3rem 1rem;
        position: relative;
        border-top-left-radius: 112px;
        overflow: hidden;
    }
    .sidebar-nav::before {
        content: '';
        display: block;
        position: absolute;
        background: url('../images/sidebar-top.png') no-repeat;
        background-size: cover;
        width: 100%;
        height: 108px;
        top: 0;
        left: 0;
    }
}

@media screen and (min-width:576px) {
    .sec-1-heading,
    .sec-2-heading {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .sec-1-heading img {
        -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        margin: 0 auto;
    }
    .sec-2-heading img {
        -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        margin-bottom: 0;
    }
    .sec-1-heading .btn-more,
    .sec-2-heading .btn-more {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }
    .sec-2-heading .btn-more {
        margin-left: auto;
    }
    .page-subheading {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .page-subheading h3 {
        margin-bottom: 0;
    }
}

@media screen and (max-width:767px) {
    .sidebar-nav {
        position: fixed;
        width: 300px;
        height: 100%;
        top: 0;
        left: -300px;
        z-index: 1000;
        overflow: auto;
        -webkit-box-shadow: 17px 2px 40px 0px rgba(0, 0, 0, 0.19);
        box-shadow: 17px 2px 40px 0px rgba(0, 0, 0, 0.19);
        -webkit-transition: all 610ms cubic-bezier(0, .8, .55, 1);
        -o-transition: all 610ms cubic-bezier(0, .8, .55, 1);
        transition: all 610ms cubic-bezier(0, .8, .55, 1);
    }
    .sidebar-nav.menu-active {
        left: 0;
    }
    .sidebar-nav>ul {
        padding-top: 40px;
    }
    .sidenav-close {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
    }
}





/*webpagedesc 內容css*/
.content_detail .content_item { margin-bottom:12px; }
.content_detail .content_subtitle { font-size:23px; color:#048ed6; font-weight:700; margin-bottom:16px; }

.content_detail .content_img { font-size:0; margin:0 -8px; display:block; }
.content_detail .content_img .col_1,
.content_detail .content_img .col_2,
.content_detail .content_img .col_4 { display:inline-block; vertical-align:top; padding:0 8px 10px 8px; box-sizing:border-box; text-align: center; }
.content_detail .content_img .col_1 img,
.content_detail .content_img .col_2 img,
.content_detail .content_img .col_4 img { max-width:100%; height:auto; box-shadow:2px 2px 5px rgba(0,0,0,0.3); }
.content_detail .content_img .col_1 { width:100%; }
.content_detail .content_img .col_2 { width:50%; }
.content_detail .content_img .col_4 { width:25%; }

.content_detail .content_desc { line-height: 1.5em; }
.content_detail .content_desc iframe { max-width:100%; box-sizing:border-box; }
.content_detail .content_desc img { max-width:100%; box-sizing:border-box; }
.content_detail .content_desc ul,
.content_detail .content_desc ol { display:block; xmargin:1em 0; xpadding-left:40px; padding-left:20px; margin: 0; }
.content_detail .content_desc ul { list-style-type:disc; }
.content_detail .content_desc ul ul { list-style-type:circle; margin-top: 10px; }
.content_detail .content_desc ol { list-style-type:decimal; }
.content_detail .content_desc li { padding-bottom: 6px; }
.content_detail .content_download_file_list { display: table; }
.content_detail .content_download_file_list .content_download_file_icon { display: table-cell; vertical-align: middle; }
.content_detail .content_download_file_list .content_download_file { display: table-cell; vertical-align: middle; padding-left: 10px; }
.content_detail .content_download_file_list .content_download_file a { color:#048ed6;  }
.content_detail .content_download_file_list .content_download_file a:hover { color:#3256a0; }
.content_detail h2{
    padding-bottom: 10px;
    border-bottom: 2px dashed #3490f5;
}
/*webpagedesc 內容結束css*/
.wrapPage .select_area { display:inline-block; vertical-align:top; width:100%; max-width:120px; vertical-align:top; background-color:#ffffff; border-radius:2px; position:relative; cursor:pointer; }
.wrapPage .select_area:before { position:absolute; right:15px; top:50%; content:""; width:0; height:0; border-style:solid; border-width:7px 6px 0 6px; border-color:#3256a0 transparent transparent transparent; transform:translateY(-50%); }
.wrapPage .select_area select {
    width:100%;
    height:32px;
    padding-left:10px;
    padding-right:40px;
    background-color:transparent;
    /*border:1px solid #cccccc; */
    border:none;
    box-sizing:border-box;
    border-radius:2px; position:relative; font-size:13px; color:#000000; -webkit-appearance:none; appearance:none; outline:none; }

.wrapPage .multipage { padding-top:34px; margin:0 -7px; font-size:20px; text-align:right; clear:both; }
.wrapPage .multipage a {
    display:inline-block;
    zoom:1; *display:inline;
    vertical-align:top;
    margin:0 2px;
    text-align:center;

    font-size:14px; color:#000000; transition:all 0.2s ease; }
.wrapPage .multipage a.row,
.wrapPage .multipage a.back,
.wrapPage .multipage a.next { width:26px; margin:0 7px; background-color:#797979; color:#ffffff; }
.wrapPage .multipage a.onpage,
    /*.wrapPage .multipage a:hover { background-color:#048ed6; color:#ffffff; }*/
.wrapPage .multipage a:hover { background-color: #007bff;color: #ffffff; }


.wrapPage .multipage .select_area { display:none; }

.wrapPage .multipage li.active a{
    background-color:#007bff; color:#ffffff;
}
.wrapPage .multipage ul li i{

    color: #ffffff;
}
.wrapPage .multipage ul l i{

    color: #ffffff;
}
@media screen and (max-width: 980px){
    /* desktop to ipad */


    .wrapPage .multipage { text-align:center; }
    .wrapPage .multipage a { display:none; }
    .wrapPage .multipage .select_area { display:inline-block; }
}





.current a{
    color: #fc316e;
}

.single-page-wrap .content p{
    margin-bottom: 0;
}
/*.webpage-title{*/
/*    display: block;*/
/*    width: 100px;*/
/*    height: 100px;*/
/*    background-color: #f60;*/
/*    text-align: center;*/
/*    line-height: 100px;*/
/*    color: #fff;*/
/*    font-size: 20px;*/
/*    border-top-right-radius: 100px;*/
/*    border-top-left-radius: 100px;*/
/*    border-bottom-right-radius: 100px*/
/*}*/
.album-item .index-h3{
    /*height: 58px;*/
    overflow: hidden;
}

@media (min-width: 1200px){
    .container {
        max-width: 1340px;
    }
}