/*body{ font-family:"Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;}*/
body{ font-family: 'Noto Serif TC', serif;}
.custom-container-width{ max-width: 1280px;}
.navbar{ height: 100px; background: #000;}
.navbar-brand{ width: 142px;}
.navbar-nav{ margin-left:100px;}
.nav-item a{ letter-spacing: 2px; font-family: times new roman,times,serif;}
.dropdown-toggle::after{ position: absolute; top: 17px; color:aqua;}
.dropdown-toggle:active::after{ top: 20px;}
.dropdown-menu a:hover {
    background: #000000;
    background: -moz-linear-gradient(left, #000000 0%, #4b3d1a 24%, #57471f 50%, #4b3d1a 76%, #000000 100%);
    background: -webkit-linear-gradient(left, #000000 0%, #4b3d1a 24%, #57471f 50%, #4b3d1a 76%, #000000 100%);
    background: linear-gradient(to right, #000000 0%, #4b3d1a 24%, #57471f 50%, #4b3d1a 76%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=1);
}
.dropdown-menu{ left:-45px; background: #000;}
.dropdown-item{ font-size: 0.9rem;}
.cover{ height: 96vh; background: url(../images/cover_pic.jpg) center top no-repeat; margin-top:100px; background-size: cover; overflow: hidden;}
.cover2{ height: 100vh; background: url(../images/cover2_pic.jpg) center bottom no-repeat; background-size: cover;}
.cover_top{ height: 100%;}
.cover_l{ background: url(../images/cover_top.png)bottom left no-repeat; background-size: cover; height: 100%;}
.cover_r{ background: url(../images/cover_top.png)bottom right no-repeat; background-size: cover; height: 100%;}
.cover2_l{ background: url(../images/cover2_top.png)bottom left no-repeat; background-size: cover; height: 100%;}
.cover2_r{ background: url(../images/cover2_top.png)bottom right no-repeat; background-size: cover; height: 100%;}

/*article*/

.article_text1{ position: absolute; top:10vw; margin: auto 6.5rem 0 5vw;}
h3{ font-family: 'Noto Serif TC', serif; font-weight: 900; letter-spacing: 2px; color: #fff; font-size: 1.3rem; line-height: 2.6rem;}
article p{ font-family:  'Noto Serif TC', serif; font-weight: 600; letter-spacing: 2px; text-align: justify; line-height: 2.2rem; font-size:1.04rem; color:#fff; margin-top:20px;}
.more {padding: 4px 14px;font-family: "Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;font-weight: 900;letter-spacing: 2px;font-size: 1.2rem;color:#fff;border:2px #fff solid;right:0;position: absolute;}
.more:hover{ text-decoration: none; color:#fff; }
.banner{
    background: #ff5045;
    background: -moz-linear-gradient(left, #ff5045 0%, #000000 100%);
    background: -webkit-linear-gradient(left, #ff5045 0%, #000000 100%);
    background: linear-gradient(to right, #ff5045 0%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5045', endColorstr='#000000', GradientType=1);
}

/*youtube*/
.youtube{ background: url(../images/video_bg.jpg)center center no-repeat; position: relative; background-size:cover; height: 59.2vw;}
.youtube iframe{ max-width: 74vw; max-height: 42.5vw; margin-left:calc(50% - 37vw); margin-top:8vw; border:5px solid #fff!important;}

/*.center-vertical{ margin: 0; position: absolute; top: 50%; -ms-transform: translateY(50%);transform: translateY(50%);}*/

/*lightslider*/
.gallery_img{ width: 70vw; text-align: center; margin-left:15vw; height: 615px;}
.gallery_img img{ width: 360px; display: inline-block; margin-top: 308px; transform: translateY(-50%);}
#image-gallery li.active .gallery_img img{ width: 400px;}
.lSSlideOuter .lSPager.lSGallery{ width:622px!important; margin-left:calc(50% - 311px)!important; margin-top:24px!important;}
.lSSlideOuter .lSPager.lSGallery li{ width:58px!important; margin:0 6px;}
#image-gallery li{ opacity: .2; text-align: center;}
#image-gallery li.active {opacity: 1;}

/*footer*/
footer{ background: #231815; text-align: center; margin-top: 80px;}
footer ul{ display: inline-block;}
.social_icon{ padding-left:0;}
.social_icon li{ float:left; width: 30px; height: 30px; margin:30px; display: grid;}
.social_icon li a{ border:2px solid #fff; padding:0 7px; font-size: 2rem; font-weight: bolder; width: 50px; height: 50px;}
.footer_text li{ float:left; color:#fff; list-style: none; padding:0 50px;}
.copyright{ color: #fff;}
footer a,footer a:hover{ color: #fff}

@media screen and (max-width: 1440px){
    .cover{ height: 860px; }
    .ani_3{ height: 140px; position: absolute; top:59.5%; left:calc(50vw - 960px + 21vw);}
    .ani_4{ height: 140px; position: absolute; top:59.5%; right:calc(50vw - 960px + 21vw);}
    .more{ margin-top:0;}
}


@media screen and (max-width: 768px){
    .navbar{ height: 8vh; width: 100vw;}
    .youtube{ background: #000 url(../images/video_bg_m.jpg)center top no-repeat; position: relative; background-size: 100% 100%; height: 68vw;}
    .youtube iframe{ max-width: 84vw; max-height: 47.8vw; margin-left:calc(50% - 42vw); margin-top:8.7vw; border:3px solid #fff!important;}
    .cover_top{ display: none;}
    .navbar-brand{ width: 12vh;}
    .cover2,.cover3{ position: relative; overflow: hidden;}
    .cover2{ height: 100vh; background: url(../images/cover2_pic_m.jpg) center bottom no-repeat; background-size: cover;}
    .cover2_m{ position: absolute; width: 22vw; left:auto; right:5vw; bottom:-20vw;}
    .article_text1_m{ position: absolute; top:10vw; left:0; margin:0 12vw;}
    h3{ color: #fff; font-size: .9rem; line-height: 1.3rem;}
    article p{ font-family:  'Noto Serif TC', serif; font-weight: 600; letter-spacing: 0; text-align: justify; line-height: 1.3rem; font-size:0.8rem; color:#fff; margin-bottom:17px;}
    .more { letter-spacing: 4px; font-size: 0.7rem; color:#fff; border:2px #fff solid; position: relative; margin-left:calc(50% - 11vw); padding: 4px 8px 4px 13px; text-align: center;}
    .more:hover{ text-decoration: none; color:#fff; }
    
    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;}

    .cover{ background: url(../images/cover_pic_m.jpg) center bottom no-repeat; background-size: 100% auto; height: 106vh; margin:8vh 0 0; overflow: hidden; position: relative;}
}