@charset "utf-8";

/* 1) root 설정  */
:root{
 	--color-base:#111;
 	--color-point:#063b95;
 	--color-white:#fff;
 	--color-black2:#222;
	--color-black3:#333;
	--color-black4:#444;
 	--font-kor:'Pretendard', Sans-serif;
 	--font-eng:'Poppins', Sans-serif;
 	--font-xi:'xeicon';
 	--trans-ani:0.3s ease 0s;
}

::-webkit-scrollbar{width:6px; background-color:rgba(0,0,0,0.1); -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px;}
::-webkit-scrollbar-thumb{background-color:rgba(49,51,52,0.5); -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px;}

body{overflow:inherit;}
body.active{overflow:hidden;}

/* header */
#header{position:relative; z-index:30; min-width:1540px; background-color:#fff;}
#header .inr{position:relative; min-width:1500px; margin:0 auto; padding:0 20px;}
#header .logo{position:absolute; left:20px; top:50%; z-index:15; width:189px; height:42px; transform:translateY(-50%);}
#header .logo a{display:block; width:100%; height:100%; background:url(../images/logo.png) no-repeat 50% 50%; font-size:0;}
#header nav{position:relative; z-index:10; display:flex; justify-content:center;}
#header #gnb{display:flex; justify-content:center; width:1010px;}
#header #gnb > li{position:relative; width:172px; transition:width 0.3s ease;}
#header #gnb > li > a{display:flex; justify-content:center; align-items:center; position:relative; box-sizing:border-box; height:90px; font-size:19px; /* padding:0 50px; */ font-weight:600;}
#header #gnb > li > a:before{content:''; display:block; position:absolute; bottom:0; left:50%; width:70px; height:5px; margin-left:-35px; background:var(--color-point); transform:scaleX(0); transition:transform 0.3s;}
#header #gnb div{display:none; position:absolute; width:100%; box-sizing:border-box; border:1px solid #ececec; border-width:0 1px 0 0;}
#header #gnb div ul{display:flex; flex-direction:column; gap:10px 0; padding:35px 30px;}
#header #gnb div a{display:inline-flex; font-size:17px; color:#444; letter-spacing:-1px; transition:0.3s;}
#header #gnb div a:hover{color:var(--color-point); box-shadow:0 -1px var(--color-point) inset;}
#header #gnb > li:first-child div{border-left-width:1px;}
#header .gnb_bg{display:none; position:absolute; left:0; width:100%; background-color:#fff; box-shadow:0 30px 30px rgba(0, 0, 0, 0.1);}
#header.active #gnb > li{width:25%;}
#header.active #gnb > li.active > a:before{transform:scaleX(1);}
#header.active .gnb_bg:before{content:''; display:block; position:absolute; top:0; left:0; width:100%; height:1px; background:#ececec;}

.area_util{display:flex; align-items:center; gap:0 20px; position:absolute; right:20px; top:0; z-index:15; height:100%; box-sizing:border-box;}
.area_util li{font-size:14px;}
.area_util li a{display:flex; flex-direction:column; align-items:center;}
.area_util i{display:block; font-size:23px;}
.area_util .sitemap-btn{display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; gap:3px; width:120px; height:40px; background-color:var(--color-point); border-radius:50rem; font-size:14px; color:#fff; text-align:center;}
.area_util .sitemap-btn i{flex:none;}

.header-top{background-color:#f6f6f6;}
.header-top .inr{display:flex; justify-content:space-between; align-items:stretch; width:1500px; height:35px; margin:0 auto; padding:0 20px;}

.system-alarm{display:flex; align-items:center; gap:10px;}
.system-alarm [class*="system-alarm__"]{display:flex; align-items:center; font-size:15px;}
.system-alarm__count i{font-size:25px;}
.system-alarm__count .alarm__count{display:flex; justify-content:center; align-items:center; min-width:22px; margin-left:-10px; background-color:#cc0b31; border-radius:100%; aspect-ratio:1/1; font-size:10px; font-weight:900; color:#fff;}
.system-alarm__user strong{color:var(--color-point);}

.area_util_list{display:flex; align-items:center; gap:40px; margin-left:auto; font-size:15px; font-weight:500;}
.area_util_list li{position:relative;}
.area_util_list li:after{content:''; opacity:0.2; display:block; position:absolute; left:-20px; top:50%;  width:1px; height:13px; margin-top:-6.5px; background-color:#111;}
.area_util_list li:first-child:after{display:none;}

/* footer */
#footer{position:relative; z-index:20; min-width:1540px; background:#111;}
#footer .inr_top, #footer .inr_bottom .inr_wrap{position:relative; width:1500px; margin:0 auto;}
#footer .inr_top{padding:50px 20px;}
#footer .inr_top > ul{display:flex; align-items:center; gap:0 45px;}
#footer .inr_top > ul > li > a{opacity:0.9; display:block; font-size:15px; color:#fff; font-weight:400; transition:opacity 0.3s;}
#footer .inr_top > ul > li > a:hover{opacity:1;}
#footer .inr_top > ul > li strong{display:inline-block; margin-right:30px; font-weight:500; color:#8daaff;}
#footer .inr_top .logo{opacity:0.4; display:block; position:absolute; right:20px; top:50%; width:190px; height:46px; background:url(../images/f_logo.png) no-repeat 50% 0; background-size:auto 100%; text-indent:100%; overflow:hidden; white-space:nowrap; transform:translateY(-50%);}
#footer .inr_top address{opacity:0.6; display:flex; align-items:center; gap:20px; margin-top:15px; font-size:15px; color:#fff; font-weight:300;}
#footer .inr_bottom{box-sizing:border-box; height:77px; background:#000;}
#footer .inr_bottom .inr_wrap{display:flex; justify-content:space-between; align-items:center; height:100%; padding:0 20px;}
#footer .inr_bottom p{opacity:0.4; margin-top:5px; font-family:var(--font-eng); font-size:15px; color:#fff;}
#footer .area_relation{position:relative; z-index:99; height:100%; margin-left:auto;}
#footer .area_relation button{position:relative; width:300px; height:100%; box-sizing:border-box; padding:0 30px 0 20px; background:transparent; border-left:1px solid rgba(255, 255, 255, 0.2); text-align:left;}
#footer .area_relation button span{opacity:0.8; position:relative; color:#fff; font-size:15px;}
#footer .area_relation button:after{content:''; display:block; position:absolute; right:15px; top:50%; margin-top:-3.5px; border-top:7px solid #4e515a; border-left:4px solid transparent; border-right:4px solid transparent; transform:rotate(0deg); transition:all 0.3s ease 0s;}
#footer .area_relation button.active:after{transform:rotate(180deg);}
#footer .area_relation ul{display:none; position:absolute; bottom:100%; left:0px; width:100%; box-sizing:border-box; padding:5px 15px; background:#22242a; border:1px solid #3e4049;}
#footer .area_relation ul > li{margin:10px 0px;}
#footer .area_relation ul > li > a{opacity:0.6; display:block; font-size:14px; color:#fff; line-height:1.4em; word-break:keep-all; transition:all 0.3s ease 0s;}
#footer .area_relation ul > li > a:hover, #footer .area_relation ul > li > a:focus{opacity:1; text-decoration:underline;}
#footer .btn_top{display:flex; justify-content:center; align-items:center; width:77px; height:100%; background-color:var(--color-point); font-family:var(--font-eng); font-size:14px; font-weight:500; color:rgba(255, 255, 255, 0.6); transition:color 0.3s;}
#footer .btn_top:hover{color:#fff;}

/* Pop Contents */
.pop_wrap{width:100%; margin:0 auto;}
.pop_wrap:after {content:""; display:block; clear:both;}
.pop_wrap .depth3_title{font-size:24px; font-weight:600; color:#2e2e2e; padding:32px 0 13px 5px;}

/* loading */
.area_loading{background:rgba(0,0,0,0.3); z-index:99999; position:fixed; left:0px; top:0px; width:100%; height:100%;}
.area_loading > div{text-align:center; position:absolute; left:50%; top:50%; margin-top:-42px; margin-left:-52px; padding:10px 20px; background:#fff; border-radius:15px;}
.area_loading > div > img{width:42px; height:42px;}
.area_loading > div > p{color:#555; font-size:15px; font-weight:600; margin-top:5px;}

/* ie */
.ie_support{min-width:1120px; padding:10px 0px; background:#373a43; text-align:center; color:#fff;}
.ie_support a{display:inline-block; margin-left:10px; color:#ffd94b; font-weight:600;}

/* layout pop */
.dim-layer{display:none;}
.pop-layer .pop-container{padding:20px 25px;}
.pop-layer p.ctxt{color:#666; line-height:25px;}
.pop-layer .btn-r{width:100%; margin:10px 0 20px -15px; padding-top:10px; border-top:1px solid #DDD; text-align:right;}
.pop-layer{display:none; position:absolute; width:auto; height:auto; background-color:#fff; border:5px solid #3571B5; z-index:10;}
.dim-layer{display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
.dim-layer .dimBg{position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}
.dim-layer .pop-layer{display:block;}
a.btn-layerClose{display:inline-block; height:25px; padding:0 14px 0; border:1px solid #304a8a; background-color:#3f5a9d; font-size:13px; color:#fff; line-height:25px; float:right;}
a.btn-layerClose:hover{border:1px solid #091940; background-color:#1f326a; color:#fff;}

/* 문의사항연락처 */
table.table.infoCall .button{min-width:155px; background-color:#fff; color:#3653a9 !important;}
table.table.infoCall .button:hover:before{background-color:#3653a9;}
table.table.infoCall .button:hover{color:#fff !important;}

/* 서브비쥬얼 */
.visual-area{position:relative; z-index:15; width:1540px; margin:0 auto; padding:60px 0 0;}
.visual-area:before{content:''; display:block; position:absolute; right:30px; top:0; width:493px; height:226px; background:url(../images/content/visual_img01.png) no-repeat 50% 50%;}
.visual-area.bg02:before{right:50px; width:552px; height:397px; background-image:url(../images/content/visual_img02.png);}
.visual-area.bg03:before{right:50px; width:452px; height:323px; background-image:url(../images/content/visual_img03.png);}
.visual-area.none:before{display:none;}
.visual-area.none .area_subTitle{display:none;}
.visual-area.none-lnb:before{display:none;}
.visual-area.bg03 .area_lnb,
.visual-area.none-lnb .area_lnb{display:none !important;}
.area_subTitle{padding-left:20px; padding-right:20px;}
.area_subTitle h2{font-size:40px; font-weight:600; letter-spacing:-1px;}
.area_subTitle em{display:flex; align-items:center; gap:10px; margin-bottom:5px; font-size:16px; font-weight:700; color:var(--color-point);}
.area_subTitle em:before{content:''; display:block; width:20px; height:20px; background:url(../images/content/bul_page_title.svg) no-repeat 0 0; background-size:auto 100%;}

/* lnb */
.area_lnb{display:flex; align-items:stretch; height:60px; margin-top:35px; background-color:#fff; border-bottom:1px solid #eee; border-radius:20px 20px 0 0;}
.lnb-home{flex:none; display:flex; width:60px; box-sizing:border-box; border-right:1px solid #eee;}
.lnb-home a{display:flex; justify-content:center; align-items:center; width:100%; height:100%; font-size:0;}
.lnb-home a i{font-size:20px; transition:color 0.3s ease;}
.lnb-home a:hover i{color:var(--color-point);}
[class*="lnb-depth"]{position:relative; width:290px;}
[class*="lnb-depth"] button{position:relative; width:100%; height:60px; box-sizing:border-box; padding-left:30px; padding-right:35px; background-color:#fff; border-right:1px solid #eee; font-size:17px; color:#111; text-align:left; font-weight:500; transition:0.3s ease;}
[class*="lnb-depth"] button:after{content:''; opacity:0.35; display:block; position:absolute; right:20px; top:50%; margin-top:-3px; border-top:7px solid #111; border-left:4px solid transparent; border-right:4px solid transparent; transition:transform 0.3s ease;}
[class*="lnb-depth"] button:before{content:''; opacity:0; display:block; position:absolute; top:0; left:-1px; width:100%; height:100%; border:1px solid var(--color-point); border-bottom-width:0; transition:opacity 0.3s ease;}
[class*="lnb-depth"] button.active{color:var(--color-point); box-shadow:0 10px 20px rgba(0,0,0,0.07);}
[class*="lnb-depth"] button.active:before{opacity:1;}
[class*="lnb-depth"] button.active:after{transform:rotate(-180deg);}
.lnb-box{display:none; position:absolute; top:calc(100% + 1px); left:-1px; z-index:10; width:calc(100% + 1px);}
.lnb{display:flex; flex-direction:column; gap:5px; width:100%; box-sizing:border-box; padding:30px 20px; background-color:#fff; border:1px solid var(--color-point); border-top-width:0; box-shadow:0 10px 20px rgba(0,0,0,0.07);}
.lnb li a{display:inline-block; font-weight:400; transition:0.3s ease; transition-property:color, box-shadow;}
.lnb li a:hover{font-weight:600; color:var(--color-point); box-shadow:0 -1px var(--color-point) inset;}

/* content */
#container{position:relative;}
#container:before{content:''; display:block; position:absolute; top:0; left:0; z-index:-1; width:100%; min-width:1540px; height:410px; background-image:linear-gradient(0deg, #fff, #dbefff);}
#content:not(.area_layer){position:relative; z-index:10; width:1540px; box-sizing:border-box; margin:0 auto; padding:0 60px; background-color:#fff;}
#content.bg02,
#content.bg03{border-radius:20px 20px 0 0;}

/* layer pop */
.area_layer{padding:20px;}

/* ready */
.ready-page{padding:80px 0 50px; text-align:center;}
.ready-page strong{display:block; font-size:35px;}
.ready-page strong i{opacity:0.2; display:block; margin-bottom:10px; font-size:45px;}
.ready-page p{margin-top:20px; font-size:18px; line-height:1.4;}

/* admin layout */
.container-inr{display:flex; justify-content:flex-start; align-items:flex-start; width:1540px; box-sizing:border-box; margin:0 auto; padding:20px 20px 150px 20px; background-color:#fff; border-radius:20px 20px 0 0;}
.container-inr #content:not(.area_layer){flex:auto; width:auto; padding:0 0 0 30px;}
.area_system_snb{flex:none; width:240px;}
.area_system_snb .snb > li > a{display:flex; justify-content:flex-start; align-items:center; position:relative; height:60px; box-sizing:border-box; padding:5px 20px 5px 25px; background:#fff; border:1px solid #d8d8d8; border-top-color:#e3e5e7; border-width:1px 1px 0px; font-size:17px; font-weight:400; color:#333; letter-spacing:-1px;}
.area_system_snb .snb > li > a:after{content:''; opacity:0; display:block; position:absolute; right:20px; top:50%; width:18px; height:18px; margin-top:-9px; background:url(../images/common/img_snb_arrow.svg) no-repeat 50% 0; background-size:100%;}
.area_system_snb .snb > li:first-child > a{border-radius:5px 5px 0 0; border-top-color:#d8d8d8;}
.area_system_snb .snb > li:last-child > a{border-radius:0 0 5px 5px; border-bottom-color:#d8d8d8; border-bottom-width:1px;}
.area_system_snb .snb > li > a.on{z-index:5; background-image:linear-gradient(90deg, var(--color-point), #634eae); border-color:#3a57ab; color:#fff; font-size:18px; font-weight:500; box-shadow:0 10px 15px rgba(0,0,0,0.15);}
.area_system_snb .snb > li > a.on:after{opacity:1;}
.area_system_snb .snb > li > ul{padding:20px 15px 20px 10px; background:#eeeff3; border:1px solid #d8d8d8; border-width:0 1px;}
.area_system_snb .snb > li > ul > li{padding:2px 0px;}
.area_system_snb .snb > li > ul > li > a{display:block; position:relative; padding:7px 13px; line-height:1.2em; font-size:15px; color:#333; letter-spacing:-1px; word-break:keep-all;}
.area_system_snb .snb > li > ul > li > a:after{content:''; opacity:0; display:block; position:absolute; right:-7px; top:50%; width:15px; height:15px; margin-top:-7px; background:var(--color-point) url(../images/common/img_snb_3depth.png) no-repeat 50% 50%; background-size:5px 7px; border-radius:100%;}
.area_system_snb .snb > li > ul > li > a.on{background:#fff; border:1px solid var(--color-point); border-radius:5px; color:var(--color-point);}
.area_system_snb .snb > li > ul > li > a.on:after{opacity:1;}
.area_system_snb .snb .depth{margin-top:5px; padding:15px; background-color:#d9dbe4; border:1px solid #bcbecb; border-radius:5px;}
.area_system_snb .snb .depth a{display:block; padding:3px; border-radius:3px;}
.area_system_snb .snb .depth a.on{background-color:var(--color-point); color:#fff;}

@keyframes gradientBG {
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

@media screen and (min-width:1600px){
    #header > .inr{width:1500px;}
    #footer{min-width:1500px;}
    #footer .inr_top,
    #footer .inr_bottom .inr_wrap{width:1500px;}
    
    #wrap.system #header > .inr{width:1600px;}
    #wrap.system  #footer .inr_top > ul,
    #wrap.system #footer .inr_bottom{width:1600px;}
}