/* 서브 탭 / 안내 박스 (w_guide.css 중 필요한 부분만 발췌) */

/* Tab */
.wrap-tab {position: relative; z-index: 10;}

.tab_div .mobile-tab { display: none; }

.tab_div.div_4 { position: relative; z-index: 1; font-size: 0; }
.tab_div .ul_4 { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 50px;}
.tab_div .ul_4 > li { height: 100%; }
.tab_div .ul_4 > li > a { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 11px 17px; border-bottom: 3px solid #b6b6b6; font-family: 'ppr'; font-size: 20px; color: #666;text-align: center; }
.tab_div .ul_4 > li > a::before { content: ''; position: absolute; left: 0; bottom: 0; width: 3px; height: 13px; background: #b6b6b6; }
.tab_div .ul_4 > li > a::after { content: ''; position: absolute; right: 0; bottom: 0; width: 3px; height: 13px; background: #b6b6b6; }
.tab_div .ul_4 > li._active > a,
.tab_div .ul_4 > li > a:hover { border-bottom: 3px solid #1473e6; background: #1473e6; border-radius: 5px; color: #fff; }
.tab_div .ul_4 > li._active > a::before,
.tab_div .ul_4 > li > a:hover::before { display: none; }
.tab_div .ul_4 > li._active > a::after,
.tab_div .ul_4 > li > a:hover::after { display: none; }

@media screen and (max-width: 1100px) {
  .tab_div .ul_4 > li > a {padding: 4px 11px; font-size: 16px;}
}

@media screen and (max-width: 768px) {
  .tab_div .mobile-tab {position: relative; display: block; width: 100%; margin-bottom: 15px; padding: 11px 30px; text-align: center;}
  .tab_div.div_4 .mobile-tab {margin-top: 35px; background: #003477 url('/sites/guide/images/guide/arrow-sel.png') no-repeat calc(100% - 15px) center; border-radius: 5px; font-family: ppm; font-size: 17px; color: #fff;}
  .tab_div.div_4 .mobile-tab.on {background: #003477 url('/sites/guide/images/guide/arrow-sel-on.png') no-repeat calc(100% - 15px) center;}

  .tab_div {position: relative;}
  .tab_div .ul_4 {overflow: hidden; position: absolute; top: calc(100% - 1px); z-index: -1; width: 100%; max-height: 0; margin-bottom: 30px; background: #fff; border: 1px solid #fff; transition: all 0.5s ease;}

  .tab_div ul.on {z-index: 10; max-height: 600px; padding: 10px 0; background: #fff; border: 1px solid #003477;}
  .tab_div ul li a {display: block; height: auto; padding: 13px 40px; background: #fff; border-bottom: 1px solid #d1d1d1; font-size: 16px; text-align: left; line-height: normal;}
  .tab_div ul li a:hover {border-bottom: 0}
  .tab_div ul li a:after {display: none;}
  .tab_div ul li a span {display: block; padding: 0 20px;}
  .tab_div ul li:after {display: none;}

  .tab_div .ul_4 {gap: 0; margin: 0;}
  .tab_div .ul_4 > li {display: block; width: 100% !important; margin: 0; padding: 4px 0; border: 0;}
  .tab_div .ul_4 > li::before {display: none;}
  .tab_div .ul_4 > li > a {padding: 0 20px; border: 0; font-family: ppr; font-size: 17px; text-align: center; color: #333;}
  .tab_div .ul_4 > li > a::before {display: none;}
  .tab_div .ul_4 > li._active > a,
  .tab_div .ul_4 > li:hover > a {background: transparent; border: 0; color: #1174ff; font-family: 'pps';}
}

/* Txt Box */
.txt-box { position: relative;padding: 40px 175px 40px; background-color: #f3f5f7; border-radius: 10px; }
.txt-box::before {content: '';position: absolute;left: 50px;top: 30px;width: 70px;height: 70px;background-repeat: no-repeat;background-position: center;}
.txt-box strong { display: block; margin: 0 0 10px; font-size: 24px; color: #23262f; font-family: 'ppm'; }
.txt-box p { margin: 0 0 13px; font-size: 17px; font-family: 'ppr'; color: #333; }
.txt-box .link-btn { display: inline-flex; align-items: center; flex-shrink: 0;min-height: 50px; padding: 5px 15px; background-color: #fff; border: 1px solid #011d3f; border-radius: 7px; font-family: ppm; font-size: 16px; color: #011d3f !important; transition: .3s; }
.txt-box .link-btn::after { content: ''; display: inline-block; width: 20px; height: 16px; margin-left: 20px; background-image: url('/sites/guide/images/guide/ic-btn-arrow1-small.png'); background-repeat: no-repeat; background-position: center; transition: .3s; }
.txt-box .link-btn:hover { border-color: #1473e6; box-shadow: 0 0 10px rgba(0,84,155,0.3); color: #1473e6 !important; }

.txt-box.type2 { display: flex; justify-content: space-between; align-items: center; padding: 33px 80px 33px 175px;}
.txt-box.type2 .link-btn {margin-left: 80px;}

.txt-box.ic6::before{ background-image: url('/sites/guide/images/guide/ic-txt-box6.png'); }

@media screen and (max-width: 1300px){
  .txt-box { padding: 40px 100px 40px 175px;}
  .txt-box.type2 { flex-direction: column; justify-content: flex-start; align-items: flex-start; }
  .txt-box.type2 .link-btn {margin-left: 0;}
}

@media screen and (max-width: 768px){
  .txt-box { padding: 30px 60px 40px 130px; background-position: top 40px left 40px;}
  .txt-box::before {width: 60px;height: 60px;left: 35px;background-size: contain;}
  .txt-box.type2 { padding: 30px 60px 40px 130px; }
  .txt-box strong {margin: 0 0 10px;font-size: 19px;}
  .txt-box p {font-size: 17px;}
  .txt-box .link-btn {min-height: 42px; padding: 5px 10px;font-size: 17px;}
}

@media screen and (max-width: 500px){
  .txt-box { padding: 90px 20px 20px 20px;background-position: top 28px left 40px; }
  .txt-box::before {width: 55px;height: 55px;top: 20px; left: 50%; transform: translate(-50%, 0);}
  .txt-box.type2 {padding: 95px 20px 20px 20px;}
}