@charset "utf-8";
/* CSS Document */


/* 버튼 스타일 */
.btn-wrap {position: relative; text-align: center; margin-top:20px}
.btn-wrap:after { content: ''; display: block; clear: both; }
.btn-wrap .btn-center {display: inline-block; float:none }
.btn-wrap button {margin-right: 5px; font-weight: 500; border:0;height: 40px;padding:0 15px; font-size: 1.4rem; font-weight: 400; -webkit-transition: background .3s, color .3s; -o-transition: background .3s,color .3s;transition: background .3s, color .3s; cursor: pointer; float: left; border-radius: 5px; line-height: 39px; width:90%; background:#fff;}
.btn-wrap button:last-child {margin-right:0;}
.btn-wrap button.blue-btn {border:1px solid #000c34; color:#000c34;}
.btn-wrap button.navy-btn {background:#000c34; color:#fff;}
.btn-wrap button.blue-btn:hover {background:#000c34; color:#fff;}

@media(max-width:1024px) {
    .btn-wrap button {height:40px; line-height:39px;}
}

/* Header 메뉴 클릭시 css */
#spobee_container .header-container .header .gnb ul.depth-01>li>h2 a.select {color:#2ea7e0;}

/* Header 배너영역 */
#spobee_container .header-banner-container { width:100%; height: 430px; position: relative; background:url("../../../img/sub/pricing/pricing-bg.png") no-repeat center; background-size: cover; }
#spobee_container .header-banner-container .title {width:100%; height:330px; margin:0 auto; padding-top:167px; padding-bottom:167px; text-align: center;}
#spobee_container .header-banner-container .title .text-area {color: #fff;}
#spobee_container .header-banner-container .title .text-area p:nth-child(1) {font-size:1.4rem; letter-spacing: 0.86em; color: #b6b6b6; font-weight: lighter; text-shadow:2px 2px 5px rgba(0, 0, 0, 0.43);padding-left:9px;}
#spobee_container .header-banner-container .title .text-area p:nth-child(2) {font-size:4rem; letter-spacing: -0.02em; color: #fff;text-shadow:2px 2px 5px rgba(0, 0, 0, 0.43);padding-top:10px;}

#spobee_container .header-banner-container .title .text-area p:nth-child(3) {font-size:2rem; letter-spacing: -0.025em; color: #fff; text-shadow:2px 2px 5px rgba(0, 0, 0, 0.43);padding-top:10px; font-weight: lighter; line-height:32px; margin:10px auto; width:600px;}

/* Header 3depth */
#spobee_container .header-banner-container .sub-gnb {position:absolute; bottom:0; left:0; width:100%; height:80px; border-top:1px solid rgba(255,255,255,0.25);}
#spobee_container .header-banner-container .sub-gnb ul {width:900px; margin:0 auto;}
#spobee_container .header-banner-container .sub-gnb ul li { position:relative; float:left; width:33.3%; height: 100%; line-height: 80px; font-size:1.8rem; letter-spacing: -0.025em; text-align: center;}
#spobee_container .header-banner-container .sub-gnb ul li:after {display: block; content: ""; width:0; height:1px; background:#2ea7e0; position:absolute; top:-1px; left:50%; transition: left 0.25s ease, width 0.25s ease;}
#spobee_container .header-banner-container .sub-gnb ul li:hover:after { width: 100%; left: 0%; }
#spobee_container .header-banner-container .sub-gnb ul li a {color: #e6e6e6;display: block; width:100%; height:100%;}
#spobee_container .header-banner-container .sub-gnb ul li a:hover, #spobee_container .header-banner-container .sub-gnb ul li a.select {color: #2ea7e0;}
#spobee_container .header-banner-container .sub-gnb ul li.select_top_line:before {display: block; content: ""; width:100%; height:1px; background:#2ea7e0; position:absolute; top:-1px; left:0;}
@media all and (max-width: 1100px)
{
	#spobee_container .header-banner-container .sub-gnb ul {width:100%;}
}
@media all and (max-width: 640px)
{
    #spobee_container .header-banner-container {height:380px}
	#spobee_container .header-banner-container .title {padding: 167px 20px 0;}
	#spobee_container .header-banner-container .title .text-area p:nth-child(3) {font-size:1.8rem; width:85%;}
}
@media all and (max-width: 540px)
{
	#spobee_container .header-banner-container .title {padding: 160px 10px 0;}
	#spobee_container .header-banner-container .title .text-area p:nth-child(2) {font-size:3rem;}	
	#spobee_container .header-banner-container .title .text-area p:nth-child(3) {font-size:1.6rem;}
	#spobee_container .header-banner-container .sub-gnb ul li {font-size:1.5rem; letter-spacing: -0.05em;}
}

/* 영역 공통 */
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area { width: 1100px; margin: 0 auto; padding: 80px 0; }
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area { display: block; text-align: center; margin: 0 auto 40px; position: relative; padding: 10px; }
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area h4 {position:relative; font-size:2.7rem; letter-spacing: -0.015em;color:#222;padding:25px 0; margin:0;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area h4:after {display:block;content:""; position:absolute; top:0; left:50%; margin-left:-15px;width:30px; height:3px; background:#2ea7e0;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area  .title-area p {letter-spacing: -0.015em; font-size: 1.7rem; color: #939393; }
@media all and (max-width: 1100px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area { width: 100%; padding: 80px 20px; }
}
@media all and (max-width: 640px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area { width: 100%; padding: 15px; height: auto; }
}


/* 가격 */

.pricing-table > .box {float:left; width:calc(33.3% - 20px); margin-right:30px; text-align: center; border-radius:7px; transition:transform 0.3s ease}
.pricing-table > .box:hover {transform: translateY(-10px);}
.pricing-table > .box:last-child {margin-right:0}
.pricing-table > .box .plan-tit {font-size:1.8rem; font-weight:700; padding:12px; color:#fff; border-radius: 7px 7px 0 0;}
.pricing-table > .box.lite .plan-tit {background: #E1E9F2;; color:#000c34;}
.pricing-table > .box.standard .plan-tit {background:#2ea7e0}
.pricing-table > .box.enterprise .plan-tit {background:#000c34}
.pricing-table > .box .plan-info {padding:20px; background:#fff;border:1px solid #e5e5e5; border-top:0; border-radius:0 0 7px 7px}
.pricing-table > .box .plan-info ul li {margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed #e5e5e5; text-align:left; color:#444; font-size:1.6rem}
.pricing-table > .box .plan-info ul li:last-child {border-bottom:0; padding-bottom:0; margin-bottom:0}
.pricing-table > .box .plan-info ul li img {width:17px;margin-right:7px; vertical-align: middle;position:relative; top:-1px}
.pricing-table > .box .plan-info ul li b.point {color:#2db8db; font-size:1.7rem}
.pricing-table > .box .plan-info ul li .sub-info {font-size:1.3rem; color:#aaa;}
.pricing-table > .box .plan-info .price-wrap {border-bottom:1px solid #e5e5e5; padding:20px 0 40px; margin-bottom:15px; }
.pricing-table > .box.etc .plan-info .price-wrap {border-bottom:0; margin-bottom:0; padding:20px 0 20px}
.pricing-table > .box.etc .plan-info .price-wrap img {margin-bottom:20px; opacity:.4}
.pricing-table > .box.etc .plan-info {background:#000c34; border-radius:7px; }
.pricing-table > .box.etc .plan-info .price-wrap p {font-size:1.4rem; color:#fff; line-height:23px;}
.pricing-table > .box .plan-info .price-wrap .price {font-size:2.4rem; font-weight:700; display:inline-block; color:#00186a; letter-spacing: -0.5px; }
.pricing .vat-info {color:#aaa; font-size: 1.2rem; font-weight: 400; letter-spacing: 0;margin-left:8px;}
.pricing-table > .box.lite .plan-info {border-color: #D2DFEB;}
.pricing-table > .box.standard .plan-info {border-color:#2ea7e0}
.pricing-table > .box.enterprise .plan-info {border-color:#000c34}

@media(max-width:1024px)  {
    .pricing-table > .box:hover {transform:none}
    .pricing-table > .box .plan-tit {font-size:1.6rem; padding:8px}
    .pricing-tit {margin-bottom:40px;}
    .pricing-table > .box {float:none; width:100%; margin-right:0; margin-bottom:20px;}
    .pricing-table > .box .plan-info ul li {float:left;}
    .pricing-table > .box .plan-info ul li:nth-child(odd) {width:55%}
    .pricing-table > .box .plan-info ul li:nth-child(even) {width:45%}
    .pricing-table > .box .plan-info ul li:last-child {width:100%}
    .pricing-table > .box .plan-info .price-wrap .price {font-size:2.4rem;}
    
}

@media(max-width:768px) {    
    .pricing-table > .box .plan-info ul li {font-size:1.4rem; padding-bottom:7px; margin-bottom:7px;}
    .pricing-table > .box .plan-info ul li b.point {font-size:1.5rem;}
}

@media(max-width:580px) {
    .pricing-table > .box .plan-tit {font-size:1.5rem;}
    .pricing-table > .box .plan-info {padding:15px}
    .pricing-table > .box .plan-info ul li {float:none;}
    .pricing-table > .box .plan-info ul li:nth-child(odd),
    .pricing-table > .box .plan-info ul li:nth-child(even) {width:100%}
}

/* 기록 및 영상 */


.table-wrap .normal-table { width: 100%; table-layout: fixed; }
.table-wrap .normal-table tbody tr { border-bottom: 1px solid #dee3eb; }
.table-wrap .normal-table tbody tr th { font-size: 1.5rem; font-weight: 600; letter-spacing: 0; border-right: 1px solid #dee3eb; width: 160px; padding: 30px 0; color: #666; word-break:keep-all }
.table-wrap .normal-table tbody tr td { text-align: center; letter-spacing: 0; padding: 30px 20px 30px; }
.table-wrap .normal-table tbody tr td:nth-of-type(1),
.table-wrap .normal-table tbody tr td:nth-of-type(3),
.table-wrap .normal-table tbody tr td:nth-of-type(5) { background: #f8f8f8; }
.table-wrap .normal-table tbody tr td.td-pd {padding: 90px 20px 90px}
.table-wrap .normal-table tbody tr td .plan-name { font-size: 1.7rem; font-weight: 600; letter-spacing: 0; display: block; margin-bottom: 5px; }
.table-wrap .normal-table tbody tr td .etc {font-size:1.5rem;}
.table-wrap .normal-table tbody tr td .price { font-size: 2.5rem; font-weight: 700; display: inline-block; }
.table-wrap .normal-table.camera tbody tr td .price {font-size:2.2rem}
.table-wrap .normal-table.camera tbody tr td .btn-wrap button.blue-btn {height:35px; line-height:33px;}
.table-wrap .normal-table tbody tr td span.on { display: inline-block; width: 15px; height: 15px; border-radius: 50%; background: #2ea7e0; }
.table-wrap .normal-table tbody tr td span.off { display: inline-block; width: 15px; height: 15px; border-radius: 50%; background: #e5e5eb; }
.pricing .table-wrap.mo {display:none;}
.pricing .table-wrap.mo>ul>li { background: #fff; width: 100%; border:1px solid #000c34; text-align: center; position: relative; margin-bottom:20px; border-radius:7px;}
.pricing .table-wrap.mo>ul>li:last-child {margin-bottom:0}
.pricing .table-wrap.mo>ul>li .plan-name { font-size: 1.5rem; font-weight: 600; display: block; border-bottom:1px solid #dee3eb; padding:8px; border-radius:7px 7px 0 0}
.pricing .table-wrap.mo>ul>li{border-color:#e1e9f2}
.pricing .table-wrap.mo>ul>li .plan-name {color:#000c34; background:#E1E9F2}
.pricing .table-wrap.mo>ul>li .price-area { margin: 20px 0; }
.pricing .table-wrap.mo>ul>li .price-area .price { font-size: 2.5rem; font-weight: 700; display: inline-block; color:#00186a}

.pricing-table.camera {display:none;}

@media(max-width:1024px) {
    .table-wrap .normal-table tbody tr th {width:120px}
    .table-wrap .normal-table tbody tr td {padding:25px 15px}
    .table-wrap .normal-table tbody tr td .plan-name {font-size:1.5rem}
    .table-wrap .normal-table tbody tr td .price {font-size:2.4rem;display:block;}
    .table-wrap .normal-table.camera tbody tr th  {font-size:1.4rem; width:100px}
    .table-wrap .normal-table.camera tbody tr td .price {font-size:1.7rem}
    .table-wrap .normal-table tbody tr td span.on,
    .table-wrap .normal-table tbody tr td span.off {width:12px; height:12px;}    
    .pricing-table.camera > .box .plan-info ul li:nth-child(odd) {width:50%}
    .pricing-table.camera > .box .plan-info ul li:nth-child(even) {width:50%}
    .pricing-table.camera > .box .plan-info ul li:last-child {border-bottom: 1px dashed #e5e5e5;padding-bottom: 7px; margin-bottom: 7px;}
}

@media(max-width:768px) {
    .table-wrap .normal-table tbody tr th {padding:20px}
    .table-wrap .normal-table tbody tr td {padding:20px 15px}    
    .table-wrap .normal-table tbody tr td.td-pd {padding: 60px 20px 60px}
    
    .table-wrap .normal-table tbody tr td .price { font-size:2rem;}
    .price-wrap .btn-wrap button {width:350px;}
    .pricing-table > .box.etc .btn-wrap button {font-weight:700}
    .table-wrap .normal-table.camera {display:none;}
    .pricing .table-wrap.camera.mo {display:block;}
    .pricing-table.camera {display:block}


}

@media(max-width:580px) {
    .table-wrap {display:none;}
    .pricing .table-wrap.mo {display:block;}    
    .pricing .table-wrap.mo .inquiry-btn button {width:100%; font-weight:600}

    .pricing-table.camera > .box .plan-info ul li {float:left}
    .pricing-table.camera > .box .plan-info ul li:nth-child(odd) {width:50%}
    .pricing-table.camera > .box .plan-info ul li:nth-child(even) {width:50%}
}

@media(max-width:500px) {
    .price-wrap .btn-wrap button {width:90%}
}