@charset "utf-8";
/*CSS Info ======================================================================
File Name: Layout.css
Editor: Eliam
CreateDate:2023/03/20
Last Editor: Rebecca
LastDate: 2023/05/24
Version: 4.0
---------------------------
【 Table of Contents 】
	DIV XHTML頁面
	Free Style
	使用jQuery
=================================================================================*/

/*===============================================================================
                         Pages typography setting
=================================================================================*/


/*    Environment analysis setting
================================================== */

/* 海岸水質監測 */
.leftArea{
    width: 70%;
}
.rightArea{
    width: 30%;
}
 
.leftArea .ctrlArea{
    top: 0;
    right: 0;
}

/*svg設定*/
.mapImg_position {
    width: 190%;
    top: -24%;
    left: -37%;
}

.station {
    fill: #00349b;
}
.outer {
    fill: #fff;
}

/*圖例*/
.ctrlArea .lenged {
    margin-top: 1rem;
}
.ctrlArea .lenged li {
    margin-top: 0.5rem;
}
.ctrlArea .icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #ABAAAA;
    background: #fff;
    vertical-align: middle;
    margin-right: 1rem;
}
.ctrlArea li:first-child .icon {
    border-radius: 50px;
}
    .ctrlArea .lenged p {
        display: inline-block;
        line-height: 1rem;
        vertical-align: text-bottom;
        margin: 0;
    }
.leftArea p.notice {
    font-size: 0.8rem;
    margin: 1.5rem;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
}
    .leftArea p.notice span {
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        background: #ccc;
        border: 1px solid #fff;
        margin: 0 0.3rem;
        vertical-align: text-bottom;
    }
.leftArea p.notice span:first-child {
    border-radius: 50px;
    margin-right: 0;
}

    /* 監測值卡片 */

    .datdArea .Card{
        margin: 0;
        display: block;
        padding: 1rem;
        overflow: hidden;
        margin-bottom: 0.6rem;
    }
    .dataTitle {
        text-align: left;
        margin-bottom: 0.5rem;
    }
    .dataTitle span:first-child{
        font-size: 1.2rem;
        font-weight: bold;
    }
    .dataTitle span:last-child{
        font-size: 0.8rem;
    }    
    
    .dataValue{
        font-size: 2rem;
        font-weight: bold;
        text-align: right;	
    }

/*.popSci{
    margin-right: 1rem;
}*/

/*.relatedIns .linkArea .moreBtn {
    margin-bottom: 2rem;
}*/
.insContent {
    margin-bottom: 0;
    vertical-align: bottom;
    margin-top: 3.8rem;
}

.videoBox {
    text-align: center;
    color: #03485A;
}

    .videoBox:hover {
        font-weight: bold;
        color: #347E98;
    }

    .videoBox:before {
        content: "";
    }

    .videoBox .thumbnailBox {
        position: relative;
        cursor: pointer;
        margin: 4.8rem 1rem 1rem 1rem;
    }

        .videoBox .thumbnailBox .btnPlay {
            width: 100%;
            height: 100%;
            background-image: url(../../images/video/btnPlay.png);
            background-repeat: no-repeat;
            background-position: center center;
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgba(0,0,0,0.3);
            transition: background-color 0.3s ease;
        }

    .videoBox:focus .btnPlay {
        outline: 2px dotted var(--subColor2);
    }

    .videoBox:hover .thumbnailBox .btnPlay {
        background-color: rgba(0,0,0,0);
    }

.thumbnailBox img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}


/*----------------- RWD -----------------*/

@media only screen and (min-width: 76.25em) and (max-width: 86.1875em) { /*1220~1379*/

}

@media only screen and (min-width: 61.0525em) and (max-width: 76.1875em) { /*977~1219*/
    .mapImg_position {
        width: 200%;
        top: -10%;
        left: -42%;
    }

}

@media only screen and (min-width: 48em) and (max-width:61em) { /*768~976*/
    .leftArea, .rightArea {
        width: 100%;
    }
    .mapArea {
        height: 60vh;
    }

}

@media only screen and (max-width: 47.9735em) { /*767↓*/
    .leftArea, .rightArea {
        width: 100%;
    }
}

@media only screen and (max-width: 23.4375em) { /*375↓*/
    .leftArea, .rightArea {
        width: 100%;
    }

    .gridBox {
        display: block;
    }

    .mapImg_position {
        width: 260%;
        top: -15%;
        left: -66%;
    }
}