@charset "utf-8";
/* CSS Document */
/**********************
**********************
**********************
1. 기본 스타일 (모바일 우선)
**********************
**********************
**********************/
.sub-visual{position:relative;}
.sub-visual__bg{background:#fff; border-bottom: 1px solid #a9a9a9; border-top: 1px solid #a9a9a9; opacity: 0.3;}
.sub-visual__img{background:url("../../images/sub/sub_bg.jpg") no-repeat right; display:block; width:100%; height:201px; /*filter: blur(1px);*/}
.inner{position:absolute; top:78%; transform: translate(-50%, -78%); left:50%; text-align:center; width: 100%;}
.inner .title-st1{font-size:27px; text-transform:uppercase; letter-spacing:1px; color: #141414; font-weight: 900;}
.inner .title-st2{font-size:14px; color: #141414; letter-spacing: 1px; text-transform: uppercase;}
.sub_txt{display:flex; justify-content:center;}
.sub_txt li{color:#b9b9b9; font-size:0.9rem;}
.sub_txt li a{color:#b9b9b9;}


.subNav{width: 100%; order:2; padding: 0 25px;}
.subDate{background: #fff; box-shadow: 0 0 7px 4px #00000021; padding: 12px; border-radius: 13px;}
.subInfo{background: #fff; box-shadow: 0 0 7px 4px #00000021; padding: 12px; border-radius: 13px;}
.subNav h4{text-align: center; font-weight: 700; font-size: 17px; color: #fff; background: #024287; padding: 13px 0; border-radius: 50px; margin-bottom: 10px;}

#subConW{width:100%; margin:0 auto; height: 100%; display: flex; flex-direction: column; padding-bottom: 36px;}
#subCon{padding:39px 23px 39px; width:100%; min-height:278px; order: 1;}
#subCon p{font-size: 15px;}


.subDate> .dateBox li div.txt h3{font-size: 16px; font-weight: 700;}
.subDate> .dateBox li{width: 100%; padding: 6px 0;}
.subDate> .dateBox li div.txt p{font-size: 16px;}
.subDate .count{font-size: 12px; margin: 0;}

/*committees*/
/*tab*/
.sub-tab{display: flex; gap:14px; flex-wrap: wrap;}
.sub-tab li{width: 100%; }
.sub-tab li a{border: 1px solid #ccc; padding: 18px; border-radius: 13px; text-align: center; display: block; transition: .3s ease; cursor: pointer;}
.sub-tab li a.active{background: #292929; color: #fff;}
.sub-tab li a span{background: #ccc; color: #fff; padding: 4px 8px; display: inline-block; border-radius: 10px; line-height: 1.5;}
.sub-tab li a.active span{background: #fff; color: #333333; font-family: 'GmarketSansBold';}
#w49{width: 100%;}

.link2{transition: .3s ease; color: #1a1a1a;}
.link2:hover{background: #e5f2ff; color: #024387; padding: 1px 7px; border-radius: 6px;}

.tab2{display: flex; flex-wrap: wrap; gap:10px;}
.tab2 li{width: 100%;}
.tab2 li a{background: #ededed; width: 100%; padding: 10px; text-align: center; transition: .3s ease;}
.tab2 li a.on{background: #292929; color: #fff;}

/* From Uiverse.io by cssbuttons-io */ 
.button {
  --color: #50a73f;
  font-family: inherit;
  display: inline-block;
  min-width: 100%;
  padding: 10px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid var(--color);
  transition: color 0.5s;
  z-index: 1;
  font-size: 17px;
  border-radius: 6px;
  font-weight: 500;
  color: var(--color);
  text-align: center;
}

.button:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--color);
  width: 230px;
  height: 230px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease;
}

.button:hover {
  color: #fff;
}

.button:hover:before {
  transform: translate(-50%, -50%) scale(4); /* 커지면서 버튼 전체 덮기 */
}

.button:active:before {
  background: #50a73f;
  transition: background 0s;
}

.s-buttnon {
  --color: #0b8f97;
  font-family: inherit;
  display: inline-flex;
  padding: 2px 6px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid var(--color);
  transition: color 0.5s;
  z-index: 1;
  border-radius: 6px;
  font-weight: 500;
  color: var(--color);
  text-align: center;
  align-items: center; margin-top: 6px; gap:3px;
}
.s-buttnon span{font-weight: 700; font-size: 15px;}

.s-buttnon:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--color);
  width: 230px;
  height: 230px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease;
}

.s-buttnon:hover {
  color: #fff;
}

.s-buttnon:hover:before {
  transform: translate(-50%, -50%) scale(4); /* 커지면서 버튼 전체 덮기 */
}

.s-buttnon:active:before {
  background: #0b8f97;
  transition: background 0s;
}


.busanW{}
.busanW .txt{}
.busanW .txt h2{margin: 0; font-weight: 900; font-size: 22px; padding-bottom: 9px; border-bottom: 1px solid #ccc; margin-bottom: 10px;}

/*scope*/
.accordion{width:100%; margin:0 auto; padding:0;}
.accordion-item{position:relative; margin-bottom:15px;}
.accordion-item .heading{display:flex; text-decoration:none; font-weight:700; position:relative; padding:15px; transition:0.3s ease-in-out; color:#024287; font-size:18px; border: 2px solid #024287;}
.accordion-item .heading div.title{width: 90%; font-weight: 800; font-size: 15px;}
.accordion-item.active .heading{background:#024287; color:#fff;}
.accordion-item .content{display:none; padding:20px;    border: 1px solid #024287;}
.accordion-item .icon{display:block; position:absolute; top:50%; right:0; width:3rem; height:3rem; border-radius:3px; transform:translateY(-50%); width: 14%;}
.accordion-item .icon:before, .accordion-item .icon:after{content:""; width:0.9rem; background:#024287; position:absolute; border-radius:3px; left:50%; top:50%; transition:0.3s ease-in-out; transform:translate(-50%, -50%); border:2px solid;}
.accordion-item .icon:after{transform:translate(-50%, -50%) rotate(90deg); z-index:-1;}
.accordion-item.active .icon:after{transform:translate(-50%, -50%);}


/*list*/
.ul-basic{padding-left: 18px;}
.ul-basic li{padding: 2px 0; list-style-type: circle; line-height: 1.35; letter-spacing: -0.2px; font-size: 15px;}


.h1tit{font-size: 19px; font-weight: 700; position: relative; padding-left: 30px; color: #024287; margin-bottom: 0; margin-top: 0;}
.h1tit::after{position: absolute; display: block; content: url("../../images/sub/h1.svg"); width: 19px; left: 0; top: -6px;}

.h2tit{color: var(--main-blue); font-weight: 700; position: relative; padding-left: 13px;}
.h2tit::after{position: absolute; display: block; content: ""; background: var(--main-blue); width: 4px; height: 18px; border-radius: 15px; top: 0; left: 0;}

.x-scroll{overflow-x: scroll;}

.shadowBox{}
.shadowBox h4{font-weight: 700;}

.usefulBox{}
.usefulBox h4{font-weight: 700; font-size: 19px; display: flex; gap:10px; align-items: center; line-height: 1; margin-bottom: 13px; padding: 10px 0; color: var(--main-blue); border-bottom: 1px solid #024287;}
.usefulBox h4 i{font-size: 24px;}

.useBox{display:flex; gap:20px; align-items:flex-start;}
.useBox div{}
.useBox div h3{font-size: 1.125rem; color: #3450c6; border-bottom: 1px solid #ccc; padding-bottom: 3px; margin-bottom: 6px;}
.useBox div p{}
.mon_flex{display:flex; flex-wrap: wrap;}
.mon_box {list-style: none; display: flex; justify-content: space-between; width: 100%;}
.mon_box li {border: 1px solid #e6e8e9; text-align: center; vertical-align: middle; background-color: #fff; width: 100%; padding: 10px 0 0;}
.ptit{background:#373737; color:#fff; padding:0 15px;}


/*transportation*/
.trans_table th .circle{    background: var(--main-white);
    width: 30px;
    height: 30px;
    border-radius: 80px;
    margin: 0 auto 5px;
    padding: 10px;
    display: flex
;
    align-items: center;
    justify-content: center;}
.taxiBox{margin: 50px 0 30px; padding: 30px 34px; border-top: 2px dashed #bfbfbf; border-bottom: 2px dashed #bfbfbf; position: relative;}
.taxiBox > img{position: absolute; right: -17px; top: -20px;}
.taxiBox p, .taxiBox strong{text-align: center !important; font-size: 15px;}
div.route{    border-bottom: 2px dotted #D9D9D9;
    padding-bottom: 30px;}
p.route{font-weight: 800;}
p.route > strong{background: #444;color: #fff; margin-right: 6px; border-radius: 50px; padding: 2px 10px;}

/*news*/
.noticeBox .notice_header {display: table; width: 100%; border-top: 2px solid #024287; border-bottom: 2px solid #d7e3ef; background: #eff7ff;}
.noticeBox .notice_header span:nth-child(1) {
    width: 10%;
}
.noticeBox .notice_header span:nth-child(2) {
    width: 63%;
}

.noticeBox .notice_header span:nth-child(3) {
    width: 27%;
}
.noticeBox .notice_header span {
    display: table-cell;
    height: 50px;
    text-align: center;
    vertical-align: middle;
	font-weight: 700;}
.notice_list li a {
    border-bottom: 1px solid #eaeaea;
    display: flex
;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}
.notice_list li a:hover{    box-shadow: 4px 4px 10px rgba(0, 0, 0, .2); border: 1px solid #000;}
.notice_list li span.num {
    width: 10%;
    text-align: center;
    display: inline-block;
    font-size: 13px !important;
}
.notice_list li span.title {
    width: 270px;
    text-align: left;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px !important;
}
.notice_list li span.date {
    width: 27%;
    text-align: center;
    display: inline-block;
    font-size: 13px !important;
}


/**********************
**********************
**********************
1. 2. 태블릿 사이즈 (768px 이상)
**********************
**********************
**********************/
@media (min-width: 768px) {
	.subDate .count{margin-top: 10px; margin-bottom: 10px;}
	ul.dateBox{padding: 0;}
	.subDate> .dateBox li{border-right: none;}
	
}



/**********************
**********************
**********************
3. 데스크탑 사이즈 (1244px 이상)
**********************
**********************
**********************/
@media (min-width: 1244px) {
	.sub-visual{position:relative; margin-top: 0px;}
	.sub-visual__bg{background:#01032c; border-bottom: 1px solid #efefef; border-top: 1px solid #efefef; opacity: 1;}
	.sub-visual__img{background:url("../../images/sub/sub_bg.jpg") no-repeat center; display:block; width:100%; height:200px; filter: blur(0);}
	.inner{position:absolute; top:40%; left:50%; text-align:center; transform:translate(-50%,-40%);}
	.inner .title-st1{font-size:47px; text-transform:uppercase; letter-spacing:1px; color: #141414; font-weight: 900;}
	.sub_txt{display:flex; justify-content:center;}
	.sub_txt li{color:#b9b9b9; font-size:0.9rem;}
	.sub_txt li a{color:#b9b9b9;}
	#subConW{width:1247px; margin:0 auto;  display: flex; flex-direction: row;}
	.subNav{width: 281px; order:2; padding: 0;}
	.inner .title-st2{font-size: 19px;}
	#subCon{padding:39px 23px 0; width:966px; min-height:max-content; order: 1;}
	#subCon p{font-size: 15px;}
	
	.subNav h4{text-align: center; font-weight: 700; font-size: 26px; color: #fff; background: #024287; padding: 13px 0; margin-bottom: 10px; border-radius: 10px 10px 0 0;}
	
	.sub-tab li{width: 32%; }
	.tab2 li{width: 49%;}
	
	#w49{width: 49%;}
	.button {min-width: 230px;}
	.x-scroll{overflow-x: auto;}
	.accordion-item .icon{width: 7%;}
	
}