@charset "utf-8";

/* layout */ 
#container{opacity:0; transform:translateY(50px); transition:all 0.6s ease-out 0s;} 
#container.active{opacity:1; transform:translateY(0px);}
#content .wrap{width:1200px; padding:70px 0px; min-height:500px; box-sizing:border-box; margin:0 auto;}

/* 회사소개 */
.about_area{position:relative; padding:30px 0;}
.about_area h2{font-size:40px; font-weight:200; color:#222; text-align:center; line-height:45px;}
.about_area h3{font-size:35px; font-weight:300; color:#222; letter-spacing:8px; text-align:center; line-height:66px;}
.about_area h3:before{display:block; content:''; position:absolute; top:-70px; right:50%; width:1px; height:70px; background:#eee;}
.about_area p{color:#666; text-align:center; line-height:42px;}
.box_img img{padding:40px 0 0;}
.box_img img{width:100%;}
.about_txt{padding:80px 0; text-align:left;}
.about_txt h3, .about_area .right h3{padding:0 0 15px; letter-spacing:0; text-align:left; font-weight:300; line-height:50px;}
.about_txt h3 span, .about_area .right h3 span{color:#00a5db;}
.about_txt p, .about_area .right p{text-align:left; font-size:16px; font-weight:300; line-height:32px;}
.box_Limg{width:100%;}
.box_Limg:after{content:''; display:block; clear:both;}
.box_Limg .left{position:relative;float:left;width:50%;}
.box_Limg .img01{}
.box_Limg .img02{position:absolute; bottom:-105px; right:30px;}
.box_Limg .right{display:inline-block; float: left; padding:30px 10px; width:50%; box-sizing: border-box;}
.box_Limg .right p{display:inline-block;}
.area_production{padding:200px 0 90px;}
.area_production h3{letter-spacing:0;}
.area_production ul{padding: 60px 0 0; height:100%;}
.area_production ul:after{content:''; display:block; clear:both;}
.area_production ul > li{float:left; position:relative; margin:0 2% 2% 0; width:23.5%; height:220px;}
.area_production ul li:nth-child(4n){margin:0 0 2% 0;}
.area_production ul > li:nth-child(1){background:#fff url(../images/content/icon_shoppingmall.png) no-repeat center 30%;}
.area_production ul > li:nth-child(2){background:#fff url(../images/content/icon_hospital.png) no-repeat center 30%;}
.area_production ul > li:nth-child(3){background:#fff url(../images/content/icon_company.png) no-repeat center 30%;}
.area_production ul > li:nth-child(4){background:#fff url(../images/content/icon_personal.png) no-repeat center 30%;}
.area_production ul > li:nth-child(5){background:#fff url(../images/content/icon_realestate.png) no-repeat center 30%;}
.area_production ul > li:nth-child(6){background:#fff url(../images/content/icon_pension.png) no-repeat center 30%;}
.area_production ul > li:nth-child(7){background:#fff url(../images/content/icon_business.png) no-repeat center 30%;}
.area_production ul > li:nth-child(8){background:#fff url(../images/content/icon_templete.png) no-repeat center 30%;}
.area_production ul > li .area_icon{display:block; overflow:hidden; position:relative; margin:0 auto; padding:117px 20px 0; height:220px; box-sizing:border-box; text-align:center; transition:all 0.4s ease 0s;}
.area_production ul > li .area_icon span{font-size:16px; color:#222; font-weight:400;}
.area_production ul > li .area_icon p{padding:4px 0 0; font-size:12px; font-weight:500; color:#999; line-height:16px; text-transform:uppercase; }
.area_production ul > li .area_icon:before,
.area_production ul > li .area_icon:after{content:''; display:block; width:100%; height:220px; box-sizing:border-box; position:absolute; transition:all 0.3s ease 0s;}
.area_production ul > li .area_icon:before{top:0px; left:0px; border:1px solid #eee;}
.area_production ul > li .area_icon:after{top:0px; left:0px; border-width:6px; border-style: solid; border-image:linear-gradient(to right, #7474bf 0%, #348ac7 100%); border-image-slice:1; transform:scale(1.1,1.1); transition:all 0.3s ease-out 0s;}
.area_production ul > li .area_icon:hover:after{transform:scale(1,1);}
.box_img.v1{width:95%; margin:0 auto; background:url(../images/content/img_about04.jpg) no-repeat center bottom; background-attachment:fixed;}
.box_img.v1 .txt{max-width:1200px; box-sizing:border-box; padding:145px 15px; margin:0 auto; color:#fff; text-align:center;}
.box_img.v1 .txt h3{margin: 0 0 40px; font-size:35px; font-weight:100; line-height:50px;}
.box_img.v1 .txt a{padding:15px 55px; margin:20px 0; border:1px solid #fff; border-radius:50px; font-weight: 200; color:#fff;}
.box_img.v1 .txt a:hover{background:#fff; border:none; color:#333; font-weight:300;}
.area_map{padding:10px 0;}
.area_map h3{padding:40px 0; font-size:35px; font-weight:300; color:#222; text-align:center;}

/* 포트폴리오 */
.area_portfolio{width:85%; margin:0 auto;}
.area_portfolio ul{width:100%; padding:70px 0;}
.area_portfolio ul:after{content:''; display:block; clear:both;}
.area_portfolio ul li{float:left; width:33.33%;}
.area_portfolio ul li a{position:relative; display:block; overflow:hidden;}
.area_portfolio ul li a:after,
.area_portfolio ul li a:before{content:''; display:block; opacity:0; position:absolute; top:0px; left:0px; width:100%; height:100%; transition:all 0.6s ease 0s;}
.area_portfolio ul li a:after{z-index:2; background:rgba(0,0,0,0.6);}
.area_portfolio ul li a:after{z-index:2; background:rgba(0,0,0,0.6);}
.area_portfolio ul li .img img{transform:scale(1); transition:all 0.6s ease-in 0s;}
.area_portfolio ul li img{overflow:hidden; width:100%; text-align:center;}
.area_portfolio ul li .text{position:absolute; top:0; left:0; right:0; bottom:0; z-index:3; padding-top:33%; text-align:center; color:#fff; opacity:0;}
.area_portfolio ul li .text span{font-size:25px;font-weight:300;}
.area_portfolio ul li .text p{font-size:15px;font-weight:300; color:#fdfdfd;}
.area_portfolio ul li a:hover:after{opacity:1;}
.area_portfolio ul li a:hover .img img{transform:scale(1.05,1.05);}
.area_portfolio ul li a:hover .text{opacity:1; transform:translateY(0); transition:all 0.6s ease 0s;}

/* 고객센터 */
.area_service{position:relative; padding:30px 0;}
.area_service h3{padding: 0 0 11px; font-size:35px; font-weight:300; color:#222; letter-spacing:8px; text-align:center; line-height:35px;}
.area_service h4{font-size:25px; font-weight:200; color:#222; text-align:center; line-height:40px;}
.area_service h3:before{display:block; content:''; position:absolute; top:-70px; right:50%; width: 1px; height:70px; background:#eee;}
.area_service p{color:#666; text-align:center; line-height:42px;}
.area_service .box_Limg{padding:80px 0 40px;}
.area_service .box_Limg .left img{width:100%;}
.area_service .box_Limg .right{padding:49px 63px;}
.area_service .box_Limg .right h3{padding: 0 0 11px; letter-spacing:0; text-align:left;}
.area_service .box_Limg .right p{padding: 0 0 11px; font-size:15px; text-align:left; line-height:29px;}
.area_service .box_Limg .right p.bold{font-size:16px; font-weight:500; color:#222;}
.box_img.v2{width:100%; margin:0 auto; background:url(../images/content/img_service02.jpg) no-repeat center 38%; background-attachment:fixed; background-size:cover;}
.box_img.v2 .txt{max-width:1200px; box-sizing:border-box; padding:124px 15px; margin:0 auto; color:#fff; text-align:center;}
.box_img.v2 .txt h3{font-size:35px; font-weight:200; line-height:50px;}
.area_table{padding:40px 0;}
.area_table h5{font-size:20px; font-weight:400;}
.area_process{}
.area_process h5{font-size:20px; font-weight:400;}
.list_process{margin-top:17px;}
.list_process:after{content:''; display:block; clear:both;}
.list_process li{float:left; position:relative; width:17.6%; height:250px; margin:0 3% 2% 0; border:1px solid #eee; box-sizing:border-box; text-align:center;}
.list_process li:last-child{margin:0 0 2% 0;}
.list_process li .list_txt{padding:126px 10px 0;}
.list_process li p{font-size:16px; font-weight:500; color:#222;}
.list_process li span{display:block; margin-top:5px; font-size:13px; color:#999; font-weight:300; line-height:19px;}
.list_process li:nth-child(1){background:#fcfcfc url(../images/content/icon_service01.png) no-repeat center 20%;}
.list_process li:nth-child(2){background:#fcfcfc url(../images/content/icon_service02.png) no-repeat center 20%;}
.list_process li:nth-child(3){background:#fcfcfc url(../images/content/icon_service03.png) no-repeat center 20%;}
.list_process li:nth-child(4){background:#fcfcfc url(../images/content/icon_service04.png) no-repeat center 20%;}
.list_process li:nth-child(5){background:#fcfcfc url(../images/content/icon_service05.png) no-repeat center 20%;}
.list_process li p:after{content:''; display:block; position:absolute; right:-23px; top:50%; width:8px; height:15px; background:url(../images/content/icon_arrow.svg) no-repeat center top; background-size:100%;}
.list_process li:last-child p:after{display:none;}

/* 테이블 */
#content table.table{border-top:2px solid #00a5db;}
#content table.table colgroup + tbody th{background-color:#fff; font-size:15px; font-weight:500; color:#222;}
#content table.table thead th{background-color:#fff;}
#content table.table tbody th, #content table.table tbody td{border-left:0; text-align:center;}
#content table.table tbody tr td.lineL{border-right:1px solid #ededed;}
#content table.table thead th{border:1px solid #ededed;}

@media all and (max-width:1600px){
	.area_portfolio{width:90%;}
}
@media all and (max-width:1250px){
	#content .wrap{width:1100px;}
	.about_txt p{text-align:justify;}
	.about_txt p br{display:none;}
	.box_Limg .img01{width:80%;}
	.box_Limg .img01 img{width:100%;}
	.area_service .box_Limg .right{padding: 0 0 0 63px;}
	.area_portfolio{width:95%;}
}

@media all and (max-width:1150px){
	#content .wrap{width:95%;}
	.about_area .box_Limg .right p{text-align:justify;}
	.about_area .box_Limg .right p br{display:none;}
	.area_production{padding: 200px 0 50px;}
	.area_service .box_Limg .right{padding:0 0 0 25px;}
	.area_service .box_Limg .right p{line-height:27px;}
	#content table.table tbody th, #content table.table tbody td{padding:20px 5px;}
	.list_process li span br{display:none;}
	.area_portfolio ul li .text{padding-top:31%;}
}
@media all and (max-width:1000px){
	#content .wrap{padding:60px 0;}
	.about_area h3:before, .area_service h3:before{top:-60px;}
	.box_Limg .right{padding:20px 10px;}
	.area_production{padding:120px 30px;}
	.area_service .box_Limg .right{padding:0 0 0 30px;}
}
@media all and (max-width:1024px){
	.list_process li{width:31.3%;}
	.list_process li:nth-child(3n){margin:0 0 2% 0;}
	.list_process li:nth-child(3n) p:after{display:none;}
	.list_process li span br{display:block;}
	.list_process li p:after{right:-20px;}
	.area_service{padding:30px 0 0;}
	.area_service .box_Limg .left{width:100%; text-align:center;}
	.area_service .box_Limg .left img{width:50%;}
	.area_service .box_Limg .right{padding:50px 0 0; width:100%;}
	.area_service .box_Limg .right h3{text-align:center;}
	.area_service .box_Limg .right p.bold{text-align:center;}
	.area_service .box_Limg .right p{display:block; text-align:center;}
	#content .area_service table.table{margin: 2% 10% 0; width: 80%; text-align:center;}
	.box_img.v2 .txt{padding:110px 15px;}
}
@media all and (max-width:950px){
	.box_Limg .right{padding:10px 10px;}
	.area_production{padding:80px 0 0;}
	.area_production ul > li .area_icon:before, .area_production ul > li .area_icon:after{height:185px;}
	.area_production ul > li{height:185px;}
	.area_production ul > li .area_icon{padding: 107px 20px 0; height:185px;}
}
@media all and (max-width:900px){
	.box_Limg .right{padding:0 10px;}
	.about_txt h3, .about_area .right h3{padding: 0 0 5px;}
	.about_txt p, .about_area .right p{line-height:30px;}
	.list_process li p:after{right:-19px;}
	.area_portfolio ul li .text{padding-top:30%;}
}
@media all and (max-width:850px){
	.about_area h3, .area_service h3{font-size:30px;}
	.about_area h2{font-size:35px;}
	.area_map h3{font-size:30px;}
	.box_img.v2 .txt h3{font-size:30px; line-height:40px;}
	.list_process li p:after{right:-18px;}
	.area_portfolio ul li .text{padding-top:30%;}
}
@media all and (max-width:767px){
	.about_area{padding:30px 0 10px;}
	.about_area h2{line-height:30px;}
	.about_area p{font-size:14px; line-height:48px;}
	.box_Limg .left{width:100%; text-align:center;}
	.about_txt{padding:60px 0;}
	.area_service .box_Limg .right p.bold{font-size:14px; line-height:25px;}
	.about_txt p, .about_area .right p, .area_service .box_Limg .right p{font-size:14px; line-height:27px;}
	.box_Limg .img01{margin:0 20% 0 0; width:80%;}
	.box_Limg .img01 img{width:75%;}
	.box_Limg .img02 img{width:90%;}
	.box_Limg .right{padding:130px 10px 15px; width:100%;}
	.area_production{padding:40px 0 0;}
	.area_production ul > li{width:49%;}
	.area_production ul > li:nth-child(2n){margin:0 0 2% 0;}
	.box_img.v1 .txt{padding: 120px 15px;}
	.box_img.v1 .txt h3{font-size:30px; line-height:45px;}
	.box_img.v1 .txt a{font-size:14px;}
	.area_map{padding:0;}
	.area_map h3{padding:0 0 40px}
	.area_service h4{font-size:23px; line-height:35px;}
	.area_service .box_Limg{padding:60px 0 20px;}
	.list_process li{width:47.5%; margin:0 5% 5% 0}
	.list_process li:nth-child(2n){margin: 0 0 5% 0;}
	.list_process li:nth-child(3n){margin: 0 5% 5% 0;}
	.list_process li:nth-child(2n) p:after{display:none;}
	.list_process li:nth-child(3n) p:after{display:block;}
	.list_process li p:after{right:-23px;}
	.area_table{padding:10px 0 40px;}
	.area_service .box_Limg .left img{width:60%;}
	.area_portfolio ul li{width:50%;}
	#content table.table thead th, #content table.table tbody td, #content table.table colgroup + tbody th, #content table.table colgroup + tbody td{font-size:14px;}
}
@media all and (max-width:650px){
	.about_area h2{font-size:32px;}
	.about_txt{padding:30px 0 50px;}
	.area_production ul{padding:30px 0 0;}
	.box_img.v1 .txt{padding:100px 15px;}
	.area_service h4{font-size:20px; line-height:30px;}
	.area_service .box_Limg .right{padding:40px 0 0;}
	.list_process li p:after{right:-20px;}
}
@media all and (max-width:580px){
	.about_area{padding:0 0 10px;}
	.about_area h2{font-size:30px; line-height:18px;}
	.about_area h3, .area_service h3{font-size:27px;}
	.about_area h3:before, .area_service h3:before{height:60px;}
	.about_txt p, .about_area .right p{line-height:26px;}
	.box_Limg .img01{margin:0 15% 0 0; width:85%;}
	.box_Limg .img01 img{width:80%;}
	.box_Limg .img02 img{width:80%;}
	.box_img img{padding:30px 0 0;}
	.area_production{padding:20px 0 0;}
	.box_img.v1 .txt{padding:80px 15px;}
	.box_img.v1 .txt h3{margin:0 0 30px; font-size:27px; line-height:37px;}
	.box_img.v1 .txt a{padding:13px 48px;}
	.area_map h3{font-size:27px;}
	.area_service .box_Limg{padding:40px 0 20px;}
	.area_service .box_Limg{padding:40px 0 0;}
	.area_service .box_Limg .left img{width:70%;}
	.box_img.v2 .txt{padding:90px 15px;}
	.box_img.v2 .txt h3{font-size:28px;}
	.area_table{padding:0 0 40px;}
	.list_process li p:after{right:-19px;}
	.area_service h4{font-size:18px; line-height:28px;}
	.area_portfolio ul li .text span{font-size:22px;}
}

@media all and (max-width:480px){
	.about_area h2{font-size:28px;}
	.about_area h3, .area_service h3{font-size:25px; padding: 15px 0 0;}
	.about_area h3:before, .area_service h3:before{top:-40px; height:40px;}
	.box_Limg .img01{margin:0 15% 0 0; width:85%;}
	.box_Limg .img02 img{right:-10px; width:70%;}
	#content .wrap{padding:40px 0;}
	.box_img img{padding:10px 0 0;}
	.about_txt{padding:10px 0 50px;}
	.area_production{padding:10px 0 0;}
	.area_production ul{padding:20px 0 0;}
	.box_img.v1 .txt h3{font-size:25px;}
	.area_service h4{font-size:16px; line-height:25px;}
	.about_txt p, .about_area .right p, .area_service .box_Limg .right p{line-height:25px;}
	#content .area_service table.table{width:100%; margin:2% 0 0;}
	.area_service .box_Limg .left img{width:70%;}
	.area_service .box_Limg .right{padding:30px 0 0;}
	.box_img.v2 .txt h3{font-size:26px;}
	.list_process li p:after{right:-16px;}
	.list_process li span br{display:none;}
	.box_img.v2 .txt h3 br{display:none;}
	.area_service{padding:10px 0 0;}
	.about_area h3{padding:0;}
}
@media all and (max-width:414px){
	.about_area p{padding:15px 63px; line-height:20px;}
	.about_txt p, .about_area .right p{padding:0; line-height:24px;}
	.box_Limg .img02 img{width:60%;}
	.box_Limg .img02{right:-20px;}
	.box_img.v1 .txt{padding:60px 15px;}
	.box_img.v1 .txt h3{font-size:23px; line-height:35px;}
	.box_img.v1 .txt a{padding:10px 40px;}
	.box_Limg .right{padding: 130px 0 15px;}
	.area_service h4{font-size:14px; line-height:22px;}
	.box_img.v2 .txt{padding:80px 15px;}
	.box_img.v2 .txt h3{font-size:22px; line-height:35px;}
	.area_service .box_Limg .right p{line-height:23px;}
	.list_process li p:after{right:-15px;}
	.area_service .box_Limg .right p.bold br{display:none;}
	.area_portfolio ul li{width:100%;}
}
@media all and (max-width:380px){
	.about_area h3{font-size:23px;}
	.box_img.v1 .txt h3{font-size:20px; line-height:30px;}
	.box_img.v2 .txt h3{font-size:20px; line-height:30px;}
	.area_production{padding:0;}
	.area_table h5, .area_process h5{font-size:19px;}
}
@media all and (max-width:340px){
	.area_service h4 br{display:none;}
}
@media all and (max-width:320px){
	#content .wrap{padding:30px 0;}
	.about_area h3:before{top:-30px; height:30px;}
	.about_area h2{font-size:24px;}
	.about_area h3{padding:5px 0 0; font-size:20px; line-height:48px;}
	.about_area p{padding:10px 20px; line-height:20px;}
	.about_txt p{padding:0;}
	.area_production ul > li .area_icon span{font-size:15px;}
	.box_img.v1 .txt h3{font-size:17px; line-height:28px;}
	.box_img.v2 .txt h3{font-size:17px; line-height:28px;}
	.box_img.v2 .txt{padding:50px 15px;}
	.area_table h5, .area_process h5{font-size:17px;}
}