/********************************************************
* Sub Page
*********************************************************/
/* Common */
.sub-visual {position:relative; height:248px; transition:height .3s; overflow: visible; top: 100px;}
.sub-visual__bg {position:absolute; left:0; width:100%; height:100%; overflow:hidden;}
.sub-visual__img {height:100%; background-size:cover!important; animation:visualAnimation forwards linear 1s; background: url(../../images/sub/visual_bg.jpg);}
@keyframes visualAnimation {0%{transform:scale(1.1);}100%{transform:scale(1);}}
.sub-visual .inner {display:flex; align-items:center; position:relative; height:100%; padding-bottom:15px; z-index:50; justify-content: center;}
.sub-bread-nav-wrap{position: absolute; bottom: 58px; left: 0; width: 100%;}
.sub_txt{display: flex; height: 50px; justify-content: center;}
.sub_txt li{height: 100%; position: relative; line-height: 50px; text-align: center; font-size: 15px; color: #fff; margin-right: 33px;}
.sub_txt li::before{content: "";  position: absolute; right: -18px; top: 50%; margin-top: -1.5px; width: 5px; height: 5px; z-index: 99; border-radius: 50px; background: #fff;}
.sub_txt li:last-of-type::before{display: none;}
.sub_txt li a{color: #fff;}
.sub_txt li a i{color: #fff;}
.sub_txt .sub-bread-nav__home{}
.sub_txt .sub-bread-nav__depth2{margin-right: 0; font-weight: 600; font-size: 17px;}

.sub-visual .inner .title-st1{font-size: 48px; letter-spacing: 3px; font-weight: 700; line-height: 1; text-transform: uppercase; color: #fff;}


.sub-content{width: 1240px; margin: 0 auto; padding: 180px 0 130px;}
@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}
.animatedFadeInUp {opacity: 0}
.fadeInUp {opacity: 0;  animation-name: fadeInUp; -webkit-animation-name: fadeInUp;}



.sub_tba{display: block; margin: 0 auto;}

/*TBA*/
.tbaW{width: 1240px; margin: 0 auto; padding: 63px 0;}
.tbaW p{text-align: center; font-size: 56px; text-transform: uppercase; font-weight: 800; margin-top:42px;}
.loading {display: flex; justify-content:center;}
.loading .dot {
  position: relative;
  width: 2em;
  height: 2em;
  margin: 0.8em;
  border-radius: 50%;
}
.loading .dot::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  animation: wave 2s ease-out infinite;
}
.loading .dot:nth-child(1) {
  background: #7ef9ff;
}
.loading .dot:nth-child(1)::before {
  animation-delay: 0.2s;
}
.loading .dot:nth-child(2) {
  background: #89cff0;
}
.loading .dot:nth-child(2)::before {
  animation-delay: 0.4s;
}
.loading .dot:nth-child(3) {
  background: #4682b4;
}
.loading .dot:nth-child(3)::before {
  animation-delay: 0.6s;
}
.loading .dot:nth-child(4) {
  background: #0f52ba;
}
.loading .dot:nth-child(4)::before {
  animation-delay: 0.8s;
}
.loading .dot:nth-child(5) {
  background: #000080;
}
.loading .dot:nth-child(5)::before {
  animation-delay: 1s;
}

@keyframes wave {
  50%, 75% {
    transform: scale(2.5);
  }
  80%, 100% {
    opacity: 0;
  }
}


h1.title-st1 {font-size: 30px; text-align: center; font-weight: 600; margin-bottom: 50px; margin-bottom: 10px;}
h1.title-st1 span {display: inline-block;}
h1.title-st1 span span{display: inline-block; width: auto; margin-right: -0.3em; animation: animate-characters 0.75s var(--index) forwards; opacity: 0; position: relative;}

@keyframes animate-characters {
  0% {
    bottom: -0.1em;
    opacity: 1;
  }
  
  50% {
    bottom: 0.1em;
  }

  100% {
    bottom: 0;
    opacity: 1;
  }
}

h3.h3{position:relative; padding-left:33px; font-size:23px; font-weight:800; margin-bottom:10px; color: #012a7c;}
h3.h3::before{position:absolute; display:block; content:url(../../images/sub/h3Tit.png); left:0; top:-4px;}


/*상단설명칸*/
.top_bg{background: url("../../images/sub/sub_title_bg.jpg") no-repeat center / cover; color: #fff; padding: 1.5em 55px; border-radius: 5px; box-sizing: border-box; margin-bottom: 30px;}
.top_bg > p{text-align: center;}
.top_bg > p > a{color: #33e1ff; border: 2px solid #33e1ff; padding: 5px 10px; transition: 0.3s; font-weight: 600;}
.top_bg > p > a:hover{background: #33e1ff; color: #fff; border-radius: 10px;}

/*welcome*/
.greeting-area {}
.greeting-area .visual {position: relative;}
.greeting-area .visual:after {display: block; content: ''; clear: both;}
.greeting-area .visual .imgs {float: right; box-shadow: 7px 7px 10px 0px rgba(0, 0, 0, 0.1); background: #081827;}
.greeting-area .visual .text-box {position: absolute; top: 27px; left: 0; width: 450px; height: auto; padding: 46px 40px 38px; background: linear-gradient(45deg, #00AFAF, #0087CC, #2439a9, #003263); box-shadow: 14px 14px 20px 0px rgba(0, 0, 0, 0.1);}
.greeting-area .visual .text-box .text {font-weight: 700; font-size: 30px; line-height: 34px; color: #ffffff;}
.greeting-area .visual .text-box p{font-size: 17px; color: #fff;}
.greeting-area .visual .text-box .position {margin: 34px 0 0; font-size: 16px; line-height: 28px; color: #ffffff;}
.greeting-area .visual .text-box .name {font-weight: 700; font-size: 20px; line-height: 34px; color: #ffffff;}
.greeting-area .greeting-box {margin: 30px 0 0;}
.greeting-area .greeting-box .text {margin: 22px 0 0; font-size: 16px; line-height: 22px; text-align: justify;}
.greeting-area .greeting-box .text:first-child {margin: 0;}


/*topic*/
.topic_wrap{display: flex; gap:20px;}
.topic_wrap > div{border: 3px solid #003263; border-radius: 15px; width: 20%; padding: 10px 19px 21px; display: flex; flex-direction: column; align-items: center;}
.topic_wrap > div:nth-child(2){border: 3px solid #0087CC;}
.topic_wrap > div:nth-child(3){border: 3px solid #00AFAF;}
.topic_wrap > div:nth-child(4){border: 3px solid #2439a9;}
.topic_wrap > div:nth-child(5){border: 3px solid #6700d7;}
.topic_wrap > div:nth-child(6){border: 3px solid #d508f7;}
.topic_wrap > div p, .topic_wrap > div span{text-align: center; font-weight: 600; display: block;}
.topic_wrap > div span{line-height: 40px; color: #fff; border-radius: 0 0 20px 20px; width: 50px; height: 40px; background: #003263; position: relative; bottom: 12px;}
.topic_wrap > div:nth-child(2) span{background: #0087CC;}
.topic_wrap > div:nth-child(3) span{background: #00AFAF;}
.topic_wrap > div:nth-child(4) span{background: #2439a9;}
.topic_wrap > div:nth-child(5) span{background: #6700d7;}
.topic_wrap > div:nth-child(6) span{background: #d508f7;}

.topic_wrap.Wrap33 > div{width: 33.333%; justify-content:center; padding: 30px;}
.topic_wrap.Wrap33 > div p, .topic_wrap > div span{font-weight: 500;}

/*about daejeon*/
.cont_btm ul{display: flex; gap: 35px;}
.cont_btm ul li{flex-basis: 25%;}
.cont_btm ul li .txt_box strong{display: block; margin: 10px 0 5px; background: linear-gradient(73deg, rgb(57 164 0) 0%, rgb(68 120 170) 54%, rgb(8 52 96) 100%); color: transparent; -webkit-background-clip: text; font-weight: 800; font-size: 17px;}
.cont_btm ul li .txt_box .info_box{font-size: 14.5px;}

.line_icon{position: relative;}
.line_icon img{position: absolute; bottom: 0; right: 0;}
.line_icon a{background: #012a7c; color: #fff; padding: 15px 20px; text-align: center; position: absolute; bottom: 0; left: 0; font-weight: 600; font-size: 18px;}
.line_icon a i{position: relative; transition: .3s ease; right: 0;}
.line_icon a:hover i{right: -5px;}

.border{ border: 2px solid #012a7c; width: 100%; margin: 30px 0;}


/*venue*/
.mapWrap {position: relative;}
.mapWrap .venueBox {width: 100%; height: 300px;}
.mapWrap .textBox {height: 120px; width: 100%; position: relative; overflow: hidden; color: #fff; padding: 0 50px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap:20px;}
.mapWrap .textBox:after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(45deg, #00AFAF, #0087CC, #2439a9, #003263); background-position: left center; background-size: 100% 100%; display: block; z-index: -1;}
.mapWrap .textBox > div > p > span{font-weight: 700; font-size: 17px;}
.mapWrap .textBox > div a{transition: 0.3s; color: #33e1ff;}
.mapWrap .textBox > div a:hover{font-weight: 700;}


/*visa*/
.updateBox{background:#fff4f7; padding:3px 4px; border: 3px solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(45deg, #00AFAF, #0087CC, #2439a9, #003263); background-origin: border-box; background-clip: content-box, border-box; border-radius:25px;}
.updateBox > div{padding: 16px 30px;}
.updateBox h1{background:#0097c1; color:#fff; font-weight:600; font-size:20px; padding:6px 22px; display:inline-block; border-radius:10px; margin-bottom:6px;}


/*accommodation*/
.tab{display:flex; width:100%; background: #f9fafb; border: 1px solid #e6e6e6; border-radius: 30px;}
.tab li{position: relative;} .tab li.li50{width: 50%;} .tab li.li33{width: 33.3333%;} .tab li.li25{width: 25%;}
.tab li a{display:flex; align-items: center; justify-content: center; font-size:15px; font-weight:500; transition: .3s; height: 60px; width: 100%; border-radius: 45px; text-align: center; color: #000; letter-spacing: -0.2px;}
.tab li a.active{background: linear-gradient(45deg, #00AFAF, #0087CC, #2439a9, #003263);  color: #fff}

.flexBox{display: flex; justify-content:space-between;}
.flexBox .w332{width: 332px;} .flexBox .w70{width: 70%;}
.flexBox .w332 a{width: 100%; display: block; letter-spacing: 0; font-size: 17px;}
.flexBox .w33{width: 33.333%;}
.al-center{align-items: center;}
.gap10{gap:10px;} .gap20{gap:20px;}

.rightBox {display: flex; flex-direction: column; gap: 10px;}
.rightBox > li {display: flex; gap: 1em;}
.rightBox .title {width: 350px; border-radius: 5px; background: #e4f9fb; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 600;}
.rightBox .text {width: 100%; text-align: left; padding: 1em .5em; min-height: 3.35em; padding-left: 1em; box-sizing: border-box; height: auto; display: flex; align-items: center;    border-bottom: 1px solid #E6E6E6; line-height: 1.5;}

/*transportation*/
.que:first-child{ border-top: 2px solid black;}
  
.que{position: relative; padding: 23px 30px; cursor: pointer; border-bottom: 1px solid #dddddd;  }
.que span{font-weight: 600; font-size: 18px;}
  
.que::before{
  display: inline-block;
  content: '\f3c5'; font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #012a7c;
  margin: 0 5px; font-size: 19px;
}

.que.on>span{
  font-weight: bold;
  color: #012a7c; 
}
  
.anw {
  display: none;
    overflow: hidden;
  background-color: #f7f7f7;
  padding: 36px 46px; border-radius: 0 0 30px 30px;
}
  

.arrow-wrap {
  position: absolute;
  top:50%; right: 35px;
  transform: translate(0, -50%);
}

.que .arrow-top {
  display: none;
}
.que .arrow-bottom {
  display: block; font-size: 32px;
}
.que.on .arrow-bottom {
  display: none;
}
.que.on .arrow-top {
  display: block; font-size: 32px;
}

/*table*/
table{border-spacing: 0; border-collapse: 0;}
.table-basic{width: 100%; border-top: 2px solid #000;}
.table-basic th{text-align: center; border-bottom: 1px solid #CED5DB; background: #e7feff; font-weight: 600; padding: 10px 3px; font-size: 17px; color:#0f2e6a;}
.table-basic td{border-right: 1px solid #CED5DB; border-bottom: 1px solid #CED5DB; padding: 10px;}
.table-basic td:last-child{border-right: 0;}
.table-basic .bR0{border-right: 0 !important;} .table-basic .bR1{border-right: 1px solid #CED5DB !important;} .table-basic .bB0{border-bottom: 0 !important;} .table-basic .bB1{border-bottom: 1px solid #CED5DB !important;} .table-basic .bR4{border-right: 4px double #CED5DB;}

.table-basic .table_title{text-align: center; color: #f1592a; font-size: 14px;}

.table-basic.table02{border-top:0;}
.table-basic.table02 th{border-radius:15px 15px 0 0;}
.table-basic.table02 td{padding: 7px;}


.notiBox{background: #fff; padding: 20px 30px; border: 2px solid #000; border-radius: 15px;}
.notiBox h3{display: inline-block; background: #ffa700; padding: 5px 13px; border-radius: 15px; font-weight: 700; color: #fff;}


.h3Tit{display:inline-block; font-weight:700; color:#012a7c; font-size:17.5px; position:relative; z-index: 2}
.h3Tit::before{position:absolute; display:block; content: ""; width: 30px; height: 30px; border-radius: 50px; background: #012a7c17; left:-15px; top:-13px; z-index: -1}

.ImgTit{background: #41519e; color: #fff; padding: 13px 10px; text-align: center; border-radius: 33px 33px 0 0;}
.ImgBox{border-radius: 0 0 33px 33px; overflow: hidden; border: 3px solid #41519e; background: #41519e;}
.ImgBox>img {display: block;}

.driveMessage{background: #fff; padding: 30px; border-radius: 14px;}

.impor_box{border: 2px solid #000; padding: 20px 30px; background: #fff; border-radius: 15px;}
.impor_tit{background: #ff267e; color: #fff; display: inline-block; padding: 10px; border-radius: 30px;}
.impor_line{}
.impor_text{}

.rSpan{background: #012a7c; color: #fff; padding: 6px 9px; border-radius: 9px; margin-right: 14px;}

/*abstract*/
.date{}
.date li{border: 1px solid #ccc; padding: 23px;}
.date li h4{}
.date li p{}

.stepList{}
.stepList li{border: 1px solid #ccc; padding: 10px;}
.stepList li h6{background: #003263; padding: 10px 0; border-radius: 11px; color: #fff;}
.stepList li p{}

.w20{width: 20%;}

/*pl*/
.plBox{display: flex; justify-content: space-between; flex-wrap: wrap; gap:52px 0;}
.plBox >div{display: flex; align-items: center; gap:25px; width: 49%;}
.plBox >div.txtBox{}
.txtBox p.title{font-weight: 800; font-size: 20px; text-align: left; border-left: 2px solid #030a27; padding-left: 16px; color: #030a27;}
.txtBox p.name{font-weight: 600; font-size: 19px;}
.txtBox p.aff{font-size: 14px; letter-spacing: -0.6px; line-height: 1.3;}
.btnBox{}
a.bio-btn{background: #263d45; padding: 5px 10px; color: #fff; border-radius: 4px; letter-spacing: -0.5px; transition: .3s ease;}
a.bio-btn:hover{background: #0f9bc7;}


/* 오버레이 - 화면 전체 덮기 */
.overlay {
  display: none; /* 기본 숨김 */
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9990;
}

/* 팝업 박스 */
.popup .content {
  display: none; /* 기본 숨김 */
  position: fixed;
  top: 100px; /* 원하는 위치 */
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  max-width: 95vw;
  background: #f3f3f3;
  padding: 65px 40px;
  border-radius: 10px;
  box-shadow: 0 5px 30px rgba(0,0,0,0.3);
  box-sizing: border-box;
  text-align: justify;
  z-index: 10000; /* 오버레이 위 */ line-height: 1.3;
}
.popup .content h4{font-weight: 700; font-size: 19px; margin-bottom: 15px;}

/* 닫기 버튼 */
.popup .close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 44px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  z-index: 10001; /* 팝업 안에서 가장 위 */
}

.popup .close-btn:hover {
  color: #ff5c5c;
}

/*reg*/
.ab-step{display: flex; justify-content: space-between; gap:10px;}
.ab-step li{border: 1px solid #ccc; padding: 14px 23px; text-align: center; width: 23%; position: relative; border-radius: 20px; box-shadow: 0px 5px 6px 2px #5f5f5f24}
.ab-step li.w49{width: 49%;}
.ab-step li::before{position: absolute; display: block; content:url("../../images/sub/arrow.png"); right: -27px; top: 36%;}
.ab-step li:last-of-type::before{display: none;}
.ab-step li span{background: #09a1b5; color: #fff; padding: 3px 10px; border-radius: 20px; display: inline-block; margin-bottom: 5px;}
.ab-step li p{text-align: center;}

p.tit{color: #012a7c; font-weight: 800; font-size: 17px;}