@charset "utf-8"; 


@font-face {
  font-family: 'NotoKrR';
  font-style: normal;
  font-weight: 300;
  src: local('Noto Sans Regular'), local('NotoSans-Regular'), url('/smc/resources/mobile/css/fonts/NotoSans-Regular.eot');
  src: url('/smc/resources/mobile/css/fonts/NotoSans-Regular.eot?#iefix') format('embedded-opentype'),
  url('/smc/resources/mobile/css/fonts/NotoSans-Regular.woff2') format('woff2'),
  url('/smc/resources/mobile/css/fonts/NotoSans-Regular.woff') format('woff');
}
@font-face {
  font-family: 'NotoKrM';
  font-style: normal;
  font-weight: 500;
  src: local('Noto Sans Medium'), local('NotoSans-Medium'), url('/smc/resources/mobile/css/fonts/NotoSans-Medium.eot');
  src: url('/smc/resources/mobile/css/fonts/NotoSans-Medium.eot?#iefix') format('embedded-opentype'),
  url('/smc/resources/mobile/css/fonts/NotoSans-Medium.woff2') format('woff2'),
  url('/smc/resources/mobile/css/fonts/NotoSans-Medium.woff') format('woff');
}
@font-face {
  font-family: 'NotoKrB';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Sans Bold'), local('NotoSans-Bold'), url('/smc/resources/mobile/css/fonts/NotoSans-Bold.eot');
  src: url('/smc/resources/mobile/css/fonts/NotoSans-Bold.eot?#iefix') format('embedded-opentype'),
  url('/smc/resources/mobile/css/fonts/NotoSans-Bold.woff2') format('woff2'),
  url('/smc/resources/mobile/css/fonts/NotoSans-Bold.woff') format('woff');
}
@font-face {
  font-family: 'SourceHanSansKrB';
  font-style: normal;
  font-weight: 700;
  src: local('SourceHanSans Bold'), local('SourceHanSansKR-Bold-Alphabetic'), url('/smc/resources/mobile/css/fonts/SourceHanSansKR-Bold-Alphabetic.eot');
  src: url('/smc/resources/mobile/css/fonts/SourceHanSansKR-Bold-Alphabetic.eot?#iefix') format('embedded-opentype'),
  url('/smc/resources/mobile/css/fonts/SourceHanSansKR-Bold-Alphabetic.woff2') format('woff2'),
  url('/smc/resources/mobile/css/fonts/SourceHanSansKR-Bold-Alphabetic.woff') format('woff');
}
@font-face {
  font-family: 'SourceHanSansKrM';
  font-style: normal;
  font-weight: 700;
  src: local('SourceHanSans Medium'), local('SourceHanSansKR-Medium-Alphabetic'), url('/smc/resources/mobile/css/fonts/SourceHanSansKR-Medium-Alphabetic.eot');
  src: url('/smc/resources/mobile/css/fonts/SourceHanSansKR-Medium-Alphabetic.eot?#iefix') format('embedded-opentype'),
  url('/smc/resources/mobile/css/fonts/SourceHanSansKR-Medium-Alphabetic.woff2') format('woff2'),
  url('/smc/resources/mobile/css/fonts/SourceHanSansKR-Medium-Alphabetic.woff') format('woff');
}


/* 왼쪽 메뉴 */
.lnbwrap {
    width: 100%;
    height: 100vh;
    background-color: #fff;
}
.lnbwrap .aside-container {
    /* font-size: 2rem; */
    font-size: 15px;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.lnbwrap .aside-container .btn-hamberger {
    position: relative;
    top: 10px;
    left: calc(100% + 10px);
    color: #000;
}
.lnbwrap .aside-container .btn-close-side {
    position: absolute;
    top: 10px;
    left: calc(100% - 48px);
    color: #000;
    z-index: 100;
}
.lnbwrap .aside-container .btn-hamberger img, .lnbwrap .aside-container .btn-close-side img {
    width: 26px;
}

.lnbwrap .menu-article { /* 2020-06-29 수정*/
    position: fixed;
    top: 50px;
/*    display: table;*/
	overflow:hidden;
	 width: 100%;
/*    height: calc(100vh - 100px);*/
     height: calc(100vh - 50px); 
	 z-index:10; /* 2020-09-14 추가 */
}

.lnbwrap .menu-article .menu-left-side {/* 2020-06-29 수정*/
/*    display: table-cell;*/
float:left;
    width: 30%;
    height: 100%;
    background-color: #EDEDED;
    vertical-align: top;
}

.lnbwrap .menu-article .menu-left-side .menu-table {
    height: 100%;
    width: 100%;
}
.lnbwrap .menu-article .menu-left-side .menu-table .menu-category {
    text-align: center;
    background-color: #EDEDED;
    height: calc(100% / 6);
    padding: 0;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.lnbwrap .menu-article .menu-left-side .menu-table .menu-category .menu-category-box {
    position: relative;
    height: 70px;
}
.lnbwrap .menu-article .menu-left-side .menu-table .menu-category .aside-picto {
    max-height: 44px;
    max-width: 50px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%) brightness(150%);
    opacity: 0.5;
}
.lnbwrap .menu-article .menu-left-side .menu-table .menu-category.active {
    background-color: #ffffff;
    border-right: 1px solid #eee;
}
.lnbwrap .menu-article .menu-left-side .menu-table .menu-category.active .aside-picto {
    -webkit-filter: grayscale(0%);
    filter: none;
    opacity: 1;
}
.lnbwrap .menu-article .menu-left-side .menu-table .menu-category h3 {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: #999999;
    margin-bottom: 0;
    font-family: 'NotoKrM', sans-serif;
    /* font-size: 0.8rem; */
    font-size: 13px;
}
/* 2020-09-14 추가 */
.lnbwrap .menu-article .menu-left-side .menu-table .menu-category h3 a{
	color:#999;
	font-family: 'NotoKrM', sans-serif;
    font-size: 13px;
}
/* // 2020-09-14 추가 */
.lnbwrap .aside-bottom {
    display: none;
}

.lnbwrap .menu-article .menu-right-side {/* 2020-06-29 수정*/
/*    display: table-cell;*/
float:left;
width:70%;
    vertical-align: top;
}
.lnbwrap .menu-article .menu-right-side .menu-detail {
    height: 100%;
    display: none;
}
.lnbwrap .menu-article .menu-right-side .menu-detail.active {
    display: block;
}
.lnbwrap .menu-article .menu-right-side .menu-detail h1 {
    font-family: 'NotoKrM', sans-serif;
    /* font-size: 1.4rem; */
    font-size : 25px;
    color: #000000;
    padding: 10px 10px;
    margin-bottom: 0;
    height: 30px;
    border-bottom: 1px solid #eee;
}
.lnbwrap .menu-article .menu-right-side .menu-detail ul {/* 2020-06-29 수정*/
	display: block;
    width: 100%;
    /*height: calc(100vh - 150px)*/ /* 2020-06-08 수정 */
	height:calc(100vh - 100px);
    overflow-y: auto;
    margin-bottom: 0;
}
/* 2020-04-17 추가 */
.lnbwrap .menu-article .menu-right-side .menu-detail ul li .new{
	display:inline-block;
	width:15px; 
	height:15px;
	margin-left:4px;
	line-height:1;
}
.lnbwrap .menu-article .menu-right-side .menu-detail ul li .new img{
	width:100%; 
	max-width:100%;
	vertical-align:top;
	margin-top:1px;
}
/* // 2020-04-17 추가 */

.lnbwrap .menu-article .menu-right-side .menu-detail ul .h2 {
    font-family: 'NotoKrB', sans-serif;
    /* font-size: 1.0rem; */
    font-size: 16px;
    color: #333333;
    padding: 10px 10px;
    margin: 0;
    border-bottom: 1px solid #eee;
}
/* 2020-09-14 추가 */
.lnbwrap .menu-article .menu-right-side .menu-detail ul .h2 a{
    font-family: 'NotoKrB', sans-serif;
    font-size: 16px;
    color: #333333;
}
/* // 2020-09-14 추가 */
.lnbwrap .menu-article .menu-right-side .menu-detail ul .h3 {
    font-family: 'NotoKrM', sans-serif;
    /* font-size: 0.9rem; */
    font-size: 14px;
    color: #999999;
    padding: 10px 10px;
    margin: 0;
    border-bottom: 1px solid #eee;
}
/* 2020-09-14 추가 */
.lnbwrap .menu-article .menu-right-side .menu-detail ul .h3 a{
    font-family: 'NotoKrM', sans-serif;
    font-size: 14px;
    color: #999999;
}
/* // 2020-09-14 추가 */
.lnbwrap .menu-article .menu-right-side .menu-detail ul .h3.active { 
    font-family: 'NotoKrB', sans-serif;
    /* font-size: 1.6rem; */
    color: #31BEDC;
    background-color: #E4FAFF;
}
.lnbwrap .menu-article .menu-right-side .menu-detail ul .h3.active a{ /* 2020-09-14 추가 */
    font-family: 'NotoKrB', sans-serif;
    /* font-size: 1.6rem; */
    color: #31BEDC;
}
.lnbwrap .menu-article .menu-right-side .menu-detail ul .h2.active {
    font-family: 'NotoKrB', sans-serif;
    /* font-size: 1.6rem; */
    font-size: 17px;
    color: #31BEDC;
    background-color: #E4FAFF;
}


/* 2020-09-14 추가 */
/* GNB */
.lnbwrap .all-menu{
	position:relative; 
	width:100%; 
	height:100%;
	padding-top:50px;
	box-sizing:border-box;
}
.lnbwrap .all-menu .menu{
	width:100%; 
	height:calc(100% / 6); 
	overflow:hidden;
}
.lnbwrap .all-menu .menu:after{
	content:''; 
	display:block; 
	clear:both;
}
.lnbwrap .all-menu .menu .one-depth{
	position:relative; 
	display:block; 
	float:left; 
	width:30%; 
	height:100%; 
	margin:0;
	border-bottom:1px solid #ccc; 
	border-right:1px solid #ccc; 
	box-sizing:border-box;
	background:#ededed;
	z-index:10;
}
.lnbwrap .all-menu .menu:last-child .one-depth{
	border-bottom:0;
}
.lnbwrap .all-menu .menu.active .one-depth{
	border-right:1px solid #eee; 
	background:#fff;
}
.lnbwrap .all-menu .menu .one-depth a{
	position:absolute; 
	top:50%; 
	left:50%; 
	transform:translate(-50%, -50%); 
	display:block;
	width:100%; 
	height:70px; 
	font-size:0; 
	text-align:center;
}
.lnbwrap .all-menu .menu .one-depth a p{
	position:absolute; 
	bottom:0; 
	left:0; 
	width:100%; 
	margin-bottom:0; 
	font-family:'NotoKrM', sans-serif; 
	font-size:13px; 
	color:#888888; 
	line-height:19px;
}
.lnbwrap .all-menu .menu .one-depth .aside-picto{
	max-height:44px; 
	max-width:50px; 
	-webkit-filter: grayscale(100%);
	filter:grayscale(100%) brightness(150%); 
	opacity:0.5;
}
.lnbwrap .all-menu .menu.active .one-depth .aside-picto{
	-webkit-filter: grayscale(0%);
	filter:none; 
	opacity:1;
}
.lnbwrap .all-menu .menu.active .submenu-div{
	display:block;
	padding-top:50px;
	box-sizing:border-box;
}
.lnbwrap .all-menu .menu .submenu-div{
	display:none; 
	position:absolute; 
	top:0; 
	right:0; 
	width:70%;
	z-index:1;
}
.lnbwrap .all-menu .menu .submenu-div h1{
	display:block;
	font-family:'NotoKrM', sans-serif; 
	font-size:25px; 
	color:#000; 
	font-weight:500;
	margin:0; 
	padding:10px 10px;
	margin-bottom:0; 
	height:30px; 
	border-bottom:1px solid #eee;
}
.lnbwrap .all-menu .menu .submenu-div ul{
	display:block;
	width:100%; 
	overflow-y:auto; 
	margin-bottom:0;
}

.lnbwrap .all-menu .menu .submenu-div ul {
	width: 100%;
	height: calc(100vh - 60px); 
	overflow-y: auto;
	margin-bottom: 0;
}
.left-aside.with-push .menu-article .menu-right-side .menu-detail ul {
	height: calc(100vh - 150px); 
}
.lnbwrap .all-menu .menu .submenu-div ul .h2 {
	font-family: 'NotoKrB', sans-serif;
	font-size: 16px;
	color: #333333;
	padding: 10px 10px;
	margin: 0;
	border-bottom: 1px solid #eee;
}
.lnbwrap .all-menu .menu .submenu-div ul .h2 a{ 
	font-family: 'NotoKrB', sans-serif;
	font-size: 16px;
	color: #333333;
}
.lnbwrap .all-menu .menu .submenu-div ul .h2 a:focus,
.lnbwrap .all-menu .menu .submenu-div ul .h2 a:active{ 
	outline:auto !important;
}
.lnbwrap .all-menu .menu .submenu-div ul .h3 {
	font-family: 'NotoKrM', sans-serif;
	font-size: 14px;
	color: #666666;
	margin: 0;
	border-bottom: 1px solid #eee;
}
.lnbwrap .all-menu .menu .submenu-div ul .h3 a{ 
	display:block;
	padding: 10px 10px;
	font-family: 'NotoKrM', sans-serif;
	font-size: 14px;
	color: #888888; 
}
.lnbwrap .all-menu .menu .submenu-div ul .h3 a:focus,
.lnbwrap .all-menu .menu .submenu-div ul .h3 a:active{ 
	outline:auto !important;
}
.lnbwrap .all-menu .menu .submenu-div ul .h3.active{
	background-color: #E4FAFF;
}
.lnbwrap .all-menu .menu .submenu-div ul .h3.active a{
	font-family: 'NotoKrB', sans-serif;
	font-size: 14px;
	color: #234072;
}
.lnbwrap .all-menu .menu .submenu-div ul .h2.active{
	font-family: 'NotoKrB', sans-serif;
	font-size: 16px;
	color: #13444E;
	background-color: #E4FAFF;
}
.lnbwrap .all-menu .menu .submenu-div ul .h2.active a{
	color: #13444E;
}
.lnbwrap .all-menu .menu .submenu-div ul li .new{
	display:inline-block;
	width:15px; 
	height:15px;
	margin-left:4px;
	line-height:1;
}
.lnbwrap .all-menu .menu .submenu-div ul li .new img{
	width:100%; 
	max-width:100%;
	vertical-align:top;
	margin-top:1px;
}
/* // 2020-09-14 추가 */