﻿@charset "utf-8";
@import url(common.css);
/* Internet Explorer용 코드 */
html {scrollbar-3dLight-Color: #efefef; 
  scrollbar-arrow-color: #dfdfdf; scrollbar-base-color: #efefef; 
  scrollbar-Face-Color: #dfdfdf; scrollbar-Track-Color: #efefef; scrollbar-DarkShadow-Color: 
  #efefef; scrollbar-Highlight-Color: #efefef; scrollbar-Shadow-Color: #efefef}

/* Chrome, Safari용 스크롤 바 */
::-webkit-scrollbar {width: 6px; height: 8px; border: 3px solid #fff; }
::-webkit-scrollbar-button:start:decrement, .db-host-area::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background-color: #fff}
::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb {height: 50px; width: 6px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}
/* -------scrollbar----------- */
/* ck-editor st*/
.cke_top{padding:10px 20px 2px !important; background: #f4f4f4  !important; border-bottom:1px solid #ddd !important;background-image: none !important; -webkit-box-shadow:none; box-shadow:none !important}
.cke_chrome{border: none !important;}
.cke_toolgroup{border: none !important; background:transparent !important; background-image: none !important; -webkit-box-shadow:none; box-shadow:none !important}
.cke_chrome{border: none !important; }
.cke_combo_button{    border: 1px solid #ddd !important;  border-radius: 0 !important;  box-shadow: 0 0 0 !important;  background: #fff !important;}
.cke_bottom{display: none !important;}

/* ck-editor end*/


/* 공통사항 */
.fl-l {float:left !important}
.fl-r {float:right !important}
.text-left {text-align:left !important}
.text-center {text-align:center !important}
.text-right {text-align:right !important}

/* margin */
.mr5 {margin-right:5px !important}

/* padding */
.pt20 {padding-top:20px !important}
.pt30 {padding-top:30px !important}

/* SubContainer */
#subContent {width:100%; min-width:1000px}
.section-bg {width:100%; min-width:1000px; border-top:1px solid #ddd; background:#f9f9f9}
h4 {margin-bottom:10px; padding:0 22px; font-size:16px; font-weight:bold; color:#666; background:url('../img/bullet_sub.png') 0 -159px no-repeat}
h4.h4-title {margin:40px 0 10px}
h4 em.h4-bold {font-weight:bold; color:#1fb5a9}
.conts-title {position:relative}
.text-desc {position:relative; top:-2px;font-size:12px; padding-left:6px; font-weight:normal}

/* Sub Content title*/
.content-area {width:960px; margin:0 auto; padding:50px 0}
.content-area:after {display:block; clear:both; content:''}
.content-area .content-title {float:left; width:160px;}
.content-area .content-title h3.h3-title {font-size:20px; font-weight:bold}

/* Sub Content Area */
.content-area .sub-content {float:left; width:800px}

/* SubHeader */
.lnb-area {width:100%; min-width:1000px; border-bottom:1px solid #dadce0;}
.lnb-area:ater {display:block; clear:both; content:''}
.lnb-area .lnb {position:relative; width:960px; height:35px; margin:0 auto;}
.lnb-area .lnb ul {position:absolute; top:12px; right:0;}
.lnb-area .lnb ul li {float:left; margin-left:5px; font-size:12px; color:#999}
.lnb-area .lnb ul li.pipe {font-size:11px; font-weight:normal; color:#ddd}
.lnb-area .lnb ul li span {font-weight:bold; color:#1fb5a9}
.lnb-area .lnb ul li a {color:#76787d}
.lnb-area .lnb ul li a:hover,.lnb-area .lnb ul li a:active,.lnb-area .lnb ul li a:focus {color:#1fb5a9}

.gnb-area {width:960px; margin:0 auto; padding: 20px 0;}
.gnb-area:after {display:block; clear:both; content:''}
.gnb-area .sub-logo {display:block; float:left; width:200px; font-size:30px; font-weight:bold;}
.gnb-area .gnb {float:right; width:700px; height:24px;}
.gnb-area .gnb ul {float:right;}
.gnb-area .gnb ul li {float:left; margin-left:50px}
.gnb-area .gnb ul li a{display: block; font-size: 16px; font-weight: 500; text-align:center; text-decoration: none; color: #76787d;}
.gnb-area .gnb ul li a::before{content: ''; display: block; font-family: 'xeicon'; font-size: 24px;}
.gnb-area .gnb ul li a.current{color: #1fb5a9;}
.gnb-area .gnb ul li.gnb01 a::before{content:'\eb78'}
.gnb-area .gnb ul li.gnb02 a::before{content:'\e9f1'}
.gnb-area .gnb ul li.gnb03 a::before{content:'\e99d'}
.gnb-area .gnb ul li.gnb04 a::before{content:'\e9a7'}
.gnb-area .gnb ul li.gnb05 a::before{content:'\e9d8'}

/* Sub title */
.path-area {width:100%; height:98px; min-width:1000px; border-bottom:1px solid #ddd; background:#1fb5a9}
.path-area .path {position:relative; width:960px; min-width:960px; margin:0 auto;}
.path-area .path h2.sub-title {font-size:26px; font-weight:700; padding-top:32px; color:#fff }
.path-area .path h2.sub-title span {position:absolute; top:40px; margin-left:2px; font-size:16px; font-weight:700; color:#18917e}
.path-area .path .quick {position:absolute; top:0; right:0; width:230px; text-align:center;}
.path-area .path .quick ul {float:right; width:140px; margin-top:26px}
.path-area .path .quick ul li {float:left; width:50px; height:55px; margin-left:20px; font-size:12px; line-height:96px; text-align:center}
.path-area .path .quick ul li a {display:block; width:50px; height:55px; background:url('../img/icon_sub_path.png') 0 0 no-repeat}
.path-area .path .quick ul li a.path-icon01 {background-position:7px 0}
.path-area .path .quick ul li a.path-icon01:hover,
.path-area .path .quick ul li a.path-icon01:active,
.path-area .path .quick ul li a.path-icon01:focus {background-position:7px -288px}
.path-area .path .quick ul li a.path-icon02 {background-position:7px -96px}
.path-area .path .quick ul li a.path-icon02:hover,
.path-area .path .quick ul li a.path-icon02:active,
.path-area .path .quick ul li a.path-icon02:focus {background-position:7px -384px}
.path-area .path .quick ul li a.path-icon03 {background-position:7px -192px}
.path-area .path .quick ul li a.path-icon03:hover,
.path-area .path .quick ul li a.path-icon03:active,
.path-area .path .quick ul li a.path-icon03:focus {background-position:7px -480px}
.path-area .path .quick ul li.new {width:20px; height:20px; position:absolute; top:-4px; left:0; font-size:12px; font-weight:bold; line-height:19px; color:#fff; background:url('../img/img_path_new.png') 0 0 no-repeat}
.path-area .path .quick ul li.icon01 {top:-4px; left:26px}
.path-area .path .quick ul li.icon02 {top:-4px; left:96px}
.path-area .path .quick ul li.icon03 {top:-4px; left:166px}

/* Mycloud - VD List*/
.vd-area {display:flex;}
.vd-area:after {display:block; clear:both; content:''}
.vd-nav-area{overflow:hidden; border-radius: 5px; background-color: #fff; border: 1px solid #dadce0 ;box-shadow:0 0 8px 1px rgba(0 ,0 ,0 , .08);}
.vd-area .vd-nav {overflow-x:hidden; float:left; width:202px; height:294px; overflow-y:scroll;;}
.vd-area .vd-nav li {width:100%; height:98px;}
.vd-area .vd-nav li:last-child {border-bottom:0}
.vd-area .vd-nav li a {display:flex; flex-direction:column; justify-content: center; position:relative; width:202px; height:98px; padding-left:70px; font-size:14px; color:#dadce0; cursor:pointer; vertical-align: middle; text-decoration: none; box-sizing: border-box;  border-bottom:1px solid #dadce0;box-sizing: border-box;}
.vd-area .vd-nav li a::before {content: '';display: inline-block; position:absolute; top: 50%; left:40px; transform: translateY(-50%);width: 22px; height: 22px; margin-right:7px; background:url(../img/new/icon_mycloud_btn.png) 0 -22px no-repeat; vertical-align: text-top;}
.vd-nav .vdNick{display:block; overflow:hidden; text-overflow:ellipsis; width:240px; font-size: 14px; white-space:nowrap}
.vd-area .vd-nav li a:hover {color:#202124; background-color:#f9f9f9; background-position:20px -275px; box-sizing: border-box;}
/* .vd-area .vd-nav li a.selectvd{line-height: 78px;} */
.vd-area .vd-nav li a.list-current {color:#202124; font-weight:bold; background-position:20px -125px}
.vd-area .vd-nav li.list-current {width:100%; height:98px; text-indent:80px; font-size:15px; font-weight:bold; color:#202124; background: url('../img/img_mycloud_tab.png') 20px -125px no-repeat;}
.vd-area .vd-nav li a:hover::before,.vd-area .vd-nav li a.list-current::before{background-position-y: 0;}
.vd-area .vd-nav li a .vdNick{display: block; overflow:hidden;width:100px; text-overflow:ellipsis; white-space: nowrap;}

.vd-con {margin-left: 20px;}
.vd-con:after {display:block; clear:both; content:''}
.default-img {text-align:center}
.default-img a {display:block; width:100%; padding:20px 0; text-align:center}
.con-area {display: flex; width:738px; position:relative}
.con-area .h1-title {padding:13px 30px; font-size:22px; border-bottom:1px solid #dadce0; font-weight: 700;}
.con-area h1.vmname {padding:13px 30px; font-size:22px; border-bottom:1px solid #dadce0; font-weight: 700}
.con-area h1 {font-size:20px; font-weight:bold; color:#1fb5a9}
.con-area span.os-img {display:block; float:left;  margin-right:10px; }
.con-area span.first {border:0}
.con-area .vd-btn {width:216px; border:1px solid #dadce0; border-radius:5px; background: #fff; box-shadow:0 0 8px 1px rgba(0 ,0 ,0 , .08);}
.con-area .vd-btn li {font-weight:bold; text-indent:40px; box-sizing: border-box;}
.con-area .vd-btn li:not(:last-child){ border-bottom: 1px solid #dadce0;}
.con-area .vd-btn li a {display:block; width:100%; height:58px; line-height:58px; font-size: 14px; color:#202124; font-weight: 400; box-sizing: border-box;}
.con-area .vd-btn li.nosnap a{height: 116px; line-height: 116px;}
.con-area .vd-btn li a::before{content: ''; display:inline-block; width: 23px; height: 22px; margin-right:14px; background: url(../img/new/icon_mycloud_btn.png) no-repeat; vertical-align: middle;}
.con-area .vd-btn li a.vd-btn01::before {width:18px; background-position:-22px 0;}
.con-area .vd-btn li a.vd-btn02::before {background-position:-66px 0;}
.con-area .vd-btn li a.vd-btn03::before { background-position:-42px 0;}
.con-area .vd-btn li a.vd-btn04::before { background-position:-90px 0;}
.con-area .vd-btn li a.vd-btn05::before { background-position:-90px 0;}
.con-area .vd-btn li a.vd-btn06::before { background-position:-114px 0}
/* .con-area .vd-btn li a:hover,
.con-area .vd-btn li a:active {display:block; width:100%; height:47px; line-height:47px;   -85px 7px no-repeat}
.con-area .vd-btn li a.vd-btn01 {height:47px; text-indent:75px; line-height:47px; background-position:-50px 8px; }
.con-area .vd-btn li a.vd-btn01:hover,
.con-area .vd-btn li a.vd-btn01:active {height:47px; text-indent:75px; line-height:47px;background-position:-50px 8px}
.con-area .vd-btn li a.vd-btn02 {text-indent:46px; background-position:14px -62px}
.con-area .vd-btn li a.vd-btn02:hover,
.con-area .vd-btn li a.vd-btn02:active {background-position:-86px -61px}
.con-area .vd-btn li a.vd-btn03 {background-position:14px -130px}
.con-area .vd-btn li a.vd-btn03:hover,
.con-area .vd-btn li a.vd-btn03:active {background-position:-86px -129px}
.con-area .vd-btn li a.vd-btn04 {background-position:14px -198px}
.con-area .vd-btn li a.vd-btn04:hover,
.con-area .vd-btn li a.vd-btn04:active {background-position:-86px -197px}
.con-area .vd-btn li a.vd-btn05 {font-size:12px; text-indent:34px; background-position:14px -268px}
.con-area .vd-btn li a.vd-btn05:hover,
.con-area .vd-btn li a.vd-btn05:active {background-position:-86px -267px}
.con-area .vd-btn li a.vd-btn06 {text-indent:46px; background-position:14px -335px}
.con-area .vd-btn li a.vd-btn06:hover,
.con-area .vd-btn li a.vd-btn06:active {background-position:-86px -334px} */

.vd-info {float:left; width:150px; font-size:13px; margin-top:15px; color:#999}
.vd-info dt {float:left; clear:both; margin-bottom:10px; padding-left:10px; background:url('../img/bul_squere.png') 3px 9px no-repeat}
.vd-info dd {float:left; margin:0 0 10px 6px; color:#437981}

.vcloudpc-state {font-size:12px; }
.vcloudpc-state dt {display:inline-block; margin-right:3px; color:#999}
.vcloudpc-state dd {display:inline-block; color:#1fb5a9}
.vcloudpc-state .vmstate{color: #76787d;}
/* .vcloudpc-state dd.vcloudpc-state-play {background-position:0 4px}
.vcloudpc-state dd.vcloudpc-state-stop {background-position:0 -36px} */

.btn-disabled {position:absolute; top:165px; left:253px}
.btn-disabled button {font-size:12px; text-align:center; line-height:20px; font-weight:bold; border:0; border-radius:3px; padding:3px 15px; cursor:pointer; background:#666; color:#fff}
.btn-disabled button:hover,.btn-disabled button:active {}

.re-vm-area{width:502px; margin-right:20px; background-color: #fff; border-radius: 5px; border: 1px solid #dadce0; box-shadow:0 0 8px 1px rgba(0 ,0 ,0 , .08);}
.re-vm-area .vmname{position: relative;}
.re-vm-area .btnBox .btn{font-size: 24px;}
.re-vm-area .vmname .btnBox{position:absolute; top:5px; right:30px;}
.re-vm-area .vcloudpc-state{padding: 28px 68px 10px;}
.re-vm-area span.os-img{padding:0 41px 38px 60px }
.re-vd-area{overflow: hidden;}
.re-vd-area h2{font-size: 16px; font-weight: 700; color:#202124;}
.re-vd-area .vd-info{width:auto;margin-top:5px}
.re-vd-area .vd-info dt,.re-vd-area .vd-info dd{font-size: 16px; color:#76787d}
/* Mycloud - Station
.sub-content .station-area {width:738px; padding:30px; border:1px solid #ddd; background:#fff}
.sub-content .station-area:after {display:block; clear:both; content:''}
.station-area .graph {width:100%; text-align:center; line-height:40px; font-weight:bold; color:#fff}
.station-area .graph .use {float:left; height:40px; background:#fb4f27}
.station-area .graph .remain {float:left; height:40px; color:#666; background:#eee}
.station-area .table-area {float:left; width:78%; margin-top:20px}
.station-area .table-area table {width:100%; border-top:1px solid #bbb}
.station-area .table-area table th {font-weight:normal; border-right:1px solid #ddd}
.station-area .table-area table th.bor-bottom {border-bottom:1px solid #ddd}
.station-area .table-area table td {text-align:left; padding-left:20px}
.station-area .table-area table td.bor-top {border-top:1px solid #bbb}
.station-area .table-area table td em {color:#fb4f27}
.station-area .station-btn {float:right; width:140px; margin-top:19px; font-weight:bold; text-align:center; line-height:140px}
.station-area .station-btn a {display:block; width:140px; height:97px;border:1px solid #ddd; border-radius:6px; background:url('../img/icon_mycloud_btn.png') 54px -440px no-repeat}
.station-area .station-btn a:hover,
.station-area .station-btn a:active,
.station-area .station-btn a:focus {display:block; width:140px; height:97px; color:#fff; background:#1fb5a9 url('../img/icon_mycloud_btn.png') -46px -440px no-repeat}

 Mycloud - Gauge
.sub-content .tab-con01 {width:798px; border:1px solid #ddd; padding:30px 0; border-top:0; margin-top:-1px}
.sub-content .tab-con01:after {display:block; clear:both; content:''}
.tab-con01 .dl-state {float:left; width:205px; padding:10px 30px; border-right:1px solid #ddd}
.tab-con01 .dl-state dt {width:100%; text-indent:22px; font-size:16px; font-weight:bold; padding-bottom:6px; border-bottom:1px solid #ddd; background:url('../img/bullet_sub.png') 0 -160px no-repeat}
.tab-con01 .dl-state dd {font-size:12px; margin-top:6px;}
.tab-con01 .dl-state dd em {color:#1fb5a9}
.tab-con01 .dl-state dd.img-gauge01 {width:100%; height:120px; margin-top:28px; text-align:center; line-height:120px; font-size:18px; background:url('../img/img_mycloud_g​auge.png') 42px -100px no-repeat}
.tab-con01 .dl-state dd.img-gauge02 {width:100%; height:120px; margin-top:28px; text-align:center; line-height:120px; font-size:18px; background:url('../img/img_mycloud_g​auge.png') 42px -340px no-repeat}
.tab-con01 .dl-state dd.img-gauge03 {width:100%; height:120px; margin-top:28px; text-align:center; line-height:120px; font-size:18px; background:url('../img/img_mycloud_g​auge.png') 42px -580px no-repeat}
*/

.station-area {position:relative; top:-1px; padding:30px 40px; border:1px solid #ddd}
.station-area h2 {font-size:16px; color:#1fb5a9}
.station-area h2 span {font-weight:normal; font-size:13px; line-height:14px; color:#999}
.station-area a {position:absolute; top:45px; right:35px; display:inline-block; font-weight:bold; padding:18px 45px 14px 95px; border-radius:4px; background:#777 url('../img/icon_mycloud_btn.png') -55px -451px no-repeat; color:#fff}
.station-area a:hover,.station-area a:active {background-color:#888}



/* Table Common, 공지사항 */
.content-area table {width:100%; border-top:2px solid #1fb5a9; border-bottom:1px solid #bbb; border-collapse:collapse; font-size:14px; text-align:center;}
.content-area table th {padding:15px 0; border-bottom:1px solid #bbb; background:#f9f9f9; text-align: center;}
.content-area table td {padding:13px 0; font-size:13px; border-top:1px solid #ddd; background-color: #fff;}
.content-area table td.post {text-align:left}
.content-area table td.text-bold {font-weight:bold; color:#f82a2a}

.content-area .view {text-align:left;}
.content-area .view th {text-align:left; padding:15px 30px}
.content-area .view th.text-right {text-align:right}
.content-area .view td {padding:15px 30px; background-color: #fff;}
.content-area .view td.file {padding:15px 0}
.content-area .view td.td-text {padding:30px 30px}

.content-area .page {width:100%; text-align:center; font-size:12px; margin-top:35px}
.content-area .page a {display:inline-block; width:30px; height:30px; text-align:center; line-height:30px; border:1px solid #ddd}
.content-area .page a:hover,
.content-area .page a:active,
.content-area .page a:focus {width:30px; height:30px; text-align:center; line-height:30px; background:#333; color:#fff}

.content-area p.list-btn {width:100%; margin-top:35px; font-size:14px; font-weight:bold; line-height:40px; text-align:right;}
.content-area p.list-btn a {float:right; display:block; width:80px; height:40px; border-radius:4px; color:#fff; padding-right:20px; background:#1fb5a9 url('../img/icon_notice_list.png') 20px 14px no-repeat;background-size: 12px auto;}
.content-area p.list-btn a:hover,
.content-area p.list-btn a:active,
.content-area p.list-btn a:focus {color:#fff; background:#437981 url('../img/icon_notice_list.png') 20px 14px no-repeat;background-size: 12px auto}

/* 1:1 문의 */
.sub-content .info-text { padding:30px 40px; border:1px solid #ddd; background-color: #fff;}
.sub-content .info-text:after {display:block; clear:both; content:''}
.info-text ul {width:100%;}
.info-text ul li {padding-left:14px; line-height:28px; color:#666; background:url('../img/bullet_sub.png') 0 -226px no-repeat}
.select-area {position:absolute; top:0; right:0}
.select-area select {padding:3px 5px; font-size:12px; border:1px solid #ddd}
.select-area button {width:50px; height:28px; font-size:13px; text-align:center; border-radius:4px; border:0; color:#fff; cursor:pointer; background:#666;}

.sub-content .one-to {clear:both;}
.one-to .inquiry {}
.one-to .inquiry th {padding:20px 0; border-bottom:1px solid #ddd; border-right:1px solid #ddd; text-align: center;}
.one-to .inquiry th img.pa-b {padding-bottom:10px}
.one-to .inquiry th.border-bot {border-bottom:1px solid #bbb}
.one-to .inquiry td {text-align:left; border-bottom:#ddd; padding-left:20px; background-color: #fff;}
.one-to .inquiry td input {width:584px; padding:6px; border:1px solid #ddd}
.one-to .inquiry td input[type="radio"] {width:12px; border:0; vertical-align:middle}
.one-to .inquiry td textarea {width:580px; padding:6px; border:1px solid #ddd}
.one-to .inquiry td ul {}
.one-to .inquiry td ul li {line-height:24px}
.one-to .inquiry td ul li strong {color:#1fb5a9}
.one-to .inquiry td.txt-con {padding:0}

.sub-content .btn-area {width:100%; margin:0 auto; margin-top:30px; text-align:center}
.btn-area a {display:inline-block; width:120px; height:40px; font-size:14px; font-weight:bold; margin-right:20px; line-height:40px; border-radius:4px; color:#fff; background:#1fb5a9}
.btn-area a:hover,
.btn-area a:active,
.btn-area a:focus {background:#437981}
.btn-area a.cancel {background:#666}
.btn-area a.cancel:hover,
.btn-area a.cancel:active,
.btn-area a.cancel:focus {background:#444}

/* 정보 변경 및 비밀번호 변경 */
.change-info {width:60%; margin:0 auto; padding:30px 40px; border-radius:6px; border:1px solid #ccc;background-color: #fff;}
.change-info .info-tit {width:100%; padding-bottom:10px; font-size:22px; font-weight:bold; border-bottom:2px solid #1fb5a9; color:#333}
.change-info .info-tit em {font-size:13px; font-weight:normal; color:#999}
.change-info form {width:100%}
.change-info form legend {display:none}
.change-info .info-change {width:100%}
.change-info .info-change p.info-check {margin-top:20px; padding:15px 0; font-size:13px; font-weight:bold; text-indent:20px; border:1px solid #ddd; border-radius:5px 5px 0 0; color:#1fb5a9; background:#f7f7f7}
.change-info .info-change input[type="checkbox"] {vertical-align:top; margin-top:3px; appearance: checkbox; -webkit-appearance: checkbox; -moz-appearance:checkbox} 
.change-info .info-change ul {padding:10px 20px 10px 25px; border:1px solid #ddd; border-top:0; border-radius:0 0 5px 5px}
.change-info .info-change ul li {font-size:14px; line-height: 45px;}
.change-info .info-change ul li label {display:inline-block; width:25%; color:#666; vertical-align: middle;}
.change-info .info-change ul li input{width:69%; padding:5px 10px; border:1px solid #ddd; line-height:1.4em; outline:none; vertical-align: middle;}
.change-info .info-change ul.pw-change {border-top:1px solid #ddd; margin-top:20px; border-radius:5px}

.change-info .info-btn {width:100%; text-align:center; line-height:45px; font-size:16px; font-weight:bold; margin-top:20px}
.change-info .info-btn a {display:block; width:100%; height:45px; border-radius:6px; color:#fff; background:#1fb5a9}
.change-info .info-btn a:hover,
.change-info .info-btn a:active,
.change-info .info-btn a:focus {background:#437981}


/* 신청관리 */
.sub-content .info-text ol {width:100%; height:120px; margin-left:42px; margin-top:15px}
.info-text ol li {float:left; width:100px; font-size:14px; margin-right:30px; text-align:center; color:#666;}
.info-text ol li.pc-img {width:180px; margin:10px 30px 0 6px; line-height:20px}
.info-text ol li img {margin-bottom:10px}
.info-text ol li em {font-size:16px; font-weight:bold; color:#444; line-height:28px}
.info-text ol li span.step {font-size:13px; font-weight:bold; color:#1fb5a9}
.info-text ol li.arrow {width:18px; height:15px; background:none; margin-top:50px}

.sub-content .vd-change {width:716px; height:80px; padding:40px; text-align:center; border:1px solid #ddd; overflow-y:auto}
.vd-change:after {display:block; clear:both; content:''}
.vd-change ul {width:100%; font-size:13px}
.vd-change ul li {width:100%; height:40px; line-height:30px; text-indent:100px; text-align:left; margin-bottom:10px; border-bottom:1px solid #ddd; background:url('../img/img_apply_desktop.png') 36px 0 no-repeat}
.vd-change ul li span {font-size:13px; margin:0 6px; color:#bbb}
.vd-change ul li em {margin:0; padding:0; font-weight:bold; color:#1fb5a9}
.vd-change ul li input[type="radio"] {vertical-align:middle}
.vd-change ul li label {cursor:pointer}

.sub-content .state {}
.state .show {display:table-row}
.state td {height:45px; padding:0 !important}
.state td.post-text {text-align:left; cursor:pointer;}
.state .hide {display:none; padding-left:30px; cursor:default}
.state td.hide-text {padding:20px 40px !important; text-align:left; background:#f9f9f9}
.state td.hide-text dl {}
.state td.hide-text dl dt {font-weight:bold; margin-bottom:3px; padding-left:14px; color:#666; background:url('../img/bullet_sub.png') 0 -232px no-repeat}
.state td.hide-text dl dd {float:left; margin-right:5px}
.state td.hide-text dl dd span {font-weight:bold; color:#1fb5a9}
.state td.hide-text dl dd.text-pipe {padding-top:1px; font-size:11px; color:#bbb}
.state td.hide-text dl dd.text-in {padding-left:8px}
.state td.hide-text dl dd.text-clear {clear:both; margin-top:3px}
.state td ul.modify-btn {display:inline-block; width:112px; height:23px; margin-top:3px; text-align:center}
.state td ul.modify-btn li {float:left; width:50px; height:23px; font-size:12px;  margin-right:6px; font-weight:bold; line-height:23px;}
.state td ul.modify-btn li a {display:block; width:50px; height:23px; margin:0 3px; border-radius:3px; color:#fff; background:#1fb5a9}
.state td ul.modify-btn li a:hover,
.state td ul.modify-btn li a:active,
.state td ul.modify-btn li a:focus {background:#437981}
.state td ul.modify-btn li a.btn-cancel {background:#666}
.state td ul.modify-btn li a.btn-cancel:hover,
.state td ul.modify-btn li a.btn-cancel:active,
.state td ul.modify-btn li a.btn-cancel:focus {background:#444}

.app-btn {position:absolute; top:-3px; right:0}
.app-btn a {display:block; font-size:13px; padding:5px 10px; border-radius:4px; font-weight:bold; text-align:center; color:#fff; background:#1fb5a9}
.app-btn a:hover,.app-btn a:active,.app-btn a:focus {background:#437981}

.sub-content .app-form {}
.app-form form {}
.app-form form table {}
.app-form form table th {font-size:14px; line-height:30px; padding:15px 0 5px; border-right:1px solid #ddd; border-bottom:1px solid #ddd; color:#999}
.app-form form table th.border-bot {border-bottom:1px solid #bbb}
.app-form form table td {padding:0 0 0 20px}
.app-form form table td.os {padding:15px 0 10px 20px}
.app-form form table td ul {}
.app-form form table td ul li {float:left; width:80px; text-align:center; line-height:16px; margin-right:20px;}
.app-form form table td ul li input {margin:6px 0 6px; vertical-align:middle;}
.app-form form table td ul li label {cursor:pointer}

/* 비밀번호 변경, 신규신청, 사양변경 - Complete */
.content-area .complete-box {width:100%; padding:20px 0; border-radius:6px; border:1px solid #ddd;}
.content-area .complete-box:after {display:block; clear:both; content:''}
.complete-box span.comp-img {float:left; margin:0 40px 0 80px}
.complete-box p.comp-text {margin-top:52px; line-height:24px; color:#999}
.complete-box p.comp-text em {font-size:20px; font-weight:bold; color:#444}
.comp-btn {width:100%; margin:0 auto; margin-top:40px; text-align:center}
.comp-btn a {display:inline-block; width:130px; height:45px; font-size:16px; font-weight:bold; margin-right:20px; line-height:45px; border-radius:6px; color:#fff; background:#1fb5a9}
.comp-btn a:hover,div.comp-btn a:active,div.comp-btn a:focus {background:#437981}
.label-cursor {cursor:pointer}

/* 클라이언트 다운로드 */
.client-down th {}
.client-down td {line-height:20px; padding:20px 0}
.client-down td.program {text-align:left; padding-left:36px; font-size:15px; color:#333}
.client-down td strong {font-size:13px; font-weight:normal; color:#1fb5a9}
.client-down td a {display:inline-block; width:100px; height:35px; text-indent:22px; line-height:35px; border-radius:4px; color:#fff; background:#1fb5a9 url('../img/icon_client_down.png') 12px 10px no-repeat}
.client-down td a:hover,
.client-down td a:active,
.client-down td a:focus {background:#437981 url('../img/icon_client_down.png') 12px 10px no-repeat}

/* 도움말 */
.content-area .help-tab {width:100%;}
.help-tab .tab-list { height:210px; padding:20px 150px 30px; border-bottom:1px solid #eee}
.help-tab .tab-list li {float:left; width:120px; height:160px; line-height:300px; text-align:center; margin-right:150px; font-size:14px;}
.help-tab .tab-list li.mar-right {margin-right:0}
.help-tab .tab-list li a {display:block; width:120px; height:160px;background:url('../img/img_help.png') 0 0 no-repeat}
.help-tab .tab-list li a:hover,.content-area .help-tab .tab-list li a:active,.content-area .help-tab .tab-list li a:focus {text-decoration:underline;}
.help-tab .tab-list li a.help-btn01 {background-position:0 -150px}
.help-tab .tab-list li a.help-btn02 {background-position:0 -420px}
.help-tab .tab-list li a.help-btn03 {background-position:0 -680px}

.content-area .help-con {width:100%; margin-top:50px}
.help-con dt {width:900px; height:30px; line-height:28px; padding:0 0 0 60px; background:url('../img/icon_help.png') 20px -50px no-repeat}
.help-con dt span {font-size:12px; padding-top:-1px; margin:0 5px; color:#bbb}
.help-con dt em {color:#1fb5a9;}
.help-con dd { height:auto; line-height:24px; padding:30px 20px 30px 60px; margin:10px 0 40px; border:1px solid #ddd; background:#f4f4f4 url('../img/icon_help.png') 20px -143px no-repeat}
.help-con dd.help-a {background-position:20px -152px}

/* Tap - type */
.sub-content .tab-type1 {width:100%;}
.sub-content .tab-type1:after {display:block; clear:both; content:''}
.tab-type1 ul {width:100%; height:50px; border-bottom:1px solid #1fb5a9}
.tab-type1 ul li {float:left; width:170px; height:49px; margin-right:2px; text-align:center; line-height:50px}
.tab-type1 ul li a {display:block; width:170px; height:49px; border:1px solid #ddd; border-bottom:0;  border-radius:8px 8px 0 0; background:#f4f4f4}
.tab-type1 ul li a:hover,
.tab-type1 ul li a:active,
.tab-type1 ul li a:focus {width:170px; height:49px; border:1px solid #1fb5a9; border-bottom:1px solid #fff; color:#333; background:#fff}
.tab-type1 ul li a.tap-current {width:170px; height:49px; border:1px solid #1fb5a9; border-bottom:1px solid #fff; color:#333; background:#fff}

.sub-content .tab-type2 {width:100%;}
.sub-content .tab-type2:after {display:block; clear:both; content:''}
.tab-type2 ul {width:100%; height:50px;}
.tab-type2 ul li {float:left; width:50%; height:49px; text-indent:24px; line-height:49px; font-size:14px;}
.tab-type2 ul li a {display:block; width:99.8%; height:49px; color:#999; font-weight:bold; border-top:1px solid #ddd; border-bottom:1px solid #ddd; background:#f9f9f9 url('../img/bullet_sub.png') 350px -66px no-repeat}
.tab-type2 ul li a.current {display:block; width:99.7%; height:48px; line-height:47px; font-weight:bold; border-top:2px solid #1fb5a9; color:#666; background:#fff url('../img/bullet_sub.png') 350px 14px no-repeat}
.tab-type2 ul li a.right-line {border-right:1px solid #ddd}

.btnBox{}
.btnBox .btn{padding:3px 5px; border: none; cursor: pointer; border-radius: 3px; background-color: transparent; outline: none;}
.btnBox .btn.default:hover{color: #1fb5a9;}
/* .vmname .btnBox{position: absolute; top: 1px; left: 95px;} */

.modal_bg{position:fixed; width:100%; height:100%; background: rgba(0,0,0,0.6); left:0; top:0; z-index: 1;}
.jjapModal-area{position:absolute; width:300px; height:100px; background:#fff; text-align: center}
.table-area{}
.table-area table{width: 100%; border-collapse: collapse; border-radius: 10px;}
.table-area table th,.table-area table td{padding: 8px 15px; text-align: center;}
.table-area table th{  background: #f9f9f9;}
.table-area table td{}
.table-area table td input{width: calc(100% - 20px); border:none; border: 1px solid #ddd; padding: 10px;}
#vdSet .modal-body{padding: 15px 20px;}
.noticeBar{display:flex; justify-content:space-between; width: 960px; margin:30px auto -20px; padding:13px 27px; background-color:#1fb5a9; border-radius:5px; color:#fff;}
.noticeBar h3{width: 100px; text-align: center; font-weight: 700;}
.noticeBar .notices{display:flex; align-items: center; width: calc(100% - 100px);}
.noticeBar .notices .nText{overflow:hidden;width: 700px;text-overflow: ellipsis; white-space: nowrap;}
.noticeBar .notices .nText > a{color:#fff;font-size: 14px;}
.noticeBar .notices .nDate{width: 120px; text-align: center; font-size: 14px;}
.noticeBar .notices .nMove{display:inline-block; position:relative; width: 55px; text-align: center; color:#dadce0; font-size: 14px;}
.noticeBar .notices .nMove::before{content: '+'; display: block; position:absolute; top: -5px; right: 0;}


/* 로그인 인증 */
.modal#eAuth{overflow:initial; top: 50%; transform: translateY(-50%); outline: none;}
#eAuth{}
#eAuth .modal-dialog{padding: 0; padding-top: 0; padding-bottom: 0;}
#eAuth .modal-body{padding: 40px 40px 0;}
#eAuth h4{background:none; font-size: 20px; font-weight: 700; text-align: center; color: #202124; }
#eAuth img{display:block; margin: 40px auto 30px;}
#eAuth .eA-text{font-size: 16px;color:#202124; text-align: center;}
#eAuth .eA-input{width:318px; margin:30px 0 60px; padding: 11px; border: 1px solid #dadce0; font-size: 16px;}
#eAuth .eA-input::placeholder{color: #b9b9b9; text-align: center;}
#eAuth  .modal-footer{padding: 0; margin-top: 0; border-top: none;}
#eAuth  .modal-footer a{width:49%; height:60px; line-height:60px; padding: 0; border:none; background-color: #fff; font-size: 16px; color:#202124; text-align: center;} 
#eAuth  .modal-footer a.btn-danger{color:#b9b9b9 ;}
#eAuth  .modal-footer a.btn + .btn{margin-left: 0;}

.snap_info{ margin-top: 30px;  font-size: 12px;  word-break: keep-all;  color: #999;}


.chkqna {margin-top:70px; border-color: transparent; -webkit-box-shadow: 0 5px 15px rgb(0 0 0 / 50%);  box-shadow: 0 5px 15px rgb(0 0 0 / 50%); border-radius: 6px;}
.chkqna__text{text-align: center;}
.chkqna__text span{display: block; margin-bottom:10px;font-size: 34px; color: #1fb5a9;}
.chkqna .info-check label{font-size: 14px;  color:#999}
.chkqna .info-check input[type='checkbox']{-webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; margin-top: -1px; vertical-align: middle; }
.chkqna .modal-footer{padding: 0; margin-top: 0; border-top: none;}
.chkqna .chkqna-btn{display: flex;justify-content: space-between;align-items: center; padding:0 10px} 
.chkqna .chkqna-btn.btn-snap button{margin: 0; padding:2px 5px; font-size: 14px; border-radius: 8px;}
.chkqna .btn-snap button{width:100%;margin:0; border-color:transparent; background-color:transparent; color:#b9b9b9;}
