/* FONT */
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

.font_leferipointblack {font-family:'LeferiPoint-WhiteA'}
@font-face {
    font-family: 'LeferiPoint-BlackA';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-BlackA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.font_leferipointspecial {font-family:'LeferiPoint-SpecialA'}
@font-face {
    font-family: 'LeferiPoint-SpecialA';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-SpecialA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.font_leferipointspecialitalic {font-family:'LeferiPoint-SpecialItalicA'}
@font-face {
    font-family: 'LeferiPoint-SpecialItalicA';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-SpecialItalicA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.font_leferipointoblique {font-family:'LeferiPoint-WhiteObliqueA'}
@font-face {
    font-family: 'LeferiPoint-WhiteObliqueA';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-WhiteObliqueA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/********************************************* header *********************************************/
header .wrapper {padding:0 5%;margin:0 auto;position:relative}
header .nav .nav-icon {display:none}
header .nav .nav-icon:after, header .nav .nav-icon:before, header .nav .nav-icon div {background-color:#000;content:"";display:block;height:2px;margin:4px 0;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}
header .down .nav .nav-icon:after, header .down .nav .nav-icon:before, header .down .nav .nav-icon div {background-color:#1a1a1a}
header .nav .nav-icon.active:after, header .nav .nav-icon.active:before, header .nav .nav-icon.active div {background-color:#1a1a1a}
header .nav .nav-icon:before {margin-top:0}
header .nav .nav-icon:after {margin-bottom:0}
header .nav .nav-icon.active:before {transform:translateY(7px) rotate(135deg);-moz-transform:translateY(7px) rotate(135deg);-webkit-transform:translateY(7px) rotate(135deg)}
header .nav .nav-icon.active:after {transform:translateY(-5px) rotate(-135deg);-moz-transform:translateY(-5px) rotate(-135deg);-webkit-transform:translateY(-5px) rotate(-135deg)}
header .nav .nav-icon.active div {-moz-transform:scale(0);-webkit-transform:scale(0);transform:scale(0)}

.header-area {width:100%;height:160px;display:flex;flex-wrap:nowrap;align-items:center;transition:0.2s linear;position:absolute;top:0;z-index:99}
.header-area .flex-layout {position:relative;display:flex;flex-wrap:wrap}
.header-area .logo,
.header-area .nav,
.header-area .header-right {flex-shrink:0;/* 요소가 축소되지 않도록 */}

.header-area .nav {flex:1;/* nav 영역이 가능한 넓게 차지하도록 */ display:flex;/* 플렉스 박스를 사용하여 자식 요소 정렬 */ justify-content:center;/* nav 메뉴를 가운데 정렬 */}

.header-area .logo a {display:block;position:relative;width:150px;height:123px;background-repeat:no-repeat;background-size:contain}
.header-area .logo a.logo_w {background-image:url(../img/area/logo_w.png)}
.header-area .logo a.logo_b {background-image:url(../img/area/logo_b.png)}
.header-area .logo img {width:166px;vertical-align:top}
.header-area.up {top:0px;background-color:#000}
.header-area.on.up {top:15px;position:absolute}
.header-area.on .mailgo .login  {padding:14px 0}

/* .on 상태일 때 티로그몰 숨김 */
.header-area.on .mailgo .t_mall {display:none}
.header-area.on .mailgo .login a {padding:14px 26px;border-radius:50px}
.header-area.on .map_btn span:after {}
.header-area.down {position:fixed;background-color:#fff}
.header-area.up:before {height:0}
.header-area.down .logo a img {opacity:0}
/*.header-area.down .logo a:after {content:"";width:100%;height:100%;position:absolute;left:0;background:url(../img/logo.png) no-repeat;background-size:contain;transition:all 0.5s;-webkit-transition:all 0.5s}*/
.header-area.down .mailgo .t_mall {padding:14px 0}
.header-area.down .mailgo .login {padding:14px 0}
.header-area.down .map_btn span {background-color:#000}
.header-area.map_btn.down  span:after {top:9px;display:block;content:"";position:absolute;width:100%;height:2px;background:#000;transition:all .2s}
.header-area.down .map_btn span:before {background-color:#000;top:-9px}
.header-area.down .navbar > li > a {color:#1a1a1a}
.header-area .wrapper {width:100%;margin:0 auto}

.header-area.on .logo {position:absolute;left:0;z-index:100}
.header-area.on .logo a img {opacity:0;background:none}
/*.header-area.on .logo a::after {content:"";width:100%;height:100%;position:absolute;left:0;background:url(../img/logo.png) no-repeat;background-size:contain;transition:all 0.5s;-webkit-transition:all 0.5s}*/

.header-area .navbar {height:100%}
/* [WEBIS-240515] HOVER 통으로 되어 이썽서 active 만 처리로 변경 */
/*.header-area .navbar:hover .sub-menu {opacity:1;visibility:visible}*/
.header-area .navbar .sub-dropdown:hover .sub-menu {opacity:1;visibility:visible}

.header-area.on .navbar > li > a:hover {text-decoration:underline}
/*.header-area.active .logo a:after {content:"";width:100%;height:100%;position:absolute;left:0;background:url(../img/logo.png) no-repeat;background-size:contain;transition:all 0.5s;-webkit-transition:all 0.5s}
*/.header-area.active .navbar > li > a {color:#1a1a1a}
.header-area.active .mailgo a {color:#1a1a1a;border:1px solid #ddd}

/* .scrolled .header-area {background-color:#000;color:#fff} */

.map_btn{z-index:101;cursor:pointer;display:flex;align-items:center;position:relative;height:20px;font-weight:600;font-size:18px;line-height:1.16;transition:none;/* all .2s에서 none으로 변경 */}
.map_btn span{display:block;width:25px;height:2px;margin:auto;background:#000;transition:all .2s}
.map_btn span:before {display:block;content:"";position:absolute;top:0;width:100%;height:2px;background:#000;transition:all .2s}
.map_btn span:after{bottom:0;display:block;content:"";position:absolute;;width:100%;height:2px;background:#000;transition:all .2s}
.map_btn.active{position:fixed;right:45px;height:25px}
.map_btn.active span{border:none;background:transparent}
.map_btn.active span:before{top:0;transform:rotate(45deg);background:#fff}
.map_btn.active span:after{top:0;transform:rotate(-45deg);background:#fff}

@media (max-width:1279px) {
    .map_btn {padding-left:20px}
}

@media (max-width:1200px) {
    #map_btn{display:none}


  .header-area .header-right {
        padding:0 10px;/* 좌우 패딩 조정 */
}

  .header-area .logo img {
        width:140px;/* 로고 크기를 줄여서 공간 확보 */
}

}


/* 메뉴오픈 */
#site_map_wrapper{display:none;position:fixed;top:0;left:-100%;z-index:100;width:100%;height:100%;background-color:rgba(0,0,0,.6);backdrop-filter:blur(10px)}
#site_map_wrapper .bg_wrap{position:absolute;z-index:1;width:30%;margin:0 auto}
#site_map_wrapper .bg{position:absolute;left:0;top:0;width:0;height:100vh;margin-left:0;background:url(../img/area/main_bg.png) left no-repeat;background-size:cover}
.site_map_menu{position:absolute;right:0;top:20px;width:0;height:100%}
.site_map_menu > ul{position:absolute;top:50%;transform:translateY(-50%);width:100%;padding:0 15%}
.site_map_menu > ul > li{opacity:0;margin-left:100px;border-bottom:1px solid rgba(255,255,255,.25)}
.site_map_menu > ul > li+li{padding:20px 0}
.site_map_menu > ul > li > a{display:block;width:max-content;margin-bottom:20px;font-size:32px;color:#fff}
.site_map_menu > ul > li:nth-child(1){animation-delay:.4s;padding-bottom:20px}
.site_map_menu > ul > li:nth-child(2){animation-delay:.5s}
.site_map_menu > ul > li:nth-child(3){animation-delay:.6s}
.site_map_menu > ul > li:nth-child(4){animation-delay:.7s}
.site_map_menu > ul > li:nth-child(5){animation-delay:.8s}
.site_map_menu > ul > li ul{display:flex;flex-wrap:wrap}
.site_map_menu > ul > li ul li+li{margin-left:25px}
.site_map_menu > ul > li ul a{opacity:0.6;font-size:18px;font-weight:500;color:#fff;transition:all .2s}



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

/* main common */
.max-inner{max-width:1600px;width:100%;padding:0 20px;margin:0 auto}
.sec-title p.sub-tit{font-size:18px;color:#0460d9;font-weight:600;margin-bottom:20px}
.max-inner .top-desc {font-size:24px;font-weight:700;max-width:830px;word-break:keep-all;padding:28px 0;line-height:1.4}


.download-button {margin:50px 0 0}
.download-button a {display:inline-block;padding:20px 50px;background:#0460d9;color:#fff}
.download-button a img {margin-left:20px}
/********************************************* responsive *********************************************/




@media (min-width:1200px) {
  /********************************************* pc *********************************************/
  header .wrapper{padding:0 50px}
  .header-area .navbar > li > a {padding-bottom:30px}
  .header-area.down .navbar > li:hover > a {color:#4486d8}
  .header-area .flex-layout {justify-content:space-between;align-items:center}
  .header-area .nav {display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center}
  .header-area .nav .children {display:none}
  .header-area .navbar {display:flex;flex-wrap:nowrap;align-items:center;position:absolute;left:50%;transform:translateX(-50%)}
  .header-area .navbar > li {position:relative;color:#fff;padding:0 30px;font-weight:600;font-size:17px;line-height:1.16;white-space:nowrap;/* 줄 바꿈 방지 */}
  .header-area .navbar > .login {color:#fff;font-size:14px;font-weight:400}
  .header-area .navbar > li a {color:#000}
  
  .sub_wrap .header-area .navbar > li a {color:#777}
  .sub_wrap .header-area .navbar > li.active a {color:#000}
  /* AREAMED 페이지 백그라운드 블랙일 때 */
  .areamed_bg .sub_wrap .header-area .navbar > li.active a {color:#FFF}

  .header-area .mailgo .login  {background:rgba(255, 255, 255, 0.2);padding:14px 26px;border-radius:50px}
  /* .header-area .mailgo .t_mall:hover {background-color:#000;color:#fff;transition:background-color 0.5s ease, color 0.5s ease} */
  .header-area .logo img {width:136px}


  .navbar .sub-menu {opacity:0;visibility:hidden;transition:all ease 0.3s;position:absolute;top:30px;left:50%;transform:translateX(-50%);width:auto;padding:30px 50px;color:#000;font-weight:500;font-size:15px;text-align:center;letter-spacing:-0.5px}
  .navbar .sub-menu li {opacity:0.7;white-space:nowrap}
  .navbar .sub-menu li:hover {opacity:1}	
  .navbar .sub-menu li:hover > a {text-decoration:underline}
  .navbar .sub-menu li:last-child {margin-bottom:0}
  .navbar .sub-menu li a {color:#000;opacity:1;line-height:45px}
  /* .header-area .navbar>li:hover .sub-menu {opacity:1;visibility:inherit} */
  .header-area .navbar .menu > ul {display:flex;flex-wrap:nowrap;align-items:center}
  .header-area .navbar .menu > ul > li {margin-right:30px}
  .header-area .mailgo a {display:flex;flex-wrap:nowrap;align-items:center;text-transform:uppercase;font-size:14px;font-weight:600;color:#000}
  .header-area .mailgo a i {margin-left:10px}
  .header-area.down .mailgo a {color:#1a1a1a;border:1px solid #ddd}
  .header-area.on .mailgo a {}

  /* .header-area.on {background:#fff}
  .header-area.on .navbar > li > a {color:#1a1a1a}
  .header-area.on #map_btn span > li > a {color:#1a1a1a}
  .header-area.on #map_btn span:before, #map_btn span:after > li > a {color:#1a1a1a} */

  .header-area.down .header-area .mailgo .t_mall {padding:0}
  .header-area.down .mailgo .t_mall a {background:rgba(255, 255, 255, 0.2);padding:14px 26px;border-radius:50px}
  .header-area.down .mailgo .login a {background:rgba(255, 255, 255, 0.2);padding:14px 26px;border-radius:50px}
  .header-area.down .map_btn span {display:block;position:relative;width:25px;height:2px;margin:auto;background:#333;transition:all .2s}
  .header-area.down .map_btn span:before {display:block;content:"";position:absolute;top:-9px;width:100%;height:2px;background:#333;transition:all .2s}


  .nav-bg {display:none;width:100%;height:480px;position:absolute;top:160px;left:0;background-color:#fff;z-index:-1;opacity:0;visibility:hidden;transition:0.2s linear}
  .nav-bg.on {opacity:1;visibility:visible}
  .header-area.on {}
  /* .header-area.on .logo a {background:url(../img/area/logo_b.png) no-repeat;background-size:80%} */
}



@media (min-width:1700px) {
    .header-area.on .mailgo .t_mall {
        padding:14px 0;
        display:block;
}
    .header-area.on .mailgo .t_mall a {
        padding:14px 26px;
        border-radius:50px;
}
     .header-area .navbar > li {padding:0 50px;font-size:18px}
     .navbar .sub-menu {font-size:17px}
     .header-area .logo img  {width:166px}
     .header-area .mailgo .t_mall {background:rgba(255, 255, 255, 0.2);padding:14px 26px;border-radius:50px;text-indent:inherit}
}




@media (min-width:1750px) {

    .header-area .mailgo .t_mall {
       padding:14px 26px;
       margin-right:20px;
}

}




@media (max-width:1199px) {
  /********************************************* mobile *********************************************/
  .header-area .logo a {display:flex;flex-wrap:nowrap;align-items:center}
  header .nav .nav-icon {display:inline-block;width:24px;cursor:pointer;position:absolute;top:50%;right:0;z-index:100;transform:translateY(-50%);-webkit-transform:translateY(-50%)}
  header .nav .navbar {position:fixed;width:100%;height:100%;top:0;right:0;opacity:0;visibility:hidden;padding:100px 0 100px;overflow-y:scroll;background:#fff;z-index:99;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease;margin:0}
  header .nav .navbar.active {opacity:1;visibility:visible;overflow-x:hidden /*overflow-y:scroll;*/}
  header .nav .nav-icon div {width:24px;position:relative;right:0}
  .header-area .navbar > li:first-child {margin-top:32px}
  .header-area .navbar > li.current_page_item {color:#0460d9}
  .header-area .navbar > li:nth-last-child(1),
  .header-area .navbar > li:nth-last-child(2) {border-bottom:0}
  .header-area .sitemap-bt {display:none}
  .header-area {background:transparent;height:120px}
  .header-area > .wrapper{height:120px}
  .header-area .flex-layout {height:100%;align-items:center;margin-top:5px}
  .header-area .navbar > li.active {}
  .header-area .navbar > li.active > a {color:#0460d9}
  .header-area .navbar > li.active > a span {position:relative}
  .header-area .navbar > li.active > a span::after {width:calc(100% + 12px);transition:width 0.3s}
  .header-area .navbar > li > a span::after {content:"";background-color:#3e93f2;border-radius:20px;width:calc(100% + 12px);height:8px;position:absolute;bottom:-1px;left:-4px;z-index:-1;width:0}
  .header-area .navbar > li.active.sub-dropdown > a:before {transform:translateY(-50%) rotate(-180deg)}
  .header-area .navbar > li {display:block;text-align:left;margin:0;font-weight:700;color:#111}
  .header-area .navbar > li > a {padding:18px 5%;line-height:normal;display:block;font-size:24px;position:relative;color:#111}
  .header-area .navbar > li.sub-dropdown {padding-bottom:0}
  .header-area .navbar > li.sub-dropdown > a:before {font-family:xeicon !important;width:24px;height:24px;position:absolute;right:5%;top:50%;transform:translateY(-50%);background-size:contain;content:"\e941";transition:all 0.3s}
  .header-area .navbar > li > .sub-menu {display:none;padding:30px 5%;position:relative}
  .header-area .navbar > li > .sub-menu::before {content:"";background:#f5f5f5;width:105%;height:100%;position:absolute;z-index:-1;top:0;left:-5%}
  .header-area .navbar > li .sub-menu li {font-size:18px;line-height:1.18;color:#474747;font-weight:400;margin-bottom:14px}
  .header-area .navbar > li .sub-menu li a {display:block}
  .header-area .navbar > li .sub-menu li:hover {color:#0460d9;font-weight:700}
  .header-area .navbar > li .sub-menu li:last-child {margin-bottom:0}
  .header-area.down .logo {position:relative;z-index:100;display:flex;align-items:center}
  .header-area .mailgo.desktop {display:none}
  .header-area .mailgo.mobile {display:block;margin:5%}
  .header-area .mailgo.mobile ul {display:flex;flex-wrap:nowrap;align-items:center;text-transform:uppercase}
  .header-area .mailgo.mobile ul li {color:#cccccc}
  .header-area .mailgo.mobile ul li:last-child {display:flex;flex-wrap:nowrap;align-items:center}
  .header-area .mailgo a {display:flex;flex-wrap:nowrap;align-items:center;text-transform:uppercase;font-size:14px;font-weight:600;background:rgba(255, 255, 255, 0.3);padding:14px 26px;border-radius:50px;color:#fff}
  .header-area .mailgo a i {margin-left:10px}
  .header-area .mailgo a {color:#1a1a1a;border:1px solid #ddd}

  .header-area .navbar > li > a,
  .header-area .navbar > li.sub-dropdown > a {cursor:pointer}
  .header-area .navbar > li.active > a,
  .header-area .navbar > li.sub-dropdown.active > a {cursor:pointer}
  .header-area .logo {margin-top:10px}

}





@media (max-width:768px) {
  /********************************************* header *********************************************/

  .header-area {background:transparent;height:90px}
  .header-area > .wrapper{height:90px}
  .header-area .logo a {width:65px;height:60px}
  .header-area.down {top:0}
  .header-area .logo {width:170px}
  .header-area.on .logo a{background-image:url(../img/area/logo_b.png) no-repeat}
  .header-area.on .logo a::after {background-size:70%;margin-top:20px}
  .header-area .flex-layout {height:100%;align-items:center;margin-top:0px}
  .header-area .navbar > li {padding:0 30px}
  .header-area .navbar > li > a {font-size:1.25rem}
  header .nav .navbar {padding:80px 0}


    .header-area .nav-icon {
        display:block;/* 모바일에서는 햄버거 메뉴 아이콘을 표시 */
}

    .header-area .header-right {
        padding:0 20px;/* 모바일에서는 padding을 조정 */
}
}

/********************************************* section *********************************************/
.section-wrap {
  overflow-y:auto;/* 스크롤을 가능하게 만듭니다 */
  height:100vh;/* 전체 화면 높이를 차지합니다 */
}

.sub_wrap .header-area {position:inherit}