.banner { background: url(../images/gg_ban_nws.jpg) no-repeat center / cover; clear: both; margin-bottom: 4%; padding: 100px 0px 80px; width: 100%; position:relative; }
.banner h1 { color: var(--bs-white); margin-top: 17%; font-size:72px; }
.banner h1 { font-size:64px; line-height:90px; font-weight:400; }
.banner:before { content:''; width:100%; height:100%; background:rgb(0 19 99 / 60%) linear-gradient(180deg, rgb(0 0 0 / 55%), transparent); position:absolute; top:0; left:0; }


article { background-color: rgba(0, 130,195, 0.1); clear: both; margin-bottom: 30px; width: 100%; height:calc(100% - 30px); }
article .col { padding: 0px 5% 5%; }
article h4 { font-family: var(--main-text-font); font-weight: 500; margin: 20px 0px; }
article h4 a { color:#09265F; }
article span { color: var(--sky-blue); font-size: 13px; }
article a.rm { color: var(--sky-blue); font: 500 18px var(--main-head-font); }
article a.rm:hover { color: var(--navy-blue); }
article img { width:100%; }

.more { margin-bottom: 35px; }
.more a { color: var(--sky-blue); font: 500 18px var(--main-head-font); }
.more a:hover { color: var(--navy-blue); }
.more a > i { transform:rotate(90deg); }
.more a:hover > i { transform:rotate(90deg) scale(1.05); }

/*-------------------
    Media Query
---------------------------*/

@media only screen and (max-width: 767px) {
	article h4 { font-size: 20px; margin: 15px 0px; }
	article h4 br { display: none; }
	article a, .more a { font-size: 16px; }
	.banner, .rblog { padding-left: 5%; padding-right: 5%; }
	.banner h1 { font-size: 38px; }
	.banner { padding-bottom:40px; }
	.col-12.more { padding-left: 8%; padding-right: 8%; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	article h4 br { display: none; }
}