@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; height:calc(100vh - 6rem); min-height:750px; width:100%; letter-spacing: -.5px;}
.intro:before{ content: ""; position: absolute; left:0; top:0; width:100vw; height:50vh;
    background: -moz-linear-gradient(top,  #eff5ff 0%, #c8e2ff 100%);
    background: -webkit-linear-gradient(top,  #eff5ff 0%,#c8e2ff 100%);
    background: linear-gradient(to bottom,  #eff5ff 0%,#c8e2ff 100%);
}
.intro::after{ content: ""; position: absolute; right:-50px; top:20vh; width:110px; height:110px; background:url('/images/web/kodit/intro/bg_circle2_1.png') no-repeat center;}
.intro > .container{ position: relative; height: 100%; display: flex; flex-direction: column;}
.intro h1{ position:absolute; left:0; top:2rem; z-index: 1;}
.intro h1::after{ content: ""; position: absolute; left:50%; top:-120px; width:242px; height:242px; background:url('/images/web/kodit/intro/bg_circle1_1.png') no-repeat center; z-index: -1;}
.intro .slogan{ display: flex; height:35vh; min-height:230px; align-items: center; justify-content: right; }
.intro .slogan img{ width:auto; height:170px}

.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.8; transform: scale(1); }
  80%{ opacity: 0; transform: scale(1.75); }
  100%{ opacity: 0;; }
}

.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:hover{ border-color:#246ebe;}
.intro .linkBox .onbiz:hover:after{animation: hoverAni linear 0.8s infinite; }
.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 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; }
}

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

    .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: 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 screen and (max-width: 640px){

    .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; }
}

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

    .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;}

     .lyrPopup{ width:100% !important; }
}

@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;}
}

@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;}
}


    /* 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; }