/* 怨듯넻 css */
@charset "utf-8";

html,body{
	min-height:100%;
	height:auto;
	overflow-x: hidden;}

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, p, 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,header,footer, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video,button,select,input{
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;	
	text-decoration:none;
    color: #181818;
    box-sizing: border-box;
    font-weight: 400;
	 font-family:Pretendard;
	 letter-spacing:0.0007em; 
	 line-height:1.6;
}

header{
	position: relative;	
}

footer{
	position: relative;	
	height:10px;
}

/* .gnb_li a::after{
	content: attr(title);
	display: block;
	font-weight: bold;
	height: 0px;
    visibility: hidden;
} */

.layout {position: relative; width: 100%; max-width: 1300px; margin: 0 auto; padding: 11px 0;}

@media (max-width:1300px){        .layout{width:100%;}}
#skipnavi{position:absolute;top:-1px;left:0;background-color:#333;z-index:999999}
#skipnavi a{position:absolute;top:0;left:0;padding:10px 25px;margin-top:-100px;text-align:center;line-height:1;white-space:nowrap;background:#000;}
#skipnavi a:link{color:#333;}
#skipnavi a:focus{margin-top:0;text-decoration:underline;color:#fff}
/* TopMenu */
#main #top_layout {/* position: absolute; */ width: 100%; z-index: 60;}

#sub #top_layout{position: relative;  width: 100%;    z-index: 60;}

@media(min-width:1025px){
    #top_layout #logo {    position: absolute;    top: 26px;    left:16%;    z-index: 4;}
#top_layout #logo > a{   display:inline-block;  /*  height: 80px; */}
#top_layout #logo img{width:300px;}
/* #top_layout #gnb{    position: absolute;    left: 0;  z-index: 3;  border-bottom: 1px solid #ddd; width: 100%;background:url(/common/images/bg_menu.png) repeat-x top #fff;background-position-y: 30px;} */
#gnb{height: 110px; /* background: url(/common/images/bg_menu.png) repeat-x top  */;background-position-y: 32px;border-bottom: 1px solid #aaa;z-index: 999;}
#gnb_layout{      transition: all 0.3s ease-out;  -webkit-transition: all 0.3s ease-out;}
#gnb_layout .layout {    position: static;}
.depth1_ul{    text-align: right;   /*  width: 100%; */    height: 100%;}
.th1{display: inline-block;}
.th1 > a{line-height: 88px; font-size: 18px; font-weight: 600; width: 145px; display: inline-block; position:relative;}
.th1:hover > a::before{
	content: '';
	position: absolute;
	width: 0px;
	height: 0px;
	left: 65%;
	bottom: -17%;
	border-bottom: 30px solid #0c3472;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
}
.th1:last-child > a{padding-right: 0;}
.th1 i img{display: none}	
.depth2_ul{display: none;}
.depth2_ul{position: absolute; top: 110px; opacity: 0; left: 0; right: 0; width: 100%; /* min-height: 120px; */ min-height: 68px; text-align: left; background: #0C3472;}
.depth2_ul.over{    border-bottom: 1px solid #aaa;}
.depth2_ul li{display: inline-block;}
.gnb_li a{
	display:inline-block;
	font-size: 19px;
	/* margin-top:36px; */ 
	/* color:orange; */
	color: var(--gray-300);
}
.gnb_li a:hover{/* color:#003f7a; */ color: #fff; font-weight: 600; /* text-decoration: underline #003f7a; */}
.gnb_wrap{height: 110px; transition: all 0.3s ease-out;    -webkit-transition: all 0.3s ease-out;}
.gnb_wrap.on{height: 110px;;transition: all 0.3s ease-out;    -webkit-transition: all 0.3s ease-out;}
.depth2_ul.over{display: block; opacity: 1; z-index: 10;}
.over .depth1_tit{
	width:44%;
	float: left;
	/* background: red; */
	/* height: 160px; */
}
.depth1_text{
	display: block; 
	text-align: right;
	/* height: 80px; */
	/* color:yellow; */
	color: #fff;
	/* padding: 45px 60px 205px 60px; */
	padding: 10px 60px 10px 60px;
	font-size: 26px;
	font-weight: 500;
	background-image: url(/common/images/depth1_tit_bg.svg);
	background-repeat: no-repeat; 
	background-size: 180px;  
	background-position: 93% 76%;}
.over .depth2_list{
	float: left;
	width:56%;
	/* height: 160px; */
	/* background:green; */
	/* padding:20px 300px 20px 60px; */
	padding: 10px 300px 10px 110px;
}

.over .depth2_list li{
	display: inline-block;
	line-height: 48px;
	margin-right:4em;
}

.on .th1 > a{color: #fff;}
.new_tab::after{content: '';    width: 20px;    height: 24px;    background-image: url(/common/images/new_window.svg);    background-size: 82%;    /* position: absolute; */    display: inline-block;    margin-left: 5px;    background-position: left 2px;    background-repeat: no-repeat;    vertical-align: middle;}


}

@media(min-width:1025px) and (max-width:1300px){
    .th1{width: 11%;}
    .th1 > a{text-align: center;width: 100%; font-weight: bold;}
    .over .depth1_tit{width: 34%;  /*   padding: 60px 45px 205px 60px; */}
    .depth1_text{background-size: 200px;    background-position: 81% 76%;}
    .over .depth2_list{width:66%;padding:20px 5% 20px 50px}
    .over .depth2_list li{width: 30%;}
}
@media(max-width:1024px){
    #top_layout , #sub #top_layout {position:fixed;top:0; left:0; right:0; width:100%;z-index: 997;    background: #fff; height: 70px; border-bottom: 1px solid #ddd;}
    #top_layout #logo img{width:220px;}
    .depth1_tit {display: none;}

    /* 紐⑤컮�씪 硫붾돱 */
    #menu-wrapper {    overflow: hidden;    max-width: 55px;    cursor: pointer;	position:absolute;	right: 0;top: 9px;    /*  top: -60px; */}
    #menu-wrapper #hamburger-menu {    position: relative;    width: 25px;    height: 20px;    margin: 15px;	z-index:501;/* 	top: 15px; */}
    #menu-wrapper #hamburger-menu span {    opacity: 1;    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";   left: 0;   display: block;    width: 100%;   height: 2px;    border-radius: 10px;    color: black;    background-color: #000;    position: absolute;    -webkit-transform: rotate(0deg);    transform: rotate(0deg);    -webkit-transition: .4s ease-in-out;    transition: .4s ease-in-out;}
    #menu-wrapper #hamburger-menu span:nth-child(1) {    top: 0;}
    #menu-wrapper #hamburger-menu span:nth-child(2) {    top: 9px;}
    #menu-wrapper #hamburger-menu span:nth-child(3) {    top: 18px;}
    #menu-wrapper #hamburger-menu.open span:nth-child(1) {    top: 9px;    -webkit-transform: rotate(135deg);    transform: rotate(135deg);}
    #menu-wrapper #hamburger-menu.open span:nth-child(2) {    opacity: 0;   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";    left: -60px;}
    #menu-wrapper #hamburger-menu.open span:nth-child(3) {    top: 9px;   -webkit-transform: rotate(-135deg);    transform: rotate(-135deg);}
    #menu-container{    position: fixed;    top: 0; bottom: 0;/* 	max-width:550px; */max-width: 80%;    height: 100%;    background: #fff;    z-index: 100;    overflow-y: scroll;    right: -200%;box-shadow: -7px 0px 20px #03030385;	padding-top:85px;    width: 500px;}
    #menu-container .menu_over{width: 100%;  /*   height: 100%; */    overflow: scroll;}
    /* #menu-container .depth1_ul{} */
    #menu-container .depth1_ul .th1{border-bottom:1px solid #ddd;padding: 0px;line-height: 3em;text-indent:15px;    position: relative;text-align: left;}
    #menu-container .depth1_ul .th1:last-child{border-bottom: 0px solid #ddd;}
    #menu-container .depth1_ul .th1 i{    position: absolute;    display: inline-block;    top: 4px;right:18px}
    #menu-container .depth1_ul .th1 i img {    width: 13px;}
    #menu-container .depth1_ul .th1 > a{font-size:18px;}
    #menu-container .depth1_ul .depth2_ul{display:none;background:#fbfbfb;border-top:1px solid #ddd;padding:10px 0;}
    #menu-container .depth1_ul .depth2_ul > li{text-indent:30px;font-size:15px;line-height: 2.5em;}
    #menu-container .depth1_ul .depth3_ul > li{text-indent:45px;}
    #menu-container .depth1_ul .depth3_ul > li > a p::before{content:"쨌 ";}
    #menu-container .depth1_ul .depth3_ul > li > a{color:#666;font-size:13px}
    #body_layout > #mvisual,#sub #body_layout{margin-top: 70px !important;}
    ul.short_link{border-top: 1px solid #ddd;}
    .gnb_li a{display: inline-block;width: 95%;line-height: 1em;}
	.pre_menu > a{color:#043081 !important; font-weight:bold;}
	.pre_menu2 > a{color:#043081 !important; font-weight:bold;}
}
@media  (max-width:480px){
    #top_layout #logo{margin: 18px 0 0 15px;    width: 74%;
        display: inline-block;}
    #top_layout #logo img {        width: 160px;    }
    .gnb_li a{font-size: 15px;}
}



/* �뙘�뾽 */
@media (min-width: 701px) and (max-width: 1024px){
    [id*="popup"] {        left: 2.5% !important;        position: fixed !important;        width: 40%;        box-sizing: border-box;        margin: 0 auto;    }
    [id*="popup01"]{left: 2.5% !important;}
    [id*="popup02"]{left: 10% !important;}
    [id*="popup03"]{left: 20% !important;}
    [id*="popup04"]{left: 30% !important;}
    [id*="popup"] img {        width: 100% !important;  height: auto  !important;   }
}
@media (max-width: 700px){
    [id*="popup"] {        left: 2.5% !important;        position: fixed !important;        width: 95%;        box-sizing: border-box;        margin: 0 auto;    }
    [id*="popup"] img {        width: 100%  !important;   height: auto  !important;   }



.br25{border-radius: 25px;}
.bc_037{background-color: #003f7a;}



/* font color */
.fc_f{color: #fff;}
.fc_0{color:#000}

to-Regular.woff) format('woff'),
        url(../font/Roboto-Regular.otf) format('opentype'); 
}

.Pretendard{font-family: 'Pretendard-Regular' !important;}

/* function */
.per_center {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}
.a11y-hidden {  position: absolute;  width: 1px;  height: 1px;  margin: -1px;  overflow: hidden;  clip-path: polygon(0 0, 0 0, 0 0);}
.text_over{    text-overflow: ellipsis;    overflow: hidden;    white-space: nowrap;}
.di{display: inline-block;vertical-align: top;}
/* animation */

.mo_view{display: none;}

/* 怨듯넻 css */

/* 留덉쭊 */
.margin-auto{margin:0 auto;}

/*   �뙣�뵫   */
.padding-x{  }
	@media (max-width: 1279px){.padding-x{padding:0 16px;}}

/* h1  */
.page-name{color:var(--second-color);}
.page-name::after{
	content:'';
	width:1em;
	height:1px;
	background-color:var(--second-color);
	display:block;
	margin:10px auto 10vw auto;
}
	@media (min-width: 1024px){
		.page-name::after{
			margin:10px auto 5vw auto;
		}
	}