/* css reset */
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* PC&Mobile css control */
.PC-version {
    display: block;
}

.Mobile-version {
    display: none;
} 


/* ////////////////////////////////////////////////////////////// */
body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* ////////////////////////////////////////////////////////////// */
/* section1 */
/* menu */
.pc-section1 .menu-wrapper {
    position: fixed;    
    width: 100vw;
    display: flex;
    justify-content: center;
    transition: .5s;
    border-bottom: 1px solid #fff;
    z-index: 50;
}

.pc-section1 .menu-wrapper.black {
    background: rgb(27, 27, 27);
    height: 4vw;
    padding: 0.5vw 2.6vw;
    border: 0px;
}

.pc-section1 .menu-wrapper .logo {
    float: left;
}

.pc-section1 .menu-wrapper img {
    height: 4vw;
    transition: .5s;
}

.pc-section1 .menu-wrapper .logo img {
    height: 3vw;
}

.pc-section1 .menu-list { 
    width: 100vw;
    padding-left: 22vw;

}
.pc-section1 .menu-list a {
    color: rgb(214, 214, 214);
    line-height: 3vw;
    text-decoration: none;
    transition: .5s;
}

.pc-section1 .menu-wrapper.black a {
    color: #fff;
    line-height: 3vw;
}

.pc-section1 .menu-item {
    float: left;
    text-align: center;
    font-size: 1vw;
    width: 11vw;
}

.pc-section1 .menu-item a:hover {
    color: #fff;
    background: rgb(192, 55, 55);
    padding: 0.2vw;
}

/* header */
.pc-section1 {
    width: 100%;
    height: 100vh;
}

/* v1 */
/* .pc-section1 video {
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: -10;
} */

/* v2 */
.pc-section1 #video-div {
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: -10;
    border: 0;
    overflow: hidden;
}

.pc-section1 video {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    z-index: -10;

    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    top: 50%; 
    left: 50%;
}

.pc-section1 .main-title-wrapper {
    padding-top: 10vw;
}

.pc-section1 .catalog {
    display: none;
    margin-left: 20vw;
    font-size: 1.6vw;
    color: rgb(255, 247, 0);
    border: 2px solid #fff;
    padding: 0 0.5vw;
}

.pc-section1 .title-img-wrapper {
    margin: 2vw 0 1vw 0;
}

.pc-section1 .main-title-wrapper img {
    display: none;
    padding-left: 20vw;
}

.pc-section1 .title0 {
    font-size: 4vw;
    font-weight: bold;
    color: #ffffff;
    padding-top: 12vw;
    padding-left: 20vw;
}

.pc-section1 .text {
    display: none;
    font-size: 2.2vw;
    padding-left: 20vw;
    color: #ffffff;
}

.pc-section1 .des {
    display: none;
    width: 60vw;
    margin-left: 20vw;
    margin-top: 2vw;
    padding: 0.4vw;
    line-height: 28px;
    font-size: 1vw;
    color: #ffffff;
}

.pc-section1 .arrow {
    font-size: 1vw;
    padding: 0 1vw;
}

.pc-section1 button {
    display: none;
    width: 8vw;
    border: #ffffff 1px solid;
    background: none;
    margin-left: 20vw;
    margin-top: 3vw;
    padding: 0.4vw;
    font-size: 1vw;
    color: #ffffff;
}

.pc-section1 button:hover {
    background: rgb(226, 225, 225);
    color: #000;
}

/* ////////////////////////////////////////////////////////////// */
/* pc-chart section */
.pc-chart {
    width: 100%;
    /* background: red; */
}
.pc-chart .title1 {
    padding-left: 22vw;
}

.pc-chart .text {
    font-size: 1.2vw;
    width: 60%;
    padding: 2vw;
    display: block;
    margin: 0 auto;
}
.chart-container {
    width: 80%;
    /* background: rgb(253, 232, 229); */
    display: block;
    margin: 0 auto;
}

/* bar section */
/* 共同 */
.new-barAll-wrapper {
    display: flex; 
    justify-content: center;
}

.bar-middle-wrapper{
    background: rgb(238, 237, 237);

    width: 68%;
    float: left;
}

/* bar title control */
#barTitle1 {
    display: none;
}

#barTitle2 {
    display: none;
}

#barTitle3 {
    display: none;
}

#barTitle4 {
    display: none;
}

#barTitle5 {
    display: none;
}

/* bar1 */
.bar1 {
    margin: 2vw 0;
}

.bar1 .bar-top {
    font-size: 1.2vw;
    line-height: 50px;
    color: #969696;

    width: 6%;
    height: 3vw;
    float: left;
    text-align: center;
}

.bar1 .bar-middle {
    width: 85.7%;
    height: 3vw;
    background: rgb(238, 237, 237);
}

.bar1 .bar-percent {
    font-size: 1.5vw;
    line-height: 3vw;
    height: 3vw;
    color: #fff;
    padding-left: 13.2vw;
}

.bar1 .bar-middle-run {
    width: 0%;
    height: 3vw;
    border-right: 1px #fff solid;
    background: #9c8856;
}

.bar1 .bar-bottom {
    font-size: 1.2vw;
    line-height: 50px;
    color: #969696;
    
    width: 6%;
    height: 3vw;
    float: left;
    text-align: center;
}

.bar1 .bar-title {
    width: 80%;
    font-size: 1.5vw;

    clear: both;
    padding-left: 26vw;
}

.remark {
    margin: 2vw 0vw 2vw 8vw;
    font-size: 1vw;
    color: #969696;
    text-align: left;
}

/* bar2 */
.bar2 {
    margin: 2vw 0;
}

.bar2 .bar-top{
    font-size: 1.2vw;
    line-height: 50px;
    color: #969696;

    width: 6%;
    height: 3vw;
    float: left;
    text-align: center;    
}

.bar2 .bar-middle {
    width: 75.1%;
    height: 3vw;
    background: rgb(238, 237, 237);
}

.bar2 .bar-percent {
    font-size: 1.5vw;
    line-height: 3vw;
    height: 3vw;
    color: #fff;
    /* text-align: center; */
    padding-left: 13.2vw;
}

.bar2 .bar-middle-run {
    width: 0%;
    height: 3vw;
    border-right: 1px #fff solid;
    background: #6eae64;
}

.bar2 .bar-bottom {
    font-size: 1.2vw;
    line-height: 50px;
    color: #969696;

    width: 6%;
    height: 3vw;
    float: left;
    text-align: center;
}

.bar2 .bar-title {
    width: 80%;
    font-size: 1.5vw;

    clear: both;    
    padding-left: 26vw;
}


/* bar3 */
.bar3 {
    margin: 2vw 0;
}

.bar3 .bar-top {
    font-size: 1.2vw;
    line-height: 50px;
    color: #969696;

    width: 6%;
    height: 3vw;
    float: left;
    text-align: center;
}

.bar3 .bar-middle {
    width: 74.2%;
    height: 3vw;
    background: rgb(238, 237, 237);
}

.bar3 .bar-percent {
    font-size: 1.5vw;
    line-height: 3vw;
    height: 3vw;
    padding-left: 13.2vw;
}

.bar3 .bar-middle-run {
    width: 0%;
    height: 3vw;
    font-size: 1.8vw;
    color: #fff;
    border-right: 1px #fff solid;
    background: #4c899b;
}

.bar3 .bar-bottom {
    font-size: 1.2vw;
    line-height: 50px;
    color: #969696;

    width: 6%;
    height: 3vw;
    float: left;
    text-align: center;
}

.bar3 .bar-title {
    width: 80%;
    font-size: 1.5vw;
    clear: both;
    padding-left: 26vw;
}


/* bar4 */
.bar4 {
    margin: 2vw 0;
}

.bar4 .bar-top {
    font-size: 1.2vw;
    line-height: 50px;
    color: #969696;

    width: 6%;
    height: 3vw;
    float: left;
    text-align: center;
}

.bar4 .bar-middle {
    width: 70.1%;
    height: 3vw;
    background: rgb(238, 237, 237);
}

.bar4 .bar-percent {
    font-size: 1.5vw;
    line-height: 3vw;
    height: 3vw;
    padding-left: 13.2vw;
}

.bar4 .bar-middle-run {
    width: 0%;
    height: 3vw;
    font-size: 1.8vw;
    color: #fff;
    border-right: 1px #fff solid;
    background: #4f6698;
}

.bar4 .bar-bottom {
    font-size: 1.2vw;
    line-height: 50px;
    color: #969696;

    width: 6%;
    height: 3vw;
    float: left;
    text-align: center;
}

.bar4 .bar-title {
    width: 80%;
    font-size: 1.5vw;
    clear: both;
    padding-left: 26vw;
}


/* bar5 */
.bar5 {
    margin: 2vw 0;
}

.bar5 .bar-top{
    font-size: 1.2vw;
    line-height: 50px;
    color: #969696;

    width: 6%;
    height: 3vw;
    float: left;
    text-align: center;    
}

.bar5 .bar-middle {
    width: 69.4%;
    height: 3vw;
    background: rgb(238, 237, 237);
}

.bar5 .bar-percent {
    font-size: 1.5vw;
    line-height: 3vw;
    height: 3vw;
    padding-left: 13.2vw;
}

.bar5 .bar-middle-run {
    width: 0%;
    height: 3vw;
    border-right: 1px #fff solid;
    background: rgb(214, 101, 101);
    font-size: 1.8vw;
    color: #fff;
}

.bar5 .bar-bottom {
    font-size: 1.2vw;
    line-height: 50px;
    color: #969696;

    width: 6%;
    height: 3vw;
    float: left;
    text-align: center;    
}

.bar5 .bar-title {
    width: 80%;
    font-size: 1.5vw;
    clear: both;
    padding-left: 26vw;
}

/* bar6 */
.bar6 {
    margin: 2vw 0;
}

.bar6 .bar-top {
    font-size: 1.2vw;
    line-height: 50px;
    color: #969696;

    width: 6%;
    height: 3vw;
    float: left;
    text-align: center;      
}

.bar6 .bar-middle {
    width: 68.6%;
    height: 3vw;
    background: rgb(238, 237, 237);
}

.bar6 .bar-percent {
    font-size: 1.5vw;
    line-height: 3vw;
    height: 3vw;
    padding-left: 13.2vw;
}

.bar6 .bar-middle-run {
    width: 0%;
    height: 3vw;
    border-right: 1px #fff solid;
    font-size: 1.8vw;
    color: #fff;
    background: rgb(127, 75, 148);
}

.bar6 .bar-bottom {
    font-size: 1.2vw;
    line-height: 50px;
    color: #969696;

    width: 6%;
    height: 3vw;
    float: left;
    text-align: center;      
}

.bar6 .bar-title{
    width: 80%;
    font-size: 1.5vw;
    clear: both;
    padding-left: 26vw;
}
/* ////////////////////////////////////////////////////////////// */
/* gap-section */
.gap-section {
    width: 100%;
    height: 1vw;
    background: rgb(216, 215, 215);
}

/* ////////////////////////////////////////////////////////////// */
/* character section */
#pc-character .title-character {
    font-size: 2vw;
    padding: 3vw 0 3vw 7.5vw;
    border-bottom: 1px dotted rgb(216, 215, 215);
}

#pc-character {
    width: 100%;
    height: 95vh;
    background: #cce7f4;
}

.mobile-swiper-container {
    background: #000;
}

.swiper-container {
    width: 95%;
    height: 75%;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    font-size: 18px;
    /* background: #cce7f4; */
    /* background: red; */
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-button-prev {
    color: rgb(45, 113, 172);
}

.swiper-button-next {
    color: rgb(45, 113, 172);
}

/* bullet */
.swiper-pagination {
    position: absolute;
    bottom: 5vw;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 8px;
}

.swiper-pagination-bullet {
    width: 0.7vw;
    height: 0.7vw;
}

/* 人物照片 */
.character-img1 {
    background-image: url(/lazyweb/GloriousTaiwan/img/pc-role1.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    float: left;
    width: 40vw;
    height: 30vw;
    left: 5vw;
    position: absolute;
    transform: translateY(-50%);
}

.character-img2 {
    background-image: url(/lazyweb/GloriousTaiwan/img/pc-role2.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    float: left;
    width: 40vw;
    height: 30vw;
    left: 5vw;
    position: absolute;
    transform: translateY(-50%);
}

.character-img3 {
    background-image: url(/lazyweb/GloriousTaiwan/img/pc-role3.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    float: left;
    width: 40vw;
    height: 30vw;
    left: 5vw;
    position: absolute;
    transform: translateY(-50%);
}

.character-img4 {
    background-image: url(/lazyweb/GloriousTaiwan/img/pc-role4.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    float: left;
    width: 40vw;
    height: 30vw;
    left: 5vw;
    position: absolute;
    transform: translateY(-50%);
}

.character-img5 {
    background-image: url(/lazyweb/GloriousTaiwan/img/pc-role5.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    float: left;
    width: 40vw;
    height: 30vw;
    left: 5vw;
    position: absolute;
    transform: translateY(-50%);
}

.content-block {
    float: left;
    width: 44vw;
    right: 5vw;
    position: absolute;
    /* background: yellow; */
}

/* 右字 */
#pc-character .article-title {
    font-size: 1.8vw;
    color: rgb(14, 60, 101);
    padding: 1vw 0;
}

#pc-character .article-subTitle {
    font-size: 1.5vw;
    padding: 0 0 1vw 0;
    color: rgba(0, 0, 0, 0.5);
}

#pc-character .article-text {
    font-size: 1vw;
    color: rgba(0, 0, 0,0.6);
    line-height: 1.8vw;
}

/* button - read more */
#pc-character .read-more-box  {
    text-align: right;
}

#pc-character button {
    border: rgba(0, 0, 0,0.6) 1px solid;
    color: rgba(0, 0, 0,0.6);
    background: none;
    margin-top: 1vw;
    padding: 0.2vw 0.4vw;
    font-size: 0.8vw;
}

#pc-character button:hover {
    background: rgb(104, 154, 179);
    color: #fff;
    cursor: pointer;
}

.swiper-slide a {
    text-decoration: none;
}

#pc-character .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0;
}

/* ////////////////////////////////////////////////////////////// */
/* article */
#pc-article {
    width: 100%;
}

#pc-article .article-section {
    width: 100%;
    overflow: hidden;
}

#pc-article .article-wrapper3 {
    margin-bottom: 5vw;
}

#pc-article .article-section .article-content {
    float: left;
    width: 54vw;
    padding-top: 3vw;
}

/* 文章照片 */
#pc-article .article-section .article-img1 {
    background-image: url(/lazyweb/GloriousTaiwan/img/article1.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    float: left;
    width: 40vw;
    height: 30vw;
    margin-top: 5vw;
}

#pc-article .article-section .article-img2 {
    background-image: url(/lazyweb/GloriousTaiwan/img/article2.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    float: left;
    width: 40vw;
    height: 30vw;
    margin-left: 5vw;
    margin-top: 5vw;
}

#pc-article .article-section .article-img3 {
    background-image: url(/lazyweb/GloriousTaiwan/img/article3.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    float: left;
    width: 40vw;
    height: 30vw;
    margin-top: 5vw;
}

#pc-article .article-title {
    font-size: 1.8vw;
    color: rgb(196, 48, 48);
    padding: 1vw 6vw;
}

#pc-article .article-subTitle {
    font-size: 1.5vw;
    padding: 0.3vw 6vw;
}

#pc-article .article-text {
    font-size: 1vw;
    padding: 1vw 5vw;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.8vw;
}

/* button - read more */
#pc-article .read-more-box  {
    text-align: right;
    margin-right: 0.4vw;
    padding-right: 5vw;
}
#pc-article a {
    text-decoration: none;
}

#pc-article button {
    /* width: 6vw; */
    border: rgba(0, 0, 0, 0.6) 1px solid;
    color: rgba(0, 0, 0, 0.6);
    background: none;
    padding: 0.2vw 0.4vw;
    font-size: 0.8vw;
}

#pc-article button:hover {
    background: rgb(196, 48, 48);
    color: #fff;
    cursor: pointer;
}

#pc-article hr {
    color: rgb(228, 160, 160); 
    width: 90%; 
    display: block; 
    margin: 0 auto; 
    margin-top: 2vw;
}

/* ////////////////////////////////////////////////////////////// */
/* footer */
.footer-style {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vw 0;
    text-align: center;
    font-family:'YuMin-Medium';
    font-weight: 400;
    font-style: normal;
    color: rgb(255, 255, 255);
    background-color: #000;
}


/* ////////////////////////////////////////////////////////////// */
/* ad section */
.title1 {
    font-size: 2vw;
    padding: 3vw 0 3vw 5vw;
    border-bottom: 1px dotted rgb(216, 215, 215);
}

#pc-ad {
    width: 100%;
}

#pc-ad .ad-img {
    width: 90%;
    display: block;
    margin: 0 auto;
    padding: 3vw 0;
}

#pc-ad .related-articles {
    padding: 2vw;
    text-align: center;
    font-size: 1.8vw;
}
/* new css */
.related-articles-wrapper {
    width:80%;
    /* height: 40vw;  */
    /* background: red; */
    margin:  0 auto;
    margin-bottom: 5vw;
}

.related-articles-wrapper .box {
    width:60%; 
    height: 10vw; 
    display: block;
    margin: 0 auto;
    margin-bottom: 1vw;
}

/* img */
.related-articles-wrapper .box .img-style {
    width:40%; 
    height: 10vw;
    float: left;
}

.related-articles-wrapper .box .news1 {
    background-image: url(/lazyweb/GloriousTaiwan/img/600x313_ad1.jpg); 
    background-position: center; 
    background-size: cover;
}

.related-articles-wrapper .box .news2 {
    background-image: url(/lazyweb/GloriousTaiwan/img/600x313_ad2.jpg); 
    background-position: right; 
    background-size: cover;
}

.related-articles-wrapper .box .news3 {
    background-image: url(/lazyweb/GloriousTaiwan/img/600x313_ad3.jpg); 
    background-position: center; 
    background-size: cover;
}

.related-articles-wrapper .box .news4 {
    background-image: url(/lazyweb/GloriousTaiwan/img/600x313_ad4.jpg); 
    background-position: center; 
    background-size: cover;
}

.related-articles-wrapper .box .news5 {
    background-image: url(/lazyweb/GloriousTaiwan/img/600x313_ad5.jpg); 
    background-position: right; 
    background-size: cover;
}

.related-articles-wrapper .box .news6 {
    background-image: url(/lazyweb/GloriousTaiwan/img/600x313_ad6.jpg); 
    background-position: center; 
    background-size: cover;
}

.related-articles-wrapper .box .news7 {
    background-image: url(/lazyweb/GloriousTaiwan/img/600x313_ad7.jpg); 
    background-position: center; 
    background-size: cover;
    position: relative;
}

/* 影片 */
.playImg {
    width: 20%;
    position: absolute;
    top: 35%;
    left: 40%;
}

/* content */
.related-articles-wrapper .box .content-style {
    width: 60%; 
    height: 10vw; 
    background: rgb(247, 247, 247); 
    float: left;
}

.related-articles-wrapper .box .content-style .text {
    font-size: 1.5vw; 
    padding: 2vw 1vw;
    display: flex;
    align-items: center;
    height: -webkit-fill-available;
}