@charset "utf-8";

/********** 탭컨텐츠게시판 **********************/
/********** map_img > clBoard_maptab ******/
/********** @latest 2021.10.28 YHY **********/
/********** @latest 2021.12.06 SSJ **********/
/********** @latest 2021.12.08 YHY **********/



/********** Tab Menu - blue_img > clBoard_imgtab **********/
.tabListbox > div {padding:0 !important;}
#cl_bbs_area > div>p>br:only-child {display:none;}

/********** Tab Menu - map_img > clBoard_maptab **********/
/* div.rollingList {position: relative; margin-top:25px;} */
ul.tabsTrack {display:flex;flex-wrap:wrap;overflow: hidden; position: relative; float: left; padding-left:0!important; width: 100%; height: 100%;border-top:2px solid #004a98; box-sizing: border-box; background:#f3f3f3;}
ul.tabsTrack li {overflow: hidden; position: relative; float: left; width:14.28%; height:150px; padding:20px; border-bottom:1px solid #ccc; box-sizing:border-box; z-index: 1;}
ul.tabsTrack li button, ul.tabsTrack li a {overflow: hidden; font-size: 16px; color: #000!important; text-align: left; line-height: 1.3em; word-break: keep-all; font-weight: 600; vertical-align: top;}
ul.tabsTrack li + li {border-left: 1px solid #ccc;}
ul.tabsTrack li:nth-child(8n) {border-left:none;}
ul.tabsTrack li:nth-child(n+8):nth-child(-n+14) {border-bottom:0;}
ul.tabsTrack li.active {background-color:#004a98!important;}
ul.tabsTrack li.active button, ul.tabsTrack li.active a {color:#fff!important; font-weight: bold;}

ul.tabsTrack li:nth-of-type(n).active :after {opacity: 0.3!important;z-index: -1;}

@media (min-width:800px){
	ul.tabsTrack li:nth-of-type(n) :after {content:''; position: absolute; bottom:0; right:0; width:100%; height:100%; z-index: -1;}
	ul.tabsTrack li:nth-of-type(1) :after {background:url('/images/wzwg/module/ntt/icon_map1.png') no-repeat right bottom;}
	ul.tabsTrack li:nth-of-type(2) :after {background:url('/images/wzwg/module/ntt/icon_map2.png') no-repeat right bottom; }
	ul.tabsTrack li:nth-of-type(3) :after {background:url('/images/wzwg/module/ntt/icon_map3.png') no-repeat right bottom;}
	ul.tabsTrack li:nth-of-type(4) :after {background:url('/images/wzwg/module/ntt/icon_map4.png') no-repeat 150% 90%;}
	ul.tabsTrack li:nth-of-type(5) :after {background:url('/images/wzwg/module/ntt/icon_map5.png') no-repeat right bottom;}
	ul.tabsTrack li:nth-of-type(6) :after {background:url('/images/wzwg/module/ntt/icon_map6.png') no-repeat right bottom;}
	ul.tabsTrack li:nth-of-type(7) :after {background:url('/images/wzwg/module/ntt/icon_map7.png') no-repeat right bottom;}
	ul.tabsTrack li:nth-of-type(8) :after {background:url('/images/wzwg/module/ntt/icon_map8.png') no-repeat right bottom;}
	ul.tabsTrack li:nth-of-type(9) :after {background:url('/images/wzwg/module/ntt/icon_map9.png') no-repeat 85% 80%;}
	ul.tabsTrack li:nth-of-type(10) :after {background:url('/images/wzwg/module/ntt/icon_map10.png') no-repeat right bottom;}
	ul.tabsTrack li:nth-of-type(11) :after {background:url('/images/wzwg/module/ntt/icon_map11.png') no-repeat right bottom;}
	ul.tabsTrack li:nth-of-type(12) :after {background:url('/images/wzwg/module/ntt/icon_map12.png') no-repeat 70% 80%;}
	ul.tabsTrack li:nth-of-type(13) :after {background:url('/images/wzwg/module/ntt/icon_map13.png') no-repeat right 85%;}
	ul.tabsTrack li:nth-of-type(14) :after {background:url('/images/wzwg/module/ntt/icon_map14.png') no-repeat 70% 80%;}
}

@media (max-width:1100px) and (min-width:800px){
	ul.tabsTrack li {padding:10px;}
}

@media (max-width:799px){
	ul.tabsTrack li {width: 33.333%;height: auto;min-height: 60px;border-bottom:0;padding:10px;list-style: none !important;border-left: 1px solid #ccc !important;border-bottom: 1px solid #ccc !important;}
	ul.tabsTrack li:nth-child(3n+1) {border-left: none !important;clear: both;}
	ul.tabsTrack li:last-child {border-right:1px solid #ccc;}
	ul.tabsTrack li:nth-last-child(1), ul.tabsTrack li:nth-last-child(2) {border-bottom: none !important;}
	ul.tabsTrack li button, ul.tabsTrack li a {min-height:60px;font-weight:500;letter-spacing: -1px;}
	.tabListbox > div>div.pl20.pr20 {padding: 0 10px;}
}
@media (max-width:550px){
	ul.tabsTrack li:nth-last-child(1), ul.tabsTrack li:nth-last-child(2) {height: 80px;}
}
