@charset "utf-8";
/* CSS Document */

/* 기본 */
body{ margin:0px; padding:0px; border:0px; font-family:Arial, Helvetica, sans-serif, "돋움"; background:url(../images/conect/bg.jpg);}
body *{ margin:0px; padding:0px; border:0px;}
li{list-style-type:none;}
.cb { clear:both;}
img{ border:none;}

/* 링크 */
a:link    {text-decoration:none; color:#CCC;}
a:visited {text-decoration:none; color:#CCC;}
a:active  {text-decoration:none; color:#CCC;}
a:hover   {text-decoration:none; color:#FFF;}



#wrap{ width:841px; margin:0 auto; }
#top{ position:relative; background:url(../images/conect/top_bg.jpg) no-repeat; width:841px; height:114px; margin-bottom:30px;}
#top2{ width:841px; height:114px; margin-bottom:30px;}
#top .logo{position:absolute; bottom:20px; left:30px;}
#top .ex{position:absolute; bottom:30px; right:30px;}
#top .btn1{ background:url(../images/conect/top_btn_bg.jpg) no-repeat; width:91px; height:25px; text-align:center; line-height:25px; font-size:11px; color:#CCC; position:absolute; top:5px; right:20px; cursor:pointer;}
#top .btn2{ background:url(../images/conect/top_btn_bg.jpg) no-repeat; width:91px; height:25px; text-align:center; line-height:25px; font-size:11px; color:#CCC; position:absolute; top:5px; right:120px; cursor:pointer;}
#top .btn3{ background:url(../images/conect/top_btn_bg.jpg) no-repeat; width:91px; height:25px; text-align:center; line-height:25px; font-size:11px; color:#CCC; position:absolute; top:5px; right:20px; cursor:pointer;}

/* 준비 페이지 */
#box1{ width:660px; margin:0 auto; padding:20px; background:#FFF; border-left:4px solid #CCC;border-right:4px solid #CCC;border-top:4px solid #CCC; overflow:hidden;}
#box1 .img{float:left;}
#box1 .text{ float:left; margin-top:10px;background:url(../images/conect/img/pre_1.png) no-repeat;width:492px; height:90px;}
#box1 h2{ display:none;}
#box1 p{ display:none;}
#box1 p strong{ text-decoration:underline; color:#6a788f;}


.program{ text-align:center;}

.btnbox{ background:url(../images/conect/img/pre_ex.png) 10px 15px no-repeat #f6f6f6; width:660px; height:30px; margin:0 auto;border-bottom:4px solid #CCC;border-left:4px solid #CCC;border-right:4px solid #CCC;padding:20px; position:relative; font-size:12px;}
.btnbox p{display:none; }
.btnbox strong{ color:#fe4e00;}
.btnbox span{position:absolute; right:20px; top:10px; cursor:pointer;;}


ol.how{ margin-top:20px;background:url(../images/conect/img/pre_2.png) no-repeat;width:640px; height:93px;}
.how li{ display:none; }
.how .l1{ background:url(../images/conect/how_bg.jpg) no-repeat; width:170px; height:59px;padding:20px 20px 20px 25px;}
.how .l2{ background:url(../images/conect/how_bg.jpg) no-repeat; width:175px; height:59px;padding:20px 20px 20px 25px;}
.how .l3{ background:url(../images/conect/how_bg.jpg) -430px 0 no-repeat; width:180px; height:59px;height:59px;padding:20px 20px 20px 25px;}


/* 준비 페이지 끝 */


#footer{ background-color:#d7d7d7; width:100%; font-size:11px; text-align:center; color:#666; line-height:500%; bottom:0px;}

#con { width:750px; margin:50px auto 0; position:relative;}
#con .click{background:url(../images/conect/img/num_01.png) no-repeat;padding:30px 0 0 0;}
#con .num{margin-top:40px;background:url(../images/conect/img/input_01.png) no-repeat;padding:30px 0 0 0;}
#con .h2{display:none; }
#con .h2 strong{color:#cc0000;}
#con .h2_1{ font-size:16px; border-bottom:2px dashed #CCC; font-weight:500; line-height:180%; font-weight:800;}

#con .call{ position:absolute; right:0px; top:-5px; background:url(../images/conect/call_bg.jpg) no-repeat; width:228px; height:39px; line-height:39px; text-align:center; color:#FFF; font-size:14px;}
#con .refresh{position:relative;  background:#888b90; font-size:12px; padding:10px; color:#d9dce4; }
#con .refresh span{ position:absolute; right:10px; top:5px; background:url(../images/conect/re_btn.jpg) no-repeat; width:85px; height:28px; display:inline-block; cursor:pointer;text-indent:-9999999px;}
#con .refresh .btn{ position:absolute; right:10px; top:5px; background:url(../images/conect/ative_btn.jpg) no-repeat; width:85px; height:28px; display:inline-block; cursor:pointer; text-indent:-9999999px;}
#con .refresh strong{ color:#FFF;}
.box_click{ background:#FFF; border-left:1px solid #F6F6F6;border-right:1px solid #F6F6F6;border-bottom:1px solid #F6F6F6;border-top:2px dashed #CCC;min-height:100px; overflow:hidden;}
.box_click p{ text-align:center; color:#79433f; font-size:14px; line-height:100px;}
.box_click .text{text-align:center; color:#79433f; font-size:14px; line-height:150%; margin-top:30px; }
.box_click .text strong{ font-size:12px; color:#C33;}

.box_click .img_li{  margin:20px 0px 0px 15px;overflow:hidden;}
.box_click .img_li li{ float:left; margin-left:20px; cursor:pointer;}
.box_click .img_li li span{ display:block; width:80px;text-align:center; font-size:12px; line-height:180%; margin-bottom:10px;}

.num{position:relative;}

.box_num{ background:#FFF; border-left:1px solid #F6F6F6;border-right:1px solid #F6F6F6;border-bottom:1px solid #F6F6F6;border-top:2px dashed #CCC; }
.box_num label{ background:url(../images/conect/img/input_text.png) 20px 28px no-repeat;text-indent:80px; font-size:12px; color:#069; display:inline-block;vertical-align:middle; text-align:center; width:200px; line-height:80px;}
.box_num input{ border:1px solid #6eacf6; background:#f3faff; padding:2px; font-size:12px;vertical-align:middle; width:200px;}
.box_num label strong{display:none;}
.num span{ display:block; position:absolute; top:40px; right:100px; background:url(../images/conect/accesscode_btn.jpg) no-repeat; width:193px; height:60px; text-indent:-999999px; cursor:pointer;}






.chat{position:relative;background:url(../images/conect/img/chat_bg_2.png) no-repeat; margin:20px 0 0 0; width:600px; height:120px;padding:30px 0 0 150px; }
.chat p{font-size:12px;display:none;}
.chat textarea{font-size:12px;border:1px solid #abb69b;width:410px; height:50px;margin:40px 0px 0px 0px;padding:2px;}
.chat a{cursor:pointer; }
.chat .btn{position:absolute;display:inline-block;background:url(../images/conect/chat_btn.png) no-repeat;width:100px; height:50px;margin:43px 0px 0px 10px;font-size:12px;cursor:pointer;}



body,div,a{
	font-family:Verdana,Tahoma,sans-serif;
	font-size:12px;
}


#chat_container {
	width:347px; 
	
	display:none;
	padding: 0; 
	margin: 0;

	background:#e9eaec;
	background-color:#e9eaec;
	overflow:hidden;
	
	
}
#content_container {

	font-family:'돋움'; 
	font-size:12px; 
	color:#666666;
	padding: 0px 10px 10px 10px;
	
}
#content_title {
	font-family:'돋움'; 
	font-size:12px; 
	color:#666666;
	height: 52px;
	overflow:hidden;
	padding: 0;
}


#content_ex {
	font-family:'돋움'; 
	font-size:12px; 
	color:#666666;
	
	overflow:auto;
	padding: 10px 10px 0px 10px;
}


#msginputdiv {
	position:relative;
	height:64px;
	background:#FFFFFF; 
	padding: 10px;
	
}
#msginputdiv .input1{width:210px; height: 40px;border:1px solid #abb69b;margin:10px 0px 0px 0px;padding:2px;}
#msginputdiv .input2{width:60px; height: 35px;}
#msginputdiv .btn{position:absolute;display:inline-block;background:url(../images/conect/chat_push.png) no-repeat;width:80px; height:40px;margin:10px 0px 0px 5px;font-size:12px;cursor:pointer;}


#chatmsg {
	height:320px;  
	overflow:auto; 
	background:#FFFFFF; 
	margin:5px 0px 5px 0px;
	padding: 5px;
	position:relative;

}

#systemmsg{font-size:11px; color:#ff7506;width:97%; height:18px; border:none;}
#systemalert{font-size:11px; color:#ff7506;width:97%; border:none; padding:2px;margin:5px;}


#customer .time{position:absolute;bottom:-15px; left:10px; font-size:8px;color:#666;}
#counselor .time{position:absolute;bottom:-15px; right:10px;font-size:8px;color:#666;}

/* 발신자 */

#chatmsg #customer{ }
#chatmsg #customer .balloon2_1 {
	position:absolute;top:-1px; left:-1px;
	background:url(../images/conect/balloon1_01.png) no-repeat;
	width:10px; height:10px;
	
}

#chatmsg #customer .balloon2_2 {
	position:absolute;top:-1px; right:-1px;
	background:url(../images/conect/balloon1_03.png) no-repeat;
	width:10px; height:10px;

	
	

}

#chatmsg #customer .balloon2_3 {
	position:absolute;bottom:-14px; left:-1px;
	background:url(../images/conect/balloon1_07.png) right top no-repeat;
	
	width:10px; height:22px;
	
	
	
	
}

#chatmsg #customer .balloon2_4{
	position:absolute;bottom:-14px; right:-1px;
	background:url(../images/conect/balloon1_09.png) no-repeat;
	width:24px; height:22px;

	

}

#chatmsg #customer .balloon2_text { 
	position:relative;
	float:right;
	background-color:#e8f0fa;
	background:#e8f0fa;
	font-family:'돋움'; line-height:1.2; color:#212121;
	word-break:break-all;
	display:block;
	padding:10px;
	border:1px solid #c2c2c2;
	min-width:40%; max-width:70%;
	_width:65%;
	margin:0 0 20px 0;
	
	
}




/* 수신자 */
#chatmsg #counselor{ }
#chatmsg #counselor .balloon1_1 {
	position:absolute;top:-1px; left:-1px;
	background:url(../images/conect/balloon2_01.png) no-repeat;
	width:10px; height:10px;
	
}
#chatmsg #counselor .balloon1_2 {
	position:absolute;top:-1px; right:-1px;
	background:url(../images/conect/balloon2_03.png) no-repeat;
	width:10px; height:10px;


}
#chatmsg #counselor .balloon1_3 {
	position:absolute;bottom:-11px;left:-1px; 
	background:url(../images/conect/balloon2_07.png) right top no-repeat;
	width:24px; height:20px;
	
}



#chatmsg #counselor .balloon1_4{
	position:absolute;bottom:-11px; right:-1px;
	background:url(../images/conect/balloon2_09.png) no-repeat;
	width:10px; height:20px;
}
#chatmsg #counselor .balloon1_text { 
	position:relative;
	float:left;
	background-color:#ffffe5;
	background:#ffffe5;
	font-family:'돋움'; line-height:1.2; color:#212121;
	word-break:break-all;
	display:block;
	padding:10px;
	border:1px solid #c2c2c2;
	min-width:40%; max-width:70%;
	_width:65%;
	margin:0 0 20px 0;
	
	
}




.cb{ clear:both;}