@charset "utf-8";

/* RESET */
:root {--color-mc:#5c584f;--color-pc:#da2128;--color-bk:#000;--color-df:#212121;--color-ct:#ccc;--color-cl:#eee;--color-ly:#f1e9df;--color-lg:#f3f3f3;--color-wt:#ffffff}
html,body,button,dl,dt,dd,div,form,fieldset,legend,h1,h2,h3,h4,h5,h6,input,select,textarea,ul,ol,li,p,pre,table,td,th,caption,a {margin:0;padding:0}
html {font-size:14px;font-size-adjust:none;-ms-text-size-adjust:none;-webkit-text-size-adjust:none}
body {margin:0;padding:0;color:var(--color-bk);font-family:Pretendard,apple-system,'Apple SD Gothic Neo','맑은 고딕',sans-serif;font-weight:400;line-height:1.2;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,h5{font-weight:600;font-size:16px}
strong {font-weight:400}
legend {display:block;position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px}
input,textarea,select {border:0;border-radius:0;background:0;font-size:14px;font-family:Pretendard,apple-system,'Apple SD Gothic Neo','맑은 고딕',sans-serif;vertical-align:top;box-sizing:border-box;outline:none}
textarea {width:100%;height:100%;border:0;border-radius:0;font-size:14px;resize:none}
textarea::placeholder {color:var(--color-ph)}
select {-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url('../images/web/common/bg_select.png') no-repeat top 19px right 17px/11px auto;color:var(--color-dc)}
button {border:0;background:0;font-weight:400;font-family:Pretendard,apple-system,'Apple SD Gothic Neo','맑은 고딕',sans-serif;color:var(--color-dc)}
a {color:var(--color-bk);cursor:pointer}
::placeholder {color:var(--color-ph)}
input:read-only, input:disabled {background:var(--color-lg);cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-calendar-picker-indicator {display:none;-webkit-appearance:none}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none;margin:0}
select::-ms-expand {display:none}
ol,ul {list-style:none}
a {text-decoration:none}
img {width:100%;vertical-align:top}
i, em {font-style:normal}
table {border-collapse:collapse;border-spacing:0;width:100%}
caption {display:block;position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px}
figure, figcaption {position:relative;margin:0;padding:0}

::-webkit-scrollbar {width:10px;height:10px;border-radius:10px;background:var(--color-wt)}
::-webkit-scrollbar-thumb {border-radius:10px;background:#e0e0e0}
::-moz-selection {background:#8f8f8f;color:var(--color-wt)}/* Code for Firefox */
::selection {background:#8f8f8f;color:var(--color-wt)}

/*
 **	z-index

    플로팅메뉴: 4;
    탑버튼: 5;
    familySite: 5;
    헤더: 6;
    gnb: 6;
 */

/*
 **	공통
 */
body {position:relative}
.bg_line {position:absolute;bottom:330px;left:0;right:0}
.blind {display:block;position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px}/* 숨김 텍스트 */
.essential {color:var(--color-pc)}/* font point color */
.logo {display:inline-block;position:relative;width:190px;vertical-align:top;z-index:1}
.logo a {display:block}
.contents {position:relative}
.moDis {display:none!important}
.maxWd {width:100%;max-width:1470px;margin:0 auto}

/*
 **	skip nav
 */
#skip_nav {width:100%;height:0;text-align:center;overflow:hidden}
#skip_nav a:focus, #skip_nav a:hover, #skip_nav a:active {overflow:visible;display:block;position:absolute;top:0;left:0;width:100%;height:50px;background-color:#3a3a3a;font-weight:700;font-size:18px;line-height:50px;color:var(--color-wt);text-decoration:underline;z-index:99}

/*
 ** 헤더
 */
.header {background:#efe5d9}
.header .header_inner {height:70px;margin:0 auto;padding:0 80px;background:rgba(255,255,255,1);transition:all .1s;box-sizing:border-box}
.header .header_maxWd {display:flex;flex-wrap:wrap;align-items:center;/* justify-content:center; */position:relative;width:100%;height:100%;margin:0 auto;z-index:6}
.header_maxWd > .logo {padding-left:87px}
.header .logo img {filter:brightness(0)}

.header_util {position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%}
.header_util .util_list {display:flex;align-items:center;justify-content:center;column-gap:87px;height:100%}
.header_util .util_item {position:relative;font-weight:700;font-size:18px}

.header .search {margin-left:auto}
.search .ip_search {width:160px;height:40px;padding:0 40px 0 14px;border:2px solid #1c1d1d;border-radius:100px;box-sizing:border-box}
.search .btn_search {position:absolute;top:0;right:0;width:39px;height:100%;background:url('../images/web/icon/ico_search_25.png') no-repeat left center/25px auto;box-sizing:border-box;z-index:1}

.header_inner .header_gnb {position:absolute;top:0;left:0;height:100%;z-index:1}
.header_gnb > .tog_btn {display:flex;justify-content:center;flex-direction:column;row-gap:9px;width:100%;height:100%}
.header_gnb > .tog_btn::after {content:'';display:block;width:100%;height:3px;margin:0 auto;background:#1c1d1d}
.header_gnb > .tog_btn::before {content:'';display:block;width:100%;height:3px;margin:0 auto;background:#1e1e1e}
.header_gnb .bar {display:block;position:relative;width:36px;height:3px;margin:0 auto;background:#1e1e1e}
.header_gnb .gnb_wrap {overflow:hidden;opacity:0;visibility:hidden;position:fixed;top:0;left:0;right:0;width:100%;height:0;/* border-top:2px solid var(--color-wt); */background:#1e1e1e;margin:0 auto;transition:all .3s;box-sizing:border-box;z-index:6}
.gnb_wrap .gnb_ttl {display:flex;align-items:center;column-gap:18px;position:relative;width:100%;max-width:1520px;margin:0 auto;padding:100px 120px 29px 120px;border-bottom:1px solid #adadad;font-weight:800;font-size:30px;color:var(--color-wt);box-sizing:border-box}
.gnb_wrap .gnb_ttl img {display:block;filter:none}
.gnb_wrap .gnb_ttl .tog_btn {display:flex;align-items:center;justify-content:center;position:absolute;top:84px;right:27px;width:50px;height:50px;border:1px solid var(--color-wt);border-radius:50%;box-sizing:border-box}
.gnb_wrap .gnb_ttl .tog_btn::before {content:'\2715';font-weight:300;font-size:30px;line-height:1;color:var(--color-wt);text-align:center}
.gnb_wrap .depth1 {overflow-y:auto;display:flex;justify-content:space-between;width:100%;max-width:1520px;max-height:calc(100% - 66px);margin:0 auto;padding:0 40px;box-sizing:border-box;overscroll-behavior:contain}
.gnb_wrap .depth1 a {color:var(--color-wt)}
.gnb_wrap .depth1 > .gnb_li {flex:1}
.gnb_wrap .depth1 .gnb_li a {display:block;padding:9px 0;font-size:18px;text-align:center}
.gnb_wrap .depth1 .gnb_li .depth1_ttl {position:relative;padding-top:56px;padding-bottom:39px;font-weight:700;font-size:25px}
.gnb_wrap .depth2 {padding-bottom:50px;box-sizing:border-box}
.gnb_wrap .depth3 {margin-bottom:45px}
.gnb_wrap .depth3 .gnb_li a {position:relative;padding-top:12px;padding-bottom:12px;font-size:18px}
.gnb_wrap .depth3 .gnb_li a::before {content:'\002D';margin-right:2px;color:var(--color-wt)}
.header_gnb.active .gnb_wrap {opacity:1;visibility:visible;height:100vh}

/* body.scroll .header_inner {position:fixed;top:0;left:0;right:0;width:100%;margin:0 auto;z-index:6} */

/* 헤더::화이트 */
body .header {position:fixed;top:0;left:0;right:0;width:100%;margin:0 auto;background-color:transparent;z-index:6}
body:not(.scroll) .header .header_inner {background-color:transparent}
body:not(.scroll) .header .logo img {filter:brightness(1)}
body:not(.scroll) .header .header_gnb .bar {background-color:#ffffff}
body:not(.scroll) .header .header_gnb >.tog_btn::before {background-color:#ffffff}
body:not(.scroll) .header .header_gnb >.tog_btn::after {background-color:#ffffff}
body:not(.scroll) .header .header_util .util_item a {color:#ffffff}
body:not(.scroll) .header .search .ip_search {border-color:#ffffff}
body:not(.scroll) .header .search .btn_search {background-image:url('../images/web/icon/ico_search_25_white.png')}

/*
 ** 푸터
 */
.footer {border-top:2px solid #5f5f5f;background:#1e1e1e}
.footer .logo {width:289px}
.footer .footer_info {position:relative;padding:87px 0 100px 0;border-bottom:2px solid #5f5f5f}
.footer .footer_desc {display:block;margin-bottom:66px;font-weight:700;font-size:30px;line-height:1.45;color:var(--color-wt)}
.footer .footer_company {font-weight:600;font-size:23px;color:#909090}
.footer .footer_company em {font-size:30px}
.footer .info_inner {position:relative}
.footer .info_inner .footer_util {position:absolute;top:13px;right:0}
.footer_util .util_list {display:flex;column-gap:10px}
.footer_util .util_item a {display:flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:20px;background:#5f5f5f}
.footer_util .util_item a img {width:auto}
.footer .info_item {display:flex;flex-wrap:wrap;gap:16px 4px;margin-top:43px;font-weight:500;font-size:18px;color:#909090}
.footer .info_item .info_ttl:not(:nth-child(3))::before {content:'';display:inline-block;width:2px;height:18px;margin:2px 16px 0 8px;background:#909090;vertical-align:top}
.footer .info_item .blind + .info_txt {width:100%}
.footer .copyright {display:block;margin-top:43px;font-weight:500;font-size:20px;color:#909090}
.footer .footer_menu {display:flex;align-items:center;position:relative;padding:58px 0 80px 0;box-sizing:border-box}
.footer .menu_wrap {margin-left:52px}
.footer .menu_list {display:flex;column-gap:43px;position:relative}
.footer .menu_item :where(a, button) {font-weight:600;font-size:16px;color:#909090;box-sizing:border-box}
.footer .menu_item :where(a, button)::after {content:'';display:inline-block;width:14px;height:14px;margin:4px 0 0 7px;background:url('../images/web/icon/ico_arr_upward_16.png') no-repeat top left/auto 100%;vertical-align:top}
.footer .menu_item.emphasis :where(a, button) {font-size:18px;color:var(--color-wt)}
.footer .menu_item.emphasis :where(a, button)::after {margin-top:5px;background-position-x:100%}
.footer .menu_item {display:flex;align-items:center;position:relative}
.footer .menu_item .logo {width:289px}
.footer_menu .biz_wrap {position:absolute;top:48px;right:10px;z-index:5}
.footer_menu .biz_wrap .biz_btn {display:flex;align-items:center;justify-content:center;width:240px;height:55px;border:3px solid #7d7d7d;border-radius:30px;background:#1e1e1e;font-weight:600;font-size:18px;color:#7d7d7d;box-sizing:border-box}
.footer_menu .biz_wrap .biz_btn::after {content:'';margin-left:15px;width:9px;height:6px;background:url('../images/web/icon/ico_arr_up_9.png') no-repeat center/100% auto}
.biz_wrap .biz_btn::before {content:'';display:block;position:absolute;top:-10px;left:0;width:100%;height:10px}
.biz_wrap .biz_pos {display:none;position:absolute;bottom:61px;right:0;width:100%;padding:25px 29px 21px 29px;border:3px solid #7d7d7d;border-radius:30px;background:#1e1e1e;box-sizing:border-box}
.biz_wrap .biz_pos .biz_group {display:flex;align-items:center;padding:10px 0 5px 0;font-weight:600;font-size:12px;line-height:1;color:#7d7d7d}
.biz_wrap .biz_pos .biz_group::after {content:'';width:100%;height:1px;margin-left:10px;background:#7d7d7d}
.biz_wrap .biz_pos .biz_item a {font-weight:600;font-size:18px;line-height:1.55555;color:#e9e9e9}
.biz_wrap.active .biz_pos {display:block}
.biz_wrap.active .biz_btn::after {background-image:url('../images/web/icon/ico_arr_down_9.png')}

/*
 ** 플로팅 메뉴
 */
.floating_wrap {display:flex;align-items:center;justify-content:center;position:sticky;left:0;bottom:-35px;padding-bottom:65px;z-index:4;box-sizing:border-box}
.floating_menu {display:flex;align-items:center;justify-content:center}
.floating_panel {opacity:0;max-width:90px;padding:8px 10px;border-radius:100px;background:#8f8f8f;transform:translate3d(0,calc(100% + 30px),0);transition:opacity .5s, transform .5s,max-width .5s .3s,-webkit-transform .5s;box-sizing:border-box}
.panel_group {opacity:0;overflow:hidden;display:flex;gap:0 8px;transition:opacity .4s .8s;white-space:nowrap}
.panel_group .panel_item {overflow:hidden;/* flex:1; */border-radius:100px}
.panel_group .panel_item a {display:flex;align-items:center;justify-content:center;min-width:208px;height:50px;font-weight:600;font-size:18px;color:var(--color-wt);transition:all .2s}
.panel_group .panel_item a::before {content:'';display:inline-block;width:30px;height:30px;margin-right:12px;background:no-repeat center/100% auto;vertical-align:top}
.panel_group .panel_item.esg a::before {background-image:url('../images/web/icon/ico_esg_44.png')}/* ESG경영 */
.panel_group .panel_item.cs a::before {background-image:url('../images/web/icon/ico_cs_44.png')}/* 고객의 소리 */
.panel_group .panel_item.recruit a::before {background-image:url('../images/web/icon/ico_recruit_45.png')}/* 채용 */
.panel_group .panel_item:where(.on, :hover) a {background:#0c0c0c}
.floating_menu.show .floating_panel {opacity:1;max-width:100%;transform:translateZ(0)}
.floating_menu.show .panel_group {opacity:1}

/*
 ** 퀵메뉴
 */
.quick_menu {position:fixed;bottom:190px;right:50%;margin-right:-735px;z-index:5}
.quick_menu .btn_top {opacity:0;display:block;width:58px;height:60px;border-radius:50%;background:url('../images/web/icon/ico_arr_top_58.png') no-repeat center/100% auto;transition:all .2s}
body.scroll .btn_top {opacity:1}

/* 해상도_1470 */
@media screen and (max-width:1470px) {
    /* 헤더 */
    .header .header_inner {padding:0 30px 0 100px}
    .header .logo {width:220px;padding-left:0}
    .header_inner .header_gnb {left:-57px}
    /* .header_util {position:revert;margin-right:0} */
    .header_util .util_list {column-gap:50px}

    .gnb_wrap .gnb_ttl {padding-left:25px;padding-right:25px}
    .gnb_wrap .depth1 {padding-left:0;padding-right:0}

    /* 탑버튼 */
    .quick_menu {right:25px;margin-right:0}

    /* 푸터 */
    .footer .footer_info {padding-left:13px;padding-right:13px}
    .footer .info_inner .footer_util {position:revert}
    .footer .footer_desc {margin-bottom:40px}
    .footer_util .util_list {justify-content:center;column-gap:8px;margin-bottom:40px}
    .footer .footer_menu {flex-direction:column;align-items:flex-start;row-gap:30px;padding-left:14px;padding-right:14px}
    .footer .menu_list {flex-wrap:wrap;column-gap:24px}
    .footer .menu_item :where(a, button) {font-size:18px}
    .footer .menu_item.emphasis :where(a, button) {font-size:20px}
    .footer .menu_wrap {margin-left:0}
}

/* 해상도_1200*/
@media screen and (max-width:1200px) {
    .header_util {position:revert;transform:none;margin-left:auto}
    .header .search {display:none}
}


/* 해상도_960 */
@media screen and (max-width:960px) {   
    /* 헤더 */
    .header .logo {width:208px}
    .header .logo a {padding:17px 0 3px 0}
    .header .header_inner {height:auto;padding:0 10px}
    .header .header_maxWd {align-content:flex-start;justify-content:center}
    .header_util {width:100%}
    .header_util .util_list {justify-content:space-evenly;column-gap:normal}
    .header_util .util_item {Font-weight:400;font-size:16px}
    .header_util .util_item a {display:block;padding:10px 0 11px 0}
    .header_inner .header_gnb {left:7px}
    .header_gnb > .tog_btn {justify-content:flex-start;row-gap:4px;padding-top:16px;box-sizing:border-box}
    .header_gnb > .tog_btn::before {height:2px}
    .header_gnb > .tog_btn::after {height:2px}
    .header_gnb .bar {width:18px;height:2px}

    .header_gnb .gnb_wrap {background:var(--color-wt)}
    .gnb_wrap .gnb_ttl {column-gap:10px;padding:20px 16px;font-size:16px;background:#1e1e1e}
    .gnb_wrap .gnb_ttl .tog_btn {top:16px;right:20px;width:24px;height:24px}
    .gnb_wrap .gnb_ttl .tog_btn::before {font-size:14px}
    .gnb_wrap .depth1 {flex-direction:column;max-height:calC(100dvh - 60px);padding:0;background:var(--color-wt)}
    .gnb_wrap .depth1 a {color:var(--color-df)}
    .gnb_wrap .depth1::-webkit-scrollbar {display:none}
    .gnb_wrap .depth1 > .gnb_li {border-bottom:1px solid var(--color-ct)}
    .gnb_wrap .depth1 .gnb_li .depth1_ttl {padding:10px 20px;font-weight:500;font-size:16px}
    .gnb_wrap .depth1 .gnb_li .depth1_ttl::before {content:'';display:block;position:absolute;bottom:-1px;left:0;width:100%;height:2px;z-index:1}
    .gnb_wrap .depth1 .gnb_li.company .depth1_ttl:before {background-color:#ed5534}/* company */
    .gnb_wrap .depth1 .gnb_li.business .depth1_ttl:before {background-color:#45ace3}/* business */
    .gnb_wrap .depth1 .gnb_li.brand .depth1_ttl:before {background-color:#ffb400}/* brand */
    .gnb_wrap .depth1 .gnb_li.esg .depth1_ttl:before {background-color:#4abe57}/* esg */
    .gnb_wrap .depth1 .gnb_li.cs .depth1_ttl:before {background-color:#e3c105}/* 고객지원 */
    .gnb_wrap .depth1 .gnb_li.recruit .depth1_ttl:before {background-color:#ab17e1}/* 채용 */
    .gnb_wrap .depth1 .gnb_li:has(.depth2) .depth1_ttl::after {content:'';display:block;position:absolute;top:50%;right:22px;transform:translateY(-50%) rotate(-135deg);width:6px;height:6px;margin-top:2px;border:solid var(--color-df);border-width:0 1px 1px 0;transition:all .2s}
    .gnb_wrap .depth1 .gnb_li a {padding:12px 20px;font-size:14px;text-align:left}
    .gnb_wrap .depth2 {margin-bottom:-1px;padding:0;border-top:1px solid var(--color-ct)}
    .gnb_wrap .depth2  br {display:none}
    .gnb_wrap .depth2 > .gnb_li {border-bottom:1px solid var(--color-ct);background:#f4f4f4}
    .gnb_wrap .depth2_ttl {font-weight:500}
    .gnb_wrap .depth3 {display:flex;flex-wrap:wrap;position:relative;margin:0;border-top:1px solid var(--color-ct);background:var(--color-wt)}
    .gnb_wrap .depth3::after {content:'';display:block;position:absolute;bottom:-1px;left:0;width:100%;height:1px;background-color:#e2e2e2}
    .gnb_wrap .depth3 .gnb_li {flex-shrink:0;width:50%;box-sizing:border-box}
    .gnb_wrap .depth3 .gnb_li:nth-child(odd) {border-right:1px solid #e2e2e2}
    .gnb_wrap .depth3 .gnb_li a::before {display:none}
    .gnb_wrap .depth3 .gnb_li a::after {content:'';display:block;position:absolute;bottom:-1px;left:0;width:100%;height:1px;background-color:#e2e2e2}
    .gnb_wrap .depth1 .gnb_li.close .depth1_ttl::before {display:none}
    .gnb_wrap .depth1 .gnb_li.close .depth1_ttl::after {transform:translateY(-50%) rotate(45deg);margin-top:-2px}
    .gnb_wrap .depth1 .gnb_li.close .depth2 {display:none}

    /* 플로팅 */
    .floating_wrap {bottom:0;padding-bottom:20px}
    .floating_menu {width:100%;padding:0 8px;box-sizing:border-box}
    .floating_panel {max-width:50px;width:100%;padding:5px}
    .panel_group {column-gap:7px}
    .panel_group .panel_item {flex:1}
    .panel_group .panel_item a {min-width:0;height:40px;font-size:12px}
    .panel_group .panel_item a::before {width:20px;height:20px;margin-right:8px}
    .panel_group .panel_item.recruit a::before {width:19px;height:19px}

    /* 탑버튼 */
    .quick_menu {bottom:130px;right:14px}
    .quick_menu .btn_top {width:40px;height:40px}

    /* 푸터 */
    .footer {border-width:1px}
    .footer .logo {width:148px}

    .footer .footer_info {padding-top:19px;padding-bottom:28px;border-width:1px}
    .footer .footer_desc {margin-bottom:16px;font-size:20px;line-height:33px}
    .footer_util .util_item a {width:62px;height:62px;border-radius:10px}
    .footer_util .util_item.naver a img {width:32px}
    .footer_util .util_item.ssg a img {width:40px}
    .footer_util .util_item.youtube a img {width:36px}
    .footer_util .util_item.instagram a img {width:29px}
    .footer .footer_company {font-size:12px}
    .footer .footer_company em {font-size:15px}
    .footer .info_item {gap:8px 2px;margin-top:21px;font-size:13px}
    .footer .copyright {margin-top:21px;font-size:13px}
    .footer .info_item .info_ttl:not(:nth-child(3))::before {width:1px;height:10px;margin:1px 6px 0 3px}

    .footer .footer_menu {row-gap:22px;padding-top:18px;padding-bottom:20px}
    .footer .menu_list {gap:5px 18px}
    .footer .menu_item :where(a, button) {font-size:12px}
    .footer .menu_item.emphasis :where(a, button) {font-size:13px}
    .footer .menu_item :where(a, button)::after {width:10px;height:10px;margin:2px 0 0 3px}
    .footer .menu_item.emphasis :where(a, button)::after {margin-top:3px}

    .footer_menu .biz_wrap {position:relative;top:0;left:0;width:100%}
    .footer_menu .biz_wrap .biz_btn {width:100%;height:42px;border-width:2px;font-size:14px}
    .biz_wrap .biz_pos {overflow-y:auto;max-height:60dvh;border-width:2px;overscroll-behavior:contain}
    .biz_wrap .biz_pos .biz_group {font-size:11px}
    .biz_wrap .biz_pos .biz_item a {font-size:14px}
    .biz_wrap.active .biz_pos {bottom:52px;padding:20px 20px}
}

/* 모바일ver_640 */
@media screen and (max-width:640px) {
    .header .logo {width:138px}
    .header_util .util_item {font-size:10px}
    
    .panel_group .panel_item a {font-size:12px}

    .footer_util .util_list {margin-bottom:24px}
    .footer .info_item {font-size:10px}
    .footer .copyright {font-size:10px}
    .footer .menu_item :where(a, button) {font-size:10px}
    .footer .menu_item.emphasis :where(a, button) {font-size:11px}
    .footer .menu_item :where(a, button)::after {width:8px;height:8px}
}