@charset "UTF-8";
/* Designed and Coding By MEDICAST */
/* Designer Yoon Jain (design) */
/* Designer Jeong Sehui(html,css,jquery) */

/* font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Noto+Serif+KR:wght@400;600&family=Roboto:wght@500&display=swap');
/* reset */
*{-webkit-text-size-adjust:none;} /* 아이폰 텍스트 자동확대 막기 */
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, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
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;list-style:none;font-size:100%;font:inherit;vertical-align:baseline;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a{color:#333b3d;text-decoration:none;}
a:visited,a:active{text-decoration:none;}
a:hover,a:focus{text-decoration:none;}
table{border-collapse:collapse;border-spacing:0;}
img{vertical-align:middle;}
b,strong{font-weight:bold;}
i,em{font-style:italic;}
u{text-decoration:underline;}
caption{clear: both;width: 1px;height: 1px;margin: -1px;overflow: hidden;}
sup{font-size:0.75em; vertical-align:text-top;}
/* basic */
html{overflow-y:scroll; font-size:16px; line-height:1; color:#333b3d; letter-spacing:-0.055em; zoom:1;}
body{width:100%; height:100%; margin:0 auto; background:#fff; font-family:'Noto Sans KR','Apple SD Gothic Neo','AppleGothic','FontAwesome',sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
/* common */
#wrap{clear:both; position:relative; width:100%; min-width:1200px; height:100%; margin:0 auto;}
#container{clear:both; position:relative; width:100%; height:auto; min-height:800px; margin:0; padding:0; background:#fff; z-index:auto;}
#container:after{content:''; clear:both; display:block;}
.inner{clear:both; position:relative; margin:0 auto; width:1180px; padding:0 10px; box-sizing:content-box;}
.inner:after{content:''; clear:both; display:block;}
.reading{clear:both; display:block; width:0; height:0; overflow:hidden;}
a, button, input{font-family:'Noto Sans KR','Apple SD Gothic Neo','AppleGothic','FontAwesome',sans-serif; font-size:100%; letter-spacing:-0.055em;}
a,a:hover,a:active,a:focus,button,button:hover,button:active,button:focus,input,input:hover,input:active,input:focus{transition:0.2s ease;}
button{border:none;}
.layoutLeft{float:left;}
.layoutRight{float:right;}
.layoutRight:after{content:''; clear:both; display:block;}
.skipTo{position:fixed; top:-99px; left:0; width:100%; padding:16px 0; background:transparent; color:#fff; text-align:center; opacity:0; z-index:999999;}
.skipTo:hover, .skipTo:focus, .skipTo:active{display:block; top:0; opacity:1;}
/* 텍스트 드래그 시 속성(IE8 이상) */
::selection{background:rgba(62,107,175,0.98); color:#fff;}
img::selection{background:rgba(62,107,175,0.7); color:#fff;}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



.fade-in {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* header */
#header{clear:both; position:absolute; width:100%; background:transparent; z-index:9999;top:0;transition:.3s;}

#header .snb{position:relative; width:100%; height:94px; margin:0 auto; background:transparent; text-align:center; box-sizing:border-box;border-bottom:1px solid rgba(255,255,255,.2);}

#header .snb .logo{display:inline-block; position:relative; width:276px; margin:27px 0 0; vertical-align:top;}
#header .snb .logo h1{width:100%;}
#header .snb .logo h1 a{display:block; max-width:276px;height:45px;background:url('../images/logo_kato_white.png') no-repeat center center;text-indent:-9999px;}

#header .snb ul{float:left; margin-top:40px;}
#header .snb ul li{display:block; float:left; margin-left:22px;}
#header .snb ul li:first-child{margin-left:0;}
#header .snb ul li a{display:inline-block; padding:2px; color:#ddd; font-size:0.875rem;font-weight:500;}
#header .snb ul li a:focus, #header .snb ul li a:hover{color:#3e6baf;}
#header .snb ul li.admin a{color:#fff;}
#header .snb ul li.admin a:focus, #header.snb ul li.admin a:hover{color:#b2caf0;}
#header .snb .sitemap{display:inline-block; float:left; width:26px; height:26px; margin-top:38px; margin-left:40px;}
#header .snb .sitemap a{display:inline-block; width:100%; height:100%; background:url('../images/ico_nav_open.png') no-repeat center center; background-size:100%; font-size:0; overflow:hidden;}
#header .snb .sitemap a:focus, #header .snb .sitemap a:hover{opacity:0.7;}
#header .gnb{clear:both; display:block; position:relative; height:48px; background:transparent;}
#header .gnb .nav{display:inline-block; position:relative; width:100%; vertical-align:top; border-bottom:2px solid rgba(255,255,255,.4);}
#header .gnb .nav ul.depth01_lists{display:inline-block; position:relative; width:100%; max-width:100%; height:48px; margin:0 auto; text-align:center; line-height:48px; box-sizing:border-box;}
#header .gnb .nav ul.depth01_lists:after{content:''; clear:both; display:block;}
#header .gnb .nav ul.depth01_lists li.depth01_list{display:inline-block; position:relative; width:16.35%; margin:0; padding:0;}

#header .gnb .nav ul.depth01_lists li.depth01_list a.depth01{padding:2px; font-size:1.125rem; transition:0s;color:#fff;font-weight:400;}
#header .gnb .nav ul li ul.depth02_lists{display:block; position:absolute; width:100%; height:0; top:48px; margin:2px auto 0; padding:0; text-align:center; word-break:keep-all;border-right:1px solid #ddd; line-height:1; overflow:hidden; opacity:0; box-sizing:border-box; transition:height 0.2s; transition-delay:0.1s;}
#header .gnb .nav ul li:first-child ul.depth02_lists{border-left:1px solid #ddd;}
#header .gnb .nav ul li ul.depth02_lists li.depth02_list{display:inline-block; width:100%; height:auto; margin:0 auto; padding:0;}
#header .gnb .nav ul li ul.depth02_lists li.depth02_list:last-child{margin:0 auto;}
#header .gnb .nav ul li ul.depth02_lists li.depth02_list a.depth02{display:inline-block; position:relative; padding:0 2px; color:#333; font-size:1rem; font-weight:400;margin:0 0 15px;}
#header .gnb .nav ul li ul.depth02_lists li.depth02_list a.depth02:focus, #header .gnb .nav ul li ul.depth02_lists li.depth02_list a.depth02:hover{color:#3e6baf;}
#header .gnb .navBg{display:block; position:absolute; width:100%; height:0; background:#fff; z-index:-2; transition:0.2s;}
#header .gnb .nav:hover ul li ul.depth02_lists, #header .gnb .nav ul li a:focus + ul.depth02_lists, #header .gnb .nav ul li a:hover + ul.depth02_lists, #header .gnb .nav ul li ul.depth02_lists.on{height:222px; padding:24px 0; overflow:inherit; opacity:1;}
#header .gnb .nav:hover .inner + .navBg, #header .gnb .navBg.on{height:224px;border-bottom:1px solid #ddd;}
#header .gnb .navMobile{display:none;}


/*header open*/
#header.open{background:#fff;}
#header.open > *{background:#fff;}
#header.open .snb{border-bottom:1px solid #ddd;}
#header.open .snb .logo h1 a{display:block;background:url('../images/logo_kato.png') no-repeat center center;}
#header.open .snb ul li a{color:#696969;}
#header.open .snb ul li a:focus,#header.open .snb ul li a:hover{color:#898989;}
#header.open .snb ul li.admin a{color:#9cbbea;}
#header.open .snb ul li.admin a:focus, #header.open .snb ul li.admin a:hover{color:#b2caf0;}
#header.open .snb .sitemap a{background:url('../images/ico_nav_open_black.png') no-repeat center center;}
#header.open .gnb .nav{border-bottom:2px solid #3e6baf;}
#header.open .gnb .nav ul.depth01_lists li.depth01_list a.depth01{color:#333;}
#header.open .gnb .nav ul.depth01_lists li.depth01_list a.depth01:focus, #header.open .gnb .nav ul.depth01_lists li.depth01_list a.depth01:hover,#header.open .gnb .nav ul.depth01_lists li.depth01_list:hover a.depth01{color:#3e6baf;font-weight:700;}


/* footer */
#footer{clear:both; width:100%; height:auto; padding:28px 0 32px; background:#f7f7f7;border-top:1px solid #ddd;}
#footer .link ul{text-align:left;}
#footer .link ul li{display:inline-block; margin-right:20px;}
#footer .link ul li:last-child{margin-right:0;}
#footer .link ul li a{color:#aaa; font-size:0.875rem;}
#footer .link ul li a:focus, #footer .link ul li a:hover{color:#666;}
#footer .link ul li.color a{color:#3e6baf;font-weight:500;}
#footer .link ul li.color a:focus, #footer .link ul li.color a:hover{color:#15458e;}
#footer .copyright{clear:both; padding:0;}
#footer .copyright .info{display:block; text-align:left; margin-bottom:12px;}
#footer .copyright .info:last-child{margin-bottom:0;}
#footer .copyright .info span{display:inline-block; margin-right:12px; color:#aaa; font-size:0.875rem; line-height:1.8;}
#footer .copyright .info span.company{color:#696969;font-weight:500;margin-bottom:3px;}
#footer .copyright .info span.address{width:100%; margin-right:0;}
#footer .copyright .info span.tel{}
#footer .copyright .info span.email{}
#footer .copyright .info span.email a{color:#aaa;}
#footer .copyright .info span.email a:hover{color:#666;}
#footer .copyright .info span.copy{width:100%; margin-right:0;}
#footer .back_to_top{display:none; position:fixed; z-index:9999; bottom:10px; right:10px; width:40px; height:40px; line-height:40px; margin-left:-40px; color:#fff; background:rgba(0,0,0,0.3); border-radius:50%; text-align:center; font-size:13px; cursor:pointer; transition:all .2s;}
#footer .back_to_top:focus, #footer .back_to_top:hover{background:#3e6baf;}

#hd_pop, #hd_wrapper, #tnb ul, #gnb .gnb_wrap, #container_wr, #ft_wr{width:calc(100% - 20px);}


@media only screen and (min-width:1400px){
	#hd_pop, #hd_wrapper, #tnb ul, #gnb .gnb_wrap, #container_wr, #ft_wr{max-width:1340px;}
}


@media all and (min-width:1800px){
	#hd_pop, #hd_wrapper, #tnb ul, #gnb .gnb_wrap, #container_wr, #ft_wr{max-width:1440px;}
}


@media only screen and (max-width:1279px){
	#wrap{min-width:1000px;}
	.inner{width:100%; max-width:960px;}

	#hd_pop, #hd_wrapper, #tnb ul, #gnb .gnb_wrap, #container_wr, #ft_wr{width:100%;}
	.hd_pops{width:100%; max-width:550px; /*max-width:fit-content !important;*/ top:68px !important; left:50% !important; margin-left:-275px;}
	.hd_pops img{width:100% !important;}
	.hd_pops_con{width:100% !important; height:auto !important;}
}

@media only screen and (max-width:1023px){
	#wrap{min-width:320px;}
	#container{min-height:500px; padding-top:45px;}
	.inner{width:100%; min-width:320px; padding:0 10px; box-sizing:border-box;}
	.layoutLeft{float:none;}
	.layoutRight{float:none;}
	#header{position:fixed; height:45px; top:0;}
	#header .snb{display:none;}
	#header .gnb{height:inherit; background:#fff; box-sizing:border-box;}
	#header .gnb .logo, #header .gnb .nav, #header .gnb .sitemap{display:none;}
	#header .gnb .navMobile{display:block;}
	#header .gnb .navMobile .logo{display:inline-block; float:none; width:100%; height:auto; margin:0;}
	#header .gnb .navMobile .logo h1{max-width:146px; margin:0 auto 0 10px; line-height:40px;}
	#header .gnb .navMobile .logo h1 a{padding:2px 3px;}
	#header .gnb .navMobile .logo h1 a img{width:100%;}
	#header .gnb .navMobile button.navOpen{position:absolute; width:16px; height:15px; top:10.5px; right:10px; margin:0; padding:4px; background:transparent; cursor:pointer; box-sizing:content-box;}
	#header .gnb .navMobile button.navOpen span{display:block; width:100%; height:100%; background:url('../images/ico_nav_open_black.png') no-repeat center center; background-size:100%; font-size:0; opacity:1;}
	#header .gnb .navMobile button.navOpen:focus span, #header .gnb .navMobile button.navOpen:hover span{opacity:0.7;}
	#header .gnb .navMobile .navPanel button.navClose{position:inherit; width:16px; height:15px; top:10.5px; right:10px; margin:0; padding:4px; background:#fff; cursor:pointer; box-sizing:content-box;}
	#header .gnb .navMobile .navPanel button.navClose span{display:block; width:100%; height:100%; background:url('../images/ico_nav_close.png') no-repeat center center; background-size:100%; font-size:0; opacity:1;}
	#header .gnb .navMobile .navPanel button.navClose:focus span, #header .gnb .navMobile .navPanel button.navClose:hover span{opacity:0.7;}
	#header .gnb .navMobile .navPanel button.navClose:after{content:''; clear:both; display:block;}
	#header .gnb .navMobile .navPanel{display:block; position:fixed; width:100%;min-width:320px; height:calc(100vh - 45px); top:45px; left:100%; background:rgba(0,0,0,0.6); overflow-y:scroll; opacity:0; transition:left 0.4s ease-in-out, opacity 0.2s ease-in-out; z-index:-1;}
	#header .gnb .navMobile .navPanel.open{left:0; opacity:1; z-index:0;}
	#header .gnb .navMobile .navPanel .menuArea{width:100%; height:100%;}
	#header .gnb .navMobile .navPanel .menuArea .msnb{width:100%; background-color:#f7f7f7; background:linear-gradient(90deg, #E8E8E8 0, #f7f7f7 100%); box-sizing:border-box; z-index:2;}
	#header .gnb .navMobile .navPanel .menuArea .msnb ul{display:inline-block; width:100%; padding:14px 16px 16px; box-sizing:border-box;}
	#header .gnb .navMobile .navPanel .menuArea .msnb ul li{display:inline-block; margin-right:15px;}
	#header .gnb .navMobile .navPanel .menuArea .msnb ul li:last-child{margin-right:0;}
	#header .gnb .navMobile .navPanel .menuArea .msnb ul li:last-child:after{content:''; clear:both; display:block;}
	#header .gnb .navMobile .navPanel .menuArea .msnb ul li a{padding:2px; color:#888; font-size:0.875rem; vertical-align:top; text-transform:uppercase;}
	#header .gnb .navMobile .navPanel .menuArea .msnb ul li.admin{float:right; margin-right:0; margin-left:5px;}
	#header .gnb .navMobile .navPanel .menuArea .msnb ul li.admin a{color:#3e6baf;}
	#header .gnb .navMobile .navPanel .menuArea .menuList, #header .gnb .navMobile .menuArea .menuList ul, #header .gnb .navMobile .menuArea .menuList ul li, #header .gnb .navMobile .menuArea .menuList ul li a{display:block; position:relative; line-height:1; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
	#header .gnb .navMobile .navPanel .menuArea .menuList{background:#fff; color:#fff; z-index:0;}
	#header .gnb .navMobile .navPanel .menuArea .menuList ul ul{display:none;}
	#header .gnb .navMobile .navPanel .menuArea .menuList > ul > li.active > ul{display:block;}
	#header .gnb .navMobile .navPanel .menuArea .menuList > ul > li > a{padding:18px; background:#fff; border-bottom:1px solid #e1e1e1; color:#333; font-size:1rem; font-weight:500; cursor:pointer; z-index:2;}
	#header .gnb .navMobile .navPanel .menuArea .menuList > ul > li > a:focus, #header .gnb .navMobile .menuArea .menuList > ul > li > a:hover{color:#3e6baf;}
	#header .gnb .navMobile .navPanel .menuArea .menuList > ul > li.hasSub > a:after{content:''; display:block; position:absolute; top:50%; right:15px; width:11px; height:11px; margin-top:-5.5px; background:url('../images/ico_plus_01.png') no-repeat center center; background-size:100%; z-index:5;}
	#header .gnb .navMobile .navPanel .menuArea .menuList > ul > li.hasSub.open > a{background:#3e6baf; color:#fff;}
	#header .gnb .navMobile .navPanel .menuArea .menuList > ul > li.hasSub.open > a:after{background:url('../images/ico_minus_01.png') no-repeat center center; background-size:100%;}
	#header .gnb .navMobile .navPanel .menuArea .menuList ul ul li a{padding:16px; background:#f7f7f7; border-bottom:1px solid #e1e1e1; color:#333; font-size:0.875rem; cursor:pointer; z-index:2;}
	#header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul li a{position:relative; padding-left:30px; background:#e8e8e8; border-bottom:none; color:#555; font-size:0.875rem;}
	#header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul li a:before{content:''; display:block; position:absolute; top:50%; left:20px; width:5px; height:1px; background:#555;}
	#header .gnb .navMobile .navPanel .menuArea .menuList ul ul li a:focus, #header .gnb .navMobile .navPanel .menuArea .menuList ul ul li a:hover{color:#222;}
	#header .gnb .navMobile .navPanel .menuArea .menuList ul ul > li.hasSub > a:after{content:''; display:block; position:absolute; top:50%; right:18px; width:9px; height:9px; margin-top:-4.5px; background:url('../images/ico_plus_02.png') no-repeat center center; background-size:100%; z-index:5;}
	#header .gnb .navMobile .navPanel .menuArea .menuList ul ul > li.hasSub.open > a{font-weight:500;}
	#header .gnb .navMobile .navPanel .menuArea .menuList ul ul > li.hasSub.open > a:after{background:url('../images/ico_minus_02.png') no-repeat center center; background-size:100%;}
	#header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul ul li a{position:relative; padding-left:34px; background:#e6e6e6; border-bottom:none; color:#676767; font-size:0.75rem;}
	#header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul ul li a:before{content:''; display:block; position:absolute; top:50%; left:28px; width:2px; height:2px; background:#777;}
	#header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul ul li a:focus, #header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul li a:hover{color:#222;}
	#header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul ul li.active a{color:#222;}
	#header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul > li.hasSub > a:after{right:19.5px; width:7px; height:7px; margin-top:-3.5px; opacity:0.8;}
	#header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul > li.hasSub.open > a:after{opacity:0.4;}
	#header .gnb .navMobile .navPanel .menuArea .menuList ul li.new a:after{content:''; display:inline-block; width:12px; height:12px; margin-left:3px; background:url('../images/ico_newlink.png') no-repeat center; opacity:0.5;}	


	#footer{padding:25px 0;}
	#footer .layoutLeft{float:left;}
	#footer .layoutRight{float:right;}
}

@media only screen and (max-width:768px){
	#header .gnb .navMobile .navPanel .menuArea .msnb ul li{margin-right:10px;}
	#footer{padding:0 0 30px;}
	#footer .inner{padding:0;}
	#footer .layoutLeft, #footer .layoutRight{float:none;}
	#footer .link{width:100%;padding:12px 0 18px; border-bottom:1px solid #ddd;}
	#footer .link ul{display:inline-block; width:100%; text-align:center;}
	#footer .link ul li{margin:0 10px;}
	#footer .link ul li a{font-size:0.8125rem;}
	#footer .link ul li:after{margin:0 2px 0 6px;}
	#footer .btnLink{width:100%; padding:0 10px; box-sizing:border-box;}
	#footer .btnLink .btnLink01{float:none;}
	#footer .btnLink .btnLink01 button{width:100%;}
	#footer .copyright{padding:20px 10px 0;}
	#footer .copyright .info span{margin-right:12px; font-size:0.8125rem; line-height:1.6;}

	.hd_pops{width:90%; top:68px !important; left:5% !important; margin-left:0;}
	.hd_pops_footer button{font-size:.813em;}
}

@media only screen and (max-width:480px){
	.hd_pops{max-width:90%;}
	.hd_pops_footer button{font-size:.775em;}
}