@charset "utf-8";
@import "fonts.css";

/* Common Style 
------------------------------------------------------------------------ */

html, body {width: 100%; height: 100%; position: absolute; z-index: 200}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, form, fieldset, p, button, header, footer {margin:0;padding:0}
body, input, select, textarea, header, footer {color:#000;font-family:NanumBarunGothic,dotum,'돋움',sans-serif;font-weight:normal}
body {background: #fafafa; -webkit-text-size-adjust:none}
img, fieldset {border:0 none}
input { border:1px solid #a1a1a1}
ul, ol, li {list-style:none}
table {border-collapse: collapse; border-spacing: 0}
button {cursor: pointer}
a {text-decoration:none;text-overflow:ellipsis;-o-text-overflow:ellipsis; color: #666}
a:link, a:hover, a:active {text-decoration:none}
.clearfix::after {content: ""; display: block; height: 0; clear: both; visibility: hidden}
.ie7 .clearfix {clear: both}
#main {overflow-y: hidden}

/* Layout Style 
------------------------------------------------------------------------ */

#wrap {width: 100%; float: left; overflow: hidden}
#header {width:327px; border-right: 1px solid #e5e5e5; position: fixed; top: 0; left: 0; z-index: 11; background: #fff; height: 100%; text-align: center; *text-align: left; padding-top: 50px; overflow-x:hidden;}
#container {width: 81.108%; margin-left:328px; height:100%; min-width:900px}
#footer {width:100%; height: 205px; position: absolute; bottom: 0; z-index:10;}

/* Header Style 
------------------------------------------------------------------------ */
.lang{position:absolute; top:33px; left:78px;}
.lang ul{margin:0 auto; display:inline-block;}
.lang ul li{position:relative; float:left; margin:0 6px;}
.lang ul li a{padding:0 3px; color:#808080; font-size:11px; font-family:NanumBarunGothic,dotum,'돋움',sans-serif; text-align:center; line-height:1.6;}
.lang ul li a:hover{color:#000}
.lang ul li .langBg{position:absolute; display:block; top:-5px; content:''; width:100%; height:100%; border-bottom:4px solid #e9e9e9; z-index:-1;}
.lang ul:after{content:''; display:block; clear:both;}
#header .lang{display:block;}
.mobile_gnb_blank .lang{display:none; left:28px;}

#header h1 {width: 218px; height: 93px; position: absolute; top: 50%; left:0; margin: -325px 0 0 55px}
#header .logo {width: 218px; height: 93px}
#header .vtc_logo > img {max-width: 176px; max-height: 47px; display: none; margin-top: 6px}
#header #gnb .gnb_area {cursor:pointer; position: absolute; top: 50%; left:109px; margin: -165px 0 0 0px; transition:all ease .5s; -webkit-transition:all ease .5s; -moz-transition:all ease .5s; -o-transition:all ease .5s}
#header #gnb .gnb_sel, #header #gnb .gnb_sel .ayersrock {margin-left: 20px; text-align: left; left: 10px}
#header #gnb .gnb_sel a.l_acs, #header #gnb .gnb_sel a.l_mail, #header #gnb .gnb_sel a.l_msg, #header #gnb .gnb_sel a.l_talk, #header #gnb .gnb_sel a.l_csm, #header #gnb .gnb_sel a.l_prc, #header #gnb .gnb_sel a.l_mem_fun {position: relative; left: -42px}
#header #gnb .gnb_sel a.l_acs {left: -11px}
#header #gnb .gnb_sel a.l_msg {left: -19px}
#header #gnb .gnb_sel a.l_talk {left: -42px}
#header #gnb .gnb_sel a.l_csm {left: -26px}
#header #gnb .gnb_sel a.l_prc {left: -22px}
#header #gnb .gnb_sel a.l_mem_fun {left: -3px}
#header #gnb .lnb_area {position: absolute; top:105px; left: 120px; overflow: hidden; text-align: left; display:none; /* z-index:15; */}
#header #gnb li:first-child {margin-bottom: 53px}
.ie7 #header #gnb li:first-child {margin-bottom: 32px}
#header #gnb li.on .lnb_area {display: block}
#header #gnb li.on a.acs, #header #gnb li.on a.mail, #header #gnb li.on a.messenger, #header #gnb li.on a.talk, #header #gnb li.on a.csm, #header #gnb li.on a.pr_center, #header #gnb li.on a.mem_fun {background-position: -153px 0; left: 0}
#header #gnb li.on a.acs {background-position: -153px -240px}
#header #gnb li.on a.messenger {background-position: -153px -40px}
#header #gnb li.on a.talk {background-position: -153px -80px}
#header #gnb li.on a.csm {background-position: -153px -120px}
#header #gnb li.on a.pr_center {background-position: -153px -160px}
#header #gnb li.on a.mem_fun {background-position: -153px -200px}
#header #gnb li.on a.acs {background-position: -153px -240px}
#header #gnb li.on a.ayersrock {background-position: 0 -320px}
#header #gnb .lnb_area li {margin: 0; height: 45px}
#header #gnb .gnb_sel li {margin-left:30px}
#header #gnb .top_line {border-top: 1px solid #000; padding-top: 11px; margin-top: 11px; width: 110px}
#header #gnb .bottom_line {border-bottom: 1px solid #000; padding-bottom: 11px; margin-bottom: 11px; width: 110px}

/* Contents Style
------------------------------------------------------------------------ */

#contents {width: 100%; height: 100%; float: left}
#contents .section1, .section2, .section3 {width: 27.556%; /* 425/1640  height:1394px*/ height:1420px; border-right: 1px solid #e5e5e5; float: left; background: #fff}
#contents p.txt, #contents p.not_txt {color: #666; font-family: Dotum, "돋움"; font-size: 12px; line-height: 20px; text-align: left; height: 62px; overflow: hidden; text-overflow:ellipsis; word-break:break-all;}
#contents .section1 h3.title, .section2 h3.title, .section3 h3.title {font-size: 28px; font-weight: normal; letter-spacing: -1px;}	
#contents .section1 h4.sub_title, .section2 h4.sub_title, .section3 h4.sub_title {font-size: 20px; font-weight: normal; line-height: 28px; margin: 20px 0 20px 0}
#contents .section1 .article {width: auto; word-break:break-all; overflow: hidden}					
#contents .section1 .refer_style {width: auto; height: 230px; word-break:break-all; padding: 40px 40px 0}
#contents .section1 .refer_style > dl {font-family: Dotum, "돋움"; font-size: 12px; color: #666; height: 40px; line-height: 22px; overflow: hidden; margin: 25px 0}
#contents .section1 .refer_style > dl strong {margin-right: 5px}
#contents .section1 .notice_style {height: 235px; padding: 40px 40px 0px}
#contents .section1 .notice_style > ul {height: 70px; overflow: hidden}
#contents .section1 .notice_style > ul li {position: relative; padding-right:60px}
#contents .section1 .notice_style a {color: #666; font-family: Dotum, "돋움"; font-size: 12px; line-height: 22px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; display: block; width: 100%}
#contents .section1 .notice_style span.notice_date {position: absolute; right: 0; background: #fff; top: 4px}

#contents p.txt, #contents p.not_txt {margin: 11px 0; display: inline-block; *zoom:1; *display: inline}
#contents p.not_txt {margin: 0}

#contents .section2 .news_style {padding: 0 40px 0 ; position:relative}									
#contents .section2 .news_style a {color: #000}
#contents .section2 .news_style img {max-width: 81px; max-height: 117px}
/*.mike_bg {overflow:hidden; width: 81px; height: 117px; position:absolute;right:20px;top:0}*/
#contents .section2 p.mike_bg {overflow:hidden; width: 100%; margin-bottom:-20px;text-align:right}
#contents .section2 .mail_style {height: 520px; padding: 0px 40px 0; position: relative}
#contents .section2 .mail_style .mail_img_bg {overflow: hidden; background:url(../images/mail_bg.jpg) no-repeat; background-size: 100% 100%; width: 100%}
#contents .section2 .mail_style .mail_img_bg:hover .moniter {transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); -ms-transform:scale(1.1); transition:all ease-in .2s; -webkit-transition:all ease-in .2s; -moz-transition:all ease-in .2s; -o-transition:all ease-in .2s}
#contents .section2 .mail_style .mail_img_bg .moniter {max-width: 344px; max-height:261px; transition:all ease-in .2s; -webkit-transition:all ease-in .2s; -moz-transition:all ease-in .2s; -o-transition:all ease-in .2s; float: right; margin-top: 26px}

#contents .section3 .messenger_style, #contents .section2 .contac_style {height: 404px; padding: 35px 40px 0; position: relative}
#contents .section3 .messenger_style .speech_bg, #contents .section2 .contact_bg {text-align: center; width: 100%}
#contents .section3 .messenger_style img, #contents .section2 .contac_style img {max-width: 297px; max-height: 249px; margin-top: 14px}

#contents .section2 .contac_style {height: 428px; background: #f2f2f2}
#contents .section2 .contac_style img {max-width: 252px; max-height: 247px} 

#contents .section3 .talk_style {height: 477px; background: #f2f2f2; padding: 40px 40px 0; position: relative}
#contents .section3 .talk_style .talk_img_bg {background:url(../images/talk_bg.jpg) no-repeat; background-size: 100% 100%; overflow: hidden; width:100%}
#contents .section3 .talk_style .talk_img_bg:hover img {transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); -ms-transform:scale(1.1); transition:all ease-in .2s; -webkit-transition:all ease-in .2s; -moz-transition:all ease-in .2s; -o-transition:all ease-in .2s}
#contents .section3 .talk_style .talk_img_bg img {max-width: 307px; max-height: 247px; transition:all ease-in .2s; -webkit-transition:all ease-in .2s; -moz-transition:all ease-in .2s; -o-transition:all ease-in .2s; float: right}

#contents .section3 .csm_style {height: 390px; padding: 40px 40px 0; position: relative}
#contents .section3 .csm_style .csm_img_bg {overflow: hidden; width:100%; text-align: center}
#contents .section3 .csm_style .csm_img_bg img {width:100%; height:100%; max-width: 319px; max-height: 204px; margin-top: 14px}

#contents .section3 .customer_style {height: 274px; background: #a8d100; margin: 30px 30px 0; position: relative}
#contents .section3 .customer_style p {color: #fff; margin:0;}
#contents .section3 .customer_style p.txt {height: 40px}
#contents .section3 .customer_style h4 {color: #fff; font-size: 20px; font-family: Gautami; letter-spacing: 2px; line-height: 22px}
#contents .section3 .customer_style .cus_img {display: inline-block; margin: 12px 0 0 37px}
#contents .section3 .customer_style .leaf {position: absolute; bottom:119px; right: 0; margin-right: 12px}
@-moz-document url-prefix(){ #contents .section3 .customer_style .leaf {position: absolute; bottom:118px; right: 0; margin-right: 12px} }
#contents .section3 .customer_style .leaf_area {width:auto; height:auto; background:#638e02; margin-top: 9px; *margin-top: 18px; padding: 36px 37px 30px}

.conWrap{position:relative; width:100%; padding:0;}
.conWrap p.txt{width:90%;}
.conWrap a{position:absolute; bottom:40px; right:0;}
.leaf_area .conWrap a{bottom:10px; right:-5px}
.conWrap a span{position:relative;}
.conWrap:after{display:block; content:''; clear:both;}

#contents .section_con {background: #fff; border-right: 1px solid #f2f2f2; float: left; color: #5b5b5b; font-size: 14px; font-family: NanumBarunGothic; width: 82.668%; min-height: 1000px}
#contents .section_con .con_style {padding: 30px 90px 70px; width: 800px; margin:0 auto; /* word-break:break-all;  */position: relative} /* padding: 30px 90px 70px; (150430) */
#contents .section_con .con_style button.down_bt {width: 100%; padding: 18px 0; background: #fff; border:1px solid #646464; color: #444; font-family: Dotum, "돋움"; font-size: 16px; font-weight: bold; vertical-align: middle; cursor: pointer}
#contents .section_con .con_style p {line-height: 25px}
#contents .section_con .con_style .top_navi {font-size: 14px; text-align: right; line-height: 23px}
#contents .section_con .con_style .top_navi span.arrow {color: #bdbdbd; margin: 0 20px 0 22px}

#contents .section_con .con_style .sub_title {margin:90px 0 25px; float: left; width: 100%; height: 343px}
#contents .section_con .con_style .sub_title.auto {height: auto}
#contents .section_con .con_style .sub_title h2.drop_mail .title {max-width: 268px; max-height: 170px; float: left}
#contents .section_con .con_style .sub_title h2.drop_mail .product {background:url(../images/drop_mail/title_product.png) no-repeat}
#contents .section_con .con_style .sub_title h2.ayersrock .title {max-width: 718px; max-height: 264px; float: left}
#contents .section_con .con_style .sub_title h2.ayr_cs .title {max-width: 388px; max-height: 187px; float: left}
#contents .section_con .con_style .sub_title h2.ayr_cs .product {background:url(../images/ayersrock_cs/title_product.png) no-repeat}
#contents .section_con .con_style .sub_title h2.mail .title {max-width: 374px; max-height: 138px; float: left}
#contents .section_con .con_style .sub_title h2.mail .product {background:url(../images/mail/title_product.png) no-repeat}
#contents .section_con .con_style .sub_title h2.mobile_mail .title {max-width: 332px; max-height: 169px; float: left}
#contents .section_con .con_style .sub_title h2.mobile_mail .product {background:url(../images/mobile_mail/title_product.png) no-repeat}
#contents .section_con .con_style .sub_title h2.archive .title {max-width: 462px; max-height: 172px; float: left}
#contents .section_con .con_style .sub_title h2.archive .product {background:url(../images/archive_mail/title_product.png) no-repeat}
#contents .section_con .con_style .sub_title h2.ex_pack .title {max-width: 388px; max-height: 176px; float: left}
#contents .section_con .con_style .sub_title h2.ex_pack .product {background:url(../images/ex_pack/title_product.png) no-repeat}
#contents .section_con .con_style .sub_title h2.pc_msg .title {max-width: 346px; max-height: 149px; float: left}
#contents .section_con .con_style .sub_title h2.pc_msg .product {background:url(../images/pc_msg/title_product.png) no-repeat}
#contents .section_con .con_style .sub_title h2.m_msg .title {max-width: 301px; max-height: 191px; float: left}
#contents .section_con .con_style .sub_title h2.m_msg .product {background:url(../images/mobile_msg/title_product.png) no-repeat}
#contents .section_con .con_style .sub_title h2.pc_talk .title {max-width: 372px; max-height: 202px; float: left}
#contents .section_con .con_style .sub_title h2.pc_talk .product {background:url(../images/pc_talk/title_product.png) no-repeat}
#contents .section_con .con_style .sub_title h2.m_talk .title {max-width: 317px; max-height: 202px; float: left}
#contents .section_con .con_style .sub_title h2.m_talk .product {background:url(../images/mobile_talk/title_product.png) no-repeat}
#contents .section_con .con_style .sub_title h2.csm .title {max-width: 301px; max-height: 198px; float: left}
#contents .section_con .con_style .sub_title h2.csm .product {background:url(../images/csm/title_product.png) no-repeat}
#contents .section_con .con_style .sub_title h2.notice .title {max-width: 475px; max-height: 133px}
#contents .section_con .con_style .sub_title h2.refer .title {max-width: 751px; max-height: 191px; margin-bottom: 30px}
#contents .section_con .con_style .sub_title h2.press .title {max-width: 665px; max-height: 141px}
#contents .section_con .con_style .sub_title h2.report .title {max-width: 620px; max-height: 181px; margin-bottom: 30px}
#contents .section_con .con_style .sub_title h2.cfm .title {max-width: 570px; max-height: 141px; margin-bottom: 30px}
#contents .section_con .con_style .sub_title h2.satis .title {max-width: 668px; max-height: 142px}
#contents .section_con .con_style .sub_title h2.download .title {max-width: 678px; max-height: 157px}
#contents .section_con .con_style .sub_title h2.contact .title {max-width: 428px; max-height: 156px}
#contents .section_con .con_style .sub_title h2.sitemap .title {max-width: 666px; max-height: 159px}
#contents .section_con .con_style .sub_title .product {background-position: right bottom !important; height: 343px}

#contents .section_con .con_style .feature dt.title_img1 img {max-width: 355px; max-height: 55px}
#contents .section_con .con_style .feature dt.title_img2 img {max-width: 369px; max-height: 54px}
#contents .section_con .con_style .feature dt.title_img3 img {max-width: 488px; max-height: 54px}
#contents .section_con .con_style .feature dl {margin: 0 0 50px 0px} 
#contents .section_con .con_style .feature dl:last-child {margin: 0} 
#contents .section_con .con_style .feature dd {line-height: 25px}
#contents .section_con .con_style .feature h3.title_txt1 {float: left; margin:0 60px 30px 0}
#contents .section_con .con_style .feature h3 img {max-width: 163px; max-height: 33px}

#contents .section_con .con_style .feature .mobile_mail .title_img1 > img {max-width: 482px; max-height: 86px}
#contents .section_con .con_style .feature .mobile_mail .title_img2 > img {max-width: 439px; max-height: 54px}
#contents .section_con .con_style .feature .mobile_mail .title_img3 > img {max-width: 502px; max-height: 58px}

#contents .section_con .con_style .advantage > h3 {height: 55px}
#contents .section_con .con_style .advantage > h3 img {max-width: 212px; max-height: 38px; *height: auto}
#contents .section_con .con_style .advantage h4, .need h4 {color: #ff6600; font-size: 21px; font-weight: normal; margin: 45px 0 20px 0; line-height: 32px}
#contents .section_con .con_style .need h3 {max-width: 123px; max-height: 33px}
#contents .section_con .con_style .ex_pack p {font-size: 21px; line-height: 34px}
#contents .section_con .big {font-size: 28px}

#contents .section_con .con_style .satis_char, .satis_root, .depart_number {margin:40px 0 0 0}
#contents .section_con .con_style .satis_char > h3, .satis_root > h3 {margin-bottom: 30px}
#contents .section_con .con_style .satis_char > p img {max-width: 720px; max-height: 294px}
#contents .section_con .con_style .satis_root > p img {max-width: 719px; max-height: 227px}
#contents .section_con .con_style .satis_char .title_txt1 img {max-width: 448px; max-height: 33px}
#contents .section_con .con_style .satis_root .title_txt2 img {max-width: 457px; max-height: 33px}

#container .section_con .con_style .char_root > h3, .service_step > h3, .depart_number > h3 {font-size: 24px; margin-bottom: 35px; color: #fe6c01}
#container .section_con .con_style .char_root .main_func {padding: 0; line-height: 24px}
#container .section_con .con_style .char_root .main_func p.func_hlt {color: #ff8500; margin-top: 30px}
#container .section_con .con_style .char_root .main_func strong {margin-left: 12px}
#container .section_con .con_style .char_root .main_func dl:first-child {margin:0}
#container .section_con .con_style .char_root .main_func dl {margin-top: 30px}
#container .section_con .con_style .char_root .main_func dt {background: url(../images/blet.png) no-repeat 0 7px; padding-left: 23px; font-weight: bold; font-size: 16px}
#container .section_con .con_style .char_root .main_func dd {margin-left: 23px}

#container .section_con .con_style .service_step > h3 {margin-bottom: 0}
#container .section_con .con_style .service_step table, .depart_number > table {line-height: 24px; width: 100%}
#container .section_con .con_style .service_step th, td, .depart_number > table th,td {padding: 10px 0; text-align: left}
#container .section_con .con_style .service_step > table dt {font-size: 16px}
#container .section_con .con_style .service_step .first_line {padding: 30px 0 10px}
#container .section_con .con_style .service_step .last_line {padding-bottom: 30px}
#container .section_con .con_style .service_step .step1 img {max-width: 167px; max-height: 100px}
#container .section_con .con_style .service_step .step2 img {max-width: 163px; max-height: 100px}
#container .section_con .con_style .service_step .step3 img {max-width: 165px; max-height: 100px}
#container .section_con .con_style .service_step .step4 img {max-width: 161px; max-height: 100px}

#container .section_con .con_style .depart_number > table {border: 1px solid #e5e5e5; color: #333; margin-bottom: 10px}
#container .section_con .con_style .depart_number > table th {padding: 17px 25px 13px}
#container .section_con .con_style .depart_number a:hover {color: inherit; text-decoration: underline}
#container .section_con .con_style .depart_number .solution {max-width: 195px; max-height: 56px}
#container .section_con .con_style .depart_number .service {max-width: 183px; max-height: 55px}
#container .section_con .con_style .depart_number .keep {max-width: 251px; max-height: 59px}
#container .section_con .con_style .depart_number .recruit {max-width: 172px; max-height: 71px}
#container .section_con .con_style .depart_number .marketing {max-width: 108px; max-height: 68px}

#container .section_con .con_style .map_info > p img {max-width: 689px; max-height: 369px}
#container .section_con .con_style .map_info > h3 {height: 90px}
#container .section_con .con_style .map_info {line-height: 24px; width: 100%; margin-top: 40px}
#container .section_con .con_style .map_info th {text-align: left; background: url(../images/blet.png) no-repeat 0 8px; padding-left: 23px; font-weight: bold; vertical-align: top}
#container .section_con .con_style .map_info td {padding: 0; padding-bottom: 10px}

#contents .section_con .con_style .flat_con table.flat {border: 1px solid #e0dcd3; width: 100%}
#contents .section_con .con_style .flat_con table.flat th {background: #e0dcd3; padding: 25px 45px}
#contents .section_con .con_style .flat_con table.flat th.sec2 {padding: 25px 25px 30px 40px}
#contents .section_con .con_style .flat_con table.flat th.sec3 {padding: 15px 30px 15px 40px}
#contents .section_con .con_style .flat_con table.flat th.sec4 {padding: 20px 45px}
#contents .section_con .con_style .flat_con table.flat th.sec5 {padding: 20px 25px}
#contents .section_con .con_style .flat_con table.flat th.sec6 {padding: 0 15px}
#contents .section_con .con_style .flat_con table.flat dl {line-height: 23px}
#contents .section_con .con_style .flat_con table.flat dl dt {color: #fe6c01; font-size: 24px; padding: 20px 25px 0px 25px}
#contents .section_con .con_style .flat_con table.flat dl dd {padding: 15px 25px}
#contents .section_con .con_style .flat_con.talk .flat th, #contents .section_con .con_style .flat_con.m_msg .flat th {width: 130px}

#contents .section_con .con_style .function h3 img {max-width: 177px; max-height: 33px}
#contents .section_con .con_style .function ul {border: 1px solid #d1d1d1; color: #010101; margin: 30px 0 50px 0}
#contents .section_con .con_style .function ul li {background: #f1f1f1; border-bottom: 1px dashed #c7c7c7; }
#contents .section_con .con_style .function ul li:last-child {border-bottom: none}
#contents .section_con .con_style .function dt {width: 215px; display: inline-block; *display: inline; *zoom:1; font-weight: bold}
#contents .section_con .con_style .function dl {padding: 30px 35px; line-height: 23px;}
#contents .section_con .con_style .function dd {color: #5b5b5b; display: inline-block; *display: inline; *zoom:1;}
#contents .section_con .con_style .function .m_function {display: none}
#contents .section_con .con_style .function > table {border: 1px solid #d1d1d1; color: #010101; margin: 30px 0 50px 0; background: #f1f1f1; width: 100%; line-height: 23px; font-size: 13px}
#contents .section_con .con_style .function > table th {border-bottom: 1px dashed #c7c7c7; padding: 30px 15px 30px 35px; text-align: left; font-size: 14px}
#contents .section_con .con_style .function > table td {border-bottom: 1px dashed #c7c7c7; padding: 30px 35px; text-align: left}
#contents .section_con .con_style .function > table td {padding-left: 0}
#contents .section_con .con_style .function .col1 {width: 32%}

#contents .section_con .con_style .con_img1 {margin: 40px 0}
#contents .section_con .con_style .con_img1.mail {max-width: 719px; max-height: 432px}
#contents .section_con .con_style .con_img1.moblie_mail {max-width: 734px; max-height: 453px}
#contents .section_con .con_style .con_img1.archive {max-width: 719px; max-height: 450px}
#contents .section_con .con_style .con_img1.ex_pack {max-width: 721px; max-height: 409px}
#contents .section_con .con_style .con_img1.pc_msg {max-width: 721px; max-height: 362px}
#contents .section_con .con_style .con_img1.m_msg {max-width: 723px; max-height: 447px}
#contents .section_con .con_style .con_img1.pc_talk {max-width: 758px; max-height: 393px}
#contents .section_con .con_style .con_img1.m_talk {max-width: 732px; max-height: 447px}
#contents .section_con .con_style .con_img1.csm {max-width: 719px; max-height: 386px; margin:0 auto; padding-top: 40px}
#contents .section_con .con_style .con_img1.cs, #contents .section_con .con_style .con_img1.ayersrock {max-width: 720px; max-height: 418px}
#contents .section_con .con_style .con_img1.ayersrock {max-height: 592px; margin: 0}
#contents .section_con .con_style .con_img2.csm {max-width: 711px; max-height: 466px; margin: 30px 0 10px}
#contents .section_con .con_style .con_img2.drop_mail {max-width: 686px; max-height: 409px; margin-bottom: 55px}
#contents .section_con .con_style .con_img2.ayersrock {max-width: 665px; max-height: 334px; margin: 0 auto}

#contents .section_con .con_style .list_form .input {float: left; margin-right: 25px; margin-bottom:100px; border:1px solid #e0dcd3}
#contents .section_con .con_style .list_form.r .input {float: right; margin-left: 25px; border:1px solid #e0dcd3}
#contents .section_con .con_style .list_form .input img {max-width: 290px; max-height: 291px}
#contents .section_con .con_style .list_form .f_list, #contents .section_con .con_style .list_form .f_list_m, #contents .section_con .con_style .list_form .f_list_l {margin-top: 6px}
#contents .section_con .con_style .list_form .f_list li, #contents .section_con .con_style .list_form .f_list_m li, #contents .section_con .con_style .list_form .f_list_l li {width: 140px; display: inline-block; *display: inline; *zoom:1; background: url(../images/bu_dot.gif) no-repeat 0 9px; padding-left: 10px; vertical-align: top}
#contents .section_con .con_style .list_form .f_list_m li {width: 142px}
#contents .section_con .con_style .list_form .f_list_l li {width: 215px}
#contents .section_con .con_style .list_form dt {font-size: 24px; color: #fe6c01; height: 40px; font-weight: bold}
#contents .section_con .con_style .list_form dd {line-height: 22px; margin-bottom: 22px}
#contents .section_con .con_style .list_form dd > strong {font-size: 16px}
#contents .section_con .con_style .list_form.csm {margin-bottom: 35px}
#contents .section_con .con_style .list_form.csm > ul {margin:35px 0}
#contents .section_con .con_style .list_form.csm dl:last-child dd {margin:0}

#contents .section_con .con_style .m_msg_title > h3 img {max-width: 477px; max-height: 190px}
#contents .section_con .con_style .m_msg_title > ol {float: right; font-size: 26px; color: #676a69; margin-top: 35px}
#contents .section_con .con_style .m_msg_title > ol li {line-height: 55px}
#contents .section_con .con_style .m_msg_title .head {font-size: 42px; vertical-align: middle; margin-right: 15px; color: #f4a44d}
#contents .section_con .con_style .m_msg_title .head.orange {color: #f4804d}
#contents .section_con .con_style .m_msg_title .head.dahong {color: #df3d3d}
#contents .section_con .con_style .m_msg_title .head.red {color: #ac1c34}

#contents .section_con .con_style .pc_talk_title > h3 img {max-width: 546px; max-height: 240px}
#contents .section_con .con_style .pc_talk_title > h4, #contents .section_con .con_style .drop_mail_title > h4 {font-size: 26px; font-weight: normal; color:#ff6600; margin-top: 20px}
#contents .section_con .con_style .pc_talk_title > p, #contents .section_con .con_style .drop_mail_title > p {margin-top: 15px}

#contents .section_con .con_style .drop_mail_title > h3 img {max-width: 601px; max-height: 249px}
#contents .section_con .con_style .drop_mail_title > h4 {font-size: 28px; line-height: 40px}
#contents .section_con .con_style .drop_mail_title > p {line-height: 30px}

#contents .section_con .con_style .product_meet {position: relative; line-height:18px;/* line-height: 26px; */ margin-top: 40px}
#contents .section_con .con_style .product_meet > img {max-width: 260px}
#contents .section_con .con_style .product_meet dl, #contents .section_con .con_style .product_meet .cloud_view {position: absolute; top: 31px; left: 283px}
#contents .section_con .con_style .product_meet dl > dt {color: #fd8204; font-size: 24px; font-weight: bold; position: relative; margin-bottom: 6px; line-height: 32px}
#contents .section_con .con_style .product_meet dl dd {background: url(../images/bu_dot.gif) no-repeat 0 11px; padding-left: 10px}
#contents .section_con .con_style .product_meet .title_bar {background: #000; height: 1px; width: 240px; position: absolute; bottom: 5px; margin-left: 8px}
#contents .section_con .con_style .product_meet .mail_view, #contents .section_con .con_style .product_meet .sns_view {top: 156px; left: 168px}
#contents .section_con .con_style .product_meet .cloud_view {top: 283px}
#contents .section_con .con_style .product_meet .sns_view {top: 428px}

#contents .section_con .con_style .product_meet.ayersrock {margin:30px 0 50px}
#contents .section_con .con_style .product_meet.ayersrock > img {max-width: 219px}
#contents .section_con .con_style .product_meet.ayersrock dl, #contents .section_con .con_style .product_meet.ayersrock .twelve {position: absolute; top: 26px; left: 177px}
#contents .section_con .con_style .product_meet.ayersrock dd {background: none; padding: 0}
#contents .section_con .con_style .product_meet.ayersrock .hundred, #contents .section_con .con_style .product_meet.ayersrock .hundred_p {top: 141px; left: 241px}
#contents .section_con .con_style .product_meet.ayersrock .twelve {top: 284px}
#contents .section_con .con_style .product_meet.ayersrock .hundred_p {top: 420px}
#contents .section_con .con_style .ayersrock_view {text-align: center; font-size: 15px; margin-top: 30px}
#contents .section_con .con_style .ayersrock_view .hlt_txt {font-size: 20px; line-height: 30px}

#contents .section_con .con_style .cs_title {font-size: 18px; color: #535456; line-height: 34px; font-weight: normal}
#contents .section_con .con_style .ayr_title {font-size: 26px; color: #000; line-height: 38px}
#contents .section_con .con_style .ayr_title .title_bar {display: block; margin-bottom: 15px}
#contents .section_con .con_style .large {font-size: 24px; text-decoration: underline}


#contents .section_con .con_style .sec_form .article {border:1px solid #d1d1d1; width: 26%; display: inline-block; *display: inline; *zoom:1; vertical-align: top; padding: 35px 20px; margin:0 14px 0 0; height: 390px}
#contents .section_con .con_style .sec_form .article.last_child, #contents .section_con .con_style .sec_form.four_depth .article.last_child {margin-right: 0}
#contents .section_con .con_style .sec_form .article > p {text-align: center}
#contents .section_con .con_style .sec_form .article > dl dt {font-size: 22px; line-height: 32px; color: #000; margin: 25px 0 10px}
#contents .section_con .con_style .sec_form .article > dl dd {line-height: 24px}
#contents .section_con .con_style .sec_form .article .sec_hlt {color: #ff7e00}

#contents .section_con .con_style .sec_form.four_depth .article{border:none; width: 22%;padding: 35px 0 0 0; margin-right:28px; height: 320px}
#contents .section_con .con_style .sec_form.four_depth .article > dl dt {font-size: 22px; color: #ff7800}
#contents .section_con .con_style .sec_form.four_depth .article > p {text-align: left; height:107px;}

#contents .section_con .con_style .csm_title {font-size: 26px; font-weight: normal; height: 40px}
#contents .section_con .con_style .basic_table td:nth-child(2){text-align: left}
#contents .section_con .con_style .basic_table th.view_date {font-size: 12px; color: #777; font-weight: normal}
#contents .section_con .con_style .basic_table td.view_con {padding: 40px 35px; border-color: #b3b4b4; text-align: left; font-family: NanumBarunGothic !important}
#contents .section_con .con_style .basic_table td.view_con img {width: 100%; height: 100%; max-width: 660px}
#contents .section_con .con_style .page_num {margin-top: 23px}
#contents .section_con .con_style .page_num .next {margin-left: 6px}
#contents .section_con .con_style .page_num ol li {display: inline-block; *zoom:1; *display: inline; background:#fff; vertical-align: middle; *line-height: 60px; *margin: 0 3px; margin: 5px 2px}
#contents .section_con .con_style .page_num ol li a {padding: 9px 12px 9px 12px; border:1px solid #ddd; text-decoration: none; /* margin:0 1px */}
#contents .section_con .con_style .page_num ol li a:hover, ol li.over a {color: #fff; background: #fd8204; border-color: #fd8204 !important}
#contents .section_con .con_style .page_num ol li.bt a {border: 0; padding: 0; margin: 0; *margin: 0 2px; *position: relative; *top: -12px}
#contents .section_con .con_style .page_num li.first {/* margin-left: 7px */}
#contents .section_con .con_style .page_num li.last {/* margin-right: 7px */}

#contents .section_con .con_style .basic_table tr.press:hover, tr.report:hover {background: #fafafa}
#contents .section_con .con_style .basic_table tr.press td {text-align: left; vertical-align: top; position: relative}
#contents .section_con .con_style .basic_table tr.press span.press_date {color: #777; display: block; position: absolute; right: 20px; top: 10px}
#contents .section_con .con_style .basic_table tr.press dt {font-size: 15px; font-weight: bold; margin-bottom: 10px; padding-right: 90px; display: block; text-overflow:ellipsis; overflow: hidden; white-space: nowrap}
#contents .section_con .con_style .basic_table tr.press dd, tr.report dd {padding-right:90px; display: block; text-overflow:ellipsis; overflow: hidden; white-space: nowrap}

#contents .section_con .con_style .basic_table tr.report td.con {text-align: left; vertical-align: middle}
#contents .section_con .con_style .basic_table tr.report dt {font-size: 15px; font-weight: bold; margin-bottom: 10px}
#contents .section_con .con_style .basic_table tr.report dt, tr.report dd {padding:0 10px 0 20px}

#contents .section_con .con_style .basic_table.view th {padding-left: 35px}

#contents .section_con .con_style .ctm_chart {border-top: 2px solid #ff7400; padding: 19px 0; width: 83.5%}
#contents .section_con .con_style .ctm_chart > ul li {float: left; height: 84px; margin:0 8px 8px 0; *margin-right: 6px; *float: none; *zoom:1; *display: inline}
#contents .section_con .con_style .ctm_chart > ul li:nth-child(4n+4) {margin-right: 0}

#contents .section_con .con_style .cfm_area {font-size: 12px; color: #4d4d4d; line-height: 14px; *text-align:center; font-family: Dotum, "돋움"}
#contents .section_con .con_style .cfm_area .cfm_field, #contents .section_con .con_style .cfm_area .cfm_field2 {border-top: 2px solid #ff7400; padding: 22px 0 29px 0; display: flex; display: -webkit-box; display: -ms-box; display: -webkit-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content:space-between; -webkit-justify-content:space-between}
#contents .section_con .con_style .cfm_area .cfm_field2 {border-top: 1px solid #b3b4b4}
#contents .section_con .con_style .cfm_area .cfm_field2.btm {border-bottom: 1px solid #b3b4b4}
#contents .section_con .con_style .cfm_area .cfm_field dl, .cfm_field2 dl {display: inline-block; *display: inline; *zoom:1}
#contents .section_con .con_style .cfm_area dd {text-align: center}

#container .section_con .con_style .sitemap_form > div {width:230px; border-top: 2px solid #8f8f8f; display:inline-block; *display: inline; *zoom: 1; vertical-align: top; margin: 0 20px 28px 0; overflow: hidden}
#container .section_con .con_style .sitemap_form > div .mu {margin-top: 25px}
#container .section_con .con_style .sitemap_form > div .mu li {line-height: 30px; background: url(../images/blet.png) no-repeat 0 11px; padding-left: 20px; display: block}
#container .section_con .con_style .sitemap_form > div .mu a {width: 100%; display: block; color: #5b5b5b}
#container .section_con .con_style .sitemap_form > div > h4 {border-bottom: 1px solid #e5e5e5; height: 71px}
#container .section_con .con_style .sitemap_form > div > h4 img {margin-top: 10px}

#container .section_con .con_style #tab_wrap > ul  {margin-bottom: 40px; font-size: 28px; font-weight: lighter}
#container .section_con .con_style #tab_wrap > ul li {float: left}
#container .section_con .con_style #tab_wrap > ul li.on {border-bottom: 1px solid #000; height: 34px}
#container .section_con .con_style #tab_wrap > ul li.on a {color: #000}
#container .section_con .con_style #tab_wrap > ul a {color: #707070; display: block}
#container .section_con .con_style #tab_wrap > ul::after {clear: both; display: block; visibility: hidden; height: 0; content: ""}

.guide_area {background: url(../images/guide_bg.jpg) no-repeat center; background-size: cover; position: absolute; right: 0; left: 0; bottom: 0; top: 0; height: 100%; padding: 0 30px}
.guide_area > .guide_view {text-align: center; margin-top: 7em; position: relative}
.guide_area > .guide_view h1 img {max-width: 610px}
.guide_area > .guide_view .btn_area {margin-top: 14%}
.guide_area > .guide_view .btn_area img {max-width: 400px}

/* Footer Style 
------------------------------------------------------------------------ */
#footer .foot_style {padding: 15px 40px; text-align: left; color: #333; font-size: 12px}
#footer a {color: #333; font-size: 12px; cursor: pointer}
#footer p, .foot_site {margin-top:10px}
#footer .global_pop {width: 221px; border: 1px solid #c0c0c0; background: #fff; position: absolute; bottom: 101px; overflow-y:auto; padding: 5px 12px; display: none}
#footer .global_pop li a {display: block; padding: 7px 0}

/* Slider Class */
.bx-pager {font-size: .85em; font-family: Arial; font-weight: bold; color: #666; position: absolute; right: 27px; bottom: 23px}
.bx-pager .bx-pager-item, .bx-controls-auto .bx-controls-auto-item {display: inline-block; *zoom: 1; *display: inline}
.bx-pager.bx-default-pager a {background: #262626; text-indent: -9999px; display: block; width: 11px; height: 11px; margin: 0 3px; border: 1px solid #fff}
.bx-pager.bx-default-pager a:hover, .bx-pager.bx-default-pager a.active {background: #fd8204}
.main_slider > li {min-width: 425px; height: 100%}

/* Common Class
------------------------------------------------------------------------ */
.mode1, .mode2 {width: auto}

.mode1 #container {width:90%}
.mode2 #container {width: 95%}
.mode3 #container {width: 1543px}

.tab_add, .tab_close, .mobile_add, .mobile_close {display: none}
.resize_product {background-size: 50% !important}
.blind {visibility: hidden}
.bar {width: 1px; height:10px; color: #b9dbca; padding: 0 10px 0 10px}
.hr_bar {background: #f0f0f0; height: 1px; margin: 40px}
.hr_bar.mail{margin: 40px 40px 20px}
.con_bar {background: #f0f0f0; height: 1px; margin: 40px 0}
.con_bar.dot {border-top:1px dashed #dddcdc; background: #fff; height: 1px; margin: 40px 0}
.tab_bar {margin: 0 28px}
.hlt {color: #fe6600}
.img_bd {border:1px solid #e5e5e5}
.db {display: block}
.main_date {color: #aaa; font-size: 11px}
.fr {float: right}
.fl {float: left}
.ha {height: auto !important}
.tl {text-align: left}
.mb20 {margin-bottom: 20px}
.view {color: #000}
.color1 {color: #f4a44d}
.under {text-decoration: underline}
.con_blank {margin-bottom: 20px}
.comming {max-width: 506px; max-height: 347px}
.m_width {width: 25%}
.big {font-size: 24px}
.bt1 {background: #fff; border:1px solid #ddd; font-weight: bold; font-family: Dotum, "돋움"; padding: 6px 35px; *padding: 6px 17px}
.btn_ayr {margin: 95px 0 65px}
@media screen and (-webkit-min-device-pixel-ratio:0){
.bt1.cr {background: #fff; border:1px solid #ddd; font-weight: bold; font-family: Dotum, "돋움"; padding: 10px 35px}	
}
.bt2 {background: #fff; border:1px solid #ddd; font-family: Dotum, "돋움"; padding: 6px 35px; *padding: 6px 17px}
.bt1.active {background: #fd8204; color: #fff; border:1px solid #fd8204}
.mobile_gnb_blank {width: 220px; height: 100%; min-height: 650px; background: #fff; position: fixed; left: -250px; z-index: 110; transition:all ease-out .3s; -webkit-transition:all ease-out .3s; -moz-transition:all ease-out .3s; -o-transition:all ease-out .3s}
.mobile_gnb_blank ul.m_gnb {margin: 80px 0 0 35px; cursor: pointer}
.mobile_gnb_blank ul.m_lnb {font-size: 13px; margin-top: 10px; padding-left:10px; display: none}
.mobile_gnb_blank ul.m_lnb.on {display: block}
.mobile_gnb_blank ul.m_lnb a {color: #555}
.mobile_gnb_blank ul.m_gnb li {padding: 10px 0;}
.mobile_gnb_blank ul.m_gnb li a {font-weight: bold; color: #000; padding: 10px 0;}
.mobile_gnb_blank .m_footer {font-size: 0.7em; padding: 50px 0 0 35px; line-height: 20px; position: absolute; bottom: 50px}
.mobile_gnb_blank .m_footer select {border: 1px solid #ccc; width:150px; background:#fff; margin-top: 10px}
.mobile_bg {background: #000; z-index: 100; width: 100%; height: 100%; opacity: 0.7; top: 0; *left: 0; position: fixed; filter:alpha(opacity=70); display: none}

.basic_table {width: 100%; border-top: 2px solid #ff7400; font-size: 12px; color: #444; font-family: Dotum, "돋움"; line-height: 24px; table-layout: fixed; min-width: 320px}
.basic_table a:hover {text-decoration: underline}
.basic_table th {font-size: 14px; padding: 15px 0 15px 0; border-bottom: 1px solid #e5e5e5; background: #f4f3ee}
.basic_table td {padding: 13px 0 10px 0; border-bottom: 1px solid #e5e5e5; text-align: center}
.basic_table tfoot td {border:0}
.basic_table .contents_img {padding: 35px}
.contents_img img {width: 100%}

.basic_table.download td, .basic_table.download th {text-align: left; padding-left: 53px;  transition:all ease .5s; -webkit-transition:all ease .5s; -moz-transition:all ease .5s; -o-transition:all ease .5s}
.basic_table.download th:last-child, .basic_table.download td:last-child {text-align: right !important; padding-right: 33px; transition:all ease .5s; -webkit-transition:all ease .5s; -moz-transition:all ease .5s; -o-transition:all ease .5s}
.basic_table.download tfoot td:last-child {padding: 25px 0 0 0}
.basic_table.download th:last-child {padding-right: 70px}

/* Icon Style
------------------------------------------------------------------------ */

.main_icon {background: url(../images/main.png) no-repeat; display: inline-block; *display: inline; *zoom:1; vertical-align: middle; *cursor: pointer;}
.gnb_icon {background: url(../images/gnb.png) no-repeat; display: inline-block; *display: inline; *zoom:1; vertical-align: middle; *cursor: pointer; width: 110px; height: 40px}
.lnb_area .gnb_icon{width:120px;}
.facebook {background-position:-649px 0; width: 29px; height: 28px; transition:all ease .4s; -webkit-transition:all ease .4s; -moz-transition:all ease .4s; -o-transition:all ease .4s; margin-right: 7px}
.blog {background-position:-688px 0; width: 29px; height: 28px; transition:all ease .4s; -webkit-transition:all ease .4s; -moz-transition:all ease .4s; -o-transition:all ease .4s}
.facebook:hover, .blog:hover {opacity: .7; filter:alpha(opacity=70);}
.foot_site_view {background-position:-725px 0; width: 15px; height: 15px; *float: left}

a.ayersrock {background-position: 0 -280px; width: 178px; position: absolute; left: -35px}
a.mail {background-position: -320px 0px}
a.acs {background-position: -320px -240px}
a.messenger {background-position: -320px -40px}
a.talk {background-position: -320px -80px}
a.csm {background-position: -320px -120px}
a.pr_center {background-position: -320px -160px}
a.mem_fun {background-position: -320px -200px}
a.mail_sub {background-position: -465px 0}
a.m_mail {background-position: -465px -40px}
a.m_arcaiv {background-position: -465px -80px}
a.m_pack {background-position: -465px -120px}
a.pc_msg {background-position: -465px -160px}
a.m_msg {background-position: -465px -200px}
a.pr_notice {background-position: -465px -240px}
a.pr_mem {background-position: -465px -280px}
a.pr_press {background-position: -465px -320px}
a.pr_report {background-position: -465px -360px}
a.pr_cfm {background-position: -465px -400px}
a.satis_ct {background-position: -465px -440px}
a.down_ct {background-position: -465px -480px}
a.pc_talk {background-position: -465px -520px}
a.m_talk {background-position: -465px -560px}
a.drop_mail {background-position: -465px -601px}
.page_first_bt {background-position:0 -731px; width: 34px; height: 34px}
.page_prev_bt {background-position:-35px -731px; width: 34px; height: 34px}
.page_next_bt {background-position:-70px -731px; width: 34px; height: 34px}
.page_last_bt {background-position:-105px -731px; width: 34px; height: 34px}
.page_first_bt_h {background-position:0 -766px; width: 34px; height: 34px}
.page_prev_bt_h {background-position:-35px -766px; width: 34px; height: 34px}
.page_next_bt_h {background-position:-70px -766px; width: 34px; height: 34px}
.page_last_bt_h {background-position:-105px -766px; width: 34px; height: 34px}
.prev_arrow {background-position: -147px -741px; width: 8px; height: 13px; margin-right: 8px}
.next_arrow {background-position: -163px -741px; width: 8px; height: 13px; margin-left: 8px}
.bt_list {background-position: -175px -742px; width: 14px; height: 10px; margin:-3px 5px 0 0}

/* 가운데 정렬 시 */
.gnb_area a.acs:hover, .gnb_area a.acs:focus {background-position: 0 -240px}
.gnb_area a.mail:hover, .gnb_area a.mail:focus {background-position: 0 0; left: 0}
.gnb_area a.messenger:hover, .gnb_area a.messenger:focus {background-position: 0 -40px}
.gnb_area a.talk:hover, .gnb_area a.talk:focus {background-position: 0 -80px}
.gnb_area a.csm:hover, .gnb_area a.csm:focus {background-position: 0 -120px}
.gnb_area a.pr_center:hover, .gnb_area a.pr_center:focus {background-position: 0 -160px}
.gnb_area a.mem_fun:hover, .gnb_area a.mem_fun:focus {background-position: 0px -200px}
.gnb_area a.ayersrock:hover, .gnb_area a.ayersrock:focus {background-position: 0px -320px}

/* 좌측 정렬 시, */
.gnb_sel a.acs:hover, .gnb_sel a.acs:focus, .gnb_sel a.mail:hover, .gnb_sel a.mail:focus, .gnb_sel a.messenger:hover, .gnb_sel a.messenger:focus, .gnb_sel a.talk:hover, .gnb_sel a.talk:focus, .gnb_sel a.csm:hover, .gnb_sel a.csm:focus, .gnb_sel a.pr_center:hover, .gnb_sel a.pr_center:focus, .gnb_sel a.mem_fun:hover, .gnb_sel a.mem_fun:focus {background-position: -153px 0; left: 0 !important}
.gnb_sel a.acs:hover, .gnb_sel a.acs:focus {background-position: -153px -240px}
.gnb_sel a.ayersrock:hover, .gnb_sel a.ayersrock:focus {background-position: 0 -320px}
.gnb_sel a.messenger:hover, .gnb_sel a.messenger:focus {background-position: -153px -40px}
.gnb_sel a.talk:hover, .gnb_sel a.talk:focus {background-position: -153px -80px}
.gnb_sel a.csm:hover, .gnb_sel a.csm:focus {background-position: -153px -120px}
.gnb_sel a.pr_center:hover, .gnb_sel a.pr_center:focus {background-position: -153px -160px}
.gnb_sel a.mem_fun:hover, .gnb_sel a.mem_fun:focus {background-position: -153px -200px}

/* LNB on 정렬 시 */
.lnb_area li.on a.mail_sub {background-position: -596px 0}
.lnb_area li.on a.m_mail {background-position: -596px -40px}
.lnb_area li.on a.m_arcaiv {background-position: -596px -80px}
.lnb_area li.on a.m_pack {background-position: -596px -120px}
.lnb_area li.on a.pc_msg {background-position: -596px -160px}
.lnb_area li.on a.m_msg {background-position: -596px -200px}
.lnb_area li.on a.pc_talk {background-position: -596px -520px}
.lnb_area li.on a.m_talk {background-position: -596px -560px}
.lnb_area li.on a.pr_notice {background-position: -596px -240px}
.lnb_area li.on a.pr_mem {background-position: -596px -280px}
.lnb_area li.on a.pr_press {background-position: -596px -320px}
.lnb_area li.on a.pr_report {background-position: -596px -360px}
.lnb_area li.on a.pr_cfm {background-position: -596px -400px}
.lnb_area li.on a.satis_ct {background-position: -596px -440px}
.lnb_area li.on a.down_ct {background-position: -596px -480px}
.lnb_area li.on a.drop_mail {background-position: -596px -601px}

span.mike {background-position: 0px -428px; width: 118px; height: 148px; position: absolute; top: 0; *position: static; *margin-top: -45px}
span.news {background-position:0 -674px; width: 104px; height: 27px; margin-bottom: 16px}
span.refer {background-position:-104px -674px; width: 133px; height: 27px}
span.notice {background-position:-624px -674px; width: 101px; height: 27px; margin-top:10px; margin-bottom: 16px; *margin-top: 15px}
span.mail_con {background-position:-255px -674px; width: 40px; height: 27px; margin: 47px 0 16px 0}
span.messenger_con {background-position:-312px -674px; width: 104px; height: 27px; margin: 20px 0 16px 0}
span.talk_con {background-position:-416px -674px; width: 104px; height: 27px; margin: 30px 0 16px 0}
span.csm_con {background-position:-520px -674px; width: 104px; height: 27px; margin: 30px 0 16px 0}
span.contact_con {background-position:-725px -674px; width: 101px; height: 27px; margin: 30px 0 16px 0}
span.add_view {background-position:-582px -3px; width: 22px; height: 22px; /* position: absolute; right: 40px */}
/* span.add_view.mail {bottom: 65px}
span.add_view.talk {bottom: 80px}
span.add_view.msg {bottom: 0px}
span.add_view.csm {bottom: 15px} */
span.add_view_ctm {background-position:-611px -3px; width: 22px; height: 22px; float: right; margin-top: 12px; *margin: -64px 37px 0 0}
span.tb_add {background-position:-764px 0px; width: 36px; height: 20px; cursor: pointer}
span.tb_close {background-position:-772px -29px; width: 28px; height: 29px; cursor: pointer}
span.mg_add {background-position:-771px -140px; width: 29px; height: 19px; cursor: pointer}
span.mg_close {background-position:-741px -29px; width: 22px; height: 23px; position: absolute; top: 15px; left: 240px; z-index: 110; cursor: pointer; display: none}
span.fg_bt {background-position:-553px -67px; width: 247px; height: 29px; }
span.fg_bt_close {background-position:-553px -101px; width: 247px; height: 29px}
span.top_navi_home {background-position:-713px -33px; width: 13px; height: 11px; margin: -4px 2px 0 0}
span.download {background-position: -711px -49px; width: 17px; height: 14px; margin: -3px 0 0 10px}
span.com_intro {background-position: -196px -731px; width: 209px; height: 54px; margin-right: 5px}
span.all_intro {background-position: -413px -731px; width: 209px; height: 54px}


/* Desktop Style
-----------------------------------------------------------------------  */

@media only screen and (min-width: 1024px){
#header {width:327px !important; border-right: 1px solid #e5e5e5; position: fixed; top: 0; left: 0; z-index: 11; background: #fff; height: 100%; min-height: 800px; text-align: center; *text-align: left; padding-top: 50px;}
#container {margin-left:328px !important}
#header h1 .logo, #header #gnb, #footer {display: block !important}
.tab_add, .tab_close, .mobile_add, .mobile_close, .mobile_gnb_blank, .mobile_bg, .mg_close {display: none !important}
}

/* Tablet Style
------------------------------------------------------------------------ */

@media only screen and (max-width: 1023px) and (min-width: 737px){
#header {width:73px; border-right: 1px solid #e5e5e5; position: fixed; top: 0; left: 0; z-index: 11; background: #fff; height: 100%; min-height: 780px; text-align: center; *text-align: left; padding-top: 30px}
#container {width: 1100px !important; margin-left:73px; height:100%; min-width:900px}
#contents .section_con .con_style .basic_table td.view_con img, .view_img {width: 100%}
#header #gnb, #footer, #header h1 .logo, .function > table {display: none}
#contents .section_con .con_style .function .m_function {display: block}
span.add_view, span.add_view2, span.add_view_ctm {margin: 0}
.tab_add {display: block; text-align: center}
#contents .section_con .con_style .basic_table tr.press span.press_date {top: auto; bottom: 10px}
.mobile_gnb_blank, .mobile_bg, .mg_close {display: none !important}
.sec_form .article {width: auto; margin-right: 0; min-height: auto}
.sub_title h2.mail .product, h2.archive .product, h2.ex_pack .product, h2.pc_msg .product, h2.pc_talk .product, h2.csm .product {position: static}
#contents .section_con .con_style .sub_title {height: auto}
}

/* Mobile Style
------------------------------------------------------------------------ */

@media only screen and (max-width: 736px){
#header {width:100% !important; height: 55px; border-bottom:1px solid #ccc; background: #fff; text-align: center; position: static; min-width:320px; min-height: 55px; padding-top: 0}

#header .lang{display:none;}
.mobile_gnb_blank .lang{display:block;}

#header h1 {position: static; margin: 0; width: auto; height: 55px}
#header #gnb, #footer, #header .logo, .tab_style, .flat th, .function > table, .none, #contents .section_con .con_style .product_meet > img {display: none !important}
#contents .section_con .con_style .function .m_function {display: block}
#header .vtc_logo > img {display: inline-block}
#container {width: 100% !important; margin-left:0px !important; height:100%; min-width:100%; /* word-break:break-all */}
#contents .section1, #contents .section2, #contents .section3, #contents .section_con, #contents .section_con .con_style {width: auto !important; height: auto; float: none; border:none}
#contents .section3 .customer_style {margin: 30px}
#contents .section3 .customer_style .leaf {bottom: 118px}
#contents .section_con .con_style {padding: 30px; width: auto;}
#contents .section_con .con_style .top_navi {text-align: center}
#contents .section_con .con_style .top_navi span.arrow {margin: 0 10px 0;}
.mobile_add {display: inline-block; *display: inline; *zoom:1; margin: 15px 0 0 0px; float: left; position: absolute; left: 15px}
#contents .section_con .con_style .list_form dt {height: auto; margin-bottom: 10px}
#contents .section_con .con_style .list_form .input, #contents .section_con .con_style .list_form.r .input {float: none; margin: 0 0 25px 0; text-align: center}
#contents .section_con .con_style .sec_form .article, #contents .section_con .con_style .sec_form.four_depth .article {width: auto; margin:0 0 15px 0; height: auto}
#contents .section_con .con_style .sec_form.four_depth .article, #contents .section_con .con_style .ctm_chart, .basic_table td.view_con img, .view_img {width: 100%}
#contents .section_con .con_style .ctm_chart > ul {display: flex; display: -ms-box; display: -webkit-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-flex:wrap; justify-content:space-between; -webkit-justify-content:space-between;}
#contents .section_con .con_style .ctm_chart > ul li {margin:0;/* margin:0 0 8px 0; */ width:48%;}
#contents .section_con .con_style .ctm_chart > ul li img{width:100%;}
#contents .section_con .con_style .basic_table tr.press span.press_date {top: auto; bottom: 10px}
#contents .section_con .con_style .product_meet dl, #contents .section_con .con_style .product_meet .cloud_view, #contents .section_con .con_style .ayersrock.product_meet dl, #contents .section_con .con_style .ayersrock.product_meet .twelve {position: static; margin-top: 20px}
#contents .section_con .con_style .product_meet .title_bar, #contents .section_con .con_style .product_meet .mail_view .title_bar, #contents .section_con .con_style .product_meet .cloud_view .title_bar, #contents .section_con .con_style .product_meet .sns_view .title_bar {width: auto; right: 0; left: 121px}
#contents .section_con .con_style .product_meet .mail_view .title_bar {left: 45px}
#contents .section_con .con_style .product_meet .cloud_view .title_bar {left: 67px}
#contents .section_con .con_style .product_meet .sns_view .title_bar {left: 45px}
#contents .section_con .con_style .basic_table tr.press dt {padding-right: 30px}
.fl, .fr {float: none; margin-top: 10px}
#container .section_con .con_style .sitemap_form > div {width: 100%; height: auto}
#contents .section_con .con_style .sub_title .product {background-size: 70% !important}
.basic_table.download td, .basic_table.download th {padding-left: 25px}
.basic_table.download th:last-child, .basic_table.download td:last-child {padding-right: 25px}
.basic_table.download tfoot td:last-child {text-align: center !important}
span.com_intro, span.all_intro {margin-bottom: 8px}
span.com_intro {margin-right: 0}
span.add_view_ctm {margin: 0}
#container .section_con .con_style #tab_wrap > ul li {float: none; margin: 0 0 20px 0; height: 32px}
.m_width {width: 45%}
.main_slider > li {min-width: auto}
.basic_table .contents_img {padding: 20px}
#contents .section_con .con_style .page_num ol li a {padding: 9px 10px;}
}

@media aural, speech {
#header #gnb, #footer, #header .logo, .tab_style, .flat > th {display: block; speak: normal}
}