/*현재 시간*/
#main-countries {
	position:relative;
	display:flex;
	flex-direction: column;
	justify-content:center;
	align-items:center!important;
	font-weight:300;
	line-height:1;
}
#main-countries .world-time {
	display:flex;
	flex-wrap:wrap;
	gap:1em;
    justify-content: flex-start;
}
#main-countries .world-time > div{
    flex: 0 1 calc(25% - 20px); /* 각 항목을 4열로 설정하고 간격을 고려하여 크기 조정 */
    box-sizing: border-box;
    border: 1px solid rgba(37, 25, 79, 0.1);
    border-radius: 8px;
	background-color:#fff;
}
@media (max-width: 768px) {
    #main-countries .world-time > div {
        flex: 0 1 calc(50% - 20px); /* 화면이 작아질 때 두 개의 열로 조정 */
    }
}

@media (max-width: 480px) {
    #main-countries .world-time > div {
        flex: 1 1 100%; /* 모바일에서 한 개의 열로 조정 */
    }
}

/*세계 시간*/
#main-countries .countries {
	display:flex;
	justify-content: center;
	flex-wrap:wrap;
	max-width:1200px;
	width:100%;
	text-align:center;
	gap:1em;
}
#main-countries .countries > *{
	background-color: var(--ast-global-color-5);
	border-radius: 10px;
	line-height:1.6;
}
#main-countries .c_timedate{
	padding:.8em .3em;
}
#main-countries .c_timedate > *{
	line-height:1
}
#main-countries .c_timedate > .c_date{
	margin-top:.5em
}
#main-countries .countries .c_title{
	display: flex;
	justify-content: space-between;
	height:30px;
	line-height:30px;
	text-align: justify;
	padding:0 .8em;
	opacity:.7;
}
#main-countries .countries .c_title a{
	display: flex;
	align-self: center;
}
#main-countries .countries .c_title a svg{
	width:18px;height:18px;
	fill: #151515;
}
#main-countries .countries .c_title a:hover svg{
	fill: var(--ast-global-color-1);
}
#main-countries .countries .c_time{
	display: flex;
	align-items: center;
	justify-content: center;
	gap:.25em;
	font-weight: 600;
}
#main-countries .countries .c_time span{
	font-size:90%;
	font-weight:300;
	color:var(--ast-global-color-3);
}
#main-countries .countries > *{
	flex-basis: calc((100% - 5em) / 6);
}
#main-countries .countries .c_title{font-size: .813em;font-weight: 600;color: var(--ast-global-color-1);}
#main-countries .countries .c_time{font-size: 1.2em}
#main-countries .countries .c_date{font-size: .813em;opacity:.7}
@media (max-width:992px){
	#main-countries .countries > *{
		flex-basis: calc((100% - 3em) / 4);
	}
}
#main-countries .countries .city-country.am {
    background-color: #f3ffdb; /* 오전은 밝은 하늘색 */
}

#main-countries .countries .city-country.pm {
    background-color: #deffdf; /* 오후는 어두운 남색 */
}
@media (max-width:768px){
	#main-countries .countries {
		gap:.5em
	}
	#main-countries .countries > *{
		flex-basis: calc((100% - .5em) / 2);
	}
	#main-countries .countries .c_title{
		height:30px;
		line-height:30px;
	}
	#main-countries .countries .c_title a svg{
		width:14px;height:14px;
	}
	#main-countries .countries .c_timedate{
		padding:.8em .3em;
	}
	#main-countries .countries{
	}
}
#main-countries .countries .c_title{
	border-bottom:1px dashed rgba(37, 25, 79, 0.1);
}
#all-countries {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

#all-countries > div {
    flex: 1 1 calc(100% / 3 - 1em); /* 기본적으로 4열 */
    box-sizing: border-box;
}

/* 768px 미만일 때 2열 */
@media (max-width: 768px) {
    #all-countries > div {
        flex: 1 1 calc(50% - 1em); /* 2열 */
    }
}

/* 425px 미만일 때 1열 */
@media (max-width: 425px) {
    #all-countries > div {
        flex: 1 1 100%; /* 1열 */
    }
}
#all-countries h3{
	background-color: var(--ast-global-color-3);
    border-radius: 3px;
    color: #fff;
    font-size: 1.2em;
    text-align: center;
    margin: 1em 0 .5em;
    line-height: 1.6;
} 
#all-countries ul{ 
	list-style: none;
	padding:0;
	margin:0;
}
#all-countries ul li{
	display:block;
	background-color:#ffffff;
	border-radius: 3px;
	margin:.5em 0;
}
#all-countries ul li div.cityname{
	display:flex;
	justify-content:space-between;
	font-size: 14px;
	line-height:1;
	border-bottom:1px solid var(--ast-global-color-4);
	padding:.5em;
}
#all-countries ul li div.citytime{
	text-align: center;
	font-size: 16px;
	font-weight:600;
	line-height:1.4;
	padding:.5em;
}