html { scrollbar-gutter: stable; }
html.is-lock, body.is-lock {overflow: hidden;}
body {font-family: 'pretendard';}
#wrap {position: relative;}
.section {position: relative; padding: 100px 0;}
.section .inner {position: relative; width: 100%; height: 100%;}
.section .main-tit-box .en {font-size: var(--fs-24); color: var(--color-primary); margin-bottom: 2rem; font-weight: (--fw-500);}
.section-flex {display: flex; align-items: center; justify-content: space-between;}
.section-flex a {display: flex; gap: 20px; font-size: 24px; font-weight: 500;}
.section .main-tit-box .tit {font-size: var(--fs-60); word-break: keep-all;}
.section .main-tit-box .tit span {color: var(--color-primary);}
.section .main-tit-box.center {text-align: center; color: var(--color-white);}
.section .main-tit-box.center .en { color: var(--color-white);}
.section .main-tit-box.center .tit {font-size: var(--fs-44);}


#introDim{position: fixed; inset: 0; background: #000; z-index: 99999; opacity: 1; pointer-events: none;}

@media screen and (max-width: 1080px) {
  .section {padding: 60px 0;}
  .section .main-tit-box .en {font-size: var(--fs-18); margin-bottom :1rem;}
  .section .main-tit-box .tit {font-size: var(--fs-32);}
  .section-flex a {font-size: var(--fs-18);}
  
}

@media screen and (max-width: 768px) {
  .section-flex a {min-width:160px; justify-content: flex-end;}
}

@media screen and (max-width: 480px) {
  .section .main-tit-box .tit {font-size: var(--fs-28);}
  .section-flex a {font-size: var(--fs-16);}
}

/**************************************************
    챗봇 
***************************************************/
.btn-chatbot {position:fixed; bottom: 40px; right: 40px; z-index: 999; border-radius: 999px; box-shadow: 0 0 30px rgba(0,0,0,.3); transition: box-shadow .25s ease, filter .25s ease;
  will-change: transform;} 
.btn-chatbot:hover{
  animation: cb-move .25s ease-out;
}
.cb-wrap{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:998;
}

.cb-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.cb-launcher{
  width:56px;
  height:56px;
  border:0;
  border-radius:999px;
  background:#0B63FF;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cb-launcher:focus-visible{
  outline:3px solid rgba(11,99,255,.35);
  outline-offset:3px;
}

.cb-launcher__icon{
  width:28px;
  height:28px;
  border-radius:8px;
  background:rgba(255,255,255,.92);
  display:inline-block;
}

.cb-panel{
  position:absolute;
  right:0;
  bottom:0px;
  width:375px;
  max-width:calc(100vw - 32px);
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.20);
  overflow:hidden;
  transform:translateY(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index: 999;
}

.cb-wrap.is-open .cb-panel{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.cb-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background:#fff;
}

.cb-header__left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.cb-avatar{
  width:41px;
  height:41px;
  border-radius:50%;
  background:#D7E6FF;
  flex:0 0 auto;
  background: url(../images/main/icon_chatbot.png) center no-repeat; background-size: cover;
}

.cb-title{
  font-size:18px;
  line-height:1.2;
  font-weight:800;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cb-close{
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background:transparent;
  cursor:pointer;
  position:relative;
}

.cb-close:before,
.cb-close:after{
  content:"";
  position:absolute;
  inset:16px 8px;
  height:2px;
  background:#333;
  border-radius:2px;
  transform-origin:center;
}

.cb-close:before{transform:rotate(45deg);}
.cb-close:after{transform:rotate(-45deg);}

.cb-close:focus-visible{
  outline:3px solid rgba(0,0,0,.18);
  outline-offset:2px;
}

.cb-body{
  padding:14px 16px 12px;
  background:#EEF0F6;
}

.cb-date{
  display:flex;
  align-items:center;
  gap:10px;
  color:#9AA0A6;
  font-size:12px;
  justify-content:center;
  padding:6px 0 10px;
}

.cb-date__line{
  height:1px;
  background:rgba(0,0,0,.08);
  flex:1 1 auto;
}

.cb-date__txt{
  flex:0 0 auto;
  white-space:nowrap;
}

.cb-msg-row{
  margin-top:6px;
}

.cb-msg-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  color:var(--color-gray);
  font-size:13px;
  font-weight:700;
}

.cb-mini-avatar{
  width:26px;
  height:26px;
  border-radius:50%;
  background:#D7E6FF;
  background: url(../images/main/icon_chatbot.png) center no-repeat; background-size: cover;
}

.cb-name{
  display:inline-block;
}

.cb-bubble{
  position: relative;
  max-width: 200px;
}

.cb-bubble__txt{
display:inline-block;

  background:#fff;
  border-radius:16px;
  padding:12px 14px;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:var(--color-gray);
  word-break:keep-all;
}

.cb-time{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:#9AA0A6;
position: absolute;
bottom: 0;
left: calc(100%);
z-index: 10;
margin-left: 5px;
width: 100%;
}

.cb-quick{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.cb-quick__btn{
  flex:1 1 0;
  height:40px;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
  font-size:14px;
}

.cb-quick__btn--primary{
  background:#fff;
  border:2px solid #0B63FF;
  color:#0B63FF;
}

.cb-quick__btn--primary:focus-visible{
  outline:3px solid rgba(11,99,255,.25);
  outline-offset:2px;
}

.cb-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.cb-chip{
  height:31px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  color:#848484;
}

.cb-chip.active {border-color: var(--color-primary); color: var(--color-primary); font-weight: var(--fw-600);}

.cb-chip:focus-visible{
  outline:3px solid rgba(0,0,0,.10);
  outline-offset:2px;
}

.cb-input{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.06);
}

.cb-input__field{
  flex:1 1 auto;
  height:50px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  display:flex;
  align-items:center;
  padding:0 12px 0 14px;
  gap:10px;
  background:#fff;
}

.cb-input__text{
  flex:1 1 auto;
  border:0;
  outline:0;
  font-size:14px;
}

.cb-mic{
  width:12px;
  height:23px;
  cursor:pointer;
  background: url(../images/main/icon_mic.svg) center no-repeat; background-size: cover;
}

.cb-send{
  width:50px;
  height:50px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  background: url(../images/main/icon_send.svg) center no-repeat #E2E6EF;;
}

.cb-send:focus-visible,
.cb-mic:focus-visible{
  outline:3px solid rgba(0,0,0,.10);
  outline-offset:2px;
}

.cb-dim{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.18);
  border:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.cb-wrap.is-open .cb-dim{
  opacity:1;
  pointer-events:auto;
}

@media (max-width:480px){
  .cb-wrap{right:14px; bottom:14px;}
  .cb-panel{width:min(420px, calc(100vw - 28px));}
}


/**************************************************
    메인 인트로 
***************************************************/
#mainIntro{position: fixed; width: 100vw; height: 100vh; z-index:999; overflow:hidden; opacity: 1; display: block;}
.main-intro-wrap{position: relative; display: flex; flex-wrap:wrap; align-items: stretch; justify-content:center; width:100%; height:100%; text-align:center;}
.main-intro-wrap .intro-top{position: relative; width:100%; background:#fff; height:28vh; overflow:hidden; margin-top: -5px;}
.main-intro-wrap .intro-top .bg{position: absolute; top:0; left:0; width:192rem; height:96rem; transform:translate(-30%, -30%); transition:all 1.3s ease-out; opacity:0;}
.main-intro-wrap .intro-middle{position: relative; display: flex; justify-content: center; width:100%; height:264px; overflow: hidden;}
.main-intro-wrap .intro-middle:before{position: absolute; content:''; width:100vw; height:10px; top:-5px; left:0; background:#fff;}
.main-intro-wrap .intro-middle:after{position: absolute; content:''; width:100vw; height:10px; bottom:-5px; left:0; background:#fff; z-index: 555}
.main-intro-wrap .intro-middle .intro-middle-item{width:auto; flex:1 1 auto; min-width:0; background:#fff;}
.main-intro-wrap .intro-middle .intro-logo{position: relative;}
.main-intro-wrap .intro-middle .intro-logo:before{position: absolute; content:''; width:5px; height:100%; top:0; left:4px; background:#fff; transform:translateX(-100%);}
.main-intro-wrap .intro-middle .intro-logo:after{position: absolute; content:''; width:5px; height:100%; top:0; right:4px; background:#fff; transform:translateX(100%);}
.main-intro-wrap .intro-bottom{position: relative; width: 100%; background:#fff; height:calc(74vh - 264px);  overflow: hidden;}
.main-intro-wrap .intro-bottom .bg{position: absolute; bottom:0; right:0; width:192rem; height:96rem; transform:translate(30%, 30%); transition:all 1.3s ease-out; opacity:0;}
.main-intro-wrap .intro-bottom .intro-logo-txt{margin-top:5rem; margin-bottom:10rem; transition:all 1s}
.main-intro-wrap .intro-bottom .intro-logo-bottom{transition:all 1s}
.main-intro-wrap .intro-bottom .intro-scroll{transition:all 1s}

.main-intro-wrap .intro-scroll{position: absolute; bottom:3rem; left:50%; transform:translateX(-50%); text-align:center;}
.main-intro-wrap .intro-scroll .txt{font-size: (--fs-14);}
.main-intro-wrap .intro-scroll .icon{display: block; position: relative; width:36px; height:58px; margin:30px auto; border: 1px solid #222; border-radius: 50px; overflow:hidden;}
.main-intro-wrap .intro-scroll .icon:before{content:''; position: absolute; top: 10px; left:50%; transform: translateX(-50%); width:2px; height:10px;animation: scroll_down 1.4s infinite; border-radius:3px; background: #222;}


@media (max-width:1440px){
  .main-intro-wrap .intro-scroll {opacity: 0;}
}



/**************************************************
    visual
***************************************************/
#visual {position:relative; z-index:1; background: url(../images/main/main_visual.jpg) center; width: 100%; height: 100vh; overflow: hidden;}
#visual .inner {height: 100vh;}
#visual .vis-txt-box {position: absolute; top: 22%; margin: 0 auto; color: var(--color-white); margin: 0 auto; opacity: 0; transform: translateY(12px); transition: opacity .8s ease, transform .8s ease; pointer-events: none;}
#visual .vis-txt-box.is-show{opacity: 1; transform: translateY(0); pointer-events: auto;}
#visual .vis-txt-box .title {font-size: var(--fs-60); font-weight: var(--fw-700); word-break: keep-all;}

#visual .srch-box {display: flex; width: 100%; max-width: 520px; align-items: center; position: relative; border-bottom: 2px solid var(--color-white); margin-top: 5rem;}
#visual .srch-box input {width: calc(100% - 30px - 20px); height: 45px; border: none; padding-left: 15px; padding-right: 50px; color: #fff; background-color: transparent; margin-right:10px;}
#visual .srch-box input:where(:hover,:focus) {border-color: #fff; outline: 2px dotted white; outline-offset: -6px;}
#visual .srch-box .btn-srch {position: absolute; top: 50%; right: 15px; transform: translateY(-50%);}
#visual .srch-box .btn-srch:where(:hover,:focus) {outline: 2px dotted var(--color-white); outline-offset: 2px;}
#visual .srch-box .btn-srch img {width: 30px; height: 25px; }


@media (max-width:1080px){
  #visual .vis-txt-box .title {font-size: var(--fs-48);}
  #visual .srch-box input {font-size: var(--fs-16);}
}

@media (max-width:768px){
  #visual .vis-txt-box .title {font-size: var(--fs-36);}
  #visual .srch-box {max-width: none;}
}

@media (max-width:480px){
  #visual .vis-txt-box .title {font-size: var(--fs-28);}
}


/**************************************************
    about kps
***************************************************/
#aboutKps {position:relative; z-index:2; background:#fff; will-change:transform;}
#aboutKps .inner {display:flex; align-items:flex-start; justify-content:space-between; gap:80px;}

#aboutKps .about-left{flex:1; min-width:520px;}
#aboutKps .about-btn-box {display:flex; align-items:center; gap:25px; margin-top:4rem;}
#aboutKps .about-btn-box a {display:flex; align-items:center; gap:34px; padding:15px 20px; border:1px solid var(--color-dark); border-radius:50px; font-size:var(--fs-20); font-weight:var(--fw-500); transition:all .3s ease-out;}
#aboutKps .about-btn-box a:where(:hover,:focus) {background:var(--color-primary); color:var(--color-white); border-color:var(--color-primary);}
#aboutKps .about-btn-box a:where(:hover,:focus) img{filter:brightness(10);}

#aboutKps .about-right {width: 46%;}
#aboutKps .kps-card {display:flex; gap:30px;}
#aboutKps .kps-card + .kps-card {margin-top:30px;}
#aboutKps .kps-card li {position:relative; flex:1; height:384px; border-radius:24px; overflow:hidden; color:#fff; padding:50px; display:flex; flex-direction:column;justify-content:flex-end;}
#aboutKps .kps-card-top li:nth-child(1) {background:url(../images/main/img_about_01.jpg) center/cover no-repeat;}
#aboutKps .kps-card-top li:nth-child(2) {background:url(../images/main/img_about_02.jpg) center/cover no-repeat;}
#aboutKps .kps-card-btm li:nth-child(1) {background:url(../images/main/img_about_03.jpg) center/cover no-repeat;}
#aboutKps .kps-card-btm li:nth-child(2) {background:url(../images/main/img_about_04.jpg) center/cover no-repeat;}
#aboutKps .kps-card li::before {content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05)); pointer-events:none;}
#aboutKps .kps-card li > *{position:relative; z-index:1;}
#aboutKps .kps-card .card-tit {font-size: var(--fs-28); font-weight:var(--fw-500); opacity:.95; margin-bottom:34px;}
#aboutKps .kps-card .card-txt {font-size: var(--fs-24); font-weight:var(--fw-500); display:flex;
 align-items:flex-end; gap:6px;}
#aboutKps .kps-card .card-txt strong {font-size:70px; line-height:1; font-weight:var(--fw-700); letter-spacing:-0.02em;}

#aboutKps .kps-card-btm {transform: translateX(calc(-50% - 14px)) translateY(20px);
}


@media screen and (max-width: 1400px) {
  #aboutKps .inner {flex-direction: column;}
  #aboutKps .about-left {width: 100%; min-width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;}
  #aboutKps .about-btn-box {gap: 20px;}
  
  #aboutKps .about-right {width: 100%;}
  #aboutKps .kps-card-btm {transform: none;}
}


@media screen and (max-width: 1080px) {
  #aboutKps .inner {gap: 50px;}
  #aboutKps .about-btn-box {margin-top: 25px}
  #aboutKps .kps-card {gap: 20px;}
  #aboutKps .kps-card + .kps-card {margin-top: 20px;}
  #aboutKps .about-btn-box a {font-size: var(--fs-16);}

  #aboutKps .kps-card li {height: 335px;}
  #aboutKps .kps-card .card-tit {font-size: var(--fs-20);}
  #aboutKps .kps-card .card-txt strong {font-size: var(--fs-48);}
  #aboutKps .kps-card .card-txt {font-size: var(--fs-20);}

}

@media screen and (max-width: 768px) {
  #aboutKps .kps-card {flex-direction: column;}

}

@media screen and (max-width: 480px) {
  
  #aboutKps .about-btn-box {gap: 15px;}
  #aboutKps .about-btn-box a {padding: 12px 15px;}
  #aboutKps .kps-card {gap: 10px;}
  #aboutKps .kps-card + .kps-card {margin-top: 10px;}
  #aboutKps .kps-card li {padding: 40px; align-items: center;}

}



/**************************************************
    globalNetwork
***************************************************/
#globalNetwork { background:#111A1F; color:var(--color-white); }
#globalNetwork .network-wrap { position:relative; margin-top:5rem; border-radius:30px; overflow:hidden; }
#globalNetwork .network-map img { height:auto; margin:0 auto; display:block; }
#globalNetwork .network-pin-list { position:absolute; inset:0; }
#globalNetwork .network-pin { position:absolute; border:0; padding:0; background:transparent; cursor:pointer; width:auto; transform:translate(-50%,-50%); }
#globalNetwork .network-pin .pin-tit { display:block; width:fit-content; text-align:center; font-size:var(--fs-24); font-weight:var(--fw-700); margin-bottom:10px; }
#globalNetwork .network-pin .pin-tit strong { display:block; font-size:var(--fs-36); }
#globalNetwork .network-pin .dot { display:block; width:10px; height:10px; border-radius:50%; background: var(--color-white); box-shadow:0 0 0 0 rgba(255,255,255,0); margin:0 auto; }
#globalNetwork .network-pin.is-active .dot {animation:network_pin_pulse_on 1.6s ease-out infinite; box-shadow:0 0 0 6px rgba(255,255,255,.12), 0 0 18px rgba(0,64,152,1);}
#globalNetwork .network-pin .dot {animation:network_pin_pulse 1.6s ease-out infinite; box-shadow:0 0 0 6px rgba(255,255,255,.12), 0 0 18px rgba(255,255,255,.8); }
#globalNetwork .network-tooltip { position:absolute; left:0; top:0; opacity:0; pointer-events:none; transform:translate(-50%,-100%); transition:opacity .15s ease-out, transform .15s ease-out; font-size:var(--fs-16); }
#globalNetwork .network-tooltip.is-show { opacity:1; pointer-events:auto; transform:translate(-50%,-112%); }
#globalNetwork .network-tooltip .tt-pill { background:var(--color-white); border-radius:999px; padding:10px 18px; box-shadow:0 12px 30px rgba(0,0,0,.28); }
#globalNetwork .network-tooltip .tt-row { display:flex; align-items:center; gap:22px; white-space:nowrap; }
#globalNetwork .network-tooltip .tt-item { display:flex; align-items:baseline; gap:8px;}
#globalNetwork .network-tooltip .tt-label { font-weight:var(--fw-500); color:var(--color-gray); }
#globalNetwork .network-tooltip .tt-item strong { font-weight:var(--fw-700); color: var(--color-primary); }
#globalNetwork .network-tooltip .tt-tail { position:absolute; left:50%; bottom:-9px; transform:translateX(-50%); width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid var(--color-white); filter:drop-shadow(0 8px 10px rgba(0,0,0,.18)); }

@media screen and (max-width: 768px) {

  #globalNetwork .network-pin .pin-tit {font-size: var(--fs-18);}
    #globalNetwork .network-pin .pin-tit strong {font-size: var(--fs-20);}
}

@media screen and (max-width: 480px) {
  #globalNetwork .network-pin .pin-tit {font-size: var(--fs-16);}
  #globalNetwork .network-pin .pin-tit strong {font-size: var(--fs-18);}
}


/**************************************************
    business
***************************************************/
#business { overflow: hidden; position: relative; padding-top: 80px; border-radius: 36px 36px 0 0;overflow: hidden;margin-top: -36px; background: #fff; }
#business .section-link { display: flex;align-items:center; color:var(--clr-dark); font-weight: 600; }
#business .section-link .icon { margin-left: 0.8em; }
#business .section { position: relative; padding: 48px 0; opacity: 0;  }
#business .section-2, #business .section-3, #business .section-4 { margin-top: -160px; }
#business .section .flex { display: flex; flex-direction: row-reverse; margin-right: auto; margin-left: auto; max-width: var(--inner); width: 90%; }
#business .section .side { width: 41%; }
#business .section .contents { padding: 40px 100px 16px 0; width: 59%; }
#business .section .badge { display: inline-block; padding: 0 20px; height: 35px; line-height: 35px; font-size: 16px; font-weight: 600; background: #e6e6e6; border-radius: 35px; }
#business .section .heading { font-size: 100px; font-weight: 500;  }
#business .section .text { margin-top: 24px; line-height: 1.65; font-size: 19px;}
#business .section .thumbnail { overflow: hidden; position: relative; border-radius: 12px; }
#business .section .thumbnail::before { content: ''; display: block; padding-top: calc(410 / 720 * 100%); width: 100%; height: 0; }
#business .section .thumbnail .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#business .section .thumbnail img {height: 100%;}
#business .section-2 { background: var(--color-primary-light); }
#business .section-3 { background: var(--color-primary); color: var(--color-white); }
#business .section-4 { background: var(--color-primary-dark); color: var(--color-white);}

@media screen and (max-width: 1400px) {
  #business .section .heading {font-size: var(--fs-60);}
}

@media screen and (max-width: 1080px) {
  #business .section .heading {font-size: var(--fs-48);}
}

@media screen and (max-width: 768px) {
#business {padding-top: 50px;}
#business .section-link {margin-top: 30px;}
/* #business .section .flex {flex-direction: column;} */
#business .section .contents {
    padding: 40px 30px 16px 0;}
}


/**************************************************
    newsroom
***************************************************/
#news {padding-bottom: 10px;}
#news .main-brd-list { margin: 4rem auto 0; min-height: 505px; opacity: 0;}
#news .main-brd-list .brd-box {width: 100%; position: relative;}
#news .main-brd-list .brd-box .tab-btn {position: absolute; top: 0; font-size: 24px; color: #777; font-weight: 500;}
#news .main-brd-list .brd-box .tab-btn.active {color: #000; font-weight: 600;}
#news .main-brd-list .brd-box .tab-btn.active::before {content: ''; width: 100%; height: 3px; display: block; background: #000; position:absolute; bottom: -8px; left: 0;}
#news .main-brd-list .brd-box .tab-btn.active::after {content: ''; width: 7px; height: 7px; display: block; background: var(--color-primary); position:absolute; top: 0; right: -12px; border-radius: 50px;}
#news .main-brd-list .brd-box:nth-of-type(2) .tab-btn {transform: translateX(120px);}
#news .main-brd-list .brd-box:nth-of-type(3) .tab-btn {transform: translateX(240px);}
#news .main-brd-list .brd-box .brd-list {box-sizing: border-box; width: 100%; position: absolute; top: 70px; visibility: hidden; opacity: 0;}
#news .main-brd-list .brd-box .brd-list.active {visibility: visible; opacity: 1;}
#news .main-brd-list .brd-box .brd-list li {width: 100%; display: flex; gap: 20px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border);}
#news .main-brd-list .brd-box .brd-list li:first-of-type { border-top: 1px solid var(--color-border); }
#news .main-brd-list .brd-box .brd-list li a {display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 35px 20px; transition: .3s;}
#news .main-brd-list .brd-box .brd-list li a:hover {background: #EDEDED;}
#news .main-brd-list .brd-box .brd-list li span.cont {width: 85%;}
#news .main-brd-list .brd-box .brd-list li span.tit {font-size: 22px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#news .main-brd-list .brd-box .brd-list li span.txt {font-size: var(--fs-18); font-weight: 400; color: var(--color-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 18px;}
#news .main-brd-list .brd-box .brd-list li span.date {}
#news .main-brd-list .brd-box .brd-list li span {display: block;}

/* 썸네일 */
#newsThumbTooltip{position: fixed; left: 0; top: 0; width: 336px; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.18); pointer-events: none; z-index: 9999; opacity: 0; transform: translate3d(0,0,0) scale(.98); transition: opacity .15s ease, transform .15s ease;}
#newsThumbTooltip.is-show{
opacity: 1; transform: translate3d(0,0,0) scale(1);}
#newsThumbTooltip img{width: 100%; height: 100%; object-fit: cover; display: block;}

@media (hover: none) and (pointer: coarse){
  #newsThumbTooltip{ display:none; }
}


/************************************************** 
    career
***************************************************/

#career{overflow: hidden; position: relative; }
#career::after {z-index: 1;}
#career.aos-animate::after{ width: 0; }
#career .title-box{ margin-bottom: 130px; }
#career .title-box h3{color: #FFF; font-size: 70px;}

#career .bg{ background: url("../images/main/career_bg.jpg") no-repeat top center / 100% 100%; background-attachment: scroll !important; border-radius: 40px; position: relative; opacity: 0;}
#career .grid-box{ display: grid; grid-template-columns: 610px calc(100% - 610px); margin: -5px; position: relative; }
#career .grid-box > *{ border-radius: 40px; margin: 5px; padding: 70px; padding-top: 200px; position: relative; z-index: 10; }
#career .grid-box > .left {padding-top: 70px;}
#career .grid-box > .right {padding-top: 200px;}
#career .grid-box > *::before,
#career .grid-box > *::after{ content: ""; width: 40px; height: 40px; background: #FFF; mask-image: radial-gradient(circle 40px at 0% 0%, transparent 0, transparent 39px, black 40px); -webkit-mask-image: radial-gradient(circle 40px at 0% 0%, transparent 0, transparent 39px, black 40px); position: absolute; }
#career .grid-box > *::before{ top: -5px; }
#career .grid-box > *::after{ bottom: -5px; }

#career .left::before,
#career .left::after{ right: 0; }
#career .left::before{ transform: rotate(270deg); }
#career .left .bar{ content: ""; width: 10px; height: calc(100% + 10px); background: #FFF; position: absolute; top: -5px; right: 0; transform: translateX(100%); }
#career .left ul li:not(:last-of-type){ margin-bottom: 10px; } 

#career .left .viewmore {display: flex;  align-items: center;  justify-content: space-between; width: 320px; padding-inline: 40px; color:#fff;}

#career .right{ display: flex; flex-direction: column; justify-content: flex-end; color: #FFF; }
#career .right::before,
#career .right::after{ left: 0; }
#career .right::before{ transform: rotate(180deg); }
#career .right::after{ transform: rotate(90deg); }
#career .right .title-box{ display: none; }
#career .right h4{font-size: 50px; font-weight: 500; color: #FFF; line-height: 1.4; margin-bottom: 50px; }
#career .right p{ font-size: 20px; font-weight: 200; color: #FFF; line-height: 1.8; }

#career .viewmore{display: inline-flex; justify-content: center; align-items: center; background: #EEE; border-radius: 50px; font-size: 20px; padding: 10px 30px; position: relative; }
#career .viewmore i{ width: 45px; height: 45px; display: inline-flex; flex-direction: column; justify-content: center; position: relative; transition: background 0.4s; }
#career .viewmore i::after{ content: ""; width: 100%; height: 13px; background: url("../images/icon/icon_car_arrow_white.svg") no-repeat center center / contain; transition: transform 0.4s; }
#career .viewmore.white{ background: transparent; border: 1px solid #FFF; }
#career .viewmore:hover {background: var(--color-primary); /* 원하는 색상으로 변경 */color: #FFF;border:1px var(--color-primary);}


@media screen and (hover: hover) and (pointer: fine){
	#career .bg{ background-attachment: fixed !important; }
}

@media screen and (max-width: 1700px){
	#career .title-box{ margin-bottom: 100px; }

	#career .grid-box{ grid-template-columns: 500px calc(100% - 500px); }
	#career .grid-box > *{ padding: 50px; }
	#career .left .viewmore{ width: 280px; padding-inline: 25px; }
	#career .right h4{ margin-bottom: 35px; }
	#career .right p{ font-size: 19px; }
}

@media screen and (max-width: 1350px){
	#career .right p br{ display: none; }
}

@media screen and (max-width: 1280px){
	#career .title-box{ margin-bottom: 60px; }

	#career .grid-box{ grid-template-columns: 350px calc(100% - 350px); }
	#career .grid-box > *{ padding: 40px; }
	#career .left .viewmore{ width: 100%; padding-inline: 20px; }
	#career .right h4{ margin-bottom: 20px; }
	#career .right p{ font-size: 18px; }
}

@media screen and (max-width: 1000px){
	#career .title-box{ text-align: center; margin-bottom: 30px; }

	#career .bg{ background-size: auto 100%; background-position: left bottom; }
	#career .grid-box{ grid-template-columns: repeat(1, 100%); }
	#career .grid-box > *{ padding: 40px 35px; }

	#career .left{ order: 2; }
	#career .left::before{ top: -1px; left: -1px; right: unset; transform: rotate(180deg); }
	#career .left::after{ bottom: unset; top: -1px; right: -1px; transform: rotate(-90deg); }
	#career .left .bar{ content: ""; width: calc(100% + 10px); height: 10px; top: 0; right: -5px; transform: translateY(-100%); }
	#career .left .title-box{ display: none; }
	#career .left ul{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -5px; }
	#career .left ul li{ margin: 5px; }
	
	#career .right{ text-align: center; padding-block: 80px; }
	#career .right::before{ top: unset; bottom: -1px; left: -1px; transform: rotate(90deg); }
	#career .right::after{ bottom: -1px; left: unset; right: -1px; transform: rotate(0); }
	#career .right .title-box{ display: block; }
}

@media screen and (max-width: 700px){
	#career .left ul{ grid-template-columns: repeat(1, 100%); }
}



/**************************************************
    애니메이션
***************************************************/


@keyframes scroll_down{
  0%   { transform: translateX(-50%) translateY(0);   opacity: 0; }
  10%  { transform: translateX(-50%) translateY(0);   opacity: 1; }
  70%  { transform: translateX(-50%) translateY(10px);opacity: 1; }
  100% { transform: translateX(-50%) translateY(12px);opacity: 0; }
}


@keyframes network_pin_pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.5),0 0 12px rgba(255,255,255,.5);}
  70%{box-shadow:0 0 0 16px rgba(255,255,255,0),0 0 22px rgba(255,255,255,1);}
  100%{box-shadow:0 0 0 16px rgba(255,255,255,0),0 0 0 rgba(255,255,255,0);}
}

@keyframes network_pin_pulse_on{
  0%{box-shadow:0 0 0 0 rgba(0,64,152,.8),0 0 15px rgba(0,64,152,.8);}
  70%{box-shadow:0 0 0 19px rgba(0,64,152,0),0 0 25px rgba(0,64,152,1);}
  100%{box-shadow:0 0 0 19px rgba(0,64,152,0),0 0 0 rgba(0,64,152,0);}
}


@keyframes slide_up {
    0% {transform: translateY(30px); opacity: 0;}
    30% {transform: translateY(30px); opacity: 0;}
}

@keyframes cb-move{
  0%{ transform: translateY(0); }
  40%{ transform: translateY(-12px); }
  100%{ transform: translateY(-8px); }
}