body{ font-family: 'Noto Sans TC', sans-serif;}
.custom-container-width{ max-width: 1200px;}
.navbar{ height: 60px; background: #fff;}
.navbar-brand{ width: 142px;}
.navbar-nav{ margin-left:100px;}
.nav-item{ margin:auto 2vw;}
.nav-item a{ color: #000; font-weight: normal; display: block;}
.cover{ height: 100vh; background: url(../images/cover_pic.jpg) center top no-repeat; margin-top:60px;}
.cover2{ height: 100vh; background: url(../images/cover_pic2.jpg) center top no-repeat;}
.cover_top img,.cover_top2 img{ max-width: 100%; min-width: 1280px;}
.dropdown-menu{ left:-45px; background: #000;}
.dropdown-item{ font-size: 0.9rem;}
.cover_top,.cover_top2{ height: 100%;}
.cover_top .cover_l{ background: url(../images/cover_top.png) left bottom no-repeat; background-size: cover;}
.cover_top .cover_r{ background: url(../images/cover_top.png) right bottom no-repeat; background-size: cover;}
.cover_top2 .cover_l{ background: url(../images/cover_top2.png) left top no-repeat; background-size: cover;}
.cover_top2 .cover_r{ background: url(../images/cover_top2.png) right top no-repeat; background-size: cover;}
.anigif{ position: absolute; width: 787px; left: calc(50% - 722px); top: 156px;}

/*article*/
article{ background: #fff8dc;}
.group{ margin-top: -150px;}
.title img{ max-width: 600px;}
.article_pic{ text-align: center;}
.article_pic img{ width: 518px; margin-left:calc(50% - 259px); padding-right:24px;}
h3{ font-weight: 900; color: #3e3a39; font-size: 1.6rem; line-height: 3rem; text-align: center;}
.text_1{ margin-top:96px;}
.article_text p{ font-weight: 500; text-align: justify; line-height: 2rem; font-size:1.1rem;}
.more { padding: 8px 35px; font-weight: bolder; font-size: 1.5rem; line-height: 1rem; color:#feb4be; border:#feb4be 3px solid;}
.more:hover{ text-decoration: none; color: #feb4be; background: #e1f4fe;}

/*youtube*/
.youtube{ background: url(../images/video_bg.jpg)center bottom no-repeat; background-size: cover; padding:16vh 0;}
.youtube iframe{ width: 1260px; height: 709px; -webkit-filter:drop-shadow(8px 8px 5px #ddd); filter:drop-shadow(8px 8px 5px #ddd);}
.center-vertical{ position: relative; top: 50%; transform: translateY(-50%);}
.gallery_text{ z-index: 10; position: absolute; bottom:0; width: 100%; background: #ffdc96; mix-blend-mode: multiply; height: 11vw;}
.gallery_pic{ margin-left: calc(50% - 35vw); width: 70vw; position: absolute; z-index: 20; bottom:2vw;}

/*footer*/
footer{ background: #231815; text-align: center;}
footer ul{ display: inline-block;}
.footer_text li{ float:left; color:#fff; list-style: none; padding:0 50px;}
.copyright{ color: #959595;}
footer a,footer a:hover{ color: #fff}

@media screen and (max-width: 992px){
    .youtube{ height: 69vw; background: url(../images/video_bg_m.jpg)center top no-repeat; background-size:contain;}
    .youtube iframe{ width: 89vw; height: 50vw; position: relative; position: absolute; left:calc(50% - 44.5vw); top:13vw;}
    
    .navbar-nav{ display: none;}
}
@media screen and (max-width: 768px){
    .navbar{ height: 8vh;}
    .cover{ background: url(../images/cover_pic_m.jpg) center top no-repeat; background-size: cover; height: 176vw;}
    .cover2{ background: url(../images/cover_pic2_m.jpg) center top no-repeat; background-size: cover; height: 180vw;}
    .cover_top,.cover_top2{ display: none;}
    .navbar-brand{ width: 12vh;}
    .group{ margin-top:-51px; width: 100%;}
    article{ height: auto; background-size: cover;}
    .pic_1{ margin-top:-20px}
    .article_pic img{ margin-left:auto;  padding-right:0;}
    h3{ font-size: 0.85rem; letter-spacing: 0; line-height: 1.4rem; text-align: center;}
    .article_text{ padding:16px 19px;}
    .text_1{ margin-top:0;}
    .article_text p{ font-size:0.6rem; line-height: 1.5rem;}
    .more { padding: 2px 20px 3px; font-weight: bolder; font-size: 1.2rem; line-height: 1.1rem; color:#feb4be; border:#feb4be 2px solid; margin-top: -8px;}
    footer{ margin-top: 0;}
    .footer_text li{ padding:0; float:none; border-color:#231815!important;}
    .footer_text{ padding-left: 0;}
    .social_icon{ padding-left: 0 ; margin-left: -7vw;}
    .gallery_text{ z-index: 10; margin:0 auto; position: absolute; left: calc(50% - 20vw); width: 40vw;}
}