@charset "UTF-8";

header {
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
}

header .hdGroup {
    height: 40px;
    position: relative;
}

header.kidsHeader .hdGroup{
    display: inline-flex;
    align-items: center;
}

header .hdGroup #ham,
header .hdGroup #logo {
    display: inline-block;
    vertical-align: middle;
}

header .hdGroup #ham {
    height: 40px;
    width: 40px;
    width: auto;
    margin: 0 7px;
}

header .hdGroup .logoWrap{
    display: inline-block;
}

header .hdGroup #logo {
    height: 22px;
    width: auto;
    position: relative;
    top: 2px;
}

header .hdGroup .linkArea {
    float: right;
}

header .linkArea .upgrade {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    height: 26px;
    padding: 7px 10px 7px 8px;
}
header nav .memberArea .memberAreaGroup::-webkit-scrollbar, header nav .historyArea .historyAreaGroup::-webkit-scrollbar, header nav::-webkit-scrollbar {
    width: 4px;
}

header nav .memberArea .memberAreaGroup::-webkit-scrollbar-track, 
header nav .historyArea .historyAreaGroup::-webkit-scrollbar-track  {
    background: transparent;
}
header nav::-webkit-scrollbar-track{
    background: var(--color-gray-15);
}

header nav .memberArea .memberAreaGroup::-webkit-scrollbar-thumb, header nav .historyArea .historyAreaGroup::-webkit-scrollbar-thumb, header nav::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-3);
    border-radius: 4px;
    /*border: 3px solid orange;*/
}
header .linkArea .upgrade .btn {
    height: 26px;
    line-height: 25px;
    font-size: 12px;
    padding: 0 12px 1px 12px;
    min-width: 80px;
}

header .hdGroup .searchBox,
header .hdGroup .linkService {
    display: inline-block;
    vertical-align: middle;
}

header .depart {
    height: 44px;
    background-color: rgba(13, 13, 13, 0.9);
    overflow-x: scroll;
    width: 100%;
}

header .depart::-webkit-scrollbar {
    display: none;
    /*Safari and Chrome*/
}

header .depart ul {
    padding: 0;
}

header .depart ul li {
    line-height: 44px;
    display: inline-block;
    padding: 0 8px;
    word-break: keep-all;
}

header .depart ul li h1{
    line-height: inherit;
}

header .depart ul li a {
    display: block;
    font-size: 15px;
    line-height: 44px;
}

header .depart ul li.liveBtn {}

header .depart ul li.liveBtn .livePanel {
    position: absolute;
    height: 20px;
    background-color: var(--color-yellow-1);
    width: 100vw;
    left: 0;
    line-height: 20px;
    cursor: pointer;
    display: block;
    overflow: hidden;
}

header .depart ul li.liveBtn .livePanel .liveIcon,
header .depart ul li.liveBtn .livePanel .liveVideo {
    display: inline-block;
    vertical-align: top;
}

header .depart ul li.liveBtn .livePanel .liveIcon {
    background-color: var(--color-black);
    border-radius: 0 15px 15px 0;
    padding: 0 8px;
}

header .depart ul li.liveBtn .livePanel .liveIcon .liveIconBox {
    height: 20px;
}

header .depart ul li.liveBtn .livePanel .liveIcon span,
header .depart ul li.liveBtn .livePanel .liveIcon p {
    display: inline-block;
}

header .depart ul li.liveBtn .livePanel .liveIcon span {
    width: 8px;
    height: 8px;
    border-radius: 5px;
    background-color: var(--color-orange-1);
    margin-right: 4px;
}

header .depart ul li.liveBtn .livePanel .liveVideo img {
    display: none;
}

header .depart ul li.liveBtn .livePanel .liveVideo a {
    padding: 0px;
}

header .depart ul li.liveBtn .livePanel .liveVideo .liveText {
    color: var(--color-black);
}

header .depart ul li.liveBtn .livePanel .liveVideo .liveText .title,
header .depart ul li.liveBtn .livePanel .liveVideo .liveText p {
    display: inline-block;
    line-height: 20px;
    vertical-align: top;
}

header .depart .searchBox {
    display: none;
}

header nav {
    position: absolute;
    top: 40px;
    left: -260px;
    background-color: var(--color-gray-2);
    z-index: 999;
    width: 260px;
    height: calc(100vh - 40px);
    transition: left .5s ease-in-out;
}

header nav.active {
    left: 0px;
    position: fixed;
    bottom:0;
    overflow: auto;
}

header nav ul {
    /*border-bottom: 0.75px solid var(--color-gray-6);*/
}

header nav ul li {
    /*margin: 12px 16px 12px 12px;*/
}
.loginBlockInside{
    padding: 40px 20px;
}
.navBox .loginBlock .news{
    border: none;
    border-top: 1px solid var(--color-gray-3);
    font-size: 14px;
}
@media screen and (min-width: 1024px){
    .loginBlock{
        display: none;
    }
}
.loginIntro{
    font-size: 14px;
    line-height: 20.72px;
    color: var(--color-gray-6);
    margin-bottom: 12px;
    font-weight: 400;
}
header nav .memberArea ul li {
    /*margin: 8px 16px 8px 12px;*/
}

header nav .padMobi li{
    /*margin: 10px 16px;*/
    font-size: 15px;
    /*line-height: 21px;*/
}

header nav ul.news li a, header nav ul.member li a, header nav ul.history li a {
    display: block;
    padding: 10px 20px;
}

header nav .memberArea ul li .icon,
header nav .memberArea ul li p {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
}

header nav ul li p {
    font-size: 12px;
    line-height: 16px;
    color: var(--color-gray-7);
}

header nav ul li .icon {
    height: 20px;
    width: auto;
}

header nav ul li span {
    float: right;
    width: 36px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 14px;
    font-size: 12px;
    margin-top: 3px;
    color: var(--color-white);
}

header nav ul.news span {
    background-color: var(--color-orange-1);
}
header nav ul.history{
    margin-top:10px;
    border-top: 1px solid var(--color-gray-3);
    margin-bottom: 10px;
}
header nav ul.history span {
    background-color: var(--color-black);
}

header nav .navBox {
    position: relative;
    /*height: 100%;*/
    /*overflow: auto;*/
}
@media screen and (min-width: 1024px){
    header nav .navBox{
        overflow: visible;
    }
}
header nav .logout {
    position: absolute;
    left: calc(50% - 1em);
    bottom: 16px;
}

header nav .linkService {
    display: none;
}

header .blogAreaGroup{
    display: none;
}

header #navOverlay {
    background-color: rgba(27, 27, 27, 0.7);
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 99;
    height: calc(100vh - 40px);
    width: 100%;
    display: none;
    transition: all .5s ease-in-out;
}

header #navOverlay.active {
    display: block;
    position: fixed;
}

header .linkService {
    line-height: 40px;
    margin-right: 15px;
}

header .linkService li {
    margin-left: 15px;
    display: inline-block;
}

@media screen and (min-width: 320px) {
    header .depart ul li.active {
        border-bottom: 3px solid var(--color-orange-1);
        line-height: 41px;
        height: 41px;
    }
    header .depart ul {
        word-break: keep-all;
        white-space: nowrap;
    }
    header .depart ul.mainMenu > li.menu-overflow {
        display: none;
    }
}

@media screen and (max-width: 320px) {
    header .hdGroup #ham {
        margin: 0;
    }
    header .linkService li {
        margin-left: 4px;
    }
}

header .searchBox {
    width: 40px;
    height: 32px;
    background: var(--color-gray-25);
    border-radius: 90px;
    text-align: center;
    vertical-align: middle;
    transition: all .25s;
}

header .searchBox:hover {
    background: var(--color-gray-2);
}

header .search {
    height: 24px;
    width: 24px;
    margin: 4px auto;
    display: inline-block;
}

header .searchPanel {
    position: fixed;
    background-color: rgba(var(--color-rgb-black), 0.88);
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    padding: 16px;
    box-sizing: border-box;
    display: none;
}

header .searchPanel #searchCloseBtn {
    width: 20px;
    height: 20px;
    float: right;
    clear: both;
    margin-bottom: 35px
}

header .searchPanel #searchForm {
    margin-top: 56px;
}

header .searchPanel #searchBar {
    border: 1px solid var(--color-white);
    border-radius: 20px;
}

header .searchPanel #searchInput,
header .searchPanel #searchButton {
    height: 40px;
    background-color: transparent;
    display: inline-block;
    vertical-align: middle;
    border: none;
}

header .searchPanel #searchInput {
    padding: 10px 16px;
    color: var(--color-white);
    width: calc(100% - 64px);
    box-sizing: border-box;
    margin-right: -6px;
}

header .searchPanel #searchButton {
    padding: 6px 16px;
}

header .searchPanel #searchButton img {
    width: 30px;
}

header .searchPanel .presetText {
    padding: 0 10px;
}

header .searchPanel .presetText h4 {
    color: var(--color-gray-6);
    margin: 24px 10px 4px;
}

header .searchPanel .presetText p {}

header .searchPanel .presetText span {
    margin: 6px 10px;
    display: inline-block;
}

header .searchPanel .searchText {
    padding: 12px 20px 0;
}

header .searchPanel .searchText p {
    margin: 24px auto auto;
}

main {
    margin-top: 84px;
}
main.liveMargin{
    margin-top: 104px;
}
/* 搜尋 - 你可能也喜歡 */
.mainRecommend{
    background-color: var(--color-gray-2);
}
.popUp.open {}

.popUp.open .popUpBox {
    background: none;
    box-shadow: none;
    padding: 0;
    top: calc(50vh - 300px);
    border-radius: 16px;
    overflow: hidden;
}

.popUp.open img.openBanner {
    width: 100%;
    /*display: block;*/
}

.popUp.open .popUpBox content {
    background: var(--color-gray-15);
    padding: 20px;
    margin-bottom: 0;
}

.popUp.open .popUpBox content .btnBox {
    margin: 16px -20px 0;
}


/* article#keyView {
    margin-bottom: 20px;
} */

/* KeyView Slider舊版 start */
article#keyView .flexslider {
    position: relative;
}

article#keyView .flexslider ol.flex-control-paging {
    position: absolute;
    bottom: 10px;
    right: 0;
    left: 0;
    text-align: center;
    line-height: 4px;
    /*left: calc(50% - 32px);*/
}

article#keyView .flexslider ol.flex-control-paging li {
    display: inline-block;
    font-size: 0;
    vertical-align: top;
}

article#keyView .flexslider ol.flex-control-paging li a {
    display: block;
    width: 14px;
    height: 4px;
    border-radius: 5px;
    margin: 0 1px;
    background-color: rgba(153, 153, 153, 0.5);
    border: 1px solid var(--color-gray-7);
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

article#keyView .flexslider ol.flex-control-paging li a.flex-active {
    background-color: rgba(255, 108, 0, 0.5);
    border: 1px solid var(--color-orange-1);
}

article#keyView .flexslider ul.flex-direction-nav {
    display: none;
}

article#keyView .flexslider .slides li .banner.mobile {
    display: block;
}

article#keyView .flexslider .slides li .banner.padWide {
    display: none;
}

article#keyView .slides img {
    width: 100%;
    height: auto;
    display: block;
}
/* KeyView Slider舊版 end */

/* KeyView Slider 新版 start */
article#keyView {
    width: 100%;
    position: relative;
    padding-bottom: 31.98%;
}

article#keyView .keyView-slider {
    width: 100%;
    position: absolute;
    padding-bottom: 31.98%;
    top: 0;
    left: 0;
}

article#keyView .keyView-slider .swiper-wrapper {
    position: absolute;
}

article#keyView .keyView-slider .swiper-wrapper .swiper-slide figure {
    width: 100%;
    position: relative;
}

article#keyView .keyView-slider .swiper-wrapper .swiper-slide figcaption {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 12px 0 24px;
    z-index: 1;
    background: linear-gradient(360deg, rgba(var(--color-rgb-black), 0.6) 0%, rgba(var(--color-rgb-black), 0.547556) 11.29%, rgba(var(--color-rgb-black), 0.499302) 20.73%, rgba(var(--color-rgb-black), 0.454681) 28.59%, rgba(var(--color-rgb-black), 0.413138) 35.16%, rgba(var(--color-rgb-black), 0.374115) 40.7%, rgba(var(--color-rgb-black), 0.337055) 45.48%, rgba(var(--color-rgb-black), 0.301402) 49.79%, rgba(var(--color-rgb-black), 0.266598) 53.89%, rgba(var(--color-rgb-black), 0.232088) 58.07%, rgba(var(--color-rgb-black), 0.197314) 62.59%, rgba(var(--color-rgb-black), 0.161719) 67.73%, rgba(var(--color-rgb-black), 0.124747) 73.77%, rgba(var(--color-rgb-black), 0.0858413) 80.97%, rgba(var(--color-rgb-black), 0.0444444) 89.62%, rgba(var(--color-rgb-black), 0) 99.99%);
}

article#keyView .keyView-slider .swiper-wrapper .swiper-slide figcaption p{
    
    width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-white);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-shadow: 0px 0px 10px rgba(var(--color-rgb-black), 0.3);
    padding-left: 16px;
}

article#keyView .keyView-slider .keyView-swiper-pagination {
    position: absolute;
    bottom: 12px;
    left: 16px;
    text-align: left;
    line-height: 0;
    z-index: 1;
}

article#keyView .keyView-slider .keyView-swiper-pagination span {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin-left: 0;
    margin-right: 3px;
    background-color: var(--color-white);
    opacity: .5;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

article#keyView .keyView-slider .keyView-swiper-pagination span.swiper-pagination-bullet-active {
    background-color: var(--color-orange-1);
    opacity: 1;
}

article#keyView .keyView-slider .keyView-swiper-navigation {
    display: none;
    line-height: 0;
    font-size: 0;
    position: absolute;
    bottom: 16px;
    right: 46px;
    z-index: 1;
}

article#keyView .keyView-slider .keyView-swiper-navigation div {
    width: 20px;
    height: 20px;
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    border-radius: 50%;
    transition: all .3s ease-in;
    cursor: pointer;
}

article#keyView .keyView-slider .keyView-swiper-navigation div img{
    width: 20px;
    height: 20px;
}

article#keyView .keyView-slider .keyView-swiper-navigation div.keyView-swiper-prev {
    margin-right: 12px;
}

article#keyView .keyView-slider .keyView-swiper-navigation div.keyView-swiper-next img{
    transform: rotate(180deg);
}

article#keyView .swiper-wrapper picture, article#keyView .swiper-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (min-width: 768px){
    article#keyView .keyView-slider .swiper-wrapper .swiper-slide figcaption {
        padding: 8px 0 48px;
    }

    article#keyView .keyView-slider .swiper-wrapper .swiper-slide figcaption p{
        width: calc(100% - 92px);
        font-size: 18px;
        line-height: 26px;
        padding-left: 46px;
    }

    article#keyView .keyView-slider .keyView-swiper-pagination {
        position: absolute;
        bottom: 26px;
        left: 46px;
        text-align: left;
    }

    article#keyView .keyView-slider .keyView-swiper-pagination span {
        width: 8px;
        height: 8px;
        margin-right: 6px;
    }
    article#keyView .keyView-slider .keyView-swiper-navigation {
        display: flex;
    }

}
@media screen and (min-width: 1024px){
    article#keyView .keyView-slider .swiper-wrapper .swiper-slide figcaption {
        padding: 16px 0 60px;
    }

    article#keyView .keyView-slider .swiper-wrapper .swiper-slide figcaption p{
        /* width: calc(100% - 120px); */
        font-size: 24px;
        line-height: 35px;
        /* padding-left: 60px; */
    }

    article#keyView .keyView-slider .keyView-swiper-pagination {
        bottom: 34px;
        /* left: 60px; */
    }

    article#keyView .keyView-slider .keyView-swiper-pagination span {
        margin-right: 8px;
    }

    article#keyView .keyView-slider .keyView-swiper-navigation {
        bottom: 20px;
        /* right: 60px; */
    }

    article#keyView .keyView-slider .keyView-swiper-navigation div {
        padding: 8px;
    }

    article#keyView .keyView-slider .keyView-swiper-navigation div.keyView-swiper-prev {
        margin-right: 16px;
    }
}

@media screen and (min-width: 1200px){
    article#keyView .keyView-slider .keyView-swiper-navigation div:hover {
        background-color: rgba(var(--color-rgb-white), 0.3);
        transition: all .3s ease-in;
    }
}

@media screen and (min-width: 1440px){
    article#keyView .keyView-slider .swiper-wrapper .swiper-slide figcaption p{
        width: calc(100% - 120px);
        padding-left: 60px;
    }
    article#keyView .keyView-slider .keyView-swiper-pagination {
        left: 60px;
    }
    article#keyView .keyView-slider .keyView-swiper-navigation {
        bottom: 20px;
        right: 60px;
    }
}

/* KeyView Slider 新版 end */

article.banner {
    margin: 32px 16px;
}

article.banner img {
    width: 100%;
    height: auto;
    display: block;
}

#ftHeaderLine {
    text-align: center;
    margin: 88px 24px 24px;
    color: var(--color-gray-7);
}

#ftHeaderLine h1 {
    margin-bottom: 12px;
    font-size: 28px;
    line-height: 39px;
}

#ftHeaderLine h3 {
    font-size: 15px;
    line-height: 21px;
}
main .ftDescription{
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: var(--color-gray-7);
    background: linear-gradient(90deg, var(--color-gray-1) 0%, var(--color-gray-175) 51.56%, var(--color-gray-1) 100%);
    padding: 16px;
}
main .ftDescription p{
    max-width: 1100px;
    margin: 0 auto;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: var(--color-gray-7);
    text-align: justify;
}

@media screen and (min-width: 768px) {
    main .ftDescription{
        font-size: 14px;
        line-height: 21px;
        padding: 16px 46px;
    }
    main .ftDescription,
    main .ftDescription p{
        font-size: 14px;
        line-height: 21px;
    }
}

@media screen and (min-width: 1024px) {
    main .ftDescription p{
        text-align: center;
    }
}

header .depart ul .dropDownContent li.menu.active {
    color: var(--color-orange-1);
    border-bottom: none;
}
/* 簡易版header */
header.simpleHeader{
	border-bottom: none;
}
header.simpleHeader .hdGroup > a{
	height: 40px;
	display: inline-block;
}
header.simpleHeader .hdGroup #logo{
	top: 8px;
	left: 16px;
	position: relative;
}

@media screen and (min-width: 1024px) {
    header nav .navBox {
        height: auto;
        padding-bottom: 50px;
    }
    header .searchPanel {
        padding: 45px;
    }
    header .searchPanel #searchCloseBtn {
        width: 30px;
        height: 30px;
        margin-bottom: 45px
    }
    header .searchPanel #searchBar {
        border-radius: 40px;
    }
    header .searchPanel #searchForm {
        margin-top: 120px;
    }
    header .searchPanel #searchInput,
    header .searchPanel #searchButton {
        height: 65px;
    }
    header .searchPanel #searchInput {
        padding: 20px 32px;
        height: 65px;
        width: calc(100% - 78px);
    }
    header .searchPanel #searchButton {
        padding: 6px 16px;
    }
    header .searchPanel #searchButton img {
        width: 45px;
    }
    header .searchPanel .presetText {
        padding: 0 20px;
    }
    header .searchPanel .presetText h4 {
        color: var(--color-gray-6);
        margin: 24px 10px 4px;
    }
    header .searchPanel .presetText p {}
    header .searchPanel .presetText span {
        margin: 4px 10px;
        display: inline-block;
    }
    header .searchPanel .searchText {
        padding: 12px 30px 0;
    }
    header .searchPanel .searchText p {
        margin: 20px auto auto;
    }
    .popUp.open .popUpBox {
        width: 408px;
        left: calc(50% - 204px);
    }
    .popUp.open .popUpBox content {
        padding: 30px;
    }
    .popUp.open .popUpBox content .btnBox {
        margin: 24px -30px 0;
    }
    /* article#keyView {
        margin-bottom: 24px;
    } */
    article#keyView .flexslider ol.flex-control-paging {
        line-height: 6px;
    }
    article#keyView .flexslider ol.flex-control-paging li a {
        width: 50px;
        height: 6px;
        margin: 0 2px;
    }
    article.banner {
        margin: 44px 16px;
    }
    article#keyView .flexslider .slides li .banner.mobile {
        display: none;
    }
    article#keyView .flexslider .slides li .banner.padWide {
        display: block;
    }
}

@media screen and (max-width: 1024px) {
    header nav .upgrade {
        display: none;
    }
}
.dropdown-more{
    display: flex;
    padding: 0px 8px;
    height: 24px;
}
.dropdown-more img{
    width: 10px;
}
.dropdown-more.active img{
    transform: rotate(180deg);
}
.drop-more-content{
    display: none;
}
.memberAreaGroup .memberUser{
    padding: 24px 20px;
    background: var(--color-gray-1);
}
.memberUser>.d-flex{
    margin-bottom: 12px;
    align-items: center;
}
.memberUser figure{
    width: 80px;
    height: 80px;
    margin-right: 16px;
    flex-shrink: 0;
}
.memberUserInfo{
    width: 144px;
}
.memberUserInfo .userName{
    color: var(--color-white);
    font-weight: 700;
    font-size: 19px;
    line-height: 28.12px;
}
.memberUserInfo div{
    color: var(--color-gray-6);
    font-size: 14px;
    line-height: 20.72px;
}
.navBox .btn{
    color: var(--color-white);
    border: 1px solid var(--color-white);
    padding: 5px 0;
}
.navBox .btn:hover{
    background: var(--color-white);
    color: var(--color-black);
}
.navBox .btn.btn-primary{
    border: 1px solid var(--color-orange-1);
    background: var(--color-orange-1);
}
.navBox .btn.btn-primary:hover{
    border: 1px solid var(--color-orange-2);
    background: var(--color-orange-2);
}

@media screen and (max-width: 1024px) {
    .navBox .btn{
        padding: 3px 0;
    }
    .memberUser .padMobi{
        padding-top: 12px;
    }
    .subAccount .btn{
        width: calc(50% - 6px);
    }
    .subAccount .btn+.btn{
        margin-left: 12px;
    }
    .mobiTitle{
        font-size: 14px;
        font-weight: 400;
        padding: 9px 20px;
        color: var(--color-gray-6);
    }
    header nav ul.history{
        border-top: none;
    }
    .historyAreaGroup .history, .navBox .news{
        border-bottom: 1px solid var(--color-gray-3);
    }
    header nav ul.history{
        margin-top:0;
    }
}
.loginBox{
    display: none;
}


@media screen and (min-width: 1024px) {
    .loginBox{
        display: block;
    }
    header {
        height: 62px;
    }
    header .headerBox {
        position: relative;
    }
    header.colorBK {
        background: var(--color-black);
        border-bottom: 1px solid rgba(56, 56, 56, 0.8);
    }

    header.colorBK ~ main{
        padding-top: 62px;
    }
    header.colorBK ~ div main{
        padding-top: 62px;
    }
    header.colorGR {
        background: linear-gradient(to bottom, rgba(var(--color-rgb-black), 1) 0%, rgba(var(--color-rgb-black), 0) 100%);
    }
    header .hdGroup #ham,
    header .hdGroup .linkArea {
        display: none;
    }
    header .hdGroup,
    header .depart,
    header nav {
        display: inline-block;
        vertical-align: middle;
    }
    header nav {
        /*min-width: 20%;*/
        /*max-width: 20%;*/
    }
    header .hdGroup {
        height: auto;
        position: static;
    }
    header .hdGroup .logoWrap{
        display: block;
        padding: 17px 12px 15px 20px;
        line-height: 0;
    }
    header .hdGroup #logo {
        /* margin: 16px 12px 16px 20px; */
        width: 110px;
        height: auto;
    }
    header .depart {
        width: auto;
        height: auto;
        background-color: transparent;
        overflow: inherit;
    }
    header .depart ul,
    header .depart .searchBox {
        display: inline-block;
    }
    header .depart ul {
        word-break: keep-all;
        white-space: nowrap;
    }
    header .depart .searchBox {
        margin-left: 16px;
    }
    header .depart ul li {
        padding: 0 7px;
        line-height: 57px;
        height: 57px;
    }
    header .depart ul li.active {
        line-height: 57px;
        height: 56px;
    }
    header .depart ul li.liveBtn {
        position: relative;
    }
    header .depart ul li.liveBtn .livePanel {
        width: 295px;
        height: auto;
        background-color: transparent;
        left: 1em;
    }
    header .depart ul li a {
        font-size: 15px;
        line-height: inherit;
    }
    header .depart ul li.liveBtn .livePanel .liveIcon {
        display: block;
        margin-bottom: 13px;
        border-radius: 15px;
        width: 44px;
    }
    header .depart ul li.liveBtn .livePanel.specail .liveIcon {
        background-color: var(--color-yellow-1);
        padding: 0;
        border-radius: 15px;
        overflow: hidden;
        width: auto;
    }
    header .depart ul li.liveBtn .livePanel.specail .liveIcon .liveIconBox,
    header .depart ul li.liveBtn .livePanel.specail .liveIcon .liveIconText {
        display: inline-block;
        padding: 0 8px;
        vertical-align: top;
    }
    header .depart ul li.liveBtn .livePanel.specail .liveIcon .liveIconBox {
        background-color: var(--color-black);
        width: 44px;
    }
    header .depart ul li.liveBtn .livePanel.specail .liveIcon .liveIconText {
        color: var(--color-black);
    }
    header .depart ul li.liveBtn .livePanel.specail .liveVideo {
        left: 0;
    }
    header .depart ul li.liveBtn .livePanel .liveVideo {
        background-color: #232323;
        z-index: 998;
        border-radius: 3px;
        box-shadow: 0px 1px 5px 0px var(--color-black);
        left: -50%;
        position: relative;
        display: none;
    }
    header .depart ul li.liveBtn .livePanel:hover .liveVideo {
        display: block;
    }
    header .depart ul li.liveBtn .livePanel .liveVideo::before {
        content: "";
        width: 10px;
        height: 10px;
        background-color: #232323;
        margin-top: -5px;
        position: absolute;
        transform: rotate(45deg);
        left: 55%;
    }
    header .depart ul li.liveBtn .livePanel .liveVideo img,
    header .depart ul li.liveBtn .livePanel .liveVideo a {
        display: inline-block;
        vertical-align: middle;
        margin-right: -4px;
    }
    header .depart ul li.liveBtn .livePanel .liveVideo img {
        width: 144px;
    }
    header .depart ul li.liveBtn .livePanel .liveVideo .liveText {
        width: 136px;
        padding: 8px;
        color: var(--color-white);
    }
    header .depart ul li.liveBtn .livePanel .liveVideo .liveText .title {
        color: var(--color-gray-6);
        display: block;
        margin-bottom: 5px;
    }
    header .depart ul li.liveBtn .livePanel .liveVideo .liveText .title span {
        display: none;
    }
    header .depart ul li.liveBtn .livePanel .liveVideo .liveText p {
        word-break: normal;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        max-height: 3em;
    }
    header nav {
        width: auto;
        height: auto;
        background-color: transparent;
        position: static;
        float: right;
    }
    header nav ul {
        border: none;
    }
    header nav ul li {}
    header nav ul li a {}
    header nav .navBox,
    header nav .linkService {
        display: inline-block;
        vertical-align: middle;
    }
    header nav .navBox {
        height: auto;
    }

    header nav .loginBox,
    header nav .memberArea,
    header nav .historyArea,
    header nav .upgrade {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        top: -1px;
    }
    header nav .upgrade {
        padding: 0 2px 0 7px;
    }
    header nav .upgrade .btn {
        height: 36px;
        line-height: 35px;
        font-size: 14px;
        padding: 0 20px 1px 20px;
        min-width: 100px;
    }
    header nav .loginBox li,
    header nav .title,
    header nav .linkService li {
        line-height: 60px;
        margin: auto 6px auto 10px;
        font-size: 15px;
        display: inline-block;
        vertical-align: middle;
    }
    header nav .title {
        cursor: pointer;
        padding-right: 22px;
        background-image: url(../../images/RWD/icon_arrow_down.png);
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: right center;
        margin: auto 4px;
    }
    header nav .memberArea .title {
        width: 6em;
        padding-right: 12px;
        height: auto;
    }
    header nav .memberArea .memberAreaGroup,
    header nav .historyArea .historyAreaGroup,
    header .dropDown .dropDownContent,
    header .blogEntry .blogAreaGroup {
        background-color: var(--color-gray-1);
        position: absolute;
        z-index: 999;
        border-radius: 3px;
        box-shadow: 0px 1px 5px 0px var(--color-black);
        margin-top: -8px;
        display: none;
    }

    header .dropDown .dropDownContent,
    header .blogEntry .blogAreaGroup {
        right: 0;
        margin: 0 auto;
        position: fixed;
    }
    header .dropDown,
    header .blogEntry{
        position: relative;
    }
    header .dropDown .dropDownContent {
        padding: 0 1em;
        right: auto;
        text-align: center;
        transform: translate(-38%);
    }
    header .dropDown .dropDownContent ul li.menu {
        height: 50px;
        line-height: 50px;
    }
    header nav .memberArea:hover::before,
    header nav .historyArea:hover::before {
        /*content: "";*/
        /*width: 10px;*/
        /*height: 10px;*/
        /*background-color: #232323;*/
        /*position: absolute;*/
        /*transform: rotate(45deg);*/
        /*bottom: 3px;*/
        /*left: 0;*/
        /*right: 0;*/
        /*margin: 0 auto;*/
        /*z-index: 1000;*/
    }
    header nav .memberArea:hover .memberAreaGroup,
    header nav .historyArea:hover .historyAreaGroup,
    header .dropDown:hover .dropDownContent,
    header .blogEntry:hover .blogAreaGroup {
        display: block;
    }
    header .dropDown:hover::before,
    header .blogEntry:hover::before{
        content: "";
        width: 10px;
        height: 10px;
        background-color: #232323;
        position: absolute;
        transform: rotate(45deg);
        bottom: -5px;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 1000;
    }

    header nav .memberArea .memberAreaGroup {
        width: 280px;
        /*margin-left: -62px;*/
        right:0;
        max-height: calc(100vh - 62px);
        overflow: auto;
    }
    header nav .historyArea .historyAreaGroup {
        width: 256px;
        /*margin-left: -154px;*/
        right: 10px;
        max-height: calc(100vh - 62px);
        overflow: auto;
    }
    header nav .memberArea ul.news{
        border-bottom: 1px solid var(--color-gray-3);
        background-color: var(--color-gray-2);
    }
    header nav .memberArea ul.news li,
    header nav .historyArea ul.history li {
        /*border-bottom: 0.75px solid var(--color-gray-6);*/
        margin: auto;
        /*padding: 8px 12px;*/
    }
    header nav .historyArea ul.history li:last-child {
        border-bottom: none;
    }
    header nav .historyArea ul.historyVideo .blockTitle{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    header nav .historyArea ul.historyVideo .text,
    header nav .historyArea ul.historyVideo a.more {
        display: inline-block;
        vertical-align: middle;
    }

    header nav .historyArea ul.historyVideo .text{
        font-size: 15px;
    }

    header nav .historyArea ul.historyVideo a.more{
        font-size: 14px;
    }

    header nav .historyArea ul.historyVideo li .thumbBox,
    header nav .historyArea ul.historyVideo li .textBox {
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
    }
    header nav .historyArea ul.historyVideo li .thumbBox {
        width: 100px;
        height: 56px;
        margin-right: 4px;
        padding-bottom: 2px;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
    }
    header nav .historyArea ul.historyVideo li .thumbBox img.photo {
        width: 100%;
        min-height: 100%;
        display: block;
        object-fit: cover;
    }
    header nav .historyArea ul.historyVideo li .thumbBox .playVideoBtn img {
        position: absolute;
        width: 32px;
        top: calc(50% - 16px);
        left: calc(50% - 16px);
    }
    header nav .historyArea ul.historyVideo li .thumbBox .progressBG {
        width: 100%;
        height: 2px;
        background-color: var(--color-black);
        position: absolute;
        bottom: 0;
    }
    header nav .historyArea ul.historyVideo li .thumbBox .progressBG .progressBar {
        width: 80%;
        height: 2px;
        background-color: var(--color-orange-1);
        position: absolute;
        left: 0;
        top: 0;
    }
    header nav .historyArea ul.historyVideo li .textBox {
        width: calc(100% - 110px);
    }
    header nav .historyArea ul.historyVideo li .textBox .videoTitle {
        font-weight: 600;
        font-size: 13px;
        line-height: 18px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    header nav .historyArea ul.historyVideo li .textBox .linkBox {
        color: var(--color-gray-7);
    }
    header nav .historyArea ul.historyVideo li .textBox .linkBox a {
        font-weight: 100;
        display: inline-block;
    }
    header nav .historyArea ul.historyVideo li .textBox .linkBox a img.icon {
        display: inline-block;
        vertical-align: middle;
        padding: 20px;
        margin: 0;
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center;
        box-sizing: border-box;
        background-image: url(../../images/RWD/icon_play_next.png);
    }
    header nav .historyArea ul.historyVideo li .textBox .linkBox a:hover img.icon {
        background-image: url(../../images/RWD/icon_play_next_hover.png);
    }
    header nav .historyArea ul.historyVideo li .textBox .keepOn {}
    /*header nav .historyArea ul.historyVideo li .textBox .next {
        float: right;
    }*/
    header nav .navBox {
        height: auto;
        position: static;
        display: flex;
        align-items: center;
        justify-self: flex-end;
        float: right;
        padding: 0 8px 0 0;
    }
    header nav .logout {
        position: static;
        margin: 8px auto;
        display: block;
        text-align: center;
    }
    header .searchBox {
        width: 48px;
        height: 40px;
    }

    header .search {
        margin: 8px auto;
    }

    header .searchPanel {
        padding: 50px;
        display: none;
    }
    header .searchPanel #searchForm {
        width: 900px;
        margin: 100px auto 0;
    }
    main {
        margin-top: 0;
    }
    main.liveMargin{
        margin-top: 20px;
    }
    .popUp.open .popUpBox {
        width: 760px;
        left: calc(50% - 380px);
        top: calc(50% - 300px);
    }
    article#keyView {
        margin-bottom: 30px;
    }
    article#keyView .flexslider ol.flex-control-paging {
        bottom: 22px;
    }

    /*blog*/
    .blogAreaGroup{
        width: 65vw;
        padding: 16px;
    }
    .blogAreaGroup > h4{
        font-size: 15px;
        font-weight: normal;
        position: relative;
        margin-bottom: 16px;
    }
    .blogAreaGroup .readMore{
        font-size: 13px;
        position: absolute;
        right: 0;
        top: 0;
        margin: 0;
        margin: auto;
    }
    .blogAreaGroup .blogDropdownList{
        display: flex;
        justify-content: space-between;
        position: relative;
        box-sizing: border-box;
        white-space: normal;
        margin: 0;
    }
    .blogAreaGroup .blogDropdownList li{
        width: 32%;
        /*margin: auto;*/
        padding: 0;
        -webkit-flex-shrink: 0;
                flex-shrink: 0;
        overflow: hidden;
        -ms-word-break: normal;
            word-break: normal;
    }
    .blogAreaGroup .blogDropdownList li div{
        line-height: 1;
    }
    .blogAreaGroup .mainBox{
        position: relative;
        height: 0;
        padding-bottom: 110%;
        margin: 0 auto;
    }

    .blogAreaGroup .articleLink::before{
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(180.09deg, rgba(27, 27, 27, 0.0001) 0.11%, rgb(29, 29, 29) 96.84%);
        transition: all 1s;
    }
    .blogAreaGroup .articleLink{
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 1s;
        -webkit-background-size: cover;
             -o-background-size: cover;
                background-size: cover;
    }
    .blogAreaGroup .blogDropdownList li:hover .articleLink{
        transform: scale(1.2);
    }
    .blogAreaGroup .blogDropdownList li:hover .articleLink::before{
        opacity: 0.5;
    }
    .blogAreaGroup .contentBox{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        padding: 12px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        background: linear-gradient(180.04deg, rgba(27, 27, 27, 0.0001) 0.11%, rgba(27, 27, 27, 0.8) 58.36%, rgb(27, 27, 27) 99.96%);
    }
    .blogAreaGroup .tagWrap{
        font-size: 0;
        margin-bottom: 8px;
    }
    .blogAreaGroup .tagWrap .blogTag{
        display: inline-block;
        opacity: 0.6;
        border: 1px solid var(--color-white);
        box-sizing: border-box;
        border-radius: 4px;
        padding: 4px 8px;
        font-size: 12px;
        line-height: 1.4;
        margin-right: 8px;
        background-color: rgba(var(--color-rgb-black), 0.3);
    }
    .blogAreaGroup .tagWrap .blogTag:hover,
    .blogAreaGroup .tagWrap .blogTag:active{
        opacity: 1;
        background-color: var(--color-orange-1);
        border: 1px solid var(--color-orange-1);
        color: var(--color-white);
    }
    .blogAreaGroup .writerInfo{
        margin-bottom: 4px;
    }
    .blogAreaGroup .writerInfo > span{
        font-size: 12px;
        line-height: 1.4;
    }
    .blogAreaGroup .blogInfo > h3{
        margin: 0 0 8px 0;
        width: 100%;
    }
    .blogAreaGroup .blogInfo > h3 a{
        font-size: 15px;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
        font-weight: 600;
        padding: 0;
        width: 100%;
    }
    .blogAreaGroup .blogInfo > p{
        font-size: 13px;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.6);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding: 0;
    }

    /*我的影片文字轉icon*/
/*    header nav .historyArea .title{
        font-size: 0;
    }
    header nav .historyArea .title:before{
        content: "";
        display: inline-block;
        width: 30px;
        height: 30px;
        background-image: url(../../images/RWD/icon_my_video.svg);
        -webkit-background-size: 100% auto;
             -o-background-size: 100% auto;
                background-size: 100% auto;
        position: relative;
        top: 16px;
    }*/

    header .depart ul.mainMenu > li.menu-overflow {
        display: inline-block;
        padding-right: 15px;
        margin-right: 5px;
    }

    header .depart ul.mainMenu > li.menu-overflow::after {
        content: " ";
        position: absolute;
        right: 0;
        top: 48%;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid var(--color-white);
    }

    header .depart ul.mainMenu > li.menu-overflow:hover > a {
        color: var(--color-orange-1);
    }
    header .depart ul.mainMenu > li.menu-overflow:hover::after {
        border-bottom: 5px solid var(--color-orange-1);
        border-top: none;
    }

    header .depart ul .dropDownContent li.menu:nth-child(1) {
        display: none;
    }

    header .depart ul.mainMenu > li.menu:nth-child(1) {
        display: inline-block;
    }

    header .depart ul.mainMenu > li.menu:nth-child(2),
    header .depart ul.mainMenu > li.menu:nth-child(3),
    header .depart ul.mainMenu > li.menu:nth-child(4),
    header .depart ul.mainMenu > li.menu:nth-child(5),
    header .depart ul.mainMenu > li.menu:nth-child(6),
    header .depart ul.mainMenu > li.menu:nth-child(7),
    header .depart ul.mainMenu > li.menu:nth-child(8),
    header .depart ul.mainMenu > li.menu:nth-child(9),
    header .depart ul.mainMenu > li.menu:nth-child(10),
    header .depart ul.mainMenu > li.menu:nth-child(11),
    header .depart ul.mainMenu > li.menu:nth-child(12),
    header .depart ul.mainMenu > li.menu:nth-child(13),
    header .depart ul.mainMenu > li.menu:nth-child(14),
    header .depart ul.mainMenu > li.menu:nth-child(15),
    header .depart ul.mainMenu > li.menu:nth-child(16),
    header .depart ul.mainMenu > li.menu:nth-child(17),
    header .depart ul.mainMenu > li.menu:nth-child(18),
    header .depart ul.mainMenu > li.menu:nth-child(19),
    header .depart ul.mainMenu > li.menu:nth-child(20) {
        display: none;
    }
	/* 簡易版header */
	header.simpleHeader .hdGroup > a{
		height: 62px;
		display: inline-block;
	}
	header.simpleHeader .hdGroup #logo{
		top: 0;
		left: 0;
	}    
    header.simpleHeader ~ main{
        padding-top: 63px;
    }
}
@media screen and (min-width: 1090px) {
    header nav {
        /*min-width: 20%;*/
        /*max-width: 20%;*/
    }

    header .depart ul .dropDownContent li.menu:nth-child(1),
    header .depart ul .dropDownContent li.menu:nth-child(2) {
        display: none;
    }

    header .depart ul.mainMenu > li.menu:nth-child(1),
    header .depart ul.mainMenu > li.menu:nth-child(2) {
        display: inline-block;
    }

    header .depart ul.mainMenu > li.menu:nth-child(3),
    header .depart ul.mainMenu > li.menu:nth-child(4),
    header .depart ul.mainMenu > li.menu:nth-child(5),
    header .depart ul.mainMenu > li.menu:nth-child(6),
    header .depart ul.mainMenu > li.menu:nth-child(7),
    header .depart ul.mainMenu > li.menu:nth-child(8),
    header .depart ul.mainMenu > li.menu:nth-child(9),
    header .depart ul.mainMenu > li.menu:nth-child(10),
    header .depart ul.mainMenu > li.menu:nth-child(11),
    header .depart ul.mainMenu > li.menu:nth-child(12),
    header .depart ul.mainMenu > li.menu:nth-child(13),
    header .depart ul.mainMenu > li.menu:nth-child(14),
    header .depart ul.mainMenu > li.menu:nth-child(15),
    header .depart ul.mainMenu > li.menu:nth-child(16),
    header .depart ul.mainMenu > li.menu:nth-child(17),
    header .depart ul.mainMenu > li.menu:nth-child(18),
    header .depart ul.mainMenu > li.menu:nth-child(19),
    header .depart ul.mainMenu > li.menu:nth-child(20) {
        display: none;
    }

    header .depart ul li {
        padding: 0 10px;
    }
}
@media screen and (min-width: 1180px) {
    /* header nav {
        min-width: 30%;
        max-width: 30%;
    } */
}
@media screen and (min-width: 1220px) {
    header nav .upgrade {
        padding: 0 7px 0 7px;
    }

    header .depart ul .dropDownContent li.menu:nth-child(1),
    header .depart ul .dropDownContent li.menu:nth-child(2),
    header .depart ul .dropDownContent li.menu:nth-child(3) {
        display: none;
    }

    header .depart ul.mainMenu > li.menu:nth-child(1),
    header .depart ul.mainMenu > li.menu:nth-child(2),
    header .depart ul.mainMenu > li.menu:nth-child(3) {
        display: inline-block;
    }

    header .depart ul.mainMenu > li.menu:nth-child(4),
    header .depart ul.mainMenu > li.menu:nth-child(5),
    header .depart ul.mainMenu > li.menu:nth-child(6),
    header .depart ul.mainMenu > li.menu:nth-child(7),
    header .depart ul.mainMenu > li.menu:nth-child(8),
    header .depart ul.mainMenu > li.menu:nth-child(9),
    header .depart ul.mainMenu > li.menu:nth-child(10),
    header .depart ul.mainMenu > li.menu:nth-child(11),
    header .depart ul.mainMenu > li.menu:nth-child(12),
    header .depart ul.mainMenu > li.menu:nth-child(13),
    header .depart ul.mainMenu > li.menu:nth-child(14),
    header .depart ul.mainMenu > li.menu:nth-child(15),
    header .depart ul.mainMenu > li.menu:nth-child(16),
    header .depart ul.mainMenu > li.menu:nth-child(17),
    header .depart ul.mainMenu > li.menu:nth-child(18),
    header .depart ul.mainMenu > li.menu:nth-child(19),
    header .depart ul.mainMenu > li.menu:nth-child(20) {
        display: none;
    }
}
@media screen and (min-width: 1366px) {
    header .hdGroup .logoWrap{
        padding: 19px 10px 13px 20px;
    }
    header .depart ul li a {
        font-size: 16px;
        line-height: inherit;
    }
    header .depart .searchBox {
        margin-left: 16px;
    }
/*    header .blogEntry::after{
        content: "";
        width: 21px;
        height: 15px;
        background-image: url(../../images/RWD/icon_blog.svg);
        -webkit-background-size: 100% auto;
             -o-background-size: 100% auto;
                background-size: 100% auto;
        position: absolute;
        left: 6px;
        top: 0;
        bottom: 0;
        margin: auto;
    }*/
/*    header .blogEntry > a{
        padding-left: 25px;
    }*/
    header nav .title {
        margin: auto 12px;
    }
    header nav .memberArea .title{
        padding-right: 22px;
        font-size: 16px;
    }
    header nav .memberArea .title .nickname{
        width: auto;
    }
    /*我的影片icon轉文字*/
    header nav .historyArea .title{
        font-size: 16px;
    }
    header nav .historyArea .title:before{
        display: none;
    }

    header .depart ul .dropDownContent li.menu:nth-child(1),
    header .depart ul .dropDownContent li.menu:nth-child(2),
    header .depart ul .dropDownContent li.menu:nth-child(3),
    header .depart ul .dropDownContent li.menu:nth-child(4) {
        display: none;
    }

    header .depart ul.mainMenu > li.menu:nth-child(1),
    header .depart ul.mainMenu > li.menu:nth-child(2),
    header .depart ul.mainMenu > li.menu:nth-child(3),
    header .depart ul.mainMenu > li.menu:nth-child(4) {
        display: inline-block;
    }

    header .depart ul.mainMenu > li.menu:nth-child(5),
    header .depart ul.mainMenu > li.menu:nth-child(6),
    header .depart ul.mainMenu > li.menu:nth-child(7),
    header .depart ul.mainMenu > li.menu:nth-child(8),
    header .depart ul.mainMenu > li.menu:nth-child(9),
    header .depart ul.mainMenu > li.menu:nth-child(10),
    header .depart ul.mainMenu > li.menu:nth-child(11),
    header .depart ul.mainMenu > li.menu:nth-child(12),
    header .depart ul.mainMenu > li.menu:nth-child(13),
    header .depart ul.mainMenu > li.menu:nth-child(14),
    header .depart ul.mainMenu > li.menu:nth-child(15),
    header .depart ul.mainMenu > li.menu:nth-child(16),
    header .depart ul.mainMenu > li.menu:nth-child(17),
    header .depart ul.mainMenu > li.menu:nth-child(18),
    header .depart ul.mainMenu > li.menu:nth-child(19),
    header .depart ul.mainMenu > li.menu:nth-child(20) {
        display: none;
    }
}
@media screen and (min-width: 1440px) {
    .wrap {
        max-width: 1440px;
        margin: 0 auto;
    }
    header {
        max-width: 1440px;
    }
    header.kidsHeader{
        max-width: 1440px;
    }
    header nav .loginBox li,
    header nav .linkService li {
        margin: auto 6px auto 10px;
        font-size: 16px;
    }
    /* #ftService ul li {
        width: 320px;
        height: 300px;
        margin: 16px 32px 16px 28px;
    } */
    header .blogEntry .blogAreaGroup {
        right: calc((100% - 1440px)/2);
        max-width: 936px;
    }
}

/*  下面這段是自行新增的css，更新時別刪除，會再跟設計同步更改設計檔 */

    article.banner {
        overflow: hidden;
        position: relative;
    }

    article.banner .navBtnBox {
        display: block;
    }

    article.banner .navBtnBox .navBtn {
        width: 60px;
        position: absolute;
        z-index: 299;
        cursor: pointer;
        height: 100%;
    }

    article.banner .navBtnBox .leftBtn {
        background: linear-gradient(90deg, rgba(39, 39, 39, 0.5) 50%, rgba(39, 39, 39, 0) 100%);
        left: 0;


    }

    article.banner .navBtnBox .rightBtn {
        background: linear-gradient(90deg, rgba(39, 39, 39, 0) 0%, rgba(39, 39, 39, 0.5) 50%);
        right: 0;
    }

    article.banner .navBtnBox .navBtn img {
        width: 40px;
        position: absolute;
        left: calc(50% - 20px);
        top: calc(50% - 20px);

    }

    article.banner .navBtnBox .navBtn.last img {
        opacity: .5;

    }



/* test mobile browser */
html {
  height: -webkit-fill-available;
}
header nav.active{
    height: -webkit-fill-available;
    padding-bottom: 64px;
}

/* 麵包屑 */
.breadcrumbs {
  line-height: 19px;
}
@media screen and (min-width: 768px) {
  .breadcrumbs {
    margin-bottom: 20px;
    margin-top: -166px;
  }
}
@media screen and (min-width: 1200px) {
  .breadcrumbs {
    margin-top: 28px;
  }
}
.breadcrumbs li {
  display: inline;
  color: var(--color-gray-7);
}
.breadcrumbs li a,
.breadcrumbs li p {
  font-size: 13px;
  line-height: 19px;
  font-weight: normal;
  display: inline;
  color: var(--color-gray-7);
}
@media screen and (min-width: 768px) {
  .breadcrumbs li a,
  .breadcrumbs li p {
    font-size: 15px;
    line-height: 22px;
  }
}
.breadcrumbs li a:hover {
  color: var(--color-white);
}

/* FtService 20240911 */
#ftService{
	padding: 24px 20px 54px;
}
#ftService h2{
    font-size: 18px;
    font-weight: 400;
	line-height: normal;
    text-align: center;
	color: var(--color-white);
	text-shadow: 0px 0px 10px rgba(var(--color-rgb-black), 0.6);
}
#ftService ul{
	max-width: 650px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	gap: 12px;
	margin: 32px auto 0;
}

#ftService ul li{
	width: 160px;
	height: 160px;
	border-radius: 20px;
	background: var(--color-gray-25);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	position: relative;
}

#ftService ul li a{
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: transparent;
	display: block;
	position: absolute;
	top: 8px;
	right: 8px;
	cursor: pointer;
	transition: all .3s ease-in;
}

#ftService ul li a svg{
	width: 24px;
	height: 24px;
}

#ftService ul li a svg path{
	fill: var(--color-gray-6);
	transition: all .3s ease-in;
}

#ftService ul li a:hover{
	background: rgba(var(--color-rgb-white), 0.2);
}

#ftService ul li a:hover svg path{
	fill: var(--color-white);
}

#ftService ul li img{
	width: 64px;
	height: 64px;
	display: flex;
}

#ftService .linkBox .btn{
    width: 104px;
    height: 40px;
    font-size: 16px;
    margin: 16px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ftService ul li p{
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
	text-align: center;
	color: var(--color-gray-7);
	margin-top: 4px;
	display: flex;
}

@media screen and (min-width: 768px) {
	#ftService{
		padding: 46px 0 92px;
	}
	#ftService h2{
		font-size: 24px;
	}
	#ftService ul{
		max-width: 768px;
		gap: 20px;
		margin: 46px auto 0;
	}
	#ftService ul li{
		width: 223px;
		height: 230px;
		border-radius: 24px;
	}
	#ftService ul li a{
		top: 12px;
		right: 12px;
	}
	#ftService ul li img{
        width: 100px;
        height: 100px;
	}
    #ftService .linkBox .btn{
        width: 130px;
        height: 50px;
        font-size: 18px;
        margin: 28px auto 0;
    }
	#ftService ul li p{
		font-size: 18px;
		margin-top: 8px;
	}
}

@media screen and (min-width: 1200px) {
	#ftService ul{
		max-width: 100%;
		gap: 0 20px;
	}
}