/* a 공통 */
.a {padding: 120px 0;}
.a h2.tit {font-size: 30px; position: relative; padding-left: 30px; margin-bottom: 30px;}
.a h2.tit::after {position: absolute; content: ''; width: 20px; height: 20px; left: 0; top: 50%; transform: translateY(-50%); border: 5px solid transparent; background-origin: border-box; background-clip: content-box, border-box; background-image: linear-gradient(#fff, #fff), linear-gradient(to left, #0e1d46 0%, #02aae9 100%); border-radius: 50%;}

@media (max-width: 960px){
	.a h2.tit {font-size: 24px;}
	.a h2.tit::after {width: 18px; height: 18px; border: 4px solid transparent;}
}

@media (max-width: 640px){
	.a h2.tit {font-size: 20px; padding-left: 20px;}
}
/* a 공통 */

/* 인사말 */
#a1 {max-width: 1400px; width: 100%; padding-top: 0; margin: 0 auto;}
#a1 > img {border-radius: 20px; margin-bottom: 40px; width: 100%;}
#a1 .greetbox h2 {font-size: 30px; margin-bottom: 30px; text-align: center;}
#a1 .greetbox h2 b {color: #02aae9;}
#a1 .greetbox p {font-size: 18px; line-height: 28px; font-weight: 400; text-align: center;}
#a1 .greetbox p span {display: block; text-align: right; margin-top: 50px; font-size: 20px; font-weight: 600;}
#a1 .greetbox p span b {font-size: 24px; font-weight: 800; margin-left: 10px;}

@media (max-width: 1200px){
	#a1 {padding: 0 2% 100px;}
}

@media (max-width: 960px){
	#a1 {padding: 0 2% 80px;}
	#a1 .greetbox h2 {font-size: 26px;}
	#a1 .greetbox p {font-size: 16px; line-height: 26px;}
	#a1 .greetbox p span {font-size: 18px;}
	#a1 .greetbox p span b {font-size: 20px;}
}
/* 인사말 */




/*경영이념*/
#a2 {max-width: 1400px; width: 100%; margin: 0 auto;}
#a2 > img {max-width: 1000px; width: 100%; margin: 0 auto 40px; display: block;}
#a2 ul li {width: 100%; display: flex; border: 1px solid #ddd; margin-bottom: 20px; padding: 30px; transition-duration: 0.3s; font-weight: 500; position: relative;}
#a2 ul li:last-child {margin-bottom: 0;}
#a2 ul li:hover {border-color: #5086ff; transition-duration: 0.3s;}
#a2 ul li span {width: 40px; height: 40px; border-radius: 50%;text-align: center; line-height: 40px; color: #fff; margin-right: 20px; background-color: #5086ff; font-weight: 600; position: absolute; font-size: 20px; top: 50%; transform: translateY(-50%);}
#a2 ul li p {font-size: 20px; word-break: keep-all; padding-left: 60px;}

@media (max-width: 1200px){
	#a2 {padding: 100px 2%}
}

@media (max-width: 960px){
	#a2 ul li {font-size: 18px;}
	#a2 ul li span {width: 30px; height: 30px; line-height: 30px; font-size: 18px}
	#a2 ul li p {font-size: 18px; padding-left: 40px;}
}

@media (max-width: 640px){
	#a2 ul li {padding : 20px;}
	#a2 ul li span {width: 25px; height: 25px; line-height: 25px; font-size: 16px;}
	#a2 ul li p {font-size: 14px;}
}
/*경영이념*/




/*사업연혁*/
#a3 {display:block; margin: 0 auto; width: 100%; max-width: 1400px;}
#a3_con{}
#a3_con div {width: 100%; margin: 0 auto 100px auto; position: relative; display: flex; flex-wrap: wrap; height: 100%;}
#a3_con ul {}

#a3_con ul.year {width: 35%; margin-right: 5%; position: sticky; top: calc(33.33% - 80px); align-self: flex-start;}
#a3_con ul.year li {margin-bottom: 100px;}
#a3_con ul.year li:last-child {margin-bottom: 0;}
#a3_con ul.year h1 {text-align: right; font-size: 60px; color: #000; margin: 10px 0;}
#a3_con ul.year img {width: 100%; border-radius: 30px;}
#a3_con ul.year_txt {width: 60%;} 
#a3_con ul.year_txt li {padding: 80px 20px; transition: all 0.3s; margin-bottom: 100px; border-top: 1px solid #000; border-bottom: 1px solid #000;}
#a3_con ul.year_txt li:last-child {margin-bottom: 0;}
#a3_con ul.year_txt li h2 {display: none;}
#a3_con ul.year_txt li p {font-size: 21px; line-height: 70px; font-weight: 600; color: #333;}
#a3_con ul.year_txt li p bb {font-weight: bold; padding-right: 20px;  color: #007ac7;}

@media (max-width: 1200px){
	#a3 {padding: 0 2%}
}

@media (max-width: 960px){
	#a3_con ul.year {display: none;}
	#a3_con ul.year_txt {width: 100%;}
	#a3_con ul.year_txt li p {font-size: 18px; line-height: 40px;}
}

@media (max-width: 640px){
	#a3_con div {margin: 0 auto;}
	#a3_con ul {padding-bottom: 50px;}
	#a3_con ul.year {display: none;}
	#a3_con ul.year_txt li {padding: 40px 20px; margin-bottom: 70px;}
	#a3_con ul.year_txt li h2 {display: block; font-size: 30px; margin-bottom: 20px; color: #000;}
	#a3_con ul.year_txt li p{font-size: 14px; line-height: 35px;}
	#a3_con ul.year_txt li p bb {font-size: 16px; padding-right: 10px;}
}
/*사업연혁*/





/*오시는길*/
#a4 {max-width: 1400px; width: 100%; padding-bottom: 0; margin: 0 auto;}
#a4 .map .root_daum_roughmap {border: 1px solid #ddd;}
#a4 .map .root_daum_roughmap .wrap_controllers {display: none;}
#a4 .map .root_daum_roughmap .map_border {display: none;}

#a4 .map .mapinfo {width: 100%; background-color: #0e1d46; display: flex; align-items: center; padding: 30px 50px;}
#a4 .map .mapinfo .conwrap {margin-left: 60px;}
#a4 .map .mapinfo .conwrap h2 {color: #fff; font-size: 26px; font-weight: 600;}
#a4 .map .mapinfo .conwrap ul {display: flex; margin-top: 15px;}
#a4 .map .mapinfo .conwrap ul li {font-size: 18px; color: #fff; opacity: .7; position: relative;}
#a4 .map .mapinfo .conwrap ul li:first-child {margin-right: 30px; padding-right: 30px;}
#a4 .map .mapinfo .conwrap ul li:first-child::after {position: absolute; content: ''; width: 1px; height: 80%; background-color: rgba(255,255,255,.7); top: 50%; transform: translateY(-50%); right: 0;}

@media (max-width: 1200px){
	#a4 {padding: 0 2%}
}

@media (max-width: 960px){
	#a4 .map .mapinfo .conwrap h2 {font-size: 24px;}
	#a4 .map .mapinfo .conwrap ul li {font-size: 16px;}
	#a4 .map .mapinfo .conwrap ul li:first-child {margin-right: 20px; padding-right: 20px;}
}

@media (max-width: 640px){
	#a4 .map .mapinfo {flex-direction: column; align-items: flex-start; padding: 30px;}
	#a4 .map .mapinfo img {margin-bottom: 20px; height: 25px;}
	#a4 .map .mapinfo .conwrap {margin-left: 0;}
	#a4 .map .mapinfo .conwrap h2 {font-size: 20px;}
	#a4 .map .mapinfo .conwrap ul li {font-size: 16px;}
}
/*오시는길*/








/* 맞춤의뢰 (OEM) */
#d1 {width: 100%; position: relative; overflow: hidden;}
#d1 .con .conwrap {max-width: 1400px; width: 100%; margin: 0 auto;}

#d1 .con1 {padding: 100px 0;}
#d1 .con1 h2 {font-size: 40px; text-align: center; line-height: 50px; margin-bottom: 20px;}
#d1 .con1 h2 span {color: #23bcf6;}
#d1 .con1 p.sub {font-size: 18px; text-align: center; color: #555; font-weight: 400; margin-bottom: 40px;}
#d1 .con1 p.sub span {position: relative; font-weight: 600;}
#d1 .con1 p.sub span::after {position: absolute; content: ''; width: 100%; height: 100%; background-color: #68d6ff; top: 0; left: 0; z-index: -1; opacity: .2;}
#d1 .con1 .con1_img {margin: 0 auto; max-width: 1400px; border-radius: 20px; overflow: hidden;}
#d1 .con1 .con1_img img {width: 100%;}

#d1 .con2 {padding: 100px 0; background-color: #f5f5f5;}
#d1 .con2 ul h3 {font-size: 40px; text-align: center; margin-bottom: 30px;}
#d1 .con2 ul h3 span {color: #23bcf6; font-weight: 700;}
#d1 .con2 ul li {background-color: #fff; padding: 30px; width: 700px; box-shadow: 5px 5px 15px rgba(0,0,0,.1); border-radius: 10px; margin: 0 auto 20px; position: relative;}
#d1 .con2 ul li:last-child {margin-bottom: 0;}
#d1 .con2 ul li span {position: absolute; width: 30px; height: 30px; background-color: #23bcf6; display: block; border-radius: 50%; text-align: center; line-height:30px; font-weight: 800; color: #fff; font-size: 20px; top: 50%; transform: translateY(-50%);}
#d1 .con2 ul li p {font-size: 18px; font-weight: 600; color: #333; padding-left: 40px;}

#d1 .con3 {padding: 100px 0; background-color: #f8fdff;}
#d1 .con3 .incon1 h2 {text-align: center; font-size: 40px; margin-bottom: 70px;}
#d1 .con3 .incon1 h2 span {color: #23bcf6;}
#d1 .con3 .incon1 ul {display: flex; }
#d1 .con3 .incon1 ul li {width: 49%; position: relative; display: flex; flex-direction: column; align-items: center;}
#d1 .con3 .incon1 ul li:first-child {border-right: 1px dashed #ddd; margin-right: 2%; padding-right: 2%;}
#d1 .con3 .incon1 ul li h3 {border: 1px solid #23bcf6; color: #23bcf6; font-size: 24px; padding: 5px 30px; border-radius: 20px; margin-bottom: 20px; font-weight: 600;}
#d1 .con3 .incon1 ul li p {font-size: 20px; text-align: center; line-height: 30px; font-weight: 500;}
#d1 .con3 .incon1 ul li p span {color: #23bcf6; font-weight: 600;}

#d1 .con4 {width: 100%; padding: 100px 0; background-color: #fffaec;}
#d1 .con4 .incon1 h3 {font-size: 40px; text-align: center; margin-bottom: 70px; font-weight: 700;}
#d1 .con4 .incon1 h3 span {font-weight: 700; color: #23bcf6;} 
#d1 .con4 .incon1 ul {display: flex; flex-wrap: wrap;}
#d1 .con4 .incon1 ul li {width: 24%; padding: 30px; background-color: rgba(0,0,0,0); height: 200px; position: relative; display: flex; align-items: flex-end; justify-content: flex-end; border-right: 1px dashed #ddd; border-bottom: 1px dashed #ddd;}
#d1 .con4 .incon1 ul li:nth-child(4n) {border-right: 0;}
#d1 .con4 .incon1 ul li:nth-child(5) {border-bottom: 0;}
#d1 .con4 .incon1 ul li:nth-child(6) {border-bottom: 0;}
#d1 .con4 .incon1 ul li:nth-child(7) {border-bottom: 0;}
#d1 .con4 .incon1 ul li:nth-child(8) {border-bottom: 0;}
#d1 .con4 .incon1 ul li img {height: 60px; width: auto; position: absolute; top: 30px; left: 30px;}
#d1 .con4 .incon1 ul li p {text-align: right; font-size: 18px; color: #28b4e9; font-weight: 400; line-height: 26px;}
#d1 .con4 .incon1 ul li p span {font-weight: 800;}
#d1 .con4 .incon1 .owl-dots {display: none;}

#d1 .con5 {padding: 100px 0;}
#d1 .con5 ul {display: flex; flex-wrap: wrap; justify-content: space-between;}
#d1 .con5 ul li {width: 24%; height: 300px; background-color: #fff; box-shadow: 5px 5px 15px rgba(0,0,0,.1); border-radius: 10px; margin-bottom: 1.5%; position: relative; padding: 30px;}
#d1 .con5 ul li:first-child {background-color: #0e1d46;}
#d1 .con5 ul li:first-child h3 {color: #fff; font-size: 30px; line-height: 40px; font-weight: 400;}
#d1 .con5 ul li:first-child h3 b {font-weight: 800;}
#d1 .con5 ul li h4 {font-size: 26px; font-weight: 800; color: #121212; margin-bottom: 20px;}
#d1 .con5 ul li p {font-size: 18px; font-weight: 500; line-height: 28px; color: #555;}
#d1 .con5 ul li img {position: absolute; bottom: 30px; right: 30px; height: 80px;}

#d1 .con6 {padding: 100px 0;}
#d1 .con6 h2 {font-size: 34px; text-align: center; margin-bottom: 70px;}
#d1 .con6 h2 span {color: #23bcf6;}
#d1 .con6 .inconwrap {display: flex; justify-content: space-between; flex-wrap: wrap;}
#d1 .con6 .inconwrap .incon {width: 49%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px; border-radius: 10px;}
#d1 .con6 .inconwrap .incon h3 {font-size: 26px; margin-bottom: 20px;}
#d1 .con6 .inconwrap .incon ul {width: 100%;}
#d1 .con6 .inconwrap .incon ul > h2 {margin-bottom: 20px; font-size: 24px;}
#d1 .con6 .inconwrap .incon ul li {border-radius: 10px; font-size: 20px; font-weight: 500; margin-bottom: 10px; padding: 15px 0;}
#d1 .con6 .inconwrap .incon ul li:last-child {margin-bottom: 0;}
#d1 .con6 .inconwrap .incon:nth-child(1), #d1 .con6 .inconwrap .incon:nth-child(2) {margin-bottom: 2%;}
#d1 .con6 .inconwrap .incon:nth-child(1), #d1 .con6 .inconwrap .incon:nth-child(4) {background-color: #eef8fd;}
#d1 .con6 .inconwrap .incon:nth-child(1) ul > h2, #d1 .con6 .inconwrap .incon:nth-child(4) ul > h2 {color: #2dbcff;}
#d1 .con6 .inconwrap .incon:nth-child(1) ul li, #d1 .con6 .inconwrap .incon:nth-child(4) ul li {background-color: #d6f1fd; color: #2dbcff}
#d1 .con6 .inconwrap .incon:nth-child(2), #d1 .con6 .inconwrap .incon:nth-child(3) {background-color: #fff9ee; }
#d1 .con6 .inconwrap .incon:nth-child(2) ul > h2, #d1 .con6 .inconwrap .incon:nth-child(3) ul > h2 {color: #eea823;}
#d1 .con6 .inconwrap .incon:nth-child(2) ul li, #d1 .con6 .inconwrap .incon:nth-child(3) ul li  {background-color: #ffebc5; color: #eea823}
#d1 .con6 > h4 {font-size: 40px; margin-top: 100px; text-align: center;}
#d1 .con6 > h4 b {color: #23bcf6; position: relative;}
#d1 .con6 > h4 b::after {position: absolute; content: ''; width: 100%; height: 60%; bottom: 0; left: 0; background-color: rgba(35, 188, 246, 0.15); z-index: -1;}

 .cswrap {position: fixed; bottom: 0; left: 0; transition-duration: 0.3s; opacity: 0; background:linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.9) 48.44%,#fff); width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; z-index: 1;}
.scrolled .cswrap {transition-duration: 0.3s; opacity: 1;}
.cswrap .inwrap {max-width: 1400px; margin: 0 auto; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center;}
.cswrap .inwrap h2 {font-size: 24px; font-weight: 600; color: #888;}
.cswrap .inwrap .csbtn {font-size: 20px; background-color: #02aae9; border-radius: 27px;}
.cswrap .inwrap .csbtn a {font-weight: 500; color: #fff; padding: 15px 30px; display: block;}
.cswrap .inwrap .csbtn:hover {background: linear-gradient(90deg, #354f96, #02aae9);}

@media screen and (max-width: 960px) {
	#d1 .con1 {padding: 70px 10px;}
	#d1 .con1 h2 {font-size: 30px; line-height: 40px;}
	#d1 .con1 p.sub {font-size: 16px;}

	#d1 .con2{padding: 50px 10px;}
	#d1 .con2 h2 {font-size: 28px; line-height: 1.3; word-break: keep-all;}
	#d1 .con2 ul h3 {font-size: 26px;}
	#d1 .con2 ul li{width: 100%;}

	#d1 .con3{padding: 50px 10px;;}
	#d1 .con3 .incon1 h2{font-size: 28px; line-height: 1.3; margin-bottom: 50px;word-break: keep-all;}
	#d1 .con3 .incon1 ul{flex-direction: column;}
	#d1 .con3 .incon1 ul li{width: 100%;}
	#d1 .con3 .incon1 ul li:first-child{margin: 0; padding: 0; padding-bottom: 30px; border-right: 0;}

	#d1 .con4 {padding: 70px 0;}
	#d1 .con4 .incon1 h3 {font-size: 24px;}
	#d1 .con4 .incon1 ul li {width: 50%;}
	#d1 .con4 .incon1 ul li:nth-child(2n) {border-right: 0;}
	#d1 .con4 .incon1 ul li:nth-child(5) {border-bottom: 1px dashed #95e2ff;}
	#d1 .con4 .incon1 ul li:nth-child(6) {border-bottom: 1px dashed #95e2ff;}


	#d1 .con5{padding: 50px 10px;}
	#d1 .con5 ul li{width: 47.8%; margin: 1%; height: auto; padding: 30px 150px 30px 30px;}

	#d1 .con6{padding: 50px 10px;;}
	#d1 .con6 h2{font-size:28px; line-height: 1.3; margin-bottom: 50px;word-break: keep-all;}
	#d1 .con6 .inconwrap{flex-direction: column;}
	#d1 .con6 .inconwrap .incon{width: 100%; margin-bottom: 30px;}
	#d1 .con6 .inconwrap .incon:last-child {margin-bottom: 0;}
	#d1 .con6 > h4 {font-size: 20px;}

	.cswrap .inwrap {padding: 0 2%;}
	.cswrap .inwrap h2 {font-size: 18px;}
	.cswrap .inwrap .csbtn a {font-size: 16px;}
}

@media screen and (max-width:640px) {
	#d1 .con2 h2 {font-size: 24px;}
	#d1 .con2 p.sub {font-size: 16px;}
	#d1 .con2 ul li p {font-size: 18px;}
	#d1 .con2 ul li span {width: 25px; height: 25px; font-size: 18px; line-height: 25px;}

	#d1 .con3 .incon1 h2 {font-size: 24px;}
	#d1 .con3 .incon1 ul li h3 {font-size: 20px;}
	#d1 .con3 .incon1 ul li p {font-size: 18px; line-height: 28px;}
	#d1 .con3 .incon1 {margin-bottom: 0;}

	#d1 .con4 .incon1 ul li {width: 100%; border-right: 0;}
	#d1 .con4 .incon1 ul li:nth-child(7) {border-bottom: 1px dashed #95e2ff;}

	#d1 .con5 ul li{width: 100%;}
	#d1 .con5 ul li:first-child h3 {font-size: 20px; line-height: 30px;}
	#d1 .con5 ul li h4 {font-size: 20px;}
	#d1 .con5 ul li p {font-size: 16px; line-height: 26px;}
	#d1 .con5 ul li img {height: 70px;}

	#d1 .con6 h2 {font-size: 24px;}
	#d1 .con6 .inconwrap .incon ul li {font-size: 16px;}

	.cswrap .inwrap {justify-content: center;}
	.cswrap .inwrap h2 {display: none;}
}
/* 맞춤의뢰 (ODM) */










@media screen and (max-width: 960px) {
		
/*	.content_area .photo_box .img { max-width:100%; text-align:center; display:block; float:none; clear:both}
	.content_area .photo_box .img img { width:100%}
	.content_area .photo_box .txt_wrap { width:100%; display:block; position:relative; clear:both}
	.content_area .photo_box .txt {max-width: 100%; float:none}*/
	
}