@import url("/common/css/basic.css");

#wrap{width:100%; overflow:hidden;}
#wrap .header{width:100%; height: 65px; background-color: #fff;}
#wrap .header p{width:95%; max-width:65rem; margin:0 auto; padding-top: 17px; font-size: 1.05rem;  font-weight: 700; color: #007bc3; padding-left: 10px;padding-right: 10px;}
#wrap .header p img{width:9rem; margin-top: -5px;}
#wrap .header p span{ float: right; padding-top: 4px;}
#wrap .header p span img{width:12.5rem; margin-top: -16px;}

body{font-family: 'Pretendard'; }
.container{ position: relative; width:95%; max-width:64rem; margin:0 auto;}


/* 모달팝업 */
/* The Modal (background) */
.modal {
  display: block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 0px solid #888;
  width: 20rem;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 1.5rem;
  font-weight: bold;
  margin-top:-0.45rem;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: .45rem 1.15rem;
  background-color: #007bc3;
  color: white;
  font-size: .7rem;
  font-weight: 700;
  font-family: 'SCDream';
}

.modal-body {
	padding: 16px 20px;
	line-height: 1.6;
	font-size: 0.75rem;
	font-weight: 500;
	font-family: 'SCDream';
	color: #111;
	letter-spacing: -.5px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #007bc3;
  color: white;
}



/* 공통 레이어 팝업 */
.lyrPopup{position:fixed; max-width:45rem; background: #004f7a; z-index:999; box-shadow:0 0 15px rgba(0,0,0,.3);}
.lyrPopup > p{background:#666; padding:0.25rem .5rem; color:#fff; font-size:14px;}
.lyrPopup > p input{vertical-align:baseline; margin-left:0.25rem;}
.lyrPopup .lyrCont{max-height:calc(100vh - 10rem); background: #fff; margin-top:2rem; overflow:auto; }
.lyrPopup .lyrClose{position:absolute; right: .5rem; top: .2rem; color:#fff; font-size:1rem;}
@media screen and (max-width: 1024px) {
	.lyrPopup .lyrWrap{width:95%; max-height:80vh; left:2.5%; transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%);}
}

.intro{ position:relative; display: flex; align-items: center; height:100vh; min-height:750px; padding:30px 0; width:100%; letter-spacing: -.5px; background: none;}
.intro > .container{ position: relative; width: calc(100% - 60px); max-width:1680px; margin: 0 auto; overflow: hidden;}
.intro  .intro_inner{position: relative; width: 100%; }
.intro  .intro_inner .video-wrap{ border-radius:40px; /*padding-top:50.25%;*/ width: calc(100% - 200px); position: relative; height: calc(85vh); overflow: hidden; background-color: #ebebeb;}
/*.intro  .intro_inner .video-wrap:after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0 0 0 / 25%);}*/
.intro  .intro_inner .video-wrap .video-con{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.intro  .intro_inner .video-wrap .video-con video{width: 100%; height: 100%; object-fit: cover}

.intro  .intro_inner .video-wrap .txt-slogan{position: absolute; top: 7%; left: 5%; color: #ffffff; font-size: 1rem; z-index: 1;}
.intro  .intro_inner .video-wrap .txt-slogan .tit{ font-size: 54px; font-weight: bold;}

.intro  .intro_inner .info-wrap{position: absolute; bottom: 7%; left: 5%; color: #ffffff; font-size: .85rem; z-index: 1;}
.intro  .intro_inner .info-wrap h1{height: auto; text-align: inherit; padding-top: 0;}
.intro  .intro_inner .info-wrap h1 img{width: 146px; height: auto;}
.intro  .intro_inner .info-wrap .info-con{display: flex; flex-direction: row; align-items: end;}
.intro  .intro_inner .info-wrap .info-con .call-info{padding-right: 25px; font-weight: 400;}
.intro  .intro_inner .info-wrap .info-con .call-info h4{font-weight: 400;}
.intro  .intro_inner .info-wrap .info-con .call-info h4 em{font-size: 1.5rem; display: block; font-weight: bold;}
.intro  .intro_inner .info-wrap .info-con .call-info p{font-size: .8rem;}
.intro  .intro_inner .info-wrap .info-con .waMark img{height: 70px; width: auto;}

.intro  .intro_inner .intro-link{position: absolute; right: 15px; top: 50%; transform: translateY(-50%);}
.intro  .intro_inner .intro-link .link-wrap{}
.intro  .intro_inner .intro-link .link-wrap .link-con{display: flex; flex-direction: column; gap: 1rem;}
.intro  .intro_inner .intro-link .link-wrap .link-con a{ position: relative; display: block; min-width: 400px; min-height: 220px; padding: 30px 40px 20px; border-radius: 60px; transition: ease-in .2s; font-weight: 400;}
.intro  .intro_inner .intro-link .link-wrap .link-con a h4{display: flex; flex-direction: row; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 600; margin-bottom: 15px; transition: ease-in .15s;}
.intro  .intro_inner .intro-link .link-wrap .link-con a h4 .logo{ width: 80px; height: 80px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.intro  .intro_inner .intro-link .link-wrap .link-con a.onbiz h4 .logo img{ width: auto; height: 18px;}
.intro  .intro_inner .intro-link .link-wrap .link-con a.kodit h4 .logo img{ width: auto; height: 22px; margin-top: 5px;}
.intro  .intro_inner .intro-link .link-wrap .link-con a.basa h4 .logo img{ width: auto; height: 32px}
.intro  .intro_inner .intro-link .link-wrap .link-con a.onbiz{ color: #ffffff; background:linear-gradient(160deg, #0d2a73, #133fae)}
.intro  .intro_inner .intro-link .link-wrap .link-con a.kodit{ color: #2e3b13; background: rgba(188,229,188,.65); backdrop-filter: blur(10px); -webkit-backdrop-filter:blur(10px);}
.intro  .intro_inner .intro-link .link-wrap .link-con a.basa{ color: #283e80; background: rgba(216,226,244,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter:blur(10px);}
.intro  .intro_inner .intro-link .link-wrap .link-con a > span{display:block; padding:0 0 20px 6px;}
.intro  .intro_inner .intro-link .link-wrap .link-con a > span .blc{display: block;}
.intro  .intro_inner .intro-link .link-wrap .link-con a > i{ position: absolute; z-index: 1; display: block; right: 40px; bottom: 40px; width: 39px; height: 16px; background-repeat: no-repeat;}
.intro  .intro_inner .intro-link .link-wrap .link-con a.onbiz > i{ background-image:url(/images/web/kodit/intro/arrow_wh.svg)}
.intro  .intro_inner .intro-link .link-wrap .link-con a.kodit > i{ background-image:url(/images/web/kodit/intro/arrow_grn.svg)}
.intro  .intro_inner .intro-link .link-wrap .link-con a.basa > i{ background-image:url(/images/web/kodit/intro/arrow_bru.svg)}
.intro  .intro_inner .intro-link .link-wrap .link-con a:after{ position: absolute; display: block; content: ""; right: 30px; bottom: 30px; width: 30px; height: 30px; background: #fff; border-radius: 30px; transition: all .4s; opacity: 0;}
.intro  .intro_inner .intro-link .link-wrap .link-con a.onbiz:after{ background: #0083cd;}
.intro  .intro_inner .intro-link .link-wrap .link-con a.kodit:after{ background: #8dc63f;}
.intro  .intro_inner .intro-link .link-wrap .link-con a.basa:after{ background: #283e80;}




.intro .cont{ flex: 1;}
.intro .cont:after{display:block; clear: both; content:"";}

.intro .link{ position: relative; width:100%; /*padding:2rem 3rem 2.5rem;*/ padding:2rem; border-radius:1rem; background:#fff; /*box-shadow: 0 0 20px rgba(0,0,0,.3);*/ box-shadow: 0 10px 20px rgba(0,0,0,.1); }
.intro .link:before{ content:""; position:absolute; right:calc(50%  - 38rem); top:-6rem; width:10rem; height:10rem; background:url('/images/web/kodit/intro/bg_txt.svg') no-repeat center; }
.intro .link:after{ content:""; position:absolute; left:calc(50% - 35rem); top:-180px; width:660px; height:200px; background:url('/images/web/kodit/intro/bg_kodit.png') no-repeat center; }
/* .intro .linkBox { display: flex; gap: 2rem;}
.intro .linkBox a{ cursor: pointer;}
.intro .linkBox > a{ flex: 1;}
.intro .linkBox a:before{ content:'\e915'; position:absolute; right:1.5rem; top:1rem; width:2.5rem; height:2.5rem; border-radius:50%; background:#246ebe; color:#fff; font-family: 'xeicon'; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; transform: rotate(45deg); z-index: 1; transition: all 0.2s;}
.intro .linkBox .inner a:before{ right:0;} */

@keyframes hoverAni {
  0%{ opacity: 0.5; transform: scale(1); }
  80%{ opacity: 0; transform: scale(3); }
  100%{ opacity: 0;; }
}
@keyframes hoverAni2 {
  0%{ opacity: 0; transform:translateX(-20px); }
  50%{ opacity: 0.8; transform: translateX(0px); }
  100%{ opacity: 0; transform: translateX(0px);}
}

.intro .linkBox .onbiz{ position:relative; text-align: center; border-radius: 1rem; border:2px solid #cfdffe; padding:/*1.5rem*/2rem; background:#eff5ff; transition: all 0.2s;}
.intro .linkBox .onbiz:after{ content:''; position:absolute; right:1.5rem; top:1rem; width:2.5rem; height:2.5rem; border-radius:50%; background:#b5d2f1; z-index: 0; }
.intro .linkBox .onbiz h4{ font-size:1.6rem; font-weight: 900; color:#246ebe; line-height:1.3; letter-spacing:-.2px}
.intro .linkBox .onbiz h4 em{ display: block; font-size:0.9rem; font-weight: 600; color:#000; margin-bottom: 0.5rem;}

/*온라인대환안내시스템 제외 intro버전 2025-0612*/
.intro .linkBox .onbiz.kodit_new{border:2px solid transparent; background-color:#ffffff}
.intro .linkBox .onbiz.kodit_new h4{ color:#323232; font-weight:700}
.intro .linkBox .onbiz.kodit_new h4 em{color:#666}
.intro .linkBox .onbiz.kodit_new p img{height:154px}
.intro .linkBox .onbiz.kodit_new:hover{ border-color:#eaeaea; background-color:#f3f3f3}
.intro .linkBox .onbiz.kodit_new:after{background-color:#aeaeae; width:2.3rem; height:2.3rem; top:1.1rem; right:1.6rem}
.intro .linkBox a.kodit_new:before{background:#f8f8f8; color:#555}
.intro .linkBox a.kodit_new:hover:before{background:#9a9a9a; box-shadow:0px 5px 5x rgba(0,0,0,.1); color:#fff}
.intro .linkBox .onbiz span{font-weight:300}
/* //온라인대환안내시스템 제외 intro버전 2025-0612*/

.intro .linkBox .inner{ display: flex; flex: 1; flex-direction: column; gap: 2rem;}
.intro .linkBox .inner > a{ position: relative; padding-left:35%; flex: 1;}
.intro .linkBox .inner > a:before{ background:#f8f8f8; color:#555;}
.intro .linkBox .inner > a:hover:before{ background:#246ebe; color:#fff;}

.intro .linkBox .inner > a br{display:none;}
.intro .linkBox .inner > a div br{display:inline-block;}
.intro .linkBox .inner > a p{ position:absolute; left:0; top:0; width:30%; height:100%; border-radius:1rem; background:#f8f8f8; display: flex; align-items: center; justify-content: center; }
.intro .linkBox .inner > a p img{ width:6.25rem; height:auto;}
.intro .linkBox .inner > a h4{ font-size:1.4rem; font-weight: 700; line-height: 1.3; margin-bottom: 1rem;}
.intro .linkBox .inner > a h4 em{ display: block; font-size:0.9rem; color:#666; margin-bottom: 0.5rem;}
.intro .linkBox .inner > a h4 span{ display: block;  font-size:0.9rem; color:#246ebe;}
.intro .linkBox .inner > a span{display:block; font-size:0.85rem; color:#666; line-height: 1.4; word-break: keep-all; margin-right: 2.5rem;}


/* footer */
footer{ background:#eee; overflow: hidden; }

footer .call { display: flex; height:6rem; gap: 1.5rem; align-items: center;}
footer .call h4{ height:4rem; display: flex; align-items: center; color:#111; font-weight: 700; font-size:1rem; padding-left:4rem; background:url('/images/web/kodit/intro/ico_call2.png') no-repeat left center/contain; gap: 1rem;}
footer .call h4 em{color:#246ebe; font-weight: 900; font-size:1.1rem;}
footer .call p{ font-size:16px;}
footer .call p span{ display: inline-block; padding:0 0.5rem; font-size:14px; line-height:1rem; background:#fff; border-radius: 1rem; border:1px solid #ccc;}

footer .waMark {position:absolute; right:0; bottom:calc(50% - 2rem);}
footer .waMark img {width:auto; height:4rem;}

/* sessionTimeout */
.sessionTimeout .container{ max-width:66rem; padding:0 1rem;}
.sessionTimeout header{ height:5rem; display: flex; align-items: center;}
.sessionTimeout header img{ width:auto; height:1.75rem;}
.sessionTimeout .contents{ min-height:calc(100vh - 12rem); display: flex; align-items: center; justify-content: center; word-break: keep-all;}
.sessionTimeout .ico{ text-align: center; }
.sessionTimeout .txt{ text-align: center; margin:1.5rem 0; font-size:1.5rem; line-height:1.4;}
.sessionTimeout .txt em{ font-weight: 700; }
.sessionTimeout .txt em.pc_blue{ color: #246ebe; }
.sessionTimeout .box{ display: block; width:1000px; background:#f9f9f9; text-align: center; border:1px solid #ddd; border-radius:1rem; padding:2rem 1.5rem;}
.sessionTimeout .box strong{ display: block; font-size:1.2rem; font-weight:600; text-decoration: underline;}
.sessionTimeout .box span{ display: block; color:#444;}
.sessionTimeout footer{ min-height:7rem; text-align: center; padding-top:1rem; background:#fff; }

@media (hover: hover) {
	.intro  .intro_inner .intro-link .link-wrap .link-con a:hover{box-shadow: 5px 5px 15px rgba(0,0,0,.06); border-radius: 80px;}
	.intro  .intro_inner .intro-link .link-wrap .link-con a:hover h4{margin-bottom: 0;}
	.intro  .intro_inner .intro-link .link-wrap .link-con a.onbiz:hover{color: #034868; background: #ffffff;}
	.intro  .intro_inner .intro-link .link-wrap .link-con a.kodit:hover{color: #1f4e09; background: #ffffff;}
	.intro  .intro_inner .intro-link .link-wrap .link-con a.basa:hover{color: #283e80; background: #ffffff;}
	.intro  .intro_inner .intro-link .link-wrap .link-con a.onbiz:hover > i{background-image:url(/images/web/kodit/intro/arrow_bru.svg)}
	.intro  .intro_inner .intro-link .link-wrap .link-con a:hover > i{animation: hoverAni2 ease-out 0.9s infinite; }
	.intro  .intro_inner .intro-link .link-wrap .link-con a:hover:after{animation: hoverAni  ease-out 0.9s infinite; animation-delay: 0.5s; /*width: 90px;*/}
	.intro .linkBox .onbiz:hover{ border-color:#246ebe;}
	.intro .linkBox .onbiz:hover:after{animation: hoverAni linear 0.8s infinite; }
}

@media screen and (max-height: 1100px){

  /* sessionTimeout */
  .sessionTimeout .box{ width:100%;}

}

@media screen and (max-height: 945px){

  .intro .slogan{ height:30vh; }

}

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

    .intro::after{ display: none}
    .intro .link{ padding:2rem 1.5rem 2.5rem; }
    .intro{
      align-items: flex-start;
      height: inherit;
      padding: 30px;
    }
    .intro .intro_inner .video-wrap{
      width: 100%;
      height: 540px;
    }
    .intro .intro_inner .intro-link{
      position: relative;
      top: auto;
      right: auto;
      transform: none;
      margin-top: 20px;
    }
    .intro .intro_inner .intro-link .link-wrap .link-con{
      flex-direction: row;

    }
    .intro .intro_inner .intro-link .link-wrap .link-con a{
      flex-grow: 1;
      min-height: auto;
    }
    .intro .intro_inner .info-wrap{
      position: initial;
      color: #1a1a1a;
      left: 7px;
      bottom: auto;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
    }
    .intro .intro_inner .info-wrap h1{
      position: absolute;
      left: 30px;
      top: 20px;
    }
    .intro .intro_inner .info-wrap .info-con{
      flex-grow: 1;
      display: flex;
      justify-content: space-between;
      padding-right: 7px;
      align-items: flex-start;
    }
    .intro .intro_inner .info-wrap .info-con .call-info{
      display: flex;
      align-items: flex-end;
    }
    .intro .intro_inner .info-wrap .info-con .call-info p{
      padding-left: 12px;
      padding-bottom: 9px;
    }
    .intro .intro_inner .intro-link .link-wrap .link-con a > span{
      padding-left: 7px;
    }
}

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

}


@media screen and (max-width: 1024px){
  .intro{
    padding: 20px;
  }
  .intro .link:after{ height:140px; background-size:contain; top: -120px; left:-280px}

  /* layer popup */
  .lyrPopup{ width:auto% !important; height:auto !important; top:5% !important; left:50% !important; margin-left:0 !important; max-width:95%; max-height:80%; transform:translateX(-50%); z-index:99;}
  .lyrPopup .lyrCont{text-align:center; max-height:calc(100vh - 2rem);}
  .lyrPopup img{max-width:100%; height:auto;
  }


}
@media screen and (max-width: 991px){
	.intro .intro_inner .intro-link .link-wrap .link-con{
	    flex-direction: column;
	}
	.intro .intro_inner .intro-link .link-wrap .link-con a{
	    min-width: auto;
	    width: 100%;
    }
    .intro .intro_inner .intro-link .link-wrap .link-con a h4 .logo {
	 	width: 60px;
	 	height: 60px;
	 }
	 .intro .intro_inner .intro-link .link-wrap .link-con a.onbiz h4 .logo img {
	 	height:14px;
	 }
	 .intro .intro_inner .intro-link .link-wrap .link-con a.kodit h4 .logo img {
	 	height: 18px;
	 }
	 .intro .intro_inner .intro-link .link-wrap .link-con a > span {
	 	padding: 0 0 10px 6px;
	 }
	 .intro  .intro_inner .intro-link .link-wrap .link-con a > span .blc{display: inline;}
}

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


    .intro{ height:auto; /*margin-bottom:2rem;*/}
    .intro h1 img{ width:auto; height:1.5rem; }
    .intro > .container{ display: block;}

    .intro .slogan{ height:auto; min-height:0px; padding:1rem 0 2rem;}
    .intro .slogan img{ width:auto; height:7rem;}

    .intro .link{ margin:0; padding:1.25rem 1rem;}
    .intro .linkBox{ display: block;}
    .intro .linkBox .onbiz{ display: block; margin-bottom:2rem; text-align: left; padding-left:35%;}

    /*2025-0612추가*/
    .intro .linkBox .onbiz.kodit_new{margin-bottom:0}

    .intro .linkBox .onbiz p{ position:absolute; left:0; top:0; width:30%; height:100%; display: flex; align-items: center; justify-content: center;}
    .intro .linkBox .onbiz p img{ width:auto; max-width:80%; max-height:6rem;}
    .intro .linkBox .inner > a:before{ right:0; top:0;}
    .intro .linkBox .inner > a p img{ width:4.5rem;}

    footer{ padding:2rem 0;}
    footer .call { display: block; height:auto;}
    footer .call h4{ margin-bottom:0.5rem; height:auto; background:none; padding-left:0;}
}

@media (max-width: 767px){
  .intro > .container{
    width: 100%;
  }
  .intro .intro_inner .video-wrap{
    width: 100%;
    height: 420px;
  }

  .intro .intro_inner .intro-link .link-wrap .link-con a h4{
    font-size: 1.125rem;
  }
  .intro .intro_inner .intro-link .link-wrap .link-con a{
    padding: 15px 25px;
    border-radius: 50px;
  }
  .intro .intro_inner .video-wrap{border-radius: 20px}
  .intro .intro_inner .intro-link .link-wrap .link-con a h4{margin-bottom:10px}
  .intro .intro_inner .intro-link .link-wrap .link-con a h4 .logo{width: 60px; height: 60px;}
  .intro .intro_inner .intro-link .link-wrap .link-con a.onbiz h4 .logo img{height:15px}
  .intro .intro_inner .intro-link .link-wrap .link-con a.kodit h4 .logo img{height: 18px}
  .intro .intro_inner .intro-link .link-wrap .link-con a > span{padding: 0 0 10px 7px;}
  .intro .intro_inner .intro-link .link-wrap .link-con a{ padding:15px 20px; border-radius:20px}

}

@media screen and (max-width: 640px){
  .intro{
    padding: 15px;
  }

    .intro h1{ position: relative; left: auto; top: auto; padding-top:1.5rem; padding-left:.6rem}
    .intro .slogan{ justify-content: left; padding-left:.6rem}
    .intro .link:after{ width:180px; height:100px; left:auto; right:-20px; top:-90px; background-position: center right; background-size: auto 100%;}

    /* sessionTimeout */
    .sessionTimeout header img{ height:1.5rem;}
    .sessionTimeout .contents{ min-height:0px; margin:2rem auto;}
    .sessionTimeout .ico img{ width:auto; height:5rem;}
    .sessionTimeout .txt{ font-size:1.25rem; }
    .sessionTimeout .box strong{font-size:1rem; }
    .intro .intro_inner .video-wrap{
      width: 100%;
      height: 320px;
    }
}


@media screen and (max-width: 560px){
  .intro{
    padding: 12px;
  }
    .intro .linkBox a h4{ display: flex; flex-direction: column; justify-content: center; margin: 0; }
    .intro .linkBox a h4 em{ margin-bottom: 0.25rem !important; margin-right:2.5rem; word-break: keep-all;}
    .intro .linkBox .onbiz { padding-left:1.5rem;}
    .intro .linkBox .onbiz p{ left:1rem; top:1rem; width:6rem; height:6rem; }
    .intro .linkBox .onbiz p img{ max-width:100%; max-height:100%;}
    .intro .linkBox .onbiz h4{ padding-left:6.5rem; height:5rem; font-size: 1.4rem;}
    .intro .linkBox .inner > a{ padding-left:0;}
    .intro .linkBox .inner > a p{ width:5rem; height:5rem;}
    .intro .linkBox .inner > a p img{ width:4rem;}
    .intro .linkBox .inner > a h4{ padding-left:6rem; min-height:5rem; font-size: 1.25rem;}
    .intro .linkBox .inner > a h4 span{ margin-top:0;}
    .intro .linkBox .inner > a span{ margin-top:1rem; margin-right:0;}
    .intro .intro_inner .info-wrap{padding-bottom:20px}
    .intro .intro_inner .info-wrap .info-con{align-items: flex-end;}
    .intro .intro_inner .info-wrap .info-con .call-info{padding-right: 10px;}
    .intro .intro_inner .info-wrap .info-con .call-info h4 em{font-size: 1.125rem;}
    .intro .intro_inner .info-wrap .info-con .waMark img{height: 50px;}
    .intro .intro_inner .info-wrap .info-con .call-info p{padding-bottom: 0}

     .lyrPopup{ width:100% !important; }

     .intro .intro_inner .intro-link{margin-top: 12px}
     .intro .intro_inner .intro-link .link-wrap .link-con{gap:12px}
     .intro .intro_inner .info-wrap h1{left: 10px; top: 10px;}
     .intro .intro_inner .info-wrap h1 img{width: 97px;}
     .intro .intro_inner .intro-link .link-wrap .link-con a > span .blc{display: block;}
     .intro .intro_inner .intro-link .link-wrap .link-con a > i{background-size: 30px auto; right: 20px; bottom: 25px;}
     .intro .intro_inner .info-wrap .info-con .call-info{flex-direction: column; align-items: flex-start;}
     .intro .intro_inner .info-wrap .info-con .call-info p{padding-left: 0;}
}

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

    .intro .link:after{ display: none}
    .intro .linkBox a:before{ right:1rem; top:1rem; width:1.75rem; height:1.75rem; font-size: 1rem;}
    .intro .linkBox .onbiz{ padding:1rem;}
    .intro .linkBox .onbiz:after{ display: none;}
    .intro .linkBox .onbiz h4{ font-size: 1.25rem;}

     /* sessionTimeout */
    .sessionTimeout .txt br{ display: none;}
    /* basa 추가 */
    .intro .intro_inner .intro-link .link-wrap .link-con a h4 .logo{width: 50px; height: 50px;}
	.intro .intro_inner .intro-link .link-wrap .link-con a.onbiz h4 .logo img{height:12px}
	.intro .intro_inner .intro-link .link-wrap .link-con a.kodit h4 .logo img{height: 14px}
	.intro .intro_inner .intro-link .link-wrap .link-con a.basa h4 .logo img{height: 26px}
	.intro .intro_inner .intro-link .link-wrap .link-con a > span {padding: 0 0 5px 7px}
}

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

    .intro .slogan img{ height:6rem;}

    .intro .linkBox .onbiz { text-align: center; padding:1.5rem 1rem;}
    .intro .linkBox .onbiz p{ position: relative; left: auto; top:auto; width:100%; margin:0.5rem 0;}
    .intro .linkBox .onbiz p img{ max-width:100%; max-height:100%;}
    .intro .linkBox .onbiz h4{ padding-left:0; height:auto; display: block;}
    /*2025-0612수정 .intro .linkBox .onbiz br{ display: none;}*/

    /*2025-0612추가*/
    .intro .linkBox a h4 em{margin-left:2.5rem}

    footer .waMark{ position: relative; right: auto; bottom: auto; margin-top:1rem;}
    footer .waMark img{ height:3rem;}
    .intro .intro_inner .video-wrap{
      width: 100%;
      height: 220px;
    }
}

/* sessionTimeout */
.sessionTimeout header img{ height:1.5rem;}
.sessionTimeout .contents{ min-height:0px; margin:2rem auto;}
.sessionTimeout .ico img{ width:auto; height:5rem;}
.sessionTimeout .txt{ font-size:1.25rem; }
.sessionTimeout .box strong{font-size:1rem; }


@media (min-width: 992px){
	/* basa 추가 */
	.intro .intro_inner .intro-link .link-wrap .link-con a{
	    min-width: auto;
	    width: 50%;

	}

}
@media (min-width: 768px){
  .intro > .container{
    max-width: 720px;
    width: 100%;
  }

  .intro .intro_inner .intro-link .link-wrap .link-con a h4{
    font-size: 1.125rem;
  }
  .intro .intro_inner .intro-link .link-wrap .link-con a{
    padding: 15px 20px;
    border-radius: 40px;
  }

}

@media (min-width: 992px){
  .intro > .container{
    max-width: 960px;
    width: 100%;
  }
}

@media (min-width: 1200px){
  .intro > .container{
    max-width: 1140px;
  }
}

@media (min-width: 1280px){
  .intro .intro_inner .intro-link .link-wrap .link-con a{
    min-width: auto;
    width: 50%;
  }
  .intro > .container{
    width: calc(100% - 60px);
    max-width: 1680px;
    height: 75vh;
    max-height: 640px;
  }
  .intro .intro_inner .video-wrap{
    height: 75vh;
    max-height: 640px;
  }

}

@media (min-width: 1280px) and (max-width : 1535px) {

  .intro .intro_inner .intro-link .link-wrap .link-con a{
    padding: 15px 20px;
    /*min-height: 200px;*/
    /*basa 추가*/
    min-height: 180px;
    min-width: inherit;
    border-radius: 50px;
    width: auto;
  }
  .intro .intro_inner .intro-link .link-wrap .link-con a h4{
    font-size: 1rem;
    margin-bottom: 10px;
  }

  /*basa 추가*/
  .intro .intro_inner .intro-link .link-wrap .link-con a > span{
  	padding: 0 0 10px 6px;
  }
  .intro .intro_inner .intro-link .link-wrap .link-con a > i{
  	bottom: 30px;
  }
  .intro .intro_inner .intro-link .link-wrap .link-con a:after{
  	bottom: 20px;
  }
  .intro .intro_inner .intro-link .link-wrap .link-con a:hover{
  	border-radius: 50px;
  }

}

@media (min-width: 1536px){
  .intro > .container{
    height: 90vh;
    max-height: 820px;
  }
  .intro .intro_inner .video-wrap{
    height: 90vh;
    max-height: 820px;
  }
  .intro .intro_inner .intro-link .link-wrap .link-con a{
    width: auto;
    min-width: 400px;
    min-height: 220px;
    padding: 30px 40px 20px;
    border-radius: 60px;
  }

}
@media (min-width: 1921px){
  .intro > .container{
    max-width: 2000px;
    height: 75vh;
    max-height: 1080px;
  }
  .intro .intro_inner .video-wrap{
    height: 75vh;
    max-height: 1080px;
  }

}

@media (min-width: 2561px){
  .intro > .container{
    max-width: 2000px;
    height: 75vh;
    max-height: 1040px;
  }
  .intro .intro_inner .video-wrap{
    height: 75vh;
    max-height: 1200px;
  }

}