@import "https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,400,500,700,900&display=swap&subset=chinese-traditional";
/*
 * JUKSY PLUS VOL.7 — 沿用 202211-camping 的版型（PM 指定比照舊版：hover、文字格式、划水道）
 * 本期主色（hover）：#ffbf40
 * 1rem = 10px
 */
html{
    font-size:62.5%
}
img{
    width:auto;
    height:auto;
    max-width:100%
}
a{
    color:#000;
    text-decoration:none
}
button{
    border-width:0;
    outline-width:0
}
.imgWrap{
    display:inline-flex
}
body{
    background-color:#ededed;
    font-family:noto sans tc,"sans-serif";
    color:#000;
    margin:0;
    overflow-x:hidden   /* .kv 用 50vw 滿版，含捲軸寬度時避免出現水平捲動 */
}
body *{
    box-sizing:border-box
}
.isHidden{
    display:none!important
}
main{
    width:100%;
    max-width:135.2rem;
    padding-left:2.6rem;
    padding-right:2.6rem;
    margin-left:auto;
    margin-right:auto
}

/* ---------- 1.0 主視覺：滿版，橘色色帶已含在圖片中 ---------- */
.kv{
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    background-color:#ffbf40
}
.kv .imgWrap,.kv picture{
    display:block;
    width:100%
}
.kv img{
    display:block;
    width:100%;
    height:auto
}

/* ---------- 共用：區塊標題、文字框 ---------- */
.section{
    position:relative
}
.section .sectionTitle{
    font-size:1.8rem;
    font-weight:900;
    padding:.8rem 1.2rem;
    background-color:#fff;
    border:solid 2px #000;
    display:inline-flex;
    position:absolute;
    left:-.8rem;
    top:-1.4rem;
    z-index:1
}
@media screen and (max-width:768px){
    .section .sectionTitle{
        font-size:1.6rem
    }
}
.textBlock{
    position:relative
}
.textBlock .text{
    background-color:#fff;
    border:solid 2px #000
}
.textBlock .text:empty{
    display:none
}
.textBlock .top{
    font-size:1.4rem;
    padding:.8rem 1.2rem;
    position:absolute;
    bottom:calc(100% - 2px);
    left:0;
    z-index:1
}
.textBlock .bottom{
    font-size:1.4rem;
    font-weight:900;          /* 作者與標題同字重，比照版位示意 */
    padding:.8rem 1.2rem;
    position:absolute;
    top:calc(100% - 2px);
    right:0;
    z-index:1
}
.textBlock .middle{
    padding:1.6rem 2.4rem;
    font-size:1.6rem;
    font-weight:900;
    line-height:1.5
}
.textBlock .middle .textInside{
    display:block            /* 標題完整顯示，不做 line-clamp */
}
.textBlock.big .middle{
    font-size:2.8rem
}
.textBlock.big .middle .textInside{
    display:block
}
@media screen and (max-width:768px){
    .textBlock .top{
        font-size:1.2rem
    }
    .textBlock .middle{
        font-size:1.6rem;
        line-height:2.4rem
    }
    .textBlock .bottom{
        font-size:1.2rem
    }
    .textBlock.big .middle{
        font-size:2.2rem;
        line-height:3.2rem
    }
    .textBlock.big .bottom{
        font-size:1.4rem
    }
}
@media screen and (max-width:414px){
    .textBlock .top{
        font-size:1.4rem
    }
    .textBlock .bottom{
        font-size:1.4rem
    }
}
.textBlockWithImg{
    display:inline-block
}
.textBlockWithImg .textBlock{
    max-width:86.915%;
    margin-left:-.8rem;
    margin-top:-.8rem;
    display:inline-block
}
.textBlockWithImg .text{
    transition:background-color .5s ease
}
.textBlockWithImg:hover .text{
    background-color:#ffbf40
}
@media screen and (max-width:768px){
    .textBlockWithImg .textBlock{
        max-width:100%;
        width:100%
    }
}

/* ---------- 2.0 編輯室報告 ---------- */
.section1{
    margin-top:9.4rem;
    padding:4.8rem 8rem 3.2rem;
    border-radius:1.2rem;
    border:solid 2px #000;
    background-color:#fff;
    transition:background-color .5s ease
}
.section1:hover{
    background-color:#ffbf40
}
.section1 .content{
    font-size:1.8rem;
    font-weight:700;
    line-height:1.8
}
.section1 .text p{
    margin:0 0 1.6em
}
.section1 .text p.signature{
    text-align:right;
    margin-bottom:0
}
@media screen and (max-width:768px){
    .section1{
        margin-top:5.6rem;
        padding:3.2rem 3.8rem 2.4rem
    }
    .section1 .content{
        font-size:1.6rem;
        line-height:1.7
    }
}

/* ---------- 3.0 COVER STORY：左直式大圖、右合成圖＋標題 ---------- */
.section2{
    margin-top:9.4rem
}
.section2 .content{
    display:flex
}
.section2 .coverStory{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    width:100%
}
.section2 .img1{
    width:50.3%
}
.section2 .side{
    width:46.8%;
    display:flex;
    flex-direction:column;
    align-items:flex-end
}
.section2 .img2{
    width:100%
}
.section2 .imgWrap img{
    width:100%;
    height:auto
}
.section2 .side .textBlock{
    max-width:none;
    width:100%;
    margin-left:0;
    margin-top:4rem
}
.section2 .side .textBlock .middle{
    font-size:2.2rem;
    line-height:1.5
}
.section2 .side .textBlock .middle .textInside{
    display:block
}
@media screen and (max-width:768px){
    .section2{
        margin-top:5.6rem
    }
    .section2 .coverStory{
        flex-wrap:wrap
    }
    .section2 .side .textBlock{
        margin-top:2.4rem
    }
    .section2 .side .textBlock .middle{
        font-size:1.8rem
    }
}
@media screen and (max-width:414px){
    .section2 .img1{
        width:48.6%
    }
    .section2 .side{
        width:48.6%
    }
    .section2 .side .textBlock{
        width:212%;            /* 標題框回到滿版（跨過左圖） */
        margin-top:2.4rem;
        align-self:flex-end
    }
    .section2 .side .textBlock .middle{
        font-size:1.6rem
    }
}

/* ---------- 5.0 延伸文章：1,2,3 → 4(big)+5 → 6+7(big) ---------- */
.section3{
    margin-top:9.7rem
}
.section3 .content{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between
}
.section3 .content .textBlockWithImg{
    width:32.3%;
    margin-top:10.8rem
}
.section3 .content .textBlockWithImg .imgWrap{
    position:relative;
    padding-bottom:95.24%;       /* 840x800 */
    width:100%;
    overflow:hidden
}
.section3 .content .textBlockWithImg img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover
}
.section3 .content .textBlockWithImg.big{
    width:66.15%
}
.section3 .content .textBlockWithImg.big .imgWrap{
    padding-bottom:46.5%;        /* 與同列的 32.3% 卡片等高；1840x800 略裁 */
}
.section3 .content .textBlockWithImg:nth-of-type(1),
.section3 .content .textBlockWithImg:nth-of-type(2),
.section3 .content .textBlockWithImg:nth-of-type(3){
    margin-top:0
}
@media screen and (max-width:768px){
    .section3{
        margin-top:5.6rem
    }
    .section3 .content .textBlockWithImg{
        width:100%;          /* 手機版一列一篇，比照版位示意 */
        margin-top:6.8rem
    }
    .section3 .content .textBlockWithImg.big{
        width:100%
    }
    .section3 .content .textBlockWithImg.big .imgWrap{
        padding-bottom:95.24%   /* 手機版換 840x800 的 _m 圖 */
    }
    .section3 .content .textBlockWithImg:nth-of-type(2),
    .section3 .content .textBlockWithImg:nth-of-type(3){
        margin-top:6.8rem
    }
}
@media screen and (max-width:414px){
    .section3 .content .textBlockWithImg{
        width:100%;
        margin-top:6.8rem
    }
    .section3 .content .textBlockWithImg:nth-of-type(2){
        margin-top:6.8rem
    }
    .section3 .content .textBlockWithImg .textBlock{
        margin-top:-1.6rem
    }
}

/* ---------- 6.0 主題影片：左大右兩小 ---------- */
.videoSection{
    margin-top:10.8rem
}
.videoSection .content{
    display:flex;
    justify-content:space-between;
    align-items:flex-start
}
.videoSection .videoMain{
    width:61%
}
.videoSection .videoSide{
    width:35.5%;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}
.videoSection .videoItem+.videoItem{
    margin-top:3.2rem
}
.videoSection .videoWrap{
    width:100%;
    position:relative;
    padding-bottom:56.25%;
    background-color:#000
}
.videoSection .videoWrap iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.videoSection .textBlock{
    margin-top:-.2rem
}
.videoSection .videoSide .textBlock .middle{
    font-size:1.4rem;
    padding:1.2rem 1.6rem
}
@media screen and (max-width:768px){
    .videoSection{
        margin-top:6.5rem
    }
    .videoSection .content{
        flex-wrap:wrap
    }
    .videoSection .videoMain,.videoSection .videoSide{
        width:100%
    }
    .videoSection .videoSide{
        margin-top:3.2rem
    }
}

/* ---------- 7.0 PODCAST ---------- */
.podcastSection{
    margin-top:10.8rem
}
.podcastSection iframe{
    display:block;
    width:100%;
    border-radius:1.2rem
}
@media screen and (max-width:768px){
    .podcastSection{
        margin-top:6.5rem
    }
}

/* ---------- 8.0 過往精選 slider（沿用 camping） ---------- */
.sectionSlider{
    margin-top:9.7rem
}
.sectionSlider .content{
    position:relative
}
.sectionSlider .content .sliderWrap{
    margin-left:-1rem;
    margin-right:-1rem;
    padding-bottom:13.4rem
}
.sectionSlider .content .textBlockWithImg{
    width:420px;
    margin-left:1rem;
    margin-right:1rem
}
.sectionSlider .content .textBlockWithImg img[src=""]{
    display:none
}
.sectionSlider .content .textBlockWithImg .textInside{
    display:block;
    white-space:normal       /* 過往精選標題也完整顯示，原本是單行 ellipsis */
}
.sectionSlider .content .slick-track{
    display:flex;
    align-items:flex-start   /* 標題不裁字後長度不一，改上緣對齊讓封面排整齊 */
}
.sectionSlider .content .btn{
    position:absolute;
    bottom:0;
    width:5.6rem;
    height:5.6rem;
    border-radius:2.8rem;
    background-color:transparent;
    transition:all .5s
}
.sectionSlider .content .prevBtn{
    right:calc(50% + 8rem);
    background-image:url(https://assets.juksy.com/events/202609-juksy-plus-vol7/img/slider/left_w.svg);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    cursor:pointer
}
.sectionSlider .content .prevBtn:hover{
    background-image:url(https://assets.juksy.com/events/202609-juksy-plus-vol7/img/slider/left_b.svg)
}
.sectionSlider .content .prevBtn.slick-disabled{
    background-image:none;
    cursor:default
}
.sectionSlider .content .nextBtn{
    left:calc(50% + 8rem);
    background-image:url(https://assets.juksy.com/events/202609-juksy-plus-vol7/img/slider/right_w.svg);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    cursor:pointer
}
.sectionSlider .content .nextBtn:hover{
    background-image:url(https://assets.juksy.com/events/202609-juksy-plus-vol7/img/slider/right_b.svg)
}
.sectionSlider .content .nextBtn.slick-disabled{
    background-image:none;
    cursor:default
}
.sectionSlider .content .countArea{
    position:absolute;
    bottom:2rem;
    left:50%;
    transform:translateX(-50%);
    font-size:1.6rem
}
.sectionSlider .content .countArea .count{
    display:inline-block;
    margin-right:2rem
}
.sectionSlider .content .countArea .total{
    display:inline-block;
    margin-left:2rem
}
@media screen and (max-width:768px){
    .sectionSlider{
        margin-top:5.6rem
    }
    .sectionSlider .content .sliderWrap{
        padding-bottom:9.6rem
    }
    .sectionSlider .content .textBlock{
        margin-top:2rem
    }
}
@media screen and (max-width:550px){
    .sectionSlider .content .textBlockWithImg .imgWrap{
        display:block
    }
    .sectionSlider .content .textBlockWithImg img{
        width:100%
    }
}

/* ---------- 4.0 小編划水道（沿用 camping） ---------- */
.marqueenSection{
    background-color:#fff;
    padding-top:5.6rem;
    padding-bottom:5.6rem;
    border-radius:12px;
    border:solid 2px #000;
    margin-top:9.7rem
}
@media screen and (max-width:768px){
    .marqueenSection{
        margin-top:5.6rem
    }
}
.marqueen1,.marqueen2{
    width:100%;
    overflow:hidden
}
.marqueen1 .barWrap,.marqueen2 .barWrap{
    display:flex;
    align-items:center
}
.marqueen1 .bar,.marqueen2 .bar{
    display:flex
}
.marqueen1 .imgWrap,.marqueen2 .imgWrap{
    width:80px;
    height:80px
}
.marqueen1{
    padding-bottom:5.6rem
}
.barBlock{
    margin-left:1rem;
    margin-right:1rem;
    display:inline-flex;
    align-items:center
}
.barBlock .imgWrap{
    width:8rem;
    right:8rem;
    border-radius:4rem;
    border-width:4px;
    border-style:solid;
    margin-right:1.6rem;
    overflow:hidden;
    flex-shrink:0
}
.barBlock .imgWrap img{
    width:100%;
    height:100%;
    object-fit:cover
}
.barBlock .imgWrap.orange{
    border-color:#ff8c38
}
.barBlock .imgWrap.yellow{
    border-color:#ffe200
}
.barBlock .imgWrap.blue{
    border-color:#0062ff
}
.barBlock .imgWrap.green{
    border-color:#3eff9f
}
.barBlock .imgWrap.pink{
    border-color:#ff31cf
}
.barBlock .imgWrap.purple{
    border-color:#a5f
}
.barBlock .imgWrap.lightBlue{
    border-color:#00f5ff
}
.barBlock .imgWrap.brown{
    border-color:#918661
}
.barBlock .imgWrap.red{
    border-color:#ff7676
}
.barBlock .text{
    width:24rem
}
.barBlock .text .description{
    font-size:1.6rem;
    line-height:1.5;
    font-weight:900;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden
}
.barBlock .text .info{
    font-size:1.4rem;
    margin-top:1.6rem
}

/* ---------- footer：改成本期主色，版權字黑 ---------- */
footer{
    background-color:#ffbf40;
    margin-top:8rem;
    padding:3.6rem 2.6rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center
}
footer .copyRight{
    font-size:1.4rem;
    line-height:1.6;
    font-weight:700;
    color:#000;
    text-align:center;
    letter-spacing:.1em
}
@media screen and (max-width:768px){
    footer{
        margin-top:4rem;
        padding:2.4rem 2rem
    }
    footer .copyRight{
        font-size:1.2rem
    }
}