/* 사업소개 */

.tab {width: 100%; border: 1px #333 solid; height: 51px;}
.tab li {width: 33.333%;height: 50px; float: left; text-align:center;line-height:50px;border-right:1px solid #333;}
.tab li:nth-child(3){border-right:0;}
.tab li a{width:100%;color:#999;}
.tab li.on {background: #333;}
.tab li.on a{color:#fff;font-weight:700;}




.bus01 .text_img {display: block; background: url(../images/business01_img01.jpg); height: 300px; color: #fff; text-align: center; font-size: 22px; padding-top: calc((300px/2) - 30px);word-break: keep-all;}
.bus01 .des{margin-top:30px;color:#000;line-height: 30px;margin-bottom:90px;}

.bus02 .img01{margin-bottom:90px;position: relative;}
.bus02 .img01.left{left: -310px; max-width: 1920px;}
.bus02 .img01.left.pc{position: relative; left: -310px; max-width: 1920px;}
.bus02 .img01.left.mobile{display:none}
.bus02 .tx01{margin-top:90px;}
.bus02 .tx02{overflow:hidden;margin-bottom:80px;}
.bus02 .tx02 div{width: calc((100% - 100px)/2); float:left;}
.bus02 .tx02 .sm_tit{margin-bottom:50px;}
.bus02 .tx02 .left{margin-right:100px;}
.bus02 .tx02 .right ul li{float:left;width:calc((100% - 50px)/3);height:50px;line-height:50px;background:#f0f0f0;border: 1px solid #999999; border-radius: 25px;text-align:center; }
.bus02 .tx02 .right ul li:nth-child(1){margin-left:30px;}
.bus02 .tx02 .right ul li:nth-child(2){margin:0 10px;}

.bus02 .tx02 .p{color:#333;text-align:center;line-height:1.8; word-break: keep-all; font-size: 16px;}
.bus02 .robot_ul{width:100%;text-align:center; overflow:hidden;}
.bus02 .robot_ul b{display:block;width:100%;margin:20px 0 16px 0;color:#000;font-size: 22px;}
.bus02 .robot_ul p{margin-bottom:16px;color:#666;}
.bus02 .robot_ul li{float:left;width:calc((100% - 100px)/3);}
.bus02 .robot_ul li:nth-child(2){margin: 0 50px;}
.bus02 .robot_ul li > ul {width:100%; height:120px;border-radius:10px;background:#f5f5f5;padding: 0 46px;}
.bus02 .robot_ul li > ul > li{position:relative;width:100%; text-align:left;margin:0!important;font-weight:300; color:#333333; word-break: keep-all;}
.bus02 .robot_ul li > ul > li:after{position:absolute; display:block; content:''; top:8px; left:-20px; width:5px; height:5px; background:#999;border-radius:5px;}
.bus02 .robot_ul li:nth-child(1) > ul,
.bus02 .robot_ul li:nth-child(3) > ul{ padding: 36px 46px; }
.bus02 .robot_ul li:nth-child(2) > ul{padding: 20px 46px;}
.bus02 .tx03, .bus02 .tx04{margin-top:90px;}


.bus0202 .img01{margin-top:90px;}
.bus0202 .tx01{margin-top:90px;margin-bottom:150px;}
.bus0201 .dark_p, .bus0202 .tx01 p {margin-top: -20px;}
.bus0201 .dark_p, .bus0202 .tx01 p{color:#131313;}

.contents.bus0201.fi{min-height:170px;padding-top:0;padding-bottom:0;}
.contents.bus0201.sec{padding-top:150px;}




.business02-wr > dl{ display: table; width: 100%; table-layout: fixed;}
.business02-wr > dl > dt{ position: relative; width: 150px; display: table-cell; padding: 72px 0; vertical-align: middle; background-color: #3f89ba; text-align: center;  color: #fff; font-size: 18px; line-height: 2; font-weight: 600;}
.business02-wr > dl > dt span{ display: block;}
.business02-wr > dl:nth-child(2) > dt{ background-color: #0a4d7a; padding:72px 0 0; }
.business02-wr > dl:nth-child(2) > dt::before{ content: ''; display: block; height: 72px; background: url(../images/business_aw1.jpg); width: 100%; position: absolute; top: 0; left: 0;}
.business02-wr > dl:nth-child(3) > dt::before{ content: ''; display: block; height: 72px; background: url(../images/business_aw2.jpg); width: 100%; position: absolute; top: 0; left: 0;}
.business02-wr > dl:nth-child(3) > dt::after{ content: ''; display: block; height: 72px; background: url(../images/business_aw3.jpg); width: 100%; position: absolute; bottom: 0; left: 0;}
.business02-wr > dl:nth-child(3) > dt{ background-color: #242749; padding:72px 0; }
.business02-wr > dl > dd{ display: table-cell; padding: 0 0 0 20px; vertical-align: top;}
.business02-wr > dl > dd .itm{ border: #dadada 1px solid; padding: 20px 40px; background-color: #fff;}
.business02-wr > dl > dd .itm + .itm{ margin-top: 20px;}
.business02-wr > dl > dd h5{ color: #3f89ba; font-size: 25px; font-weight: 600; margin: 0 0 20px 0;}
.business02-wr > dl > dd h5 span{ display: inline-block; font-size: 18px; font-weight: 400; margin-left: 1rem;}
.business02-wr > dl > dd ul > li{ position: relative; padding: 0 0 0 1rem; color: #222; font-weight: 600; margin: 4px 0; line-height: 2;}
.business02-wr > dl > dd ul > li::before{ content: ''; display: block ; width: 5px; height: 5px; border-radius: 50%; background-color: #999; position: absolute; top: 15px; left: 0;}
.business02-wr > dl > dd ul > li p{ font-weight: 400;}
.business02-wr > dl:nth-child(1) > dd .itm:nth-child(1) ul::after{ content: ''; display: block ;clear: both;}
.business02-wr > dl:nth-child(1) > dd .itm:nth-child(1) ul > li{ float:left; width: 33.3%;}
.business02-wr > dl:nth-child(2) > dd{ padding-top: 30px;}
.business02-wr > dl:nth-child(3) > dd{ padding-top: 20px;}
.business02-wr .tx01{ position: relative; text-align: center; margin-bottom: 30px;}
.business02-wr .tx01::before{ content: ''; position: absolute; display: block; width:90px; height: 2px; top: 50%; left: 50%; margin:-1px 0 0 -260px; border-top: #999 2px dotted;}
.business02-wr .tx01::after{ content: ''; position: absolute; display: block; width:90px; height: 2px; top: 50%; right: 50%; margin:-1px -260px 0 0; border-top: #999 2px dotted;}
.business02-wr .tx01 b{ display: inline-block; height: 50px; line-height: 50px; color: #fff; font-size: 20px; padding: 0 50px; border-radius: 50px; background-color: #666;}
.business02-wr .tx02{ position: relative; text-align: center; }
.business02-img{ text-align: center;}

.business05-bx01{ border: #a6c2d0 1px solid; padding: 50px 10px; }
.business05-bx01 h5{ text-align: center; color: #373737; font-size: 24px; font-weight: 600; margin-bottom: 30px;}
.business05-bx01 .thumb01{ text-align: center;}
.business05-bx01 .bum{ margin: 120px 0 0; padding: 0 80px;}
.business05-bx01 .bum p{ display: inline-block;}
.business05-bx01 .bum p + p{ margin-left: 50px;}
.business05-bx01 .bum p span{ font-size: 14px;}
.business05-bx01 .bum p::before{ content: ''; display: inline-block; width: 30px; height: 30px; vertical-align: -8px; margin-right: 1rem; }
.business05-bx01 .bum p.yellow::before{ background-color: #e9a420;}
.business05-bx01 .bum p.green::before{ background-color: #749381;}
.business05-bx01 .bum p.blue::before{ background-color: #0e6ca9;}
.business05-bx01 .chart-bx{ display: table; width: 100%; }
.business05-bx01 .chart-bx > li{ display: table-cell; vertical-align: bottom; text-align: center; width: 33.3%;}

.business05-bx02::after{ content: ''; display: block; clear: both; }
.business05-bx02 > li{ width: 296px; border: #a6c2d0 1px solid; margin: 0 0 10px 5px; float: left; padding: 25px 15px;}
.business05-bx02 > li:nth-child(4n+1){ margin-left: 0; clear: both;}
.business05-bx02 > li b{ display: block ;font-size: 22px; color: #222; position: relative; padding-bottom: 30px; margin-bottom: 30px;}
.business05-bx02 > li b::after{ content: ''; display: block; width: 30px; height: 2px; position: absolute; bottom: 0; left: 0; background-color: #0e6ca9;}
.business05-bx02 > li div{ font-size: 1.05em; color: #333; line-height: 1.8; letter-spacing: -.05em;}


.loadmap-tx01{ margin-bottom: 140px;}
.loadmap-tx01 > ul > li{position: relative;padding: 10px 0 0 230px;} 
.loadmap-tx01 > ul > li + li{ margin-top: 80px;}
.loadmap-tx01 > ul > li::before{ content: ''; position: absolute; top: 25px; left: 130px; display: block; width: 80px; height: 2px; border-top: #d0d0d0 2px dotted;}
.loadmap-tx01 > ul > li h5{ position: absolute; top: 0; left: 0; color: rgba(235,158,10,.7); font-size: 50px; line-height: 1; width: 125px; text-align: center;}
.loadmap-tx01 > ul > li .tx01{ color: #333; font-size: 22px; font-weight: 600;}
.loadmap-tx01 > ul > li .tx02{ margin-top: 25px;}
.loadmap-tx01 > ul > li .tx02 span{ position: relative; display: inline-block;}
.loadmap-tx01 > ul > li .tx02 span + span{ margin-left: 18px; padding-left: 18px;}
.loadmap-tx01 > ul > li .tx02 span + span::before{ content: ''; display: block; width: 1px; height: 10px; background-color: #666; position: absolute; top: 50%; left: 0; margin-top: -5px;}
.loadmap-tx01 > ul > li .tx03{ margin-top: 30px;}
.loadmap-tx01 > ul > li .tx03::after{ content: ''; display: block; clear: both;}
.loadmap-tx01 > ul > li .tx03 .cy{ position: relative; border: #e6e6e6 1px solid; width: 230px; height: 230px; border-radius: 50%; background-color: #fff; display: table; float: left;}
.loadmap-tx01 > ul > li .tx03 .cy + .cy{ margin-left: 80px;}
.loadmap-tx01 > ul > li .tx03 .cy .inbx{ display: table-cell; vertical-align: middle; text-align: center; padding: 0 2rem;}
.loadmap-tx01 > ul > li .tx03 .cy + .cy .inbx::after{ content: ''; position: absolute; top: 50%; left: -50px; display: block; width: 20px; height: 20px; background-color: #e3e3e3; border-radius: 50%;}
.loadmap-tx01 > ul > li .tx03 .cy b{ display: block; color: #333; font-size: 20px; margin-bottom: 14px;}
.loadmap-tx01 > ul > li .tx03 .cy ul > li{ font-size: 14px; letter-spacing: -.05em;}
.loadmap-tx01 > ul > li .tx03 .cy ul > li + li{ margin-top: 14px;}

.loadmap-tx02{ position: relative; }
.loadmap-tx02::before{ content: ''; position: absolute; top: 25px; bottom: 0; left: 50%; width: 1px; background-color: #eee;}
.loadmap-tx02 > ul > li{ position: relative;}
.loadmap-tx02 > ul > li + li{ margin-top: 80px;}
.loadmap-tx02 > ul > li::after{ content: ''; clear: both; display: block;}
.loadmap-tx02 > ul > li .y{ position: relative; float: left; width: 50%; text-align: right; padding: 0 140px 0 0;}
.loadmap-tx02 > ul > li .y::after{ content: ''; display: block; width: 80px; height: 2px; position: absolute; top: 25px; right: 30px; border-top: #d0d0d0 2px dotted;}
.loadmap-tx02 > ul > li .y h4{ color: #0e6ca7;}
.loadmap-tx02 > ul > li .y h4 b{ display: block; font-size: 40px;}
.loadmap-tx02 > ul > li .y h4 span{ font-size: 25px;}
.loadmap-tx02 > ul > li .tx02{ float: right; width: 50%; padding-top: 15px;}
.loadmap-tx02 > ul > li .tx02 > li{ position: relative; padding: 0 0 0 140px; color: #333;}
.loadmap-tx02 > ul > li .tx02 > li + li{ margin-top: 30px;}
.loadmap-tx02 > ul > li .tx02 > li p + p{ margin-top: 10px;}
.loadmap-tx02 > ul > li .tx02 > li .date{ position: absolute; top:0; left: 50px; color: #999; display: inline-block;}
.loadmap-tx02 > ul > li .tx02 > li::before{ content: ''; display: block; width: 6px; height: 6px; background-color: #ccc; border-radius: 50%; position: absolute; top: 10px; left: -2px;}
.loadmap-tx02 > ul > li .tx02 > li:first-child::before{ width: 12px; height: 12px; border: #eca215 2px solid; background-color: #fff; margin: -3px 0 0 -3px;}
.loadmap-tx02 > ul > li .tx01{ margin-top: 35px;}
.loadmap-tx02 > ul > li .tx01 > li{ color: #999; font-size: 14px; }
.loadmap-tx02 > ul > li .tx01 > li b{ display: block;}
.loadmap-tx02 > ul > li .tx01 > li + li{ margin-top: 30px;}
.loadmap-tx02 > ul > li:nth-child(even) .y{ float: right; padding: 0 0 0 140px; text-align: left;}
.loadmap-tx02 > ul > li:nth-child(even) .y::after{ left: 30px; right: auto;}
.loadmap-tx02 > ul > li:nth-child(even) .tx02{ float: left;}
.loadmap-tx02 > ul > li:nth-child(even) .tx02 > li{ text-align: right; padding: 0 140px 0 0;}
.loadmap-tx02 > ul > li:nth-child(even) .tx02 > li::before{ left: auto; right: -3px;}
.loadmap-tx02 > ul > li:nth-child(even) .tx02 > li:first-child::before{ margin: -3px -3px 0 0;}
.loadmap-tx02 > ul > li:nth-child(even) .tx02 > li .date{ left: auto; right: 50px;}


@media screen and (max-width:1300px){
	.bus01 .text_img {padding: 0 60px;padding-top: calc((300px/2) - 20px);}

	.bus02 .img01 {margin-bottom: 60px; position: relative; max-width: 100%;}
	.bus02 .img01.left {left: 0px; max-width: 100%;}
	.bus02 .img01.left.pc{display:none;}
	.bus02 .img01.left.mobile{display:block;width: 100%;}

}

@media screen and (max-width:1023px){
	.bus01 .text_img {padding: 0 60px;padding-top: calc((300px/2) - 40px); font-size: 1.8rem;}

	.bus02 .tx02 .right ul li {float:none;width:54%;margin: 10px auto!important;}
	.bus02 .robot_ul li {float: left;width: calc((100% - 100px)/2);}
	.bus02 .robot_ul li:nth-child(3){margin-top:20px;}
	.bus02 .img01.left {margin-bottom:0px;}
}


@media screen and (min-width:1024px) and (max-width:1200px){ 

    .business05-bx02 > li{ width: 24.25%; margin-left: 1%; padding: 1rem;}
    .business05-bx02 > li:nth-child(4n+1){ margin-left: 0;}
}

@media screen and (min-width:641px) and (max-width:1023px){ 

	.loadmap-tx01 > ul > li .tx03 .cy{ width: 200px; height: 200px; margin-right: 20px; margin-bottom: 20px;}
    .loadmap-tx01 > ul > li .tx03 .cy + .cy{ margin-left: 0;}
    .loadmap-tx01 > ul > li .tx03 .cy + .cy .inbx::after{ display: none;}

    .business02-wr > dl:nth-child(1) > dd .itm:nth-child(1) ul > li{ float: none; width: 100%;}
   
    .business05-bx01 .chart-bx > li{ padding: 0 1rem;}
    .business05-bx02 > li{ width: 49%; margin-left: 2%; padding: 1rem;}
    .business05-bx02 > li:nth-child(2n+1){ margin-left: 0;}
}
@media screen and (max-width:767px){

	.bus01 .des { margin-top: 30px; line-height: 2.4rem;}

	.bus02 .tx01 {margin-top: 60px;}

	.bus02 .robot_ul li{width:100%; margin: 0!important; margin-top:2rem!important;}
	.bus02 .robot_ul li > ul{height:94px;}
	.bus02 .tx02 .left,.bus02 .tx02 div {float:none;margin: 0; width:100%;}
	.bus02 .tx02 div{margin-top:3rem; }
	.bus02 .tx02{margin-bottom:2rem;}
	.bus02 .tx02 .sm_tit {margin-bottom: 30px;}
	.bus02 .robot_ul li:nth-child(1) > ul,
	.bus02 .robot_ul li:nth-child(3) > ul{ padding: 26px 46px; }
	.bus02 .robot_ul li:nth-child(2) > ul{padding: 16px 46px;}
	.bus02 .robot_ul b {margin: 20px 0 10px 0; font-size: 1.6rem;}
	.bus02 .robot_ul p { margin-bottom: 12px;}
	.bus0201 .dark_p, .bus0202 .tx01 p {margin-top: -10px;}
	.bus0202 .img01 {margin-top: 60px;}
	.bus0202 .tx01 {margin-top: 60px; margin-bottom: 90px;}
}


@media screen and (max-width:640px){
	.bus01 .text_img {padding: 0 60px;padding-top: calc((300px/2) - 60px);}


	.contents.bus0201.fi {min-height: 100px; padding: 0px;}

	.loadmap-tx01{ margin-bottom: 5rem;}
    .loadmap-tx01 > ul > li{ padding: 0;}
    .loadmap-tx01 > ul > li + li{ margin-top: 3rem;}
    .loadmap-tx01 > ul > li h5{ position: relative; width: 100%; font-size: 2rem; text-align: left; margin-bottom: 1rem;}
    .loadmap-tx01 > ul > li h5 br{ display: none;}
    .loadmap-tx01 > ul > li::before{ display: none;}
    .loadmap-tx01 > ul > li .tx01{ font-size: 1.8rem;}
    .loadmap-tx01 > ul > li .tx02{ margin-top: 1rem;}
    .loadmap-tx01 > ul > li .tx03{ margin-top: 1rem; margin-left: -1%;}
    .loadmap-tx01 > ul > li .tx03 .cy{ width: 49%; height: auto; border-radius: 20px; padding: 1rem; margin-left: 1%; margin-bottom: 1rem; display: block;}
    .loadmap-tx01 > ul > li .tx03 .cy + .cy{  margin-left: 1%;}
    .loadmap-tx01 > ul > li .tx03 .cy + .cy .inbx::after{ display: none;}
    .loadmap-tx01 > ul > li .tx03 .cy .inbx{ display: block;}
    .loadmap-tx01 > ul > li .tx03 .cy b{ font-size: 1.8rem;}
    .loadmap-tx01 > ul > li .tx03 .cy:nth-child(2n+1){ clear: both; }
	.loadmap-tx01 > ul > li .tx03 > img.last_img {width:30%}
    
    .loadmap-tx02::before{ display: none;}
    .loadmap-tx02 > ul > li .y{ float: none; width: 100%; padding: 0; text-align: left;}
    .loadmap-tx02 > ul > li .y h4 b{ font-size: 2rem; display: inline-block;}
    .loadmap-tx02 > ul > li .y h4 span{ font-size: 1.3rem; display: inline-block; margin-left: 1rem;}
    .loadmap-tx02 > ul > li .y::after{ display: none;}
    .loadmap-tx02 > ul > li .tx02{ float: none; width: calc(100% - 1rem); margin-left: 1rem;}
    .loadmap-tx02 > ul > li .tx02 > li,
    .loadmap-tx02 > ul > li:nth-child(even) .tx02 > li{ padding: 0 0 0 7rem; text-align: left;}
    .loadmap-tx02 > ul > li .tx02 > li .date,
    .loadmap-tx02 > ul > li:nth-child(even) .tx02 > li .date{ left: 1rem;}
    .loadmap-tx02 > ul > li .tx02 > li::before,
    .loadmap-tx02 > ul > li:nth-child(even) .tx02 > li::before{ top: .6rem; left: -2px; right: auto;}
    .loadmap-tx02 > ul > li .tx02 > li + li{ margin-top: 1rem;}
    .loadmap-tx02 > ul > li .tx02 > li p + p{ margin-top: .5rem;}
    .loadmap-tx02 > ul > li + li{ margin-top: 3rem;}
    .loadmap-tx02 > ul > li:nth-child(even) .y{ padding: 0;}
    .loadmap-tx02 > ul > li .tx01{ margin-top: 1rem;}
    .loadmap-tx02 > ul > li .tx01 > li + li{ margin-top: 1rem;}
    
    .location-tx li b{ display: block;}

    .business02-wr > dl{ display: block;}
    .business02-wr > dl + dl{ margin-top: 4rem;}
    .business02-wr > dl > dt{ display: block; padding: 1rem; width: 100%; font-size: 1.6rem; margin: 0 0 2rem; line-height: 1.4;}
    .business02-wr > dl > dt span{ display: inline;}
    .business02-wr > dl > dd{ padding: 0; display: block; width: 100%;}
    .business02-wr > dl > dd .itm{ padding: 1rem;}
    .business02-wr > dl > dd h5{ font-size: 1.6rem; margin-bottom: 1rem;}
    .business02-wr > dl > dd h5 span{ font-size: 1.3rem;}
    .business02-wr > dl:nth-child(1) > dd .itm:nth-child(1) ul > li{ float: none; width: 100%;}
    .business02-wr > dl > dd ul > li::before{ top: 1rem;}
    .business02-wr > dl:nth-child(2) > dt{ padding: 1rem;}
    .business02-wr > dl:nth-child(2) > dt::before{ display: none;}
    .business02-wr > dl:nth-child(2) > dd{ padding: 0;}
    .business02-wr .tx01{ margin-bottom: 2rem;}
    .business02-wr .tx01 b{ font-size: 1.6rem;}
    .business02-wr > dl:nth-child(3) > dt{ padding: 1rem;}
    .business02-wr > dl:nth-child(3) > dt::before,
    .business02-wr > dl:nth-child(3) > dt::after{ display: none;}
    .business02-wr > dl:nth-child(3) > dd{ padding: 0;}
    
    .business05-bx01{ padding: 1rem;}
    .business05-bx01 h5{ font-size: 2rem;}
    .business05-bx01 .bum{ padding: 0; margin: 2rem 0;}
    .business05-bx01 .bum p{ width: 45%;}
    .business05-bx01 .bum p::before{ width: 1rem; height: 1rem; vertical-align: .2rem;}
    .business05-bx01 .bum p + p{ margin-left: 0;}
    .business05-bx01 .chart-bx > li{ padding: 0 1rem;}
    
    .business05-bx02 > li{ width: 49%; margin-left: 2%; padding: 1rem;}
    .business05-bx02 > li:nth-child(2n+1){ margin-left: 0;}
    .business05-bx02 > li b{ font-size: 1.8rem; padding-bottom: 1rem; margin-bottom: 1rem; font-size: 1.6rem;}
    .business05-bx02 > li div{ font-size: 1.2rem;}
}



@media screen and (max-width:479px){

	.contents.bus0201{min-height:0; margin-bottom:4rem;}
	.contents.bus0201.fi{min-height:0!important;}
	.contents.bus0201.tf{margin-bottom:0!important;padding-bottom:0!important;}
	.bus02 .tx03{margin-top:6rem!important}

}