@import url('staf_root.css'); /* 변수 */
@import url('font.css'); /* 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://webfontworld.github.io/kopus/KoPubWorldDotum.css');

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0; line-height:170%; letter-spacing:normal} /* delete vertical-align,font:inherit; */
body,html{width:100%; font-size:18px; color:var(--basic); font-weight:400; line-height:170%; font-family: var(--kor); word-break: keep-all;}
*{font-family: var(--kor); word-break: keep-all;}
body{-webkit-text-size-adjust: none; word-break:keep-all;}
ol,ul,li{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table {border-collapse:separate;border-spacing:0; font-size:0.9375rem;}
table caption {overflow:hidden; font-size:0; line-height:0; font-size:0.9375rem;}
tbody,tfoot,thead,tr,th,td {margin:0;line-height:160%;letter-spacing:normal;}
dt{display:block;}
hr{display:none;}
a{cursor:pointer; text-decoration:none; color:inherit;}
a, a:hover{transition:all 0.7s cubic-bezier(0.215,0.61,0.355,1);}
address{font-style:normal;}
input,select,img{vertical-align:middle;}
input:focus, textarea:focus, button:focus {outline:none;}  /* 크롬에서 커서 클릭시 파란색 테두리 제외*/
/* input, button {border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none;} */
select { border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; background: url("/img/cat_arrow_bk.svg") no-repeat right 12px center/10px auto;}
select::-ms-expand {display:none}
input[type=text]::-ms-clear {display: none;}
input::-webkit-input-placeholder {color:#999; }
input:-ms-input-placeholder {color:#999; }
input::placeholder {color:#999; }

span, b, strong, br {line-height:inherit; font-family:inherit;}

/* Web Content Accessibility TTS(Text To Speech) Code */
.blind {position:absolute; top:0px; left:0px; overflow:hidden; display:inline-block !important; width:1px !important; height:1px !important; margin:0 !important; font-size:0 !important; line-height:0 !important;}




/* Common */
.brfixed {display: block !important;}
.ls0 {letter-spacing:0 !important;}
.eng {font-family:var(--eng);}
.white {color:var(--white) !important;}
.center{text-align:center !important;}
.left{text-align:left !important;}
.right{text-align:right !important;}
.bold{font-weight: 700 !important; letter-spacing:inherit; line-height:inherit;}
.semibold{font-weight: 600 !important; letter-spacing:inherit; line-height:inherit;}
.medium{font-weight: 500 !important; letter-spacing:inherit; line-height:inherit;}
.regular{font-weight: 400 !important; letter-spacing:inherit; line-height:inherit;}
.light{font-weight: 300 !important; letter-spacing:inherit; line-height:inherit;}
.pointColor{color:var(--main) !important;}
.grayBg{background-color:var(--grayBg) !important;}
.material-symbols-outlined {font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48;}


/* 슬릭기본 */
.slick-slider{position: relative; display: block; box-sizing: border-box; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y; touch-action: pan-y;-webkit-tap-highlight-color: transparent; outline: 0 !important;}
.slick-list{position: relative; display: block; overflow: hidden; margin: 0; padding:0 !important;  outline: 0 !important;}
.slick-track {display:flex; }
.slick-slide{border:0; outline: 0 !important;}
.slick-initialized .slick-slide{display:block; outline: 0 !important;}
/* 슬릭기본 */


/* 레이아웃 */
.wrapper{position:relative; width:100%; min-width:320px;}
.wrapper.noScroll{height: var(--vh); overflow: hidden;	}
.w1760{max-width:1760px; width: 90%; margin:0 auto;}
.w1350{max-width:1350px; width: 90%; margin:0 auto;}

.skip {position:fixed;top:0;left:0;width:100%;z-index:500}
.skip a:link, .skip a:visited {display:block;width:0;height:0;font-size:0;}
.skip a:hover, .skip a:focus,.skip a:active {display:block; padding:9px 0; height:12px; width:100%; text-align:center; font-size:13px; color:#fff; background:#102457; line-height:12px; font-family:var(--kor); } 


.link_no{cursor:default;}


.compad{padding: 100px 0; box-sizing:border-box;}
.compad_t{padding: 100px 0 0; box-sizing:border-box;}
.compad_b{padding: 0 0 100px; box-sizing:border-box;}

.subpad{padding: 70px 0; box-sizing:border-box;}
.subpad_t{padding: 70px 0 0; box-sizing:border-box;}
.subpad_b{padding: 0 0 70px; box-sizing:border-box;}

/* 폰트 */
.fs64{font-size:3.556rem; font-weight:700; letter-spacing: -1.28px; line-height:125%; color:var(--black);}
.fs48{font-size:2.667rem; font-weight:700; letter-spacing: -0.96px; line-height:125%; color:var(--black);}
.fs42{font-size:2.333rem; font-weight:200; letter-spacing: -0.84px; line-height:125%; color:var(--black);}
.fs42 b{display: inline; letter-spacing: inherit; line-height:inherit; font-weight:700;}
.fs30{font-size:1.667rem; font-weight:600; letter-spacing: -0.6px; line-height:140%; color:var(--black);}
.fs30 small{display: inline-block; font-size:0.889rem; font-weight:400; color:var(--lightfont); line-height: 160%; letter-spacing: -0.32px;}
.fs23{font-size:1.278rem; font-weight:300; letter-spacing: -0.46px; line-height:150%; color:var(--black);}
.fs21{font-size:1.167rem; font-weight:400; letter-spacing: -0.42px; line-height:150%; color:var(--black);}
.fs18{font-size:1rem; font-weight:400; letter-spacing: -0.36px; line-height:165%; color:var(--basic);}
.fs16{font-size:0.889rem; font-weight:400; letter-spacing: -0.32px; line-height:165%; color:var(--lightfont);}

.visual-tit .char {}
.visual-tit .word {display:inline-block; letter-spacing:inherit; font-weight:inherit; line-height:inherit;}
.visual-tit, .visual-sub-txt {overflow:hidden; opacity:0; word-break: keep-all;}
.visual-tit .char, .visual-sub-txt .word{display:inline-block; opacity:0; line-height:1; letter-spacing:inherit; font-weight:inherit;}
.visual-tit.splitting, .visual-sub-txt.splitting{opacity:1.0;}
.action .visual-tit.splitting .char {animation: slide-up 1.25s cubic-bezier(.5,.2,0,1); animation-fill-mode: both; animation-delay: calc( 0.2s + (.05s * var(--char-index)) );}

@keyframes slide-up {
	from{opacity:0; transform: translateY(50px);}
	to{opacity:1.0; transform: translateY(0);}
}

.ani_effect {opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px);}
.action .ani_effect {animation: text-active-animation 1s ease both;}
.action .delay1 {animation-delay:0.4s;}
.action .delay2 {animation-delay:0.6s;}
.action .delay3 {animation-delay:0.8s;}
.action .delay4 {animation-delay:1s;}
.action .delay5 {animation-delay:1.2s;}


@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}

/* Header */
#header{position:fixed; left:0; top:0; width:100%; min-width:320px; height:96px; transition:all .4s; z-index: 999999;}
#header .header_in{padding:20px 0; display: flex; align-items:center; justify-content:space-between;}
#header .header_in .logo{}
#header .header_in .logo a{display:block; width:236px; height:56px; background:url('/img/logo_w.png') no-repeat center/100% auto; font-size:0; transition:all .3s linear;}
#header .header_in .top_util{display:flex; align-items:center; position: relative;}
#header .header_in .top_util ul{display: flex; margin-left: 210px;}
#header .header_in .top_util ul li{}
#header .header_in .top_util ul li.btnMenu_m{display:none;}
#header .header_in .top_util ul li a{display:flex; align-items:center; justify-content:center; width:30px; height:30px;}
#header .header_in .top_util ul li a svg{width:100%; height:auto;}
#header .header_in .top_util ul li a path,
#header .header_in .top_util ul li a rect{transition:all .3s linear; fill:var(--white);}
#header .header_in .top_util ul li a:hover path,
#header .header_in .top_util ul li a:hover rect{fill:var(--sub) !important;}
#header .header_in .top_util .lang{display: flex; margin-top: -5px;}
#header .header_in .top_util .lang dd{margin:0 14px 0 0; line-height: 120%;}
#header .header_in .top_util .lang dd:last-child{margin:0;}
#header .header_in .top_util .lang dd a{display: inline-block; font-size:14px; line-height: 120%; font-weight:500; font-family:var(--eng); color:var(--white); opacity: .6; transition:all .3s linear;}
#header .header_in .top_util .lang dd a:hover{opacity: 1 !important;}
#header .header_in .top_util .lang dd.on a{opacity:1; font-weight:800; border-bottom:2px solid var(--white); opacity:1;}

#header .header_in .top_util .hy_in{display: inline-block; font-size:14px; font-weight:600; color:var(--white); line-height:120%; font-family:var(--eng); letter-spacing: 0; margin-right: 20px; transition:all .3s linear;}
#header .header_in .top_util .hy_in:hover{opacity:0.5;}
#header .header_in .top_util .hy_in:after{content:'\e89e'; display:inline-block; vertical-align: middle; font-size:16px; font-weight: 400; color:var(--white); font-family:var(--icon); margin:-2px 0 0 6px;}

#header .header_in .top_util .related_site{position: absolute; right: 55px; top:50%; margin-top: -22px; display: inline-block; width: 160px; height: 44px; box-sizing:border-box; border-radius:44px; text-align:left; z-index: 99999;}
#header .header_in .top_util .related_site:hover{background:var(--white) !important; backdrop-filter: blur(10px) !important; border-color:var(--white) !important; border-radius:10px 10px 0 0 !important;}
#header .header_in .top_util .related_site dt{cursor:pointer; padding:0 20px; font-size:14px; line-height: 42px; font-weight:500; color:var(--white); letter-spacing:-0.35pt; border:1px solid rgba(255,255,255,.2); border-radius:44px;}
#header .header_in .top_util .related_site:hover dt{color:var(--black) !important;}
#header .header_in .top_util .related_site dt:after{content:'\e5c5'; display:inline-block; position: absolute; right: 14px; top:50%; margin-top: -10px; width: 20px; height: 20px; line-height: 20px; font-size:20px; font-family:var(--icon); transition:all .3s linear;}
#header .header_in .top_util .related_site:hover dt:after{transform:rotate(180deg) !important; color:var(--basic) !important;}
#header .header_in .top_util .related_site dd{padding: 5px 20px 20px; border-radius:0 0 10px 10px; box-sizing:border-box; position: absolute; left:0; top:44px; width: 100%; display: none; background:var(--white); backdrop-filter: blur(10px);}
#header .header_in .top_util .related_site:hover dd{display: block !important;}
#header .header_in .top_util .related_site dd a{display: block; font-size:14px; color:var(--white); letter-spacing:-0.35pt; line-height: 150%; margin: 0 0 5px; transition:all .3s linear;}
#header .header_in .top_util .related_site:hover dd a{color:var(--basic) !important;}
#header .header_in .top_util .related_site dd a:hover{color:var(--sub) !important;}
#header .header_in .top_util .related_site dd a:last-child{margin: 0;}




#menu{position:absolute; right:50%; top:0; margin-right: -450px;}
#menu ul{font-size:0;}
#menu ul li{display: inline-block; vertical-align:top; line-height: 120%; padding: 0 45px; transition:all .3s linear; position: relative;}
#header.up #menu ul li{padding: 0 55px;}
#menu ul li > a{display:inline-block; font-size:18px; letter-spacing: -0.36px; line-height: 120%; font-weight:500; color:var(--white); padding:37px 0; box-sizing:border-box;}
#menu ul li:hover > a{color:var(--main) !important;}
#menu ul li dl{position: absolute; left:0; top:96px; padding:0 5px 0 55px; width: 200px; box-sizing:border-box; transition:all .2s; opacity: 0; visibility:hidden;}
#menu ul li dl dd{padding:0 0 8px;}
#menu ul li dl dd:last-child{padding:0;}
#menu ul li dl dd a{display:inline; font-size:16px; letter-spacing: -0.32px; line-height:140%; transition:all .3s linear; position: relative; z-index: 5;} 
#menu ul li dl dd a:hover{color:var(--main); font-weight:700; box-shadow:0 -1px 0 var(--main) inset; }
#menu ul li dl dd a.link_icon:after{content:'\e89e'; display:inline-block; vertical-align: middle; margin: -2px 0 0 5px; font-weight: 400 !important; font-size:16px; font-family:var(--icon); text-decoration:none !important;}


#header.up{background:var(--white); height:350px;}
#header.up .header_in .logo a{background:url('/img/logo.png') no-repeat center/100% auto;}
#header.up #menu ul li dl{transition:all .4s; opacity: 1; visibility:visible;}
#header.up #menu ul li > a{color:var(--black);}
#header.up .header_in .top_util ul li a path,
#header.up .header_in .top_util ul li a rect{fill:var(--black);}
#header.up .header_in .top_util .lang dd a{color:var(--black);}
#header.up .header_in .top_util .lang dd.on a{border-color:var(--black);}
#header.up .header_in .top_util .hy_in{color:var(--black);}
#header.up .header_in .top_util .hy_in:after{color:var(--black);}
#header.up .header_in .top_util .related_site{}
#header.up .header_in .top_util .related_site dt{color:var(--black); border-color:var(--border);}
#header.up .header_in .top_util .related_site dt:after{color:var(--black);}

/* 모바일 메뉴 : 슬라이드 메뉴 */
#menuArea { width:100%; height:100%; max-width:320px; position:fixed; right:0; top:0; z-index:9999999999; display:none; overflow: hidden;}
#menuArea .menuList {height:100%; width:100%; max-width:50%; min-width:320px; overflow-x:hidden;overflow-y:auto; background: var(--white); position:absolute; right:-100%; box-sizing:border-box; }
#menuArea .menuList .logo{box-sizing:border-box; padding:20px 20px; border-bottom:1px solid var(--border);}
#menuArea .menuList .logo a{display: block; width: 200px;}
#menuArea .menuList .logo a img{width: 100%; height:auto;}
#menuArea .menuList ul, #menuArea .menuList li{list-style:none;}
#menuArea .menuList>.list {width:100%;}
#menuArea .menuList>.list>li {border-bottom:1px solid #eee;}
#menuArea .menuList>.list>li>a {display:block; padding:15px 20px; font-size:1rem; font-weight:500; color:var(--black); position:relative; letter-spacing: -0.05em; width: 100%; box-sizing:Border-box; } 
#menuArea .menuList>.list>li.active>a{color:var(--white); background:var(--main);}
#menuArea .menuList>.list>li>a:after{content:'\e5c5'; display: block; font-family: var(--icon); position:absolute; font-family:var(--icon); width: 24px; height: 24px; line-height: 24px; font-size:24px; right:20px; top:50%; margin-top: -12px; color:var(--black); opacity: 0.5; transition:all .3s linear; text-align:center;}
#menuArea .menuList>.list>li.active>a:after{transform:rotate(180deg); opacity: 1; color:var(--white);} 
#menuArea .menuList>.list .sMenu {position: relative; background-color:var(--grayBg); width: 100%;  padding:15px 20px; display:none; box-sizing:Border-box;}
#menuArea .menuList>.list .sMenu>li {padding:3px 0; line-height: 120%;}
#menuArea .menuList>.list .sMenu>li>a{font-size:0.941rem; line-height: 150%; letter-spacing: -0.05em;}
#menuArea .menuList>.list .sMenu>li>a.link_icon:after{content:'\e89e'; display:inline-block; vertical-align: middle; margin: -2px 0 0 5px; font-weight: 400 !important; font-size:16px; font-family:var(--icon); text-decoration:none !important;}

#menuArea .menuList .btnMenu_mClose {margin: 30px 0; width:80%; height:50px; line-height: 50px; cursor:pointer; border: none; background: var(--black); color:var(--white); font-size:1rem; letter-spacing: 0; font-family:var(--eng); position: relative; left: 50%; transform: translateX(-50%); transition:All .2s linear; text-align:center;} 
#menuArea .menuList .btnMenu_mClose:hover { background:var(--sub); transition:All .2s linear; }


#grayLayer {width:100%; height:100% !important; background:rgba(0,0,0,.8); position:fixed; left:0; top:0; z-index:999999999; overflow-x:hidden;overflow-y:auto;display:none;}
#grayLayer > a {display:block;width:100%;height:100%} 

#menuArea .menuList::-webkit-scrollbar {width: 4px;}
#menuArea .menuList::-webkit-scrollbar-thumb {background: var(--main); border-radius: 0;}
#menuArea .menuList::-webkit-scrollbar-track {background: var(--grayBg); }


/* 사이트맵 */
#sitemap{position: fixed; left:0; top:0; width:100%; z-index:999991; height: 100%; overflow-y: auto; overflow-x: hidden; opacity: 0; visibility: hidden;}
#sitemap:before{content:''; display:block; width:100%; height:0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); position: absolute; left:0; top:0; transition: all 0.6s ease;}
#sitemap .sitemap_in{height: 100%; position: relative; z-index: 5;}
#sitemap .sitemap_list{display:flex; width: 100%; height: 100%;}
#sitemap .sitemap_list .list{flex:1; padding: 0 35px; box-sizing:border-box; height: 100%; border-right:1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
#sitemap .sitemap_list .list:first-child{border-left:1px solid rgba(255,255,255,.15);}
#sitemap .sitemap_list dl{min-height:350px; opacity: 0; transform: translateY(50px); transition:all 0.8s ease-in-out;}
#sitemap .sitemap_list dl dt{font-size:1.667rem; line-height: 130%; letter-spacing: -0.6px; font-weight: 700; color:var(--white); transition:all .3s linear;}
#sitemap .sitemap_list dl:hover dt{color:var(--sub3);}
#sitemap .sitemap_list dl dd{padding:20px 0 0;}
#sitemap .sitemap_list dl dd a{display:block; font-size:1.167rem; line-height: 145%; letter-spacing: -0.42px; font-weight: 400; color:rgba(255,255,255,.7); transition:all .3s linear; margin: 0 0 12px;}
#sitemap .sitemap_list dl dd a:last-child{margin: 0;}
#sitemap .sitemap_list dl dd a:hover{color:var(--sub3); font-weight: 700; text-decoration:underline;}
#sitemap .sitemap_list dl dd a.link_icon:after{content:'\e89e'; display:inline-block; vertical-align: middle; margin: -2px 0 0 5px; font-weight: 400 !important;  font-size:20px; font-family:var(--icon); text-decoration:none !important;}


#wrapper.sitemap-open{height: 100vh; overflow: hidden;}
#wrapper.sitemap-open #sitemap{opacity: 1; visibility: visible;}
#wrapper.sitemap-open #sitemap:before{height: 100%;}
#wrapper.sitemap-open #sitemap .sitemap_list .list dl{opacity: 1; transform: translateY(0);}
#wrapper.sitemap-open #sitemap .sitemap_list .list:nth-child(2) dl{transition-delay:0.2s;}
#wrapper.sitemap-open #sitemap .sitemap_list .list:nth-child(3) dl{transition-delay:0.4s;}
#wrapper.sitemap-open #sitemap .sitemap_list .list:nth-child(4) dl{transition-delay:0.6s;}
#wrapper.sitemap-open #sitemap .sitemap_list .list:nth-child(5) dl{transition-delay:0.8s;}
#wrapper.sitemap-open #sitemap .sitemap_list .list:nth-child(6) dl{transition-delay:1s;}
#wrapper.sitemap-open #sitemap .sitemap_list .list:nth-child(7) dl{transition-delay:1.2s;}


#wrapper.sitemap-open #menu{display: none;}
#wrapper.sitemap-open #header .header_in .top_util .lang{display: none;}
#wrapper.sitemap-open #header .header_in .top_util .hy_in{display: none;}
#wrapper.sitemap-open #header .header_in .top_util .related_site{display: none;}
#wrapper.sitemap-open #header .header_in .top_util .related_site{display: none;}
#wrapper.sitemap-open #header .header_in .top_util ul li.sitemap-open a{background:url('/img/close_w.png') no-repeat center/100% auto;}
#wrapper.sitemap-open #header .header_in .top_util ul li.sitemap-open a svg{display: none;}



/* Footer */
#footer{background:var(--white); padding: 60px 0 65px; position: relative; z-index: 5;}
#footer .footer_in{position:relative; box-sizing:border-box; padding:0 500px 0 0;}
#footer .foot_menu{display:flex; padding:0 0 16px;}
#footer .foot_menu dd{padding:0 25px 0 0; position:relative;}
#footer .foot_menu dd:after{content:''; display:block; width:1px; height:10px; background:var(--border); position:absolute; right:12px; top:8px;}
#footer .foot_menu dd:last-child:after{display:none;}
#footer .foot_menu dd a{display:inline-block; font-size:0.889rem; letter-spacing:-0.35pt; line-height: 130%; transition:all .3s linear;}
#footer .foot_menu dd a:hover{color:var(--black);}
#footer .foot_menu dd.on a{color:var(--main) !important; font-weight:700;}
#footer .foot_info{font-size:0;}
#footer .foot_info li{display: inline-block; vertical-align: top; font-size:0.889rem; line-height:150%; letter-spacing: -0.32px; padding:0 20px 8px 0;}
#footer .foot_info li strong{display: inline-block; font-weight:600; color:var(--black); line-height:inherit; letter-spacing:inherit;}
#footer .foot_info li .light{display: inline-block; color:var(--lightfont); line-height:inherit; letter-spacing:inherit;}

#footer .copyright{padding:20px 0 0; font-size:0.778rem; font-family:var(--eng); line-height:140%; color:var(--lightfont);}
#footer .copyright span,
#footer .copyright a{display: inline-block; color:var(--lightfont); line-height:inherit; letter-spacing:inherit; transition:all .3s linear;}
#footer .copyright a:hover{color:var(--black);}

#footer .family_site{display: flex; position: absolute; right: 0; top:0; z-index: 9999;}
#footer .family_site dl{margin:0 4px 0 0; width:220px; background:var(--grayBg); text-align:left; position: relative;}
#footer .family_site dl:last-child{margin: 0;}
#footer .family_site dl dt{width:100%; height:52px; line-height:50px; font-size:0.778rem; letter-spacing:-0.35pt; padding:0 18px; box-sizing:border-box; position: relative; font-weight: 500; cursor:pointer;}
#footer .family_site dl dt:after{content:'\e5c5'; display:block; width:20px; height:20px; font-size:20px; line-height: 20px; color:var(--basic); position:absolute; right:11px; top:50%; margin-top:-10px; font-family:var(--icon); transition:all .3s linear;}
#footer .family_site dl.on dt:after{transform:rotate(180deg);}
#footer .family_site dl dd{padding:18px; box-sizing:border-box; position: absolute; left:0; bottom: 52px; width: 100%; height: 300px; overflow-y: scroll; background:var(--grayBg); display: none;}
#footer .family_site dl dd a{display: block; font-size:0.778rem; letter-spacing:-0.35pt; line-height: 130%; margin: 0 0 8px;}
#footer .family_site dl dd a:hover{color: var(--black);}
#footer .family_site dl dd a:last-child{margin: 0;}
#footer .family_site dl dd a small{display: inline-block; font-size:0.722rem; line-height: 120%;}

#footer .family_site dl dd::-webkit-scrollbar {width: 4px;}
#footer .family_site dl dd::-webkit-scrollbar-thumb {background: var(--main); border-radius: 0;}
#footer .family_site dl dd::-webkit-scrollbar-track {background: var(--grayBg); }


/* 검색 */
.searchZone{ position:absolute; top:18px;right: 56px; z-index:89; display:none;}
.mask_search {position:fixed; height:0; width:100%; left:0; top:0; z-index:99999999999999; background:rgba(0,0,0,.8); opacity:0; visibility:hidden; transition:all 0.8s ease-in-out;}
.mask_search.visible {height:100%; transition:all 0.8s ease-in-out; opacity:1; visibility:visible;}
.window {z-index:9999999999; width:90%; max-width:1000px; height:70px; background:var(--white); box-sizing:border-box; padding:20px 30px; position:fixed; transform:translate(-50%, -70%); opacity:0; visibility:hidden; transition:all 0.8s ease-in-out;}
.window.visible {transform:translate(-50%, -50%); opacity:1; visibility:visible; transition:all 0.8s ease-in-out; transition-delay:0.5s;}
.window .close{display:block; color:var(--white); position:absolute; top:-50px; right:0;  z-index:999999; cursor:pointer; width: 35px; height: 35px;}
.window .close span{font-size:35px;}
.inputB{width:100%; overflow:hidden; clear:both; }
.inputB dd{float:left; width:calc(100% - 40px); overflow:hidden; }
.inputB dd .input_search{border:none !important;  letter-spacing:-0.55pt; width:100%; height: 28px; font-size:1rem; color:#777; letter-spacing:-0.35pt;}
.inputB dd .input_search::placeholder{font-size:15px;}
.inputB dt{float:right; width: 40px; height: 30px; text-align:right; box-sizing:border-box;}
.inputB dt button{padding:0; border:0; background:none; cursor:pointer; outline:none;}
.inputB dt button span{color:var(--black); line-height: 30px; font-size:28px; font-weight: 600;}

input::-webkit-input-placeholder { color:#999; font-size:13px;}
input::-moz-placeholder { color:#999; font-size:13px;}
input:-ms-input-placeholder { color:#999; font-size:13px;}

.mask {position:fixed;  z-index:9999999;  background-color:#000;  display:none;  left:0; top:0;} 
.mask_pro {position:fixed;  z-index:9999999;  background-color:#000;  display:none;  left:0; top:0;} 




/**  코딩시 지우지 말 것 **/

/* 게시판 페이징 */
.page_num {padding:10px 0 20px 0;}
.page_num ul.pagination {display:flex; flex-wrap:wrap; justify-content: center; align-items:center;}
.page_num ul.pagination li{margin:0 10px;}
.page_num ul.pagination li:nth-child(1){margin:0 2px 0 0;}
.page_num ul.pagination li:nth-child(2){margin:0 16px 0 0;}
.page_num ul.pagination li:nth-last-child(2){margin:0 0 0 16px;}
.page_num ul.pagination li:nth-last-child(1){margin:0 0 0 2px;}
.page_num ul.pagination li a{display:inline-block; vertical-align: top; font-size:1rem; line-height: 140%; font-family:var(--eng); color:rgba(119,119,119,.5); padding:0 2px; position:relative; transition:all .3s linear; text-align:center;}
.page_num ul.pagination li a:hover{color:var(--black);}
.page_num ul.pagination li a.active{color:var(--main) !important; font-weight: 700 !important;}
.page_num ul.pagination li a.active:after{content:''; display:block; width:100%; height:2px; background:var(--main); position:absolute; left:0; bottom:0;}
.page_num ul.pagination li.arrow a{width: 34px; height: 34px; padding:0; border-radius:50%; box-sizing:border-box; border:1px solid var(--border); font-size:0; transition:all .3s linear; text-align:center;}
.page_num ul.pagination li.arrow a:hover{border-color:var(--black);}
.page_num ul.pagination li.arrow a span{font-size:18px; width:34px; height: 34px; line-height: 34px; text-align:center; color:#888; transition:all .3s linear;}
.page_num ul.pagination li.arrow a:hover span{color:var(--black);}



/* 에러페이지 */
#error {position:absolute; border:1px solid var(--border); width:500px; padding:200px 50px 50px 50px; text-align:center; background:url('/img/warning_icon.gif') center 50px no-repeat; left:50%; margin-left:-300px; top:49%; margin-top:-203px; box-shadow:0px 5px 0 #f6f6f6;} /*  -moz-transform:translateY(-49%); -ms-transform:translateY(-49%); -webkit-transform:translateY(-49%); transform:translateY(-49%); */
#error h1 {color:#333; font-family:"NanumGothic", "NG", MalgunGothic, Dotum, Arial, sans-serif; margin:0; letter-spacing:-0.5pt;}
#error h1 span {color:#cc141d;}
#error div {color:#666; font-size:18px; letter-spacing:-0.5pt; margin-top:30px; padding-top:30px; line-height:150%; border-top:1px dashed #ccc;}




/*******************************************************************************
    @media 1800px
*******************************************************************************/
@media all and (max-width:1800px){


/* Header */
#menu{right:5%; margin-right: 400px;}

#menu ul li{padding: 0 30px;}
#header.up #menu ul li{padding: 0 42px;}
#menu ul li dl{top:96px; padding:0 5px 0 42px;}
#menu ul li dl dd a{font-size:14px;}
#menu ul li dl dd a.link_icon:after{font-size:14px;}



}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){



/* 폰트 */
.fs21 br{display: none;}
.fs18 br{display: none;}

/* Header */
#header .header_in .top_util ul li.sitemap_btn{display: none;}
#header .header_in .top_util ul li.btnMenu_m{display: block;}
#menu{display: none;}

/* 사이트맵 */
#sitemap{display:none !important;}



}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1200px){

/* 폰트 */
.fs64{font-size:3rem;}
.fs48{font-size:2.222rem;}
.fs42{font-size:2rem;}
.fs30{font-size:1.444rem;}
.fs23{font-size:1.167rem;}
.fs21{font-size:1.111rem;}



/* Footer */
#footer{padding: 50px 0 55px;}
#footer .footer_in{padding:0;}
#footer .family_site{position:relative; right:auto; top:auto; margin:30px 0 0;}
#footer .family_site dl dd{height: 150px;}




}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){




/* Common */
html,body{font-size:16px;}

/* 폰트 */
.fs64{font-size:2.667rem;}
.fs48{font-size:1.944rem;}
.fs42{font-size:1.667rem;}
.fs30{font-size:1.333rem;}
.fs23{font-size:1.111rem;}
.fs21{font-size:1.056rem;}


.compad{padding: 70px 0;}
.compad_t{padding: 70px 0 0;}
.compad_b{padding: 0 0 70px;}

.subpad{padding: 40px 0;}
.subpad_t{padding: 40px 0 0;}
.subpad_b{padding: 0 0 40px;}


/* Header */
#header{height:87px;}
#header .header_in .logo{}
#header .header_in .logo a{width:200px; height:47px;}
#header .header_in .top_util{}
#header .header_in .top_util ul{}
#header .header_in .top_util ul li{}
#header .header_in .top_util .lang dd{margin:0 12px 0 0;}
#header .header_in .top_util .lang dd a{font-size:13px;}

#header.fixed{background:rgba(255,255,255,.1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);}
#header.nofixed{top:-200px;}




/* Footer */
#footer{padding: 45px 0 50px;}
#footer .foot_menu{padding:0 0 10px;}
#footer .foot_menu dd{padding:0 20px 0 0;}
#footer .foot_menu dd:after{height:10px; right:10px; top:8px;}
#footer .foot_menu dd a{}
#footer .foot_info li{padding:0 15px 6px 0;}
#footer .copyright{padding:10px 0 0;}
#footer .family_site{margin:20px 0 0;}
#footer .family_site dl{width:calc((100% - 4px)/2);}





}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{line-height:150%;} /* delete vertical-align,font:inherit; */
body,html{font-size:14px;}
select {background-position:right 10px center; background-size:8px auto;}

/*** 모바일 폰트 크기 조정 ***/
* {
 -webkit-text-size-adjust : none;  /* 크롬, 사파리, 오페라(신) */
 -ms-text-size-adjust : none;  /* IE */
 -moz-text-size-adjust : none;  /* 파이어폭스 */
 -o-text-size-adjust : none;  /* 오페라(구)*/
}

/* 폰트 */
.fs64{font-size:2.333rem;}
.fs48{font-size:1.778rem;}
.fs42{font-size:1.444rem;}
.fs30{font-size:1.167rem;}
.fs23{font-size:1.056rem;}
.fs21{font-size:1.056rem;}


.compad{padding: 50px 0;}
.compad_t{padding: 50px 0 0;}
.compad_b{padding: 0 0 50px;}

.subpad{padding: 30px 0;}
.subpad_t{padding: 30px 0 0;}
.subpad_b{padding: 0 0 30px;}



/* Header */
#header{height:64px;}
#header .header_in{padding:15px 0;}
#header .header_in .logo{}
#header .header_in .logo a{width:143px; height:34px;}
#header .header_in .top_util{}
#header .header_in .top_util ul{margin-left: 15px;}
#header .header_in .top_util ul li{}
#header .header_in .top_util ul li a{width: 24px; height: 24px;}
#header .header_in .top_util .lang{margin-top: 0;}
#header .header_in .top_util .lang dd{margin:0 8px 0 0;}
#header .header_in .top_util .lang dd a{font-size:12px;}

#header .header_in .top_util .hy_in{font-size:12px; margin-right: 15px; }
#header .header_in .top_util .hy_in:after{font-size:14px; margin:-2px 0 0 6px;}
#header .header_in .top_util .related_site{display: none;}


/* Footer */
#footer .foot_menu{padding:0 0 8px;}
#footer .foot_menu dd{padding:0 20px 0 0;}
#footer .foot_menu dd:after{height:10px; right:10px; top:8px;}
#footer .foot_menu dd a{font-size:0.929rem;}
#footer .foot_info li{display: block; padding:0 15px 6px 0;}
#footer .foot_info br{display: none;}
#footer .copyright{padding:10px 0 0; font-size:0.857rem;}
#footer .family_site{margin:20px 0 0; flex-wrap:wrap;}
#footer .family_site dl{margin:0 0 3px; width:100%;}
#footer .family_site dl dt{height:48px; line-height:46px; font-size:0.929rem;}
#footer .family_site dl dt:after{width:20px; height:20px;}
#footer .family_site dl dd{bottom: 48px; height: 100px;}
#footer .family_site dl dd a{margin: 0 0 6px; font-size:0.929rem;}
#footer .family_site dl dd a small{font-size:0.857rem;}



/* 검색 */
.window {height:50px; padding:10px 15px;}
.window .close{width:30px; height:30px; top:-40px;}
.window .close span{font-size:30px;}
.inputB dt {}
.inputB dt span{font-size:20px;}

/* 게시판 페이징 */
.page_num {padding:30px 0 0;}
.page_num ul.pagination {}
.page_num ul.pagination li{margin:0 5px;}
.page_num ul.pagination li:nth-child(1){margin:0 2px 0 0;}
.page_num ul.pagination li:nth-child(2){margin:0 8px 0 0;}
.page_num ul.pagination li:nth-last-child(2){margin:0 0 0 8px;}
.page_num ul.pagination li:nth-last-child(1){margin:0 0 0 2px;}
.page_num ul.pagination li.arrow a{width: 25px; height: 25px;}
.page_num ul.pagination li.arrow a span{font-size:14px; width: 25px; height: 25px; line-height: 25px;}

}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){





}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){


#header .header_in .top_util .hy_in:after{display: none;}


}