@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;800&display=swap');
/* 顏色宣告 */
:root{
    --aos-delay: 120ms;
    /* A版 */
    --color-primary-A: #198964;
    --color-secondary-A: #fde440;
    /* B版 */
    --color-primary-B: #198964;
    --color-secondary-B: #0e2a1f;
    /* C版 */
    --color-primary-C: #198964;
    --color-secondary-C: #f9dc1c;
    /* D版 */
    --color-primary-D: #14805E;
    --color-secondary-D:#fde440;
    /* E版 */
    --color-primary-E: #999999;
    --color-secondary-E: #fde440;
    /* F版 */
    --color-primary-F: #415276;
    --color-secondary-F: #c42126;
}
/* 共用 */
body{
    color: #5d5d5d;
    font-family: '-apple-system','Helvetica Neue','Helvetica','Noto Sans','Noto Sans TC','Microsoft YaHei','Microsoft JhengHei',Arial,'sans-serif';
    font-size: 1rem;
    margin: 0;
}
*, *::before, *::after{
    box-sizing: border-box;
}
img{
    border-style: none;
    display: block;
    max-width: 100%;
}
ul, ul li{
    list-style: none;
    margin: 0;
    padding: 0;
}
a{ text-decoration: none; }
.d-flex{ display: flex; }
.bgimg{
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
/* logo Flex置中 */
.headOrder h1{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.headOrder h1 img{
    max-height: calc(90% - 10px);
    max-width: 92%;
}
.copyright{ text-align: center; }
/* 時區 */
.topinfo .d-flex{ justify-content: space-between; }


/* lineDetection 线路检测 */
.card-body .lineDetection::before,
.card-body .lineDetection.success::before,
.card-body .lineDetection.error::before{
    content: "\2714";
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: .5em;
    width: 1.2em;
    height: 1.2em;
    background-color: #198964;
    color: #fff;
}
.card-body .lineDetection.error::before{
    content: "\2718";
    background-color: #c00;
}

/* ==================================================== */
/* ﹀﹀﹀﹀﹀﹀﹀﹀﹀ typeA for B站 star ﹀﹀﹀﹀﹀﹀﹀﹀﹀ */
/* font */
.typeA{
    font-family: '-apple-system','Barlow','Helvetica Neue','Helvetica','Noto Sans','Noto Sans TC','Microsoft YaHei','Microsoft JhengHei',Arial,'sans-serif';
}
.typeA .headOrder{}
.typeA .navOrder{}
.typeA .mainOrder{}
.typeA .copyright{
    text-align: left;
    color: #fff;
    line-height: 1;
}
/* Main */
.typeA.bgimg{
    background-image: url('/images_plus/navigation/typeA2_bg.jpg');
    min-height: 100vh;
    padding: 0 40px 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.typeA .d-flex{
    min-height: calc(100vh - 250px - 50px - 40px);
    padding: 40px 0 0 0;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* Logo */
.typeA .headOrder h1{
    position: relative;
    height: 150px;
    width: 340px;
}
.typeA .headOrder h1 img{
    margin: 0 auto;
    position: relative;
    z-index: 9;
}
.typeA .headOrder h1::before{
    content: '';
    display: block;
    background-color: var(--color-primary-A);
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
}
.typeA .headOrder h1::after{
    content: '';
    background-color: var(--color-secondary-A);
    height: 100%;
    position: absolute;
    width: calc(100% + 30px);
    display: block;
    top: 30px;
    left: 0;
    z-index: 1;
}
/* Menu */
.typeA .topinfomenu{
    display: none;
}
.typeA .navOrder .navDisplay{
    display: flex;
}
.typeA .navOrder .navDisplay .nav-item{
    flex: 1;
    min-width: 150px;
    text-align: center;
}
.typeA .navOrder .navDisplay .nav-item a{
    background-color: #000;
    color: #fff;
    display: block;
    padding: 20px;
    transition: all .5s;
    vertical-align: middle;
    width: 100%;
    white-space:nowrap;
}
.typeA .navOrder .navDisplay .nav-item a:hover{
    background-color:rgba(0, 0, 0, .8);
    color: var(--color-secondary-A);
}
.typeA .navOrder .navDisplay .nav-item a.home{
    background-color: var(--color-secondary-A);
    color: #000;
}
.typeA .navOrder .navDisplay .nav-item a.home:hover{
    background-color: var(--color-primary-A);
}
.typeA .navOrder .navDisplay .nav-item a.home::before{
    content: "\f015";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    margin: -2px 8px 0 0;
    vertical-align: middle;
}
/* Content */
.typeA .mainOrder .defwebsite{
    background: rgba(0, 0, 0, .9);
    border:5px solid var(--color-secondary-A);
    max-width: calc(50vw - 100px);
    padding: 30px 65px;
    text-align: center;
    word-wrap: break-word;
    white-space: normal;
    position: fixed;
    bottom: 40px;
    right: 40px;
}
.typeA .mainOrder .defwebsite .websiteTitle{
    color: #fff;
    margin: 0 0 15px 0;
}
.typeA .mainOrder .defwebsite .websiteName{
    color: var(--color-secondary-A);
    font-size: 2.75rem;
    font-weight: 800;
    word-break: normal;
}
/* List */
.typeA .mainOrder{
    min-width: 100%;
    padding: 80px 0 0;
    display: flex;
    flex-direction: column;
}
.typeA .mainOrder .linegroup{
    order: 1;
    width: 50%;
}
.typeA .mainOrder .linegroup ul{
    counter-reset: listcounter;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.typeA .mainOrder .linegroup ul .line-card .card-header{
    display: none;
}
.typeA .mainOrder .linegroup ul .line-card{
    background: rgba(0, 0, 0, .9);
    counter-increment: listcounter;
    margin-bottom: 2%;
    transition: all .5s;
    width: 49%;
}
.typeA .mainOrder .linegroup ul .line-card:hover{
    background: rgba(0, 0, 0, .6);
}
/* .typeA .mainOrder .linegroup ul .line-card .lineDetection{
    display: none;
} */
.typeA .mainOrder .linegroup ul .line-card .card-body{
    font-size: 1.125rem;
    font-weight: bold;
    padding: 40px 100px 40px 30px;
    position: relative;
}
.typeA .mainOrder .linegroup ul .line-card .lineTitle::before{
    content: '';
    background-color: var(--color-primary-A);
    display: block;
    height: 70%;
    width: 6px;
    position: absolute;
    left: 0;
    top: 15%;
}
.typeA .mainOrder .linegroup ul .line-card .card-body::before{
    content: 'GO';
    border-radius: 30px;
    border: 2px solid #fff;
    color: var(--color-secondary-A);
    display: block;
    height: 60px;
    line-height: 60px;
    text-align: center;
    transition: all .5s;
    width: 60px;
    position: absolute;
    right: 35px;
    top: calc(50% - 30px);
}
.typeA .mainOrder .linegroup ul .line-card:hover .card-body::before{
    background-color: var(--color-primary-A);
    color: #fff;
}
.typeA .mainOrder .linegroup ul .line-card .card-body::after{
    content: counter(listcounter);
    color: #fff;
    display: block;
    font-size: 7em;
    line-height: 100%;
    opacity: .05;
    text-align: center;
    transform: translate(0, -50%);
    width: 34%;
    position: absolute;
    right: 0;
    top: 50%;
}
.typeA .mainOrder .linegroup ul .line-card .card-body h3{
    color: #fff;
    margin: 0 0 20px 0;
    word-wrap: break-word;
}
.typeA .mainOrder .linegroup ul .line-card .card-body p{
    color: var(--color-secondary-A);
    margin: 0;
    word-wrap: break-word;
}
.typeA .mainOrder .linegroup ul .line-card .card-body p.lineDetection::before{
    margin: .5em;
    margin-left: 0;
}
.typeA .mainOrder .infoweb{
    order: 2;
    padding: 20px 0 30px;
}
.typeA .mainOrder .infoweb a{
    background-color:var(--color-secondary-A);
    border-radius: 50px;
    color: #000;
    display: inline-block;
    font-weight: bold;
    padding: 15px 30px;
    transition: all .5s;
}
.typeA .mainOrder .infoweb a:hover{
    color: var(--color-secondary-A);
    background-color: var(--color-primary-A);
}
@media only screen and (max-width: 1036px){
    .typeA .headOrder{
        width: 30%;
    }
}
@media only screen and (max-width: 1024px){
    /* Main */
    .typeA.bgimg{
        background-position: right top;
    }
    .typeA .mainOrder .defwebsite{
        max-width: 40%;
    }
    .typeA .mainOrder .defwebsite .websiteName{
        font-size: 1.75rem;
    }
    /* List */
    .typeA .mainOrder .linegroup ul .line-card{
        margin: 0 0 1rem;
        width: 100%;
    }
}
@media only screen and (max-width: 991px){
    /* Main */
    .typeA.bgimg{
        padding: 0 0 20px;
    }
    .typeA .d-flex{
        padding: 0 0 0;
    }
    .typeA .copyright{
        text-align: center;
    }
    .typeA .mainOrder .defwebsite{
        max-width: 100%;
        margin-bottom: 1rem;
        position: unset;
    }
    .typeA .headOrder{
        width: 100%;
    }
    .typeA .headOrder h1{
        height: 80px;
        width: 100%;
    }
    .typeA .headOrder h1::after{
        display: none;
    }
    .typeA .mainOrder{
        padding: 20px 20px 0 20px;
    }
    /* List */
    .typeA .mainOrder .linegroup{
        width: 100%;
    }
    .typeA .mainOrder .line-card{
        margin: 0 0 1rem 0;
        width: 100%;
    }
    .typeA .mainOrder .infoweb{
        margin-bottom: 20px;
        text-align: center;
    }
    .typeA .mainOrder .infoweb a{
        width: 100%;
    }
    /* Menu */
    .typeA .navOrder{
        width: 100%;
    }
}
@media only screen and (max-width: 600px){
    .typeA .navOrder .navDisplay .nav-item{
        flex: 1;
        min-width: auto;
        text-align: center;
    }
}
@media only screen and (max-width: 414px){
    .typeA .mainOrder .defwebsite{
        padding: 20px;
    }
    .typeA .navOrder .navDisplay{
        display: unset;
    }
    .typeA .navOrder .navDisplay .nav-item{
        flex: 1;
        float: left;
        min-width: unset;
        text-align: center;
        width: 50%;
    }
}
/* ︿︿︿︿︿︿︿︿︿ typeA for B站 end ︿︿︿︿︿︿︿︿︿ */
/* ==================================================== */

/* ==================================================== */
/* ﹀﹀﹀﹀﹀﹀﹀﹀﹀ typeB for B站 star ﹀﹀﹀﹀﹀﹀﹀﹀﹀ */
/* font */
.typeB,
.typeB a{ color: #fff; }
.typeB{ font-family: '-apple-system','Century Gothic','Helvetica','Noto Sans','Noto Sans TC','Microsoft YaHei','Microsoft JhengHei',Arial,'sans-serif'; }
.typeB a:hover{ color: yellow; }

.typeB .d-flex{ flex-direction: column; }
.typeB.bgimg{
    background-color: var(--color-primary-B);
    background-image: url('/images_plus/navigation/typeB_bg.jpg');
}
.typeB .headOrder{
    background-color: var(--color-secondary-B);
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}
.typeB .headOrder h1{
    max-height: 100px;
    position: relative;
    width: 100%;
    height: 90px;
}
.typeB h1 img{
    margin: 0 auto;
}
.typeB .navOrder,
.typeB footer{
    max-width: 1300px;
    transform: translate(-50%, 0%);
    width: 100%;
    z-index: 1;
    position: fixed;
    left: 50%;
}
.typeB .navOrder{
    bottom: 0;
}
.typeB footer{
    font-size: 11px;
    bottom: 10px;
}
.typeB .navOrder .navDisplay{
    background-color: rgba(0,0,0,0.7);
    height: auto;
    position: relative;
    width: 100%;
    display: inline-flex;
    justify-content:center;
}
.typeB .navOrder .nav-item{
    font-size: 16px;
    font-weight: bold;
    height: 130px;
    margin: -50px 3% 50px;
    position: relative;
    width: 130px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}
.typeB .navOrder .nav-item::after{
    content: '';
    background: url('/images_plus/navigation/typeB_diamond1_dark.png') no-repeat;
    background-size: cover;
    height: 38px;
    width: 100%;
    z-index: 0;
    position: absolute;
    bottom: -20px;
    left: 0;
}
.typeB .navOrder .nav-item .nav-link{
    color: var(--color-primary-B);
    height: 80%;
    line-height: 1.3em;
    position: relative;
    text-align: center;
    width: 80%;
    z-index: 1;
    -webkit-filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.7));
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.typeB .navOrder .nav-link::before{
    content: '';
    background-image: url('/images_plus/navigation/typeB_diamond1.svg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 120%;
    padding: 10%;
    text-align: center;
    width: 120%;
    z-index: -1;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
.typeB .navOrder .nav-item .nav-link::before{
    transition: .6s ease;
}

.typeB .navOrder .nav-item:hover .nav-link::before{
    transform: rotate(360deg);
}
.typeB .navOrder .nav-item .nav-link:hover{
    color: #000;
    transition: .6s ease;
}
/*-- content --*/
.typeB .mainOrder{
    margin: 0 auto 200px;
    max-width: 1300px;
    padding: 0 5%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* 易記網址標題 */
.typeB .mainOrder .defwebsite{
    background: url('/images_plus/navigation/typeB_defwebsite_TitleBg.svg') no-repeat center 0.5em;
    height: 90px;
    line-height: 1.5em;
    margin: 30px 30% 0;
    position: relative;
    text-align: center;
    width: 500px;
}
.typeB .mainOrder .defwebsite::before,
.typeB .mainOrder .defwebsite::after{
    content: '';
    background: url('/images_plus/navigation/typeB_diamond_icon.svg') no-repeat;
    display: block;
    height: 60px;
    width: 50px;
    position: absolute;
    top: 20%;
}
.typeB .mainOrder .defwebsite::before{ left: 3%; }
.typeB .mainOrder .defwebsite::after{ right: 3%; }
.typeB .mainOrder .defwebsite .websiteTitle{
    font-size: 24px;
    height: 2em;
    margin: -0.5em auto;
    position: relative;
    width: 60%;
    word-break: break-all;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.typeB .mainOrder .defwebsite .websiteName{
    color: yellow;
    font-size: 18px;
    font-weight: bold;
    margin: 0.8em auto;
    position: relative;
    width: 80%;
}
.typeB .mainOrder .infoweb{
    background: url('/images_plus/navigation/typeB_naviBigTitle.png') no-repeat;
    height: fit-content;
    margin-top: 50px;
    min-height: 135px;
    position: relative;
    width: 28%;
}
.typeB .mainOrder .infoweb a{
    background: #222;
    border-radius: 5px;
    display: block;
    height: 35px;
    line-height: 35px;
    text-align: center;
    transition: .5s ease;
    width: 90px;
    position: absolute;
    right: 0;
    bottom: 0;
}
.typeB .mainOrder .infoweb a:hover{
    background: #f9dc1c;
    color: #000;
}
.typeB .mainOrder .linegroup{
    margin-top: 50px;
    position: relative;
    width: 65%;
}
.typeB .mainOrder .linegroup .lineDisplay .line-card{
    border-bottom: 1px solid #999;
    display: inline-flex;
    flex-direction: row;
    height: auto;
    margin: 0 2% 6%;
    padding-bottom: 3%;
    position: relative;
    width: 45%;
}
.typeB .mainOrder .linegroup .lineDisplay .line-card .line-link{
    display: inline-flex;
    height: 100%;
    width: 100%;
}
.typeB .mainOrder .linegroup .card-header{
    background: -webkit-linear-gradient(300deg, rgba(255, 255, 255, 0.8)0%, rgba(255, 255, 255, 0)80%);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.8)0%, rgba(255, 255, 255, 0)80%);
    color: #fff;
    display: block;
    font-size: 48px;
    height: 80px;
    line-height: 2.5em;
    margin-right: 0.3em;
    padding-right: 5px;
    text-align: right;
    width: 80px;
}
/* cube hover animation */
.typeB .mainOrder .linegroup .lineDisplay .line-card:hover .card-header{
    -webkit-animation: cube 1.5s ease infinite;
    animation: cube 1.5s ease infinite;
    background-size: 200% 200%;
}
.typeB .mainOrder .linegroup .card-header span:first-child{
    display: none;
}
.typeB .mainOrder .linegroup .lineTitle{
    margin: 0;
}
.typeB .mainOrder .linegroup .lineDisplay .line-card .line-link .card-body{
    width: calc(100% - 80px - 0.3em);
}
.typeB .mainOrder .linegroup h3,
.typeB .mainOrder .linegroup p{
    margin: 0.7em 0;
    word-break: break-all;
}
/* tablet */
@media only screen and (max-width: 1366px){
    .typeB .mainOrder .infoweb{
        background-size: cover;
        min-height: 110px;
        width: 20%;
    }
    .typeB .mainOrder .infoweb a{ right: -25%;}
    .typeB .navOrder{ height: 110px; }

}
/* pad 橫式 */
@media only screen and (max-width: 1024px){
    /* 資訊導航 */
    .typeB .mainOrder .infoweb{
        min-height: 90px;
        width: 25%;
    }
    .typeB .mainOrder .infoweb a{ right: -30%; }
    /* title */
    .typeB .mainOrder .defwebsite{ margin: 30px 25% 0; }
}
/* pad 直式 */
@media only screen and (max-width: 768px){
    /* 資訊導航 */
    .typeB .mainOrder .infoweb{
        min-height: 65px;
        width: 20%;
    }
    .typeB .mainOrder .infoweb a{ right: -50%; }
    /* title 鑽石 */
    .typeB .mainOrder .defwebsite{ margin: 30px 20% 0; }
    .typeB .mainOrder .defwebsite::before,
    .typeB .mainOrder .defwebsite::after{ height: 45px; }
    .typeB .mainOrder .infoweb a{
        font-size: 15px;
        width: 80px;
    }
    /* List */
    .typeB .mainOrder .linegroup h3{ font-size: 15px; }
    .typeB .mainOrder .linegroup p{
        font-size: 13px;
        margin: 0.5em 0;
    }
    /*方框 */
    .typeB .mainOrder .linegroup .card-header{
        font-size: 36px;
        height: 60px;
        width: 60px;
    }
    .typeB .mainOrder .linegroup .lineDisplay .line-card .line-link .card-body{ width: calc(100% - 60px - 0.3em); }
}
@media only screen and (min-width: 561px){
    /* websiteList delay */
    .typeB .lineDisplay .line-card:nth-child(8n+1){ transition-delay: calc( 0 * var(--aos-delay)); }
    .typeB .lineDisplay .line-card:nth-child(8n+2){ transition-delay: calc( 1 * var(--aos-delay)); }
    .typeB .lineDisplay .line-card:nth-child(8n+3){ transition-delay: calc( 2 * var(--aos-delay)); }
    .typeB .lineDisplay .line-card:nth-child(8n+4){ transition-delay: calc( 3 * var(--aos-delay)); }
    .typeB .lineDisplay .line-card:nth-child(8n+5){ transition-delay: calc( 4 * var(--aos-delay)); }
    .typeB .lineDisplay .line-card:nth-child(8n+6){ transition-delay: calc( 5 * var(--aos-delay)); }
    .typeB .lineDisplay .line-card:nth-child(8n+7){ transition-delay: calc( 6 * var(--aos-delay)); }
    .typeB .lineDisplay .line-card:nth-child(8n+8){ transition-delay: calc( 7 * var(--aos-delay)); }
}
/* big phone */
@media only screen and (max-width: 560px){
    /* logo */
    .typeB h1 img{}
    /* content */
    .typeB .mainOrder{
        margin: 0 auto 200px;
        display: flex;
        align-items: center;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    /* 資訊導航 */
    .typeB .mainOrder .infoweb{
        min-height: 60px;
        width: 40%;
        left: -10%;
    }
    .typeB .mainOrder .infoweb{
        margin-top: 30px;
    }
    .typeB .mainOrder{
        margin: 0 auto 150px;
    }
    /* title 鑽石 */
    .typeB .mainOrder .defwebsite{
        width: 100%;
    }
    /* List */
    .typeB .mainOrder .linegroup{
        width: 100%;
    }
    .typeB .mainOrder .linegroup .lineDisplay{
        padding: 0 0 20px 0;
    }
    .typeB .mainOrder .linegroup .lineDisplay .line-card{
        margin: 0 auto 20px;
        width: 60%;
        display: flex;
    }
    /* footer */
    .typeB .navOrder{
        height: 90px;
    }
    .typeB .navOrder .nav-item{
        font-size: 13px;
        height: 90px;
        margin: -50px 2% 50px;
        width: 90px;
    }
}
/* small phone */
@media only screen and (max-width: 400px){
    /* 資訊導航 */
    .typeB .mainOrder .infoweb{
        width: 50%;
    }
    /* title 鑽石 */
    .typeB .mainOrder .defwebsite{
        height: 65px;
        width: 100%;
    }
    .typeB .mainOrder .defwebsite::before,
    .typeB .mainOrder .defwebsite::after{
        height: 30px;
        width: 30px;
        top: 30%;
    }
    .typeB .mainOrder .defwebsite .websiteName{
        color: yellow;
        font-size: 13px;
        margin: 0.3em auto;
        width: 65%;
    }
    /* List */
    .typeB .mainOrder{
        margin: 0 auto 100px;
    }
    .typeB .mainOrder .linegroup{
        margin-top: 20px;
    }
    .typeB .mainOrder .linegroup .lineDisplay .line-card{
        width: 90%;
    }
    /* footer */
    .typeB .navOrder{
        height: 80px;
    }
    .typeB .navOrder .nav-item{
        font-size: 13px;
        height: 70px;
        margin: -35px 1% 34px;
        width: 70px;
    }
    .typeB .navOrder .nav-item::after{
        height: 20px;
        bottom: -10px;
    }
}
@keyframes cube{
    0%{ background-position: 100% -200%; }
    50%{ background-position: 100% 100%; }
    100%{ background-position: 100% 100%; }
}
/* ︿︿︿︿︿︿︿︿︿ typeB for B站 end ︿︿︿︿︿︿︿︿︿ */
/* ==================================================== */

/* ==================================================== */
/* ﹀﹀﹀﹀﹀﹀﹀﹀﹀ typeC for B站 star ﹀﹀﹀﹀﹀﹀﹀﹀﹀ */
.typeC .mainOrder .infoweb,
/* .typeC .mainOrder .lineDisplay .lineDetection{
    display: none;
} */
/* font */
.typeC,
.typeC a{ color: #fff; }
.typeC.bgimg{
    background-image: url('/images_plus/navigation/typeC_bg.jpg');
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.typeC .headOrder h1{
    height: 92px;
}
.typeC .headOrder h1 img{
    transition: 0.4s;
}
.typeC .d-flex{
    flex-direction: column;
}
.typeC .headOrder,
.typeC footer{
    border: 0px solid rgba(255,255,255,0.9);
    position: fixed;
    width: 100%;
    z-index: 99;
}
.typeC .headOrder{
    background-color: var(--color-primary-C);
    border-width: 0 0 1px 0;
    box-shadow: 0 50px 50px rgba(0,0,0,1);
}
.typeC .headOrder::before,
.typeC .headOrder::after,
.typeC footer::before,
.typeC footer::after{
    content: '';
    background-color: var(--color-primary-C);
    border: 0px solid rgba(255,255,255,0.9);
    box-sizing: content-box;
    height: 40px;
    width: 20%;
    position: absolute;
    top: 100%;
}
.typeC .headOrder::before{
    border-width: 0 1px 1px 0;
    transform: skewX(-40deg);
    left: -5%;
}
.typeC .headOrder::after{
    border-width: 0 0 1px 1px;
    transform: skewX(40deg);
    right: -5%;
}
.typeC .navOrder{
    width: 100%;
    z-index: 999;
    position: fixed;
    bottom: 60px;
    order: 2;
}
.typeC .navOrder .navDisplay{
    margin: 0px auto;
    display: flex;
    justify-content: center;
}
.typeC .navOrder .navDisplay li{
    margin: 0 2%;
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.typeC .navOrder .navDisplay li:nth-child(4){
    order: -1;
}
.typeC .navOrder .navDisplay li::before{
    content: '';
    background: url('/images_plus/navigation/typeC_btn.png') 50% 50% #000;
    background-size: 100%;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 15px #fff;
    display: block;
    height: 100px;
    transition: 0.5s;
    width: 100px;
    z-index: -1;
    position: absolute;
}
.typeC .navOrder .navDisplay li:hover::before{
    border: 2px solid var(--color-secondary-C);
    box-shadow: 0 0 15px var(--color-secondary-C);
    transform: rotate(-180deg);
}
.typeC .navOrder .navDisplay li a{
    font-size: 14px;
    height: 100px;
    transition: 0.5s;
    width: 100px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    filter: drop-shadow(0px 3px 2px #000);
}
.typeC .navOrder .navDisplay li a:hover{
    color: var(--color-secondary-C);
}
.typeC .navOrder .navDisplay li a::before{
    display: block;
    font:normal normal normal 14px/1 FontAwesome;
    -webkit-font-smoothing: antialiased;
    font-size: 38px;
    margin-bottom: 5px;
}
.typeC .navOrder .navDisplay li a.signup::before{
    content: "\f022";   /*fa-list-alt*/
}
.typeC .navOrder .navDisplay li a.mobile::before{
    content: "\f108";   /*fa-desktop*/
}
.typeC .navOrder .navDisplay li a.connect::before{
    content: "\f27b";   /*fa-commenting-o*/
}
.typeC .navOrder .navDisplay li a.home::before{
    content: "\f015";   /*fa-home*/
}
.typeC .mainOrder{
    margin: 150px auto;
    text-align: center;
    width: 1200px;
}
.typeC .mainOrder .defwebsite{
    color: var(--color-primary-C);
    display: inline-grid;
    margin: 0 auto 40px;
    position: relative;
    filter: brightness(5);
}
.typeC .mainOrder .defwebsite .websiteName{
    filter: hue-rotate(35deg);
}
.typeC .mainOrder .defwebsite::before,
.typeC .mainOrder .defwebsite::after{
    content: '';
    background: url('/images_plus/navigation/typeC_bg_line.png') 100% 0%;
    display: block;
    height: 23px;
    width: 245px;
    position: absolute;
    top: calc(50% - 10px);
}
.typeC .mainOrder .defwebsite::before{
    right: calc(100% + 30px);
}
.typeC .mainOrder .defwebsite::after{
    transform: rotateY(180deg);
    left: calc(100% + 30px);
}
.typeC .mainOrder .lineDisplay{
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
}
.typeC .mainOrder .lineDisplay li{
    margin: 60px 1%;
    width: 23%;
}
.typeC .mainOrder .lineDisplay li a{
    display: block;
    border-radius: 30px 30px 0 0;
    box-shadow: 0 -5px 5px var(--color-primary-C);
    position: relative;
}
.typeC .mainOrder .lineDisplay li a::before{
    content: '';
    display: block;
    border-radius: 30px 30px 0 0;
    background-image: linear-gradient(rgba(0,0,0,0.1) , var(--color-primary-C), rgba(0,0,0,0.1));
    opacity: 0.5;
    transition: 0.4s;
    z-index: 0;
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    filter: brightness(1.3);
}
.typeC .mainOrder .lineDisplay li a:hover::before{
    animation-name: Shinee;
    animation-duration: 1s;
    filter: brightness(2.3);
}
.typeC .mainOrder .lineDisplay li a::after{
    content: '';
    background-image: linear-gradient(90deg, transparent, #fff, transparent);
    display: block;
    height: 1px;
    width: 100%;
}
.typeC .mainOrder .lineDisplay li .card-header{
    color: var(--color-secondary-C);
    background-image: linear-gradient(#111 40% , transparent 70%);
    border-radius: 50%;
    box-shadow: inset 0 15px 13px rgba(255,255,255, 0.2);
    height: 140px;
    width: 140px;
    z-index: 1;
    position: absolute;
    left: calc(50% - 70px);
    top: -50px;
}
.typeC .mainOrder .lineDisplay li .card-header span{
    display: inline-block;
    margin-top: 10px;
    transform: skewX(-15deg);
}
.typeC .mainOrder .lineDisplay li .card-header .listNo{
    font-size: 350%;
    margin-left: 10px;
}
.typeC .mainOrder .lineDisplay li .card-body{
    box-sizing: content-box;
    min-height: 140px;
    padding: 30px 10px 10px 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.typeC .mainOrder .defwebsite h2,
.typeC .mainOrder .lineDisplay li .card-body h3,
.typeC .mainOrder .lineDisplay li .card-body p{
    margin: 0.5em 0;
}
/* .typeC .mainOrder .lineDisplay li .card-body .lineDetection{
    display: none;
} */
.typeC footer{
    color: #666;
    background-color: #111;
    border-width: 1px 0 0 0;
    box-shadow: 0 -80px 80px rgba(0,0,0,1);
    padding: 4em 0 1.5em;
    bottom: 0;
}
.typeC footer::before,
.typeC footer::after{
    background-color: #111;
    bottom: 100%;
    top: auto;
}
.typeC footer::before{
    border-width: 1px 1px 0 0;
    transform: skewX(40deg);
    left: -5%;
}
.typeC footer::after{
    border-width: 1px 0 0 1px;
    transform: skewX(-40deg);
    right: -5%;
}
/* websiteList delay */
@media only screen and (min-width: 1281px){
    .typeC .lineDisplay .line-card:nth-child(8n+1){ transition-delay: calc( 0 * var(--aos-delay)); }
    .typeC .lineDisplay .line-card:nth-child(8n+2){ transition-delay: calc( 1 * var(--aos-delay)); }
    .typeC .lineDisplay .line-card:nth-child(8n+3){ transition-delay: calc( 2 * var(--aos-delay)); }
    .typeC .lineDisplay .line-card:nth-child(8n+4){ transition-delay: calc( 3 * var(--aos-delay)); }
    .typeC .lineDisplay .line-card:nth-child(8n+5){ transition-delay: calc( 4 * var(--aos-delay)); }
    .typeC .lineDisplay .line-card:nth-child(8n+6){ transition-delay: calc( 5 * var(--aos-delay)); }
    .typeC .lineDisplay .line-card:nth-child(8n+7){ transition-delay: calc( 6 * var(--aos-delay)); }
    .typeC .lineDisplay .line-card:nth-child(8n+8){ transition-delay: calc( 7 * var(--aos-delay)); }
    .typeC .mainOrder .lineDisplay{
        min-height: 500px;
    }
}
@media only screen and (max-width: 1280px){
    .typeC .mainOrder{
        width: 90%;
    }
    .typeC .mainOrder .lineDisplay li{
        width: 30%;
    }
}
@media only screen and (max-width: 767px){
    .typeC .mainOrder .defwebsite::before,
    .typeC .mainOrder .defwebsite::after{
        height: 15px;
        left: calc(50% - 122px);
        top: calc(100% + 20px);
    }
    .typeC .mainOrder .defwebsite::before{
        top: -20px;
    }
    .typeC .mainOrder .lineDisplay li{
        width: 45%;
    }
}
@media only screen and (max-width: 539px){
    .typeC .mainOrder .lineDisplay li{
        width: 80%;
    }
    .typeC .navOrder .navDisplay{
        transform: scale(.7);
    }
    .typeC .headOrder h1{
        height: 80px;
    }
    .typeC .headOrder h1 img{
        max-width: calc(90% - 40px);
    }
    .typeC .headOrder::before,
    .typeC .headOrder::after,
    .typeC footer::before,
    .typeC footer::after{
        height: 25px;
    }
    .typeC .mainOrder{
        margin-top: 130px;
    }
    .typeC .mainOrder .defwebsite{
        margin-bottom: 80px;
    }
    .typeC .mainOrder .lineDisplay li{
        margin: 40px 1%;
    }
    .typeC .mainOrder .lineDisplay li .card-header{
        color: var(--color-secondary-C);
        height: 120px;
        width: 120px;
        left: calc(50% - 60px);
        top: -50px;
    }
    .typeC .mainOrder .lineDisplay li .card-body{
        min-height: auto;
    }
}
@keyframes Shinee{
    0%{ filter: brightness(1.3); }
    10%{ filter: brightness(2.3); }
    20%{ filter: brightness(1.3); }
    30%{ filter: brightness(2.3); }
    40%{ filter: brightness(2.3); }
    100%{ filter: brightness(2.3); }
}
/* ︿︿︿︿︿︿︿︿︿ typeC for B站 end ︿︿︿︿︿︿︿︿︿ */
/* ==================================================== */

/* ==================================================== */
/* ﹀﹀﹀﹀﹀﹀﹀﹀﹀ typeD for B站 star ﹀﹀﹀﹀﹀﹀﹀﹀﹀ */
.topinfo,
/* .typeD .lineDetection, */
.typeD .webRefresh{
    display:none;
}
.typeD .d-flex{
    flex-direction: column;
}
.typeD .headOrder{
    background-color: var(--color-primary-D);
    padding: 2px 0;
    width: 100%;
    z-index: 999;
}
/* logo 背景 */
.typeD h1{
    height: 75px;
}
.typeD h1 img{
    margin: 0 auto;
}
.typeD.bgimg{
    background-image: url('/images_plus/navigation/typeD_bg.jpg');
}
/*主選單 */
.typeD .navOrder{
    background: #303030;
    margin: 65px 0 0;
    padding: 23px 0;
    width: 100%;
    order: 1;
	position: fixed;
	bottom: 34px;
	z-index: 1;
}
/* 主要域名 */
.typeD .defwebsite{
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.77) 23%, rgba(0,0,0,0.8) 24%, rgba(0,0,0,0.8) 78%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.77) 23%, rgba(0,0,0,0.8) 24%, rgba(0,0,0,0.8) 78%, rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 );
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.77) 23%, rgba(0,0,0,0.8) 24%, rgba(0,0,0,0.8) 78%, rgba(0,0,0,0) 100%);
    padding: 10px;
    text-align: center;
    transition: all .5s;
    width: 350px;
    position: absolute;
    top: 20%;
    left: 20%;
}
.typeD .defwebsite::before,
.typeD .defwebsite::after{
    content: '';
    background-image: linear-gradient(90deg, transparent, var(--color-primary-D), transparent);
    height: 2px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}
.typeD .defwebsite::after{
    top: 0;
}
.typeD .websiteTitle{
    color: #fff;
    font-size: 1.2em;
    line-height: 1.25em;
    margin: 0;
}
.typeD .websiteName{
    color: var(--color-secondary-D);
    font-size: 1.1em;
    margin-top: 2%;
}
.typeD .websiteTitle,
.typeD .websiteName{
    text-shadow: 3px 3px 3px #000;
    transition: all .5s;
}
/* 線路選單 */
.typeD .mainOrder{
    margin: 0 auto;
    width: 75%;
}
.typeD .linegroup{
    padding: 400px 0 200px 0;
}
.typeD .linegroup ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.typeD .line-card{
    background-color: rgba(255,255,255,0.7);
    border: 2px solid #9d9d9d;
    cursor: pointer;
    height: 110px;
    margin: 4px 4px 6px 4px;
    position: relative;
    transition: all .5s;
    width: calc(100% / 4 - 8px);
}
.typeD .line-card:hover{
    border: 2px solid var(--color-primary-D);
    background-color: rgba(255,255,255,0.85);
}
.typeD .line-card::before{
    content: '';
    background-color: #9d9d9d;
    clip-path: polygon(0 0, 38% 0, 20% 100%, 0% 100%);
    height: 103%;
    transition: all .5s;
    width: 100%;
    position: absolute;
    left: -2px;
    top: -2px;
}
.typeD .card-header span:last-child{
    clip-path: polygon(0 0, 37% 0, 20% 100%, 0% 100%);
    height: 100%;
    text-indent: -10px;
    width: 100%;
}
.typeD .line-card:hover::before{
    background-color:var(--color-primary-D);
}
.typeD .navDisplay{
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: center;
}
.typeD .navDisplay li{
    border-radius: 50%;
    border: 2px #cccccc94 solid;
    cursor: pointer;
    height: 90px;
    margin: 0 0.3%;
    transition: all .5s;
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.typeD .navDisplay li:hover{
    border: 2px var(--color-secondary-D) solid;
}
.typeD .navDisplay li:hover a{
    color: var(--color-secondary-D);
}
.typeD .listNo{
    font-size: 7.5em;
    letter-spacing: -10px;
}
.typeD .navDisplay a{
    color: #fff;
    text-align: center;
}
.typeD .navOrder .navDisplay li a{
    font-size: 12px;
    line-height: 1;
    letter-spacing: 1px;
    text-shadow: 2px 2px 19px #000;
    transition: 0.5s;
}
.typeD .card-body{
    color: #5a5959;
    float: right;
    padding: 6% 0 0 0;
    width: 65%;
}
.typeD .card-body h3,
.typeD .card-body p{
    margin: 0;
    word-wrap: break-word;
}
.typeD .card-body h3{
    font-size: 1.2em;
    line-height: 1.35em;
}
.typeD .card-body p{
    font-size: 0.8em;
}
.typeD .card-body p.lineDetection::before{
    margin: .5em;
    margin-left: 0;
}
.typeD .card-header span{
    color: #fff;
    position: absolute;
}
.typeD .line-card:hover .card-header span{
    color: var(--color-secondary-D);
}
.typeD .line-card:hover .card-body h3{
    color: var(--color-primary-D);
}
.typeD .home::before,
.typeD .connect::before,
.typeD .mobile::before,
.typeD .signup::before{
    font: normal normal normal 14px/1 FontAwesome;
    -webkit-font-smoothing: antialiased;
    display: block;
    font-size: 45px;
    margin-bottom: 5px;
}
/* icon */
.typeD .home::before{
    content: "\f015";
}
.typeD .connect::before{
    content: "\f086";
}
.typeD .mobile::before{
    content: "\f0ed";
}
.typeD .signup::before{
    content: "\f097";
}
/* footer */
.typeD footer{
    background: #151515;
    border-top: 1px solid #2d2d2d;
    color: #525252;
    /* font-size: 0.3em; */
    padding: 10px 0 10px;
    width: 100%;
    position: fixed;
    bottom: 0;
}
/* websiteList delay */
@media only screen and (min-width: 1280px){
    .typeD .lineDisplay .line-card:nth-child(8n+1){ transition-delay: calc( 0 * var(--aos-delay)); }
    .typeD .lineDisplay .line-card:nth-child(8n+2){ transition-delay: calc( 1 * var(--aos-delay)); }
    .typeD .lineDisplay .line-card:nth-child(8n+3){ transition-delay: calc( 2 * var(--aos-delay)); }
    .typeD .lineDisplay .line-card:nth-child(8n+4){ transition-delay: calc( 3 * var(--aos-delay)); }
    .typeD .lineDisplay .line-card:nth-child(8n+5){ transition-delay: calc( 4 * var(--aos-delay)); }
    .typeD .lineDisplay .line-card:nth-child(8n+6){ transition-delay: calc( 5 * var(--aos-delay)); }
    .typeD .lineDisplay .line-card:nth-child(8n+7){ transition-delay: calc( 6 * var(--aos-delay)); }
    .typeD .lineDisplay .line-card:nth-child(8n+8){ transition-delay: calc( 7 * var(--aos-delay)); }
}
@media only screen and (max-width: 1280px){
    .typeD .mainOrder{
        margin: 0 auto;
        width: 90%;
    }
    .typeD .defwebsite{
        top: 20%;
        left: 10%;
    }
    /* 線路選單 */
    .typeD .linegroup{
        padding: 300px 0 200px 0;
    }
    .typeD .line-card{
        height: 90px;
        width: 32%;
    }
    .typeD .listNo{
        font-size: 6em;
    }
    .typeD .card-header span:last-child{
        text-indent: -5px;
    }
    .typeD .card-body{
        padding: 4% 0 0 0;
    }
    .typeD .card-body h3{
        line-height: 1.3em;
    }
}
@media only screen and (max-width: 767px){
    .typeD .mainOrder{
        width: 80%;
    }
    .typeD .line-card{
        width: 47%;
    }
    .typeD.bgimg{
        background-position: 50% top;
    }
    .typeD .defwebsite{
        top: 140px;
        left: calc(50% - 175px);
    }
}
@media only screen and (max-width: 539px){
    .typeD h1 img{}
    .typeD .card-body{
        padding: 3% 0px 0 0;
    }
    .typeD .card-body h3{
        font-size: 1.3em;
        line-height: 1.33em;
    }
    .typeD .line-card{
        width: 100%;
    }
}
@media only screen and (max-width: 320px){
    .typeD .line-card{
        width: 100%;
    }
    .typeD .linegroup{
        padding: 230px 0 10px 0;
    }
    .typeD .linegroup .linegroup ul{
        justify-content: center;
    }
    .typeD .card-header span:last-child,
    .typeD .line-card::before{
        clip-path: polygon(0 0, 37% 0, 27% 100%, 0% 100%);
    }
    .typeD .defwebsite{
        width: 80%;
    }
    .typeD .defwebsite::after{
        bottom: 48px;
    }
    .typeD .defwebsite{
        left: calc(50% - 145px);
    }
    .typeD .navDisplay li{
        margin: 0 0.1%;
    }
    .typeD .navDisplay li{
        height: 72px;
        width: 72px;
    }
    .typeD .copyright{
        font-size: 12px;
    }
    .typeD .home::before,
    .typeD .connect::before,
    .typeD .mobile::before,
    .typeD .signup::before{
        font-size: 32px;
    }
    .typeD .navOrder{
        margin: 50px 0 0;
    }
    .typeD .navOrder .navDisplay li a{
        font-size: 12px;
        letter-spacing: 0px;
    }
    .typeD.bgimg{
        background-position: 55% top;
    }
    .typeD .card-body h3{
        font-size: 1.1em;
        line-height: 1.2em;
    }
    .typeD .card-body{
        padding: 10% 0px 0 0;
    }
}
/* ︿︿︿︿︿︿︿︿︿ typeD for B站 end ︿︿︿︿︿︿︿︿︿ */
/* ==================================================== */

/* ﹀﹀﹀﹀﹀﹀﹀﹀﹀ typeE for B站 star 0327新增 ﹀﹀﹀﹀﹀﹀﹀﹀﹀ */
/* font */
.typeE {
    font-family: '-apple-system', 'Barlow', 'Helvetica Neue', 'Helvetica', 'Noto Sans', 'Noto Sans TC', 'Microsoft YaHei', 'Microsoft JhengHei', Arial, 'sans-serif';
}

.typeE .headOrder {}

.typeE .navOrder {
    display: none;
}

.typeE .mainOrder {}

.typeE .copyright {
    display: none;
}


/* Main */
.typeE.bgimg {
    background-image: url('/images_plus/navigation/typeE_bg.jpg');
    min-height: 100vh;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}
.typeE_img {
    display: none;
}

.typeE .d-flex {
    min-height: calc(100vh - 250px - 50px - 40px);
    padding: 40px 0 0 0;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
    background-image: url('/images_plus/navigation/typeE_back.png');
    width: 45vw;
    background-size: cover;
    background-color: transparent;
}
.footer_text {
    display: none;
}
.typeE .footer_text {
    display: block;
    padding: 10px 0;
    color: #fff;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 45vw;
}
/* Logo */
.typeE .headOrder {
    margin: 0 auto;
}
.typeE .headOrder h1 {
    display: inline-block;
    margin: 0;
    padding: 0 65px;
    position: relative;
}

.typeE .headOrder h1 img {
    margin: 0 auto;
    max-height: 100px;
    max-width: 100%;
    position: relative;
    z-index: 9;
}



/* Menu */
.typeE .topinfomenu {
    display: none;
}

.typeE .navOrder .navDisplay {
    display: flex;
}

.typeE .navOrder .navDisplay .nav-item {
    flex: 1;
    min-width: 150px;
    text-align: center;
}

.typeE .navOrder .navDisplay .nav-item a {
    background-color: #000;
    color: #fff;
    display: block;
    padding: 20px;
    transition: all .5s;
    vertical-align: middle;
    width: 100%;
    white-space: nowrap;
}

.typeE .navOrder .navDisplay .nav-item a:hover {
    background-color: rgba(0, 0, 0, .8);
    color: var(--color-secondary-E);
}

.typeE .navOrder .navDisplay .nav-item a.home {
    background-color: var(--color-secondary-E);
    color: #000;
}

.typeE .navOrder .navDisplay .nav-item a.home:hover {
    background-color: var(--color-primary-E);
}

.typeE .navOrder .navDisplay .nav-item a.home::before {
    content: "\f015";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    margin: -2px 8px 0 0;
    vertical-align: middle;
}

/* Content */
.typeE .mainOrder .defwebsite {
    background: rgba(0, 0, 0, .9);
    border: 5px solid var(--color-secondary-E);
    max-width: calc(50vw - 100px);
    padding: 30px 65px;
    text-align: center;
    word-wrap: break-word;
    white-space: normal;
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: none;
}

.typeE .mainOrder .defwebsite .websiteTitle {
    color: #fff;
    margin: 0 0 15px 0;
}

.typeE .mainOrder .defwebsite .websiteName {
    color: var(--color-secondary-E);
    font-size: 2.75rem;
    font-weight: 800;
    word-break: normal;
}

/* List */
.typeE .mainOrder {
    min-width: 100%;
    padding: 0 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 40vh;
}

.typeE .mainOrder .linegroup {
    order: 1;
    width: 600px;
}

.typeE .mainOrder .linegroup ul {
    counter-reset: listcounter;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.typeE .mainOrder .linegroup ul .line-card .card-header {
    display: none;
}

.typeE .mainOrder .linegroup ul .line-card {
    background: rgba(255, 255, 255, 1);
    margin-bottom: 15px;
    transition: all .5s;
    width: 47%;
    min-height: 70px;
    border-radius: 8px;
}

.typeE .mainOrder .linegroup ul .line-card:hover {
    background: rgba(0, 0, 0, .6);
}

.typeE .mainOrder .linegroup ul .line-card .lineDetection {
    display: none;
}

.typeE .mainOrder .linegroup ul .line-card .card-body {
    font-size: 1.125rem;
    font-weight: bold;
    padding: 10px 30px 10px 30px;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.typeE .mainOrder .linegroup ul .line-card:hover .card-body::before {
    background-color: var(--color-primary-E);
    color: #fff;
}

.item-img {
    display: none;
}
.typeE .mainOrder .linegroup ul .line-card .card-body .item-img {
    display: block;
    height: 32px;
    width: 32px;
    margin-right: 5px;
    background-size: cover;
}
.typeE .mainOrder .linegroup ul .line-card .card-body h3 {
    color: var(--color-primary-E);
    margin: 0 0 0 0;
    word-wrap: break-word;
}
.typeE .mainOrder .linegroup ul .line-card:hover .card-body h3 {
    color: var(--color-secondary-E);
}
.typeE .mainOrder .linegroup ul .line-card .card-body p {
    color: var(--color-primary-E);
    margin: 0;
    word-wrap: break-word;
    line-height: 18px;
    display: none;
}
.typeE .mainOrder .linegroup ul .line-card:hover p {
    color: var(--color-secondary-E);
}

.typeE .mainOrder .infoweb {
    order: 2;
    padding: 20px 0 30px;
    display: none;
}

.typeE .mainOrder .infoweb a {
    background-color: var(--color-secondary-E);
    border-radius: 50px;
    color: #000;
    display: inline-block;
    font-weight: bold;
    padding: 15px 30px;
    transition: all .5s;
}

.typeE .mainOrder .infoweb a:hover {
    color: var(--color-secondary-E);
    background-color: var(--color-primary-E);
}

@media only screen and (max-width: 1399px) {
    .typeE .mainOrder .linegroup {
        width: 85%;
    }
}
@media only screen and (max-width: 991px) {
    .typeE.bgimg {
        background-position: top right;
    }
    .typeE .d-flex,
        .typeE .footer_text{
        width: 60vw;
    }

}
@media only screen and (max-width: 767px) {
    .typeE .typeE_img {
        display: block;
        background-image: url('/images_plus/navigation/typeE_bg.jpg');
        height: 50vh;
        background-position-x: right;
        background-position-y: center;
        background-size: cover;

    }
    .typeE.bgimg {
        background-size: cover;
        background-image: none;
    }
    .typeE .headOrder {
        position: fixed;
        top: 80px;
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }
    .typeE .d-flex,
    .typeE .footer_text {
        width: 100vw;
    }
    .typeE .d-flex {
        margin-top: 0;
        min-height: 50vh;
        height: unset;
        background-color: #35795c;
        padding: 20px 0 0 0;
    }
    .typeE .mainOrder .linegroup ul .line-card {
        width: 100%;
    }
}

/* ︿︿︿︿︿︿︿︿︿ typeE for B站 end ︿︿︿︿︿︿︿︿︿ */


/* ﹀﹀﹀﹀﹀﹀﹀﹀﹀ typeF for B站 star 0409新增 ﹀﹀﹀﹀﹀﹀﹀﹀﹀ */
/* font */
.typeF {
    font-family: '-apple-system', 'Barlow', 'Helvetica Neue', 'Helvetica', 'Noto Sans', 'Noto Sans TC', 'Microsoft YaHei', 'Microsoft JhengHei', Arial, 'sans-serif';
}
.typeF a { cursor: pointer;}
.typeF a:hover { color: var(--color-secondary-F);}
.typeF .navOrder {FONT-WEIGHT: 200;position: absolute;right: 15px;top: 20px;}
.typeF .copyright { display: none;}
/* Main */
.typeF.bgimg {
    background-image: url('/images_plus/navigation/typeF_bg.jpg');
    min-height: 100vh;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    background-position: top right;
    background-color: #eeeff4;
}

.typeF .d-flex {
    min-height: calc(100vh - 250px - 50px - 40px);
    padding: 40px 0 0 0;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-items: end;
    height: 100vh;
    width: 45vw;
    background-size: cover;
    background-color: transparent;
}
.footer_text {
    display: none;
}
.typeF .footer_text {
    display: block;
    padding: 10px 0;
    color: var(--color-primary-F);
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 45vw;
}
/* Logo */
.typeF .headOrder {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.typeF .headOrder::after {
    content: "";
    background: url(/images_plus/navigation/typeF_title01.png) no-repeat 50% 50%;
    background-size: 80% auto;
    display: block;
    width: 100%;
    height: 25vh;
}
.typeF .headOrder h1 {
    display: inline-block;
    margin: 0;
    padding: 0 65px;
    position: relative;
}

.typeF .headOrder h1 img {
    margin: 0 auto;
    max-height: 100px;
    position: relative;
    z-index: 9;
}

/* Menu */
.typeF .topinfomenu {
    display: none;
}

.typeF .navOrder .navDisplay {
    display: flex;
}

.typeF .navOrder .navDisplay .nav-item {
    flex: 1;
    min-width: 150px;
    text-align: center;
    margin: 7px;
}
.typeF .navOrder .navDisplay li a::before{    
    font:normal normal normal 14px/1 FontAwesome;
    -webkit-font-smoothing: antialiased;    
    font-size: 20px;    
    margin-right: 5px;
}
.typeF .navOrder .navDisplay li a.mobile::before {
    content: "\f019";
}
.typeF .navOrder .navDisplay li a.connect::before {
    content: "\f27b";
}
.typeF .navOrder .navDisplay .nav-item:first-child,
.typeF .navOrder .navDisplay .nav-item:last-child{
    display:none; 
}

.typeF .navOrder .navDisplay .nav-item a {
    background-color: #fbfbfd;
    color: #fff;
    display: block;
    padding: 1vh;
    transition: all .5s;
    vertical-align: middle;
    width: 100%;
    white-space: nowrap;
    color: #8d8d8d;
    box-shadow: 0 0 7px rgba(0,0,0,0.4);
    border-radius: 10px;
    FONT-WEIGHT: 500;
}

.typeF .navOrder .navDisplay .nav-item a:hover {
    color: var(--color-secondary-F);
    box-shadow: 0 0 7px rgba(0,0,0,0.7);

}

.typeF .navOrder .navDisplay .nav-item a.home {
    background-color: var(--color-secondary-F);
    color: #000;
}

.typeF .navOrder .navDisplay .nav-item a.home:hover {
    background-color: var(--color-primary-F);
}

.typeF .navOrder .navDisplay .nav-item a.home::before {
    content: "\f015";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    margin: -2px 8px 0 0;
    vertical-align: middle;
}

/* Content */
.typeF .mainOrder .defwebsite {
    color: var(--color-primary-C);
    display: inline-grid;
    margin: 0 auto 40px;
    position: relative;
    filter: brightness(5);
    text-align: center;
    display: none;
}

.typeF .mainOrder .defwebsite .websiteTitle {
    color: #fff;
    margin: 0 0 15px 0;
}

.typeF .mainOrder .defwebsite .websiteName {
    color: var(--color-secondary-F);
    font-size: 20px;
    font-weight: 800;
    word-break: normal;
}

/* List */
.typeF .mainOrder {
    min-width: 100%;
    padding: 0 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-height: 20vh; 
    margin-bottom: 60px; 
}
.typeF .mainOrder::before {
    content: "";
    background:url('/images_plus/navigation/typeF_title02.png') no-repeat 50% 50%;
    background-size: contain;
    display: block;
    width: 70%;
    height: 15vh;
}

.typeF .mainOrder .linegroup {
    order: 1;
    width: 90%;
}

.typeF .mainOrder .linegroup ul {
    counter-reset: listcounter;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.typeF .mainOrder .linegroup ul .line-card .card-header {
    display: none;
}

.typeF .mainOrder .linegroup ul .line-card {
    background: rgba(255, 255, 255, 1);
    margin-bottom: 2.5vh;
    transition: all .5s;
    width: 100%;
    min-height: 8vh;
    border-radius: 2vh;
    box-shadow: 0 3px 3px rgb(0 0 0 / 40%);
}

.typeF .mainOrder .linegroup ul .line-card .lineDetection {
    display: none;
}

.typeF .mainOrder .linegroup ul .line-card .card-body { 
    font-size: 1.125rem;
    font-weight: bold;
    padding: 10px 110px 10px 30px;;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    flex-wrap: wrap;
}
.typeF .mainOrder .linegroup ul .line-card .card-body::after {
    content:"点击进入";
    position: absolute;
    top: 0;
    right: 5%;
    transition:all .5s;
    display:flex;
    align-items: center;
    height: 100%;
}

.typeF .mainOrder .linegroup ul .line-card .card-body .item-img {
    display: none;
}
.typeF .mainOrder .linegroup ul .line-card .card-body h3 {
    color: var(--color-primary-F);
    margin: 0 0 0 0;
    word-wrap: break-word;
    margin-right: .8vw;
}
.typeF .mainOrder .linegroup ul .line-card:hover .card-body h3 {
    color: var(--color-secondary-F);
}
.typeF .mainOrder .linegroup ul .line-card .card-body p {
    color: var(--color-primary-F);
    margin: 0;
    word-wrap: break-word;
    word-break: break-all;
    line-height: 18px;
    margin-right: 10px;
}
.typeF .mainOrder .linegroup ul .line-card:hover p {
    color: var(--color-secondary-F);
}

.typeF .mainOrder .infoweb {
    order: 2;
    padding: 20px 0 30px;
    display: none;
}

.typeF .mainOrder .infoweb a {
    background-color: var(--color-secondary-F);
    border-radius: 50px;
    color: #000;
    display: inline-block;
    font-weight: bold;
    padding: 15px 30px;
    transition: all .5s;
}

.typeF .mainOrder .infoweb a:hover {
    color: var(--color-secondary-F);
    background-color: var(--color-primary-F);
}

@media only screen and (max-width: 991px) {
    .typeF .d-flex,
        .typeF .footer_text{
        width: 60vw;
    }
    .typeF .footer_text {
        text-shadow: 0 2px 2px #fff;
    }
}
@media only screen and (max-width: 767px) {
    .typeF.bgimg {
        background-size: auto;
        background-size: auto 70%;
        background-position: bottom right;
    }
    .typeF .navOrder{
        top: 10px;
        right: 10px;
    }
    .typeF .headOrder {
        position: fixed;
        top: 100px;
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }
    .typeF .headOrder::after{
        height: 20vh;
    }
    .typeF .d-flex,
    .typeF .footer_text {
        width: 100vw;
    }
    .typeF .d-flex {
        margin-top: 0;
        min-height: 50vh;
        align-items:end;
        padding: 80px 0 0 0;
    }
    .typeF .mainOrder .linegroup ul .line-card {
        width: 100%;
    }
    .typeF .headOrder::after{
        background-size: 95% auto;
    }    
    .typeF .mainOrder .linegroup ul .line-card .card-body{
        font-size: 1rem;
        flex-direction: column;
        align-items: start;
    }
    .typeF .mainOrder .linegroup ul .line-card .card-body h3{
        margin-right: 1vw;
    }
    .typeF .mainOrder .linegroup ul .line-card .card-body p.lineName{
        display: block;
    }
    .typeF .footer_text {
        background-color: rgba(255,255,255,.9);
    }
}
@media only screen and (max-width: 320px) {
    .typeF .navOrder .navDisplay .nav-item{ min-width: auto;}
    .typeF .mainOrder .linegroup ul .line-card .card-body::after{ display: none;}
}
/* ︿︿︿︿︿︿︿︿︿ typeF for B站 end ︿︿︿︿︿︿︿︿︿ */