@charset "utf-8";
/*-------------------------------------------------
Matrix Style Sheet / Park Myeong-hee /2016. 11. 31.
-------------------------------------------------*/
.logo a:first-child {
	height: 56px;
	}

.path_wrap .stitle {
	float: left;
	margin: 0;
	}
.path_wrap {
    margin-bottom: 40px;
    padding-bottom: 17px
    }
.path_wrap > .float_right {
	margin-top: 13px;
	} 
#snavigation {
	margin-bottom: 20px;
	}
/* 기간설정 */
.matrix_term {
	margin-bottom: 20px;
	padding: 19px 20px;
	background: #7f6c58;
	overflow: hidden;
	}
.matrix_term dt {
	margin-bottom: 9px;
	color: #fff;
	text-shadow: 2px 1px 1px #706051;
	}
.matrix_term dd {
	float: left;
	width: 50%;
	margin: 0 -1px -1px 0;
    box-sizing: border-box;
    letter-spacing: -0.05em;
    font-size: 0.867em;
    font-family: NotoT;
	}
.matrix_term dd a {
	display: block;
    background: #9f8972;
    border: solid 1px #61544e;
	padding: 1px 10px 2px 6px;
	color: #fff;
	}
.matrix_term dd a.on {
	background: #685b55 url(/resources/images/kps/matrix/matrix_term.gif) no-repeat right center;
	color: #fdb813;
	}	
/* side 많이 본글 */
.popular_area {
	margin-bottom: 50px;
	padding: 19px 20px;
	background: #f4f6f8;
	border: solid 1px #e8e8e8;
	overflow: hidden;
	}
.popular_area .title {
    margin-bottom: 16px;
    color: #333;
    font: normal 1.2em NotoB; 
	}
.list_popular {/* 검색어 목록 */
	width: 100%;
	overflow: hidden;
	}
.list_popular li {
	height: 16px;
	margin-top: 11px;
	overflow: hidden;
	}
.list_popular li:first-child {
	margin-top: 0
	}
.list_popular li span,
.list_popular li strong {
	display: block;
	float: left;
	}	
.list_popular li .rank {
	width: 15px;
	margin-right: 8px;
	background: #fff;
	border: solid 1px #d7d7d7;
	color: #333;
	text-align: center;
	line-height: 1.1;
	font-size: 0.8em;
	}
.list_popular li .rank em {
	position: relative;
	font-style: normal;
	}
.list_popular li.on .rank {
	background: #fc6719;
	border-color: #fc6719;
	color: #fff;
	}
.list_popular li strong {
	width: 133px;
	letter-spacing: -0.03em;
	line-height: 1.1;
	font-size: 0.933em;
	font-weight: normal;
	overflow: hidden;
	}
.list_popular li a {
	color: #333;
	}	
/*네비 */	
.matrix_nav {
	width: 100%; 
	height: 135px;
	margin: 0 -2px 35px;
	letter-spacing: -0.1em;
	line-height: 1;
	font-weight: normal;
	overflow: hidden;
	} 
.matrix_nav > li {
    position: relative;
    float: left;
	width: calc(100% / 8); 
	height: 125px;
	padding: 0 2px;
	box-sizing: border-box;
	text-align: center; 
	}
.matrix_nav > li > span,	
.matrix_nav > li > a {
    display: block;
    position: relative;
    padding: 17px 0;
	border: solid 3px #f0f2f5;
    color: #333;
	}
.matrix_nav > li i {
	display: block;
	width: 103px;
	height: 55px;
	margin: 0 auto 15px;
	background: url(/resources/images/kps/matrix/matrix_nav.png) no-repeat 0 0;
	}	
.matrix_nav > li a:hover,	
.matrix_nav > li.on a {
	background-color: #009FB8;
	border-color: transparent;
	transition: all 0.3s ease;
	color: #fff;
	}
.matrix_nav > li.on::after {
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 0;
    height: 0;
    margin-left: -10px;
    border-top: 10px solid #009FB8;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
    content: '';
	}
.matrix_nav > li span::before {
	display: block; 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	background: url(/resources/images/kps/matrix/matrix_nav_slash.png) no-repeat 0 0 / 100%;
	content: '';
	}
.matrix_nav > li span i {opacity: 0.6;}	
.matrix_nav .icon_0001 {background-position: 0 -55px;}
.matrix_nav .icon_0002 {background-position: 0 -110px;}
.matrix_nav .icon_0003 {background-position: 0 -165px;}
.matrix_nav .icon_0004 {background-position: 0 -220px;}
.matrix_nav .icon_0005 {background-position: 0 -275px;}
.matrix_nav .icon_0006 {background-position: 0 -330px;}
.matrix_nav .icon_0007 {background-position: 0 -385px;}
.matrix_nav .icon_0008 {background-position: 0 -440px;}
.matrix_nav .icon_0009 {background-position: 0 -495px;}

.matrix_nav > li a:hover .icon_all, .matrix_nav > li.on .icon_all  {background-position: -120px 0;}
.matrix_nav > li a:hover .icon_0001, .matrix_nav > li.on .icon_0001  {background-position: -120px -55px;}
.matrix_nav > li a:hover .icon_0002, .matrix_nav > li.on .icon_0002 {background-position: -120px -110px;}
.matrix_nav > li a:hover .icon_0003, .matrix_nav > li.on .icon_0003 {background-position: -120px -165px;}
.matrix_nav > li a:hover .icon_0004, .matrix_nav > li.on .icon_0004 {background-position: -120px -220px;}
.matrix_nav > li a:hover .icon_0005, .matrix_nav > li.on .icon_0005 {background-position: -120px -275px;}
.matrix_nav > li a:hover .icon_0006, .matrix_nav > li.on .icon_0006 {background-position: -120px -330px;}
.matrix_nav > li a:hover .icon_0007, .matrix_nav > li.on .icon_0007 {background-position: -120px -385px;}
.matrix_nav > li a:hover .icon_0008, .matrix_nav > li.on .icon_0008 {background-position: -120px -440px;}
.matrix_nav > li a:hover .icon_0009, .matrix_nav > li.on .icon_0009 {background-position: -120px -495px;}
	
/* 검색 목록 */	
.list_info {
	overflow: hidden;
	}	
.list_info > li {
	margin-top: 36px;
	}	
.list_info > li:first-child {
	margin-top: 0;
	}	
.remarks {
	display: block;
	margin-bottom: 6px;
	}
.remarks > span {
	min-width: 80px;
	padding: 3px 10px;
	text-align: left;
	}	
.list_info .scrap {
	font-size: 0.933em;
	}	
.list_info .scrap i {
	margin: 0 4px 0 10px;
	color: #19a74b;
	}
.list_info strong {
	display: block;
	letter-spacing: -0.05em;
	line-height: 1.3;
	font: normal 1.533em NotoR;
	}	
.list_info strong a {
	color: #000;
	}	
.list_info .link_desc {
	display: block;
	margin-top: 3px;
	color: #000;
	}
.info_append {
	display: block;
	margin-top: 4px;
	}	
.info_append a {
	color: #757577;
	}
.info_append .fa-caret-right {
    height: 16px;
    margin: 0 5px;
	color: #909090;
	line-height: 1.4;
	font-size: 10px;
    vertical-align: middle;
	}
	
/* 본문 많이 본 글 */
.matrix_main {
	margin-top: -95px;
	}
[class*="depth1_title"] {
	margin-bottom: 40px;
	padding-bottom: 15px;
	border-bottom: solid 1px #e8e8e8;
	color: #000;
	line-height: 1.3;
	letter-spacing: -0.05;
	font-size: 2em;
	font-family: NotoM;
	}
.depth1_title02 {
	margin-top: 57px;
	}	
	
.matrix_manyList {
	overflow: hidden;
	}
.matrix_manyList > li {
	margin-top: 10px; 
	overflow: hidden;
	}
.matrix_manyList > li:first-child,	
.matrix_manyList > li:nth-child(2) {
	margin-top: 0;
	}	
.matrix_manyList .remarks {
	float: left;
	margin: 0 10px 0 0;
	}	
.matrix_manyList .date {
	color: #757577;
	}
.matrix_manyList strong  {
    position: relative;	
	display: block;
	line-height: 1.5;
	font: normal 1.2em NotoR;
	overflow: hidden;
	}
.matrix_manyList strong a {
	color: #313131;
	}	
.matrix_manyList strong a:focus {
	text-decoration: underline;
	outline: 0;
	}
.list_imgtxt {
	height: 255px;
	margin-bottom: 40px;
	}	
.list_imgtxt .thumb {
	float: left; 
	width: 380px; 
	height: 253px; 
	margin-right: 30px; 
	background: #eeeff3;
	border: solid 1px #c9cacc;
	border-top-color: #dddedf;
	border-left-color: #dddedf;
	overflow: hidden;
	}
.list_imgtxt .thumb img {
	width: 100%;
	}
.list_imgtxt .float_left {
	float: none;
	position: relative;
	overflow: hidden;
	}
.list_imgtxt .remarks {
	float: none;
	margin-bottom: 10px;
	}	
.list_imgtxt strong {
	display: block;
	margin-bottom: 10px;
	line-height: 1.3;
	font: normal 1.467em NotoM;
	}
.list_imgtxt .link_desc {
	display: block;
	height: 170px;
	}
.list_imgtxt .link_desc a {
	display: block;
	}


/* layout_popup
-------------------------------------------------*/		
html.all-scrollFixed {
	overflow: hidden;
	}
html.all-scrollFixed::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, .6);
    z-index: 99;
	content: '';
	}	
.matrix_layout_popup {
    display:none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 400px;
	padding: 50px 25px;
	background-color: #fff;
	border: solid 1px #ddd;
	text-align: center;
	transform: translate(-50%, -50%);
    z-index: 100;
	}	
	
html.all-scrollFixed .matrix_layout_popup {
	display: block;
	}	
.matrix_layout_popup > i:first-child {
	font-size: 35px;
	}	
.matrix_layout_popup .subject {	
	margin: 10px 0 15px;    
    color: #000;
	letter-spacing: -0.08em;
    font-size: 20px;
	}