@charset "utf-8";

/* 폰트 첨부파일 */
@font-face {
    font-family: 'xeicon';
    src: url('font/xeicon/xeicon.eot');
    src: url('font/xeicon/xeicon.eot?#iefix') format('embedded-opentype'),
        url('font/xeicon/xeicon.svg#xeicon') format('svg'),
        url('font/xeicon/xeicon.ttf') format('truetype'),
        url('font/xeicon/xeicon.woff') format('woff'),
        url('font/xeicon/xeicon.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family:'Seogo Script';
    font-style: normal;
    font-weight: normal;
    src: url(font/segoesc/segoesc.eot);
    src: url(font/segoesc/segoesc.eot?#iefix) format('embedded-opentype'),
         url(font/segoesc/SegoeScript.woff) format('woff'),
         url(font/segoesc/segoesc.woff2) format('woff2'),
         url(font/segoesc/segoesc.ttf) format('truetype');
}

@font-face {
	font-family:'Noto Sans KR';
	font-style:normal;
	font-weight:100;
    src : local("Noto Sans DemiLight"), local('Noto Sans DemiLight'), local(Noto Sans DemiLight);
    src : url(font/Noto_Sans_Webfont/NotoSans-DemiLight.eot);
    src : url(font/Noto_Sans_Webfont/NotoSans-DemiLight.eot?#iefix) format('embedded-opentype'),
        url(font/Noto_Sans_Webfont/NotoSans-DemiLight.woff) format('woff'),
        url(font/Noto_Sans_Webfont/NotoSans-DemiLight.otf) format('truetype');   
}
@font-face {
	font-family:'Noto Sans KR';
	font-style:normal;
	font-weight:500;
    src : local("Noto Sans Regular"), local('Noto Sans Regular'), local(Noto Sans Regular);
    src : url(font/Noto_Sans_Webfont/NotoSans-Regular.eot);
    src : url(font/Noto_Sans_Webfont/NotoSans-Regular.eot?#iefix) format('embedded-opentype'),
        url(font/Noto_Sans_Webfont/NotoSans-Regular.woff) format('woff'),
        url(font/Noto_Sans_Webfont/NotoSans-Regular.otf) format('truetype');   
}
@font-face {
	font-family:'Noto Sans KR';
	font-style:normal;
	font-weight:bold;
    src : local("Noto Sans Medium"), local('Noto Sans Medium'), local(Noto Sans Medium);
    src : url(font/Noto_Sans_Webfont/NotoSans-Medium.eot);
    src : url(font/Noto_Sans_Webfont/NotoSans-Medium.eot?#iefix) format('embedded-opentype'),
        url(font/Noto_Sans_Webfont/NotoSans-Medium.woff) format('woff'),
        url(font/Noto_Sans_Webfont/NotoSans-Medium.otf) format('truetype');   
}

@font-face {
    font-family: 'NanumSquare';
    font-style: normal;
    font-weight: normal;
    src: local("Nanum Square Regular"), local('Nanum Square Regular'), local(Nanum Square Regular);
    src: url(font/NanumSquare/NanumSquareR.eot);
    src: url(font/NanumSquare/NanumSquareR.eot?#iefix) format('embedded-opentype'),
        url(font/NanumSquare/NanumSquareR.woff) format('woff'),
        url(font/NanumSquare/NanumSquareR.woff2) format('woff2'),
        url(font/NanumSquare/NanumSquareR.otf) format('truetype');
}

@font-face {
    font-family: 'NanumSquare';
    font-style: normal;
    font-weight: bolder;
    src: local("Nanum Square EB"), local('Nanum Square EB'), local(Nanum Square EB);
    src: url(font/NanumSquare/NanumSquareEB.eot);
    src: url(font/NanumSquare/NanumSquareEB.eot?#iefix) format('embedded-opentype'),
        url(font/NanumSquare/NanumSquareEB.woff) format('woff'),
        url(font/NanumSquare/NanumSquareEB.woff2) format('woff2'),
        url(font/NanumSquare/NanumSquareEB.otf) format('truetype');
}

html {
    font-size: 20px;
    font-family: 'Noto Sans KR', sans-serif;
    font-style: normal;
    font-weight: 100;
}   

body {
    font-size: 1rem;
}
html,body {overflow-x: hidden;}


/*노말라이징*/

/* 노말라이즈 */
body,ul,li,h1,h2,h3,h4,h5,h6,p {
    margin: 0;
    padding: 0;
    list-style: none;
}
h2{
    font-weight: normal;
}
a {
    color: inherit;
    text-decoration: none;
}

table:not(.__se_tbl) {
    border-collapse: collapse;
    border-spacing: 0;
    word-break:break-all;
    width: 100%;
}

 
.hide, legend, hr, caption, caption span {
    position: absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0
}



.con {
    margin: 0 auto;
}

.nowrap {
    white-space: nowrap;
}

.img-box > img {
    width: 100%;
    display: block;
}

.row::after {
    content: "";
    display: block;
    clear: both;
}

.cell {
    float: left;
    box-sizing: border-box;
}

.cell-right {
    float: right;
    box-sizing: border-box;
}

.margin-0-auto {
    margin: 0 auto;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.text-align-center {
    text-align: center;
}

.line-height-0-ch-only {
    line-height: 0;
}

.line-height-0-ch-only > * {
    line-height: normal;
}

.relative {
    position: relative;
}

.absolute-left {
    position: absolute;
    left: 0;
}

.absolute-right {
    position: absolute;
    right: 0;
}

.absolute-middle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.cell.cell-1-3 {
    width: 33.3%;
}

.cell.cell-2-3 {
    width: 66.6%;
}
 
i {
    font-family: 'xeicon';
}

.con-max {max-width: 84rem;}

.con-middle {max-width: 80rem;}

.con-min-width {min-width: 16rem;}
/****  라이브러리   *****/



.line {
    width: 2rem;
    height: 0.25rem;
    background-color: #44d3e4;
    margin: 1rem 0 1.5rem 0;
}

#wrap {
    position: relative;
    width: 100%;
}


/****************   공통영역    ***************/


/***** 모바일 사이드 메뉴 영역  *******/


.mobileSideNav {
    position: fixed;
    top: 0;
    width: 26rem;
    right: -26rem;
    height: 100%;
    background-color: white;
    transition: right 0.3s;
    z-index: 100;
}

.mobileSideNav.active {
    right: 0;
    overflow-y: auto;
}

.mobileSideNav .mobileTopMenu {
    width: 100%;
}

.mobileSideNav .mobileTopMenu .mobileLogo {
    display: block;
    max-width: 6.2rem;
    margin: 1.5rem 0 0 1.5rem;
}

.mobileSideNav .mobileTopMenu .mobileLogo img {
    display: block;
    width: 100%;
}

.mobileSideNav .mobileTopMenu div {
    width: 6rem;
    height: 100%;
    text-align: center;
}

.mobileSideNav .mobileTopMenu div.engBtn {
    background-color: #fff;
}

.mobileSideNav .mobileTopMenu div.engBtn a {
    font-size: 1.1rem;
    color: #333;
    display: block;
    line-height: 6rem;
}

.mobileSideNav .mobileTopMenu div.engBtn a i {
    font-size: 1.2rem;
    color: #fff;
    background-color: #42b9be;
    box-shadow: 0 0 0 5px #42b9be;
    border-radius: 50%;
    margin-right: 0.7rem;
}

.mobileSideNav .mobileTopMenu div.closeBtn {
    background-image: linear-gradient(45deg, #0083c4, #29b5ce, #4cb9b4);
    cursor: pointer;
}

.mobileSideNav .mobileTopMenu div.closeBtn i {
    font-size: 2.5rem;
    color: #fff;
    line-height: 6rem;
    font-weight: 100;
}

.mobileSideNav .mobileSideMenu ul ul {
    display: none;
    background-color: #efefef;
}

.mobileSideNav .mobileSideMenu ul ul ul {
    background-color: #dfdfdf;
}

.mobileSideNav .mobileSideMenu ul li a {
    display: block;
    padding: 1.5rem;
    box-sizing: border-box;
}

.mobileSideNav .mobileSideMenu > ul > li ~ li {
    border-top: 1px solid #fff;
}

.mobileSideNav .mobileSideMenu > ul > li:last-child {
    border-bottom: 1px solid #fff;
}

.mobileSideNav .mobileSideMenu > ul > li > a {
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #1c3c87;
    color: #fff;
}

.mobileSideNav .mobileSideMenu ul ul > li {
    border-bottom: 1px solid #6b94c8
}

.mobileSideNav .mobileSideMenu ul ul > li > a {
    font-size: 1rem;
    background-color: #2b66b0;
    color: #fff;
}

.mobileSideNav .mobileSideMenu ul ul > li:hover > a {
    background-color: #f1f6f8;
    color: #333;
}

.mobileSideNav .mobileSideMenu ul ul ul > li {
    border-bottom: 1px solid #ddd;
}

.mobileSideNav .mobileSideMenu ul ul ul > li > a {
    font-size: 1rem;
    background-color: #fff;
    color: #989898;
    padding: 1.2rem;
}

.mobileSideNav .mobileSideMenu ul ul ul > li:hover > a {
    background-color: #fff;
    color: #1c3c87;
}

.mobileSideNav .mobileSideMenu ul > li > a::after {
    content: ">";
    float: right;
    margin-right: 5px;
}

.mobileSideNav .mobileSideMenu ul > li > a:not(:only-child)::after {
    content: "+";
}

.mobileSideNav .mobileSideMenu ul > li.active > a:not(:only-child)::after {
    content: "-";
}

.mobileSideNav .mobileSideMenu li.active > ul {
    display: block;
}

.mobileSideNavBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 99;
}

.mobileSideNavBg.active {
    display: block;
}


/***** 모바일 사이드 메뉴 영역 2 (스마트 검색존 / KRIVET NETWORKS
 / 도서관 / 열린지식존 ) *****/


.mobileSideNav .mobileSideMenu2 ul li .mobileTile {
    background-color: #f1f6f8;
    font-size: 1.2rem;
    color: #333;
}

.mobileSideNav .mobileSideMenu2 ul li .mobileTile i {
    background-color: #1c3c87;
    font-size: 1.7rem;
    color: #5eedf5;
    width: 3.5rem;
    height: 3.5rem;
    text-align: center;
    line-height: 3.5rem;
    margin-right: 1rem;
}

.mobileSideNav .mobileSideMenu2 ul li ul li {
    width: 33.333%;
    text-align: center;
    color: #b7b7b7;
    padding: 1rem 0;
    box-sizing: border-box;
    height: 5.6rem;
}

.mobileSideNav .mobileSideMenu2 ul li.cell-2-1 ul li {
    width: 50%;
}

.mobileSideNav .mobileSideMenu2 ul li ul li ~ li {
    border-left: 1px solid #ddd;
}

.mobileSideNav .mobileSideMenu2 ul li ul li a {
    display: block;
    font-size: 0.9rem;
    color: #333;
}

.mobileSideNav .mobileSideMenu2 ul li ul li:hover a {
    color: #1c3c87;
}

.mobileSideNav .mobileSideMenu2 ul li ul li a img {
    height: 1.5rem;
    display: block;
    margin: 0 auto;
}

.mobileSideNav .mobileSideMenu2 ul li ul li a img:nth-last-of-type(1) {
    display: none;
}

.mobileSideNav .mobileSideMenu2 ul li ul li:hover a img:nth-last-of-type(1) {
    display: block;
}

.mobileSideNav .mobileSideMenu2 ul li ul li:hover a img:first-child {
    display: none;
}


/*********    모바일 사이드 메뉴 영역 end   **************/



/*header_gnb 영역 */

.page-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
}

header .gnb {
    height: 2.75rem;
    background-color: #5eedf5;
    line-height: 2.75rem;
}

header .gnb .con {
    position: relative;
}

header .gnb .topNav {
    position: absolute;
    right: 0;
}

header .gnb .gnb_content.utilMenu {
    line-height: 2.5rem;
}

header .gnb .gnb_content.utilMenu li a {
    font-size: .8rem;
    color: #333;
}

header .gnb .gnb_content.utilMenu li a:hover i {
    color: #1c3c87;
}

header .gnb .gnb_content.utilMenu li {
    margin-right: 1.5rem;
}

header .gnb .gnb_content.utilMenu li i {
    font-size: 1.1rem;
    padding-right: .6rem;
    padding-bottom: .2rem;
    vertical-align: middle
}

header .gnb .gnb_content .gnb_display span {
    font-size: .8rem;
    text-align: center;
    padding: 0 1rem;
    background-color: #fff;
    border-right: 1px solid #5eedf5;
}

header .gnb .gnb_content .gnb_display div {
    width: 2.70rem;
    background-color: #fff;
    cursor: pointer;
    border-right: 1px solid #5eedf5; 
    box-sizing: border-box;
    text-align: center
}

header .gnb .gnb_content .gnb_display div:hover {
    background-color: #1c3c87;
}

header .gnb .gnb_content .gnb_display div:hover i,
header .gnb .gnb_content .gnb_display div:hover {
    color: #fff;
}

header .gnb .gnb_content .gnb_display div.plus {
    border: none;
}

header .gnb .gnb_content .gnb_display div i {
    font-size: 1.1rem;
    color: #333;
    text-align: center;
}

header .gnb .gnb_content .gnb_display div.default_size {
    font-size: 0.8rem;
}



/*******   좌측 side menu 영역  ********/


.content .op_nav {
    position: fixed;
    top: 1.5rem;
    right: 0;
    width: auto;
    height: 100%;
}

.content .op_nav .sideMenuWrap {
    position: relative;
    top: 23%;
    text-align: right;
    z-index: 2;
}

.content .op_nav .sideMenuWrap > li > a {
	letter-spacing: -0.08rem;
    display: block;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 0.5rem 0.6rem;
    background-color: #f1f6f8;
    box-sizing: border-box;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    transition: all .2s;
}

.content .op_nav .sideMenuWrap > li > a > i {
    font-size: 1rem;
    vertical-align: top;
    padding-left: 0.25rem;
    color: #999;
}

.content .op_nav .sideMenuWrap > li:hover > a {
    background-color: #1c3c87;
    color: #fff;
}

.content .op_nav .sideMenuWrap > li:hover > a > i {
    color: #5eedf5;
}

.content .op_nav .sideMenuWrap ul {
    height: 0;
    overflow: hidden;
    padding: 0 0.4rem;
    background: #fff;
    margin: 0.25rem 0;
    box-sizing: border-box;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    transition: height 0.3s
}

.content .op_nav .sideMenuWrap li.active ul {
    height: auto;
    border: 1px solid rgba(28, 60, 135, 0.5);
}

.content .op_nav .sideMenuWrap ul li {
    padding-top: 0.75rem;
}

.content .op_nav .sideMenuWrap ul li:last-child {
    padding-bottom: 0.75rem;
}

.content .op_nav .sideMenuWrap ul li a {
    display: block;
    padding-right: 1.5rem;
    font-size: 0.7rem;
    position: relative;
	letter-spacing: -0.08rem;
}

.content .op_nav .sideMenuWrap ul li a img {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1.2rem;
    padding-left: 0.25rem;
}

.content .op_nav .sideMenuWrap ul li:hover a {
    color: #1c3c87;
}

.content .op_nav .sideMenuWrap ul li:hover a img:nth-of-type(1) {
    display: none;
}

.content .op_nav .sideMenuWrap ul li a img:nth-of-type(2) {
    display: none;
}

.content .op_nav .sideMenuWrap ul li:hover a img:nth-of-type(2) {
    display: block;
}


/***   side Nav 영역    ******/


.content .op_nav .sideNavWrap {
    position: absolute;
    top: 65%;
    right: 2rem;
    width: auto;
    text-align: right;
}

.content .op_nav .sideNavWrap li {
    margin: 0.1rem 0;
}

.content .op_nav .sideNavWrap li a {
    display: inline-block;
    padding: 0.5rem;
    position: relative;
    font-size: 0.7rem;
    font-weight: bold;
    color: #666;
}

.content .op_nav .sideNavWrap li a:hover,
.content .op_nav .sideNavWrap li.active a {
    color: #1c3c87;
}

.content .op_nav .sideNavWrap li a:hover span,
.content .op_nav .sideNavWrap li.active a span {
    background-color: #fff;
    box-shadow: 0 0 0 4px #1c3c87;
}

.content .op_nav .sideNavWrap li a span {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.3rem;
    transform: translateY(-50%);
    width: 0.6rem;
    height: 0.6rem;
    background-color: #ddd;
    border-radius: 50%;
    transition: all .5s;
}


/*******   좌측 side menu 영역 end  ********/



/*****   header_lnb 영역 ******/


header .lnb {
    background-color: #3c4045;
    color: #fff;
    position: relative;
    z-index: 50;
}

header .lnb .logo {
    width: 15.85rem;
    margin-top: 1.34rem;
}

header .lnb .menu-1 {
    width: 73%;
}

header .lnb .menu-1::before {
    content: "";
    position: absolute;
    top: 100%;
    left: -75%;
    right: 0;
    bottom: 0;
    height: 0;
    background: #454e57 url(/ht/hi/main/topMenu_bg.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    opacity: 1;    
}

header .lnb .menu-1.active::before {
    height: 18rem;
}



header .lnb .menu-1 > li {
    position: relative;
    width: calc(100% / 7);
}

header .lnb .menu-1 > li > a {
    display: block;
    font-size: 1.1rem;
    line-height: 5.5rem;
    text-align: center;
    position: relative;
    white-space: nowrap;
}

header .lnb .menu-1 li > a:hover {
    color: #5fecf5;
    font-weight: 600;
}

header .lnb .menu-1 > li > a::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 60%;
    height: 5%;
    background-color: rgba(255, 255, 255, 0);
    transition: all .5s;
    left: 20%;
}

header .lnb .menu-1 li > a:hover:after {
    background-color: rgba(255, 255, 255, 1);
}

header .lnb .menu-1 > li > ul {
    color: #fff;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 80;
    display: none;
}

header .lnb .menu-1 > li > ul::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18rem;
    overflow: hidden;
    z-index: -1;
}



header .lnb .menu-1 > li > ul:hover::before {
    background-color: rgba(255, 255, 255, 0.2);
}

header .lnb .menu-1.active > li > ul {
    display: block;
}

header .lnb .menu-1 ul li a {
    display: block;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 500;
    padding-top: 1.15rem;
    padding-left: 1rem;
}

header .lnb .menu-1 ul li a.menu_f {
    display: block;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 500;
    padding-top: 1.15rem;
    padding-left: .7rem;
}  

header .lnb .menu-1 ul ul li a {
    font-size: .75em;
    font-weight: 300;
    padding-top: .7rem;
    line-height: .88rem;
}

header .lnb .menu-1 ul ul li a::before {
    content: "-";
    display: inline-block;
    padding-right: 0.3rem;
}

header .lnb .sub-bg {
    background-color: rgba(69, 78, 87, 0.95);
    height: 0;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 1;
}

header .lnb .mobileMenuBox {
    display: none;
    background-color: transparent;
    cursor: pointer;
}

header .lnb .sideSearch {
    width: 5.5rem;
    height: 5.5rem;
    background-color: #1c3c87;
    position: absolute;
    right: 0;
    text-align: center;
    cursor: pointer;
    transition: all .5s;
    z-index: 9999;
}

header .lnb .sideSearch i.xi-search {
    font-size: 1.4rem;
    line-height: 5.5rem;
}

header .lnb .sideSearch i.xi-close {
    display: none;
    line-height: 5.5rem;
    font-size: 1.4rem;
}

header .lnb .sideSearch.active i.xi-close {
    display: block;
}

header .lnb .sideSearch.active i.xi-search {
    display: none;
}



/*  searchPop 영역  */


header .lnb .searchPop {
    position: fixed;
    top: 8.25rem;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    visibility: hidden;
    transition: all .5s;
    z-index: 98;
}

header .lnb .searchPop.active {
    visibility: visible;
}

header .lnb .searchPop > form {
    background-color: #2b66b0;
    transform: translateY(-100%);
    opacity: 0;
    transition: all .5s;
}

header .lnb .searchPop.active > form {
    transform: translateY(0);
    opacity: 1;
}

header .lnb .searchPop > form > div {
    width: 50%;
    margin: 0 0 0 18.5%;
    padding: 1.5rem 0;
    position: relative;
}

header .lnb .searchPop > form > div::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 110%;
    width: 6rem;
    height: 4rem;
    background-color: #2b66b0;
    z-index:
}

header .lnb .searchPop > form > div > input {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 1rem 5rem 1rem 2rem;
    font-size: 0.8rem;
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 2rem;
    border-top-right-radius: none;
    border-right-color: transparent;
}

header .lnb .searchPop > form > div > input::placeholder {
    color: #fff;
}

header .lnb .searchPop > form > div > i {
    position: absolute;
    top: 49.5%;
	transform: translateY(-50%);
	left: 110%;
	font-size: 1.5rem;
	background-color:
	#2b66b0;
	display: block;
	padding: .72rem 1.5rem;
    border: 2px solid #44d3e4;
    border-left-color: transparent;
    border-bottom-right-radius: 1.8rem;
    border-top-right-radius: 1.8rem;
    z-index: 10;
    color: #44d3e4;
    cursor: pointer;
    
}
 

   
/*************** top_page_btn  영역  *******************/

.content .op_nav .top_page_btn {
    position: absolute;
    bottom: 2rem;
    right: 1.1rem;
}

.content .op_nav .top_page_btn a {
    display: block;
    background-color: #1c3c87;
    padding: 1rem 1.1rem;
    border-radius: 50%;
}

.content .op_nav .top_page_btn a i {
    color: #fff;
    font-size: 1.5rem;
}


/*************** top_page_btn  영역  end*******************/


/*footer 영역*/

footer {
    width: 100%;
}

footer .footerTop {
    width: 100%;
    background-color: #3c3f44;
}

footer .footerTop .footerMenuWrap {
    color: #fff;
}

footer .footerTop .footerMenuWrap .left-menu ul li {
    position: relative;
}

footer .footerTop .footerMenuWrap .left-menu ul li::before {
    content: "";
    display: block;
    position: absolute;
    width: 2px;
    height: 14px;
    top: 50%;
    right: ;
    transform: translateY(-50%);
    background-color: #fff;
}

footer .footerTop .footerMenuWrap .left-menu ul li a:hover {
    color: #5eedf5;
}

footer .footerTop .footerMenuWrap .left-menu ul li:first-child a {
    margin-left: 0;
}

footer .footerTop .footerMenuWrap .left-menu ul li:first-child::before {
    display: none;
}

footer .footerTop .footerMenuWrap ul li a {
    display: block;
    font-size: 0.9rem;
    line-height: 60px;
    margin: 0 20px
}

footer .footerTop .footerMenuWrap .right-menu ul li {
    width: 20rem;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

footer .footerTop .footerMenuWrap .right-menu ul li:last-child {
    width: 15rem;
}

footer .footerTop .footerMenuWrap .right-menu ul li:nth-of-type(2) {
    border-left: none;
}

footer .footerTop .footerMenuWrap .right-menu ul li a {
    padding: 0 2.5rem;
    box-sizing: border-box;
    position: relative;
}

footer .footerTop .footerMenuWrap .right-menu ul li a i {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    right: 50px;
    color: #999;
}

footer .footerBottom {
    width: 100%;
    background-color: #454d57;
}

footer .footerBottom .footermenuWrap2 {
    padding: 1.85rem 0 2.25rem;
}

footer .footerBottom .footermenuWrap2 p {
    font-size: 0.7rem;
    color: #ccced0;
    line-height: 1.2rem;
}

footer .footerBottom .footermenuWrap2 .logoBox .img-box {width: 15rem;}

footer .footerBottom .footermenuWrap2 .logoBox img {
    /* padding-left: 3.2rem; */
    vertical-align: middle;
}


   .board-view-list{padding-bottom:2.5rem;}  
    
/* footer .footerTop .footerMenuWrap .right-menu .footer_site_wrap {position: relative;}
footer .footerTop .footerMenuWrap .right-menu .footer_site {position: absolute; bottom:100%;left:0;right:0; }  
footer .footerTop .footerMenuWrap .right-menu .footer_site .site_list {background: #252525; color: #fff; font-size: 0.8rem; line-height: 13px; text-align: center; ; bottom:10.5rem; padding:0; margin:0 }
footer .footerTop .footerMenuWrap .right-menu .footer_site .site_list ul li {transition : all 0.2s;  border:0px; height:1.5rem; padding:0; margin:0}
footer .footerTop .footerMenuWrap .right-menu .footer_site .site_list ul li a {width: 20rem; line-height: 13px; font-size: 0.8rem; background: #252525; color: #fff; opacity: 1; filter: alpha(opacity = 100); transition : all 0.2s; visibility: visible;  padding:0; margin:0}
footer .footerTop .footerMenuWrap .right-menu .footer_site .site_list ul li a:hover { background: #c0c0c0; }
footer .footerTop .footerMenuWrap .right-menu .footer_site .site_list ul li:last-child {width: 20rem;}  */
 
/*관련사이트 */

footer .footerTop .footerMenuWrap .right-menu .footer_site_wrap {position: relative;}
footer .footerTop .footerMenuWrap .right-menu .footer_site_wrap .footer_site {position: absolute; bottom:100%; left:0; right:0; border: 1px solid #fff; overflow-y: scroll; display: none;}  
footer .footerTop .footerMenuWrap .right-menu .footer_site_wrap .footer_site .site_list { height: 18rem;}
footer .footerTop .footerMenuWrap .right-menu .footer_site_wrap .footer_site .site_list li {border:none; width: 100%; padding: 0;}
footer .footerTop .footerMenuWrap .right-menu .footer_site_wrap .footer_site .site_list li a {display: block; color: #fff; font-size: 0.9rem; margin: 0; padding-left: 2.5rem; background: #252525; }
footer .footerTop .footerMenuWrap .right-menu .footer_site_wrap .footer_site .site_list li a:hover { background: #fff; color:#252525; }


/* 서브 여백 

.subHeaderWrap {margin-left: 6.5rem; margin-right: 6.5rem;}
.con-content{padding: 0 6.5rem;}
 */

/************************************* 반응형 작업  *******************************************/


@media(max-width:1800px) and (min-width:1311px) {
    /*헤더 영역*/

    header .lnb .logo {
        margin-left: 1rem;
    }

    header .lnb .menu-1 { 
    }
     
    header .lnb .menu-1 > li {
    	position: relative;
    	width: calc(99.7% / 7);
	}
}
    
}

@media(max-width:1620px) {

    footer .footerBottom .footermenuWrap2 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    
}


/*******   반응형 1310px 이하  *********/



@media(max-width:1310px) {

    html {
        font-size: 18px;
    }

    /*헤더 영역*/

    header .lnb .logo {
        margin-left: 1.1rem;
        margin-top: 1.7rem
    }

    header .lnb .menu-1 {
        display: none;
    }

    header .lnb .sub-bg {
        display: none;
    }

    header .lnb .mobileUtile {
        display: block;
        text-align: right;
    }

    header .lnb .mobileUtile .sideSearch {
        position: static; 
        display: inline-block;
        background-color: transparent;
    }

    header .lnb .mobileUtile .mobileMenuBox {
        display: inline-block;
        background-image: linear-gradient(45deg, #0083c4, #29b5ce, #4cb9b4);
        text-align: center;
    }

    header .lnb .mobileUtile .sideSearch .xi-search,
    header .lnb .mobileUtile .mobileMenuBox .xi-bars {
        width: 6rem;
        height: 6rem;
        font-size: 2rem;
        line-height: 6rem;
    }

    header .lnb .sideSearch i.xi-close {
        font-size: 2rem;
    }
    
    
    
    /******* footer 영역 **********/
    

    footer .footerTop .footerMenuWrap .left-menu ul li {
        display: none;
    }

    footer .footerTop .footerMenuWrap .right-menu {
        width: 100%;
    }

    footer .footerTop .footerMenuWrap .right-menu ul li {
        width: 50%;
        border-left: none;
    }

    footer .footerTop .footerMenuWrap .right-menu ul li:last-child {
        width: 50%;
        border-right: none;
    }

    /***** 사이드 네비게이션 *******/

    .content .op_nav {
        display: none;
    }

	
}


/*******   반응형 900px 이하  *********/



@media(max-width:900px) {

    html {
        font-size: 16px;
    }

    /*공통 부분*/
    h1.title {
        padding-bottom: 1rem;
        font-size: 2.5rem;
    }

    h2.title {
        padding-bottom: 3.35rem;
        font-size: 2.1rem;
        font-weight: 300;
        color: #999;
    }

    header .lnb .sideSearch {
        right: 5.5rem;
        background-color: transparent
    }

    header .lnb .mobileMenuBox {
        display: block;
        background-color: #5eedf5;
    }

    h2.title span {
        color: #454d57;
        font-weight: bold;
    }

    .content .contentWrap {
        padding: 2rem 0;
    }

   
     /****  헤더 영역   ******/
    
    
    header .lnb .logo {
        max-width: 80%;
        height: 100%;
    }

    header .lnb .logo a {
        width: 100%;
    }

    header .lnb .mobileUtile {
        width: auto;
    }

    header .gnb {
        display: none;
    }

    header .lnb .mobileUtile .sideSearch {
        max-width: 50%;
    }

    header .lnb .mobileUtile .mobileMenuBox {
        max-width: 100%;
    }

    header .lnb .searchPop {
        top: 6rem;
    } 
    
    
    /********  footer 영역  **********/
    

    footer .footerTop .footerMenuWrap .left-menu ul li {
        display: none;
    }

    footer .footerTop .footerMenuWrap .right-menu {
        width: 100%;
    }

    footer .footerTop .footerMenuWrap .right-menu ul li {
        width: 50%;
    }

    footer .footerTop .footerMenuWrap .right-menu ul li:last-child {
        width: 50%;
    }

    footer .footerBottom .footermenuWrap2 {
        padding: 1.25rem 0;
    }

    footer .footerBottom .footermenuWrap2 div {
        width: 100%;
    }

    footer .footerBottom .footermenuWrap2 .cell p {
        text-align: center;
        font-size: 0.9rem;
        line-height: 1.4rem;
        padding: 0 1rem;
    }

    footer .footerBottom .footermenuWrap2 .logoBox {
        display: inline-block;
        text-align: center;
        padding-top: 1.56rem;
    }

    footer .footerBottom .footermenuWrap2 .logoBox .img-box {width: 100%;}
    
    
    footer .footerBottom .footermenuWrap2 .logoBox img {
        display: inline-block;
        text-align: center;
        width: 30%;
    }

    /*footer .footerBottom .footermenuWrap2 .logoBox img:first-child {
        width: 7.1rem;
        height: 4.3rem;
    }*/
    

}



/*******   반응형 500px 이하  *********/


@media(max-width:500px) {

    html {
        font-size: 14px !important;
    }

    header .lnb {
        height: 4rem ;
    }

    header .lnb .logo {
        /* width: 40%;
        margin: 3%  */
       width: 10rem;
    	margin: 1rem 0 0 1rem;

    }

    header .lnb .mobileUtile {
        height: 4rem;
    }

    header .lnb .mobileUtile .mobileMenuBox {
        max-width: 100%;
    }

    header .lnb .mobileUtile .sideSearch .xi-search,
    header .lnb .mobileUtile .mobileMenuBox .xi-bars {
        width: 4rem;
        height: 4rem;
        font-size: 1.5rem;
        line-height: 4rem;
    }

    header .lnb .sideSearch i.xi-close {
        line-height: 4rem;
        font-size: 1.4rem;
    }

    header .lnb .searchPop {
        top: 4rem;
    }

    header .lnb .searchPop > form > div {
        margin-left: 14.5%;
    }
    
    
    
     /*모바일 사이드 메뉴 반응형*/
    
    .mobileSideNav .mobileTopMenu .mobileLogo {
    	display: block;
    	max-width: 5.2rem;
    	margin: 0.8rem;
	}
    
    .mobileSideNav .mobileTopMenu div {
    	width: 4rem;
    	height: 4rem;
    }
    
    .mobileSideNav .mobileTopMenu div.closeBtn i {
        font-size: 2rem;
        line-height: 4rem;
    }
    
    .mobileSideNav .mobileTopMenu div.engBtn {
    	width: 7rem;
    }
    
    .mobileSideNav .mobileTopMenu div.engBtn a {
    	line-height: 4rem;
    }
    
    .mobileSideNav .mobileSideMenu ul li a {
    	padding: 0 1.5rem;
    	height: 4rem;
    	line-height: 4rem;
    }
    
	.mobileSideNav .mobileSideMenu ul ul ul > li > a {
		padding: 0 1.2rem;
	}
	
	.mobileSideNav .mobileSideMenu2 ul li ul li {
    	height: 4.5rem;
    }
    
    
    /*모바일 사이드 메뉴 반응형 end */
    
    
     
    
    
    

    footer .footerTop .footerMenuWrap .right-menu ul li a i {
        right: 0;
    }
    
    /* 풋터 */
	footer .footerTop .footerMenuWrap .right-menu ul li a {padding: 0 0.5rem;}
	
	footer .footerTop .footerMenuWrap .right-menu .footer_site_wrap .footer_site .site_list li a {padding-left: inherit;padding: 0 0.5rem;} 
	
	footer .footerBottom .footermenuWrap2 .logoBox img {padding-left: inherit;}
	/* footer .footerBottom .footermenuWrap2 .logoBox img:first-child {width: 23%;height: auto;} */
	footer .footerBottom .footermenuWrap2 .logoBox img:last-child {width: 50%;}
	
	
	/***** 모바일 사이드 메뉴 영역  *******/
	.mobileSideNav {
	    width: 80%;
	    right: -80%;
	}
}