@charset "utf-8";

/* CSS 공통 */
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select {margin: 0; padding: 0; -webkit-text-size-adjust: none;}
html {height: 100%;}
body {position: relative; height: 100%; margin: 0; -webkit-font-smoothing: antialiased; font-family: NanumBarunGothic, nbg, "굴림", Gulim, "Apple SD Gothic Neo", Sans-serif; font-size: 12px;color: #333; -webkit-text-size-adjust: none;}
h1, h2, h3, h4, h5, h6 {font-size: 12px; text-align: left;}
table {border-collapse: collapse; border-spacing: 0;}
img, fieldset, button, iframe {border: none;}
iframe {width: 100%;}
img {vertical-align: top;}
ul, li {list-style: none;}
a {color:  #555; text-decoration: none;}
em, address {font-style: normal;}
button, label {cursor: pointer;}
button {border: 0; background: transparent;}
button::-moz-focus-inner {padding: 0; border: 0;}
input[type=text], input[type=password], input[type=image], textarea, button {font-family: NanumBarunGothic, nbg, "굴림", Gulim, "Apple SD Gothic Neo", Sans-serif; -webkit-appearance: none; -webkit-text-size-adjust: none; -webkit-border-radius: 0;}
select {font-family: NanumBarunGothic, nbg, "굴림", Gulim, "Apple SD Gothic Neo", Sans-serif; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
select::-ms-expand {display: none;}
textarea {overflow: auto;}
hr {display: none;}
legend {display: none;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
.blind, legend, caption, caption span {overflow: hidden; position: absolute; top: 0; left: 0; width: 1px; height: 1px; font-size: 0; line-height: 0; white-space: nowrap; *text-indent: -9999em;}
.input_txt, textarea {*margin: -1px 0;}
body, h1, h2, h3, h4, input, button, select, table {font-family: 'Nanum Gothic'; font-size: 12px; color: #828282;}

@font-face  {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url(/font/DakiM.eot);
  src: url("/font/DakiM.eot?#iefix") format('embedded-opentype'),
       local(※), url(/font/DakiM.woff) format('woff'),
       url("/font/DakiM.ttf") format('truetype');
}

@font-face  {
  font-family: 'Nanum Gothicc';
  font-style: normal;
  font-weight: 400;
  src:  url(/font/DakiMTitle.eot);
  src:  url("/font/DakiMTitle.eot?#iefix") format('embedded-opentype'),
       local(※),url(/font/DakiMTitle.woff) format('woff'),
       url("/font/DakiMTitle.ttf") format('truetype');
}

.wrap {height: 100% !important; margin: 0 auto; overflow: hidden;}

/* header */
.Header {position: fixed; top: 0; left: 0;right: 0; background-color: #fff; z-index: 100; width: 100%; height: 110px; border-bottom: 2px solid #2484c6;}
div.Header_in {margin: 0 auto; width: 1100px; height: 110px;}
div.Header_in ul.gnb {padding: 10px 0 22px 0; width: 100%; text-align: right;}
div.Header_in ul.gnb li {display: inline; padding-right: 4px;}
div.Header_in ul.gnb li.last {padding-right: 0;}
div.Header_in ul.gnb li a.btn_hmenu {display: inline-block; padding: 5px 14px; font-size: 11px; background: #fff; color: #858585; border: 1px solid #ddd; text-decoration: none;}
div.Header_in ul.gnb li a.btn_hmenu:hover {background: #2482c8; color: #fff; border: 1px solid #1272ba; text-decoration: none;}
div.Header_in div.TopMenu {width: 1100px; position: relative;}
div.Header_in div.TopMenu h1 {position: absolute; top: 0; left: 20px;}
div.Header_in div.TopMenu h1 a {display: block; background: url("../images/logo.jpg") no-repeat; width: 201px; height: 27px; text-indent: -9000px;}
div.Header_in div.TopMenu h1 a:hover, a:visited, a:link, a:active {text-decoration: none; border: none;}
div.Header_in div.TopMenu ul.nav {position: absolute; top: 5px; right: 0;}
div.Header_in div.TopMenu ul.nav li {float: left; padding-right: 84px;}
div.Header_in div.TopMenu ul.nav li.last {padding-right: 0;}
div.Header_in div.TopMenu ul.nav li a.menu {font-size: 20px; font-weight: 500; background: #fff; color: #515151;}
div.Header_in div.TopMenu ul.nav li a.menu:hover {color: #2484c6; font-weight: 500;}


/* footer */
.Footer {position: relative;min-width: 1080px;background: #fff;z-index: 20;width: 100%; height: 90px; background-color: #2484c6; transition: all .4s;}
.onepage-wrapper + Footer {position: fixed; bottom: -113px;}
div.Footer_in {width: 100%; height: 90px; background: #2484c6;}
div.Footer_in div.FootBox {margin: 0 auto; width: 1100px; position: relative;}
div.FootBox a.f_logo {display: inline-block; zoom: 1; *display: block; margin-top: 30px; background: url("/images/footer_logo.jpg") no-repeat; width: 203px; height: 25px; text-indent: -5555px;}
div.FootBox ul.terms {position: absolute; top: 18px; left: 283px; color: #cae8ff;}
div.FootBox ul.terms li {float: left; padding-right: 3px;}
div.FootBox ul.terms a {color: #cae8ff;}
div.FootBox ul.terms a strong {color: #ffffff; font-weight:  600;}
div.FootBox div.area {position: absolute; top: 42px; left: 283px; color: #ffffff;}
div.FootBox div.area > address {font-style:  normal;}
div.FootBox div.area p.copy {letter-spacing:  0.3px;}

div.Container div.NewContent {width: 100%;}

@media screen and (max-width: 980px) {
	div.wrap {width: 1100px;}
}

.wrap {height: 100% !important; margin: 0 auto; overflow: hidden;}

/* mainpopup */
.popup_layer{position: relative;}
#popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 35px; width: 50%; height: 100%; z-index: 1000;}
#popup .popup_con { box-shadow: 1px 1px 10px rgba(0, 0, 0, .2);}
#popup .popup_close{cursor: pointer; position:absolute; top: 16px; right: 12px;}
#popup .close_7day{ position: absolute; right: 6px; top: -18px; color: #cfd5d9;}
#popup .popup_bt{position: absolute; bottom: 17px; left: 17px;}
#popup .popup_bt .pop_bt_r{margin-right: 12px;}


/* main */
.main {position: relative;}
.main section {overflow: hidden; margin: 0 auto; position: relative; min-height: 1000px;}
.main section div.page_container {margin: 110px auto 0; width: 1100px; position: relative; height: 100%;}


/* mainBanner */
.main section.mainBanner {position: static !important;}
section.mainBanner > div {width: 100%; height: 100%;}
section.mainBanner .Vimg_1 {background: url("/images/mimg01.png") no-repeat center 0px; background-size: cover;}
section.mainBanner .Vimg_2 {background: url("/images/mimg02.png") no-repeat center 0px; background-size: cover;}
section.mainBanner .Vimg_3 {background: url("/images/mimg03.png") no-repeat center 0px; background-size: cover;}
section.mainBanner .Vimg_4 {background: url("/images/mimg04.png") no-repeat center 0px; background-size: cover;}
section.mainBanner .Vimg_5 {background: url("/images/mimg05.png") no-repeat center 0px; background-size: cover;}
section.mainBanner > div div.black {background: #000; width: 100%; height: 100%;}


/* business */
.main section.page2 {background: url("/images//tab_business_bg.jpg") no-repeat center 0px; background-size: 100%; background-size: cover;}
.main section.page2 div.tab {position: absolute; width: 100%; top: 0;}
.main section.page2 div.tab ul {display: inline-block; zoom: 1; margin: 60px 0 0 0; width: 1100px;}
.main section.page2 div.tab ul li {width: calc((100% - 30px) / 4); float: left; margin-right: 10px;}
.main section.page2 div.tab ul li:last-child {margin-right: 0px;}
.main section.page2 div.tab ul li span {box-sizing: border-box; border: 2px solid #fff; transition: all .2s; cursor: pointer; font-size: 18px; font-weight: 400; text-align: center; color: #fff; display: block; height: 48px; line-height: 48px;}
.main section.page2 div.tab ul li span:hover,
.main section.page2 div.tab ul li span.active {border: none; background: #2484c6; text-decoration:  none;}
.main section.page2 div.tab ul li span a {display:  block; font-size:  18px; color:  #fff;}
.main section.page2 div.tab ul li span a:hover,
.main section.page2 div.tab ul li span a:active {text-decoration:  none;}
.main section.page2 h4 {position: absolute; top: 16%; width: 100%; font-size: 86px; color: #fff; font-weight: 400; text-align: center;}
.main section.page2 p.txt01 {position: absolute; top: 28%; width: 100%; font-size: 35px; color: #fff; font-weight: 400; text-align: center;}
.main section.page2 p.txt02 {position: absolute; top: 34%; width: 100%; font-size: 20px; line-height: 140%; color: #fff; text-align: center;}
.main section.page2 p.txt02 a {display: inline-block; vertical-align: middle; margin-left: 6px; text-indent: -10000em; width: 16px; height: 16px; background: url("/images//btn_more.png") no-repeat;}
.main section.page2 div.introImg {position: absolute; top: 44%; width: 100%;}
.main section.page2 div.introImg ul li {float: left; margin-right: 20px;}
.main section.page2 div.introImg ul li:last-child {margin-right: 0px;}
.main section.page2 div.introImg ul li a {display: block; width: 353px; height: 397px;}
.main section.page2 div.introImg ul li:nth-child(1) a {background: url("/images//tab_business1_img03.jpg") no-repeat}
.main section.page2 div.introImg ul li:nth-child(2) a {background: url("/images//tab_business1_img04.jpg") no-repeat}
.main section.page2 div.introImg ul li:nth-child(3) a {background: url("/images//tab_business2_img02.jpg") no-repeat}
.main section.page2 div.introImg ul li a:hover {background-position: 0 -397px; transition: all 0.6s ease-in-out;}

div.BizBox {display:  inline-block; width: 1100px; position:  absolute; top:  14%;}
div.BizTxtArea {display: block; width: 1100px; text-align: center; color: #ffffff; letter-spacing: -0.5px;}
div.BizTxtArea p.BigTit {margin-bottom: 14px; font-family: 'Nanum Gothicc'; font-size: 110px;}
div.BizTxtArea span.SubTit {display: block; margin-bottom: 13px; font-family: 'Nanum Gothicc'; font-size: 36px;}
div.BizTxtArea p.SubTxt {display: block; font-size: 22px; color: #cfd5d9;}
div.BizTxtArea p.SubTxt span.SubTxttit {display: block; font-size: 22px; color: #cfd5d9;}
div.BizTxtArea p.SubTxt span.SubTxtt {display: block; margin-bottom: 26px; font-size: 18px; color: #cfd5d9; font-style: normal;}
div.BizTxtArea p.SubTxt span.SubTxtt span.btn_more {display: inline-block; width: 16px; height: 16px; vertical-align: middle;}
div.BizTxtArea p.SubTxt span.SubTxtt span.btn_more a {display: block; background: url("/images/btn_more.png") no-repeat top left; text-indent: -7000px;}

ul.TabImg {display: inline-block; width: 1100px; height:  397px; overflow:  hidden;}
ul.TabImg li {float: left; margin-right: 20px;}
ul.TabImg li.last {margin-right: 0;}
ul.TabImg li a {display: block; width: 353px; height: 397px; text-indent: -8000px; transition: all 0.6s ease-in-out;}
ul.TabImg li a.Busi_ppurio {background: url("/images/tab_business1_img01.jpg") no-repeat top left;}
ul.TabImg li a.Busi_enfax {background: url("/images/tab_business1_img02.jpg") no-repeat top left;}
ul.TabImg li a.Busi_bizppurio {background: url("/images/tab_business1_img03.jpg") no-repeat top left;}
ul.TabImg li a.Busi_donutbook {background: url("/images/tab_business1_img04.jpg") no-repeat top left;}
ul.TabImg li a.Busi_baedal365 {background: url("/images/tab_business1_img05.jpg") no-repeat top left;}
ul.TabImg li a.Busi_telpass {background: url("/images/tab_business1_img06.jpg") no-repeat top left;}
ul.TabImg li a.Busi_callmix {background: url("/images/tab_business1_img07.jpg") no-repeat top left;}
ul.TabImg li a.Busi_bizmailer {background: url("/images/tab_business1_img08.jpg") no-repeat top left;}
ul.TabImg li a.Busi_unicro {background: url("/images/tab_business2_img01.jpg") no-repeat top left;}
ul.TabImg li a.Busi_snsform {background: url("/images/tab_business2_img02.jpg") no-repeat top left;}
ul.TabImg li a.Busi_sabangnet {background: url("/images/tab_business2_img03.jpg") no-repeat top left;}
ul.TabImg li a.Busi_daouoffice {background: url("/images/tab_business3_img01.jpg") no-repeat top left;}
ul.TabImg li a.Busi_daousync {background: url("../images/tab_business3_img02.jpg") no-repeat top left;}
ul.TabImg li a.Busi_daouidc {background: url("../images/tab_business3_img03.jpg") no-repeat top left;}
ul.TabImg li a.Busi_halfdomain {background: url("../images/tab_business3_img04.jpg") no-repeat top left;}
ul.TabImg li a.Busi_itoutsourcing {background: url("../images/tab_business4_img01.jpg") no-repeat top left;}
ul.TabImg li a.Busi_ppurio:hover,
ul.TabImg li a.Busi_enfax:hover,
ul.TabImg li a.Busi_bizppurio:hover,
ul.TabImg li a.Busi_donutbook:hover,
ul.TabImg li a.Busi_baedal365:hover,
ul.TabImg li a.Busi_telpass:hover,
ul.TabImg li a.Busi_callmix:hover,
ul.TabImg li a.Busi_bizmailer:hover,
ul.TabImg li a.Busi_unicro:hover,
ul.TabImg li a.Busi_snsform:hover,
ul.TabImg li a.Busi_sabangnet:hover,
ul.TabImg li a.Busi_daouoffice:hover,
ul.TabImg li a.Busi_daousync:hover,
ul.TabImg li a.Busi_daouidc:hover,
ul.TabImg li a.Busi_halfdomain:hover,
ul.TabImg li a.Busi_itoutsourcing:hover {background-position: 0 -397px;}


/* sabangnet */
.main section.page3 {background: #c2dcf8;}
.main section.page3 h4 {position: absolute; top: 14%; width: 100%; font-size: 80px; color: #000; font-weight: 400; letter-spacing: -0.5px; text-align: center;}
.main section.page3 p.txt01 {position: absolute; top: 8%; width: 100%; font-size: 40px; color: #fff; font-weight: 400; text-align: center;}
.main section.page3 p.txt02 {position: absolute; top: 26%; width: 100%; font-size: 18px; line-height: 140%; color: #8499b1; text-align: center;}
.main section.page3 p.txt02 span {font-weight: 400; color: #3f6997;}
.main section.page3 div.btArea {position: absolute; top: 37%; width: 100%;}
.main section.page3 div.btArea a.bt_view {margin: 0 auto; box-sizing: border-box; border: 1px solid #000; display: block; width: 202px; height: 52px; line-height: 52px; font-size: 20px; color: #000; text-align: center;}
.main section.page3 div.introArea {position: absolute; top: 49%; width: 100%;}
.main section.page3 div.introArea div.introImg {margin: 0 auto; width: 1008px; height: 353px; background: url("../images/m_banner04_img.png") no-repeat}


/* daouoffice */
.main section.page4 {background: #43d4e9;}
.main section.page4 h4 {position: absolute; top: 14%; width: 100%; font-size: 80px; color: #000; font-weight: 400; letter-spacing: -0.5px; text-align: center;}
.main section.page4 p.txt01 {position: absolute; top: 8%; width: 100%; font-size: 40px; color: #fff; font-weight: 400; text-align: center;}
.main section.page4 p.txt02 {position: absolute; top: 26%; width: 100%; font-size: 18px; line-height: 140%; color: #fff; text-align: center;}
.main section.page4 p.txt02 span {font-weight: 400;}
.main section.page4 div.btArea {position: absolute; top: 37%; width: 100%;}
.main section.page4 div.btArea a.bt_view {margin: 0 auto; box-sizing: border-box; border: 1px solid #fff; display: block; width: 202px; height: 52px; line-height: 52px; font-size: 20px; color: #fff; text-align: center;}
.main section.page4 div.introArea {position: absolute; top: 47%; width: 100%;}
.main section.page4 div.introArea div.introImg {margin: 0 auto; width: 1100px; height: 478px; background: url("../images/m_banner06_img.png") no-repeat;}


/* donutbook */
.main section.page6 {background: #5F24E4;}
.main section.page6 h4 {position: absolute; top: 14%; width: 100%; font-size: 70px; color: #fff; font-weight: 400; letter-spacing: -0.5px; text-align: center;}
.main section.page6 p.txt01 {position: absolute; top: 8%; width: 100%; font-size: 40px; color: #A47CFF; font-weight: 400; text-align: center;}
.main section.page6 p.txt02 {position: absolute; top: 26%; width: 100%; font-size: 18px; line-height: 140%; color: #fff; text-align: center;}
.main section.page6 p.txt02 span {font-weight: 400; color: #F8D306;}
.main section.page6 div.btArea {position: absolute; top: 35%; width: 100%;}
.main section.page6 div.btArea a.bt_view {margin: 0 auto; box-sizing: border-box; border: 1px solid #fff; display: block; width: 202px; height: 52px; line-height: 52px; font-size: 20px; color: #fff; text-align: center;}
.main section.page6 div.introArea {position: absolute; bottom: 200px; width: 100%;}
.main section.page6 div.introArea div.introImg {margin: 0 auto; width: 652px; height: 331px; background: url("../images/m_banner05_img.png") no-repeat;}

/* daousync */
.main section.page5 {background: #2b2de8;}
.main section.page5 h4 {position: absolute; top: 13%; width: 100%; font-size: 55px; color: #fff; font-weight: 400; letter-spacing: -3.5px; text-align: center;}
.main section.page5 p.txt01 {position: absolute; top: 8%; width: 100%; font-size: 36px; color: #b0d2ff; font-weight: 400; text-align: center;}
.main section.page5 p.txt02 {position: absolute; top: 22%; width: 100%; font-size: 18px; line-height: 140%; color: #fff; text-align: center;}
.main section.page5 p.txt02 span {font-weight: 400; color: #F8D306;}
.main section.page5 div.btArea {position: absolute; top: 30%; width: 100%;}
.main section.page5 div.btArea a.bt_view {margin: 0 auto; box-sizing: border-box; border: 1px solid #fff; display: block; width: 202px; height: 52px; line-height: 52px; font-size: 20px; color: #fff; text-align: center;}
.main section.page5 div.introArea {position: absolute; bottom: 100px; width: 100%;}
.main section.page5 div.introArea div.introImg {margin: 0 auto; width: 721px; height: 459px; background: url("../images/m_banner07_img.png") no-repeat;}