@charset "utf-8";

/**************************************************
*
*   layout.css
*
***************************************************/
/* 본문 바로가기 */
#skip-nav {width: 100%; padding: 8px 0; background-color: #1D1D1D; color: #fff; text-align: center; position: fixed; top: 0; left: 0;  z-index: 10000; display: block; transition: none; transform: translateY(-100%); font-size: 15px;}
#skip-nav:focus {transform: translateY(0); outline-offset: -0.4rem; outline: 2px dotted red;}

/* WRAP */
#wrap {/*min-height: 100dvh; */display: flex; flex-direction: column; /* overflow-x: hidden; */}








/* header(헤더) */
#hd {padding: 0 20px; border-bottom: 1px solid #D9D9D9; position: relative; z-index: 70; background: #fff;min-width: 1360px;}
#hd.main :where(#hd-top, #hd-bot) {width: 1360px;}

#hd-top {width: 1360px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding-top: 28px;}
#hd-top .logo-box {display: flex; align-items: flex-end; gap: 25px;}
#hd-top .logo-box .link-list {--gap: 11px; display: flex; color: #767475; font-size: 20px; font-weight: 600; gap: var(--gap);}
#hd-top .logo-box .link-list li {position: relative; padding-right: var(--gap);}
#hd-top .logo-box .link-list li:not(:last-of-type)::after {content: ""; width: 1px; height: 60%; background-color: #767475; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
#hd-top .logo-box .link-list li.active {color: #2770d5; padding-right: 23px;}
/*#hd-top .logo-box .link-list li.active::before {content: ""; aspect-ratio: 1 / 1; width: 8px; border-radius: 50%; background-color: #3084FA; position: absolute; top: -2px; right: 11px;}*/
#hd-top .util-list {--h: 36px; font-size: 14px; display: flex; gap: 14px;}
#hd-top .util-list > a {height: var(--h);padding: 0 15px;display: flex;justify-content: center;align-items: center;gap: 8px;font-weight: 600;color: #0d72bc;border-radius: 18px;background-color: #eefaff;border: 1px solid #80bdff;}
#hd-top .util-list > a:first-of-type {background: #fff; color: #2C2C2C;border-radius: 18px;background-color: #fff;border: 1px solid #ddd;}

#hd-top .util-list .srch-box {width: 200px; height: var(--h); border-bottom: 1px solid #DEDEDE; position: relative; padding-right: 30px;}
#hd-top .util-list .srch-box input {width: 100%; height: 100%; border: none;}
#hd-top .util-list .srch-box input:focus-visible {outline: none;}
#hd-top .util-list .srch-box .btn-srch {position: absolute; top: 50%; right: 0; transform: translateY(-50%);background: url(/cloud/w/img/common/icon_search-24c66d0d7311f4b2e279585875d38a28.svg) center no-repeat;background-size: 100%;width: 20px;height: 22px;} 

#hd-bot {width: 1360px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
#hd-bot .util-list {display: flex; align-items: center; gap: 15px;}
#hd-bot .util-list .btn-login-in-out {padding: 5px 21px; font-size: 15px; font-weight: 600; color: #0074d2; border: 1px solid #0074d2; border-radius: 25px;}
#hd-bot .util-list .btn-setting {display: inline-flex; align-items: center; gap: 6px; font-size: 16px;}
#hd-bot .util-list .btn-setting::before {content: ""; width: 17px; height: 17px; background: url(/cloud/w/img/common/icon_setting-21d23a9f7b0347d6f8a6414a654893e8.svg) no-repeat; margin-bottom: 2px;}
#hd-bot .util-list .user-info {font-size: 16px; color: #D14800; font-weight: 700;text-align: right; max-width: 200px;width: 200px;overflow: hidden;text-overflow: ellipsis;display: inline-block;white-space: nowrap; padding-right: 1px;}
#hd-bot .util-list .sub-menu-wrap {position: relative;}
#hd-bot .util-list .sub-menu-trigger::before {content: ""; width: 31px; height: 25px; background: url(/cloud/w/img/common/icon_sitemap-a0e156ede69ca109f260263103554acb.svg) no-repeat; display: block;}
#hd-bot .util-list .sub-menu-trigger.active::before {content: ""; width: 31px; height: 31px; background: url(/cloud/w/img/common/icon_submenu_cls_btn-467818e704a2c75daff186c7e21448ce.svg) no-repeat center; display: block;}
#sub-menu-list {position: absolute; right: 0; top: 120%; padding: 30px 20px; border-radius: 16px; border: 1px solid #d9d9d9; min-width: 244px; background: #fff; display: none;}
#sub-menu-list.active {display: block;}
#sub-menu-list > a {display: block; font-size: 19px; font-weight: 600; padding-bottom: 16px; border-bottom: 1px solid #d9d9d9;}
#sub-menu-list > a:hover {color: #024BB2;}
#sub-menu-list > a:last-of-type {margin-top: 32px;}
#sub-menu-list ul {display: flex; flex-direction: column; gap: 8px; margin-top: 24px;}
#sub-menu-list ul li a {display: flex; align-items: center; gap: 8px; font-weight: 500; color: #111;}
#sub-menu-list ul li a::before {content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: #6b6b6b;}
#sub-menu-list ul li a:hover {text-decoration: underline;}
#sub-menu-list ul li a:hover::before {background: var(--career--primary);}

/* PC 메인 메뉴 */
#gnb{}
#gnb ul li{color: #2C2C2C;}
#gnb ul li a{display: block;}
#gnb .dep1{display: flex; align-items: center; margin-left: -23px;}

#gnb .sub-menu-cmn{display: none; width: 100%; position: absolute; top: 100%; left: 0; border-top: 1px solid #D9D9D9; }
#gnb .sub-menu-cmn .inner{display: flex; width: 1360px; min-height: 250px; margin: 0 auto; background-color: #fff;}

#gnb .sub-menu-cmn .gnb-tit-wrap{width: 400px; background:url(/cloud/w/img/common/hd_gnb_bg_01-a215d5c7c661af76de18b8f120a78c8a.png) bottom right no-repeat #F1F5F5; display: flex; flex-direction: column; align-items: flex-end; }
#gnb .sub-menu-02 .gnb-tit-wrap{background:url(/cloud/w/img/common/hd_gnb_bg_02-d6a03f9a1857127061354cf016dd305d.png) bottom right no-repeat #F1F5F5;}
#gnb .sub-menu-03 .gnb-tit-wrap{background:url(/cloud/w/img/common/hd_gnb_bg_03-65dd3adcb523cfb06314c46048901c73.png) bottom right no-repeat #F1F5F5;}
#gnb .sub-menu-04 .gnb-tit-wrap{background:url(/cloud/w/img/common/hd_gnb_bg_04-378f8d5e3d0e30a51b5f298af21d520d.png) bottom right no-repeat #F1F5F5;}
#gnb .sub-menu-05 .gnb-tit-wrap{background:url(/cloud/w/img/common/hd_gnb_bg_05-771fcc48a93c62bf10f4f1b6fa548cff.png) bottom right no-repeat #F1F5F5;}
#gnb .sub-menu-06 .gnb-tit-wrap{background:url(/cloud/w/img/common/hd_gnb_bg_06-7003c0e3e2442ba2347659ab94be75b6.png) bottom right no-repeat #F1F5F5;}
#gnb .sub-menu-cmn .gnb-tit-wrap::before{content: ''; background-color: #F1F5F5; width: 100%; height: 100%; position: absolute; z-index: -1;}
#gnb .sub-menu-cmn .gnb-tit-wrap .gnb-tit{font-size: 24px; width: 100%; font-weight: 600; margin-bottom: 5px; padding-top: 38px;}
#gnb .sub-menu-cmn .gnb-tit-wrap .gnb-exp{font-size: 16px; color: #666; width: 100%;}
#gnb .sub-menu-cmn .gnb-menu-wrap{padding: 30px 35px; padding-bottom: 30px; width: 100%; box-sizing: border-box;}
#gnb .sub-menu-cmn .gnb-menu-wrap::after{content: ''; background-color: #fff; position: absolute; right: 0; top: 0; width: 100%; height: 100%;z-index: -2;}

/* 1뎁스 */
#gnb .dep1 > li {font-size: 20px; font-weight: 600; padding: 30px 23px 25px 23px;}
#gnb .dep1 > li.on {padding-bottom: 20px; border-bottom: 5px solid #024BB2;}

/* 2뎁스 */
#gnb .dep2{display: flex; flex-wrap: wrap; gap: 30px;}
#gnb .dep2 > li{font-size: 18px; font-weight: 600; width: calc(25% - 23px);}
#gnb .dep2 > li:hover{color: #024BB2;;}
#gnb .dep2 > li > a{padding-bottom: 10px; border-bottom: 1px solid #D9D9D9; display: flex; justify-content: space-between; align-items: center;}
#gnb .dep2 > li img{display: none; width:13px; height: 7px;}

#gnb .dep2.d2-w50 > li{width:calc(50% - 20px);}
/* #gnb .sub-menu-06 .dep2 > li:first-child{width: 215px;} */

/* 3뎁스 */
#gnb .dep3{display: flex; flex-wrap: wrap; padding-top: 15px; gap: 10px;}
#gnb .dep3 li{display: flex; font-size: 16px; font-weight: 500; width: 100%;}
#gnb .dep3 li::before{content: ''; background: #6B6B6B; width: 5px; height: 5px; border-radius: 50%; display: block; margin-right: 10px; margin-top:9px; }
#gnb .dep3 li:is(:hover, :focus){color: #024BB2; font-weight: 600;}
#gnb .dep3 li:is(:hover, :focus)::before{background: #024BB2;}

#gnb .sub-menu-06 .dep3{align-items: flex-start;}
#gnb .dep3.d3-w50 li {width: calc(50% - 14px);} 

.gnb-backdrop {position: fixed; top: 0; right: 0; width: 100%; height: 100%; z-index: 60; background-color: rgba(0, 0, 0, 0.5); display: none;}




/* Container */
#container {padding: 25px 20px 80px; position: relative;}
#inner {margin: 0 auto;}
#inner.type-02 {width: 1280px;}
#inner.type-02 #content {width: 100%; display: flex; gap: 30px;}
#inner.type-02 #content .content {width: 100%;}
.com-inner-1360 {margin: 0 auto; width: 1360px;}



/* SNB */
#snb {flex-shrink: 0; width: 260px;}
#snb .dep-list-01 > li {border-bottom: 1px solid #D8D8D8;}
#snb .dep-01 {min-height: 64px; padding: 10px 40px 10px 8px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; transition: none;}
#snb .dep-01:has(+ .dep-list-02) {background-image: url(/cloud/w/img/common/icon_angle_down-0213b2cf8f925283505fb8cacfded4fa.svg); background-repeat: no-repeat; background-position: center right 10px;}
#snb .dep-01.active {background-image: url(/cloud/w/img/common/icon_angle_up_blue-07e9f8602b1978ddea170b02266a5f98.svg); color: #003675; border-bottom: 3px solid #003675;}
#snb .dep-01.active:not(:has(+ .dep-list-02)) {background: none;}
#snb .dep-list-02.active {display: block;}
#snb .dep-01:hover {background-color: #f4f5f6;}
#snb .dep-list-02 {padding: 16px 0; display: none;}
#snb .dep-02 {display: block; position: relative; padding: 14px 16px 14px 28px; border-radius: 8px;}
#snb .dep-02:not(.active):hover {text-decoration: underline; text-underline-position: under;}
#snb .dep-02::before {content: ""; aspect-ratio: 1 / 1; width: 4px; border-radius: 50%; position: absolute; top: 24px; left: 15px; background-color: #2d2d2d;}
#snb .dep-02.active {color: #003675; background-color: #EDF1F5;}













/* footer(푸터) */
#ft {padding: 0 15px; background-color: #F5F5F5; border-top: 1px solid #ddd; /*margin-top: auto;*/}
#ft.main :where(#ft-top, #ft-bot) {width: 1360px;}

#ft-top {width: 1280px; margin: 0 auto; padding: 0 0 24px; border-bottom: 1px solid #ddd;}
#ft-top .info-box {display: flex; align-items: center; justify-content: space-between; margin-top: 28px; gap: 40px;}
#ft-top .info-box .txt {color: #555; line-height: 1.6; width: calc(100% - 400px);}
#ft-top .info-box .img-list {flex-shrink: 0; display: flex; align-items: center; gap: 25px;margin: 0 0 20px 0;}
#ft-top .info-box .img-list li a {display:block;} /* 웹접근성 추가 RHD 20250825 */
#ft-bot {width: 1280px; margin: 0 auto; padding: 21px 0 50px; display: flex; align-items: center; justify-content: flex-end; gap: 24px;}
#ft-bot .link-box {color: #717171; margin-right: auto;}
#ft-bot .link-box .list {display: flex; flex-wrap: wrap; align-items: center; gap: 5px 30px;}
#ft-bot .link-box .list a {transition: none;}
#ft-bot .link-box .list li.active a {color: #c64534; font-weight: 800;}
#ft-bot .link-box .copyright {font-size: 15px; margin-top: 23px;}
#ft-bot .sns-list {flex-shrink: 0; display: flex; gap: 13px;}

#ft-top .info-box button::after{content:''; display: inline-block; width: 17px; height: 17px; background:url(/cloud/w/img/common/icon_copy-9b056b1cc98d96d96b280b239a3ad6f2.png) no-repeat; vertical-align: middle; margin-bottom: 2px;}
#ft-top .info-box .main-family-site button::after{display: none;}






@media screen and (max-width: 1400px) {
    #wrap {width: fit-content;}
    #gnb .gnb-toggle-wrap .gnb-main-list {margin: 0;}

}




/* 패밀리 사이트 */
#ft-top .ft-r{display: flex;flex-wrap: wrap;justify-content: flex-end;}
.main-family-site {position: relative; margin-bottom: 20px;display: inline-block;}
.main-family-site .family-toggle {margin-left: auto; font-size: var(--body-s-400);width: 240px; height: 53px; display: flex; align-items: center; padding: 20px; background: #fff url(/cloud/w/img/common/icon_plus-009dd92b02238949af75063bde88a24f.svg) no-repeat right 20px center; border: 1px solid var(--career--gray-40); cursor: pointer;}
.main-family-site .family-menu {position: absolute; top: 99%; right: 0; width: 240px; background: #fff; border: 1px solid var(--career--gray-40); display: none;}
.main-family-site.open .family-menu {display: block;}
.main-family-site .family-menu a {display: block; font-size: var(--body-s-400); padding: 12px 20px;}
.main-family-site .family-menu a:hover {background: var(--career--secondary-5);}