@import 'reset.css';
@import 'main.css';
@import 'sub.css';
/* 20250320 */
/* fonts */
@font-face {
    font-family: 'Pretendard';
    src: url('./fonts/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./fonts/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./fonts/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./fonts/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./fonts/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./fonts/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./fonts/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./fonts/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./fonts/Pretendard-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

/* -- fonts */
/*전체 공통*/
input::placeholder{color:#757575; font-size: 14px;}
a, span, b, strong{display: inline-block;}
body{font-weight: 400; min-width: 320px; line-height: 1.4; font-family: 'Pretendard'; color:#333; min-height: 100%; overflow-x: hidden;}
.blind {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: -1px;}
.clearfix:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}
.hide{display: none;}
#wrap { min-height: 100%;}
/* skip-nav */
.skip-nav {position: absolute; width: 100%; left: 0;top: -30px; z-index: 100000;}
.skip-nav a:focus, .skip-nav a:active {position: absolute; left: 0;top: 30px; height: 30px; line-height: 30px; width: 100%; text-align: center; color: #fff; background:#014195; overflow: visible; clip: unset;}
/* 구글번역 css */
body {top: 0 !important;}
.skiptranslate {display: none;}
#goog-gt-tt {display: none !important;}

#google_translate_element > div > div > select::-ms-expand {
    display: none;
}

#google_translate_element > div > div:after {
    content: '<>'; /* 목록 펼침 아이콘 */
    font: 17px "Consolas", monospace;
    color: #333;
    transform: rotate(90deg);
    right: 11px;
    top: 18px;
    padding: 0 0 2px;
    border-bottom: 1px solid #999;
    position: absolute;
    pointer-events: none;
}

#google_translate_element > div > div > select {
   /* -webkit-appearance: none;
    -moz-appearance: none;*/
    appearance: none;
    display: block;
    width: 100%;
    max-width: 320px;
    height: 50px;
    float: right;
    margin: 5px 0px;
    padding: 0px 24px;
    font-size: 16px;
    line-height: 1.75;
    color: #333;
    border: 1px solid #cccccc;
   /* -ms-word-break: normal;*/
    word-break: normal;
    border-radius: 10px;
}

.google-translate .drop-box{position: relative;}
.openLanguageG{display:flex;align-items:center; border: 1px solid #eee; border-radius: 20px; padding:5px 10px;}
.openLanguageG span{font-size:14px;}
.openLanguageG::before { margin: 0 8px 0 0; content: ''; display: block; width: 16px; height: 16px; background: url("../images/h-google.png") no-repeat center;}
.google-translate .drop-box .openLanguageG::after{content:"";display:block;width:11px;height:8px;margin-left:10px;background:url("../images/g-arrw.png") no-repeat center;}
.google-translate .drop-box.expanded .openLanguageG::after{transform: rotate(180deg); }
.google-translate .drop-box .translation-links{width: 110px;display:none;position:absolute;left:calc(100% - 120px);top:32px; z-index: 99999; background-color: #fff;  box-shadow: 4px 4px 4px rgba(0,0,0,0.2);}
.google-translate .drop-box.expanded .translation-links{display:block;}
.translation-links a{font-size:13px;color:#000;background:#FFF;display:block;padding:5px 15px;margin-top:1px;}
.translation-links a:hover{background-color: rgba(156, 156, 156, 0.3);}
.google-translate .drop-box .tip{position: absolute; background-color: #fff; width: 440px;  padding: 15px 20px;border-radius: 10px;font-size: 14px;  box-shadow: 2px 2px 10px rgba(0, 0, 0, .4); color: #666; opacity: 0;transition: opacity .75s; transition-delay: .2s; z-index: 1000000; right:-99999px; top: 150%;}
.google-translate .drop-box .tip .btn-box{text-align: center; margin-top: 20px; display: none;}
.google-translate .drop-box .tip button{background-color: #014195; color:#fff; border-radius: 4px; padding:3px 10px;}
.google-translate .drop-box.on .tip{opacity: 1; right:0;}
.google-translate .drop-box.on .tip .btn-box{display: block;}
/* --- 구글번역 css  */

/* margin */
.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt25 {margin-top:25px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}

.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb25{margin-bottom: 25px;}
.mb30{margin-bottom: 30px;}

/* padding */
.pl5{padding-left: 5px;}
.pl10{padding-left: 10px;}
.pl15{padding-left: 15px;}
.pl20{padding-left: 20px;}
.pl25{padding-left: 25px;}


/* text-align */
.al{text-align:left;}
.ac{text-align:center;}
.ar{text-align:right;}
/* font-size */
.fz16{font-size: 16px;}
.fz18{font-size: 18px;}
.fz20{font-size: 20px;}
.fz22{font-size: 22px;}
.fz24{font-size: 24px;}

/* font-weight */
.f-light{font-weight: 100;}
.f-normal{font-weight: 400;}
.f-bold{font-weight: 700;}
/* color */
.fcW{color:#fff;}
.fcBk{color:#2a2a2a;}
.fcBl{color:#0e3174;}
.fcBl2{color:#1b4fb4;}
.fcR{color:#e60013;}
.fcR2{color:#d23340;}
.point{color:#0e3174; font-size: var(--fz-16);}
/* var */
:root{
    /* font-size */
    --fz-15: 15px;

    --fz-16: 16px;
    --fz-18: 18px;
    --fz-20: 20px;
    --fz-22: 22px;
    --fz-24: 24px;
    --fz-28: 28px;
    --fz-30: 30px;
    --fz-36: 36px;
    --fz-38: 38px;

}
@media (max-width: 760px) {
    :root{
        --fz-18: 17px;
        --fz-20: 18px;
        --fz-28: 26px;
        --fz-30: 28px;
        --fz-36: 30px;
        --fz-38: 32px;
    }
}
@media (max-width: 480px) {
    body{font-size: 14px;}
    :root{
            /* font-size */
            --fz-13: 13px;
            --fz-16: 14px;
            --fz-18: 16px;
            --fz-20: 16px;
            --fz-22: 20px;
            --fz-24: 22px;
            --fz-28: 22px;
            --fz-30: 24px;
            --fz-36: 26px;
            --fz-38: 28px;
    }
}
/* --var */


/* -- 전체 공통*/
.inner{max-width: 1530px; margin:0 auto; padding:0 20px;}
a.linkNwin {
    background: url("../images/nWindow_ic.png") no-repeat 96% 6px; padding-right: 26px;
}


/* ***********************************
            common.css
        header / GNB / footer
* ***********************************/
.header{position: fixed; left:0; top:0; width: 100%; background-color: #fff; z-index: 99999;}
.header-top{background-color: #003B9E; color:#fff; font-size: 14px; padding:10px 0;}
.header-top > .inner{display: flex; justify-content: flex-end; align-items: center; gap: 20px; flex-wrap: wrap;}

.h-logo .logo-pc{display: block;}
.h-logo .logo-mob{display: none;}

.util-wrp > li{padding:0 8px; position: relative; float: left; text-transform: uppercase;}
.util-wrp > li:after{
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: rgba(255,255,255,0.6);
    position: absolute;
    right:0;
    top:5px;

}
.util-wrp > li:last-child:after{display: none;}

.header-bot{background-color: #fff; position: relative; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);}
.header-bot > .inner{display: flex;align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;}

.gnb-wrp{padding:40px 0px;}
.gnb-wrp > .depth1{display: flex; gap: 50px; font-size: 18px;}
.gnb-wrp > .depth1 .dp2-bx{display: none; position: absolute; z-index: 1000;background-color: #fff; width: 100%; left:0; top:100%;}
.gnb-wrp > .depth1 .dp2-bx > div{display: flex; align-items: stretch; min-height: 480px;}
.gnb-wrp > .depth1 .dp2-itx{max-width: 425px; width: 22%; font-size: 48px; font-weight: 900; color:#fff; background-image: url("../images/gnb-bg01.png"); background-repeat: no-repeat;background-size: 100% 100%; position: relative;}
.gnb-wrp > .depth1 .dp2-itx > h2{position: absolute; right: 50px; top:50px; text-align: right;}
.gnb-wrp .depth2{width: 78%; padding:40px;display: flex; gap: 30px; align-items: stretch; flex-wrap: wrap;}
.gnb-wrp .depth2 > li{width: calc(100% / 4 - 23px);}
.gnb-wrp .depth2 > li > a{width: 100%; height: 72px; padding:10px 10px; border:1px solid #CFCFCF; display: flex; align-items: center;}
.gnb-wrp .depth2 > li > a.linkNwin{    background: url(../images/nWindow_ic.png) no-repeat 96% center;padding-right: 30px;}
.gnb-wrp .depth2 > li > .depth3{padding:20px 10px; font-size: 16px; }
.depth3 > li{position: relative;padding-left: 10px;}
.depth3 > li + li{margin-top: 6px;}
.depth3 > li::before{content:""; display: inline-block; width: 4px; height: 4px; background-color: #808080; position: absolute; left:0; top:11px; border-radius: 50%;}
.depth3 > li > a{color:#555;}

/* hover */
.gnb-wrp  .depth2 > li.on > a{background-color: #003B9E; color:#fff; border-color: #003B9E;}
.gnb-wrp .depth2 > li > a.linkNwin:hover, .gnb-wrp .depth2 > li > a.linkNwin:focus,
.gnb-wrp .depth2 > li.on > a.linkNwin,.gnb-wrp .depth2 > li.on > a.linkNwin{background:#003B9E url("../images/nWindow_ic2.png") no-repeat 96% center;}

.depth3 > li > a:hover,.depth3 > li > a:focus{color:#2665d0; text-decoration: underline;}
.header-bot .srch-wrp{display: flex; align-items: center;}
.header-bot .srch-wrp > .srch-btn{width: 26px; height: 26px; background: url("../images/search-icn.png") no-repeat; margin-right: 27px;}
.header-bot .srch-wrp > .all-menu{width: 24px; height: 24px; position: relative;}
.header-bot .srch-wrp > .all-menu > .bar{width: 100%; height: 3px; background-color: #333; position: absolute; right: 0;}
.header-bot .srch-wrp > .all-menu > .bar.top{width: 100%; top: 2px;}
.header-bot .srch-wrp > .all-menu > .bar.mid{width: 100%; top: 10px;}
.header-bot .srch-wrp > .all-menu > .bar.bot{width: 60%; transition: 0.2s; bottom: 2px;}
.header-bot .srch-wrp > .all-menu:hover > .bar.bot{width: 100%}




/* 검색창 */
.srch-box{position: absolute; left:0; top:100%; background-color:rgba(9, 72, 151,0.9); width: 100%; height: 0; z-index: 999;  overflow: hidden; transition: height 0.5s;}
.srch-box .srch-box-in{max-width: 1496px; margin:56px auto; display: none;}
.srch-box .srch-box-in .srch-df{display: flex; align-items: center; justify-content: center; position: relative; margin:0 30px;}
.srch-box .srch-box-in .srch-line{max-width: 800px; width: 100%; border:2px solid #33CCCC; border-radius: 0 0 30px 0; display: flex; align-items: center;}
.srch-box .srch-box-in .srch-line input[type="text"]{border:0; background-color: transparent; color:#fff; width: calc(100% - 60px); padding:16px 0 16px; text-indent: 16px; font-size: var(--fz-22);}
.srch-box .srch-box-in .srch-line input[type="text"]::placeholder{color:#fff;font-size: var(--fz-22);}
.srch-box .srch-box-in .serch-btn{width: 32px; height: 32px; background: url("../images/search-icn2.png") no-repeat;}
.srch-box .srch-box-in .srch-close{width: 38px; height: 38px; background: url("../images/close-icn.png") no-repeat; margin-left: 20px; position: absolute; right:0; top:13px;}
.srch-box.active{display: block; height: 180px; }
.srch-box.active .srch-box-in{display: block;}

#footer{background-color: #333333; color: #949494; padding:60px 0;}
#footer .foot-link{display: flex; margin-bottom: 20px; flex-wrap: wrap;}
#footer .foot-link > li{position: relative;     margin-right: 20px; margin-bottom: 5px;}
#footer .foot-link > li:after{
    content: "";
    display: inline-block;
    position: absolute;
    right: -10px;
    top: 50%;
    width: 1px;
    height: 14px;
    margin-top: -8px;
    background: #656565;
}
#footer .foot-link > li:last-child:after{display: none;}
#footer .foot-link > li:first-child{color:#fff;}


@media (max-width: 1400px) {
    .header-bot{padding-top: 30px;}
    .h-logo{order:1}
    .gnb-wrp{width: 100%; padding:20px; order:3}
    .gnb-wrp > .depth1{justify-content: space-between}
    .srch-wrp{order:2}
    .gnb-wrp > .depth1 .dp2-itx{font-size: 38px;}
    .gnb-wrp .depth2 > li{width: calc(100% / 3 - 20px);}
}
@media (max-width: 1024px) {
    .header-bot{padding:20px 0;}
    .gnb-wrp{display: none;}
    .header-bot .srch-wrp > .srch-btn{margin-right: 10px;}
}
@media (max-width: 960px) {
    .google-translate .drop-box .tip{width: 220px;}
    /* 검색창 */
    .srch-box .srch-box-in .srch-line{width: calc(100% - 100px);}
    .srch-box .srch-box-in .srch-close{position: static;}
}
@media (max-width: 480px) {
    .h-logo .logo-pc{display: none;}
    .h-logo .logo-mob{display: block;}

    .header-bot .srch-wrp{justify-content: flex-end;}
    .util-wrp > li{font-size: 13px;}
    .header-bot .srch-wrp > .srch-btn{background-size: 100% 100%; width: 20px; height: 20px;vertical-align: middle;}
    .header-bot .srch-wrp > .all-menu{padding:6px 0;}
    .header-bot .srch-wrp > .all-menu > p{height: 2px; width: 20px;}
    .header-bot .srch-wrp > .all-menu >p::before, .header-bot .srch-wrp > .all-menu >p::after{height: 2px;}

    /* 검색창 */
    .srch-box.active {height: 110px;}
    .srch-box .srch-box-in{margin:30px 0;}
    .srch-box .srch-box-in .srch-df{margin:0 10px;}
    .srch-box .srch-box-in .srch-line input[type="text"]{padding:10px 0;}


    #footer{font-size: 13px;}
    #footer .foot-link{font-size: 14px;}
}



/* all menu pop */
body::after {
    background: #00000071;
    position: fixed;
    content: '';
    left: 50%;
    top: -75%;
    width: 0;
    height: 250%;
    z-index: 99999;
    opacity: 1;
    /* transition: all 0.5s ease; */
    display: block;
    transform: rotate(45deg);
}

body.setAni::after {
    opacity: 1;
    left: -50%;
    width: 200%;
}
body.setAni #all-menu-pop {
    display: block;
    opacity: 1 !important;
    /* transition: all 0.4s 0.2s ease; */
}
@media (min-width: 760px) {
    #all-menu-pop{position: fixed; left:0; top:0; width: 100%; height: 100%;  z-index: 100000; opacity: 1; display: none;}
    .all-menu-box{ background-color: #fff; max-width: 1400px;  width: 95%; position: fixed; left:50%; top:50%; transform: translate(-50%, -50%); border-radius: 20px; overflow: hidden;  }

    .all-menu-box .pop-header{background-color: #1348A6; padding:30px 10px;}
    .all-menu-box .pop-header > .util-wrp{display: none;}
    .all-menu-box .pop-content{padding: 0px 30px; max-height: 700px; overflow-y: scroll;}

    .all-menu-depth > li {display: flex; gap: 20px; font-weight: 500; padding:40px 0;}
    .all-menu-depth > li + li{border-top:1px solid #DBDBDB;}
    .all-menu-depth > li > .menu-depth1{width: 20%; color: #0c2e86; font-size: 24px; font-weight: 600;}
    .all-menu-depth > li > .depth2{width: calc(80% - 20px); font-size: 18px; display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 60px; font-weight: 600;}
    .all-menu-depth .depth2 > li{width: calc(100% / 4 - 15px); min-width: 200px; padding-left: 16px; position: relative;}
    .all-menu-depth .depth2 > li::before{content:""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background-color: #3662C0; position: absolute; left:0; top:11px;}
    .all-menu-depth .depth2 > li >a{display: block;}
    .all-menu-depth .depth3{font-size: 16px; padding:10px 0; font-weight: 400;}    
    .all-menu-depth .depth3 > li{padding-left: 13px; word-break: keep-all;}
    .all-menu-depth .depth3 > li::before{width: 6px; height: 1px; top: 11px;}
    .all-menu-depth .depth3 > li+li{margin-top: 10px;}

    .pop-content .menu-close{width: 30px; height: 30px; background: url("../images/close-icn.png") no-repeat; background-size: 100% 100%; position: absolute; right:20px; top:30px;}
}
@media (max-width: 759px) {
    .header-top > .inner{gap: 0;}
    .header-top .util-wrp{display: none;}
    #all-menu-pop{position: fixed; left:0; top:0; width: 100%; height: 100%;  z-index: 100000; opacity: 1; display: none;}
    .all-menu-box{ background-color: #fff; width: 100%; position: fixed; right: 0; top:0; overflow: hidden; background-color: #1348A6; color:#fff;max-height: 700px; height: 100%;}

    .all-menu-box .pop-header{background-color: #1348A6; padding:30px 20px 14px;}
    .all-menu-box .pop-header > .util-wrp{font-size: 14px; float: none; margin-top: 20px;}
    .all-menu-box .pop-header > .util-wrp > li:nth-child(1){padding-left: 0;}
    .all-menu-box .pop-content{height: 100%; background-image: url("../images/m-gnb-bg.png"); background-repeat: no-repeat;  background-position: left bottom; border-top:1px solid #89A4D3;}

    .all-menu-depth{height: 100%; position: relative;}
    .all-menu-depth > li >a{width: 30%; padding:20px; border-bottom: 1px solid #3663B3;}
    .all-menu-depth > li > .depth2{width: 70%; position: absolute; right:0; top:0; padding:0 20px; display: none; height: 600px; overflow-y: scroll;}
    .all-menu-depth > li > .depth2 > li >a{display: block; width: 100%; padding:20px 0; border-bottom: 1px solid #3663B3;}
    .all-menu-depth > li > .depth2 > li >a.linkNwin{background-image: url("../images/nWindow_ic2.png");}
   

    .all-menu-depth > li > .depth2 > li > .menu-depth2{background-image: url("../images/arrw05.png"); background-position: 95% center; background-repeat: no-repeat;}
    .all-menu-depth  .depth3{display: none; padding:0 10px; }
    .all-menu-depth  .depth3 > li{margin:15px 0;}
    .all-menu-depth  .depth3 > li > a{color:#fff; font-size: 14px;}
    .all-menu-depth  .depth3 > li::before{background-color: #fff; top: 9px;}
    /* active */
    .all-menu-depth > li.active > a{background-color:rgba(12, 45, 104, 0.8);}
    .all-menu-depth > li.active > .depth2{display: block;background-color:rgba(12, 45, 104, 0.8);}
    .all-menu-depth .depth2 > li.active > .menu-depth2{background-image: url("../images/arrw06.png"); color:#33cccc;}
    .all-menu-depth  .depth2 > li.active .depth3{ border-bottom: 1px solid #3663B3;}
    .pop-content .menu-close{width: 30px; height: 30px; background: url("../images/close-icn.png") no-repeat; background-size: 100% 100%; position: absolute; right:20px; top:30px;}

}

/* error */
.error-wrap{max-width: 1000px; margin:0 auto;}
.error-head{margin-top: 30px; border-bottom: 5px solid #487ab5; padding-bottom: 20px;}
.error-cont{text-align: center; padding: 55px 40px 40px 40px;    border-bottom: 1px solid #2e75b5;}
.error-cont h2{font-size: 1.5em;}
.error-cont .desc{color:#a0a0a0; margin-top: 30px; margin-bottom: 50px;}
.error-cont .btn-box{display: flex; align-items: stretch; justify-content: center; gap: 20px; margin-top: 60px;}
.error-cont .btn-box >a{padding: 15px 20px; font-size: 12px; color: #ffffff;background-color: #487ab5; text-decoration: none; text-align: center;}
.error-foot{font-size: 13px; color: #a0a0a0; text-align: center; padding:30px 0;}