/*---------------------------------------
     css style for anni home page
              Web version
---------------------------------------*/
html {
    height: initial
}

body {
    position: initial;
    min-height: initial
}

body::after {
    display: none
}

.main-footer {
    position: initial;
    bottom: initial
}

nav.anni-navbar {
    background: rgba(255, 255, 255, .9);
    border-bottom: 1px solid #fff!important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    color: #000
}

nav.anni-navbar div.navbar-header a.navbar-brand img {
    width: 448px;
    height: 48px;
    color: #404041
}

.item a {
	position: relative;
    margin: 8px auto;
    overflow: hidden;
}

.item a img {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	width: auto
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.content-wrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    height: 100%
}

.content-wrapper section.carousel-banner {
    width: 100%;
    height: 100%;
    margin-bottom:  2%
}

.content-wrapper section.carousel-banner .carousel {
    position: relative;
    height: 760px
}

.content-wrapper section.carousel-banner .carousel .carousel-inner {
    position: relative;
    width: 100%;
    height: 760px;
    overflow: hidden
}

.content-wrapper section.carousel-banner .carousel .carousel-inner>.item {
    position: initial
}

.content-wrapper section.carousel-banner .carousel .carousel-inner>.item a {
    display: block;
    position: relative;
    height: 760px
}

.content-wrapper section.carousel-banner .carousel .carousel-inner>.item .black-caption {
    top: initial;
    bottom: 0;
    height: auto;
    padding-bottom: 20px
}

.content-wrapper section.carousel-banner .carousel .carousel-inner>.item .black-caption p {
    margin-bottom: 0
}

.content-wrapper section.dual-column {
    width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    margin: 0 auto 0;
    position: relative
}

.content-wrapper section.dual-column a {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 120px;
    position: relative
}

.content-wrapper section.dual-column div.quiz a {
    justify-content: flex-end
}

.content-wrapper section.dual-column div {
    width: 45%;
    padding: 10px 0;
    display: inline-flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative
}

.content-wrapper section.dual-column div.reminder {
    justify-content: flex-start
}

.content-wrapper section.dual-column img {
    width: 79px;
    margin-right: 10px
}

.content-wrapper section.dual-column nav {
    width: 65%;
    display: flex;
    flex-wrap: wrap;
    height: auto
}

.content-wrapper section.dual-column div.reminder nav {
    width: 73%
}

.content-wrapper section.dual-column nav.text {
    position: relative
}

.content-wrapper section.dual-column div.quiz nav.text {
    width: 55%
}

.content-wrapper section.dual-column nav span {
    width: 100%;
    height: 50%
}

.content-wrapper section.dual-column nav span.title {
    font-size: 28px;
    line-height: 37px;
    letter-spacing: .02em;
    height: auto;
    color: #ce9b6e
}

.content-wrapper section.dual-column nav span.description {
    font-weight: 400;
    font-size: 20px;
    line-height: 29px;
    letter-spacing: .02em;
    color: #000;
    height: auto
}

.content-wrapper section.dual-column i {
    border: solid #000;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    width: 16px;
    height: 16px
}

.content-wrapper section.dual-column i.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg)
}

.content-wrapper section.dual-column div.quiz i.right {
    margin-right: 10px
}

.content-wrapper section.dual-column hr.vr {
    width: 1px;
    height: 100%;
    background: #000;
    margin: 0 20px
}

.content-wrapper section.category-column {
    width: 100%;
    height: 100%
}

.content-wrapper section.category-column nav.main-category {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0 60px 20px 60px;
    cursor: pointer
}

.content-wrapper section.category-column nav.main-category a {
    width: 100%
}

.content-wrapper section.category-column nav.main-category img {
    width: 100%;
    height: 100%
}

.content-wrapper section.category-column nav.main-category span.title {
    position: absolute;
    right: 50px;
    top: 50px;
    text-transform: capitalize;
    font-weight: 900;
    font-size: 36px;
    text-align: center;
    letter-spacing: .02em;
    color: #231f20
}

.content-wrapper section.articles-column {
    width: 100%;
    height: 100%
}

.content-wrapper section.articles-column nav {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px 0;
    align-items: flex-start
}

.content-wrapper section.articles-column nav.title {
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    letter-spacing: .2em;
    color: #000
}

.content-wrapper section.articles-column nav div.articles-box {
    width: calc((100% - 180px)/ 4);
    height: 250px;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    margin: 0 10px;
    cursor: pointer;
    max-width: 300px;
    overflow: hidden
}

.content-wrapper section.articles-column nav div.articles-box a {
    text-align: center
}

.content-wrapper section.articles-column nav div.articles-box span.image {
    height: 150px;
    display: flex;
    position: relative;
    width: 100%;
    margin-bottom: 15px
}

.content-wrapper section.articles-column nav div.articles-box span.image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.content-wrapper section.articles-column nav div.articles-box span.image p {
    position: absolute;
    bottom: 0;
    left: 0;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    text-align: center;
    letter-spacing: .02em;
    color: #fff;
    background: #000;
    width: 100px;
    height: 25px;
    margin: unset
}

.content-wrapper section.articles-column nav div.articles-box span.description {
    display: block;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    letter-spacing: .02em;
    width: 106%;
    height: 80px;
    overflow-y: auto;
    padding-left: 26px;
    padding-right: 36px;
    color: #000
}

.carousel .item img {
    width: 100%
}

.black-caption {
    width: 628px;
    height: 154px;
    left: 0;
    top: 606px;
    font-family: Noto Sans TC;
    font-style: normal;
    font-weight: 700;
    font-size: 34px;
    line-height: 49px;
    letter-spacing: .02em;
    color: #fff;
    background: rgba(0, 0, 0, .8)
}

.bar-shape {
    z-index: 5;
    display: flex;
    justify-content: center;
    list-style: none;
    bottom: -50px
}

.bar-shape li {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 42px;
    height: 6px;
    margin: unset;
    text-indent: -999px;
    background-color: #e5e5e5;
    display: inline-block;
    border: unset;
    border-radius: unset;
    cursor: pointer;
    margin-right: 7px
}

.bar-shape .active {
    background-color: #000;
    width: 42px;
    height: 6px;
    margin: unset;
    margin-right: 7px
}

.bar-shape li::before {
    position: absolute;
    top: -10px;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 10px;
    content: ""
}

.bar-shape li::after {
    position: absolute;
    bottom: -10px;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 10px;
    content: ""
}

#login-notification-popup {
    margin-top: 20px!important
}

#login-notification-popup .login-notification-popup-icon img {
    margin: 20px 0 0 0
}
.back_to_top_btn_wrapper {
	position: relative;
}

.back_to_top_btn_wrapper #back-to-top {
	position: fixed;
	right: 25px;
	bottom: 50px;
	background: #D4AD83;
	display: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	-webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, .25);
	-moz-box-shadow: 0 3px 4px rgba(0, 0, 0, .25);
	box-shadow: 0 3px 4px rgba(0, 0, 0, .25);
	z-index: 9997;
}

.back_to_top_btn_wrapper #back-to-top img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* @media (max-width:1300px) {
    html,
    nav.anni-navbar {
        width: 1300px
    }
} */
nav.anni-navbar.fixed-top {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1030;
	background: rgba(255, 255, 255, .9);
	border-bottom: 1px solid #fff !important;
}
.margin-nav-top {
	margin-top: 90px !important;
}

/* 2021 - index slider enhancement */
nav.anni-navbar.fixed-top {margin:0}
.content-wrapper {margin:0; margin-top:89px}
.content-wrapper section.carousel-banner .carousel{height: 100%}
.content-wrapper section.carousel-banner .carousel .carousel-inner{ height: 100%; max-height: 500px; margin: 0 auto; width: 100%;}
.content-wrapper section.carousel-banner .carousel .carousel-inner>.item a {all:unset; height:unset; overflow:unset}
.content-wrapper section.carousel-banner {height:500px; margin-bottom:10px}
.item a {margin:0 auto}
.item a img {top:unset; left:unset; transform:unset}
.carousel-inner>.item>a>img {height: 500px; object-fit: cover; object-position: center;}

.bar-shape{right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding-left:0;margin:0 auto 20px;list-style:none}
.bar-shape li{background:#eee5d8;border-radius:50px;width:6px;height:6px;border:none;margin-right:4px;margin-left:4px;opacity:.7}
.bar-shape li.active{width:20px;height:6px;background:#d4ad83;border-radius:50px;margin-right:4px;margin-left:4px;opacity:1;transition:all .3s}

.bar-shape li::before, .bar-shape li::after {all:unset}