@charset "utf-8";

/* set */
body {position:relative;font-size:16px !important;margin:0;padding:0;font-family: 'Noto Sans KR', sans-serif;color:#222;font-weight: 300;}
input, select, button{font-family: 'Noto Sans KR', sans-serif;}
body *{ box-sizing:border-box;}
a {color: #464646;}
::selection {background:var(--color2);color:var(--white);text-shadow:none;}


#skip{top:0;right:0;position:absolute;width:100%;height:15px;text-align:center}
#skip li a{display:block;left:-10000px;position:absolute;top:0;width:100%;text-align:center;z-index:0;height:1px}
#skip li a:hover, #skip li a:focus, #skip li a:active{background:#363636;position:absolute;top:0px;left:0;z-index:5;color:#fff;width:100%;height:25px;padding:5px 0 0 0}



:root {
    --color1: #0089d0; /*main_color*/
    --color2: #0b438c;
    --color3: #688cb3;
    --btnbg:  url("/images/03_lang/common/btn_set.png");
    --white: #fff;
    --black: #000;
    --gray1: #f6f8fa; /*bg*/
    --gray2: #efefef; /*text*/
    --gray3: #ccc; /*line*/
    --gray4: #464646; /*title*/
    --gray5: #3b434e; /*bottom_bg*/
    --gray6: #7d7d7d; /*txt*/
}


/*스크롤바스타일*/
*::-webkit-scrollbar {width:5px;height:5px;} /*스크롤바 사이즈*/
*::-webkit-scrollbar-track {border-radius:5px;background:var(--gray3);} /*스크롤바 배경*/
*::-webkit-scrollbar-thumb {background:var(--color1);border-radius: 10rem} /* 스크롤 제어박스*/



header{position:relative;z-index:2}
section{position:relative;z-index:1}
footer{position:relative;z-index:1}



/* Mobile */
header{position:relative;height:120px;}

.lang{position:relative;background:var(--gray1);height:35px;}
.lang p{text-align:right;}
.lang p a{position:relative;display:inline-block;padding:5px 30px;color:#959595;}
.lang p a:after{display:block;content:"";width:8px;height:4px;background:var(--btnbg) no-repeat 0 0;position:absolute;top:15px;right:17px;}
.lang ul{position:absolute;top:35px;right:10px;background:var(--white);border:solid 1px var(--gray3);padding:10px 0;border-radius:15px;}
.lang li a{display:block;padding:5px 15px;}

h1{font-family: 'GWstrong';color:#252525;font-size:24px;letter-spacing:-1px;position:absolute;top: 58px;left:20px}
h1 a{display:inline-block;/* background:url("/images/03_lang/common/symbol.png") no-repeat left top; *//* padding:18px 0 0 40px; */color:var(--black);width:240px}
h1 img{width:100%}
.head{}
.head button{display:block;width:16px;height:0;padding-top:15px;overflow:hidden;background:var(--btnbg) no-repeat -30px 0;position:absolute;top:73px;right:25px;}


.menu{display: none;position: fixed;top: 0;bottom: 0;left: 0;right: 0;background:var(--white);z-index: 9;}
.menu.on{display: block;}
.menu.on h2{padding:15px 20px;font-size: 20px;background:var(--color2);color:var(--white);position:relative;top:unset;left:unset;height:60px;}
.menu>ul>li>a{display: block;font-size: 18px;font-weight: 600;color:var(--gray5);width: 50%;padding: 15px 0 15px 15px;border-bottom: 1px solid var(--gray3);letter-spacing:-1px;}
.menu>ul>li>a.on{background:var(--color1);color:var(--white);}
.depth_box{background:var(--gray1);position: absolute;top: 60px;left: 50%;right: 0;bottom: 0;overflow-y: auto;z-index: 1;padding-top: 20px;}
.menu li li a{display: block;font-size: 16px;padding: 10px 0 10px 20px;}
.menu li li a .new_win{margin-top: 5px;}
.menu li li ul{border-radius: 20px;background:var(--white);padding: 10px;margin:0 10px;}
.menu li li li{padding: 0 10px;}
.menu li li li a{display: block;padding: 8px 0;font-size: 14px;color:var(--gray4);border-top: 1px dashed var(--gray3);}
.menu li li li:first-child a{border:none;}
.menu button{display:block;width:43px;height:0;padding-top:45px;overflow:hidden;background:var(--btnbg) no-repeat 0 -160px;position:absolute;top:10px;right:10px;}


.head .tsitemap{display:none;}





footer{clear:both;background:var(--gray5);padding:30px 20px;}


.foot_info{font-size:14px;line-height:20px;color:var(--gray3)}
.foot_info address{display:inline-block;font-style:normal;letter-spacing:-1px;}
.foot_info .copy{padding:10px 0 20px 0;line-height:20px;font-size:13px;letter-spacing:-1px;}


/*******sub********/



/* Tablet */
@media all and (min-width:768px) {



    
}

/* Desktop */
@media all and (min-width:1023px) {

header{height:230px;}

.lang{background:none;position:absolute;top:65px;right:10px;}

    
h1{font-size:28px;position:relative;top:unset;left:unset;text-align:center;padding-top:55px;height:150px;}
h1 a{width:270px}
    
.wrap{position:relative;width:1400px;margin:0 auto;}

.head{height:130px;border-top:solid 1px var(--gray3)}
.head  button{display:none;}    

.head .wrap>button, .menu button{display: none;}
.head .tsitemap{display:block;position:absolute;top:-75px;right:0;}
.head .tsitemap a{display:inline-block;width:16px;height:0;padding-top:15px;overflow:hidden;background:var(--btnbg) no-repeat -30px 0;}
    
.menu{display: block;position: static;background: none;}
.menu h2{display: none;}
.menu>ul{font-size: 0;}
.menu>ul>li{display: inline-block;margin: 0 235px 0 0;}
.menu>ul>li:last-child{margin:0;}
.menu>ul>li>a{width: 100%;padding:20px 0;background: none;border: none;font-weight: 500;color: #222;font-size:22px;letter-spacing: -1px;}
.menu>ul>li>a.on{background:none;color:var(--color1);border-radius:0}
.menu>ul>li>a:hover,
.menu>ul>li>a:focus{background:none;color:var(--color1);}

.menu .depth_box{display:none;} 
    

.menu.on .depth_box{display:block;}  
.menu.on .depth_box.hide{display:none;}
.depth_box{top:79px;left:0;bottom: unset;width:100%;padding: 0;border-radius: 0;z-index:100;background:none;overflow:visible}
.depth_box:before{display:block;content:"";width:200%;height:90px;background:var(--gray1);position:absolute;top:0;left:-20%;z-index:-1;}
.depth_boxcon{padding:20px 0;}
.menu li li{display:inline-block;padding:0 40px 0 0;}
.menu li li a{display:block;text-align:center;font-size:16px;padding:10px 20px;}
.menu li li a:hover,
.menu li li a:focus{color:var(--color1);border:solid 1px var(--color1);border-radius:15px;}
.menu li li ul{display:none;}

.menu .menu2 ul{margin-left:100px;}
.menu .menu3 ul{margin-left:350px;}
.menu .menu4 .depth_box:before{height:150px;}
.menu .menu5 ul{margin-left: 930px;}
    
footer{clear:both;}    
footer .wrap{width:1400px;margin:0 auto;}

.footer{padding:0;height:90px;}
    
    
.foot_info{font-size:18px;text-align:left;text-align:center;}
.foot_info address{letter-spacing:0;padding-right:10px;}
.foot_info span{padding:0 40px;}
.foot_info .copy{display:inline-block;font-size:18px;padding:0;}

    
/*sub*/
    
    
}




.clear{display:block;content:"";clear:both}
.blind{position:absolute;top:-5000px;left:-5000px;}
.new_win{display:inline-block;width:15px;height:0;font-size: 0;overflow:hidden;padding:15px 0 0 0;margin:0 0 0 5px;vertical-align:top;background: url("/images/01_portal/common/ico_cmd.png") -20px -120px;}


.hide{display:none;}
                             
.layer_pop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0, 0, 0, .4);backdrop-filter:blur(4px);z-index:5}
.layer_pop>div{position:absolute;top:128px;left:50%;width:90%;transform:translate(-50%, 0)}
.layer_pop .con img,.layer_pop .con iframe{width:100%}
.layer_pop p{background:#4a4a4a;overflow:hidden}
.layer_pop p a{float:left;width:50%;padding:10px 0;color:#fff;font-size:15px;text-align:center;position:relative}
.layer_pop p a:first-child:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;width:1px;background:rgba(255, 255, 255, .2)}
.layer_pop p a:hover,.layer_pop p a:focus{background:#0089d0}
@media all and (min-width:768px) {
.layer_pop>div{top:50%;transform:translate(-50%, -50%);width:auto}
.layer_pop .con iframe{width:600px;height:400px}
.layer_pop .con img{width:auto}
}
@media all and (min-width:1023px) {
.layer_pop .con iframe{width:950px;height:530px}
}        

.footer_icon{text-align:center;}
.footer_icon a{color:#ccc;display: block;height: 30px;line-height: 30px;padding-right: 10px;margin-bottom:15px;font-size:18px;text-align: left;}
.footer_icon a img{width: 30px;margin-right: 10px;}

@media all and (min-width:768px) {
.footer_icon a{display:inline-block;}
}

@media all and (min-width:1023px) {
.footer_icon a{padding-right:20px;}
}