@charset "UTF-8";

/*메인이미지 짤려서 250321추가*/
@media all and (min-width:2001px)  {
.wrap-visual .slider li img {width:100%}
}

/* Tab */
.tab_div .mobile-tab {display: none;}

.tab_div.div_4 {font-size: 0;}
.tab_div .ul_4 {display: inline-block; position: relative; width: 100%;}
.tab_div .ul_4 > li {position: relative; float: left; width: 20%; padding: 0 4px 4px 0;;}
.tab_div .ul_4 > li > a {position: relative; z-index: 3; display: block; padding: 15px 10px 16px 10px; border: 1px solid #c5c5c5; font-family: 'Noto Medium'; font-size: 18px; letter-spacing: -1px; text-align: center; color: #333;}
.tab_div .ul_4 > li > a[target=_blank]::after {content: ''; position: relative; top: 0; display: inline-block; width: 12px; height: 11px; margin: 0 0 0 7px; background:  url('../../images/guide/tab-link-blank.png') no-repeat center; }

.tab_div .ul_4 > li._active > a,
.tab_div .ul_4 > li:hover > a {background: #002d56; border: 1px solid #002d56; color: #fff;}
.tab_div .ul_4 > li._active > a[target=_blank]::after,
.tab_div .ul_4 > li:hover > a[target=_blank]::after {background: url('../../images/guide/tab-link-blank-ov.png') no-repeat center;}

.tab_div.div_5 {font-size: 0;}
.tab_div .ul_5 {position: relative; display: inline-block; width: 100%;}
.tab_div .ul_5::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #333;}
.tab_div .ul_5 > li {position: relative; float: left; border-bottom: 1px solid #CBCBCB;}
.tab_div .ul_5 > li > a {position: relative; display: block; padding: 24px 30px 24px 0; font-size: 18px; font-family: 'Noto Regular'; letter-spacing: -0.5px; color: #666; z-index: 3;}
.tab_div .ul_5 > li > a::before {content: ''; position: relative; top: -2px; display: inline-block; width: 12px; height: 12px; margin-right: 5px; background: #aaabab; border-radius: 100%; vertical-align: middle;}
.tab_div .ul_5 > li:hover > a::before,
.tab_div .ul_5 > li._active > a::before {background: #008395;}
.tab_div .ul_5 > li > a[target=_blank]::after {content: ''; position: relative; top: -1px; display: inline-block; width: 12px; height: 11px; margin: 0 0 0 8px; background:  url('../../images/guide/tab-link-blank-grey.png') no-repeat center; }

.tab_div .ul_5 > li._active > a,
.tab_div .ul_5 > li:hover > a {font-family: 'Noto Medium'; color: #121212;}
.tab_div .ul_5 > li._active > a[target=_blank]::after ,
.tab_div .ul_5 > li:hover > a[target=_blank]::after {background: url('../../images/guide/tab-link-blank.png');}

@media all and (max-width: 1300px) {
  .tab_div .ul_4 > li {width: 25% !important;}
}

@media all and (max-width: 1100px) {
  .tab_div .ul_4 > li {width: 33.333% !important;}
}

@media all and (max-width:860px) {
  .tab_div {position: relative;}
  .tab_div .ul_4,
  .tab_div .ul_5 {overflow: hidden; position: absolute; top: calc(100% - 1px); z-index: -1; width: 100%; max-height: 0; margin-bottom: 30px; 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 #8795a1;}
  .tab_div .ul_4 > li,
  .tab_div .ul_5 > li {display: block; width: 100% !important; padding: 0; border: 0}
  .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[target=_blank]  {background-position: 97% center !important;}
  .tab_div ul li a span {display: block; padding: 0 20px;}
  .tab_div ul li a span:before {bottom: -11px;}
  .tab_div ul li:after {display: none;}
  .tab_div .mobile-tab {position: relative; display: block; width: 100%; margin-bottom: 15px; padding: 13px 30px; text-align: center; font-family: 'Noto Regular'; font-size: 16px;}
  .tab_div.div_4 .mobile-tab {background: #002d56 url('../../images/guide/arrow-sel.png') no-repeat right center; border: 1px solid #002d56; color: #fff;}
  .tab_div.div_4 .mobile-tab.on {background: #002d56 url('../../images/guide/arrow-sel-rever.png') no-repeat right center;}
  .tab_div.div_5 .mobile-tab {background: #fff url('../../images/guide/arrow-sel2.png') no-repeat right center; border: 1px solid #008395; color: #121212;}
  .tab_div.div_5 .mobile-tab.on {background: #fff url('../../images/guide/arrow-sel2-rever.png') no-repeat right center;}
  .tab_div.div_5 .mobile-tab::before {content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; background: #008395; border-radius: 100%;}
  .tab_div.div_5 .mobile-tab::after {content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 8px; background: #008395; border-radius: 100%;}

  .tab_div .ul_4 > li {margin: 0; border: 0;}
  .tab_div .ul_4 > li > a {padding: 2px 20px; border: 0; font-family: 'Noto Light'; font-size: 16px; text-align: center;}
  .tab_div .ul_5 > li {border: 0;}
  .tab_div .ul_5 > li > a {padding: 2px 20px; border: 0; font-family: 'Noto Light'; font-size: 16px; text-align: center;}
  .tab_div .ul_5 > li > a::before {display: none;}
  .tab_div .ul_4 > li._active > a,
  .tab_div .ul_4 > li:hover > a {border: 0; background: #fff; font-family: 'Noto Regular'; color: #002d56;}
  .tab_div .ul_4 > li > a[target=_blank]::after,
  .tab_div .ul_4 > li._active > a[target=_blank]::after {background: url(../../images/guide/tab-link-blank-grey.png) no-repeat center;}
  .tab_div .ul_4 > li:hover > a[target=_blank]::after {background: url(../../images/guide/tab-link-blank.png) no-repeat center;}
  .tab_div .ul_5 > li._active > a,
  .tab_div .ul_5 > li:hover > a {font-family: 'Noto Regular'; font-size: 16px; color: #002d56;}
  .tab_div .ul_5 > li:hover > a[target=_blank]::after {background: url(../../images/guide/tab-link-blank.png) no-repeat center;}
}