@charset "utf-8";

/* ==========================================================================
   contents
   ========================================================================== */

.float_qna {float:right; margin-top:-60px;}
.float_qna a:hover {color:#0090ff;}
.dot {padding-left:7px; position:relative;display:block;}
.dot:before {content:"";display:block;width:2px; height:2px;background:#000; position:absolute; top:9px; left:0}

/* 콜센터 아웃소싱 - 개요 */
.outline_txt ,.compo_txt {line-height:24px;padding-bottom:50px;}
.outline_list {padding-bottom:50px;}
.outline_list li {float:left;width:29.8%;;margin-left:5.3%;padding-top:13px;}
.outline_list li:first-child {margin-left:0;}
.outline_list li > div {position:relative;border: solid #606770; border-width:1px 0 1px 0;padding:28px 20px;box-sizing:border-box;min-height:144px}
.outline_list li span{display:block;width:74px; height:26px; text-align:center; line-height:26px;margin:0 auto;position:absolute;top:-14px;left:50%;margin-left:-37px;background:#fff;z-index:1;background:url("../images/callcenter/bg_pro.png") 0 0 no-repeat;}
.outline_list li span + p {padding-bottom:10px;}
.outline_list li p {padding-left:7px; position:relative;}
.outline_list li p:before {content:"";display:block;width:2px; height:2px;background:#000; position:absolute; top:9px; left:0}
.outline_img {margin:0 auto;max-width:435px;}
.outline_img img {width:100%;}

/* 콜센터 아웃소싱 - 서비스구성 */
.compo_list_wrap {position:relative;}
.compo_list_wrap h2.compo_tit {width:284px; height:284px; background: url("../images/callcenter/bg_compo.png") 0 0 no-repeat;background-size:100% 100%;position:absolute;top:24.5%;left:50%;margin-left:-142px;font-size:30px; font-weight:bold;color:#fff;text-align:center;padding-top:90px;box-sizing:border-box;z-index:2;}
.compo_list_wrap .compo_list {position:relative;}
.compo_list_wrap .compo_list:before,
.compo_list_wrap .compo_list:after {content:"";display:block; width:100%; height:1px;position:absolute;top:50%;left:0;background:#606770;}
.compo_list_wrap .compo_list:after { width:1px; height:100%;top:0;left:50%}
.compo_list_wrap .compo_list li{float:left;width:50%;height:280px; box-sizing:border-box;padding:30px 10px 0 50px;}
.compo_list_wrap .compo_list li:first-child + li {padding:30px 0 0 122px;}
.compo_list_wrap .compo_list li:first-child + li + li {padding:138px 0 0 50px;}
.compo_list_wrap .compo_list li:first-child + li + li + li {padding:138px 0 0 122px;}
.compo_list_wrap .compo_list li dt {color:#0090ff; font-weight:bold;font-size:14px;padding-bottom:10px;}
.compo_list_wrap .compo_list li dd {padding-left:7px; position:relative;margin-left:-7px;}
.compo_list_wrap .compo_list li dd:before {content:"";display:block;width:2px; height:2px;background:#000; position:absolute; top:9px; left:0}

/* 콜센터 아웃소싱 - 운영 */
.history_txt {line-height:24px;}
.history_txt span {display:block;}
.history_img {text-align:center;}
.history_img img {max-width:100%}

/* 외색배달 플랫폼 - 외식배달 모바일 플랫폼 */
.pos .pos_list li {position:relative;width:31.5%;float:left;text-align:center;background-color:#f8f8f3; line-height:46px;margin:0 0 16px 2.7%;}
.pos .pos_list li:first-child,
.pos .pos_list li:first-child + li + li + li {margin:0 0 16px 0;}
.pos .pos_list li .img{position:relative;display:block;overflow:hidden;}
.pos .pos_list li .bg_border {z-index: 0;position: absolute;top: 0;bottom: 0;left: 0;right: 0; border: 1px solid #000;opacity: .08;}

/* 외색배달 플랫폼 - Saas */
.saas_img li {float:left;}
.saas_img li:first-child + li {margin-left:16px;}
.saas_img li img ,.saas_img2 img{max-width:100%}

/* 외색배달 플랫폼 - 웹에이전시 */
.step_area ul {position:relative;margin-bottom:43px;}
.step_area ul:after {content:none;display:block; width:100%; height:1px; background:#606770;position:absolute;top:0;left:0 ;}
.step_area li {float:left;width:25%;position:relative;text-align:center;padding-bottom:30px;}
.step_area li:after {content:"";display:block;width:10px; height:7px; position:absolute;top:49px;left:0;background:url("../images/business/bullet_saas.png") 0 0 no-repeat;}
.step_area li:first-child:after, .step_area li.step5:after{content:none;} 
.step_area li strong{display:block;position:relative;margin-top:10px;}

.step_area li span {display:inline-block; background:#fff;position:relative;z-index:2;padding:0 5px;}
.step_area li strong:before, .step_area li strong:after{content:'';display:block;width:50%;height:1px;position:absolute;top:50%;background:#606770;}
.step_area li strong:before{left:0;}
.step_area li strong:after{right:0;}

/* 외식배달 플랫폼 - 콜센터 아웃소싱 플랫폼 */
.callMediate .tab_cont {display:none;}
.callMediate .callcenter_img {text-align:center}
.callMediate .callcenter_img img {max-width:100%;}
.callMediate .callcenter_img img:first-child {margin-bottom:70px;}
.callMediate p {line-height:24px;}

/* 외식배달 플랫폼 - 외식배달 인터넷 플랫폼 */
.InternetMediate p {line-height:24px;}
.InternetMediate .table td.list li{float:left;width:50%}
.interPlat_img {text-align:center;margin-top:60px;}
.interPlat_img img {max-width:100%;}

@media only screen and (max-width:740px){
.outline_list li ,.outline_list li:first-child {float:none; width:97%;margin:0 auto 20px;}

.compo_list_wrap {padding-top:140px;}
.compo_list_wrap h2.compo_tit {width:142px; height:142px;top:0;left:50%;margin-left:-71px;padding-top:45px;font-size:17px;}
.compo_list_wrap .compo_list li,
.compo_list_wrap .compo_list li:first-child + li,
.compo_list_wrap .compo_list li:first-child + li + li ,
.compo_list_wrap .compo_list li:first-child + li + li + li {height:200px;padding:20px 0 0 20px;}

.pos .pos_list {margin:0 auto;width:463px;}
.pos .pos_list li {width:47%; max-width:220px;margin:0 0 16px 0;}
.pos .pos_list li:first-child + li, .pos .pos_list li:first-child + li + li + li{margin:0 0 16px 2.7%;}

.saas_img li {width:45%;}

/* 외색배달 플랫폼 - 웹에이전시 */
.step_area li {width:50%;}
.step_area li:after{top:51px;}
.step_area li strong:before, .step_area li strong:after{margin-top:2px;}
.step_area li.step3, .step_area li.step7{float:right;}
.step_area li:before{content:'';display:block;position:absolute;width:1px;height:50%;}
.step_area li.step2:before{background:#606770;right:0;bottom:0;}
.step_area li.step3:before{background:#606770;right:0;top:0;}
.step_area li.step3:after,.step_area li.step7:after{transform:rotate(-180deg)}
.step_area li.step4:before{background:#606770;left:0;bottom:0;}
.step_area li.step5:before{background:#606770;left:0;top:0;}
.step_area li.step6:before{background:#606770;right:0;bottom:0;}
.step_area li.step7:before{background:#606770;right:0;top:0;}
.step_area li.step4:after, .step_area li.step8:after{content:none;}
}
@media only screen and (max-width:600px){
.float_qna {margin-top:-30px;}
.outline_list li > div {min-height:auto}

.compo_list_wrap .compo_list li,
.compo_list_wrap .compo_list li:first-child + li,
.compo_list_wrap .compo_list li:first-child + li + li ,
.compo_list_wrap .compo_list li:first-child + li + li + li{float:none;width:70%;height:auto;text-align:center;margin:0 auto;padding:20px 0 20px 0;}
.compo_list_wrap .compo_list:before,
.compo_list_wrap .compo_list:after {display:none;}

.pos .pos_list {width:auto;}
.pos .pos_list li,
.pos .pos_list li:first-child,
.pos .pos_list li:first-child + li,
.pos .pos_list li:first-child + li + li + li {width:100%;;margin:0 auto 16px;float:none}

.callMediate .callcenter_img img:first-child {margin-bottom:35px;}
.interPlat_img {margin-top:30px;}
}