﻿#wrapper{overflow: hidden;}

.page_width{position:relative;width:1200px;max-width:100%;margin:0 auto}
/* .page_down_link_box{display:none} */
.page_top_menu{display:none}
.page_width12{max-width:1200px;margin:0 auto}
/* 헤더 */
.header-group{position:relative;background-color:#fff;background-repeat:no-repeat;background-size:cover}


/* === .header-background- + 코드값으로 상단 이미지 변경함 === */
/* header-background-home 은 나머지 기타 */
.header-group.header-background-product{background:url(/etc_img/otherpage/bg/070917507.jpg) no-repeat 50% 0%/cover}
.header-group.header-background-070917507{background:url(/etc_img/otherpage/bg/product.jpg) no-repeat 50% 0%/cover}
.header-group.header-background-070949482{background:url(/etc_img/otherpage/bg/070949482.jpg) no-repeat 50% 50%/cover}

.header-group.header-background-online{background:url(/etc_img/otherpage/bg/online.jpg) no-repeat 50% 50%/cover}
.header-group.header-background-090710802{background:url(/etc_img/otherpage/bg/090710802.jpg) no-repeat 50% 50%/cover}
.header-group.header-background-070949482{background:url(/etc_img/otherpage/bg/070949482.jpg) no-repeat 50% 50%/cover}
.header-group.header-background-community{background:url(/etc_img/otherpage/bg/community.jpg) no-repeat 50% 50%/cover}



.page_banner_bottom_in{padding-top:170px;height:480px;color:#fff;}
.page_banner_bottom_in>div>strong{display: block;font-size:3em;font-weight: bold;}
.page_banner_bottom_in>div>div{font-size:17px}


.header-top{position:absolute;z-index:200;width:100%;min-height:50px;padding:0;margin:0;text-align:center;border-bottom:1px solid rgba(255, 255, 255, 0.2);background:#0000003b;/*background:#003e82*/}
.header-top a{color:#fff}
.header-top:hover{}
.header-top:hover a{}
.header-top:hover .logo-image{background-image:url(/etc_img/logo/logo_off.svg);background-repeat: no-repeat;}

.header-top:hover .hamburger-button>span{background-color:#000}

.header-top.m9Fixed{position:fixed;top:0;left:0;width:100%;box-shadow:1px 1px 10px rgba(0,0,0,0.2);background:#fff}
.header-top.m9Fixed a{color:#000}

/* 로고 */
.logo-image{position:absolute;width:120px;height:70px;top:4px;left:0;background-image:url(/etc_img/logo/logo_off.svg);background-repeat: no-repeat;background-size:contain}
.header-top.m9Fixed .logo-image{background-image:url(/etc_img/logo/logo.svg);background-repeat: no-repeat;}
.mobile-logo-image{display:none}

/* 상단 메뉴 */
.page_up_link{width:1200px;max-width:100%;margin:0 auto;text-align:right}

.mong9menu{line-height:0;padding-right:140px}
.mong9menu>ul{display:inline-block;*display:inline;*zoom:1;margin:0}
.mong9menu>ul>li{position:relative;float:left;list-style-type:none}
.mong9menu>ul>li>a{position:relative;z-index:1;display:block;height:80px;line-height:80px;padding:0 30px;text-align:center;font-size:17px;letter-spacing:-0.75px;font-weight:500;-webkit-transition:font-size 0.4s;-moz-transition:font-size 0.4s;-o-transition:font-size 0.4s;-ms-transition:font-size 0.4s;transition:font-size 0.4s;text-decoration:none;font-family:'Montserrat','Noto Sans KR', sans-serif}
.mong9menu>ul>li>a::before{content:"";position:absolute;width:2px;height:2px;background:#fff;left:0;top:50%;margin-top:-1px;z-index:-1}
.mong9menu>ul>li>a::after{content:"";position:absolute;bottom:-1px;width:0;height:5px;background-color:#3099ec;left:50%;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s}
.mong9menu>ul>li:first-child>a::before{width:0}
.mong9menu>ul>li.on>.mong9menu-sub{display:block}
.mong9menu>ul>li>a:hover, .mong9menu>ul>li>a:focus, .mong9menu>ul>li.on>a, .mong9menu>ul>li.selected>a{}
.mong9menu>ul>li:hover>a::after, .mong9menu>ul>li>a:focus::after, .mong9menu>ul>li.on>a::after, .mong9menu>ul>li.selected>a::after{width:100%;left:0}
.mong9menu>ul>li>.mong9menu-sub{display:none;position:absolute;top:81px;left:0px;z-index:99;width:100%;text-align:left;background-color:#f5f5f5;line-height:1}
.mong9menu>ul>li>.mong9menu-sub>ul{padding:13px 0px}
.mong9menu>ul>li>.mong9menu-sub>ul>li{position:relative;padding:0;list-style-type:none}
.mong9menu>ul>li>.mong9menu-sub>ul>li>a{display:block;padding:15px 0;text-align:center;color:#000;font-size:15px;letter-spacing:-0.75px; 
-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s; word-break:keep-all;text-decoration:none;font-family:'Montserrat', 'Noto Sans KR', sans-serif}
.mong9menu>ul>li>.mong9menu-sub>ul>li>a:hover,.mong9menu>ul>li>.mong9menu-sub>ul>li>a:focus,.mong9menu>ul>li>.mong9menu-sub>ul>li.selected>a{color:#003e82}

.header-top.m9Fixed .mong9menu>ul>li>a::before{background:#fff}
.header-top.m9Fixed .mong9menu>ul>li.selected>a{}
.header-top.m9Fixed .mong9menu>ul>li.on>a{}

/* 모바일 */
.header-mobile{width:100%;min-height:60px;text-align:left;display:none}

/* Hamburger */
.hamburger-button{position:absolute;z-index:10;transition: .3s ease-in-out;width:29px;height:25px;display:block;top:18px;right:15px;text-align:left}
.hamburger-button>span{position:absolute;height:3px;border-radius:0;width:100%;background-color:#fff;top:0;transition:transform .2s ease-in-out, opacity .2s ease-in-out}
.hamburger-button>span:nth-child(1){top:0}
.hamburger-button>span:nth-child(2),.hamburger-button span:nth-child(3){top:9px}
.hamburger-button>span:nth-child(4){top:19px}
/* hamberger on 엑스표 모양으로 바뀜 */
.hamburger-button.on>span {background-color: #fff !important}
.hamburger-button.on>span:nth-child(1),.hamburger-button.on span:nth-child(4){opacity:0}
.hamburger-button.on>span:nth-child(2){transform: rotate(45deg)}
.hamburger-button.on>span:nth-child(3){transform: rotate(-45deg)}

.header-top.m9Fixed .hamburger-button>span{background-color:#000}
.header-top.m9Fixed .hamburger-button.on>span{background-color:#fff}

/* 1. Style the overlay & navigation. */
.overlay{position:fixed;z-index:9;background:#000;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transform:scale(0.5);transition:opacity .3s, visibility .3s, height .3s, transform .3s ;display:flex;align-items:center;justify-content:center;text-align:left}
.overlay.visible{opacity:1;visibility: visible;height: 100%;transform:scale(1)}

/* 현재위치 메뉴 */
.current-cate{font-size:15px;backgro1und:rgba(255,255,255,1);position:relative;border-b1ottom:1px solid #eee;font-size: 0}
.current-cate>div{position:relative;width:1200px;max-width:100%;margin:0 auto;top:-90px}
.current-cate-home{display:inline-block;*display:inline;*zoom:1;height:50px;line-height:50px;font-family:'axicon';color:#666;font-size:20px;padding:0 20px;vertical-align:bottom;bo1rder-right:1px solid #ccc;background:inherit}
.current-cate-home:before{content:'\e6c3'}
.current-root:before{content:'\e6c3 ~ '}
.current-cate-url{display:inline-block;*display:inline;*zoom:1}
.current-cate-url>li{display:inline-block;margin-right:-1px}
.current-cate-btn{position:relative;display:inline-block;*display:inline;*zoom:1;min-width:220px;height:50px;line-height:50px;padding:0 40px 0 10px;border-right:1px solid #eee;border-left:1px solid #eee;background:inherit;white-space:nowrap}
.current-cate-btn.current-empty{background:#f7f7f7}
.current-cate-btn::before{content:' ';position:absolute;top:0;bottom:0;right:0;width:30px;}
.current-cate-btn::after{content:'\e84e';position:absolute;right:10px;font-family:'axicon';-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
.current-cate-btn.on{background:#f5f5f5;color:#666}
.current-cate-btn.on::after{transform:rotate(180deg)}
.current-cate-btn:hover,.current-cate-btn:focus{background:rgba(255,255,255,0.7);color:#000}
.current-cate-url>li>dl>dd{position:relative}
.current-cate-sub{position:absolute;z-index:80;width:100%;display:none;margin-top:1px}
.current-cate-sub>ul>li{text-align: center;margin:0 20px;}
.current-cate-sub>ul>li>a{/* display:block; */*display:inline;*zoom:1;width:100%;height:50px;line-height:50px;padding: 10px 30px;margin-top:-1px;color:#fff;position:relative;z-index:1;white-space:nowrap;overflow:hidden;border-radius: 30px;font-size: 15px;background:#00000063}
.current-cate-sub>ul>li>a:hover,.current-cate-sub>ul>li>a:focus,.current-cate-sub>ul>li>a.active{background:#3099ec;color: #fff;}


/* 탭 메뉴 */
.page_tab_div{position:relative;z-index:199;padding-top:5px;margin-top:30px}
.page_tab_div>div{position:relative;width:1200px;max-width:100%;margin:0 auto;overflow:hidden;padding-bottom:10px;bac1kground:#f5f5f5}
.page_tab{position:relative;display:block;white-space:nowrap;text-align:left;background:#fff;border:1px solid #ddd;}
.page-tab-one{display:inline-block;*display:inline;*zoom:1}
.page_tab .slick-slide{display:inline-block;*display:inline;*zoom:1;padding:0}
.page-tab-one>a{display:inline-block;*display:inline;*zoom:1;min-width:150px;padding:15px;margin:0;border:1px solid #eee;border-top:none;border-bottom:none;margin-left:-1px;margin-top:-1px;text-align:center;font-weight:bold}
.page-tab-one>a.selected,.page-tab-one>a:hover,.page-tab-one>a:focus{position:relative;background:#62c2d0;color:#fff}
.page-tab-one>a.selected::before{content:'';position:absolute;left:0;bottom:-1px;z-index:1;width:100%;height:2px;background:inherit}

.page_tab_div.m9Fixed{position:fixed;top:77px;left:0;width:100%;background:#fff;margin-top:0}

/* goTop 가기 */
.goTop{position:fixed;right:0;bottom:50px;background:rgba(0,0,0,0.5);padding:10px;color:#fff;cursor:pointer;text-decoration:none;opacity:0;border-radius:5px;border:2px solid #fff;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.goTop.on{right:50px;opacity:1}

#container{}
#content{max-width:100%;margin:0 auto}
.page_main_in{min-height:500px}





.current-cate-home{display:none}
.current-cate-url>li:first-child{display:none}
.current-cate-url>li dt{display: none;}
.current-cate-url>li>dl>dd{position: static}
.current-cate-sub{display:block;text-align: center;}
.current-cate-sub>ul{/* display:table; *//* table-layout: fixed; *//* width:70%; */margin: 1em auto;display: block;}
.current-cate-sub>ul>li{display: inline-block;}
.current-cate-sub>ul>li>a{text-align: center;}


/* 하단 메뉴 */
.page_down_link{border:1px solid #ccc;border-right:none;border-left:none;background:#fff}
.page_down_menu{position:relative;width:1200px;max-width:100%;text-align:left;font-size:15px;margin:0 auto}
.page_down_menu>ul{display:inline-block;*display:inline;*zoom:1}
.page_down_menu>ul>li{display:inline-block;*display:inline;*zoom:1}
.page_down_menu>ul>li>a{display:inline-block;*display:inline;*zoom:1;padding:13px 20px;color:#333}
.page_down_menu>ul>li>a:hover,.page_down_menu>ul>li>a:focus,.page_down_menu>ul>li>a.selected{color:#04ab9c}
.page_down{background-c1olor:#5a5a5a;color:#fff}

/* 모바일 옆으로 보기로 취급 */
@media screen and (max-width:768px){

.header-group{bac1kground:#0069b7}

/* 로고 */
.logo-image{display:none}
.mobile-logo-image{position:absolute;width:80px;height:47px;top:4px;left:8px;display:block;background:url(/etc_img/logo/logo_off.svg) no-repeat;background-size:contain}
.header-top{position:relative;}
.header-top.m9Fixed .mobile-logo-image,.header-top:hover .mobile-logo-image{background-image:url(/etc_img/logo/logo.svg)}

.header-mobile{display:block}
.mong9menu{display:none}

/* goTop 가기 */
.goTop{padding:5px 10px;font-size:12px}
.goTop.on{right:2px;opacity:1}

/* 탭 메뉴 */
.page_tab_div{font-size:12px;margin-top:0}
/* .page_tab::before{content:'';position:absolute;z-index:10;top:0;left:0;width:15px;height:100%;background-image:-webkit-gradient(linear,left top,right top,from(#fff),to(rgba(14,202,104,0)))} */
/* .page_tab::after{content:'';position:absolute;z-index:10;top:0;right:0;width:15px;height:100%;background-image:-webkit-gradient(linear,right top,left top,from(#fff),to(rgba(0,191,95,0)))} */
.page-tab-one>a{min-width:auto;padding:10px 20px}
.page_tab_div.m9Fixed{position:fixed;top:60px}
    
.gnb{display:none}
.page_main_in{padding:0px;min-height:auto}


/* 현재위치 메뉴
.current-cate{font-size:12px;padding-top:0px;margin-top:0px}
    .current-cate-sub{position: static}
.current-cate>div{margin:0;top:0}
.current-cate-url{display:block}
.current-cate-url>li{width:100%}
.current-cate-home{display:none}
.current-cate-btn{width:100%;min-width:auto;height:40px;line-height:40px}
    .current-cate-sub>ul>li{display: inline-block;margin: 0 10px;}
.current-cate-sub>ul>li>a{height:40px;line-height:40px;background:#eee;color: #ffffff;box-shadow: 1px 1px 1px #cfcfcf;font-weight: 700;color: #666;} */
    
   /* 모바일(≤768px): 탭 → 브레드크럼+드롭다운 복원 */
@media (max-width: 768px) {

    .current-cate>div{top:0}
  /* 기본 컨테이너 리셋 */
  .current-cate {
    font-size: 15px;                /* 데스크탑에서 0으로 만든 것 복원 */
    background: rgba(255,255,255,1);
    border-bottom: 1px solid #eee;
  }

  /* 숨겼던 요소 다시 보이게 */
  .current-cate-home { display: inline-block; }
  .current-cate-url > li:first-child { display: inline-block; }
  .current-cate-url > li dt { display: inline; }

  /* 드롭다운을 위한 포지셔닝 복원 */
  .current-cate-url > li > dl > dd { position: relative; }

  /* 데스크탑 탭용 오버라이드 무효화 + 드롭다운 기본 숨김 */
  .current-cate-sub {
    position: absolute;
    z-index: 80;
    left: 0; right: 0;
    width: 100%;
    display: none;                  /* 클릭(on) 때만 보이도록 */
    margin-top: 1px;
    text-align: left; 
      width:100%;/* 데스크탑에서 center로 바꿨던 것 원복 */
  }

  /* 목록 레이아웃: 가로 탭 → 세로 리스트 */
  .current-cate-sub > ul {
    display: block;
    margin: 0;
    padding: 6px 0;
  }
  .current-cate-sub > ul > li {
    display: block;
    margin: 0;
    text-align: left;
  }
  .current-cate-sub > ul > li > a {
    display: block;                 /* 탭 너비 100% 클릭영역 확보 */
    width: 100%;
    height: auto;
    line-height: 1.4;
    padding: 12px 16px;
    margin-top: 0;
    color: #333;
    background: #fff;
    border-radius: 0;
    font-size: 12px;
  }

  /* 버튼 스타일: 모바일은 전체폭 + 화살표 위치 조정 */
  .current-cate-btn {
      font-size: 13px;
    min-width: auto;
    width: 100%;
    height: 48px;
    line-height: 48px;
    padding: 0 36px 0 12px;
    border-left: 0;
    border-right: 0;
    background: #f7f7f7;
    white-space: nowrap;
  }
  .current-cate-btn::after { right: 12px; }

  /* 클릭 시(on) 드롭다운 표시 */
  .current-cate-btn.on + .current-cate-sub { display: block; }

  /* 탭처럼 보이게 했던 데스크탑 전용 오버라이드 무효화 */
  .current-cate-sub > ul > li > a.active { background: #3099ec; color: #fff; } /* 활성 유지 */
}
 
    

}