/* fonts include*/

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

/*common*/

::selection {
    background: #ff8c01;
    color: red;
}

#wrapper {
    width: 800px;
    min-height: 850px;
    margin: 15px auto;
    padding: 40px;
    border: 2px solid #333;
    position: relative;
}

#wrap {
    width: 800px;
    margin: 10px auto;
    padding: 0 40px;
}


/* 반투명 레이어*/

#black_layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #000;
    display: none;
}


/*닫기 버튼*/

.btn_close {
    position: absolute;
    top: 10px;
    right: 15px;
    transition: 0.4s ease all;
    -moz-transition: 0.4s ease all;
    -o-transition: 0.4s ease all;
    -webkit-transition: 0.4s ease all;
    -ms-transition: 0.4s ease all;
}

.btn_close:hover {
    transform: rotate(180deg);
}


/*항목 공통*/

.section {
    padding-bottom: 4px;
}

.section:first-child {
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 25px;
}

h1.tit_calc {
    color: #ff8c01;
    font-size: 30px;
    font-weight: 300;
    letter-spacing: -1px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
}

h2.tit_subject {
    font-size: 18px;
    color: #333;
    font-weight: 500;
    margin: 30px 0 20px;
    position: relative;
}
.calc_indents {
    display: block;
    text-indent: 85px;
}
.btn_memo {
    position: relative;
    display: inline-block;
}

.btn_memo:hover .calc_memo {
    display: block;
}

.btn_memo img {
    cursor: pointer;
}

.calc_memo {
    width: 316px;
    background: #fff9f1;
    border: 1px solid #ff8c01;
    padding: 15px;
    position: absolute;
    top: 4px;
    left: 38px;
    z-index: 999;
    display: none;
}

.calc_memo:after,
.calc_memo:before {
    left: -14px;
    top: 12px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.calc_memo:after {
    border-top-color: #fff9f1;
    border-width: 14px;
    margin-top: -12px;
    margin-left: 2px;
}

.calc_memo:before {
    border-top-color: #ff8c01;
    border-width: 13px;
    margin-top: -13px;
    margin-left: 0;
}

.calc_memo p {
    font-size: 13px;
    color: #333;
    margin: 8px 0;
    line-height: 22px;
    font-weight: 400;
}

.calc_memo .vat {
    margin-top: 15px;
    color: #777;
}

.calc_memo .memo_table {
    width: 100%;
    font-size: 13px;
    font-weight: 300;
}

.calc_memo .memo_table tbody tr td {
    vertical-align: middle;
    padding: 12px 15px;
    text-align: left;
    border-top: 1px solid #eec99d;
    border-bottom: 1px solid #eec99d;
}

.calc_memo .memo_table tbody tr td:last-child {
    background: #fdead4;
}


/*가격 테이블*/

.tbl_service {
    width: 100%;
    border-top: 2px solid #333;
    border-bottom: 1px solid #adadad;
}

.tbl_service th {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    padding: 10px 0;
    line-height: 16px;
    vertical-align: middle;
    border-bottom: 1px solid #adadad;
}

.tbl_service tbody tr {
    border-bottom: 1px solid #f5f5f5
}

.tbl_service tbody tr:last-child {
    border-bottom: none;
}

.tbl_service tbody tr td {
    padding: 6px 0;
    text-align: center;
    font-weight: 300;
    color: #333;
    font-size: 13px;
}

.tbl_service td input {
    height: 38px;
    color: #777;
    font-size: 13px;
    padding: 0 5px;
    vertical-align: middle;
    text-align: left;
    background: #fbfbfb;
    border: 1px solid #bebebe;
    transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    -o-transition: 0.3s ease all;
    -webkit-transition: 0.3s ease all;
    -ms-transition: 0.3s ease all;
}

.tbl_service td input:hover {
    border: 1px solid #333;
    background: #fff;
    color: #333;
    outline: none;
}

.tbl_service td input:focus {
    border: 1px solid #333;
    background: #fff;
    color: #333;
    outline: none;
}


/*추가 / 제거 버튼 */

.btn_adds {
    width: 53px;
    font-size: 13px;
    padding: 8px 0;
    border: 1px solid #333;
    color: #333;
    cursor: pointer;
    transition: 0.4s ease all;
    -moz-transition: 0.4s ease all;
    -o-transition: 0.4s ease all;
    -webkit-transition: 0.4s ease all;
    -ms-transition: 0.4s ease all;
}

.btn_adds:hover {
    background: #333;
    color: #fff;
}

.btn_remove {
    width: 53px;
    font-size: 13px;
    padding: 8px 0;
    border: 1px solid transparent;
    color: #fff;
    background: #999999;
    cursor: pointer;
    transition: 0.4s ease all;
    -moz-transition: 0.4s ease all;
    -o-transition: 0.4s ease all;
    -webkit-transition: 0.4s ease all;
    -ms-transition: 0.4s ease all;
}



/*컴퓨트 서비스 인풋박스*/

.server_name {
    width: 127px;
}

.server_qunt {
    width: 30px;
    text-align: center;
}

.txt_info {
    font-size: 13px;
    color: #777;
}


/*셀렉트 박스 커스터마이징*/
/* .pop_up .select-options {
    display: none;
    position: absolute;
    top:-500px;
    border: 1px solid #666;
}

.pop_up.supreme .select-options {
    top:-341px;
    border-bottom: none;
}

.pop_up.premium .select-options {
    top:-341px;
    border-bottom: none;
} */


.select-hidden {
    display: none;
    visibility: hidden;
    padding-right: 10px;
}

.select {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-size: 13px;
    color: #777;
    width: 166px;
    text-align: left;
}

.compute .select-styled {
    width: 158px;
}
.network .select-styled {
    width: 158px;
}
.storage td:first-child .select-styled {
    width: 167px;
}

.storage td:nth-child(2) .select-styled {
    width: 228px;
}

.storage td:nth-child(3) .select-styled {
    width: 148px;
}

.select-styled {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 228px;
    background: #fbfbfb;
    padding: 0 20px 0 10px;
    height: 38px;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid #777;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    font-size: 13px;
}

.select-styled:after {
    content: "";
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-color: #777 transparent transparent transparent;
    position: absolute;
    top: 16px;
    right: 10px;
}

.select-styled:active:after,
.select-styled.active:after {
    top: 9px;
    border-color: transparent transparent #777 transparent;
}

.select-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #666;
    border-top: none;
    max-height:200px;
    overflow:auto;
}

.select-options li {
    margin: 0;
    padding: 10px;
    color: #777;
    -moz-transition: all 0.15s ease-in;
    -o-transition: all 0.15s ease-in;
    -webkit-transition: all 0.15s ease-in;
    transition: all 0.15s ease-in;
    font-size: 13px;
}

.select-options li:hover {
    color: #fff;
    background: #ff8c01;
}

.select-options li[rel="hide"] {
    display: none;
}


/*부가서비스 추가 영역*/

.cont_toggle {
    cursor: pointer;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    padding: 15px 10px;
}

.addic_service {
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    color: #b99061;
    padding: 0;;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    margin: 30px 0 120px;
    background: #fff;
}

.addic_service .addic_cont {
    display: none;
    padding: 0 25px;
}

.addic_service .btn_plus {
    display: block;
    float: right;
    margin-right: 10px;
}

.addic_service .btn_plus::after {
    content: ' ';
    clear: both;
}


/*하단 고정 영역*/

.fixed_menu {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
}

.view_details {
    width: 136px;
    margin: 0 auto;
    padding: 10px 0;
    font-weight: 400;
    font-size: 13px;
    color: #fff;
    text-align: center;
    background: #333;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
}

.cont_details {
    background: #fff;
    border-top: 2px solid #333;
    padding: 30px;
    display: none;
    z-index: 99999;
}

.cont_details h3 {
    font-size: 18px;
    color: #333;
    font-weight: 400;
    padding-bottom: 20px;
}

.cont_details h3 span {
    font-size: 14px;
    color: #777;
    font-weight: 300;
}

.total_wrap {
    width: 100%;
    background: #333;
    color: #fff;
    text-align: center;
    padding: 15px 0;
}

.total_wrap p {
    width: 585px;
    font-size: 16px;
    font-weight: 300;
    display: inline-block;
    border: 2px solid transparent;
    transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    -webkit-transition: 0.3s ease all;
    -o-transition: 0.3s ease all;
    -ms-transition: 0.3s ease all;
}

.total_wrap p:first-child {
    width: 130px;
    background: #4e4e4e;
}

.total_wrap p:first-child:hover {
    border: 2px solid #4e4e4e;
    background: #fff;
    color: #4e4e4e;
}

.total_wrap p:first-child a {
    display: block;
    padding: 20px 0;
    color: #fff;
}

.total_wrap p:first-child a:hover {
    color: #4e4e4e;
}

.total_wrap p:last-child {
    width: 130px;
    background: #ff8c01;
    border-bottom-right-radius: 10px;
}

.total_wrap p:last-child:hover {
    background: #fff;
    border: 2px solid #ff8c01;
}

.total_wrap p:last-child a {
    display: block;
    padding: 20px 0;
    color: #fff;
}

.total_wrap p:last-child a:hover {
    color: #ff8c01;
}

.total_wrap .total_price .price {
    font-size: 24px;
}

.total_wrap .vat {
    color: #adadad
}


/*lxcloud 예상 견적서*/

.que_info {
    width: 100%;
    border-top: 2px solid #333;
    border-bottom: 1px solid #333;
}

table.que_info tbody tr td {
    vertical-align: middle;
    text-align: left;
    font-size: 13px;
    font-weight: 300;
    border: 1px solid #b5b5b5;
    padding: 2px 10px;
    height: 40px;
}

table.que_info tbody tr td:first-child {
    border-left: 1px solid transparent
}

table.que_info tbody tr td:last-child {
    border-right: 1px solid transparent
}

table.que_info tbody tr td.tit_bld {
    text-align: left;
    font-weight: 500;
    border-right: 1px solid transparent;
}

table.que_info tbody tr:last-child td {
    background: #e4e4e4;
    border-top: 1px solid #333;
    border-top: 1px solid #333;
}

table.que_info tbody tr:last-child td:first-child {
    text-align: left;
    border-right: 1px solid transparent;
    font-weight: 500;
}

table.que_info tbody tr:last-child td:last-child {
    text-align: right;
}

table.que_info tbody tr:last-child td:last-child span {
    font-size: 18px;
    font-weight: 500;
}

table.que_info td input {
    height: 33px;
    color: #777;
    font-size: 16px;
    padding: 0 5px;
    vertical-align: middle;
    text-align: left;
    background: #fbfbfb;
    border: 1px solid #bebebe;
    transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    -o-transition: 0.3s ease all;
    -webkit-transition: 0.3s ease all;
    -ms-transition: 0.3s ease all;
}

table.que_info td input:hover {
    border: 1px solid #333;
    background: #fff;
    color: #333;
    outline: none;
}

table.que_info td input:focus {
    border: 1px solid #333;
    background: #fff;
    color: #333;
    outline: none;
}

table.tbl_service_prt {
    width: 100%;
    border-top: 2px solid #333;
}

table.tbl_service_prt th,
td {
    font-size: 13px;
    padding: 12px 10px;
    border-top: 1px solid #b5b5b5;
}

table.tbl_service_prt thead th {
    font-weight: 500;
    vertical-align: middle;
}

table.tbl_service_prt tbody td {
    font-weight: 300;
    text-align: center;
    vertical-align: middle;
}

table.tbl_service_prt tbody tr:last-child td {
    background: #f2f2f2;
    font-weight: 500;
    text-align: left;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

table.tbl_service_prt tbody tr:last-child td:last-child {
    text-align: right;
}

.info_box ul {
    margin-top: 35px;
}

.info_box ul li {
    background: url(/images/calc/tit_info.gif) 5px 8px no-repeat;
    padding-left: 10px;
    font-size: 13px;
    margin: 8px 0;
}

.btn_box {
    width: 100%;
    text-align: center;
    margin-top: 25px;
}

.btn_box a {
    display: inline-block;
    width: 128px;
    padding: 20px 0;
    color: #fff;
    margin: 0 4px;
    border: 2px solid transparent;
}

.btn_box a.sav_exl {
    background: #333333;
    transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    -webkit-transition: 0.3s ease all;
    -o-transition: 0.3s ease all;
    -ms-transition: 0.3s ease all;
}

.btn_box a.sav_exl:hover {
    color: #333;
    border: 2px solid #333;
    background: #fff;
}

.btn_box a.prt_sht {
    background: #ff8c01;
    border-bottom-right-radius: 15px;
    transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    -webkit-transition: 0.3s ease all;
    -o-transition: 0.3s ease all;
    -ms-transition: 0.3s ease all;
}

.btn_box a.prt_sht:hover {
    color: #ff8c01;
    border: 2px solid #ff8c01;
    background: #fff;
}


/*메일폼*/

.mail_wrap {
    text-align: center;
}

.tit_mail {
    margin-top: 45px;
    font-size: 24px;
    color: #ff8c01;
    font-weight: 300;
}

.date_mail {
    font-size: 13px;
    font-weight: 300;
    margin-top: 20px;
}

.mail_wrap table {
    margin-top: 30px;
}

table.tbl_service_mail {
    width: 716px;
    margin: 30px auto 0;
    border-top: 2px solid #333;
    border-bottom: 1px solid #b5b5b5;
}

table.tbl_service_mail th,
td {
    font-size: 13px;
    padding: 12px 10px;
    border-top: 1px solid #b5b5b5;
}

table.tbl_service_mail thead th {
    font-weight: 500;
    vertical-align: middle;
}

table.tbl_service_mail tbody td {
    font-weight: 300;
    text-align: center;
    vertical-align: middle;
}

table.tbl_service_mail tbody tr.total_amount td {
    padding: 20px 15px;
}

table.tbl_service_mail tbody tr.total_amount td span {
    font-size: 18px;
}


/*라디오 버튼 커스텀*/
.radio_wrap {
    position:relative;
}
.radio_wrap label {
    margin-right: 25px;
}
.radio_wrap input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip:rect(0,0,0,0);
  border: 0;
}
.radio_wrap input[type="radio"] + label {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.radio_wrap input[type="radio"] + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: -2px;
  width: 21px;
  height: 21px;
  text-align: center;
  background: #fafafa;
  border: 1px solid #cacece;
  border-radius: 100%;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
}
.radio_wrap input[type="radio"] + label:active:before,
.radio_wrap input[type="radio"]:checked + label:active:before  {
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.radio_wrap input[type="radio"]:checked + label:before {
  background: #E9ECEE;
  border-color: #adb8c0;
}
.radio_wrap input[type="radio"]:checked + label:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 5px;
  width: 13px;
  height: 13px;
  background: #333;
  border-radius: 100%;
}

.header_memo {
  margin-left: 10px;
}