@charset "utf-8";

/* ==================================================
	공통사항
================================================== */
::-moz-selection {
	background: #222222;
	color: #fff;
}

::selection {
	background: #222222;
	color: #fff;
}

.cont_inner {
	width: 100%;
	margin-top: 50px;
}

.img100 {
	width: 100%;
}

/* margin */
.mt20 {
	margin-top: 20px;
}

.mt30 {
	margin-top: 30px;
}

.mt50 {
	margin-top: 50px;
}

/* 모바일CSS */
@media screen and (max-width:1023px) {
	.cont_inner {
		margin-top: 30px;
	}

	/* margin */
	.mt30 {
		margin-top: 25px;
	}

	.mt50 {
		margin-top: 40px;
	}
}

@media screen and (max-width:640px) {

	/* margin */
	.mt30 {
		margin-top: 20px;
	}

	.mt50 {
		margin-top: 30px;
	}
}

/* ==================================================
	아이콘
================================================== */
.con_title {
	position: relative;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.1;
	padding-left: 20px;
	color: #222;
}

.con_title:after {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 7px;
	height: 23px;
	background: #cf2a28;
}

.con_title:before {
	content: "";
	width: 7px;
	height: 12px;
	display: block;
	position: absolute;
	top: 2px;
	left: 0;
	background: #1a4996;
	z-index: 1;
}

.l-list01 {
	line-height: 1.4;
	font-size: 1.8rem;
}

.l-list01>li {
	position: relative;
	padding-left: 15px;
	margin-top: 10px;
	color: #000;
}

.l-list01>li:first-child {
	margin-top: 0;
}

.l-list01>li:before {
	content: "";
	position: absolute;
	top: 10px;
	left: 0;
	width: 5px;
	height: 5px;
	background: #b8b8b8;
}

.l-list01>li span {
	font-weight: 700;
}

/* 모바일CSS */
@media screen and (max-width:1023px) {
	.con_title {
		font-size: 2.5rem;
	}

	.con_title:after {
		top: 9px;
		height: 17px;
	}

	.con_title:before {
		height: 8px;
		top: 2px;
	}

	.l-list01 {
		font-size: 1.7rem;
	}

	.l-list01>li:before {
		top: 10px;
	}
}

@media screen and (max-width:640px) {
	.con_title {
		font-size: 2rem;
	}

	.con_title:after {
		top: 3px;
		height: 17px;
	}

	.con_title:before {
		height: 8px;
		top: 2px;
	}

	.l-list01 {
		font-size: 1.6rem;
	}

	.l-list01>li:before {
		top: 10px;
	}

	.l-list01>li {
		margin-top: 5px;
	}
}

/* ==================================================
	반응형 테이블 스크롤
================================================== */
.msg_touch_help {
	display: none;
}

/* 모바일CSS */
@media screen and (max-width:720px) {
	.con_table_wrap {
		overflow-x: auto;
	}

	.con_table_wrap {
		position: relative;
	}

	.table_scroll {
		width: 200%;
	}

	.msg_touch_help {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -40px;
		margin-top: -40px;
		display: block;
	}

	.msg_touch_help img {
		width: 100px;
		height: 100px;
	}
}

/* ==================================================
	이미지 움직이는 효과
================================================== */
.over-cover {
	overflow: hidden;
	position: relative;
	display: inline-block;
	border: 1px solid #dbdbdb;
	line-height: 0;
}

.over-cover img {
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}

.over-cover:hover img {
	-webkit-transform: scale3d(1.2, 1.2, 1);
	transform: scale3d(1.2, 1.2, 1);
}

.over-cover01 {
	overflow: hidden;
	position: relative;
	display: inline-block;
	border: 1px solid #dbdbdb;
	line-height: 0;
	border-radius: 15px;
}

.over-cover01 img {
	width: 100%;
}


/* ==================================================
	상단이미지
================================================== */
.content_topcon {
	position: relative;
	margin-bottom: 40px;
}

.customer_bg {
	background: url('../images/about/customer_bg.jpg') no-repeat 50% 50%;
	background-size: cover;
}

.facilities_bg {
	background: url('../images/facilities/facilities_bg.jpg') no-repeat 50% 50%;
	background-size: cover;
}

.content_topcon:before,
.content_topcon:after {
	position: absolute;
	top: 50%;
	width: 35px;
	height: 258px;
	margin-top: -129px;
	content: "";
}

.content_topcon:before {
	left: 50px;
	background: url('../images/common/cont_tleft.png') no-repeat
}

.content_topcon:after {
	right: 50px;
	background: url('../images/common/cont_tright.png') no-repeat
}

.content_topcon p {
	color: #fff;
	text-align: center;
	font-size: 3.4rem;
	letter-spacing: -0.3px;
	font-weight: 400;
	line-height: 1.5;
	padding: 100px 0;
	word-break: keep-all;
}

.content_topcon p b {
	font-weight: 700;
}

.ct_dl {
	display: block;
}

/* 애니메이션 효과 */
.content_topcon p {
	opacity: 0;
	transform: translateY(50px);
	-webkit-transform: translateY(50px);
	transition: all 1s cubic-bezier(0.42, 0.0, 0.58, 1.0);
	-webkit-transition: all 1s cubic-bezier(0.42, 0.0, 0.58, 1.0);
}

.content_topcon.active p {
	opacity: 1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
}

/* 모바일CSS */
@media screen and (max-width:1023px) {
	.content_topcon {
		margin-bottom: 40px;
	}

	.content_topcon p {
		font-size: 2.8rem;
	}
}

@media screen and (max-width:800px) {
	.content_topcon p {
		font-size: 2.2rem;
	}

	.ct_dl {
		display: inline;
	}
}

@media screen and (max-width:640px) {
	.content_topcon {
		margin-bottom: 25px;
	}

	.content_topcon:before,
	.content_topcon:after {
		display: none
	}

	.content_topcon p {
		font-size: 1.8rem;
		padding: 15% 15px
	}
}

@media screen and (max-width:450px) {
	.content_topcon p {
		font-size: 1.6rem;
	}
}

/* ==================================================
	회사소개 - 인사말
================================================== */
.ceo_bg {
	position: relative;
}

.ceo_bg img {
	position: absolute;
    top: 0px;
    left: -500px;
	width: 750px;
	height: 750px;
    animation: ciMove 25s linear infinite;
	z-index: -1;
}

@keyframes ciMove {
	0% {
	  transform: rotate(0);
	}
	100% {
	  transform: rotate(360deg);
	}
  }

.ceo_con {
	display: flex;
	color: #000000;
	margin-top: 100px;
	border-radius: 80px 0 0 0;
	position: relative;
}

.ceo_con img {
	border-radius: 60px 0;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
}

.ceo_txt {
	width: 70%;
	padding-right: 95px;
	word-break: keep-all;
}


.ceo_txt span {
	display: block;
}

.ceo_txt p:nth-child(1) {
	font-size: 4.5rem;
	line-height: 1.3;
	font-weight: 400;
}

.ceo_txt p:nth-child(1) em {
	font-weight: 800;
	font-size: 5rem;
	color: #000000;
}

.ceo_txt p:nth-child(2) {
	padding-top: 30px;
	line-height: 1.5;
	color: #6a6a6a;
}

.ceo_txt p:nth-child(2) span {
	display: block;
}

.ceo_txt p:nth-child(3) {
	padding-top: 30px;
	line-height: 1.5;
	color: #6a6a6a;
}

.ceo_txt p:nth-child(4) {
	padding-top: 30px;
	line-height: 1.5;
	color: #6a6a6a;
}

.ceo_txt p:nth-child(5) {
	padding-top: 30px;
	line-height: 1.5;
	color: #6a6a6a;
}

.ceo_txt p:nth-child(6) {
	padding-top: 30px;
	line-height: 1.5;
	color: #6a6a6a;
}

.ceo_txt p:nth-child(7) {
	padding-top: 30px;
	line-height: 1.5;
	color: #6a6a6a;
}

.ceo_info {
	display: flex;
}

.ceo_info .company {
	padding-top: 20px;
	line-height: 1.5;
	font-weight: 600;
	color: #000;
	font-size: 2rem;
}

.ceo_info .company_name {
	padding-top: 23px;
	padding-left: 15px;
	font-weight: 800;
	color: #000;
	font-size: 2.3rem;
}

.company_list {
	font-size: 1.8rem;
	font-weight: 400;
	padding-top: 5px;
}

/* 모바일CSS */
@media all and (max-width:1400px) {
	.ceo_con {
		margin-top: 70px;
	}
	.ceo_bg img {
		left: -200px;
	}

	.ceo_txt p:nth-child(1) em {
		font-size: 4.3rem;
	}

	.ceo_txt p:nth-child(1){
		font-size: 4rem;
	}

	
	.ceo_txt p:nth-child(2) {
		padding-top: 15px;
	}
	
	.ceo_txt p:nth-child(3) {
		padding-top: 15px;
	}
	
	.ceo_txt p:nth-child(4) {
		padding-top: 15px;
	}
	
	.ceo_txt p:nth-child(5) {
		padding-top: 15px;
	}
	
	.ceo_txt p:nth-child(6) {
		padding-top: 15px;
	}
	
	.ceo_txt p:nth-child(7) {
		padding-top: 15px;
	}
	
	.ceo_txt p:nth-child(8) {
		padding-top: 15px;
	}
}

@media all and (max-width:1200px) {
	.ceo_con {
		display: block;
		margin-top: 50px;
	}

	.ceo_bg img {
		left: 400px;
		top: -30px;
	}

	.ceo_txt {
		width: 100%;
		padding-right: 0;
	}

	.ceo_txt p:nth-child(1) em {
		font-size: 4rem;
	}

	.ceo_txt p:nth-child(1) {
		font-size: 3.5rem;
	}

	.ceo_con img {
		width: 100%;
		margin-top: 35px;
	}
}

@media all and (max-width:640px) {
	.ceo_con {
		margin-top: 35px;
	}

	.ceo_bg img {
		left: 100px;
	}

	.ceo_txt p:nth-child(1) em {
		font-size: 3rem;
	}

	.ceo_txt p:nth-child(1) {
		font-size: 2.5rem;
		text-align: center;
		line-height: 1.5;
	}

	.ceo_info.company {
		font-size: 1.8rem;
	}
	
	.ceo_info.company_name {
		font-size: 1.8rem;
	}

}

@media all and (max-width:540px) {
	.ceo_bg img {
		left: 50px;
	}

	.ceo_txt p:nth-child(1) em {
		font-size: 2.5rem;
	}

	.ceo_txt p:nth-child(1){
		font-size: 2rem;
		line-height: 1.3;
	}

	.ceo_txt p:nth-child(2) {
		font-size: 1.5rem;
	}

	.ceo_txt p:nth-child(3) {
		font-size: 1.5rem;
	}
	.ceo_txt p:nth-child(4) {
		font-size: 1.5rem;
	}
	.ceo_txt p:nth-child(5) {
		font-size: 1.5rem;
	}
	.ceo_txt p:nth-child(6) {
		font-size: 1.5rem;
	}
	.ceo_txt p:nth-child(7) {
		font-size: 1.5rem;
	}

	.ceo_info.company {
		font-size: 1.5rem;
	}
	
	.ceo_info.company_name {
		font-size: 1.5rem;
	}

	.company_list {
		font-size: 1.5rem;
	}
}

/* ==================================================
	회사소개 - 경영이념
================================================== */
.vision_con {
	background: url(../images/about/vision_bg.jpg) no-repeat 50% 50%;
    text-align: center;
	padding: 80px;
    position: relative;
}

.vision_con p {
	font-size: 4.3rem;
	color: #c4c4c4;
	line-height: 1.35;
}

.vision_con p em {
	font-weight: 800;
	color: #ffffff;
}

.vision_con p span {
	display: block;
}

.vision_img {
	margin-top: 80px;
	max-width: 1400px;
}

.vision_img img {
	width: 100%;
}

/* 모바일CSS */
@media all and (max-width:1400px) {
	.vision_con {
		padding: 50px;
	}

	.vision_con p {
		font-size: 3.8rem;
	}

	.vision_img {
		margin-top: 35px;
	}
}

@media all and (max-width:1200px) {
	.vision_con p {
		font-size: 3rem;
	}
}

@media all and (max-width:640px) {
	.vision_con {
		padding: 35px;
	}

	.vision_con p {
		font-size: 2.5rem;
	}

	.vision_con p span {
		display: none;
	}

	.vision_img {
		margin-top: 25px;
	}
}

@media all and (max-width:540px) {
	.vision_con p {
		font-size: 2rem;
	}
}

/* ==================================================
	회사소개 - 조직도
================================================== */
.organization_con {
	max-width: 1400px;
}

.organization_con img {
	width: 100%;
}

/* ==================================================
	회사소개 - 오시는길
================================================== */
#map1 {
	clear:both;
	width:100%; 
	height:650px; 
	background:gray; 
	animation: fadeInY 0.6s 0s ease-in-out;
}

.location_info {
	position: relative;
}

.location_info .info {
	background: #313131;
	position: absolute;
	left: 10%;
	top: -150px;
	padding: 50px 80px 50px 50px;
	color: #fff;
}

.location_info .info p {
	padding-bottom: 60px;
	color: #d9d9d9;
}

.location_info .info h4 {
	font-size: 3.5rem;
	color: #fff;
}

.location_info .info_txt_info {
	margin-top: 50px;
}

.location_info .info_txt {
	display: flex;
	margin-left: 700px;
	align-items: center;
	justify-items: center;
	padding-bottom: 15px;
}

.location_info .info_txt h4 {
	font-size: 2.5rem;
	padding-right: 35px;
}

.location_info .info_txt p {
	font-size: 2rem;
}

/* 모바일CSS */
@media all and (max-width:1400px) {

}

@media all and (max-width:1200px) {
	.location_info .info_txt {
		margin-left: 550px;
	}

	.location_info .info {
		left: 5%;
	}
}

@media all and (max-width:1000px) {
	.location_info .info_txt h4 {
		font-size: 2rem;
		padding-right: 25px;
	}

	.location_info .info_txt p {
		font-size: 1.8rem;
	}

	.location_info .info h4 {
		font-size: 2.5rem;
	}

	.location_info .info p {
		padding-bottom: 35px;
	}

	.location_info .info_txt {
		margin-left: 450px;
	}
}

@media all and (max-width:850px) {
	.location_info .info {
		left: 20px;
		padding: 35px;
	}

	.location_info .info h4 {
		font-size: 2rem;
	}

	.location_info .info_txt_info {
		margin-top: 35px;
	}

	.location_info .info_txt {
		margin-left:300px;
		padding-bottom: 10px;
	}

	.location_info .info_txt p {
		font-size: 1.5rem;
	}
}

@media all and (max-width:640px) {
	.location_info .info {
		padding: 25px;
		margin-top: 25px;
	}

	.location_info .info_txt h4 {
		font-size: 1.8rem;
	}

	.location_info .info h4 {
		font-size: 1.8rem;
	}

	.location_info .info_txt {
		margin-left: 250px;
	}
} 

@media all and (max-width:540px) {
	.location_info .info_txt h4 {
		padding-right: 15px;
	}

	.location_info .info {
		position: relative;
		top: 0;
		left: 0;
		margin-top: 15px;
	}

	.location_info .info_txt_info {
		margin-top: 25px;
	}

	.location_info .info_txt {
		margin-left: 0;
	}
}


/* ==================================================
	제품소개 - 차단기 동작 코일 감시장치 , DC전원이상유무 감시장치 공통
	.monitor03.monitor04.monitor05
================================================== */
.monitor01_con {
	display: flex;
	position: relative;
}

.monitor01_img {
	width: 50%;
}

.monitor01_txt {
	width: 50%;
	padding-top: 50px;
}


.monitor01_txt::after {
	width: 2560px;
    height: 250px;
    content: "";
    background: #F4F7FC;
    position: absolute;
    margin-left: -500px;
    top: 0;
    left: -80px;
    z-index: -99;
    display: block;
}

.monitor01_txt p:nth-child(1) {
	color: #E0005D;
	padding-bottom: 10px;
	font-weight: 700;
	font-size: 2.3rem;
}

.monitor01_txt p:nth-child(2) {
	line-height: 1.5;
	color: #6a6a6a;
}

.monitor01_txt ul {
	position: relative;
	margin-top: 60px;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 15px;
}

.monitor01_txt ul li {
	position: relative;
	padding-left: 15px;
	font-weight: 400;
}

.monitor01_txt ul li::before {
	content: "";
	width: 5px;
	height: 5px;
	background: #E0005D;
	position: absolute;
	left: 0;
	top: 5px;
	border-radius: 50%;
	margin-right: 10px;
}

.monitor02_con {
	position: relative;
	margin-top: 50px;
}

.monitor02_con::after {
	width: 2560px;
    height: 600px;
    content: "";
    background: url(../images/product/monitor01_bg.png) no-repeat 50% 0;
    position: absolute;
    margin-left: -500px;
    top: 0;
    left: -80px;
    z-index: -99;
    display: block;
}

.monitor02_con ul span {
	display: block;
}

.monitor02_con ul {
	text-align: center;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 15px;
	padding-top: 50px;
}

.monitor02_con ul li {
	line-height: 1.5;
	word-break: keep-all;
}

.monitor02_con ul li img {
	width: 40%;
}

.monitor02_con ul em {
	font-weight: 800;
}

.monitor03_con {
	margin-top: 80px;

}

.monitor03_con {
	margin-top: 150px;
}

.monitor03_con ul {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	text-align: center;
	align-items: center;
	justify-content: center;
	gap: 0 50px;
}

.monitor03_con ul li {
	position: relative;
	border: 1px solid #e0e0e0;
	border-radius: 30px;
	padding-top: 70px;
}

.monitor03_con ul li:nth-child(2) {
	padding-top: 100px;
}

.monitor03_con ul li p{
	padding-top: 15px;
	padding-bottom: 25px;
}

.monitor03_con ul li:nth-child(2) p {
	padding-top: 40px;
}

.monitor03_con ul li::before {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 50%;
	left: -35px;
	background: url(../images/product/next.png) no-repeat;
}

.monitor03_con ul li:nth-child(1)::before {
	content: none;
}

.monitor04_con {
	display: flex;
	background: #F4F4F4;
	padding: 35px 50px;
	margin-top: 80px;
}

.monitor04_con img {
	width: 100%;
}

.monitor05_con {
	display: flex;
	margin-top: 80px;
}

.monitor05_con_txt {
	width: 40%;
	padding-right: 80px;
}


.monitor05_con_txt p:nth-child(1) {
	color: #E0005D;
	font-weight: 600;
	padding-bottom: 15px;
	font-size: 2.5rem;
}

.monitor05_con_txt p:nth-child(2) {
	line-height: 1.5;
	color: #6a6a6a;
}

/* 모바일CSS */
@media all and (max-width:1400px) {
	.monitor01_txt {
		padding-top: 35px;
	}

}

@media all and (max-width:1336px) {
	.monitor03_con ul li {
		border: none;
	}
}

@media all and (max-width:1260px) {
	.monitor01_con {
		display: block;
	}

	.monitor01_img {
		text-align: center;
		width: 100%;
	}

	.monitor01_txt {
		width: 100%;
		padding-top: 0;
	}

	.monitor01_txt p {
		word-break: keep-all;
	}

	.monitor01_txt p:nth-child(1) {
		text-align: center;
	}

	.monitor01_txt ul {
		grid-template-columns: repeat(3,1fr);
	}

	.monitor01_txt::after {
		height: 280px;
		top: 200px;
		left: -80px;
	}

	.monitor02_con::after {
		height: 500px;
	}

	.monitor02_con ul li img {
		width: 45%;
	}

	.monitor03_con {
		margin-top: 80px;
	}

	.monitor03_con ul li:nth-child(3)::before {
		left: 2px;
	}

	.monitor04_con {
		margin-top: 50px;
	}

	.monitor05_con_txt {
		padding-right: 25px;
	}
}

@media all and (max-width:1260px) {
	.monitor05_con {
		display: block;
		margin-top: 60px;
		word-break: keep-all;
	}

	.monitor05_con_txt {
		width: 100%;
	}

	.monitor05_con_img {
		padding-top: 25px;
	}

	.monitor05_con_img img {
		width: 100%;
	}
}

@media all and (max-width:1023px) {
	.monitor01_txt ul {
		gap: 10px 35px;
		margin-top: 35px;
	}

	.monitor01_txt ul li {
		line-height: 1.5;
		word-break: keep-all;
	}

	.monitor01_txt ul li::before {
		top: 10px;
	}

	.monitor02_con ul span {
		display: none;
	}
}

@media all and (max-width:1000px) {
	.monitor03_con ul li::before {
		content: none;
	}
}

@media all and (max-width:800px) {
	.monitor03_con ul li {
		padding-top: 0;
	}

	.monitor03_con ul li:nth-child(2){
		padding-top: 0;
	}

	.monitor03_con ul {
		gap: 0 35px;
		margin-top: 35px;
	}

	.monitor04_con{
		display: block;
		margin-top: 35px;
		padding: 35px;
	}
	

	.monitor05_con {
		margin-top: 35px;
	}
}

@media all and (max-width:690px) {
	.monitor02_con {
		margin-top: 0;
	}

	.monitor02_con ul {
		grid-template-columns: repeat(2,1fr);
		gap: 25px;
	}

	.monitor02_con::after {
		content: none;
	}

	.monitor02_con ul {
		padding-top: 35px;
	}

	.monitor03_con {
		margin-top: 15px;
		position: relative;
	}

	.monitor03_con ul {
		grid-template-columns: repeat(1,1fr);
	}

	.monitor03_con:after {
		width: 1000px;
		height: 870px;
		content: "";
		background: #F4F7FC;
		position: absolute;
		margin-left: -500px;
		top: -20px;
		left: 400px;
		z-index: -99;
		display: block;
	}
}

@media all and (max-width:580px) {
	.monitor01_txt ul{
		gap: 10px;
		margin-top: 15px;
	}

	.monitor01_img img {
		width: 80%;
	}

	.monitor01_txt::after {
		content: none;
	}
}

@media all and (max-width:450px){
	.monitor01_txt p:nth-child(1) {
		font-size: 2rem;
	}

	.monitor01_txt p:nth-child(2) {
		font-size: 1.5rem;
	}

	.monitor01_txt ul {
		grid-template-columns: repeat(1,1fr);
	}

	.monitor02_con ul li p {
		font-size: 1.5rem;
	}

	.monitor04_con {
		padding: 15px;
		margin-top: 15px;
	}

	.monitor05_con_txt p:nth-child(1) {
		font-size: 2rem;
		padding-bottom: 5px;
	}

	.monitor05_con_txt p:nth-child(2) {
		font-size: 1.5rem;
	}

	.monitor05_con_img {
		padding-top: 15px;
	}
}

@media all and (max-width:330px) {
	.monitor02_con ul {
		grid-template-columns: repeat(1,1fr);
	}
}

/* ==================================================
	제품소개 - 차단기 DC전원이상유무 감시장치
	.monitor01,.monitor02
================================================== */

.monitor01-1_txt {
	width: 50%;
	padding-top: 50px;
}


.monitor01-1_txt::after {
	width: 2560px;
    height: 300px;
    content: "";
    background: #F4F7FC;
    position: absolute;
    margin-left: -500px;
    top: 0;
    left: -80px;
    z-index: -99;
    display: block;
}

.monitor01-1_txt p:nth-child(1) {
	color: #E0005D;
	padding-bottom: 10px;
	font-weight: 700;
	font-size: 2.3rem;
}

.monitor01-1_txt p:nth-child(2) {
	line-height: 1.5;
	color: #6a6a6a;
}

.monitor01-1_txt ul {
	position: relative;
	margin-top: 60px;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 15px;
}

.monitor01-1_txt ul li {
	position: relative;
	padding-left: 15px;
	font-weight: 400;
}

.monitor01-1_txt ul li::before {
	content: "";
	width: 5px;
	height: 5px;
	background: #E0005D;
	position: absolute;
	left: 0;
	top: 5px;
	border-radius: 50%;
	margin-right: 10px;
}


.monitor02-1_con {
	position: relative;
	margin-top: 50px;
}

.monitor02-1_con::after {
	width: 2560px;
    height: 600px;
    content: "";
    background: url(../images/product/monitor02_bg.png) no-repeat 50% 0;
    position: absolute;
    margin-left: -500px;
    top: 0;
    left: -80px;
    z-index: -99;
    display: block;
}

.monitor02-1_con ul span {
	display: block;
}

.monitor02-1_con ul {
	text-align: center;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 15px;
	padding-top: 50px;
}

.monitor02-1_con ul li {
	line-height: 1.5;
	word-break: keep-all;
}

.monitor02-1_con ul em {
	font-weight: 800;
}

/* 모바일CSS */
@media all and (max-width:1400px) {
	.monitor01-1_txt {
		padding-top: 35px;
	}

}


@media all and (max-width:1260px) {
	.monitor01-1_con {
		display: block;
	}

	.monitor01-1_img {
		text-align: center;
		width: 100%;
	}

	.monitor01-1_txt {
		width: 100%;
		padding-top: 0;
	}

	.monitor01-1_txt p {
		word-break: keep-all;
	}

	.monitor01-1_txt p:nth-child(1) {
		text-align: center;
	}

	.monitor01-1_txt ul {
		grid-template-columns: repeat(3,1fr);
	}

	.monitor01-1_txt::after {
		height: 280px;
		top: 200px;
		left: -80px;
	}
}


@media all and (max-width:1023px) {
	.monitor01-1_txt ul {
		gap: 10px 35px;
		margin-top: 35px;
	}

	.monitor01-1_txt ul li {
		line-height: 1.5;
		word-break: keep-all;
	}

	.monitor01-1_txt ul li::before {
		top: 10px;
	}

	.monitor02-1_con ul span {
		display: none;
	}
}


@media all and (max-width:690px) {
	.monitor02-1_con {
		margin-top: 0;
	}

	.monitor02-1_con ul {
		grid-template-columns: repeat(2,1fr);
		gap: 25px;
	}

	.monitor02-1_con::after {
		content: none;
	}

	.monitor02_con ul {
		padding-top: 35px;
	}
}

@media all and (max-width:580px) {
	.monitor01-1_txt p:nth-child(1) {
		font-size: 2rem;
	}

	.monitor01-1_txt ul{
		gap: 10px;
		margin-top: 15px;
	}

	.monitor01-1_img img {
		width: 80%;
	}

	.monitor01-1_txt::after {
		content: none;
	}

	.monitor01-1_txt p:nth-child(2) {
		font-size: 1.5rem;
	}

	.monitor02-1_con ul li {
		font-size: 1.5rem;
	}

	.monitor02-1_con ul {
		gap: 10px;
	}

	.monitor01-1_txt ul {
		grid-template-columns: repeat(1,1fr);
		background: #F4F7FC;
		padding: 15px;
	}
}

@media all and (max-width:450px){
	.monitor01-1_txt p:nth-child(1) {
		font-size: 2rem;
	}

	.monitor01-1_txt p:nth-child(2) {
		font-size: 1.5rem;
	}

	.monitor02-1_con ul {
		grid-template-columns: repeat(1,1fr);
	}

	.monitor02-1_con ul li p {
		font-size: 1.5rem;
	}
}

/* ==================================================
	제품소개 - 음성통보장치
================================================== */

.monitor01-2_txt {
	width: 50%;
	padding-top: 50px;
}


.monitor01-2_txt::after {
	width: 2560px;
    height: 220px;
    content: "";
    background: #F4F7FC;
    position: absolute;
    margin-left: -500px;
    top: 0;
    left: -80px;
    z-index: -99;
    display: block;
}

.monitor01-2_txt p:nth-child(1) {
	color: #E0005D;
	padding-bottom: 10px;
	font-weight: 700;
	font-size: 2.3rem;
}

.monitor01-2_txt p:nth-child(2) {
	line-height: 1.5;
	color: #6a6a6a;
}

.monitor01-2_txt ul {
	position: relative;
	margin-top: 60px;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 15px;
}

.monitor01-2_txt ul li {
	position: relative;
	padding-left: 15px;
	font-weight: 400;
}

.monitor01-2_txt ul li::before {
	content: "";
	width: 5px;
	height: 5px;
	background: #E0005D;
	position: absolute;
	left: 0;
	top: 5px;
	border-radius: 50%;
	margin-right: 10px;
}

/* 모바일CSS */
@media all and (max-width:1400px) {
	.monitor01-2_txt {
		padding-top: 35px;
	}
}


@media all and (max-width:1260px) {
	.monitor01-2_txt {
		width: 100%;
		padding-top: 0;
	}

	.monitor01-2_txt p {
		word-break: keep-all;
	}

	.monitor01-2_txt p:nth-child(1) {
		text-align: center;
	}

	.monitor01-2_txt ul {
		grid-template-columns: repeat(3,1fr);
	}

	.monitor01-2_txt::after {
		height: 280px;
		top: 200px;
		left: -80px;
	}
}


@media all and (max-width:1023px) {
	.monitor01-2_txt ul {
		gap: 10px 35px;
		margin-top: 35px;
	}

	.monitor01-2_txt ul li {
		line-height: 1.5;
		word-break: keep-all;
	}

	.monitor01-2_txt ul li::before {
		top: 10px;
	}

	.monitor02-1_con ul span {
		display: none;
	}
}


@media all and (max-width:690px) {
	.monitor02-1_con {
		margin-top: 0;
	}

	.monitor02-1_con ul {
		grid-template-columns: repeat(2,1fr);
		gap: 25px;
	}

	.monitor02-1_con::after {
		content: none;
	}

	.monitor02_con ul {
		padding-top: 35px;
	}
}

@media all and (max-width:580px) {
	.monitor01-2_txt p:nth-child(1) {
		font-size: 2rem;
	}

	.monitor01-2_txt ul{
		gap: 10px;
		margin-top: 15px;
	}

	.monitor01-2_img img {
		width: 80%;
	}

	.monitor01-2_txt::after {
		content: none;
	}

	.monitor01-2_txt p:nth-child(2) {
		font-size: 1.5rem;
	}

	.monitor02-1_con ul li {
		font-size: 1.5rem;
	}

	.monitor02-1_con ul {
		gap: 10px;
	}

	.monitor01-2_txt ul {
		grid-template-columns: repeat(1,1fr);
		background: #F4F7FC;
		padding: 15px;
	}
}

@media all and (max-width:450px){
	.monitor01-2_txt p:nth-child(1) {
		font-size: 2rem;
	}

	.monitor01-2_txt p:nth-child(2) {
		font-size: 1.5rem;
	}

	.monitor02-2_con ul {
		grid-template-columns: repeat(1,1fr);
	}

	.monitor02-2_con ul li p {
		font-size: 1.5rem;
	}
}


/* ==================================================
	제품소개 - 가로등기구(공통)
================================================== */
.streetlamp_con ul {
	display: grid;
	grid-template-columns: repeat(5,1fr);
	gap: 35px 25px;
	text-align: center;
}

.streetlamp_con ul li img {
	width: 100%;
}

.streetlamp_con ul li p {
	margin-top: 15px;
	font-weight: 400;
}

/* 모바일CSS */
@media all and (max-width:1200px) {
	.streetlamp_con ul {
		grid-template-columns: repeat(4,1fr);
	}
}

@media all and (max-width:1000px) {
	.streetlamp_con ul {
		gap: 25px 20px;
	}
}

@media all and (max-width:800px) {
	.streetlamp_con ul {
		grid-template-columns: repeat(3,1fr);
	}
}

@media all and (max-width:640px) {
	.streetlamp_con ul {
		grid-template-columns: repeat(2,1fr);
		gap: 15px 15px;
	}
}

@media all and (max-width:450px) {
	.streetlamp_con ul {
		grid-template-columns: repeat(1,1fr);
	}
}












/* ==================================================
	실적소개 - 적용사례
================================================== */
.list01 ul {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 35px;
	text-align: center;
}

.list01 ul li img {
	width: 100%;
}

.list01 ul li p {
	background:#F4F8FD;
	height: 90px;
    padding: 18px 25px;
	word-break: keep-all;
	line-height: 1.5;
	font-weight: 300;
	font-family: 'pretendard';
	margin-top: -5px;
	display: flex;
    justify-content: center;
    align-items: center;
}

.list01 ul li:hover {
	box-shadow: 15px 15px 15px rgba(222, 222, 222, 0.621);
}


/* 모바일CSS */
@media all and (max-width:1400px) {
	.list01 ul {
		gap: 25px;
	}
}

@media all and (max-width:1200px) {
	.list01 ul {
		gap: 20px;
	}

	.list01 ul li p {
		font-size: 1.6rem;
	}
}

@media all and (max-width:1000px) {
	.list01 ul {
		grid-template-columns: repeat(2,1fr);
	}
}

@media all and (max-width:640px) {
	.over-cover {
		display: block;
	}

	.list01 ul {
		grid-template-columns: repeat(1,1fr);
	}

	.list01 ul li p {
		height: 80px;
	}
} 


/* ==================================================
	커뮤니티 - Contcat us
================================================== */
.contact_image {
	width: 100%;
	margin-top: 50px;
	opacity: 0;
	transform: translateY(20px);
	-webkit-transform: translateY(20px);
	transition: all .6s cubic-bezier(0.42, 0.0, 0.58, 1.0);
	-webkit-transition: all .6s cubic-bezier(0.42, 0.0, 0.58, 1.0);
}

.contact_image.active {
	opacity: 1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
}

.contact_image .contact_img_box {
	position: relative;
}

.contact_image .contact_img_box img {
	width: 100%;
	box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
}


.contact_image.active .contact_img_box:after {
	left: -10px;
	top: -10px;
}

.contact {
	width: 100%;
	margin-top: 30px;
	background: url('../images/community/contact_bg01.jpg') 0 center no-repeat #e8e6e7;
}

.contact .txt {
	padding: 5% 3% 5% 46%;
}

.contact h2 {
	font-size: 36px;
	color: #000;
}

.contact .txt1 {
	width: 100%;
	font-size: 2rem;
	line-height: 32px;
	color: #333;
	padding: 10px 0;
	border-bottom: 1px solid #808080;
}

.contact .txt2 {
	margin: 2% 0;
}

.contact .txt2 li {
	font-size: 1.8rem;
	color: #333;
	line-height: 40px;
	padding-left: 46px;
}

.contact .txt2 li.tel {
	background: url('../images/icon/ic_tel.png') 0 50% no-repeat;
}

.contact .txt2 li.fax {
	background: url('../images/icon/ic_fax.png') 0 50% no-repeat;
}

.contact .txt2 li.email {
	background: url('../images/icon/ic_email.png') 0 50% no-repeat;
}

.contact .txt2 li.email a {
	color: #333;
}

.contact .txt3 {
	padding-top: 1%;
	font-size: 18px;
	color: #333;
}

/* 모바일CSS */
@media screen and (max-width:1023px) {
	.contact_image .contact_img_box:after {
		display: none;
	}
}

@media screen and (max-width:800px) {
	.contact_image {
		margin-top: 0;
	}

	.contact {
		height: auto;
		background: none;
	}

	.contact .txt {
		padding: 0;
	}

	.contact h2 {
		font-size: 18px;
		line-height: 20px;
	}

	.contact .txt1 {
		max-width: 100%;
		font-size: 1.7rem;
		line-height: 22px;
		padding: 8px 0 10px 0;
		background: none;
		border-bottom: 1px solid #aaaaac;
	}

	.contact .txt2 {
		margin: 10px 0;
	}

	.contact .txt2 li {
		font-size: 1.6rem;
		line-height: 38px;
		padding-left: 43px;
	}

	.contact .txt2 li.email a {

	}

	.contact .txt3 {
		font-size: 1.6rem;
	}
}