@charset "utf-8";

/************************************* 
Basic Style Sheet
Version : 1.0
Author : uracle(sejong) - sk.k
Create date : 2025. 09.
*************************************/

@import url('../general.css');
.container{
	display: block;
	width: 160rem;
	max-width: calc(100% - 24px - 24px);
	margin: 0 auto;
}

/******* 전자정부누리집 ******/
.top_line_bnr {
	position: relative;
	display: block;
	width: 100%;
	padding: 0.5rem 0;
	background-color: #eef2f7;
}
.top_flag_wrap {
	display: flex;
	align-items: center;
	width: 160rem;
	max-width: calc(100% - 24px - 24px);
	margin: 0 auto;
	color: #1d1d1d;
	font-size: 1.5rem;
	font-weight: 400;
}
.top_flag_in {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.top_flag_in img{
	width: 2.4rem;
}

#header{
	border-bottom: 1px #ddd solid;
}
#header .logo{
    display: block;
	padding: 1.5rem 0;
    text-align: center;
}
.cont-apec{
	display: block;
	min-height: 10rem;
	padding: 1rem;
	background: url(../../images/img-apec-pattern.png) 50% 0% repeat-x #F5FAFF;
	text-align: center;
}

/* heroArea start */
.cont-kocc{
	position: relative; 
	width: 100%; 
	overflow: hidden;
	margin: 5rem 0 0;
}
.cont-kocc .kocc-tit{
    display: block;
    margin-bottom: 5rem;
    text-align: center;
    line-height: 1.5;
    font-weight: 300;
    font-size: 4rem;
}
.cont-kocc .kocc-tit span{
	font-weight: 600;
}
.kccListWrap{
	position: relative;
	display: flex;
	flex-flow: row wrap;
	gap: 3rem;
	padding-bottom: 10rem;
}
.kccListWrap:after{
    content: '';
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: 0;
    width: 100vw;
    height: calc(100% - 9rem);
    background: url(../../images/kocis/heroImg02.png) no-repeat bottom center;
    background-size: cover;
    z-index: -1;
}
.kccList{
	position: relative;
	flex: 1 calc(25% - 3rem);
	border: solid 1px #BEBEBE;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.95);
}
.kccList::after{
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 180px;
	height: 173px;
	background: url(../../images/kocis/bg_list_globe.png) no-repeat;
	z-index: 0;
}
.kccList .kccText{
	position: relative;
	font-size: 18px; 
	border-radius: 9px 9px 0 0; 
	text-align: left; 
	padding: 14px 0 10px 20px;
	box-sizing: border-box; 
	color: #fff;
	height: 90px;
	background: url(../../images/kocis/icon_new.png) no-repeat center right 20px;
}
.kccList:nth-child(even) .kccText{
	background-color: #127EA8; 
}
.kccList:nth-child(odd) .kccText{
	background-color: #1B78D1;
}
.kccText span{
	font-size: 1.5rem;
	font-weight: 300;
}
.kccText p{
	font-size: 22px;
	font-weight: 700;
}
.kccList ul{
	padding: 2rem; 
	box-sizing: border-box;
}
.kccList ul li{
	z-index: 1;
	position: relative;
	padding-left: 1rem; 
	box-sizing: border-box;
}
.kccList ul li::before{
	content: ''; 
	position: absolute; 
	width: 3px; 
	height: 3px; 
	border-radius: 50px; 
	left: 0; 
	top: 50%; 
	transform: translateY(-50%); 
	background-color: #787878;
}
.kccList ul li a{
	position: relative;
	display: block;
	padding: 0.5rem 0;
	text-align: left;
	color: #333; 
	font-size: 1.7rem;
}
.kccList ul li a:hover{
	text-decoration: none;
}
.kccList ul li a span{
	position: relative;
}
.kccList ul li a span::after {
    content: "";
	position: absolute;
	left: 0;
	top: 100%;
	width: 0%;
	height: 1px;
	transition: 0.3s;
}
.kccList ul li a:hover span:after {
	width: 100%;
}
.cont-sorry{
	display: block;
	padding: 2.5rem;
	background-color: #f6f6f6;
	text-align: center;
	word-break: keep-all;
}

#footer{
	display: block;
	padding: 5rem 0;
	border-top: 1px #ddd solid;
	color: #666;
	font-size: 1.6rem;
}
#footer .footer-logo{
	display: block;
	margin-bottom: 1rem;
	filter: brightness(0) saturate(100%) invert(38%) sepia(0%) saturate(264%) hue-rotate(142deg) brightness(85%) contrast(88%);
}

@media screen and (max-width: 1200px){
	.kccList{
		flex: 1 calc(50% - 3rem);
	}
}

@media screen and (max-width: 768px){
	html{
		font-size: 8px;
	}
	.cont-kocc .kocc-tit{
        word-break: keep-all;
		font-size: 3.4rem;
	}
	.cont-kocc .kocc-tit br{
		display: none;
	}
	.kccList{
		flex: 100%;
	}
	
}