@charset "utf-8";

/* 
 * content CSS Document
 * DaeguWeb kimhynho 
 */
 
/* 카카오맵 업데이트로 불필요한 패딩, 선이 잡혀서 제거 */
.root_daum_roughmap{border:0 !important; padding:0 !important;}

/* common */
#header{border-bottom:1px solid #e7e7e7;}
.content p{margin-top:10px; word-wrap:break-word; letter-spacing:-0.5px; word-break:keep-all; font-weight:300;}
.content h3{position:relative; padding-left:30px; margin-top:50px; font-size:20px; letter-spacing:-1px; color:#222; font-weight:400;}
.content h3:before{content:''; display:block; position:absolute; top:2px; left:0px; width:22px; height:26px; background:url(../images/content/bul_h3.png) no-repeat center top;}
.content .list_bul li{position:relative; padding-left:10px; margin-top:10px; font-weight:300px; word-break:keep-all; letter-spacing:-0.5px;}
.content .list_bul li:before{content:''; display:block; position:absolute; left:0px; top:8px; width:3px; height:3px; background:#68716f;}
.inr{width:1400px; margin:0 auto; padding:20px; box-sizing:border-box;}
.inr2{width:1200px; margin:0 auto; padding:20px; box-sizing:border-box;}

/* animaition */
.container .content.active{animation:fadeIn 0.8s ease-out 0s 1 forwards;}

/* title img */
.title_img{height:303px; margin-bottom:30px; overflow:hidden; background-repeat:no-repeat; background-position:center 50%; vertical-align:middle; text-align:center;}
.title_img:after{content:''; display:inline-block; height:100%; vertical-align:middle;}
.title_img em{display:inline-block; width:99%; font-size:23px; color:#fff; font-weight:500; line-height:1.4em; letter-spacing:-1px; vertical-align:middle; word-break:keep-all;}
.title_img em span{display:block; padding-bottom:10px; font-size:40px; transform:skewX(10deg); text-shadow:none;}
.title_img em span:nth-of-type(2){padding-bottom:0px; margin-top:30px; transform:skewX(-10deg);}
.title_img em i{display:block; padding-bottom:15px; font-family:'Raleway'; font-size:45px; font-weight:700; letter-spacing:1.5px; line-height:1em;}
.title_img.about{background-image:url(../images/content/img_sub01.jpg);}
.title_img.basic{background-image:url(../images/content/img_sub02.jpg);}
.title_img.normal{background-image:url(../images/content/img_sub03.jpg);}
.title_img.premium{background-image:url(../images/content/img_sub04.jpg);}
.title_img.shopping{background-image:url(../images/content/img_sub05.jpg);}
.title_img.mobile{background-image:url(../images/content/img_sub06.jpg);}
.title_img.center{background-image:url(../images/content/img_sub07.jpg);}
.title_img.marketing{background-image:url(../images/content/img_sub08.jpg);}

/* 이미지좌 글우 */
.img_boxLR{position:relative; min-height:549px; margin-top:80px;}
.img_boxLR figure{position:absolute; left:0px; top:0px;}
.img_boxLR > div{padding-left:700px;}
.img_boxLR h3{padding-left:0px; margin-top:0px; font-size:40px; color:#222; letter-spacing:-2px; font-weight:500;}
.img_boxLR h3:before{display:none;}
.img_boxLR h3 em{color:#3951cb;}
.img_boxLR p{font-size:18px; font-weight:300; color:#222; letter-spacing:-1px;}

/* table */
.container .content .table{margin-top:20px;}
.container .content .table th,
.container .content .table td{padding:10px; border-bottom:1px dashed #d3d3d3; text-align:center;}
.container .content .table thead th{border-top:1px solid #a7a7a7; border-bottom:1px solid #a7a7a7; font-weight:500; color:#333;}
.container .content .table thead tr th:first-child{border-left:1px solid #a7a7a7;}
.container .content .table thead tr th:last-child{border-right:1px solid #a7a7a7;}
.container .content .table td{border-top:1px dashed #d3d3d3; border-left:1px solid #d3d3d3; color:#222; font-weight:300; word-break:break-all;}
.container .content .table tbody tr:first-child td{box-shadow:0px 3px 0px rgba(0,0,0,0.1) inset;}
.container .content .table tbody tr > *:first-child{border-left-width:0px;}
.container .content .table .lineL{border-left-width:1px !important;}

/* more */
.btn_more_view{display:block; width:98px; height:98px; line-height:98px; margin:40px auto 0; border-radius:50%; border:2px solid #51555e; font-family:'Raleway'; color:#4b4e51; text-align:center;}

/* about */
.about_txt:after{content:''; display:block; clear:both;}
.about_txt div{float:left; width:48%;}
.about_txt div:nth-child(2n){float:right;}

.txt_map{padding:20px; border:1px solid #51555d; font-size:16px; text-align:center; line-height:1em;}
.txt_map em{display:inline-block; padding:0 10px; color:#3951cb;}

/* 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);}

/* 가격 */
.price{display:block; margin-top:30px; font-family:'Raleway'; font-size:40px; color:#e6428b; font-weight:600; letter-spacing:-1px;}
.price span{font-size:30px;}
.price br{display:none;}
.table_price{padding:10px 15px; margin-top:40px; border:1px solid #e5e5e5; border-collapse:inherit;}
.table_price th,
.table_price td{padding:10px; border-top:1px dashed #d3d3d3; border-left:1px solid #a7a7a7; font-weight:300; text-align:left; color:#222;}
.table_price tr:first-child th,
.table_price tr:first-child td{border-top-width:0px;}
.table_price tr th:first-child{border-left-width:0px;}

.list_process{margin-top:20px;}
.list_process:after{content:''; display:block; clear:both;}
.list_process li{float:left; position:relative; width:20%; text-align:center;}
.list_process li p{font-size:18px; font-weight:500; color:#222;}
.list_process li span{display:block; margin-top:15px; font-size:15px; color:#666; font-weight:300; word-break:keep-all; letter-spacing:-0.5px;}
.list_process li:before{content:''; display:block; width:118px; height:118px; box-sizing:border-box; margin:0 auto; border:5px solid #42baa3; border-radius:50%;}
.list_process li:after{content:''; display:block; position:absolute; top:35px; left:50%; width:57px; height:46px; margin-left:-28px; background-image:url(../images/content/sp_conts.png); background-repeat:no-repeat;}
.list_process li:nth-of-type(1):after{background-position:0 0;}
.list_process li:nth-of-type(2):after{background-position:-57px 0;}
.list_process li:nth-of-type(3):after{background-position:-114px 0;}
.list_process li:nth-of-type(4):after{background-position:-171px 0;}
.list_process li:nth-of-type(5):after{background-position:-228px 0;}
.list_process li p:after{content:''; display:block; position:absolute; right:-20px; top:50px; width:48px; height:16px; background:url(../images/content/img_arrow.png) no-repeat center top;}
.list_process li:last-child p:after{display:none;}


.area_banner{display:table; width:100%; background:url(/images/common/img_banner.png) no-repeat center; background-size:100%;  letter-spacing:-0.5px;}
.area_banner > *{display:table-cell; box-sizing:border-box; padding:20px 40px 20px 40px; vertical-align: top;}
.area_banner > .tit{width:25%; text-align:right;}
.area_banner > .desc{width:75%; background:#43baa3; color:#fff; text-align:left;}
.area_banner .tit em{color:#43baa3; font-size:40px; font-style:normal; font-weight: 500;}
.area_banner .tit a{display:inline-block; margin-top:20px;border-radius:3px; padding:10px 20px; background:#3e4040; color:#fff; font-size:16px; transition:all 0.3s ease 0s;}
.area_banner .tit a:hover{background:#fff; color:#43baa3;}
.area_banner .desc .tit_desc{margin:10px 0; font-size:21px; font-weight:500;}
.area_banner .desc .tit_desc:before{content:''; display:inline-block; width:18px; height:7px; background:url(/images/content/icon_dot.png) no-repeat 50% 50%; margin-right:10px; vertical-align:middle;}
.area_banner .desc > ul{font-size:0;}
.area_banner .desc > ul > li{display:inline-block; position:relative; margin:15px 56px 20px 10px; padding-left:142px; font-size:16px; vertical-align:top;}
.area_banner .desc > ul > li:before{content:''; display:block; position:absolute; top:0; left:0; width:118px; height:118px; background-color:#fff; background-repeat:no-repeat; background-position:50%; border-radius:50%;}
.area_banner .desc > ul > li:first-child:before{background-image:url(/images/content/icon_service01.png);}
.area_banner .desc > ul > li:first-child + li:before{background-image:url(/images/content/icon_service02.png);}
.area_banner .desc .dep2.tel{font-family:'Verdana'; font-weight:900; font-size:28px; line-height:1.2em;}
.area_banner .desc .dep2.tel span{font-size:22px;}
.area_banner .desc .dep2:not(.tel) span{display:inline-block; padding-bottom:1px; border-bottom:1px solid #fff;}
.area_banner .desc .dep2 .check{margin:15px 0 0 0; color:#196456;}
.area_banner .desc .dep2 .check:before{content:''; display:inline-block; width:27px; height:17px; margin:5px; background:url(/images/content/icon_check.png) no-repeat 50%; vertical-align:middle;}

.marketing h4{margin-bottom:20px; font-size:28px; font-weight:500; color:#333;}
.marketing h4 > em{color:#3951cb; font-weight:600;}
.txt_map.marketing{border:none;}
.txt_map.marketing img{max-width:100%;}
.txt_map.marketing b{display:block; margin-bottom:20px; font-size:28px; font-weight:500; line-height:normal; color:#333;}
.online_marketing{position:relative; padding:100px 0; text-align:center; background:rgba(153,181,240,0.18);}
/*.online_marketing:before{content:''; display:block; position:absolute; bottom:-60px; right:60px; width:336px; height:270px; background:url(/images/content/online_bg.png)no-repeat 50% 50%;}*/
.online_marketing ul{margin-top:60px; font-size:0;}
.online_marketing ul li{display:inline-block; width:32%; margin-right:2%; margin-bottom:2%;}
.online_marketing ul li:nth-child(3n){margin-right:0;}
.online_marketing ul li .circle{display:inline-block; width:250px; height:250px; background:#fff; border-radius:50%; text-align:center; box-shadow:5px 5px 20px -2px rgba(0,0,0,0.13);}
.online_marketing ul li span{display:block; width:64px; height:53px; margin:70px auto 10px; background-repeat:no-repeat; background-position:50% 50%;}
.online_marketing ul li:nth-child(1) span{background-image:url(/images/content/icon_marketing01.png);}
.online_marketing ul li:nth-child(2) span{background-image:url(/images/content/icon_marketing02.png);}
.online_marketing ul li:nth-child(3) span{background-image:url(/images/content/icon_marketing03.png);}
.online_marketing ul li:nth-child(4) span{background-image:url(/images/content/icon_marketing08.png);}
.online_marketing ul li:nth-child(5) span{background-image:url(/images/content/icon_marketing07.png);}
.online_marketing ul li:nth-child(6) span{background-image:url(/images/content/icon_marketing09.png);}
.online_marketing ul li p{font-size:20px; font-weight:600;}

.advertisement{position:relative; padding:100px 0; text-align:center;}
/*.advertisement:before{content:''; display:block; position:absolute; left:40px; bottom:-60px; width:270px; height:216px; background:url(/images/content/online_bg02.png)no-repeat 50% 50%;}*/
.advertisement ul{margin-top:40px; font-size:0;}
.advertisement ul li{display:inline-block; width:33.3334%; height:250px; padding:20px; vertical-align:top; box-sizing:border-box; border-right:1px solid #51555d;}
.advertisement ul li:last-child{border-right-width:0;}
.advertisement ul li i{display:block; width:64px; height:53px; margin:0 auto; background-repeat:no-repeat; background-position:50% 50%;}
.advertisement ul li:nth-child(1) i{background-image:url(/images/content/icon_marketing04.png);}
.advertisement ul li:nth-child(2) i{background-image:url(/images/content/icon_marketing05.png);}
.advertisement ul li:nth-child(3) i{background-image:url(/images/content/icon_marketing06.png);}
.advertisement ul li span{display:block; margin:20px 0 10px; color:#333; font-size:22px; font-weight:600;}
.advertisement ul li p{font-size:16px; word-break:keep-all; font-weight:300; line-height:1.5;}

.progress{position:relative; padding:100px 0 60px; background-color:#f9f9f9; text-align:center;}
.progress ul{font-size:0;}
.progress ul li{position:relative; display:inline-block; width:22%; height:200px; margin-bottom:40px; padding:20px; margin-right:4%; background:#fff; vertical-align:top; border-radius:30px; box-shadow:5px 5px 20px -2px rgba(0,0,0,0.13); box-sizing:border-box;}
.progress ul li:nth-child(4n){margin-right:0;}
.progress ul li em{position:absolute; top:20px; left:20px; width:38px; height:38px; line-height:38px; background:#3a51c9; color:#fff; border-radius:100%; text-align:center; font-size:16px;}
.progress ul li span{display:block; margin:40px 0 10px; font-size:20px; font-weight:600;}
.progress ul li p{font-size:16px; word-break:keep-all; font-weight:300;}

@media all and (max-width:1399px){
    .inr{width:100%; padding:0 15px;}
	.portfolio_area ul > li .img{text-align:center;}
	.portfolio_area ul > li .img img{width:auto; height:100%; margin-left:-100%; margin-right:-100%;}
	
	.img_boxLR figure{width:45%; overflow:hidden; text-align:center;}
	.img_boxLR figure img{height:100%; margin-left:-100%; margin-right:-100%;}
	.img_boxLR > div{padding-left:50%;}
	
	.table_price colgroup col:nth-of-type(1){width:120px !important;}
	.table_price colgroup col:nth-of-type(2){width:70px !important;}
	
	.area_banner > * {padding:30px 50px;}
	.area_banner > .tit{width:35%;}
	.area_banner > .desc{width: 83%;}
	.area_banner .desc > ul > li{margin: 15px 30px;padding-left:0;}
	.area_banner .desc > ul > li:before{position:static; width:80px; height:80px; margin:0 auto; background-size:50%;}
	.area_banner .desc .dep2.tel{font-size:22px;}
	.area_banner .desc .dep2.tel span{font-size:16px;}
}

@media all and (max-width:1230px){
	.portfolio_area ul > li .img{height:300px;}
}

@media all and (max-width:1200px){
    .inr2{width:100%; padding:0 15px;}
}

@media all and (max-width:1100px){
	.list_process li span br{display:none;}
	.area_banner{display:block; background-size: auto;}
	.area_banner > *{display:inline-block; padding:20px;}
	.area_banner > .tit{width:100%; text-align:center;}
	.area_banner > .desc{width:100%; text-align: center;}	
	.area_banner .tit em {font-size: 30px;}
    .advertisement ul li{padding:10px;}
    .progress ul li{width:23%; margin-right:2%;}
}

@media all and (max-width:910px){
	.portfolio_area{padding:0 0 40px;}
	.portfolio_area ul > li .img{height:210px;}
	.portfolio_area ul > li .txt em{font-size:20px;}
	
	.img_boxLR figure{width:40%;}
	.img_boxLR > div{padding-left:45%;}
	
	.list_process li{width:calc(100% / 3); margin-bottom:20px;}
	.list_process li span{padding-right:10px; padding-left:10px;}
	.list_process li p:after{right:-24px;}
	.list_process li:nth-of-type(3) p:after{display:none;}
	.list_process li:nth-of-type(4){clear:left;}
    
    .advertisement ul li{display:block; width:80%; height:auto; margin:0 auto 20px; border-right:none;}
}

@media all and (max-width:850px){
    .online_marketing ul li .circle{width:200px; height:200px;}
    .online_marketing ul li p{font-size:18px;}
    .online_marketing ul li span{margin:50px auto 10px;}
    .progress ul li{width:49%;}
    .progress ul li:nth-child(2n){margin-right:0;}
}

@media all and (max-width:680px){
    .marketing h4{font-size:24px;}
    .online_marketing ul li{width:49%; box-sizing:border-box;}
    .online_marketing ul li:nth-child(2n){margin-right:0;}    
    .online_marketing ul li:nth-child(3n){margin-right:2%;}    
    .online_marketing ul li:last-child{margin-right:0;}
}

@media all and (max-width:640px){
	.img_boxLR p{font-size:17px;}
	
	.img_boxLR{min-height:auto; margin-top:40px;}
	.img_boxLR figure{display:none;}
	.img_boxLR > div{padding-left:0;}
    .advertisement ul li span{font-size:20px;}
    .advertisement ul li p{font-size:14px;}
    .progress ul li p{font-size:14px;}
}

@media all and (max-width:600px){
	.title_img em{font-size:18px;}
	
	.portfolio_area ul > li > a{margin-bottom:15px;}
	.portfolio_area ul > li{width:49%;}
	.portfolio_area ul > li:nth-child(3n+2){margin:0px;}
	.portfolio_area ul > li:nth-child(2n){float:right;}
	.portfolio_area ul > li .txt em{font-size:17px; word-break:break-all;}
	.portfolio_area ul > li .txt em:after{display:block; margin:5px auto 0;}
	.portfolio_area ul > li .txt i{font-size:14px;}
	
	.list_process li{width:50%;}
	.list_process li:nth-of-type(2) p:after,
	.list_process li:nth-of-type(4) p:after{display:none;}
	.list_process li:nth-of-type(3) p:after{display:block;}
	.list_process li:nth-of-type(4){clear:none;}
	.list_process li:nth-of-type(2n+1){clear:left;}
	
	.area_banner .desc > ul > li{display:block; margin:15px 10px;}
	.area_banner .desc > ul > li:before{width:80px; height:80px; background-size:50%;}
	.area_banner .desc .dep2.tel{font-size:22px;}
	.area_banner .desc .dep2.tel span{font-size:16px;}
}

@media all and (max-width:480px){
	.portfolio_area ul > li .img{height:150px;}	
    .progress ul li{width:100%; height:170px; margin-right:0;}
    .online_marketing ul li{width:100%; margin-right:0;}
}

@media all and (max-width:420px){
	.title_img em{width:98%; font-size:16px;}
	.img_boxLR h3{font-size:30px;}
	.about_txt div{float:none; width:auto;}	

	.price br{display:block;}	
	.list_process li p:after{right:-13px; width:25px; height:11px; background-size:100%;}	
	
	.area_banner .desc > ul > li{margin:15px 0; padding-left:0; text-align:center;}
	.area_banner .desc > ul > li:before{position:static; margin:0 auto;}
}