@charset "utf-8";
/*
  NateOn Remote Service
  Author Rsupport R&D Center | Front-End Team | Park Jeong Shik 2012/07 
  Copyright © RSUPPORT Co., Ltd. ALL RIGHTS RESERVED.
*/

/* 네이트온 임시 hide */
#header,
#footer,
#sidebar,
.col-banner { border: solid 1px #bbb !important; }
#header > *,
#footer > *,
#sidebar > *,
.col-banner > * { visibility: hidden; }
#contents { margin-left: 22px !important; }
/* 네이트온 임시 hide */

#container { width: 582px; margin: 0 auto; font-size: 12px; color: #484848; font-family: Dotum, AppleGothic, Arial, Sans-serif; font-size: 12px; }
#container h3.line-title { margin: 0 0 15px !important; border-bottom: solid 1px #c9c9c9; padding-bottom: 8px; font-weight: normal; font-size: 12px; }
#container h3.line-title strong { margin-left: 5px; font-size: 16px; color: #0f8bc7; }
#container h3.line-title span { margin-right: 5px; }

/* buttons */
.button, 
.button-large { padding: 2px 4px; background: url(../img/common/buttons.gif) repeat-x 0 0; border: solid 1px #b2b2b2; color: #333; text-decoration: none; }
.button:hover,
.button-large:hover { color: #333; background: #efefef; }
.button.sky-blue { background-position: 0 -20px; border-color: #4c8dad; color: #fff; }
.button.dark-blue { background-position: 0 -40px; border-color: #a1b2c6; color: #fff; }
.button.sky-blue:hover { background: #43a0d1; }
.button.dark-blue:hover { background: #a8b6c5; }

.button.orange { 
	background-position: 0 -60px; color: #fff; border-color: #b15641; padding: 7px 50px; font-weight: bold; font-size: 14px;
}
.button.orange:hover { background: #e24e2a;}
.button-large { padding: 7px 15px; cursor: pointer; font-weight: bold; background-position: 0 -96px; }

/* list stlye */
.list-title { margin-bottom: 5px; }
.dot { margin: 0 0 5px; padding-left: 0; list-style: none; line-height: 20px; }
.dot li { padding-left: 10px; margin-left: 5px; background: url(../img/common/bg-list.gif) no-repeat 0 7px; }
.num-list { line-height: 20px; padding-left: 20px; margin-top: 0; }

/* font style */
#container h3.title { margin-bottom: 5px; font-size: 14px; color: #0e8ac8; font-weight: bold; }
#container h4 { margin: 12px 0 8px; }
#container p { line-height: 20px; margin-top: 0; }
.img-section { padding: 30px 0; background: #666666; margin-bottom: 8px; color: #fff; font-size: 30px; text-align: center; }
.font-sky { color: #0F8BC7; }
.bold { font-weight: bold; }

/* decoration */
#container .blue { color: #0f8bc7; }
#container .center { text-align: center; }

/* content layout */
.two-piece-section { overflow: hidden; *zoom: 1; }
.two-piece-section:after { display: block; content: " "; clear: both; }
.two-piece-section .left { float: left; width: 48%; margin-right: 20px; } 
.two-piece-section .right { float: left; width: 48%; }

.three-piece-section { padding: 0; list-style: none; }
.three-piece-section li { float: left; margin: 0 20px 20px 0; width: 180px; }
.three-piece-section li.last { margin-right: 0; }
.three-piece-section .img-section { width: 180px; height: 230px; }
.num-explain { position: relative; padding-left: 13px; }
.num-explain span { position: absolute; left: 0; }

/* pagination content */
.pagination-content { display: none; }
.pagination-content.fitst { display: block; }
.btn-pagination a { color: #666; text-decoration: none; padding: 5px 10px; }
.btn-pagination a:hover { background: #dcf4ff; }
.btn-pagination a.active { color: #0f8ac5; font-weight: bold; }

/* tab content */
.tab-wrap .btn-tab { padding: 0; margin: 0; }
.tab-wrap .btn-tab { overflow: hidden; }
.tab-wrap .btn-tab li { float: left; list-style: none; width: 50%; }
.tab-wrap .btn-tab li.first { margin-right: -2px; }
.tab-wrap .btn-tab a { 
	display: block; width: 100%; text-align: center; color: #333; font-size: 14px; font-weight: bold; text-decoration: none;
	border: solid 1px #bbb; padding: 10px 0; background: #e6e6e6;
}
.tab-wrap .btn-tab a.active { border-bottom: solid 1px #fff; background: #fff; }
.tab-wrap .tab-content { padding: 20px 0; display: none; }
.tab-wrap .tab-content.fitst { display: block; }

/* table style */
.table-black { width: 100%; }
.table-black th { background: #000; color: #fff; padding: 4px 0; }
.table-black td { padding: 6px 0; border-bottom: solid 1px #e3e3e3; line-height: 18px; }
.table-black td { padding-left: 10px; }
.table-black tr.last td { border-color: #c6c6c6; }

.table-default { width: 100%; }
.table-default th { padding: 4px 0; border-top: solid 2px #616161; border-bottom: solid 1px #a5a5a5; background: #f5f5f5; text-align: center; }
.table-default td { padding: 6px 0; border-bottom: solid 1px #e3e3e3; }
.table-default tr:hover { background: #f6fcff; }

.dot-top { border-top: dotted 1px #bbb; margin-top: 20px; padding-top: 20px; }
.dot-bottom { border-bottom: dotted 1px #bbb; margin-bottom: 20px; }
code { display: block; margin-top: 40px; font-size: 30px; font-style: italic; }

/* payment */
.payment-title { margin: 15px 0 10px !important; }
.payment-title strong { color: #0F8BC7; }
.table-default.payment { margin-bottom: 40px; }
.table-default.payment .month { text-align: right; padding-right: 65px; }
.table-default.payment td { text-align: center; }
.table-default.payment td strong { font-size: 14px; } 
.table-default.payment td strong span { font-weight: normal; font-size: 12px; }
.table-default.payment .dotori { padding-left: 20px; background: url(../img/common/icons.gif) no-repeat 0 0; }

/* freetrial */
.info-box { border: solid 1px #cee1e3; background: #e4eff1; padding: 10px 12px; line-height: 20px; }
.agreement { border: solid 1px #d7d7d7; padding: 10px 12px; line-height: 20px; height: 100px; overflow-y: scroll; }
.freetrial-form p { margin: 10px 0; }
.freetrial-form p input { vertical-align: top; }
.freetrial-form p label { cursor: pointer; }

/* carousel */
#carousel { position: relative; }
#carousel div { margin: 0 auto; position: relative; height: 70px; height: 80px; overflow: hidden; border: solid 1px #000; }
#carousel ul { position: absolute; z-index: 100; margin: 0; padding: 0; }
#carousel li { float: left; list-style: none; font-size: 100px; color: #333; }
#carousel div,
#carousel li { width: 480px; height: 200px; }
#carousel #prev,
#carousel #next { position: absolute; top: 0; width: 48px; height: 100%; cursor: pointer; border: 0; z-index: 101; background: #000; color: #fff; }
#carousel #next { right: 0; }