@import "tailwind.css";
@import "variable.css";


/*   전체영역 */
.page-name,
.fix-size{max-width:1200px;}

.mx-16{margin:0 16px;}

.nav_container .sub-menu li a.active {text-align: center; border: 0; background: #f2f2f2; color: #181818; font-weight:400;}
.container_sub{margin-right: auto; margin-left: auto;}

.content_With_Body{max-width: 1100px; margin: 0 auto;}
.sub-content {margin-top: 80px;}

@media (min-width: 1200px) {
    .container_sub{width: 100%}
}

@media (min-width: 768px){
	/* .mainContents_container{padding-top:80px;} */
	.nav_container{width: 100%;}
}

@media (max-width: 767px){
	.mainContents_container{padding-top:0;}
	.nav_container{width: 96%;}
}

.mainContents_container{margin: 40px auto ;}

/* #container_title {position:absolute; z-index:100; width:100%;  top:380px;  text-align:center;font-size:28px;} */
#container_title {width:100%; text-align:center; font-size:28px; margin: 50px 0;}
.no-bg-title{margin: 80px 0;}

/*  서브페이지 2차메뉴 */
.nav_container{display: flex; text-align: center; margin: 0 auto; max-width: 700px; padding: 0;}
.nav_container>p{display:none;}
.sub-menu{display: flex; justify-content: center; text-align:center; width: 100%;}
.sub-menu a{font-size:12px; color:#181818; margin:0 4px;}

@media (min-width: 480px){
	.sub-menu a {font-size:14px; }	
}

@media (min-width: 767px){
	.sub-menu a {font-size: 16px; padding:0 1em;}
}

@media (min-width: 1536px){
	.sub-menu a {font-size: 17px; padding:0 2em;}
}

.sub-menu li{
	/* display: flex;
	    align-items: center;
	    justify-content: center; */
	display: block;
	border: 1px solid #e6e9ed;
	margin-left: -1px;
	margin-top: -1px;
	background: #fff;
	float: left;
	width: 25%;
	text-align: left;
	-webkit-transition: all 0.30s ease-in-out;
	word-break: keep-all;
}
.sub-menu li a{text-decoration: none; text-align: center; display: block; color: #656565; margin: 0; position: relative; position: relative; padding: 10px 0; /* line-height: 40px; */}

@media (max-width: 639px){
	.sub-menu{display: block;}
	.sub-menu li {width: 50%;}
}

/**********************************************
*************** 서브페이지 상단 배경  ***********************
***********************************************/

/**********************************************
***************오시는 길   ***********************
***********************************************/
/*오시는 길 카카오 지도*/
.root_daum_roughmap {width: 100% !important;}
.wrap_controllers,

.map_info_box {background-color: rgb(243,244,246);}
.map{display: flex; padding: 2.5rem 5rem; margin-top: 0.25rem;}
.map div:nth-child(2) >div{display:none;}
.address span {display:inline-block;margin:0 1em 4px 0;}
.map-address {display: flex; align-items: center; margin-right: 7rem; margin-bottom: 0.75rem;}
.map-address:last-child {margin-right: 0;}
.map-address span:last-child {font-size: 1.6rem; line-height: 1.5rem; padding-left: 1.2rem; color: #000;}
.map-address span a{font-size: 1.6rem; color: #000;}
.map-address .map-icon {
	display: inline-block;
	border-radius: 50%;
	background-color: rgb(30,58,138);
	background-position: center center;
	background-repeat: no-repeat;
}
.map-address .icon-location {
	background-image: url(/skin/content/images/icon-location.svg);
}
.map-address .icon-telephone {
	background-image: url(/skin/content/images/icon-telephone.svg);
}
.map-address .icon-fax {
	background-image: url(/skin/content/images/icon-fax.svg);
}

@media (min-width: 768px){
	.map-address .map-icon {width: 48px; height: 48px; background-size: 36px;}
}
@media (max-width: 767px){
	.map{display: block; padding: 2.5rem 1rem;}
	.map-address .map-icon {width: 32px; height: 32px; background-size: 20px;}
}

/**********************************************
*************** 회사소개  ***********************
***********************************************/
.company_content{display: flex; justify-content: space-between;}
.com_contbox{}
.com_text_box{width: 60%;}
.com_text_box p{color: #000; word-break: keep-all; margin-bottom: 0;}
.com_text_box p:nth-child(1){font-weight: 600; font-size: 3em; line-height: 1.1;}
.com_text_box p:nth-child(2){font-weight: 600; font-size: 2rem; margin-top: 20px; line-height: 1.3;}
.com_text_box p:nth-child(2) span{font-size: 3rem;}
.com_text_box p:nth-child(3){margin-top: 40px; line-height: 1.4; font-size: 18px;}
.com_img_box{width: 50%;}
.com_img{
	transform: translateY(0%);
    background-image: url(/skin/content/images/company_bg.jpg);
	position: relative;
    padding-bottom: 58%;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom center;
}
.com_img img{position:absolute; width:100%; height:100%; object-fit:cover;}
.com_iconbox{width: 90%; max-width:600px; margin: 0 auto;}
.com_iconbox img{width: 100%; height: auto;}
.line_box{border: 1px solid #0C3391; border-radius: 10px; padding: 30px 60px;}
.line_box p{margin: 0; font-size: 16px; line-height: 1.8; color: #000; word-break: keep-all;}

@media (max-width: 1200px) {
	.width100_box{padding: 0 10px;}
	.company_content{max-width: 1000px;}
    .com_img_box{display: none;}
	.com_text_box{width: 100%;}
}

@media (max-width: 767px) {
	.width100_box{margin-bottom: 0;}
	.line_box{padding: 30px;}
	.company_content{padding: 0 14px;}
}



/**********************************************
***************  연혁   ***********************
***********************************************/
/* 연혁 */
.hi-cont{position: relative; display: flex; justify-content: end; margin-top: 50px;}
.fixed-box{position: relative;}
.fixed-img{position: fixed;}
.fixed-img-box{width: 380px; margin-top: 10px;}
.fixed-img-box img{width: 100%;}
.fixed-img p{margin-bottom: 0;}
.fixed-img p:first-child{color: var(--sub-green); font-weight: 700;font-size: 20px;}
.fixed-img p:nth-child(2){font-size: 30px;}
.fixed-img p:nth-child(3){font-weight: 600; font-size: 34px;}

.year-box {display: flex; margin-top: 40px;}
.year-box > div{padding: 0 4rem; width: 50%;}
.year-box::after {content: ""; position: absolute; left: 50%; top: 3rem; border-right: 1px solid #ddd; height: 100%; z-index: -1;}
.year-box:first-child {margin-top: 0;}
.year-box:nth-child(even) {justify-content: end;}
.year-box:nth-child(odd){text-align: right;}
.year-box:nth-child(odd) h3{text-align: right;}
.year-box:nth-child(odd) .year-content{margin-right: 20px;}
.year-box:nth-child(even) .year-content{margin-left: 20px;}
.year-content span{position: relative; display: block; padding-top: 18px; word-break: keep-all; text-indent: -2.5rem; color: #000; font-size: 16px; text-indent: -25px;}

.history-box .year-box:nth-child(even) .year-content span::before{content: 'ㆍ'; margin: 0 5px;}
.history-box .year-box:nth-child(odd) .year-content span::after{position: absolute; content: '.'; top: 13px; width: 10px; margin: 0 5px;}
.history-box{width: 100%;}
.history-box .year-box h3{position: relative; text-align: left; margin: 0;  font-weight: 700; font-size: 32px;}
.history-box .year-box h3::before{position: absolute; content: ''; display: inline-block; top: 8px;   border: 1px solid #ccc; width: 20px; height: 20px; background: #fff; border-radius: 50px;}
.history-box .year-box h3::after{position: absolute; content: ""; top: 33%; width: 12px; height: 12px; background: #014cac; border-radius: 100%;}
.history-box .year-box:nth-child(odd) h3{text-align: right;}
.history-box .year-box:nth-child(even) h3::before{left: -51px;}
.history-box .year-box:nth-child(odd) h3::before {right: -51px;}
.history-box .year-box:nth-child(even) h3::after{left: -4.1rem; transform: translateX(-50%) !important;}
.history-box .year-box:nth-child(odd) h3::after {right: -5.3rem; transform: translateX(-50%) !important;}

.history_line{position: absolute; width: 1px; height: 100%; left: 50%; top: 30px; overflow: hidden;}
.history_line span{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: blue;}

@media (max-width: 767px){
	.year-box:nth-child(odd){text-align: left; justify-content: end;}
	.history-box .year-box:nth-child(odd) h3{text-align: left; left:-12px;}
	.year-box > div{width: 94%;}
	.history-box .year-box:nth-child(odd) h3::before{left: -38px;}
	.history-box .year-box:nth-child(odd) h3::after{left: -2.8rem; transform: translateX(-50%) !important;}
	.history-box .year-box:nth-child(even) h3::after{left: -3.9rem; transform: translateX(-50%) !important;}
	.year-box:nth-child(even) .year-content{margin-left: 0;}
	.history_line{left: 6%;}
	.year-box::after{left: 6%;}
	.year-box:nth-child(odd) .year-content{margin-right: 0;}
	.history-box .year-box:nth-child(odd) .year-content span::after{display: none;}
	.history-box .year-box:nth-child(odd) .year-content span::before{content: 'ㆍ'; margin: 0 5px;}
}


/**********************************************
*************** 주요고객사  ***********************
***********************************************/
.client h3{position: relative; padding-left: 20px; margin: 0 0 24px 0; color: #093483; font-weight: 800;}
.client h3::before{content: ''; position: absolute;display: inline-block; top: -10%; left: 0; width: 8px; height: 30px; margin-right: 10px; background: #093483;}
.client ul{display: flex; flex-wrap: wrap;}
.client ul li{margin-right: 20px; margin-bottom: 40px;}
.client ul li img{width: 100%;}

@media (max-width: 767px) {
	.client ul li{width: 47%; margin-right: 20px; margin-bottom: 10px;}
	.client ul li:nth-child(2n){margin-right: 0;}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.client ul li{width: 30.7%; margin-right: 30px;}
	.client ul li:nth-child(3n){margin-right: 0;}
}

@media (min-width: 1200px) {
	.client ul li{width: 15%;}
	.client ul li:nth-child(6n){margin-right: 0;}
}


/**********************************************
*************** 제 품  ***********************
***********************************************/

.monitor-bg{background-color:#f4f5f6; }
.monitor-company{background-color:#f4f5f6; padding:24px 0;  }
.title{font-size: 25px;
color:#181818;
    letter-spacing: -0.62px;
    line-height: 44px;
    font-weight: 700;
    margin: 9px 0 17px;}
.monitor-section_container{background-color:#f4f5f6;padding:1em; }
.monitor-section{max-width:1100px; margin:0 auto 12px auto; padding:1.4em; background-color:#fff; border:1px solid #ccc;  border-radius:8px; }



.monitor-title{font-size:20px; font-weight:600; margin-bottom:1em; color:#181818;  }
.monitor-service{display:flex;	flex-wrap: wrap; flex-direction: row-reverse; }
.monitor-service >div{width:50%;   }


.monitor-service >div:nth-child(1),
.monitor-service >div:nth-child(2){padding-bottom:20px; border-bottom:1px dashed #181818;}
.monitor-service >div:nth-child(even){ border-right:1px dashed #181818;}

.monitor-service >div:nth-child(3),
.monitor-service >div:nth-child(4){padding-top:2em; }

.monitor-service >div:nth-child(odd){padding-left:1em; }
.monitor-service >div:nth-child(even){padding-right:1em; }


.monitor-service img{width:30px;}

.cross-text{color:#181818; line-height:1.7; }
@media (max-width:959px){.monitor-ddos img,.cross div img{display:none;}}
@media (min-width:960px){
.yp-40{padding:40px 0; }
.monitor-section_container{background-color:#fff; padding:0; }
.monitor-section{border:0;}
.monitor-section-bgcolor{background-color:#f4f5f6 ;}
.monitor-section-flex{display:flex; }

.monitor-title{font-size:24px; letter-spacing:-2px; line-height:1.8;  text-align:left;}

.cross {border-bottom:1px solid #ddd; padding:40px ; margin-bottom:40px; border-radius:0; }
.cross div img{max-width:300px;}
.cross > div:nth-child(2){padding-left:40px; }
.cross > div:nth-child(1){padding-right:40px; }

.cross2 {border-bottom:1px solid #ddd; padding:40px ; margin-bottom:40px; border-radius:0; }
.cross2 div img{max-width:300px;}
.cross2 > div:nth-child(2){padding-left:40px; }
.cross2 > div:nth-child(1){padding-right:40px; }

.monitor-service >div{width:25%; padding:1em;}
.monitor-service >div:nth-child(4),
.monitor-service >div:nth-child(3),
.monitor-service >div:nth-child(2){border-right:1px dashed #181818; border-bottom:0; }
.monitor-service >div{border-bottom:0;}
.monitor-service >div:nth-child(1){border-right:0; border-bottom:0; }
}



.AIWAF ul{    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.AIWAF li{
	background-color:#f4f6f6; border:2px solid red; border-radius: 40px;
    border: 1px solid #5e9441;
    float: left;
    background-color: #f5f5f5;
    margin:0  8px 8px 0;
    padding: 4px 15px;
    display: flex;
    align-items: center;
    text-align: center;
	color:#181818;
    justify-content: center;}

@media (min-width:1024px){
.AIWAF ul{     justify-content: space-between;}
.AIWAF li{  width: 250px !important;}
}

.SNIPER-function:before{ content:'-'; margin-right:4px;}
.SNIPER-function{ text-indent : -10px;padding-left: 12px; }