@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900");
@import url("/font/webfonts_NotoSansKR.css");
@import url("/font/dingbat_xeicon.css");
/*-------------------------------------------------
title       : 초기화
Author      : ㅈㅁㅈ
Create date : 2019-08-05
-------------------------------------------------*/
*, *::before, *::after { -webkit-box-sizing: inherit; box-sizing: inherit; }

html { overflow: hidden; overflow-y: auto; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 20px; }

body { overflow: hidden; margin: 0; padding: 0; font-size: 0.8rem; line-height: 1.5625; font-family: "Poppins", "Noto Sans KR"; font-weight: 300; color: #555; }

header, footer, main, section, article, nav, aside { display: block; }

ul, ol, li, dl, dt, dd { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6, p, form, figure, figcaption { margin: 0; padding: 0; }

fieldset, hr { display: block; margin: 0; padding: 0; border: 0 none; }

input, select { max-width: 100%; vertical-align: middle; }

input, select, button, textarea, optgroup { margin: 0; font-family: inherit; font-size: inherit; color: inherit; }

address, em, i { font-style: normal; }

strong { font-weight: 600; }

a { color: inherit; text-decoration: none; }

button { padding: 0; border: 0 none; background: none; cursor: pointer; }

input[type='submit'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

img { max-width: 100%; border: 0 none; font-size: 0; vertical-align: middle; }

table { width: 100%; border-collapse: collapse; }

caption, legend, .sr-only, .hidden, .blind, .IR { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0 none; clip: rect(0, 0, 0, 0); }

#skipNav { position: absolute; left: 0; top: -1000px; width: 100%; height: 0px; z-index: 1000; line-height: 0px; font-size: 0px; }

#skipNav a { display: block; text-align: center; width: 100%; line-height: 0px; font-size: 0px; }

#skipNav a:focus, #skipNav a:hover, #skipNav a:active { position: absolute; left: 0px; top: 1000px; padding: 8px 0; display: block; height: 30px; background: #20262c; font-size: 12px; font-weight: bold; line-height: 18px; color: #fff; }

.txt-left { text-align: left !important; }

.txt-center { text-align: center !important; }

.txt-right { text-align: right !important; }

.float-left { float: left !important; }

.float-right { float: right !important; }

.container { width: 65rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; }

.container::after { display: block; clear: both; content: ''; }

@media (max-width: 1530px) { html { font-size: 18px; } }

@media (max-width: 768px) { html { font-size: 16px; } }

/*-------------------------------------------------
title       : 레이아웃
Author      : ㅈㅁㅈ
                 KSK
Create date : 2019-08-05
                   2021-09-06 (팝업 모바일쪽 작아서 안보임)
-------------------------------------------------*/
.bx-wrapper .bx-viewport { -webkit-box-shadow: 0 0 0 transparent !important; box-shadow: 0 0 0 transparent !important; }

#header .layerpopup { visibility: hidden; overflow: hidden; height: 0; opacity: 0; position: fixed; left: 0; top: 0; z-index: 30; width: 100%; height: 100% !important; background-color: rgba(0, 0, 0, 0.8); content: ''; -webkit-transition: all 0.5s; transition: all 0.5s; }

#header .layerpopup.active { visibility: visible; overflow: visible; height: auto; opacity: 1; -webkit-transition: all 0.2s; transition: all 0.2s; }

/* #popup .group { width: 65rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; overflow-y: auto; position: relative; max-width: 90%; color: #fff; }

#popup .title { font-size: 2rem; font-weight: 300; color: #fff; text-align: center; text-transform: uppercase; }

#popup .title + .list > ul { width: calc(100% - 6rem); margin: 0 auto; text-align: center; white-space: nowrap; }

#popup .title + .list > ul > li { display: inline-block; width: 33.333%; }

#popup .list { display: inline-block; width: 100%; margin: 1rem 0; }

#popup .bx-wrapper { max-width: calc(100% - 6rem) !important; }

#popup .bx-wrapper .bx-viewport { width: 55.5rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; }

#popup .bx-wrapper .bx-controls-direction a { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 2.65rem; border: 3px solid #fff; line-height: 2.35rem; font-size: 1.25rem; overflow: hidden; width: 2.6rem; margin: 0 !important; background: none; -webkit-transition: all 0.2s; transition: all 0.2s; }

#popup .bx-wrapper .bx-controls-direction a::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; content: ''; text-indent: 0; text-align: center; line-height: inherit; }

#popup .bx-wrapper .bx-controls-direction a.bx-prev { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); }

#popup .bx-wrapper .bx-controls-direction a.bx-next { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); }

#popup .bx-wrapper .bx-controls-direction a.bx-next::before { content: ''; }

#popup .bx-wrapper .bx-controls-direction a:hover, #popup .bx-wrapper .bx-controls-direction a:focus { background-color: #fff; color: #000; }

#popup .item { font-size: 0.9rem; text-align: center; }

#popup .item .label { display: inline-block; height: 2.25rem; margin: 0 0.8rem; padding: 0 1.5rem; border-radius: 2.25rem; background-color: #000; line-height: 2.25rem; }

#popup .item .label span { color: #f00; }

#popup .item .label.close::after { display: inline-block; font-family: "xeicon"; margin-left: 0.5rem; content: ''; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; }

#popup .item .label.close:hover::after, #popup .item .label.close:focus::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

#popup.type1 .bx-wrapper .bx-controls-direction a { display: none; } */

/* #header .layerpopup { opacity: 0; visibility: hidden; -webkit-transition: all .5s ease; transition: all .5s ease; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 999; background: rgba(0, 0, 0, 0.65); height: 100vh; width: 100%; } */

#header .layerpopup h2.title { font-size: 2rem; font-weight: 400; color: #fff; text-align: center; margin-bottom: 1rem; }

/* #header .layerpopup.active { opacity: 1; visibility: visible; } */

/* #header .layerpopup { text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) translate(.5px, .5px); transform: translate(-50%, -50%) translate(.5px, .5px); } */

#header .layerpopup .group { width: 60rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: relative; max-width: 90%; color: #fff; }

#header .layerpopup .group ul { width: 100%; white-space: nowrap; text-align: center; margin: 0rem auto; }

#header .layerpopup .group ul li { display: inline-block; margin-right: 2rem; }

#header .layerpopup .group .bx-wrapper li { display: inline-block; vertical-align: middle; }

#header .layerpopup .group .bx-wrapper li a { display: block; }

#header .layerpopup .group .bx-wrapper .bx-controls { width: calc(100% + 6rem); height: 2rem; position: absolute; left: calc(50% - 0rem); top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 1; }

#header .layerpopup .group .bx-wrapper .bx-controls .bx-pager { padding-top: .6rem; }

#header .layerpopup .group .bx-wrapper .bx-controls .bx-pager a { width: 12px; height: 12px; background-color: #fff; border: 2px solid #fff; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; }

#header .layerpopup .group .bx-wrapper .bx-controls .bx-pager a.active { background-color: transparent; border: 2px solid #fff; -webkit-box-sizing: border-box; box-sizing: border-box; }

#header .layerpopup .group .bx-wrapper .bx-controls .bx-controls-direction a { width: 2rem; height: 2rem; line-height: 2rem; display: block !important; overflow: hidden; position: absolute; top: 0; margin: 0; background: none; text-indent: -9999px; z-index: 9999; text-align: center; }

#header .layerpopup .group .bx-wrapper .bx-controls .bx-controls-direction a:focus { outline: 1px dotted #ccc; }

#header .layerpopup .group .bx-wrapper .bx-controls .bx-controls-direction a:before { content: ''; font-size: 1rem; display: block; width: 100%; height: 100%; font-family: "xeicon"; color: #fff; text-indent: 0; line-height: inherit; }

#header .layerpopup .group .bx-wrapper .bx-controls .bx-controls-direction a.bx-next:before { content: ''; }

/* #header .layerpopup .item .close { position: absolute; left: -10rem; top: calc(50% - 50px); -webkit-transition: all .5s ease; transition: all .5s ease; border-radius: 50%; background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #9d1c2b), to(#d8283c)); background: linear-gradient(to bottom, #9d1c2b 20%, #d8283c 100%); width: 5.4rem; height: 5.4rem; text-align: center; padding-top: 2.35rem; line-height: 1rem; color: #fff; font-size: .9rem; }

#header .layerpopup .item .close:before { content: ''; font-size: .7rem; position: absolute; left: 50%; -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); top: 1.1rem; font-family: 'xeicon'; height: 1rem; line-height: 1rem; width: 1rem; }

#header .layerpopup .item .close:hover:before { -webkit-transform: rotate(135deg) translateX(-50%); transform: rotate(135deg) translateX(-50%); -webkit-transition: all .3s; transition: all .3s; left: calc(50% - .8rem); top: 1.45rem; }

#header .layerpopup .item .close .popup-countW { font-size: .8rem; }

#header .layerpopup .item .close .popup-countW .popup-count { color: #ffe138; font-weight: 400; }

#header .layerpopup .item .btn-close2 { display: none; height: 2.25rem; margin: 2rem 1rem; padding: 0 2rem; border-radius: 2.25rem; background-color: #000; line-height: 2.25rem; }

#header .layerpopup .item .btn-close2:after { display: inline-block; font-family: "xeicon"; margin-left: 0.5rem; content: ''; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; }

#header .layerpopup .item .btn-close2:hover:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

#header .layerpopup .item .btn-close.inactive { display: none; }
 */
#header .layerpopup .item { margin-top: 2rem; font-size: .9rem; text-align: center; }

#header .layerpopup .item .label { display: inline-block; height: 2.25rem; margin: 0 0.8rem .5rem; padding: 0 1.5rem; border-radius: 2.25rem; background-color: #000; line-height: 2.25rem; }

#header .layerpopup .item .label span { color: #f00; font-weight: 600; }

#header .layerpopup .item .label.close:after { content: ''; display: inline-block; font-family: "xeicon"; margin-left: 0.5rem; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; }

#header .layerpopup .item .label.close:hover:after, 
#header .layerpopup .item .label.close:focus:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

/* 2022.05 top_popup */
#header .etc > a.popup_button.active{
	background: #152a49;
	color: #fff;
	}
#header .etc > a.popup_button.active .counter{
	background-color:#fff;
	color: #9c1c2b;
}
#header .etc > a.popup_button.active .counter::before{
	content: none;
}

.top_popup{
	visibility: hidden; 
	overflow: hidden; 
	height: 0;
	opacity: 0; 
	position: relative;
	top:0;
	z-index: 30; 
	width: 100%; 
	content: ''; 
	-webkit-transition: 0.3s;
	transition: 0.3s; 
	background: url(../img/layout/TopPopup_bg.png) 50% 50% no-repeat #152a49;
	}
.top_popup.active { 
	visibility: visible; 
	/* overflow: visible;  */
	height: 390px;
	opacity: 1; 
	-webkit-transition: 0.5s; 
	transition: 0.5s; 
	}
.top_popup	.group{
	padding:2rem 0 1rem 0;
	overflow: hidden;
	}
.top_popup .list{
	max-width: 70rem;
	max-height:280px;
	margin: 0 auto;
	overflow: hidden;
	}
.top_popup	.bx-wrapper .bx-viewport{
	z-index: 1;
}
.top_popup .bx-wrapper .bx-viewport a{
	display: block;
	width: 285px;
	height: 280px;
	overflow: hidden;
}
.top_popup .list .bx-wrapper .bx-controls{
	width: calc(100% + 6rem);
    height: 2rem;
    position: absolute;
    left: calc(50% - 0rem);
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 0;
	}
.top_popup .list .bx-wrapper .bx-controls .bx-controls-direction a{
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    display: block !important;
    overflow: hidden;
    position: absolute;
    top: 0;
    margin: 0;
    background: none;
    text-indent: -9999px;
    z-index: 9999;
    text-align: center;
    }
.top_popup .list .bx-wrapper .bx-controls .bx-controls-direction a:before{
	content: '';
    font-size: 1rem;
    display: block;
    width: 100%;
    height: 100%;
    font-family: "xeicon";
    color: #fff;
    text-indent: 0;
    line-height: inherit;
	}
.top_popup .list .bx-wrapper .bx-controls .bx-controls-direction a.bx-next:before{
	content: '';
	}

.top_popup .item { 
	display:block;
	max-width:65rem;
	margin:1rem auto 0; 
	font-size: .75rem; 
	text-align: right; 
	}
.top_popup .item .label { 
	display: inline-block;  
	margin: 0 0.8rem; 
	color:#fff;
	line-height: .75rem;
	}
.top_popup .item .label span { 
	color: #f00; 
	font-weight: 600; 
	}
.top_popup .item .label.close:after { 
	content: "\e921"; 
	display: inline-block; 
	font-family: "xeicon"; 
	margin-left: 0.5rem; 
	vertical-align: middle; 
	-webkit-transition: all 0.2s; 
	transition: all 0.2s; 
	}
.top_popup .item .label.close:hover:after, 
.top_popup .item .label.close:focus:after { 
	-webkit-transform: rotate(180deg); 
	transform: rotate(180deg); 
	}


#header { position: relative; padding-top: 2rem; -webkit-transition: all 0.2s; transition: all 0.2s; }

#header::before { position: absolute; left: 0; top: 2rem; z-index: -1; width: 100%; height: 0; background-color: #162b48; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; }

#header .headerWrap { height: 4.3rem; padding: 0 12rem 0 16rem; line-height: 4.3rem; }

#header .logo { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 1.25rem; overflow: hidden; position: absolute; left: 2rem; top: 50%; height: 1.9rem; margin-top: 1rem; color: #000; }

#header .logo a { display: block; height: 100%; }

#header .logo a::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("/ipsi/img/layout/logo_active.png") no-repeat; background-size: auto 100%; content: ''; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 0.2s; transition: all 0.2s; }

#header .logo img { display: inline-block; height: 100%; vertical-align: top; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.2s; transition: all 0.2s; }

#header .logo strong { display: inline-block; position: relative; top: 0.25rem; vertical-align: top; line-height: 1.9rem; }

#header .logo strong::before { display: inline-block; position: relative; top: 0.5rem; width: 1px; height: 0.8rem; margin: 0 0.5rem; background-color: #dfdfdf; content: ''; vertical-align: top; }

#header .AllMn a { overflow: hidden; position: absolute; right: 0; bottom: 0; z-index: 20; width: 4.3rem; height: 4.3rem; background-color: #9c1c2b; text-align: center; line-height: 4.3rem; }

#header .AllMn a::before { font-size: 1.5rem; display: block; width: 100%; font-family: "xeicon"; color: #fff; content: ''; line-height: inherit; }

#header .etc { height: 2rem; border: 0.5px solid #ddd; line-height: 1.95rem; position: absolute; left: 0; top: 0; width: 100%; background-color: #f8f8f8; border-top: 0 none; border-left: 0 none; border-right: 0 none; }

#header .etc > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; float: left; min-width: 6.5rem; margin-left: -1px; padding: 0 1rem; color: #555; text-align: center; vertical-align: top; line-height: 2rem;}

#header .etc > a + a { border-left: 1px solid #ddd; }

#header .etc > a[href='#popup'] { font-size: 0.65rem; overflow: visible; border-right: 1px solid #ddd; font-weight: 500; color: #9c1c2b; }

#header .etc > a[href='#popup'] .counter { font-size: 0.5rem; display: inline-block; position: relative; top: -2px; z-index: 0; width: 0.8rem; height: 0.8rem; margin-left: 0.15rem; border-radius: 100%; background-color: #9c1c2b; font-weight: 600; color: #fff; text-align: center; line-height: 0.78rem; vertical-align: middle; }

#header .etc > a[href='#popup'] .counter::before { position: absolute; left: 50%; top: 50%; z-index: -1; width: 0.8rem; height: 0.8rem; margin: -0.4rem 0 0 -0.4rem; border-radius: 100%; background-color: #9c1c2b; content: ''; }

#header .etc > a[href='#popup']:hover .counter::before, #header .etc > a[href='#popup']:focus .counter::before { -webkit-animation: why 1s infinite; animation: why 1s infinite; }

#header .etc > a.why { position: absolute; right: 6rem; top: 100%; height: 1.35rem; margin-top: 1.5rem; padding: 0; text-align: right; }

#header .etc > a.why::before { position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: url("/ipsi/img/layout/why_active.png") no-repeat right 0; background-size: auto 100%; content: ''; opacity: 0; -webkit-transition: all 0.2s; transition: all 0.2s; }

#header .etc > a.why img { height: 100%; vertical-align: top; opacity: 1; -webkit-transition: all 0.2s; transition: all 0.2s; }

#header .etc .mn { position: absolute; right: 6rem; top: 100%; z-index: 5; height: 1.35rem; margin-top: 1.5rem; padding: 0; text-align: right; }

#header .etc .mn a { display: inline-block; position: relative; width: 1.5rem; height: 1.5rem; color: #3e3e3e; text-align: center; line-height: 1.5rem; }

#header .etc .mn a::before { font-size: 1.5rem; display: block; width: 100%; height: 100%; font-family: "xeicon"; line-height: inherit; }

#header .etc .mn a:hover span, #header .etc .mn a:focus span { visibility: visible; overflow: visible; height: auto; opacity: 1; -webkit-transition: all 0.2s; transition: all 0.2s; margin-bottom: 0; }

#header .etc .mn span { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-size: 0.65rem; visibility: hidden; overflow: hidden; height: 0; opacity: 0; position: absolute; bottom: -1.5rem; width: 3.75rem; height: 1.1rem; margin-left: -0.25rem; margin-bottom: -0.25rem; border-radius: 0.15rem; background-color: #9c1c2b; color: #fff; text-align: center; line-height: 1.1rem; white-space: nowrap; }

#header .etc .mn span::before { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: absolute; top: -0.25rem; width: 0.5rem; height: 0.5rem; background-color: #9c1c2b; content: ''; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

#header .etc .mn dd { display: inline; margin-left: 1rem; }

#header .etc .mn dd.type1 a::before { content: ''; }

#header .etc .mn dd.type2 a::before { content: ''; }

#header .gnb_bg { visibility: hidden; overflow: hidden; height: 0; opacity: 0; position: absolute; left: 0; top: 100%; z-index: 1; width: 100%; height: 0; background-color: #162b48; border-top: 1px solid #455469; opacity: 1; }

@-webkit-keyframes why { 0% { -webkit-transform: scale(1); transform: scale(1);
    opacity: 1; }
  100% { -webkit-transform: scale(1.5); transform: scale(1.5);
    opacity: 0; } }

@keyframes why { 0% { -webkit-transform: scale(1); transform: scale(1);
    opacity: 1; }
  100% { -webkit-transform: scale(1.5); transform: scale(1.5);
    opacity: 0; } }

#gnb { height: 100%; text-align: center; white-space: nowrap; }

#gnb .Allmn-close { display: none; }

#gnb .topmenu { height: 100%; }

#gnb .topmenu > li { display: inline-block; position: relative; height: 100%; padding: 0 2.5rem; vertical-align: top; }

#gnb .topmenu > li > a { font-size: 1rem; float: left; position: relative; height: 100%; padding-top: 0.15rem; font-weight: 400; color: #333; -webkit-transition: all 0.2s; transition: all 0.2s; }

#gnb .topmenu > li > a::before { position: absolute; left: 50%; bottom: 0; width: 0; height: 0.2rem; background-color: #ac9c87; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; }

#gnb .topmenu > li > a:hover::before, #gnb .topmenu > li > a:focus::before { left: 0; width: 100%; }

#gnb .topmenu > li.active a::before { left: 0; width: 100%; }

#gnb .submenu { visibility: hidden; overflow: hidden; height: 0; opacity: 0; display: block !important; position: absolute; left: 2.5rem; top: 100%; z-index: 2; width: calc(100% - 1rem); padding-top: 1.5rem; color: #cdcfd3; text-align: left; white-space: normal; }

#gnb .submenu div { display: none; }

#gnb .submenu a { display: block; margin-bottom: 1rem; line-height: 1rem; -webkit-transition: all 0.2s; transition: all 0.2s; }

#gnb .submenu a:hover, #gnb .submenu a:focus { color: #c3a988; }

#gnb .submenu a.linkWindow::after { font-size: 0.6rem; position: relative; top: -2px; margin-left: 0.25rem; font-family: "xeicon"; content: ''; }

#header.active::before { height: 100%; }

#header.active .AllMn a::before { content: ''; }

#header.active #gnb .topmenu > li > a { color: #fff; }

#header.active #gnb .submenu { visibility: visible; overflow: visible; height: auto; opacity: 1; -webkit-transition: all 0.2s; transition: all 0.2s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }

#header.active .gnb_bg { visibility: visible; overflow: visible; height: auto; opacity: 1; -webkit-transition: all 0.2s; transition: all 0.2s; height: 18rem; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }

#footer { background-color: #151515; }

#footer .footWrap { width: 65rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; font-size: 0.75rem; line-height: 1.33333; position: relative; color: #bdbdbd; }

#footer .btn-top { overflow: hidden; position: fixed; right: 2rem; bottom: 4rem; width: 2.5rem; height: 2.5rem; border-radius: 100%; background-color: #313641; text-align: center; line-height: 2.5rem; opacity: 0.7; }

#footer .btn-top::before { font-size: 1.25rem; display: block; width: 100%; height: 100%; font-family: "xeicon"; color: #fff; content: ''; line-height: inherit; }

#footer .ftool { position: relative; z-index: 0; display: inline-block; z-index: 1; width: 100%; padding: 1rem 0; }

#footer .ftool::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; top: auto; bottom: 0; height: 1px; background-color: #2d2d2d; }

#footer .ftool .link { float: left; }

#footer .ftool .link a + a::before { display: inline-block; position: relative; top: -2px; width: 1px; height: 0.6rem; margin: 0 0.8rem; background-color: #5c5c5c; content: ''; vertical-align: middle; }

#footer .ftool .link a:hover { text-decoration: underline; }

#footer .ftool .link a:first-child { color: #d53746; }

#footer .ftool .link02 { float: right; }

#footer .ftool .family_site .tt a::after { font-size: 0.8rem; display: inline-block; position: relative; top: -2px; margin-left: 0.75rem; font-family: "xeicon"; color: rgba(255, 255, 255, 0.5); content: ''; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; }

#footer .ftool .family_site .tt a:hover::after, #footer .ftool .family_site .tt a:focus::after { color: #fff; -webkit-transform: rotate(90deg); transform: rotate(90deg); }

#footer .ftool .family_site .site { visibility: hidden; overflow: hidden; height: 0; opacity: 0; font-size: 0.75rem; line-height: 2; position: absolute; right: 0; bottom: 100%; z-index: 1; width: 10.5rem; background-color: #151515; }

#footer .ftool .family_site .site::after { display: block; width: 100%; height: 0; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; }

#footer .ftool .family_site .site a { display: block; padding-left: 1.5rem; }

#footer .ftool .family_site .site a:hover, #footer .ftool .family_site .site a:focus { text-decoration: underline; }

#footer .ftool .family_site.active .tt a::after { content: ''; -webkit-transform: rotate(0deg); transform: rotate(0deg); }

#footer .ftool .family_site.active .site { visibility: visible; overflow: visible; height: auto; opacity: 1; -webkit-transition: all 0.2s; transition: all 0.2s; overflow-y: auto; max-height: 15rem; padding: 0.8rem 0 0; }

#footer .ftool .family_site.active .site::after { height: 0.8rem; }

#footer .ftool .sns { position: absolute; right: 0; top: 100%; margin-top: 1.5rem; }

#footer .ftool .sns a { display: inline-block; overflow: hidden; width: 1rem; height: 1rem; margin-left: 0.6rem; color: #fff; text-align: center; line-height: 1rem; vertical-align: middle; opacity: 0.5; -webkit-transition: all 0.2s; transition: all 0.2s; }

#footer .ftool .sns a::before { font-size: 1rem; display: block; position: relative; width: 100%; height: 200%; font-family: "xeicon"; content: ''; line-height: inherit; -webkit-transition: all 0.2s; transition: all 0.2s; }

#footer .ftool .sns a.facebook::before { content: ' '; }

#footer .ftool .sns a.blog::before { background: url("/ipsi/img/layout/sns_blog.png") repeat-y; background-size: auto 50%; }

#footer .ftool .sns a.youtube::before { content: ' '; }

#footer .ftool .sns a.instagram { width: 1.1rem; height: 1.1rem; margin-left: 0.5rem; line-height: 1.1rem; }

#footer .ftool .sns a.instagram::before { font-size: 1.15rem; top: 1px; content: ' '; text-indent: -1px; line-height: 1.1rem; }

#footer .ftool .sns a.instagram:hover::before { left: -1px; top: 0; }

#footer .ftool .sns a:hover { opacity: 1; }

#footer .ftool .sns a:hover::before { -webkit-transform: translateY(-50%); transform: translateY(-50%); }

#footer .address { position: relative; z-index: 0; padding: 1.5rem 5rem 2.5rem 9.25rem; }

#footer .address .logo { position: absolute; left: 0; top: auto; }

#footer .address .logo img { height: 1.55rem; }

#footer .address .logo + p, #footer .address .logo + p + p { font-family: "Noto Sans KR"; }

#footer .address .copyright { font-size: 0.6rem; margin-top: 0.25rem; text-transform: uppercase; }

#footer .address p span { white-space: nowrap; }

#footer .address p span + span::before { content: ' / '; }

#footer .address p span:first-child::before { margin-left: -0.25rem; content: '. '; }

@media (max-width: 1760px) { #gnb .topmenu > li { padding: 0 1.7rem; }
  #gnb .submenu { left: 1.5rem; } }

@media (max-width: 1530px) { #popup.type1 .bx-wrapper .bx-controls-direction a { display: block; }
  #gnb .topmenu > li { padding: 0 1.5rem; } }

@media (min-width: 1349px) { #header.active::before { height: 100%; }
  #header.active .logo { color: #fff; }
  #header.active .logo a::before { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
  #header.active .logo img { -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
  #header.active .etc { border-bottom: 0 none; background-color: #9c1c2b; }
  #header.active .etc > a { border-color: #af4854 !important; color: #fff; }
  #header.active .etc > a[href='#popup'] { color: #fff; }
  #header.active .etc > a[href='#popup'] .counter { background-color: #fff; color: #9c1c2b; }
  #header.active .etc > a[href='#popup'] .counter::before { background-color: #fff; }
  #header.active .etc > a.why::before { opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
  #header.active .etc > a.why img { opacity: 0; }
  #header.active .etc .mn a { color: #fff; } }

@media (max-width: 1350px) { 
	#popup .bx-wrapper { max-width: calc(100% - 5rem) !important; }
	#header::before { display: none; }
	.etc .mn { -webkit-transition: all 0s; transition: all 0s; -webkit-transition-delay: 0s; transition-delay: 0s; }
	#gnb { position: absolute; right: -22.75rem; top: 3.5rem; z-index: 11; width: 22.75rem; height: auto; max-width: 80%; text-align: left; line-height: 2.5rem; -webkit-transition-delay: 0; transition-delay: 0; }
	#gnb .topmenu { height: auto; border-bottom: 1px solid #0b1a2e; }
	#gnb .topmenu > li { display: block; height: auto; padding: 0; border-top: 1px solid #0b1a2e; }
	#gnb .topmenu > li > a { display: block; float: none; height: auto; padding: 0 0 0 1.5rem; color: #b4c0d0 !important; }
	#gnb .topmenu > li > a::before { position: absolute; left: auto !important; right: 1.5rem; top: 0; bottom: auto !important; width: auto !important; background: none; font-family: "xeicon"; color: #fff; content: ''; }
	#gnb .topmenu > li.active > a::before { content: ''; }
	#gnb .submenu { visibility: hidden; overflow: hidden; height: 0; opacity: 0; position: relative; left: 0; top: 0; width: 100%; padding: 0 1.5rem; background-color: #0b1a2e; line-height: 1.5rem; }
	#gnb .submenu a { margin: 0; line-height: inherit; }
	#header .gnb_bg { position: fixed; left: auto !important; right: -22.75rem; top: 0 !important; z-index: 10; width: 22.75rem !important; max-width: 80%; height: auto; border: 0 none; }
	#header .gnb_bg::before { font-size: 1rem; position: absolute; left: 1.5rem; top: 0; width: 100%; height: 3.5rem; padding-left: 7.5rem; background: url("/ipsi/img/layout/logo_active.png") no-repeat 0 center; background-size: 6.5rem auto; font-weight: 600; color: #fff; content: '입학처'; line-height: 3.8rem; }
	#header .gnb_bg::after { position: absolute; left: 8.5rem; top: 1.75rem; width: 1px; height: 0.65rem; margin-top: 0.15rem; background-color: #fff; content: ''; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
	#header.active .AllMn a { top: 0; width: 3.5rem; height: 3.5rem; background: none; line-height: 3.5rem; }
	#header.active .etc .mn { right: 4rem; margin-top: -0.8rem; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
	#header.active .etc .mn dd { margin-left: 0.5rem; }
	#header.active .etc .mn a { color: #fff; }
	#header.active #gnb { right: 0; -webkit-transition: all 0.2s; transition: all 0.2s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
	#header.active #gnb .submenu { visibility: hidden; overflow: hidden; height: 0; opacity: 0; -webkit-transition: all 0s; transition: all 0s; }
	#header.active #gnb .topmenu > li.active .submenu { visibility: visible; overflow: visible; height: auto; opacity: 1; -webkit-transition: all 0.2s; transition: all 0.2s; padding: 1rem 1.5rem; }
	#header.active .gnb_bg { right: 0; height: 100%; } 
}

@media (max-width: 1024px) { 
	#footer .address { padding-left: 0; }
	#footer .address .logo { display: none; } 
}

@media (max-width: 768px) { 
	#header .headerWrap { height: 3rem; padding: 0; line-height: 3rem; }
	#header .logo { font-size: 1rem; left: 1rem; height: 1.5rem; }
	#header .logo strong { line-height: 1.5rem; }
	#header .logo strong::before { top: 0.3rem; }
	#header .AllMn a { width: 3rem; height: 3rem; line-height: 3rem; }
	#header .etc a.why { right: 4rem; margin-top: 0.9rem; }
	#header .etc .mn { right: 4rem; margin-top: 0.9rem; }
	#header .etc .mn dd { margin-left: 0.5rem; }
	#footer { position: relative; text-align: center; }
	#footer .footWrap { padding-bottom: 5.5rem; }
	#footer .ftool { position: static; padding: 0; }
	#footer .ftool::before { display: none; }
	#footer .ftool .link { float: none; margin: 0 -1rem; padding: 0.5rem 1rem; border-bottom: 1px solid #2d2d2d; }
	#footer .ftool .link a { display: inline-block; padding: 0.25rem; }
	#footer .ftool .link a + a::before { display: none; }
	#footer .ftool .link02 { position: absolute; left: 0; bottom: 0; width: 100%; }
	#footer .ftool .link02 .sns { position: absolute; left: 0; top: auto; bottom: 3.5rem; width: 100%; margin-top: 0; }
	#footer .ftool .link02 .family_site .tt a { display: block; margin: 0 -1rem; background-color: #252525; line-height: 2.5rem; }
	#footer .ftool .link02 .family_site .site { width: 100%; margin-bottom: 1px; background-color: #252525; }
	#footer .ftool .link02 .family_site .site a { padding-left: 0; }
	#footer .ftool .link02 .family_site.active .site { max-height: 10rem; padding: 0.25rem 0 0; }
	#footer .ftool .link02 .family_site.active .site::after { height: 0.25rem; }
	#footer .address { padding: 1rem 0 0; }
	#footer .address span:first-child::before { display: block; width: 100%; height: 0; content: ''; } 
}

@media (max-width: 530px) { 
	.top_popup.active{height: auto;}
	#popup .item .label { margin: 0 0.25rem; }
	#popup .bx-wrapper { max-width: calc(100% - 5rem) !important; }
	#popup .bx-wrapper .bx-controls-direction a { width: 2rem; height: 2rem; line-height: 1.8rem; }
	#header .etc > a { float: left; width: 20%; min-width: 0; padding: 0; }
	#header .etc > a:last-child { border-right: 0 none; }
	#header .etc > a.why, #header .etc > a .m-hidden { display: none; }
	#header.active .etc .mn { z-index: -1; } 
	}