@charset "utf-8";

/************************************************************************
 * 파일명      : responsive.css
 * 설명        : 기본 css정의
 * 작성일      : 2014.10.06
************************************************************************/

.hidden {
  display: none;
  visibility: hidden;
}

.visible-phone {
  display: none !important;
}

.visible-tablet {
  display: none !important;
}

.hidden-desktop {
  display: none !important;
}

.visible-desktop {
  display: inherit !important;
}

/* 태블릿 및 노트북 */
@media (min-width: 768px) and (max-width: 1062px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
  #header .inner-wrap {
    padding:0 10px;
  }
  .top-link {
    right:10px;
	top:39px;
  }
  #gnb {
    display: block;
    float: none;
    height: auto;
    margin-top: 99px;
	margin-left:-10px;
	margin-right:-10px;
  }
  #gnb .d1 {
    height: 0;
	overflow:hidden;
  }
  #gnb ul.d1 > li {
    float: none;
  }  
  #gnb ul.d1 > li > a {
    height: 35px;
    line-height: 35px;
	background:#ececec;
	display:block;
  }
  .sub-nav {
    position:relative;
	top:0;
  }
  .sub-nav li a {
    padding:10px 10px 10px 30px;
  }
  .main-visual .item h4,
  .main-visual .item h3 {
    font-size:25px !important;
  }
  .main-content {
    max-width:670px;
	margin:30px auto;
	min-height : 620px;
  }
  .main-content div.main-news {
    top:0;
	left:0;
  }
  .main-content div.main-graph {
	width:317px;
	top:0;
	right:0;
	left:inherit;
  }
  .main-graph .graph-left {
    width:193px;
  }
  .main-content div.main-issue {
    top:235px;
	left:0;
	bottom:inherit;
  }
  .main-content div.main-paper {
    top:230px;
	right:0;
	bottom:inherit;
	width:317px;
  }
  .main-paper .paper-right .text {
    height:auto;
  }
  .main-paper .paper-right {
    width:137px;
  }
  .main-content div.main-menu {
    top:444px;
	left:0;
	width:317px;
  }
  .main-content div.main-popupzone {
    top:423px;
	right:0;
	left:inherit;
  }
  .news-visual {
    display:none;
  }
  #footer {
    padding-top:17px !important;
	padding-left:20px;
	padding-right:20px;
  }
  .sub-title .centered .item .t1 {
    font-size:32px;
  }
  .sub-title {
    background-size:100%;
	padding-top:16.8%;
	height:inherit;
  }
  .sub-title.st01 {
    background-image:url('/skin/img/sub/sub_visual01_tablet.jpg');
  }
  .sub-title.st02 {
    background-image:url('/skin/img/sub/sub_visual02_tablet.jpg');
  }
  .sub-title.st03 {
    background-image:url('/skin/img/sub/sub_visual03_tablet.jpg');
  }
  .sub-title.st04 {
    background-image:url('/skin/img/sub/sub_visual04_tablet.jpg');
  }
  .sub-title.st05 {
    background-image:url('/skin/img/sub/sub_visual05_tablet.jpg');
  }
  .sub-title.st06 {
    background-image:url('/skin/img/sub/sub_visual06_tablet.jpg');
  }
  .sub-title.st07 {
    background-image:url('/skin/img/sub/sub_visual07_tablet.jpg');
  }
  .sub-title.st08 {
    background-image:url('/skin/img/sub/sub_visual08_tablet.jpg');
  }

}

@media (max-width: 767px) {
  .sub-title {
	background-size:100%;
	padding-top:16.8%;
	height:inherit;
  }
  .sub-title.st01 {
    background-image:url('/skin/img/sub/sub_visual01_tablet.jpg');
  }
  .sub-title.st02 {
    background-image:url('/skin/img/sub/sub_visual02_tablet.jpg');
  }
  .sub-title.st03 {
    background-image:url('/skin/img/sub/sub_visual03_tablet.jpg');
  }
  .sub-title.st04 {
    background-image:url('/skin/img/sub/sub_visual04_tablet.jpg');
  }
  .sub-title.st05 {
    background-image:url('/skin/img/sub/sub_visual05_tablet.jpg');
  }
  .sub-title.st06 {
    background-image:url('/skin/img/sub/sub_visual06_tablet.jpg');
  }
  .sub-title.st07 {
    background-image:url('/skin/img/sub/sub_visual07_tablet.jpg');
  }
  .sub-title.st08 {
    background-image:url('/skin/img/sub/sub_visual08_tablet.jpg');
  }
  .sub-title .centered .item {
    max-width:98px
  }
  .sub-title .centered .item .t1 {
    font-size:20px;
  }
  .sub-title .centered .item a,.sub-title .centered .item a:hover {
    background-size:200%;
	width:18px;
	height:18px;
  }
  .sub-title .centered .item a.page-next {
    background-position:-18px 0;
  }
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
  #header .inner-wrap {
    padding:0 10px;
  }
  .top-link {
    right:10px;
	top:6px;
  }

  #gnb {
    display: block;
    float: none;
    height: auto;
    margin-top: 99px;
	margin-left:-10px;
	margin-right:-10px;
  }

  #gnb .d1 {
    height: 0;
	overflow:hidden;
  }

  #gnb ul.d1 > li {
    float: none;
  }
  
  #gnb ul.d1 > li > a {
    height: 35px;
    line-height: 35px;
	background:#ececec;
	display:block;
  }

  .sub-nav {
    position:relative;
	top:0;
  }
  .sub-nav li a {
    padding:10px 10px 10px 30px;
  }
  .main-paper .paper-right .paper-item {
    height:auto;
  }
  .main-visual .item h4 {
    font-size:13px !important;
	font-weight:bold !important;
	padding: 10px 0 0 10px;!important;
  }
  .main-visual .item h3,
  .main-visual .item p {
    font-size:12px !important;
	padding: 10px !important;
  }
  .main-content {
    max-width:317px;
	margin:20px auto;
	min-height : 1157px;
  }
  .main-content div.main-news {
    top:0;
	left:0;
	bottom:inherit;
  }
  .main-content div.main-graph {
	width:317px;
	top:243px;
	right:0;
  }
  .main-graph .graph-left {
    width:193px;
  }
  .main-content div.main-issue {
    top:417px;
	left:0;
	bottom:inherit;
  }
  .main-content div.main-paper {
    top:582px;
	left:0;
	bottom:inherit;
	width:317px;
  }
  .main-paper .paper-right {
    width:137px;
  }
  .main-paper .paper-right .text {
	height:auto;
  }
  .main-content div.main-menu {
    top:756px;
	left:0;
	width:317px;
  }
  .main-content div.main-popupzone {
    top:960px;
	left:0;
  }
  .news-visual {
    display:none;
  }
  #footer {
    padding-top:17px !important;
	padding-left:20px;
	padding-right:20px;
  }
  #footer .bottom div.logo {
    float:none;
	margin-right:0;
	margin:0 auto 20px auto;
  }
  #footer .bottom div.copyright {
    float:none;
	text-align:center;
  }
  #footer .bottom div.copyright .addr p {
    float:inherit;
  }
  .family-wrap {
    float:none;
	margin:20px auto;
  }
}

@media (max-width: 450px) {
  #header h1 {
    margin-top : 43px;
  }
  .main-visual .item h4 {
    font-size:13px !important;
	font-weight:bold !important;
	padding: 8px 2px 2px 2px;!important;
  }
  .main-visual .item h3,
  .main-visual .item p {
    font-size:12px !important;
	padding: 2px !important;
  }
  .skdslider ul.slide-navs {
    display:none !important;
  }
  .family-wrap {
    float:none;
	margin:20px auto;
  }
  .main-paper .paper-right .title a {
    font-size:11px;
  }
  .main-paper .paper-right .paper-item {
    height:auto;
  }
  .main-paper .paper-right .text {
    height:auto;
  }
  .main-paper .paper-right .title {
    margin-bottom : 14px;
  }
  .sub-title .centered .item {
    max-width:78px
  }
  .sub-title .centered .item .t1 {
    font-size:15px;
	margin-bottom:0;
	padding-top:10px;
  }
}

@media (min-width: 1062px) {
  #gnb .d1 {
    height: 62px;
	overflow:visible;
  }
}