@charset "utf-8";
/*CSS Info ======================================================================
File Name: Index.css
Editor: Sophia
CreateDate:2010/12/06
Last Editor: Rebecca
LastDate: 2024/05/24
Version: 4.0
---------------------------
【 Table of Contents 】
	DIV XHTML頁面
	Free Style
	使用jQuery
=================================================================================*/

/*===============================================================================
                         以下是內頁版面設定
=================================================================================*/
#Wrap {
	background-image: url("../../images/banner_Img.svg"),url("../../images/banner_BG.png");
	background-repeat: no-repeat;
	overflow: hidden;
	background-size: 35%, 100%;
	background-position: right 15rem top 10rem, top;
}

/*-----------------Header-----------------*/
header {
}

header .wrapper {
    padding-top: 0;
    padding-bottom: 0;
}
.toggleMenuLabel i.fas ,.topNavArea ul li a,.SearchArea .searchWord, .SearchArea .searchWord a{
    color: #fff;
}
.topNavArea ul li a:hover, .SearchArea .searchWord a:hover {
    text-decoration:underline;
}
.TitleBarR {
	color: #fff;
}
#Visual {
    display: flex;
	padding: 5rem 0;
	height: 80vh;
}
	#Visual h1 {
		display: flex;
		align-items: center;
	}
#Visual h1 div{
	font-size: 4.6rem; 
    font-weight: bold;
	position: relative;
}
#Visual h1 > div div:first-child::before{
	content: '';
	width: 6rem;
	height: 5.5rem;
	background-image:url(../../images/leaf.svg) ;
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	right: 0;
	bottom: -5px;
}
#Visual img{
	padding: 2rem;
	width: 45%;
}
.topNavArea .accesskey a {
	color: #FFF;
}

#Accesskey_3 {
	color: #1C768B
}

/* content */
#Content {
	padding: 2rem 0;
}
section{
	margin-bottom: 8rem;
}
h2 , h3{
	text-align: center;
}

/* section_1 */
.section_1 .contentArea{
	display: flex;
}
.section_1 .leftArea{
	width: 50%;
	padding-right: 0.5rem;
	box-sizing: border-box;
}
.section_1 h3{
    color: var(--mainColor1);
}
.section_1 .block{
    padding: 1.5rem;
}
.section_1 .leftArea .block{
	background:transparent linear-gradient(135deg, #D4FFF6 0%, #E5FCDF 100%) 0% 0% no-repeat padding-box;
	position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0; 
    width: calc(50% - 0.5rem);
	box-sizing: border-box;
}
.section_1 .rightArea .block:first-child {
	margin-bottom: 1rem;
	background: transparent linear-gradient(135deg, #FFFBE1 0%, #FFE1AE 100%) 0% 0% no-repeat padding-box;
	position: relative;
}
.section_1 .rightArea .block:last-child{
	height: 250px;
	background:transparent linear-gradient(90deg, #E7F2FF 0%, #8ED9FF 100%) 0% 0% no-repeat padding-box;
}

.section_1 .tabArea{
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
}
.section_1 .tabArea .tabBtn{
	text-decoration: none;
	display: inline-block;
	width: 4rem;
	line-height: 1.6rem;
	color:var(--mainColor1);
	border:1px solid var(--mainColor1);
	border-radius: 50px;
	background: #fff;
	margin: 0 0.5rem;
	text-align: center;
}
	.section_1 .tabArea .tabBtn:hover, .section_1 .tabArea .tabBtn.select:hover {
		font-weight: bold;
		box-shadow: var(--mainColor2) 0 0 0 1px;
		/*font-weight: bold;*/ /* font-weight: bold; 重覆 (源碼修正) */
	}
#section_1 .tabArea .tabBtn.select{
	color: #fff;
	background: var(--mainColor1);
}

.section_1 .leftArea .dataArea{
	display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}
.section_1 .leftArea .Card{

    background-color: #fff;
	display: flex;
	justify-content: space-between; 
	justify-items: center;
	padding: 1.5rem 0;
	border-radius: 4px;
}


	.section_1 .leftArea .Card .station {
		background: var(--mainColor2);
		color: #fff;
		font-size: 1.6rem;
		padding: 0 0.8rem;
		line-height: 3.2rem;
		font-weight: bold;
		vertical-align: middle;
		width: 3.5rem;
		text-align: center;
	}

	.section_1 .leftArea .Card.DOEP .station {
		background: #F4F9FE;
		color: var(--mainColor1);
		position: relative;
	}
	.section_1 .leftArea .Card.DOEP.EPB1032 .station {
		font-size: 1rem;
		line-height: 1.2rem;
		padding: 0.4rem 0.8rem;
	}
	.section_1 .leftArea .Card.DOEP.EPB1015 .station {
	}
	.section_1 .leftArea .Card.DOEP.EPB1016 .station, .section_1 .leftArea .Card.DOEP.EPB1018 .station {
		font-size: 1.2rem;
		line-height: 1.2rem;
		padding: 0.4rem 0.8rem;
	}

	.section_1 .leftArea .Card.DOEP .station::before {
		content: '桃園';
		color: #fff;
		background: var(--mainColor2);
		padding: 0 0.5rem;
		line-height: 1.3rem;
		font-size: 0.9rem;
		font-weight: normal;
		position: absolute;
		left: 0;
		top: -1.1rem;
	}

	.section_1 .leftArea .dataTitle {
		text-align: center;
	}
.section_1 .leftArea .dataTitle div{
	line-height: 1.6rem;
	vertical-align: middle;
}
.section_1 .leftArea .dataTitle div:first-child{
	font-size: 1.05rem;
	font-weight: bold;
}
.section_1 .leftArea .dataTitle div:last-child{
	font-size: 0.8rem;
}

.section_1 .leftArea .dataValue div{
	background: #DFEBF9;
	padding: 0 0.8rem 0 0.3rem ;
	text-align: right;	
}
.section_1 .leftArea .dataValue div:first-child{
	border-bottom: 1px solid var(--mainColor2);
	position: relative;
}
.section_1 .leftArea .dataValue div:first-child::before{
	content: '';
	width: 6px;
	height: 6px;
	background: var(--mainColor2);
	border-radius: 50px;
	position: absolute;
	left: -3px;
	bottom: -3px;
}

.section_1 .leftArea .dataValue div span{
	line-height: 1.6rem;
	display: inline-block;
	vertical-align: middle;
}

.section_1 .leftArea .dataValue div span:first-child{
	margin-right: 0.3rem;
	font-size: 0.9rem;

}
.section_1 .leftArea .dataValue div span:last-child{
	font-size: 1.2rem;
	font-weight: bold;
}

.upDateTime{
	margin: 1rem 0;
}

#pm25_data,#pm10_data,#O3_data,#O38h_data{
	display: none;
}



/* aqi */

#aqi_data .Card .dataValue{
	line-height: 3.2rem;
	font-size: 1.5rem;
	font-weight: bold;
}

#aqi_data .aqiLevel{
    margin-right: 1rem;
	width: 100px;
    vertical-align: middle;
}
#aqi_data .aqiLevel span{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
    border-radius: 8px;
	font-weight: bold;
	height: 3rem;
	margin: 0.1rem 0;
	padding: 0 0.3rem;
	box-sizing: border-box;
}
#aqi_data .aqi_0 .aqiLevel span {
	display: none;
}

#aqi_data .aqi_0 .aqiLevel {
	margin-right: unset;
	width: unset;
	vertical-align: unset;
}

.aqi_1 .aqiLevel span {
	background: var(--AQI1);
	font-size: 1.4rem;
}

.aqi_1 .aqiLevel span{
	background: var(--AQI1);
	font-size: 1.4rem;
}
.aqi_1 .aqiLevel span::before{
	content: '良好';
}
.aqi_2 .aqiLevel span{
	background: var(--AQI2);
	font-size: 1.4rem;
}
.aqi_2 .aqiLevel span::before{
	content: '普通';
}

#aqi_data .aqi_3 .aqiLevel span{
	background: var(--AQI3);
}
.aqi_3 .aqiLevel span::before{
	content: '對敏感族群不健康';
}
.aqi_4 .aqiLevel span{
	background: var(--AQI4);
}
.aqi_4 .aqiLevel span::before{
	content: '對所有族群不健康';
}
.aqi_5 .aqiLevel span{
	background: var(--AQI5);
}
.aqi_5 .aqiLevel span::before{
	content: '非常不健康';
}
.aqi_6 .aqiLevel span{
	background: var(--AQI6);
	font-size: 1.4rem;
}
.aqi_6 .aqiLevel span::before{
	content: '危害';
}



.section_1 .rightArea{
	width: 50%;
	padding-left: 0.5rem;
	box-sizing: border-box;
}


/* 海岸環境監測 */

.gridBox {
	display: grid;
	align-content: space-around;
}

	.gridBox.two {
		grid-template-columns: repeat(2, 1fr);
	}

	.gridBox.three {
		grid-template-columns: repeat(3, 1fr);
	}

	.gridBox.four {
		grid-template-columns: repeat(4, 1fr);
	}

.section_1 .rightArea .block:first-child .dataArea{
	margin-bottom: 2rem;
}
.section_1 .rightArea .block:first-child .Card {
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 1rem;
	border: 1px solid #B85B3E;
}
	.section_1 .rightArea .block:first-child .Card .gridBox {
		gap: 1px;
		background: #FFE1D8;
	}
	.section_1 .rightArea .block:first-child .station {
		background: #B85B3E;
		color: #fff;
		font-size: 1.4rem;
		font-weight: bold;
		padding: 0.8rem;
		text-align: center;
		position: relative;
	}
.section_1 .rightArea .block:first-child .station span{
	background: #fff;
	color:#B85B3E;
	font-size: 0.9rem;
	padding: 0.2rem 0.3rem;
	font-weight: normal;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 3px 0 0 0 ;
}
.section_1 .rightArea .block:first-child .dataItem {
	padding: 0.8rem;
	background: #fff;
}
.section_1 .rightArea .block:first-child .dataTitle span{
	font-weight: bold;
}
.section_1 .rightArea .block:first-child .dataTitle span:first-child{
    font-size: 1.1rem;
}
.section_1 .rightArea .block:first-child .dataTitle span:last-child{
	font-size: 0.8rem;
}
.section_1 .rightArea .block:first-child .dataValue{
    font-size: 2rem;
	text-align: right;
	margin-top: 0.5rem;
	font-weight: bold;
}

.swiper-pagination-bullet{
	background: var(--subColor1) !important;
}

    .swiper-pagination-bullet:focus {
        outline: 2px solid var(--subColor2);
        background: var(--subColor1) !important;
        opacity: 1 !important;	
    }
	/* 河川水質監測 */
	.section_1 .rightArea .block:last-child {
		position: relative;
	}
.section_1 .rightArea .block:last-child::after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(../../images/river_pic.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: bottom left;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
	.section_1 .rightArea .block:last-child .btnArea{
		width: 100%;
		padding: 1.5rem;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 1;
	}


.section_1 .swiperBtn {
	text-align: center;
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
}

.section_1 .btn_swiper {
	border: 2px solid #751C00;
	border-radius: 50px;
	width: 35px;
	height: 35px;
	vertical-align: bottom;
	background-color: #751C00;
	margin: 0;
	margin-left: 5px;
	padding: 0;
	line-height: 0;
	min-height: 0;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
}

.section_1 .swiperBtn .btn_swiper:first-child {
	margin-left: 0;
}

.section_1 .btn_swiper::before {
	content: "";
	display: inline-block;
	font-style: normal;
	text-rendering: auto;
	font-family: "Font Awesome 6 Free";
	font-weight: bold;
	color: #ffffff;
	font-size: 1rem;
	font-variant: normal;
}

.section_1 .btn_pause::before {
	content: "\f04c";
}

.section_1 .btn_resume::before {
	content: "\f04b";
	padding-left: 3px;
}

.section_1 .btn_swiper:hover, .section_1 .btn_swiper:focus {
	background-color: #ffffff;
}

	.section_1 .btn_swiper:hover::before, .section_1 .btn_swiper:focus::before {
		color: #751C00;
	}
    .section_1 .text-hidden {
    	pointer-events: none;
    	position: absolute;
    	text-indent: 100%;
    	white-space: nowrap;
    	width: 0;
    	overflow: hidden;
    }


.section_1 .leftArea .moreBtn {
	background-color: #004D61;
}
.section_1 .leftArea h3{
	color: #004D61 ;
}
.section_1 .leftArea .moreBtn:hover{
	box-shadow: #E5FCDF 0 0 0 2px, #004D61 0 0 0 4px;
}

.section_1 .rightArea .block:first-child .moreBtn{
	background-color: #751C00;
}
.section_1 .rightArea .block:first-child h3{
	color: #751C00;
}
.section_1 .rightArea .block:first-child .moreBtn:hover{
	box-shadow: #FFE1AE 0 0 0 2px, #751C00 0 0 0 4px;
}

.section_1 .rightArea .block:last-child .moreBtn{
	background-color: #003D8D;
}
.section_1 .rightArea .block:last-child h3{
	color: #003D8D;
}
.section_1 .rightArea .block:last-child .moreBtn:hover{
	box-shadow: #8ED9FF 0 0 0 2px, #003D8D 0 0 0 4px;
}

/* section_2 */

.section_2 .leftArea{
	width: 70%;
}
.section_2 .rightArea{
	width: 30%;
}

.contentArea{
	position: relative;
}
.section_2 h2{
	text-align: left;
}
.contentShow.newsArea{
	/* position: relative; */
	padding: 2rem 8rem 2rem 0;
}
.contentShow.newsArea::before{
	content: '';
	display: block;
	width: 60%;
	height: calc(100% - 3.8rem);
    background: linear-gradient(135deg, #1E5DA7 0%, #3A79C2 100%) 0% 0% no-repeat padding-box;
	border-radius: 0 80px 80px 0 ;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -2;
}
.contentShow.newsArea::after{
	content: '';
    display: block;
    background-image: url(../../images/news_img.png);
    background-repeat: no-repeat;
    background-size: contain;
	width: 28%;
    height: 12rem;
    position: absolute;
    left: 0;
    bottom: -1.2rem;
    z-index: -1;
}

.section_2 .tabArea {
	display: flex;
	margin-bottom: 1.6rem;
}
.section_2 .tabArea .tabBtn{
	text-decoration: none;
	display: inline-block;
	font-size: 1.6rem;
	padding: 1rem;
	color:var(--mainColor2);
	border:1px solid var(--mainColor2);
	border-radius: 50px;
	background: #fff;
	margin: 0 0.5rem;
	text-align: center;
}
    .section_2 .tabArea .tabBtn:hover, .section_2 .tabArea .tabBtn.select:hover {
        font-weight: bold;
        box-shadow: var(--mainColor2) 0 0 0 1px;
        /*font-weight: bold;*/ /* font-weight: bold; 重覆 (源碼修正) */
    }
#section_2 .tabArea .tabBtn.select{
	color: #fff;
	background: var(--mainColor2);
}

.listArea{
	padding: 0 0 2rem 0;
}
.listBar{
	padding: 0.5rem;
	border-bottom: 1px solid #E3FEFF;
}
.listBar .date{
	display: inline-block;
	background: #E3FEFF;
	font-size: 1rem;
	font-weight: bold;
	line-height: 2.4rem;
	color: #1E5DA7;
	padding: 0 1rem;
	border-radius: 4px;

}
.listBar a{
	display: inline-block;
	width: calc(88% - 2rem  - 40px);
	font-size: 1.4rem;
	line-height: 2.4rem;
	color: #fff;
	margin-left:1rem ;
	vertical-align: bottom;
	overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.section_2 .contentShow.rightArea{
	margin-top: 3rem;
}

.section_2 .contentShow.rightArea h2{
	margin-left: 6rem;
}

.contentShow.gisArea{
	padding: 5.5rem 6rem 5.5rem 0;
}

.contentShow.gisArea::before{
	content: '';
	display: block;
	width: 30%;
    height: calc(100% - 3rem - 2rem - 2rem);
    background: linear-gradient(90deg, #7DC8E1 0%, #C5ECF9 100%) 0% 0% no-repeat padding-box;
	border-radius: 80px 0 0 80px;
	position: absolute;
	right: 0 ;
	bottom: 0;
	z-index: -2;
}
.contentShow.gisArea::after{
	content: '';
    display: block;
    background-image: url(../../images/map_img.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 7%;
    height: 18rem;
    position: absolute;
	right: 0;
    bottom: 0;
    z-index: -1;
}
.contentShow.gisArea a{
	display: block;
	background: linear-gradient(135deg, #00759B 0%, #185E75 100%) 0% 0% no-repeat padding-box;
	border-radius: 40px;
    width: 24rem;
    height: 20.6rem;
	position: relative;
    transition: .2s;
}
    .contentShow.gisArea a span {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -10;
        opacity: 0;
    }
	.contentShow.gisArea a::after {
		display: block;
		content: '';
		width: 20%;
		height: 1rem;
		background-image: url(../../images/moreBtn_icon.svg);
		background-repeat: no-repeat;
		background-size: cover;
		text-align: right;
		position: absolute;
		right: 1.8rem;
		top: 0;
		bottom: 0;
		margin: auto;
		transition: .2s;
	}

.contentShow.gisArea a::before{
	display: block;
	content: '';
    width: 100;
    height: 100%;
    background-image: url(../../images/gis_img.svg);
    background-repeat: no-repeat;
	background-size: 90% 90%;
	background-position: left -10px center;
    transition: .2s;
}
.contentShow.gisArea a:hover::before{
	background-image: url(../../images/gis_img_hover.svg);
}
.contentShow.gisArea a:hover{
	box-shadow: #D6EEF6 0 0 0 3px, #185E75 0 0 0 6px;
	font-weight: bold;
}
.contentShow.gisArea a:hover::after{
	right: 0.5rem;
}

.section_2 .leftArea .moreBtn{
	background-color: #fff;
	color: #3A79C2;
}
.section_2 .leftArea .moreBtn::after{
	background-image: url(../../images/moreBtn_icon2.svg);
}
.section_2 .leftArea .moreBtn:hover{
	box-shadow: #3A79C2 0 0 0 2px, #fff 0 0 0 4px;
}

.swiper-button-next:focus, .swiper-button-prev:focus {
	outline: 5px dotted #F9BF75;
}



/* section_3 */
.section_3 .contentArea{
	padding: 3rem;
	background-image: url(../../images/par3t_bgImg.png);
    background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.section_3 .contentShow{
    padding: 2.6rem 3.2rem;
}
.section_3 .contentShow:last-child .itemBox {
	justify-content: flex-end;
}
.section_3 h4{
	text-align: center;
	padding-bottom: 1.6rem;
}
.section_3 .itemBox{
	display: block;
	width: 16rem;

}
.section_3 .contentShow .itemBox{
	display:inline-block;
}
.section_3 .contentShow:first-child .itemBox {
	margin-right: 10rem;
}
.section_3 .contentShow:first-child::before{
	content: '';
}
.section_3 .contentShow:last-child .itemBox {	
	margin-left: 10rem ;
}
.section_3 .iconBox{
	width:100%;
	height: 16rem;
	border-radius: 50%;	
	background-color: #7799DD;
	box-shadow: #fff 0 0 0 4px, #7799DD 0 0 0 8px;

	background-repeat: no-repeat;
	background-size: 60% 60%;
	background-position: center center;
	transition: .25s;
}
.section_3 .iconBox:hover{
	border-radius: 20px;	
	background-color: #3A79C2;
	box-shadow: #fff 0 0 0 4px, #3A79C2 0 0 0 8px;
	background-size: 80% 80%;
	transition: .25s;
}
.section_3 .contentShow:first-child .itemBox:nth-child(even) .iconBox ,
.section_3 .contentShow:last-child .itemBox:nth-child(odd) .iconBox{
	background-color: #46ABCD;
	box-shadow: #fff 0 0 0 4px, #46ABCD 0 0 0 8px;
}
.section_3 .contentShow:first-child .itemBox:nth-child(even) .iconBox:hover,
.section_3 .contentShow:last-child .itemBox:nth-child(odd) .iconBox:hover{
	background-color: #027398;
	box-shadow: #fff 0 0 0 4px, #027398 0 0 0 8px;
}

.section_3 .contentShow:first-child .itemBox:nth-child(1) .iconBox{
	background-image: url(../../images/part3_icon1.svg);
}
.section_3 .contentShow:first-child .itemBox:nth-child(1) .iconBox:hover{
	background-image: url(../../images/part3_icon1_hover.svg);
}
.section_3 .contentShow:first-child .itemBox:nth-child(2) .iconBox{
	background-image: url(../../images/part3_icon2.svg);
}
.section_3 .contentShow:first-child .itemBox:nth-child(2) .iconBox:hover{
	background-image: url(../../images/part3_icon2_hover.svg);
}
.section_3 .contentShow:first-child .itemBox:nth-child(3) .iconBox{
	background-image: url(../../images/part3_icon3.svg);
}
.section_3 .contentShow:first-child .itemBox:nth-child(3) .iconBox:hover{
	background-image: url(../../images/part3_icon3_hover.svg);
}
.section_3 .contentShow:last-child .itemBox:nth-child(1) .iconBox{
	background-image: url(../../images/part3_icon4.svg);
}
.section_3 .contentShow:last-child .itemBox:nth-child(1) .iconBox:hover{
	background-image: url(../../images/part3_icon4_hover.svg);
}
.section_3 .contentShow:last-child .itemBox:nth-child(2) .iconBox{
	background-image: url(../../images/part3_icon5.svg);
}
.section_3 .contentShow:last-child .itemBox:nth-child(2) .iconBox:hover{
	background-image: url(../../images/part3_icon5_hover.svg);
}
.section_3 .contentShow:last-child .itemBox:nth-child(3) .iconBox{
	background-image: url(../../images/part3_icon6.svg);
}
.section_3 .contentShow:last-child .itemBox:nth-child(3) .iconBox:hover{
	background-image: url(../../images/part3_icon6_hover.svg);
}

/* section_4 */

.section_4 .gridBox{
	gap: 1rem;
}
.section_4 .contentArea{
	padding: 3rem 0;
}
.section_4 .itemBox{
	background-image: url(../../images/waveImg.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: left bottom;
	padding: 1.6rem;
	color: #fff;
	text-align: center;
	position: relative;
	z-index: -2;
}
.section_4 .itemBox h4{
	color: #fff;
}
.section_4 .itemBox::after{
	content: '';
	display: none;
	width: 100%;
	height: 100%;
	background-image: url(../../images/waveImg.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: left bottom;
	transform: scaleX(-1);
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: -1;
}
.section_4 .itemBox span{
	font-weight: bold;
}
.section_4 .itemBox .num{
	font-size: 6rem;
	margin: 0 2rem;
}
.section_4 .itemBox .txt{
	font-size: 1.8rem;
}

.section_4 .rowBox1{
    grid-template-columns: 3fr 2fr 2fr;
	margin-bottom: 1rem;
}
.section_4 .rowBox1 .itemBox:nth-child(1){
	background-color: #027398;
	background-size: 100% 90%;
}
.section_4 .rowBox1 .itemBox:nth-child(2){
	background-color: #00A4B0;
}
.section_4 .rowBox1 .itemBox:nth-child(3),.section_4 .rowBox2 .itemBox:nth-child(1){
	background-color: #F6E3D2;
	background-image: unset;
	color: var(--TextColor);
}
.section_4 .rowBox1 .itemBox:nth-child(3) h4,.section_4 .rowBox2 .itemBox:nth-child(1) h4{
	color: var(--TextColor);
}
.section_4 .rowBox2{
    grid-template-columns: 4fr 3fr;
	margin-bottom: 1rem;
}
.section_4 .rowBox2 .itemBox:nth-child(2){
	background-image: unset;
	background-color: #027398;
}
.section_4 .rowBox2 .itemBox:nth-child(2)::after{
	display: block;
	background-size: 100% 90%;
}
.section_4 .rowBox3 .itemBox{
	background-color: #00A4B0;
	background-image: unset;
}
.section_4 .rowBox3 .itemBox::after{
	display: block;
	background-size: 100% 90%;
}

/*.FBbox {
    display: block;
    height: 100%;
    overflow: hidden;
	
}*/

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

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

	.videoBox:before {
		content: "";
	}

	.videoBox .thumbnailBox {
		position: relative;
		cursor: pointer;
	}

		.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;
}

.contentShow.rightArea a > div {
    position: absolute;
    z-index: -10;
    opacity: 0;
}


/* section_5 */
.section_5 .leftArea{
    width: 65%;
	margin-right: 1rem;
}
.section_5 .rightArea{
    width: 35%;
	overflow: hidden;
}

.linkArea{
	margin-top: 3rem;
}
    .linkArea.gridBox {
        gap: 1rem;
    }

.linkArea .moreBtn{
	width: 100%;
	font-size: 2rem;
	padding: 3rem;
	box-sizing: border-box;
}

	.linkArea .moreBtn i {
        margin-right:1rem
	}
.linkArea .moreBtn::after{
	width: 50px;
    height: 12px;
	background-size: cover;
	right: 1.8rem;
}
.linkArea .moreBtn:hover:after{
	right: 0.8rem;
}
	.linkArea .moreBtn:nth-child(even) {
		background: var(--mainColor4);
	}
	.linkArea .moreBtn:hover {
		box-shadow: #fff 0 0 0 2px, var(--mainColor2) 0 0 0 4px;
		font-weight: bold;
	}

.linkArea .moreBtn:nth-child(even):hover{
	box-shadow: #fff 0 0 0 2px, #C18B5D 0 0 0 4px;
}

iframe {
	width: 100%;
	height: 100%;
}

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


	.section_3 .contentShow:first-child .itemBox {
		margin-right: 6rem;
	}

	.section_3 .contentShow:last-child .itemBox {
		margin-left: 6rem;
	}

	.section_2 .leftArea {
		width: 64%;
	}
	.contentShow.newsArea {
		padding: 2rem 5rem 2rem 0;
	}
}

@media only screen and (min-width: 61.0525em) and (max-width: 76.1875em) { /*977~1219*/
	#Wrap {
		background-size: 40%, 100%;
		background-position: right 3rem top 5rem, top;
	}

	#Visual h1 {
		display: flex;
		align-items: center;
		/* width: 55%; */
	}

	.topNavArea {
		display: flex;
	}

	#Visual {
		display: flex;
		padding: 5rem 1rem;
		height:30vh;
	}

	.section_1 .contentArea {
		display: block;
		padding: 0 1rem;
	}

	.wrapper {
		width: 100%;
	}

	.section_1 .rightArea .block:last-child {
		height: 400px;
	}

	.section_1 .leftArea, .section_1 .rightArea {
		width: 100%;
		padding: 1rem 0;
	}

		.section_1 .leftArea .block {
			position: relative;
			width: 100%;
		}


	.section_2 .contentArea .flexBox {
		display: block;
	}

	.section_2 h2 {
		text-align: center;
	}

	.section_2 .contentShow.rightArea h2 {
		margin-left: 0;
	}

	.section_2 .leftArea, .section_2 .rightArea {
		width: 100%;
	}

	.contentShow.newsArea, .contentShow.gisArea {
		position: relative;
		padding: 2rem 1rem 2rem 1rem;
	}

	.contentShow.newsArea {
		margin-right: 0.5rem;
	}

	.listBar .date {
		font-size: 1rem;
		line-height: 2rem;
		padding: 0 0.5rem;
	}

	.section_2 .tabArea .tabBtn {
		font-size: 1.5rem;
		padding: 0.8rem;
	}

	.listBar a {
		display: block;
		width: 95%;
		font-size: 1.2rem;
		line-height: 2.4rem;
		margin-left: 0.5rem;
	}

	.contentShow.newsArea::after {
		width: 40%;
		height: 6rem;
		bottom: -0.2rem;
	}

	.contentShow.gisArea {
		margin-left: 0.5rem;
	}

		.contentShow.gisArea a {
			width: 40%;
			height: 15rem;
			margin: auto;
		}

		.contentShow.newsArea::before, .contentShow.gisArea::before {
			width: 100%;
			height: 100%;
			border-radius: 0 60px 60px 0;
		}

		.contentShow.gisArea::before {
			height: 75%;
			border-radius: 80px 0 0 0;
			bottom: -30px;
		}


		.contentShow.gisArea::after {
			width: 11%;
			height: 12rem;
			bottom: -40px;
		}

		.contentShow.gisArea a::after {
			width: 20%;
			background-size: contain;
			right: 1.8rem;
		}


	.section_3 .contentArea {
		padding: 0;
	}

	.section_3 .contentShow {
		padding: 0;
		text-align: center;
		width: 100%;
	}

	.section_3 .itemBox {
		width: 10rem;
	}

	.section_3 .iconBox {
		height: 10rem;
	}

	.section_3 .contentShow .itemBox, .section_3 .contentShow:first-child .itemBox, .section_3 .contentShow:last-child .itemBox {
		margin: 2rem 2rem 2rem 2rem;
	}

	.section_4 .contentArea {
		padding: 0;
	}

	.section_4 .itemBox h4 {
		font-size: 1.4rem;
	}

	.section_4 .itemBox .num {
		font-size: 3.8rem;
		margin: 0;
	}


	.section_4 .itemBox .txt {
		font-size: 1.2rem;
	}

	.section_5.contentArea {
		padding: 0 1rem;
	}


	.linkArea .moreBtn {
		font-size: 1.6rem;
		padding: 2rem;
	}

	.section_5.contentArea {
		padding: 0 1rem;
	}


}


@media only screen and (min-width: 48em) and (max-width:61em) { /*768~976*/

	#Wrap {
		background-size: 40%, 100%;
		background-position: right 3rem top 7rem, top;
	}
    header {
        padding:0 1rem;
    }

	#Visual h1 {
		display: flex;
		align-items: center;
		/* width: 55%; */
	}

	#Visual h1 div {
		font-size: 3rem;
	}
	#Visual h1 > div div:first-child::before {
		width: 4rem;
		height: 4rem;
		bottom: -5px;
	}
	.topNavArea {
		display: flex;
	}
	#Visual {
		display: flex;
		padding: 5rem 1rem;
		height: auto; 
	}
	.section_1 .contentArea {
		display: block;
		padding: 0 1rem;
	}
	.wrapper {
		width: 100%;
	}
	.section_1 .leftArea, .section_1 .rightArea {
		width: 100%;
		padding: 1rem 0;
	}
	.section_1 .leftArea .block {
		position: relative;
		 width: 100%; 
	}


	.section_2 .contentArea .flexBox {
		display: block;
	}

	.section_2 h2 {
		text-align: center;
	}

	.section_2 .contentShow.rightArea h2 {
		margin-left: 0;
	}

	.section_2 .leftArea, .section_2 .rightArea {
		width: 100%;
	}

	.contentShow.newsArea, .contentShow.gisArea {
		position: relative;
		padding: 2rem 1rem 2rem 1rem;
	}

	.contentShow.newsArea {
		margin-right: 0.5rem;
	}

	.listBar .date {
		font-size: 1rem;
		line-height: 2rem;
		padding: 0 0.5rem;
	}

	.section_2 .tabArea .tabBtn {
		font-size: 1.5rem;
		padding: 0.8rem;
	}

	.listBar a {
		display: block;
		width: 95%;
		font-size: 1.2rem;
		line-height: 2.4rem;
		margin-left: 0.5rem;
	}

	.contentShow.newsArea::after {
		width: 40%;
		height: 6rem;
		bottom: -0.2rem;
	}

	.contentShow.gisArea {
		margin-left: 0.5rem;
	}

	.contentShow.gisArea a {
		width: 40%;
		height: 15rem;
		margin: auto;
	}

	.contentShow.newsArea::before, .contentShow.gisArea::before {
		width: 100%;
		height: 100%;
		border-radius: 0 60px 60px 0;
	}

		.contentShow.gisArea::before {
			height: 75%;
			border-radius: 80px 0 0 0;
			bottom: -30px;
		}


		.contentShow.gisArea::after {
			width: 11%;
			height: 12rem;
			bottom: -40px;
		}

	.contentShow.gisArea a::after {
		width: 20%;
		background-size: contain;
		right: 1.8rem;
	}


	.section_3 .contentArea {
		 padding:0; 
	}
	.section_3 .contentShow {
		padding: 0;
		text-align: center;
		width:100%;
	}
	.section_3 .itemBox {
		width: 10rem;
	}
	.section_3 .iconBox {
		height: 10rem;
	}
	.section_3 .contentShow .itemBox, .section_3 .contentShow:first-child .itemBox, .section_3 .contentShow:last-child .itemBox {
		margin: 2rem 2rem 2rem 2rem;
	}

	.section_4 .contentArea {
		 padding: 0; 
	}

	.section_4 .itemBox h4 {
		font-size: 1.4rem;
	}

	.section_4 .itemBox .num {
		font-size: 3.8rem;
		margin: 0 ;
	}


	.section_4 .itemBox .txt {
		font-size: 1.2rem;
	}

    .section_5.contentArea {
        padding: 0 1rem;
    }
	.section_5 .leftArea, .section_5 .rightArea {
		width: 50%;
	}
	.linkArea .moreBtn {
		font-size: 1.6rem;
		padding: 2rem;
	}

	.section_5.contentArea {
		padding: 0 1rem;
	}
}

@media only screen and (max-width: 47.9735em) { /*767↓*/
	#Wrap {
		background-size: 40%, 155%;
		background-position: right 1rem top 5rem, top;
	}

	section {
		margin-bottom: 6rem;
	}

	header {
		box-shadow: unset;
		background: unset;
		position: relative;
	}

	#Visual {
		height: 20vh;
	}

        #Visual h1 {
            margin-left:2rem ;
			width:100%;
        }

			#Visual h1 div {
				font-size: 2rem;
			}

			#Visual h1 > div div:first-child::before {
                display:none;
			}

	.TitleBar .webTitle .Logo {
		padding: 0.5rem;
		height: 36px;
		width: unset;
		margin: 0;
	}
	.contentShow.newsArea::after {
		width: 70%;
		height: 7rem;
	}

	h2 {
		font-size: 1.6rem;
	}

	h3 {
		font-size: 1.5rem;
	}

	.moreBtn {
		padding: 0.5em 0.7rem;
		width: 5rem;
		font-size: 1rem;
	}

	.section_1 .block {
		padding: 1rem;
		margin: 1rem;
	}

	.section_1 .contentArea {
		display: block;
	}

	.section_1 .leftArea, .section_1 .rightArea {
		width: 100%;
		padding: 0;
	}

		.section_1 .leftArea .block {
			position: unset;
			width: unset;
		}

		.section_1 .leftArea .dataArea {
			display: block;
		}

		.section_1 .leftArea .Card {
			padding: 1rem 0;
			margin-bottom: 0.5rem;
		}

		.section_1 .rightArea .block:last-child {
			height: 150px;
		}

		.section_1 .leftArea .btnArea {
			position: unset;
			padding: 0;
		}

		.section_1 .rightArea .block:first-child .dataTitle span:first-child {
			font-size: 1rem;
		}

		.section_1 .rightArea .block:first-child .dataTitle span:last-child {
			display: block;
			text-align: right;
		}

		.section_1 .rightArea .block:first-child .dataValue {
			font-size: 1.8rem;
		}

	.section_1 .swiperBtn {
		top: 1rem;
		right: 1rem;
	}


	.section_2 .contentArea .flexBox {
		display: block;
	}

	.section_2 h2 {
		text-align: center;
	}

	.section_2 .contentShow.rightArea h2 {
		margin-left: 0;
	}

	.section_2 .leftArea, .section_2 .rightArea {
		width: 100%;
	}

	.contentShow.newsArea, .contentShow.gisArea {
		position: relative;
		padding: 1rem 1rem 4rem 1rem;
	}
	.contentShow.gisArea {
		margin-left: 0.5rem;
	}
	.contentShow.newsArea {
		margin-right: 0.5rem;
	}
	.listBar .date {
		font-size: 1rem;
		line-height: 2rem;
		padding: 0 0.5rem;
	}
	.section_2 .tabArea .tabBtn {
		font-size: 1.5rem;
		padding: 0.8rem;
	}
    .listBar a {
        display: block;
        width: 95%;
        font-size: 1.2rem;
        line-height: 2.4rem;
        margin-left: 0.5rem;
    }

        .contentShow.gisArea a {
            width: 70%;
            height: 13rem;
            margin: auto;
        }

		.contentShow.newsArea::before, .contentShow.gisArea::before {
			width: 100%;
			height: 100%;
			border-radius:0 60px 60px 0;
		}
	.contentShow.gisArea::before {
		height: 70%;
		border-radius: 80px 0 0 0;
	}
	.contentShow.gisArea::after {
		width: 19%;
		height: 9rem;
	}

		.contentShow.gisArea a::after {
			width: 20%;
			background-size: contain;
			right: 1.8rem;
		}
	.section_3 .contentShow {
		padding:0;
	}

	.section_3 .contentArea {
		padding:1rem;
	}
    .section_3 .contentShow:last-child .itemBox, .section_3 .contentShow:first-child .itemBox {
        margin: auto;
        margin-bottom: 2rem;
        display: block;
    }
	.section_3 .itemBox {
		width: 10rem;
	}
	.section_3 .iconBox {
		height: 10rem;
	}
	.section_4 .contentArea {
		 padding: 0; 
	}

	.section_4 .gridBox {
		gap: 1rem;
		grid-template-columns: 1fr;
	}

	.section_4 .itemBox {
		padding: 1rem;
	}
		.section_4 .itemBox .txt {
			font-size: 1rem;
		}

		.section_4 .itemBox .num {
			font-size: 4rem;
			margin: 0;
		}

	.section_4 .rowBox3 .txt{
		display:block;
	}

	.section_5 {
		padding: 1rem;
	}
        .section_5 iframe {
            width: 100%;
        }

		.section_5 .flexBox {
			display: block;
		}
    .section_5 .leftArea, .section_5 .rightArea {
        width: 100%;
        margin: 2rem 0 0 0;
    }
		.section_5 .rightArea {

			height: 480px;
		}
	.linkArea.gridBox.two {
		grid-template-columns: 1fr;
	}
	.section_5 .linkArea .moreBtn {
		font-size: 1.6rem;
		padding: 2rem;
	}
		.section_5 .linkArea .moreBtn::after {
			width: 20px;
			height: 8px;
		}

}
@media only screen and (max-width: 29.9375em) {

}