@import url('sub.css'); 


#subtitle + .grid3_layout_wrap  .tit_center {margin:-25px 0 60px;}
#subtitle + link + .grid3_layout_wrap  .tit_center {margin:-25px 0 60px;}


/* 방범, 불법 주정차 단속 시스템 */
.cctv_system_list {display:flex; flex-wrap:wrap;}
.cctv_system_list dl {flex:1; padding:30px; box-sizing: border-box; text-align: center;}
.cctv_system_list dl+dl {border-left: 1px solid var(--border);}
.cctv_system_list dl dt {max-width:300px; width:100%; aspect-ratio: 1 / 1; border-radius: 100%; margin:0 auto; position:relative; overflow: hidden;}
.cctv_system_list dl dt::after {content: ''; width:calc(100% - 20px); height:calc(100% - 20px); border: 1px solid rgba(255,255,255,0.4); border-radius: 100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.cctv_system_list dl dt img {display: block; width: 100%; height: 100%; object-fit: cover;}
.cctv_system_list dl dd {}
.cctv_system_list dl dd .fs30 {margin:30px 0 10px;}
.cctv_system_list dl dd .fs18 {}


.grid3_layout {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:30px;}
.grid3_layout li {position:relative; overflow: hidden; aspect-ratio: 51 / 34;}
.grid3_layout li img {width: 100%;  display: block; width: 100%; height: 100%; object-fit: cover;}

.grid4_layout {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap:30px; margin:60px 0 0;}
.grid4_layout li span {display:block; position:relative; overflow: hidden; aspect-ratio: 375 / 280;}
.grid4_layout li span img {width: 100%;  display: block; width: 100%; height: 100%; object-fit: cover;}
.grid4_layout li .fs20 {text-align:center; font-weight: 600; margin:15px 0 0;}
/* 방범, 불법 주정차 단속 시스템 */



/* 옥내 감시 시스템 */
.system_wrap {display:flex; flex-wrap: wrap; align-items: center; justify-content: center; gap:100px 74px;}
.system_wrap .building_box {position: relative; max-width:550px; flex:1;}
.system_wrap .building_box .cctv_ico {max-width:200px; width:40%; aspect-ratio: 1/1; border-radius: 100%; background: rgba(255, 255, 255, 0.90); box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); backdrop-filter: blur(2px); display: flex; flex-wrap: wrap; justify-content: center; align-content: center; flex-direction: column; gap:2px 0; position: absolute; top:4px; right:-20px; text-align:center;}
.system_wrap .building_box .cctv_ico img {max-width: 60%; margin:0 auto; display:block;}
.system_wrap .building_box .cctv_ico .fs20 {font-weight: 600;}
.system_wrap .building_box .building {max-width:100%;}
.system_wrap .network_box {width:695px; display:flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;}
.system_wrap .network_box .network {position: relative; top:146px; z-index:1;}
.system_wrap .network_box .network::after {content:''; background:url("/business/img/gra_bg.svg")no-repeat center / 100% auto; width: 339px; height: 469px; position: absolute; top:-100px; left:60px; z-index: -1;}
.system_wrap .network_box .network_list {width:375px; position: relative; z-index: 10;;}
.system_wrap .network_box .network_list dl {border-radius: 190px; background: var(--white); box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.06); display:flex; flex-wrap: wrap; align-items: center; padding:20px; box-sizing: border-box; gap:0 30px;}
.system_wrap .network_box .network_list dl+dl {margin:10px 0 0;}
.system_wrap .network_box .network_list dl dt {width:130px; flex-shrink: 0; position:relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 100%; background:var(--grayBg);}
.system_wrap .network_box .network_list dl dt img {width: 100%;  display: block; width: 100%; height: 100%; object-fit: cover;}
.system_wrap .network_box .network_list dl dd {flex:1; font-weight:600;}
/* 옥내 감시 시스템 */




/* 통합관제시스템 */
.control_wrap {display:flex; flex-wrap:wrap; align-items:center; gap:0 80px;}
.control_wrap .imgBox {flex:1; max-width:780px;}
.control_wrap .imgBox img {width:100%;}
.control_wrap .tBox {flex:1;}
.control_wrap .tBox .fs40 {margin:0 0 25px;}
.control_wrap .tBox .fs18+.fs18 {margin:34px 0 0;}
/* 통합관제시스템 */


/* 주차관제시스템 */
.layout_table {display:flex; flex-wrap:nowrap;}
.layout_table .tab_tit {width:405px; flex-shrink: 0;}
.layout_table .fs40 {position: sticky; top:150px; left: 0;}
.layout_table .tab_cont {flex:1;}
.layout_table .grid4_layout {grid-gap:30px 15px; margin:0 0 0;}
.layout_table .grid4_layout li span {aspect-ratio: 1 / 1;}

.grid3_list {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:30px;}
.grid3_list dl {}
.grid3_list dl dt {}
.grid3_list dl dt img {width: 100%;}
.grid3_list dl dd {}
.grid3_list dl dd .fs24 {margin:30px 0 5px;}

.grayBox {padding:30px; box-sizing: border-box; background:var(--grayBg); }
.grid3_layout_wrap+.grayBox {margin:60px 0 0;}
.layout_table .grayBox {margin:0 0 30px;}

.step_list {display: grid; grid-template-columns: repeat(4, 1fr); position: relative; z-index: 10; grid-gap: 50px 0;}
.step_list::after {content:''; width:85%; height: 56%; border:1px solid var(--border); border-left:0; position:absolute; top: 21%; right: 0; z-index: -1; border-radius: 0 200px 200px 0;}
.step_list dl {text-align:center;}
.step_list dl dt {position: relative;}
.step_list dl dt::after {content:''; width: 26px; height: 19px; background:url("/business/img/arr_svg.svg")no-repeat center / 100% auto; position:absolute; top:91px; right:0; transform:translateX(50%);}
.step_list dl dt i {display:block; color: var(--main); font-weight: 600; font-style: normal; text-transform: uppercase; margin:0 0 10px;}
.step_list dl dt .ico {display:flex; flex-wrap: wrap; align-items: center; justify-content: center; max-width:130px; width:100%; border-radius: 100%; background:var(--grayBg); aspect-ratio: 1 / 1; margin:0 auto;}
.step_list dl dt .ico img {}
.step_list dl dd {font-weight: 600; margin:10px 0 0; line-height: 140%;}

.step_list dl:nth-of-type(-n+3) dt::after {transform: translateX(50%) scale(-1); top:87px;}
.step_list dl:nth-of-type(4) dt::after {top:225px; transform: rotate(90deg) scale(-1) translateX(0%); right:-13px;}
.step_list dl:nth-of-type(5) dt::after {display:none;}

.step_list dl:nth-of-type(1) {order:1;}
.step_list dl:nth-of-type(2) {order:2;}
.step_list dl:nth-of-type(3) {order:3;}
.step_list dl:nth-of-type(4) {order:4;}
.step_list dl:nth-of-type(5) {order:8;}
.step_list dl:nth-of-type(6) {order:7;}
.step_list dl:nth-of-type(7) {order:6;}
.step_list dl:nth-of-type(8) {order:5;}

.service_ver .step_list dl dt::after {top:84px;}
.service_ver .step_list dl:nth-of-type(-n+3) dt::after {top:93px;}
.service_ver .step_list dl:nth-of-type(4) dt::after {top:225px;}
/* 주차관제시스템 */













/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 


/* 방범, 불법 주정차 단속 시스템 */
.cctv_system_list dl br {display:none;}
/* 방범, 불법 주정차 단속 시스템 */

/* 통합관제시스템 */
.control_wrap .tBox br {display:none;}
/* 통합관제시스템 */



}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 


/* 옥내 감시 시스템 */
.system_wrap {gap:100px 30px;}
.system_wrap .network_box {width:485px;}
.system_wrap .network_box .network {top:45px;}
.system_wrap .network_box .network_list {width:290px;}
.system_wrap .network_box .network_list dl {padding: 15px;}
.system_wrap .network_box .network_list dl dt {width:100px;}
/* 옥내 감시 시스템 */


/* 통합관제시스템 */
.control_wrap {align-items: flex-start; gap:0 5%;}
/* 통합관제시스템 */


/* 주차관제시스템 */
.layout_table .tab_tit {width:300px;}
.step_list dl dt .ico {max-width:90px;}
.step_list dl dt .ico img {width:50%;}
.step_list dl dt::after {top:69px;}
.step_list dl:nth-of-type(-n+3) dt::after {top:70px;}
.step_list dl:nth-of-type(4) dt::after {top:180px;}

.service_ver .step_list::after {height: 60%; top: 20%;}
.service_ver .step_list dl dt::after {top:72px;}
.service_ver .step_list dl:nth-of-type(-n+3) dt::after {top:69px;}
.service_ver .step_list dl:nth-of-type(4) dt::after {top:196px;}
/* 주차관제시스템 */


}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 





/* 방범, 불법 주정차 단속 시스템 */
.cctv_system_list dl {padding:15px;}

.grid4_layout {grid-gap: 15px;}
/* 방범, 불법 주정차 단속 시스템 */

/* 옥내 감시 시스템 */
.system_wrap .building_box {max-width:550px; flex:none; width:100%; }
/* 옥내 감시 시스템 */


/* 통합관제시스템 */
.control_wrap .tBox .fs40 {margin:0 0 20px;}
.control_wrap .tBox .fs18+.fs18 {margin:15px 0 0;}
/* 통합관제시스템 */


/* 주차관제시스템 */
.layout_table {flex-wrap:wrap;}
.layout_table .tab_tit {width:100%; margin:0 0 35px;}
.layout_table .tab_tit br {display:none;}
.layout_table .fs40 {position: relative; top:0 !important; left: 0;}
.layout_table .tab_cont {flex:none; width:100%;}

.step_list dl:nth-of-type(-n+3) dt::after {top:68px;}
.step_list dl dt::after {top:66px;}
/* 주차관제시스템 */

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 


#subtitle + .grid3_layout_wrap  .tit_center {margin:-10px 0 30px;}
#subtitle + link + .grid3_layout_wrap  .tit_center {margin:-10px 0 30px;}

/* 방범, 불법 주정차 단속 시스템 */
.cctv_system_list dl {flex:none; width:100%; padding:0 15px;}
.cctv_system_list dl+dl {border-left: 0; border-top:1px solid var(--border); padding-top: 30px; margin-top: 30px;}
.cctv_system_list dl dt {max-width: 200px;}
.cctv_system_list dl dt::after {width:calc(100% - 15px); height:calc(100% - 15px);}
.cctv_system_list dl dd .fs30 {margin:15px 0 5px;}

.grid3_layout {display: grid; grid-template-columns: repeat(1, 1fr); grid-gap:15px;}
.grid4_layout {grid-template-columns: repeat(2, 1fr); grid-gap:30px 15px; margin:30px 0 0;}
.grid4_layout li .fs20 {margin:10px 0 0;}
/* 방범, 불법 주정차 단속 시스템 */

/* 옥내 감시 시스템 */
.system_wrap {gap:50px 30px;}
.system_wrap .building_box .cctv_ico {max-width:100px; right:0;}
.system_wrap .network_box {width:100%; gap:0 30px; align-items: center;}
.system_wrap .network_box .network {top:0; flex-shrink: 0; width:100px;}
.system_wrap .network_box .network::after {width:200%; height:320px;}
.system_wrap .network_box .network img {width:100%;}
.system_wrap .network_box .network_list {width:auto; flex:1;}
.system_wrap .network_box .network_list dl {padding: 10px; gap:0 15px;}
.system_wrap .network_box .network_list dl dt {width:60px;}
/* 옥내 감시 시스템 */

/* 통합관제시스템 */
.control_wrap {gap:30px 0;}
.control_wrap .imgBox {flex:none; max-width:100%;}
.control_wrap .tBox {flex:none; width:100%;}
.control_wrap .tBox .fs40 {margin:0 0 15px;}
.control_wrap .tBox .fs18+.fs18 {margin:10px 0 0;}
/* 통합관제시스템 */


/* 주차관제시스템 */
.grid3_list {display: grid; grid-template-columns: repeat(1, 1fr); grid-gap:30px 0;}
.grid3_list dl dd .fs24 {margin:15px 0 5px;}

.layout_table .tab_tit {margin:0 0 20px;}

.grayBox {padding:15px;}
.grid3_layout_wrap+.grayBox {margin:30px 0 0;}

.step_list_wrap {position:relative;}
.step_list_wrap::before {content:''; width:80%; height: 181px; border:1px solid var(--border); border-left:0; position:absolute; top: 439px; right: 0; z-index: -1; border-radius: 0 200px 200px 0;}

.step_list {grid-template-columns: repeat(2, 1fr); grid-gap: 30px 0;}
.step_list::after {height: 181px; top: 75px; width:80%;}
.step_list::before {content:''; width:80%; height: 181px; border:1px solid var(--border); border-right:0; position:absolute; top: 257px; left: 0; z-index: -1; border-radius: 200px 0 0 200px;}
.step_list dl dt::after {top:66px !important; transform: translateX(50%);}
.step_list dl:nth-of-type(-n+3) dt::after {transform: scale(-1) translateX(-50%);}
.step_list dl:nth-of-type(5) dt::after {display:block;}
.step_list dl:nth-of-type(1) {order:1;}
.step_list dl:nth-of-type(2) {order:2;}
.step_list dl:nth-of-type(3) {order:4;}
.step_list dl:nth-of-type(4) {order:3;}
.step_list dl:nth-of-type(5) {order:5;}
.step_list dl:nth-of-type(6) {order:6;}
.step_list dl:nth-of-type(7) {order:8;}
.step_list dl:nth-of-type(8) {order:7;}

.step_list dl:nth-of-type(2) dt::after {top:156px !important; transform: rotate(90deg) scale(-1); right:-12px;}
.step_list dl:nth-of-type(3) dt::after {transform: translateX(-50%); right:auto; left:0;}
.step_list dl:nth-of-type(4) dt::after {right:auto; left:-12px; top:161px !important; transform: rotate(90deg) scale(-1);}
.step_list dl:nth-of-type(5) dt::after {transform: scale(-1) translateX(-50%); }
.step_list dl:nth-of-type(6) dt::after {top:156px !important; transform: rotate(90deg) scale(-1); right:-12px;}
.step_list dl:nth-of-type(7) dt::after {display:none;}

.service_ver .step_list::after {height: 181px; top: 75px; width:80%;}
.service_ver .step_list::before {height: 202px;}
.step_list_wrap.service_ver::before {top:460px;}
/* 주차관제시스템 */








}
/*******************************************************************************
	@media 480px
*******************************************************************************/
@media all and (max-width:480px) { 



}