/* 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 { display: flex;flex-direction: column;min-height: 100vh;}
/* 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% center; padding-right: 26px;
}


/* ***********************************
            common.css
        header / GNB / footer
* ***********************************/
.header{position: fixed; left:0; top:0; width: 100%; background-color: #fff; z-index: 999;}
.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:20px 0px;}
/* 251028 font-size 18 -> 21로 수정  */
.gnb-wrp > .depth1{display: flex; gap: 50px; font-size: 19px;}
.gnb-wrp > .depth1 .dp2-bx{display: none; position: absolute; z-index: 1000;background-color: #fff; width: 100%; left:0; top:100%;}
/* 251014 min-height 주석 box-shadow추가  */
.gnb-wrp > .depth1 .dp2-bx > div{display: flex; align-items: stretch; /* min-height: 480px; */box-shadow: 0px 9px 10px -4px rgba(0, 0, 0, 0.3);}
.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;}





/* 251016 all menu css 수정  */
.all-menu-depth > li > .linkNwin {color: #0c2e86;font-size: 24px;font-weight: 600;background-position: 96% 9px;} 


/* 250711 구글 번역시 나오는 안내문 css */
#transTop {
  background: #4d4d4d;
  color: #fff;
  height: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  position: fixed;
    width: 100%;
  z-index: 9999;
}

/* 자바스크립트가 번역기를 감지해 클래스를 추가했을 때의 상태 S */

body.lang-en .header {
  top: 22px; 
  transition: top 0.3s ease;
}

body.lang-en {
  height: calc(100vh - 22px);
  /*overflow: hidden;*/
}
body.lang-en .m-container {padding-top: 100px}

/* 자바스크립트가 번역기를 감지해 클래스를 추가했을 때의 상태 E */

@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: 1080px) {

	.gnb-wrp > .depth1{font-size: 19px}
}

@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: 500px) {
	.h-logo .logo-pc{display: none;}
    .h-logo .logo-mob{display: block;}
}

@media (max-width: 480px) {
    

    .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;}
}

/* 251028 갤러리 css 추가 S */
.gallList{display: flex;flex-wrap: wrap;align-items: stretch;justify-content: flex-start;padding: 30px 0;border-top: 2px solid #222}
.gallList > li{width: calc(25%); margin:  0 0 40px 0;}
.gallList > li a{display: block;width: 100%;padding: 0 7px;}
/* 251028 height, padding-top 주석  */
.gallList > li a .pic{position: relative; display: block; width:100%; /* height:0; padding-top:77.5% */;overflow: hidden;margin: 0 0 10px 0 ;}
/* 251028 width 100% 뺴고 나머지 주석  */
.gallList > li a .pic img{/* position: absolute;width: 100%;top:50%;transform: translateY(-50%);min-height: 100%; */width: 100%;}
.gallList > li a strong{display: block;/* height: 36px; */color:#555555;line-height: 1.2;overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;border-top: 1px solid #818181;padding-top: 10px}
.gallList + .paging{margin-top: 0;}


@media screen and (max-width: 768px) {
    .gallList > li {
        width: 50%;
        margin-bottom: 20px;
    }
    #top-bar .row > ul {gap : 0;}
    .homelink {display: none;}
}

@media screen and (max-width: 480px) {
    .gallList > li {
        width: 100%;
    }
}

/* 251028 갤러리 css 추가 E */

/* 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 >a.linkNwin{background-image: url("../images/nWindow_ic2.png"); background-position: 96%}
   
   /* 251016 css 추가  */
   .all-menu-depth > li > .linkNwin {color: inherit !important;font-weight: 400 !important;font-size: inherit !important;}

    .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 > a.linkNwin {background-image: url("../images/nWindow_ic2.png");}
    .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;}

}



/* 260521 새로운테마 작업할 때 사용하는 신규 css S */

body {
  /* font-family: 'Malgun Gothic', '맑은 고딕', AppleGothic, sans-serif; */
  font-family: 'Pretendard';
  font-size: 14px;
  color: #222;
  background: #fff;
  line-height: 1.5;
  /* overflow: hidden; 원페이지형 — 스크롤 없음 */
}

a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ============================
   CSS Variables
============================ */
:root {
  --primary:       #1a3a6b;
  --primary-hover: #2d5aa0;
  --text:          #222;
  --text-sub:      #555;
  --text-muted:    #888;
  --border:        #ddd;
  --border-light:  #eee;
  --bg-light:      #f5f8ff;
  --bg-gray:       #f7f7f7;
  --white:         #fff;
  --content-width: 1200px;
  --top-h:         36px;
  --header-h:      60px;
  --shortcut-h:    68px;
  --footer-h:      56px;
  --snb-tab-h:     52px;
}

/* ============================
   Page Wrap — 전체 높이 컨테이너
============================ */
#page-wrap {
  height: 100dvh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  /* overflow: hidden; */
}

/* ============================
   ❶ Top Bar (36px)
============================ */
#top-bar {
  flex-shrink: 0;
  height: var(--top-h);
  background: var(--primary);
  color: rgba(255,255,255,.85);
  font-size: 14px;
  z-index: 200;
}
#top-bar .row {
  max-width: 1530px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.top-site-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #fff;
}
.top-site-name em { color: rgba(255,255,255,.4); font-style: normal; }
.top-home-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,.75);
  font-size: 14px;
  transition: color .2s;
}
.top-home-link:hover { color: #fff; }

#top-bar .ai-translate-panel {position: static;}
#top-bar .row > ul {display: flex;align-items: center; gap : 20px}

/* ============================
   ❽ Footer (간결)
============================ */
#footer {
  flex-shrink: 0;
  padding : 40px 0;
  background: var(--primary);
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
}
.footer-row {
  max-width: 1530px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.footer-logo { background: url("../images/ai_ft_logo.png") no-repeat left;height: 36px }

.footer-right {display: flex;flex-direction: column;gap:15px}

.footer-info { font-size: 14px; color: rgba(255,255,255,.55); margin-top: 10px; }
.footer-links { display: flex; gap: 14px; margin-top: 5px}
.footer-links a { font-size: 14px; color: rgba(255,255,255,.6); transition: color .2s; }
.footer-links a:hover { color: var(--white); }
.footer-links a.primary-link { color: rgba(199 201 106); font-weight: 600;text-decoration: underline; }
.footer-copy { font-size: 14px; color: rgba(255,255,255,.32); margin-top: 3px; }



/* ============================
   반응형 — 768px 이하
============================ */
@media (max-width: 768px) {
  body { overflow: auto; }
  #page-wrap { height: auto; min-height: 100dvh; overflow: visible; }

  #footer { height: auto; padding: 14px 0; }
  .footer-row { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 16px; }
  .footer-links { flex-wrap: wrap; gap: 10px; }


}



/* 260521 새로운테마 작업할 때 사용하는 신규 css E */

/* 번역기 실행될떄 추가되는 css  */
/* 기본 상태 */





/* 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;}