/*layout style - display*/
 .db { display: block; }
 .dinb { display: inline-block; }
 .df { display: flex; }

 /*layout style - flex align*/
 .ait-c { align-items: center; }
 .ait-s { align-items: start; }
 .ait-e { align-items: end; }

 .jtf-c { justify-content: center; }
 .jtf-s { justify-content: start; }
 .jtf-b { justify-content: end; }
 .jtf-sb { justify-content: space-between; } /*요소를 양끝으로 배치*/
 .jtf-sa { justify-content: space-around; } /*요소의 일정 간격을 유지하면서 배치*/
 .jtf-se { justify-content: space-evenly; }

 /*layout style - flex direction*/
 .fl-dcol { flex-direction: column; }				
 .fl-drow { flex-direction: row; }

 /*text align*/
 .txt-l {text-align: left;}
 .txt-r {text-align: right;}
 .txt-c {text-align: center;}

 /*padding*/
 .p0 { padding: 0 !important; }
 .ptb30 { padding: 30px 0; }

 /*margin*/
 .mt5 { margin-top: 5px; }
 .mt10 { margin-top: 10px; }
 .mt15 { margin-top: 15px; }
 .mt20 { margin-top: 20px; }
 .mt30 { margin-top: 30px; }

 .mb10 { margin-bottom: 10px !important; }
 .mb15 { margin-bottom: 15px !important; }
 .mb20 { margin-bottom: 20px !important; }
 .mb30 { margin-bottom: 30px !important; }
 .mb40 { margin-bottom: 40px !important; }

 .bdr0 { border: 0 !important; }

/*250902 웹접근성 관련 style추가*/
.slick-dots li button::before { opacity: 0.6 !important;} /*250917 접근성 수정*/
.slick-dots li > button:focus-visible,
.slick-dots li > button:focus-within
 { outline: 3px dashed red; outline-offset: 2px; }

 /*--------------특화서비스 시안2차 ver--------------*/
 .mobi { display: none !important; }
 /*main List style*/

.listTopWrap { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 20px; background: #F8FAFF; border: 1px solid #B5D2FF; border-radius: 15px; margin-top: 30px; }
.listTopWrap > p { color: #2C3A56; font-size: 18px; font-weight: 500; }
.listTopWrap > p > span { color: #2F80ED; }
.listTopWrap .hashbox { display: flex; align-items: center; } 
.listTopWrap .hashbox > img { margin-right: 15px; } 
.listTopWrap .hashbox .hashBtn { padding: 2px 10px; margin-right: 6px; cursor: pointer; text-align: center; color: #2F80ED; background: transparent; border-radius: 50px; border: 1px solid #2F80ED;}
.listTopWrap .hashbox .hashBtn:last-child { margin-right: 0; }
.listTopWrap .hashbox .hashBtn:hover,
.listTopWrap .hashbox .hashBtn:focus { background: #2F80ED; color: #fff;}
.listTopWrap .hashbox .hashBtn.on { background: #2F80ED; color: #fff;}

/*hash button checkbox ver - s*/
/*250903 초점이동으로 운용이 가능하도록 수정*/
/* .listTopWrap .hashbox .hash-col > input { display: none; -webkit-appearance: none; } */
.listTopWrap .hashbox .hash-col > input[type='checkbox'] { position: absolute; width: 1px; height: 1px; margin:0; padding:0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.listTopWrap .hashbox .hash-col > input + label { padding: 2px 10px; margin: 0 1px; border-radius: 50px; border: 1px solid #2F80ED; cursor: pointer; text-align: center; color: #2F80ED; display: inline-block; vertical-align: middle; font-size: 13px; }
.listTopWrap .hashbox .hash-col > input:checked + label { background: #2F80ED; color: #fff; }
.listTopWrap .hashbox .hash-col > input + label + label { font-size: 13px; position: relative; top: 6px; letter-spacing:-5px; cursor: pointer; }
.listTopWrap .hashbox .hash-col > input:focus-visible + label { outline: 2px dashed red; outline-offset: 2px; }

/*hash button checkbox ver - e*/

.listWrap { display: flex; align-items: center;  width: 100%; margin-top: 30px; }
.listWrap > ul { display: flex; justify-content: start; width: 100%; flex-wrap: wrap; gap: 25px; }
.listWrap > ul li { display: flex; width: 345px; min-height: 350px; box-sizing: border-box; }
.listWrap > ul li > .cardCol { border-radius: 15px; border: 1px solid #DCDFE9; padding: 20px; display: flex; flex-direction: column;} 
.listWrap > ul li > .cardCol:hover { transform: scale(1.009);  }
.listWrap > ul li > .cardCol > h2 { cursor: pointer; position: relative; margin-top: 5px; margin-bottom: 0;}
/*250828 span -> a링크로 변경*/
.listWrap > ul li > .cardCol > h2 > a { font-size: 19px; line-height: 3rem; padding-bottom: 3px; position: relative; background-size: 0 2px; transition: background-size 0.5s; }
.listWrap > ul li > .cardCol > h2:hover { color: #2F80ED; transition: 0.2s all ease-in-out; }
.listWrap > ul li > .cardCol > h2:hover a {
  background-size: 100% 2px;
  background-image: linear-gradient(#2F80ED, #2F80ED);
  background-repeat: no-repeat;
  background-position: left 0 bottom 0;
} 

.listWrap > ul li > .cardCol > .txt { font-size: 14px; margin-bottom: 17px; padding-bottom: 10px; height: 3.9em; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.listWrap > ul li > .cardCol > .card-info { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid #DCDFE9;}
.listWrap > ul li > .cardCol > .card-info .date { color: #606D8A; font-size: 14px; }
.listWrap > ul li > .cardCol > .card-info .viewCount { color: #606D8A; font-size: 14px; display: flex; align-items: center; }
.listWrap > ul li > .cardCol > .card-info .viewCount > span { display: flex; margin-right: 5px; }
.listWrap > ul li > .cardCol .thumbnail { border-radius: 15px; width: 310px; height: 160px; position: relative; }

.listWrap > ul li > .cardCol .thumbnail.thumb01 { background: url('/img/specialized-service/new/list-img1.png') no-repeat center; background-size: cover; } 
.listWrap > ul li > .cardCol .thumbnail.thumb02 { background: url('/img/specialized-service/new/list-img2.jpg') no-repeat center; background-size: cover; } 
.listWrap > ul li > .cardCol .thumbnail.thumb03 { background: url('/img/specialized-service/new/list-img3.png') no-repeat center; background-size: cover; } 
.listWrap > ul li > .cardCol .thumbnail.thumb04 { background: url('/img/specialized-service/new/list-img5.jpg') no-repeat center; background-size: cover; } 
.listWrap > ul li > .cardCol .thumbnail.thumb05 { background: url('/img/specialized-service/new/list-img6.jpg') no-repeat center; background-size: cover; } 

.listWrap > ul li > .cardCol .thumbnail .category { position: absolute; bottom: 0; right: 0; }
.listWrap > ul li > .cardCol .thumbnail .category > span { display: inline-block; position: relative; font-size: 15px; }
.listWrap > ul li > .cardCol .thumbnail .category > .cate1_1 { background:#FF5656; color: #fff; padding: 2px 25px; border-radius: 0 10px; z-index: 2; }
.listWrap > ul li > .cardCol .thumbnail .category > .cate1_2 { background:#246BEB; color: #fff; padding: 2px 25px; border-radius: 0 10px; z-index: 2; }
.listWrap > ul li > .cardCol .thumbnail .category > .cate1_3 { background:#FF9203; color: #fff; padding: 2px 25px; border-radius: 0 10px; z-index: 2; }
.listWrap > ul li > .cardCol .thumbnail .category > .cate1_4 { background:#2C3A56; color: #fff; padding: 2px 25px; border-radius: 0 10px; z-index: 2; }

.listWrap > ul li > .cardCol .thumbnail .category > .cate2_1 { background: url('/img/specialized-service/new/ico-cate2_1.png') #fff no-repeat 25px 6px; color:#4B4D5D; padding: 2px 20px 2px 45px; border-radius: 10px 0; z-index: 1; margin-left: -20px; }
.listWrap > ul li > .cardCol .thumbnail .category > .cate2_2 { background: url('/img/specialized-service/new/ico-cate2_2.png') #fff no-repeat 25px 6px; color:#4B4D5D; padding: 2px 20px 2px 45px; border-radius: 10px 0; z-index: 1; margin-left: -20px; }

/*subpage style*/
.area1 h1, .area2 h1, .area3 h1, .area4 h1 { font-size: 20px; margin-bottom: 25px; margin-top: 0; }
.area1 h3, .area2 h3, .area3 h3, .area4 h3 { font-size: 20px; margin-bottom: 25px; margin-top: 0; } /*250904 웹접근성 조치로 인한 h3 추가*/
.area1 { display: flex; margin-top: 30px; gap: 25px; min-height: 440px; }
.area1 > .tit-wrap { padding: 30px; border-radius: 15px; }
.area1 > .tit-wrap > .thumbnail-sub { width: 485px; height: 295px; border-radius: 15px; margin-bottom: 15px; }
.area1 > .tit-wrap > .thumbnail-sub.thumb01 { background: url('/img/specialized-service/new/list-img1.png') no-repeat center; background-size: cover; }
.area1 > .tit-wrap > .thumbnail-sub.thumb02 { background: url('/img/specialized-service/new/list-img2.jpg') no-repeat center; background-size: cover; }
.area1 > .tit-wrap > .thumbnail-sub.thumb03 { background: url('/img/specialized-service/new/list-img3.png') no-repeat center; background-size: 115%; }
.area1 > .tit-wrap > .thumbnail-sub.thumb04 { background: url('/img/specialized-service/new/list-img5.jpg') no-repeat center; background-size: cover; }
.area1 > .tit-wrap > .thumbnail-sub.thumb05 { background: url('/img/specialized-service/new/list-img6.jpg') no-repeat center; background-size: cover; }
.area1 > .tit-wrap.cate1 { background: #FFFAFA; border: 1px solid #FF5656; }
.area1 > .tit-wrap.cate2 { background: #F9FCFF; border: 1px solid #246BEB; }
.area1 > .tit-wrap.cate3 { background: #FFFDF9; border: 1px solid #FF9203; }
.area1 > .tit-wrap.cate4 { background:#F9FAFF; border: 1px solid #2C3A56; }

.area1 > .tit-wrap .tit-box { justify-content: space-between; padding: 0 0 15px 0; }
.area1 > .tit-wrap .tit-box,
.area1 > .tit-wrap .tit-box .tit-col { display: flex; align-items: center; }
.area1 > .tit-wrap .tit-box.bdr-cate1 { border-bottom: 1px solid #FFC2C2; }
.area1 > .tit-wrap .tit-box.bdr-cate2 { border-bottom: 1px solid #B5D2FF; }
.area1 > .tit-wrap .tit-box.bdr-cate3 { border-bottom: 1px solid #FFD98E; }
.area1 > .tit-wrap .tit-box.bdr-cate4 { border-bottom: 1px solid #748CBB; }

.area1 > .tit-wrap .tit-box .tit-col { }

.area1 > .tit-wrap .tit-box .tit-col > h2 { font-size: 22px; margin: 0 0 0 10px }
.area1 > .tit-wrap .tit-box .tit-col > .cate { padding: 2px 15px; color: #fff; border-radius: 0 10px; display: inline-block; margin-top:0; }
.area1 > .tit-wrap .tit-box .tit-col > .cate.cate1 { background:#FF5656; }
.area1 > .tit-wrap .tit-box .tit-col > .cate.cate2 { background:#246BEB; }
.area1 > .tit-wrap .tit-box .tit-col > .cate.cate3 { background:#FF9203; }
.area1 > .tit-wrap .tit-box .tit-col > .cate.cate4 { background:#2C3A56; }
.urlCopyBtn { background: url('/img/specialized-service/new/ico-copy.png') no-repeat 90% center; border: 0; width: 110px;}
.urlCopyBtn a { color: #2C3A56; text-decoration: none; }
.urlCopyBtn a:hover { color: #2C3A56; text-decoration: underline; }

.back-wrap { border: 1px solid #DCDFE9; border-radius: 15px; padding: 30px;}
.back-wrap h2 { font-size: 19px; margin-right: 15px;}
.back-wrap h4 { font-size: 19px; margin-right: 15px;} /*250904 웹접근성 조치로 인한 h3 추가*/
.back-wrap > ul {}
.back-wrap > ul li { display: flex; margin-top: 25px; border: 1px solid #DCDFE9; padding: 20px 25px; border-radius: 15px; align-items: center; }
.back-wrap > ul li p { font-size: 15px; }


.infoWrap { display: flex; justify-content: space-between; margin-top: 17px; }
.infoWrap > ul { display: flex; }
.infoWrap > ul li {  }
.infoWrap > ul li span { display: inline-block; }
.infoWrap > ul li .cell-tit { background: #4B4C54; color: #fff; padding: 2px 12px; border-radius: 5px; }
.infoWrap > ul li:nth-child(2) .cell-tit { margin-left: 15px; }
.infoWrap > ul li .cell-txt { color: #4B4C54; margin-left: 8px; }
.infoWrap > ul li .cell-cate1 { background: url('/img/specialized-service/new/ico-cate2_1.png') no-repeat 10px center; padding:0 0 0 30px; color: #4B4D5D;}
.infoWrap > ul li .cell-cate2 { background: url('/img/specialized-service/new/ico-cate2_2.png') no-repeat 10px center; padding:0 0 0 30px; color: #4B4D5D;}
.viewCount { color: #606D8A; font-size: 14px; display: flex; align-items: center; }
.viewCount > span { display: flex; margin-right: 5px; }

.area2 { border: 1px solid #DCDFE9; border-radius: 15px; padding: 30px; margin-top: 50px; }
.area2 .servi-wrap { display: flex; gap: 25px;}
.area2 .servi-wrap .servi-col { border: 1px solid #DCDFE9; box-shadow:0 8px 10px rgba(145,157,185,0.2); border-radius: 15px; padding: 20px; flex: 1 1 auto; position: relative; display: flex; align-items: center;}
.area2 .servi-wrap .servi-col > img { width: 126px; height: auto; margin-top: -50px; }
.area2 .servi-wrap .servi-col > p { margin-left: 15px; letter-spacing:0; font-size: 14px; }

.area2 .slick-wrapper { margin-top: 35px; }
.area2 #slider_list .slide-item { /*border: 1px solid #DCDFE9;*/ border-radius: 15px; display: flex !important; justify-content: center;}
.area2 .slick-dots { bottom: -40px !important; }
.area2 .slick-dots li.slick-active button { height: 10px; background:#393e45; margin: 0; border-radius: 50px; }
.area2 .slick-dots li.slick-active button:before { 
     
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: 0 !important;
    color: transparent !important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
.area2 .slick-dots li.slick-active button:hover:before,
.area2 .slick-dots li.slick-active button:focus:before { color: transparent !important; opacity: 0 !important; }
 

/* 화살표 색상 변경*/
.slick-prev:before, .slick-next:before{
  color: black !important;
  opacity: 1 ; 
}
/* 화살표 위치 변경 */
.slick-prev{
  left: 20px !important ;
  z-index: 9 ;
}
.slick-next{
  right: 20px !important ;
  z-index: 9 ;  
}

.slick-prev:focus-visible, .slick-next:focus-visible{
  outline: 3px dashed red;
  outline-offset: 2px;
  transition: none !important;
}
 


.area2 .improve-Wrap { display: flex; flex-wrap: wrap; gap: 25px; }
.area2 .improve-Wrap .improve-col { border: 1px solid #DCDFE9; border-radius: 15px; padding: 30px; display: flex; flex-direction: column; flex: 1 auto; flex-basis: 40%; }
.area2 .improve-Wrap .improve-col > h4 { font-size: 18px; margin: 0 0 10px 0; } /*250904 h2에서 h4로수정*/
.area2 .improve-Wrap .improve-col p.tit-txt {font-size: 15px; margin: 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid #DCDFE9; }
.area2 .improve-Wrap .improve-col p.sub-txt {font-size: 14px; color: #3D465A; }
.area2 .improve-Wrap .improve-col .imgBox { }
.area2 .improve-Wrap .improve-col .imgBox > h4 { font-size: 15px; font-weight: bold; margin: 15px 0; }/*250904 h2에서 h4로수정*/
.area2 .improve-Wrap .improve-col .imgBox > h4 > span { color: #2F80ED; }

.area2.blue { border: 1px solid #0F5ACA; background: #F9FCFF; display: flex; flex-direction: column;}

.area3 { border: 1px solid #DCDFE9; border-radius: 15px; padding: 30px; margin-top: 50px; }
.area3 .tooltipBtn.long-w { width: 410px !important; background: url(/img/specialized-service/new/ico-link.png) #fff no-repeat 95% center !important;}
.area3 .tooltipBtn {
    width: 190px;
    position: relative;
    padding: 10px 20px;
    font-size: 13px;
    color: #41495A;
    border: 1px solid #DCDFE9;
    background: url(/img/specialized-service/new/ico-link.png) #fff no-repeat 90% center;
    cursor: pointer;
    border-radius: 10px;
    text-align: left;
    letter-spacing: -1.5px;
}

.area3 .tooltipBtn:hover { color: #2F80ED; border: 1px solid #2F80ED; transition: 0.2s all ease-in-out; }

.area3 .tooltipBtn::before { transform: scale3d(.2,.2,1); transition: all .2s ease-in-out; } 
.area3 .tooltipBtn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    background-color: rgba(248, 255, 250, 0.8);
    color: #2F80ED;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    /*transition: opacity 0.2s;*/
    border: 1px solid #2F80ED;
    transform: translateX(-50%) translate3d(0, 6px, 0);
    transition: all .1s ease-in-out;
}
.area3 .tooltipBtn:hover::before,
.area3 .tooltipBtn:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale3d(1,1,1);
}

.area3 .tooltipBtn:hover::after { transition: all .2s .1s ease-in-out; } 

.area3 .btnWrap { width: 100%; display: flex; justify-content: space-between; border-bottom: 1px solid #DCDFE9; padding: 25px 0 25px 0; }
.area3 .btnWrap:last-child { border-bottom: 0; padding: 25px 0 0 0; }
.area3 .btnWrap .btnCol { display: flex; align-items: center; flex: 1; }
.area3 .btnWrap .btnCol > div { width: 150px; }
.area3 .btnWrap .btnCol > div > img { }
.area3 .btnWrap .btnCol > div.col-l { width: 150px; }
.area3 .btnWrap .btnCol > div.col-r { flex: 1 1 auto; gap: 20px; display: flex; flex-flow: row wrap; }
.area3 .btnWrap .btnCol > div.col-l > img { }
.area3 .btnWrap .btnCol > div.col-l .col-l-tit { color: #062451; font-weight: bold; margin:0; padding: 0; }

.caption-tit { display: flex; align-items: center; position: relative; }
.caption-tit h3.caption { position: relative; }
.caption-tit h3.caption::after { 
    content: '';
    width: 1px;
    height: 15px;
    background: #989EAC;
    margin: 10px 0px 20px 10px;
    position: absolute;
 }

.caption-tit .caption-txt { color: #3D465A; font-size: 14px; margin-bottom: 23px; margin-left: 20px;}

.area3 .platform { display: flex; justify-content: center; margin-bottom: -30px; margin-top: 40px; }
.area3 .platform > img { width: 390px; }

.area3 .ex-wrap { display: flex; gap: 25px; }
.area3 .ex-wrap .ex-col { border-radius: 15px; border: 1px solid #DCDFE9; flex: 1 auto; padding: 15px; }
.area3 .ex-wrap .ex-col .ex-tit {display: flex; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #DCDFE9; position: relative; }
.area3 .ex-wrap .ex-col .ex-tit > h3 { font-size: 19px; margin:0; padding: 0; } /*250904 수정*/
.area3 .ex-wrap .ex-col .ex-tit > h3::after { 
    content: '';
    width: 1px;
    height: 15px;
    background: #989EAC;
    margin: 8px 0px 20px 10px;
    position: absolute;
 }
.area3 .ex-wrap .ex-col .ex-tit > p { margin-left: 20px; }
.area3 .ex-wrap .ex-col > .ex-img { display: flex; gap: 10px; }
.area3 .ex-wrap .ex-col > .ex-img > img { border-radius: 15px; height:260px; flex: 1 auto; object-fit: cover; }

.area3 .navWrap { }
.area3 .navWrap .nav-col { }
.area3 .navWrap .nav-col > .nav-img1 { width: 85%; display: block; margin: 30px auto; }
.area3 .navWrap .nav-col .nav-txt { font-size: 14px; display: flex; align-items: center; }
.area3 .navWrap .nav-col .nav-txt > h4 { font-size: 19px; margin-right: 25px; }
.area3 .navWrap .nav-col .nav-txt > div {  }
.area3 .navWrap .nav-col .nav-txt > div > p.sub { color: #363e50; }
.area3 .navWrap .nav-col .nav-txt > div > p > strong { color: #246BEB; }
.area3 .navWrap .nav-col .nav-txt > div > p > span { color: #246BEB; }
.blue-back { border: 1px solid #0F5ACA; background: #F9FCFF; border-radius: 15px; margin-top: 30px;  display: flex; justify-content: center; }
p.sub { color: #363e50; font-size: 14px; }
p.sub-txt { color: #246BEB; font-size: 14px;}

.area4 { border: 1px solid #DCDFE9; border-radius: 15px; padding: 30px; margin-top: 50px; }
.area4 .ci-wrap { display: flex; align-items: center; gap: 25px; border-bottom: 1px solid #C7C9CE; margin-bottom: 25px; padding-bottom: 40px;}
.area4 .ci-wrap .ci-col { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 130px; box-sizing: initial; box-shadow:0 8px 15px rgba(145,157,185,0.6); padding: 25px 40px; border-radius: 15px;}    
.area4 .ci-wrap .ci-col > img { margin-bottom: 15px; width: 180px; }
.area4 .ci-wrap .ci-col > p { font-size: 14px; text-align: center; word-break: keep-all;}
.area4 .ci-wrap .ci-col > span { font-size: 14px; text-align: center; word-break: keep-all; color: #606D8A; padding-top: 5px;}

.area4 .slick-wrapper { margin-top: 35px; }
.area4 #slider_list .slide-item { width: 99.9%; border: 1px solid #DCDFE9; border-radius: 15px; display: flex !important; justify-content: center;}
.area4 #slider_list .slide-item > img { width: 99.9%;}
.area4 .slick-dots { bottom: -40px !important; }
.area4 .slick-dots li.slick-active button { height: 10px; background:#393e45; margin: 0; border-radius: 50px; }
.area4 .slick-dots li.slick-active button:before { 
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: 0 !important;
    color: transparent !important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
.area4 .slick-dots li.slick-active button:hover:before,
.area4 .slick-dots li.slick-active button:focus:before { color: transparent !important; opacity: 0 !important; }

.nav-area { display: flex; flex-direction: column; justify-content: center; }



/*특화서비스 이용신청*/
.colWrap { margin-top: 50px; border: 1px solid #DCDFE9; border-radius: 15px; padding: 30px; }
.colWrap p { font-size: 14px; }
.colWrap > .stepWrap { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 45px; }
.colWrap > .stepWrap > .step-col { border: 1px solid #DADADB; border-radius: 15px; padding: 20px; position: relative; flex: 1 33%; display: flex; }
.colWrap > .stepWrap > .step-col > .st-nm { border-radius: 50px; background: #0F5ACA; color: #fff; text-align: center; display: inline-block; font-weight: bold; font-size: 14px; padding: 5px 20px; position: absolute; top: -10px; } 
.colWrap > .stepWrap > .step-col .st-ico {padding: 20px 0; margin: 0 20px; }
.colWrap > .stepWrap > .step-col .st-tit { display: flex; flex-direction: column; padding: 20px 0;}
.colWrap > .stepWrap > .step-col .st-tit > h4 { margin: 0;}
.colWrap > .stepWrap > .step-col .st-tit > p { font-size: 14px; margin-top: 10px; }
.colWrap > .stepWrap > .step-col .st-tit > p.sub-txt { color: #246BEB; font-size: 14px !important; }
.colWrap .law-info > h4 { font-size: 16px; margin-bottom: 20px; }
.colWrap .law-info > h5 { font-size: 15px; margin-bottom: 10px; }
.colWrap .law-info > p { line-height: 1.5rem; }
.colWrap > .inquiryWrap { display: flex; position: relative;}
.colWrap > .inquiryWrap > div { flex: 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center;} 
.colWrap > .inquiryWrap > div:nth-child(1) { justify-content: flex-start; align-items: start; margin-top: -8px; }
.colWrap > .inquiryWrap > div:nth-child(2) { margin-top: -40px; }
.colWrap > .inquiryWrap > div:nth-child(3) { margin-top: -40px; }
.colWrap > .inquiryWrap > div:nth-child(2)::after { content:''; width: 0; height: 10px; background: #eaeaea; position: absolute; }

.colWrap_b { border: 1px solid #0F5ACA; background-color: #F9FCFF; border-radius: 15px; position: relative;  margin-top: 20px; padding: 40px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.colWrap_b > .col { border: 1px solid #246BEB; background: #fff; width: 75%; margin: 20px; border-radius: 10px; padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.colWrap_b > button { color: #fff; background: #246BEB; cursor: pointer; text-align: center; border: 0; margin: 25px 0 5px 0; border-radius: 10px; padding: 10px 0; font-size: 17px; width: 175px; transition: all .2s ease-in-out;}
.colWrap_b > button:hover { background: #11419c; }
.col-tit { display: flex; flex-direction: column; margin-bottom: 20px; }
.col-tit >  h3 { font-size: 20px; margin-bottom: 15px; padding: 0; margin: 0; }
.col-tit >  h4{ font-size: 17px; padding: 0; margin: 0; }
.col-tit .txt { font-size: 14px; padding: 0; margin: 0; color: #000; margin-top: 15px; line-height: 1.5rem; }
.col-tit .point { font-size: 14px; font-weight: bold; padding: 0; margin: 0; color: #0F5ACA; }

/*radio*/
.radio-wrap { display: flex; align-items: center; margin: 20px auto; }
.radio-wrap > div { display: flex; align-items: center; margin: 0 6px; }
.radio-wrap+.textarea-wrap { margin-top: 20px; }
.radio-wrap .radio+.label+.radio { margin-left: 13px; }
.radio {
    position: relative;
    overflow: hidden;
    margin: 0;
    height: 16px;
    width: 16px;
    padding: 0 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.radio+.label {
    margin-left: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
    line-height: 21px;
    letter-spacing: -0.56px;
    color: #606060;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.radio+.label>* { margin-left: 10px; }
.radio:after {
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
}
.radio:checked {
}
.radio:checked:before { border: 1px solid #2f80ed; }
.radio:checked:after {
    animation: toggleOnRadio 0.2s ease forwards;
}

@keyframes toggleOnRadio {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.9);
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8);
    }
}
/*checkbox,radio*/
.checkbox-custom, .radio-custom { display: none; }
.checkbox-custom+label, .radio-custom+label {
    background: #fff;
    padding-left: 0;
    min-width: 100px;
    height: 32px;
    line-height: 30px;
    margin: 0;
    display: inline-block;
    text-align: center;
    border-radius: 2px;
    color: var(--gray-500);
    font-weight: normal;
    border: 1px solid #4f4f4f;
}
.checkbox-custom:checked+label, .radio-custom:checked+label { border-color: #004ab8; color: #0f5aca; background-color: #ccdffb; font-weight: bold; }

.footerBtnWrap { display: flex; align-items: center; justify-content: center; width: 100%; margin: 120px 0 0 0;}
.footerBtnWrap button { border-radius: 10px; cursor: pointer; transition: 0.2s all ease-in-out; color: #fff; padding: 16px 0;font-size: 17px; margin: 0 15px; width: 200px; border: 0;}

.footerBtnWrap button.footerbtn-1 { background:#246BEB; }
.footerBtnWrap button.footerbtn-1:hover { background:#0f4d9d; }
.footerBtnWrap button.footerbtn-2 { background: #393e45; }
.footerBtnWrap button.footerbtn-2:hover { background: #5f6977; }

/* 태블릿 가로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:768px) and (max-width:1023px) { 
.wrap { padding: 0 20px; width: 1200px; max-width: 1200px; }
.colWrap > .stepWrap > .step-col { flex: 1 auto; }
}


/*미디어 쿼리 - 태블릿*/
@media all and (min-width:480px) and (max-width:767px) {

    .mobi { display: block !important; }
    .pc { display: none !important; }

    .wrap { padding: 0 20px; width: auto; max-width: 100%; }
    
    .area1 h1, .area2 h1, .area3 h1, .area4 h1 { font-size: 18px; letter-spacing: -1.5px; margin-bottom: 20px; }
    .area1 h3, .area2 h3, .area3 h3, .area4 h3 { font-size: 18px !important; letter-spacing: -1.5px; margin-bottom: 20px; }
    
    .listTopWrap { flex-direction: column; }
    .listTopWrap .hashbox { margin-top: 15px; display: flex; text-align: center; }
    .listTopWrap .hashbox .hashBtn { width: 100px; white-space: nowrap; margin-right: 5px; }
    .hashbox > form > .hash-col { width: 390px; float: right; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; margin-top: 15px; }
    .listWrap { margin-bottom: 90px; }

    .area1 { flex-direction: column; }
    .area1 > .tit-wrap > .thumbnail-sub { width: 100%; height: 250px; border-radius: 15px; margin-bottom: 15px; }
    .area1 > .tit-wrap { padding: 20px; border-radius: 15px; }
    .area1 > .tit-wrap .tit-box { justify-content: start; flex-direction: column; padding: 2px 0 13px 0; margin-bottom: 15px; }
    .area1 > .tit-wrap .tit-box, .area1 > .tit-wrap .tit-box .tit-col { align-items: start; }
    .area1 > .tit-wrap .tit-box .tit-col { margin-bottom: 10px; }
    .area1 > .tit-wrap .tit-box .tit-col > h2 { font-size: 18px; margin: 0 0 0 10px; }
    .area1 > .tit-wrap .tit-box .tit-col > .cate { font-size: 14px; padding: 2px 10px; }
    .urlCopyBtn { width: auto; padding: 0 25px 0 0; }

    .infoWrap { flex-direction: row; }
    .infoWrap > ul { width: 100%; display: flex; justify-content:space-between; }
    .infoWrap > ul li span { font-size: 14px; }
    .infoWrap > ul li .cell-tit { padding: 2px 5px; }
    .listWrap > ul li { flex: 1 1 auto; display: table; }
    .listWrap > ul li > .cardCol .thumbnail { width: auto; height: 180px; }

    .mobi > .tit-box > .countrow { display: flex; justify-content: space-between; width: 100%; }

    .back-wrap { padding: 20px; }
    .back-wrap > ul li p { font-size: 14px; }

    .area2 { padding: 20px; }
    .area2 img { width: 65%; margin: 0 auto; }
    .area2 .servi-wrap { flex-direction: column; }
    .area2 .servi-wrap .servi-col { flex-direction: column; }

    .area2 .improve-Wrap .improve-col { padding: 15px; flex: 1 auto;}
    .area2 .improve-Wrap .improve-col > h2 { font-size: 16px; }
    .area2 .improve-Wrap .improve-col p.tit-txt { font-size: 14px; letter-spacing: -0.6px; }
    .area2 .improve-Wrap .improve-col .imgBox > img { width: 65%; }
    .area2 .improve-Wrap .improve-col .imgBox > h3 { font-size: 14px; text-align: center; }

    .area2.blue > p { font-size: 14px; text-align: center; }

    .area3 { padding: 20px; }
    .area3 .btnWrap { padding: 0 0 25px 0; margin-bottom: 25px; }
    .area3 .btnWrap:last-child { padding: 0; }
    .area3 .btnWrap .btnCol { flex-direction: column; }
    .area3 .btnWrap .btnCol > div { width: 90%; }
    .area3 .btnWrap .btnCol > div.col-l { text-align: center; margin-bottom: 20px; }
    .area3 .btnWrap .btnCol > div.col-l > img { margin-bottom: 10px; }
    .area3 .tooltipBtn { width: 100%; }

    .area3 .platform { flex-direction: column; margin-bottom: -20px; margin-top: 20px;}
    .area3 .platform > img { width: 70%; margin: 0 auto; }

    .area3 .ex-wrap { flex-direction: column; }
    .area3 .ex-wrap .ex-col > .ex-img { flex-direction: row; }
    .area3 .ex-wrap .ex-col > .ex-img > img { height: 250px; width: 30%; flex: 1 1 auto; }
    .area3 .ex-wrap .ex-col .ex-tit { flex-direction: column; }
    .area3 .ex-wrap .ex-col .ex-tit > h3 { font-size: 16px; }
    .area3 .ex-wrap .ex-col .ex-tit > h3::after { width: 0; }
    .area3 .ex-wrap .ex-col .ex-tit > p { font-size: 14px; margin-left: 0; text-align: center; }

    .area3 .tooltipBtn { background: url(/img/specialized-service/new/ico-link.png) #fff no-repeat 97% center; }
    .area3 .tooltipBtn.long-w { width: 100% !important; }
    .area3 .navWrap .nav-col > .nav-img1 { width: 70%; }
    .area3 .navWrap .nav-col .nav-txt > div > p.sub { color: #606D8A; text-indent: -8px; padding-left: 10px; }

    .slick-slide img { width: 70%; }

    .caption-tit { flex-direction: column; }
    .caption-tit h3.caption::after { width: 0; }
    .caption-tit .caption-txt { margin-bottom: 0; margin-left: 0; margin-top: -10px; }

    .area4 { padding: 20px; }
    .area4 img { width: 70%; margin: 0 auto; }
    .area4 .ci-wrap { flex-direction: column; }
    .area4 .ci-wrap .ci-col { padding: 15px 30px; width: 85%; }
    .area4 #slider_list .slide-item > img { border-radius: 15px; width: 75%; }
    .nav-area > .caption-tit { margin-bottom: 15px; }

    .blue-back > img { width: 70%; }

    .col-tit > h3 { font-size: 18px; margin:0; padding:0; }
    .radio-wrap { flex-direction: column; align-items: start; justify-content: start; }
    .radio-wrap > div { margin: 6px; }

    .colWrap { padding: 20px; }
    .colWrap_b > button { font-size: 15px; }
    
    .colWrap > .stepWrap > .step-col { flex: 1 100%; }
    .colWrap > .stepWrap > .step-col .st-tit > h4 { margin: 0; }

    .colWrap > .inquiryWrap {flex-direction: column; }
    .colWrap > .inquiryWrap > div:nth-child(1) { justify-content: center; align-items: center; margin-top: -5px; margin-bottom: 10px; }
    .colWrap > .inquiryWrap > div:nth-child(2) { margin-top:10px; margin-bottom: 15px; }
    .colWrap > .inquiryWrap > div:nth-child(3) { margin-top:0; }

    .colWrap .law-info > h4 { letter-spacing: -1px; }

    .footerBtnWrap { margin: 90px 0; }
    .footerBtnWrap button { padding: 10px 0; font-size: 16px; }
    
    
    
}   


/*미디어 쿼리 - 모바일*/
@media all and (max-width:479px){

    .mobi { display: block !important; }
    .pc { display: none !important; }

    .wrap { padding: 0 20px; width: auto; max-width: 100%; }
    
    .area1 h1, .area2 h1, .area3 h1, .area4 h1 { font-size: 18px; letter-spacing: -1.5px; margin-bottom: 20px; text-align: center; }
    .area1 h3, .area2 h3, .area3 h3, .area4 h3 { font-size: 18px !important; letter-spacing: -1.5px; margin-bottom: 20px; text-align: center; }
    
    .listTopWrap { flex-direction: column;padding: 15px; }
    /* .listTopWrap .hashbox { margin-top: 15px; display: flex; } */
    .listTopWrap .hashbox { margin-top: 15px; display: flex; text-align: center; }
    .listTopWrap .hashbox .hashBtn { width: 100px; white-space: nowrap; margin-right: 5px; }
    /* .hashbox > .hash-col { width: 275px; float: right; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; height: 35px; } */
    .hashbox > form > .hash-col { width: 275px; float: right; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; height: 35px; margin-top: 15px; }
    .listWrap { margin-bottom: 90px; }
    
    /*hash button checkbox ver - s*/
	.listTopWrap .hashbox .hash-col > input { opacity: 0; width: 0; height: 0; -webkit-appearance: none; position: absolute; }
	.listTopWrap .hashbox .hash-col > input + label { padding: 2px 10px; margin: 0 1px; border-radius: 50px; border: 1px solid #2F80ED; cursor: pointer; text-align: center; color: #2F80ED; display: inline-block; vertical-align: middle; font-size: 13px; }
	.listTopWrap .hashbox .hash-col > input:checked + label { background: #2F80ED; color: #fff; }
	.listTopWrap .hashbox .hash-col > input + label + label { font-size: 13px; position: relative; top: 6px; letter-spacing:-5px; cursor: pointer; }
	/*hash button checkbox ver - e*/
	    

    .area1 { flex-direction: column; }
    .area1 > .tit-wrap > .thumbnail-sub { width: 100%; height: 130px; border-radius: 15px; margin-bottom: 15px; }
    .area1 > .tit-wrap { padding: 20px; border-radius: 15px; }
    .area1 > .tit-wrap .tit-box { justify-content: start; flex-direction: column; padding: 2px 0 13px 0; margin-bottom: 15px; }
    .area1 > .tit-wrap .tit-box, .area1 > .tit-wrap .tit-box .tit-col { align-items: start; }
    .area1 > .tit-wrap .tit-box .tit-col { margin-bottom: 10px; }
    .area1 > .tit-wrap .tit-box .tit-col > h2 { font-size: 18px; padding:0; margin: 0 0 0 10px; }
    .area1 > .tit-wrap .tit-box .tit-col > .cate { font-size: 14px; padding: 2px 10px; }
    .urlCopyBtn { width: auto; padding: 0 25px 0 0; }

    .infoWrap { flex-direction: row; }
    .infoWrap > ul { width: 100%; display: flex; justify-content:space-between; }
    .infoWrap > ul li span { font-size: 14px; }
    .infoWrap > ul li .cell-tit { padding: 2px 5px; }
    .listWrap > ul li { flex: 1 1 auto; }
    .listWrap > ul li > .cardCol .thumbnail { width: auto; }

    .mobi > .tit-box > .countrow { display: flex; justify-content: space-between; width: 100%; }

    .back-wrap { padding: 20px; }
    .back-wrap > ul li p { font-size: 14px; }

    .area2 { padding: 20px; }
    .area2 .servi-wrap { flex-direction: column; }
    .area2 .servi-wrap .servi-col { flex-direction: column; }

    .area2 .improve-Wrap .improve-col { padding: 13px; width: 100%; flex: 1 1 auto; }
    .area2 .improve-Wrap .improve-col > h2 { font-size: 16px; }
    .area2 .improve-Wrap .improve-col p.tit-txt { font-size: 14px; letter-spacing: -0.6px; }
    .area2 .improve-Wrap .improve-col .imgBox > img { width: 100%; }
    .area2 .improve-Wrap .improve-col .imgBox > h3 { font-size: 14px; text-align: center; }

    .area2.blue > p { font-size: 14px; text-align: center; }

    .area3 { padding: 20px; }
    .area3 .btnWrap { padding: 0 0 25px 0; margin-bottom: 25px; }
    .area3 .btnWrap:last-child { padding: 0; }
    .area3 .btnWrap .btnCol { flex-direction: column; }
    .area3 .btnWrap .btnCol > div { width: 90%; }
    .area3 .btnWrap .btnCol > div.col-l { text-align: center; margin-bottom: 20px; }
    .area3 .btnWrap .btnCol > div.col-l > img { margin-bottom: 10px; }
    .area3 .tooltipBtn { width: 100%; }

    .area3 .platform { flex-direction: column; margin-bottom: -20px; margin-top: 20px;}
    .area3 .platform > img { width: 100%; }

    .area3 .ex-wrap { flex-direction: column; }
    .area3 .ex-wrap .ex-col > .ex-img { flex-direction: column; }
    .area3 .ex-wrap .ex-col > .ex-img > img { height: 250px; }
    .area3 .ex-wrap .ex-col .ex-tit { flex-direction: column; padding-bottom: 15px; }
    .area3 .ex-wrap .ex-col .ex-tit > h3 { font-size: 16px; margin: 0 0 6px 0; }
    .area3 .ex-wrap .ex-col .ex-tit > h3::after { width: 0; }
    .area3 .ex-wrap .ex-col .ex-tit > p { font-size: 14px; margin-left: 0; text-align: center; word-break: keep-all; }

    .area3 .tooltipBtn { background: url(/img/specialized-service/new/ico-link.png) #fff no-repeat 93% center; }
    .area3 .tooltipBtn.long-w { width: auto !important; }
    .area3 .navWrap .nav-col > .nav-img1 { width: 100%; }
    .area3 .navWrap .nav-col .nav-txt > div > p.sub { color: #606D8A; text-indent: -8px; padding-left: 10px; }

    .slick-slide img { width: 100%; }

    .caption-tit { flex-direction: column; }
    .caption-tit h3.caption::after { width: 0; }
    .caption-tit .caption-txt { margin-bottom: 0; margin-left: 0; margin-top: -10px; }

    .area4 { padding: 20px; }
    .area4 .ci-wrap { flex-direction: column; }
    .area4 .ci-wrap .ci-col { padding: 15px 30px; }
    .area4 .ci-wrap .ci-col > img { width: 160px; }
    .area4 #slider_list .slide-item > img { border-radius: 15px; }
    .nav-area > .caption-tit { margin-bottom: 15px; }

    .blue-back > img { width: 100%; }

    .col-tit > h3 { font-size: 18px; margin:0; padding: 0; }
    .radio-wrap { flex-direction: column; align-items: start; justify-content: start; }
    .radio-wrap > div { margin: 6px; }

    .colWrap { padding: 20px; }
    .colWrap_b > button { font-size: 15px; }
    
    .colWrap > .stepWrap > .step-col { flex: 1 100%; }
    .colWrap > .stepWrap > .step-col .st-tit > h4 { margin: 0; }

    .colWrap > .inquiryWrap {flex-direction: column; }
    .colWrap > .inquiryWrap > div:nth-child(1) { justify-content: center; align-items: center; margin-top: -5px; margin-bottom: 10px; }
    .colWrap > .inquiryWrap > div:nth-child(2) { margin-top:10px; margin-bottom: 15px; }
    .colWrap > .inquiryWrap > div:nth-child(3) { margin-top:0; }

    .colWrap .law-info > h4 { letter-spacing: -1px; }

    .footerBtnWrap { margin: 90px 0; }
    .footerBtnWrap button { padding: 10px 0; font-size: 16px; }
    
    
    
}