@charset "UTF-8";

body{background:#fff;}
html, body, h1, h2, h3, h4, h5, h6, div, p, blockquote, pre, code, address, ul, ol, li, menu, nav, section, article, aside, dl, dt, dd, table, thead, tbody, tfoot, label, caption, th, td, form, fieldset, legend, hr, input, button, textarea, object, figure, figcaption {margin:0; padding:0;}
ul, ol, li {list-style:none;}
a {color:inherit; text-decoration:none; /*outline:none;*/}
input, button, select, fieldset, textarea {border-radius: 0; appearance: none; border: 0; font-family: inherit;}
input:focus, select:focus {outline: 0;}
button:focus, a:focus, button, a {outline: none;}
button:focus{outline:1px dashed #333;}
a:focus{outline:1px dashed #333;}
button:hover, a:hover{outline: 0px dashed #333;}
h1, h2, h3, h4, strong, th {font-weight:normal; font-family:inherit; color:inherit;}
em {font-style: normal;}
html, body {font-family: 'Noto Sans KR';}

body {min-height: 150vh; /*margin-top: 90px;*/ background-color: #fff;}
:root{
  --primary-color: #3f51b5;
    --secondary-color: #f5f5f5;
    --background-color: #1a1a2e;
    --blkk-color: #363636;
    --text-color: #e0e0e0;
}
.wrap {overflow-x: hidden;}
.layout {max-width: 1200px; margin: 0 auto;}
@media (max-width:1440px) {
  .layout {padding-left: 20px; padding-right: 20px;}
}
@media (max-width:1024px) {
  body {margin-top: 65px;}
}

		/* 상단 헤더 */


/*new header--------------------------------- */
header{background-color: transparent !important;}
/*header,[class*="GlobalHeader"]{background: transparent !important;}*/
/*
#dheader:before{
  content: '';
  display: block;
  width: 100%;
  background: transparent;
  position: absolute;
  top: 1px;
  max-width: 100%;
  border: 1px dashed #ff4400;
}*/
.content{width: 100%; padding: 150px 0} 
.inner{width: 1176px; margin: 0 auto;}
.inner::after{content: ''; clear: both; display: block;}
.wrap::after{content: ''; clear: both; display: block;}

.content .title{margin: 0 0 20px; font:bold 28px 'inherit'}
.content .txt{margin: 0 0 60px; font: 14px 'inheirt'}


@media screen and (max-width: 1200px){ 
    .inner{width: 100%;}
    .content{padding: 120px 40px} 
}
@media screen and (max-width: 980px){ 

}
@media screen and (max-width: 768px){ 
    .content{padding: 80px 40px}
    .content .title{font-size: 20px;}
}
@media screen and (max-width: 640px){ 
    .content{padding: 60px 20px}
}
@media screen and (max-width: 480px){ 
}


#dheader{width: 100%; background: transparent !important;border-bottom: 0px !important;/*height: 130px;*/}/*height 100px*/

#dheader .logo{float: left; padding-top: 30px;}
#dheader .logo a{display: block; font: bold 32px/40px 'inherit';}

#dheader .gnb_wrap{float: right; }

#dheader ul.gnb{width: 100%;}
#dheader .gnb>li{position: relative;float: left; width:19.4%; }/*width: 19.6%;max-width: 199px;margin-right: 10px;*/
#dheader .gnb>li:last-child{margin-right: 0px;}
#dheader .gnb>li>a{display: block; padding: 0 28px;/*font: 19px/34px 'inherit';*/ text-transform: capitalize;font-size: 18px;line-height: 25px;
  width: 200px;text-overflow: ellipsis;overflow: hidden;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-align: center;}/*padd 0 53px */

#dheader .gnb>li>.submenu{
    display: none;
    position: absolute; left: 50%; top: 47px; margin-left: -100px;
    width: 200px; padding: 10px 0; text-align: center; 
    background-color: rgba(0,0,0,0.8); 
    border-radius: 0 0 10px 10px;
    z-index: 5;
}/*top: 55*/
/*
#dheader .gnb>li>.submenu {
    display: none;
    position: absolute;
    left: 50%;
    top: 100px;
    z-index: 1;
    transform: translateX(-50%);
    width: 150px;
    padding: 20px 0;
    text-align: center;
}*/

#dheader .gnb>li:hover>.submenu{opacity: 1; visibility: visible;}
#dheader .gnb>li>.submenu>li{margin-right: 5px;padding: 4px 0;}
#dheader .gnb>li>.submenu>li>a{display: block; color: #fff; /*font: 14px/32px 'inherit';*/
  width: 196px;
  /*text-overflow: ellipsis;overflow: hidden;white-space: nowrap;*/
  text-overflow: ellipsis;overflow: hidden;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-align: center;
  font-size: 14px;line-height: 22px;}

#dheader .toggle{display: none;}

@media screen and (max-width: 980px) {

    /* mmm 980 이하 일 때만 클릭했을 때 하위메뉴가 보이도록 해야 함. */
    #dheader{position: fixed; left: 0; top: 0; height: 95px; padding: 0 40px;background: #fff !important;z-index: 5;border-bottom: 0 !important;}/*h 80px*/
    #dheader .logo{padding-top: 20px;margin: 0;}
    #dheader .logo a{font-size: 28px;}
    
    
    #dheader .gnb_wrap{position: fixed; left: -300px; top: 95px; width: 300px; height: 100%; background-color: #333; transition: 0.5s;z-index: 5;} /*h 80px*/
    #dheader .gnb_wrap.on{left: 0;}

    #dheader .gnb>li{width: 100%; border-bottom: 1px dotted #777;}
    #dheader .gnb>li>a{padding: 0 0 0 40px; line-height: 46px; color: #fff;text-align: left;}/*line-height 60*/
    #dheader .gnb>li>a:after{
      content: '';
      display: block;
      height: 12px;
      width: 12px;
      border-style: solid;
      border-color: white;
      border-width: 0px 1px 1px 0px;
      transform: rotate(45deg);
      transition: border-width 150ms ease-in-out;
      position: absolute;
      right: 23px;
      top: 18px;
    }

    #dheader .gnb>li>.submenu{
        position: static; width: 100%; padding: 0 0 0 50px; margin : 0px; 
        background-color: rgba(0,0,0,0); border-radius: 0; text-align: left;
       /* display: block;
        z-index: 5;*/
        
        /*max-height: 667px;*/
    }
    #dheader .gnb>li>.submenu>li>a{color: #ddd;width: 100%;text-align: left;}
    #dheader .gnb>li>.submenu>li>a::before{content: '─ ';}

    #dheader .toggle1{display: block;
        position: absolute; right: 77px; top: 20px;
        height: 40px; font: 32px/40px 'inherit';
        border: 0; background-color: transparent;
        width: 36px;
        border: 2px solid;
    }
    #dheader .toggle{

    display: block;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    position: absolute;
/*        position: relative;*/
    z-index: 5;
    border: 0px dashed #ff0000;
    right: 31px;
/*        right:-212px;*/
    top: 40px;
    }
    .hambuger {
    width: 100%;
    height: 3px;
    background: var(--blkk-color);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .hambuger::before {
    top: -10px;
  }
  .hambuger::before, .hambuger::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: var(--blkk-color);
    left: 0;
    transition: transform 0.3s ease;
  }
  .hambuger::after{
    top: 10px;
  }
  #dheader .toggle.open .hambuger {
        background: transparent;
    }
    #dheader .toggle.open .hambuger::before {
        transform: translateY(10px) rotate(45deg);
    }
    #dheader .toggle.open .hambuger::after {
        transform: translateY(-10px) rotate(-45deg);
    }
  .head_util{width: 100% !important;max-width: 408px !important;margin-right: 33px !important;color: #ff0000;}
}




#ftvisual{
    /*width: 100%; height: auto; background-color: mistyrose;z-index: -1;position: relative;*/
    /*800px ; 526px  h 100%*/
    width: 100%; height: auto; background:#fff;/*background-color: mistyrose;*/
}

@media screen and (max-width: 980px) {
    /* 헤더가 fixed 상태이기 때문에 visual 올라가게된다. 0 위치로
        fixed와 겹치는 만큼 내려준다.
     */
    #ftvisual{margin-top: 80px;}
}




/*new Header end -------------------------  --- --- */
    
/*search bar */
.form-inline{position: relative;z-index: 2;text-align: center;margin: 0 auto;max-width: 199px;align-items: center;margin-top: 61px;}
.pull-right{min-height: 19px;height: auto;}

.search-form {
  border-radius: 30px 0 0 30px;
}

.input-group {
  width:100%;
}

input-group-btn {
  max-width:38px;
}

#search {
  border: 1px;
}

.search-btn {
  cursor:pointer;
  border-radius: 0 30px 30px 0; 
  background-color:#fff;
  color:#669;
  
}
/*serchbar 2*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans);


.mdsearch {
  width: 100%;
  position: relative;
  display: flex;
  top: -1px;
}

.searchTerm {
  width: 100%;
  border: 3px solid #0387dc !important;
  border-right: none !important;
  padding: 10px 5px !important;
  /*height: 20px;*/
  /*height: 37px;*/
  border-radius: 21px 0 0 21px !important;
  outline: none;
  color: #000;
  min-height: 42px;
}

.searchTerm:focus{
  /* color: #0387dc; */
  /*border: 2px dashed #bbb;*/
  outline: 2px dashed #222;
  /*outline: 1px dashed #333;*/
}

.searchButton {
  width: 50px;
  /*height: 36px;*/
  border: 1px solid #0387dc;
  background: #0387dc; /*00b4cc*/
  text-align: center;
  color: #fff;
  border-radius: 0 20px 20px 0;
  cursor: pointer;
  font-size: 20px;
}

/*Resize the wrap to see the search bar change!*/
#ftvisual .scrhwrap{
  width: 30%;
  position: absolute;
  overflow: hidden;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -38%);
    /*margin-top:-910px; */
    /*-90px*/
padding-top:88px;
z-index: 1;
}
        
h2.scrtitle{width:130px;border-radius:21px 21px 0 0; 
  padding:5px 10px;background:#0387dc;color:#fff;font-size:12px;position:relative;text-align:center;left:50%;transform: translateX(-50%);z-index:99;background-size:130px 30px;margin-top: -1px;}

.acro_pic{background: url('../images/visu_acro_pic.png') no-repeat center;background-size: 488px 460px;width: 488px;height: 460px;position: absolute;left: 148px;top: 60px;z-index: 2;}

.text-center {
  color: #fff;
}

/*slider css*/
		.jssorl-009-spin img {
		animation-name: jssorl-009-spin;
		animation-duration: 1.6s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		}

		@keyframes jssorl-009-spin {
		from {
		transform: rotate(0deg);
		}

		to {
		transform: rotate(360deg);
		}
		}
		.jssorb031 {position:absolute;}
		.jssorb031 .i {position:absolute;cursor:pointer;}
		.jssorb031 .i .b {fill:#000;fill-opacity:0.5;stroke:#fff;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.3;}
		.jssorb031 .i:hover .b {fill:#fff;fill-opacity:.7;stroke:#000;stroke-opacity:.5;}
		.jssorb031 .iav .b {fill:#fff;stroke:#000;fill-opacity:1;}
		.jssorb031 .i.idn {opacity:.3;}
		.jssora051 {display:block;position:absolute;cursor:pointer;}
		.jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
		.jssora051:hover {opacity:.8;}
		.jssora051.jssora051dn {opacity:.5;}
		.jssora051.jssora051ds {opacity:.3;pointer-events:none;}

        ul.mdntclst{position:relative;}
        ul.mdntclst li{font-size:17px;color:#4f4f4f;padding:11px 0;font-weight:700;}
        ul.mdntclst li a{color:#444;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;width:81%;display:inline-block;font-weight:normal;}
        ul.mdntclst li span{font-size:13px;color:#888;position:absolute;/*left:69%*/right:10px;font-weight:normal;margin-top:3px;}
        span.moreb{display:inline-block;float:right;margin-top:-8px;cursor: pointer;}

        .daquickwrap{width: 80%;margin: 0 auto;padding: 20px 0;max-width: 892px}
        ul.daquiklst{width: 100%;}
        ul.daquiklst li{width: 25%;float: left;font-size: 14px;color: #000;height: 164px;align-items: center;justify-content: center;display: flex;}
        ul.daquiklst li a:hover{color: #0000ff;} 
        ul.daquiklst li.dan{display: flex;} 
        ul.daquiklst li a.daqk01:before{
          content: "";
          display: block;
          height: 72px;
          background: url('../images/mid_daqk01.png') no-repeat center 1px;
          background-size: 72px 72px;
            transition: transform 0.8s ease;
            transform-origin:center;
            inset:0;
        }
         ul.daquiklst li a.daqk01:hover:before{transform:rotateY(360deg);}
        
        ul.daquiklst li a.daqk02:before{
          content: "";
          display: block;
          height: 72px;
          background: url('../images/mid_daqk02.png') no-repeat center 1px;
          background-size: 72px 72px;
            transition: transform 0.8s ease;
            transform-origin:center;
            inset:0;
        }
        ul.daquiklst li a.daqk02:hover:before{transform:rotateY(360deg);}
        
        ul.daquiklst li a.daqk03:before{
          content: "";
          display: block;
          height: 72px;
          background: url('../images/mid_daqk03.png') no-repeat center 1px;
          background-size: 72px 72px;
            transition: transform 0.8s ease;
            transform-origin:center;
            inset:0;
        }
         ul.daquiklst li a.daqk03:hover:before{transform:rotateY(360deg);}
        
        ul.daquiklst li a.daqk04:before{
          content: "";
          display: block;
          height: 72px;
          background: url('../images/mid_daqk04.png') no-repeat center 1px;
          background-size: 72px 72px;
            transition: transform 0.8s ease;
            transform-origin:center;
            inset:0;
        }
         ul.daquiklst li a.daqk04:hover:before{transform:rotateY(360deg);}

        ul.daquiklst li a.daqk05:before{
          content: "";
          display: block;
          height: 72px;
          background: url('../images/mid_daqk05.png') no-repeat center 1px;
          background-size: 72px 72px;
            transition: transform 0.8s ease;
            transform-origin:center;
            inset:0;
        }
         ul.daquiklst li a.daqk05:hover:before{transform:rotateY(360deg);}
        
        ul.daquiklst li a.daqk06:before{
          content: "";
          display: block;
          height: 72px;
          background: url('../images/mid_daqk06.png') no-repeat center 1px;
          background-size: 72px 72px;
            transition: transform 0.8s ease;
            transform-origin:center;
            inset:0;
        }
         ul.daquiklst li a.daqk06:hover:before{transform:rotateY(360deg);}
        
        ul.daquiklst li a.daqk07:before{
          content: "";
          display: block;
          height: 72px;
          background: url('../images/mid_daqk07.png') no-repeat center 1px;
          background-size: 72px 72px;
            transition: transform 0.8s ease;
            transform-origin:center;
            inset:0;
        }
         ul.daquiklst li a.daqk07:hover:before{transform:rotateY(360deg);}
        
        ul.daquiklst li a.daqk08:before{
          content: "";
          display: block;
          height: 72px;
          background: url('../images/mid_daqk08.png') no-repeat center 1px;
          background-size: 72px 72px;
            transition: transform 0.8s ease;
            transform-origin:center;
            inset:0;
        }
         ul.daquiklst li a.daqk08:hover:before{transform:rotateY(360deg);}
        
        ul.daquiklst li a p{position: relative;top: 17px;color:#0066a7;}
        
        .divwrap{background:#fff;padding:52px 0;margin:0 auto;width:100%;position: relative;overflow: hidden;text-align: center;}
.product-slider button img{width:24px;}

        /*tab slider*/
        .tab-menu {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  list-style: none;
  padding: 0;
}
.tab-menu li {
  margin: 0 10px;
  padding: 8px 16px;
  background: #fff;
  border-radius: 20px;
  cursor: pointer;
    border:1px solid #383838;
  transition: 0.3s;
}
.tab-menu li.active {
  background: #357eb5;
  color: #fff;
    border:1px solid #357eb5;
}

.tab-content { display: none; }
.tab-content.active { display: block; }

.product-slider {
  position: relative;
  overflow: hidden;
  max-width: 1200px;
/*    max-width: 900px;*/
  margin: 0 auto;
}

.slider-track {
  display: flex;
  transition: transform 0.5s ease;
}

.product-item {
  min-width: 25%;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
}
        .product-item p{padding:12px 0;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;width:87%;display:inline-block;}

.product-item img {
  width: 100%;
/*  border-radius: 10px;*/
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  height: 380px;
    border:1px solid #d0d0d0;
}

button.prev,
button.next {
  position: absolute;
  top:38%;
/*  transform: translateY(-50%);*/
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  font-size: 22px;
  padding: 8px 8px;
  cursor: pointer;
  border-radius: 50%;
}
.prev { left: 10px; }
.next { right: 10px; }

        .bbg02{background:url('../images/mdept_bg.jpg') no-repeat center #edf7ff;}
.tab-slider-wrap{padding:20px 0;}
        .bg03{background:url('../images/btmm_bbg.jpg') no-repeat center left #f9f9f9;}        
        
        .btmm_slice{float:left;min-height:260px;}
        .btmm_slice dd{float:left;width:50%;margin-right:112px;}
        .btmm_slice dd:last-child{margin-right:0;}
        /*dd.btm_bn01{border-radius:50%;padding:24px;color:#fff;background:#808ddb;width:70px;height:70px;font-size:18px;line-height:30px;}*/
        dd.btm_bn01{border-radius:20px 0 20px 0;padding:24px 0px;color:#fff;background:#808ddb;width:118px;height:112px;font-size:18px;line-height:30px;aling-items:center;}
dd.btm_bn01 a{padding:0 20px ;text-overflow: ellipsis;overflow: hidden;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-align: center;}
        dd.btm_bn01 p{color:#888;font-size:12px;text-align: center;padding:10px 0;margin-top:34px;line-height:16px;width:118px;align-items:center;margin-left:-5px;}
        dd.btm_bn02{border-radius:20px 0 20px 0;padding:24px 0px;color:#fff;background:#52aec7;width:118px;height:112px;font-size:18px;line-height:30px;aling-items:center;}
dd.btm_bn02 a{padding:0 20px ;text-overflow: ellipsis;overflow: hidden;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-align: center;}
        dd.btm_bn02 p{color:#888;font-size:12px;text-align: center;padding:10px 0;margin-top:34px;line-height:16px;width:118px;align-items:center;margin-left:-5px;}
        dd.btm_bn03{border-radius:20px 0 20px 0;padding:24px 0px;color:#fff;background:#327db4;width:118px;height:112px;font-size:18px;line-height:30px;aling-items:center;}
dd.btm_bn03 a{padding:0 20px ;text-overflow: ellipsis;overflow: hidden;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-align: center;}
        dd.btm_bn03 p{color:#888;font-size:12px;text-align: center;padding:10px 0;margin-top:34px;line-height:16px;width:118px;align-items:center;margin-left:-5px;}
 
.footerwrap{color: #eee;}
.footerwrap ul.btmuselst{width: 100%;min-width: 1400px;}
.footerwrap ul.btmuselst li{float: left;width: 25%;padding: 10px 0;margin: 0 auto;text-align: center;border-bottom: 1px solid #bbb;}
.footerdiv{max-width: 1200px;width: 100%;padding: 30px 10px 50px 10px;margin: 0 auto;font-size: 13px;color: #cdcdcd;display: flex;}
.footerdiv p{float: right;}
 .btmsmenu{max-width:1000px;margin:0 auto;border:0px dashed #00ccff;padding:10px 0;}
        .btmsmenu dd{float:left;width:200px;padding:9px 10px 19px 10px;text-align:center;font-size:15px;color:#eee;}
        
/*
select.slter {
  width: 200px;
  padding: .8em .5em;
  font-family: inherit;
  background: url(https://farm1.staticflickr.com/379/19928272501_4ef877c265_t.jpg) no-repeat 95% 50%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #999;
  border-radius: 0px;
}

select.slter::-ms-expand {
  
  display: none;
}
*/
label.lbslter {
  position: relative;
  display: block;
  width: 200px;
  border: 1px solid #bbb;
  border-radius: 5px;
  background: #333;
  font-size: 13px;
/*  right: -461px;*/
/*    right:160px;*/
}

label.lbslter:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  display: block;
  width: 0;
  height: 0;
  margin: -2px 0 0 0;
  border: 5px solid transparent;
  border-top: 7px solid #bbb;
}

.lbslter select {
  cursor: pointer;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 200px;
  padding: 0.6em 1em;
  color: #bbb;
  border: none;
  border-radius: 5px;
  background: transparent;
}
.lbslter select option {color: #555;}

.lbslter select::-ms-expand {
  display: none;
}

.btnnLeft{width: 55px;height: 55px;background: transparent;}
.btnnLeft:focus{border: 1px dashed #0000ff;outline: 0px dashed #0000ff;}

.btnnRight{width: 55px;height: 55px;background: transparent;}
.btnnRight:focus{border: 1px dashed #0000ff;outline: 0px dashed #0000ff;}
        
       
        .footlog{max-width:1200px;width:100%;}
.footlog img{height: 38px;margin-right: 30px;}

        
.footer-distributed {
  background-color: #333333;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  font: normal 16px sans-serif;
  padding: 45px 50px;
}

.footer-distributed .footer-left p {
  color: #cdcdcd;
  font-size: 15px;
  margin: 0;
}
/* Footer links */

.footer-distributed p.footer-links {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin: 0 0 10px;
  padding: 0;
  transition: ease .25s;
}

.footer-distributed p.footer-links a {
  display: inline-block;
  line-height: 1.8;
  text-decoration: none;
  color: inherit;
  transition: ease .25s;
}

.footer-distributed .footer-links a:before {
  content: "·";
  font-size: 20px;
  left: 0;
  color: #fff;
  display: inline-block;
  padding-right: 5px;
}

.footer-distributed .footer-links .link-1:before {
  content: none;
}

        .footer-distributed .footer-left {
/*            margin-left:120px;*/
            padding-left:138px;
        }
.footer-distributed .footer-right {
  float: right;
  margin-top: 6px;
  max-width: 180px;
}

.footer-distributed .footer-right a {
  display: inline-block;
  width: 35px;
  height: 35px;
  background-color: #33383b;
  border-radius: 2px;
  font-size: 20px;
  color: #ffffff;
  text-align: center;
  line-height: 35px;
  margin-left: 3px;
  transition:all .25s;
}

.footer-distributed .footer-right a:hover{transform:scale(1.1); -webkit-transform:scale(1.1);}

.footer-distributed p.footer-links a:hover{text-decoration:underline;}

/* Media Queries */

@media (max-width: 600px) {
  .footer-distributed .footer-left, .footer-distributed .footer-right {
    text-align: center;
  }
  .footer-distributed .footer-right {
    float: none;
    margin: 0 auto 20px;
  }
  .footer-distributed .footer-left p.footer-links {
    line-height: 1.8;
  }
}
        
/*pc*/
@media (min-width:1025px ) {
#dheader .gnb_wrap{ margin-left: 185px;margin-top: -54px;}
    dd.btm_bn01 p{width:118px;text-overflow: ellipsis;overflow: hidden;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
    dd.btm_bn02 p{width:118px;text-overflow: ellipsis;overflow: hidden;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
    dd.btm_bn03 p{width:118px;text-overflow: ellipsis;overflow: hidden;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
}
/* 반응형 */
@media (max-width: 768px) {
  .product-item { min-width: 50%; }
}
@media (max-width: 480px) {
  .product-item { min-width: 100%; max-width:100%;}
}
 
.ntcewrap{background:#fff;margin:0 auto;width:100%;padding:52px 0px;position:relative;overflow:hidden;}
.ntcediv{max-width:1200px;margin:0 auto;width:100%;}


        .tasa-wrap{background:#eee;padding:20px 0;width:100%;margin:0 ;position:relative;overflow:hidden;}
        .tasa-wrap dd{float:left;width:200px;text-align:center;padding: 0 11px;}
        .tasa-wrap dd img{height:36px;border:0px solid #ddd;}
        .tasa-wrap dt{max-width:1200px;width:100%;margin:0 auto;}
        .footer-wrap{width:100%;background:#333;}
        .footer-menu{width:100%; border-bottom:0px solid #bbb;max-width:1000px;margin:0 auto;}
        .footer-menu ul{width:100%;}
        .footer-menu ul li{width:24%;color:#eee;font-size:15px;float:left;text-align:center;padding:15px 40px;margin:0 auto;align-items:center;justify-content: center;display: flex;}
        .footer-div{max-width:1200px;margin:0 auto;padding:36px 0;}
        .footer-left{max-width:560px;padding:5px 0;}
        .footer-left p{font-size:13px;color:#cdcdcd;}
        .footer-right{float:right;position:relative;top:-49px;}
        .footer-width{border-bottom:1px solid #646464;width:100%;position:relative;overflow:hidden;}
        #dheader .logo{background: url('../images/logo.png') no-repeat center;background-size:185px 49px ;width: 185px;height: 49px;cursor: pointer;}
        .head_util{color:#0d0d73;font-size:13px;padding:6px 10px;width:100%;text-align:right;max-width:1200px;margin:0 auto;}
        /*
        #dheader:hover{background: #eee;}
        #dheader{background: transparent !important;}
        */
/*slider css*/
/*
.slider1_container{visibility: hidden; position: relative; margin: 0 auto;top: 0px; left: 0px; width: 1300px; height: 396px; overflow: hidden;}
.jssorl-009-spin{position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);}
.jssorl-009-spin img{margin-top:-19px;position:relative;top:50%;width:38px;height:38px;}
.sld_centre{position: absolute; left: 0px; top: 0px; width: 1300px; height: 396px; overflow: hidden;}
.sld_centre h3{color:#fff;font-size:24px;text-align: center;z-index: 99;position: relative;align-items: center;justify-content: center;border-bottom:2px solid #fff;border-width:thin;max-width:220px;margin:0 auto;margin-top:101px;}
.sld_cent_img{}
.sld_cent_img img{margin-top: 88px;}
.jssorb031{position:absolute;bottom:12px;right:12px;}
.jssora051{width:55px;height:55px;top:0px;left:25px;}
.jssora051 svg{position:absolute;top:0;left:0;width:100%;height:100%;}
*/
h3.centretitle{color:#fff;font-size:27px;text-align: center;z-index: 99;position: relative;align-items: center;justify-content: center;
    
    /*max-width:220px;*/
    max-width:380px;
    margin:0 auto;
    margin-top:103px;
   /* -webkit-text-stroke-width: 1px;-webkit-text-stroke-color: black;*/
    font-weight:700;
text-shadow:3px 4px 5px #323232;/*#607d8b*/
line-height: 33px;
letter-spacing: -1px;
}
h3.centretitle:after{
  content: '';
  display: block;
  border-bottom:2px solid #fff;
    border-width:2px;/*thin*/
    /*width: 226px;*/
    width: 382px;
    margin-top: 9px;

}
.centrediv{}
.centrediv img{margin-top:88px;}

.ntcewrap .ntcboxed{width:47%;float:left;margin-right:20px;}
.ntcewrap h2.ntctitle{width:100%;border-bottom:1px solid #ececec;padding:17px 0;font-size:22px;}
.ntcewrap .newsboxed{width:47%;float:right;}

h2.mdletitle{font-size:34px;padding:6px 0;font-weight: 500;}
span.mdlespan{font-size:12px;color:#898989;}

.mgbt{margin-bottom:60px;}

.bttm_lefts{width:50%;float:left;}

.btmm_slice h3.etctitle{font-size:32px;font-weight:500;padding:10px 0 22px 0;}

.tasa_div{max-width:1200px;width:100%;position:relative;overflow:hidden;margin:0 auto;}
.sldrbox{position:relative;}


/*2nd slider */

.slide_list > li > div.sldtxt{font-size:14px;background:#fff;height:40px;position:relative;top:280px;}
.slide_list > li > div.sldtxt p{z-index:3;color:#343434;height:40px;line-height:40px}*/
/*
.con_scon {
    padding: 20px 0 70px 0;
}
@media only screen and (min-width:1200px)
.container {
    width: 1200px;
}
.container {
    padding: 0 0 0 0;
    margin-right:auto;
    margin-left:auto;
}*/


/*tabmenu*/

/*sssssssssssssssssssssssssssssssssssssssssss*/
.tabmenu-wrap .tab-con .con-box {
  display: block;
}
/*.tabmenu-wrap .tab-con .con-box {
  display: none;
}*/
/*
.tabmenu-wrap .tab-con .con-box2 {
  display: block;
}
.tabmenu-wrap .tab-con .con-box3 {
  display: block;
}
.tabmenu-wrap .tab-con .con-box4 {
  display: block;
}
.tabmenu-wrap .tab-con .con-box5 {
  display: block;
}
.tabmenu-wrap .tab-nav .nav a:first-child {

}*/
/*#tabcon-02,#tabcon-03,#tabcon-04,#tabcon-05{display:hidden;}*/
.bg_blacker{background:linear-gradient(90deg, #282a34, #707278);margin:0 auto;width:100%;height:248px;position:absolute;overflow:hidden;z-index:0;top:555px;left:0;}


/*%%%&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&*/
/* 탭메뉴 */
.dytab_wrap {max-width: 1200px;margin: 30px auto 0;padding: 0 15px;padding-top:2px;max-height:590px; }
.dytab_wrap .tit_list {position: relative;font-size: 0;padding-top:19px;text-align:center;}
.dytab_wrap .tit_list:before {content:'';position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;/*background: #ddd;*/z-index: 1;}
.dytab_wrap .tit_list > li {display: inline-block;vertical-align: top;margin-right: 25px;}
.dytab_wrap .tit_list > li a {display: inline-block;padding: 10px 15px;border: 1px solid #bbb;border-radius:24px;font-size: 20px;color: #555;text-decoration: none;background: #dedede;}
.dytab_wrap .tit_list > li a:hover {/*background: #efefef;border-color: #efefef;*/ border:1px solid #327db4;color: #fff;background: #327db4;border-radius: 24px;}
.dytab_wrap .tit_list > li.active a {position: relative;color: #fff;background: #327db4;border:1px solid #327db4;/*border-bottom:3px solid #9eca58;color: #9eca58;z-index: 2;*/}
.dytab_wrap .tab_con {border: 0px solid #ddd;border-top: none;margin-top:5px}
.dytab_wrap .tab_con .tab_list {display: none;padding: 2px 15px;margin: 0 auto;align-items: center;}

/* 슬라이드 */
.sliderprd {overflow: hidden;position: relative;max-width: 1200px;margin: 33px auto 0;padding:  0 0 0 1px;} /*padding:  0 0 0 18px;  0 0 0 6px*/
.sliderprd .inner {overflow: hidden;margin: 0 8px;/*max-width: 1130px;*/max-width: 1116px;}
.sliderprd {text-align: center;font-size: 0;}
/*.sliderprd .inner {overflow: hidden;margin:0 50px;}*/
/*.slide_list > li {width: 25%;max-width: 268px;height: 380px;text-align: center;background: #e2e2e2;font-size: 20px;line-height: 150px;color: #000;border: 1px solid #e3e3e3;cursor: pointer;}*/
.slide_list > li {width: 25%;/*height: 380px;*/text-align: center;background: #fff;font-size: 20px;line-height: 150px;color: #000;border: 1px solid #e3e3e3;cursor: pointer;min-height: 436px;height: 100%;}
.slide_list > li > a{position: relative;border: 0px solid #00ccff;width: 100%;height: auto;display: flex;}
.slide_list > li > a > img{max-width: 268px;height: 380px;/*background-size:100% 100% !important;*/border: 0px solid #e3e3e3;width: 100%;background-size:cover;}
.slide_list > li > a .sldtext{font-size:14px;background:#fefefe;position:absolute;padding: 14px 10px;bottom: -52px;width: 100%;}
.slide_list > li > a .sldtext p{z-index:3;color:#343434;width:95%; overflow:hidden;white-space:nowrap; text-overflow: ellipsis;text-align: center;}
/*.latestBox  ul li a   p       {float:left; width:80%; overflow:hidden;white-space:nowrap; text-overflow: ellipsis;}*/
.sldtxt{font-size:14px;background:#333;height:40px;position:absolute;padding: 14px 10px;z-index: 5;}
/* .slide_list > li > a:focus{outline:1px dashed #0000ff;outline-offset:-2px;height:100%;} */

.sliderprd .swiper-prev,
.sliderprd .swiper-next {
    position: absolute;
    top: 43%;
    width: 35px;
    height: 35px;
    background: url('../images/b_arrow.png') center center no-repeat;
    background-size: cover;
    text-indent: -999em;
    z-index:2;
    cursor:pointer;
}
.sliderprd .swiper-prev {left:0;transform: rotateY(180deg)translate(0,-50%);;}
.sliderprd .swiper-next {right:0;transform:translate(0,-50%);}

h5.mcroth5{font-size:19px;font-weight:bold;padding:3px 15px 0 15px;margin-top:72px}
div.mcromore{float:right;font-size:14px;margin-top:-18px;margin-right:20px;background:url('../images/icn_forward.png') no-repeat center right;background-size:16px 16px;padding-right:20px;}

/* mobile ver ==========================================================*/

@media all and (max-width:700px){


.dytab_wrap{max-width:100%;padding-top:2px;}
.dytab_wrap .tit_list{padding-top:3px;}
.dytab_wrap .tit_list > li{margin-right:0px;line-height:30px;display:inline;}
.dytab_wrap .tit_list > li:first-child{margin-right: 15px;}
.dytab_wrap .tit_list > li a{font-size:18px;padding: 10px 15px 10px;}
.dytab_wrap .tab_con{margin-top:5px}
.dytab_wrap{margin:36px auto 0;padding:0 2px;max-height: 372px;}
/*
.dytab_wrap .tit_list > li.active a {
    position: relative;
    border-bottom: 2px solid #9eca58;
    color: #070707;
    z-index: 2;
    background: #9eca58;
    width: 100%;
}*/
.dytab_wrap .tab_con .tab_list{padding:3px}

.sliderprd{max-width:100%;margin:12px auto 0;width: 100%;padding: 0px;}
.slder .inner{margin: 0 15px;max-width: 100%;}
.sliderprd .swiper-prev, .sliderprd .swiper-next{width:24px ; height:24px;top: 133px;}
.slide_list > li{height:280px;max-width: 100%;width: 100%;margin-right: 10px !important;}/*margin-right: 8px !important; height:210px*/
.slide_list > li > a > img{height: 280px;max-width: 200px;width: 100%;background-size:  cover;margin: 0 auto;}
.slide_list > li > a .sldtext{font-size:12px;width: 100% !important;text-align: center;}
.slide_list > li > a .sldtext p{widht: 100%;font-size: 13px;}

.btmm_slice dd{clear: both;float: none;}
.btmm_slice{width: 100%;}
dd.btm_bn01{width: 100px;height: 96px;font-size: 15px;}
dd.btm_bn02{width: 100px;height: 96px;font-size: 15px;}
dd.btm_bn03{width: 100px;height: 96px;font-size: 15px;}

.dytab_wrap .tit_list > li a{font-size: 17px;}
button:focus:not(:focus-visible){box-shadow: none !important;}

.acro_pic{left: 28px;top: -5px;width: 150px;height: 159px;background-size: 150px 150px;}
.custom-lang{width: 180px;left: -35px;top: 2px;}
}




/*mb middle ===*/
@media (max-width:560px) {
    h2.scrtitle{width:31%;}
    
}

@media (max-width:1038px) {
    h2.scrtitle{width:32%;}
    
    dd.btm_bn01 p{color: #eee;}
    dd.btm_bn02 p{color: #eee;}
    dd.btm_bn03 p{color: #eee;}
}

/*middle size 430 and 701 size width */
@media screen and (min-width:430px) and (max-width:701px) {
    ul.mdntclst li{font-size:15px;}
    ul.mdntclst li a{width:72%;}
    dd.btm_bn01 p{font-size:12px;margin-left:100px;color:#ddd;width:148px;margin-top:-58px;}
    dd.btm_bn02 p{font-size:12px;margin-left:100px;color:#ddd;width:148px;margin-top:-58px;}
    dd.btm_bn03 p{font-size:12px;margin-left:100px;color:#ddd;width:148px;margin-top:-58px;}
    .bg03{background-size:cover;}
    .btmm_slice dd{margin-left:30px;margin-bottom:6px;}
    .btmm_slice h3.etctitle{color:#fefefe;font-size:24px;}
    .ntcediv{max-width: 100%;}
    .ntcewrap .ntcboxed{width:100%;margin-right:0px;}
    .ntcewrap .newsboxed{width:100%;}
}

@media screen and (min-width: 499px) and (max-width: 699px) {
#ftvisual .scrhwrap{width: 51%;}

}

@media screen and (min-width: 701px) and (max-width: 1199px) {
.acro_pic{left: 46px;top: 8px;width: 200px;height: 212px;background-size: 200px 212px;}

}


/*new mobiles ========================================================*/

@media (max-width:420px) {
    
    body{padding:10px;}
    .centrediv img{width:100% !important;}
    .head_util{position:absolute;right:5px;}
    #dheader{box-shadow:3px 4px 5px #dedede;}
    #dheader .logo{margin-top:6px;}/*margin-top:30px*/
    h3.centretitle{font-size:40px;max-width:338px;}
    
    #ftvisual{margin-top:20px;background:#fefefe;height:auto;padding: 0 10px;top:-29px !important;}
    #ftvisual .scrhwrap{width:86%;top:105px;}/*top:24%;*/
    h2.scrtitle{width:29%;/*left:25%;display:none;width:27%;*/}
    
    .ntcewrap{margin-top:40px;}
    .ntcediv{max-width:100%;}
    
    .ntcewrap .ntcboxed{width:100%;margin-right:0px;}
    .ntcewrap .newsboxed{width:100%;}
    .ntcewrap h2.ntctitle{font-size:19px;padding:17px 0 12px 0;}
    span.moreb{margin-top:-5px;}
    .ntcewrap h2.ntctitle{font-size:19px;padding:17px 0 12px 0;}
    ul.mdntclst li{font-size: 15px;padding:7px 0;}
    ul.mdntclst li a{width:72%;}
    
    .divwrap{padding:38px 0;}
    h2.mdletitle{font-size:24px;}
    
    .daquickwrap{width:96%;padding:10px 0; max-width:100%;}
    ul.daquiklst li{width:50%;height:120px;}
    
    .btmm_slice h3.etctitle{font-size:24px;top:-20px;width:100%;position:relative;text-align:center;min-width:300px;overflow:hidden;color: #efefef;}/*margin-top:-50px;*/
    .bttm_lefts{width:100%;}
    .btmm_slice{margin:0 auto;text-align: center;align-items: center;position:relative;display:block /*flex;*/}
    
    dd.btm_bn01{width:82px;height:78px;font-size: 13px;align-items:center;line-height:22px;margin-bottom:5px;margin-left:5px;}
    dd.btm_bn02{width:82px;height:78px;font-size: 13px;align-items:center;line-height:22px;margin-bottom:5px;margin-left:5px;}
    dd.btm_bn03{width:82px;height:78px;font-size: 13px;align-items:center;line-height:22px;margin-bottom:5px;margin-left:5px;}
    dd.btm_bn01 p{color:#eee;font-size:13px;position:relative;top:-96px;left:130px;text-align: left;width:126px;}
    dd.btm_bn02 p{color:#eee;font-size:13px;position:relative;top:-96px;left:130px;text-align: left;width:126px;}
    dd.btm_bn03 p{color:#eee;font-size:13px;position:relative;top:-96px;left:130px;text-align: left;width:126px;}
    
    ul.daquiklst li a p{font-size:12px;}
    ul.daquiklst li a.daqk01:before{background-size:64px 64px;height: 64px;}
    ul.daquiklst li a.daqk02:before{background-size:64px 64px;height: 64px;}
    ul.daquiklst li a.daqk03:before{background-size:64px 64px;height: 64px;}
    ul.daquiklst li a.daqk04:before{background-size:64px 64px;height: 64px;}
    ul.daquiklst li a.daqk05:before{background-size:64px 64px;height: 64px;}
    ul.daquiklst li a.daqk06:before{background-size:64px 64px;height: 64px;}
    ul.daquiklst li a.daqk07:before{background-size:64px 64px;height: 64px;}
    ul.daquiklst li a.daqk08:before{background-size:64px 64px;height: 64px;}
    
    .tasa_div{max-width:100%;}
    .tasa_div dd{width:39%;}
    .tasa-wrap dd img{height:25px;}
    
    .footer-menu{max-width:100%;}
    .footer-menu ul li{width:42%;padding: 15px 10px;}
    .footer-menu ul li a{font-size: 13px;}
    .footer-div{max-width:100%;padding:20px 13px;}
    .footer-left{max-width:100%;}
    .footer-left p{font-size:12px;}
    .footer-right{top:3px;clear:both;float:none;}

    .lbslter{margin: 0 auto; font-size: 13px;}
    #slider1_container{margin-top: 88px !important;left: -10px !important;}

}


/*=== mobile end === */


#dheader .bg_gnb{
    display: none; position: absolute; left: 0; top: 124px; z-index: 2; 
    width: 100%; height: 280px; background-color: rgba(0,0,0,0.8);
}
#dheader .gnb>li>.submenu{
    border-radius: 0 !important;
    background-color:transparent !important ;

}
/*
#dheader:before{background: transparent;height:130px;
border-bottom: 1px solid #fefefe;
display: block;
content: '';
width: 100%;
}*/

#google_translate_element{position: absolute;top: 4px;}

    .goog-te-gadget img {
        vertical-align: middle;
        border: none;
        display: none;
    }
    
    #google_translate_element {
        background-color: transparent !important;
    }
    .VIpgJd-ZVi9od-xl07Ob-OEVmcd {
    z-index: 10000002;
    border: none;
    position: fixed;
    box-shadow: none !important; 
}
    #google_translate_element span[style*="border-left: 1px solid rgb(187, 187, 187);"] {
    display: none !important;
}
    /*.VIpgJd-ZVi9od-vH1Gmf-ibnC6b, .VIpgJd-ZVi9od-vH1Gmf-ibnC6b-gk6SMd{width: 170px;display: block;}*/
   
   /* #google_translate_element table td a{width: 170px !important;display: block;}
    .skiptranslate{position: absolute !important;border: 0px dashed #00ccff !important;width: 332px !important;}
*/
    @media (max-width: 488px) {
        .skiptranslate{position: fixed !important;}
    }

/*
  .other_links {float: right;margin-top: 8px;width: 245px}
.select_style {display:inline-block; vertical-align:middle; position:relative; text-align:left; width:100%}
.select_style .default  {overflow:hidden; background:url("/usr/images/common/select_style1.png") no-repeat 100% 1px}
.select_style .default a {color: #cbcbcb;font-size: 14px;display: block;padding: 8px 40px 7px 11px;border: 1px solid #d2d2d2;font-weight: 200}

.select_style .default a:active, .select_style .default a:focus{border:2px dashed #111;}

.select_style ul {position: absolute;bottom: 39px;left: 0;border: 1px solid #d2d2d2;background: #f1f1f1;width: 100%;display: none;overflow: hidden;overflow-y: auto;max-height: 279px;box-sizing: border-box;padding: 13px 0 14px}
.select_style.on {z-index:2;}
.select_style.on ul {display:block;}
.select_style ul li a {display: block;padding: 5px 20px 4px;font-size: 14px;color: #eee;}
.select_style ul li a:hover {color:#0000ff;}
.select_style ul li a:active, .select_style ul li a:focus{outline:2px dashed #111;color:#0000ff;outline-offset:-1px;}*/

/* 키보드로 버튼에 포커스 시 */
button:focus-visible {
  outline: 3px solid #000;
}

/* 마우스, 터치로 버튼에 포커스 시 */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}
.hidden{display: none;}
.goog-te-gadget-simple{border: 1px solid #bbb !important;border-radius: 14px;outline-style: solid;outline-width: thin;outline-color: #bbb;padding-right: 7px;}
.VIpgJd-ZVi9od-vH1Gmf{width: 320px !important;max-height: 202px;}
/*.VIpgJd-ZVi9od-vH1Gmf table tbody tr td a:nth-child(n+8){display: block;background: navy;color: #ff4400;}*/
.VIpgJd-ZVi9od-vH1Gmf-ibnC6b:nth-child(n+8){display: block;background: navy;color: #ff4400;}


/*ETC*/
/*마우스 호버 이벤트 제거 (단어 위에 마우스를 올리면 단어 번역창이 뜨는 것을 제거하는 방법) 
https://seokbong.tistory.com/190
  */
   #goog-gt-tt {
    display: none !important;
  }
  #goog-gt- {
    display: none !important;
  }
  .VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
    background-color: transparent !important;
    box-shadow: none !important;
  }

/* 🔹 원본 select 숨기기 */
.goog-te-combo {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/*m list select language Pack*/
/* 🔹 커스텀 드롭다운 컨테이너 */
.custom-translate {
  position: relative;
  display: inline-block;
  font-family: Arial, sans-serif;
  left: 2px;
  top: 8px;
}

/* 🔹 선택 버튼 */
.custom-translate .selected {
  padding: 6px 12px 6px 30px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  min-width: 160px;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
}

.custom-translate .selected:after {
 /* content: "▾";
  font-size: 14px;
  color: #555;*/
}

/* 🔹 언어 리스트 */
.custom-translate ul {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin: 0;
  padding: 5px 0;
  list-style: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  display: none;
  max-height: 250px;
  overflow-y: auto;
  z-index: 999;
}

/* 🔹 li 항목 */
.custom-translate ul li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

.custom-translate ul li:hover {
  background: #f5f5f5;
}

.custom-translate.active ul {
  display: block;
}


.custom-translate .selected:after{
content: '';
display: block;
position: absolute;
right: 12px;
top: 38%;
width: 8px;
height: 8px;

border-left: 2px solid #007bff;
border-bottom: 2px solid #007bff;
/*
transform: translateY(-50%) rotate(-45deg);*/
transform: rotate(-45deg);

}
.custom-translate .selected:before{
content: '';
display: block;
background: url('../images/icnn_earth.png') no-repeat center left;
background-size: 24px 24px;
width: 24px;
height: 24px;
position: absolute;
left: 3px;
}
/*m list select tool translate end. --------*/

.goog-te-gadget{text-indent: -999;font-size: 0px !important;}
.goog-te-gadget img{display: none;}
.goog-te-gadget span{display: none;}

/*FOCUS area ======================================== */
.focus-area :focus {
  outline: none;
}
.focus2-area :focus-visible {
	/*
	outline: 3px solid #0a84ff;     
  outline-offset: 3px;*/
  outline: 2px solid #0a84ff;       /* 고대비 색상 */
  outline-offset: -1px;
  border-radius: 4px;
  /* 필요하면 box-shadow를 추가해 softer ring 사용 가능 */
  box-shadow: 0 0 0 3px rgba(10,132,255,0.18);
  /* box-shadow: 0 0 0 3px rgba(128,128,128,0.4); */
}
.focus-area :focus-visible {
outline: 2px dashed #222;  
  outline-offset: -1px;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(198,198,198,0.4);
	
}


body:not .focus-area:focus{outline:none;}
#content:not .focus-area:focus{outline:none;}

#header :focus {
	outline: none;
}
#header :focus-visible {
	
 outline: 2px dashed #222;  
  outline-offset: -1px;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(198,198,198,0.4);
}


#footer :focus {
	outline: none;
}
#footer :focus-visible {
	
  outline: 2px dashed #222;  
  outline-offset: -1px;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(198,198,198,0.4);
}

#content :focus {
	outline: none;
}
#content :focus-visible {
	
  outline: 2px dashed #222;  
  outline-offset: -1px;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(198,198,198,0.4);
}
/*
#header .nav ul.gnb li:hover .sub{display:block;}
#header .nav ul.gnb li:focus-within .sub{display:block;}*/
/*
.has-sub:hover .sub{display:block;}
.has-sub:focus-within .sub{display:block;}
*/




/*vivvivivivivivi vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv*/

.hd_bg22222 {
    opacity: 0;
    visibility: hidden;
    transition: all .25s ease;
    height:0;
}
.hd_bg {
   position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
    z-index: 15;
}

#header.open .hd_bg {
    opacity: 1 !important;
    visibility: visible !important;
   /*  position: absolute;width: 100%;background: #fff;z-index: 1;transition: all .3s;border-top: 1px solid #dcdcdc;border-bottom: 1px solid #dcdcdc; */
}
.gnb {
    position: relative;
    z-index: 2; 
}
.sub {
    position: absolute;
    z-index: 2; /*3*/
    
    display:none;
}
/*
@media (max-width: 768px) { /* 예시 해상도 */
    .gnb.surya .sub {
        position: static; /* 모바일에서는 절대 위치 해제 */
        padding-left: 20px; /* 서브 메뉴 들여쓰기 */
    }
}
/*
.gnb.surya .sub{
	position:static;
}*/

/*
@media (max-width: 768px) {
    .nav {
        
        display: none; 
    }

    .gnb.surya {
       
        display: block; 
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 10;
    }
}
*/
/*
.hd_bg{opacity:0;visiblility:hidden;}
.hd_bg.open{display:block;visibility:visible;opacity:1}
*/
/*
ul.gnb > li:hover .sub,
ul.gnb > li:focus-within .sub{display:block;}

ul.gnb > li:hover ~ .hd_bg,
ul.gnb > li:focus-within ~ .hd_bg {height:333px;opacity:1;}


ul.gnb > li:focus-within .sub {
  display: block;
}*/

/*
ul.gnb > li:focus-within ~ .hd_bg {
  height: 200px;
  opacity: 1 !important;
  background:#444;
  border:2px dashed #ff0000 !important;
  display:block !important;
  z-index:17;
  visibility:visible !important;
}


.gnb a:focus {
  outline: 3px solid #0a66ff;
  outline-offset: 3px;
}*/


/*
.gnb .has-sub:hover ~ .hd_bg,
.gnb:hover ~ .hd_bg {
	opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.gnb:focus-within ~ .hd_bg,
.gnb .has-sub:focus-within ~ .hd_bg {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index:5;
  background:#ddd;
}
#header:focus-within + .hd_bg,
.gnb:focus-within + .hd_bg,
.has-sub:focus-within + .hd_bg {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
 
  background:#eee;
  width:100%;
  
*/

/*
.hd_bg{pointer-events:none; transition:25s ease;}
.hd_bg.on{opacity:1; visibility:visible; pointer-events:auto;}
*/
/* 
#header:focus-within .hd_bg {
	display:block ;
	opacity:1;
	visibility:visible;
	background:#efefef;
}

.has-sub .sub,
.has-sub .hd_bg {
	opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: all .25s ease;
}
.has-sub:hover .sub,
.has-sub:focus-within .sub,
.has-sub:hover .hd_bg,
.has-sub:focus-within .hd_bg {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
#header:hover .hd_bg:focus-within {
	opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background:#ff4400;
}
#header:hover:focus-within .open.hd_bg {
	opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background:#00ccff;
}
#header:hover.open:focus-within .hd_bg {
	opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background:#00ccff;
}

#header.open:hover:focus-within .hd_bg {
	opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background:#00ccff;
}

#header:focus-within.open .hd_bg {
	opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background:#888;
}
#header.open:focus-within .hd_bg {
	opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background:#888;
  z-index:10
} */

/*
#header:focus-within.open .hd_bg{position: absolute;width: 100%;background: #fff;z-index: 1;transition: all .3s;border-top: 1px solid #dcdcdc;border-bottom: 1px solid #dcdcdc;}
*/

/*
.gnb li:hover .sub {
	display:block;
}
.gnb li:focus-within .sub {
	display:block;
}
.gnb a:focus {
	outline: 2px solid #00ccff;
}*/

/*NNNMMMMNNNNMMMMMMM */
/* 열릴 때 */
  
  /*
  li.open > .sub,
  li:focus-within > .sub {
    opacity:1; transform: translateY(0) scaleY(1);
    pointer-events:auto;
  }
  .has-sub.open > .sub2,
  .has-sub:focus-within > .sub2 {
    opacity:1; transform: translateX(0);
    pointer-events:auto;
  }

  
  @media (hover: hover) and (pointer: fine) {
    li:hover > .sub{ opacity:1; transform: translateY(0) scaleY(1); pointer-events:auto; }
    .has-sub:hover > .sub2 { opacity:1; transform: translateX(0); pointer-events:auto; }
  }
  */
  

/* header */

.utilswrap{max-width:1200px;width:100%;margin:0 auto;}
.tpinfo{float: right;margin-right: 15px;position: relative;top: 14px;font-size: 13px;}
.tpinfo a{margin-left: 10px;}

header{width: 100%;height: 147px;position: absolute;left: 0;top: 0;z-index: 10;border-bottom: 1px solid rgba(255,255,255,0.3);background-color: rgba(0,0,0,0.0) !important;}
header .h_b{height: 48px;background-color: rgba(0,0,0,0.6);border-bottom: 1px solid rgba(255,255,255,0.3);}
header .h_w{max-width: 1200px;margin: 0 auto;}
header .h_w h1{position: absolute;top: 75px;display: inline-block;max-width: 205px;max-height: 50px;}
header .u_l{text-align: right;}
header .u_l > li{display: inline-block;vertical-align: middle;text-align: center;padding: 0 30px;font-size: 14px;color: #fff;}
header .u_l li a{color: #fff;}
header .u_l li.font{background: none;}
header .u_l li.sitemap{background: none;}
header .u_l li.search{background-image: none;width: 58px;height: 49px;background: #d01524 ;padding: 0;position: relative;}
header .u_l li.search a{display: block;width: 100%;height: 100%;}
header .u_l li.search .search-area{display: none;position: absolute;right: 0;top: 0;width: 536px;height: 49px;border: 4px solid #d01524;box-sizing: border-box;background-color: #fff;z-index: 1;}
header .u_l li.search .search-area input[type=text]{border: none;position: absolute;left: 0;top: 0;width: 412px;height: 40px;padding: 5px 20px;box-sizing: border-box;}
header .u_l li.search .search-area button[type=submit]{position: absolute;right: 58px;top: 0;width: 58px;height: 41px;background: #d01524;}
header .u_l li.search .search-area button[type=button]{border: none;position: absolute;right: 0;top: 0;width: 58px;height: 41px;background: #d01524 ;}
header .u_l li.search .search-area.on{display: block;}
header .u_l li.font .btn-fz{display: inline-block;margin-left: 8px;vertical-align: middle;}
header .u_l li.font .btn-fz a{display: inline-block;margin-left: 5px;text-indent: -9999px;width: 16px;height: 16px;background: url('') 0 0 no-repeat;}


#mblgnb{height: 98px}
#mblgnb .g_w{max-width: 1200px;height: 100%;margin: 0 auto;}
.st_g_l{font-size: 0;text-align: right;margin-top: -30px}/*-32px;*/
.st_g_l > li{display: inline-block;vertical-align: top;margin-left: 15px;margin-right: 15px;}
.st_g_l > li > a{display: inline-block;width: 100%;text-align: center;color:#fff;font-size: 19px;height: 98px;padding: 35px 0;box-sizing: border-box;width: 100%;
  min-width: 160px;position: relative;line-height: 25px;width: 160px;
  text-overflow: ellipsis;overflow: hidden;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-align: center;text-shadow: 3px 2px 4px #333;}
.st_g_l > li > ul{display: none;position: absolute;padding: 20px 0 0 0;z-index: 10;width: 100%;box-sizing: border-box;}
.st_g_l > li > ul > li{text-align: left;}
.st_g_l > li > ul > li > a{display: inline-block;box-sizing: border-box;padding: 10px 0;width: 100%;max-width: 160px;font-size: 16px;color: #5c5c5c;position: relative;text-align: center;margin-left: -3px;width: 160px;text-overflow: ellipsis;overflow: hidden;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-align: center;line-height: 18px;height: 49px;}

.gnbBg{display: none;position: absolute;top: 147px;left: 0;box-sizing: border-box;width: 100%;border-top: 1px solid #a7a7a7;background: #fff ;background-size: 100% 6px;}
header.on .st_g_l > li > a{color: #000;text-shadow: none;}
header.on #mblgnb{background-color: #fff;}
/*header.on .logosu img{background: url('../images/logo.png') no-repeat center;z-index: 5;}*/
/*.logosu img:hover{background: url('../images/logo.png') no-repeat center;z-index: 5;}*/

header.on .st_g_l > li.on a, header.on .st_g_l > li:hover a{color: #327db4;}
.st_g_l > li > a:after, .st_g_l > li > a:after{content: "";display: block;width: 0;height: 6px;position: absolute;bottom: -3px;left: 50%;transform:translateX(-50%);transition: 0.3s;background: linear-gradient(to right, #327db4 0%, #222 100%);}
.st_g_l > li.on > a:after, .st_g_l > li:hover > a:after{width: 100%;}
.st_g_l > li > ul > li.on > a, .st_g_l > li > ul > li > a:hover{font-weight: 500;padding-left: 0px;}
.st_g_l > li > ul > li.on > a:before, .st_g_l > li > ul > li > a:hover:before{content:"";display: block;width: 13px;height: 100%;background-position: 0 19px;position: absolute;left: 0;top: 0;}
.m-gnbTop{display: none;}
.m-menu{display: none;}
.m-search-area{display: none;}
.bbg{width: 100%;height: 100%;position: fixed;left: 0;top: 0;background-color: rgba(0,0,0,0.8);z-index: 1;display: none;}

.slider1_container{height: 550px !important;}
/*.slider-top{height: 560px !important;}*/
#ftvisual{position: relative;top: 124px;}
.centrediv img{margin-top: 238px;}
.h_b a{color: #ffffff;}
.stmap{color: #fff;font-size: 13px;/*margin-left: 10px;*/}
.logosu{position: relative;top: 41px;left: 11px;color: #fff}
.logosu img{margin-top: -18px}
.fntsrt{letter-spacing: -1px;}

@media (max-width: 1049px) {
header #sub{display: none;}
#mblgnb{display: none;}
header {border-bottom: 0px !important;}
.utilswrap{max-width: 100%;}
.tpinfo{font-size: 11px;margin-right: 2px;top: 9px;}
.stmap{display: none;}
.tpinfo a{margin-right: 5px;}
}

/* --- MOBILE : shown only on <= 960px ------------------------------------------- */

.main-header3 {
    background-color: #333;
    color: white;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 998px){
.menu-toggle-btn {
    background: none;
    border: none;
    color: #222;
    font-size: 24px;
    cursor: pointer;
    width: 22px;
    height: 22px;
position: relative;
}
.hamb-line{
box-sizing: border-box;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #444;
  transition: all 0.25s;
}
.hor {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}
.dia.p-1 {
  position: relative;
  box-sizing: border-box;
  float: left;
  transition: all 0.25s;
}
.dia.p-2 {
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
  transition: all 0.25s;
}
.mbtnwrap{position: relative;width: 30px;height: 30px;display: block;left: 12px;top: 22px;}
h1.hmlogo{font-size: 30px;text-align: center;top: -22px;position: relative;width: 200px;margin: 0 auto;}
/*.menu-toggle-btn img{width: 30px;position: relative;top: 20px;left: 10px;}*/
/*
.menu-toggle-btn:before{
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background: url('com/images/mbtn_list.png') no-repeat center center;
  background-size: 30px 30px;
  position: relative;
  top: 21px;
  left: 12px;
}*/
}
@media (min-width: 998px){

.menu-toggle-btn {display: none;}
h1.hmlogo{display: none;}
.main-content{display: none;}
.main-content p{display: none;}

dd.btm_bn01 p{line-height: 18px;height: 67px;}
dd.btm_bn02 p{line-height: 18px;height: 67px;}
dd.btm_bn03 p{line-height: 18px;height: 67px;}
dd.btm_bn02 a{letter-spacing: -1.5px;}
dd.btm_bn03 a{letter-spacing: 1.6px;}
}

/* 사이드 메뉴 컨테이너 스타일 */
#side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px; /* 메뉴 너비 설정 */
    height: 100%;
    background-color: #fff;
    box-shadow: 2px 0 10px rgba(0,0,0,0.3);
    /* 초기 위치: 화면 왼쪽 밖으로 이동 */
    transform: translateX(-100%); 
    transition: transform 0.3s ease; /* 슬라이드 애니메이션 */
    z-index: 1000;
    overflow-y: auto; /* 메뉴 내용이 길어지면 스크롤바 생성 */
}

#side-menu.active {
    transform: translateX(0); /* 활성화 시 화면 안으로 이동 */
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #f4f4f4;
    border-bottom: 1px solid #ddd;
}

.menu-header h2 {
    color: #333;
    font-size: 18px;
}

.menu-header .menu-toggle-btn {
    color: #333;
}

/* 1단 메뉴 스타일 */
.menu-item {
    border-bottom: 1px solid #eee;
    position: relative;
}

.menu-item > a {
    display: block;
    padding: 15px;
    color: #333;
    font-weight: bold;
}

/* 아코디언 토글 화살표 버튼 스타일 */
.accordion-toggle-arrow {
    position: absolute;
    right: 0;
    width:100%;
    top:1px;
    max-width:280px;
    height:53px;
/*    top: 0;*/
    padding: 15px;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.accordion-toggle-arrow:after {
    content:'';
        display:block;
    position: absolute;
right: 12px;
top: 19px;
width: 8px;
height: 8px;

border-left: 2px solid #336699;
border-bottom: 2px solid #336699;
/*
transform: translateY(-50%) rotate(-45deg);*/
transform: rotate(-45deg);
        
    }
/* 하위 메뉴 (2단) 스타일 */
.submenu-list {
    max-height: 0; /* 초기 높이 0으로 설정하여 숨김 */
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* 부드러운 애니메이션 */
    background-color: #fafafa;
}

.submenu-list li a {
    display: block;
    padding: 10px 15px 10px 30px; /* 들여쓰기 */
    color: #666;
    border-top: 1px solid #eee;
    font-size: 13px;
}

.submenu-list li a:hover {
    background-color: #f1f1f1;
}

/* JavaScript로 추가될 active 클래스 스타일 */
.menu-item.active .submenu-list {
    max-height: 500px; /* 활성화 시 충분한 높이 설정 (콘텐츠 길이에 따라 조절) */
}

.menu-item.active .accordion-toggle-arrow:after {
    transform: rotate(135deg); /* 활성화 시 화살표 회전 */
}

/* 오버레이 스타일 (메뉴 열렸을 때 배경 어둡게) */
#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none; /* 초기 숨김 */
    z-index: 999;
}

#menu-overlay.active {
    display: block;
}

    
    
/* --- MOBILE : shown only on end. ------------------------------------------------*/


/*language toggles*/
/* 토글 버튼 */
.lang-toggle {
  background: #fefefe;
  color: #373f67;
  padding: 8px 10px;
  border: 1px solid #333;
  cursor: pointer;
  border-radius: 6px;
    width:180px;
    margin-top: -5px;
    font-size: 14px;
}

/* 팝업 영역 */
.lang-popup {
  display: none;
  position: absolute;
  top: 41px;
  left: 50%;
  transform: translateX(-50%);
  width: 1188px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  padding: 20px;
  border-radius: 10px;
  z-index: 999;
}
@media (max-width: 622px) {
  .lang-popup{width: 100%;
  padding: 10px;font-size: 13px;min-width:343px;
  overflow-y:scroll;height:620px;
  top:32px;left:0%;transform: translateX(0%);
  }
}

/* 언어 리스트 */
.lang-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 10px;
}

.lang-item {
  background: #f3f3f3;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.2s;
    align-items:center;
    justify-content: center;
    display: flex;
    
}

.lang-item:hover {
  background: #0078ff;
  color: #fff;
}
    
.lang-toggle:after{
content: '';
display: block;
position: absolute;
/*right: 12px;*/
top: 17px;
width: 8px;
height: 8px;
margin-left:148px;
border-left: 2px solid #007bff;
border-bottom: 2px solid #007bff;
/*
transform: translateY(-50%) rotate(-45deg);*/
transform: rotate(-45deg);

}
.lang-toggle:before{
content: '';
display: block;
background: url('../images/icnn_earth.png') no-repeat center -3px;
background-size: 24px 24px;
width: 24px;
height: 24px;
position: absolute;
/*left: 3px;*/
}


/* Google 숨김영역 */
#google_translate_element {
  display: none;
}
/*language toggles End.*/

#ftvisual{top: -2px ;} /* 48px;*/
/*Header 3 new css ========================*/
 :root{
    --header-height: 64px;
    --nav-bg: #ffffff;
    --accent: #0b79d0;
    --text: #111;
    --submenu-height: 200px; /* 서브메뉴 최대 높이 (스크롤 처리) */
    --breakpoint: 768px;
  }
/*@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
html,body{ font-family: 'Noto Sans KR', sans-serif;}
body{
    background:#fff;
    margin: 0;
    padding: 0;}
a{color: inherit;text-decoration: none;}*/
.tpcontainer{max-width: 1200px;width: calc(100% - 40px);margin: 29px auto;}
#header {
/*    background: linear-gradient(45deg,#41fc03, #0362fc); grenn and Blue*/
    background: linear-gradient(180deg,#000,#03060f);
    margin: 0;
    border-bottom:0px solid #eee;height: 128px;position:relative;}
#header .logo{font-size: 25px;box-sizing: border-box;}
#header .tpcontainer{display: flex;justify-content: space-between;align-items: center;}
#header .gnb{text-align: right;}
/*#header .nav .logo{display:flex;width:200px;flex-wrap:wrap;justify-content: center;align-items: center;text-transform:uppercase;cursor:pointer;}*/
    
    #header .nav .logo{display:flex;width:185px;height:49px;flex-wrap:wrap;justify-content: center;align-items: center;text-transform:uppercase;cursor:pointer;order:0;position:relative;}
    .logo img{display:block;width:185px;height:49px;transition: opacity .18s ease, transform .18s ease;}
    
    
    


    
#header .menu_btn{position:absolute;right:20px;top:20px;display:none;}
#header .menu_btn div { width: 25px;height: 2px;background-color:#eee;margin: 6px 0px;position: relative;transition:all .8s ease;}
#header .menu_btn.lijo div{position:absolute;transition:all .8s ease;}
#header .menu_btn.lijo div:nth-child(1){transform: rotate(45deg);top: 7px;right: 0px;}
#header .menu_btn.lijo div:nth-child(2){width:0px;top: 7px;right: 0px;}
#header .menu_btn.lijo div:nth-child(3){transform: rotate(-45deg);top: 7px; right: 0px;}
#header .nav ul.gnb{margin-bottom:0px;padding-left:0px;display: flex;}
#header .nav ul.gnb li{margin-bottom:0px;color:#000;text-align: center;position: relative;width:192px;padding:10px 0;}
#header .nav ul.gnb li a {box-sizing: border-box;display:block;transition:.8s ease;text-transform:uppercase; transition: color 1s;color:#fff;}
#header .nav ul.gnb > li > a {
  padding: 21px 7px;
min-width: 192px;position: relative;line-height: 24px;width: 192px;
  text-overflow: ellipsis;overflow: hidden;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
  text-align: center;/*text-shadow: 3px 2px 4px #333;*/
} /*padding: 20px 40px;*/
#header .nav ul.gnb li ul.sub{position:absolute;padding-left:0px;opacity:0;visibility: hidden;/* display: none; */padding-top:10px;z-index: 3;width: 100%}
#header .nav ul.gnb li ul.sub li {display: block;position: relative;padding:2px 0;}
#header .nav ul.gnb li ul.sub li a{padding:10px;
width: 190px;text-overflow: ellipsis;overflow: hidden;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-align: center;
  font-size: 14px;line-height: 19px;
}
    #header .hdutil{width:100%;padding:10px 0;max-width:1200px;margin:0 auto;position:relative;text-align:right;}
    #header .hdutil dd{float:left;font-size:13px;padding:0 6px;}
    #header .hdutil dd a{color:#fff;}
    #header .hdutil dd span{color:#fff;}
    /*
    .logo img{
         position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    transition:opacity .18s ease, transform .18s ease;
    pointer-events:none;
    }
    .logo img.white { opacity:1; transform:translateY(0); }
  .logo img.black { opacity:0; transform:translateY(6px); }
    
    #header.submenu-active .logo img.white { opacity:0; transform:translateY(-6px); }
  #header.submenu-active .logo img.black { opacity:1; transform:translateY(0); }*/

/*desktop & PC platform */
@media(min-width:1024px){
    #header .nav ul.gnb:hover li ul.sub{visibility:visible;opacity:1;transform:translateY(0px);} 
    #header .nav ul.gnb li:hover{display:inline-block;margin-bottom:0px;}
    #header.open .hd_bg{position: absolute;width: 100%;background: #fff;z-index: 1;transition: all .3s;border-top: 1px solid #dcdcdc;border-bottom: 1px solid #dcdcdc;}
    #header .nav ul.gnb li ul.sub li a{text-align: center;height: 46px;}
    #header .nav .active  {position: relative}
    #header .nav .active:hover:after{content: '';display: block;width: 100%;height: 2px;background: #000;position: absolute;left: 0;bottom: 0}
    #header .nav ul.gnb li ul.sub{display: block !important}
    
/*    #header .nav .logo:hover{color:#fff;}*/
    #header:hover{background:#fff !important;}
    #header:hover .nav ul.gnb li a{color:#111;font-weight:700;}
    #header:hover .nav ul.gnb li ul.sub li a{color:#111;font-size:14px;font-weight:500;}
    
    #header:hover .hdutil dd a{color:#333;}
    #header:hover .hdutil dd span{color:#333;}
/*    #header .nav ul.gnb li a:hover{color:#fff;}*/
    
    .tpleft{float:left;}
    .tpright{float:right;}
    #header:hover .logo img{opacity: 0;}
    .logo{position:relative;display: inline-block;top: -6px;}
    .logo::after{
        content:"";
          position:absolute;
          inset:0;
          background-image: url('../images/logo.png');
          background-size:contain;
          background-repeat:no-repeat;
          background-position:center;
          opacity:0;
          transition: opacity .18s ease;
          pointer-events:none;
        
    }
    
    #header:hover .logo::after{
        opacity:1;
    }
    #header .nav{margin-top: -8px;}
    .sldrbox{min-height: 50px;}
    
    #header:hover dd a.tgongmo{color:#0000ff !important;}
    
    /* === &&& ===*/
#header .nav ul.gnb:focus-within li ul.sub {
	display:block ;
	opacity:1;
	visibility:visible;
	
}
#header .nav ul.gnb:hover li ul.sub{
	display:block ;
	opacity:1;
	visibility:visible; 
	
}
}

   /*mb header === */
@media(max-width:1024px){
   #header{position: relative;position: fixed;width: 100%;top: 0;left: 0;padding: 20px 0}
   #header .menu_btn{display:block;top:75%;transform: translateY(-75%);}
    #header .menu_btn.lijo{top: 58%;}
   #header .nav ul.gnb{position: absolute;top: 127px;transform: translateX(100%);left: 0;transition:.8s ease;width:100%; height: calc(100vh - 65px);background: #fff;overflow-y: auto;display: block}
   #header .nav ul.gnb li a{text-align: left !important;color:#222;width: 100% !important;}
    #header .nav ul.gnb > li > a{padding: 10px 20px;}
   #header .nav ul.gnb.surya {transform: translateX(0%);}
   #header .nav ul.gnb li ul.sub{opacity: 1;visibility: visible;display:none;position:relative;padding-top:0px;width:100%;transition:0s;transform: translateY(0px);padding: 0 20px}
   #header .nav ul.gnb li ul.sub:after{display:none;}
   .hd_bg{display: none !important;}
    
    #header .logo{top:-21px;width:150px;}
    .tpright{position:relative;top:-12px;}
    .tpleft{position:relative;top:-12px;}
    .logo img{width: 150px;height: auto;}
    #header .nav ul.gnb li{padding: 0px 0;width: 100%;border-bottom: 1px solid #ddd;}

  #header .nav ul.gnb li:after{
     content: '';
      display: block;
      height: 12px;
      width: 12px;
      border-style: solid;
      border-color: #222;
      border-width: 0px 1px 1px 0px;
      transform: rotate(45deg);
      transition: border-width 150ms ease-in-out;
      position: absolute;
      right: 17px;
      top: 14px;
      z-index: 1;
  }
   #header .nav ul.gnb li ul.sub li:after{height: 0;width: 0;border-style: none;} 
   #header .nav ul.gnb li ul.sub li{border-bottom: 0px;background: #fefefe;font-size: 13px;}
   #header .nav ul.gnb li ul.sub li:before{
      display: inline-block;
      position: absolute;
      left: 0;
      top: 20px;
      content: '';
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background-color: #777;

   }
   #header .nav ul.gnb li ul.sub li:first-child{border-top: 1px solid #eee;/*box-shadow: 3px 0px 0px 0px rgba(0,0,0,0.16);*/}
   #header .hdutil dd{font-size: 12px;padding: 0 4px;} 
   .lang-toggle:after{top: 7px;right:8px;}
   
   #title{margin-top:64px;}
   #titleNotice{margin-top:64px;}
    #titleMdata{margin-top:64px;}
    #titleDbfile{margin-top:64px;}
  
     
}
@media (max-width:604px) {
	.tpleft{top:-20px;float:left;}
	.tpright{clear:both;float:right !important;} /*float:left !important;*/
	#header .hdutil{max-width:100%;}
	#header .hdutil dd{font-size:11px;}
	.logo img{
	left:50%;
	position:absolute;
	top:50%;
	transform:translate(-50%);
	margin: 0 auto;
	margin-top:11px;
	}
	.lang-toggle{font-size:13px;width:168px;}
	#header:hover dd a.tgongmo{color:#00ccff !important;}
}

@media screen and (min-width: 1024px) and (max-width: 1175px) {
  .logo img{width: 160px;height: auto;}
}

.btnClosed{
    position: relative;
    right: 10px;
    top: -9px;
    padding: 5px;
    width: 64px;
    height: 24px;
    font-size: 12px;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #dfdfdf;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* #lbselt:focus{border: 0px dashed #efefef;outline: 1px dashed #fefefe;outline-offset:-2px;} */
.tpright dd a.tgongmo{color:#00ccff !important;}
.tpright dd a.tlogout{color:#ff4400 !important;}
/* .tpright dd a:hover.tgongmo{color:#0000ff !important;} */


/*slide wrap new 1113 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 탭 영역 */
  .tab-wrap {
    text-align: center;
    margin: 30px 0;
  }
  .tab-btn {
    display: inline-block;
    margin: 0 10px;
    padding: 10px 25px;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 24px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s;
  }
  .tab-btn.active {
    background: #327db4;
    color: #fff;
    border-color: #327db4;
  }

  /* 슬라이더 전체 컨테이너 */
  .slider-section {
    position: relative;
    max-width: 1200px;
    margin: 0 auto 30px;/*0 auto 80px*/
    padding: 0 60px; /* 버튼 공간 확보 */
  }

  /* Swiper 슬라이더 */
  .swiper {
    width: 100%;
    overflow:hidden; /*NNN*/
    
    position:relative;
    min-width:1116px;
    display:flex;
    left:50%;
    transform:translateX(-50%);
  }

  .swiper-wrapper {
    align-items: stretch;
  }

  .swiper-slide {
    text-align: center;
    /*border: 0px solid #eaeaea;*/
    border-radius: 0px;
    background: #fff;
    /*padding: 10px;*/
    transition: transform 0.3s;
    height: 100%;

    width: 270px;
    min-width: 270px;
    border: 1px solid #e5e5e5;
    min-height:430px;

  }
  .swiper-slide a{
  min-width:100%;
  min-height:100%;
  border:0px dashed #ff4400;
  display:block;
  }
/*
  .swiper-slide:focus {
    outline: 1px solid #007bff;
   
    transform: scale(0.99);
    outline-offset: -2px;
    position: relative;
  }
  */
/*
.swiper-slide a{
	position:relative;
	width:100%;
	height:auto;
	display:flex;
}*/
.swiper-slide333 a:focus {
    outline: 2px solid #007bff;
    /* transform: scale(1.02); */
    transform: scale(0.99);
    outline-offset: -2px;
    position: relative;
  }
  .swiper-slide a img{
  width:100%;
  max-width:268px;
  height:380px;
  object-fit:contain;
  }
  
  .product-img {
    width: 100%;
    border-radius: 0px;
    height:380px;
    max-height:380px;
  }

  .product-name {
    font-size: 16px;
    margin: 10px 5px;
    
    width:96%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    text-align:center;
    height:38px;
    position:relative;
    top:5px
  }

  .product-price {
    font-weight: bold;
    color: #e60023;
  }

  /* Swiper 버튼 스타일 */
  .swiper-button-prev,
  .swiper-button-next {
    color: #333;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }
  .swiper-button-prev {
    left: 0;
    transform: translate(-50%, -50%);
  }
  .swiper-button-next {
    right: 0;
    transform: translate(50%, -50%);
  }
  .swiper-button-prev:hover,
  .swiper-button-next:hover {
    background: #bbb;
    color: #fff;
  }
  .swiper-button-prev:before{
  content: " ";
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    cursor: pointer;
    display: block;
    position:absolute;
    left:15px;
    top:13px;
  }
  .swiper-button-next:before {
    content: " ";
    border-right: 2px solid #000;
    border-top: 2px solid #000;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    cursor: pointer;
    display: block;
    position:absolute;
    top:13px;
    right:15px;
}
  
  
  
  /*NN https://codepen.io/codefactory/pen/AeJzNX*/
  .nav-arrows a:first-child {
    left: auto;
    right: 2px;
    background-position: top right;
}
  .nav-arrows a {
    width: 42px;
    height: 42px;
    background: #cbbfae url(https://tympanus.net/Development/Slicebox/images/nav.png) no-repeat top left;
    position: absolute;
    top: 50%;
    left: 2px;
    text-indent: -9000px;
    cursor: pointer;
    margin-top: -21px;
    opacity: 0.9;
    border-radius: 50%;
    box-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

  /* 반응형 */
  @media (max-width: 1024px) {
    .slider-section { padding: 0 40px; }
  }
  @media (max-width: 768px) {
    .slider-section { padding: 0 30px;max-width:100%; }
    .swiper-button-prev,
    .swiper-button-next {
      width: 35px;
      height: 35px;
      /* margin-left:20px; */
    }
    .swiper-button-prev{margin-left:20px;z-index:5 !important;}
    .swiper-button-next{margin-right:20px;z-index:5 !important;}
    
    .swiper-button-prev:before{width:15px;height:15px;top:11px;}
    .swiper-button-next:before{width:15px;height:15px;top:11px;}

    .swiper-slide333 {width: 100% !important;max-width: 100% !important;margin: 0 auto;align-items: center;
      left: 50%;transform: translateX(-50%) !important;position: relative;margin-left: 0px;margin-right: 18px !important;
      overflow:hidden;display:flex;justify-content:center;
      }
      
    .swiper-slide {max-width: 100% !important;margin: 0 auto;align-items: center;
      left: 50%;transform: translateX(-50%) !important;position: relative;
      overflow:hidden;display:block;justify-content:center;
      min-width:270px;
      min-height:300px;
      }
      
    .product-img{
    width: 100% !important;
    height:100% !important;
    top:0;
    left:0;
    position:absolute;
    object-fit:contain;
    }
    .product-name{position:relative;bottom:-189px;min-width:268px;width:90%;font-size:14px;}
    
    .swiper{min-width:100%;}
  }