@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

 .sub .box_btnBasic{text-align:center;}

/* animation effect */
.fadeup{position:relative;opacity:0;top:130px;transition: all 2s cubic-bezier(0.18, 0.89, 0.43, 1.14) 0s;}
.fadeup-in{position:relative;opacity:1;top:0;transition: all 2s cubic-bezier(0.18, 0.89, 0.43, 1.14) 0s;}
.root_daum_roughmap{border:0 !important; padding:0 !important;}

/* 회사소개 */
#content div[class^="area_"] h3{line-height:1.2;font-size: 38px;letter-spacing:-0.8px;font-weight: 200;color: #222;}
#content .area_business h3{font-weight: 800 !important;text-transform:uppercase;text-align: center;}

.area_whatwebe{padding-top:120px;}
.area_whatwebe ul li{margin-bottom:9px; padding:32px 40px; background:#f7f7f7; font-weight:300; font-size:17px; color:#222;}
.area_whatwebe ul{margin-top:43px;}
.area_whatwebe ul li i{font-weight:400; color:#c9085f;}

.area_business{overflow:hidden;margin-bottom:150px;padding-top:120px;width: 100%;}
.list_business{overflow:hidden;margin-bottom:80px;}
.list_business > li{float:left; width:25%; margin-top:80px; text-align:center;}
.list_business > li > p{margin-top:30px; font-weight:500; color:#222;}

.area_graph{padding:139px 0; background:url(../images/content/img_business.png) 50% 50% no-repeat; text-align:center;}
.area_graph h3{color: #fff !important;}
.area_graph h3 b{font-weight: bold;}
.area_graph h3 + p{margin-top:20px; font-weight:100; color:#fff;}
.area_graph h3 + p b{font-weight:500;}
.list_graph{margin-top:80px;}
.list_graph > div{float:left; width:16.66666%; text-align:center;}
.list_graph > div > em{display:block; margin-top:10px; font-weight:300; color:#fff;}
.list_graph > div > div{position:relative;height:360px;margin: 0 93px;background:#fff;}
.list_graph + span{display:inline-block; margin-top:47px; padding:9px 20px; border:1px solid #4c4c4c; font-size:15px; color:#676767; border-radius:24px;}
.list_graph > div > div > span{display:inline-block; position:absolute; bottom:0; left:0; z-index:999; width:100%; height:100px; background:#adadad; transition:all 1.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s;}
.list_graph > div:first-child > div > .graphup-in{height:10%;}
.list_graph > div:nth-child(2) > div > .graphup-in{height:15%;}
.list_graph > div:nth-child(3) > div > .graphup-in{height:18%;}
.list_graph > div:nth-child(4) > div > .graphup-in{height:28%;}
.list_graph > div:nth-child(5) > div > .graphup-in{height:42%;}
.list_graph > div:nth-child(6) > div > .graphup-in{height:82%;background: linear-gradient(-30deg, #3ca1d9, #41cfcf);}
.list_graph > div:last-child > em{font-size: 17px;color: #3ca3d8;font-weight: 700;}

.area_greeting{overflow:hidden;}
.area_greeting p{line-height:1.7; font-weight:300; color:#666; letter-spacing:-0.4px;}
.area_greeting h3{margin-top:140px;}
.area_greeting h3 + p{margin-top:20px;}
.area_greeting ul{overflow:hidden; margin-top:73px;}
.area_greeting ul li{position:relative; float:left; margin-right:36px;}
.area_greeting ul li:last-child{margin-right:0;}
.area_greeting ul li p{margin-top:15px; font-weight:600; color:#222;}
.area_greeting ul + p{margin-top:67px;}
.area_greeting h3 + p,
.area_greeting ul + p,
.area_greeting h3,
.box_greeting + div > p{padding:0 170px;}
.box_greeting + div > p i{color: #3ca1d9;}
.box_greeting{overflow:hidden; width:1400px; margin:120px auto 50px; background:url(../images/content/img_greeting05.png) 50% 50% no-repeat; color:#fff; text-align:center;}
.box_greeting > div{margin:20px; padding:158px 0; border:1px solid rgba(255,255,255,0.3);}
.box_greeting h5{font-weight:100; font-size:32px;}
.box_greeting h5 b{font-weight:400;}
.box_greeting h5 p{margin-bottom:22px; font-size:17px; color:#fff; letter-spacing:7px;}
.box_greeting + div > p b{display:block;margin-top:40px;color:#222;font-weight: 300;}
.box_greeting + div > p + span{float:right; margin-top:30px; margin-right:170px; font-size:22px; color:#222;}
.box_greeting + div > p + span i{display:block; font-weight:300; font-size:15px; color:#666;}

/* 서비스 */
.area_service{padding-top:130px;}
.area_service h3{margin-bottom: 9px;}
.area_service p{font-weight:300;color:#666;letter-spacing:-0.4px;line-height: 1.7;}
.area_service p > i{color: #3ca1d9;}
.area_service ul li{float:left;margin:0 10px 10px 0px;padding:10px 20px;background: #ffffff;}
.area_service ul{overflow:hidden; margin-top:41px;}
.area_service .scrollTable{margin-top:50px;}

.area_basic .box_btnBasic{margin-top:40px;}
.area_basic{margin-top:80px;}
.area_basic h4,
.area_process h4{position:relative;font-size:18px;color:#222;}

.area_process{margin-top:100px;overflow: hidden;}
.area_process ul li{position:relative;float:left;width:33.3333%;width:-webkit-calc(30% - -6px);width:calc(30% - -6px);margin-right:50px;margin-bottom:50px;padding:80px 0;background:#fff;text-align:center;}
.area_process ul li:first-child,
.area_process ul li:nth-child(2){width:50%; width:-webkit-calc(49% - 13px); width:calc(49% - 13px);}
.area_process ul li > span{position:absolute; top:20px; left:20px; line-height:1; font-weight:500; font-size:51px; color:#efefef;}
.area_process ul li img{display:block; margin:0 auto;}
.area_process ul li em{display:block; line-height:1; margin:30px 0 20px; font-size:17px; color:#222;}
.area_process ul li p{line-height:1.7; font-weight:300; color:#666; min-height:81px;}
.area_process ul{margin-top:20px;}
.area_process ul li:nth-child(2){margin-right:0;}
.area_process ul li:last-child{margin-right:0;}
.area_process ul li:first-child img{display:inline-block; position:relative; left:10px;}
.area_process .box_btn{display:block; float:left; width:100%;}

#content table.table thead th{color:#fff; background-image:linear-gradient(120deg, #3ca1d9, #41cfcf);}
#content table.table thead tr:last-child th{border-bottom:none;}
#content table.table{border-top:none;}

/* 찾아오시는길 */
.area_map{padding:150px 0 50px 0;}
.area_map ul li{position:relative; float:left; width:24%; padding-left:1%;}
.area_map ul{overflow:hidden; margin: 30px 0 70px 0;}
.area_map ul li em{font-weight: 800;font-size: 15px; color:#222; text-transform:uppercase;}
.area_map ul li:after{content:""; position:absolute; top:6px; left:0; width:3px; height:15px; background:#222;}
.area_map ul li p,
.area_map ul li a{margin-top:2px; font-weight:300; font-size:15px; color:#666;}
.area_map ul li:nth-child(3) p,
.area_map ul li:nth-child(4) p a{font-size:16px;}
.area_map ul li p a{display:block;}
.area_map .box_btnBasic{text-align:center;}

.root_daum_roughmap .wrap_controllers{display:none;}

/* 포트폴리오 */
.area_portfolioSub > div{float:left; margin:0 81px 81px 0;}
.area_portfolioSub{overflow:hidden; padding-top:131px;}
.area_portfolioSub > div:nth-child(3n){margin-right:0;}

.area_portfolioSub .box_btnBasic{width:100%; text-align:center;}
.box_btnBasic a{display:inline-block; padding:23px 64px; border:2px solid #ddd; font-weight:600; font-size:14px; color:#bebebe; transition:all 0.3s ease-out 0s; border-radius:6px;}
.box_btnBasic a:hover{border:2px solid #3bcac9; color:#3bcac9;}

/* portfolio */
.portfolio_area h3{padding-left:0px; margin-top:0px; font-family:'Raleway'; font-size:35px; color:#303030; font-weight:600; letter-spacing:1px; text-align:center;}
.portfolio_area h3:before{display:none;}
.portfolio_area h3 + p{font-weight:300; color:#999; text-align:center;}
.portfolio_area ul{margin-top:30px;}
.portfolio_area ul:after{content:''; display:block; clear:both;}
.portfolio_area ul > li{float:left; width:31%;}
.portfolio_area ul > li:nth-child(3n+2){margin:0 3.5%;}
.portfolio_area ul > li > a{display:block; overflow:hidden; position:relative; margin-bottom:50px;}
.portfolio_area ul > li > a:after,
.portfolio_area ul > li > a:before{content:''; display:block; opacity:0; position:absolute; top:0px; left:0px; width:100%; height:100%; transition:all 0.5s ease 0s;}
.portfolio_area ul > li > a:after{z-index:2; background:rgba(0,0,0,0.4);}
.portfolio_area ul > li > a:before{z-index:3; border:1px solid rgba(255,255,255,0.5); transform:scale(1.1,1.1); transform-origin:50% 50%; transition:all 0.5s ease 0s;}
.portfolio_area ul > li span{display:block;}
.portfolio_area ul > li .txt{opacity:0; position:absolute; left:0px; top:0px; z-index:5; width:100%; padding-top:25%; text-align:center; transform:translateY(50px); transition:all 0.3s ease 0s;}
.portfolio_area ul > li .txt em{display:inline-block; line-height:1em; font-weight:500; color:#fff; font-size:30px; letter-spacing:-1px; word-break:keep-all;}
.portfolio_area ul > li .txt em:after{content:''; display:inline-block; width:70%; height:2px; background:#fff;}
.portfolio_area ul > li .txt i{display:block; padding-top:3.5em; font-size:16px; color:#fff; font-weight:300;}
.portfolio_area ul > li .img{overflow:hidden; width:100%; height:350px; box-sizing:border-box; text-align:center;}
.portfolio_area ul > li .img img{height:100%; margin-left:-100%; margin-right:-100%; transform:scale(1,1); transition:all 0.5s ease-in 0s;}
.portfolio_area ul > li > a:hover:after{opacity:1;}
.portfolio_area ul > li > a:hover:before{opacity:1; transform:scale(0.9,0.9);}
.portfolio_area ul > li > a:hover .img img{transform:scale(1.1,1.1);}
.portfolio_area ul > li > a:hover .txt{opacity:1; transform:translateY(0);}

/* bbs , common */
.pagination span{border-color:#41464e; color:#41464e;}
.button{border-radius:4px !important;}

@media all and (max-width:1540px){
	.box_greeting{width:90%; background-size:cover;}
}

@media all and (max-width:1380px){
	.list_graph{overflow:hidden; width:850px; margin:80px auto 0;}
	.list_graph > div > div{width:16px; height:360px; margin:0 auto;}
	.area_greeting ul li{width:-webkit-calc(24% - 2px); width:calc(24% - 2px); margin-right:15px;}
	.area_greeting ul li img{width:100%;}
	.area_greeting h3 + p,
	.area_greeting ul + p,
	.area_greeting h3,
	.box_greeting + div > p{padding:0 100px;}
	.box_greeting{width:92%;}
	.box_greeting > div{margin:15px; padding:128px 0;}
	.box_greeting h5 p{margin-bottom:13px;}
	
	.area_process ul li:first-child,
	.area_process ul li:nth-child(2){width:-webkit-calc(48% - 7px); width:calc(48% - 7px);}
	.area_process ul li{width:-webkit-calc(29% - -6px); width:calc(29% - -6px);}

	.area_map{padding:90px 0 50px 0;}
	.area_map ul{margin-bottom:50px;}
	.area_map ul li em{font-size:16px;}
	.area_map ul li p,
	.area_map ul li a{font-size:14px;}
	.area_map ul li:nth-child(3) p,
	.area_map ul li:nth-child(4) p a{font-size:15px;}
	#daumRoughmapContainer1546845741917{width:100% !important;}

	.area_portfolioSub > div{width:-webkit-calc(32% - 7px); width:calc(32% - 7px); margin:0 30px 30px 0;}
	.area_portfolioSub > div img{width:100%;}

	.area_portfolioSub .box_btnBasic{margin-top:30px;}
}

@media all and (max-width:1110px){
	.wrapper{margin:0 auto;}

	.area_portfolioSub > div{width:-webkit-calc(32% - 1px); width:calc(32% - 1px); margin:0 15px 15px 0;}
	.area_portfolioSub{padding-top:51px;}
}

@media all and (max-width:1023px){
	.area_business{margin-bottom:100px;}
	#content .area_business h3{font-size:32px;}
	.list_business > li{margin-top:60px;}
	.list_business > li > img{height:65px;}
	.list_business > li > p{font-size:15px;}
	.area_graph{padding:100px 0; background:url(../images/content/img_business.png) 60% 50% no-repeat; background-size:cover;}
	.list_graph{width:100%;}
	.list_graph > div > div{width:13px; height:260px;}
	.area_greeting ul{overflow:hidden; margin-top:53px;}
	.area_greeting ul li{width:-webkit-calc(24% - 1px); width:calc(24% - 1px); margin-right:10px;}
	.area_greeting ul li p{margin-top:14px; font-size:14px;}
	.area_greeting h3{margin-top:100px;}
	.area_greeting ul + p{margin-top:47px;}
	.area_greeting h3 + p,
	.area_greeting ul + p,
	.area_greeting h3,
	.box_greeting + div > p{padding:0 50px; font-size:15px;}
	.box_greeting{margin:90px auto 40px;}
	.box_greeting > div{margin:15px; padding:88px 0;}
	.box_greeting h5{font-size:29px;}
	.box_greeting h5 p{margin-bottom:8px; margin-bottom:22px; font-size:15px; letter-spacing:5px;}

	.area_process ul li{margin:0 20px 20px 0;}
	.area_process ul li,
	.area_process ul li:first-child,
	.area_process ul li:nth-child(2){width:-webkit-calc(49% - 4px); width:calc(49% - 4px);}
	.area_process ul li:nth-child(2n){margin-right:0;}
	.area_process ul li:last-child{width:100%;}

	.area_map ul li p,
	.area_map ul li a{padding-right:20px;}
}

@media all and (max-width:767px){
	#content div[class^="area_"] h3{line-height:1.5; font-size:25px;}
	.area_business{padding-top:70px;}
	.list_business{margin-bottom: 29px;}
	.list_business > li{margin-top:30px;}
	.list_business > li > p{margin-top:20px; font-weight:600; font-size:13px;}
	.list_business > li > img{height:55px;}
	.area_graph h3 + p{font-size:13px;}
	.area_graph h3 + p br{display:none;}
	.list_graph{margin:50px auto 0;}
	.list_graph > div > div{width:10px; height:170px;}
	.list_graph > div > em{opacity:0.4; font-weight:200; font-size:14px;}
	.list_graph > div:last-child > em{opacity:1; line-height:1.4; font-weight:400; font-size:16px;}
	.list_graph + span{margin-top:18px; padding:7px 15px; font-size:12px;}
	.area_greeting h3 + p,
	.area_greeting ul + p,
	.area_greeting h3,
	.area_greeting p br{}
	.area_greeting h3 + p{margin-top:17px;}
	.area_greeting ul{margin-top:44px;}
	.area_greeting ul + p{margin-top:32px;}
	.area_greeting ul li{width:-webkit-calc(50% - 5px); width:calc(50% - 5px); margin-right:10px; margin-bottom:20px;}
	.area_greeting ul li:nth-child(2n){margin-right:0;}
	.box_greeting + div > p{padding:0; font-size:14px;}
	.box_greeting > div{margin:15px; padding:68px 0;}
	.box_greeting + div > p + span{margin-right:0; font-weight:600; font-size:19px;}
	.box_greeting + div > p + span i{font-size:13px;}
	.box_greeting h5{line-height:1.7; font-size:22px;}
	.box_greeting h5 p{margin:0 30px 10px; font-size:13px; letter-spacing:0;}
	
	.area_service{padding-top:50px;}
	.area_service h3{margin-bottom:8px;}
	.area_service p{font-size:14px;}
	.area_service p br{display:none;}
	.area_service ul{margin-top:24px;}
	.area_service ul li{padding:10px; font-size:13px;}
	.area_basic{margin-top:60px;}
	.area_basic h4,
	.area_process h4{padding-left:8px; font-size:16px;}
	.area_basic h4:after,
	.area_process h4:after{height:20px;}
	.area_process ul li{padding:70px 0 30px;}
	.area_process ul li,
	.area_process ul li:first-child,
	.area_process ul li:nth-child(2){width:-webkit-calc(49% - 6px); width:calc(49% - 6px);}
	.area_process ul li p{margin:0 4%; font-size:14px;}
	.area_process ul li p br{display:none;}
	.area_process ul li img{height:70px;}
	.area_process ul li em{font-size:16px;}
	.area_process ul li > span{top:15px; left:15px; font-size:30px;}
	.area_map{padding:90px 0 0px 0;}
	.area_map ul li{width:48%; margin-bottom:15px; padding-left:2%;}
	#daumRoughmapContainer1546845741917{width:100% !important; height:240px;}
	.area_portfolioSub > div{width:-webkit-calc(32% - 0px); width:calc(32% - 0px); margin:0 10px 11px 0;}
}

@media all and (max-width:540px){
	#content div[class^="area_"] h3{font-size:20px;}
	.area_business{margin-bottom: 40px;padding-top:40px;}
	.list_business > li{width:50%; margin-top:30px;}
	.area_graph{padding:40px 0;}
	.area_greeting h3{margin-top:35px;}
	.area_greeting h3 + p{margin-top:7px;}
	.area_greeting h3 + p,
	.area_greeting ul + p,
	.area_greeting h3,
	.box_greeting + div > p{font-size:13px;}
	.area_greeting ul{margin-top:34px;}
	.area_greeting ul li p{margin-top:8px; font-size:13px;}
	.area_greeting ul + p{margin-top:12px;}
	.box_greeting{width:96%;}
	.box_greeting{margin:47px auto 30px;}
	.box_greeting h5{font-size:17px;}
	.box_greeting h5 p{margin:0 30px 5px;}
	.box_greeting > div{margin:10px;}
	.area_greeting h3 + p,
	.area_greeting ul + p,
	.area_greeting h3,
	.box_greeting + div > p{padding:0 0;}

	.area_process ul li{margin:0 8px 8px 0; padding:60px 0 30px;}
	.area_process ul li,
	.area_process ul li:first-child,
	.area_process ul li:nth-child(2){width:-webkit-calc(48% - -3px); width:calc(48% - -3px);}
	.area_process ul li img{height:58px;}
	.area_process ul li em{font-weight:600; font-size:15px;}
	.area_process{overflow:hidden; margin-top:46px;}
	.area_basic{margin-top:48px;}

	.area_service .scrollTable{margin-top:9px;}
	.area_service ul{margin-top:14px;}
	.area_service ul li{margin:0 5px 5px 0px; padding:8px; font-size:12px;}
	.area_process ul li p{line-height:1.5; font-size:13px;}
	#content .scrollTable .table{width:540px; font-size:13px;}
	.area_basic h4,
	.area_process h4{padding-left:0; font-size:14px;}

	.area_map{padding:50px 0 20px 0;}
	.area_map ul{margin-bottom:10px;}
	.area_map ul li{width:98%; padding-left:2%;}
	.area_map ul li em{font-size:15px;}
	.area_map ul li:after{content:""; top:4px; width:3px; height:13px;}
	
	.area_portfolioSub > div{width:-webkit-calc(50% - 5px); width:calc(50% - 5px); margin:0 10px 10px 0;}
	.area_portfolioSub > div:nth-child(3n){margin-right:10px;}
	.area_portfolioSub > div:nth-child(2n){margin-right:0px;}

	.box_btnBasic a{padding:16px 37px; font-size:13px;}
}

@media all and (max-width:400px){
	.area_process ul li{margin:0 20px 10px 0;}
	.area_process ul li,
	.area_process ul li:first-child,
	.area_process ul li:nth-child(2){width:100%;}
}

@media all and (max-width:359px){
	#content div[class^="area_"] h3{line-height:1.3; font-size:22px;}
	.list_business > li > img{height:50px;}
	.sub #content .area_business h3,
	.sub #content .area_whatwebe h3{font-size:25px;}
	
	.list_graph{margin:40px auto 0;}
	.area_graph h3 + p{line-height:1.7; margin-top:12px; font-size:12px;}
	.box_greeting{margin:40px auto 20px;}
	.box_greeting h5{font-size:15px;}
	.box_greeting h5 p{margin:0 30px 10px; font-size:12px;}
}