:root {
	--main-bg-color: #272017;
	--main-title-color: #c8aa68;
	--main-subtitle-color: #9c4c32;
	--main-desc-color: #d2c29c;
	--main-follow-color: #a34a2d;
}

.container__row{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    position:relative;
    left:0;
    right:0;
    padding:0 10px;
    margin:auto;
    width:calc(100% - 20px);
    max-width:1240px
}
.cover{
    background-color:var(--main-bg-color);
}
.cover img{
    width:100%
}
.cover__mask{
    width:100vw;
    height:0;
    padding-bottom:100%;
    position:relative;
    overflow:hidden
}
.cover__content{
    padding:40px 10px 20px
}
.cover__main-article{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-flex:0;
    -ms-flex:0 0 100%;
    flex:0 0 100%;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    padding-bottom:20px
}
.main-article__img img{
    
}
.main-article__img,.main-article__content{
    -webkit-box-flex:0;
    -ms-flex:0 0 100%;
    flex:0 0 100%;
    color:#fff;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -ms-flex-line-pack:center;
    align-content:center
}
.main-article__content{
    margin-top:40px
}
.main-article__title{
    color:var(--main-title-color);
    margin-bottom:10px
}
.main-article__description{
    color:var(--main-desc-color);
}
.readmore__btn{
    line-height:40px;
    color:var(--main-title-color);
    background:0 0;
    width:240px;
    font-size:15px;
    cursor:pointer;
    border:1px solid var(--main-title-color);
    -webkit-transition:all .3s;
    transition:all .3s;
    text-align:center;
    margin:20px auto 0
}
.readmore__btn:hover{
    background:var(--main-title-color);
    color:#dadada;
    text-decoration:none
}
.article-list{
    margin-top:20px
}
.article-list__img{
    position:relative;
    height:0;
    cursor:pointer;
    overflow:hidden;
    display:block;
    -webkit-box-flex:0;
    -ms-flex:0 0 100%;
    flex:0 0 100%;
    padding-bottom:75%
}
.article-list__img:empty{
    -webkit-animation:imgShine 1s infinite;
    animation:imgShine 1s infinite;
    background-color:#9b9b9b;
    background-image:radial-gradient(at top left,#fff 0%,rgba(155,155,155,0.5) 80%,#9b9b9b 47%,#9b9b9b 100%),radial-gradient(at bottom right,#9b9b9b 0%,rgba(155,155,155,0.5) 80%,#9b9b9b 47%,#fff 100%)
}
.article-list__img::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    display:block;
    background:#000;
    opacity:0;
    -webkit-transition:all .3s;
    transition:all .3s
}
.article-list__img:hover::before{
    opacity:.8
}
.article-list__img:hover::after{
    content:"閱讀全文";
    width:150px;
    text-align:center;
    color:#fff;
    text-align:center;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    border:1px solid #fff;
    height:40px;
    line-height:40px
}
.article-list__img img{
    position:absolute;
    top:50%;
    left:0;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%)
}
.article-list{
    width:100%;
    display:block;
    text-align:left;
    font-size:0
}
.article-list__article{
    width:100%;
    display:inline-block;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    font-size:16px;
    margin-bottom:20px
}
.article-list__content{
    margin-top:-4px;
    -webkit-box-flex:0;
    -ms-flex:0 0 100%;
    flex:0 0 100%
}
.article-list__title{
    font-weight:500;
    cursor:pointer
}
.title--h1.main-article__subtitle{
    line-height:1.2;
    color:var(--main-subtitle-color);
}
.article-list__detail{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    line-height:1
}
.detail__info{
    display:inherit
}
.detail__category{
    margin-right:10px
}
.article-list__dot{
    overflow:hidden;
    margin:10px 0;
    height:3.8em
}
.article-list__title{
    font-size:18px
}
.three-column,.two-column,.gallery,.video{
    padding:40px 0 20px
}
.three-column{
    background:var(--main-bg-color);
    color:var(--main-title-color);
}
.two-column{
    background:var(--main-bg-color);
    color:var(--main-title-color);
}
.gallery{
    background:var(--main-bg-color);
    color:var(--main-title-color);
}
.gallery .lSAction>a{
    background-image:none
}
.gallery__item{
    height:340px
}
.gallery__img{
    height:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    overflow:hidden
}
.gallery__img img{
    height:100%;
    width:auto;
    max-width:none;
    opacity:.5;
    -webkit-transform:scale(.8);
    transform:scale(.8)
}
.active .gallery__img img{
    opacity:1
}
.gallery__btn{
    width:26px;
    height:26px;
    background:rgba(0,0,0,.6)
}
.gallery__btn .arrow{
    fill:#fff;
    -webkit-transform:translate(7px,10px);
    transform:translate(7px,10px)
}
.arrowL{
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
    position:absolute;
    right:0
}
.arrowR{
    -webkit-transform:rotate(-90deg);
    transform:rotate(-90deg)
}
.video{
    background-color:var(--main-bg-color);
    color:var(--main-title-color);
    padding:40px 0;
    background-position:center;
    background-size:cover
}
.video__content{
    position:relative;
    padding-bottom:50.17%;
    height:600px;
    width:100%;
    max-width:1120px;
    margin:auto;
    margin-top:40px
}
.video__content iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.sticky-area{
    position:relative
}
.follow{
    position:-webkit-sticky;
    position:sticky;
    bottom:0;
    left:0;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    background:var(--main-bg-color);
}
.follow__icon{
    background:var(--main-follow-color);
    width:calc((100% - 4px)/3);
    height:40px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    cursor:pointer
}
.follow__icon:hover{
    opacity:.5
}
.follow-icon__svg{
    fill-rule:evenodd;
    clip-rule:evenodd;
    fill:#fff;
    height:18px
}
.footer{
    background:#12171c;
    color:#dadada;
    padding:40px 0 20px;
    position:relative;
    height:340px
}
.footer__logo{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    width:358px;
    height:336px;
    overflow:hidden
}
.footer-logo__svg{
    stroke:#005db0;
    fill:none;
    clip-rule:evenodd;
    stroke-width:1;
    width:100%
}
.footer__content{
    position:relative
}
.footer__icons{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}
.footer__icon{
    width:32px;
    margin:0 20px;
    -webkit-transition:all .3s;
    transition:all .3s
}
.footer__icon:hover{
    opacity:.5
}
.footer-icon__svg{
    fill-rule:evenodd;
    clip-rule:evenodd;
    fill:#dadada;
}
.footer__copyright{
    position:absolute;
    bottom:20px;
    width:calc(100% - 20px);
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}
.copyright{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-ordinal-group:3;
    -ms-flex-order:2;
    order:2;
    -webkit-box-flex:0;
    -ms-flex:0 0 100%;
    flex:0 0 100%;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}
.copyright__logo{
    width:32px;
    height:32px;
    margin-right:10px;
    display:none
}
.copyright-logo__svg{
    fill-rule:evenodd;
    clip-rule:evenodd;
    fill:#dadada;
}
.footer__links{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-ordinal-group:2;
    -ms-flex-order:1;
    order:1;
    -webkit-box-flex:0;
    -ms-flex:0 0 100%;
    flex:0 0 100%;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    margin-bottom:60px
}
.footer__link{
    margin:0 10px
}
@media screen and (min-width:1024px){
    .container__row{
        width:calc(100% - 20px)
    }
    .cover__mask{
        padding-bottom:50%
    }
    .cover__content{
        padding:60px 0 20px
    }
    .cover__main-article{
        -ms-flex-wrap:nowrap;
        flex-wrap:nowrap;
        padding-bottom:40px;
        -webkit-box-flex:0;
        -ms-flex:0 0 100%;
        flex:0 0 100%
    }
    .main-article__img{
        -webkit-box-flex:0;
        -ms-flex:0 0 50%;
        flex:0 0 50%
    }
    .main-article__content{
        -webkit-box-flex:0;
        -ms-flex:0 0 46%;
        flex:0 0 46%;
        padding-left:40px;
        margin-top:0
    }
    .main-article__title{
        margin-bottom:20px
    }
    .readmore__btn{
        margin:40px 0 0
    }
    .article-list{
        margin-top:40px
    }
    .article-list__content{
        margin-top:0
    }
    .three-column,.two-column,.gallery{
        padding:60px 0 20px
    }
    .three-column .article-list{
        width:calc(100% + 20px);
        margin-left:-10px;
        margin-right:-10px
    }
    .three-column .article-list__article{
        width:calc((100% - 1px)/3);
        padding:0 10px;
        margin-bottom:40px
    }
    .two-column .article-list__article{
        width:calc((100% - 1px)/2);
        margin-bottom:40px
    }
    .two-column .article-list__article:nth-child(odd){
        padding:0 20px 0 0
    }
    .two-column .article-list__article:nth-child(even){
        padding:0 0 0 20px
    }
    .gallery__img{
        overflow:visible
    }
    .gallery__item{
        height:627px
    }
    .galleryWrap{
        overflow:hidden;
        -webkit-transform:scale(.4);
        transform:scale(.4);
        -webkit-transform-origin:50% 10%;
        transform-origin:50% 10%
    }
    .video{
        padding:60px 0
    }
    .follow{
        bottom:141px;
        left:50px;
        width:40px;
        height:0;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
        margin-top:-141px;
        margin-bottom:141px
    }
    .follow__icon{
        width:40px;
        height:40px;
        margin-top:1px
    }
    .follow-icon__svg{
        height:12px
    }
    .icon--line{
        display:none
    }
    .footer{
        padding:60px 0 40px;
        height:350px
    }
    .footer__logo{
        width:528px;
        height:420px
    }
    .footer__copyright{
        bottom:40px
    }
    .copyright{
        -webkit-box-ordinal-group:2;
        -ms-flex-order:1;
        order:1;
        -webkit-box-flex:0;
        -ms-flex:0 0 auto;
        flex:0 0 auto;
        -webkit-box-pack:start;
        -ms-flex-pack:start;
        justify-content:flex-start
    }
    .copyright__logo{
        display:block
    }
    .footer__links{
        -webkit-box-ordinal-group:3;
        -ms-flex-order:2;
        order:2;
        -webkit-box-flex:0;
        -ms-flex:0 0 auto;
        flex:0 0 auto;
        -webkit-box-pack:end;
        -ms-flex-pack:end;
        justify-content:flex-end;
        margin-bottom:0
    }
    .footer__link{
        margin:0 0 0 20px
    }
}

@media screen and (max-width:799px){
    .cover__mask{
        padding-bottom:150%
    }

}