@charset "utf-8";

/* 현대산스 헤더 */
@font-face {
    font-family: 'HyundaiSansHead';
    font-style: normal;
    font-weight: 300;
    src: url('../font/HyundaiSansHeadKRLight.eot') format('eot');
    src: 
        url('../font/HyundaiSansHeadKRLight.woff') format('woff'), 
        url('../font/HyundaiSansHeadKRLight.woff2') format('woff2'),
        url('../font/HyundaiSansHeadKRLight.ttf') format("truetype");
}
@font-face {
    font-family: 'HyundaiSansHead';
    font-style: normal;
    font-weight: 400;
    src: url('../font/HyundaiSansHeadKRRegular.eot') format('eot');
    src: 
        url('../font/HyundaiSansHeadKRRegular.woff') format('woff'), 
        url('../font/HyundaiSansHeadKRRegular.woff2') format('woff2'),
        url('../font/HyundaiSansHeadKRRegular.ttf') format("truetype");
}
@font-face {
    font-family: 'HyundaiSansHead';
    font-style: normal;
    font-weight: 500;
    src: url('../font/HyundaiSansHeadKRMedium.eot') format('eot');
    src: 
        url('../font/HyundaiSansHeadKRMedium.woff') format('woff'), 
        url('../font/HyundaiSansHeadKRMedium.woff2') format('woff2'),
        url('../font/HyundaiSansHeadKRMedium.ttf') format("truetype");
}
@font-face {
    font-family: 'HyundaiSansHead';
    font-style: normal;
    font-weight: 700;
    src: url('../font/HyundaiSansHeadKRBold.eot') format('eot');
    src: 
        url('../font/HyundaiSansHeadKRBold.woff') format('woff'), 
        url('../font/HyundaiSansHeadKRBold.woff2') format('woff2'),
        url('../font/HyundaiSansHeadKRBold.ttf') format("truetype");
}

/* 현대산스 텍스트 */
@font-face {
    font-family: 'HyundaiSansText';
    font-style: normal;
    font-weight: 400;
    src: url('../font/HyundaiSansTextKRRegular.eot') format('eot');
    src: 
        url('../font/HyundaiSansTextKRRegular.woff') format('woff'), 
        url('../font/HyundaiSansTextKRRegular.woff2') format('woff2'),
        url('../font/HyundaiSansTextKRRegular.ttf') format("truetype");
}
@font-face {
    font-family: 'HyundaiSansText';
    font-style: normal;
    font-weight: 500;
    src: url('../font/HyundaiSansTextKRMedium.eot') format('eot');
    src: 
        url('../font/HyundaiSansTextKRMedium.woff') format('woff'), 
        url('../font/HyundaiSansTextKRMedium.woff2') format('woff2'),
        url('../font/HyundaiSansTextKRMedium.ttf') format("truetype");
}
@font-face {
    font-family: 'HyundaiSansText';
    font-style: normal;
    font-weight: 700;
    src: url('../font/HyundaiSansTextKRBold.eot') format('eot');
    src: 
        url('../font/HyundaiSansTextKRBold.woff') format('woff'), 
        url('../font/HyundaiSansTextKRBold.woff2') format('woff2'),
        url('../font/HyundaiSansTextKRBold.ttf') format("truetype");
}

:root {
    --basic-txt-color: #121212; /*기본 폰트 컬러*/
    --sub-txt-color: #007fa8; /*서브 폰트 컬러*/
    --unactive-color: #999999; /*비활성화 컬러*/
    --key-color: #002C5F; /*메인 키컬러*/
    --tit-bg-color: #E9F2FF; /*베이직 bg 컬러*/
    --info-bg-color: #F8F8FB; /*인포 및 툴팁 bg컬러*/
    --new-info-bg-color: #fff1cd; /* 업데이트 인포 및 툴팁 bg컬러*/
    --warn-bg-color: #fff3f3; /*경고 툴팁 bg컬러*/
    --warn-color: #e44848; /*경고 폰트 컬러*/
}

html { scroll-behavior: smooth;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

body { box-sizing:border-box; font-size: 19px; min-width: 360px; color: #121212; font-family: 'HyundaiSansText', sans-serif; font-weight: 400; }
body.noneScroll { overflow: hidden; }

select, input, textarea, button { font-size: inherit; vertical-align: middle; }
textarea { width:100%; min-height: 300px; padding:5px; border:1px solid #d2d2d2; box-sizing: border-box; }
p, li, span, input, a { line-height: 140%; }
img { width: 100%; vertical-align: top; }

table { border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
ul, ol, li { list-style: none; }
p { word-break: keep-all; }
a { text-decoration: none; color: #121212; }

address { font-style: normal; }
caption { text-indent: -9999px; height: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
legend { display: none; }

.hyundaisansHead { font-family: 'HyundaiSansHead', sans-serif; }

.blind { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}
.hidden { display: none; }
.clear:after { display: block; content: ""; clear: both; height: 0; }
.group:after { display: block; content:" "; clear: both; height: 0; }

/*인풋 박스 백그라운드*/
input[type="text"], input[type="password"] { background: #f2f2f2; }

/*보드 쪽 pre 태그 줄바꿈*/
pre {white-space: pre-wrap;}

.accessibility01 { width: 100%; position: fixed; top: 0; left: -50000px; z-index: 200; background-color: #cc2634; color: #fff; padding: 24px 0; text-align: center; font-size: 18px; font-weight: 600; }
.accessibility01:focus {left: 0;}

.underline { text-decoration: underline; }
.readonly, input[readonly="readonly"] { background: #f1f1f1; }

.keep_all { word-break: keep-all !important; }

/* 서브페이지 기본 세팅 s */
select { border-radius: 0; /* 아이폰 사파리 보더 없애기 */ -webkit-appearance: none; /* 화살표 없애기 for chrome*/ -moz-appearance: none; /* 화살표 없애기 for firefox*/ appearance: none; /* 화살표 없애기 공통*/ }
select::-ms-expand { display: none; /* 화살표 없애기 for IE10, 11*/ }
button { background: none; border: none; cursor: pointer; }


/* 서브페이지 기본 세팅 e */
#container.sub { overflow: hidden; position: relative; }



/* 기본 css 정의 */
h2,h3,h4 { line-height: 100%; }
.hd-h1 { font-family: 'HyundaiSansHead', sans-serif; font-size: 32px; font-weight: 500; color: var(--basic-txt-color); }
.hd-h2 { font-family: 'HyundaiSansHead', sans-serif; font-size: 28px; font-weight: 500; color: var(--basic-txt-color); }
    .hd-h2-sub { margin-top: 12px; font-family: 'HyundaiSansHead', sans-serif; font-size: 18px; color: var(--basic-txt-color); }
.hd-h3 { font-size: 30px; font-weight: 700; color: var(--basic-txt-color); }
    .hd-h3.t-bold,
    .hd-h3 .t-bold { font-weight: 700; }
.hd-h4 { font-size: 24px; font-weight: 500; color: var(--basic-txt-color); }
.hd-sub-txt1 { font-size: 19px; }
.hd-sub-txt2 { font-size: 17px; }
.hd-sub-txt3 { font-size: 15px !important; }

.bd-cir-num { display: inline-block; width: 16px; height: 16px; line-height: 17px; font-size: 15px; border-radius: 50%; border: 1px solid var(--basic-txt-color); margin-right: 5px; text-align: center; vertical-align: text-bottom; }

.t-regula { font-weight: 400 !important; }
.t-bold { font-weight: 500 !important; }
.t-black { font-weight: 700 !important; }

.t-block { display: block; }
.dsp-flex { display: flex; }

.mid-tit { font-size: 21px; padding-bottom: 10px; font-weight: 700 !important; }

img.img_fit { max-width: fit-content; }

.txt-center { text-align: center; }
.txt-left { text-align: left !important; }
.txt-right { text-align: right !important; }


/* 부연설명 정의 */
.bd-sub-txt1 { font-size: 17px; color: var(--unactive-color); }


/* 폰트컬러정의 */
.t-wran { color: var(--warn-color); }
.basic-color { color: var(--basic-txt-color) !important; }
.key-color { color: var(--key-color) !important; }
.unactive-color { color: var(--unactive-color) !important; }
.warn-color { color: var(--warn-color) !important; }

/* 링크 a태그 */
a.this-link { display: inline-block;  font-weight: 700; padding-right: 23px; position: relative; }
a.this-link::after { content: ''; width: 14px; height: 14px; background: url('../img/cont_ico_twin.png') no-repeat center/14px 14px; position: absolute; top: calc(50% - 1px); right: 4px; transform: translateY(-50%); }
a.out-link { display: inline-block; font-weight: 700; color: var(--sub-txt-color); padding-right: 26px; position: relative; }
a.out-link::after { content: ''; width: 16px; height: 16px; background: url('../img/cont_ico_nwin.png') no-repeat center/16px 16px; position: absolute; top: 4px; right: 4px; }
a.file-down { display: inline-block; font-weight: 700; color: var(--key-color); padding-right: 22px; position: relative; }
a.file-down::after { content: ''; width: 14px; height: 14px; background: url('../img/cont_ico_fdwn.png') no-repeat center/14px 14px; position: absolute; top: calc(50% - 1px); right: 4px; transform: translateY(-50%); }


/* 마진 정의 */
.margin-tp0 { margin-top: 0 !important; }
.margin-tp5 { margin-top: 5px; }
.margin-tp7 { margin-top: 7px; }
.margin-tp12 { margin-top: 12px !important; }
.margin-tp20 { margin-top: 20px; }
.margin-tp30 { margin-top: 30px !important; }
.margin-tp40 { margin-top: 40px; }
.margin-tp50 { margin-top: 50px; }

.margin-bt0 { margin-bottom: 0px !important; }
.margin-bt5 { margin-bottom: 5px !important; }
.margin-bt7 { margin-bottom: 7px !important; }
.margin-bt12 { margin-bottom: 12px; }
.margin-bt15 { margin-bottom: 15px !important; }
.margin-bt20 { margin-bottom: 20px !important; }
.margin-bt30 { margin-bottom: 30px !important; }
.margin-bt40 { margin-bottom: 40px; }
.margin-bt60 { margin-bottom: 60px !important; }
.margin-bt80 { margin-bottom: 80px !important; }
.margin-bt100 { margin-bottom: 100px !important; }

.margin-rgt4 { margin-right: 4px; }
.margin-rgt7 { margin-right: 7px; }
.margin-rgt12 { margin-right: 12px; }

.margin-lft4 { margin-left: 4px; }
.margin-lft7 { margin-left: 7px !important; }
.margin-lft15 { margin-left: 15px; }
.margin-lft17 { margin-left: 17px; }
.margin-lft22 { margin-left: 22px; }
.margin-lft27 { margin-left: 27px; }
.margin-lft50 { margin-left: 50px; }
.margin-lft55 { margin-left: 55px; }
.margin-lft63 { margin-left: 63px; }
.margin-lft84 { margin-left: 84px; }
.margin-lft100 { margin-left: 100px; }
.margin-lft105 { margin-left: 105px; }
.margin-lft108 { margin-left: 108px; }
.margin-lft142 { margin-left: 142px; }


/* 패딩 정의 */
.pdg-lft0 { padding-left: 0 !important; }
.pdg-lft5{ padding-left: 5px !important; }
.pdg-lft10 { padding-left: 10px !important; }
.pdg-lft15 { padding-left: 15px !important; }
.pdg-lft18 { padding-left: 18px !important; }
.pdg-lft20 { padding-left: 20px; }
.pdg-lft22 { padding-left: 20px !important; }
.pdg-lft24 { padding-left: 24px !important; }
.pdg-lft27 { padding-left: 27px !important; }
.pdg-lft32 { padding-left: 32px !important; }
.pdg-lft35 { padding-left: 35px !important; }
.pdg-lft50 { padding-left: 50px !important; }
.pdg-lft72 { padding-left: 72px !important; }
.pdg-lft90 { padding-left: 90px !important; }

.pdg-bt100 { padding-bottom: 100px !important; }

.pdg-rgt15 { padding-right: 15px !important; }

.pdg15 { padding: 15px !important; }



/* 상단 바 */
.header { width: 100%; height: 80px; position: fixed; top: 0; z-index: 100; font-size: 14px; background: #fff; border-bottom: solid 1px var(--key-color); }
.header .head { padding-top: 30px;height: 80px; box-sizing: border-box; transition: all .3s ease-in-out; background-color: #fff; }
.h_inner { width: calc(100% - 200px); height: 100%; margin: 0 auto; position: relative; }
.h_inner.new { width: 100%; max-width: 1200px; }

.header .logo { width: 190px; float: left; }
.header .logo img { width: 100%; }
.header .sitemap-ham { width: 80px; height:80px; position: relative; top:-30px; float:right; background: url('../img/hy_sitemap_ham.jpg') no-repeat center/contain; }
.header .sitemap-ham a { display: inline-block; width:100%; height:100%; }
.top-alert { padding:16px 30px; border:solid 1px #002C5F; border-radius: 0px 0px 15px 15px; position: absolute; right:0px; top:100%; color:#002C5F; box-sizing: border-box; background-color: #fff; }
.top-alert p { font:400 17px/100% 'HyundaiSansHead'; }

/* 브레드크럼브 */
.breadcrumb { float: right; margin-right:60px; }
.bread-on > p { float: left; padding: 0 15px 0 22px; position: relative; }
.bread-on > p::before { content: ''; width: 7px; height: 14px; background: url('../img/header_ico_brct.png') no-repeat center/cover; position: absolute; top: 2px; left: 0; }
.bread-on > p.bd-home { width: 18px; height: 18px; line-height: 18px; padding: 0 15px 0 0; text-indent: -9999px; overflow: hidden; background: url('../img/header_ico_home.png') no-repeat left top/18px 18px; }
.bread-on > p.bd-home::before { display: none; }
.bread-on > p.bd-home a { display: block; width:100%; height:100%; }


/* 컨테이너 */
#container { width: 100%; height: 100vh; padding-top: 80px; box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; overflow-x: auto; }
#container.new { justify-content: center; padding-left:0px !important; }
.new .contents-wrap { width:100%; max-width:1180px; }

/* 메뉴트리 gnb */
#l-lnb { width: 400px !important; position: relative; }
.lf-lnb-wrap { width: 400px !important; height: calc(100vh - 80px);  padding-top: 50px; border-right: solid 1px #F0F0F0; position: absolute; top: 0; left: 0; z-index: 1; }

.lf-lnb-wrap > h2 { padding-left: 10px; margin-bottom: 10px; }
.lf-lnb-wrap .hd-h3 { font-size: 25px; font-weight: 500; }
.lf-lnb-wrap .hd-h4 { font-size: 22px; font-weight: 500; }


.lf-lnb { width: 100%; max-width: 400px; height: calc(100vh - 380px); overflow-y: auto; padding-top: 25px; margin-bottom: 10px; }
    .lf-lnb::-webkit-scrollbar {
        width: 10px;  
    }
    .lf-lnb::-webkit-scrollbar-thumb {
        background-color: var(--tit-bg-color); /* 스크롤바 색상 */
        border-radius: 10px; /* 스크롤바 둥근 테두리 */
    }
    .lf-lnb::-webkit-scrollbar-track {
        background-color: var(--info-bg-color);  /*스크롤바 뒷 배경 색상*/
    }


.lf-lnb .dep1 > li { padding: 5px 0 25px 50px; cursor: pointer; }
.lf-lnb .dep1 > li .dep1name { width: 100%; line-height: 100%; position: relative; }
.lf-lnb .dep1 > li .dep1name::after { content: ''; width: 22px; height: 20px; position: absolute; top: 5px; left: -40px; }
.lf-lnb .dep1 > li .dep1name.dep1name1::after { background: url('../img/gnb_ico_1.png') no-repeat center/cover; } 
.lf-lnb .dep1 > li .dep1name.dep1name2::after { background: url('../img/gnb_ico_2.png') no-repeat center/cover; } 
.lf-lnb .dep1 > li .dep1name.dep1name3::after { background: url('../img/gnb_ico_3.png') no-repeat center/cover; } 
.lf-lnb .dep1 > li .dep1name.dep1name4::after { background: url('../img/gnb_ico_4.png') no-repeat center/cover; } 

.lf-lnb .dep2 { padding-top: 15px; }
.lf-lnb .dep2 > li { padding: 5px 0 7px;  cursor: pointer; }
.lf-lnb .dep2 > li .depname { padding-left: 15px; position: relative; }
.lf-lnb .dep2 > li .depname::before { content: ''; width: 7px; height: 3px; border-radius: 3px; background-color: var(--basic-txt-color); position: absolute; top: 10px; left: 0; }

.lf-lnb .dep3 { padding-top: 7px; }
.lf-lnb .dep3 > li { padding: 3px 0 3px 26px; cursor: pointer; position: relative; }
.lf-lnb .dep3 > li::before { content: ''; width: 5px; height: 9px; background: url('../img/gnb_ico_this.png') no-repeat center/5px 9px; position: absolute; top: 11px; left: 14px; display: none; }
.lf-lnb .dep3 > li.on::before,
.lf-lnb .dep3 > li:hover::before { display: block; }
.lf-lnb span.t-new { position: relative; }
.lf-lnb span.t-new::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: #ff9292; position: absolute; top: -1px; right: -6px; }

.lf-lnb-wrap .app-op { width: 80%; }
.lf-lnb-wrap .app-op > p { text-align: center; margin-bottom: 3px; font-size: 18px; }
.lf-lnb-wrap .app-op > a { display: block; width: 100%; height: 100%; text-align: center; background-color: var(--key-color); }
.lf-lnb-wrap .app-op > a > span { line-height: 50px; color: #fff; font-weight: 600;  padding-left: 30px; box-sizing: border-box; position: relative; }
.lf-lnb-wrap .app-op > a > span::before { content: ""; width: 22px; height: 20px; position: absolute; top: -1px; left: 0; background: url('../img/gnb_ico_5.png') no-repeat center/cover; }
 

/* 콘텐츠 랩 */
.contents-wrap { width: calc(100% - 400px); height: calc(100vh - 80px); box-sizing: border-box; }
.contents { width: 100%; min-width: 1160px; height: calc(100vh - 140px); overflow-x: hidden; overflow-y: auto; margin-top: 50px; box-sizing: border-box; }
    .contents::-webkit-scrollbar { width: 10px; }
    .contents::-webkit-scrollbar-thumb { background-color: #86A7DA; /* 스크롤바 색상 */ border-radius: 10px; /* 스크롤바 둥근 테두리 */ }
    .contents::-webkit-scrollbar-track { background-color: var(--info-bg-color);  /*스크롤바 뒷 배경 색상*/ }
.inner { width: 100%; max-width: 1160px; padding-left: 40px; box-sizing: border-box; position: relative; }


/* 상단 배너 */
.h2-banner { width: 100%; height: 180px; padding: 38px 40px; box-sizing: border-box; background:var(--tit-bg-color); margin-bottom: 60px; border-radius: 30px; position: relative; }
.h2-banner::after { content: ''; width: 320px; height: 165px; position: absolute; bottom: -10px; right: 30px; z-index: 1; }
    
.welfare-cont .h2-banner::after { background: url('../img/sub_ban_img_1.png') no-repeat left top/contain; }
.good-cont .h2-banner::after { background: url('../img/sub_ban_img_2.png') no-repeat left top/contain; }
.move-cont .h2-banner::after { background: url('../img/sub_ban_img_3.png') no-repeat left top/contain; }


/* 인덱스 블럭 메뉴 */
.main-menu .prim-nav { width:100%; margin-bottom: 30px; margin-top: 10px; }
.main-menu .prim-nav ul { width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: flex-start; -moz-justify-content: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; }
.main-menu .prim-nav li { width: 32.5%; max-width: 350px; margin-right: 30px; cursor: pointer; }
.main-menu .prim-nav li:last-child { margin-right: 0; }
    .prim-menu-box { width: 100%; height: 520px; padding: 45px; box-sizing: border-box; background-color: var(--tit-bg-color); border-radius: 30px; position: relative; }
    .prim-menu-box .prim-menu-name { font-size: 24px; margin-bottom: 20px; }

    .prim-menu-box .prim-img { width: 305px; position: absolute; bottom: 32px; right: 13px; z-index: 5; transition: all .3s ease; }

    .prim-menu-box .prim-img-wrap { width: 100%; height: 100%; border-radius: 30px; position: absolute; top: 0; left: 0; overflow: hidden; }
    .prim-menu-box .prim-img-wrap::after { content: ''; width: 100%; height: 60px; border-radius: 0px 0px 30px 30px; background: linear-gradient(180deg, #BFD4F2 0%, #E9F2FF 100%); position: absolute; bottom: 0; left: 0; z-index: 3; }

    .prim-menu-box .prim-img-wrap .prim-cir-mini { width: 450px; height: 225px; position: absolute; overflow: hidden; bottom: 5px; left: -225px; rotate: 270deg; transform-origin: bottom center; transition: all .3s ease; }
    .prim-menu-box .prim-img-wrap .prim-cir-mini::after { content: ''; display: block; width: 450px; height: 450px; background-color: rgba(255, 220, 212, 0.3); border-radius: 50%; position: absolute;  }
    .prim-menu-box .prim-img-wrap .prim-cir-big { width: 420px; height: 210px; position: absolute; overflow: hidden; bottom: 60px; right: -210px; transform-origin: bottom center; transform: rotate(90deg); transition: all .5s ease;  }
    .prim-menu-box .prim-img-wrap .prim-cir-big::after { content: ''; display: block; width: 420px; height: 420px; background-color: rgba(216, 230, 252, 0.5); border-radius: 50%; position: absolute; }

    .prim-menu-box:hover .prim-img { transform: translateX(20px); }
    .prim-menu-box:hover .prim-img-wrap .prim-cir-mini { transform: rotate(90deg); }
    .prim-menu-box:hover .prim-img-wrap .prim-cir-big { transform: rotate(-90deg); }


/* 인덱스 아이콘 메뉴 */
.main-menu .icon-nav-wrap { width: 100%; height: auto; }
.main-menu .icon-nav-wrap .quick-txt { line-height: 115px; float: left; font-size: 26px; }
.main-menu .icon-nav-wrap > ul { width: calc(100% - 186px); height: auto; padding: 25px 45px 35px;; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; float: right; box-sizing: border-box; background-color: var(--tit-bg-color); border-radius: 30px; }
.main-menu .icon-nav-wrap > ul > li { width: calc(100% /7); height: 55px; cursor: pointer; }
    .icon-nav-box { width: 100%; }
    .icon-nav-box > p { text-align: center; margin: 0 auto; }
    .icon-nav-box .ico-nav-pic { width: 32px; height: 32px; margin-bottom: 12px; position: relative; }
    .icon-nav-box .ico-nav-pic img { position: relative; z-index: 3; }
    .icon-nav-box .ico-nav-pic::after { content: ''; width: 1px; height: 1px; background-color: #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .35s ease; }
     
    .main-menu .icon-nav-wrap > ul > li:hover .icon-nav-box .ico-nav-pic::after { width: 54px; height: 54px; }


/* 인덱스 추가 배너 */
.add-banr { width: 100%; box-sizing: border-box; margin-top:10px; margin-bottom: 20px; }
.add-banr > div { width: 100%; height: 80px; padding: 0 25px 0 40px; border-radius: 20px;  background-color: var(--new-info-bg-color); box-sizing: border-box; position: relative; }
.idx-news-box p { width: 100%; line-height: 80px; font-size: 17px; cursor: pointer; }
p.img-wrap { width: 60px; height: 60px; position: absolute; top: 7px; right: 30px; } 

.up-popup-bg { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.75); z-index: 100; display: none; }
.up-popup-bg.active { display: block; }
.up-popup-box { width: 50%; height: 480px; overflow-y: auto; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 30px; box-sizing: border-box; }
.up-popup-box button { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: var(--key-color); padding: 10px 30px; color: #fff; font-weight: 600; font-size: 17px; }

.last.up-popup-box { width:670px; height: auto; padding:40px 0; text-align:center; }
.last.up-popup-box .tit { margin-bottom: 25px;  font: 700 22px/100% 'HyundaiSansHead';}
.close { width:40px; height:40px; position: absolute; right:20px; top:20px; }
.close span { display: inline-block; width: 40px; height:2px; background: black; position: absolute; transform-origin: center; left:50%; top:50%; transform: translate(-50%,-50%); }
.close span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.close span:nth-child(2) { transform: translate(-50%,-50%) rotate(135deg); }
.to-new { display: inline-block; padding: 9px 20px 8px; background: var(--key-color); color:white; }



/* 인덱스 뎁스2 메뉴 */
.dep2-wrap .dep2 { display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; }
.dep2-wrap .dep2 > li { width: calc((100% - 100px) / 4); max-width: 255px; height: calc((100vh - 220px)/2); min-height: 300px; max-height: 370px; border-radius: 30px; background-color: var(--tit-bg-color); margin: 0 30px 30px 0; padding: 40px; box-sizing: border-box; position: relative; overflow: hidden; cursor: pointer; }
.dep2-wrap .dep2 > li::after { content: ''; width: 290px; height: 290px; border-radius: 50%; background-color: rgba(146, 180, 234, 0.15); position: absolute; bottom: -115px; right: -90px; }
.dep2-wrap .dep2 > li:nth-child(4n) { margin-right: 0; }

.dep2-wrap .dep2 > li .depname { font-size: 24px; }
.dep2-wrap .dep2 .dep2-pic { width: 175px; height: 155px; position: absolute; bottom: 30px; right: 25px; z-index: 3; transition: all .3s ease; }
.dep2-wrap .dep2 .dep2-pic > img { width: 100%; height: 100%; object-fit: contain; }

.dep2-wrap .dep2 > li:hover .dep2-pic { transform: translateX(15px); }


/* 인포아이콘 호버 효과 */
.hov-i { display: inline-block; position: relative; }
.hov-i > img { width: 16px; height: 16px; margin-top: 4px; }
.hov-info { width: 320px; font-size: 17px; padding: 20px; box-sizing: border-box; background: white; box-shadow: 3px 3px 8px rgb(0,0,0,0.1); position: absolute; z-index: 1; display: none; }
.hov-info > img { width: 16px; height: 16px; }
.hov-info.on { display: block; }
.hov-info::before { content: ""; width: 16px; height: 18px; display: block; background: url('../img/cont_ico_bulb.png') no-repeat center/16px 18px; margin-bottom:11px; }


/* 인포 박스 */
.info-point-wrap { width: 100%; padding: 25px; display: flex; justify-content: flex-start; background-color: var(--info-bg-color); border-radius: 10px; box-sizing: border-box; }
.info-point-wrap.mg15 { width: calc(100% - 15px); margin-left: 15px; }
.info-point-wrap.mg20 { width: calc(100% - 20px); margin-left: 20px; }
.info-point-wrap.mg25 { width: calc(100% - 20px); margin-left: 25px; }
.info-point-wrap.mg32 { width: calc(100% - 32px); margin-left: 32px; }
.info-point-wrap.mg42 { width: calc(100% - 42px); margin-left: 42px; }
.info-point-wrap.mg52 { width: calc(100% - 48px); margin-left: 48px; }

.info-point-wrap .info-icon-box { width: 16px; height: 18px; line-height: 18px; text-indent: -9999px; overflow: hidden; padding-right: 12px; background: url('../img/cont_ico_info.png') no-repeat left top/16px 18px; }
.info-point-wrap .info-box { width: calc(100% - 28px); }
.info-point-wrap .info-box .info-box-tit { font-size: 19px; line-height: 1; margin-bottom: 13px; font-weight: 500; }
.info-point-wrap .info-box .info-box-txt { font-size: 17px; }
.info-point-wrap .info-box .info-box-txt span { line-height: 1.5; }
.info-point-wrap .info-box .ex-txt { font-size: 17px; font-style: italic; color: var(--unactive-color); }

/* new info */
.sec-wrap > .info-point-wrap { background-color: var(--new-info-bg-color);  } 
.sec-wrap > .info-point-wrap .info-icon-box {background: url('../img/cont_ico_new.png') no-repeat left top/16px 18px;}

/* 경고 박스 */
.warn-point-wrap { width: 100%; padding: 25px; display: flex; justify-content: flex-start; background-color: var(--warn-bg-color); border-radius: 10px; box-sizing: border-box; margin-bottom: 12px; }
.warn-point-wrap.mg15 { width: calc(100% - 15px); margin-left: 15px; }
.warn-point-wrap.mg20 { width: calc(100% - 20px); margin-left: 20px; }
.warn-point-wrap.mg25 { width: calc(100% - 20px); margin-left: 25px; }
.warn-point-wrap.mg32 { width: calc(100% - 32px); margin-left: 32px; }
.warn-point-wrap.mg42 { width: calc(100% - 42px); margin-left: 42px; }
.warn-point-wrap.mg52 { width: calc(100% - 48px); margin-left: 48px; }

.warn-point-wrap .warn-icon-box { width: 16px; height: 18px; line-height: 18px; text-indent: -9999px; overflow: hidden; padding-right: 12px; background: url('../img/cont_ico_warn.png') no-repeat left top/16px 18px;  }
.warn-point-wrap .warn-box { width: calc(100% - 28px); }
.warn-point-wrap .warn-box .warn-box-tit { color: var(--warn-color); line-height: 1; margin-bottom: 13px; font-weight: 500; }
.warn-point-wrap .warn-box .warn-box-txt { color: var(--warn-color); font-size: 17px; }
.warn-point-wrap .warn-box .warn-box-txt span { color: var(--warn-color); line-height: 1.5; }
.warn-point-wrap .warn-box .warn-box-txt span.bd-sub-txt1 { color: var(--unactive-color); }
.warn-point-wrap .warn-box .ex-txt { font-size: 17px; font-style: italic; color: var(--unactive-color); }


/* 토글박스 */
.toggle-wrap { width: 100%; cursor: pointer; }
.toggle-box .sh-tog-name > span { font-weight: 500; position: relative; }
.toggle-box .sh-tog-name > span::before { content: ''; width: 100%; height: 7px; background-color: #86A7DA; opacity: 0.15; position: absolute; bottom: -2px; left: 0; z-index: -1; }
.toggle-box .sh-tog-name > span::after { content: ''; width: 13px; height: 7px; background: url('../img/cont-ico-tog.png') no-repeat center/13px 7px; position: absolute; top: 6px; right: -26px; transition: all 0.35s ease; }
.toggle-box.on .sh-tog-name span::after { transform: rotate(180deg); }
.toggle-box .sh-tog-box { width: 100%; height: 0px; padding-left: 30px; overflow: hidden; transition: all 0.35s ease; box-sizing: border-box; }
.toggle-box.on .sh-tog-box { height: auto; overflow: visible; margin-bottom: 25px; }

.toggle-box .sh-tog-box > ul { padding: 20px; border: 1px solid #86A7DA; box-sizing: border-box; }
.toggle-box .sh-tog-box > ul > li .tog-dep1-tit { margin-bottom: 7px; }
.toggle-box .sh-tog-box > ul > li .toggle-txt { line-height: 1.2; padding-left: 14px; font-size: 17px; margin-bottom: 7px; position: relative; }
.toggle-box .sh-tog-box > ul > li:last-child .toggle-txt { margin-bottom: 0; }
.toggle-box .sh-tog-box > ul > li .toggle-txt::before { content: ''; width: 4px; height: 4px; background-color: var(--unactive-color); border-radius: 50%; position: absolute; top: 7px; left: 0; }

.toggle-box .sh-tog-box > ul > li .tog-dep2-wrap { margin-bottom: 12px; }
.toggle-box .sh-tog-box > ul > li .tog-dep2-wrap ul li { padding-left: 15px; margin-bottom: 3px; }
.toggle-box .sh-tog-box > ul > li:last-child .tog-dep2-wrap { margin-bottom: 0; }

.toggle-box .sh-tog-box .info-point-wrap { margin-top: 25px; }

.non-tog-txt { line-height: 1.6; font-size: 17px; }
.lineup-txt { padding-left: 20px; text-indent: -20px; }



/* 컨텐츠 기본 css정의 */
.sec-wrap { width: 100%; }
.sec-wrap ul { width: 100%; box-sizing: border-box; }
.sec-wrap ul > li { width: 100%; box-sizing: border-box; }


.sec { padding-top: 20px; }
.sec-wrap ul > li:first-child .sec { padding-top: 0; }

.sec > h3 { padding-left: 30px; margin-bottom: 25px; position: relative; padding-bottom: 12px; }
.sec > h3.hd-h3::after { content: ''; width: calc(100% - 25px); height: 1px; background-color: var(--info-bg-color); position: absolute; bottom: 0; left: 25px; }

.sec-wrap .sec .list-box { width: 100%; padding-left: 40px; box-sizing: border-box; }
    .sec-wrap .sec .list-box > ul > li > h4 { padding-bottom: 18px; position: relative; }

    .sec-wrap .sec .list-box .article-box { width: 100%; margin-bottom: 50px; }
    .sec-wrap  .sec .list-box ul > li:last-child  .article-box { margin-bottom: 100px; }
    .sec-wrap > ul > li:last-child .sec .list-box > ul > li:last-child .article-box { margin-bottom: 40px; }

    .article-box .cir-dep1-wrap { }
    .article-box .cir-dep1 { padding-left: 32px; position: relative; margin-bottom: 12px; }
    .article-box .cir-dep1::before { content: ''; width: 7px; height: 7px; background-color: var(--key-color); position: absolute; top: 8px; left: 15px; }

    .article-box .cir-dep2-wrap { margin-bottom: 20px;  }
    .article-box .cir-dep2 { padding-left: 48px; position: relative; margin-bottom: 10px; }
    .article-box .cir-dep2::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: var(--basic-txt-color); position: absolute; top: 9px; left: 35px; }

    .article-box .cir-dep3-wrap { margin-bottom: 15px; }
    .article-box .cir-dep3 { padding-left: 72px; position: relative; margin-bottom: 7px; }
    .article-box .cir-dep3::before { content: ''; width: 4px; height: 1px; background-color: var(--basic-txt-color); position: absolute; top: 9px; left: 65px; }

    .article-box .num-dep1-wrap { padding-left: 15px; }
    .article-box .num-dep1 { margin-bottom: 12px; position: relative; padding-left: 23px; }
    .article-box .num-dep1 > .numbering { display: inline-block; margin-right: 16px; position: absolute; left: 0; }
    .article-box .num-dep1 > .numbering::before { content: ')'; width: 6px; position: absolute; top: 0; right: -7px; }

    .article-box .cir-dep1-wrap .num-dep1-wrap { padding-left: 25px; }
    .article-box .cir-dep1-wrap .num-dep2-wrap { padding-left: 15px; }

    .article-box .num-dep2-wrap { margin-bottom: 15px; }
    .article-box .num-dep2 { padding-left: 52px; margin-bottom: 10px; position: relative; }
    .article-box .num-dep2 .numbering { display: inline-block; width: 16px; height: 16px; line-height: 17px; margin-right: 8px; font-size: 16px; text-align: center; position: absolute; left: 27px; top: 4px; }
    .article-box .num-dep2 .numbering::before { content: ''; display: block; width: 100%; height: 100%; border: 1px solid var(--basic-txt-color); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

    .article-box .num-dep2-wrap.cir-num .num-dep2 { padding-left: 27px; }
    .article-box .num-dep2-wrap.cir-num .numbering { left: 4px; }

    .article-box .num-dep3-wrap { padding-left: 55px; }
    .article-box .num-dep3-wrap > ul > li { margin-bottom: 5px; }
    .article-box .num-dep3 { }

    .cir-dep1.non-bf { padding-left: 15px; }
    .non-bf::before { display: none; }


/* 테이블 */
.sh-container .table { width: 100%; padding-left: 20px; box-sizing: border-box; }
.sh-container .table table { width: 100%; border: 1px solid #d7d7d7; font-size: 17px; vertical-align: middle; }
.sh-container .table table th,
.sh-container .table table td { vertical-align: middle; }

.sh-container .table table th.bd-rgt1 { border-right: 1px solid #d7d7d7 !important; }
.sh-container .table table th.bd-rgt2 { border-right: 1px solid #eee !important; }
.sh-container .table table th.bd-bt1 { border-bottom: 1px solid #d7d7d7 !important; }
.sh-container .table table th.bd-bt2 { border-bottom: 1px solid #eee !important; }
.sh-container .table table th.non-bdbt1 { border-bottom: 0; }
.sh-container .table table th.non-bdrgt1 { border-right: 0; }
.sh-container .table table td.bd-rgt1 { border-right: 1px solid #eee !important; }
.sh-container .table table td.bd-rgt2 { border-right: 1px solid #d7d7d7 !important; }
.sh-container .table table td.bd-bt1 { border-bottom: 1px solid #d7d7d7 !important; }
.sh-container .table table td.bd-bt2 { border-bottom: 1px solid #eee !important; }

.sh-container .table table tr.cont-bd td { border-bottom: 1px solid #d7d7d7; }

.sh-container .table table thead { display: none; }
.sh-container .table.vw-thead table thead { display: table-header-group; }

.sh-container .table.vertical-tb table th { background-color: var(--info-bg-color); text-align: center; font-weight: 500; border-bottom: 1px solid #d7d7d7; border-right: 1px solid #d7d7d7; }
.sh-container .table.vertical-tb table tr:last-child th { border-bottom: 0; }
.sh-container .table.vertical-tb table td { border-bottom: 1px solid #d7d7d7; }
.sh-container .table.vertical-tb table tr:last-child td { border-bottom: 0; }

.sh-container .table.horizon-tb table th { background-color: var(--info-bg-color); text-align: center; font-weight: 500; border-right: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; }
.sh-container .table.horizon-tb table td { text-align: center; border-right: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; }
.sh-container .table.horizon-tb table td:last-child { border-right: 0; }
.sh-container .table.horizon-tb table tr:last-child td { border-bottom: 0; }

.sh-container .table.ver-hor-tb table th { background-color: var(--info-bg-color); text-align: center; font-weight: 500; border-bottom: 1px solid #d7d7d7; border-right: 1px solid #d7d7d7; }
.sh-container .table.ver-hor-tb table th:last-child { border-right: 0; }
.sh-container .table.ver-hor-tb table td { text-align: center; border-right: 1px solid #d7d7d7; border-bottom: 1px solid #eee; }
.sh-container .table.ver-hor-tb table td:last-child { border-right: 0; }
.sh-container .table.ver-hor-tb table tr:last-child td { border-bottom: 0; }

.sh-container .table table thead.pdg8 th { padding: 8px 10px; }
.sh-container .table table thead.pdg12 th { padding: 12px 10px; }
.sh-container .table table thead.pdg15 th { padding: 15px 10px; }

.sh-container .table table tbody.pdg8 th { padding: 8px; }
.sh-container .table table tbody.pdg12 th { padding: 12px 10px; }
.sh-container .table table tbody.pdg15 th { padding: 15px 10px; }
.sh-container .table table tbody.pdg8 td { padding: 8px; }
.sh-container .table table tbody.pdg12 td { padding: 12px 10px; }
.sh-container .table table tbody.pdg15 td { padding: 15px 10px; }

.sh-container .table table .intb-list-wrap { padding: 8px 5px; }
.sh-container .table table .cir-intb { padding: 3px 0 3px 14px; position: relative; }
.sh-container .table table .cir-intb::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: var(--basic-txt-color); position: absolute; top: 9px; left: 0; }

.sh-container .table .intb-dep2-cont { text-align: left; padding: 0 10px; }



/* Q&A */
.qna-wrap { width: 100%; padding: 80px 0 0; box-sizing: border-box; }
.qna-wrap .qna-tit h4 { font-size: 28px; font-family: 'HyundaiSansHead', sans-serif; font-weight: 500; position: relative; color: var(--basic-txt-color); padding-left: 20px;}
.qna-wrap .qna-tit h4::after { content: ''; display: block; width: 100%; height: 20px; background-color: var(--tit-bg-color); position: absolute; bottom: -5px; left: 0; z-index: -1;}

.qna-wrap .qna-list { width: 100%; }
.qna-wrap .qna-list > ul { width: 100%; }
.qna-wrap .qna-list > ul > li { width: 100%; height: auto;}
.qna-wrap .qna-list > ul > li:last-child { padding: 10px 0; }

.qna-wrap .qna-list .qna-box { padding-left: 35px; padding-top: 60px; }
.qna-wrap .qna-list .qna-box > div { display: flex; padding-bottom: 10px; }
    .qna-wrap .qna-list .qna-box .hd-h3 { font-size: 26px; }
    .qna-wrap .qna-list .qna-box .hd-h4 { font-size: 22px; }
    .min50 { width: max-content; min-width: 35px; text-align: right; padding-right: 7px; box-sizing: border-box; }
    .q-txt {width: calc(100% - 40px); margin-top: 1px; line-height: 1.5; }
    .q-txt > span { color: var(--key-color); margin-right: 3px; } 
    .ans-txt { width: calc(100% - 40px); margin-top: -3px; }
    .ans-txt > p { line-height: 1.6; margin-top: 6px; }
    .ans-txt > p.lineup-txt { padding-left: 20px; text-indent: -20px; }
    .ans-txt > p.ex-txt { padding: 5px 0 5px 7px; margin-top: 10px; font-style: italic; color: var(--unactive-color); }

.qna-wrap .cir-dep1-wrap {}
.qna-wrap .cir-dep1-wrap .cir-dep1 { padding-left: 15px; position: relative; margin-bottom: 12px; }
.qna-wrap .cir-dep1-wrap .cir-dep1::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: var(--unactive-color); position: absolute; top: 9px; left: 0px;  }


/* 연관 서비스 */
.ft-wrap { margin-top: 60px; border-top: 1px solid #F0F0F0; }

.rel-word-wrap { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: nowrap; width: 50%; float: left; padding: 30px 0 50px 40px; box-sizing: border-box; } 
.rel-word-tit { padding-right: 60px; }
.rel-word-tit p { color: var(--unactive-color); }

.rel-word-cont > ul > li { width: max-content; }
.rel-word-cont > ul > li a { display: block; color: var(--unactive-color); padding-bottom: 7px; font-size: 18px; }
.rel-word-cont > ul > li a > span { display: inline-block; padding-right: 15px; margin-right: 15px; position: relative; }
.rel-word-cont > ul > li a > span::after { content: ''; width: 7px; height: 14px; background: url('../img/cont_ico_brct.png') no-repeat center/7px 14px; position: absolute; top: 5px; right: -3px; }
.rel-word-cont > ul > li a.out-link { font-weight: 400; }
.rel-word-cont > ul > li a.out-link::after { top: 4px; transform: translateY(0); }

.ps-charge-wrap { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: nowrap; width: 48%; float: right; padding: 30px 0; }
.ps-charge-tit { padding-right: 60px; }
.ps-charge-tit p { color: var(--unactive-color); }
.ps-charge-cont p { color: var(--unactive-color); }
.charge-part { padding-right: 15px; margin-right: 15px; position: relative; }
.charge-part::after { content: ''; width: 1px; height: 14px; background-color: var(--unactive-color); position: absolute; top: 1px; right: 0; }



/* 페이지별 별도 추가 스타일 (메뉴명에서 언더바를 하이픈으로만 바꿔서 사용) */
.wel-spr-1 .card-comp table td { font-size: 15px; text-align: left !important; }
.wel-spr-1 .card-comp table td span.bd-sub-txt1 { font-size: 15px; }
.wel-spr-1 .card-comp table td.t-bold { font-size: 17px; text-align: center !important; }

.good-ofc-1 .article-box { margin-bottom: 80px; }
.good-ofc-1 .article-box .imgwrap { width: 80%; max-width: 780px; margin: 0 auto 30px; }
.good-ofc-1 .article-box .cir-dep1-wrap .dsp-flex > li { width: calc(100% /3); }
.good-ofc-1 .article-box .cir-dep2 { padding-left: 25px; }

.good-env-4 .spot-box { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; flex-direction: column; }
.good-env-4 .spot-box .tab-menu-wrap { width: 100%; }

.good-env-4 .tab-menu-wrap ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-direction: row; align-content: flex-start; }
.good-env-4 .tab-menu-wrap li { width: calc(96% / 5); margin-right: 1%; padding: 12px 0px; margin-bottom: 1%; background-color: var(--info-bg-color); box-sizing: border-box; cursor: pointer;}
.good-env-4 .tab-menu-wrap li:hover { background-color: var(--info-bg-color); }
.good-env-4 .tab-menu-wrap li:nth-child(5n) { margin-right:0%; }
.good-env-4 .tab-menu-wrap li.on { background-color: var(--key-color); color:white; font-weight: 500; }
.good-env-4 .tab-menu-wrap li.off { display: none; cursor: initial; }
.good-env-4 .tab-menu-wrap li p { width:100%; text-align: center; }

.good-env-4 .spot-box .tab-list-wrap { width: 100%; }
.good-env-4 .tab-list-wrap > ul > li { width: 100%; display: none; }
.good-env-4 .tab-list-wrap > ul > li.on { display: block; }
.good-env-4 .tab-img-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding-top: 10px; }
.good-env-4 .tab-img-wrap img { max-width: 720px; margin: 0 auto; }

.good-env-4 .sec-wrap .sec .article-box.wkstation-tog { margin-bottom: 20px; }
.good-env-4 .sec-wrap .sec .article-box.wkstation-tog .list-box > ul > li.lst-wkstation > .article-box { margin-bottom: 100px; } 
.good-env-4 .sec-wrap .sec .article-box.wkstation-tog .toggle-box .sh-tog-box { padding-left: 0; }
.good-env-4 .sec-wrap .sec .article-box.wkstation-tog .toggle-box .sh-tog-name > span::before { height: 12px; }
.good-env-4 .table.vertical-tb table td img { max-width: 640px; margin: 30px 0; }

.good-car-2 .mbofc-wrap { padding-left: 15px; }
.good-car-2 .mbofc-wrap > ul > li { border: 1px solid #eee; padding: 20px; box-sizing: border-box; }
.good-car-2 .mbofc-box { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; flex-direction: row; flex-wrap: wrap; }
.good-car-2 .mbofc-box .mbofc-txt-wrap { width: calc(60% - 1px); border-right: 1px solid #eee; padding-top: 10px; }
.good-car-2 .mbofc-box .mbofc-img-wrap { width: 40%; padding-left: 20px; box-sizing: border-box; }

.bg-color-pink { background-color: var(--warn-bg-color); }
.bg-color-sky { background-color: #BFD4F240; }

.ex-wrap { display: flex; width: calc(100% - 12px); margin-left: 12px; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; padding-bottom: 30px; box-sizing: border-box; }
.ex-wrap .ex-box-cnt { width: 25%; position: relative; }
.ex-wrap .ex-box-cnt > p { width: max-content; padding: 15px 20px; background-color: var(--sub-txt-color); color: #fff; font-size: 19px; font-weight: 500; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.pros-wrap > ul { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: flex-start; }
.pros-wrap > ul > li { width: 180px; margin-right: 30px; position: relative; background-color: var(--info-bg-color); }
.pros-wrap > ul > li:last-child { margin-right: 0; }
.pros-wrap > ul > li:last-child::after { display: none; }
.pros-wrap > ul > li::after { content: ''; width: 30px; height: 30px; background-color: var(--info-bg-color); transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: 0; z-index: -1; }
.pros-wrap .pros-box { width: 100%; height: 180px;  background-color: var(--info-bg-color); padding: 25px 20px; box-sizing: border-box; }
.pros-wrap .pros-box > p { font-weight: 500; color: var(--key-color); }

.move-ovs-2 .pros-wrap > ul > li { height: 140px; }
.move-ovs-2 .pros-wrap > ul > li > p { width: 100%; line-height: 1; font-size: 21px; font-weight: 500; text-align: center; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }

/* 노트북까지 지원*/

/* 사이트맵 */
.site-menu-wrap > ul > li { margin-bottom: 60px; }
.site-menu-wrap .site-dep1 { width:430px; padding:17px 0px 15px 36px; font: 700 22px/100% 'HyundaiSansHead'; position: relative; background-color: #E9F2FF; border-radius: 15px; box-sizing: border-box; }
.site-menu-wrap .site-wel .site-dep1 {margin-top: 30px;}
.site-menu-wrap .site-dep1 p { line-height: 100%; }
.site-menu-wrap .site-dep1::after { content: ""; width:126px; height:66px; display: block; position: absolute; right:25px; bottom:5px; z-index: 1; background: url('../img/index_prim_menu1.png') no-repeat center/contain; }
.site-menu-wrap .site-good .site-dep1::after {  background: url('../img/index_prim_menu2.png') no-repeat center/contain; }
.site-menu-wrap .site-move .site-dep1::after {  background: url('../img/index_prim_menu3.png') no-repeat center/contain; }

.site-menu-wrap .site-dep2-menu > ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.site-menu-wrap .site-dep2-menu > ul > li { width:23%; height:290px; padding:25px 20px 30px; margin-top: 20px; margin-right: 2%; background-color: #F8F8FB; border-radius: 20px; box-sizing: border-box; }
.site-menu-wrap .site-dep2-menu > ul > li:nth-child(4n) { margin-right:0px; }
.site-menu-wrap .site-wel .site-dep2-menu > ul > li { height:320px; }
.site-menu-wrap .site-dep2-menu .site-dep2 { padding:0px 10px 15px; border-bottom: solid 1px rgb(153, 153, 153, 0.5); font: 500 21px/100% 'HyundaiSansHead'; }

.site-menu-wrap .site-dep3-menu { padding:15px 0px 0px 10px; font: 400 17px/100% 'HyundaiSansHead'; }
.site-menu-wrap .site-dep3-menu > ul > li { margin-bottom: 11px; font: 400 17px/100% 'HyundaiSansHead'; }
.site-menu-wrap .site-dep3-menu > ul > li a,.site-menu-wrap .site-dep3-menu > ul > li p { line-height: 100%; }

mark { background: yellow; }
mark.current { background: orange; }

.header .head.site-head { overflow: visible; }
.site-head .top-alert { padding:16px 30px; border:solid 1px #002C5F; border-radius: 0px 0px 15px 15px; position: absolute; right:0px; top:100%; color:#002C5F; box-sizing: border-box; background-color: #fff; }
.site-head .top-alert p { font:400 17px/100% 'HyundaiSansHead'; }
.site-head .search-in-body { display: flex; align-items: center; }
.site-head .search-box { width: 170px; margin-right: 10px; border-style: none; }
.site-head .search-box:focus { outline: none; }
.site-head input::-ms-clear,.site-head input::-ms-reveal{ display:none;width:0;height:0; }
.site-head input::-webkit-search-decoration,
.site-head input::-webkit-search-cancel-button,
.site-head input::-webkit-search-results-button,
.site-head input::-webkit-search-results-decoration{ display:none; }
.site-head .kwt-count { width: 42px; display: flex; justify-content: center; align-items: center; margin-right: 20px; color:var(--basic-txt-color); }
.site-head .prev-btn { width: 14px; height:7px; display: inline-block; margin: 0px 7px; background: url('../img/arw_ico_up.png') no-repeat center/contain; }
.site-head .next-btn { width: 14px; height:7px; display: inline-block; margin: 0px 7px; background: url('../img/arw_ico_up.png') no-repeat center/contain; rotate: 180deg; }
.site-head .clear-btn { width: 14px; height:14px; margin-left: 7px; background: url('../img/ico_x.png') no-repeat center/contain; }

@media screen and (max-width:1560px){
    .lf-lnb-wrap { padding-left: 20px; }
}


@media screen and (max-width:1400px){
    .dep2-wrap .dep2 > li:nth-child(4n) { margin-right: 10px; }
}