/*포트폴리오*/
#a1 {width: 100%;}
#a1 .titwrap {padding: 250px 0 50px; margin-bottom: 50px; border-bottom: 1px solid #ddd;}
#a1 .titwrap h2 {font-size: 70px; margin-bottom: 20px; position: relative; display: inline-block;}
#a1 .titwrap h2::after {position: absolute; content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #cd1f26; bottom: 15px; right: -20px;}
#a1 .titwrap p {font-size: 20px; color: #666; font-weight: 400; line-height: 34px;}

@media screen and (max-width: 960px) {
	#a1 .titwrap {margin-bottom: 30px; padding-bottom: 30px;}
	#a1 .titwrap h2 {font-size: 50px;}
	#a1 .titwrap p {font-size: 18px; line-height: 32px;}

}

@media screen and (max-width: 640px) {
	#a1 .titwrap {padding-top: 100px;}
	#a1 .titwrap h2 {font-size: 30px;}
	#a1 .titwrap p {font-size: 14px; line-height: 28px;}
	#a1 .titwrap p br {display: none;}
}
/*포트폴리오*/





/*견적문의*/
#b1 {width: 100%;}
#b1 .titwrap {padding: 250px 0 50px; margin-bottom: 50px; border-bottom: 1px solid #ddd;}
#b1 .titwrap h2 {font-size: 70px; margin-bottom: 20px; position: relative; display: inline-block;}
#b1 .titwrap h2::after {position: absolute; content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #cd1f26; bottom: 15px; right: -20px;}
#b1 .titwrap p {font-size: 20px; color: #666; font-weight: 400; line-height: 34px;}
#b1 .titwrap p span {color: #cd1f26;}

@media screen and (max-width: 960px) {
	#b1 .titwrap {margin-bottom: 30px; padding-bottom: 30px;}
	#b1 .titwrap h2 {font-size: 50px;}
	#b1 .titwrap p {font-size: 18px; line-height: 32px;}

}

@media screen and (max-width: 640px) {
	#b1 .titwrap {padding-top: 100px;}
	#b1 .titwrap h2 {font-size: 30px;}
	#b1 .titwrap p {font-size: 14px; line-height: 28px;}
	#b1 .titwrap p br {display: none;}
}
/*견적문의*/





/*보안서버 설치 이벤트*/
#b2 {width: 100%; margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid #ddd;}
#b2 .titwrap {padding: 250px 0 0; margin-bottom: 20px;}
#b2 .titwrap h2 {font-size: 70px; margin-bottom: 20px; position: relative; display: inline-block;}
#b2 .titwrap h2::after {position: absolute; content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #cd1f26; bottom: 15px; right: -20px;}
#b2 .titwrap p {font-size: 20px; color: #666; font-weight: 400; line-height: 34px;}
#b2 .titwrap p span {color: #cd1f26;}

#b2 .process {display: flex; flex-direction: column; justify-content: space-between;}
#b2 .process .p_wrap {position: relative; display: flex; justify-content: space-between;}
#b2 .process .p_wrap::after {position: absolute; content: ''; width: 100%; height: 1px; background-color: #ddd; top: 50%; left: 0; transform: translateY(-50%); z-index: -1;}
#b2 .process .p_wrap:first-child {margin-bottom: 50px;}
#b2 .process .p_wrap .p_con {border: 1px solid #eee; background-color: #f7f7f7; width: 200px; height: 200px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; position: relative;}
#b2 .process .p_wrap .p_con h2 {font-size: 24px; color: #cd1f26; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ddd; width: 50%; text-align: center; margin-top: 50px;}
#b2 .process .p_wrap .p_con p {font-size: 16px; line-height: 26px; text-align: center; font-weight: 400; color: #666;}


@media screen and (max-width: 960px) {
	#b2 .titwrap h2 {font-size: 50px;}
	#b2 .titwrap p {font-size: 18px; line-height: 32px;}

	#b2 .process .p_wrap .p_con {width: 180px; height: 180px; justify-content: center;}
	#b2 .process .p_wrap .p_con h2 {margin-top: 0; font-size: 20px;}
	#b2 .process .p_wrap .p_con p {font-size: 15px; line-height: 25px;}

}

@media screen and (max-width: 640px) {
	#b2 .titwrap {padding-top: 100px;}
	#b2 .titwrap h2 {font-size: 30px;}
	#b2 .titwrap p {font-size: 14px; line-height: 28px;}
	#b2 .titwrap p br {display: none;}

	#b2 .process .p_wrap {flex-direction: column;}
	#b2 .process .p_wrap::after {display: none;}
	#b2 .process .p_wrap:first-child {margin-bottom: 0;}
	#b2 .process .p_wrap .p_con {width: 100%; height: auto; border-radius: 0; margin-bottom: 10px; padding: 10px;}
	#b2 .process .p_wrap:last-child .p_con:last-child {margin-bottom: 0;}
	#b2 .process .p_wrap .p_con h2 {font-size: 18px; padding-bottom: 0; border-bottom: 0;}
	#b2 .process .p_wrap .p_con p {font-size: 14px; line-height: 24px;}
}
/*보안서버 설치 이벤트*/





/*자주묻는질문*/
#c1 {width: 100%;}
#c1 .titwrap {padding: 250px 0 50px; margin-bottom: 50px; border-bottom: 1px solid #ddd;}
#c1 .titwrap h2 {font-size: 70px; margin-bottom: 20px; position: relative; display: inline-block;}
#c1 .titwrap h2::after {position: absolute; content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #cd1f26; bottom: 15px; right: -20px;}
#c1 .titwrap p {font-size: 20px; color: #666; font-weight: 400; line-height: 34px;}
#c1 .titwrap p span {color: #cd1f26;}

@media screen and (max-width: 960px) {
	#c1 .titwrap {margin-bottom: 30px; padding-bottom: 30px;}
	#c1 .titwrap h2 {font-size: 50px;}
	#c1 .titwrap p {font-size: 18px; line-height: 32px;}

}

@media screen and (max-width: 640px) {
	#c1 .titwrap {padding-top: 100px;}
	#c1 .titwrap h2 {font-size: 30px;}
	#c1 .titwrap p {font-size: 14px; line-height: 28px;}
	#c1 .titwrap p br {display: none;}
}
/*자주묻는질문*/





/*이벤트*/
#d1 {width: 100%;}
#d1 .titwrap {padding: 250px 0 50px; margin-bottom: 50px; border-bottom: 1px solid #ddd;}
#d1 .titwrap h2 {font-size: 70px; margin-bottom: 20px; position: relative; display: inline-block;}
#d1 .titwrap h2::after {position: absolute; content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #cd1f26; bottom: 15px; right: -20px;}
#d1 .titwrap p {font-size: 20px; color: #666; font-weight: 400; line-height: 34px;}
#d1 .titwrap p span {color: #cd1f26;}

@media screen and (max-width: 960px) {
	#d1 .titwrap {margin-bottom: 30px; padding-bottom: 30px;}
	#d1 .titwrap h2 {font-size: 50px;}
	#d1 .titwrap p {font-size: 18px; line-height: 32px;}

}

@media screen and (max-width: 640px) {
	#d1 .titwrap {padding-top: 100px;}
	#d1 .titwrap h2 {font-size: 30px;}
	#d1 .titwrap p {font-size: 14px; line-height: 28px;}
	#d1 .titwrap p br {display: none;}
}
/*이벤트*/





/*회사소개*/
#e1 {width: 100%;}
#e1 .titwrap {padding: 250px 0 50px; margin-bottom: 50px; border-bottom: 1px solid #ddd;}
#e1 .titwrap h2 {font-size: 70px; margin-bottom: 20px; position: relative; display: inline-block;}
#e1 .titwrap h2::after {position: absolute; content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #cd1f26; bottom: 15px; right: -20px;}
#e1 .titwrap p {font-size: 20px; color: #666; font-weight: 400; line-height: 34px;}
#e1 .titwrap p span {color: #cd1f26;}

#e1 .con {margin-bottom: 80px;}
#e1 .con:last-child {margin-bottom: 0;}
#e1 .con > h2.title {font-size: 36px; margin-bottom: 50px; padding-bottom: 20px; position: relative;}
#e1 .con > h2.title::after {position: absolute; content: ''; width: 20px; height: 4px; background-color: #cd1f26; bottom: 0; left: 0;}
#e1 .con1 ul {display: flex; flex-wrap: wrap;}
#e1 .con1 ul li {width: 25%; display: flex; flex-direction: column; align-items: flex-start; padding: 30px;border-right: 1px dashed #ddd;}
#e1 .con1 ul li:last-child {border-right: 0;}
#e1 .con1 ul li span {font-size: 16px; margin-bottom: 20px; color: #cd1f26; font-weight: 600;}
#e1 .con1 ul li img {height: 70px; margin-bottom: 20px;}
#e1 .con1 ul li h2 {font-size: 20px; margin-bottom: 10px;}
#e1 .con1 ul li p {font-size: 16px; line-height: 26px; color: #666; font-weight: 400;}

#e1 .con2 .inbox {position: relative;}
#e1 .con2 .inbox .progress {width: 2px; background-color: #f5f5f5; height: 100%; position: absolute; left: 24px;}
#e1 .con2 .inbox .progress .bar {background-color: #cd1f26; height: 0; width: 100%; transition: height 0.4nns ease-in-out;}
#e1 .con2 .inbox .boxwrap .box {display: flex; align-items: center; margin-bottom: 120px; position: relative;}
#e1 .con2 .inbox .boxwrap .box:last-child {margin-bottom: 0;}
#e1 .con2 .inbox .boxwrap .box .num {font-size: 24px; font-weight: 600; color: #fff; background-color: #121212; width: 50px; height: 50px; border-radius: 50%; text-align: center; line-height: 50px; margin-right: 10px; position: relative;}
#e1 .con2 .inbox .boxwrap .box .num::after {position: absolute; content: ''; width: 60px; height: 60px; background-color: #fff; border-radius: 50%; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#e1 .con2 .inbox .boxwrap .box .txt h2 {font-size: 24px; color: #121212; margin-bottom: 10px;}
#e1 .con2 .inbox .boxwrap .box .txt p {font-size: 18px; font-weight: 400; color: #666;}

#e1 .con3 .boxwrap {display: flex; justify-content: space-between;}
#e1 .con3 .boxwrap .box {width: 49%; border-top: 2px solid #121212; border-bottom: 2px solid #121212; padding: 30px;}
#e1 .con3 .boxwrap .box h3 {font-size: 24px; position: relative; padding-left: 20px; margin-bottom: 20px;}
#e1 .con3 .boxwrap .box h3 span {color: #cd1f26;}
#e1 .con3 .boxwrap .box h3::after {position: absolute; content: ''; width: 10px; height: 10px; border-radius: 2px; left: 0; background-color: #cd1f26;}
#e1 .con3 .boxwrap .box li {font-size: 18px; color: #666; line-height: 28px; margin-bottom: 10px; font-weight: 400; position: relative; padding-left: 15px;}
#e1 .con3 .boxwrap .box li:last-child {margin-bottom: 0;}
#e1 .con3 .boxwrap .box li::after {position: absolute; content: ''; width: 4px; height: 4px; background-color: #666; left: 0; top: 11px; border-radius: 50%;}

#e1 .con4 .mapwrap {position: relative;}
#e1 .con4 .mapwrap .mapinfo {position: absolute; top: 0; left: 50px; z-index: 2; background-color: #cd1f26; padding: 40px;}
#e1 .con4 .mapwrap .mapinfo h3 img {height: 30px; position: relative; margin-bottom: 30px;}
#e1 .con4 .mapwrap .mapinfo li {display: flex; align-items: center; position: relative; margin-bottom: 15px;}
#e1 .con4 .mapwrap .mapinfo li:last-child {margin-bottom: 0;}
#e1 .con4 .mapwrap .mapinfo li img {filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(16deg) brightness(146%) contrast(105%); height: 20px; position: absolute;}
#e1 .con4 .mapwrap .mapinfo li p {font-size: 18px; font-weight: 400; color: #fff; width: 100%; margin-left: 50px; opacity: .7;}
#e1 .con4 .mapwrap .mapbg {padding-top: 50px;}
#e1 .con4 .mapwrap .mapbg .root_daum_roughmap_landing {border: 1px solid #ddd;}
#e1 .con4 .mapwrap .mapbg .root_daum_roughmap .wrap_controllers {display: none;}
#e1 .con4 .mapwrap .mapbg .root_daum_roughmap .map_border {display: none;}

@media screen and (max-width: 960px) {
	#e1 .titwrap {margin-bottom: 30px; padding-bottom: 30px;}
	#e1 .titwrap h2 {font-size: 50px;}
	#e1 .titwrap p {font-size: 18px; line-height: 32px;}

	#e1 .con {margin-bottom: 60px;}
	#e1 .con > h2.title {margin-bottom: 40px; font-size: 30px;}
	#e1 .con1 ul li {border-bottom: 1px dashed #ddd; width: 50%;}
	#e1 .con1 ul li:nth-child(2n) {border-right: 0;}
	#e1 .con1 ul li:nth-child(n+3):nth-child(-n+4) {border-bottom: 0;}
	#e1 .con1 ul li img {height: 60px;}

	#e1 .con2 .inbox .boxwrap .box {flex-direction: column; align-items: flex-start; padding-left: 60px; margin-bottom: 100px;}
	#e1 .con2 .inbox .boxwrap .box::after {position: absolute; content: ''; width: 20px; height: 20px; left: 15px; top: 50%; transform: translateY(-50%); background-color: #cd1f26; border-radius: 50%; border: 3px solid #fff;}
	#e1 .con2 .inbox .boxwrap .box .num::after {display: none;}
	#e1 .con2 .inbox .boxwrap .box .txt h2 {font-size: 20px;}
	#e1 .con2 .inbox .boxwrap .box .txt p {font-size: 16px; line-height: 26px;}

	#e1 .con3 .boxwrap .box h3 {font-size: 20px; margin-bottom: 15px;}
	#e1 .con3 .boxwrap .box li {font-size: 16px; line-height: 26px;}

	#e1 .con4 .mapwrap .mapinfo {position: static; padding: 30px;}
	#e1 .con4 .mapwrap .mapinfo h3 img {height: 25px;}
	#e1 .con4 .mapwrap .mapinfo li {margin-bottom: 10px;}
	#e1 .con4 .mapwrap .mapinfo li img {height: 18px;}
	#e1 .con4 .mapwrap .mapinfo li p {font-size: 16px;}
	#e1 .con4 .mapwrap .mapbg {padding-top: 0;}
	#e1 .con4 .mapwrap .mapbg .wrap_map {height: 500px !important;}

}

@media screen and (max-width: 640px) {
	#e1 .titwrap {padding-top: 100px;}
	#e1 .titwrap h2 {font-size: 30px;}
	#e1 .titwrap p {font-size: 14px; line-height: 28px;}
	#e1 .titwrap p br {display: none;}

	#e1 .con {margin-bottom: 50px;}
	#e1 .con > h2.title {margin-bottom: 30px; font-size: 24px;}
	#e1 .con1 ul li {width: 100%; border-right: 0; padding: 20px;}
	#e1 .con1 ul li:nth-child(3) {border-bottom: 1px dashed #ddd;}
	#e1 .con1 ul li:last-child {border-bottom: 0;}
	#e1 .con1 ul li img {height: 50px;}
	#e1 .con1 ul li p {font-size: 14px; line-height: 24px;}

	#e1 .con2 .inbox .boxwrap .box {margin-bottom: 80px;}
	#e1 .con2 .inbox .boxwrap .box::after {width: 15px; height: 15px; left: 17px; border: 2px solid #fff;}
	#e1 .con2 .inbox .boxwrap .box .txt h2 {font-size: 18px;}
	#e1 .con2 .inbox .boxwrap .box .txt p {font-size: 14px; line-height: 24px;}

	#e1 .con3 .boxwrap {flex-direction: column;}
	#e1 .con3 .boxwrap .box {width: 100%; margin-bottom: 20px; padding: 20px;}
	#e1 .con3 .boxwrap .box:last-child {margin-bottom: 0;}
	#e1 .con3 .boxwrap .box h3 {font-size: 18px;}
	#e1 .con3 .boxwrap .box h3::after {width: 8px; height: 8px;}
	#e1 .con3 .boxwrap .box li {font-size: 14px; line-height: 24px; padding-left: 10px;}
	#e1 .con3 .boxwrap .box li::after {width: 3px; height: 3px;}

	#e1 .con4 .mapwrap .mapinfo {padding: 20px;}
	#e1 .con4 .mapwrap .mapinfo h3 img {height: 20px; margin-bottom: 20px;}
	#e1 .con4 .mapwrap .mapinfo li {margin-bottom: 5px;}
	#e1 .con4 .mapwrap .mapinfo li img {height: 16px;}
	#e1 .con4 .mapwrap .mapinfo li p {font-size: 14px; line-height: 24px;}
	#e1 .con4 .mapwrap .mapbg .wrap_map {height: 400px !important;}
}
/*회사소개*/