#wrap .left {
	position:fixed;
	left:20px;
	width:220px;
	bottom:5%;
	border: 2px solid #689aff;
	border-radius: 10px;
	background-color:var(--bs-white); 
	-webkit-transition: all 0.3s;
	  -moz-transition: all 0.3s;
	  -o-transition: all 0.3s;
	  -ms-transition: all 0.3s;
	  transition: all 0.3s;
}

#wrap .left h4 {
	background: #2c53b0;
	padding: 13px 20px;
	color: #fff;
	margin: 0;
	font-size: 17px;
}
#wrap .left ul {
	padding: 0;
}
#wrap .left li {
	border-bottom: 1px solid #464d59;
	background: #303948;
	color:var(--bs-white);
}
#wrap .left li a {
	color:var(--bs-white);
}
#wrap .left li.depth1, 
#wrap .left li div.depth2 {
	font-size: 14px;
	position: relative;	
	display: block;
	color:var(--bs-white);
}
#wrap .left li.depth1 {
	padding: 10px 24px 10px 35px;
}
#wrap .left li div.depth2 {
	padding: 5px 10px 5px 10px;
}
#wrap .left li.depth1.on {
	color: var(--bs-orange);
}
#wrap .left li div.depth2.on {
	color: var(--bs-orange);
}
#wrap .left li.depth1 a:before {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #1087f1;
	display: block;
	content: "";
	position: absolute;
	left: 20px;
	top: 18px;
	transform: translateY(-50%)
}
#wrap .left li div.depth2 a:before {
	content: "";
	left:0;
	top:0;
	width:0;
}
#wrap .left li a:hover {
	color: var(--bs-font-hover);
}

#wrap .left .left_banner {
	text-align: center;
	padding:2px 0;
}
ul.checklist {
	list-style-type: none;
	padding: 0;
}

ul.checklist li {
	margin: 10px 0;
	color: var(--bs-white);
}

div p a.btn {
	display: inline-block;
	padding: 10px 60px;
	color: var(--bs-white);
	background: #1087f1;
	font-size: 18px;
	margin-top: 40px;
}

.num-list {
	border-top: 1px dashed #c8c8c8;
}
.num-list li {
	padding: 20px 0 20px 0px;
	border-bottom: 1px dashed #c8c8c8;
	font-size: 17.5px;
	min-height: 50px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
}
.num-list li span {
	display: block;
	width: 50px;
	line-height: 48px;
	border-radius: 50px;
	text-align: center;
	border: 1px solid #689aff;
	font-size: 22px;
	font-weight: 800;
	color: #689aff;
}
.num-list li span.img {
	width:120px;
	border:none;
}
.num-list li > div {
	display: grid;
	align-items: center;
	width:calc(100% - 60px);
	gap: 10px;
}
.num-list li > div.img {
	width:calc(100% - 130px);
}
.num-list li > div .title {
	width: 100%;
	color: var(--bs-gray-200);
}

a.more {
	font-size:20px;
	padding-left:20px;
}

.pop-footer {
	text-align: center;
	font-size:14px;
	padding:5px 0;
	background-color: var(--bs-gray-100);
}
table.border-none th, table.border-none td {
	border:none;
}

.text-center {
	text-align: center;
}
.content-center {
	display: flex;
    justify-content: center; /* 가로 방향 가운데 정렬 */
}

#pageNavi {
	display: flex;
    justify-content: center;
}

th.ico-essential {
    position: relative; /* 상대 위치로 설정 */
    padding-left: 25px; /* 아이콘과 텍스트 간격 */
}

th.ico-essential:before {
    position: absolute;
    display: block;
    content: "";
    width: 5px;
    height: 5px;
    left: 3px; /* 아이콘 위치 */
    transform: translateY(-50%);
    top: 50%;
    background: var(--bs-red); /* 필요한 경우 색상 설정 */
    border-radius: 50%; /* 원형 아이콘 */
}

html,
body {
	font-variant-numeric: tabular-nums;
}

.wid200 {
	width: 0;
}

@media (max-width: 1360px) {
    .wid200 {
        width: 30%;
    }
    #main_header {
    	min-width:1000px;
    }
    
    #main_header h1.logo {
        position: relative;
    	padding: 0 20px;
    	top:0;
    	left:0;
    }
    
    #main_footer { 
    	display:block; padding: 30px 30px; 
   	}
   	
    #main_footer h1 {
	    width: 100%;
	    display: block;
	    height: 67px;
	    background-repeat: no-repeat;
    }
    #main_footer > div {
    	width:100%;
    }
    #main_footer p img {
    	padding: 20px;
    }
    #main_footer > div p em {
	    width: 100%;
    	display: block;
	}
	#wrap .left { z-index: 2; }
}

@media (min-width: 1360px) and (max-width: 1790px) {
    .wid200 {
        width: 20%;
    }
}

/* 큰 화면에서 너비 조정 */
@media (min-width: 1790px) {
    .wid200 {
        width: 0;
    }
}

.manualContent img {
	max-width:98%;
}
.cnWrap li.selected {
	background: var(--bs-gray-200);
}
.cnWrap li.selected a {
	color: var(--bs-orange);
	font-weight: bold;
}