/* 메인 비주얼 하단 업종별 활용 가로 스크롤 메뉴 */
#main_submenu {border-bottom: 1px solid #ececec; background: linear-gradient(90deg, rgb(244 249 255) 10%, rgba(237 245 255) 51%, rgba(244 249 255) 90%);}
#main_submenu .menu-container { max-width: 1300px; margin: 0 auto; position: relative; overflow: hidden; }
#main_submenu .menu-wrapper { display: flex; align-items: center; padding: 10px 0; }
#main_submenu .nav-button { background: #f1f3f4; border: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; margin: 0 15px; flex-shrink: 0; }
#main_submenu .nav-button:hover { background: #e8eaed; transform: scale(1.05); }
#main_submenu .nav-button:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
#main_submenu .nav-button svg { width: 20px; height: 20px; fill: #5f6368; }
#main_submenu .menu-scroll { flex: 1; overflow: hidden; position: relative; scroll-behavior: smooth;}
#main_submenu .menu-list { display: flex; transition: transform 0.3s ease; gap: 20px; padding: 0 20px; }
#main_submenu .menu-item { display: flex; flex-direction: column; align-items: center; min-width: 80px; padding: 15px 10px; cursor: pointer; transition: all 0.2s ease; border-radius: 12px; text-decoration: none; color: inherit; }
#main_submenu .menu-item:hover {background-color: #53a5ff;}
#main_submenu .menu-item:hover .menu-label {color: #fff;}
#main_submenu .menu-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-size: 20px;background-color: #fff; color: #5f6368; border: 1px solid #ddd; }
#main_submenu .menu-icon img {height:26px;}
#main_submenu .menu-label { font-size: 14px; font-weight: 500; text-align: center; color: #202124; white-space: nowrap; transition: none;}

#main_submenu .menu-progress {  height: 3px;  background: #eee;  width: 90%;  position: relative;  margin: 0 auto;  border-radius: 2px;  overflow: hidden;}
#main_submenu .menu-progress-bar {  height: 100%;  width: 0%;  background: #c4d8f1;  transition: width 0.2s ease;} 



@media (max-width: 1300px) {
    #main_submenu .menu-container {max-width: 100%;}
}
@media (max-width: 900px) {
    #main_submenu .menu-list {gap: 10px;}
    #main_submenu .menu-icon {width: 54px; height: 54px;}
    #main_submenu .menu-label {font-size: 13px;}
}
@media (max-width: 500px) {
    #main_submenu .menu-wrapper {padding: 10px 0}
    #main_submenu .menu-item {padding: 10px 0;}
    #main_submenu .nav-button {margin: 0 10px;}
    #main_submenu .menu-icon {margin-bottom: 8px; width: 46px; height: 46px; font-size: 16px}
    #main_submenu .menu-label {font-size: 12px;}
    #main_submenu .nav-button {width: 30px; height: 30px;}
    #main_submenu .menu-list {gap: 0;}
}




/* 상담시간 타이머 */
.timer_wrap {display: flex; align-items: center; gap: 10px; position: fixed; bottom: 10px; right: 20px; z-index: 4;}
.timer_wrap img {width: 54px; position: absolute; bottom: -10px; left: -60px; transition: 0.5s}
.timer_wrap img:hover {width: 164px; left: -160px}
.timer_wrap img:hover + .q_mark {display: none;}
.timer_wrap .q_mark {  position: absolute;  bottom: 31px;  left: -20px;  font-family: pre; }
.timer_wrap .q_mark span { font-family: 'pre_B'; display: inline-block; animation: swapColor 1s infinite;}
.timer_wrap .q_mark span.skyblue {  transform: rotate(11deg); --from-color: skyblue; --to-color: blue;}
.timer_wrap .q_mark span.blue { color: blue; transform: rotate(41deg) translateY(4px) translateX(5px);   --from-color: blue; --to-color: skyblue;}
@keyframes swapColor {
    0% { color: var(--from-color);  }
    100% { color: var(--to-color);  }
}
#status-message { font-size: 15px; font-family: 'pre_L';color: #777; padding: 0 0 10px 0;}
#status-message span {color: red; font-size: 15px;  }
@media screen and(max-width:1200px){
    .timer_wrap {display: none;}
}
#texttarget {display: none;position: absolute;bottom: 40px;width: 200px;background: #345fe8;border-radius: 10px;padding: 10px;color: #fff;font-size: 14px;font-family: 'pre_L';line-height: 1.5;}
#texttarget.end {bottom: 60px;}
#texttarget::after {
    content: "|";
    right: 0;
    color:#fff;
    animation: caret .8s infinite;
}


/* 제안서 받기 버튼 */
.now_btn {display: flex;position: fixed;bottom: 564px;right: -422px;z-index: 10;background: #fff;border-top-left-radius: 20px;border-bottom-left-radius: 20px;overflow: hidden; transition: 0.5s; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; }
.now_btn:hover {right: 0; text-decoration: none !important;}
.now_btn:hover * {text-decoration: none !important;}
.now_btn .left {background: #2c2c2c;width: 91px;display: flex;align-items: center;justify-content: center;padding: 20px 0;flex-direction: column;}
.now_btn .left img { width: 28px;}
.now_btn .left p {text-align: center;color: #fff;font-family: 'pre_R';line-height: 1.3;margin: 10px 0 0 0;}
.now_btn .left p span {color: #33FCFF;font-family: 'pre_SB';display: block;}
.now_btn .right {padding: 20px;display: flex;align-items: center;justify-content: c;background: #4a4a4a;}
.now_btn .right .text{color: #ffffff;}
.now_btn .right .button{ display: flex; align-items: center;  justify-content: center;  width: 146px;
    height: 39px;  background: #fafafa1f;  border-radius: 40px;  border: 1px solid #e7e7e7;  margin: 0 0 0 14px;
    color: #20fcff;  }
.now_btn .right .button svg {width: 23px;fill: #20fcff;margin: 0 0 0 2px;}
@media screen and (max-width:1200px){
    .now_btn {display: none;}
}



/* 마우스 스크롤 애니메이션 */
.mouse_scroll_500 {display: block; position: fixed; bottom: 0px; left: 50%; transform: translateX(-50%); z-index:4; width: 100%;
    background: linear-gradient(180deg,rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.9) 100%); padding: 0 0 20px 0;
}
.mouse_scroll_500 > div {padding-top: 70px;text-align: center;font-size: 19px; color: #000;}
.mouse_scroll_500:hover {text-decoration: none !important; color: #53a5ff;}
.mouse_scroll_500:hover > div {color: #53a5ff;}
.mouse_scroll_500:hover > div span {border-left: 2px solid #53a5ff; border-bottom: 2px solid #53a5ff;}
.mouse_scroll_500 > div span {
    position: absolute; top: 0; left: 50%; width: 24px; height: 24px;
    margin-left: -12px; border-left: 2px solid #333; border-bottom: 2px solid #333; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb05 1.5s infinite;
    animation: sdb05 1.5s infinite;  box-sizing: border-box; 
}
@-webkit-keyframes sdb05 {
    0% {  -webkit-transform: rotate(-45deg) translate(0, 0);  opacity: 0;  }
    50% {  opacity: 1; }
    100% { -webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; }
}
@keyframes sdb05 {
    0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; }
}
@media screen and (max-width:1200px){
}
@media screen and (max-width:500px){
    .mouse_scroll_500 {bottom: 70px; display: none !important;}
    /* .mouse_scroll_500 > div {font-size: 15px;} */
    /* .mouse_scroll_500 > div span {width: 16px; height: 16px; margin-left: -7px;} */
}

/* 회사소개 - 애니메이션 */
#intro .fade_up {opacity: 0; transform: translateY(20px);  }
#intro .fade_up.show {animation: fadeUp 0.5s ease-in-out forwards;}
@keyframes fadeUp {
    to {opacity: 1;transform: translateY(0);}
}
.fade_in {opacity: 0;}
.fade_in.show {animation: fadeIn 1s ease-out forwards;}
@keyframes fadeIn {
    to {opacity: 1;}
}

/* 회사소개 공통 */
#intro * {font-family: 'pre_R';letter-spacing: normal;font-weight: normal;color: #333; box-sizing: border-box;}
#intro .m_title {
    margin: 0 0 70px 0;
}
#intro .m_title h4 {color: #333;font-size: 22px;font-family: 'pre_SB';margin: 0 0 20px 0;}
#intro .m_title h3 {color: #000;font-size: 35px;line-height: 1.3;font-family: 'pre_SB';}


/* 회사소개 - 인사말 */
#intro .inner {width: 1300px; margin: 0 auto;}
#intro .main {background: url(/images/intro/main_back.png) center bottom;background-size: cover; }
#intro .main .top {position: relative;margin: 0 0 80px 0; opacity: 0; height: 360px; border-radius: 30px; background: url(/images/intro/main.jpg) center center;}
#intro .main .top img {display: block;}
#intro .main .top .text {position: absolute;bottom: 40px;left: 50px;}
#intro .main .top .text span {color: #fff;font-size: 24px;margin: 0 0 20px 0;display: block;}
#intro .main .top .text h2 {color: #fff;font-size: 40px;font-family: 'pre_SB';}
#intro .main .bottom {text-align: center;margin: 0 0 150px 0;}
#intro .main .bottom p {font-size: 20px;line-height: 1.6;}
#intro .main .bottom p span {font-size: 20px;font-family: 'pre_B';}
#intro .main .bottom p.last {margin: 70px 0 0 0; font-size: 16px;}
#intro .main .bottom p.point {margin: 20px 0 0 0; color: #4880ff;}
#intro .main .imgbox { display: flex; justify-content: center; align-items: center; gap: 6vw; margin: 140px 0;}
#intro .main .imgbox img { display: block;}
#intro .main .imgbox .text {animation: fadeUp 0.5s ease-out forwards;}
#intro .main .imgbox .image {animation: fadeUp 0.5 0.3s ease-out forwards;}
#intro .main .imgbox .text h3 { font-size: 34px;  font-family: 'pre_SB'; margin: 0 0 50px 0;}
#intro .main .imgbox .text p { font-size: 18px; line-height: 1.5; font-family: 'pre_L';}


/* 회사소개 - 연혁 */
#intro .history .m_title h4 {color: #7EB8FF;}
#intro .history .m_title h3 {color: #fff;}
#intro .history .wrap {margin: 80px 0 0 0;display: flex;justify-content: space-between;}
#intro .history .wrap > .left {display: flex;}
#intro .history .line {padding: 35px 0;opacity: 0.3;transition: opacity 0.4s ease;}
#intro .history .year p {color: #fff;font-size: 23px;}
#intro .history .timeline {position: relative;width: 140px;}
#intro .history.timeline-section {position: relative;background: linear-gradient(180deg,rgba(75, 87, 117, 1) 0%, rgba(32, 32, 32, 1) 100%);padding: 180px 0;}
#intro .history .timeline-line-bg {position: absolute;top: 0px;left: 70px;width: 3px;height: 100%;background-color: #ffffff33;z-index: 1;}
#intro .history .timeline-line-progress {position: absolute;top: 0;left: 70px;width: 4px;height: 0%;background-color: #3182ce;z-index: 2;}.timeline-line-progress { }
#intro .history .timeline-dot {position: absolute;left: 61px;top: 0;width: 24px;height: 24px;background-color: #fff;border: 2px solid #3182ce;border-radius: 50%;box-shadow: 0 0 0 4px #3182ce;z-index: 3; }
#intro .history .timeline-dot.blink {animation: blink 1s infinite ease-in-out;}
@keyframes blink {
    0%, 100% {background-color: #fff;border: 2px solid #3182ce; box-shadow: 0 0 0 4px #3182ce;}
    50% {background-color: #3182ce; border: 2px solid #fff; box-shadow: 0 0 0 4px #fff;}
}

#intro .history .timeline-item { position: relative; display: flex; align-items: flex-start; margin-bottom: 60px; }
#intro .history .text p {color: #fff;font-size: 23px;font-family: 'pre_L';}
#intro .history .text span {font-size: 23px;color: #fff;font-family: 'pre_SB';margin: 0 5px 0 0;}
#intro .history .image {display: flex;flex-direction: column;justify-content: space-between;gap: 50px;}
#intro .history .image .box.move {transform: translateX(-170px);}
#intro .history .image .box img {display: block;width: 259px;}
#intro .history .image .box p {color: #fff;font-size: 17px;margin: 20px 0 0 0;}

/* 회사소개 - 수치 */
@font-face {
    font-family: 'one_title'; 
    src: url('../font/ONE_Mobile_Title.otf') format('opentype'); /* 경로 및 포맷 */
    font-weight: normal;
    font-style: normal;
}
#intro .figure {  padding: 130px 0;}
#intro .figure .stats .top {  display: flex;  gap: 20px;  margin: 0 0 30px 0;}
#intro .figure .stats .bottom {  display: flex;  justify-content: right;}
#intro .figure .stat-box {background: #f2f5fa;border-radius: 16px;padding: 33px 40px;}
#intro .figure .stat-box .label {font-size: 18px;color: #000;margin-bottom: 26px;font-family: 'pre_SB';}
#intro .figure .stat-box .sub-label { font-size: 14px; color: #555; }
#intro .figure .stat-box span { font-size: 36px; margin-left: 4px; }
#intro .figure .stat-box .number {display: flex; align-items: center}
#intro .figure .stat-box .counter {font-size: 72px; color: #111;margin: 0 0 0 110px; display: block; font-family: 'one_title'; }
#intro .figure .stat-box:nth-of-type(1) .counter {width: 96px;}
#intro .figure .stat-box:nth-of-type(2) .counter {width: 240px;}
#intro .figure .bottom .stat-box:nth-of-type(1) .counter {width: 420px;}


/* 회사소개 - 사업문야 */
#intro .b_field {background: url(/images/intro/blue_back.png);background-size: cover;padding: 100px 0; }
#intro .b_field .m_title h3 {color: #fff;}
#intro .b_field .wrap {display: flex;justify-content: space-between; position: relative;}
#intro .b_field .wrap dt {color: #fff;font-size: 23px;font-family: 'pre_SB';margin: 0 0 57px 0;}
#intro .b_field .wrap dd {color: #fff;opacity: 0.9;font-size: 17px;margin: 0 0 18px 0;font-family: 'pre_L';}
#intro .b_field .wrap .line {position: absolute;top: 56px;left: 0;width: 0%;height: 1px;background-color: #ffffff7d; transition: 0.5s;}
#intro .b_field.show .line {width: 100%;}




/* 회사소개 - 통합 서비스 네트워크 */
#intro .network {padding: 100px 0;}
#intro .network .inner {display: flex;align-items: center;justify-content: space-between;}
#intro .network .text .title { font-size: 40px; font-family: 'pre_SB';  margin: 0 0 50px 0;}
#intro .network .text p {  font-size: 20px;  line-height: 1.5;}
#intro .network .image {width: 600px;height: 600px;position: relative;}
#intro .network .image img {width: 100%;display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

/* 회사소개 - 주요 서비스 소개 */
#intro .service_intro {padding: 100px 0;background: url(/images/intro/dark_back.svg);background-size: cover;}
#intro .service_intro .inner {text-align: center;}
#intro .service_intro .title {color: #fff;font-size: 40px;margin: 0 0 100px 0;}
#intro .service_intro .wrap {margin: 0 0 46px 0;}
#intro .service_intro .wrap p {color: #fff;font-size: 22px;line-height: 1.5;font-family: 'pre_L';}
#intro .service_intro .wrap span {font-size: 20px;color: #3C87FF;}


/* 회사소개 - 대표 서비스 */
#intro *:hover {text-decoration: none !important;}
#intro .re_ser {padding: 120px 0;}
#intro .re_ser .wrap {display: grid;grid-template-columns: 1fr 1fr;gap: 40px;}
#intro .re_ser .box.title {display: flex;align-items: center;}
#intro .re_ser .box.title p { font-size: 40px; font-family: pre_SB;}
#intro .re_ser .box.block {background: #F1F3F8;padding: 40px;border-radius: 30px;justify-content: space-between;display: flex;align-items: start;}
#intro .re_ser .box.block .left {display: flex;width: calc(100% - 100px);align-items: start;}
#intro .re_ser .box.block img {display: block;margin: 0 40px 0 0;width: 90px;}
#intro .re_ser .box.block img.go { margin: 0 0 0 40px; width: 50px;  display: block;}
#intro .re_ser .box.block .text .title {font-size: 24px;font-family: 'pre_SB';margin: 0 0 20px 0;}
#intro .re_ser .box.block .text p {font-size: 18px;line-height: 1.5;}

@media screen and (max-width:1300px){
    #intro .inner {width: 100%; padding: 0 30px; box-sizing: border-box;}
    #intro .main .top img {width: 100%;}
}


/* 아톡 말풍선 */
.atalk_bubble_wrap {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;} 
.atalk_bubble_wrap:hover .atalk_bubble {display: block;}
.atalk_bubble {display: none;  position: absolute; width:380px;  right: 80px;  z-index: 5;     top: 50%;  transform: translateY(-50%);}
.atalk_bubble img {width: 100%;}


/* 고객유형선택 */
#customer_type * { box-sizing: border-box; letter-spacing: normal; }
#customer_type a:hover { text-decoration: none !important; }
#customer_type { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #20284E; z-index: 999999999; display: flex; align-items: center; justify-content: center; }
#customer_type .title { text-align: center; margin: 0 0 50px 0; }
#customer_type .title h2 { text-align: center; font-family: 'pre_SB'; font-size: 30px; color: #fff; margin: 0 0 20px 0; }
#customer_type .title p { color: #fff; font-size: 20px; font-family: 'pre_L'; }
#customer_type .box_wrap { display: flex; align-items: center; gap: 30px; }
#customer_type .box { background: #F2F3FB; padding: 50px 30px; border-radius: 10px; width: 500px; opacity: 0; transition: 0.5s; }
#customer_type .box:nth-of-type(1) { animation: boxfadeIn 1s 1s forwards; }
#customer_type .box:nth-of-type(2) { animation: boxfadeIn 1s 1.4s forwards; }
@keyframes boxfadeIn { from { opacity:0; } to { opacity:1; } }
#customer_type .box:hover { transform: translateY(-10px); box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }
#customer_type .box .top { position: relative; }
#customer_type .box .top h3 { color: #20284E; font-size: 30px; margin: 0 0 20px 0; }
#customer_type .box .top h4 { color: #20284E; font-family: 'pre_L'; font-size: 16px; line-height: 1.5; }
#customer_type .box .bdege { display: inline-block; padding: 4px 6px; background: #CFD7FF; color: #1D1D1D; font-family: pre_SB; border-radius: 4px; margin: 18px 0 39px 0; }
#customer_type .box .go_icon { position: absolute; top: 3px; right: 0; width: 42px; }
#customer_type .box .go_icon img { display: block; width: 100%; }
#customer_type .box .image { width: 100%; margin: 0 0 30px 0; }
#customer_type .box .image img { display: block; width: 100%; }
#customer_type .box .tag_wrap { display: flex; flex-wrap: wrap; gap: 12px; }
#customer_type .box .tag { display: flex; padding: 9px 17px; background: #fff; border-radius: 40px; gap: 7px; align-items: center; }
#customer_type .box .tag.last { background: none; padding: 11px 10px; }
#customer_type .box .tag img { height: 17px; }
#customer_type .box .tag.last img { height: 6px; }
#customer_type .box .tag p { font-size: 13px; color: #222; font-family: 'pre_SB'; }



@media screen and (max-width:1020px){
    #customer_type .inner {padding: 0 20px;}
    #customer_type .box_wrap {align-items: stretch;}
    #customer_type .box {width: 50%;}
    #customer_type .box .top h3 {font-size: 24px;}
    #customer_type .box .top h4 {font-size: 14px;}
    #customer_type .box .tag {padding: 9px 11px;}
    #customer_type .box .tag img {height: 13px;}
    #customer_type .box .tag p {font-size: 12px;}
}

@media screen and (max-width:800px){
    #customer_type .box_wrap {display: block}
    #customer_type .box {display: block; width: 100%; padding: 30px;}
    #customer_type .box .left {display: flex; gap: 30px; justify-content: space-between; flex-direction: row-reverse; margin: 0 0 30px 0;}
    #customer_type .box .image {width: 50%; margin: 0;}
    #customer_type .box .top {width: 50%;     display: flex;  flex-direction: column;  align-items: flex-start;  justify-content: center;}
    #customer_type .box .go_icon {width: 33px;}
    #customer_type .box .bdege {margin: 20px 0 0 0;}
    #customer_type .box:nth-of-type(1) {margin: 0 0 20px 0;}
}
@media screen and (max-width:700px){
    #customer_type {overflow-y: scroll; display: block; padding: 20px 0;}
    #customer_type .inner {padding: 100px 20px 150px 20px;}
    #customer_type .box .tag_wrap {display: none;}
    #customer_type .box .left {flex-direction: column-reverse}
    #customer_type .box .top {width: 100%}
    #customer_type .box .image {width: 100%;}
}
@media screen and (max-width:500px){
    #customer_type .title h2 {font-size: 20px; margin: 0 0 10px 0;}
    #customer_type .title p {font-size: 16px;}
    #customer_type .box {padding: 20px;}
    #customer_type .box .top h3 {font-size: 20px;}
    #customer_type .box .left {margin: 0;}
    #customer_type .box .top h4 {font-size: 12px;}
}

/* #customer_type {display: none !important;} */


/* 왼쪽 하단 업종별 링크 */
.indus_link {position: fixed;bottom: 20px;left: 20px;display: flex;align-items: flex-end; z-index: 99}
.indus_link .bubble {    position: absolute; bottom: 85px;}
.indus_link .title {font-size: 14px;margin: 0 0 12px 0;}
.indus_link .click {width: 80px;cursor: pointer;margin: 0 10px 0 0;}
.indus_link .list{background:#fff;padding: 20px; border-radius:20px;border:1px solid #d1dcff;box-shadow:rgba(149,157,165,0.2) 0 8px 24px;display:none}
.indus_link .list.active{display:block}
.indus_link .list .wrap{
    width:100%; box-sizing:border-box; display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,min-content);
    grid-auto-columns:1fr; gap: 2px 10px; padding-right:10px; overflow-x:auto; overflow-y:hidden;
}
.indus_link .list .wrap::-webkit-scrollbar { width: 5px; /* 스크롤바 너비 */}
.indus_link .list .wrap::-webkit-scrollbar-track { background: #ededed; border-radius:5px /* 트랙 배경 */ }
.indus_link .list .wrap::-webkit-scrollbar-thumb { background: #cccccc; /* 엄지(손잡이) 색상 */ border-radius: 5px;}
.indus_link .list .wrap::-webkit-scrollbar-thumb:hover { background: #a8a8a8; /* 호버 시 */}

.indus_link .list a { display: flex;align-items: center; justify-content: space-between; padding: 10px 20px; background: #f3f5fa; margin: 0 0 10px 0;
    border-radius: 50px; width: 130px}
.indus_link .list a:hover {text-decoration:none; background:#ebeef7;}
.indus_link .list a:hover p { color:#245ddf;}
.indus_link .list a p { display: flex; align-items: center;}
.indus_link .list a p img.point {height: 9px; margin: 0 0 0 4px}
.indus_link .list a img.icon { height: 11px; opacity: 0.7;}

@media screen and (max-width:1200px){
    .indus_link{display:none}
}



.cont_box2 .ch_box .label_wrap { display: flex; align-items: center;}
.cont_box2 .ch_box .label_wrap a {
    font-size: 12px;
}
.agree_popup {
    display: none;
    position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 80%;height: 70%;background: #fff;/* border: 1px solid red; */border-radius: 20px;padding: 30px;box-sizing: border-box;box-shadow: rgba(100, 100, 111, 0.5) 0px 7px 89px 0px;}
.agree_popup h3 { text-align: center; margin: 0 0 20px 0;  font-size: 18px;}
.agree_popup .inner { height: 100%;}
.agree_popup .inner .text {  height: calc(100% - 120px);  padding: 20px;  overflow-y: scroll;  box-sizing: border-box;  border: 1px solid #ddd;
    background: #fafafa;  border-radius: 20px;}
.agree_popup .inner .text table {margin-left: 0 !important;}
.agree_popup .inner .text strong {color: #222; font-size: 13px; font-weight: normal; margin-top: 10px;}
.agree_popup .inner a {
    margin: 20px auto;  display: flex;  width: 140px;  height: 44px;  background: #2785ff;
    color: #fff;  align-items: center; justify-content: center;
}
.agree_popup.on {display: block;}

@media screen and (max-width:600px){
    .agree_popup {width: 90%;}
}


/*개인정보처리방침 변경 이력 */
#poli_history {display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 50px;
    background: #ebf2ff;
    border: 1px solid #b4c8ff;
    color: #1447cd;
    border-radius: 8px;
}


.esg-data-tb {width: 100%; margin: 20px 0 40px; border-top:2px solid #000;}
.esg-data-tb thead {background: #f5f5f5;height: 30px;}
.esg-data-tb thead tr {border-color:rgba(0,0,0,0.5);}
.esg-data-tb thead th {color: #000;font-size: 14px;font-weight: 500;border-right:1px solid rgba(0,0,0,0.1);letter-spacing:-0.02em;padding: 1rem 2rem;}
.esg-data-tb thead th:last-child {border-right:0;}
.esg-data-tb td {border-right:1px solid rgba(0,0,0,0.1);font-size: 13px; color: #666;line-height:1.25em;text-align:center;padding:1rem 2rem;}
.esg-data-tb td:last-child {border-right:0;}
.esg-data-tb tr {border-bottom:1px solid rgba(0,0,0,0.1);}
.esg-data-tb tr:first-of-type {border-top:0;}
.esg-data-tb .tb-type {background: #f9f9f9; color: #000; font-size:128rem;  font-weight: 600;}
.esg-data-tb .bd-bt {border-color:rgba(0,0,0,0.5);}
.esg-data-tb  td a {color: #1447cd;}
.policybox.new p {margin: 0 0 4px 0}
#history_list_btn {margin: 40px auto 0;display: flex; align-items: center; justify-content: center;width: 220px;
    height: 50px; background: #ebf2ff; border: 1px solid #b4c8ff; color: #1447cd;  border-radius: 8px;}

@media screen and (max-width:1200px){
    .esg-data-tb td {padding: 10px;}
    #poli_history {margin: 0 auto 20px; width: 200px; height: 40px; font-size: 13px;}
}







/* #infouse .graph {display: none;} */
#infouse .graph .top {display:flex;flex:1 1 2;align-items:flex-end;gap:20px;margin:0 0 30px 0;}
#infouse .graph .top .box:nth-of-type(1) {flex:2;height:170px;background:url(/images/info-use-2/back.png);background-size:cover;position:relative;border-radius:16px;}
#infouse .graph .top .box:nth-of-type(1) p {position:absolute;bottom:21px;left:30px;font-size:26px;color:#fff;}
#infouse .graph .top .box:nth-of-type(2) {flex:2;}
#infouse .graph .top .box:nth-of-type(3) {flex:3;}
#infouse .graph .top .box p.name {font-size:18px;padding:0 0 10px 20px;color:#222;font-family:'pre_SB';}
#infouse .graph .top .box .container {height:170px;padding:30px;background:#F6F7F9;border-radius:16px;display:flex;flex-direction:column;justify-content:center;}
#infouse .graph .top .box .container p {font-size:15px;color:#222;margin:2px 0;}
#infouse .graph .middle {background:#fff;padding:30px;border-radius:16px;box-shadow:rgba(99,99,99,0.2) 0px 2px 8px 0px;margin:0 0 30px 0;}
#infouse .graph .middle .box {display:flex;justify-content:space-between;align-items:center;padding:0 6%;}
#infouse .graph .middle .box .name {font-size:18px;color:#222;font-family:'pre_B';text-align:center;}
#infouse .graph .middle .box .name span {display:block;}
#infouse .graph .middle .box .img_wrap {margin:30px 0 0 0; position: relative;}


/* 사선그래프 */
#infouse .graph .middle .box .chart {width: 91.8%;position: absolute;bottom: 24%;left: 10.6%;}
#infouse .graph .middle .box .chart svg {width: 100%;height: auto;display: block;overflow: inherit;}
#infouse .graph .middle .box .line {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    
}
#infouse .graph .middle .box .line.red { stroke: #ff3b3b; animation-delay: 0s; }
#infouse .graph .middle .box .line.blue { stroke: #245DDF; animation-delay: .2s; }
#infouse .graph .middle .box .line.show {animation: draw 2s cubic-bezier(.22,.61,.36,1) forwards;}
@keyframes draw {
    to { stroke-dashoffset: 0; }
}


/* 오각형그래프 */
#infouse .graph .middle .box .poly {
    position: absolute;
    opacity:0;
    transform:translate3d(0,6px,0) scale(.72);
    transform-origin:center;
    backface-visibility:hidden;
    will-change:transform,opacity;
    contain:paint;
}
#infouse .graph .middle .box .poly.show {animation:pop-in .8s cubic-bezier(.22,1,.36,1) forwards;}
#infouse .graph .middle .box .poly_base {  width: 104%;}
@keyframes pop-in{
    0%   {transform:translate3d(0,6px,0) scale(.72); opacity:0;}
    55%  {transform:translate3d(0,-1px,0) scale(1.06); opacity:1;} /* 완만 과충 */
    75%  {transform:translate3d(0,0,0) scale(.985);}
    100% {transform:translate3d(0,0,0) scale(1); opacity:1;}
}
#infouse .graph .middle .box .poly_1 { top: 7%; left: 29.4%; width: 33.3%;}
#infouse .graph .middle .box .poly_2 { top: 7.5%; width: 48%;left: 23.8%;}


#infouse .graph .middle .box .line {height:270px;width:1px;background:#ddd;}
#infouse .graph .bottom {display:flex;gap:30px;}
#infouse .graph .bottom .box {flex:1;background:#ECF0F9;padding:30px;border-radius:16px;display:flex;flex-direction:column;align-items:center;text-align:center;}
#infouse .graph .bottom .box .name {font-size:16px;color:#222;font-family:'pre_SB';margin:0 0 20px 0;}
#infouse .graph .bottom .box .icon p {margin:20px 0 0 0;}
#infouse .graph .bottom .box .icon .point {display:flex;align-items:center;justify-content:center;}
#infouse .graph .bottom .box .icon .point p {margin:0;font-size:40px;margin:0 10px 0 0;color:#222;font-family:'pre_B';}
#infouse .graph .bottom .box ul {width:100%;background:#fff;padding:11px 20px;border-radius:16px;margin:10px 0 0 0;}
#infouse .graph .bottom .box ul li {display:flex;justify-content:space-between;margin:5px 0;}
#infouse .graph .bottom .box ul li p.right {color:#222;font-family:'pre_SB';}

/* CRM */
#infouse #tab2 .graph .top .box:nth-of-type(1) {background:url(/images/info-use-2/back_3.png);background-size:cover;}
#infouse #tab2 .graph .middle .box {padding: 0 10%;}
#infouse #tab2 .graph .middle .box .poly_1 {top: 12%;  left: 35.7%; width: 25.2%;}
#infouse #tab2 .graph .middle .box .poly_2 {top: 11.1%; width: 51%; left: 22.5%;}

/* CTI */
#infouse #tab3 .graph .top .box:nth-of-type(1) {background:url(/images/info-use-2/back_2.png);background-size:cover;}
#infouse #tab3 .graph .middle .box {padding: 0 10%;}
#infouse #tab3 .graph .middle .box .poly_1 {top: 9%; left: 39.5%; width: 28.3%;}
#infouse #tab3 .graph .middle .box .poly_2 {top: 8.5%; width: 58%; left: 24.5%;}

@media screen and (max-width:1200px){
    #infouse .graph .middle .box .poly_1 {left: 27.4%;}
    #infouse .graph .middle .box .poly_2 {top: 7%; width: 48%;left: 22%;}

    #infouse #tab2 .graph .middle .box .poly_1 {top: 11.4%; left: 34.5%; width: 23.2%;}
    #infouse #tab2 .graph .middle .box .poly_2 {top: 10.9%; width: 48.8%; left: 21.5%;}

    #infouse #tab3 .graph .middle .box .poly_1 {    top: 9.3%; left: 37.5%; width: 27.3%;}
    #infouse #tab3 .graph .middle .box .poly_2 {top: 9.5%;  width: 55%;  left: 23.5%;}

}


@media screen and (max-width:1000px){
    #infouse .graph .top .box .container p {font-size: 13px;}
    #infouse .graph .top .box .container {padding: 22px;}
    #infouse .graph .middle .box {padding: 0; gap: 20px;}
    #infouse .graph .bottom {gap: 20px;}
    #infouse .graph .bottom .box {padding: 20px;}
    #infouse .graph .bottom .icon img {width: 50px;}
    #infouse .graph .bottom .box .icon .point p {font-size: 28px;}
    #infouse .graph .bottom .box .icon .point img {width: 26px;}
    #infouse .graph .bottom .box ul li {display: block;}
}

@media screen and (max-width:800px){
    #infouse .graph .top {display: grid; grid-template-columns: repeat(2, 1fr);}    
    #infouse .graph .top .box:nth-child(3) {grid-column: 1 / -1;justify-self: center; width: 100%;}
    #infouse .graph .middle .box {flex-direction: column;}
    #infouse .graph .middle .box .line {width: 80%; height: 1px; margin: 20px 0;}
    #infouse .graph .bottom {flex-direction: column; align-items: center;}
    #infouse .graph .bottom .box { width: 100%; max-width: 410px;}
}


@media screen and (max-width:500px){
    #infouse .graph .top  {grid-template-columns: 1fr;}
    #infouse .graph .middle .box .line {width: 100%;}
}