@charset "utf-8";
/*
 Layout.css
*/

/***** layout *****/
body { min-width: 1320px; background: #f6f6f6; color: #555; font-family: 'Nanum Gothic', 'Malgun Gothic', 'Myriad Pro', Apple Gothic, arial, helvetica, sans-serif !important; font-size: 13px; font-weight: 600; line-height: 20px; -webkit-text-size-adjust: none; -webkit-overflow-scrolling: touch; word-wrap: break-word; word-break: keep-all; white-space: normal; } 
#wrap { position: relative; width: 100%; background: #f6f6f6; overflow: hidden; } 
button { cursor: pointer; outline: none; } 

/*** loader ***/
.sloader { position: fixed; z-index: 9999999; width: 200px; height: 110px; border: 1px solid #aaa; border-radius: 4px; padding: 15px; box-sizing: border-box !important; background: #fff; -webkit-box-shadow: 3px 3px 8px -3px rgba(0, 0, 0, 0.67); box-shadow: 3px 3px 8px -3px rgba(0, 0, 0, 0.67); } 
.sloader>span { display: inline-block; width: 100%; text-align: center; font-size: 16px; } 
.sspinner { position: relative; margin: 10px auto; width: 35px; height: 35px; border: 5px solid #ddd; border-radius: 50%; border-top: 5px solid #3498db; border-bottom: 5px solid #3498db; -webkit-animation: lspin 1s linear infinite; /* Safari */
 animation: lspin 1s linear infinite; } 

/*** Header ***/
header { position: fixed; left: 0; top: 0; width: 100%; height: 60px; text-align: center; z-index: 100; transition: height 0.4s; } 
header .header_cont { height: 60px; transition: all 0.4s; background: rgba(15, 19, 30, 0.9); } 
header h1.logo { position: absolute; left: 20px; top: 15px; } 
header h1.logo a { display: block; width: 146px; height: 23px; background: url(../../_images/new/layout/img_logo_b.svg) center /100% 100% no-repeat; text-indent: -9999px; overflow: hidden; } 
a.login_info { color: #777 !important; padding: 10px 20px !important; line-height: 28px; } 
a.login_info img { width: 28px !important; height: 28px !important; display: inline-block; vertical-align: middle; margin-right: 5px; } 
a.join { color: #777 !important; padding: 10px 0 !important; line-height: 28px; } 
#menu-wrap { /*width: 685px;float:left; */
 position: absolute; right: 0; z-index: 1000; top: 5px; } 
#menu,
#menu ul { margin: 0; padding: 0; list-style: none; } 
#menu { font-family: "Myriad Pro", 'Roboto', sans-serif; font-weight: normal; } 
#menu:before,
#menu:after { content: ""; display: table; } 
#menu:after { clear: both; } 
#menu { zoom: 1; } 
#menu li { float: left; position: relative; } 
#menu li.log { margin-left: 50px; } 
#menu a { float: left; /*padding: 12px 30px; */
 padding: 12px 50px; color: #333; text-decoration: none !important; font-size: 17px !important; /*vertical-align:top; */
 margin: 0; /*line-height:1.2em; */
 display: inline-block; } 
#menu li:hover>a { color: #5474ff; } 
*html #menu li a:hover { /* IE6 only */
 color: #fafafa; } 
#menu ul { margin: 20px 0 0 10; _margin: 0; /*IE6 only*/
 opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 10000000000; background: #fff; border: 1px solid #ddd; border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; text-align: left; font-size: 10pt; padding: 10px; } 
#menu li:hover>ul { opacity: 1; visibility: visible; margin: 0; } 
#menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/
 -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, .3); -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, .3); box-shadow: -1px 0 0 rgba(255, 255, 255, .3); } 
#menu ul li { float: none; display: block; border: 0; } 
#menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } 
#menu ul a { padding: 10px; width: 150px; _height: 10px; /*IE6 only*/
 /*display: block; */
 display: flex; justify-content: flex-start; align-items: center; white-space: nowrap; float: none; text-transform: none; text-align: left; font-size: 10pt !important; border-radius: 5px; } 
#menu ul a:hover { background-color: #4769fe; color: #fff; } 
#menu .smenu { color: #777 !important; margin-left: 5px; } 
#menu .smenu:hover { color: #fafafa !important; margin-left: 5px; } 
#menu ul li a>div { height: 100%; display: inline-flex; column-gap: 5px; justify-content: flex-start; align-items: center; } 
#menu ul li a>div span { line-height: 25px; } 
#menu ul li a>div .icon { width: 24px; height: 24px; background-color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 5px; background-size: 14px 14px; background-position: center; background-repeat: no-repeat; } 
#menu>li:nth-child(1)>ul>li:nth-child(1)>a>div .icon { background-image: url("../../_images/img/menu/ico_ddm1.svg"); background-color: #4769FE; } 
#menu>li:nth-child(1)>ul>li:nth-child(5)>a>div .icon { background-image: url("../../_images/img/menu/ico_ddm2.svg"); background-color: #4E58CC; } 
#menu>li:nth-child(1)>ul>li:nth-child(6)>a>div .icon { background-image: url("../../_images/img/menu/ico_ddm3.svg"); background-color: #41C6D2; } 
#menu>li:nth-child(1)>ul>li:nth-child(7)>a>div .icon { background-image: url("../../_images/img/menu/ico_ddm4.svg"); background-color: #FD4541; } 
#menu>li:nth-child(1)>ul>li:nth-child(8)>a>div .icon { background-image: url("../../_images/img/menu/ico_ddm5.svg"); background-color: #D1AB6D; } 
#menu>li:nth-child(1)>ul>li:nth-child(9)>a>div .icon { background-image: url("../../_images/img/menu/ico_ddm6.svg"); background-color: #C01E82; } 
#menu>li:nth-child(1)>ul>li:nth-child(10)>a>div .icon { background-image: url("../../_images/img/menu/ico_ddm7.svg"); background-color: #2CB92F; } 
#menu>li:nth-child(1)>ul>li:nth-child(11)>a>div .icon { background-image: url("../../_images/img/menu/ico_ddm8.svg"); background-color: #F07606; } 
#menu>li:nth-child(1)>ul>li:nth-child(1)>a:hover { background-color: #4769FE; color: #fff; } 
#menu>li:nth-child(1)>ul>li:nth-child(1)>a:hover>div .icon { background-image: url("../../_images/img/menu/ico_ddm1_a.svg"); background-color: #fff; } 
#menu>li:nth-child(1)>ul>li:nth-child(5)>a:hover { background-color: #4E58CC; color: #fff; } 
#menu>li:nth-child(1)>ul>li:nth-child(5)>a:hover>div .icon { background-image: url("../../_images/img/menu/ico_ddm2_a.svg"); background-color: #fff; } 
#menu>li:nth-child(1)>ul>li:nth-child(6)>a:hover { background-color: #41C6D2; color: #fff; } 
#menu>li:nth-child(1)>ul>li:nth-child(6)>a:hover>div .icon { background-image: url("../../_images/img/menu/ico_ddm3_a.svg"); background-color: #fff; } 
#menu>li:nth-child(1)>ul>li:nth-child(7)>a:hover { background-color: #FD4541; color: #fff; } 
#menu>li:nth-child(1)>ul>li:nth-child(7)>a:hover>div .icon { background-image: url("../../_images/img/menu/ico_ddm4_a.svg"); background-color: #fff; } 
#menu>li:nth-child(1)>ul>li:nth-child(8)>a:hover { background-color: #D1AB6D; color: #fff; } 
#menu>li:nth-child(1)>ul>li:nth-child(8)>a:hover>div .icon { background-image: url("../../_images/img/menu/ico_ddm5_a.svg"); background-color: #fff; } 
#menu>li:nth-child(1)>ul>li:nth-child(9)>a:hover { background-color: #C01E82; color: #fff; } 
#menu>li:nth-child(1)>ul>li:nth-child(9)>a:hover>div .icon { background-image: url("../../_images/img/menu/ico_ddm6_a.svg"); background-color: #fff; } 
#menu>li:nth-child(1)>ul>li:nth-child(10)>a:hover { background-color: #2CB92F; color: #fff; } 
#menu>li:nth-child(1)>ul>li:nth-child(10)>a:hover>div .icon { background-image: url("../../_images/img/menu/ico_ddm7_a.svg"); background-color: #fff; } 
#menu>li:nth-child(1)>ul>li:nth-child(11)>a:hover { background-color: #F07606; color: #fff; } 
#menu>li:nth-child(1)>ul>li:nth-child(11)>a:hover>div .icon { background-image: url("../../_images/img/menu/ico_ddm8_a.svg"); background-color: #fff; } 

/*** Container ***/
#container { position: relative; padding-top: 25px; /*margin-top:58px*/}
/*
.blue_list h1 { background:url("../../_images/new/layout/cels.png") right; } 
.green_list h1 { background:url("../../_images/new/layout/cels2.png") right; } 
*/
#container .main_pro { max-width: 1320px; text-align: center; margin: 0 auto}
#container .mv1 { margin: 20px 0px 30px 0px}
#container .mv1 li { display: inline; margin: 5px 20px; border: 1px solid #f6f6f6; background: #f6f6f6; padding: 5px 20px 8px 20px; border-radius: 10px; color: #000; cursor: pointer; } 
#container .mv1 li:hover { border: 1px solid #fff; background: #fff; color: #486aff}
#container .mv1 .tab_on { border: 1px solid #fff; background: #fff; color: #486aff}
#container .cl { clear: both}
#container .cs_info li:nth-child(4n+4) { margin-right: 0px}
#container .cs_info li { position: relative; margin-right: 20px; margin-bottom: 20px; width: 315px; height: 330px; border-radius: 15px; float: left}
#container .cs_info li a { position: relative; display: block; } 
#container .blue_list { background: #7b96e0}
#container .green_list { background: #60ba73}
#container .cs_info li div.info { background: #fff; height: 137px; border-radius: 0px 0px 10px 10px}
#container .cs_info li div.info .mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0); border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.05); } 
#container .cs_info li h1 { position: relative; width: 100%; height: 193px; background-repeat: no-repeat; background-position: center top; background-size: cover; border-top-left-radius: 15px; border-top-right-radius: 15px; } 
#container .cs_info li h1 .cs_type { position: absolute; top: 10px; left: 15px; display: inline-block; font-size: 11px; font-weight: 400; color: #fff; padding: 1px 5px; border-radius: 4px; background-color: #7b96e0; box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.3); text-align: center; width: 50px; } 
.cs_type.chatbot { background-color: #7b96e0; } 
.cs_type.callbot { background-color: #60ba73 !important; } 
.cs_type.topic { background-color: #60ba73 !important; } 
#container .cs_info h2 { padding: 15px; text-align: left; color: #000; font-size: 13pt}
#container .cs_info h2 span { color: #707070; font-size: 9pt; font-weight: bold}
#container .cs_info h2 img { width: 40px; height: 40px; border-radius: 80px; float: left; margin-right: 15px}
#container .cs_info h2 .cs_thumb { display: block; width: 40px; height: 40px; float: left; margin-right: 15px; background-repeat: no-repeat; background-position: center top; background-size: cover; border-radius: 50%; } 
#container .cs_info h3 { display: block; display: -webkit-box; overflow: hidden; height: 44px; box-sizing: border-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 0 15px; margin: 0; text-align: left; color: #333; font-size: 10pt; font-weight: 400; letter-spacing: -1px; line-height: 20px; word-break: normal; } 

/** visual_area **/
.visual_area { height: 172px; } 
.visual_area .img { height: 174px; } 

/** chat_area **/
.openMask { background: url("../../_images/new/layout/chat_btn.png"); height: 96px; width: 96px; z-index: 10000000000; position: fixed; right: 20px; bottom: 50px; cursor: pointer; } 
#chat { width: 322px; position: fixed; bottom: 160px; right: 20px; z-index: 1000000; height: 643px; background: #fff; border: 1px solid #ddd; border-radius: 10px; display: none}
#chat .h1 { background: #344184; border-radius: 10px 10px 0px 0px; margin: 0px; height: 55px; text-align: left; font-size: 12pt; font-weight: bold; padding: 0px; line-height: 3.2em; color: #fff; padding-left: 20px}
#chat .chat_ment { height: 520px; overflow-y: scroll; overflow-x: hidden; }
#chat .mge_area { height: 45px; bottom: 0px; border-top: 1px solid #ddd; box-shadow: 0px -5px 8px -5px #ddd; padding: 10px}
#chat .mge_area input { border: 0px; width: 260px}
#chat .bam_massage { margin: 20px 15px; padding: 0px; font-size: 10pt; font-weight: normal; } 
#chat .bam_massage .ba_left { background: url("../../_images/new/contents/bg_bam.png") bottom no-repeat; width: 13px; float: left; height: 70px; margin: 0px}
#chat .bam_massage .ba_right { background: #f2f2f2; border-radius: 10px 10px 10px 0px; float: left; height: 40px; padding: 15px; width: 235px; } 
#chat .bam_massage span { background-color: #105fae; text-decoration: none; color: #fff; padding: 10px; border-radius: 10px; margin: 10px}
#chat .chat_ment .bam_massage .chat_header { background: url("../../_images/new/contents/g_m01.png") no-repeat; width: 288px; height: 9px; margin-top: 10px}
#chat .chat_ment .bam_massage .chat_body { background: url("../../_images/new/contents/g_m03.png"); padding-left: 20px; width: 268px}
#chat .chat_ment .bam_massage .chat_footer { background: url("../../_images/new/contents/g_m02.png"); width: 288px; height: 9px}
#chat .com_input { border: 1px solid #ddd; border-radius: 10px; margin: 15px; padding: 10px; } 
#chat .com_input h3 { padding: 15px; font-size: 10pt}
#chat .com_input input { border: 1px solid #ddd; margin: 3px 0; padding: 8px; border-radius: 6px; width: 100%; font-weight: normal; font-size: 14px; } 
#chat .com_input button { background: #344184; color: #fff; border-radius: 10px; width: 100%; padding: 15px 0px; } 
#chat .com_input textarea { border: 1px solid #ddd; margin: 3px 0; border-radius: 6px; padding: 8px; width: 100%; height: 130px; font-weight: normal; font-size: 14px; } 
#mask { position: absolute; left: 0; top: 0; z-index: 9000; background-color: #000; display: none; } 
.close { float: right; padding: 10px; margin-top: 10px}
#chat .chat_ment .g-recaptcha { transform:scale(0.83); transform-origin:0 0; }

/** navi_menu **/
.navi_menu { position: relative; height: 45px; background: #fff; border-bottom: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; box-sizing: border-box; z-index: 1; } 
.navi_menu_cont { position: relative; } 
.navi_menu_cont:after { display: block; clear: both; height: 0; content: ""; overflow: hidden; } 
.navi_menu .home { display: none; } 
.navi_menu .li { display: none; position: relative; width: 100%; } 
.navi_menu .li:last-child { display: block; } 
.navi_menu .li a { position: relative; display: block; color: #444; font-size: 13px; font-weight: 600; line-height: 45px; text-align: center; overflow: hidden; transition: all 0.4s; } 
.navi_menu .li a.link { height: 45px; padding: 0 20px; } 
.navi_menu .li a.link:before { position: absolute; right: 20px; top: 19px; width: 13px; height: 1px; background: #7f7f7f; content: ""; transition: all 0.4s; } 
.navi_menu .li a.link:after { position: absolute; right: 20px; top: 22px; width: 13px; height: 1px; background: #7f7f7f; content: ""; transition: all 0.4s; } 
.navi_menu .li:after { position: absolute; right: 20px; top: 25px; width: 13px; height: 1px; background: #7f7f7f; content: ""; transition: all 0.4s; } 
.navi_menu .li .dep { display: none; position: absolute; left: -1px; top: 44px; width: 100%; animation: fade both 0.4s; } 
.navi_menu .li .dep ul { display: block; background: #fff; border: 1px solid #e5e5e5; box-sizing: border-box; } 
.navi_menu .li .dep li a { padding: 0 20px; outline: none; } 
.navi_menu .li .dep li a:hover,
.navi_menu .li .dep li a:focus { background: #f7f7f7; } 
.navi_menu .li .dep li.on { padding: 0 0; background: #f7f7f7; color: #000; cursor: default; } 
.navi_menu .li.act a.link { color: #000; } 
.navi_menu .li.act a.link:before { background: #000; } 
.navi_menu .li.act a.link:after { background: #000; } 
.navi_menu .li.act:after { background: #000; } 
.navi_menu .li.act .dep { display: block; } 
.navi_menu .hit_st,
.navi_menu .hit_ed { display: none; } 
.navi_menu { height: 42px; } 
.navi_menu_cont { position: relative; width: 1200px; margin: 0 auto; border-right: 1px solid #ddd}
.navi_menu .li a { font-size: 16px; line-height: 45px; text-align: left; float: left}
.navi_menu_area li { float: left; line-height: 3em; padding: 0px 10px}
.navi_menu_area .dep01_li { background: url("../../_images/new/contents/title_next.gif") no-repeat right; width: 80px}
.navi_menu_area .dep02_li { font-weight: 300; margin-left: 20px}
.navi_menu_area .dep02_li:hover { font-weight: 400; margin-left: 20px}
.navi_menu .dep02_lion { font-weight: 400; margin-left: 20px}

/** Title **/
.title { position: absolute; left: 0; top: 88px; width: 100%; color: #fff; font-size: 25px; font-weight: 700; line-height: 40px; text-align: center; letter-spacing: 1px; z-index: 1; transition: all 0.4s; } 
.title em { display: block; margin-top: 7px; font-family: 'Roboto'; font-size: 11px; font-weight: normal; line-height: 11px; letter-spacing: 5.5px; transition: all 0.4s; } 
.b_tit { margin-bottom: 30px; color: #222; font-size: 26px; font-weight: 900; line-height: 26px; text-align: center; transition: all 0.4s; } 
.t_tit { margin-bottom: 15px; color: #222; font-size: 18px; line-height: 26px; transition: all 0.4s; } 
.txt_sub { margin: -14px 0 26px 0; color: #373737; font-size: 15px; line-height: 20px; text-align: center; } 

/*** cont_area ***/
.wcontent { position: relative; margin: 75px 0 40px; } 
.wcontent:after { clear: both; display: block; content: ''; } 
.cont_area { position: relative; min-height: 300px; margin: 45px 20px 60px 20px; transition: all 0.4s; } 
.cont { position: relative; } 
.cont_bg { position: relative; background: #fbfaf9; margin: 0 -20px; padding: 0 20px; } 

/*** footer ***/
footer { position: relative; } 
.footer_nav { display: none; } 
/** footer_cont **/
.footer_cont { position: relative; padding: 30px 20px; } 
/* address */
address { position: relative; padding-top: 30px; color: #fff; font-style: normal; font-size: 12px; line-height: 18px; text-align: center; font-weight: 300}
/*address:before { position:absolute; left:50%; top:0; width:158px; height:32px; margin-left:-65px; background:url(../../_images/new/btn_logo.png) center /100% 100% no-repeat; content:""; } */
address span { display: inline-block; position: relative; padding-left: 16px; } 
address span:before { display: none; } 
/* footer_nav02 */
.footer_nav02 { margin-top: 30px; } 
.footer_nav02 ul { display: table; table-layout: fixed; width: 100%; } 
.footer_nav02 li { display: table-cell; vertical-align: top; } 
.footer_nav02 li a { display: block; height: 26px; margin: 0 2px; background: #282627; border: 1px solid #161616; border-radius: 4px; box-sizing: border-box; color: rgba(255, 255, 255, 0.45); font-size: 12px; line-height: 26px; text-align: center; overflow: hidden; transition: all 0.4s; } 
.footer_nav02 li a:hover { background: #161616; color: #fff; } 

/** copyrigth **/
.copyright { position: relative; margin-top: 20px; font-size: 11px; font-weight: normal; line-height: 10px; } 

body { font-size: 17px !important; } 
.m_view { display: none; } 
/*** Header ***/
header .header_cont { position: relative; width: 100%; height: 75px; border-bottom: 1px solid #f2f2f2; margin: 0 auto; background: #fff; line-height: 1.2em}
header .header_top { position: relative; width: 1320px; height: 100%; margin: 0 auto; } 
header .header_top form { height: 100%; } 
header h1.logo { position: relative; width: 250px; height: 100%; left: inherit; top: inherit; margin-top: 0; margin-bottom: 0; } 
header h1.logo a.bottalks { width: 262px; height: 38px; background: url(../../_images/new/layout/img_logo_b.svg) left center / 100% 100% no-repeat; } 
header h1.logo a.bottalks.palette { width: 200px; background-image: url(../../_images/new/layout/logo_palette.png); } 

/*** Gnb ***/
#gnb { display: block; position: absolute; width: 720px; padding: 0 0 0 0px; background: none; animation: none; left: 50%; margin-left: -40px}
#gnb .gnb_nav { display: table; table-layout: fixed; width: 100%; height: inherit; border: 0; } 
#gnb .dep { display: table-cell; border-top: 0; vertical-align: top; font-family: Myriad Pro}
#gnb .dep_m { height: 55px; padding: 0 5px; background: none; color: #333; font-size: 16px; font-weight: 400; line-height: 55px; text-align: center; } 
#gnb .dep_m:hover { height: 55px; padding: 0 5px; background: none; color: #5474ff; font-size: 16px; font-weight: 400; line-height: 55px; text-align: center; } 
#gnb .dep_m:before { display: none; } 
#gnb .dep_m:after { display: none; } 
#gnb .dep_m span { display: inline-block; position: relative; } 
#gnb .dep_m span:before { display: block; position: absolute; left: 50%; top: inherit; bottom: 0; width: 0%; height: 3px; background: #213156; content: ""; transition: all 0.3s; } 
#gnb .dep_m.on span:before,
#gnb .dep_m.over span:before,
#gnb .dep_m:hover span:before { left: 0; width: 100%; } 
#gnb .log_m { height: 55px; padding: 0 5px; background: none; color: #757575; font-size: 16px; font-weight: 400; text-align: center; padding-top: 20px}
#gnb .log_m img { padding: 0px 10px}
.search { border: 2px solid #344184; padding: 5px; position: absolute; margin-left: 290px; top: 10px}
.search .none_input { border: 0px; width: 300px}
.search .sbtn { display: inline-block; width: 24px; height: 21px; background: url(/layouts/chatbot-desktop2/_images/new/layout/zoom.png) no-repeat; vertical-align: middle; } 
/* gnb 2depth menu */
#gnb .dep2 { display: none; padding-top: 30px; overflow: hidden; animation: fade both 0.4s 0.1s; font-weight: 300}
#gnb .over .dep2 { display: block; border-top: 0; } 
#gnb .dep2.over { display: block; } 
#gnb .li_dep { background: none; } 
#gnb .li_dep li { border-top: 0; } 
#gnb .li_dep .dep_m2 { padding: 7px 5px 6px 5px; text-align: center; } 
#gnb .li_dep .li.over .dep_m2,
#gnb .li_dep .dep_m2:hover,
#gnb .li_dep .dep_m2:focus { background: none; color: #fff}
#gnb .rangli { max-width: 80px}
#gnb .rang { margin-top: 25px; background: #0f131e; border: 1px solid #fff; color: #fff; padding: 10px 20px; border-radius: 20px; margin-left: 30px}

/* btn_m_gnb */
.btn_m_gnb_op.on { display: none; } 
.btn_m_gnb_cl.on { display: none; } 

/* Active */
header.over .header_cont { height: 272px}
header.over #gnb .dep2 { display: block; } 

/*** Container ***/

/** visual_area **/
.visual_area { height: 272px; } 
.visual_area .img { height: 274px; } 

.foot_line { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 20px 10px; font-size: 10pt; font-weight: 400; text-align: right}
.foot_line img { float: left; width: auto !important; height: auto !important; } 
.foot_line a { color: #555; text-decoration: none !important; } 
.foot_line a:hover { color: #7b96e0}

/** navi_menu **/
.navi_menu { height: 53px; } 
.navi_menu_cont { position: relative; width: 1200px; margin: 0 auto; border-right: 1px solid #ddd}
.navi_menu .li a { font-size: 16px; line-height: 45px; text-align: left; float: left}
.navi_menu_area li { float: left; line-height: 3em; padding: 0px 10px}
.navi_menu_area .dep01_li { background: url("../../_images/new/contents/title_next.gif") no-repeat right; width: 110px}
.navi_menu_area .dep02_li { font-weight: 300; margin-left: 20px}
.navi_menu_area .dep02_li:hover { font-weight: 400; margin-left: 20px}
.navi_menu .dep02_lion { font-weight: 400; margin-left: 20px}
.home_ico { background: url("../../_images/new/contents/title_home.gif") no-repeat; width: 50px; height: 50px; border-left: 1px solid #ddd; } 
/** Title **/
.title { top: 150px; font-size: 37px; line-height: 62px; letter-spacing: 2px; } 
.title em { margin-top: 13px; font-size: 17px; line-height: 17px; letter-spacing: 10px; } 
.b_tit { margin-bottom: 60px; font-size: 42px; line-height: 42px; } 
.t_tit { margin-bottom: 40px; font-size: 33px; line-height: 42px; } 
.txt_sub { margin: -38px 0 54px 0; font-size: 22px; line-height: 30px; } 

/*** cont_area ***/
.cont_area { margin: 100px 50px 150px 50px; } 
.cont { width: 1200px; margin: 0 auto; } 
.cont_bg { margin: 0 -50px; padding: 0; } 

/*** footer ***/
/** footer_nav **/
.footer_nav { display: block; } 
.footer_nav>ul { display: table; table-layout: fixed; width: 1320px; margin: 0 auto; padding: 0 0px; } 
.footer_nav .li { display: table-cell; border-right: 1px solid #2f2f2f; padding: 25px 10px 23px 10px; text-align: center; vertical-align: top; line-height: 18px; } 
.footer_nav .li:first-child { border-left: 1px solid #2f2f2f; } 
.footer_nav .li>a { display: block; margin-bottom: 5px; padding: 5px; color: #333; font-size: 15px; transition: all 0.4s; } 
.footer_nav .li>a:hover { color: #213156; } 
.footer_nav .li li a { display: block; padding: 5px; color: rgba(255, 255, 255, 0.3); font-size: 14px; transition: all 0.4s; } 
.footer_nav .li li a:hover { color: #3333; } 

/** footer_cont **/
.footer_cont { width: 1320px; margin: 0 auto; font-family: 'Nanum Gothic', 'Myriad Pro', '맑은 고딕'; } 
/* address */
address { color: #333; font-size: 14px; line-height: 26px; text-align: left; font-family: Nanum Gothic}
address:before { left: 16px; width: 156px; height: 35px; margin-left: 0; } 
address span:before { display: block; position: absolute; left: 6px; top: 7px; width: 1px; height: 10px; background: rgba(172, 172, 172, 0.3); content: ""; font-family: Nanum Gothic; } 
address:after { position: absolute; left: 0; top: 0; width: 12px; height: 100%; content: ""; } 

/* footer_nav02 */
.footer_nav02 { position: absolute; right: 20px; top: 130px; max-width: 320px; margin-top: 0; } 
.footer_nav02 ul { display: block; width: 100%; } 
.footer_nav02 li { display: block; float: left; width: 50px; } 
.footer_nav02 li a { display: block; height: 26px; margin: 0 2px; background: #282627; border: 1px solid #161616; border-radius: 4px; box-sizing: border-box; color: rgba(255, 255, 255, 0.45); font-size: 12px; line-height: 26px; text-align: center; overflow: hidden; transition: all 0.4s; } 
.footer_nav02 li a:hover { background: #161616; color: #fff; } 

select#soflow { -webkit-appearance: button; -webkit-border-radius: 2px; -webkit-padding-end: 60px; -webkit-padding-start: 2px; -webkit-user-select: none; background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); border: 1px solid #AAA; color: #555; font-size: 10pt; margin: 20px; overflow: hidden; padding: 5px 10px; text-overflow: ellipsis; white-space: nowrap; width: 350px; max-width: 350px; font-family: Nanum Gothic; } 

/* 배너사이즈와 위치 */
#s_banner_wrap { width: 100%; height: 550px; position: relative; margin: 50px 0}
.banner_01 { width: 300px; height: 550px; background: #fff}
.banner_02 { width: 300px; height: 550px; background: #fff}
.banner_03 { width: 300px; height: 550px; background: #fff}

/* 사용자 페이징 - 위치와 모양을 자유롭게 변형 */
#bx-pager1 { position: absolute; bottom: 10px; } 
#bx-pager1 a { float: left; margin: 0 5px; display: block; width: 20px; height: 20px; font-size: 12px; line-height: 18px; text-align: center; background: #999; color: #333}
#bx-pager1 a:hover,
.bx-pager1 a:active { background: #000; color: #CCC; width: 50px}

/* 사용자 페이징 - 엑티브상태에 대한 속성값 지정 */
#bx-pager1 a.active { background: #000; color: #CCC; padding: 3px 20px}
.bxslider div { /*max-width:1320px; */
 margin: 0 auto; font-family: 'Myriad Pro', 'Nanum Gothic', '맑은 고딕'; } 
.bxslider div img { float: right; margin: 60px 0px}
.bxslider h1 { font-size: 40pt; padding-top: 120px; line-height: 1.1em; font-weight: 700; padding-bottom: 50px}
.bxslider button { background: #344185; color: #fff; font-size: 20pt; padding: 10px 40px; border-radius: 30px; letter-spacing: -1px; } 

/* 결제 페이지 내 토픽 리스트 */
.tp_info { position: relative; width: auto; overflow: hidden; } 
.tp_info:after { clear: both; display: block; content: ''; } 
.tp_info li { position: relative; margin: 0; width: 292px; float: left}
.tp_info li .tp_box { position: relative; display: block; margin: 0 10px; } 
.tp_info li .tp_box h1 { position: relative; width: 100%; height: 130px; margin: 0; background-repeat: no-repeat; background-position: center top; background-size: cover; border-top-left-radius: 15px; border-top-right-radius: 15px; } 
.tp_info li .tp_box div { position: relative; padding: 15px; background: #fff; border-radius: 0px 0px 10px 10px; } 
.tp_info li .tp_box div h2 { padding-bottom: 5px; text-align: left; color: #000; font-size: 13pt; margin: 0; } 
.tp_info li .tp_box div h2:after { clear: both; display: block; content: ''; } 
.tp_info li .tp_box div h2 .cs_thumb { display: block; width: 40px; height: 40px; float: left; margin-right: 15px; padding: 0; background-repeat: no-repeat; background-position: center top; background-size: cover; border-radius: 50%; } 
.tp_info li .tp_box div h2 span { color: #707070; font-size: 9pt; font-weight: bold}
.tp_info li .tp_box div h2 img { width: 40px; height: 40px; border-radius: 80px; float: left; margin-right: 15px}
.tp_info li .tp_box div h3 { display: block; overflow: hidden; box-sizing: border-box; text-overflow: ellipsis; white-space: nowrap; /*-webkit-line-clamp:2; height:50px; */
 padding: 5px 0; margin: 0; text-align: left; color: #333; font-size: 10pt; font-weight: 400; letter-spacing: -1px; } 
.tp_bottom { position: relative; padding: 5px 0 !important; margin-top: 5px; } 
.cb-topic .bx-prev { left: -25px !important; } 
.cb-topic .bx-next { right: -25px !important; } 
.ul_tp_price { position: relative; margin-top: 10px; } 
.ul_tp_price li { width: auto; display: block; float: none; } 
.ul_tp_price li label { font-size: 13px !important; margin-bottom: 0 !important; } 
.cb-service { position: relative; margin-top: 30px !important; } 
.cb-service .main_pro { width: 100%; text-align: center; margin: 0 auto}
.cb-service .mv1 { margin-bottom: 50px; } 
.cb-service .mv1 li { display: inline; margin: 5px 20px; background: #f0f0f0; padding: 5px 20px 8px 20px; border-radius: 10px; color: #000; cursor: pointer; } 
.cb-service .mv1 li:hover { background: #4769fe; color: #fff}
.cb-service .mv1 .tab_on { background: #4769fe; color: #fff}
.cb-service.s_order .mv1 li { margin: 5px 10px; } 
.cb-service .cl { clear: both}
.cb-service .cs_info { position: relative; display: block; margin: 0; padding: 0; } 
.cb-service .cs_info:after { clear: both; display: block; content: ''; } 
.cb-service .cs_info li:nth-child(3n+3) { margin-right: 0px}
.cb-service .cs_info li { position: relative; margin-right: 35px; margin-bottom: 30px; width: 282px; border-radius: 15px; float: left; } 
.cb-service .cs_info li a { position: relative; display: block; text-decoration: none; } 
.cb-service .blue_list { background: #7b96e0}
.cb-service .green_list { background: #60ba73}
.cb-service .cs_info li div.info { background: #fff; border-radius: 0px 0px 15px 15px; padding-bottom: 10px; } 
.cb-service .cs_info li div.info .mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 10px; } 
.cb-service .cs_info li h1 { position: relative; width: 100%; height: 150px; margin: 0; background-repeat: no-repeat; background-position: center top; background-size: cover; border-top-left-radius: 15px; border-top-right-radius: 15px; } 
.cb-service .cs_info li h1 .cs_type { position: absolute; top: 10px; left: 15px; display: inline-block; font-size: 11px; font-weight: 400; color: #fff; padding: 1px 5px; border-radius: 4px; background-color: #7b96e0; box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.3); text-align: center; width: 50px; line-height: 20px; } 
.cs_type.chatbot { background-color: #7b96e0; } 
.cs_type.topic { background-color: #60ba73 !important; } 
.cb-service .cs_info h2 { padding: 12px 15px; text-align: left; color: #000; font-size: 13pt; margin: 0; } 
.cb-service .cs_info h2 span { color: #707070; font-size: 9pt; font-weight: bold}
.cb-service .cs_info h2 img { width: 40px; height: 40px; border-radius: 80px; float: left; margin-right: 15px}
.cb-service .cs_info h2 .cs_thumb { display: block; width: 40px; height: 40px; float: left; padding: 0; margin-right: 15px; background-repeat: no-repeat; background-position: center top; background-size: cover; border-radius: 50%; } 
.cb-service .cs_info h3 { display: block; display: -webkit-box; overflow: hidden; height: 44px; box-sizing: border-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 0 15px; margin: 0; text-align: left; color: #333; font-size: 10pt; font-weight: 400; letter-spacing: -1px; line-height: 20px; word-break: normal; } 
.search_msg { width: 1320px; margin: 50px auto 70px; text-align: center; font-size: 20pt}
.search_msg .keyword { color: #486aff; } 
.ul_tab { position: relative; width: 100%; height: 46px; text-align: center; border-bottom: 1px solid #000; } 
.ul_tab:after { clear: both; display: block; content: ""; } 
.ul_tab>li { float: none !important; display: inline-block; } 
.ul_tab>li a { position: relative; display: block; height: 45px; line-height: 45px; margin-left: -1px; color: #000; text-align: center; font-size: 15px; padding: 0 60px; background: #fafbfc; border: 1px solid #dbdbdd; border-bottom-color: #000; } 
.ul_tab>li a:hover,
.ul_tab li.on a { color: #000; background: #fff; border: 1px solid #000; border-bottom-color: #fff; z-index: 5; } 

.ma-pagination { text-align: center; } 
.ma-pagination ul { display: inline-block; } 
.ma-pagination ul li { width: 34px; height: 34px; border: 1px solid #dddddd; float: left; margin-left: -1px; } 
.ma-pagination ul li.active { background-color: #f7f7f7; } 
.ma-pagination ul li a { font-size: 9pt; padding-top: 8px; width: 100%; height: 100%; } 
.ma-pagination .active span,
.ma-pagination ul li a { font-size: 9pt; display: inline-block; padding-top: 8px; } 
.ma-pagination a,
.ma-pagination a:visited,
.ma-pagination a:hover,
.ma-pagination a:link,
.ma-pagination a:active { display: inline-block; text-decoration: none; vertical-align: middle; text-align: center; color: inherit; } 

.table-wrapper { min-height: 590px; background: #fff; border-radius: 10px; padding: 8px 8px 8px 0 !important; } 
.table-wrapper .table-header { line-height: 26px; border-bottom: 2px solid #d8d8d8 !important; background-color: #fff; position: relative; min-width: 0; height: 40px; } 
.table-wrapper th { text-align: left; font-size: 15px; } 
.table-wrapper th:first-child { text-align: center; } 
.table-wrapper td { padding: 5px !important; } 
.table-wrapper input.form-control { display: block; width: 100% !important; background-color: #fff !important; border: 1px solid #e4e7ea !important; border-radius: 0; box-shadow: none; color: #565656; height: 34px; padding: 5px 8px !important; transition: all 300ms linear 0s; } 

.faq_wrap { position: relative; margin-bottom: 10px; } 
.faq_wrap:after { clear: both; content: ''; display: block; } 

@media screen and (min-width: 1025px){
 .openMask { transition: filter 0.3s ease; } 
 .openMask:hover { filter: brightness(1.3); } 
 }
 
@-webkit-keyframes lspin { 
	0% { -webkit-transform: rotate(0deg); } 
	100% { -webkit-transform: rotate(360deg); } 
}
@keyframes lspin { 
	0% { transform: rotate(0deg); } 
	100% { transform: rotate(360deg); } 
}