@charset "utf-8";

/***********************************************************************************************************
금호건설 안전.css
************************************************************************************************************/

/* 로그인 로고변경 */
.loginArea .boxArea h1.kumho{height: 55px; background-image: url(../images/logo/kumho/symbol_kumho_white.svg); }

/* GNB 메뉴 */
.gnb .gnb_navbar{background: #242A5C; }

.gnb .gnb_navbar .gnb_quick li a{position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: visible; text-indent: 0; width: 60px; height: 74px; background-position: 50% 12px; }
.gnb .gnb_navbar .gnb_quick li a span{font-size: 10px; color: #B4B5B7; letter-spacing: -0.5px; margin-bottom: 12px; }

.gnb .gnb_navbar .gnb_quick li.active a::before{position: absolute; left: 0; height: 74px; }
.gnb .gnb_navbar .gnb_quick li a:hover span,
.gnb .gnb_navbar .gnb_quick li.active a span{color: #FFFFFF; }

/* GNB 메뉴 - 접기/펴기 토글 */
.gnb .gnb_navbar .gnb_toggle{background: #242A5C; }
.gnb .gnb_navbar .gnb_toggle a:hover{background-color: rgba(255,255,255,0.1); }

/* GNB 메뉴 - 대표 아이콘 버튼 */
.gnb .gnb_navbar .gnb_quick li.active a::before{background: #6082E5; background-image: none; }

.gnb .gnb_navbar .gnb_quick li.gnb_old a{background-image: url(../images/img/kumho/ico/k_gray.svg); background-size: 32px; }
.gnb .gnb_navbar .gnb_quick li.gnb_cctv a{background-image: url(../images/ico/video/video_style1_gray.svg); }
.gnb .gnb_navbar .gnb_quick li.gnb_kosha a{background-image: url(../images/img/kumho/ico/kosha_gray.svg); }

.gnb .gnb_navbar .gnb_quick li.gnb_old a:hover,
.gnb .gnb_navbar .gnb_quick li.active.gnb_old a{background-image: url(../images/img/kumho/ico/k_white.svg); }
.gnb .gnb_navbar .gnb_quick li.gnb_cctv a:hover,
.gnb .gnb_navbar .gnb_quick li.active.gnb_cctv a{background-image: url(../images/ico/video/video_style1_white.svg); }
.gnb .gnb_navbar .gnb_quick li.gnb_kosha a:hover,
.gnb .gnb_navbar .gnb_quick li.active.gnb_kosha a{background-image: url(../images/img/kumho/ico/kosha_white.svg); }


/* 메뉴 리스트 */
nav ol > li > a{font-size: 16px; }

nav li.menu > a > em,
nav li.menu .submenu li a em{font-size: 15px; color: #333333; }

nav li.menu > a > em,
nav li.menu .submenu li a .submenu_indicator + em{font-weight: bold; }

/* Header영역 */
.conTopArea{background: #242A5C; background-image: none; }
.conTopArea h1.kumho a{position: relative; display: flex; align-items: center; height: 60px; text-indent: 0; background: none; }
.conTopArea h1.kumho a span:first-child{display: block; overflow: hidden; text-indent: 0; text-indent: -999em; width: 92px; height: 32px; background: url(../images/logo/kumho/symbol_kumho_white.svg) no-repeat 0 50%; margin-left: 10px; }
.conTopArea h1.kumho a span:nth-child(2){position: absolute; bottom: 10px; left: 103px; font-size: 19px; font-weight: bold; color: #FFFFFF; }
.conTopArea h1.kumho a span:last-child{position: absolute; bottom: 13px; left: 178px; font-size: 11px; font-weight: bold; color: #FFFFFF; }

/* Header영역 : 목표 & 슬로건 */
.conTopArea .conTop_targetSlogan{display: flex; align-items: center; justify-content: space-between; width: calc(100% - 680px); }
.conTopArea .conTop_targetSlogan > div{position: relative; display: flex; align-items: center; width: calc(50% - 10px); height: 40px; border-radius: 20px; background: rgba(65,118,255,0.4) /* #4176FF */; overflow: hidden; }
.conTopArea .conTop_targetSlogan > div p{height: 24px; font-size: 18px; font-weight: bold; line-height: 24px; color: #FFFFFF; background: no-repeat 20px 50%; padding-left: 54px; }
.conTopArea .conTop_targetSlogan > div.target p{width: 180px; background-image: url(../images/ico/trophy/trophy_style1_white.svg); }
.conTopArea .conTop_targetSlogan > div.slogan p{width: 130px; background-image: url(../images/ico/megaphone/megaphone_style3_white.svg); }

.conTopArea .conTop_targetSlogan > div p + div{position: absolute; display: flex; align-items: center; height: 30px; background: #FFFFFF; border-radius: 15px; margin: 5px; }
.conTopArea .conTop_targetSlogan > div.target p + div{left: 175px; width: calc(100% - 185px); }
.conTopArea .conTop_targetSlogan > div.slogan p + div{left: 125px; width: calc(100% - 135px); }

.conTopArea .conTop_targetSlogan ul{display: flex; align-items: center; overflow: hidden; }
.conTopArea .conTop_targetSlogan ul li{display: flex; align-items: center; padding: 0 15px; }
.conTopArea .conTop_targetSlogan ul li em{font-size: 16px; margin-right: 25px; }
.conTopArea .conTop_targetSlogan ul li span{color: #EC1C24; font-weight: bold; }

/* 방문자수 */
.conTopArea .conTop_targetSlogan.headOffice{width: calc(100% - 740px); }
.conTopArea .conTop_targetSlogan.headOffice + .conTop_etc li.visit{display: flex; }
.conTopArea .conTop_etc li.visit{display: none; width: auto; text-align: center; padding: 0 10px; }
.conTopArea .conTop_etc li.visit dt{font-size: 11px; color: rgba(255,255,255,0.7); }
.conTopArea .conTop_etc li.visit dd{font-size: 14px; color: #FFFFFF; margin-top: 4px; }

/* Header영역 : 퀵버튼 및 개인정보 */
.conTopArea .conTop_etc li.weather{width: auto; padding: 0 10px; }
.conTopArea .conTop_etc li.weather span{color: #FFFFFF; }

/* 방문페이지 영역 */
.historyArea .history_list li.home a em{background-image: url(../images/img/kumho/ico/home_blue.svg); }

/* Column Style */
.grid_square{margin: 3px 10px; }
.grid_square .block > div{margin-bottom: 18px; }

.grid_square .h_1{height: calc(104px * 1); }
.grid_square .h_2{height: calc((104px * 2) + ((18px * 2) - 18px)); }
.grid_square .h_3{height: calc((104px * 3) + ((18px * 3) - 18px)); }
.grid_square .h_4{height: calc((104px * 4) + ((18px * 4) - 18px)); }
.grid_square .h_5{height: calc((104px * 5) + ((18px * 5) - 18px)); }
.grid_square .h_6{height: calc((104px * 6) + ((18px * 6) - 18px)); }
.grid_square .h_7{height: calc((104px * 7) + ((18px * 7) - 18px)); }
.grid_square .h_8{height: calc((104px * 8) + ((18px * 8) - 18px)); }
.grid_square .h_9{height: calc((104px * 9) + ((18px * 9) - 18px)); }
.grid_square .h_10{height: calc((104px * 10) + ((18px * 10) - 18px)); }
.grid_square .h_11{height: calc((104px * 11) + ((18px * 11) - 18px)); }
.grid_square .h_12{height: calc((104px * 12) + ((18px * 12) - 18px)); }

.grid_square .grid_square_titArea{height: 50px; }
.grid_square .grid_square_titArea + ul,
.grid_square .grid_square_titArea + div{height: calc(100% - 50px); }

/* label 필수표시 */
.formStyle .label_h label .required{background-image: url(../images/ico/bullet/vital_red.svg); }

/* Table */
.grid_square table{width: 100%; }
.grid_square table thead tr{background: #F2F4F6; border-top: 1px solid #D8D8D8; }
.grid_square table tr{border-bottom: 1px solid #D8D8D8; }
.grid_square table td:not(:last-child){border-right: 1px solid #D8D8D8; }
.grid_square table td{font-size: 13px; line-height: 18px; text-align: center; vertical-align: middle; }

.grid_square .h_2 table.tr4 td{height: calc(160px / 4); }
.grid_square .h_2 table.tr5 td{height: calc(160px / 5); }
.grid_square .h_3 table.tr8 td{height: calc(280px / 8); }
.grid_square .h_3 table.tr9 td{height: calc(280px / 9); }

/* Table + 안전신호등 */
.grid_square table .status_display{position: relative; }
.grid_square table .status_display::before{position: absolute; left: 50%; width: 18px; height: 18px; margin: 0 0 0 -9px; }
.grid_square table .status_display span{display: block; overflow: hidden; text-indent: -999em; }

.traLight{position: relative; }
.traLight span:first-child{font-size: 15px; margin-right: 15px; }
.traLight .status_display::before{position: absolute; right: 0px; top: -2px; width: 18px; height: 18px; margin: 0; }
.traLight .status_display span{display: block; overflow: hidden; text-indent: -999em; }

/* Tab */
.grid_square .tabs ul.grid_square_titArea{padding: 0; }
.grid_square .tabs ul.grid_square_titArea li{width: 50%; height: 100%; background: rgba(36,42,92,0.03) /* #242A5C */; border-bottom: 1px solid #D8D8D8; padding: 21px 15px; margin: 0; }
.grid_square .tabs ul.grid_square_titArea li:first-child{border-right: 1px solid #D8D8D8; }
.grid_square .tabs ul.grid_square_titArea li.tab_current{background: #FFFFFF; border-bottom: none; }
.grid_square .tabs ul.grid_square_titArea li span{font-size: 18px; line-height: 1; text-align: left; }

.grid_square .tabs.text_style1 ul.grid_square_titArea{margin-bottom: 20px; }
.grid_square .tabs.text_style1 .noti_txt dd{margin-bottom: 15px; }

.grid_square .tabs.img_style1 .content-wrap{padding: 0; }
.grid_square .h_3 .tabs.img_style1 .content-wrap section{height: 296px; }
.grid_square .tabs.img_style1 .content-wrap section img{width: 100%; height: 100%; object-fit: contain; }

/* boxStyle 연결 */
.connecBox > div:first-child{height: 130px; background: rgba(36,42,92,0.03) /* #242A5C */; border-bottom: 1px solid #D8D8D8; }
.connecBox > div:last-child{height: calc(100% - 130px); }

.connecBox > div:first-child .list dl{display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.connecBox > div:first-child .list dt{font-size: 16px; }
.connecBox > div:first-child .list dd{font-size: 20px; line-height: 24px; }

.connecBox > div:first-child .diviLine{display: flex; align-items: baseline; }
.connecBox > div:first-child .diviLine li{width: calc(100% / 3); text-align: center; }
.connecBox > div:first-child .diviLine li:not(:last-child){border-right: 1px solid #D8D8D8; }

.connecBox > div:first-child .diviLine dt{font-size: 14px; color: #888888; margin-bottom: 15px; }
.connecBox > div:first-child .diviLine dd{font-size: 20px; }

/* 막대그래프영역 + 원그래프영역 */
.grid_square .barGraph ul,
.grid_square .circleGraph ul{display: flex; justify-content: space-around; margin: 0px 10px 15px; }
.grid_square .barGraph ul li,
.grid_square .circleGraph ul li{margin: 0 10px; }
.grid_square .barGraph ul li p,
.grid_square .circleGraph ul li p{font-size: 15px; text-align: center; }

.grid_square .barGraph li{width: calc(100% / 3); }
.grid_square .barGraph li p{margin: 20px 0 10px; }
.grid_square .barGraph li .graphArea{height: 130px; }
.grid_square .barGraph .legend_display dl:nth-child(1).status_display::before{background: rgba(193,218,242,0.4) /* #C1DAF2 */; }
.grid_square .barGraph .legend_display dl:nth-child(2).status_display::before{background: rgba(193,218,242,1) /* #C1DAF2 */; }
.grid_square .barGraph .legend_display dl:nth-child(3).status_display::before{background: rgba(244,127,63,0.4) /* #F47F3F */; }
.grid_square .barGraph .legend_display dl:nth-child(4).status_display::before{background: rgba(244,127,63,1) /* #F47F3F */; }

.grid_square .circleGraph li{width: 110px; }
.grid_square .circleGraph li p{margin: 0 0 10px; }
.grid_square .circleGraph li .graphArea{height: 110px; }
.grid_square .circleGraph .legend_display dl:nth-child(1).status_display::before{background: #F47F3F; }
.grid_square .circleGraph .legend_display dl:nth-child(2).status_display::before{background: #C1DAF2; }

.grid_square .h_4 .barGraph{display: flex; flex-direction: column; justify-content: center; }
.grid_square .h_4 .barGraph ul{margin: 0px 10px 25px; }
.grid_square .h_4 .barGraph li p{margin: 0 0 20px; }
.grid_square .h_4 .barGraph li .graphArea{height: 200px; }

/* 권역 협의체 현황 바로가기 */
.grid_square .banner{display: flex; align-items: center; justify-content: center; background: #C1DAF2; border: none; }
.grid_square .banner a{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 26px; background: url(../images/img/kumho/banner.svg) no-repeat 90px 50% / 111px 84px; padding-left: 146px; }

/* 전체현장 */
.grid_square .siteTotal > div{height: 100%; padding: 0 15px; }
.grid_square .siteTotal dl{display: flex; align-items: center; justify-content: space-between; height: calc(100% / 3); padding: 20px 0 15px; }
.grid_square .siteTotal dl:not(:last-child){border-bottom: 1px solid #D8D8D8; }
.grid_square .siteTotal dt{font-size: 18px; }
.grid_square .siteTotal dd{font-size: 28px; text-align: right; }

/* 경영목표 */
.grid_square .img_target img{width: 100%; height: 100%; object-fit: fill; }

/* 지도 */
.grid_square .h_5 .mapArea .complex_map{margin-top: -50px}
.grid_square .bg_blue{background: #F0F1F7; }
.grid_square .bg_blue .mapArea .map_all.on a{/* darkmode */}
.grid_square .bg_blue .mapArea .region_list > a > span{background: #242A5C; }

/* 지도 - 글로벌 */
.mapArea .global_map{position: absolute; bottom: 10px; right: 20px; width: 116px; height: 116px; background: url(../images/img/map/earth01.svg) no-repeat 0 0 / cover; }
.mapArea .global_map.global{width: 116px; height: 116px; background-image: url(../images/img/map/earth02.svg); }

.mapArea .region_list > a.global{left: 40px; top: 66px; }
.mapArea .region_list > a.global .map_con{left: -236px; top: auto; bottom: -5px; }

/* 카드뉴스 */
.grid_square .cardnewsArea{position: relative; }
.grid_square .cardnewsArea .slides li{width: 370px; height: 346px; overflow: hidden; }
.grid_square .cardnewsArea .slides.h240 li{height: 228px; }

.grid_square .cardnewsArea .slides img{width: 100%; height: 100%; object-fit: contain; }
.grid_square .cardnewsArea p.page_info{position: absolute; z-index: 1; right: 15px; bottom: 15px; }

.grid_square .cardnewsArea .flex-direction-nav li a{position: absolute; top: 50%; display: block; overflow: hidden; text-indent: -999em; width: 36px; height: 36px; background: #FFFFFF no-repeat 50% 50%; border: 1px solid #D8D8D8; border-radius: 50%; margin-top: -18px; }
.grid_square .cardnewsArea .flex-direction-nav li a.flex-prev{left: 15px; background-image: url(../images/ico/arrow/left.svg); }
.grid_square .cardnewsArea .flex-direction-nav li a.flex-next{right: 15px; background-image: url(../images/ico/arrow/right.svg); }

.grid_square .cardnewsArea .flex-pauseplay,
.grid_square .cardnewsArea .flex-control-nav{display: none; }

/* Process */
.progress_round.w110 div svg{width: 110px; height: 110px; stroke-width: 16px; }
.progress_round.w110 div .value span{font-size: 22px; font-weight: bold; }
.progress_round.w110 div .value i{font-size: 15px; font-weight: bold;}
.progress_round.w110 div svg .roundIn{stroke: #E8E8E8; }
.progress_round.w110 div svg .roundOut{stroke: #4176FF; }

/* 안전신호등 */
.grid_square .traffic_light ul{display: flex; align-items: center; justify-content: center; }
.grid_square .traffic_light li{display: flex; flex-wrap: wrap; justify-content: center; width: 148px; height: 148px; background: #1A1A1A; border-radius: 12px; }
.grid_square .traffic_light li:not(:last-child){margin-right: 8px; }
.grid_square .traffic_light li::before{display: block; content: ""; width: 112px; height: 112px; border: 2px solid rgba(255,255,255,0.2); border-radius: 50%; box-sizing: border-box; margin: 18px; opacity: 0.15; }
.grid_square .traffic_light li.red::before{background: #F56565; }
.grid_square .traffic_light li.yellow::before{background: #FFC126; }
.grid_square .traffic_light li.green::before{background: #13A850; }
.grid_square .traffic_light li span{display: none; font-size: 38px; font-weight: bold; margin-top: -91px; }

.grid_square .traffic_light li.on::before{opacity: 1; }
.grid_square .traffic_light li.on span{display: block; }

.grid_square .traffic_light li.ready::before{opacity: 0.15; }
.grid_square .traffic_light li.ready span{display: block; color: #f7ea00; font-size: 30px; margin-top: -90px}

/* 확대하기 */
.expand{position: relative; z-index: 2; }
.expand a{position: absolute; top: 10px; right: 15px; display: block; overflow: hidden; text-indent: -999em; width: 30px; height: 30px; background: rgba(0,0,0,0.4) url(../images/ico/interface/expand_style1_white.svg) no-repeat 50% 50% / 16px; border-radius: 50%; }
.expand a:hover{background-color: rgba(0,0,0,0.7); }

/* text-decoration */
.grid_square a:hover{text-decoration: underline; }

/* Grid */
/* 108 */   .IBCellHeader{background-color: #F2F4F6 !important; }

/* Table */
.table_basic thead tr th{background-color: #F2F4F6;}





a{}