@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);

/* layout */
#wrap {  }
#header {height: 89px; border-bottom: 1px solid #efefef;}
#banner {  }
#sbanner {border-top: 1px solid #efefef;}
#select {background-color: #1d7abd; }
#infor {}
#ad {background:url(../img/ad.bg.jpg) no-repeat center top; background-size: cover;}
#blog {}
#site {background-color: #f8f8fa;}
#footer {height: 300px; }

/* sub page layout*/
#sub-banner {background: url(../img/server_bg1.png) repeat-x center top;}
#sub-banner.mail_bg {background: url(../img/mail_bg1.png) repeat-x center top;}
#sub-banner.service_bg{background: url(../img/service_bg1.png) repeat-x center top;}
#sub-banner.webhosting_bg{background: url(../img/webhosting_bg1.png) repeat-x center top;}
#product-table {  }
#select2 {background-color: #1d7abd; }
#select5 {background-color: #1d7abd; }
#dog {  }

/* container */
.container {width: 1180px; height: inherit; /* background-color: rgba(0,0,0,0.5); */ margin: 0 auto;}

/* skip */
.skip {position: relative;  }
.skip a {position: absolute; left: 0; top: -50px; width: 140px; border: 1px solid #444;
 background-color: #333; color: #fff; text-align: center; padding: 10px 0; }
 .skip a:focus, .skip a:active {top: 0;}



/* header */
.header {overflow: hidden;  }
.header h1 {float: left; padding-top: 24px; padding-right: 30px;}
.header a:hover {color:#1d7abd;}
.header .gnb {float: left;}
.header .gnb li {display: inline;}
.header .gnb li a {font-size: 18px; padding: 32px 12px; display: inline-block; }
.header .quick {float: right;  }
.header .quick li {position: relative; display: inline;}
.header .quick li:before {content: ''; width: 1px; height: 10px; background-color:#ccc; position: absolute; right: 0; top: 1px; }
/* .header .quick li:last-child:before {width: 0; height: 0;} */
.header .quick li.last:before {width: 0; height: 0;}
.header .quick li a {font-size: 14px; padding: 34px 11px 34px 8px; display: inline-block; color: #676767;}

/* banner */
.banner {padding: 115px 50px;}
.banner h2 {font-size: 46px; line-height: 55px;}
.banner p {font-size: 18px; padding: 20px 0; color: #666; font-weight: 300;}
.banner em {font-size: 18px; color: #f66b05; display: block;}
.banner .view {font-size: 16px; display: inline-block; margin-top: 50px; border: 1px solid #333; background-color: #fff; padding: 12px 42px; transition: all 0.5s ease;}
.banner .view:hover {background-color: #000; color: #fff;}
.banner-img1 { background: url(../img/banner-bg.jpg) no-repeat center top;  }
.banner-img2 { background: url(../img/banner-bg.jpg) no-repeat center top;  }
.banner-img3 { background: url(../img/banner-bg.jpg) no-repeat center top; }

/* sbanner */
.sbanner {overflow: hidden; padding: 70px 0;}
.sbanner > div {float: left; width: 25%;}
.sbanner > div h4 {font-size: 24px; padding-bottom: 4px;}
.sbanner > div h4 i {padding-left: 8px;}
.sbanner > div h4:hover {text-decoration: underline;}
.sbanner > div p {font-size: 16px; color: #676767; padding-right: 80px;}

/* select */
.select {overflow: hidden; padding: 70px 0;}
.select h3 {float: left; width: 25%; font-size: 40px; color: #fff;}
.select > div {float: left; width: 17.5%;margin-left: 1.5%; padding: 3%; height: 358px;}
.select > div.simg1 {background:#2886ca url(../img/select_bg1.PNG) no-repeat 30px 250px; background-size:90px;}
.select > div.simg2 {background:#2886ca url(../img/select_bg2.png) no-repeat 30px 250px; background-size:90px;}
.select > div.simg3 {background:#2886ca url(../img/select_bg3.png) no-repeat 30px 250px; background-size:90px;}
.ie8 .select > div.simg1 {background: #2886ca url(../img/select-bg1-ie8.png) no-repeat 30px 250px; background-size:90px;}
.ie8 .select > div.simg2 {background: #2886ca url(../img/select-bg2-ie8.png) no-repeat 30px 250px; background-size:90px;}
.ie8 .select > div.simg3 {background: #2886ca url(../img/select-bg3-ie8.png) no-repeat 30px 250px; background-size:90px;}

.select > div h4 {font-size:18px; color: #fff; padding-bottom: 20px; }
.select > div p {font-size:13px; padding-right: 80px; color: #d2f0ff;}

/* infor */
.infor {padding: 70px 0; text-align: center;}
.infor h3 {font-size: 40px; padding-bottom: 20px; font-weight: 300;}
.infor p {font-size: 18px; color: #666; padding-bottom: 50px;}
.infor .infor-box {overflow: hidden; text-align: left; padding: 0 210px;}
.infor .infor-box h4 {font-size: 16px; color: #333; padding-bottom: 5px;}
.infor .infor-box h4 i {color: #0081c8;}
.infor .infor-box .in-left {float: left; width: 50%; border-right: 1px solid #ccc; box-sizing: border-box;}
.infor .infor-box .in-left em {font-size: 24px; color: #333; width: 170px; display: inline-block;}
.infor .infor-box .in-left strong {font-size: 30px; color: #0081c8;}
.infor .infor-box .in-right {float: left; width: 50%; padding-left: 50px; box-sizing: border-box;}
.infor .infor-box .in-right li {font-size: 16px; color: #666;}

/* ad */
.ad {padding: 70px 0; text-align: center; z-index: 10; position: relative;}
.ad h3 {font-size: 40px; padding-bottom: 20px; color: #fff;}
.ad p {font-size: 16px; color: #fff;}
.ad .view {font-size: 16px; display: inline-block; margin-top: 50px;  border: 1px solid #fff; padding: 12px 42px; transition: all 0.3s ease; color: #fff;}
.ad .view:hover {background-color: #fff; color: #000;}

/* blog */
.blog {padding: 70px 0;}
.blog h3 {font-size: 34px; margin-bottom: 50px;}
.blog .blog-wrap {overflow: hidden; margin-bottom: 80px; }
.blog .blog-wrap > div {float: left; width: 23.5%; margin-right: 2%; border-top: 2px solid #6f6f6f;}
/* .blog .blog-wrap > div:last-child {margin-right: 0;} */
.blog .blog-wrap > div.last {margin-right: 0;}
.blog .blog-wrap > div h4 {font-size: 22px; padding: 25px 0 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  }
.blog .blog-wrap > div p {font-size: 16px; color: #7e7e7e; margin-bottom: 40px;  height: 93px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.blog .blog-wrap > div figure img {width: 100%;}
.blog .notice-wrap {overflow: hidden;}
.blog .notice-wrap .nw-left {float: left; width: 780px;}
.blog .notice-wrap .nw-left h3 {font-size: 34px;  margin-bottom: 20px; margin-right: 20px; display: inline-block;}
.blog .notice-wrap .nw-left .total {font-size: 14px; color: #999;}
.blog .notice-wrap .nw-left ul {border-top: 2px solid #6f6f6f;}
.blog .notice-wrap .nw-left li {overflow: hidden; padding: 20px 10px;  border-bottom: 1px solid #e5e5e5;}
.blog .notice-wrap .nw-left li a {float: left; width: 80%; color: #666; font-size: 14px;}
.blog .notice-wrap .nw-left li span {float: right; width: 20%; text-align: right;  font-size: 14px; color:#999;}
.blog .notice-wrap .nw-right {float: right; width: 375px; height: 257px;}
.blog .notice-wrap .nw-right h3 {font-size: 34px;  margin-bottom: 20px;}
.blog .notice-wrap .nw-right ul {border-top: 2px solid #6f6f6f; padding: 20px; border-bottom: 1px solid #e5e5e5; height: 145px;}
.blog .notice-wrap .nw-right ul li {padding: 12px 0; font-size: 16px; color: #666;}
.blog .notice-wrap .nw-right ul li span {background-color: #666; color: #fff; margin-right: 20px; padding:5px 10px;}

/* site */
.site {overflow: hidden;  padding: 70px 0;}
.site > div {width: 16.666%; float: left;}
.site > div h4 {font-size: 16px; font-weight: bold; padding-bottom: 20px;}
.site > div li {padding-bottom: 5px;}
.site > div li a {font-size: 15px; color: #666;}
.site > div.two {width: 33.22222%;}
.site > div.two ul {overflow: hidden;}
.site > div.two li {float: left; width: 50%;}

/* footer */
.footer {position: relative; padding: 50px 0; }
.footer .policy {padding-bottom: 30px;}
.footer .policy li {position: relative; display: inline-block; padding: 0 20px 0 10px;}
.footer .policy li:before {content: ''; width: 1px; height: 18px; background-color: #ccc; position: absolute; right: 0; top: 3px;}
.footer .policy li a {font-size: 16px;}
.footer .policy li:first-child {padding-left: 0;}
/* .footer .policy li:last-child:before {width: 0; height: 0;} */
.footer .policy li:last-child a {color: #1d7abd;}
.footer .policy li.last:before {width: 0; height: 0;}
.footer .address {color: #666; font-size: 14px;}
.footer .address li {padding-bottom: 5px;}
.footer .address span {padding-right: 20px;}
.footer .address p {padding:20px 0;}
.footer .icon {overflow: hidden;}
.footer .icon li {float: left; padding-right: 20px;}
.footer .icon li:last-child {padding-top: 9px;}
.footer .family {position: absolute; right: 0; top: 50px;}
.footer .family select {background-color: #fff; width: 145px; height: 44px; padding-left: 5px; margin-right: 5px;}
.footer .family button {padding: 10px 15px 11px; border: 1px solid #cfd5da; font-size: 14px; color: #707070;}
.ie8 .footer .family button {vertical-align:15px;}
.footer .w3c {position: absolute; right: 0; top: 110px;text-align: right;}





/* sub-banner */
.sub-banner {overflow: hidden; padding:80px 0;}
.sub-banner .sb-left {float: left; width: 760px;}
.sub-banner .sb-left h2 {font-size: 40px; color:#fff;}
.sub-banner .sb-left p {font-size: 16px; color:#fff;}
.sub-banner .sb-right {float: left; width: 410px; padding-top:15px;}
.sub-banner .sb-right li {display:inline; margin-left:10px;}
.sub-banner .sb-right li a {display:inline-block; color: #b2ddf9; font-size: 18px; border: 2px solid #b2ddf9; border-radius: 50px; width: 65px; height: 50px;
padding-left:55px; line-height: 50px; }
.sub-banner .sb-right li.ico_bg1 a {background: url(../img/ico_bg1.png) no-repeat 16px 13px;}
.sub-banner .sb-right li.ico_bg2 a {background: url(../img/ico_bg2.png) no-repeat 16px 13px;  }
.sub-banner .sb-right li.ico_bg3 a { background: url(../img/ico_bg3.png)no-repeat 16px 13px ; }
.sub-banner .sb-right li a:hover {color:#fff; border-color: #fff;}




/* product-table */
.product-table {padding: 80px 0;  }
.product-table .more {text-align: center; padding: 20px 0 40px; font-size: 14px;  }
.product-table .list li {font-size: 14px; line-height: 28px; position: relative; padding-left: 10px;  }
.product-table .list li:before {content:''; width: 3px; height: 3px; background: #333; position: absolute; left: 0;top: 12px; border-radius: 50%;}
.product-table .list .help {font-size: 20px;  }

/* table-title1 */
.table-title1 {position: relative;padding-bottom: 20px;}
.table-title1 li {display:inline;} 
.table-title1 li a {font-size: 18px; color: #999; padding: 0 10px;}
.table-title1 li.active a {color: #333;}
.table-title1 .detail {position: absolute; right: 0;top: 0; font-size: 18px; color:#1d7abd; }

/* table-style1 */
.table-style1 {  }
.table-style1 table {border-top: 2px solid #6f6f6f; border-bottom: 1px solid #9a9a9a; font-size: 16px;  text-align: center; color: #666; }
.table-style1 table thead th { background-color: #f9fafc; padding: 20px  30px; border-bottom: 1px solid #ccc; border-right: 1px solid #e4e4e4;}
.table-style1 table thead th:last-child {border-right: 0;}
.table-style1 table tbody td {padding: 20px  30px; border-bottom: 1px solid #e4e4e4; border-right: 1px solid #e4e4e4;  }
.table-style1 table tbody td:last-child {border-right: 0;}
.table-style1 .left { text-align: left; }
.table-style1 .center {text-align: center; }
.table-style1 .black {color: #000;}
.table-style1 .hot { background-color: #ff9900; color: #fff; font-size: 14px; padding: 2px 10px 0px 10px; display: inline-block; vertical-align: 4px; 
 line-height: 20px;}
.table-style1 .large {font-size: 28px; line-height: 38px;}
.table-style1 .small {font-size: 12px;  }
.table-style1 .view {display: inline-block; padding: 5px 45px; color: #fff; background-color: #3090d6; font-size: 16px;}




/* .select2 */
.select2 {overflow: hidden; padding: 70px 0;   }
.select2 h3 {float: left; width: 32.333%;  margin-right: 1.5%; font-size: 40px; color:#fff; }
.select2 > div {float: left; width: 26.3333%; margin-right: 1.5%; padding: 3%; height: 300px; }
.select2 > div.simg1 {background: #2886ca url(../img/hi1.png) no-repeat 30px 30px; background-size: 80px; }
.select2 > div.simg2 {background: #2886ca url(../img/hi2.png) no-repeat 30px 30px; background-size: 90px; margin-right: 0%;}
.select2 > div  h4 {font-size: 18px; color: #fff; padding-bottom: 20px; padding-top: 150px;  }
.select2 > div  p {font-size: 15px; color: #fff;  }

/* .select5 */
.select5 {overflow: hidden; padding: 70px 0;   }
.select5 h3 {float: left; width: 32.333%; margin-right: 1.5%; font-size: 40px; color:#fff; }
.select5 > div {float: left; width: 26.3333%; margin-right: 1.5%; margin-bottom: 1.5%; padding: 3%; height: 300px; }
.select5 > div.simg1 {background: #2886ca url(../img/hi1.png) no-repeat 30px 30px; background-size: 80px; }
.select5 > div.simg2 {background: #2886ca url(../img/hi1.png) no-repeat 30px 30px; background-size: 90px; margin-right: 0%; }
.select5 > div.simg3 {background: #2886ca url(../img/hi1.png) no-repeat 30px 30px; background-size: 90px; }
.select5 > div.simg4 {background: #2886ca url(../img/hi1.png) no-repeat 30px 30px; background-size: 90px; }
.select5 > div.simg5 {background: #2886ca url(../img/hi1.png) no-repeat 30px 30px; background-size: 90px; margin-right: 0%; }
.select5 > div  h4 {font-size: 18px; color: #fff; padding-bottom: 20px; padding-top: 150px;  }
.select5 > div  p {font-size: 15px; color: #fff;  }



/* dog */
.dog {padding: 70px; text-align: center; }
.dog h3 {font-size: 40px; padding-bottom:  60px;  }
.dog .view {font-size: 16px;  border: 1px solid #000; padding: 15px 43px; display: inline-block; text-align: center; margin-bottom: 50px; }
.dog .view:hover {background-color: #333; color: #fff;} 
.dog .dog-box {overflow: hidden; text-align: left; padding: 0px 150px; width: 1000px; margin: 0 auto; }
.dog .dog-left { float: left; width: 50%;   }
.dog .dog-left h4 { float: left; width: 20%; background: #1d7abd; color: #fff; border-radius: 50%; 
	width: 100px; height: 70px; text-align: center; padding-top: 30px;  font-size: 15px; /* box-sizing:border-box;*/}
.dog .dog-left ul {padding-top: 10px;}
.dog .dog-left  li {font-size: 15px; padding-top: 10px; display: inline-block; }
.dog .dog-left  li em { display: inline-block; padding-left: 50px; color: #333; width: 170px; padding-left: 30px;}
.dog .dog-left  li strong {font-size: 20px; color:#1d7abd;}
.dog .dog-right { float: right; width: 50%;  }
.dog .dog-right h4{ float: left; width: 20%; background: #1d7abd; color: #fff; border-radius: 50%; 
	width: 100px; height: 80px; text-align: center; padding-top: 20px; font-size: 15px; }
.dog .dog-right ul {padding-top: 10px;  }
.dog .dog-right  li {font-size: 15px; padding-top: 10px;  display: inline-block; padding-left: 20px;}
.dog .dog-right  li em { display: inline-block;  color: #333; width: 100px;}
.dog .dog-right  li strong {font-size: 20px; color:#1d7abd; }





/* table-style2 */
.table-style2 {  }

/* table-style3 */
.table-style3 {  }