@import url("/site/esg/css/font.css");
@import url("/site/esg/css/reset.css");

/* 바로가기 */
#skip_new { position:absolute; top: -100px; left: 0; width: 100%; z-index:99999; }
#skip_new a:link {color: transparent; }
#skip_new a:focus { position: absolute; width: 100%; top: 100px; left:0; padding: 0 20px; z-index: 99999; text-align: center; font-size: 16px; line-height:36px; color: #fff; background: #000; overflow: visible; clip: unset; }

/* 텍스트말줄임 */
.text_wrap {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: inherit; color: inherit; font-weight: inherit; }
.text_wrap2 {display: block; overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: inherit; color: inherit; font-weight: inherit; }

/* layout */
#new_container {margin-top: 146px;}
.new_inner {max-width: 1450px; margin: 0 auto; padding: 0 20px;}
.main_tit {font-size: 38px; font-weight: 600; letter-spacing: -0.95px; width: fit-content; }
.txt_line {text-decoration: underline; color: inherit; font-size: inherit; font-weight: inherit;}

/* tab */
.tab_list {display: flex;}

/* header */
#new_header {position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; background: #fff; }
#new_header .h_top { border-bottom: 1px solid #E7E8EC; }
#new_header .h_top .new_inner {display: flex; justify-content: space-between; align-items: center; height: 83px;}
#new_header .h_top .new_inner .logo a {display: initial;}
#new_header .gnb {position: initial; }
#new_header .gnb .link_item .family_open {display: flex; align-items: center; gap: 10px; font-family: 'SCDream'; font-size: 15px; font-weight: 300; color: #8A9096; padding: 0; }
#new_header .gnb .link_item .family_open::before {display: none;}
#new_header .gnb .link_item .family_open::after {content: '';position: static; width: 14px; height: 14px; background: url('/site/esg/images/ic_toggle.svg') no-repeat center center; background-size: cover;}
#new_header .gnb_wrap {position: relative;}
#new_header .gnb_wrap .new_gnb .depth1 {margin: 0 auto; display: flex; justify-content: center; gap: 20px;}
#new_header .gnb_wrap .new_gnb .depth1 > li {font-size: 20px; font-weight: 500; width: 250px; text-align: center; }
#new_header .gnb_wrap .new_gnb .depth1 > li > a {position: relative; margin: auto; width: fit-content;text-align: center; display: flex; justify-content: center; align-items: center; height: 64px; color: inherit; }
#new_header .gnb_wrap .new_gnb .depth1 > li > a::before {content: ''; position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); bottom: 0; width: 0px; height: 2px; background: #933178; transition: 0.2s; }
#new_header .gnb_wrap .new_gnb .depth1 > li > a:focus::before,
#new_header .gnb_wrap .new_gnb .depth1 > li > a:hover::before {width: 100%;}
#new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap {display: none; position: absolute; top: 63px; left: 0; width: 100%; border-top: 1px solid #E7E8EC; background: #fff; padding: 30px 0; }
#new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 {max-width: 1060px; text-align: center; gap: 20px; display: flex; margin: 0 auto; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; text-align: center;}
#new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li { width: 250px; text-align: center; margin-bottom: 20px; font-size: 18px; font-weight: 500; }
#new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li > a { color: inherit; }
#new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li.on > a,
#new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li > a:focus,
#new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li > a:hover { color: #933178; text-decoration: underline; text-underline-offset: 3px; }
#new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li > .depth3 { margin-top: 16px; text-align: center;}
#new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li > .depth3 > li { font-size: 16px; font-weight: 400; color: #666; line-height: 2;}
#new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li > .depth3 > li > a { color: inherit; }
#new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li > .depth3 > li > a:focus,
#new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li > .depth3 > li > a:hover { color: #111; }
#new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li > .depth3 > li > a::before { content: '-'; margin-right: 4px; }
#new_header .gnb_wrap .new_gnb .depth1 > li .btn_depth { display: none; }
#new_header .mo_btn_wrap { position: absolute; max-width: 1450px; width: 100%;bottom: 0px; z-index: 1;left: 50%;transform: translateX(-50%);}
#new_header .mo_btn_wrap .btn_search { position: absolute; bottom: 20px;right: 20px; }
#new_header .mo_btn_wrap .btn_search img {max-width: initial; }
#new_header .mo_gnb_btn { display: none; width: 20px; height: 17px; background: url('/site/esg/images/btn_menu.svg') no-repeat center center; background-size: cover; }
#new_header .mo_gnb_btn_close { display: none; width: 30px; height: 30px; background: url('/site/esg/images/btn_menu_close.svg') no-repeat center center; background-size: cover; }
#new_header .gnb button.site_anchor:hover {border:none;}

/* 패밀리 사이트 */
.clearfix{display:block;}
.clearfix:after{content:"";display:table;clear:both}
.gnb .link_item.family .family_anchor {padding: 4px 0;font-size: 15px;line-height: 18px;color:#52535e;letter-spacing: -0.03em;}
.gnb .link_item.family:before{display:block; visibility:hidden; opacity:0; position:fixed; top:0; left:0; z-index:10; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.5); transition-property:visibility, opacity; transition-duration:0.25s; transition-timing-function:linear;}
.gnb .link_item.family .family_content{display: none;position: fixed;top: 0;left: calc(50% - 705px);z-index: 50;width: 1410px;height: calc(100vh - 60px);margin: 30px 0;padding: 62px 40px 40px;border-radius: 40px;background-color: #f7f8fc;text-align: center;}
.gnb .link_item.family .family_content .sub_title{margin-bottom:10px;font-size:18px;line-height:24px;color:#414a73;font-weight: 400;font-family: 'CoreDream';}
.gnb .link_item.family .family_content .family_list {margin-top:44px;border-radius: 5px;overflow: hidden;}
.gnb .link_item.family .family_item {display: inline-block;position:relative;min-height: auto;margin-right:2px;vertical-align: top;box-shadow: -10px 0 30px rgba(65, 74 ,115,0.05);}
.gnb .link_item.family .family_item.n1 .list_box{padding: 16px 20px 35px 30px;}
.gnb .link_item.family .family_item.n1 {width:378px;}
.gnb .link_item.family .family_item.n1 .list_item {display: inline-block;width:50%;margin-bottom: 20px;}
.gnb .link_item.family .family_item.n1 .list_item span {margin-bottom: 8px;font-size:17px;line-height:20px;color:#414a73;font-weight: 600;}
.gnb .link_item.family .family_item.n1 .list_item li {width:100%;}
.gnb .link_item.family .family_item.n2 {width:192px;}
.gnb .link_item.family .family_item.n2 li{width:100%}
.gnb .link_item.family .family_item.n3 {width:calc(100% - 857px);}
.gnb .link_item.family .family_item.n4 {width:281px;margin-right:0;}
.gnb .link_item.family .family_item .list_box {overflow-y: auto;height: calc(100vh - 330px);padding: 16px 40px 35px 40px;background-color: #fff;font-size:0;line-height:0;text-align: left;}
.gnb .link_item.family .family_item .list_box ul+ul{margin-top: 15px;padding-top: 15px;border-top: 1px solid #ebecf2;}
.gnb .link_item.family .family_item li:nth-child(even) {margin-right:0}
.gnb .link_item.family .family_item li {position:relative;width:49%;margin-right:2%;padding-left: 15px;display: inline-block;text-align: left;vertical-align:top}
.gnb .link_item.family .family_item li:before {display:block;position:absolute;left:0;top: 9px;width: 6px;height: 6px;background-color:#888da6;border-radius:50%;}
.gnb .link_item.family .family_category{position:relative;padding: 13px 0;background-color:#414a73;}
.gnb .link_item.family .family_item:nth-child(even) .family_category{background-color:#888da6;}
.gnb .link_item.family .family_category span {position:relative; font-size:18px; color:#fff; line-height:24px;}
.gnb .link_item.family .family_category span:before {display:block;position:absolute;top: 1px;right: -14px;width:6px;height:6px;background-color:#fff;border-radius:50%;}
.gnb .link_item.family .sitebox_close{position:absolute;top: 20px;right: 20px;width: 45px;height:45px;color: #fff;font-size: 0;background-color:#414a73;border-radius:50%;}
.gnb .link_item.family .sitebox_close:before{display:block;font-size: 24px;line-height: 45px;content: "\EB99";font-family:'remixicon' !important;}
[data-open="family"] .gnb .link_item button.site_anchor:after {transform:rotate(180deg);}
[data-open="family"] .gnb .link_item.family .family_content{display:block;}
[data-open="family"] .gnb .link_item.family:before{visibility:visible; opacity:1;}
@media all and (max-width:1440px) {
    .gnb .link_item.family .family_content {left: 0;width: 100%;padding: 45px 30px 30px}
    .gnb .link_item.family .family_item .list_box {height: calc(100vh - 300px);padding: 16px 25px 25px 25px;}
    .gnb .link_item.family .family_item.n1 {width: 300px;}
    .gnb .link_item.family .family_item.n1 .list_box {padding: 16px 25px 25px 25px;}
    .gnb .link_item.family .family_item.n2 {width: 150px;}
    .gnb .link_item.family .family_item.n3 {width:calc(100% - 696px);}
    .gnb .link_item.family .family_item.n4 {width: 240px;}
}
@media all and (max-width:1200px) {
    .gnb .link_item.family{ display:block;}
    .gnb .link_item.family .family_open {display:none}
    .gnb .link_item.family .family_content {left: 2%;width: 96%;}
    .gnb .link_item.family .family_item.n1 {width:calc(50% - 1px);}
    .gnb .link_item.family .family_item.n2 {width:calc(50% - 1px);margin-right:0;}
    .gnb .link_item.family .family_item.n2 li{width:49%}
    .gnb .link_item.family .family_item.n3 {width:calc(50% - 1px);margin-top:2px;}
    .gnb .link_item.family .family_item.n4 {width:calc(50% - 1px);margin-top:2px;}
    .gnb .link_item.family .family_item .list_box {height: calc(50vh - 180px);}
}
@media all and (max-width:800px) {
    .gnb .link_item.family .family_content .family_list {height: calc(100% - 120px);overflow-y:auto;}
    .gnb .link_item.family .family_content .sub_title {font-size:16px;}
    .gnb .link_item.family .family_content h2 {transform:scale(0.8)}
    .gnb .link_item.family .family_item.n1 {width:100%;margin:0;}
    .gnb .link_item.family .family_item.n2 {width:100%;margin:0;}
    .gnb .link_item.family .family_item.n3 {width:100%;margin:0;}
    .gnb .link_item.family .family_item.n4 {width:100%;margin:0;}
    .gnb .link_item.family .family_item .list_box {height:auto;overflow:initial;padding: 16px 20px 15px 20px;}
}
@media all and (max-width:640px) {
    .gnb .link_item.family .family_content {padding: 30px 20px 30px}
    .gnb .link_item.family .family_content .family_list {height: calc(100% - 90px);margin-top:20px;}
    .gnb .link_item.family .family_category{padding: 8px 0;}
    .gnb .link_item.family .family_category span {font-size:15px;}
    .gnb .link_item.family .family_item.n1 .list_item span {font-size:15px;}
    .gnb .link_item.family .family_anchor {font-size:14px;line-height: 16px;}
    .gnb .link_item.family .sitebox_close {width:30px;height:30px}
    .gnb .link_item.family .sitebox_close:before {font-size: 20px;line-height: 30px;}
}

/* footer */
#new_footer {border-top: 1px solid #E7E8EC; }
#new_footer .new_inner {padding: 50px 20px; display: flex; justify-content: space-between; }
#new_footer .f_info .adress {font-size: 15px; font-weight: 500;color: #52535E;}
#new_footer .f_info .tel {font-size: 15px; font-weight: 500;color: #52535E; margin-top: 10px;}
#new_footer .f_info .copy {font-size: 14px;font-weight: 500;color: #8D8E96; margin-top: 24px;}
#new_footer .f_link { border-left: 1px solid #E7E8EC; padding-left: 25px;}
#new_footer .f_link ul li + li {margin-top: 8px;}
#new_footer .f_link ul li a {font-size: 16px;font-weight: 500;color: #52535E;}
#new_footer .f_link ul li:first-of-type a {font-size: 19px;color: #9F2E75;}

@media all and (max-width:1280px) {
    .gnb .link_item.family {display: none;}
    #new_container {margin-top: 80px;}
    #new_header .mo_gnb_btn { display: block; }
    #new_header.on .mo_gnb_btn { display: none; }
    #new_header.on .mo_gnb_btn_close { display: block; margin-top: 5px; }
    #new_header .mo_btn_wrap .btn_search {position: static;}
    #new_header .h_top .new_inner {height: 80px;}
    #new_header .h_top .new_inner .logo { height: 36px;}
    #new_header .h_top .new_inner .logo img {height: 100%;}
    #new_header .mo_btn_wrap { position: absolute; width: fit-content; transform: none; top: 20px; left: initial; right: 20px;}
    #new_header .mo_btn_wrap .btn_search_wrap { position: absolute; bottom: 26px; right: 0;}
    #new_header .mo_gnb_btn{position: absolute; right: 35px;bottom: 30px;}
    #new_header .mo_gnb_btn_close{position: absolute; right: 35px;}
    #new_header .gnb_wrap .btn_search_wrap {max-width: 100%;}
    #new_header .h_top{ border-bottom: 0; }
    #new_header.on { background: #F8F8F8; }
    #new_header > .inner { height: 90px; justify-content: space-between; }
    #new_header .gnb_wrap { display: none; position: absolute; top: 90px; left: 0; width: 100%; height: 100vh; background: #fff; overflow-y: auto; }
    #new_header.on .gnb_wrap { display: block; top: 80px; padding: 30px 0 100px;}
    #new_header .gnb_wrap .new_gnb .depth1 > li > a::before {display: none;}
    #new_header .gnb_wrap .new_gnb .depth1 { flex-direction: column; padding: 0 10px; gap: 0; }
    #new_header .gnb_wrap .new_gnb .depth1 > li { width: 100%;  font-size: 17px; display: flex; align-items: center; flex-wrap: wrap; }
    #new_header .gnb_wrap .new_gnb .depth1 > li > a { width: calc(100% - 20px); justify-content: flex-start; padding: 15px 0 15px 10px; height: auto; border-bottom: 1px solid #ddd; }
    #new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap { display: none; border-top: none; position: static; padding: 16px 0; }
    #new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .inner { padding: 0; }
    #new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap h2 { display: none; }
    #new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 { gap: 8px; max-width: 100%;}
    #new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li {margin-bottom: 10px; width: 100%; font-size: 16px; font-weight: 400; text-align: left; }
    #new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li > a { padding: 0; color: #666;}
    #new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li.on > a,
    #new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li > a:focus,
    #new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li > a:hover { text-decoration: none; font-weight: 700;}
    #new_header .gnb_wrap .new_gnb .depth1 > li .depth_wrap .depth2 > li > .depth3 { background: #F8F8F8; margin-top: 20px; border-top: 1px solid #9F2E75; padding:20px; text-align: left;}
    #new_header .gnb_wrap .new_gnb .depth1 > li .btn_depth { position: relative; display: block; width: 20px; height: 54px; border-bottom: 1px solid #ddd; }
    #new_header .gnb_wrap .new_gnb .depth1 > li .btn_depth::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 2.4px; background: #000; }
    #new_header .gnb_wrap .new_gnb .depth1 > li .btn_depth::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.4px; height: 16px; background: #000; transition: 0.3s; }
    #new_header .gnb_wrap .new_gnb .depth1 > li .btn_depth.on::after { transform: translate(-50%, -50%) rotate(90deg); }
}
@media all and (max-width:768px) {
    #new_footer .new_inner {flex-direction: column-reverse;}
    #new_footer .f_link {padding-left: 0; border: none; margin-bottom: 20px;}
    #new_footer .f_link ul {display: flex; justify-content: space-between;}
    #new_footer .f_link ul li + li {margin: 0; }
    #new_footer .f_link ul li:first-of-type a {font-size: 16px;}
}

.hide {display:none;}
.show {display:block;}

.tab_wrap .tab_con { max-height:355px; overflow-y:hidden; }